AdminBackendLog.vue 通过 el-scrollbar 实现了数据加载时自动滚动到最底部功能

src/views/admin/AdminBackendLog.vue

@@ -2,17 +2,41 @@
   <el-container>
     <el-header height="220">
       <el-row style="margin-top: 10px">
+        <span>
+          <span v-if="wsStatus" style="color: green">WebSocket 已连接</span>
+          <span v-if="!wsStatus" style="color: red">WebSocket 未连接</span>
+        </span>
         <el-select
-          v-model="queryInfo.scope"
-          clearable
-          placeholder="查询条件"
+          v-model="queryInfo.logType"
+          placeholder="选择日志类型"
           style="margin-left: 5px"
           @change="onSelectChange"
-        />
+        >
+          <el-option label="访问日志" value="1" />
+          <el-option label="运行日志" value="2" />
+        </el-select>
+        <el-select
+          v-model="queryInfo.logType"
+          placeholder="选择应用"
+          style="margin-left: 5px"
+          @change="onSelectChange"
+        >
+          <el-option label="content-192.168.0.111" value="1" />
+          <el-option label="content-192.168.0.112" value="2" />
+        </el-select>
       </el-row>
     </el-header>
     <el-main>
-      <span>show log</span>
+      <div style="height: 60vh;">
+        <el-scrollbar ref="myScrollbar" style="width: 100%; height: 100%;">
+          <div v-for="(item, index) in dataList" :key="index">
+            <el-row>
+              <span>{{ item.timestamp }}</span>
+              <span>{{ item.message }}</span>
+            </el-row>
+          </div>
+        </el-scrollbar>
+      </div>
     </el-main>
   </el-container>
 </template>
@@ -23,21 +47,115 @@ export default {
   data() {
     return {
       queryInfo: {
-        scope: null,
+        logType: '1',
         pn: 1
-      }
+      },
+      dataList: [],
+      logFormat: {
+        timestamp: null,
+        message: ''
+      },
+      ws: null,
+      wsStatus: false,
+      reconnectLock: false
     }
   },
   created() {
+    this.initWebSocket()
     document.title = 'BackendLog'
+    // this.addData()
   },
   methods: {
     onSelectChange() {
-      this.$message.info('select change')
+      this.$message.info(this.queryInfo.logType)
+    },
+    addData() {
+      const that = this
+      setInterval(function() {
+        that.dataList.push({
+          timestamp: new Date(),
+          message: 'abcdefg'
+        })
+
+        // 滚动条始终保持在底部
+        that.$nextTick(() => {
+          that.$refs['myScrollbar'].wrap.scrollTop = that.$refs['myScrollbar'].wrap.scrollHeight
+        })
+      }, 500)
+    },
+    initWebSocket() {
+      if ('WebSocket' in window) {
+        const wsUrl = 'ws://localhost:6007/logws/pull/runtime?app=tnb&host=localhost'
+        const wsUrl1 = 'ws://localhost:6007/logws/pull/access?app=tnb&host=localhost'
+        this.ws = new WebSocket(wsUrl1)
+        const that = this
+        this.ws.onopen = function() {
+          that.setOnline()
+          console.log('websocket connected...')
+        }
+        this.ws.onclose = function() {
+          that.setOffline()
+          console.log('websocket connection closed...')
+          that.reconnect()
+        }
+        this.ws.onerror = function() {
+          that.setOffline()
+          console.log('websocket connection error...')
+          that.reconnect()
+        }
+        this.ws.onmessage = function(evt) {
+          const message = JSON.parse(evt.data)
+          that.processMessage(message)
+        }
+      } else {
+        // 浏览器不支持 WebSocket
+        this.$message.error('您的浏览器不支持 WebSocket!')
+      }
+    },
+    setOnline() {
+      this.wsStatus = true
+    },
+    setOffline() {
+      this.wsStatus = false
+    },
+    sendMessage(message) {
+      this.ws.send(message)
+    },
+    processMessage(message) {
+      const requestId = message.requestId
+      const requestTime = message.requestTime
+      const remoteAddr = message.remoteAddr
+      const requestMethod = message.requestMethod
+      const requestUrl = message.requestUrl
+      const statusCode = message.statusCode
+      const executeTime = message.consumeTime
+      const targetRoute = message.targetRoute
+      const targetService = message.targetService
+
+      this.dataList.push({
+        timestamp: requestTime,
+        message: requestUrl
+      })
+    },
+    reconnect() {
+      if (this.reconnectLock) return
+
+      this.reconnectLock = true
+      const that = this
+      setTimeout(function() {
+        console.log('websocket reconnecting...')
+        that.initWebSocket()
+        that.reconnectLock = false
+      }, 5000)
     }
   }
 }
 </script>
 
 <style>
+/deep/ .el-scrollbar__wrap {
+  overflow: scroll;
+  height: 100% !important;
+  overflow-x: hidden !important;
+}
 </style>