wvp/web_src/src/components/dialog/recordDownload.vue

<template>
<div id="recordDownload" >
  <el-dialog :title="title" v-if="showDialog"  width="45rem" :append-to-body="true" :close-on-click-modal="false" :visible.sync="showDialog" :destroy-on-close="true" @close="close()" center>
    <el-row>
      <el-col :span="18" style="padding-top: 7px;">
        <el-progress :percentage="percentage"></el-progress>
      </el-col>
      <el-col :span="6" >
        <el-button icon="el-icon-download" v-if="downloadFile" size="mini" title="点击下载" @click="downloadFileClientEvent()">下载</el-button>
      </el-col>
    </el-row>
  </el-dialog>
</div>
</template>


<script>

import moment from "moment";

export default {
    name: 'recordDownload',
    created() {
      window.addEventListener('beforeunload', this.stopDownloadRecord)

    },
    data() {
        return {
          title: "下载中...",
          deviceId: "",
          channelId: "",
          app: "",
          stream: "",
          mediaServerId: "",
          showDialog: false,
          scale: 1,
          percentage: 0.00,
          streamInfo: null,
          taskId: null,
          getProgressRun: false,
          timer: null,
          downloadFile: null,

        };
    },
    methods: {
        openDialog: function (deviceId, channelId, app, stream, mediaServerId) {
            this.deviceId = deviceId;
            this.channelId = channelId;
            this.app = app;
            this.stream = stream;
            this.mediaServerId = mediaServerId;
            this.showDialog = true;
            this.getProgressRun = true;
            this.percentage = 0.0;
            this.getProgressTimer()
        },
        getProgressTimer: function (){
          if (!this.getProgressRun) {
            return;
          }
          if (this.percentage == 100 ) {

            return;
          }
          setTimeout( ()=>{
            if (!this.showDialog) return;
            this.getProgress(this.getProgressTimer())
          }, 5000)
        },
        getProgress: function (callback){
          this.$axios({
            method: 'get',
            url: `/api/gb_record/download/progress/${this.deviceId}/${this.channelId}/${this.stream}`
          }).then((res)=> {
              if (res.data.code === 0) {
                this.streamInfo = res.data.data;
                if (parseFloat(res.data.progress) == 1) {
                  this.percentage = 100;
                }else {
                  this.percentage = (parseFloat(res.data.data.progress)*100).toFixed(1);
                }
                if (this.streamInfo.downLoadFilePath) {
                  if (location.protocol === "https:") {
                    this.downloadFile = this.streamInfo.downLoadFilePath.httpsPath;
                  }else {
                    this.downloadFile = this.streamInfo.downLoadFilePath.httpPath;
                  }
                  this.getProgressRun = false;
                  this.downloadFileClientEvent()
                }
                if (callback)callback();
              }else {
                this.$message({
                  showClose: true,
                  message: res.data.msg,
                  type: "error",
                });
                this.close();
              }

          }).catch((e) =>{
            console.log(e)
          });
        },
        close: function (){
          if (this.streamInfo.progress < 1) {
            this.stopDownloadRecord();
          }

          if (this.timer !== null) {
            window.clearTimeout(this.timer);
            this.timer = null;
          }
          this.showDialog=false;
          this.getProgressRun = false;
        },
        gbScale: function (scale){
          this.scale = scale;
        },

        stopDownloadRecord: function (callback) {
          this.$axios({
            method: 'get',
            url: '/api/gb_record/download/stop/' + this.deviceId + "/" + this.channelId+ "/" + this.stream
          }).then((res)=> {
            if (callback) callback(res)
          });
        },
      downloadFileClientEvent: function (){
        // window.open(this.downloadFile )

        let x = new XMLHttpRequest();
        x.open("GET", this.downloadFile, true);
        x.responseType = 'blob';
        x.onload=(e)=> {
          let url = window.URL.createObjectURL(x.response)
          let a = document.createElement('a');
          a.href = url
          a.download = this.deviceId + "-" + this.channelId + ".mp4";
          a.click()
        }
        x.send();
      }
    },
    destroyed() {
      window.removeEventListener('beforeunload', this.stopDownloadRecord)
    }
};
</script>

<style>

</style>