submit

src/App.vue

@@ -1,7 +1,7 @@
 <template>
     <div id="app">
         <Head/>
-        <Nav/>
+        <Nav v-show="this.$route.meta.name!=='cameras'"/>
         <router-view/>
     </div>
 </template>
@@ -16,9 +16,6 @@ export default {
         Head,
         Nav
     },
-    created(){
-
-    },
     mounted(){
       console.log(this.$route.query.gId, this.$route.query.cId)
       console.log(window.location.search)

src/assets/js/path.js

@@ -21,7 +21,7 @@ let path = {
         adddress:'homes/home',
         url:'this.$path.home.path',
         title:"首页",
-    },
+    },  
     //  规章制度
     system:{
         path:"system/system",
@@ -62,8 +62,7 @@ let path = {
         adddress:'file/file',
         url:'this.$path.file.path',
         title:"文件",
-    },
-
+    }
     // 目标职责
 
     /* targetduty: {

src/components/common/head.vue

@@ -20,18 +20,16 @@
     </div>
 
     <div class="rightBox pagecont">
-      <template v-if="settingData.bigScreenScore === 1">
+      <span class="camera" @click="linkTo" v-if="this.$route.meta.name!=='cameras'" title="摄像头"></span>
+      <span class="camera index" @click="linkTo('back')" v-else title="返回首页"></span>
+      <!-- <template v-if="settingData.bigScreenScore === 1">
         <div class="rightBox1">
           风险指数：<span> <b>{{companyInfo.riskScore}}</b> 分</span>
-          <!--<i class="iTop"></i>
-          <i class="iBottom"></i>-->
         </div>
         <div class="rightBox2">
           安全指数：<span> <b>{{companyInfo.safeScore}}</b> 分</span>
-          <!--<i class="iTop"></i>
-          <i class="iBottom"></i>-->
         </div>
-      </template>
+      </template> -->
     </div>
   </div>
 </template>
@@ -59,6 +57,29 @@
 
     },
     methods: {
+      linkTo(type){
+        if(type==='back'){
+          this.$router.replace({
+            path:"/",
+            query:{
+              gId: this.$route.query.gId,
+              cId: this.$route.query.cId,
+              company: this.$route.query.company,
+              type: this.$route.query.type
+            }
+          })  
+          return        
+        }
+        this.$router.push({
+          path:'/cameras',
+          query:{
+            gId: this.$route.query.gId,
+            cId: this.$route.query.cId,
+            company: this.$route.query.company,
+            type: this.$route.query.type
+          }
+        })
+      },
       initTimer() {
         var date = new Date();
         var year = date.getFullYear();
@@ -244,5 +265,19 @@
       }
     }
   }
+  .camera{
+    display: inline-block;
+    width: 0.48rem;
+    height: 0.48rem;
+    background-repeat: no-repeat;
+    background-size: 80% 80%;
+    background-position: center center;
+    background-image: url(./images/camera.png);
+    margin-top: 0.15rem;
+    cursor: pointer;
+    &.index{
+      background-image: url(./images/back.png);
+    }
+  }
 </style>
 

src/router/index.js

@@ -11,8 +11,13 @@ Vue.use(Router)
  * */
 
 let newpath = paths.path;
-
-let arr = [];
+let arr = [
+  {
+    path: '/cameras',
+    component: () => import('@/views/cameras/index.vue'),
+    meta: { title: '摄像头列表',hidden: true,name:"cameras"}
+  },
+];
 
 function arrFn(path){
   let newArr = [];
@@ -28,14 +33,12 @@ function arrFn(path){
     }
     newArr.push(obj);
   }
-  console.log(newArr)
   return newArr;
 }
 
 
-// arr = arrFn(newpath);
-
+arr = arr.concat(arrFn(newpath));
 export default new Router({
   // mode: 'history',
-  routes: arrFn(newpath)
+  routes: arr
 })

src/views/cameras/index.vue

@@ -0,0 +1,221 @@
+<template>
+    <div class="camera-page">
+        <el-dialog
+            width="650px"
+            :close-on-click-modal="false"
+            :visible.sync="cameraVisible"
+            :modal="true"
+            @close="closeDialog"
+            append-to-body
+            >
+            <div class="dialog-title">
+                <p>{{videoDialog.riskPointName}}</p>
+            </div>
+            <div style="width: 610px;height:500px;" id="video-dialog"></div>
+        </el-dialog>    
+        <div class="camera-container">
+            <div class="video-container" v-for="(item,key) in items" :key="key" @click="handle(item)">
+                <div class="riskPointName">{{ item.riskPointName }}</div>
+                <div :id="`video-`+item.id"  style="width:100%;height:100%;"></div>
+            </div>
+        </div>    
+    </div>
+</template>
+<script>
+  import "@/assets/js/ezuikit.js"
+    export default {
+        data() {
+            return {
+                cameraVisible:false,
+                videoDialog:{},
+                items:[]
+            }
+        },
+        mounted() {
+           this.init() 
+        },
+        methods: {
+            init(){
+                this.getData()
+            },
+            getData(){
+                let cId=this.$port.cId||this.$route.query.cId
+                this.$axios.AxiosMethods("get",`/3rd/bigScreenData/getystokenbycid/${cId}`,{},(resq)=> {
+                    if(!resq.data.accessToken){
+                        this.$message.error('获取token失败')
+                    }
+                    this.$axios.AxiosMethods("get",`/3rd/bigScreenData/getallvideourlbyCid/${cId}`,{},(res)=> {
+                        let items=[]
+                        items=res.data.map((item,index)=>{
+                            return{
+                                ...item,
+                                "accessToken":resq.data.accessToken,
+                                "id":`camera-${index+1}`
+                            }
+                        })
+                        // for(let i=0;i<42;i++){
+                        //     if(i%2===0){
+                        //         items.push({
+                        //             "ipCameraUrl":"ezopen://open.ys7.com/E04848389/1.live",
+                        //             "accessToken":resq.data.accessToken,
+                        //             "id":`camera-${i+1}`,
+                        //             "riskPointName":res.data[0].riskPointName
+                        //         })
+                        //     }else{
+                        //         items.push({
+                        //             "ipCameraUrl":"ezopen://open.ys7.com/BA7718340/1.live",
+                        //             "accessToken":resq.data.accessToken,
+                        //             "id":`camera-${i+1}`,
+                        //             "riskPointName":res.data[1].riskPointName
+                        //         })                                
+                        //     }
+
+                        // }
+                        this.items=items
+                        for(let i=0;i<items.length;i++){
+                            this.$nextTick(()=>{
+                                this.render(items[i])
+                            }) 
+                        }                       
+                    })                    
+                })  
+
+            },
+            render(item={}){
+                item.player =  new EZUIKit.EZUIKitPlayer({
+                    id: `video-${item.id}`,
+                    autoplay: true,
+                    url: item.ipCameraUrl,
+                    accessToken: item.accessToken,
+                    plugin: ['talk'],  
+                    width: item.width||210,
+                    height: item.height||140,
+                    themeData:{
+                        "autoFocus": 5,
+                        "poster":"https://resource.eziot.com/group1/M00/00/89/CtwQEmLl8r-AZU7wAAETKlvgerU237.png",
+                        "header": {
+                            "color": "#1890ff",
+                            "activeColor": "#FFFFFF",
+                            "backgroundColor": "#000000",
+                            "btnList": []
+                        },
+                        "footer": {
+                            "color": "#FFFFFF",
+                            "activeColor": "#1890FF",
+                            "backgroundColor": "#00000021",
+                            "btnList": [
+                                {
+                                    "iconId": "play",
+                                    "part": "left",
+                                    "defaultActive": 1,
+                                    "memo": "播放",
+                                    "isrender": 0
+                                },
+                                {
+                                    "iconId": "sound",
+                                    "part": "left",
+                                    "defaultActive": 1,
+                                    "memo": "声音按钮",
+                                    "isrender": 1
+                                },
+                                {
+                                    "iconId": "pantile",
+                                    "part": "left",
+                                    "defaultActive": 1,
+                                    "memo": "云台控制按钮",
+                                    "isrender": 1
+                                },
+                                {
+                                    "iconId": "talk",
+                                    "part": "left",
+                                    "defaultActive": 0,
+                                    "memo": "对讲按钮",
+                                    "isrender": 1
+                                }, 
+                                {
+                                    "iconId": "expend",
+                                    "part": "right",
+                                    "defaultActive": 0,
+                                    "memo": "全局全屏按钮",
+                                    "isrender": 1
+                                }
+                            ]
+                        }
+                    },
+                    handleError: function(e) {
+                        console.log('捕获到错误', e)
+                    },
+                    handleSuccess: function() {
+                        console.log("播放成功回调函数，此处可执行播放成功后续动作");
+                    },
+                });
+            },
+            handle(item){
+                this.cameraVisible=true
+                if(item.player&&item.player.destroy){
+                    var destroyPromise = item.player.destroy();
+                    destroyPromise.then((data) => {
+                        console.log("promise 获取 数据", data)
+                    })                    
+                }
+                this.videoDialog={
+                    ...item,
+                    id:'dialog',
+                    width: 600,
+                    height: 500,
+                }
+                this.$nextTick(()=>{
+                    this.render(this.videoDialog)
+                }) 
+               
+            },
+            closeDialog(){
+                if(this.videoDialog.player&&this.videoDialog.player.destroy){
+                    var destroyPromise = item.player.destroy();
+                    destroyPromise.then((data) => {
+                        this.videoDialog={}
+                    })                    
+                }
+            }
+        },
+        destroyed() {
+            this.items.map(item=>{
+                if(item.player&&item.player.destroy){
+                    var destroyPromise = item.player.destroy();
+                    destroyPromise.then((data) => {
+                        console.log("promise 获取 数据", data)
+                    })                    
+                }
+            })
+        },
+    }
+</script>
+<style>
+.camera-container{
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    padding: 10px;
+    box-sizing: border-box;
+    background:linear-gradient(180deg,rgba(0,29,49,1) 0%,rgba(0,35,78,1) 100%);
+}
+.video-container{
+    width:230px;
+    height: 160px;
+    padding: 5px;
+    box-sizing: border-box;
+}
+.video-container .riskPointName{
+    margin: 0;
+    padding: 2px 0;
+    color: #fff;
+    font-size: 12px;
+    text-align: center;
+}
+.footer-controls{
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-size: 22px;
+}
+</style>