一个搜索上下的功能,用的不多

Posted 2022-05-21 mdge

<template>

<div>

<mainHeader title="日志" />

<div class="grid-content log-box">

<div class="header">

<el-row :gutter="24">

<el-col :span="8" style="padding-right:0px;">

<el-input

v-model="search"

placeholder="请输入内容"

class="input"

style="border-radius:0px;"

/>

</el-col>

<el-button icon="el-icon-search" style="border-radius:0px" @click="changhtml" />

<el-button icon="el-icon-caret-top" @click="previous" />

<el-button icon="el-icon-caret-bottom" @click="next" />

</el-row>

</div>

<div class="tab">

<el-tabs v-model="currTab" type="border-card">

<el-tab-pane name="first" label="提交日志" class="aaa">

<div v-for="(e,i) in copyLogContent" :key="i">

<span class="log-time" v-html="e.time" />

<span class="log-host" v-html="e.level" />

<span class="log-message" v-html="e.content" />

</div>

</el-tab-pane>

<el-tab-pane name="two" label="标准输出">

<div v-for="(e,i) in copyLogbiaozhunContent" :key="i">

<span class="log-time" v-html="e.time" />

<span class="log-host" v-html="e.level" />

<span class="log-message" v-html="e.content" />

</div>

</el-tab-pane>

</el-tabs>

</div>

</div>

</div>

</template>

<script>

export default

data()

return

flowId: 0,

batchId: 0,

clusterId: 0,

copyLogbiaozhunContent: [],

copyLogContent: [],

currTab: ‘first‘,

// 流程日志定时器

logContentTimer: null,

// 标准输出定时器

biaoZhunTimer: null,

// log页搜索框

search: ‘‘,

// 高亮的数据

highlight: [],

// 当前高亮数据的索引

highlightNum: -1,

// 当前高亮标准输出的数据

biaohighlightNum: -1,

// 流程日志

logContent: [],

// 标准输出

biaoContent: []

,

mounted()

this.queryString()

this.getFLowLog()

this.biaoZhun()

,

beforeDestroy()

clearInterval(this.biaoZhunTimer)

clearInterval(this.logContentTimer)

,

methods:

changHtml()

this.highlightNum = -1

this.biaohighlightNum = -1

for (var item of this.highlight)

console.log(item)

item.style.color = ‘red‘

if (this.search && this.search.length > 0)

if (this.currTab === ‘first‘)

const reg = new RegExp(this.search, ‘g‘)

const repStr =

‘<span style="color:red" class="highlightl">‘ +

this.search +

‘</span>‘

var obj = JSON.parse(JSON.stringify(this.logContent))

this.copyLogContent = obj.map(e =>

for (var attr in e)

if (e[attr])

e[attr] = e[attr].replace(reg, repStr)

return e

)

this.highlight = document.getElementsByClassName(‘highlightl‘)

else if (this.currTab === ‘two‘)

const reg = new RegExp(this.search, ‘g‘)

const repStr =

‘<span style="color:red" class="highlightr">‘ +

this.search +

‘</span>‘

// 标准输出的高亮

var obj = JSON.parse(JSON.stringify(this.biaoContent))

this.copyLogbiaozhunContent = obj.map(e =>

for (var attr in e)

if (e[attr])

e[attr] = e[attr].replace(reg, repStr)

return e

)

this.highlight = document.getElementsByClassName(‘highlightr‘)

,

previous()

if (this.currTab === ‘first‘)

if (this.highlightNum <= 0) return

this.highlightNum--

this.highlight[this.highlightNum].style.color = ‘#3c9fff‘

this.highlight[this.highlightNum + 1].style.color = ‘red‘

else if (this.currTab === ‘two‘)

// 标准输出上移高亮

if (this.biaohighlightNum <= 0) return

this.biaohighlightNum--

this.highlight[this.biaohighlightNum].style.color = ‘#3c9fff‘

this.highlight[this.biaohighlightNum + 1].style.color = ‘red‘

,

// 下移高亮

next()

if (this.currTab === ‘first‘)

if (this.highlightNum == this.highlight.length - 1) return

this.highlightNum++

this.highlight[this.highlightNum].style.color = ‘#3c9fff‘

if (this.highlight[this.highlightNum - 1])

this.highlight[this.highlightNum - 1].style.color = ‘red‘

else if (this.currTab === ‘two‘)

console.log(this.highlight)

// 标准输出下移高亮

// if (this.biaohighlightNum == this.highlight.length - 1) return

this.biaohighlightNum++

this.highlight[this.biaohighlightNum].style.color = ‘#3c9fff‘

this.highlight[this.biaohighlightNum - 1].style.color = ‘red‘

,

queryString()

var query = this.$route.query

this.flowId = query.flowId

this.batchId = query.batchId

this.clusterId = query.clusterId

,

biaoZhun()

if (this.clusterId === 0) return

const data =

batchId: this.batchId,

runMode: 7,

flowId: this.flowId,

logType: ‘stdout‘,

clusterId: this.clusterId,

offset: 0,

length: 99999999

this.biaoZhunTimer = setInterval(() =>

this.$api.codeTrain_getFlowLog(data).then(res =>

if (res.code == 4)

clearInterval(this.biaoZhunTimer)

this.biaoContent = res.object.logContent

this.copyLogbiaozhunContent = res.object.logContent

console.log(this.copyLogbiaozhunContent)

)

, 5000)

,

getFLowLog()

if (this.clusterId === 0) return

const data =

batchId: this.batchId,

runMode: 7,

flowId: this.flowId,

logType: ‘local‘,

clusterId: this.clusterId,

offset: 0,

length: 99999999

this.logContentTimer = setInterval(() =>

this.$api.codeTrain_getFlowLog(data).then(res =>

if (res.code == 4)

clearInterval(this.logContentTimer)

// if (!res.object || !res.object.logContent) return

this.logContent = res.object.logContent

this.copyLogContent = res.object.logContent

// console.log(this.logContent, ‘000‘)

)

, 5000)

</script>

<style lang="scss" scoped>

.log-box

background-color: #fff;

height: 773px+24px+401px;

padding: 16px;

.header

overflow: hidden;

.iconfont

float: right;

margin-right: 10px;

font-size: 30px;

line-height: 40px;

cursor: pointer;

.tab

margin-top:5px;

.tab .el-tabs__content

height: 930px;

overflow: auto;

</style>