diff --git a/src/components/scDegra.vue b/src/components/scDegra.vue index fb7def1d..21fba9e5 100644 --- a/src/components/scDegra.vue +++ b/src/components/scDegra.vue @@ -1,6 +1,6 @@ @@ -12,143 +12,71 @@ export default { name: "degraD3", props: { nodes: { - type:Array, - default:()=>[] + type: Array, + default: () => [], }, - edges:{ - type:Array, - default:()=>[] + edges: { + type: Array, + default: () => [], }, - rankdir:{ + rankdir: { type: String, default: "DL", - } + }, }, - data() { + data() { return { - g:null, - visible:false, - isSaving: false, - type:"" + g: null, + inner: null, + render: null, }; }, watch: { nodes: { - handler(val) { - console.log(val); + handler() { this.updateGraph(); }, deep: true, }, edges: { - handler(val) { - console.log(val); + handler() { this.updateGraph(); }, deep: true, }, }, - mounted() {}, + mounted() { + this.initGraph(); + }, methods: { - open(){ - this.visible = true; - this.handleWatch(); - }, - handleWatch() { - let that = this; - that.$nextTick(() => { - if(that.g!==null){ - that.updateGraph(); - }else{ - that.g = new dagreD3.graphlib.Graph({multigraph: true}).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,// 边标签 - id: transition0.id, - style: "fill:#ffffff;stroke:#c0c1c3;stroke-width:1.5px", // 根据后台数据来改变连线的颜色 - },transition0.id); - }); - // 创建渲染器 - 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); - svg.selectAll("g.node").on("click", function(event, d) { - svg.selectAll("g.node").style("fill", "white"); - svg.selectAll("g.node")._groups[0].forEach(item=>{ - console.log('item',item); - d3.select(item).select("rect").style("fill", "#fff"); // 修改为白色 - }) - // 改变节点的颜色 - const node = d3.select(this); - const currentColor = node.select("rect").style("fill") - // 判断当前颜色，如果是默认颜色，就修改为新的颜色 - if (currentColor === "rgb(255, 255, 255)") { // 如果当前是白色 - node.select("rect").style("fill", "#f00"); // 修改为红色 - } else { - node.select("rect").style("fill", "#fff"); // 否则恢复白色 - } - // 调用自定义方法 - onNodeClick(d); - }); - // 自定义方法：在节点点击时触发 - function onNodeClick(nodeData) { - let batch = ""; - that.nodes.forEach((item) => { - if (item.id === nodeData){ - batch = item.label; - } - }) - that.$emit("nodeClick", batch); - // 你可以在这里处理更多的逻辑，例如显示一个提示框，更新图形状态等 - } - } - }) - }, - // 假设你有一个方法来更新节点和边的数据 - updateGraph() { - let that = this; - // 清空现有图形 - that.g.nodes().forEach(function (v) { - that.g.removeNode(v); - }); - that.g.edges().forEach(function (e) { - that.g.removeEdge(e); + /** 初始化图 */ + initGraph() { + this.g = new dagreD3.graphlib.Graph({ multigraph: true }).setGraph({ + rankdir: this.rankdir, + nodesep: 40, + edgesep: 25, + ranksep: 20, + marginx: 80, + marginy: 10, }); - // 重新添加节点 + this.render = new dagreD3.render(); + let svg = d3.select("#mySvg"); + this.inner = svg.append("g"); + + this.renderGraph(); + this.bindNodeClick(svg); + }, + + /** 渲染节点和边 */ + renderGraph() { + let that = this; + + // 清空原有节点和边 + that.g.nodes().forEach((v) => that.g.removeNode(v)); + that.g.edges().forEach((e) => that.g.removeEdge(e)); + + // 添加节点 that.nodes.forEach((item) => { if (item.id && item.label) { that.g.setNode(item.id, { @@ -163,93 +91,83 @@ export default { } }); - // 重新添加边 - 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; + // 添加边（带唯一 key 和颜色） + that.edges.forEach((edge, index) => { + let edgeColor = "green"; // 默认绿色 + if (edge.label === "驳回") edgeColor = "red"; + if (edge.label === "退回") edgeColor = "red"; + + that.g.setEdge( + edge.source, + edge.target, + { + label: edge.label, + id: edge.id, + style: `fill:#ffffff;stroke:${edgeColor};stroke-width:1.5px`, + curve: d3.curveBasis, + minlen: 1 + index % 3, + }, + `${edge.source}_${edge.target}_${edge.id}` + ); + }); + + // 渲染图 + this.render(this.inner, this.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 尺寸"); + document.getElementById("mySvg").setAttribute("height", mySvgHeight); + document.getElementById("mySvg").setAttribute("width", mySvgWdith); } }, + + /** 更新图形 */ + updateGraph() { + if (!this.g) return; + this.renderGraph(); + }, + + /** 绑定点击事件 */ + bindNodeClick(svg) { + let that = this; + svg.selectAll("g.node").on("click", function (event, d) { + svg.selectAll("g.node")._groups[0].forEach((item) => { + d3.select(item).select("rect").style("fill", "#fff"); + }); + + const node = d3.select(this); + const currentColor = node.select("rect").style("fill"); + if (currentColor === "rgb(255, 255, 255)") { + node.select("rect").style("fill", "#f00"); + } else { + node.select("rect").style("fill", "#fff"); + } + + let batch = ""; + that.nodes.forEach((item) => { + if (item.id === d) batch = item.label; + }); + that.$emit("nodeClick", batch); + }); + }, + + /** 缩放演示 */ scaleUp() { var svg = document.getElementById("mySvg"); svg.style.transform = "scale(0.5)"; - } + }, }, }; + - diff --git a/src/views/wf/configuration.vue b/src/views/wf/configuration.vue index 3ae45b41..51f540a5 100644 --- a/src/views/wf/configuration.vue +++ b/src/views/wf/configuration.vue @@ -1,18 +1,35 @@ @@ -20,13 +37,15 @@ import field from './field' import state from './state' import transform from './transform' + import degraDialog from "./degraD3_2.vue"; export default { name: 'configuration', components: { field, state, - transform + transform, + degraDialog }, data() { return { @@ -42,6 +61,9 @@ debugger; console.log(tab,event); }, + refreshGraph(){ + this.$refs.degraDialogs.init(); + } } } diff --git a/src/views/wf/degraD3.vue b/src/views/wf/degraD3.vue index 98b198e5..2153d92e 100644 --- a/src/views/wf/degraD3.vue +++ b/src/views/wf/degraD3.vue @@ -1,10 +1,5 @@ \ No newline at end of file diff --git a/src/views/wf/state.vue b/src/views/wf/state.vue index 498bcb92..6571fafe 100644 --- a/src/views/wf/state.vue +++ b/src/views/wf/state.vue @@ -584,6 +584,7 @@ export default { } else { that.isSaveing = false; that.dialogVisible = false; + this.$emit("success") that.getList(); } // this.$refs.Form.validate((valid) => { @@ -622,6 +623,7 @@ export default { }, handleDelete(row) { this.$API.wf.state.delete.req(row.id).then((res) => { + this.$emit("success") this.getList(); }); }, diff --git a/src/views/wf/transform.vue b/src/views/wf/transform.vue index a32a24f0..033700c0 100644 --- a/src/views/wf/transform.vue +++ b/src/views/wf/transform.vue @@ -155,7 +155,7 @@ }], addForm: { name: '', - timer: '', + timer: 0, source_state: '', destination_state: '', condition_expression: {}, @@ -198,6 +198,7 @@ }, handleDelete(row) { this.$API.wf.transition.delete.req(row.id).then(res=>{ + this.$emit("success") this.getList() }) }, @@ -224,6 +225,7 @@ that.isSaveing = false; }else{ that.isSaveing = false; + this.$emit("success") that.dialogVisible = false; that.getList(); } diff --git a/src/views/wf/workflow.vue b/src/views/wf/workflow.vue index 2736f0e1..a609d75e 100644 --- a/src/views/wf/workflow.vue +++ b/src/views/wf/workflow.vue @@ -28,7 +28,11 @@ - + + + - - + + + +