<template>
    <!-- 右侧流程图 -->
    <div class="flows_body_right">
        <!-- 顶部按钮栏 -->
        <div class="flows_body_right_top">
            <!-- <el-button type="primary" @click="M1Injection"> M1注料</el-button> -->
            <el-button type="primary" @click="normalWorkFlow"> 正常工作</el-button>
            <el-button type="primary" @click="positivePressurePlugging"> 正压排堵</el-button>
            <el-button type="primary" @click="negativePressurePlugging"> 负压排堵</el-button>
            <!-- <el-button type="primary" @click="closeQDValves"> 关气动</el-button> -->
            <el-popconfirm title="请确定是否关闭所有阀门？" @confirm="closeAllValves">
                <template #reference>
                    <el-button type="primary"> 关所有</el-button>
                </template>
            </el-popconfirm>
        </div>
        <div class="flows_body_right_tanks">
            <div class="tank_single">
                <div class="flow_single_title"> M1罐 </div>
                <div class="flow_single_body">
                    <div class="body_name">
                        压力传感器
                    </div>
                    <div class="body_show">
                        <div class="body_show_value">
                            {{ (deviceDataArr[eqStore.eqIndexArr[93]]?.value + 0.04).toFixed(2) || 0 }}
                        </div>
                        <div class="body_show_unit"> Mpa</div>
                    </div>
                </div>
            </div>

            <!-- <div class="tank_single">
                <div class="flow_single_title"> F1罐 </div>
                <div class="flow_single_body">
                    <div class="body_name">
                        称重传感器
                    </div>
                    <div class="body_show">
                        <div class="body_show_value">
                            {{ deviceDataArr[eqStore.eqIndexArr[96]]?.value.toFixed(2)  || 0 }}
                        </div>
                        <div class="body_show_unit"> KG</div>
                    </div>
                </div>
            </div> -->

            <div class="tank_single">
                <div class="flow_single_title"> S1罐 </div>
                <div class="flow_single_body">
                    <div class="body_name">
                        压力传感器
                    </div>
                    <div class="body_show">
                        <div class="body_show_value">
                            {{ (deviceDataArr[eqStore.eqIndexArr[126]]?.value + 0.07).toFixed(2) || 0 }}
                        </div>
                        <div class="body_show_unit"> Mpa</div>
                    </div>
                </div>

                <div class="flow_single_body">
                    <div class="body_name">
                        温度传感器
                    </div>
                    <div class="body_show">
                        <div class="body_show_value">
                            {{ deviceDataArr[eqStore.eqIndexArr[113]]?.value.toFixed(2) || 0 }}
                        </div>
                        <div class="body_show_unit"> °C</div>
                    </div>
                </div>
            </div>

            <div class="tank_single">
                <div class="flow_single_title"> S2罐 </div>
                <div class="flow_single_body">
                    <div class="body_name">
                        压力传感器
                    </div>
                    <div class="body_show">
                        <div class="body_show_value">
                            {{ (deviceDataArr[eqStore.eqIndexArr[90]]?.value + 0.04).toFixed(2) || 0 }}
                        </div>
                        <div class="body_show_unit"> Mpa</div>
                    </div>
                </div>

                <div class="flow_single_body">
                    <div class="body_name">
                        温度传感器
                    </div>
                    <div class="body_show">
                        <div class="body_show_value">
                            {{ deviceDataArr[eqStore.eqIndexArr[88]]?.value.toFixed(2) || 0 }}
                        </div>
                        <div class="body_show_unit"> °C</div>
                    </div>
                </div>
            </div>

        </div>

        <div class="flows_body_right_flows">
            <!-- 右侧流程图内容 -->
            <div class="flows_body_right_content">
                <!-- n22,n23,n24 -->
                <div class="flows">
                    <div class="flow_single">
                        <div class="flow_single_title"> S1-N22 </div>
                        <div class="flow_single_body">
                            <div class="body_show">
                                <i class="icon iconfont icon-waterValve valve">
                                    <i class="icon iconfont icon-fengshan fan"
                                        :class="{ 'icon_fengshan_run': deviceDataArr[eqStore.eqIndexArr[240]]?.value }">
                                    </i>
                                </i>
                            </div>
                        </div>
                        <div class="flow_single_btn">
                            <el-button type="primary" @click="confirmOpen(0, 196)" v-if="!btnRunStatus[0]">
                                启动</el-button>
                            <el-button type="primary" @click="clickClose(0, 196)" v-else>
                                停止</el-button>
                        </div>
                    </div>
                    <div class="flow_single">
                        <div class="flow_single_title"> S2-N23 </div>
                        <div class="flow_single_body">
                            <div class="body_show">
                                <i class="icon iconfont icon-waterValve valve">
                                    <i class="icon iconfont icon-fengshan fan"
                                        :class="{ 'icon_fengshan_run': deviceDataArr[eqStore.eqIndexArr[242]]?.value }">
                                    </i>
                                </i>
                            </div>
                        </div>
                        <div class="flow_single_btn">
                            <el-button type="primary" @click="confirmOpen(1, 198)" v-if="!btnRunStatus[1]">
                                启动</el-button>
                            <el-button type="primary" @click="clickClose(1, 198)" v-else>
                                停止</el-button>
                        </div>
                    </div>

                    <div class="flow_single">
                        <div class="flow_single_title"> S3-N24 </div>
                        <div class="flow_single_body">
                            <div class="body_show">
                                <i class="icon iconfont icon-waterValve valve">
                                    <i class="icon iconfont icon-fengshan fan"
                                        :class="{ 'icon_fengshan_run': btnRunStatus[2] }">
                                    </i>
                                </i>
                            </div>
                        </div>
                        <div class="flow_single_btn">
                            <el-button type="primary" @click="clickOpen(2, 200)" v-if="!btnRunStatus[2]"
                                :disabled="!btnCanClickArr[3]"> 启动</el-button>
                            <el-button type="primary" @click="clickClose(2, 200)" v-else>
                                停止</el-button>
                        </div>
                    </div>
                </div>

                <!-- N12,N15,N16,N17 -->
                <div class="flows">
                    <div class="flow_single">
                        <div class="flow_single_title"> N12 </div>
                        <div class="flow_single_body">
                            <div class="body_show">
                                <i class="icon iconfont icon-waterValve valve">
                                    <i class="icon iconfont icon-fengshan fan"
                                        :class="{ 'icon_fengshan_run': deviceDataArr[eqStore.eqIndexArr[178]]?.value }">
                                    </i>
                                </i>
                            </div>
                        </div>
                        <div class="flow_single_btn">
                            <el-button type="primary" @click="clickOpen(3, 178)" v-if="!deviceDataArr[eqStore.eqIndexArr[178]]?.value"
                                :disabled="!btnCanClickArr[1]">
                                启动</el-button>
                            <el-button type="primary" @click="clickClose(3, 178)" v-else>
                                停止</el-button>
                        </div>
                    </div>
                    <div class="flow_single">
                        <div class="flow_single_title"> N15 </div>
                        <div class="flow_single_body">
                            <div class="body_show">
                                <i class="icon iconfont icon-waterValve valve">
                                    <i class="icon iconfont icon-fengshan fan"
                                        :class="{ 'icon_fengshan_run': deviceDataArr[eqStore.eqIndexArr[184]]?.value }">
                                    </i>
                                </i>
                            </div>
                        </div>
                        <div class="flow_single_btn">
                            <el-button type="primary" @click="clickOpen(4, 184)" v-if="!deviceDataArr[eqStore.eqIndexArr[184]]?.value"
                                :disabled="!btnCanClickArr[2]"> 启动</el-button>
                            <el-button type="primary" @click="clickClose(4, 184)" v-else>
                                停止</el-button>
                        </div>
                    </div>

                    <div class="flow_single">
                        <div class="flow_single_title"> N16 </div>
                        <div class="flow_single_body">
                            <div class="body_show">
                                <i class="icon iconfont icon-waterValve valve">
                                    <i class="icon iconfont icon-fengshan fan"
                                        :class="{ 'icon_fengshan_run': deviceDataArr[eqStore.eqIndexArr[186]]?.value }">
                                    </i>
                                </i>
                            </div>
                        </div>
                        <div class="flow_single_btn">
                            <el-button type="primary" @click="clickOpen(5, 186)" v-if="!deviceDataArr[eqStore.eqIndexArr[186]]?.value">
                                启动</el-button>
                            <el-button type="primary" @click="clickClose(5, 186)" v-else>
                                停止</el-button>
                        </div>
                    </div>

                    <div class="flow_single">
                        <div class="flow_single_title"> N17 </div>
                        <div class="flow_single_body">
                            <div class="body_show">
                                <i class="icon iconfont icon-waterValve valve">
                                    <i class="icon iconfont icon-fengshan fan"
                                        :class="{ 'icon_fengshan_run': deviceDataArr[eqStore.eqIndexArr[188]]?.value }">
                                    </i>
                                </i>
                            </div>
                        </div>
                        <div class="flow_single_btn">
                            <el-button type="primary" @click="clickOpen(6, 188)" v-if="!deviceDataArr[eqStore.eqIndexArr[188]]?.value"
                                :disabled="!btnCanClickArr[4]"> 启动</el-button>
                            <el-button type="primary" @click="clickClose(6, 188)" v-else>
                                停止</el-button>
                        </div>
                    </div>
                </div>

                <!-- LB7 -->
                <div class="flow_single flow_others">
                    <div class="flow_single_title"> LB7 </div>
                    <div class="flow_single_show">
                        <div class="show_body">
                            <div class="show_body_left">
                                变频状态
                            </div>
                            <div class="show_body_right">
                                <div class="show_detail">
                                    <div class="text">
                                        当前
                                    </div>
                                    <div class="body_show">
                                        <div class="body_show_value">
                                            <!-- 108 -->
                                            <!-- s1,s2:98,100 -->
                                            {{ statusWord[deviceDataArr[eqStore.eqIndexArr[108]]?.value] ||
                                                statusWord[4] }}
                                        </div>
                                        <!-- <div class="body_show_unit"> Mpa</div> -->
                                    </div>
                                </div>
                                <div class="show_detail">
                                    <!-- <div class="btn_set"> -->
                                        <!-- 146 -->
                                        <!-- s1,s2:141,142 -->
                                        <!-- <el-button size="small" type="primary" @click="setIntValue(0, 146)">
                                            设置</el-button>
                                    </div> -->
                                    <div class="btn_set">
                                        <el-button size="small" type="primary" @click="setPump(0, 146, true)">
                                            启动</el-button>
                                    </div>
                                    <div class="btn_set">
                                        <el-button size="small" type="primary" @click="setPump(0, 146, false)">
                                            关闭</el-button>
                                    </div>
                                    <!-- <div class="body_set"> -->
                                        <!-- 下拉框 -->
                                        <!-- <div class="body_show_value">
                                            <el-select v-model="setValueArr[0]" size="small" style="width: 75px">
                                                <el-option v-for="item in frequencyOptions" :key="item.value"
                                                    :label="item.label" :value="item.value" />
                                            </el-select>
                                        </div>
                                    </div> -->
                                </div>
                            </div>
                        </div>
                        <div class="show_body">
                            <div class="show_body_left">
                                转速
                            </div>
                            <div class="show_body_right">
                                <div class="show_detail">
                                    <div class="text">
                                        当前
                                    </div>
                                    <div class="body_show">
                                        <div class="body_show_value">
                                            <!-- 123 -->
                                            <!-- s1,s2:118,119 -->
                                            {{ deviceDataArr[eqStore.eqIndexArr[123]]?.value / 50 || 0 }}
                                        </div>
                                        <div class="body_show_unit"> %</div>
                                    </div>
                                </div>
                                <div class="show_detail">
                                    <div class="btn_set">
                                        <!-- 139 -->
                                        <!-- s1,s2:134,135 -->
                                        <el-button size="small" type="primary" @click="setIntValue(1, 139)">
                                            设置</el-button>
                                    </div>
                                    <div class="body_set">
                                        <div class="body_show_value">
                                            <el-input v-model="setValueArr[1]" style="width: 75px" size="small"
                                                type="number" min="0" max="100" />
                                        </div>
                                        <div class="body_show_unit"> %</div>
                                    </div>
                                </div>
                            </div>
                        </div>

                    </div>
                </div>

                <!-- D1 ,D2,N2-->
                <div class="flows">
                    <div class="flow_single">
                        <div class="flow_single_title"> D1 </div>
                        <div class="flow_single_body">
                            <div class="body_show">
                                <i class="icon iconfont icon-waterValve valve">
                                    <i class="icon iconfont icon-fengshan fan"
                                        :class="{ 'icon_fengshan_run': deviceDataArr[eqStore.eqIndexArr[2]]?.value }">
                                    </i>
                                </i>
                            </div>
                        </div>
                        <div class="flow_single_btn">
                            <el-button type="primary" @click="clickOpenDValve(8, 209)" v-if="!btnRunStatus[8]">
                                启动</el-button>
                            <el-button type="primary" @click="clickCloseDValve(8, 209)" v-else-if="btnRunStatus[8]">
                                停止</el-button>
                        </div>
                    </div>
                    <div class="flow_single">
                        <div class="flow_single_title"> D2 </div>
                        <div class="flow_single_body">
                            <div class="body_show">
                                <i class="icon iconfont icon-waterValve valve">
                                    <i class="icon iconfont icon-fengshan fan"
                                        :class="{ 'icon_fengshan_run': deviceDataArr[eqStore.eqIndexArr[5]]?.value }">
                                    </i>
                                </i>
                            </div>
                        </div>
                        <div class="flow_single_btn">
                            <el-button type="primary" @click="clickOpenDValve(9, 211)" v-if="!btnRunStatus[9]">
                                启动</el-button>
                            <el-button type="primary" @click="clickCloseDValve(9, 211)" v-else-if="btnRunStatus[9]">
                                停止</el-button>
                        </div>
                    </div>

                    <div class="flow_single">
                        <div class="flow_single_title"> N2 </div>
                        <div class="flow_single_body">
                            <div class="body_show">
                                <i class="icon iconfont icon-waterValve valve">
                                    <i class="icon iconfont icon-fengshan fan"
                                        :class="{ 'icon_fengshan_run': deviceDataArr[eqStore.eqIndexArr[156]]?.value }">
                                    </i>
                                </i>
                            </div>
                        </div>
                        <div class="flow_single_btn">
                            <el-button type="primary" @click="clickOpen(10, 156)" v-if="!deviceDataArr[eqStore.eqIndexArr[156]]?.value">
                                启动</el-button>
                            <el-button type="primary" @click="clickClose(10, 156)" v-else>
                                停止</el-button>
                        </div>
                    </div>
                </div>
                <!-- D3,D4,N3 -->
                <div class="flows">
                    <div class="flow_single">
                        <div class="flow_single_title"> D3 </div>
                        <div class="flow_single_body">
                            <div class="body_show">
                                <i class="icon iconfont icon-waterValve valve">
                                    <i class="icon iconfont icon-fengshan fan"
                                        :class="{ 'icon_fengshan_run': deviceDataArr[eqStore.eqIndexArr[28]]?.value }">
                                    </i>
                                </i>
                            </div>
                        </div>
                        <div class="flow_single_btn">
                            <el-button type="primary" @click="clickOpenDValve(11, 226)" v-if="!btnRunStatus[11]">
                                启动</el-button>
                            <el-button type="primary" @click="clickCloseDValve(11, 226)" v-else-if="btnRunStatus[11]">
                                停止</el-button>
                        </div>
                    </div>
                    <div class="flow_single">
                        <div class="flow_single_title"> D4 </div>
                        <div class="flow_single_body">
                            <div class="body_show">
                                <i class="icon iconfont icon-waterValve valve">
                                    <i class="icon iconfont icon-fengshan fan"
                                        :class="{ 'icon_fengshan_run': deviceDataArr[eqStore.eqIndexArr[31]]?.value }">
                                    </i>
                                </i>
                            </div>
                        </div>
                        <div class="flow_single_btn">
                            <el-button type="primary" @click="clickOpenDValve(12, 228)" v-if="!btnRunStatus[12]"
                                :disabled="!btnCanClickArr[2]"> 启动</el-button>
                            <el-button type="primary" @click="clickCloseDValve(12, 228)" v-else-if="btnRunStatus[12]">
                                停止</el-button>
                        </div>
                    </div>

                    <div class="flow_single">
                        <div class="flow_single_title"> N3 </div>
                        <div class="flow_single_body">
                            <div class="body_show">
                                <i class="icon iconfont icon-waterValve valve">
                                    <i class="icon iconfont icon-fengshan fan"
                                        :class="{ 'icon_fengshan_run': deviceDataArr[eqStore.eqIndexArr[158]]?.value }">
                                    </i>
                                </i>
                            </div>
                        </div>
                        <div class="flow_single_btn">
                            <el-button type="primary" @click="clickOpen(13, 158)" v-if="!deviceDataArr[eqStore.eqIndexArr[158]]?.value">
                                启动</el-button>
                            <el-button type="primary" @click="clickClose(13, 158)" v-else>
                                停止</el-button>
                        </div>
                    </div>
                </div>
                <!-- LB6 -->
                <div class="flow_single flow_others">
                    <div class="flow_single_title"> LB6 </div>
                    <div class="flow_single_show">
                        <div class="show_body">
                            <div class="show_body_left">
                                变频状态
                            </div>
                            <div class="show_body_right">
                                <div class="show_detail">
                                    <div class="text">
                                        当前
                                    </div>
                                    <div class="body_show">
                                        <div class="body_show_value">
                                            {{ statusWord[deviceDataArr[eqStore.eqIndexArr[106]]?.value] ||
                                                statusWord[3] }}
                                        </div>
                                    </div>
                                </div>
                                <div class="show_detail">
                                    <!-- <div class="btn_set">
                                        <el-button size="small" type="primary" @click="setIntValue(2, 145)">
                                            设置</el-button>
                                    </div> -->
                                    <div class="btn_set">
                                        <el-button size="small" type="primary" @click="setPump(2, 145, true)">
                                            启动</el-button>
                                    </div>
                                    <div class="btn_set">
                                        <el-button size="small" type="primary" @click="setPump(2, 145, false)">
                                            关闭</el-button>
                                    </div>
                                    <!-- <div class="body_set"> -->
                                        <!-- 下拉框 -->
                                        <!-- <div class="body_show_value">
                                            <el-select v-model="setValueArr[2]" size="small" style="width: 75px">
                                                <el-option v-for="item in frequencyOptions" :key="item.value"
                                                    :label="item.label" :value="item.value" />
                                            </el-select>
                                        </div>
                                    </div> -->
                                </div>
                            </div>
                        </div>
                        <div class="show_body">
                            <div class="show_body_left">
                                转速
                            </div>
                            <div class="show_body_right">
                                <div class="show_detail">
                                    <div class="text">
                                        当前
                                    </div>
                                    <div class="body_show">
                                        <div class="body_show_value">
                                            {{ deviceDataArr[eqStore.eqIndexArr[122]]?.value / 50 || 0 }}
                                        </div>
                                        <div class="body_show_unit"> %</div>
                                    </div>
                                </div>
                                <div class="show_detail">
                                    <div class="btn_set">
                                        <el-button size="small" type="primary" @click="setIntValue(3, 138)">
                                            设置</el-button>
                                    </div>
                                    <div class="body_set">
                                        <div class="body_show_value">
                                            <el-input v-model="setValueArr[3]" style="width: 75px" size="small"
                                                type="number" min="0" max="100" />
                                        </div>
                                        <div class="body_show_unit"> %</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- N19 -->
                <div class="flow_single">
                    <div class="flow_single_title"> N19 </div>
                    <div class="flow_single_body">
                        <div class="body_show">
                            <i class="icon iconfont icon-waterValve valve">
                                <i class="icon iconfont icon-fengshan fan"
                                    :class="{ 'icon_fengshan_run': deviceDataArr[eqStore.eqIndexArr[192]]?.value }">
                                </i>
                            </i>
                        </div>
                    </div>
                    <div class="flow_single_btn">
                        <el-button type="primary" @click="clickOpen(15, 192)" v-if="!deviceDataArr[eqStore.eqIndexArr[192]]?.value">
                            启动</el-button>
                        <el-button type="primary" @click="clickClose(15, 192)" v-else>
                            停止</el-button>
                    </div>
                </div>


                <!-- N14 -->
                <div class="flow_single">
                    <div class="flow_single_title"> N14 </div>
                    <div class="flow_single_body">
                        <div class="body_show">
                            <i class="icon iconfont icon-waterValve valve">
                                <i class="icon iconfont icon-fengshan fan"
                                    :class="{ 'icon_fengshan_run': deviceDataArr[eqStore.eqIndexArr[182]]?.value }">
                                </i>
                            </i>
                        </div>
                    </div>
                    <div class="flow_single_btn">
                        <el-button type="primary" @click="clickOpen(16, 182)" v-if="!deviceDataArr[eqStore.eqIndexArr[182]]?.value">
                            启动</el-button>
                        <el-button type="primary" @click="clickClose(16, 182)" v-else>
                            停止</el-button>
                    </div>
                </div>

                <!-- N18 -->
                <div class="flow_single">
                    <div class="flow_single_title"> N18 </div>
                    <div class="flow_single_body">
                        <div class="body_show">
                            <i class="icon iconfont icon-waterValve valve">
                                <i class="icon iconfont icon-fengshan fan"
                                    :class="{ 'icon_fengshan_run': deviceDataArr[eqStore.eqIndexArr[190]]?.value }">
                                </i>
                            </i>
                        </div>
                    </div>
                    <div class="flow_single_btn">
                        <el-button type="primary" @click="clickOpen(17, 190)" v-if="!deviceDataArr[eqStore.eqIndexArr[190]]?.value">
                            启动</el-button>
                        <el-button type="primary" @click="clickClose(17, 190)" v-else>
                            停止</el-button>
                    </div>
                </div>

                <!-- N20-->
                <div class="flow_single">
                    <div class="flow_single_title"> N20 </div>
                    <div class="flow_single_body">
                        <div class="body_show">
                            <i class="icon iconfont icon-waterValve valve">
                                <i class="icon iconfont icon-fengshan fan"
                                    :class="{ 'icon_fengshan_run': deviceDataArr[eqStore.eqIndexArr[194]]?.value }">
                                </i>
                            </i>
                        </div>
                    </div>
                    <div class="flow_single_btn">
                        <el-button type="primary" @click="clickOpen(18, 194)" v-if="!deviceDataArr[eqStore.eqIndexArr[194]]?.value">
                            启动</el-button>
                        <el-button type="primary" @click="clickClose(18, 194)" v-else>
                            停止</el-button>
                    </div>
                </div>

                <!-- test -->
                <div class="flows" v-if="showValves">
                    <!-- <div class="flow_single">
                        <div class="flow_single_title"> D8 </div>
                        <div class="flow_single_body">
                            <div class="body_show">
                                <i class="icon iconfont icon-waterValve valve">
                                    <i class="icon iconfont icon-fengshan fan"
                                        :class="{ 'icon_fengshan_run': btnRunStatus[19] }">
                                    </i>
                                </i>
                            </div>
                        </div>
                        <div class="flow_single_btn">
                            <el-button type="primary" @click="clickOpenDValve(19, 230)" v-if="!btnRunStatus[19]">
                                启动</el-button>
                            <el-button type="primary" @click="clickCloseDValve(19, 230)" v-else-if="btnRunStatus[19]">
                                停止</el-button>
                        </div>
                    </div>
                    <div class="flow_single">
                        <div class="flow_single_title"> D9 </div>
                        <div class="flow_single_body">
                            <div class="body_show">
                                <i class="icon iconfont icon-waterValve valve">
                                    <i class="icon iconfont icon-fengshan fan"
                                        :class="{ 'icon_fengshan_run': btnRunStatus[20] }">
                                    </i>
                                </i>
                            </div>
                        </div>
                        <div class="flow_single_btn">
                            <el-button type="primary" @click="clickOpenDValve(20, 232)" v-if="!btnRunStatus[20]">
                                启动</el-button>
                            <el-button type="primary" @click="clickCloseDValve(20, 232)" v-else-if="btnRunStatus[20]">
                                停止</el-button>
                        </div>
                    </div> -->

                    <div class="flow_single">
                        <div class="flow_single_title"> D16 </div>
                        <div class="flow_single_body">
                            <div class="body_show">
                                <i class="icon iconfont icon-waterValve valve">
                                    <i class="icon iconfont icon-fengshan fan"
                                        :class="{ 'icon_fengshan_run': btnRunStatus[21] }">
                                    </i>
                                </i>
                            </div>
                        </div>
                        <div class="flow_single_btn">
                            <el-button type="primary" @click="clickOpenDValve(21, 234)" v-if="!btnRunStatus[21]">
                                启动</el-button>
                            <el-button type="primary" @click="clickCloseDValve(21, 234)" v-else-if="btnRunStatus[21]">
                                停止</el-button>
                        </div>
                    </div>

                    <div class="flow_single">
                        <div class="flow_single_title"> N13 </div>
                        <div class="flow_single_body">
                            <div class="body_show">
                                <i class="icon iconfont icon-waterValve valve">
                                    <i class="icon iconfont icon-fengshan fan"
                                        :class="{ 'icon_fengshan_run': deviceDataArr[eqStore.eqIndexArr[180]]?.value }">
                                    </i>
                                </i>
                            </div>
                        </div>
                        <div class="flow_single_btn">
                            <el-button type="primary" @click="clickOpen(22, 180)" v-if="!deviceDataArr[eqStore.eqIndexArr[180]]?.value">
                                启动</el-button>
                            <el-button type="primary" @click="clickClose(22, 180)" v-else>
                                停止</el-button>
                        </div>
                    </div>

                    <!-- <div class="flow_single">
                        <div class="flow_single_title"> N14 </div>
                        <div class="flow_single_body">
                            <div class="body_show">
                                <i class="icon iconfont icon-waterValve valve">
                                    <i class="icon iconfont icon-fengshan fan"
                                        :class="{ 'icon_fengshan_run': btnRunStatus[23] }">
                                    </i>
                                </i>
                            </div>
                        </div>
                        <div class="flow_single_btn">
                            <el-button type="primary" @click="clickOpen(23, 182)" v-if="!btnRunStatus[23]">
                                启动</el-button>
                            <el-button type="primary" @click="clickClose(23, 182)" v-else-if="btnRunStatus[23]">
                                停止</el-button>
                        </div>
                    </div>

                    <div class="flow_single">
                        <div class="flow_single_title"> N3 </div>
                        <div class="flow_single_body">
                            <div class="body_show">
                                <i class="icon iconfont icon-waterValve valve">
                                    <i class="icon iconfont icon-fengshan fan"
                                        :class="{ 'icon_fengshan_run': btnRunStatus[24] }">
                                    </i>
                                </i>
                            </div>
                        </div>
                        <div class="flow_single_btn">
                            <el-button type="primary" @click="clickOpen(24, 158)" v-if="!btnRunStatus[24]">
                                启动</el-button>
                            <el-button type="primary" @click="clickClose(24, 158)" v-else-if="btnRunStatus[24]">
                                停止</el-button>
                        </div>
                    </div> -->

                    <div class="flow_single">
                        <div class="flow_single_title"> N5 </div>
                        <div class="flow_single_body">
                            <div class="body_show">
                                <i class="icon iconfont icon-waterValve valve">
                                    <i class="icon iconfont icon-fengshan fan"
                                        :class="{ 'icon_fengshan_run': deviceDataArr[eqStore.eqIndexArr[162]]?.value }">
                                    </i>
                                </i>
                            </div>
                        </div>
                        <div class="flow_single_btn">
                            <el-button type="primary" @click="clickOpen(25, 162)" v-if="!deviceDataArr[eqStore.eqIndexArr[162]]?.value">
                                启动</el-button>
                            <el-button type="primary" @click="clickClose(25, 162)" v-else>
                                停止</el-button>
                        </div>
                    </div>
                </div>

            </div>

        </div>
    </div>
</template>

<script setup>
import { openElMessageBox, openElMessage, openElWarnMessage } from '@/utils/message';
import { onMounted, ref, watch, onUnmounted } from 'vue';
import { setCoil, getValues, getEquipmentIndexList, setIntRegister, setCoils } from '@/api/dcs/flowControl';
import { wsClient } from '@/utils/ws/websocket.js';
import useEqStore from '@/store/modules/dcs';
import $modal from '@/plugins/modal'
const eqStore = useEqStore();
//TODO 隐藏阀门是否显示
const showValves = ref(true)
onMounted(() => {
    getEquipmentIndexList().then(res => {
        // console.log('getEquipmentIndexList');
        eqStore.setEqIndexArr(res.data);
    })
    // deviceDataArr.value = Array.from({ length: 300 }, () => ({ value: false, address: 0 }))
    // console.log(eqStore.eqIndexArr);
    // console.log(deviceDataArr.value)
    wsClient.connect((success) => {
        if (success) console.log("WebSocket 连接成功");
    });
    wsClient.ws.onmessage = (event) => {
        // console.log("收到消息:", event.data);
        deviceDataArr.value = JSON.parse(event.data);
        // console.log('deviceDataArr', deviceDataArr.value)
    };
})
//初始化按钮运行状态
function initBtnRunStatua() {
    // console.log(eqStore.eqIndexArr)
    //M2流程设备id数组
    const equipmentIdArr = [196, 198, 200, 178, 184, 186, 188, 0, 2, 5, 156, 28, 31, 158, 0, 192, 182, 190, 194]
    for (let i = 0; i < equipmentIdArr.length; i++) {
        if (i === 0) {
            btnRunStatus.value[i] = false;
            continue;
        } else {
            btnRunStatus.value[i] = deviceDataArr.value[eqStore.eqIndexArr[equipmentIdArr[i]]]?.value;
        }
    }
}

//设备数据
const deviceDataArr = ref([]);
const justRunFirst = ref(true)
//监听deviceDataArr变化
let stopWatch = null;
stopWatch = watch(() => deviceDataArr?.value, (newValue, oldValue) => {
    // console.log(Object.keys(eqStore.eqIndexArr).length)
    if (newValue !== oldValue && justRunFirst.value && Object.keys(eqStore.eqIndexArr).length > 0) {
        initBtnRunStatua();
        justRunFirst.value = false;
        stopWatch();
    }
});
//设置值
const setValueArr = ref([1, 0, 1, 0])

//变频器频率选项
const frequencyOptions = [
    {
        value: 1,
        label: '正转',
    },
    {
        value: 2,
        label: '反转',
    },
    {
        value: 5,
        label: '停止',
    }
]
// 设置泵
function setPump(index, equipmentId, value) {
    const open = 0;
    const close = 2;
    setValueArr.value[index] = value ? frequencyOptions[open].value : frequencyOptions[close].value;
    setIntValue(index, equipmentId);
}
//设置整型数据
function setIntValue(index, equipmentId) {
    const address = deviceDataArr.value[eqStore.eqIndexArr[equipmentId]].address;
    const specialIndices = [1, 3]; // 1:LB7 3:LB6
    const value = setValueArr.value[index];
    const param = {
        dataArr: specialIndices.includes(index) ? [value * 50] : [value],
        startAddress: address,
    }
    setIntRegister(param).then(res => {
        // console.log(res);
    })
}
//变频状态字
const statusWord = ref(['', '正转', '反转', '停机', '故障'])
//s1s2专用
const statusWord_S = ref(['','反转','正转', '停机', '故障'])
//正常工作流程步骤
const step = ref(1)
//设备运行状态
const deviceRunStatus = ref(Array(30).fill(false));
//按钮点击状态(开启，关闭)
const btnRunStatus = ref(Array(30).fill(false));
//按钮是否可点击
const btnCanClickArr = ref(Array(30).fill(true));

//监控step值
watch(() => step.value, (newValue, oldValue) => {
    eqStore.setM2Step(newValue);
    switch (newValue) {
        case 3:
            openElMessageBox('打开N12、N15、N16、N17', '提示')
            break;
        case 4:
            openElMessageBox('关闭D1、D2、N2', '提示')
            break;
        case 5:
            openElMessage('关闭N22')
            break;
        case 6:
            openElMessageBox('关闭N12、N15、N16、N17', '提示')
            break;
        case 7:
            openElMessageBox('打开D1、D2、N2', '提示')
            break;
        case 8:
            openElMessageBox('手动打开底部阀门N19,将残渣排出', '提示')
            break;
    }
});

//正常工作流程
function normalWorkFlow() {
    openElMessageBox('当S1/S2/S3达到条件后且M1或Z1注满,打开对应的N22/N23/N24,排空S1/S2/S3', '提示');
    step.value = 2;
}
//监控N22，N23，N24设备运行状态
watch(() => btnRunStatus.value[0], (newValue, oldValue) => {
    if (newValue && step.value == 2) {
        step.value = 3;
    }
});
watch(() => btnRunStatus.value[1], (newValue, oldValue) => {
    if (newValue && step.value == 2) {
        step.value = 3;
    }
});
watch(() => btnRunStatus.value[2], (newValue, oldValue) => {
    if (newValue && step.value == 2) {
        step.value = 3;
    }
});
//监控N12,N15,N16,N17设备运行状态
const watchSources1 = [
    () => btnRunStatus.value[3], // N12
    () => btnRunStatus.value[4], // N15
    () => btnRunStatus.value[5], // N16
    () => btnRunStatus.value[6], // N17
];
// 合并监听
watch(watchSources1, ([n12, n15, n16, n17]) => {
    if (n12 && n15 && n16 && n17 && step.value == 3) {
        openElMessageBox('等3秒后打开LB7', '提示')
    }
    if (!n12 && !n15 && !n16 && !n17 && step.value == 6) {
        openElMessageBox('等3秒后关闭LB7', '提示')
    }
});

//监控LB7
watch(() => deviceDataArr.value[eqStore.eqIndexArr[108]]?.value, (newValue, oldValue) => {
    if ((newValue == 1 || newValue == 2) && step.value == 3) {
        step.value = 4;
    }
    if (newValue == 3 && step.value == 6) {
        step.value = 7;
    }
});
//监控D1,D2,N2
const watchSources = [
    () => deviceDataArr.value[eqStore.eqIndexArr[2]]?.value, // D1
    () => deviceDataArr.value[eqStore.eqIndexArr[5]]?.value, // D2
    () => btnRunStatus.value[10],                         // N2
];
// 合并监听
watch(watchSources, ([d1, d2, n2]) => {
    if (!d1 && !d2 && !n2 && step.value === 4) {
        openElMessageBox('打开D3、D4、N3', '提示');
    }
    if (d1 && d2 && n2 && step.value === 7) {
        openElMessageBox('关闭D3、D4、N3', '提示');
    }
});

//监控D3,D4,N3
const watchSources2 = [
    () => deviceDataArr.value[eqStore.eqIndexArr[28]]?.value, // D3
    () => deviceDataArr.value[eqStore.eqIndexArr[31]]?.value, // D4
    () => btnRunStatus.value[13],                         // N3
];
// 合并监听
watch(watchSources2, ([d3, d4, n3]) => {
    if (d3 && d4 && n3 && step.value === 4) {
        step.value = 5;
    }
    if (!d3 && !d4 && !n3 && step.value === 7) {
        step.value = 8;
    }
});

//监控N22
watch(() => btnRunStatus.value[0], (newValue, oldValue) => {
    if (!newValue && step.value == 5) {
        openElMessageBox('3秒后关闭LB6', '提示');
    }
});

//监控LB6
watch(() => deviceDataArr.value[eqStore.eqIndexArr[106]]?.value, (newValue, oldValue) => {
    if (newValue == 1 || newValue == 2) {
        if (step.value == 5) {
            step.value = 6;
        }
    }
});


//关闭所有阀门
function closeAllValves() {
    deviceRunStatus.value = Array(30).fill(false);
    if (step2.value == 1) {
        step2.value += 1;
    }
    const param1 = {
        dataArr: [false, false, false, false, false, false, false, false, false, false, false, false, false, true, false, true, false, true, false, true, false, true, false, true, false, true, false, true],
        startAddress: deviceDataArr.value[eqStore.eqIndexArr[154]].address,
        quantity: 28,
    }
    const param2 = {
        dataArr: [false, false, false, false, false, false, false, false, false, false, false, false, false, true, false, true, false, true, false, true, false, true],
        startAddress: deviceDataArr.value[eqStore.eqIndexArr[178]].address,
        quantity: 22,
    }
    setCoils(param1).then(res => {
        // console.log(res);
    })
    setCoils(param2).then(res => {
        // console.log(res);
    })
}



//正压排堵
function positivePressurePlugging() {
    openElMessageBox('N14在堵的时候打开一段时间后再关闭', '提示');
}
//负压排堵步骤
const step2 = ref(1)
//负压排堵
function negativePressurePlugging() {
    step2.value = 1;
    openElMessageBox('请确认没有压力的情况下,点击“关所有”按钮关闭所有阀门', '提示');
}

//监听step2值
watch(() => step2.value, (newValue, oldValue) => {
    eqStore.setM2Step2(newValue);
    switch (newValue) {
        case 2:
            openElMessage('请打开N18阀门');
            break;
        case 3:
            openElMessage('反复开关5次N16阀门,最终关闭N16阀门');
            break;
        case 4:
            openElMessage('打开N20');
            break;
        case 5:
            openElMessage('5秒后请关闭N20阀门');
            break;
        case 6:
            openElMessage('反复开关5次N17阀门,最终关闭N17阀门');
            break
        case 7:
            openElMessage('打开N20等5秒(查看压力表等于大气压力)');
            break
    }
});
//监控N18
watch(() => btnRunStatus.value[17], (newValue, oldValue) => {
    if (newValue && step2.value == 2) {
        step2.value = 3;
    }
});
//记录开关N16阀门次数
let switchN16Count = 0;
//监控N16
watch(() => btnRunStatus.value[5], (newValue, oldValue) => {
    if (!newValue && step2.value == 3) {
        switchN16Count++;
        if (switchN16Count == 3) {
            step2.value = 4;
        }
    }
});
//监控N20
watch(() => btnRunStatus.value[18], (newValue, oldValue) => {
    if (newValue && step2.value == 4) {
        step2.value = 5;
    }
    if (!newValue && step2.value == 5) {
        step2.value = 6;
    }
});
//记录开关N17阀门次数
let switchN17Count = 0;
//监控N17
watch(() => btnRunStatus.value[6], (newValue, oldValue) => {
    if (!newValue && step2.value == 6) {
        switchN17Count++;
        if (switchN17Count == 3) {
            step2.value = 7;
        }
    }
});
//二次确认
function confirmOpen(index, equipmentId) {
    $modal.confirm("再次确认开启").then(() => {
        clickOpen(index, equipmentId)
    })
}
//开启按钮
function clickOpen(index, equipmentId) {
    const address = deviceDataArr.value[eqStore.eqIndexArr[equipmentId]].address;

    //按钮点击状态置为false
    btnRunStatus.value[index] = true;
    //设备运行状态置为true(调用接口)
    deviceRunStatus.value[index] = true;
    const param = {
        dataArr: [true],
        startAddress: address,
    }
    setCoil(param).then(res => {
        // console.log(res);
    })
}
//关闭按钮
function clickClose(index, equipmentId) {
    const address = deviceDataArr.value[eqStore.eqIndexArr[equipmentId]].address;
    //按钮点击状态置为true
    btnRunStatus.value[index] = false;
    //设备运行状态置为false(调用接口)
    deviceRunStatus.value[index] = false;

    const param = {
        dataArr: [false],
        startAddress: address,
    }
    setCoil(param).then(res => {
        // console.log(res);
    })
}

//d阀门开启按钮
function clickOpenDValve(index, equipmentId) {
    const address = deviceDataArr.value[eqStore.eqIndexArr[equipmentId]].address;
    //按钮点击状态置为true
    btnRunStatus.value[index] = true;
    //设备运行状态置为true(调用接口)
    deviceRunStatus.value[index] = true;
    const param = {
        dataArr: [true, false],
        startAddress: address,
        quantity: 2,
    }
    setCoils(param).then(res => {
        // console.log(res);
    })
}
//d阀门关闭按钮
function clickCloseDValve(index, equipmentId) {
    const address = deviceDataArr.value[eqStore.eqIndexArr[equipmentId]].address;
    //按钮点击状态置为true
    btnRunStatus.value[index] = false;
    //设备运行状态置为false(调用接口)
    deviceRunStatus.value[index] = false;
    const param = {
        dataArr: [false, true],
        startAddress: address,
        quantity: 2,
    }
    setCoils(param).then(res => {
        // console.log(res);
    })
}
</script>

<style lang="scss" scoped>
.flows_body_right {
    width: 1495px;
    border: 1px solid rgba(37, 147, 228, 0.5);
    box-shadow: 0px 0px 8.8px 3px rgba(126, 230, 246, 0.2) inset;
    margin: 10px 30px;
    padding: 15px;
    background-color: #0b172c;

    .flows_body_right_top {
        margin: 10px;
    }

    .flows_body_right_tanks {
        display: flex;

        .tank_single {
            width: 245px;
            // height: 235px;
            display: flex;
            padding: 4px;
            flex-direction: column;
            align-items: center;
            gap: 10px;
            border-radius: 5px;
            border: 1px solid #72E0FF;
            margin: 10px;

            .flow_single_title {
                display: flex;
                padding: 4px 8px;
                justify-content: center;
                align-items: center;
                gap: 10px;
                align-self: stretch;
                // color: aliceblue;
                color: #76E1FF;
                font-size: 21px;
                font-weight: bold;
                // text-align: center;
                border-radius: 0px 0px 5px 5px;
                background: #192846;
            }

            .flow_single_body {
                display: flex;
                color: aliceblue;
                align-items: center;
                // justify-content: space-between;
                width: -webkit-fill-available;

                .body_name {
                    min-width: 90px;
                    color: #008BB1;
                    font-family: OPPOSans;
                    font-size: 17px;
                    font-style: normal;
                    font-weight: 600;
                    line-height: normal;
                    margin-left: 10px;
                }

                .body_show {
                    display: flex;
                    align-items: center;
                    margin-right: 45px;
                    gap: 5px;

                    .valve {
                        //银色
                        color: #C7D2E0;
                        font-size: 50px !important;
                        position: relative;
                        margin-left: 18px;

                        //风扇旋转
                        @keyframes rotate {
                            from {
                                transform: rotate(0deg);
                            }

                            to {
                                transform: rotate(360deg);
                            }
                        }

                        .fan {
                            color: #bdbb3b;
                            position: absolute;
                            // left: 32%;
                            // top: 45%;
                            // font-size: 20px !important;
                            left: 14%;
                            top: 31%;
                            font-size: 36px !important;
                        }

                        //运行
                        .icon_fengshan_run {
                            display: inline-block;
                            /* 让 transform 生效 */
                            animation: rotate 1s linear infinite;
                            color: #2fb31e;
                        }
                    }




                    :deep(.el-switch) {
                        .el-switch__label {
                            color: #FFF;
                        }

                        .el-switch__label.is-active {
                            color: var(--el-color-primary);
                        }

                        .el-switch__core {
                            height: 25px;
                            min-width: 50px;
                        }
                    }

                    .body_show_value {
                        display: flex;
                        width: 82px;
                        padding: 6px 0px;
                        justify-content: center;
                        align-items: flex-start;
                        gap: 10px;
                        border-radius: 3px;
                        border: 1px solid #B8CEE5;
                        // background: #EDF7FF;
                        color: #66ccff;

                        :deep(.el-input--small) {
                            height: 18px;
                            text-align: center;
                        }
                    }

                    .body_show_unit {
                        margin-left: 10px;
                    }
                }
            }
        }
    }

    .flows_body_right_flows {
        :deep(.flow_arrow) {

            .el-progress-bar__outer {
                background-color: transparent !important;
                /* 设置背景透明 */
            }

            .el-progress-bar__inner--striped {
                background-image:
                    linear-gradient(45deg, transparent 50%, #141414 50%),
                    linear-gradient(135deg, transparent 50%, #141414 50%) !important;
                background-size: 15px;
            }
        }


        .flows_body_right_content,
        .flows_body_right_tanks,
        .dialog_content {
            margin-top: 50px;
            display: flex;
            flex-wrap: wrap;
            gap: 100px;
            align-items: center;

            .just_show {
                height: 100px;
            }

            .flows {
                display: flex;
            }

            .flow_single {
                width: 100px;
                display: flex;
                padding: 4px;
                flex-direction: column;
                align-items: center;
                gap: 3px;
                border-radius: 5px;
                border: 1px solid #72E0FF;

                .flow_single_title {
                    display: flex;
                    padding: 4px 8px;
                    justify-content: center;
                    align-items: center;
                    gap: 10px;
                    align-self: stretch;
                    // color: aliceblue;
                    color: #76E1FF;
                    font-size: 21px;
                    font-weight: bold;
                    border-radius: 0px 0px 5px 5px;
                    background: #192846;
                }

                .flow_single_body {
                    display: flex;
                    color: aliceblue;
                    align-items: center;
                    // justify-content: space-between;
                    justify-content: center;
                    width: -webkit-fill-available;

                    .body_name {
                        min-width: 90px;
                        color: #008BB1;
                        font-family: OPPOSans;
                        font-size: 17px;
                        font-style: normal;
                        font-weight: 600;
                        line-height: normal;
                        margin-left: 10px;
                    }

                    .body_show {
                        display: flex;
                        align-items: center;
                        // margin-right: 45px;
                        gap: 5px;

                        .valve {
                            //银色
                            color: #C7D2E0;
                            font-size: 50px !important;
                            position: relative;
                            // margin-left: 18px;

                            //风扇旋转
                            @keyframes rotate {
                                from {
                                    transform: rotate(0deg);
                                }

                                to {
                                    transform: rotate(360deg);
                                }
                            }

                            .fan {
                                color: #bdbb3b;
                                position: absolute;
                                // left: 32%;
                                // top: 45%;
                                // font-size: 20px !important;
                                left: 14%;
                                top: 31%;
                                font-size: 36px !important;
                            }

                            //运行
                            .icon_fengshan_run {
                                display: inline-block;
                                /* 让 transform 生效 */
                                animation: rotate 1s linear infinite;
                                color: #2fb31e;
                            }
                        }

                        :deep(.el-switch) {
                            .el-switch__label {
                                color: #FFF;
                            }

                            .el-switch__label.is-active {
                                color: var(--el-color-primary);
                            }

                            .el-switch__core {
                                height: 25px;
                                min-width: 50px;
                            }
                        }

                        .body_show_value {
                            display: flex;
                            width: 82px;
                            padding: 6px 0px;
                            justify-content: center;
                            align-items: flex-start;
                            gap: 10px;
                            border-radius: 3px;
                            border: 1px solid #B8CEE5;
                            // background: #EDF7FF;
                            color: #66ccff;
                        }

                        .body_show_unit {
                            margin-left: 10px;
                        }
                    }
                }
            }

            .flow_others {
                width: 250px;

                .flow_single_show {
                    display: flex;
                    flex-direction: column;
                    color: #FFF;
                    gap: 3px;

                    .show_body {
                        display: flex;
                        align-items: center;
                        justify-content: space-between;

                        .show_body_left {
                            width: 50px;
                            text-align: center;
                            font-size: large;
                            background: #0e2b60;
                            border-radius: 5px;
                            color: #63c8c7;
                        }

                        .show_body_right {
                            gap: 3px;
                            width: 170px;
                            display: flex;
                            flex-direction: column;
                            align-items: center;
                            justify-content: center;

                            .show_detail {
                                display: flex;
                                align-items: center;
                                justify-content: center;
                                gap: 5px;

                                .text,
                                .btn_set {
                                    text-align: center;
                                    font-size: small;
                                    width: 47px;

                                    // font-size: 16px;
                                    :deep(.el-button--small) {
                                        height: 18px !important;
                                        // --el-button-size: 18px !important;
                                    }
                                }

                                .body_show,
                                .body_set {
                                    width: 115px;
                                    display: flex;
                                    align-items: center;
                                    justify-content: flex-start;
                                    gap: 5px;

                                    //  width: 100px;
                                    .body_show_value {
                                        text-align: center;
                                        width: 75px;
                                        font-size: small;
                                        border: solid 1px #B8CEE5;
                                        border-radius: 5px;

                                        :deep(.el-select--small .el-select__wrapper) {
                                            min-height: 18px;
                                            text-align: right;
                                        }

                                        :deep(.el-input--small) {
                                            // text-align: right;
                                            height: 18px;

                                            .el-input__inner {
                                                text-align: center;
                                                margin-left: 10px;
                                            }
                                        }
                                    }
                                }
                            }
                        }
                    }

                }
            }
        }
    }


}
</style>