<template>
|
<div class="mian_log">
|
<div class="log_tree">
|
<div class="log_search">
|
<el-input v-model.lazy="filterText" placeholder="请输入查询关键字" clearable />
|
<el-button type="success" @click="ReloadTree()">刷 新</el-button>
|
</div>
|
<el-tree class="log_el_tree" ref="treeRef" :data="treeData" :props="treeProps" :filter-node-method="treeFilter">
|
<template #default="{ node, data }">
|
<div class="treeItem">
|
<div>{{ node.label }}</div>
|
<div style="padding-left: 10px;" v-if="isFile(data)">
|
<a href="javascript:;" @click="GetContent(data)"> 打开 </a>
|
<!-- ||<a href="javascript:;" @click="DonwLog(data)"> 下载 </a> -->
|
</div>
|
</div>
|
</template>
|
</el-tree>
|
</div>
|
|
<div class="log_line"></div>
|
|
<div class="log_content">
|
<div>
|
<h2>{{ this.fileName }}</h2>
|
<div class="log_size">{{ GetSize() }}</div>
|
<el-checkbox v-model="keepRead">保持读取</el-checkbox>
|
</div>
|
|
<div ref="pre" v-if="content">
|
<el-progress :percentage="percentage" @click="ChangePercent($event)" color="#f56c6c" />
|
</div>
|
<div ref="showdata" @scroll="handleScroll($event)" style="white-space: pre-wrap;word-break: break-all">{{
|
content }}</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
export default ({
|
data() {
|
return {
|
filterText: "",
|
treeData: [],
|
treeProps: {
|
children: 'dirs',
|
label: 'dirName',
|
},
|
keepRead: false,
|
|
percentage: 100,
|
topStartPos: 0,
|
fileSize: "",
|
filePath: "",
|
fileName: "",
|
content: "",
|
isClick: false,
|
|
keepReadTimer: null
|
}
|
},
|
watch: {
|
filterText(val) {
|
this.$refs.treeRef.filter(val)
|
},
|
keepRead(val) {
|
if (val) {
|
this.keepReadTimer = setInterval(() => {
|
if (this.filePath) {
|
var parm = {
|
path: this.filePath,
|
percent: 100,
|
maxsize_KB: 10
|
}
|
this.percentage = 100;
|
this.http.post('/api/dt_log/GetLogData', parm).then((res) => {
|
this.content = res.data.content;
|
this.topStartPos = res.data.startIndex;
|
this.$nextTick(function () {
|
this.$refs.showdata.scrollTo(0, this.$refs.showdata.scrollHeight)
|
})
|
})
|
}
|
}, 1500);
|
} else {
|
clearInterval(this.keepReadTimer);
|
}
|
}
|
},
|
methods: {
|
treeFilter(value, data) {
|
if (!value) return true
|
return data.dirName.includes(value)
|
},
|
isFile(data) {
|
if (data.dirPath) {
|
return data.dirPath.indexOf(".log") != -1 || data.dirPath.indexOf(".txt") != -1;
|
}
|
return false;
|
},
|
ChangePercent(event) {
|
var bar = window.document.getElementsByClassName('el-progress-bar')[0]
|
var res = event.offsetX / bar.offsetWidth * 100;
|
var percent = parseFloat(res.toFixed(2));
|
if (percent < 1) {
|
percent = 0;
|
}
|
if (percent > 99) {
|
percent = 100;
|
}
|
this.percentage = percent;
|
var parm = {
|
path: this.filePath,
|
percent: this.percentage,
|
maxsize_KB: 20
|
}
|
|
this.http.post('/api/dt_log/GetLogData', parm).then((res) => {
|
this.isClick = true;
|
this.content = res.data.content;
|
this.topStartPos = res.data.startIndex;
|
this.$nextTick(function () {
|
if (percent == 100) {
|
this.$refs.showdata.scrollTo(0, this.$refs.showdata.scrollHeight)
|
} else {
|
this.$refs.showdata.scrollTo(0, 1)
|
}
|
})
|
setTimeout(() => {
|
this.isClick = false;
|
}, 1000)
|
})
|
},
|
GetContent(data) {
|
var parm = {
|
path: data.dirPath,
|
percent: 100,
|
maxsize_KB: 20
|
}
|
this.filePath = data.dirPath;
|
this.fileName = data.dirName;
|
this.percentage = parm.percent;
|
this.http.post('/api/dt_log/GetLogData', parm).then((res) => {
|
this.content = res.data.content;
|
this.topStartPos = res.data.startIndex;
|
this.fileSize = res.data.len;
|
this.$nextTick(function () {
|
this.$refs.showdata.scrollTo(0, this.$refs.showdata.scrollHeight);
|
})
|
})
|
},
|
handleScroll() {
|
const scrollTop = this.$refs.showdata.scrollTop;
|
if (scrollTop == 0 && !this.isClick) {
|
if (this.topStartPos == 0) {
|
this.percentage = 0;
|
return;
|
}
|
var parm = {
|
path: this.filePath,
|
maxsize_KB: 10,
|
topStartPos: this.topStartPos
|
}
|
this.http.post('/api/dt_log/GetLogData', parm).then((res) => {
|
this.topStartPos = res.data.startIndex;
|
var per = res.data.startIndex / res.data.len * 100;
|
|
this.percentage = parseFloat(per.toFixed(2));
|
if (this.percentage == 0 && res.data.startIndex != 0) {
|
this.percentage = 0.1;
|
}
|
this.content = res.data.content + this.content;
|
this.$nextTick(function () {
|
this.$refs.showdata.scrollTo(0, 1)
|
})
|
})
|
}
|
},
|
DonwLog(data) {
|
var url = this.http.axios.defaults.baseURL + 'api/dt_log/DownLog';
|
url += "?filePath=" + data.dirPath;
|
window.location.href = encodeURI(url);
|
},
|
ReloadTree() {
|
this.http.post("/api/dt_log/GetLogList", {}, "加载目录中……")
|
.then(res => {
|
this.treeData = res.data.dirs;
|
})
|
},
|
GetSize(size) {
|
var size = this.fileSize;
|
if (!size) {
|
return ''
|
} else if (size < 1024) {
|
size = size + "B"
|
} else if (size < 1024 * 1024) {
|
size = (size / 1024).toFixed(2) + "KB"
|
} else {
|
size = (size / 1024 / 1024).toFixed(2) + "MB"
|
}
|
return "文件大小:" + size;
|
}
|
},
|
mounted() {
|
this.http.post("/api/dt_log/GetLogList", {}, "加载目录中……")
|
.then(res => {
|
this.treeData = res.data.dirs;
|
})
|
}
|
})
|
</script>
|
|
<style scoped>
|
.mian_log {
|
height: calc(100vh - 96px);
|
padding: 10px 10px;
|
display: flex;
|
width: 100%;
|
}
|
|
.log_tree {
|
width: 420px;
|
height: 100%;
|
display: flex;
|
flex-direction: column;
|
}
|
|
.log_search {
|
display: flex;
|
}
|
|
.log_search :last-child {
|
margin-left: 5px;
|
}
|
|
.log_el_tree {
|
width: 100%;
|
overflow-x: auto;
|
flex: 1;
|
}
|
|
|
.treeItem {
|
overflow-x: auto;
|
flex: 1;
|
display: flex;
|
justify-content: space-between;
|
}
|
|
.treeItem::-webkit-scrollbar {
|
height: 5px;
|
}
|
|
.treeItem::-webkit-scrollbar-thumb {
|
/* 定义滚动条滑块颜色 */
|
background: #ccc;
|
}
|
|
.treeItem::-webkit-scrollbar-thumb:hover {
|
/* 定义滚动条滑块悬停颜色 */
|
background: orange;
|
}
|
|
.log_line {
|
margin: 5px 16px;
|
border-left: 2px dashed orange;
|
}
|
|
.log_content {
|
flex: 1;
|
display: flex;
|
flex-direction: column;
|
}
|
|
.log_content>div:first-child {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
}
|
|
.log_size {
|
font-size: 13px;
|
color: #bbb;
|
}
|
|
.log_content>div:last-child {
|
flex: 1;
|
overflow-y: scroll;
|
margin-top: 5px;
|
padding-top: 5px;
|
border-top: 1px solid black;
|
}
|
|
a {
|
color: blue;
|
}
|
</style>
|
