初步实现前端展示

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));
     }
 }

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>

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",

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`)

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;