inl-ui 0.1.129 → 0.1.131

package/README.md

@@ -1,49 +1,49 @@
-# 工业PC ui库
-
-前端通用库，包括组件、hooks、utils等。
-
-### 运行
-
-+ 开发模式 yarn dev
-+ 生产打包 yarn build
-+ 生成文档 yarn build:docs
-+ 打包图扑工具 yarn buildtp
-
-### 使用方法
-
-```javascript
-import inl from 'inl-ui';
-import 'inl-ui/dist/style.css';
-
-vue.use(inl)
-```
-
-
-
-### 激活主题
-
-**vite.config.ts**
-
-```javascript
-const additionalData = require("inl-ui/dist/theme").default;
-
-...
-
-css: {
-  preprocessorOptions: {
-    less: {
-      javascriptEnabled: true,
-      additionalData,
-    },
-  },
-},
-```
-
-### 文档链接
-
-##### [组件文档](./src/components/README.md)
-
-##### [hooks文档](./src/hooks/README.md)
-
-##### [Utils文档](./src/utils/README.md)
-
+# 工业PC ui库
+
+前端通用库，包括组件、hooks、utils等。
+
+### 运行
+
++ 开发模式 yarn dev
++ 生产打包 yarn build
++ 生成文档 yarn build:docs
++ 打包图扑工具 yarn buildtp
+
+### 使用方法
+
+```javascript
+import inl from 'inl-ui';
+import 'inl-ui/dist/style.css';
+
+vue.use(inl)
+```
+
+
+
+### 激活主题
+
+**vite.config.ts**
+
+```javascript
+const additionalData = require("inl-ui/dist/theme").default;
+
+...
+
+css: {
+  preprocessorOptions: {
+    less: {
+      javascriptEnabled: true,
+      additionalData,
+    },
+  },
+},
+```
+
+### 文档链接
+
+##### [组件文档](./src/components/README.md)
+
+##### [hooks文档](./src/hooks/README.md)
+
+##### [Utils文档](./src/utils/README.md)
+

package/dist/components/index.cjs

@@ -13,6 +13,7 @@ var qiankun = require('qiankun');
 var dayjs = require('dayjs');
 require('vite-plugin-qiankun');
 var renderWithQiankun = require('vite-plugin-qiankun/dist/helper');
+var mqtt = require('mqtt');
 var mobile = require('@sszj-temp/mobile');
 var marked = require('marked');
 
@@ -39,6 +40,7 @@ function _interopNamespace(e) {
 var axios__default = /*#__PURE__*/_interopDefaultLegacy(axios$2);
 var ___default = /*#__PURE__*/_interopDefaultLegacy(_);
 var dayjs__default = /*#__PURE__*/_interopDefaultLegacy(dayjs);
+var mqtt__default = /*#__PURE__*/_interopDefaultLegacy(mqtt);
 
 const config = {
   prefix: "inl",
@@ -9639,6 +9641,33 @@ var Tree = vue.defineComponent({
   }
 });
 
+let client = null;
+const ip = "10.255.9.121";
+let connectUrl = `ws://${ip}:8083/mqtt`;
+const useMqtt = async (options = {}) => {
+  if (client) {
+    return client;
+  }
+  return new Promise(async (resolve, reject) => {
+    const mqttOptions = {
+      url: connectUrl,
+      clientId: `llm_${new Date().getTime()}`,
+      username: "admin",
+      password: "admin123",
+      ...options
+    };
+    client = mqtt__default["default"].connect(connectUrl, mqttOptions);
+    client.on("connect", () => {
+      console.log("\u8FDE\u63A5\u6210\u529F");
+      resolve(client);
+    });
+    client.on("error", err => {
+      console.log("\u8FDE\u63A5\u5931\u8D25", err);
+      reject(err);
+    });
+  });
+};
+
 const props$6 = {
   // 视频信息|视频源uuid
   camera: {
@@ -9656,7 +9685,7 @@ const props$6 = {
   // },
   btns: {
     type: Array,
-    default: ["change", "fill", "look", "stream", "magnify", "direction", "fullScreen", "close"]
+    default: ["vlm", "change", "fill", "look", "stream", "magnify", "direction", "fullScreen", "close"]
   },
   alarm: {
     default: false,
@@ -9674,11 +9703,13 @@ const VideoBoxV2 = vue.defineComponent({
   },
   emits: ["close", "change"],
   setup(_prop, _context) {
+    const videoBoxRef = vue.ref();
     const player = vue.ref();
     const cameraConfig = vue.ref({});
     const streamHistory = vue.ref("");
     const streams = vue.ref([]);
     const showInfo = vue.ref(true);
+    const showVlmInfo = vue.ref(true);
     const magnifyBtn = vue.ref(false);
     const videoBtns = [[{
       text: "lup",
@@ -9784,10 +9815,25 @@ const VideoBoxV2 = vue.defineComponent({
       });
       camera.value = res.data.data;
       streams.value = JSON.parse(camera.value?.brandTypePo?.streamTypeDict || "[]");
+      console.log("vlmSwitchKey.value", vlmSwitchKey.value);
+      console.log("localStorage.getItem(vlmSwitchKey.value)", localStorage.getItem(vlmSwitchKey.value));
+      if (localStorage.getItem(vlmSwitchKey.value) !== "false") {
+        showVlmInfo.value = true;
+        if (camera.value?.ip && showVlmInfo.value) {
+          initMqtt(camera.value?.ip);
+        }
+      } else {
+        showVlmInfo.value = false;
+      }
     };
     let timeout;
     vue.ref(true);
-    vue.onBeforeUnmount(() => {});
+    vue.onBeforeUnmount(() => {
+      if (Mqtt) {
+        Mqtt?.unsubscribe(topic.value);
+        Mqtt = null;
+      }
+    });
     const resetZoom = () => {
       const chooseFieldDom = document.getElementById("chooseField_" + uuid.value);
       chooseFieldDom?.remove();
@@ -9947,9 +9993,153 @@ const VideoBoxV2 = vue.defineComponent({
         }, null) : ""])]
       });
     };
+    let Mqtt = null;
+    const topic = vue.ref("");
+    const {
+      isFullscreen,
+      enter,
+      exit,
+      toggle
+    } = core.useFullscreen(videoBoxRef);
+    vue.watch(() => isFullscreen.value, val => {
+      clearFlogCanvas();
+    });
+    const initMqtt = async ip => {
+      Mqtt = await useMqtt();
+      topic.value = `vlm/${ip}`;
+      Mqtt.subscribe(topic.value, {
+        qos: 2
+      }, err => {
+        if (!err) {
+          console.log(`\u8BA2\u9605\u6210\u529F\u4E3B\u9898:${topic.value}`);
+        } else {
+          console.log(`\u8BA2\u9605\u5931\u8D25:${err}`);
+        }
+      });
+      Mqtt.on("message", onMtMessageFn);
+    };
+    const onMtMessageFn = (topic2, message2) => {
+      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 box = document.getElementById("videoBox_" + uuid.value);
+      if (!canvasDom) {
+        canvasDom = document.createElement("canvas");
+        canvasDom.id = "canvas_" + uuid.value;
+        canvasDom.width = box.offsetWidth;
+        canvasDom.height = box.offsetHeight;
+        canvasDom.style.position = "absolute";
+        canvasDom.style.top = "0";
+        canvasDom.style.left = "0";
+        canvasDom.style.zIndex = "999";
+        canvasDom.style.pointerEvents = "none";
+        box.appendChild(canvasDom);
+      }
+      if (!textBox) {
+        textBox = document.createElement("div");
+        textBox.id = "textBox_" + uuid.value;
+        textBox.style.position = "absolute";
+        textBox.style.width = "100%";
+        textBox.style.left = "0";
+        textBox.style.zIndex = "1000";
+        textBox.style.pointerEvents = "none";
+        box.appendChild(textBox);
+      }
+      return {
+        canvasDom,
+        textBox,
+        width: box.offsetWidth,
+        height: box.offsetHeight
+      };
+    };
+    const clearFlogCanvas = () => {
+      if (canvasDom) {
+        canvasDom.remove();
+        canvasDom = null;
+      }
+      if (textBox) {
+        textBox.remove();
+        textBox = null;
+      }
+      if (drawCleanTimer) {
+        clearTimeout(drawCleanTimer);
+        drawCleanTimer = null;
+      }
+    };
+    let drawCleanTimer = null;
+    const drawFlog = data => {
+      let {
+        canvasDom: canvasDom2,
+        width,
+        height,
+        textBox: textBox2
+      } = createFlogCanvas();
+      const ctx = canvasDom2.getContext("2d");
+      if (drawCleanTimer) {
+        clearTimeout(drawCleanTimer);
+        ctx.clearRect(0, 0, canvasDom2.width, canvasDom2.height);
+      }
+      if (data.bboxes?.length > 0) {
+        (data.bboxes || []).forEach(rect => {
+          ctx.beginPath();
+          ctx.lineWidth = 2;
+          ctx.strokeStyle = rect.color || "red";
+          ctx.fillStyle = rect.color || "red";
+          ctx.rect(rect.xmin * width, rect.ymin * height, (rect.xmax - rect.xmin) * width, (rect.ymax - rect.ymin) * height);
+          ctx.stroke();
+        });
+      }
+      if (data.text) {
+        const fontSize = 16 * width / 800;
+        const margin = 10;
+        const marginTop = height * 0.1 + margin;
+        textBox2.innerHTML = data.text;
+        textBox2.style.top = marginTop + "px";
+        textBox2.style.backgroundColor = "rgba(255, 255, 255, 0.8)";
+        textBox2.style.color = data.text_color || "red";
+        textBox2.style.fontSize = `${fontSize}px`;
+        textBox2.style.padding = `${margin}px`;
+      } else {
+        removeTxtBox();
+      }
+      drawCleanTimer = setTimeout(() => {
+        ctx.clearRect(0, 0, canvasDom2.width, canvasDom2.height);
+        removeTxtBox();
+      }, data.seconds * 1e3);
+    };
+    const removeTxtBox = () => {
+      textBox.innerHTML = "";
+      textBox.remove();
+      textBox = null;
+    };
+    const vlmSwitchKey = vue.computed(() => {
+      return `showVlmInfo_${camera.value?.uuid}`;
+    });
+    vue.watchEffect(() => {
+      if (showVlmInfo.value) {
+        localStorage.removeItem(vlmSwitchKey.value);
+      } else {
+        localStorage.setItem(vlmSwitchKey.value, "false");
+        let {
+          canvasDom: canvasDom2,
+          textBox: textBox2,
+          width,
+          height
+        } = createFlogCanvas();
+        const ctx = canvasDom2.getContext("2d");
+        clearTimeout(drawCleanTimer);
+        removeTxtBox();
+        ctx.clearRect(0, 0, canvasDom2.width, canvasDom2.height);
+      }
+    });
     return () => vue.createVNode("div", {
       "id": "videoBox_" + uuid.value,
-      "class": ["videoBox", _prop.alarm ? "alarm" : ""]
+      "class": ["videoBox", _prop.alarm ? "alarm" : ""],
+      "ref": videoBoxRef
     }, [camera.value ? vue.createVNode(VideoPlayerV2, {
       "ref": player,
       "domId": uuid.value,
@@ -9992,7 +10182,7 @@ const VideoBoxV2 = vue.defineComponent({
       }, [vue.createVNode("div", null, [info.name ? `${info.name}\uFF1A` : ""]), vue.createVNode("div", {
         "class": "value"
       }, [info.displayValue && info.displayValue !== "null" ? info.displayValue + " " : ""]), vue.createVNode("div", null, [info.unit])]);
-    })]) : "", vue.createVNode("div", {
+    })]) : "", vue.withDirectives(vue.createVNode("div", {
       "class": "footer-min",
       "id": "footer_" + uuid.value
     }, [vue.createVNode("div", {
@@ -10003,6 +10193,20 @@ const VideoBoxV2 = vue.defineComponent({
     }, [_prop.btns.map(btn => {
       if (!(camera.value?.brandTypeCode === "MP4" && btn !== "close" && btn !== "fullScreen" && btn !== "look" && btn !== "change")) {
         switch (btn) {
+          case "vlm":
+            return vue.createVNode("img", {
+              "title": "\u6253\u5F00/\u5173\u95ED\u591A\u6A21\u6001",
+              "onClick": e => {
+                showVlmInfo.value = !showVlmInfo.value;
+                if (showVlmInfo.value) {
+                  initMqtt(camera.value?.ip);
+                } else {
+                  Mqtt?.unsubscribe(topic.value);
+                  Mqtt = null;
+                }
+              },
+              "src": showVlmInfo.value ? "/micro-assets/inl/video/controls/ai-show.svg" : "/micro-assets/inl/video/controls/ai-hide.svg"
+            }, null);
           case "change":
             return vue.createVNode("img", {
               "title": "\u66F4\u6362\u6444\u50CF\u5934",
@@ -10124,7 +10328,7 @@ const VideoBoxV2 = vue.defineComponent({
             return vue.createVNode("img", {
               "onClick": e => {
                 e.stopPropagation();
-                player.value.videoFull();
+                toggle();
               },
               "src": "/micro-assets/inl/video/putUp.png"
             }, null);
@@ -10137,7 +10341,7 @@ const VideoBoxV2 = vue.defineComponent({
             }, null);
         }
       }
-    })])]), renderChangeCamera()]);
+    })])]), [[vue.vShow, !isFullscreen.value]]), renderChangeCamera()]);
   }
 });
 var VideoBoxV2$1 = installComponent(VideoBoxV2, "video-box-v2");

package/dist/components/index.js

@@ -9,6 +9,7 @@ import { loadMicroApp } from 'qiankun';
 import dayjs from 'dayjs';
 import 'vite-plugin-qiankun';
 import { qiankunWindow } from 'vite-plugin-qiankun/dist/helper';
+import mqtt from 'mqtt';
 import { XPopup, CommentBlock, setAxiosOption } from '@sszj-temp/mobile';
 import { marked } from 'marked';
 
@@ -9611,6 +9612,33 @@ var Tree = defineComponent({
   }
 });
 
+let client = null;
+const ip = "10.255.9.121";
+let connectUrl = `ws://${ip}:8083/mqtt`;
+const useMqtt = async (options = {}) => {
+  if (client) {
+    return client;
+  }
+  return new Promise(async (resolve, reject) => {
+    const mqttOptions = {
+      url: connectUrl,
+      clientId: `llm_${new Date().getTime()}`,
+      username: "admin",
+      password: "admin123",
+      ...options
+    };
+    client = mqtt.connect(connectUrl, mqttOptions);
+    client.on("connect", () => {
+      console.log("\u8FDE\u63A5\u6210\u529F");
+      resolve(client);
+    });
+    client.on("error", err => {
+      console.log("\u8FDE\u63A5\u5931\u8D25", err);
+      reject(err);
+    });
+  });
+};
+
 const props$6 = {
   // 视频信息|视频源uuid
   camera: {
@@ -9628,7 +9656,7 @@ const props$6 = {
   // },
   btns: {
     type: Array,
-    default: ["change", "fill", "look", "stream", "magnify", "direction", "fullScreen", "close"]
+    default: ["vlm", "change", "fill", "look", "stream", "magnify", "direction", "fullScreen", "close"]
   },
   alarm: {
     default: false,
@@ -9646,11 +9674,13 @@ const VideoBoxV2 = defineComponent({
   },
   emits: ["close", "change"],
   setup(_prop, _context) {
+    const videoBoxRef = ref();
     const player = ref();
     const cameraConfig = ref({});
     const streamHistory = ref("");
     const streams = ref([]);
     const showInfo = ref(true);
+    const showVlmInfo = ref(true);
     const magnifyBtn = ref(false);
     const videoBtns = [[{
       text: "lup",
@@ -9756,10 +9786,25 @@ const VideoBoxV2 = defineComponent({
       });
       camera.value = res.data.data;
       streams.value = JSON.parse(camera.value?.brandTypePo?.streamTypeDict || "[]");
+      console.log("vlmSwitchKey.value", vlmSwitchKey.value);
+      console.log("localStorage.getItem(vlmSwitchKey.value)", localStorage.getItem(vlmSwitchKey.value));
+      if (localStorage.getItem(vlmSwitchKey.value) !== "false") {
+        showVlmInfo.value = true;
+        if (camera.value?.ip && showVlmInfo.value) {
+          initMqtt(camera.value?.ip);
+        }
+      } else {
+        showVlmInfo.value = false;
+      }
     };
     let timeout;
     ref(true);
-    onBeforeUnmount(() => {});
+    onBeforeUnmount(() => {
+      if (Mqtt) {
+        Mqtt?.unsubscribe(topic.value);
+        Mqtt = null;
+      }
+    });
     const resetZoom = () => {
       const chooseFieldDom = document.getElementById("chooseField_" + uuid.value);
       chooseFieldDom?.remove();
@@ -9919,9 +9964,153 @@ const VideoBoxV2 = defineComponent({
         }, null) : ""])]
       });
     };
+    let Mqtt = null;
+    const topic = ref("");
+    const {
+      isFullscreen,
+      enter,
+      exit,
+      toggle
+    } = useFullscreen(videoBoxRef);
+    watch(() => isFullscreen.value, val => {
+      clearFlogCanvas();
+    });
+    const initMqtt = async ip => {
+      Mqtt = await useMqtt();
+      topic.value = `vlm/${ip}`;
+      Mqtt.subscribe(topic.value, {
+        qos: 2
+      }, err => {
+        if (!err) {
+          console.log(`\u8BA2\u9605\u6210\u529F\u4E3B\u9898:${topic.value}`);
+        } else {
+          console.log(`\u8BA2\u9605\u5931\u8D25:${err}`);
+        }
+      });
+      Mqtt.on("message", onMtMessageFn);
+    };
+    const onMtMessageFn = (topic2, message2) => {
+      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 box = document.getElementById("videoBox_" + uuid.value);
+      if (!canvasDom) {
+        canvasDom = document.createElement("canvas");
+        canvasDom.id = "canvas_" + uuid.value;
+        canvasDom.width = box.offsetWidth;
+        canvasDom.height = box.offsetHeight;
+        canvasDom.style.position = "absolute";
+        canvasDom.style.top = "0";
+        canvasDom.style.left = "0";
+        canvasDom.style.zIndex = "999";
+        canvasDom.style.pointerEvents = "none";
+        box.appendChild(canvasDom);
+      }
+      if (!textBox) {
+        textBox = document.createElement("div");
+        textBox.id = "textBox_" + uuid.value;
+        textBox.style.position = "absolute";
+        textBox.style.width = "100%";
+        textBox.style.left = "0";
+        textBox.style.zIndex = "1000";
+        textBox.style.pointerEvents = "none";
+        box.appendChild(textBox);
+      }
+      return {
+        canvasDom,
+        textBox,
+        width: box.offsetWidth,
+        height: box.offsetHeight
+      };
+    };
+    const clearFlogCanvas = () => {
+      if (canvasDom) {
+        canvasDom.remove();
+        canvasDom = null;
+      }
+      if (textBox) {
+        textBox.remove();
+        textBox = null;
+      }
+      if (drawCleanTimer) {
+        clearTimeout(drawCleanTimer);
+        drawCleanTimer = null;
+      }
+    };
+    let drawCleanTimer = null;
+    const drawFlog = data => {
+      let {
+        canvasDom: canvasDom2,
+        width,
+        height,
+        textBox: textBox2
+      } = createFlogCanvas();
+      const ctx = canvasDom2.getContext("2d");
+      if (drawCleanTimer) {
+        clearTimeout(drawCleanTimer);
+        ctx.clearRect(0, 0, canvasDom2.width, canvasDom2.height);
+      }
+      if (data.bboxes?.length > 0) {
+        (data.bboxes || []).forEach(rect => {
+          ctx.beginPath();
+          ctx.lineWidth = 2;
+          ctx.strokeStyle = rect.color || "red";
+          ctx.fillStyle = rect.color || "red";
+          ctx.rect(rect.xmin * width, rect.ymin * height, (rect.xmax - rect.xmin) * width, (rect.ymax - rect.ymin) * height);
+          ctx.stroke();
+        });
+      }
+      if (data.text) {
+        const fontSize = 16 * width / 800;
+        const margin = 10;
+        const marginTop = height * 0.1 + margin;
+        textBox2.innerHTML = data.text;
+        textBox2.style.top = marginTop + "px";
+        textBox2.style.backgroundColor = "rgba(255, 255, 255, 0.8)";
+        textBox2.style.color = data.text_color || "red";
+        textBox2.style.fontSize = `${fontSize}px`;
+        textBox2.style.padding = `${margin}px`;
+      } else {
+        removeTxtBox();
+      }
+      drawCleanTimer = setTimeout(() => {
+        ctx.clearRect(0, 0, canvasDom2.width, canvasDom2.height);
+        removeTxtBox();
+      }, data.seconds * 1e3);
+    };
+    const removeTxtBox = () => {
+      textBox.innerHTML = "";
+      textBox.remove();
+      textBox = null;
+    };
+    const vlmSwitchKey = computed(() => {
+      return `showVlmInfo_${camera.value?.uuid}`;
+    });
+    watchEffect(() => {
+      if (showVlmInfo.value) {
+        localStorage.removeItem(vlmSwitchKey.value);
+      } else {
+        localStorage.setItem(vlmSwitchKey.value, "false");
+        let {
+          canvasDom: canvasDom2,
+          textBox: textBox2,
+          width,
+          height
+        } = createFlogCanvas();
+        const ctx = canvasDom2.getContext("2d");
+        clearTimeout(drawCleanTimer);
+        removeTxtBox();
+        ctx.clearRect(0, 0, canvasDom2.width, canvasDom2.height);
+      }
+    });
     return () => createVNode("div", {
       "id": "videoBox_" + uuid.value,
-      "class": ["videoBox", _prop.alarm ? "alarm" : ""]
+      "class": ["videoBox", _prop.alarm ? "alarm" : ""],
+      "ref": videoBoxRef
     }, [camera.value ? createVNode(VideoPlayerV2, {
       "ref": player,
       "domId": uuid.value,
@@ -9964,7 +10153,7 @@ const VideoBoxV2 = defineComponent({
       }, [createVNode("div", null, [info.name ? `${info.name}\uFF1A` : ""]), createVNode("div", {
         "class": "value"
       }, [info.displayValue && info.displayValue !== "null" ? info.displayValue + " " : ""]), createVNode("div", null, [info.unit])]);
-    })]) : "", createVNode("div", {
+    })]) : "", withDirectives(createVNode("div", {
       "class": "footer-min",
       "id": "footer_" + uuid.value
     }, [createVNode("div", {
@@ -9975,6 +10164,20 @@ const VideoBoxV2 = defineComponent({
     }, [_prop.btns.map(btn => {
       if (!(camera.value?.brandTypeCode === "MP4" && btn !== "close" && btn !== "fullScreen" && btn !== "look" && btn !== "change")) {
         switch (btn) {
+          case "vlm":
+            return createVNode("img", {
+              "title": "\u6253\u5F00/\u5173\u95ED\u591A\u6A21\u6001",
+              "onClick": e => {
+                showVlmInfo.value = !showVlmInfo.value;
+                if (showVlmInfo.value) {
+                  initMqtt(camera.value?.ip);
+                } else {
+                  Mqtt?.unsubscribe(topic.value);
+                  Mqtt = null;
+                }
+              },
+              "src": showVlmInfo.value ? "/micro-assets/inl/video/controls/ai-show.svg" : "/micro-assets/inl/video/controls/ai-hide.svg"
+            }, null);
           case "change":
             return createVNode("img", {
               "title": "\u66F4\u6362\u6444\u50CF\u5934",
@@ -10096,7 +10299,7 @@ const VideoBoxV2 = defineComponent({
             return createVNode("img", {
               "onClick": e => {
                 e.stopPropagation();
-                player.value.videoFull();
+                toggle();
               },
               "src": "/micro-assets/inl/video/putUp.png"
             }, null);
@@ -10109,7 +10312,7 @@ const VideoBoxV2 = defineComponent({
             }, null);
         }
       }
-    })])]), renderChangeCamera()]);
+    })])]), [[vShow, !isFullscreen.value]]), renderChangeCamera()]);
   }
 });
 var VideoBoxV2$1 = installComponent(VideoBoxV2, "video-box-v2");