DT_screen/src/components/hk/monitorHK.vue

<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、用户名、密码、端口号
    companyVideoData: {
      type: Array,
    },
    num:Number,
    bofang:Number,
    //分屏
    videoType: Number,
    chooseData:{},
    chooseWindow:Number,
    dangqianchuangkou:Number,
  },
  data() {
    return {
      currentnum:0,
      plugin: true,
      iWidth: "100%",
      iHeight: "100%",
      webVideo: {},
      iStreamType: 1,
      iProtocol: 1,
      bZeroChannel: false,
      xmlDocData: {},
      g_iWndIndex: 0, //可以不用设置这个变量，有窗口参数的接口中，不用传值，开发包会默认使用当前选择窗口
      videoNum: "",
      videoData:[],
      iWndowType:1,
      zoom: window.devicePixelRatio,
    };
  },
  created() {},
  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(() => {
        WebVideoCtrl.I_Resize(
            w/1.3,
            h/1.23
        );
      }, 1000);
    },
    videoInitPlugin() {
      var iRet = WebVideoCtrl.I_CheckPluginInstall();
      if (iRet === -1) {
        alert("您还未安装过插件，请安装WebComponentsKit.exe插件！");
        return;
      }
      this.initPlugin();
    },
    //插件初始化
    initPlugin() {
      // 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) {//获取当前窗口
          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)
        },
      });
      // 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;
      //   }
      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");

      // 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;
    },
    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,
          loginParam.Port,
          loginParam.Username,
          loginParam.Password,
          {
            timeout: 1000,
            success: function (xmlDoc) {
              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);
    },
    //获取通道
    getChannelInfo() {
      var that = this;
      // 模拟通道
      WebVideoCtrl.I_GetAnalogChannelInfo(this.szIP, {
        async: false,
        success: function (xmlDoc) {
          var oChannels = $(xmlDoc).find("VideoInputChannel");
          nAnalogChannel = oChannels.length;
          console.log("获取模拟通道成功！");
          return oChannels
        },
        error: function () {
          console.log("获取模拟通道失败！" + WebVideoCtrl.I_GetLastError());
        },
      });
      // 数字通道
      WebVideoCtrl.I_GetDigitalChannelInfo(that.companyVideoData.ip, {
        async: false,
        success: function (xmlDoc) {
          var oChannels = $(xmlDoc).find("InputProxyChannelStatus");
          return oChannels
        },
        error: function () {
          WebVideoCtrl.I_GetLastError();
          console.log("获取数字通道失败！" + WebVideoCtrl.I_GetLastError());
        },
      });
      // 零通道
      WebVideoCtrl.I_GetZeroChannelInfo(this.szIP, {
        async: false,
        success: function (xmlDoc) {
          var oChannels = $(xmlDoc).find("ZeroVideoChannel");
          return oChannels
        },
        error: function () {
          console.log("获取零通道失败！" + WebVideoCtrl.I_GetLastError());
        },
      });
    },
    //初始化视频，为了让用户进来就可以看到视频播放
    initPlay(data, index, oChannels) {
      let szIP = data.ip; //ip地址
      //循环16次是因为插件分屏最大为4x4（可以根据情况而定）

      WebVideoCtrl.I_StartRealPlay(szIP, {
        iStreamType: 1,
        iChannelID: oChannels.id,//按格式修改
        iWndIndex: index,
      });
    },
    // 点击查看具体哪个监控
    startRealPlay(oChannels) {
      let that = this;
      let szIP = this.companyVideoData.ip; //ip地址
      let iChannelID = oChannels; //播放通道号
      var iStreamType = 1;
      var oWndInfo = WebVideoCtrl.I_GetWindowStatus(that.g_iWndIndex);
      if (oWndInfo != null) {
        // 已经在播放了，先停止
        WebVideoCtrl.I_Stop();
      }
      WebVideoCtrl.I_StartRealPlay(szIP, {
        iStreamType: iStreamType,
        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) {
        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,
    },
    videoType: {
      handler(val, oldval) {
        if (oldval) {
          WebVideoCtrl.I_ChangeWndNum(this.videoType); //分屏
          this.initPlay();
        }
      },
      immediate: true, //关键
      deep: true,
    },
  },
};
</script>
<style scoped>
.video-player {

  width: 120%;
  height: 120%;
}
.divPlugin0 {
  pointer-events: none;
}

.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%;
  color: red;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 18px;
}
.down a {
  color: red;
}
</style>