feat: 拓扑编辑功能绘制简单关系图

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

@@ -584,6 +584,8 @@ function fnModalCancel() {
             help="边长, 三角形的中心位置是节点的位置"
           >
             <a-input-number
+              :min="0"
+              :max="1000"
               v-model:value="nodeState.form.size"
               style="width: 100%"
               :placeholder="t('common.inputPlease')"
@@ -611,8 +613,9 @@ function fnModalCancel() {
                 "
                 style="width: calc(100% / 2)"
                 :min="0"
-                :max="99"
+                :max="1000"
                 v-model:value="nodeState.form.size[i]"
+                placeholder="0 ~ 1000"
               ></a-input-number>
             </a-input-group>
           </a-form-item>

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

@@ -59,6 +59,7 @@ export default function useGraph() {
           width: 140px;
         "
       >
+        <h3>画布</h3>
         <div id="show" style="cursor: pointer; margin-bottom: 2px">
           1. 显示所有隐藏项
         </div>
@@ -125,6 +126,7 @@ export default function useGraph() {
         background: #e6f7ff;
       "
     >
+      <h3>分组</h3>
       <div id="edit" style="cursor: pointer; margin-bottom: 2px">
         1. 编辑
       </div>
@@ -171,6 +173,7 @@ export default function useGraph() {
         background: #e6f7ff;
       "
     >
+      <h3>节点</h3>
       <div id="edit" style="cursor: pointer; margin-bottom: 2px">
         1. 编辑
       </div>
@@ -204,15 +207,26 @@ export default function useGraph() {
   const graphNodeTooltip = new Tooltip({
     offsetX: 10,
     offsetY: 20,
-    getContent(e: any) {
+    getContent(evt) {
-      const outDiv = document.createElement('div');
+      console.log(evt);
-      outDiv.style.width = '180px';
+      if (!evt) return '无';
-      outDiv.innerHTML = `
+      const item = evt.item?.getModel();
-      <h4>自定义tooltip</h4>
+      if (!item?.label) {
-      <ul>
+        return '无标签';
-        <li>Label: ${e.item.getModel().label || e.item.getModel().id}</li>
+      }
-      </ul>`;
+      console.log(item);
-      return outDiv;
+      return `
+      <div
+        style="
+          display: flex;
+          flex-direction: column;
+          width: 140px;
+          background: #e6f7ff;
+        "
+      >
+        <h3>节点： ${item?.label}</h3> 
+      </div>
+      `;
     },
     itemTypes: ['node'],
   });
@@ -233,6 +247,7 @@ export default function useGraph() {
         background: #e6f7ff;
       "
     >
+      <h3>边</h3>
       <div id="edit" style="cursor: pointer; margin-bottom: 2px">
         1. 编辑
       </div>
@@ -266,15 +281,26 @@ export default function useGraph() {
   const graphEdgeTooltip = new Tooltip({
     offsetX: 10,
     offsetY: 20,
-    getContent(e: any) {
+    getContent(evt) {
-      const outDiv = document.createElement('div');
+      console.log(evt);
-      outDiv.style.width = '180px';
+      if (!evt) return '无';
-      outDiv.innerHTML = `
+      const item = evt.item?.getModel();
-      <h4>graphEdgeTooltip</h4>
+      if (!item?.label) {
-      <ul>
+        return '无标签';
-        <li>Label: ${e.item.getModel().label || e.item.getModel().id}</li>
+      }
-      </ul>`;
+      console.log(item);
-      return outDiv;
+      return `
+      <div
+        style="
+          display: flex;
+          flex-direction: column;
+          width: 140px;
+          background: #e6f7ff;
+        "
+      >
+        <h3>边： ${item?.label}</h3> 
+      </div>
+      `;
     },
     itemTypes: ['edge'],
   });
@@ -425,7 +451,7 @@ export default function useGraph() {
         type: 'rect',
         size: [80, 40],
         style: {
-          radius: 8,
+          radius: 4,
           // fill: '#ffffff',
           stroke: '#ffffff',
           lineWidth: 1,

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

@@ -105,8 +105,8 @@ export default function useNode() {
       comboId: '',
       x: 0,
       y: 0,
-      type: 'circle',
+      type: 'rect',
-      size: 30,
+      size: [80, 40],
       anchorPoints: false,
       style: {
         fill: '#ffffff',
@@ -165,7 +165,7 @@ export default function useNode() {
     if (['circle', 'ellipse', 'diamond', 'star', 'donut'].includes(type)) {
       let size: number[] | number = [40, 30];
       if (['circle', 'star', 'donut'].includes(type)) {
-        size = 30;
+        size = 60;
       }
       const origin = nodeState.origin;
       if (origin.icon) {
@@ -244,7 +244,7 @@ export default function useNode() {
     // 设置矩形大小
     if (type === 'rect') {
       nodeState.form = Object.assign(nodeState.form, {
-        size: [40, 30],
+        size: [80, 40],
       });
     }
   }