inl-ui 0.1.37 → 0.1.39

package/dist/components/index.cjs

@@ -8772,14 +8772,6 @@ const VideoPlayerV2 = vue.defineComponent({
         }
       });
     };
-    const stopV = id => {
-      const videoElement = document.getElementById(id);
-      if (videoElement) {
-        videoElement.pause();
-        videoElement.removeAttribute("src");
-        videoElement.load();
-      }
-    };
     const releaseUrl = vue.ref("");
     const release = async () => {
       const res = await axios__default["default"].get(releaseUrl.value);
@@ -8829,7 +8821,6 @@ const VideoPlayerV2 = vue.defineComponent({
     };
     vue.watch([() => _prop.camera, () => _prop.cameraConfig], ([camera, cameraConfig]) => {
       stopPlay();
-      stopV(`videoPlayer_${uuid}`);
       getVideoDetail(camera);
     }, {
       immediate: true,
@@ -8837,27 +8828,27 @@ const VideoPlayerV2 = vue.defineComponent({
     });
     vue.onBeforeUnmount(() => {
       stopPlay();
-      const videoElement = document.getElementById(`videoPlayer_${uuid}`);
-      if (videoElement) {
-        videoElement.pause();
-        videoElement.src = null;
-        videoElement.srcObject = null;
-        videoElement.remove();
-      }
     });
-    return () => videoInfo2.value.brandTypeCode !== "MP4" ? vue.createVNode("video", {
-      "id": `videoPlayer_${uuid}`,
-      "class": `videoComponent ${_prop.fill}`,
-      "muted": true,
-      "autoplay": true
-    }, null) : vue.createVNode("video", {
-      "id": `videoPlayer_${uuid}`,
-      "class": "videoComponent fill",
-      "src": videoInfo2.value.mp4ResourcesPath,
-      "autoplay": true,
-      "loop": true,
-      "muted": true
-    }, null);
+    const renderVideo = () => {
+      if (videoInfo2.value.brandTypeCode === "MP4") {
+        return vue.createVNode("video", {
+          "id": `mp4Player_${uuid}`,
+          "class": "videoComponent fill",
+          "src": videoInfo2.value.mp4ResourcesPath,
+          "autoplay": true,
+          "loop": true,
+          "muted": true
+        }, null);
+      } else {
+        return vue.createVNode("video", {
+          "id": `videoPlayer_${uuid}`,
+          "class": `videoComponent ${_prop.fill}`,
+          "muted": true,
+          "autoplay": true
+        }, null);
+      }
+    };
+    return () => vue.createVNode(vue.Fragment, null, [renderVideo()]);
   }
 });
 var videoPlayerV2 = installComponent(VideoPlayerV2, "video-player-v2");
@@ -9162,7 +9153,7 @@ const props$6 = {
   // },
   btns: {
     type: Array,
-    default: ["fill", "look", "stream", "direction", "fullScreen", "close"]
+    default: ["fill", "look", "stream", "magnify", "direction", "fullScreen", "close"]
   },
   alarm: {
     default: false,
@@ -9185,6 +9176,7 @@ const VideoBoxV2 = vue.defineComponent({
     const streamHistory = vue.ref("");
     const streams = vue.ref([]);
     const showInfo = vue.ref(true);
+    const magnifyBtn = vue.ref(false);
     const videoBtns = [[{
       text: "lup",
       signal: 25
@@ -9211,7 +9203,7 @@ const VideoBoxV2 = vue.defineComponent({
       signal: 28
     }]];
     const infos = vue.ref([]);
-    const uuid = UUID();
+    const uuid = vue.ref(UUID());
     vue.onMounted(() => {
       showInfo.value = _prop.showInfo;
     });
@@ -9288,14 +9280,83 @@ const VideoBoxV2 = vue.defineComponent({
         }
       });
       camera.value = res.data.data;
-      streams.value = JSON.parse(camera.value.brandTypePo?.streamTypeDict || "[]");
+      streams.value = JSON.parse(camera.value?.brandTypePo?.streamTypeDict || "[]");
     };
     let timeout;
     vue.ref(true);
     vue.onBeforeUnmount(() => {});
+    const resetZoom = () => {
+      const chooseFieldDom = document.getElementById("chooseField_" + uuid.value);
+      chooseFieldDom?.remove();
+      const dom = document.getElementById("videoPlayer_" + uuid.value);
+      dom.style.left = "0px";
+      dom.style.top = "0px";
+      dom.style.width = "100%";
+      dom.style.height = "100%";
+    };
+    let boxDom;
+    let playerDom;
+    let newDiv;
+    let begin = {
+      left: 0,
+      top: 0
+    };
+    let mousedownEvent;
+    const mousemoveFun = mousemoveEvent => {
+      newDiv.style.width = Math.abs(mousemoveEvent.offsetX - mousedownEvent.offsetX) - 3 + "px";
+      newDiv.style.height = Math.abs(mousemoveEvent.offsetY - mousedownEvent.offsetY) - 3 + "px";
+      newDiv.style.left = Math.min(mousedownEvent.offsetX, mousemoveEvent.offsetX) + begin.left + "px";
+      newDiv.style.top = Math.min(mousedownEvent.offsetY, mousemoveEvent.offsetY) + begin.top + "px";
+    };
+    const mousedownFun = e => {
+      mousedownEvent = e;
+      begin.left = Number(playerDom.style.left.split("px")[0]);
+      begin.top = Number(playerDom.style.top.split("px")[0]);
+      newDiv = document.createElement("div");
+      newDiv.id = "tempDiv";
+      newDiv.style.left = mousedownEvent.offsetX + begin.left + "px";
+      newDiv.style.top = mousedownEvent.offsetY + begin.top + "px";
+      boxDom.appendChild(newDiv);
+      playerDom?.addEventListener("mousemove", mousemoveFun);
+    };
+    const mouseupFun = mouseupEvent => {
+      playerDom?.removeEventListener("mousemove", mousemoveFun);
+      newDiv.remove();
+      const scaleX = Math.abs(mouseupEvent.pageX - mousedownEvent.pageX) / boxDom.offsetWidth;
+      const scaleY = Math.abs(mouseupEvent.pageY - mousedownEvent.pageY) / boxDom.offsetHeight;
+      const playerLeft = Math.min(mousedownEvent.offsetX, mouseupEvent.offsetX) * -1 / scaleX;
+      const playerTop = Math.min(mousedownEvent.offsetY, mouseupEvent.offsetY) * -1 / scaleY;
+      const playerWidth = playerDom.offsetWidth / scaleX;
+      const playerHeight = playerDom.offsetHeight / scaleY;
+      playerDom.style.left = playerLeft + "px";
+      playerDom.style.top = playerTop + "px";
+      playerDom.style.width = playerWidth + "px";
+      playerDom.style.height = playerHeight + "px";
+      const chooseFieldDom = document.getElementById("chooseField_" + uuid.value);
+      chooseFieldDom.style.width = chooseFieldDom.offsetWidth * scaleX + "px";
+      chooseFieldDom.style.height = chooseFieldDom.offsetHeight * scaleY + "px";
+      const thumbnailDom = document.getElementById("thumbnail_" + uuid.value);
+      chooseFieldDom.style.left = thumbnailDom.offsetWidth * -1 * playerLeft / playerWidth + "px";
+      chooseFieldDom.style.top = thumbnailDom.offsetHeight * -1 * playerTop / playerHeight + "px";
+    };
+    const setZoom = async () => {
+      boxDom = document.getElementById("videoBox_" + uuid.value);
+      playerDom = document.getElementById("videoPlayer_" + uuid.value);
+      if (magnifyBtn.value) {
+        magnifyBtn.value = !magnifyBtn.value;
+        playerDom?.removeEventListener("mousedown", mousedownFun);
+        playerDom?.removeEventListener("mouseup", mouseupFun);
+        resetZoom();
+        return;
+      }
+      magnifyBtn.value = !magnifyBtn.value;
+      playerDom?.addEventListener("mousedown", mousedownFun);
+      playerDom?.addEventListener("mouseup", mouseupFun);
+    };
     const fill = vue.ref("fill");
     vue.watch(() => _prop.camera, val => {
       if (val && Object.keys(val).length != 0) {
+        camera.value = void 0;
         getVideoParams(val);
         getVideoDetail(val);
         const fillVal = localStorage.getItem(val);
@@ -9313,27 +9374,44 @@ const VideoBoxV2 = vue.defineComponent({
           token: sessionStorage.getItem("token") || ""
         },
         params: {
-          uuid: camera.value.uuid,
+          uuid: camera.value?.uuid,
           chosenStreamType: code
         }
       });
       cameraConfig.value.webrtcTemplateMerged = res.data.data[0];
     };
     return () => vue.createVNode("div", {
-      "id": "videoBox_" + uuid,
+      "id": "videoBox_" + uuid.value,
       "class": ["videoBox", _prop.alarm ? "alarm" : ""]
+    }, [camera.value ? vue.createVNode(VideoPlayerV2, {
+      "ref": player,
+      "domId": uuid.value,
+      "camera": camera.value,
+      "cameraConfig": cameraConfig.value,
+      "fill": fill.value,
+      "onChangeStream": () => {
+        cameraConfig.value = {
+          streamType: streamHistory.value || camera.value?.streamType
+        };
+      }
+    }, null) : "", magnifyBtn.value ? vue.createVNode("div", {
+      "class": "thumbnail",
+      "id": "thumbnail_" + uuid.value
     }, [vue.createVNode(VideoPlayerV2, {
       "ref": player,
-      "domId": uuid,
+      "domId": UUID(),
       "camera": camera.value,
       "cameraConfig": cameraConfig.value,
       "fill": fill.value,
       "onChangeStream": () => {
         cameraConfig.value = {
-          streamType: streamHistory.value || camera.value.streamType
+          streamType: streamHistory.value || camera.value?.streamType
         };
       }
-    }, null), showInfo.value ? vue.createVNode("div", {
+    }, null), vue.createVNode("div", {
+      "class": "chooseField",
+      "id": "chooseField_" + uuid.value
+    }, null)]) : "", showInfo.value ? vue.createVNode("div", {
       "class": "selectFields"
     }, [[0, 1, 2, 3, 4, 5].map(index => {
       let info = {};
@@ -9354,7 +9432,7 @@ const VideoBoxV2 = vue.defineComponent({
     }, [vue.createVNode("span", null, [camera.value?.name])]), vue.createVNode("div", {
       "class": "tool"
     }, [_prop.btns.map(btn => {
-      if (!(camera.value.brandTypeCode === "MP4" && btn !== "close" && btn !== "fullScreen" && btn !== "look")) {
+      if (!(camera.value?.brandTypeCode === "MP4" && btn !== "close" && btn !== "fullScreen" && btn !== "look")) {
         switch (btn) {
           case "fill":
             return vue.createVNode("img", {
@@ -9362,10 +9440,10 @@ const VideoBoxV2 = vue.defineComponent({
               "onClick": e => {
                 if (fill.value === "fill") {
                   fill.value = "contain";
-                  localStorage.setItem(camera.value.uuid, fill.value);
+                  localStorage.setItem(camera.value?.uuid, fill.value);
                 } else {
                   fill.value = "fill";
-                  localStorage.setItem(camera.value.uuid, fill.value);
+                  localStorage.setItem(camera.value?.uuid, fill.value);
                 }
               },
               "src": "/micro-assets/inl/video/controls/fill.svg"
@@ -9395,6 +9473,14 @@ const VideoBoxV2 = vue.defineComponent({
                 "src": "/micro-assets/inl/video/stream.png"
               }, null)]
             });
+          case "magnify":
+            return vue.createVNode("img", {
+              "title": "\u653E\u5927",
+              "onClick": e => {
+                setZoom();
+              },
+              "src": "/micro-assets/inl/video/controls/magnify.svg"
+            }, null);
           case "direction":
             return vue.createVNode(vue.resolveComponent("a-popover"), {
               "title": "\u63A7\u5236\u5668",
@@ -9503,13 +9589,13 @@ const PollingPlay = vue.defineComponent({
       fullScreen: false,
       name: ""
     });
-    const setCurrentVideos = team => {
+    const setCurrentVideos = async team => {
       data.name = team.pollingGroupName;
       data.showType = `type${team.amount}`;
-      data.pointList.length = 0;
+      data.pointList = [];
       for (let i = 0; i < parseInt(team.amount, 10); i++) {
         const video = team.monitorPointPoList[i];
-        data.pointList.push(video?.cameraUuid || {});
+        data.pointList.push(video?.cameraUuid || "");
       }
     };
     const findShouldPlay = () => {
@@ -9595,16 +9681,18 @@ const PollingPlay = vue.defineComponent({
     }, null), "\u5168\u5C4F\u663E\u793A"])]) : "", vue.createVNode("div", {
       "id": "grid",
       "class": ["grid", data.showType, data.fullScreen ? "full" : ""]
-    }, [data.pointList.map((item, index) => vue.createVNode("div", {
-      "class": "video"
-    }, [_props.version === "V2" ? vue.createVNode(VideoBoxV2, {
-      "camera": item,
-      "btns": _props.btns,
-      "alarm": alarmList.value[index]
-    }, null) : vue.createVNode(VideoBox, {
-      "camera": item,
-      "btns": _props.btns
-    }, null)]))])]);
+    }, [data.pointList.map((item, index) => {
+      return vue.createVNode("div", {
+        "class": "video"
+      }, [_props.version === "V2" ? vue.createVNode(VideoBoxV2, {
+        "camera": item,
+        "btns": _props.btns,
+        "alarm": alarmList.value[index]
+      }, null) : vue.createVNode(VideoBox, {
+        "camera": item,
+        "btns": _props.btns
+      }, null)]);
+    })])]);
   }
 });
 var pollingPlay = installComponent(PollingPlay, "polling-play");

package/dist/components/index.js

@@ -8761,14 +8761,6 @@ const VideoPlayerV2 = defineComponent({
         }
       });
     };
-    const stopV = id => {
-      const videoElement = document.getElementById(id);
-      if (videoElement) {
-        videoElement.pause();
-        videoElement.removeAttribute("src");
-        videoElement.load();
-      }
-    };
     const releaseUrl = ref("");
     const release = async () => {
       const res = await axios$2.get(releaseUrl.value);
@@ -8818,7 +8810,6 @@ const VideoPlayerV2 = defineComponent({
     };
     watch([() => _prop.camera, () => _prop.cameraConfig], ([camera, cameraConfig]) => {
       stopPlay();
-      stopV(`videoPlayer_${uuid}`);
       getVideoDetail(camera);
     }, {
       immediate: true,
@@ -8826,27 +8817,27 @@ const VideoPlayerV2 = defineComponent({
     });
     onBeforeUnmount(() => {
       stopPlay();
-      const videoElement = document.getElementById(`videoPlayer_${uuid}`);
-      if (videoElement) {
-        videoElement.pause();
-        videoElement.src = null;
-        videoElement.srcObject = null;
-        videoElement.remove();
-      }
     });
-    return () => videoInfo2.value.brandTypeCode !== "MP4" ? createVNode("video", {
-      "id": `videoPlayer_${uuid}`,
-      "class": `videoComponent ${_prop.fill}`,
-      "muted": true,
-      "autoplay": true
-    }, null) : createVNode("video", {
-      "id": `videoPlayer_${uuid}`,
-      "class": "videoComponent fill",
-      "src": videoInfo2.value.mp4ResourcesPath,
-      "autoplay": true,
-      "loop": true,
-      "muted": true
-    }, null);
+    const renderVideo = () => {
+      if (videoInfo2.value.brandTypeCode === "MP4") {
+        return createVNode("video", {
+          "id": `mp4Player_${uuid}`,
+          "class": "videoComponent fill",
+          "src": videoInfo2.value.mp4ResourcesPath,
+          "autoplay": true,
+          "loop": true,
+          "muted": true
+        }, null);
+      } else {
+        return createVNode("video", {
+          "id": `videoPlayer_${uuid}`,
+          "class": `videoComponent ${_prop.fill}`,
+          "muted": true,
+          "autoplay": true
+        }, null);
+      }
+    };
+    return () => createVNode(Fragment, null, [renderVideo()]);
   }
 });
 var videoPlayerV2 = installComponent(VideoPlayerV2, "video-player-v2");
@@ -9151,7 +9142,7 @@ const props$6 = {
   // },
   btns: {
     type: Array,
-    default: ["fill", "look", "stream", "direction", "fullScreen", "close"]
+    default: ["fill", "look", "stream", "magnify", "direction", "fullScreen", "close"]
   },
   alarm: {
     default: false,
@@ -9174,6 +9165,7 @@ const VideoBoxV2 = defineComponent({
     const streamHistory = ref("");
     const streams = ref([]);
     const showInfo = ref(true);
+    const magnifyBtn = ref(false);
     const videoBtns = [[{
       text: "lup",
       signal: 25
@@ -9200,7 +9192,7 @@ const VideoBoxV2 = defineComponent({
       signal: 28
     }]];
     const infos = ref([]);
-    const uuid = UUID();
+    const uuid = ref(UUID());
     onMounted(() => {
       showInfo.value = _prop.showInfo;
     });
@@ -9277,14 +9269,83 @@ const VideoBoxV2 = defineComponent({
         }
       });
       camera.value = res.data.data;
-      streams.value = JSON.parse(camera.value.brandTypePo?.streamTypeDict || "[]");
+      streams.value = JSON.parse(camera.value?.brandTypePo?.streamTypeDict || "[]");
     };
     let timeout;
     ref(true);
     onBeforeUnmount(() => {});
+    const resetZoom = () => {
+      const chooseFieldDom = document.getElementById("chooseField_" + uuid.value);
+      chooseFieldDom?.remove();
+      const dom = document.getElementById("videoPlayer_" + uuid.value);
+      dom.style.left = "0px";
+      dom.style.top = "0px";
+      dom.style.width = "100%";
+      dom.style.height = "100%";
+    };
+    let boxDom;
+    let playerDom;
+    let newDiv;
+    let begin = {
+      left: 0,
+      top: 0
+    };
+    let mousedownEvent;
+    const mousemoveFun = mousemoveEvent => {
+      newDiv.style.width = Math.abs(mousemoveEvent.offsetX - mousedownEvent.offsetX) - 3 + "px";
+      newDiv.style.height = Math.abs(mousemoveEvent.offsetY - mousedownEvent.offsetY) - 3 + "px";
+      newDiv.style.left = Math.min(mousedownEvent.offsetX, mousemoveEvent.offsetX) + begin.left + "px";
+      newDiv.style.top = Math.min(mousedownEvent.offsetY, mousemoveEvent.offsetY) + begin.top + "px";
+    };
+    const mousedownFun = e => {
+      mousedownEvent = e;
+      begin.left = Number(playerDom.style.left.split("px")[0]);
+      begin.top = Number(playerDom.style.top.split("px")[0]);
+      newDiv = document.createElement("div");
+      newDiv.id = "tempDiv";
+      newDiv.style.left = mousedownEvent.offsetX + begin.left + "px";
+      newDiv.style.top = mousedownEvent.offsetY + begin.top + "px";
+      boxDom.appendChild(newDiv);
+      playerDom?.addEventListener("mousemove", mousemoveFun);
+    };
+    const mouseupFun = mouseupEvent => {
+      playerDom?.removeEventListener("mousemove", mousemoveFun);
+      newDiv.remove();
+      const scaleX = Math.abs(mouseupEvent.pageX - mousedownEvent.pageX) / boxDom.offsetWidth;
+      const scaleY = Math.abs(mouseupEvent.pageY - mousedownEvent.pageY) / boxDom.offsetHeight;
+      const playerLeft = Math.min(mousedownEvent.offsetX, mouseupEvent.offsetX) * -1 / scaleX;
+      const playerTop = Math.min(mousedownEvent.offsetY, mouseupEvent.offsetY) * -1 / scaleY;
+      const playerWidth = playerDom.offsetWidth / scaleX;
+      const playerHeight = playerDom.offsetHeight / scaleY;
+      playerDom.style.left = playerLeft + "px";
+      playerDom.style.top = playerTop + "px";
+      playerDom.style.width = playerWidth + "px";
+      playerDom.style.height = playerHeight + "px";
+      const chooseFieldDom = document.getElementById("chooseField_" + uuid.value);
+      chooseFieldDom.style.width = chooseFieldDom.offsetWidth * scaleX + "px";
+      chooseFieldDom.style.height = chooseFieldDom.offsetHeight * scaleY + "px";
+      const thumbnailDom = document.getElementById("thumbnail_" + uuid.value);
+      chooseFieldDom.style.left = thumbnailDom.offsetWidth * -1 * playerLeft / playerWidth + "px";
+      chooseFieldDom.style.top = thumbnailDom.offsetHeight * -1 * playerTop / playerHeight + "px";
+    };
+    const setZoom = async () => {
+      boxDom = document.getElementById("videoBox_" + uuid.value);
+      playerDom = document.getElementById("videoPlayer_" + uuid.value);
+      if (magnifyBtn.value) {
+        magnifyBtn.value = !magnifyBtn.value;
+        playerDom?.removeEventListener("mousedown", mousedownFun);
+        playerDom?.removeEventListener("mouseup", mouseupFun);
+        resetZoom();
+        return;
+      }
+      magnifyBtn.value = !magnifyBtn.value;
+      playerDom?.addEventListener("mousedown", mousedownFun);
+      playerDom?.addEventListener("mouseup", mouseupFun);
+    };
     const fill = ref("fill");
     watch(() => _prop.camera, val => {
       if (val && Object.keys(val).length != 0) {
+        camera.value = void 0;
         getVideoParams(val);
         getVideoDetail(val);
         const fillVal = localStorage.getItem(val);
@@ -9302,27 +9363,44 @@ const VideoBoxV2 = defineComponent({
           token: sessionStorage.getItem("token") || ""
         },
         params: {
-          uuid: camera.value.uuid,
+          uuid: camera.value?.uuid,
           chosenStreamType: code
         }
       });
       cameraConfig.value.webrtcTemplateMerged = res.data.data[0];
     };
     return () => createVNode("div", {
-      "id": "videoBox_" + uuid,
+      "id": "videoBox_" + uuid.value,
       "class": ["videoBox", _prop.alarm ? "alarm" : ""]
+    }, [camera.value ? createVNode(VideoPlayerV2, {
+      "ref": player,
+      "domId": uuid.value,
+      "camera": camera.value,
+      "cameraConfig": cameraConfig.value,
+      "fill": fill.value,
+      "onChangeStream": () => {
+        cameraConfig.value = {
+          streamType: streamHistory.value || camera.value?.streamType
+        };
+      }
+    }, null) : "", magnifyBtn.value ? createVNode("div", {
+      "class": "thumbnail",
+      "id": "thumbnail_" + uuid.value
     }, [createVNode(VideoPlayerV2, {
       "ref": player,
-      "domId": uuid,
+      "domId": UUID(),
       "camera": camera.value,
       "cameraConfig": cameraConfig.value,
       "fill": fill.value,
       "onChangeStream": () => {
         cameraConfig.value = {
-          streamType: streamHistory.value || camera.value.streamType
+          streamType: streamHistory.value || camera.value?.streamType
         };
       }
-    }, null), showInfo.value ? createVNode("div", {
+    }, null), createVNode("div", {
+      "class": "chooseField",
+      "id": "chooseField_" + uuid.value
+    }, null)]) : "", showInfo.value ? createVNode("div", {
       "class": "selectFields"
     }, [[0, 1, 2, 3, 4, 5].map(index => {
       let info = {};
@@ -9343,7 +9421,7 @@ const VideoBoxV2 = defineComponent({
     }, [createVNode("span", null, [camera.value?.name])]), createVNode("div", {
       "class": "tool"
     }, [_prop.btns.map(btn => {
-      if (!(camera.value.brandTypeCode === "MP4" && btn !== "close" && btn !== "fullScreen" && btn !== "look")) {
+      if (!(camera.value?.brandTypeCode === "MP4" && btn !== "close" && btn !== "fullScreen" && btn !== "look")) {
         switch (btn) {
           case "fill":
             return createVNode("img", {
@@ -9351,10 +9429,10 @@ const VideoBoxV2 = defineComponent({
               "onClick": e => {
                 if (fill.value === "fill") {
                   fill.value = "contain";
-                  localStorage.setItem(camera.value.uuid, fill.value);
+                  localStorage.setItem(camera.value?.uuid, fill.value);
                 } else {
                   fill.value = "fill";
-                  localStorage.setItem(camera.value.uuid, fill.value);
+                  localStorage.setItem(camera.value?.uuid, fill.value);
                 }
               },
               "src": "/micro-assets/inl/video/controls/fill.svg"
@@ -9384,6 +9462,14 @@ const VideoBoxV2 = defineComponent({
                 "src": "/micro-assets/inl/video/stream.png"
               }, null)]
             });
+          case "magnify":
+            return createVNode("img", {
+              "title": "\u653E\u5927",
+              "onClick": e => {
+                setZoom();
+              },
+              "src": "/micro-assets/inl/video/controls/magnify.svg"
+            }, null);
           case "direction":
             return createVNode(resolveComponent("a-popover"), {
               "title": "\u63A7\u5236\u5668",
@@ -9492,13 +9578,13 @@ const PollingPlay = defineComponent({
       fullScreen: false,
       name: ""
     });
-    const setCurrentVideos = team => {
+    const setCurrentVideos = async team => {
       data.name = team.pollingGroupName;
       data.showType = `type${team.amount}`;
-      data.pointList.length = 0;
+      data.pointList = [];
       for (let i = 0; i < parseInt(team.amount, 10); i++) {
         const video = team.monitorPointPoList[i];
-        data.pointList.push(video?.cameraUuid || {});
+        data.pointList.push(video?.cameraUuid || "");
       }
     };
     const findShouldPlay = () => {
@@ -9584,16 +9670,18 @@ const PollingPlay = defineComponent({
     }, null), "\u5168\u5C4F\u663E\u793A"])]) : "", createVNode("div", {
       "id": "grid",
       "class": ["grid", data.showType, data.fullScreen ? "full" : ""]
-    }, [data.pointList.map((item, index) => createVNode("div", {
-      "class": "video"
-    }, [_props.version === "V2" ? createVNode(VideoBoxV2, {
-      "camera": item,
-      "btns": _props.btns,
-      "alarm": alarmList.value[index]
-    }, null) : createVNode(VideoBox, {
-      "camera": item,
-      "btns": _props.btns
-    }, null)]))])]);
+    }, [data.pointList.map((item, index) => {
+      return createVNode("div", {
+        "class": "video"
+      }, [_props.version === "V2" ? createVNode(VideoBoxV2, {
+        "camera": item,
+        "btns": _props.btns,
+        "alarm": alarmList.value[index]
+      }, null) : createVNode(VideoBox, {
+        "camera": item,
+        "btns": _props.btns
+      }, null)]);
+    })])]);
   }
 });
 var pollingPlay = installComponent(PollingPlay, "polling-play");

package/dist/components/style.css

@@ -1,3 +1,3 @@
-.playVideos{display:flex;flex-direction:column;height:100%;padding-left:20px}.playVideos .operate{display:flex;justify-content:space-between;margin:5px 0}.playVideos .operate .button{cursor:pointer}.playVideos .grid{display:grid;flex:1;overflow:hidden}.playVideos .grid .video{background:#000;border:1px solid hsla(216,7%,59%,.3);height:100%;object-fit:fill;overflow:hidden;width:100%}.playVideos .grid.full{height:100%;left:0;position:fixed;top:0;width:100%;z-index:10}.playVideos .type1{grid-template-columns:1fr;grid-template-rows:1fr}.playVideos .type4{grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr}.playVideos .type8{grid-template-columns:1fr 1fr 1fr 1fr;grid-template-rows:1fr 1fr 1fr 1fr}.playVideos .type8 .video:first-child{grid-column:1/4;grid-row:1/4}.playVideos .type9{grid-template-columns:1fr 1fr 1fr;grid-template-rows:1fr 1fr 1fr}.playVideos .type13{grid-template-columns:1fr 1fr 1fr 1fr;grid-template-rows:1fr 1fr 1fr 1fr}.playVideos .type13 .video:first-child{grid-column:1/3;grid-row:1/3}.playVideos .type16{grid-template-columns:1fr 1fr 1fr 1fr;grid-template-rows:1fr 1fr 1fr 1fr}@keyframes moveBottom{0%{bottom:0}to{bottom:-66px}}.videoComponent{background:#000;height:100%;position:relative;width:100%}.videoComponent.fill{object-fit:fill}.videoComponent.contain{object-fit:contain}.videoBox{height:100%;overflow:hidden;position:relative}.videoBox .videoStatic{height:100%;object-fit:fill;width:100%}.videoBox.alarm:before{border:2px solid #ea5858;box-shadow:inset 0 0 10px 8px rgba(234,88,88,.5);content:"";height:100%;pointer-events:none;position:absolute;top:0;width:100%;z-index:7}.videoBox:hover .selectFields{animation-duration:1s;animation-fill-mode:both;animation-name:moveBottom}.videoBox:hover .footer-min{display:flex}.videoBox:hover .footer-min .name-min span,.videoBox:hover .footer-min .tool{display:block}.videoBox .selectFields{background:rgba(0,0,0,.3);bottom:0;display:grid;grid-template-columns:1fr 1fr 1fr;grid-template-rows:1fr 1fr;height:66px;position:absolute;width:100%}.videoBox .selectFields .info{border:0;color:#fff;line-height:33px;overflow:hidden;padding:0 5px;text-align:center;text-overflow:ellipsis;white-space:nowrap}.videoBox .selectFields .info .value{font-size:15px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.videoBox .footer-min{align-items:center;backdrop-filter:blur(10px);background:hsla(0,0%,100%,.04);border-radius:4px 4px 0 0;bottom:0;display:none;height:44px;justify-content:space-between;position:absolute;width:100%}.videoBox .footer-min .name-min{align-items:center;display:flex;padding-left:15px}.videoBox .footer-min .name-min span{color:#fff;display:none;font-size:16px;font-weight:600}.videoBox .footer-min .tool{display:none}.videoBox .footer-min .tool img{cursor:pointer;height:20px;margin-right:15px;width:20px}.videoControls{align-items:center;display:flex;flex-direction:column;width:100%}.videoControls .videoControl{height:126px;position:relative;width:126px}.videoControls .videoControl .bg{height:100%;position:relative;width:100%}.videoControls .videoControl img{cursor:pointer;position:absolute}.videoControls .videoControl .up{left:52px;top:14px}.videoControls .videoControl .lup{left:26px;top:26px;transform:rotate(-45deg)}.videoControls .videoControl .rup{left:78px;top:27px;transform:rotate(45deg)}.videoControls .videoControl .left{left:14px;top:52px;transform:rotate(-90deg)}.videoControls .videoControl .right{left:90px;top:52px;transform:rotate(90deg)}.videoControls .videoControl .ldown{left:26px;top:78px;transform:rotate(215deg)}.videoControls .videoControl .down{left:52px;top:90px;transform:rotate(180deg)}.videoControls .videoControl .rdown{left:78px;top:78px;transform:rotate(135deg)}.videoControls .btns{background:#e0e7f2;border-radius:19px;height:28px;margin:8px 8px 0;padding:3px;width:56px}.videoControls .btns img{cursor:pointer;margin-right:1px}
+.playVideos{display:flex;flex-direction:column;height:100%;padding-left:20px}.playVideos .operate{display:flex;justify-content:space-between;margin:5px 0}.playVideos .operate .button{cursor:pointer}.playVideos .grid{display:grid;flex:1;overflow:hidden}.playVideos .grid .video{background:#000;border:1px solid hsla(216,7%,59%,.3);height:100%;object-fit:fill;overflow:hidden;width:100%}.playVideos .grid.full{height:100%;left:0;position:fixed;top:0;width:100%;z-index:10}.playVideos .type1{grid-template-columns:1fr;grid-template-rows:1fr}.playVideos .type4{grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr}.playVideos .type8{grid-template-columns:1fr 1fr 1fr 1fr;grid-template-rows:1fr 1fr 1fr 1fr}.playVideos .type8 .video:first-child{grid-column:1/4;grid-row:1/4}.playVideos .type9{grid-template-columns:1fr 1fr 1fr;grid-template-rows:1fr 1fr 1fr}.playVideos .type13{grid-template-columns:1fr 1fr 1fr 1fr;grid-template-rows:1fr 1fr 1fr 1fr}.playVideos .type13 .video:first-child{grid-column:1/3;grid-row:1/3}.playVideos .type16{grid-template-columns:1fr 1fr 1fr 1fr;grid-template-rows:1fr 1fr 1fr 1fr}@keyframes moveBottom{0%{bottom:0}to{bottom:-66px}}.videoComponent{background:#000;height:100%;left:0;position:relative;top:0;width:100%}.videoComponent.fill{object-fit:fill}.videoComponent.contain{object-fit:contain}.videoBox{height:100%;overflow:hidden;position:relative}.videoBox .videoStatic{height:100%;object-fit:fill;width:100%}.videoBox .thumbnail{background:#000;height:30%;left:70%;position:absolute;top:70%;width:30%}.videoBox .thumbnail .chooseField{border:1px solid red;height:100%;left:100%;position:absolute;top:100%;width:100%}.videoBox #tempDiv{border:2px solid red;position:absolute}.videoBox.alarm:before{border:2px solid #ea5858;box-shadow:inset 0 0 10px 8px rgba(234,88,88,.5);content:"";height:100%;pointer-events:none;position:absolute;top:0;width:100%;z-index:7}.videoBox:hover .selectFields{animation-duration:1s;animation-fill-mode:both;animation-name:moveBottom}.videoBox:hover .footer-min{display:flex}.videoBox:hover .footer-min .name-min span,.videoBox:hover .footer-min .tool{display:block}.videoBox .selectFields{background:rgba(0,0,0,.3);bottom:0;display:grid;grid-template-columns:1fr 1fr 1fr;grid-template-rows:1fr 1fr;height:66px;position:absolute;width:100%}.videoBox .selectFields .info{border:0;color:#fff;line-height:33px;overflow:hidden;padding:0 5px;text-align:center;text-overflow:ellipsis;white-space:nowrap}.videoBox .selectFields .info .value{font-size:15px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.videoBox .footer-min{align-items:center;backdrop-filter:blur(10px);background:hsla(0,0%,100%,.04);border-radius:4px 4px 0 0;bottom:0;display:none;height:44px;justify-content:space-between;position:absolute;width:100%}.videoBox .footer-min .name-min{align-items:center;display:flex;padding-left:15px}.videoBox .footer-min .name-min span{color:#fff;display:none;font-size:16px;font-weight:600}.videoBox .footer-min .tool{display:none}.videoBox .footer-min .tool img{cursor:pointer;height:20px;margin-right:15px;width:20px}.videoControls{align-items:center;display:flex;flex-direction:column;width:100%}.videoControls .videoControl{height:126px;position:relative;width:126px}.videoControls .videoControl .bg{height:100%;position:relative;width:100%}.videoControls .videoControl img{cursor:pointer;position:absolute}.videoControls .videoControl .up{left:52px;top:14px}.videoControls .videoControl .lup{left:26px;top:26px;transform:rotate(-45deg)}.videoControls .videoControl .rup{left:78px;top:27px;transform:rotate(45deg)}.videoControls .videoControl .left{left:14px;top:52px;transform:rotate(-90deg)}.videoControls .videoControl .right{left:90px;top:52px;transform:rotate(90deg)}.videoControls .videoControl .ldown{left:26px;top:78px;transform:rotate(215deg)}.videoControls .videoControl .down{left:52px;top:90px;transform:rotate(180deg)}.videoControls .videoControl .rdown{left:78px;top:78px;transform:rotate(135deg)}.videoControls .btns{background:#e0e7f2;border-radius:19px;height:28px;margin:8px 8px 0;padding:3px;width:56px}.videoControls .btns img{cursor:pointer;margin-right:1px}
 .videoAlarmDia.dark{background:linear-gradient(90deg,#3e7eff,#1e4e75 30%,#1e4e75 70%,#3e7eff);padding:1px}.videoAlarmDia.dark .ant-modal-close{color:#fff}.videoAlarmDia.dark .ant-modal-header{background-color:#22396f;border-bottom-color:transparent;padding-left:20px}.videoAlarmDia.dark .ant-modal-header .ant-modal-title{align-items:center;background-image:linear-gradient(90deg,#2852a8 0,rgba(40,82,168,0) 50%);color:#fff;display:flex;height:42px;padding-left:10px}.videoAlarmDia.dark .ant-modal-content{background-color:#22396f}.videoAlarmDia.dark .ant-modal-content .body,.videoAlarmDia.dark .ant-modal-content .body .alarmList .alarm .name,.videoAlarmDia.dark .ant-modal-content .body .alarmList .title,.videoAlarmDia.dark .ant-modal-content .body .themeImg{color:#fff}.videoAlarmDia.dark .ant-modal-content .body .tabs .tabContainer .allTab .tab{background:#ffffff1a;color:#fff}.videoAlarmDia.dark .ant-modal-content .body .tabs .tabContainer .allTab .tab.active{background:#3e7eff;color:#fff}.videoAlarmDia .ant-modal-body{padding-top:18px}.videoAlarmDia .body{display:flex;flex-direction:column;height:660px}.videoAlarmDia .body .title{color:#000;font-size:18px}.videoAlarmDia .body .themeImg{height:18px;margin-right:5px;width:18px}.videoAlarmDia .body .current{align-self:center;display:flex;height:400px;justify-content:center;margin:10px 0 25px;width:750px}.videoAlarmDia .body .current .grid{grid-gap:3px;background-color:transparent;display:grid;height:100%;overflow:hidden;width:100%}.videoAlarmDia .body .current .grid .videoBox{background-color:#000}.videoAlarmDia .body .alarmList{display:flex;flex-wrap:wrap;justify-content:flex-start;max-height:80px;overflow:auto}.videoAlarmDia .body .alarmList .title{font-size:14px;font-weight:600;margin-bottom:10px}.videoAlarmDia .body .alarmList .alarm{align-items:center;border-radius:5px;color:#000;cursor:pointer;height:24px;margin-bottom:10px;margin-right:10px;padding:5px}.videoAlarmDia .body .alarmList .alarm img{height:16px;margin-right:5px;width:16px}.videoAlarmDia .body .alarmList .alarm .name{font-size:14px;white-space:nowrap}.videoAlarmDia .body .alarmList .alarm1{background:rgba(234,88,88,.1);color:#354052}.videoAlarmDia .body .alarmList .alarm2{background:rgba(255,146,20,.1);color:#354052}.videoAlarmDia .body .alarmList .alarm3{background:rgba(255,196,20,.1);color:#354052}.videoAlarmDia .body .alarmList .alarm4{background:rgba(62,126,255,.1);color:#354052}.videoAlarmDia .body .tip{align-items:center;display:flex;margin:0}.videoAlarmDia .body .tip .sumNum{margin-right:16px}.videoAlarmDia .body .tip .timeNum{color:#3e7eff;font-weight:600;margin-right:5px}.videoAlarmDia .body .tabs{align-items:center;display:flex;margin:10px 0 5px}.videoAlarmDia .body .tabs .themeImg{cursor:pointer;overflow:visible}.videoAlarmDia .body .tabs .endIcon{margin-left:10px}.videoAlarmDia .body .tabs .tabContainer{display:flex;overflow:hidden}.videoAlarmDia .body .tabs .tabContainer .allTab{display:flex;height:40px;left:0;position:relative}.videoAlarmDia .body .tabs .tabContainer .allTab .tab{background:#f2f3f8;border-radius:4px;cursor:pointer;font-size:14px;height:32px;line-height:32px;margin-right:10px;padding:0 10px;position:relative;text-align:center;white-space:nowrap}.videoAlarmDia .body .tabs .tabContainer .allTab .tab.active{background:#1d33a2;color:#fff}.videoAlarmDia .body .tabs .tabContainer .allTab .tab.active:after{border:10px solid transparent;border-top-color:#1d33a2;content:"";height:0;left:50%;position:absolute;top:30px;width:0}.videoAlarmDia .body .numLine{align-items:center;display:flex}.videoAlarmDia .body .numLine .cameraNum{color:#3e7eff;font-weight:600}.videoAlarmDia .body .numLine .tipImg{height:18px;margin:0 5px 0 25px;width:18px}.videoAlarmDia .body .numLine .alarmNum{color:#fa4141;font-weight:600}.videoAlarmDia .body .otherAlarm{align-items:center;display:flex}.videoAlarmDia .body .otherAlarm .ant-tag{cursor:pointer;font-size:14px}.videoAlarmDia .body .otherAlarm .tipImg{height:18px;margin-right:5px;width:18px}.videoAlarmDia .body .otherAlarm .annotation{height:12px;margin:2px;width:12px}.videoAlarmDia .body .type1{grid-template-columns:1fr;grid-template-rows:1fr}.videoAlarmDia .body .type4{grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr}.videoAlarmDia .body .type8{grid-template-columns:1fr 1fr 1fr 1fr;grid-template-rows:1fr 1fr 1fr 1fr}.videoAlarmDia .body .type8 .videoBox:first-child{grid-column:1/4;grid-row:1/4}.videoAlarmDia .body .type9{grid-template-columns:1fr 1fr 1fr;grid-template-rows:1fr 1fr 1fr}.videoAlarmDia .body .type13{grid-template-columns:1fr 1fr 1fr 1fr;grid-template-rows:1fr 1fr 1fr 1fr}.videoAlarmDia .body .type13 .videoBox:first-child{grid-column:1/3;grid-row:1/3}.videoAlarmDia .body .type16{grid-template-columns:1fr 1fr 1fr 1fr;grid-template-rows:1fr 1fr 1fr 1fr}
 .cloudVideo{height:100%;width:100%}.cloudVideo.noControl .mobile-ez-ptz-container{display:none!important}