日志模式

根据业务衍生的日志模式，分为普通日志模式和自定义日志模式，如下：

简单日志模式（mode: "log"）

默认情况下，首字母大写的单词会显示为红色

点击查看代码

<template>
  <Codemirror v-model:value="code" :options="cmOptions" border :height="400" />
</template>

<script>
  import { ref, defineComponent } from "vue"
  import Codemirror, { createLinkMark, createLogMark, createTitle } from "codemirror-editor-vue3"

  export default defineComponent({
    components: { Codemirror },
    setup() {
      const code = ref(`完整日志下载地址：${createLinkMark({
        href: "/logDownload",
        download: "",
        target: "_blank"
      })}
${createTitle("可以标记每一行日志的输出类型")}
${createLogMark("2021-08-26 15:07:09: job is success", "info")}
${createLogMark("2021-08-26 15:07:09: job is success", "warning")}
${createLogMark("2021-08-26 15:07:09: job is error", "error")}

====================引擎日志====================

DataStreamMain start
java.lang.NullPointerException
at
at java.util.Properties.load0(Properties.java:353)
at java.util.Properties.load(Properties.java:341)
at com.zhiweicloud.dataprocess.util.common.PropertiesUtil.getStringByKey(PropertiesUtil.
at com.zhiweicloud.dataprocess.engine.FlinkEngine.readFlinkEngineConfig(FlinkEngine.
at com.zhiweicloud.dataprocess.engine.FlinkEngine.buildFlinkStream(FlinkEngine.
at com.zhiweicloud.dataprocess.engine.FlinkEngine.startFlinkEngine(FlinkEngine.
at com.zhiweicloud.dataprocess.DataStreamMain.main(DataStreamMain.
 `)
      const cmOptions = {
        mode: "log",
        theme: "default"
      }
      return {
        code,
        cmOptions
      }
    }
  })
</script>

自定义日志模式（mode: "fclog"）

点击查看代码

<template>
  <Codemirror v-model:value="code" :options="cmOptions" border :height="400" />
  <a href=""></a>
</template>

<script>
  import { ref, defineComponent } from "vue"
  import Codemirror, {
    createLinkMark,
    createLogMark,
    createLog,
    createTitle
  } from "codemirror-editor-vue3"

  export default defineComponent({
    components: { Codemirror },
    setup() {
      const code = ref(`完整日志下载地址：${createLinkMark({
        href: "/logDownload",
        download: "",
        target: "_blank"
      })}

${createTitle("带有时间节点和输出类型的日志")}
${createLog("info content", "info")}
${createLog("warning content", "warning")}
${createLog("error content", "error")}
`)
      const cmOptions = {
        mode: "fclog",
        theme: "default"
      }
      return {
        code,
        cmOptions
      }
    }
  })
</script>

日志模式方法说明

名称	说明	参数	案例
createLinkMark	创建一个可点击的连接（a 标签），如下载完整日志	支持所有 a 标签属性，如：{ href: "/target-link", download: "", target: "_blank" }
createLogMark	标记日志的输出类型	(text: string, type: 'info' | 'warning' | 'error') => void
getLogMark	获取当前标记的文本，返回节点数组	(value: string) => [{start: number, end: number ,node: HTMLElement}]	-
createTitle	创建标题	(value: string, symbolLength?: number = 15, symbol?:string = "=") => string
createLog	仅在 fclog 模式下使用，创建带有时间以及类型的日志文本	(text: string, type: 'info' | 'warning' | 'error') => void