feat(hnyzConfiguratePage):硫酸钙流程组态页面

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

@@ -1,31 +1,102 @@
 <template>
     <div class="page">
-        <HeaderComponent title="硫酸钙流程"></HeaderComponent>
+        <HeaderComponent title="硫酸钙流程1"></HeaderComponent>
         <div class="content_page">
             <!-- 罐体 -->
             <div class="tanks">
-                <!-- <VTypeTankValves title="V2001" :waterLevelValue="30" :iconWidth="300" :phValue="9.5" :fanStatus="true" class="tank_v2001"></VTypeTankValves> -->
-                <!-- <VTypeTankValves2 title="V2001" :waterLevelValue="30" :iconWidth="300" :phValue="9.5" :fanStatus="true" class="tank_v2001"></VTypeTankValves2> -->
-
-                <!-- <RTypeTankValves title="V2001" :waterLevelValue="30" :iconSize="200" :iconWidth="200" :tempValue="35" :fanStatus="true" class="tank_v2001"></RTypeTankValves> -->
-                <!-- <STypeTankValves title="V2001" :waterLevelValue="30" :iconSize="200" :iconWidth="200" :iconHeight="150" :tempValue="35" :fanStatus="true" class="tank_v2001"></STypeTankValves> -->
-                <BK200Separator title="S2003A" class="tank_v2001"></BK200Separator>
+                <VTypeTankValves title="V5001" :waterLevelValue="30" class="tank_V5001" />
+                <RTypeTankValves title="R2001" :iconSize="200" :iconWidth="200" :tempValue="35" :fanStatus="true"
+                    class="tank_R2001" />
+                <RTypeTankValves title="R2002" :tempValue="35" :fanStatus="true" class="tank_R2002" />
+                <VTypeTankValves title="V2002" :waterLevelValue="30" :fanStatus="true" :phValue="9"
+                    class="tank_V2002" />
+                <VTypeTankValves title="V2001" :waterLevelValue="30" :fanStatus="true" :phValue="9"
+                    class="tank_V2001" />
+                <BK30Separator title="S2001" class="tank_S2001" />
+                <VTypeTankValves title="V2003" :waterLevelValue="30" class="tank_V2003" />
             </div>
-            <!-- 泵 -->
-            <div class="pumps">
-               
+            <!-- 外部管道排布 -->
+            <div class="outer_progress">
+                <!-- 三通阀相关管道 -->
+                <Pipe :pipeStatus="initPipeStatus" class="progress_steam progress_pos1"></Pipe>
+                <Pipe :pipeStatus="initPipeStatus" class="progress_steam progress_pos2 rotate_90"></Pipe>
+                <Pipe :pipeStatus="initPipeStatus" class="progress_steam progress_pos3 zIndex10"></Pipe>
+
+                <!-- 泵P5001-ACV2003拓展管道 -->
+                <Pipe :pipeStatus="initPipeStatus" class="progress_steam progress_pos4 zIndex10"></Pipe>
+                <Pipe :pipeStatus="initPipeStatus" class="progress_steam progress_pos5 zIndex10 rotate_90"></Pipe>
+
+                <!-- 洗气塔相关管道 -->
+                <Pipe :pipeStatus="initPipeStatus" class="progress_steam progress_pos6_1 rotate_270"></Pipe>
+                <Pipe :pipeStatus="initPipeStatus" class="progress_steam progress_pos6_2 rotate_270"></Pipe>
+
+                <!-- P2001-ACV2004拓展管道 -->
+                <Pipe :pipeStatus="initPipeStatus" class="progress_steam progress_pos7_1"></Pipe>
+                <Pipe :pipeStatus="initPipeStatus" class="progress_steam progress_pos7 rotate_180"></Pipe>
+                <Pipe :pipeStatus="initPipeStatus" class="progress_steam progress_pos8 rotate_90"></Pipe>
+
+                <!-- P2002-ACV2009拓展管道 -->
+                <Pipe :pipeStatus="initPipeStatus" class="progress_steam progress_pos9 zIndex10"></Pipe>
+
+                <!-- 落地罐V2002-ACV2010拓展管道 -->
+                <Pipe :pipeStatus="initPipeStatus" class="progress_steam progress_pos10 rotate_90 zIndex10"></Pipe>
+
+                <!-- P2003-分离器S2001拓展管道 -->
+                <Pipe :pipeStatus="initPipeStatus" class="progress_steam progress_pos11 rotate_270 zIndex10"></Pipe>
+
+                <!-- 泵P2004-ACV2023拓展管道 -->
+                <Pipe :pipeStatus="initPipeStatus" class="progress_steam progress_pos12 zIndex10 rotate_90"></Pipe>
+                <Pipe :pipeStatus="initPipeStatus" class="progress_steam progress_pos13  rotate_180"></Pipe>
+                <Pipe :pipeStatus="initPipeStatus" class="progress_steam progress_pos14_1  rotate_270"></Pipe>
+                <Pipe :pipeStatus="initPipeStatus" class="progress_steam progress_pos14_2  rotate_270"></Pipe>
+                <Pipe :pipeStatus="initPipeStatus" class="progress_steam progress_pos14_3  rotate_270"></Pipe>
+                <Pipe :pipeStatus="initPipeStatus" class="progress_steam progress_pos15 zIndex10"></Pipe>
+
+                <!-- ACV2018,ACV2019-V2003拓展管道 -->
+                <Pipe :pipeStatus="initPipeStatus" class="progress_steam progress_pos16 rotate_180 zIndex10"></Pipe>
+                <Pipe :pipeStatus="initPipeStatus" class="progress_steam progress_pos17 rotate_270"></Pipe>
+                <Pipe :pipeStatus="initPipeStatus" class="progress_steam progress_pos18"></Pipe>
+
+                <!-- ACV2016,ACV2017-通向下一流程的管道 -->
+                <Pipe :pipeStatus="initPipeStatus" class="progress_steam progress_pos19 rotate_90"></Pipe>
+                <Pipe :pipeStatus="initPipeStatus" class="progress_steam progress_pos20"></Pipe>
             </div>
+
             <!-- 其他图标 -->
             <div class="icon_others">
-               
+                <div class="icon_other stock_bin_pos">
+                    <i class="icon iconfont-hnyz-colour icon-hnyz-colourstockBin"></i>
+                    <div class="icon_title">料仓LC2001</div>
+                </div>
+                <div class="icon_other threeWayValve_pos">
+                    <div class="icon_title">三通阀ACV2037</div>
+                    <i class="icon iconfont-hnyz-colour icon-hnyz-colourthreeWayValve"></i>
+                </div>
+                <div class="icon_other scrubberTower_pos">
+                    <div class="icon_title">洗气塔XQ3001</div>
+                    <i class="icon iconfont-hnyz-colour icon-hnyz-colourscrubberTower"></i>
+                </div>
+                <div class="icon_other dosingMachine_pos">
+                    <i class="icon iconfont-hnyz-colour icon-hnyz-colourdosingMachine"></i>
+                    <div class="icon_title">加药机V2016</div>
+                </div>
             </div>
-            <!-- 外部管道排布 -->
-            <div class="outer_progress">
-              
+            <!-- 外部组件 -->
+            <div class="outer_components">
+                <div class="outer_component1">
+                    <TransportProgress title="PD2001" iconSize="60" :pipeStatus="initPipeStatus" progressType="steam"
+                        pipeLength="94" pipeTopOffset="6">
+                    </TransportProgress>
+                </div>
             </div>
+
             <!-- 大箭头指向 -->
             <div class="arrows">
-               
+                <Arrow flexDir="row" arrowDir="down" arrowText="淡水" class="arrow_pos1"></Arrow>
+                <Arrow flexDir="row" arrowText="压缩空气" :iconFirst="false" class="arrow_pos2"></Arrow>
+                <Arrow flexDir="column" arrowText="下一流程" linkUrl="/CaSO4_2" class="arrow_pos3"></Arrow>
+                <Arrow flexDir="column" arrowText="压缩空气" class="arrow_pos4"></Arrow>
+
             </div>
         </div>
     </div>
@@ -33,29 +104,18 @@
 
 <script setup>
 import VTypeTankValves from '@/components/HnyzDcs/VTypeTankValvesComponent.vue';
-import VTypeTankValves2 from '@/components/HnyzDcs/VTypeTankValves2Component.vue';
 import RTypeTankValves from '@/components/HnyzDcs/RTypeTankValvesComponent.vue';
-import STypeTankValves from '@/components/HnyzDcs/STypeTankValvesComponent.vue';
-import BK200Separator from '@/components/HnyzDcs/BK200SeparatorComponent.vue';
-
-
+import BK30Separator from '@/components/HnyzDcs/BK30SeparatorComponent.vue';
+import TransportProgress from '@/components/HnyzDcs/TransportProgressComponent.vue';
+import Pipe from '@/components/HnyzDcs/PipeComponent.vue';
+import Arrow from '@/components/HnyzDcs/ArrowComponent.vue';
 import { useValveHelper } from '@/hooks/useValveHelper'
-import { useRouter } from 'vue-router'
 import { computed, onMounted, onBeforeUnmount } from 'vue';
 
 import { stompClient } from '@/utils/ws/stompClient';
 import { updateZTPageConfig } from '@/api/dcs/configurePage';
-const router = useRouter()
-
-
-//进度条配置
-const progressConfig = {
-    strokeWidth: 8,//进度条宽度
-    percentage: 100,//进度条百分比
-    duration: 10,//进度条流速
-    showText: false,//是否显示文字
-}
 
+const initPipeStatus = true
 </script>
 
 <style lang="scss" scoped>
@@ -71,35 +131,328 @@ const progressConfig = {
         width: 100%;
         height: 1000px;
 
-        
+
         //罐体
         .tanks {
-            .tank_v2001{
+            .tank_V5001 {
                 position: absolute;
-                top: 40%;
-                left: 50%;
+                top: 8%;
+                left: 5%;
                 transform: translate(-50%, -50%);
             }
 
-        }
-        //泵
-        .pumps {
+            .tank_R2001 {
+                position: absolute;
+                top: 39%;
+                left: 26.3%;
+                transform: translate(-50%, -50%);
+            }
+
+            .tank_R2002 {
+                position: absolute;
+                top: 81%;
+                left: 26.3%;
+                transform: translate(-50%, -50%);
+            }
+
+            .tank_S2001 {
+                position: absolute;
+                top: 32%;
+                left: 72%;
+                transform: translate(-50%, -50%);
+            }
+
+            .tank_V2002 {
+                position: absolute;
+                top: 87%;
+                left: 49.2%;
+                transform: translate(-50%, -50%);
+            }
+
+            .tank_V2001 {
+                position: absolute;
+                top: 41%;
+                left: 47.98%;
+                transform: translate(-50%, -50%);
+            }
+
+            .tank_V2003 {
+                position: absolute;
+                top: 87%;
+                left: 67%;
+                transform: translate(-50%, -50%);
+            }
 
         }
 
         //其他图标
         .icon_others {
-            
+            .icon_other {
+                display: flex;
+                align-items: center;
+                z-index: 100;
+
+                .iconfont-hnyz-colour {
+                    font-size: 75px;
+                }
+
+                .icon_title {
+                    font-size: 16px;
+                    color: aliceblue;
+                }
+            }
+
+            //料仓
+            .stock_bin_pos {
+                position: absolute;
+                top: 22%;
+                left: 3%;
+            }
+
+            //三通阀
+            .threeWayValve_pos {
+                position: absolute;
+                top: 30.7%;
+                left: 14%;
+                flex-direction: column;
+            }
+
+            //洗气塔
+            .scrubberTower_pos {
+                position: absolute;
+                top: 4.7%;
+                left: 33.5%;
+
+                .iconfont-hnyz-colour {
+                    font-size: 140px;
+                }
+            }
+
+            //加药机
+            .dosingMachine_pos {
+                position: absolute;
+                top: 60%;
+                left: 48.5%;
+
+                .iconfont-hnyz-colour {
+                    font-size: 100px;
+                }
+            }
+        }
+
+        //外部组件
+        .outer_components {
+            .outer_component1 {
+                width: 60px;
+                height: 60px;
+                position: absolute;
+                top: 35%;
+                left: 5%;
+                transform: translate(-50%, -50%);
+            }
         }
 
         //箭头指向
         .arrows {
+            .arrow_pos1 {
+                position: absolute;
+                top: 65%;
+                left: 70.5%;
+                transform: translate(-50%, -50%);
+            }
+
+            .arrow_pos2 {
+                position: absolute;
+                top: 34.8%;
+                left: 57.5%;
+                transform: translate(-50%, -50%);
+            }
 
+            .arrow_pos3 {
+                position: absolute;
+                top: 34.5%;
+                left: 93.3%;
+                transform: translate(-50%, -50%);
+            }
+
+            .arrow_pos4 {
+                position: absolute;
+                top: 41.6%;
+                left: 83%;
+                transform: translate(-50%, -50%);
+            }
         }
 
         //外部管道排布
         .outer_progress {
-            
+            .progress_pos1 {
+                position: absolute;
+                top: 35.3%;
+                left: 13.3%;
+                width: 58px;
+            }
+
+            .progress_pos2 {
+                position: absolute;
+                top: 57.3%;
+                left: 17.05%;
+                width: 21.6%;
+            }
+
+            .progress_pos3 {
+                position: absolute;
+                top: 77.3%;
+                left: 17%;
+                width: 3%;
+            }
+
+            .progress_pos4 {
+                position: absolute;
+                top: 5.8%;
+                left: 13.2%;
+                width: 14.9%;
+            }
+
+            .progress_pos5 {
+                position: absolute;
+                top: 12.5%;
+                left: 27.9%;
+                width: 7%;
+            }
+
+            .progress_pos6_1 {
+                position: absolute;
+                top: 26.5%;
+                left: 42.9%;
+                width: 10%;
+            }
+
+            .progress_pos6_2 {
+                position: absolute;
+                top: 57%;
+                left: 42.9%;
+                width: 22%;
+            }
+
+            .progress_pos7 {
+                position: absolute;
+                top: 58.4%;
+                left: 27.7%;
+                width: 14.4%;
+            }
+
+            .progress_pos7_1 {
+                position: absolute;
+                top: 40%;
+                left: 36.15%;
+                width: 6%;
+            }
+
+            .progress_pos8 {
+                position: absolute;
+                top: 49.6%;
+                left: 41.95%;
+                width: 10%;
+            }
+
+            .progress_pos9 {
+                position: absolute;
+                top: 81.9%;
+                left: 36.2%;
+                width: 7.3%;
+            }
+
+            .progress_pos10 {
+                position: absolute;
+                top: 67.3%;
+                left: 47.94%;
+                width: 11.5%;
+            }
+
+            .progress_pos11 {
+                position: absolute;
+                top: 57.6%;
+                left: 57.55%;
+                width: 32%;
+            }
+
+            .progress_pos12 {
+                position: absolute;
+                top: 13.9%;
+                left: 50%;
+                width: 11.8%;
+            }
+
+            .progress_pos13 {
+                position: absolute;
+                top: 2.5%;
+                left: 49.85%;
+                width: 37.75%;
+            }
+
+            .progress_pos14_1 {
+                position: absolute;
+                top: 9.8%;
+                left: 87.4%;
+                width: 7.3%;
+            }
+
+            .progress_pos14_2 {
+                position: absolute;
+                top: 18.8%;
+                left: 87.4%;
+                width: 2.5%;
+            }
+
+            .progress_pos14_3 {
+                position: absolute;
+                top: 53.5%;
+                left: 87.4%;
+                width: 33.5%;
+            }
+
+            .progress_pos15 {
+                position: absolute;
+                top: 84.9%;
+                left: 75.2%;
+                width: 12.4%;
+            }
+
+            .progress_pos16 {
+                position: absolute;
+                top: 6.8%;
+                left: 74.2%;
+                width: 12.4%;
+            }
+
+            .progress_pos17 {
+                position: absolute;
+                top: 44.6%;
+                left: 86.4%;
+                width: 39.4%;
+            }
+
+            .progress_pos18 {
+                position: absolute;
+                top: 82%;
+                left: 69.5%;
+                width: 17.1%;
+            }
+
+            .progress_pos19 {
+                position: absolute;
+                top: 29.3%;
+                left: 83.35%;
+                width: 3.8%;
+            }
+
+            .progress_pos20 {
+                position: absolute;
+                top: 32.3%;
+                left: 83.2%;
+                width: 7.4%;
+            }
+
         }
 
     }

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

@@ -0,0 +1,415 @@
+<template>
+    <div class="page">
+        <HeaderComponent title="硫酸钙流程2"></HeaderComponent>
+        <div class="content_page">
+            <!-- 罐体 -->
+            <div class="tanks">
+                <VTypeTankValves2 title="V7002" :waterLevelValue="30" :iconWidth="200" class="tank_V7002" />
+                <VTypeTankValves2 title="V7004" :waterLevelValue="30" :iconWidth="300" class="tank_V7004" />
+                <STypeTankValves title="S2002" :iconHeight="150" :fanStatus="true" class="tank_S2002" />
+                <VTypeTankValves title="V2004" :waterLevelValue="30" :phValue="9" class="tank_V2004 zIndex15" />
+                <VTypeTankValves title="V2007" :waterLevelValue="30" :phValue="9" :fanStatus="true"
+                    class="tank_V2007" />
+                <VTypeTankValves title="V2009" class="tank_V2009" />
+                <STypeTankValves title="S2004" :iconHeight="150" :fanStatus="true" class="tank_S2004" />
+                <VTypeTankValves2 title="V7003" :waterLevelValue="30" topPumpDir="R" class="tank_V7003" />
+            </div>
+            <!-- 外部管道排布 -->
+            <div class="outer_progress">
+                <!-- 上一流程-P2005 -->
+                <Pipe :pipeStatus="initPipeStatus" class="progress_steam progress_pos1"></Pipe>
+
+                <!-- P2007-ACV2026-HH2001管道混合器 -->
+                <Pipe :pipeStatus="initPipeStatus" class="progress_steam progress_pos2_1"></Pipe>
+                <Pipe :pipeStatus="initPipeStatus" class="progress_steam progress_pos2"></Pipe>
+
+                <!-- HH2001管道混合器-ACV2032,ACV2033相关拓展管道 -->
+                <Pipe :pipeStatus="initPipeStatus" class="progress_steam progress_pos3"></Pipe>
+                <Pipe :pipeStatus="initPipeStatus" class="progress_steam progress_pos4 rotate_270"></Pipe>
+
+                <!-- ACV2034-V2004落地罐拓展管道 -->
+                <Pipe :pipeStatus="initPipeStatus" class="progress_steam progress_pos5 rotate_90"></Pipe>
+
+                <!-- 母液-ACV2054相关拓展管道 -->
+                <Pipe :pipeStatus="initPipeStatus" class="progress_steam progress_pos6 rotate_270"></Pipe>
+
+                <!-- P2008-ACV2021相关拓展管道 -->
+                <Pipe :pipeStatus="initPipeStatus" class="progress_steam progress_pos7 zIndex10"></Pipe>
+
+                <!-- ACV2040-P2010相关拓展管道 -->
+                <Pipe :pipeStatus="initPipeStatus" class="progress_steam progress_pos8 rotate_270"></Pipe>
+                <Pipe :pipeStatus="initPipeStatus" class="progress_steam progress_pos9 rotate_180"></Pipe>
+
+                <!-- P2006- HH2001管道混合器 -->
+                <Pipe :pipeStatus="initPipeStatus" class="progress_steam progress_pos10"></Pipe>
+
+                <!-- ACV2036-V2004罐体拓展管道 -->
+                <Pipe :pipeStatus="initPipeStatus" class="progress_steam progress_pos11 rotate_90 zIndex10"></Pipe>
+
+                <!-- P2009-ACV2039相关拓展管道 -->
+                <Pipe :pipeStatus="initPipeStatus" class="progress_steam progress_pos12 rotate_270 zIndex15"></Pipe>
+                <Pipe :pipeStatus="initPipeStatus" class="progress_steam progress_pos13 zIndex10"></Pipe>
+
+
+            </div>
+
+            <!-- 其他图标 -->
+            <div class="icon_others">
+                <div class="icon_other pipelineMixer_pos">
+                    <div class="icon_title">管道混合器HH2001</div>
+                    <i class="icon iconfont-hnyz-colour icon-hnyz-colourpipelineMixer"></i>
+                </div>
+            </div>
+            <!-- 外部组件 -->
+            <div class="outer_components">
+                <div class="outer_component component_pos1 rotate_90">
+                    <ValveProgress :iconSize="valveIconSize" title="ACV2026" :rotateAngle="90" :pipeLength="873"
+                        :pipeLeftOffset="-355" :valveStatusArr="initValveStatusArr" progressType="steam"
+                        :pipeStatus="initPipeStatus" />
+                </div>
+                <div class="outer_component component_pos2 zIndex10">
+                    <ValveProgress :iconSize="valveIconSize" title="ACV2043" :pipeLength="419" :pipeLeftOffset="-242"
+                        :valveStatusArr="initValveStatusArr" progressType="steam" :pipeStatus="initPipeStatus" />
+                </div>
+            </div>
+
+            <!-- 大箭头指向 -->
+            <div class="arrows">
+                <Arrow flexDir="column" arrowDir="left" arrowText="上一流程" class="arrow_pos1" linkUrl="/CaSO4_1"></Arrow>
+                <Arrow flexDir="column" arrowDir="down" arrowText="下一流程" class="arrow_pos2" linkUrl="/CaSO4_3"></Arrow>
+                <Arrow flexDir="column" arrowDir="up" arrowText="母液" class="arrow_pos3"></Arrow>
+                <Arrow arrowDir="down" arrowText="淡水" class="arrow_pos4"></Arrow>
+                <Arrow arrowDir="down" arrowText="碳酸钠固体吨袋" class="arrow_pos5"></Arrow>
+                <Arrow flexDir="column" :iconFirst="false" fontSize="20" arrowText="主项1-MVR" class="arrow_pos6"></Arrow>
+
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import VTypeTankValves from '@/components/HnyzDcs/VTypeTankValvesComponent.vue';
+import VTypeTankValves2 from '@/components/HnyzDcs/VTypeTankValves2Component.vue';
+import STypeTankValves from '@/components/HnyzDcs/STypeTankValvesComponent.vue';
+import ValveProgress from '@/components/DCS/ValveProgressComponent.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]
+</script>
+
+<style lang="scss" scoped>
+.page {
+    width: 1920px;
+    height: 1080px;
+    background-color: #0b172c;
+
+    .content_page {
+        position: relative;
+        width: 100%;
+        height: 1000px;
+
+        //罐体
+        .tanks {
+            .tank_V7002 {
+                position: absolute;
+                top: 15%;
+                left: 6%;
+                transform: translate(-50%, -50%);
+            }
+
+            .tank_V7004 {
+                position: absolute;
+                top: 60%;
+                left: 17%;
+                transform: translate(-50%, -50%);
+            }
+
+            .tank_S2002 {
+                position: absolute;
+                top: 50%;
+                left: 49%;
+                transform: translate(-50%, -50%);
+            }
+
+            .tank_V2004 {
+                position: absolute;
+                top: 65%;
+                left: 60%;
+                transform: translate(-50%, -50%);
+            }
+
+            .tank_V2007 {
+                position: absolute;
+                top: 29.6%;
+                left: 62%;
+                transform: translate(-50%, -50%);
+            }
+
+            .tank_V2009 {
+                position: absolute;
+                top: 26.6%;
+                left: 37%;
+                transform: translate(-50%, -50%);
+            }
+
+            .tank_S2004 {
+                position: absolute;
+                top: 62%;
+                left: 77.6%;
+                transform: translate(-50%, -50%);
+            }
+
+            .tank_V7003 {
+                position: absolute;
+                top: 40.7%;
+                left: 72%;
+                transform: translate(-50%, -50%);
+            }
+
+        }
+
+        //其他图标
+        .icon_others {
+            .icon_other {
+                display: flex;
+                align-items: center;
+                z-index: 100;
+
+                .iconfont-hnyz-colour {
+                    font-size: 75px;
+                }
+
+                .icon_title {
+                    font-size: 16px;
+                    color: aliceblue;
+                }
+            }
+
+            //管道混合器
+            .pipelineMixer_pos {
+                flex-direction: column;
+                position: absolute;
+                top: 48%;
+                left: 32%;
+
+                .iconfont-hnyz-colour {
+                    font-size: 140px;
+                }
+            }
+
+            //料仓
+            .stock_bin_pos {
+                position: absolute;
+                top: 27%;
+                left: 3%;
+            }
+
+            //三通阀
+            .threeWayValve_pos {
+                position: absolute;
+                top: 35.7%;
+                left: 14%;
+                flex-direction: column;
+            }
+
+            //洗气塔
+            .scrubberTower_pos {
+                position: absolute;
+                top: 9.7%;
+                left: 31.5%;
+
+                .iconfont-hnyz-colour {
+                    font-size: 140px;
+                }
+            }
+
+            //加药机
+            .dosingMachine_pos {
+                position: absolute;
+                top: 65%;
+                left: 46.5%;
+
+                .iconfont-hnyz-colour {
+                    font-size: 100px;
+                }
+            }
+        }
+
+        //外部组件
+        .outer_components {
+            .outer_component {
+                width: 50px;
+                height: 50px;
+            }
+
+            .component_pos1 {
+                position: absolute;
+                top: 33%;
+                left: 23.5%;
+            }
+
+            .component_pos2 {
+                position: absolute;
+                top: 35.6%;
+                left: 87.5%;
+            }
+        }
+
+        //箭头指向
+        .arrows {
+            .arrow_pos1 {
+                position: absolute;
+                top: 49%;
+                left: 4.3%;
+                transform: translate(-50%, -50%);
+            }
+
+            .arrow_pos2 {
+                position: absolute;
+                top: 87%;
+                left: 48.88%;
+                transform: translate(-50%, -50%);
+            }
+
+            .arrow_pos3 {
+                position: absolute;
+                top: 78.5%;
+                left: 52.8%;
+                transform: translate(-50%, -50%);
+            }
+
+            .arrow_pos4 {
+                position: absolute;
+                top: 5.5%;
+                left: 65.5%;
+                transform: translate(-50%, -50%);
+            }
+
+            .arrow_pos5 {
+                position: absolute;
+                top: 11.5%;
+                left: 42.5%;
+                transform: translate(-50%, -50%);
+            }
+
+            .arrow_pos6 {
+                position: absolute;
+                top: 37.5%;
+                left: 94.5%;
+                transform: translate(-50%, -50%);
+            }
+        }
+
+        //外部管道排布
+        .outer_progress {
+            .progress_pos1 {
+                position: absolute;
+                top: 46.7%;
+                left: 6.3%;
+                width: 3.2%;
+            }
+
+            .progress_pos2_1 {
+                position: absolute;
+                top: 12.7%;
+                left: 15.2%;
+                width: 8%;
+            }
+
+            .progress_pos2 {
+                position: absolute;
+                top: 55.7%;
+                left: 22.85%;
+                width: 9.7%;
+            }
+
+            .progress_pos3 {
+                position: absolute;
+                top: 56.9%;
+                left: 38%;
+                width: 5.2%;
+            }
+
+
+            .progress_pos4 {
+                position: absolute;
+                top: 52.7%;
+                left: 41.7%;
+                width: 5%;
+            }
+
+            .progress_pos5 {
+                position: absolute;
+                top: 53%;
+                left: 58%;
+                width: 5.2%;
+            }
+
+            .progress_pos6 {
+                position: absolute;
+                top: 66.6%;
+                left: 52.8%;
+                width: 7%;
+            }
+
+            .progress_pos7 {
+                position: absolute;
+                top: 24.5%;
+                left: 45.2%;
+                width: 11.1%;
+            }
+
+            .progress_pos8 {
+                position: absolute;
+                top: 44.1%;
+                left: 86.7%;
+                width: 17.2%;
+            }
+
+            .progress_pos9 {
+                position: absolute;
+                top: 27.5%;
+                left: 79.6%;
+                width: 7.3%;
+            }
+
+            .progress_pos10 {
+                position: absolute;
+                top: 57.9%;
+                left: 28%;
+                width: 5.5%;
+            }
+
+            .progress_pos11 {
+                position: absolute;
+                top: 51.6%;
+                left: 61.94%;
+                width: 7%;
+            }
+
+            .progress_pos12 {
+                position: absolute;
+                top: 63.3%;
+                left: 68.36%;
+                width: 3.3%;
+            }
+
+            .progress_pos13 {
+                position: absolute;
+                top: 59.86%;
+                left: 68.15%;
+                width: 3.1%;
+            }
+
+        }
+
+    }
+}
+</style>

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

@@ -0,0 +1,336 @@
+<template>
+    <div class="page">
+        <HeaderComponent title="硫酸钙流程3"></HeaderComponent>
+        <div class="content_page">
+            <!-- 罐体 -->
+            <div class="tanks">
+                <BK200Separator title="S2003A" class="tank_S2003A" :showExpandPipe="true" />
+                <BK200Separator title="S2003B" class="tank_S2003B" :showExpandPipe="true" />
+                <BK200Separator title="S2003C" class="tank_S2003C" :showExpandPipe="true" />
+            </div>
+            <!-- 外部管道排布 -->
+            <div class="outer_progress">
+                <!-- 上一流程-P2012 -->
+                <Pipe :pipeStatus="initPipeStatus" class="progress_steam progress_pos1 rotate_90"></Pipe>
+                <Pipe :pipeStatus="initPipeStatus" class="progress_steam progress_pos2"></Pipe>
+                <!-- ACV2049,ACV2050-ACV2043 -->
+                <Pipe :pipeStatus="initPipeStatus" class="progress_steam progress_pos4_1"></Pipe>
+                <Pipe :pipeStatus="initPipeStatus" class="progress_steam progress_pos4_2"></Pipe>
+                <!-- P2012-ACV2045 -->
+                <Pipe :pipeStatus="initPipeStatus" class="progress_steam progress_pos5_3"></Pipe>
+                <Pipe :pipeStatus="initPipeStatus" class="progress_steam progress_pos5_1"></Pipe>
+                <Pipe :pipeStatus="initPipeStatus" class="progress_steam progress_pos5_2"></Pipe>
+                <!-- 淡水-ACV2047,ACV2048 -->
+                <Pipe :pipeStatus="initPipeStatus" class="progress_steam progress_pos6_1"></Pipe>
+                <Pipe :pipeStatus="initPipeStatus" class="progress_steam progress_pos6_2"></Pipe>
+                <Pipe :pipeStatus="initPipeStatus" class="progress_steam progress_pos6_3"></Pipe>
+                <!-- 压缩空气-ACV2046 -->
+                <Pipe :pipeStatus="initPipeStatus" class="progress_steam progress_pos7_1 rotate_180"></Pipe>
+                <Pipe :pipeStatus="initPipeStatus" class="progress_steam progress_pos7_2 rotate_180"></Pipe>
+                <Pipe :pipeStatus="initPipeStatus" class="progress_steam progress_pos8 rotate_270"></Pipe>
+                <!-- ACV2051-压缩空气 -->
+                <Pipe :pipeStatus="initPipeStatus" class="progress_steam progress_pos9_1"></Pipe>
+                <Pipe :pipeStatus="initPipeStatus" class="progress_steam progress_pos9_2"></Pipe>
+                <Pipe :pipeStatus="initPipeStatus" class="progress_steam progress_pos9_3"></Pipe>
+                <!-- PD2003-下一流程 -->
+                <Pipe :pipeStatus="initPipeStatus" class="progress_steam progress_pos10_1"></Pipe>
+                <Pipe :pipeStatus="initPipeStatus" class="progress_steam progress_pos10_2"></Pipe>
+                <Pipe :pipeStatus="initPipeStatus" class="progress_steam progress_pos11 rotate_90"></Pipe>
+            </div>
+
+            <!-- 其他图标 -->
+            <div class="icon_others">
+            </div>
+            <!-- 外部组件 -->
+            <div class="outer_components">
+                <!-- 左上泵 -->
+                <PumpProgress title="P2012" :pumpDataArr="[1, 10]" :iconSize="80" :showPipe="true"
+                    class="component_pos1" />
+
+                <!-- 右上阀门+泵 -->
+                <ValveProgress title="ACV2043" :pipeLeftOffset="-53" :valveStatusArr="initValveStatusArr"
+                    progressType="steam" :pipeStatus="initPipeStatus" class="component_pos2" />
+                <PumpProgress title="P2013" :pumpDataArr="[1, 10]" :iconSize="80" :showPipe="true"
+                    class="component_pos3" />
+
+            </div>
+
+            <!-- 大箭头指向 -->
+            <div class="arrows">
+                <Arrow flexDir="row" arrowDir="up" arrowText="上一流程" linkUrl="/CaSO4_2" class="arrow_pos1"></Arrow>
+                <Arrow flexDir="row" arrowDir="up" arrowText="母液" class="arrow_pos2"></Arrow>
+                <Arrow flexDir="column" arrowText="淡水" class="arrow_pos3"></Arrow>
+                <Arrow flexDir="column" arrowDir="up" arrowText="压缩空气" class="arrow_pos4"></Arrow>
+                <Arrow flexDir="column" arrowText="压缩空气" class="arrow_pos5"></Arrow>
+                <Arrow arrowDir="down" arrowText="下一流程" linkUrl="/CaSO4_4" class="arrow_pos6"></Arrow>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import BK200Separator from '@/components/HnyzDcs/BK200SeparatorComponent.vue';
+import PumpProgress from '@/components/DCS/PumpComponent.vue';
+import ValveProgress from '@/components/DCS/ValveProgressComponent.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]
+</script>
+
+<style lang="scss" scoped>
+.page {
+    width: 1920px;
+    height: 1080px;
+    background-color: #0b172c;
+
+    .content_page {
+        position: relative;
+        width: 100%;
+        height: 1000px;
+
+        //罐体
+        .tanks {
+            .tank_S2003A {
+                position: absolute;
+                top: 45%;
+                left: 24%;
+                transform: translate(-50%, -50%);
+            }
+
+
+            .tank_S2003B {
+                position: absolute;
+                top: 45%;
+                left: 50%;
+                transform: translate(-50%, -50%);
+            }
+
+
+            .tank_S2003C {
+                position: absolute;
+                top: 45%;
+                left: 76%;
+                transform: translate(-50%, -50%);
+            }
+        }
+
+        //外部组件
+        .outer_components {
+            .component_pos1 {
+                position: absolute;
+                top: 14.9%;
+                left: 6.2%;
+            }
+
+            .component_pos2 {
+                position: absolute;
+                top: 14.8%;
+                left: 88.5%;
+            }
+
+            .component_pos3 {
+                position: absolute;
+                top: 14%;
+                left: 91.9%;
+            }
+        }
+
+        //箭头指向
+        .arrows {
+            .arrow_pos1 {
+                position: absolute;
+                top: 3.5%;
+                left: 6.4%;
+                transform: translate(-50%, -50%);
+            }
+
+            .arrow_pos2 {
+                position: absolute;
+                top: 5%;
+                left: 94.3%;
+                transform: translate(-50%, -50%);
+            }
+
+            .arrow_pos3 {
+                position: absolute;
+                top: 28.4%;
+                left: 4.8%;
+                transform: translate(-50%, -50%);
+            }
+
+            .arrow_pos4 {
+                position: absolute;
+                top: 81.5%;
+                left: 10.8%;
+                transform: translate(-50%, -50%);
+            }
+
+            .arrow_pos5 {
+                position: absolute;
+                top: 74%;
+                left: 92.5%;
+                transform: translate(-50%, -50%);
+            }
+
+            .arrow_pos6 {
+                position: absolute;
+                top: 91.9%;
+                left: 86.6%;
+                transform: translate(-50%, -50%);
+            }
+        }
+
+        //外部管道排布
+        .outer_progress {
+            .progress_pos1 {
+                position: absolute;
+                top: 14.2%;
+                left: 3.3%;
+                width: 5.5%;
+            }
+
+            .progress_pos2 {
+                position: absolute;
+                top: 18.7%;
+                left: 3.08%;
+                width: 4.7%;
+            }
+
+            // .progress_pos3 {
+            //     position: absolute;
+            //     top: 12.3%;
+            //     left: 97.45%;
+            //     width: 4%;
+            // }
+
+            .progress_pos4_1 {
+                position: absolute;
+                top: 17.7%;
+                left: 35.15%;
+                width: 26.4%;
+            }
+
+            .progress_pos4_2 {
+                position: absolute;
+                top: 17.7%;
+                left: 61.15%;
+                width: 26.4%;
+            }
+
+            .progress_pos5_1 {
+                position: absolute;
+                top: 11.4%;
+                left: 13.8%;
+                width: 26.4%;
+            }
+
+            .progress_pos5_3 {
+                position: absolute;
+                top: 11.4%;
+                left: 7.7%;
+                width: 6.5%;
+            }
+
+            .progress_pos5_2 {
+                position: absolute;
+                top: 11.4%;
+                left: 39.8%;
+                width: 26.4%;
+            }
+
+            .progress_pos6_1 {
+                position: absolute;
+                top: 26.1%;
+                left: 52.25%;
+                width: 26.4%;
+            }
+
+            .progress_pos6_2 {
+                position: absolute;
+                top: 26.1%;
+                left: 26.25%;
+                width: 26.4%;
+            }
+
+            .progress_pos6_3 {
+                position: absolute;
+                top: 26.1%;
+                left: 7.25%;
+                width: 19.4%;
+            }
+
+            .progress_pos7_1 {
+                position: absolute;
+                top: 65.45%;
+                left: 10.7%;
+                width: 26.3%;
+            }
+
+            .progress_pos7_2 {
+                position: absolute;
+                top: 65.45%;
+                left: 36.7%;
+                width: 26.3%;
+            }
+
+            .progress_pos8 {
+                position: absolute;
+                top: 69.45%;
+                left: 10.9%;
+                width: 4.3%;
+            }
+
+            .progress_pos9_1 {
+                position: absolute;
+                top: 71.8%;
+                left: 33.1%;
+                width: 26.3%;
+            }
+
+            .progress_pos9_2 {
+                position: absolute;
+                top: 71.8%;
+                left: 59.1%;
+                width: 26.3%;
+            }
+
+            .progress_pos9_3 {
+                position: absolute;
+                top: 71.8%;
+                left: 85.1%;
+                width: 5%;
+            }
+
+            .progress_pos10_1 {
+                position: absolute;
+                top: 79%;
+                left: 31.3%;
+                width: 26.3%;
+            }
+
+            .progress_pos10_2 {
+                position: absolute;
+                top: 79%;
+                left: 57.3%;
+                width: 26.3%;
+            }
+
+            .progress_pos11 {
+                position: absolute;
+                top: 83.1%;
+                left: 83.5%;
+                width: 4.3%;
+            }
+
+        }
+
+    }
+}
+</style>

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

@@ -0,0 +1,704 @@
+<template>
+    <div class="page">
+        <HeaderComponent title="硫酸钙流程4"></HeaderComponent>
+        <div class="content_page">
+            <!-- 罐体 -->
+            <div class="tanks">
+                <VTypeTankValves title="V2014" :fanStatus="true" :iconSize="150" class="tank_V2014" />
+                <ETypeTankValves1 title="E2001A" :fanStatus="true" :iconSize="150" :tempValue="60"
+                    class="tank_E2001A" />
+                <ETypeTankValves1 title="E2001B" :fanStatus="true" :iconSize="150" :tempValue="60"
+                    class="tank_E2001B" />
+                <ETypeTankValves2 title="E2003" :iconSize="150" class="tank_E2003" />
+                <VTypeTankValves title="V2006" :fanStatus="true" :waterLevelValue="30" :iconSize="150"
+                    class="tank_V2006" />
+                <D40Separator title="S2006" :iconSize="150" class="tank_S2006" />
+                <VTypeTankValves title="V2008" :waterLevelValue="30" :iconSize="150" class="tank_V2008" />
+                <VTypeTankValves title="V2010" :waterLevelValue="30" :fanStatus="true" :iconSize="150"
+                    class="tank_V2010" />
+                <D40Separator title="S2007" :iconSize="150" class="tank_S2007" />
+                <VTypeTankValves title="V2011" :iconSize="150" class="tank_V2011" />
+                <VTypeTankValves title="V2012" :waterLevelValue="30" :iconSize="150" class="tank_V2012" />
+                <VTypeTankValves title="V2013" :waterLevelValue="30" :iconSize="150" class="tank_V2013" />
+                <VTypeTankValves title="S2008" :iconSize="150" class="tank_S2008" />
+                <VTypeTankValves title="V2015" :waterLevelValue="30" :iconSize="150" class="tank_V2015" />
+                <VTypeTankValves title="V2017" :waterLevelValue="30" :iconSize="150" class="tank_V2017" />
+
+                <!-- <FTypeTank title="F6001" :iconSize="150" :tempValue="60" :waterLevelValue="30" class="tank_F2001" /> -->
+                <!-- <FTypeTankValves title="F6001" :iconSize="150" :tempValue="60" :waterLevelValue="30" class="tank_F2001" /> -->
+
+            </div>
+            <!-- 外部管道排布 -->
+            <div class="outer_progress">
+                <!-- 上一流程-V2014 -->
+                <Pipe :pipeStatus="initPipeStatus" :strokeWidth="pipeWidth"
+                    class="progress_steam progress_pos1 rotate_90" />
+
+                <!-- P2014-ACV2056 相关拓展管道 -->
+                <Pipe :pipeStatus="initPipeStatus" :strokeWidth="pipeWidth"
+                    class="progress_steam progress_pos2_1 rotate_270" />
+                <Pipe :pipeStatus="initPipeStatus" :strokeWidth="pipeWidth"
+                    class="progress_steam progress_pos2_2 rotate_270 zIndex10" />
+
+                <!-- ACV2066-ACV2057,ACV2068 相关拓展管道 -->
+                <Pipe :pipeStatus="initPipeStatus" :strokeWidth="pipeWidth"
+                    class="progress_steam progress_pos3_1 rotate_90" />
+                <Pipe :pipeStatus="initPipeStatus" :strokeWidth="pipeWidth"
+                    class="progress_steam progress_pos3_2 rotate_90 zIndex10" />
+                <Pipe :pipeStatus="initPipeStatus" :strokeWidth="pipeWidth" class="progress_steam progress_pos11" />
+                <Pipe :pipeStatus="initPipeStatus" :strokeWidth="pipeWidth"
+                    class="progress_steam progress_pos12 rotate_90 zIndex10" />
+
+                <!-- P2016-ACV2059，V2014罐相关·拓展管道 -->
+                <Pipe :pipeStatus="initPipeStatus" :strokeWidth="pipeWidth"
+                    class="progress_steam progress_pos4_1 rotate_270 zIndex10" />
+                <Pipe :pipeStatus="initPipeStatus" :strokeWidth="pipeWidth"
+                    class="progress_steam progress_pos4_2 rotate_270 " />
+                <Pipe :pipeStatus="initPipeStatus" :strokeWidth="pipeWidth"
+                    class="progress_steam progress_pos9 rotate_180 zIndex10" />
+                <Pipe :pipeStatus="initPipeStatus" :strokeWidth="pipeWidth"
+                    class="progress_steam progress_pos10 rotate_270 " />
+
+                <!-- ACV2058-P2015相关拓展管道 -->
+                <Pipe :pipeStatus="initPipeStatus" :strokeWidth="pipeWidth"
+                    class="progress_steam progress_pos5 rotate_270" />
+                <Pipe :pipeStatus="initPipeStatus" :strokeWidth="pipeWidth" class="progress_steam progress_pos6" />
+
+                <!-- ACV2060-V2006罐相关拓展管道 -->
+                <Pipe :pipeStatus="initPipeStatus" :strokeWidth="pipeWidth"
+                    class="progress_steam progress_pos7_1 rotate_90" />
+                <Pipe :pipeStatus="initPipeStatus" :strokeWidth="pipeWidth"
+                    class="progress_steam progress_pos7_2 rotate_90" />
+                <Pipe :pipeStatus="initPipeStatus" :strokeWidth="pipeWidth" class="progress_steam progress_pos8" />
+
+                <!-- S2007罐-ACV2071,ACV2072相关拓展管道 -->
+                <Pipe :pipeStatus="initPipeStatus" :strokeWidth="pipeWidth"
+                    class="progress_steam progress_pos13_1 rotate_90" />
+                <Pipe :pipeStatus="initPipeStatus" :strokeWidth="pipeWidth"
+                    class="progress_steam progress_pos13_2 rotate_90 zIndex10" />
+                <Pipe :pipeStatus="initPipeStatus" :strokeWidth="pipeWidth"
+                    class="progress_steam progress_pos15 zIndex10" />
+
+                <!-- P2017-ACV2080相关拓展管道 -->
+                <Pipe :pipeStatus="initPipeStatus" :strokeWidth="pipeWidth"
+                    class="progress_steam progress_pos14 rotate_270 zIndex10" />
+
+                <!-- ACV2063-V2010罐相关拓展管道 -->
+                <Pipe :pipeStatus="initPipeStatus" :strokeWidth="pipeWidth"
+                    class="progress_steam progress_pos16 rotate_90" />
+
+                <!-- P2019-ACV2073,ACV2076相关拓展管道 -->
+                <Pipe :pipeStatus="initPipeStatus" :strokeWidth="pipeWidth"
+                    class="progress_steam progress_pos17 rotate_270" />
+                <Pipe :pipeStatus="initPipeStatus" :strokeWidth="pipeWidth"
+                    class="progress_steam progress_pos18 rotate_180" />
+                <Pipe :pipeStatus="initPipeStatus" :strokeWidth="pipeWidth" class="progress_steam progress_pos19" />
+
+                <!-- P2018-ACV2075相关拓展管道 -->
+                <Pipe :pipeStatus="initPipeStatus" :strokeWidth="pipeWidth"
+                    class="progress_steam progress_pos20 rotate_270" />
+
+                <!-- S2007分离器-ACV2078,ACV2079相关拓展管道 -->
+                <Pipe :pipeStatus="initPipeStatus" :strokeWidth="pipeWidth"
+                    class="progress_steam progress_pos21 rotate_90" />
+                <Pipe :pipeStatus="initPipeStatus" :strokeWidth="pipeWidth" class="progress_steam progress_pos22" />
+
+                <!-- P2020-ACV2083-S2008罐相关拓展管道 -->
+                <Pipe :pipeStatus="initPipeStatus" :strokeWidth="pipeWidth" class="progress_steam progress_pos23" />
+                <Pipe :pipeStatus="initPipeStatus" :strokeWidth="pipeWidth"
+                    class="progress_steam progress_pos24 rotate_90" />
+
+                <!-- S2008罐-V2015罐 -->
+                <Pipe :pipeStatus="initPipeStatus" :strokeWidth="pipeWidth"
+                    class="progress_steam progress_pos25 rotate_180" />
+                <Pipe :pipeStatus="initPipeStatus" :strokeWidth="pipeWidth"
+                    class="progress_steam progress_pos26 rotate_90" />
+
+                <!-- P2021-ACV2085等相关拓展管道 -->
+                <Pipe :pipeStatus="initPipeStatus" :strokeWidth="pipeWidth" class="progress_steam progress_pos27" />
+                <Pipe :pipeStatus="initPipeStatus" :strokeWidth="pipeWidth" class="progress_steam progress_pos28" />
+                <Pipe :pipeStatus="initPipeStatus" :strokeWidth="pipeWidth" class="progress_steam progress_pos29" />
+                <Pipe :pipeStatus="initPipeStatus" :strokeWidth="pipeWidth"
+                    class="progress_steam progress_pos30 rotate_270 zIndex10" />
+
+                <!-- S2007-PD2006-LH2001-BZ2001  -->
+                <Pipe :pipeStatus="initPipeStatus" :strokeWidth="pipeWidth" class="progress_steam progress_pos31" />
+
+                <!-- S2008罐-V2017罐 -->
+                <Pipe :pipeStatus="initPipeStatus" :strokeWidth="pipeWidth" class="progress_steam progress_pos32" />
+
+                <!-- P2023-ACV2087相关拓展管道 -->
+                <Pipe :pipeStatus="initPipeStatus" :strokeWidth="pipeWidth"
+                    class="progress_steam progress_pos33 rotate_270 zIndex10" />
+                <Pipe :pipeStatus="initPipeStatus" :strokeWidth="pipeWidth"
+                    class="progress_steam progress_pos34 rotate_180" />
+            </div>
+
+            <!-- 其他图标 -->
+            <div class="icon_others">
+                <PageIcon title="蒸汽发生器B2001" iconClass="coloursteamGenerator" class="icon_other_pos1 zIndex15" />
+                <PageIcon :iconSize="75" title="流化床干燥机LH2001" iconClass="colourdryingMachine" class="icon_other_pos2" />
+                <PageIcon :iconSize="75" title="包装机BZ2001" iconClass="colourpackingMachine" class="icon_other_pos3" />
+            </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>
+                <!-- P2020-ACV2083-S2008罐 -->
+                <div class="component_pos2">
+                    <ValveProgress :iconSize="37.5" title="ACV2083" :pipeLength="250" :pipeLeftOffset="-70"
+                        :valveStatusArr="initValveStatusArr" progressType="steam" :pipeStatus="initPipeStatus"
+                        :pipeReverse="true" />
+                </div>
+                <!-- P2021-ACV2085  -->
+                <div class="component_pos3">
+                    <ValveProgress :iconSize="37.5" title="ACV2085" :pipeLength="290" :pipeLeftOffset="-90"
+                        :valveStatusArr="initValveStatusArr" progressType="steam" :pipeStatus="initPipeStatus" />
+                </div>
+
+                <div class="component_pos4">
+                    <Conveyor :iconSize="50" title="PD2006" />
+                </div>
+            </div>
+
+            <!-- 大箭头指向 -->
+            <div class="arrows">
+                <Arrow flexDir="column" arrowDir="up" :iconFirst="false" arrowText="上一流程" :fontSize="18"
+                    linkUrl="/CaSO4_3" class="arrow_pos1"></Arrow>
+                <Arrow flexDir="row" arrowText="去溶硫酸钠" :fontSize="18" class="arrow_pos2"></Arrow>
+                <Arrow flexDir="row" arrowText="去G1溶晶" :fontSize="18" class="arrow_pos3"></Arrow>
+                <Arrow flexDir="row" arrowText="引至V7400" :fontSize="18" class="arrow_pos4"></Arrow>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import VTypeTankValves from '@/components/HnyzDcs/VTypeTankValvesComponent.vue';
+import ETypeTankValves1 from '@/components/HnyzDcs/ETypeTankValves1Component.vue';
+import ETypeTankValves2 from '@/components/HnyzDcs/ETypeTankValves2Component.vue';
+import D40Separator from '@/components/HnyzDcs/D40SeparatorComponent.vue';
+import Conveyor from '@/components/HnyzDcs/ConveyorComponent.vue';
+import PageIcon from '@/components/HnyzDcs/PageIconComponent.vue';
+import ValveProgress from '@/components/DCS/ValveProgressComponent.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_V2014 {
+                position: absolute;
+                top: 42%;
+                left: 4%;
+                transform: translate(-50%, -50%);
+            }
+
+            .tank_E2001A {
+                position: absolute;
+                top: 17.3%;
+                left: 17%;
+                transform: translate(-50%, -50%);
+            }
+
+            .tank_E2001B {
+                position: absolute;
+                top: 37%;
+                left: 17%;
+                transform: translate(-50%, -50%);
+            }
+
+            .tank_E2003 {
+                position: absolute;
+                top: 56.7%;
+                left: 35%;
+                transform: translate(-50%, -50%);
+            }
+
+            .tank_V2006 {
+                position: absolute;
+                top: 71%;
+                left: 28.65%;
+                transform: translate(-50%, -50%);
+            }
+
+            .tank_S2006 {
+                position: absolute;
+                top: 18.6%;
+                left: 42.5%;
+                transform: translate(-50%, -50%);
+            }
+
+            .tank_V2008 {
+                position: absolute;
+                top: 71.5%;
+                left: 42%;
+                transform: translate(-50%, -50%);
+            }
+
+            .tank_V2010 {
+                position: absolute;
+                top: 39.7%;
+                left: 50%;
+                transform: translate(-50%, -50%);
+            }
+
+            .tank_S2007 {
+                position: absolute;
+                top: 18.1%;
+                left: 63.6%;
+                transform: translate(-50%, -50%);
+            }
+
+            .tank_V2011 {
+                position: absolute;
+                top: 42.5%;
+                left: 63%;
+                transform: translate(-50%, -50%);
+            }
+
+            .tank_V2012 {
+                position: absolute;
+                top: 59.3%;
+                left: 61.75%;
+                transform: translate(-50%, -50%);
+            }
+
+            .tank_V2013 {
+                position: absolute;
+                top: 42.5%;
+                left: 71%;
+                transform: translate(-50%, -50%);
+            }
+
+            .tank_S2008 {
+                position: absolute;
+                top: 71.44%;
+                left: 76.7%;
+                transform: translate(-50%, -50%);
+            }
+
+            .tank_V2015 {
+                position: absolute;
+                top: 86.3%;
+                left: 59.5%;
+                transform: translate(-50%, -50%);
+            }
+
+            .tank_V2017 {
+                position: absolute;
+                top: 71%;
+                left: 87.5%;
+                transform: translate(-50%, -50%);
+            }
+
+            .tank_F2001 {
+                position: absolute;
+                top: 37.5%;
+                left: 85%;
+                transform: translate(-50%, -50%);
+            }
+        }
+
+        //其他图标
+        .icon_others {
+
+            //蒸汽发生器
+            .icon_other_pos1 {
+                position: absolute;
+                top: 6%;
+                left: 3%;
+            }
+
+            //流化床干燥机
+            .icon_other_pos2 {
+                position: absolute;
+                top: 14%;
+                left: 77%;
+            }
+
+            //包装机
+            .icon_other_pos3 {
+                position: absolute;
+                top: 14%;
+                left: 85%;
+            }
+
+
+        }
+
+        //外部组件
+        .outer_components {
+            .component_pos1 {
+                position: absolute;
+                top: 7%;
+                left: 7.5%;
+            }
+
+            .component_pos2 {
+                position: absolute;
+                top: 65.6%;
+                left: 79.5%;
+            }
+
+            .component_pos3 {
+                position: absolute;
+                top: 82.5%;
+                left: 77.5%;
+            }
+
+            .component_pos4 {
+                position: absolute;
+                top: 16%;
+                left: 69%;
+            }
+        }
+
+        //箭头指向
+        .arrows {
+            .arrow_pos1 {
+                position: absolute;
+                top: 7%;
+                left: 2.5%;
+                transform: translate(-50%, -50%);
+            }
+
+            .arrow_pos2 {
+                position: absolute;
+                top: 90%;
+                left: 88%;
+                transform: translate(-50%, -50%);
+
+            }
+
+            .arrow_pos3 {
+                position: absolute;
+                top: 95%;
+                left: 90.5%;
+                transform: translate(-50%, -50%);
+            }
+
+            .arrow_pos4 {
+                position: absolute;
+                top: 85%;
+                left: 85%;
+                transform: translate(-50%, -50%);
+            }
+        }
+
+        //外部管道排布
+        .outer_progress {
+            .progress_pos1 {
+                position: absolute;
+                top: 23.7%;
+                left: 2.5%;
+                width: 13.2%;
+            }
+
+            .progress_pos2_1 {
+                position: absolute;
+                top: 22.5%;
+                left: 10.25%;
+                width: 10.4%;
+            }
+
+            .progress_pos2_2 {
+                position: absolute;
+                top: 37.5%;
+                left: 10.25%;
+                width: 5.75%;
+            }
+
+            .progress_pos3_1 {
+                position: absolute;
+                top: 13.9%;
+                left: 11.4%;
+                width: 4.9%;
+            }
+
+            .progress_pos3_2 {
+                position: absolute;
+                top: 28.2%;
+                left: 11.4%;
+                width: 10.5%;
+            }
+
+
+            .progress_pos4_1 {
+                position: absolute;
+                top: 41.8%;
+                left: 28.2%;
+                width: 10%;
+            }
+
+            .progress_pos4_2 {
+                position: absolute;
+                top: 22.4%;
+                left: 28.2%;
+                width: 10.4%;
+            }
+
+            .progress_pos5 {
+                position: absolute;
+                top: 34%;
+                left: 25.5%;
+                width: 10.4%;
+            }
+
+            .progress_pos6 {
+                position: absolute;
+                top: 23.69%;
+                left: 25.5%;
+                width: 4%;
+            }
+
+            .progress_pos7_1 {
+                position: absolute;
+                top: 28.3%;
+                left: 24%;
+                width: 10.4%;
+            }
+
+            .progress_pos7_2 {
+                position: absolute;
+                top: 56%;
+                left: 24%;
+                width: 18.4%;
+            }
+
+            .progress_pos8 {
+                position: absolute;
+                top: 73.1%;
+                left: 23.9%;
+                width: 3%;
+            }
+
+            .progress_pos9 {
+                position: absolute;
+                top: 51%;
+                left: 3.9%;
+                width: 24.5%;
+            }
+
+            .progress_pos10 {
+                position: absolute;
+                top: 48.9%;
+                left: 4%;
+                width: 2.5%;
+            }
+
+            .progress_pos11 {
+                position: absolute;
+                top: 9.2%;
+                left: 11.2%;
+                width: 23.8%;
+            }
+
+            .progress_pos12 {
+                position: absolute;
+                top: 27.2%;
+                left: 34.9%;
+                width: 18.8%;
+            }
+
+            .progress_pos13_1 {
+                position: absolute;
+                top: 30.4%;
+                left: 43.5%;
+                width: 6.1%;
+            }
+
+            .progress_pos13_2 {
+                position: absolute;
+                top: 48%;
+                left: 43.5%;
+                width: 12.5%;
+            }
+
+            .progress_pos14 {
+                position: absolute;
+                top: 64.5%;
+                left: 48.3%;
+                width: 8.3%;
+            }
+
+            .progress_pos15 {
+                position: absolute;
+                top: 35.9%;
+                left: 43.35%;
+                width: 2.4%;
+            }
+
+            .progress_pos16 {
+                position: absolute;
+                top: 27%;
+                left: 49.9%;
+                width: 8.4%;
+            }
+
+            .progress_pos17 {
+                position: absolute;
+                top: 42.2%;
+                left: 68%;
+                width: 17%;
+            }
+
+            .progress_pos18 {
+                position: absolute;
+                top: 25.9%;
+                left: 51.4%;
+                width: 16.7%;
+            }
+
+            .progress_pos19 {
+                position: absolute;
+                top: 57.6%;
+                left: 67.9%;
+                width: 10.4%;
+            }
+
+            .progress_pos20 {
+                position: absolute;
+                top: 29.2%;
+                left: 56.3%;
+                width: 12%;
+            }
+
+            .progress_pos21 {
+                position: absolute;
+                top: 26%;
+                left: 64.5%;
+                width: 3.4%;
+            }
+
+            .progress_pos22 {
+                position: absolute;
+                top: 28.7%;
+                left: 64.5%;
+                width: 8.15%;
+            }
+
+            .progress_pos23 {
+                position: absolute;
+                top: 40.9%;
+                left: 77.2%;
+                width: 5.8%;
+            }
+
+            .progress_pos24 {
+                position: absolute;
+                top: 54.65%;
+                left: 82.9%;
+                width: 14.3%;
+            }
+
+            .progress_pos25 {
+                position: absolute;
+                top: 72%;
+                left: 60.2%;
+                width: 15.4%;
+            }
+
+            .progress_pos26 {
+                position: absolute;
+                top: 76%;
+                left: 60.3%;
+                width: 4.2%;
+            }
+
+            .progress_pos27 {
+                position: absolute;
+                top: 84.7%;
+                left: 65.6%;
+                width: 10.4%;
+            }
+
+            .progress_pos28 {
+                position: absolute;
+                top: 94.9%;
+                left: 75.8%;
+                width: 13%;
+            }
+
+            .progress_pos29 {
+                position: absolute;
+                top: 90%;
+                left: 75.8%;
+                width: 9%;
+            }
+
+            .progress_pos30 {
+                position: absolute;
+                top: 90.1%;
+                left: 75.9%;
+                width: 5.6%;
+            }
+
+            .progress_pos31 {
+                position: absolute;
+                top: 18.3%;
+                left: 66.5%;
+                width: 20%;
+            }
+
+            .progress_pos32 {
+                position: absolute;
+                top: 74.5%;
+                left: 78.5%;
+                width: 7.4%;
+            }
+
+            .progress_pos33 {
+                position: absolute;
+                top: 38.6%;
+                left: 93.8%;
+                width: 34.6%;
+            }
+
+            .progress_pos34 {
+                position: absolute;
+                top: 5.4%;
+                left: 63.1%;
+                width: 30.8%;
+            }
+
+
+        }
+
+    }
+}
+</style>