feat: topo电表位置

src/views/stationData/index.vue

@@ -86,10 +86,10 @@
 </template>
 
 <script setup lang="ts">
-import dayjs from 'dayjs'
 import { useTransferDataStore } from '@/stores/transferData'
 import { storeToRefs } from 'pinia'
 import { getSiteList, type ISite } from '@/api/module/transfer'
+import EdfsWrap from "@/components/Edfs-wrap.vue";
 const env = import.meta.env
 
 const router = useRouter()

src/views/testG6/index.vue

@@ -4,11 +4,11 @@
 </template>
 
 <script setup lang="ts">
-import { onMounted } from 'vue';
-import { ExtensionCategory, Graph, register } from '@antv/g6';
-import { MyLineEdge } from './utils/MyLineEdge';
 import DeviceData from './utils/data';
-import { flattenTree, GenerateGraphData } from "./utils";
+import { MyLineEdge } from './utils/MyLineEdge';
+import { DeviceType, flattenTree, GenerateGraphData } from "./utils";
+import { ExtensionCategory, Graph, register } from '@antv/g6';
+
 
 
 onMounted(() => {
@@ -17,9 +17,14 @@ onMounted(() => {
   const graphData = new GenerateGraphData(device)
   const graph = new Graph({
     container: document.getElementById('container')!,
-
+    padding: 50,
+    autoFit: {
+      type: 'center',
+    },
     layout: {
       type: 'dagre',
+      nodesep: 50,
+      ranksep: 50,
     },
     edge: {
       type: 'my-line-edge',
@@ -28,9 +33,41 @@ onMounted(() => {
       nodes: graphData.getNodes(),
       edges: graphData.getEdges()
     },
-    behaviors: ['drag-canvas', 'zoom-canvas', 'drag-element'],
+    behaviors: ['drag-canvas', 'zoom-canvas'],
   });
   graph.render();
 
-});
+
+  graph.on('afterlayout', async () => {
+    const nodes = graph.getNodeData();
+    const root = nodes.find(n => n.data?.type === DeviceType.Ems);
+    if (!root) return;
+
+    const emNodes = nodes.filter(n =>
+      n.data?.type === DeviceType.Em || n.data?.type === DeviceType['Em-Measure']
+    );
+
+    const [x, y] = graph.getElementPosition(root.id);
+    console.log(x, y)
+    console.log(emNodes)
+
+    graph.updateNodeData(
+      emNodes.map((n, idx) => ({
+        id: n.id,
+        style: Object.assign(
+          {},
+          n.style,
+          { // 更新Em 节点位置
+            x: x + 100,
+            y: -y - (emNodes.length * 10) + (idx * 60),
+          },
+        )
+      }))
+    );
+
+    await graph.draw();
+    await graph.fitView();
+  });
+})
+;
 </script>

src/views/testG6/utils/MyLineEdge.ts

@@ -1,6 +1,6 @@
 import { BaseEdge } from '@antv/g6';
 import type { PathArray } from "@antv/util";
-import { Circle, Line } from '@antv/g';
+import { Circle } from '@antv/g';
 import { subStyleProps } from '@antv/g6';
 import type { Device } from "./index";
 
@@ -40,10 +40,15 @@ export class MyLineEdge extends BaseEdge {
 
   // 这里保持你的路径逻辑
   protected getKeyPath(attrs: any): PathArray {
-    const { sourceNode, targetNode } = this;
-
-    const [sx, sy] = sourceNode.getPosition();
-    const [tx, ty] = targetNode.getPosition();
+    // const { sourceNode, targetNode } = this;
+    const [sourcePoint, targetPoint] = this.getEndpoints(attrs,false)
+    const [sx, sy] = [sourcePoint[0], sourcePoint[1]];
+    const [tx, ty] = [targetPoint[0], targetPoint[1]];
+    // const prev = this.context.model.getRelatedEdgesData(this.sourceNode.id) // 获取源节点的相关边数据
+    //   .find((edge) => edge.target === this.targetNode.id) as Device;
+    // console.log(prev)
+    // const [sx, sy] = sourceNode.getPosition();
+    // const [tx, ty] = targetNode.getPosition();
     // const [x1, y1] = sourceNode.getPosition();
     // const [x2, y2] = targetNode.getPosition();
 

src/views/testG6/utils/index.ts

@@ -1,5 +1,7 @@
 import { flatMap } from 'lodash-es'
 import type { NodeData, EdgeData } from "@antv/g6";
+import type { EdgeStyle } from "@antv/g6/src/spec/element/edge";
+import type { NodeStyle } from "@antv/g6/lib/spec/element/node";
 
 export type Device = any
 
@@ -18,6 +20,24 @@ export enum DeviceType {
   Cac,
 }
 
+const VIRTUAL_NODE = 'virtual-node'
+
+const edgeDefaultStyle: EdgeStyle = {
+  router: {
+    type: 'orth',
+  },
+}
+
+const nodeDefaultStyle: NodeStyle = {
+  ports: [
+    { key: 'top', placement: [0.5, 0], r: 0 },
+    { key: 'bottom', placement: [0.5, 0.98], r: 0 },
+    { key: 'left', placement: [0, 0.5], r: 0 },
+    { key: 'right', placement: [1, 0.5], r: 0 }
+  ]
+}
+
+
 export function flattenTree(tree: Device[], depth = 0): Device[] {
   return flatMap(tree, (node: Device,) => {
     const { children, ...rest } = node
@@ -41,11 +61,17 @@ export class GenerateGraphData {
   private generateNodeData() {
     for (const device of this.devices) {
       const deviceChild = this.devices.filter((item: Device) => device.id === item.parentId)
+      const isNeedPoint = device.type === DeviceType.Ems || device.type === DeviceType['Em-Measure'] || device.type === DeviceType.Em
       this.nodes.push({
         id: String(device.id),
         label: device.name,
-        data: device
+        data: device,
+        style: Object.assign(isNeedPoint ? nodeDefaultStyle : {},
+          {
+            labelText: device.name
+          })
       })
+
       if (!!deviceChild.length) {
         // 在每个有子节点的设备下插入一个虚拟节点
         this.nodes.push({
@@ -53,12 +79,13 @@ export class GenerateGraphData {
           label: '',
           type: '',
           style: { opacity: 0 },
-          size: 1,
+          size: 0,
+          anchorPoints: [],
           data: {
-            type: 'virtual-node',
+            type: VIRTUAL_NODE,
             parentId: String(device.id),
             depth: device.depth + 1,
-          }
+          },
         })
 
       }
@@ -67,31 +94,60 @@ export class GenerateGraphData {
 
   private generateEdgeData() {
     for (const node of this.nodes) {
-
       const customData: Device = node.data
       const virtualId = `${customData.parentId}-virtual`;
-      const findParentNode: Device = this.nodes.find((n: NodeData) => n.id === customData.parentId);
-      if (!findParentNode) {
-        // 如果没有找到父节点，则可能是根节点或孤立节点
-        if (customData.type == DeviceType.Ems) continue;
+      const findParentNode: Device = this.nodes.some((n: NodeData) => n.id === String(customData.parentId));
+
+      if (this.isVirtualNode(customData.type)) {
         this.edges.push({
-          source: virtualId,
-          target: node.id,
+          source: customData.parentId,
+          target: String(node.id),
           type: 'polyline',
-          data: customData
+          data: customData,
+          style: edgeDefaultStyle,
         })
+        continue;
+      }
+
+      if (findParentNode) {
+        if (this.isEms(customData.type)) continue;
+        if (this.isEm(customData.type)) {
+          // 如果是 电表 类型的节点 target 指向父节点Ems
+          this.edges.push({
+            target: String(customData.parentId),
+            source: String(node.id),
+            type: 'polyline',
+            data: customData,
+            style: Object.assign(edgeDefaultStyle, {
+              sourcePort: 'bottom',
+              targetPort: 'right',
+            }),
+          })
+          continue;
+        }
 
-      } else {
         this.edges.push({
-          source: customData.type === 'virtual-node' ? customData.parentId : virtualId,
+          source: virtualId,
           target: String(node.id),
           type: 'polyline',
-          data: customData
+          data: customData,
+          style: edgeDefaultStyle,
         })
       }
     }
   }
 
+  isEm(type: number): boolean {
+    return type == DeviceType["Em-Measure"] || type == DeviceType.Em
+  }
+
+  isEms(type: number): boolean {
+    return type == DeviceType.Ems
+  }
+
+  isVirtualNode(type: number | string): boolean {
+    return type === VIRTUAL_NODE;
+  }
 
   getNodes(): NodeData[] {
     return this.nodes;
@@ -100,5 +156,4 @@ export class GenerateGraphData {
   getEdges(): EdgeData[] {
     return this.edges;
   }
-
 }

uno.config.js

@@ -0,0 +1,43 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var preset_rem_to_px_1 = require("@unocss/preset-rem-to-px");
+var unocss_preset_scalpel_1 = require("unocss-preset-scalpel");
+var index_1 = require("./src/uno-preset/src/index");
+var unocss_1 = require("unocss");
+exports.default = (0, unocss_1.defineConfig)({
+    shortcuts: [],
+    theme: {
+        colors: {},
+    },
+    content: {
+        pipeline: {
+            include: [
+                //参考：https://unocss.dev/guide/extracting#extracting-from-build-tools-pipeline
+                /\.(vue|svelte|[jt]sx|mdx?|astro|elm|php|phtml|html)($|\?)/,
+                'src/**/*.{js,ts}',
+                'src/router/index.ts',
+                'src/views/home/utils/menuConfig.ts',
+            ],
+        },
+    },
+    rules: [['wh-full', { width: '100%', height: '100%' }]],
+    presets: [
+        (0, preset_rem_to_px_1.default)(),
+        (0, unocss_preset_scalpel_1.presetScalpel)(),
+        (0, unocss_1.presetWind3)(),
+        (0, index_1.presetSoybeanAdmin)(),
+        (0, unocss_1.presetAttributify)({
+            prefix: 'uno-',
+            prefixedOnly: true,
+        }),
+        (0, unocss_1.presetIcons)({
+            scale: 1.2,
+            warn: true,
+        }),
+        (0, unocss_1.presetTypography)(),
+        (0, unocss_1.presetWebFonts)({
+            fonts: {},
+        }),
+    ],
+    transformers: [(0, unocss_1.transformerDirectives)(), (0, unocss_1.transformerVariantGroup)()],
+});

vite.config.ts

@@ -65,7 +65,7 @@ export default defineConfig({
     host: '0.0.0.0',
     proxy: {
       '/remoteServer': {
-        target: 'http://192.168.1.199:8080/',
+        target: 'http://192.168.1.99:8080/',
         changeOrigin: true,
         secure: false,
         ws: true,