[UPDATE] fix bug in *hkcamara

src/components/hk/monitorHK.vue

@@ -62,12 +62,12 @@ export default {
       this.zoom = window.devicePixelRatio;
       let h
       let w
-      if(document.body.clientWidth>=(document.body.clientHeight*2)){
-        h=document.body.clientHeight
-        w=document.body.clientHeight*(2200/1080)
-      }else{
-        h=document.body.clientWidth/(2200/1080)
-        w=document.body.clientWidth
+      if (document.body.clientWidth >= (document.body.clientHeight * (2200 / 1080))) {
+        h = document.body.clientHeight
+        w = document.body.clientHeight * (2200 / 1080)
+      } else {
+        h = document.body.clientWidth / (2200 / 1080)
+        w = document.body.clientWidth
       }
 
       setTimeout(() => {
@@ -88,11 +88,11 @@ export default {
     //插件初始化
     initPlugin() {
       // console.log("窗口信息", I_GetWindowStatus(0))
-     this.currentnum= this.num
+      this.currentnum = this.num
       console.log(1)
       console.log(this.num)
-      console.log("isInteger11",isInteger(this.num))
-      console.log("isInteger22",isInteger(parseInt(this.num)))
+      console.log("isInteger11", isInteger(this.num))
+      console.log("isInteger22", isInteger(parseInt(this.num)))
       this.iWndowType = Math.sqrt(this.num);
 
       // let videoNum = this.videoData.length;
@@ -125,16 +125,16 @@ export default {
         bDebugMode: true,
         cbSelWnd: function (xmlDoc) {//获取当前窗口
           that.g_iWndIndex = parseInt($(xmlDoc).find("SelectWnd").eq(0).text(), 10);
-          var szInfo = "当前选择的窗口编号：" +  that.g_iWndIndex;
-          this.dangqianchuangkou=that.g_iWndIndex
+          var szInfo = "当前选择的窗口编号：" + that.g_iWndIndex;
+          this.dangqianchuangkou = that.g_iWndIndex
           // console.log("窗口：",this.dangqianchuangkou)
           // this.$emit('change1', this.dangqianchuangkou);
           // console.log(szInfo)
         },
         cbDoubleClickWnd: function (iWndIndex, bFullScreen) {
-          var szInfo = "当前放大的窗口编号：" +  that.iWndIndex;
+          var szInfo = "当前放大的窗口编号：" + that.iWndIndex;
           if (!bFullScreen) {
-            szInfo = "当前还原的窗口编号：" +  that.iWndIndex;
+            szInfo = "当前还原的窗口编号：" + that.iWndIndex;
           }
           console.log(szInfo)
         },
@@ -146,17 +146,17 @@ export default {
       console.log("🚀 插入插件");
       let h
       let w
-      console.log("0: ",document.body.clientWidth ,document.body.clientHeight)
-      if(document.body.clientWidth>=(document.body.clientHeight*2)){
-        h=document.body.clientHeight
-        w=document.body.clientHeight*(2200/1080)
-      }else{
-        h=document.body.clientWidth/(2200/1080)
-        w=document.body.clientWidth
+      console.log("0: ", document.body.clientWidth, document.body.clientHeight)
+      if (document.body.clientWidth >= (document.body.clientHeight *(2200 / 1080))) {
+        h = document.body.clientHeight
+        w = document.body.clientHeight * (2200 / 1080)
+      } else {
+        h = document.body.clientWidth / (2200 / 1080)
+        w = document.body.clientWidth
       }
 
-      console.log("1: ",w ,h)
-      console.log("2: ", w/2.43, h/3.05)
+      console.log("1: ", w, h)
+      console.log("2: ", w / 2.43, h / 3.05)
 
       // 检查插件是否最新
       //   if (-1 == WebVideoCtrl.I_CheckPluginVersion()) {
@@ -165,13 +165,13 @@ export default {
       //   }
       WebVideoCtrl.I_InsertOBJECTPlugin("divPluginMonitorScreen").then(() => {
         WebVideoCtrl.I_Resize(
-            w/1.3,
-            h/1.23
+            w / 1.3,
+            h / 1.23
         ).then(() => {
           console.log("🚀 data >> ", that.companyVideoData);
           this.getLoginParams().then((res) => {
             console.log("🚀 解析完 >> ", res);
-            this.login(res);
+            // this.login(res);
           });
         })
         window.addEventListener("resize", that.handleResize);
@@ -230,8 +230,8 @@ export default {
           loginParam.Username,
           loginParam.Password,
           {
-            timeout:1000,
-            success: function(xmlDoc) {
+            timeout: 1000,
+            success: function (xmlDoc) {
               console.log("🚀 登录成功 >> ", loginParam.ip, loginParam.Port);
               that.doGetChannelInfo(loginParam.ip).then((channels) => {
                 var s = JSON.stringify(channels);
@@ -251,7 +251,32 @@ export default {
               console.log("login error");
             },
           }
-      );
+      ).catch(error => {
+        // 捕获错误并获取错误代码
+        const errorCode = error.errorCode;
+        console.log(errorCode);
+        if (errorCode == 2001) {//继续播放
+
+          that.doGetChannelInfo(loginParam.ip).then((channels) => {
+            var s = JSON.stringify(channels);
+
+            console.log("tezt", JSON.stringify(channels), channels.length, channels[0], channels[0].channelId, channels[0]["channelId"])
+            // console.log("🚀 通道列表 >> ", loginParam.ip, channels, channels.length, s[0]["channelName"]);
+            var channelId = that.getChannelIdByName(loginParam.channelName, channels);
+            console.log("🚀 获得id >> ", channelId);
+            if (channelId !== null) {
+              console.log("🚀 获得id >> ", channelId);
+              that.startPlay(loginParam.ip, channelId);
+            } else
+              console.log("🚀 通道号无效 >> ", loginParam.ip, loginParam.channelName);
+          })
+
+
+        }
+
+
+      });
+      ;
     },
     getChannelIdByName(channelName, channels) {
       const channel = channels.find((channel) => {
@@ -269,10 +294,10 @@ export default {
       return new Promise((resolve, reject) => {
         var getAnalogChannelInfo = new Promise((resolve, reject) => {
           WebVideoCtrl.I_GetAnalogChannelInfo(ip, {
-            success: function(xmlDoc) {
+            success: function (xmlDoc) {
               let channels = [];
               var oChannels = $(xmlDoc).find("VideoInputChannel");
-              $.each(oChannels, function(i) {
+              $.each(oChannels, function (i) {
                 var id = $(this).find("id").eq(0).text(),
                     name = $(this).find("name").eq(0).text();
                 if ("" == name) {
@@ -286,17 +311,17 @@ export default {
               console.log("🚀 获取模拟通道成功 >> ", channels);
               resolve(channels);
             },
-            error: function(oError) {
+            error: function (oError) {
               console.log("🚀 获取模拟通道失败 >> ", ip, oError.errorCode, oError.errorMsg);
             },
           })
         });
         var getDigitalChannelInfo = new Promise((resolve, reject) => {
           WebVideoCtrl.I_GetDigitalChannelInfo(ip, {
-            success: function(xmlDoc) {
+            success: function (xmlDoc) {
               let channels = [];
               var oChannels = $(xmlDoc).find("InputProxyChannelStatus");
-              $.each(oChannels, function(i) {
+              $.each(oChannels, function (i) {
                 var id = $(this).find("id").eq(0).text(),
                     name = $(this).find("name").eq(0).text(),
                     online = $(this).find("online").eq(0).text();
@@ -314,7 +339,7 @@ export default {
               console.log("🚀 获取数字通道成功 >> ", channels);
               resolve(channels);
             },
-            error: function(oError) {
+            error: function (oError) {
               console.log("🚀 获取数字通道失败 >> ", ip, oError.errorCode, oError.errorMsg);
               resolve([]);
             }
@@ -322,10 +347,10 @@ export default {
         });
         var getZeroChannelInfo = new Promise((resolve, reject) => {
           WebVideoCtrl.I_GetZeroChannelInfo(ip, {
-            success: function(xmlDoc) {
+            success: function (xmlDoc) {
               let channels = [];
               var oChannels = $(xmlDoc).find("ZeroVideoChannel");
-              $.each(oChannels, function(i) {
+              $.each(oChannels, function (i) {
                 var id = $(this).find("id").eq(0).text(),
                     name = $(this).find("name").eq(0).text();
                 if ("" == name) {
@@ -341,7 +366,7 @@ export default {
               console.log("🚀 获取零通道成功 >> ", channels);
               resolve(channels);
             },
-            error: function(oError) {
+            error: function (oError) {
               console.log("🚀 获取零通道失败 >> ", ip, oError.errorCode, oError.errorMsg);
               resolve([]);
             }
@@ -369,10 +394,16 @@ export default {
       WebVideoCtrl.I_StartRealPlay(ip, {
         iStreamType: 1,
         iChannelID: channelId,
-        iWndIndex: 0,
+        iWndIndex: this.dangqianchuangkou,
       }).then(() => {
         this.$emit("init", true);
-        console.log("🚀 采集卡麒麟 >> ", );
+        console.log("🚀 采集卡麒麟 >> ",);
+      }).catch(error => {
+        // 捕获错误并获取错误代码
+        const errorCode = error.errorCode;
+        console.log("errorCode",errorCode);
+        if (errorCode == 1000) {//继续播放
+        }
       })
     },
     clickLogin() {
@@ -413,7 +444,7 @@ export default {
               success: function (xmlDoc) {
                 console.log("开始预览"); //不能删除
                 let oChannels = that.getChannelInfo();
-                that.initPlay(Data, index,oChannels);
+                that.initPlay(Data, index, oChannels);
               },
               error: function () {
                 console.log("login error");
@@ -463,7 +494,7 @@ export default {
       });
     },
     //初始化视频，为了让用户进来就可以看到视频播放
-    initPlay(data, index,oChannels) {
+    initPlay(data, index, oChannels) {
       let szIP = data.ip; //ip地址
       //循环16次是因为插件分屏最大为4x4（可以根据情况而定）
 
@@ -489,6 +520,48 @@ export default {
         iChannelID: iChannelID,
       });
     },
+    stopPlayVideo() {
+      WebVideoCtrl.I_Stop({
+        iWndIndex: this.dangqianchuangkou,
+      });
+    },
+    stopallPlayVideo(a) {
+      // parseInt(myString)
+      console.log("里边的a为：",a)
+      a.forEach(function(element) {
+        console.log(element);
+        console.log(parseInt(element));
+        WebVideoCtrl.I_Stop({
+          iWndIndex: parseInt(element),
+        });
+      });
+
+
+      // WebVideoCtrl.I_Stop({
+      //   iWndIndex: this.dangqianchuangkou,
+      // });
+      // this.I_StopAllPlay = function () {
+      //   let oPromise = new Promise(async function (resolve, reject) {
+      //     m_pluginOBJECT.JS_StopRealPlayAll().then(() => {
+      //       m_wndSet.length = 0;
+      //       resolve()
+      //     }, () => {
+      //       reject(_oUnKnownError)
+      //     })
+      //   });
+      //   return oPromise
+      // };
+
+    },
+
+
+
+    pausePlayVideo(){
+      WebVideoCtrl.I_Pause( {
+        // iWndIndex: this.dangqianchuangkou,
+        iWndIndex: [0,1],
+      });
+    }
   },
   //因为项目中需求，总公司要查看所有子公司的监控，所以做了个监听来切换查看各个子公司的监控
   watch: {

src/views/monitorScreen.vue

@@ -51,9 +51,12 @@
               >
                 <el-table-column label="序号" header-align="center" align="center" type="index" width="55px" :index="getTableIndex_bigcardData" />
                 <el-table-column label="名称" align="center" prop="name" />
+                <el-table-column label="播放窗口" align="center" prop="windowList" />
                 <el-table-column label="操作" align="center">
                   <template slot-scope="scope">
-                    <el-button class="table-btn primary" size="mini" type="text" @click="onTiaozhuan_bigcardData(scope.row)">播放</el-button>
+                    <el-button class="table-btn primary" size="mini" type="text" @click="begin_bigcardData(scope)">播放</el-button>
+<!--                    <el-button class="table-btn primary" size="mini" type="text" @click="stopone_bigcardData(scope)">暂停当前</el-button>-->
+                    <el-button class="table-btn primary" size="mini" type="text" @click="stopall_bigcardData(scope)">暂停所有</el-button>
                   </template>
                 </el-table-column>
               </el-table>
@@ -83,9 +86,12 @@
                 >
                   <el-table-column label="序号" header-align="center" align="center" type="index" width="55px" :index="getTableIndex_bigcamaraData" />
                   <el-table-column label="名称" align="center" prop="name" />
+                  <el-table-column label="播放窗口" align="center" prop="windowList" />
                   <el-table-column label="操作" align="center">
                     <template slot-scope="scope">
-                      <el-button class="table-btn primary" size="mini" type="text" @click="onTiaozhuan_bigcamaraData(scope.row)">播放</el-button>
+                      <el-button class="table-btn primary" size="mini" type="text" @click="begin_bigcamaraData(scope)">播放</el-button>
+<!--                      <el-button class="table-btn primary" size="mini" type="text" @click="stopone_bigcamaraData(scope)">暂停当前</el-button>-->
+                      <el-button class="table-btn primary" size="mini" type="text" @click="stopall_bigcamaraData(scope)">暂停所有</el-button>
                     </template>
                   </el-table-column>
                 </el-table>
@@ -174,6 +180,7 @@ export default {
         ip: "172.3.11.115",
         name: "11",
         isbofang:0,
+        windowList:[]
       },
       issbofang:0,
       dataSrc:'https://cctvwbndbd.a.bdydns.com/cctvwbnd/cctv1_2/index.m3u8?BR=single',
@@ -186,7 +193,9 @@ export default {
       bigData: {
         // header: ['0','1', '2', '3','4', '5', '6','7'],
         // waitTime:1500,
-        data: [],
+        data: [{
+          windowList:[]
+        }],
         length:0,
         currentPage:1,
         pageSize:3,
@@ -196,21 +205,23 @@ export default {
       bigcamaraData:{
         // header: ['0','1', '2', '3','4', '5', '6','7'],
         // waitTime:1500,
-        data: [],
+        data: [{
+          windowList:[]
+        }],
         length:0,
         currentPage:1,
-        pageSize:3,
-
+        pageSize:5,
         paged:true,
       },
       bigcardData:{
         // header: ['0','1', '2', '3','4', '5', '6','7'],
         // waitTime:1500,
-        data: [],
+        data: [{
+          windowList:[]
+        }],
         length:0,
         currentPage:1,
-        pageSize:3,
-
+        pageSize:5,
         paged:true,
       },
 
@@ -275,46 +286,102 @@ export default {
       console.log("播放2",this.bigcamaraData)
       this.bigData=this.bigcamaraData
     },
-    onTiaozhuan_bigcamaraData (a) {
-      // console.log("a",a)
-
-      this.bofangyuan.Password= a.Password
-      this.bofangyuan.Port=a.Port
-      this.bofangyuan.Username=a.Username
-      this.bofangyuan.channelName=a.channelName
-      this.bofangyuan.ip=a.ip
-      this.bofangyuan.name=a.name
-
-      this.bofangyuan.window=this.selectWindow
-      this.bofangyuan.isbofang=1
-      this.issbofang=1
-      console.log("this.bofangyuan",this.bofangyuan)
-      // 定义一个空数组对象
-      let myArray = [];
-      // 将对象添加到数组中
-      myArray.push(this.bofangyuan);
-      console.log(myArray);
-      this.$refs.hkbigCamara.login(myArray)
+    begin_bigcamaraData (a) {
+      if(this.bigcamaraData.data[a.$index].windowList.length<6) {
+        console.log("a", a)
+        console.log("a.index", a.$index)
+        console.log(" this.bigcamaraData", this.bigcamaraData)
+
+        this.bofangyuan.Password = a.row.Password
+        this.bofangyuan.Port = a.row.Port
+        this.bofangyuan.Username = a.row.Username
+        this.bofangyuan.channelName = a.row.channelName
+        this.bofangyuan.ip = a.row.ip
+        this.bofangyuan.name = a.row.name
+
+        this.bofangyuan.window = this.selectWindow
+        this.bofangyuan.isbofang = 1
+        this.issbofang = 1
+
+        console.log("this.bigcamaraData.data[a.$index]", this.bigcamaraData.data[a.$index])
+        console.log("this.bofangyuan", this.bofangyuan)
+        // 定义一个空数组对象
+        let myArray = [];
+        // 将对象添加到数组中
+        myArray.push(this.bofangyuan);
+        console.log(myArray);
+        this.$refs.hkbigCamara.login(myArray)
+        // .catch(error => {
+        //       // 捕获错误并获取错误代码
+        //       const errorCode = error.errorCode;
+        //       console.log(errorCode);
+        //       if (errorCode == 2001) {//继续播放
+
+        // this.bigcamaraData.data[a.$index].windowList.push(' ')
+        this.bigcamaraData.data[a.$index].windowList.push(this.selectWindow.toString())
+        this.bigcamaraData.data[a.$index].windowList = [...new Set(this.bigcamaraData.data[a.$index].windowList)]
+        this.bigcamaraData.data[a.$index].windowList.sort((a, b) => a - b);
+      }
+
+    },
+    stopone_bigcamaraData(a){
+      this.$refs.hkbigCamara.stopPlayVideo()
+      this.bigcamaraData.data[a.$index].windowList = this.bigcamaraData.data[a.$index].windowList.filter((element) => element !== this.selectWindow.toString());
+    },
+    stopall_bigcamaraData(a){
+      console.log("windowList",this.bigcamaraData.data[a.$index].windowList)
+      this.$refs.hkbigCamara.stopallPlayVideo(this.bigcamaraData.data[a.$index].windowList)
+      this.bigcamaraData.data[a.$index].windowList.splice(0, this.bigcamaraData.data[a.$index].windowList.length)
+    },
+    stopone_bigcardData(a){
+      this.$refs.hkbigCamara.stopPlayVideo()
+      this.bigcardData.data[a.$index].windowList = this.bigcardData.data[a.$index].windowList.filter((element) => element !== this.selectWindow.toString());
     },
-    onTiaozhuan_bigcardData (a) {
-      // console.log("a",a)
-
-      this.bofangyuan.Password= a.Password
-      this.bofangyuan.Port=a.Port
-      this.bofangyuan.Username=a.Username
-      this.bofangyuan.channelName=a.channelName
-      this.bofangyuan.ip=a.ip
-      this.bofangyuan.name=a.name
-      this.bofangyuan.window=this.selectWindow
-      this.bofangyuan.isbofang=1
-      this.issbofang=1
-      console.log("this.bofangyuan",this.bofangyuan)
-      // 定义一个空数组对象
-      let myArray = [];
-      // 将对象添加到数组中
-      myArray.push(this.bofangyuan);
-      console.log(myArray);
-      this.$refs.hkbigCamara.login(myArray)
+    stopall_bigcardData(a){
+      console.log("windowList",this.bigcardData.data[a.$index].windowList)
+      this.$refs.hkbigCamara.stopallPlayVideo(this.bigcardData.data[a.$index].windowList)
+      this.bigcardData.data[a.$index].windowList.splice(0, this.bigcardData.data[a.$index].windowList.length)
+    },
+    begin_bigcardData (a) {
+      if(this.bigcardData.data[a.$index].windowList.length<6){
+        console.log("a",a)
+        console.log("a.index",a.$index)
+        console.log(" this.bigcardData", this.bigcardData)
+
+        this.bofangyuan.Password= a.row.Password
+        this.bofangyuan.Port=a.row.Port
+        this.bofangyuan.Username=a.row.Username
+        this.bofangyuan.channelName=a.row.channelName
+        this.bofangyuan.ip=a.row.ip
+        this.bofangyuan.name=a.row.name
+        this.bofangyuan.window=this.selectWindow
+        this.bofangyuan.isbofang=1
+        this.issbofang=1
+
+        console.log("this.bigcardData.data[a.$index]",this.bigcardData.data[a.$index])
+        console.log("this.bofangyuan",this.bofangyuan)
+
+        // 定义一个空数组对象
+        let myArray = [];
+        // 将对象添加到数组中
+        myArray.push(this.bofangyuan);
+        console.log(myArray);
+        this.$refs.hkbigCamara.login(myArray)
+
+
+        // console.log("播放报错",this.$refs.hkbigCamara.login(myArray)[Symbol.toStringTag]);
+
+
+
+
+
+        // this.bigcardData.data[a.$index].windowList.push(' ')
+        this.bigcardData.data[a.$index].windowList.push(this.selectWindow.toString())
+        this.bigcardData.data[a.$index].windowList = [...new Set(this.bigcardData.data[a.$index].windowList)]
+        this.bigcardData.data[a.$index].windowList.sort((a, b) => a - b);
+      }
+
+
     },
     /**
      * 表格排序字段变化
@@ -592,7 +659,8 @@ export default {
           Port: res.data.data[item].port,
           Username: res.data.data[item].username,
           Password: res.data.data[item].password,
-          channelName: res.data.data[item].channelName
+          channelName: res.data.data[item].channelName,
+          windowList:[]
         };
         this.bigcamaraData.data.push(data);
         this.bigData.data.push(data);
@@ -627,7 +695,8 @@ export default {
           Port: res1.data.data[item].port,
           Username: res1.data.data[item].username,
           Password: res1.data.data[item].password,
-          channelName: res1.data.data[item].channelName
+          channelName: res1.data.data[item].channelName,
+          windowList:[]
         };
         this.bigcardData.data.push(data);
         this.bigData.data.push(data);