feat(hnyzConfiguratePage):钠钾锂分离模块单组PID组态页面

ui/src/views/hnyzConfiguratePage/HeatExchange/index.vue

@@ -0,0 +1,684 @@
+<template>
+    <div class="page">
+        <HeaderComponent title="换热"></HeaderComponent>
+        <div class="content_page">
+            <!-- 罐体 -->
+            <div class="tanks">
+               <!-- <WaterSinkValvesComponent title="V6101"  :iconWidth="100" :iconHeight="80" :waterLevelValue="80" :tempValue="20" class="tank_test"/> -->
+                <!-- <SeparatorTowerValves title="分离塔1" :iconSize="100" class="tank_test" /> -->
+
+            </div>
+            <!-- 外部管道排布 -->
+            <div class="outer_progress">
+               
+            </div>
+
+            <!-- 其他图标 -->
+            <div class="icon_others">
+
+            </div>
+            <!-- 外部组件 -->
+            <div class="outer_components">
+                
+            </div>
+
+            <!-- 大箭头指向 -->
+            <div class="arrows">
+              
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import WaterSinkValvesComponent from '@/components/HnyzDcs/WaterSinkValvesComponent.vue';
+import SeparatorTowerValves from '@/components/HnyzDcs/SeparatorTowerValvesComponent.vue';
+import FTypeTankValves from '@/components/HnyzDcs/FTypeTankValvesComponent.vue';
+import Pipe from '@/components/HnyzDcs/PipeComponent.vue';
+import Arrow from '@/components/HnyzDcs/ArrowComponent.vue';
+import { useValveHelper } from '@/hooks/useValveHelper'
+import { computed, onMounted, onBeforeUnmount } from 'vue';
+
+import { stompClient } from '@/utils/ws/stompClient';
+import { updateZTPageConfig } from '@/api/dcs/configurePage';
+import SeparatorTowerValvesComponent from '../../../components/HnyzDcs/SeparatorTowerValvesComponent.vue';
+
+const initPipeStatus = true
+const initValveStatusArr = [true]
+//初始管道宽度
+const pipeWidth = 6
+//模拟温度变化，每秒变化一次
+// const ttValue = ref(0)
+// onMounted(() => {
+//     //定时器模拟数据变化
+//     setInterval(() => {
+//         ttValue.value = Math.floor(Math.random() * 100)
+//         // console.log(ttValue.value)
+//     }, 1000)
+// })
+
+</script>
+
+<style lang="scss" scoped>
+.page {
+    width: 1920px;
+    height: 1080px;
+    background-color: #0b172c;
+
+    .content_page {
+        position: relative;
+        width: 100%;
+        height: 1000px;
+
+        //罐体
+        .tanks {
+            .tank_test{
+                position: absolute;
+                top: 40%;
+                left: 50%;
+                transform: translate(-50%, -50%);
+            }
+            .tank_F6001 {
+                position: absolute;
+                top: 25%;
+                left: 18%;
+                transform: translate(-50%, -50%);
+            }
+
+            .tank_F6002 {
+                position: absolute;
+                top: 25%;
+                left: 25%;
+                transform: translate(-50%, -50%);
+            }
+
+            .tank_F6003 {
+                position: absolute;
+                top: 25%;
+                left: 32%;
+                transform: translate(-50%, -50%);
+            }
+
+            .tank_F6004 {
+                position: absolute;
+                top: 25%;
+                left: 39%;
+                transform: translate(-50%, -50%);
+            }
+
+            .tank_F6005 {
+                position: absolute;
+                top: 25%;
+                left: 46%;
+                transform: translate(-50%, -50%);
+            }
+
+            .tank_F6006 {
+                position: absolute;
+                top: 25%;
+                left: 53%;
+                transform: translate(-50%, -50%);
+            }
+
+            .tank_F6007 {
+                position: absolute;
+                top: 25%;
+                left: 60%;
+                transform: translate(-50%, -50%);
+            }
+
+            .tank_F6008 {
+                position: absolute;
+                top: 25%;
+                left: 67%;
+                transform: translate(-50%, -50%);
+            }
+
+            .tank_F6009 {
+                position: absolute;
+                top: 25%;
+                left: 74%;
+                transform: translate(-50%, -50%);
+            }
+
+            .tank_F6010 {
+                position: absolute;
+                top: 25%;
+                left: 81%;
+                transform: translate(-50%, -50%);
+            }
+
+            .tank_F6011 {
+                position: absolute;
+                top: 70%;
+                left: 18%;
+                transform: translate(-50%, -50%);
+            }
+
+            .tank_F6012 {
+                position: absolute;
+                top: 70%;
+                left: 25%;
+                transform: translate(-50%, -50%);
+            }
+
+            .tank_F6013 {
+                position: absolute;
+                top: 70%;
+                left: 32%;
+                transform: translate(-50%, -50%);
+            }
+
+            .tank_F6014 {
+                position: absolute;
+                top: 70%;
+                left: 39%;
+                transform: translate(-50%, -50%);
+            }
+
+            .tank_F6015 {
+                position: absolute;
+                top: 70%;
+                left: 46%;
+                transform: translate(-50%, -50%);
+            }
+
+            .tank_F6016 {
+                position: absolute;
+                top: 70%;
+                left: 53%;
+                transform: translate(-50%, -50%);
+            }
+
+            .tank_F6017 {
+                position: absolute;
+                top: 70%;
+                left: 60%;
+                transform: translate(-50%, -50%);
+            }
+
+            .tank_F6018 {
+                position: absolute;
+                top: 70%;
+                left: 67%;
+                transform: translate(-50%, -50%);
+            }
+
+            .tank_F6019 {
+                position: absolute;
+                top: 70%;
+                left: 74%;
+                transform: translate(-50%, -50%);
+            }
+
+            .tank_F6020 {
+                position: absolute;
+                top: 70%;
+                left: 81%;
+                transform: translate(-50%, -50%);
+            }
+
+
+        }
+
+        //其他图标
+        .icon_others {}
+
+        //外部组件
+        .outer_components {
+            .component_pos1 {
+                position: absolute;
+                top: 7%;
+                left: 7.5%;
+            }
+        }
+
+        //箭头指向
+        .arrows {
+            .arrow_pos1 {
+                position: absolute;
+                top: 26%;
+                left: 8%;
+                transform: translate(-50%, -50%);
+            }
+
+            .arrow_pos2 {
+                position: absolute;
+                top: 35.5%;
+                left: 7%;
+                transform: translate(-50%, -50%);
+            }
+
+            .arrow_pos3 {
+                position: absolute;
+                top: 60.5%;
+                left: 7%;
+                transform: translate(-50%, -50%);
+            }
+
+            .arrow_pos4 {
+                position: absolute;
+                top: 26%;
+                left: 94%;
+                transform: translate(-50%, -50%);
+            }
+        }
+
+        //外部管道排布
+        .outer_progress {
+            .progress_pos1 {
+                position: absolute;
+                top: 15.1%;
+                left: 15%;
+                width: 72.6%;
+            }
+
+            .progress_pos2 {
+                position: absolute;
+                top: 60.1%;
+                left: 15%;
+                width: 72.6%;
+            }
+
+            .progress_pos3 {
+                position: absolute;
+                top: 20.6%;
+                left: 15.1%;
+                width: 5.7%;
+            }
+
+            .progress_pos3_2 {
+                position: absolute;
+                top: 43.3%;
+                left: 15.1%;
+                width: 18%;
+            }
+
+            .progress_pos4 {
+                position: absolute;
+                top: 20.6%;
+                left: 87.5%;
+                width: 5.7%;
+            }
+
+            .progress_pos4_2 {
+                position: absolute;
+                top: 43.3%;
+                left: 87.5%;
+                width: 18%;
+            }
+
+
+
+            .progress_pos5 {
+                position: absolute;
+                top: 8.7%;
+                left: 14%;
+                width: 3.7%;
+            }
+
+            .progress_pos5_2 {
+                position: absolute;
+                top: 8.7%;
+                left: 17.4%;
+                width: 7.3%;
+            }
+
+            .progress_pos5_3 {
+                position: absolute;
+                top: 8.7%;
+                left: 24.4%;
+                width: 7.3%;
+            }
+
+            .progress_pos5_4 {
+                position: absolute;
+                top: 8.7%;
+                left: 31.4%;
+                width: 7.3%;
+            }
+
+            .progress_pos5_5 {
+                position: absolute;
+                top: 8.7%;
+                left: 38.4%;
+                width: 7.3%;
+            }
+
+            .progress_pos5_6 {
+                position: absolute;
+                top: 8.7%;
+                left: 45.4%;
+                width: 7.3%;
+            }
+
+            .progress_pos5_7 {
+                position: absolute;
+                top: 8.7%;
+                left: 52.4%;
+                width: 7.3%;
+            }
+
+            .progress_pos5_8 {
+                position: absolute;
+                top: 8.7%;
+                left: 59.4%;
+                width: 7.3%;
+            }
+
+            .progress_pos5_9 {
+                position: absolute;
+                top: 8.7%;
+                left: 66.4%;
+                width: 7.3%;
+            }
+
+            .progress_pos5_10 {
+                position: absolute;
+                top: 8.7%;
+                left: 73.4%;
+                width: 7.3%;
+            }
+
+            .progress_pos5_11 {
+                position: absolute;
+                top: 8.7%;
+                left: 80.4%;
+                width: 6.2%;
+            }
+
+            .progress_pos6 {
+                position: absolute;
+                top: 53.7%;
+                left: 14%;
+                width: 3.7%;
+            }
+
+            .progress_pos6_2 {
+                position: absolute;
+                top: 53.7%;
+                left: 17.4%;
+                width: 7.3%;
+            }
+
+            .progress_pos6_3 {
+                position: absolute;
+                top: 53.7%;
+                left: 24.4%;
+                width: 7.3%;
+            }
+
+            .progress_pos6_4 {
+                position: absolute;
+                top: 53.7%;
+                left: 31.4%;
+                width: 7.3%;
+            }
+
+            .progress_pos6_5 {
+                position: absolute;
+                top: 53.7%;
+                left: 38.4%;
+                width: 7.3%;
+            }
+
+            .progress_pos6_6 {
+                position: absolute;
+                top: 53.7%;
+                left: 45.4%;
+                width: 7.3%;
+            }
+
+            .progress_pos6_7 {
+                position: absolute;
+                top: 53.7%;
+                left: 52.4%;
+                width: 7.3%;
+            }
+
+            .progress_pos6_8 {
+                position: absolute;
+                top: 53.7%;
+                left: 59.4%;
+                width: 7.3%;
+            }
+
+            .progress_pos6_9 {
+                position: absolute;
+                top: 53.7%;
+                left: 66.4%;
+                width: 7.3%;
+            }
+
+            .progress_pos6_10 {
+                position: absolute;
+                top: 53.7%;
+                left: 73.4%;
+                width: 7.3%;
+            }
+
+            .progress_pos6_11 {
+                position: absolute;
+                top: 53.7%;
+                left: 80.4%;
+                width: 6.2%;
+            }
+
+            .progress_pos7 {
+                position: absolute;
+                top: 31.5%;
+                left: 14.1%;
+                width: 23.7%;
+            }
+
+            .progress_pos8 {
+                position: absolute;
+                top: 31.5%;
+                left: 86.5%;
+                width: 23.7%;
+            }
+
+            .progress_pos9 {
+                position: absolute;
+                top: 47%;
+                left: 13%;
+                width: 5.2%;
+            }
+
+            .progress_pos9_2 {
+                position: absolute;
+                top: 47%;
+                left: 17.8%;
+                width: 7.3%;
+            }
+
+            .progress_pos9_3 {
+                position: absolute;
+                top: 47%;
+                left: 24.8%;
+                width: 7.3%;
+            }
+
+            .progress_pos9_4 {
+                position: absolute;
+                top: 47%;
+                left: 31.8%;
+                width: 7.3%;
+            }
+
+            .progress_pos9_5 {
+                position: absolute;
+                top: 47%;
+                left: 38.8%;
+                width: 7.3%;
+            }
+
+            .progress_pos9_6 {
+                position: absolute;
+                top: 47%;
+                left: 45.8%;
+                width: 7.3%;
+            }
+
+            .progress_pos9_7 {
+                position: absolute;
+                top: 47%;
+                left: 52.8%;
+                width: 7.3%;
+            }
+
+            .progress_pos9_8 {
+                position: absolute;
+                top: 47%;
+                left: 59.8%;
+                width: 7.3%;
+            }
+
+            .progress_pos9_9 {
+                position: absolute;
+                top: 47%;
+                left: 66.8%;
+                width: 7.3%;
+            }
+
+            .progress_pos9_10 {
+                position: absolute;
+                top: 47%;
+                left: 73.8%;
+                width: 7.3%;
+            }
+
+            .progress_pos9_11 {
+                position: absolute;
+                top: 47%;
+                left: 80.8%;
+                width: 4.9%;
+            }
+
+
+            .progress_pos10 {
+                position: absolute;
+                top: 92%;
+                left: 13%;
+                width: 5.2%;
+            }
+
+            .progress_pos10_2 {
+                position: absolute;
+                top: 92%;
+                left: 17.8%;
+                width: 7.3%;
+            }
+
+            .progress_pos10_3 {
+                position: absolute;
+                top: 92%;
+                left: 24.8%;
+                width: 7.3%;
+            }
+
+            .progress_pos10_4 {
+                position: absolute;
+                top: 92%;
+                left: 31.8%;
+                width: 7.3%;
+            }
+
+            .progress_pos10_5 {
+                position: absolute;
+                top: 92%;
+                left: 38.8%;
+                width: 7.3%;
+            }
+
+            .progress_pos10_6 {
+                position: absolute;
+                top: 92%;
+                left: 45.8%;
+                width: 7.3%;
+            }
+
+            .progress_pos10_7 {
+                position: absolute;
+                top: 92%;
+                left: 52.8%;
+                width: 7.3%;
+            }
+
+            .progress_pos10_8 {
+                position: absolute;
+                top: 92%;
+                left: 59.8%;
+                width: 7.3%;
+            }
+
+            .progress_pos10_9 {
+                position: absolute;
+                top: 92%;
+                left: 66.8%;
+                width: 7.3%;
+            }
+
+            .progress_pos10_10 {
+                position: absolute;
+                top: 92%;
+                left: 73.8%;
+                width: 7.3%;
+            }
+
+            .progress_pos10_11 {
+                position: absolute;
+                top: 92%;
+                left: 80.8%;
+                width: 4.9%;
+            }
+
+            .progress_pos11 {
+                position: absolute;
+                top: 69.8%;
+                left: 13%;
+                width: 23.7%;
+            }
+
+            .progress_pos12 {
+                position: absolute;
+                top: 69.8%;
+                left: 85.5%;
+                width: 23.7%;
+            }
+
+            .progress_pos13 {
+                position: absolute;
+                top: 25.8%;
+                left: 11%;
+                width: 4.3%;
+            }
+
+            .progress_pos14 {
+                position: absolute;
+                top: 25.8%;
+                left: 87.35%;
+                width: 4.3%;
+            }
+
+            .progress_pos15 {
+                position: absolute;
+                top: 35.3%;
+                left: 9.9%;
+                width: 4.3%;
+            }
+
+
+
+            .progress_pos16 {
+                position: absolute;
+                top: 60.3%;
+                left: 8.9%;
+                width: 4.3%;
+            }
+
+        }
+
+    }
+}
+</style>

ui/src/views/hnyzConfiguratePage/SeparationTower_SingleGroup/index.vue

@@ -0,0 +1,787 @@
+<template>
+    <div class="page">
+        <HeaderComponent title="钠钾锂分离塔-单组PID"></HeaderComponent>
+        <div class="content_page">
+            <!-- 罐体 -->
+            <div class="tanks">
+                <FTypeTankValves title="F6001" :iconSize="150" :tempValue="60" :waterLevelValue="30"
+                    class="tank_F6001" />
+                <FTypeTankValves title="F6002" :iconSize="150" :waterLevelValue="30" class="tank_F6002" />
+                <FTypeTankValves title="F6003" :iconSize="150" :waterLevelValue="30" class="tank_F6003" />
+                <FTypeTankValves title="F6004" :iconSize="150" :waterLevelValue="30" class="tank_F6004" />
+                <FTypeTankValves title="F6005" :iconSize="150" :waterLevelValue="30" class="tank_F6005" />
+                <FTypeTankValves title="F6006" :iconSize="150" :waterLevelValue="30" class="tank_F6006" />
+                <FTypeTankValves title="F6007" :iconSize="150" :waterLevelValue="30" class="tank_F6007" />
+                <FTypeTankValves title="F6008" :iconSize="150" :waterLevelValue="30" class="tank_F6008" />
+                <FTypeTankValves title="F6009" :iconSize="150" :waterLevelValue="30" class="tank_F6009" />
+                <FTypeTankValves title="F6010" :iconSize="150" :waterLevelValue="30" class="tank_F6010" />
+                <FTypeTankValves title="F6011" :iconSize="150" :waterLevelValue="30" class="tank_F6011" />
+                <FTypeTankValves title="F6012" :iconSize="150" :waterLevelValue="30" class="tank_F6012" />
+                <FTypeTankValves title="F6013" :iconSize="150" :waterLevelValue="30" class="tank_F6013" />
+                <FTypeTankValves title="F6014" :iconSize="150" :waterLevelValue="30" class="tank_F6014" />
+                <FTypeTankValves title="F6015" :iconSize="150" :waterLevelValue="30" class="tank_F6015" />
+                <FTypeTankValves title="F6016" :iconSize="150" :waterLevelValue="30" class="tank_F6016" />
+                <FTypeTankValves title="F6017" :iconSize="150" :waterLevelValue="30" class="tank_F6017" />
+                <FTypeTankValves title="F6018" :iconSize="150" :waterLevelValue="30" class="tank_F6018" />
+                <FTypeTankValves title="F6019" :iconSize="150" :waterLevelValue="30" class="tank_F6019" />
+                <FTypeTankValves title="F6020" :iconSize="150" :tempValue="60" :waterLevelValue="30"
+                    class="tank_F6020" />
+            </div>
+            <!-- 外部管道排布 -->
+            <div class="outer_progress">
+                <!-- 排气管道-上 -->
+                <Pipe :pipeStatus="initPipeStatus" :strokeWidth="pipeWidth" class="progress_green progress_pos1" />
+                <!-- 排气管道-下 -->
+                <Pipe :pipeStatus="initPipeStatus" :strokeWidth="pipeWidth" class="progress_green progress_pos2" />
+                <!-- 排气管道-左 -->
+                <Pipe :pipeStatus="initPipeStatus" :strokeWidth="pipeWidth"
+                    class="progress_green progress_pos3 rotate_90" />
+                <Pipe :pipeStatus="initPipeStatus" :strokeWidth="pipeWidth"
+                    class="progress_green progress_pos3_2 rotate_90" />
+                <Pipe :pipeStatus="initPipeStatus" :strokeWidth="pipeWidth"
+                    class="progress_green progress_pos13 rotate_180" />
+
+                <!-- 排气管道-右 -->
+                <Pipe :pipeStatus="initPipeStatus" :strokeWidth="pipeWidth"
+                    class="progress_green progress_pos4 rotate_90" />
+                <Pipe :pipeStatus="initPipeStatus" :strokeWidth="pipeWidth"
+                    class="progress_green progress_pos4_2 rotate_90" />
+                <Pipe :pipeStatus="initPipeStatus" :strokeWidth="pipeWidth" class="progress_green progress_pos14" />
+
+                <!-- 上回路-上 -->
+                <Pipe :pipeStatus="initPipeStatus" :strokeWidth="pipeWidth" class="progress_red progress_pos5" />
+                <Pipe :pipeStatus="initPipeStatus" :strokeWidth="pipeWidth" class="progress_red progress_pos5_2" />
+                <Pipe :pipeStatus="initPipeStatus" :strokeWidth="pipeWidth" class="progress_red progress_pos5_3" />
+                <Pipe :pipeStatus="initPipeStatus" :strokeWidth="pipeWidth" class="progress_red progress_pos5_4" />
+                <Pipe :pipeStatus="initPipeStatus" :strokeWidth="pipeWidth" class="progress_red progress_pos5_5" />
+                <Pipe :pipeStatus="initPipeStatus" :strokeWidth="pipeWidth" class="progress_red progress_pos5_6" />
+                <Pipe :pipeStatus="initPipeStatus" :strokeWidth="pipeWidth" class="progress_red progress_pos5_7" />
+                <Pipe :pipeStatus="initPipeStatus" :strokeWidth="pipeWidth" class="progress_red progress_pos5_8" />
+                <Pipe :pipeStatus="initPipeStatus" :strokeWidth="pipeWidth" class="progress_red progress_pos5_9" />
+                <Pipe :pipeStatus="initPipeStatus" :strokeWidth="pipeWidth" class="progress_red progress_pos5_10" />
+                <Pipe :pipeStatus="initPipeStatus" :strokeWidth="pipeWidth" class="progress_red progress_pos5_11" />
+
+                <!-- 上回路-下 -->
+                <Pipe :pipeStatus="initPipeStatus" :strokeWidth="pipeWidth" class="progress_red progress_pos6" />
+                <Pipe :pipeStatus="initPipeStatus" :strokeWidth="pipeWidth" class="progress_red progress_pos6_2" />
+                <Pipe :pipeStatus="initPipeStatus" :strokeWidth="pipeWidth" class="progress_red progress_pos6_3" />
+                <Pipe :pipeStatus="initPipeStatus" :strokeWidth="pipeWidth" class="progress_red progress_pos6_4" />
+                <Pipe :pipeStatus="initPipeStatus" :strokeWidth="pipeWidth" class="progress_red progress_pos6_5" />
+                <Pipe :pipeStatus="initPipeStatus" :strokeWidth="pipeWidth" class="progress_red progress_pos6_6" />
+                <Pipe :pipeStatus="initPipeStatus" :strokeWidth="pipeWidth" class="progress_red progress_pos6_7" />
+                <Pipe :pipeStatus="initPipeStatus" :strokeWidth="pipeWidth" class="progress_red progress_pos6_8" />
+                <Pipe :pipeStatus="initPipeStatus" :strokeWidth="pipeWidth" class="progress_red progress_pos6_9" />
+                <Pipe :pipeStatus="initPipeStatus" :strokeWidth="pipeWidth" class="progress_red progress_pos6_10" />
+                <Pipe :pipeStatus="initPipeStatus" :strokeWidth="pipeWidth" class="progress_red progress_pos6_11" />
+
+                <!-- 上回路-左 -->
+                <Pipe :pipeStatus="initPipeStatus" :strokeWidth="pipeWidth"
+                    class="progress_red progress_pos7 rotate_90" />
+                <Pipe :pipeStatus="initPipeStatus" :strokeWidth="pipeWidth" class="progress_red progress_pos15" />
+                <!-- 上回路-右 -->
+                <Pipe :pipeStatus="initPipeStatus" :strokeWidth="pipeWidth"
+                    class="progress_red progress_pos8 rotate_90" />
+
+                <!-- 下回路-上 -->
+                <Pipe :pipeStatus="initPipeStatus" :strokeWidth="pipeWidth" class="progress_blue progress_pos9" />
+                <Pipe :pipeStatus="initPipeStatus" :strokeWidth="pipeWidth" class="progress_blue progress_pos9_2" />
+                <Pipe :pipeStatus="initPipeStatus" :strokeWidth="pipeWidth" class="progress_blue progress_pos9_3" />
+                <Pipe :pipeStatus="initPipeStatus" :strokeWidth="pipeWidth" class="progress_blue progress_pos9_4" />
+                <Pipe :pipeStatus="initPipeStatus" :strokeWidth="pipeWidth" class="progress_blue progress_pos9_5" />
+                <Pipe :pipeStatus="initPipeStatus" :strokeWidth="pipeWidth" class="progress_blue progress_pos9_6" />
+                <Pipe :pipeStatus="initPipeStatus" :strokeWidth="pipeWidth" class="progress_blue progress_pos9_7" />
+                <Pipe :pipeStatus="initPipeStatus" :strokeWidth="pipeWidth" class="progress_blue progress_pos9_8" />
+                <Pipe :pipeStatus="initPipeStatus" :strokeWidth="pipeWidth" class="progress_blue progress_pos9_9" />
+                <Pipe :pipeStatus="initPipeStatus" :strokeWidth="pipeWidth" class="progress_blue progress_pos9_10" />
+                <Pipe :pipeStatus="initPipeStatus" :strokeWidth="pipeWidth" class="progress_blue progress_pos9_11" />
+                <!-- 下回路-下 -->
+                <Pipe :pipeStatus="initPipeStatus" :strokeWidth="pipeWidth" class="progress_blue progress_pos10" />
+                <Pipe :pipeStatus="initPipeStatus" :strokeWidth="pipeWidth" class="progress_blue progress_pos10_2" />
+                <Pipe :pipeStatus="initPipeStatus" :strokeWidth="pipeWidth" class="progress_blue progress_pos10_3" />
+                <Pipe :pipeStatus="initPipeStatus" :strokeWidth="pipeWidth" class="progress_blue progress_pos10_4" />
+                <Pipe :pipeStatus="initPipeStatus" :strokeWidth="pipeWidth" class="progress_blue progress_pos10_5" />
+                <Pipe :pipeStatus="initPipeStatus" :strokeWidth="pipeWidth" class="progress_blue progress_pos10_6" />
+                <Pipe :pipeStatus="initPipeStatus" :strokeWidth="pipeWidth" class="progress_blue progress_pos10_7" />
+                <Pipe :pipeStatus="initPipeStatus" :strokeWidth="pipeWidth" class="progress_blue progress_pos10_8" />
+                <Pipe :pipeStatus="initPipeStatus" :strokeWidth="pipeWidth" class="progress_blue progress_pos10_9" />
+                <Pipe :pipeStatus="initPipeStatus" :strokeWidth="pipeWidth" class="progress_blue progress_pos10_10" />
+                <Pipe :pipeStatus="initPipeStatus" :strokeWidth="pipeWidth" class="progress_blue progress_pos10_11" />
+                <!-- 下回路-左 -->
+                <Pipe :pipeStatus="initPipeStatus" :strokeWidth="pipeWidth"
+                    class="progress_blue progress_pos11 rotate_90" />
+                <Pipe :pipeStatus="initPipeStatus" :strokeWidth="pipeWidth" class="progress_blue progress_pos16" />
+                <!-- 下回路-右 -->
+                <Pipe :pipeStatus="initPipeStatus" :strokeWidth="pipeWidth"
+                    class="progress_blue progress_pos12 rotate_90" />
+            </div>
+
+            <!-- 其他图标 -->
+            <div class="icon_others">
+
+            </div>
+            <!-- 外部组件 -->
+            <div class="outer_components">
+                <!-- 蒸汽发生器B2001-ACV2066  -->
+                <!-- <div class="component_pos1 zIndex10">
+                    <ValveProgress :iconSize="37.5" title="ACV2066" :pipeLength="278" :pipeLeftOffset="-70"
+                        :valveStatusArr="initValveStatusArr" progressType="steam" :pipeStatus="initPipeStatus" />
+                </div> -->
+            </div>
+
+            <!-- 大箭头指向 -->
+            <div class="arrows">
+                <Arrow flexDir="row" arrowDir="left" :iconFirst="false" arrowText="排气" :fontSize="18"
+                    class="arrow_pos1"></Arrow>
+                <Arrow flexDir="row" arrowText="上回路" arrowDir="left" :iconFirst="false" :fontSize="18"
+                    class="arrow_pos2"></Arrow>
+                <Arrow flexDir="row" arrowText="下回路" arrowDir="left" :iconFirst="false" :fontSize="18"
+                    class="arrow_pos3"></Arrow>
+                <Arrow flexDir="row" arrowText="排气" :fontSize="18" class="arrow_pos4"></Arrow>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import FTypeTankValves from '@/components/HnyzDcs/FTypeTankValvesComponent.vue';
+import Pipe from '@/components/HnyzDcs/PipeComponent.vue';
+import Arrow from '@/components/HnyzDcs/ArrowComponent.vue';
+import { useValveHelper } from '@/hooks/useValveHelper'
+import { computed, onMounted, onBeforeUnmount } from 'vue';
+
+import { stompClient } from '@/utils/ws/stompClient';
+import { updateZTPageConfig } from '@/api/dcs/configurePage';
+
+const initPipeStatus = true
+const initValveStatusArr = [true]
+//初始管道宽度
+const pipeWidth = 6
+//模拟温度变化，每秒变化一次
+// const ttValue = ref(0)
+// onMounted(() => {
+//     //定时器模拟数据变化
+//     setInterval(() => {
+//         ttValue.value = Math.floor(Math.random() * 100)
+//         // console.log(ttValue.value)
+//     }, 1000)
+// })
+
+</script>
+
+<style lang="scss" scoped>
+.page {
+    width: 1920px;
+    height: 1080px;
+    background-color: #0b172c;
+
+    .content_page {
+        position: relative;
+        width: 100%;
+        height: 1000px;
+
+        //罐体
+        .tanks {
+            .tank_F6001 {
+                position: absolute;
+                top: 25%;
+                left: 18%;
+                transform: translate(-50%, -50%);
+            }
+
+            .tank_F6002 {
+                position: absolute;
+                top: 25%;
+                left: 25%;
+                transform: translate(-50%, -50%);
+            }
+
+            .tank_F6003 {
+                position: absolute;
+                top: 25%;
+                left: 32%;
+                transform: translate(-50%, -50%);
+            }
+
+            .tank_F6004 {
+                position: absolute;
+                top: 25%;
+                left: 39%;
+                transform: translate(-50%, -50%);
+            }
+
+            .tank_F6005 {
+                position: absolute;
+                top: 25%;
+                left: 46%;
+                transform: translate(-50%, -50%);
+            }
+
+            .tank_F6006 {
+                position: absolute;
+                top: 25%;
+                left: 53%;
+                transform: translate(-50%, -50%);
+            }
+
+            .tank_F6007 {
+                position: absolute;
+                top: 25%;
+                left: 60%;
+                transform: translate(-50%, -50%);
+            }
+
+            .tank_F6008 {
+                position: absolute;
+                top: 25%;
+                left: 67%;
+                transform: translate(-50%, -50%);
+            }
+
+            .tank_F6009 {
+                position: absolute;
+                top: 25%;
+                left: 74%;
+                transform: translate(-50%, -50%);
+            }
+
+            .tank_F6010 {
+                position: absolute;
+                top: 25%;
+                left: 81%;
+                transform: translate(-50%, -50%);
+            }
+
+            .tank_F6011 {
+                position: absolute;
+                top: 70%;
+                left: 18%;
+                transform: translate(-50%, -50%);
+            }
+
+            .tank_F6012 {
+                position: absolute;
+                top: 70%;
+                left: 25%;
+                transform: translate(-50%, -50%);
+            }
+
+            .tank_F6013 {
+                position: absolute;
+                top: 70%;
+                left: 32%;
+                transform: translate(-50%, -50%);
+            }
+
+            .tank_F6014 {
+                position: absolute;
+                top: 70%;
+                left: 39%;
+                transform: translate(-50%, -50%);
+            }
+
+            .tank_F6015 {
+                position: absolute;
+                top: 70%;
+                left: 46%;
+                transform: translate(-50%, -50%);
+            }
+
+            .tank_F6016 {
+                position: absolute;
+                top: 70%;
+                left: 53%;
+                transform: translate(-50%, -50%);
+            }
+
+            .tank_F6017 {
+                position: absolute;
+                top: 70%;
+                left: 60%;
+                transform: translate(-50%, -50%);
+            }
+
+            .tank_F6018 {
+                position: absolute;
+                top: 70%;
+                left: 67%;
+                transform: translate(-50%, -50%);
+            }
+
+            .tank_F6019 {
+                position: absolute;
+                top: 70%;
+                left: 74%;
+                transform: translate(-50%, -50%);
+            }
+
+            .tank_F6020 {
+                position: absolute;
+                top: 70%;
+                left: 81%;
+                transform: translate(-50%, -50%);
+            }
+
+
+        }
+
+        //其他图标
+        .icon_others {}
+
+        //外部组件
+        .outer_components {
+            .component_pos1 {
+                position: absolute;
+                top: 7%;
+                left: 7.5%;
+            }
+        }
+
+        //箭头指向
+        .arrows {
+            .arrow_pos1 {
+                position: absolute;
+                top: 26%;
+                left: 8%;
+                transform: translate(-50%, -50%);
+            }
+
+            .arrow_pos2 {
+                position: absolute;
+                top: 35.5%;
+                left: 7%;
+                transform: translate(-50%, -50%);
+            }
+
+            .arrow_pos3 {
+                position: absolute;
+                top: 60.5%;
+                left: 7%;
+                transform: translate(-50%, -50%);
+            }
+
+            .arrow_pos4 {
+                position: absolute;
+                top: 26%;
+                left: 94%;
+                transform: translate(-50%, -50%);
+            }
+        }
+
+        //外部管道排布
+        .outer_progress {
+            .progress_pos1 {
+                position: absolute;
+                top: 15.1%;
+                left: 15%;
+                width: 72.6%;
+            }
+
+            .progress_pos2 {
+                position: absolute;
+                top: 60.1%;
+                left: 15%;
+                width: 72.6%;
+            }
+
+            .progress_pos3 {
+                position: absolute;
+                top: 20.6%;
+                left: 15.1%;
+                width: 5.7%;
+            }
+
+            .progress_pos3_2 {
+                position: absolute;
+                top: 43.3%;
+                left: 15.1%;
+                width: 18%;
+            }
+
+            .progress_pos4 {
+                position: absolute;
+                top: 20.6%;
+                left: 87.5%;
+                width: 5.7%;
+            }
+
+            .progress_pos4_2 {
+                position: absolute;
+                top: 43.3%;
+                left: 87.5%;
+                width: 18%;
+            }
+
+
+
+            .progress_pos5 {
+                position: absolute;
+                top: 8.7%;
+                left: 14%;
+                width: 3.7%;
+            }
+
+            .progress_pos5_2 {
+                position: absolute;
+                top: 8.7%;
+                left: 17.4%;
+                width: 7.3%;
+            }
+
+            .progress_pos5_3 {
+                position: absolute;
+                top: 8.7%;
+                left: 24.4%;
+                width: 7.3%;
+            }
+
+            .progress_pos5_4 {
+                position: absolute;
+                top: 8.7%;
+                left: 31.4%;
+                width: 7.3%;
+            }
+
+            .progress_pos5_5 {
+                position: absolute;
+                top: 8.7%;
+                left: 38.4%;
+                width: 7.3%;
+            }
+
+            .progress_pos5_6 {
+                position: absolute;
+                top: 8.7%;
+                left: 45.4%;
+                width: 7.3%;
+            }
+
+            .progress_pos5_7 {
+                position: absolute;
+                top: 8.7%;
+                left: 52.4%;
+                width: 7.3%;
+            }
+
+            .progress_pos5_8 {
+                position: absolute;
+                top: 8.7%;
+                left: 59.4%;
+                width: 7.3%;
+            }
+
+            .progress_pos5_9 {
+                position: absolute;
+                top: 8.7%;
+                left: 66.4%;
+                width: 7.3%;
+            }
+
+            .progress_pos5_10 {
+                position: absolute;
+                top: 8.7%;
+                left: 73.4%;
+                width: 7.3%;
+            }
+
+            .progress_pos5_11 {
+                position: absolute;
+                top: 8.7%;
+                left: 80.4%;
+                width: 6.2%;
+            }
+
+            .progress_pos6 {
+                position: absolute;
+                top: 53.7%;
+                left: 14%;
+                width: 3.7%;
+            }
+
+            .progress_pos6_2 {
+                position: absolute;
+                top: 53.7%;
+                left: 17.4%;
+                width: 7.3%;
+            }
+
+            .progress_pos6_3 {
+                position: absolute;
+                top: 53.7%;
+                left: 24.4%;
+                width: 7.3%;
+            }
+
+            .progress_pos6_4 {
+                position: absolute;
+                top: 53.7%;
+                left: 31.4%;
+                width: 7.3%;
+            }
+
+            .progress_pos6_5 {
+                position: absolute;
+                top: 53.7%;
+                left: 38.4%;
+                width: 7.3%;
+            }
+
+            .progress_pos6_6 {
+                position: absolute;
+                top: 53.7%;
+                left: 45.4%;
+                width: 7.3%;
+            }
+
+            .progress_pos6_7 {
+                position: absolute;
+                top: 53.7%;
+                left: 52.4%;
+                width: 7.3%;
+            }
+
+            .progress_pos6_8 {
+                position: absolute;
+                top: 53.7%;
+                left: 59.4%;
+                width: 7.3%;
+            }
+
+            .progress_pos6_9 {
+                position: absolute;
+                top: 53.7%;
+                left: 66.4%;
+                width: 7.3%;
+            }
+
+            .progress_pos6_10 {
+                position: absolute;
+                top: 53.7%;
+                left: 73.4%;
+                width: 7.3%;
+            }
+
+            .progress_pos6_11 {
+                position: absolute;
+                top: 53.7%;
+                left: 80.4%;
+                width: 6.2%;
+            }
+
+            .progress_pos7 {
+                position: absolute;
+                top: 31.5%;
+                left: 14.1%;
+                width: 23.7%;
+            }
+
+            .progress_pos8 {
+                position: absolute;
+                top: 31.5%;
+                left: 86.5%;
+                width: 23.7%;
+            }
+
+            .progress_pos9 {
+                position: absolute;
+                top: 47%;
+                left: 13%;
+                width: 5.2%;
+            }
+
+            .progress_pos9_2 {
+                position: absolute;
+                top: 47%;
+                left: 17.8%;
+                width: 7.3%;
+            }
+
+            .progress_pos9_3 {
+                position: absolute;
+                top: 47%;
+                left: 24.8%;
+                width: 7.3%;
+            }
+
+            .progress_pos9_4 {
+                position: absolute;
+                top: 47%;
+                left: 31.8%;
+                width: 7.3%;
+            }
+
+            .progress_pos9_5 {
+                position: absolute;
+                top: 47%;
+                left: 38.8%;
+                width: 7.3%;
+            }
+
+            .progress_pos9_6 {
+                position: absolute;
+                top: 47%;
+                left: 45.8%;
+                width: 7.3%;
+            }
+
+            .progress_pos9_7 {
+                position: absolute;
+                top: 47%;
+                left: 52.8%;
+                width: 7.3%;
+            }
+
+            .progress_pos9_8 {
+                position: absolute;
+                top: 47%;
+                left: 59.8%;
+                width: 7.3%;
+            }
+
+            .progress_pos9_9 {
+                position: absolute;
+                top: 47%;
+                left: 66.8%;
+                width: 7.3%;
+            }
+
+            .progress_pos9_10 {
+                position: absolute;
+                top: 47%;
+                left: 73.8%;
+                width: 7.3%;
+            }
+
+            .progress_pos9_11 {
+                position: absolute;
+                top: 47%;
+                left: 80.8%;
+                width: 4.9%;
+            }
+
+
+            .progress_pos10 {
+                position: absolute;
+                top: 92%;
+                left: 13%;
+                width: 5.2%;
+            }
+
+            .progress_pos10_2 {
+                position: absolute;
+                top: 92%;
+                left: 17.8%;
+                width: 7.3%;
+            }
+
+            .progress_pos10_3 {
+                position: absolute;
+                top: 92%;
+                left: 24.8%;
+                width: 7.3%;
+            }
+
+            .progress_pos10_4 {
+                position: absolute;
+                top: 92%;
+                left: 31.8%;
+                width: 7.3%;
+            }
+
+            .progress_pos10_5 {
+                position: absolute;
+                top: 92%;
+                left: 38.8%;
+                width: 7.3%;
+            }
+
+            .progress_pos10_6 {
+                position: absolute;
+                top: 92%;
+                left: 45.8%;
+                width: 7.3%;
+            }
+
+            .progress_pos10_7 {
+                position: absolute;
+                top: 92%;
+                left: 52.8%;
+                width: 7.3%;
+            }
+
+            .progress_pos10_8 {
+                position: absolute;
+                top: 92%;
+                left: 59.8%;
+                width: 7.3%;
+            }
+
+            .progress_pos10_9 {
+                position: absolute;
+                top: 92%;
+                left: 66.8%;
+                width: 7.3%;
+            }
+
+            .progress_pos10_10 {
+                position: absolute;
+                top: 92%;
+                left: 73.8%;
+                width: 7.3%;
+            }
+
+            .progress_pos10_11 {
+                position: absolute;
+                top: 92%;
+                left: 80.8%;
+                width: 4.9%;
+            }
+
+            .progress_pos11 {
+                position: absolute;
+                top: 69.8%;
+                left: 13%;
+                width: 23.7%;
+            }
+
+            .progress_pos12 {
+                position: absolute;
+                top: 69.8%;
+                left: 85.5%;
+                width: 23.7%;
+            }
+
+            .progress_pos13 {
+                position: absolute;
+                top: 25.8%;
+                left: 11%;
+                width: 4.3%;
+            }
+
+            .progress_pos14 {
+                position: absolute;
+                top: 25.8%;
+                left: 87.35%;
+                width: 4.3%;
+            }
+
+            .progress_pos15 {
+                position: absolute;
+                top: 35.3%;
+                left: 9.9%;
+                width: 4.3%;
+            }
+
+
+
+            .progress_pos16 {
+                position: absolute;
+                top: 60.3%;
+                left: 8.9%;
+                width: 4.3%;
+            }
+
+        }
+
+    }
+}
+</style>