inl-ui 0.1.38 → 0.1.40

package/dist/components/index.cjs

@@ -9153,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,
@@ -9176,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
@@ -9284,6 +9285,74 @@ const VideoBoxV2 = vue.defineComponent({
     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) {
@@ -9325,7 +9394,24 @@ const VideoBoxV2 = vue.defineComponent({
           streamType: streamHistory.value || camera.value?.streamType
         };
       }
-    }, null) : "", showInfo.value ? vue.createVNode("div", {
+    }, null) : "", magnifyBtn.value ? vue.createVNode("div", {
+      "class": "thumbnail",
+      "id": "thumbnail_" + uuid.value
+    }, [vue.createVNode(VideoPlayerV2, {
+      "ref": player,
+      "domId": UUID(),
+      "camera": camera.value,
+      "cameraConfig": cameraConfig.value,
+      "fill": fill.value,
+      "onChangeStream": () => {
+        cameraConfig.value = {
+          streamType: streamHistory.value || camera.value?.streamType
+        };
+      }
+    }, 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 = {};
@@ -9387,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",

package/dist/components/index.js

@@ -9142,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,
@@ -9165,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
@@ -9273,6 +9274,74 @@ const VideoBoxV2 = defineComponent({
     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) {
@@ -9314,7 +9383,24 @@ const VideoBoxV2 = defineComponent({
           streamType: streamHistory.value || camera.value?.streamType
         };
       }
-    }, null) : "", showInfo.value ? createVNode("div", {
+    }, null) : "", magnifyBtn.value ? createVNode("div", {
+      "class": "thumbnail",
+      "id": "thumbnail_" + uuid.value
+    }, [createVNode(VideoPlayerV2, {
+      "ref": player,
+      "domId": UUID(),
+      "camera": camera.value,
+      "cameraConfig": cameraConfig.value,
+      "fill": fill.value,
+      "onChangeStream": () => {
+        cameraConfig.value = {
+          streamType: streamHistory.value || camera.value?.streamType
+        };
+      }
+    }, 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 = {};
@@ -9376,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",

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}

package/dist/hooks/index.cjs

@@ -6156,6 +6156,7 @@ function useRouteActive() {
   return isActive;
 }
 
+exports.WebRtcMt = WebRtcMt;
 exports.playOneWebRtcMt = playOneWebRtcMt;
 exports.useCacheExclude = useCacheExclude;
 exports.useEvent = useEvent;

package/dist/hooks/index.d.ts

@@ -116,7 +116,62 @@ type RequetFunction = (...args: any[]) => any;
  */
 declare function usePoolingReq(reqFn: RequetFunction, isInterval?: MaybeComputedRef<Boolean>, interval?: number): void;
 
+interface PlayVideoArgs {
+    videoElm: string;
+    videoDom?: Document;
+    mediaServerAddr: string;
+    cameraUserName: string;
+    cameraPwd: string;
+    cameraIp: string;
+    cameraRtspPort: string;
+    cameraChannel: string;
+    cameraStream: string;
+    addRtspProxyUrl: string;
+}
+interface EndpointConfig {
+    debug: boolean;
+    simulcast: boolean;
+    useCamera: boolean;
+    audioEnable: boolean;
+    videoEnable: boolean;
+    recvOnly: boolean;
+}
+interface WebRtc {
+    el?: HTMLElement;
+    w?: number;
+    h?: number;
+    autoPlay?: boolean;
+    plays: PlayVideoArgs | Array<PlayVideoArgs>;
+    endpointConfig?: EndpointConfig;
+}
 declare const playOneWebRtcMt: (uuid: string, domId: string, dom?: Document, token?: string) => Promise<any>;
+declare class WebRtcMt {
+    constructor(opt: WebRtc);
+    private opt;
+    private dom;
+    p_player: any;
+    protected playerMap: Map<any, any>;
+    protected streamMap: Map<any, any>;
+    protected mediaServerAddrMap: Map<any, any>;
+    protected config: {
+        w: number;
+        h: number;
+        endpointConfig: {};
+    };
+    protected createRtspUrl(plays: any): {
+        stream: string;
+        addRtspProxyUrl: any;
+        sdpUrl: any;
+    };
+    protected init(opt: WebRtc): void;
+    protected createVideo(plays: PlayVideoArgs): Promise<unknown>;
+    log(type: "err" | "info" | "warn", text: string): void;
+    stopPlay(id?: string): void;
+    protected playEvent(player: any, videoElm: string, sdpUrl: string): void;
+    protected rePlay(videoElm?: string): void;
+    protected play(videoElm: string): void;
+    startPlay(plays: PlayVideoArgs): void;
+}
 
 interface useSelectVo<T> {
     onSelect: (record: T, selected: boolean) => void;
@@ -138,4 +193,4 @@ declare const useTableSelec: <T>(key?: Key) => useSelectVo<T>;
  */
 declare function useRouteActive(): vue.Ref<boolean>;
 
-export { playOneWebRtcMt, useCacheExclude, useEvent, useModalVisible, useNow, usePoolingReq, useQianKunState, useQiankunStateValue, useRouteActive, useTableList, useTableSelec, useZoomAdaptation };
+export { WebRtcMt, playOneWebRtcMt, useCacheExclude, useEvent, useModalVisible, useNow, usePoolingReq, useQianKunState, useQiankunStateValue, useRouteActive, useTableList, useTableSelec, useZoomAdaptation };

package/dist/hooks/index.js

@@ -6147,4 +6147,4 @@ function useRouteActive() {
   return isActive;
 }
 
-export { playOneWebRtcMt, useCacheExclude, useEvent, useModalVisible, useNow, usePoolingReq, useQianKunState, useQiankunStateValue, useRouteActive, useTableList, useTableSelec, useZoomAdaptation };
+export { WebRtcMt, playOneWebRtcMt, useCacheExclude, useEvent, useModalVisible, useNow, usePoolingReq, useQianKunState, useQiankunStateValue, useRouteActive, useTableList, useTableSelec, useZoomAdaptation };

package/dist/index.cjs

@@ -45,7 +45,7 @@ var ___default = /*#__PURE__*/_interopDefaultLegacy(_);
 var dayjs__default = /*#__PURE__*/_interopDefaultLegacy(dayjs);
 var EZUIKit__default = /*#__PURE__*/_interopDefaultLegacy(EZUIKit);
 
-var version = "0.1.37";
+var version = "0.1.39";
 
 const setTheme = theme => {
   if (theme === "dark") {
@@ -6865,6 +6865,7 @@ var hooks = /*#__PURE__*/Object.freeze({
   useZoomAdaptation: useZoomAdaptation,
   usePoolingReq: usePoolingReq,
   playOneWebRtcMt: playOneWebRtcMt,
+  WebRtcMt: WebRtcMt$1,
   useTableSelec: useTableSelec,
   useRouteActive: useRouteActive
 });
@@ -10156,7 +10157,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,
@@ -10179,6 +10180,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
@@ -10287,6 +10289,74 @@ const VideoBoxV2 = vue.defineComponent({
     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) {
@@ -10328,7 +10398,24 @@ const VideoBoxV2 = vue.defineComponent({
           streamType: streamHistory.value || camera.value?.streamType
         };
       }
-    }, null) : "", showInfo.value ? vue.createVNode("div", {
+    }, null) : "", magnifyBtn.value ? vue.createVNode("div", {
+      "class": "thumbnail",
+      "id": "thumbnail_" + uuid.value
+    }, [vue.createVNode(VideoPlayerV2, {
+      "ref": player,
+      "domId": UUID(),
+      "camera": camera.value,
+      "cameraConfig": cameraConfig.value,
+      "fill": fill.value,
+      "onChangeStream": () => {
+        cameraConfig.value = {
+          streamType: streamHistory.value || camera.value?.streamType
+        };
+      }
+    }, 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 = {};
@@ -10390,6 +10477,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",

package/dist/index.d.ts

@@ -11,7 +11,7 @@ import { Key } from 'ant-design-vue/lib/table/interface';
 import * as vue_jsx_runtime from 'vue/jsx-runtime';
 import * as _ant_design_icons_vue_lib_components_IconFont from '@ant-design/icons-vue/lib/components/IconFont';
 
-var version = "0.1.37";
+var version = "0.1.39";
 
 declare const _default$p: {
     set(theme: string): void;
@@ -492,6 +492,8 @@ declare const hooks_useEvent: typeof useEvent;
 declare const hooks_useZoomAdaptation: typeof useZoomAdaptation;
 declare const hooks_usePoolingReq: typeof usePoolingReq;
 declare const hooks_playOneWebRtcMt: typeof playOneWebRtcMt;
+type hooks_WebRtcMt = WebRtcMt;
+declare const hooks_WebRtcMt: typeof WebRtcMt;
 declare const hooks_useTableSelec: typeof useTableSelec;
 declare const hooks_useRouteActive: typeof useRouteActive;
 declare namespace hooks {
@@ -506,6 +508,7 @@ declare namespace hooks {
     hooks_useZoomAdaptation as useZoomAdaptation,
     hooks_usePoolingReq as usePoolingReq,
     hooks_playOneWebRtcMt as playOneWebRtcMt,
+    hooks_WebRtcMt as WebRtcMt,
     hooks_useTableSelec as useTableSelec,
     hooks_useRouteActive as useRouteActive,
   };