From 7d9e32b3f1e9fb9cf84a815521f882ff86806fe8 Mon Sep 17 00:00:00 2001
From: wuteng <419274783@qq.com>
Date: Wed, 2 Jul 2025 19:48:50 +0800
Subject: [PATCH] =?UTF-8?q?=E7=BB=84=E6=89=B9=E6=AC=A1=E8=A7=84=E5=88=99?=
 =?UTF-8?q?=E5=9B=BE=E8=B0=83=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/emis/emisTransPlanRule.js             |   3 +
 .../emis/emisTransPlanRuleTopoGraph/index.vue | 753 ++++++++++++------
 2 files changed, 508 insertions(+), 248 deletions(-)

diff --git a/src/api/emis/emisTransPlanRule.js b/src/api/emis/emisTransPlanRule.js
index fadad6ce..5228a1c7 100644
--- a/src/api/emis/emisTransPlanRule.js
+++ b/src/api/emis/emisTransPlanRule.js
@@ -76,6 +76,9 @@ export function emisTransPlanRuleTree(data) {
     params: {
       lineCode: data.lineCode,
       productType: data.productType,
+      params:{
+        lineStartSiteCode:data.startSiteCode
+      }
     },
     method: 'get'
   })
diff --git a/src/views/emis/emisTransPlanRuleTopoGraph/index.vue b/src/views/emis/emisTransPlanRuleTopoGraph/index.vue
index e2c04f7a..4329d456 100644
--- a/src/views/emis/emisTransPlanRuleTopoGraph/index.vue
+++ b/src/views/emis/emisTransPlanRuleTopoGraph/index.vue
@@ -1,265 +1,522 @@
 <template>
-  <div class="app-container">
-    <!-- 查询 -->
-    <SearchForm slot="pageHeader" :model="queryParams" ref="queryForm" size="mini" :maxShow="30" label-width="68px"
-      v-show="showSearch" @search="handleQuery" @reset="resetQuery">
-      <!-- 线路查询 -->
-      <el-form-item label="线路" prop="lineCode">
-        <TransLinePicker v-model="queryParams.lineCode" isInitiated="true"></TransLinePicker>
-      </el-form-item>
-      <el-form-item label="产品类型" prop="productType">
-        <TransProductPicker placeholder="产品类型" v-model="queryParams.productType" :transLineCode="queryParams.lineCode"
-          @onChange="onProductChange"></TransProductPicker>
-      </el-form-item>
-    </SearchForm>
-
-    <!-- 图表 -->
-    <div id="container"></div>
-  </div>
+    <div class="app-container">
+        <!-- 查询 -->
+        <SearchForm slot="pageHeader" :model="queryParams" ref="queryForm" size="mini" :maxShow="30" label-width="68px"
+            v-show="showSearch" @search="handleQuery" @reset="resetQuery">
+            <!-- 线路查询 -->
+            <el-form-item label="线路" prop="lineCode">
+                <TransLinePicker v-model="queryParams.lineCode" isInitiated="true"></TransLinePicker>
+            </el-form-item>
+            <el-form-item label="产品类型" prop="productType">
+                <TransProductPicker placeholder="产品类型" v-model="queryParams.productType"
+                    :transLineCode="queryParams.lineCode" @onChange="onProductChange"></TransProductPicker>
+            </el-form-item>
+            <el-form-item label="始发网点" prop="startSiteCode">
+                <EmisSiteSimplePicker placeholder="始发网点" v-model="queryParams.startSiteCode"></EmisSiteSimplePicker>
+            </el-form-item>
+        </SearchForm>
+        <div id="container"></div>
+    </div>
 </template>
+
 <script>
-import { Graph } from "@antv/g6";
 import G6 from "@antv/g6";
-// import { treeData as tree } from "./data";
 import TransProductPicker from "@/views/emis/EmisBaseTools/TransProductPicker.vue";
 import TransLinePicker from "@/views/emis/EmisBaseTools/TransLinePicker.vue";
+import EmisSiteSimplePicker from '@/views/emis/EmisBaseTools/EmisSiteSimplePicker.vue';
+
 import { emisTransPlanRuleTree } from "@/api/emis/emisTransPlanRule";
+import { fill } from "lodash";
 export default {
-  name: "EmisTransPlanRuleTopoGraph",
-  components: {
-    TransProductPicker,
-    TransLinePicker,
-  },
-  data() {
-    return {
-      //定义数据
-      graph: {},
-      queryParams: {
-        pageNum: 1,
-        pageSize: 50,
-        lineCode: "",
-        productType: "",
-        productName: ''
-      },
-      // 节点数据
-      list: [],
-      // 边的数据
-      edges: [],
-      treeData: [],
-      siteX: 0,
-      depthCount: {},
-      // 显示搜索条件
-      showSearch: true,
-    };
-  },
-  created() {
-    // this.getLinelist();
-    // this.getTreeData();
-  },
-  // 画布的渲染
-  mounted() {
-    // // 注册自定义缩放行为
-    G6.registerBehavior("fixed-zoom-canvas", {
-      getEvents() {
-        return {
-          wheel: "onWheel",
-          mousewheel: "onWheel",
-          touchmove: "onTouchMove",
-          touchstart: "onTouchStart",
-          touchend: "onTouchEnd",
-        };
-      },
-
-      // 设置 passive 为 false
-      getDefaultCfg() {
-        return {
-          direction: "both",
-          sensitivity: 1,
-          minZoom: 0.2,
-          maxZoom: 10,
-          // 关键配置：禁用被动事件监听器
-          wheelEvent: { passive: false },
-          touchEvent: { passive: false },
-        };
-      },
-
-      // 处理滚轮事件
-      onWheel(e) {
-        // 阻止默认行为
-        // e.preventDefault();
-
-        // 调用原始缩放逻辑
-        const self = this;
-        const graph = self.graph;
-        const point = { x: e.clientX, y: e.clientY };
-        const canvasPoint = graph.getPointByClient(point.x, point.y);
-
-        // 缩放逻辑...
-        const zoom = e.deltaY > 0 ? 0.9 : 1.1;
-        graph.zoom(zoom, { x: canvasPoint.x, y: canvasPoint.y });
-      },
-
-      // 处理触摸事件
-      onTouchMove(e) {
-        e.preventDefault();
-        // 触摸移动逻辑...
-      },
-    });
-    // 在创建图表前添加
-    this.graph = new Graph({
-      container: document.getElementById("container"),
-      width: 1800,
-      height: 1300,
-      defaultNode: {
-        type: 'rect',
-        // 节点尺寸
-        size: [250, 50], // [宽度, 高度]，不同类型节点含义不同
-      },
-      defaultEdge: {
-        type: "polyline",
-        style: {
-          stroke: "#B12D29",
-          endArrow: true,
-          lineAppendWidth: 10,
-        },
-      },
-      modes: {
-        default: ['drag-canvas', 'drag-node', "fixed-zoom-canvas"], // 允许拖拽画布、放缩画布、拖拽节点
-      },
-      data: {
-        nodes: this.list,
-      },
-      //自动适配画布
-      //   fitView: true,
-      //   fitViewPadding: [ 20, 40, 50, 20 ],
-      layout: {
-        type: 'dagre',
-        rankdir: 'LR',
-        align: 'UL',
-        controlPoints: true,
-        nodesepFunc: () => 1,
-        ranksepFunc: () => 1,
-      },
-    });
-    this.graph.on("node:click", (e) => {
-      const { item } = e;
-      const nodeType = item._cfg.model.nodeType;
-      // if (nodeType === "line") {
-      //     this.getProductlist(item._cfg.id, item._cfg.model.y);
-      // }
-      if (nodeType === "prod") {
-        //从treeData中取出 线路信息
-        this.selectProductType = item._cfg.model.productType;
-        this.treeDataToNodelist(
-          this.treeData,
-          this.list,
-          this.edges,
-          this.selectProductType
-        );
-      }
-    });
-    this.graph.data({
-      nodes: this.list,
-      edges: this.edges,
-    });
-    this.graph.render();
-  },
-  methods: {
-    /** 搜索按钮操作 */
-    handleQuery() {
-      this.getTreeData();
+    name: "EmisTransPlanRuleTopoGraph",
+    components: {
+        TransProductPicker,
+        TransLinePicker,
+        EmisSiteSimplePicker
+    },
+    data() {
+        return {
+            treeData: {},
+            graph: null,
+            queryParams: {
+                pageNum: 1,
+                pageSize: 50,
+                lineCode: "",
+                productType: "",
+                productName: '',
+                startSiteCode: ''
+            },
+            // 显示搜索条件
+            showSearch: true,
+            //节点操作菜单
+            descriptionDiv: null,
+        };
     },
-    /** 重置按钮操作 */
-    resetQuery() { },
-    //获取树形数据
-    async getTreeData() {
-      const loadingInstance = this.$loading({
-        text: "正在加载...",
-      });
-      this.list = [];
-      this.edges = [];
-      const res = await emisTransPlanRuleTree(this.queryParams); //测试数据
-      this.treeData = res.rows;
 
-      //获取产品下的网点
-      let { list: newlist, edges: newEdges } = this.treeDataToNodelist(
-        this.treeData,
-        this.queryParams.productType,
-      );
-      setTimeout(() => {
-        this.list = this.list.concat(newlist);
-        this.edges = this.edges.concat(newEdges);
-        this.graph.data({
-          nodes: this.list,
-          edges: this.edges,
+
+    mounted() {
+        // 注册自定义缩放行为
+        G6.registerBehavior("fixed-zoom-canvas", {
+            getEvents() {
+                return {
+                    wheel: "onWheel",
+                    mousewheel: "onWheel",
+                    touchmove: "onTouchMove",
+                    touchstart: "onTouchStart",
+                    touchend: "onTouchEnd",
+                };
+            },
+
+            // 设置 passive 为 false
+            getDefaultCfg() {
+                return {
+                    direction: "both",
+                    sensitivity: 1,
+                    minZoom: 0.2,
+                    maxZoom: 10,
+                    // 关键配置：禁用被动事件监听器
+                    wheelEvent: { passive: false },
+                    touchEvent: { passive: false },
+                };
+            },
+
+            // 处理滚轮事件
+            onWheel(e) {
+                // 阻止默认行为
+                // e.preventDefault();
+
+                // 调用原始缩放逻辑
+                const self = this;
+                const graph = self.graph;
+                const point = { x: e.clientX, y: e.clientY };
+                const canvasPoint = graph.getPointByClient(point.x, point.y);
+
+                // 缩放逻辑...
+                const zoom = e.deltaY > 0 ? 0.9 : 1.1;
+                graph.zoom(zoom, { x: canvasPoint.x, y: canvasPoint.y });
+            },
+
+            // 处理触摸事件
+            onTouchMove(e) {
+                e.preventDefault();
+                // 触摸移动逻辑...
+            },
         });
-        this.graph.render();
-      }, 1000);
-      loadingInstance.close();
+
+        // this.splitChild(this.treeData);
+        this.drawTreeGraph();
+
+
     },
-    //获取treeData 产品下的网点 treeData 转 list 和 edges
-    treeDataToNodelist(treeData, productType, depth = 0, parenIdProductType) {
-      let list = [];
-      let edges = [];
-      treeData.forEach((item, index) => {
-        if (!this.depthCount[depth]) {
-          this.depthCount[depth] = 0;
-        }
-        this.depthCount[depth]++;
-        //查找list中depth=depth 的元素数量
-        if (item.productType === productType) {
-          list.push({
-            // id: item.id + item.productType,
-            id: item.treeId,
-            // x: (depth + 0.3) * 300,
-            // y: this.depthCount[depth] * 100,
-            depth: depth,
-            label: `${item.startSiteName}->${item.nextSiteName}\n ${item.supplierName ? item.supplierName.replace(/(.{20})/g, '$1\n') : ''}`,
-          });
-          if (item.parentId) {
-            edges.push({
-              // source: parenIdProductType,
-              source: item.parentId,
-              // target: item.id + item.productType,
-              target: item.treeId,
-              // lineType: 'productToSite',
+    methods: {
+        /** 搜索按钮操作 */
+        handleQuery() {
+            this.getTreeData();
+        },
+        /** 重置按钮操作 */
+        resetQuery() {
+            this.queryParams = {
+                pageNum: 1,
+                pageSize: 50,
+                lineCode: "",
+                productType: "",
+                productName: ''
+            }
+        },
+        onProductChange(item, transType) {
+            this.queryParams.productName = item.prodName;
+        },
+        drawTreeGraph() {
+            //
+            this.contextMenu = new G6.Menu({
+                getContent(evt) {
+
+                    return `
+    <h3>操作节点</h3>
+    <button class='edit-btn'>编辑</button>
+    <button class='del-btn'>删除</button>
+    `;
+                },
+                handleMenuClick: (target, item) => {
+                    console.log(target, item);
+                },
+                // offsetX and offsetY include the padding of the parent container
+                // 需要加上父级容器的 padding-left 16 与自身偏移量 10
+                offsetX: 16 + 10,
+                // 需要加上父级容器的 padding-top 24 、画布兄弟元素高度、与自身偏移量 10
+                offsetY: 0,
+                // the types of items that allow the menu show up
+                // 在哪些类型的元素上响应
+                itemTypes: ['node', 'edge', 'canvas'],
             });
-          }
+
+
+            if (this.graph) this.graph.destroy();
+            const container = document.getElementById("container");
+
+            this.graph = new G6.TreeGraph({
+                container,
+                width: document.getElementById('container').clientWidth + 10, //画布宽度等于浏览器宽度
+                height: document.getElementById('container').clientHeight + 10, //画布高度等于浏览器高度
+                fitView: true,
+                // fitViewPadding: [10, 50, 10, 50],
+                animate: true,
+                // plugins: [this.treeTooltip(), this.contextMenu],
+                plugins: [this.treeTooltip()],
+                defaultNode: {
+                    type: "rect",
+                    size: [250, 80],
+                    collapsed: false,
+                    style: {
+                        // fill: "#fff",
+                        // lineWidth: 2,
+                        // cursor: "pointer",
+                    },
+                    // labelCfg: {
+                    //     position: "right",
+                    //     offset: 10,
+                    //     style: {
+                    //         fill: "#333",
+                    //         fontSize: 20,
+                    //         stroke: "#fff",
+                    //         background: {
+                    //             fill: "#ffffff",
+                    //             padding: [2, 2, 2, 2],
+                    //         },
+                    //     },
+                    // },
+                    anchorPoints: [
+                        [0, 0.5],
+                        [1, 0.5],
+                    ],
+                    icon: {
+                        show: true,
+                        width: 25,
+                        height: 25,
+                    },
+                },
+                defaultEdge: {
+                    // type: "cubic-horizontal",
+                    type: "polyline",
+                    style: {
+                        endArrow: true
+                    },
+                    labelCfg: {
+                        position: "end",
+                        refX: -15,
+                        style: {
+                            fontSize: 16,
+                            background: {
+                                fill: "#ffffff",
+                                padding: [2, 2, 2, 2],
+                            },
+                        },
+                    },
+                },
+                modes: {
+                    default: [
+                        {
+                            type: "collapse-expand",
+                            onChange: function onChange(item, collapsed) {
+                                const data = item?.get("model");
+                                data.collapsed = collapsed;
+                                const model = {
+                                    id: data.id,
+                                    // labelCfg: { position: !collapsed ? "top" : "right" },
+                                };
+                                item.update(model);
+                                item.refresh();
+                                return true;
+                            },
+                        },
+                        "drag-canvas",
+                        "fixed-zoom-canvas",
+                        "drag-node"
+                    ],
+                },
+                layout: {
+                    type: "compactBox",
+                    direction: "LR",
+                    getHeight: function getHeight() {
+                        return 30;
+                    },
+                    getWidth: function getWidth() {
+                        return 16;
+                    },
+                    getVGap: function getVGap() {
+                        return 30;
+                    },
+                    getHGap: function getHGap() {
+                        return 150; // 节点水平间距
+                    },
+                },
+                //选中节点
+                nodeStateStyles: {
+                    active: {
+                        // fill: "l(0) 0:#FF4500 1:#32CD32",
+                        // stroke: "l(0) 0:#FF4500 1:#32CD32",
+                        // fill: "#B12D29",
+                        // stroke:"#B12D29",
+                        // lineWidth: 5,
+                    },
+                    selected: {
+                        // fill: "l(0) 0:#FF4500 1:#32CD32",
+                        // fill: "#B12D29",
+                        stroke: "#B12D29",
+                        lineWidth: 3,
+                    },
+                },
+            });
+
+            this.graph.node((node) => {
+                if (!node.id.includes("expand")) {
+                    return {
+                        label: node.label || this.formatLabel(node),
+                        icon: this.formatIcon(node),
+                        size: node.size || 40,
+                        // labelCfg: { position: this.setLabelPos(node) },
+                        style: {
+                            // fill: this.getNodeColor(),
+                            stroke: '#B12D29',
+
+                        },
+                    };
+                } else {
+                    return {
+                        // label: node.label || this.formatLabel(node),
+                        label: '更多...',
+                        icon: this.formatIcon(node),
+                        size: 50,
+                        type: 'circle',
+                        // labelCfg: { position: this.setLabelPos(node) },
+                        labelCfg: { position: 'right' },
+                        style: {
+                            // fill: this.getNodeColor(),
+                            fill: '#B12D29',
+                            stroke: '#B12D29',
+                        },
+                    };
+                }
+            });
+            let selfGrowthNum = 0;
+            this.graph.edge((edge) => {
+                // let {source, target } = edge   // 也可以根据 link的属性不同自定义 连线颜色和label颜色，因为是测试数据，因此就用一个自增长的数判断奇偶性来进行区分，以便明白其中定制化的方法
+                selfGrowthNum++;
+                return {
+                    style: {
+                        opacity: 0.5,
+                        // stroke: selfGrowthNum % 2 ? "#ADD8E6" : "#FFDEAD",
+                        stroke: '#B12D29',
+                        lineWidth: 2,
+                    },
+                    labelCfg: {
+                        position: "end",
+                        style: {
+                            fontSize: 16,
+                            fill: selfGrowthNum % 2 ? "#ADD8E6" : "#FFDEAD",
+                        },
+                    },
+                    // label: selfGrowthNum % 2 ? "even" : "odd",  //边标签
+                };
+            });
+
+            this.graph.on("node:mouseenter", (evt) => {
+                const { item } = evt;
+                // this.graph.setItemState(item, "active", true);
+            });
+
+            this.graph.on("node:mouseleave", (evt) => {
+                const { item } = evt;
+                // this.graph.setItemState(item, "active", false);
+            });
+
+            const animateCfg = { duration: 200, easing: "easeCubic" };
+            this.graph.on("node:click", (evt) => {
+                const { item } = evt;
+                const node = item?.get("model");
+                //点击更多 显示锁起来的下一层节点
+                if (node.id.includes("expand")) {
+                    const parentNode = this.graph.getNeighbors(item, "source")[0].get("model");
+                    console.log(parentNode, parentNode.childrenBak);
+                    this.graph.updateChildren(parentNode.childrenBak, parentNode.id);
+                }
+                // if (node.id.includes("expand")) {
+                //     const parentNode = this.graph.getNeighbors(item, "source")[0].get("model");
+                //     console.log(parentNode, parentNode.childrenBak);
+                //     this.graph.updateChildren(parentNode.childrenBak, parentNode.id);
+                // }
+                setTimeout(() => {
+                    if (!node.id.includes("expand")) {
+                        this.graph.focusItem(item, true, animateCfg);
+                        this.graph.getNodes().forEach((node) => {
+                            this.graph.clearItemStates(node);
+                        });
+                        this.graph.setItemState(item, "selected", true);
+                    }
+                }, 500);
+            });
+
+            this.graph.on("canvas:click", () => {
+                this.graph.getNodes().forEach((node) => {
+                    this.graph.clearItemStates(node);
+                });
+            });
+
+            // this.graph.data(this.treeData);
+            // this.graph.render();
+            this.graph.zoom(0.9);
+            this.graph.fitCenter();
+            this.graph.get("canvas").set("localRefresh", false);
+        },
+        // label 过长截断 显示...
+        formatLabel(node) {
+            const hasChildren = node.childrenBak?.length || node.children?.length;
+            // const ellipsis = node.id.length > 15 ? "..." : "";
+            return `${this.labelStr(node)}`;
+        },
+
+        // 叶子节点 图标处理  截取ID 前两个字符串
+        formatIcon(node) {
+            if (node.id) {
+                node.icon = {
+                    // text: node.id.slice(0, 2),
+                    text: '+',
+                    fill: "#fff",
+                    stroke: "#fff",
+                    textBaseline: "middle",
+                    fontSize: 20,
+                    width: 25,
+                    height: 25,
+                    show: true,
+                };
+            }
+        },
+
+        // 叶子节点 背景颜色随机填充
+        getNodeColor() {
+            const colors = ["#8470FF", "#A020F0", "#C0FF3E", "#FF4500", "#66d6d1"];
+            return colors[Math.floor(Math.random() * colors.length)];
+        },
+
+        // 根据节点展开收起状态 动态变更 label 显示位置，展开时在上，收起时在右
+        setLabelPos(node) {
+            return !node.collapsed && node.children?.length ? "top" : "right";
+        },
+        // label 显示... 时，显示提示 tip
+        treeTooltip() {
+            return new G6.Tooltip({
+                offsetX: 10,
+                offsetY: 20,
+                shouldBegin(e) {
+                    // return e.item?.get("model")?.label?.includes("...");
+                    return e.item._cfg.model.label;
+                },
+                getContent(e) {
+                    let outDiv = document.createElement("p");
+                    // outDiv.innerHTML = ` ${e.item.getModel().id} `;
+                    outDiv.innerHTML = ` ${e.item._cfg.model.supplierName || ''} `;
+                    return outDiv;
+                },
+                itemTypes: ["node"],
+            });
+        },
+
+        // 叶子节点超过 5(xxx)条, 折叠叶子节点，显示展开更多
+        splitChild(node) {
+            node.childrenBak = node.children ? [...node.children] : [];
+            let result = [];
+
+            if (node.children) {
+                result = node.children.slice(0, 2);
+                if (node.children.length > 2) {
+                    // result.push({ id: `expand-${node.id}`, label: " 展开更多..." });
+                    result.push({ id: `expand-${node.id}`, label: "" });
+                }
+                node.children = result;
+                node.children.forEach((child) => {
+                    this.splitChild(child);
+                });
+            }
+        },
+        processTree(nodes) {
+            return nodes.map(node => {
+                // const currentPath = parentPath ? `${parentPath}/${node.name}` : node.name;
+                const newNode = { ...node, id: node.treeId };
+
+
+                if (node.children) {
+                    newNode.children = this.processTree(node.children);
+                }
+
+                return newNode;
+            });
+        },
+        //获取树形数据
+        async getTreeData() {
+            const loadingInstance = this.$loading({
+                text: "正在加载...",
+            });
+            this.list = [];
+            this.edges = [];
+            const res = await emisTransPlanRuleTree(this.queryParams); //测试数据
+            this.treeData = res.rows;
+
+            //获取产品下的网点
+            // let { list: newlist, edges: newEdges } = this.treeDataToNodelist(
+            //   this.treeData,
+            //   this.queryParams.productType,
+            // );
+            this.treeData = { "id": '1', "label": this.queryParams.productName, "x": 500, "y": 500, "children": this.processTree(this.treeData) }
+            // 折叠节点
+            this.splitChild(this.treeData);
+            this.graph.data(this.treeData);
+            this.graph.render();
+            // setTimeout(() => {
+            //   this.list = this.list.concat(newlist);
+            //   this.edges = this.edges.concat(newEdges);
+            //   this.graph.data({
+            //     nodes: this.list, 
+            //     edges: this.edges,
+            //   });
+            //   this.graph.render();
+            // }, 500);
+            loadingInstance.close();
+        },
+        //格式化标签
+        labelStr(node) {
+            let str;
+            const hasChildren = node.childrenBak?.length || node.children?.length || 0;
+            if (node.startSiteName) {
+                str = `${node.startSiteName}->${node.nextSiteName}\n${node.supplierName ? node.supplierName.replace(/(.{20})/g, '$1\n') : ''} \n (${hasChildren})`
+            } else {
+                str = node.label;
+            }
+            return str;
         }
-        //如果存在子节点
-        if (item.children && item.children.length > 0) {
-          this.siteX = this.siteX + 150;
-          let { list: newlist, edges: newEdges } = this.treeDataToNodelist(
-            item.children,
-            productType,
-            depth + 1,
-            item.id + item.productType
-          );
-          list = list.concat(newlist);
-          edges = edges.concat(newEdges);
-        } else {
-          this.siteX = 0;
-        }
-      });
-      return {
-        list,
-        edges,
-      };
-    },
-    onProductChange(item, transType) {
 
     }
-  },
-};
-</script>
-<style lang="scss" scoped>
-#container {
-  // touch-action: none;
-  /* 禁用默认触摸滚动 */
-  width: 100%;
-  height: 1000px;
-  border: 1px solid #ccc;
-  overflow: hidden;
-
 }
-</style>
+
+
+</script>
+<style scoped>
+#container {
+    touch-action: none;
+    /* 禁用默认触摸滚动 */
+    width: 100%;
+    height: calc(100vh - 150px);
+    border: 1px solid #ccc;
+    overflow: hidden;
+}
+
+
+#container>>>.g6-component-tooltip {
+    background: #333;
+    color: #fff;
+    padding: 0 8px;
+}
+
+canvas {
+    cursor: pointer !important;
+}
+</style>
\ No newline at end of file