vue根据json数据生成流程图_vue流程图自动生成代码

作者：Cpp五条 | 2024-06-03 22:20:10

踩

vue流程图自动生成代码

接上条，断断续续耗时N天流程图终于弄出来了。
因为有正序和倒序显示，没有找到更合适的方法。
用的是Vue super flow 组件，不通过生成器，直接通过json树结构数据自动创建流程图
vue super flow 地址：https://caohuatao.github.io/

正序流程图

效果
在这里插入图片描述
js 代码：

 initNodeSign2() {
      let nodeList = [],
        linkList = [],
        totalX1 = 16,
        maxY = 0,
        this_ = this,
        totaly1 = 13;

      let lineHeight = totaly1 + boxHeight + 20; //步长高
      let lineWidth = totalX1 + boxWidth + 40; //步长宽
      let coodY = {};
      function getCHildren(arr, startId, level) {
        ++level;
        arr.forEach((item, i) => {
          let nodeId1 = `three__${this_.uuidv4()}`;  //id确保唯一
          coodY[level] = coodY[level] ? coodY[level] + lineHeight : totaly1;
          if (maxY >= coodY[level]) {
            coodY[level] = maxY + (i ? lineHeight : 0);
          }
          maxY = coodY[level];
          nodeList.push({
            id: nodeId1,
            width: boxWidth,
            height: boxHeight,
            coordinate: [totalX1 + lineWidth * (level - 1), coodY[level]],
            meta: {
              name: item.departmentName,
              state: item.signState > 0 ? 1 : 0,
              time: item.superviseTime,
              userName: item.signName,//这是页面其他用到的数据
              type: "feedback-sign",
            },
          });
          if (startId) {
            linkList.push({
              id: `_${this_.uuidv4()}`,
              startId: startId,
              endId: nodeId1,
              startAt: [totalX1 + boxWidth, 20],
              endAt: [0, 20],
              meta: null,
            });
          }
          if (item.children && item.children.length) {
            getCHildren(item.children, nodeId1, level);
          }
        });
      }
      getCHildren(this.signJsonData, "", 0); //方法调用
      this.nodeList.nodeList = nodeList;
      this.nodeList.linkList = linkList;
    },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52

json数据

 signJsonData: [
    {
      id: 142,
      departmentId: "sss",
      departmentName: "公司-1",
      superviseTime: "2022-10-09 09:45:38",
      children: [
        {
          id: 149,
          departmentId: "saweee",
          departmentName: "公司-1-1",
          superviseTime: "2022-10-09 10:05:39",
          children: [
            {
              id: 154,
              departmentId: "wewqqq",
              departmentName: "公司-1-1-1",
              superviseTime: "2022-10-09 10:10:40",
              children: []
            },
            {
              id: 155,
              departmentId: "weee3",
              departmentName: "公司-1-1-2",
              superviseTime: null,
              children: []
            }
          ]
        },
        {
          id: 150,
          departmentId: "3422",
          departmentName: "公司-1-2",
          superviseTime: "2022-10-09 10:46:59",
          children: [
            {
              id: 156,
              departmentId: "5677",
              departmentName: "公司-1-2-1",
              superviseTime: null,
              children: []
            },
            {
              id: 157,
              departmentId: "86655",
              departmentName: "公司-1-2-2",
              superviseTime: null,
              children: []
            }
          ]
        }
      ]
    },
    {
      id: 143,
      departmentId: "989iii",
      departmentName: "公司-2",
      superviseTime: "2022-10-09 09:48:04",
      children: [
        {
          id: 151,
          departmentId: "lkkj",
          departmentName: "公司-2-1",
          superviseTime: null,
          children: []
        }
      ]
    },
    {
      id: 144,

      departmentId: "hjtjyu",
      departmentName: "公司-3",
      superviseTime: "2022-10-09 09:49:32",
      children: [
        {
          id: 152,
          departmentId: "yutyutyu",
          departmentName: "公司-3-1",
          superviseTime: null,
          children: []
        },
        {
          id: 153,
          departmentId: "yutyt",
          departmentName: "公司-3-2",
          superviseTime: null,
          children: []
        }
      ]
    }
  ],

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93

倒叙流程图

效果（为了方便截图把高度调低了）
在这里插入图片描述
js 代码

 initNodeFeedbackFn() {
      let nodeList = [],
        linkList = [],
        totalX1 = 16,
        this_ = this,
        totaly1 = 13;

      let lineHeight = totaly1 + boxHeight + 10; //步长高
      let lineWidth = totalX1 + boxWidth + 40; //步长宽
      let coodObjY = {};

      function getChildrenNode(arr, startId, level) {
        ++level;
        arr.forEach((item) => {
          let nodeId1 = `${level}__${this_.uuidv4()}`;
          if (level <= 1) {
            coodObjY[level] = coodObjY[level]
              ? coodObjY[level] + lineHeight
              : 16;
          }
          let index = nodeList.findIndex(
            (n) => n.meta.departmentId == item.departmentId
          );//根据相同的 departmentId  找节点
          coodObjY[level + 1] = coodObjY[level];
          if (index >= 0) {
            nodeId1 = nodeList[index].id;
            coodObjY[level + 1] = nodeList[index].coordinate[1];
            linkList.push({
              id: `_${this_.uuidv4()}`,
              startId: startId,
              endId: nodeList[index].id,
              startAt: [totalX1 + boxWidth, 20],
              endAt: [0, 20],
              meta: null,
            });
          } else {
            nodeList.push({
              id: nodeId1,
              width: boxWidth,
              height: boxHeight,
              coordinate: [totalX1 + lineWidth * (level - 1), coodObjY[level]],
              meta: {
                name: item.departmentName,
                time: item.feedbackDate,
                userName: item.feedBackName,
                state: item.feedbackState,
                departmentId: item.departmentId,
                type: "feedback-feedback",
                feedbackIdea: item.feedbackIdea,
                riskAppendixFile: item.riskAppendixFile,
              },
            });

            if (startId) {
              linkList.push({
                id: `_${this_.uuidv4()}`,
                startId: startId,
                endId: nodeId1,
                startAt: [totalX1 + boxWidth, 20],
                endAt: [0, 20],
                meta: null,
              });
            }
          }
          if (item.children && item.children.length) {
            getChildrenNode(item.children, nodeId1, level);
          }
        });
      }
      getChildrenNode(flowData.feedbackListCOPY, "", 0);
   
      this.nodeList.nodeList = nodeList;
      this.nodeList.linkList = linkList;
    }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74

 feedbackListCOPY = [
  {
    id: 154,
    departmentId: "wewww",
    departmentName: "公司1-1-1-1",
    superviseTime: "2022-10-09 10:10:40",
    children: [
      {
        id: 149,
        departmentId: "fessss",
        departmentName: "公司1-1-1",
        superviseTime: "2022-10-09 10:05:39",
        children: [
        ]
      }
    ]
  },
  {
    id: 155,
    departmentId: "dswwwwe",
    departmentName: "公司1-1-1-2",
    superviseTime: "2022-10-09 11:38:02",
    children: [
      {
        id: 149,
        departmentId: "fessss",
        departmentName: "公司1-1-1-2",
        superviseTime: "2022-10-09 10:05:39",
        children: [
          {
            id: 142,
            departmentId: "ghyyyy",
            departmentName: "公司1-1",
            superviseTime: "2022-10-09 09:45:38",
            children: [
              {
                id: 146,
                departmentId: "sssyus",
                departmentName: "公司1",
                superviseTime: null
              }
            ]
          }
        ]
      }
    ]
  },
  {
    id: 156,
    departmentId: "sssserw",
    departmentName: "2_1_1_1",
    superviseTime: "2022-10-09 14:35:15",
    children: [
      {
        id: 150,
        departmentId: "dddfwww",
        departmentName: "2_1_1",
        superviseTime: "2022-10-09 10:46:59",
        children: [
          {
            id: 142,
            departmentId: "ghyyyy",
            departmentName: "2_1",
            superviseTime: "2022-10-09 09:45:38",
            children: [
              {
                id: 146,
                departmentId: "jyjkl",
                departmentName: "2",
                superviseTime: null,
                children: []
              }
            ]
          }
        ]
      }
    ]
  },
  {
    id: 157,
    departmentId: "fddddwwq",
    departmentName: "2-",
    superviseTime: "2022-10-09 14:36:52",
    children: [
      {
        id: 150,
        departmentId: "dddfwww",
        departmentName: "dss",
        superviseTime: "2022-10-09 10:46:59",
        children: [
          {
            id: 142,
            departmentId: "ghyyyy",
            departmentName: "杀杀杀）",
            superviseTime: "2022-10-09 09:45:38",
            children: [
              {
                id: 146,
                departmentId: "frrrth",
                departmentName: "(sss)",
                superviseTime: null,
                children: []
              }
            ]
          }
        ]
      }
    ]
  },
  {
    id: 163,
    departmentId: "5dwwww",
    departmentName: "d",
    superviseTime: "2022-10-09 14:44:24",
    children: [
      {
        departmentId: "fddd",
        departmentName: "搜索",
        superviseTime: "2022-10-09 14:44:05",
        children: [
          {
            id: 143,
            departmentId: "hyyjkkkk",
            departmentName: "s/s",
            superviseTime: "2022-10-09 09:48:04",
            children: [
              {
                id: 147,
                departmentId: "dddqq23",
                departmentName: "fff",
                superviseTime: null,
                children: []
              }
            ]
          }
        ]
      }
    ]
  },
  {
    id: 164,
    departmentId: "56wwffff",
    departmentName: "d",
    superviseTime: "2022-10-09 14:46:02",
    children: [
      {
        id: 151,
        departmentId: "fddd",
        departmentName: "d",
        superviseTime: "2022-10-09 14:44:05",
        children: [
          {
            id: 143,
            departmentId: "hyyjkkkk",
            departmentName: "d/d",
            superviseTime: "2022-10-09 09:48:04",
            children: [
              {
                id: 147,
                departmentId: "feeeee",
                departmentName: "dww",
                superviseTime: null
              }
            ]
          }
        ]
      }
    ]
  },
  {
    id: 165,
    departmentId: "fdddd21",
    departmentName: "dw",
    superviseTime: "2022-10-09 14:54:26",
    children: [
      {
        id: 153,
        departmentId: "水水水水水水水2",
        departmentName: "dsw",
        superviseTime: "2022-10-09 14:52:36",
        children: [
          {
            id: 144,
            departmentId: "dssssse223",
            departmentName: "d/swe",
            superviseTime: "2022-10-09 09:49:32",
            children: [
              {
                id: 145,

                departmentId: "dfsdtreee",
                departmentName: "dww",
                superviseTime: null,
                children: []
              }
            ]
          }
        ]
      }
    ]
  },
  {
    id: 166,
    departmentId: "fd563w",
    departmentName: "dswww",
    superviseTime: "2022-10-09 14:54:06",
    children: [
      {
        id: 152,
        departmentId: "dfgteytuuuuu",
        departmentName: "dswrr",
        superviseTime: "2022-10-09 14:53:06",
        children: [
          {
            id: 144,
            departmentId: "dssssse223",
            departmentName: "dssee/sss",
            children: [
              {
                id: 145,
                departmentId: "fdhjjrty",
                departmentName: "dwwee",
                superviseTime: null,
                children: []
              }
            ]
          }
        ]
      }
    ]
  }
]
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232

流程图盒子的宽度和高度，间距都可以根据变量调节的。
初始值：
let boxWidth = 230;
let boxHeight = 116;

用得到的给个赞再走。。。

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/Cpp五条/article/detail/669161