1

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

@@ -3,12 +3,19 @@
     <div class="head-container">
       <!--工具栏-->
       <el-form :inline="true" class="demo-form-inline" label-suffix=":" label-width="90px">
-        <el-form-item label="日志标签">
-          <el-cascader
-            v-model="labelAndValue"
-            :options="labelsOptions"
-            placeholder="请选择标签"
-          />
+        <el-form-item label="日志级别">
+          <el-select
+            v-model="logLevelValue"
+            style="width: 100px; height: 35px;top: -5px;"
+            placeholder="选择级别"
+          >
+            <el-option
+              v-for="item in labelsOptions"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            />
+          </el-select>
         </el-form-item>
         <el-form-item label="关键字">
           <el-input
@@ -18,6 +25,34 @@
             clearable
           />
         </el-form-item>
+        <el-form-item label="链路追踪">
+          <el-input
+            v-model="traceId"
+            size="mini"
+            placeholder="请输入链路id"
+            clearable
+          />
+        </el-form-item>
+
+        <el-form-item label="SQL日志" prop="filterSql">
+          <el-switch
+            v-model="filterSql"
+            active-color="#409EFF"
+            inactive-color="#F56C6C"
+            active-value="1"
+            inactive-valu="0"
+          />
+        </el-form-item>
+        <el-form-item label="HTTP日志" prop="isRequest">
+          <el-switch
+            v-model="isRequest"
+            active-color="#409EFF"
+            inactive-color="#F56C6C"
+            active-value="1"
+            inactive-valu="0"
+          />
+        </el-form-item>
+
         <el-form-item v-show="!showOptions" label="时间范围">
           <el-date-picker
             v-model="timeRange"
@@ -47,24 +82,6 @@
             <span class="el-icon-sort" @click="changeShow" />
           </el-tooltip>
         </el-form-item>
-        <el-form-item label="SQL日志" prop="filterSql">
-          <el-switch
-            v-model="filterSql"
-            active-color="#409EFF"
-            inactive-color="#F56C6C"
-            active-value="1"
-            inactive-valu="0"
-          />
-        </el-form-item>
-        <el-form-item label="HTTP日志" prop="isRequest">
-          <el-switch
-            v-model="isRequest"
-            active-color="#409EFF"
-            inactive-color="#F56C6C"
-            active-value="1"
-            inactive-valu="0"
-          />
-        </el-form-item>
         <el-form-item label="显示条数">
           <el-input-number
             v-model="size"
@@ -117,8 +134,14 @@
         <div style="width: 100%">
           <div v-for="(log, index) in logs" :key="index">
             <div>
-
-              <span style="margin: 5px;">{{log.system}}---{{log.message}}</span>
+              <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>
             </div>
 
           </div>
@@ -136,6 +159,7 @@ let queryParam = {
   logLevel: null,
   startTime: null,
   endTime: null,
+  traceId: null,
   message: null,
   filterSql: true,
   isRequest: true,
@@ -146,10 +170,11 @@ export default {
   name: 'ES',
   data() {
     return {
-      labelAndValue: [], // 搜索的值
       labelsOptions: [], // 所有标签和对应所有值数据
+      logLevelValue: '',
       timeRange: [],
       message: '',
+      traceId: '',
       size: 20,
       logData: [],
       filterSql: '1',
@@ -222,20 +247,27 @@ export default {
   methods: {
     initLabelsValues() {
       logOperation.labelsValues().then(res => {
+
         this.labelsOptions = res
       })
     },
     queryData() {
       // 清空查询数据
       this.clearParam()
-      queryParam.logLabel = this.labelAndValue[0]
+      queryParam.logLevel = this.logLevelValue
       const time = new Date()
       if (this.timeZoneValue !== '') {
-        queryParam.endTime = ((time.getTime() - this.timeZoneValue) * 1000000).toString()
+        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]
       }
       queryParam.message = this.message.replace(/^\s*|\s*$/g, '')
       queryParam.filterSql = this.filterSql === '1'
       queryParam.isRequest = this.filterSql === '1'
+      queryParam.traceId = this.traceId
       queryParam.size = this.size
       queryParam.page = this.page
 
@@ -247,14 +279,17 @@ export default {
           this.logs.push(res.records[j])
         }
       })
+    },
+    changetype() {
+
     },
     clearParam() {
       queryParam = {
-        logLabel: null,
-        logLabelValue: null,
+        logLevel: null,
         startTime: null,
         endTime: null,
         message: null,
+        traceId: null,
         isRequest: true,
         filterSql: true,
         size: 20