Home Explore Help
Register Sign In
DT
/
DT_screen
2
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

add hk video

xyh123999 1 year ago
parent
837f2ac9d3
commit
b0e899e103
9 changed files with 887 additions and 41 deletions
Unified View Show Diff Stats
  1. 4 0
      public/index.html
  2. 1 0
      public/static/jquery-1.7.1.min.js
  3. 15 0
      public/static/jsVideoPlugin-1.0.0.min.js
  4. 0 0
      public/static/webVideoCtrl.js
  5. 246 0
      src/components/hk/hkv.vue
  6. 246 0
      src/components/hk/hkv1.vue
  7. 271 0
      src/components/hk/monitorHK.vue
  8. 37 18
      src/views/monitorScreen.vue
  9. 67 23
      src/views/taskScreen.vue

+ 4 - 0
public/index.html
View File 

@@ -7,6 +7,7 @@
 
         <link rel="icon" href="<%= BASE_URL %>favicon.ico">
 
         <link rel="icon" href="<%= BASE_URL %>favicon.ico">
 
         <title>训练态势大屏</title>
 
         <title>训练态势大屏</title>
 
         <script type="text/javascript" src="static/config.js"></script>
 
         <script type="text/javascript" src="static/config.js"></script>
 
+       
     </head>
 
     </head>
 
     <body>
 
     <body>
 
         <noscript>
 
         <noscript>
 
@@ -14,5 +15,8 @@
 
         </noscript>
 
         </noscript>
 
         <div id="app"></div>
 
         <div id="app"></div>
 
         <!-- built files will be auto injected -->
 
         <!-- built files will be auto injected -->
 
+        <script type="text/javascript" src="static/jquery-1.7.1.min.js"></script>
 
+        <script type="text/javascript" src="static/webVideoCtrl.js"></script>
 
+        <script type="text/javascript" src="static/jsVideoPlugin-1.0.0.min.js"></script>
 
     </body>
 
     </body>
 
 </html>
 
 </html>

File diff suppressed because it is too large
+ 1 - 0
public/static/jquery-1.7.1.min.js


File diff suppressed because it is too large
+ 15 - 0
public/static/jsVideoPlugin-1.0.0.min.js


File diff suppressed because it is too large
+ 0 - 0
public/static/webVideoCtrl.js


+ 246 - 0
src/components/hk/hkv.vue
View File 

@@ -0,0 +1,246 @@
 
+<template>
 
+  <div class="video-player">
 
+    <div id="divPlugin" class="divPlugin"></div>
 
+    <!-- <div id="divPlugin" class="divPlugin" ref="divPlugin" v-if="plugin">
 
+        </div> -->
 
+    <!-- <div class="down" v-else>
 
+            <a href="http://jbfsys.oss-cn-beijing.aliyuncs.com/download/VideoWebPlugin-1564128302790.exe">下载</a>
 
+        </div> -->
 
+  </div>
 
+</template>
 
+<script>
 
+export default {
 
+  name: "videoPlayer",
 
+  props: {
 
+    //从父组件传来的数据，IP、用户名、密码、端口号
 
+    companyVideoData: {
 
+      type: Array,
 
+    },
 
+    //分屏
 
+    videoType: Number,
 
+  },
 
+  data() {
 
+    return {
 
+      plugin: true,
 
+      iWidth: "100%",
 
+      iHeight: "100%",
 
+      webVideo: {},
 
+      iStreamType: 1,
 
+      iProtocol: 1,
 
+      bZeroChannel: false,
 
+      xmlDocData: {},
 
+      g_iWndIndex: 0, //可以不用设置这个变量，有窗口参数的接口中，不用传值，开发包会默认使用当前选择窗口
 
+      videoNum: "",
 
+    };
 
+  },
 
+  created() {},
 
+  mounted() {
 
+    this.videoInitPlugin();
 
+  },
 
+  destroyed() {
 
+    this.$router.go(0);
 
+  },
 
+  methods: {
 
+    videoInitPlugin() {
 
+      var iRet = WebVideoCtrl.I_CheckPluginInstall();
 
+      if (iRet === -1) {
 
+        alert("您还未安装过插件，请安装WebComponentsKit.exe插件！");
 
+        return;
 
+      }
 
+      this.initPlugin();
 
+    },
 
+    //插件初始化
 
+    initPlugin() {
 
+      var that = this;
 
+      WebVideoCtrl.I_InitPlugin({
 
+        bWndFull: true, //是否支持单窗口双击全屏，默I_CheckPluginInstall
 
+        iWndowType: 2,
 
+
 
+        bDebugMode: true,
 
+        cbSelWnd: function (xmlDoc) {},
 
+      });
 
+      WebVideoCtrl.I_InsertOBJECTPlugin("divPlugin");
 
+
 
+      // 检查插件是否最新
 
+      if (-1 == WebVideoCtrl.I_CheckPluginVersion()) {
 
+        alert("检测到新的插件版本，请双击WebComponents.exe插件，进行升级！");
 
+        // return;
 
+      }
 
+      setTimeout(() => {
 
+        WebVideoCtrl.I_Resize(1450, 1050);
 
+      }, 100);
 
+
 
+      this.clickLogin();
 
+    },
 
+    clickLogin() {
 
+      console.log('this.companyVideoData :>> ', this.companyVideoData);
 
+const uniqueArr = [];
 
+const uniqueSet = new Set();
 
+
 
+this.companyVideoData.forEach(obj => {
 
+  if (obj !== undefined) {
 
+    const key = JSON.stringify(obj);
 
+    if (!uniqueSet.has(key)) {
 
+      uniqueSet.add(key);
 
+      uniqueArr.push(obj);
 
+    }
 
+  }
 
+});
 
+      console.log(uniqueArr);
 
+      for(let index = 0;index < uniqueArr.length;index++){
 
+        this.singleLogin(uniqueArr[index],index)
 
+      }
 
+    },
 
+    singleLogin(Data,index){
 
+        setTimeout(() => {
 
+      
+        var that = this;
 
+        WebVideoCtrl.I_Login(
 
+          Data.ip,
 
+          1,
 
+          Data.Port,
 
+          Data.Username,
 
+          Data.Password,
 
+          {
 
+            async: false,
 
+            success: function (xmlDoc) {
 
+              console.log("开始预览"); //不能删除
 
+              // that.getChannelInfo();
 
+              that.initPlay(Data,index);
 
+            },
 
+            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("获取模拟通道成功！");
 
+        },
 
+        error: function () {
 
+          console.log("获取模拟通道失败！" + WebVideoCtrl.I_GetLastError());
 
+        },
 
+      });
 
+      // 数字通道
 
+      WebVideoCtrl.I_GetDigitalChannelInfo(that.companyVideoData.ip, {
 
+        async: false,
 
+        success: function (xmlDoc) {
 
+          var oChannels = $(xmlDoc).find("InputProxyChannelStatus");
 
+          that.initPlay();
 
+        },
 
+        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");
 
+        },
 
+        error: function () {
 
+          console.log("获取零通道失败！" + WebVideoCtrl.I_GetLastError());
 
+        },
 
+      });
 
+    },
 
+    //初始化视频，为了让用户进来就可以看到视频播放
 
+    initPlay(data,index) {
 
+      let szIP = data.ip; //ip地址
 
+      //循环16次是因为插件分屏最大为4x4（可以根据情况而定）
 
+        
+        WebVideoCtrl.I_StartRealPlay(szIP, {
 
+          iStreamType: 1,
 
+          iChannelID: 1,
 
+          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,
 
+      });
 
+    },
 
+  },
 
+  //因为项目中需求，总公司要查看所有子公司的监控，所以做了个监听来切换查看各个子公司的监控
 
+  watch: {
 
+    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);
 
+        }
 
+      },
 
+      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%;
 
+}
 
+.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>

+ 246 - 0
src/components/hk/hkv1.vue
View File 

@@ -0,0 +1,246 @@
 
+<template>
 
+  <div class="video-player">
 
+    <div id="divPlugin1" class="divPlugin"></div>
 
+    <!-- <div id="divPlugin" class="divPlugin" ref="divPlugin" v-if="plugin">
 
+        </div> -->
 
+    <!-- <div class="down" v-else>
 
+            <a href="http://jbfsys.oss-cn-beijing.aliyuncs.com/download/VideoWebPlugin-1564128302790.exe">下载</a>
 
+        </div> -->
 
+  </div>
 
+</template>
 
+<script>
 
+export default {
 
+  name: "videoPlayer1",
 
+  props: {
 
+    //从父组件传来的数据，IP、用户名、密码、端口号
 
+    companyVideoData: {
 
+      type: Array,
 
+    },
 
+    //分屏
 
+    videoType: Number,
 
+  },
 
+  data() {
 
+    return {
 
+      plugin: true,
 
+      iWidth: "100%",
 
+      iHeight: "100%",
 
+      webVideo: {},
 
+      iStreamType: 1,
 
+      iProtocol: 1,
 
+      bZeroChannel: false,
 
+      xmlDocData: {},
 
+      g_iWndIndex: 0, //可以不用设置这个变量，有窗口参数的接口中，不用传值，开发包会默认使用当前选择窗口
 
+      videoNum: "",
 
+    };
 
+  },
 
+  created() {},
 
+  mounted() {
 
+    this.videoInitPlugin();
 
+  },
 
+  destroyed() {
 
+    this.$router.go(0);
 
+  },
 
+  methods: {
 
+    videoInitPlugin() {
 
+      var iRet = WebVideoCtrl.I_CheckPluginInstall();
 
+      if (iRet === -1) {
 
+        alert("您还未安装过插件，请安装WebComponentsKit.exe插件！");
 
+        return;
 
+      }
 
+      this.initPlugin();
 
+    },
 
+    //插件初始化
 
+    initPlugin() {
 
+      var that = this;
 
+      WebVideoCtrl.I_InitPlugin({
 
+        bWndFull: true, //是否支持单窗口双击全屏，默I_CheckPluginInstall
 
+        iWndowType: 1,
 
+
 
+        bDebugMode: true,
 
+        cbSelWnd: function (xmlDoc) {},
 
+      });
 
+      WebVideoCtrl.I_InsertOBJECTPlugin("divPlugin1");
 
+
 
+      // 检查插件是否最新
 
+      if (-1 == WebVideoCtrl.I_CheckPluginVersion()) {
 
+        alert("检测到新的插件版本，请双击WebComponents.exe插件，进行升级！");
 
+        // return;
 
+      }
 
+      setTimeout(() => {
 
+        WebVideoCtrl.I_Resize(1130, 800);
 
+      }, 100);
 
+
 
+      this.clickLogin();
 
+    },
 
+    clickLogin() {
 
+      console.log('this.companyVideoData :>> ', this.companyVideoData);
 
+const uniqueArr = [];
 
+const uniqueSet = new Set();
 
+
 
+this.companyVideoData.forEach(obj => {
 
+  if (obj !== undefined) {
 
+    const key = JSON.stringify(obj);
 
+    if (!uniqueSet.has(key)) {
 
+      uniqueSet.add(key);
 
+      uniqueArr.push(obj);
 
+    }
 
+  }
 
+});
 
+      console.log(uniqueArr);
 
+      for(let index = 0;index < uniqueArr.length;index++){
 
+        this.singleLogin(uniqueArr[index],index)
 
+      }
 
+    },
 
+    singleLogin(Data,index){
 
+        setTimeout(() => {
 
+      
+        var that = this;
 
+        WebVideoCtrl.I_Login(
 
+          Data.ip,
 
+          1,
 
+          Data.Port,
 
+          Data.Username,
 
+          Data.Password,
 
+          {
 
+            async: false,
 
+            success: function (xmlDoc) {
 
+              console.log("开始预览"); //不能删除
 
+              // that.getChannelInfo();
 
+              that.initPlay(Data,index);
 
+            },
 
+            error: function () {
 
+              console.log("login error");
 
+            },
 
+          }
 
+        );
 
+      }, 2000);
 
+    },
 
+    //获取通道
 
+    getChannelInfo() {
 
+      var that = this;
 
+      // 模拟通道
 
+      WebVideoCtrl.I_GetAnalogChannelInfo(this.szIP, {
 
+        async: false,
 
+        success: function (xmlDoc) {
 
+          var oChannels = $(xmlDoc).find("VideoInputChannel");
 
+          nAnalogChannel = oChannels.length;
 
+          console.log("获取模拟通道成功！");
 
+        },
 
+        error: function () {
 
+          console.log("获取模拟通道失败！" + WebVideoCtrl.I_GetLastError());
 
+        },
 
+      });
 
+      // 数字通道
 
+      WebVideoCtrl.I_GetDigitalChannelInfo(that.companyVideoData.ip, {
 
+        async: false,
 
+        success: function (xmlDoc) {
 
+          var oChannels = $(xmlDoc).find("InputProxyChannelStatus");
 
+          that.initPlay();
 
+        },
 
+        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");
 
+        },
 
+        error: function () {
 
+          console.log("获取零通道失败！" + WebVideoCtrl.I_GetLastError());
 
+        },
 
+      });
 
+    },
 
+    //初始化视频，为了让用户进来就可以看到视频播放
 
+    initPlay(data,index) {
 
+      let szIP = data.ip; //ip地址
 
+      //循环16次是因为插件分屏最大为4x4（可以根据情况而定）
 
+        
+        WebVideoCtrl.I_StartRealPlay(szIP, {
 
+          iStreamType: 1,
 
+          iChannelID: 1,
 
+          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,
 
+      });
 
+    },
 
+  },
 
+  //因为项目中需求，总公司要查看所有子公司的监控，所以做了个监听来切换查看各个子公司的监控
 
+  watch: {
 
+    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);
 
+        }
 
+      },
 
+      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%;
 
+}
 
+.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>

+ 271 - 0
src/components/hk/monitorHK.vue
View File 

@@ -0,0 +1,271 @@
 
+<template>
 
+  <div class="video-player">
 
+    <div id="divPlugin2" class="divPlugin"></div>
 
+    <!-- <div id="divPlugin" class="divPlugin" ref="divPlugin" v-if="plugin">
 
+        </div> -->
 
+    <!-- <div class="down" v-else>
 
+            <a href="http://jbfsys.oss-cn-beijing.aliyuncs.com/download/VideoWebPlugin-1564128302790.exe">下载</a>
 
+        </div> -->
 
+  </div>
 
+</template>
 
+<script>
 
+export default {
 
+  name: "monitorHK",
 
+  props: {
 
+    //从父组件传来的数据，IP、用户名、密码、端口号
 
+    companyVideoData: {
 
+      type: Array,
 
+    },
 
+    //分屏
 
+    videoType: Number,
 
+  },
 
+  data() {
 
+    return {
 
+      plugin: true,
 
+      iWidth: "100%",
 
+      iHeight: "100%",
 
+      webVideo: {},
 
+      iStreamType: 1,
 
+      iProtocol: 1,
 
+      bZeroChannel: false,
 
+      xmlDocData: {},
 
+      g_iWndIndex: 0, //可以不用设置这个变量，有窗口参数的接口中，不用传值，开发包会默认使用当前选择窗口
 
+      videoNum: "",
 
+      videoData:[],
 
+      iWndowType:1
 
+    };
 
+  },
 
+  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();
 
+  },
 
+  destroyed() {
 
+    this.$router.go(0);
 
+  },
 
+  methods: {
 
+    videoInitPlugin() {
 
+      var iRet = WebVideoCtrl.I_CheckPluginInstall();
 
+      if (iRet === -1) {
 
+        alert("您还未安装过插件，请安装WebComponentsKit.exe插件！");
 
+        return;
 
+      }
 
+      this.initPlugin();
 
+    },
 
+    //插件初始化
 
+    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('this.iWndowType :>> ', this.iWndowType);
 
+      var that = this;
 
+      WebVideoCtrl.I_InitPlugin({
 
+        bWndFull: true, //是否支持单窗口双击全屏，默I_CheckPluginInstall
 
+        iWndowType: this.iWndowType,
 
+
 
+        bDebugMode: true,
 
+        cbSelWnd: function (xmlDoc) {},
 
+      });
 
+      WebVideoCtrl.I_InsertOBJECTPlugin("divPlugin2");
 
+
 
+      // 检查插件是否最新
 
+    //   if (-1 == WebVideoCtrl.I_CheckPluginVersion()) {
 
+    //     alert("检测到新的插件版本，请双击WebComponents.exe插件，进行升级！");
 
+    //     // return;
 
+    //   }
 
+      setTimeout(() => {
 
+        WebVideoCtrl.I_Resize(4500, 2300);
 
+      }, 100);
 
+
 
+      this.clickLogin();
 
+    },
 
+    clickLogin() {
 
+    
+      for(let index = 0;index < this.videoData.length;index++){
 
+        this.singleLogin(this.videoData[index],index)
 
+      }
 
+    },
 
+    singleLogin(Data,index){
 
+        setTimeout(() => {
 
+      
+        var that = this;
 
+        WebVideoCtrl.I_Login(
 
+          Data.ip,
 
+          1,
 
+          Data.Port,
 
+          Data.Username,
 
+          Data.Password,
 
+          {
 
+            async: false,
 
+            success: function (xmlDoc) {
 
+              console.log("开始预览"); //不能删除
 
+              // that.getChannelInfo();
 
+              that.initPlay(Data,index);
 
+            },
 
+            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("获取模拟通道成功！");
 
+        },
 
+        error: function () {
 
+          console.log("获取模拟通道失败！" + WebVideoCtrl.I_GetLastError());
 
+        },
 
+      });
 
+      // 数字通道
 
+      WebVideoCtrl.I_GetDigitalChannelInfo(that.companyVideoData.ip, {
 
+        async: false,
 
+        success: function (xmlDoc) {
 
+          var oChannels = $(xmlDoc).find("InputProxyChannelStatus");
 
+          that.initPlay();
 
+        },
 
+        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");
 
+        },
 
+        error: function () {
 
+          console.log("获取零通道失败！" + WebVideoCtrl.I_GetLastError());
 
+        },
 
+      });
 
+    },
 
+    //初始化视频，为了让用户进来就可以看到视频播放
 
+    initPlay(data,index) {
 
+      let szIP = data.ip; //ip地址
 
+      //循环16次是因为插件分屏最大为4x4（可以根据情况而定）
 
+        
+        WebVideoCtrl.I_StartRealPlay(szIP, {
 
+          iStreamType: 1,
 
+          iChannelID: 1,
 
+          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,
 
+      });
 
+    },
 
+  },
 
+  //因为项目中需求，总公司要查看所有子公司的监控，所以做了个监听来切换查看各个子公司的监控
 
+  watch: {
 
+    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);
 
+        }
 
+      },
 
+      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%;
 
+}
 
+.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>

+ 37 - 18
src/views/monitorScreen.vue
View File 

@@ -15,37 +15,38 @@
 
             <div class="monitor_video_box">
 
             <div class="monitor_video_box">
 
                 <div class="full_video_box">
 
                 <div class="full_video_box">
 
                     <div class="video_title_new">监控名称</div>
 
                     <div class="video_title_new">监控名称</div>
 
-                    <video  id="videoPlayerTask" class="video-js" muted></video>
 
+                    <!-- <video  id="videoPlayerTask" class="video-js" muted></video> -->
 
+                    <MonitorHK :companyVideoData="videoData" v-if="isShow"/>
 
                 </div>
 
                 </div>
 
                 <div class="full_video_list">
 
                 <div class="full_video_list">
 
-                    <div>
 
+                    <!-- <div>
 
                         <div class="video_title_new_child">
 
                         <div class="video_title_new_child">
 
                             <div>监控名称</div>
 
                             <div>监控名称</div>
 
                             <div class="play_to_full">大屏播放</div>
 
                             <div class="play_to_full">大屏播放</div>
 
                         </div>
 
                         </div>
 
                         <video id="videoPlayer_first" class="video-js" muted></video>
 
                         <video id="videoPlayer_first" class="video-js" muted></video>
 
-                    </div>
 
-                    <div>
 
+                    </div> -->
 
+                    <!-- <div>
 
                         <div class="video_title_new_child">
 
                         <div class="video_title_new_child">
 
                             <div>监控名称</div>
 
                             <div>监控名称</div>
 
                             <div class="play_to_full">大屏播放</div>
 
                             <div class="play_to_full">大屏播放</div>
 
                         </div>
 
                         </div>
 
                         <video id="videoPlayer_second" class="video-js" muted></video>
 
                         <video id="videoPlayer_second" class="video-js" muted></video>
 
-                    </div>
 
-                    <div>
 
+                    </div> -->
 
+                    <!-- <div>
 
                         <div class="video_title_new_child">
 
                         <div class="video_title_new_child">
 
                             <div>监控名称</div>
 
                             <div>监控名称</div>
 
                             <div class="play_to_full">大屏播放</div>
 
                             <div class="play_to_full">大屏播放</div>
 
                         </div>
 
                         </div>
 
                         <video id="videoPlayer_third" class="video-js" muted></video>
 
                         <video id="videoPlayer_third" class="video-js" muted></video>
 
-                    </div>
 
-                    <div>
 
+                    </div> -->
 
+                    <!-- <div>
 
                         <div class="video_title_new_child">
 
                         <div class="video_title_new_child">
 
                             <div>监控名称</div>
 
                             <div>监控名称</div>
 
                             <div class="play_to_full">大屏播放</div>
 
                             <div class="play_to_full">大屏播放</div>
 
                         </div>
 
                         </div>
 
                         <video id="videoPlayer_fourth" class="video-js" muted></video>
 
                         <video id="videoPlayer_fourth" class="video-js" muted></video>
 
-                    </div>
 
+                    </div> -->
 
                 </div>
 
                 </div>
 
             </div>
 
             </div>
 
         </div>
 
         </div>
 
@@ -61,17 +62,27 @@ var uploadedDataURL = require('../../public/json/taiyuan.json')
 
 import './taskScreen.css'
 
 import './taskScreen.css'
 
 import Videojs from "video.js"; // 引入Videojs 
 import Videojs from "video.js"; // 引入Videojs 
 
 
+import MonitorHK from '../components/hk/monitorHK.vue';
 
 export default {
 
 export default {
 
+    name: 'monitorScreen',
 
     components:{
 
     components:{
 
         myFlylineChartEnhanced,
 
         myFlylineChartEnhanced,
 
         sacleBox,
 
         sacleBox,
 
-        myscrollBoard
 
+        myscrollBoard,
 
+      
+        MonitorHK
 
+    },
 
+    props: {
 
+    videoData: {
 
+      type: Array
 
     },
 
     },
 
+  },
 
     data() {
 
     data() {
 
         return {
 
         return {
 
 			
 			
             dataSrc:'https://cctvwbndbd.a.bdydns.com/cctvwbnd/cctv1_2/index.m3u8?BR=single',
 
             dataSrc:'https://cctvwbndbd.a.bdydns.com/cctvwbnd/cctv1_2/index.m3u8?BR=single',
 
-			playerList:[]
 
+			playerList:[],
 
+            isShow: false
 
                
                
             
             
         }
 
         }
 
@@ -106,15 +117,23 @@ export default {
 
         }
 
         }
 
 
 
             
             
+    },
 
+    created(){ 
+//   this.videoData = this.$route.query.videoData;
 
+//   console.log(this.$route.query.videoData);
 
+this.videoData = JSON.parse(this.$route.query.videoData);
 
     },
 
     },
 
     mounted(){
 
     mounted(){
 
-      
-
 
-        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)
 
+     setTimeout(() => {
 
+         this.isShow = true;
 
+          }, 1000);
 
+        
+  
+        // 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() {
 
 	beforeDestroy() {
 
 		if(this.playerList.length){
 
 		if(this.playerList.length){

+ 67 - 23
src/views/taskScreen.vue
View File 

@@ -1,5 +1,5 @@
 
 <template>
 
 <template>
 
-  <v-scale-screen width="2200" height="1080">
 
+  <v-scale-screen width="2200" height="1080" ref="screen" style="position = relative">
 
     <div  class="task_screen_cotainer">
 
     <div  class="task_screen_cotainer">
 
       <div class="task_header">「{{ currentTaskName }}」当前态势</div>
 
       <div class="task_header">「{{ currentTaskName }}」当前态势</div>
 
       <div class="tag" @click="jumpToHistory">
 
       <div class="tag" @click="jumpToHistory">
 
@@ -201,10 +201,12 @@
 
                   ></el-image>
 
                   ></el-image>
 
                 </div>
 
                 </div>
 
                 <div class="video_title">{{ videoPlayerName[0] }}</div>
 
                 <div class="video_title">{{ videoPlayerName[0] }}</div>
 
-
 
+                  <!-- <hkv1  v-if="HKshow" :companyVideoData="VideoData"/> -->
 
                 <!-- <div class="video_body1"><HKVideo :companyVideoData="mainVideoData" :videoType="1"></HKVideo></div> -->
 
                 <!-- <div class="video_body1"><HKVideo :companyVideoData="mainVideoData" :videoType="1"></HKVideo></div> -->
 
-                <video  id="videoPlayerTask" class="video-js" muted></video>
 
-
 
+                <!-- <video  id="videoPlayerTask" class="video-js" muted></video> -->
 
+          
+          
+            <!-- <hkv1 ref="hk1" v-if="HKshow"  style="position = absolute;"/> -->
 
                 <!-- <div><HKVideo :companyVideoData="mainVideoData"></HKVideo></div> -->
 
                 <!-- <div><HKVideo :companyVideoData="mainVideoData"></HKVideo></div> -->
 
 
 
                 <!-- <div class="center_no_data">
 
                 <!-- <div class="center_no_data">
 
@@ -240,7 +242,7 @@
 
                 </div>
 
                 </div>
 
                 <!-- <div class="video_body2"><HKVideo2  :companyVideoData="mainVideoData" :videoType="2"></HKVideo2></div> -->
 
                 <!-- <div class="video_body2"><HKVideo2  :companyVideoData="mainVideoData" :videoType="2"></HKVideo2></div> -->
 
                 <div class="task_outer_cotnainer_status">
 
                 <div class="task_outer_cotnainer_status">
 
-                  <div class="video_flex_style" style="padding-top: 12px">
 
+                  <!-- <div class="video_flex_style" style="padding-top: 12px">
 
                     <div>
 
                     <div>
 
                       <div class="video_title">{{ videoPlayerName[1] }}</div>
 
                       <div class="video_title">{{ videoPlayerName[1] }}</div>
 
                       <video id="videoPlayer_first" class="video-js" muted></video>
 
                       <video id="videoPlayer_first" class="video-js" muted></video>
 
@@ -257,7 +259,8 @@
 
                       <div class="video_title">{{ videoPlayerName[4] }}</div>
 
                       <div class="video_title">{{ videoPlayerName[4] }}</div>
 
                       <video id="videoPlayer_fourth" class="video-js" muted></video>
 
                       <video id="videoPlayer_fourth" class="video-js" muted></video>
 
                     </div>
 
                     </div>
 
-                  </div>
 
+                  </div> -->      
+                   <hkv v-if="HKshow" :companyVideoData="VideoData"/>
 
                   <div class="center_no_data" v-if="false">
 
                   <div class="center_no_data" v-if="false">
 
                     <el-image
 
                     <el-image
 
                       style="width: 100px; height: 100px; margin-right: 6px"
 
                       style="width: 100px; height: 100px; margin-right: 6px"
 
@@ -321,17 +324,22 @@ var uploadedDataURL = require('../../public/json/taiyuan.json')
 
 import './taskScreen.css'
 
 import './taskScreen.css'
 
 import Videojs from "video.js"; // 引入Videojs
 
 import Videojs from "video.js"; // 引入Videojs
 
 import FormTaskProcessViewer from '../components/workflow/formTaskProcessViewer.vue';
 
 import FormTaskProcessViewer from '../components/workflow/formTaskProcessViewer.vue';
 
+import hkv from '../components/hk/hkv.vue'
 
+import hkv1 from '../components/hk/hkv1.vue'
 
 
 
 export default {
 
 export default {
 
   components:{
 
   components:{
 
     myFlylineChartEnhanced,
 
     myFlylineChartEnhanced,
 
     sacleBox,
 
     sacleBox,
 
     myscrollBoard,
 
     myscrollBoard,
 
-
 
-    FormTaskProcessViewer
 
+    hkv,
 
+    hkv1,
 
+    FormTaskProcessViewer,
 
   },
 
   },
 
   data() {
 
   data() {
 
     return {
 
     return {
 
+
 
+      HKshow: false,
 
       systemFinshedValue:'',
 
       systemFinshedValue:'',
 
       unitFinshedValue:'',
 
       unitFinshedValue:'',
 
       wholeOutTaskId:'',
 
       wholeOutTaskId:'',
 
@@ -383,11 +391,15 @@ export default {
 
         "videoPlayer_fourth"
 
         "videoPlayer_fourth"
 
       ],
 
       ],
 
       mainVideoData: {},
 
       mainVideoData: {},
 
-      currentSubject: ''
 
+      currentSubject: '',
 
+      VideoData:[],
 
     };
 
     };
 
   },
 
   },
 
   methods:{
 
   methods:{
 
+   
     jumpToHistory() {
 
     jumpToHistory() {
 
+      // this.$refs.hk.$destroy();
 
+      //     this.HKshow = false;
 
       this.$router.push("/situationScreen")
 
       this.$router.push("/situationScreen")
 
     },
 
     },
 
     // 表格样式修改
 
     // 表格样式修改
 
@@ -685,8 +697,16 @@ export default {
 
     },
 
     },
 
     // 全屏事件
 
     // 全屏事件
 
     showFull(id){
 
     showFull(id){
 
+      console.log('this.VideoData :>> ', this.VideoData);
 
       console.log('ckx debug  监控大屏' )
 
       console.log('ckx debug  监控大屏' )
 
-      this.$router.push('/monitorScreen')
 
+      this.$router.push(
 
+   {
 
+  path: './monitorScreen',
 
+  query: {
 
+    videoData: JSON.stringify(this.VideoData)
 
+  }
 
+}
 
+      )
 
     },
 
     },
 
     // 退出全屏
 
     // 退出全屏
 
     exitFull(){
 
     exitFull(){
 
@@ -802,7 +822,22 @@ export default {
 
         this.videoPlayerName[index++] = res.data[item].name;
 
         this.videoPlayerName[index++] = res.data[item].name;
 
       }
 
       }
 
     },
 
     },
 
-
 
+    resolveUrl(url){
 
+      if(url ==''){
 
+        return;
 
+      }
 
+    let data = {};
 
+    url = url.split("/");
 
+    url = url[2];
 
+    url = url.split(":");
 
+    data.Username = url[0];
 
+    data.Port = 80;
 
+    url = url[1];
 
+    url = url.split("@");
 
+    data.ip = url[1];
 
+    data.Password = url[0];
 
+    return data;
 
+    },
 
     async changeVideo(subjectName) {
 
     async changeVideo(subjectName) {
 
       if (subjectName == '')
 
       if (subjectName == '')
 
         return;
 
         return;
 
@@ -846,26 +881,33 @@ export default {
 
   },
 
   },
 
   mounted() {
 
   mounted() {
 
 
 
-    // let url = "rtsp://admin:sgw123456@192.168.0.64:554/h265/ch01/main/av_stream";
 
-    // url = url.split("/");
 
-    // url = url[2];
 
-    // url = url.split(":");
 
-    // this.mainVideoData.Username = url[0];
 
-    // this.mainVideoData.Port = url[2];
 
-    // url = url[1];
 
-    // url = url.split("@");
 
-    // this.mainVideoData.IP = url[1];
 
-    // this.mainVideoData.Password = url[0];
 
-    // console.log("this.mainVideoData :>> ", this.mainVideoData);
 
 
 
+     this.initUrl('步坦协同课目');
 
+      setTimeout(() => {
 
+     
+     console.log('this.dataSrc :>> ', this.dataSrc);
 
+    for(let index = 0; index < this.dataSrc.length;index++)
 
+    {
 
+      this.VideoData.push(this.resolveUrl(this.dataSrc[index]))
 
+    }
 
+
 
+    console.log('this.VideoData :>> ', this.VideoData);
 
+
 
+    }, 1000);
 
+
 
+     setTimeout(() => {
 
+     
+      this.HKshow = true;
 
+
 
+    }, 800);
 
     // 获取全部单位
 
     // 获取全部单位
 
     this.getAllUnits();
 
     this.getAllUnits();
 
     // 获取全部系统
 
     // 获取全部系统
 
     this.getAllSystems();
 
     this.getAllSystems();
 
     // 建立任务的weksocket链接
 
     // 建立任务的weksocket链接
 
     this.initWebsoket();
 
     this.initWebsoket();
 
+    
 
 
-    // this.initUrl()
 
     // this.currentSubject = "步坦协同课目";
 
     // this.currentSubject = "步坦协同课目";
 
     //
 
     //
 
     // //     // 过14秒调用
 
     // //     // 过14秒调用
 
@@ -877,6 +919,8 @@ export default {
 
     // }, 5000);
 
     // }, 5000);
 
   },
 
   },
 
   beforeDestroy() {
 
   beforeDestroy() {
 
+    this.HKshow = false;
 
+
 
     if (this.playerList.length) {
 
     if (this.playerList.length) {
 
       this.playerList.forEach((item) => {
 
       this.playerList.forEach((item) => {
 
         item.dispose();
 
         item.dispose();

Some files were not shown because too many files changed in this diff