From a40144b49c2ea55ca44ae75d44176ce5a8ac60a1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=BB=95=E5=B5=A9?= <17854119262@163.com>
Date: Thu, 17 Apr 2025 15:56:46 +0800
Subject: [PATCH] =?UTF-8?q?=E6=99=BA=E6=84=9F-=E5=BC=B9=E7=AA=97=E8=A7=86?=
 =?UTF-8?q?=E9=A2=91=E7=BB=84=E4=BB=B6-=E6=8D=A2=E4=BD=8D=E6=B5=B7?=
 =?UTF-8?q?=E5=BA=B7=E6=BA=90=E4=B8=94=E5=BC=B9=E7=AA=97=E6=B5=8B=E8=AF=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 index.html                                    |   4 +
 package.json                                  |   1 +
 public/monitor/common.css                     | 145 -------
 public/monitor/{ => hk}/jquery-1.12.4.min.js  |   0
 .../{ => hk}/jsWebControl-1.0.0.min.js        |   0
 public/monitor/{ => hk}/jsencrypt.min.js      |   0
 public/monitor/mulIndex.html                  | 359 -----------------
 src/hooks/eventHandler.hook.ts                |  26 +-
 .../Zhichu/ZhiChu_LuXianGuHua/ts/direction.ts |   1 -
 .../Zhichu/Zhichu/ZhiChu_ModalTable/index.vue |   5 +-
 .../Zhigan/ZhiGan_ModalCarousel/index.vue     |   2 +-
 .../Zhigan/ZhiGan_ModalVideo/config.vue       |   4 +-
 .../ZhiGan_ModalVideo/hk/mulHKmonitor.vue     | 363 ++++++++++++------
 .../Zhigan/Zhigan/ZhiGan_ModalVideo/index.vue | 130 ++++---
 14 files changed, 358 insertions(+), 682 deletions(-)
 delete mode 100644 public/monitor/common.css
 rename public/monitor/{ => hk}/jquery-1.12.4.min.js (100%)
 rename public/monitor/{ => hk}/jsWebControl-1.0.0.min.js (100%)
 rename public/monitor/{ => hk}/jsencrypt.min.js (100%)
 delete mode 100644 public/monitor/mulIndex.html

diff --git a/index.html b/index.html
index 8c986a8..c07fa95 100644
--- a/index.html
+++ b/index.html
@@ -18,6 +18,10 @@
     <script src="https://web.sdk.qcloud.com/player/tcplayer/release/v4.6.0/libs/flv.min.1.6.3.js"></script>
     <script src="https://web.sdk.qcloud.com/player/tcplayer/release/v4.6.0/libs/dash.all.min.4.4.1.js"></script>
     <script src="https://web.sdk.qcloud.com/player/tcplayer/release/v4.6.0/tcplayer.v4.6.0.min.js"></script>
+    <!-- 引入海康插件内容 -->
+    <script type="text/javascript" src="./public/monitor/hk/jquery-1.12.4.min.js"></script>
+    <script type="text/javascript" src="./public/monitor/hk/jsencrypt.min.js"></script>
+    <script type="text/javascript" src="./public/monitor/hk/jsWebControl-1.0.0.min.js"></script>
 
     <style>
       .mars3d-template-content{
diff --git a/package.json b/package.json
index a3a21a3..fb10562 100644
--- a/package.json
+++ b/package.json
@@ -118,6 +118,7 @@
     "iconify-icon": "^1.0.8",
     "js-base64": "3.7.7",
     "js-md5": "^0.8.3",
+    "jsencrypt": "^3.3.2",
     "jszip": "^3.10.1",
     "keymaster": "^1.6.2",
     "lodash-es": "^4.17.21",
diff --git a/public/monitor/common.css b/public/monitor/common.css
deleted file mode 100644
index 683801a..0000000
--- a/public/monitor/common.css
+++ /dev/null
@@ -1,145 +0,0 @@
-.flex{
-	display: flex;
-}
-.flex-1{
-	flex: 1;
-}
-.wrap{
-	flex-wrap: wrap;
-}
-.nowrap{
-	flex-wrap: nowrap;
-	white-space: nowrap;
-}
-.row{
-	flex-direction: row;
-}
-.column{
-	flex-direction: column;
-}
-.hidden{
-	overflow: hidden;
-}
-.auto{
-	overflow: auto;
-}
-.ai-c{
-	align-items: center;
-}
-.ai-e{
-	align-items: end;
-}
-.jc-se{
-	justify-content: space-evenly;
-}
-.jc-sa{
-	justify-content: space-around;
-}
-.jc-sb{
-	justify-content: space-between;
-}
-.jc-c{
-	justify-content: center;
-}
-.jc-e{
-	justify-content: flex-end;
-}
-.mt-1{
-	margin-top: 10px;
-}
-.mt-2{
-	margin-top: 20px;
-}
-.mt-3{
-	margin-top: 30px;
-}
-.ml-1{
-	margin-left: 10px;
-}
-.ml-2{
-	margin-left: 20px;
-}
-.ml-3{
-	margin-left: 30px;
-}
-.mb-1{
-	margin-bottom: 10px;
-}
-.mb-2{
-	margin-bottom: 20px;
-}
-.mb-3{
-	margin-bottom: 30px;
-}
-.mr-1{
-	margin-right: 10px;
-}
-.mr-2{
-	margin-right: 20px;
-}
-.mr-3{
-	margin-right: 30px;
-}
-.ta-c{
-	text-align: center;
-}
-.ta-l{
-	text-align: left;
-}
-.cursor{
-	cursor: pointer;
-}
-.pos-r{
-	position: relative;
-}
-.pos-a{
-	position: absolute;
-}
-.pos-f{
-	position: fixed;
-}
-.max-w{
-    width: 100%;
-}
-.max-h{
-    height: 100%;
-}
-.fz-12{
-	font-size: 12px;
-}
-.fz-14{
-	font-size: 14px;
-}
-.fz-16{
-	font-size: 16px;
-}
-.fz-18{
-	font-size: 18px;
-}
-.fz-20{
-	font-size: 20px;
-}
-.fz-22{
-	font-size: 22px;
-}
-.fz-24{
-	font-size: 24px;
-}
-.fz-26{
-	font-size: 26px;
-}
-.fz-28{
-	font-size: 28px;
-}
-.fc-w{
-	color: white;
-}
-.fc-b{
-	color: black;
-}
-.fc-r{
-	color: red;
-}
-.fw-b{
-	font-weight: bold;
-}
diff --git a/public/monitor/jquery-1.12.4.min.js b/public/monitor/hk/jquery-1.12.4.min.js
similarity index 100%
rename from public/monitor/jquery-1.12.4.min.js
rename to public/monitor/hk/jquery-1.12.4.min.js
diff --git a/public/monitor/jsWebControl-1.0.0.min.js b/public/monitor/hk/jsWebControl-1.0.0.min.js
similarity index 100%
rename from public/monitor/jsWebControl-1.0.0.min.js
rename to public/monitor/hk/jsWebControl-1.0.0.min.js
diff --git a/public/monitor/jsencrypt.min.js b/public/monitor/hk/jsencrypt.min.js
similarity index 100%
rename from public/monitor/jsencrypt.min.js
rename to public/monitor/hk/jsencrypt.min.js
diff --git a/public/monitor/mulIndex.html b/public/monitor/mulIndex.html
deleted file mode 100644
index ad897fa..0000000
--- a/public/monitor/mulIndex.html
+++ /dev/null
@@ -1,359 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <title>preview_demo</title>
-</head>
-<style>
-    html, body {
-        padding: 0;
-        margin: 0;
-    }
-
-    .camera-box{
-        width: 1200px;
-        height: 700px;
-        border-radius: 5px;
-        position: relative;
-        z-index:100000000000000000000000000000000!important;
-         position: fixed;
-        left: 50%;
-        top: 50%;
-        z-index: 9999;
-        transform: translate(-50%,-50%);
-        padding:0px;
-    }
-
-
-
-    .playWnd {
-        width: 1200px;                  /*播放容器的宽和高设定*/
-        height: 700px;
-    }
-</style>
-
-<body>
-    <div class="camera-box">
-
-        <!-- 视口区域 -->
-        <div class="camera-body">
-            <div id="playWnd" class="playWnd"></div>
-        </div>
-    </div>
-</body>
-
-    <!--三个必要的js文件引入-->
-<script src="jquery-1.12.4.min.js"></script>
-<script src="jsencrypt.min.js"></script>            <!-- 用于RSA加密 -->
-<script src="jsWebControl-1.0.0.min.js"></script>   <!-- 用于前端与插件交互 -->
-
-<script type="text/javascript">
-    let carmerCard = "";
-    // 窗口加载结束事件
-    window.onload = () => {
-        // 子页面接收消息
-        window.addEventListener('message', function (e) {
-            if (e.data) {
-                carmerCard = e.data[1]
-                $("#carmerName").text(e.data[0])  // 设备名称
-                $("#carmerCard").text(e.data[1])  // 设备编号
-                $("#carmerAppKey").text(e.data[2])// appkey
-                $("#carmerIp").text(e.data[3])    // 设备ip
-                $("#carmerPort").text(e.data[4])  // 网络端口
-                $("#appSecret").text(e.data[5])   // 秘钥
-            }
-        }, false)
-
-        // 创建视频播放插件
-        initPlugin();
-    }
-
-    // 关闭按钮 调用父页面的关闭函数
-    $("#closeBtn").click(function(){
-        window.parent.postMessage(
-            {
-                cmd: 'close'
-            }
-        )
-    })
-
-    //声明公用变量
-    var initCount = 0;
-    var pubKey = '';
-
-    // 创建播放器方法实例
-    function initPlugin () {
-        oWebControl = new WebControl({
-            szPluginContainer: "playWnd",                       // 指定容器id
-			iServicePortStart: 15900,                           // 指定起止端口号，建议使用该值
-			iServicePortEnd: 15909,                             
-			szClassId:"23BF3B0A-2C56-4D97-9C03-0CB103AA8F11",   // 用于IE10使用ActiveX的clsid
-			cbConnectSuccess: function () {                     // 创建WebControl实例成功后的回调函数											
-				
-                oWebControl.JS_StartService("window", {         // WebControl实例创建成功后需要启动VideoPluginPlugin.exe服务
-					dllPath: "./VideoPluginConnect.dll"         // 值"./VideoPluginConnect.dll"写死 
-				}).then(function () {                           // 启动插件服务成功
-
-					oWebControl.JS_SetWindowControlCallback({   // 设置消息回调
-						cbIntegrationCallBack: cbIntegrationCallBack
-					});
-					
-					oWebControl.JS_CreateWnd("playWnd", 1200, 700).then(function () { //JS_CreateWnd创建视频播放窗口，宽高可设定
-						init();  // 创建播放实例成功后初始化
-					});
-
-				}, function () { // 创建播放实例失败回调
-                    console.log("创建播放实例失败！！！");
-				});
-			},
-			cbConnectError: function () { // 创建WebControl实例失败
-				oWebControl = null;
-				$("#playWnd").html("插件未启动，正在尝试启动，请稍候...");
-				WebControl.JS_WakeUp("VideoWebPlugin://"); // 程序未启动时执行error函数，采用wakeup来启动程序
-				initCount ++;
-				if (initCount < 3) {                             
-					setTimeout(function () {
-						initPlugin();
-					}, 3000)
-				} else {
-					$("#playWnd").html("插件启动失败，请检查插件是否安装！");
-				}
-			},
-			cbConnectClose: function (bNormalClose) {            
-				// 异常断开：bNormalClose = false
-				// JS_Disconnect正常断开：bNormalClose = true	
-				oWebControl = null;
-			}
-		});
-        
-    }
-
-	// 设置窗口控制回调
-    function setCallbacks() {
-        oWebControl.JS_SetWindowControlCallback({
-            cbIntegrationCallBack: cbIntegrationCallBack
-        });
-    }
-
-    // 推送消息
-    function cbIntegrationCallBack(oData) {
-        // showCBInfo(JSON.stringify(oData.responseMsg));
-    }
-	
-    //初始化播放内容
-    function init()
-    {
-        getPubKey(function () {
-			
-			////////////////////////////////// 请自行修改以下变量值	////////////////////////////////////	
-
-            // var appkey = "21274765";                        //综合安防管理平台提供的appkey，必填
-            // var ip = "223.99.16.253";                       //综合安防管理平台IP地址，必填
-            // var port = 1443;                                //综合安防管理平台端口，若启用HTTPS协议，默认443
-
-
-            var appkey = "23604396";            //综合安防管理平台提供的appkey，必填
-            var ip = "221.2.83.54";                    //综合安防管理平台IP地址，必填
-            var port = 1443;  
-            var appSecret = "NZJ8L3bxCOOV6rtTFjsx";
-            var secret = setEncrypt(appSecret);                //综合安防管理平台提供的secret，必填
-
-            let cameraCount = carmerCard.split(",").length;
-            
-            let layerOut = "1x1";
-
-            if(cameraCount<=1){
-                layerOut = "1x1";
-            }else if(cameraCount>1 && cameraCount<=4){
-                layerOut = "2x2";
-            }else if(cameraCount>4 && cameraCount<=9){
-                layerOut = "3x3";
-            }else if(cameraCount>9 && cameraCount<=16){
-                layerOut = "4x4";
-            }else if(cameraCount>16 && cameraCount<=25){
-                layerOut = "5x5";
-            }
-           
-
-            var playMode = 0;                                  //初始播放模式：0-预览，1-回放
-            var snapDir = "D:\\SnapDir";                       //抓图存储路径
-            var videoDir = "D:\\VideoDir";                     //紧急录像或录像剪辑存储路径
-            var layout = layerOut;                                //playMode指定模式的布局 默认1*1
-            var enableHTTPS = 1;                               //是否启用HTTPS协议与综合安防管理平台交互，这里总是填1
-            var encryptedFields = 'secret';					   //加密字段，默认加密领域为secret
-			var showToolbar = 1;                               //是否显示工具栏，0-不显示，非0-显示
-			var showSmart = 1;                                 //是否显示智能信息（如配置移动侦测后画面上的线框），0-不显示，非0-显示
-			var buttonIDs = "0,16,256,257,258,259,260,512,513,514,515,516,517,768,769";  //自定义工具条按钮
-
-			////////////////////////////////// 请自行修改以上变量值	////////////////////////////////////
-
-            oWebControl.JS_RequestInterface({
-                funcName: "init",
-                argument: JSON.stringify({
-                    appkey: appkey,                            //API网关提供的appkey
-                    secret: secret,                            //API网关提供的secret
-                    ip: ip,                                    //API网关IP地址
-                    playMode: playMode,                        //播放模式（决定显示预览还是回放界面）
-                    port: port,                                //端口
-                    snapDir: snapDir,                          //抓图存储路径
-                    videoDir: videoDir,                        //紧急录像或录像剪辑存储路径
-                    layout: layout,                            //布局
-                    enableHTTPS: enableHTTPS,                  //是否启用HTTPS协议
-                    encryptedFields: encryptedFields,          //加密字段
-					showToolbar: showToolbar,                  //是否显示工具栏
-					showSmart: showSmart,                      //是否显示智能信息
-					buttonIDs: buttonIDs                       //自定义工具条按钮
-                })
-            }).then(function (oData) {
-				oWebControl.JS_Resize(1200, 700);  // 初始化后resize一次，规避firefox下首次显示窗口后插件窗口未与DIV窗口重合问题
-                setWndCover();
-            });
-
-                
-            var cameraIndexCode  = carmerCard;          //获取输入的监控点编号值，必填
-            var streamMode = 0;                                     //主子码流标识：0-主码流，1-子码流
-            var transMode = 1;                                      //传输协议：0-UDP，1-TCP
-            var gpuMode = 0;                                        //是否启用GPU硬解，0-不启用，1-启用
-            var wndId = -1;                                         //播放窗口序号（在2x2以上布局下可指定播放窗口）
-
-            // 封装传入需要播放的监控信息
-            let monitors = {list:[]};
-            var cameraIndexCodes = cameraIndexCode.split(",")
-            cameraIndexCodes.forEach((item,index)=>{
-                let obj = {
-                    cameraIndexCode:item,                //监控点编号
-                    streamMode: streamMode,                         //主子码流标识
-                    transMode: transMode,                           //传输协议
-                    gpuMode: gpuMode,                               //是否开启GPU硬解
-                    wndId:index+1                                 //可指定播放窗口
-                }
-                monitors.list.push(obj);
-            })
-
-            // 开始预览多个视频
-            oWebControl.JS_RequestInterface({
-                funcName: "startMultiPreviewByCameraIndexCode",
-                argument: JSON.stringify(monitors)
-            })
-
-        });
-    }
-
-    //获取公钥
-    function getPubKey (callback) {
-        oWebControl.JS_RequestInterface({
-            funcName: "getRSAPubKey",
-            argument: JSON.stringify({
-                keyLength: 1024
-            })
-        }).then(function (oData) {
-            if (oData.responseMsg.data) {
-                pubKey = oData.responseMsg.data;
-                callback()
-            }
-        })
-    }
-
-    //RSA加密 
-    function setEncrypt (value) {
-        var encrypt = new JSEncrypt();
-        encrypt.setPublicKey(pubKey);
-        return encrypt.encrypt(value);
-    }
-	
-	// 监听resize事件，使插件窗口尺寸跟随DIV窗口变化
-	 $(window).resize(function (event) { 
-        console.log(event);
-        if (oWebControl != null) {
-            oWebControl.JS_Resize(1200, 700);
-            setWndCover();
-        }
-    });
-	
-	// 监听滚动条scroll事件，使插件窗口跟随浏览器滚动而移动
-	$(window).scroll(function () {
-        if (oWebControl != null) {
-            oWebControl.JS_Resize(360, 230);
-            setWndCover();
-        }
-    });
-	
-	
-	// 设置窗口裁剪，当因滚动条滚动导致窗口需要被遮住的情况下需要JS_CuttingPartWindow部分窗口
-    function setWndCover() {
-        var iWidth = $(window).width();
-        var iHeight = $(window).height();
-        var oDivRect = $("#playWnd").get(0).getBoundingClientRect();
-
-        var iCoverLeft = (oDivRect.left < 0) ? Math.abs(oDivRect.left): 0;
-        var iCoverTop = (oDivRect.top < 0) ? Math.abs(oDivRect.top): 0;
-        var iCoverRight = (oDivRect.right - iWidth > 0) ? Math.round(oDivRect.right - iWidth) : 0;
-        var iCoverBottom = (oDivRect.bottom - iHeight > 0) ? Math.round(oDivRect.bottom - iHeight) : 0;
-
-        iCoverLeft = (iCoverLeft > 360) ? 360 : iCoverLeft;
-        iCoverTop = (iCoverTop > 230) ? 230 : iCoverTop;
-        iCoverRight = (iCoverRight > 360) ? 360 : iCoverRight;
-        iCoverBottom = (iCoverBottom > 230) ? 230 : iCoverBottom;
-
-		oWebControl.JS_RepairPartWindow(0, 0, 1001, 230);    // 多1个像素点防止还原后边界缺失一个像素条
-        if (iCoverLeft != 0) {
-			oWebControl.JS_CuttingPartWindow(0, 0, iCoverLeft, 230);
-        }
-        if (iCoverTop != 0) {
-            oWebControl.JS_CuttingPartWindow(0, 0, 1001, iCoverTop);    // 多剪掉一个像素条，防止出现剪掉一部分窗口后出现一个像素条
-        }
-        if (iCoverRight != 0) {
-            oWebControl.JS_CuttingPartWindow(360 - iCoverRight, 0, iCoverRight, 230);
-        }
-        if (iCoverBottom != 0) {
-            oWebControl.JS_CuttingPartWindow(0, 230 - iCoverBottom, 360, iCoverBottom);
-        }
-    }
-
-    //视频预览功能
-    $("#startPreview").click(function () {
-        var cameraIndexCode  = cameraIndexCode;     //获取输入的监控点编号值，必填
-        var streamMode = 0;                                     //主子码流标识：0-主码流，1-子码流
-        var transMode = 1;                                      //传输协议：0-UDP，1-TCP
-        var gpuMode = 0;                                        //是否启用GPU硬解，0-不启用，1-启用
-        var wndId = -1;                                         //播放窗口序号（在2x2以上布局下可指定播放窗口）
-
-        cameraIndexCode = cameraIndexCode.replace(/(^\s*)/g, "");
-        cameraIndexCode = cameraIndexCode.replace(/(\s*$)/g, "");
-
-        oWebControl.JS_RequestInterface({
-            funcName: "startPreview",
-            argument: JSON.stringify({
-                cameraIndexCode:cameraIndexCode,                //监控点编号
-                streamMode: streamMode,                         //主子码流标识
-                transMode: transMode,                           //传输协议
-                gpuMode: gpuMode,                               //是否开启GPU硬解
-                wndId:wndId                                     //可指定播放窗口
-            })
-        })
-    });
-
-    //停止全部预览
-    $("#stopAllPreview").click(function () {
-        oWebControl.JS_RequestInterface({
-            funcName: "stopAllPreview"
-        });
-    });
-
-    // 标签关闭
-    $(window).unload(function () {
-        if (oWebControl != null){
-			oWebControl.JS_HideWnd();   // 先让窗口隐藏，规避可能的插件窗口滞后于浏览器消失问题 
-            oWebControl.JS_Disconnect().then(function(){  // 断开与插件服务连接成功
-			}, 
-			function() {  // 断开与插件服务连接失败
-			});
-        }
-    });
-
-</script>
-<!-- 
-
-
- -->
- </html>
\ No newline at end of file
diff --git a/src/hooks/eventHandler.hook.ts b/src/hooks/eventHandler.hook.ts
index bdf67d1..7256ee5 100644
--- a/src/hooks/eventHandler.hook.ts
+++ b/src/hooks/eventHandler.hook.ts
@@ -80,16 +80,25 @@ export const eventCommonHandler = (
         for (let k = 0; k < elementList[j].elementId.length; k++) {
           //获取位置
           const arr = queryFun(componentList, elementList[j].elementId[k]);
-          console.log(arr);
+          // console.log(arr);
           if (arr.length > 1) {
             obj = componentList[arr[0]].groupList[arr[1]];
             obj.status.hide = false;
-            console.log(obj);
+            // console.log(obj);
             // chartEditStore.updateComponentList(arr[0], obj, arr[1]);
           } else if (arr.length == 1) {
             obj = componentList[arr[0]];
             obj.status.hide = false;
-            console.log(obj);
+            // console.log(obj);
+
+            // 海康视频组件单独处理
+            if(obj.isGroup && obj.groupList.some((li) => li.key == 'ZhiGan_ModalVideo')) {
+              obj.groupList.forEach((g) => {
+                  if(g.key == 'ZhiGan_ModalVideo'){
+                    g.status.hide = false;
+                  }
+              });
+            }
             // chartEditStore.updateComponentList(arr[0], obj);
           }
           // if (componentList[i].id == elementList[j].elementId[k]) {
@@ -103,7 +112,7 @@ export const eventCommonHandler = (
         // 隐藏
         for (let k = 0; k < elementList[j].elementId.length; k++) {
           //获取位置
-          const arr = queryFun(componentList, elementList[j].elementId[k]);
+          const arr = queryFun(componentList, elementList[j].elementId[k]);    
           if (arr.length > 1) {
             obj = componentList[arr[0]].groupList[arr[1]];
             obj.status.hide = true;
@@ -111,6 +120,15 @@ export const eventCommonHandler = (
           } else if (arr.length == 1) {
             obj = componentList[arr[0]];
             obj.status.hide = true;
+
+            // 海康视频组件单独处理
+            if(obj.isGroup && obj.groupList.some((li) => li.key == 'ZhiGan_ModalVideo')) {
+              obj.groupList.forEach((g) => {
+                  if(g.key == 'ZhiGan_ModalVideo'){
+                    g.status.hide = true;
+                  }
+              });
+            }
             // chartEditStore.updateComponentList(arr[0], obj);
           }
           // if (componentList[i].id == elementList[j].elementId[k]) {
diff --git a/src/packages/components/Zhichu/Zhichu/ZhiChu_LuXianGuHua/ts/direction.ts b/src/packages/components/Zhichu/Zhichu/ZhiChu_LuXianGuHua/ts/direction.ts
index 898740b..3ef43d3 100644
--- a/src/packages/components/Zhichu/Zhichu/ZhiChu_LuXianGuHua/ts/direction.ts
+++ b/src/packages/components/Zhichu/Zhichu/ZhiChu_LuXianGuHua/ts/direction.ts
@@ -9,7 +9,6 @@ const INPUT_TIP_URL = "https://restapi.amap.com/v3/assistant/inputtips";
 const RE_GEO_URL = "https://restapi.amap.com/v3/geocode/regeo";
 
 const GD_KEY = "6af6a87038f44c8c793aa70331f2b7ca";
-// const GD_KEY = "8599882c8059403539cd882a8a6e64d0";
 
 // 起点、沿途、不包含的沿途、终点，光点的颜色
 export const wayColorList = {
diff --git a/src/packages/components/Zhichu/Zhichu/ZhiChu_ModalTable/index.vue b/src/packages/components/Zhichu/Zhichu/ZhiChu_ModalTable/index.vue
index b81e4ea..4e843db 100644
--- a/src/packages/components/Zhichu/Zhichu/ZhiChu_ModalTable/index.vue
+++ b/src/packages/components/Zhichu/Zhichu/ZhiChu_ModalTable/index.vue
@@ -733,9 +733,10 @@
       pitch: -51.9,
     });
   }
+
+  let endCoor = [118.031528, 35.431473];
   // 漫游
   async function roamLocation(startCoor) {
-    let endCoor = [118.031528, 35.431473];
     let params: any = {
       startlng: parseFloat(startCoor[0]),
       startlat: parseFloat(startCoor[1]),
@@ -758,6 +759,8 @@
     // 组件通信
     const sql = props.chartConfig.request?.requestSQLContent?.sql;
     EventBus.on(props.chartConfig.id + 'dataupdate', (data) => {
+      // 火情终点
+      endCoor = [data.lng, data.lat];
       props.chartConfig.request.requestSQLContent.sql = replaceSqlParams(sql, { Id: data.id });
       // 数据callback处理（预览时触发）
       useChartDataFetch(props.chartConfig, useChartEditStore, (resData: any[]) => {
diff --git a/src/packages/components/Zhigan/Zhigan/ZhiGan_ModalCarousel/index.vue b/src/packages/components/Zhigan/Zhigan/ZhiGan_ModalCarousel/index.vue
index bb9d61b..b81e705 100644
--- a/src/packages/components/Zhigan/Zhigan/ZhiGan_ModalCarousel/index.vue
+++ b/src/packages/components/Zhigan/Zhigan/ZhiGan_ModalCarousel/index.vue
@@ -114,7 +114,7 @@
       props.chartConfig.request.requestSQLContent.sql = replaceSqlParams(sql, { Id: data.id });
       // 数据callback处理（预览时触发）
       useChartDataFetch(props.chartConfig, useChartEditStore, (resData: any[]) => {
-        option.dataset = resData;
+          option.dataset = resData;
       });
     });
   });
diff --git a/src/packages/components/Zhigan/Zhigan/ZhiGan_ModalVideo/config.vue b/src/packages/components/Zhigan/Zhigan/ZhiGan_ModalVideo/config.vue
index fe4dab5..5d24aee 100644
--- a/src/packages/components/Zhigan/Zhigan/ZhiGan_ModalVideo/config.vue
+++ b/src/packages/components/Zhigan/Zhigan/ZhiGan_ModalVideo/config.vue
@@ -1,6 +1,6 @@
 <template>
   <CollapseItem name="数据设置" :expanded="true">
-    <n-tag type="primary">编辑页面修改视频数据配置后，请在预览页面查看效果</n-tag>
+    <!-- <n-tag type="primary">编辑页面修改视频数据配置后，请在预览页面查看效果</n-tag>
     <SettingItemBox name="默认路径" :alone="true">
       <n-select
         v-model:value="optionData.dataStyle.serialNumberValue"
@@ -25,7 +25,7 @@
       <SettingItem name="视频类型">
         <n-select v-model:value="optionData.dataStyle.videoFit" size="small" :options="fitList" />
       </SettingItem>
-    </SettingItemBox>
+    </SettingItemBox> -->
 
     <SettingItemBox name="样式设置">
       <SettingItem name="边框颜色">
diff --git a/src/packages/components/Zhigan/Zhigan/ZhiGan_ModalVideo/hk/mulHKmonitor.vue b/src/packages/components/Zhigan/Zhigan/ZhiGan_ModalVideo/hk/mulHKmonitor.vue
index a74bc1a..b685917 100644
--- a/src/packages/components/Zhigan/Zhigan/ZhiGan_ModalVideo/hk/mulHKmonitor.vue
+++ b/src/packages/components/Zhigan/Zhigan/ZhiGan_ModalVideo/hk/mulHKmonitor.vue
@@ -1,132 +1,267 @@
 <template>
-  <div class="box-container">
-    <iframe
-      id="iframe"
-      ref="fIframe"
-      scrolling="no"
-      frameborder="0"
-      width="100%"
-      height="100%"
-      src="/public/monitor/mulIndex.html"
-    >
-    </iframe>
+  <div id="camera-box" class="camera-box">
+    <!-- 视口区域 -->
+    <div class="camera-body">
+      <div :id="'playWnd' + props.timestamp" class="playWnd"></div>
+    </div>
   </div>
 </template>
+<script setup lang="ts">
+  import { onMounted, onUnmounted, watch, defineProps, defineExpose, ref, computed } from 'vue';
+  import { JSEncrypt } from 'jsencrypt';
 
-<script>
-  export default {
-    name: 'monitorbox',
-    props: ['deviceId', 'channelId'],
-    data() {
-      return {
-        list: [],
-        monitorPlayer: null,
-      };
-    },
-    mounted() {
-      let arr = [
-        this.deviceId,
-        this.deviceId,
-        '23604396',
-        '221.2.83.54',
-        1443,
-        'NZJ8L3bxCOOV6rtTFjsx',
-      ];
+  const props = defineProps(['dataset', 'width', 'height', 'timestamp']);
 
-      let _this = this;
+  //声明公用变量
+  let initCount = 0;
+  let pubKey = '';
+  let oWebControl: any = null;
 
-      this.$refs.fIframe.onload = function () {
-        _this.$refs.fIframe.contentWindow.postMessage(arr);
-      };
+  // 创建播放实例
+  const initPlugin = () => {
+    oWebControl = new window.WebControl({
+      szPluginContainer: 'playWnd' + props.timestamp, // 指定容器id
+      iServicePortStart: 15900, // 指定起止端口号，建议使用该值
+      iServicePortEnd: 15909,
+      szClassId: '23BF3B0A-2C56-4D97-9C03-0CB103AA8F11', // 用于IE10使用ActiveX的clsid
+      cbConnectSuccess: function () {
+        // 创建WebControl实例成功后的回调函数
+        oWebControl
+          .JS_StartService('window', {
+            // WebControl实例创建成功后需要启动VideoPluginPlugin.exe服务
+            dllPath: './VideoPluginConnect.dll', // 值"./VideoPluginConnect.dll"写死
+          })
+          .then(
+            function () {
+              // 启动插件服务成功
+              oWebControl.JS_SetWindowControlCallback({
+                // 设置消息回调
+                cbIntegrationCallBack: cbIntegrationCallBack,
+              });
 
-      window.addEventListener('message', (e) => {
-        this.$emit('closeMonitor');
-      });
-    },
+              // 实际宽高
+              let width = props.width;
+              let height = props.height;
+              const divElement = document.getElementById('camera-box');
+              if (divElement) {
+                const rect = divElement.getBoundingClientRect();
+                const rectWidth = rect.width;
+                const rectHeight = rect.height;
+                if (rectWidth < width) {
+                  width = rectWidth;
+                }
+                if (rectHeight < height) {
+                  height = rectHeight;
+                }
+              }
+
+              oWebControl
+                .JS_CreateWnd('playWnd' + props.timestamp, width, height)
+                .then(function () {
+                  init(); // 创建播放实例成功后初始化
+                });
+            },
+            function () {
+              // 创建播放实例失败回调
+              console.log('创建播放实例失败！！！');
+            },
+          );
+      },
+      cbConnectError: function () {
+        // 创建WebControl实例失败
+        oWebControl = null;
+        let d = document.getElementById('playWnd' + props.timestamp);
+        if (d) {
+          d.innerHTML = '插件未启动，正在尝试启动，请稍候...';
+        }
+        window.WebControl.JS_WakeUp('VideoWebPlugin://'); // 程序未启动时执行error函数，采用wakeup来启动程序
+        initCount++;
+        if (initCount < 3) {
+          setTimeout(function () {
+            initPlugin();
+          }, 3000);
+        } else {
+          let d = document.getElementById('playWnd' + props.timestamp);
+          if (d) {
+            d.innerHTML = '插件启动失败，请检查插件是否安装！';
+          }
+        }
+      },
+      cbConnectClose: function (bNormalClose) {
+        // 异常断开：bNormalClose = false
+        // JS_Disconnect正常断开：bNormalClose = true
+        oWebControl = null;
+      },
+    });
   };
+
+  // 初始化播放内容
+  function init() {
+    getPubKey(function () {
+      let appkey = '23604396'; //综合安防管理平台提供的appkey，必填
+      let ip = '221.2.83.54'; //综合安防管理平台IP地址，必填
+      let port = 1443;
+      let appSecret = 'NZJ8L3bxCOOV6rtTFjsx';
+      let secret = setEncrypt(appSecret); //综合安防管理平台提供的secret，必填
+      let layerOut = '1x1';
+
+      // 确认layerOut
+      let num = Math.ceil(Math.sqrt(props.dataset.length));
+      layerOut = num + 'x' + num;
+
+      let playMode = 0; //初始播放模式：0-预览，1-回放
+      let snapDir = 'D:\\SnapDir'; //抓图存储路径
+      let videoDir = 'D:\\VideoDir'; //紧急录像或录像剪辑存储路径
+      let layout = layerOut; //playMode指定模式的布局 默认1*1
+      let enableHTTPS = 1; //是否启用HTTPS协议与综合安防管理平台交互，这里总是填1
+      let encryptedFields = 'secret'; //加密字段，默认加密领域为secret
+      let showToolbar = 1; //是否显示工具栏，0-不显示，非0-显示
+      let showSmart = 1; //是否显示智能信息（如配置移动侦测后画面上的线框），0-不显示，非0-显示
+      let buttonIDs = '0'; //自定义工具条按钮
+
+      oWebControl
+        .JS_RequestInterface({
+          funcName: 'init',
+          argument: JSON.stringify({
+            appkey: appkey, //API网关提供的appkey
+            secret: secret, //API网关提供的secret
+            ip: ip, //API网关IP地址
+            playMode: playMode, //播放模式（决定显示预览还是回放界面）
+            port: port, //端口
+            snapDir: snapDir, //抓图存储路径
+            videoDir: videoDir, //紧急录像或录像剪辑存储路径
+            layout: layout, //布局
+            enableHTTPS: enableHTTPS, //是否启用HTTPS协议
+            encryptedFields: encryptedFields, //加密字段
+            showToolbar: showToolbar, //是否显示工具栏
+            showSmart: showSmart, //是否显示智能信息
+            buttonIDs: buttonIDs, //自定义工具条按钮
+          }),
+        })
+        .then(function (oData) {
+          // 实际宽高
+          let width = props.width;
+          let height = props.height;
+          const divElement = document.getElementById('camera-box');
+          if (divElement) {
+            const rect = divElement.getBoundingClientRect();
+            const rectWidth = rect.width;
+            const rectHeight = rect.height;
+            if (rectWidth < width) {
+              width = rectWidth;
+            }
+            if (rectHeight < height) {
+              height = rectHeight;
+            }
+          }
+          oWebControl.JS_Resize(width, height); // 初始化后resize一次，规避firefox下首次显示窗口后插件窗口未与DIV窗口重合问题
+        });
+
+      let cameraIndexCode = props.dataset.map((d) => d.serialNumber).toString(); //获取输入的监控点编号值，必填
+      let streamMode = 0; //主子码流标识：0-主码流，1-子码流
+      let transMode = 1; //传输协议：0-UDP，1-TCP
+      let gpuMode = 0; //是否启用GPU硬解，0-不启用，1-启用
+      let wndId = -1; //播放窗口序号（在2x2以上布局下可指定播放窗口）
+
+      // 封装传入需要播放的监控信息
+      let monitors: any = { list: [] };
+      let cameraIndexCodes = cameraIndexCode.split(',');
+      cameraIndexCodes.forEach((item, index) => {
+        let obj = {
+          cameraIndexCode: item, //监控点编号
+          streamMode: streamMode, //主子码流标识
+          transMode: transMode, //传输协议
+          gpuMode: gpuMode, //是否开启GPU硬解
+          wndId: index + 1, //可指定播放窗口
+        };
+        monitors.list.push(obj);
+      });
+
+      // 开始预览多个视频
+      oWebControl.JS_RequestInterface({
+        funcName: 'startMultiPreviewByCameraIndexCode',
+        argument: JSON.stringify(monitors),
+      });
+    });
+  }
+
+  // 标签关闭
+  function closeHkVideo() {
+    if (oWebControl != null) {
+      // 先让窗口隐藏，规避可能的插件窗口滞后于浏览器消失问题
+      oWebControl.JS_HideWnd();
+      // 销毁当前播放的视频
+      oWebControl.JS_RequestInterface({ funcName: 'destroyWnd' });
+      // 断开与插件服务连接
+      oWebControl.JS_Disconnect();
+    }
+  }
+
+  // 获取公钥
+  function getPubKey(callback) {
+    oWebControl
+      .JS_RequestInterface({
+        funcName: 'getRSAPubKey',
+        argument: JSON.stringify({
+          keyLength: 1024,
+        }),
+      })
+      .then(function (oData) {
+        if (oData.responseMsg.data) {
+          pubKey = oData.responseMsg.data;
+          callback();
+        }
+      });
+  }
+
+  // RSA加密
+  function setEncrypt(value) {
+    let encrypt = new JSEncrypt();
+    encrypt.setPublicKey(pubKey);
+    return encrypt.encrypt(value);
+  }
+
+  // 推送消息
+  function cbIntegrationCallBack(oData) {
+    // showCBInfo(JSON.stringify(oData.responseMsg));
+  }
+
+  onMounted(() => {
+    initPlugin();
+  });
+  onUnmounted(() => {
+    closeHkVideo();
+  });
+
+  defineExpose({
+    initPlugin,
+    init,
+    closeHkVideo,
+  });
 </script>
 
 <style scoped>
-  .box-container {
-    width: 100vw;
-    height: 100vh;
-  }
-
-  .table-header {
-    width: calc(100% - 10px);
-    height: 25px;
-    color: #fff;
-    text-align: center;
-  }
-  .table-header div {
-    float: left;
-    width: 25%;
-    border-bottom: 1px dashed #00fff0;
-    padding-bottom: 8px;
-  }
-  .table-body {
-    width: 100%;
-    height: calc(100% - 40px);
-    overflow-y: auto;
-  }
-
-  .table-body .item {
-    width: 100%;
-    height: 36px;
-    background: #00ffee2f;
-    font-size: 12px;
-    text-align: center;
-    line-height: 36px;
-    cursor: pointer;
-  }
-
-  .table-body .item:nth-child(2n) {
-    background: #00ffee50;
-  }
-
-  .table-body .item div {
-    float: left;
-    width: 25%;
-    color: #eee;
-    overflow: hidden;
-    height: 36px;
-  }
-
-  ::-webkit-scrollbar-track,
-  ::-webkit-scrollbar-thumb {
-    border: 0;
-  }
-
-  ::-webkit-scrollbar {
-    height: 10px;
-    width: 10px;
-    background: transparent;
+  .camera-box {
+    width: v-bind('`${props.width}px`');
+    height: v-bind('`${props.height}px`');
     border-radius: 5px;
+    position: relative;
+    z-index: 10 !important;
+    position: fixed;
+    left: 50%;
+    top: 50%;
+    z-index: 10;
+    transform: translate(-50%, -50%);
+    padding: 0px;
   }
 
-  ::-webkit-scrollbar-thumb {
-    padding-top: 100px;
-    -webkit-box-shadow:
-      inset 1px 1px 0 rgba(0, 0, 0, 0.1),
-      inset -1px -1px 0 rgba(0, 0, 0, 0.07);
-    background-color: #797979;
-    min-height: 28px;
-    border-radius: 4px;
-    background-clip: padding-box;
+  .camera-body {
+    width: v-bind('`${props.width}px`');
+    height: v-bind('`${props.height}px`');
   }
 
-  ::-webkit-scrollbar-track,
-  ::-webkit-scrollbar-thumb {
-    border: 0;
-  }
-
-  ::-webkit-scrollbar-thumb:hover {
-    -webkit-box-shadow: inset 1px 1px 1px rgba(0, 0, 0, 0.25);
-    background-color: rgba(0, 0, 0, 0.4);
-  }
-
-  ::-webkit-scrollbar-thumb:active {
-    -webkit-box-shadow: inset 1px 1px 3px rgba(0, 0, 0, 0.35);
-    background-color: rgba(0, 0, 0, 0.5);
+  .playWnd {
+    width: v-bind('`${props.width}px`');
+    height: v-bind('`${props.height}px`');
   }
 </style>
diff --git a/src/packages/components/Zhigan/Zhigan/ZhiGan_ModalVideo/index.vue b/src/packages/components/Zhigan/Zhigan/ZhiGan_ModalVideo/index.vue
index d596b0c..f891e30 100644
--- a/src/packages/components/Zhigan/Zhigan/ZhiGan_ModalVideo/index.vue
+++ b/src/packages/components/Zhigan/Zhigan/ZhiGan_ModalVideo/index.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="ZhiGan_ModalVideo">
-    <div class="modalVideoTitle">
+    <!-- <div class="modalVideoTitle">
       <n-select
         v-model:value="option.dataStyle.serialNumberValue"
         :options="option.dataset"
@@ -8,18 +8,18 @@
         value-field="serialNumber"
         placeholder="请选择查看的视频"
       />
-    </div>
+    </div> -->
     <!-- 编辑状态 -->
     <!-- 无视频url的情况 -->
     <n-image
-      v-if="isEdit || !option.dataStyle.serialNumberValue"
+      v-if="isEdit"
       :width="`${w - 2 * option.dataStyle.padding - 2 * option.dataStyle.borderWidth}`"
       :height="`${h - 2 * option.dataStyle.padding - 2 * option.dataStyle.borderWidth}`"
       src="/src/assets/images/chart/zhichu/component/SheXiangTouModal_Image.png"
       preview-disabled
     />
     <!-- 其他情况 -->
-    <video
+    <!-- <video
       v-else-if="
         option.dataStyle.serialNumberValue.includes('https://') ||
         option.dataStyle.serialNumberValue.includes('http://')
@@ -34,18 +34,29 @@
       :muted="option.dataStyle.videoMuted"
       :width="`${w - 2 * option.dataStyle.padding - 2 * option.dataStyle.borderWidth}`"
       :height="`${h - 2 * option.dataStyle.padding - 2 * option.dataStyle.borderWidth}`"
-    />
+    /> -->
     <MulHKmonitor
+      ref="MulHKmonitorRef"
       v-else
-      :serialNumberValue="option.dataStyle.serialNumberValue"
+      :dataset="option.dataset"
       :width="`${w - 2 * option.dataStyle.padding - 2 * option.dataStyle.borderWidth}`"
       :height="`${h - 2 * option.dataStyle.padding - 2 * option.dataStyle.borderWidth}`"
+      :timestamp="option.dataStyle.timestamp"
     />
   </div>
 </template>
 
 <script setup lang="ts">
-  import { PropType, toRefs, reactive, ref, onMounted, onBeforeUnmount, watch } from 'vue';
+  import {
+    PropType,
+    toRefs,
+    reactive,
+    ref,
+    onMounted,
+    onBeforeUnmount,
+    watch,
+    computed,
+  } from 'vue';
   import { CreateComponentType } from '@/packages/index.d';
   import { icon } from '@/plugins';
   import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore';
@@ -62,8 +73,6 @@
     },
   });
 
-  console.log(document.location);
-
   const { w, h } = toRefs(props.chartConfig.attr);
 
   const option = reactive({
@@ -72,52 +81,61 @@
     status: props.chartConfig.status,
   });
 
+  const MulHKmonitorRef = ref();
+  const chartEditStore = useChartEditStore();
+
   // 是否是编辑状态
   const isEdit = window.location.href.includes('/chart/home/');
+
   // 状态隐藏、显示
   watch(
     () => option.status.hide,
-    () => {
-      if (!option.status.hide && !isEdit) {
-        setTimeout(function () {
-          handlerPlayVideo();
-        }, 1000);
-      }
-    },
-  );
+    (newValue) => {
+      console.log(newValue);
 
-  // 播放的视频
-  watch(
-    () => option.dataStyle.serialNumberValue,
-    () => {
-      if (option.dataStyle.serialNumberValue) {
-        handlerPlayVideo();
-      } else {
-        if (player) {
-          player.dispose();
-          player = null;
+      if (!isEdit) {
+        if (!newValue) {
+          // handlerPlayVideo();
+          MulHKmonitorRef.value.initPlugin();
+        } else {
+          MulHKmonitorRef.value.closeHkVideo();
         }
       }
     },
   );
 
+  // 播放的视频
+  // watch(
+  //   () => option.dataStyle.serialNumberValue,
+  //   () => {
+  //     if (option.dataStyle.serialNumberValue) {
+  //       handlerPlayVideo();
+  //     } else {
+  //       if (player) {
+  //         player.dispose();
+  //         player = null;
+  //       }
+  //     }
+  //   },
+  // );
+
   // 视频控件初始化
-  let player: any = null;
-  function handlerPlayVideo() {
-    if (
-      !option.status.hide &&
-      !isEdit &&
-      (option.dataStyle.serialNumberValue.includes('https://') ||
-        option.dataStyle.serialNumberValue.includes('http://'))
-    ) {
-      if (player) {
-        player.src(option.dataStyle.serialNumberValue);
-      } else {
-        player = TCPlayer('ZhiGan_ModalVideo' + option.dataStyle.timestamp, {});
-        player.src(option.dataStyle.serialNumberValue);
-      }
-    }
-  }
+  // let player: any = null;
+  // function handlerPlayVideo() {
+  //   if (
+  //     !option.status.hide &&
+  //     !isEdit &&
+  //     (option.dataStyle.serialNumberValue.includes('https://') ||
+  //       option.dataStyle.serialNumberValue.includes('http://'))
+  //   ) {
+  //     if (player) {
+  //       player.src(option.dataStyle.serialNumberValue);
+  //     } else {
+  //       player = TCPlayer('ZhiGan_ModalVideo' + option.dataStyle.timestamp, {});
+  //       player.src(option.dataStyle.serialNumberValue);
+  //     }
+  //   }
+  // }
 
   // 初始化视频控件
   onMounted(() => {
@@ -125,12 +143,11 @@
     if (!option.dataStyle.timestamp) {
       option.dataStyle.timestamp = dayjs().unix();
     }
-    if (!window.location.href.includes('/chart/home/')) {
-      setTimeout(function () {
-        handlerPlayVideo();
-      }, 1000);
-    }
-
+    // if (!window.location.href.includes('/chart/home/')) {
+    //   setTimeout(function () {
+    //     handlerPlayVideo();
+    //   }, 1000);
+    // }
     // 组件通信
     const sql = props.chartConfig.request?.requestSQLContent?.sql;
     EventBus.on(props.chartConfig.id + 'dataupdate', (data) => {
@@ -138,23 +155,26 @@
       // 数据callback处理（预览时触发）
       useChartDataFetch(props.chartConfig, useChartEditStore, (resData: any[]) => {
         option.dataset = resData;
-        handlerPlayVideo();
+        // handlerPlayVideo();
+        MulHKmonitorRef.value.initPlugin();
       });
     });
   });
 
   // 销毁视频控件
   onBeforeUnmount(() => {
-    if (player) {
-      player.dispose();
-      player = null;
-    }
+    // if (player) {
+    //   player.dispose();
+    //   player = null;
+    // }
+    MulHKmonitorRef.value.closeHkVideo();
   });
 
   // 数据callback处理（预览时触发）
   useChartDataFetch(props.chartConfig, useChartEditStore, (resData: any[]) => {
     option.dataset = resData;
-    handlerPlayVideo();
+    // handlerPlayVideo();
+    MulHKmonitorRef.value.initPlugin();
   });
 </script>