Merge pull request '组批次规则图第一版' (#8) from develop-组批次规则拓扑图 into master
Reviewed-on: http://git.xdadan.loc/tanex/emis-frontend/pulls/8
This commit is contained in:
wuteng
commit
0bb637031f
@ -41,6 +41,7 @@
|
|||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@amap/amap-jsapi-loader": "^1.0.1",
|
"@amap/amap-jsapi-loader": "^1.0.1",
|
||||||
|
"@antv/g6": "^4.8.25",
|
||||||
"@fingerprintjs/fingerprintjs": "^4.3.0",
|
"@fingerprintjs/fingerprintjs": "^4.3.0",
|
||||||
"@riophae/vue-treeselect": "0.4.0",
|
"@riophae/vue-treeselect": "0.4.0",
|
||||||
"axios": "0.24.0",
|
"axios": "0.24.0",
|
||||||
|
|||||||
@ -59,3 +59,16 @@ export function delEmisTransPlanRule(id) {
|
|||||||
method: 'delete'
|
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'
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|||||||
265
src/views/emis/emisTransPlanRuleTopoGraph/index.vue
Normal file
265
src/views/emis/emisTransPlanRuleTopoGraph/index.vue
Normal file
@ -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>
|
||||||
Loading…
Reference in New Issue
Block a user