增加新版本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>
|
||||
40
web/src/views/operations/realLog.vue
Executable file
40
web/src/views/operations/realLog.vue
Executable file
@@ -0,0 +1,40 @@
|
||||
<template>
|
||||
<div id="log" class="app-container">
|
||||
<div style="height: calc(100vh - 124px);">
|
||||
<showLog ref="recordVideoPlayer" :remote-url="removeUrl" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
import showLog from './showLog.vue'
|
||||
|
||||
export default {
|
||||
name: 'OperationsRealLog',
|
||||
components: { showLog },
|
||||
data() {
|
||||
return {
|
||||
loading: false,
|
||||
removeUrl: this.getURl(),
|
||||
winHeight: window.innerHeight - 220
|
||||
}
|
||||
},
|
||||
created() {
|
||||
console.log('removeUrl11 == ' + this.removeUrl)
|
||||
},
|
||||
methods: {
|
||||
getURl: function() {
|
||||
if (process.env.NODE_ENV !== 'development') {
|
||||
if (location.protocol === 'https:') {
|
||||
return `wss://${window.location.host}/channel/log`
|
||||
} else {
|
||||
return `ws://${window.location.host}/channel/log`
|
||||
}
|
||||
} else {
|
||||
return `ws://${window.location.host}${process.env.VUE_APP_BASE_API}/channel/log`
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
180
web/src/views/operations/showLog.vue
Executable file
180
web/src/views/operations/showLog.vue
Executable file
@@ -0,0 +1,180 @@
|
||||
<template>
|
||||
<div id="log" style="height: 100%">
|
||||
<el-form :inline="true" size="mini">
|
||||
<el-form-item label="过滤">
|
||||
<el-input v-model="filter" size="mini" placeholder="请输入过滤关键字" style="width: 20vw" />
|
||||
</el-form-item>
|
||||
<el-form-item style="float: right;">
|
||||
<el-button size="mini" icon="el-icon-download" @click="downloadFile()">下载</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<log-viewer :log="logData" :auto-scroll="true" :height="winHeight" style="height: calc(100% - 60px);" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
import moment from 'moment/moment'
|
||||
import logViewer from '@femessage/log-viewer'
|
||||
import stripAnsi from 'strip-ansi'
|
||||
import request from '@/utils/request'
|
||||
|
||||
export default {
|
||||
name: 'Log',
|
||||
components: { logViewer },
|
||||
props: ['fileUrl', 'remoteUrl', 'loadEnd'],
|
||||
data() {
|
||||
return {
|
||||
loading: true,
|
||||
winHeight: window.innerHeight - 100,
|
||||
data: [],
|
||||
filter: '',
|
||||
logData: '',
|
||||
websocket: null,
|
||||
destroyedCallback: null
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
remoteUrl(newValue) {
|
||||
console.log(newValue)
|
||||
this.remoteUrl = newValue
|
||||
this.initData()
|
||||
},
|
||||
fileUrl(newValue) {
|
||||
this.fileUrl = newValue
|
||||
this.initData()
|
||||
},
|
||||
filter(newValue) {
|
||||
this.filter = newValue
|
||||
this.logData = this.getLogData()
|
||||
},
|
||||
data(newValue) {
|
||||
this.data = newValue
|
||||
this.logData = this.getLogData()
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.data = []
|
||||
if (this.fileUrl || this.remoteUrl) {
|
||||
this.initData()
|
||||
}
|
||||
},
|
||||
destroyed() {
|
||||
console.log('destroyed')
|
||||
if (this.destroyedCallback) {
|
||||
this.destroyedCallback()
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
initData: function() {
|
||||
this.loading = true
|
||||
this.data = []
|
||||
console.log(this.loading)
|
||||
if (this.fileUrl) {
|
||||
request({
|
||||
method: 'get',
|
||||
url: this.fileUrl
|
||||
}).then((res) => {
|
||||
const dataArray = res.split('\n')
|
||||
dataArray.forEach(item => {
|
||||
this.data.push(item)
|
||||
})
|
||||
this.loading = false
|
||||
if (this.loadEnd && typeof this.loadEnd === 'function') {
|
||||
this.loadEnd()
|
||||
}
|
||||
}).catch((error) => {
|
||||
console.log(error)
|
||||
})
|
||||
} else if (this.remoteUrl) {
|
||||
console.log('remoteUrl' + this.remoteUrl)
|
||||
console.log(window.location.host)
|
||||
window.websocket = new WebSocket(this.remoteUrl, this.$store.getters.token)
|
||||
window.websocket.onclose = e => {
|
||||
console.log(`conn closed: code=${e.code}, reason=${e.reason}, wasClean=${e.wasClean}`)
|
||||
}
|
||||
window.websocket.onmessage = e => {
|
||||
this.loading = false
|
||||
this.data.push(e.data)
|
||||
}
|
||||
window.websocket.onerror = e => {
|
||||
console.log(`conn err`)
|
||||
console.error(e)
|
||||
}
|
||||
window.websocket.onopen = e => {
|
||||
console.log(`conn open: ${e}`)
|
||||
this.destroyedCallback = () => {
|
||||
window.websocket.close()
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
getLogData: function() {
|
||||
this.loading = true
|
||||
if (this.data.length === 0) {
|
||||
this.loading = false
|
||||
return ''
|
||||
} else {
|
||||
let result = ''
|
||||
for (let i = 0; i < this.data.length; i++) {
|
||||
if (this.filter.length === 0) {
|
||||
result += this.data[i] + '\r\n'
|
||||
} else {
|
||||
if (this.data[i].indexOf(this.filter) > -1) {
|
||||
result += this.data[i] + '\r\n'
|
||||
}
|
||||
}
|
||||
}
|
||||
this.loading = false
|
||||
return result
|
||||
}
|
||||
},
|
||||
getLogDataWithOutAnsi: function() {
|
||||
if (this.data.length === 0) {
|
||||
return ''
|
||||
} else {
|
||||
let result = ''
|
||||
for (let i = 0; i < this.data.length; i++) {
|
||||
if (this.filter.length === 0) {
|
||||
result += stripAnsi(this.data[i]) + '\r\n'
|
||||
} else {
|
||||
if (this.data[i].indexOf(this.filter) > -1) {
|
||||
result += stripAnsi(this.data[i]) + '\r\n'
|
||||
}
|
||||
}
|
||||
}
|
||||
return result
|
||||
}
|
||||
},
|
||||
downloadFile() {
|
||||
const blob = new Blob([this.getLogDataWithOutAnsi()], {
|
||||
type: 'text/plain;charset=utf-8'
|
||||
})
|
||||
const reader = new FileReader()
|
||||
reader.readAsDataURL(blob)
|
||||
reader.onload = (e) => {
|
||||
const a = document.createElement('a')
|
||||
a.download = `wvp-${this.filter}-${moment().format('yyyy-MM-DD')}.log`
|
||||
a.href = e.target.result
|
||||
document.body.appendChild(a)
|
||||
a.click()
|
||||
document.body.removeChild(a)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.log-loading{
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
background-color: transparent;
|
||||
font-size: 20px;
|
||||
color: rgb(255, 255, 255);
|
||||
z-index: 1000;
|
||||
}
|
||||
</style>
|
||||
45
web/src/views/operations/systemInfo.vue
Executable file
45
web/src/views/operations/systemInfo.vue
Executable file
@@ -0,0 +1,45 @@
|
||||
<template>
|
||||
<div id="operationsForSystemInfo" class="app-container" style="margin: 100px 200px">
|
||||
<el-descriptions v-for="(value, key) in systemInfoList" :key="key" :title="key" :column="2" :loading="loading" style="margin-bottom: 30px">
|
||||
<el-descriptions-item v-for="(childValue, childKey) in value" :key="childKey">
|
||||
<template slot="label">
|
||||
<span>{{ childKey }}</span>
|
||||
</template>
|
||||
<span v-if="!childValue.startsWith('http')">{{ childValue }}</span>
|
||||
<a v-else target="_blank" :href="childValue">{{ childValue }}</a>
|
||||
</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
export default {
|
||||
name: 'OperationsSystemInfo',
|
||||
data() {
|
||||
return {
|
||||
loading: false,
|
||||
winHeight: window.innerHeight - 220,
|
||||
systemInfoList: {}
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.initData()
|
||||
},
|
||||
methods: {
|
||||
initData: function() {
|
||||
this.loading = true
|
||||
this.$store.dispatch('server/info')
|
||||
.then(data => {
|
||||
this.systemInfoList = data
|
||||
})
|
||||
.catch((error) => {
|
||||
console.log(error)
|
||||
})
|
||||
.finally(() => {
|
||||
this.loading = false
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
Reference in New Issue
Block a user