DT_screen/src/views/monitorScreen.vue

<template>
  <v-scale-screen width="2200" height="1080">
    <div  class="task_screen_cotainer">
      <div class="task_header">训练态势监控大屏</div>
      <div class="exit_box_hanlde">
        <el-image
          @click="showFull"
          style="width: 20px; height: 20px; margin-right:6px; margin-top: -10px;"
          :src="require('../assets/img/small.svg')"
          fit="contain"
          class="moreBtn_style"
        >
        </el-image>
      </div>
      <div class="monitor_video_box">
        <div class="full_video_box">
          <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=5></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 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>
          </div>

        </div>
      </div>
    </div>
  </v-scale-screen>
</template>
<script>
import * as echarts from 'echarts';
import myFlylineChartEnhanced from '../components/my-flyline-chart-enhanced/index'
import myscrollBoard from '../components/myscroll-board/src/main'
import sacleBox from '../components/sacle-box/index'
import { request } from '../utils/request';
var uploadedDataURL = require('../../public/json/taiyuan.json')
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
    },
  },
  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,

      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
    },
    checkWindow(){
      let that = this
      console.log("this.selectWindow1",this.selectWindow)
      let xuanzhongchuangkou = this.selectWindow
      //播放前先停止当前窗口播放其他视频
      this.bigcamaraData.data.forEach(function(obj,index) {
        console.log(index);
        // console.log(obj);
        console.log(obj.windowList);
        if (obj.windowList.length != 0) {
          obj.windowList.forEach(function (obj, index) {
            console.log("camaraData序号，数值",index,obj);
            if (parseInt(obj) == xuanzhongchuangkou) {//该窗口已播放视频
              console.log("cardData该窗口已播放视频",this,that);
              that.$refs.hkbigCamara.stopPlayVideo()
              //删除窗口显示
              that.bigcamaraData.data[index].windowList = that.bigcamaraData.data[index].windowList.filter((element) => element !== that.selectWindow.toString());
              // if(that.$refs.hkbigCamara.stopPlayVideo()){
              //   that.bigcamaraData.data[index].windowList = that.bigcamaraData.data[index].windowList.filter((element) => element !== that.selectWindow.toString());
              // }


            }
          })
        }
      }),

      this.bigcardData.data.forEach(function(obj,index) {
        console.log(index);
        // console.log(obj);
        console.log(obj.windowList);
        if(obj.windowList.length!=0){
          obj.windowList.forEach(function(obj,index) {
            console.log("cardData序号，数值",index,obj);
            if(parseInt(obj)==xuanzhongchuangkou){//该窗口已播放视频
              console.log("cardData该窗口已播放视频",this,that);
              that.$refs.hkbigCamara.stopPlayVideo() //暂停播放该视频
              //删除窗口显示
              that.bigcardData.data[index].windowList = that.bigcardData.data[index].windowList.filter((element) => element !== that.selectWindow.toString());
              // if(that.$refs.hkbigCamara.stopPlayVideo()){
              //   that.bigcardData.data[index].windowList = that.bigcardData.data[index].windowList.filter((element) => element !== that.selectWindow.toString());
              // }
            }
          })
        }
      });
    },

    begin_bigcamaraData (a) {
      // let that = this
      if(this.bigcamaraData.data[a.$index].windowList.length<6) {
        // console.log("this.selectWindow1",this.selectWindow)
        // let xuanzhongchuangkou = this.selectWindow
        // //播放前先停止当前窗口播放其他视频
        // this.bigcamaraData.data.forEach(function(obj,index) {
        //   console.log(index);
        //   // console.log(obj);
        //   console.log(obj.windowList);
        //   if (obj.windowList.length != 0) {
        //     obj.windowList.forEach(function (obj, index) {
        //       console.log("camaraData序号，数值",index,obj);
        //       if (parseInt(obj) == xuanzhongchuangkou) {//该窗口已播放视频
        //         console.log("cardData该窗口已播放视频",this,that);
        //         that.$refs.hkbigCamara.stopPlayVideo()
        //         //删除窗口显示
        //         that.bigcamaraData.data[index].windowList = that.bigcamaraData.data[index].windowList.filter((element) => element !== that.selectWindow.toString());
        //       }
        //     })
        //   }
        // }),
        //
        // this.bigcardData.data.forEach(function(obj,index) {
        //   console.log(index);
        //   // console.log(obj);
        //   console.log(obj.windowList);
        //   if(obj.windowList.length!=0){
        //     obj.windowList.forEach(function(obj,index) {
        //       console.log("cardData序号，数值",index,obj);
        //       if(parseInt(obj)==xuanzhongchuangkou){//该窗口已播放视频
        //         console.log("cardData该窗口已播放视频",this,that);
        //         that.$refs.hkbigCamara.stopPlayVideo() //暂停播放该视频
        //         //删除窗口显示
        //         that.bigcardData.data[index].windowList = that.bigcardData.data[index].windowList.filter((element) => element !== that.selectWindow.toString());
        //       }
        //     })
        //   }
        // });
        this.checkWindow()

        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);
        if(this.$refs.hkbigCamara.login(myArray)){
          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);
        }
        // this.$refs.hkbigCamara.login(myArray).catch(error => {
        //       // 捕获错误并获取错误代码
        //       const errorCode = error.errorCode;
        //       console.log(errorCode);
        //       if (errorCode == 2001) {//继续播放
      }
    },
    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) {
      // let that = this
      if(this.bigcardData.data[a.$index].windowList.length<6){
        // console.log("this.selectWindow",this.selectWindow)
        // let xuanzhongchuangkou = this.selectWindow
        // //播放前先停止当前窗口播放其他视频
        // this.bigcamaraData.data.forEach(function(obj,index) {
        //   console.log(index);
        //   // console.log(obj);
        //   console.log(obj.windowList);
        //   if (obj.windowList.length != 0) {
        //     obj.windowList.forEach(function (obj, index) {
        //       console.log("camaraData序号，数值",index,obj);
        //       if (parseInt(obj) == xuanzhongchuangkou) {//该窗口已播放视频
        //         console.log("cardData该窗口已播放视频",this,that);
        //         that.$refs.hkbigCamara.stopPlayVideo()
        //         //删除窗口显示
        //         that.bigcamaraData.data[index].windowList = that.bigcamaraData.data[index].windowList.filter((element) => element !== that.selectWindow.toString());
        //       }
        //     })
        //   }
        // }),
        // this.bigcardData.data.forEach(function(obj,index) {
        //   console.log(index);
        //   // console.log(obj);
        //   console.log(obj.windowList);
        //   if(obj.windowList.length!=0){
        //     obj.windowList.forEach(function(obj,index) {
        //       console.log("cardData序号，数值",index,obj);
        //       if(parseInt(obj)==xuanzhongchuangkou){//该窗口已播放视频
        //         console.log("cardData该窗口已播放视频",this,that);
        //         that.$refs.hkbigCamara.stopPlayVideo() //暂停播放该视频
        //         //删除窗口显示
        //         that.bigcardData.data[index].windowList = that.bigcardData.data[index].windowList.filter((element) => element !== that.selectWindow.toString());
        //       }
        //     })
        //   }
        // });
        this.checkWindow()

        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);
        if(this.$refs.hkbigCamara.login(myArray)){
          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')
    },

    // 初始化视频
    initVideo(nowPlayVideoUrl,id,isAuto) {
      let that =this
      // 这些options属性也可直接设置在video标签上，见 muted
      let options = {
        autoplay: isAuto, // 设置自动播放
        controls: true, // 显示播放的控件
        sources: [
          // 注意，如果是以option方式设置的src,是不能实现 换台的 (即使监听了nowPlayVideoUrl也没实现)
          {
            src: nowPlayVideoUrl,
            type: "application/x-mpegURL" // 告诉videojs,这是一个hls流
          }
        ]
      };
      // videojs的第一个参数表示的是，文档中video的id
      const myPlyer= Videojs(id, options, function onPlayerReady() {
        console.log("onPlayerReady 中的this指的是：", this); // 这里的this是指Player,是由Videojs创建出来的实例
        console.log(myPlyer === this); // 这里返回的是true
      });
      this.playerList.push(myPlyer)
    }


  },
  created(){
//   this.videoData = this.$route.query.videoData;
//   console.log(this.$route.query.videoData);
//     this.videoData = JSON.parse(this.$route.query.videoData);
    this.init();
  },
  mounted(){

    // this.init();

  },
  beforeDestroy() {
    if(this.playerList.length){
      this.playerList.forEach((item)=>{
        item.dispose()
      })
    }
  },
}
</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;
  color: #fff;
  height: 100%;
  width: 100%;
  padding: 10px;
  box-sizing: border-box;
}
.full_video_box {
  width: 80%;
  height: 100%;
  /* border:1px solid red; */
  padding: 10px;
  box-sizing: border-box;
  background-image:url('../assets/img/opitty.png');
  background-repeat:no-repeat;
  background-size:100% 100%;
  margin-right: 15px;
}
.full_video_list {
  width: 20%;
  height: 100%;
  /*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;
  padding-right: 4px;
}

#videoPlayerTask {
  width: 100%;
  height: 95%;
}

#videoPlayer_first {
  width: 419px;
  height: 182px;
  margin-right: 10px;
  margin-bottom: 10px;
}

#videoPlayer_second {
  width: 419px;
  height: 182px;
  margin-bottom: 10px;
}

#videoPlayer_third {
  width: 419px;
  height: 182px;
  margin-right: 10px;
  margin-bottom: 10px;
}

#videoPlayer_fourth {
  width: 419px;
  height: 182px;
}

</style>