loki:
  url: http://localhost:3100/loki/api/v1

<springProperty scope="context" name="lokiUrl" source="loki.url"/>
<property name="LOKI_URL" value="${lokiUrl}"/>
<!--添加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}</pattern>
        </label>
        <message>
            <pattern>${log.pattern}</pattern>
        </message>
        <sortByTime>true</sortByTime>
    </format>
</appender>

/**
 * @author: lyd
 * @description: 自定義日志注解,用作LOKI日志分類
 * @Date: 2022/10/10
 */
@Retention(RetentionPolicy.RUNTIME)
@Target({ ElementType.METHOD})
@Documented
public @interface LokiLog {
    LokiLogType type() default LokiLogType.DEFAULT;
}

/**
 * @author: lyd
 * @description: 枚舉便簽值 - 類型自己定義
 * @Date: 2022/10/11
 */
public enum LokiLogType {
    DEFAULT("默認(rèn)"),
    A("A"),
    B("B"),
    C("C");
    private String desc;
    LokiLogType(String desc) {
     this.desc=desc;
    }
    public String getDesc() {
        return desc;
    }
}

/**
 * @author: lyd
 * @description: 自定義日志切面:https://cloud.tencent.com/developer/article/1655923
 * @Date: 2022/10/10
 */
@Aspect
@Slf4j
@Component
public class LokiLogAspect {
    /**
     * 切到所有OperatorLog注解修飾的方法
     */
    @Pointcut("@annotation(org.nl.wms.log.LokiLog)")
    public void operatorLog() {
        // 空方法
    }
    /**
     * 利用@Around環(huán)繞增強(qiáng)
     *
     * @return
     */
    @Around("operatorLog()")
    public synchronized Object around(ProceedingJoinPoint pjp) throws Throwable {
//        ServletRequestAttributes attributes = (ServletRequestAttributes) RequestContextHolder.getRequestAttributes();
//        HttpServletRequest request = attributes.getRequest();
//        HttpServletResponse response = attributes.getResponse();
        Signature signature = pjp.getSignature();
        MethodSignature methodSignature = (MethodSignature) signature;
        Method method = methodSignature.getMethod();
        LokiLog lokiLog = method.getAnnotation(LokiLog.class);
        // 獲取描述信息
        LokiLogType logType = lokiLog.type();
        MDC.put("log_file_type", logType.getDesc());
        log.info("輸入?yún)?shù)：" + JSONObject.toJSONString(pjp.getArgs()));
        Object proceed = pjp.proceed();
        log.info("返回參數(shù)：" + JSONObject.toJSONString(proceed));
        MDC.remove("log_file_type");
        return proceed;
    }
}

@LokiLog(type = LokiLogType.A)

/**
 * 獲取labels和values樹
 *
 * @return
 */
@Override
public JSONArray getLabelsValues() {
    JSONArray result = new JSONArray();
    // 獲取所有標(biāo)簽
    String labelString = HttpUtil.get(lokiUrl + "/labels", CharsetUtil.CHARSET_UTF_8);
    JSONObject parse = (JSONObject) JSONObject.parse(labelString);
    JSONArray labels = parse.getJSONArray("data");
    for (int i=0; i<labels.size(); i++) {
        // 獲取標(biāo)簽下的所有值
        String valueString = HttpUtil.get(lokiUrl + "/label/" + labels.getString(i) + "/values", CharsetUtil.CHARSET_UTF_8);
        JSONObject parse2 = (JSONObject) JSONObject.parse(valueString);
        JSONArray values = parse2.getJSONArray("data");
        JSONArray children = new JSONArray();
        // 組成樹形狀態(tài) 兩級(jí)
        for (int j=0; j<values.size(); j++) {
            JSONObject leaf = new JSONObject();
            leaf.put("label", values.getString(j));
            leaf.put("value", values.getString(j));
            children.add(leaf);
        }
        JSONObject node = new JSONObject();
        node.put("label", labels.getString(i));
        node.put("value", labels.getString(i));
        node.put("children", children);
        result.add(node);
    }
    return result;
}

<el-form-item label="日志標(biāo)簽">
  <el-cascader
    v-model="labelAndValue"
    :options="labelsOptions"
    placeholder="請(qǐng)選擇標(biāo)簽"
    @change="queryData"
  />
</el-form-item>

"/query_range?query={system=\"" + systemName + "\", " + logLabel + "=\"" + logLabelValue + "\"} |= `" + text + "`"

@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");
        /**
         * 組織參數(shù)
         * 納秒數(shù)
         * 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,無法轉(zhuǎn)化成Json
            System.out.println("reslut:" + result);
//            e.printStackTrace();
        }
        return parse;
    }

queryData() {
  console.log(this.labelAndValue)
  // 清空查詢數(shù)據(jù)
  this.clearParam()
  if (this.labelAndValue.length > 0) {
    queryParam.logLabel = this.labelAndValue[0]
    queryParam.logLabelValue = this.labelAndValue[1]
  }
  if (queryParam.logLabelValue === null) { // 判空
    this.$message({
      showClose: true,
      message: '請(qǐng)選擇標(biāo)簽',
      type: 'warning'
    })
    this.showEmpty = true
    this.emptyText = '請(qǐng)選擇標(biāo)簽'
    return
  }
  if (this.timeRange.length !== 0) { // 如果是輸入時(shí)間范圍
    queryParam.start = (new Date(this.timeRange[0]).getTime() * 1000000).toString()
    queryParam.end = (new Date(this.timeRange[1]).getTime() * 1000000).toString()
  }
  if (this.timeZoneValue) {
    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
  var ansi_up = new AnsiUp()
  logOperation.getLogData(queryParam).then(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的方式將所有日志數(shù)組添加進(jìn)去
        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') { // 由于使用公共標(biāo)簽會(huì)導(dǎo)致時(shí)間順序錯(cuò)亂，因此對(duì)二維數(shù)組進(jìn)行排序
        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 = '暫無日志信息，請(qǐng)選擇時(shí)間段試試'
    }
  })
},

<div style="margin: 3px; min-height: 80vh;">
  <!--數(shù)據(jù)判空-->
  <el-empty v-if="showEmpty" :description="emptyText" />
  <!--數(shù)據(jù)加載-->
  <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>

if (this.direction === 'backward') { // 設(shè)置時(shí)間區(qū)間
  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()
}

mounted() {
  window.addEventListener('scroll', this.handleScroll)
}
methods: {
    handleScroll() { // 滾動(dòng)事件
      const scrollTop = document.documentElement.scrollTop// 滾動(dòng)高度
      const clientHeight = document.documentElement.clientHeight// 可視高度
      const scrollHeight = document.documentElement.scrollHeight// 內(nèi)容高度
      const bottomest = Math.ceil(scrollTop + clientHeight)
      if (bottomest >= scrollHeight) {
        // 加載新數(shù)據(jù)
        queryParam.limits = this.scrollStep
        queryParam.direction = this.direction
        // 獲取時(shí)間差
        let zone = queryParam.end - queryParam.start
        if (this.timeRange.length) { // 如果是輸入時(shí)間范圍
          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
        }
        if (this.direction === 'backward') { // 設(shè)置時(shí)間區(qū)間
          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()
        }
        var ansi_up = new AnsiUp()
        logOperation.getLogData(queryParam).then(res => {
          console.log(res)
          this.showEmpty = false
          if (res.data.result.length === 1) {
            // 如果返回的日志是一樣的就不顯示
            if (res.data.result[0].values.length === 1 && ansi_up.ansi_to_html(res.data.result[0].values[0][1]) === this.logs[this.logs.length - 1][1]) {
              this.$notify({
                title: '警告',
                duration: 1000,
                message: '當(dāng)前時(shí)間段日志已最新！',
                type: 'warning'
              })
              return
            }
            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 = [] // 數(shù)據(jù)需要處理，由于是追加數(shù)組，所以需要用額外變量來存放
            // 刷新就是添加，不清空原數(shù)組
            for (const j in res.data.result) { // 用push的方式將所有日志數(shù)組添加進(jìn)去
              for (const values_index in res.data.result[j].values) {
                tempArray.push(res.data.result[j].values[values_index])
              }
            }
            if (this.direction === 'backward') { // 由于使用公共標(biāo)簽會(huì)導(dǎo)致時(shí)間順序錯(cuò)亂，因此對(duì)二維數(shù)組進(jìn)行排序
              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]) // 數(shù)據(jù)轉(zhuǎn)換
              this.logs.push(tempArray[k]) // 追加數(shù)據(jù)
            }
          } else {
            this.$notify({
              title: '警告',
              duration: 1000,
              message: '暫無以往日志數(shù)據(jù)！',
              type: 'warning'
            })
          }
        })
      }
    }
}

<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>

startInterval(item) {
  this.runStatu = item.label
  console.log(item.value)
  if (item.value !== 0) {
    this.timer = setInterval(() => { // 定時(shí)刷新
      this.intervalLogs()
    }, item.value)
  } else {
    console.log('銷毀了')
    clearInterval(this.timer)
  }
},
intervalLogs() { // 定時(shí)器的方法
  // 組織參數(shù)
  // 設(shè)置開始時(shí)間和結(jié)束時(shí)間
  // 開始為現(xiàn)在時(shí)間
  const start = new Date()
  const end = new Date()
  // 時(shí)差判斷
  let zone = queryParam.end - queryParam.start
  if (this.timeRange.length) { // 如果是輸入時(shí)間范圍
    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('定時(shí)器最后參數(shù)：', queryParam)
  var ansi_up = new AnsiUp() // 后端日志格式轉(zhuǎn)化
  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) { // 格式轉(zhuǎn)換
        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的方式將所有日志數(shù)組添加進(jìn)去
        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') { // 由于使用公共標(biāo)簽會(huì)導(dǎo)致時(shí)間順序錯(cuò)亂，因此對(duì)二維數(shù)組進(jìn)行排序
        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 = '暫無日志信息，請(qǐng)選擇時(shí)間段試試'
    }
  })
},