guzijian / wvp-GB28181-pro · Files

<template>
  <div style="width: 2000px">
    <el-container v-loading="loading" style="height: 100%;width: 100%" element-loading-text="拼命加载中">
      <div style="width:100%;display: flex;flex-direction: column;justify-content: space-between;">
        <div class="block" style="width: 99%;text-align:left;margin-bottom:15px;">
          <el-card class="box-card" style="width: 100%">
            <car-tree v-model="sim_channel" />
            <el-date-picker
              v-model="date"
              align="right"
              type="date"
              placeholder="选择日期"
              :picker-options="pickerOptions">
            </el-date-picker>
            <el-time-picker
              is-range
              v-model="timeList"
              range-separator="至"
              start-placeholder="开始时间"
              end-placeholder="结束时间"
              placeholder="选择时间范围">
            </el-time-picker>
            <el-button @click="searchHitoryList()">搜索</el-button>
            <el-button @click="downloadFunction()">下载播放视频</el-button>
          </el-card>
        </div>

        <div style="width: 100%;display:flex;flex-direction:row; justify-content:space-between;">
          <div style="width:22%;height: 80vh" >
            <historical-data :history-data="historyData" @click="clickHistoricalPlay" />
          </div>
          <div style="width: 77%;">
            <div style="width: 99%;height: 80vh;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 :videoUrl="videoUrl[0]" fluent autoplay @screenshot="shot"
                      @destroy="destroy" style="width: 100%;height: 100%;"/>
            </div>
          </div>
        </div>
      </div>
    </el-container>
  </div>
</template>

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

export default {
  //import引入的组件需要注入到对象中才能使用"
  components: {HistoricalData, CarTree, player},
  props: {},
  data() {
    //这里存放数据"
    return {
      historyData: [],
      //遮罩层
      loading: false,
      //sim号和通道号，格式为：sim-channel
      sim_channel: 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: {
    /**
     * 点击播放视频
     */
    clickHistoricalPlay(data) {
      this.playHistoryItem(data)
    },
    /**
     * 下载历史视频
     */
    downloadFunction() {
      this.getDateTime();
      console.log(this.downloadURL);
      if (this.isEmpty(this.downloadURL)) {
        return;
      }
      window.open(this.downloadURL, "_download");
    },
    /**
     * 搜索历史视频
     */
    searchHitoryList() {
      this.getDateTime();
      let simChannel = this.sim_channel;
      if (this.isEmpty(simChannel)) {
        this.$message.error('请选择车辆');
        return;
      }
      let split = simChannel[simChannel.length - 1].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;
      }
      if (this.isEmpty(this.startTime) || this.isEmpty(this.endTime)) {
        this.$message.error('请选择开始和结束时间');
        return;
      }
      this.loading = true
      this.$axios({
        method: 'get',
        url: '/api/jt1078/query/history/list/' + sim + '/' + channel + "/" + this.startTime + "/" + this.endTime
      }).then(
        res=>{
          console.log(res.data)
          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].sim = sim;
              items[i].channel = channel
              items[i].name = items[i].startTime + '-' + items[i].endTime;
            }
            this.historyData = items
            console.log(this.historyData)
            this.loading = false
          } else if (res && res.data && res.data.data && res.data.data.msg) {
            this.$message.error(res.data.data.msg);
            this.loading = false
          } else {
            this.loading = false
          }
        }).cache(res => {
          this.$message.error(res.msg);
        this.loading = false
      })
    },
    /**
     * 时间转换
     */
    getDateTime() {
      let date = this.date;
      let timeList = this.timeList;
      console.log(date)
      console.log(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() {
  },
  //生命周期 - 挂载完成（可以访问DOM元素）",
  mounted() {
  },
  beforeCreate() {
  }, //生命周期 - 创建之前",
  beforeMount() {
  }, //生命周期 - 挂载之前",
  beforeUpdate() {
  }, //生命周期 - 更新之前",
  updated() {
  }, //生命周期 - 更新之后",
  beforeDestroy() {
  }, //生命周期 - 销毁之前",
  destroyed() {
  }, //生命周期 - 销毁完成",
  activated() {
  } //如果页面有keep-alive缓存功能，这个函数会触发",
};
</script>
<style scoped>
.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>