inl-ui 0.1.31 → 0.1.32
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 +128 -112
- package/dist/components/index.js +128 -112
- package/dist/components/style.css +1 -1
- package/dist/iconfont.js +1 -1
- package/dist/index.cjs +129 -113
- package/dist/index.d.ts +1 -1
- package/dist/index.js +129 -113
- 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 +128 -112
- package/dist/video/index.js +128 -112
- package/dist/video/style.css +1 -1
- package/dist/videoMobile/index.cjs +10 -3
- package/dist/videoMobile/index.js +10 -3
- 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,
|
|
@@ -9268,7 +9275,7 @@ const VideoBoxV2 = vue.defineComponent({
|
|
|
9268
9275
|
streams.value = JSON.parse(camera.value.brandTypePo?.streamTypeDict || "[]");
|
|
9269
9276
|
};
|
|
9270
9277
|
let timeout;
|
|
9271
|
-
|
|
9278
|
+
vue.ref(true);
|
|
9272
9279
|
vue.onBeforeUnmount(() => {});
|
|
9273
9280
|
const fill = vue.ref("fill");
|
|
9274
9281
|
vue.watch(() => _prop.camera, val => {
|
|
@@ -9298,7 +9305,7 @@ const VideoBoxV2 = vue.defineComponent({
|
|
|
9298
9305
|
};
|
|
9299
9306
|
return () => vue.createVNode("div", {
|
|
9300
9307
|
"class": ["videoBox", _prop.alarm ? "alarm" : ""]
|
|
9301
|
-
}, [
|
|
9308
|
+
}, [camera.value.brandTypeCode !== "MP4" ? vue.createVNode(VideoPlayerV2, {
|
|
9302
9309
|
"ref": player,
|
|
9303
9310
|
"camera": camera.value,
|
|
9304
9311
|
"cameraConfig": cameraConfig.value,
|
|
@@ -9308,7 +9315,14 @@ const VideoBoxV2 = vue.defineComponent({
|
|
|
9308
9315
|
streamType: streamHistory.value || camera.value.streamType
|
|
9309
9316
|
};
|
|
9310
9317
|
}
|
|
9311
|
-
}, null) :
|
|
9318
|
+
}, null) : vue.createVNode("video", {
|
|
9319
|
+
"class": "videoStatic",
|
|
9320
|
+
"src": camera.value.mp4ResourcesPath,
|
|
9321
|
+
"controls": true,
|
|
9322
|
+
"autoplay": true,
|
|
9323
|
+
"loop": true,
|
|
9324
|
+
"muted": true
|
|
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")) {
|
|
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": "/micro-assets/inl/video/controls/show.png"
|
|
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
|
}
|