wvp-GB28181-pro/web_src/src/components/operationsForHistoryLog.vue

<template>
  <div id="app" style="width: 100%; background-color: #FFFFFF">
    <div class="page-header">
      <div class="page-title">
        <div>历史日志</div>
      </div>

      <div class="page-header-btn">
        搜索:
        <el-input @input="getFileList" style="margin-right: 1rem; width: auto;" size="mini" placeholder="关键字"
                  prefix-icon="el-icon-search" v-model="search" clearable></el-input>
        开始时间:
        <el-date-picker
          size="mini"
          v-model="startTime"
          type="datetime"
          value-format="yyyy-MM-dd HH:mm:ss"
          @change="getFileList"
          placeholder="选择日期时间">
        </el-date-picker>
        结束时间:
        <el-date-picker
          size="mini"
          v-model="endTime"
          type="datetime"
          value-format="yyyy-MM-dd HH:mm:ss"
          @change="getFileList"
          placeholder="选择日期时间">
        </el-date-picker>
        <!--        <el-button size="mini" icon="el-icon-delete" type="danger" @click="deleteRecord()">批量删除</el-button>-->
        <el-button icon="el-icon-refresh-right" circle size="mini" :loading="loading"
                   @click="getFileList()"></el-button>
      </div>
    </div>
    <!--日志列表-->
    <el-table size="medium" :data="fileList" style="width: 100%" :height="winHeight">
      <el-table-column
        type="selection"
        width="55">
      </el-table-column>
      <el-table-column prop="fileName" label="文件名">
      </el-table-column>
      <el-table-column prop="fileSize" label="文件大小">
        <template v-slot:default="scope">
          {{formatFileSize(scope.row.fileSize)}}
        </template>
      </el-table-column>
      <el-table-column label="开始时间">
        <template v-slot:default="scope">
          {{formatTimeStamp(scope.row.startTime)}}
        </template>
      </el-table-column>
      <el-table-column label="结束时间">
        <template v-slot:default="scope">
          {{formatTimeStamp(scope.row.endTime)}}
        </template>
      </el-table-column>
      <el-table-column label="操作" width="200" fixed="right">
        <template v-slot:default="scope">
          <el-button size="medium" icon="el-icon-document" type="text" @click="showLogView(scope.row)">查看
          </el-button>
          <el-button size="medium" icon="el-icon-download" type="text" @click="downloadFile(scope.row)">下载
          </el-button>
          <!--            <el-button size="medium" icon="el-icon-delete" type="text" style="color: #f56c6c"-->
          <!--                       @click="deleteRecord(scope.row)">删除-->
          <!--            </el-button>-->
        </template>
      </el-table-column>
    </el-table>
    <el-dialog
      top="10"
      :title="playerTitle"
      :visible.sync="showLog"
      width="90%">
      <operationsFoShowLog ref="recordVideoPlayer" :fileUrl="fileUrl" :loadEnd="loadEnd"></operationsFoShowLog>
    </el-dialog>
  </div>
</template>

<script>
import uiHeader from '../layout/UiHeader.vue'
import MediaServer from './service/MediaServer'
import operationsFoShowLog from './dialog/operationsFoShowLog.vue'
import moment from 'moment'
import userService from "./service/UserService";

export default {
  name: 'app',
  components: {
    uiHeader, operationsFoShowLog
  },
  data() {
    return {
      search: '',
      startTime: '',
      endTime: '',
      showLog: false,
      playerTitle: '',
      fileUrl: '',
      playerStyle: {
        "margin": "auto",
        "margin-bottom": "20px",
        "width": window.innerWidth / 2 + "px",
        "height": this.winHeight / 2 + "px",
      },
      mediaServerList: [], // 滅体节点列表
      mediaServerId: "", // 媒体服务
      mediaServerPath: null, // 媒体服务地址
      fileList: [], // 设备列表
      chooseRecord: null, // 媒体服务

      updateLooper: 0, //数据刷新轮训标志
      winHeight: window.innerHeight - 180,
      loading: false,
      mediaServerObj: new MediaServer(),

    };
  },
  computed: {},
  mounted() {
    this.initData();
  },
  destroyed() {
    this.$destroy('recordVideoPlayer');
  },
  methods: {
    initData: function () {
      this.getFileList();
    },
    getFileList: function () {
      this.$axios({
        method: 'get',
        url: `/api/log/list`,
        params: {
          query: this.search,
          startTime: this.startTime,
          endTime: this.endTime,
        }
      }).then((res) => {
        console.log(res)
        if (res.data.code === 0) {
          this.fileList = res.data.data;
        }
        this.loading = false;
      }).catch((error) => {
        console.log(error);
        this.loading = false;
      });
    },
    showLogView(file) {
      this.playerTitle = '正在加载日志...'
      this.fileUrl = `/api/log/file/${file.fileName}`
      this.showLog = true
      this.file = file

    },
    downloadFile(file) {
      // const link = document.createElement('a');
      // link.target = "_blank";
      // link.download = file.fileName;
      // if (process.env.NODE_ENV === 'development') {
      //   link.href = `/debug/api/log/file/${file.fileName}`
      // }else {
      //   link.href = `/api/log/file/${file.fileName}`
      // }
      //
      // link.click();


      // 文件下载地址
      const fileUrl = ((process.env.NODE_ENV === 'development') ? process.env.BASE_API : baseUrl) + `/api/log/file/${file.fileName}`;

      // 设置请求头
      const headers = new Headers();
      headers.append('access-token', userService.getToken()); // 设置授权头，替换YourAccessToken为实际的访问令牌
      // 发起  请求
      fetch(fileUrl, {
        method: 'GET',
        headers: headers,
      })
        .then(response => response.blob())
        .then(blob => {
          console.log(blob)
          // 创建一个虚拟的链接元素，模拟点击下载
          const link = document.createElement('a');
          link.target = "_blank";
          link.href = window.URL.createObjectURL(blob);
          link.download = file.fileName; // 设置下载文件名，替换filename.ext为实际的文件名和扩展名
          document.body.appendChild(link);

          // 模拟点击
          link.click();

          // 移除虚拟链接元素
          document.body.removeChild(link);
          this.$message.success("已申请截图",{closed: true})
        })
        .catch(error => console.error('下载失败：', error));
    },
    loadEnd() {
      this.playerTitle = this.file.fileName
    },
    deleteRecord() {
      // TODO
      let that = this;
      this.$axios({
        method: 'delete',
        url: `/record_proxy/api/record/delete`,
        params: {
          page: that.currentPage,
          count: that.count
        }
      }).then(function (res) {
        console.log(res)
        if (res.data.code === 0) {
          that.total = res.data.data.total;
          that.fileList = res.data.data.list;
        }
      }).catch(function (error) {
        console.log(error);
      });
    },
    formatTime(time) {
      const h = parseInt(time / 3600 / 1000)
      const minute = parseInt((time - h * 3600 * 1000) / 60 / 1000)
      let second = Math.ceil((time - h * 3600 * 1000 - minute * 60 * 1000) / 1000)
      if (second < 0) {
        second = 0;
      }
      return (h > 0 ? h + `小时` : '') + (minute > 0 ? minute + '分' : '') + (second > 0 ? second + '秒' : '')
    },
    formatTimeStamp(time) {
      return moment.unix(time / 1000).format('yyyy-MM-DD HH:mm:ss')
    },
    formatFileSize(fileSize) {
      if (fileSize < 1024) {
        return fileSize + 'B';
      } else if (fileSize < (1024*1024)) {
        let temp = fileSize / 1024;
        temp = temp.toFixed(2);
        return temp + 'KB';
      } else if (fileSize < (1024*1024*1024)) {
        let temp = fileSize / (1024*1024);
        temp = temp.toFixed(2);
        return temp + 'MB';
      } else {
        let temp = fileSize / (1024*1024*1024);
        temp = temp.toFixed(2);
        return temp + 'GB';
      }
    }


  }
};
</script>

<style>

</style>