Merge remote-tracking branch 'origin/master'

# Conflicts:
#	src/components/hk/hkv.vue

src/components/hk/hkCamara.vue

@@ -1,4 +1,4 @@
-<template id="divPlugin0">
+<template>
   <div id="divPlugin" class="video-player">
     <div id="divPlugin1" class="divPlugin"></div>
 
@@ -61,16 +61,16 @@ export default {
       let w
       if(document.body.clientWidth>=(document.body.clientHeight*2)){
         h=document.body.clientHeight
-        w=document.body.clientHeight*2
+        w=document.body.clientHeight*(2200/1080)
       }else{
-        h=document.body.clientWidth/2
+        h=document.body.clientWidth/(2200/1080)
         w=document.body.clientWidth
       }
 
       setTimeout(() => {
         WebVideoCtrl.I_Resize(
-          w/2.42,
-          h/3.2
+          w/2.43,
+          h/3.05
         );
       }, 1000);
     },
@@ -101,9 +101,9 @@ export default {
       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*2
+        w=document.body.clientHeight*(2200/1080)
       }else{
-        h=document.body.clientWidth/2
+        h=document.body.clientWidth/(2200/1080)
         w=document.body.clientWidth
       }
 
@@ -147,14 +147,14 @@ export default {
       // h1=divElement.clientHeight
 
       console.log("1: ",w ,h)
-      console.log("1: ", w/2.42, h/3.2)
+      console.log("1: ", w/2.43, h/3.05)
 
       // console.log("2: ",w1 ,h1)
       // console.log("2: ",w1*0.8,h1*0.7)
       WebVideoCtrl.I_InsertOBJECTPlugin("divPlugin1").then(() => {
         WebVideoCtrl.I_Resize(
-            w/2.42,
-            h/3.2
+            w/2.43,
+            h/3.05
         ).then(() => {
           console.log("🚀 data >> ", that.companyVideoData);
           this.getLoginParams().then((res) => {

src/components/hk/hkv.vue

@@ -52,11 +52,22 @@ export default {
   methods: {
     handleResize() {
       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
+      }
       setTimeout(() => {
         console.log("this.zoom :>> ", this.zoom);
         WebVideoCtrl.I_Resize(
-          380 / (this.zoom / 1.25),
-          260 / (this.zoom / 1.25)
+          // 380 / (this.zoom / 1.25),
+          // 260 / (this.zoom / 1.25)
+            w/3.9,
+            h/2.8
         );
       }, 1000);
     },
@@ -95,10 +106,22 @@ export default {
       });
       console.log("🚀 初始化插件完成 >> ", that.g_iWndIndex);
       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
+      }
       WebVideoCtrl.I_InsertOBJECTPlugin("divPlugin2").then(() => {
         WebVideoCtrl.I_Resize(
-          380 / (this.zoom / 1.25),
-          260 / (this.zoom / 1.25)
+          // 380 / (this.zoom / 1.25),
+          // 260 / (this.zoom / 1.25)
+        w/3.9,
+        h/2.8
         ).then(() => {
           console.log("🚀 data >> ", that.companyVideoData);
           this.getLoginParams().then((res) => {
@@ -430,6 +453,7 @@ export default {
       });
     },
   },
+  //因为项目中需求，总公司要查看所有子公司的监控，所以做了个监听来切换查看各个子公司的监控
   watch: {
     companyVideoData: {
       handler(val, oldVal) {
@@ -450,6 +474,20 @@ export default {
             console.log("🚀 解析完 >> ", res);
             this.login(res);
           });
+          // for (let i = 0; i < this.wndNum; i++) {
+          //   WebVideoCtrl.I_Stop(i);
+          //   console.log("🚀 关闭 >> ", i);
+          //   WebVideoCtrl.I_StopAllPlay ()
+          // }
+          // WebVideoCtrl.I_StopAllPlay().then(() => {
+          //   console.log("🚀 采集卡全关 >> ", );
+          //   this.getLoginParams().then((res) => {
+          //     console.log("🚀 解析完 >> ", res);
+          //     this.login(res);
+          //   });
+          // })
+
+          //
         }
       },
     },
@@ -490,21 +528,6 @@ export default {
   right: 0;
   bottom: 0;
 }
-.divPlugin {
-  width: 100%;
-  height: 100%;
-  color: red;
-  /* display: flex; */
-  justify-content: center;
-  align-items: center;
-  font-size: 18px;
-  position: fixed;
-  /* top: 680px; */
-  /* top: 0px; */
-  /* right: 0px; */
-
-  overflow: hidden;
-}
 .down {
   width: 100%;
   height: 100%;

src/components/hk/monitorHK.vue

@@ -1,21 +1,28 @@
-<template>
-  <div class="video-player">
-    <div id="divPlugin2" class="divPlugin"></div>
-  </div>
+<template class="divPlugin0">
+<!--  <div id="divPlugin" class="video-player">-->
+    <div id="divPluginMonitorScreen" class="divPlugin"></div>
+<!--  </div>-->
 </template>
 <script>
+
+import {isInteger} from "lodash";
 export default {
   name: "monitorHK",
-  props: {
-    //从父组件传来的数据，IP、用户名、密码、端口号
+  props: {//从父组件传来的数据，IP、用户名、密码、端口号
     companyVideoData: {
       type: Array,
     },
+    num:Number,
+    bofang:Number,
     //分屏
     videoType: Number,
+    chooseData:{},
+    chooseWindow:Number,
+    dangqianchuangkou:Number,
   },
   data() {
     return {
+      currentnum:0,
       plugin: true,
       iWidth: "100%",
       iHeight: "100%",
@@ -32,42 +39,43 @@ export default {
     };
   },
   created() {},
-  mounted() {
-    // const uniqueArr = [];
-    // const uniqueSet = new Set();
-    //
-    // this.companyVideoData.forEach(obj => {
-    //   if (obj !== undefined&&obj !== null) {
-    //     const key = JSON.stringify(obj);
-    //     if (!uniqueSet.has(key)) {
-    //       uniqueSet.add(key);
-    //       uniqueArr.push(obj);
-    //     }
-    //   }
-    // });
-    // this.videoData = uniqueArr;
-    //
-    // console.log('this.videoData :>> ', this.videoData);
-    this.videoInitPlugin();
-  },
   beforeUnmount() {
     window.removeEventListener('resize', this.handleResize);
   },
+  mounted() {
+    // if(this.num!=this.currentnum){
+    //   console.log("00000000: ",this.num,this.currentnum)
+    //   this.videoInitPlugin();
+    // }
+    //浏览器界面大小
+    console.log("1: ",document.body.clientWidth ,document.body.clientHeight)
+    console.log("2: ",window.screen.height , window.devicePixelRatio,window.screen.height * window.devicePixelRatio)
+    console.log("3: ",window.screen.width , window.devicePixelRatio,window.screen.width * window.devicePixelRatio)
+
+    this.videoInitPlugin();
+  },
   destroyed() {
     this.$router.go(0);
   },
   methods: {
     handleResize() {
       this.zoom = window.devicePixelRatio;
+      let h
+      let w
+      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(() => {
-        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);
+        WebVideoCtrl.I_Resize(
+            w/1.3,
+            h/1.23
+        );
       }, 1000);
-
     },
     videoInitPlugin() {
       var iRet = WebVideoCtrl.I_CheckPluginInstall();
@@ -79,76 +87,369 @@ export default {
     },
     //插件初始化
     initPlugin() {
-      let videoNum = this.videoData.length;
-      if(videoNum == 0){
-        return;
-      }
-      else if(videoNum ==1){
-        this.iWndowType = 1;
-      }
-      else if(videoNum>1&&videoNum<5){
-        this.iWndowType = 2;
-      }
-      else if(videoNum>=5&&videoNum<10){
-        this.iWndowType = 3;
-      }
-      else if(videoNum>=10&&videoNum<=16){
-        this.iWndowType = 4;
-      }
-      else{
-        return;
-      }
-      console.log('videoNum :>> ', videoNum);
+      // console.log("窗口信息", I_GetWindowStatus(0))
+      this.currentnum = this.num
+      console.log(1)
+      console.log(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;
+      // if(videoNum == 0){
+      //   return;
+      // }
+      // else if(videoNum ==1){
+      //   this.iWndowType = 1;
+      // }
+      // else if(videoNum>1&&videoNum<5){
+      //   this.iWndowType = 2;
+      // }
+      // else if(videoNum>=5&&videoNum<10){
+      //   this.iWndowType = 3;
+      // }
+      // else if(videoNum>=10&&videoNum<=16){
+      //   this.iWndowType = 4;
+      // }
+      // else{
+      //   return;
+      // }
+      // console.log('videoNum :>> ', videoNum);
       console.log('this.iWndowType :>> ', this.iWndowType);
       var that = this;
+      console.log("🚀 开始初始化插件 >> ", that.g_iWndIndex);
       WebVideoCtrl.I_InitPlugin({
         bWndFull: true, //是否支持单窗口双击全屏，默I_CheckPluginInstall
         iWndowType: this.iWndowType,
 
         bDebugMode: true,
-        cbSelWnd: function (xmlDoc) {},
+        cbSelWnd: function (xmlDoc) {//获取当前窗口
+          that.g_iWndIndex = parseInt($(xmlDoc).find("SelectWnd").eq(0).text(), 10);
+          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;
+          if (!bFullScreen) {
+            szInfo = "当前还原的窗口编号：" + that.iWndIndex;
+          }
+          console.log(szInfo)
+        },
       });
-      WebVideoCtrl.I_InsertOBJECTPlugin("divPlugin2");
+      // console.log("窗口change：",this.dangqianchuangkou)
+      // this.$emit('change', this.dangqianchuangkou);
+      // this.$emit('child',this.msg2)
+      console.log("🚀 初始化插件完成 >> ", that.g_iWndIndex);
+      console.log("🚀 插入插件");
+      let h
+      let w
+      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)
 
       // 检查插件是否最新
       //   if (-1 == WebVideoCtrl.I_CheckPluginVersion()) {
       //     alert("检测到新的插件版本，请双击WebComponents.exe插件，进行升级！");
       //     // return;
       //   }
-      setTimeout(() => {
-        WebVideoCtrl.I_Resize(1135/(this.zoom/1.25), 590/(this.zoom/1.25));
-      }, 100);
-      window.addEventListener('resize', this.handleResize);
-      this.clickLogin();
-    },
-    clickLogin() {
+      WebVideoCtrl.I_InsertOBJECTPlugin("divPluginMonitorScreen").then(() => {
+        WebVideoCtrl.I_Resize(
+            w / 1.3,
+            h / 1.23
+        ).then(() => {
+          console.log("🚀 data >> ", that.companyVideoData);
+          this.getLoginParams().then((res) => {
+            console.log("🚀 解析完 >> ", res);
+            // this.login(res);
+          });
+        })
+        window.addEventListener("resize", that.handleResize);
+      });
+      console.log("🚀 插入完成");
+
+      // WebVideoCtrl.I_InsertOBJECTPlugin("divPluginMonitorScreen");
 
-      for(let index = 0;index < this.videoData.length;index++){
-        this.singleLogin(this.videoData[index],index)
+      // setTimeout(() => {
+      //   WebVideoCtrl.I_Resize(
+      //
+      //       // 1135/(this.zoom/1.25),
+      //       // 590/(this.zoom/1.25)
+      //       // w/2.43,
+      //       // h/3.05
+      //       w/5,
+      //       h/6
+      //
+      //   );
+      // }, 100);
+      // window.addEventListener('resize', this.handleResize);
+      // this.clickLogin();
+    },
+    async getLoginParams() {
+      var loginParams = {};
+      var that = this;
+      for (const item of that.companyVideoData) {
+        if (item !== undefined) {
+          let loginParam = {}
+          const key = JSON.stringify(item);
+          if (!loginParams.hasOwnProperty(key)) {
+            loginParams[key] = item;
+          }
+        }
       }
+      return loginParams;
     },
-    singleLogin(Data,index){
-      setTimeout(() => {
-
-        var that = this;
-        WebVideoCtrl.I_Login(
-          Data.ip,
+    async login(loginParams) {
+      var that = this;
+      // for (const loginParam of Object.values(loginParams)) {
+      //   await that.doLogin(loginParam)
+      // }
+      await Promise.all(
+          Object.values(loginParams).map(async (loginParam) => {
+            await that.doLogin(loginParam);
+          })
+      )
+    },
+    async doLogin(loginParam) {
+      console.log("🚀 loginPara >> ", loginParam);
+      var that = this;
+      WebVideoCtrl.I_Login(
+          loginParam.ip,
           1,
-          Data.Port,
-          Data.Username,
-          Data.Password,
+          loginParam.Port,
+          loginParam.Username,
+          loginParam.Password,
           {
             timeout: 1000,
-            async: false,
             success: function (xmlDoc) {
-              console.log("开始预览"); //不能删除
-              let oChannels = that.getChannelInfo();
-              that.initPlay(Data,index,oChannels);
+              console.log("🚀 登录成功 >> ", loginParam.ip, loginParam.Port);
+              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);
+              })
             },
             error: function () {
               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) => {
+        if (channel["channelName"] == channelName) {
+          return channel;
+        }
+      });
+      if (channel) {
+        return channel.channelId;
+      } else {
+        return null;
+      }
+    },
+    doGetChannelInfo(ip) {
+      return new Promise((resolve, reject) => {
+        var getAnalogChannelInfo = new Promise((resolve, reject) => {
+          WebVideoCtrl.I_GetAnalogChannelInfo(ip, {
+            success: function (xmlDoc) {
+              let channels = [];
+              var oChannels = $(xmlDoc).find("VideoInputChannel");
+              $.each(oChannels, function (i) {
+                var id = $(this).find("id").eq(0).text(),
+                    name = $(this).find("name").eq(0).text();
+                if ("" == name) {
+                  name = "Camera " + (i < 9 ? "0" + (i + 1) : (i + 1));
+                }
+                channels.push({
+                  channelId: id,
+                  channelName: name,
+                })
+              });
+              console.log("🚀 获取模拟通道成功 >> ", channels);
+              resolve(channels);
+            },
+            error: function (oError) {
+              console.log("🚀 获取模拟通道失败 >> ", ip, oError.errorCode, oError.errorMsg);
+            },
+          })
+        });
+        var getDigitalChannelInfo = new Promise((resolve, reject) => {
+          WebVideoCtrl.I_GetDigitalChannelInfo(ip, {
+            success: function (xmlDoc) {
+              let channels = [];
+              var oChannels = $(xmlDoc).find("InputProxyChannelStatus");
+              $.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();
+                if ("false" == online) {// 过滤禁用的数字通道
+                  return true;
+                }
+                if ("" == name) {
+                  name = "IPCamera " + (i < 9 ? "0" + (i + 1) : (i + 1));
+                }
+                channels.push({
+                  channelId: id,
+                  channelName: name,
+                })
+              });
+              console.log("🚀 获取数字通道成功 >> ", channels);
+              resolve(channels);
+            },
+            error: function (oError) {
+              console.log("🚀 获取数字通道失败 >> ", ip, oError.errorCode, oError.errorMsg);
+              resolve([]);
+            }
+          });
+        });
+        var getZeroChannelInfo = new Promise((resolve, reject) => {
+          WebVideoCtrl.I_GetZeroChannelInfo(ip, {
+            success: function (xmlDoc) {
+              let channels = [];
+              var oChannels = $(xmlDoc).find("ZeroVideoChannel");
+              $.each(oChannels, function (i) {
+                var id = $(this).find("id").eq(0).text(),
+                    name = $(this).find("name").eq(0).text();
+                if ("" == name) {
+                  name = "Zero Channel " + (i < 9 ? "0" + (i + 1) : (i + 1));
+                }
+                if ("true" == $(this).find("enabled").eq(0).text()) {// 过滤禁用的零通道
+                  channels.push({
+                    channelId: id,
+                    channelName: name,
+                  })
+                }
+              });
+              console.log("🚀 获取零通道成功 >> ", channels);
+              resolve(channels);
+            },
+            error: function (oError) {
+              console.log("🚀 获取零通道失败 >> ", ip, oError.errorCode, oError.errorMsg);
+              resolve([]);
+            }
+          });
+        });
+        Promise.allSettled([getAnalogChannelInfo, getDigitalChannelInfo, getZeroChannelInfo])
+            .then((resList) => {
+              console.log("🚀 res >> ", resList);
+              const fulfilledValues = resList.reduce((list, result) => {
+                if (result.status === 'fulfilled' && result.value.length !== 0) {
+                  const value = result.value;
+                  list.push(value);
+                }
+                return list;
+              }, []);
+              resolve(fulfilledValues.flat());
+            })
+            .catch((error) => {
+              console.log("🚀 获取通道失败 >> ", ip);
+            });
+      })
+    },
+    startPlay(ip, channelId) {
+      console.log("🚀 开始播放 >> ", ip, channelId);
+      WebVideoCtrl.I_StartRealPlay(ip, {
+        iStreamType: 1,
+        iChannelID: channelId,
+        iWndIndex: this.dangqianchuangkou,
+      }).then(() => {
+        this.$emit("init", true);
+        console.log("🚀 采集卡麒麟 >> ",);
+      }).catch(error => {
+        // 捕获错误并获取错误代码
+        const errorCode = error.errorCode;
+        console.log("errorCode",errorCode);
+        if (errorCode == 1000) {//继续播放
+        }
+      })
+    },
+    clickLogin() {
+      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);
+        }
+
+        // 完成登录操作后调用resolve
+        resolve();
+      });
+    },
+    singleLogin(Data, index) {
+      setTimeout(() => {
+        var that = this;
+        WebVideoCtrl.I_Login(
+            Data.ip,
+            1,
+            Data.Port,
+            Data.Username,
+            Data.Password,
+            {
+              timeout: 1000,
+              async: false,
+              success: function (xmlDoc) {
+                console.log("开始预览"); //不能删除
+                let oChannels = that.getChannelInfo();
+                that.initPlay(Data, index, oChannels);
+              },
+              error: function () {
+                console.log("login error");
+              },
+            }
         );
       }, 100);
     },
@@ -193,16 +494,15 @@ export default {
       });
     },
     //初始化视频，为了让用户进来就可以看到视频播放
-    initPlay(data,index,oChannels) {
+    initPlay(data, index, oChannels) {
       let szIP = data.ip; //ip地址
       //循环16次是因为插件分屏最大为4x4（可以根据情况而定）
 
       WebVideoCtrl.I_StartRealPlay(szIP, {
         iStreamType: 1,
-        iChannelID: oChannels.id,
+        iChannelID: oChannels.id,//按格式修改
         iWndIndex: index,
       });
-
     },
     // 点击查看具体哪个监控
     startRealPlay(oChannels) {
@@ -220,22 +520,133 @@ 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: {
+
+    currentnum:{
+      handler(val, oldval) {
+        console.log("watchnum11:",this.currentnum, this.num)
+        console.log("watchnum12:",val, oldval)
+      }
+    },
+
+    bofang: {
+      handler(val, oldval) {
+        console.log("chooseData666:", this.chooseData)
+        console.log("chooseData6662:", val, oldval)
+      },
+    },
+    chooseData: {
+      handler(val, oldval) {
+        console.log("chooseData666:", this.chooseData)
+        console.log("chooseData6662:", val, oldval)
+      },
+    },
+
+    num:{
+      handler(val, oldval) {
+        console.log("watchnum21:", this.currentnum, this.num)
+        console.log("watchnum22:", val, oldval)
+        // this.initPlugin()
+        WebVideoCtrl.I_ChangeWndNum(Math.sqrt(this.num))
+
+        let that = this;
+        WebVideoCtrl.I_InitPlugin({
+          bWndFull: true, //是否支持单窗口双击全屏，默I_CheckPluginInstall
+          iWndowType: this.iWndowType,
+          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
+            that.$emit('change-window', this.dangqianchuangkou);
+            // console.log(szInfo)
+          },
+        })
+
+      }
+
+    },
     companyVideoData: {
       handler(val, oldval) {
-        if (oldval) {
-          for (let i = 0; i < 16; i++) {
-            WebVideoCtrl.I_Stop(i); //停止正在播放的页面
-          }
-          this.$emit("func", "");
-          WebVideoCtrl.I_Logout(oldval.ip);
-          this.clickLogin(this.companyVideoData);
+        console.log("watchnum121:",this.currentnum, this.num)
+        console.log("watchnum122:",val, oldval)
+        console.log("watchnum123:",val.length, oldval)
+
+        if(val.length==1){
+          this.num=1
+          // this.$emit('button-updated', this.num);
+          WebVideoCtrl.I_ChangeWndNum(1)
+        }else if(val.length<=4){
+          this.num=4
+          WebVideoCtrl.I_ChangeWndNum(2)
+        }else if(val.length<=9){
+          this.num=9
+          WebVideoCtrl.I_ChangeWndNum(3)
+        }else if(val.length<=16){
+          this.num=16
+          WebVideoCtrl.I_ChangeWndNum(4)
+        }else{
+          this.num=16
+          WebVideoCtrl.I_ChangeWndNum(4)
         }
+        this.$emit('button-value', this.num);
+
+        // WebVideoCtrl.I_ChangeWndNum(Math.sqrt(this.num))
+        // if (oldval) {
+          // for (let i = 0; i < 16; i++) {
+          //   WebVideoCtrl.I_Stop(i); //停止正在播放的页面
+          // }
+          // this.$emit("func", "");
+          // WebVideoCtrl.I_Logout(oldval.ip);
+          // this.clickLogin(this.companyVideoData);
+        // }
       },
-      immediate: true, //关键
-      deep: true,
+      // immediate: true, //关键
+      // deep: true,
     },
     videoType: {
       handler(val, oldval) {
@@ -252,10 +663,16 @@ export default {
 </script>
 <style scoped>
 .video-player {
+
   width: 120%;
   height: 120%;
 }
+.divPlugin0 {
+  pointer-events: none;
+}
+
 .divPlugin {
+
   width: 100%;
   height: 100%;
   color: red;

src/views/monitorScreen.vue

@@ -14,39 +14,103 @@
       </div>
       <div class="monitor_video_box">
         <div class="full_video_box">
-          <div class="video_title_new">监控名称</div>
-          <!-- <video  id="videoPlayerTask" class="video-js" muted></video> -->
-          <MonitorHK :companyVideoData="videoData" v-if="isShow"/>
+          <div class="video_title_new">
+            <a style="float: left">监控名称</a>
+            <a style="margin-left: 1370px">分屏</a>
+            <div style="float: right; ">
+              <el-radio-group v-model="selectedScreen" size="mini" @change="selectChange">
+                <el-radio-button label=1></el-radio-button>
+                <el-radio-button label=4></el-radio-button>
+<!--                <el-radio-button label="6"></el-radio-button>-->
+                <el-radio-button label=9></el-radio-button>
+                <el-radio-button label=16></el-radio-button>
+              </el-radio-group>
+            </div>
+          </div>
+          <div class="video_content">
+            <MonitorHK  v-if="HKbigCamaraShow"
+                        @change-window="handleChangeWindow"
+                        :num="selectedScreen"
+                        :bofang="issbofang"
+                        :chooseWindow="selectWindow"
+                        :chooseData="bofangyuan"
+                        :companyVideoData="this.bigData.data"
+                        @init="HKbigCamaraInit"
+                        ref="hkbigCamara" />
+          </div>
         </div>
         <div class="full_video_list">
-          <!-- <div>
-              <div class="video_title_new_child">
-                  <div>监控名称</div>
-                  <div class="play_to_full">大屏播放</div>
+          <div class="full_video_list_card">
+            <a style="float: left">采集卡视频</a>
+            <div class="full_video_list_card_list" >
+              <el-table
+                  :data="pagedData_bigcardData"
+                  :header-cell-style="changeHeaderCellStyle"
+                  :cell-style="changeCellStyle"
+                  stripe:border="true"
+              >
+                <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="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>
+              <el-row type="flex" justify="end" style="margin-top: 10px;">
+                <el-pagination
+                    :total="this.bigcardData.length"
+                    :current-page="this.bigcardData.currentPage"
+                    :page-size="this.bigcardData.pageSize"
+                    :page-sizes="[5,10,15, 20]"
+                    layout="total, prev, pager, next, sizes"
+                    @current-change="onCurrentPageChange_bigcardData"
+                    @size-change="onPageSizeChange_bigcardData">
+                </el-pagination>
+              </el-row>
+            </div>
+          </div>
+          <div class="full_video_list_camara">
+            <a style="float: left">监控视频</a>
+            <div class="full_video_list_camara_list" >
+              <el-row class="task_item_body1" >
+                <el-col :span="24"  >
+                <el-table
+                  :data="pagedData_bigcamaraData"
+                  :header-cell-style="changeHeaderCellStyle"
+                  :cell-style="changeCellStyle"
+                  stripe:border="true"
+                >
+                  <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="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>
+                <el-row type="flex" justify="end" style="margin-top: 10px;">
+                  <el-pagination
+                      :total="this.bigcamaraData.length"
+                      :current-page="this.bigcamaraData.currentPage"
+                      :page-size="this.bigcamaraData.pageSize"
+                      :page-sizes="[5,10,15, 20]"
+                      layout="total, prev, pager, next, sizes"
+                      @current-change="onCurrentPageChange_bigcamaraData"
+                      @size-change="onPageSizeChange_bigcamaraData">
+                  </el-pagination>
+                </el-row>
+              </el-col>
+              </el-row>
               </div>
-              <video id="videoPlayer_first" class="video-js" muted></video>
-          </div> -->
-          <!-- <div>
-              <div class="video_title_new_child">
-                  <div>监控名称</div>
-                  <div class="play_to_full">大屏播放</div>
-              </div>
-              <video id="videoPlayer_second" class="video-js" muted></video>
-          </div> -->
-          <!-- <div>
-              <div class="video_title_new_child">
-                  <div>监控名称</div>
-                  <div class="play_to_full">大屏播放</div>
-              </div>
-              <video id="videoPlayer_third" class="video-js" muted></video>
-          </div> -->
-          <!-- <div>
-              <div class="video_title_new_child">
-                  <div>监控名称</div>
-                  <div class="play_to_full">大屏播放</div>
-              </div>
-              <video id="videoPlayer_fourth" class="video-js" muted></video>
-          </div> -->
+          </div>
+
         </div>
       </div>
     </div>
@@ -63,16 +127,21 @@ import './taskScreen.css'
 import Videojs from "video.js"; // 引入Videojs
 
 import MonitorHK from '../components/hk/monitorHK.vue';
+import {isInteger, toInteger} from "lodash";
 export default {
   name: 'monitorScreen',
   components:{
     myFlylineChartEnhanced,
     sacleBox,
     myscrollBoard,
-
     MonitorHK
   },
   props: {
+
+    title: {
+      type: String,
+      default: ''
+    },
     videoData: {
       type: Array
     },
@@ -80,14 +149,593 @@ export default {
   data() {
     return {
 
+      radio1: '1',
+
+      options: [{
+        value: 4,
+        label: '1'
+      }, {
+        value: 4,
+        label: '4'
+      }, {
+        value: 9,
+        label: '9'
+      }, {
+        value: 16,
+        label: '16'
+      }, {
+        value: 25,
+        label: '25'
+      }],
+      selectedScreen: 1,
+      selectWindow:0,
+
+      bofangyuan:{
+        window:0,
+        data:[],
+        Password: "sgw123456",
+        Port: "80",
+        Username: "admin",
+        channelName: "test1",
+        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',
       playerList:[],
-      isShow: false
+      isShow: false,
+
+      HKbigCamaraShow: false,
+      HKbigCardShow: false,
+
+      bigData: {
+        // header: ['0','1', '2', '3','4', '5', '6','7'],
+        // waitTime:1500,
+        data: [{
+          windowList:[]
+        }],
+        length:0,
+        currentPage:1,
+        pageSize:3,
+
+        paged:true,
+      },
+      bigcamaraData:{
+        // header: ['0','1', '2', '3','4', '5', '6','7'],
+        // waitTime:1500,
+        data: [{
+          windowList:[]
+        }],
+        length:0,
+        currentPage:1,
+        pageSize:5,
+        paged:true,
+      },
+      bigcardData:{
+        // header: ['0','1', '2', '3','4', '5', '6','7'],
+        // waitTime:1500,
+        data: [{
+          windowList:[]
+        }],
+        length:0,
+        currentPage:1,
+        pageSize:5,
+        paged:true,
+      },
+
+      subjectName:'',
+      taskId:'',
+      bigcamaraSrc: ["", "", "", "", ""],
+      bigcamaraName: ["监控名称", "监控名称", "监控名称", "监控名称", "监控名称"],
+
+      bigcardName:[],
+      bigcardSrc:[],
 
 
     }
   },
+  computed:{
+    pagedData_bigcamaraData() { // 动态计算当前页的数据
+      const start = (this.bigcamaraData.currentPage - 1) * this.bigcamaraData.pageSize
+      const end = start + this.bigcamaraData.pageSize
+      if(this.bigcamaraData.data!=null){
+        console.log("hhhh1:  ",start+"---"+end )
+        console.log("hhhh2:  ",this.bigcamaraData.data )
+        console.log("hhhh3:  ",this.bigcamaraData.data.slice(start, end) )
+        return this.bigcamaraData.data.slice(start, end)
+      }else{
+        return null
+      }
+    },
+    pagedData_bigcardData() { // 动态计算当前页的数据
+      const start = (this.bigcardData.currentPage - 1) * this.bigcardData.pageSize
+      const end = start + this.bigcardData.pageSize
+      if(this.bigcardData.data!=null){
+        console.log("hhhh1:  ",start+"---"+end )
+        console.log("hhhh2:  ",this.bigcardData.data )
+        console.log("hhhh3:  ",this.bigcardData.data.slice(start, end) )
+        return this.bigcardData.data.slice(start, end)
+      }else{
+        return null
+      }
+    }
+
+  },
   methods:{
+    async handleChangeWindow(value) {
+      console.log("当前更新的窗口",value)
+      this.selectWindow=value
+      console.log("this.selectWindow",this.selectWindow)
+    },
+
+    updateSelectedButton(button) {
+      console.log("更新button",this.selectedScreen,button)
+      this.selectedScreen = button;
+
+    },
+
+    bofang1(){
+      console.log("播放1",this.bigcardData)
+      console.log("播放2",this.bigcamaraData)
+      this.bigData=this.bigcardData
+      // this.handleChange()
+    },
+    bofang2(){
+      console.log("播放2",this.bigcamaraData)
+      this.bigData=this.bigcamaraData
+    },
+    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());
+    },
+    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);
+      }
+
+
+    },
+    /**
+     * 表格排序字段变化
+     * @param {String} prop 排序字段的字段名
+     * @param {String} order 正序还是倒序
+     */
+    onSortChange ({ prop, order }) {
+      console.log("h3:",prop,order)
+      this.orderInfo.fieldName = prop;
+      this.orderInfo.asc = (order === 'ascending');
+      this.refreshTable();
+    },
+    pagedData_bigcamaraData1() { // 动态计算当前页的数据
+      const start = (this.bigcamaraData.currentPage - 1) * this.bigcamaraData.pageSize
+      const end = start + this.bigcamaraData.pageSize
+      if(this.bigcamaraData.data!=null){
+        console.log("hhhh1:  ",start+"---"+end )
+        console.log("hhhh2:  ",this.bigcamaraData.data )
+        console.log("hhhh3:  ",this.bigcamaraData.data.slice(start, end) )
+        return this.bigcamaraData.data.slice(start, end)
+      }else{
+        return null
+      }
+
+    },
+    // 表格样式修改
+    changeHeaderCellStyle(row,column, rowIndex, columnIndex){
+      if(row.columnIndex === 0){
+        return 'background: #004279 ; color:#fff;'; // 修改的样式
+      }else {
+        return 'background: #004279 ;color:#fff; ';
+      }
+    },
+    changeCellStyle(row,column, rowIndex, columnIndex){
+      if(row.columnIndex === 0){
+        return 'background: #0A427C  ; color:#fff;'; // 修改的样式
+      }else {
+        return 'background: #0A427C ; color:#fff;';
+      }
+    },
+    /**
+     * 获取每一行的index信息
+     * @param {Integer} index 表格在本页位置
+     */
+    getTableIndex_bigcamaraData (index) {
+      let a
+      console.log("参数20： "+this.bigcamaraData.data,this.bigcardData.data,this.bigData.data)
+      console.log("参数：  "+this.bigcamaraData.paged+" "+this.bigcamaraData.pageSize+" "+index)
+      a=((this.bigcamaraData.currentPage - 1) * this.bigcamaraData.pageSize + (index + 1))
+      console.log(".....a  "+a)
+      return a;
+    },
+    onCurrentPageChange_bigcamaraData (newCurrentPage) {
+
+      console.log("1:  ",newCurrentPage )
+      console.log("2:  ",this.bigcamaraData.pageSize )
+      console.log("3:  ",this.oldPage)
+
+      this.loadTableDataImpl_bigcamaraData(newCurrentPage, this.bigcamaraData.pageSize).then(() => {//数据加载成功
+
+        this.bigcamaraData.currentPage = newCurrentPage;
+        this.oldPage = this.bigcamaraData.currentPage-1
+        console.log("4:  ",newCurrentPage)
+        console.log("5:  ",this.bigcamaraData.currentPage)
+        console.log("6:  ",this.oldPage)
+
+        if(this.bigcamaraData.data.length <= newCurrentPage*this.bigcamaraData.pageSize   ){
+          this.bigcamaraData.paged=true
+        }else{
+          this.bigcamaraData.paged=false
+        }
+
+      }).catch(() => {//数据加载失败
+        this.bigcamaraData.currentPage = this.oldPage;
+        console.log("7:  ",this.oldPage)
+        console.log("8:  ",this.bigcamaraData.currentPage)
+
+      });
+    },
+    /**
+     * 表格分页每页显示数量变化
+     * @param {Integer} newPageSize 变化后的每页显示数量
+     */
+    onPageSizeChange_bigcamaraData (newPageSize) {
+      console.log("hhhh2:  ",newPageSize )
+      this.bigcamaraData.pageSize = newPageSize;
+      this.bigcamaraData.currentPage = 1
+      this.loadTableDataImpl_bigcamaraData(1, newPageSize).then(() => {
+        this.oldPage = this.bigcamaraData.currentPage;
+        this.oldPageSize = this.bigcamaraData.pageSize;
+      }).catch(e => {
+        this.bigcamaraData.currentPage = this.oldPage;
+        this.bigcamaraData.pageSize = this.oldPageSize;
+      });
+    },
+    /**
+     * 获取表格数据
+     * @param {Integer} pageNum 当前分页
+     * @param {Integer} pageSize 每页数量
+     * @param {Boolean} reload 是否重新获取数据
+     */
+    loadTableDataImpl_bigcamaraData (pageNum, pageSize, reload = false) {
+      console.log("11:  ",pageNum+"---"+pageSize+"---"+reload)
+      // 判断是否需要重新加载数据
+      if (reload || !this.bigcamaraData.data || this.bigcamaraData.data.length === 0) {
+        // 调用后端接口或其他数据来源获取数据
+        // 这里省略具体实现
+
+        // 模拟一个返回结果的 Promise 对象
+        const mockData = new Promise(resolve => {
+          const data = [];
+          for (let i = 1; i <= pageSize; i++) {
+            data.push({
+              id: pageNum * pageSize + i,
+              name: `任务${pageNum * pageSize + i}`,
+              status: Math.floor(Math.random() * 4)
+            });
+          }
+
+          resolve(data);
+        });
+        // 返回 Promise 对象，以便分页组件可以在数据加载完成后进行下一步处理。
+        return mockData.then(data => {
+          // 更新任务列表数据
+          this.bigcamaraData.data = data;
+          // 返回新的任务列表数据
+          return this.bigcamaraData.data.slice((pageNum - 1) * pageSize, pageNum * pageSize);
+        });
+      } else {// 直接返回已有的任务列表数据
+        console.log("112:")
+        console.log("112_1:",pageNum ,pageSize)
+        console.log("112_2:",this.bigcamaraData.data.slice((pageNum - 1) * pageSize,pageNum * pageSize))
+        console.log("112_2:",Promise.resolve(this.bigcamaraData.data.slice((pageNum - 1) * pageSize,pageNum * pageSize)))
+        return Promise.resolve(this.bigcamaraData.data.slice((pageNum - 1) * pageSize, pageNum * pageSize));
+      }
+    },
+
+
+
+
+    /**
+     * 获取每一行的index信息
+     * @param {Integer} index 表格在本页位置
+     */
+    getTableIndex_bigcardData (index) {
+      let a
+      console.log("参数10： "+this.bigcamaraData.data,this.bigcardData.data,this.bigData.data)
+      console.log("参数：  "+this.bigcardData.paged+" "+this.bigcardData.pageSize+" "+index)
+      a=((this.bigcardData.currentPage - 1) * this.bigcardData.pageSize + (index + 1))
+      console.log(".....a  "+a)
+      return a;
+    },
+    onCurrentPageChange_bigcardData (newCurrentPage) {
+
+      console.log("1:  ",newCurrentPage )
+      console.log("2:  ",this.bigcardData.pageSize )
+      console.log("3:  ",this.oldPage)
+
+      this.loadTableDataImpl_bigcardData(newCurrentPage, this.bigcardData.pageSize).then(() => {//数据加载成功
+
+        this.bigcardData.currentPage = newCurrentPage;
+        this.oldPage = this.bigcardData.currentPage-1
+        console.log("4:  ",newCurrentPage)
+        console.log("5:  ",this.bigcardData.currentPage)
+        console.log("6:  ",this.oldPage)
+
+        if(this.bigcardData.data.length <= newCurrentPage*this.bigcardData.pageSize   ){
+          this.bigcardData.paged=true
+        }else{
+          this.bigcardData.paged=false
+        }
+
+      }).catch(() => {//数据加载失败
+        this.bigcardData.currentPage = this.oldPage;
+        console.log("7:  ",this.oldPage)
+        console.log("8:  ",this.bigcardData.currentPage)
+
+      });
+    },
+    /**
+     * 表格分页每页显示数量变化
+     * @param {Integer} newPageSize 变化后的每页显示数量
+     */
+    onPageSizeChange_bigcardData (newPageSize) {
+      console.log("hhhh2:  ",newPageSize )
+      this.bigcardData.pageSize = newPageSize;
+      this.bigcardData.currentPage = 1
+      this.loadTableDataImpl_bigcardData(1, newPageSize).then(() => {
+        this.oldPage = this.bigcardData.currentPage;
+        this.oldPageSize = this.bigcardData.pageSize;
+      }).catch(e => {
+        this.bigcardData.currentPage = this.oldPage;
+        this.bigcardData.pageSize = this.oldPageSize;
+      });
+    },
+    /**
+     * 获取表格数据
+     * @param {Integer} pageNum 当前分页
+     * @param {Integer} pageSize 每页数量
+     * @param {Boolean} reload 是否重新获取数据
+     */
+    loadTableDataImpl_bigcardData (pageNum, pageSize, reload = false) {
+      console.log("11:  ",pageNum+"---"+pageSize+"---"+reload)
+      // 判断是否需要重新加载数据
+      if (reload || !this.bigcardData.data || this.bigcardData.data.length === 0) {
+        // 调用后端接口或其他数据来源获取数据
+        // 这里省略具体实现
+
+        // 模拟一个返回结果的 Promise 对象
+        const mockData = new Promise(resolve => {
+          const data = [];
+          for (let i = 1; i <= pageSize; i++) {
+            data.push({
+              id: pageNum * pageSize + i,
+              name: `任务${pageNum * pageSize + i}`,
+              status: Math.floor(Math.random() * 4)
+            });
+          }
+
+          resolve(data);
+        });
+        // 返回 Promise 对象，以便分页组件可以在数据加载完成后进行下一步处理。
+        return mockData.then(data => {
+          // 更新任务列表数据
+          this.bigcardData.data = data;
+          // 返回新的任务列表数据
+          return this.bigcardData.data.slice((pageNum - 1) * pageSize, pageNum * pageSize);
+        });
+      } else {// 直接返回已有的任务列表数据
+        return Promise.resolve(this.bigcardData.data.slice((pageNum - 1) * pageSize, pageNum * pageSize));
+      }
+    },
+
+    init(){
+      // this.bigcamaraData=this.$route.query.camaraData
+      // this.bigcardData=this.$route.query.cardData
+      this.subjectName=this.$route.query.subjectInfo1
+      this.taskId=this.$route.query.subjectInfo2
+      // this.init('步坦协同课目')
+      console.log("0",this.subjectName,this.taskId)
+      console.log("1",this.$route.query)
+      this.initUrl()
+      // console.log(this.bigcamaraData)
+      // console.log("...")
+      // console.log(this.bigcardData)
+    },
+    async initUrl() {
+      this.bigData.data=[];
+      let params = {
+        subjectName: this.subjectName,
+        taskId: this.taskId
+      };
+      this.currentSubject = this.subjectName;
+      this.bigcamaraData.data = [];
+      const res = await request("/dt_screen/rest/v2/video/videos/getSubjectUrls", "post", params, false);
+      let index = 0;
+      this.SubjectInfo1=params.subjectName
+      this.SubjectInfo2=params.taskId
+      this.SubjectInfo3=res.data.data
+
+
+      console.log("cansgu1",params.subjectName,params.taskId)
+      console.log("res1",res.data.data)
+
+
+      this.bigcamaraSrc = ["", "", "", "", ""];
+      this.bigcamaraName = ["监控名称", "监控名称", "监控名称", "监控名称", "监控名称"];
+      // console.log()
+      for (let item in res.data.data) {
+        // this.camaraSrc[index] = res.data.data[item].url;
+        // this.camaraName[index++] = res.data.data[item].name;
+        let data = {
+          name: res.data.data[item].name,
+          ip: res.data.data[item].ip,
+          Port: res.data.data[item].port,
+          Username: res.data.data[item].username,
+          Password: res.data.data[item].password,
+          channelName: res.data.data[item].channelName,
+          windowList:[]
+        };
+        this.bigcamaraData.data.push(data);
+        this.bigData.data.push(data);
+      }
+      console.log('bigcamaraData :>> ', this.bigcamaraData.data);
+      this.bigcamaraData.length=this.bigcamaraData.data.length
+
+
+      setTimeout(() => {
+        this.HKbigCamaraShow = true;
+      }, 800);
+
+      let params1 = {
+        subjectName: this.subjectName,
+        taskId: this.taskId
+      };
+      this.currentSubject = this.subjectName;
+      this.bigcardData.data = [];
+      const res1 = await request("/dt_screen/rest/v2/video/videos/getSubjectCardUrls", "post", params1, false);
+
+      console.log("cansgu2",params.subjectName,params.taskId)
+      console.log("res1",res1.data.data)
+      let index1 = 0;
+      this.bigcardSrc = ["", "", "", "", ""];
+      this.bigcardName = ["监控名称", "监控名称", "监控名称", "监控名称", "监控名称"];
+      for (let item in res1.data.data) {
+        // this.cardSrc[index1] = res1.data.data[item].url;
+        // this.cardName[index1++] = res1.data.data[item].name;
+        let data = {
+          name: res1.data.data[item].name,
+          ip: res1.data.data[item].ip,
+          Port: res1.data.data[item].port,
+          Username: res1.data.data[item].username,
+          Password: res1.data.data[item].password,
+          channelName: res1.data.data[item].channelName,
+          windowList:[]
+        };
+        this.bigcardData.data.push(data);
+        this.bigData.data.push(data);
+      }
+      console.log('bigcardData :>> ', this.bigcardData.data);
+      console.log('bigData :>> ', this.bigData.data);
+
+
+      this.bigcardData.length=this.bigcardData.data.length
+
+    },
+    HKbigCamaraInit(){
+      this.HKbigCamaraShow = true;
+
+    },
+
+    selectChange(val){
+      // 此时 val 为当前对象
+      console.log("isInteger1",isInteger(val))
+      console.log("isInteger2",isInteger(parseInt(val)))
+      this.selectedScreen =parseInt(val)
+
+      // this.selectedScreen =val
+      console.log(val)
+      // this.num=this.selectedScreen
+
+      // if (subjectName == '')
+      //   return;
+      // if(subjectName != this.currentSubject) {
+      //   this.currentSubject = subjectName;
+      //   // this.$refs.hkv.stopAll();
+      //   // this.$refs.hkCard.stopAll();
+      //   this.camaraData = []
+      //   this.cardData = []
+      //   this.initUrl(subjectName);
+      // }
+
+
+    },
 
     showFull(){
       this.$router.push('/taskScreen')
@@ -121,19 +769,13 @@ export default {
   created(){
 //   this.videoData = this.$route.query.videoData;
 //   console.log(this.$route.query.videoData);
-    this.videoData = JSON.parse(this.$route.query.videoData);
+//     this.videoData = JSON.parse(this.$route.query.videoData);
+    this.init();
   },
   mounted(){
-    setTimeout(() => {
-      this.isShow = true;
-    }, 1000);
 
+    // this.init();
 
-    // this.initVideo(this.dataSrc,'videoPlayerTask',true)
-    // this.initVideo(this.dataSrc,'videoPlayer_first',false)
-    // this.initVideo(this.dataSrc,'videoPlayer_second',false)
-    // this.initVideo(this.dataSrc,'videoPlayer_third',false)
-    // this.initVideo(this.dataSrc,'videoPlayer_fourth',false)
   },
   beforeDestroy() {
     if(this.playerList.length){
@@ -145,6 +787,16 @@ export default {
 }
 </script>
 <style scoped>
+.player {
+  background-color: #d9b3b3;
+  height: 50%;
+  width: 50%;
+  border: 1px solid white;
+  color: white;
+  text-align: center;
+}
+
+
 .monitor_video_box {
   display: flex;
   align-items: flex-start;
@@ -168,19 +820,60 @@ export default {
 .full_video_list {
   width: 20%;
   height: 100%;
-  /* border:1px solid yellow; */
+  /*border:1px solid yellow;*/
+  /*padding:17px 10px 10px 10px;*/
+  /*box-sizing: border-box;*/
+  /*background-image:url('../assets/img/opitty.png');*/
+  /*background-repeat:no-repeat;*/
+  /*background-size:100% 100%;*/
+
+
+  /*background: #0027a8;*/
+}
+.full_video_list_card {
+  width: 100%;
+  height: 49%;
+   /*border:1px solid yellow;*/
   padding:17px 10px 10px 10px;
   box-sizing: border-box;
   background-image:url('../assets/img/opitty.png');
   background-repeat:no-repeat;
   background-size:100% 100%;
+
+  background: #004279;
+}
+
+.full_video_list_card_list{
+  margin-top: 30px;
 }
 
+
+.full_video_list_camara{
+  position: relative;
+  z-index: 1;
+  margin-top: 4%;
+  width: 100%;
+  height: 49%;
+   /*border:1px solid yellow;*/
+  padding:17px 10px 10px 10px;
+  box-sizing: border-box;
+  background-image:url('../assets/img/opitty.png');
+  background-repeat:no-repeat;
+  background-size:100% 100%;
+
+  /*background: #13864d;*/
+  background: #004279;
+  /*margin: 10px;*/
+}
+.full_video_list_camara_list{
+  margin-top: 30px;
+}
 .video_title_new {
   font-size: 18px;
   font-weight: 600;
   margin: 10px 0;
 }
+
 .exit_box_hanlde {
   display: flex;
   justify-content: end;

src/views/taskScreen.vue

@@ -305,7 +305,9 @@ export default {
   },
   data() {
     return {
-
+      SubjectInfo1:'',
+      SubjectInfo2:'',
+      SubjectInfo3:[],
       HKCardShow: false,
       HKCamaraShow: false,
       systemFinshedValue:'',
@@ -534,6 +536,11 @@ export default {
       if (success) {
         console.log('获取任务的课目信息', data);
         this.subjectDatas=data
+
+        this.SubjectInfo1=this.subjectDatas[0].subjectName
+        this.SubjectInfo2=taskId
+
+
         this.initUrl(this.subjectDatas[0].subjectName)
       } else {
         this.$message.error(errorMessage)
@@ -705,7 +712,11 @@ export default {
         {
           path: './monitorScreen',
           query: {
-            camaraData: JSON.stringify(this.camaraData)
+            subjectInfo1:this.SubjectInfo1,
+            subjectInfo2:this.SubjectInfo2,
+            // subjectInfo3:this.SubjectInfo3,
+            // camaraData: JSON.stringify(this.camaraData),
+            // cardData: JSON.stringify(this.cardData)
           }
         }
       )
@@ -716,8 +727,15 @@ export default {
       this.$router.push(
         {
           path: './monitorScreen',
+          // query: {
+          //   camaraData: JSON.stringify(this.cardData)
+          // }
           query: {
-            camaraData: JSON.stringify(this.cardData)
+            subjectInfo1:this.SubjectInfo1,
+            subjectInfo2:this.SubjectInfo2,
+            // subjectInfo3:this.SubjectInfo3,
+            // camaraData: JSON.stringify(this.camaraData),
+            // cardData: JSON.stringify(this.cardData)
           }
         }
       )
@@ -829,6 +847,11 @@ export default {
       this.cardData = [];
       const res = await request("/dt_screen/rest/v2/video/videos/getSubjectUrls", "post", params, false);
       let index = 0;
+      // this.SubjectInfo1=params.subjectName
+      // this.SubjectInfo2=params.taskId
+      // this.SubjectInfo3=res.data.data
+      console.log("cansgu",params.subjectName,params.taskId)
+      console.log("res",res.data.data)
       this.camaraSrc = ["", "", "", "", ""];
       this.camaraName = ["监控名称", "监控名称", "监控名称", "监控名称", "监控名称"];
 
@@ -921,6 +944,9 @@ export default {
     this.getAllSystems();
     // 建立任务的weksocket链接
     this.initWebsoket();
+
+    // this.SubjectInfo1=this.subjectName
+    // this.SubjectInfo2=this.taskId
     // setTimeout(() => {
     // this.initUrl('步坦协同课目');
     //   }, 1000);