优化历史日志展示效果
parent
f106675dc6
commit
2161cf6866
|
@ -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>
|
||||||
|
|
|
@ -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;
|
||||||
|
|
Loading…
Reference in New Issue