refactor(components):组件更新调整

admin/src/main/java/com/dcs/hnyz/task/WebSocketPushTask.java

@@ -5,19 +5,15 @@ import com.dcs.equipment.server.EquipmentListWebSocketServer;
 import com.dcs.hnyz.cache.CacheCenter;
 import com.dcs.hnyz.domain.AlarmEvent;
 import com.dcs.hnyz.domain.dto.AlarmBroadcastPayload;
-import com.dcs.hnyz.domain.vo.EquipmentParamFormVo;
+import com.dcs.hnyz.domain.vo.EquipmentParamFormVO;
 import com.dcs.hnyz.domain.vo.PageDeviceRealtimeVO;
 import com.dcs.hnyz.service.IDeviceDataService;
 import com.dcs.hnyz.service.impl.AlarmConfigServiceImpl;
 import org.springframework.beans.factory.annotation.Autowired;
-import org.springframework.core.env.Environment;
 import org.springframework.messaging.simp.SimpMessagingTemplate;
-import org.springframework.scheduling.annotation.Scheduled;
 import org.springframework.stereotype.Component;
 
-import javax.annotation.PostConstruct;
 import javax.annotation.Resource;
-import java.util.Arrays;
 import java.util.List;
 import java.util.Map;
 
@@ -49,10 +45,12 @@ public class WebSocketPushTask {
         //模拟数据
 //        CacheCenter.registerNowDataMap.put("N1fm", create("N1fm", true));
 //        CacheCenter.registerNowDataMap.put("N2fm", create("N2fm", true));
-//        CacheCenter.registerNowDataMap.put("D5kxh", create("D5kxh", true));
-//        CacheCenter.registerNowDataMap.put("D5gxh", create("D5gxh", false));
+//        CacheCenter.registerNowDataMap.put("D5kxh", create("D5kxh", false));
 //        CacheCenter.registerNowDataMap.put("D5k", create("D5k", true));
+//        CacheCenter.registerNowDataMap.put("D5gxh", create("D5gxh", false));
 //        CacheCenter.registerNowDataMap.put("S1wdsj", create("S1wdsj", 130));
+//        CacheCenter.registerNowDataMap.put("LB9yxfkpl", create("LB9yxfkpl", 100));
+//        CacheCenter.registerNowDataMap.put("LB9bpztz", create("LB9ztz", 2));
 
         CacheCenter.pageDeviceGroupMap.forEach((pageCode, deviceGroupMap) -> {
             Map<String, List<PageDeviceRealtimeVO>> data = deviceDataService.buildRealtimeData(deviceGroupMap);
@@ -61,15 +59,15 @@ public class WebSocketPushTask {
     }
 
     //仅用来测试
-    private EquipmentParamFormVo create(String code, boolean value) {
-        EquipmentParamFormVo ep = new EquipmentParamFormVo();
+    private EquipmentParamFormVO create(String code, boolean value) {
+        EquipmentParamFormVO ep = new EquipmentParamFormVO();
         ep.setCode(code);
         ep.setValue(value);
         return ep;
     }
 
-    private EquipmentParamFormVo create(String code,int value) {
-        EquipmentParamFormVo ep = new EquipmentParamFormVo();
+    private EquipmentParamFormVO create(String code, int value) {
+        EquipmentParamFormVO ep = new EquipmentParamFormVO();
         ep.setCode(code);
         ep.setValue(value);
         return ep;

ui/src/components/DCS/PumpComponent.vue

@@ -1,6 +1,6 @@
 <template>
     <!-- 泵组件 -->
-    <div class="pump" :style="{ width: `${props.iconSize}px`, height: `${props.iconSize}px` }">
+    <div class="pump" :style="{ width: `${props.iconSize}px`, height: `${props.iconSize}px` }" v-if="props.title">
         <i class="icon iconfont-colour icon_pump" :class="getPumpClass"
             :style="{ fontSize: `${props.iconSize}px` }"></i>
         <div class="pump_title zIndex10" :style="getPumpTitleStyle">
@@ -19,7 +19,6 @@ import { defineProps, computed } from 'vue'
 const props = defineProps({
     title: {
         type: String,
-        required: true
     },
     iconSize: {
         type: Number,
@@ -52,7 +51,7 @@ const props = defineProps({
     //管道长度
     pipeLength: {// 管道长度百分比
         type: Number,
-        default: 60
+        default: 85
     }
 })
 // 频率值 保留两位小数
@@ -119,7 +118,7 @@ const getPipeStyle = computed(() => {
     return {
         width: `${props.pipeLength}%`,
         position: 'absolute',
-        top: '-13%',
+        top: '0%',
         left: `${pipeLeft}`,
     }
 })

ui/src/components/HnyzDcs/ETypeTankComponent.vue

@@ -8,10 +8,12 @@
         </i>
         <!-- 搅拌电机 -->
         <div class="mixer_machine" v-if="typeof fanStatus === 'boolean'">
-            <i class="icon iconfont icon-fengshan" :class="{ 'fan_run': fanStatus }"></i>
+            <i class="icon iconfont icon-fengshan" :class="{ 'fan_run': fanStatus }"
+                :style="{ fontSize: `${iconSize * 0.25}px` }"></i>
         </div>
         <!-- temp值组件 -->
-        <TempSlider :tempValue="tempValue" :sliderWidth="iconSize * 0.05" class="temp_pos" />
+        <TempSlider :tempValue="tempValue" :sliderWidth="iconSize * 0.05" class="temp_pos"
+            :style="getTempSliderStyle" />
     </div>
 </template>
 
@@ -44,10 +46,13 @@ const props = defineProps({
 //解构
 const { iconSize, title, iconWidth, iconHeight } = props
 
+const width = computed(() => props.iconWidth ?? props.iconSize)
+const height = computed(() => props.iconHeight ?? props.iconSize)
+
 //罐体样式
 const getTankBodyStyle = computed(() => ({
-    width: `${iconWidth ?? iconSize}px`,
-    height: `${iconHeight ?? iconSize}px`,
+    width: `${width.value}px`,
+    height: `${height.value}px`,
     fontSize: `${iconSize}px`,
 }))
 
@@ -76,6 +81,17 @@ const getTankClass = computed(() => {
         : 'icon-hnyz-colourheatExchanger';
 });
 
+// 温度组件样式
+const getTempSliderStyle = computed(() => {
+    const leftMap = {
+        100: '54%',
+        150: '59%',
+        200: '62%',
+    };
+    return {
+        left: leftMap[width.value] ?? '54%' 
+    };
+})
 </script>
 
 <style scoped lang="scss">

ui/src/components/HnyzDcs/ETypeTankValves1Component.vue

@@ -94,28 +94,7 @@ const getTankBodyStyle = computed(() => ({
 
 //阀门icon大小（罐子200-阀门50）
 const valveIconSize = computed(() => {
-    return props.iconSize * 0.25;
-});
-
-//阀门进度样式
-const valveProgressStyle = computed(() => {
-    return {
-        width: `${valveIconSize.value}px`,
-        height: `${valveIconSize.value}px`,
-    }
-});
-
-//泵icon大小（罐子200-泵80）
-const pumpIconSize = computed(() => {
-    return props.iconSize * 0.4;
-});
-
-//泵进度样式
-const pumpProgressStyle = computed(() => {
-    return {
-        width: `${pumpIconSize.value}px`,
-        height: `${pumpIconSize.value}px`,
-    }
+    return (props.iconWidth ?? props.iconSize)*0.25;
 });
 
 </script>

ui/src/components/HnyzDcs/ETypeTankValves2Component.vue

@@ -5,33 +5,25 @@
         <!-- 阀门进度 -->
         <div class="valve_progress">
             <!-- 上  -->
-            <div :style="valveProgressStyle" class="valve_progress1 rotate_90" v-if="valveNames[0]">
-                <ValveProgress :iconSize="valveIconSize" :title="valveNames[0]" :rotateAngle="90" :pipeLength="200"
-                    :pipeLeftOffset="-50" :valveStatusArr="initValveStatusArr" progressType="steam"
-                    :pipeStatus="initPipeStatus" />
-            </div>
+            <ValveProgress :iconSize="valveIconSize" :title="valveNames[0]" :rotateAngle="90" :pipeLength="200"
+                :pipeLeftOffset="-50" :valveStatusArr="initValveStatusArr" progressType="steam"
+                :pipeStatus="initPipeStatus" class="valve_progress1 rotate_90" />
             <!-- 下  -->
-            <div :style="valveProgressStyle" class="valve_progress2 rotate_90" v-if="valveNames[1]">
-                <ValveProgress :iconSize="valveIconSize" :title="valveNames[1]" :rotateAngle="90" :pipeLength="200"
-                    :pipeLeftOffset="-50" :valveStatusArr="initValveStatusArr" progressType="steam"
-                    :pipeStatus="initPipeStatus" :pipeReverse="true" />
-            </div>
+            <ValveProgress :iconSize="valveIconSize" :title="valveNames[1]" :rotateAngle="90" :pipeLength="200"
+                :pipeLeftOffset="-50" :valveStatusArr="initValveStatusArr" progressType="steam"
+                :pipeStatus="initPipeStatus" :pipeReverse="true" class="valve_progress2 rotate_90" />
             <!-- 左  -->
-            <div :style="valveProgressStyle" class="valve_progress3" v-if="valveNames[2]">
-                <ValveProgress :iconSize="valveIconSize" :title="valveNames[2]" :pipeLength="264" :pipeLeftOffset="-114"
-                    :valveStatusArr="initValveStatusArr" progressType="steam" :pipeStatus="initPipeStatus"
-                    :pipeReverse="true" />
-            </div>
+            <ValveProgress :iconSize="valveIconSize" :title="valveNames[2]" :pipeLength="264" :pipeLeftOffset="-114"
+                :valveStatusArr="initValveStatusArr" progressType="steam" :pipeStatus="initPipeStatus"
+                :pipeReverse="true" class="valve_progress3" />
             <!-- 右  -->
-            <div :style="valveProgressStyle" class="valve_progress4" v-if="valveNames[3]">
-                <ValveProgress :iconSize="valveIconSize" :title="valveNames[3]" :pipeLength="593" :pipeLeftOffset="-60"
-                    :valveStatusArr="initValveStatusArr" progressType="steam" :pipeStatus="initPipeStatus"
-                    :pipeReverse="true" />
-            </div>
+            <ValveProgress :iconSize="valveIconSize" :title="valveNames[3]" :pipeLength="593" :pipeLeftOffset="-60"
+                :valveStatusArr="initValveStatusArr" progressType="steam" :pipeStatus="initPipeStatus"
+                :pipeReverse="true" class="valve_progress4" />
         </div>
         <!-- 泵进度 -->
         <div class="pump_progress">
-            <PumpProgress :title="pumpNames[0]" :pumpDataArr="[1, 10]" :iconSize="iconSize * 0.4" :showPipe="true"
+            <PumpProgress :title="pumpNames[0]" :pumpDataArr="[1, 10]" :iconSize="pumpIconSize" :showPipe="true"
                 :pipeType="steam" pumpDirection="R" class="pump_progress1" />
         </div>
     </div>
@@ -91,15 +83,12 @@ const getTankBodyStyle = computed(() => ({
 
 //阀门icon大小（罐子200-阀门50）
 const valveIconSize = computed(() => {
-    return props.iconSize * 0.25;
+    return (props.iconWidth ?? props.iconSize) * 0.25;
 });
 
-//阀门进度样式
-const valveProgressStyle = computed(() => {
-    return {
-        width: `${valveIconSize.value}px`,
-        height: `${valveIconSize.value}px`,
-    }
+//泵icon大小（罐子200-泵80）
+const pumpIconSize = computed(() => {
+    return (props.iconWidth ?? props.iconSize) * 0.4;
 });
 
 </script>

ui/src/components/HnyzDcs/FTypeTankComponent.vue

@@ -1,5 +1,5 @@
 <template>
-    <!-- 落地罐：水位、温度 -->
+    <!-- 钠钾锂分离-单个罐体：水位、温度 -->
     <div class="tank_body" :style="getTankBodyStyle">
         <!-- 罐体 -->
         <i class="icon iconfont-hnyz-colour tank" :class="tankIconClass" :style="getTankStyle">

ui/src/components/HnyzDcs/FTypeTankValvesComponent.vue

@@ -1,6 +1,6 @@
 <template>
     <div class="tank_valves" :style="getTankBodyStyle">
-        <!-- 换热器：温度、搅拌 -->
+        <!-- 钠钾锂分离-单个罐体：温度、搅拌 -->
         <FTypeTank :title="title" :waterLevelValue="waterLevelValue" :iconWidth="iconWidth" :iconHeight="iconHeight"
             :iconSize="iconSize" :tempValue="tempValue"></FTypeTank>
         <!-- 阀门进度 -->

ui/src/components/HnyzDcs/STypeTankComponent.vue

@@ -3,12 +3,12 @@
     <div class="tank_body" :style="getTankBodyStyle">
         <!-- 罐体 -->
         <!-- font-size大小可调节 ，根据传进来的值来控制图标的大小 -->
-        <i class="icon iconfont-hnyz-colour icon-hnyz-colourknockoutTower_hollowedOut tank " :style="getTankStyle">
+        <i class="icon iconfont-hnyz-colour tank" :class="tankIconClass" :style="getTankStyle">
             <!-- 标题 -->
             <div class="tank_title" v-if="title">{{ title }}</div>
         </i>
         <!-- 搅拌电机 -->
-        <div class="mixer_machine">
+        <div class="mixer_machine" v-if="typeof fanStatus === 'boolean'">
             <i class="icon iconfont icon-fengshan" :class="{ 'fan_run': getFanStatus }"></i>
         </div>
     </div>
@@ -20,7 +20,7 @@ import { computed } from 'vue'
 const props = defineProps({
     fanStatus: {//风扇状态
         type: Boolean,
-        default: false,
+        default: undefined,
     },
     iconSize: {//图标大小
         type: Number,
@@ -68,6 +68,14 @@ const getFanStatus = computed(() => {
     return props.fanStatus
 })
 
+//图标类名
+const tankIconClass = computed(() => {
+    if(typeof props.fanStatus === 'boolean'){
+        return 'icon-hnyz-colourknockoutTower_hollowedOut'
+    }
+    return 'icon-hnyz-colourknockoutTower'
+})
+
 </script>
 
 <style scoped lang="scss">

ui/src/components/HnyzDcs/SeparatorTowerValvesComponent.vue

@@ -1,8 +1,7 @@
 <template>
     <div class="tank_valves" :style="getTankBodyStyle">
         <!-- 分离塔·  -->
-        <!-- <VTypeTank2 :title="title" :width="width" :height="height" :waterLevelValue="80" :tempValue="50" /> -->
-        <VTypeTank2 title="V7002" :iconSize="iconSize" />
+        <VTypeTank2 title="title" :iconSize="iconSize" />
         <div class="valve_progress">
             <ValveProgress :iconSize="valveIconSize" :title="valveNames[0]" :rotateAngle="270" :pipeLength="1250"
                 :pipeLeftOffset="-1090" :valveStatusArr="initValveStatusArr" progressType="steam" :pipeReverse="true"

ui/src/components/HnyzDcs/TempSliderComponent.vue

@@ -57,8 +57,6 @@ const sliderStyle = computed(() => ({
 
 </script>
 
-
-
 <style scoped lang="scss">
 .slider_demo_block {
     max-width: 600px;
@@ -67,7 +65,7 @@ const sliderStyle = computed(() => ({
 }
 
 :deep(.temp_slider) {
-    height: var(--slider-height, 0.5em);
+    height: var(--slider-height, 0.5em);// 进度条高度
 
     .el-slider__runway .el-slider__button-wrapper .el-slider__button {
         position: absolute;
@@ -84,11 +82,12 @@ const sliderStyle = computed(() => ({
     --runway-width: 10px;
 
     .el-slider__marks-text {
-        font-size: var(--marks-font-size);
+        font-size: var(--marks-font-size);// 刻度字体大小
+        left:130%;// 刻度字体位置
     }
 
     .el-slider__runway {
-        width: var(--runway-width);
+        width: var(--runway-width);// 进度条宽度
     }
 
     .el-slider__runway .el-slider__bar {

ui/src/components/HnyzDcs/VTypeTankComponent.vue

@@ -5,15 +5,14 @@
         <i class="icon iconfont-hnyz-colour tank" :class="tankIconClass" :style="getTankStyle">
             <!-- 标题 200-30px-->
             <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>
         </i>
         <!-- 搅拌电机 -->
         <div class="mixer_machine" v-if="typeof fanStatus === 'boolean'">
             <i class="icon iconfont icon-fengshan" :class="{ 'fan_run': fanStatus }"></i>
         </div>
+        <!-- 水位图 -->
+        <WaterLevelMap :waterLevelValue="waterLevelValue" :textSize="iconSize * 0.12"
+            class="water_level water_level_pos" />
         <!-- ph值组件 -->
         <PhSlider :phValue="phValue" class="ph_pos" />
     </div>
@@ -21,6 +20,7 @@
 
 <script setup>
 import PhSlider from '@/components/HnyzDcs/PhSliderComponent.vue'
+import WaterLevelMap from '@/components/HnyzDcs/WaterLevelMapComponent.vue'
 import { computed } from 'vue'
 
 const props = defineProps({
@@ -34,6 +34,7 @@ const props = defineProps({
     },
     fanStatus: {//风扇状态
         type: Boolean,
+        default: undefined,
     },
     iconSize: {//图标大小
         type: Number,
@@ -72,33 +73,20 @@ const getTankStyle = computed(() => {
     if (scaleX !== 1 || scaleY !== 1) {
         style.transform = `scale(${scaleX}, ${scaleY})`
     }
-
     return style
 })
 
 // 罐型图标
 const tankIconClass = computed(() => {
-    console.log('3getFanStatus', props.fanStatus, typeof props.fanStatus)
     return props.waterLevelValue >= 0 || props.fanStatus ? 'icon-hnyz-colourfloorTank_hollowedOut' : 'icon-hnyz-colourfloorTank'
 });
 
-// 仅传 waterLevelValue，内部组装 config
-const waterLevelConfig = computed(() => ({
-    data: [props.waterLevelValue],
-    waveHeight: 5,// 波浪高度
-}))
-
 //ph值
 const phValue = computed({
     get() {
         return props.phValue
     },
 })
-//风扇状态
-const getFanStatus = computed(() => {
-    console.log('getFanStatus', props.fanStatus, typeof props.fanStatus)
-    return props.fanStatus
-})
 
 </script>
 
@@ -108,6 +96,24 @@ const getFanStatus = computed(() => {
     text-align: center;
     position: relative;
 
+    // 水位
+    .water_level {
+        width: 49%;
+        height: 60%;
+    }
+
+    //水位图位置
+    .water_level_pos {
+        position: absolute;
+        top: 17%;
+        left: 25%;
+    }
+
+    .dv-water-pond-level :deep(canvas) {
+        position: absolute;
+        left: 0%;
+    }
+
     .tank {
         position: relative;
         z-index: 10;
@@ -121,33 +127,6 @@ const getFanStatus = computed(() => {
             color: #e65100;
             font-weight: bold;
         }
-
-        // 水位
-        .water_level {
-            width: 0.4em;
-            height: 0.5em;
-        }
-
-        //水位图位置
-        .water_level_pos3 {
-            position: absolute;
-            top: 18%;
-            left: 30%;
-        }
-
-        .dv-water-pond-level :deep(canvas) {
-            position: absolute;
-            left: 0%;
-        }
-
-        .dv-water-pond-level :deep(rect) {
-            // fill:unset;//去掉默认的颜色
-            width: 99%;
-            height: 99%;
-            stroke-width: 0 !important;
-        }
-
-
     }
 
     .ph_pos {

ui/src/components/HnyzDcs/VTypeTankValves2Component.vue

@@ -4,24 +4,21 @@
             :iconSize="iconSize" :phValue="phValue" :fanStatus="fanStatus"></VTypeTank>
         <div class="valve_progress">
 
-            <div :style="valveProgressStyle" class="valve_progress1 rotate_270" v-if="valveNames[0]">
-                <ValveProgress :iconSize="valveIconSize" :title="valveNames[0]" :rotateAngle="270" :pipeLength="247"
-                    :pipeLeftOffset="-60" :valveStatusArr="initValveStatusArr" progressType="steam" :pipeReverse="true"
-                    :pipeStatus="initPipeStatus" />
-            </div>
-            <div :style="valveProgressStyle" class="valve_progress2" v-if="valveNames[1]">
-                <ValveProgress :iconSize="valveIconSize" :title="valveNames[1]" :pipeLength="200" :pipeLeftOffset="-60"
-                    :valveStatusArr="initValveStatusArr" progressType="steam" :pipeStatus="initPipeStatus" />
-            </div>
+            <ValveProgress :iconSize="valveIconSize" :title="valveNames[0]" :rotateAngle="270" :pipeLength="247"
+                :pipeLeftOffset="-60" :valveStatusArr="initValveStatusArr" progressType="steam" :pipeReverse="true"
+                :pipeStatus="initPipeStatus" class="valve_progress1 rotate_270" />
+            <ValveProgress :iconSize="valveIconSize" :title="valveNames[1]" :pipeLength="200" :pipeLeftOffset="-60"
+                :valveStatusArr="initValveStatusArr" progressType="steam" :pipeStatus="initPipeStatus"
+                class="valve_progress2" />
         </div>
         <div class="pump_progress">
             <div :style="[pumpProgressStyle, { left: props.iconWidth === 300 ? '124%' : '144%' }]"
-                class="pump_progress1" v-if="pumpNames[0]">
+                class="pump_progress1">
                 <Pump :title="pumpNames[0]" :pumpDataArr="[1, 10]" :iconSize="80" :showPipe="true" />
             </div>
-            <div :style="[pumpProgressStyle, { left: props.topPumpDir === 'L' ? '9%' : '108%' }]" class="pump_progress2"
-                v-if="pumpNames[1]">
-                <Pump :title="pumpNames[0]" :pumpDataArr="[1, 10]" :iconSize="80" :pumpDirection="topPumpDir"
+            <div :style="[pumpProgressStyle, { left: props.topPumpDir === 'L' ? '9%' : '108%' }]"
+                class="pump_progress2">
+                <Pump :title="pumpNames[1]" :pumpDataArr="[1, 10]" :iconSize="80" :pumpDirection="topPumpDir"
                     :showPipe="true" />
             </div>
         </div>
@@ -101,8 +98,6 @@ const pumpNames = computed(() => {
     return pumpNameArr[props.title] || defaultPumpNames
 })
 
-
-
 //罐体样式
 const getTankBodyStyle = computed(() => ({
     width: `${props.iconWidth ?? props.iconSize}px`,
@@ -121,14 +116,6 @@ const valveIconSize = computed(() => {
     return props.iconSize * 0.25;
 });
 
-//阀门进度样式
-const valveProgressStyle = computed(() => {
-    return {
-        width: `${valveIconSize.value}px`,
-        height: `${valveIconSize.value}px`,
-    }
-});
-
 //泵icon大小（罐子200-泵80）
 const pumpIconSize = computed(() => {
     return props.iconSize * 0.4;

ui/src/components/HnyzDcs/VTypeTankValvesComponent.vue

@@ -5,32 +5,26 @@
             :iconSize="iconSize" :phValue="phValue" :fanStatus="fanStatus"></VTypeTank>
         <div class="valve_progress">
             <!-- 上右 -->
-            <div :style="valveProgressStyle" class="valve_progress1 rotate_270" v-if="valveNames[0]">
-                <ValveProgress :iconSize="valveIconSize" :title="valveNames[0]" :rotateAngle="270" :pipeLength="205"
-                    :pipeLeftOffset="-47" :valveStatusArr="initValveStatusArr" progressType="steam"
-                    :pipeStatus="initPipeStatus" :pipeReverse="true" />
-            </div>
+            <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 :style="valveProgressStyle" class="valve_progress2" v-if="valveNames[1]">
-                <ValveProgress :iconSize="valveIconSize" :title="valveNames[1]" :pipeLength="200" :pipeLeftOffset="-60"
-                    :valveStatusArr="initValveStatusArr" progressType="steam" :pipeStatus="initPipeStatus" />
-            </div>
+            <ValveProgress :iconSize="valveIconSize" :title="valveNames[1]" :pipeLength="200" :pipeLeftOffset="-60"
+                :valveStatusArr="initValveStatusArr" progressType="steam" :pipeStatus="initPipeStatus"
+                class="valve_progress2" />
             <!-- 右 -->
-            <div :style="valveProgressStyle" class="valve_progress3" v-if="valveNames[2]">
-                <ValveProgress :iconSize="valveIconSize" :title="valveNames[2]" :pipeLength="185" :pipeLeftOffset="-45"
-                    :valveStatusArr="initValveStatusArr" progressType="steam" :pipeStatus="initPipeStatus" />
-            </div>
+            <ValveProgress :iconSize="valveIconSize" :title="valveNames[2]" :pipeLength="185" :pipeLeftOffset="-45"
+                :valveStatusArr="initValveStatusArr" progressType="steam" :pipeStatus="initPipeStatus"
+                class="valve_progress3" />
             <!-- 下 -->
-            <div :style="valveProgressStyle" class="valve_progress4 rotate_270" v-if="valveNames[3]">
-                <ValveProgress :iconSize="valveIconSize" :title="valveNames[3]" :pipeLength="200" :pipeLeftOffset="-40"
-                    :valveStatusArr="initValveStatusArr" progressType="steam" :pipeStatus="initPipeStatus"
-                    :rotateAngle="270" :pipeReverse="true" />
-            </div>
+            <ValveProgress :iconSize="valveIconSize" :title="valveNames[3]" :pipeLength="200" :pipeLeftOffset="-40"
+                :valveStatusArr="initValveStatusArr" progressType="steam" :pipeStatus="initPipeStatus"
+                :rotateAngle="270" :pipeReverse="true" class="valve_progress4 rotate_270" />
         </div>
         <div class="pump_progress">
             <!-- 右  -->
             <PumpProgress :title="pumpNames[0]" :pumpDataArr="[1, 10]" :iconSize="iconSize * 0.4" :showPipe="true"
-                :pipeType="steam" class="pump_progress1" v-if="pumpNames[0]" />
+                :pipeType="steam" class="pump_progress1" />
         </div>
     </div>
 </template>
@@ -87,12 +81,13 @@ const valveNameArr = {
     'V2006': ['', '', 'ACV2061', ''],
     'V2008': ['ACV2072', '', 'ACV2070', ''],
     'V2010': ['ACV2073', 'ACV2071', 'ACV2074', ''],
-    'V2011':['ACV2078','','',''],
-    'V2012':['','','ACV2082',''],
-    'V2013':['ACV2079','','ACV2077',''],
-    'S2008':['ACV2076','','',''],
-    'V2017':['','','ACV2086',''],
-    'V2015':['','','ACV2084',''],
+    'V2011': ['ACV2078', '', '', ''],
+    'V2012': ['', '', 'ACV2082', ''],
+    'V2013': ['ACV2079', '', 'ACV2077', ''],
+    'S2008': ['ACV2076', '', '', ''],
+    'V2017': ['', '', 'ACV2086', ''],
+    'V2015': ['', '', 'ACV2084', ''],
+    'V6109': ['ACV6153', '', 'ACV6154', ''],
 }
 //泵名称映射表
 const pumpNameArr = {
@@ -113,6 +108,7 @@ const pumpNameArr = {
     'S2008': [''],
     'V2017': ['P2023'],
     'V2015': ['P2021'],
+    'V6109': ['P6121'],
 }
 
 //阀门名称数组,根据罐名来匹配
@@ -141,19 +137,9 @@ const phValue = computed({
 
 //阀门icon大小（罐子200-阀门50）
 const valveIconSize = computed(() => {
-    console.log('getFanStatus', props.fanStatus, typeof props.fanStatus)
-
     return props.iconSize * 0.25;
 });
 
-//阀门进度样式
-const valveProgressStyle = computed(() => {
-    return {
-        width: `${valveIconSize.value}px`,
-        height: `${valveIconSize.value}px`,
-    }
-});
-
 </script>
 
 <style scoped lang="scss">

ui/src/components/HnyzDcs/WaterLevelMapComponent.vue

@@ -0,0 +1,39 @@
+<template>
+    <dv-water-level-pond :config="waterLevelConfig" v-if="waterLevelValue > 0"
+        :style="getWaterLevelStyle" />
+</template>
+
+<script setup>
+
+import { computed } from 'vue'
+
+const props = defineProps({
+    waterLevelValue: {
+        type: Number,
+    },
+    textSize: {// 水位图文字大小
+        type: Number,
+        default: 20,
+    }
+})
+
+// 仅传 waterLevelValue，内部组装 config
+const waterLevelConfig = computed(() => ({
+    data: [props.waterLevelValue],
+    waveHeight: 3,// 波浪高度
+}))
+
+//水位表字体样式
+const getWaterLevelStyle = computed(() => ({
+    '--water_level_text_size': `${props.textSize}px`,
+}))
+
+</script>
+
+<style scoped lang="scss">
+
+:deep(svg text) {
+  font-size: var(--water_level_text_size, 20px) !important;
+}
+
+</style>

ui/src/components/HnyzDcs/WaterSinkComponent.vue

@@ -9,10 +9,8 @@
             <div class="u_slot_bottom" :style="bottomStyle"></div>
             <div class="u_slot_side u_slot_right" :style="sideStyle"></div>
         </div>
-
-        <!-- 水位 -->
-        <dv-water-level-pond :config="waterLevelConfig" class="water_level water_level_pos3"
-            v-if="waterLevelValue > 0" :style="getWaterLevelStyle"/>
+        <!-- 水位图 -->
+        <WaterLevelMap :waterLevelValue="waterLevelValue" :textSize="slotWidth * 0.2" class="water_level water_level_pos3" />
         <!-- temp值组件 -->
         <TempSlider :tempValue="tempValue" :sliderHeighth="slotHeight * 0.8" :sliderWidth="slotWidth * 0.08"
             class="temp_pos" v-if="tempValue" />
@@ -24,7 +22,7 @@
 
 <script setup>
 import TempSlider from '@/components/HnyzDcs/TempSliderComponent.vue'
-
+import WaterLevelMap from '@/components/HnyzDcs/WaterLevelMapComponent.vue'
 import { computed } from 'vue'
 
 const props = defineProps({
@@ -75,7 +73,7 @@ const waterLevelConfig = computed(() => ({
     waveHeight: 3,// 波浪高度
 }))
 
-//水位表样式
+// 水位表样式
 const getWaterLevelStyle = computed(() => ({
     '--water_level_text_size': `${slotWidth.value * 0.2}px`,
 }))
@@ -113,7 +111,7 @@ const getWaterLevelStyle = computed(() => ({
         height: 90%;
     }
 
-    :deep(.dv-water-pond-level text){
+    :deep(.dv-water-pond-level text) {
         font-size: var(--water_level_text_size, 20px)
     }