440 lines
11 KiB
Vue
440 lines
11 KiB
Vue
<template>
|
||
<div class="log">
|
||
<a-card class="log-tree" :bordered="false">
|
||
<!-- 标题 -->
|
||
<template slot="title">
|
||
<div class="title">
|
||
<div class="title-text">LOG</div>
|
||
<div class="title-rect">
|
||
<span></span>
|
||
<span></span>
|
||
<span></span>
|
||
<span></span>
|
||
<span></span>
|
||
<span></span>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
<!-- 标题结束 -->
|
||
<!-- 内容 -->
|
||
<a-spin :spinning="isGettingTreeData" style="margin-top: 80px; width: 100%; text-align: center"> </a-spin>
|
||
<tree-with-line
|
||
v-if="treeData.length"
|
||
:treeData="treeData"
|
||
:selected-keys.sync="selectedKeys"
|
||
:expanded-keys.sync="expandedKeys"
|
||
@select="onSelect"
|
||
>
|
||
</tree-with-line>
|
||
<!-- 内容结束 -->
|
||
</a-card>
|
||
<!-- 日志列表 -->
|
||
<div class="log-list">
|
||
<div class="search-bar">
|
||
<a-row type="flex">
|
||
<a-col flex="290px">
|
||
<a-form-model-item label="Name">
|
||
<a-input v-model="nameStr" placeholder="Please Input..." />
|
||
</a-form-model-item>
|
||
</a-col>
|
||
<a-col flex="108px">
|
||
<a-button class="search-btn" type="primary" @click="onSearch">
|
||
<img src="@/assets/images/global/search.png" alt="" />
|
||
Search
|
||
</a-button>
|
||
</a-col>
|
||
</a-row>
|
||
</div>
|
||
<custom-table
|
||
size="middle"
|
||
rowKey="id"
|
||
:columns="columns"
|
||
:list="dataSource"
|
||
:pagination="false"
|
||
:loading="isGettingTreeData || loading"
|
||
:can-select="false"
|
||
@change="handleTableChange"
|
||
:scroll="{ y: 'calc(100vh - 275px)' }"
|
||
>
|
||
<template slot="operate" slot-scope="{ record }">
|
||
<a-space :size="20">
|
||
<img src="@/assets/images/log/operate.png" alt="" style="cursor: pointer" @click.stop="onOperate(record)" />
|
||
<img
|
||
src="@/assets/images/log/download.png"
|
||
alt=""
|
||
style="cursor: pointer"
|
||
@click.stop="onDownload(record)"
|
||
/>
|
||
</a-space>
|
||
</template>
|
||
</custom-table>
|
||
<a-pagination
|
||
size="small"
|
||
v-model="ipagination.current"
|
||
:pageSize="ipagination.pageSize"
|
||
:page-size-options="ipagination.pageSizeOptions"
|
||
show-size-changer
|
||
show-quick-jumper
|
||
:total="ipagination.total"
|
||
:show-total="
|
||
(total, range) =>
|
||
`Total ${total} items Page ${ipagination.current} / ${Math.ceil(total / ipagination.pageSize)}`
|
||
"
|
||
show-less-items
|
||
@change="handlePageChange"
|
||
@showSizeChange="handleSizeChange"
|
||
/>
|
||
</div>
|
||
<!-- 日志列表结束 -->
|
||
<custom-modal title="Log" :width="950" v-model="visible" :footer="null">
|
||
<a-spin class="log-detail" :spinning="isGettingDetail">
|
||
<pre style="font-family: 仿宋">{{ logInfo }}</pre>
|
||
<!-- <div style="font-family: 宋体" v-for="(logItem, index) in logInfo" :key="index">
|
||
{{ logItem }}
|
||
</div> -->
|
||
</a-spin>
|
||
</custom-modal>
|
||
</div>
|
||
</template>
|
||
<script>
|
||
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
|
||
import TreeWithLine from '@/components/TreeWithLine/index.vue'
|
||
import { downloadFile, getAction, postAction } from '../../api/manage'
|
||
|
||
const columns = [
|
||
{
|
||
title: 'NAME',
|
||
align: 'center',
|
||
width: 320,
|
||
dataIndex: 'fileName',
|
||
},
|
||
{
|
||
title: 'DATE',
|
||
align: 'center',
|
||
width: 200,
|
||
dataIndex: 'fileDate',
|
||
},
|
||
{
|
||
title: 'SIZE',
|
||
align: 'center',
|
||
width: 220,
|
||
dataIndex: 'fileSize',
|
||
},
|
||
{
|
||
title: 'OPERATE',
|
||
align: 'center',
|
||
width: 200,
|
||
scopedSlots: {
|
||
customRender: 'operate',
|
||
},
|
||
},
|
||
]
|
||
|
||
export default {
|
||
name: 'LogManage',
|
||
mixins: [JeecgListMixin],
|
||
components: {
|
||
TreeWithLine,
|
||
},
|
||
data() {
|
||
this.columns = columns
|
||
return {
|
||
nameStr: '',
|
||
disableMixinCreated: true,
|
||
url: {
|
||
list: '/logManage/findFiles',
|
||
},
|
||
isGettingTreeData: false, // 正在获取左侧树信息
|
||
treeData: [],
|
||
selectedKeys: [],
|
||
expandedKeys: [],
|
||
dataSource: [],
|
||
|
||
visible: false,
|
||
isGettingDetail: false,
|
||
logInfo: [],
|
||
ipagination: {
|
||
current: 1,
|
||
pageSize: 10,
|
||
pageSizeOptions: ['10', '20', '30'],
|
||
showTotal: (total, range) => {
|
||
const { current, pageSize } = this.ipagination
|
||
return `Total ${total} items Page ${current} / ${Math.ceil(total / pageSize)}`
|
||
},
|
||
showQuickJumper: true,
|
||
showSizeChanger: true,
|
||
total: 0,
|
||
},
|
||
}
|
||
},
|
||
created() {
|
||
this.getTreeData()
|
||
},
|
||
methods: {
|
||
onSearch() {
|
||
this.loadData()
|
||
},
|
||
handlePageChange(page, pageSize) {
|
||
this.ipagination.current = page
|
||
this.ipagination.pageSize = pageSize
|
||
this.loadData()
|
||
},
|
||
handleSizeChange(current, size) {
|
||
this.ipagination.current = current
|
||
this.ipagination.pageSize = size
|
||
this.loadData()
|
||
},
|
||
async getTreeData() {
|
||
try {
|
||
this.isGettingTreeData = true
|
||
const res = await getAction('/logManage/findFtpFolders', { workPath: 'log' })
|
||
this.treeData = this.buildTreeData(res)
|
||
const firstNode = this.treeData[0]
|
||
this.selectedKeys = [firstNode.key]
|
||
this.expandedKeys = [firstNode.key]
|
||
this.onSelect()
|
||
} catch (error) {
|
||
console.error(error)
|
||
this.$message.error('Get Tree Data Failed')
|
||
} finally {
|
||
this.isGettingTreeData = false
|
||
}
|
||
},
|
||
|
||
/**
|
||
* @param {Array<any>} treeJson
|
||
*/
|
||
buildTreeData(treeJson) {
|
||
const tree = []
|
||
treeJson.forEach((item) => {
|
||
const treeNode = {
|
||
title: item.name,
|
||
key: item.path,
|
||
children: [],
|
||
}
|
||
if (item.children && item.children.length) {
|
||
treeNode.children.push(...this.buildTreeData(item.children))
|
||
}
|
||
tree.push(treeNode)
|
||
})
|
||
return tree
|
||
},
|
||
onSelect() {
|
||
this.queryParam.path = this.selectedKeys[0]
|
||
this.ipagination.current = 1
|
||
this.ipagination.pageSize = 10
|
||
this.loadData()
|
||
},
|
||
|
||
loadData(arg) {
|
||
if (!this.url.list) {
|
||
this.$message.error('请设置url.list属性!')
|
||
return
|
||
}
|
||
//加载数据 若传入参数1则加载第一页的内容
|
||
if (arg === 1) {
|
||
this.ipagination.current = 1
|
||
}
|
||
this.onClearSelected()
|
||
|
||
var params = this.getQueryParams() //查询条件
|
||
params.name = this.nameStr
|
||
params.pageNo = this.ipagination.current
|
||
params.pageSize = this.ipagination.pageSize
|
||
this.loading = true
|
||
getAction(this.url.list, params)
|
||
.then(({ result: { records, total } }) => {
|
||
this.dataSource = records
|
||
this.ipagination.total = total
|
||
})
|
||
.finally(() => {
|
||
this.loading = false
|
||
})
|
||
},
|
||
|
||
async onOperate({ fileName, filePath, fileSize }) {
|
||
if (parseFloat(fileSize) == 0) {
|
||
this.$message.warn('This Log Is Empty')
|
||
return
|
||
}
|
||
this.visible = true
|
||
const formData = new FormData()
|
||
formData.append('fileName', fileName)
|
||
formData.append('localPath', filePath)
|
||
try {
|
||
this.isGettingDetail = true
|
||
const res = await postAction('/logManage/downloadFile', formData)
|
||
// this.logInfo = res.split('\r\n')
|
||
this.logInfo = res
|
||
} catch (error) {
|
||
console.error(error)
|
||
} finally {
|
||
this.isGettingDetail = false
|
||
}
|
||
},
|
||
onDownload({ fileName, filePath, fileSize }) {
|
||
if (parseFloat(fileSize) == 0) {
|
||
this.$message.warn('This Log Is Empty')
|
||
return
|
||
}
|
||
const formData = new FormData()
|
||
formData.append('fileName', fileName)
|
||
formData.append('localPath', filePath)
|
||
downloadFile('/logManage/downloadFile', fileName, formData, 'post')
|
||
},
|
||
},
|
||
}
|
||
</script>
|
||
<style lang="less" scoped>
|
||
.log {
|
||
height: 100%;
|
||
display: flex;
|
||
&-tree {
|
||
width: 290px;
|
||
height: 100%;
|
||
flex-shrink: 0;
|
||
margin-right: 20px;
|
||
background-color: #022024;
|
||
border: 1px solid #0c6a66;
|
||
::v-deep {
|
||
.ant-card {
|
||
&-head {
|
||
border-bottom: 4px solid rgba(12, 235, 201, 0.2);
|
||
height: auto;
|
||
&-title {
|
||
height: 45px;
|
||
line-height: 45px;
|
||
padding: 0;
|
||
padding-right: 20px;
|
||
font-family: MicrogrammaD-MediExte;
|
||
font-size: 18px;
|
||
font-weight: bold;
|
||
color: #0cebc9;
|
||
}
|
||
}
|
||
&-body {
|
||
padding-left: 20px;
|
||
height: calc(100% - 50px);
|
||
overflow: auto;
|
||
}
|
||
}
|
||
}
|
||
.title {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
&-text {
|
||
padding-left: 20px;
|
||
width: 100px;
|
||
background-color: rgba(12, 235, 201, 0.05);
|
||
}
|
||
|
||
&-rect {
|
||
span {
|
||
display: inline-block;
|
||
background-color: rgba(12, 235, 201, 0.2);
|
||
vertical-align: middle;
|
||
&:first-child {
|
||
width: 4px;
|
||
height: 4px;
|
||
}
|
||
&:nth-child(2) {
|
||
width: 6px;
|
||
height: 6px;
|
||
margin-right: 6px;
|
||
}
|
||
&:nth-child(3) {
|
||
width: 4px;
|
||
height: 4px;
|
||
margin-right: 9px;
|
||
}
|
||
&:nth-child(4) {
|
||
width: 1px;
|
||
height: 16px;
|
||
margin-right: 23px;
|
||
}
|
||
&:nth-child(5) {
|
||
width: 2px;
|
||
height: 2px;
|
||
margin-right: 24px;
|
||
}
|
||
&:nth-child(6) {
|
||
width: 4px;
|
||
height: 4px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
&-list {
|
||
position: relative;
|
||
overflow: hidden;
|
||
}
|
||
}
|
||
|
||
.log-detail {
|
||
::v-deep {
|
||
.ant-spin-container {
|
||
min-height: 100px;
|
||
max-height: 520px;
|
||
overflow: auto;
|
||
padding: 10px;
|
||
}
|
||
}
|
||
}
|
||
.search-bar {
|
||
height: 50px;
|
||
border-top: 1px solid rgba(13, 235, 201, 0.3);
|
||
border-bottom: 1px solid rgba(13, 235, 201, 0.3);
|
||
margin-bottom: 15px;
|
||
padding: 8px 10px;
|
||
background: rgba(12, 235, 201, 0.05);
|
||
}
|
||
.ant-input {
|
||
width: 266px;
|
||
}
|
||
::v-deep {
|
||
.ant-form-item {
|
||
display: flex;
|
||
margin-bottom: 0;
|
||
.ant-form-item-label,
|
||
.ant-form-item-control {
|
||
line-height: 32px;
|
||
height: 32px;
|
||
}
|
||
.ant-form-item-label {
|
||
flex-shrink: 0;
|
||
margin-right: 10px;
|
||
label {
|
||
font-size: 16px;
|
||
font-family: ArialMT;
|
||
color: #ade6ee;
|
||
&::after {
|
||
display: none;
|
||
}
|
||
}
|
||
}
|
||
.ant-calendar-range-picker-separator {
|
||
color: white;
|
||
}
|
||
.ant-form-item-control-wrapper {
|
||
width: 100%;
|
||
// overflow: hidden;
|
||
}
|
||
}
|
||
}
|
||
.search-btn {
|
||
margin-bottom: 10px;
|
||
img {
|
||
width: 16px;
|
||
height: 17px;
|
||
margin-right: 9px;
|
||
}
|
||
}
|
||
.ant-pagination {
|
||
position: absolute;
|
||
left: 50%;
|
||
bottom: 0;
|
||
transform: translateX(-50%);
|
||
}
|
||
</style>
|