guzijian / wvp-GB28181-pro · Files

<template>
  <el-dialog
    :close-on-click-modal="true"
    :title="`${data.deviceId} 设备 - ${data.channelName} 历史视频回放`"
    :visible.sync="open"
    width="90%"
    center
    :before-close="handleClose"
    class="history-dialog-center">
    <el-container>
      <el-main>
        <el-card class="box-card" shadow="always" :body-style="{ height: '95%' }">
          <div class='main-play'>
            <video-player :class="`video`" ref="player"
                          :initial-play-url="videoUrl" style="width: 100%;height: 100%;"
                          @getTime="getTime"
            ></video-player>
          </div>
        </el-card>
      </el-main>
    </el-container>
    <el-footer>
      <div>
        <TimeLine
          ref="time_line"
          @change="changeDate"
          :width="width"
          :mark-time="markTime"
          :time-range="time_range"
          :isAutoPlay="isAutoPlay"
          :startMeddleTime="startMeddleTime"
          @click="clickCanvas"
        />
      </div>
    </el-footer>
    <span slot="footer" class="dialog-footer">
    <el-button @click="handleClose">取 消</el-button>
  </span>
  </el-dialog>
</template>

<script>
import videoPlayer from "../common/JessVideoPlayer.vue";
import TimeLine from './TimeLineCanvas.vue'
import dayjs from 'dayjs'
import {formattedTime} from "../../../utils/dateFormate";
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）,
//例如：import 《组件名称》 from '《组件路径》,
export default {
  name: "HistoryPlayDialog",
  //import引入的组件需要注入到对象中才能使用"
  components: {TimeLine, videoPlayer},
  props: {
  },
  data() {
    //这里存放数据"
    return {
      data:{},
      videoUrl: null,
      isAutoPlay: false,
      width: "100%",
      startMeddleTime: null,
      startTime: null,
      endTime: null,
      time_range: [],
      markTime: [],
      form: {
        code: '',
        startTime: '',
        endTime: '',
      },
      channelList: [],
      pickerOptions: {},
      open: false,
    };
  },
  //计算属性 类似于data概念",
  computed: {},
  //监控data中的数据变化",
  watch: {
    data(val) {
      console.log('播放数据', val)
      this.videoUrl = val.videoUrl
      this.startMeddleTime = val.startTime
      this.startTime = val.startTime
      this.endTime = val.endTime
      this.time_range = [val.startTime, val.endTime]
      this.markTime = [
        {
          beginTime: val.startTime,
          endTime: val.endTime,
          bgColor: "green",
          text: "有视频",
        },
      ]
      this.form.startTime = this.startTime
      this.form.endTime = this.endTime
    },
  },
  //方法集合",
  methods: {
    getTime(time) {
      // console.log('当前视频帧',time)
    },
    updateOpen(flag){
      this.open = flag
    },
    clickCanvas(date) {
      this.$axios({
        method: 'get',
        url: '/api/jt1078/query/send/request/io/history/' + this.data.sim + '/' + this.data.channel + "/" + this.data.startTime + "/" + date + "/" + undefined
      }).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.videoUrl = videoUrl1;
        } 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);
        }
      })
    },
    changeDate(date, status) {
      console.log("选择时间：" + date + "  播放状态：" + status);
    },
    handleClose(){
      this.open = false
    }
  },
  //生命周期 - 创建完成（可以访问当前this实例）",
  created() {
  },
  //生命周期 - 挂载完成（可以访问DOM元素）",
  mounted() {
  },
  beforeCreate() {
  }, //生命周期 - 创建之前",
  beforeMount() {
  }, //生命周期 - 挂载之前",
  beforeUpdate() {
  }, //生命周期 - 更新之前",
  updated() {
  }, //生命周期 - 更新之后",
  beforeDestroy() {
  }, //生命周期 - 销毁之前",
  destroyed() {
  }, //生命周期 - 销毁完成",
  activated() {
  } //如果页面有keep-alive缓存功能，这个函数会触发",
};
</script>
<style scoped>
.el-header {
  background-color: #B3C0D1;
  color: #333;
  text-align: center;
  line-height: 60px;
}

.el-footer {
  background-color: #B3C0D1;
  color: #333;
  text-align: center;
  line-height: 60px;
}

.el-aside {
  background-color: #D3DCE6;
  color: #333;
  text-align: center;
  line-height: 200px;
  height: 75vh;
}

.el-main {
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
  background-color: #E9EEF3;
  color: #333;
  text-align: center;
  line-height: 160px;
  height: 80vh;
}

body > .el-container {
  margin-bottom: 40px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 260px;
}

.main-play {
  width: 100%;
  height: 100%;
  background-color: black;
}

.box-card {
  width: 80%;
  height: 100%;
}
/* 在现有样式基础上添加 */
.history-dialog-center {
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  margin: 0 !important;
}

.history-dialog-center .el-dialog {
  margin: 0 auto !important;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
}

.history-dialog-center .el-dialog__body {
  flex: 1;
  overflow-y: auto;
}

</style>