增加新版本web页面
This commit is contained in:
lin
258
web/src/views/operations/historyLog.vue
Executable file
258
web/src/views/operations/historyLog.vue
Executable file
@@ -0,0 +1,258 @@
|
||||
<template>
|
||||
<div id="app" class="app-container">
|
||||
<div style="height: calc(100vh - 124px);">
|
||||
<el-form :inline="true" size="mini">
|
||||
<el-form-item label="搜索">
|
||||
<el-input
|
||||
v-model="search"
|
||||
style="margin-right: 1rem; width: auto;"
|
||||
size="mini"
|
||||
placeholder="关键字"
|
||||
prefix-icon="el-icon-search"
|
||||
clearable
|
||||
@input="getFileList"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="开始时间">
|
||||
<el-date-picker
|
||||
v-model="startTime"
|
||||
size="mini"
|
||||
type="datetime"
|
||||
value-format="yyyy-MM-dd HH:mm:ss"
|
||||
placeholder="选择日期时间"
|
||||
@change="getFileList"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="结束时间">
|
||||
<el-date-picker
|
||||
v-model="endTime"
|
||||
size="mini"
|
||||
type="datetime"
|
||||
value-format="yyyy-MM-dd HH:mm:ss"
|
||||
placeholder="选择日期时间"
|
||||
@change="getFileList"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item style="float: right;">
|
||||
<el-button icon="el-icon-refresh-right" circle @click="getFileList()" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<!--日志列表-->
|
||||
<el-table size="medium" :data="fileList" style="width: 100%" :height="winHeight">
|
||||
<el-table-column
|
||||
type="selection"
|
||||
width="55"
|
||||
/>
|
||||
<el-table-column prop="fileName" label="文件名" />
|
||||
<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>
|
||||
</div>
|
||||
<el-dialog
|
||||
top="10vh"
|
||||
:title="playerTitle"
|
||||
:visible.sync="showLog"
|
||||
width="90%"
|
||||
>
|
||||
<div style="height: 600px">
|
||||
<showLog ref="recordVideoPlayer" :file-url="fileUrl" :load-end="loadEnd" />
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import showLog from './showLog.vue'
|
||||
import moment from 'moment'
|
||||
import { getToken } from '@/utils/auth'
|
||||
|
||||
export default {
|
||||
name: 'OperationsHistoryLog',
|
||||
components: {
|
||||
showLog
|
||||
},
|
||||
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
|
||||
|
||||
}
|
||||
},
|
||||
computed: {},
|
||||
mounted() {
|
||||
this.initData()
|
||||
},
|
||||
destroyed() {
|
||||
this.$destroy('recordVideoPlayer')
|
||||
},
|
||||
methods: {
|
||||
initData: function() {
|
||||
this.getFileList()
|
||||
},
|
||||
getFileList: function() {
|
||||
this.$store.dispatch('log/queryList', {
|
||||
query: this.search,
|
||||
startTime: this.startTime,
|
||||
endTime: this.endTime
|
||||
})
|
||||
.then((data) => {
|
||||
this.fileList = data
|
||||
})
|
||||
.catch((error) => {
|
||||
console.log(error)
|
||||
})
|
||||
.finally(() => {
|
||||
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.VUE_APP_BASE_API : window.baseUrl) + `/api/log/file/${file.fileName}`
|
||||
|
||||
// 设置请求头
|
||||
const headers = new Headers()
|
||||
headers.append('access-token', 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
|
||||
const 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>
|
||||
Reference in New Issue
Block a user