aike/emis-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

线路产品组件换成包含停用的选项

Browse Source
This commit is contained in:
wuteng 2025-07-10 18:05:32 +08:00
parent 3575a3bc84
commit ae6c6e6382
1 changed files with 141 additions and 79 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

220
src/views/emis/emisTransPlanRuleTopoGraph/index.vue
View File

@ -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>