调整视频大小 添加录像入口

Signed-off-by: zhaobao <528046418@qq.com>

admin/src/components/cameras/index.vue

@@ -3,9 +3,9 @@
         <div class="nav">双预防视频监控平台</div>    
         <div class="camera-container">
             <div class="video-container" v-for="(item,key) in items" :key="key" >
-                <div class="name">{{ item.deviceName }}</div>
-                <iframe width="400" height="300" allowfullscreen :src="getIframeSrc(item.deviceSerial)" v-if="key>19"></iframe>      
+                <div class="name">{{ item.deviceName }}</div>   
                 <div :id="`video-`+item.deviceSerial"  style="width:100%;height:100%;" v-if="key<20"></div>  
+                <iframe width="210" height="160" allowfullscreen :src="getIframeSrc(item.deviceSerial)" v-if="key>19"></iframe>   
                 <div class="camera-show-handle" @click.stop="showModel(item,2)"  v-if="key>19"></div>
                 <div class="camera-show-handle" @click.stop="showModel(item)"  v-if="key<20"></div>
             </div>
@@ -16,11 +16,12 @@
             </div> -->
             <div id="camera-model" v-show="device.model">
                 <div id="camera-box">
-                    <div class="title">
-                        <span>{{ device.deviceName }}</span>
+                    <div class="title">                        
+                        <a :href="'https://open.ys7.com/ezopen/h5/iframe?url=ezopen://open.ys7.com/'+device.deviceSerial+'/1.rec&autoplay=1&accessToken='+accessToken" target="_blank"><span>{{ device.deviceName }}</span></a>
+                        【<span style="padding: 10px;color:#000;cursor: pointer;" @click="changePlayUrl">{{devicePlayIsRec?'录像':"监控"}}</span> 】                     
                         <div class="close" @click="close">X</div>
-                    </div>            
-                    <div id="camera-deviceSerial"></div>            
+                    </div>           
+                    <div id="camera-deviceSerial"></div>     
                 </div>
             </div>
         </div>    
@@ -36,6 +37,7 @@
                 items:[],
                 flvsItem:[],
                 accessToken:undefined,
+                devicePlayIsRec:false,
                 device:{
                     model:false,
                     deviceName:""
@@ -81,9 +83,18 @@
             close(){
                 this.device.player.destroy()
                 this.device.player.stop()
-                this.device={}   
+                this.device={}  
+                this.devicePlayIsRec=false; 
                 document.getElementById('camera-deviceSerial').innerHTML=""         
-            },            
+            },
+            changePlayUrl(){
+                let type=this.devicePlayIsRec?'live':'rec'
+                this.device.player.changePlayUrl({
+                    url: `ezopen://open.ys7.com/${this.device.deviceSerial}/1.${type}`,
+                }).then(()=>{
+                    this.devicePlayIsRec=!this.devicePlayIsRec 
+                }) 
+            },     
             async getDevicelist(){
                 var devicelist=[]
                 const pageSize=20//最大50
@@ -163,14 +174,15 @@
             },
             render(item={},callback){
                 let accessToken=this.accessToken;
+                let type=item.type==='rec'?'rec':'live'
                 item.player =  new EZUIKit.EZUIKitPlayer({
                     id: item.id||`video-${item.deviceSerial}`,
                     autoplay: false,
-                    url: `ezopen://open.ys7.com/${item.deviceSerial}/1.hd.live`,
+                    url: `ezopen://open.ys7.com/${item.deviceSerial}/1.${type}`,
                     accessToken: accessToken,
                     plugin: ['talk'],  
-                    width: item.width||400,
-                    height: item.height||300,
+                    width: item.width||210,
+                    height: item.height||160,
                     audio:0,
                     // useHardDev: true, //开启高性能模式
                     themeData:{
@@ -301,6 +313,7 @@
 }
 .camera-page{
     width: 100%;
+    min-height: 100vh;
     background-color: #042B5A;
 }
 .nav{
@@ -324,12 +337,13 @@
     box-sizing: border-box;
 }
 .video-container{
-    width:400px;
-    height: 330px;
+    width:210px;
+    height: 170px;
     box-sizing: border-box;
-    margin: 10px;
+    margin: 6px;
     position: relative;
     overflow: hidden;
+    cursor: pointer;
 }
 .video-container iframe{
     border: 0;
@@ -341,6 +355,10 @@
     padding: 3px 0;
     background-color: rgba(0,0,0,0.6);
     text-indent: 14px;
+    font-size: 14px;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
 }
 .video-container .camera-show-handle{
     position: absolute;