From 71c0de2aa90b6e83df82a6a363a82c37900338b1 Mon Sep 17 00:00:00 2001
From: 648540858 <648540858@qq.com>
Date: Fri, 1 Nov 2024 14:51:11 +0800
Subject: [PATCH] =?UTF-8?q?=E5=88=9D=E6=AD=A5=E5=AE=9E=E7=8E=B0=E5=89=8D?=
 =?UTF-8?q?=E7=AB=AF=E5=B1=95=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../iot/vmp/conf/webLog/WebSocketAppender.java    |  6 ++++--
 src/main/resources/logback-spring.xml             |  2 +-
 web_src/package.json                              |  5 +++++
 web_src/src/components/log.vue                    | 15 ++++++++-------
 web_src/src/main.js                               |  2 ++
 5 files changed, 20 insertions(+), 10 deletions(-)

diff --git a/src/main/java/com/genersoft/iot/vmp/conf/webLog/WebSocketAppender.java b/src/main/java/com/genersoft/iot/vmp/conf/webLog/WebSocketAppender.java
index 78e4a66d..000ab86e 100644
--- a/src/main/java/com/genersoft/iot/vmp/conf/webLog/WebSocketAppender.java
+++ b/src/main/java/com/genersoft/iot/vmp/conf/webLog/WebSocketAppender.java
@@ -3,10 +3,11 @@ package com.genersoft.iot.vmp.conf.webLog;
 import ch.qos.logback.classic.encoder.PatternLayoutEncoder;
 import ch.qos.logback.classic.spi.ILoggingEvent;
 import ch.qos.logback.core.AppenderBase;
-import com.genersoft.iot.vmp.utils.DateUtil;
 import lombok.Data;
 import lombok.EqualsAndHashCode;
 
+import java.nio.charset.StandardCharsets;
+
 @Data
 @EqualsAndHashCode(callSuper = true)
 public class WebSocketAppender  extends AppenderBase<ILoggingEvent> {
@@ -17,6 +18,7 @@ public class WebSocketAppender  extends AppenderBase<ILoggingEvent> {
     protected void append(ILoggingEvent loggingEvent) {
         byte[] data = this.encoder.encode(loggingEvent);
         // Push to client.
-        LogChannel.push(DateUtil.timestampMsTo_yyyy_MM_dd_HH_mm_ss(loggingEvent.getTimeStamp()) + " " +  loggingEvent.getFormattedMessage());
+//        LogChannel.push(DateUtil.timestampMsTo_yyyy_MM_dd_HH_mm_ss(loggingEvent.getTimeStamp()) + " " +  loggingEvent.getFormattedMessage());
+        LogChannel.push(new String(data, StandardCharsets.UTF_8));
     }
 }
diff --git a/src/main/resources/logback-spring.xml b/src/main/resources/logback-spring.xml
index 6f72cb6d..585e1d67 100644
--- a/src/main/resources/logback-spring.xml
+++ b/src/main/resources/logback-spring.xml
@@ -27,7 +27,7 @@
 	<!-- WebSocket -->
 	<appender name="websocket" class="com.genersoft.iot.vmp.conf.webLog.WebSocketAppender">
 		<encoder>
-			<pattern>${FILE_LOG_PATTERN}</pattern>
+			<pattern>${log.pattern}</pattern>
 			<charset>UTF-8</charset>
 		</encoder>
 	</appender>
diff --git a/web_src/package.json b/web_src/package.json
index 847b5d04..8150181a 100644
--- a/web_src/package.json
+++ b/web_src/package.json
@@ -10,10 +10,14 @@
     "build": "node build/build.js"
   },
   "dependencies": {
+    "@babel/runtime": "^7.3.0",
+    "@femessage/log-viewer": "^1.5.0",
     "@liveqing/liveplayer": "^2.7.10",
     "@wchbrad/vue-easy-tree": "^1.0.12",
+    "ansi_up": "^6.0.2",
     "axios": "^0.24.0",
     "core-js": "^2.6.5",
+    "defineProperty": "link:@babel/runtime/helpers/defineProperty",
     "echarts": "^4.9.0",
     "element-ui": "^2.15.14",
     "fingerprintjs2": "^2.1.2",
@@ -21,6 +25,7 @@
     "ol": "^6.14.1",
     "postcss-pxtorem": "^5.1.1",
     "screenfull": "5.1.0",
+    "slicedToArray": "link:@babel/runtime/helpers/slicedToArray",
     "uuid": "^8.3.2",
     "v-charts": "^1.19.0",
     "vue": "^2.6.11",
diff --git a/web_src/src/components/log.vue b/web_src/src/components/log.vue
index 924b448b..edabcb03 100755
--- a/web_src/src/components/log.vue
+++ b/web_src/src/components/log.vue
@@ -1,17 +1,14 @@
 <template>
-  <div id="log" style="width: 100%">
-    <el-container v-loading="loading" >
-      <el-aside width="400px" >
-      </el-aside>
-      <el-main style="padding: 5px;">
-      </el-main>
-    </el-container>
+  <div id="log" style="width: 100%;height: 100%">
+    <log-viewer :log="data" :loading="loading" :auto-scroll="false" :height="winHeight" />
 
   </div>
 </template>
 
 <script>
 // import uiHeader from '../layout/UiHeader.vue'
+import {AnsiUp} from 'ansi_up'
+
 
 export default {
   name: 'log',
@@ -19,6 +16,9 @@ export default {
   data() {
     return {
       loading: false,
+      winHeight: window.innerHeight - 120,
+      data: '',
+      ansiUp: new AnsiUp()
     };
   },
 
@@ -36,6 +36,7 @@ export default {
       }
       websocket.onmessage = e => {
         console.log(e.data);
+        this.data += e.data + "\r\n"
       }
       websocket.onerror = e => {
         console.log(`conn err`)
diff --git a/web_src/src/main.js b/web_src/src/main.js
index 328bb257..6f7fc25c 100755
--- a/web_src/src/main.js
+++ b/web_src/src/main.js
@@ -6,6 +6,7 @@ import router from './router/index.js';
 import axios from 'axios';
 import VueCookies from 'vue-cookies';
 import VCharts from 'v-charts';
+import logViewer from '@femessage/log-viewer';
 
 import VueClipboard from 'vue-clipboard2';
 import Fingerprint2 from 'fingerprintjs2';
@@ -40,6 +41,7 @@ Vue.use(VueClipboards);
 Vue.prototype.$notify = Notification;
 Vue.use(Contextmenu);
 Vue.use(VCharts);
+Vue.use(logViewer);
 
 axios.defaults.baseURL = (process.env.NODE_ENV === 'development') ? process.env.BASE_API : (window.baseUrl ? window.baseUrl : "");
 axios.defaults.withCredentials = true;