vue-wiring-diagram 1.1.21 → 1.1.23

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

@@ -1,292 +1,292 @@
-/**
-* @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="900px" 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,
-        itemId: {
-            type: String,
-            default: ''
-        }
-    }
-})
-
-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(props.itemId)
-    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">
-@use "../../styles/editor.scss";
-</style>
+/**
+* @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="900px" 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,
+        itemId: {
+            type: String,
+            default: ''
+        }
+    }
+})
+
+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(props.itemId)
+    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">
+@use "../../styles/editor.scss";
+</style>