fix:定义全局组件scDegra

src/components/scDegra.vue

@@ -0,0 +1,250 @@
+<template>
+  <div v-if="visible">
+    <svg id="mySvg" v-if="visible"></svg>
+  </div>
+</template>
+
+<script>
+import dagreD3 from "dagre-d3";
+import * as d3 from "d3";
+
+export default {
+  name: "degraD3",
+  props: {
+    nodes: {
+      type:Array,
+      default:()=>[]
+    },
+    edges:{
+      type:Array,
+      default:()=>[]
+    },
+    rankdir:{
+      type: String,
+      default: "DL",
+    }
+  },
+  data() { 
+    return {
+      g:null,
+      visible:false,
+      isSaving: false,
+      type:""
+    };
+  },
+  watch: {
+    nodes: {
+      handler(val) {
+        console.log(val);
+        this.updateGraph();
+      },
+      deep: true,
+    },
+    edges: {
+      handler(val) {
+        console.log(val);
+        this.updateGraph();
+      },
+      deep: true,
+    },
+  },
+  mounted() {},
+  methods: {
+    open(){
+      this.visible = true;
+      this.handleWatch();
+    },
+    handleWatch() {
+      let that = this;
+      that.$nextTick(() => {
+        if(that.g!==null){
+          that.updataGraph();     
+        }else{
+          that.g = new dagreD3.graphlib.Graph().setGraph({
+            rankdir: that.rankdir,
+            nodesep: 40,
+            edgesep: 25, //两条线之间的距离
+            ranksep: 20, //节点之间的距离
+            marginx: 80,
+            marginy: 10,
+          });
+          // 添加节点
+          that.nodes.forEach((item) => {
+            if(item.id&& item.label){
+              that.g.setNode(item.id, {
+                // 节点标签
+                label: item.label,
+                // 节点形状
+                shape: item.shape,
+                toolText:  item.label,
+                //节点样式
+                style: "fill:#fff;stroke:#000",
+                labelStyle: "fill:#000;",
+                rx: 5, //矩形节点圆角度
+                ry: 5,
+              });
+            }
+          });
+          //流转得到线  链接关系
+          that.edges.forEach((transition0) => {
+            that.g.setEdge(transition0.source,transition0.target,{
+                label: transition0.label,// 边标签
+                style: "fill:#ffffff;stroke:#c0c1c3;stroke-width:1.5px", // 根据后台数据来改变连线的颜色
+              });
+          });
+          // 创建渲染器
+          let render = new dagreD3.render();
+          // 选择 svg 并添加一个g元素作为绘图容器.
+          let svg = d3.select("#mySvg");
+          let inner = svg.append("g");
+          that.inner = inner;
+          // 在绘图容器上运行渲染器生成流程图.
+          render(inner, that.g);
+          let mySvgHeight =document.getElementsByClassName("nodes")[0].getBoundingClientRect().height + 50;
+          let mySvgWdith =document.getElementsByClassName("output")[0].getBoundingClientRect().width+150 ;
+          document.getElementById('mySvg').setAttribute("height", mySvgHeight);
+          document.getElementById('mySvg').setAttribute("width", mySvgWdith);
+        }
+      })
+    },
+    updataGraph(){
+
+    },
+    // 假设你有一个方法来更新节点和边的数据
+    updateGraph() {
+      let that = this;
+      // 清空现有图形
+      that.g.nodes().forEach(function (v) {
+        that.g.removeNode(v);
+      });
+      that.g.edges().forEach(function (e) {
+        that.g.removeEdge(e);
+      });
+
+      // 重新添加节点
+      that.nodes.forEach((item) => {
+        if (item.id && item.label) {
+          that.g.setNode(item.id, {
+            label: item.label,
+            shape: item.shape,
+            toolText: item.label,
+            style: "fill:#fff;stroke:#000",
+            labelStyle: "fill:#000;",
+            rx: 5,
+            ry: 5,
+          });
+        }
+      });
+
+      // 重新添加边
+      that.edges.forEach((transition0) => {
+        that.g.setEdge(transition0.source, transition0.target, {
+          label: transition0.label,
+          style: "fill:#ffffff;stroke:#c0c1c3;stroke-width:1.5px",
+        });
+      });
+      let render = new dagreD3.render();
+      // 渲染更新后的图形
+      render(that.inner, that.g);
+      // 获取新的 SVG 尺寸
+      let mySvgHeight = document.getElementsByClassName("nodes")[0]?.getBoundingClientRect().height + 50;
+      let mySvgWdith = document.getElementsByClassName("output")[0]?.getBoundingClientRect().width + 150;
+
+      // 检查节点和边的容器是否存在
+      if (mySvgHeight && mySvgWdith) {
+        // 设置 SVG 尺寸
+        document.getElementById('mySvg').setAttribute("height", mySvgHeight);
+        document.getElementById('mySvg').setAttribute("width", mySvgWdith);
+      } else {
+        console.log("元素尚未加载，无法更新 SVG 尺寸");
+      }
+    },
+    scaleUp() {
+      var svg = document.getElementById("mySvg");
+      svg.style.transform = "scale(0.5)";
+    }
+  },
+};
+</script>
+<style scoped>
+.treeMain {
+  height: 280px;
+  overflow: auto;
+  border: 1px solid #dcdfe6;
+  margin-bottom: 10px;
+}
+
+::-webkit-scrollbar {
+  width: 10px;
+}
+
+::-webkit-scrollbar-track {
+  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.2);
+  background-color: #fefefe;
+  border-radius: 5px;
+}
+
+::-webkit-scrollbar-thumb {
+  border-radius: 5px;
+  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5);
+  background-color: #f5f5f5;
+}
+
+.svgMark {
+  width: 100%;
+  height: 100%;
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  overflow: auto;
+  margin: 0;
+  z-index: 2000;
+  background: rgba(0, 0, 0, 0.3);
+}
+
+.svgWrapper {
+  background: #fff;
+  width: 800px;
+  margin: 5vh auto;
+  height: 90vh;
+  text-align: center;
+  border-radius: 2px;
+  overflow-y: scroll;
+}
+
+.svgItem {
+  padding: 20px 40px 0;
+  font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB,
+    Microsoft YaHei, Arial, sans-serif;
+  font-size: 18px;
+  display: flex;
+  justify-content: space-between;
+}
+
+svg {
+  font-size: 14px;
+}
+
+.node rect {
+  stroke: #606266;
+  fill: #fff;
+}
+
+.edgePath path {
+  stroke: #606266;
+  fill: #333;
+  stroke-width: 1.5px;
+}
+
+g.conditions > rect {
+  fill: #00ffd0;
+  stroke: #000;
+}
+
+.el-icon-close {
+  cursor: pointer;
+}
+</style>
+

src/scui.js

@@ -28,6 +28,7 @@ import scStatusIndicator from './components/scMini/scStatusIndicator'
 import scTrend from './components/scMini/scTrend'
 import scFire from './components/scOpl/scFire'
 import scScanner from './components/scScanner'
+import scDegra from './components/scDegra'
 
 import auth from './directives/auth'
 import auths from './directives/auths'
@@ -75,6 +76,7 @@ export default {
 		app.component('scIconSelect', scIconSelect);
 		app.component('scEcharts', scEcharts);
 		app.component('scScanner', scScanner);
+		app.component('scDegra', scDegra);
 
 		//注册全局指令
 		app.directive('auth', auth)

src/views/mtm/route_show.vue

@@ -33,7 +33,7 @@
 						>
 							<el-tab-pane :label="item" v-for="item in tabsTitle" :key="item"></el-tab-pane>
 						</el-tabs>
-						<degrad3
+						<scDegra
 							style="margin-top: 50px;"
 							v-if="limitedWatch" 
 							ref="degraDialogs" 
@@ -42,7 +42,7 @@
 							:rankdir="'DL'"
 							@closeDialog="limitedWatch = false"
 							>
-						</degrad3>
+						</scDegra>
 					</el-side>
 					<el-main>
 						<scTable
@@ -81,10 +81,8 @@
 	</el-drawer>
 </template>
 <script>
-import degrad3 from "./../template/degraD3.vue";
 export default {
 	emits: ["success", "closed"],
-	components: { degrad3 },
 	data() {
 		return {
 			loading: false,

src/views/wpm_bx/inm.vue

@@ -234,17 +234,19 @@
 				<el-button type="primary" @click="savePrinter">保存</el-button>
 			</el-footer>
 		</el-dialog>
-		<degraDialog
+		<el-drawer v-model="limitedWatch" title="工艺路线流程图" size="80%" @closeDialog="limitedWatch = false">
-			v-if="limitedWatch" 
+			<scDegra
-			ref="degraDialogs" 
+				v-if="limitedWatch" 
-			:code="showBatch"
+				ref="degraDialogs" 
-			@closeDialog="limitedWatch = false"
+				:nodes="nodes"
-			>
+				:edges="edges"
-		</degraDialog>
+				:rankdir="'LR'"
+				>
+			</scDegra>
+		</el-drawer>
 	</el-container>
 </template>
 <script>
-import degraDialog from "./../template/degraD3.vue";
 import { wmState } from "@/utils/enum.js";
 import materials from "./../mtm/materials.vue";
 import checkDialog from "./check_form.vue";
@@ -263,8 +265,7 @@ export default {
 		materials,
 		checkDialog,
 		showDrawer,
-		scrapDialog,
+		scrapDialog
-		degraDialog
 	},
 	name: "wmaterial",
 	data() {
@@ -287,6 +288,8 @@ export default {
 				permission: false,
 				inmRecord:false,
 			},
+			nodes:[],
+			edges:[],
 			wprList:[],
 			tableData: [],
 			selection: [],
@@ -356,11 +359,14 @@ export default {
 		},
 		handleWatch(row) {
 			let that = this;
-			that.showBatch = row.batch;
+			that.$API.wpm.batchlog.dag.req({batch:row.batch}).then((res) => {
-			that.limitedWatch = true;
+			    that.nodes = res.nodes;
-			that.$nextTick(() => {
+				that.edges = res.edges;
-				that.$refs.degraDialogs.open('batch');
+				that.limitedWatch = true;
-			});
+				that.$nextTick(() => {
+					that.$refs.degraDialogs.open();
+				});
+			})
 		},
 		add() {
 			this.dialog.save = true;