inl-ui 0.1.45 → 0.1.47

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

@@ -267,7 +267,7 @@ function useActiveMenu(menuList, extraPages, isNav = false, watchOnce = false, i
   return menu;
 }
 
-function _isSlot$c(s) {
+function _isSlot$d(s) {
   return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !vue.isVNode(s);
 }
 const Header$1 = vue.defineComponent({
@@ -362,7 +362,7 @@ const Header$1 = vue.defineComponent({
         "selectedKeys": acitveMenuKey.value,
         "onUpdate:selectedKeys": $event => acitveMenuKey.value = $event,
         "onSelect": handleMenuSelected
-      }, _isSlot$c(_slot = props.menu.map(item => vue.createVNode(antDesignVue.MenuItem, {
+      }, _isSlot$d(_slot = props.menu.map(item => vue.createVNode(antDesignVue.MenuItem, {
         "key": item.id,
         "title": item.name
       }, {
@@ -430,7 +430,7 @@ const Header$1 = vue.defineComponent({
   }
 });
 
-function _isSlot$b(s) {
+function _isSlot$c(s) {
   return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !vue.isVNode(s);
 }
 const renderMenuItem = item => {
@@ -512,7 +512,7 @@ const SideMenu$1 = vue.defineComponent({
         "onUpdate:openKeys": $event => expandKeys.value = $event,
         "selectedKeys": activeMenu.value,
         "onSelect": handleMenuSelect
-      }, _isSlot$b(_slot = props.menu.map(item => renderMenuItem(item))) ? _slot : {
+      }, _isSlot$c(_slot = props.menu.map(item => renderMenuItem(item))) ? _slot : {
         default: () => [_slot]
       });
     };
@@ -6542,7 +6542,7 @@ function getOpenUrl(url) {
 
 const closeTabMagicKey = "control_shift_q";
 const TabList = vue.defineComponent({
-  emits: ["update:activeKey", "update:list", "tabSelect", "closeExtraPage", "closeIframePage", "fullscreen", "refreshIframe", "refreshExtraPage"],
+  emits: ["update:activeKey", "update:list", "tabSelect", "closeExtraPage", "closeIframePage", "fullscreen", "refreshIframe", "refreshExtraPage", "mouseLeave"],
   props: {
     list: {
       type: Array,
@@ -6550,13 +6550,21 @@ const TabList = vue.defineComponent({
     },
     activeKey: {
       type: String
-    }
+    },
+    containerRef: Object
   },
   setup(props, {
     emit,
     expose
   }) {
     const qiankunState = vue.inject("qiankunState");
+    const tabListRef = vue.ref();
+    const {
+      isOutside
+    } = core.useMouseInElement(tabListRef);
+    vue.watchEffect(() => {
+      if (isOutside.value) emit("mouseLeave");
+    });
     const tabContainerRef = vue.ref();
     const tabList = core.useVModel(props, "list", emit);
     const activeTabKey = core.useVModel(props, "activeKey", emit);
@@ -6721,7 +6729,8 @@ const TabList = vue.defineComponent({
       closeTab
     });
     return () => vue.createVNode("div", {
-      "class": "tab-list"
+      "class": "tab-list",
+      "ref": tabListRef
     }, [vue.createVNode("div", {
       "class": "tabs-container",
       "ref": tabContainerRef,
@@ -6730,7 +6739,8 @@ const TabList = vue.defineComponent({
       "key": getTabUniqueKey(item),
       "placement": "bottomLeft",
       "trigger": ["contextmenu"],
-      "overlayClassName": "tabs-search-dropdown"
+      "overlayClassName": "tabs-search-dropdown",
+      "getPopupContainer": () => props.containerRef.value
     }, {
       default: () => [vue.createVNode(antDesignVue.Tooltip, {
         "title": item.name,
@@ -7061,7 +7071,21 @@ const PageContent = vue.defineComponent({
     const {
       isFullscreen,
       enter
-    } = core.useFullscreen(props.pageContainerRef);
+    } = core.useFullscreen(containerRef);
+    const {
+      elementY
+    } = core.useMouseInElement(containerRef);
+    const isTabsShow = vue.ref(false);
+    vue.watchEffect(() => {
+      if (isFullscreen.value) {
+        isTabsShow.value = false;
+      }
+    });
+    vue.watchEffect(() => {
+      if (elementY.value < 10) {
+        isTabsShow.value = true;
+      }
+    });
     const isPadding = vue.computed(() => {
       let iframePadding = false;
       if (activeKey.value) {
@@ -7129,19 +7153,21 @@ const PageContent = vue.defineComponent({
     return () => vue.createVNode("div", {
       "class": "page-content",
       "ref": containerRef
-    }, [props.showTabList && vue.createVNode(TabList, {
+    }, [props.showTabList && vue.withDirectives(vue.createVNode(TabList, {
       "ref": tabListRef,
       "activeKey": activeKey.value,
       "onUpdate:activeKey": $event => activeKey.value = $event,
       "list": tabList.value,
       "onUpdate:list": $event => tabList.value = $event,
+      "containerRef": containerRef,
       "onTabSelect": onTabSelect,
       "onCloseExtraPage": handleExtraPageClose,
       "onCloseIframePage": handleIframePageClose,
       "onFullscreen": handleFullscreen,
       "onRefreshIframe": handleRefreshIframe,
-      "onRefreshExtraPage": handleRefreshExtraPage
-    }, null), vue.createVNode("div", {
+      "onRefreshExtraPage": handleRefreshExtraPage,
+      "onMouseLeave": () => isTabsShow.value = false
+    }, null), [[vue.vShow, !isFullscreen.value || isTabsShow.value]]), vue.createVNode("div", {
       "class": ["page-container", {
         padding: isPadding.value,
         fullscreen: isFullscreen.value
@@ -7992,7 +8018,7 @@ const Header = vue.defineComponent({
 });
 var table = installComponent(Header, "layout-table");
 
-function _isSlot$a(s) {
+function _isSlot$b(s) {
   return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !vue.isVNode(s);
 }
 const SideMenu = vue.defineComponent({
@@ -8065,7 +8091,7 @@ const SideMenu = vue.defineComponent({
           "icon": menu.icon && vue.createVNode(IconFont$1, {
             "type": menu.icon
           }, null)
-        }, _isSlot$a(_slot = menu.subList.map(item => renderMenu(item))) ? _slot : {
+        }, _isSlot$b(_slot = menu.subList.map(item => renderMenu(item))) ? _slot : {
           default: () => [_slot]
         });
       }
@@ -8087,7 +8113,7 @@ const SideMenu = vue.defineComponent({
         "mode": "inline",
         "selectedKeys": activeMenu.value,
         "onSelect": handleMenuSelect
-      }, _isSlot$a(_slot2 = props.menuList.map(item => renderMenu(item))) ? _slot2 : {
+      }, _isSlot$b(_slot2 = props.menuList.map(item => renderMenu(item))) ? _slot2 : {
         default: () => [_slot2]
       });
     };
@@ -9136,6 +9162,293 @@ const VideoBox = vue.defineComponent({
 });
 var videoBox = installComponent(VideoBox, "video-box");
 
+function _isSlot$a(s) {
+  return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !vue.isVNode(s);
+}
+let dataList = [];
+const generateList = (data, obj) => {
+  for (let i = 0; i < data.length; i++) {
+    const node = _.cloneDeep(data[i]);
+    delete node.children;
+    obj.push({
+      ...node
+    });
+    if (data[i].children) {
+      generateList(data[i].children, obj);
+    }
+  }
+};
+const generateUniqueField = list => {
+  list.forEach(item => {
+    const parentUuid = item.parentUuid || 0;
+    item.uniqueField = `${parentUuid}-${item.uuid}`;
+    if (item.children?.length > 0) {
+      generateUniqueField(item.children);
+    }
+  });
+  return list;
+};
+var Tree = vue.defineComponent({
+  components: {},
+  props: {
+    groupFix: {
+      type: Number
+    },
+    checkable: {
+      type: Boolean,
+      default: () => false
+    },
+    showCameraIcon: {
+      type: Boolean,
+      default: () => false
+    },
+    selectedKeys: {
+      type: Array,
+      default: () => []
+    },
+    checkedKeys: {
+      type: Array,
+      default: () => []
+    }
+  },
+  emits: ["selectHandle", "checkChange"],
+  setup(props, context) {
+    const selectedKeys = vue.ref(props.selectedKeys);
+    const checkedKeys = vue.ref(props.checkedKeys);
+    const expandedKeys = vue.ref([]);
+    const searchValue = vue.ref("");
+    const autoExpandParent = vue.ref(true);
+    const gData = vue.ref();
+    const treeRef = vue.ref();
+    let treeDataRecord;
+    let initDataPromise;
+    const data = vue.reactive({
+      titleType: props.groupFix || 0,
+      list: []
+    });
+    const getQueryGroup = async params => {
+      return new Promise(async resolve => {
+        const res = await axios__default["default"].get("/api/vms/v1/cameraGroup/tree", {
+          headers: {
+            token: sessionStorage.getItem("token") || ""
+          },
+          params: {
+            groupTypeUuid: params.uuid,
+            cameraName: params.cameraName
+          }
+        });
+        dataList = [];
+        treeDataRecord = generateUniqueField(res.data.data);
+        generateList(treeDataRecord, dataList);
+        gData.value = filterTree(JSON.parse(JSON.stringify(treeDataRecord)), searchValue.value).arr;
+        resolve(true);
+      });
+    };
+    const getGroup = async () => {
+      return new Promise(async resolve => {
+        const res = await axios__default["default"].get("/api/vms/v1/cameraGroupType/findAll", {
+          headers: {
+            token: sessionStorage.getItem("token") || ""
+          }
+        });
+        data.list = res.data.data;
+        getQueryGroup(data.list[data.titleType]).then(() => {
+          resolve(true);
+        });
+      });
+    };
+    const titleTypeChange = index => {
+      gData.value = [];
+      getQueryGroup(data.list[index]);
+      return true;
+    };
+    const onExpand = keys => {
+      expandedKeys.value = keys;
+      autoExpandParent.value = false;
+    };
+    const onSelect = async (keys, info) => {
+      if (info.node.nodeType === "C") {
+        if (info.selected) {
+          selectedKeys.value = keys;
+          context.emit("selectHandle", info.node.dataRef);
+        }
+      }
+    };
+    const deleteBfromA = (arrA, arrB) => {
+      const obj = {};
+      arrA.forEach(key => {
+        obj[key] = key;
+      });
+      arrB.forEach(key => {
+        delete obj[key];
+      });
+      return Object.keys(obj);
+    };
+    const onCheck = async (keys, e) => {
+      let checkedNodes = [];
+      let checkedList = [];
+      generateList([e.node.dataRef], checkedList);
+      const checkedUuidArr = checkedList.filter(item => item.nodeType === "C").map(ele => ele.uuid);
+      const checkedKeyArr = uuidToKey([...new Set(checkedUuidArr)]);
+      if (e.checked) {
+        checkedKeys.value = [... /* @__PURE__ */new Set([...checkedKeys.value, ...checkedKeyArr])];
+      } else {
+        checkedKeys.value = deleteBfromA(checkedKeys.value, checkedKeyArr);
+      }
+      const uuids = checkedKeys.value.map(item => item.split("-")[1]);
+      const uuidRes = [...new Set(uuids)];
+      const treeList = [];
+      generateList(treeDataRecord, treeList);
+      treeList.forEach(element => {
+        if (uuidRes.indexOf(element.uuid) >= 0) {
+          checkedNodes.push({
+            uuid: element.uuid,
+            name: element.title
+          });
+        }
+      });
+      context.emit("checkChange", checkedNodes);
+    };
+    const removeChecked = value => {
+      const uniqueFieldList = uuidToKey([value]);
+      checkedKeys.value = checkedKeys.value.filter(key => !uniqueFieldList.includes(key));
+    };
+    const clearChecked = () => {
+      checkedKeys.value = [];
+      context.emit("checkChange", []);
+    };
+    const setCheckedKeys = arr => {
+      initDataPromise.then(() => {
+        checkedKeys.value = uuidToKey(arr);
+      });
+    };
+    const uuidToKey = arr => {
+      let list = [];
+      arr.forEach(uuid => {
+        const nodes = dataList.filter(item => item.uuid === uuid);
+        nodes.forEach(node => {
+          const parentUuid = node.parentUuid || 0;
+          list.push(`${parentUuid}-${node.uuid}`);
+        });
+      });
+      return list;
+    };
+    vue.watch(() => props.groupFix, n => {
+      data.titleType = n;
+      getQueryGroup(data.list[n]);
+    });
+    context.expose({
+      removeChecked,
+      clearChecked,
+      setCheckedKeys,
+      refreshTree: () => getQueryGroup(data.list[data.titleType])
+    });
+    vue.onMounted(() => {
+      initDataPromise = getGroup();
+    });
+    const filterTree = (arr, key) => {
+      let expandKeys = [];
+      let res = "noHave";
+      for (let i = 0; i < arr.length; i++) {
+        const obj = arr[i];
+        let childHave = "noHave";
+        if (obj.children && obj.children.length != 0) {
+          const {
+            res: resSub,
+            expandKeys: expandKeysSub
+          } = filterTree(obj.children, key);
+          childHave = resSub;
+          expandKeys = expandKeys.concat(expandKeysSub);
+        }
+        if (obj.title.indexOf(key) === -1 && childHave === "noHave") {
+          arr.splice(i, 1);
+          i--;
+          continue;
+        } else {
+          res = "have";
+          if (key.trim()) expandKeys.push(obj.uuid);
+        }
+      }
+      return {
+        arr,
+        res,
+        expandKeys
+      };
+    };
+    vue.watch(() => searchValue.value, value => {
+      const {
+        arr,
+        expandKeys
+      } = filterTree(JSON.parse(JSON.stringify(treeDataRecord)), searchValue.value);
+      gData.value = arr;
+      expandedKeys.value = expandKeys;
+    });
+    return () => {
+      let _slot;
+      return vue.createVNode("div", {
+        "class": "tree-camera"
+      }, [vue.createVNode("div", {
+        "class": "search-box"
+      }, [typeof props.groupFix !== "number" && vue.createVNode(vue.resolveComponent("a-select"), {
+        "style": "width:100%",
+        "onChange": e => titleTypeChange(e),
+        "value": data.titleType,
+        "onUpdate:value": $event => data.titleType = $event
+      }, _isSlot$a(_slot = data.list.map((item, index) => {
+        return vue.createVNode(vue.resolveComponent("a-select-option"), {
+          "value": index
+        }, {
+          default: () => [item.name]
+        });
+      })) ? _slot : {
+        default: () => [_slot]
+      }), vue.withDirectives(vue.createVNode(vue.resolveComponent("a-input"), {
+        "placeholder": "\u8F93\u5165\u76F8\u673A\u540D\u79F0",
+        "value": searchValue.value,
+        "onUpdate:value": $event => searchValue.value = $event
+      }, {
+        suffix: () => {
+          return vue.createVNode(iconsVue.SearchOutlined, {
+            "style": "color: rgba(0, 0, 0, 0.45)"
+          }, null);
+        }
+      }), [[vue.vShow, data.list && data.list.length > 0]])]), vue.createVNode("div", {
+        "class": "tree-wrap"
+      }, [vue.createVNode(vue.resolveComponent("a-tree"), {
+        "ref": treeRef,
+        "class": "tree-mins",
+        "showLine": true,
+        "onCheck": onCheck,
+        "onSelect": onSelect,
+        "selectedKeys": selectedKeys.value,
+        "checkedKeys": checkedKeys.value,
+        "expandedKeys": expandedKeys.value,
+        "autoExpandParent": autoExpandParent.value,
+        "tree-data": gData.value,
+        "onExpand": onExpand,
+        "checkable": props.checkable,
+        "fieldNames": {
+          key: "uniqueField"
+        }
+      }, {
+        title: item => {
+          return vue.createVNode("div", {
+            "class": "tree-icons-min flex"
+          }, [props.showCameraIcon && vue.createVNode("div", {
+            "class": "icons-min"
+          }, [vue.withDirectives(vue.createVNode("img", {
+            "class": "active-r",
+            "src": item.onlineStatus === "ONLINE" ? "/micro-assets/inl/video/operation/cameraOnline.svg" : "/micro-assets/inl/video/operation/cameraOffline.svg",
+            "alt": "\u5728\u7EBF"
+          }, null), [[vue.vShow, item.nodeType === "C"]])]), vue.createVNode("span", {
+            "class": ["xj", item.nodeType === "G" ? "gactive" : "", item.onlineStatus === "ONLINE" ? "yactive" : ""]
+          }, [item.title])]);
+        }
+      })])]);
+    };
+  }
+});
+
 const props$6 = {
   // 视频信息|视频源uuid
   camera: {
@@ -9153,7 +9466,7 @@ const props$6 = {
   // },
   btns: {
     type: Array,
-    default: ["fill", "look", "stream", "magnify", "direction", "fullScreen", "close"]
+    default: ["change", "fill", "look", "stream", "magnify", "direction", "fullScreen", "close"]
   },
   alarm: {
     default: false,
@@ -9169,7 +9482,7 @@ const VideoBoxV2 = vue.defineComponent({
   components: {
     VideoPlayerV2
   },
-  emits: ["close"],
+  emits: ["close", "change"],
   setup(_prop, _context) {
     const player = vue.ref();
     const cameraConfig = vue.ref({});
@@ -9366,18 +9679,21 @@ const VideoBoxV2 = vue.defineComponent({
       document?.addEventListener("mouseup", mouseupFun);
     };
     const fill = vue.ref("fill");
+    const setNewCamera = val => {
+      if (magnifyBtn.value) {
+        setZoom();
+      }
+      camera.value = void 0;
+      getVideoParams(val);
+      getVideoDetail(val);
+      const fillVal = localStorage.getItem(val);
+      if (fillVal) {
+        fill.value = fillVal;
+      }
+    };
     vue.watch(() => _prop.camera, val => {
       if (val && Object.keys(val).length != 0) {
-        if (magnifyBtn.value) {
-          setZoom();
-        }
-        camera.value = void 0;
-        getVideoParams(val);
-        getVideoDetail(val);
-        const fillVal = localStorage.getItem(val);
-        if (fillVal) {
-          fill.value = fillVal;
-        }
+        setNewCamera(val);
       }
     }, {
       deep: true,
@@ -9395,6 +9711,27 @@ const VideoBoxV2 = vue.defineComponent({
       });
       cameraConfig.value.webrtcTemplateMerged = res.data.data[0];
     };
+    const showChangeDialog = vue.ref(false);
+    const checkChange = res => {
+      showChangeDialog.value = false;
+      setNewCamera(res[0].uuid);
+      _context.emit("change", res[0].uuid);
+    };
+    const renderChangeCamera = () => {
+      return vue.createVNode(vue.resolveComponent("a-modal"), {
+        "title": "\u66F4\u6362\u6444\u50CF\u5934",
+        "visible": showChangeDialog.value,
+        "footer": null,
+        "onCancel": () => {
+          showChangeDialog.value = false;
+        }
+      }, {
+        default: () => [showChangeDialog.value ? vue.createVNode(Tree, {
+          "checkable": true,
+          "onCheckChange": checkChange
+        }, null) : ""]
+      });
+    };
     return () => vue.createVNode("div", {
       "id": "videoBox_" + uuid.value,
       "class": ["videoBox", _prop.alarm ? "alarm" : ""]
@@ -9450,6 +9787,14 @@ const VideoBoxV2 = vue.defineComponent({
     }, [_prop.btns.map(btn => {
       if (!(camera.value?.brandTypeCode === "MP4" && btn !== "close" && btn !== "fullScreen" && btn !== "look")) {
         switch (btn) {
+          case "change":
+            return vue.createVNode("img", {
+              "title": "\u66F4\u6362\u6444\u50CF\u5934",
+              "onClick": e => {
+                showChangeDialog.value = true;
+              },
+              "src": "/micro-assets/inl/video/controls/change.svg"
+            }, null);
           case "fill":
             return vue.createVNode("img", {
               "title": "\u62C9\u4F38/\u539F\u59CB\u5C3A\u5BF8",
@@ -9568,7 +9913,7 @@ const VideoBoxV2 = vue.defineComponent({
             }, null);
         }
       }
-    })])])]);
+    })])]), renderChangeCamera()]);
   }
 });
 var VideoBoxV2$1 = installComponent(VideoBoxV2, "video-box-v2");

package/dist/components/index.d.ts

@@ -650,7 +650,7 @@ declare const _default$7: vue.DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
-}, () => vue_jsx_runtime.JSX.Element, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, "close"[], "close", vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, Readonly<vue.ExtractPropTypes<{
+}, () => vue_jsx_runtime.JSX.Element, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, ("change" | "close")[], "change" | "close", vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, Readonly<vue.ExtractPropTypes<{
     camera: {
         require: boolean;
         type: StringConstructor;
@@ -685,6 +685,7 @@ declare const _default$7: vue.DefineComponent<{
         default: boolean;
     };
 }>> & {
+    onChange?: ((...args: any[]) => any) | undefined;
     onClose?: ((...args: any[]) => any) | undefined;
 }, {
     intervalTime: number;