vue-wiring-diagram 1.1.26 → 1.1.27

package/package.json

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

package/packages/components/common.js

@@ -36,6 +36,24 @@ export const getDeviceList = (itemId) => {
     })
 }
 
+/**
+ * 获取设备列表
+ * @param itemId
+ * @returns {Promise<unknown>}
+ */
+export const getKGDeviceList = (itemId) => {
+    return get('/template/getDiField', {itemIds: itemId}).then(res => {
+        if (res?.isOk) {
+            return res.data.map(item => {
+                return {
+                    id:item.deviceCode + item.field,
+                    ...item
+                }
+            })
+        }
+    })
+}
+
 /**
  * 获取字段列表
  * @param deviceCode
@@ -58,7 +76,7 @@ export const getFieldList = (deviceCode) => {
 export const getData = (id) => {
     return get('/template/selectOne', {id: id}).then(res => {
         if (res?.isOk) {
-            const data = JSON.parse(res.data.remark)
+            const data = JSON.parse(res.data?.remark ?? '{}')
             if(data === null) {
                 return null
             }

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

@@ -62,33 +62,54 @@
                     </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>
+                            <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-button type="primary" size="small" @click="showCondition" style="margin-left: 10px">
+                                                            配置
+                                                        </el-button>-->
                         </el-col>
                     </el-row>
+                    <transition name="el-zoom-in-top" mode="out-in">
+                        <el-row :gutter="20" v-show="isCondition">
+                            <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-select v-model="deviceCodes" placeholder="请选择设备" multiple @change="checkDevice" size="small"
+                                           filterable clearable>
+                                    <el-option v-for="item in deviceList" :key="item.id" :label="item.deviceName"
+                                               :value="item.id"/>
+                                </el-select>
+                            </el-col>
+                        </el-row>
+                    </transition>
+                    <transition name="el-zoom-in-top">
+                        <el-row :gutter="20" v-show="isCondition">
+                            <el-col :span="12">
+                                <div class="row-label">流向设置</div>
+                            </el-col>
+                            <el-col :span="12">
+                                <el-select v-model="direction" @change="changeDirection" size="small">
+                                    <el-option v-for="item in directionList" :key="item.value" :label="item.label"
+                                               :value="item.value">
+                                    </el-option>
+                                </el-select>
+                            </el-col>
+                        </el-row>
+                    </transition>
                 </div>
             </el-collapse-item>
             <el-collapse-item title="箭头1设置" name="2">
@@ -186,12 +207,12 @@
                 </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" type="pipe"
-                       @close="closeCondition"></condition>
-        </el-dialog>
+        <!--        <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" type="pipe"
+                               @close="closeCondition"></condition>
+                </el-dialog>-->
     </div>
 </template>
 
@@ -199,9 +220,9 @@
 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 {arrowList, directionList, FORWARD_PIPE, STOP, typeList} from "packages/components/enums.js";
 import Condition from "packages/components/edge-control/condition.vue";
-import {getDeviceList, getFieldList} from "packages/components/common.js";
+import {getDeviceList, getFieldList, getKGDeviceList} from "packages/components/common.js";
 
 const props = defineProps({
     payload: Object,
@@ -255,69 +276,90 @@ const isCondition = ref(props.payload.data.isCondition ?? false)
  */
 const changeCondition = () => {
     props.payload.data.isCondition = isCondition.value
+    props.payload.data.direction = direction.value
 }
 
 // 条件线配置
-const dialogCondition = reactive({
+/*const dialogCondition = reactive({
     show: false,
     payload: null
-})
+})*/
 
 /**
  * 条件线配置显示
  */
-const showCondition = () => {
+/*const showCondition = () => {
     dialogCondition.show = true
     dialogCondition.payload = props.payload.data.condition ?? []
-}
+}*/
 
 /**
  * 条件线配置关闭
  * @param condition
  */
-const closeCondition = (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 deviceCodes = ref(props.payload.data?.fields?.map(item => item.deviceCode) ?? [])
+const direction = ref(props.payload.data.direction ?? FORWARD_PIPE) // 流向
 const fieldCode = ref(props.payload.data?.fields?.[0]?.field ?? '') // 字段编码
 
 /**
  * 获取设备列表
  */
 const getDevices = async () => {
-    deviceList.value = await getDeviceList(props.itemId)
+    deviceList.value = await getKGDeviceList(props.itemId)
     if (deviceCode.value) {
         checkDevice()
     }
 }
 
+/**
+ * 改变流向
+ * @param value
+ */
+const changeDirection = (value) => {
+    direction.value = value
+    props.payload.data.direction = value
+}
+
 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 = []
-    }
+    // currentDevice = deviceList.value.find(item => item.deviceCode === deviceCode.value)
+    // if (currentDevice) {
+    //     getFields()
+    //     props.payload.data.fields = [{
+    //         deviceName: currentDevice.deviceName,
+    //         deviceCode: currentDevice.deviceCode,
+    //         field: fieldCode.value ?? '',
+    //     }]
+    //     fieldCode.value = props.payload.data.fields[0].field
+    // } else {
+    //     fieldCode.value = ''
+    //     props.payload.data.fields = []
+    // }
+
+    props.payload.data.fields = deviceCodes.value.map(item => {
+        const device = deviceList.value.find(v => v.deviceCode + v.field === item)
+        return {
+            deviceName: device.deviceName,
+            deviceCode: device.deviceCode,
+            field: device.field,
+            id: device.id
+        }
+    })
     console.log('管道配置', props.payload)
 }
 
@@ -326,22 +368,21 @@ const fieldList = ref([])
 /**
  * 获取字段列表
  */
-const getFields = async () => {
+/*const getFields = async () => {
     fieldList.value = await getFieldList(currentDevice.deviceCode)
-}
+}*/
 
 /**
  * 监听字段编码变化
  */
-const checkField = () => {
+/*const checkField = () => {
     props.payload.data.fields = [{
-        index: 0,
         deviceName: currentDevice.deviceName,
         deviceCode: currentDevice.deviceCode,
         field: fieldCode.value ?? '',
     }]
     console.log('管道配置', props.payload)
-}
+}*/
 
 onMounted(() => {
     getDevices()

package/packages/components/preview/index.vue

@@ -134,7 +134,7 @@ const loading = ref(false)
  * 刷新数据
  */
 const refreshData = () => {
-    cells.value = graph.value.getCells().filter(cell => cell?.data?.type === 'text' || cell?.data?.type === 'pipe' || cell?.data?.type === 'arrow' || cell?.data?.type == 'image' )
+    cells.value = graph.value.getCells().filter(cell => cell?.data?.type === 'text' || cell?.data?.type === 'pipe' || cell?.data?.type === 'arrow' || cell?.data?.type === 'image')
     cells.value.forEach(item => {
         if (item?.data?.fields?.length) {
             allFields.value.push({id: item?.id, fields: item?.data.fields})
@@ -211,8 +211,8 @@ const setRealData = (realData) => {
             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)
+            console.log('管道详情', cell, item.fields)
+            setPipe(cell, item.fields)
         }
 
         if (cell.data.type === 'arrow') {
@@ -248,27 +248,38 @@ const replaceAllTemplateLiteralsWithArray = (str, fields) => {
 /**
  * 设置管道
  * @param cell
- * @param value
+ * @param fields
  */
-const setPipe = (cell, value) => {
+const setPipe = (cell, fields) => {
+    console.log(cell, fields)
     if (!cell.data.isCondition) {
         return false
     }
-    console.log('进入设置管道阶段start：', cell)
-    console.log('管道条件判断设置：', cell.data.condition)
-    for (let i = 0; i < cell.data.condition.length; i++) {
-        console.log('┌──────单个设置管道阶段start：───────┐')
-        console.log('条件：', cell.data.condition[i])
-        console.log('判断条件是否通过：', Number(value) > cell.data.condition[i].min && Number(value) < cell.data.condition[i].max)
-        if (Number(value) > cell.data.condition[i].min && Number(value) < cell.data.condition[i].max) {
-            console.log('管道条件判断设置的动画：', setPipeDirection(cell.data.condition[i].direction))
-            cell.attr('pipe/style/animation', setPipeDirection(cell.data.condition[i].direction))
-            console.log('设置过后的属性：', cell)
-            console.log('└────────单个条件结束判断────────┘')
-            return false
-        }
-        console.log('└─────────单个条件结束判断───────┘')
-    }
+    // console.log('进入设置管道阶段start：', cell)
+    // if (cell.data.condition.length) {
+    //     for (let i = 0; i < cell.data.condition.length; i++) {
+    //         console.log('┌──────单个设置管道阶段start：───────┐')
+    //         console.log('条件：', cell.data.condition[i])
+    //         console.log('判断条件是否通过：', Number(fields[0].value) > cell.data.condition[i].min && Number(fields[0].value) < cell.data.condition[i].max)
+    //         if (Number(fields[0].value) > cell.data.condition[i].min && Number(fields[0].value) < cell.data.condition[i].max) {
+    //             console.log('管道条件判断设置的动画：', setPipeDirection(cell.data.condition[i].direction))
+    //             cell.attr('pipe/style/animation', setPipeDirection(cell.data.condition[i].dirßection))
+    //             console.log('设置过后的属性：', cell)
+    //             console.log('└────────单个条件结束判断────────┘')
+    //             return false
+    //         }
+    //         console.log('└─────────单个条件结束判断───────┘')
+    //     }
+    // }
+    console.log('┌────────单个设置管道开始判断────────┐')
+    console.log(fields.some(item => item?.value1 == 1))
+    console.log(cell.data)
+    cell.attr('pipe/style/animation', fields.some(item => {
+        console.log('判断条件是否通过：', item?.value1 == 1, item.value1, item)
+        return item?.value1 == 1
+    }) ? setPipeDirection(cell.data.direction) : '')
+    console.log('设置过后的属性：', cell)
+    console.log('└────────单个设置管道结束判断────────┘')
 }
 /**
  * 设置箭头
@@ -302,20 +313,20 @@ const setImage = (cell, fields) => {
     console.log('进入设置图片阶段：', cell)
     console.log('图片条件判断设置：', cell.data.condition)
     console.log('设备字段数据：', fields)
-    
+
     // 如果没有字段数据，直接返回
     if (!fields || fields.length === 0) {
         return false
     }
-    
+
     // 获取设备值（图片目前只支持单设备）
     const field = fields[0]
     const value = Number(field.value)
-    
+
     // 根据条件判断更换图片
     for (let i = 0; i < cell.data.condition.length; i++) {
         const condition = cell.data.condition[i]
-        console.log(cell.data,'cell.data55555555');
+        console.log(cell.data, 'cell.data55555555');
         if (value > condition.min && value < condition.max) {
             if (condition.imageUrl) {
                 console.log('更换图片为：', setSunCloudImageUrl(condition?.imageUrl))
@@ -324,7 +335,7 @@ const setImage = (cell, fields) => {
             return false
         }
     }
-    
+
     console.log('未匹配到条件，保持原图片')
 }
 

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

@@ -16,7 +16,7 @@
                     <el-option v-for="item in deviceList" :key="item.deviceCode" :label="item.deviceName"
                                :value="item.deviceCode"/>
                 </el-select>
-                <el-input v-model="deviceName" placeholder="请输入设备名称" clearable style="margin-top: 5px"/>
+                <el-input v-model="deviceName" placeholder="请输入字段名称" clearable style="margin-top: 5px"/>
                 <el-table :data="filterFieldList" border style="margin-top: 20px;" size="small" height="500"
                           @row-click="checkField">
                     <el-table-column type="index" label="序号" width="50" align="center"></el-table-column>

package/packages/styles/elPath.scss

@@ -255,3 +255,13 @@
     line-height: 28px !important;
 }
 
+:deep(.el-tag) {
+    background: #2e5bb3;
+    color: #ffffff;
+
+    .el-tag__close{
+        color: #ffffff;
+    }
+}
+
+