From c619d24cf90debb474f13c4c3ada1a05c40677fe Mon Sep 17 00:00:00 2001
From: chenchenzai <xiaoshangqing@hisense.com>
Date: Mon, 21 Nov 2022 20:32:28 +0800
Subject: [PATCH] =?UTF-8?q?h5player=E6=92=AD=E6=94=BE=E6=8E=A5=E5=8F=A3?=
 =?UTF-8?q?=E6=B7=BB=E5=8A=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 front/src/api/file.js                         | 21 ++++++--
 front/src/supermap/advance-init.js            |  5 +-
 front/src/views/home/components/H5Player.vue  | 20 +++++++-
 .../components/CameraPopupOnMap.vue           | 50 +++++++++++++++----
 .../views/home/videoSurveillance/index.vue    |  6 +++
 5 files changed, 84 insertions(+), 18 deletions(-)

diff --git a/front/src/api/file.js b/front/src/api/file.js
index 094e0c4d..278aee62 100644
--- a/front/src/api/file.js
+++ b/front/src/api/file.js
@@ -116,11 +116,22 @@ export function getPlaceType() {
 
 //西海岸 根据标签树查询视频列表
 export function CameraConditionPlaceType(params) {
-  return axios.post(
-    'http://10.134.135.92:9537/data_service/getCamera/CameraConditionPlaceType',
-    params,
-    config2
-  )
+    return axios.post(
+        'http://10.134.135.92:9537/data_service/getCamera/CameraConditionPlaceType' +
+        params,
+        config2
+    )
+}
+
+// 西海岸视频wss流获取
+export function getCameraLiveStream(params) {
+    return axios.get(
+        'http://10.134.135.92:9537/data_service/getCamera/getCameraLiveStream?cameraIndexCode=' +
+        params.channelId +
+        '&protocol=' +
+        'wss' + '&transmode=1&streamType=1',
+        config2
+    )
 }
 // 西海岸--获取摄像头列表的后台地址 (测试环境地址：10.134.135.92:9537)
 let _cameraUrl =
diff --git a/front/src/supermap/advance-init.js b/front/src/supermap/advance-init.js
index 6068870d..6e28c3c6 100644
--- a/front/src/supermap/advance-init.js
+++ b/front/src/supermap/advance-init.js
@@ -1734,8 +1734,9 @@ export function MapFun(mapObj) {
                         //     })
                         // }
                     marker.on('click', e => {
-                        console.log('点位数据', e)
-                        clickDataList.push(e.resourceData);
+                        //console.log('点位数据', e)
+                        //console.log('点位数据1', e.sourceTarget.resourceData)
+                        clickDataList.push(e.sourceTarget.resourceData);
                         // 判断是否需要选中之后更换marker的图标
                         //const layers = layerGroup.get(layerName).getLayers()
                         // layers.forEach((layer) => {
diff --git a/front/src/views/home/components/H5Player.vue b/front/src/views/home/components/H5Player.vue
index 6ace8674..ccb06eb6 100644
--- a/front/src/views/home/components/H5Player.vue
+++ b/front/src/views/home/components/H5Player.vue
@@ -7,6 +7,7 @@
 <script>
 const IS_MOVE_DEVICE = document.body.clientWidth < 992 // 是否移动设备
 const MSE_IS_SUPPORT = !!window.MediaSource // 是否支持mse
+import { message } from 'ant-design-vue'
   export default {
     name: 'H5Player',
     props: {
@@ -57,8 +58,20 @@ const MSE_IS_SUPPORT = !!window.MediaSource // 是否支持mse
       this.createPlayer()
       this.arrangeWindow()
       //videoUrl this.realplay(this.videoUrl,0);//循环传过来的数组进行播放，index根据选中的个数
-      this.realplay('wss://10.134.135.44:6014/proxy/10.10.20.14:559/openUrl/y3mFfcA',0);
+      this.realplay(this.videoUrl,0);
+      //this.realplay('wss://10.134.135.44:6014/proxy/10.10.20.14:559/openUrl/y3mFfcA',0);
     },
+     watch: {
+            videoUrl: {
+            	// 数据发生变化就会调用这个函数  
+                handler(newVal, oldVal) {
+                    console.log('oldVal:', oldVal)
+                    console.log('newVal:', newVal)
+                },
+                // 立即处理 进入页面就触发
+                immediate: true
+            }
+        },
     methods: {
      // 海康视频初始化加载
      init () {
@@ -127,7 +140,10 @@ const MSE_IS_SUPPORT = !!window.MediaSource // 是否支持mse
        () => {
          console.log('realplay success')
        },
-       e => { console.error(e) }
+       e => { 
+        console.error(e);
+        message.error('请联系视频提供方!')
+         }
      )
    },
    // 关闭所有视频
diff --git a/front/src/views/home/videoSurveillance/components/CameraPopupOnMap.vue b/front/src/views/home/videoSurveillance/components/CameraPopupOnMap.vue
index feadb2dd..5f691d90 100644
--- a/front/src/views/home/videoSurveillance/components/CameraPopupOnMap.vue
+++ b/front/src/views/home/videoSurveillance/components/CameraPopupOnMap.vue
@@ -28,11 +28,11 @@
               <h5-player :video-url="videoUrl"></h5-player> 
               </div>
               <div class="text-label">
-                <span>{{defaultIndex}}</span>/<span>{{cameraDataList.length}}</span>
+                <span>{{defaultIndex+1}}</span>/<span>{{cameraDataList.length}}</span>
               </div>
               <div class="footer-button"> 
-                <a-button type="primary" @click="applyNow(url)">立即申请</a-button>
-                <a-button type="primary" style="margin-left:20px" @click="addIntoCart(url)">加入申购车</a-button>
+                <a-button type="primary" @click="applyNow(cameraDataList[defaultIndex])">立即申请</a-button>
+                <a-button type="primary" style="margin-left:20px" @click="addIntoCart(cameraDataList[defaultIndex])">加入申购车</a-button>
                 </div>
       </div>
     </div>
@@ -46,9 +46,11 @@
     LeftCircleOutlined,
     RightCircleOutlined,
   } from '@ant-design/icons-vue'
+  import { useRouter } from 'vue-router'
   import H5Player from '@/views/home/components/H5Player.vue'
   import mybus from '@/myplugins/mybus'
   import { getStreamByChannelCode } from '@/api/videoSurveillance'
+  import {getCameraLiveStream} from '@/api/file'
   export default {
     name: '',
     components: {
@@ -65,7 +67,9 @@
         },
       },
     },
-    mounted() {},
+    mounted() {
+      this.getVideoUrl(this.cameraDataList[this.defaultIndex]);
+    },
     // directives: {
     //     viewer: viewer({
     //         debug: true,
@@ -76,7 +80,8 @@
         openVideo: false,
         videoStream: '',  
          videoUrl:'', //视频预览url
-         defaultIndex:0//默认显示列表中的对一个
+         defaultIndex:0,//默认显示列表中的对一个
+         router:useRouter()
       }
     },
     methods: {
@@ -90,32 +95,59 @@
       //立即申请
       applyNow(item){
         console.log('applyNowapplyNow',item);
-         mybus.emit('selectCamera', item)
+       //跳转至申请页面
+          this.router.push({
+          path: '/apply',
+          query: {
+         
+          },
+        })
       },
       //加入申购车
       addIntoCart(item){
          console.log('addIntoCartaddIntoCart',item);
           mybus.emit('selectCamera', item)
       },
+      //获取视频控件所需播放地址
+      getVideoUrl(data){
+      let param = data;
+      getCameraLiveStream(param).then((res) => {
+      //console.log('555555rrrrr',res)
+      if(res.data.data){
+        this.videoUrl = res.data.data.url;
+      }
+      //visible.value = true
+      //options.src = res.data.data
+      //options.src ="wss://10.134.135.45:6014/proxy/10.10.20.15:559/openUrl/0kIF7La"
+      })
+      },
+      //查看前一个
       handlePrev(){
         let maxLength = this.cameraDataList.length-1;
-        this.defaultIndex = this.defaultIndex - 1;
          console.log('opopopop',this.cameraDataList[maxLength]);
         if(this.defaultIndex === 0){
+          this.defaultIndex = maxLength;
           console.log('opopopop',this.cameraDataList[maxLength]);
           //根据当前数据的channelId查询视频播放的url传递给H5组件调用接口
           //this.videoUrl =
+            this.getVideoUrl(this.cameraDataList[maxLength]);
         } else{
+           this.defaultIndex = this.defaultIndex - 1;
            console.log('uyutyuyopopopop',this.cameraDataList[this.defaultIndex]);
+            this.getVideoUrl(this.cameraDataList[this.defaultIndex]);
         }
        
       },
+      //查看下一个
       handleNext(){
-         this.defaultIndex = this.defaultIndex + 1;
           if(this.defaultIndex === this.cameraDataList.length){
-          console.log('opopopop',this.cameraDataList[0]);
+            this.defaultIndex = this.cameraDataList.length;
+            console.log('opopopop',this.cameraDataList[0]);
+            this.getVideoUrl(this.cameraDataList[0]);
           }else{
+            this.defaultIndex = this.defaultIndex + 1;
                console.log('opopopop',this.cameraDataList[this.defaultIndex]); 
+                  this.getVideoUrl(this.cameraDataList[this.defaultIndex]);
           }
        
       }
diff --git a/front/src/views/home/videoSurveillance/index.vue b/front/src/views/home/videoSurveillance/index.vue
index a3ab9ace..925d5a08 100644
--- a/front/src/views/home/videoSurveillance/index.vue
+++ b/front/src/views/home/videoSurveillance/index.vue
@@ -224,6 +224,12 @@ import { ElMessage } from 'element-plus'
         this.queryCameraConditionPlace(data)
 
       })
+
+      //清空地图上所有数据
+       mybus.off('clearLeftSelect')
+      mybus.on('clearLeftSelect', () => {
+       this.hiMapFun.clearAllLayers();
+      })
     },
     methods: {
       //查询标签视频