From 5e3b8b3597504932bd92f1508a519539c7f62345 Mon Sep 17 00:00:00 2001
From: wuteng <419274783@qq.com>
Date: Mon, 30 Jun 2025 18:51:31 +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=E7=AC=AC=E4=B8=80=E7=89=88?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json                                  |   1 +
 src/api/emis/emisTransPlanRule.js             |  13 +
 .../emis/emisTransPlanRuleTopoGraph/index.vue | 265 ++++++++++++++++++
 3 files changed, 279 insertions(+)
 create mode 100644 src/views/emis/emisTransPlanRuleTopoGraph/index.vue

diff --git a/package.json b/package.json
index b7ae8df5..c8bb2a54 100644
--- a/package.json
+++ b/package.json
@@ -40,6 +40,7 @@
   },
   "dependencies": {
     "@amap/amap-jsapi-loader": "^1.0.1",
+    "@antv/g6": "^4.8.25",
     "@fingerprintjs/fingerprintjs": "^4.3.0",
     "@riophae/vue-treeselect": "0.4.0",
     "axios": "0.24.0",
diff --git a/src/api/emis/emisTransPlanRule.js b/src/api/emis/emisTransPlanRule.js
index c4af6642..9fc09f49 100644
--- a/src/api/emis/emisTransPlanRule.js
+++ b/src/api/emis/emisTransPlanRule.js
@@ -59,3 +59,16 @@ export function delEmisTransPlanRule(id) {
     method: 'delete'
   })
 }
+
+//获取组批次规则图数据
+export function emisTransPlanRuleTree(data) {
+  console.log('data',data);
+  return request({
+    url: '/emis/emisTransPlanRule/tree',
+    params: {
+      lineCode: data.lineCode,
+      productType: data.productType,
+    },
+    method: 'get'
+  })
+}
diff --git a/src/views/emis/emisTransPlanRuleTopoGraph/index.vue b/src/views/emis/emisTransPlanRuleTopoGraph/index.vue
new file mode 100644
index 00000000..e2c04f7a
--- /dev/null
+++ b/src/views/emis/emisTransPlanRuleTopoGraph/index.vue
@@ -0,0 +1,265 @@
+<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>
+</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 { emisTransPlanRuleTree } from "@/api/emis/emisTransPlanRule";
+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();
+    },
+    /** 重置按钮操作 */
+    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,
+        });
+        this.graph.render();
+      }, 1000);
+      loadingInstance.close();
+    },
+    //获取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',
+            });
+          }
+        }
+        //如果存在子节点
+        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>