vue-wiring-diagram 1.0.16 → 1.0.18

package/packages/components/preview/index.vue

@@ -12,6 +12,7 @@ import {onMounted, onUnmounted, ref, shallowRef} from "vue";
 import {Graph} from "@antv/x6";
 import {getData, getRealData, showPorts} from "../common.js";
 import {ElMessage} from "element-plus";
+import {defaultMatch, defaultText, setPipeDirection} from "packages/components/tools.js";
 
 defineOptions({
   name: 'wiring-diagram-preview'
@@ -42,9 +43,6 @@ const props = defineProps({
   }
 })
 
-// 所有字段
-const allFields = ref([])
-
 // 画布
 const graph = ref()
 
@@ -94,7 +92,7 @@ const renderData = async () => {
   if (props.id) {
     const {background: bg, grid: gd, data: dt} = await getData(props.id);
     background = bg;
-    grid = {};
+    grid = gd;
     data = dt;
   } else {
     background = props.background;
@@ -110,30 +108,27 @@ const renderData = async () => {
 
 // 定时器
 const timer = ref(null)
-// 获取所有节点中 data.type 为 text 的节点
-const textNodes = ref([])
+// 节点
+const cells = ref([])
+// 参数
+const allFields = ref([])
 
 /**
  * 刷新数据
  */
 const refreshData = () => {
-  textNodes.value = getNodes()
-  const regex = /\$\{(.*?)\}/g;
+  cells.value = graph.value.getCells().filter(cell => cell?.data?.type === 'text' || cell?.data?.type === 'pipe')
+  cells.value.forEach(item => {
+    if (item?.data?.fields?.length) {
+      item.data.fields.forEach(field => {
+        if (field.field) {
+          allFields.value.push({id: item?.id, fields: item?.data.fields})
+        }
+      })
 
-  textNodes.value.forEach(node => {
-    // 确保 node.data 和 node.data.field 存在
-    if (!node.data || !node.data.field) return;
-
-    const matches = node.data.content.match(regex);
-    allFields.value.push(...node.data.field);
-
-    if (matches) {
-      node.matches = matches;
     }
-  });
-  if (!textNodes) {
-    return
-  }
+  })
+  console.log('所有字段', allFields.value)
   setFieldData()
 }
 
@@ -160,61 +155,69 @@ const setFieldData = async () => {
 
   isAllowRefresh.value = false
 
-  const realData = await getRealData(allFields.value)
+  let realData = await getRealData(allFields.value).catch(() => {
+    isAllowRefresh.value = true
+  })
 
   isAllowRefresh.value = true
 
-  if (!Array.isArray(realData) || !realData.length) {
-    return
-  }
-
-  let length = 0
-  textNodes.value.forEach((node, index) => {
-    // 确保 node.data 和 node.data.field 存在
-    if (!node.data || !node.data.field) return;
-
-    const matches = node.matches;
-    if (matches) {
-      const start = index === 0 ? 0 : length || 0;
-      const end = length = start + node.data.field.length;
-      node.label = replaceAllTemplateLiteralsWithArray(node.data.content, realData.slice(start, end));
+  realData?.forEach(item => {
+    const cell = graph.value.getCellById(item.id)
+    if (cell.data.type === 'text') {
+      cell.label = replaceAllTemplateLiteralsWithArray(cell.data.content, item.fields)
     }
-  });
+    if (cell.data.type === 'pipe') {
+      console.log('管道详情', cell, item.fields?.[0].value)
+      setPipe(cell, item.fields?.[0].value)
+      // TODO: 暂时不支持管道
+    }
+  })
   timer.value = setTimeout(() => {
     setFieldData()
   }, 10000)
 }
 
-
 /**
- * 获取所有节点中 data.type 为 text 的节点
+ * 替换模板字符串
+ * @param str 模板字符串
+ * @param fields 替换数组
+ * @returns {*}
  */
-const getNodes = () => {
-  const nodes = graph.value.getNodes()
-  return nodes.filter(node => node.data?.type === 'text')
+const replaceAllTemplateLiteralsWithArray = (str, fields) => {
+  let index = 0
+  return str.replace(defaultMatch, (match, p1) => {
+    const field = fields.find(item => item.index === index)
+    index++
+    if (field) {
+      return field.value
+    } else {
+      return defaultText
+    }
+  })
 }
 
 /**
- * 替换模板字符串
- * @param str 模板字符串
- * @param replacements 替换数组
- * @returns {*}
+ * 设置管道
+ * @param cell
+ * @param value
  */
-const replaceAllTemplateLiteralsWithArray = (str, replacements) => {
-  let index = 0;
-  return str.replace(/\$\{.*?\}/g, () => {
-    if (index < replacements.length) {
-      return replacements[index++];
+const setPipe = (cell, value) => {
+  if(!cell.data.isCondition) {
+    return false
+  }
+  for (let i = 0; i < cell.data.condition.length; i++) {
+    if (value > cell.data.condition[i].min && value <= cell.data.condition[i].max) {
+      cell.attr('line2/style/animation', setPipeDirection(cell.data.condition[i].direction))
+      return false
     }
-    return '--'; // 如果替换数组长度不够，返回空字符串或其他默认值
-  });
+  }
 }
 
 /**
  * \@description 画布自适应
  */
 const zoomToFit = () => {
-  graph.value.zoomToFit({maxScale: 10, padding: 20})
+  graph.value.zoomToFit({maxScale: 1.4, padding: 20})
 }
 
 const previewRef = shallowRef()

package/packages/components/settings.js

@@ -82,7 +82,7 @@ export const textOptions = {
     data: {
         type: 'text',
         content: '文本',
-        field: []
+        fields: []
     },
     ports: {
         groups: {
@@ -96,24 +96,49 @@ export const textOptions = {
 
 // 线配置
 export const lineOptions = {
-    line: {
-        stroke: '#ffffff',
-        strokeWidth: 1,
-        sourceMarker: {
-            args: {
-                width: 10,
-                height: 10,
-                offset: 0,
-            },
-            name: null
+    markup: [
+        {
+            tagName: 'path',
+            selector: 'line1',
+            groupSelector: 'lines'
+        },
+        {
+            tagName: 'path',
+            selector: 'line2',
+            groupSelector: 'lines'
+        },
+    ],
+    attrs: {
+        lines: {
+            connection: true,
+            strokeLinejoin: 'round',
+            fill: 'none',
+            strokeWidth: 2,
+        },
+        line1: {
+            stroke: '#2364DD',
+            strokeWidth: 1,
         },
-        targetMarker: {
-            args: {
-                width: 10,
-                height: 10,
-                offset: 0,
+        line2: {
+            stroke: '#ffffff',
+            strokeWidth: 1,
+            strokeDasharray: 0,
+            sourceMarker: {
+                args: {
+                    width: 10,
+                    height: 10,
+                    offset: 0,
+                },
+                name: null
+            },
+            targetMarker: {
+                args: {
+                    width: 10,
+                    height: 10,
+                    offset: 0,
+                },
+                name: null
             },
-            name: null
         },
-    },
+    }
 }

package/packages/components/text-control/index.vue

@@ -146,10 +146,12 @@
 <script setup>
 import {onMounted, reactive, ref,} from "vue";
 import {DeleteFilled} from '@element-plus/icons-vue'
-import {showPorts} from "../common.js";
+import {getFieldList, showPorts} from "../common.js";
 import {get} from '../../http.js'
 import {ElMessageBox} from "element-plus";
 import {portOption} from "../settings.js";
+import {defaultMatch, defaultText} from "packages/components/tools.js";
+import {getDeviceList} from "/packages/components/common.js";
 
 defineOptions({
   name: 'text-control'
@@ -168,10 +170,8 @@ const fieldList = ref([])
 /**
  * 获取设备列表
  */
-const getDeviceList = () => {
-  get('/cny/custom/deviceList').then(res => {
-    deviceList.value = res.data
-  })
+const getDevices = async () => {
+  deviceList.value = await getDeviceList()
 }
 
 const deviceCode = ref() // 设备编码
@@ -190,19 +190,13 @@ const checkDevice = () => {
 /**
  * 获取字段列表
  */
-const getFields = () => {
-  get('/cny/custom/monitorInfo', {
-    deviceCode: currentDevice.deviceCode,
-    fieldType: 1
-  }).then(res => {
-    fieldList.value = res.data
-  })
+const getFields = async () => {
+  fieldList.value = await getFieldList(currentDevice.deviceCode)
 }
 
-const regexp = /\$\{(.*?)\}/g // 匹配${}
 
 const replace = (str) => {
-  return str.replace(regexp, '--')
+  return str.replace(defaultMatch, defaultText)
 }
 
 /**
@@ -219,16 +213,15 @@ const checkField = (row) => {
     const content = props.payload.data.content
     props.payload.data.content = text.value = content + '${' + currentDevice.deviceName + '.' + row.name + '}' + unit
     // 查找所有${}
-    const matches = content.match(regexp)
+    const matches = content.match(defaultMatch)
     const index = matches?.length || 0
-    props.payload.data.field.push({
+    props.payload.data.fields.push({
       index: index,
       deviceName: currentDevice.deviceName,
       deviceCode: currentDevice.deviceCode,
       field: row.dataField,
     })
     props.payload.label = replace(props.payload.data.content)
-    console.log('label:', props.payload.label, 'content:', props.payload.data.content, 'field:', props.payload.data.field)
   })
 }
 
@@ -271,11 +264,11 @@ const changeContent = () => {
     // 判断是否删除的是}
     if (props.payload.data.content.endsWith('}')) {
       // 找出所有的${}
-      const matches = props.payload.data.content.match(regexp)
+      const matches = props.payload.data.content.match(defaultMatch)
       if (matches) {
         const index = matches.length - 1
         // 删除数组中最后一个元素
-        props.payload.data.field.splice(index, 1)
+        props.payload.data.fields.splice(index, 1)
         // 删除字符串中最后一个${}
         text.value = props.payload.data.content.substring(0, props.payload.data.content.lastIndexOf('${'))
       }
@@ -362,7 +355,7 @@ const deletePort = (id) => {
 
 onMounted(() => {
   getPorts()
-  getDeviceList()
+  getDevices()
   document.addEventListener('selectionchange', () => {
     // 判断是否在输入框内
     if (document.activeElement.tagName === 'TEXTAREA') {

package/packages/components/tools.js

@@ -4,6 +4,8 @@ import {Snapline} from "@antv/x6-plugin-snapline";
 import {Clipboard} from "@antv/x6-plugin-clipboard";
 import {History} from "@antv/x6-plugin-history";
 import {Selection} from "@antv/x6-plugin-selection";
+import {lineOptions} from "packages/components/settings.js";
+import {STOP} from "packages/components/enums.js";
 
 /**
  * 图形变换
@@ -156,6 +158,7 @@ export const addLineTools = (cell) => {
                     cursor: 'move',
                     'stroke-width': 2
                 },
+                modifiers: ['shift']
             },
         },
         {
@@ -187,6 +190,25 @@ export const addLineTools = (cell) => {
     ]);
 }
 
+/**
+ * 判断是直线还是管道
+ */
+export const isLineOrPipe = () => {
+    return lineOptions.attrs.line2.strokeDasharray === 0 ? 'line' : 'pipe'
+}
+
+/**
+ * 设置管道方向
+ * @param direction none无 forward-pipe正向 reverse-pipe反向
+ */
+export const setPipeDirection = (direction) => {
+    if (direction !== 'none') {
+        return direction + ' 30s infinite linear'
+    } else {
+        return ''
+    }
+}
+
 /**
  * 设置随机数
  * @returns {number}
@@ -194,3 +216,16 @@ export const addLineTools = (cell) => {
 export const setMathRandom = () => {
     return Math.random()
 }
+
+// 默认展示的字符串
+export const defaultText = '--'
+
+// 默认匹配字符串
+export const defaultMatch = /\$\{(.*?)\}/g
+
+// 默认条件单挑配置
+export const defaultCondition = {
+    min: 0,
+    max: 0,
+    direction: STOP,
+}