修改日志页面样式

lms/nladmin-ui/src/views/loki/view/index.vue

@@ -6,6 +6,7 @@
         <el-form-item label="日志级别">
           <el-select
             v-model="logLevelValue"
+            clearable
             style="width: 100px; height: 35px;top: -5px;"
             placeholder="选择级别"
           >
@@ -112,7 +113,7 @@
         </el-form-item>
       </el-form>
     </div>
-  <!--  <div style="margin: 3px; min-height: 80vh;">
+    <!--  <div style="margin: 3px; min-height: 80vh;">
       <el-table :data="logs">
         <el-table-column label="ip" prop="requestIp" />
         <el-table-column label="所属系统" prop="system" />
@@ -134,14 +135,14 @@
         <div style="width: 100%">
           <div v-for="(log, index) in logs" :key="index">
             <div>
-              <span >{{log.system}}</span>
-              <span style="color: #13ce66">{{log.thread}}</span>
-              <span style="color: #00afff">{{log.logLevel}}</span>
-              <span>{{log.requestIp}}</span>
-              <span style="color: #b4bccc">{{log.requestTime}}</span>
-              <span style="color: chocolate">{{log.traceId}}</span>
-              <span style="color: #7a6df0">{{log.requestMethod}}</span>
-              <span style="margin: 5px;">-----{{log.message}}</span>
+              <span>{{ log.system }}</span>
+              <span style="color: #13ce66">{{ log.thread }}</span>
+              <span :style="fontType(log.logLevel)">{{ log.logLevel }}</span>
+              <span>{{ log.requestIp }}</span>
+              <span style="color: #b4bccc">{{ log.requestTime }}</span>
+              <span style="color: chocolate">{{ log.traceId }}</span>
+              <span style="color: #7a6df0">{{ log.requestMethod }}</span>
+              <span style="margin: 5px;font-size: 15px">-----{{ log.message }}</span>
             </div>
 
           </div>
@@ -245,9 +246,20 @@ export default {
     this.initLabelsValues()
   },
   methods: {
+    fontType(level) {
+      if (level === 'INFO') {
+        return { 'color': '#1b6cc4' }
+      }
+      if (level === 'ERROR') {
+        return { 'color': '#e30a0a' }
+      }
+      if (level === 'DEBUG') {
+        return { 'color': '#1e2022' }
+      }
+      return { 'color': '#a74dc6' }
+    },
     initLabelsValues() {
       logOperation.labelsValues().then(res => {
-
         this.labelsOptions = res
       })
     },
@@ -259,7 +271,6 @@ export default {
       if (this.timeZoneValue !== '') {
         queryParam.startTime = new Date(((time.getTime() - this.timeZoneValue)))
       }
-      debugger
       if (this.timeRange !== '' && this.timeRange.length > 0) {
         queryParam.startTime = this.timeRange[0]
         queryParam.endTime = this.timeRange[1]