style(configuratePage):组态页面管道样式调整

ui/src/components/DCS/M1TankComponent.vue

@@ -251,7 +251,7 @@ const getProgressClass = computed(() => `progress_${getProgressType.value}`);
 
         .progress8_1 {
             width: 152%;
-            top: 57%;
+            top: 60%;
             left: 177%;
         }
     }

ui/src/components/DCS/ValveProgressComponent.vue

@@ -70,7 +70,7 @@ const progressConfig = {
 const getProgressStyle = computed(() => {
     return {
         position: 'absolute',
-        top: '57%',
+        top: '59%',
         left: `${props.pipeLeftOffset}%`,
         width: `${props.pipeLength}%`,
         zIndex: 1,

ui/src/components/DCS/singleValveComponent.vue

@@ -4,13 +4,12 @@
         <i class="icon iconfont icon-waterValve valve" :style="{ fontSize: `${props.iconSize}px` }">
             <div :class="pointerClass" :style="pointerStyle"></div>
         </i>
-        <div class="title" :style="titleStyle">{{ title }}</div>
-        <slot></slot>
+        <div class="title" ref="titleRef" :style="titleStyle">{{ title }}</div>
     </div>
 </template>
 
 <script setup>
-import { defineProps, computed } from 'vue'
+import { defineProps, computed, ref, onMounted, watch, nextTick } from 'vue'
 const props = defineProps({
     title: {
         type: String,
@@ -43,6 +42,37 @@ const props = defineProps({
     }
 })
 
+const titleRef = ref(null)
+const topValue = ref('122%') // 默认值
+// 初次挂载时获取宽度
+onMounted(() => {
+    updateTop()
+})
+
+// 如果 rotateAngle 或 title 变化，可能需要更新 top
+watch(() => [props.rotateAngle, props.title], () => {
+    updateTop()
+})
+// 获取实际 DOM 宽度并计算 top
+const updateTop = () => {
+    nextTick(() => {
+        const el = titleRef.value
+        if (el) {
+            const height = el.offsetWidth
+            // 根据高度偏移一定值
+            topValue.value = props.rotateAngle == 0? topValue.value : `calc(92% + ${height/2}px)`
+        }
+    })
+}
+
+
+// 计算 titleStyle 标题样式
+const titleStyle = computed(() => {
+    return {
+        transform: `translate(-50%, -50%) rotate(${-props.rotateAngle}deg)`,
+        top: topValue.value,
+    }
+})
 
 
 // 计算 pointer 的 class
@@ -59,27 +89,22 @@ const pointerClass = computed(() => {
         if (props.valveCloseSignalStatus) {
             return 'pointer_close'
         } else {
-            return props.valveOpenObj?.value ? 'pointer_to_open' : 'pointer_to_close'
+            return props.valveOpenObj ? 'pointer_to_open' : 'pointer_to_close'
         }
     }
 })
 
-// 计算 titleStyle 
-const titleStyle = computed(() => {
-    return {
-        transform: `rotate(${-props.rotateAngle}deg)`,
-    }
-})
 
+// 计算 pointerStyle指针样式
 const pointerStyle = computed(() => {
-  return {
-    borderRadius: '4px',
-    width: `${props.iconSize * 0.16}px`,
-    height: `${props.iconSize * 0.506}px`,
-    position: 'absolute',
-    left: '43%',
-    top: '41.4%',
-  }
+    return {
+        borderRadius: '4px',
+        width: `${props.iconSize * 0.16}px`,
+        height: `${props.iconSize * 0.506}px`,
+        position: 'absolute',
+        left: '43%',
+        top: '41.4%',
+    }
 })
 
 
@@ -96,8 +121,9 @@ const pointerStyle = computed(() => {
     .title {
         color: #C7D2E0;
         position: absolute;
-        top: 100%;
-        left: 29%;
+        // top: 122%;
+        left: 50%;
+        z-index: 10;
     }
 
     .valve {

ui/src/views/configuratePage/heatExchange/index.vue

@@ -116,7 +116,7 @@
                     class="progress_heat_exchange_fluid progress_13_2" />
                 <el-progress :percentage="100" :stroke-width="progressConfig.strokeWidth" :show-text="false"
                     :striped="N21_status" :striped-flow="N21_status" :duration="20"
-                    class="progress_heat_exchange_fluid progress_14" />
+                    class="progress_heat_exchange_fluid progress_14 rotate_180" />
 
                 <!-- 物料M2(n15)-lb7-j2(d4) -->
                 <el-progress :percentage="100" :stroke-width="progressConfig.strokeWidth" :show-text="false"
@@ -124,10 +124,10 @@
                     class="progress_materials progress_15" />
                 <el-progress :percentage="100" :stroke-width="progressConfig.strokeWidth" :show-text="false"
                     :striped="N15_status" :striped-flow="N15_status" :duration="30"
-                    class="progress_materials progress_16 rotate_270" />
+                    class="progress_materials progress_16 rotate_90" />
                 <el-progress :percentage="100" :stroke-width="progressConfig.strokeWidth" :show-text="false"
                     :striped="N15_status" :striped-flow="N15_status" :duration="30"
-                    class="progress_materials progress_17" />
+                    class="progress_materials progress_17 rotate_180" />
                 <el-progress :percentage="100" :stroke-width="progressConfig.strokeWidth" :show-text="false"
                     :striped="getValveOrStatus('D4')" :striped-flow="getValveOrStatus('D4')" :duration="20"
                     class="progress_materials progress_18 rotate_270" />
@@ -653,7 +653,7 @@ const progressConfig = {
             .progress_7 {
                 position: absolute;
                 top: 18%;
-                left: 15%;
+                left: 15.1%;
                 width: 25%;
             }
 
@@ -709,15 +709,15 @@ const progressConfig = {
             .progress_14 {
                 position: absolute;
                 top: 45%;
-                left: 45.5%;
+                left: 45.6%;
                 width: 6%;
             }
 
             .progress_15 {
                 position: absolute;
                 top: 18%;
-                left: 75%;
-                width: 17%;
+                left: 75.1%;
+                width: 16.9%;
             }
 
             .progress_16 {
@@ -778,7 +778,7 @@ const progressConfig = {
 
             .progress_24 {
                 position: absolute;
-                top: 63.4%;
+                top: 63.5%;
                 left: 89.4%;
                 width: 3.4%;
             }
@@ -807,7 +807,7 @@ const progressConfig = {
             }
 
             .arrow_pos3 {
-                top: 65%;
+                top: 65.1%;
                 left: 95.4%;
                 display: flex;
                 flex-direction: column;

ui/src/views/configuratePage/m1Hydrolyze/index.vue

@@ -675,7 +675,7 @@ const progressConfig = {
 
             .progress_pos13 {
                 position: absolute;
-                top: 17.6%;
+                top: 17.9%;
                 left: 15.3%;
                 width: 6%;
             }

ui/src/views/configuratePage/m2OutMaterial/index.vue

@@ -139,7 +139,7 @@
                 <!-- 通向p1的管道 -->
                 <el-progress :percentage="100" :stroke-width="progressConfig.strokeWidth" :show-text="false"
                     :striped="getValveOrStatus('N13')" :striped-flow="getValveOrStatus('N13')" :duration="19.2"
-                    class="progress_red progress_pos18" />
+                    class="progress_red progress_pos18 rotate_180" />
             </div>
             <!-- 大箭头指向 -->
             <div class="arrows">
@@ -581,14 +581,14 @@ const pumpStatus_N18 = computed(() => {
 
             .progress_pos2 {
                 position: absolute;
-                top: 76.4%;
+                top: 76.5%;
                 left: 52.7%;
                 width: 8.3%;
             }
 
             .progress_pos2_2 {
                 position: absolute;
-                top: 68.4%;
+                top: 68.5%;
                 left: 52.6%;
                 width: 7.3%;
             }
@@ -698,8 +698,8 @@ const pumpStatus_N18 = computed(() => {
             .progress_pos14_4 {
                 position: absolute;
                 top: 14.6%;
-                left: 53.2%;
-                width: 27.7%;
+                left: 53.4%;
+                width: 27.4%;
             }
 
             // 通向m1流程页面的管道
@@ -733,7 +733,7 @@ const pumpStatus_N18 = computed(() => {
 
             .progress_pos18 {
                 position: absolute;
-                top: 54%;
+                top: 54.1%;
                 left: 80%;
                 width: 10%;
             }

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

@@ -0,0 +1,107 @@
+<template>
+    <div class="page">
+        <HeaderComponent title="硫酸钙流程"></HeaderComponent>
+        <div class="content_page">
+            <!-- 罐体 -->
+            <div class="tanks">
+                <!-- <VTypeTankValves title="V2001" :waterLevelValue="30" :iconWidth="300" :phValue="9.5" :fanStatus="true" class="tank_v2001"></VTypeTankValves> -->
+                <!-- <VTypeTankValves2 title="V2001" :waterLevelValue="30" :iconWidth="300" :phValue="9.5" :fanStatus="true" class="tank_v2001"></VTypeTankValves2> -->
+
+                <!-- <RTypeTankValves title="V2001" :waterLevelValue="30" :iconSize="200" :iconWidth="200" :tempValue="35" :fanStatus="true" class="tank_v2001"></RTypeTankValves> -->
+                <!-- <STypeTankValves title="V2001" :waterLevelValue="30" :iconSize="200" :iconWidth="200" :iconHeight="150" :tempValue="35" :fanStatus="true" class="tank_v2001"></STypeTankValves> -->
+                <BK200Separator title="S2003A" class="tank_v2001"></BK200Separator>
+            </div>
+            <!-- 泵 -->
+            <div class="pumps">
+               
+            </div>
+            <!-- 其他图标 -->
+            <div class="icon_others">
+               
+            </div>
+            <!-- 外部管道排布 -->
+            <div class="outer_progress">
+              
+            </div>
+            <!-- 大箭头指向 -->
+            <div class="arrows">
+               
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import VTypeTankValves from '@/components/HnyzDcs/VTypeTankValvesComponent.vue';
+import VTypeTankValves2 from '@/components/HnyzDcs/VTypeTankValves2Component.vue';
+import RTypeTankValves from '@/components/HnyzDcs/RTypeTankValvesComponent.vue';
+import STypeTankValves from '@/components/HnyzDcs/STypeTankValvesComponent.vue';
+import BK200Separator from '@/components/HnyzDcs/BK200SeparatorComponent.vue';
+
+
+import { useValveHelper } from '@/hooks/useValveHelper'
+import { useRouter } from 'vue-router'
+import { computed, onMounted, onBeforeUnmount } from 'vue';
+
+import { stompClient } from '@/utils/ws/stompClient';
+import { updateZTPageConfig } from '@/api/dcs/configurePage';
+const router = useRouter()
+
+
+//进度条配置
+const progressConfig = {
+    strokeWidth: 8,//进度条宽度
+    percentage: 100,//进度条百分比
+    duration: 10,//进度条流速
+    showText: false,//是否显示文字
+}
+
+</script>
+
+<style lang="scss" scoped>
+.page {
+    // width: 100%;
+    // height: 100%;
+    width: 1920px;
+    height: 1080px;
+    background-color: #0b172c;
+
+    .content_page {
+        position: relative;
+        width: 100%;
+        height: 1000px;
+
+        
+        //罐体
+        .tanks {
+            .tank_v2001{
+                position: absolute;
+                top: 40%;
+                left: 50%;
+                transform: translate(-50%, -50%);
+            }
+
+        }
+        //泵
+        .pumps {
+
+        }
+
+        //其他图标
+        .icon_others {
+            
+        }
+
+        //箭头指向
+        .arrows {
+
+        }
+
+        //外部管道排布
+        .outer_progress {
+            
+        }
+
+    }
+}
+</style>