视频监控菜单样式

public/datav/detail/static/css/public-detail.css

@@ -107,8 +107,9 @@ section .list-item span {
 
 section .list-item .el-icon-caret-right:before {
     content: "\e791";
-    color: #a5a4a4;
-    font-size: 18px;
+    color: #0a4c59;
+    font-size: 24px;
+    vertical-align: middle;
 }
 /*列表list*/
 

public/datav/detail/static/js/public-detail.js

@@ -44,10 +44,11 @@ let jessibucaPlayer = {};
     request.defaults.headers['Content-Type'] = 'application/x-www-form-urlencoded; charset=UTF-8';
 
 var gemhoUtil = {
-    goToPage: function(url){
-        // window.open(url)
-        location.href = url
-    },
+    // goToPage: function(url){
+    //     // window.open(url)
+    //     // location.href = '/datav/index.html'
+    //     // window.open('/datav/index.html')
+    // },
 
     detailPageMixin: {
         data: function() {
@@ -83,7 +84,11 @@ var gemhoUtil = {
         },
         methods: {
             goPrePage(url) {
-                history.back()
+                // history.back()
+                if(url === 'emergency'){
+                    window.open('/datav/index.html')
+                }
+
             },
             changeMenu(item) {
                 localStorage.setItem('bigScreenDetailMenu', item.name)

public/datav/detail/video-monitor.html

@@ -22,12 +22,15 @@
         .amap-logo {
             z-index: -10;
         }
-        .amap-copyright{
+
+        .amap-copyright {
             z-index: -10;
         }
-        .el-autocomplete-suggestion{
+
+        .el-autocomplete-suggestion {
             width: 330px !important;
         }
+
         .buttons-box {
             width: 100%;
             height: 28px;
@@ -57,7 +60,6 @@
             position: absolute;
             right: 0;
         }
-
     </style>
 </head>
 
@@ -98,7 +100,8 @@
                     </div>
                     <div class="menuInfo">
                         <ul>
-                            <li v-for="(item, index) in menuObj.emergency.menuList" @click="changeMenu(item)" :class="{active: bigScreenDetailMenu===item.name}">
+                            <li v-for="(item, index) in menuObj.emergency.menuList" @click="changeMenu(item)"
+                                :class="{active: bigScreenDetailMenu===item.name}">
                                 {{item.name}}
                             </li>
                         </ul>
@@ -106,8 +109,20 @@
 
                 </div>
 
+
                 <!-- 视频监控列表 -->
                 <div class="relative mt20" style="width: 490px;height: calc(100vh - 170px);">
+                    <section>
+                        <div class="list-wrapper" v-show="showMenu4bianpo">
+                            <div class="list-item" :class="{active: item.cid===currentSensorId}"
+                                v-for="(item, index) in sensorLIst" @click="changeSensor(item,index)"><i
+                                    class="el-icon-caret-right"></i><span>{{item.name}}</span></div>
+                        </div>
+                    </section>
+                </div>
+
+                <!-- 视频监控列表 -->
+                <!-- <div class="relative mt20" style="width: 490px;height: calc(100vh - 170px);">
                     <div class="relative">
                         <img class="wp100" style="height: 52px;" src="../static/sub-title-1.png" alt="">
                         <div class="poa-cover">
@@ -120,7 +135,6 @@
                             style="background: linear-gradient(to bottom, rgba(171,238,255,0), rgba(171,238,255,.2));border-bottom: 1px solid rgba(171,238,255,.5);"
                             v-for="(item,index) in videos" :key="" index @click="chickVideo(item,index)">
                             <div class="flex-1 flex-text ml10 mr10 ovh">
-                                <!-- <div>{{ (index + 1) < 10 ? '0' + (index + 1) : index + 1 }}</div> -->
                                 <img style="width: 14px;height: 16px;" src="../static/play-icon.png" alt=""
                                     v-if="index == TabCur">
                                 <div class="flex-1 ml25 mr25 ellipsis">{{ item.name }}</div>
@@ -130,7 +144,7 @@
                             </div>
                         </div>
                     </div>
-                    </div>
+                </div> -->
             </div>
 
             <div class="flex-1 ml15 flex-text flex-column ovh" style="height: calc(100vh - 110px);">
@@ -235,6 +249,10 @@
         mixins: [gemhoUtil.detailPageMixin],
         data() {
             return {
+                showMenu4bianpo: true,
+                sensorLIst: [],
+                currentSensorId: '',
+
                 // video
                 aiWarnCount: 0,
                 videoUrl: null,
@@ -278,6 +296,18 @@
         mounted() {
             this.getData();
 
+
+
+            this.getSensorList(() => {
+
+            });
+        },
+        methods: {
+            changeSensor(item, index) {
+                this.currentSensorId = item.cid
+                this.chickVideo(item, index)
+            },
+            getSensorList(fn) {
                 // 视频列表
                 Axiosx.get(host + '/api/video-mine/mineId', {
                     params: {
@@ -287,15 +317,17 @@
                 }).then(res => {
                     res = res.data.body;
                     this.info = {
-					appKey:res.appKey,
-					appSecret:res.appSecret,
+                        appKey: res.appKey,
+                        appSecret: res.appSecret,
                     };
-				this.videos = res.videoChannelList || [];
+                    this.sensorLIst = res.videoChannelList || [];
+                    if (this.sensorLIst.length) {
+                        this.currentSensorId = this.sensorLIst[0].cid
                         this.createVideo(res.videoChannelList[0]);
+                    }
                 });
             },
-        methods: {
-			createVideo: function(item){
+            createVideo: function (item) {
                 this.getAccessToken(this.info.appKey, this.info.appSecret).then(accessToken => {
                     var url = this.getUrl(item);
 
@@ -305,7 +337,7 @@
                     this.player = new EZUIKit.EZUIKitPlayer({
                         autoplay: true,
                         id: "video-container",
-						accessToken:accessToken,
+                        accessToken: accessToken,
                         url: url,
                         template: "standard", // simple - 极简版;standard-标准版;security - 安防版(预览回放);voice-语音版；
                         // 视频上方头部控件
@@ -325,24 +357,24 @@
                 })
             },
 
-			getAccessToken(appKey, appSecret){
-				var dataJson = 'appKey='+appKey+'&appSecret='+appSecret;
-				return request.post("/ys7com", dataJson).then(res=>{
+            getAccessToken(appKey, appSecret) {
+                var dataJson = 'appKey=' + appKey + '&appSecret=' + appSecret;
+                return request.post("/ys7com", dataJson).then(res => {
                     var data = res.data || {};
                     if (data['code'] == '200') {
                         return data['data']['accessToken']
-					}else{
+                    } else {
                         return null
                     }
-				}).catch(err=>{
+                }).catch(err => {
                     console.log(err);
                     return err
                 })
             },
-			getUrl(item){
+            getUrl(item) {
                 var captcha = item.captcha ? item.captcha + '@' : '';
                 var id = item.id || this.info.id || '';
-				return 'ezopen://'+captcha+'open.ys7.com/'+id+'/'+item.channel;
+                return 'ezopen://' + captcha + 'open.ys7.com/' + id + '/' + item.channel;
             },
             chickVideo(video, index) {
                 this.createVideo(video);