inl-ui 0.1.131 → 0.1.133
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/dist/components/index.cjs +31 -7
- package/dist/components/index.js +31 -7
- package/dist/index.cjs +32 -8
- package/dist/index.d.ts +1 -1
- package/dist/index.js +32 -8
- package/dist/video/index.cjs +31 -7
- package/dist/video/index.js +32 -8
- package/package.json +1 -1
|
@@ -9738,6 +9738,7 @@ const VideoBoxV2 = vue.defineComponent({
|
|
|
9738
9738
|
}]];
|
|
9739
9739
|
const infos = vue.ref([]);
|
|
9740
9740
|
const uuid = vue.ref(UUID());
|
|
9741
|
+
let Mqtt = null;
|
|
9741
9742
|
vue.onMounted(() => {
|
|
9742
9743
|
showInfo.value = _prop.showInfo;
|
|
9743
9744
|
});
|
|
@@ -9817,6 +9818,7 @@ const VideoBoxV2 = vue.defineComponent({
|
|
|
9817
9818
|
streams.value = JSON.parse(camera.value?.brandTypePo?.streamTypeDict || "[]");
|
|
9818
9819
|
console.log("vlmSwitchKey.value", vlmSwitchKey.value);
|
|
9819
9820
|
console.log("localStorage.getItem(vlmSwitchKey.value)", localStorage.getItem(vlmSwitchKey.value));
|
|
9821
|
+
clearFlogCanvas();
|
|
9820
9822
|
if (localStorage.getItem(vlmSwitchKey.value) !== "false") {
|
|
9821
9823
|
showVlmInfo.value = true;
|
|
9822
9824
|
if (camera.value?.ip && showVlmInfo.value) {
|
|
@@ -9947,6 +9949,11 @@ const VideoBoxV2 = vue.defineComponent({
|
|
|
9947
9949
|
}
|
|
9948
9950
|
};
|
|
9949
9951
|
vue.watch(() => _prop.camera, val => {
|
|
9952
|
+
if (Mqtt) {
|
|
9953
|
+
console.log(`\u53D6\u6D88\u8BA2\u9605:${topic.value}`);
|
|
9954
|
+
Mqtt?.unsubscribe(topic.value);
|
|
9955
|
+
Mqtt = null;
|
|
9956
|
+
}
|
|
9950
9957
|
if (val && Object.keys(val).length != 0) {
|
|
9951
9958
|
setNewCamera(val);
|
|
9952
9959
|
}
|
|
@@ -9993,7 +10000,6 @@ const VideoBoxV2 = vue.defineComponent({
|
|
|
9993
10000
|
}, null) : ""])]
|
|
9994
10001
|
});
|
|
9995
10002
|
};
|
|
9996
|
-
let Mqtt = null;
|
|
9997
10003
|
const topic = vue.ref("");
|
|
9998
10004
|
const {
|
|
9999
10005
|
isFullscreen,
|
|
@@ -10018,15 +10024,27 @@ const VideoBoxV2 = vue.defineComponent({
|
|
|
10018
10024
|
});
|
|
10019
10025
|
Mqtt.on("message", onMtMessageFn);
|
|
10020
10026
|
};
|
|
10021
|
-
const onMtMessageFn = (
|
|
10027
|
+
const onMtMessageFn = (topicStr, message2) => {
|
|
10028
|
+
if (topicStr !== topic.value) {
|
|
10029
|
+
return;
|
|
10030
|
+
}
|
|
10022
10031
|
const msg = new TextDecoder("utf-8").decode(message2);
|
|
10023
10032
|
console.log("msg", JSON.parse(msg));
|
|
10024
10033
|
drawFlog(JSON.parse(msg));
|
|
10025
10034
|
};
|
|
10026
10035
|
let canvasDom = null;
|
|
10027
10036
|
let textBox = null;
|
|
10028
|
-
const createFlogCanvas = () => {
|
|
10037
|
+
const createFlogCanvas = async () => {
|
|
10038
|
+
await vue.nextTick();
|
|
10029
10039
|
const box = document.getElementById("videoBox_" + uuid.value);
|
|
10040
|
+
if (!box) {
|
|
10041
|
+
return {
|
|
10042
|
+
canvas: null,
|
|
10043
|
+
textBox: null,
|
|
10044
|
+
width: 0,
|
|
10045
|
+
height: 0
|
|
10046
|
+
};
|
|
10047
|
+
}
|
|
10030
10048
|
if (!canvasDom) {
|
|
10031
10049
|
canvasDom = document.createElement("canvas");
|
|
10032
10050
|
canvasDom.id = "canvas_" + uuid.value;
|
|
@@ -10071,13 +10089,16 @@ const VideoBoxV2 = vue.defineComponent({
|
|
|
10071
10089
|
}
|
|
10072
10090
|
};
|
|
10073
10091
|
let drawCleanTimer = null;
|
|
10074
|
-
const drawFlog = data => {
|
|
10092
|
+
const drawFlog = async data => {
|
|
10075
10093
|
let {
|
|
10076
10094
|
canvasDom: canvasDom2,
|
|
10077
10095
|
width,
|
|
10078
10096
|
height,
|
|
10079
10097
|
textBox: textBox2
|
|
10080
|
-
} = createFlogCanvas();
|
|
10098
|
+
} = await createFlogCanvas();
|
|
10099
|
+
if (!canvasDom2) {
|
|
10100
|
+
return;
|
|
10101
|
+
}
|
|
10081
10102
|
const ctx = canvasDom2.getContext("2d");
|
|
10082
10103
|
if (drawCleanTimer) {
|
|
10083
10104
|
clearTimeout(drawCleanTimer);
|
|
@@ -10119,7 +10140,7 @@ const VideoBoxV2 = vue.defineComponent({
|
|
|
10119
10140
|
const vlmSwitchKey = vue.computed(() => {
|
|
10120
10141
|
return `showVlmInfo_${camera.value?.uuid}`;
|
|
10121
10142
|
});
|
|
10122
|
-
vue.watchEffect(() => {
|
|
10143
|
+
vue.watchEffect(async () => {
|
|
10123
10144
|
if (showVlmInfo.value) {
|
|
10124
10145
|
localStorage.removeItem(vlmSwitchKey.value);
|
|
10125
10146
|
} else {
|
|
@@ -10129,7 +10150,10 @@ const VideoBoxV2 = vue.defineComponent({
|
|
|
10129
10150
|
textBox: textBox2,
|
|
10130
10151
|
width,
|
|
10131
10152
|
height
|
|
10132
|
-
} = createFlogCanvas();
|
|
10153
|
+
} = await createFlogCanvas();
|
|
10154
|
+
if (!canvasDom2) {
|
|
10155
|
+
return;
|
|
10156
|
+
}
|
|
10133
10157
|
const ctx = canvasDom2.getContext("2d");
|
|
10134
10158
|
clearTimeout(drawCleanTimer);
|
|
10135
10159
|
removeTxtBox();
|
package/dist/components/index.js
CHANGED
|
@@ -9709,6 +9709,7 @@ const VideoBoxV2 = defineComponent({
|
|
|
9709
9709
|
}]];
|
|
9710
9710
|
const infos = ref([]);
|
|
9711
9711
|
const uuid = ref(UUID());
|
|
9712
|
+
let Mqtt = null;
|
|
9712
9713
|
onMounted(() => {
|
|
9713
9714
|
showInfo.value = _prop.showInfo;
|
|
9714
9715
|
});
|
|
@@ -9788,6 +9789,7 @@ const VideoBoxV2 = defineComponent({
|
|
|
9788
9789
|
streams.value = JSON.parse(camera.value?.brandTypePo?.streamTypeDict || "[]");
|
|
9789
9790
|
console.log("vlmSwitchKey.value", vlmSwitchKey.value);
|
|
9790
9791
|
console.log("localStorage.getItem(vlmSwitchKey.value)", localStorage.getItem(vlmSwitchKey.value));
|
|
9792
|
+
clearFlogCanvas();
|
|
9791
9793
|
if (localStorage.getItem(vlmSwitchKey.value) !== "false") {
|
|
9792
9794
|
showVlmInfo.value = true;
|
|
9793
9795
|
if (camera.value?.ip && showVlmInfo.value) {
|
|
@@ -9918,6 +9920,11 @@ const VideoBoxV2 = defineComponent({
|
|
|
9918
9920
|
}
|
|
9919
9921
|
};
|
|
9920
9922
|
watch(() => _prop.camera, val => {
|
|
9923
|
+
if (Mqtt) {
|
|
9924
|
+
console.log(`\u53D6\u6D88\u8BA2\u9605:${topic.value}`);
|
|
9925
|
+
Mqtt?.unsubscribe(topic.value);
|
|
9926
|
+
Mqtt = null;
|
|
9927
|
+
}
|
|
9921
9928
|
if (val && Object.keys(val).length != 0) {
|
|
9922
9929
|
setNewCamera(val);
|
|
9923
9930
|
}
|
|
@@ -9964,7 +9971,6 @@ const VideoBoxV2 = defineComponent({
|
|
|
9964
9971
|
}, null) : ""])]
|
|
9965
9972
|
});
|
|
9966
9973
|
};
|
|
9967
|
-
let Mqtt = null;
|
|
9968
9974
|
const topic = ref("");
|
|
9969
9975
|
const {
|
|
9970
9976
|
isFullscreen,
|
|
@@ -9989,15 +9995,27 @@ const VideoBoxV2 = defineComponent({
|
|
|
9989
9995
|
});
|
|
9990
9996
|
Mqtt.on("message", onMtMessageFn);
|
|
9991
9997
|
};
|
|
9992
|
-
const onMtMessageFn = (
|
|
9998
|
+
const onMtMessageFn = (topicStr, message2) => {
|
|
9999
|
+
if (topicStr !== topic.value) {
|
|
10000
|
+
return;
|
|
10001
|
+
}
|
|
9993
10002
|
const msg = new TextDecoder("utf-8").decode(message2);
|
|
9994
10003
|
console.log("msg", JSON.parse(msg));
|
|
9995
10004
|
drawFlog(JSON.parse(msg));
|
|
9996
10005
|
};
|
|
9997
10006
|
let canvasDom = null;
|
|
9998
10007
|
let textBox = null;
|
|
9999
|
-
const createFlogCanvas = () => {
|
|
10008
|
+
const createFlogCanvas = async () => {
|
|
10009
|
+
await nextTick();
|
|
10000
10010
|
const box = document.getElementById("videoBox_" + uuid.value);
|
|
10011
|
+
if (!box) {
|
|
10012
|
+
return {
|
|
10013
|
+
canvas: null,
|
|
10014
|
+
textBox: null,
|
|
10015
|
+
width: 0,
|
|
10016
|
+
height: 0
|
|
10017
|
+
};
|
|
10018
|
+
}
|
|
10001
10019
|
if (!canvasDom) {
|
|
10002
10020
|
canvasDom = document.createElement("canvas");
|
|
10003
10021
|
canvasDom.id = "canvas_" + uuid.value;
|
|
@@ -10042,13 +10060,16 @@ const VideoBoxV2 = defineComponent({
|
|
|
10042
10060
|
}
|
|
10043
10061
|
};
|
|
10044
10062
|
let drawCleanTimer = null;
|
|
10045
|
-
const drawFlog = data => {
|
|
10063
|
+
const drawFlog = async data => {
|
|
10046
10064
|
let {
|
|
10047
10065
|
canvasDom: canvasDom2,
|
|
10048
10066
|
width,
|
|
10049
10067
|
height,
|
|
10050
10068
|
textBox: textBox2
|
|
10051
|
-
} = createFlogCanvas();
|
|
10069
|
+
} = await createFlogCanvas();
|
|
10070
|
+
if (!canvasDom2) {
|
|
10071
|
+
return;
|
|
10072
|
+
}
|
|
10052
10073
|
const ctx = canvasDom2.getContext("2d");
|
|
10053
10074
|
if (drawCleanTimer) {
|
|
10054
10075
|
clearTimeout(drawCleanTimer);
|
|
@@ -10090,7 +10111,7 @@ const VideoBoxV2 = defineComponent({
|
|
|
10090
10111
|
const vlmSwitchKey = computed(() => {
|
|
10091
10112
|
return `showVlmInfo_${camera.value?.uuid}`;
|
|
10092
10113
|
});
|
|
10093
|
-
watchEffect(() => {
|
|
10114
|
+
watchEffect(async () => {
|
|
10094
10115
|
if (showVlmInfo.value) {
|
|
10095
10116
|
localStorage.removeItem(vlmSwitchKey.value);
|
|
10096
10117
|
} else {
|
|
@@ -10100,7 +10121,10 @@ const VideoBoxV2 = defineComponent({
|
|
|
10100
10121
|
textBox: textBox2,
|
|
10101
10122
|
width,
|
|
10102
10123
|
height
|
|
10103
|
-
} = createFlogCanvas();
|
|
10124
|
+
} = await createFlogCanvas();
|
|
10125
|
+
if (!canvasDom2) {
|
|
10126
|
+
return;
|
|
10127
|
+
}
|
|
10104
10128
|
const ctx = canvasDom2.getContext("2d");
|
|
10105
10129
|
clearTimeout(drawCleanTimer);
|
|
10106
10130
|
removeTxtBox();
|
package/dist/index.cjs
CHANGED
|
@@ -45,7 +45,7 @@ var ___default = /*#__PURE__*/_interopDefaultLegacy(_);
|
|
|
45
45
|
var dayjs__default = /*#__PURE__*/_interopDefaultLegacy(dayjs);
|
|
46
46
|
var mqtt__default = /*#__PURE__*/_interopDefaultLegacy(mqtt);
|
|
47
47
|
|
|
48
|
-
var version = "0.1.
|
|
48
|
+
var version = "0.1.132";
|
|
49
49
|
|
|
50
50
|
const setTheme = theme => {
|
|
51
51
|
if (theme === "dark") {
|
|
@@ -10724,6 +10724,7 @@ const VideoBoxV2 = vue.defineComponent({
|
|
|
10724
10724
|
}]];
|
|
10725
10725
|
const infos = vue.ref([]);
|
|
10726
10726
|
const uuid = vue.ref(UUID());
|
|
10727
|
+
let Mqtt = null;
|
|
10727
10728
|
vue.onMounted(() => {
|
|
10728
10729
|
showInfo.value = _prop.showInfo;
|
|
10729
10730
|
});
|
|
@@ -10803,6 +10804,7 @@ const VideoBoxV2 = vue.defineComponent({
|
|
|
10803
10804
|
streams.value = JSON.parse(camera.value?.brandTypePo?.streamTypeDict || "[]");
|
|
10804
10805
|
console.log("vlmSwitchKey.value", vlmSwitchKey.value);
|
|
10805
10806
|
console.log("localStorage.getItem(vlmSwitchKey.value)", localStorage.getItem(vlmSwitchKey.value));
|
|
10807
|
+
clearFlogCanvas();
|
|
10806
10808
|
if (localStorage.getItem(vlmSwitchKey.value) !== "false") {
|
|
10807
10809
|
showVlmInfo.value = true;
|
|
10808
10810
|
if (camera.value?.ip && showVlmInfo.value) {
|
|
@@ -10933,6 +10935,11 @@ const VideoBoxV2 = vue.defineComponent({
|
|
|
10933
10935
|
}
|
|
10934
10936
|
};
|
|
10935
10937
|
vue.watch(() => _prop.camera, val => {
|
|
10938
|
+
if (Mqtt) {
|
|
10939
|
+
console.log(`\u53D6\u6D88\u8BA2\u9605:${topic.value}`);
|
|
10940
|
+
Mqtt?.unsubscribe(topic.value);
|
|
10941
|
+
Mqtt = null;
|
|
10942
|
+
}
|
|
10936
10943
|
if (val && Object.keys(val).length != 0) {
|
|
10937
10944
|
setNewCamera(val);
|
|
10938
10945
|
}
|
|
@@ -10979,7 +10986,6 @@ const VideoBoxV2 = vue.defineComponent({
|
|
|
10979
10986
|
}, null) : ""])]
|
|
10980
10987
|
});
|
|
10981
10988
|
};
|
|
10982
|
-
let Mqtt = null;
|
|
10983
10989
|
const topic = vue.ref("");
|
|
10984
10990
|
const {
|
|
10985
10991
|
isFullscreen,
|
|
@@ -11004,15 +11010,27 @@ const VideoBoxV2 = vue.defineComponent({
|
|
|
11004
11010
|
});
|
|
11005
11011
|
Mqtt.on("message", onMtMessageFn);
|
|
11006
11012
|
};
|
|
11007
|
-
const onMtMessageFn = (
|
|
11013
|
+
const onMtMessageFn = (topicStr, message2) => {
|
|
11014
|
+
if (topicStr !== topic.value) {
|
|
11015
|
+
return;
|
|
11016
|
+
}
|
|
11008
11017
|
const msg = new TextDecoder("utf-8").decode(message2);
|
|
11009
11018
|
console.log("msg", JSON.parse(msg));
|
|
11010
11019
|
drawFlog(JSON.parse(msg));
|
|
11011
11020
|
};
|
|
11012
11021
|
let canvasDom = null;
|
|
11013
11022
|
let textBox = null;
|
|
11014
|
-
const createFlogCanvas = () => {
|
|
11023
|
+
const createFlogCanvas = async () => {
|
|
11024
|
+
await vue.nextTick();
|
|
11015
11025
|
const box = document.getElementById("videoBox_" + uuid.value);
|
|
11026
|
+
if (!box) {
|
|
11027
|
+
return {
|
|
11028
|
+
canvas: null,
|
|
11029
|
+
textBox: null,
|
|
11030
|
+
width: 0,
|
|
11031
|
+
height: 0
|
|
11032
|
+
};
|
|
11033
|
+
}
|
|
11016
11034
|
if (!canvasDom) {
|
|
11017
11035
|
canvasDom = document.createElement("canvas");
|
|
11018
11036
|
canvasDom.id = "canvas_" + uuid.value;
|
|
@@ -11057,13 +11075,16 @@ const VideoBoxV2 = vue.defineComponent({
|
|
|
11057
11075
|
}
|
|
11058
11076
|
};
|
|
11059
11077
|
let drawCleanTimer = null;
|
|
11060
|
-
const drawFlog = data => {
|
|
11078
|
+
const drawFlog = async data => {
|
|
11061
11079
|
let {
|
|
11062
11080
|
canvasDom: canvasDom2,
|
|
11063
11081
|
width,
|
|
11064
11082
|
height,
|
|
11065
11083
|
textBox: textBox2
|
|
11066
|
-
} = createFlogCanvas();
|
|
11084
|
+
} = await createFlogCanvas();
|
|
11085
|
+
if (!canvasDom2) {
|
|
11086
|
+
return;
|
|
11087
|
+
}
|
|
11067
11088
|
const ctx = canvasDom2.getContext("2d");
|
|
11068
11089
|
if (drawCleanTimer) {
|
|
11069
11090
|
clearTimeout(drawCleanTimer);
|
|
@@ -11105,7 +11126,7 @@ const VideoBoxV2 = vue.defineComponent({
|
|
|
11105
11126
|
const vlmSwitchKey = vue.computed(() => {
|
|
11106
11127
|
return `showVlmInfo_${camera.value?.uuid}`;
|
|
11107
11128
|
});
|
|
11108
|
-
vue.watchEffect(() => {
|
|
11129
|
+
vue.watchEffect(async () => {
|
|
11109
11130
|
if (showVlmInfo.value) {
|
|
11110
11131
|
localStorage.removeItem(vlmSwitchKey.value);
|
|
11111
11132
|
} else {
|
|
@@ -11115,7 +11136,10 @@ const VideoBoxV2 = vue.defineComponent({
|
|
|
11115
11136
|
textBox: textBox2,
|
|
11116
11137
|
width,
|
|
11117
11138
|
height
|
|
11118
|
-
} = createFlogCanvas();
|
|
11139
|
+
} = await createFlogCanvas();
|
|
11140
|
+
if (!canvasDom2) {
|
|
11141
|
+
return;
|
|
11142
|
+
}
|
|
11119
11143
|
const ctx = canvasDom2.getContext("2d");
|
|
11120
11144
|
clearTimeout(drawCleanTimer);
|
|
11121
11145
|
removeTxtBox();
|
package/dist/index.d.ts
CHANGED
|
@@ -11,7 +11,7 @@ import { Key } from 'ant-design-vue/lib/table/interface';
|
|
|
11
11
|
import * as vue_jsx_runtime from 'vue/jsx-runtime';
|
|
12
12
|
import * as _ant_design_icons_vue_lib_components_IconFont from '@ant-design/icons-vue/lib/components/IconFont';
|
|
13
13
|
|
|
14
|
-
var version = "0.1.
|
|
14
|
+
var version = "0.1.132";
|
|
15
15
|
|
|
16
16
|
declare const _default$p: {
|
|
17
17
|
set(theme: string): void;
|
package/dist/index.js
CHANGED
|
@@ -14,7 +14,7 @@ import { XPopup, CommentBlock, setAxiosOption } from '@sszj-temp/mobile';
|
|
|
14
14
|
import { marked } from 'marked';
|
|
15
15
|
import '@sszj-temp/mobile/style.css';
|
|
16
16
|
|
|
17
|
-
var version = "0.1.
|
|
17
|
+
var version = "0.1.132";
|
|
18
18
|
|
|
19
19
|
const setTheme = theme => {
|
|
20
20
|
if (theme === "dark") {
|
|
@@ -10693,6 +10693,7 @@ const VideoBoxV2 = defineComponent({
|
|
|
10693
10693
|
}]];
|
|
10694
10694
|
const infos = ref([]);
|
|
10695
10695
|
const uuid = ref(UUID());
|
|
10696
|
+
let Mqtt = null;
|
|
10696
10697
|
onMounted(() => {
|
|
10697
10698
|
showInfo.value = _prop.showInfo;
|
|
10698
10699
|
});
|
|
@@ -10772,6 +10773,7 @@ const VideoBoxV2 = defineComponent({
|
|
|
10772
10773
|
streams.value = JSON.parse(camera.value?.brandTypePo?.streamTypeDict || "[]");
|
|
10773
10774
|
console.log("vlmSwitchKey.value", vlmSwitchKey.value);
|
|
10774
10775
|
console.log("localStorage.getItem(vlmSwitchKey.value)", localStorage.getItem(vlmSwitchKey.value));
|
|
10776
|
+
clearFlogCanvas();
|
|
10775
10777
|
if (localStorage.getItem(vlmSwitchKey.value) !== "false") {
|
|
10776
10778
|
showVlmInfo.value = true;
|
|
10777
10779
|
if (camera.value?.ip && showVlmInfo.value) {
|
|
@@ -10902,6 +10904,11 @@ const VideoBoxV2 = defineComponent({
|
|
|
10902
10904
|
}
|
|
10903
10905
|
};
|
|
10904
10906
|
watch(() => _prop.camera, val => {
|
|
10907
|
+
if (Mqtt) {
|
|
10908
|
+
console.log(`\u53D6\u6D88\u8BA2\u9605:${topic.value}`);
|
|
10909
|
+
Mqtt?.unsubscribe(topic.value);
|
|
10910
|
+
Mqtt = null;
|
|
10911
|
+
}
|
|
10905
10912
|
if (val && Object.keys(val).length != 0) {
|
|
10906
10913
|
setNewCamera(val);
|
|
10907
10914
|
}
|
|
@@ -10948,7 +10955,6 @@ const VideoBoxV2 = defineComponent({
|
|
|
10948
10955
|
}, null) : ""])]
|
|
10949
10956
|
});
|
|
10950
10957
|
};
|
|
10951
|
-
let Mqtt = null;
|
|
10952
10958
|
const topic = ref("");
|
|
10953
10959
|
const {
|
|
10954
10960
|
isFullscreen,
|
|
@@ -10973,15 +10979,27 @@ const VideoBoxV2 = defineComponent({
|
|
|
10973
10979
|
});
|
|
10974
10980
|
Mqtt.on("message", onMtMessageFn);
|
|
10975
10981
|
};
|
|
10976
|
-
const onMtMessageFn = (
|
|
10982
|
+
const onMtMessageFn = (topicStr, message2) => {
|
|
10983
|
+
if (topicStr !== topic.value) {
|
|
10984
|
+
return;
|
|
10985
|
+
}
|
|
10977
10986
|
const msg = new TextDecoder("utf-8").decode(message2);
|
|
10978
10987
|
console.log("msg", JSON.parse(msg));
|
|
10979
10988
|
drawFlog(JSON.parse(msg));
|
|
10980
10989
|
};
|
|
10981
10990
|
let canvasDom = null;
|
|
10982
10991
|
let textBox = null;
|
|
10983
|
-
const createFlogCanvas = () => {
|
|
10992
|
+
const createFlogCanvas = async () => {
|
|
10993
|
+
await nextTick();
|
|
10984
10994
|
const box = document.getElementById("videoBox_" + uuid.value);
|
|
10995
|
+
if (!box) {
|
|
10996
|
+
return {
|
|
10997
|
+
canvas: null,
|
|
10998
|
+
textBox: null,
|
|
10999
|
+
width: 0,
|
|
11000
|
+
height: 0
|
|
11001
|
+
};
|
|
11002
|
+
}
|
|
10985
11003
|
if (!canvasDom) {
|
|
10986
11004
|
canvasDom = document.createElement("canvas");
|
|
10987
11005
|
canvasDom.id = "canvas_" + uuid.value;
|
|
@@ -11026,13 +11044,16 @@ const VideoBoxV2 = defineComponent({
|
|
|
11026
11044
|
}
|
|
11027
11045
|
};
|
|
11028
11046
|
let drawCleanTimer = null;
|
|
11029
|
-
const drawFlog = data => {
|
|
11047
|
+
const drawFlog = async data => {
|
|
11030
11048
|
let {
|
|
11031
11049
|
canvasDom: canvasDom2,
|
|
11032
11050
|
width,
|
|
11033
11051
|
height,
|
|
11034
11052
|
textBox: textBox2
|
|
11035
|
-
} = createFlogCanvas();
|
|
11053
|
+
} = await createFlogCanvas();
|
|
11054
|
+
if (!canvasDom2) {
|
|
11055
|
+
return;
|
|
11056
|
+
}
|
|
11036
11057
|
const ctx = canvasDom2.getContext("2d");
|
|
11037
11058
|
if (drawCleanTimer) {
|
|
11038
11059
|
clearTimeout(drawCleanTimer);
|
|
@@ -11074,7 +11095,7 @@ const VideoBoxV2 = defineComponent({
|
|
|
11074
11095
|
const vlmSwitchKey = computed(() => {
|
|
11075
11096
|
return `showVlmInfo_${camera.value?.uuid}`;
|
|
11076
11097
|
});
|
|
11077
|
-
watchEffect(() => {
|
|
11098
|
+
watchEffect(async () => {
|
|
11078
11099
|
if (showVlmInfo.value) {
|
|
11079
11100
|
localStorage.removeItem(vlmSwitchKey.value);
|
|
11080
11101
|
} else {
|
|
@@ -11084,7 +11105,10 @@ const VideoBoxV2 = defineComponent({
|
|
|
11084
11105
|
textBox: textBox2,
|
|
11085
11106
|
width,
|
|
11086
11107
|
height
|
|
11087
|
-
} = createFlogCanvas();
|
|
11108
|
+
} = await createFlogCanvas();
|
|
11109
|
+
if (!canvasDom2) {
|
|
11110
|
+
return;
|
|
11111
|
+
}
|
|
11088
11112
|
const ctx = canvasDom2.getContext("2d");
|
|
11089
11113
|
clearTimeout(drawCleanTimer);
|
|
11090
11114
|
removeTxtBox();
|
package/dist/video/index.cjs
CHANGED
|
@@ -6777,6 +6777,7 @@ const VideoBoxV2 = vue.defineComponent({
|
|
|
6777
6777
|
}]];
|
|
6778
6778
|
const infos = vue.ref([]);
|
|
6779
6779
|
const uuid = vue.ref(UUID());
|
|
6780
|
+
let Mqtt = null;
|
|
6780
6781
|
vue.onMounted(() => {
|
|
6781
6782
|
showInfo.value = _prop.showInfo;
|
|
6782
6783
|
});
|
|
@@ -6856,6 +6857,7 @@ const VideoBoxV2 = vue.defineComponent({
|
|
|
6856
6857
|
streams.value = JSON.parse(camera.value?.brandTypePo?.streamTypeDict || "[]");
|
|
6857
6858
|
console.log("vlmSwitchKey.value", vlmSwitchKey.value);
|
|
6858
6859
|
console.log("localStorage.getItem(vlmSwitchKey.value)", localStorage.getItem(vlmSwitchKey.value));
|
|
6860
|
+
clearFlogCanvas();
|
|
6859
6861
|
if (localStorage.getItem(vlmSwitchKey.value) !== "false") {
|
|
6860
6862
|
showVlmInfo.value = true;
|
|
6861
6863
|
if (camera.value?.ip && showVlmInfo.value) {
|
|
@@ -6986,6 +6988,11 @@ const VideoBoxV2 = vue.defineComponent({
|
|
|
6986
6988
|
}
|
|
6987
6989
|
};
|
|
6988
6990
|
vue.watch(() => _prop.camera, val => {
|
|
6991
|
+
if (Mqtt) {
|
|
6992
|
+
console.log(`\u53D6\u6D88\u8BA2\u9605:${topic.value}`);
|
|
6993
|
+
Mqtt?.unsubscribe(topic.value);
|
|
6994
|
+
Mqtt = null;
|
|
6995
|
+
}
|
|
6989
6996
|
if (val && Object.keys(val).length != 0) {
|
|
6990
6997
|
setNewCamera(val);
|
|
6991
6998
|
}
|
|
@@ -7032,7 +7039,6 @@ const VideoBoxV2 = vue.defineComponent({
|
|
|
7032
7039
|
}, null) : ""])]
|
|
7033
7040
|
});
|
|
7034
7041
|
};
|
|
7035
|
-
let Mqtt = null;
|
|
7036
7042
|
const topic = vue.ref("");
|
|
7037
7043
|
const {
|
|
7038
7044
|
isFullscreen,
|
|
@@ -7057,15 +7063,27 @@ const VideoBoxV2 = vue.defineComponent({
|
|
|
7057
7063
|
});
|
|
7058
7064
|
Mqtt.on("message", onMtMessageFn);
|
|
7059
7065
|
};
|
|
7060
|
-
const onMtMessageFn = (
|
|
7066
|
+
const onMtMessageFn = (topicStr, message2) => {
|
|
7067
|
+
if (topicStr !== topic.value) {
|
|
7068
|
+
return;
|
|
7069
|
+
}
|
|
7061
7070
|
const msg = new TextDecoder("utf-8").decode(message2);
|
|
7062
7071
|
console.log("msg", JSON.parse(msg));
|
|
7063
7072
|
drawFlog(JSON.parse(msg));
|
|
7064
7073
|
};
|
|
7065
7074
|
let canvasDom = null;
|
|
7066
7075
|
let textBox = null;
|
|
7067
|
-
const createFlogCanvas = () => {
|
|
7076
|
+
const createFlogCanvas = async () => {
|
|
7077
|
+
await vue.nextTick();
|
|
7068
7078
|
const box = document.getElementById("videoBox_" + uuid.value);
|
|
7079
|
+
if (!box) {
|
|
7080
|
+
return {
|
|
7081
|
+
canvas: null,
|
|
7082
|
+
textBox: null,
|
|
7083
|
+
width: 0,
|
|
7084
|
+
height: 0
|
|
7085
|
+
};
|
|
7086
|
+
}
|
|
7069
7087
|
if (!canvasDom) {
|
|
7070
7088
|
canvasDom = document.createElement("canvas");
|
|
7071
7089
|
canvasDom.id = "canvas_" + uuid.value;
|
|
@@ -7110,13 +7128,16 @@ const VideoBoxV2 = vue.defineComponent({
|
|
|
7110
7128
|
}
|
|
7111
7129
|
};
|
|
7112
7130
|
let drawCleanTimer = null;
|
|
7113
|
-
const drawFlog = data => {
|
|
7131
|
+
const drawFlog = async data => {
|
|
7114
7132
|
let {
|
|
7115
7133
|
canvasDom: canvasDom2,
|
|
7116
7134
|
width,
|
|
7117
7135
|
height,
|
|
7118
7136
|
textBox: textBox2
|
|
7119
|
-
} = createFlogCanvas();
|
|
7137
|
+
} = await createFlogCanvas();
|
|
7138
|
+
if (!canvasDom2) {
|
|
7139
|
+
return;
|
|
7140
|
+
}
|
|
7120
7141
|
const ctx = canvasDom2.getContext("2d");
|
|
7121
7142
|
if (drawCleanTimer) {
|
|
7122
7143
|
clearTimeout(drawCleanTimer);
|
|
@@ -7158,7 +7179,7 @@ const VideoBoxV2 = vue.defineComponent({
|
|
|
7158
7179
|
const vlmSwitchKey = vue.computed(() => {
|
|
7159
7180
|
return `showVlmInfo_${camera.value?.uuid}`;
|
|
7160
7181
|
});
|
|
7161
|
-
vue.watchEffect(() => {
|
|
7182
|
+
vue.watchEffect(async () => {
|
|
7162
7183
|
if (showVlmInfo.value) {
|
|
7163
7184
|
localStorage.removeItem(vlmSwitchKey.value);
|
|
7164
7185
|
} else {
|
|
@@ -7168,7 +7189,10 @@ const VideoBoxV2 = vue.defineComponent({
|
|
|
7168
7189
|
textBox: textBox2,
|
|
7169
7190
|
width,
|
|
7170
7191
|
height
|
|
7171
|
-
} = createFlogCanvas();
|
|
7192
|
+
} = await createFlogCanvas();
|
|
7193
|
+
if (!canvasDom2) {
|
|
7194
|
+
return;
|
|
7195
|
+
}
|
|
7172
7196
|
const ctx = canvasDom2.getContext("2d");
|
|
7173
7197
|
clearTimeout(drawCleanTimer);
|
|
7174
7198
|
removeTxtBox();
|
package/dist/video/index.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { ref, defineComponent, reactive, watchEffect, watch, onBeforeUnmount, createVNode, Fragment, toRefs, resolveComponent, onMounted, withDirectives, vShow, isVNode, computed, shallowRef, onBeforeMount
|
|
1
|
+
import { ref, defineComponent, reactive, watchEffect, watch, onBeforeUnmount, createVNode, Fragment, toRefs, resolveComponent, onMounted, withDirectives, vShow, isVNode, computed, nextTick, shallowRef, onBeforeMount } from 'vue';
|
|
2
2
|
import { SearchOutlined, FullscreenOutlined, createFromIconfontCN } from '@ant-design/icons-vue';
|
|
3
3
|
import axios$2 from 'axios';
|
|
4
4
|
import { resolveRef, useFullscreen } from '@vueuse/core';
|
|
@@ -6750,6 +6750,7 @@ const VideoBoxV2 = defineComponent({
|
|
|
6750
6750
|
}]];
|
|
6751
6751
|
const infos = ref([]);
|
|
6752
6752
|
const uuid = ref(UUID());
|
|
6753
|
+
let Mqtt = null;
|
|
6753
6754
|
onMounted(() => {
|
|
6754
6755
|
showInfo.value = _prop.showInfo;
|
|
6755
6756
|
});
|
|
@@ -6829,6 +6830,7 @@ const VideoBoxV2 = defineComponent({
|
|
|
6829
6830
|
streams.value = JSON.parse(camera.value?.brandTypePo?.streamTypeDict || "[]");
|
|
6830
6831
|
console.log("vlmSwitchKey.value", vlmSwitchKey.value);
|
|
6831
6832
|
console.log("localStorage.getItem(vlmSwitchKey.value)", localStorage.getItem(vlmSwitchKey.value));
|
|
6833
|
+
clearFlogCanvas();
|
|
6832
6834
|
if (localStorage.getItem(vlmSwitchKey.value) !== "false") {
|
|
6833
6835
|
showVlmInfo.value = true;
|
|
6834
6836
|
if (camera.value?.ip && showVlmInfo.value) {
|
|
@@ -6959,6 +6961,11 @@ const VideoBoxV2 = defineComponent({
|
|
|
6959
6961
|
}
|
|
6960
6962
|
};
|
|
6961
6963
|
watch(() => _prop.camera, val => {
|
|
6964
|
+
if (Mqtt) {
|
|
6965
|
+
console.log(`\u53D6\u6D88\u8BA2\u9605:${topic.value}`);
|
|
6966
|
+
Mqtt?.unsubscribe(topic.value);
|
|
6967
|
+
Mqtt = null;
|
|
6968
|
+
}
|
|
6962
6969
|
if (val && Object.keys(val).length != 0) {
|
|
6963
6970
|
setNewCamera(val);
|
|
6964
6971
|
}
|
|
@@ -7005,7 +7012,6 @@ const VideoBoxV2 = defineComponent({
|
|
|
7005
7012
|
}, null) : ""])]
|
|
7006
7013
|
});
|
|
7007
7014
|
};
|
|
7008
|
-
let Mqtt = null;
|
|
7009
7015
|
const topic = ref("");
|
|
7010
7016
|
const {
|
|
7011
7017
|
isFullscreen,
|
|
@@ -7030,15 +7036,27 @@ const VideoBoxV2 = defineComponent({
|
|
|
7030
7036
|
});
|
|
7031
7037
|
Mqtt.on("message", onMtMessageFn);
|
|
7032
7038
|
};
|
|
7033
|
-
const onMtMessageFn = (
|
|
7039
|
+
const onMtMessageFn = (topicStr, message2) => {
|
|
7040
|
+
if (topicStr !== topic.value) {
|
|
7041
|
+
return;
|
|
7042
|
+
}
|
|
7034
7043
|
const msg = new TextDecoder("utf-8").decode(message2);
|
|
7035
7044
|
console.log("msg", JSON.parse(msg));
|
|
7036
7045
|
drawFlog(JSON.parse(msg));
|
|
7037
7046
|
};
|
|
7038
7047
|
let canvasDom = null;
|
|
7039
7048
|
let textBox = null;
|
|
7040
|
-
const createFlogCanvas = () => {
|
|
7049
|
+
const createFlogCanvas = async () => {
|
|
7050
|
+
await nextTick();
|
|
7041
7051
|
const box = document.getElementById("videoBox_" + uuid.value);
|
|
7052
|
+
if (!box) {
|
|
7053
|
+
return {
|
|
7054
|
+
canvas: null,
|
|
7055
|
+
textBox: null,
|
|
7056
|
+
width: 0,
|
|
7057
|
+
height: 0
|
|
7058
|
+
};
|
|
7059
|
+
}
|
|
7042
7060
|
if (!canvasDom) {
|
|
7043
7061
|
canvasDom = document.createElement("canvas");
|
|
7044
7062
|
canvasDom.id = "canvas_" + uuid.value;
|
|
@@ -7083,13 +7101,16 @@ const VideoBoxV2 = defineComponent({
|
|
|
7083
7101
|
}
|
|
7084
7102
|
};
|
|
7085
7103
|
let drawCleanTimer = null;
|
|
7086
|
-
const drawFlog = data => {
|
|
7104
|
+
const drawFlog = async data => {
|
|
7087
7105
|
let {
|
|
7088
7106
|
canvasDom: canvasDom2,
|
|
7089
7107
|
width,
|
|
7090
7108
|
height,
|
|
7091
7109
|
textBox: textBox2
|
|
7092
|
-
} = createFlogCanvas();
|
|
7110
|
+
} = await createFlogCanvas();
|
|
7111
|
+
if (!canvasDom2) {
|
|
7112
|
+
return;
|
|
7113
|
+
}
|
|
7093
7114
|
const ctx = canvasDom2.getContext("2d");
|
|
7094
7115
|
if (drawCleanTimer) {
|
|
7095
7116
|
clearTimeout(drawCleanTimer);
|
|
@@ -7131,7 +7152,7 @@ const VideoBoxV2 = defineComponent({
|
|
|
7131
7152
|
const vlmSwitchKey = computed(() => {
|
|
7132
7153
|
return `showVlmInfo_${camera.value?.uuid}`;
|
|
7133
7154
|
});
|
|
7134
|
-
watchEffect(() => {
|
|
7155
|
+
watchEffect(async () => {
|
|
7135
7156
|
if (showVlmInfo.value) {
|
|
7136
7157
|
localStorage.removeItem(vlmSwitchKey.value);
|
|
7137
7158
|
} else {
|
|
@@ -7141,7 +7162,10 @@ const VideoBoxV2 = defineComponent({
|
|
|
7141
7162
|
textBox: textBox2,
|
|
7142
7163
|
width,
|
|
7143
7164
|
height
|
|
7144
|
-
} = createFlogCanvas();
|
|
7165
|
+
} = await createFlogCanvas();
|
|
7166
|
+
if (!canvasDom2) {
|
|
7167
|
+
return;
|
|
7168
|
+
}
|
|
7145
7169
|
const ctx = canvasDom2.getContext("2d");
|
|
7146
7170
|
clearTimeout(drawCleanTimer);
|
|
7147
7171
|
removeTxtBox();
|