feat(configuratePage):组态页面组件位置改为配置获取

admin/src/main/java/com/dcs/hnyz/controller/EquipmentExtensionController.java

@@ -4,16 +4,10 @@ import java.util.List;
 import javax.servlet.http.HttpServletResponse;
 
 import com.dcs.hnyz.domain.vo.EquipmentExtensionFormVo;
+import com.dcs.hnyz.domain.vo.EquipmentLayoutVO;
 import org.springframework.security.access.prepost.PreAuthorize;
 import org.springframework.beans.factory.annotation.Autowired;
-import org.springframework.web.bind.annotation.GetMapping;
-import org.springframework.web.bind.annotation.PostMapping;
-import org.springframework.web.bind.annotation.PutMapping;
-import org.springframework.web.bind.annotation.DeleteMapping;
-import org.springframework.web.bind.annotation.PathVariable;
-import org.springframework.web.bind.annotation.RequestBody;
-import org.springframework.web.bind.annotation.RequestMapping;
-import org.springframework.web.bind.annotation.RestController;
+import org.springframework.web.bind.annotation.*;
 import com.dcs.common.annotation.Log;
 import com.dcs.common.core.controller.BaseController;
 import com.dcs.common.core.domain.AjaxResult;
@@ -124,4 +118,14 @@ public class EquipmentExtensionController extends BaseController
     public AjaxResult changeStatus(@RequestBody EquipmentExtension equipmentExtension){
         return toAjax(equipmentExtensionService.changeStatus(equipmentExtension));
     }
+
+    /**
+     * 获取设备拓展布局相关参数
+     * @param flowId
+     * @return
+     */
+    @GetMapping("/layout")
+    public AjaxResult getLayout(@RequestParam Integer flowId) {
+        return success(equipmentExtensionService.getLayout(flowId));
+    }
 }

admin/src/main/java/com/dcs/hnyz/domain/EquipmentExtension.java

@@ -5,6 +5,8 @@ import lombok.Data;
 import com.dcs.common.annotation.Excel;
 import com.dcs.common.core.domain.BaseEntity;
 
+import java.math.BigDecimal;
+
 
 /**
  * 设备拓展管理对象 equipment_extension
@@ -38,13 +40,31 @@ public class EquipmentExtension extends BaseEntity {
      * x坐标
      */
     @Excel(name = "x坐标")
-    private String x;
+    private BigDecimal x;
 
     /**
      * y坐标
      */
     @Excel(name = "y坐标")
-    private String y;
+    private BigDecimal y;
+
+    /**
+     * 大小
+     */
+    @Excel(name = "大小")
+    private Integer size;
+
+    /**
+     * 宽
+     */
+    @Excel(name = "宽")
+    private Integer width;
+
+    /**
+     * 高
+     */
+    @Excel(name = "高")
+    private Integer height;
 
     /** 状态 0-启用,1-禁用*/
     @Excel(name = "状态")

admin/src/main/java/com/dcs/hnyz/domain/vo/EquipmentLayoutVO.java

@@ -0,0 +1,26 @@
+package com.dcs.hnyz.domain.vo;
+
+import lombok.Data;
+
+import java.math.BigDecimal;
+
+/**
+ * EquipmentLayoutVO
+ * 设备布局相关参数
+ * @author: hmy
+ * @date: 2025/6/13 16:11
+ */
+@Data
+public class EquipmentLayoutVO {
+    /** 设备编码 */
+    private String code;
+
+    /** 左定位 */
+    private BigDecimal left;
+
+    /** 上定位 */
+    private BigDecimal top;
+
+    /** 设备图标尺寸 */
+    private Integer size;
+}

admin/src/main/java/com/dcs/hnyz/enums/DeviceTypeEnum.java

@@ -16,7 +16,8 @@ public enum DeviceTypeEnum {
     PUMP("2", "泵"),
     TANK("3", "罐体"),
     SENSOR("4", "传感器"),
-    VALVE_NO_FEEDBACK("5", "无反馈阀门");
+    VALVE_NO_FEEDBACK("5", "无反馈阀门"),
+    UNDEFINED("10", "未定义");
 
     private final String code;
     private final String label;

admin/src/main/java/com/dcs/hnyz/service/IEquipmentExtensionService.java

@@ -3,6 +3,7 @@ package com.dcs.hnyz.service;
 import java.util.List;
 import com.dcs.hnyz.domain.EquipmentExtension;
 import com.dcs.hnyz.domain.vo.EquipmentExtensionFormVo;
+import com.dcs.hnyz.domain.vo.EquipmentLayoutVO;
 
 /**
  * 设备拓展管理Service接口
@@ -73,4 +74,6 @@ public interface IEquipmentExtensionService
      * @return
      */
     int changeStatus(EquipmentExtension equipmentExtension);
+
+    List<EquipmentLayoutVO> getLayout(Integer flowId);
 }

admin/src/main/java/com/dcs/hnyz/service/impl/EquipmentExtensionServiceImpl.java

@@ -1,11 +1,15 @@
 package com.dcs.hnyz.service.impl;
 
+import java.util.Arrays;
 import java.util.List;
+import java.util.stream.Collectors;
 
 import com.baomidou.mybatisplus.core.conditions.query.LambdaQueryWrapper;
+import com.dcs.common.enums.GeneralStatus;
 import com.dcs.common.exception.CustomException;
 import com.dcs.hnyz.domain.Equipment;
 import com.dcs.hnyz.domain.vo.EquipmentExtensionFormVo;
+import com.dcs.hnyz.domain.vo.EquipmentLayoutVO;
 import com.dcs.hnyz.service.IEquipmentService;
 import org.springframework.beans.factory.annotation.Autowired;
 import org.springframework.stereotype.Service;
@@ -76,7 +80,7 @@ public class EquipmentExtensionServiceImpl implements IEquipmentExtensionService
         if(ee!=null) {
             throw new CustomException("该设备对应流程已配置");
         }
-        return equipmentExtensionMapper.insertEquipmentExtension(equipmentExtension);
+        return equipmentExtensionMapper.insert(equipmentExtension);
     }
 
     /**
@@ -104,7 +108,7 @@ public class EquipmentExtensionServiceImpl implements IEquipmentExtensionService
         if(ee!=null) {
             throw new CustomException("该设备对应流程已配置");
         }
-        return equipmentExtensionMapper.updateEquipmentExtension(equipmentExtension);
+        return equipmentExtensionMapper.updateById(equipmentExtension);
     }
 
     /**
@@ -116,7 +120,7 @@ public class EquipmentExtensionServiceImpl implements IEquipmentExtensionService
     @Override
     public int deleteEquipmentExtensionByIds(Long[] ids)
     {
-        return equipmentExtensionMapper.deleteEquipmentExtensionByIds(ids);
+        return equipmentExtensionMapper.deleteBatchIds(Arrays.asList(ids));
     }
 
     /**
@@ -128,7 +132,7 @@ public class EquipmentExtensionServiceImpl implements IEquipmentExtensionService
     @Override
     public int deleteEquipmentExtensionById(Long id)
     {
-        return equipmentExtensionMapper.deleteEquipmentExtensionById(id);
+        return equipmentExtensionMapper.deleteById(id);
     }
 
     @Override
@@ -140,4 +144,26 @@ public class EquipmentExtensionServiceImpl implements IEquipmentExtensionService
     public int changeStatus(EquipmentExtension equipmentExtension) {
         return equipmentExtensionMapper.updateById(equipmentExtension);
     }
+
+    /**
+     * 获取该组态流程页面相关设备的布局参数
+     * @param flowId
+     * @return
+     */
+    @Override
+    public List<EquipmentLayoutVO> getLayout(Integer flowId) {
+        LambdaQueryWrapper<EquipmentExtension> wrapper=new LambdaQueryWrapper<>();
+        wrapper.eq(EquipmentExtension::getFlowId,flowId);
+        wrapper.eq(EquipmentExtension::getStatus, GeneralStatus.ENABLE.getCode());
+        List<EquipmentExtension> equipmentExtensions = equipmentExtensionMapper.selectList(wrapper);
+        return equipmentExtensions.stream().map(e->{
+            String code=equipmentService.selectEquipmentByEquipmentId(e.getEquipmentId()).getCode();
+            EquipmentLayoutVO vo=new EquipmentLayoutVO();
+            vo.setCode(code);
+            vo.setLeft(e.getX());
+            vo.setTop(e.getY());
+            vo.setSize(e.getSize());
+            return vo;
+        }).collect(Collectors.toList());
+    }
 }

admin/src/main/resources/mapper/hnyzdcs/EquipmentExtensionMapper.xml

@@ -42,7 +42,7 @@ PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
         ON
         a.equipment_id = b.equipment_id
         INNER JOIN
-        dcs_flow AS c
+        flow AS c
         ON
         a.flow_id = c.flow_id
         <where>

ui/src/api/dcs/configurePage.js

@@ -9,3 +9,14 @@ export function updateZTPageConfig(pageCode, configMap) {
     data: configMap
   })
 }
+
+//获取设备拓展布局相关参数
+export function getLayoutParams(flowId) {
+  return request({
+    url: '/hnyz/extension/layout/',
+    method: 'get',
+    params: {
+      flowId: flowId
+    }
+  })
+}

ui/src/utils/dcs/useLayout.js

@@ -0,0 +1,48 @@
+
+import { reactive } from 'vue'
+import { getLayoutParams } from '@/api/dcs/configurePage'
+export function useLayout(flowId) {
+  const layoutMap = reactive({})
+
+  // 获取页面布局参数
+  const fetchLayoutParams = async () => {
+    try {
+      const res = await getLayoutParams(flowId)
+      if (res.code === 200 && Array.isArray(res.data)) {
+        res.data.forEach(item => {
+          layoutMap[item.code] = {
+            top: item.top,
+            left: item.left,
+            size: item.size
+          }
+        })
+      }
+    } catch (err) {
+      console.error('页面参数获取失败：', err)
+    }
+  }
+
+  // 获取组件的布局样式
+  const getTankStyle = (code ,defaultZIndex=10) => {
+    const layout = layoutMap[code]
+    if (!layout) return {}
+    return {
+      zIndex: defaultZIndex,
+      position: 'absolute',
+      top: `${layout.top}%`,
+      left: `${layout.left}%`,
+      transform: 'translate(-50%, -50%)'
+    }
+  }
+
+  // 获取组件的尺寸
+  const getTankSize = (code, defaultSize = 400) => {
+    return layoutMap[code]?.size ?? defaultSize
+  }
+  return {
+    layoutMap,
+    fetchLayoutParams,
+    getTankStyle,
+    getTankSize
+  }
+}

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

@@ -3,11 +3,11 @@
         <HeaderComponent title="排堵流程"></HeaderComponent>
         <div class="content_page">
             <M1Tank title="M1" :valveArr="valveMap.M1" :waterLevelValue="30"
-                :pressureValue="sensorHelper.getDataArrByCode('M1yl')[0]" :temperatureValue="110" :iconSize="400"
-                :weightValue="100" class="hr_m1Tank"></M1Tank>
+                :pressureValue="sensorHelper.getDataArrByCode('M1yl')[0]" :temperatureValue="110"
+                :iconSize="getTankSize('M1')" :weightValue="100" :style="getTankStyle('M1')"></M1Tank>
             <M1Tank title="M2" :valveArr="valveMap.M2" :waterLevelValue="30"
-                :pressureValue="sensorHelper.getDataArrByCode('M1yl')[0]" :temperatureValue="110" :iconSize="400"
-                :weightValue="100" class="hr_m2Tank"></M1Tank>
+                :pressureValue="sensorHelper.getDataArrByCode('M1yl')[0]" :temperatureValue="110"
+                :iconSize="getTankSize('M2')" :weightValue="100" :style="getTankStyle('M2')"></M1Tank>
             <div class="icon_others">
                 <div class="other1">
                     <div class="other_title"> 储气罐</div>
@@ -69,6 +69,8 @@ import { useValveHelper } from '@/hooks/useValveHelper'
 import { computed, onMounted, onBeforeUnmount } from 'vue';
 import { stompClient } from '@/utils/ws/stompClient';
 import { updateZTPageConfig } from '@/api/dcs/configurePage';
+import { useLayout } from '@/utils/dcs/useLayout'
+
 const pageCode = 'blockOut';
 const pageParams = {
     "M1": ['N4', 'N6', 'N7', 'N8', 'N11'],
@@ -147,17 +149,10 @@ const valveMap = reactive({
     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);
-    });
+    // 获取页面参数
+    fetchLayoutParams();
+    // 更新页面配置
+    updatePageConfig();
 });
 
 onBeforeUnmount(() => {
@@ -165,6 +160,26 @@ onBeforeUnmount(() => {
     stompClient.unsubscribeFromPage(pageCode);
 });
 
+const flowId = 8 // 当前页面对应的流程 ID
+const { layoutMap, fetchLayoutParams, getTankStyle ,getTankSize} = useLayout(flowId)
+
+//更新页面配置
+function updatePageConfig() {
+    updateZTPageConfig(pageCode, pageParams)
+        .then(res => {
+            // console.log('页面配置成功：', res);
+            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);
+            });
+        })
+        .catch(err => {
+            console.log('页面配置失败：', err);
+        });
+}
+
 //所有阀门状态
 const valveArr = computed(() => [...new Set([
     ...valveMap.M1,

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

@@ -2,28 +2,29 @@
     <div class="page">
         <HeaderComponent title="换热流程"></HeaderComponent>
         <div class="content_page">
-            <M1Tank title="M1" :valveArr="valveMap.M1" :iconSize="400" :waterLevelValue="30"
+            <M1Tank title="M1" :valveArr="valveMap.M1" :iconSize="getTankSize('M1')" :waterLevelValue="30"
                 :pressureValue="sensorHelper.getDataArrByCode('M1yl')[0]" :temperatureValue="30" :weightValue="300"
-                class="hr_m1Tank">
+                :style="getTankStyle('M1')">
             </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">
+                :pressureValue="sensorHelper.getDataArrByCode('M2yl')[0]" :temperatureValue="110"
+                :iconSize="getTankSize('M2')" :weightValue="100" :style="getTankStyle('M2')">
             </M1Tank>
             <!-- 泵 -->
             <div class="pumps">
                 <!-- lb3 -->
-                <div class="lb3_pos">
-                    <Pump title="换热出液泵" :pumpDataArr="pumpHelper.getDataArrByCode('LB3')" :iconSize="100"></Pump>
+                <div :style="getTankStyle('LB3')">
+                    <Pump title="换热出液泵" :pumpDataArr="pumpHelper.getDataArrByCode('LB3')"
+                        :iconSize="getTankSize('LB3', 100)"></Pump>
                 </div>
                 <div class="lb4_pos">
                     <Pump title="LB4" :pumpDataArr="pumpHelper.getDataArrByCode('LB4')" pumpDirection="R"></Pump>
                 </div>
-                <div class="lb7_pos">
+                <div :style="getTankStyle('LB7')">
                     <Pump title="换热进液泵" :pumpDataArr="pumpHelper.getDataArrByCode('LB7')" pumpDirection="R"></Pump>
                 </div>
             </div>
@@ -184,10 +185,11 @@ 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, onMounted, onBeforeUnmount } from 'vue';
-
+import { computed, onMounted, onBeforeUnmount, reactive } from 'vue';
 import { stompClient } from '@/utils/ws/stompClient';
 import { updateZTPageConfig } from '@/api/dcs/configurePage';
+import { useLayout } from '@/utils/dcs/useLayout'
+
 const router = useRouter()
 
 const pageCode = 'heatExchange';
@@ -369,21 +371,10 @@ const valveMap = reactive({
     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);
-    });
+    // 获取页面参数
+    fetchLayoutParams();
+    // 更新页面配置
+    updatePageConfig();
 });
 
 onBeforeUnmount(() => {
@@ -391,6 +382,30 @@ onBeforeUnmount(() => {
     stompClient.unsubscribeFromPage(pageCode);
 });
 
+
+const flowId = 7 // 当前页面对应的流程 ID
+const { fetchLayoutParams, getTankStyle, getTankSize } = useLayout(flowId)
+
+//更新页面配置
+function updatePageConfig() {
+    updateZTPageConfig(pageCode, pageParams)
+        .then(res => {
+            // console.log('页面配置成功：', res);
+            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)
+            });
+        })
+        .catch(err => {
+            console.log('页面配置失败：', err);
+        });
+}
+
 //所有阀门状态
 const valveArr = computed(() => [...new Set([
     ...valveMap.M1,
@@ -446,12 +461,12 @@ const progressConfig = {
         width: 100%;
         height: 1000px;
 
-        .hr_m1Tank {
-            position: absolute;
-            top: 35%;
-            left: 9%;
-            transform: translate(-50%, -50%);
-        }
+        // .hr_m1Tank {
+        //     position: absolute;
+        //     top: 35%;
+        //     left: 9%;
+        //     transform: translate(-50%, -50%);
+        // }
 
         .hr_z1Tank {
             position: absolute;
@@ -474,21 +489,21 @@ const progressConfig = {
             transform: translate(-50%, -50%);
         }
 
-        .hr_m2Tank {
-            position: absolute;
-            top: 35%;
-            left: 69%;
-            transform: translate(-50%, -50%);
-        }
+        // .hr_m2Tank {
+        //     position: absolute;
+        //     top: 35%;
+        //     left: 69%;
+        //     transform: translate(-50%, -50%);
+        // }
 
         .pumps {
-            .lb3_pos {
-                position: absolute;
-                z-index: 5;
-                top: 18%;
-                left: 36.4%;
-                transform: translate(-50%, -50%);
-            }
+            // .lb3_pos {
+            //     position: absolute;
+            //     z-index: 5;
+            //     top: 18%;
+            //     left: 36.4%;
+            //     transform: translate(-50%, -50%);
+            // }
 
             .lb4_pos {
                 position: absolute;
@@ -498,13 +513,13 @@ const progressConfig = {
                 transform: translate(-50%, -50%);
             }
 
-            .lb7_pos {
-                position: absolute;
-                z-index: 5;
-                top: 85%;
-                left: 61.4%;
-                transform: translate(-50%, -50%);
-            }
+            // .lb7_pos {
+            //     position: absolute;
+            //     z-index: 5;
+            //     top: 85%;
+            //     left: 61.4%;
+            //     transform: translate(-50%, -50%);
+            // }
 
 
         }

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

@@ -2,25 +2,27 @@
     <div class="page">
         <HeaderComponent title="M1水解"></HeaderComponent>
         <div class="content_page">
-            <M1Tank title="M1" :valveArr="valveMap.M1" :iconSize="400" :waterLevelValue="30"
+            <M1Tank title="M1" :valveArr="valveMap.M1" :waterLevelValue="30"
                 :pressureValue="sensorHelper.getDataArrByCode('M1yl')[0]" :temperatureValue="30" :weightValue="300"
-                class="m1Flow_m1Tank">
+                :iconSize="getTankSize('M1')" :style="getTankStyle('M1')">
             </M1Tank>
-            <S1Tank title="S1" :fanStatus="fanStatus" :valveArr="valveMap.S1" :iconSize="300"
+            <S1Tank title="S1" :fanStatus="fanStatus" :valveArr="valveMap.S1"
                 :pressureValue="sensorHelper.getDataArrByCode('S1yl')[0]" :waterLevelValue="30"
-                :temperatureValue="sensorHelper.getDataArrByCode('S1wd')[0]" :weightValue="100" class="m1Flow_s1Tank">
+                :temperatureValue="sensorHelper.getDataArrByCode('S1wd')[0]" :weightValue="100"
+                :iconSize="getTankSize('S1',300)" :style="getTankStyle('S1')">
             </S1Tank>
-            <S1Tank title="S2" :fanStatus="fanStatus" :valveArr="valveMap.S2" :iconSize="300"
+            <S1Tank title="S2" :fanStatus="fanStatus" :valveArr="valveMap.S2"
                 :pressureValue="sensorHelper.getDataArrByCode('S2yl')[0]" :waterLevelValue="30"
-                :temperatureValue="sensorHelper.getDataArrByCode('S2wd')[0]" :weightValue="100" class="m1Flow_s2Tank">
+                :temperatureValue="sensorHelper.getDataArrByCode('S2wd')[0]" :weightValue="100"
+                :iconSize="getTankSize('S2',300)" :style="getTankStyle('S2')">
             </S1Tank>
             <S1Tank title="S3" :fanStatus="fanStatus" :valveArr="valveMap.S3" :pressureValue="0.444"
-                :waterLevelValue="30" :temperatureValue="20" :iconSize="300" :weightValue="100" class="m1Flow_s3Tank">
+                :waterLevelValue="30" :temperatureValue="20" :iconSize="getTankSize('S3',300)" :weightValue="100" class="m1Flow_s3Tank">
             </S1Tank>
             <div class="pumps">
                 <!-- lb9 -->
-                <div class="lb9_pos">
-                    <Pump title="进料泵" :pumpDataArr="pumpHelper.getDataArrByCode('LB9')" :iconSize="100"></Pump>
+                <div :style="getTankStyle('LB9')">
+                    <Pump title="进料泵" :pumpDataArr="pumpHelper.getDataArrByCode('LB9')" :iconSize="getTankSize('LB9',300)"></Pump>
                 </div>
             </div>
             <div class="icon_others">
@@ -162,9 +164,10 @@ import Pump from '@/components/DCS/PumpComponent.vue';
 import { useValveHelper } from '@/hooks/useValveHelper'
 import { useRouter } from 'vue-router'
 import { stompClient } from '@/utils/ws/stompClient';
-import { onMounted, onBeforeUnmount, reactive } from 'vue';
+import { onMounted, onBeforeUnmount, reactive, computed } from 'vue';
 import { updateZTPageConfig } from '@/api/dcs/configurePage';
-import { computed } from 'vue';
+import { useLayout } from '@/utils/dcs/useLayout'
+
 const router = useRouter()
 
 const pageCode = 'm1Hydrolyze';
@@ -369,20 +372,10 @@ const valveMap = reactive({
     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.S1 = Object.values(data.S1)
-        valveMap.S2 = Object.values(data.S2)
-        valveMap.S3 = Object.values(data.S3)
-        valveMap.PUMP = Object.values(data.PUMP)
-        valveMap.SENSORS = Object.values(data.SENSORS)
-        // console.log('页面数据更新：', data.SENSORS);
-    });
+    // 获取页面参数
+    fetchLayoutParams();
+    // 更新页面配置
+    updatePageConfig();
 });
 
 onBeforeUnmount(() => {
@@ -390,6 +383,29 @@ onBeforeUnmount(() => {
     stompClient.unsubscribeFromPage(pageCode);
 });
 
+
+const flowId = 5 // 当前页面对应的流程 ID
+const { layoutMap, fetchLayoutParams, getTankStyle ,getTankSize} = useLayout(flowId)
+
+//更新页面配置
+function updatePageConfig() {
+    updateZTPageConfig(pageCode, pageParams)
+        .then(res => {
+            // console.log('页面配置成功：', res);
+            stompClient.subscribeToPage(pageCode, (data) => {
+                valveMap.M1 = Object.values(data.M1)
+                valveMap.S1 = Object.values(data.S1)
+                valveMap.S2 = Object.values(data.S2)
+                valveMap.S3 = Object.values(data.S3)
+                valveMap.PUMP = Object.values(data.PUMP)
+                valveMap.SENSORS = Object.values(data.SENSORS)
+            });
+        })
+        .catch(err => {
+            console.log('页面配置失败：', err);
+        });
+}
+
 //所有阀门状态
 const valveArr = computed(() => [...new Set([
     ...valveMap.M1,
@@ -429,26 +445,26 @@ const progressConfig = {
         width: 100%;
         height: 1000px;
 
-        .m1Flow_m1Tank {
-            position: absolute;
-            top: 40%;
-            left: 9%;
-            transform: translate(-50%, -50%);
-        }
-
-        .m1Flow_s1Tank {
-            position: absolute;
-            top: 40%;
-            left: 31%;
-            transform: translate(-50%, -50%);
-        }
-
-        .m1Flow_s2Tank {
-            position: absolute;
-            top: 40%;
-            left: 53%;
-            transform: translate(-50%, -50%);
-        }
+        // .m1Flow_m1Tank {
+        //     position: absolute;
+        //     top: 40%;
+        //     left: 9%;
+        //     transform: translate(-50%, -50%);
+        // }
+
+        // .m1Flow_s1Tank {
+        //     position: absolute;
+        //     top: 40%;
+        //     left: 31%;
+        //     transform: translate(-50%, -50%);
+        // }
+
+        // .m1Flow_s2Tank {
+        //     position: absolute;
+        //     top: 40%;
+        //     left: 53%;
+        //     transform: translate(-50%, -50%);
+        // }
 
         .m1Flow_s3Tank {
             position: absolute;
@@ -458,13 +474,13 @@ const progressConfig = {
         }
 
         .pumps {
-            .lb9_pos {
-                position: absolute;
-                z-index: 5;
-                top: 88%;
-                left: 30.4%;
-                transform: translate(-50%, -50%);
-            }
+            // .lb9_pos {
+            //     position: absolute;
+            //     z-index: 5;
+            //     top: 88%;
+            //     left: 30.4%;
+            //     transform: translate(-50%, -50%);
+            // }
 
         }
 

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

@@ -3,25 +3,25 @@
         <HeaderComponent title="M2出料"></HeaderComponent>
         <div class="content_page">
             <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" :weightValue="100"
+                :pressureValue="sensorHelper.getDataArrByCode('M2yl')[0]" :temperatureValue="110" :iconSize="getTankSize('M2')"
+                :weightValue="100" :style="getTankStyle('M2')"></M1Tank>
+            <S1Tank title="S1" :fanStatus="fanStatus" :valveArr="valveMap.S1" :iconSize="getTankSize('S1',300)" :weightValue="100"
                 :pressureValue="sensorHelper.getDataArrByCode('S1yl')[0]" :waterLevelValue="30"
-                :temperatureValue="sensorHelper.getDataArrByCode('S1wd')[0]" class="m2Flow_s1Tank">
+                :temperatureValue="sensorHelper.getDataArrByCode('S1wd')[0]" :style="getTankStyle('S1')">
             </S1Tank>
-            <S1Tank title="S2" :fanStatus="fanStatus" :valveArr="valveMap.S2" :iconSize="300" :weightValue="100"
+            <S1Tank title="S2" :fanStatus="fanStatus" :valveArr="valveMap.S2" :iconSize="getTankSize('S2',300)" :weightValue="100"
                 :pressureValue="sensorHelper.getDataArrByCode('S2yl')[0]" :waterLevelValue="30"
-                :temperatureValue="sensorHelper.getDataArrByCode('S2wd')[0]" class="m2Flow_s2Tank">
+                :temperatureValue="sensorHelper.getDataArrByCode('S2wd')[0]" :style="getTankStyle('S2')">
             </S1Tank>
             <S1Tank title="S3" :fanStatus="fanStatus" :valveArr="valveArr_S3" :pressureValue="0.444"
-                :waterLevelValue="30" :temperatureValue="20" :iconSize="300" :weightValue="100" class="m2Flow_s3Tank">
+                :waterLevelValue="30" :temperatureValue="20" :iconSize="getTankSize('S3',300)" :weightValue="100" class="m2Flow_s3Tank">
             </S1Tank>
             <WaterTank title="P1" :tankType="3" class="m2Flow_p1Tank" :iconSize="300"></WaterTank>
 
             <div class="pumps">
                 <!-- lb6 -->
-                <div class="lb6_pos">
-                    <Pump title="出料泵" :pumpDataArr="pumpHelper.getDataArrByCode('LB6')" :iconSize="100"></Pump>
+                <div :style="getTankStyle('LB6')">
+                    <Pump title="出料泵" :pumpDataArr="pumpHelper.getDataArrByCode('LB6')" :iconSize="getTankSize('LB6',100)"></Pump>
                 </div>
             </div>
             <div class="icon_others">
@@ -164,10 +164,11 @@ import WaterTank from '@/components/DCS/WaterTankComponent.vue';
 import Pump from '@/components/DCS/PumpComponent.vue';
 import { useValveHelper } from '@/hooks/useValveHelper'
 import { useRouter } from 'vue-router'
-import { computed, onMounted, onBeforeUnmount } from 'vue';
-
+import { computed, onMounted, onBeforeUnmount, reactive } from 'vue';
 import { stompClient } from '@/utils/ws/stompClient';
 import { updateZTPageConfig } from '@/api/dcs/configurePage';
+import { useLayout } from '@/utils/dcs/useLayout'
+
 const router = useRouter()
 
 const pageCode = 'm2OutMaterial';
@@ -362,19 +363,10 @@ const valveMap = reactive({
     SENSORS: sensorArr,
 })
 onMounted(() => {
-    updateZTPageConfig(pageCode, pageParams).then(res => {
-        // console.log('页面配置成功：', res);
-    }).catch(err => {
-        console.log('页面配置失败：', err);
-    });
-    stompClient.subscribeToPage(pageCode, (data) => {
-        valveMap.M2 = Object.values(data.M2)
-        valveMap.S1 = Object.values(data.S1)
-        valveMap.S2 = Object.values(data.S2)
-        valveMap.S3 = Object.values(data.S3)
-        valveMap.PUMP = Object.values(data.PUMP)
-        valveMap.SENSORS = Object.values(data.SENSORS)
-    });
+    // 获取页面参数
+    fetchLayoutParams();
+    // 更新页面配置
+    updatePageConfig();
 });
 
 // // 随机模拟泵数据[0,100],前面0-3的整数，后面1-5000的整数
@@ -388,6 +380,28 @@ onBeforeUnmount(() => {
     stompClient.unsubscribeFromPage(pageCode);
 });
 
+
+const flowId = 6 // 当前页面对应的流程 ID
+const { layoutMap, fetchLayoutParams, getTankStyle, getTankSize } = useLayout(flowId)
+
+//更新页面配置
+function updatePageConfig() {
+    updateZTPageConfig(pageCode, pageParams)
+        .then(res => {
+            // console.log('页面配置成功：', res);
+            stompClient.subscribeToPage(pageCode, (data) => {
+                valveMap.M2 = Object.values(data.M2)
+                valveMap.S1 = Object.values(data.S1)
+                valveMap.S2 = Object.values(data.S2)
+                valveMap.S3 = Object.values(data.S3)
+                valveMap.PUMP = Object.values(data.PUMP)
+                valveMap.SENSORS = Object.values(data.SENSORS)
+            });
+        })
+        .catch(err => {
+            console.log('页面配置失败：', err);
+        });
+}
 //所有阀门状态
 const valveArr = computed(() => [...new Set([
     ...valveMap.M2,
@@ -430,26 +444,26 @@ const pumpStatus_N18 = computed(() => {
         width: 100%;
         height: 1000px;
 
-        .m2Flow_m1Tank {
-            position: absolute;
-            top: 40%;
-            left: 59%;
-            transform: translate(-50%, -50%);
-        }
-
-        .m2Flow_s1Tank {
-            position: absolute;
-            top: 40%;
-            left: 3%;
-            transform: translate(-50%, -50%);
-        }
-
-        .m2Flow_s2Tank {
-            position: absolute;
-            top: 40%;
-            left: 18%;
-            transform: translate(-50%, -50%);
-        }
+        // .m2Flow_m1Tank {
+        //     position: absolute;
+        //     top: 40%;
+        //     left: 59%;
+        //     transform: translate(-50%, -50%);
+        // }
+
+        // .m2Flow_s1Tank {
+        //     position: absolute;
+        //     top: 40%;
+        //     left: 3%;
+        //     transform: translate(-50%, -50%);
+        // }
+
+        // .m2Flow_s2Tank {
+        //     position: absolute;
+        //     top: 40%;
+        //     left: 18%;
+        //     transform: translate(-50%, -50%);
+        // }
 
         .m2Flow_s3Tank {
             position: absolute;
@@ -468,16 +482,16 @@ const pumpStatus_N18 = computed(() => {
 
         .pumps {
 
-            .lb6_pos {
-                z-index: 15;
-            }
+            // .lb6_pos {
+            //     z-index: 15;
+            // }
 
-            .lb6_pos {
-                position: absolute;
-                top: 81%;
-                left: 53.2%;
-                transform: translate(-50%, -50%);
-            }
+            // .lb6_pos {
+            //     position: absolute;
+            //     top: 81%;
+            //     left: 53.2%;
+            //     transform: translate(-50%, -50%);
+            // }
 
         }
 

ui/src/views/dcs/M1Flow/index.vue

@@ -801,7 +801,7 @@
 import { openElMessageBox, openElMessage, openElWarnMessage } from '@/utils/message';
 import { onMounted, ref, watch, onUnmounted } from 'vue';
 import { setCoil, getValues, getEquipmentIndexList, setIntRegister, setCoils } from '@/api/dcs/flowControl';
-import { wsClient } from '@/utils/websocket.js';
+import { wsClient } from '@/utils/ws/websocket.js';
 import useEqStore from '@/store/modules/dcs';
 import DeviceStatus from '@/components/DCS/DeviceStatusComponent';
 import Valve from '@/components/DCS/ValveComponent';

ui/src/views/dcs/M2Flow/index.vue

@@ -752,7 +752,7 @@
 import { openElMessageBox, openElMessage, openElWarnMessage } from '@/utils/message';
 import { onMounted, ref, watch, onUnmounted } from 'vue';
 import { setCoil, getValues, getEquipmentIndexList, setIntRegister, setCoils } from '@/api/dcs/flowControl';
-import { wsClient } from '@/utils/websocket.js';
+import { wsClient } from '@/utils/ws/websocket.js';
 import useEqStore from '@/store/modules/dcs';
 import $modal from '@/plugins/modal'
 const eqStore = useEqStore();

ui/src/views/dcs/flowSelect/index.vue

@@ -12,7 +12,7 @@
 <script setup>
 import { ref, onMounted, onUnmounted } from 'vue';
 import { useRouter } from 'vue-router';
-import { wsClient } from '@/utils/websocket.js';
+import { wsClient } from '@/utils/ws/websocket.js';
 import { getEquipmentIndexList } from '@/api/dcs/flowControl';
 import useEqStore from '@/store/modules/dcs';
 import HeaderComponent from '@/components/DCS/HeaderComponent.vue';

ui/src/views/dcs/flowSelect/m1Flow/index.vue

@@ -321,7 +321,7 @@
 import { openElMessageBox, openElMessage, openElWarnMessage } from '@/utils/message';
 import { onMounted, ref, watch, onUnmounted } from 'vue';
 import { setCoil, setCoils } from '@/api/dcs/flowControl';
-import { wsClient } from '@/utils/websocket.js';
+import { wsClient } from '@/utils/ws/websocket.js';
 import useEqStore from '@/store/modules/dcs';
 import DeviceStatus from '@/components/DCS/DeviceStatusComponent';
 import Valve from '@/components/DCS/ValveComponent';

ui/src/views/dcs/flowSelect/m2Flow/index.vue

@@ -196,7 +196,7 @@ import { onMounted, ref, watch, onUnmounted } from 'vue';
 import { setCoil, getValues, getEquipmentIndexList, setIntRegister, setCoils } from '@/api/dcs/flowControl';
 import DeviceStatus from '@/components/DCS/DeviceStatusComponent';
 import Valve from '@/components/DCS/ValveComponent';
-import { wsClient } from '@/utils/websocket.js';
+import { wsClient } from '@/utils/ws/websocket.js';
 import useEqStore from '@/store/modules/dcs';
 import $modal from '@/plugins/modal'
 const eqStore = useEqStore();

ui/src/views/dcs/index.vue

@@ -33,7 +33,7 @@ import {
 } from '@element-plus/icons-vue'
 import { ref, onMounted, onUnmounted } from 'vue';
 import { useRouter } from 'vue-router';
-import { wsClient } from '@/utils/websocket.js';
+import { wsClient } from '@/utils/ws/websocket.js';
 import { getEquipmentIndexList } from '@/api/dcs/flowControl';
 import useEqStore from '@/store/modules/dcs';
 const eqStore = useEqStore();

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

@@ -64,7 +64,7 @@
       <el-table-column type="selection" width="55" align="center" />
       <el-table-column label="设备id" align="center" prop="equipmentId" />
       <el-table-column label="设备名" align="center" prop="equipmentName" />
-      <el-table-column label="流程归属" align="center" prop="flowName" />
+      <el-table-column label="流程归属" align="center" prop="flowName" :show-overflow-tooltip="true"/>
       <el-table-column label="标识码" align="center" prop="code" />
       <el-table-column label="设备种类" align="center" prop="equipmentType">
         <template #default="scope">
@@ -167,7 +167,7 @@ const flowOptions = ref([]);// 流程下拉树结构
 /** 获取流程列表 */
 function getFlowOptions() {
   const params = {
-    flowType: '1',// 1: 普通流程
+    // flowType: '1',// 1: 普通流程
   };
   getFlowList(params).then(response => {
     flowOptions.value = response.data;

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

@@ -45,8 +45,9 @@
       <el-table-column label="序号" align="center" prop="id" />
       <el-table-column label="设备名称" align="center" prop="equipmentName" />
       <el-table-column label="流程名称" align="center" prop="flowName" />
-      <el-table-column label="x坐标" align="center" prop="x" />
-      <el-table-column label="y坐标" align="center" prop="y" />
+      <el-table-column label="x坐标" align="center" prop="x" :formatter="(row) => formatNumber(row.x)" />
+      <el-table-column label="y坐标" align="center" prop="y" :formatter="(row) => formatNumber(row.y)" />
+      <el-table-column label="尺寸(px)" align="center" prop="size" />
       <el-table-column label="启用状态" align="center" width="100">
         <template #default="scope">
           <el-switch v-model="scope.row.status" active-value="0" inactive-value="1"
@@ -63,8 +64,8 @@
       </el-table-column>
     </el-table>
 
-    <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize"
-      @pagination="getList" />
+    <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum"
+      v-model:limit="queryParams.pageSize" @pagination="getList" />
 
     <!-- 添加或修改设备拓展管理对话框 -->
     <el-dialog :title="title" v-model="open" width="500px" append-to-body>
@@ -87,6 +88,10 @@
         <el-form-item label="y坐标" prop="y">
           <el-input v-model="form.y" placeholder="请输入y坐标" />
         </el-form-item>
+        <el-form-item label="尺寸" prop="size">
+          <el-input-number v-model="form.size" placeholder="请输入尺寸,单位px" style="width: 100%;"
+            controls-position="right" class="sizeInput"/>
+        </el-form-item>
         <el-form-item label="备注" prop="remark">
           <el-input v-model="form.remark" placeholder="请输入备注" />
         </el-form-item>
@@ -109,7 +114,7 @@
 </template>
 
 <script setup name="Extension">
-import { changeStatus,listExtension, getExtension, delExtension, addExtension, updateExtension ,getEquipmentExtensionFormList} from "@/api/hnyz/extension";
+import { changeStatus, listExtension, getExtension, delExtension, addExtension, updateExtension, getEquipmentExtensionFormList } from "@/api/hnyz/extension";
 import { getFlowList } from "@/api/hnyz/flow";
 import { getEquipmentList } from "@/api/hnyz/equipment";
 import { onMounted } from "vue";
@@ -122,7 +127,7 @@ const flowOptions = ref([]);// 流程选项
 function getFlowOptions() {
   getFlowList({}).then(response => {
     flowOptions.value = response.data;
-    realFlowOptions.value=response.data;
+    realFlowOptions.value = response.data;
   });
 }
 const equipmentOptions = ref([]);// 设备选项
@@ -130,7 +135,7 @@ const equipmentOptions = ref([]);// 设备选项
 function getEquipmentOptions() {
   getEquipmentList().then(response => {
     equipmentOptions.value = response.data;
-    realEquipmentOptions.value=response.data;
+    realEquipmentOptions.value = response.data;
   });
 }
 
@@ -143,8 +148,8 @@ function getRealFlowOptions() {
   getFlowList(params).then(response => {
     realFlowOptions.value = response.data;
     //如果queryparams中的flowId不在真实流程选项中，则将其设置为默认值
-    if(form.value.flowId && !realFlowOptions.value.some(item=>item.flowId==form.value.flowId)){
-      form.value.flowId=null;
+    if (form.value.flowId && !realFlowOptions.value.some(item => item.flowId == form.value.flowId)) {
+      form.value.flowId = null;
     }
   });
 }
@@ -153,8 +158,8 @@ function getRealEquipmentOptions() {
   getEquipmentList({ flowIds: form.value.flowId }).then(response => {
     realEquipmentOptions.value = response.data;
     //如果queryparams中的equipmentId不在真实设备选项中，则将其设置为默认值
-    if(form.value.equipmentId && !realEquipmentOptions.value.some(item=>item.equipmentId==form.value.equipmentId)){
-      form.value.equipmentId=null;
+    if (form.value.equipmentId && !realEquipmentOptions.value.some(item => item.equipmentId == form.value.equipmentId)) {
+      form.value.equipmentId = null;
     }
   });
 }
@@ -228,8 +233,8 @@ function reset() {
   };
   proxy.resetForm("extensionRef");
   //下拉框重置
-  realFlowOptions.value=flowOptions.value;
-  realEquipmentOptions.value=equipmentOptions.value;
+  realFlowOptions.value = flowOptions.value;
+  realEquipmentOptions.value = equipmentOptions.value;
 }
 
 /** 状态修改 */
@@ -321,4 +326,19 @@ function handleExport() {
 }
 
 getList();
+
+/** 格式化数字 */
+function formatNumber(val) {
+  if (val == null || val === '') return '';
+  const num = Number(val);
+  return Number.isInteger(num) ? num : num.toString();
+}
+
 </script>
+<style lang="scss" scoped>
+:deep(.sizeInput){
+  .el-input-number .el-input__inner{
+    text-align: left;
+  }
+}
+</style>

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

@@ -9,6 +9,11 @@
           <el-option v-for="dict in sys_normal_disable" :key="dict.value" :label="dict.label" :value="dict.value" />
         </el-select>
       </el-form-item>
+      <el-form-item label="流程种类" prop="flowType">
+        <el-select v-model="queryParams.flowType" placeholder="流程种类" clearable style="width: 240px">
+          <el-option v-for="dict in flow_type" :key="dict.value" :label="dict.label" :value="dict.value" />
+        </el-select>
+      </el-form-item>
       <el-form-item>
         <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
         <el-button icon="Refresh" @click="resetQuery">重置</el-button>
@@ -56,8 +61,8 @@
       </el-table-column>
     </el-table>
 
-    <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize"
-      @pagination="getList" />
+    <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum"
+      v-model:limit="queryParams.pageSize" @pagination="getList" />
 
     <!-- 添加或修改流程管理2.0对话框 -->
     <el-dialog :title="title" v-model="open" width="500px" append-to-body>
@@ -68,6 +73,11 @@
         <el-form-item label="流程顺序" prop="sort">
           <el-input v-model="form.sort" placeholder="请输入流程顺序" type="number" />
         </el-form-item>
+        <el-form-item label="流程种类" prop="flowType">
+          <el-select v-model="form.flowType" placeholder="请选择流程种类">
+            <el-option v-for="dict in flow_type" :key="dict.value" :label="dict.label" :value="dict.value"></el-option>
+          </el-select>
+        </el-form-item>
         <el-form-item label="备注" prop="remark">
           <el-input v-model="form.remark" placeholder="请输入备注" />
         </el-form-item>
@@ -89,10 +99,11 @@
 </template>
 
 <script setup name="Flow">
-import {changeStatus, listFlow, getFlow, delFlow, addFlow, updateFlow } from "@/api/hnyz/flow";
+import { changeStatus, listFlow, getFlow, delFlow, addFlow, updateFlow } from "@/api/hnyz/flow";
 
 const { proxy } = getCurrentInstance();
 const { sys_normal_disable } = proxy.useDict("sys_normal_disable");
+const { flow_type } = proxy.useDict("flow_type")
 const flowList = ref([]);
 const open = ref(false);
 const loading = ref(true);