优化历史日志展示效果

web_src/src/components/dialog/operationsFoShowLog.vue

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

web_src/src/components/operationsForHistoryLog.vue

@@ -72,7 +72,7 @@
       :title="playerTitle"
       :visible.sync="showLog"
       width="90%">
-      <operationsFoShowLog ref="recordVideoPlayer" :fileUrl="fileUrl" ></operationsFoShowLog>
+      <operationsFoShowLog ref="recordVideoPlayer" :fileUrl="fileUrl" :loadEnd="loadEnd"></operationsFoShowLog>
     </el-dialog>
   </div>
 </template>
@@ -147,14 +147,10 @@ export default {
       });
     },
     showLogView(file) {
-      this.playerTitle = file.fileName
+      this.playerTitle = '正在加载日志...'
       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.file = file
 
     },
     downloadFile(file) {
@@ -169,6 +165,9 @@ export default {
 
       link.click();
     },
+    loadEnd() {
+      this.playerTitle = this.file.fileName
+    },
     deleteRecord() {
       // TODO
       let that = this;