DT_screen/src/views/taskScreen.vue

<template>
  <v-scale-screen width="2200" height="1080">
    <div class="task_screen_cotainer">
      <div class="task_header">「{{ currentTaskName }}」任务态势大屏
        <el-button @click="changeVideo"></el-button>
      </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"
                ></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">{{ videoPlayerName[0] }}</div>

                <!-- <div class="video_body1"><HKVideo :companyVideoData="mainVideoData" :videoType="1"></HKVideo></div> -->
                <video  id="videoPlayerTask" class="video-js" muted></video>

                <!-- <div><HKVideo :companyVideoData="mainVideoData"></HKVideo></div> -->

                <!-- <div class="center_no_data">
                <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 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="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_body2"><HKVideo2  :companyVideoData="mainVideoData" :videoType="2"></HKVideo2></div> -->
                <div class="task_outer_cotnainer_status">
                  <div class="video_flex_style" style="padding-top: 12px">
                    <div>
                      <div class="video_title">{{ videoPlayerName[1] }}</div>
                      <video id="videoPlayer_first" class="video-js" muted></video>
                    </div>
                    <div>
                      <div class="video_title">{{ videoPlayerName[2] }}</div>
                      <video id="videoPlayer_second" class="video-js" muted></video>
                    </div>
                    <div>
                      <div class="video_title">{{ videoPlayerName[3] }}</div>
                      <video id="videoPlayer_third" class="video-js" muted></video>
                    </div>
                    <div>
                      <div class="video_title">{{ videoPlayerName[4] }}</div>
                      <video id="videoPlayer_fourth" class="video-js" muted></video>
                    </div>
                  </div>
                  <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 * as echarts from "echarts";
import myFlylineChartEnhanced from "../components/my-flyline-chart-enhanced/index";
import formTaskProcessViewer from "@/components/workflow/formTaskProcessViewer";
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 HKVideo from "../components/HKVS/hkv.vue";
import HKVideo2 from "../components/HKVS/hkv2.vue"

export default {
  components: {
    myFlylineChartEnhanced,
    sacleBox,
    myscrollBoard,
    HKVideo,
    HKVideo2,
    FormTaskProcessViewer
  },
  data() {
    return {
      systemFinshedValue: "",
      unitFinshedValue: "",
      wholeOutTaskId: "",
      systemSubjectId: "",
      unitSubjectValue: "",
      subjectItem: {},
      processDefinitionId: "",
      processInstanceId: "",
      moreFlag: true,
      dialogVisible: false,
      taskList: [],
      websocket: null, //建立的连接
      websocketOrder: 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: [],
      dataSrc: ["rtsp://admin:sgw123456@192.168.0.64:554/h265/ch01/main/av_stream", "", "", "", ""],
      completionRate: false,
      playerList: [],
      videoPlayerName: ["监控名称", "监控名称", "监控名称", "监控名称", "监控名称"],
      videoList: [
        "videoPlayerTask",
        "videoPlayer_first",
        "videoPlayer_second",
        "videoPlayer_third",
        "videoPlayer_fourth"
      ],
      mainVideoData: {}
    };
  },
  methods: {
    // 表格样式修改
    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 { errorCode, errorMessage, success, data } = res.data;
      if (success) {
        console.log("获取任务列表", data);
        this.taskList = data;
        this.taskOPtion = data.map((item) => {
          return {
            label: item.taskName,
            value: item.taskId
          };
        });

        this.wholeOutTaskId = data[0].taskId;
        this.processInstanceId = this.wholeOutTaskId;
         let param = {taskId: this.processInstanceId};
        const res1 = await request("/dt_screen/rest/v2/task/getDefId/", "post", param, false);
        this.processDefinitionId = res1.data;
     
        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();
    },
    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/v1/subject/list/${taskId}`, "get", params, false);
      const { errorCode, errorMessage, success, data } = res.data;
      if (success) {
        console.log("获取任务的课目信息", data);
        this.subjectDatas = data;
      } else {
        this.$message.error(errorMessage);
      }
    },
    // 获取任务的指令
    async getinstructList(taskId) {
      let params = {};
      const res = await request(`/dt_screen/rest/v1/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]);
        });
        this.scrollTableConfig.data = tempData;
        this.updatekey = new Date().getTime();
      } else {
        this.$message.error(errorMessage);
      }
    },
    // 切换单位再结合任务id 获取课目课目列表
    async getUnitSubjectList(taskId, unitId) {
      let params = {};
      const res = await request(`/dt_screen/rest/v1/subject/list/task/${taskId}/unit/${unitId}`, "get", 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 = {};
      const res = await request(
        `/dt_screen/rest/v1/subject/list/task/${taskId}/system/${systemId}`,
        "get",
        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://43.143.221.128:8084/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(); //重新建立连接
    },
    initInstructWebsoket() {
      // 指令的ws
      this.websocketOrder = new WebSocket(`ws://43.143.221.128:8084/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("ckx debug  监控大屏");
      this.$router.push("/monitorScreen");
    },
    // 退出全屏
    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(this.playerList.length){
      // 	this.playerList.forEach((item)=>{
      // 		item.dispose()
      // 	})
      // }
      let params = {
        subjectName: subjectName
      };
      const res = await request("/dt_screen/video/videos/getUnitUrl", "post", params, false);
      let index = 0;
      this.dataSrc = ["", "", "", "", ""];
      this.videoPlayerName = ["监控名称", "监控名称", "监控名称", "监控名称", "监控名称"];
      for (let item in res.data) {
        this.dataSrc[index] = res.data[item].url;
        this.videoPlayerName[index++] = res.data[item].name;
      }
    },
    changeVideo(subjectName) {
      // if(this.playerList.length){
      // 	this.playerList.forEach((item)=>{
      // 		item.dispose()
      // 	})
      // }
      let params = {};
       request("/dt_screen/video/videos/videoClose", "get", params, false);
      
      // const res = request("/dt_screen/video/videos/videoClose", "get", params, false);
      // this.initUrl(subjectName + "课目");
      // setTimeout(() => {
      //   let index = 0;

      //   this.playerList.forEach((item) => {
      //     item.src([{ type: "application/x-mpegURL", src: this.dataSrc[index++] }]);
      //     item.load();
      //     item.play();
      //   });
      // }, 35000);
    }
  },
  mounted() {
    //  this.initUrl()
    let url = "rtsp://admin:sgw123456@192.168.0.64:554/h265/ch01/main/av_stream";
    url = url.split("/");
    url = url[2];
    url = url.split(":");
    this.mainVideoData.Username = url[0];
    this.mainVideoData.Port = url[2];
    url = url[1];
    url = url.split("@");
    this.mainVideoData.IP = url[1];
    this.mainVideoData.Password = url[0];
    console.log("this.mainVideoData :>> ", this.mainVideoData);

    // 获取全部单位
    this.getAllUnits();
    // 获取全部系统
    this.getAllSystems();
    // 建立任务的weksocket链接
    this.initWebsoket();



    //     // 过14秒调用
    // setTimeout(() => {
    //   for (let index = 0; index < this.dataSrc.length; index++) {
    //     this.initVideo(this.dataSrc[index], this.videoList[index]);
    //   }
    // }, 5500);
  },
  beforeDestroy() {
    if (this.playerList.length) {
      this.playerList.forEach((item) => {
        item.dispose();
      });
    }
    
    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>