diff --git a/src/views/mtm/route_show.vue b/src/views/mtm/route_show.vue
index 95663b62..dd5789dd 100644
--- a/src/views/mtm/route_show.vue
+++ b/src/views/mtm/route_show.vue
@@ -22,7 +22,7 @@
工艺路线流程图
-
+
@@ -124,6 +124,13 @@ export default {
setData(data) {
let that = this;
Object.assign(that.form, data);
+ that.nodes = [];
+ that.edges = [];
+ that.tabsTitle = ['总图'];
+ that.tabsData = {};
+ that.activeName = "总图";
+ // 先挂载查看器显示加载后的空状态,避免子图列表先返回时整块区域空白
+ that.limitedWatch = true;
that.getRoute(that.form.material);
that.getDEGdatas(data.id);
this.getTabsList(data.id);
@@ -135,11 +142,10 @@ export default {
getDEGdatas(id) {
let that = this;
that.$API.mtm.routepack.dag.req(id).then((res) => {
- that.nodes = res.nodes;
- that.edges = res.edges;
that.tabsData['总图'] = res;
- if (!that.limitedWatch) {
- that.limitedWatch = true;
+ // 子图列表与总图并行加载;用户已切到子图时不能再被迟到的总图覆盖
+ if (that.activeName === "总图") {
+ that.showGraph(res);
}
})
},
@@ -156,9 +162,16 @@ export default {
that.tabsData[res[key].name] = res[key];
}
}
- console.log(that.tabsData);
+ const activeGraph = that.tabsData[that.activeName];
+ if (activeGraph) {
+ that.showGraph(activeGraph);
+ }
})
},
+ showGraph(graph) {
+ this.nodes = graph?.nodes || [];
+ this.edges = graph?.edges || [];
+ },
//文件列表加载
getRoute(id) {
this.$API.mtm.route.list
@@ -168,12 +181,10 @@ export default {
});
},
tabshandleClick(val) {
- let that = this;
- let label = val.props.label;
- that.$nextTick(() => {
- that.nodes = that.tabsData[label].nodes;
- that.edges = that.tabsData[label].edges;
- })
+ const graph = this.tabsData[val.props.name || val.props.label];
+ if (graph) {
+ this.showGraph(graph);
+ }
},
},
};
@@ -256,9 +267,16 @@ export default {
flex: 1;
min-height: 0;
}
+.rs-tabs {
+ /* el-tabs 的空 content 默认会 flex-grow,多个流程图时会把下方画布挤出可视区 */
+ flex: 0 0 auto;
+}
.rs-tabs :deep(.el-tabs__header) {
margin: 0 0 8px;
}
+.rs-tabs :deep(.el-tabs__content) {
+ display: none;
+}
.rs-steps {
flex: 1;
min-width: 0;