DT_screen/src/views/taskScreen.vue

<template>
  <v-scale-screen width="2200" height="1080">
    <div  class="task_screen_cotainer">
      <div class="task_header">「{{ currentTaskName }}」当前态势</div>
      <div class="tag" @click="jumpToHistory">
        历史态势
      </div>
      <div class="content_cotainer">
        <div class="center_chart_cotainer_task" id="taskItem">
          <div class="task_detail_cotainer_task" style="width:100%;">
            <div v-if="false" class="header_line_style">
              <div class="headerTitle"></div>
            </div>
            <div v-if="false" class="task_name_header">「{{ currentTaskName }}」任务态势大屏</div>
            <!-- 任务屏幕 -->
            <div class="task_item_header">
              <el-select
                v-model="wholeOutTaskId"
                placeholder="「切换任务」"
                style="width:270px;"
                @change="changeTask"
                filterable
              >
                <el-option
                  v-for="item in taskOPtion"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"

                >
                </el-option>
              </el-select>
              <el-image

                @click="showMoreInfo('more')"
                class="showLessStyle"
                style="width: 30px; height: 22px; margin-right:6px; margin-left: 10px;"
                :src="require('../assets/img/small.svg')"
                fit="contain"
              >
              </el-image>
              <el-image
                v-if="false"
                @click="showMoreInfo('less')"
                :src="require('../assets/img/iconMore.svg')"
                fit="contain"
                class="showLessStyle"
                style="width: 30px; height: 22px; margin-right:6px; margin-left: 10px;"
              >
              </el-image>
            </div>
            <div class="task_header_top">
              <div class="subject_task_item_task">
                <div class="task_outer_cotnainer_status">
                  <div class="map_more_box">
                    <div class="task_list_header" style="font-size:16px; margin: 0 24px 8px 0; white-space: nowrap; ">
                      <el-image
                        style="width: 30px; height: 22px; margin-right:6px;"
                        :src="require('../assets/img/rightIcon.svg')"
                        fit="contain"
                      >
                      </el-image>
                      课目分布
                    </div>
                    <div class="select_lsit_box">
                      <el-select
                        v-model="systemSubjectId"
                        placeholder="切换系统名称"
                        style="width:55%; margin-right:5px;"
                        @change="changeTaskAndSystem"
                        clearable
                        filterable
                      >
                        <el-option
                          v-for="item in systemOption"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value"

                        >
                        </el-option>
                      </el-select>
                      <el-select
                        v-model="unitSubjectValue"
                        placeholder="切换单位名称"
                        style="width:55%;"
                        clearable
                        @change="changeTaskAndUnit"
                        filterable
                      >
                        <el-option
                          v-for="item in unitOption"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value"

                        >
                        </el-option>
                      </el-select>
                    </div>
                  </div>
                  <div class="subject_list_container" id="subjectList">
                    <template v-for="(item,index) in subjectDatas">
                      <div class="subject_list_item_new" :key="index" @click="changeVideo(item.subjectName)">
                        <div class="subject_list_header">
                          <div>
                            <div class="subject_list_name">
                              {{  item.subjectName ||'-'  }}
                            </div>
                            <div class="orgainzers">
                              参与人员：{{  item.participatingPeople && item.participatingPeople.join(',') || '-' }}
                            </div>
                          </div>
                          <el-image
                            style="width: 36px; height: 36px; "
                            :src="subjectMap[item.status]"
                            fit="contain"
                          >
                          </el-image>
                        </div>
                        <div class="system_task_style">
                          <div>参加系统：{{ item.participatingSystems && item.participatingSystems.join(',') || '-'}}</div>
                          <div
                            v-if="item.status=='已完成'"
                            class="view_table_style"
                            @click="viewManData(item)">
                            表格查看
                          </div>
                        </div>
                      </div>
                    </template>

                  </div>

                </div>

              </div>
              <div class="unit_map_box_task_new">
                <div class="map_more_box">
                  <div class="task_list_header" style="font-size:16px; margin-bottom:8px;">
                    <el-image
                      style="width: 30px; height: 22px; margin-right:6px;"
                      :src="require('../assets/img/rightIcon.svg')"
                      fit="contain"
                    >
                    </el-image>
                    流程图
                  </div>

                </div>
                <form-task-process-viewer
                  :processInstanceId="processInstanceId"
                  :processDefinitionId="processDefinitionId"
                  v-if="isReady"
                  ref="FormTaskProcessViewer"
                ></form-task-process-viewer>
              </div>

            </div>
            <div class="task_header_footer_task_new">
              <div class="subject_task_item_task" style="width:28.2%;">
                <div class="task_outer_cotnainer_status">
                  <div class="task_outer_cotnainer_status">
                    <div class="map_more_box">
                      <div class="task_list_header" style="font-size:16px; margin-bottom:8px;">
                        <el-image
                          style="width: 30px; height: 22px; margin-right:6px;"
                          :src="require('../assets/img/rightIcon.svg')"
                          fit="contain"
                        >
                        </el-image>
                        指令监控
                      </div>
                    </div>

                    <div class="subject_list_container_int" id="moninter">
                      <div class="task_other_cotainer_scrool">
                        <myscrollBoard :key="updatekey" :config="scrollTableConfig" style="width: 100%; height: 100%" />
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="unit_map_box_task">
                <!-- <div class="task_outer_cotnainer_status"> -->
                <div class="map_more_box">
                  <div class="task_list_header" style="font-size: 16px; margin-bottom: 8px">
                    <el-image
                      style="width: 30px; height: 22px; margin-right: 6px"
                      :src="require('../assets/img/rightIcon.svg')"
                      fit="contain"
                    ></el-image>
                    训练态势监控
                  </div>
                  <el-image
                    @click="showFull('allVideo')"
                    style="width: 20px; height: 20px; margin-right: 6px; margin-top: -10px"
                    :src="require('../assets/img/iconMore.svg')"
                    fit="contain"
                    class="moreBtn_style"
                  ></el-image>
                </div>
                <div class="video_title">{{ camaraName[0] }}</div>
                <hk-camara  v-if="HKCamaraShow" :companyVideoData="camaraData" @init="HKCardInit" />
              </div>
              <div class="commandMonitoring_task">
                <div class="map_more_box">
                  <div class="task_list_header" style="font-size: 16px; margin-bottom: 8px">
                    <el-image
                      style="width: 30px; height: 22px; margin-right: 6px"
                      :src="require('../assets/img/rightIcon.svg')"
                      fit="contain"
                    ></el-image>
                    训练态势监控
                  </div>
                  <el-image
                    @click="showFull1('allVideo')"
                    style="width: 20px; height: 20px; margin-right: 6px; margin-top: -10px"
                    :src="require('../assets/img/iconMore.svg')"
                    fit="contain"
                    class="moreBtn_style"
                  ></el-image>
                </div>
                <!-- <div class="video_body2"><HKVideo2  :companyVideoData="mainVideoData" :videoType="2"></HKVideo2></div> -->
                <div class="task_outer_cotnainer_status">
                  <hkv v-if="HKCardShow" :companyVideoData="cardData" ref="hkv"/>
                  <div class="center_no_data" v-if="false">
                    <el-image
                      style="width: 100px; height: 100px; margin-right: 6px"
                      :src="require('../assets/img/build.png')"
                      fit="contain"
                    ></el-image>
                    <div>系统正在建设中，敬请期待～</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- 任务详情弹窗 -->
        <el-dialog
          title=""
          :show-close="false"
          :destroy-on-close="true"
          :visible.sync="dialogVisible"
          width="650px"
          top="300px"
        >
          <div>
            <div class="task_detail_dialog">
              <div class="header_line_style"></div>
              <div class="task_dialog_box_other" v-if="dialogType == 2">
                <el-table
                  :data="gridData"
                  :header-cell-style="changeHeaderCellStyle"
                  :cell-style="changeCellStyle"
                  stripe
                  :border="true"
                >
                  <el-table-column
                    align="center"
                    property="participantName"
                    label="姓名"
                    max-width="350"
                  ></el-table-column>
                  <el-table-column align="center" property="score" label="成绩" max-width="300"></el-table-column>
                </el-table>
              </div>
              <div class="dialog_footer_box">
                <div class="view_more" @click="dialogVisible = false" style="color: #fff; padding: 3px 30px">关闭</div>
              </div>
            </div>
          </div>
        </el-dialog>
      </div>
    </div>
  </v-scale-screen>
</template>
<script>

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 FormTaskProcessViewer from '../components/workflow/formTaskProcessViewer.vue';
import hkv from '../components/hk/hkv.vue'
import hkCamara from '../components/hk/hkCamara.vue'

export default {
  components:{
    myFlylineChartEnhanced,
    sacleBox,
    myscrollBoard,
    hkv,
    hkCamara,
    FormTaskProcessViewer,
  },
  data() {
    return {

      HKCardShow: false,
      HKCamaraShow: false,
      systemFinshedValue:'',
      unitFinshedValue:'',
      wholeOutTaskId:'',
      systemSubjectId:'',
      unitSubjectValue:'',
      subjectItem:{},
      processDefinitionId: "",
      processInstanceId:"",
      moreFlag:true,
      dialogVisible:false,
      taskList:[],
      websocket: null, //建立的连接
      websocketOrder: null, //建立的连接
      websocketBpmn: null, //建立的连接
      updatekey:'1',
      scrollTableConfig:{
        header: ['课目名称', '指令名称', '特情注入', '指令内容', '模训系统', '时间'],
        waitTime:1500,
        data: [],
        columnWidth: [80],
        oddRowBGC:'#072347',
        evenRowBGC:'#021736'
      },
      dialogType:1,
      subjectDatas:[],
      subjectMap:{
        '待执行':require('../assets/img/waite.png'),
        '执行中':require('../assets/img/doing.png'),
        '已完成':require('../assets/img/finshed.png') ,
      },
      instructList: [],
      unitOption: [],
      systemOption: [],
      taskOPtion: [],
      isReady: false,
      currentTaskName: "",
      currentTaskGrade: "",
      unitSubGradeValue: "",
      gridData: [],
      camaraSrc: ["", "", "", "", ""],
      completionRate: false,
      playerList: [],
      camaraName: ["监控名称", "监控名称", "监控名称", "监控名称", "监控名称"],
      videoList: [
        "videoPlayerTask",
        "videoPlayer_first",
        "videoPlayer_second",
        "videoPlayer_third",
        "videoPlayer_fourth"
      ],
      mainVideoData: {},
      currentSubject: '',
      camaraData:[],
      cardData:[],
      cardName:[],
      cardSrc:[]
    };
  },
  methods:{
    HKCardInit(){
      this.HKCardShow = true;
      console.log("🚀 test >> ", this.HKCardShow);
    },
    jumpToHistory() {
      // this.$refs.hk.$destroy();
      //     this.HKshow = false;

      this.$router.push("/situationScreen")


    },
    // 表格样式修改
    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;';
      }
    },
    // 获取全部系统
    async getAllSystems(){
      let params={}
      const res = await request('/dt_screen/rest/v1/screen/listSystem/', 'get', params, false)
      const { errorCode, errorMessage, success,data } = res.data;
      if (success) {
        console.log('获取全部系统', data);
        this.systemOption = data.map((item)=>{
          return {
            label:item.systemName,
            value: item.systemId
          }
        })
        this.systemFinshedValue=this.systemOption[0].value
      } else {
        this.$message.error(errorMessage)
      }
    },
    // 获取全部单位
    async getAllUnits (){
      let params={}
      const res = await request('/dt_screen/rest/v1/screen/listUnit/', 'get', params, false)
      const { errorCode, errorMessage, success,data } = res.data;
      if (success) {
        console.log('获取全部单位', data);
        // 获取任务数据
        this.getTaskList()
        this.unitOption = data.map((item)=>{
          return {
            label:item.unitName,
            value: item.unitId
          }
        })
        this.unitFinshedValue=this.unitOption[0].value
        this.unitSubGradeValue=this.unitOption[0].value
      } else {
        this.$message.error(errorMessage)
      }
    },
    // 获取任务列表
    async getTaskList() {
      let params = {};
      // const res = await request("/dt_screen/rest/v2/task/listCurrentTask/", "post", params, false);
      const res = await request("/dt_screen/rest/v2/task/listRunningTasks/", "post", params, false);
      const { errorCode, errorMessage, success, data } = res.data;
      if (success) {
        console.log("获取任务列表", data);
        this.taskList = data;
        this.wholeOutTaskId = data[0].taskId;
        this.processInstanceId = this.wholeOutTaskId;
        this.taskOPtion = data.map((item) => {
          return {
            label: item.taskName,
            value: item.taskId
          };
        });


        let param = {taskId: this.processInstanceId};
        const res1 = await request("/dt_screen/rest/v2/task/getDefId/", "post", param, false);
        this.processDefinitionId = res1.data;
        this.initWebsoketBpmn();
        this.isReady = true;
        this.currentTaskName = data[0].taskName;
        this.currentTaskGrade = data[0].syntheticTaskScore;
        // 获取地图的信息
        if (data.length) {
          // 获取任务的课目信息
          this.getSubjectList(data[0].taskId);
          // 获取任务的指令信息
          this.getinstructList(data[0].taskId);
          // 建立指令websocket 链接
          this.initInstructWebsoket();
        }
      } else {
        this.$message.error(errorMessage);
      }

    },
    // 切换任务
    async changeTask() {
      this.systemSubjectId = "";
      this.unitSubjectValue = "";
      this.isReady = false;
      this.currentTaskName = this.taskOPtion.find((item) => item.value == this.wholeOutTaskId).label;
      this.currentTaskGrade = this.taskList.find((item) => item.taskId == this.wholeOutTaskId).syntheticTaskScore;
      // 获取任务的课目信息
      this.processInstanceId = this.wholeOutTaskId;

      let param = {taskId: this.processInstanceId};
      const res2 = await request("/dt_screen/rest/v2/task/getDefId/", "post", param, false);
      console.log('res2 :>> ', res2.data);
      this.processDefinitionId = res2.data;
      this.isReady = true;
      this.getSubjectList(this.wholeOutTaskId);
      // 获取任务的指令信息
      this.getinstructList(this.wholeOutTaskId);
      // 建立指令websocket 链接
      this.initInstructWebsoket();
      this.initWebsoketBpmn();
    },
    changeTaskAndUnit() {
      this.systemSubjectId=''
      if(this.unitSubjectValue){
        this.getUnitSubjectList(this.wholeOutTaskId, this.unitSubjectValue)
      }else {
        this.getSubjectList(this.wholeOutTaskId)
      }
    },
    changeTaskAndSystem() {
      this.unitSubjectValue=''
      if(this.systemSubjectId){
        this.getSystemSubjectList(this.wholeOutTaskId, this.systemSubjectId)
      }else {
        this.getSubjectList(this.wholeOutTaskId)
      }
    },
    // 获取任务的课目信息
    async getSubjectList(taskId){
      let params={}
      const res = await request(`/dt_screen/rest/v2/subject/list/${taskId}`, 'get', params, false)
      const { errorCode, errorMessage, success,data } = res.data;
      if (success) {
        console.log('获取任务的课目信息', data);
        this.subjectDatas=data
        this.initUrl(this.subjectDatas[0].subjectName)
      } else {
        this.$message.error(errorMessage)
      }
    },
    // 获取任务的指令
    async getinstructList (taskId) {
      let params={}
      const res = await request(`/dt_screen/rest/v2/order/list/${taskId}`, 'get', params, false)
      const { errorCode, errorMessage, success,data } = res.data;
      if (success) {
        console.log('获取任务的指令', data);
        this.instructList=data
        let tempData=[]
        data.forEach((item)=>{
          tempData.push([item.subjectName,item.content,item.time,item.sort, item.system])
        })
        this.scrollTableConfig.data=tempData
        this.updatekey=new Date().getTime()

      } else {
        this.$message.error(errorMessage)
      }
    },
    // 切换单位再结合任务id 获取课目课目列表
    async getUnitSubjectList(taskId,unitId){
      let params={}
      params["taskId"] = taskId
      params["unitId"] = unitId
      // const res = await request(`/dt_screen/rest/v1/subject/list/task/${taskId}/unit/${unitId}`, 'get', params, false)
      const res = await request(`/dt_screen/rest/v2/subject/listByCondition`, 'post', params, false)
      const { errorCode, errorMessage, success,data } = res.data;
      if (success) {
        this.subjectDatas=data
      } else {
        this.$message.error(errorMessage)
      }
    },
    // 切换系统再结合任务id 获取课目课目列表
    async getSystemSubjectList(taskId,systemId){
      let params={}
      params["taskId"] = taskId
      params["systemId"] = systemId
      // const res = await request(`/dt_screen/rest/v1/subject/list/task/${taskId}/system/${systemId}`, 'get', params, false)
      const res = await request(`/dt_screen/rest/v2/subject/listByCondition`, 'post', params, false)
      const { errorCode, errorMessage, success,data } = res.data;
      if (success) {
        this.subjectDatas=data
      } else {
        this.$message.error(errorMessage)
      }
    },
    // 建立websocket 链接 任务
    initWebsoket(){
      this.websocket = new WebSocket(`ws://${this.$store.state.webSocketIp}:${this.$store.state.webSocketPort}/websocket/task`);//这里将http替换成ws
      switch (this.websocket.readyState) {
        case 0:
          console.log("正在连接");
          break;
        case 1:
          console.log("已经链接并且可以通讯");
          break;
        case 2:
          console.log("连接正在关闭");
          break;
        case 3:
          console.log("连接已关闭或者没有链接成功");
          break;
      };
      this.websocket.onopen = this.websocketsend;//websoket连接成功
      this.websocket.onmessage =this. websocketonmessage;//websoket收到信息
      this.websocket.onclose = this.websocketclose;//websoket连接关闭
    },
    websocketsend(){
      console.log('ws 连接成功');
    },
    websocketonmessage(msg){
      // 获取全部单位
      this.getAllUnits()
      // 获取全部系统
      this.getAllSystems()
      console.log('收到任务信息',msg);
    },
    websocketclose(){
      console.log('ws 连接关闭');
      this.initWebsoket();//重新建立连接
    },
    // 建立websocket 链接 任务
    initWebsoketBpmn(){
      this.websocketBpmn = new WebSocket(`ws://${this.$store.state.webSocketIp}:${this.$store.state.webSocketPort}/websocket/bpmn`);//这里将http替换成ws
      switch (this.websocketBpmn.readyState) {
        case 0:
          console.log("正在连接");
          break;
        case 1:
          console.log("已经链接并且可以通讯");
          break;
        case 2:
          console.log("连接正在关闭");
          break;
        case 3:
          console.log("连接已关闭或者没有链接成功");
          break;
      };
      this.websocketBpmn.onopen = this.bpmnWebsocketsend;//websoket连接成功
      this.websocketBpmn.onmessage =this.bpmnWebsocketonmessage;//websoket收到信息
      this.websocketBpmn.onclose = this.bpmnWebsocketclose;//websoket连接关闭
    },
    bpmnWebsocketsend(){
      console.log('ws 连接成功');
    },
    bpmnWebsocketonmessage(msg){
      // 更新流程图
      this.$refs.FormTaskProcessViewer.getTaskHighlightData();
      this.$refs.FormTaskProcessViewer.getTaskProcessXml();
      console.log('收到指令信息',msg);
    },
    bpmnWebsocketclose(){
      console.log('ws 连接关闭');
      this.initWebsoketBpmn();//重新建立连接
    },
    initInstructWebsoket(){
      // 指令的ws
      this.websocketOrder = new WebSocket(`ws://${this.$store.state.webSocketIp}:${this.$store.state.webSocketPort}/websocket/order/${this.wholeOutTaskId}`);//这里将http替换成ws
      switch (this.websocketOrder.readyState) {
        case 0:
          console.log("正在连接");
          break;
        case 1:
          console.log("已经链接并且可以通讯");
          break;
        case 2:
          console.log("连接正在关闭");
          break;
        case 3:
          console.log("连接已关闭或者没有链接成功");
          break;
      };
      this.websocketOrder.onopen = this.orderWebsocketsend;//websoket连接成功
      this.websocketOrder.onmessage =this. orderWebsocketonmessage;//websoket收到信息
      this.websocketOrder.onclose = this.orderWebsocketclose;//websoket连接关闭
    },
    orderWebsocketsend(){
      console.log('ws 连接成功');
    },
    orderWebsocketonmessage(msg){
      // 获取任务的指令信息
      this.getinstructList(this.wholeOutTaskId)
      console.log('收到指令信息',msg);
    },
    orderWebsocketclose(){
      console.log('ws 连接关闭');
      this.initInstructWebsoket();//重新建立连接
    },
    // 查看成绩表格
    viewManData(item){
      this.dialogType=2
      this.dialogVisible=true
      console.log('item',item);
      const { subjectScore } = item
      this.gridData=subjectScore
    },
    // 全屏事件
    showFull(id){
      console.log('this.camaraData :>> ', this.camaraData);
      console.log('ckx debug  监控大屏' )
      this.$router.push(
        {
          path: './monitorScreen',
          query: {
            camaraData: JSON.stringify(this.camaraData)
          }
        }
      )
    },
     showFull1(id){
      console.log('this.camaraData :>> ', this.cardData);
      console.log('ckx debug  监控大屏' )
      this.$router.push(
        {
          path: './monitorScreen',
          query: {
            camaraData: JSON.stringify(this.cardData)
          }
        }
      )
    },
    // 退出全屏
    exitFull(){
      let exitFullScreen =
        document.exitFullScreen ||
        document.mozCancelFullScreen ||
        document.webkitExitFullscreen ||
        document.msExitFullscreen;
      if (exitFullScreen) {
        exitFullScreen.call(document);
      }
      this.updatekey=new Date().getTime()
    },
    // 展开全屏
    requestFullScreen(elem){
      console.log('ckx debug ',  )
      // #兼容不同的浏览器
      var requestMethod =
        elem.requestFullScreen ||
        elem.webkitRequestFullScreen ||
        elem.mozRequestFullScreen ||
        elem.msRequestFullScreen;
      if (requestMethod) {
        requestMethod.call(elem);
      } else if (typeof window.ActiveXObject !== "undefined") {
        // #模拟F11 实现全屏
        var wscript = new ActiveXObject("WScript.Shell");
        if (wscript !== null) {
          wscript.SendKeys("{F11}");
        }
      }
      let that =this
      window.addEventListener('resize',function () {//执行
        let isFull = document.mozFullScreen ||
          document.fullScreen ||
          //谷歌浏览器及Webkit内核浏览器
          document.webkitIsFullScreen ||
          document.webkitRequestFullScreen ||
          document.mozRequestFullScreen ||
          document.msFullscreenEnabled
        if (isFull === undefined) {
          that.exitFull()
        }else {

        }
      })
    },
    checkFull() {
      //判断浏览器是否处于全屏状态 （需要考虑兼容问题）
      //火狐浏览器
      let isFull = document.mozFullScreen ||
        document.fullScreen ||
        //谷歌浏览器及Webkit内核浏览器
        document.webkitIsFullScreen ||
        document.webkitRequestFullScreen ||
        document.mozRequestFullScreen ||
        document.msFullscreenEnabled
      if (isFull === undefined) {
        isFull = false
      }
      return isFull;
    },
    showMoreInfo(type){
      if(type=='more'){
        this.$router.push('/situationScreen')
      }else {
        this.$router.push('/taskScreen')
      }
    },

    // 初始化视频
    initVideo(nowPlayVideoUrl,id) {
      let that =this

      // 这些options属性也可直接设置在video标签上，见 muted
      let options = {
        autoplay: true, // 设置自动播放
        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)

    },

    async initUrl(subjectName) {
      if (subjectName == '')
        return;

      let params = {
        subjectName: subjectName,
        taskId: this.wholeOutTaskId
      };
      this.currentSubject = subjectName;
      this.camaraData = [];
      this.cardData = [];
      const res = await request("/dt_screen/rest/v2/video/videos/getSubjectUrls", "post", params, false);
      let index = 0;
      this.camaraSrc = ["", "", "", "", ""];
      this.camaraName = ["监控名称", "监控名称", "监控名称", "监控名称", "监控名称"];

      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 = {
          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
        };
         this.camaraData.push(data);
      }

      setTimeout(() => {
        this.HKCamaraShow = true;
      }, 800);

       let params1 = {
        subjectName: subjectName,
        taskId: this.wholeOutTaskId
      };
      this.currentSubject = subjectName;
      const res1 = await request("/dt_screen/rest/v2/video/videos/getSubjectCardUrls", "post", params1, false);

      let index1 = 0;
      this.cardSrc = ["", "", "", "", ""];
      this.cardName = ["监控名称", "监控名称", "监控名称", "监控名称", "监控名称"];
      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 = {
          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
        };
         this.cardData.push(data);
      }
      // setTimeout(() => {

      //   for(let index = 0; index < this.cardSrc.length;index++)
      //   {
      //     this.cardData.push(this.resolveUrl(this.cardSrc[index]))
      //   }
      // }, 1000);

    },
    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];
      data.channelName = "test1";
      return data;
    },
    async changeVideo(subjectName) {
      if (subjectName == '')
        return;
      if(subjectName != this.currentSubject) {
        this.currentSubject = subjectName;
        this.$refs.hkv.stopAll();
        this.camaraData = [];
        this.cardData = [];
        this.initUrl(subjectName);
      }
    }
  },
  mounted() {



    // 获取全部单位
    this.getAllUnits();
    // 获取全部系统
    this.getAllSystems();
    // 建立任务的weksocket链接
    this.initWebsoket();
    // setTimeout(() => {
    // this.initUrl('步坦协同课目');
    //   }, 1000);
    //   setTimeout(() => {

    //  console.log('this.camaraSrc :>> ', this.camaraSrc);
    // for(let index = 0; index < this.camaraSrc.length;index++)
    // {
    //   this.camaraData.push(this.resolveUrl(this.camaraSrc[index]))
    // }

    // console.log('this.camaraData :>> ', this.camaraData);

    // }, 1000);

    //  setTimeout(() => {

    //   this.HKshow = true;

    // }, 800);

    // this.currentSubject = "步坦协同课目";
    //
    // //     // 过14秒调用
    // setTimeout(() => {
    //   for (let index = 0; index < this.camaraSrc.length; index++) {
    //     console.log('object :>> ',this.camaraSrc[index]);
    //     this.initVideo(this.camaraSrc[index], this.videoList[index]);
    //   }
    // }, 5000);
  },
  beforeDestroy() {
    this.HKshow = false;

    if (this.playerList.length) {
      this.playerList.forEach((item) => {
        item.dispose();
      });
    }
    let params ={}
    const res = request("/dt_screen/video/videos/videoClose", "get", params, false);
  }
};
</script>
<style scoped>
#videoPlayerTask {
  width: 906px;
  height: 350px;
}

#videoPlayer_first {
  width: 278px;
  height: 164px;
  margin-right: 10px;
  margin-bottom: 10px;
}

#videoPlayer_second {
  width: 278px;
  height: 164px;
  margin-bottom: 10px;
}

#videoPlayer_third {
  width: 278px;
  height: 164px;
  margin-right: 10px;
}

#videoPlayer_fourth {
  width: 278px;
  height: 164px;
}
.video_flex_style {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  padding: 10px 0;
  box-sizing: border-box;
}
</style>