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="tag1" @click="jumpToHistory">
        历史态势
      </div>
      <div class="tag2" @click="jumpToDangqian">
        当前态势列表
      </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="updatekey1" :config="subjectScoreTableConfig" style="width: 100%; height: 100%" />-->
                        <div class="subject_list_container" id="subjectList">
                          <template v-for="(item,index) in subjectDatas">
                            <div class="subject_list_item" :key="index">
                              <div class="subject_list_header">
                                <div>
                                  <div class="subject_list_name">
                                    {{  item.subjectName ||'-'  }}
                                  </div>
                                  <div class="SubjectNumber_style" style="font-size: 16px; color: #F1D73A;">
                                    {{ item.overallScore || '暂无课目成绩' }}
                                  </div>
                                </div>
                              </div>
                              <div class="system_task_style">
                                <div
                                    class="view_table_style"
                                    @click="viewManData(item)">
                                  参与人员成绩
                                </div>
                              </div>
                            </div>
                          </template>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="unit_map_box_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>
                </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 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="task_outer_cotnainer_status">
                  <hkv v-if="HKCardShow" :companyVideoData="hebingjiankongData" 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="pagedData" :header-cell-style="changeHeaderCellStyle" :cell-style="changeCellStyle" stripe:border="true">
                  <el-table-column align="center" label="序号" header-align="center" type="index" width="55px" :index="getTableIndex" />
                  <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-column align="center" label="成绩" max-width="300">
                    <template slot-scope="scope">
                      {{ formatScore(parseFloat(scope.row.score)) }}
                    </template>
                  </el-table-column>
                  <el-table-column align="center" property="uploadTime" label="上报时间" max-width="300"></el-table-column>
                </el-table>
                <el-row type="flex" justify="end" style="margin-top: 10px;">
                  <el-pagination
                      :total="this.gridData.length"
                      :current-page="this.gridData.currentPage"
                      :page-size="this.gridData.pageSize"
                      :page-sizes="[5,10,15, 20]"
                      layout="total, prev, pager, next, sizes"
                      @current-change="onCurrentPageChange"
                      @size-change="onPageSizeChange">
                  </el-pagination>
                </el-row>
              </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 {
      SubjectInfo1:'',
      SubjectInfo2:'',
      SubjectInfoList: ["所有课目"],
      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',
      updatekey1: '2',
      scrollTableConfig:{
        header: ['课目名称', '指令名称', '特情注入', '指令内容', '模训系统', '时间'],
        waitTime:1500,
        data: [],
        columnWidth: [150, 150, 150, 150, 150, 150],
        oddRowBGC:'#072347',
        evenRowBGC:'#021736'
      },
      subjectScoreTableConfig:{
        header: ['课目名称', '课目成绩', '人员成绩'],
        waitTime:1500,
        data: [],
        columnWidth: [200, 200, 200],
        align: ['center', 'center', 'center'],
        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:{
        data: [],
        length:0,
        currentPage:1,
        pageSize:10,
        paged:true,
      },
      camaraSrc: ["", "", "", "", ""],
      completionRate: false,
      playerList: [],
      camaraName: ["监控名称", "监控名称", "监控名称", "监控名称", "监控名称"],
      videoList: [
        "videoPlayerTask",
        "videoPlayer_first",
        "videoPlayer_second",
        "videoPlayer_third",
        "videoPlayer_fourth"
      ],
      mainVideoData: {},
      currentSubject: '',
      camaraData:[],
      cardData:[],
      hebingjiankongData:[],
      cardName:[],
      cardSrc:[]
    };
  },
  computed:{
    pagedData() { // 动态计算当前页的数据
      const start = (this.gridData.currentPage - 1) * this.gridData.pageSize
      const end = start + this.gridData.pageSize
      if(this.gridData.data.length!=0){
        return this.gridData.data.slice(start, end)
      }else{
        return null
      }
    }
  },
  methods:{
    /**
     * 保留两位小数
     */
    formatScore(score) {
      if (isNaN(score)) {
        return score;
      }
      return Number(score).toFixed(2);
    },
    /**
     * 获取每一行的index信息
     * @param {Integer} index 表格在本页位置
     */
    getTableIndex (index) {
      let a
      a=((this.gridData.currentPage - 1) * this.gridData.pageSize + (index + 1))
      return a;
    },
    onCurrentPageChange (newCurrentPage) {
      this.loadTableDataImpl2(newCurrentPage, this.gridData.pageSize).then(() => {//数据加载成功
        this.gridData.currentPage = newCurrentPage;
        this.oldPage = this.gridData.currentPage-1
        if(this.gridData.data.length <= newCurrentPage*this.gridData.pageSize   ){
          this.gridData.paged=true
        }else{
          this.gridData.paged=false
        }
      }).catch(() => {//数据加载失败
        this.gridData.currentPage = this.oldPage;
      });
    },
    /**
     * 表格分页每页显示数量变化
     * @param {Integer} newPageSize 变化后的每页显示数量
     */
    onPageSizeChange (newPageSize) {
      this.gridData.pageSize = newPageSize;
      this.gridData.currentPage = 1
      this.loadTableDataImpl2(1, newPageSize).then(() => {
        this.oldPage = this.gridData.currentPage;
        this.oldPageSize = this.gridData.pageSize;
      }).catch(e => {
        this.gridData.currentPage = this.oldPage;
        this.gridData.pageSize = this.oldPageSize;
      });
    },
    /**
     * 获取表格数据
     * @param {Integer} pageNum 当前分页
     * @param {Integer} pageSize 每页数量
     * @param {Boolean} reload 是否重新获取数据
     */
    loadTableDataImpl2 (pageNum, pageSize, reload = false) {
      // 判断是否需要重新加载数据
      if (this.gridData.data.length == 0 || this.gridData.length == 0) {
        return Promise.resolve([])
      }
      if (reload || !this.gridData.data || this.gridData.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.gridData.data = data;
          // 返回新的任务列表数据
          return this.gridData.data.slice((pageNum - 1) * pageSize, pageNum * pageSize);
        });
      } else {// 直接返回已有的任务列表数据
        return Promise.resolve(this.gridData.data.slice((pageNum - 1) * pageSize, pageNum * pageSize));
      }
    },


    HKCardInit(){
      this.HKCardShow = true;
    },
    jumpToHistory() {
      // this.$refs.hk.$destroy();
      //     this.HKshow = false;
      this.$router.push("/situationScreen")
    },

    jumpToDangqian() {
      this.$router.push("/mainScreen")
    },
    // 表格样式修改
    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;
        if(this.$route.query.key1){
          this.wholeOutTaskId = this.$route.query.key1;
          this.currentTaskName = this.$route.query.taskName;
          // currentTaskName
          // if(location.href.indexOf('#reloaded')==-1){
          //   location.href=location.href+"#reloaded";
          //   location.reload();
          // }
        }else{
          this.wholeOutTaskId = data[0].taskId;
          this.currentTaskName = data[0].taskName;
          this.currentTaskGrade = data[0].syntheticTaskScore;
        }

        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;
        // 获取地图的信息
        if (data.length) {
          // 获取任务的课目信息
          this.getSubjectList(this.wholeOutTaskId);
          // 获取任务的指令信息
          this.getinstructList(this.wholeOutTaskId);
          this.getSubjectAndMemberScore(this.wholeOutTaskId);
          // 建立指令websocket 链接
          this.initInstructWebsoket();
        }
      } else {
        this.$message.error(errorMessage);
      }

    },
    // 切换任务
    async changeTask() {
      this.$refs.hkv.stopAll()
      this.camaraData = []
      this.cardData = []
      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);
      this.getSubjectAndMemberScore(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={}
      let that=this
      // console.log('获取任务的课目信息param taskId', params,taskId);
      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);
        if(data.length !== 0){
          this.subjectDatas = data
          data.forEach(function(obj) {
            let name = obj.subjectName
            that.SubjectInfoList.push(name.toString())
          });

          // console.log("that.SubjectInfoList1",that.SubjectInfoList)
          this.SubjectInfo1=this.subjectDatas[0].subjectName
          this.SubjectInfo2=taskId
        }else{
          this.subjectDatas = []
        }
        // console.log("this.SubjectInfo1",this.SubjectInfo1, this.SubjectInfo2)

        this.getSubjectAndMemberScore(taskId)
        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.name, item.situation, item.content, item.system,item.time])
        })
        this.scrollTableConfig.data=tempData
        console.log("🚀 data >> ", this.scrollTableConfig.data);
        this.updatekey=new Date().getTime()

      } else {
        this.$message.error(errorMessage)
      }
    },
    // 获取课目成绩和人员成绩
    async getSubjectAndMemberScore (taskId) {
      this.subjectScoreTableConfig.data = []
      this.subjectDatas.forEach((data) => {
        console.log("🚀 data >> ", data)
        let subjectScoreData = {
          "subjectName": data.subjectName,
          "subjectScore": data.overallScore === undefined ? "暂无成绩" : data.overallScore,
          "button": `<button @click="viewMemberTable()">查看人员成绩</button>`,
          // "memberScore": data.subjectScore,
        };
        this.subjectScoreTableConfig.data.push(subjectScoreData);
      })
      this.updatekey1=new Date().getTime()
    },
    // 切换单位再结合任务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
      const { subjectScore } = item

      if(subjectScore==null){
        this.gridData.data = []
        this.gridData.length = this.gridData.data.length
      }else{
        this.gridData.data = subjectScore
        this.gridData.length = this.gridData.data.length
      }

    },
    // 全屏事件
    showFull(id){
      // console.log('this.camaraData :>> ', this.camaraData);
      console.log('ckx debug  监控大屏' )
      this.$router.push(
        {
          path: './monitorScreen',
          query: {
            subjectInfo1:this.SubjectInfo1,
            subjectInfo2:this.SubjectInfo2,
            subjectInfoList: this.SubjectInfoList,
            // camaraData: JSON.stringify(this.camaraData),
            // cardData: JSON.stringify(this.cardData)
          }
        }
      )
    },
     showFull1(id){
      // console.log('this.camaraData :>> ', this.cardData);
      console.log('ckx debug  监控大屏' )
      this.$router.push(
        {
          path: './monitorScreen',
          // query: {
          //   camaraData: JSON.stringify(this.cardData)
          // }
          query: {
            subjectInfo1:this.SubjectInfo1,
            subjectInfo2:this.SubjectInfo2,
            subjectInfoList:this.SubjectInfoList,
            // camaraData: JSON.stringify(this.camaraData),
            // cardData: 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 = [];
      this.hebingjiankongData = [];
      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
      // console.log("cansgu",params.subjectName,params.taskId)
      // console.log("res",res.data.data)
      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);
         this.hebingjiankongData.push(data);
      }

      setTimeout(() => {
        this.HKCardShow = 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);
      console.log('res1 :>> ', res1);
      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);
        this.hebingjiankongData.push(data);
      }
      // console.log('cardData :>> ', this.cardData);
      console.log('hebingjiankongData :>> ', this.hebingjiankongData);
    },
    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;
    },
    changeVideo(subjectName) {
      if (subjectName == '')
        return;
      if(subjectName != this.currentSubject) {
        this.SubjectInfo1=subjectName;
        this.currentSubject = subjectName;
        // this.$refs.hkv.stopAll();
        // this.$refs.hkCard.stopAll();
        this.camaraData = []
        this.cardData = []
        this.initUrl(subjectName);
      }
    }
  },
  mounted() {
    // 获取全部单位
    this.getAllUnits();
    // 获取全部系统
    this.getAllSystems();
    // 建立任务的weksocket链接
    this.initWebsoket();

    // this.SubjectInfo1=this.subjectName
    // this.SubjectInfo2=this.taskId
    // 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>