hy-virtual-tree 1.1.42 → 1.1.44
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +17 -0
- package/README.md +2 -2
- package/dist/index.css +139 -2
- package/dist/index.js +824 -224
- package/package.json +2 -4
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,22 @@
|
|
|
1
1
|
## Changelog
|
|
2
2
|
|
|
3
|
+
### 1.1.44
|
|
4
|
+
|
|
5
|
+
_2025-11-28_
|
|
6
|
+
|
|
7
|
+
- 扩展[VirtualTree] 功能
|
|
8
|
+
（1）修复过滤数据后，再调用updateTree时导致统计数量错误问题
|
|
9
|
+
（2）删除 BusinessConfig.integratedBusiness，更改为通过 getDeviceIntegrated 获取部门下面全部设备数据
|
|
10
|
+
（3）新增 channel 业务类型
|
|
11
|
+
|
|
12
|
+
### 1.1.43
|
|
13
|
+
|
|
14
|
+
_2025-11-12_
|
|
15
|
+
|
|
16
|
+
- 扩展[VirtualTree] 功能
|
|
17
|
+
（1）修改statusTextList参数为deviceStatusMap
|
|
18
|
+
（2）导出全局配置参数方法
|
|
19
|
+
|
|
3
20
|
### 1.1.42
|
|
4
21
|
|
|
5
22
|
_2025-11-12_
|
package/README.md
CHANGED
|
@@ -534,7 +534,7 @@ export default {
|
|
|
534
534
|
| onNodeClick | (data: TreeNodeData, node: TreeNode, e: MouseEvent) => void | <font style="color:rgb(48, 49, 51);">当节点被鼠标左键点击的时候触发</font> | |
|
|
535
535
|
| onNodeContextmenu | (data: TreeNodeData, node: TreeNode, e: MouseEvent) => void | <font style="color:rgb(48, 49, 51);">当节点被鼠标右键点击的时候触发</font> | |
|
|
536
536
|
| onLoad <font style="color:rgb(64, 158, 255);">(1.1.0)</font> | Function | <font style="color:rgb(48, 49, 51);">完成初始化回调函数</font> | |
|
|
537
|
-
| deviceConfig <font style="color:rgb(64, 158, 255);">(1.1.0)</font> | {
|
|
537
|
+
| deviceConfig <font style="color:rgb(64, 158, 255);">(1.1.0)</font> | { deviceStatusMap } | <font style="color:rgb(48, 49, 51);">设备树业务配置，仅在 business 设置为 'device' | 'groupDevice' 时生效</font> | { deviceStatusMap: { 0: '离线', 1: '在线', 2: '监控中', 3: '通话中', 4: '录像中', 5: '录音中', 6: '广播中', 7: 'SOS' } } |
|
|
538
538
|
|
|
539
539
|
|
|
540
540
|
### 三、Props
|
|
@@ -681,7 +681,7 @@ export interface VirtualTreeProps {
|
|
|
681
681
|
onLoad?: () => void // 完成初始化回调函数
|
|
682
682
|
// 设备业务配置
|
|
683
683
|
deviceConfig?: {
|
|
684
|
-
|
|
684
|
+
deviceStatusMap: {} // 状态文案
|
|
685
685
|
}
|
|
686
686
|
}
|
|
687
687
|
|
package/dist/index.css
CHANGED
|
@@ -1,3 +1,82 @@
|
|
|
1
|
+
.hy-tooltip {
|
|
2
|
+
--hy-tooltip-bg: #1C324B;
|
|
3
|
+
position: absolute;
|
|
4
|
+
border-radius: 4px;
|
|
5
|
+
padding: 7px 9px;
|
|
6
|
+
z-index: 2000;
|
|
7
|
+
font-size: 12px;
|
|
8
|
+
line-height: 20px;
|
|
9
|
+
min-width: 10px;
|
|
10
|
+
overflow-wrap: break-word;
|
|
11
|
+
word-break: normal;
|
|
12
|
+
visibility: visible;
|
|
13
|
+
color: #fff;
|
|
14
|
+
background: var(--hy-tooltip-bg);
|
|
15
|
+
border: 1px solid #375C86;
|
|
16
|
+
transform: translateX(-50%) translateY(calc(-100% - 10px));
|
|
17
|
+
}
|
|
18
|
+
.hy-tooltip.top .hy-popper__arrow {
|
|
19
|
+
left: 50%;
|
|
20
|
+
bottom: 0;
|
|
21
|
+
transform: translateY(50%) translateX(-50%);
|
|
22
|
+
}
|
|
23
|
+
.hy-tooltip.top .hy-popper__arrow::before {
|
|
24
|
+
border-right: 1px solid #375C86;
|
|
25
|
+
border-bottom: 1px solid #375C86;
|
|
26
|
+
}
|
|
27
|
+
.hy-tooltip.bottom {
|
|
28
|
+
transform: translateX(-50%) translateY(10px);
|
|
29
|
+
}
|
|
30
|
+
.hy-tooltip.bottom .hy-popper__arrow {
|
|
31
|
+
top: 0;
|
|
32
|
+
left: 50%;
|
|
33
|
+
transform: translateY(-50%) translateX(-50%);
|
|
34
|
+
}
|
|
35
|
+
.hy-tooltip.bottom .hy-popper__arrow::before {
|
|
36
|
+
border-top: 1px solid #375C86;
|
|
37
|
+
border-left: 1px solid #375C86;
|
|
38
|
+
}
|
|
39
|
+
.hy-tooltip.left {
|
|
40
|
+
transform: translateX(calc(-100% - 10px)) translateY(-50%);
|
|
41
|
+
}
|
|
42
|
+
.hy-tooltip.left .hy-popper__arrow {
|
|
43
|
+
top: 50%;
|
|
44
|
+
right: 0;
|
|
45
|
+
transform: translateY(-50%) translateX(50%);
|
|
46
|
+
}
|
|
47
|
+
.hy-tooltip.left .hy-popper__arrow::before {
|
|
48
|
+
border-right: 1px solid #375C86;
|
|
49
|
+
border-top: 1px solid #375C86;
|
|
50
|
+
}
|
|
51
|
+
.hy-tooltip.right {
|
|
52
|
+
transform: translateX(10px) translateY(-50%);
|
|
53
|
+
}
|
|
54
|
+
.hy-tooltip.right .hy-popper__arrow {
|
|
55
|
+
top: 50%;
|
|
56
|
+
left: 0;
|
|
57
|
+
transform: translateY(-50%) translateX(-50%);
|
|
58
|
+
}
|
|
59
|
+
.hy-tooltip.right .hy-popper__arrow::before {
|
|
60
|
+
border-left: 1px solid #375C86;
|
|
61
|
+
border-bottom: 1px solid #375C86;
|
|
62
|
+
}
|
|
63
|
+
.hy-tooltip .hy-popper__arrow {
|
|
64
|
+
position: absolute;
|
|
65
|
+
width: 10px;
|
|
66
|
+
height: 10px;
|
|
67
|
+
z-index: -1;
|
|
68
|
+
}
|
|
69
|
+
.hy-tooltip .hy-popper__arrow::before {
|
|
70
|
+
position: absolute;
|
|
71
|
+
width: 10px;
|
|
72
|
+
height: 10px;
|
|
73
|
+
z-index: -1;
|
|
74
|
+
content: " ";
|
|
75
|
+
transform: rotate(45deg);
|
|
76
|
+
background: var(--hy-tooltip-bg);
|
|
77
|
+
box-sizing: border-box;
|
|
78
|
+
}
|
|
79
|
+
|
|
1
80
|
.hy-icon {
|
|
2
81
|
display: flex;
|
|
3
82
|
align-items: center;
|
|
@@ -59,7 +138,7 @@
|
|
|
59
138
|
}
|
|
60
139
|
.hy-checkbox.is-checked .hy-checkbox__input .hy-checkbox__inner {
|
|
61
140
|
background-color: var(--hy-checkbox-checked-bg-color);
|
|
62
|
-
box-shadow: 0 0
|
|
141
|
+
box-shadow: 0 0 5px 1px var(--hy-color-primary);
|
|
63
142
|
border-color: var(--hy-checkbox-checked-input-border-color);
|
|
64
143
|
}
|
|
65
144
|
.hy-checkbox.is-checked .hy-checkbox__input .hy-checkbox__inner::after {
|
|
@@ -230,7 +309,11 @@
|
|
|
230
309
|
--hy-color-primary: #2df2ff;
|
|
231
310
|
--hy-color-danger: #f56c6c;
|
|
232
311
|
--hy-color-success: #2ce898;
|
|
312
|
+
--hy-color-placeholder: #909399;
|
|
233
313
|
--hy-color-gradient: linear-gradient(270deg, #27acff 0%, #2ddbf4 100%);
|
|
314
|
+
--hy-tree-item-gap: 10px;
|
|
315
|
+
--hy-tree-item-height: 30px;
|
|
316
|
+
--hy-tree-channel-bg-color: '#10263B';
|
|
234
317
|
}
|
|
235
318
|
.hy-tree > div {
|
|
236
319
|
padding: 0 10px;
|
|
@@ -288,12 +371,21 @@
|
|
|
288
371
|
transition: all 0.3s linear;
|
|
289
372
|
}
|
|
290
373
|
.hy-tree .hy-tree-icon {
|
|
291
|
-
margin-right:
|
|
374
|
+
margin-right: 6px;
|
|
292
375
|
flex-shrink: 0;
|
|
293
376
|
display: flex;
|
|
294
377
|
align-items: center;
|
|
295
378
|
justify-content: center;
|
|
296
379
|
}
|
|
380
|
+
.hy-tree .hy-tree-icon.online {
|
|
381
|
+
color: var(--hy-color-success);
|
|
382
|
+
}
|
|
383
|
+
.hy-tree .hy-tree-icon.offline {
|
|
384
|
+
color: var(--hy-color-placeholder);
|
|
385
|
+
}
|
|
386
|
+
.hy-tree .hy-tree-icon.monitor {
|
|
387
|
+
color: var(--hy-color-primary);
|
|
388
|
+
}
|
|
297
389
|
.hy-tree .hy-tree-node__content {
|
|
298
390
|
white-space: nowrap;
|
|
299
391
|
overflow: hidden;
|
|
@@ -341,3 +433,48 @@
|
|
|
341
433
|
-webkit-background-clip: text;
|
|
342
434
|
-webkit-text-fill-color: transparent;
|
|
343
435
|
}
|
|
436
|
+
.hy-tree .hy-tree-channel-node {
|
|
437
|
+
background-color: var(--hy-tree-channel-bg-color);
|
|
438
|
+
}
|
|
439
|
+
.hy-tree .hy-tree-channel-node .hy-tree-node-container {
|
|
440
|
+
background-color: transparent !important;
|
|
441
|
+
}
|
|
442
|
+
.hy-tree .hy-tree-channel-node .hy-tree-node-container .hy-tree-node__expand {
|
|
443
|
+
width: 24px;
|
|
444
|
+
position: relative;
|
|
445
|
+
margin-right: 0;
|
|
446
|
+
}
|
|
447
|
+
.hy-tree .hy-tree-channel-node .hy-tree-node-container .hy-tree-node__expand::before {
|
|
448
|
+
display: block;
|
|
449
|
+
content: '';
|
|
450
|
+
width: 1px;
|
|
451
|
+
height: calc(var(--hy-tree-item-height) + var(--hy-tree-item-gap));
|
|
452
|
+
background-image: linear-gradient(to bottom, transparent 0px, transparent 2px, #5E9DB4 2px, #5E9DB4 4px);
|
|
453
|
+
background-size: 100% 4px;
|
|
454
|
+
background-repeat: repeat;
|
|
455
|
+
position: absolute;
|
|
456
|
+
left: 7px;
|
|
457
|
+
transform: translateY(-50%);
|
|
458
|
+
}
|
|
459
|
+
.hy-tree .hy-tree-channel-node .hy-tree-node-container .hy-tree-node__expand::after {
|
|
460
|
+
display: block;
|
|
461
|
+
content: '';
|
|
462
|
+
height: 1px;
|
|
463
|
+
background-image: linear-gradient(to right, transparent 0px, transparent 2px, #5E9DB4 2px, #5E9DB4 4px);
|
|
464
|
+
background-size: 4px 100%;
|
|
465
|
+
background-repeat: repeat;
|
|
466
|
+
position: absolute;
|
|
467
|
+
top: 50%;
|
|
468
|
+
left: 6px;
|
|
469
|
+
right: 0;
|
|
470
|
+
transform: translateY(-50%);
|
|
471
|
+
}
|
|
472
|
+
.hy-tree .hy-tree-node:not(.hy-tree-channel-node):has(+ .hy-tree-channel-node) {
|
|
473
|
+
background-image: linear-gradient(to bottom, transparent 50%, var(--hy-tree-channel-bg-color) 50%, var(--hy-tree-channel-bg-color) 100%);
|
|
474
|
+
}
|
|
475
|
+
.hy-tree .hy-tree-node:not(.hy-tree-channel-node) + .hy-tree-channel-node .hy-tree-node-container .hy-tree-node__expand::before {
|
|
476
|
+
height: calc(var(--hy-tree-item-height) - var(--hy-tree-item-gap) / 2);
|
|
477
|
+
}
|
|
478
|
+
.hy-tree .hy-tree-channel-node:has( + .hy-tree-node:not(.hy-tree-channel-node)) {
|
|
479
|
+
background: linear-gradient(to bottom, var(--hy-tree-channel-bg-color) 0%, var(--hy-tree-channel-bg-color) calc(100% - var(--hy-tree-item-gap)), transparent calc(100% - var(--hy-tree-item-gap)));
|
|
480
|
+
}
|