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

---
 public/index.html                             |  14 +-
 .../codebase/WebComponentsKit(64bit).exe      | Bin
 .../WebComponentsKit(has rem cfg).exe         | Bin
 .../codebase/WebComponentsKit.exe             | Bin
 public/{ => monitor}/codebase/cryptico.min.js |   0
 .../{ => monitor}/codebase/encryption/AES.js  |   0
 .../codebase/encryption/cryptico.min.js       |   0
 .../codebase/encryption/crypto-3.1.2.min.js   |   0
 .../codebase/encryption/encryption.js         |   0
 .../codebase/jquery-1.12.1.min.js             |   0
 .../codebase/jquery-1.7.1.min.js              |   0
 .../codebase/jquery-3.6.4.min.js              |   0
 .../{ => monitor}/codebase/jquery.cookie.js   |   0
 .../codebase/jsPlugin-1.2.0.min.js            |   0
 .../codebase/playctrl/AudioRenderer.js        |   0
 .../codebase/playctrl/DecodeWorker.js         |   0
 .../codebase/playctrl/Decoder.js              |   0
 .../codebase/playctrl/Decoder.js.mem          | Bin
 .../codebase/playctrl/Decoder.wasm            | Bin
 .../codebase/playctrl/SuperRender.js          |   0
 .../codebase/playctrl/SuperRender_10.js       |   0
 .../codebase/playctrl/SuperRender_20.js       |   0
 public/{ => monitor}/codebase/polyfill2.js    |   0
 .../codebase/transform/SystemTransform.js     |   0
 .../codebase/transform/SystemTransform.js.mem | Bin
 .../transform/systemTransform-worker.min.js   |   0
 public/{ => monitor}/codebase/uuid.js         |   0
 public/{ => monitor}/codebase/webVideoCtrl.js |   0
 public/{ => monitor}/iframe.html              |   6 +-
 .../environment/videoMonitoring/history.vue   |   2 +-
 .../environment/videoMonitoring/index.vue     | 287 ++++++---------
 .../environment/videoMonitoring/index2.vue    | 337 ++++++++++++++++++
 32 files changed, 457 insertions(+), 189 deletions(-)
 rename public/{ => monitor}/codebase/WebComponentsKit(64bit).exe (100%)
 rename public/{ => monitor}/codebase/WebComponentsKit(has rem cfg).exe (100%)
 rename public/{ => monitor}/codebase/WebComponentsKit.exe (100%)
 rename public/{ => monitor}/codebase/cryptico.min.js (100%)
 rename public/{ => monitor}/codebase/encryption/AES.js (100%)
 rename public/{ => monitor}/codebase/encryption/cryptico.min.js (100%)
 rename public/{ => monitor}/codebase/encryption/crypto-3.1.2.min.js (100%)
 rename public/{ => monitor}/codebase/encryption/encryption.js (100%)
 rename public/{ => monitor}/codebase/jquery-1.12.1.min.js (100%)
 rename public/{ => monitor}/codebase/jquery-1.7.1.min.js (100%)
 rename public/{ => monitor}/codebase/jquery-3.6.4.min.js (100%)
 rename public/{ => monitor}/codebase/jquery.cookie.js (100%)
 rename public/{ => monitor}/codebase/jsPlugin-1.2.0.min.js (100%)
 rename public/{ => monitor}/codebase/playctrl/AudioRenderer.js (100%)
 rename public/{ => monitor}/codebase/playctrl/DecodeWorker.js (100%)
 rename public/{ => monitor}/codebase/playctrl/Decoder.js (100%)
 rename public/{ => monitor}/codebase/playctrl/Decoder.js.mem (100%)
 rename public/{ => monitor}/codebase/playctrl/Decoder.wasm (100%)
 rename public/{ => monitor}/codebase/playctrl/SuperRender.js (100%)
 rename public/{ => monitor}/codebase/playctrl/SuperRender_10.js (100%)
 rename public/{ => monitor}/codebase/playctrl/SuperRender_20.js (100%)
 rename public/{ => monitor}/codebase/polyfill2.js (100%)
 rename public/{ => monitor}/codebase/transform/SystemTransform.js (100%)
 rename public/{ => monitor}/codebase/transform/SystemTransform.js.mem (100%)
 rename public/{ => monitor}/codebase/transform/systemTransform-worker.min.js (100%)
 rename public/{ => monitor}/codebase/uuid.js (100%)
 rename public/{ => monitor}/codebase/webVideoCtrl.js (100%)
 rename public/{ => monitor}/iframe.html (92%)
 create mode 100644 src/views/kitchen/environment/videoMonitoring/index2.vue

diff --git a/public/index.html b/public/index.html
index 72b2cb59..cf6fc3dc 100644
--- a/public/index.html
+++ b/public/index.html
@@ -8,14 +8,14 @@
     <link rel="icon" href="<%= BASE_URL %>canteen2.ico">
     <title><%= webpackConfig.name %></title>
     <!--[if lt IE 11]><script>window.location.href='/html/ie.html';</script><![endif]-->
-	  <script src="./codebase/jsPlugin-1.2.0.min.js"></script>
-    <script src="./codebase/jquery-3.6.4.min.js"></script>
-    <script src="./codebase/jsPlugin-1.2.0.min.js"></script>
-    <script src="./codebase/encryption/AES.js"></script>
+	  <script src="./monitor/codebase/jsPlugin-1.2.0.min.js"></script>
+    <script src="./monitor/codebase/jquery-3.6.4.min.js"></script>
+    <script src="./monitor/codebase/jsPlugin-1.2.0.min.js"></script>
+    <script src="./monitor/codebase/encryption/AES.js"></script>
     <!-- <script src="./codebase/transform/SystemTransform.js"></script> -->
-    <script src="./codebase/encryption/cryptico.min.js"></script>
-    <script src="./codebase/encryption/crypto-3.1.2.min.js"></script>
-    <script src="./codebase/webVideoCtrl.js"></script>
+    <script src="./monitor/codebase/encryption/cryptico.min.js"></script>
+    <script src="./monitor/codebase/encryption/crypto-3.1.2.min.js"></script>
+    <script src="./monitor/codebase/webVideoCtrl.js"></script>
     <!-- <script src="./codebase/playctrl/Decoder.js"></script> -->
     
     <style>
diff --git a/public/codebase/WebComponentsKit(64bit).exe b/public/monitor/codebase/WebComponentsKit(64bit).exe
similarity index 100%
rename from public/codebase/WebComponentsKit(64bit).exe
rename to public/monitor/codebase/WebComponentsKit(64bit).exe
diff --git a/public/codebase/WebComponentsKit(has rem cfg).exe b/public/monitor/codebase/WebComponentsKit(has rem cfg).exe
similarity index 100%
rename from public/codebase/WebComponentsKit(has rem cfg).exe
rename to public/monitor/codebase/WebComponentsKit(has rem cfg).exe
diff --git a/public/codebase/WebComponentsKit.exe b/public/monitor/codebase/WebComponentsKit.exe
similarity index 100%
rename from public/codebase/WebComponentsKit.exe
rename to public/monitor/codebase/WebComponentsKit.exe
diff --git a/public/codebase/cryptico.min.js b/public/monitor/codebase/cryptico.min.js
similarity index 100%
rename from public/codebase/cryptico.min.js
rename to public/monitor/codebase/cryptico.min.js
diff --git a/public/codebase/encryption/AES.js b/public/monitor/codebase/encryption/AES.js
similarity index 100%
rename from public/codebase/encryption/AES.js
rename to public/monitor/codebase/encryption/AES.js
diff --git a/public/codebase/encryption/cryptico.min.js b/public/monitor/codebase/encryption/cryptico.min.js
similarity index 100%
rename from public/codebase/encryption/cryptico.min.js
rename to public/monitor/codebase/encryption/cryptico.min.js
diff --git a/public/codebase/encryption/crypto-3.1.2.min.js b/public/monitor/codebase/encryption/crypto-3.1.2.min.js
similarity index 100%
rename from public/codebase/encryption/crypto-3.1.2.min.js
rename to public/monitor/codebase/encryption/crypto-3.1.2.min.js
diff --git a/public/codebase/encryption/encryption.js b/public/monitor/codebase/encryption/encryption.js
similarity index 100%
rename from public/codebase/encryption/encryption.js
rename to public/monitor/codebase/encryption/encryption.js
diff --git a/public/codebase/jquery-1.12.1.min.js b/public/monitor/codebase/jquery-1.12.1.min.js
similarity index 100%
rename from public/codebase/jquery-1.12.1.min.js
rename to public/monitor/codebase/jquery-1.12.1.min.js
diff --git a/public/codebase/jquery-1.7.1.min.js b/public/monitor/codebase/jquery-1.7.1.min.js
similarity index 100%
rename from public/codebase/jquery-1.7.1.min.js
rename to public/monitor/codebase/jquery-1.7.1.min.js
diff --git a/public/codebase/jquery-3.6.4.min.js b/public/monitor/codebase/jquery-3.6.4.min.js
similarity index 100%
rename from public/codebase/jquery-3.6.4.min.js
rename to public/monitor/codebase/jquery-3.6.4.min.js
diff --git a/public/codebase/jquery.cookie.js b/public/monitor/codebase/jquery.cookie.js
similarity index 100%
rename from public/codebase/jquery.cookie.js
rename to public/monitor/codebase/jquery.cookie.js
diff --git a/public/codebase/jsPlugin-1.2.0.min.js b/public/monitor/codebase/jsPlugin-1.2.0.min.js
similarity index 100%
rename from public/codebase/jsPlugin-1.2.0.min.js
rename to public/monitor/codebase/jsPlugin-1.2.0.min.js
diff --git a/public/codebase/playctrl/AudioRenderer.js b/public/monitor/codebase/playctrl/AudioRenderer.js
similarity index 100%
rename from public/codebase/playctrl/AudioRenderer.js
rename to public/monitor/codebase/playctrl/AudioRenderer.js
diff --git a/public/codebase/playctrl/DecodeWorker.js b/public/monitor/codebase/playctrl/DecodeWorker.js
similarity index 100%
rename from public/codebase/playctrl/DecodeWorker.js
rename to public/monitor/codebase/playctrl/DecodeWorker.js
diff --git a/public/codebase/playctrl/Decoder.js b/public/monitor/codebase/playctrl/Decoder.js
similarity index 100%
rename from public/codebase/playctrl/Decoder.js
rename to public/monitor/codebase/playctrl/Decoder.js
diff --git a/public/codebase/playctrl/Decoder.js.mem b/public/monitor/codebase/playctrl/Decoder.js.mem
similarity index 100%
rename from public/codebase/playctrl/Decoder.js.mem
rename to public/monitor/codebase/playctrl/Decoder.js.mem
diff --git a/public/codebase/playctrl/Decoder.wasm b/public/monitor/codebase/playctrl/Decoder.wasm
similarity index 100%
rename from public/codebase/playctrl/Decoder.wasm
rename to public/monitor/codebase/playctrl/Decoder.wasm
diff --git a/public/codebase/playctrl/SuperRender.js b/public/monitor/codebase/playctrl/SuperRender.js
similarity index 100%
rename from public/codebase/playctrl/SuperRender.js
rename to public/monitor/codebase/playctrl/SuperRender.js
diff --git a/public/codebase/playctrl/SuperRender_10.js b/public/monitor/codebase/playctrl/SuperRender_10.js
similarity index 100%
rename from public/codebase/playctrl/SuperRender_10.js
rename to public/monitor/codebase/playctrl/SuperRender_10.js
diff --git a/public/codebase/playctrl/SuperRender_20.js b/public/monitor/codebase/playctrl/SuperRender_20.js
similarity index 100%
rename from public/codebase/playctrl/SuperRender_20.js
rename to public/monitor/codebase/playctrl/SuperRender_20.js
diff --git a/public/codebase/polyfill2.js b/public/monitor/codebase/polyfill2.js
similarity index 100%
rename from public/codebase/polyfill2.js
rename to public/monitor/codebase/polyfill2.js
diff --git a/public/codebase/transform/SystemTransform.js b/public/monitor/codebase/transform/SystemTransform.js
similarity index 100%
rename from public/codebase/transform/SystemTransform.js
rename to public/monitor/codebase/transform/SystemTransform.js
diff --git a/public/codebase/transform/SystemTransform.js.mem b/public/monitor/codebase/transform/SystemTransform.js.mem
similarity index 100%
rename from public/codebase/transform/SystemTransform.js.mem
rename to public/monitor/codebase/transform/SystemTransform.js.mem
diff --git a/public/codebase/transform/systemTransform-worker.min.js b/public/monitor/codebase/transform/systemTransform-worker.min.js
similarity index 100%
rename from public/codebase/transform/systemTransform-worker.min.js
rename to public/monitor/codebase/transform/systemTransform-worker.min.js
diff --git a/public/codebase/uuid.js b/public/monitor/codebase/uuid.js
similarity index 100%
rename from public/codebase/uuid.js
rename to public/monitor/codebase/uuid.js
diff --git a/public/codebase/webVideoCtrl.js b/public/monitor/codebase/webVideoCtrl.js
similarity index 100%
rename from public/codebase/webVideoCtrl.js
rename to public/monitor/codebase/webVideoCtrl.js
diff --git a/public/iframe.html b/public/monitor/iframe.html
similarity index 92%
rename from public/iframe.html
rename to public/monitor/iframe.html
index b87ff91d..198b1b63 100644
--- a/public/iframe.html
+++ b/public/monitor/iframe.html
@@ -34,13 +34,13 @@ var type = urlParams.get('type');
 console.log(type)
 $(function () {
     var height = '350';
-    var width = $("body").width();
+    var width = $("body").width(); 
     if(type=="1"){
-        width = $("body").width();
+        width = $("body").width() * 0.5;
         height = '350';
     }
     if(type=="2"){
-        width = $("body").width();
+        width = $("body").width() * 0.5;
         height = '600';
     }
     // ��ʼ�����������������
diff --git a/src/views/kitchen/environment/videoMonitoring/history.vue b/src/views/kitchen/environment/videoMonitoring/history.vue
index dfd5f753..3e5d6afc 100644
--- a/src/views/kitchen/environment/videoMonitoring/history.vue
+++ b/src/views/kitchen/environment/videoMonitoring/history.vue
@@ -3,7 +3,7 @@
         <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="iframe.html" ref="videoIframe1" frameborder="0" style="width: 100%;height: 100%;"></iframe>
+                <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>
diff --git a/src/views/kitchen/environment/videoMonitoring/index.vue b/src/views/kitchen/environment/videoMonitoring/index.vue
index 43a7654f..fe9c164c 100644
--- a/src/views/kitchen/environment/videoMonitoring/index.vue
+++ b/src/views/kitchen/environment/videoMonitoring/index.vue
@@ -14,26 +14,11 @@
                             ></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>
+                            <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 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>
@@ -44,14 +29,14 @@
                             <el-tree style="height: 700px; overflow: scroll"
                             :data="devicesOptions" :props="defaultProps"
                             :default-expand-all="true"
-                            :expand-on-click-node="false" @node-click="handleNodeClick"
+                            :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="iframe.html?type=2" ref="videoIframe5" frameborder="0" style="width: 100%;height: 100%;"></iframe>
+                                <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>
@@ -88,7 +73,7 @@ data() {
           label: "deviceName",
           id: "deviceId"
         },
-        chosenWinNo:1,
+        chosenWinNo:0,
         chosenChannel:null
     };
 },
@@ -109,10 +94,7 @@ methods:{
     // 初始化监控列表
     videoLogin(){ 
         setTimeout(() => {
-            this.iframeLogin('1','11')
-            this.iframeLogin('2','12')
-            this.iframeLogin('3','27')
-            this.iframeLogin('4','28')
+            this.iframeLogin()
         }, 1000); 
     },
     //点击设备
@@ -124,30 +106,70 @@ methods:{
         if(this.activeName=='2'){
 
         } 
+    }, 
+    handleNodeClick(data, node) {
+        // if(this.chosenWinNo==3){
+        //     this.chosenWinNo=0
+        // }else{
+        //     this.chosenWinNo = this.chosenWinNo+1
+        // } 
+        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 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("设备未绑定通道号");
+        // } 
     },
-    chosenWindow(num){
-        console.log(num)
-        this.chosenWinNo = num;
-        setTimeout(() => {
-            this.iframeLoaded(this.chosenWinNo,this.chosenChannel) 
-        }, 500); 
-    },
-    async handleNodeClick(data, node) {
-        console.log(data)
+    async handleNodeClick2(data, node) {
+        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 oWebVideoCtrl5 = this.$refs.videoIframe5.contentWindow.WebVideoCtrl;   
+        // var szDeviceIdentify = oLiveView.szIP + "_" + oLiveView.szPort;
         if(data.deviceExtendInfo&&data.deviceExtendInfo!=""){
             let obj = JSON.parse(data.deviceExtendInfo)
             console.log(obj)
             this.chosenChannel = '28'
             setTimeout(() => {
-                this.iframeLogin(this.chosenWinNo,this.chosenChannel) 
+                //  oWebVideoCtrl5.I_StartRealPlay(szDeviceIdentify, {
+                //     iWndIndex:0,
+                //     iStreamType: oLiveView.iStreamType,
+                //     iChannelID: this.chosenChannel,
+                //     bZeroChannel: oLiveView.bZeroChannel
+                // });
             }, 500); 
         }else{
             this.$modal.msgError("设备未绑定通道号");
         } 
-      },
-    iframeLoaded(domId,channel){ 
-        console.log(domId)
-        console.log(channel)
+    }, 
+    iframeLogin(){
         var oLiveView = {
             iProtocol: 1,            // protocol 1��http, 2:https
             szIP: "192.168.1.10",    // protocol ip
@@ -157,143 +179,53 @@ methods:{
             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);
-                }
-            }); 
-        } 
+        };  
+        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);
@@ -329,8 +261,7 @@ methods:{
         display: flex;
         justify-content: center;
         align-content: center;
-        flex-wrap: wrap;
-        padding-top: 1%;
+        flex-wrap: wrap; 
     }
 }
     
diff --git a/src/views/kitchen/environment/videoMonitoring/index2.vue b/src/views/kitchen/environment/videoMonitoring/index2.vue
new file mode 100644
index 00000000..0f5f2b23
--- /dev/null
+++ b/src/views/kitchen/environment/videoMonitoring/index2.vue
@@ -0,0 +1,337 @@
+<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>