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