新增日志管理页面
This commit is contained in:
tjxt
parent
aa9691b85b
commit
468126a928
|
|
@ -0,0 +1,100 @@
|
|||
import request from '@/utils/request'
|
||||
//查询业务日志列表
|
||||
export function getYwLogs(data) {
|
||||
return request({
|
||||
url: '/system/sys/sysLog/getYwLogs',
|
||||
method: 'get',
|
||||
params: data
|
||||
})
|
||||
}
|
||||
|
||||
//备份业务日志列表
|
||||
export function downloadYwLogs(data) {
|
||||
return request({
|
||||
url: '/system/sys/sysLog/downloadYwLogs',
|
||||
method: 'get',
|
||||
params: data,
|
||||
responseType: 'blob'
|
||||
})
|
||||
}
|
||||
|
||||
//查询系统日志列表
|
||||
export function getSysLogs(data) {
|
||||
return request({
|
||||
url: '/system/sys/sysLog/getSystemLogs',
|
||||
method: 'get',
|
||||
params: data
|
||||
})
|
||||
}
|
||||
|
||||
//备份系统日志列表
|
||||
export function downloadSysLogs(data) {
|
||||
return request({
|
||||
url: '/system/sys/sysLog/downloadSysLogs',
|
||||
method: 'get',
|
||||
params: data,
|
||||
responseType: 'blob'
|
||||
})
|
||||
}
|
||||
|
||||
//查询异常日志列表
|
||||
export function getErrLogs(data) {
|
||||
return request({
|
||||
url: '/system/sys/sysLog/getErrLogs',
|
||||
method: 'get',
|
||||
params: data
|
||||
})
|
||||
}
|
||||
|
||||
//备份异常日志列表
|
||||
export function downloadErrLogs(data) {
|
||||
return request({
|
||||
url: '/system/sys/sysLog/downloadErrLogs',
|
||||
method: 'get',
|
||||
params: data,
|
||||
responseType: 'blob'
|
||||
})
|
||||
}
|
||||
|
||||
//获取日志分析数据
|
||||
export function getAnalyseData(data) {
|
||||
return request({
|
||||
url: '/system/sys/sysLog/getLogStatistics',
|
||||
method: 'post',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
//获取日志容量
|
||||
export function getLogSize(data) {
|
||||
return request({
|
||||
url: '/system/sys/sysLog/getLogsSet',
|
||||
method: 'post',
|
||||
data
|
||||
})
|
||||
}
|
||||
//设置日志容量
|
||||
export function updateLogSize(data) {
|
||||
return request({
|
||||
url: '/system/sys/sysLog/setLogsSet',
|
||||
method: 'post',
|
||||
data:data
|
||||
})
|
||||
}
|
||||
|
||||
//添加异常Ip日志
|
||||
export function addLogs(data) {
|
||||
return request({
|
||||
url: '/system/sys/sysLog/addLogs',
|
||||
method: 'post',
|
||||
data:data
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,26 @@
|
|||
// 下载blob文件
|
||||
export const downloadFile = ({ fileData, fileType, fileName }) => {
|
||||
const blob = new Blob([fileData], {
|
||||
type: fileType
|
||||
})
|
||||
const link = document.createElement('a')
|
||||
link.href = URL.createObjectURL(blob)
|
||||
link.download = fileName
|
||||
link.style.display = 'none'
|
||||
document.body.appendChild(link)
|
||||
link.click()
|
||||
URL.revokeObjectURL(link.href)
|
||||
document.body.removeChild(link)
|
||||
}
|
||||
|
||||
// 通用a链接下载
|
||||
export const downloadFileByUrl = (url) => {
|
||||
const link = document.createElement('a')
|
||||
link.href = url
|
||||
link.setAttribute('download', '')
|
||||
link.style.display = 'none'
|
||||
document.body.appendChild(link)
|
||||
link.click()
|
||||
URL.revokeObjectURL(link.href)
|
||||
document.body.removeChild(link)
|
||||
}
|
||||
|
|
@ -0,0 +1,240 @@
|
|||
<template>
|
||||
<div class="app-container">
|
||||
<div class="filter-container">
|
||||
|
||||
<el-input v-model="listQuery.ip" placeholder="请输入IP地址"
|
||||
style="width: 200px" class="filter-item ml-20" :maxlength="30"
|
||||
@keyup.enter.native="handleFilter"
|
||||
/>
|
||||
<el-date-picker
|
||||
v-model="rangeDate"
|
||||
style="width: 300px"
|
||||
class="filter-item ml-20"
|
||||
value-format="yyyy-MM-dd"
|
||||
type="daterange"
|
||||
range-separator="至"
|
||||
start-placeholder="开始日期"
|
||||
end-placeholder="结束日期"
|
||||
/>
|
||||
<el-select v-model="listQuery.errLevel" placeholder="请选择异常等级" style="width: 200px" class="filter-item ml-20">
|
||||
<el-option v-for="item in Object.keys(levelList)" :key="item" :value="levelList[item]" :label="levelList[item]" />
|
||||
</el-select>
|
||||
<!-- <el-input v-model="listQuery.errType" placeholder="请输入异常类型"
|
||||
style="width: 200px" class="filter-item" :maxlength="30"
|
||||
@keyup.enter.native="handleFilter"
|
||||
/> -->
|
||||
<el-select v-model="listQuery.errType" placeholder="请选择异常类型" style="width: 200px" class="filter-item ml-20">
|
||||
<el-option v-for="item in Object.keys(typeList)" :key="item" :value="typeList[item]" :label="typeList[item]" />
|
||||
</el-select>
|
||||
|
||||
<el-select v-model="listQuery.logSort" clearable filterable style="width: 200px" class="filter-item ml-20" placeholder="请选择" >
|
||||
<el-option v-for="item in timeList" :key="item.id" :label="item.name" :value="item.id" />
|
||||
</el-select>
|
||||
<el-select v-model="listQuery.logDesc" clearable filterable style="width: 200px" class="filter-item ml-20" placeholder="请选择" >
|
||||
<el-option v-for="item in sortList" :key="item.id" :label="item.name" :value="item.id" />
|
||||
</el-select>
|
||||
<el-button style="margin-left: 20px" class="filter-item" type="primary" @click="handleFilter">
|
||||
查询
|
||||
</el-button>
|
||||
<el-button style="margin-left: 20px" class="filter-item" @click="resetFilter">
|
||||
重置
|
||||
</el-button>
|
||||
<el-button v-throttle-click="handleBackups" class="filter-item" style="margin-left: 20px" type="warning">
|
||||
备份
|
||||
</el-button>
|
||||
</div>
|
||||
|
||||
<el-table
|
||||
:key="tableKey"
|
||||
v-loading="listLoading"
|
||||
:data="list"
|
||||
border
|
||||
fit
|
||||
highlight-current-row
|
||||
style="width: 100%"
|
||||
:max-height="tableHeight"
|
||||
>
|
||||
<el-table-column label="序号" align="center" width="80" type="index">
|
||||
<template scope="scope">
|
||||
<span>{{ (listQuery.pageNum - 1) * 10 + scope.$index + 1 }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作人" align="center" prop="operaUserName">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ scope.row.operaUserName||'/' }}</span>
|
||||
</template>
|
||||
|
||||
</el-table-column>
|
||||
<el-table-column label="操作时间" align="center" prop="operTime" width="180"/>
|
||||
<el-table-column label="IP地址" align="center" prop="ip"/>
|
||||
<el-table-column label="操作模块" align="center" prop="model" >
|
||||
<template slot-scope="scope">
|
||||
<span>{{ scope.row.model||'/' }}</span>
|
||||
</template>
|
||||
|
||||
</el-table-column>
|
||||
<el-table-column label="异常类型" align="center" prop="errType" />
|
||||
<el-table-column label="异常原因" align="center" prop="failureReason"/>
|
||||
<el-table-column label="异常等级" align="center" prop="grade"/>
|
||||
<el-table-column label="事件结果" align="center" prop="fruit"/>
|
||||
<el-table-column label="操作类型" align="center" prop="operaType" />
|
||||
<!--
|
||||
<el-table-column label="操作详情" align="center" prop="operateDetail" />
|
||||
|
||||
<el-table-column label="操作结果" align="center" prop="errLevel">
|
||||
<template slot-scope="{ row }">
|
||||
{{ getStatus(row.errLevel) }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作参数" align="center" prop="params" />
|
||||
<el-table-column label="操作方法" align="center" prop="method" /> -->
|
||||
<el-table-column label="操作路径" align="center" prop="operUri" />
|
||||
<!-- <el-table-column label="执行时间(ms)" align="center" prop="times" /> -->
|
||||
</el-table>
|
||||
|
||||
<pagination
|
||||
v-show="total > 0"
|
||||
:total="total"
|
||||
:page.sync="listQuery.pageNum"
|
||||
:limit.sync="listQuery.pageSize"
|
||||
@pagination="getList"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Pagination from '@/components/Pagination'
|
||||
|
||||
import _ from 'lodash/fp'
|
||||
import { downloadFile } from '@/utils/download'
|
||||
|
||||
import { getErrLogs,downloadErrLogs } from '@/api/system/log'
|
||||
|
||||
|
||||
const levelList = {
|
||||
1:'高',
|
||||
2:'中',
|
||||
3:'低'
|
||||
};
|
||||
const typeList = {
|
||||
1:'越权访问',
|
||||
2:'IP异常',
|
||||
// 3:'删除',
|
||||
// 4:'查询',
|
||||
// 5:'导出',
|
||||
// 6:'下载',
|
||||
// 7:'备份',
|
||||
// 8:'登录',
|
||||
// 9:'登出'
|
||||
};
|
||||
|
||||
export default {
|
||||
components: { Pagination },
|
||||
data() {
|
||||
return {
|
||||
tableKey: 0,
|
||||
list: [],
|
||||
levelList: levelList,
|
||||
total: 0,
|
||||
listLoading: false,
|
||||
tableHeight: 650,
|
||||
typeList: typeList,
|
||||
timeList:[{id:1,name:'时间'},{id:2,name:'操作人'},{id:4,name:'ip'},{id:5,name:'异常等级'}],
|
||||
sortList:[{id:1,name:'倒序'},{id:2,name:'升序'}],
|
||||
listQuery: {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
errType: '',
|
||||
ip: '',
|
||||
errLevel: '',
|
||||
operTime:'',
|
||||
// logSort:1,
|
||||
logDesc:1,
|
||||
},
|
||||
rangeDate:[],
|
||||
}
|
||||
},
|
||||
created() {
|
||||
// this.getList()
|
||||
// this.getOperate()
|
||||
},
|
||||
mounted() {
|
||||
this.listQuery.operTime = this.getCurrentDate()+' - '+this.getCurrentDate();
|
||||
this.rangeDate = [this.getCurrentDate(),this.getCurrentDate()]
|
||||
this.getList()
|
||||
},
|
||||
methods: {
|
||||
getStatus(val) {
|
||||
return this.levelList[val]
|
||||
},
|
||||
//获取下拉数据
|
||||
getOperate(){
|
||||
// getOperateList().then((response) => {
|
||||
// this.typeList = response.data
|
||||
// })
|
||||
},
|
||||
|
||||
getList() {
|
||||
this.listLoading = true
|
||||
if(this.rangeDate && this.rangeDate.length>0){
|
||||
this.listQuery.operTime = this.rangeDate[0]+' - '+this.rangeDate[1];
|
||||
}
|
||||
getErrLogs(this.listQuery).then((response) => {
|
||||
this.list = response.rows.map(item => {
|
||||
return item
|
||||
})
|
||||
this.total = response.total
|
||||
})
|
||||
setTimeout(()=>{
|
||||
this.listLoading = false
|
||||
},500)
|
||||
},
|
||||
// 查询
|
||||
handleFilter() {
|
||||
this.listQuery.pageNum = 1
|
||||
this.getList()
|
||||
},
|
||||
//重置
|
||||
resetFilter() {
|
||||
this.listQuery={
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
errType: '',
|
||||
ip: '',
|
||||
errLevel: '',
|
||||
// logSort:1,
|
||||
logDesc:1,
|
||||
};
|
||||
this.rangeDate=[this.getCurrentDate(),this.getCurrentDate()]
|
||||
this.handleFilter()
|
||||
},
|
||||
// 备份
|
||||
handleBackups() {
|
||||
downloadErrLogs().then(res => {
|
||||
downloadFile({ fileName: '异常日志.sql', fileData: res, fileType: 'text/html;charset=UTF-8'})
|
||||
})
|
||||
},
|
||||
//导出
|
||||
handleExport(){
|
||||
|
||||
// exportCarDetail().then(res => {
|
||||
// downloadFile({ fileName: '设备详情.xlsx', fileData: res, fileType: 'application/vnd.ms-excel;charset=utf-8' })
|
||||
// })
|
||||
},
|
||||
getCurrentDate() {
|
||||
let now = new Date();
|
||||
let year = now.getFullYear();
|
||||
let month = now.getMonth() + 1;
|
||||
if(month<10){
|
||||
month = '0'+month
|
||||
}
|
||||
let day = now.getDate();
|
||||
if(day<10){
|
||||
day = '0'+day
|
||||
}
|
||||
return year + "-" + month + "-" + day;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,233 @@
|
|||
<template>
|
||||
<div class="app-container">
|
||||
<div class="filter-container">
|
||||
<el-input v-model="listQuery.operaUserName" placeholder="请输入操作人"
|
||||
style="width: 200px" class="filter-item" :maxlength="30"
|
||||
@keyup.enter.native="handleFilter"
|
||||
/>
|
||||
<el-input v-model="listQuery.ip" placeholder="请输入IP地址"
|
||||
style="width: 200px" class="filter-item ml-20" :maxlength="30"
|
||||
@keyup.enter.native="handleFilter"
|
||||
/>
|
||||
<el-date-picker
|
||||
v-model="rangeDate"
|
||||
style="width: 300px"
|
||||
class="filter-item ml-20"
|
||||
value-format="yyyy-MM-dd"
|
||||
type="daterange"
|
||||
range-separator="至"
|
||||
start-placeholder="开始日期"
|
||||
end-placeholder="结束日期"
|
||||
/>
|
||||
<el-input v-model="listQuery.content" placeholder="请输入操作内容"
|
||||
style="width: 200px" class="filter-item ml-20" :maxlength="30"
|
||||
@keyup.enter.native="handleFilter"
|
||||
/>
|
||||
<el-select v-model="listQuery.result" placeholder="请选择事件结果" style="width: 200px" class="filter-item ml-20">
|
||||
<el-option v-for="item in Object.keys(outcomeList)" :key="item" :value="outcomeList[item]" :label="outcomeList[item]" />
|
||||
</el-select>
|
||||
<el-select v-model="listQuery.operateType" placeholder="请选择操作类型" style="width: 200px" class="filter-item ml-20">
|
||||
<el-option v-for="item in Object.keys(operateList)" :key="item" :value="operateList[item]" :label="operateList[item]" />
|
||||
</el-select>
|
||||
|
||||
<el-select v-model="listQuery.logSort" clearable filterable style="width: 200px" class="filter-item ml-20" placeholder="请选择" >
|
||||
<el-option v-for="item in timeList" :key="item.id" :label="item.name" :value="item.id" />
|
||||
</el-select>
|
||||
<el-select v-model="listQuery.logDesc" clearable filterable style="width: 200px" class="filter-item ml-20" placeholder="请选择" >
|
||||
<el-option v-for="item in sortList" :key="item.id" :label="item.name" :value="item.id" />
|
||||
</el-select>
|
||||
<el-button style="margin-left: 20px" class="filter-item" type="primary" @click="handleFilter">
|
||||
查询
|
||||
</el-button>
|
||||
<el-button style="margin-left: 20px" class="filter-item" @click="resetFilter">
|
||||
重置
|
||||
</el-button>
|
||||
<el-button v-throttle-click="handleBackups" class="filter-item" style="margin-left: 20px" type="warning">
|
||||
备份
|
||||
</el-button>
|
||||
</div>
|
||||
|
||||
<el-table
|
||||
:key="tableKey"
|
||||
v-loading="listLoading"
|
||||
:data="list"
|
||||
border
|
||||
fit
|
||||
highlight-current-row
|
||||
style="width: 100%"
|
||||
:max-height="tableHeight"
|
||||
>
|
||||
<el-table-column label="序号" align="center" width="80" type="index">
|
||||
<template scope="scope">
|
||||
<span>{{ (listQuery.pageNum - 1) * 10 + scope.$index + 1 }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作人" align="center" prop="operaUserName" />
|
||||
|
||||
<el-table-column label="操作时间" align="center" prop="operTime" />
|
||||
<el-table-column label="IP地址" align="center" prop="ip" />
|
||||
<el-table-column label="操作模块" align="center" prop="model" />
|
||||
<el-table-column label="操作类型" align="center" prop="operaType" />
|
||||
<el-table-column label="操作详情" align="center" prop="operateDetail" />
|
||||
|
||||
<el-table-column label="操作结果" align="center" prop="fruit">
|
||||
<template slot-scope="{ row }">
|
||||
{{ row.fruit }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作参数" align="center" prop="params" />
|
||||
<el-table-column label="操作方法" align="center" prop="method" />
|
||||
<el-table-column label="操作路径" align="center" prop="operUri" />
|
||||
<el-table-column label="执行时间(ms)" align="center" prop="times" />
|
||||
</el-table>
|
||||
|
||||
<pagination
|
||||
v-show="total > 0"
|
||||
:total="total"
|
||||
:page.sync="listQuery.pageNum"
|
||||
:limit.sync="listQuery.pageSize"
|
||||
@pagination="getList"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Pagination from '@/components/Pagination'
|
||||
|
||||
import _ from 'lodash/fp'
|
||||
import { downloadFile } from '@/utils/download'
|
||||
|
||||
import { getYwLogs,downloadYwLogs } from '@/api/system/log'
|
||||
|
||||
|
||||
const outcomeList = {
|
||||
1:'成功',
|
||||
2:'失败'
|
||||
};
|
||||
const operateList = {
|
||||
1:'新增',
|
||||
2:'修改',
|
||||
3:'删除',
|
||||
4:'查询',
|
||||
5:'导出',
|
||||
6:'下载',
|
||||
7:'备份',
|
||||
8:'登录',
|
||||
9:'登出'
|
||||
};
|
||||
|
||||
export default {
|
||||
components: { Pagination },
|
||||
data() {
|
||||
return {
|
||||
tableKey: 0,
|
||||
list: [],
|
||||
outcomeList: outcomeList,
|
||||
total: 0,
|
||||
listLoading: false,
|
||||
tableHeight: 650,
|
||||
operateList: operateList,
|
||||
timeList:[{id:1,name:'时间'},{id:2,name:'操作人'},{id:3,name:'操作模块'},{id:4,name:'ip'},],
|
||||
sortList:[{id:1,name:'倒序'},{id:2,name:'升序'}],
|
||||
listQuery: {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
operaUserName: '',
|
||||
ip: '',
|
||||
content:'',
|
||||
result: '',
|
||||
operTime:'',
|
||||
operateType: '',
|
||||
logSort:1,
|
||||
logDesc:1,
|
||||
},
|
||||
rangeDate:[],
|
||||
}
|
||||
},
|
||||
created() {
|
||||
// this.getList()
|
||||
// this.getOperate()
|
||||
},
|
||||
mounted() {
|
||||
this.listQuery.operTime = this.getCurrentDate()+' - '+this.getCurrentDate();
|
||||
this.rangeDate = [this.getCurrentDate(),this.getCurrentDate()]
|
||||
this.getList()
|
||||
},
|
||||
methods: {
|
||||
getStatus(val) {
|
||||
return this.outcomeList[val]
|
||||
},
|
||||
//获取下拉数据
|
||||
getOperate(){
|
||||
// getOperateList().then((response) => {
|
||||
// this.operateList = response.data
|
||||
// })
|
||||
},
|
||||
|
||||
getList() {
|
||||
this.listLoading = true
|
||||
if(this.rangeDate && this.rangeDate.length>0){
|
||||
this.listQuery.operTime = this.rangeDate[0]+' - '+this.rangeDate[1];
|
||||
}
|
||||
getYwLogs(this.listQuery).then((response) => {
|
||||
this.list = response.rows.map(item => {
|
||||
return item
|
||||
})
|
||||
this.total = response.total
|
||||
})
|
||||
setTimeout(()=>{
|
||||
this.listLoading = false
|
||||
},500)
|
||||
},
|
||||
// 查询
|
||||
handleFilter() {
|
||||
this.listQuery.pageNum = 1
|
||||
this.getList()
|
||||
},
|
||||
//重置
|
||||
resetFilter() {
|
||||
this.listQuery={
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
operaUserName: '',
|
||||
ip: '',
|
||||
|
||||
content:'',
|
||||
result: '',
|
||||
operateType: '',
|
||||
logSort:1,
|
||||
logDesc:1,
|
||||
};
|
||||
this.rangeDate=[this.getCurrentDate(),this.getCurrentDate()]
|
||||
this.handleFilter()
|
||||
},
|
||||
// 备份
|
||||
handleBackups() {
|
||||
downloadYwLogs().then(res => {
|
||||
downloadFile({ fileName: '业务日志.sql', fileData: res, fileType: 'text/html;charset=UTF-8'})
|
||||
})
|
||||
},
|
||||
//导出
|
||||
handleExport(){
|
||||
|
||||
// exportCarDetail().then(res => {
|
||||
// downloadFile({ fileName: '设备详情.xlsx', fileData: res, fileType: 'application/vnd.ms-excel;charset=utf-8' })
|
||||
// })
|
||||
},
|
||||
getCurrentDate() {
|
||||
let now = new Date();
|
||||
let year = now.getFullYear();
|
||||
let month = now.getMonth() + 1;
|
||||
if(month<10){
|
||||
month = '0'+month
|
||||
}
|
||||
let day = now.getDate();
|
||||
if(day<10){
|
||||
day = '0'+day
|
||||
}
|
||||
return year + "-" + month + "-" + day;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,180 @@
|
|||
<template>
|
||||
<div class="app-container">
|
||||
<div class="filter-container">
|
||||
<el-date-picker
|
||||
v-model="rangeDate"
|
||||
style="width: 300px"
|
||||
class="filter-item ml-20"
|
||||
value-format="yyyy-MM-dd"
|
||||
type="daterange"
|
||||
range-separator="至"
|
||||
start-placeholder="开始日期"
|
||||
end-placeholder="结束日期"
|
||||
/>
|
||||
<el-radio-group v-model="listQuery.type" class="ml-20">
|
||||
<el-radio label="1">日志类型</el-radio>
|
||||
<el-radio label="2">操作类型</el-radio>
|
||||
</el-radio-group>
|
||||
<el-button style="margin-left: 20px" class="filter-item" type="primary" @click="handleFilter">
|
||||
查询
|
||||
</el-button>
|
||||
<el-button style="margin-left: 20px" class="filter-item" @click="resetFilter">
|
||||
重置
|
||||
</el-button>
|
||||
<span style="margin-left: 40px;">总数:{{sumNum}}</span>
|
||||
<span class="ml-20">成功:{{successNum}}</span>
|
||||
<span class="ml-20">失败:{{failedNum}}</span>
|
||||
</div>
|
||||
<div style="width: 95%;height:650px;">
|
||||
<h3 style="text-align: center;">日志类型</h3>
|
||||
<div id="eChartBox" style="width: 60%;height:90%;margin: 0 auto;"></div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as echarts from 'echarts';
|
||||
import { getAnalyseData } from '@/api/system/log'
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
tableKey: 0,
|
||||
list: [],
|
||||
total: 0,
|
||||
listLoading: false,
|
||||
listQuery: {
|
||||
operTime:'',
|
||||
type:'1',
|
||||
},
|
||||
rangeDate:[],
|
||||
echartData:[
|
||||
{
|
||||
value: 45,
|
||||
name: "CARD",
|
||||
},
|
||||
{
|
||||
value: 25,
|
||||
name: "SSD",
|
||||
},
|
||||
{
|
||||
value: 15,
|
||||
name: "ADD",
|
||||
},
|
||||
{
|
||||
value: 8,
|
||||
name: "CBC",
|
||||
},
|
||||
{
|
||||
value: 7,
|
||||
name: "FLASH",
|
||||
},
|
||||
],
|
||||
sumNum:0,
|
||||
successNum:0,
|
||||
failedNum:0,
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.listQuery.operTime = this.getCurrentDate()+' - '+this.getCurrentDate();
|
||||
this.rangeDate = [this.getCurrentDate(),this.getCurrentDate()]
|
||||
this.getData()
|
||||
|
||||
},
|
||||
methods: {
|
||||
getData() {
|
||||
|
||||
if(this.rangeDate && this.rangeDate.length>0){
|
||||
this.listQuery.operTime = this.rangeDate[0]+' - '+this.rangeDate[1];
|
||||
}
|
||||
getAnalyseData(this.listQuery).then((response) => {
|
||||
this.sumNum = response.data.allNum||0
|
||||
this.successNum = response.data.sNum||0
|
||||
this.failedNum= response.data.eNum||0
|
||||
this.echartData = response.data.list.map((item,index)=>{
|
||||
let obj = {
|
||||
name:item,
|
||||
value:response.data.nums[index]
|
||||
}
|
||||
return obj
|
||||
});
|
||||
console.log(this.echartData)
|
||||
this.getInitData()
|
||||
})
|
||||
},
|
||||
// 查询
|
||||
handleFilter() {
|
||||
this.listQuery.pageNum = 1
|
||||
this.getData()
|
||||
},
|
||||
//重置
|
||||
resetFilter() {
|
||||
this.listQuery={
|
||||
rangeDate:[],
|
||||
type:'1',
|
||||
},
|
||||
this.handleFilter()
|
||||
},
|
||||
getInitData() {
|
||||
let option = {
|
||||
tooltip: {
|
||||
trigger: "item",
|
||||
formatter: "{a} <br/>{b} : {c} ({d}%)",
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: "日志分析",
|
||||
type: "pie",
|
||||
radius: "68%",
|
||||
center: ["50%", "50%"],
|
||||
clockwise: false,
|
||||
data: this.echartData,
|
||||
label: {
|
||||
normal: {
|
||||
textStyle: {
|
||||
color: "#999",
|
||||
fontSize: 14,
|
||||
},
|
||||
},
|
||||
},
|
||||
labelLine: {
|
||||
normal: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
itemStyle: {
|
||||
normal: {
|
||||
borderWidth: 4,
|
||||
borderColor: "#ffffff",
|
||||
},
|
||||
emphasis: {
|
||||
borderWidth: 0,
|
||||
shadowBlur: 10,
|
||||
shadowOffsetX: 0,
|
||||
shadowColor: "rgba(0, 0, 0, 0.5)",
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
color: ["#00acee", "#52cdd5", "#79d9f1", "#a7e7ff", "#c8efff"],
|
||||
backgroundColor: "#fff",
|
||||
};
|
||||
let myCharts = echarts.init(document.querySelector('#eChartBox'));
|
||||
myCharts.setOption(option)
|
||||
},
|
||||
getCurrentDate() {
|
||||
let now = new Date();
|
||||
let year = now.getFullYear();
|
||||
let month = now.getMonth() + 1;
|
||||
if(month<10){
|
||||
month = '0'+month
|
||||
}
|
||||
let day = now.getDate();
|
||||
if(day<10){
|
||||
day = '0'+day
|
||||
}
|
||||
return year + "-" + month + "-" + day;
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,61 @@
|
|||
<template>
|
||||
<div class="app-container">
|
||||
<el-form :model="capacityForm"
|
||||
ref="capacityForm"
|
||||
size="small" :inline="true"
|
||||
label-width="100px">
|
||||
|
||||
<el-form-item label="日志容量配置" prop="logCapacity">
|
||||
<el-input
|
||||
v-model="capacityForm.logCapacity"
|
||||
placeholder="请输入关键字"
|
||||
clearable
|
||||
style="width: 240px"
|
||||
/>
|
||||
<span style="margin-left: 10px;">MB</span>
|
||||
</el-form-item>
|
||||
|
||||
|
||||
<el-button type="primary" size="mini" style="margin-left: 20px;" @click="submit">确定</el-button
|
||||
>
|
||||
</el-form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getLogSize,updateLogSize } from '@/api/system/log'
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
capacityForm:{
|
||||
logCapacity:1024
|
||||
}
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getSize()
|
||||
},
|
||||
methods: {
|
||||
getSize(){
|
||||
getLogSize().then((response) => {
|
||||
this.capacityForm.logCapacity = response.data;
|
||||
})
|
||||
},
|
||||
submit(){
|
||||
updateLogSize(Number(this.capacityForm.logCapacity)).then((response) => {
|
||||
if(response.code==200){
|
||||
this.$message({
|
||||
showClose: true,
|
||||
message: response.msg,
|
||||
type: 'success',
|
||||
duration: 2000
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
|
@ -0,0 +1,234 @@
|
|||
<template>
|
||||
<div class="app-container">
|
||||
<div class="filter-container">
|
||||
<el-input v-model="listQuery.operaUserName" placeholder="请输入操作人"
|
||||
style="width: 200px" class="filter-item" :maxlength="30"
|
||||
@keyup.enter.native="handleFilter"
|
||||
/>
|
||||
<el-input v-model="listQuery.ip" placeholder="请输入IP地址"
|
||||
style="width: 200px" class="filter-item ml-20" :maxlength="30"
|
||||
@keyup.enter.native="handleFilter"
|
||||
/>
|
||||
<el-date-picker
|
||||
v-model="rangeDate"
|
||||
style="width: 300px"
|
||||
class="filter-item ml-20"
|
||||
value-format="yyyy-MM-dd"
|
||||
type="daterange"
|
||||
range-separator="至"
|
||||
start-placeholder="开始日期"
|
||||
end-placeholder="结束日期"
|
||||
/>
|
||||
<el-input v-model="listQuery.content" placeholder="请输入操作内容"
|
||||
style="width: 200px" class="filter-item ml-20" :maxlength="30"
|
||||
@keyup.enter.native="handleFilter"
|
||||
/>
|
||||
<el-select v-model="listQuery.result" placeholder="请选择事件结果" style="width: 200px" class="filter-item ml-20">
|
||||
<el-option v-for="item in Object.keys(outcomeList)" :key="item" :value="outcomeList[item]" :label="outcomeList[item]" />
|
||||
</el-select>
|
||||
<el-select v-model="listQuery.operateType" placeholder="请选择操作类型" style="width: 200px" class="filter-item ml-20">
|
||||
<el-option v-for="item in Object.keys(operateList)" :key="item" :value="operateList[item]" :label="operateList[item]" />
|
||||
</el-select>
|
||||
|
||||
<el-select v-model="listQuery.logSort" clearable filterable style="width: 200px" class="filter-item ml-20" placeholder="请选择" >
|
||||
<el-option v-for="item in timeList" :key="item.id" :label="item.name" :value="item.id" />
|
||||
</el-select>
|
||||
<el-select v-model="listQuery.logDesc" clearable filterable style="width: 200px" class="filter-item ml-20" placeholder="请选择" >
|
||||
<el-option v-for="item in sortList" :key="item.id" :label="item.name" :value="item.id" />
|
||||
</el-select>
|
||||
<el-button style="margin-left: 20px" class="filter-item" type="primary" @click="handleFilter">
|
||||
查询
|
||||
</el-button>
|
||||
<el-button style="margin-left: 20px" class="filter-item" @click="resetFilter">
|
||||
重置
|
||||
</el-button>
|
||||
<el-button v-throttle-click="handleBackups" class="filter-item" style="margin-left: 20px" type="warning">
|
||||
备份
|
||||
</el-button>
|
||||
</div>
|
||||
|
||||
<el-table
|
||||
:key="tableKey"
|
||||
v-loading="listLoading"
|
||||
:data="list"
|
||||
border
|
||||
fit
|
||||
highlight-current-row
|
||||
style="width: 100%"
|
||||
:max-height="tableHeight"
|
||||
>
|
||||
<el-table-column label="序号" align="center" width="80" type="index">
|
||||
<template scope="scope">
|
||||
<span>{{ (listQuery.pageNum - 1) * 10 + scope.$index + 1 }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作人" align="center" prop="operaUserName" />
|
||||
|
||||
<el-table-column label="操作时间" align="center" prop="operTime" />
|
||||
<el-table-column label="IP地址" align="center" prop="ip" />
|
||||
<el-table-column label="操作模块" align="center" prop="model" />
|
||||
<el-table-column label="操作类型" align="center" prop="operaType" />
|
||||
<el-table-column label="操作详情" align="center" prop="operateDetail" />
|
||||
|
||||
<el-table-column label="操作结果" align="center" prop="fruit">
|
||||
<template slot-scope="{ row }">
|
||||
{{ row.fruit }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作参数" align="center" prop="params" />
|
||||
<el-table-column label="操作方法" align="center" prop="method" />
|
||||
<el-table-column label="操作路径" align="center" prop="operUri" />
|
||||
<el-table-column label="执行时间(ms)" align="center" prop="times" />
|
||||
</el-table>
|
||||
|
||||
<pagination
|
||||
v-show="total > 0"
|
||||
:total="total"
|
||||
:page.sync="listQuery.pageNum"
|
||||
:limit.sync="listQuery.pageSize"
|
||||
@pagination="getList"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Pagination from '@/components/Pagination'
|
||||
|
||||
import _ from 'lodash/fp'
|
||||
import { downloadFile } from '@/utils/download'
|
||||
|
||||
import { getSysLogs,downloadSysLogs } from '@/api/system/log'
|
||||
|
||||
|
||||
const outcomeList = {
|
||||
1:'成功',
|
||||
2:'失败'
|
||||
};
|
||||
const operateList = {
|
||||
1:'新增',
|
||||
2:'修改',
|
||||
3:'删除',
|
||||
4:'查询',
|
||||
5:'导出',
|
||||
6:'下载',
|
||||
7:'备份',
|
||||
8:'登录',
|
||||
9:'登出'
|
||||
};
|
||||
|
||||
export default {
|
||||
components: { Pagination },
|
||||
data() {
|
||||
return {
|
||||
tableKey: 0,
|
||||
list: [],
|
||||
outcomeList: outcomeList,
|
||||
total: 0,
|
||||
listLoading: false,
|
||||
tableHeight: 650,
|
||||
operateList: operateList,
|
||||
timeList:[{id:1,name:'时间'},{id:2,name:'操作人'},{id:3,name:'操作模块'},{id:4,name:'ip'},],
|
||||
sortList:[{id:1,name:'倒序'},{id:2,name:'升序'}],
|
||||
listQuery: {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
operaUserName: '',
|
||||
ip: '',
|
||||
content:'',
|
||||
result: '',
|
||||
operTime:'',
|
||||
operateType: '',
|
||||
logSort:1,
|
||||
logDesc:1,
|
||||
},
|
||||
rangeDate:[],
|
||||
}
|
||||
},
|
||||
created() {
|
||||
// this.getList()
|
||||
// this.getOperate()
|
||||
},
|
||||
mounted() {
|
||||
this.listQuery.operTime = this.getCurrentDate()+' - '+this.getCurrentDate();
|
||||
this.rangeDate = [this.getCurrentDate(),this.getCurrentDate()]
|
||||
this.getList()
|
||||
},
|
||||
methods: {
|
||||
getStatus(val) {
|
||||
return this.outcomeList[val]
|
||||
},
|
||||
//获取下拉数据
|
||||
getOperate(){
|
||||
// getOperateList().then((response) => {
|
||||
// this.operateList = response.data
|
||||
// })
|
||||
},
|
||||
|
||||
getList() {
|
||||
this.listLoading = true
|
||||
if(this.rangeDate && this.rangeDate.length>0){
|
||||
this.listQuery.operTime = this.rangeDate[0]+' - '+this.rangeDate[1];
|
||||
}
|
||||
getSysLogs(this.listQuery).then((response) => {
|
||||
this.list = response.rows.map(item => {
|
||||
return item
|
||||
})
|
||||
this.total = response.total
|
||||
})
|
||||
setTimeout(()=>{
|
||||
this.listLoading = false
|
||||
},500)
|
||||
},
|
||||
// 查询
|
||||
handleFilter() {
|
||||
this.listQuery.pageNum = 1
|
||||
this.getList()
|
||||
},
|
||||
//重置
|
||||
resetFilter() {
|
||||
this.listQuery={
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
operaUserName: '',
|
||||
ip: '',
|
||||
|
||||
content:'',
|
||||
result: '',
|
||||
operateType: '',
|
||||
logSort:1,
|
||||
logDesc:1,
|
||||
};
|
||||
this.rangeDate=[this.getCurrentDate(),this.getCurrentDate()]
|
||||
this.handleFilter()
|
||||
},
|
||||
// 备份
|
||||
handleBackups() {
|
||||
downloadSysLogs().then(res => {
|
||||
downloadFile({ fileName: '系统日志.sql', fileData: res, fileType: 'text/html;charset=UTF-8' })
|
||||
})
|
||||
|
||||
},
|
||||
//导出
|
||||
handleExport(){
|
||||
|
||||
// exportCarDetail().then(res => {
|
||||
// downloadFile({ fileName: '设备详情.xlsx', fileData: res, fileType: 'application/vnd.ms-excel;charset=utf-8' })
|
||||
// })
|
||||
},
|
||||
getCurrentDate() {
|
||||
let now = new Date();
|
||||
let year = now.getFullYear();
|
||||
let month = now.getMonth() + 1;
|
||||
if(month<10){
|
||||
month = '0'+month
|
||||
}
|
||||
let day = now.getDate();
|
||||
if(day<10){
|
||||
day = '0'+day
|
||||
}
|
||||
return year + "-" + month + "-" + day;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
Loading…
Reference in New Issue