feat(hnyzConfiguratePage):反应流程组态页面

ui/src/hooks/useValveHelper.js

@@ -3,20 +3,22 @@ import { unref } from 'vue'
 
 export function useValveHelper(valveArrRef) {
   // 兼容 ref/reactive/普通数组
-  const getArr = () => unref(valveArrRef)
+  const getArr = () => Array.isArray(unref(valveArrRef)) ? unref(valveArrRef) : [];
 
-  // 获取某个 设备 的数据数组(泵、阀门、传感器)
+  // 获取某个设备的数据数组(泵、阀门、传感器)
   const getDataArrByCode = (code) => {
-    // 检查 code 是否有效
     if (!code || typeof code !== 'string') return [];
 
-    const valve = getArr().find(v => {
+    const valveList = getArr();
+    if (!Array.isArray(valveList)) return [];
+
+    const valve = valveList.find(v => {
       const vCode = v?.code;
       return typeof vCode === 'string' && vCode.toUpperCase() === code.toUpperCase();
     });
 
     return valve?.value || [];
-  }
+  };
 
   // 检查某个 设备 是否存在
   const hasValve = (code) => {
@@ -47,8 +49,7 @@ export function useValveHelper(valveArrRef) {
 
     if (codes.length === 1) {
       const matched = arr.find(item => item.code === codes[0]);
-      if (!matched) return false; // 没匹配到
-      return matched.value?.[0] === true;
+      return isDeviceOpen(matched)
     } else {
       const codeSet = new Set(codes);
       const matched = arr.filter(item => codeSet.has(item.code));
@@ -56,7 +57,7 @@ export function useValveHelper(valveArrRef) {
       if (matched.length !== codes.length) {
         return false; // 有 code 没匹配到
       }
-      return matched.every(item => item.value?.[0] === true);
+      return matched.every(isDeviceOpen);
     }
   };
 
@@ -64,15 +65,28 @@ export function useValveHelper(valveArrRef) {
   const getValveOrStatus = (...codes) => {
     const arr = getArr();
     if (codes.length === 1) {
-      return arr.some(item => item.code === codes[0] && item.value?.[0] === true);
+      return arr.some(item => item.code === codes[0] && isDeviceOpen(item));
     } else {
       const codeSet = new Set(codes);
-      return arr.some(item => codeSet.has(item.code) && item.value?.[0] === true);
+      return arr.some(item => codeSet.has(item.code) && isDeviceOpen(item));
     }
   };
 
-  // json 条件判断
-  const evaluateCondition = (condition) => {
+  // 单个阀门或泵状态判断
+  const isDeviceOpen = (device) => {
+    if (!device || !device.code || !device.value) return false;
+
+    const firstVal = device.value[0];
+
+    if (typeof firstVal === 'boolean') return firstVal; // 阀门
+    if (typeof firstVal === 'number') return firstVal === 1; // 泵
+
+    return false;
+  };
+
+
+  // json 条件判断  未设条件的话返回result默认值
+  const evaluateCondition = (condition, result = false) => {
     // 尝试解析 JSON 字符串为对象
     if (typeof condition === 'string') {
       try {
@@ -87,7 +101,7 @@ export function useValveHelper(valveArrRef) {
     const operator = condition.operator;
     const conditions = condition.conditions;
 
-    if (!Array.isArray(conditions) || !operator || conditions.length === 0) return false;
+    if (!Array.isArray(conditions) || !operator || conditions.length === 0) return result;
 
     const results = conditions.map(cond => {
       if (cond.type === 'group') {

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

@@ -0,0 +1,165 @@
+<template>
+    <div class="page">
+        <HeaderComponent title="反应流程"></HeaderComponent>
+        <div class="content_page">
+            <PageDrawer :pages="pageItems_Na2SO4" class="page_drawer" />
+            <!-- 阀门 -->
+            <div class="valves">
+                <component v-for="item in deviceConfigGroup.VALVES" :key="item.id" :is="getComponentName(item.modelId)"
+                    :title="getEquipmentTitle(item.equipmentName)" :valveStatusArr="getDataArrByCode(item.code)"
+                    :rotateAngle="item.rotate || 0" :iconSize="item.size" :style="getComponentStyle(item)" />
+            </div>
+
+            <!-- 泵 -->
+            <div class="pumps">
+                <component v-for="item in deviceConfigGroup.PUMPS" :key="item.id" :is="getComponentName(item.modelId)"
+                    :title="getEquipmentTitle(item.title)" :pumpDataArr="pumpHelper.getDataArrByCode(item.code)"
+                    :isReverse="item.isReverse" :iconSize="item.size" :style="getComponentStyle(item)" />
+            </div>
+
+            <!-- 罐体 -->
+            <div class="tanks">
+                <component v-for="item in deviceConfigGroup.TANKS" :key="item.id" :is="getComponentName(item.modelId)"
+                    :title="getEquipmentTitle(item.equipmentName)" :iconSize="item.size" :iconWidth="item.width"
+                    :iconHeight="item.height" :style="getComponentStyle(item)" />
+            </div>
+
+            <!-- 传感器 -->
+            <div class="sensors">
+                <component v-for="item in deviceConfigGroup.SENSORS" :key="item.id" :is="getComponentName(item.modelId)"
+                    :title="getEquipmentTitle(item.equipmentName)"
+                    :sensorValue="sensorHelper.getDataArrByCode(item.code)" :sensorWidth="item.width"
+                    :sensorHeight="item.height" :sensorSize="item.size" :style="getComponentStyle(item)" />
+            </div>
+
+            <!-- 其他设备 -->
+            <div class="icon_others">
+                <component v-for="item in deviceConfigGroup.ICONS" :key="item.id" :is="getComponentName(item.modelId)"
+                    :iconSize="item.size" :iconClass="getIconClass(item.modelId)" :style="getComponentStyle(item)"
+                    :title="getEquipmentTitle(item.equipmentName)" />
+            </div>
+
+            <!-- 管道  -->
+            <div class="pipelines">
+                <component v-for="item in pipeConfig" :key="item.id" :is="getComponentName(item.modelId)"
+                    :pipeStatus="evaluateCondition(item.flowCondition, true)" :strokeWidth="item.pipeWidth"
+                    :style="getPipelineStyle(item, evaluateCondition(item.reverseCondition))"
+                    :class="getPipelineClass(item.pipeClass, getPipeType(item.dynamicPipelineCondition))" />
+            </div>
+
+            <!-- 大箭头指向 -->
+            <div class="arrows">
+                <component v-for="item in deviceConfigGroup.ARROWS" :key="item.id" :is="getComponentName(item.modelId)"
+                    :arrowText="getEquipmentTitle(item.equipmentName)" :iconSize="item.size"
+                    :specialCondition="JSON.parse(item.specialCondition)" :style="getComponentStyle(item)" />
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import PageDrawer from '@/components/GeneralComponents/PageDrawerComponent.vue';
+import { computed, onMounted, onBeforeUnmount, reactive } from 'vue';
+import { useRoute } from 'vue-router'
+import { useValveHelper } from '@/hooks/useValveHelper'
+import { stompClient } from '@/utils/ws/stompClient';
+import { useEquipmentLayout } from '@/hooks/useEquipmentLayout'
+import { useComponentHelper } from '@/hooks/useComponentHelper'
+import { updateZTPageConfig } from '@/api/dcs/configurePage';
+import { pageItems_Na2SO4 } from "@/config"
+const route = useRoute()
+const pageCode = route.name
+
+// 获取设备布局 & 数据订阅
+const {
+    pipeConfig,//管道配置信息
+    deviceConfigGroup,//设备配置分组
+    modelMap,//设备模型映射
+    pageParams,//页面参数
+    fetchPageConfig,//获取页面配置
+} = useEquipmentLayout(pageCode)
+
+// 组件渲染辅助方法
+const {
+    getComponentName,
+    getComponentStyle,
+    getIconClass,
+    getEquipmentTitle,
+    getPipelineClass,
+    getPipelineStyle,
+} = useComponentHelper(modelMap)
+
+
+onMounted(async () => {
+    await fetchPageConfig(pageCode).then(res => {
+        updatePageConfig()
+    })
+})
+
+onBeforeUnmount(() => {
+    // 页面销毁时取消订阅
+    stompClient.unsubscribeFromPage(pageCode);
+});
+
+//阀门数据初始化
+const valveArr = [
+]
+//传感器数据初始化
+const sensorArr = [
+]
+//泵数据初始化
+const pumpArr = [
+]
+
+//设备数据分组
+const deviceDataGroup = reactive({
+    VALVES: valveArr,
+    PUMPS: pumpArr,
+    SENSORS: sensorArr,
+})
+
+//更新页面配置
+function updatePageConfig() {
+    updateZTPageConfig(pageCode, pageParams.value)
+        .then(res => {
+            stompClient.subscribeToPage(pageCode, (data) => {
+                deviceDataGroup.VALVES = Object.values(data.VALVES)
+                deviceDataGroup.PUMPS = Object.values(data.PUMPS)
+                deviceDataGroup.SENSORS = Object.values(data.SENSORS)
+            });
+        })
+        .catch(err => {
+            console.log('页面配置失败：', err);
+        });
+}
+const pumpHelper = useValveHelper(computed(() => deviceDataGroup.PUMPS))
+const { getDataArrByCode } = useValveHelper(computed(() => deviceDataGroup.VALVES))
+const sensorHelper = useValveHelper(computed(() => deviceDataGroup.SENSORS))
+const {
+    evaluateCondition, getPipeType
+} = useValveHelper(computed(() => [...deviceDataGroup.VALVES, ...deviceDataGroup.PUMPS]))
+
+
+</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;
+
+        .page_drawer {
+            position: absolute;
+            right: 2%;
+            top: -1%;
+        }
+    }
+}
+</style>