guzijian / wvp-GB28181-pro · Files

<template>
  <div style="width: 2000px">
    <el-container v-loading="loading" style="height: 93vh;" element-loading-text="拼命加载中">
      <el-aside width="400px" style="background-color: #ffffff;height: 100%;">
        <el-main style="padding: 0;width: 100%;height: 68%;background: white;margin-bottom: 10px">
          <device1078-tree :tree-data="sourceValue" @node-click="nodeClick"></device1078-tree>
        </el-main>
        <el-footer style="width: 100%;height: 30%;background: grey">
          <el-form ref="form" class="historyButton" style="padding-top: 20px">
            <el-form-item label="设备信息"  style="color: white;text-align: left;">
              <el-tag effect="dark" v-if="sim_channel_data">
                {{ `车辆：${sim_channel_data.pid} 通道：${sim_channel_data.name}` }}
              </el-tag>
              <el-tag effect="dark" v-else>
                请选择车辆通道
              </el-tag>
            </el-form-item>
            <el-form-item label="日期"  style="color: white;">
              <el-date-picker
                v-model="date"
                align="right"
                type="date"
                style="width: 70%;"
                placeholder="选择日期"
                :picker-options="pickerOptions">
              </el-date-picker>
            </el-form-item>
            <el-form-item label="时间"  style="color: white;">
              <el-time-picker
                is-range
                v-model="timeList"
                style="width: 70%;"
                range-separator="至"
                start-placeholder="开始时间"
                end-placeholder="结束时间"
                placeholder="选择时间范围">
              </el-time-picker>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="searchHistoryTimer" style="width: 70%;">搜索</el-button>
            </el-form-item>
          </el-form>
        </el-footer>
      </el-aside>
      <el-container style="height: 93vh;">
        <el-main style="padding: 0;height: 65%;">
          <div class="scroll-container"
               style="width: 100%;height: 99%;display: flex;flex-wrap: wrap;background-color: #000;">
            <div style="width: 99%;height: 99%;display: flex;flex-wrap: wrap;background-color: #000;">
              <div v-if="!videoUrl[0]" style="color: #ffffff;font-size: 30px;font-weight: bold;"></div>
              <player ref="player" v-else :initial-play-url="videoUrl[0]"
                      style="width: 100%;height: 99%;"/>
            </div>
          </div>
        </el-main>
        <el-footer style="width: 100%;height: 30%;background-color: white">
          <history-search-table :table-data="historyData"
                                @playHistoryVideo="clickHistoricalPlay"
                                @uploadHistoryVideo="uploadHistoryVideo"/>
        </el-footer>
      </el-container>
    </el-container>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）,
//例如：import 《组件名称》 from '《组件路径》,
import player from "./common/JessVideoPlayer.vue";
import CarTree from "./JT1078Components/cascader/CarTree.vue";
import {parseTime} from "../../utils/ruoyi";
import HistoricalData from "./JT1078Components/historical/HistoricalDataTree.vue";
import HistoryList from "./JT1078Components/HistoryData.vue";
import Device1078Tree from "./JT1078Components/deviceList/Device1078Tree.vue";
import HistorySearchTable from "./JT1078Components/HistorySearchTable.vue";
import userService from "./service/UserService";

export default {
  //import引入的组件需要注入到对象中才能使用"
  components: {HistorySearchTable, HistoryList, Device1078Tree, HistoricalData, CarTree, player},
  props: {},
  data() {
    //这里存放数据"
    return {
      //列表定时器
      timer: null,
      //历史视频列表定时器
      historyTimer: null,
      historyData: [],
      targetValue: [],
      //源列表数据
      sourceValue: [],
      //车辆数据定时器
      carInfoTimeout: null,
      simList: [],
      //遮罩层
      loading: false,
      //sim号和通道号，格式为：sim-channel
      sim_channel: null,
      sim_channel_data:  null,
      //日期快捷选择
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        },
        shortcuts: [{
          text: '今天',
          onClick(picker) {
            picker.$emit('pick', new Date());
          }
        }, {
          text: '昨天',
          onClick(picker) {
            const date = new Date();
            date.setTime(date.getTime() - 3600 * 1000 * 24);
            picker.$emit('pick', date);
          }
        }, {
          text: '一周前',
          onClick(picker) {
            const date = new Date();
            date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', date);
          }
        }]
      },
      //选中的时间
      timeList: [new Date(2016, 9, 10, 0, 1),
        new Date(2016, 9, 10, 0, 1)],
      //选中的日期
      date: null,
      historyPlayListHtml: '',
      videoUrl: []
    };
  },
  //计算属性 类似于data概念",
  computed: {},
  //监控data中的数据变化",
  watch: {},
  //方法集合",
  methods: {
    /**
     * 树点击事件
     */
    nodeClick(data, node) {
      if (data.children === undefined && data) {
        let split = data.id.split("_");
        if (split.length === 3) {
          this.sim_channel = split[1] + '_' + split[2]
          this.sim_channel_data = data
          console.log(data)
        } else {
          console.log("node click ==> ", data)
        }
      }
    },
    /**
     * 查询车辆信息
     */
    getCarInfoBuffer() {
      this.loading = true;
      this.getCarInfo()
    },
    getCarInfo() {
      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)
            this.sourceValue = res.data.data.result;
            this.loading = false
          } else if (res.data.data.message) {
            this.$message.error(res.data.data.message);
          }
        } else {
          this.$message.error("请求错误，请刷新再试");
        }
        this.loading = false
      }).catch(error => {
        this.loading = false
        clearInterval(this.timer)
        this.$message.error(error.message);
      })
    },
    /**
     * 统计树节点下一级有多少在线数量
     */
    statisticsOnline(data) {
      for (let i in data) {
        if (data[i].abnormalStatus === undefined && data[i].children && data[i].children.length > 0) {
          data[i].onlineData = data[i].children.filter(item => item.abnormalStatus === 1);
        }
      }
    },
    /**
     * 处理返回的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])
        }
      }
    },
    /**
     * 添加通道
     */
    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;
      }
    },
    /**
     * 处理巡查列表数据
     */
    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);
        }
      });
    },
    /**
     * 原始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);
          }
        }
      }
    },
    /**
     * 点击播放视频
     */
    clickHistoricalPlay(data) {
      this.playHistoryItem(data)
    },
    /**
     * 上传历史视频
     */
    uploadHistoryVideo(data){
      console.log("开始上传视频 ===》 ",data)
      this.loading = true
      this.$axios({
        method: 'get',
        url: '/api/jt1078/query/history/uploading/' + data.name
      }).then(res => {
        console.log("上传视频 ==》 ",res)
        this.$message.success("视频开始上传,请等待")
        this.searchHistoryList()
        this.loading = false
      }).catch(err => {
        console.log(err)
        this.$message.error("视频上传失败,请联系管理员")
        this.loading = false
      })
    },
    searchHistoryTimer() {
      this.searchHistoryList()
    },
    /**
     * 搜索历史视频
     */
    searchHistoryList() {
      this.getDateTime();
      let simChannel = this.sim_channel;
      console.log(this.sim_channel)
      if (this.isEmpty(simChannel)) {
        this.$message.error('请选择车辆');
        return;
      }
      let split = simChannel.split('_');
      console.log("simChannel:", simChannel)
      let sim = split[0];
      if (this.isEmpty(sim)) {
        this.$message.error('无法获取SIM卡信息，请检查设备');
        return;
      }
      let channel = split[1];
      if (this.isEmpty(channel)) {
        this.$message.error('请选择通道');
        return;
      }
      console.log(channel);
      if (this.isEmpty(this.startTime) || this.isEmpty(this.endTime)) {
        this.$message.error('请选择开始和结束时间');
        return;
      }
      this.$axios({
        method: 'get',
        url: '/api/jt1078/query/history/list/' + sim + '/' + channel + "/" + this.startTime + "/" + this.endTime
      }).then(res => {
          let items = res.data.data.obj.data.items;
          if (res && res.data && res.data.data && res.data.data.obj && res.data.data.code == 1 && res.data.data.obj.data && items) {
            for (let i in items) {
              items[i].disabled = false;
              items[i].countdown = 10;
            }
            this.historyData = items;
          } else if (res && res.data && res.data.data && res.data.data.msg) {
            this.$message.error(res.data.data.msg);
          } else if (items === undefined) {
            this.historyData = [];
            this.$message.warning("搜索历史列表为空");
            if (this.historyTimer){
              clearInterval(this.historyTimer)
            }
          }
        this.loading = false
      }).catch(error => {
        console.log(error)
        this.loading = false
        clearInterval(this.historyTimer)
        this.$message.error("发送历史视频列表指令异常");
      })
    },
    /**
     * 时间转换
     */
    getDateTime() {
      let date = this.date;
      let timeList = this.timeList;
      console.log("date ", date)
      console.log("timeList ", timeList)
      if (this.isEmpty(date)) {
        this.$message.error("请选择日期")
        return false;
      }
      if (this.isEmpty(timeList)) {
        this.$message.error("请选择起始时间")
        return false;
      }
      let year = date.getFullYear();
      let month = date.getMonth();
      let day = date.getDate()
      let startTime = timeList[0];
      startTime.setFullYear(year);
      startTime.setMonth(month);
      startTime.setDate(day);
      let endTime = timeList[1];
      endTime.setFullYear(year);
      endTime.setMonth(month);
      endTime.setDate(day);
      startTime = parseTime(startTime, '{y}-{m}-{d} {h}:{i}:{s}');
      endTime = parseTime(endTime, '{y}-{m}-{d} {h}:{i}:{s}');
      console.log("startTime:" + startTime)
      console.log("endTime:" + endTime)
      this.startTime = startTime;
      this.endTime = endTime;
      return true
    },
    /**
     * 播放历史数据
     */
    playHistoryItem(e) {
      this.videoUrl = [];
      this.$axios({
        method: 'get',
        url: '/api/jt1078/query/send/request/io/history/' + e.sim + '/' + e.channel + "/" + e.startTime + "/" + e.endTime + "/" + e.channelMapping
      }).then(res => {
        if (res.data && res.data.data && res.data.data.data) {
          let videoUrl1;
          if (location.protocol === "https:") {
            videoUrl1 = res.data.data.data.wss_flv;
          } else {
            videoUrl1 = res.data.data.data.ws_flv;
          }
          this.downloadURL = res.data.data.data.flv;
          this.port = res.data.data.port;
          this.httpPort = res.data.data.httpPort;
          this.stream = res.data.data.stream;
          this.videoUrlHistory = videoUrl1;

          let itemData = new Object();
          itemData.deviceId = this.sim;
          itemData.channelId = this.channel;
          itemData.playUrl = videoUrl1;
          console.log(this.playerIdx);
          this.setPlayUrl(videoUrl1, 0);
          this.hisotoryPlayFlag = true;

        } else if (res.data.data && res.data.data.msg) {
          this.$message.error(res.data.data.msg);
        } else if (res.data.msg) {
          this.$message.error(res.data.msg);
        } else if (res.msg) {
          this.$message.error(res.msg);
        }
        this.closeLoading();
      })
    },
    /**
     * 实时访问播放地址
     * @param url
     * @param idx
     */
    setPlayUrl(url, idx) {
      this.$set(this.videoUrl, idx, url)
      let _this = this
      setTimeout(() => {
        window.localStorage.setItem('videoUrl', JSON.stringify(_this.videoUrl))
      }, 100)
    },

    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();
    },
    destroy(idx) {
      console.log(idx);
      this.clear(idx.substring(idx.length - 1))
    },

    createdPlay() {
      if (flvjs.isSupported()) {
        // var videoDom = document.getElementById('myVideo')
        console.log(this.videoUrlHistory);
        let videoDom = this.$refs.myVideo
        // 创建一个播放器实例
        var player = flvjs.createPlayer({
          type: 'flv', // 媒体类型，默认是 flv,
          isLive: false, // 是否是直播流
          url: this.videoUrlHistory // 流地址
        }, {
          // 其他的配置项可以根据项目实际情况参考 api 去配置
          autoCleanupMinBackwardDuration: true, // 清除缓存 对 SourceBuffer 进行自动清理
        })
        player.attachMediaElement(videoDom)
        player.load()
        player.play()
        this.player = player
      }
    },
    isEmpty(val) {
      return null == val || undefined == val || "" == val;
    }


  },
  //生命周期 - 创建完成（可以访问当前this实例）",
  created() {
    this.getCarInfoBuffer()
  },
  //生命周期 - 挂载完成（可以访问DOM元素）",
  mounted() {
  },
  beforeCreate() {
  }, //生命周期 - 创建之前",
  beforeMount() {
  }, //生命周期 - 挂载之前",
  beforeUpdate() {
  }, //生命周期 - 更新之前",
  updated() {
  }, //生命周期 - 更新之后",
  beforeDestroy() {
  }, //生命周期 - 销毁之前",
  destroyed() {
    clearInterval(this.timer)
    clearInterval(this.historyTimer)
  }, //生命周期 - 销毁完成",
  activated() {
  } //如果页面有keep-alive缓存功能，这个函数会触发",
};
</script>
<style scoped>
.historyButton >>> .el-form-item__label{
  color: white;
}
.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;
}
</style>
<style>
.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;
}
</style>