Merge remote-tracking branch 'origin/dev' into dev

index.html

@@ -6,6 +6,9 @@
     <meta name="renderer" content="webkit" />
     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
 <!--    <link rel="icon" href="/favicon.ico" />-->
+    <script src="/static/js/jquery-1.12.4.min.js"></script>
+    <script src="/static/js/jsencrypt.min.js"></script>
+    <script src="/static/js/web-control_1.2.5.min.js"></script>
     <script src="/h5player.min.js"></script>
     <script src="/szca_crypto.js"></script>
     <script src="/szca_base64.js"></script>

src/components/HKVideo/hikvision-player.vue

@@ -15,6 +15,8 @@ const props = defineProps({
   },
   objData: {}
 });
+const emits = defineEmits(['exitFullScreen']);
+
 const objData = props.objData;
 // console.log(props.wsUrl, '====>wsurl')
 const state = reactive({
@@ -109,6 +111,9 @@ const cbIntegrationCallBack = (oData) => {
   if (oData.responseMsg.type === 7) {
     doubleClick();
   }
+  if(oData.responseMsg.msg.result == 1025) {
+    emits('exitFullScreen');
+  }
 };
 // 双击窗口放大
 const doubleClick = () => {
@@ -162,7 +167,7 @@ const init = () => {
       .then(function (oData: any) {
         console.log(oData, 'oData');
         state.oWebControl.JS_Resize(state.idWidth, state.idHeight); // 初始化后resize一次，规避firefox下首次显示窗口后插件窗口未与DIV窗口重合问题
-        props.wsUrl && previewClick();
+        props.wsUrl && previewClick('') && doubleClick();
       });
   });
 };
@@ -213,27 +218,32 @@ window.addEventListener('scroll', () => {
 
 //视频预览功能
 const previewClick = (data) => {
-  console.log('previewClick ===========>>>>');
-  var cameraIndexCode = data ? data : (props.wsUrl as any);
-  // var cameraIndexCode = props.wsUrl as any //获取输入的监控点编号值，必填
-  var streamMode = 0; //主子码流标识：0-主码流，1-子码流
-  var transMode = 1; //传输协议：0-UDP，1-TCP
-  var gpuMode = 0; //是否启用GPU硬解，0-不启用，1-启用
-  var wndId = -1; //播放窗口序号（在2x2以上布局下可指定播放窗口）
+  let wsUrl = props.wsUrl;
+  let urlList = wsUrl.split(",");
+  console.log('previewClick ===========>>>>', urlList);
+  
+  urlList.forEach((indexCode)=>{
+    var cameraIndexCode = indexCode; //获取输入的监控点编号值，必填
+    var streamMode = 1; //主子码流标识：0-主码流，1-子码流
+    var transMode = 1; //传输协议：0-UDP，1-TCP
+    var gpuMode = 1; //是否启用GPU硬解，0-不启用，1-启用
+    var wndId = -1; //播放窗口序号（在2x2以上布局下可指定播放窗口）
 
-  state.oWebControl.JS_RequestInterface({
-    funcName: 'startPreview',
-    argument: JSON.stringify({
-      cameraIndexCode: cameraIndexCode, //监控点编号
-      streamMode: streamMode, //主子码流标识
-      transMode: transMode, //传输协议
-      gpuMode: gpuMode, //是否开启GPU硬解
-      wndId: wndId //可指定播放窗口
-    })
-  });
-  console.log(state.oWebControl.JS_RequestInterface, ' ------face');
-  console.log('当前的编号', cameraIndexCode);
-  console.log('执行完成');
+    state.oWebControl.JS_RequestInterface({
+      funcName: 'startPreview',
+      argument: JSON.stringify({
+        cameraIndexCode: cameraIndexCode, //监控点编号
+        streamMode: streamMode, //主子码流标识
+        transMode: transMode, //传输协议
+        gpuMode: gpuMode, //是否开启GPU硬解
+        wndId: wndId //可指定播放窗口
+      })
+    });
+    console.log(state.oWebControl.JS_RequestInterface, ' ------face');
+    console.log('当前的编号', cameraIndexCode);
+    console.log('执行完成');
+  })
+  return true;
 };
 
 const playbackClick = (data, begin_time, end_time) => {

src/views/emergencyCommandMap/LeftSection/VideoMonitorEdit.vue

@@ -49,6 +49,7 @@
       </div>
     </div>
     <div style="display: flex; justify-content: flex-end; margin-bottom: 30px; margin-top: -40px">
+      <div v-show="!editVideo" class="common-btn-primary2 edit-icon" style="margin-right: 30px;" @click="changeWebPay">视频客户端播放</div>
       <div v-show="!editVideo" class="common-btn-primary2 edit-icon" @click="activeEdit">编辑首页视频</div>
       <div v-show="editVideo" class="edit-box">
         <div class="flex">
@@ -68,6 +69,7 @@
     <div class="border"></div>
     <div class="video-list2">
       <div
+        v-if="!webPlay" 
         v-for="(item, index) in dialogListData"
         :key="index"
         class="video-box"
@@ -86,6 +88,14 @@
           <HKVideo v-else :dot_data="item" autoplay fullScreen :is-index="item.isUserVideos" @change="(data) => handleUpdateTags(item, data)" />
         </div>
       </div>
+      <div v-if="webPlay" style="width:100%;height:100%;">
+        <HikVideo
+          :wsUrl="wsUrl"
+          :objData="HKobjData"
+          ref="hkplayer"  
+          @exitFullScreen="onHKExitFullScreen"
+        ></HikVideo>
+      </div>
     </div>
     <div class="footer">
       <pagination
@@ -108,6 +118,7 @@ import { getUserVideoPoints, getVideoFromList, getVideoListNew, updateUserVideoP
 import useAppStore from '@/store/modules/app';
 import useMapStore from '@/store/modules/map';
 import HKVideo from '@/components/HKVideo/index2.vue';
+import HikVideo from '@/components/HKVideo/hikvision-player.vue';
 
 interface LngLat {
   longitude: number;
@@ -170,6 +181,12 @@ const getList = (flag?: boolean) => {
     });
     dialogListData.value = res.data;
     total.value = res.total;
+
+    let videoCodeList = [];
+    dialogListData.value.forEach((i)=>{
+      videoCodeList.push(i.video_code);
+      wsUrl.value = videoCodeList.join(",");
+    });
   });
 };
 const getVideoInfoList = () => {
@@ -287,6 +304,36 @@ onMounted(() => {
     videoFromList.value = res.rows;
   });
 });
+onUnmounted(() => {
+  if(hkplayer.value) {
+      hkplayer.value.dispose();
+  }
+})
+const HKobjData = ref({
+	// 海康初始化数据
+	appkey: '28132932', //综合安防管理平台提供的appkey，必填
+	ip: '19.155.243.66', //综合安防管理平台IP地址，必填
+	secret: 'vPUDL4ilt2mENr8XEfa7', //综合安防管理平台提供的secret，必填
+	port: 443, //综合安防管理平台端口，若启用HTTPS协议，默认443
+	playMode: 0, // 0 预览 1回放
+	layout: '3x3', //页面展示的模块数
+	showToolbar: 1 //是否显示工具栏，0-不显示，非0-显示
+})
+const wsUrl = ref('');
+const hkplayer = ref(null);
+const webPlay = ref(false);
+const changeWebPay = ()=> {
+  webPlay.value = true;  
+};
+const onHKExitFullScreen = () => {
+  if(webPlay.value) {
+      hkplayer.value.stopAllPreview()
+      setTimeout(()=>{
+        webPlay.value = false; 
+        emits('update:modelValue', false);
+      }, 500)
+  }
+};
 </script>
 
 <style lang="scss" scoped>
@@ -350,6 +397,14 @@ onMounted(() => {
     }
   }
 }
+
+.video-list3 {
+  display: flex;
+  flex-wrap: wrap;
+  width: 100%;
+  height: 100%;
+}
+
 .img {
   width: 750px;
   height: 327px;