iot处理

hchyun-ui/src/views/system/top/packages/topology/src/edge/dice-er-edge.js

@@ -55,7 +55,7 @@ export default {
             if (sourceNode.id !== targetNode.id) {
                 shape = group.addShape("path", {
                     attrs: {
-                        stroke: "#5B8FF9",
+                        stroke: "#53da3a",
                         path: [
                             ["M", startPoint.x, startPoint.y],
                             [
@@ -79,7 +79,7 @@ export default {
                 }
                 shape = group.addShape("path", {
                     attrs: {
-                        stroke: "#5B8FF9",
+                        stroke: "#53da3a",
                         path: [
                             ["M", startPoint.x, startPoint.y],
                             [

hchyun-ui/src/views/system/top/packages/topology/src/topology.vue

@@ -300,11 +300,12 @@ export default {
   },
   mounted() {
     Node.obj.Image.sendThis(this);
-    Behavior.obj.clickEventEdit.sendThis(this);
+    // Behavior.obj.clickEventEdit.sendThis(this);
-    Behavior.obj.dragAddEdge.sendThis(this);
+    // Behavior.obj.dragAddEdge.sendThis(this);
     Behavior.obj.dragEventEdit.sendThis(this);
     Behavior.obj.keyupEventEdit.sendThis(this);
-    Behavior.obj.hoverEventEdit.sendThis(this);
+    // Behavior.obj.hoverEventEdit.sendThis(this);
+    Behavior.obj
     this.clearHistoryData();
     // this.initTopo(this.graphData)
     // this.autoZoomHandler()

hchyun-ui/src/views/tool/top/packages/topology/src/behavior/click-event-edit.js

@@ -138,6 +138,7 @@ export default {
           };
         }
       } else if (event.item._cfg.type === "edge") {
+        console.log("jshdjhd")
         // 更新vm的data: selectedEdge 和 selectedEdgeParams
         let clickEdge = event.item;
         if (clickEdge.hasState("selected")) {

hchyun-ui/src/views/tool/top/packages/topology/src/behavior/dice-er-edge.js

@@ -4,3 +4,40 @@
  * @email: clay@hchyun.com
  * @description: node
  */
+let vm = null;
+const sendThis = (_this) => {
+  vm = _this;
+};
+
+export default {
+  sendThis,
+  name: 'dice-er-edge',
+  options: {
+    getDefaultCfg() {
+      return {
+        multiple: true,
+      };
+    },
+    getEvents() {
+      return {
+        "edge:click": "onEdgeClick",
+      }
+    },
+    onEdgeClick(event) {
+      let clickEdge = event.item;
+      console.log(789)
+      console.log(clickEdge);
+      clickEdge.setState("selected", !clickEdge.hasState("selected"));
+      console.log(clickEdge);
+      let model = clickEdge.getModel();
+      console.log(model);
+      model.label = "4564654"
+      model.stroke='#e2e2e2'
+      clickEdge.update(model)
+
+      // console.log(vm)
+      // vm.currentFocus = "edge";
+      this.updateVmData(event);
+    },
+  }
+}

hchyun-ui/src/views/tool/top/packages/topology/src/behavior/dice-er-node.js

@@ -77,10 +77,6 @@ export default {
       const {
         graph
       } = this;
-      const {
-        // eslint-disable-next-line no-unused-vars
-        y
-      } = e;
       const item = e.item;
       const shape = e.shape;
       if (!item) {
@@ -101,9 +97,9 @@ export default {
       }else {
        // eslint-disable-next-line no-unused-vars
        const model = item.getModel();
-       console.log(JSON.stringify(model));
+       // console.log(JSON.stringify(model));
-       console.log(model.style.default.fill = '#4eb922');
+       // console.log(model.style.default.fill = '#4eb922');
-       console.log(model.style.selected.shadowColor = '#4eb922');
+       // console.log(model.style.selected.shadowColor = '#4eb922');
 
      }
     },

hchyun-ui/src/views/tool/top/packages/topology/src/behavior/index.js

@@ -9,7 +9,8 @@ import hoverEventEdit from './hover-event-edit'
 import clickEventEdit from './click-event-edit'
 import dragEventEdit from './drag-event-edit'
 import keyupEventEdit from './keyup-event-edit'
-import diceErScroll from './dice-er-node'
+import diceErNode from './dice-er-node'
+import diceErEdge from './dice-er-edge'
 
 const obj = {
   // dragAddEdge,
@@ -17,7 +18,8 @@ const obj = {
   // clickEventEdit,
   dragEventEdit,
   keyupEventEdit,
-  diceErScroll
+  diceErNode,
+  diceErEdge
 }
 
 export default {

hchyun-ui/src/views/tool/top/packages/topology/src/edge/dice-er-edge.js

@@ -5,126 +5,134 @@
  * @description: node
  */
 import {Util} from '@antv/g6'
+import utils from "@/views/system/top/packages/topology/src/utils";
+
 export default {
-    name: 'dice-er-edge',
+  name: 'dice-er-edge',
-    options: {
+  options: {
-        draw(cfg, group) {
-            //todo 画线
-            // console.log("cfg",cfg,"group",group)
-            const edge = group.cfg.item;
-            const sourceNode = edge.getSource().getModel();
-            const targetNode = edge.getTarget().getModel();
 
-            const sourceIndex = sourceNode.attrs.findIndex(
-                (e) => e.key === cfg.sourceKey
-            );
 
-            const sourceStartIndex = sourceNode.startIndex || 0;
+    draw(cfg, group) {
+      //todo 画线
+      // console.log("cfg",cfg,"group",group)
+      const edge = group.cfg.item;
+      const sourceNode = edge.getSource().getModel();
+      const targetNode = edge.getTarget().getModel();
 
-            let sourceY = 15;
+      const sourceIndex = sourceNode.attrs.findIndex(
+        (e) => e.key === cfg.sourceKey
+      );
 
-            if (!sourceNode.collapsed && sourceIndex > sourceStartIndex - 1) {
+      const sourceStartIndex = sourceNode.startIndex || 0;
-                sourceY = 30 + (sourceIndex - sourceStartIndex + 0.5) * 30;
-                sourceY = Math.min(sourceY, 300);
-            }
 
-            const targetIndex = targetNode.attrs.findIndex(
+      let sourceY = 15;
-                (e) => e.key === cfg.targetKey
-            );
 
-            const targetStartIndex = targetNode.startIndex || 0;
+      if (!sourceNode.collapsed && sourceIndex > sourceStartIndex - 1) {
+        sourceY = 30 + (sourceIndex - sourceStartIndex + 0.5) * 30;
+        sourceY = Math.min(sourceY, 300);
+      }
 
-            let targetY = 15;
+      const targetIndex = targetNode.attrs.findIndex(
+        (e) => e.key === cfg.targetKey
+      );
 
-            if (!targetNode.collapsed && targetIndex > targetStartIndex - 1) {
+      const targetStartIndex = targetNode.startIndex || 0;
-                targetY = (targetIndex - targetStartIndex + 0.5) * 30 + 30;
-                targetY = Math.min(targetY, 300);
-            }
 
-            const startPoint = {
+      let targetY = 15;
-                ...cfg.startPoint
-            };
-            const endPoint = {
-                ...cfg.endPoint
-            };
 
-            startPoint.y = startPoint.y + sourceY;
+      if (!targetNode.collapsed && targetIndex > targetStartIndex - 1) {
-            endPoint.y = endPoint.y + targetY;
+        targetY = (targetIndex - targetStartIndex + 0.5) * 30 + 30;
+        targetY = Math.min(targetY, 300);
+      }
 
-            let shape;
+      const startPoint = {
-            if (sourceNode.id !== targetNode.id) {
+        ...cfg.startPoint
-                shape = group.addShape("path", {
+      };
-                    attrs: {
+      const endPoint = {
-                        stroke: "#5B8FF9",
+        ...cfg.endPoint
-                        path: [
+      };
-                            ["M", startPoint.x, startPoint.y],
-                            [
-                                "C",
-                                endPoint.x / 3 + (2 / 3) * startPoint.x,
-                                startPoint.y,
-                                endPoint.x / 3 + (2 / 3) * startPoint.x,
-                                endPoint.y,
-                                endPoint.x,
-                                endPoint.y,
-                            ],
-                        ],
-                        endArrow: true,
-                    },
-                    name: "path-shape",
-                });
-            } else if (!sourceNode.collapsed) {
-                let gap = Math.abs((startPoint.y - endPoint.y) / 3);
-                if (startPoint["index"] === 1) {
-                    gap = -gap;
-                }
-                shape = group.addShape("path", {
-                    attrs: {
-                        stroke: "#5B8FF9",
-                        path: [
-                            ["M", startPoint.x, startPoint.y],
-                            [
-                                "C",
-                                startPoint.x - gap,
-                                startPoint.y,
-                                startPoint.x - gap,
-                                endPoint.y,
-                                startPoint.x,
-                                endPoint.y,
-                            ],
-                        ],
-                        endArrow: true,
-                    },
-                    name: "path-shape",
-                });
-            }
 
-            return shape;
+      startPoint.y = startPoint.y + sourceY;
-        },
+      endPoint.y = endPoint.y + targetY;
-        afterDraw(cfg, group) {
+
-            // eslint-disable-next-line no-unused-vars
+      let shape;
-            const labelCfg = cfg.labelCfg || {};
+      if (sourceNode.id !== targetNode.id) {
-            const edge = group.cfg.item;
+        shape = group.addShape("path", {
-            const sourceNode = edge.getSource().getModel();
+          attrs: {
-            const targetNode = edge.getTarget().getModel();
+            stroke: "#5B8FF9",
-            if (sourceNode.collapsed && targetNode.collapsed) {
+            path: [
-                return;
+              ["M", startPoint.x, startPoint.y],
-            }
+              [
-            const path = group.find(
+                "C",
-                (element) => element.get("name") === "path-shape"
+                endPoint.x / 3 + (2 / 3) * startPoint.x,
-            );
+                startPoint.y,
-
+                endPoint.x / 3 + (2 / 3) * startPoint.x,
-            const labelStyle = Util.getLabelPosition(path, 0.5, 0, 0, true);
+                endPoint.y,
-            const label = group.addShape("text", {
+                endPoint.x,
-                attrs: {
+                endPoint.y,
-                    ...labelStyle,
+              ],
-                    text: cfg.label || '',
+            ],
-                    fill: "#000",
+            endArrow: true,
-                    textAlign: "center",
+          },
-                    stroke: "#fff",
+          name: "path-shape",
-                    lineWidth: 1,
+        });
-                },
+      } else if (!sourceNode.collapsed) {
-            });
+        let gap = Math.abs((startPoint.y - endPoint.y) / 3);
-            label.rotateAtStart(labelStyle.rotate);
+        if (startPoint["index"] === 1) {
+          gap = -gap;
+        }
+        shape = group.addShape("path", {
+          attrs: {
+            stroke: "#5B8FF9",
+            path: [
+              ["M", startPoint.x, startPoint.y],
+              [
+                "C",
+                startPoint.x - gap,
+                startPoint.y,
+                startPoint.x - gap,
+                endPoint.y,
+                startPoint.x,
+                endPoint.y,
+              ],
+            ],
+            endArrow: true,
+          },
+          name: "path-shape",
+        });
+      }
+
+      return shape;
+    },
+    afterDraw(cfg, group) {
+      // eslint-disable-next-line no-unused-vars
+      const labelCfg = cfg.labelCfg || {};
+      const edge = group.cfg.item;
+      const sourceNode = edge.getSource().getModel();
+      const targetNode = edge.getTarget().getModel();
+      if (sourceNode.collapsed && targetNode.collapsed) {
+        return;
+      }
+      const path = group.find(
+        (element) => element.get("name") === "path-shape"
+      );
+
+      const labelStyle = Util.getLabelPosition(path, 0.5, 0, 0, true);
+      const label = group.addShape("text", {
+        attrs: {
+          ...labelStyle,
+          text: cfg.label || '',
+          fill: "#000",
+          textAlign: "center",
+          stroke: "#fff",
+          lineWidth: 1,
         },
+      });
+      label.rotateAtStart(labelStyle.rotate);
+    },
+    setState(name, value, item) {
+      // 设置边状态
+      utils.edge.setState(name, value, item)
     }
+  }
 }

hchyun-ui/src/views/tool/top/packages/topology/src/graph/index.js

@@ -54,18 +54,19 @@ const initGraph = {
       //     shadowOffsetY: 3
       //   }
       // },
-      edgeStateStyles: themeStyle.edgeStyle,
+      edgeStateStyles:{
-      // edgeStyle: {
+        edgeStyle: {
-      //   default: {
+          default: {
-      //     stroke: '#e2e2e2',
+            stroke: '#e2e2e2',
-      //     lineWidth: 3,
+            lineWidth: 3,
-      //     lineAppendWidth: 10
+            lineAppendWidth: 10
-      //   },
+          },
-      //   selected: {
+          selected: {
-      //     shadowColor: '#626262',
+            shadowColor: '#626262',
-      //     shadowBlur: 3
+            shadowBlur: 3
-      //   }
+          }
-      // },
+        },
+      },
       modes: options.modes
     })
     // 将 read 方法分解成 data() 和 render 方法，便于整个生命周期的管理

hchyun-ui/src/views/tool/top/packages/topology/src/node/dice-er-box.js

@@ -6,272 +6,271 @@
  */
 import utils from '../utils/index'
 
+let vm = null;
+const sendThis = (_this) => {
+  vm = _this;
+};
 const itemHeight = 30;
 export default {
-    name: 'dice-er-box',
+  sendThis,
-    options: {
+  name: 'dice-er-box',
-        setState(name, value, item,group) {
+  options: {
-            // 设置节点状态
+    draw(cfg, group) {
-            // utils.node.setState(name, value, item,group);
+      const width = 250;
-            // 设置锚点状态
+      const height = 316;
-            utils.anchor.setState(name, value, item);
+      const itemCount = 10;
-            // //设置收缩状态
+      const boxStyle = {
-            // utils.collapse.setState(item)
+        stroke: "#096DD9",
+        radius: 4,
+      };
+
+      const {
+        attrs = [],
+        startIndex = 0,
+        selectedIndex,
+        collapsed,
+        icon,
+      } = cfg;
+      const list = attrs;
+      const afterList = list.slice(
+        Math.floor(startIndex),
+        Math.floor(startIndex + itemCount - 1)
+      );
+      const offsetY = (0.5 - (startIndex % 1)) * itemHeight + 30;
+
+      group.addShape("rect", {
+        attrs: {
+          fill: boxStyle.stroke,
+          height: 30,
+          width,
+          radius: [boxStyle.radius, boxStyle.radius, 0, 0],
         },
-        draw(cfg, group) {
+        draggable: true,
-            const width = 250;
+      });
-            const height = 316;
-            const itemCount = 10;
-            const boxStyle = {
-                stroke: "#096DD9",
-                radius: 4,
-            };
 
-            const {
+      let fontLeft = 12;
-                attrs = [],
-                startIndex = 0,
-                selectedIndex,
-                collapsed,
-                icon,
-            } = cfg;
-            const list = attrs;
-            const afterList = list.slice(
-                Math.floor(startIndex),
-                Math.floor(startIndex + itemCount - 1)
-            );
-            const offsetY = (0.5 - (startIndex % 1)) * itemHeight + 30;
 
-            group.addShape("rect", {
+      if (icon && icon.show !== false) {
-                attrs: {
+        group.addShape("image", {
-                    fill: boxStyle.stroke,
+          attrs: {
-                    height: 30,
+            x: 8,
-                    width,
+            y: 8,
-                    radius: [boxStyle.radius, boxStyle.radius, 0, 0],
+            height: 16,
-                },
+            width: 16,
-                draggable: true,
+            ...icon,
-            });
+          },
+        });
+        fontLeft += 18;
+      }
 
-            let fontLeft = 12;
+      group.addShape("text", {
-
+        attrs: {
-            if (icon && icon.show !== false) {
+          y: 22,
-                group.addShape("image", {
+          x: fontLeft,
-                    attrs: {
+          fill: "#fff",
-                        x: 8,
+          text: cfg.label,
-                        y: 8,
+          fontSize: 12,
-                        height: 16,
+          fontWeight: 500,
-                        width: 16,
-                        ...icon,
-                    },
-                });
-                fontLeft += 18;
-            }
-
-            group.addShape("text", {
-                attrs: {
-                    y: 22,
-                    x: fontLeft,
-                    fill: "#fff",
-                    text: cfg.label,
-                    fontSize: 12,
-                    fontWeight: 500,
-                },
-            });
-
-            group.addShape("rect", {
-                attrs: {
-                    x: 0,
-                    y: collapsed ? 30 : 300,
-                    height: 15,
-                    width,
-                    fill: "#eee",
-                    radius: [0, 0, boxStyle.radius, boxStyle.radius],
-                    cursor: "pointer",
-                },
-                name: collapsed ? "expand" : "collapse",
-            });
-
-            group.addShape("text", {
-                attrs: {
-                    x: width / 2 - 6,
-                    y: (collapsed ? 30 : 300) + 12,
-                    text: collapsed ? "+" : "-",
-                    width,
-                    fill: "#000",
-                    radius: [0, 0, boxStyle.radius, boxStyle.radius],
-                    cursor: "pointer",
-                },
-                name: collapsed ? "expand" : "collapse",
-            });
-
-            const keyshape = group.addShape("rect", {
-                attrs: {
-                    x: 0,
-                    y: 0,
-                    width,
-                    height: collapsed ? 45 : height,
-                    ...boxStyle,
-                },
-                draggable: true,
-            });
-
-            if (collapsed) {
-                return keyshape;
-            }
-
-            const listContainer = group.addGroup({});
-            listContainer.setClip({
-                type: "rect",
-                attrs: {
-                    x: -8,
-                    y: 30,
-                    width: width + 16,
-                    height: 300 - 30,
-                },
-            });
-            listContainer.addShape({
-                type: "rect",
-                attrs: {
-                    x: 1,
-                    y: 30,
-                    width: width - 2,
-                    height: 300 - 30,
-                    fill: "#fff",
-                },
-                draggable: true,
-            });
-
-            if (list.length > itemCount) {
-                const barStyle = {
-                    width: 4,
-                    padding: 0,
-                    boxStyle: {
-                        stroke: "#00000022",
-                    },
-                    innerStyle: {
-                        fill: "#00000022",
-                    },
-                };
-
-                listContainer.addShape("rect", {
-                    attrs: {
-                        y: 30,
-                        x: width - barStyle.padding - barStyle.width,
-                        width: barStyle.width,
-                        height: height - 30,
-                        ...barStyle.boxStyle,
-                    },
-                });
-
-                const indexHeight =
-                    afterList.length > itemCount ?
-                        (afterList.length / list.length) * height :
-                        10;
-
-                listContainer.addShape("rect", {
-                    attrs: {
-                        y: 30 +
-                            barStyle.padding +
-                            (startIndex / list.length) * (height - 30),
-                        x: width - barStyle.padding - barStyle.width,
-                        width: barStyle.width,
-                        height: Math.min(height, indexHeight),
-                        ...barStyle.innerStyle,
-                    },
-                });
-            }
-            if (afterList) {
-                afterList.forEach((e, i) => {
-                    const isSelected =
-                        Math.floor(startIndex) + i === Number(selectedIndex);
-                    let {
-                        key = "", type
-                    } = e;
-                    if (type) {
-                        key += " - " + type;
-                    }
-                    const label = key.length > 26 ? key.slice(0, 24) + "..." : key;
-
-                    listContainer.addShape("rect", {
-                        attrs: {
-                            x: 1,
-                            y: i * itemHeight - itemHeight / 2 + offsetY,
-                            width: width - 4,
-                            height: itemHeight,
-                            radius: 2,
-                            lineWidth: 1,
-                            cursor: "pointer",
-                        },
-                        name: `item-${Math.floor(startIndex) + i}-content`,
-                        draggable: true,
-                    });
-
-                    if (!cfg.hideDot) {
-                        // utils.anchor.erDrawLeft(group,label,0,i * itemHeight + offsetY)
-                        // utils.anchor.erDrawLeft(group,label,width,i * itemHeight + offsetY)
-                        listContainer.addShape("marker", {
-                            attrs: {
-                                x: 0,
-                                y: i * itemHeight + offsetY,
-                                r: 3,
-                                stroke: boxStyle.stroke,
-                                fill: "white",
-                                radius: 2,
-                                lineWidth: 1,
-                                cursor: "pointer",
-                            },
-                            name: 'marker-shape'
-                        });
-                        listContainer.addShape("marker", {
-                            attrs: {
-                                x: width,
-                                y: i * itemHeight + offsetY,
-                                r: 3,
-                                stroke: boxStyle.stroke,
-                                fill: "white",
-                                radius: 2,
-                                lineWidth: 1,
-                                cursor: "pointer",
-                            },
-                            name: 'markerBg-shape'
-                        });
-
-
-
-
-
-
-
-
-                    }
-
-                    listContainer.addShape("text", {
-                        attrs: {
-                            x: 12,
-                            y: i * itemHeight + offsetY + 6,
-                            text: label,
-                            fontSize: 12,
-                            fill: "#000",
-                            fontFamily: "Avenir,-apple-system,BlinkMacSystemFont,Segoe UI,PingFang SC,Hiragino Sans GB,Microsoft YaHei,Helvetica Neue,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol",
-                            full: e,
-                            fontWeight: isSelected ? 500 : 100,
-                            cursor: "pointer",
-                        },
-                        name: `item-${Math.floor(startIndex) + i}`,
-                    });
-                });
-            }
-
-
-            // console.log(keyshape);
-            return keyshape;
         },
-        getAnchorPoints() {
+      });
-            return [
+
-                [0, 0],
+      group.addShape("rect", {
-                [1, 0],
+        attrs: {
-            ];
+          x: 0,
+          y: collapsed ? 30 : 300,
+          height: 15,
+          width,
+          fill: "#eee",
+          radius: [0, 0, boxStyle.radius, boxStyle.radius],
+          cursor: "pointer",
         },
-    }
+        name: collapsed ? "expand" : "collapse",
+      });
+
+      group.addShape("text", {
+        attrs: {
+          x: width / 2 - 6,
+          y: (collapsed ? 30 : 300) + 12,
+          text: collapsed ? "+" : "-",
+          width,
+          fill: "#000",
+          radius: [0, 0, boxStyle.radius, boxStyle.radius],
+          cursor: "pointer",
+        },
+        name: collapsed ? "expand" : "collapse",
+      });
+
+      const keyshape = group.addShape("rect", {
+        attrs: {
+          x: 0,
+          y: 0,
+          width,
+          height: collapsed ? 45 : height,
+          ...boxStyle,
+        },
+        draggable: true,
+      });
+
+      if (collapsed) {
+        return keyshape;
+      }
+
+      const listContainer = group.addGroup({});
+      listContainer.setClip({
+        type: "rect",
+        attrs: {
+          x: -8,
+          y: 30,
+          width: width + 16,
+          height: 300 - 30,
+        },
+      });
+      listContainer.addShape({
+        type: "rect",
+        attrs: {
+          x: 1,
+          y: 30,
+          width: width - 2,
+          height: 300 - 30,
+          fill: "#fff",
+        },
+        draggable: true,
+      });
+
+      if (list.length > itemCount) {
+        const barStyle = {
+          width: 4,
+          padding: 0,
+          boxStyle: {
+            stroke: "#00000022",
+          },
+          innerStyle: {
+            fill: "#00000022",
+          },
+        };
+
+        listContainer.addShape("rect", {
+          attrs: {
+            y: 30,
+            x: width - barStyle.padding - barStyle.width,
+            width: barStyle.width,
+            height: height - 30,
+            ...barStyle.boxStyle,
+          },
+        });
+
+        const indexHeight =
+          afterList.length > itemCount ?
+            (afterList.length / list.length) * height :
+            10;
+
+        listContainer.addShape("rect", {
+          attrs: {
+            y: 30 +
+              barStyle.padding +
+              (startIndex / list.length) * (height - 30),
+            x: width - barStyle.padding - barStyle.width,
+            width: barStyle.width,
+            height: Math.min(height, indexHeight),
+            ...barStyle.innerStyle,
+          },
+        });
+      }
+      if (afterList) {
+        afterList.forEach((e, i) => {
+          const isSelected =
+            Math.floor(startIndex) + i === Number(selectedIndex);
+          let {
+            key = "", type
+          } = e;
+          if (type) {
+            key += " - " + type;
+          }
+          const label = key.length > 26 ? key.slice(0, 24) + "..." : key;
+
+          listContainer.addShape("rect", {
+            attrs: {
+              x: 1,
+              y: i * itemHeight - itemHeight / 2 + offsetY,
+              width: width - 4,
+              height: itemHeight,
+              radius: 2,
+              lineWidth: 1,
+              cursor: "pointer",
+            },
+            name: `item-${Math.floor(startIndex) + i}-content`,
+            draggable: true,
+          });
+
+          if (!cfg.hideDot) {
+            // utils.anchor.erDrawLeft(group,label,0,i * itemHeight + offsetY)
+            // utils.anchor.erDrawLeft(group,label,width,i * itemHeight + offsetY)
+            listContainer.addShape("marker", {
+              attrs: {
+                x: 0,
+                y: i * itemHeight + offsetY,
+                r: 3,
+                stroke: boxStyle.stroke,
+                fill: "white",
+                radius: 2,
+                lineWidth: 1,
+                cursor: "pointer",
+              },
+              name: 'marker-shape'
+            });
+            listContainer.addShape("marker", {
+              attrs: {
+                x: width,
+                y: i * itemHeight + offsetY,
+                r: 3,
+                stroke: boxStyle.stroke,
+                fill: "white",
+                radius: 2,
+                lineWidth: 1,
+                cursor: "pointer",
+              },
+              name: 'markerBg-shape'
+            });
+
+
+          }
+
+          listContainer.addShape("text", {
+            attrs: {
+              x: 12,
+              y: i * itemHeight + offsetY + 6,
+              text: label,
+              fontSize: 12,
+              fill: "#000",
+              fontFamily: "Avenir,-apple-system,BlinkMacSystemFont,Segoe UI,PingFang SC,Hiragino Sans GB,Microsoft YaHei,Helvetica Neue,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol",
+              full: e,
+              fontWeight: isSelected ? 500 : 100,
+              cursor: "pointer",
+            },
+            name: `item-${Math.floor(startIndex) + i}`,
+          });
+        });
+      }
+
+
+      // console.log(keyshape);
+      return keyshape;
+    },
+    getAnchorPoints() {
+      return [
+        [0, 0],
+        [1, 0],
+      ];
+    },
+    setState(name, value, item) {
+      // 设置节点状态
+      // utils.node.setState(name, value, item)
+      // 设置锚点状态
+      // if (vm.graphMode === 'edit') {
+        utils.anchor.setState(name, value, item)
+      // }
+    },
+  }
 }
 
 

hchyun-ui/src/views/tool/top/packages/topology/src/theme/default-style.js

@@ -71,13 +71,13 @@ export default {
   // 锚点样式
   anchorStyle: {
     default: {
-      r: 10,
+      r: 3,
-      // symbol: 'circle',
+      symbol: 'circle',
       fill: '#FFFFFF',
       fillOpacity: 0,
       stroke: '#1890FF',
       strokeOpacity: 0,
-      // cursor: 'crosshair'
+      cursor: 'crosshair'
     },
     hover: {
       fillOpacity: 1,
@@ -100,12 +100,12 @@ export default {
   anchorBgStyle: {
     default: {
       r: 10,
-      // symbol: 'circle',
+      symbol: 'circle',
       fill: '#1890FF',
       fillOpacity: 0,
       stroke: '#1890FF',
       strokeOpacity: 0,
-      // cursor: 'crosshair'
+      cursor: 'crosshair'
     },
     hover: {
       fillOpacity: 1,

hchyun-ui/src/views/tool/top/packages/topology/src/topology.vue

@@ -299,12 +299,14 @@ export default {
   created() {
   },
   mounted() {
-    Node.obj.Image.sendThis(this);
+    Node.obj.diceErBox.sendThis(this)
-    Behavior.obj.clickEventEdit.sendThis(this);
+    // Behavior.obj.clickEventEdit.sendThis(this);
-    Behavior.obj.dragAddEdge.sendThis(this);
+    // Behavior.obj.dragAddEdge.sendThis(this);
     Behavior.obj.dragEventEdit.sendThis(this);
     Behavior.obj.keyupEventEdit.sendThis(this);
-    Behavior.obj.hoverEventEdit.sendThis(this);
+    // Behavior.obj.hoverEventEdit.sendThis(this);
+    Behavior.obj.diceErEdge.sendThis(this)
+
     this.clearHistoryData();
     // this.initTopo(this.graphData)
     // this.autoZoomHandler()
@@ -465,7 +467,8 @@ export default {
           // "drag-event-edit",
           "keyup-event-edit",
           "drag-add-edge",
-          'dice-er-node'
+          'dice-er-node',
+          "dice-er-edge"
         ],
         addEdge: [
           "drag-canvas",

hchyun-ui/src/views/tool/top/packages/topology/src/utils/anchor/index.js

@@ -10,8 +10,6 @@ import setState from './set-state'
 // import update from './update'
 
 export default {
-  // draw,
   setState,
-  // update,
   erDrawLeft,
 }

hchyun-ui/src/views/tool/top/packages/topology/src/utils/anchor/set-state.js

@@ -8,8 +8,9 @@ import theme from '../../theme'
 
 export default function(name, value, item) {
   const themeStyle = theme.defaultStyle // todo...先使用默认主题，后期可能增加其它风格的主体
-  // console.log(item)
+  console.log(name)
   if (name === 'hover') {
+    console.log(456)
     let group = item.getContainer()
     let children = group.get('children')
     for (let i = 0, len = children.length; i < len; i++) {