Merge remote-tracking branch 'origin/master'

ui/src/components/HnyzDcs/ArrowComponent.vue

@@ -1,7 +1,7 @@
 <template>
     <div class="arrow_default" :style="arrowStyle" @click="handleClick">
         <div class="arrow_text" :style="getFontSize" v-if="!props.iconFirst">{{ props.arrowText }}</div>
-        <i class="icon iconfont icon-rightArrow arrow_icon" :style="{ transform: getArrowRotation }"
+        <i class="icon iconfont icon-rightArrow arrow_icon" :style="arrowIconStyle"
             :class="{ can_click: !!props.linkUrl }"></i>
         <div class="arrow_text" :style="getFontSize" v-if="props.iconFirst">{{ props.arrowText }}</div>
     </div>
@@ -39,6 +39,11 @@ const props = defineProps({
         type: Number,
         default: 30,
     },
+    //图标大小
+    iconSize: {
+        type: Number,
+        default: 100,
+    },
 })
 
 // 箭头容器样式（flex布局）
@@ -50,15 +55,15 @@ const arrowStyle = computed(() => ({
 }))
 
 // 箭头方向转换
-const getArrowRotation = computed(() => {
-    const map = {
+const arrowIconStyle = computed(() => ({
+    fontSize: `${props.iconSize}px`,
+    transform: {
         up: 'rotate(-90deg)',
         down: 'rotate(90deg)',
         left: 'rotate(180deg)',
         right: 'rotate(0deg)',
-    }
-    return map[props.arrowDir] || 'rotate(0deg)'
-})
+    }[props.arrowDir] || 'rotate(0deg)',
+}))
 
 // 字体大小
 const getFontSize = computed(() => ({

ui/src/components/HnyzDcs/ETypeTankValves3Component.vue

@@ -0,0 +1,225 @@
+<template>
+    <div class="tank_valves" :style="getTankBodyStyle">
+        <!-- 换热器 温度，搅拌-->
+        <ETypeTank :title="title" :tempValue="tempValue" :fanStatus="fanStatus" :iconWidth="iconWidth"
+            :iconHeight="iconHeight" :iconSize="iconSize" />
+        <!-- 阀门进度 -->
+        <div class="valve_progress">
+            <!-- 左1 -->
+            <ValveProgress :iconSize="valveIconSize" :title="valveNames[0]" :pipeLength="490" :pipeLeftOffset="-310"
+                :valveStatusArr="initValveStatusArr" progressType="steam" :pipeStatus="initPipeStatus"
+                class="valve_progress1" />
+            <!--  左2 -->
+            <ValveProgress :iconSize="valveIconSize" :title="valveNames[1]" :pipeLength="235" :pipeLeftOffset="-83"
+                :valveStatusArr="initValveStatusArr" progressType="steam" :pipeStatus="initPipeStatus"
+                class="valve_progress2" />
+            <!-- 左3  -->
+            <ValveProgress :iconSize="valveIconSize" :title="valveNames[2]" :pipeLength="260" :pipeLeftOffset="-50"
+                :valveStatusArr="initValveStatusArr" progressType="steam" :pipeStatus="initPipeStatus"
+                :pipeReverse="true" class="valve_progress3" />
+            <!-- 右 1 -->
+            <ValveProgress :iconSize="valveIconSize" :title="valveNames[3]" :pipeLength="336" :pipeLeftOffset="-136"
+                :valveStatusArr="initValveStatusArr" progressType="steam" :pipeStatus="initPipeStatus"
+                :pipeReverse="true" class="valve_progress4" />
+            <!-- 右 2 -->
+            <ValveProgress :iconSize="valveIconSize" :title="valveNames[4]" :pipeLength="265" :pipeLeftOffset="-110"
+                :valveStatusArr="initValveStatusArr" progressType="steam" :pipeStatus="initPipeStatus"
+                class="valve_progress5" />
+            <!-- 右 3 -->
+            <ValveProgress :iconSize="valveIconSize" :title="valveNames[5]" :pipeLength="265" :pipeLeftOffset="-110"
+                :valveStatusArr="initValveStatusArr" progressType="steam" :pipeStatus="initPipeStatus"
+                class="valve_progress6" />
+            <!-- 右3-泵后面的阀门 -->
+            <ValveProgress :iconSize="valveIconSize" :title="valveNames[6]" :pipeLength="385" :pipeLeftOffset="-205"
+                :valveStatusArr="initValveStatusArr" progressType="steam" :pipeStatus="initPipeStatus" :rotateAngle="90"
+                class="valve_progress7 rotate_90" />
+        </div>
+        <!-- 泵进度 -->
+        <div class="pump_progress">
+            <PumpProgress :title="pumpNames[0]" :pumpDataArr="[1, 10]" :iconSize="pumpIconSize" :showPipe="true"
+                :pipeType="steam" pumpDirection="R" :pipeLength="120" class="pump_progress1" />
+            <PumpProgress :title="pumpNames[1]" :pumpDataArr="[1, 10]" :iconSize="pumpIconSize" :showPipe="true"
+                :pipeType="steam" pumpDirection="L" :pipeLength="157" class="pump_progress2" />
+            <PumpProgress :title="pumpNames[2]" :pumpDataArr="[1, 10]" :iconSize="pumpIconSize" :showPipe="true"
+                :pipeType="steam" pumpDirection="L" :pipeLength="60" class="pump_progress3" />
+        </div>
+        <!-- 拓展管道 -->
+        <div class="pipe_extend" v-if="pumpNames[2]">
+            <Pipe :pipeStatus="initPipeStatus" :strokeWidth="pipeWidth" class="progress_steam progress_pos1" />
+        </div>
+    </div>
+</template>
+
+<script setup>
+import ETypeTank from '@/components/HnyzDcs/ETypeTankComponent.vue';
+import ValveProgress from '@/components/DCS/ValveProgressComponent.vue';
+import PumpProgress from '@/components/DCS/PumpComponent.vue';
+import Pipe from '@/components/HnyzDcs/PipeComponent.vue';
+
+import { computed } from 'vue'
+const initValveStatusArr = [true]
+const initPipeStatus = true
+const props = defineProps({
+    iconSize: {//图标大小
+        type: Number,
+        default: 200,
+    },
+    title: {//罐名
+        type: String,
+    },
+    iconWidth: {//图标宽度
+        type: Number,
+    },
+    iconHeight: {//图标高度
+        type: Number,
+    },
+    tempValue: {//temp
+        type: Number,
+        default: null
+    },
+    fanStatus: {//风扇状态
+        type: Boolean,
+        default: undefined,
+    },
+})
+
+//默认阀门名称数组
+const defaultValveNames = new Array(6).fill('ACV_default')
+//泵默认名称
+const defaultPumpNames = new Array(3).fill('P_default')
+
+// 阀门名称映射表
+const valveNameArr = {
+    'E6002': ['ACV6101', 'ACV6102', 'ACV6103', 'ACV6104', 'ACV6105', ''],
+    'E6003': ['ACV6106', 'ACV6107', 'ACV6108', 'ACV6109', 'ACV6110', ''],
+    'E6004': ['ACV6114', 'ACV6113', '', 'ACV6117', 'ACV6118', 'ACV6119', 'ACV6120'],
+    'E6005': ['ACV6123', '', '', 'ACV6126', 'ACV6127', 'ACV6128', 'ACV6129'],
+    'E6006': ['ACV6132', '', '', 'ACV6135', 'ACV6136', 'ACV6137', 'ACV6138'],
+    'E6007': ['ACV6139', 'ACV6140', 'ACV6141', 'ACV6142', 'ACV6143', 'ACV6144'],
+    'E6008': ['', '', '', '', '', '']
+}
+//泵名称映射表
+const pumpNameArr = {
+    'E6002': ['P6106', 'P6102', ''],
+    'E6003': ['P6103', 'P6104', ''],
+    'E6004': ['', 'P6106', 'P6107'],
+    'E6005': ['', 'P6109', 'P6110'],
+    'E6006': ['', 'P6112', 'P6113'],
+    'E6007': ['P6114', 'P6115', 'P6116'],
+    'E6008': ['', '', '']
+}
+
+//阀门名称数组,根据罐名来匹配
+const valveNames = computed(() => {
+    return valveNameArr[props.title] || defaultValveNames
+})
+//泵名称
+const pumpNames = computed(() => {
+    return pumpNameArr[props.title] || defaultPumpNames
+})
+
+//罐体样式
+const getTankBodyStyle = computed(() => ({
+    width: `${props.iconWidth ?? props.iconSize}px`,
+    height: `${props.iconHeight ?? props.iconSize}px`,
+}))
+
+//阀门icon大小（罐子200-阀门37.5）
+const valveIconSize = computed(() => {
+    return (props.iconWidth ?? props.iconSize) * 0.18755;
+});
+
+//泵icon大小（罐子200-泵60）
+const pumpIconSize = computed(() => {
+    return (props.iconWidth ?? props.iconSize) * 0.3;
+});
+
+//管道宽度
+const pipeWidth = computed(() => {
+    return (props.iconWidth ?? props.iconSize) * 0.03;
+});
+</script>
+
+<style scoped lang="scss">
+.tank_valves {
+    position: relative;
+    z-index: 10;
+
+    .valve_progress {
+        .valve_progress1 {
+            position: absolute;
+            top: 3%;
+            left: 0%;
+        }
+
+        .valve_progress2 {
+            position: absolute;
+            top: 50.5%;
+            left: 0%;
+        }
+
+        .valve_progress3 {
+            position: absolute;
+            top: 83%;
+            left: 0%;
+        }
+
+        .valve_progress4 {
+            position: absolute;
+            top: 3%;
+            left: 95%;
+        }
+
+        .valve_progress5 {
+            position: absolute;
+            top: 41%;
+            left: 95%;
+        }
+
+        .valve_progress6 {
+            position: absolute;
+            top: 83%;
+            left: 95%;
+        }
+
+        .valve_progress7 {
+            position: absolute;
+            top: 118%;
+            left: 185%;
+        }
+    }
+
+    .pump_progress {
+        .pump_progress1 {
+            position: absolute;
+            top: 94.5%;
+            left: -36%;
+            transform: translate(-50%, -50%);
+        }
+
+        .pump_progress2 {
+            position: absolute;
+            top: 52.7%;
+            left: 134%;
+            transform: translate(-50%, -50%);
+        }
+
+        .pump_progress3 {
+            position: absolute;
+            top: 94.5%;
+            left: 134%;
+            transform: translate(-50%, -50%);
+        }
+    }
+
+    .pipe_extend {
+        .progress_pos1 {
+            position: absolute;
+            top: 70%;
+            left: 130%;
+            width: 53%;
+        }
+    }
+
+}
+</style>

ui/src/components/HnyzDcs/GorXTypeTankValvesComponent.vue

@@ -0,0 +1,91 @@
+<template>
+    <!-- G或X型罐体 -->
+    <div class="tank_body">
+        <!-- 罐体 -->
+        <i class="icon iconfont-hnyz-colour icon-hnyz-colourheatExchanger tank" :style="getTankStyle">
+            <!-- 标题 -->
+            <div class="tank_title" :style="{ fontSize: `${iconSize * 0.15}px` }" v-if="title">{{ title }}</div>
+        </i>
+        <Pipe :pipeStatus="pipeStatus" :strokeWidth="strokeWidth" class="pipe_pos rotate_90 progress_steam" :style="{width: `${iconHeight * 1.35}px`}"/>
+    </div>
+</template>
+
+<script setup>
+import Pipe from '@/components/HnyzDcs/PipeComponent.vue'
+import { computed } from 'vue'
+
+const props = defineProps({
+    iconSize: {//图标大小
+        type: Number,
+        default: 200,
+    },
+    title: {//罐名
+        type: String,
+    },
+    iconWidth: {//图标宽度
+        type: Number,
+    },
+    iconHeight: {//图标高度
+        type: Number,
+    },
+    pipeStatus: {//管道状态
+        type: Boolean,
+        default: false,
+    },
+    strokeWidth: {//管道宽度
+        type: Number,
+    }
+})
+//解构
+const { iconSize, title, iconWidth, iconHeight } = props
+
+// 罐子样式
+const getTankStyle = computed(() => {
+    const style = {
+        fontSize: iconSize + 'px',
+        display: 'block',
+        margin: '0 auto',
+    }
+    //根据传进来的iconWidth和iconHeight来控制图标的大小
+    const scaleX = iconWidth ? iconWidth / iconSize : 1
+    const scaleY = iconHeight ? iconHeight / iconSize : 1
+
+    if (scaleX !== 1 || scaleY !== 1) {
+        style.transform = `scale(${scaleX}, ${scaleY})`
+        style.transformOrigin = 'center center'
+    }
+
+    return style
+})
+
+</script>
+
+<style scoped lang="scss">
+//水位罐
+.tank_body {
+    text-align: center;
+    position: relative;
+
+    .tank {
+        position: relative;
+        z-index: 10;
+
+        //罐子名称
+        .tank_title {
+            position: absolute;
+            top: 80%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            color: #e65100;
+            font-weight: bold;
+        }
+    }
+
+    .pipe_pos {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        width: 200%;
+    }
+}
+</style>

ui/src/components/HnyzDcs/GorXTypeTanksValvesComponent.vue

@@ -0,0 +1,273 @@
+<template>
+    <div class="tank_valves" :style="getTankBodyStyle">
+        <!-- G或X型罐体 -->
+        <div class="abreastTanks">
+            <GorXTypeTankValves :title="tankNames[0]" :iconWidth="iconWidth" :iconHeight="iconHeight"
+                :iconSize="iconSize" :strokeWidth="pipeWidth" :pipeStatus="initPipeStatus" />
+            <GorXTypeTankValves :title="tankNames[1]" :iconWidth="iconWidth" :pipeStatus="initPipeStatus"
+                :strokeWidth="pipeWidth" :iconHeight="iconHeight" :iconSize="iconSize" />
+            <GorXTypeTankValves :title="tankNames[2]" :iconWidth="iconWidth" :pipeStatus="initPipeStatus"
+                :strokeWidth="pipeWidth" :iconHeight="iconHeight" :iconSize="iconSize" />
+        </div>
+
+        <!-- 阀门进度 -->
+        <div class="valve_progress">
+            <!-- 左下 -->
+            <ValveProgress :iconSize="valveIconSize" :title="valveNames[0]" :pipeLength="1000" :pipeLeftOffset="-223"
+                :valveStatusArr="initValveStatusArr" progressType="steam" :pipeStatus="initPipeStatus"
+                class="valve_progress1" />
+            <!-- 左上 -->
+            <ValveProgress :iconSize="valveIconSize" :title="valveNames[1]" :pipeLength="460" :pipeLeftOffset="-223"
+                :valveStatusArr="initValveStatusArr" progressType="steam" :pipeStatus="initPipeStatus"
+                class="valve_progress2" />
+            <!-- 右下 -->
+            <ValveProgress :iconSize="valveIconSize" :title="valveNames[2]" :pipeLength="250" :pipeLeftOffset="-52"
+                :valveStatusArr="initValveStatusArr" progressType="steam" :pipeStatus="initPipeStatus"
+                class="valve_progress3" />
+            <!-- 右上 -->
+            <ValveProgress :iconSize="valveIconSize" :title="valveNames[3]" :pipeLength="250" :pipeLeftOffset="-52"
+                :valveStatusArr="initValveStatusArr" progressType="steam" :pipeStatus="initPipeStatus"
+                class="valve_progress4" />
+        </div>
+        <!-- 泵进度 -->
+        <div class="pump_progress">
+            <PumpProgress :title="pumpNames[0]" :pumpDataArr="[1, 10]" :iconSize="pumpIconSize" :showPipe="false"
+                :pipeType="steam" pumpDirection="L" :pipeLength="120" class="pump_progress1" />
+        </div>
+        <!-- 拓展管道 -->
+        <div class="pipe_extend">
+            <!-- 下方流进泵的拓展管道  -->
+            <Pipe :pipeStatus="initPipeStatus" :strokeWidth="pipeWidth" class="progress_steam progress_pos1" />
+            <!-- 泵向上拓展管道  -->
+            <Pipe :pipeStatus="initPipeStatus" :strokeWidth="pipeWidth"
+                class="progress_steam progress_pos2 rotate_90" />
+            <Pipe :pipeStatus="initPipeStatus" :strokeWidth="pipeWidth" class="progress_steam progress_pos3 rotate_90"
+                v-if="valveNames[3]" />
+            <!-- 左上阀门联通管道 -->
+            <Pipe :pipeStatus="initPipeStatus" :strokeWidth="pipeWidth"
+                class="progress_steam progress_pos4 rotate_270" />
+        </div>
+        <!-- 大箭头指向 -->
+        <div class="arrows">
+            <Arrow arrowDir="right" arrowText="人工降雨" :iconSize="65" :fontSize="10" class="arrow_pos1" />
+            <Arrow arrowDir="right" arrowText="人工降雨" :iconSize="65" :fontSize="10" class="arrow_pos2" v-if="valveNames[3]"/>
+            <Arrow arrowDir="right" arrowText="外排" :iconSize="65" :fontSize="10" class="arrow_pos3" v-if="valveNames[2]"/>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import GorXTypeTankValves from '@/components/HnyzDcs/GorXTypeTankValvesComponent.vue';
+import ValveProgress from '@/components/DCS/ValveProgressComponent.vue';
+import PumpProgress from '@/components/DCS/PumpComponent.vue';
+import Pipe from '@/components/HnyzDcs/PipeComponent.vue';
+import Arrow from '@/components/HnyzDcs/ArrowComponent.vue';
+
+import { computed } from 'vue'
+const initValveStatusArr = [true]
+const initPipeStatus = true
+const props = defineProps({
+    iconSize: {//图标大小
+        type: Number,
+        default: 200,
+    },
+    title: {//罐名
+        type: String,
+    },
+    iconWidth: {//图标宽度
+        type: Number,
+    },
+    iconHeight: {//图标高度
+        type: Number,
+    },
+    tempValue: {//temp
+        type: Number,
+        default: null
+    },
+    fanStatus: {//风扇状态
+        type: Boolean,
+        default: undefined,
+    },
+    tankType: {//罐型
+        type: String,
+        default: 'G'
+    },
+})
+
+//默认阀门名称数组
+const defaultValveNames = new Array(4).fill('ACV_default')
+//泵默认名称
+const defaultPumpNames = new Array(1).fill('P_default')
+
+// 阀门名称映射表
+const valveNameArr = {
+    'G': ['QQF1004', 'QQF1018', '', ''],
+    'X': ['QQF1005', 'QQF1019', 'QQF1006', 'QQF1007']
+
+}
+//泵名称映射表
+const pumpNameArr = {
+    'G': ['P1005'],
+    'X': ['P1006']
+}
+//罐子名称映射表
+const tankNameArr = {
+    'G': ['G1001', 'G1002', 'G1003'],
+    'X': ['X1001', 'X1002', 'X1003']
+}
+
+
+//阀门名称数组,根据罐名来匹配
+const valveNames = computed(() => {
+    return valveNameArr[props.tankType] || defaultValveNames
+})
+//泵名称
+const pumpNames = computed(() => {
+    return pumpNameArr[props.tankType] || defaultPumpNames
+})
+//罐名数组
+const tankNames = computed(() => {
+    return tankNameArr[props.tankType] || []
+})
+//罐体的宽高
+const tankBodyWidth = computed(() => {
+    return props.iconWidth ?? props.iconSize
+})
+const tankBodyHeight = computed(() => {
+    return props.iconHeight ?? props.iconSize
+})
+//罐体样式
+const getTankBodyStyle = computed(() => ({
+    width: `${tankBodyWidth.value * 3}px`,
+    height: `${tankBodyHeight.value}px`,
+}))
+
+//阀门icon大小（罐子150-阀门30）
+const valveIconSize = computed(() => {
+    return tankBodyHeight.value * 0.2;
+});
+
+//泵icon大小（罐子150-泵48）
+const pumpIconSize = computed(() => {
+    return tankBodyHeight.value * 0.32;
+});
+
+//管道宽度(罐子150-管道4.8)
+const pipeWidth = computed(() => {
+    return tankBodyHeight.value * 0.032;
+});
+</script>
+
+<style scoped lang="scss">
+.tank_valves {
+
+    position: relative;
+    z-index: 10;
+
+    .abreastTanks {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        width: 100%;
+        height: 100%;
+    }
+
+    .valve_progress {
+        .valve_progress1 {
+            position: absolute;
+            top: -29%;
+            left: 0%;
+        }
+
+        .valve_progress2 {
+            position: absolute;
+            top: -59%;
+            left: 0%;
+        }
+
+        .valve_progress3 {
+            position: absolute;
+            top: -29%;
+            left: 108%;
+        }
+
+        .valve_progress4 {
+            position: absolute;
+            top: -59%;
+            left: 108%;
+        }
+
+    }
+
+    .pump_progress {
+        .pump_progress1 {
+            position: absolute;
+            top: 116%;
+            left: 104%;
+            transform: translate(-50%, -50%);
+        }
+
+    }
+
+    .pipe_extend {
+        .progress_pos1 {
+            position: absolute;
+            top: 115%;
+            left: 5%;
+            width: 100%;
+        }
+
+        .progress_pos2 {
+            position: absolute;
+            top: 45%;
+            left: 102.5%;
+            width: 78%;
+        }
+
+        .progress_pos3 {
+            position: absolute;
+            top: -32%;
+            left: 102.5%;
+            width: 19%;
+        }
+
+        .progress_pos4 {
+            position: absolute;
+            top: -32%;
+            left: -27%;
+            width: 19%;
+        }
+    }
+
+    .arrows {
+        .arrow_pos1 {
+            position: absolute;
+            top: -47%;
+            left: 48%;
+            transform: translate(-50%, -50%);
+        }
+
+        .arrow_pos2 {
+            position: absolute;
+            top: -47%;
+            left: 146%;
+            transform: translate(-50%, -50%);
+        }
+
+        .arrow_pos3 {
+            position: absolute;
+            top: -16%;
+            left: 146%;
+            transform: translate(-50%, -50%);
+        }
+
+        .arrow_pos4 {
+            position: absolute;
+            top: 26%;
+            left: 90%;
+            transform: translate(-50%, -50%);
+        }
+    }
+
+}
+</style>

ui/src/components/HnyzDcs/HeatExchangeWaterTankComponent.vue

@@ -0,0 +1,90 @@
+<template>
+    <!-- 换热器水罐 -->
+    <div class="tank_body" :style="getTankBodyStyle">
+        <!-- 罐体 -->
+        <i class="icon iconfont-hnyz-colour icon-hnyz-colourWaterTank tank" :style="getTankStyle">
+            <!-- 标题 -->
+            <div class="tank_title" :style="{ fontSize: `${iconSize * 0.15}px` }" v-if="title">{{ title }}</div>
+        </i>
+    </div>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+
+const props = defineProps({
+    tempValue: {//temp
+        type: Number,
+        default: null
+    },
+    fanStatus: {//风扇状态
+        type: Boolean,
+    },
+    iconSize: {//图标大小
+        type: Number,
+        default: 200,
+    },
+    title: {//罐名
+        type: String,
+    },
+    iconWidth: {//图标宽度
+        type: Number,
+    },
+    iconHeight: {//图标高度
+        type: Number,
+    },
+})
+//解构
+const { iconSize, title, iconWidth, iconHeight } = props
+
+const width = computed(() => props.iconWidth ?? props.iconSize)
+const height = computed(() => props.iconHeight ?? props.iconSize)
+
+//罐体样式
+const getTankBodyStyle = computed(() => ({
+    width: `${width.value}px`,
+    height: `${height.value}px`,
+    fontSize: `${iconSize}px`,
+}))
+
+
+// 罐子样式
+const getTankStyle = computed(() => {
+    const style = {
+        fontSize: iconSize + 'px',
+        display: 'inline-block'
+    }
+    //根据传进来的iconWidth和iconHeight来控制图标的大小
+    const scaleX = iconWidth ? iconWidth / iconSize : 1
+    const scaleY = iconHeight ? iconHeight / iconSize : 1
+
+    if (scaleX !== 1 || scaleY !== 1) {
+        style.transform = `scale(${scaleX}, ${scaleY})`
+    }
+    return style
+})
+
+</script>
+
+<style scoped lang="scss">
+//水位罐
+.tank_body {
+    text-align: center;
+    position: relative;
+
+    .tank {
+        position: relative;
+        z-index: 10;
+
+        //罐子名称
+        .tank_title {
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            color: #e65100;
+            font-weight: bold;
+        }
+    }
+}
+</style>

ui/src/components/HnyzDcs/HeatExchangeWaterTankValvesComponent.vue

@@ -0,0 +1,202 @@
+<template>
+    <div class="tank_valves" :style="getTankBodyStyle">
+        <!-- 换热器水箱 泵-->
+        <HeatExchangeWaterTank :title="title" :tempValue="tempValue" :fanStatus="fanStatus" :iconWidth="iconWidth"
+            :iconHeight="iconHeight" :iconSize="iconSize" />
+        <!-- 阀门进度 -->
+        <div class="valve_progress">
+            <!-- 左1 -->
+            <ValveProgress :iconSize="valveIconSize" :title="valveNames[0]" :pipeLength="240" :pipeLeftOffset="-50"
+                :valveStatusArr="initValveStatusArr" progressType="steam" :pipeStatus="initPipeStatus"
+                class="valve_progress1" />
+            <!-- 下 -->
+            <ValveProgress :iconSize="valveIconSize" :title="valveNames[1]" :pipeLength="400" :pipeLeftOffset="-50"
+                :valveStatusArr="initValveStatusArr" progressType="steam" :pipeStatus="initPipeStatus" :rotateAngle="90"
+                :pipeReverse="true" class="valve_progress2 rotate_90" />
+            <!-- 右1  -->
+            <ValveProgress :iconSize="valveIconSize" :title="valveNames[2]" :pipeLength="200" :pipeLeftOffset="-50"
+                :valveStatusArr="initValveStatusArr" progressType="steam" :pipeStatus="initPipeStatus"
+                class="valve_progress3" />
+            <!-- 泵上阀门 -->
+            <ValveProgress :iconSize="valveIconSize" :title="valveNames[3]" :rotateAngle="90" :pipeLength="200"
+                :pipeLeftOffset="-50" :valveStatusArr="initValveStatusArr" progressType="steam"
+                :pipeStatus="initPipeStatus" :pipeReverse="true" class="valve_progress4 rotate_90" />
+        </div>
+        <!-- 泵进度 -->
+        <div class="pump_progress">
+            <PumpProgress :title="pumpNames[0]" :pumpDataArr="[1, 10]" :iconSize="pumpIconSize" :pipeType="steam"
+                pumpDirection="L" class="pump_progress1" />
+        </div>
+        <!-- 拓展管道 -->
+        <div class="pipes">
+            <!-- 上 -->
+            <Pipe :pipeStatus="initPipeStatus" :strokeWidth="pipeWidth"
+                class="progress_steam progress_pos1 rotate_90" />
+            <!-- 左  -->
+            <Pipe :pipeStatus="initPipeStatus" :strokeWidth="pipeWidth"
+                class="progress_steam progress_pos2 rotate_270" />
+            <!-- 右上阀门拓展管道 -->
+            <Pipe :pipeStatus="initPipeStatus" :strokeWidth="pipeWidth"
+                class="progress_steam progress_pos3 rotate_180" />
+            <Pipe :pipeStatus="initPipeStatus" :strokeWidth="pipeWidth"
+                class="progress_steam progress_pos4 rotate_270" />
+
+        </div>
+    </div>
+</template>
+
+<script setup>
+import HeatExchangeWaterTank from '@/components/HnyzDcs/HeatExchangeWaterTankComponent.vue';
+import ValveProgress from '@/components/DCS/ValveProgressComponent.vue';
+import Pipe from '@/components/HnyzDcs/PipeComponent.vue';
+import PumpProgress from '@/components/DCS/PumpComponent.vue';
+import { computed } from 'vue'
+const initValveStatusArr = [true]
+const initPipeStatus = true
+const props = defineProps({
+    iconSize: {//图标大小
+        type: Number,
+        default: 200,
+    },
+    title: {//罐名
+        type: String,
+    },
+    iconWidth: {//图标宽度
+        type: Number,
+    },
+    iconHeight: {//图标高度
+        type: Number,
+    },
+    tempValue: {//temp
+        type: Number,
+        default: null
+    },
+    fanStatus: {//风扇状态
+        type: Boolean,
+        default: undefined,
+    },
+})
+
+//默认阀门名称数组
+const defaultValveNames = new Array(4).fill('ACV_default')
+//泵默认名称
+const defaultPumpNames = new Array(1).fill('P_default')
+
+// 阀门名称映射表
+const valveNameArr = {
+    'V6102': ['ACV6111', 'ACV6112', 'ACV6115', 'ACV6116'],
+    'V6103': ['ACV6121', 'ACV6122', 'ACV6124', 'ACV6125'],
+    'V6106': ['ACV6130', 'ACV6131', 'ACV6133', 'ACV6134'],
+}
+//泵名称映射表
+const pumpNameArr = {
+    'V6102': ['P6105'],
+    'V6103': ['P6108'],
+    'V6106': ['P6111'],
+}
+
+//阀门名称数组,根据罐名来匹配
+const valveNames = computed(() => {
+    return valveNameArr[props.title] || defaultValveNames
+})
+//泵名称
+const pumpNames = computed(() => {
+    return pumpNameArr[props.title] || defaultPumpNames
+})
+
+//罐体样式
+const getTankBodyStyle = computed(() => ({
+    width: `${props.iconWidth ?? props.iconSize}px`,
+    height: `${props.iconHeight ?? props.iconSize}px`,
+}))
+
+//阀门icon大小（罐子100-阀门37.5）
+const valveIconSize = computed(() => {
+    return (props.iconWidth ?? props.iconSize) * 0.375;
+});
+
+//泵icon大小（罐子100-泵60）
+const pumpIconSize = computed(() => {
+    return (props.iconWidth ?? props.iconSize) * 0.6;
+});
+
+//管道宽度
+const pipeWidth = computed(() => {
+    return (props.iconWidth ?? props.iconSize) * 0.06;
+});
+
+</script>
+
+<style scoped lang="scss">
+.tank_valves {
+    position: relative;
+    z-index: 9;
+
+    .valve_progress {
+        .valve_progress1 {
+            position: absolute;
+            top: 35%;
+            left: -42%;
+        }
+
+        .valve_progress2 {
+            position: absolute;
+            top: 120%;
+            left: 60%;
+        }
+
+        .valve_progress3 {
+            position: absolute;
+            top: 60%;
+            left: 107%;
+        }
+
+        .valve_progress4 {
+            position: absolute;
+            top: 24%;
+            left: 185%;
+        }
+
+    }
+
+    .pump_progress {
+        .pump_progress1 {
+            position: absolute;
+            top: 83%;
+            left: 184%;
+            transform: translate(-50%, -50%);
+        }
+    }
+
+    .pipes {
+        .progress_pos1 {
+            position: absolute;
+            top: -18%;
+            left: 52%;
+            width: 200%;
+        }
+
+        .progress_pos2 {
+            position: absolute;
+            top: 184%;
+            left: -58%;
+            width: 254%;
+        }
+
+        .progress_pos3 {
+            position: absolute;
+            top: -14%;
+            left: 65%;
+            width: 116%;
+        }
+
+        .progress_pos4 {
+            position: absolute;
+            top: -63%;
+            left: 68%;
+            width: 110%;
+        }
+    }
+
+}
+</style>

ui/src/components/HnyzDcs/SeparatorTowerValves2Component.vue

@@ -0,0 +1,259 @@
+<template>
+    <div class="tank_valves" :style="getTankBodyStyle">
+        <!-- 分离塔·(铁合金PID流程)  -->
+        <STypeTank :title="title" :iconSize="iconSize" :waterLevelValue="waterLevelValue" />
+        <div class="valve_progress">
+            <ValveProgress :iconSize="valveIconSize" :title="valveNames[0]" :rotateAngle="90" :pipeLength="520"
+                :pipeLeftOffset="-330" :valveStatusArr="initValveStatusArr" progressType="steam" :pipeReverse="true"
+                :pipeStatus="initPipeStatus" class="valve_progress1 rotate_90" />
+            <ValveProgress :iconSize="valveIconSize" :title="valveNames[1]" :pipeLength="335" :pipeLeftOffset="-172"
+                :valveStatusArr="initValveStatusArr" progressType="steam" :pipeStatus="initPipeStatus"
+                class="valve_progress2" />
+            <ValveProgress :iconSize="valveIconSize" :title="valveNames[2]" :pipeLength="393" :pipeLeftOffset="-116"
+                :valveStatusArr="initValveStatusArr" progressType="steam" :pipeStatus="initPipeStatus"
+                class="valve_progress3" />
+            <ValveProgress :iconSize="valveIconSize" :title="valveNames[3]" :pipeLength="472" :pipeLeftOffset="-51"
+                :valveStatusArr="initValveStatusArr" progressType="steam" :pipeStatus="initPipeStatus"
+                class="valve_progress4" />
+            <ValveProgress :iconSize="valveIconSize" :title="valveNames[4]" :pipeLength="200" :pipeLeftOffset="-50"
+                :valveStatusArr="initValveStatusArr" progressType="steam" :pipeStatus="initPipeStatus"
+                class="valve_progress5" />
+            <ValveProgress :iconSize="valveIconSize" :title="valveNames[5]" :pipeLength="800" :pipeLeftOffset="-510"
+                :valveStatusArr="initValveStatusArr" progressType="steam" :pipeStatus="initPipeStatus"
+                class="valve_progress6" />
+            <ValveProgress :iconSize="valveIconSize" :title="valveNames[6]" :rotateAngle="90" :pipeLength="846"
+                :pipeLeftOffset="-332" :valveStatusArr="initValveStatusArr" progressType="steam" :pipeReverse="true"
+                :pipeStatus="initPipeStatus" class="valve_progress7 rotate_90" />
+
+            <ValveProgress :iconSize="valveIconSize" :title="valveNames[7]" :pipeLength="180" :pipeLeftOffset="-31"
+                :valveStatusArr="initValveStatusArr" progressType="steam" :pipeStatus="initPipeStatus"
+                class="valve_progress8" />
+            <ValveProgress :iconSize="valveIconSize" :title="valveNames[8]" :pipeLength="300" :pipeLeftOffset="-50"
+                :valveStatusArr="initValveStatusArr" progressType="steam" :pipeStatus="initPipeStatus"
+                class="valve_progress9" />
+            <ValveProgress :iconSize="valveIconSize" :title="valveNames[9]" :rotateAngle="90" :pipeLength="250"
+                :pipeLeftOffset="-65" :valveStatusArr="initValveStatusArr" progressType="steam"
+                :pipeStatus="initPipeStatus" class="valve_progress10 rotate_90" />
+        </div>
+        <!-- <div class="pump_progress">
+
+        </div> -->
+        <div class="pipes">
+            <Pipe :pipeStatus="initPipeStatus" :strokeWidth="strokeWidth"
+                class="progress_steam progress_pos1 rotate_270"></Pipe>
+            <Pipe :pipeStatus="initPipeStatus" :strokeWidth="strokeWidth"
+                class="progress_steam progress_pos2 rotate_270"></Pipe>
+            <Pipe :pipeStatus="initPipeStatus" :strokeWidth="strokeWidth"
+                class="progress_steam progress_pos3 rotate_270"></Pipe>
+            <Pipe :pipeStatus="initPipeStatus" :strokeWidth="strokeWidth"
+                class="progress_steam progress_pos4 rotate_270"></Pipe>
+            <Pipe :pipeStatus="initPipeStatus" :strokeWidth="strokeWidth"
+                class="progress_steam progress_pos4_1 rotate_90"></Pipe>
+        </div>
+        <div class="arrows">
+            <Arrow flexDir="column" :iconFirst="false" arrowDir="up" arrowText="排气" :iconSize="65" :fontSize="10"
+                class="arrow_pos1" />
+            <Arrow arrowDir="right" arrowText="预留" :iconSize="65" :fontSize="10" class="arrow_pos2" />
+            <Arrow flexDir="column" arrowDir="down" arrowText="产品" :iconSize="65" :fontSize="10" class="arrow_pos3" />
+        </div>
+    </div>
+</template>
+
+<script setup>
+import STypeTank from '@/components/HnyzDcs/STypeTankComponent.vue';
+import ValveProgress from '@/components/DCS/ValveProgressComponent.vue';
+import Pipe from '@/components/HnyzDcs/PipeComponent.vue';
+import Arrow from '@/components/HnyzDcs/ArrowComponent.vue';
+import Pump from '@/components/DCS/PumpComponent.vue';
+import { computed } from 'vue'
+const initValveStatusArr = [true]
+const initPipeStatus = true
+const props = defineProps({
+    iconSize: {
+        type: Number,
+    },
+    iconWidth: {//图标宽度
+        type: Number,
+    },
+    iconHeight: {//图标高度
+        type: Number,
+    },
+    tempValue: {
+        type: Number,
+    },
+    waterLevelValue: {// 水位值
+        type: Number,
+        default: -1,// -1表示未传水位值
+    },
+    title: {//罐名
+        type: String,
+    },
+})
+
+//默认阀门名称数组
+const defaultValveNames = new Array(10).fill('ACV_default')
+
+// 阀门名称映射表
+const valveNameArr = {
+    'F1001': ['QQF1013', 'QQF1011', 'QQF1010', 'QQF1009', 'QQF1014', 'QQF1008', 'QQF1012', 'QQF1016', 'QQF1015', 'QQF1021'],
+}
+
+
+//阀门名称数组,根据罐名来匹配
+const valveNames = computed(() => {
+    return valveNameArr[props.title] || defaultValveNames
+})
+
+const width = computed(() => {
+    return props.iconWidth ?? props.iconSize
+})
+const height = computed(() => {
+    return props.iconHeight ?? props.iconSize
+})
+
+//罐体样式
+const getTankBodyStyle = computed(() => ({
+    width: `${width.value}px`,
+    height: `${height.value}px`,
+}))
+
+//阀门icon大小（罐体150-阀门30）
+const valveIconSize = computed(() => {
+    return width.value * 0.2;
+});
+
+//管道宽度(罐体150-管道4.8)
+const strokeWidth = computed(() => {
+    return width.value * 0.032;
+});
+
+</script>
+
+<style scoped lang="scss">
+.tank_valves {
+    position: relative;
+    z-index: 10;
+
+    .valve_progress {
+        .valve_progress1 {
+            position: absolute;
+            top: -20%;
+            left: 28%;
+        }
+
+        .valve_progress2 {
+            position: absolute;
+            top: -22%;
+            left: 107%;
+        }
+
+        .valve_progress3 {
+            position: absolute;
+            top: -42.6%;
+            left: 82%;
+        }
+
+        .valve_progress4 {
+            position: absolute;
+            top: -63.6%;
+            left: 53.4%;
+        }
+
+        .valve_progress5 {
+            position: absolute;
+            top: 10%;
+            left: -10%;
+        }
+
+        .valve_progress6 {
+            position: absolute;
+            top: -87%;
+            left: 82%;
+        }
+
+        .valve_progress7 {
+            position: absolute;
+            top: -100%;
+            left: 142%;
+        }
+
+        .valve_progress8 {
+            position: absolute;
+            top: 44%;
+            left: 88%;
+        }
+
+        .valve_progress9 {
+            position: absolute;
+            top: 68%;
+            left: -20%;
+        }
+
+        .valve_progress10 {
+            position: absolute;
+            top: 114%;
+            left: 54%;
+        }
+    }
+
+    .pipes {
+        .progress_pos1 {
+            position: absolute;
+            top: -20%;
+            left: 45%;
+            width: 64%;
+        }
+
+        .progress_pos2 {
+            width: 45%;
+            position: absolute;
+            top: -8%;
+            left: 60%;
+        }
+
+        .progress_pos3 {
+            width: 20%;
+            position: absolute;
+            top: 0%;
+            left: 74%;
+        }
+
+        .progress_pos4 {
+            width: 80%;
+            position: absolute;
+            top: -35%;
+            left: -18%;
+        }
+
+        .progress_pos4_1 {
+            width: 20%;
+            position: absolute;
+            top: 15%;
+            left: -18%;
+        }
+    }
+
+    .arrows {
+        .arrow_pos1 {
+            position: absolute;
+            top: -120%;
+            left: 24%;
+            transform: translate(-50%, -50%);
+        }
+
+        .arrow_pos2 {
+            position: absolute;
+            top: 56%;
+            left: 140%;
+            transform: translate(-50%, -50%);
+        }
+
+        .arrow_pos3 {
+            position: absolute;
+            top: 165%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+        }
+    }
+}
+</style>

ui/src/components/HnyzDcs/VTypeTank2Component.vue

@@ -2,18 +2,19 @@
     <!-- 储罐：水位 -->
     <div class="tank_body" :style="getTankBodyStyle">
         <!-- 罐体 -->
-        <i class="icon iconfont-hnyz-colour tank" :class="tankIconClass" :style="getTankStyle">
+        <i class="icon iconfont-hnyz-colour tank zIndex10" :class="tankIconClass" :style="getTankStyle">
             <!-- 标题 -->
             <div class="tank_title" v-if="title" :style="{ fontSize: `${iconSize * 0.15}px` }">{{ title }}</div>
             <!-- 水位 -->
-            <div v-if="waterLevelValue >= 0">
-                <dv-water-level-pond :config="waterLevelConfig" class="water_level water_level_pos3" />
-            </div>
+            <WaterLevelMap :waterLevelValue="waterLevelValue" :textSize="iconSize * 0.12"
+                class="water_level water_level_pos3" />
         </i>
     </div>
 </template>
 
 <script setup>
+import WaterLevelMap from '@/components/HnyzDcs/WaterLevelMapComponent.vue'
+
 import { computed } from 'vue'
 
 const props = defineProps({
@@ -98,15 +99,16 @@ const waterLevelConfig = computed(() => ({
 
         // 水位
         .water_level {
-            width: 0.4em;
-            height: 0.5em;
+            width: 58%;
+            height: 60%;
         }
 
         //水位图位置
         .water_level_pos3 {
+            z-index: -1;
             position: absolute;
-            top: 21%;
-            left: 30%;
+            top: 16%;
+            left: 22%;
         }
 
         .dv-water-pond-level :deep(canvas) {

ui/src/components/HnyzDcs/VTypeTankValves3Component.vue

@@ -0,0 +1,125 @@
+<template>
+    <div class="tank_valves" :style="getTankBodyStyle">
+        <!-- 三连罐  搅拌-->
+        <VTypeTank :title="title" :iconWidth="iconWidth" :iconHeight="iconHeight" :iconSize="iconSize"
+            :fanStatus="fanStatus"></VTypeTank>
+        <div class="valve_progress">
+            <!-- 上右 -->
+            <ValveProgress :iconSize="valveIconSize" :title="valveNames[0]" :rotateAngle="270" :pipeLength="205"
+                :pipeLeftOffset="-47" :valveStatusArr="initValveStatusArr" progressType="steam"
+                :pipeStatus="initPipeStatus" :pipeReverse="true" class="valve_progress1 rotate_270" />
+            <!-- 左下 -->
+            <ValveProgress :iconSize="valveIconSize" :title="valveNames[1]" :pipeLength="200" :pipeLeftOffset="-60"
+                :valveStatusArr="initValveStatusArr" progressType="steam" :pipeStatus="initPipeStatus"
+                :pipeReverse="true" class="valve_progress2" />
+        </div>
+        <div class="pump_progress">
+            <!-- 左下  -->
+            <PumpProgress :title="pumpNames[0]" :pumpDataArr="[1, 10]" :iconSize="iconSize * 0.4" :showPipe="false"
+                :pipeType="steam" pumpDirection="R" class="pump_progress1" />
+        </div>
+    </div>
+</template>
+
+<script setup>
+import VTypeTank from '@/components/HnyzDcs/VTypeTankComponent.vue';
+import ValveProgress from '@/components/DCS/ValveProgressComponent.vue';
+import PumpProgress from '@/components/DCS/PumpComponent.vue';
+import { computed } from 'vue'
+const initValveStatusArr = [true]
+const initPipeStatus = true
+const props = defineProps({
+    iconSize: {//图标大小
+        type: Number,
+        default: 200,
+    },
+    title: {//罐名
+        type: String,
+    },
+    iconWidth: {//图标宽度
+        type: Number,
+    },
+    iconHeight: {//图标高度
+        type: Number,
+    },
+    fanStatus: {//风扇状态
+        type: Boolean,
+        default: undefined,
+    },
+})
+//默认阀门名称数组
+const defaultValveNames = new Array(2).fill('ACV_default')
+//泵默认名称
+const defaultPumpNames = new Array(1).fill('P_default')
+
+// 阀门名称映射表
+const valveNameArr = {
+    'V6104': ['ACV6145', 'ACV6146'],
+    'V6105': ['ACV6147', 'ACV6148'],
+    'V6107': ['ACV6149', 'ACV6150'],
+    'V6108': ['ACV6151', 'ACV6152'],
+}
+//泵名称映射表
+const pumpNameArr = {
+    'V6104': ['P6117'],
+    'V6105': ['P6118'],
+    'V6107': ['P6119'],
+    'V6108': ['P6120'],
+}
+
+//阀门名称数组,根据罐名来匹配
+const valveNames = computed(() => {
+    return valveNameArr[props.title] || defaultValveNames
+})
+//泵名称
+const pumpNames = computed(() => {
+    return pumpNameArr[props.title] || defaultPumpNames
+})
+
+
+//罐体样式
+const getTankBodyStyle = computed(() => ({
+    width: `${props.iconWidth ?? props.iconSize}px`,
+    height: `${props.iconHeight ?? props.iconSize}px`,
+    // fontSize: `${props.iconSize}px`,
+}))
+
+
+//阀门icon大小（罐子200-阀门50）
+const valveIconSize = computed(() => {
+    return props.iconSize * 0.25;
+});
+
+</script>
+
+<style scoped lang="scss">
+.tank_valves {
+    position: relative;
+    z-index: 10;
+
+    .valve_progress {
+        .valve_progress1 {
+            position: absolute;
+            top: -15%;
+            left: 65%;
+        }
+
+        .valve_progress2 {
+            position: absolute;
+            top: 62%;
+            left: -6%;
+        }
+
+    }
+
+    .pump_progress {
+        .pump_progress1 {
+            position: absolute;
+            top: 77%;
+            left: -57%;
+            transform: translate(-50%, -50%);
+            z-index: 100;
+        }
+    }
+}
+</style>

ui/src/components/HnyzDcs/VTypeTankValves4Component.vue

@@ -0,0 +1,191 @@
+<template>
+    <div class="tank_valves" :style="getTankBodyStyle">
+        <!-- 加药罐，集中水罐，静置水罐  水位 -->
+        <VTypeTank :title="title" :iconWidth="iconWidth" :iconHeight="iconHeight" :iconSize="iconSize"
+            :waterLevelValue="waterLevelValue"></VTypeTank>
+        <div class="valve_progress">
+            <!-- 上 -->
+            <ValveProgress :iconSize="valveIconSize" :title="valveNames[0]" :rotateAngle="270" :pipeLength="205"
+                :pipeLeftOffset="-47" :valveStatusArr="initValveStatusArr" progressType="steam"
+                :pipeStatus="initPipeStatus" :pipeReverse="true" class="valve_progress1 rotate_270" />
+        </div>
+        <div class="pump_progress">
+            <!-- 左上  -->
+            <PumpProgress :title="pumpNames[0]" :pumpDataArr="[1, 10]" :iconSize="pumpIconSize" :showPipe="true"
+                :pipeType="steam" pumpDirection="L" class="pump_progress1" />
+            <!-- 右1  -->
+            <PumpProgress :title="pumpNames[1]" :pumpDataArr="[1, 10]" :iconSize="pumpIconSize" :showPipe="false"
+                :pipeType="steam" pumpDirection="L" :pipeLength="144" class="pump_progress2" />
+            <!-- 右2  -->
+            <PumpProgress :title="pumpNames[2]" :pumpDataArr="[1, 10]" :iconSize="pumpIconSize" :showPipe="true"
+                :pipeType="steam" pumpDirection="L" class="pump_progress3" />
+        </div>
+        <div class="pipe_progress">
+            <!-- 右上  泵相关管道-->
+            <Pipe :pipeStatus="true" :strokeWidth="initPipeWidth" class="pipe_pos1 progress_steam"
+                v-if="pumpNames[1]" />
+            <!-- 右下  泵相关管道-->
+            <Pipe :pipeStatus="true" :strokeWidth="initPipeWidth" class="pipe_pos2 progress_steam"
+                v-if="pumpNames[2]" />
+            <!-- 左上 泵 相关管道 -->
+            <Pipe :pipeStatus="true" :strokeWidth="initPipeWidth" class="pipe_pos3 progress_steam"
+                v-if="pumpNames[0]" />
+            <Pipe :pipeStatus="true" :strokeWidth="initPipeWidth" class="pipe_pos4 progress_steam"
+                v-if="pumpNames[0]" />
+
+        </div>
+    </div>
+</template>
+
+<script setup>
+import VTypeTank from '@/components/HnyzDcs/VTypeTankComponent.vue';
+import ValveProgress from '@/components/DCS/ValveProgressComponent.vue';
+import PumpProgress from '@/components/DCS/PumpComponent.vue';
+import Pipe from '@/components/HnyzDcs/PipeComponent.vue';
+import { computed } from 'vue'
+const initValveStatusArr = [true]
+const initPipeStatus = true
+const props = defineProps({
+    iconSize: {//图标大小
+        type: Number,
+        default: 200,
+    },
+    title: {//罐名
+        type: String,
+    },
+    iconWidth: {//图标宽度
+        type: Number,
+    },
+    iconHeight: {//图标高度
+        type: Number,
+    },
+    waterLevelValue: {//水位值
+        type: Number,
+    },
+})
+//默认阀门名称数组
+const defaultValveNames = new Array(1).fill('ACV_default')
+//泵默认名称
+const defaultPumpNames = new Array(3).fill('P_default')
+
+// 阀门名称映射表
+const valveNameArr = {
+    'V1001': [''],
+    'V1002': ['QQF1001'],
+    'V1003': ['QQF1020'],
+    'V1004': [''],
+    'V1005': [''],
+    'V1006': ['QQF1017'],
+    'V1007': [''],
+}
+//泵名称映射表
+const pumpNameArr = {
+    'V1001': ['P1008', '', 'P1001'],
+    'V1002': ['', '', 'P1002'],
+    'V1003': ['', '', ''],
+    'V1004': ['', 'P1004', 'P1003'],
+    'V1005': ['', '', 'P1009'],
+    'V1006': ['', '', ''],
+    'V1007': ['', '', 'P1007'],
+}
+
+//阀门名称数组,根据罐名来匹配
+const valveNames = computed(() => {
+    return valveNameArr[props.title] || defaultValveNames
+})
+//泵名称
+const pumpNames = computed(() => {
+    return pumpNameArr[props.title] || defaultPumpNames
+})
+
+
+//罐体样式
+const getTankBodyStyle = computed(() => ({
+    width: `${props.iconWidth ?? props.iconSize}px`,
+    height: `${props.iconHeight ?? props.iconSize}px`,
+    // fontSize: `${props.iconSize}px`,
+}))
+
+
+//阀门icon大小（罐子120-阀门30）
+const valveIconSize = computed(() => {
+    return props.iconSize * 0.25;
+});
+//泵icon大小(120-泵48)
+const pumpIconSize = computed(() => {
+    return props.iconSize * 0.4;
+});
+//阀门管道宽度(120-泵4.8)
+const initPipeWidth = computed(() => {
+    return props.iconSize * 0.04;
+});
+
+</script>
+
+<style scoped lang="scss">
+.tank_valves {
+    position: relative;
+    z-index: 10;
+
+    .valve_progress {
+        .valve_progress1 {
+            position: absolute;
+            top: -15%;
+            left: 30%;
+        }
+    }
+
+    .pump_progress {
+        .pump_progress1 {
+            position: absolute;
+            top: 50%;
+            left: -30%;
+            transform: translate(-50%, -50%);
+        }
+
+        .pump_progress2 {
+            position: absolute;
+            top: 16%;
+            left: 110%;
+            transform: translate(-50%, -50%);
+        }
+
+        .pump_progress3 {
+            position: absolute;
+            top: 80%;
+            left: 110%;
+            transform: translate(-50%, -50%);
+        }
+    }
+
+    .pipe_progress {
+        .pipe_pos1 {
+            position: absolute;
+            top: 15.5%;
+            left: 43%;
+            width: 55%;
+        }
+
+        .pipe_pos2 {
+            position: absolute;
+            top: 79.5%;
+            left: 43%;
+            width: 55%;
+        }
+
+        .pipe_pos3 {
+            position: absolute;
+            top: 13%;
+            left: -35%;
+            width: 63%;
+        }
+
+        .pipe_pos4 {
+            position: absolute;
+            top: 49.5%;
+            left: -90%;
+            width: 50%;
+        }
+    }
+}
+</style>

ui/src/router/index.js

@@ -193,6 +193,11 @@ export const constantRoutes = [
     component: () => import('@/views/hnyzConfiguratePage/HeatExchange/index'),
     name: 'HeatExchange',
   },
+  {
+    path:'/IronAlloy',//铁合金
+    component: () => import('@/views/hnyzConfiguratePage/IronAlloy/index'),
+    name: 'IronAlloy',
+  }
 ]
 
 // 动态路由，基于用户权限动态去加载

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

@@ -204,42 +204,6 @@ const initValveStatusArr = [true]
                 }
             }
 
-            //料仓
-            .stock_bin_pos {
-                position: absolute;
-                top: 27%;
-                left: 3%;
-            }
-
-            //三通阀
-            .threeWayValve_pos {
-                position: absolute;
-                top: 35.7%;
-                left: 14%;
-                flex-direction: column;
-            }
-
-            //洗气塔
-            .scrubberTower_pos {
-                position: absolute;
-                top: 9.7%;
-                left: 31.5%;
-
-                .iconfont-hnyz-colour {
-                    font-size: 140px;
-                }
-            }
-
-            //加药机
-            .dosingMachine_pos {
-                position: absolute;
-                top: 65%;
-                left: 46.5%;
-
-                .iconfont-hnyz-colour {
-                    font-size: 100px;
-                }
-            }
         }
 
         //外部组件

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

@@ -1,16 +1,87 @@
 <template>
     <div class="page">
-        <HeaderComponent title="换热"></HeaderComponent>
+        <HeaderComponent title="换热PID"></HeaderComponent>
         <div class="content_page">
             <!-- 罐体 -->
             <div class="tanks">
-               <!-- <WaterSinkValvesComponent title="V6101"  :iconWidth="100" :iconHeight="80" :waterLevelValue="80" :tempValue="20" class="tank_test"/> -->
-                <!-- <SeparatorTowerValves title="分离塔1" :iconSize="100" class="tank_test" /> -->
+                <ETypeTankValves3 title="E6002" :iconSize="200" :tempValue="70" :fanStatus="true" class="tank_E6002" />
+                <ETypeTankValves3 title="E6003" :iconSize="200" :tempValue="70" :fanStatus="true" class="tank_E6003" />
+                <ETypeTankValves3 title="E6004" :iconSize="200" :tempValue="70" class="tank_E6004" />
+                <ETypeTankValves3 title="E6005" :iconSize="200" :tempValue="70" class="tank_E6005" />
+                <ETypeTankValves3 title="E6006" :iconSize="200" :tempValue="70" class="tank_E6006" />
+                <ETypeTankValves3 title="E6007" :iconSize="200" :tempValue="70" class="tank_E6007" />
+                <ETypeTankValves3 title="E6008" :iconSize="150" class="tank_E6008" />
+
+                <HeatExchangeWaterTankValves title="V6102" :iconSize="100" class="tank_V6102" />
+                <HeatExchangeWaterTankValves title="V6103" :iconSize="100" class="tank_V6103" />
+                <HeatExchangeWaterTankValves title="V6106" :iconSize="100" class="tank_V6106" />
+
+                <VTypeTankValves3 title="V6104" :iconSize="150" class="tank_V6104" />
+                <VTypeTankValves3 title="V6105" :iconSize="150" class="tank_V6105" />
+                <VTypeTankValves3 title="V6107" :iconSize="150" class="tank_V6107" />
+                <VTypeTankValves3 title="V6108" :iconSize="150" class="tank_V6108" />
+                <VTypeTankValves title="V6109" :fanStatus="true" :iconSize="150" class="tank_V6109" />
+
+                <Separator title="F6001" :iconSize="150" class="separator_F6001 zIndex10" />
 
             </div>
             <!-- 外部管道排布 -->
             <div class="outer_progress">
-               
+                <!-- P6112-ACV6139相关拓展管道 -->
+                <Pipe :pipeStatus="initPipeStatus" :strokeWidth="pipeWidth"
+                    class="progress_steam progress_pos1 rotate_270" />
+
+                <!-- P6116-引至G1 相关拓展管道 -->
+                <Pipe :pipeStatus="initPipeStatus" :strokeWidth="pipeWidth"
+                    class="progress_steam progress_pos2 rotate_270" />
+
+                <!-- P6104-ACV6114相关拓展管道 -->
+                <Pipe :pipeStatus="initPipeStatus" :strokeWidth="pipeWidth"
+                    class="progress_steam progress_pos3 rotate_270" />
+                <Pipe :pipeStatus="initPipeStatus" :strokeWidth="pipeWidth"
+                    class="progress_steam progress_pos4 rotate_180" />
+                <Pipe :pipeStatus="initPipeStatus" :strokeWidth="pipeWidth"
+                    class="progress_steam progress_pos5 rotate_90" />
+
+                <!-- P6117-ACV6113相关拓展管道 -->
+                <Pipe :pipeStatus="initPipeStatus" :strokeWidth="pipeWidth"
+                    class="progress_steam progress_pos6 rotate_270" />
+                <Pipe :pipeStatus="initPipeStatus" :strokeWidth="pipeWidth"
+                    class="progress_steam progress_pos7 zIndex10" />
+
+                <!-- 引自低位槽-ACV6101相关拓展管道 -->
+                <Pipe :pipeStatus="initPipeStatus" :strokeWidth="pipeWidth"
+                    class="progress_steam progress_pos8 zIndex10" />
+
+                <!-- ACV6120,ACV6129,ACV6138-分离器F6001管道 -->
+                <Pipe :pipeStatus="initPipeStatus" :strokeWidth="pipeWidth" class="progress_steam progress_pos9" />
+                <Pipe :pipeStatus="initPipeStatus" :strokeWidth="pipeWidth" class="progress_steam progress_pos10" />
+                <Pipe :pipeStatus="initPipeStatus" :strokeWidth="pipeWidth"
+                    class="progress_steam progress_pos11 rotate_90" />
+
+                <!-- 分离器F6001-ACV6145,ACV6147,ACV6149,ACV6151 相关拓展管道 -->
+                <Pipe :pipeStatus="initPipeStatus" :strokeWidth="pipeWidth"
+                    class="progress_steam progress_pos12_1 rotate_180" />
+                <Pipe :pipeStatus="initPipeStatus" :strokeWidth="pipeWidth"
+                    class="progress_steam progress_pos12_2 rotate_180" />
+                <Pipe :pipeStatus="initPipeStatus" :strokeWidth="pipeWidth"
+                    class="progress_steam progress_pos12_3 rotate_180" />
+                <Pipe :pipeStatus="initPipeStatus" :strokeWidth="pipeWidth"
+                    class="progress_steam progress_pos12_4 rotate_180" />
+
+                <!-- F6001-V6109相关拓展管道 -->
+                <Pipe :pipeStatus="initPipeStatus" :strokeWidth="pipeWidth"
+                    class="progress_steam progress_pos13 rotate_90" />
+
+                <!-- P6116-ACV6153相关拓展管道 -->
+                <Pipe :pipeStatus="initPipeStatus" :strokeWidth="pipeWidth"
+                    class="progress_steam progress_pos14 rotate_90" />
+                <Pipe :pipeStatus="initPipeStatus" :strokeWidth="pipeWidth"
+                    class="progress_steam progress_pos15 rotate_180" />
+
+                <!-- P6121泵流出 -->
+                <Pipe :pipeStatus="initPipeStatus" :strokeWidth="pipeWidth" class="progress_steam progress_pos16" />
+
             </div>
 
             <!-- 其他图标 -->
@@ -19,29 +90,43 @@
             </div>
             <!-- 外部组件 -->
             <div class="outer_components">
-                
+
             </div>
 
             <!-- 大箭头指向 -->
             <div class="arrows">
-              
+                <Arrow flexDir="column" arrowDir="up" :iconFirst="false" arrowText="引至G1" :fontSize="18"
+                    class="arrow_pos1" />
+                <Arrow flexDir="column" arrowDir="right" :iconFirst="false" arrowText="引自分离塔M12母液低位槽" :fontSize="16"
+                    class="arrow_pos2" />
+                <Arrow flexDir="column" arrowDir="right" :iconFirst="false" arrowText="DN150" :fontSize="18"
+                    class="arrow_pos3" />
             </div>
         </div>
     </div>
 </template>
 
 <script setup>
+import ETypeTankValves3 from '@/components/HnyzDcs/ETypeTankValves3Component.vue';
+import HeatExchangeWaterTankValves from '@/components/HnyzDcs/HeatExchangeWaterTankValvesComponent.vue';
+import VTypeTankValves3 from '@/components/HnyzDcs/VTypeTankValves3Component.vue';
+import VTypeTankValves from '@/components/HnyzDcs/VTypeTankValvesComponent.vue';
+import Separator from '@/components/HnyzDcs/SeparatorComponent.vue';
+
+import ETypeTank from '@/components/HnyzDcs/ETypeTankComponent.vue';
 import WaterSinkValvesComponent from '@/components/HnyzDcs/WaterSinkValvesComponent.vue';
 import SeparatorTowerValves from '@/components/HnyzDcs/SeparatorTowerValvesComponent.vue';
 import FTypeTankValves from '@/components/HnyzDcs/FTypeTankValvesComponent.vue';
 import Pipe from '@/components/HnyzDcs/PipeComponent.vue';
 import Arrow from '@/components/HnyzDcs/ArrowComponent.vue';
+
 import { useValveHelper } from '@/hooks/useValveHelper'
 import { computed, onMounted, onBeforeUnmount } from 'vue';
 
 import { stompClient } from '@/utils/ws/stompClient';
 import { updateZTPageConfig } from '@/api/dcs/configurePage';
 import SeparatorTowerValvesComponent from '../../../components/HnyzDcs/SeparatorTowerValvesComponent.vue';
+import { FALSE } from 'sass';
 
 const initPipeStatus = true
 const initValveStatusArr = [true]
@@ -72,157 +157,131 @@ const pipeWidth = 6
 
         //罐体
         .tanks {
-            .tank_test{
+            .tank_test {
                 position: absolute;
                 top: 40%;
                 left: 50%;
                 transform: translate(-50%, -50%);
             }
-            .tank_F6001 {
-                position: absolute;
-                top: 25%;
-                left: 18%;
-                transform: translate(-50%, -50%);
-            }
-
-            .tank_F6002 {
-                position: absolute;
-                top: 25%;
-                left: 25%;
-                transform: translate(-50%, -50%);
-            }
 
-            .tank_F6003 {
+            .tank_E6002 {
                 position: absolute;
-                top: 25%;
-                left: 32%;
+                top: 15%;
+                left: 37%;
                 transform: translate(-50%, -50%);
             }
 
-            .tank_F6004 {
+            .tank_E6003 {
                 position: absolute;
-                top: 25%;
-                left: 39%;
+                top: 15%;
+                left: 56.5%;
                 transform: translate(-50%, -50%);
             }
 
-            .tank_F6005 {
+            .tank_E6004 {
                 position: absolute;
-                top: 25%;
-                left: 46%;
+                top: 39%;
+                left: 24.5%;
                 transform: translate(-50%, -50%);
             }
 
-            .tank_F6006 {
+            .tank_E6005 {
                 position: absolute;
-                top: 25%;
-                left: 53%;
+                top: 39%;
+                left: 44%;
                 transform: translate(-50%, -50%);
             }
 
-            .tank_F6007 {
+            .tank_E6006 {
                 position: absolute;
-                top: 25%;
-                left: 60%;
+                top: 39%;
+                left: 63.5%;
                 transform: translate(-50%, -50%);
             }
 
-            .tank_F6008 {
+            .tank_E6007 {
                 position: absolute;
-                top: 25%;
-                left: 67%;
+                top: 19%;
+                left: 83.1%;
                 transform: translate(-50%, -50%);
             }
 
-            .tank_F6009 {
+            .tank_E6008 {
                 position: absolute;
-                top: 25%;
-                left: 74%;
+                top: 7%;
+                left: 92.5%;
                 transform: translate(-50%, -50%);
             }
 
-            .tank_F6010 {
-                position: absolute;
-                top: 25%;
-                left: 81%;
-                transform: translate(-50%, -50%);
-            }
 
-            .tank_F6011 {
-                position: absolute;
-                top: 70%;
-                left: 18%;
-                transform: translate(-50%, -50%);
-            }
 
-            .tank_F6012 {
+            .tank_V6102 {
                 position: absolute;
-                top: 70%;
-                left: 25%;
+                top: 65%;
+                left: 24%;
                 transform: translate(-50%, -50%);
             }
 
-            .tank_F6013 {
+            .tank_V6103 {
                 position: absolute;
-                top: 70%;
-                left: 32%;
+                top: 65%;
+                left: 43.5%;
                 transform: translate(-50%, -50%);
             }
 
-            .tank_F6014 {
+            .tank_V6106 {
                 position: absolute;
-                top: 70%;
-                left: 39%;
+                top: 65%;
+                left: 63%;
                 transform: translate(-50%, -50%);
             }
 
-            .tank_F6015 {
+            .tank_V6104 {
                 position: absolute;
-                top: 70%;
-                left: 46%;
+                top: 89%;
+                left: 11%;
                 transform: translate(-50%, -50%);
             }
 
-            .tank_F6016 {
+            .tank_V6105 {
                 position: absolute;
-                top: 70%;
-                left: 53%;
+                top: 89%;
+                left: 24.5%;
                 transform: translate(-50%, -50%);
             }
 
-            .tank_F6017 {
+            .tank_V6107 {
                 position: absolute;
-                top: 70%;
-                left: 60%;
+                top: 89%;
+                left: 44%;
                 transform: translate(-50%, -50%);
             }
 
-            .tank_F6018 {
+            .tank_V6108 {
                 position: absolute;
-                top: 70%;
-                left: 67%;
+                top: 89%;
+                left: 63.5%;
                 transform: translate(-50%, -50%);
             }
 
-            .tank_F6019 {
+            .tank_V6109 {
                 position: absolute;
-                top: 70%;
-                left: 74%;
+                top: 89%;
+                left: 83%;
                 transform: translate(-50%, -50%);
             }
 
-            .tank_F6020 {
+            .separator_F6001 {
                 position: absolute;
-                top: 70%;
-                left: 81%;
+                top: 74%;
+                left: 79%;
                 transform: translate(-50%, -50%);
             }
 
-
         }
 
         //其他图标
-        .icon_others {}
+        // .icon_others {}
 
         //外部组件
         .outer_components {
@@ -237,29 +296,22 @@ const pipeWidth = 6
         .arrows {
             .arrow_pos1 {
                 position: absolute;
-                top: 26%;
-                left: 8%;
+                top: 7%;
+                left: 97%;
                 transform: translate(-50%, -50%);
             }
 
             .arrow_pos2 {
                 position: absolute;
-                top: 35.5%;
+                top: 7%;
                 left: 7%;
                 transform: translate(-50%, -50%);
             }
 
             .arrow_pos3 {
                 position: absolute;
-                top: 60.5%;
-                left: 7%;
-                transform: translate(-50%, -50%);
-            }
-
-            .arrow_pos4 {
-                position: absolute;
-                top: 26%;
-                left: 94%;
+                top: 86.5%;
+                left: 95.5%;
                 transform: translate(-50%, -50%);
             }
         }
@@ -268,417 +320,139 @@ const pipeWidth = 6
         .outer_progress {
             .progress_pos1 {
                 position: absolute;
-                top: 15.1%;
-                left: 15%;
-                width: 72.6%;
+                top: 22%;
+                left: 72%;
+                width: 10.6%;
             }
 
             .progress_pos2 {
                 position: absolute;
-                top: 60.1%;
-                left: 15%;
-                width: 72.6%;
+                top: 18%;
+                left: 97%;
+                width: 5.6%;
             }
 
             .progress_pos3 {
                 position: absolute;
-                top: 20.6%;
-                left: 15.1%;
-                width: 5.7%;
-            }
-
-            .progress_pos3_2 {
-                position: absolute;
-                top: 43.3%;
-                left: 15.1%;
-                width: 18%;
+                top: 6%;
+                left: 64.95%;
+                width: 3%;
             }
 
             .progress_pos4 {
                 position: absolute;
-                top: 20.6%;
-                left: 87.5%;
-                width: 5.7%;
+                top: 3%;
+                left: 13.3%;
+                width: 51.8%;
             }
 
-            .progress_pos4_2 {
-                position: absolute;
-                top: 43.3%;
-                left: 87.5%;
-                width: 18%;
-            }
-
-
-
             .progress_pos5 {
                 position: absolute;
-                top: 8.7%;
-                left: 14%;
-                width: 3.7%;
-            }
-
-            .progress_pos5_2 {
-                position: absolute;
-                top: 8.7%;
-                left: 17.4%;
-                width: 7.3%;
-            }
-
-            .progress_pos5_3 {
-                position: absolute;
-                top: 8.7%;
-                left: 24.4%;
-                width: 7.3%;
-            }
-
-            .progress_pos5_4 {
-                position: absolute;
-                top: 8.7%;
-                left: 31.4%;
-                width: 7.3%;
-            }
-
-            .progress_pos5_5 {
-                position: absolute;
-                top: 8.7%;
-                left: 38.4%;
-                width: 7.3%;
-            }
-
-            .progress_pos5_6 {
-                position: absolute;
-                top: 8.7%;
-                left: 45.4%;
-                width: 7.3%;
-            }
-
-            .progress_pos5_7 {
-                position: absolute;
-                top: 8.7%;
-                left: 52.4%;
-                width: 7.3%;
+                top: 17.6%;
+                left: 13.4%;
+                width: 15.2%;
             }
 
-            .progress_pos5_8 {
-                position: absolute;
-                top: 8.7%;
-                left: 59.4%;
-                width: 7.3%;
-            }
-
-            .progress_pos5_9 {
-                position: absolute;
-                top: 8.7%;
-                left: 66.4%;
-                width: 7.3%;
-            }
-
-            .progress_pos5_10 {
-                position: absolute;
-                top: 8.7%;
-                left: 73.4%;
-                width: 7.3%;
-            }
-
-            .progress_pos5_11 {
-                position: absolute;
-                top: 8.7%;
-                left: 80.4%;
-                width: 6.2%;
-            }
 
             .progress_pos6 {
                 position: absolute;
-                top: 53.7%;
-                left: 14%;
-                width: 3.7%;
-            }
-
-            .progress_pos6_2 {
-                position: absolute;
-                top: 53.7%;
-                left: 17.4%;
-                width: 7.3%;
-            }
-
-            .progress_pos6_3 {
-                position: absolute;
-                top: 53.7%;
-                left: 24.4%;
-                width: 7.3%;
-            }
-
-            .progress_pos6_4 {
-                position: absolute;
-                top: 53.7%;
-                left: 31.4%;
-                width: 7.3%;
-            }
-
-            .progress_pos6_5 {
-                position: absolute;
-                top: 53.7%;
-                left: 38.4%;
-                width: 7.3%;
-            }
-
-            .progress_pos6_6 {
-                position: absolute;
-                top: 53.7%;
-                left: 45.4%;
-                width: 7.3%;
-            }
-
-            .progress_pos6_7 {
-                position: absolute;
-                top: 53.7%;
-                left: 52.4%;
-                width: 7.3%;
-            }
-
-            .progress_pos6_8 {
-                position: absolute;
-                top: 53.7%;
-                left: 59.4%;
-                width: 7.3%;
-            }
-
-            .progress_pos6_9 {
-                position: absolute;
-                top: 53.7%;
-                left: 66.4%;
-                width: 7.3%;
-            }
-
-            .progress_pos6_10 {
-                position: absolute;
-                top: 53.7%;
-                left: 73.4%;
-                width: 7.3%;
-            }
-
-            .progress_pos6_11 {
-                position: absolute;
-                top: 53.7%;
-                left: 80.4%;
-                width: 6.2%;
+                top: 66.3%;
+                left: 4.9%;
+                width: 26%;
             }
 
             .progress_pos7 {
                 position: absolute;
-                top: 31.5%;
-                left: 14.1%;
-                width: 23.7%;
+                top: 41.3%;
+                left: 4.75%;
+                width: 14.7%;
             }
 
             .progress_pos8 {
                 position: absolute;
-                top: 31.5%;
-                left: 86.5%;
-                width: 23.7%;
+                top: 7.8%;
+                left: 10%;
+                width: 22%;
             }
 
             .progress_pos9 {
                 position: absolute;
-                top: 47%;
-                left: 13%;
-                width: 5.2%;
-            }
-
-            .progress_pos9_2 {
-                position: absolute;
-                top: 47%;
-                left: 17.8%;
-                width: 7.3%;
-            }
-
-            .progress_pos9_3 {
-                position: absolute;
-                top: 47%;
-                left: 24.8%;
-                width: 7.3%;
-            }
-
-            .progress_pos9_4 {
-                position: absolute;
-                top: 47%;
-                left: 31.8%;
-                width: 7.3%;
-            }
-
-            .progress_pos9_5 {
-                position: absolute;
-                top: 47%;
-                left: 38.8%;
-                width: 7.3%;
-            }
-
-            .progress_pos9_6 {
-                position: absolute;
-                top: 47%;
-                left: 45.8%;
-                width: 7.3%;
-            }
-
-            .progress_pos9_7 {
-                position: absolute;
-                top: 47%;
-                left: 52.8%;
-                width: 7.3%;
-            }
-
-            .progress_pos9_8 {
-                position: absolute;
-                top: 47%;
-                left: 59.8%;
-                width: 7.3%;
+                top: 57%;
+                left: 38.1%;
+                width: 19.8%;
             }
 
-            .progress_pos9_9 {
-                position: absolute;
-                top: 47%;
-                left: 66.8%;
-                width: 7.3%;
-            }
-
-            .progress_pos9_10 {
-                position: absolute;
-                top: 47%;
-                left: 73.8%;
-                width: 7.3%;
-            }
-
-            .progress_pos9_11 {
-                position: absolute;
-                top: 47%;
-                left: 80.8%;
-                width: 4.9%;
-            }
-
-
             .progress_pos10 {
                 position: absolute;
-                top: 92%;
-                left: 13%;
-                width: 5.2%;
-            }
-
-            .progress_pos10_2 {
-                position: absolute;
-                top: 92%;
-                left: 17.8%;
-                width: 7.3%;
-            }
-
-            .progress_pos10_3 {
-                position: absolute;
-                top: 92%;
-                left: 24.8%;
-                width: 7.3%;
-            }
-
-            .progress_pos10_4 {
-                position: absolute;
-                top: 92%;
-                left: 31.8%;
-                width: 7.3%;
+                top: 57%;
+                left: 57.6%;
+                width: 19.8%;
             }
 
-            .progress_pos10_5 {
-                position: absolute;
-                top: 92%;
-                left: 38.8%;
-                width: 7.3%;
-            }
-
-            .progress_pos10_6 {
-                position: absolute;
-                top: 92%;
-                left: 45.8%;
-                width: 7.3%;
-            }
-
-            .progress_pos10_7 {
-                position: absolute;
-                top: 92%;
-                left: 52.8%;
-                width: 7.3%;
-            }
-
-            .progress_pos10_8 {
-                position: absolute;
-                top: 92%;
-                left: 59.8%;
-                width: 7.3%;
-            }
-
-            .progress_pos10_9 {
+            .progress_pos11 {
                 position: absolute;
-                top: 92%;
-                left: 66.8%;
-                width: 7.3%;
+                top: 64%;
+                left: 77.24%;
+                width: 7%;
             }
 
-            .progress_pos10_10 {
+            .progress_pos12_1 {
                 position: absolute;
-                top: 92%;
-                left: 73.8%;
-                width: 7.3%;
+                top: 75.2%;
+                left: 12.4%;
+                width: 13.7%;
             }
 
-            .progress_pos10_11 {
+            .progress_pos12_2 {
                 position: absolute;
-                top: 92%;
-                left: 80.8%;
-                width: 4.9%;
+                top: 75.2%;
+                left: 25.9%;
+                width: 19.7%;
             }
 
-            .progress_pos11 {
+            .progress_pos12_3 {
                 position: absolute;
-                top: 69.8%;
-                left: 13%;
-                width: 23.7%;
+                top: 75.2%;
+                left: 45.4%;
+                width: 19.7%;
             }
 
-            .progress_pos12 {
+            .progress_pos12_4 {
                 position: absolute;
-                top: 69.8%;
-                left: 85.5%;
-                width: 23.7%;
+                top: 75.2%;
+                left: 64.9%;
+                width: 11%;
             }
 
             .progress_pos13 {
                 position: absolute;
-                top: 25.8%;
-                left: 11%;
-                width: 4.3%;
+                top: 78%;
+                left: 82%;
+                width: 5%;
             }
 
             .progress_pos14 {
                 position: absolute;
-                top: 25.8%;
-                left: 87.35%;
-                width: 4.3%;
+                top: 49.4%;
+                left: 97%;
+                width: 27.5%;
             }
 
             .progress_pos15 {
                 position: absolute;
-                top: 35.3%;
-                left: 9.9%;
-                width: 4.3%;
+                top: 75.2%;
+                left: 84.4%;
+                width: 12.75%;
             }
 
-
-
             .progress_pos16 {
                 position: absolute;
-                top: 60.3%;
-                left: 8.9%;
-                width: 4.3%;
+                top: 87.45%;
+                left: 89.1%;
+                width: 4%;
             }
 
         }
-
     }
 }
 </style>

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

@@ -0,0 +1,408 @@
+<template>
+    <div class="page">
+        <HeaderComponent title="铁合金PID"></HeaderComponent>
+        <div class="content_page">
+            <!-- 铁合金PID 页面 -->
+            <div class="tanks">
+                <VTypeTankValves4 title="V1001" :waterLevelValue="30" :iconSize="120" class="tank_V1001" />
+                <VTypeTankValves4 title="V1002" :waterLevelValue="30" :iconSize="120" class="tank_V1002" />
+                <VTypeTankValves4 title="V1003" :waterLevelValue="30" :iconSize="120" class="tank_V1003" />
+                <VTypeTankValves4 title="V1004" :waterLevelValue="30" :iconSize="120" class="tank_V1004" />
+                <VTypeTankValves4 title="V1005" :waterLevelValue="30" :iconSize="120" class="tank_V1005" />
+                <VTypeTankValves4 title="V1006" :waterLevelValue="30" :iconSize="120" class="tank_V1006" />
+
+                <SeparatorTowerValves2 title="F1001" :waterLevelValue="30" :iconSize="150" class="tank_F1001" />
+                <GorXTypeTanksValves tankType="G" :iconHeight="150" :iconSize="80" class="tank_GType" />
+
+                <GorXTypeTanksValves tankType="X" :iconHeight="150" :iconSize="80" class="tank_XType" />
+                <VTypeTank2 title="Q1001" :iconHeight="200" :iconSize="150" :waterLevelValue="30"
+                    class="tank_Q1001 zIndex10" />
+
+            </div>
+            <!-- 外部管道排布 -->
+            <div class="outer_progress">
+                <!-- 降水井-P1008泵相关拓展管道 -->
+                <Pipe :pipeStatus="initPipeStatus" :strokeWidth="pipeWidth"
+                    class="progress_steam progress_pos1 rotate_90" />
+                <!-- P1001泵-QQF1001管道  -->
+                <Pipe :pipeStatus="initPipeStatus" :strokeWidth="pipeWidth"
+                    class="progress_steam progress_pos2 rotate_270" />
+                <Pipe :pipeStatus="initPipeStatus" :strokeWidth="pipeWidth" class="progress_steam progress_pos3" />
+                <!-- QQF1002-混合器RH1001管道 -->
+                <Pipe :pipeStatus="initPipeStatus" :strokeWidth="pipeWidth"
+                    class="progress_steam progress_pos4 rotate_90" />
+                <Pipe :pipeStatus="initPipeStatus" :strokeWidth="pipeWidth" class="progress_steam progress_pos5" />
+                <!-- 混合器RH1001-V1003相关管道 -->
+                <Pipe :pipeStatus="initPipeStatus" :strokeWidth="pipeWidth" class="progress_steam progress_pos6" />
+                <!-- P1009泵-QQF1017相关管道 -->
+                <Pipe :pipeStatus="initPipeStatus" :strokeWidth="pipeWidth" class="progress_steam progress_pos7" />
+                <!-- 配方人工加药-V1002管道 -->
+                <Pipe :pipeStatus="initPipeStatus" :strokeWidth="pipeWidth"
+                    class="progress_steam progress_pos8 rotate_90" />
+                <!-- V1003罐-V1004罐 管道 -->
+                <Pipe :pipeStatus="initPipeStatus" :strokeWidth="pipeWidth" class="progress_steam progress_pos9" />
+                <!-- P1004泵-QQF1004管道 -->
+                <Pipe :pipeStatus="initPipeStatus" :strokeWidth="pipeWidth" class="progress_steam progress_pos10" />
+                <Pipe :pipeStatus="initPipeStatus" :strokeWidth="pipeWidth"
+                    class="progress_steam rotate_270 progress_pos10_1" />
+                <!-- QQF10123(分离塔)-V1003罐 管道 -->
+                <Pipe :pipeStatus="initPipeStatus" :strokeWidth="pipeWidth"
+                    class="progress_steam progress_pos11 rotate_180" />
+                <!-- P1003泵-QQF1015管道 -->
+                <Pipe :pipeStatus="initPipeStatus" :strokeWidth="pipeWidth" class="progress_steam progress_pos12" />
+                <Pipe :pipeStatus="initPipeStatus" :strokeWidth="pipeWidth"
+                    class="progress_steam progress_pos13 rotate_90" />
+                <!-- Q1001-F1001 管道 -->
+                <Pipe :pipeStatus="initPipeStatus" :strokeWidth="pipeWidth" class="progress_steam progress_pos14" />
+                <!-- 空压机KY1001-Q1001 管道 -->
+                <Pipe :pipeStatus="initPipeStatus" :strokeWidth="pipeWidth" class="progress_steam progress_pos15" />
+                <!-- Q1001-接至喷淋室 -->
+                <Pipe :pipeStatus="initPipeStatus" :strokeWidth="pipeWidth"
+                    class="progress_steam progress_pos16 rotate_90" />
+
+            </div>
+
+            <!-- 其他图标 -->
+            <div class="icon_others">
+                <div class="icon_other pipelineMixer_pos">
+                    <i class="icon iconfont-hnyz-colour icon-hnyz-colourpipelineMixer"></i>
+                    <div class="icon_title">混合器RH1001</div>
+                </div>
+                <div class="icon_other dryingMachine_pos">
+                    <i class="icon iconfont-hnyz-colour icon-hnyz-colourdryingMachine"></i>
+                    <div class="icon_title">空压机KY1001</div>
+                </div>
+            </div>
+            <!-- 外部组件 -->
+            <div class="outer_components">
+                <ValveProgress :iconSize="30" title="QQF1003" :rotateAngle="0" :pipeLength="850" :pipeLeftOffset="-193"
+                    :valveStatusArr="initValveStatusArr" progressType="steam" :pipeStatus="initPipeStatus"
+                    class="component_pos1" />
+                <ValveProgress :iconSize="30" title="QQF1002" :rotateAngle="0" :pipeLength="322" :pipeLeftOffset="-167"
+                    :valveStatusArr="initValveStatusArr" progressType="steam" :pipeStatus="initPipeStatus"
+                    class="component_pos2" />
+            </div>
+
+            <!-- 大箭头指向 -->
+            <div class="arrows">
+                <Arrow flexDir="row" arrowDir="down" arrowText="引自n个降水井" :iconSize="65" :fontSize="12"
+                    class="arrow_pos1" />
+                <Arrow flexDir="column" arrowDir="down" :iconFirst="false" arrowText="配方人工加药" :iconSize="65"
+                    :fontSize="12" class="arrow_pos2" />
+                <Arrow flexDir="column" arrowDir="down" arrowText="接至喷淋室" :iconSize="65" :fontSize="12"
+                    class="arrow_pos3" />
+
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import SeparatorTowerValves2 from '@/components/HnyzDcs/SeparatorTowerValves2Component.vue';
+import GorXTypeTanksValves from '@/components/HnyzDcs/GorXTypeTanksValvesComponent.vue';
+import VTypeTank2 from '@/components/HnyzDcs/VTypeTank2Component.vue';
+import VTypeTankValves4 from '@/components/HnyzDcs/VTypeTankValves4Component.vue';
+import ValveProgress from '@/components/DCS/ValveProgressComponent.vue';
+import Pipe from '@/components/HnyzDcs/PipeComponent.vue';
+import Arrow from '@/components/HnyzDcs/ArrowComponent.vue';
+import { useValveHelper } from '@/hooks/useValveHelper'
+import { computed, onMounted, onBeforeUnmount } from 'vue';
+
+import { stompClient } from '@/utils/ws/stompClient';
+import { updateZTPageConfig } from '@/api/dcs/configurePage';
+
+const initPipeStatus = true
+const initValveStatusArr = [true]
+//初始管道宽度
+const pipeWidth = 4.8
+
+</script>
+
+<style lang="scss" scoped>
+.page {
+    width: 1920px;
+    height: 1080px;
+    background-color: #0b172c;
+
+    .content_page {
+        position: relative;
+        width: 100%;
+        height: 1000px;
+
+        //罐体
+        .tanks {
+            .tank_V1001 {
+                position: absolute;
+                top: 40%;
+                left: 10.6%;
+                transform: translate(-50%, -50%);
+            }
+
+            .tank_V1002 {
+                position: absolute;
+                top: 28%;
+                left: 18%;
+                transform: translate(-50%, -50%);
+            }
+
+            .tank_V1003 {
+                position: absolute;
+                top: 40%;
+                left: 36%;
+                transform: translate(-50%, -50%);
+            }
+
+            .tank_V1004 {
+                position: absolute;
+                top: 44%;
+                left: 41%;
+                transform: translate(-50%, -50%);
+            }
+
+            .tank_V1005 {
+                position: absolute;
+                top: 14.8%;
+                left: 24.9%;
+                transform: translate(-50%, -50%);
+            }
+
+            .tank_V1006 {
+                position: absolute;
+                top: 25%;
+                left: 35%;
+                transform: translate(-50%, -50%);
+            }
+
+            .tank_F1001 {
+                position: absolute;
+                top: 70%;
+                left: 55%;
+                transform: translate(-50%, -50%);
+            }
+
+            .tank_GType {
+                position: absolute;
+                top: 27%;
+                left: 68.8%;
+                transform: translate(-50%, -50%);
+            }
+
+            .tank_XType {
+                position: absolute;
+                top: 27%;
+                left: 85%;
+                transform: translate(-50%, -50%);
+            }
+
+            .tank_Q1001 {
+                position: absolute;
+                top: 65%;
+                left: 35%;
+                transform: translate(-50%, -50%);
+            }
+        }
+
+        //其他图标
+        .icon_others {
+            .icon_other {
+                display: flex;
+                align-items: center;
+                z-index: 100;
+
+                .iconfont-hnyz-colour {
+                    font-size: 75px;
+                }
+
+                .icon_title {
+                    font-size: 12px;
+                    color: aliceblue;
+                }
+            }
+
+            //管道混合器
+            .pipelineMixer_pos {
+                flex-direction: column;
+                position: absolute;
+                top: 33%;
+                left: 27%;
+
+                .iconfont-hnyz-colour {
+                    font-size: 100px;
+                }
+            }
+            //空压机
+            .dryingMachine_pos {
+                flex-direction: column;
+                position: absolute;
+                top: 60%;
+                left: 22%;
+            }
+        }
+
+        //外部组件
+        .outer_components {
+            .component_pos1 {
+                position: absolute;
+                top: 37.5%;
+                left: 17%;
+            }
+
+            .component_pos2 {
+                position: absolute;
+                top: 25.4%;
+                left: 24%;
+            }
+        }
+
+        //箭头指向
+        .arrows {
+            .arrow_pos1 {
+                position: absolute;
+                top: 6%;
+                left: 4%;
+                transform: translate(-50%, -50%);
+            }
+
+            .arrow_pos2 {
+                position: absolute;
+                top: 12%;
+                left: 19%;
+                transform: translate(-50%, -50%);
+            }
+
+            .arrow_pos3 {
+                position: absolute;
+                top: 75.5%;
+                left: 43%;
+                transform: translate(-50%, -50%);
+            }
+
+        }
+
+        //外部管道排布
+        .outer_progress {
+            .progress_pos1 {
+                position: absolute;
+                top: 25%;
+                left: 2%;
+                width: 16%;
+            }
+
+            .progress_pos2 {
+                position: absolute;
+                top: 28.3%;
+                left: 14.1%;
+                width: 11.8%;
+            }
+
+            .progress_pos3 {
+                position: absolute;
+                top: 16.9%;
+                left: 14%;
+                width: 3.2%;
+            }
+
+            .progress_pos4 {
+                position: absolute;
+                top: 32%;
+                left: 26.3%;
+                width: 5%;
+            }
+
+            .progress_pos5 {
+                position: absolute;
+                top: 36.4%;
+                left: 26.2%;
+                width: 2%;
+            }
+
+
+            .progress_pos6 {
+                position: absolute;
+                top: 38%;
+                left: 31.5%;
+                width: 3%;
+            }
+
+            .progress_pos7 {
+                position: absolute;
+                top: 13.9%;
+                left: 28.4%;
+                width: 5.7%;
+            }
+
+            .progress_pos8 {
+                position: absolute;
+                top: 20%;
+                left: 19%;
+                width: 4%;
+            }
+
+            .progress_pos9 {
+                position: absolute;
+                top: 40%;
+                left: 37.3%;
+                width: 3%;
+            }
+
+            .progress_pos10 {
+                position: absolute;
+                top: 16.9%;
+                left: 44.5%;
+                width: 14.7%;
+            }
+
+            .progress_pos10_1 {
+                position: absolute;
+                top: 28.2%;
+                left: 44.5%;
+                width: 11.7%;
+            }
+
+            .progress_pos11 {
+                position: absolute;
+                top: 36%;
+                left: 37%;
+                width: 25%;
+            }
+
+            .progress_pos12 {
+                position: absolute;
+                top: 43.1%;
+                left: 44.5%;
+                width: 4.5%;
+            }
+
+            .progress_pos13 {
+                position: absolute;
+                top: 59%;
+                left: 48.9%;
+                width: 16.4%;
+            }
+
+            .progress_pos14 {
+                position: absolute;
+                top: 63%;
+                left: 37%;
+                width: 12.8%;
+            }
+
+            .progress_pos15 {
+                position: absolute;
+                top: 64%;
+                left: 25%;
+                width: 8%;
+            }
+
+            .progress_pos16 {
+                position: absolute;
+                top: 67.3%;
+                left: 43%;
+                width: 4.3%;
+            }
+
+        }
+
+    }
+}
+</style>