From ae6c6e6382cb529d2a22ec658d825d0a74abc9be Mon Sep 17 00:00:00 2001
From: wuteng <419274783@qq.com>
Date: Thu, 10 Jul 2025 18:05:32 +0800
Subject: [PATCH] =?UTF-8?q?=E7=BA=BF=E8=B7=AF=E4=BA=A7=E5=93=81=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6=E6=8D=A2=E6=88=90=E5=8C=85=E5=90=AB=E5=81=9C=E7=94=A8?=
 =?UTF-8?q?=E7=9A=84=E9=80=89=E9=A1=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../emis/emisTransPlanRuleTopoGraph/index.vue | 220 +++++++++++-------
 1 file changed, 141 insertions(+), 79 deletions(-)

diff --git a/src/views/emis/emisTransPlanRuleTopoGraph/index.vue b/src/views/emis/emisTransPlanRuleTopoGraph/index.vue
index de362e35..1e7d811e 100644
--- a/src/views/emis/emisTransPlanRuleTopoGraph/index.vue
+++ b/src/views/emis/emisTransPlanRuleTopoGraph/index.vue
@@ -5,33 +5,44 @@
             v-show="showSearch" @search="handleQuery" @reset="resetQuery">
             <!-- 线路查询 -->
             <el-form-item label="线路" prop="lineCode">
-                <TransLinePicker v-model="queryParams.lineCode" isInitiated="true"></TransLinePicker>
+                <TransLineAllPicker v-model="queryParams.lineCode" isInitiated="true"></TransLineAllPicker>
             </el-form-item>
             <el-form-item label="产品类型" prop="productType">
-                <TransProductPicker placeholder="产品类型" v-model="queryParams.productType"
-                    :transLineCode="queryParams.lineCode" @onChange="onProductChange"></TransProductPicker>
+                <TransProductAllPicker placeholder="产品类型" v-model="queryParams.productType"
+                    :transLineCode="queryParams.lineCode" @onChange="onProductChange"></TransProductAllPicker>
             </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 slot="toolbar">
+            <el-row :gutter="10" class="mb8">
+                <el-col :span="1.5">
+                    <el-button type="warning" plain icon="el-icon-download" size="mini"
+                        @click="exportImage">导 出</el-button>
+                </el-col>
+            </el-row>
+        </div>
+        <div id="container">
+            <!-- mini 地图 -->
+            <div class="minimap-container" id="minimap"></div>
+        </div>
     </div>
 </template>
 
 <script>
 import G6 from "@antv/g6";
-import TransProductPicker from "@/views/emis/EmisBaseTools/TransProductPicker.vue";
-import TransLinePicker from "@/views/emis/EmisBaseTools/TransLinePicker.vue";
+import TransLineAllPicker from '@/views/emis/EmisBaseTools/TransLineAllPicker.vue';
+import TransProductAllPicker from '@/views/emis/EmisBaseTools/TransProductAllPicker.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,
+        TransLineAllPicker,
+        TransProductAllPicker,
         EmisSiteSimplePicker
     },
     data() {
@@ -133,49 +144,57 @@ export default {
                 productName: ''
             }
         },
-        onProductChange(item, transType) {
-            this.queryParams.productName = item.prodName;
+        onProductChange(item) {
+            if (item) {
+                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'],
+            // 节点操作菜单
+            const 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");
-
+            const minimap = new G6.Minimap({
+            container:'minimap',
+            size: [190, 190],
+            type: 'delegate',
+               delegateStyle: {
+              // 代理元素样式配置
+              fill: '#b12d29',     // 填充色（半透明白色）
+            //   stroke: 'black',                     // 描边色（蓝色）
+               }
+            });
             this.graph = new G6.TreeGraph({
                 container,
-                width: document.getElementById('container').clientWidth + 10, //画布宽度等于浏览器宽度
-                height: document.getElementById('container').clientHeight + 10, //画布高度等于浏览器高度
+                width: document.getElementById('container').clientWidth, //画布宽度等于浏览器宽度
+                height: document.getElementById('container').clientHeight, //画布高度等于浏览器高度
                 fitView: false,
                 // fitViewPadding: [10, 50, 10, 50],
                 animate: true,
                 // plugins: [this.treeTooltip(), this.contextMenu],
-                plugins: [this.treeTooltip()],
+                plugins: [this.treeTooltip(), minimap],
                 defaultNode: {
                     type: "rect",
                     size: [250, 80],
-                    collapsed: false,
+                    collapsed: false, // false 展开  true 收起
                     style: {
                         // fill: "#fff",
                         // lineWidth: 2,
@@ -401,44 +420,45 @@ export default {
                 // else minDisNode = undefined;
                 // console.log('minDisNode2',minDisNode)
             }); 
-            this.graph.on('node:dragend', (e) => {
-                // console.log('dragend')
-                const descriptionDiv = document.createElement('div');
-                descriptionDiv.innerHTML =
-                    'Move a subtree to a new parent by dragging the root node of the subtree.';
-                container.appendChild(descriptionDiv);
-                // console.log('minDisNode', minDisNode)
-                if (!minDisNode) {
-                    descriptionDiv.innerHTML = 'Failed. No node close to the dragged node.';
-                    return;
-                }
-                const item = e.item;
-                const id = item.getID();
-                const data = this.graph.findDataById(id);
-                // if the minDisNode is a descent of the dragged node, return
-                let isDescent = false;
-                const minDisNodeId = minDisNode.getID();
-                // console.log('dragend', minDisNodeId, isDescent, data, id);
-                console.log('目的节点==》',this.graph.findDataById(minDisNodeId)) //目的节点
-                console.log('拖动节点==》', this.graph.findDataById(id)) //拖动节点
-                G6.Util.traverseTree(data, (d) => {
-                    if (d.id === minDisNodeId) isDescent = true;
-                });
-                if (isDescent) {
-                    descriptionDiv.innerHTML = 'Failed. The target node is a descendant of the dragged node.';
-                    return;
-                }
-                this.graph.removeChild(id);
+            // 节点拖动
+            // this.graph.on('node:dragend', (e) => {
+            //     // console.log('dragend')
+            //     const descriptionDiv = document.createElement('div');
+            //     descriptionDiv.innerHTML =
+            //         'Move a subtree to a new parent by dragging the root node of the subtree.';
+            //     container.appendChild(descriptionDiv);
+            //     // console.log('minDisNode', minDisNode)
+            //     if (!minDisNode) {
+            //         descriptionDiv.innerHTML = 'Failed. No node close to the dragged node.';
+            //         return;
+            //     }
+            //     const item = e.item;
+            //     const id = item.getID();
+            //     const data = this.graph.findDataById(id);
+            //     // if the minDisNode is a descent of the dragged node, return
+            //     let isDescent = false;
+            //     const minDisNodeId = minDisNode.getID();
+            //     // console.log('dragend', minDisNodeId, isDescent, data, id);
+            //     console.log('目的节点==》',this.graph.findDataById(minDisNodeId)) //目的节点
+            //     console.log('拖动节点==》', this.graph.findDataById(id)) //拖动节点
+            //     G6.Util.traverseTree(data, (d) => {
+            //         if (d.id === minDisNodeId) isDescent = true;
+            //     });
+            //     if (isDescent) {
+            //         descriptionDiv.innerHTML = 'Failed. The target node is a descendant of the dragged node.';
+            //         return;
+            //     }
+            //     this.graph.removeChild(id);
 
-                setTimeout(() => {
-                    const newParentData = this.graph.findDataById(minDisNodeId);
-                    let newChildren = newParentData.children;
-                    if (newChildren) newChildren.push(data);
-                    else newChildren = [data];
-                    this.graph.updateChildren(newChildren, minDisNodeId);
-                    descriptionDiv.innerHTML = 'Success.';
-                }, 600);
-            });
+            //     setTimeout(() => {
+            //         const newParentData = this.graph.findDataById(minDisNodeId);
+            //         let newChildren = newParentData.children;
+            //         if (newChildren) newChildren.push(data);
+            //         else newChildren = [data];
+            //         this.graph.updateChildren(newChildren, minDisNodeId);
+            //         descriptionDiv.innerHTML = 'Success.';
+            //     }, 600);
+            // });
             // this.graph.data(this.treeData);
             // this.graph.render();
             this.graph.zoom(0.9);
@@ -574,6 +594,35 @@ export default {
                 str = node.label;
             }
             return str;
+        },
+        async exportImage() {
+
+        this.graph.toFullDataURL((res) => {
+        // 为了防止下载的图片影响到G6显示，这里作一个深度拷贝 
+        const canvas = document.getElementById('container').childNodes[1].cloneNode(true);
+        console.log('canvas',document.getElementById('container').childNodes);
+        const img = new Image();
+        img.onload = function () {
+            canvas.width = img.width + 32;
+            canvas.height = img.height + 32;
+            const ctx = canvas.getContext('2d');
+            ctx.fillStyle = '#fff';
+            ctx.fillRect(0, 0, canvas.width, canvas.height);
+            ctx.drawImage(img, 16, 16);
+            // 下载
+            const oA = document.createElement('a');
+            oA.download = '组批次规则图';
+            oA.href = canvas.toDataURL('image/png');
+            document.body.appendChild(oA);
+            oA.click();
+            oA.remove(); // 下载之后把创建的元素删除
+        };
+        img.src = res;
+        }, 'image/png', {
+        imageConfig: {
+            padding: 16
+        }
+        });
         }
 
     }
@@ -588,7 +637,15 @@ export default {
     width: 100%;
     height: calc(100vh - 150px);
     border: 1px solid #ccc;
-    overflow: hidden;
+    position: relative;
+}
+.minimap-container {
+    position: absolute;
+    left: 0;
+    bottom: 0;
+    width: 200px;
+    height: 200px;
+    border: 1px solid #ccc;
 }
 
 
@@ -597,8 +654,13 @@ export default {
     color: #fff;
     padding: 10px;
 }
-
-canvas {
+.minimap-container >>>.g6-minimap-viewport {
+    outline: 2px solid black !important;
+}
+/* canvas {
     cursor: pointer !important;
+} */
+.minimap-container {
+ margin: 0;
 }
 </style>
\ No newline at end of file