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"> v-show="showSearch" @search="handleQuery" @reset="resetQuery">
<!-- 线路查询 --> <!-- 线路查询 -->
<el-form-item label="线路" prop="lineCode"> <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>
<el-form-item label="产品类型" prop="productType"> <el-form-item label="产品类型" prop="productType">
<TransProductPicker placeholder="产品类型" v-model="queryParams.productType" <TransProductAllPicker placeholder="产品类型" v-model="queryParams.productType"
:transLineCode="queryParams.lineCode" @onChange="onProductChange"></TransProductPicker> :transLineCode="queryParams.lineCode" @onChange="onProductChange"></TransProductAllPicker>
</el-form-item> </el-form-item>
<el-form-item label="始发网点" prop="startSiteCode"> <el-form-item label="始发网点" prop="startSiteCode">
<EmisSiteSimplePicker placeholder="始发网点" v-model="queryParams.startSiteCode"></EmisSiteSimplePicker> <EmisSiteSimplePicker placeholder="始发网点" v-model="queryParams.startSiteCode"></EmisSiteSimplePicker>
</el-form-item> </el-form-item>
</SearchForm> </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> </div>
</template> </template>
<script> <script>
import G6 from "@antv/g6"; import G6 from "@antv/g6";
import TransProductPicker from "@/views/emis/EmisBaseTools/TransProductPicker.vue"; import TransLineAllPicker from '@/views/emis/EmisBaseTools/TransLineAllPicker.vue';
import TransLinePicker from "@/views/emis/EmisBaseTools/TransLinePicker.vue"; import TransProductAllPicker from '@/views/emis/EmisBaseTools/TransProductAllPicker.vue';
import EmisSiteSimplePicker from '@/views/emis/EmisBaseTools/EmisSiteSimplePicker.vue'; import EmisSiteSimplePicker from '@/views/emis/EmisBaseTools/EmisSiteSimplePicker.vue';
import { emisTransPlanRuleTree } from "@/api/emis/emisTransPlanRule"; import { emisTransPlanRuleTree } from "@/api/emis/emisTransPlanRule";
import { fill } from "lodash";
export default { export default {
name: "EmisTransPlanRuleTopoGraph", name: "EmisTransPlanRuleTopoGraph",
components: { components: {
TransProductPicker, TransLineAllPicker,
TransLinePicker, TransProductAllPicker,
EmisSiteSimplePicker EmisSiteSimplePicker
}, },
data() { data() {
@ -133,49 +144,57 @@ export default {
productName: '' productName: ''
} }
}, },
onProductChange(item, transType) { onProductChange(item) {
this.queryParams.productName = item.prodName; if (item) {
this.queryParams.productName = item.prodName;
}
}, },
drawTreeGraph() { drawTreeGraph() {
this.contextMenu = new G6.Menu({ // 节点操作菜单
getContent(evt) { const contextMenu = new G6.Menu({
getContent(evt) {
return ` return `
<h3>操作节点</h3> <h3>操作节点</h3>
<button class='edit-btn'>编辑</button> <button class='edit-btn'>编辑</button>
<button class='del-btn'>删除</button> <button class='del-btn'>删除</button>
`; `;
}, },
handleMenuClick: (target, item) => { handleMenuClick: (target, item) => {
console.log(target, item); console.log(target, item);
}, },
// offsetX and offsetY include the padding of the parent container // offsetX and offsetY include the padding of the parent container
// 需要加上父级容器的 padding-left 16 与自身偏移量 10 // 需要加上父级容器的 padding-left 16 与自身偏移量 10
offsetX: 16 + 10, offsetX: 16 + 10,
// 需要加上父级容器的 padding-top 24 、画布兄弟元素高度、与自身偏移量 10 // 需要加上父级容器的 padding-top 24 、画布兄弟元素高度、与自身偏移量 10
offsetY: 0, offsetY: 0,
// the types of items that allow the menu show up // the types of items that allow the menu show up
// 在哪些类型的元素上响应 // 在哪些类型的元素上响应
itemTypes: ['node', 'edge', 'canvas'], itemTypes: ['node', 'edge', 'canvas'],
}); });
const minimap = new G6.Minimap({
if (this.graph) this.graph.destroy(); container:'minimap',
const container = document.getElementById("container"); size: [190, 190],
type: 'delegate',
delegateStyle: {
// 代理元素样式配置
fill: '#b12d29', // 填充色（半透明白色）
// stroke: 'black', // 描边色（蓝色）
}
});
this.graph = new G6.TreeGraph({ this.graph = new G6.TreeGraph({
container, container,
width: document.getElementById('container').clientWidth + 10, //画布宽度等于浏览器宽度 width: document.getElementById('container').clientWidth, //画布宽度等于浏览器宽度
height: document.getElementById('container').clientHeight + 10, //画布高度等于浏览器高度 height: document.getElementById('container').clientHeight, //画布高度等于浏览器高度
fitView: false, fitView: false,
// fitViewPadding: [10, 50, 10, 50], // fitViewPadding: [10, 50, 10, 50],
animate: true, animate: true,
// plugins: [this.treeTooltip(), this.contextMenu], // plugins: [this.treeTooltip(), this.contextMenu],
plugins: [this.treeTooltip()], plugins: [this.treeTooltip(), minimap],
defaultNode: { defaultNode: {
type: "rect", type: "rect",
size: [250, 80], size: [250, 80],
collapsed: false, collapsed: false, // false 展开 true 收起
style: { style: {
// fill: "#fff", // fill: "#fff",
// lineWidth: 2, // lineWidth: 2,
@ -401,44 +420,45 @@ export default {
// else minDisNode = undefined; // else minDisNode = undefined;
// console.log('minDisNode2',minDisNode) // console.log('minDisNode2',minDisNode)
}); });
this.graph.on('node:dragend', (e) => { // 节点拖动
// console.log('dragend') // this.graph.on('node:dragend', (e) => {
const descriptionDiv = document.createElement('div'); // // console.log('dragend')
descriptionDiv.innerHTML = // const descriptionDiv = document.createElement('div');
'Move a subtree to a new parent by dragging the root node of the subtree.'; // descriptionDiv.innerHTML =
container.appendChild(descriptionDiv); // 'Move a subtree to a new parent by dragging the root node of the subtree.';
// console.log('minDisNode', minDisNode) // container.appendChild(descriptionDiv);
if (!minDisNode) { // // console.log('minDisNode', minDisNode)
descriptionDiv.innerHTML = 'Failed. No node close to the dragged node.'; // if (!minDisNode) {
return; // descriptionDiv.innerHTML = 'Failed. No node close to the dragged node.';
} // return;
const item = e.item; // }
const id = item.getID(); // const item = e.item;
const data = this.graph.findDataById(id); // const id = item.getID();
// if the minDisNode is a descent of the dragged node, return // const data = this.graph.findDataById(id);
let isDescent = false; // // if the minDisNode is a descent of the dragged node, return
const minDisNodeId = minDisNode.getID(); // let isDescent = false;
// console.log('dragend', minDisNodeId, isDescent, data, id); // const minDisNodeId = minDisNode.getID();
console.log('目的节点==》',this.graph.findDataById(minDisNodeId)) //目的节点 // // console.log('dragend', minDisNodeId, isDescent, data, id);
console.log('拖动节点==》', this.graph.findDataById(id)) //拖动节点 // console.log('目的节点==》',this.graph.findDataById(minDisNodeId)) //目的节点
G6.Util.traverseTree(data, (d) => { // console.log('拖动节点==》', this.graph.findDataById(id)) //拖动节点
if (d.id === minDisNodeId) isDescent = true; // 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.'; // if (isDescent) {
return; // descriptionDiv.innerHTML = 'Failed. The target node is a descendant of the dragged node.';
} // return;
this.graph.removeChild(id); // }
// this.graph.removeChild(id);
setTimeout(() => { // setTimeout(() => {
const newParentData = this.graph.findDataById(minDisNodeId); // const newParentData = this.graph.findDataById(minDisNodeId);
let newChildren = newParentData.children; // let newChildren = newParentData.children;
if (newChildren) newChildren.push(data); // if (newChildren) newChildren.push(data);
else newChildren = [data]; // else newChildren = [data];
this.graph.updateChildren(newChildren, minDisNodeId); // this.graph.updateChildren(newChildren, minDisNodeId);
descriptionDiv.innerHTML = 'Success.'; // descriptionDiv.innerHTML = 'Success.';
}, 600); // }, 600);
}); // });
// this.graph.data(this.treeData); // this.graph.data(this.treeData);
// this.graph.render(); // this.graph.render();
this.graph.zoom(0.9); this.graph.zoom(0.9);
@ -574,6 +594,35 @@ export default {
str = node.label; str = node.label;
} }
return str; 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%; width: 100%;
height: calc(100vh - 150px); height: calc(100vh - 150px);
border: 1px solid #ccc; 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; color: #fff;
padding: 10px; padding: 10px;
} }
.minimap-container >>>.g6-minimap-viewport {
canvas { outline: 2px solid black !important;
}
/* canvas {
cursor: pointer !important; cursor: pointer !important;
} */
.minimap-container {
margin: 0;
} }
</style> </style>