From 14112fc388266e62ff6028d0a6329a61fdebf77c Mon Sep 17 00:00:00 2001 From: xiangpei <xiangpei@timesnew.cn> Date: 星期二, 21 一月 2025 03:47:55 +0800 Subject: [PATCH] 工程建设项目全生命周期推荐流程 --- src/views/temp/index.vue | 751 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++ package.json | 1 2 files changed, 752 insertions(+), 0 deletions(-) diff --git a/package.json b/package.json index e8042cf..4d00bf2 100644 --- a/package.json +++ b/package.json @@ -36,6 +36,7 @@ "url": "https://gitee.com/y_project/RuoYi-Vue.git" }, "dependencies": { + "@antv/g6": "^4.8.21", "@riophae/vue-treeselect": "0.4.0", "axios": "0.28.1", "bpmn-js": "^11.1.0", diff --git a/src/views/temp/index.vue b/src/views/temp/index.vue new file mode 100644 index 0000000..23630f5 --- /dev/null +++ b/src/views/temp/index.vue @@ -0,0 +1,751 @@ +<template> + <div> + <div class="g6-x" id="containerG6" ref="containerG6"></div> + </div> +</template> + +<script> +import G6 from '@antv/g6' + +export default { + name: "tempIndex", + data() { + return { + graph: null, + // 銆愭楠�3銆� 鍑嗗鏁版嵁 + graphData: { + // 瀹氫箟鏈夊灏戣妭鐐� + nodes: [ + { + id: '1', + x: -700, + label: '姒俓n蹇礬n绛朶n鍒抃n(6涓�)', + anchorPoints: [[1,0.5]], + style: { + width: 50, + height: 150 + }, + }, + { + id: '2', + x: -550, + y: -100, + label: '椤圭洰\n鎷熼�塡n鍧�(\n鑰曞湴\n璇勪环)\n(8涓�)', + anchorPoints: [[0,0.5],[1,0.5]], + style: { + width: 50, + height: 150 + }, + }, + { + id: '3', + x: -550, + y: 200, + label: '璧刓n閲慭n鏉n婧怽n(20涓�)', + anchorPoints: [[0,0.5],[1,0.5]], + style: { + width: 50, + height: 150 + }, + }, + { + id: '4', + x: -420, + y: 50, + label: '缂朶n鍒禱n棰刓n鍙痋n鐮擻n(8涓�)', + anchorPoints: [[0,0.5],[1,0.5]], + style: { + width: 50, + height: 150 + }, + }, + { + id: '5', + x: -300, + y: 50, + label: '椤圭洰\n闇�姹俓n鍗曚綅\n鍙婇」\n鐩笟\n涓诲唴\n閮ㄥ喅\n绛�(2涓�)', + anchorPoints: [[0,0.5]], + style: { + width: 50, + height: 150 + }, + }, + { + id: '6', + x: -300, + y: 50, + label: '闆哱n涓璡n鍒漒n瀹n(1涓�)', + anchorPoints: [[0,0.5],[1,0.5]], + style: { + width: 50, + height: 150 + }, + }, + { + id: '7', + x: -180, + y: 200, + label: '鍙痋n鐮擻n缂朶n鍒禱n璇刓n瀹�(3涓�)', + anchorPoints: [[0,0.5],[1,0.5]], + style: { + width: 50, + height: 150 + }, + }, + { + id: '8', + x: -180, + y: -100, + label: '绀綷n浼歕n椋嶾n闄‐n璇刓n浼�(3涓�)', + anchorPoints: [[0,0.5],[1,0.5]], + style: { + width: 50, + height: 150 + }, + }, + { + id: '9', + x: -20, + y: 50, + label: '鎶昞n鍐砛n浼歕n瀹n浼�', + anchorPoints: [[0,0.5],[1,0.5]], + style: { + width: 50, + height: 150 + }, + }, + { + id: '10', + x: 100, + y: 50, + label: '鍥絓n璧刓n渚媆n浼歕n瀹n璁甛n(1涓�)', + anchorPoints: [[0,0.5],[1,0.5]], + style: { + width: 50, + height: 150 + }, + }, + { + id: '11', + x: 220, + y: 50, + label: '甯竆n鍔n浼歕n瀹n璁甛n(1涓�)', + anchorPoints: [[0,0.5],[1,0.5]], + style: { + width: 50, + height: 150 + }, + }, + { + id: '12', + x: 340, + y: -100, + label: '绔媆n椤筡n(6涓�)', + anchorPoints: [[0,0.5],[1,0.5]], + style: { + width: 50, + height: 150 + }, + }, + { + id: '13', + x: 340, + y: 200, + label: '閫塡n鍧�\n(3涓�)', + anchorPoints: [[0,0.5],[1,0.5]], + style: { + width: 50, + height: 150 + }, + }, + { + id: '14', + x: 500, + y: -400, + label: '鐜瘎(12涓�)', + anchorPoints: [[0,0.5],[1,0.5]], + style: { + width: 150, + height: 50 + }, + }, + { + id: '15', + x: 500, + y: -340, + label: '鑺傝兘瀹℃煡(7涓�)', + anchorPoints: [[0,0.5],[1,0.5]], + style: { + width: 150, + height: 50 + }, + }, + { + id: '16', + x: 500, + y: -280, + label: '鏂囧嫟(6涓�)', + anchorPoints: [[0,0.5],[1,0.5]], + style: { + width: 150, + height: 50 + }, + }, + { + id: '17', + x: 500, + y: -220, + label: '瀹夎瘎(8涓�)', + anchorPoints: [[0,0.5],[1,0.5]], + style: { + width: 150, + height: 50 + }, + }, + { + id: '18', + x: 500, + y: -160, + label: '鍦扮伨(2涓�)', + anchorPoints: [[0,0.5],[1,0.5]], + style: { + width: 150, + height: 50 + }, + }, + { + id: '19', + x: 500, + y: -100, + label: '琛屾椽璁鸿瘉(1涓�)', + anchorPoints: [[0,0.5],[1,0.5]], + style: { + width: 150, + height: 50 + }, + }, + { + id: '20', + x: 500, + y: -40, + label: '姘翠繚(14涓�)', + anchorPoints: [[0,0.5],[1,0.5]], + style: { + width: 150, + height: 50 + }, + }, + { + id: '21', + x: 450, + y: 100, + label: '鍦焅n鍦癨n鎶n寰侀」\n(6涓�)', + anchorPoints: [[0,0.5],[1,0.5]], + style: { + width: 50, + height: 150 + }, + }, + { + id: '22', + x: 650, + y: 0, + label: '寰乗n鍦癨n鎷哱n杩乗n(18涓�)', + anchorPoints: [[0,0.5],[1,0.5]], + style: { + width: 50, + height: 150 + }, + }, + { + id: '23', + x: 770, + y: 0, + label: '鍑�\n鍦癨n瀹n鏍竆n(5涓�)', + anchorPoints: [[0,0.5],[1,0.5]], + style: { + width: 50, + height: 150 + }, + }, + { + id: '24', + x: 890, + y: 0, + label: '鍦焅n绠n浼歕n瀹n璁甛n(2涓�)', + anchorPoints: [[0,0.5],[1,0.5]], + style: { + width: 50, + height: 150 + }, + }, + { + id: '25', + x: 1010, + y: 0, + label: '鍦焅n鍦癨n渚沑n搴擻n(9涓�)', + anchorPoints: [[0,0.5],[1,0.5]], + style: { + width: 50, + height: 150 + }, + }, + { + id: '26', + x: 650, + y: 200, + label: '鍦癨n鍕榎n鏂筡n瀹塡n璁綷n璁n(3涓�)', + anchorPoints: [[0,0.5],[1,0.5]], + style: { + width: 50, + height: 150 + }, + }, + { + id: '27', + x: 770, + y: 200, + label: '瑙刓n濮擻n浼歕n瀹n璁甛n(2涓�)', + anchorPoints: [[0,0.5],[1,0.5]], + style: { + width: 50, + height: 150 + }, + }, + { + id: '28', + x: 890, + y: 200, + label: '宸n瑙刓n璇乗n鍔瀄n鐞哱n(4涓�)', + anchorPoints: [[0,0.5],[1,0.5]], + style: { + width: 50, + height: 150 + }, + }, + { + id: '29', + x: 1010, + y: 200, + label: '鏂絓n宸n鍥綷n璁綷n璁n瀹n鏌n(16涓�)', + anchorPoints: [[0,0.5],[1,0.5]], + style: { + width: 50, + height: 150 + }, + }, + { + id: '30', + x: 1130, + y: 100, + label: '鏂絓n宸n鎷沑n鏍嘰n(11涓�)', + anchorPoints: [[0,0.5],[1,0.5]], + style: { + width: 50, + height: 150 + }, + }, + { + id: '31', + x: 1250, + y: 100, + label: '鏂絓n宸n璁竆n鍙痋n璇乗n鍔瀄n鐞哱n(10涓�)', + anchorPoints: [[0,0.5],[1,0.5]], + style: { + width: 50, + height: 150 + }, + }, + { + id: '32', + x: 1370, + y: 100, + label: '寮�\n宸n(4涓�)', + anchorPoints: [[0,0.5],[1,0.5]], + style: { + width: 50, + height: 150 + }, + }, + { + id: '33', + x: 1490, + y: 100, + label: '鍩篭n纭�\n鏂絓n宸n(47涓�)', + anchorPoints: [[0,0.5],[1,0.5]], + style: { + width: 50, + height: 150 + }, + }, + { + id: '34', + x: 1610, + y: 100, + label: '涓籠n浣揬n寤篭n璁綷n(60涓�)', + anchorPoints: [[0,0.5],[1,0.5]], + style: { + width: 50, + height: 150 + }, + }, + { + id: '35', + x: 1730, + y: 100, + label: '璁綷n澶嘰n瀹塡n瑁匼n鎴朶n瑁匼n楗癨n瑁匼n淇甛n(43涓�)', + anchorPoints: [[0,0.5],[1,0.5]], + style: { + width: 50, + height: 150 + }, + }, + { + id: '36', + x: 1850, + y: 100, + label: '绔n宸n楠孿n鏀�', + anchorPoints: [[0,0.5],[1,0.5]], + style: { + width: 50, + height: 150 + }, + }, + { + id: '37', + x: 1970, + y: 100, + label: '鎶昞n浜n(13涓�)', + anchorPoints: [[0,0.5],[1,0.5]], + style: { + width: 50, + height: 150 + }, + }, + ], + // 瀹氫箟鍝簺鑺傜偣涔嬮棿杩炵嚎 + edges: [ + { + id: 'x1', + source: '1', + target: '2', + }, + { + id: 'x2', + source: '1', + target: '3', + }, + { + id: 'x3', + source: '2', + target: '4', + }, + { + id: 'x4', + source: '3', + target: '4', + }, + { + id: 'x5', + source: '4', + target: '5', + }, + { + id: 'x6', + source: '6', + target: '7', + }, + { + id: 'x7', + source: '6', + target: '8', + }, + { + id: 'x8', + source: '7', + target: '9', + }, + { + id: 'x9', + source: '8', + target: '9', + }, + { + id: 'x10', + source: '9', + target: '10', + }, + { + id: 'x11', + source: '10', + target: '11', + }, + { + id: 'x12', + source: '11', + target: '12', + }, + { + id: 'x13', + source: '11', + target: '13', + }, + { + id: 'x14', + source: '12', + target: '14', + }, + { + id: 'x15', + source: '12', + target: '15', + }, + { + id: 'x16', + source: '12', + target: '16', + }, + { + id: 'x17', + source: '12', + target: '17', + }, + { + id: 'x18', + source: '12', + target: '18', + }, + { + id: 'x19', + source: '12', + target: '19', + }, + { + id: 'x20', + source: '12', + target: '20', + }, + { + id: 'x21', + source: '13', + target: '17', + }, + { + id: 'x22', + source: '13', + target: '21', + }, + { + id: 'x23', + source: '21', + target: '22', + }, + { + id: 'x24', + source: '22', + target: '23', + }, + { + id: 'x25', + source: '23', + target: '24', + }, + { + id: 'x26', + source: '24', + target: '25', + }, + { + id: 'x27', + source: '21', + target: '26', + }, + { + id: 'x28', + source: '26', + target: '27', + }, + { + id: 'x29', + source: '27', + target: '28', + }, + { + id: 'x30', + source: '28', + target: '29', + }, + { + id: 'x31', + source: '29', + target: '30', + }, + { + id: 'x32', + source: '25', + target: '30', + }, + { + id: 'x33', + source: '30', + target: '31', + }, + { + id: 'x34', + source: '31', + target: '32', + }, + { + id: 'x35', + source: '14', + target: '32', + }, + { + id: 'x36', + source: '15', + target: '32', + }, + { + id: 'x37', + source: '16', + target: '32', + }, + { + id: 'x38', + source: '17', + target: '32', + }, + { + id: 'x39', + source: '18', + target: '32', + }, + { + id: 'x40', + source: '19', + target: '32', + }, + { + id: 'x41', + source: '20', + target: '32', + }, + { + id: 'x42', + source: '32', + target: '33', + }, + { + id: 'x43', + source: '33', + target: '34', + }, + { + id: 'x44', + source: '34', + target: '35', + }, + { + id: 'x45', + source: '35', + target: '36', + }, + { + id: 'x46', + source: '36', + target: '37', + }, + ], + } + } + }, + mounted() { + this.initGraph() + }, + methods: { + // 鍒濆鍖栧叧绯诲浘锛屽苟娓叉煋鏁版嵁 + initGraph() { + // 鑷畾涔夎竟 + G6.registerEdge( + 'line-arrow', + { + getPath(points) { + const startPoint = points[0]; + const endPoint = points[1]; + return [ + ['M', startPoint.x, startPoint.y], + ['L', endPoint.x / 3 + (2 / 3) * startPoint.x, startPoint.y], + ['L', endPoint.x / 3 + (2 / 3) * startPoint.x, endPoint.y], + ['L', endPoint.x, endPoint.y], + ]; + }, + getShapeStyle(cfg) { + const startPoint = cfg.startPoint; + const endPoint = cfg.endPoint; + const controlPoints = this.getControlPoints(cfg); + let points = [startPoint]; // the start point + // the control points + if (controlPoints) { + points = points.concat(controlPoints); + } + // the end point + points.push(endPoint); + const path = this.getPath(points); + const style = Object.assign( + {}, + G6.Global.defaultEdge.style, + { + stroke: '#BBB', + lineWidth: 1, + path, + }, + cfg.style, + ); + return style; + }, + }, + 'line', + ); + const containerG6 = this.$refs.containerG6 // 鑾峰彇瀹瑰櫒锛圖OM鍏冪礌锛� + this.graph = new G6.Graph({ + container: containerG6, // String | HTMLElement锛屽繀椤伙紝鍦� Step 1 涓垱寤虹殑瀹瑰櫒 id 鎴栧鍣ㄦ湰韬� + width: 3200, // Number锛屽繀椤伙紝鍥剧殑瀹藉害 + height: 800, // Number锛屽繀椤伙紝鍥剧殑楂樺害 + fitCenter: true, // 灞呬腑灞曠ず + modes: { + // 鍏佽鎷栨嫿鐢诲竷銆佹斁缂╃敾甯冦�佹嫋鎷借妭鐐� + default: ['drag-canvas', 'zoom-canvas', 'drag-node'] + }, + defaultNode: { + type: 'rect', + style: { + fill: '#5683e3', + stroke: '#5B8FF9', + }, + }, + defaultEdge: { + type: 'polyline', + style: { + radius: 10, + offset: 30, + lineWidth: 2, + stroke: '#F6BD16', + endArrow: { + path: 'M 0,0 L 12,6 L 9,0 L 12,-6 Z', + fill: '#F6BD16', + }, + /* and other styles */ + // stroke: '#F6BD16', + }, + }, + }) + this.graph.data(this.graphData) // 璁剧疆鏁版嵁 + this.graph.render() // 娓叉煋鍥� + } + } +} +</script> + +<style scoped> + +</style> -- Gitblit v1.8.0