feat(configuratePage):响应式页面

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

@@ -64,6 +64,7 @@
                     :arrowText="getEquipmentTitle(item.equipmentName)" :iconSize="item.size"
                     :specialCondition="JSON.parse(item.specialCondition)" :style="getComponentStyle(item)" />
             </div>
+            </div>
         </div>
     </div>
 </template>

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

@@ -4,7 +4,7 @@
             <HeaderComponent :title="title"></HeaderComponent>
             <div class="content_page">
                 <PageDrawer :pages="pageItems_Na2SO4" class="page_drawer" />
-                <PageSwitcher class="page_switcher"/>
+                <PageSwitcher class="page_switcher" />
                 <!-- 阀门 -->
                 <div class="valves">
                     <component v-for="item in deviceConfigGroup.VALVES" :key="item.id"
@@ -13,48 +13,54 @@
                         :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="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="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="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="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="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="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>
@@ -148,6 +154,7 @@ const {
 
 <style lang="scss" scoped>
 @import '@/assets/styles/dcs/hnyzConfiguratePage.scss';
+
 .page {
     width: 1920px;
     height: 1080px;

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

@@ -4,7 +4,7 @@
             <HeaderComponent :title="title"></HeaderComponent>
             <div class="content_page">
                 <PageDrawer :pages="pageItems_Na2SO4" class="page_drawer" />
-                <PageSwitcher class="page_switcher"/>
+                <PageSwitcher class="page_switcher" />
                 <!-- 阀门 -->
                 <div class="valves">
                     <component v-for="item in deviceConfigGroup.VALVES" :key="item.id"
@@ -13,48 +13,53 @@
                         :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="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="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="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="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="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="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>
@@ -149,6 +154,7 @@ const {
 
 <style lang="scss" scoped>
 @import '@/assets/styles/dcs/hnyzConfiguratePage.scss';
+
 .page {
     // width: 100%;
     // height: 100%;

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

@@ -4,7 +4,7 @@
             <HeaderComponent :title="title"></HeaderComponent>
             <div class="content_page">
                 <PageDrawer :pages="pageItems_Na2SO4" class="page_drawer" />
-                <PageSwitcher class="page_switcher"/>
+                <PageSwitcher class="page_switcher" />
                 <!-- 阀门 -->
                 <div class="valves">
                     <component v-for="item in deviceConfigGroup.VALVES" :key="item.id"
@@ -13,48 +13,53 @@
                         :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="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="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="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>
+                <!-- 其他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="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="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>

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

@@ -4,7 +4,7 @@
             <HeaderComponent :title="title"></HeaderComponent>
             <div class="content_page">
                 <PageDrawer :pages="pageItems_Na2SO4" class="page_drawer" />
-                <PageSwitcher class="page_switcher"/>
+                <PageSwitcher class="page_switcher" />
                 <!-- 阀门 -->
                 <div class="valves">
                     <component v-for="item in deviceConfigGroup.VALVES" :key="item.id"
@@ -13,48 +13,53 @@
                         :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="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="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="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="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="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="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>

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

@@ -1,59 +1,65 @@
 <template>
     <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)" />
+            <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>
@@ -150,6 +156,7 @@ const {
 
 <style lang="scss" scoped>
 @import '@/assets/styles/dcs/hnyzConfiguratePage.scss';
+
 .page {
     width: 1920px;
     height: 1080px;