-
Notifications
You must be signed in to change notification settings - Fork 0
/
e-r
379 lines (372 loc) · 22.7 KB
/
e-r
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
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
import { Graph } from '@antv/x6'
const graph = new Graph({
container: document.getElementById('container'),
grid: {
size: 32, // 网格大小 10px
visible: true, // 绘制网格，默认绘制 dot 类型网格
},
interacting: {
nodeMovable: false
},
scroller: {
enabled: true,
pannable: true,
},
})
// 使用文档：https://x6.antv.vision/zh/docs/tutorial/advanced/react#%E6%B8%B2%E6%9F%93-html-%E8%8A%82%E7%82%B9
const value = {
// schema
schema: [
// 第一列
[{
id: 's-0',
name: 'patient_master_info',
tableArr: [{
name: 'patient_id:int',
id: 't0-0', // id得唯一 不然线连不上
hasEdge: true, // 如果为true 代表有关联关系 文字要加粗
isPrimaryKey: true, // 是否是主键 如果true则显示图标
isSource: true, // 有圆圈显示
}, {
name: 'org_code:varchar(20)', // 看看能不能把number带上(20)这种 不能的话再加个number字段
id: 't0-1',
hasEdge: false,
isForeignKey: true, // 是否是外键 如果true则显示图标
}, {
name: 'org_code:varchar(21)', // 看看能不能把number带上(20)这种 不能的话再加个number字段
id: 't0-2',
hasEdge: false,
}, {
name: 'org_code:varchar(22)', // 看看能不能把number带上(20)这种 不能的话再加个number字段
id: 't0-3',
hasEdge: false,
}]
}, {
id: 's-1',
name: 'patient_master_info2',
tableArr: [{
name: 'patient_id:int2',
id: 't1-0',
hasEdge: false,
}, {
name: 'org_code:varchar2(20)',
id: 't1-1',
hasEdge: false,
}]
}, {
name: 'patient_master_info3',
id: 's-2',
tableArr: [{
name: 'patient_id:int3',
id: 't2-0',
hasEdge: false,
isSource: true, // 有圆圈显示
}, {
name: 'org_code:varchar3(20)',
id: 't2-1',
hasEdge: false,
}]
}],
// 第二列
[{
id: 's2-0',
name: 'patient_master_info',
tableArr: [{
name: 'patient_id:int',
id: 't20-0',
hasEdge: false, // 如果为true 代表有关联关系 文字要加粗
}, {
name: 'org_code:varchar(20)',
id: 't20-1',
hasEdge: false,
}]
}, {
id: 's2-1',
name: 'patient_master_info2',
tableArr: [{
name: 'patient_id:int2',
id: 't21-0',
hasEdge: true,
}, {
name: 'org_code:varchar2(20)',
id: 't21-1',
hasEdge: false,
}]
}, {
name: 'patient_master_info3',
id: 's2-2',
tableArr: [{
name: 'patient_id:int3',
id: 't22-0',
hasEdge: false,
}, {
name: 'org_code:varchar31111(20)',
id: 't22-1',
hasEdge: false,
}, {
name: 'org_code:varchaasr3111sas1(20)',
id: 't22-2',
hasEdge: false,
}]
}, {
name: 'patient_master_info311111111',
id: 's2-3',
tableArr: [{
name: 'patient_id:int3',
id: 't23-0',
hasEdge: false,
}, {
name: 'org_code:varchar31111(20)',
id: 't23-1',
hasEdge: false,
}, {
name: 'org_code:varchar31111(20)',
id: 't23-2',
hasEdge: false,
}, {
name: 'org_code:varchar31111(20)',
id: 't23-3',
hasEdge: false,
}]
}],
// 第三列
[{
id: 's3-0',
name: 'patient_master_info',
tableArr: [{
name: 'patient_id:int',
id: 't30-0',
hasEdge: false, // 如果为true 代表有关联关系 文字要加粗
}, {
name: 'org_code:varchar(20)',
id: 't30-1',
hasEdge: false,
}]
}, {
id: '32-1',
name: 'patient_master_info2',
tableArr: [{
name: 'patient_id:int2',
id: 't31-0',
hasEdge: true,
}, {
name: 'org_code:varchar2(20)',
id: 't31-1',
hasEdge: false,
}]
}, {
name: 'patient_master_info3',
id: 's3-2',
tableArr: [{
name: 'patient_id:int3',
id: 't32-0',
hasEdge: false,
}, {
name: 'org_code:varchar31111(20)',
id: 't32-1',
hasEdge: false,
}]
}, {
name: 'patient_master_info311111111',
id: 's3-3',
tableArr: [{
name: 'patient_id:int3',
id: 't33-0',
hasEdge: false,
}, {
name: 'org_code:varchar31111(20)',
id: 't33-1',
hasEdge: false,
}, {
name: 'org_code:varchar31111(20)',
id: 't33-2',
hasEdge: false,
}, {
name: 'org_code:varchar31111(20)',
id: 't33-3',
hasEdge: false,
}]
}]
],
// 连接线
edge: [{
target: 't21-0', // 目标节点(箭头指向)
source: 't0-0', // 来源节点
label: '1:N', // 显示对应关系
},
{
target: 't22-0', // 目标节点(箭头指向)
source: 't2-0', // 来源节点
label: '1:N', // 显示对应关系
}]
}
initData2();
function initData2() {
let sourceNodeTop = 0;
let sourceNodeLeft = 0;
const { schema, edge } = value;
schema.forEach((schemaItem, schemaItemIndex) => {
sourceNodeLeft = 250 * schemaItemIndex;
sourceNodeTop = 0;
schemaItem.forEach((schemaDetail, schemaIndex) => {
sourceNodeTop = 50 + (schemaIndex >= 1 ? (schemaItem[schemaIndex - 1].tableArr.length + 1 ) * 36 : (sourceNodeTop ? 120 : 0)) + sourceNodeTop;
const sourceNode = graph.addNode({
shape: 'html',
x: sourceNodeLeft,
y: sourceNodeTop,
width: 200,
height: 32 * (schemaDetail.tableArr.length + 1 ) + 6,
// height: 148,
html: getContent('#099FFF', schemaDetail),
id: schemaDetail.id
})
schemaDetail.tableArr.forEach((tableItem, tableIndex) => {
// 渲染所有table
const obj = {
shape: 'html',
x: sourceNodeLeft + 2,
y: sourceNodeTop + tableIndex * 32 + 36,
width: 180,
height: 32,
// label: tableItem.name,
html: getTableContent(tableItem),
id: tableItem.id,
attrs: {
body: {
// fill: '#f5f5f5',
stroke: '#d9d9d9',
strokeWidth: 0,
},
},
};
if (tableItem.isSource) {
obj.ports = {
groups: {
group1: {
position: 'right',
attrs: {
circle: {
r: 4,
magnet: true,
stroke: '#009FFF',
fill: '#fff',
strokeWidth: 2,
},
},
},
},
items: [
{ id: tableItem.id, group: 'group1' }
],
}
}
obj
const rect = graph.addNode(obj)
sourceNode.addChild(rect)
})
})
})
edge.forEach((edgeItem, edgeItemIndex) => {
graph.addEdge({
// source: sourceNode,
// target: targetNode,
source: edgeItem.source, // 源节点 ID
target: edgeItem.target, // 目标节点 ID
// source: {
// cell: edgeItem.source,
// port: edgeItem.source
// }, // 目标节点 ID
// target: {
// cell: edgeItem.target,
// port: edgeItem.target
// }, // 目标节点 ID
label: edgeItem.label,
// router: {
// name: 'oneSide',
// // args: {
// // startDirections: ['right'],
// // endDirections: ['right'],
// // },
// args: {
// side: 'right',
// padding: 50,
// },
// },
router: {
name: 'manhattan',
// maximumLoops: 30,
args: {
step: 18,
excludeTerminals: ['target'],
startDirections: ['right'],
endDirections: ['right'],
},
},
attrs: {
line: {
targetMarker: 'classic',
stroke: '#009FFF',
},
},
})
})
}
function getTableContent(tableItem) {
const wrap = document.createElement('div')
wrap.style.width = '100%'
wrap.style.height = '100%'
wrap.style.lineHeight = '32px'
wrap.style.display = 'flex'
const contentLeft = document.createElement('div')
const contentRight = document.createElement('div')
const imgIcon = document.createElement('img')
contentLeft.style.width = '32px'
contentRight.style.flex = 1
contentRight.style.paddingTop = '1px'
contentRight.innerText = tableItem.name
contentRight.title = tableItem.name
contentRight.style.overflow = 'hidden'
contentRight.style.textOverflow = 'ellipsis'
contentRight.style.whiteSpace = 'nowrap'
contentLeft.style.padding = '9px 0 0 6px'
imgIcon.style.marginLeft = '10px'
contentLeft.appendChild(imgIcon);
if (tableItem.isPrimaryKey) {
contentLeft.innerHTML = '<svg width="22" height="22" viewBox="0 0 42 42" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M6.91888 29.0001H16.3715V28.9444C16.6164 28.9112 16.8409 28.7903 17.0034 28.6042C17.166 28.4181 17.2555 28.1794 17.2555 27.9323C17.2555 27.6852 17.166 27.4465 17.0034 27.2604C16.8409 27.0743 16.6164 26.9534 16.3715 26.9202H6.91888C6.675 26.9202 6.43351 26.8722 6.2082 26.7788C5.98289 26.6855 5.77816 26.5487 5.60571 26.3763C5.43327 26.2038 5.29647 25.9991 5.20314 25.7738C5.10982 25.5485 5.06178 25.307 5.06178 25.0631V6.95634C5.06178 6.4638 5.25744 5.99144 5.60571 5.64317C5.95399 5.2949 6.42635 5.09924 6.91888 5.09924H25.1185C25.611 5.09924 26.0834 5.2949 26.4316 5.64317C26.7799 5.99144 26.9756 6.4638 26.9756 6.95634V13.5862C26.9756 13.8522 27.0812 14.1072 27.2693 14.2953C27.4574 14.4834 27.7124 14.589 27.9784 14.589C28.2461 14.5891 28.5031 14.484 28.6942 14.2965C28.8852 14.1089 28.9949 13.8539 28.9998 13.5862V6.93777C29.0049 6.4162 28.9053 5.89891 28.7069 5.41652C28.5085 4.93412 28.2153 4.49643 27.8448 4.12934C27.4742 3.76225 27.0338 3.47323 26.5496 3.27937C26.0653 3.08551 25.5471 2.99075 25.0256 3.00071H6.91888C6.40046 2.99819 5.88673 3.09906 5.40775 3.29742C4.92876 3.49578 4.49413 3.78765 4.12928 4.15596C3.76443 4.52427 3.47667 4.96164 3.28284 5.44247C3.089 5.9233 2.99299 6.43796 3.0004 6.95634V25.0631C2.99795 25.5792 3.0975 26.0908 3.29333 26.5683C3.48916 27.0459 3.7774 27.4801 4.14151 27.8459C4.50562 28.2117 4.93841 28.502 5.41504 28.7001C5.89167 28.8982 6.40273 29.0002 6.91888 29.0001ZM17.0712 7.74924C18.0253 8.69916 18.5654 9.98732 18.5721 11.3306C18.5788 12.674 18.0516 13.9624 17.1061 14.9123L16.9392 15.0722L16.9351 15.0759C16.2313 15.721 15.3586 16.1503 14.4199 16.316L14.4173 17.9131L17.1746 17.9153L17.3126 17.9271L17.3242 17.9292C17.5299 17.9664 17.7161 18.0746 17.8506 18.2347C17.9851 18.3948 18.0595 18.5969 18.0606 18.8059C18.0616 19.015 17.9892 19.2177 17.8556 19.3785C17.722 19.5393 17.5361 19.6476 17.3303 19.6847L17.3187 19.6868L17.1807 19.6985L14.4155 19.6977L14.4147 20.6163L15.5287 20.6162L15.6664 20.628L15.6775 20.63C15.8838 20.6665 16.0709 20.7744 16.2061 20.9346C16.3413 21.0947 16.4162 21.2973 16.4173 21.5068C16.4185 21.7164 16.3458 21.9196 16.2118 22.0807C16.0777 22.2417 15.891 22.3499 15.6847 22.3866L15.6734 22.3886L15.5357 22.4002L14.4133 22.3996L14.4129 24.6249L14.4019 24.763L14.3996 24.7753C14.3622 24.981 14.2536 25.1669 14.0926 25.3002C13.9316 25.4336 13.7288 25.5057 13.5197 25.5044C13.3107 25.503 13.1086 25.4283 12.9487 25.2935C12.7888 25.1588 12.6809 24.9723 12.644 24.7665L12.6421 24.7557L12.6297 24.6178L12.6354 16.3145C11.9171 16.1852 11.2335 15.9022 10.6318 15.4842C9.97005 15.0243 9.42639 14.4141 9.04582 13.704C8.66526 12.9939 8.45867 12.2041 8.44328 11.4001C8.42789 10.5961 8.60413 9.80086 8.95757 9.08024C9.311 8.35962 9.83143 7.73441 10.4758 7.25637C11.1202 6.77833 11.8699 6.46127 12.6628 6.33132C13.4557 6.20138 14.2691 6.26229 15.0356 6.50887C15.8022 6.75546 16.4999 7.18066 17.0712 7.74924ZM16.5321 10.0764C16.3651 9.6781 16.1214 9.31606 15.815 9.01104C15.1962 8.39504 14.3595 8.04894 13.4893 8.04852C12.6192 8.04809 11.7868 8.39329 11.1751 9.0078C10.5633 9.62232 10.2218 10.4562 10.2262 11.3263C10.2305 12.1965 10.5803 13.0316 11.1991 13.6477C11.5055 13.9527 11.8686 14.1948 12.2677 14.36C12.6668 14.5252 13.094 14.6103 13.5249 14.6105C13.9558 14.6107 14.3819 14.5261 14.779 14.3615C15.1761 14.1969 15.5364 13.9555 15.8394 13.6512C16.1423 13.3469 16.3821 12.9855 16.5449 12.5877C16.7077 12.1899 16.7904 11.7634 16.7883 11.3325C16.7861 10.9016 16.6991 10.4748 16.5321 10.0764ZM22.9375 28.5156C22.9375 28.8385 22.7604 29 22.4062 29H21.4844C21.3021 29 21.1719 28.9505 21.0938 28.8516C21.0156 28.7526 20.9766 28.6406 20.9766 28.5156V17.7109C20.9766 17.5286 21.0234 17.3698 21.1172 17.2344C21.2161 17.0938 21.375 17.0234 21.5938 17.0234H24.6875C26.1458 17.0234 27.276 17.3724 28.0781 18.0703C28.9167 18.7943 29.3359 19.8281 29.3359 21.1719C29.3359 22.526 28.8646 23.6094 27.9219 24.4219C27.026 25.1979 25.8932 25.5859 24.5234 25.5859C24.0911 25.5859 23.5625 25.5469 22.9375 25.4688V28.5156ZM22.9375 23.8281L23.5625 23.8984C23.75 23.9193 24.0052 23.9297 24.3281 23.9297C24.651 23.9297 25 23.8802 25.375 23.7812C25.75 23.6823 26.0781 23.5234 26.3594 23.3047C26.9792 22.8307 27.2891 22.1224 27.2891 21.1797C27.2891 19.987 26.7604 19.2188 25.7031 18.875C25.375 18.7708 25.0078 18.7188 24.6016 18.7188H22.9375V23.8281Z" fill="#54627B"/></svg>'
} else if (tableItem.isForeignKey) {
contentLeft.innerHTML = '<svg width="22" height="22" viewBox="0 0 42 42" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M6.91888 29.0001H16.3715V28.9444C16.6164 28.9112 16.8409 28.7903 17.0034 28.6042C17.166 28.4181 17.2555 28.1794 17.2555 27.9323C17.2555 27.6852 17.166 27.4465 17.0034 27.2604C16.8409 27.0743 16.6164 26.9534 16.3715 26.9202H6.91888C6.675 26.9202 6.43351 26.8722 6.2082 26.7788C5.98289 26.6855 5.77816 26.5487 5.60571 26.3763C5.43327 26.2038 5.29647 25.9991 5.20314 25.7738C5.10982 25.5485 5.06178 25.307 5.06178 25.0631V6.95634C5.06178 6.4638 5.25744 5.99144 5.60571 5.64317C5.95399 5.2949 6.42635 5.09924 6.91888 5.09924H25.1185C25.611 5.09924 26.0834 5.2949 26.4316 5.64317C26.7799 5.99144 26.9756 6.4638 26.9756 6.95634V13.5862C26.9756 13.8522 27.0812 14.1072 27.2693 14.2953C27.4574 14.4834 27.7124 14.589 27.9784 14.589C28.2461 14.5891 28.5031 14.484 28.6942 14.2965C28.8852 14.1089 28.9949 13.8539 28.9998 13.5862V6.93777C29.0049 6.4162 28.9053 5.89891 28.7069 5.41652C28.5085 4.93412 28.2153 4.49643 27.8448 4.12934C27.4742 3.76225 27.0338 3.47323 26.5496 3.27937C26.0653 3.08551 25.5471 2.99075 25.0256 3.00071H6.91888C6.40046 2.99819 5.88673 3.09906 5.40775 3.29742C4.92876 3.49578 4.49413 3.78765 4.12928 4.15596C3.76443 4.52427 3.47667 4.96164 3.28284 5.44247C3.089 5.9233 2.99299 6.43796 3.0004 6.95634V25.0631C2.99795 25.5792 3.0975 26.0908 3.29333 26.5683C3.48916 27.0459 3.7774 27.4801 4.14151 27.8459C4.50562 28.2117 4.93841 28.502 5.41504 28.7001C5.89167 28.8982 6.40273 29.0002 6.91888 29.0001ZM17.0712 7.74924C18.0253 8.69916 18.5654 9.98732 18.5721 11.3306C18.5788 12.674 18.0516 13.9624 17.1061 14.9123L16.9392 15.0722L16.9351 15.0759C16.2313 15.721 15.3586 16.1503 14.4199 16.316L14.4173 17.9131L17.1746 17.9153L17.3126 17.9271L17.3242 17.9292C17.5299 17.9664 17.7161 18.0746 17.8506 18.2347C17.9851 18.3948 18.0595 18.5969 18.0606 18.8059C18.0616 19.015 17.9892 19.2177 17.8556 19.3785C17.722 19.5393 17.5361 19.6476 17.3303 19.6847L17.3187 19.6868L17.1807 19.6985L14.4155 19.6977L14.4147 20.6163L15.5287 20.6162L15.6664 20.628L15.6775 20.63C15.8838 20.6665 16.0709 20.7744 16.2061 20.9346C16.3413 21.0947 16.4162 21.2973 16.4173 21.5068C16.4185 21.7164 16.3458 21.9196 16.2118 22.0807C16.0777 22.2417 15.891 22.3499 15.6847 22.3866L15.6734 22.3886L15.5357 22.4002L14.4133 22.3996L14.4129 24.6249L14.4019 24.763L14.3996 24.7753C14.3622 24.981 14.2536 25.1669 14.0926 25.3002C13.9316 25.4336 13.7288 25.5057 13.5197 25.5044C13.3107 25.503 13.1086 25.4283 12.9487 25.2935C12.7888 25.1588 12.6809 24.9723 12.644 24.7665L12.6421 24.7557L12.6297 24.6178L12.6354 16.3145C11.9171 16.1852 11.2335 15.9022 10.6318 15.4842C9.97005 15.0243 9.42639 14.4141 9.04582 13.704C8.66526 12.9939 8.45867 12.2041 8.44328 11.4001C8.42789 10.5961 8.60413 9.80086 8.95757 9.08024C9.311 8.35962 9.83143 7.73441 10.4758 7.25637C11.1202 6.77833 11.8699 6.46127 12.6628 6.33132C13.4557 6.20138 14.2691 6.26229 15.0356 6.50887C15.8022 6.75546 16.4999 7.18066 17.0712 7.74924ZM16.5321 10.0764C16.3651 9.6781 16.1214 9.31606 15.815 9.01104C15.1962 8.39504 14.3595 8.04894 13.4893 8.04852C12.6192 8.04809 11.7868 8.39329 11.1751 9.0078C10.5633 9.62232 10.2218 10.4562 10.2262 11.3263C10.2305 12.1965 10.5803 13.0316 11.1991 13.6477C11.5055 13.9527 11.8686 14.1948 12.2677 14.36C12.6668 14.5252 13.094 14.6103 13.5249 14.6105C13.9558 14.6107 14.3819 14.5261 14.779 14.3615C15.1761 14.1969 15.5364 13.9555 15.8394 13.6512C16.1423 13.3469 16.3821 12.9855 16.5449 12.5877C16.7077 12.1899 16.7904 11.7634 16.7883 11.3325C16.7861 10.9016 16.6991 10.4748 16.5321 10.0764ZM21.1953 17.5234C21.1953 17.388 21.237 17.2708 21.3203 17.1719C21.4089 17.0729 21.513 17.0234 21.6328 17.0234H27.9766C28.112 17.0234 28.2135 17.0677 28.2812 17.1562C28.3542 17.2396 28.3906 17.3438 28.3906 17.4688V18.3203C28.3906 18.4401 28.3542 18.5443 28.2812 18.6328C28.2135 18.7161 28.112 18.7578 27.9766 18.7578H23.1562V22.6406H27.0391C27.1745 22.6406 27.276 22.6849 27.3438 22.7734C27.4167 22.862 27.4531 22.9661 27.4531 23.0859V23.9297C27.4531 24.0495 27.4167 24.1536 27.3438 24.2422C27.276 24.3255 27.1745 24.3672 27.0391 24.3672H23.1484V28.5C23.1484 28.6354 23.1042 28.7526 23.0156 28.8516C22.9323 28.9505 22.8307 29 22.7109 29H21.625C21.5052 29 21.4036 28.9505 21.3203 28.8516C21.237 28.7526 21.1953 28.6354 21.1953 28.5V17.5234Z" fill="#54627B"/></svg>'
} else {
contentLeft.innerHTML = '<svg width="22" height="22" viewBox="0 0 42 42" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#clip0)"><path d="M16.3715 2.99985H6.91888C6.40273 2.99985 5.89167 3.10182 5.41504 3.2999C4.93841 3.49798 4.50562 3.78828 4.14151 4.15411C3.7774 4.51995 3.48916 4.95411 3.29333 5.43167C3.0975 5.90923 2.99795 6.42077 3.0004 6.93691V25.0437C2.99299 25.562 3.089 26.0767 3.28284 26.5575C3.47667 27.0384 3.76443 27.4757 4.12928 27.844C4.49413 28.2124 4.92876 28.5042 5.40775 28.7026C5.88673 28.9009 6.40046 29.0018 6.91888 28.9993H25.0256C25.5471 29.0092 26.0653 28.9145 26.5496 28.7206C27.0338 28.5268 27.4742 28.2377 27.8448 27.8707C28.2153 27.5036 28.5085 27.0659 28.7069 26.5835C28.9053 26.1011 29.0049 25.5838 28.9998 25.0622V18.4138C28.9949 18.1461 28.8852 17.8911 28.6942 17.7035C28.5031 17.516 28.2461 17.4109 27.9784 17.411C27.7124 17.411 27.4574 17.5166 27.2693 17.7047C27.0812 17.8928 26.9756 18.1478 26.9756 18.4138V25.0437C26.9756 25.5362 26.7799 26.0086 26.4316 26.3568C26.0834 26.7051 25.611 26.9008 25.1185 26.9008H6.91888C6.42635 26.9008 5.95399 26.7051 5.60571 26.3568C5.25744 26.0086 5.06178 25.5362 5.06178 25.0437V6.93691C5.06178 6.69303 5.10982 6.45154 5.20314 6.22623C5.29647 6.00092 5.43327 5.79619 5.60571 5.62374C5.77816 5.45129 5.98289 5.3145 6.2082 5.22117C6.43351 5.12784 6.675 5.07981 6.91888 5.07981H16.3715C16.6164 5.04657 16.8409 4.9257 17.0034 4.7396C17.166 4.55349 17.2555 4.31478 17.2555 4.06769C17.2555 3.8206 17.166 3.58188 17.0034 3.39578C16.8409 3.20968 16.6164 3.08881 16.3715 3.05557V2.99985Z" fill="black"/><path d="M10.625 11H21.375C21.9937 11 22.5 11.495 22.5 12.1C22.5 12.705 21.9937 13.2 21.375 13.2H17.125V22.9C17.125 23.505 16.6188 24 16 24C15.3812 24 14.875 23.505 14.875 22.9V13.2H10.625C10.0062 13.2 9.5 12.705 9.5 12.1C9.5 11.495 10.0062 11 10.625 11Z" fill="black"/><path d="M24.2076 9.986C24.1236 10.0047 24.0022 10.028 23.8436 10.056C23.6942 10.084 23.5309 10.098 23.3536 10.098C22.9989 10.098 22.7469 10.0327 22.5976 9.902C22.4576 9.77133 22.3876 9.552 22.3876 9.244V2.216C22.3876 2.03867 22.4342 1.90333 22.5276 1.81C22.6209 1.71667 22.7516 1.642 22.9196 1.586C23.2182 1.48333 23.5682 1.41333 23.9696 1.376C24.3802 1.32933 24.8002 1.306 25.2296 1.306C26.4616 1.306 27.3856 1.56267 28.0016 2.076C28.6176 2.58 28.9256 3.28 28.9256 4.176C28.9256 4.764 28.7716 5.27733 28.4636 5.716C28.1556 6.14533 27.7309 6.47667 27.1896 6.71C27.6002 7.242 27.9922 7.75067 28.3656 8.236C28.7482 8.712 29.0329 9.08533 29.2196 9.356C29.1449 9.59867 29.0142 9.79 28.8276 9.93C28.6409 10.0607 28.4356 10.126 28.2116 10.126C27.9222 10.126 27.6982 10.0607 27.5396 9.93C27.3902 9.79933 27.2409 9.622 27.0916 9.398L25.5096 7.032H24.2076V9.986ZM25.3276 5.604C25.8596 5.604 26.2842 5.48733 26.6016 5.254C26.9282 5.02067 27.0916 4.666 27.0916 4.19C27.0916 3.24733 26.4616 2.776 25.2016 2.776C25.0149 2.776 24.8329 2.78533 24.6556 2.804C24.4876 2.82267 24.3289 2.84133 24.1796 2.86V5.604H25.3276Z" fill="black"/></g><defs><clipPath id="clip0"><rect width="32" height="32" fill="white"/></clipPath></defs></svg>'
}
wrap.appendChild(contentLeft)
wrap.appendChild(contentRight)
return wrap
}
function getContent(header1Color, value) {
const wrap = document.createElement('div')
wrap.style.width = '100%'
wrap.style.height = '100%'
wrap.style.lineHeight = '32px'
wrap.style.color = '#fff'
wrap.style.border = `1px solid ${header1Color}`
wrap.style.borderRadius = '8px'
wrap.style.overflow = 'hidden'
const header = document.createElement('div')
header.style.background = header1Color
header.style.paddingLeft = '10px'
header.style.fontSize = '16px'
header.title = value.name
header.style.overflow = 'hidden'
header.style.textOverflow = 'ellipsis'
header.style.whiteSpace = 'nowrap'
header.innerText = value.name
const content = document.createElement('div')
content.style.height = value.tableArr.length * 32 + 'px'
content.style.width = '100%'
content.style.display = 'flex'
content.style.color = '#000'
content.style.borderTop = 0;
wrap.appendChild(header)
wrap.appendChild(content)
return wrap
}