add HK plugin and fix resize bug

src/components/hk/hkv.vue

@@ -22,6 +22,7 @@ export default {
   data() {
     return {
       plugin: true,
+      zoom: window.devicePixelRatio,
       iWidth: "100%",
       iHeight: "100%",
       webVideo: {},
@@ -31,16 +32,46 @@ export default {
       xmlDocData: {},
       g_iWndIndex: 0, //可以不用设置这个变量，有窗口参数的接口中，不用传值，开发包会默认使用当前选择窗口
       videoNum: "",
+      deviceId: [],
+      refreshMark: true,
     };
   },
   created() {},
   mounted() {
+    this.deviceId = new Array();
     this.videoInitPlugin();
+    this.refreshMark = true;
+  },
+  beforeUnmount() {
+    window.removeEventListener("resize", this.handleResize);
   },
   destroyed() {
     this.$router.go(0);
   },
   methods: {
+    handleResize() {
+      this.zoom = window.devicePixelRatio;
+      setTimeout(() => {
+        console.log("this.zoom :>> ", this.zoom);
+        WebVideoCtrl.I_Resize(
+          380 / (this.zoom / 1.25),
+          260 / (this.zoom / 1.25)
+        );
+      }, 1000);
+    },
+    stopAll() {
+      this.refreshMark = false;
+      WebVideoCtrl.I_StopAllPlay();
+      console.log(" 停止全部播放");
+      this.logoutAll();
+    },
+    logoutAll() {
+      for (let i = 0; i < this.deviceId.length; i++) {
+        WebVideoCtrl.I_Logout(this.deviceId[i]);
+        console.log("退出登录ip： ", this.deviceId[i]);
+      }
+      this.deviceId = [];
+    },
     videoInitPlugin() {
       var iRet = WebVideoCtrl.I_CheckPluginInstall();
       if (iRet === -1) {
@@ -50,7 +81,7 @@ export default {
       this.initPlugin();
     },
     //插件初始化
-    initPlugin() {
+    async initPlugin() {
       var that = this;
       WebVideoCtrl.I_InitPlugin({
         bWndFull: true, //是否支持单窗口双击全屏，默I_CheckPluginInstall
@@ -67,33 +98,50 @@ export default {
         // return;
       }
       setTimeout(() => {
-        WebVideoCtrl.I_Resize(1450, 1050);
-      }, 100);
+        WebVideoCtrl.I_Resize(
+          380 / (this.zoom / 1.25),
+          260 / (this.zoom / 1.25)
+        );
+
+        // let divw = $('.divPlugin').width();
+        // let divh = $('.divPlugin').height();
+        // console.log("div宽:" + divw + "；div高:" + divh);
+        // WebVideoCtrl.I_Resize(divw, divh);
+      }, 200);
+      window.addEventListener("resize", this.handleResize);
+      await this.clickLogin();
+
+        setTimeout(() => {
+         this.$emit("init", true);
+      }, 1000);
 
-      this.clickLogin();
     },
     clickLogin() {
-      console.log('this.companyVideoData :>> ', this.companyVideoData);
-const uniqueArr = [];
-const uniqueSet = new Set();
+      return new Promise((resolve) => {
+        const uniqueArr = [];
+        const uniqueSet = new Set();
 
-this.companyVideoData.forEach(obj => {
-  if (obj !== undefined) {
-    const key = JSON.stringify(obj);
-    if (!uniqueSet.has(key)) {
-      uniqueSet.add(key);
-      uniqueArr.push(obj);
-    }
-  }
-});
-      console.log(uniqueArr);
-      for(let index = 0;index < uniqueArr.length;index++){
-        this.singleLogin(uniqueArr[index],index)
-      }
+        this.companyVideoData.forEach((obj) => {
+          if (obj !== undefined) {
+            const key = JSON.stringify(obj);
+            if (!uniqueSet.has(key)) {
+              uniqueSet.add(key);
+              uniqueArr.push(obj);
+            }
+          }
+        });
+        console.log(uniqueArr);
+        for (let index = 0; index < uniqueArr.length; index++) {
+          this.singleLogin(uniqueArr[index], index);
+          this.deviceId.push(uniqueArr[index].ip);
+        }
+
+        // 完成登录操作后调用resolve
+        resolve();
+      });
     },
-    singleLogin(Data,index){
-        setTimeout(() => {
-      
+    singleLogin(Data, index) {
+      setTimeout(() => {
         var that = this;
         WebVideoCtrl.I_Login(
           Data.ip,
@@ -105,8 +153,9 @@ this.companyVideoData.forEach(obj => {
             async: false,
             success: function (xmlDoc) {
               console.log("开始预览"); //不能删除
+
               // that.getChannelInfo();
-              that.initPlay(Data,index);
+              that.initPlay(Data, index);
             },
             error: function () {
               console.log("login error");
@@ -154,16 +203,15 @@ this.companyVideoData.forEach(obj => {
       });
     },
     //初始化视频，为了让用户进来就可以看到视频播放
-    initPlay(data,index) {
+    initPlay(data, index) {
       let szIP = data.ip; //ip地址
       //循环16次是因为插件分屏最大为4x4（可以根据情况而定）
-        
-        WebVideoCtrl.I_StartRealPlay(szIP, {
-          iStreamType: 1,
-          iChannelID: 1,
-          iWndIndex: index,
-        });
-     
+
+      WebVideoCtrl.I_StartRealPlay(szIP, {
+        iStreamType: 1,
+        iChannelID: 1,
+        iWndIndex: index,
+      });
     },
     // 点击查看具体哪个监控
     startRealPlay(oChannels) {
@@ -212,11 +260,12 @@ this.companyVideoData.forEach(obj => {
 };
 </script>
 <style scoped>
-.video-player {
-  width: 120%;
-  height: 120%;
+#video-player {
+  width: 100%;
+  height: 100%;
+  position: relative;
 }
-.divPlugin {
+#video-player #divPlugin {
   width: 100%;
   height: 100%;
   color: red;
@@ -230,6 +279,9 @@ this.companyVideoData.forEach(obj => {
   /* right: 0px; */
 
   overflow: hidden;
+  position: absolute;
+  right: 0;
+  bottom: 0;
 }
 .down {
   width: 100%;

src/components/hk/hkv1.vue

@@ -22,6 +22,7 @@ export default {
   data() {
     return {
       plugin: true,
+      zoom: window.devicePixelRatio,
       iWidth: "100%",
       iHeight: "100%",
       webVideo: {},
@@ -34,6 +35,9 @@ export default {
     };
   },
   created() {},
+  beforeUnmount() {
+    window.removeEventListener("resize", this.handleResize);
+  },
   mounted() {
     this.videoInitPlugin();
   },
@@ -41,6 +45,15 @@ export default {
     this.$router.go(0);
   },
   methods: {
+    handleResize() {
+      this.zoom = window.devicePixelRatio;
+      setTimeout(() => {
+        WebVideoCtrl.I_Resize(
+          600 / (this.zoom / 1.25),
+          240 / (this.zoom / 1.25)
+        );
+      }, 1000);
+    },
     videoInitPlugin() {
       var iRet = WebVideoCtrl.I_CheckPluginInstall();
       if (iRet === -1) {
@@ -67,33 +80,36 @@ export default {
         // return;
       }
       setTimeout(() => {
-        WebVideoCtrl.I_Resize(1130, 800);
+        WebVideoCtrl.I_Resize(
+          600 / (this.zoom / 1.25),
+          240 / (this.zoom / 1.25)
+        );
       }, 100);
+      window.addEventListener("resize", this.handleResize);
 
       this.clickLogin();
     },
     clickLogin() {
-      console.log('this.companyVideoData :>> ', this.companyVideoData);
-const uniqueArr = [];
-const uniqueSet = new Set();
+      console.log("this.companyVideoData :>> ", this.companyVideoData);
+      const uniqueArr = [];
+      const uniqueSet = new Set();
 
-this.companyVideoData.forEach(obj => {
-  if (obj !== undefined) {
-    const key = JSON.stringify(obj);
-    if (!uniqueSet.has(key)) {
-      uniqueSet.add(key);
-      uniqueArr.push(obj);
-    }
-  }
-});
+      this.companyVideoData.forEach((obj) => {
+        if (obj !== undefined) {
+          const key = JSON.stringify(obj);
+          if (!uniqueSet.has(key)) {
+            uniqueSet.add(key);
+            uniqueArr.push(obj);
+          }
+        }
+      });
       console.log(uniqueArr);
-      for(let index = 0;index < uniqueArr.length;index++){
-        this.singleLogin(uniqueArr[index],index)
+      for (let index = 0; index < uniqueArr.length; index++) {
+        this.singleLogin(uniqueArr[index], index);
       }
     },
-    singleLogin(Data,index){
-        setTimeout(() => {
-      
+    singleLogin(Data, index) {
+      setTimeout(() => {
         var that = this;
         WebVideoCtrl.I_Login(
           Data.ip,
@@ -106,7 +122,7 @@ this.companyVideoData.forEach(obj => {
             success: function (xmlDoc) {
               console.log("开始预览"); //不能删除
               // that.getChannelInfo();
-              that.initPlay(Data,index);
+              that.initPlay(Data, index);
             },
             error: function () {
               console.log("login error");
@@ -154,16 +170,15 @@ this.companyVideoData.forEach(obj => {
       });
     },
     //初始化视频，为了让用户进来就可以看到视频播放
-    initPlay(data,index) {
+    initPlay(data, index) {
       let szIP = data.ip; //ip地址
       //循环16次是因为插件分屏最大为4x4（可以根据情况而定）
-        
-        WebVideoCtrl.I_StartRealPlay(szIP, {
-          iStreamType: 1,
-          iChannelID: 1,
-          iWndIndex: index,
-        });
-     
+
+      WebVideoCtrl.I_StartRealPlay(szIP, {
+        iStreamType: 1,
+        iChannelID: 1,
+        iWndIndex: index,
+      });
     },
     // 点击查看具体哪个监控
     startRealPlay(oChannels) {

src/components/hk/monitorHK.vue

@@ -32,7 +32,8 @@ export default {
       g_iWndIndex: 0, //可以不用设置这个变量，有窗口参数的接口中，不用传值，开发包会默认使用当前选择窗口
       videoNum: "",
       videoData:[],
-      iWndowType:1
+      iWndowType:1,
+      zoom: window.devicePixelRatio,
     };
   },
   created() {},
@@ -53,11 +54,26 @@ this.companyVideoData.forEach(obj => {
 
    console.log('this.videoData :>> ', this.videoData);
     this.videoInitPlugin();
+  },
+      beforeUnmount() {
+    window.removeEventListener('resize', this.handleResize);
   },
   destroyed() {
     this.$router.go(0);
   },
   methods: {
+     handleResize() {
+      this.zoom = window.devicePixelRatio;
+        setTimeout(() => {
+        console.log('this.zoom :>> ', this.zoom);
+        WebVideoCtrl.I_Resize(1135/(this.zoom/1.25), 590/(this.zoom/1.25));
+        // let divw = $('.divPlugin').width();
+        // let divh = $('.divPlugin').height();
+        // console.log("div宽:" + divw + "；div高:" + divh);
+        // WebVideoCtrl.I_Resize(divw, divh);
+      }, 1000);
+
+    },
     videoInitPlugin() {
       var iRet = WebVideoCtrl.I_CheckPluginInstall();
       if (iRet === -1) {
@@ -105,9 +121,9 @@ this.companyVideoData.forEach(obj => {
     //     // return;
     //   }
       setTimeout(() => {
-        WebVideoCtrl.I_Resize(4500, 2300);
+        WebVideoCtrl.I_Resize(1135/(this.zoom/1.25), 590/(this.zoom/1.25));
       }, 100);
-
+     window.addEventListener('resize', this.handleResize);
       this.clickLogin();
     },
     clickLogin() {

src/views/taskScreen.vue

@@ -201,7 +201,7 @@
                   ></el-image>
                 </div>
                 <div class="video_title">{{ videoPlayerName[0] }}</div>
-                  <!-- <hkv1  v-if="HKshow" :companyVideoData="VideoData"/> -->
+                  <hkv1  v-if="HK1show" :companyVideoData="VideoData" />
                 <!-- <div class="video_body1"><HKVideo :companyVideoData="mainVideoData" :videoType="1"></HKVideo></div> -->
                 <!-- <video  id="videoPlayerTask" class="video-js" muted></video> -->
           
@@ -260,7 +260,7 @@
                       <video id="videoPlayer_fourth" class="video-js" muted></video>
                     </div>
                   </div> -->      
-                   <hkv v-if="HKshow" :companyVideoData="VideoData"/>
+                    <hkv v-if="HKshow" :companyVideoData="VideoData" ref="hkv" @init="HK1Init"/>
                   <div class="center_no_data" v-if="false">
                     <el-image
                       style="width: 100px; height: 100px; margin-right: 6px"
@@ -340,6 +340,7 @@ export default {
     return {
 
       HKshow: false,
+      HK1show: false,
       systemFinshedValue:'',
       unitFinshedValue:'',
       wholeOutTaskId:'',
@@ -396,11 +397,16 @@ export default {
     };
   },
   methods:{
-   
+   HK1Init(){
+    this.HK1show = true;
+   },
     jumpToHistory() {
       // this.$refs.hk.$destroy();
       //     this.HKshow = false;
+
       this.$router.push("/situationScreen")
+      
+
     },
     // 表格样式修改
     changeHeaderCellStyle(row,column, rowIndex, columnIndex){
@@ -464,6 +470,8 @@ export default {
       if (success) {
         console.log("获取任务列表", data);
         this.taskList = data;
+         this.wholeOutTaskId = data[0].taskId;
+        this.processInstanceId = this.wholeOutTaskId;
         this.taskOPtion = data.map((item) => {
           return {
             label: item.taskName,
@@ -471,8 +479,7 @@ export default {
           };
         });
 
-        this.wholeOutTaskId = data[0].taskId;
-        this.processInstanceId = this.wholeOutTaskId;
+
         let param = {taskId: this.processInstanceId};
         const res1 = await request("/dt_screen/rest/v2/task/getDefId/", "post", param, false);
         this.processDefinitionId = res1.data;
@@ -492,6 +499,7 @@ export default {
       } else {
         this.$message.error(errorMessage);
       }
+    
     },
     // 切换任务
     async changeTask() {
@@ -805,22 +813,32 @@ export default {
     async initUrl(subjectName) {
       if (subjectName == '')
         return;
-      //     		if(this.playerList.length){
-      // 	this.playerList.forEach((item)=>{
-      // 		item.dispose()
-      // 	})
-      // }
+
       let params = {
-        subjectName: subjectName
+        subjectName: subjectName,
+        taskId: this.wholeOutTaskId
       };
-      const res = await request("/dt_screen/video/videos/getUnitUrl", "post", params, false);
+      this.currentSubject = subjectName;
+      const res = await request("/dt_screen/rest/v2/video/videos/getSubjectUrls", "post", params, false);
       let index = 0;
       this.dataSrc = ["", "", "", "", ""];
       this.videoPlayerName = ["监控名称", "监控名称", "监控名称", "监控名称", "监控名称"];
-      for (let item in res.data) {
-        this.dataSrc[index] = res.data[item].url;
-        this.videoPlayerName[index++] = res.data[item].name;
+      for (let item in res.data.data) {
+        this.dataSrc[index] = res.data.data[item].url;
+        this.videoPlayerName[index++] = res.data.data[item].name;
       }
+              setTimeout(() => {
+     
+    for(let index = 0; index < this.dataSrc.length;index++)
+    {
+      this.VideoData.push(this.resolveUrl(this.dataSrc[index]))
+    }
+    }, 1000);
+
+     setTimeout(() => {
+      this.HKshow = true;
+      
+    }, 800);
     },
     resolveUrl(url){
       if(url ==''){
@@ -841,72 +859,44 @@ export default {
     async changeVideo(subjectName) {
       if (subjectName == '')
         return;
-      // if(this.playerList.length){
-      // 	this.playerList.forEach((item)=>{
-      // 		item.dispose()
-      // 	})
-      // }
       if(subjectName != this.currentSubject) {
         this.currentSubject = subjectName;
-        let params = {};
-        const res = await request("/dt_screen/video/videos/videoClose", "get", params, false);
-        const { errorCode, errorMessage, success,data } = res.data;
-        if (success) {
-          setTimeout(() => {
-            let index = 0;
-            this.playerList.forEach((item) => {
-              item.src([{ type: "application/x-mpegURL", src: this.dataSrc[index++] }]);
-              item.load();
-              item.play();
-            });
-          }, 5000);
-        }
-
-        // const res = request("/dt_screen/video/videos/videoClose", "get", params, false);
-
-        // setTimeout(() => {
-        //   this.initUrl(subjectName);
-        // }, 1000);
-        // setTimeout(() => {
-        //   let index = 0;
-        //   this.playerList.forEach((item) => {
-        //     item.src([{ type: "application/x-mpegURL", src: this.dataSrc[index++] }]);
-        //     item.load();
-        //     item.play();
-        //   });
-        // }, 5000);
+          this.$refs.hkv.stopAll();
+          this.VideoData = [];
+         this.initUrl(subjectName);
       }
-
     }
   },
   mounted() {
 
 
-     this.initUrl('步坦协同课目');
-      setTimeout(() => {
      
-     console.log('this.dataSrc :>> ', this.dataSrc);
-    for(let index = 0; index < this.dataSrc.length;index++)
-    {
-      this.VideoData.push(this.resolveUrl(this.dataSrc[index]))
-    }
-
-    console.log('this.VideoData :>> ', this.VideoData);
-
-    }, 1000);
-
-     setTimeout(() => {
-     
-      this.HKshow = true;
-
-    }, 800);
     // 获取全部单位
     this.getAllUnits();
     // 获取全部系统
     this.getAllSystems();
     // 建立任务的weksocket链接
     this.initWebsoket();
-    
+    // setTimeout(() => {
+    // this.initUrl('步坦协同课目');
+    //   }, 1000);
+    //   setTimeout(() => {
+     
+    //  console.log('this.dataSrc :>> ', this.dataSrc);
+    // for(let index = 0; index < this.dataSrc.length;index++)
+    // {
+    //   this.VideoData.push(this.resolveUrl(this.dataSrc[index]))
+    // }
+
+    // console.log('this.VideoData :>> ', this.VideoData);
+
+    // }, 1000);
+
+    //  setTimeout(() => {
+     
+    //   this.HKshow = true;
+
+    // }, 800);
 
     // this.currentSubject = "步坦协同课目";
     //