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.
@@ -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 = (topic2, message2) => {
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();
@@ -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 = (topic2, message2) => {
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.131";
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 = (topic2, message2) => {
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.131";
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.131";
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 = (topic2, message2) => {
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();
@@ -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 = (topic2, message2) => {
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();
@@ -1,4 +1,4 @@
1
- import { ref, defineComponent, reactive, watchEffect, watch, onBeforeUnmount, createVNode, Fragment, toRefs, resolveComponent, onMounted, withDirectives, vShow, isVNode, computed, shallowRef, onBeforeMount, nextTick } from 'vue';
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 = (topic2, message2) => {
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();
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "inl-ui",
3
- "version": "0.1.131",
3
+ "version": "0.1.133",
4
4
  "description": "工业 pc ui库",
5
5
  "main": "dist/index.cjs",
6
6
  "module": "dist/index.js",