vue-wiring-diagram 1.0.20 → 1.1.1

package/packages/components/editor/index.vue

@@ -64,7 +64,7 @@
 </template>
 
 <script setup>
-import {defineComponent, onMounted, reactive, ref, shallowRef} from "vue";
+import {onMounted, reactive, ref, shallowRef} from "vue";
 import moment from 'moment'
 import {ElMessage, ElTooltip} from "element-plus";
 import {getData, showPorts} from "../common.js";

package/packages/components/enums.js

@@ -1,10 +1,17 @@
+export const LINE = 'line'
+export const PIPE = 'pipe'
+export const ARROW = 'arrow'
+
 // 线类型
 export const typeList = [{
     label: '直线',
-    value: 'line',
+    value: LINE,
 }, {
     label: '管道',
-    value: 'pipe',
+    value: PIPE,
+}, {
+    label: '箭头',
+    value: ARROW,
 }]
 
 // 箭头类型
@@ -53,8 +60,21 @@ export const directionList = [{
     value: STOP,
 }, {
     label: '正向',
-    value: FORWARD_PIPE ,
+    value: FORWARD_PIPE,
 }, {
     label: '反向',
     value: REVERSE_PIPE,
 }]
+
+export const FLASHING = 'flashing'
+export const ARROWFORWARD = 'arrowForward'
+export const ARROWBACKWORD = 'arrowBackward'
+
+// 箭头方向
+export const arrowDirection = [{
+    label: '正向',
+    value: ARROWFORWARD,
+}, {
+    label: '反向',
+    value: ARROWBACKWORD,
+}]

package/packages/components/preview/index.vue

@@ -13,6 +13,8 @@ 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";
+import {ARROWFORWARD, FLASHING} from "packages/components/enums.js";
+import {arrowBackward, arrowForward} from "packages/components/settings.js";
 
 defineOptions({
   name: 'wiring-diagram-preview'
@@ -117,10 +119,10 @@ const allFields = ref([])
  * 刷新数据
  */
 const refreshData = () => {
-  cells.value = graph.value.getCells().filter(cell => cell?.data?.type === 'text' || cell?.data?.type === 'pipe')
+  cells.value = graph.value.getCells().filter(cell => cell?.data?.type === 'text' || cell?.data?.type === 'pipe' || cell?.data?.type === 'arrow')
   cells.value.forEach(item => {
     if (item?.data?.fields?.length) {
-      item.data.fields.forEach(field => {
+      item?.data.fields.forEach(field => {
         if (field.field) {
           allFields.value.push({id: item?.id, fields: item?.data.fields})
         }
@@ -163,13 +165,17 @@ const setFieldData = async () => {
 
   realData?.forEach(item => {
     const cell = graph.value.getCellById(item.id)
+    console.log('122222222',cell)
     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: 暂时不支持管道
+    }
+
+    if (cell.data.type === 'arrow') {
+      setArrow(cell, item.fields?.[0].value)
     }
   })
   timer.value = setTimeout(() => {
@@ -185,7 +191,7 @@ const setFieldData = async () => {
  */
 const replaceAllTemplateLiteralsWithArray = (str, fields) => {
   let index = 0
-  return str.replace(defaultMatch, (match, p1) => {
+  return str.replace(defaultMatch, () => {
     const field = fields.find(item => item.index === index)
     index++
     if (field) {
@@ -202,17 +208,37 @@ const replaceAllTemplateLiteralsWithArray = (str, fields) => {
  * @param value
  */
 const setPipe = (cell, value) => {
-  if(!cell.data.isCondition) {
+  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) {
+    if (Number(value) > cell.data.condition[i].min && Number(value) <= cell.data.condition[i].max) {
       cell.attr('line2/style/animation', setPipeDirection(cell.data.condition[i].direction))
       return false
     }
   }
 }
 
+/**
+ * 设置箭头
+ * @param cell
+ * @param value
+ */
+const setArrow = (cell, value) => {
+  console.log(cell,value)
+  if (!cell.data.isCondition) {
+    return false
+  }
+  for (let i = 0; i < cell.data.condition.length; i++) {
+    if (Number(value) > cell.data.condition[i].min && Number(value) <= cell.data.condition[i].max) {
+      cell.attr('arrow/style/animation', cell.data.condition[i].animation === FLASHING ? 'flashing 2s infinite linear' : '')
+      cell.attr('arrow/d', cell.data.condition[i].direction === ARROWFORWARD ? arrowForward : arrowBackward)
+      cell.attr('arrow/display', cell.data.condition[i].display)
+      return false
+    }
+  }
+}
+
 /**
  * \@description 画布自适应
  */

package/packages/components/settings.js

@@ -93,36 +93,136 @@ export const textOptions = {
     },
 }
 
+// 默认线配置
+export const defaultLine = {
+    markup: [
+        {
+            tagName: 'path',
+            selector: 'line',
+            groupSelector: 'lines'
+        },
+    ],
+    attrs: {
+        wrap: {
+            strokeWidth: 10
+        },
+        lines: {
+            connection: true,
+            strokeLinejoin: 'round',
+            fill: 'none',
+            strokeWidth: 2,
+        },
+        line: {
+            stroke: '#ffffff',
+            strokeWidth: 1,
+            sourceMarker: {
+                args: {
+                    width: 10,
+                    height: 10,
+                    offset: 0,
+                },
+                name: null
+            },
+            targetMarker: {
+                args: {
+                    width: 10,
+                    height: 10,
+                    offset: 0,
+                },
+                name: null
+            },
+        },
+    }
+}
 
-// 线配置
-export const lineOptions = {
+// 管道线配置
+export const pipeOptions = {
     markup: [
         {
             tagName: 'path',
-            selector: 'line1',
+            selector: 'line',
             groupSelector: 'lines'
         },
         {
             tagName: 'path',
-            selector: 'line2',
+            selector: 'pipe',
             groupSelector: 'lines'
         },
     ],
     attrs: {
+        wrap: {
+            strokeWidth: 10
+        },
         lines: {
             connection: true,
             strokeLinejoin: 'round',
             fill: 'none',
             strokeWidth: 2,
         },
-        line1: {
+        line: {
+            stroke: '#ffffff',
+            strokeWidth: 1,
+            targetMarker: null,
+            sourceMarker: null
+        },
+        pipe: {
             stroke: '#2364DD',
             strokeWidth: 1,
+            strokeDasharray: 5,
+            sourceMarker: {
+                args: {
+                    width: 10,
+                    height: 10,
+                    offset: 0,
+                },
+                name: null
+            },
+            targetMarker: {
+                args: {
+                    width: 10,
+                    height: 10,
+                    offset: 0,
+                },
+                name: null
+            },
+        },
+    }
+}
+
+// 正向箭头
+export const arrowForward = 'M 0 -6 8 0 0 6 z'
+
+// 逆向箭头
+export const arrowBackward = 'M 0 -6 -8 0 0 6 z'
+
+
+// 箭头线配置
+export const arrowOptions = {
+    attrs: {
+        wrap: {
+            strokeWidth: 10
+        },
+        arrow: {
+            d: arrowForward,
+            fill: '#ED8A19',
+            stroke: '#ED8A19',
+            style: {
+                animation: 'flashing 2s infinite linear'
+            },
+            display: 'block',
+        },
+        arrow1: {
+            atConnectionRatio: 0.5,
         },
-        line2: {
+        lines: {
+            connection: true,
+            strokeLinejoin: 'round',
+            fill: 'none',
+            strokeWidth: 2,
+        },
+        line: {
             stroke: '#ffffff',
             strokeWidth: 1,
-            strokeDasharray: 0,
             sourceMarker: {
                 args: {
                     width: 10,
@@ -140,5 +240,23 @@ export const lineOptions = {
                 name: null
             },
         },
-    }
+    },
+    markup: [
+        {
+            tagName: 'path',
+            selector: 'line',
+            groupSelector: 'lines'
+        },
+        {
+            tagName: 'path',
+            groupSelector: 'arrow',
+            selector: 'arrow1',
+        },
+    ]
+}
+
+// 线配置
+export const lineOptions = {
+    markup: defaultLine.markup,
+    attrs: defaultLine.attrs,
 }

package/packages/components/tools.js

@@ -5,7 +5,7 @@ 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";
+import {ARROWFORWARD, FLASHING, STOP} from "packages/components/enums.js";
 
 /**
  * 图形变换
@@ -191,10 +191,16 @@ export const addLineTools = (cell) => {
 }
 
 /**
- * 判断是直线还是管道
+ * 判断当前默认线的类型
  */
 export const isLineOrPipe = () => {
-    return lineOptions.attrs.line2.strokeDasharray === 0 ? 'line' : 'pipe'
+    if (lineOptions.attrs?.pipe) {
+        return 'pipe'
+    }
+    if (lineOptions.attrs?.arrow) {
+        return 'arrow'
+    }
+    return 'line'
 }
 
 /**
@@ -223,9 +229,18 @@ export const defaultText = '--'
 // 默认匹配字符串
 export const defaultMatch = /\$\{(.*?)\}/g
 
-// 默认条件单挑配置
-export const defaultCondition = {
+// 默认条件管道单个配置
+export const defaultPipeCondition = {
     min: 0,
     max: 0,
     direction: STOP,
 }
+
+// 默认条件箭头线配置
+export const defaultArrowCondition = {
+    min: 0,
+    max: 0,
+    animation: FLASHING,
+    direction: ARROWFORWARD,
+    display: 'block'
+}

package/packages/styles/animation.scss

@@ -9,3 +9,19 @@
         stroke-dashoffset: 1000
     }
 }
+
+// 闪烁箭头
+@keyframes flashing {
+    0% {
+        opacity: 0;
+    }
+    35% {
+        opacity: 1;
+    }
+    65% {
+        opacity: 1;
+    }
+    100% {
+        opacity: 0;
+    }
+}

package/packages/styles/editor.scss

@@ -159,4 +159,8 @@
     display: flex;
     flex-direction: column;
     gap: 10px;
+
+    .row-label{
+        font-size: 14px;
+    }
 }

package/packages/styles/elPath.scss

@@ -241,6 +241,10 @@
     }
 }
 
+::v-deep(.el-switch__label) {
+    color: #ffffff;
+}
+
 .el-table {
     --el-table-border-color: rgba(35, 100, 221, 0.3);
     --el-table-row-hover-bg-color: rgba(35, 100, 221, 0.3);