279 lines
9.3 KiB
Vue
279 lines
9.3 KiB
Vue
<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.grade"
|
|
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 @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 slot-scope="scope">
|
|
<span>{{ (listQuery.pageNum - 1) * listQuery.pageSize + 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="operateDetail" />
|
|
<el-table-column label="异常等级" align="center" prop="grade" />
|
|
<!-- <el-table-column label="事件结果" align="center" prop="failureReason"/> -->
|
|
<el-table-column label="操作类型" align="center" prop="operType" />
|
|
<!--
|
|
<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: '',
|
|
grade: '',
|
|
// 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>
|