Merge branch 'master' of http://222.243.138.146:2000/hmy/hnyz_dcs

ui/src/plugins/download.js

@@ -61,7 +61,7 @@ export default {
       }
       downloadLoadingInstance.close();
     }).catch((r) => {
-      console.error(r)
+      // console.error(r)
       ElMessage.error('下载文件出现错误，请联系管理员！')
       downloadLoadingInstance.close();
     })

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

@@ -1,165 +1,171 @@
 <template>
-    <div class="page">
-        <HeaderComponent title="硫酸钙流程1"></HeaderComponent>
-        <div class="content_page">
-            <PageDrawer type="HNZT" class="page_drawer" />
-            <!-- 备注：由于在设备表中没有存储相关设备,取不到code,故暂时使用设备名称代替code。 -->
-            <!-- 阀门 -->
-            <div class="valves">
-                <component v-for="item in deviceConfigGroup.VALVES" :key="item.id" :is="getComponentName(item.modelId)"
-                    :title="getEquipmentTitle(item.equipmentName)"
-                    :valveStatusArr="getDataArrByCode(item.equipmentName)" :rotateAngle="item.rotate || 0"
-                    :iconSize="item.size" :style="getComponentStyle(item)" />
-            </div>
-
-            <!-- 泵 -->
-            <div class="pumps">
-                <component v-for="item in deviceConfigGroup.PUMPS" :key="item.id" :is="getComponentName(item.modelId)"
-                    :title="getEquipmentTitle(item.title)"
-                    :pumpDataArr="pumpHelper.getDataArrByCode(item.equipmentName)" :isReverse="item.isReverse"
-                    :iconSize="item.size" :style="getComponentStyle(item)" />
-            </div>
-
-            <!-- 罐体 -->
-            <div class="tanks">
-                <component v-for="item in deviceConfigGroup.TANKS" :key="item.id" :is="getComponentName(item.modelId)"
-                    :title="getEquipmentTitle(item.equipmentName)" :iconSize="item.size" :iconWidth="item.width"
-                    :iconHeight="item.height" :style="getComponentStyle(item)" />
-            </div>
+    <div class="preview">
+        <div ref="pageRef" class="page">
+            <HeaderComponent title="硫酸钙流程1"></HeaderComponent>
+            <div class="content_page">
+                <PageDrawer type="HNZT" class="page_drawer" />
+                <!-- 备注：由于在设备表中没有存储相关设备,取不到code,故暂时使用设备名称代替code。 -->
+                <!-- 阀门 -->
+                <div class="valves">
+                    <component v-for="item in deviceConfigGroup.VALVES" :key="item.id"
+                        :is="getComponentName(item.modelId)" :title="getEquipmentTitle(item.equipmentName)"
+                        :valveStatusArr="getDataArrByCode(item.equipmentName)" :rotateAngle="item.rotate || 0"
+                        :iconSize="item.size" :style="getComponentStyle(item)" />
+                </div>
 
-            <!-- 传感器 -->
-            <div class="sensors">
-                <component v-for="item in deviceConfigGroup.SENSORS" :key="item.id" :is="getComponentName(item.modelId)"
-                    :sensorValue="sensorHelper.getDataArrByCode(item.equipmentName)" :sensorWidth="item.width"
-                    :sensorHeight="item.height" :sensorSize="item.size" :sensorRotate="item.rotate"
-                    :title="getEquipmentTitle(item.equipmentName)" :style="getComponentStyle(item)" />
-            </div>
+                <!-- 泵 -->
+                <div class="pumps">
+                    <component v-for="item in deviceConfigGroup.PUMPS" :key="item.id"
+                        :is="getComponentName(item.modelId)" :title="getEquipmentTitle(item.title)"
+                        :pumpDataArr="pumpHelper.getDataArrByCode(item.equipmentName)" :isReverse="item.isReverse"
+                        :iconSize="item.size" :style="getComponentStyle(item)" />
+                </div>
 
-            <!-- 单纯ICON设备 -->
-            <div class="icon_others">
-                <component v-for="item in deviceConfigGroup.ICONS" :key="item.id" :is="getComponentName(item.modelId)"
-                    :iconSize="item.size" :iconClass="getIconClass(item.modelId)" :style="getComponentStyle(item)"
-                    :title="getEquipmentTitle(item.equipmentName)"
-                    :specialCondition="JSON.parse(item.specialCondition)" />
-            </div>
+                <!-- 罐体 -->
+                <div class="tanks">
+                    <component v-for="item in deviceConfigGroup.TANKS" :key="item.id"
+                        :is="getComponentName(item.modelId)" :title="getEquipmentTitle(item.equipmentName)"
+                        :iconSize="item.size" :iconWidth="item.width" :iconHeight="item.height"
+                        :style="getComponentStyle(item)" />
+                </div>
 
-            <!-- 其他组件 -->
-            <div class="other_components">
-                <component v-for="item in deviceConfigGroup.OTHERS" :key="item.id" :is="getComponentName(item.modelId)"
-                    :iconSize="item.size" :style="getComponentStyle(item)"
-                    :title="getEquipmentTitle(item.equipmentName)" />
-            </div>
+                <!-- 传感器 -->
+                <div class="sensors">
+                    <component v-for="item in deviceConfigGroup.SENSORS" :key="item.id"
+                        :is="getComponentName(item.modelId)"
+                        :sensorValue="sensorHelper.getDataArrByCode(item.equipmentName)" :sensorWidth="item.width"
+                        :sensorHeight="item.height" :sensorSize="item.size" :sensorRotate="item.rotate"
+                        :title="getEquipmentTitle(item.equipmentName)" :style="getComponentStyle(item)" />
+                </div>
 
-            <!-- 管道  -->
-            <div class="pipelines">
-                <component v-for="item in pipeConfig" :key="item.id" :is="getComponentName(item.modelId)"
-                    :pipeStatus="evaluateCondition(item.flowCondition)" :strokeWidth="item.pipeWidth"
-                    :style="getPipelineStyle(item, evaluateCondition(item.reverseCondition))"
-                    :class="getPipelineClass(item.pipeClass, getPipeType(item.dynamicPipelineCondition))" />
-            </div>
+                <!-- 单纯ICON设备 -->
+                <div class="icon_others">
+                    <component v-for="item in deviceConfigGroup.ICONS" :key="item.id"
+                        :is="getComponentName(item.modelId)" :iconSize="item.size"
+                        :iconClass="getIconClass(item.modelId)" :style="getComponentStyle(item)"
+                        :title="getEquipmentTitle(item.equipmentName)"
+                        :specialCondition="JSON.parse(item.specialCondition)" />
+                </div>
 
+                <!-- 其他组件 -->
+                <div class="other_components">
+                    <component v-for="item in deviceConfigGroup.OTHERS" :key="item.id"
+                        :is="getComponentName(item.modelId)" :iconSize="item.size" :style="getComponentStyle(item)"
+                        :title="getEquipmentTitle(item.equipmentName)" />
+                </div>
 
-            <!-- 大箭头指向 -->
-            <div class="arrows">
-                <component v-for="item in deviceConfigGroup.ARROWS" :key="item.id" :is="getComponentName(item.modelId)"
-                    :arrowText="getEquipmentTitle(item.equipmentName)" :iconSize="item.size"
-                    :specialCondition="JSON.parse(item.specialCondition)" :style="getComponentStyle(item)" />
-            </div>
-            <!-- 罐体 -->
-            <div class="tanks">
-                <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="outer_progress">
-                <!-- 料仓LC2001-PD2001相关管道 -->
-                <Pipe :pipeStatus="initPipeStatus" class="progress_steam progress_pos21 rotate_90"></Pipe>
-                <!-- 三通阀相关管道 -->
-                <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 class="pipelines">
+                    <component v-for="item in pipeConfig" :key="item.id" :is="getComponentName(item.modelId)"
+                        :pipeStatus="evaluateCondition(item.flowCondition)" :strokeWidth="item.pipeWidth"
+                        :style="getPipelineStyle(item, evaluateCondition(item.reverseCondition))"
+                        :class="getPipelineClass(item.pipeClass, getPipeType(item.dynamicPipelineCondition))" />
+                </div>
 
-            </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 class="arrows">
+                    <component v-for="item in deviceConfigGroup.ARROWS" :key="item.id"
+                        :is="getComponentName(item.modelId)" :arrowText="getEquipmentTitle(item.equipmentName)"
+                        :iconSize="item.size" :specialCondition="JSON.parse(item.specialCondition)"
+                        :style="getComponentStyle(item)" />
                 </div>
-                <div class="icon_other threeWayValve_pos">
-                    <div class="icon_title">三通阀ACV2037</div>
-                    <i class="icon iconfont-hnyz-colour icon-hnyz-colourthreeWayValve"></i>
+                <!-- 罐体 -->
+                <div class="tanks">
+                    <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="icon_other scrubberTower_pos">
-                    <div class="icon_title">洗气塔XQ3001</div>
-                    <i class="icon iconfont-hnyz-colour icon-hnyz-colourscrubberTower"></i>
+                <!-- 外部管道排布 -->
+                <div class="outer_progress">
+                    <!-- 料仓LC2001-PD2001相关管道 -->
+                    <Pipe :pipeStatus="initPipeStatus" class="progress_steam progress_pos21 rotate_90"></Pipe>
+                    <!-- 三通阀相关管道 -->
+                    <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_other dosingMachine_pos">
-                    <i class="icon iconfont-hnyz-colour icon-hnyz-colourdosingMachine"></i>
-                    <div class="icon_title">加药机V2016</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>
-            <!-- 外部组件 -->
-            <div class="outer_components">
-                <div class="outer_component1">
-                    <!-- 传送带  -->
-                    <Conveyor title="PD2001" iconSize="60" />
+                <!-- 外部组件 -->
+                <div class="outer_components">
+                    <div class="outer_component1">
+                        <!-- 传送带  -->
+                        <Conveyor title="PD2001" iconSize="60" />
+                    </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 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>
@@ -179,6 +185,9 @@ import { stompClient } from '@/utils/ws/stompClient';
 import { onMounted, onBeforeUnmount, reactive, computed } from 'vue';
 import { updateZTPageConfig } from '@/api/dcs/configurePage';
 
+import { usePageScale } from '@/utils/dcs/usePageScale'
+const { pageRef } = usePageScale()
+
 const pageCode = 'CaSO4_1';//页面标识
 const flowId = 10;//当前页面流程Id
 
@@ -430,6 +439,7 @@ const initPipeStatus = true
 
 <style lang="scss" scoped>
 @import '@/assets/styles/dcs/hnyzConfiguratePage.scss';
+
 .page {
     // width: 100%;
     // height: 100%;

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

@@ -1,151 +1,161 @@
 <template>
-    <div class="page">
-        <HeaderComponent title="硫酸钙流程2"></HeaderComponent>
-        <div class="content_page">
-
-            <PageDrawer type="HNZT" class="page_drawer" />
-            <!-- 备注：由于在设备表中没有存储相关设备,取不到code,故暂时使用设备名称代替code。 -->
-            <!-- 阀门 -->
-            <div class="valves">
-                <component v-for="item in deviceConfigGroup.VALVES" :key="item.id" :is="getComponentName(item.modelId)"
-                    :title="getEquipmentTitle(item.equipmentName)"
-                    :valveStatusArr="getDataArrByCode(item.equipmentName)" :rotateAngle="item.rotate || 0"
-                    :iconSize="item.size" :style="getComponentStyle(item)" />
-            </div>
-
-            <!-- 泵 -->
-            <div class="pumps">
-                <component v-for="item in deviceConfigGroup.PUMPS" :key="item.id" :is="getComponentName(item.modelId)"
-                    :title="getEquipmentTitle(item.title)"
-                    :pumpDataArr="pumpHelper.getDataArrByCode(item.equipmentName)" :isReverse="item.isReverse"
-                    :iconSize="item.size" :style="getComponentStyle(item)" />
-            </div>
+    <div class="preview">
+        <div ref="pageRef" class="page">
+            <HeaderComponent title="硫酸钙流程2"></HeaderComponent>
+            <div class="content_page">
+
+                <PageDrawer type="HNZT" class="page_drawer" />
+                <!-- 备注：由于在设备表中没有存储相关设备,取不到code,故暂时使用设备名称代替code。 -->
+                <!-- 阀门 -->
+                <div class="valves">
+                    <component v-for="item in deviceConfigGroup.VALVES" :key="item.id"
+                        :is="getComponentName(item.modelId)" :title="getEquipmentTitle(item.equipmentName)"
+                        :valveStatusArr="getDataArrByCode(item.equipmentName)" :rotateAngle="item.rotate || 0"
+                        :iconSize="item.size" :style="getComponentStyle(item)" />
+                </div>
 
-            <!-- 罐体 -->
-            <div class="tanks">
-                <component v-for="item in deviceConfigGroup.TANKS" :key="item.id" :is="getComponentName(item.modelId)"
-                    :title="getEquipmentTitle(item.equipmentName)" :iconSize="item.size" :iconWidth="item.width"
-                    :iconHeight="item.height" :style="getComponentStyle(item)" />
-            </div>
+                <!-- 泵 -->
+                <div class="pumps">
+                    <component v-for="item in deviceConfigGroup.PUMPS" :key="item.id"
+                        :is="getComponentName(item.modelId)" :title="getEquipmentTitle(item.title)"
+                        :pumpDataArr="pumpHelper.getDataArrByCode(item.equipmentName)" :isReverse="item.isReverse"
+                        :iconSize="item.size" :style="getComponentStyle(item)" />
+                </div>
 
-            <!-- 传感器 -->
-            <div class="sensors">
-                <component v-for="item in deviceConfigGroup.SENSORS" :key="item.id" :is="getComponentName(item.modelId)"
-                    :sensorValue="sensorHelper.getDataArrByCode(item.equipmentName)" :sensorWidth="item.width"
-                    :sensorHeight="item.height" :sensorSize="item.size" :sensorRotate="item.rotate"
-                    :title="getEquipmentTitle(item.equipmentName)" :style="getComponentStyle(item)" />
-            </div>
+                <!-- 罐体 -->
+                <div class="tanks">
+                    <component v-for="item in deviceConfigGroup.TANKS" :key="item.id"
+                        :is="getComponentName(item.modelId)" :title="getEquipmentTitle(item.equipmentName)"
+                        :iconSize="item.size" :iconWidth="item.width" :iconHeight="item.height"
+                        :style="getComponentStyle(item)" />
+                </div>
 
-            <!-- 单纯ICON设备 -->
-            <div class="icon_others">
-                <component v-for="item in deviceConfigGroup.ICONS" :key="item.id" :is="getComponentName(item.modelId)"
-                    :iconSize="item.size" :iconClass="getIconClass(item.modelId)" :style="getComponentStyle(item)"
-                    :title="getEquipmentTitle(item.equipmentName)"
-                    :specialCondition="JSON.parse(item.specialCondition)" />
-            </div>
+                <!-- 传感器 -->
+                <div class="sensors">
+                    <component v-for="item in deviceConfigGroup.SENSORS" :key="item.id"
+                        :is="getComponentName(item.modelId)"
+                        :sensorValue="sensorHelper.getDataArrByCode(item.equipmentName)" :sensorWidth="item.width"
+                        :sensorHeight="item.height" :sensorSize="item.size" :sensorRotate="item.rotate"
+                        :title="getEquipmentTitle(item.equipmentName)" :style="getComponentStyle(item)" />
+                </div>
 
-            <!-- 其他组件 -->
-            <div class="other_components">
-                <component v-for="item in deviceConfigGroup.OTHERS" :key="item.id" :is="getComponentName(item.modelId)"
-                    :iconSize="item.size" :style="getComponentStyle(item)"
-                    :title="getEquipmentTitle(item.equipmentName)" />
-            </div>
+                <!-- 单纯ICON设备 -->
+                <div class="icon_others">
+                    <component v-for="item in deviceConfigGroup.ICONS" :key="item.id"
+                        :is="getComponentName(item.modelId)" :iconSize="item.size"
+                        :iconClass="getIconClass(item.modelId)" :style="getComponentStyle(item)"
+                        :title="getEquipmentTitle(item.equipmentName)"
+                        :specialCondition="JSON.parse(item.specialCondition)" />
+                </div>
 
-            <!-- 管道  -->
-            <div class="pipelines">
-                <component v-for="item in pipeConfig" :key="item.id" :is="getComponentName(item.modelId)"
-                    :pipeStatus="evaluateCondition(item.flowCondition)" :strokeWidth="item.pipeWidth"
-                    :style="getPipelineStyle(item, evaluateCondition(item.reverseCondition))"
-                    :class="getPipelineClass(item.pipeClass, getPipeType(item.dynamicPipelineCondition))" />
-            </div>
+                <!-- 其他组件 -->
+                <div class="other_components">
+                    <component v-for="item in deviceConfigGroup.OTHERS" :key="item.id"
+                        :is="getComponentName(item.modelId)" :iconSize="item.size" :style="getComponentStyle(item)"
+                        :title="getEquipmentTitle(item.equipmentName)" />
+                </div>
 
-            <!-- 大箭头指向 -->
-            <div class="arrows">
-                <component v-for="item in deviceConfigGroup.ARROWS" :key="item.id" :is="getComponentName(item.modelId)"
-                    :arrowText="getEquipmentTitle(item.equipmentName)" :iconSize="item.size"
-                    :specialCondition="JSON.parse(item.specialCondition)" :style="getComponentStyle(item)" />
-            </div>
+                <!-- 管道  -->
+                <div class="pipelines">
+                    <component v-for="item in pipeConfig" :key="item.id" :is="getComponentName(item.modelId)"
+                        :pipeStatus="evaluateCondition(item.flowCondition)" :strokeWidth="item.pipeWidth"
+                        :style="getPipelineStyle(item, evaluateCondition(item.reverseCondition))"
+                        :class="getPipelineClass(item.pipeClass, getPipeType(item.dynamicPipelineCondition))" />
+                </div>
 
-            <!-- 罐体 -->
-            <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>
+                <!-- 大箭头指向 -->
+                <div class="arrows">
+                    <component v-for="item in deviceConfigGroup.ARROWS" :key="item.id"
+                        :is="getComponentName(item.modelId)" :arrowText="getEquipmentTitle(item.equipmentName)"
+                        :iconSize="item.size" :specialCondition="JSON.parse(item.specialCondition)"
+                        :style="getComponentStyle(item)" />
+                </div>
 
-                <!-- P2007-ACV2026-HH2001管道混合器 -->
-                <Pipe :pipeStatus="initPipeStatus" class="progress_steam progress_pos2_1"></Pipe>
-                <Pipe :pipeStatus="initPipeStatus" class="progress_steam progress_pos2"></Pipe>
+                <!-- 罐体 -->
+                <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>
 
-                <!-- HH2001管道混合器-ACV2032,ACV2033相关拓展管道 -->
-                <Pipe :pipeStatus="initPipeStatus" class="progress_steam progress_pos3"></Pipe>
-                <Pipe :pipeStatus="initPipeStatus" class="progress_steam progress_pos4 rotate_270"></Pipe>
+                    <!-- P2007-ACV2026-HH2001管道混合器 -->
+                    <Pipe :pipeStatus="initPipeStatus" class="progress_steam progress_pos2_1"></Pipe>
+                    <Pipe :pipeStatus="initPipeStatus" class="progress_steam progress_pos2"></Pipe>
 
-                <!-- ACV2034-V2004落地罐拓展管道 -->
-                <Pipe :pipeStatus="initPipeStatus" class="progress_steam progress_pos5 rotate_90"></Pipe>
+                    <!-- HH2001管道混合器-ACV2032,ACV2033相关拓展管道 -->
+                    <Pipe :pipeStatus="initPipeStatus" class="progress_steam progress_pos3"></Pipe>
+                    <Pipe :pipeStatus="initPipeStatus" class="progress_steam progress_pos4 rotate_270"></Pipe>
 
-                <!-- 母液-ACV2054相关拓展管道 -->
-                <Pipe :pipeStatus="initPipeStatus" class="progress_steam progress_pos6 rotate_270"></Pipe>
+                    <!-- ACV2034-V2004落地罐拓展管道 -->
+                    <Pipe :pipeStatus="initPipeStatus" class="progress_steam progress_pos5 rotate_90"></Pipe>
 
-                <!-- P2008-ACV2021相关拓展管道 -->
-                <Pipe :pipeStatus="initPipeStatus" class="progress_steam progress_pos7 zIndex10"></Pipe>
+                    <!-- 母液-ACV2054相关拓展管道 -->
+                    <Pipe :pipeStatus="initPipeStatus" class="progress_steam progress_pos6 rotate_270"></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>
+                    <!-- P2008-ACV2021相关拓展管道 -->
+                    <Pipe :pipeStatus="initPipeStatus" class="progress_steam progress_pos7 zIndex10"></Pipe>
 
-                <!-- P2006- HH2001管道混合器 -->
-                <Pipe :pipeStatus="initPipeStatus" class="progress_steam progress_pos10"></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>
 
-                <!-- ACV2036-V2004罐体拓展管道 -->
-                <Pipe :pipeStatus="initPipeStatus" class="progress_steam progress_pos11 rotate_90 zIndex10"></Pipe>
+                    <!-- P2006- HH2001管道混合器 -->
+                    <Pipe :pipeStatus="initPipeStatus" class="progress_steam progress_pos10"></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>
+                    <!-- 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 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_component component_pos2 zIndex10">
-                    <ValveProgress :iconSize="valveIconSize" title="ACV2043" :pipeLength="419" :pipeLeftOffset="-242"
-                        :valveStatusArr="initValveStatusArr" progressType="steam" :pipeStatus="initPipeStatus" />
+                <!-- 外部组件 -->
+                <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>
 
-            <!-- 大箭头指向 -->
-            <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 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>
     </div>
@@ -165,6 +175,9 @@ import { stompClient } from '@/utils/ws/stompClient';
 import { onMounted, onBeforeUnmount, reactive, computed } from 'vue';
 import { updateZTPageConfig } from '@/api/dcs/configurePage';
 
+import { usePageScale } from '@/utils/dcs/usePageScale'
+const { pageRef } = usePageScale()
+
 const pageCode = 'CaSO4_2';//页面标识
 const flowId = 11;//当前页面流程Id
 
@@ -417,6 +430,7 @@ const initValveStatusArr = [true]
 
 <style lang="scss" scoped>
 @import '@/assets/styles/dcs/hnyzConfiguratePage.scss';
+
 .page {
     width: 1920px;
     height: 1080px;
@@ -427,10 +441,11 @@ const initValveStatusArr = [true]
         width: 100%;
         height: 1000px;
 
-        .page_drawer{
+        .page_drawer {
             position: absolute;
             right: 5%;
         }
+
         //罐体
         .tanks {
             .tank_V7002 {

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

@@ -1,68 +1,70 @@
 <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 class="preview">
+        <div ref="pageRef" 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>
     </div>
@@ -80,12 +82,16 @@ import { computed, onMounted, onBeforeUnmount } from 'vue';
 import { stompClient } from '@/utils/ws/stompClient';
 import { updateZTPageConfig } from '@/api/dcs/configurePage';
 
+import { usePageScale } from '@/utils/dcs/usePageScale'
+const { pageRef } = usePageScale()
+
 const initPipeStatus = true
 const initValveStatusArr = [true]
 </script>
 
 <style lang="scss" scoped>
 @import '@/assets/styles/dcs/hnyzConfiguratePage.scss';
+
 .page {
     width: 1920px;
     height: 1080px;

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

@@ -1,239 +1,247 @@
 <template>
-    <div class="page">
-        <HeaderComponent title="硫酸钙流程4"></HeaderComponent>
-        <div class="content_page">
-            <PageDrawer type="HNZT" class="page_drawer" />
-            <!-- 备注：由于在设备表中没有存储相关设备,取不到code,故暂时使用设备名称代替code。 -->
-            <!-- 阀门 -->
-            <div class="valves">
-                <component v-for="item in deviceConfigGroup.VALVES" :key="item.id" :is="getComponentName(item.modelId)"
-                    :title="getEquipmentTitle(item.equipmentName)"
-                    :valveStatusArr="getDataArrByCode(item.equipmentName)" :rotateAngle="item.rotate || 0"
-                    :iconSize="item.size" :style="getComponentStyle(item)" />
-            </div>
-
-            <!-- 泵 -->
-            <div class="pumps">
-                <component v-for="item in deviceConfigGroup.PUMPS" :key="item.id" :is="getComponentName(item.modelId)"
-                    :title="getEquipmentTitle(item.title)"
-                    :pumpDataArr="pumpHelper.getDataArrByCode(item.equipmentName)" :isReverse="item.isReverse"
-                    :iconSize="item.size" :style="getComponentStyle(item)" />
-            </div>
+    <div class="preview">
+        <div ref="pageRef" class="page">
+            <HeaderComponent title="硫酸钙流程4"></HeaderComponent>
+            <div class="content_page">
+                <PageDrawer type="HNZT" class="page_drawer" />
+                <!-- 备注：由于在设备表中没有存储相关设备,取不到code,故暂时使用设备名称代替code。 -->
+                <!-- 阀门 -->
+                <div class="valves">
+                    <component v-for="item in deviceConfigGroup.VALVES" :key="item.id"
+                        :is="getComponentName(item.modelId)" :title="getEquipmentTitle(item.equipmentName)"
+                        :valveStatusArr="getDataArrByCode(item.equipmentName)" :rotateAngle="item.rotate || 0"
+                        :iconSize="item.size" :style="getComponentStyle(item)" />
+                </div>
 
-            <!-- 罐体 -->
-            <div class="tanks">
-                <component v-for="item in deviceConfigGroup.TANKS" :key="item.id" :is="getComponentName(item.modelId)"
-                    :title="getEquipmentTitle(item.equipmentName)" :iconSize="item.size" :iconWidth="item.width"
-                    :iconHeight="item.height" :style="getComponentStyle(item)" />
-            </div>
+                <!-- 泵 -->
+                <div class="pumps">
+                    <component v-for="item in deviceConfigGroup.PUMPS" :key="item.id"
+                        :is="getComponentName(item.modelId)" :title="getEquipmentTitle(item.title)"
+                        :pumpDataArr="pumpHelper.getDataArrByCode(item.equipmentName)" :isReverse="item.isReverse"
+                        :iconSize="item.size" :style="getComponentStyle(item)" />
+                </div>
 
-            <!-- 传感器 -->
-            <div class="sensors">
-                <component v-for="item in deviceConfigGroup.SENSORS" :key="item.id" :is="getComponentName(item.modelId)"
-                    :sensorValue="sensorHelper.getDataArrByCode(item.equipmentName)" :sensorWidth="item.width"
-                    :sensorHeight="item.height" :sensorSize="item.size" :sensorRotate="item.rotate"
-                    :title="getEquipmentTitle(item.equipmentName)" :style="getComponentStyle(item)" />
-            </div>
+                <!-- 罐体 -->
+                <div class="tanks">
+                    <component v-for="item in deviceConfigGroup.TANKS" :key="item.id"
+                        :is="getComponentName(item.modelId)" :title="getEquipmentTitle(item.equipmentName)"
+                        :iconSize="item.size" :iconWidth="item.width" :iconHeight="item.height"
+                        :style="getComponentStyle(item)" />
+                </div>
 
-            <!-- 单纯ICON设备 -->
-            <div class="icon_others">
-                <component v-for="item in deviceConfigGroup.ICONS" :key="item.id" :is="getComponentName(item.modelId)"
-                    :iconSize="item.size" :iconClass="getIconClass(item.modelId)" :style="getComponentStyle(item)"
-                    :title="getEquipmentTitle(item.equipmentName)"
-                    :specialCondition="JSON.parse(item.specialCondition)" />
-            </div>
+                <!-- 传感器 -->
+                <div class="sensors">
+                    <component v-for="item in deviceConfigGroup.SENSORS" :key="item.id"
+                        :is="getComponentName(item.modelId)"
+                        :sensorValue="sensorHelper.getDataArrByCode(item.equipmentName)" :sensorWidth="item.width"
+                        :sensorHeight="item.height" :sensorSize="item.size" :sensorRotate="item.rotate"
+                        :title="getEquipmentTitle(item.equipmentName)" :style="getComponentStyle(item)" />
+                </div>
 
-            <!-- 其他组件 -->
-            <div class="other_components">
-                <component v-for="item in deviceConfigGroup.OTHERS" :key="item.id" :is="getComponentName(item.modelId)"
-                    :iconSize="item.size" :style="getComponentStyle(item)"
-                    :title="getEquipmentTitle(item.equipmentName)" />
-            </div>
+                <!-- 单纯ICON设备 -->
+                <div class="icon_others">
+                    <component v-for="item in deviceConfigGroup.ICONS" :key="item.id"
+                        :is="getComponentName(item.modelId)" :iconSize="item.size"
+                        :iconClass="getIconClass(item.modelId)" :style="getComponentStyle(item)"
+                        :title="getEquipmentTitle(item.equipmentName)"
+                        :specialCondition="JSON.parse(item.specialCondition)" />
+                </div>
 
-            <!-- 管道  -->
-            <div class="pipelines">
-                <component v-for="item in pipeConfig" :key="item.id" :is="getComponentName(item.modelId)"
-                    :pipeStatus="evaluateCondition(item.flowCondition)" :strokeWidth="item.pipeWidth"
-                    :style="getPipelineStyle(item, evaluateCondition(item.reverseCondition))"
-                    :class="getPipelineClass(item.pipeClass, getPipeType(item.dynamicPipelineCondition))" />
-            </div>
+                <!-- 其他组件 -->
+                <div class="other_components">
+                    <component v-for="item in deviceConfigGroup.OTHERS" :key="item.id"
+                        :is="getComponentName(item.modelId)" :iconSize="item.size" :style="getComponentStyle(item)"
+                        :title="getEquipmentTitle(item.equipmentName)" />
+                </div>
 
-            <!-- 大箭头指向 -->
-            <div class="arrows">
-                <component v-for="item in deviceConfigGroup.ARROWS" :key="item.id" :is="getComponentName(item.modelId)"
-                    :arrowText="getEquipmentTitle(item.equipmentName)" :iconSize="item.size"
-                    :specialCondition="JSON.parse(item.specialCondition)" :style="getComponentStyle(item)" />
-            </div>
+                <!-- 管道  -->
+                <div class="pipelines">
+                    <component v-for="item in pipeConfig" :key="item.id" :is="getComponentName(item.modelId)"
+                        :pipeStatus="evaluateCondition(item.flowCondition)" :strokeWidth="item.pipeWidth"
+                        :style="getPipelineStyle(item, evaluateCondition(item.reverseCondition))"
+                        :class="getPipelineClass(item.pipeClass, getPipeType(item.dynamicPipelineCondition))" />
+                </div>
 
-            <!-- 罐体 -->
-            <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 class="arrows">
+                    <component v-for="item in deviceConfigGroup.ARROWS" :key="item.id"
+                        :is="getComponentName(item.modelId)" :arrowText="getEquipmentTitle(item.equipmentName)"
+                        :iconSize="item.size" :specialCondition="JSON.parse(item.specialCondition)"
+                        :style="getComponentStyle(item)" />
+                </div>
 
-            </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="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 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 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="component_pos4">
-                    <Conveyor :iconSize="50" title="PD2006" />
+                <!-- 其他图标 -->
+                <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>
 
-            <!-- 大箭头指向 -->
-            <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 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>
     </div>
@@ -257,6 +265,9 @@ import { stompClient } from '@/utils/ws/stompClient';
 import { onMounted, onBeforeUnmount, reactive, computed } from 'vue';
 import { updateZTPageConfig } from '@/api/dcs/configurePage';
 
+import { usePageScale } from '@/utils/dcs/usePageScale'
+const { pageRef } = usePageScale()
+
 const pageCode = 'CaSO4_4';//页面标识
 const flowId = 13;//当前页面流程Id
 
@@ -509,6 +520,7 @@ const initValveStatusArr = [true]
 
 <style lang="scss" scoped>
 @import '@/assets/styles/dcs/hnyzConfiguratePage.scss';
+
 .page {
     width: 1920px;
     height: 1080px;

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

@@ -1,15 +1,17 @@
 <template>
-    <div class="page">
-        <HeaderComponent :title="title"></HeaderComponent>
-        <div class="content_page">
-            <PageDrawer :pages="pageItems_Na2SO4" class="page_drawer" />
-            <PageSwitcher class="page_switcher"/>
-            <!-- 阀门 -->
-            <div class="valves">
-                <component v-for="item in deviceConfigGroup.VALVES" :key="item.id" :is="getComponentName(item.modelId)"
-                    :title="getEquipmentTitle(item.equipmentName)" :valveStatusArr="getDataArrByCode(item.code)"
-                    :rotateAngle="item.rotate || 0" :iconSize="item.size" :style="getComponentStyle(item)" />
-            </div>
+    <div class="preview">
+        <div ref="pageRef" class="page">
+            <HeaderComponent :title="title"></HeaderComponent>
+            <div class="content_page">
+                <PageDrawer :pages="pageItems_Na2SO4" class="page_drawer" />
+                <PageSwitcher class="page_switcher"/>
+                <!-- 阀门 -->
+                <div class="valves">
+                    <component v-for="item in deviceConfigGroup.VALVES" :key="item.id"
+                        :is="getComponentName(item.modelId)" :title="getEquipmentTitle(item.equipmentName)"
+                        :valveStatusArr="getDataArrByCode(item.code)" :rotateAngle="item.rotate || 0"
+                        :iconSize="item.size" :style="getComponentStyle(item)" />
+                </div>
 
             <!-- 泵 -->
             <div class="pumps">
@@ -45,7 +47,7 @@
             <div class="other_components">
                 <component v-for="item in deviceConfigGroup.OTHERS" :key="item.id" :is="getComponentName(item.modelId)"
                     :iconSize="item.size" :style="getComponentStyle(item)"
-                    :title="getEquipmentTitle(item.title)" :statusArr="[true]"/>
+                    :title="getEquipmentTitle(item.title)" />
             </div>
 
             <!-- 管道  -->
@@ -62,13 +64,13 @@
                     :arrowText="getEquipmentTitle(item.equipmentName)" :iconSize="item.size"
                     :specialCondition="JSON.parse(item.specialCondition)" :style="getComponentStyle(item)" />
             </div>
+            </div>
         </div>
     </div>
 </template>
 
 <script setup>
 import PageDrawer from '@/components/GeneralComponents/PageDrawerComponent.vue';
-import PageSwitcher from '@/components/GeneralComponents/control/PageSwitcherComponent.vue';
 import { computed, onMounted, onBeforeUnmount, reactive } from 'vue';
 import { useValveHelper } from '@/hooks/useValveHelper'
 import { stompClient } from '@/utils/ws/stompClient';
@@ -77,6 +79,10 @@ import { useComponentHelper } from '@/hooks/useComponentHelper'
 import { updateZTPageConfig } from '@/api/dcs/configurePage';
 import { pageItems_Na2SO4 } from "@/config"
 import { useRoute } from 'vue-router'
+
+import { usePageScale } from '@/utils/dcs/usePageScale'
+const { pageRef } = usePageScale()
+
 const route = useRoute()
 const pageCode = route.name
 const title = pageItems_Na2SO4.find(item => item.code === pageCode).label
@@ -155,4 +161,21 @@ const {
 
 <style lang="scss" scoped>
 @import '@/assets/styles/dcs/hnyzConfiguratePage.scss';
+.page {
+    width: 1920px;
+    height: 1080px;
+    background-color: #0b172c;
+
+    .content_page {
+        position: relative;
+        width: 100%;
+        height: 1000px;
+
+        .page_drawer {
+            position: absolute;
+            right: 2%;
+            top: -1%;
+        }
+    }
+}
 </style>

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

@@ -1,58 +1,66 @@
 <template>
-    <div class="page">
-        <HeaderComponent :title="title"></HeaderComponent>
-        <div class="content_page">
-            <PageDrawer :pages="pageItems_Na2SO4" class="page_drawer" />
-            <PageSwitcher class="page_switcher"/>
-            <!-- 阀门 -->
-            <div class="valves">
-                <component v-for="item in deviceConfigGroup.VALVES" :key="item.id" :is="getComponentName(item.modelId)"
-                    :title="getEquipmentTitle(item.equipmentName)" :valveStatusArr="getDataArrByCode(item.code)"
-                    :rotateAngle="item.rotate || 0" :iconSize="item.size" :style="getComponentStyle(item)" />
-            </div>
-
-            <!-- 泵 -->
-            <div class="pumps">
-                <component v-for="item in deviceConfigGroup.PUMPS" :key="item.id" :is="getComponentName(item.modelId)"
-                    :title="getEquipmentTitle(item.title)" :pumpDataArr="pumpHelper.getDataArrByCode(item.code)"
-                    :isReverse="item.isReverse" :iconSize="item.size" :style="getComponentStyle(item)" />
-            </div>
-
-            <!-- 罐体 -->
-            <div class="tanks">
-                <component v-for="item in deviceConfigGroup.TANKS" :key="item.id" :is="getComponentName(item.modelId)"
-                    :title="getEquipmentTitle(item.title)" :iconSize="item.size" :iconWidth="item.width"
-                    :iconHeight="item.height" :style="getComponentStyle(item)" />
-            </div>
-
-            <!-- 传感器 -->
-            <div class="sensors">
-                <component v-for="item in deviceConfigGroup.SENSORS" :key="item.id" :is="getComponentName(item.modelId)"
-                    :title="getEquipmentTitle(item.equipmentName)" :sensorSize="item.size"
-                    :sensorValue="sensorHelper.getDataArrByCode(item.code)" :sensorWidth="item.width"
-                    :sensorHeight="item.height" :style="getComponentStyle(item)" :specialCondition="JSON.parse(item.specialCondition)"/>
-            </div>
-
-            <!-- 其他设备 -->
-            <div class="icon_others">
-                <component v-for="item in deviceConfigGroup.ICONS" :key="item.id" :is="getComponentName(item.modelId)"
-                    :iconSize="item.size" :iconClass="getIconClass(item.modelId)" :style="getComponentStyle(item)"
-                    :title="getEquipmentTitle(item.title)" />
-            </div>
-
-            <!-- 管道  -->
-            <div class="pipelines">
-                <component v-for="item in pipeConfig" :key="item.id" :is="getComponentName(item.modelId)"
-                    :pipeStatus="evaluateCondition(item.flowCondition, true)" :strokeWidth="item.pipeWidth"
-                    :style="getPipelineStyle(item, evaluateCondition(item.reverseCondition))"
-                    :class="getPipelineClass(item.pipeClass, getPipeType(item.dynamicPipelineCondition))" />
-            </div>
-
-            <!-- 大箭头指向 -->
-            <div class="arrows">
-                <component v-for="item in deviceConfigGroup.ARROWS" :key="item.id" :is="getComponentName(item.modelId)"
-                    :arrowText="getEquipmentTitle(item.equipmentName)" :iconSize="item.size"
-                    :specialCondition="JSON.parse(item.specialCondition)" :style="getComponentStyle(item)" />
+    <div class="preview">
+        <div ref="pageRef" class="page">
+            <HeaderComponent :title="title"></HeaderComponent>
+            <div class="content_page">
+                <PageDrawer :pages="pageItems_Na2SO4" class="page_drawer" />
+                <PageSwitcher class="page_switcher" />
+                <!-- 阀门 -->
+                <div class="valves">
+                    <component v-for="item in deviceConfigGroup.VALVES" :key="item.id"
+                        :is="getComponentName(item.modelId)" :title="getEquipmentTitle(item.equipmentName)"
+                        :valveStatusArr="getDataArrByCode(item.code)" :rotateAngle="item.rotate || 0"
+                        :iconSize="item.size" :style="getComponentStyle(item)" />
+                </div>
+
+                <!-- 泵 -->
+                <div class="pumps">
+                    <component v-for="item in deviceConfigGroup.PUMPS" :key="item.id"
+                        :is="getComponentName(item.modelId)" :title="getEquipmentTitle(item.title)"
+                        :pumpDataArr="pumpHelper.getDataArrByCode(item.code)" :isReverse="item.isReverse"
+                        :iconSize="item.size" :style="getComponentStyle(item)" />
+                </div>
+
+                <!-- 罐体 -->
+                <div class="tanks">
+                    <component v-for="item in deviceConfigGroup.TANKS" :key="item.id"
+                        :is="getComponentName(item.modelId)" :title="getEquipmentTitle(item.title)"
+                        :iconSize="item.size" :iconWidth="item.width" :iconHeight="item.height"
+                        :style="getComponentStyle(item)" />
+                </div>
+
+                <!-- 传感器 -->
+                <div class="sensors">
+                    <component v-for="item in deviceConfigGroup.SENSORS" :key="item.id"
+                        :is="getComponentName(item.modelId)" :title="getEquipmentTitle(item.equipmentName)"
+                        :sensorSize="item.size" :sensorValue="sensorHelper.getDataArrByCode(item.code)"
+                        :sensorWidth="item.width" :sensorHeight="item.height" :style="getComponentStyle(item)"
+                        :specialCondition="JSON.parse(item.specialCondition)" />
+                </div>
+
+                <!-- 其他设备 -->
+                <div class="icon_others">
+                    <component v-for="item in deviceConfigGroup.ICONS" :key="item.id"
+                        :is="getComponentName(item.modelId)" :iconSize="item.size"
+                        :iconClass="getIconClass(item.modelId)" :style="getComponentStyle(item)"
+                        :title="getEquipmentTitle(item.title)" />
+                </div>
+
+                <!-- 管道  -->
+                <div class="pipelines">
+                    <component v-for="item in pipeConfig" :key="item.id" :is="getComponentName(item.modelId)"
+                        :pipeStatus="evaluateCondition(item.flowCondition, true)" :strokeWidth="item.pipeWidth"
+                        :style="getPipelineStyle(item, evaluateCondition(item.reverseCondition))"
+                        :class="getPipelineClass(item.pipeClass, getPipeType(item.dynamicPipelineCondition))" />
+                </div>
+
+                <!-- 大箭头指向 -->
+                <div class="arrows">
+                    <component v-for="item in deviceConfigGroup.ARROWS" :key="item.id"
+                        :is="getComponentName(item.modelId)" :arrowText="getEquipmentTitle(item.equipmentName)"
+                        :iconSize="item.size" :specialCondition="JSON.parse(item.specialCondition)"
+                        :style="getComponentStyle(item)" />
+                </div>
             </div>
         </div>
     </div>
@@ -68,6 +76,10 @@ import { useComponentHelper } from '@/hooks/useComponentHelper'
 import { updateZTPageConfig } from '@/api/dcs/configurePage';
 import { pageItems_Na2SO4 } from "@/config"
 import { useRoute } from 'vue-router'
+
+import { usePageScale } from '@/utils/dcs/usePageScale'
+const { pageRef } = usePageScale()
+
 const route = useRoute()
 const pageCode = route.name
 const title = pageItems_Na2SO4.find(item => item.code === pageCode).label
@@ -90,7 +102,6 @@ const {
     getPipelineStyle,
 } = useComponentHelper(modelMap)
 
-
 onMounted(async () => {
     await fetchPageConfig(pageCode).then(res => {
         updatePageConfig()
@@ -139,10 +150,26 @@ const sensorHelper = useValveHelper(computed(() => deviceDataGroup.SENSORS))
 const {
     evaluateCondition, getPipeType
 } = useValveHelper(computed(() => [...deviceDataGroup.VALVES, ...deviceDataGroup.PUMPS]))
-
-
 </script>
 
 <style lang="scss" scoped>
 @import '@/assets/styles/dcs/hnyzConfiguratePage.scss';
+
+.page {
+    width: 1920px;
+    height: 1080px;
+    background-color: #0b172c;
+
+    .content_page {
+        position: relative;
+        width: 100%;
+        height: 1000px;
+
+        .page_drawer {
+            position: absolute;
+            right: 2%;
+            top: -1%;
+        }
+    }
+}
 </style>

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

@@ -1,58 +1,65 @@
 <template>
-    <div class="page">
-        <HeaderComponent :title="title"></HeaderComponent>
-        <div class="content_page">
-            <PageDrawer :pages="pageItems_Na2SO4" class="page_drawer" />
-            <PageSwitcher class="page_switcher"/>
-            <!-- 阀门 -->
-            <div class="valves">
-                <component v-for="item in deviceConfigGroup.VALVES" :key="item.id" :is="getComponentName(item.modelId)"
-                    :title="getEquipmentTitle(item.equipmentName)" :valveStatusArr="getDataArrByCode(item.code)"
-                    :rotateAngle="item.rotate || 0" :iconSize="item.size" :style="getComponentStyle(item)" />
-            </div>
-
-            <!-- 泵 -->
-            <div class="pumps">
-                <component v-for="item in deviceConfigGroup.PUMPS" :key="item.id" :is="getComponentName(item.modelId)"
-                    :title="getEquipmentTitle(item.title)" :pumpDataArr="pumpHelper.getDataArrByCode(item.code)"
-                    :isReverse="item.isReverse" :iconSize="item.size" :style="getComponentStyle(item)" />
-            </div>
-
-            <!-- 罐体 -->
-            <div class="tanks">
-                <component v-for="item in deviceConfigGroup.TANKS" :key="item.id" :is="getComponentName(item.modelId)"
-                    :title="getEquipmentTitle(item.title)" :iconSize="item.size" :iconWidth="item.width"
-                    :iconHeight="item.height" :style="getComponentStyle(item)" />
-            </div>
-
-            <!-- 传感器 -->
-            <div class="sensors">
-                <component v-for="item in deviceConfigGroup.SENSORS" :key="item.id" :is="getComponentName(item.modelId)"
-                    :title="getEquipmentTitle(item.equipmentName)" :sensorSize="item.size"
-                    :sensorValue="sensorHelper.getDataArrByCode(item.code)" :sensorWidth="item.width"
-                    :sensorHeight="item.height" :style="getComponentStyle(item)" />
-            </div>
-
-            <!-- 其他设备 -->
-            <div class="icon_others">
-                <component v-for="item in deviceConfigGroup.ICONS" :key="item.id" :is="getComponentName(item.modelId)"
-                    :iconSize="item.size" :iconClass="getIconClass(item.modelId)" :style="getComponentStyle(item)"
-                    :title="getEquipmentTitle(item.equipmentName)" />
-            </div>
-
-            <!-- 管道  -->
-            <div class="pipelines">
-                <component v-for="item in pipeConfig" :key="item.id" :is="getComponentName(item.modelId)"
-                    :pipeStatus="evaluateCondition(item.flowCondition, true)" :strokeWidth="item.pipeWidth"
-                    :style="getPipelineStyle(item, evaluateCondition(item.reverseCondition))"
-                    :class="getPipelineClass(item.pipeClass, getPipeType(item.dynamicPipelineCondition))" />
-            </div>
-
-            <!-- 大箭头指向 -->
-            <div class="arrows">
-                <component v-for="item in deviceConfigGroup.ARROWS" :key="item.id" :is="getComponentName(item.modelId)"
-                    :arrowText="getEquipmentTitle(item.equipmentName)" :iconSize="item.size"
-                    :specialCondition="JSON.parse(item.specialCondition)" :style="getComponentStyle(item)" />
+    <div class="preview">
+        <div ref="pageRef" class="page">
+            <HeaderComponent :title="title"></HeaderComponent>
+            <div class="content_page">
+                <PageDrawer :pages="pageItems_Na2SO4" class="page_drawer" />
+                <PageSwitcher class="page_switcher" />
+                <!-- 阀门 -->
+                <div class="valves">
+                    <component v-for="item in deviceConfigGroup.VALVES" :key="item.id"
+                        :is="getComponentName(item.modelId)" :title="getEquipmentTitle(item.equipmentName)"
+                        :valveStatusArr="getDataArrByCode(item.code)" :rotateAngle="item.rotate || 0"
+                        :iconSize="item.size" :style="getComponentStyle(item)" />
+                </div>
+
+                <!-- 泵 -->
+                <div class="pumps">
+                    <component v-for="item in deviceConfigGroup.PUMPS" :key="item.id"
+                        :is="getComponentName(item.modelId)" :title="getEquipmentTitle(item.title)"
+                        :pumpDataArr="pumpHelper.getDataArrByCode(item.code)" :isReverse="item.isReverse"
+                        :iconSize="item.size" :style="getComponentStyle(item)" />
+                </div>
+
+                <!-- 罐体 -->
+                <div class="tanks">
+                    <component v-for="item in deviceConfigGroup.TANKS" :key="item.id"
+                        :is="getComponentName(item.modelId)" :title="getEquipmentTitle(item.title)"
+                        :iconSize="item.size" :iconWidth="item.width" :iconHeight="item.height"
+                        :style="getComponentStyle(item)" />
+                </div>
+
+                <!-- 传感器 -->
+                <div class="sensors">
+                    <component v-for="item in deviceConfigGroup.SENSORS" :key="item.id"
+                        :is="getComponentName(item.modelId)" :title="getEquipmentTitle(item.equipmentName)"
+                        :sensorSize="item.size" :sensorValue="sensorHelper.getDataArrByCode(item.code)"
+                        :sensorWidth="item.width" :sensorHeight="item.height" :style="getComponentStyle(item)" />
+                </div>
+
+                <!-- 其他设备 -->
+                <div class="icon_others">
+                    <component v-for="item in deviceConfigGroup.ICONS" :key="item.id"
+                        :is="getComponentName(item.modelId)" :iconSize="item.size"
+                        :iconClass="getIconClass(item.modelId)" :style="getComponentStyle(item)"
+                        :title="getEquipmentTitle(item.equipmentName)" />
+                </div>
+
+                <!-- 管道  -->
+                <div class="pipelines">
+                    <component v-for="item in pipeConfig" :key="item.id" :is="getComponentName(item.modelId)"
+                        :pipeStatus="evaluateCondition(item.flowCondition, true)" :strokeWidth="item.pipeWidth"
+                        :style="getPipelineStyle(item, evaluateCondition(item.reverseCondition))"
+                        :class="getPipelineClass(item.pipeClass, getPipeType(item.dynamicPipelineCondition))" />
+                </div>
+
+                <!-- 大箭头指向 -->
+                <div class="arrows">
+                    <component v-for="item in deviceConfigGroup.ARROWS" :key="item.id"
+                        :is="getComponentName(item.modelId)" :arrowText="getEquipmentTitle(item.equipmentName)"
+                        :iconSize="item.size" :specialCondition="JSON.parse(item.specialCondition)"
+                        :style="getComponentStyle(item)" />
+                </div>
             </div>
         </div>
     </div>
@@ -68,6 +75,10 @@ import { useComponentHelper } from '@/hooks/useComponentHelper'
 import { updateZTPageConfig } from '@/api/dcs/configurePage';
 import { pageItems_Na2SO4 } from "@/config"
 import { useRoute } from 'vue-router'
+
+import { usePageScale } from '@/utils/dcs/usePageScale'
+const { pageRef } = usePageScale()
+
 const route = useRoute()
 const pageCode = route.name
 const title = pageItems_Na2SO4.find(item => item.code === pageCode).label
@@ -90,11 +101,11 @@ const {
     getPipelineStyle,
 } = useComponentHelper(modelMap)
 
-
 onMounted(async () => {
     await fetchPageConfig(pageCode).then(res => {
         updatePageConfig()
     })
+    updateSize()
 })
 
 onBeforeUnmount(() => {
@@ -139,10 +150,28 @@ const sensorHelper = useValveHelper(computed(() => deviceDataGroup.SENSORS))
 const {
     evaluateCondition, getPipeType
 } = useValveHelper(computed(() => [...deviceDataGroup.VALVES, ...deviceDataGroup.PUMPS]))
-
-
 </script>
 
 <style lang="scss" scoped>
 @import '@/assets/styles/dcs/hnyzConfiguratePage.scss';
+
+.page {
+    // width: 100%;
+    // height: 100%;
+    width: 1920px;
+    height: 1080px;
+    background-color: #0b172c;
+
+    .content_page {
+        position: relative;
+        width: 100%;
+        height: 1000px;
+
+        .page_drawer {
+            position: absolute;
+            right: 2%;
+            top: -1%;
+        }
+    }
+}
 </style>

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

@@ -1,58 +1,65 @@
 <template>
-    <div class="page">
-        <HeaderComponent :title="title"></HeaderComponent>
-        <div class="content_page">
-            <PageDrawer :pages="pageItems_Na2SO4" class="page_drawer" />
-            <PageSwitcher class="page_switcher"/>
-            <!-- 阀门 -->
-            <div class="valves">
-                <component v-for="item in deviceConfigGroup.VALVES" :key="item.id" :is="getComponentName(item.modelId)"
-                    :title="getEquipmentTitle(item.equipmentName)" :valveStatusArr="getDataArrByCode(item.code)"
-                    :rotateAngle="item.rotate || 0" :iconSize="item.size" :style="getComponentStyle(item)" />
-            </div>
-
-            <!-- 泵 -->
-            <div class="pumps">
-                <component v-for="item in deviceConfigGroup.PUMPS" :key="item.id" :is="getComponentName(item.modelId)"
-                    :title="getEquipmentTitle(item.title)" :pumpDataArr="pumpHelper.getDataArrByCode(item.code)"
-                    :isReverse="item.isReverse" :iconSize="item.size" :style="getComponentStyle(item)" />
-            </div>
-
-            <!-- 罐体 -->
-            <div class="tanks">
-                <component v-for="item in deviceConfigGroup.TANKS" :key="item.id" :is="getComponentName(item.modelId)"
-                    :title="getEquipmentTitle(item.title)" :iconSize="item.size" :iconWidth="item.width"
-                    :iconHeight="item.height" :style="getComponentStyle(item)" />
-            </div>
-
-            <!-- 传感器 -->
-            <div class="sensors">
-                <component v-for="item in deviceConfigGroup.SENSORS" :key="item.id" :is="getComponentName(item.modelId)"
-                    :title="getEquipmentTitle(item.equipmentName)" :sensorSize="item.size"
-                    :sensorValue="sensorHelper.getDataArrByCode(item.code)" :sensorWidth="item.width"
-                    :sensorHeight="item.height" :style="getComponentStyle(item)" />
-            </div>
-
-            <!-- 其他ICON设备 -->
-            <div class="icon_others">
-                <component v-for="item in deviceConfigGroup.ICONS" :key="item.id" :is="getComponentName(item.modelId)"
-                    :iconSize="item.size" :iconClass="getIconClass(item.modelId)" :style="getComponentStyle(item)"
-                    :title="getEquipmentTitle(item.equipmentName)" />
-            </div>
-
-            <!-- 管道  -->
-            <div class="pipelines">
-                <component v-for="item in pipeConfig" :key="item.id" :is="getComponentName(item.modelId)"
-                    :pipeStatus="evaluateCondition(item.flowCondition, true)" :strokeWidth="item.pipeWidth"
-                    :style="getPipelineStyle(item, evaluateCondition(item.reverseCondition))"
-                    :class="getPipelineClass(item.pipeClass, getPipeType(item.dynamicPipelineCondition))" />
-            </div>
-
-            <!-- 大箭头指向 -->
-            <div class="arrows">
-                <component v-for="item in deviceConfigGroup.ARROWS" :key="item.id" :is="getComponentName(item.modelId)"
-                    :arrowText="getEquipmentTitle(item.equipmentName)" :iconSize="item.size"
-                    :specialCondition="JSON.parse(item.specialCondition)" :style="getComponentStyle(item)" />
+    <div class="preview">
+        <div ref="pageRef" class="page">
+            <HeaderComponent :title="title"></HeaderComponent>
+            <div class="content_page">
+                <PageDrawer :pages="pageItems_Na2SO4" class="page_drawer" />
+                <PageSwitcher class="page_switcher" />
+                <!-- 阀门 -->
+                <div class="valves">
+                    <component v-for="item in deviceConfigGroup.VALVES" :key="item.id"
+                        :is="getComponentName(item.modelId)" :title="getEquipmentTitle(item.equipmentName)"
+                        :valveStatusArr="getDataArrByCode(item.code)" :rotateAngle="item.rotate || 0"
+                        :iconSize="item.size" :style="getComponentStyle(item)" />
+                </div>
+
+                <!-- 泵 -->
+                <div class="pumps">
+                    <component v-for="item in deviceConfigGroup.PUMPS" :key="item.id"
+                        :is="getComponentName(item.modelId)" :title="getEquipmentTitle(item.title)"
+                        :pumpDataArr="pumpHelper.getDataArrByCode(item.code)" :isReverse="item.isReverse"
+                        :iconSize="item.size" :style="getComponentStyle(item)" />
+                </div>
+
+                <!-- 罐体 -->
+                <div class="tanks">
+                    <component v-for="item in deviceConfigGroup.TANKS" :key="item.id"
+                        :is="getComponentName(item.modelId)" :title="getEquipmentTitle(item.title)"
+                        :iconSize="item.size" :iconWidth="item.width" :iconHeight="item.height"
+                        :style="getComponentStyle(item)" />
+                </div>
+
+                <!-- 传感器 -->
+                <div class="sensors">
+                    <component v-for="item in deviceConfigGroup.SENSORS" :key="item.id"
+                        :is="getComponentName(item.modelId)" :title="getEquipmentTitle(item.equipmentName)"
+                        :sensorSize="item.size" :sensorValue="sensorHelper.getDataArrByCode(item.code)"
+                        :sensorWidth="item.width" :sensorHeight="item.height" :style="getComponentStyle(item)" />
+                </div>
+
+                <!-- 其他ICON设备 -->
+                <div class="icon_others">
+                    <component v-for="item in deviceConfigGroup.ICONS" :key="item.id"
+                        :is="getComponentName(item.modelId)" :iconSize="item.size"
+                        :iconClass="getIconClass(item.modelId)" :style="getComponentStyle(item)"
+                        :title="getEquipmentTitle(item.equipmentName)" />
+                </div>
+
+                <!-- 管道  -->
+                <div class="pipelines">
+                    <component v-for="item in pipeConfig" :key="item.id" :is="getComponentName(item.modelId)"
+                        :pipeStatus="evaluateCondition(item.flowCondition, true)" :strokeWidth="item.pipeWidth"
+                        :style="getPipelineStyle(item, evaluateCondition(item.reverseCondition))"
+                        :class="getPipelineClass(item.pipeClass, getPipeType(item.dynamicPipelineCondition))" />
+                </div>
+
+                <!-- 大箭头指向 -->
+                <div class="arrows">
+                    <component v-for="item in deviceConfigGroup.ARROWS" :key="item.id"
+                        :is="getComponentName(item.modelId)" :arrowText="getEquipmentTitle(item.equipmentName)"
+                        :iconSize="item.size" :specialCondition="JSON.parse(item.specialCondition)"
+                        :style="getComponentStyle(item)" />
+                </div>
             </div>
         </div>
     </div>
@@ -68,6 +75,10 @@ import { useComponentHelper } from '@/hooks/useComponentHelper'
 import { updateZTPageConfig } from '@/api/dcs/configurePage';
 import { pageItems_Na2SO4 } from "@/config"
 import { useRoute } from 'vue-router'
+
+import { usePageScale } from '@/utils/dcs/usePageScale'
+const { pageRef } = usePageScale()
+
 const route = useRoute()
 const pageCode = route.name
 const title = pageItems_Na2SO4.find(item => item.code === pageCode).label
@@ -145,4 +156,22 @@ const {
 
 <style lang="scss" scoped>
 @import '@/assets/styles/dcs/hnyzConfiguratePage.scss';
+
+.page {
+    width: 1920px;
+    height: 1080px;
+    background-color: #0b172c;
+
+    .content_page {
+        position: relative;
+        width: 100%;
+        height: 1000px;
+
+        .page_drawer {
+            position: absolute;
+            right: 2%;
+            top: -1%;
+        }
+    }
+}
 </style>

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

@@ -1,5 +1,6 @@
 <template>
-    <div class="page">
+    <div class="preview">
+        <div ref="pageRef" class="page">
         <HeaderComponent :title="title"></HeaderComponent>
         <div class="content_page">
             <PageDrawer :pages="pageItems_Na2SO4" class="page_drawer" />
@@ -56,6 +57,7 @@
             </div>
         </div>
     </div>
+    </div>
 </template>
 
 <script setup>
@@ -68,6 +70,10 @@ import { useComponentHelper } from '@/hooks/useComponentHelper'
 import { updateZTPageConfig } from '@/api/dcs/configurePage';
 import { pageItems_Na2SO4 } from "@/config"
 import { useRoute } from 'vue-router'
+
+import { usePageScale } from '@/utils/dcs/usePageScale'
+const { pageRef } = usePageScale()
+
 const route = useRoute()
 const pageCode = route.name
 const title = pageItems_Na2SO4.find(item => item.code === pageCode).label

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

@@ -1,58 +1,65 @@
 <template>
-    <div class="page">
-        <HeaderComponent :title="title"></HeaderComponent>
-        <div class="content_page">
-            <PageDrawer :pages="pageItems_Na2SO4" class="page_drawer" />
-            <PageSwitcher class="page_switcher"/>
-            <!-- 阀门 -->
-            <div class="valves">
-                <component v-for="item in deviceConfigGroup.VALVES" :key="item.id" :is="getComponentName(item.modelId)"
-                    :title="getEquipmentTitle(item.equipmentName)" :valveStatusArr="getDataArrByCode(item.code)"
-                    :rotateAngle="item.rotate || 0" :iconSize="item.size" :style="getComponentStyle(item)" />
-            </div>
-
-            <!-- 泵 -->
-            <div class="pumps">
-                <component v-for="item in deviceConfigGroup.PUMPS" :key="item.id" :is="getComponentName(item.modelId)"
-                    :title="getEquipmentTitle(item.title)" :pumpDataArr="pumpHelper.getDataArrByCode(item.code)"
-                    :isReverse="item.isReverse" :iconSize="item.size" :style="getComponentStyle(item)" />
-            </div>
-
-            <!-- 罐体 -->
-            <div class="tanks">
-                <component v-for="item in deviceConfigGroup.TANKS" :key="item.id" :is="getComponentName(item.modelId)"
-                    :title="getEquipmentTitle(item.title)" :iconSize="item.size" :iconWidth="item.width"
-                    :iconHeight="item.height" :style="getComponentStyle(item)" />
-            </div>
-
-            <!-- 传感器 -->
-            <div class="sensors">
-                <component v-for="item in deviceConfigGroup.SENSORS" :key="item.id" :is="getComponentName(item.modelId)"
-                    :title="getEquipmentTitle(item.equipmentName)" :sensorSize="item.size"
-                    :sensorValue="sensorHelper.getDataArrByCode(item.code)" :sensorWidth="item.width"
-                    :sensorHeight="item.height" :style="getComponentStyle(item)" />
-            </div>
-
-            <!-- 其他设备 -->
-            <div class="icon_others">
-                <component v-for="item in deviceConfigGroup.ICONS" :key="item.id" :is="getComponentName(item.modelId)"
-                    :iconSize="item.size" :iconClass="getIconClass(item.modelId)" :style="getComponentStyle(item)"
-                    :title="getEquipmentTitle(item.equipmentName)" />
-            </div>
-
-            <!-- 管道  -->
-            <div class="pipelines">
-                <component v-for="item in pipeConfig" :key="item.id" :is="getComponentName(item.modelId)"
-                    :pipeStatus="evaluateCondition(item.flowCondition, true)" :strokeWidth="item.pipeWidth"
-                    :style="getPipelineStyle(item, evaluateCondition(item.reverseCondition))"
-                    :class="getPipelineClass(item.pipeClass, getPipeType(item.dynamicPipelineCondition))" />
-            </div>
-
-            <!-- 大箭头指向 -->
-            <div class="arrows">
-                <component v-for="item in deviceConfigGroup.ARROWS" :key="item.id" :is="getComponentName(item.modelId)"
-                    :arrowText="getEquipmentTitle(item.equipmentName)" :iconSize="item.size"
-                    :specialCondition="JSON.parse(item.specialCondition)" :style="getComponentStyle(item)" />
+    <div class="preview">
+        <div ref="pageRef" class="page">
+            <HeaderComponent :title="title"></HeaderComponent>
+            <div class="content_page">
+                <PageDrawer :pages="pageItems_Na2SO4" class="page_drawer" />
+                <PageSwitcher class="page_switcher" />
+                <!-- 阀门 -->
+                <div class="valves">
+                    <component v-for="item in deviceConfigGroup.VALVES" :key="item.id"
+                        :is="getComponentName(item.modelId)" :title="getEquipmentTitle(item.equipmentName)"
+                        :valveStatusArr="getDataArrByCode(item.code)" :rotateAngle="item.rotate || 0"
+                        :iconSize="item.size" :style="getComponentStyle(item)" />
+                </div>
+
+                <!-- 泵 -->
+                <div class="pumps">
+                    <component v-for="item in deviceConfigGroup.PUMPS" :key="item.id"
+                        :is="getComponentName(item.modelId)" :title="getEquipmentTitle(item.title)"
+                        :pumpDataArr="pumpHelper.getDataArrByCode(item.code)" :isReverse="item.isReverse"
+                        :iconSize="item.size" :style="getComponentStyle(item)" />
+                </div>
+
+                <!-- 罐体 -->
+                <div class="tanks">
+                    <component v-for="item in deviceConfigGroup.TANKS" :key="item.id"
+                        :is="getComponentName(item.modelId)" :title="getEquipmentTitle(item.title)"
+                        :iconSize="item.size" :iconWidth="item.width" :iconHeight="item.height"
+                        :style="getComponentStyle(item)" />
+                </div>
+
+                <!-- 传感器 -->
+                <div class="sensors">
+                    <component v-for="item in deviceConfigGroup.SENSORS" :key="item.id"
+                        :is="getComponentName(item.modelId)" :title="getEquipmentTitle(item.equipmentName)"
+                        :sensorSize="item.size" :sensorValue="sensorHelper.getDataArrByCode(item.code)"
+                        :sensorWidth="item.width" :sensorHeight="item.height" :style="getComponentStyle(item)" />
+                </div>
+
+                <!-- 其他设备 -->
+                <div class="icon_others">
+                    <component v-for="item in deviceConfigGroup.ICONS" :key="item.id"
+                        :is="getComponentName(item.modelId)" :iconSize="item.size"
+                        :iconClass="getIconClass(item.modelId)" :style="getComponentStyle(item)"
+                        :title="getEquipmentTitle(item.equipmentName)" />
+                </div>
+
+                <!-- 管道  -->
+                <div class="pipelines">
+                    <component v-for="item in pipeConfig" :key="item.id" :is="getComponentName(item.modelId)"
+                        :pipeStatus="evaluateCondition(item.flowCondition, true)" :strokeWidth="item.pipeWidth"
+                        :style="getPipelineStyle(item, evaluateCondition(item.reverseCondition))"
+                        :class="getPipelineClass(item.pipeClass, getPipeType(item.dynamicPipelineCondition))" />
+                </div>
+
+                <!-- 大箭头指向 -->
+                <div class="arrows">
+                    <component v-for="item in deviceConfigGroup.ARROWS" :key="item.id"
+                        :is="getComponentName(item.modelId)" :arrowText="getEquipmentTitle(item.equipmentName)"
+                        :iconSize="item.size" :specialCondition="JSON.parse(item.specialCondition)"
+                        :style="getComponentStyle(item)" />
+                </div>
             </div>
         </div>
     </div>
@@ -68,6 +75,10 @@ import { useComponentHelper } from '@/hooks/useComponentHelper'
 import { updateZTPageConfig } from '@/api/dcs/configurePage';
 import { pageItems_Na2SO4 } from "@/config"
 import { useRoute } from 'vue-router'
+
+import { usePageScale } from '@/utils/dcs/usePageScale'
+const { pageRef } = usePageScale()
+
 const route = useRoute()
 const pageCode = route.name
 const title = pageItems_Na2SO4.find(item => item.code === pageCode).label
@@ -145,6 +156,7 @@ const {
 
 <style lang="scss" scoped>
 @import '@/assets/styles/dcs/hnyzConfiguratePage.scss';
+
 .page {
     width: 1920px;
     height: 1080px;

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

@@ -1,58 +1,65 @@
 <template>
-    <div class="page">
-        <HeaderComponent :title="title"></HeaderComponent>
-        <div class="content_page">
-            <PageDrawer :pages="pageItems_Na2SO4" class="page_drawer" />
-            <PageSwitcher class="page_switcher"/>
-            <!-- 阀门 -->
-            <div class="valves">
-                <component v-for="item in deviceConfigGroup.VALVES" :key="item.id" :is="getComponentName(item.modelId)"
-                    :title="getEquipmentTitle(item.equipmentName)" :valveStatusArr="getDataArrByCode(item.code)"
-                    :rotateAngle="item.rotate || 0" :iconSize="item.size" :style="getComponentStyle(item)" />
-            </div>
-
-            <!-- 泵 -->
-            <div class="pumps">
-                <component v-for="item in deviceConfigGroup.PUMPS" :key="item.id" :is="getComponentName(item.modelId)"
-                    :title="getEquipmentTitle(item.title)" :pumpDataArr="pumpHelper.getDataArrByCode(item.code)"
-                    :isReverse="item.isReverse" :iconSize="item.size" :style="getComponentStyle(item)" />
-            </div>
-
-            <!-- 罐体 -->
-            <div class="tanks">
-                <component v-for="item in deviceConfigGroup.TANKS" :key="item.id" :is="getComponentName(item.modelId)"
-                    :title="getEquipmentTitle(item.title)" :iconSize="item.size" :iconWidth="item.width"
-                    :iconHeight="item.height" :style="getComponentStyle(item)" />
-            </div>
-
-            <!-- 传感器 -->
-            <div class="sensors">
-                <component v-for="item in deviceConfigGroup.SENSORS" :key="item.id" :is="getComponentName(item.modelId)"
-                    :title="getEquipmentTitle(item.equipmentName)" :sensorSize="item.size"
-                    :sensorValue="sensorHelper.getDataArrByCode(item.code)" :sensorWidth="item.width"
-                    :sensorHeight="item.height" :style="getComponentStyle(item)" />
-            </div>
-
-            <!-- 其他设备 -->
-            <div class="icon_others">
-                <component v-for="item in deviceConfigGroup.ICONS" :key="item.id" :is="getComponentName(item.modelId)"
-                    :iconSize="item.size" :iconClass="getIconClass(item.modelId)" :style="getComponentStyle(item)"
-                    :title="getEquipmentTitle(item.equipmentName)" />
-            </div>
-
-            <!-- 管道  -->
-            <div class="pipelines">
-                <component v-for="item in pipeConfig" :key="item.id" :is="getComponentName(item.modelId)"
-                    :pipeStatus="evaluateCondition(item.flowCondition, true)" :strokeWidth="item.pipeWidth"
-                    :style="getPipelineStyle(item, evaluateCondition(item.reverseCondition))"
-                    :class="getPipelineClass(item.pipeClass, getPipeType(item.dynamicPipelineCondition))" />
-            </div>
-
-            <!-- 大箭头指向 -->
-            <div class="arrows">
-                <component v-for="item in deviceConfigGroup.ARROWS" :key="item.id" :is="getComponentName(item.modelId)"
-                    :arrowText="getEquipmentTitle(item.equipmentName)" :iconSize="item.size"
-                    :specialCondition="JSON.parse(item.specialCondition)" :style="getComponentStyle(item)" />
+    <div class="preview">
+        <div ref="pageRef" class="page">
+            <HeaderComponent :title="title"></HeaderComponent>
+            <div class="content_page">
+                <PageDrawer :pages="pageItems_Na2SO4" class="page_drawer" />
+                <PageSwitcher class="page_switcher" />
+                <!-- 阀门 -->
+                <div class="valves">
+                    <component v-for="item in deviceConfigGroup.VALVES" :key="item.id"
+                        :is="getComponentName(item.modelId)" :title="getEquipmentTitle(item.equipmentName)"
+                        :valveStatusArr="getDataArrByCode(item.code)" :rotateAngle="item.rotate || 0"
+                        :iconSize="item.size" :style="getComponentStyle(item)" />
+                </div>
+
+                <!-- 泵 -->
+                <div class="pumps">
+                    <component v-for="item in deviceConfigGroup.PUMPS" :key="item.id"
+                        :is="getComponentName(item.modelId)" :title="getEquipmentTitle(item.title)"
+                        :pumpDataArr="pumpHelper.getDataArrByCode(item.code)" :isReverse="item.isReverse"
+                        :iconSize="item.size" :style="getComponentStyle(item)" />
+                </div>
+
+                <!-- 罐体 -->
+                <div class="tanks">
+                    <component v-for="item in deviceConfigGroup.TANKS" :key="item.id"
+                        :is="getComponentName(item.modelId)" :title="getEquipmentTitle(item.title)"
+                        :iconSize="item.size" :iconWidth="item.width" :iconHeight="item.height"
+                        :style="getComponentStyle(item)" />
+                </div>
+
+                <!-- 传感器 -->
+                <div class="sensors">
+                    <component v-for="item in deviceConfigGroup.SENSORS" :key="item.id"
+                        :is="getComponentName(item.modelId)" :title="getEquipmentTitle(item.equipmentName)"
+                        :sensorSize="item.size" :sensorValue="sensorHelper.getDataArrByCode(item.code)"
+                        :sensorWidth="item.width" :sensorHeight="item.height" :style="getComponentStyle(item)" />
+                </div>
+
+                <!-- 其他设备 -->
+                <div class="icon_others">
+                    <component v-for="item in deviceConfigGroup.ICONS" :key="item.id"
+                        :is="getComponentName(item.modelId)" :iconSize="item.size"
+                        :iconClass="getIconClass(item.modelId)" :style="getComponentStyle(item)"
+                        :title="getEquipmentTitle(item.equipmentName)" />
+                </div>
+
+                <!-- 管道  -->
+                <div class="pipelines">
+                    <component v-for="item in pipeConfig" :key="item.id" :is="getComponentName(item.modelId)"
+                        :pipeStatus="evaluateCondition(item.flowCondition, true)" :strokeWidth="item.pipeWidth"
+                        :style="getPipelineStyle(item, evaluateCondition(item.reverseCondition))"
+                        :class="getPipelineClass(item.pipeClass, getPipeType(item.dynamicPipelineCondition))" />
+                </div>
+
+                <!-- 大箭头指向 -->
+                <div class="arrows">
+                    <component v-for="item in deviceConfigGroup.ARROWS" :key="item.id"
+                        :is="getComponentName(item.modelId)" :arrowText="getEquipmentTitle(item.equipmentName)"
+                        :iconSize="item.size" :specialCondition="JSON.parse(item.specialCondition)"
+                        :style="getComponentStyle(item)" />
+                </div>
             </div>
         </div>
     </div>
@@ -68,6 +75,10 @@ import { useComponentHelper } from '@/hooks/useComponentHelper'
 import { updateZTPageConfig } from '@/api/dcs/configurePage';
 import { pageItems_Na2SO4 } from "@/config"
 import { useRoute } from 'vue-router'
+
+import { usePageScale } from '@/utils/dcs/usePageScale'
+const { pageRef } = usePageScale()
+
 const route = useRoute()
 const pageCode = route.name
 const title = pageItems_Na2SO4.find(item => item.code === pageCode).label
@@ -145,6 +156,7 @@ const {
 
 <style lang="scss" scoped>
 @import '@/assets/styles/dcs/hnyzConfiguratePage.scss';
+
 .page {
     width: 1920px;
     height: 1080px;

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

@@ -1,57 +1,64 @@
 <template>
-    <div class="page">
-        <HeaderComponent :title="title"></HeaderComponent>
-        <div class="content_page">
-            <PageDrawer :pages="pageItems_Na2SO4" class="page_drawer" />
-            <!-- 阀门 -->
-            <div class="valves">
-                <component v-for="item in deviceConfigGroup.VALVES" :key="item.id" :is="getComponentName(item.modelId)"
-                    :title="getEquipmentTitle(item.equipmentName)" :valveStatusArr="getDataArrByCode(item.code)"
-                    :rotateAngle="item.rotate || 0" :iconSize="item.size" :style="getComponentStyle(item)" />
-            </div>
-
-            <!-- 泵 -->
-            <div class="pumps">
-                <component v-for="item in deviceConfigGroup.PUMPS" :key="item.id" :is="getComponentName(item.modelId)"
-                    :title="getEquipmentTitle(item.title)" :pumpDataArr="pumpHelper.getDataArrByCode(item.code)"
-                    :isReverse="item.isReverse" :iconSize="item.size" :style="getComponentStyle(item)" />
-            </div>
-
-            <!-- 罐体 -->
-            <div class="tanks">
-                <component v-for="item in deviceConfigGroup.TANKS" :key="item.id" :is="getComponentName(item.modelId)"
-                    :title="getEquipmentTitle(item.title)" :iconSize="item.size" :iconWidth="item.width"
-                    :iconHeight="item.height" :style="getComponentStyle(item)" />
-            </div>
-
-            <!-- 传感器 -->
-            <div class="sensors">
-                <component v-for="item in deviceConfigGroup.SENSORS" :key="item.id" :is="getComponentName(item.modelId)"
-                    :title="getEquipmentTitle(item.equipmentName)" :sensorSize="item.size"
-                    :sensorValue="sensorHelper.getDataArrByCode(item.code)" :sensorWidth="item.width"
-                    :sensorHeight="item.height" :style="getComponentStyle(item)" />
-            </div>
-
-            <!-- 其他设备 -->
-            <div class="icon_others">
-                <component v-for="item in deviceConfigGroup.ICONS" :key="item.id" :is="getComponentName(item.modelId)"
-                    :iconSize="item.size" :iconClass="getIconClass(item.modelId)" :style="getComponentStyle(item)"
-                    :title="getEquipmentTitle(item.equipmentName)" />
-            </div>
-
-            <!-- 管道  -->
-            <div class="pipelines">
-                <component v-for="item in pipeConfig" :key="item.id" :is="getComponentName(item.modelId)"
-                    :pipeStatus="evaluateCondition(item.flowCondition, true)" :strokeWidth="item.pipeWidth"
-                    :style="getPipelineStyle(item, evaluateCondition(item.reverseCondition))"
-                    :class="getPipelineClass(item.pipeClass, getPipeType(item.dynamicPipelineCondition))" />
-            </div>
-
-            <!-- 大箭头指向 -->
-            <div class="arrows">
-                <component v-for="item in deviceConfigGroup.ARROWS" :key="item.id" :is="getComponentName(item.modelId)"
-                    :arrowText="getEquipmentTitle(item.equipmentName)" :iconSize="item.size"
-                    :specialCondition="JSON.parse(item.specialCondition)" :style="getComponentStyle(item)" />
+    <div class="preview">
+        <div ref="pageRef" class="page">
+            <HeaderComponent :title="title"></HeaderComponent>
+            <div class="content_page">
+                <PageDrawer :pages="pageItems_Na2SO4" class="page_drawer" />
+                <!-- 阀门 -->
+                <div class="valves">
+                    <component v-for="item in deviceConfigGroup.VALVES" :key="item.id"
+                        :is="getComponentName(item.modelId)" :title="getEquipmentTitle(item.equipmentName)"
+                        :valveStatusArr="getDataArrByCode(item.code)" :rotateAngle="item.rotate || 0"
+                        :iconSize="item.size" :style="getComponentStyle(item)" />
+                </div>
+
+                <!-- 泵 -->
+                <div class="pumps">
+                    <component v-for="item in deviceConfigGroup.PUMPS" :key="item.id"
+                        :is="getComponentName(item.modelId)" :title="getEquipmentTitle(item.title)"
+                        :pumpDataArr="pumpHelper.getDataArrByCode(item.code)" :isReverse="item.isReverse"
+                        :iconSize="item.size" :style="getComponentStyle(item)" />
+                </div>
+
+                <!-- 罐体 -->
+                <div class="tanks">
+                    <component v-for="item in deviceConfigGroup.TANKS" :key="item.id"
+                        :is="getComponentName(item.modelId)" :title="getEquipmentTitle(item.title)"
+                        :iconSize="item.size" :iconWidth="item.width" :iconHeight="item.height"
+                        :style="getComponentStyle(item)" />
+                </div>
+
+                <!-- 传感器 -->
+                <div class="sensors">
+                    <component v-for="item in deviceConfigGroup.SENSORS" :key="item.id"
+                        :is="getComponentName(item.modelId)" :title="getEquipmentTitle(item.equipmentName)"
+                        :sensorSize="item.size" :sensorValue="sensorHelper.getDataArrByCode(item.code)"
+                        :sensorWidth="item.width" :sensorHeight="item.height" :style="getComponentStyle(item)" />
+                </div>
+
+                <!-- 其他设备 -->
+                <div class="icon_others">
+                    <component v-for="item in deviceConfigGroup.ICONS" :key="item.id"
+                        :is="getComponentName(item.modelId)" :iconSize="item.size"
+                        :iconClass="getIconClass(item.modelId)" :style="getComponentStyle(item)"
+                        :title="getEquipmentTitle(item.equipmentName)" />
+                </div>
+
+                <!-- 管道  -->
+                <div class="pipelines">
+                    <component v-for="item in pipeConfig" :key="item.id" :is="getComponentName(item.modelId)"
+                        :pipeStatus="evaluateCondition(item.flowCondition, true)" :strokeWidth="item.pipeWidth"
+                        :style="getPipelineStyle(item, evaluateCondition(item.reverseCondition))"
+                        :class="getPipelineClass(item.pipeClass, getPipeType(item.dynamicPipelineCondition))" />
+                </div>
+
+                <!-- 大箭头指向 -->
+                <div class="arrows">
+                    <component v-for="item in deviceConfigGroup.ARROWS" :key="item.id"
+                        :is="getComponentName(item.modelId)" :arrowText="getEquipmentTitle(item.equipmentName)"
+                        :iconSize="item.size" :specialCondition="JSON.parse(item.specialCondition)"
+                        :style="getComponentStyle(item)" />
+                </div>
             </div>
         </div>
     </div>
@@ -67,6 +74,10 @@ import { useComponentHelper } from '@/hooks/useComponentHelper'
 import { updateZTPageConfig } from '@/api/dcs/configurePage';
 import { pageItems_Na2SO4 } from "@/config"
 import { useRoute } from 'vue-router'
+
+import { usePageScale } from '@/utils/dcs/usePageScale'
+const { pageRef } = usePageScale()
+
 const route = useRoute()
 const pageCode = route.name
 const title = pageItems_Na2SO4.find(item => item.code === pageCode).label
@@ -144,6 +155,7 @@ const {
 
 <style lang="scss" scoped>
 @import '@/assets/styles/dcs/hnyzConfiguratePage.scss';
+
 .page {
     width: 1920px;
     height: 1080px;

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

@@ -1,57 +1,64 @@
 <template>
-    <div class="page">
-        <HeaderComponent :title="title"></HeaderComponent>
-        <div class="content_page">
-            <PageDrawer :pages="pageItems_Na2SO4" class="page_drawer" />
-            <!-- 阀门 -->
-            <div class="valves">
-                <component v-for="item in deviceConfigGroup.VALVES" :key="item.id" :is="getComponentName(item.modelId)"
-                    :title="getEquipmentTitle(item.equipmentName)" :valveStatusArr="getDataArrByCode(item.code)"
-                    :rotateAngle="item.rotate || 0" :iconSize="item.size" :style="getComponentStyle(item)" />
-            </div>
-
-            <!-- 泵 -->
-            <div class="pumps">
-                <component v-for="item in deviceConfigGroup.PUMPS" :key="item.id" :is="getComponentName(item.modelId)"
-                    :title="getEquipmentTitle(item.title)" :pumpDataArr="pumpHelper.getDataArrByCode(item.code)"
-                    :isReverse="item.isReverse" :iconSize="item.size" :style="getComponentStyle(item)" />
-            </div>
-
-            <!-- 罐体 -->
-            <div class="tanks">
-                <component v-for="item in deviceConfigGroup.TANKS" :key="item.id" :is="getComponentName(item.modelId)"
-                    :title="getEquipmentTitle(item.title)" :iconSize="item.size" :iconWidth="item.width"
-                    :iconHeight="item.height" :style="getComponentStyle(item)" />
-            </div>
-
-            <!-- 传感器 -->
-            <div class="sensors">
-                <component v-for="item in deviceConfigGroup.SENSORS" :key="item.id" :is="getComponentName(item.modelId)"
-                    :title="getEquipmentTitle(item.equipmentName)" :sensorSize="item.size"
-                    :sensorValue="sensorHelper.getDataArrByCode(item.code)" :sensorWidth="item.width"
-                    :sensorHeight="item.height" :style="getComponentStyle(item)" />
-            </div>
-
-            <!-- 其他设备 -->
-            <div class="icon_others">
-                <component v-for="item in deviceConfigGroup.ICONS" :key="item.id" :is="getComponentName(item.modelId)"
-                    :iconSize="item.size" :iconClass="getIconClass(item.modelId)" :style="getComponentStyle(item)"
-                    :title="getEquipmentTitle(item.equipmentName)" />
-            </div>
-
-            <!-- 管道  -->
-            <div class="pipelines">
-                <component v-for="item in pipeConfig" :key="item.id" :is="getComponentName(item.modelId)"
-                    :pipeStatus="evaluateCondition(item.flowCondition, true)" :strokeWidth="item.pipeWidth"
-                    :style="getPipelineStyle(item, evaluateCondition(item.reverseCondition))"
-                    :class="getPipelineClass(item.pipeClass, getPipeType(item.dynamicPipelineCondition))" />
-            </div>
-
-            <!-- 大箭头指向 -->
-            <div class="arrows">
-                <component v-for="item in deviceConfigGroup.ARROWS" :key="item.id" :is="getComponentName(item.modelId)"
-                    :arrowText="getEquipmentTitle(item.equipmentName)" :iconSize="item.size"
-                    :specialCondition="JSON.parse(item.specialCondition)" :style="getComponentStyle(item)" />
+    <div class="preview">
+        <div ref="pageRef" class="page">
+            <HeaderComponent :title="title"></HeaderComponent>
+            <div class="content_page">
+                <PageDrawer :pages="pageItems_Na2SO4" class="page_drawer" />
+                <!-- 阀门 -->
+                <div class="valves">
+                    <component v-for="item in deviceConfigGroup.VALVES" :key="item.id"
+                        :is="getComponentName(item.modelId)" :title="getEquipmentTitle(item.equipmentName)"
+                        :valveStatusArr="getDataArrByCode(item.code)" :rotateAngle="item.rotate || 0"
+                        :iconSize="item.size" :style="getComponentStyle(item)" />
+                </div>
+
+                <!-- 泵 -->
+                <div class="pumps">
+                    <component v-for="item in deviceConfigGroup.PUMPS" :key="item.id"
+                        :is="getComponentName(item.modelId)" :title="getEquipmentTitle(item.title)"
+                        :pumpDataArr="pumpHelper.getDataArrByCode(item.code)" :isReverse="item.isReverse"
+                        :iconSize="item.size" :style="getComponentStyle(item)" />
+                </div>
+
+                <!-- 罐体 -->
+                <div class="tanks">
+                    <component v-for="item in deviceConfigGroup.TANKS" :key="item.id"
+                        :is="getComponentName(item.modelId)" :title="getEquipmentTitle(item.title)"
+                        :iconSize="item.size" :iconWidth="item.width" :iconHeight="item.height"
+                        :style="getComponentStyle(item)" />
+                </div>
+
+                <!-- 传感器 -->
+                <div class="sensors">
+                    <component v-for="item in deviceConfigGroup.SENSORS" :key="item.id"
+                        :is="getComponentName(item.modelId)" :title="getEquipmentTitle(item.equipmentName)"
+                        :sensorSize="item.size" :sensorValue="sensorHelper.getDataArrByCode(item.code)"
+                        :sensorWidth="item.width" :sensorHeight="item.height" :style="getComponentStyle(item)" />
+                </div>
+
+                <!-- 其他设备 -->
+                <div class="icon_others">
+                    <component v-for="item in deviceConfigGroup.ICONS" :key="item.id"
+                        :is="getComponentName(item.modelId)" :iconSize="item.size"
+                        :iconClass="getIconClass(item.modelId)" :style="getComponentStyle(item)"
+                        :title="getEquipmentTitle(item.equipmentName)" />
+                </div>
+
+                <!-- 管道  -->
+                <div class="pipelines">
+                    <component v-for="item in pipeConfig" :key="item.id" :is="getComponentName(item.modelId)"
+                        :pipeStatus="evaluateCondition(item.flowCondition, true)" :strokeWidth="item.pipeWidth"
+                        :style="getPipelineStyle(item, evaluateCondition(item.reverseCondition))"
+                        :class="getPipelineClass(item.pipeClass, getPipeType(item.dynamicPipelineCondition))" />
+                </div>
+
+                <!-- 大箭头指向 -->
+                <div class="arrows">
+                    <component v-for="item in deviceConfigGroup.ARROWS" :key="item.id"
+                        :is="getComponentName(item.modelId)" :arrowText="getEquipmentTitle(item.equipmentName)"
+                        :iconSize="item.size" :specialCondition="JSON.parse(item.specialCondition)"
+                        :style="getComponentStyle(item)" />
+                </div>
             </div>
         </div>
     </div>
@@ -67,6 +74,10 @@ import { useComponentHelper } from '@/hooks/useComponentHelper'
 import { updateZTPageConfig } from '@/api/dcs/configurePage';
 import { pageItems_Na2SO4 } from "@/config"
 import { useRoute } from 'vue-router'
+
+import { usePageScale } from '@/utils/dcs/usePageScale'
+const { pageRef } = usePageScale()
+
 const route = useRoute()
 const pageCode = route.name
 const title = pageItems_Na2SO4.find(item => item.code === pageCode).label
@@ -145,6 +156,7 @@ const {
 
 <style lang="scss" scoped>
 @import '@/assets/styles/dcs/hnyzConfiguratePage.scss';
+
 .page {
     width: 1920px;
     height: 1080px;

ui/src/views/monitor/job/index.vue

@@ -98,6 +98,16 @@
          </el-table-column>
          <el-table-column label="调用目标字符串" align="center" prop="invokeTarget" :show-overflow-tooltip="true" />
          <el-table-column label="cron执行表达式" align="center" prop="cronExpression" :show-overflow-tooltip="true" />
+         <el-table-column label="日志" align="center">
+            <template #default="scope">
+               <el-switch
+                  v-model="scope.row.saveLog"
+                  :active-value="true"
+                  :inactive-value="false"
+                  @change="handleSaveLogChange(scope.row)"
+               ></el-switch>
+            </template>
+         </el-table-column>
          <el-table-column label="状态" align="center">
             <template #default="scope">
                <el-switch