feat: 拓扑编辑功能操作

src/views/monitor/topology-build/components/GraphEditModal.vue

@@ -1,7 +1,11 @@
 <script setup lang="ts">
 import { reactive, ref, watch } from 'vue';
 import useI18n from '@/hooks/useI18n';
-import useGraph, { graphEvent } from '../hooks/useGraph';
+import {
+  graphEvent,
+  selectSourceTargetOptions,
+  selectComboOptions,
+} from '../hooks/useGraph';
 import useEdge, {
   edgeTypeOptions,
   edgePositionOptions,
@@ -34,7 +38,6 @@ const {
   handleOkNode,
   handleCancelNode,
 } = useNode();
-const { selectSourceTargetOptions, selectComboOptions } = useGraph();
 
 /**图监听事件变更 */
 watch(graphEvent, v => {
@@ -43,27 +46,23 @@ watch(graphEvent, v => {
   console.log(type, target, item);
 
   // 画布
-  if (type === 'canvas-create-node') {
-    // const edge = item.getModel();
-    // edgeState.origin = JSON.parse(JSON.stringify(edge));
-    // edgeState.form = Object.assign(edgeState.form, edge);
-    modalState.title = '新增节点信息编辑';
-    modalState.formType = 'node';
-    modalState.visible = true;
-  }
   if (type === 'canvas-create-edge') {
-    // const edge = item.getModel();
+    edgeState.origin = {};
-    // edgeState.origin = JSON.parse(JSON.stringify(edge));
-    // edgeState.form = Object.assign(edgeState.form, edge);
     edgeState.form.id = '#';
     modalState.title = '新增边信息编辑';
     modalState.formType = 'edge';
     modalState.visible = true;
   }
+  if (type === 'canvas-create-node') {
+    nodeState.origin = {};
+    nodeState.form.id = '';
+    modalState.title = '新增节点信息编辑';
+    modalState.formType = 'node';
+    modalState.visible = true;
+  }
   if (type === 'canvas-create-combo') {
-    // const edge = item.getModel();
+    comboState.origin = {};
-    // edgeState.origin = JSON.parse(JSON.stringify(edge));
+    comboState.form.id = '';
-    // edgeState.form = Object.assign(edgeState.form, edge);
     modalState.title = '新增分组信息编辑';
     modalState.formType = 'combo';
     modalState.visible = true;
@@ -80,7 +79,6 @@ watch(graphEvent, v => {
   // 节点
   if (type === 'node-edit' && item) {
     const node = item.getModel();
-    console.log(node.comboId);
     nodeState.origin = JSON.parse(JSON.stringify(node));
     nodeState.form = Object.assign(nodeState.form, node);
     modalState.title = '节点信息编辑';
@@ -90,9 +88,12 @@ watch(graphEvent, v => {
   // 分组
   if (type === 'combo-edit' && item) {
     const combo = item.getModel();
-    console.log(JSON.parse(JSON.stringify(combo)));
     comboState.origin = JSON.parse(JSON.stringify(combo));
     comboState.form = Object.assign(comboState.form, combo);
+    // 分组内元素
+    if (Array.isArray(combo.children)) {
+      comboState.form.children = combo.children.map(item => item.id);
+    }
     modalState.title = '分组信息编辑';
     modalState.formType = 'combo';
     modalState.visible = true;
@@ -126,24 +127,27 @@ let modalState: ModalStateType = reactive({
 function fnModalOk() {
   modalState.confirmLoading = true;
   const type = modalState.formType;
-  let result = false;
   // 边编辑确认
   if (type === 'edge') {
-    handleOkEdge().then(res => {
+    handleOkEdge().then(result => {
-      console.log(res);
+      modalState.visible = !result;
+      modalState.confirmLoading = false;
     });
   }
   // 节点编辑确认
   if (type === 'node') {
-    result = handleOkNode();
+    handleOkNode().then(result => {
+      modalState.visible = !result;
+      modalState.confirmLoading = false;
+    });
   }
   // 分租编辑确认
   if (type === 'combo') {
-    result = handleOkcombo();
+    handleOkcombo().then(result => {
+      modalState.visible = !result;
+      modalState.confirmLoading = false;
+    });
   }
-  console.log(type, result);
-  modalState.visible = !result;
-  modalState.confirmLoading = !result;
 }
 
 /**
@@ -212,7 +216,7 @@ function fnModalCancel() {
           v-model:value="comboState.form.id"
           allow-clear
           :placeholder="t('common.inputPlease')"
-          :disabled="comboState.form.id !== ''"
+          :disabled="comboState.form.id === comboState.origin.id"
         ></a-input>
       </a-form-item>
 
@@ -337,6 +341,22 @@ function fnModalCancel() {
         </a-col>
       </a-row>
 
+      <a-form-item
+        label="分组内元素"
+        name="children"
+        help="元素包括节点和分组"
+        :label-col="{ span: 3 }"
+        v-if="comboState.form.id !== comboState.origin.id"
+      >
+        <a-select
+          v-model:value="comboState.form.children"
+          mode="tags"
+          style="width: 100%"
+          :options="selectSourceTargetOptions"
+          :placeholder="t('common.selectPlease')"
+        ></a-select>
+      </a-form-item>
+
       <a-divider orientation="left"> 标签文本及其配置 </a-divider>
 
       <a-form-item
@@ -457,7 +477,7 @@ function fnModalCancel() {
           v-model:value="nodeState.form.id"
           allow-clear
           :placeholder="t('common.inputPlease')"
-          :disabled="nodeState.form.id !== ''"
+          :disabled="nodeState.form.id === nodeState.origin.id"
         ></a-input>
       </a-form-item>
 
@@ -725,12 +745,6 @@ function fnModalCancel() {
           </a-col>
           <a-col :lg="12" :md="12" :xs="24">
             <a-form-item label="图片来源" name="img">
-              <a-input
-                v-model:value="nodeState.form.img"
-                allow-clear
-                :placeholder="t('common.inputPlease')"
-              >
-              </a-input>
               <a-input-group compact>
                 <a-auto-complete
                   v-model:value="nodeState.form.img"

src/views/monitor/topology-build/hooks/useCombo.ts

@@ -1,6 +1,6 @@
 import { message, Form } from 'ant-design-vue/lib';
-import { reactive, watch } from 'vue';
+import { reactive, toRaw, watch } from 'vue';
-import { graphG6 } from './useGraph';
+import { graphG6, selectSourceTargetOptions } from './useGraph';
 import useI18n from '@/hooks/useI18n';
 
 /**图分组内置类型 */
@@ -60,9 +60,12 @@ export default function useCombo() {
       size: [40, 40],
       padding: [30, 30, 30, 30],
       style: {
+        radius: 2,
         fill: '#ffffff',
         stroke: '#ffffff',
         lineWidth: 1,
+        cursor: 'grab',
+        fillOpacity: 0.5,
       },
       label: '',
       labelCfg: {
@@ -75,6 +78,7 @@ export default function useCombo() {
           fontWeight: 500,
         },
       },
+      children: [], // 子元素
     },
   });
 
@@ -89,12 +93,13 @@ export default function useCombo() {
   /**图分组编辑监听更新视图 */
   watch(comboState.form, combo => {
     const info = JSON.parse(JSON.stringify(combo));
+    // 新增不监听变化
+    const comboOriginId = comboState.origin.id;
     const comboId = info.id;
-    if (comboId) {
+    if (comboId && comboId === comboOriginId) {
       graphG6.value.clearItemStates(comboId, 'selected');
-      console.log(info);
       const data = graphG6.value.save();
-      const item = data.combos.find((item: any) => item.id === combo.id);
+      const item = data.combos.find((item: any) => item.id === comboId);
       Object.assign(item, combo);
       // 无父组id时不要设置，避免导致绘制失败
       if (!combo.parentId) {
@@ -119,43 +124,57 @@ export default function useCombo() {
 
   /**图分组新增或更新 */
   function handleOkcombo() {
-    const combo = JSON.parse(JSON.stringify(comboState.form));
+    return comboStateForm
-    if (!combo.id) {
+      .validate()
-      message.warn({
+      .then(e => {
-        content: `分组元素ID错误`,
+        const combo = JSON.parse(JSON.stringify(comboState.form));
-        duration: 2,
+        if (!combo.id) {
-      });
+          message.warn({
-      return false;
+            content: `分组元素ID错误`,
-    }
+            duration: 2,
+          });
+          return false;
+        }
 
-    const item = graphG6.value.findById(combo.id);
+        const item = graphG6.value.findById(combo.id);
-    if (item) {
+        if (item) {
-      const data = graphG6.value.save();
+          const data = graphG6.value.save();
-      const item = data.combos.find((item: any) => item.id === combo.id);
+          const item = data.combos.find((item: any) => item.id === combo.id);
-      Object.assign(item, combo);
+          Object.assign(item, combo);
-      if (!combo.parentId) {
+          // 无父组id时不要设置，避免导致绘制失败
-        Reflect.deleteProperty(item, 'parentId');
+          if (!combo.parentId) {
-      }
+            Reflect.deleteProperty(item, 'parentId');
-      graphG6.value.read(data);
+          }
-    } else {
+          graphG6.value.read(data);
-      graphG6.value.createCombo(combo, []);
+        } else {
-    }
+          graphG6.value.createCombo(combo, combo.children);
-    comboStateForm.resetFields();
+        }
-    comboState.origin = {};
+
-    return true;
+        comboStateForm.resetFields();
+        comboState.origin = {};
+        return true;
+      })
+      .catch(e => {
+        message.error(
+          t('common.errorFields', { num: e.errorFields.length }),
+          3
+        );
+        return false;
+      });
   }
 
   /**图分组取消还原 */
   function handleCancelcombo() {
+    // 新增无原始数据
     const origin = JSON.parse(JSON.stringify(comboState.origin));
     if (origin.id) {
       const data = graphG6.value.save();
       const item = data.combos.find((combo: any) => combo.id === origin.id);
       Object.assign(item, origin);
       graphG6.value.read(data);
-      comboStateForm.resetFields();
-      comboState.origin = {};
     }
+    comboStateForm.resetFields();
+    comboState.origin = {};
   }
 
   return {

src/views/monitor/topology-build/hooks/useEdge.ts

@@ -110,6 +110,7 @@ export default function useEdge() {
   /**图边编辑监听更新视图 */
   watch(edgeState.form, edge => {
     const info = JSON.parse(JSON.stringify(edge));
+    // 新增id是#不监听变化
     const edgeId = info.id;
     if (edgeId && edgeId !== '#') {
       graphG6.value.clearItemStates(edgeId, 'selected');
@@ -131,10 +132,7 @@ export default function useEdge() {
           return false;
         }
 
-        debugger;
+        // 存在更新，新增id是#不监听变化
-        // graphG6.value.removeItem(edge.id);
-        // edge.id = `${edge.source}~${Date.now()}~${edge.target}`;
-        // graphG6.value.addItem('edge', edge);
         const item = graphG6.value.findById(edge.id);
         if (item) {
           graphG6.value.updateItem(item, edge);
@@ -142,6 +140,7 @@ export default function useEdge() {
           edge.id = `${edge.source}~${Date.now()}~${edge.target}`;
           graphG6.value.addItem('edge', edge);
         }
+
         edgeStateForm.resetFields();
         edgeState.origin = {};
         return true;
@@ -157,14 +156,13 @@ export default function useEdge() {
 
   /**图边取消还原 */
   function handleCancelEdge() {
+    // 新增无原始数据
     const origin = JSON.parse(JSON.stringify(edgeState.origin));
     if (origin.id) {
       graphG6.value.updateItem(origin.id, origin);
-      // graphG6.value.removeItem(edgeOrigin.id);
-      // graphG6.value.addItem('edge', edgeOrigin);
-      edgeStateForm.resetFields();
-      edgeState.origin = {};
     }
+    edgeStateForm.resetFields();
+    edgeState.origin = {};
   }
 
   return { edgeState, edgeStateForm, handleOkEdge, handleCancelEdge };

src/views/monitor/topology-build/hooks/useGraph.ts

@@ -32,6 +32,12 @@ export const graphEvent = ref<{
   item: Item | null;
 }>();
 
+/**图元素选择开始结束点 */
+export const selectSourceTargetOptions = ref<Record<string, any>[]>([]);
+
+/**图元素选择嵌入分组 */
+export const selectComboOptions = ref<Record<string, any>[]>([]);
+
 /**图模式选择项 */
 export const graphMode = ref<string>('default');
 
@@ -56,11 +62,11 @@ export default function useGraph() {
         <div id="show" style="cursor: pointer; margin-bottom: 2px">
           1. 显示所有隐藏项
         </div>
-        <div id="create-node" style="cursor: pointer; margin-bottom: 2px">
-          2. 新增节点
-        </div>
         <div id="create-edge" style="cursor: pointer; margin-bottom: 2px">
-          3. 新增边
+          2. 新增边
+        </div>
+        <div id="create-node" style="cursor: pointer; margin-bottom: 2px">
+          3. 新增节点
         </div>
         <div id="create-combo" style="cursor: pointer; margin-bottom: 2px">
           4. 新增分组
@@ -71,8 +77,8 @@ export default function useGraph() {
       console.log(target, item);
       const targetId = target.id;
       switch (targetId) {
-        case 'create-node':
         case 'create-edge':
+        case 'create-node':
         case 'create-combo':
           graphEvent.value = { type: `canvas-${targetId}`, target, item };
           break;
@@ -122,6 +128,9 @@ export default function useGraph() {
       <div id="edit" style="cursor: pointer; margin-bottom: 2px">
         1. 编辑
       </div>
+      <div id="delete" style="cursor: pointer; margin-bottom: 2px">
+        2. 删除
+      </div>
       <div id="hide" style="cursor: pointer; margin-bottom: 2px">
         2. 隐藏
       </div>
@@ -135,6 +144,10 @@ export default function useGraph() {
         case 'edit':
           graphEvent.value = { type: `combo-${targetId}`, target, item };
           break;
+        case 'delete':
+          graphG6.value.uncombo(item);
+          graphG6.value.updateCombos();
+          break;
         case 'hide':
           graphG6.value.hideItem(item);
           break;
@@ -161,8 +174,11 @@ export default function useGraph() {
       <div id="edit" style="cursor: pointer; margin-bottom: 2px">
         1. 编辑
       </div>
+      <div id="delete" style="cursor: pointer; margin-bottom: 2px">
+        2. 删除
+      </div>
       <div id="hide" style="cursor: pointer; margin-bottom: 2px">
-        2. 隐藏
+        3. 隐藏
       </div>
     </div>
     `;
@@ -174,6 +190,9 @@ export default function useGraph() {
         case 'edit':
           graphEvent.value = { type: `node-${targetId}`, target, item };
           break;
+        case 'delete':
+          graphG6.value.removeItem(item);
+          break;
         case 'hide':
           graphG6.value.hideItem(item);
           break;
@@ -217,8 +236,11 @@ export default function useGraph() {
       <div id="edit" style="cursor: pointer; margin-bottom: 2px">
         1. 编辑
       </div>
+      <div id="delete" style="cursor: pointer; margin-bottom: 2px">
+        2. 删除
+      </div>
       <div id="hide" style="cursor: pointer; margin-bottom: 2px">
-        2. 隐藏
+        3. 隐藏
       </div>
     </div>
     `;
@@ -230,6 +252,9 @@ export default function useGraph() {
         case 'edit':
           graphEvent.value = { type: `edge-${targetId}`, target, item };
           break;
+        case 'delete':
+          graphG6.value.removeItem(item);
+          break;
         case 'hide':
           graphG6.value.hideItem(item);
           break;
@@ -312,12 +337,6 @@ export default function useGraph() {
     });
   }
 
-  /**图元素选择开始结束点 */
-  const selectSourceTargetOptions = ref<Record<string, any>[]>([]);
-
-  /**图元素选择嵌入分组 */
-  const selectComboOptions = ref<Record<string, any>[]>([]);
-
   /**
    * 图元素选择开始结束点数据获取
    */
@@ -507,8 +526,6 @@ export default function useGraph() {
   }
 
   return {
-    selectSourceTargetOptions,
-    selectComboOptions,
     handleRanderGraph,
     handleChangeMode,
   };

src/views/monitor/topology-build/hooks/useNode.ts

@@ -138,9 +138,10 @@ export default function useNode() {
   /**图节点编辑监听更新视图 */
   watch(nodeState.form, node => {
     const info = JSON.parse(JSON.stringify(node));
-    console.log(info);
+    // 新增不监听变化
+    const nodeOriginId = nodeState.origin.id;
     const nodeId = info.id;
-    if (nodeId) {
+    if (nodeId && nodeId === nodeOriginId) {
       // 图片类型需要移除style属性，避免填充
       if (info.type === 'image') {
         Reflect.deleteProperty(info, 'style');
@@ -162,17 +163,17 @@ export default function useNode() {
   function handleNodeTypeChange(type: any) {
     // 设置图标属性
     if (['circle', 'ellipse', 'diamond', 'star', 'donut'].includes(type)) {
+      let size: number[] | number = [40, 30];
+      if (['circle', 'star', 'donut'].includes(type)) {
+        size = 30;
+      }
       const origin = nodeState.origin;
       if (origin.icon) {
         nodeState.form = Object.assign(nodeState.form, {
-          size: origin.size,
+          size,
           icon: origin.icon,
         });
       } else {
-        let size: number[] | number = [30];
-        if (['circle', 'star', 'donut'].includes(type)) {
-          size = 30;
-        }
         nodeState.form = Object.assign(nodeState.form, {
           size,
           icon: {
@@ -240,44 +241,65 @@ export default function useNode() {
         });
       }
     }
+    // 设置矩形大小
+    if (type === 'rect') {
+      nodeState.form = Object.assign(nodeState.form, {
+        size: [40, 30],
+      });
+    }
   }
 
   /**图节点新增或更新 */
   function handleOkNode() {
-    const node = JSON.parse(JSON.stringify(nodeState.form));
+    return nodeStateForm
-    if (!node.id) {
+      .validate()
-      message.warn({
+      .then(e => {
-        content: `节点元素ID错误`,
+        const node = JSON.parse(JSON.stringify(nodeState.form));
-        duration: 2,
+        if (!node.id) {
+          message.warn({
+            content: `节点元素ID错误`,
+            duration: 2,
+          });
+          return false;
+        }
+
+        // 存在更新，新增不监听变化
+        const item = graphG6.value.findById(node.id);
+        if (item) {
+          graphG6.value.updateItem(item, node);
+        } else {
+          graphG6.value.addItem('node', node);
+        }
+
+        // 三角和图片的样式变更需要重绘才生效
+        if (
+          node.type === 'triangle' ||
+          node.type === 'image' ||
+          node.comboId !== nodeState.origin.comboId
+        ) {
+          graphG6.value.read(graphG6.value.save());
+        }
+
+        nodeStateForm.resetFields();
+        nodeState.origin = {};
+        return true;
+      })
+      .catch(e => {
+        message.error(
+          t('common.errorFields', { num: e.errorFields.length }),
+          3
+        );
+        return false;
       });
-      return false;
-    }
-    // graphG6.value.removeItem(node.id);
-    // graphG6.value.addItem('node', node);
-    const item = graphG6.value.findById(node.id);
-    if (item) {
-      graphG6.value.updateItem(item, node);
-    } else {
-      graphG6.value.addItem('node', node);
-    }
-    // 三角和图片的样式变更需要重绘才生效
-    if (
-      node.type === 'triangle' ||
-      node.type === 'image' ||
-      node.comboId !== nodeState.origin.comboId
-    ) {
-      graphG6.value.read(graphG6.value.save());
-    }
-    nodeStateForm.resetFields();
-    nodeState.origin = {};
-    return true;
   }
 
   /**图节点取消还原 */
   function handleCancelNode() {
+    // 新增无原始数据
     const origin = JSON.parse(JSON.stringify(nodeState.origin));
     if (origin.id) {
       graphG6.value.updateItem(origin.id, origin);
+
       // 三角和图片的样式变更需要重绘才生效
       if (
         origin.type === 'triangle' ||
@@ -286,9 +308,9 @@ export default function useNode() {
       ) {
         graphG6.value.read(graphG6.value.save());
       }
-      nodeStateForm.resetFields();
-      nodeState.origin = {};
     }
+    nodeStateForm.resetFields();
+    nodeState.origin = {};
   }
 
   return {