vue-wiring-diagram 1.1.21 → 1.1.23

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

@@ -1,124 +1,290 @@
-/**
-* @Author: HuaYJ
-* @Date: 2024/11/5 11:35
-*/
-<template>
-  <div class="control-box">
-    <el-collapse v-model="activeName" accordion>
-      <el-collapse-item title="连接桩设置" name="3">
-        <el-button type="primary" @click="addPorts" size="small">添加连接桩</el-button>
-        <el-button type="primary" @click="showPort" size="small">显示连接桩</el-button>
-        <el-table :data="ports" border size="small" style="margin-top: 10px;">
-          <el-table-column label="ID" width="50" align="center">
-            <template v-slot="{row}">
-              {{ row.attrs.text.text }}
-            </template>
-          </el-table-column>
-          <el-table-column label="x" width="100" align="center">
-            <template v-slot="{row}">
-              <el-slider v-model="row.args.x" :min="0" :max="100" :step="1" @input="(e) => changePorts(row.id, 'x', e)"/>
-            </template>
-          </el-table-column>
-          <el-table-column label="y" width="100" align="center">
-            <template v-slot="{row}">
-              <el-slider v-model="row.args.y" :min="0" :max="100" :step="1" @input="(e) => changePorts(row.id, 'y', e)"/>
-            </template>
-          </el-table-column>
-          <el-table-column label="操作" width="70" align="center">
-            <template v-slot="{row}">
-              <el-button type="danger" size="small" @click="deletePort(row.id)">
-                <el-icon>
-                  <delete-filled/>
-                </el-icon>
-              </el-button>
-            </template>
-          </el-table-column>
-        </el-table>
-      </el-collapse-item>
-    </el-collapse>
-  </div>
-</template>
-
-<script setup>
-
-import {onMounted, ref} from "vue";
-import {showPorts} from "../common.js";
-import {DeleteFilled} from "@element-plus/icons-vue";
-import {portOption} from "../settings.js";
-
-const props = defineProps({
-  payload: Object
-})
-
-const activeName = ref('3')
-
-const ports = ref([]) // 连接桩数据
-
-/**
- * 获取连接桩数据
- */
-const getPorts = () => {
-  ports.value = JSON.parse(JSON.stringify(props.payload.getPorts().map((item) => {
-    return {
-      id: item.id,
-      attrs: item.attrs,
-      args: {
-        x: Number(item.args.x.replace('%', '')),
-        y: Number(item.args.y.replace('%', ''))
-      }
-    }
-  })))
-}
-
-/**
- * 添加连接桩
- */
-const addPorts = () => {
-  const port = portOption
-  port.attrs.text.text = `${props.payload.getPorts().length + 1}`
-  port.args.x = '50%'
-  port.args.y = '50%'
-  props.payload.addPorts([
-    {
-      group: 'ports',
-      ...port
-    },
-  ])
-  getPorts()
-}
-
-/**
- * 显示连接桩
- */
-const showPort = () => {
-  showPorts("#drawing-board",true)
-}
-
-/**
- * 修改连接桩
- * @param id
- * @param key
- * @param value
- */
-const changePorts = (id, key, value) => {
-  props.payload.portProp(id, 'args/' + key, value + '%')
-  getPorts()
-}
-
-/**
- *  删除连接桩
- * @param id
- */
-const deletePort = (id) => {
-  props.payload.removePort(id)
-  getPorts()
-}
-
-onMounted(() => {
-  getPorts()
-})
-</script>
-
-<style scoped lang="scss">
-@use "../../styles/editor.scss";
-</style>
+/**
+* @Author: HuaYJ
+* @Date: 2024/11/5 11:35
+*/
+<template>
+  <div class="control-box">
+    <el-collapse v-model="activeName" accordion>
+      <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-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-item title="连接桩设置" name="3">
+        <el-button type="primary" @click="addPorts" size="small">添加连接桩</el-button>
+        <el-button type="primary" @click="showPort" size="small">显示连接桩</el-button>
+        <el-table :data="ports" border size="small" style="margin-top: 10px;">
+          <el-table-column label="ID" width="50" align="center">
+            <template v-slot="{row}">
+              {{ row.attrs.text.text }}
+            </template>
+          </el-table-column>
+          <el-table-column label="x" width="100" align="center">
+            <template v-slot="{row}">
+              <el-slider v-model="row.args.x" :min="0" :max="100" :step="1" @input="(e) => changePorts(row.id, 'x', e)"/>
+            </template>
+          </el-table-column>
+          <el-table-column label="y" width="100" align="center">
+            <template v-slot="{row}">
+              <el-slider v-model="row.args.y" :min="0" :max="100" :step="1" @input="(e) => changePorts(row.id, 'y', e)"/>
+            </template>
+          </el-table-column>
+          <el-table-column label="操作" width="70" align="center">
+            <template v-slot="{row}">
+              <el-button type="danger" size="small" @click="deletePort(row.id)">
+                <el-icon>
+                  <delete-filled/>
+                </el-icon>
+              </el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+      </el-collapse-item>
+    </el-collapse>
+    
+    <!-- 条件配置弹窗 -->
+    <el-dialog v-model="dialogCondition.show" width="550px" title="条件配置" :show-close="false"
+               :close-on-click-modal="false"
+               :close-on-press-escape="false">
+      <image-condition v-if="dialogCondition.show" :payload="dialogCondition.payload" type="image"
+                       @close="closeCondition"></image-condition>
+    </el-dialog>
+  </div>
+</template>
+
+<script setup>
+
+import {onMounted, reactive, ref} from "vue";
+import {showPorts, getDeviceList, getFieldList} from "../common.js";
+import {DeleteFilled} from "@element-plus/icons-vue";
+import {portOption} from "../settings.js";
+import ImageCondition from "./image-condition.vue";
+
+const props = defineProps({
+  payload: Object,
+  itemId: {
+    type: String,
+    default: ''
+  }
+})
+
+// 确保图片节点 data 结构存在，避免写入时 data 为 undefined 抛错
+const ensureImageData = () => {
+  if (!props.payload.data) {
+    props.payload.data = {
+      type: 'image',
+      isCondition: false,
+      fields: [],
+      condition: []
+    }
+  } else {
+    if (typeof props.payload.data.type === 'undefined') props.payload.data.type = 'image'
+    if (typeof props.payload.data.isCondition === 'undefined') props.payload.data.isCondition = false
+    if (!Array.isArray(props.payload.data.fields)) props.payload.data.fields = []
+    if (!Array.isArray(props.payload.data.condition)) props.payload.data.condition = []
+  }
+}
+ensureImageData()
+
+const activeName = ref('1')
+
+const ports = ref([]) // 连接桩数据
+
+// 设备相关
+const deviceList = ref([]) // 设备列表
+const deviceCode = ref(props.payload.data?.fields?.[0]?.deviceCode ?? '') // 设备编码
+const fieldCode = ref(props.payload.data?.fields?.[0]?.field ?? '') // 字段编码
+const fieldList = ref([]) // 字段列表
+
+let currentDevice = reactive({}) // 当前设备信息
+
+// 条件相关
+const isCondition = ref(props.payload.data?.isCondition ?? false) // 条件线是否开启
+const dialogCondition = reactive({
+  show: false,
+  payload: null
+})
+
+/**
+ * 获取设备列表
+ */
+const getDevices = async () => {
+  deviceList.value = await getDeviceList(props.itemId)
+  if (deviceCode.value) {
+    checkDevice()
+  }
+}
+
+/**
+ * 监听设备编码变化
+ */
+const checkDevice = () => {
+  ensureImageData()
+  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 getFields = async () => {
+  if (!currentDevice?.deviceCode) return
+  fieldList.value = await getFieldList(currentDevice.deviceCode)
+}
+
+/**
+ * 监听字段编码变化
+ */
+const checkField = () => {
+  ensureImageData()
+  props.payload.data.fields = [{
+    index: 0,
+    deviceName: currentDevice?.deviceName ?? '',
+    deviceCode: currentDevice?.deviceCode ?? '',
+    field: fieldCode.value ?? '',
+  }]
+  console.log('图片配置', props.payload)
+}
+
+/**
+ * 条件线改变
+ */
+const changeCondition = () => {
+  ensureImageData()
+  props.payload.data.isCondition = isCondition.value
+}
+
+/**
+ * 条件线配置显示
+ */
+const showCondition = () => {
+  ensureImageData()
+  dialogCondition.show = true
+  dialogCondition.payload = props.payload.data.condition ?? []
+}
+
+/**
+ * 条件线配置关闭
+ * @param condition
+ */
+const closeCondition = (condition) => {
+  dialogCondition.show = false
+  dialogCondition.payload = null
+  if (condition) {
+    ensureImageData()
+    props.payload.data.condition = condition
+  }
+  console.log('图片条件配置', props.payload.data)
+}
+
+/**
+ * 获取连接桩数据
+ */
+const getPorts = () => {
+  ports.value = JSON.parse(JSON.stringify(props.payload.getPorts().map((item) => {
+    return {
+      id: item.id,
+      attrs: item.attrs,
+      args: {
+        x: Number(item.args.x.replace('%', '')),
+        y: Number(item.args.y.replace('%', ''))
+      }
+    }
+  })))
+}
+
+/**
+ * 添加连接桩
+ */
+const addPorts = () => {
+  const port = portOption
+  port.attrs.text.text = `${props.payload.getPorts().length + 1}`
+  port.args.x = '50%'
+  port.args.y = '50%'
+  props.payload.addPorts([
+    {
+      group: 'ports',
+      ...port
+    },
+  ])
+  getPorts()
+}
+
+/**
+ * 显示连接桩
+ */
+const showPort = () => {
+  showPorts("#drawing-board",true)
+}
+
+/**
+ * 修改连接桩
+ * @param id
+ * @param key
+ * @param value
+ */
+const changePorts = (id, key, value) => {
+  props.payload.portProp(id, 'args/' + key, value + '%')
+  getPorts()
+}
+
+/**
+ *  删除连接桩
+ * @param id
+ */
+const deletePort = (id) => {
+  props.payload.removePort(id)
+  getPorts()
+}
+
+onMounted(() => {
+  ensureImageData()
+  getPorts()
+  getDevices()
+})
+</script>
+
+<style scoped lang="scss">
+@use "../../styles/editor.scss";
+</style>

package/packages/components/portsOptions.js

@@ -1,21 +1,21 @@
-export const portsOptions = {
-    groups: {
-        ports: {
-            position: 'absolute',
-            args: {
-                x: 0,
-                y: 0,
-            },
-            attrs: {
-                circle: {
-                    magnet: true,
-                    stroke: '#8f8f8f',
-                    r: 4,
-                },
-            },
-            label: {
-                position: 'top',
-            },
-        },
-    }
-}
+export const portsOptions = {
+    groups: {
+        ports: {
+            position: 'absolute',
+            args: {
+                x: 0,
+                y: 0,
+            },
+            attrs: {
+                circle: {
+                    magnet: true,
+                    stroke: '#8f8f8f',
+                    r: 4,
+                },
+            },
+            label: {
+                position: 'top',
+            },
+        },
+    }
+}