jhbigscreen/src/pages/projectVideo.vue

<template>
  <div class="project-video">
    <div class="screen-content">
      <!-- <div class="analyse-equipment analyse-equipment-position">视频监控</div> -->
      <el-row>
        <!-- <el-col :span="6">
                        <module-one-1-1 label="视频概况" :amplify="true" name="amplify-spjk">
                            <div class="equipment-list-max">
                                <el-row>
                                    <el-col :span="12">
                                        <div class="equipment-list-min">
                                            <div class="equipment-list-gif">
                                                <img src="images/video_1.png">
                                            </div>
                                            <div class="equipment-list-data">
                                                <p>项目监控</p>
                                                <div><span v-cloak>{{ cqNum }}</span>个</div>
                                            </div>
                                        </div>
                                    </el-col>
                                    <el-col :span="12">
                                        <div class="equipment-list-min">
                                            <div class="equipment-list-gif">
                                                <img src="images/video_2.png">
                                            </div>
                                            <div class="equipment-list-data">
                                                <p>吊钩监控</p>
                                                <div><span v-cloak>{{ dgNum }}</span>个</div>
                                            </div>
                                        </div>
                                    </el-col>
                                    <el-col :span="12">
                                        <div class="equipment-list-min">
                                            <div class="equipment-list-gif">
                                                <img src="images/video_3.png">
                                            </div>
                                            <div class="equipment-list-data">
                                                <p>AI智能监测</p>
                                                <div><span v-cloak>{{ aiNum }}</span>个</div>
                                            </div>
                                        </div>
                                    </el-col>
                                    <el-col :span="12">
                                        <div class="equipment-list-min">
                                            <div class="equipment-list-gif">
                                                <img src="images/video_4.png">
                                            </div>
                                            <div class="equipment-list-data">
                                                <p>离线视频</p>
                                                <div><span v-cloak>{{ offLineNum }}</span>个</div>
                                            </div>
                                        </div>
                                    </el-col>
                                </el-row>
                            </div>
                        </module-one-1-1>
                        <module-one-2-1 label="监控点位图">
                            <div class="video-field-layout" :style="videoMapStyle">                               
                                <div class="video-bgd-img-position" :style="{ 'top': video.x + 'px', 'left': video.y + 'px' }"
                                    v-for="video in VideoDistribution" @click="videoPlay(video)">
                                    <div :class="video.type == true ? 'video-bgd-div active' : 'video-bgd-div'"></div>
                                    <img src="/images/camera.png" class="video-bgd-img">
                                </div>
                            </div>
                        </module-one-2-1>                        
                    </el-col> -->
        <el-col :span="4">
          <module-one-3-1 label="视频列表">
            <div class="video-list-max">
              <div class="video-list-min">
                <div class="video-list-for" v-for="item in videoListData">
                  <ul class="video-list-ul" v-show="item.type">
                    <li
                      :class="video.type == true ? 'active' : ''"
                      v-for="(video, idx) in item.videoList"
                      @click.stop="handlePlay(video, idx)"
                    >
                      <button
                        :class="
                          video.signalState == 1 ? 'video-state-zx' : 'video-state-lx'
                        "
                      ></button>
                      <span>{{ video.videoName }}</span>
                    </li>
                  </ul>
                </div>
              </div>
            </div>
          </module-one-3-1>
        </el-col>
        <el-col :span="20">
          <module-one-video>
            <div class="video-enlarge-max" v-if="videoType">
              <div class="video-enlarge-title">
                <div>
                  <span v-cloak>{{ videoReturnData.videoName }}</span>
                  <label v-if="videoReturnData.signalState == 1" class="color-green"
                    >（在线）</label
                  >
                  <label v-if="videoReturnData.signalState != 1" class="police-data"
                    >（离线）</label
                  >
                </div>
                <div></div>
              </div>
              <div class="video-enlarge-content">
                <div class="videoView" v-if="showVideoView0">
                  <div id="vd01" v-if="parentVM.vd01Flag"></div>
                  <!--
                                        <H265Player :url="url0" @on-error="handleOnError0" />
                                        -->
                </div>
                <div class="videoView videoViewError" v-if="showVideoView0 == false">
                  设备0通道链接失败！请及时检查！
                </div>
                <div class="videoView" v-if="showVideoView1">
                  <!--
                                        <H265Player :url="url1" @on-error="handleOnError1" />
                                        -->
                  <div id="vd02" v-if="parentVM.vd02Flag"></div>
                </div>
                <div class="videoView videoViewError" v-if="showVideoView1 == false">
                  设备1通道链接失败！请及时检查！
                </div>
                <div class="videoView" v-if="showVideoView2">
                  <!--
                                        <H265Player :url="url2" @on-error="handleOnError2" />
                                        -->
                  <div id="vd03" v-if="parentVM.vd03Flag"></div>
                </div>
                <div class="videoView videoViewError" v-if="showVideoView2 == false">
                  设备2通道链接失败！请及时检查！
                </div>
                <div class="videoView" v-if="showVideoView3">
                  <!--
                                        <H265Player :url="url3" @on-error="handleOnError3" />
                                        -->
                  <div id="vd04" v-if="parentVM.vd04Flag"></div>
                </div>
                <div class="videoView videoViewError" v-if="showVideoView3 == false">
                  设备3通道链接失败！请及时检查！
                </div>
              </div>
            </div>
            <div class="video-enlarge-max" v-if="vehicleType">
              <div class="video-vehicle-table">
                <el-table :data="vehicleMonitorData" class="elTable">
                  <el-table-column label="进出场照片">
                    <template slot-scope="scope">
                      <el-row>
                        <el-col :span="6">
                          <div class="vehicle-jin-img-max">
                            <div class="vehicle-jin-img-bgd">
                              <img :src="scope.row.photoUrl" v-if="scope.row.photoUrl" />
                            </div>
                            <div class="vehicle-time" v-cloak>
                              {{ scope.row.uploadTime }}
                            </div>
                          </div>
                        </el-col>
                        <el-col :span="6">
                          <div class="vehicle-jin-img-max">
                            <div class="vehicle-jin-img-bgd">
                              <img
                                :src="scope.row.photoUrl2"
                                v-if="scope.row.photoUrl2"
                              />
                            </div>
                            <div class="vehicle-time" v-cloak>
                              {{ scope.row.uploadTime2 }}
                            </div>
                          </div>
                        </el-col>
                        <el-col :span="6">
                          <div class="vehicle-jin-img-max">
                            <div class="vehicle-jin-img-bgd">
                              <img
                                :src="scope.row.photoUrl3"
                                v-if="scope.row.photoUrl3"
                              />
                            </div>
                            <div class="vehicle-time" v-cloak>
                              {{ scope.row.uploadTime3 }}
                            </div>
                          </div>
                        </el-col>
                        <el-col :span="6">
                          <div class="vehicle-jin-img-max">
                            <div class="vehicle-jin-img-bgd">
                              <img
                                :src="scope.row.photoUrl4"
                                v-if="scope.row.photoUrl4"
                              />
                            </div>
                            <div class="vehicle-time" v-cloak>
                              {{ scope.row.uploadTime4 }}
                            </div>
                          </div>
                        </el-col>
                      </el-row>
                    </template>
                  </el-table-column>
                </el-table>
              </div>
            </div>
          </module-one-video>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import "../components/module/module-one-2-1";
import "../components/module/module-one-3-1";
import "../components/module/module-one-0-5";
import "../components/module/module-one-video";
import "../components/staff-survey-chart";
import "../components/classify-bar";
import "../components/amplify/shipinguanli/amplify-spjk";
import debounce from "lodash.debounce";
export default {
  data() {
    return {
      //视频概况
      cqNum: 0,
      dgNum: 0,
      aiNum: 0,
      offLineNum: 0,

      videoTotalNum: 0,
      onLineNum: 0,
      onLinePer: 0,
      dayOffLineNum: 0,
      monthOffLineNum: 0,
      safetyEducationData: [{ text: "视频在线率", value: 0 }],
      legendData: ["离线路数", "在线路数"],
      classifyBarData: [],
      //项目视频预警
      rowStyle: {
        color: "#B6CFEF",
        fontSize: "12px",
        height: "32px",
      },
      warningInterval: undefined,
      warningTableData: [],

      //视频场布图分布点位
      VideoDistribution: [],
      //视频列表
      videoListData: [],

      videoReturnData: {},
      videoType: true,
      ptz: false,
      autoPlay: false,
      //车辆列表
      vehicleListData: [],
      vehicleReturnData: {},
      vehicleType: false,
      //监控视频
      mvNav: 1,
      //车辆监控数据
      vehicleMonitorData: [],
      //视频组件
      isplay: true,
      videoHost: "https://video.makalu.cc",
      h5s: "",
      hls: new Hls(),
      hlsvideo: undefined,
      rtmpVideo: "",
      exception: false,
      exMsg: "数据加载异常，请刷新重试...",
      initCount: 0,
      pubKey: "",
      restartInit: false,
      initError: false,
      oWebControl: undefined,
      token: "",
      type: "hls",
      width: 1124,
      height: 850,
      videoMapStyle: {
        background: 'url("images/field_layout_video.png") no-repeat center/100% auto',
      },
      projectId: "163",
      showVideo: false,
      currentIndex: null,
      request:
        "http://111.21.209.230:7086/live/cameraid/{{videoDvrNumber}}${{passage}}/substream/2.m3u8",
      url0: "",
      url1: "",
      url2: "",
      url3: "",
      showVideoView0: true,
      showVideoView1: true,
      showVideoView2: true,
      showVideoView3: true,
      videoPassageList: [],
      videoDvrNumber: null,
      projectInfo: null,
      dept: null,
      videoPassageList: [],
      projectInfos: [],
      players: [],
      parentVM: { vd01Flag: true, vd02Flag: true, vd03Flag: true, vd04Flag: true },
    };
  },
  beforeDestroy() {
    this.players.forEach((p) => {
      if (p) {
        try {
          p.stop();
        } catch (e) {}
      }
    });
    clearInterval(this.warningInterval);
  },
  mounted() {
    window.xapp = this;
    this.$bus.$on("projectChange",debounce((res) => {
        this.projectInfo = res;
        this.dept = this.$root.dept || this.dept|| {};
        this.projectInfos = this.$root.projects || this.projectInfos||[];
        this.initVideoMenu();
      })
    );    
    if (this.$root.hasInitHeader) {
      this.initMe();
    }
    this.$nextTick(() => {
      for (let i = 1; i <= 4; i++) {
        let player = new WasmPlayer(null, "vd0" + i, null, {
          Height: true,
        });
        this.players.push(player);
      }
    });
  },
  created() {
    this.init();
  },
  computed: {
    playDivCss() {
      return {
        width: (this.width + "").replace("px", "") + "px",
        height: (this.height + "").replace("px", "") + "px",
        position: "relative",
      };
    },
    exStyle() {
      return {
        textAlign: "center",
        width: (this.width + "").replace("px", "") + "px",
        height: (this.height + "").replace("px", "") + "px",
      };
    },
    PTZDiv() {
      let W = parseInt((this.width + "").replace("px", ""));
      let H = parseInt((this.height + "").replace("px", ""));
      if (W < 400) {
        W = "100px";
        H = "100px";
      } else {
        W = "150px";
        H = "150px";
      }
      return {
        backgroundImage: "url('https://video.makalu.cc/img/jt.png')",
        width: W,
        height: H,
        backgroundSize: "100%",
        position: "relative",
      };
    },
    PTZTop() {
      return {
        width: "33%",
        height: "25%",
        position: "absolute",
        top: "0px",
        left: "33%",
        cursor: "pointer",
      };
    },
    PTZBottom() {
      return {
        width: "33%",
        height: "25%",
        position: "absolute",
        bottom: "0px",
        left: "33%",
        cursor: "pointer",
      };
    },
    PTZLeft() {
      return {
        width: "25%",
        height: "33%",
        position: "absolute",
        top: "33%",
        left: "0px",
        cursor: "pointer",
      };
    },
    PTZRight() {
      return {
        width: "25%",
        height: "33%",
        position: "absolute",
        top: "33%",
        right: "0px",
        cursor: "pointer",
      };
    },
    VIBtnCss() {
      return {
        width: "30px",
        height: "30px",
        background: "#38314b",
        border: "1px solid #38314b",
        fontSize: "20px",
        outline: "0",
        color: "#FFFFFF",
      };
    },
    zoomViewCss() {
      return {
        width: "75px",
        height: "30px",
        color: "#dddddd",
        background: "rgba(65, 63, 70, 0.5)",
        textAlign: "center",
        border: "0px solid rgba(65, 63, 70, 0.5)",
        outline: "0",
        fontSize: "14px",
      };
    },
  },
  methods: {
    initMe() {
      this.projectInfo = this.$root.project || {};
      this.dept = this.$root.dept || {};
      this.projectInfos = this.$root.projects || [];
      this.initVideoMenu();
    },
    init() {
      //this.initVideoMenu();
      //视频列表
      //this.getVideoData()
      //车辆数据初始化
      //this.getVehicleData()
      //预警分析
      //this.warningInterval = setInterval(this.warningScroll,50);
      //this.getVideoMapUrl()
    },
    getVideoMapUrl() {
      $.post(
        "/video/map/list",
        {
          projectId: this.projectId,
        },
        (res) => {
          if (res.rows[0]) {
            this.videoMapStyle = {
              background:
                'url("' + res.rows[0].videoMap + '") no-repeat center/100% auto',
            };
          }
        }
      );
    },
    showui(e) {
      let that = this;
      if (e) {
        that.oWebControl.JS_CuttingPartWindow(630, 0, 250, 170);
      } else {
        that.setWndCover();
      }
    },
    showsmallui2(e) {
      let that = this;
      if (e.flag && e.data.length > 4) {
        var index = e.index;
        var xIndex = 0;
        switch (index) {
          case 4:
            xIndex = 100;
            break;
          case 5:
            xIndex = 100;
            break;
          case 6:
            xIndex = 310;
            break;
          case 7:
            xIndex = 410;
            break;
          case 8:
            xIndex = 520;
            break;
        }
        that.oWebControl.JS_CuttingPartWindow(xIndex, 0, 545, 65);
      } else {
        that.setWndCover();
      }
    },
    //视频概况
    getVideoOverview() {
      axios
        .get("https://video.makalu.cc/mkl/api/getVideoOverview?projectId=163")
        .then((res) => {
          if (res.data != {} && res.data.data) {
            this.cqNum = res.data.data.cqNum;
            this.dgNum = res.data.data.dgNum;
            this.aiNum = res.data.data.aiNum;
            this.offLineNum = res.data.data.offLineNum;

            var data = [];
            var allVideoList = res.data.data.allVideoList;
            if (allVideoList) {
              for (let i = 0; i < allVideoList.length; i++) {
                var obj = {};
                obj.x = allVideoList[i].x;
                obj.y = allVideoList[i].y;
                obj.angle = allVideoList[i].angle;
                obj.title = allVideoList[i].title;
                obj.state = allVideoList[i].state;
                obj.token = allVideoList[i].token;
                if (allVideoList[i].videoSource == 1) {
                  obj.videoType = "h5s";
                } else if (allVideoList[i].videoSource == 2) {
                  obj.videoType = "hk";
                } else if (allVideoList[i].videoSource == 3) {
                  obj.videoType = "hzhk";
                }
                data.push(obj);
              }
            }

            var token = this.videoListData[0].videoList[0].token;

            for (let i = 0; i < data.length; i++) {
              if (token == data[i].token) {
                data[i].type = true;
              } else {
                data[i].type = false;
              }
            }

            this.VideoDistribution = data;
          }
        });
    },
    //head选择项目返回值
    onItemData(e) {
      if (e.type == 1) {
        location.href = "/weixin/screen/toVideo";
      } else {
        location.reload();
        this.init();
      }
    },
    //视频组件
    playVideo() {
      if (this.type != "hk") {
        this.settingVideoHost();
        this.initVideo();
        this.fullScreenCss();
      } else {
        this.initPlugin("24476525", "hrFzLaMbo60QDvwazqdH", "8.129.144.255", 1443);
        this.windowInitFun();
      }
    },
    //项目视频获取数据
    getVideoData() {
      var videoListData = [];

      var cqVideoListData = {};
      var cqVideoList = [];
      var dgVideoListData = {};
      var dgVideoList = [];
      var aiVideoListData = {};
      var aiVideoList = [];
      var onlineVideoList = [];

      cqVideoListData.project_abbreviation = "项目监控";
      dgVideoListData.project_abbreviation = "吊钩监控";
      aiVideoListData.project_abbreviation = "AI视频";

      var data = [];
      axios
        .post("//video.makalu.cc/ca/isc/info/getVideoPage", {
          deptID: "00010001000300020008",
        })
        .then((res) => {
          let token = res.data.data.token;
          axios
            .post("//video.makalu.cc/ca/isc/info/getVideoListFromDeptID", {
              token: token,
            })
            .then((res) => {
              data = res.data.data;
              if (data.length > 0) {
                var allVideoList = res.data.data;

                for (let video of allVideoList) {
                  video.type = false;
                  if (video.videoSource == 1) {
                    video.videoType = "h5s";
                  } else if (video.videoSource == 2) {
                    video.videoType = "hk";
                  } else if (video.videoSource == 3) {
                    video.videoType = "hzhk";
                  }
                }

                if (allVideoList.length > 0) {
                  for (let i = 0; i < allVideoList.length; i++) {
                    if (allVideoList[i].state != 0) {
                      onlineVideoList.push(allVideoList[i]);
                    }
                    if (allVideoList[i].videoArea == 1) {
                      cqVideoList.push(allVideoList[i]);
                    } else if (allVideoList[i].videoArea == 2) {
                      dgVideoList.push(allVideoList[i]);
                    } else if (allVideoList[i].videoArea == 3) {
                      aiVideoList.push(allVideoList[i]);
                    }
                  }
                }

                cqVideoListData.videoList = cqVideoList;
                dgVideoListData.videoList = dgVideoList;
                aiVideoListData.videoList = aiVideoList;

                videoListData.push(cqVideoListData);
                videoListData.push(dgVideoListData);
                videoListData.push(aiVideoListData);

                this.cqNum = cqVideoList.length;
                this.dgNum = dgVideoList.length;
                this.aiNum = aiVideoList.length;
                this.offLineNum = onlineVideoList.length;

                //cqVideoListData.type = true;
                let init_video_list = 0;
                if (cqVideoListData.videoList[0]) {
                  cqVideoListData.videoList[0].type = true;
                  init_video_list = 0;
                } else if (dgVideoListData.videoList[0]) {
                  dgVideoListData.videoList[0].type = true;
                  init_video_list = 1;
                } else if (aiVideoListData.videoList[0]) {
                  aiVideoListData.videoList[0].type = true;
                  init_video_list = 2;
                }

                this.videoReturnData = videoListData[init_video_list].videoList[0];
                this.token = videoListData[init_video_list].videoList[0].token;
                this.type = videoListData[init_video_list].videoList[0].videoType;

                for (var i = 0; i < videoListData.length; i++) {
                  if (i == 0) {
                    videoListData[i].type = true;
                  } else {
                    videoListData[i].type = false;
                  }
                  videoListData[i].id = i;
                }

                this.videoListData = videoListData;

                this.playVideo();

                //视频概况，监控点位图
                //this.getVideoOverview()
              }
            });
        });
    },
    goAIPage() {
      // location.href = '/weixin/screen/toAIVideoProject'
      location.href = "https://szh.makalu.cc/weixin/screen/toAIVideoProject";
    },
    //点击视频项目返回数据   默认第一台设备数据
    videoProjectOneData(e) {
      var VideoDistribution = this.VideoDistribution;
      for (let i = 0; i < VideoDistribution.length; i++) {
        if (e.token == VideoDistribution[i].token) {
          VideoDistribution[i].type = true;
        } else {
          VideoDistribution[i].type = false;
        }
      }
      this.VideoDistribution = VideoDistribution;

      //修改车辆数据
      var vehicle = this.vehicleListData;
      for (let i = 0; i < vehicle.length; i++) {
        vehicle[i].type = false;
        for (let j = 0; j < vehicle[i].videoList.length; j++) {
          vehicle[i].videoList[j].type = false;
        }
      }
      this.vehicleListData = vehicle;

      // //视频和车辆切换
      this.videoType = true;
      this.vehicleType = false;
      //组件返回值
      this.videoReturnData = e;
      this.clearContext();
      // this.playVideo();
    },
    //点击视频设备返回数据
    videoEquipmentData(e) {
      var VideoDistribution = this.VideoDistribution;
      for (let i = 0; i < VideoDistribution.length; i++) {
        if (e.token == VideoDistribution[i].token) {
          VideoDistribution[i].type = true;
        } else {
          VideoDistribution[i].type = false;
        }
      }
      this.VideoDistribution = VideoDistribution;

      // //组件返回值
      this.videoReturnData = e;
      this.token = e.token;
      this.type = e.videoType;
      this.clearContext();
      //this.playVideo();
    },

    //车辆获取数据
    getVehicleData() {
      var data = [
        {
          other_projectId: JSON.parse(localStorage.getItem("data1")).spgl,
          //"project_abbreviation": JSON.parse(localStorage.getItem("data")).text,
          id: JSON.parse(localStorage.getItem("data1")).id,
          dept_id: JSON.parse(localStorage.getItem("data1")).dept_id,
          videoList: [
            {
              accountId: 1,
              videoSource: 2,
              distinguish: 0,
              pro_id: JSON.parse(localStorage.getItem("data1")).id,
              groupID: "",
              id: 1,
              state: 0,
              projectId: JSON.parse(localStorage.getItem("data1")).id,
              token: "",
            },
          ],
        },
      ];
      for (let i = 0; i < data.length; i++) {
        data[i].type = false;
        for (let j = 0; j < data[i].videoList.length; j++) {
          if (i == 0 && j == 0) {
            data[i].videoList[j].type = true;
          } else {
            data[i].videoList[j].type = false;
          }
        }
      }
      this.vehicleListData = data;
    },
    //点击车辆项目返回数据   默认第一台设备数据
    vehicleProjectOneData(e) {
      //修改视频数据
      var video = this.videoListData;
      for (let i = 0; i < video.length; i++) {
        video[i].type = false;
        for (let j = 0; j < video[i].videoList.length; j++) {
          video[i].videoList[j].type = false;
        }
      }
      this.videoListData = video;
      //视频和车辆切换
      this.videoType = false;
      this.vehicleType = true;
      this.clearContext();
      //组件返回
      this.vehicleMonitorData = [];
      axios
        .get("https://szh.makalu.cc/api/getPhotoUrl?projectId=" + e.projectId)
        .then((res) => {
          if (res.data.data.length > 0) {
            var data = res.data.data
              .filter((item) => item.deviceType != "04" && item.deviceType != "03")
              .slice(0, 12);
            var newData = [
              {
                photoUrl: "",
                uploadTime: "",
                photoUrl2: "",
                uploadTime2: "",
                photoUrl3: "",
                uploadTime3: "",
                photoUrl4: "",
                uploadTime4: "",
              },
              {
                photoUrl: "",
                uploadTime: "",
                photoUrl2: "",
                uploadTime2: "",
                photoUrl3: "",
                uploadTime3: "",
                photoUrl4: "",
                uploadTime4: "",
              },
              {
                photoUrl: "",
                uploadTime: "",
                photoUrl2: "",
                uploadTime2: "",
                photoUrl3: "",
                uploadTime3: "",
                photoUrl4: "",
                uploadTime4: "",
              },
            ];

            for (var i = 0; i < data.length; i++) {
              if (i <= 3) {
                newData[0].photoUrl = data[0].photoUrl;
                newData[0].uploadTime = data[0].uploadTime;
                newData[0].photoUrl2 = data[1].photoUrl;
                newData[0].uploadTime2 = data[1].uploadTime;
                newData[0].photoUrl3 = data[2].photoUrl;
                newData[0].uploadTime3 = data[2].uploadTime;
                newData[0].photoUrl4 = data[3].photoUrl;
                newData[0].uploadTime4 = data[3].uploadTime;
              } else if (i > 3 && i <= 7) {
                newData[1].photoUrl = data[4].photoUrl;
                newData[1].uploadTime = data[4].uploadTime;
                newData[1].photoUrl2 = data[5].photoUrl;
                newData[1].uploadTime2 = data[5].uploadTime;
                newData[1].photoUrl3 = data[6].photoUrl;
                newData[1].uploadTime3 = data[6].uploadTime;
                newData[1].photoUrl4 = data[7].photoUrl;
                newData[1].uploadTime4 = data[7].uploadTime;
              } else if (i > 7 && i <= 11) {
                newData[2].photoUrl = data[8].photoUrl;
                newData[2].uploadTime = data[8].uploadTime;
                newData[2].photoUrl2 = data[9].photoUrl;
                newData[2].uploadTime2 = data[1].uploadTime;
                newData[2].photoUrl3 = data[10].photoUrl;
                newData[2].uploadTime3 = data[10].uploadTime;
                newData[2].photoUrl4 = data[11].photoUrl;
                newData[2].uploadTime4 = data[11].uploadTime;
              }
            }
            this.vehicleMonitorData = newData;
          }
        });
    },
    //点击车辆设备返回数据
    vehicleEquipmentData(e) {
      this.vehicleMonitorData = [];
      this.clearContext();
      axios
        .get("https://szh.makalu.cc/api/getPhotoUrl?projectId=" + e.projectId)
        .then((res) => {
          if (res.data.data.length > 0) {
            var data = res.data.data
              .filter((item) => item.deviceType != "04" && item.deviceType != "03")
              .slice(0, 12);
            var newData = [
              {
                photoUrl: "",
                uploadTime: "",
                photoUrl2: "",
                uploadTime2: "",
                photoUrl3: "",
                uploadTime3: "",
                photoUrl4: "",
                uploadTime4: "",
              },
              {
                photoUrl: "",
                uploadTime: "",
                photoUrl2: "",
                uploadTime2: "",
                photoUrl3: "",
                uploadTime3: "",
                photoUrl4: "",
                uploadTime4: "",
              },
              {
                photoUrl: "",
                uploadTime: "",
                photoUrl2: "",
                uploadTime2: "",
                photoUrl3: "",
                uploadTime3: "",
                photoUrl4: "",
                uploadTime4: "",
              },
            ];

            for (var i = 0; i < data.length; i++) {
              if (i <= 3) {
                newData[0].photoUrl = data[0].photoUrl;
                newData[0].uploadTime = data[0].uploadTime;
                newData[0].photoUrl2 = data[1].photoUrl;
                newData[0].uploadTime2 = data[1].uploadTime;
                newData[0].photoUrl3 = data[2].photoUrl;
                newData[0].uploadTime3 = data[2].uploadTime;
                newData[0].photoUrl4 = data[3].photoUrl;
                newData[0].uploadTime4 = data[3].uploadTime;
              } else if (i > 3 && i <= 7) {
                newData[1].photoUrl = data[4].photoUrl;
                newData[1].uploadTime = data[4].uploadTime;
                newData[1].photoUrl2 = data[5].photoUrl;
                newData[1].uploadTime2 = data[5].uploadTime;
                newData[1].photoUrl3 = data[6].photoUrl;
                newData[1].uploadTime3 = data[6].uploadTime;
                newData[1].photoUrl4 = data[7].photoUrl;
                newData[1].uploadTime4 = data[7].uploadTime;
              } else if (i > 7 && i <= 11) {
                newData[2].photoUrl = data[8].photoUrl;
                newData[2].uploadTime = data[8].uploadTime;
                newData[2].photoUrl2 = data[9].photoUrl;
                newData[2].uploadTime2 = data[1].uploadTime;
                newData[2].photoUrl3 = data[10].photoUrl;
                newData[2].uploadTime3 = data[10].uploadTime;
                newData[2].photoUrl4 = data[11].photoUrl;
                newData[2].uploadTime4 = data[11].uploadTime;
              }
            }
            this.vehicleMonitorData = newData;
          }
        });
      this.open = "close";
    },

    //车辆监控视频切换
    onMonitoringVideo(n) {
      this.mvNav = n;
    },
    // 表格滚动  方法 --------- 开始
    warningScroll() {
      let maxHeight = this.$refs.warning.$el.querySelectorAll(".el-table__body")[0]
        .offsetHeight;
      let clientHeight = this.$refs.warning.bodyWrapper.clientHeight;
      if (
        Math.abs(this.$refs.warning.bodyWrapper.scrollTop - (maxHeight - clientHeight)) <
        5
      ) {
        //预留5像素误差
        this.$refs.warning.bodyWrapper.scrollTop = 0;
      } else {
        this.$refs.warning.bodyWrapper.scrollTop += 1; //32是每一行表格的高度，每秒滚一行
      }
    },
    warningMouseEnter() {
      //鼠标移入停止滚动
      clearInterval(this.warningInterval);
    },
    warningMouseLeave() {
      //鼠标离开继续滚动
      this.warningInterval = setInterval(this.warningScroll, 30);
    },
    // 表格滚动  方法 ------  结束
    //视频组件
    clearContext() {
      try {
        if (this.oWebControl && this.oWebControl != null) {
          this.oWebControl.JS_HideWnd(); // 先让窗口隐藏，规避可能的插件窗口滞后于浏览器消失问题
          this.oWebControl.JS_Disconnect().then(
            function () {
              // 断开与插件服务连接成功
            },
            function () {
              // 断开与插件服务连接失败
            }
          );
        }
      } catch (e) {
        console.log(e);
      }
      if (this.$refs.playDiv) {
        this.$refs.playDiv.removeAttribute("poster");
      }
      try {
        if (this.hls) {
          this.hls.destroy();
        }
      } catch (e) {
        console.log(e);
      }
      try {
        if (this.h5s) {
          H5sPlayerWS.prototype.disconnect;
          this.h5s.disconnect();
        }
      } catch (e) {
        console.log(e);
      }
      this.hls = new Hls();
    },
    initH5sPlay() {
      let that = this;
      let host =
        window.location.protocol == "https:"
          ? "47.106.234.91:8443"
          : "47.106.234.91:8080";
      axios.post(that.videoHost + "/mkl/api/h5sLogin", {}).then((res) => {
        let conf = {
          videodom: that.$refs.playDiv,
          protocol: window.location.protocol,
          host: "h5s.makalu.cc",
          rootpath: "/",
          token: that.token,
          hlsver: "v1",
          session: res.data,
        };
        that.$refs.playDiv.setAttribute("autoplay", "autoplay");
        that.h5s = H5sPlayerCreate(conf);
        that.h5s.connect();
        that.timeoutDetectionFun();
      });
    },
    initHlsPlay() {
      this.hlsvideo = this.$refs.playDiv;
      this.hls.destroy();
      this.hls = new Hls();
      let that = this;
      axios
        .post(this.videoHost + "/ca/isc/info/getPlay", {
          protocol: "hls",
          playAdder: that.token,
        })
        .then((res) => {
          if (res.data.code != "200") {
            that.exception = true;
            setTimeout(function () {
              that.initVideo();
            }, 2000);
          } else {
            that.hls.loadSource(eval("(" + res.data.data + ")").url);
            that.hls.attachMedia(that.hlsvideo);
            that.hls.on(Hls.Events.MANIFEST_PARSED, function () {
              that.hlsvideo.play();
            });
          }
          that.timeoutDetectionFun();
        })
        .catch((err) => {
          that.exception = true;
        });
    },
    initRtmpPlay() {
      let that = this;
      let video = this.$refs.playDiv;
      axios
        .post(this.videoHost + "/ca/isc/info/getPlay", {
          protocol: "rtmp",
          playAdder: that.token,
        })
        .then((res) => {
          if (res.data.code != "200") {
            that.exception = true;
            setTimeout(function () {
              that.initVideo();
            }, 2000);
          } else {
            const videoParam = [
              {
                type: "video/rtmp",
                src: eval("(" + res.data.data + ")").url,
              },
            ];
            that.rtmpVideo = videojs(video);
            that.rtmpVideo.ready(function () {
              that.rtmpVideo.src(videoParam);
              that.rtmpVideo.load();
              that.rtmpVideo.play();
            });
            that.timeoutDetectionFun();
          }
        })
        .catch((err) => {
          that.exception = true;
        });
    },
    play() {
      if (this.type === "h5s") {
        if (this.isplay) {
          this.h5s.disconnect();
        } else {
          this.h5s.connect();
        }
        this.isplay = !this.isplay;
      }
      if (this.type === "hls") {
        if (this.isplay) {
          this.hlsvideo.stop();
        } else {
          this.hlsvideo.play();
        }
        this.isplay = !this.isplay;
      }
      if (this.type === "rtmp") {
        if (this.isplay) {
          this.rtmpVideo.pause();
        } else {
          this.rtmpVideo.play();
        }
        this.isplay = !this.isplay;
      }
    },
    guid() {
      function S4() {
        return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1);
      }

      return S4() + S4() + S4() + S4() + S4() + S4() + S4() + S4();
    },
    settingVideoHost() {
      this.videoHost = window.location.protocol + "//video.makalu.cc";
    },
    initVideo() {
      let that = this;
      this.exception = false;
      this.clearContext();
      this.$nextTick(function () {
        switch (that.type) {
          case "h5s":
            that.initH5sPlay();
            break;
          case "hls":
            that.initHlsPlay();
            break;
          case "rtmp":
            that.initRtmpPlay();
            break;
          case "hk":
            that.initPlugin("24476525", "hrFzLaMbo60QDvwazqdH", "8.129.144.255", 1443);
            that.windowInitFun();
            break;
          case "hzhk":
            that.initPlugin("21332599", "772SPtFNM1BHMyKHq4xh", "39.101.132.124", 443);
            that.windowInitFun();
            break;
        }
      });
    },
    tripodHandle(order) {
      axios.post(this.videoHost + "/mkl/api/moveCamera", {
        token: this.token,
        action: this.type === "h5s" ? order.toLowerCase() : order,
        h5s: this.type == "h5s",
      });
      console.log("按下");
    },
    stop() {
      axios.post(this.videoHost + "/mkl/api/moveCamera", {
        token: this.token,
        action: "stop",
        h5s: this.type == "h5s",
      });
      console.log("松开");
    },
    fullScreenCss() {
      this.fullScreenWidth = document.body.scrollWidth - 10 + "px";
      this.fullScreenHeight = document.body.scrollHeight - 10 + "px";
    },
    fullScreenFun() {
      this.fullScreenShow = true;
      this.$emit("fullScreenFun");
    },
    fullScreenCloseFun() {
      this.fullScreenShow = false;
    },
    timeoutDetectionFun() {
      let that = this;
      //超时时间检测是否正常获取到数据流默认为5秒
      this.timeoutDetection = setTimeout(function () {
        if (parseInt(that.hlsvideo.currentTime.toFixed(1)) == 0) {
          that.hls.destroy();
          that.exception = true;
          if (that.restart) {
            that.timeoutDetectionInit = setTimeout(function () {
              that.initVideo();
            }, 2000);
          }
        }
      }, this.outTime * 1000);
    },
    //海康插件开始
    // 创建播放实例
    initPlugin(appkey, secret, ip, port) {
      let that = this;
      that.oWebControl = new WebControl({
        szPluginContainer: "uuid", // 指定容器id
        iServicePortStart: 15900, // 指定起止端口号，建议使用该值
        iServicePortEnd: 15909,
        szClassId: "23BF3B0A-2C56-4D97-9C03-0CB103AA8F11", // 用于IE10使用ActiveX的clsid
        cbConnectSuccess: function () {
          // 创建WebControl实例成功
          that.oWebControl
            .JS_StartService("window", {
              // WebControl实例创建成功后需要启动服务
              dllPath: "./VideoPluginConnect.dll", // 值"./VideoPluginConnect.dll"写死
            })
            .then(
              function () {
                // 启动插件服务成功
                that.oWebControl.JS_SetWindowControlCallback({
                  // 设置消息回调
                  cbIntegrationCallBack: that.cbIntegrationCallBack,
                });

                that.oWebControl
                  .JS_CreateWnd(
                    "HKPlayWindowControl",
                    Number(that.width),
                    Number(that.height)
                  )
                  .then(function () {
                    //JS_CreateWnd创建视频播放窗口，宽高可设定
                    that.initHKPlay(appkey, secret, ip, port); // 创建播放实例成功后初始化
                  });
              },
              function () {
                // 启动插件服务失败
              }
            );
        },
        cbConnectError: function () {
          // 创建WebControl实例失败
          this.oWebControl = null;
          that.restartInit = true;
          WebControl.JS_WakeUp("VideoWebPlugin://"); // 程序未启动时执行error函数，采用wakeup来启动程序
          that.initCount++;
          if (that.initCount < 3) {
            setTimeout(function () {
              that.initPlugin(appkey, secret, ip, port);
            }, 3000);
          } else {
            that.restartInit = false;
            that.initError = true;
            that.initCount = 0;
          }
        },
        cbConnectClose: function (bNormalClose) {
          // 异常断开：bNormalClose = false
          // JS_Disconnect正常断开：bNormalClose = true
          // console.log("cbConnectClose");
          this.oWebControl = null;
        },
      });
    },
    // 设置窗口控制回调
    setCallbacks() {
      let that = this;
      that.oWebControl.JS_SetWindowControlCallback({
        cbIntegrationCallBack: that.cbIntegrationCallBack,
      });
    },
    // 推送消息
    cbIntegrationCallBack(oData) {
      // console.log(JSON.stringify(oData.responseMsg));
    },
    //初始化
    initHKPlay(Appkey, Secret, Ip, Port) {
      let that = this;
      this.getPubKey(function () {
        ////////////////////////////////// 请自行修改以下变量值	////////////////////////////////////
        let appkey = Appkey; //综合安防管理平台提供的appkey，必填
        let secret = that.setEncrypt(Secret); //综合安防管理平台提供的secret，必填
        let ip = Ip; //综合安防管理平台IP地址，必填
        let playMode = 0; //初始播放模式：0-预览，1-回放
        let port = Port; //综合安防管理平台端口，若启用HTTPS协议，默认443
        let snapDir = "D:\\SnapDir"; //抓图存储路径
        let videoDir = "D:\\VideoDir"; //紧急录像或录像剪辑存储路径
        let layout = "1x1"; //playMode指定模式的布局
        let enableHTTPS = 1; //是否启用HTTPS协议与综合安防管理平台交互，这里总是填1
        let encryptedFields = "secret"; //加密字段，默认加密领域为secret
        let showToolbar = 1; //是否显示工具栏，0-不显示，非0-显示
        let showSmart = 1; //是否显示智能信息（如配置移动侦测后画面上的线框），0-不显示，非0-显示
        let buttonIDs = "0,16,256,257,258,259,260,512,513,514,515,516,517,768,769"; //自定义工具条按钮
        let toolBarButtonIDs = "4098";
        ////////////////////////////////// 请自行修改以上变量值	////////////////////////////////////

        that.oWebControl
          .JS_RequestInterface({
            funcName: "init",
            argument: JSON.stringify({
              appkey: appkey, //API网关提供的appkey
              secret: secret, //API网关提供的secret
              ip: ip, //API网关IP地址
              playMode: playMode, //播放模式（决定显示预览还是回放界面）
              port: port, //端口
              snapDir: snapDir, //抓图存储路径
              videoDir: videoDir, //紧急录像或录像剪辑存储路径
              layout: layout, //布局
              enableHTTPS: enableHTTPS, //是否启用HTTPS协议
              encryptedFields: encryptedFields, //加密字段
              showToolbar: showToolbar, //是否显示工具栏
              showSmart: showSmart, //是否显示智能信息
              buttonIDs: buttonIDs, //自定义工具条按钮
              toolBarButtonIDs: toolBarButtonIDs,
            }),
          })
          .then(function (oData) {
            that.oWebControl.JS_Resize(Number(that.width), Number(that.height)); // 初始化后resize一次，规避firefox下首次显示窗口后插件窗口未与DIV窗口重合问题
            that.startPreviewFun();
          });
      });
    },
    //获取公钥
    getPubKey(callback) {
      let that = this;
      that.oWebControl
        .JS_RequestInterface({
          funcName: "getRSAPubKey",
          argument: JSON.stringify({
            keyLength: 1024,
          }),
        })
        .then(function (oData) {
          // console.log(oData);
          if (oData.responseMsg.data) {
            that.pubKey = oData.responseMsg.data;
            callback();
          }
        });
    },
    //RSA加密
    setEncrypt(value) {
      let encrypt = new JSEncrypt();
      encrypt.setPublicKey(this.pubKey);
      return encrypt.encrypt(value);
    },
    // 设置窗口裁剪，当因滚动条滚动导致窗口需要被遮住的情况下需要JS_CuttingPartWindow部分窗口
    setWndCover() {
      let that = this;
      let iWidth = $(window).width();
      let iHeight = $(window).height();
      let oDivRect = document
        .getElementById("HKPlayWindowControl")
        .getBoundingClientRect();

      let iCoverLeft = oDivRect.left < 0 ? Math.abs(oDivRect.left) : 0;
      let iCoverTop = oDivRect.top < 0 ? Math.abs(oDivRect.top) : 0;
      let iCoverRight =
        oDivRect.right - iWidth > 0 ? Math.round(oDivRect.right - iWidth) : 0;
      let iCoverBottom =
        oDivRect.bottom - iHeight > 0 ? Math.round(oDivRect.bottom - iHeight) : 0;

      iCoverLeft = iCoverLeft > 1000 ? 1000 : iCoverLeft;
      iCoverTop = iCoverTop > 600 ? 600 : iCoverTop;
      iCoverRight = iCoverRight > 1000 ? 1000 : iCoverRight;
      iCoverBottom = iCoverBottom > 600 ? 600 : iCoverBottom;

      that.oWebControl.JS_RepairPartWindow(0, 0, 1001, 600); // 多1个像素点防止还原后边界缺失一个像素条
      if (iCoverLeft != 0) {
        that.oWebControl.JS_CuttingPartWindow(0, 0, iCoverLeft, 600);
      }
      if (iCoverTop != 0) {
        that.oWebControl.JS_CuttingPartWindow(0, 0, 1001, iCoverTop); // 多剪掉一个像素条，防止出现剪掉一部分窗口后出现一个像素条
      }
      if (iCoverRight != 0) {
        that.oWebControl.JS_CuttingPartWindow(1000 - iCoverRight, 0, iCoverRight, 600);
      }
      if (iCoverBottom != 0) {
        that.oWebControl.JS_CuttingPartWindow(0, 600 - iCoverBottom, 1000, iCoverBottom);
      }
    },
    windowInitFun() {
      let that = this;
      // 监听resize事件，使插件窗口尺寸跟随DIV窗口变化
      $(window).resize(function () {
        if (that.oWebControl != null) {
          that.oWebControl.JS_Resize(Number(that.width), Number(that.height));
          that.setWndCover();
        }
      });

      // 监听滚动条scroll事件，使插件窗口跟随浏览器滚动而移动
      $(window).scroll(function () {
        if (that.oWebControl != null) {
          that.oWebControl.JS_Resize(Number(that.width), Number(that.height));
          that.setWndCover();
        }
      });

      // 标签关闭
      window.onunload = function () {
        if (that.oWebControl != null) {
          that.oWebControl.JS_HideWnd(); // 先让窗口隐藏，规避可能的插件窗口滞后于浏览器消失问题
          that.oWebControl.JS_Disconnect().then(
            function () {
              // 断开与插件服务连接成功
            },
            function () {
              // 断开与插件服务连接失败
            }
          );
        }
      };
    },
    //视频预览功能
    startPreviewFun() {
      let that = this;
      let streamMode = 0; //主子码流标识：0-主码流，1-子码流
      let transMode = 1; //传输协议：0-UDP，1-TCP
      let gpuMode = 0; //是否启用GPU硬解，0-不启用，1-启用
      let wndId = 1; //播放窗口序号（在2x2以上布局下可指定播放窗口）
      let cameraIndexCode = this.token;
      cameraIndexCode = cameraIndexCode.replace(/(^\s*)/g, "");
      cameraIndexCode = cameraIndexCode.replace(/(\s*$)/g, "");
      // console.log(cameraIndexCode)
      that.oWebControl.JS_RequestInterface({
        funcName: "startPreview",
        argument: JSON.stringify({
          cameraIndexCode: cameraIndexCode, //监控点编号
          streamMode: streamMode, //主子码流标识
          transMode: transMode, //传输协议
          gpuMode: gpuMode, //是否开启GPU硬解
          wndId: wndId, //可指定播放窗口
        }),
      });
    },
    //停止全部预览
    stopAllPreviewFun() {
      this.oWebControl.JS_RequestInterface({
        funcName: "stopAllPreview",
      });
    },
    closeHk() {
      // console.log(this.oWebControl)
      this.oWebControl.JS_HideWnd(); // 先让窗口隐藏，规避可能的插件窗口滞后于浏览器消失问题
      this.oWebControl.JS_Disconnect().then(
        function () {},
        function () {}
      );
    },
    videoPlay(video) {
      //监控点位图数据处理
      // var VideoDistribution = this.VideoDistribution
      // for (var i = 0; i < VideoDistribution.length; i++) {
      //     if (video.token == VideoDistribution[i].token) {
      //         VideoDistribution[i].type = true
      //     } else {
      //         VideoDistribution[i].type = false
      //     }
      // }
      // this.VideoDistribution = VideoDistribution
      // //视频列表数据处理
      // var videoListData = this.videoListData
      // for (var i = 0; i < videoListData.length; i++) {
      //     videoListData[i].type = false
      //     for (var j = 0; j < videoListData[i].videoList.length; j++) {
      //         if (video.token == videoListData[i].videoList[j].token) {
      //             videoListData[i].type = true
      //             videoListData[i].videoList[j].type = true
      //         } else {
      //             videoListData[i].videoList[j].type = false
      //         }
      //     }
      // }
      // this.videoListData = videoListData
      // this.videoReturnData = video
      // this.token = video.token
      // this.type = video.videoType
      // this.playVideo();
    },
    /** 查询视频配置列表 */
    initVideoMenu() {
      var videoListData = [];

      var cqVideoListData = {};
      //var cqVideoList = [];
      var dgVideoListData = {};
      //var dgVideoList = [];
      var aiVideoListData = {};
      //var aiVideoList = [];
      //var onlineVideoList = [];

      cqVideoListData.id = 1;
      cqVideoListData.type = true;
      cqVideoListData.project_abbreviation = "项目监控";
      //dgVideoListData.id=2;
      //dgVideoListData.type=true;
      //dgVideoListData.project_abbreviation = '吊钩监控'
      //aiVideoListData.id=3;
      //aiVideoListData.type=true;
      //aiVideoListData.project_abbreviation = 'AI视频'

      this.$api.video
        .listView(this.dept?.id || 0, this.projectInfo?.id || 0)
        .then((response) => {
          cqVideoListData.videoList = response.data;
          videoListData.push(cqVideoListData);
          //videoListData.push(dgVideoListData);
          //videoListData.push(aiVideoListData);
          this.videoListData = videoListData;
          this.cqNum = response.data.length;
          let offNum = 0;
          response.data.forEach((it) => {
            if (it.signalState != "1") {
              offNum++;
            }
          });
          this.offLineNum = offNum;
        });
    },
    // 表格滚动调用的函数
    // beforeDestroy() {

    // },
    handlePlay(it, idx) {
      this.videoReturnData = it;
      this.currentIndex = idx;
      this.showVideo = false;
      this.url0 = "";
      this.url1 = "";
      this.url2 = "";
      this.url3 = "";
      this.showVideoView0 = true;
      this.showVideoView1 = true;
      this.showVideoView2 = true;
      this.showVideoView3 = true;
      this.videoDvrNumber = it.videoDvrNumber;
      this.initVideo(
        it.videoDvrNumber,
        this.request.replace("{{videoDvrNumber}}", it.videoDvrNumber)
      );
    },
    //查询视频通道
    initVideo(videoDvrNumber, url) {
      let that = this;
      that.players.forEach((p) => {
        if (p) {
          try {
            p.stop();
          } catch (e) {}
        }
      });
      that.players = [];
      that.parentVM.vd01Flag = false;
      that.parentVM.vd02Flag = false;
      that.parentVM.vd03Flag = false;
      that.parentVM.vd04Flag = false;

      this.$api.video.getVideoPassage(videoDvrNumber).then((response) => {
        let data = response.data;
        this.videoPassageList = data;
        that.showVideo = true;
        that.parentVM.vd01Flag = true;
        that.parentVM.vd02Flag = true;
        that.parentVM.vd03Flag = true;
        that.parentVM.vd04Flag = true;
        setTimeout(() => {
          data.forEach((it, idx) => {
            let player = new WasmPlayer(null, "vd0" + (idx + 1), null, {
              Height: true,
            });
            that.players.push(player);
            if (idx == 0) {
              //that.url0 = url.replace("{{passage}}", it.passageValue);
              that.url0 =
                "https://szgc.jhncidg.com/video/live/cameraid/" +
                videoDvrNumber +
                "$" +
                it.passageValue +
                "/substream/2.m3u8";
              that.players[0].play(that.url0, 1);
            }
            if (idx == 1) {
              //that.url1 = url.replace("{{passage}}", it.passageValue);
              that.url1 =
                "https://szgc.jhncidg.com/video/live/cameraid/" +
                videoDvrNumber +
                "$" +
                it.passageValue +
                "/substream/2.m3u8";
              that.players[1].play(that.url1, 1);
            }
            if (idx == 2) {
              //that.url2 = url.replace("{{passage}}", it.passageValue);
              that.url2 =
                "https://szgc.jhncidg.com/video/live/cameraid/" +
                videoDvrNumber +
                "$" +
                it.passageValue +
                "/substream/2.m3u8";
              that.players[2].play(that.url2, 1);
            }
            if (idx == 3) {
              //that.url3 = url.replace("{{passage}}", it.passageValue);
              that.url3 =
                "https://szgc.jhncidg.com/video/live/cameraid/" +
                videoDvrNumber +
                "$" +
                it.passageValue +
                "/substream/2.m3u8";
              that.players[3].play(that.url3, 1);
            }
          });
        }, 400);
      });
    },
    handleOnError0(error) {
      //this.showVideoView0 = false;
      console.log("error: ", error);
      //this.updatePassageState(this.videoPassageList[0].id);
    },
    handleOnError1(error) {
      //this.showVideoView1 = false;
      console.log("error: ", error);
      //this.updatePassageState(this.videoPassageList[1].id);
    },
    handleOnError2(error) {
      //this.showVideoView2 = false;
      console.log("error: ", error);
      //this.updatePassageState(this.videoPassageList[2].id);
    },
    handleOnError3(error) {
      //this.showVideoView3 = false;
      console.log("error: ", error);
      //this.updatePassageState(this.videoPassageList[3].id);
    },
    updatePassageState(id) {
      //没有好思路，这里先注释
      //this.$api.video.editPassageState(id,this.videoDvrNumber,"2");
    },
  },
};
</script>

<style lang="less">
.project-video {
}

.videoView {
  color: aliceblue;
  float: left;
  width: 49.5%;
  height: 458px;
  margin-bottom: 4px;
  margin-top: 2px;
  margin-left: 5px;
  margin-right: 2px;
}
.videoViewError {
  background-color: #575e65;
  text-align: center;
  line-height: 420px;
}
.video-enlarge-max {
  padding: 0 !important;
}
.video-enlarge-content {
  overflow: hidden;
  margin-top: 10px;
}
</style>