优化历史日志展示效果

pull/1682/head
648540858 2024-11-04 10:07:07 +08:00
parent f106675dc6
commit 2161cf6866
2 changed files with 32 additions and 13 deletions

View File

@ -10,7 +10,7 @@
</el-button> </el-button>
</div> </div>
</div> </div>
<log-viewer :log="logData" :loading="loading" :auto-scroll="true" :height="winHeight"/> <log-viewer :log="logData" :auto-scroll="true" :height="winHeight"/>
</div> </div>
</template> </template>
@ -22,11 +22,11 @@ import stripAnsi from "strip-ansi";
export default { export default {
name: 'log', name: 'log',
props: [ 'fileUrl', 'remoteUrl'], props: [ 'fileUrl', 'remoteUrl', 'loadEnd'],
components: {}, components: {},
data() { data() {
return { return {
loading: false, loading: true,
winHeight: window.innerHeight - 300, winHeight: window.innerHeight - 300,
data: [], data: [],
filter: "", filter: "",
@ -54,6 +54,7 @@ export default {
} }
}, },
created() { created() {
this.data = []
if (this.fileUrl || this.remoteUrl) { if (this.fileUrl || this.remoteUrl) {
this.initData(); this.initData();
} }
@ -64,8 +65,9 @@ export default {
}, },
methods: { methods: {
initData: function () { initData: function () {
console.log('remoteUrl ' + this.remoteUrl); this.loading = true
console.log('fileUrl ' + this.fileUrl); this.data = []
console.log(this.loading)
if (this.fileUrl) { if (this.fileUrl) {
this.$axios({ this.$axios({
method: 'get', method: 'get',
@ -75,7 +77,10 @@ export default {
dataArray.forEach(item => { dataArray.forEach(item => {
this.data.push(item); this.data.push(item);
}) })
this.loading = false
if (this.loadEnd && typeof this.loadEnd === "function") {
this.loadEnd()
}
}).catch((error) => { }).catch((error) => {
console.log(error); console.log(error);
}); });
@ -87,6 +92,7 @@ export default {
console.log(`conn closed: code=${e.code}, reason=${e.reason}, wasClean=${e.wasClean}`) console.log(`conn closed: code=${e.code}, reason=${e.reason}, wasClean=${e.wasClean}`)
} }
window.websocket.onmessage = e => { window.websocket.onmessage = e => {
this.loading = false
this.data.push(e.data); this.data.push(e.data);
} }
window.websocket.onerror = e => { window.websocket.onerror = e => {
@ -153,3 +159,17 @@ export default {
} }
}; };
</script> </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>

View File

@ -72,7 +72,7 @@
:title="playerTitle" :title="playerTitle"
:visible.sync="showLog" :visible.sync="showLog"
width="90%"> width="90%">
<operationsFoShowLog ref="recordVideoPlayer" :fileUrl="fileUrl" ></operationsFoShowLog> <operationsFoShowLog ref="recordVideoPlayer" :fileUrl="fileUrl" :loadEnd="loadEnd"></operationsFoShowLog>
</el-dialog> </el-dialog>
</div> </div>
</template> </template>
@ -147,14 +147,10 @@ export default {
}); });
}, },
showLogView(file) { showLogView(file) {
this.playerTitle = file.fileName this.playerTitle = '正在加载日志...'
this.fileUrl = `/api/log/file/${file.fileName}` this.fileUrl = `/api/log/file/${file.fileName}`
// if (process.env.NODE_ENV === 'development') {
// this.fileUrl = `/debug/api/log/file/${file.fileName}`
// }else {
//
// }
this.showLog = true this.showLog = true
this.file = file
}, },
downloadFile(file) { downloadFile(file) {
@ -169,6 +165,9 @@ export default {
link.click(); link.click();
}, },
loadEnd() {
this.playerTitle = this.file.fileName
},
deleteRecord() { deleteRecord() {
// TODO // TODO
let that = this; let that = this;