From 2161cf6866a5fb74532d4ba92374eb01c2b65772 Mon Sep 17 00:00:00 2001
From: 648540858 <648540858@qq.com>
Date: Mon, 4 Nov 2024 10:07:07 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=E5=8E=86=E5=8F=B2=E6=97=A5?=
 =?UTF-8?q?=E5=BF=97=E5=B1=95=E7=A4=BA=E6=95=88=E6=9E=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/dialog/operationsFoShowLog.vue | 32 +++++++++++++++----
 .../components/operationsForHistoryLog.vue    | 13 ++++----
 2 files changed, 32 insertions(+), 13 deletions(-)

diff --git a/web_src/src/components/dialog/operationsFoShowLog.vue b/web_src/src/components/dialog/operationsFoShowLog.vue
index 8ebbfd20..0a4c483c 100755
--- a/web_src/src/components/dialog/operationsFoShowLog.vue
+++ b/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>
diff --git a/web_src/src/components/operationsForHistoryLog.vue b/web_src/src/components/operationsForHistoryLog.vue
index d16d2564..8a5a860e 100755
--- a/web_src/src/components/operationsForHistoryLog.vue
+++ b/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;