修改日志页面样式

lms/nladmin-ui/src/views/loki/api/loki.js

@@ -8,9 +8,9 @@ export function getLogData(param) {
   })
 }
 
-export function labelsValues() {
+export function labelsValues(type) {
   return request({
-    url: '/api/esLog/labels',
+    url: '/api/esLog/labels/' + type,
     method: 'get'
   })
 }

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

@@ -3,12 +3,27 @@
     <div class="head-container">
       <!--工具栏-->
       <el-form :inline="true" class="demo-form-inline" label-suffix=":" label-width="90px">
-        <el-form-item label="日志级别">
+        <el-form-item label="标签">
+          <el-select
+            v-model="system"
+            clearable
+            style="width: 100px; height: 35px;top: -5px;"
+            placeholder="所属标签"
+          >
+            <el-option
+              v-for="item in systemOptions"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="级别">
           <el-select
             v-model="logLevelValue"
             clearable
             style="width: 100px; height: 35px;top: -5px;"
-            placeholder="选择级别"
+            placeholder="日志级别"
           >
             <el-option
               v-for="item in labelsOptions"
@@ -38,8 +53,8 @@
         <el-form-item label="SQL日志" prop="filterSql">
           <el-switch
             v-model="filterSql"
-            active-color="#409EFF"
-            inactive-color="#F56C6C"
+            active-color="#F56C6C"
+            inactive-color="#409EFF"
             active-value="1"
             inactive-valu="0"
           />
@@ -135,16 +150,15 @@
         <div style="width: 100%">
           <div v-for="(log, index) in logs" :key="index">
             <div>
-              <span>{{ log.system }}</span>
+              <span style="color: #6c0a99;font-weight: 700">{{ 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: #7c8db0">{{ 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>
         </div>
       </el-card>
@@ -158,6 +172,7 @@ import logOperation from '@/views/loki/api/loki'
 
 let queryParam = {
   logLevel: null,
+  system: null,
   startTime: null,
   endTime: null,
   traceId: null,
@@ -172,7 +187,9 @@ export default {
   data() {
     return {
       labelsOptions: [], // 所有标签和对应所有值数据
+      systemOptions: [], // 所有标签和对应所有值数据
       logLevelValue: '',
+      system: '',
       timeRange: [],
       message: '',
       traceId: '',
@@ -243,7 +260,8 @@ export default {
     }
   },
   created() {
-    this.initLabelsValues()
+    this.initLabelsValues('logLevel')
+    this.initLabelsValues('system')
   },
   methods: {
     fontType(level) {
@@ -258,9 +276,14 @@ export default {
       }
       return { 'color': '#a74dc6' }
     },
-    initLabelsValues() {
-      logOperation.labelsValues().then(res => {
-        this.labelsOptions = res
+    initLabelsValues(type) {
+      logOperation.labelsValues(type).then(res => {
+        if (type === 'logLevel') {
+          this.labelsOptions = res
+        }
+        if (type === 'system') {
+          this.systemOptions = res
+        }
       })
     },
     queryData() {
@@ -281,6 +304,7 @@ export default {
       queryParam.traceId = this.traceId
       queryParam.size = this.size
       queryParam.page = this.page
+      queryParam.system = this.system
 
       logOperation.getLogData(queryParam).then(res => {
         this.showEmpty = false