guzijian / wvp-GB28181-pro · Files

<template>
  <div v-loading="loading" id="devicePosition" style="width:100vw; height: 91vh">
    <el-container v-loading="loading" style="height: 91vh;" element-loading-text="拼命加载中">
      <el-aside width="300px" style="background-color: #ffffff">
        <device1078-tree :tree-data="sourceValue" @node-click="nodeClick"></device1078-tree>
      </el-aside>
      <el-container>
        <el-header height="5vh" style="text-align: left;font-size: 17px;line-height:5vh;width:90%">
          <el-tag size="small" style="margin-left: 15px;" v-if="simNodeData">
            <span v-if="channelData">{{`设备：${simNodeData.code} - 通道：${channelData.name}`}}</span>
            <span v-else>{{`设备：${simNodeData.code}`}}</span>
          </el-tag>
          <el-tag size="small" style="margin-left: 15px;" v-if="playerIdx >= 0">下一个播放窗口 : {{ playerIdx + 1 }}</el-tag>
          <i class="el-icon-s-platform btn" :class="{active:spilt==1}" @click="spiltClickFun(1)"/>
          <i class="el-icon-menu btn" :class="{active:spilt==4}" @click="spiltClickFun(4)"/>
          <i class="el-icon-s-grid btn" :class="{active:spilt==9}" @click="spiltClickFun(9)"/>
          <i class="el-icon-full-screen btn" :class="{active:spilt==16}" @click="spiltClickFun(16)"/>
          <el-button size="mini" style="margin-left: 15px;" @click="oneClickPlayback()">一键播放</el-button>
          <el-button size="mini" style="margin-left: 15px;" @click="closeSelectItem()">关闭选中</el-button>
          <el-button size="mini" style="margin-left: 15px;" @click="closeSelectCarItem()">一键关闭</el-button>
          <el-button size="mini" style="margin-left: 15px;" @click="inspectionsDialog" v-if="patrolValue" type="danger">
            视屏巡查中
          </el-button>
          <el-button size="mini" style="margin-left: 15px;" @click="inspectionsDialog" v-else>视屏巡查</el-button>
        </el-header>
        <el-main style="padding: 0;">
            <!-- 视频播放器 -->
            <playerListComponent
              ref="playListComponent"
              @playerClick="handleClick"
              :video-url="videoUrl"
              v-model="spilt" style="width: 100%; height: 100%;"
            ></playerListComponent>
        </el-main>
      </el-container>
    </el-container>

    <div id="carRMenu" class="rMenu">
      <ul>
        <li id="m_add" @click="oneClickPlayback();">一键播放视频</li>
        <li id="m_del" @click="closeSelectCarItem();">一键关闭选中车辆流</li>
      </ul>
    </div>

    <div id="channelCarRMenu" class="rMenu">
      <ul>
        <li id="m_add" @click="oneClickPlayback();">一键播放视频</li>
        <li id="m_del" @click="closeSelectCarItem();">一键关闭选中车辆流</li>
      </ul>
    </div>

    <el-dialog title="视屏巡查设置" width="600" append-to-body
               :close-on-click-modal="false"
               :visible.sync="showVideoDialog" v-loading="loading">
      <el-card class="box-card">
        <tree-transfer
          :disabled="patrolValue"
          style="text-align: left; display: inline-block;"
          :to_data="targetValue"
          :defaultExpandedKeys="expandedKeys"
          node_key="id"
          :filter="true"
          :title="['源列表', '巡查列表']"
          :from_data="sourceValue"
          :defaultProps="treeProps"
          :filter-node="filterNode"
          class="inspections-tree"
          height="500px">
        </tree-transfer>
      </el-card>
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span style="font-size: math">巡查时间间隔</span>
        </div>
        <el-time-select
          v-model="timerTime"
          :picker-options="{
            start: '00:30',
            step: '00:30',
            end: '5:00'
          }"
          placeholder="选择巡查时间"
          :disabled="patrolValue">
        </el-time-select>
      </el-card>
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span style="font-size: math">巡查宫格数量</span>
        </div>
        <el-select v-model="patrolCell" placeholder="placeholder" :disabled="patrolValue">
          <el-option
            v-for="item in patrolCellList"
            :key="item"
            :label="item"
            :value="item">
          </el-option>
        </el-select>
      </el-card>
      <div slot="footer" class="dialog-footer">
        <el-button type="danger" v-if="patrolValue" @click="closeInspections">关闭</el-button>
        <el-button type="primary" v-else @click="openInspections">开启</el-button>
        <el-button @click="showVideoDialog = false">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import tree from "vue-giant-tree";
import uiHeader from "../layout/UiHeader.vue";
import playerListComponent from './common/PlayerListComponent.vue';
import player from './common/JessVideoPlayer.vue';
import DeviceTree from './common/DeviceTree.vue'
import treeTransfer from "el-tree-transfer";
import {parseTime} from "../../utils/ruoyi";
import Device1078Tree from "./JT1078Components/deviceList/Device1078Tree.vue";
import userService from "./service/UserService";

export default {
  name: "live",
  components: {
    playerListComponent,
    Device1078Tree,
    uiHeader, player, DeviceTree, tree, treeTransfer
  },
  data() {
    return {
      //车辆列表过滤
      filterText: '',
      //穿梭框巡查数据-----------↓
      //穿梭框默认展开
      expandedKeys: [],
      // 批次获取器
      batchFetcher: null,
      //源列表数据
      sourceValue: [],
      //原始sim列表 （sim对象）
      simList: [],
      //目标列表数据
      targetValue: [],
      //巡查播放原始列表
      lastTargetValue: [],
      //巡查过滤列表 （sim）
      lastTargetValueFilter: [],
      //现在正在播放的列表
      nowPlayArray: [],
      //prop参数
      treeProps: {
        children: 'children',
        label: 'name',
        disabled: 'disabled',
      },
      //巡查按钮
      patrolValue: false,
      //巡查宫格数量
      patrolCell: 9,
      //巡查宫格下拉框数据
      patrolCellList: [1, 4, 9, 12],
      //巡查时间
      timerTime: '00:30',
      //巡查定时器
      fetchInterval: null,
      //上线车辆
      onlineCar: new Map(),
      //车辆数据定时器
      carInfoTimeout: null,
      //车载key集合
      onlineCarKeys: [],
      //树节点对象
      simNodeData: null,
      videoUrl: [],
      videoUrlHistory: "",
      spilt: 1,//分屏
      windowClickData: null,
      playerIdx: 0,//激活播放器
      updateLooper: 0, //数据刷新轮训标志
      count: 15,
      historyLoadingFlag: true,
      total: 0,
      startTime: '',
      endTime: '',
      //channel
      loading: false,
      device: null,
      nodes: [],
      carPlayTimer: null,
      carTreeNode: null,
      ztreeObj: null,
      ztreeNode: null,
      fullscreenLoading: true,
      fullscreenLoadingStyle: '',
      showVideoDialog: false,
      historyPlayListHtml: '',
      hisotoryPlayFlag: false,
      downloadURL: null,
      rightMenuId: null,
      channelData: null,
      port: -1,
      httpPort: -1,
      stream: "",
      sim: "",
      channel: "",
      setting: {
        callback: {
          beforeExpand: this.beforeExpand
        },
        check: {
          enable: false,
        },
        edit: {
          enable: false,
        }
      },
      defaultProps: {
        children: 'children',
        label: 'title',
        name: 'title',
        isLeaf: 'spread',
        nameIsHTML: true,
        view: {
          nameIsHTML: true
        }
      },
    };
  },
  mounted() {
    let that = this;
    that.initTreeData();
  },
  created() {
    this.checkPlayByParam();
    this.getCarInfoBuffer()
  },
  beforeDestroy() {
    if (!this.isEmpty(this.timer)) {
      clearInterval(this.timer);
    }
    if (!this.isEmpty(this.updateLooper)){
      clearTimeout(this.updateLooper);
    }
    if (!this.isEmpty(this.carPlayTimer)) {
      clearTimeout(this.carPlayTimer);
    }
  },
  computed: {
    liveStyle() {
      let style = {width: '99%', height: '99%'}
      switch (this.spilt) {
        case 4:
          style = {width: '49%', height: '49%'}
          break
        case 9:
          style = {width: '32%', height: '32%'}
          break
        case 12:
          style = {width: '24.5%', height: '32%'}
          break
      }
      this.$nextTick(() => {
        for (let i = 0; i < this.spilt; i++) {
          const player = this.$refs.player
          player && player[i] && player[i].updatePlayerDomSize()
        }
      })
      return style
    }
  },
  watch: {
    spilt(newValue) {
      console.log("切换画幅;" + newValue)
      let that = this
      for (let i = 1; i <= newValue; i++) {
        if (!that.$refs['player' + i]) {
          continue
        }
        this.$nextTick(() => {
          if (that.$refs['player' + i] instanceof Array) {
            that.$refs['player' + i][0].resize()
          } else {
            that.$refs['player' + i].resize()
          }
        })
      }
      window.localStorage.setItem('split', newValue)
    },
    '$route.fullPath': 'checkPlayByParam'
  },
  destroyed() {

  },
  methods: {
    /**
     * 视频窗口点击传值
     * @param data 该窗口的数据
     * @param index 该窗口的下标
     * @param len 窗口总数
     */
    handleClick(data, index, len) {
      console.log(index)
      this.playerIdx = index
      this.windowClickData = data
    },
    /**
     * 统计树节点下一级有多少在线数量
     */
    statisticsOnline(data) {
      for (let i in data) {
        console.log(data[i].abnormalStatus === undefined && data[i].children && data[i].children.length > 0)
        if (data[i].abnormalStatus === undefined && data[i].children && data[i].children.length > 0) {
          data[i].onlineData = data[i].children.filter(item => item.abnormalStatus === 1);
        }
      }
    },
    /**
     * 树点击事件
     */
    nodeClick(data, node) {
      if (data.children && data.children.length > 0 && data.abnormalStatus) {
        this.simNodeData = data
        this.channelData = null
      } else if (data.parent.abnormalStatus === 10){
        this.$message.error("设备未接入SIM卡")
      } else if (data.parent.abnormalStatus === 20){
        this.$message.error("设备不在线")
      } else if (data.children === undefined) {
        let playerIdx = this.playerIdx;
        this.simNodeData = node.parent.data
        this.channelData = data
        this.openPlay(data, playerIdx++);
        if (playerIdx > (this.spilt - 1)){
          this.playerIdx = 0
        } else {
          this.playerIdx = playerIdx
        }
      } else {
        console.log(data)
        this.$message.error("设备状态异常")
      }
    },
    /**
     * 模糊查询树
     */
    filterNode(value, data) {
      console.log(data)
      if (!value) return true;
      return this.findSearKey(data, value)
    },
    /**
     * 递归搜索父级是否包含关键字
     */
    findSearKey(node, key) {
      if (node.name.indexOf(key) !== -1) {
        return true;
      } else {
        if (node.parent === undefined || node.parent === null) {
          return false;
        } else {
          return this.findSearKey(node.parent, key);
        }
      }
    },
    /**
     * 处理返回的tree数据
     */
    processingTreeData(data, pid, parent) {
      for (let i in data) {
        data[i].pid = pid
        data[i].parent = parent;
        if (data[i].children || (Array.isArray(data[i].children) && data[i].abnormalStatus === undefined)) {
          this.processingTreeData(data[i].children, data[i].id, data[i]);
        } else {
          data[i].name = data[i].code
          if (data[i].abnormalStatus !== 1) {
            data[i].disabled = true;
            let targetValue = this.targetValue;
            if (targetValue.length > 0) {
              this.disableItemsByName(targetValue, data[i].name);
            }
          }
          this.addChannels(data[i])
        }
      }
    },
    /**
     * 原始sim列表数据 （用来验证视屏巡查车辆是否在线）
     * @param data 查询后台树列表
     */
    processingSimList(data) {
      if (data && data.length > 0) {
        for (let i in data) {
          if (data[i].children === undefined && data[i].abnormalStatus) {
            this.simList.push(data[i]);
          } else if (data[i].children && data[i].children.length > 0) {
            this.processingSimList(data[i].children);
          }
        }
      }
    },
    /**
     * 处理巡查列表数据
     */
    disableItemsByName(arr, targetName) {
      arr.forEach(item => {
        // 检查当前项是否是对象并且包含 name 属性且值为 targetName
        if (item && typeof item === 'object' && item.name === targetName) {
          item.disabled = true;
        }
        // 如果当前项有 children 属性且是数组，则递归调用自身
        if (item && Array.isArray(item.children)) {
          this.disableItemsByName(item.children, targetName);
        }
      });
    },
    /**
     * 查询车辆信息
     */
    getCarInfoBuffer() {
      this.loading = true;
      this.getCarInfo()
    },
    getCarInfo() {
      console.log()
      this.$axios({
        method: 'get',
        url: `/api/jt1078/query/car/tree/${userService.getUser().role.authority == 0?'all':userService.getUser().role.authority}`,
      }).then(res => {
        if (res && res.data && res.data.data) {
          if (res.data.data.code == 1) {
            //处理数据
            this.simList = []
            this.processingSimList(res.data.data.result)
            this.processingTreeData(res.data.data.result, 0);
            this.statisticsOnline(res.data.data.result)
            console.log(res.data.data.result)
            this.sourceValue = res.data.data.result;
            this.loading = false
            //定时更新数据
            let this_ = this
            this.carInfoTimeout = setTimeout(function () {
              this_.getCarInfo()
            }, 45000);
          } else if (res.data.data.message) {
            this.$message.error(res.data.data.message);
          }
        } else {
          this.$message.error("请求错误，请刷新再试");
        }
        this.loading = false
      }).catch(error => {
        this.$message.error(error.message);
      })
    },
    /**
     * 打开巡查设置悬浮框
     */
    inspectionsDialog() {
      this.showVideoDialog = true
    },
    /**
     * 添加通道
     */
    addChannels(data) {
      console.log(data)
      if (data.sim2){
        let nvr_labels = ['中门','','车前','驾驶舱','前门','前车厢','后车厢','360'];
        //'ADAS','DSM','前门客流','中门客流','360前','360后','360左','360右'
        let rm_labels = [];
        let children = [];
        for (let i in nvr_labels) {
          if (nvr_labels[i] === ''){
            continue
          }
          children.push({
            id: `${data.id}_${data.sim}_${Number(i) + Number(1)}`,
            pid: data.id,
            name: nvr_labels[i],
            disabled: data.disabled,
            parent: data
          })
        }
        for (let i in rm_labels) {
          if (rm_labels[i] === ''){
            continue
          }
          children.push({
            id: `${data.id}_${data.sim2}_${Number(i) + Number(1)}`,
            pid: data.id,
            name: rm_labels[i],
            disabled: data.disabled,
            parent: data
          })
        }
        data.children = children;
      }else {
        let labels = ['ADAS', 'DSM', '路况', '司机', '整车前', '中门', '倒车', '前门客流', '后面客流'];
        let children = [];
        for (let i in labels) {
          children.push({
            id: `${data.id}_${data.sim}_${Number(i) + Number(1)}`,
            pid: data.id,
            name: labels[i],
            disabled: data.disabled,
            parent: data
          })
        }
        data.children = children;
      }
    },
    /**
     * 巡查时间转换器
     */
    timerTimeConvertor() {
      switch (this.timerTime) {
        case "00:30":
          return 30000
        case "01:00":
          return 30000 * 2
        case "01:30":
          return 30000 * 3
        case "02:00":
          return 30000 * 4
        case "02:30":
          return 30000 * 5
        case "03:00":
          return 30000 * 6
        case "03:30":
          return 30000 * 7
        case "04:00":
          return 30000 * 8
        case "04:30":
          return 30000 * 9
        case "05:00":
          return 30000 * 10
        default:
          return null
      }
    },
    /**
     * 巡查开启按钮
     */
    openInspections() {
      let time = this.timerTimeConvertor();
      this.spilt = this.patrolCell;
      if (time == null) {
        this.$message.error("时间选择错误 ==> [ " + this.timerTime + " ]")
        console.log("时间选择结果为 ===> [ " + time + " ]")
      }
      let targetValue = this.targetValue;
      if (targetValue === undefined || targetValue === null || targetValue.length === 0) {
        this.$message.error("未选择巡查对象")
        return
      }
      this.startFetching(time)
      this.showVideoDialog = false
    },
    /**
     * 巡查树数组只获取最后一级的一维数组
     * @param array 原数组
     */
    getLastElementsOfInnerArrays(array) {
      const result = [];
      //递归取值
      function traverse(arr) {
        for (let item of arr) {
          let children = item.children;
          if (children !== undefined && Array.isArray(children)) {
            traverse(children);
          } else if (children === undefined) {
            result.push(item)
          } else {
            console.log("数据格式有误 ==> { " + item + " }")
          }
        }
      }
      //开启递归取值
      traverse(array);
      return result;
    },
    /**
     * 巡查关闭按钮
     */
    closeInspections() {
      this.stopPatrol()
      this.patrolValue = false
      clearInterval(this.fetchInterval);
      let nowPlayArray = this.nowPlayArray;
      for (let index in nowPlayArray) {
        this.setPlayUrl(null, index)
      }
    },
    /**
     * 后台关闭视频巡查
     */
    stopPatrol() {
      this.$axios({
        method: 'get',
        url: `/api/jt1078/query/stopPatrol/request/io`,
      }).then((res) => {
        if (res.data.code === 0) {
          this.$message.success("视频巡查已关闭")
        } else {
          this.$message.error("视频巡查已关闭失败, 请联系管理员");
        }
      });
    },
    /**
     * 后台开启视频巡查
     */
    startPatrol(data) {
      this.$axios({
        method: 'post',
        url: `/api/jt1078/query/startPatrol/request/io`,
        data: data,
        headers: {
          'Content-Type': 'application/json', // 设置请求头
        }
      }).then((res) => {
        if (res.data.code === 0) {
          console.log("视频巡查已开启 ===》 " + res.data.msg)
          this.$message.success("视频巡查已开启");
        } else {
          console.log("视频巡查开启失败 ===》 " + res.data.msg)
          this.$message.error("视频巡查开启失败, 请联系管理员");
        }
      });
    },
    /**
     * 巡查对话框取消按钮
     */
    cancel() {
      this.loading = true;
      this.targetValue = [];
      this.timerTime = '00:30'
    },
    /**
     * 开启推流视频播放
     */
    openPlay(data, idxTmp, fun) {
      console.log("开启视频播放入参数据 ===》 [ " + data + " ]")
      let id = data.id;
      if (id === undefined || id === null) {
        console.log("id 内容为 :" + id)
        return;
      }
      console.log("id 内容为 :" + id)
      let arr = id.split('_');
      if (arr === undefined || arr === null || arr.length !== 3) {
        console.log("split 内容为 :" + arr)
        return;
      }
      this.$axios({
        method: 'get',
        url: '/api/jt1078/query/send/request/io/' + arr[1] + '/' + arr[2]
      }).then(res => {
        if (res.data.code === 0 && res.data.data) {
          let videoUrl;
          this.downloadURL = res.data.data.flv;
          if (location.protocol === "https:") {
            videoUrl = res.data.data.wss_flv;
          } else {
            videoUrl = res.data.data.ws_flv;
          }
          data.playUrl = videoUrl;
          this.setPlayUrl(videoUrl, idxTmp);
        } else {
          if (!this.isEmpty(res.data.data) && !this.isEmpty(res.data.data.msg)) {
            this.$message.error(res.data.data.msg);
          } else {
            this.$message.error(res.data.msg);
          }
        }
        if (fun) {
          fun();
        }
      })
    },
    /**
     * 批量开启推流视频播放
     * @param data 视频推流参数集合 Array
     */
    // openBatchPlay(data) {
    //   if (data === undefined || !Array.isArray(data)) {
    //     return;
    //   }
    //   console.log("批量开启推流视频播放 ----》"+data)
    //   let index = 0;
    //   this.cycleBatchPlay(data, index)
    // },
    cycleBatchPlay(data, index) {
      if (data === undefined || data[index] === undefined) {
        return;
      }
      let this_i = this
      this.openPlay(data[index], Number(index), function () {
        index++
        this_i.cycleBatchPlay(data, index)
      });
    },
    /**
     * 发送请求验证车辆是否在线
     * @param item
     * @returns {boolean|*}
     */
    checkStatus(item) {
      if (this.lastTargetValueFilter.includes(item)) {
        return true
      }
      if (this.simList) {
        let find = this.simList.find(simData => simData.sim === item && simData.abnormalStatus !== 1);
        //没找到则为离线 反之在线
        console.log("find ===> " + find)
        let f = (find === undefined)
        if (f) {
          this.lastTargetValueFilter.push(item)
        }
        return !f
      }
      return true; // 直接返回预定义的在线状态
    },
    /**
     * 批量验证车辆在线情况
     * @param items
     * @returns {*}
     */
    validateItemsOnline(items) {
      // 检查所有提供的 items 是否在线，并返回过滤后的在线 items
      const onlineItems = items.filter(item => this.checkStatus(item.id.split('_')[1]));
      if (onlineItems.length !== items.length) {
        console.warn("有车辆下线");
      }
      this.nowPlayArray = items;
      return onlineItems;
    },
    /**
     * 循环从数组中取出一定数量的值
     * @param array 原数组
     * @param batchSize 取出的数量
     * @returns {function(): *[]} 取出的结果
     */
    // createBatchFetcher(array, batchSize) {
    //   let currentIndex = 0;
    //   array = array.slice(); // 创建数组副本以避免修改原始数组
    //   return function fetchNextBatch() {
    //     const result = [];
    //     for (let i = 0; i < batchSize; i++) {
    //       if (currentIndex >= array.length) {
    //         currentIndex = 0; // 当达到数组末尾时重置索引
    //       }
    //       result.push(array[currentIndex]);
    //       currentIndex++;
    //     }
    //     return result;
    //   };
    // },
    createBatchFetcher(array, batchSize) {
      let currentIndex = 0;
      const originalArray = array.slice(); // 创建原始数组副本

      return function fetchNextBatch() {
        const result = [];
        for (let i = 0; i < batchSize && currentIndex < originalArray.length; i++) {
          result.push(originalArray[currentIndex]);
          currentIndex++;
        }
        return result;
      };
    },
    /**
     * 开启视频巡查
     * @param items 选择巡查的对象
     * @param time
     */
    startFetching(time) {
      this.lastTargetValue = this.getLastElementsOfInnerArrays(this.targetValue);
      console.log("targetValue ===> " + this.targetValue);
      console.log("lastTargetValue ===> " + this.lastTargetValue);
      if (!this.patrolValue && this.lastTargetValue.length > 0) {
        // 在初始化 batchFetcher 之前验证 items 是否全部在线
        this.lastTargetValue = this.validateItemsOnline(this.lastTargetValue);
        if (this.lastTargetValue.length === 0) {
          console.warn("【车辆全部下线】请重新选择");
          return;
        }
        this.startPatrol(this.lastTargetValue)
        this.batchFetcher = this.createBatchFetcher(this.lastTargetValue, this.spilt);
        // 立即执行一次 fetchNextBatch 并等待其完成
        let data = this.fetchNextBatch();
        console.log(parseTime(new Date(), '{y}-{m}-{d} {h}:{i}:{s}') + " 视频巡查数组 ===》 " + data);
        this.beachSendIORequest(this.convertBeachList(data));
        // 设置定时器以定期获取批次
        this.fetchInterval = setInterval(() => {
          let data = this.fetchNextBatch();
          console.log(parseTime(new Date(), '{y}-{m}-{d} {h}:{i}:{s}') + " 视频巡查数组 ===》 " + data);
          this.beachSendIORequest(this.convertBeachList(data));
        }, time);
        this.patrolValue = true;
      }
    },
    /**
     * 数组转换 （方便批量发送请求）
     */
    convertBeachList(data) {
      if (data && data.length > 0) {
        return data.map(item => item.id.split('_').slice(1).join('-'))
      }
    },
    /**
     * 更新巡查播放列表
     */
    fetchNextBatch() {
      // 在每次获取批次前验证在线状态
      const updatedItems = this.validateItemsOnline(this.lastTargetValue);
      if (updatedItems.length === 0) {
        this.$message.error("车辆已全部下线，已关闭 【视屏巡查】")
        this.stopFetching();
        return
      }
      if (updatedItems.length !== this.lastTargetValue.length) {
        // 更新 items 和 batchFetcher
        this.lastTargetValue = updatedItems;
        this.batchFetcher = this.createBatchFetcher(updatedItems, this.spilt);
      }
      const batch = this.batchFetcher();
      this.nowPlayArray = batch;
      return batch
    },
    /**
     * 关闭视频巡查
     */
    stopFetching() {
      if (this.isFetching) {
        clearInterval(this.fetchInterval);
        this.fetchInterval = null;
        this.isFetching = false;
      }
    },
    destroy(idx) {
      this.clear(idx.substring(idx.length - 1))
    },
    treeChannelClick(device, data, isCatalog) {
      if (data.channelId && !isCatalog) {
        if (device.online === 0) {
          this.$message.error('设备离线!不允许点播');
          this.closeLoading();
          return false;
        } else {
          this.isSendDevicePush(data, this.patrolValue);
        }
      }
    },
    contextMenuEvent: function (device, event, data, isCatalog) {
    },
    isSendDevicePush(itemData, patrolValue) {
      if (patrolValue) {
        this.videoPatrolStart(itemData);
      } else {
        this.sendDevicePush(itemData);
      }
    },
    //通知设备上传媒体流
    sendDevicePush(itemData, fun) {
      this.save(itemData)
      let deviceId = itemData.deviceId;
      let channelId = itemData.channelId;
      if (this.isEmpty(deviceId)) {
        this.$message.error("没有获取到sim卡，请检查设备是否接入");
        this.closeLoading();
        if (fun) {
          fun();
        }
        return;
      }
      console.log("通知设备推流1：" + deviceId + " : " + channelId);
      let idxTmp = this.playerIdx
      this.$axios({
        method: 'get',
        url: '/api/jt1078/query/send/request/io/' + deviceId + '/' + channelId
      }).then(res => {
        console.log(res)
        if (res.data.code === 0 && res.data.data) {
          let videoUrl;
          this.port = res.data.data.port;
          this.httpPort = res.data.data.httpPort;
          this.stream = res.data.data.stream;
          console.log(res.data.data);
          if (!this.isEmpty(res.data.data)) {
            this.downloadURL = res.data.data.flv;
            if (location.protocol === "https:") {
              videoUrl = res.data.data.wss_flv;
            } else {
              videoUrl = res.data.data.ws_flv;
            }
            console.log(videoUrl);
            itemData.playUrl = videoUrl;
            this.setPlayUrl(videoUrl, idxTmp);
          }
        } else {
          this.$message.error(res.data.msg);
        }
        if (fun) {
          fun();
        }
      }).catch(function (e) {
        if (fun) {
          fun();
        }
      }).finally(() => {
        this.closeLoading();
      });
    },
    /**
     * 播放器赋值
     * @param url 播放内容路径
     * @param idx 播放的id
     */
    setPlayUrl(url, idx) {
      this.$refs.playListComponent.setPlayUrl(url, idx)
    },
    checkPlayByParam() {
      let {deviceId, channelId} = this.$route.query
      if (deviceId && channelId) {
        this.sendDevicePush({deviceId, channelId})
      }
    },
    shot(e) {
      console.log(e)
      // send({code:'image',data:e})
      var base64ToBlob = function (code) {
        let parts = code.split(';base64,');
        let contentType = parts[0].split(':')[1];
        let raw = window.atob(parts[1]);
        let rawLength = raw.length;
        let uInt8Array = new Uint8Array(rawLength);
        for (let i = 0; i < rawLength; ++i) {
          uInt8Array[i] = raw.charCodeAt(i);
        }
        return new Blob([uInt8Array], {
          type: contentType
        });
      };
      let aLink = document.createElement('a');
      let blob = base64ToBlob(e); //new Blob([content]);
      let evt = document.createEvent("HTMLEvents");
      evt.initEvent("click", true, true); //initEvent 不加后两个参数在FF下会报错  事件类型，是否冒泡，是否阻止浏览器的默认行为
      aLink.download = '截图';
      aLink.href = URL.createObjectURL(blob);
      aLink.click();
    },
    save(item) {
      let dataStr = window.localStorage.getItem('playData') || '[]'
      let data = JSON.parse(dataStr);
      data[this.playerIdx] = item
      window.localStorage.setItem('playData', JSON.stringify(data))
    },
    clear(idx) {
      let dataStr = window.localStorage.getItem('playData') || '[]'
      let data = JSON.parse(dataStr);
      data[idx - 1] = null;
      console.log(data);
      window.localStorage.setItem('playData', JSON.stringify(data))
    },

    initTreeData() {
      this.showLoading();
      this.$axios({
        method: 'get',
        url: `/api/jt1078/query/company/tree`,
      }).then((res) => {
        if (res && res.data && res.data.data) {
          if (res.data.data.code == 1) {
            let data = res.data.data.result;
            this.initDate(this.nodes, data);
          } else if (res.data.data.message) {
            this.$message.error(res.data.data.message);
          }
        } else {
          this.$message.error("请求错误，请刷新再试");
        }
        this.closeLoading();
      });
    },
    initDate(nodes, datas) {
      if (nodes && datas) {
        let len = datas.length;
        for (let i = 0; i < len; i++) {
          if (null == datas[i].id || undefined == datas[i].id || "" == datas[i].id) {
            continue;
          }
          let node = this.combationNodeValue(datas[i].name, datas[i].id, datas[i].type, true, datas[i].sim, datas[i].abnormalStatus)
          nodes.push(node);
          if (datas[i].children) {
            node.children = [];
            this.initDate(node.children, datas[i].children);
          }
        }
      }
    },
    combationNodeValue(name, id, type, isParent, sim, abnormalStatus) {
      if (this.isEmpty(sim)) {
        sim = "";
      }
      if (abnormalStatus >= 10 && abnormalStatus < 20) {
        name = "<view style='color:red'>" + name + "</view>";
      } else if (abnormalStatus >= 20 && abnormalStatus < 30) {
        name = "<view style='color:#ccc'>" + name + "</view>";
      }
      return {
        name: name,
        id: id,
        abnormalStatus: abnormalStatus,
        sim: sim,
        type: type,
        isParent: isParent,
      }
    },
    onClick(evt, treeId, treeNode) {
      this.combationChildNode(treeNode);
    },
    beforeExpand(treeId, treeNode) {
      return true;
    },
    combationChildNode(treeNo) {
      this.ztreeNode = treeNo;
      if (treeNo.seachChild && (treeNo.seachChild == 'true')) {
        return;
      }
      this.showLoading();
      if (treeNo.type == 401 || treeNo.type == '401') {
        let device = new Object();
        if (this.isEmpty(treeNo.online)) {
          treeNo.online = 1;
        }
        device.online = treeNo.online;
        if (this.spilt == 1) {
          this.videoUrl = []
        }
        this.closeLoading();
        let pageObj = this;
        if (!this.isEmpty(this.sim) && !this.channel && this.sim != treeNo.sim && this.channel != treeNo.id) {
          let data = new Object();
          data.channelId = treeNo.id;
          data.sim = treeNo.sim;
          data.deviceId = treeNo.sim;
          this.sim = treeNo.sim;
          this.channel = treeNo.id;
          console.log("stop");
          this.sendIORequestStop(data.sim, data.channelId, function () {
            let flag = pageObj.treeChannelClick(device, data, false);
            if (false == flag) {
              treeNo.online = 0;
            }
          });
        } else {
          let data = new Object();
          data.channelId = treeNo.id;
          data.sim = treeNo.sim;
          data.deviceId = treeNo.sim;
          this.sim = treeNo.sim;
          this.channel = treeNo.id;

          let flag = pageObj.treeChannelClick(device, data, false);
          if (false == flag) {
            treeNo.online = 0;
          }
        }
      } else if (treeNo.type == 301 || treeNo.type == '301') {
        this.addChannel(treeNo);
        this.carTreeNode = treeNo;
        this.channel = null;
      } else if (treeNo.type == 2 || treeNo.type == '2') {
        this.requestChildNode(treeNo);
        this.sim = null;
        this.channel = null;
        this.carTreeNode = null;
      } else {
        this.carTreeNode = null;
        this.sim = null;
        this.channel = null;
        this.closeLoading();
      }
    },
    /**
     * 添加通道
     */
    addChannel(treeNo) {
      let labels = ['ADAS', 'DSM', '路况', '司机', '整车前', '中门', '倒车', '前门客流', '后面客流'];
      let children = [];
      let len = labels.length;
      let i = 0;
      let pageObj = this;
      for (; i < len; i++) {
        console.log(treeNo.abnormalStatus + "==========================>" + i);
        let node = this.combationNodeValue(labels[i], i + 1, 401, false, treeNo.sim, treeNo.abnormalStatus);
        node.sim = treeNo.sim;
        node.zbh = treeNo.name;
        node.id = i + 1;
        children.push(node);
      }
      this.ztreeObj.addNodes(treeNo, 0, children, true);
      treeNo.seachChild = 'true';
      pageObj.sim = treeNo.sim;
      this.closeLoading();
    },
    requestChildNode(treeNo) {
      if (treeNo.spread === 'false' || !treeNo.spread) {
        let id = treeNo.id;
        this.$axios({
          method: 'get',
          url: `/api/jt1078/query/car/tree/` + id,
        }).then((res) => {
          if (res && res.data && res.data.data) {
            if (res.data.data.code == 1) {
              let children = [];
              this.initDate(children, res.data.data.result);
              this.ztreeObj.addNodes(treeNo, -1, children, true);
              treeNo.seachChild = 'true';
              let _this = this;
              this.carPlayTimer = setTimeout(function () {
                _this.requestChildNode1();
              }, 15000);
            } else if (res.data.data.message) {
              this.$message.error(res.data.data.message);
            }
          } else {
            this.$message.error("请求错误，请刷新再试");
          }
          this.closeLoading();
        })
      }
    },
    requestChildNode1() {
      this.$axios({
        method: 'get',
        url: `/api/jt1078/query/car/tree/` + 100,
      }).then((res) => {
        if (res && res.data && res.data.data) {
          if (res.data.data.code == 1) {
            this.refreshRequestRefresh(res.data.data.result);
          } else if (res.data.data.message) {
            this.$message.error(res.data.data.message);
          }
        } else {
          this.$message.error("请求错误，请刷新再试");
        }
      })
    },
    refreshRequestRefresh(nodes) {
      if (nodes) {
        let length = nodes.length;
        for (let i = 0; i < length; i++) {
          let findNode = this.ztreeObj.getNodeByParam("id", nodes[i].id + "", null);
          if (findNode) {
            findNode.name = nodes[i].name;
            if (findNode.type == 301 || findNode.type == '301') {
              findNode.name = nodes[i].name;
            } else {
              findNode.name = nodes[i].name;
            }
            this.ztreeObj.updateNode(findNode);

            if (nodes[i].children) {
              this.refreshRequestRefresh(nodes[i].children);
            }
          }
        }
      }
    },
    showLoading() {
      this.loading = true;
      this.fullscreenLoading = true;
      // this.fullscreenLoadingStyle ='display:block';
    },
    closeLoading() {
      this.loading = false;
      //this.fullscreenLoadingStyle ='display:none';
      this.fullscreenLoading = false;
      console.log("已经关闭");
    },
    sendIORequestStop(sim, channel, fun) {
      if (this.isEmpty(sim) || this.isEmpty(channel)) {
        console.log("sim:" + sim + ";channel:" + channel);
        if (fun) {
          fun();
        }
        return;
      }
      this.videoUrl = [''];
      this.$axios({
        method: 'get',
        url: `/api/jt1078/query/send/stop/io/` + sim + "/" + channel + "/" + this.stream + "/" + this.port + "/" + this.httpPort,
      }).then((res) => {
        console.log(res);
        if (fun) {
          fun();
        }
      });
    },
    isEmpty(val) {
      return null == val || undefined == val || "" == val;
    },
    close() {
      let pageObj = this;
      this.showLoading();
      this.historyPlayListHtml = null;
      this.startTime = null;
      this.endTime = null;
      if (this.hisotoryPlayFlag) {
        this.sendIORequestStop(this.sim, this.channel, function () {
          pageObj.showVideoDialog = false;
          pageObj.videoUrl = [''];
          pageObj.closeLoading();
          console.log("关闭弹窗");
        });
      } else {
        pageObj.showVideoDialog = false;
        pageObj.closeLoading();
      }
    },
    /**
     * 视频一键播放
     */
    oneClickPlayback() {
      if (this.isEmpty(this.simNodeData)) {
        this.$message.error('请选择车辆');
        return;
      }
      if (this.isEmpty(this.simNodeData.abnormalStatus)) {
        this.$message.error('请检查车辆状态');
        return;
      }
      if (this.simNodeData.abnormalStatus != 1) {
        this.$message.error('车辆设备离线，请检查设备');
        return;
      }
      if (this.isEmpty(this.simNodeData.sim)) {
        this.$message.error('无法获取SIM卡信息，请检查设备');
        return;
      }
      let children = this.simNodeData.children;
      if (children && children.length > 0){
        this.spilt = 9;
        let data = []
        let count = 1;
        for (let i in children) {
          let split = children[i].id.split("_");
          if (split.length === 3){
            data.push(`${split[1]}-${split[2]}`)
            if (count++ === this.spilt){
              break
            }
          }
        }
        if (data.length === 0){
          this.$message.error("该设备无通道播放")
          return;
        }
        this.beachSendIORequest(data);
      }else {
        this.$message.error("该设备无通道播放")
      }

    },
    /**
     * 批量发送推流请求
     * @param data
     */
    beachSendIORequest(data) {
      console.log(data)
      this.$axios({
        method: 'post',
        url: '/api/jt1078/query/beachSend/request/io',
        data: data,
        headers: {
          'Content-Type': 'application/json', // 设置请求头
        }
      }).then(
        res => {
          let dataList = res.data.data;
          console.log(dataList);
          if (res.data.code == 0 && dataList != null && dataList.length >= 0) {
            for (let i in dataList) {
              this.$refs.playListComponent.setPlayUrl(dataList[i].ws_flv, i)
            }
          } else {
            this.$message.error(res.data.msg);
          }
        }
      )
    },
    // playOneAllChannel(channel) {
    //   if (channel == 9) {
    //     return;
    //   }
    //   let item = new Object();
    //   item.deviceId = this.sim;
    //   item.channelId = 1 + channel;
    //   this.playerIdx = channel;
    //
    //   this.sendDevicePush(item);
    // },
    spiltClickFun(val) {
      this.spilt = val;
      if (val - 1 < this.playerIdx) {
        this.playerIdx = val - 1;
      }
    },
    closeSelectItem() {
      console.log("============================>" + this.playerIdx);
      this.setPlayUrl(null, this.playerIdx)
    },
    closeSelectCarItem() {
      for (let index = 0; index < 9; index++) {
        this.setPlayUrl(null, index)
      }
    },
    showRMenu(event) {
      if (this.isEmpty(this.rightMenuId)) {
        return;
      }
      let carMenu = document.getElementById(this.rightMenuId);
      carMenu.setAttribute("style", "display:block");

      let x = event.clientX;
      let y = event.clientY;
      carMenu.setAttribute("style", "display:block;top:" + y + "px;left:" + x + "px");
      document.addEventListener("click", this.hideMenu);
      console.log(this.rightMenuId);
    },
    hideMenu() {
      if (this.isEmpty(this.rightMenuId)) {
        return;
      }
      let carMenu = document.getElementById(this.rightMenuId);
      carMenu.setAttribute("style", "display:none");
      this.rightMenuId = null;
    }
  }
};
</script>
<style scoped>
.inspections-tree >>> .el-tree {
  padding-bottom: 22px;
}

.device-list-tree >>> .el-tree {
  padding-bottom: 13px;
}

.device-list-tree >>> .el-tree-node__content {
  padding-bottom: 13px;
  height: 20px;
}

.el-main {
  background-color: rgba(0, 0, 0, 0.84);
  color: #333;
  text-align: center;
  line-height: 160px;
  padding: 0;
  margin-left: 1px;
}

.device-tree-main-box {
  text-align: left;
}

.btn {
  margin: 0 10px;
}

.btn:hover {
  color: #409EFF;
}

.btn.active {
  color: #409EFF;
}

.redborder {
  border: 2px solid red !important;
}

.play-box {
  background-color: #000000;
  border: 2px solid #505050;
  display: flex;
  align-items: center;
  justify-content: center;
}

.historyListLi {
  width: 97%;
  white-space: nowrap;
  text-overflow: ellipsis;
  cursor: pointer;
  padding: 3px;
  margin-bottom: 6px;
  border: 1px solid #000000;
}

.historyListDiv {
  height: 80vh;
  width: 100%;
  overflow-y: auto;
  overflow-x: hidden;
}

/* 菜单的样式 */
.rMenu {
  position: absolute;
  top: 0;
  display: none;
  margin: 0;
  padding: 0;
  text-align: left;
  border: 1px solid #BFBFBF;
  border-radius: 3px;
  background-color: #EEE;
  box-shadow: 0 0 10px #AAA;
}

.rMenu li {
  width: 170px;
  list-style: none outside none;
  cursor: default;
  color: #666;
  margin-left: -20px;
}

.rMenu li:hover {
  color: #EEE;
  background-color: #666;
}

li#menu-item-delete, li#menu-item-rename {
  margin-top: 1px;
}

.videoList {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
}

.video-item {
  position: relative;
  width: 15rem;
  height: 10rem;
  margin-right: 1rem;
  background-color: #000000;
}

.video-item-img {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  width: 100%;
  height: 100%;
}

.video-item-img:after {
  content: "";
  display: inline-block;
  position: absolute;
  z-index: 2;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  width: 3rem;
  height: 3rem;
  background-image: url("../assets/loading.png");
  background-size: cover;
  background-color: #000000;
}

.video-item-title {
  position: absolute;
  bottom: 0;
  color: #000000;
  background-color: #ffffff;
  line-height: 1.5rem;
  padding: 0.3rem;
  width: 14.4rem;
}

.baidumap {
  width: 100%;
  height: 100%;
  border: none;
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}

/* 去除百度地图版权那行字 和 百度logo */
.baidumap > .BMap_cpyCtrl {
  display: none !important;
}

.baidumap > .anchorBL {
  display: none !important;
}

.scroll-container {
  max-height: 85vh; /* 设置最大高度为85%的视口高度 */
  overflow-y: auto; /* 内容超出时显示垂直滚动条 */
  overflow-x: hidden; /* 隐藏水平滚动条 */
}

.transfer-footer {
  margin-left: 20px;
  padding: 6px 5px;
}


</style>