<template>
    <div class="dcs">
        <HeaderComponent title="M1流程" backTo="/flowSelect"></HeaderComponent>
        <!-- 右侧流程图 -->
        <div class="flows_body_right">
            <!-- 顶部按钮栏 -->
            <div class="flows_body_right_top">
                <el-button type="primary" @click="normalWorkFlow"> 开机</el-button>
                <el-button type="primary" @click="M1Injection"> M1注料</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.05).toFixed(2) || 0 }}
                            </div>
                            <div class="body_show_unit"> Mpa</div>
                        </div>
                    </div>
                </div>

                <div class="tank_single">
                    <div class="flow_single_title"> M2罐 </div>
                    <div class="flow_single_body">
                        <div class="body_name">
                            压力传感器
                        </div>
                        <div class="body_show">
                            <div class="body_show_value">
                                {{ (deviceDataArr[eqStore.eqIndexArr[130]]?.value + 0.025).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 + 0.03).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="flow_arrow">
                <el-progress :percentage="100" :stroke-width="15" striped :striped-flow="arrowShowArr[0]"
                    v-if="arrowShowArr[0]" :duration="10" :show-text="false" class="flow_progress1" />
                <el-progress :percentage="100" :stroke-width="15" striped :striped-flow="arrowShowArr[1]"
                    v-if="arrowShowArr[1]" :duration="10" :show-text="false" class="flow_progress2" />
                <el-progress :percentage="100" :stroke-width="15" striped :striped-flow="false" v-if="arrowShowArr[2]"
                    :duration="10" :show-text="false" class="flow_progress3_1" />
                <el-progress :percentage="100" :stroke-width="15" striped :striped-flow="arrowShowArr[2]"
                    v-if="arrowShowArr[2]" :duration="100" :show-text="false" class="flow_progress3_2" />
                <el-progress :percentage="100" :stroke-width="15" striped :striped-flow="arrowShowArr[2]"
                    v-if="arrowShowArr[2]" :duration="10" :show-text="false" class="flow_progress3_3" />
                <el-progress :percentage="100" :stroke-width="15" striped :striped-flow="false" v-if="arrowShowArr[4]"
                    :duration="10" :show-text="false" class="flow_progress5_1" />
                <el-progress :percentage="100" :stroke-width="15" striped :striped-flow="arrowShowArr[4]"
                    v-if="arrowShowArr[4]" :duration="100" :show-text="false" class="flow_progress5_2" />
                <el-progress :percentage="100" :stroke-width="15" striped :striped-flow="false" v-if="arrowShowArr[4]"
                    :duration="10" :show-text="false" class="flow_progress5_3" />
                <el-progress :percentage="100" :stroke-width="15" striped :striped-flow="arrowShowArr[5]"
                    v-if="arrowShowArr[5]" :duration="10" :show-text="false" class="flow_progress6" />
                <el-progress :percentage="100" :stroke-width="15" striped :striped-flow="arrowShowArr[6]"
                    v-if="arrowShowArr[6]" :duration="10" :show-text="false" class="flow_progress7" />
                <el-progress :percentage="100" :stroke-width="15" striped :striped-flow="arrowShowArr[7]"
                    v-if="arrowShowArr[7]" :duration="10" :show-text="false" class="flow_progress8" />
                <el-progress :percentage="100" :stroke-width="15" striped :striped-flow="arrowShowArr[8]"
                    v-if="arrowShowArr[8]" :duration="10" :show-text="false" class="flow_progress9" />
                <el-progress :percentage="100" :stroke-width="15" striped :striped-flow="arrowShowArr[9]"
                    v-if="arrowShowArr[9]" :duration="10" :show-text="false" class="flow_progress10" />
                <el-progress :percentage="100" :stroke-width="15" striped :striped-flow="arrowShowArr[10]"
                    v-if="arrowShowArr[10]" :duration="10" :show-text="false" class="flow_progress11" />
                <el-progress :percentage="100" :stroke-width="15" striped :striped-flow="arrowShowArr[11]"
                    v-if="arrowShowArr[11]" :duration="10" :show-text="false" class="flow_progress12" />
                <el-progress :percentage="100" :stroke-width="15" striped :striped-flow="arrowShowArr[12]"
                    v-if="arrowShowArr[12]" :duration="100" :show-text="false" class="flow_progress13" />
                <el-progress :percentage="100" :stroke-width="15" striped :striped-flow="arrowShowArr[14]"
                    v-if="arrowShowArr[14]" :duration="10" :show-text="false" class="flow_progress15" />
                <el-progress :percentage="100" :stroke-width="15" striped :striped-flow="false" v-if="arrowShowArr[15]"
                    :duration="10" :show-text="false" class="flow_progress16_1" />
                <el-progress :percentage="100" :stroke-width="15" striped :striped-flow="arrowShowArr[15]"
                    v-if="arrowShowArr[15]" :duration="100" :show-text="false" class="flow_progress16_2" />
                <el-progress :percentage="100" :stroke-width="15" striped :striped-flow="false" v-if="arrowShowArr[15]"
                    :duration="10" :show-text="false" class="flow_progress16_3" />
                <el-progress :percentage="100" :stroke-width="15" striped :striped-flow="arrowShowArr[16]"
                    v-if="arrowShowArr[16]" :duration="10" :show-text="false" class="flow_progress17" />
            </div> -->
                <!-- 右侧流程图内容 -->
                <div class="flows_body_right_content">
                    <!-- LB2 -->
                    <div class="LB_nodata">
                        <div class="flow_single_title"> LB2 </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[26]]?.value }"></i>
                                </i>
                            </div>
                        </div>
                    </div>
                    <!-- N1,N6,N7,N9 -->
                    <div class="flows">
                        <!-- N1 -->
                        <Valve title="M1进料阀" :valveOpenObj="deviceDataArr[eqStore.eqIndexArr[154]]" />
                        <!-- N6 -->
                        <Valve title="M1排堵进气阀2" :valveOpenObj="deviceDataArr[eqStore.eqIndexArr[164]]" />
                        <!-- N9 -->
                        <Valve title="M1排堵出气阀1" :valveOpenObj="deviceDataArr[eqStore.eqIndexArr[170]]" />
                        <!-- N7 -->
                        <Valve title="M1排堵出气阀2" :valveOpenObj="deviceDataArr[eqStore.eqIndexArr[166]]" />
                    </div>

                    <!-- LB3 -->
                    <!-- 104 144 121 137 -->
                    <DeviceStatus title="M1换热出液泵" :deviceData="deviceDataArr[eqStore.eqIndexArr[104]]"
                        :speedData="deviceDataArr[eqStore.eqIndexArr[121]]"
                        :setStatusWordAddress="deviceDataArr[eqStore.eqIndexArr[144]]?.address"
                        :setSpeedAddress="deviceDataArr[eqStore.eqIndexArr[137]]?.address" v-if="showValves" />

                    <!-- D1 -->
                    <Valve title="J1进气阀" :valveOpenSignalStatus="deviceDataArr[eqStore.eqIndexArr[2]]?.value"
                        :valveCloseSignalStatus="deviceDataArr[eqStore.eqIndexArr[3]]?.value"
                        :valveOpenObj="deviceDataArr[eqStore.eqIndexArr[209]]" />


                    <!-- LB4无地址 -->
                    <div class="LB_nodata">
                        <div class="flow_single_title"> LB4 </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': deviceRunStatus[7] }"
                                        @click="deviceRunStatus[7] = !deviceRunStatus[7]">
                                    </i>
                                </i>
                            </div>
                        </div>
                    </div>

                    <!-- N10 -->
                    <Valve title="M1出料阀" :valveOpenObj="deviceDataArr[eqStore.eqIndexArr[172]]" />
                    <!-- LB9 -->
                    <!-- 102 143 120 136 -->
                    <DeviceStatus title="M1出料泵" :deviceData="deviceDataArr[eqStore.eqIndexArr[102]]"
                        :speedData="deviceDataArr[eqStore.eqIndexArr[120]]"
                        :setStatusWordAddress="deviceDataArr[eqStore.eqIndexArr[143]]?.address"
                        :setSpeedAddress="deviceDataArr[eqStore.eqIndexArr[136]]?.address" v-if="showValves" />

                    <!-- D5,D6,D7 -->
                    <div class="flows">
                        <!-- D5 -->
                        <Valve title="S1进料阀" :valveOpenSignalStatus="deviceDataArr[eqStore.eqIndexArr[8]]?.value"
                            :valveCloseSignalStatus="deviceDataArr[eqStore.eqIndexArr[9]]?.value"
                            :valveOpenObj="deviceDataArr[eqStore.eqIndexArr[213]]" />
                        <!-- D6 -->
                        <Valve title="S2进料阀" :valveOpenSignalStatus="deviceDataArr[eqStore.eqIndexArr[11]]?.value"
                            :valveCloseSignalStatus="deviceDataArr[eqStore.eqIndexArr[12]]?.value"
                            :valveOpenObj="deviceDataArr[eqStore.eqIndexArr[215]]" />
                        <!-- D7 -->
                        <Valve title="S3进料阀" :valveOpenSignalStatus="deviceDataArr[eqStore.eqIndexArr[14]]?.value"
                            :valveCloseSignalStatus="deviceDataArr[eqStore.eqIndexArr[15]]?.value"
                            :valveOpenObj="deviceDataArr[eqStore.eqIndexArr[217]]" />
                    </div>


                    <!-- D14 改n25  -->
                    <Valve title="N25" :valveOpenObj="deviceDataArr[eqStore.eqIndexArr[245]]" />

                    <!-- D2 -->
                    <Valve title="J1蒸汽进气阀" :valveOpenSignalStatus="deviceDataArr[eqStore.eqIndexArr[5]]?.value"
                        :valveCloseSignalStatus="deviceDataArr[eqStore.eqIndexArr[6]]?.value"
                        :valveOpenObj="deviceDataArr[eqStore.eqIndexArr[211]]" />

                    <!-- N2 -->
                    <Valve title="M1-J2换热阀" :valveOpenObj="deviceDataArr[eqStore.eqIndexArr[156]]" />

                    <!-- D8,D9,D10 -->
                    <div class="flows">
                        <!-- D8 -->
                        <Valve title="S1加压阀" :valveOpenSignalStatus="deviceDataArr[eqStore.eqIndexArr[34]]?.value"
                            :valveCloseSignalStatus="deviceDataArr[eqStore.eqIndexArr[35]]?.value"
                            :valveOpenObj="deviceDataArr[eqStore.eqIndexArr[230]]" />
                        <!-- D9 -->
                        <Valve title="S2加压阀" :valveOpenSignalStatus="deviceDataArr[eqStore.eqIndexArr[37]]?.value"
                            :valveCloseSignalStatus="deviceDataArr[eqStore.eqIndexArr[38]]?.value"
                            :valveOpenObj="deviceDataArr[eqStore.eqIndexArr[232]]" />
                        <!-- D10 -->
                        <!-- TAG 无地址 -->
                        <Valve title="S3加压阀" :valveOpenObj="false" />
                    </div>

                    <!-- D11,D12,D13 -->
                    <div class="flows">
                        <!-- D11 -->
                        <Valve title="S1加热阀" :valveOpenSignalStatus="deviceDataArr[eqStore.eqIndexArr[17]]?.value"
                            :valveCloseSignalStatus="deviceDataArr[eqStore.eqIndexArr[18]]?.value"
                            :valveOpenObj="deviceDataArr[eqStore.eqIndexArr[219]]" />
                        <!-- D12 -->
                        <Valve title="S2加热阀" :valveOpenSignalStatus="deviceDataArr[eqStore.eqIndexArr[20]]?.value"
                            :valveCloseSignalStatus="deviceDataArr[eqStore.eqIndexArr[21]]?.value"
                            :valveOpenObj="deviceDataArr[eqStore.eqIndexArr[221]]" />
                        <!-- D17 -->
                        <Valve title="S2喷淋塔" :valveOpenSignalStatus="deviceDataArr[eqStore.eqIndexArr[23]]?.value"
                            :valveCloseSignalStatus="deviceDataArr[eqStore.eqIndexArr[24]]?.value"
                            :valveOpenObj="deviceDataArr[eqStore.eqIndexArr[223]]" />
                    </div>
                    <!-- n4 -->
                    <Valve title="M1加压阀" :valveOpenObj="deviceDataArr[eqStore.eqIndexArr[160]]" />

                    <!-- N8 -->
                    <Valve title="M1排堵进气阀1" :valveOpenObj="deviceDataArr[eqStore.eqIndexArr[168]]" />

                    <!-- N11 -->
                    <Valve title="M1喷淋塔" :valveOpenObj="deviceDataArr[eqStore.eqIndexArr[174]]" />

                    <!--装车泵 110,124,147,140 -->
                    <DeviceStatus title="装车泵" :deviceData="deviceDataArr[eqStore.eqIndexArr[110]]"
                        :speedData="deviceDataArr[eqStore.eqIndexArr[124]]"
                        :setStatusWordAddress="deviceDataArr[eqStore.eqIndexArr[147]]?.address"
                        :setSpeedAddress="deviceDataArr[eqStore.eqIndexArr[140]]?.address" v-if="showValves" />

                    <DeviceStatus title="S1搅拌" :deviceData="deviceDataArr[eqStore.eqIndexArr[100]]"
                        :speedData="deviceDataArr[eqStore.eqIndexArr[119]]"
                        :setStatusWordAddress="deviceDataArr[eqStore.eqIndexArr[142]]?.address"
                        :setSpeedAddress="deviceDataArr[eqStore.eqIndexArr[135]]?.address" v-if="showValves" />

                    <DeviceStatus title="S2搅拌" :deviceData="deviceDataArr[eqStore.eqIndexArr[98]]"
                        :speedData="deviceDataArr[eqStore.eqIndexArr[118]]"
                        :setStatusWordAddress="deviceDataArr[eqStore.eqIndexArr[141]]?.address"
                        :setSpeedAddress="deviceDataArr[eqStore.eqIndexArr[134]]?.address" v-if="showValves" />

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

</template>

<script setup>
import { openElMessageBox, openElMessage, openElWarnMessage } from '@/utils/message';
import { onMounted, ref, watch, onUnmounted } from 'vue';
import { setCoil, setCoils } from '@/api/dcs/flowControl';
import { wsClient } from '@/utils/ws/websocket.js';
import useEqStore from '@/store/modules/dcs';
import DeviceStatus from '@/components/DCS/DeviceStatusComponent';
import Valve from '@/components/DCS/ValveComponent';
import { openInfoElNotification, openErrorElNotification } from "@/utils/message";
const eqStore = useEqStore();
//TAG 隐藏阀门是否显示
const showValves = ref(true)
onMounted(() => {
    // 监听 WebSocket 消息
    wsClient.connect((success) => {
        if (success) console.log("WebSocket 连接成功");
    });
    wsClient.ws.onmessage = (event) => {
        const wsData = JSON.parse(event.data);
        //TODO 根据type对数据进行分流
        if (wsData.type === 'ALARM') {
            const alarmsArr = wsData.alarms;

            if (!Array.isArray(alarmsArr) || alarmsArr.length === 0) return;

            for (const alarm of alarmsArr) {
                const { status, message } = alarm;
                if (status === '0') {
                    openErrorElNotification(message);//告警信息
                } else {
                    openInfoElNotification(message);//告警恢复信息
                }
            }
        }else{
            deviceDataArr.value = wsData;
        }


    };
})


//初始化按钮运行状态
function initBtnRunStatua() {
    const equipmentIdArr = [26, 154, 164, 166, 170, 0, 2, 0, 0, 5, 176, 8, 11, 14, 0, 172, 34, 37, 0, 17, 20, 23, 168, 174, 160, 156]
    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变化
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;
    }
});





//流程箭头是否展示
const arrowShowArr = ref(Array(20).fill(false));
//设备运行状态
const deviceRunStatus = ref(Array(30).fill(false));
//按钮点击状态(开启，关闭)
const btnRunStatus = ref(Array(30).fill(false));

//流程步骤
const step = ref(eqStore.M1Step1)
//监控step值
watch(() => step.value, (newValue, oldValue) => {
    eqStore.setM1Step1(newValue)
    // console.log('监听step', step.value)
    switch (newValue) {
        case 2:
            openElMessage('等待LB2打开')
            break;
        case 4:
            openElMessageBox('等待M1注满后,打开LB3', '提示')
            break;
        case 5:
            openElMessage('等待F1放空,假设已放空')
            step.value = 6;
            break;
        case 6:
            openElMessage('等待LB2关闭')
            break;
        case 7:
            openElMessage('请打开D1阀门');
            break;
        case 8:
            openElMessageBox('经过一定时间的循环，待物料达到一定温度,启动N25', '提示');
            break;
        case 9:
            openElMessageBox('请打开LB9阀门', '提示');
            break;
        case 10:
            openElMessage('请关闭N9阀门');
            break;
        case 11:
            openElMessageBox('请确定M1,Z1排空后,关闭D5阀门', '提示');
            break;
        case 12:
            openElMessage('关闭N2阀门');
            break;
        case 13:
            openElMessageBox('打开D8加压到1Mpa，关闭', '提示');
            break;
        case 14:
            openElMessageBox('打开D11加温到120度', '提示');
            break;
        case 15:
            openElMessageBox('确认另一个水解罐（假设S2）刚注满。确认N25处于关闭状态，打开D5，D6', '提示');
            break;
        case 16:
            openElMessageBox('待S1-S2的压力平衡后，关闭D5，D6', '提示');
            break;
    }
});
//开机
function normalWorkFlow() {
    // if (step.value == 1) {
    step.value = 2;
    // }
}

//M1注料
function M1Injection() {
    if (!deviceDataArr.value[eqStore.eqIndexArr[26]].value) {
        openElWarnMessage('LB2设备未启动,请先启动');
        return;
    }
    // N1,N6,N7,N9按钮状态置为已启动
    btnRunStatus.value[1] = true;
    btnRunStatus.value[2] = true;
    btnRunStatus.value[3] = true;
    btnRunStatus.value[4] = true;
    //n1,n6,n7,n9对应设备id
    const arr = [154, 164, 166, 170]
    for (let i = 0; i < arr.length; i++) {
        const address = deviceDataArr.value[eqStore.eqIndexArr[arr[i]]].address;
        const param = {
            dataArr: [true],
            startAddress: address,
        }
        setCoil(param).then(res => {
            console.log(res);
        })
    }
}
//监听LB2设备运行状态
watch(() => deviceDataArr.value[eqStore.eqIndexArr[26]]?.value, (newValue, oldValue) => {
    if (newValue && step.value == 2) {
        arrowShowArr.value[0] = true;
        openElMessageBox('请3s后点击进行M1注料', '提示');
    }
    if (!newValue && step.value == 6) {
        arrowShowArr.value[3] = true
        openElMessage('关闭N1阀门')
    }
});

//监控N1，N6，N7，N9按钮点击状态
const watchSources1 = [
    () => btnRunStatus.value[1], // N1
    () => btnRunStatus.value[2], // N6
    () => btnRunStatus.value[3], // N7
    () => btnRunStatus.value[4], // N9
];
//记录开关N6阀门次数
let switchN6Count = 0;
//记录开关N7阀门次数
let switchN7Count = 0;
watch(watchSources1, ([n1, n6, n7, n9]) => {
    if (n1 && n6 && n7 && n9 && step.value == 2) {
        step.value = 4;
        arrowShowArr.value[1] = true;
    }
    if (!n1 && step.value == 6) {
        arrowShowArr.value[4] = true;
        step.value = 7;
    }
    if (!n9 && step.value == 10) {
        arrowShowArr.value[13] = true;
        openElMessage('请关闭LB3阀门')
    }
    if (!n6 && step2.value == 3) {
        switchN6Count++;
        if (switchN6Count == 3) {
            step2.value = 4;
        }
    }
    if (!n7 && step2.value == 6) {
        switchN7Count++;
        if (switchN7Count == 3) {
            step2.value = 7;
        }
    }
});
//监听LB3设备运行状态
watch(() => deviceDataArr.value[eqStore.eqIndexArr[104]]?.value, (newValue, oldValue) => {
    if ((newValue == 0 || newValue == 1) && step.value == 4) {
        arrowShowArr.value[2] = true;
        step.value = 5;
    }
    if (!newValue && step.value == 10) {
        openElMessage('等待S1注满')
        arrowShowArr.value[14] = true;
        step.value = 11;
    }
});
//监听D1阀门运行状态
watch(() => deviceDataArr.value[eqStore.eqIndexArr[2]]?.value, (newValue, oldValue) => {
    if (newValue && step.value == 7) {
        arrowShowArr.value[5] = true;
        arrowShowArr.value[6] = true;
        openElMessage('请前往隔壁启动LB4,启动成功后打开N2阀门', '提示');
    }
});
//监听LB4阀门运行状态(暂无地址，假设已启动)
watch(() => deviceRunStatus.value[8], (newValue, oldValue) => {

});
//监听N2阀门运行状态
watch(() => deviceDataArr.value[eqStore.eqIndexArr[156]]?.value, (newValue, oldValue) => {
    if (newValue && step.value == 7) {
        arrowShowArr.value[7] = true;
        openElMessage('打开D2阀门');
    }
    if (!newValue && step.value == 12) {
        openElMessageBox('3s后关闭LB4阀门', '提示');
        arrowShowArr.value[16] = true;
        openElMessageBox('假定已关，请点击"关气动"关闭所有气动阀门', '提示');
    }
});
//监听D2阀门运行状态
watch(() => deviceDataArr.value[eqStore.eqIndexArr[5]]?.value, (newValue, oldValue) => {
    if (newValue && step.value == 7) {
        arrowShowArr.value[8] = true;
        step.value = 8;
    }
});
//监听N25阀门运行状态
watch(() => btnRunStatus.value[8], (newValue, oldValue) => {
    if (newValue && step.value == 8) {
        arrowShowArr.value[9] = true;
        openElMessage('请打开D5阀门');
    }
});
//监听D5,D6,D7阀门运行状态
const watchSources2 = [
    () => deviceDataArr.value[eqStore.eqIndexArr[8]]?.value, // D5
    () => deviceDataArr.value[eqStore.eqIndexArr[11]]?.value, // D6
    () => deviceDataArr.value[eqStore.eqIndexArr[14]]?.value, // D7
];
watch(watchSources2, ([d5, d6, d7]) => {
    if (d5 && step.value == 8) {
        arrowShowArr.value[10] = true;
        step.value = 9;
    }
    if (!d5 && step.value == 11) {
        arrowShowArr.value[15] = true;
        step.value = 12;
    }
    if (d5 && d6 && step.value == 15) {
        step.value = 16;
    }
});

//监听LB9设备运行状态
watch(() => deviceDataArr.value[eqStore.eqIndexArr[102]]?.value, (newValue, oldValue) => {
    if ((newValue == 0 || newValue == 1) && step.value == 9) {
        arrowShowArr.value[11] = true;
        openElMessageBox('请3s后打开N10', '提示');
    }
});

//监听N10设备运行状态
watch(() => btnRunStatus.value[15], (newValue, oldValue) => {
    if (newValue && step.value == 9) {
        arrowShowArr.value[12] = true;
        openElMessage('请等待5s');
        step.value = 10;
    }
});


//监听D8加压状态
watch(() => deviceDataArr.value[eqStore.eqIndexArr[34]]?.value, (newValue, oldValue) => {
    if (newValue && step.value == 13) {
        step.value = 14;
    }
});
//监听D11阀门运行状态
watch(() => deviceDataArr.value[eqStore.eqIndexArr[17]]?.value, (newValue, oldValue) => {
    if (newValue && step.value == 14) {
        step.value = 15;
    }
});



//关闭所有气动阀门
function closeQDValves() {
    const QD_arr = [1, 2, 3, 4, 10, 15, 22, 23, 24]
    for (let i = 0; i < QD_arr.length; i++) {
        deviceRunStatus.value[QD_arr[i]] = false;
    }
    if (step.value == 12) {
        arrowShowArr.value = Array(30).fill(false);
        step.value = 2;
    }
    const param1 = {
        dataArr: Array(12).fill(false),
        startAddress: deviceDataArr.value[eqStore.eqIndexArr[178]].address,
        quantity: 12,
    }
    setCoils(param1).then(res => {
        console.log(res);
    })
    const param2 = {
        dataArr: Array(12).fill(false),
        startAddress: deviceDataArr.value[eqStore.eqIndexArr[154]].address,
        quantity: 12,
    }
    setCoils(param2).then(res => {
        console.log(res);
    })
    if (step.value == 12) {
        step.value = 13;
    }
}

//关闭所有阀门
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('N4在堵的时候打开一段时间后再关闭', '提示');
}

//负压排堵
function negativePressurePlugging() {
    openElMessageBox('请确认没有压力的情况下,点击“关所有”按钮关闭所有阀门', '提示');
}
//负压排堵步骤
const step2 = ref(1)
//监听step2值
watch(() => step2.value, (newValue, oldValue) => {
    eqStore.setM1Step2(newValue)
    switch (newValue) {
        case 2:
            openElMessage('请打开N8阀门');
            break;
        case 3:
            openElMessage('反复开关5次N6阀门,最终关闭N6阀门');
            break;
        case 4:
            openElMessage('打开N11');
            break;
        case 5:
            openElMessage('5秒后请关闭N11阀门');
            break;
        case 6:
            openElMessage('反复开关5次N7阀门,最终关闭N7阀门');
            break
        case 7:
            openElMessage('打开N11等5秒(查看压力表等于大气压力)');
            break
    }
});

//监听N8按钮点击状态
watch(() => btnRunStatus.value[22], (newValue, oldValue) => {
    if (newValue && step2.value == 2) {
        step2.value += 1;
    }
});
//监听N11按钮点击状态
watch(() => btnRunStatus.value[23], (newValue, oldValue) => {
    if (newValue && step2.value == 4) {
        step2.value += 1;
    }
    if (!newValue && step2.value == 5) {
        step2.value = 6;
    }
    if (!newValue && step2.value == 7) {
        step2.value = 1;
    }
});


</script>
<style lang="scss" scoped>
.dcs {
    width: 100%;
    height: 100%;
    min-width: fit-content;
    min-height: max-content;
    background-color: #141414;
}

.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 auto;
    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;
            }
        }

        .flow_arrow {
            position: relative;

            .flow_progress1 {
                width: 100px !important;
                position: absolute;
                top: 60px;
                left: 100px;
            }

            .flow_progress2 {
                width: 100px !important;
                position: absolute;
                top: 60px;
                left: 600px;
            }

            .flow_progress3_1 {
                width: 9px !important;
                position: absolute;
                transform: rotate(90deg);
                top: 138px;
                left: 749px;
            }

            .flow_progress3_2 {
                width: 707px !important;
                position: absolute;
                transform: rotate(180deg);
                top: 154px;
                left: 46px;
                z-index: 10;
            }

            .flow_progress3_3 {
                width: 29px !important;
                position: absolute;
                transform: rotate(270deg);
                top: 127px;
                left: 36px;
            }

            // .flow_progress4 {
            //     width: 100px !important;
            //     position: absolute;
            //     top: 60px;
            //     left: 800px;
            // }

            .flow_progress5_1 {
                width: 15px !important;
                position: absolute;
                transform: rotate(270deg);
                top: -16px;
                left: 245px;
            }

            .flow_progress5_2 {
                width: 850px !important;
                position: absolute;
                top: -26px;
                left: 250px;
            }

            .flow_progress5_3 {
                width: 7px !important;
                position: absolute;
                transform: rotate(90deg);
                top: -15px;
                left: 1093px;
            }

            .flow_progress6 {
                width: 100px !important;
                position: absolute;
                top: 60px;
                left: 1150px;
            }

            .flow_progress7 {
                width: 150px !important;
                position: absolute;
                top: 184px;
                transform: rotate(58deg);
                left: 1267px;
            }

            .flow_progress8 {
                width: 100px !important;
                position: absolute;
                transform: rotate(180deg);
                top: 300px;
                left: 1250px;
            }

            .flow_progress9 {
                width: 100px !important;
                position: absolute;
                transform: rotate(180deg);
                top: 300px;
                left: 1050px;
            }

            .flow_progress10 {
                transform: rotate(180deg);
                width: 100px !important;
                position: absolute;
                top: 300px;
                left: 850px;
            }

            .flow_progress11 {
                transform: rotate(180deg);
                width: 100px !important;
                position: absolute;
                top: 300px;
                left: 450px;
            }

            .flow_progress12 {
                transform: rotate(180deg);
                width: 100px !important;
                position: absolute;
                top: 300px;
                left: 100px;
            }

            .flow_progress13 {
                width: 500px !important;
                position: absolute;
                transform: rotate(-10deg);
                top: 177px;
                left: 42px;
                z-index: 10;
            }

            .flow_progress15 {
                width: 295px !important;
                position: absolute;
                transform: rotate(164deg);
                top: 186px;
                left: 600px;
                z-index: 10;
            }

            .flow_progress16_1 {
                width: 9px !important;
                position: absolute;
                transform: rotate(90deg);
                top: 377px;
                left: 600px;
            }

            .flow_progress16_2 {
                width: 796px !important;
                position: absolute;
                top: 390px;
                left: 603px;
            }

            .flow_progress16_3 {
                width: 9px !important;
                position: absolute;
                transform: rotate(-90deg);
                top: 369px;
                left: 1394px;
            }

            .flow_progress17 {
                width: 150px !important;
                position: absolute;
                top: 189px;
                transform: rotate(240deg);
                left: 1300px;
            }
        }

        .flows_body_right_content {
            margin-top: 50px;
            display: flex;
            flex-wrap: wrap;
            gap: 40px;
            align-items: center;

            .flow_d10 {
                margin: auto;
            }

            .flows {
                display: flex;
            }

            .LB_nodata {
                width: 110px;
                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>