feat: 拓扑图组编辑页补充节点逻辑

src/i18n/locales/en-US.ts

@@ -1173,6 +1173,7 @@ export default {
         nodeTypeCircleAnimateShapeR: "Circle, node zoom in and out animation",
         nodeTypeCircleAnimateShapeStroke: "Circular, node edge spread animation",
         nodeTypeRectAnimateState: "Rectangle with state animations",
+        nodeTypeImageAnimateState: "Image with status animation",
         nodeLabelPositionTop: "Top",
         nodeLabelPositionLeft: "Left",
         nodeLabelPositionRight: "Right",

src/i18n/locales/zh-CN.ts

@@ -1173,6 +1173,7 @@ export default {
         nodeTypeCircleAnimateShapeR: "圆形，节点放大缩小动画",
         nodeTypeCircleAnimateShapeStroke: "圆形，节点边缘扩散动画",
         nodeTypeRectAnimateState: "矩形，含有状态动画",
+        nodeTypeImageAnimateState: "图片，含有状态动画",
         nodeLabelPositionTop: "上",
         nodeLabelPositionLeft: "左",
         nodeLabelPositionRight: "右",

src/views/monitor/topologyBuild/components/GraphEditModal.vue

@@ -238,7 +238,7 @@ function fnModalCancel() {
       </a-form-item>
 
       <!-- 圆形尺寸 -->
-      <a-row :gutter="16" v-if="comboState.form.type === 'circle'">
+      <a-row :gutter="16" v-if="comboState.form.type.startsWith('circle') ">
         <a-col :lg="12" :md="12" :xs="24">
           <a-form-item
             :label="t('views.monitor.topologyBuild.comboFormSize')"
@@ -267,7 +267,7 @@ function fnModalCancel() {
       </a-row>
 
       <!-- 矩形尺寸 -->
-      <a-row :gutter="16" v-if="comboState.form.type === 'rect'">
+      <a-row :gutter="16" v-if="comboState.form.type.startsWith('rect')  ">
         <a-col :lg="12" :md="12" :xs="24">
           <a-form-item
             :label="t('views.monitor.topologyBuild.comboFormSize')"
@@ -650,7 +650,7 @@ function fnModalCancel() {
         </a-col>
       </a-row>
 
-      <template v-if="nodeState.form.type !== 'image'">
+      <template v-if="!nodeState.form.type.startsWith('image')">
         <a-row :gutter="16">
           <a-col :lg="12" :md="12" :xs="24">
             <a-form-item
@@ -784,7 +784,7 @@ function fnModalCancel() {
         </a-col>
       </a-row>
 
-      <template v-if="nodeState.form.type === 'image'">
+      <template v-if="nodeState.form.type.startsWith('image')">
         <a-divider orientation="left">
           {{ t('views.monitor.topologyBuild.nodeFormTypeImage') }}
         </a-divider>
@@ -849,7 +849,7 @@ function fnModalCancel() {
           </a-row>
 
           <!-- 剪裁圆形 -->
-          <a-row :gutter="16" v-if="nodeState.form.clipCfg.type === 'circle'">
+          <a-row :gutter="16" v-if="nodeState.form.clipCfg.type.startsWith('circle') ">
             <a-col :lg="12" :md="12" :xs="24">
               <a-form-item
                 :label="t('views.monitor.topologyBuild.nodeFormClipTypeCircle')"
@@ -867,7 +867,7 @@ function fnModalCancel() {
           </a-row>
 
           <!-- 剪裁矩形 -->
-          <a-row :gutter="16" v-if="nodeState.form.clipCfg.type === 'rect'">
+          <a-row :gutter="16" v-if="nodeState.form.clipCfg.type.startsWith('rect')">
             <a-col :lg="12" :md="12" :xs="24">
               <a-form-item
                 :label="
@@ -976,8 +976,8 @@ function fnModalCancel() {
       <template
         v-if="
           nodeState.form.icon &&
-          nodeState.form.type !== 'rect' &&
+          !nodeState.form.type.startsWith('rect')   &&
-          nodeState.form.type !== 'image'
+          !nodeState.form.type.startsWith('image')
         "
       >
         <a-divider orientation="left">

src/views/monitor/topologyBuild/hooks/useGraph.ts

@@ -17,6 +17,7 @@ import {
 import {
   nodeCircleAnimateShapeR,
   nodeCircleAnimateShapeStroke,
+  nodeImageAnimateState,
   nodeRectAnimateState,
 } from './registerNode';
 
@@ -443,6 +444,7 @@ export default function useGraph() {
     nodeCircleAnimateShapeR();
     nodeCircleAnimateShapeStroke();
     nodeRectAnimateState();
+    nodeImageAnimateState();
   }
 
   /**图数据渲染 */
@@ -493,12 +495,6 @@ export default function useGraph() {
         ],
       },
       groupByTypes: false,
-      // layout: {
-      //   type: 'dagre',
-      //   sortByCombo: false,
-      //   ranksep: 10,
-      //   nodesep: 10,
-      // },
       // 全局节点
       defaultNode: {
         type: 'rect',

src/views/monitor/topologyBuild/hooks/useNode.ts

@@ -52,6 +52,10 @@ export default function useNode() {
       value: 'rect-animate-state',
       label: t('views.monitor.topologyBuild.nodeTypeRectAnimateState'),
     },
+    {
+      value: 'image-animate-state',
+      label: t('views.monitor.topologyBuild.nodeTypeImageAnimateState'),
+    },
   ];
 
   /**图节点标签文本位置 */
@@ -190,7 +194,7 @@ export default function useNode() {
     const nodeId = info.id;
     if (nodeId && nodeId === nodeOriginId) {
       // 图片类型需要移除style属性，避免填充
-      if (info.type === 'image') {
+      if (info.type.startsWith('image')) {
         Reflect.deleteProperty(info, 'style');
       }
       graphG6.value.clearItemStates(nodeId, 'selected');
@@ -198,7 +202,7 @@ export default function useNode() {
       // 三角和图片的样式变更需要重绘才生效
       if (
         info.type === 'triangle' ||
-        info.type === 'image' ||
+        info.type.startsWith('image') ||
         info.comboId !== nodeState.origin.comboId
       ) {
         graphG6.value.read(graphG6.value.save());
@@ -261,7 +265,7 @@ export default function useNode() {
       }
     }
     // 设置图片属性
-    if (type === 'image') {
+    if (type.startsWith('image')) {
       const origin = nodeState.origin;
       if (origin.img) {
         nodeState.form = Object.assign(nodeState.form, {
@@ -281,17 +285,12 @@ export default function useNode() {
           },
         });
       }
-      Reflect.deleteProperty(nodeState.form, 'style');
+      nodeState.form.style.fill = 'transparent';
+      // Reflect.deleteProperty(nodeState.form.style, 'fill');
     } else {
       // 当切换非图片时补充style属性
-      if (!Reflect.has(nodeState.form, 'style')) {
+      if (!nodeState.form.style.fill) {
-        nodeState.form = Object.assign(nodeState.form, {
+        nodeState.form.style.fill = '#ffffff';
-          style: {
-            fill: '#ffffff',
-            stroke: '#ffffff',
-            lineWidth: 1,
-          },
-        });
       }
     }
     // 设置矩形大小
@@ -316,6 +315,12 @@ export default function useNode() {
           return false;
         }
 
+        // 图片需要删除style属性，避免填充色问题
+        if (node.type.startsWith('image')) {
+          node.style.fill = 'transparent';
+          // Reflect.deleteProperty(node.style, 'fill');
+        }
+
         // 存在更新，新增不监听变化
         const item = graphG6.value.findById(node.id);
         if (item) {
@@ -327,7 +332,7 @@ export default function useNode() {
         // 三角和图片的样式变更需要重绘才生效
         if (
           node.type === 'triangle' ||
-          node.type === 'image' ||
+          node.type.startsWith('image') ||
           node.comboId !== nodeState.origin.comboId
         ) {
           graphG6.value.read(graphG6.value.save());
@@ -356,7 +361,7 @@ export default function useNode() {
       // 三角和图片的样式变更需要重绘才生效
       if (
         origin.type === 'triangle' ||
-        origin.type === 'image' ||
+        origin.type.startsWith('image') ||
         origin.comboId !== nodeState.form.comboId
       ) {
         graphG6.value.read(graphG6.value.save());