vue-wiring-diagram 1.0.20 → 1.1.0

package/package.json

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

package/packages/components/edge-control/arrow-line.vue

@@ -0,0 +1,274 @@
+/**
+* @Author: HuaYJ
+* @Date: 2025/4/9 14:13
+*/
+<template>
+  <div class="container">
+    <el-collapse v-model="activeName" accordion>
+      <el-collapse-item title="线段设置" name="0">
+        <div class="row-column">
+          <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-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 title="箭头设置" name="1">
+        <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="arrowNumber" size="small" controls-position="right" @change="changeLine" :min="1" :max="20"
+                               :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-color-picker v-model="fill" :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-select v-model="direction" size="small" @change="changeLine">
+                <el-option v-for="item in arrowDirection" :key="item.value" :label="item.label" :value="item.value"/>
+              </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-switch v-model="animation" :active-value="FLASHING" active-text="闪烁" :inactive-value="STOP" inactive-text="静止" 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-switch v-model="display" active-value="block" active-text="显示" inactive-value="none" inactive-text="隐藏" size="small"
+                         @change="changeLine"/>
+            </el-col>
+          </el-row>
+        </div>
+      </el-collapse-item>
+      <el-collapse-item title="动态设置" name="2">
+        <div class="row-column">
+          <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-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>
+      </el-collapse-item>
+    </el-collapse>
+    <el-dialog v-model="dialogCondition.show" width="800px" title="条件配置" :show-close="false" :close-on-click-modal="false"
+               :close-on-press-escape="false">
+      <condition v-if="dialogCondition.show" :payload="dialogCondition.payload" type="arrow" @close="closeCondition"></condition>
+    </el-dialog>
+  </div>
+</template>
+
+<script setup>
+
+import {onMounted, reactive, ref} from "vue";
+import {arrowBackward, arrowForward, lineOptions} from "packages/components/settings.js";
+import {ARROWBACKWORD, arrowDirection, ARROWFORWARD, FLASHING, STOP} from "packages/components/enums.js";
+import {getDeviceList, getFieldList} from "packages/components/common.js";
+import Condition from "packages/components/edge-control/condition.vue";
+
+const props = defineProps({
+  payload: {
+    type: Object
+  }
+})
+
+const activeName = ref('0')
+
+console.log(props.payload)
+
+const stroke = ref(props.payload.attrs.line.stroke) // 颜色
+const strokeWidth = ref(props.payload.attrs.line.strokeWidth) // 粗细
+
+const oldArrowNumber = props.payload.markup.length - 1 // 记录箭头数量
+const arrowNumber = ref(props.payload.markup.length - 1) // 箭头数量
+
+const fill = ref(props.payload.attrs.arrow.fill) // 箭头颜色
+const direction = ref(props.payload.attrs.arrow.d === arrowForward ? ARROWFORWARD : ARROWBACKWORD) // 箭头方向
+const animation = ref(props.payload.attrs.arrow.style.animation.split(' ')[0] === FLASHING ? FLASHING : STOP) // 箭头闪烁
+const display = ref(props.payload.attrs.arrow.display)
+
+/**
+ * 修改线段样式
+ */
+const changeLine = () => {
+  props.payload.attr('line/stroke', stroke.value)
+  props.payload.attr('line/strokeWidth', strokeWidth.value)
+  props.payload.attr('arrow/fill', fill.value)
+  props.payload.attr('arrow/stroke', fill.value)
+  // 箭头数量
+  if (arrowNumber.value !== oldArrowNumber) {
+    props.payload.markup = props.payload.markup.slice(0, 1)
+    for (let i = 0; i < arrowNumber.value; i++) {
+      props.payload.markup.push({
+        tagName: 'path',
+        groupSelector: 'arrow',
+        selector: 'arrow' + (i + 1),
+      })
+      props.payload.attr('arrow' + (i + 1), {
+        atConnectionRatio: (1 / (arrowNumber.value + 1)) * (i + 1),
+      })
+    }
+  }
+  props.payload.attr('arrow/d', direction.value === ARROWFORWARD ? arrowForward : arrowBackward)
+  props.payload.attr('arrow/style/animation', animation.value === FLASHING ? 'flashing 2s infinite linear' : '')
+  props.payload.attr('arrow/display', display.value)
+  console.log(props.payload.markup)
+  lineOptions.markup = props.payload.markup
+  lineOptions.attrs = props.payload.attrs
+}
+
+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)
+}
+
+// 条件线是否开启
+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)
+}
+
+onMounted(() => {
+  getDevices()
+})
+</script>
+
+<style scoped lang="scss">
+
+</style>

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

@@ -8,7 +8,7 @@
     <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>
+          <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">
@@ -16,13 +16,31 @@
           <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">
+      <el-table-column prop="direction" label="流向" v-if="type === 'pipe'" 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 prop="direction" label="方向" v-if="type === 'arrow'" align="center">
+        <template #default="scope">
+          <el-switch v-model="scope.row.direction" :active-value="ARROWFORWARD" active-text="正向" :inactive-value="ARROWBACKWORD"
+                     inactive-text="反向" size="small"/>
+        </template>
+      </el-table-column>
+      <el-table-column prop="direction" label="动作" v-if="type === 'arrow'" align="center">
+        <template #default="scope">
+          <el-switch v-model="scope.row.animation" :active-value="FLASHING" active-text="闪烁" :inactive-value="STOP" inactive-text="静止"
+                     size="small"/>
+        </template>
+      </el-table-column>
+      <el-table-column prop="display" label="显示" v-if="type === 'arrow'" align="center">
+        <template #default="scope">
+          <el-switch v-model="scope.row.display" :active-value="'block'" active-text="显示" :inactive-value="'none'" inactive-text="隐藏"
+                     size="small"/>
+        </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>
@@ -38,22 +56,26 @@
 
 <script setup>
 import {ref} from "vue";
-import {directionList} from "packages/components/enums.js";
-import {defaultCondition} from "packages/components/tools.js";
+import {ARROWBACKWORD, ARROWFORWARD, directionList, FLASHING, STOP} from "packages/components/enums.js";
+import {defaultArrowCondition, defaultPipeCondition} from "packages/components/tools.js";
 
 const props = defineProps({
   payload: {
     type: Array,
+  },
+  type: {
+    type: String,
   }
 })
 
+
 const items = ref(props.payload)
 
 /**
  * 添加条件
  */
 const addItemBtnClick = () => {
-  items.value.push(JSON.parse(JSON.stringify(defaultCondition)))
+  items.value.push(JSON.parse(JSON.stringify(props.type === 'pipe' ? defaultPipeCondition : defaultArrowCondition)))
 }
 
 /**

package/packages/components/edge-control/default-line.vue

@@ -0,0 +1,156 @@
+/**
+* @Author: HuaYJ
+* @Date: 2025/4/9 09:21
+*/
+<template>
+  <div class="container">
+    <el-collapse v-model="activeName" accordion>
+      <el-collapse-item title="线段设置" name="0">
+        <div class="row-column">
+          <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-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 title="箭头1设置" name="1">
+        <div class="row-column">
+          <el-row :gutter="20">
+            <el-col :span="12">
+              <div class="row-label">类型</div>
+            </el-col>
+            <el-col :span="12">
+              <el-select v-model="sourceMarker.name" placeholder="请选择箭头类型" clearable size="small" @change="changeLine">
+                <el-option v-for="item in arrowList" :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-input-number v-model="sourceMarker.args.width" size="small" controls-position="right" @change="changeLine" :min="0" :max="10"
+                               :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-input-number v-model="sourceMarker.args.height" size="small" controls-position="right" @change="changeLine" :min="0" :max="10"
+                               :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-input-number v-model="sourceMarker.args.offset" size="small" controls-position="right" @change="changeLine" :min="0" :max="10"
+                               :step="1"/>
+            </el-col>
+          </el-row>
+        </div>
+      </el-collapse-item>
+      <el-collapse-item title="箭头2设置" name="2">
+        <div class="row-column">
+          <el-row :gutter="20">
+            <el-col :span="12">
+              <div class="row-label">类型</div>
+            </el-col>
+            <el-col :span="12">
+              <el-select v-model="targetMarker.name" placeholder="请选择箭头类型" clearable size="small" @change="changeLine">
+                <el-option v-for="item in arrowList" :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-input-number v-model="targetMarker.args.width" size="small" controls-position="right" @change="changeLine" :min="0" :max="10"
+                               :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-input-number v-model="targetMarker.args.height" size="small" controls-position="right" @change="changeLine" :min="0" :max="10"
+                               :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-input-number v-model="targetMarker.args.offset" size="small" controls-position="right" @change="changeLine" :min="0" :max="10"
+                               :step="1"/>
+            </el-col>
+          </el-row>
+        </div>
+      </el-collapse-item>
+    </el-collapse>
+  </div>
+</template>
+
+<script setup>
+import {reactive, ref} from "vue";
+import {lineOptions} from "packages/components/settings.js";
+import {arrowList} from "packages/components/enums.js";
+
+const props = defineProps({
+  payload: Object
+})
+
+const activeName = ref('0')
+
+const stroke = ref(props.payload.attrs.line.stroke) // 线段颜色
+const strokeWidth = ref(props.payload.attrs.line.strokeWidth)  // 线段粗细
+const sourceMarker = reactive({
+  name: props.payload.attrs.line.sourceMarker?.name ?? null,
+  args: props.payload.attrs.line.sourceMarker?.args ?? {}
+})
+const targetMarker = reactive({
+  name: props.payload.attrs.line.targetMarker?.name ?? null,
+  args: props.payload.attrs.line.targetMarker?.args ?? {}
+})
+
+/**
+ * 改变线段属性
+ */
+const changeLine = () => {
+  props.payload.attr('line/stroke', stroke.value)
+  props.payload.attr('line/strokeWidth', strokeWidth.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.markup = props.payload.markup
+  lineOptions.attrs = props.payload.attrs
+}
+</script>
+
+<style scoped lang="scss">
+@use "../../styles/editor.scss";
+</style>