From d86c765ea52bf625a1eb5239660c0f3e2eb47105 Mon Sep 17 00:00:00 2001
From: zzyuan <781948537@qq.com>
Date: Mon, 30 Jun 2025 14:18:52 +0800
Subject: [PATCH] =?UTF-8?q?=E7=9B=91=E6=8E=A7=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 public/iframe.html                            |  20 +-
 .../environment/videoMonitoring/index.vue     | 221 +++++++++++-------
 src/views/kitchen/index.vue                   |   4 +-
 3 files changed, 153 insertions(+), 92 deletions(-)

diff --git a/public/iframe.html b/public/iframe.html
index a35636e0..b87ff91d 100644
--- a/public/iframe.html
+++ b/public/iframe.html
@@ -30,19 +30,19 @@ html, body {
 <script src="./codebase/webVideoCtrl.js"></script>
 <script>
 var urlParams = new URLSearchParams(window.location.search);
-// var type = urlParams.get('type');
-// console.log(type)
+var type = urlParams.get('type');
+console.log(type)
 $(function () {
     var height = '350';
     var width = $("body").width();
-    // if(type=="dialog"){
-    //     width = $("body").width();
-    //     height = '500';
-    // }
-    // if(type=="sanwei"){
-    //     width = $("body").width();
-    //     height = '230';
-    // }
+    if(type=="1"){
+        width = $("body").width();
+        height = '350';
+    }
+    if(type=="2"){
+        width = $("body").width();
+        height = '600';
+    }
     // ��ʼ�����������������
     WebVideoCtrl.I_InitPlugin(width,height, {
         bWndFull: true,//�Ƿ�֧�ֵ�����˫��ȫ����Ĭ��֧�� true:֧�� false:��֧��
diff --git a/src/views/kitchen/environment/videoMonitoring/index.vue b/src/views/kitchen/environment/videoMonitoring/index.vue
index 58661e37..43a7654f 100644
--- a/src/views/kitchen/environment/videoMonitoring/index.vue
+++ b/src/views/kitchen/environment/videoMonitoring/index.vue
@@ -1,38 +1,66 @@
 <template>
     <div id="video">
-        <div class="header"><span>视频监控</span></div>
-        <div style="width: 100%;display: flex;justify-content: space-between;">
-            <div style="width: 20%;">
-                <el-tree style="height: 700px; overflow: scroll"
-                :data="devicesOptions" :props="defaultProps"
-                :default-expand-all="true"
-                :expand-on-click-node="false" @node-click="handleNodeClick"
-                ref="typeTree" node-key="deviceId" highlight-current 
-                ></el-tree> 
-            </div>  
-            <div class="contant">
-                <div style="width: 45%;height: 350px;margin-bottom: 10px; overflow: hidden;position: relative;margin-right: 10px;" @click="chosenWindow(1)">
-                    <div style="width: 100%;height: 100%;position: fixed;" @click="chosenWindow('1')"></div>
-                    <iframe src="iframe.html" ref="videoIframe1" frameborder="0" style="width: 100%;height: 100%;"></iframe>
-                    <span style="position: absolute;left: 0.2rem;bottom:0.2rem;font-size: 14px;color: aliceblue;">{{deviceName1}}</span>
-                </div>
-                <div style="width: 45%;height: 350px;margin-bottom: 10px; overflow: hidden;position: relative;margin-right: 10px" @click="chosenWindow(2)">
-                    <div style="width: 100%;height: 100%;position: fixed;" @click="chosenWindow('2')"></div>
-                    <iframe src="iframe.html" ref="videoIframe2" frameborder="0" style="width: 100%;height: 100%;"></iframe>
-                    <span style="position: absolute;left: 0.2rem;bottom:0.2rem;font-size: 14px;color: aliceblue;">{{deviceName2}}</span>
-                </div>
-                <div style="width: 45%;height: 350px;margin-bottom: 10px; overflow: hidden;position: relative;margin-right: 10px" @click="chosenWindow(3)">
-                    <div style="width: 100%;height: 100%;position: fixed;" @click="chosenWindow('3')"></div>
-                    <iframe src="iframe.html" ref="videoIframe3" frameborder="0" style="width: 100%;height: 100%;"></iframe>
-                    <span style="position: absolute;left: 0.2rem;bottom:0.2rem;font-size: 14px;color: aliceblue;">{{deviceName3}}</span>
-                </div>
-                <div style="width: 45%;height: 350px;margin-bottom: 10px; overflow: hidden;position: relative;margin-right: 10px" @click="chosenWindow(4)">
-                    <div style="width: 100%;height: 100%;position: fixed;" @click="chosenWindow('4')"></div>
-                    <iframe src="iframe.html" ref="videoIframe4" frameborder="0" style="width: 100%;height: 100%;"></iframe>
-                    <span style="position: absolute;left: 0.2rem;bottom:0.2rem;font-size: 14px;color: aliceblue;">{{deviceName4}}</span>
-                </div>
-            </div>
-        </div>
+        <div style="width: 100%;">
+            <el-tabs v-model="activeName" type="card" @tab-click="handleTabClick">
+                <el-tab-pane label="视频监控" name="1">
+                    <div class="header"><span>视频监控</span></div>
+                    <div style="width: 100%;display: flex;justify-content: space-between;">
+                        <div style="width: 20%;">
+                            <el-tree style="height: 700px; overflow: scroll"
+                            :data="devicesOptions" :props="defaultProps"
+                            :default-expand-all="true"
+                            :expand-on-click-node="false" @node-click="handleNodeClick"
+                            ref="typeTree" node-key="deviceId" highlight-current 
+                            ></el-tree> 
+                        </div>  
+                        <div class="contant">
+                            <div style="width: 45%;height: 350px;margin-bottom: 10px; overflow: hidden;position: relative;margin-right: 10px;">
+                                <div style="width: 100%;height: 100%;position: fixed;" @click="chosenWindow('1')"></div>
+                                <iframe src="iframe.html?type=1" ref="videoIframe1" frameborder="0" style="width: 100%;height: 100%;"></iframe>
+                                <span style="position: absolute;left: 0.2rem;bottom:0.2rem;font-size: 14px;color: aliceblue;">{{deviceName1}}</span>
+                            </div>
+                            <div style="width: 45%;height: 350px;margin-bottom: 10px; overflow: hidden;position: relative;margin-right: 10px">
+                                <div style="width: 100%;height: 100%;position: fixed;" @click="chosenWindow('2')"></div>
+                                <iframe src="iframe.html?type=1" ref="videoIframe2" frameborder="0" style="width: 100%;height: 100%;"></iframe>
+                                <span style="position: absolute;left: 0.2rem;bottom:0.2rem;font-size: 14px;color: aliceblue;">{{deviceName2}}</span>
+                            </div>
+                            <div style="width: 45%;height: 350px;margin-bottom: 10px; overflow: hidden;position: relative;margin-right: 10px">
+                                <div style="width: 100%;height: 100%;position: fixed;" @click="chosenWindow('3')"></div>
+                                <iframe src="iframe.html?type=1" ref="videoIframe3" frameborder="0" style="width: 100%;height: 100%;"></iframe>
+                                <span style="position: absolute;left: 0.2rem;bottom:0.2rem;font-size: 14px;color: aliceblue;">{{deviceName3}}</span>
+                            </div>
+                            <div style="width: 45%;height: 350px;margin-bottom: 10px; overflow: hidden;position: relative;margin-right: 10px">
+                                <div style="width: 100%;height: 100%;position: fixed;" @click="chosenWindow('4')"></div>
+                                <iframe src="iframe.html?type=1" ref="videoIframe4" frameborder="0" style="width: 100%;height: 100%;"></iframe>
+                                <span style="position: absolute;left: 0.2rem;bottom:0.2rem;font-size: 14px;color: aliceblue;">{{deviceName4}}</span>
+                            </div>
+                        </div>
+                    </div>
+                </el-tab-pane>
+                <el-tab-pane label="历史视频" name="2">
+                    <div class="header"><span>历史视频</span></div>
+                    <div style="width: 100%;display: flex;justify-content: space-between;">
+                        <div style="width: 20%;">
+                            <el-tree style="height: 700px; overflow: scroll"
+                            :data="devicesOptions" :props="defaultProps"
+                            :default-expand-all="true"
+                            :expand-on-click-node="false" @node-click="handleNodeClick"
+                            ref="typeTree" node-key="deviceId" highlight-current 
+                            ></el-tree> 
+                        </div>  
+                        <div class="contant">
+                            <div style="width: 100%;height: 600px;margin-bottom: 10px; overflow: hidden;position: relative;margin-right: 10px;">
+                                <div style="width: 100%;height: 100%;position: fixed;"></div>
+                                <iframe src="iframe.html?type=2" ref="videoIframe5" frameborder="0" style="width: 100%;height: 100%;"></iframe>
+                                <span style="position: absolute;left: 0.2rem;bottom:0.2rem;font-size: 14px;color: aliceblue;">{{deviceName1}}</span>
+                            </div> 
+                        </div>
+                    </div>
+
+                </el-tab-pane> 
+            </el-tabs>
+        </div> 
+       
         
     </div> 
 </template>
@@ -46,6 +74,7 @@ components: {
 },
 data() {
     return {
+        activeName:'1',
         deviceData:[
         ],
         deviceName1:'监控1',
@@ -68,8 +97,7 @@ created() {
 },
 mounted() {
     this.getKitchenDeviceSelect();
-    this.videoLogin(); 
-    
+    this.videoLogin();  
 },
 methods:{
     // 门禁设备选项
@@ -78,7 +106,27 @@ methods:{
             this.devicesOptions = response.data 
         })
     },
+    // 初始化监控列表
+    videoLogin(){ 
+        setTimeout(() => {
+            this.iframeLogin('1','11')
+            this.iframeLogin('2','12')
+            this.iframeLogin('3','27')
+            this.iframeLogin('4','28')
+        }, 1000); 
+    },
+    //点击设备
+    handleTabClick(tab){ 
+        console.log(this.activeName)
+        if(this.activeName=='1'){
+
+        } 
+        if(this.activeName=='2'){
+
+        } 
+    },
     chosenWindow(num){
+        console.log(num)
         this.chosenWinNo = num;
         setTimeout(() => {
             this.iframeLoaded(this.chosenWinNo,this.chosenChannel) 
@@ -97,7 +145,9 @@ methods:{
             this.$modal.msgError("设备未绑定通道号");
         } 
       },
-    iframeLoaded(domId,channel){
+    iframeLoaded(domId,channel){ 
+        console.log(domId)
+        console.log(channel)
         var oLiveView = {
             iProtocol: 1,            // protocol 1��http, 2:https
             szIP: "192.168.1.10",    // protocol ip
@@ -110,48 +160,68 @@ methods:{
         };
         if(domId=='1'){
             var oWebVideoCtrl1 = this.$refs.videoIframe1.contentWindow.WebVideoCtrl; 
-            setTimeout(function () { 
-                var szDeviceIdentify = oLiveView.szIP + "_" + oLiveView.szPort;
-                oWebVideoCtrl1.I_StartRealPlay(szDeviceIdentify, {
-                    iStreamType: oLiveView.iStreamType,
-                    iChannelID: channel,
-                    bZeroChannel: oLiveView.bZeroChannel
-                });
-            }, 500);
+            oWebVideoCtrl1.I_Logout(oLiveView.szIP + "_" + oLiveView.szPort)
+            // oWebVideoCtrl1.I_Login(oLiveView.szIP, oLiveView.iProtocol, oLiveView.szPort, oLiveView.szUsername, oLiveView.szPassword, {
+            //     success: function (xmlDoc) {
+            //         var szDeviceIdentify = oLiveView.szIP + "_" + oLiveView.szPort;
+            //         setTimeout(function () {
+            //             oWebVideoCtrl1.I_StartRealPlay(szDeviceIdentify, {
+            //                 iStreamType: oLiveView.iStreamType,
+            //                 iChannelID: channel,
+            //                 bZeroChannel: oLiveView.bZeroChannel
+            //             });
+            //         }, 500);
+            //     }
+            // }); 
         }
         if(domId=='2'){
             var oWebVideoCtrl2 = this.$refs.videoIframe2.contentWindow.WebVideoCtrl; 
-            setTimeout(function () { 
-                var szDeviceIdentify = oLiveView.szIP + "_" + oLiveView.szPort;
-                oWebVideoCtrl2.I_StartRealPlay(szDeviceIdentify, {
-                    iStreamType: oLiveView.iStreamType,
-                    iChannelID: channel,
-                    bZeroChannel: oLiveView.bZeroChannel
-                });
-            }, 500);
+            oWebVideoCtrl2.I_Logout(oLiveView.szIP + "_" + oLiveView.szPort)
+            // oWebVideoCtrl2.I_Login(oLiveView.szIP, oLiveView.iProtocol, oLiveView.szPort, oLiveView.szUsername, oLiveView.szPassword, {
+            //     success: function (xmlDoc) {
+            //         var szDeviceIdentify = oLiveView.szIP + "_" + oLiveView.szPort;
+            //         setTimeout(function () {
+            //             oWebVideoCtrl2.I_StartRealPlay(szDeviceIdentify, {
+            //                 iStreamType: oLiveView.iStreamType,
+            //                 iChannelID: channel,
+            //                 bZeroChannel: oLiveView.bZeroChannel
+            //             });
+            //         }, 500);
+            //     }
+            // }); 
         }
         if(domId=='3'){
-            var oWebVideoCtrl3 = this.$refs.videoIframe3.contentWindow.WebVideoCtrl;
-            setTimeout(function () { 
-                var szDeviceIdentify = oLiveView.szIP + "_" + oLiveView.szPort;
-                oWebVideoCtrl3.I_StartRealPlay(szDeviceIdentify, {
-                    iStreamType: oLiveView.iStreamType,
-                    iChannelID: channel,
-                    bZeroChannel: oLiveView.bZeroChannel
-                });
-            }, 500);
+            var oWebVideoCtrl3 = this.$refs.videoIframe3.contentWindow.WebVideoCtrl; 
+            oWebVideoCtrl3.I_Logout(oLiveView.szIP + "_" + oLiveView.szPort)
+            // oWebVideoCtrl3.I_Login(oLiveView.szIP, oLiveView.iProtocol, oLiveView.szPort, oLiveView.szUsername, oLiveView.szPassword, {
+            //     success: function (xmlDoc) {
+            //         var szDeviceIdentify = oLiveView.szIP + "_" + oLiveView.szPort;
+            //         setTimeout(function () {
+            //             oWebVideoCtrl3.I_StartRealPlay(szDeviceIdentify, {
+            //                 iStreamType: oLiveView.iStreamType,
+            //                 iChannelID: channel,
+            //                 bZeroChannel: oLiveView.bZeroChannel
+            //             });
+            //         }, 500);
+            //     }
+            // }); 
         }
         if(domId=='4'){
-            var oWebVideoCtrl4 = this.$refs.videoIframe4.contentWindow.WebVideoCtrl;
-            setTimeout(function () { 
-                var szDeviceIdentify = oLiveView.szIP + "_" + oLiveView.szPort;
-                oWebVideoCtrl4.I_StartRealPlay(szDeviceIdentify, {
-                    iStreamType: oLiveView.iStreamType,
-                    iChannelID: channel,
-                    bZeroChannel: oLiveView.bZeroChannel
-                });
-            }, 500);
-        }
+            var oWebVideoCtrl4 = this.$refs.videoIframe4.contentWindow.WebVideoCtrl; 
+            oWebVideoCtrl4.I_Logout(oLiveView.szIP + "_" + oLiveView.szPort)
+            // oWebVideoCtrl4.I_Login(oLiveView.szIP, oLiveView.iProtocol, oLiveView.szPort, oLiveView.szUsername, oLiveView.szPassword, {
+            //     success: function (xmlDoc) {
+            //         var szDeviceIdentify = oLiveView.szIP + "_" + oLiveView.szPort;
+            //         setTimeout(function () {
+            //             oWebVideoCtrl4.I_StartRealPlay(szDeviceIdentify, {
+            //                 iStreamType: oLiveView.iStreamType,
+            //                 iChannelID: channel,
+            //                 bZeroChannel: oLiveView.bZeroChannel
+            //             });
+            //         }, 500);
+            //     }
+            // }); 
+        } 
     },
     iframeLogin(domId,channel){
         var oLiveView = {
@@ -232,14 +302,7 @@ methods:{
         // monitor.clickStartRealPlay(null,'1')
         // this.$refs.vueRef.play();//播放
     },
-    videoLogin(){ 
-        setTimeout(() => {
-            this.iframeLogin('1','11')
-            this.iframeLogin('2','12')
-            this.iframeLogin('3','27')
-            this.iframeLogin('4','28')
-        }, 1000); 
-    },
+   
 }
 }
 </script>
diff --git a/src/views/kitchen/index.vue b/src/views/kitchen/index.vue
index 889679aa..5edc2cdb 100644
--- a/src/views/kitchen/index.vue
+++ b/src/views/kitchen/index.vue
@@ -241,9 +241,7 @@ export default {
         this.InitEChartsTwo()
         this.InitEChartsThree()
         this.InitEChartsFour()
-        this.InitEChartsFive()
-
-
+        this.InitEChartsFive() 
       }); 
     },
     changDate1(){