diff --git a/nladmin-system/pom.xml b/nladmin-system/pom.xml
index 78d2e5638..3ef99f3fb 100644
--- a/nladmin-system/pom.xml
+++ b/nladmin-system/pom.xml
@@ -127,6 +127,19 @@
             <artifactId>oshi-core</artifactId>
             <version>5.0.1</version>
         </dependency>
+
+        <!--loki-->
+        <!-- https://loki4j.github.io/loki-logback-appender/#quick-start -->
+        <dependency>
+            <groupId>com.github.loki4j</groupId>
+            <artifactId>loki-logback-appender-jdk8</artifactId>
+            <version>1.3.2</version>
+        </dependency>
+        <dependency>
+            <groupId>org.apache.httpcomponents</groupId>
+            <artifactId>httpclient</artifactId>
+            <version>4.5.13</version>
+        </dependency>
     </dependencies>
 
     <distributionManagement>
diff --git a/nladmin-system/src/main/java/org/nl/modules/common/annotation/RateLimiter.java b/nladmin-system/src/main/java/org/nl/modules/common/annotation/RateLimiter.java
new file mode 100644
index 000000000..98cba38e9
--- /dev/null
+++ b/nladmin-system/src/main/java/org/nl/modules/common/annotation/RateLimiter.java
@@ -0,0 +1,39 @@
+package org.nl.modules.common.annotation;
+
+import org.springframework.core.annotation.AliasFor;
+import org.springframework.core.annotation.AnnotationUtils;
+
+import java.lang.annotation.*;
+import java.util.concurrent.TimeUnit;
+
+/**
+ * @Author: lyd
+ * @Description: 限流注解，添加了 {@link AliasFor} 必须通过 {@link AnnotationUtils} 获取，才会生效
+ * @Date: 2022-08-15
+ */
+@Target(ElementType.METHOD)
+@Retention(RetentionPolicy.RUNTIME)
+@Documented
+public @interface RateLimiter {
+    int NOT_LIMITED = 0;
+
+    /**
+     * qps
+     */
+    @AliasFor("qps") double value() default NOT_LIMITED;
+
+    /**
+     * qps
+     */
+    @AliasFor("value") double qps() default NOT_LIMITED;
+
+    /**
+     * 超时时长
+     */
+    int timeout() default 0;
+
+    /**
+     * 超时时间单位
+     */
+    TimeUnit timeUnit() default TimeUnit.MILLISECONDS;
+}
diff --git a/nladmin-system/src/main/java/org/nl/modules/loki/rest/LokiController.java b/nladmin-system/src/main/java/org/nl/modules/loki/rest/LokiController.java
new file mode 100644
index 000000000..69cd1d0fc
--- /dev/null
+++ b/nladmin-system/src/main/java/org/nl/modules/loki/rest/LokiController.java
@@ -0,0 +1,46 @@
+package org.nl.modules.loki.rest;
+
+import com.alibaba.fastjson.JSONObject;
+import io.swagger.annotations.Api;
+import io.swagger.annotations.ApiOperation;
+import lombok.RequiredArgsConstructor;
+import lombok.extern.slf4j.Slf4j;
+import org.nl.modules.common.annotation.RateLimiter;
+import org.nl.modules.loki.service.LokiService;
+import org.springframework.http.HttpStatus;
+import org.springframework.http.ResponseEntity;
+import org.springframework.web.bind.annotation.*;
+
+/**
+ * @Author: lyd
+ * @Description: 日志监控
+ * @Date: 2022-08-15
+ */
+@RestController
+@RequiredArgsConstructor
+@Api(tags = "日志监控")
+@RequestMapping("/api/loki")
+@Slf4j
+public class LokiController {
+
+    private final LokiService lokiService;
+
+    @GetMapping("/labels")
+    @ApiOperation("获取标签")
+    public ResponseEntity<Object> labels() {
+        return new ResponseEntity<>(lokiService.getLabels(), HttpStatus.OK);
+    }
+
+    @PostMapping("/values")
+    @ApiOperation("根据标签获取值")
+    public ResponseEntity<Object> getAllValues(@RequestBody String label) {
+        return new ResponseEntity<>(lokiService.getValuesByLabel(label), HttpStatus.OK);
+    }
+
+    @PostMapping("/logs")
+    @ApiOperation("获取日志")
+    @RateLimiter(value = 1, timeout = 300) // 限流
+    public ResponseEntity<Object> getLogData(@RequestBody JSONObject json) {
+        return new ResponseEntity<>(lokiService.getLogData(json), HttpStatus.OK);
+    }
+}
diff --git a/nladmin-system/src/main/java/org/nl/modules/loki/service/LokiService.java b/nladmin-system/src/main/java/org/nl/modules/loki/service/LokiService.java
new file mode 100644
index 000000000..dedd921eb
--- /dev/null
+++ b/nladmin-system/src/main/java/org/nl/modules/loki/service/LokiService.java
@@ -0,0 +1,30 @@
+package org.nl.modules.loki.service;
+
+import com.alibaba.fastjson.JSONObject;
+
+/**
+ * @Author: lyd
+ * @Description: 服务类
+ * @Date: 2022-08-15
+ */
+public interface LokiService {
+    /**
+     * 获取日志的所有标签
+     * @return
+     */
+    JSONObject getLabels();
+
+    /**
+     * 根据label获取值
+     * @param label
+     * @return
+     */
+    JSONObject getValuesByLabel(String label);
+
+    /**
+     * 获取日志信息
+     * @param json
+     * @return
+     */
+    JSONObject getLogData(JSONObject json);
+}
diff --git a/nladmin-system/src/main/java/org/nl/modules/loki/service/impl/LokiServiceImpl.java b/nladmin-system/src/main/java/org/nl/modules/loki/service/impl/LokiServiceImpl.java
new file mode 100644
index 000000000..237fc6665
--- /dev/null
+++ b/nladmin-system/src/main/java/org/nl/modules/loki/service/impl/LokiServiceImpl.java
@@ -0,0 +1,81 @@
+package org.nl.modules.loki.service.impl;
+
+import cn.hutool.core.util.CharsetUtil;
+import cn.hutool.http.HttpUtil;
+import com.alibaba.fastjson.JSONObject;
+import lombok.RequiredArgsConstructor;
+import org.nl.modules.loki.service.LokiService;
+import org.springframework.beans.factory.annotation.Value;
+import org.springframework.stereotype.Service;
+
+/**
+ * @Author: lyd
+ * @Description: 实现类
+ * @Date: 2022-08-15
+ */
+@Service
+@RequiredArgsConstructor
+public class LokiServiceImpl implements LokiService {
+
+    @Value("${loki.url}")
+    private String lokiUrl;
+
+    @Value("${loki.systemName}")
+    private String systemName;
+
+    @Override
+    public JSONObject getLabels() {
+        String result = HttpUtil.get(lokiUrl + "/labels", CharsetUtil.CHARSET_UTF_8);
+        JSONObject parse = (JSONObject) JSONObject.parse(result);
+        return parse;
+    }
+
+    @Override
+    public JSONObject getValuesByLabel(String label) {
+        String result = HttpUtil.get(lokiUrl + "/label/" + label + "/values", CharsetUtil.CHARSET_UTF_8);
+        JSONObject parse = (JSONObject) JSONObject.parse(result);
+        return parse;
+    }
+
+    @Override
+    public JSONObject getLogData(JSONObject json) {
+        String logLabel = "";
+        String logLabelValue = "";
+        Long start = 0L;
+        Long end = 0L;
+        String text = "";
+        String limit = "100";
+        String direction = "backward";
+        if (json.get("logLabel") != null) logLabel = json.getString("logLabel");
+        if (json.get("logLabelValue") != null) logLabelValue = json.getString("logLabelValue");
+        if (json.get("text") != null) text = json.getString("text");
+        if (json.get("start") != null) start = json.getLong("start");
+        if (json.get("end") != null) end = json.getLong("end");
+        if (json.get("limits") != null) limit = json.getString("limits");
+        if (json.get("direction") != null) direction = json.getString("direction");
+        /**
+         * 组织参数
+         * 纳秒数
+         * 1660037391880000000
+         * 1641453208415000000
+         * http://localhost:3100/loki/api/v1/query_range?query={host="localhost"} |= ``&limit=1500&start=1641453208415000000&end=1660027623419419002
+         */
+        JSONObject parse = null;
+        String query = lokiUrl + "/query_range?query={system=\"" + systemName + "\", " + logLabel + "=\"" + logLabelValue + "\"} |= `" + text + "`";
+        String result = "";
+        if (start==0L) {
+            result = HttpUtil.get(query + "&limit=" + limit + "&direction=" + direction, CharsetUtil.CHARSET_UTF_8);
+        } else {
+            result = HttpUtil.get(query + "&limit=" + limit + "&start=" + start + "&end=" + end + "&direction=" + direction, CharsetUtil.CHARSET_UTF_8);
+        }
+        try {
+            parse = (JSONObject) JSONObject.parse(result);
+        } catch (Exception e) {
+//            reslut的值可能为:too many outstanding requests,无法转化成Json
+            System.out.println("reslut:" + result);
+//            e.printStackTrace();
+        }
+        return parse;
+    }
+
+}
diff --git a/nladmin-system/src/main/java/org/nl/modules/system/domain/User.java b/nladmin-system/src/main/java/org/nl/modules/system/domain/User.java
index 54d709066..22179b1e3 100644
--- a/nladmin-system/src/main/java/org/nl/modules/system/domain/User.java
+++ b/nladmin-system/src/main/java/org/nl/modules/system/domain/User.java
@@ -70,11 +70,9 @@ public class User extends BaseEntity implements Serializable {
     @ApiModelProperty(value = "用户昵称")
     private String nickName;
 
-    @Email
     @ApiModelProperty(value = "邮箱")
     private String email;
 
-    @NotBlank
     @ApiModelProperty(value = "电话号码")
     private String phone;
 
diff --git a/nladmin-system/src/main/java/org/nl/modules/system/service/impl/UserServiceImpl.java b/nladmin-system/src/main/java/org/nl/modules/system/service/impl/UserServiceImpl.java
index 90d5c56f0..708d108be 100644
--- a/nladmin-system/src/main/java/org/nl/modules/system/service/impl/UserServiceImpl.java
+++ b/nladmin-system/src/main/java/org/nl/modules/system/service/impl/UserServiceImpl.java
@@ -21,11 +21,9 @@ import org.nl.modules.common.config.FileProperties;
 import org.nl.modules.common.exception.EntityExistException;
 import org.nl.modules.common.exception.EntityNotFoundException;
 import org.nl.modules.common.utils.*;
-import org.nl.modules.security.satoken.utils.FlushSessionUtil;
 import org.nl.modules.security.service.OnlineUserService;
 import org.nl.modules.system.domain.User;
 import org.nl.modules.system.repository.UserRepository;
-import org.nl.modules.system.service.RoleService;
 import org.nl.modules.system.service.UserService;
 import org.nl.modules.system.service.dto.RoleSmallDto;
 import org.nl.modules.system.service.dto.UserDto;
@@ -60,8 +58,8 @@ public class UserServiceImpl implements UserService {
     private final FileProperties properties;
     private final RedisUtils redisUtils;
     private final OnlineUserService onlineUserService;
-    private final FlushSessionUtil flushSessionUtil;
-    private final RoleService roleService;
+//    private final FlushSessionUtil flushSessionUtil;
+//    private final RoleService roleService;
 
 
     @Override
diff --git a/nladmin-system/src/main/resources/config/application-dev.yml b/nladmin-system/src/main/resources/config/application-dev.yml
index f37c4f0b7..a3bbd8cde 100644
--- a/nladmin-system/src/main/resources/config/application-dev.yml
+++ b/nladmin-system/src/main/resources/config/application-dev.yml
@@ -150,4 +150,8 @@ sa-token:
   is-log: false
   jwt-secret-key: opsjajisdnnca0sdkksdfaaasdfwwq
   # token 前缀
-#  token-prefix: Bearer
\ No newline at end of file
+#  token-prefix: Bearer
+
+loki:
+  url: http://localhost:3100/loki/api/v1
+  systemName: acs
\ No newline at end of file
diff --git a/nladmin-system/src/main/resources/logback-spring.xml b/nladmin-system/src/main/resources/logback-spring.xml
index 01130dd52..183f0c8b5 100644
--- a/nladmin-system/src/main/resources/logback-spring.xml
+++ b/nladmin-system/src/main/resources/logback-spring.xml
@@ -14,6 +14,10 @@ https://juejin.cn/post/6844903775631572999
     <property name="log.pattern"
               value="%black(%contextName-) %red(%d{yyyy-MM-dd HH:mm:ss}) %green([%thread]) %highlight(%-5level) %boldMagenta(%logger{36}) - %gray(%msg%n)"/>
     <springProperty scope="context" name="logPath" source="logging.file.path" defaultValue="logs"/>
+    <springProperty scope="context" name="lokiUrl" source="loki.url"/>
+    <springProperty scope="context" name="systemName" source="loki.systemName"/>
+    <property name="LOKI_URL" value="${lokiUrl}"/>
+    <property name="SYSTEM_NAME" value="${systemName}"/>
     <property name="LOG_HOME" value="${logPath}"/>
     <!--引入默认的一些设置-->
     <!--<include resource="log/XrToMes.xml"/>
@@ -54,10 +58,28 @@ https://juejin.cn/post/6844903775631572999
         <appender-ref ref="FILE"/>
     </appender>
 
+    <!--添加loki-->
+    <appender name="lokiAppender" class="com.github.loki4j.logback.Loki4jAppender">
+        <batchTimeoutMs>1000</batchTimeoutMs>
+        <http class="com.github.loki4j.logback.ApacheHttpSender">
+            <url>${LOKI_URL}/push</url>
+        </http>
+        <format>
+            <label>
+                <pattern>system=${SYSTEM_NAME},level=%level,logType=%X{log_file_type:-logType},device=%X{device_code_log:-device}</pattern>
+            </label>
+            <message>
+                <pattern>${log.pattern}</pattern>
+            </message>
+            <sortByTime>true</sortByTime>
+        </format>
+    </appender>
+
     <!--开发环境:打印控制台-->
     <springProfile name="dev">
         <root level="info">
             <appender-ref ref="CONSOLE"/>
+            <appender-ref ref="lokiAppender" />
         </root>
 
         <logger name="jdbc.audit" level="ERROR" additivity="false">
@@ -82,6 +104,7 @@ https://juejin.cn/post/6844903775631572999
     <springProfile name="prod">
         <root level="info">
             <appender-ref ref="asyncFileAppender"/>
+            <appender-ref ref="lokiAppender" />
         </root>
         <logger name="jdbc.audit" level="ERROR" additivity="false">
             <appender-ref ref="CONSOLE"/>
diff --git a/nladmin-ui/package.json b/nladmin-ui/package.json
index bda4ee1b8..4fcddd2fc 100644
--- a/nladmin-ui/package.json
+++ b/nladmin-ui/package.json
@@ -37,6 +37,7 @@
     "@logicflow/extension": "^1.1.22",
     "@riophae/vue-treeselect": "0.4.0",
     "af-table-column": "^1.0.3",
+    "ansi_up": "^5.1.0",
     "axios": "0.18.1",
     "clipboard": "^2.0.4",
     "codemirror": "^5.49.2",
diff --git a/nladmin-ui/src/views/loki/api/loki.js b/nladmin-ui/src/views/loki/api/loki.js
new file mode 100644
index 000000000..4adb6b525
--- /dev/null
+++ b/nladmin-ui/src/views/loki/api/loki.js
@@ -0,0 +1,26 @@
+import request from '@/utils/request'
+
+export function getAllLabels() {
+  return request({
+    url: 'api/loki/labels',
+    method: 'get'
+  })
+}
+
+export function getAllValues(label) {
+  return request({
+    url: 'api/loki/values',
+    method: 'post',
+    data: label
+  })
+}
+
+export function getLogData(param) {
+  return request({
+    url: 'api/loki/logs',
+    method: 'post',
+    data: param
+  })
+}
+
+export default { getAllLabels, getAllValues, getLogData }
diff --git a/nladmin-ui/src/views/loki/view/index.vue b/nladmin-ui/src/views/loki/view/index.vue
new file mode 100644
index 000000000..c7966c5fa
--- /dev/null
+++ b/nladmin-ui/src/views/loki/view/index.vue
@@ -0,0 +1,470 @@
+<template>
+  <div class="app-container">
+    <div class="head-container">
+      <!--工具栏-->
+      <el-form :inline="true" class="demo-form-inline">
+        <el-form-item label="标签">
+          <el-select v-model="logLabel" filterable placeholder="请选择标签" size="mini" @change="getValues">
+            <el-option
+              v-for="item in labelOptions"
+              :key="item.index"
+              :label="item"
+              :value="item"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="=">
+          <el-select v-model="logLabelValue" filterable placeholder="请选择标签" size="mini" @change="queryData">
+            <el-option
+              v-for="item in labelValueOptions"
+              :key="item.index"
+              :label="item"
+              :value="item"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="方向">
+          <el-radio-group v-model="direction" size="mini" @change="queryData">
+            <el-radio label="backward">backward</el-radio>
+            <el-radio label="forward">forward</el-radio>
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item label="时间范围" style="margin-left: 10px" v-show="!showOptions">
+          <el-date-picker
+            @change="queryData"
+            @blur="queryData"
+            v-model="timeRange"
+            size="mini"
+            clearable
+            type="datetimerange"
+            range-separator="至"
+            start-placeholder="开始日期"
+            end-placeholder="结束日期"
+            align="right"
+          />
+        </el-form-item>
+        <el-form-item v-show="showOptions" label="时差" style="margin-left: 10px">
+          <el-select v-model="timeZoneValue" filterable placeholder="请选择标签" size="mini" @change="queryData">
+            <el-option
+              v-for="item in timeZoneOptions"
+              :key="item.index"
+              :label="item.label"
+              :value="item.value"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item>
+          <el-tooltip class="item" effect="dark" content="切换查询条件" placement="top">
+            <span class="el-icon-sort" @click="changeShow" />
+          </el-tooltip>
+        </el-form-item>
+      </el-form>
+      <el-form :inline="true" class="demo-form-inline">
+        <el-form-item label="关键字">
+          <el-input
+            v-model="text"
+            style="width: 300px"
+            size="mini"
+            placeholder="请输入内容"
+            clearable
+          />
+        </el-form-item>
+        <el-form-item label="条数" style="margin-left: 10px">
+          <el-input-number
+            v-model="limits"
+            size="mini"
+            controls-position="right"
+            :min="100"
+            :max="5000"
+            :step="100"
+          />
+        </el-form-item>
+        <el-form-item label="滚动步数" style="margin-left: 10px">
+          <el-input-number
+            v-model="scrollStep"
+            size="mini"
+            controls-position="right"
+            :min="10"
+            :max="2000"
+            :step="10"
+          />
+        </el-form-item>
+        <el-form-item>
+          <el-dropdown split-button type="primary" size="mini" @click="queryData">
+            查询{{ runStatu }}
+            <el-dropdown-menu slot="dropdown">
+              <el-dropdown-item v-for="(item, index) in runStatuOptions" :key="index" @click.native="startInterval(item)">{{ item.label }}</el-dropdown-item>
+            </el-dropdown-menu>
+          </el-dropdown>
+        </el-form-item>
+      </el-form>
+    </div>
+    <div style="margin: 3px; min-height: 80vh;">
+      <!--数据判空-->
+      <el-empty v-if="showEmpty" :description="emptyText" />
+      <!--数据加载-->
+      <el-card v-else shadow="hover" style="width: 100%" class="log-warpper">
+        <div style="width: 100%">
+          <div v-for="(log, index) in logs" :key="index" >
+            <div style="margin-bottom: 5px; font-size: 12px;" v-html="log[1]" />
+          </div>
+        </div>
+      </el-card>
+    </div>
+  </div>
+</template>
+
+<script>
+
+import logOperation from '@/views/loki/api/loki'
+import { default as AnsiUp } from 'ansi_up'
+
+let queryParam = {
+  logLabel: null,
+  logLabelValue: null,
+  start: null,
+  end: null,
+  text: null,
+  limits: 100,
+  direction: 'backward'
+}
+export default {
+  name: 'Loki',
+  data() {
+    return {
+      labelOptions: [], // 标签数据
+      labelValueOptions: [], // 标签值
+      logLabel: '',
+      logLabelValue: '',
+      timeRange: [],
+      text: '',
+      limits: 100,
+      direction: 'backward',
+      logData: [],
+      logs: [], // 所有日志
+      showEmpty: true,
+      emptyText: '请选择标签',
+      displayDirection: [{
+        value: 'backward',
+        label: '新的在前'
+      }, {
+        value: 'forward',
+        label: '旧的在前'
+      }],
+      scrollStep: 10,
+      runStatu: 'off',
+      runStatuOptions: [{
+        label: 'off',
+        value: 0
+      }, {
+        label: '5s',
+        value: 5000
+      }, {
+        label: '10s',
+        value: 10000
+      }, {
+        label: '1m',
+        value: 60000
+      }, {
+        label: '5m',
+        value: 300000
+      }, {
+        label: '30m',
+        value: 1800000
+      }],
+      timeZoneOptions: [{
+        label: '最近5分钟',
+        value: 300 * 1000
+      }, {
+        label: '最近15分钟',
+        value: 900 * 1000
+      }, {
+        label: '最近30分钟',
+        value: 1800 * 1000
+      }, {
+        label: '最近1小时',
+        value: 3600 * 1000
+      }, {
+        label: '最近3小时',
+        value: 3600 * 1000 * 3
+      }, {
+        label: '最近6小时',
+        value: 3600 * 1000 * 6
+      }, {
+        label: '最近12小时',
+        value: 3600 * 1000 * 12
+      }, {
+        label: '最近24小时',
+        value: 3600 * 1000 * 24
+      }, {
+        label: '最近2天',
+        value: 3600 * 1000 * 24 * 2
+      }, {
+        label: '最近7天',
+        value: 3600 * 1000 * 24 * 7
+      }, {
+        label: '最近15天',
+        value: 3600 * 1000 * 24 * 15
+      }],
+      timeZoneValue: '',
+      showOptions: true
+    }
+  },
+  mounted() {
+    window.addEventListener('scroll', this.handleScroll)
+  },
+  created() {
+    this.initLabelOptions()
+  },
+  beforeDestroy() {
+    // js提供的clearInterval方法用来清除定时器
+    console.log('定时任务销毁')
+    clearInterval(this.timer)
+    window.removeEventListener('scroll', this.handleScroll)
+  },
+  methods: {
+    initLabelOptions() { // 获取lables
+      logOperation.getAllLabels().then(res => {
+        this.labelOptions = res.data
+      })
+    },
+    getValues() {
+      this.logLabelValue = null
+      logOperation.getAllValues(this.logLabel).then(res => {
+        this.labelValueOptions = res.data
+      })
+    },
+    queryData() {
+      // 清空查询数据
+      this.clearParam()
+      if (this.logLabel !== '') { // 标签
+        queryParam.logLabel = this.logLabel
+      }
+      if (this.logLabelValue !== '') { // 标签值
+        queryParam.logLabelValue = this.logLabelValue
+      }
+      if (queryParam.logLabelValue === null) { // 判空
+        this.$message({
+          showClose: true,
+          message: '请选择标签',
+          type: 'warning'
+        })
+        this.showEmpty = true
+        this.emptyText = '请选择标签'
+        return
+      }
+      if (this.timeRange.length !== 0) { // 如果是输入时间范围
+        queryParam.start = (new Date(this.timeRange[0]).getTime() * 1000000).toString()
+        queryParam.end = (new Date(this.timeRange[1]).getTime() * 1000000).toString()
+        console.log(queryParam.start)
+        console.log('-----------------------------')
+        console.log(queryParam.end)
+      }
+      if (this.timeZoneValue) {
+        // console.log('时差：', this.timeZoneValue)
+        // console.log('start时间：', new Date().getTime() - this.timeZoneValue)
+        // console.log('end时间：', new Date().getTime())
+        const time = new Date()
+        queryParam.start = ((time.getTime() - this.timeZoneValue) * 1000000).toString()
+        queryParam.end = (time.getTime() * 1000000).toString()
+      }
+      if (this.text) {
+        queryParam.text = this.text.replace(/^\s*|\s*$/g, '')
+      }
+      if (this.limits) {
+        queryParam.limits = this.limits
+      }
+      queryParam.direction = this.direction
+      console.log('最后参数：', queryParam)
+      var ansi_up = new AnsiUp()
+      logOperation.getLogData(queryParam).then(res => {
+        console.log('结果', res)
+        this.showEmpty = false
+        if (res.data.result.length === 1) {
+          this.logs = res.data.result[0].values
+          for (const i in res.data.result[0].values) {
+            this.logs[i][1] = ansi_up.ansi_to_html(res.data.result[0].values[i][1])
+          }
+        } else if (res.data.result.length > 1) {
+          // 清空
+          this.logs = []
+          for (const j in res.data.result) { // 用push的方式将所有日志数组添加进去
+            for (const values_index in res.data.result[j].values) {
+              this.logs.push(res.data.result[j].values[values_index])
+            }
+          }
+          for (const k in this.logs) {
+            this.logs[k][1] = ansi_up.ansi_to_html(this.logs[k][1])
+          }
+          if (this.direction === 'backward') { // 由于使用公共标签会导致时间顺序错乱，因此对二维数组进行排序
+            this.logs.sort((a, b) => b[0] - a[0])
+          } else {
+            this.logs.sort((a, b) => a[0] - b[0])
+          }
+        } else {
+          this.showEmpty = true
+          this.emptyText = '暂无日志信息，请选择时间段试试'
+        }
+      })
+    },
+    clearParam() {
+      queryParam = {
+        logLabel: null,
+        logLabelValue: null,
+        start: null,
+        end: null,
+        text: null,
+        limits: 100,
+        direction: 'backward'
+      }
+    },
+    handleScroll() { // 滚动事件
+      const scrollTop = document.documentElement.scrollTop// 滚动高度
+      const clientHeight = document.documentElement.clientHeight// 可视高度
+      const scrollHeight = document.documentElement.scrollHeight// 内容高度
+      const bottomest = Math.ceil(scrollTop + clientHeight)
+      if (bottomest >= scrollHeight) {
+        console.log(1)
+        // 加载新数据
+        queryParam.limits = this.scrollStep
+        queryParam.direction = this.direction
+        // 获取时间差
+        let zone = queryParam.end - queryParam.start
+        if (this.timeRange.length) { // 如果是输入时间范围
+          zone = ((new Date(this.timeRange[1]).getTime() - new Date(this.timeRange[0]).getTime()) * 1000000).toString()
+        }
+        if (this.timeZoneValue) {
+          zone = this.timeZoneValue * 1000000
+        }
+        if (zone === 0) {
+          zone = 3600 * 1000 * 6
+        }
+        console.log('时间差:', zone)
+        if (this.direction === 'backward') { // 设置时间区间
+          queryParam.start = (this.logs[this.logs.length - 1][0] - zone).toString()
+          queryParam.end = this.logs[this.logs.length - 1][0]
+        } else {
+          queryParam.start = this.logs[this.logs.length - 1][0]
+          queryParam.end = (parseFloat(this.logs[this.logs.length - 1][0]) + parseFloat(zone.toString())).toString()
+        }
+        console.log('滚动的参数：', queryParam)
+        var ansi_up = new AnsiUp()
+        logOperation.getLogData(queryParam).then(res => {
+          this.showEmpty = false
+          if (res.data.result.length === 1) {
+            const log = res.data.result[0].values
+            for (const i in res.data.result[0].values) {
+              log[i][1] = ansi_up.ansi_to_html(res.data.result[0].values[i][1])
+              this.logs.push(log[i])
+            }
+          } else if (res.data.result.length > 1) {
+            const tempArray = [] // 数据需要处理，由于是追加数组，所以需要用额外变量来存放
+            // 刷新就是添加，不清空原数组
+            for (const j in res.data.result) { // 用push的方式将所有日志数组添加进去
+              for (const values_index in res.data.result[j].values) {
+                tempArray.push(res.data.result[j].values[values_index])
+              }
+            }
+            if (this.direction === 'backward') { // 由于使用公共标签会导致时间顺序错乱，因此对二维数组进行排序
+              tempArray.sort((a, b) => b[0] - a[0])
+            } else {
+              tempArray.sort((a, b) => a[0] - b[0])
+            }
+            for (const k in tempArray) {
+              tempArray[k][1] = ansi_up.ansi_to_html(tempArray[k][1]) // 数据转换
+              this.logs.push(tempArray[k]) // 追加数据
+            }
+          } else {
+            this.$notify({
+              title: '警告',
+              duration: 1000,
+              message: '暂无以往日志数据！',
+              type: 'warning'
+            })
+          }
+        })
+      }
+    },
+    startInterval(item) {
+      this.runStatu = item.label
+      console.log(item.value)
+      if (item.value !== 0) {
+        this.timer = setInterval(() => { // 定时刷新
+          this.intervalLogs()
+        }, item.value)
+      } else {
+        console.log('销毁了')
+        clearInterval(this.timer)
+      }
+    },
+    intervalLogs() { // 定时器的方法
+      // 组织参数
+      // 设置开始时间和结束时间
+      // 开始为现在时间
+      const start = new Date()
+      const end = new Date()
+      // 时差判断
+      let zone = queryParam.end - queryParam.start
+      if (this.timeRange.length) { // 如果是输入时间范围
+        zone = ((new Date(this.timeRange[1]).getTime() - new Date(this.timeRange[0]).getTime()) * 1000000).toString()
+      }
+      if (this.timeZoneValue) {
+        zone = this.timeZoneValue * 1000000
+      }
+      if (zone === 0) { // 防止空指针
+        start.setTime(start.getTime() - 3600 * 1000 * 6)
+        queryParam.start = (start.getTime() * 1000000).toString()
+      } else {
+        queryParam.start = (start.getTime() * 1000000 - zone).toString()
+      }
+      queryParam.end = (end.getTime() * 1000000).toString()
+      queryParam.limits = this.limits
+      console.log('定时器最后参数：', queryParam)
+      var ansi_up = new AnsiUp() // 后端日志格式转化
+      logOperation.getLogData(queryParam).then(res => {
+        console.log('res', res)
+        this.showEmpty = false
+        debugger
+        if (res.data.result.length === 1) {
+          this.logs = res.data.result[0].values
+          for (const i in res.data.result[0].values) { // 格式转换
+            this.logs[i][1] = ansi_up.ansi_to_html(res.data.result[0].values[i][1])
+          }
+        } else if (res.data.result.length > 1) {
+          // 清空
+          this.logs = []
+          for (const j in res.data.result) { // 用push的方式将所有日志数组添加进去
+            for (const values_index in res.data.result[j].values) {
+              this.logs.push(res.data.result[j].values[values_index])
+            }
+          }
+          for (const k in this.logs) {
+            this.logs[k][1] = ansi_up.ansi_to_html(this.logs[k][1])
+          }
+          if (this.direction === 'backward') { // 由于使用公共标签会导致时间顺序错乱，因此对二维数组进行排序
+            this.logs.sort((a, b) => b[0] - a[0])
+          } else {
+            this.logs.sort((a, b) => a[0] - b[0])
+          }
+        } else {
+          this.showEmpty = true
+          this.emptyText = '暂无日志信息，请选择时间段试试'
+        }
+      })
+    },
+    changeShow() {
+      // 清空数据
+      this.timeZoneValue = ''
+      this.timeRange = []
+      this.showOptions = !this.showOptions
+    }
+  }
+}
+</script>
+
+<style scoped>
+.log-warpper {
+  word-break: break-all;
+  word-wrap: break-word
+}
+</style>