feat(configuratePage):排堵，换热流程实时数据获取

ui/src/components/DCS/J1TankComponent.vue

@@ -45,7 +45,7 @@ const props = defineProps({
 })
 
 // 将 props.valveArr 引用传入
-const { hasValve, getValveStatusArr, getValveAndStatus } = useValveHelper(props.valveArr)
+const { hasValve, getValveStatusArr, getValveAndStatus } = useValveHelper(computed(() => props.valveArr));
 
 const valveNames1 = ['D1', 'D2']
 const valveNames2 = ['D3', '', 'D4']

ui/src/components/DCS/WaterTankComponent.vue

@@ -123,9 +123,10 @@ const option = ref({
                 }
             },
             axisLabel: {
+                show: false,//不显示
                 color: 'inherit',
                 distance: (props.iconSize * 0.05) + 5,
-                fontSize: 8,// 刻度字体大小
+                fontSize: 8,// 刻度字体大小 
             },
             detail: {// 数值显示
                 valueAnimation: true,// 数值变化动画

ui/src/components/DCS/Z1TankComponent.vue

@@ -43,7 +43,7 @@ const props = defineProps({
     },
 })
 // 将 props.valveArr 转换为响应式引用传入
-const { hasValve, getValveStatusArr, getValveAndStatus } = useValveHelper(props.valveArr)
+const { hasValve, getValveStatusArr, getValveAndStatus } = useValveHelper(computed(() => props.valveArr))
 
 const valveNames = ['N21']
 

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

@@ -2,10 +2,12 @@
     <div class="page">
         <HeaderComponent title="排堵流程"></HeaderComponent>
         <div class="content_page">
-            <M1Tank title="M1" :valveArr="valveArr_M1" :waterLevelValue="30" :pressureValue="0.444"
-                :temperatureValue="110" :iconSize="400" :weightValue="100" class="hr_m1Tank"></M1Tank>
-            <M1Tank title="M2" :valveArr="valveArr_M2" :waterLevelValue="30" :pressureValue="0.444"
-                :temperatureValue="110" :iconSize="400" :weightValue="100" class="hr_m2Tank"></M1Tank>
+            <M1Tank title="M1" :valveArr="valveMap.M1" :waterLevelValue="30"
+                :pressureValue="sensorHelper.getDataArrByCode('M1yl')[0]" :temperatureValue="110" :iconSize="400"
+                :weightValue="100" class="hr_m1Tank"></M1Tank>
+            <M1Tank title="M2" :valveArr="valveMap.M2" :waterLevelValue="30"
+                :pressureValue="sensorHelper.getDataArrByCode('M1yl')[0]" :temperatureValue="110" :iconSize="400"
+                :weightValue="100" class="hr_m2Tank"></M1Tank>
             <div class="icon_others">
                 <div class="other1">
                     <div class="other_title"> 储气罐</div>
@@ -64,17 +66,17 @@
 <script setup>
 import M1Tank from '@/components/DCS/M1TankComponent.vue';
 import { useValveHelper } from '@/hooks/useValveHelper'
-import { computed } from 'vue';
+import { computed, onMounted, onBeforeUnmount } from 'vue';
+import { stompClient } from '@/utils/ws/stompClient';
+import { updateZTPageConfig } from '@/api/dcs/configurePage';
+const pageCode = 'blockOut';
+const pageParams = {
+    "M1": ['N4', 'N6', 'N7', 'N8', 'N11'],
+    "M2": ['N14', 'N16', 'N17', 'N18', 'N20'],
+    "SENSORS": ['M1yl', 'M1cz', 'M1wd', 'M2yl', 'M2cz', 'M2wd'],
+}
 //M1罐阀门状态
 const valveArr_M1 = [
-    // {
-    //     code: 'N1',
-    //     value: [true],
-    // },
-    // {
-    //     code: 'N2',
-    //     value: [true],
-    // },
     {
         code: 'N3',
         value: [true],
@@ -99,14 +101,6 @@ const valveArr_M1 = [
         code: 'N8',
         value: [true],
     },
-    // {
-    //     code: 'N9',
-    //     value: [false],
-    // },
-    // {
-    //     code: 'N10',
-    //     value: [true],
-    // },
     {
         code: 'N11',
         value: [true],
@@ -114,18 +108,10 @@ const valveArr_M1 = [
 ]
 
 const valveArr_M2 = [
-    // {
-    //     code: 'N12',
-    //     value: [true],
-    // },
     {
         code: 'N14',
         value: [false],
     },
-    // {
-    //     code: 'N15',
-    //     value: [false],
-    // },
     {
         code: 'N16',
         value: [true],
@@ -138,28 +124,55 @@ const valveArr_M2 = [
         code: 'N20',
         value: [true],
     },
-    // {
-    //     code: 'N13',
-    //     value: [true],
-    // },
     {
         code: 'N18',
         value: [false],
     },
-    // {
-    //     code: 'N19',
-    //     value: [true],
-    // },
 ]
+//传感器状态
+const sensorArr = [
+    {
+        code: 'M1yl',
+        value: [0.5],
+    },
+    {
+        code: 'M2yl',
+        value: [0.5],
+    },
+]
+
+const valveMap = reactive({
+    M1: valveArr_M1,
+    M2: valveArr_M2,
+    SENSORS: sensorArr,
+})
+onMounted(() => {
+    updateZTPageConfig(pageCode, pageParams).then(res => {
+        // console.log('页面配置成功：', res);
+    }).catch(err => {
+        console.log('页面配置失败：', err);
+    });
+    stompClient.subscribeToPage(pageCode, (data) => {
+        valveMap.M1 = Object.values(data.M1)
+        valveMap.M2 = Object.values(data.M2)
+        valveMap.SENSORS = Object.values(data.SENSORS)
+        // console.log('页面数据更新：', data.SENSORS);
+    });
+});
 
+onBeforeUnmount(() => {
+    // 页面销毁时取消订阅
+    stompClient.unsubscribeFromPage(pageCode);
+});
 
 //所有阀门状态
-const valveArr = [...new Set([
-    ...valveArr_M1,
-    ...valveArr_M2,
-])];
+const valveArr = computed(() => [...new Set([
+    ...valveMap.M1,
+    ...valveMap.M2,
+])]);
 
 const { getValveAndStatus, getValveOrStatus } = useValveHelper(valveArr)
+const sensorHelper = useValveHelper(computed(() => valveMap.SENSORS))
 
 //n18处管道流通状态
 const N18_status = computed(() => {

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

@@ -2,26 +2,29 @@
     <div class="page">
         <HeaderComponent title="换热流程"></HeaderComponent>
         <div class="content_page">
-            <M1Tank title="M1" :valveArr="valveArr_M1" :waterLevelValue="30" :pressureValue="0.444"
-                :temperatureValue="110" :iconSize="400" :weightValue="100" class="hr_m1Tank"></M1Tank>
-            <Z1Tank title="Z1" :valveArr="valveArr_Z1" :iconSize="300" class="hr_z1Tank"></Z1Tank>
-
-            <J1Tank title="J1" :valveArr="valveArr_J1" :iconSize="300" class="hr_j1Tank"></J1Tank>
-            <J1Tank title="J2" :valveArr="valveArr_J2" :iconSize="300" class="hr_j2Tank"></J1Tank>
-            <M1Tank title="M2" valvePosition="right" :valveArr="valveArr_M2" :waterLevelValue="30"
-                :pressureValue="0.444" :temperatureValue="110" :iconSize="400" :weightValue="100" class="hr_m2Tank">
+            <M1Tank title="M1" :valveArr="valveMap.M1" :iconSize="400" :waterLevelValue="30"
+                :pressureValue="sensorHelper.getDataArrByCode('M1yl')[0]" :temperatureValue="30" :weightValue="300"
+                class="hr_m1Tank">
+            </M1Tank>
+            <Z1Tank title="Z1" :valveArr="valveMap.Z1" :iconSize="300" class="hr_z1Tank"></Z1Tank>
+
+            <J1Tank title="J1" :valveArr="valveMap.J1" :iconSize="300" class="hr_j1Tank"></J1Tank>
+            <J1Tank title="J2" :valveArr="valveMap.J2" :iconSize="300" class="hr_j2Tank"></J1Tank>
+            <M1Tank title="M2" valvePosition="right" :valveArr="valveMap.M2" :waterLevelValue="30"
+                :pressureValue="sensorHelper.getDataArrByCode('M2yl')[0]" :temperatureValue="110" :iconSize="400"
+                :weightValue="100" class="hr_m2Tank">
             </M1Tank>
             <!-- 泵 -->
             <div class="pumps">
                 <!-- lb3 -->
                 <div class="lb3_pos">
-                    <Pump title="换热出液泵" :hz="5000" :pumpStatus="正转" :iconSize="100"></Pump>
+                    <Pump title="换热出液泵" :pumpDataArr="pumpHelper.getDataArrByCode('LB3')" :iconSize="100"></Pump>
                 </div>
                 <div class="lb4_pos">
-                    <Pump title="LB4" :hz="5000" :pumpStatus="正转" pumpDirection="R"></Pump>
+                    <Pump title="LB4" :pumpDataArr="pumpHelper.getDataArrByCode('LB4')" pumpDirection="R"></Pump>
                 </div>
                 <div class="lb7_pos">
-                    <Pump title="换热进液泵" :hz="5000" :pumpStatus="正转" pumpDirection="R"></Pump>
+                    <Pump title="换热进液泵" :pumpDataArr="pumpHelper.getDataArrByCode('LB7')" pumpDirection="R"></Pump>
                 </div>
             </div>
             <div class="icon_others">
@@ -181,9 +184,22 @@ import Z1Tank from '@/components/DCS/Z1TankComponent.vue';
 import Pump from '@/components/DCS/PumpComponent.vue';
 import { useValveHelper } from '@/hooks/useValveHelper'
 import { useRouter } from 'vue-router'
-import { computed } from 'vue';
+import { computed, onMounted, onBeforeUnmount } from 'vue';
 
+import { stompClient } from '@/utils/ws/stompClient';
+import { updateZTPageConfig } from '@/api/dcs/configurePage';
 const router = useRouter()
+
+const pageCode = 'heatExchange';
+const pageParams = {
+    "M1": ['N1', 'N2', 'N4', 'N6', 'N7', 'N8', 'N9', 'N10', 'N11'],
+    "M2": ['N12', 'N14', 'N15', 'N16', 'N17', 'N18', 'N20'],
+    "J1": ['D1', 'D2'],
+    "J2": ['D3', 'D4'],
+    "Z1": ['N21'],
+    "PUMP": ['LB3', 'LB4', 'LB7'],
+    "SENSORS": ['M1yl', 'M1cz', 'M1wd', 'M2yl', 'M2cz', 'M2wd'],
+}
 //M1罐阀门状态
 const valveArr_M1 = [
     {
@@ -302,17 +318,91 @@ const valveArr_Z1 = [
     },
 ]
 
+//传感器状态
+const sensorArr = [
+    {
+        code: 'M1yl',
+        value: [0.5],
+    },
+    {
+        code: 'M1cz',
+        value: [100],
+    },
+    {
+        code: 'M1wd',
+        value: [30],
+    },
+    {
+        code: 'M2yl',
+        value: [0.5],
+    },
+    {
+        code: 'M2cz',
+        value: [100],
+    },
+    {
+        code: 'M2wd',
+        value: [30],
+    },
+]
+const pumpArr = [
+    {
+        code: 'LB3',
+        value: [0, 3],
+    },
+    {
+        code: 'LB4',
+        value: [0, 3],
+    },
+    {
+        code: 'LB7',
+        value: [0, 3],
+    },
+]
+const valveMap = reactive({
+    M1: valveArr_M1,
+    M2: valveArr_M2,
+    J1: valveArr_J1,
+    J2: valveArr_J2,
+    Z1: valveArr_Z1,
+    PUMP: pumpArr,
+    SENSORS: sensorArr,
+})
+onMounted(() => {
+    updateZTPageConfig(pageCode, pageParams).then(res => {
+        // console.log('页面配置成功：', res);
+    }).catch(err => {
+        console.log('页面配置失败：', err);
+    });
+    stompClient.subscribeToPage(pageCode, (data) => {
+        valveMap.M1 = Object.values(data.M1)
+        valveMap.M2 = Object.values(data.M2)
+        valveMap.J1 = Object.values(data.J1)
+        valveMap.J2 = Object.values(data.J2)
+        valveMap.Z1 = Object.values(data.Z1)
+        valveMap.PUMP = Object.values(data.PUMP)
+        valveMap.SENSORS = Object.values(data.SENSORS)
+        // console.log('页面数据更新：', data.SENSORS);
+    });
+});
+
+onBeforeUnmount(() => {
+    // 页面销毁时取消订阅
+    stompClient.unsubscribeFromPage(pageCode);
+});
+
 //所有阀门状态
-const valveArr = [...new Set([
-    ...valveArr_M1,
-    ...valveArr_M2,
-    ...valveArr_J1,
-    ...valveArr_J2,
-    ...valveArr_Z1,
-])];
+const valveArr = computed(() => [...new Set([
+    ...valveMap.M1,
+    ...valveMap.M2,
+    ...valveMap.J1,
+    ...valveMap.J2,
+    ...valveMap.Z1,
+])]);
 
 const { getValveAndStatus, getValveOrStatus } = useValveHelper(valveArr)
-
+const pumpHelper = useValveHelper(computed(() => valveMap.PUMP))
+const sensorHelper = useValveHelper(computed(() => valveMap.SENSORS))
 //n18处管道流通状态
 const N18_status = computed(() => {
     return getValveAndStatus('N18') && getValveOrStatus('N16', 'N17')

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

@@ -5,11 +5,11 @@
             <M1Tank title="M2" :valveArr="valveMap.M2" :waterLevelValue="30"
                 :pressureValue="sensorHelper.getDataArrByCode('M2yl')[0]" :temperatureValue="110" :iconSize="400"
                 :weightValue="100" class="m2Flow_m1Tank"></M1Tank>
-            <S1Tank title="S1" :fanStatus="fanStatus" :valveArr="valveMap.S1" :iconSize="300"
+            <S1Tank title="S1" :fanStatus="fanStatus" :valveArr="valveMap.S1" :iconSize="300" :weightValue="100"
                 :pressureValue="sensorHelper.getDataArrByCode('S1yl')[0]" :waterLevelValue="30"
                 :temperatureValue="sensorHelper.getDataArrByCode('S1wd')[0]" class="m2Flow_s1Tank">
             </S1Tank>
-            <S1Tank title="S2" :fanStatus="fanStatus" :valveArr="valveMap.S2" :iconSize="300"
+            <S1Tank title="S2" :fanStatus="fanStatus" :valveArr="valveMap.S2" :iconSize="300" :weightValue="100"
                 :pressureValue="sensorHelper.getDataArrByCode('S2yl')[0]" :waterLevelValue="30"
                 :temperatureValue="sensorHelper.getDataArrByCode('S2wd')[0]" class="m2Flow_s2Tank">
             </S1Tank>

ui/src/views/dcsForm2/alarmEvent/index.vue

@@ -28,14 +28,14 @@
     </el-form>
 
     <el-row :gutter="10" class="mb8">
-      <el-col :span="1.5">
+      <!-- <el-col :span="1.5">
         <el-button type="primary" plain icon="Plus" @click="handleAdd"
           v-hasPermi="['hnyz:alarmEvent:add']">新增</el-button>
       </el-col>
       <el-col :span="1.5">
         <el-button type="success" plain icon="Edit" :disabled="single" @click="handleUpdate"
           v-hasPermi="['hnyz:alarmEvent:edit']">修改</el-button>
-      </el-col>
+      </el-col> -->
       <el-col :span="1.5">
         <el-button type="danger" plain icon="Delete" :disabled="multiple" @click="handleDelete"
           v-hasPermi="['hnyz:alarmEvent:remove']">删除</el-button>
@@ -71,12 +71,12 @@
       </el-table-column>
       <el-table-column label="告警发生时间" align="center" prop="occurTime" width="180">
         <template #default="scope">
-          <span>{{ parseTime(scope.row.occurTime, '{y}-{m}-{d}') }}</span>
+          <span>{{ parseTime(scope.row.occurTime, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
         </template>
       </el-table-column>
       <el-table-column label="告警恢复时间" align="center" prop="recoverTime" width="180">
         <template #default="scope">
-          <span>{{ parseTime(scope.row.recoverTime, '{y}-{m}-{d}') }}</span>
+          <span>{{ parseTime(scope.row.recoverTime, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
         </template>
       </el-table-column>
       <el-table-column label="告警状态" align="center" prop="status">
@@ -88,8 +88,8 @@
       <el-table-column label="备注" align="center" prop="remark" />
       <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
         <template #default="scope">
-          <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)"
-            v-hasPermi="['hnyz:alarmEvent:edit']">修改</el-button>
+          <!-- <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)"
+            v-hasPermi="['hnyz:alarmEvent:edit']">修改</el-button> -->
           <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)"
             v-hasPermi="['hnyz:alarmEvent:remove']">删除</el-button>
         </template>

ui/src/views/dcsForm2/equipment/index.vue

@@ -146,8 +146,8 @@
 </template>
 
 <script setup name="Equipment">
-import {changeStatus, listEquipment, getEquipment, delEquipment, addEquipment, updateEquipment } from "@/api/hnyz/equipment";
-import { listFlow } from "@/api/hnyz/flow";
+import { changeStatus, listEquipment, getEquipment, delEquipment, addEquipment, updateEquipment } from "@/api/hnyz/equipment";
+import { getFlowList,listFlow } from "@/api/hnyz/flow";
 import { getPlcList } from "@/api/hnyz/plcInfo";
 import { getCommProtocolList } from "@/api/hnyz/commProtocol";
 import { onMounted } from "vue";
@@ -166,10 +166,17 @@ function getOptions() {
 const flowOptions = ref([]);// 流程下拉树结构
 /** 获取流程列表 */
 function getFlowOptions() {
-  listFlow().then(response => {
-    flowOptions.value = response.rows;
+  const params = {
+    flowType: '1',// 1: 普通流程
+  };
+  getFlowList(params).then(response => {
+    flowOptions.value = response.data;
     // console.log(flowOptions.value);
   });
+  // listFlow().then(response => {
+  //   flowOptions.value = response.rows;
+  //   // console.log(flowOptions.value);
+  // });
 }
 const plcOptions = ref([]);// plc下拉树结构
 /** 获取plc列表 */

ui/src/views/dcsForm2/equipmentExtension/index.vue

@@ -120,7 +120,7 @@ onMounted(() => {
 const flowOptions = ref([]);// 流程选项
 // 获取总流程选项
 function getFlowOptions() {
-  getFlowList().then(response => {
+  getFlowList({}).then(response => {
     flowOptions.value = response.data;
     realFlowOptions.value=response.data;
   });
@@ -139,7 +139,8 @@ const realFlowOptions = ref([]);// 真实流程选项
 
 // 获取真实流程选项
 function getRealFlowOptions() {
-  getFlowList({ equipmentId: form.value.equipmentId }).then(response => {
+  const params = { equipmentId: form.value.equipmentId };
+  getFlowList(params).then(response => {
     realFlowOptions.value = response.data;
     //如果queryparams中的flowId不在真实流程选项中，则将其设置为默认值
     if(form.value.flowId && !realFlowOptions.value.some(item=>item.flowId==form.value.flowId)){