feat(heatExchange):换热流程页面

fix(useValveHelper):未匹配code返回错误的问题

ui/src/hooks/useValveHelper.js

@@ -30,19 +30,23 @@ export function useValveHelper(valveArrRef) {
 
   const getValveAndStatus = (...codes) => {
     const arr = getArr();
-    let matched = [];
 
     if (codes.length === 1) {
-      matched = arr.filter(item => item.code === codes[0]);
+      const matched = arr.find(item => item.code === codes[0]);
+      if (!matched) return false; // 没匹配到
+      return matched.value?.[0] === true;
     } else {
-      const codeSet = new Set(codes); // 更快匹配
-      matched = arr.filter(item => codeSet.has(item.code));
-    }
+      const codeSet = new Set(codes);
+      const matched = arr.filter(item => codeSet.has(item.code));
 
-    if (matched.length === 0) return false;
-    return matched.every(item => item.value?.[0] === true);
+      if (matched.length !== codes.length) {
+        return false; // 有 code 没匹配到
+      }
+      return matched.every(item => item.value?.[0] === true);
+    }
   };
 
+
   const getValveOrStatus = (...codes) => {
     const arr = getArr();
     if (codes.length === 1) {

ui/src/views/configuratePage/heatExchange/index.vue

@@ -0,0 +1,735 @@
+<template>
+    <div class="page">
+        <HeaderComponent title="换热流程"></HeaderComponent>
+        <div class="content_page">
+            <M1Tank title="M1" :valveArr="valveArr_M1" :waterLevelValue="30" :pressureValue="0.444"
+                :temperatureValue="110" :iconSize="400" :weightValue="100" class="hr_m1Tank"></M1Tank>
+            <Z1Tank title="Z1" :valveArr="valveArr_Z1" :iconSize="300" class="hr_z1Tank"></Z1Tank>
+
+            <J1Tank title="J1" :valveArr="valveArr_J1" :iconSize="300" class="hr_j1Tank"></J1Tank>
+            <J1Tank title="J2" :valveArr="valveArr_J2" :iconSize="300" class="hr_j2Tank"></J1Tank>
+            <M1Tank title="M2" :valveArr="valveArr_M2" :waterLevelValue="30" :pressureValue="0.444"
+                :temperatureValue="110" :iconSize="400" :weightValue="100" class="hr_m2Tank"></M1Tank>
+            <!-- 泵 -->
+            <div class="pumps">
+                <!-- lb3 -->
+                <div class="lb3_pos">
+                    <Pump title="换热出液泵" :hz="5000" :pumpStatus="正转" :iconSize="100"></Pump>
+                </div>
+                <div class="lb4_pos">
+                    <Pump title="LB4" :hz="5000" :pumpStatus="正转" pumpDirection="R"></Pump>
+                </div>
+                <div class="lb7_pos">
+                    <Pump title="换热进液泵" :hz="5000" :pumpStatus="正转" pumpDirection="R"></Pump>
+                </div>
+            </div>
+            <div class="icon_others">
+                <div class="other1">
+                    <div class="other_title"> 储气罐</div>
+                    <i class="icon iconfont-colour icon-chuqiguan icon_cqg"></i>
+                </div>
+                <div class="other2">
+                    <div class="other_title"> 喷淋塔</div>
+                    <i class="icon iconfont-colour icon-penlinta"></i>
+                </div>
+                <div class="other3">
+                    <div class="other_title"> 蒸汽发生器</div>
+                    <i class="icon iconfont-colour icon-zhengqifashengqi"></i>
+                </div>
+            </div>
+            <!-- 手动阀 -->
+            <div class="valve_manual">
+                <div class="valve_items valve_item1">
+                    <i class="icon iconfont icon-waterValve icon_valve"></i>
+                    <div class="valve_title"> 手动阀</div>
+                </div>
+                <div class="valve_items valve_item2 rotate_270">
+                    <i class="icon iconfont icon-waterValve icon_valve"></i>
+                    <div class="valve_title rotate_90"> 手动阀</div>
+                </div>
+            </div>
+            <!-- 外部管道排布 -->
+            <div class="outer_progress">
+                <!-- 储气罐相关管道 -->
+                <el-progress :percentage="100" :stroke-width="progressConfig.strokeWidth" :show-text="false"
+                    :striped="getValveAndStatus('N8') && getValveOrStatus('N6', 'N7')"
+                    :striped-flow="getValveAndStatus('N8') && getValveOrStatus('N6', 'N7')" :duration="20"
+                    class="progress_compressed_air progress_1 rotate_90" />
+                <el-progress :percentage="100" :stroke-width="progressConfig.strokeWidth" :show-text="false"
+                    :striped="getValveAndStatus('N4')" :striped-flow="getValveAndStatus('N4')" :duration="20"
+                    class="progress_compressed_air progress_2 rotate_90" />
+                <el-progress :percentage="100" :stroke-width="progressConfig.strokeWidth" :show-text="false"
+                    :striped="N18_status" :striped-flow="N18_status" :duration="20"
+                    class="progress_compressed_air progress_3 rotate_90" />
+                <el-progress :percentage="100" :stroke-width="progressConfig.strokeWidth" :show-text="false"
+                    :striped="getValveAndStatus('N14')" :striped-flow="getValveAndStatus('N14')" :duration="20"
+                    class="progress_compressed_air progress_4 rotate_90" />
+
+                <el-progress :percentage="100" :stroke-width="progressConfig.strokeWidth" :show-text="false"
+                    :striped="getValveOrStatus('N4', 'N14') || N18_status"
+                    :striped-flow="getValveOrStatus('N4', 'N14') || N18_status" :duration="30"
+                    class="progress_compressed_air progress_5_1" />
+                <el-progress :percentage="100" :stroke-width="progressConfig.strokeWidth" :show-text="false"
+                    :striped="getValveOrStatus('N14') || N18_status"
+                    :striped-flow="getValveAndStatus('N14') || N18_status" :duration="30"
+                    class="progress_compressed_air progress_5_2" />
+                <el-progress :percentage="100" :stroke-width="progressConfig.strokeWidth" :show-text="false"
+                    :striped="getValveAndStatus('N14')" :striped-flow="getValveAndStatus('N14')" :duration="30"
+                    class="progress_compressed_air progress_5_3" />
+
+                <!-- 喷淋塔相关管道 -->
+                <el-progress :percentage="100" :stroke-width="progressConfig.strokeWidth" :show-text="false"
+                    :striped="getValveAndStatus('N11')" :striped-flow="getValveAndStatus('N11')" :duration="50"
+                    class="progress_stench progress_6_1" />
+                <el-progress :percentage="100" :stroke-width="progressConfig.strokeWidth" :show-text="false"
+                    :striped="getValveOrStatus('N11', 'N20')" :striped-flow="getValveOrStatus('N11', 'N20')"
+                    :duration="20" class="progress_stench progress_6_2" />
+
+                <!-- 换热液相关管道 M1(n9)-lb3-z1-lb4-j1(d1)j2(d3)-->
+                <el-progress :percentage="100" :stroke-width="progressConfig.strokeWidth" :show-text="false"
+                    :striped="N9_status" :striped-flow="N9_status" :duration="20"
+                    class="progress_heat_exchange_fluid progress_7" />
+                <el-progress :percentage="100" :stroke-width="progressConfig.strokeWidth" :show-text="false"
+                    :striped="N9_status" :striped-flow="N9_status" :duration="20"
+                    class="progress_heat_exchange_fluid progress_8 rotate_270" />
+                <el-progress :percentage="100" :stroke-width="progressConfig.strokeWidth" :show-text="false"
+                    :striped="N9_status" :striped-flow="N9_status" :duration="20"
+                    class="progress_heat_exchange_fluid progress_9" />
+                <el-progress :percentage="100" :stroke-width="progressConfig.strokeWidth" :show-text="false"
+                    :striped="N21_status" :striped-flow="N21_status" :duration="20"
+                    class="progress_heat_exchange_fluid progress_10 rotate_270" />
+                <el-progress :percentage="100" :stroke-width="progressConfig.strokeWidth" :show-text="false"
+                    :striped="N21_status" :striped-flow="N21_status" :duration="20"
+                    class="progress_heat_exchange_fluid progress_11 rotate_180" />
+                <el-progress :percentage="100" :stroke-width="progressConfig.strokeWidth" :show-text="false"
+                    :striped="N21_status" :striped-flow="N21_status" :duration="40"
+                    class="progress_heat_exchange_fluid progress_12 rotate_90" />
+                <el-progress :percentage="100" :stroke-width="progressConfig.strokeWidth" :show-text="false"
+                    :striped="getValveOrStatus('D3')" :striped-flow="getValveOrStatus('D3')" :duration="20"
+                    class="progress_heat_exchange_fluid progress_13_1 rotate_180" />
+                <el-progress :percentage="100" :stroke-width="progressConfig.strokeWidth" :show-text="false"
+                    :striped="getValveOrStatus('D1')" :striped-flow="getValveOrStatus('D1')" :duration="20"
+                    class="progress_heat_exchange_fluid progress_13_2" />
+                <el-progress :percentage="100" :stroke-width="progressConfig.strokeWidth" :show-text="false"
+                    :striped="N21_status" :striped-flow="N21_status" :duration="20"
+                    class="progress_heat_exchange_fluid progress_14" />
+
+                <!-- 物料M2(n15)-lb7-j2(d4) -->
+                <el-progress :percentage="100" :stroke-width="progressConfig.strokeWidth" :show-text="false"
+                    :striped="N15_status" :striped-flow="N15_status" :duration="20"
+                    class="progress_materials progress_15" />
+                <el-progress :percentage="100" :stroke-width="progressConfig.strokeWidth" :show-text="false"
+                    :striped="N15_status" :striped-flow="N15_status" :duration="30"
+                    class="progress_materials progress_16 rotate_270" />
+                <el-progress :percentage="100" :stroke-width="progressConfig.strokeWidth" :show-text="false"
+                    :striped="N15_status" :striped-flow="N15_status" :duration="30"
+                    class="progress_materials progress_17" />
+                <el-progress :percentage="100" :stroke-width="progressConfig.strokeWidth" :show-text="false"
+                    :striped="getValveOrStatus('D4')" :striped-flow="getValveOrStatus('D4')" :duration="20"
+                    class="progress_materials progress_18 rotate_270" />
+                <el-progress :percentage="100" :stroke-width="progressConfig.strokeWidth" :show-text="false"
+                    :striped="getValveOrStatus('D4')" :striped-flow="getValveOrStatus('D4')" :duration="30"
+                    class="progress_materials progress_19 rotate_180" />
+                <el-progress :percentage="100" :stroke-width="progressConfig.strokeWidth" :show-text="false"
+                    :striped="getValveOrStatus('D4')" :striped-flow="getValveOrStatus('D4')" :duration="20"
+                    class="progress_materials progress_20 rotate_90" />
+
+                <!-- 蒸汽发生器相关管道 -->
+                <el-progress :percentage="100" :stroke-width="progressConfig.strokeWidth" :show-text="false"
+                    :striped="getValveAndStatus('D2')" :striped-flow="getValveAndStatus('D2')" :duration="20"
+                    class="progress_steam progress_21 rotate_270" />
+                <el-progress :percentage="100" :stroke-width="progressConfig.strokeWidth" :show-text="false"
+                    :striped="getValveAndStatus('D2')" :striped-flow="getValveAndStatus('D2')" :duration="50"
+                    class="progress_steam progress_22 rotate_180" />
+
+                <!-- 换热液j2-M1(n2) -->
+                <el-progress :percentage="100" :stroke-width="progressConfig.strokeWidth" :show-text="false"
+                    :striped="getValveAndStatus('N2')" :striped-flow="getValveAndStatus('N2')" :duration="10"
+                    class="progress_heat_exchange_fluid progress_23 rotate_270" />
+            </div>
+
+            <!-- 大箭头指向 -->
+            <div class="arrows">
+                <div class="arrow arrow_pos1">
+                    <i class="icon iconfont icon-rightArrow arrow_icon" @click="router.push('/m1sj')"> </i>
+                    <div class="arrow_text">M1物料流向</div>
+                </div>
+                <div class="arrow arrow_pos2">
+                    <i class="icon iconfont icon-rightArrow arrow_icon"> </i>
+                    <div class="arrow_text">物料进入</div>
+                </div>
+                <div class="arrow arrow_pos3">
+                    <i class="icon iconfont icon-rightArrow arrow_icon" @click="router.push('/m2cl')"> </i>
+                    <div class="arrow_text">M2物料来源</div>
+                </div>
+            </div>
+        </div>
+
+    </div>
+</template>
+
+<script setup>
+import M1Tank from '@/components/DCS/M1TankComponent.vue';
+import J1Tank from '@/components/DCS/J1TankComponent.vue';
+import Z1Tank from '@/components/DCS/Z1TankComponent.vue';
+import Pump from '@/components/DCS/PumpComponent.vue';
+import { useValveHelper } from '@/hooks/useValveHelper'
+import { useRouter } from 'vue-router'
+import { computed } from 'vue';
+
+const router = useRouter()
+//M1罐阀门状态
+const valveArr_M1 = [
+    {
+        code: 'N1',
+        value: [true],
+    },
+    {
+        code: 'N2',
+        value: [true],
+    },
+    {
+        code: 'N3',
+        value: [true],
+    },
+    {
+        code: 'N4',
+        value: [true],
+    },
+    {
+        code: 'N5',
+        value: [true],
+    },
+    {
+        code: 'N6',
+        value: [true],
+    },
+    {
+        code: 'N7',
+        value: [true],
+    },
+    {
+        code: 'N8',
+        value: [false],
+    },
+    {
+        code: 'N9',
+        value: [true],
+    },
+    {
+        code: 'N10',
+        value: [true],
+    },
+    {
+        code: 'N11',
+        value: [true],
+    },
+]
+
+const valveArr_M2 = [
+    {
+        code: 'N12',
+        value: [true],
+    },
+    {
+        code: 'N14',
+        value: [false],
+    },
+    {
+        code: 'N15',
+        value: [true],
+    },
+    {
+        code: 'N16',
+        value: [true],
+    },
+    {
+        code: 'N17',
+        value: [true],
+    },
+    {
+        code: 'N20',
+        value: [true],
+    },
+    // {
+    //     code: 'N13',
+    //     value: [true],
+    // },
+    {
+        code: 'N18',
+        value: [false],
+    },
+    // {
+    //     code: 'N19',
+    //     value: [true],
+    // },
+]
+
+//J1罐阀门状态
+const valveArr_J1 = [
+    {
+        code: 'D1',
+        value: [true, false, true],
+    },
+    {
+        code: 'D2',
+        value: [true, false, true],
+    },
+]
+
+const valveArr_J2 = [
+    {
+        code: 'D3',
+        value: [true, false, true],
+    },
+    {
+        code: 'D4',
+        value: [true, false, true],
+    },
+]
+
+//Z1罐阀门状态
+const valveArr_Z1 = [
+    {
+        code: 'N21',
+        value: [true],
+    },
+]
+
+//所有阀门状态
+const valveArr = [...new Set([
+    ...valveArr_M1,
+    ...valveArr_M2,
+    ...valveArr_J1,
+    ...valveArr_J2,
+    ...valveArr_Z1,
+])];
+
+const { getValveAndStatus, getValveOrStatus } = useValveHelper(valveArr)
+
+//n18处管道流通状态
+const N18_status = computed(() => {
+    return getValveAndStatus('N18') && getValveOrStatus('N16', 'N17')
+})
+
+//n15处管道流通状态
+const N15_status = computed(() => {
+    return getValveAndStatus('N15') && getValveOrStatus('N16', 'N17')
+})
+
+//n9处管道流通状态
+const N9_status = computed(() => {
+    return getValveAndStatus('N9') && getValveOrStatus('N6', 'N7')
+})
+
+//n21出来部分管道流通状态
+const N21_status = computed(() => {
+    return getValveAndStatus('N21') && getValveOrStatus('D1', 'D3')
+})
+
+//进度条配置
+const progressConfig = {
+    strokeWidth: 8,//进度条宽度
+    percentage: 100,//进度条百分比
+    duration: 10,//进度条流速
+    showText: false,//是否显示文字
+}
+
+</script>
+
+<style lang="scss" scoped>
+.page {
+    // width: 100%;
+    // height: 100%;
+    width: 1920px;
+    height: 1080px;
+    background-color: #0b172c;
+
+    .content_page {
+        position: relative;
+        width: 100%;
+        height: 1000px;
+
+        .hr_m1Tank {
+            position: absolute;
+            top: 35%;
+            left: 9%;
+            transform: translate(-50%, -50%);
+        }
+
+        .hr_z1Tank {
+            position: absolute;
+            top: 3%;
+            left: 41%;
+            transform: translate(-50%, -50%);
+        }
+
+        .hr_j1Tank {
+            position: absolute;
+            top: 54%;
+            left: 37%;
+            transform: translate(-50%, -50%);
+        }
+
+        .hr_j2Tank {
+            position: absolute;
+            top: 54%;
+            left: 20%;
+            transform: translate(-50%, -50%);
+        }
+
+        .hr_m2Tank {
+            position: absolute;
+            top: 35%;
+            left: 69%;
+            transform: translate(-50%, -50%);
+        }
+
+        .pumps {
+            .lb3_pos {
+                position: absolute;
+                z-index: 5;
+                top: 18%;
+                left: 36.4%;
+                transform: translate(-50%, -50%);
+            }
+
+            .lb4_pos {
+                position: absolute;
+                z-index: 5;
+                top: 45%;
+                left: 42.4%;
+                transform: translate(-50%, -50%);
+            }
+
+            .lb7_pos {
+                position: absolute;
+                z-index: 5;
+                top: 85%;
+                left: 61.4%;
+                transform: translate(-50%, -50%);
+            }
+
+
+        }
+
+        //其他图标
+        .icon_others {
+            i {
+                font-size: 150px;
+            }
+
+            .other_title {
+                text-align: center;
+                color: aliceblue;
+            }
+
+            //储气罐
+            .other1 {
+                position: absolute;
+                left: -7.7%;
+
+                .icon_cqg {
+                    font-size: 200px;
+                }
+            }
+
+            //喷淋塔
+            .other2 {
+                position: absolute;
+                right: 0%;
+            }
+
+            //蒸汽发生器
+            .other3 {
+                position: absolute;
+                top: 82%;
+                right: 0%;
+            }
+
+            .other1,
+            .other2,
+            .other3 {
+                z-index: 10;
+            }
+        }
+
+        //手动阀
+        .valve_manual {
+            .valve_items {
+                width: 50px;
+                height: 50px;
+                position: absolute;
+                color: aliceblue;
+                z-index: 100;
+
+                .icon_valve {
+                    font-size: 50px;
+                    color: #c7d2e0;
+                }
+            }
+
+            .valve_item1 {
+                top: 7%;
+                left: 44%;
+            }
+
+            .valve_item2 {
+                top: 55%;
+                left: 30.2%;
+
+                .valve_title {
+                    position: absolute;
+                    left: 51%;
+                    top: 136%;
+                }
+            }
+        }
+
+        .outer_progress {
+
+            //储气罐相关
+            .progress_1 {
+                position: absolute;
+                top: 28.8%;
+                left: 3.3%;
+                width: 13%;
+            }
+
+            .progress_2 {
+                position: absolute;
+                top: 22%;
+                left: 30.6%;
+                width: 19%;
+            }
+
+            .progress_3 {
+                position: absolute;
+                top: 22.4%;
+                left: 63.3%;
+                width: 19.5%;
+            }
+
+            .progress_4 {
+                position: absolute;
+                top: 22%;
+                left: 90.6%;
+                width: 19%;
+            }
+
+            .progress_5_1 {
+                position: absolute;
+                top: 3.6%;
+                left: 3.3%;
+                width: 27.5%;
+            }
+
+            .progress_5_2 {
+                position: absolute;
+                top: 3.6%;
+                left: 30.5%;
+                width: 33%;
+            }
+
+            .progress_5_3 {
+                position: absolute;
+                top: 3.6%;
+                left: 63.1%;
+                width: 27.6%;
+            }
+
+            //喷淋塔相关
+            .progress_6_1 {
+                position: absolute;
+                top: 6%;
+                left: 23%;
+                width: 60.3%;
+            }
+
+            .progress_6_2 {
+                position: absolute;
+                top: 6%;
+                left: 83%;
+                width: 11.3%;
+            }
+
+            //换热液相关
+            .progress_7 {
+                position: absolute;
+                top: 18%;
+                left: 15%;
+                width: 25%;
+            }
+
+            .progress_8 {
+                position: absolute;
+                top: 16%;
+                left: 36%;
+                width: 6%;
+            }
+
+            .progress_9 {
+                position: absolute;
+                top: 10%;
+                left: 35.9%;
+                width: 19%;
+            }
+
+            .progress_10 {
+                position: absolute;
+                top: 42%;
+                left: 46.1%;
+                width: 6%;
+            }
+
+            .progress_11 {
+                position: absolute;
+                top: 36%;
+                left: 38.9%;
+                width: 7.4%;
+            }
+
+            .progress_12 {
+                position: absolute;
+                top: 67%;
+                left: 39.1%;
+                width: 32%;
+            }
+
+            .progress_13_1 {
+                position: absolute;
+                top: 97%;
+                left: 30.3%;
+                width: 9%;
+            }
+
+            .progress_13_2 {
+                position: absolute;
+                top: 97%;
+                left: 39%;
+                width: 8.7%;
+            }
+
+            .progress_14 {
+                position: absolute;
+                top: 45%;
+                left: 45.5%;
+                width: 6%;
+            }
+
+            .progress_15 {
+                position: absolute;
+                top: 18%;
+                left: 75%;
+                width: 17%;
+            }
+
+            .progress_16 {
+                position: absolute;
+                top: 52%;
+                left: 91.8%;
+                width: 35%;
+            }
+
+            .progress_17 {
+                position: absolute;
+                top: 84.8%;
+                left: 65%;
+                width: 27%;
+            }
+
+            .progress_18 {
+                position: absolute;
+                top: 72%;
+                left: 65.2%;
+                width: 14.4%;
+            }
+
+            .progress_19 {
+                position: absolute;
+                top: 58%;
+                left: 37.5%;
+                width: 27.8%;
+            }
+
+            .progress_20 {
+                position: absolute;
+                top: 70%;
+                left: 37.7%;
+                width: 12%;
+            }
+
+            .progress_21 {
+                position: absolute;
+                top: 78.7%;
+                left: 54.7%;
+                width: 13%;
+            }
+
+            .progress_22 {
+                position: absolute;
+                top: 91%;
+                left: 54.5%;
+                width: 41%;
+            }
+
+            .progress_23 {
+                position: absolute;
+                top: 57%;
+                left: 30.6%;
+                width: 8%;
+            }
+        }
+
+        .arrows {
+            //arrow通用
+            // .arrow {
+            //     position: absolute;
+            //     transform: translate(-50%, -50%);
+            //     .arrow_icon {
+            //         font-size: 100px;
+            //         color: aliceblue;
+            //     }
+
+            //     .arrow_text {
+            //         text-align: center;
+            //         font-size: 20px;
+            //         color: aliceblue;
+            //     }
+            // }
+
+            .arrow_pos1 {
+                top: 90.6%;
+                left: 19.4%;
+                //竖直方向
+                display: flex;
+                flex-direction: column;
+                .arrow_icon {
+                    transform: rotate(90deg);
+                }
+            }
+
+            .arrow_pos2 {
+                left: 7%;
+                top: 65%;
+
+                .arrow_icon {
+                    color: darkgray;
+                }
+            }
+
+            .arrow_pos3 {
+                top: 70.6%;
+                left: 69.4%;
+                display: flex;
+                flex-direction: column;
+
+                .arrow_icon {
+                    transform: rotate(270deg);
+                }
+            }
+        }
+
+    }
+}
+</style>

ui/src/views/configuratePage/m1Hydrolyze/index.vue

@@ -123,18 +123,28 @@
                     :striped="getValveOrStatus('N22', 'N23', 'N24')"
                     :striped-flow="getValveOrStatus('N22', 'N23', 'N24')" :duration="10"
                     class="progress_materials progress_pos12_3" />
+
+                <!-- 通向换热流程的管道 -->
+                <el-progress :percentage="100" :stroke-width="progressConfig.strokeWidth" :show-text="false"
+                    :striped="getValveAndStatus('N9') && getValveOrStatus('N6', 'N7')"
+                    :striped-flow="getValveAndStatus('N9') && getValveOrStatus('N6', 'N7')" :duration="10"
+                    class="progress_heat_exchange_fluid progress_pos13 rotate_270" />
             </div>
 
             <!-- 大箭头指向 -->
             <div class="arrows">
-                <div class="arrow_pos1">
+                <div class="arrow arrow_pos1">
                     <i class="icon iconfont icon-rightArrow arrow_icon" @click="router.push('/m2cl')"> </i>
                     <div class="arrow_text">M2流程</div>
                 </div>
-                <div class="arrow_pos2">
+                <div class="arrow arrow_pos2">
                     <i class="icon iconfont icon-rightArrow arrow_icon"> </i>
                     <div class="arrow_text">物料进入</div>
                 </div>
+                <div class="arrow arrow_pos3">
+                    <div class="arrow_text">换热流程</div>
+                    <i class="icon iconfont icon-rightArrow arrow_icon" @click="router.push('/hr')"> </i>
+                </div>
             </div>
         </div>
 
@@ -229,7 +239,7 @@ const valveArr_S1 = [
 const valveArr_S2 = [
     {
         code: 'D6',
-        value: [true, false, false],
+        value: [true, false, true],
     },
     {
         code: 'D9',
@@ -247,6 +257,10 @@ const valveArr_S2 = [
         code: 'N23',
         value: [true],
     },
+    {
+        code: 'N10',
+        value: [true],
+    }
 
 ]
 //S3罐阀门状态
@@ -267,7 +281,10 @@ const valveArr_S3 = [
         code: 'N24',
         value: [true],
     },
-
+    {
+        code: 'N10',
+        value: [true],
+    },
 ]
 //所有阀门状态
 const valveArr = [...new Set([
@@ -425,8 +442,8 @@ const progressConfig = {
 
             .progress_pos4 {
                 position: absolute;
-                top: 37.2%;
-                left: -1%;
+                top: 38%;
+                left: 3.3%;
                 width: 168px;
             }
 
@@ -548,28 +565,37 @@ const progressConfig = {
                 left: 85.4%;
                 width: 195px;
             }
+
+            .progress_pos13 {
+                position: absolute;
+                top: 17.6%;
+                left: 15.3%;
+                width: 6%;
+            }
         }
 
         .arrows {
 
-            .arrow_pos1,
-            .arrow_pos2 {
-                position: absolute;
-                top: 82.6%;
-                left: 95%;
-                transform: translate(-50%, -50%);
+            // .arrow {
+            //     position: absolute;
+            //     transform: translate(-50%, -50%);
 
-                .arrow_icon {
-                    font-size: 100px;
-                    color: aliceblue;
-                }
+            //     .arrow_icon {
+            //         font-size: 100px;
+            //         color: aliceblue;
+            //     }
 
-                .arrow_text {
-                    text-align: center;
-                    font-size: 20px;
-                    color: aliceblue;
+            //     .arrow_text {
+            //         text-align: center;
+            //         font-size: 20px;
+            //         color: aliceblue;
 
-                }
+            //     }
+            // }
+
+            .arrow_pos1 {
+                top: 82.6%;
+                left: 95%;
             }
 
             .arrow_pos2 {
@@ -579,7 +605,17 @@ const progressConfig = {
                 .arrow_icon {
                     color: darkgray;
                 }
+            }
+
+            .arrow_pos3 {
+                top: 8%;
+                left: 15.3%;
+                display: flex;
+                flex-direction: column;
 
+                .arrow_icon {
+                    transform: rotate(270deg);
+                }
             }
         }
 

ui/src/views/configuratePage/m2OutMaterial/index.vue

@@ -154,8 +154,8 @@
                     :duration="progressConfig.duration" class="progress_materials progress_pos17 rotate_270" />
                 <!-- 通向p1的管道 -->
                 <el-progress :percentage="100" :stroke-width="progressConfig.strokeWidth" :show-text="false"
-                    :striped="getValveOrStatus('N13')" :striped-flow="getValveOrStatus('N13')"
-                    :duration="progressConfig.duration" class="progress_red progress_pos18" />
+                    :striped="getValveOrStatus('N13')" :striped-flow="getValveOrStatus('N13')" :duration="19.2"
+                    class="progress_red progress_pos18" />
             </div>
             <!-- 大箭头指向 -->
             <div class="arrows">
@@ -688,9 +688,9 @@ const pumpStatus_N18 = computed(() => {
 
             .progress_pos18 {
                 position: absolute;
-                top: 60.8%;
-                left: 80.6%;
-                width: 9%;
+                top: 54%;
+                left: 80%;
+                width: 10%;
             }
 
         }