组批次规则图第一版
This commit is contained in:
wuteng
parent
2fdd4547c1
commit
5e3b8b3597
@ -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",
|
||||
|
||||
@ -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'
|
||||
})
|
||||
}
|
||||
|
||||
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