inl-ui 0.1.31 → 0.1.33
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/README.md +49 -49
- package/dist/components/index.cjs +129 -113
- package/dist/components/index.js +129 -113
- package/dist/components/style.css +1 -1
- package/dist/iconfont.js +1 -1
- package/dist/index.cjs +130 -114
- package/dist/index.d.ts +1 -1
- package/dist/index.js +130 -114
- package/dist/style.css +2 -2
- package/dist/theme/index.js +70 -70
- package/dist/theme/scripts/dark-vars.js +21 -21
- package/dist/theme/scripts/default-vars.js +25 -25
- package/dist/theme/scripts/light-vars.js +22 -22
- package/dist/theme/style/color/bezierEasing.less +110 -110
- package/dist/theme/style/color/colorPalette.less +81 -81
- package/dist/theme/style/color/colors.less +162 -162
- package/dist/theme/style/color/tinyColor.less +1184 -1184
- package/dist/theme/style/compact.less +4 -4
- package/dist/theme/style/dark.less +4 -4
- package/dist/theme/style/default.less +4 -4
- package/dist/theme/style/index.less +2 -2
- package/dist/theme/style/index.tsx +2 -2
- package/dist/theme/style/themes/compact.less +295 -295
- package/dist/theme/style/themes/dark.less +790 -790
- package/dist/theme/style/themes/default.less +1067 -1067
- package/dist/theme/style/themes/index.less +7 -7
- package/dist/theme/style/themes/var-dark.less +343 -343
- package/dist/theme/style/themes/var-default.less +184 -184
- package/dist/theme/style/themes/variable.less +1122 -1122
- package/dist/theme/style/variable.less +4 -4
- package/dist/video/index.cjs +129 -113
- package/dist/video/index.js +129 -113
- package/dist/video/style.css +1 -1
- package/dist/videoMobile/index.cjs +18 -4
- package/dist/videoMobile/index.js +18 -4
- package/dist/videoMobile/style.css +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,49 +1,49 @@
|
|
|
1
|
-
# 工业PC ui库
|
|
2
|
-
|
|
3
|
-
前端通用库,包括组件、hooks、utils等。
|
|
4
|
-
|
|
5
|
-
### 运行
|
|
6
|
-
|
|
7
|
-
+ 开发模式 yarn dev
|
|
8
|
-
+ 生产打包 yarn build
|
|
9
|
-
+ 生成文档 yarn build:docs
|
|
10
|
-
+ 打包图扑工具 yarn buildtp
|
|
11
|
-
|
|
12
|
-
### 使用方法
|
|
13
|
-
|
|
14
|
-
```javascript
|
|
15
|
-
import inl from 'inl-ui';
|
|
16
|
-
import 'inl-ui/dist/style.css';
|
|
17
|
-
|
|
18
|
-
vue.use(inl)
|
|
19
|
-
```
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
### 激活主题
|
|
24
|
-
|
|
25
|
-
**vite.config.ts**
|
|
26
|
-
|
|
27
|
-
```javascript
|
|
28
|
-
const additionalData = require("inl-ui/dist/theme").default;
|
|
29
|
-
|
|
30
|
-
...
|
|
31
|
-
|
|
32
|
-
css: {
|
|
33
|
-
preprocessorOptions: {
|
|
34
|
-
less: {
|
|
35
|
-
javascriptEnabled: true,
|
|
36
|
-
additionalData,
|
|
37
|
-
},
|
|
38
|
-
},
|
|
39
|
-
},
|
|
40
|
-
```
|
|
41
|
-
|
|
42
|
-
### 文档链接
|
|
43
|
-
|
|
44
|
-
##### [组件文档](./src/components/README.md)
|
|
45
|
-
|
|
46
|
-
##### [hooks文档](./src/hooks/README.md)
|
|
47
|
-
|
|
48
|
-
##### [Utils文档](./src/utils/README.md)
|
|
49
|
-
|
|
1
|
+
# 工业PC ui库
|
|
2
|
+
|
|
3
|
+
前端通用库,包括组件、hooks、utils等。
|
|
4
|
+
|
|
5
|
+
### 运行
|
|
6
|
+
|
|
7
|
+
+ 开发模式 yarn dev
|
|
8
|
+
+ 生产打包 yarn build
|
|
9
|
+
+ 生成文档 yarn build:docs
|
|
10
|
+
+ 打包图扑工具 yarn buildtp
|
|
11
|
+
|
|
12
|
+
### 使用方法
|
|
13
|
+
|
|
14
|
+
```javascript
|
|
15
|
+
import inl from 'inl-ui';
|
|
16
|
+
import 'inl-ui/dist/style.css';
|
|
17
|
+
|
|
18
|
+
vue.use(inl)
|
|
19
|
+
```
|
|
20
|
+
|
|
21
|
+
|
|
22
|
+
|
|
23
|
+
### 激活主题
|
|
24
|
+
|
|
25
|
+
**vite.config.ts**
|
|
26
|
+
|
|
27
|
+
```javascript
|
|
28
|
+
const additionalData = require("inl-ui/dist/theme").default;
|
|
29
|
+
|
|
30
|
+
...
|
|
31
|
+
|
|
32
|
+
css: {
|
|
33
|
+
preprocessorOptions: {
|
|
34
|
+
less: {
|
|
35
|
+
javascriptEnabled: true,
|
|
36
|
+
additionalData,
|
|
37
|
+
},
|
|
38
|
+
},
|
|
39
|
+
},
|
|
40
|
+
```
|
|
41
|
+
|
|
42
|
+
### 文档链接
|
|
43
|
+
|
|
44
|
+
##### [组件文档](./src/components/README.md)
|
|
45
|
+
|
|
46
|
+
##### [hooks文档](./src/hooks/README.md)
|
|
47
|
+
|
|
48
|
+
##### [Utils文档](./src/utils/README.md)
|
|
49
|
+
|
|
@@ -8738,9 +8738,6 @@ const VideoPlayerV2 = vue.defineComponent({
|
|
|
8738
8738
|
};
|
|
8739
8739
|
}, 500);
|
|
8740
8740
|
};
|
|
8741
|
-
_context.expose({
|
|
8742
|
-
videoFull
|
|
8743
|
-
});
|
|
8744
8741
|
const videoInfo2 = vue.ref({});
|
|
8745
8742
|
const stopPlay = () => {
|
|
8746
8743
|
if (play) {
|
|
@@ -8777,6 +8774,15 @@ const VideoPlayerV2 = vue.defineComponent({
|
|
|
8777
8774
|
videoElement.load();
|
|
8778
8775
|
}
|
|
8779
8776
|
};
|
|
8777
|
+
const releaseUrl = vue.ref("");
|
|
8778
|
+
const release = async () => {
|
|
8779
|
+
const res = await axios__default["default"].get(releaseUrl.value);
|
|
8780
|
+
return res;
|
|
8781
|
+
};
|
|
8782
|
+
_context.expose({
|
|
8783
|
+
videoFull,
|
|
8784
|
+
release
|
|
8785
|
+
});
|
|
8780
8786
|
const getVideoDetail = async camera => {
|
|
8781
8787
|
let uuid2 = "";
|
|
8782
8788
|
if (camera && Object.keys(camera).length && typeof camera === "object") {
|
|
@@ -8803,6 +8809,7 @@ const VideoPlayerV2 = vue.defineComponent({
|
|
|
8803
8809
|
} = detailRes;
|
|
8804
8810
|
if (res.data.data[0]) {
|
|
8805
8811
|
data.data.webrtcTemplateMerged = res.data.data[0];
|
|
8812
|
+
releaseUrl.value = res.data.data[1];
|
|
8806
8813
|
data.data.mediaServerPo.url = res.data.data[2];
|
|
8807
8814
|
videoInfo2.value = {
|
|
8808
8815
|
...data.data,
|
|
@@ -8830,11 +8837,18 @@ const VideoPlayerV2 = vue.defineComponent({
|
|
|
8830
8837
|
videoElement.remove();
|
|
8831
8838
|
}
|
|
8832
8839
|
});
|
|
8833
|
-
return () => vue.createVNode("video", {
|
|
8840
|
+
return () => videoInfo2.value.brandTypeCode !== "MP4" ? vue.createVNode("video", {
|
|
8834
8841
|
"id": `videoPlayer_${uuid}`,
|
|
8835
8842
|
"class": `videoComponent ${_prop.fill}`,
|
|
8836
8843
|
"muted": true,
|
|
8837
8844
|
"autoplay": true
|
|
8845
|
+
}, null) : vue.createVNode("video", {
|
|
8846
|
+
"class": "videoComponent fill",
|
|
8847
|
+
"src": videoInfo2.value.mp4ResourcesPath,
|
|
8848
|
+
"controls": true,
|
|
8849
|
+
"autoplay": true,
|
|
8850
|
+
"loop": true,
|
|
8851
|
+
"muted": true
|
|
8838
8852
|
}, null);
|
|
8839
8853
|
}
|
|
8840
8854
|
});
|
|
@@ -9268,7 +9282,7 @@ const VideoBoxV2 = vue.defineComponent({
|
|
|
9268
9282
|
streams.value = JSON.parse(camera.value.brandTypePo?.streamTypeDict || "[]");
|
|
9269
9283
|
};
|
|
9270
9284
|
let timeout;
|
|
9271
|
-
|
|
9285
|
+
vue.ref(true);
|
|
9272
9286
|
vue.onBeforeUnmount(() => {});
|
|
9273
9287
|
const fill = vue.ref("fill");
|
|
9274
9288
|
vue.watch(() => _prop.camera, val => {
|
|
@@ -9298,7 +9312,7 @@ const VideoBoxV2 = vue.defineComponent({
|
|
|
9298
9312
|
};
|
|
9299
9313
|
return () => vue.createVNode("div", {
|
|
9300
9314
|
"class": ["videoBox", _prop.alarm ? "alarm" : ""]
|
|
9301
|
-
}, [
|
|
9315
|
+
}, [vue.createVNode(VideoPlayerV2, {
|
|
9302
9316
|
"ref": player,
|
|
9303
9317
|
"camera": camera.value,
|
|
9304
9318
|
"cameraConfig": cameraConfig.value,
|
|
@@ -9308,7 +9322,7 @@ const VideoBoxV2 = vue.defineComponent({
|
|
|
9308
9322
|
streamType: streamHistory.value || camera.value.streamType
|
|
9309
9323
|
};
|
|
9310
9324
|
}
|
|
9311
|
-
}, null)
|
|
9325
|
+
}, null), camera.value.brandTypeCode !== "MP4" && showInfo.value ? vue.createVNode("div", {
|
|
9312
9326
|
"class": "selectFields"
|
|
9313
9327
|
}, [[0, 1, 2, 3, 4, 5].map(index => {
|
|
9314
9328
|
let info = {};
|
|
@@ -9329,113 +9343,115 @@ const VideoBoxV2 = vue.defineComponent({
|
|
|
9329
9343
|
}, [vue.createVNode("span", null, [camera.value?.name])]), vue.createVNode("div", {
|
|
9330
9344
|
"class": "tool"
|
|
9331
9345
|
}, [_prop.btns.map(btn => {
|
|
9332
|
-
|
|
9333
|
-
|
|
9334
|
-
|
|
9335
|
-
|
|
9336
|
-
|
|
9337
|
-
|
|
9338
|
-
fill.value
|
|
9339
|
-
|
|
9340
|
-
|
|
9341
|
-
|
|
9342
|
-
|
|
9343
|
-
|
|
9344
|
-
},
|
|
9345
|
-
"src": "/micro-assets/inl/video/controls/fill.svg"
|
|
9346
|
-
}, null);
|
|
9347
|
-
case "look":
|
|
9348
|
-
return vue.createVNode("img", {
|
|
9349
|
-
"title": "\u6253\u5F00/\u5173\u95ED\u5C5E\u6027\u663E\u793A",
|
|
9350
|
-
"onClick": e => {
|
|
9351
|
-
showInfo.value = !showInfo.value;
|
|
9352
|
-
},
|
|
9353
|
-
"src": "/micro-assets/inl/video/controls/show.png"
|
|
9354
|
-
}, null);
|
|
9355
|
-
case "stream":
|
|
9356
|
-
return vue.createVNode(vue.resolveComponent("a-popover"), {
|
|
9357
|
-
"title": "\u5207\u6362\u7801\u6D41",
|
|
9358
|
-
"content": vue.createVNode("div", null, [streams.value.map(stream => {
|
|
9359
|
-
return vue.createVNode("div", {
|
|
9360
|
-
"class": "btn",
|
|
9361
|
-
"onClick": () => {
|
|
9362
|
-
changeStream(stream.code);
|
|
9363
|
-
streamHistory.value = stream.code;
|
|
9346
|
+
if (!(camera.value.brandTypeCode === "MP4" && btn !== "close" && btn !== "look")) {
|
|
9347
|
+
switch (btn) {
|
|
9348
|
+
case "fill":
|
|
9349
|
+
return vue.createVNode("img", {
|
|
9350
|
+
"title": "\u62C9\u4F38/\u539F\u59CB\u5C3A\u5BF8",
|
|
9351
|
+
"onClick": e => {
|
|
9352
|
+
if (fill.value === "fill") {
|
|
9353
|
+
fill.value = "contain";
|
|
9354
|
+
localStorage.setItem(camera.value.uuid, fill.value);
|
|
9355
|
+
} else {
|
|
9356
|
+
fill.value = "fill";
|
|
9357
|
+
localStorage.setItem(camera.value.uuid, fill.value);
|
|
9364
9358
|
}
|
|
9365
|
-
},
|
|
9366
|
-
|
|
9367
|
-
|
|
9368
|
-
|
|
9369
|
-
|
|
9370
|
-
|
|
9371
|
-
|
|
9372
|
-
|
|
9373
|
-
|
|
9374
|
-
|
|
9375
|
-
|
|
9376
|
-
|
|
9377
|
-
|
|
9378
|
-
"
|
|
9379
|
-
|
|
9380
|
-
|
|
9381
|
-
|
|
9382
|
-
|
|
9383
|
-
|
|
9384
|
-
|
|
9385
|
-
|
|
9386
|
-
|
|
9387
|
-
|
|
9388
|
-
|
|
9389
|
-
|
|
9390
|
-
|
|
9391
|
-
|
|
9392
|
-
}
|
|
9393
|
-
|
|
9394
|
-
|
|
9395
|
-
"
|
|
9396
|
-
"
|
|
9397
|
-
|
|
9398
|
-
|
|
9399
|
-
|
|
9400
|
-
|
|
9401
|
-
|
|
9402
|
-
|
|
9403
|
-
|
|
9404
|
-
|
|
9405
|
-
|
|
9406
|
-
|
|
9407
|
-
|
|
9408
|
-
|
|
9409
|
-
|
|
9410
|
-
|
|
9411
|
-
"
|
|
9412
|
-
|
|
9413
|
-
|
|
9414
|
-
|
|
9415
|
-
|
|
9416
|
-
|
|
9417
|
-
|
|
9418
|
-
|
|
9419
|
-
|
|
9420
|
-
|
|
9421
|
-
"
|
|
9422
|
-
|
|
9423
|
-
|
|
9424
|
-
|
|
9425
|
-
|
|
9426
|
-
|
|
9427
|
-
|
|
9428
|
-
|
|
9429
|
-
|
|
9430
|
-
|
|
9431
|
-
|
|
9432
|
-
|
|
9433
|
-
|
|
9434
|
-
|
|
9435
|
-
|
|
9436
|
-
|
|
9437
|
-
|
|
9438
|
-
|
|
9359
|
+
},
|
|
9360
|
+
"src": "/micro-assets/inl/video/controls/fill.svg"
|
|
9361
|
+
}, null);
|
|
9362
|
+
case "look":
|
|
9363
|
+
return vue.createVNode("img", {
|
|
9364
|
+
"title": "\u6253\u5F00/\u5173\u95ED\u5C5E\u6027\u663E\u793A",
|
|
9365
|
+
"onClick": e => {
|
|
9366
|
+
showInfo.value = !showInfo.value;
|
|
9367
|
+
},
|
|
9368
|
+
"src": showInfo.value ? "/micro-assets/inl/video/controls/show.png" : "/micro-assets/inl/video/controls/hide.svg"
|
|
9369
|
+
}, null);
|
|
9370
|
+
case "stream":
|
|
9371
|
+
return vue.createVNode(vue.resolveComponent("a-popover"), {
|
|
9372
|
+
"title": "\u5207\u6362\u7801\u6D41",
|
|
9373
|
+
"content": vue.createVNode("div", null, [streams.value.map(stream => {
|
|
9374
|
+
return vue.createVNode("div", {
|
|
9375
|
+
"class": "btn",
|
|
9376
|
+
"onClick": () => {
|
|
9377
|
+
changeStream(stream.code);
|
|
9378
|
+
streamHistory.value = stream.code;
|
|
9379
|
+
}
|
|
9380
|
+
}, [stream.name]);
|
|
9381
|
+
})])
|
|
9382
|
+
}, {
|
|
9383
|
+
default: () => [vue.createVNode("img", {
|
|
9384
|
+
"src": "/micro-assets/inl/video/stream.png"
|
|
9385
|
+
}, null)]
|
|
9386
|
+
});
|
|
9387
|
+
case "direction":
|
|
9388
|
+
return vue.createVNode(vue.resolveComponent("a-popover"), {
|
|
9389
|
+
"title": "\u63A7\u5236\u5668",
|
|
9390
|
+
"content": vue.createVNode("div", {
|
|
9391
|
+
"class": "videoControls"
|
|
9392
|
+
}, [vue.createVNode("div", {
|
|
9393
|
+
"class": "videoControl"
|
|
9394
|
+
}, [vue.createVNode("img", {
|
|
9395
|
+
"class": "bg",
|
|
9396
|
+
"src": "/micro-assets/inl/video/controls/circle.png"
|
|
9397
|
+
}, null), videoBtns.map(ele => {
|
|
9398
|
+
return vue.createVNode("div", null, [ele.map(btn2 => {
|
|
9399
|
+
return vue.createVNode("img", {
|
|
9400
|
+
"class": btn2.text,
|
|
9401
|
+
"src": "/micro-assets/inl/video/controls/up.svg",
|
|
9402
|
+
"onClick": e => videoMove(btn2.signal)
|
|
9403
|
+
}, null);
|
|
9404
|
+
})]);
|
|
9405
|
+
})]), vue.createVNode("div", {
|
|
9406
|
+
"class": "flex"
|
|
9407
|
+
}, [vue.createVNode("div", {
|
|
9408
|
+
"class": "flex1 btns"
|
|
9409
|
+
}, [vue.createVNode("img", {
|
|
9410
|
+
"src": "/micro-assets/inl/video/controls/smaller.svg",
|
|
9411
|
+
"onClick": e => videoMove(16)
|
|
9412
|
+
}, null), vue.createVNode("img", {
|
|
9413
|
+
"src": "/micro-assets/inl/video/controls/bigger.svg",
|
|
9414
|
+
"onClick": e => videoMove(15)
|
|
9415
|
+
}, null)]), vue.createVNode("div", {
|
|
9416
|
+
"class": "flex1 btns"
|
|
9417
|
+
}, [vue.createVNode("img", {
|
|
9418
|
+
"src": "/micro-assets/inl/video/controls/go.svg",
|
|
9419
|
+
"onClick": e => videoMove(14)
|
|
9420
|
+
}, null), vue.createVNode("img", {
|
|
9421
|
+
"src": "/micro-assets/inl/video/controls/back.svg",
|
|
9422
|
+
"onClick": e => videoMove(13)
|
|
9423
|
+
}, null)])]), vue.createVNode("div", {
|
|
9424
|
+
"class": "flex"
|
|
9425
|
+
}, [vue.createVNode("div", {
|
|
9426
|
+
"class": "flex1 btns"
|
|
9427
|
+
}, [vue.createVNode("img", {
|
|
9428
|
+
"src": "/micro-assets/inl/video/controls/light.svg",
|
|
9429
|
+
"onClick": e => videoMove(2)
|
|
9430
|
+
}, null), vue.createVNode("img", {
|
|
9431
|
+
"src": "/micro-assets/inl/video/controls/rain.svg",
|
|
9432
|
+
"onClick": e => videoMove(3)
|
|
9433
|
+
}, null)])])])
|
|
9434
|
+
}, {
|
|
9435
|
+
default: () => [vue.createVNode("img", {
|
|
9436
|
+
"src": "/micro-assets/inl/video/control.png"
|
|
9437
|
+
}, null)]
|
|
9438
|
+
});
|
|
9439
|
+
case "fullScreen":
|
|
9440
|
+
return vue.createVNode("img", {
|
|
9441
|
+
"onClick": e => {
|
|
9442
|
+
e.stopPropagation();
|
|
9443
|
+
player.value.videoFull();
|
|
9444
|
+
},
|
|
9445
|
+
"src": "/micro-assets/inl/video/putUp.png"
|
|
9446
|
+
}, null);
|
|
9447
|
+
case "close":
|
|
9448
|
+
return vue.createVNode("img", {
|
|
9449
|
+
"onClick": e => {
|
|
9450
|
+
_context.emit("close");
|
|
9451
|
+
},
|
|
9452
|
+
"src": "/micro-assets/inl/video/close.png"
|
|
9453
|
+
}, null);
|
|
9454
|
+
}
|
|
9439
9455
|
}
|
|
9440
9456
|
})])])]);
|
|
9441
9457
|
}
|