From 849619c8bdd7d430549f4743208ce96242614498 Mon Sep 17 00:00:00 2001
From: zzyuan <781948537@qq.com>
Date: Tue, 8 Jul 2025 15:56:21 +0800
Subject: [PATCH] =?UTF-8?q?=E8=A7=86=E9=A2=91=E5=AF=B9=E6=8E=A52?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 public/monitor/iframe.html                    |  51 +--
 .../environment/videoMonitoring/history.vue   | 282 +++++++++----
 .../environment/videoMonitoring/index.vue     | 286 ++++++-------
 .../environment/videoMonitoring/index2.vue    | 337 ----------------
 .../environment/videoMonitoring/temp.vue      | 376 ++++++++++++++++++
 5 files changed, 719 insertions(+), 613 deletions(-)
 delete mode 100644 src/views/kitchen/environment/videoMonitoring/index2.vue
 create mode 100644 src/views/kitchen/environment/videoMonitoring/temp.vue

diff --git a/public/monitor/iframe.html b/public/monitor/iframe.html
index 198b1b63..6771fb37 100644
--- a/public/monitor/iframe.html
+++ b/public/monitor/iframe.html
@@ -29,30 +29,35 @@ html, body {
 <script src="./codebase/jsPlugin-1.2.0.min.js"></script>
 <script src="./codebase/webVideoCtrl.js"></script>
 <script>
-var urlParams = new URLSearchParams(window.location.search);
-var type = urlParams.get('type');
-console.log(type)
-$(function () {
-    var height = '350';
-    var width = $("body").width(); 
-    if(type=="1"){
-        width = $("body").width() * 0.5;
-        height = '350';
-    }
-    if(type=="2"){
-        width = $("body").width() * 0.5;
-        height = '600';
-    }
-    // ��ʼ�����������������
-    WebVideoCtrl.I_InitPlugin(width,height, {
-        bWndFull: true,//�Ƿ�֧�ֵ�����˫��ȫ����Ĭ��֧�� true:֧�� false:��֧��
-        iWndowType: 1,
-        cbInitPluginComplete: function () {
-            WebVideoCtrl.I_InsertOBJECTPlugin("divPlugin");
-        }
-    });
+// var urlParams = new URLSearchParams(window.location.search);
+// var type = urlParams.get('type');
+// console.log(type)
+// $(function () {
+//     var height = '350';
+//     var width = $("body").width(); 
+//     if(type=="1"){
+//         width = $("body").width() * 0.5;
+//         height = '350';
+//     }
+//     if(type=="2"){
+//         width = $("body").width() * 0.5;
+//         height = '600';
+//     }
+//     // ��ʼ�����������������
+//     WebVideoCtrl.I_InitPlugin(width,height, {
+//         bWndFull: true,//�Ƿ�֧�ֵ�����˫��ȫ����Ĭ��֧�� true:֧�� false:��֧��
+//         iWndowType: 1,
+//         cbInitPluginComplete: function () {
+//             WebVideoCtrl.I_InsertOBJECTPlugin("divPlugin");
+//         },
+//         cbSelWnd: function (xmlDoc) { 
+//             let g_iWndIndex = parseInt($(xmlDoc).find("SelectWnd").eq(0).text(), 10);
+//             var szInfo = "当前选择的窗口编号：" + g_iWndIndex;
+//             console.log(szInfo);
+//         },
+//     });
 
-});
+// });
 
 </script>
 </html>
\ No newline at end of file
diff --git a/src/views/kitchen/environment/videoMonitoring/history.vue b/src/views/kitchen/environment/videoMonitoring/history.vue
index 3e5d6afc..66b49f19 100644
--- a/src/views/kitchen/environment/videoMonitoring/history.vue
+++ b/src/views/kitchen/environment/videoMonitoring/history.vue
@@ -1,103 +1,216 @@
 <template>
     <div id="video">
-        <div class="header" @click="getData"><span>历史视频</span></div>
-        <div class="contant">
-            <div style="width: 80%;height: 400px;margin-bottom: 10px; overflow: hidden;position: relative;margin-right: 10px;" > 
-                <iframe src="monitor/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>
+        <div style="width: 100%;">  
+            <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="handleNodeClick2"
+                    ref="typeTree" node-key="deviceId" highlight-current 
+                    ></el-tree> 
+                </div>  
+                <div class="contant">
+                    <div style="display: flex;width: 100%;height: 50px;align-items: center;">
+                        <div style="font-weight: bold;margin-right: 10px;margin-left: 20px;">时间范围:</div>
+                        <el-date-picker
+                            v-model="dateRange"
+                            type="datetimerange"
+                            align="right"
+                            unlink-panels
+                            range-separator="至"
+                            start-placeholder="开始日期"
+                            end-placeholder="结束日期"
+                            format="yyyy-MM-dd HH:mm:ss" style="width: 400px"
+                            :default-time="['00:00:00', '23:59:59']"
+                            :picker-options="pickerOptions" >
+                        </el-date-picker>
+                    </div>
+                    <div style="width: 100%;height: 630px;margin-bottom: 10px; overflow: hidden;position: relative;margin-right: 10px;"> 
+                        <iframe src="monitor/iframe.html" ref="videoIframe2" frameborder="0" style="width: 1300px;height: 630px;"></iframe> 
+                    </div> 
+                </div>
+            </div> 
+        </div> 
+       
+        
     </div> 
 </template>
-<script src="./codebase/webVideoCtrl.js"></script>
+<!-- <script src="./codebase/webVideoCtrl.js"></script> -->
 <script> 
 import $ from 'jquery';
-
+import { getKitchenDeviceSelectApi } from "@/api/kitchen/devices"; 
 export default {
 name: 'videoMonitoring',
 components: {
 },
 data() {
     return {
+        activeName:'2',
         deviceData:[
-        ],
-        deviceName1:'监控1',
-        deviceName2:'监控2',
-        deviceName3:'监控3',
-        deviceName4:'监控4',
-        titleList:[]
+        ], 
+        titleList:[],
+        devicesOptions:[],
+        defaultProps: {
+          children: "children",
+          label: "deviceName",
+          id: "deviceId"
+        }, 
+        dateRange:this.defaultDateRange(),
+        pickerOptions:{                                 
+            //禁用当前日期之前的日期
+            disabledDate(time) {
+            //Date.now()是javascript中的内置函数，它返回自1970年1月1日00:00:00 UTC以来经过的毫秒数。
+               return time.getTime() < Date.now() - 8.64e7;
+            }
+        },
+        chosenWinNo:0,
+        chosenChannel:null,
+        chosenChannel2:null,
     };
-},
-created() {
-    // monitor.clickLogin()
-},
+}, 
 mounted() {
-    this.getData();
-    // this.iframeLoaded()
-    
+    this.getKitchenDeviceSelect();
+    this.videoLogin();  
 },
 methods:{
-    iframeLoaded (domId,channel){
-        // console.log(domId)
-                if(domId=='0'){
-                    var oWebVideoCtrl = this.$refs.videoIframe1.contentWindow.WebVideoCtrl;
-                    this.iframeLogin(oWebVideoCtrl,channel)
-                }
-                if(domId=='1'){
-                    var oWebVideoCtrl = this.$refs.videoIframe2.contentWindow.WebVideoCtrl;
-                    this.iframeLogin(oWebVideoCtrl,channel)
-                }
-                if(domId=='2'){
-                    var oWebVideoCtrl = this.$refs.videoIframe3.contentWindow.WebVideoCtrl;
-                    this.iframeLogin(oWebVideoCtrl,channel)
-                }
-                if(domId=='3'){
-                    var oWebVideoCtrl = this.$refs.videoIframe4.contentWindow.WebVideoCtrl;
-                    this.iframeLogin(oWebVideoCtrl,channel)
-                }
+    // 门禁设备选项
+    getKitchenDeviceSelect(){
+        getKitchenDeviceSelectApi({deviceType:1}).then((response) => {
+            this.devicesOptions = response.data 
+        })
     },
-    iframeLogin(oWebVideoCtrl,channel){
+    // 初始化监控列表
+    videoLogin(){   
+        setTimeout(() => { 
+            this.iframeLogin('2')  
+        }, 500); 
+    }, 
+    iframeLogin(domId){
         var oLiveView = {
-                iProtocol: 1,            // protocol 1��http, 2:https
-                szIP: "192.168.1.10",    // protocol ip
-                szPort: "80",            // protocol port
-                szUsername: "admin",     // device username
-                szPassword: "hzx12345", // device password
-                iStreamType: 2,          // stream 1��main stream  2��sub-stream  3��third stream  4��transcode stream
-                iChannelID: 1,           // channel no
-                bZeroChannel: false      // zero channel
-            };
-        oWebVideoCtrl.I_Login(oLiveView.szIP, oLiveView.iProtocol, oLiveView.szPort, oLiveView.szUsername, oLiveView.szPassword, {
-            success: function (xmlDoc) {
-                var szDeviceIdentify = oLiveView.szIP + "_" + oLiveView.szPort;
-                setTimeout(function () {
-                    oWebVideoCtrl.I_StartRealPlay(oLiveView.szIP, {
-                        iStreamType: oLiveView.iStreamType,
-                        iChannelID: channel,
-                        bZeroChannel: oLiveView.bZeroChannel
-                    });
-                }, 1000);
+            iProtocol: 1,            // protocol 1��http, 2:https
+            szIP: "192.168.1.10",    // protocol ip
+            szPort: "80",            // protocol port
+            szUsername: "admin",     // device username
+            szPassword: "hzx12345", // device password
+            iStreamType: 2,          // stream 1��main stream  2��sub-stream  3��third stream  4��transcode stream
+            iChannelID: 1,           // channel no
+            bZeroChannel: false      // zero channel
+        }
+        var szDeviceIdentify = oLiveView.szIP + "_" + oLiveView.szPort;   
+        var that = this;  
+        if(domId=='2'){
+            var oWebVideoCtrl2 = this.$refs.videoIframe2.contentWindow.WebVideoCtrl;  
+            oWebVideoCtrl2.I_Logout(szDeviceIdentify)  
+            oWebVideoCtrl2.I_InitPlugin(1300,700, {
+                bWndFull: true,//�Ƿ�֧�ֵ�����˫��ȫ����Ĭ��֧�� true:֧�� false:��֧��
+                iWndowType: 1,
+                cbInitPluginComplete: function () {
+                    oWebVideoCtrl2.I_InsertOBJECTPlugin("divPlugin"); 
+                    oWebVideoCtrl2.I_Login(oLiveView.szIP,oLiveView.iProtocol, oLiveView.szPort, oLiveView.szUsername, oLiveView.szPassword, {
+                        success: function (xmlDoc) { 
+                            setTimeout(function () {
+                                console.log(that.formatDateTime(that.dateRange[0]))
+                                console.log(that.formatDateTime(that.dateRange[1]))
+                                oWebVideoCtrl2.I_StartPlayback(szDeviceIdentify, {
+                                    szStartTime:that.formatDateTime(that.dateRange[0]),
+                                    szEndTime:that.formatDateTime(that.dateRange[1]),
+                                    iChannelID: that.chosenChannel2,
+                                    iStreamType: oLiveView.iStreamType, 
+                                    bZeroChannel: oLiveView.bZeroChannel
+                                });  
+                            }, 500);
+                        }
+                    }); 
+                }
+            });  
+        }
+    },
+    iframeLogout(domId){
+        var oLiveView = {
+            iProtocol: 1,            // protocol 1��http, 2:https
+            szIP: "192.168.1.10",    // protocol ip
+            szPort: "80",            // protocol port
+            szUsername: "admin",     // device username
+            szPassword: "hzx12345", // device password
+            iStreamType: 2,          // stream 1��main stream  2��sub-stream  3��third stream  4��transcode stream
+            iChannelID: 1,           // channel no
+            bZeroChannel: false      // zero channel
+        }
+        var szDeviceIdentify = oLiveView.szIP + "_" + oLiveView.szPort;
+        if(domId=='2'){
+            var oWebVideoCtrl2 = this.$refs.videoIframe2.contentWindow.WebVideoCtrl;   
+            var iRet = oWebVideoCtrl2.I_Logout(szDeviceIdentify);
+            var szInfo = ""
+            if (0 == iRet) {
+                szInfo = "退出成功！";  
+            } else {
+                szInfo = "退出失败！";
             }
-        });
+            console.log(szInfo)  
+        }
+    }, 
+    async handleNodeClick2(data) { 
+        if(data.deviceExtendInfo&&data.deviceExtendInfo!=""){
+            let obj = JSON.parse(data.deviceExtendInfo) 
+            this.chosenChannel2 = 15
+            setTimeout(() => { 
+                this.iframeLoaded2() 
+            }, 500); 
+        }else{
+            this.$modal.msgError("设备未绑定通道号");
+        } 
     },
-    openVideo(playId){
-        // this.$emit('openVideo',true,playId);
-        // this.videoVisible = true;
-        // monitor.clickStopRealPlay()
-        // monitor.clickStartRealPlay(null,'1')
-        // this.$refs.vueRef.play();//播放
-    },
-    getData(){
-        setTimeout(() => {
-            this.iframeLoaded('0','8')
-            this.iframeLoaded('1','16')
-            this.iframeLoaded('2','17')
-            this.iframeLoaded('3','32')
-        }, 1000); 
-    },
-    changeSize(num){
-
-    }
+    iframeLoaded2(Channel){   
+        var oLiveView = {
+            iProtocol: 1,            // protocol 1��http, 2:https
+            szIP: "192.168.1.10",    // protocol ip
+            szPort: "80",            // protocol port
+            szUsername: "admin",     // device username
+            szPassword: "hzx12345", // device password
+            iStreamType: 2,          // stream 1��main stream  2��sub-stream  3��third stream  4��transcode stream
+            iChannelID: 1,           // channel no
+            bZeroChannel: false      // zero channel
+        }
+        var szDeviceIdentify = oLiveView.szIP; 
+        var oWebVideoCtrl2 = this.$refs.videoIframe2.contentWindow.WebVideoCtrl; 
+        var that = this;
+        oWebVideoCtrl2.I_Stop({iWndIndex:0}) 
+        setTimeout(function () {
+            console.log(that.formatDateTime(that.dateRange[0]))
+            console.log(that.formatDateTime(that.dateRange[1]))
+            oWebVideoCtrl2.I_StartPlayback(szDeviceIdentify, {
+                szStartTime:that.formatDateTime(that.dateRange[0]),
+                szEndTime:that.formatDateTime(that.dateRange[1]),
+                iChannelID: that.chosenChannel2,
+                iStreamType: oLiveView.iStreamType, 
+                bZeroChannel: oLiveView.bZeroChannel
+            });  
+        }, 800);
+    }, 
+    defaultDateRange() {
+        const end = new Date(new Date().toLocaleDateString());
+        end.setTime(end.getTime() + 24 * 60 * 60 * 1000 - 1);
+        const start = new Date((new Date().toLocaleDateString()));
+        start.setTime(start.getTime()+ 9 * 60 * 60 * 1000 - 1); 
+        this.start = parseInt(start.getTime() / 1000)
+        this.end = parseInt(end.getTime() / 1000)
+        return [start, end]
+    }, 
+    //日期时间
+    formatDateTime(date) {
+        // 格式化为 YYYY-MM-DD
+        date = new Date(date)
+        const year = date.getFullYear();
+        const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份从0开始
+        const day = String(date.getDate()).padStart(2, '0');
+        const hours = date.getHours() < 10 ? '0' + date.getHours() : date.getHours()
+        const minutes = date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()
+        const seconds = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds()
+        return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
+    } 
+   
 }
 }
 </script>
@@ -110,7 +223,7 @@ methods:{
         display: flex;
         align-items: center;
         color: #000;
-        margin-top: 20px;
+        margin-top: 10px;
         span{
             margin-left: 40px;
             font-size: 20px;
@@ -118,19 +231,14 @@ methods:{
         }
     }
     .contant{
-        width: 100%;
+        width: 1350px;
         height: auto;
         // height: 85%;
         display: flex;
         justify-content: center;
         align-content: center;
-        flex-wrap: wrap;
-        padding-top: 1%;
+        flex-wrap: wrap; 
     }
-
-
-
-
 }
     
 </style>
diff --git a/src/views/kitchen/environment/videoMonitoring/index.vue b/src/views/kitchen/environment/videoMonitoring/index.vue
index fe9c164c..f4adb3e0 100644
--- a/src/views/kitchen/environment/videoMonitoring/index.vue
+++ b/src/views/kitchen/environment/videoMonitoring/index.vue
@@ -1,55 +1,29 @@
 <template>
     <div id="video">
-        <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: 100%;height: 700px;margin-bottom: 10px; overflow: hidden;position: relative;margin-right: 10px;">
-                                <!-- <div style="width: 100%;height: 100%;position: fixed;"></div> -->
-                                <iframe src="monitor/iframe.html?type=1" ref="videoIframe1" frameborder="0" style="width: 100%;height: 700px;"></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-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="handleNodeClick2"
-                            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="monitor/iframe.html?type=2" ref="videoIframe5" frameborder="0" style="width: 100%;height: 600px;"></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 style="width: 100%;"> 
+            <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: 700px;margin-bottom: 10px; overflow: hidden;position: relative;margin-right: 10px;"> 
+                        <!-- <div style="width: 100%;height: 100%;position: fixed;"></div> -->
+                        <iframe src="monitor/iframe.html" ref="videoIframe1" frameborder="0" style="width: 100%;height:700px;"></iframe> 
+                    </div> 
+                </div>
+            </div> 
         </div> 
        
         
     </div> 
 </template>
-<script src="./codebase/webVideoCtrl.js"></script>
+<!-- <script src="./codebase/webVideoCtrl.js"></script> -->
 <script> 
 import $ from 'jquery';
 import { getKitchenDeviceSelectApi } from "@/api/kitchen/devices"; 
@@ -59,27 +33,20 @@ components: {
 },
 data() {
     return {
-        activeName:'1',
+        activeName:'2',
         deviceData:[
-        ],
-        deviceName1:'监控1',
-        deviceName2:'监控2',
-        deviceName3:'监控3',
-        deviceName4:'监控4',
+        ], 
         titleList:[],
         devicesOptions:[],
         defaultProps: {
           children: "children",
           label: "deviceName",
           id: "deviceId"
-        },
+        },  
         chosenWinNo:0,
-        chosenChannel:null
+        chosenChannel:null, 
     };
-},
-created() {
-    // monitor.clickLogin()
-},
+}, 
 mounted() {
     this.getKitchenDeviceSelect();
     this.videoLogin();  
@@ -92,27 +59,12 @@ methods:{
         })
     },
     // 初始化监控列表
-    videoLogin(){ 
-        setTimeout(() => {
-            this.iframeLogin()
-        }, 1000); 
-    },
-    //点击设备
-    handleTabClick(tab){ 
-        console.log(this.activeName)
-        if(this.activeName=='1'){
-
-        } 
-        if(this.activeName=='2'){
-
-        } 
+    videoLogin(){  
+        setTimeout(() => { 
+            this.iframeLogin('1')  
+        }, 500);  
     }, 
-    handleNodeClick(data, node) {
-        // if(this.chosenWinNo==3){
-        //     this.chosenWinNo=0
-        // }else{
-        //     this.chosenWinNo = this.chosenWinNo+1
-        // } 
+    iframeLogin(domId){
         var oLiveView = {
             iProtocol: 1,            // protocol 1��http, 2:https
             szIP: "192.168.1.10",    // protocol ip
@@ -122,25 +74,60 @@ methods:{
             iStreamType: 2,          // stream 1��main stream  2��sub-stream  3��third stream  4��transcode stream
             iChannelID: 1,           // channel no
             bZeroChannel: false      // zero channel
-        }; 
-        var oWebVideoCtrl1 = this.$refs.videoIframe1.contentWindow.WebVideoCtrl;   
-        var szDeviceIdentify = oLiveView.szIP + "_" + oLiveView.szPort; 
-        oWebVideoCtrl1.I_StartRealPlay(szDeviceIdentify, {
-            iWndIndex:2,
-            iStreamType: oLiveView.iStreamType,
-            iChannelID: 11,
-            bZeroChannel: oLiveView.bZeroChannel
-        }); 
-        // if(data.deviceExtendInfo&&data.deviceExtendInfo!=""){
-        //     let obj = JSON.parse(data.deviceExtendInfo)
-        //     console.log(obj)
-        //     this.chosenChannel = 11 
-           
-        // }else{
-        //     this.$modal.msgError("设备未绑定通道号");
-        // } 
+        }
+        var szDeviceIdentify = oLiveView.szIP + "_" + oLiveView.szPort;   
+        var that = this; 
+        if(domId=='1'){
+            var oWebVideoCtrl1 = this.$refs.videoIframe1.contentWindow.WebVideoCtrl;   
+            oWebVideoCtrl1.I_InitPlugin(1300,700, {
+                bWndFull: true,//�Ƿ�֧�ֵ�����˫��ȫ����Ĭ��֧�� true:֧�� false:��֧��
+                iWndowType: 2,
+                cbInitPluginComplete: function () {
+                    oWebVideoCtrl1.I_InsertOBJECTPlugin("divPlugin"); 
+                    oWebVideoCtrl1.I_Login(oLiveView.szIP,oLiveView.iProtocol, oLiveView.szPort, oLiveView.szUsername, oLiveView.szPassword, {
+                        success: function (xmlDoc) { 
+                            setTimeout(function () {
+                                oWebVideoCtrl1.I_StartRealPlay(szDeviceIdentify, {
+                                    iRtspPort: oLiveView.szPort,
+                                    iWndIndex:0,
+                                    iStreamType: oLiveView.iStreamType,
+                                    iChannelID: 15,
+                                    bZeroChannel: oLiveView.bZeroChannel
+                                });
+                                oWebVideoCtrl1.I_StartRealPlay(szDeviceIdentify, {
+                                    iRtspPort: oLiveView.szPort,
+                                    iWndIndex:1,
+                                    iStreamType: oLiveView.iStreamType,
+                                    iChannelID: 16,
+                                    bZeroChannel: oLiveView.bZeroChannel
+                                });
+                                oWebVideoCtrl1.I_StartRealPlay(szDeviceIdentify, {
+                                    iRtspPort: oLiveView.szPort,
+                                    iWndIndex:2,
+                                    iStreamType: oLiveView.iStreamType,
+                                    iChannelID: 21,
+                                    bZeroChannel: oLiveView.bZeroChannel
+                                });
+                                oWebVideoCtrl1.I_StartRealPlay(szDeviceIdentify, {
+                                    iRtspPort: oLiveView.szPort,
+                                    iWndIndex:3,
+                                    iStreamType: oLiveView.iStreamType,
+                                    iChannelID: 22,
+                                    bZeroChannel: oLiveView.bZeroChannel
+                                });
+                            }, 500);
+                        }
+                    }); 
+                },
+                cbSelWnd: function (xmlDoc) { 
+                    let WndIndex = parseInt($(xmlDoc).find("SelectWnd").eq(0).text(), 10);   
+                    var szInfo = "当前选择的窗口编号：" + WndIndex;
+                    that.chosenWinNo = WndIndex;  
+                },
+            });  
+        }
     },
-    async handleNodeClick2(data, node) {
+    iframeLogout(domId){
         var oLiveView = {
             iProtocol: 1,            // protocol 1��http, 2:https
             szIP: "192.168.1.10",    // protocol ip
@@ -150,26 +137,32 @@ methods:{
             iStreamType: 2,          // stream 1��main stream  2��sub-stream  3��third stream  4��transcode stream
             iChannelID: 1,           // channel no
             bZeroChannel: false      // zero channel
-        }; 
-        // var oWebVideoCtrl5 = this.$refs.videoIframe5.contentWindow.WebVideoCtrl;   
-        // var szDeviceIdentify = oLiveView.szIP + "_" + oLiveView.szPort;
+        }
+        var szDeviceIdentify = oLiveView.szIP + "_" + oLiveView.szPort;  
+        if(domId=='1'){
+            var oWebVideoCtrl1 = this.$refs.videoIframe1.contentWindow.WebVideoCtrl;   
+            var iRet = oWebVideoCtrl1.I_Logout(szDeviceIdentify);
+            var szInfo = ""
+            if (0 == iRet) {
+                szInfo = "退出成功！"; 
+            } else {
+                szInfo = "退出失败！";
+            }
+            console.log(szInfo)
+        } 
+    },
+    async handleNodeClick(data) { 
         if(data.deviceExtendInfo&&data.deviceExtendInfo!=""){
-            let obj = JSON.parse(data.deviceExtendInfo)
-            console.log(obj)
-            this.chosenChannel = '28'
-            setTimeout(() => {
-                //  oWebVideoCtrl5.I_StartRealPlay(szDeviceIdentify, {
-                //     iWndIndex:0,
-                //     iStreamType: oLiveView.iStreamType,
-                //     iChannelID: this.chosenChannel,
-                //     bZeroChannel: oLiveView.bZeroChannel
-                // });
+            let obj = JSON.parse(data.deviceExtendInfo)  
+            this.chosenChannel = 27
+            setTimeout(() => { 
+                this.iframeLoaded(this.chosenWinNo,this.chosenChannel) 
             }, 500); 
         }else{
             this.$modal.msgError("设备未绑定通道号");
         } 
-    }, 
-    iframeLogin(){
+    },
+    iframeLoaded(WinNo,Channel){  
         var oLiveView = {
             iProtocol: 1,            // protocol 1��http, 2:https
             szIP: "192.168.1.10",    // protocol ip
@@ -179,61 +172,22 @@ methods:{
             iStreamType: 2,          // stream 1��main stream  2��sub-stream  3��third stream  4��transcode stream
             iChannelID: 1,           // channel no
             bZeroChannel: false      // zero channel
-        };  
+        }
+        var szDeviceIdentify = oLiveView.szIP; 
         var oWebVideoCtrl1 = this.$refs.videoIframe1.contentWindow.WebVideoCtrl; 
-        oWebVideoCtrl1.I_Login(oLiveView.szIP, oLiveView.iProtocol, oLiveView.szPort, oLiveView.szUsername, oLiveView.szPassword, {
-            success: function (xmlDoc) {
-                var szDeviceIdentify = oLiveView.szIP + "_" + oLiveView.szPort;
-                setTimeout(()=>{
-                    oWebVideoCtrl1.I_StartRealPlay(szDeviceIdentify, {
-                        iWndIndex:0,
-                        iStreamType: oLiveView.iStreamType,
-                        iChannelID: 11,
-                        bZeroChannel: oLiveView.bZeroChannel
-                    });
-                    oWebVideoCtrl1.I_StartRealPlay(szDeviceIdentify, {
-                        iWndIndex:1,
-                        iStreamType: oLiveView.iStreamType,
-                        iChannelID: 12,
-                        bZeroChannel: oLiveView.bZeroChannel
-                    });
-                    oWebVideoCtrl1.I_StartRealPlay(szDeviceIdentify, {
-                        iWndIndex:2,
-                        iStreamType: oLiveView.iStreamType,
-                        iChannelID: 23,
-                        bZeroChannel: oLiveView.bZeroChannel
-                    });
-                    oWebVideoCtrl1.I_StartRealPlay(szDeviceIdentify, {
-                        iWndIndex:3,
-                        iStreamType: oLiveView.iStreamType,
-                        iChannelID: 24,
-                        bZeroChannel: oLiveView.bZeroChannel
-                    });
-                },500);
-            }
-        });   
-        // var oWebVideoCtrl5 = this.$refs.videoIframe5.contentWindow.WebVideoCtrl; 
-        // oWebVideoCtrl5.I_Login(oLiveView.szIP, oLiveView.iProtocol, oLiveView.szPort, oLiveView.szUsername, oLiveView.szPassword, {
-        //     success: function (xmlDoc) {
-        //         var szDeviceIdentify = oLiveView.szIP + "_" + oLiveView.szPort;
-        //         setTimeout(()=>{
-        //             oWebVideoCtrl5.I_StartRealPlay(szDeviceIdentify, {
-        //                 iWndIndex:0,
-        //                 iStreamType: oLiveView.iStreamType,
-        //                 iChannelID: 22,
-        //                 bZeroChannel: oLiveView.bZeroChannel
-        //             }); 
-        //         },500);
-        //     }
-        // });   
-    },
-    openVideo(playId){
-        // this.$emit('openVideo',true,playId);
-        // this.videoVisible = true;
-        // monitor.clickStopRealPlay()
-        // monitor.clickStartRealPlay(null,'1')
-        // this.$refs.vueRef.play();//播放
-    },
+        oWebVideoCtrl1.I_Stop({ 
+            iWndIndex:WinNo
+        }) 
+        setTimeout(function () {
+            oWebVideoCtrl1.I_StartRealPlay(szDeviceIdentify, {
+                iRtspPort: oLiveView.szPort,
+                iWndIndex:WinNo,
+                iStreamType: oLiveView.iStreamType,
+                iChannelID: Channel,
+                bZeroChannel: oLiveView.bZeroChannel
+            });  
+        }, 800);
+    },  
    
 }
 }
@@ -247,7 +201,7 @@ methods:{
         display: flex;
         align-items: center;
         color: #000;
-        margin-top: 20px;
+        margin-top: 10px;
         span{
             margin-left: 40px;
             font-size: 20px;
@@ -255,7 +209,7 @@ methods:{
         }
     }
     .contant{
-        width: 80%;
+        width: 1350px;
         height: auto;
         // height: 85%;
         display: flex;
diff --git a/src/views/kitchen/environment/videoMonitoring/index2.vue b/src/views/kitchen/environment/videoMonitoring/index2.vue
deleted file mode 100644
index 0f5f2b23..00000000
--- a/src/views/kitchen/environment/videoMonitoring/index2.vue
+++ /dev/null
@@ -1,337 +0,0 @@
-<template>
-    <div id="video">
-        <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="monitor/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="monitor/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="monitor/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="monitor/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="monitor/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>
-<script src="./codebase/webVideoCtrl.js"></script>
-<script> 
-import $ from 'jquery';
-import { getKitchenDeviceSelectApi } from "@/api/kitchen/devices"; 
-export default {
-name: 'videoMonitoring',
-components: {
-},
-data() {
-    return {
-        activeName:'1',
-        deviceData:[
-        ],
-        deviceName1:'监控1',
-        deviceName2:'监控2',
-        deviceName3:'监控3',
-        deviceName4:'监控4',
-        titleList:[],
-        devicesOptions:[],
-        defaultProps: {
-          children: "children",
-          label: "deviceName",
-          id: "deviceId"
-        },
-        chosenWinNo:1,
-        chosenChannel:null
-    };
-},
-created() {
-    // monitor.clickLogin()
-},
-mounted() {
-    this.getKitchenDeviceSelect();
-    this.videoLogin();  
-},
-methods:{
-    // 门禁设备选项
-    getKitchenDeviceSelect(){
-        getKitchenDeviceSelectApi({deviceType:1}).then((response) => {
-            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) 
-        }, 500); 
-    },
-    async handleNodeClick(data, node) {
-        console.log(data)
-        if(data.deviceExtendInfo&&data.deviceExtendInfo!=""){
-            let obj = JSON.parse(data.deviceExtendInfo)
-            console.log(obj)
-            this.chosenChannel = '28'
-            setTimeout(() => {
-                this.iframeLogin(this.chosenWinNo,this.chosenChannel) 
-            }, 500); 
-        }else{
-            this.$modal.msgError("设备未绑定通道号");
-        } 
-      },
-    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
-            szPort: "80",            // protocol port
-            szUsername: "admin",     // device username
-            szPassword: "hzx12345", // device password
-            iStreamType: 2,          // stream 1��main stream  2��sub-stream  3��third stream  4��transcode stream
-            iChannelID: 1,           // channel no
-            bZeroChannel: false      // zero channel
-        };
-        if(domId=='1'){
-            var oWebVideoCtrl1 = this.$refs.videoIframe1.contentWindow.WebVideoCtrl; 
-            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; 
-            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; 
-            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; 
-            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 = {
-            iProtocol: 1,            // protocol 1��http, 2:https
-            szIP: "192.168.1.10",    // protocol ip
-            szPort: "80",            // protocol port
-            szUsername: "admin",     // device username
-            szPassword: "hzx12345", // device password
-            iStreamType: 2,          // stream 1��main stream  2��sub-stream  3��third stream  4��transcode stream
-            iChannelID: 1,           // channel no
-            bZeroChannel: false      // zero channel
-        };
-        if(domId=='1'){
-            var oWebVideoCtrl1 = this.$refs.videoIframe1.contentWindow.WebVideoCtrl; 
-            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; 
-            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; 
-            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; 
-            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);
-                }
-            }); 
-        } 
-    },
-    openVideo(playId){
-        // this.$emit('openVideo',true,playId);
-        // this.videoVisible = true;
-        // monitor.clickStopRealPlay()
-        // monitor.clickStartRealPlay(null,'1')
-        // this.$refs.vueRef.play();//播放
-    },
-   
-}
-}
-</script>
-<style lang="scss" scoped>
-#video{
-    width: 100%;
-    height: 100%;
-    margin: 0 0.2rem;
-    .header{
-        display: flex;
-        align-items: center;
-        color: #000;
-        margin-top: 20px;
-        span{
-            margin-left: 40px;
-            font-size: 20px;
-            font-weight: bold;
-        }
-    }
-    .contant{
-        width: 80%;
-        height: auto;
-        // height: 85%;
-        display: flex;
-        justify-content: center;
-        align-content: center;
-        flex-wrap: wrap;
-        padding-top: 1%;
-    }
-}
-    
-</style>
diff --git a/src/views/kitchen/environment/videoMonitoring/temp.vue b/src/views/kitchen/environment/videoMonitoring/temp.vue
new file mode 100644
index 00000000..f2fab0e6
--- /dev/null
+++ b/src/views/kitchen/environment/videoMonitoring/temp.vue
@@ -0,0 +1,376 @@
+<template>
+    <div id="video">
+        <div style="width: 100%;">
+            <el-tabs v-model="activeName" type="card" @tab-click="handleTabClick">
+                <el-tab-pane label="视频监控" name="1"> 
+                    <div v-show="activeName==1" class="header"><span>视频监控</span></div>
+                    <div v-show="activeName==1" 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: 700px;margin-bottom: 10px; overflow: hidden;position: relative;margin-right: 10px;"> 
+                                <!-- <div style="width: 100%;height: 100%;position: fixed;"></div> -->
+                                <iframe src="monitor/iframe.html" ref="videoIframe1" frameborder="0" style="width: 100%;height:700px;"></iframe> 
+                            </div> 
+                        </div>
+                    </div>
+                </el-tab-pane>
+                <el-tab-pane label="历史视频" name="2">
+                    <div v-show="activeName==2" class="header"><span>历史视频</span></div>
+                    <div v-show="activeName==2" 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="handleNodeClick2"
+                            ref="typeTree" node-key="deviceId" highlight-current 
+                            ></el-tree> 
+                        </div>  
+                        <div class="contant">
+                            <div style="width: 100%;height: 700px;margin-bottom: 10px; overflow: hidden;position: relative;margin-right: 10px;"> 
+                                <iframe src="monitor/iframe.html" ref="videoIframe2" frameborder="0" style="width: 100%;height: 700px;"></iframe> 
+                            </div> 
+                        </div>
+                    </div>
+                </el-tab-pane> 
+            </el-tabs> 
+        </div>  
+    </div> 
+</template>
+<!-- <script src="./codebase/webVideoCtrl.js"></script> -->
+<script> 
+import $ from 'jquery';
+import { getKitchenDeviceSelectApi } from "@/api/kitchen/devices"; 
+export default {
+name: 'videoMonitoring',
+components: {
+},
+data() {
+    return {
+        activeName:'1',
+        deviceData:[
+        ], 
+        titleList:[],
+        devicesOptions:[],
+        defaultProps: {
+          children: "children",
+          label: "deviceName",
+          id: "deviceId"
+        }, 
+        dateRange:this.defaultDateRange(),
+        pickerOptions:{                                 
+            //禁用当前日期之前的日期
+            disabledDate(time) {
+            //Date.now()是javascript中的内置函数，它返回自1970年1月1日00:00:00 UTC以来经过的毫秒数。
+               return time.getTime() < Date.now() - 8.64e7;
+            }
+        },
+        chosenWinNo:0,
+        chosenChannel:null,
+        chosenChannel2:null,
+    };
+}, 
+mounted() {
+    this.getKitchenDeviceSelect();
+    this.videoLogin();  
+},
+methods:{
+    // 门禁设备选项
+    getKitchenDeviceSelect(){
+        getKitchenDeviceSelectApi({deviceType:1}).then((response) => {
+            this.devicesOptions = response.data 
+        })
+    },
+    // 初始化监控列表
+    videoLogin(){  
+        setTimeout(() => { 
+            this.iframeLogin('1')  
+        }, 500); 
+        setTimeout(() => { 
+            this.iframeLogin('2')  
+        }, 500); 
+    },
+    //点击设备
+    handleTabClick(tab){ 
+        console.log(this.activeName)
+        if(this.activeName=='1'){ 
+        } 
+        if(this.activeName=='2'){  
+            
+        } 
+    }, 
+    iframeLogin(domId){
+        var oLiveView = {
+            iProtocol: 1,            // protocol 1��http, 2:https
+            szIP: "192.168.1.10",    // protocol ip
+            szPort: "80",            // protocol port
+            szUsername: "admin",     // device username
+            szPassword: "hzx12345", // device password
+            iStreamType: 2,          // stream 1��main stream  2��sub-stream  3��third stream  4��transcode stream
+            iChannelID: 1,           // channel no
+            bZeroChannel: false      // zero channel
+        }
+        var szDeviceIdentify = oLiveView.szIP + "_" + oLiveView.szPort;  
+        var width = '1300'; 
+        var height = '700';
+        var that = this; 
+        if(domId=='1'){
+            var oWebVideoCtrl1 = this.$refs.videoIframe1.contentWindow.WebVideoCtrl; 
+            console.log(oWebVideoCtrl1)
+            oWebVideoCtrl1.I_Logout(szDeviceIdentify)  
+            oWebVideoCtrl1.I_InitPlugin(width,height, {
+                bWndFull: true,//�Ƿ�֧�ֵ�����˫��ȫ����Ĭ��֧�� true:֧�� false:��֧��
+                iWndowType: 2,
+                cbInitPluginComplete: function () {
+                    oWebVideoCtrl1.I_InsertOBJECTPlugin("divPlugin"); 
+                    oWebVideoCtrl1.I_Login(oLiveView.szIP,oLiveView.iProtocol, oLiveView.szPort, oLiveView.szUsername, oLiveView.szPassword, {
+                        success: function (xmlDoc) { 
+                            setTimeout(function () {
+                                oWebVideoCtrl1.I_StartRealPlay(szDeviceIdentify, {
+                                    iRtspPort: oLiveView.szPort,
+                                    iWndIndex:0,
+                                    iStreamType: oLiveView.iStreamType,
+                                    iChannelID: 11,
+                                    bZeroChannel: oLiveView.bZeroChannel
+                                });
+                                oWebVideoCtrl1.I_StartRealPlay(szDeviceIdentify, {
+                                    iRtspPort: oLiveView.szPort,
+                                    iWndIndex:1,
+                                    iStreamType: oLiveView.iStreamType,
+                                    iChannelID: 12,
+                                    bZeroChannel: oLiveView.bZeroChannel
+                                });
+                                oWebVideoCtrl1.I_StartRealPlay(szDeviceIdentify, {
+                                    iRtspPort: oLiveView.szPort,
+                                    iWndIndex:2,
+                                    iStreamType: oLiveView.iStreamType,
+                                    iChannelID: 13,
+                                    bZeroChannel: oLiveView.bZeroChannel
+                                });
+                                oWebVideoCtrl1.I_StartRealPlay(szDeviceIdentify, {
+                                    iRtspPort: oLiveView.szPort,
+                                    iWndIndex:3,
+                                    iStreamType: oLiveView.iStreamType,
+                                    iChannelID: 14,
+                                    bZeroChannel: oLiveView.bZeroChannel
+                                });
+                            }, 500);
+                        }
+                    }); 
+                },
+                cbSelWnd: function (xmlDoc) { 
+                    let WndIndex = parseInt($(xmlDoc).find("SelectWnd").eq(0).text(), 10);   
+                    var szInfo = "当前选择的窗口编号：" + WndIndex;
+                    that.chosenWinNo = WndIndex;  
+                },
+            });  
+        }
+        if(domId=='2'){
+            var oWebVideoCtrl2 = this.$refs.videoIframe2.contentWindow.WebVideoCtrl; 
+            console.log(oWebVideoCtrl2)
+            oWebVideoCtrl2.I_Logout(szDeviceIdentify)  
+            oWebVideoCtrl2.I_InitPlugin(width,height, {
+                bWndFull: true,//�Ƿ�֧�ֵ�����˫��ȫ����Ĭ��֧�� true:֧�� false:��֧��
+                iWndowType: 1,
+                cbInitPluginComplete: function () {
+                    oWebVideoCtrl2.I_InsertOBJECTPlugin("divPlugin"); 
+                    oWebVideoCtrl2.I_Login(oLiveView.szIP,oLiveView.iProtocol, oLiveView.szPort, oLiveView.szUsername, oLiveView.szPassword, {
+                        success: function (xmlDoc) { 
+                            setTimeout(function () {
+                                console.log(that.formatDateTime(that.dateRange[0]))
+                                console.log(that.formatDateTime(that.dateRange[1]))
+                                oWebVideoCtrl2.I_StartPlayback(szDeviceIdentify, {
+                                    szStartTime:that.formatDateTime(that.dateRange[0]),
+                                    szEndTime:that.formatDateTime(that.dateRange[1]),
+                                    iChannelID: that.chosenChannel2,
+                                    iStreamType: oLiveView.iStreamType, 
+                                    bZeroChannel: oLiveView.bZeroChannel
+                                });  
+                            }, 500);
+                        }
+                    }); 
+                }
+            });  
+        }
+    },
+    iframeLogout(domId){
+        var oLiveView = {
+            iProtocol: 1,            // protocol 1��http, 2:https
+            szIP: "192.168.1.10",    // protocol ip
+            szPort: "80",            // protocol port
+            szUsername: "admin",     // device username
+            szPassword: "hzx12345", // device password
+            iStreamType: 2,          // stream 1��main stream  2��sub-stream  3��third stream  4��transcode stream
+            iChannelID: 1,           // channel no
+            bZeroChannel: false      // zero channel
+        }
+        var szDeviceIdentify = oLiveView.szIP + "_" + oLiveView.szPort;  
+        if(domId=='1'){
+            var oWebVideoCtrl1 = this.$refs.videoIframe1.contentWindow.WebVideoCtrl;  
+            // oWebVideoCtrl1.I_Logout(szDeviceIdentify)   
+            var iRet = oWebVideoCtrl1.I_Logout(szDeviceIdentify);
+            var szInfo = ""
+            if (0 == iRet) {
+                szInfo = "退出成功！"; 
+            } else {
+                szInfo = "退出失败！";
+            }
+            console.log(szInfo)
+        }
+        if(domId=='2'){
+            var oWebVideoCtrl2 = this.$refs.videoIframe2.contentWindow.WebVideoCtrl;  
+            // oWebVideoCtrl2.I_Logout(szDeviceIdentify) 
+            var iRet = oWebVideoCtrl2.I_Logout(szDeviceIdentify);
+            var szInfo = ""
+            if (0 == iRet) {
+                szInfo = "退出成功！"; 
+            } else {
+                szInfo = "退出失败！";
+            }
+            console.log(szInfo)  
+        }
+    },
+    async handleNodeClick(data) {
+        console.log(data)
+        if(data.deviceExtendInfo&&data.deviceExtendInfo!=""){
+            let obj = JSON.parse(data.deviceExtendInfo)
+            console.log(obj)
+            // if(this.chosenWinNo==3){
+            //     this.chosenWinNo=0
+            // }else{
+            //     this.chosenWinNo = this.chosenWinNo+1
+            // } 
+            console.log(this.chosenWinNo)
+            this.chosenChannel = 22
+            setTimeout(() => { 
+                this.iframeLoaded(this.chosenWinNo,this.chosenChannel) 
+            }, 500); 
+        }else{
+            this.$modal.msgError("设备未绑定通道号");
+        } 
+    },
+    iframeLoaded(WinNo,Channel){ 
+        console.log(WinNo)
+        console.log(Channel)  
+        var oLiveView = {
+            iProtocol: 1,            // protocol 1��http, 2:https
+            szIP: "192.168.1.10",    // protocol ip
+            szPort: "80",            // protocol port
+            szUsername: "admin",     // device username
+            szPassword: "hzx12345", // device password
+            iStreamType: 2,          // stream 1��main stream  2��sub-stream  3��third stream  4��transcode stream
+            iChannelID: 1,           // channel no
+            bZeroChannel: false      // zero channel
+        }
+        var szDeviceIdentify = oLiveView.szIP; 
+        var oWebVideoCtrl1 = this.$refs.videoIframe1.contentWindow.WebVideoCtrl; 
+        oWebVideoCtrl1.I_Stop({ 
+            iWndIndex:WinNo
+        }) 
+        setTimeout(function () {
+            oWebVideoCtrl1.I_StartRealPlay(szDeviceIdentify, {
+                iRtspPort: oLiveView.szPort,
+                iWndIndex:WinNo,
+                iStreamType: oLiveView.iStreamType,
+                iChannelID: Channel,
+                bZeroChannel: oLiveView.bZeroChannel
+            });  
+        }, 800);
+    },
+    async handleNodeClick2(data) { 
+        if(data.deviceExtendInfo&&data.deviceExtendInfo!=""){
+            let obj = JSON.parse(data.deviceExtendInfo) 
+            this.chosenChannel2 = 15
+            setTimeout(() => { 
+                this.iframeLoaded2() 
+            }, 500); 
+        }else{
+            this.$modal.msgError("设备未绑定通道号");
+        } 
+    },
+    iframeLoaded2(Channel){   
+        var oLiveView = {
+            iProtocol: 1,            // protocol 1��http, 2:https
+            szIP: "192.168.1.10",    // protocol ip
+            szPort: "80",            // protocol port
+            szUsername: "admin",     // device username
+            szPassword: "hzx12345", // device password
+            iStreamType: 2,          // stream 1��main stream  2��sub-stream  3��third stream  4��transcode stream
+            iChannelID: 1,           // channel no
+            bZeroChannel: false      // zero channel
+        }
+        var szDeviceIdentify = oLiveView.szIP; 
+        var oWebVideoCtrl2 = this.$refs.videoIframe2.contentWindow.WebVideoCtrl; 
+        var that = this;
+        oWebVideoCtrl2.I_Stop({iWndIndex:0}) 
+        setTimeout(function () {
+            console.log(that.formatDateTime(that.dateRange[0]))
+            console.log(that.formatDateTime(that.dateRange[1]))
+            oWebVideoCtrl2.I_StartPlayback(szDeviceIdentify, {
+                szStartTime:that.formatDateTime(that.dateRange[0]),
+                szEndTime:that.formatDateTime(that.dateRange[1]),
+                iChannelID: that.chosenChannel2,
+                iStreamType: oLiveView.iStreamType, 
+                bZeroChannel: oLiveView.bZeroChannel
+            });  
+        }, 800);
+    }, 
+    defaultDateRange() {
+        const end = new Date(new Date().toLocaleDateString());
+        end.setTime(end.getTime() + 24 * 60 * 60 * 1000 - 1);
+        const start = new Date((new Date().toLocaleDateString()));
+        start.setTime(start.getTime());
+
+        this.start = parseInt(start.getTime() / 1000)
+        this.end = parseInt(end.getTime() / 1000)
+        return [start, end]
+    }, 
+    //日期时间
+    formatDateTime(date) {
+        // 格式化为 YYYY-MM-DD
+        date = new Date(date)
+        const year = date.getFullYear();
+        const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份从0开始
+        const day = String(date.getDate()).padStart(2, '0');
+        const hours = date.getHours() < 10 ? '0' + date.getHours() : date.getHours()
+        const minutes = date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()
+        const seconds = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds()
+        return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
+    } 
+}
+}
+</script>
+<style lang="scss" scoped>
+#video{
+    width: 100%;
+    height: 100%;
+    margin: 0 0.2rem;
+    .header{
+        display: flex;
+        align-items: center;
+        color: #000;
+        // margin-top: 20px;
+        span{
+            margin-left: 40px;
+            font-size: 20px;
+            font-weight: bold;
+        }
+    }
+    .contant{
+        width: 80%;
+        height: auto;
+        // height: 85%;
+        display: flex;
+        justify-content: center;
+        align-content: center;
+        flex-wrap: wrap; 
+    }
+}
+    
+</style>