工程建设项目全生命周期推荐流程

xiangpei

2025-01-21 14112fc388266e62ff6028d0a6329a61fdebf77c

工程建设项目全生命周期推荐流程

 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",

 src/views/temp/index.vue

New file
@@ -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 // 获取容器（DOM元素）
      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>