inl-ui 0.1.134 → 0.1.136

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,7 +13,6 @@ 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');
 
@@ -40,7 +39,6 @@ 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",
@@ -7437,7 +7435,8 @@ const Layout = vue.defineComponent({
   emits: ["globalSearch", "personalCenter", "logout", "extraPage"],
   props: Props,
   setup(props, {
-    emit
+    emit,
+    expose
   }) {
     const route = vueRouter.useRoute();
     const qiankunState = vue.inject("qiankunState");
@@ -7471,9 +7470,16 @@ const Layout = vue.defineComponent({
       immediate: true,
       flush: "post"
     });
+    const openNewTab = menu => {
+      handleMenuSelect(menu);
+    };
+    expose({
+      openNewTab
+    });
     const currMenu = vue.ref();
     const handleMenuSelect = menu => {
       currMenu.value = menu;
+      console.log("currMenu.value", currMenu.value);
       vue.nextTick(() => currMenu.value = void 0);
     };
     vue.onBeforeUnmount(() => {
@@ -8748,7 +8754,6 @@ const getDetailContainer = () => vue.defineComponent({
           refreshKey: Date.now(),
           id: dataId.value
         });
-        console.log("detailList.value", detailList.value);
         setTimeout(() => {
           if (Array.isArray(qiankunState.value.extraTabs)) {
             const extraTabs = [...qiankunState.value.extraTabs, tab];
@@ -9641,33 +9646,6 @@ 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: {
@@ -9685,7 +9663,7 @@ const props$6 = {
   // },
   btns: {
     type: Array,
-    default: ["vlm", "change", "fill", "look", "stream", "magnify", "direction", "fullScreen", "close"]
+    default: ["change", "fill", "look", "stream", "magnify", "direction", "fullScreen", "close"]
   },
   alarm: {
     default: false,
@@ -9703,13 +9681,11 @@ 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",
@@ -9738,7 +9714,6 @@ const VideoBoxV2 = vue.defineComponent({
     }]];
     const infos = vue.ref([]);
     const uuid = vue.ref(UUID());
-    let Mqtt = null;
     vue.onMounted(() => {
       showInfo.value = _prop.showInfo;
     });
@@ -9816,26 +9791,10 @@ 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));
-      clearFlogCanvas();
-      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(() => {
-      if (Mqtt) {
-        Mqtt?.unsubscribe(topic.value);
-        Mqtt = null;
-      }
-    });
+    vue.onBeforeUnmount(() => {});
     const resetZoom = () => {
       const chooseFieldDom = document.getElementById("chooseField_" + uuid.value);
       chooseFieldDom?.remove();
@@ -9949,11 +9908,6 @@ const VideoBoxV2 = vue.defineComponent({
       }
     };
     vue.watch(() => _prop.camera, val => {
-      if (Mqtt) {
-        console.log(`\u53D6\u6D88\u8BA2\u9605:${topic.value}`);
-        Mqtt?.unsubscribe(topic.value);
-        Mqtt = null;
-      }
       if (val && Object.keys(val).length != 0) {
         setNewCamera(val);
       }
@@ -10000,169 +9954,9 @@ const VideoBoxV2 = vue.defineComponent({
         }, 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 = (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 = 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;
-        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.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 = async data => {
-      let {
-        canvasDom: canvasDom2,
-        width,
-        height,
-        textBox: textBox2
-      } = await createFlogCanvas();
-      if (!canvasDom2) {
-        return;
-      }
-      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.2)";
-        textBox2.style.color = data.text_color || "black";
-        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(async () => {
-      if (showVlmInfo.value) {
-        localStorage.removeItem(vlmSwitchKey.value);
-      } else {
-        localStorage.setItem(vlmSwitchKey.value, "false");
-        let {
-          canvasDom: canvasDom2,
-          textBox: textBox2,
-          width,
-          height
-        } = await createFlogCanvas();
-        if (!canvasDom2) {
-          return;
-        }
-        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" : ""],
-      "ref": videoBoxRef
+      "class": ["videoBox", _prop.alarm ? "alarm" : ""]
     }, [camera.value ? vue.createVNode(VideoPlayerV2, {
       "ref": player,
       "domId": uuid.value,
@@ -10205,7 +9999,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.withDirectives(vue.createVNode("div", {
+    })]) : "", vue.createVNode("div", {
       "class": "footer-min",
       "id": "footer_" + uuid.value
     }, [vue.createVNode("div", {
@@ -10216,20 +10010,6 @@ 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",
@@ -10351,7 +10131,7 @@ const VideoBoxV2 = vue.defineComponent({
             return vue.createVNode("img", {
               "onClick": e => {
                 e.stopPropagation();
-                toggle();
+                player.value.videoFull();
               },
               "src": "/micro-assets/inl/video/putUp.png"
             }, null);
@@ -10364,7 +10144,7 @@ const VideoBoxV2 = vue.defineComponent({
             }, null);
         }
       }
-    })])]), [[vue.vShow, !isFullscreen.value]]), renderChangeCamera()]);
+    })])]), renderChangeCamera()]);
   }
 });
 var VideoBoxV2$1 = installComponent(VideoBoxV2, "video-box-v2");