inl-ui 0.1.131 → 0.1.132

package/dist/components/index.cjs

@@ -10018,15 +10018,27 @@ const VideoBoxV2 = vue.defineComponent({
       });
       Mqtt.on("message", onMtMessageFn);
     };
-    const onMtMessageFn = (topic2, message2) => {
+    const onMtMessageFn = (topicStr, message2) => {
+      if (topicStr !== topic.value) {
+        return;
+      }
       const msg = new TextDecoder("utf-8").decode(message2);
       console.log("msg", JSON.parse(msg));
       drawFlog(JSON.parse(msg));
     };
     let canvasDom = null;
     let textBox = null;
-    const createFlogCanvas = () => {
+    const createFlogCanvas = async () => {
+      await vue.nextTick();
       const box = document.getElementById("videoBox_" + uuid.value);
+      if (!box) {
+        return {
+          canvas: null,
+          textBox: null,
+          width: 0,
+          height: 0
+        };
+      }
       if (!canvasDom) {
         canvasDom = document.createElement("canvas");
         canvasDom.id = "canvas_" + uuid.value;
@@ -10071,13 +10083,16 @@ const VideoBoxV2 = vue.defineComponent({
       }
     };
     let drawCleanTimer = null;
-    const drawFlog = data => {
+    const drawFlog = async data => {
       let {
         canvasDom: canvasDom2,
         width,
         height,
         textBox: textBox2
-      } = createFlogCanvas();
+      } = await createFlogCanvas();
+      if (!canvasDom2) {
+        return;
+      }
       const ctx = canvasDom2.getContext("2d");
       if (drawCleanTimer) {
         clearTimeout(drawCleanTimer);
@@ -10119,7 +10134,7 @@ const VideoBoxV2 = vue.defineComponent({
     const vlmSwitchKey = vue.computed(() => {
       return `showVlmInfo_${camera.value?.uuid}`;
     });
-    vue.watchEffect(() => {
+    vue.watchEffect(async () => {
       if (showVlmInfo.value) {
         localStorage.removeItem(vlmSwitchKey.value);
       } else {
@@ -10129,7 +10144,10 @@ const VideoBoxV2 = vue.defineComponent({
           textBox: textBox2,
           width,
           height
-        } = createFlogCanvas();
+        } = await createFlogCanvas();
+        if (!canvasDom2) {
+          return;
+        }
         const ctx = canvasDom2.getContext("2d");
         clearTimeout(drawCleanTimer);
         removeTxtBox();

package/dist/components/index.js

@@ -9989,15 +9989,27 @@ const VideoBoxV2 = defineComponent({
       });
       Mqtt.on("message", onMtMessageFn);
     };
-    const onMtMessageFn = (topic2, message2) => {
+    const onMtMessageFn = (topicStr, message2) => {
+      if (topicStr !== topic.value) {
+        return;
+      }
       const msg = new TextDecoder("utf-8").decode(message2);
       console.log("msg", JSON.parse(msg));
       drawFlog(JSON.parse(msg));
     };
     let canvasDom = null;
     let textBox = null;
-    const createFlogCanvas = () => {
+    const createFlogCanvas = async () => {
+      await nextTick();
       const box = document.getElementById("videoBox_" + uuid.value);
+      if (!box) {
+        return {
+          canvas: null,
+          textBox: null,
+          width: 0,
+          height: 0
+        };
+      }
       if (!canvasDom) {
         canvasDom = document.createElement("canvas");
         canvasDom.id = "canvas_" + uuid.value;
@@ -10042,13 +10054,16 @@ const VideoBoxV2 = defineComponent({
       }
     };
     let drawCleanTimer = null;
-    const drawFlog = data => {
+    const drawFlog = async data => {
       let {
         canvasDom: canvasDom2,
         width,
         height,
         textBox: textBox2
-      } = createFlogCanvas();
+      } = await createFlogCanvas();
+      if (!canvasDom2) {
+        return;
+      }
       const ctx = canvasDom2.getContext("2d");
       if (drawCleanTimer) {
         clearTimeout(drawCleanTimer);
@@ -10090,7 +10105,7 @@ const VideoBoxV2 = defineComponent({
     const vlmSwitchKey = computed(() => {
       return `showVlmInfo_${camera.value?.uuid}`;
     });
-    watchEffect(() => {
+    watchEffect(async () => {
       if (showVlmInfo.value) {
         localStorage.removeItem(vlmSwitchKey.value);
       } else {
@@ -10100,7 +10115,10 @@ const VideoBoxV2 = defineComponent({
           textBox: textBox2,
           width,
           height
-        } = createFlogCanvas();
+        } = await createFlogCanvas();
+        if (!canvasDom2) {
+          return;
+        }
         const ctx = canvasDom2.getContext("2d");
         clearTimeout(drawCleanTimer);
         removeTxtBox();

package/dist/index.cjs

@@ -11004,15 +11004,27 @@ const VideoBoxV2 = vue.defineComponent({
       });
       Mqtt.on("message", onMtMessageFn);
     };
-    const onMtMessageFn = (topic2, message2) => {
+    const onMtMessageFn = (topicStr, message2) => {
+      if (topicStr !== topic.value) {
+        return;
+      }
       const msg = new TextDecoder("utf-8").decode(message2);
       console.log("msg", JSON.parse(msg));
       drawFlog(JSON.parse(msg));
     };
     let canvasDom = null;
     let textBox = null;
-    const createFlogCanvas = () => {
+    const createFlogCanvas = async () => {
+      await vue.nextTick();
       const box = document.getElementById("videoBox_" + uuid.value);
+      if (!box) {
+        return {
+          canvas: null,
+          textBox: null,
+          width: 0,
+          height: 0
+        };
+      }
       if (!canvasDom) {
         canvasDom = document.createElement("canvas");
         canvasDom.id = "canvas_" + uuid.value;
@@ -11057,13 +11069,16 @@ const VideoBoxV2 = vue.defineComponent({
       }
     };
     let drawCleanTimer = null;
-    const drawFlog = data => {
+    const drawFlog = async data => {
       let {
         canvasDom: canvasDom2,
         width,
         height,
         textBox: textBox2
-      } = createFlogCanvas();
+      } = await createFlogCanvas();
+      if (!canvasDom2) {
+        return;
+      }
       const ctx = canvasDom2.getContext("2d");
       if (drawCleanTimer) {
         clearTimeout(drawCleanTimer);
@@ -11105,7 +11120,7 @@ const VideoBoxV2 = vue.defineComponent({
     const vlmSwitchKey = vue.computed(() => {
       return `showVlmInfo_${camera.value?.uuid}`;
     });
-    vue.watchEffect(() => {
+    vue.watchEffect(async () => {
       if (showVlmInfo.value) {
         localStorage.removeItem(vlmSwitchKey.value);
       } else {
@@ -11115,7 +11130,10 @@ const VideoBoxV2 = vue.defineComponent({
           textBox: textBox2,
           width,
           height
-        } = createFlogCanvas();
+        } = await createFlogCanvas();
+        if (!canvasDom2) {
+          return;
+        }
         const ctx = canvasDom2.getContext("2d");
         clearTimeout(drawCleanTimer);
         removeTxtBox();

package/dist/index.js

@@ -10973,15 +10973,27 @@ const VideoBoxV2 = defineComponent({
       });
       Mqtt.on("message", onMtMessageFn);
     };
-    const onMtMessageFn = (topic2, message2) => {
+    const onMtMessageFn = (topicStr, message2) => {
+      if (topicStr !== topic.value) {
+        return;
+      }
       const msg = new TextDecoder("utf-8").decode(message2);
       console.log("msg", JSON.parse(msg));
       drawFlog(JSON.parse(msg));
     };
     let canvasDom = null;
     let textBox = null;
-    const createFlogCanvas = () => {
+    const createFlogCanvas = async () => {
+      await nextTick();
       const box = document.getElementById("videoBox_" + uuid.value);
+      if (!box) {
+        return {
+          canvas: null,
+          textBox: null,
+          width: 0,
+          height: 0
+        };
+      }
       if (!canvasDom) {
         canvasDom = document.createElement("canvas");
         canvasDom.id = "canvas_" + uuid.value;
@@ -11026,13 +11038,16 @@ const VideoBoxV2 = defineComponent({
       }
     };
     let drawCleanTimer = null;
-    const drawFlog = data => {
+    const drawFlog = async data => {
       let {
         canvasDom: canvasDom2,
         width,
         height,
         textBox: textBox2
-      } = createFlogCanvas();
+      } = await createFlogCanvas();
+      if (!canvasDom2) {
+        return;
+      }
       const ctx = canvasDom2.getContext("2d");
       if (drawCleanTimer) {
         clearTimeout(drawCleanTimer);
@@ -11074,7 +11089,7 @@ const VideoBoxV2 = defineComponent({
     const vlmSwitchKey = computed(() => {
       return `showVlmInfo_${camera.value?.uuid}`;
     });
-    watchEffect(() => {
+    watchEffect(async () => {
       if (showVlmInfo.value) {
         localStorage.removeItem(vlmSwitchKey.value);
       } else {
@@ -11084,7 +11099,10 @@ const VideoBoxV2 = defineComponent({
           textBox: textBox2,
           width,
           height
-        } = createFlogCanvas();
+        } = await createFlogCanvas();
+        if (!canvasDom2) {
+          return;
+        }
         const ctx = canvasDom2.getContext("2d");
         clearTimeout(drawCleanTimer);
         removeTxtBox();

package/dist/video/index.cjs

@@ -7057,15 +7057,27 @@ const VideoBoxV2 = vue.defineComponent({
       });
       Mqtt.on("message", onMtMessageFn);
     };
-    const onMtMessageFn = (topic2, message2) => {
+    const onMtMessageFn = (topicStr, message2) => {
+      if (topicStr !== topic.value) {
+        return;
+      }
       const msg = new TextDecoder("utf-8").decode(message2);
       console.log("msg", JSON.parse(msg));
       drawFlog(JSON.parse(msg));
     };
     let canvasDom = null;
     let textBox = null;
-    const createFlogCanvas = () => {
+    const createFlogCanvas = async () => {
+      await vue.nextTick();
       const box = document.getElementById("videoBox_" + uuid.value);
+      if (!box) {
+        return {
+          canvas: null,
+          textBox: null,
+          width: 0,
+          height: 0
+        };
+      }
       if (!canvasDom) {
         canvasDom = document.createElement("canvas");
         canvasDom.id = "canvas_" + uuid.value;
@@ -7110,13 +7122,16 @@ const VideoBoxV2 = vue.defineComponent({
       }
     };
     let drawCleanTimer = null;
-    const drawFlog = data => {
+    const drawFlog = async data => {
       let {
         canvasDom: canvasDom2,
         width,
         height,
         textBox: textBox2
-      } = createFlogCanvas();
+      } = await createFlogCanvas();
+      if (!canvasDom2) {
+        return;
+      }
       const ctx = canvasDom2.getContext("2d");
       if (drawCleanTimer) {
         clearTimeout(drawCleanTimer);
@@ -7158,7 +7173,7 @@ const VideoBoxV2 = vue.defineComponent({
     const vlmSwitchKey = vue.computed(() => {
       return `showVlmInfo_${camera.value?.uuid}`;
     });
-    vue.watchEffect(() => {
+    vue.watchEffect(async () => {
       if (showVlmInfo.value) {
         localStorage.removeItem(vlmSwitchKey.value);
       } else {
@@ -7168,7 +7183,10 @@ const VideoBoxV2 = vue.defineComponent({
           textBox: textBox2,
           width,
           height
-        } = createFlogCanvas();
+        } = await createFlogCanvas();
+        if (!canvasDom2) {
+          return;
+        }
         const ctx = canvasDom2.getContext("2d");
         clearTimeout(drawCleanTimer);
         removeTxtBox();

package/dist/video/index.js

@@ -1,4 +1,4 @@
-import { ref, defineComponent, reactive, watchEffect, watch, onBeforeUnmount, createVNode, Fragment, toRefs, resolveComponent, onMounted, withDirectives, vShow, isVNode, computed, shallowRef, onBeforeMount, nextTick } from 'vue';
+import { ref, defineComponent, reactive, watchEffect, watch, onBeforeUnmount, createVNode, Fragment, toRefs, resolveComponent, onMounted, withDirectives, vShow, isVNode, computed, nextTick, shallowRef, onBeforeMount } from 'vue';
 import { SearchOutlined, FullscreenOutlined, createFromIconfontCN } from '@ant-design/icons-vue';
 import axios$2 from 'axios';
 import { resolveRef, useFullscreen } from '@vueuse/core';
@@ -7030,15 +7030,27 @@ const VideoBoxV2 = defineComponent({
       });
       Mqtt.on("message", onMtMessageFn);
     };
-    const onMtMessageFn = (topic2, message2) => {
+    const onMtMessageFn = (topicStr, message2) => {
+      if (topicStr !== topic.value) {
+        return;
+      }
       const msg = new TextDecoder("utf-8").decode(message2);
       console.log("msg", JSON.parse(msg));
       drawFlog(JSON.parse(msg));
     };
     let canvasDom = null;
     let textBox = null;
-    const createFlogCanvas = () => {
+    const createFlogCanvas = async () => {
+      await nextTick();
       const box = document.getElementById("videoBox_" + uuid.value);
+      if (!box) {
+        return {
+          canvas: null,
+          textBox: null,
+          width: 0,
+          height: 0
+        };
+      }
       if (!canvasDom) {
         canvasDom = document.createElement("canvas");
         canvasDom.id = "canvas_" + uuid.value;
@@ -7083,13 +7095,16 @@ const VideoBoxV2 = defineComponent({
       }
     };
     let drawCleanTimer = null;
-    const drawFlog = data => {
+    const drawFlog = async data => {
       let {
         canvasDom: canvasDom2,
         width,
         height,
         textBox: textBox2
-      } = createFlogCanvas();
+      } = await createFlogCanvas();
+      if (!canvasDom2) {
+        return;
+      }
       const ctx = canvasDom2.getContext("2d");
       if (drawCleanTimer) {
         clearTimeout(drawCleanTimer);
@@ -7131,7 +7146,7 @@ const VideoBoxV2 = defineComponent({
     const vlmSwitchKey = computed(() => {
       return `showVlmInfo_${camera.value?.uuid}`;
     });
-    watchEffect(() => {
+    watchEffect(async () => {
       if (showVlmInfo.value) {
         localStorage.removeItem(vlmSwitchKey.value);
       } else {
@@ -7141,7 +7156,10 @@ const VideoBoxV2 = defineComponent({
           textBox: textBox2,
           width,
           height
-        } = createFlogCanvas();
+        } = await createFlogCanvas();
+        if (!canvasDom2) {
+          return;
+        }
         const ctx = canvasDom2.getContext("2d");
         clearTimeout(drawCleanTimer);
         removeTxtBox();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "inl-ui",
-  "version": "0.1.131",
+  "version": "0.1.132",
   "description": "工业 pc ui库",
   "main": "dist/index.cjs",
   "module": "dist/index.js",