vue-wiring-diagram 1.0.6 → 1.0.7

package/package.json

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

package/packages/components/baseShape.js

@@ -12,7 +12,7 @@ export const baseShape = [
         },
         data: {
             type: 'base-shape'
-        }
+        },
     },
     {
         shape: 'rect',

package/packages/components/editor/index.vue

@@ -23,7 +23,7 @@
           </template>
         </el-dropdown>
       </div>
-      <div class="action">
+      <div class="action" style="margin-right: 50px">
         <el-tooltip content="预览" placement="bottom">
           <el-button size="small" :icon="View" @click="viewJson">
           </el-button>
@@ -89,6 +89,8 @@ import {portsOptions} from "../portsOptions.js";
 import {Document, View, ArrowDown} from "@element-plus/icons-vue";
 import WiringDiagramPreview from "../preview/index.vue";
 import ImageManagement from "../image-control/image-management.vue";
+import {get} from "packages/http.js";
+import towerPoles from "packages/assets/image/tower-poles.svg";
 
 defineOptions({
   name: 'editor'
@@ -290,7 +292,18 @@ const stencil = ref()
 const initStencil = () => {
   stencil.value = new Stencil({
     target: graph.value,
-    ...stencilOptions
+    ...stencilOptions,
+    groups: [
+      {
+        name: '基础组件',
+        graphPadding: 30
+      },
+    ],
+    search(cell, keyword) {
+      return cell.label?.indexOf(keyword) !== -1
+    },
+    placeholder: '搜索',
+    notFoundText: '未找到匹配项',
   })
   const text = graph.value.createNode({
     ...textOptions
@@ -299,47 +312,66 @@ const initStencil = () => {
     item.ports = portsOptions
     return graph.value.createNode(item)
   })
-  const image = imageOptions.map(item => {
-    item.ports = portsOptions
-    return graph.value.createNode(item)
-  })
   stencil.value.load([text, ...baseShapes], '基础组件')
-  stencil.value.load(image, 'group2')
-  document.getElementById('stencil').appendChild(stencil.value.container)
-
-  // 添加 hover 事件监听器
-  setTimeout(() => {
-    const nodes = stencil.value.container.querySelectorAll('.x6-node');
-    nodes.forEach(node => {
-      const div = document.createElement('div');
-      div.className = 'node-label';
-      // 添加 hover 事件监听器
-      node.addEventListener('mouseenter', (e) => {
-        div.style.position = 'absolute';
-        div.innerText = Math.random().toString(36).substring(2, 7);
-        div.style.fontSize = '12px';
-        div.style.backgroundColor = '#000';
-        div.style.color = '#fff';
-        div.style.padding = '2px 4px';
-        div.style.borderRadius = '4px';
-        div.style.zIndex = '9999';
-        div.style.textAlign = 'center';
-        div.style.width = div.innerText.length * 12 + 'px';
-        const divWidth = Number(div.style.width.substring(0, div.style.width.length - 2));
-        div.style.top = e.target.getBoundingClientRect().bottom + 4 + 'px';
-        div.style.left = e.target.getBoundingClientRect().left + e.target.getBoundingClientRect().width / 2 - divWidth / 2 + 'px';
-        document.body.appendChild(div);
+  get('/cny/custom/groupList').then(res => {
+    const data = res?.data || []
+    data?.forEach(group => {
+      stencil.value.addGroup({
+        name: group?.groupName,
+        graphPadding: 30
       })
-      node.addEventListener('mouseleave', (e) => {
-        const divs = document.querySelectorAll('.node-label');
-        if (divs.length)
-          divs?.forEach(div => {
-            document.body.removeChild(div);
-          })
+      const image = group?.pictureList.map(item => {
+        const nodeOption = {
+          shape: 'image',
+          imageUrl: item?.imageUrl,
+          ports: portsOptions,
+          width: 64,
+          height: 64,
+          label: item.imageName
+        }
+        return graph.value.createNode(nodeOption)
       })
-    });
-  }, 1000)
-
+      stencil.value.load(image, group?.groupName)
+      document.getElementById('stencil').appendChild(stencil.value.container)
+    })
+  }).finally(() => {
+    // 添加 hover 事件监听器
+    setTimeout(() => {
+      const nodes = stencil.value.container.querySelectorAll('.x6-node');
+      nodes.forEach((node,index) => {
+        if(index > baseShape.length) {
+          const text = node.querySelector('text');
+          node.style.position = 'relative';
+          if(text) {
+            text.style.display = 'none';
+            // text 为 svg 控制位置
+            text.setAttribute('x', '0%');
+            text.setAttribute('y', '30%');
+            text.style.fontSize = '12px';
+            text.style.fontWeight = 'bold';
+            text.style.fill = '#ffffff';
+          }
+        }
+        // 添加 hover 事件监听器
+        node.addEventListener('mouseenter', (e) => {
+          if(index > baseShape.length) {
+            const text = node.querySelector('text');
+            if(text) {
+              text.style.display = 'block';
+            }
+          }
+        })
+        node.addEventListener('mouseleave', (e) => {
+          if(index > baseShape.length) {
+            const text = node.querySelector('text');
+            if(text) {
+              text.style.display = 'none';
+            }
+          }
+        })
+      });
+    }, 20)
+  })
 }
 
 /**

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

@@ -4,14 +4,44 @@
 */
 <template>
   <div class="form-container">
-    <el-form ref="form" :model="model" :rules="rules" label-width="90px" label-suffix=":"></el-form>
-
+    <el-form ref="form" :model="model" :rules="rules" label-width="90px" label-suffix=":">
+      <el-form-item label="图片名称" prop="imageName">
+        <el-input v-model="model.imageName" placeholder="请输入图片名称"></el-input>
+      </el-form-item>
+      <el-form-item label="排序" prop="sort">
+        <el-input-number v-model="model.sort" :min="0" :max="999" :step="1" controls-position="right"/>
+      </el-form-item>
+      <el-form-item label="是否显示" prop="isShow">
+        <el-switch v-model="model.isShow" :active-value="1" :inactive-value="0" active-color="#13ce66" inactive-color="#ff4949"/>
+      </el-form-item>
+      <el-form-item label="上传" prop="image">
+        <el-upload
+            action=""
+            list-type="picture"
+            class="avatar-uploader"
+            :show-file-list="false"
+            :on-change="changeImage"
+            :auto-upload="false"
+        >
+          <el-image v-if="imageUrl" :src="imageUrl" fit="cover" style="width: 64px; height: 64px;"/>
+          <el-icon v-else class="avatar-uploader-icon">
+            <Plus/>
+          </el-icon>
+        </el-upload>
+      </el-form-item>
+      <div class="footer">
+        <el-button type="primary" @click="saveBtnClick">保存</el-button>
+        <el-button @click="cancelBtnClick">取消</el-button>
+      </div>
+    </el-form>
   </div>
 </template>
 
 <script setup>
-import {reactive, ref} from 'vue'
-import {ElMessage} from 'element-plus'
+import {onMounted, reactive, ref, shallowRef} from 'vue'
+import {ElMessage} from "element-plus";
+import {instance, post, upload} from "packages/http.js";
+import {Plus} from "@element-plus/icons-vue";
 
 const emits = defineEmits(['close'])
 const props = defineProps({
@@ -22,11 +52,126 @@ const props = defineProps({
     }
   }
 })
-const form = ref(null)
-const model = reactive({})
-const rules = reactive({})
+const form = shallowRef(null)
+const model = reactive({
+  groupId: '',
+  id: '',
+  imageName: '',
+  sort: 0,
+  isShow: 1,
+  imageUrl: '',
+})
+const rules = ({
+  imageName: [
+    {required: true, message: '请输入图片名称', trigger: 'blur'},
+    {min: 1, max: 20, message: '长度在 1 到 20 个字符', trigger: 'blur'}
+  ],
+  sort: [
+    {required: true, message: '请输入排序', trigger: 'blur'},
+    {type: 'number', message: '排序必须为数字值'}
+  ]
+})
+
+const imageUrl = ref('')
+
+/**
+ * 图片改变事件
+ * @param file
+ */
+const changeImage = (file) => {
+  if (file.raw.type !== 'image/svg+xml') {
+    ElMessage.error('上传图片只能是 svg 格式!');
+    return false;
+  }
+  const formData = new FormData();
+  formData.append('file', file.raw);
+  upload('/cny/file/fileUpload', formData).then(res => {
+    if (res?.isOk) {
+      imageUrl.value = instance.defaults.baseURL + '/cny/upload/' + res?.data
+      model.imageUrl = res?.data
+    } else {
+      ElMessage.error(res?.msg || '上传失败')
+    }
+  })
+}
+
+
+/**
+ * 保存按钮点击事件
+ */
+const saveBtnClick = () => {
+  console.log(model)
+  form.value.validate((valid) => {
+    if (valid) {
+      post('/cny/custom/savePicture', model).then(res => {
+        if (res?.isOk) {
+          ElMessage.success('保存成功')
+          emits('close', true)
+        } else {
+          ElMessage.error(res?.msg || '保存失败')
+        }
+      })
+    } else {
+      return false;
+    }
+  })
+}
+
+/**
+ * 取消按钮点击事件
+ */
+const cancelBtnClick = () => {
+  emits('close', false)
+}
+
+onMounted(() => {
+  if (props.payload?.id) {
+    model.id = props.payload.id
+    model.imageName = props.payload.imageName
+    model.sort = props.payload.sort
+    model.isShow = props.payload.isShow
+    model.imageUrl = props.payload.imageUrl
+    imageUrl.value = model.imageUrl
+  }
+  model.groupId = props.payload.groupId
+})
 </script>
 
 <style scoped lang="scss">
+@use "../../styles/dialog.scss";
+
+.avatar-uploader {
+  width: 64px;
+  height: 64px;
+
+
+  :deep(.el-upload) {
+    width: 100%;
+    height: 100%;
+    border: 1px dashed rgb(35, 100, 221);
+    border-radius: 6px;
+    cursor: pointer;
+    position: relative;
+    overflow: hidden;
+    transition: var(--el-transition-duration-fast);
+
+    :deep(.el-upload:hover) {
+      border-color: var(--el-color-primary);
+    }
+
+    .el-icon {
+      color: rgb(35, 100, 221);
+    }
+
+
+    :deep(.el-icon).avatar-uploader-icon {
+      font-size: 28px;
+      color: rgb(35, 100, 221);
+      width: 178px;
+      height: 178px;
+      text-align: center;
+    }
+  }
+}
 
 </style>

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

@@ -11,6 +11,7 @@
           <div style="padding: 0 10px;display: flex;flex-direction: column;gap: 5px;align-items: flex-start">
             <el-button type="primary" size="small" @click="addPicture(props.row.id)">新增图片</el-button>
             <el-table :data="props.row.pictureList" border size="small">
+              <el-table-column label="名称" prop="imageName" align="center"></el-table-column>
               <el-table-column label="图片" prop="imageUrl" align="center">
                 <template #default="scope">
                   <img :src="scope.row.imageUrl" alt="" style="width: 64px; height: 64px;">
@@ -22,6 +23,12 @@
                   {{ scope.row.isShow === 1 ? '是' : '否' }}
                 </template>
               </el-table-column>
+              <el-table-column label="操作" align="center">
+                <template #default="scope">
+                  <el-button type="primary" size="small" @click="editPicture(scope.row)">编辑</el-button>
+                  <el-button type="danger" size="small" @click="deletePicture(scope.row.id)">删除</el-button>
+                </template>
+              </el-table-column>
             </el-table>
           </div>
         </template>
@@ -42,11 +49,11 @@
     </el-table>
     <el-dialog v-model="groupDialog.show" :title="groupDialog.title" width="300" :close-on-click-modal="false" :close-on-press-escape="false"
                >
-      <group-form :payload="groupDialog.payload" @close="closeDialog"/>
+      <group-form v-if="groupDialog.show" :payload="groupDialog.payload" @close="closeDialog"/>
     </el-dialog>
     <el-dialog v-model="imageDialog.show" :title="imageDialog.title" width="300" :close-on-click-modal="false" :close-on-press-escape="false"
                >
-      <image-form :payload="imageDialog.payload" @close="closeDialog"/>
+      <image-form v-if="imageDialog.show" :payload="imageDialog.payload" @close="closeDialog"/>
     </el-dialog>
   </div>
 </template>
@@ -55,7 +62,7 @@
 import {onMounted, reactive} from "vue";
 import groupForm from "./group-form.vue";
 import imageForm from "./image-form.vue";
-import {get, del} from "../../http.js";
+import {get, del, instance} from "../../http.js";
 import {ElMessage, ElMessageBox} from "element-plus";
 
 // 数据集
@@ -143,6 +150,44 @@ const addPicture = (id) => {
   }
 }
 
+/**
+ * 编辑图片
+ * @param row
+ */
+const editPicture = (row) => {
+  imageDialog.show = true
+  imageDialog.title = '编辑图片'
+  imageDialog.payload = {
+    id: row.id,
+    groupId: row.groupId,
+    imageName: row.imageName,
+    sort: row.sort,
+    isShow: row.isShow,
+    imageUrl: row.imageUrl
+  }
+}
+
+/**
+ * 删除图片
+ * @param id
+ */
+const deletePicture = (id) => {
+  ElMessageBox.confirm('是否确定要删除该图片？', '提示', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning'
+  }).then(() => {
+    del('/cny/custom/removePicture/' + id).then(res => {
+      if (res.code === 200) {
+        ElMessage.success('删除成功')
+        loadImageRecord()
+      } else {
+        ElMessage.error(res.msg || '删除失败')
+      }
+    })
+  })
+}
+
 /**
  * 关闭弹窗
  * @param action

package/packages/components/settings.js

@@ -30,16 +30,6 @@ export const stencilOptions = {
         columnWidth: 70,
         resizeToFit: true
     },
-    groups: [
-        {
-            name: '基础组件',
-            graphPadding: 30
-        },
-        {
-            name: 'group2',
-            graphPadding: 30
-        },
-    ],
 }
 
 export const portOption = {

package/packages/http.js

@@ -6,7 +6,7 @@ import {ElMessage} from "element-plus";
 let baseURL = 'http://localhost:8001'
 
 // 创建一个 axios 实例
-const instance = axios.create({
+export const instance = axios.create({
     baseURL: baseURL, // 你的 API 基础 URL
     timeout: 10000, // 请求超时时间
     headers: {
@@ -93,3 +93,12 @@ export const put = (url, data = {}) => {
 export const del = (url, params = {}) => {
     return instance.delete(url, {params});
 };
+
+// 上传文件
+export const upload = (url, data = {}) => {
+    return instance.post(url, data, {
+        headers: {
+            'Content-Type': 'multipart/form-data',
+        },
+    });
+};

package/packages/styles/editor.scss

@@ -54,6 +54,17 @@
             :deep(.x6-widget-stencil-title) {
                 display: none;
             }
+
+            :deep(.x6-widget-stencil.searchable > .x6-widget-stencil-content) {
+                top: 50px
+            }
+
+            :deep(.x6-widget-stencil-search-text){
+                background: rgba(35, 100, 221, 0.3);
+                color: #ffffff;
+                border-radius: 5px;
+                border: 1px solid rgb(35, 100, 221);
+            }
         }
 
         #controls {