vue-wiring-diagram 1.0.16 → 1.0.17

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-wiring-diagram",
-  "version": "1.0.16",
+  "version": "1.0.17",
   "description": "A Vue 3.x component for wiring diagram",
   "type": "module",
   "main": "dist/vue-wiring-diagram.umd.js",

package/packages/components/common.js

@@ -23,6 +23,34 @@ export const showPorts = (div, show) => {
     }
 }
 
+/**
+ * 获取设备列表
+ * @returns {Promise<unknown>}
+ */
+export const getDeviceList = () => {
+    return get('/cny/custom/deviceList').then(res => {
+        if(res?.isOk) {
+            return res.data
+        }
+    })
+}
+
+/**
+ * 获取字段列表
+ * @param deviceCode
+ * @returns {Promise<*>}
+ */
+export const getFieldList = (deviceCode) => {
+    return get('/cny/custom/monitorInfo', {
+        deviceCode: deviceCode,
+        fieldType: 1
+    }).then(res => {
+        if(res?.isOk) {
+            return res.data
+        }
+    })
+}
+
 /**
  * 获取数据
  */
@@ -62,7 +90,7 @@ export const updateData = (id,data) => {
  * @returns {Promise<*>}
  */
 export const getRealData = (fields) => {
-    return post('/cny/custom/arrRealData', fields).then(res => {
+    return post('/cny/custom/arrRealData2', fields).then(res => {
         if (res?.isOk) {
             return res.data
         } else {

package/packages/components/edge-control/condition.vue

@@ -0,0 +1,88 @@
+/**
+* @Author: HuaYJ
+* @Date: 2024/10/24 10:23
+*/
+<template>
+  <div class="form-container">
+    <el-button type="primary" size="small" @click="addItemBtnClick" style="margin-bottom: 10px">添加条件</el-button>
+    <el-table :data="items" size="small" border>
+      <el-table-column prop="min" label="最小值" width="150" align="center">
+        <template #default="scope">
+          <el-input-number v-model="scope.row.min" size="small" controls-position="right" ></el-input-number>
+        </template>
+      </el-table-column>
+      <el-table-column prop="max" label="最大值" width="150" align="center">
+        <template #default="scope">
+          <el-input-number v-model="scope.row.max" size="small" controls-position="right"></el-input-number>
+        </template>
+      </el-table-column>
+      <el-table-column prop="direction" label="流向" align="center">
+        <template #default="scope">
+          <el-select v-model="scope.row.direction" size="small">
+            <el-option v-for="item in directionList" :key="item.value" :label="item.label" :value="item.value"></el-option>
+          </el-select>
+        </template>
+      </el-table-column>
+      <el-table-column label="操作" align="center">
+        <template #default="scope">
+          <el-button type="danger" size="small" @click="deleteItemBtnClick(scope.$index)">删除</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <div class="footer" style="margin-top: 10px">
+      <el-button type="primary" @click="saveBtnClick">保存</el-button>
+      <el-button @click="cancelBtnClick">取消</el-button>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import {ref} from "vue";
+import {directionList} from "packages/components/enums.js";
+import {defaultCondition} from "packages/components/tools.js";
+
+const props = defineProps({
+  payload: {
+    type: Array,
+  }
+})
+
+const items = ref(props.payload)
+
+/**
+ * 添加条件
+ */
+const addItemBtnClick = () => {
+  items.value.push(JSON.parse(JSON.stringify(defaultCondition)))
+}
+
+/**
+ * 删除条件
+ * @param index
+ */
+const deleteItemBtnClick = (index) => {
+  items.value.splice(index, 1)
+}
+
+const emit = defineEmits(['close'])
+
+/**
+ * 保存
+ */
+const saveBtnClick = () => {
+  emit('close', items.value)
+}
+
+/**
+ * 取消
+ */
+const cancelBtnClick = () => {
+  emit('close', false)
+}
+
+</script>
+
+<style scoped lang="scss">
+@use '/packages/styles/elPath.scss';
+@use '/packages/styles/dialog.scss';
+</style>

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

@@ -9,10 +9,84 @@
         <div class="row-column">
           <el-row :gutter="20">
             <el-col :span="12">
-              <div class="row-label">颜色</div>
+              <div class="row-label">类型</div>
+            </el-col>
+            <el-col :span="12">
+              <el-select v-model="type" placeholder="请选择线段类型" clearable size="small" @change="changeType">
+                <el-option v-for="item in typeList" :key="item.value" :label="item.label" :value="item.value">
+                </el-option>
+              </el-select>
+            </el-col>
+          </el-row>
+          <el-row :gutter="20">
+            <el-col :span="12">
+              <div class="row-label">颜色1</div>
+            </el-col>
+            <el-col :span="12">
+              <el-color-picker v-model="stroke1" :show-alpha="true" size="small" @change="changeLine"/>
+            </el-col>
+          </el-row>
+          <el-row :gutter="20" v-if="type === 'pipe'">
+            <el-col :span="12">
+              <div class="row-label">颜色2</div>
+            </el-col>
+            <el-col :span="12">
+              <el-color-picker v-model="stroke2" :show-alpha="true" size="small" @change="changeLine"/>
+            </el-col>
+          </el-row>
+          <el-row :gutter="20">
+            <el-col :span="12">
+              <div class="row-label">粗细</div>
+            </el-col>
+            <el-col :span="12">
+              <el-input-number v-model="strokeWidth" size="small" controls-position="right" @change="changeLine" :min="1" :max="10"
+                               :step="1"/>
+            </el-col>
+          </el-row>
+        </div>
+      </el-collapse-item>
+      <el-collapse-item v-if="type === 'pipe'" title="管道设置" name="3">
+        <div class="row-column">
+          <el-row :gutter="20">
+            <el-col :span="12">
+              <div class="row-label">管道间隔</div>
+            </el-col>
+            <el-col :span="12">
+              <el-input-number v-model="strokeDasharray" size="small" controls-position="right" @change="changeLine" :min="5" :max="100"
+                               :step="1"/>
+            </el-col>
+          </el-row>
+          <el-row :gutter="20">
+            <el-col :span="12">
+              <div class="row-label">默认流动方向</div>
+            </el-col>
+            <el-col :span="12">
+              <el-select v-model="strokeDashoffset" placeholder="请选择管道方向" size="small" @change="changeLine">
+                <el-option v-for="item in directionList" :key="item.value" :label="item.label" :value="item.value">
+                </el-option>
+              </el-select>
+            </el-col>
+          </el-row>
+          <el-row :gutter="20">
+            <el-col :span="12">
+              <div class="row-label">参数设置</div>
+            </el-col>
+            <el-col :span="12">
+              <el-select v-model="deviceCode" placeholder="请选择设备" @change="checkDevice" size="small" filterable clearable >
+                <el-option v-for="item in deviceList" :key="item.deviceCode" :label="item.deviceName" :value="item.deviceCode"/>
+              </el-select>
+              <el-select v-model="fieldCode" placeholder="请选择字段" @change="checkField" size="small" filterable clearable style="margin-top: 10px">
+                <el-option v-for="item in fieldList" :key="item.dataField" :label="item.name" :value="item.dataField"/>
+              </el-select>
+            </el-col>
+          </el-row>
+          <el-row :gutter="20">
+            <el-col :span="12">
+              <div class="row-label">条件配置</div>
             </el-col>
             <el-col :span="12">
-              <el-color-picker v-model="stroke" :show-alpha="true" size="small" @change="changeLine"/>
+              <el-switch v-model="isCondition" :active-value="true" :inactive-value="false" size="small" @change="changeCondition"/>
+              <el-button type="primary" size="small" @click="showCondition" style="margin-left: 10px">配置</el-button>
             </el-col>
           </el-row>
         </div>
@@ -102,75 +176,178 @@
         </div>
       </el-collapse-item>
     </el-collapse>
+    <el-dialog v-model="dialogCondition.show" width="500px" title="条件配置" :show-close="false" :close-on-click-modal="false"
+               :close-on-press-escape="false">
+      <condition v-if="dialogCondition.show" :payload="dialogCondition.payload" @close="closeCondition"></condition>
+    </el-dialog>
   </div>
 </template>
 
 <script setup>
-import {reactive, ref} from "vue";
+import {onMounted, reactive, ref} from "vue";
 import {lineOptions} from "../settings.js";
+import {setPipeDirection} from "packages/components/tools.js";
+import {arrowList, directionList, STOP, typeList} from "packages/components/enums.js";
+import Condition from "packages/components/edge-control/condition.vue";
+import {getDeviceList, getFieldList} from "packages/components/common.js";
 
 const props = defineProps({
   payload: Object
 })
 
-const stroke = ref(props.payload.attrs.line.stroke)
+const activeName = ref('0')
+
+const type = ref(props.payload.data.type)
+const stroke1 = ref(props.payload.attrs.line2.stroke)
+const stroke2 = ref(props.payload.attrs.line1.stroke)
+const strokeWidth = ref(props.payload.attrs.line1.strokeWidth)
+const strokeDasharray = ref(props.payload.attrs.line2.strokeDasharray)
+const strokeDashoffset = ref(props.payload.attrs.line2?.style?.animation.split(' ')[0] ?? STOP)
 const sourceMarker = reactive({
-  name: props.payload.attrs.line.sourceMarker?.name ?? null,
-  args: props.payload.attrs.line.sourceMarker?.args ?? {}
+  name: props.payload.attrs.line2.sourceMarker?.name ?? null,
+  args: props.payload.attrs.line2.sourceMarker?.args ?? {}
 })
 const targetMarker = reactive({
-  name: props.payload.attrs.line.targetMarker?.name ?? null,
-  args: props.payload.attrs.line.targetMarker?.args ?? {}
+  name: props.payload.attrs.line2.targetMarker?.name ?? null,
+  args: props.payload.attrs.line2.targetMarker?.args ?? {}
 })
 
-const arrowList = [
-  {
-    label: 'Block',
-    value: 'block'
-  },
-  {
-    label: 'Classic',
-    value: 'classic'
-  },
-  {
-    label: 'Diamond',
-    value: 'diamond'
-  },
-  {
-    label: 'Cross',
-    value: 'cross'
-  },
-  {
-    label: 'Async',
-    value: 'async'
-  },
-  {
-    label: 'Circle',
-    value: 'circle'
-  },
-  {
-    label: 'CirclePlus',
-    value: 'circlePlus'
-  },
-  {
-    label: 'Ellipse',
-    value: 'ellipse'
-  },
-]
-
-const activeName = ref('0')
-
 /**
  * 线段属性改变
  */
 const changeLine = () => {
-  props.payload.attr('line/stroke', stroke.value)
-  props.payload.attr('line/sourceMarker/name', sourceMarker.name)
-  props.payload.attr('line/sourceMarker/args', sourceMarker.args)
-  props.payload.attr('line/targetMarker/name', targetMarker.name)
-  props.payload.attr('line/targetMarker/args', targetMarker.args)
-  lineOptions.line = props.payload.attrs.line
+  props.payload.attr('line1/stroke', stroke2.value)
+  props.payload.attr('line2/stroke', stroke1.value)
+  props.payload.attr('line1/strokeWidth', strokeWidth.value)
+  props.payload.attr('line2/strokeWidth', strokeWidth.value)
+  props.payload.attr('line2/strokeDasharray', strokeDasharray.value)
+  props.payload.attr('line2/sourceMarker/name', sourceMarker.name)
+  props.payload.attr('line2/sourceMarker/args', sourceMarker.args)
+  props.payload.attr('line2/targetMarker/name', targetMarker.name)
+  props.payload.attr('line2/targetMarker/args', targetMarker.args)
+  props.payload.attr('line2/style/animation', setPipeDirection(strokeDashoffset.value))
+  lineOptions.markup = props.payload.markup
+  lineOptions.attrs = props.payload.attrs
+  console.log('线-基础配置', lineOptions)
+  console.log('线-当前配置', props.payload)
+}
+
+/**
+ * 线段类型改变
+ */
+const changeType = () => {
+  if (type.value === 'line') {
+    props.payload.attr('line2/strokeDasharray', 0)
+  } else if (type.value === 'pipe') {
+    props.payload.attr('line2/strokeDasharray', 5)
+  }
+  props.payload.attr('line2/style/animation', setPipeDirection('none'))
+  lineOptions.markup = props.payload.markup
+  lineOptions.attrs = props.payload.attrs
+  props.payload.data.type = type.value
+  console.log('线-基础配置', lineOptions)
+  console.log('线-当前配置', props.payload)
 }
+
+// 条件线是否开启
+const isCondition = ref(props.payload.data.isCondition ?? false)
+
+/**
+ * 条件线改变
+ */
+const changeCondition = () => {
+  props.payload.data.isCondition = isCondition.value
+}
+
+// 条件线配置
+const dialogCondition = reactive({
+  show: false,
+  payload: null
+})
+
+/**
+ * 条件线配置显示
+ */
+const showCondition = () => {
+  dialogCondition.show = true
+  dialogCondition.payload = props.payload.data.condition ?? []
+}
+
+/**
+ * 条件线配置关闭
+ * @param condition
+ */
+const closeCondition = (condition) => {
+  dialogCondition.show = false
+  dialogCondition.payload = null
+  if (condition) {
+    props.payload.data.condition = condition
+  }
+  console.log('条件线', props.payload.data)
+}
+
+const deviceList = ref([]) // 设备列表
+const deviceCode = ref(props.payload.data?.fields?.[0]?.deviceCode ?? '') // 设备编码
+const fieldCode = ref(props.payload.data?.fields?.[0]?.field ?? '') // 字段编码
+
+/**
+ * 获取设备列表
+ */
+const getDevices = async () => {
+  deviceList.value = await getDeviceList()
+  if (deviceCode.value) {
+    checkDevice()
+  }
+}
+
+let currentDevice = reactive({}) // 当前设备信息
+
+/**
+ * 监听设备编码变化
+ */
+const checkDevice = () => {
+  currentDevice = deviceList.value.find(item => item.deviceCode === deviceCode.value)
+  if (currentDevice) {
+    getFields()
+    props.payload.data.fields = [{
+      index: 0,
+      deviceName: currentDevice.deviceName,
+      deviceCode: currentDevice.deviceCode,
+      field: fieldCode.value ?? '',
+    }]
+    fieldCode.value = props.payload.data.fields[0].field
+  } else {
+    fieldCode.value = ''
+    props.payload.data.fields = []
+  }
+  console.log('管道配置', props.payload)
+}
+
+const fieldList = ref([])
+
+/**
+ * 获取字段列表
+ */
+const getFields = async () => {
+  fieldList.value = await getFieldList(currentDevice.deviceCode)
+}
+
+/**
+ * 监听字段编码变化
+ */
+const checkField = () => {
+  props.payload.data.fields = [{
+    index: 0,
+    deviceName: currentDevice.deviceName,
+    deviceCode: currentDevice.deviceCode,
+    field: fieldCode.value ?? '',
+  }]
+  console.log('管道配置', props.payload)
+}
+
+onMounted(() => {
+  getDevices()
+})
 </script>
 
 <style scoped lang="scss">

package/packages/components/editor/index.vue

@@ -93,7 +93,7 @@ import {
   setMathRandom,
   deleteCell,
   copyCell,
-  pasteCell, undoCell, redoCell, addLineTools
+  pasteCell, undoCell, redoCell, addLineTools, isLineOrPipe
 } from "packages/components/tools.js";
 
 defineOptions({
@@ -138,8 +138,9 @@ const initGraph = () => {
       createEdge() {
         return graph.value.createEdge({
           inherit: 'edge',
-          attrs: {
-            ...lineOptions,
+          ...lineOptions,
+          data: {
+            type: isLineOrPipe(),
           },
           zIndex: 0,
         })
@@ -170,6 +171,13 @@ const initGraph = () => {
 
   let setZIndexTimer = null
 
+  graph.value.on('edge:click', ({cell}) => {
+    payload.value = cell
+    controls.component = edgeControl
+    controls.label = '线段属性'
+    controlsKey.value = setMathRandom()
+  })
+
   //给线添加拐点
   graph.value.on('edge:mouseenter', ({cell}) => {
     clearTimeout(setZIndexTimer)
@@ -391,9 +399,9 @@ const drawLine = () => {
       edge.value = graph.value.addEdge({
         source: {x: x, y: y},
         target: {x: x, y: y},
-        attrs: lineOptions,
+        ...lineOptions,
         data: {
-          type: 'edge',
+          type: isLineOrPipe(),
           isConnector: false,
         },
         zIndex: 0,
@@ -530,3 +538,5 @@ onMounted(() => {
 <style lang="scss" scoped>
 @use "../../styles/editor";
 </style>
+
+<style></style>

package/packages/components/enums.js

@@ -0,0 +1,60 @@
+// 线类型
+export const typeList = [{
+    label: '直线',
+    value: 'line',
+}, {
+    label: '管道',
+    value: 'pipe',
+}]
+
+// 箭头类型
+export const arrowList = [
+    {
+        label: 'Block',
+        value: 'block'
+    },
+    {
+        label: 'Classic',
+        value: 'classic'
+    },
+    {
+        label: 'Diamond',
+        value: 'diamond'
+    },
+    {
+        label: 'Cross',
+        value: 'cross'
+    },
+    {
+        label: 'Async',
+        value: 'async'
+    },
+    {
+        label: 'Circle',
+        value: 'circle'
+    },
+    {
+        label: 'CirclePlus',
+        value: 'circlePlus'
+    },
+    {
+        label: 'Ellipse',
+        value: 'ellipse'
+    },
+]
+
+export const STOP = 'stop'
+export const FORWARD_PIPE = 'forward-pipe'
+export const REVERSE_PIPE = 'reverse-pipe'
+
+// 管道方向
+export const directionList = [{
+    label: '停止',
+    value: STOP,
+}, {
+    label: '正向',
+    value: FORWARD_PIPE ,
+}, {
+    label: '反向',
+    value: REVERSE_PIPE,
+}]