代码合并

This commit is contained in:
stt
2025-10-11 09:46:55 +08:00
parent ccf3bf27f4
commit 0bb7577a92
2 changed files with 777 additions and 0 deletions

View File

@@ -0,0 +1,180 @@
<template>
<div class="default-main">
<TableHeader datePicker showExport :showReset="false" ref="TableHeaderRef">
<template v-slot:select>
<el-form :inline="true" :model="formData" label-width="90px" class="">
<el-form-item label="用户名:">
<el-select v-model="formData.loginName" placeholder="用户名" clearable filterable>
<el-option
v-for="item in userName"
:key="item.id"
:label="item.loginName"
:value="item.loginName"
></el-option>
</el-select>
</el-form-item>
<el-form-item label="事件类型:">
<el-select v-model="formData.type" placeholder="事件类型" clearable>
<el-option
v-for="item in eventType"
:key="item.id"
:label="item.label"
:value="item.id"
></el-option>
</el-select>
</el-form-item>
<el-form-item label="操作类型:">
<el-select v-model="formData.operateType" placeholder="操作类型" clearable>
<el-option
v-for="item in operationType"
:key="item.value"
:label="item.value"
:value="item.value"
></el-option>
</el-select>
</el-form-item>
<el-form-item label="操作结果:">
<el-select v-model="formData.result" placeholder="操作结果" clearable>
<el-option
v-for="item in resultList"
:key="item.id"
:label="item.label"
:value="item.id"
></el-option>
</el-select>
</el-form-item>
</el-form>
</template>
<template #operation>
<!-- <el-button type="primary" @click="backups">文件备份</el-button>
<el-button type="primary" @click="details">统计</el-button> -->
</template>
</TableHeader>
<Table ref="tableRef" />
</div>
</template>
<script setup lang="ts">
import { ref, onMounted, provide, nextTick } from 'vue'
import TableStore from '@/utils/tableStore'
import Table from '@/components/table/index.vue'
import TableHeader from '@/components/table/header/index.vue'
import {
getAllUserList,
getAuditLog,
censusAuditLog,
logFileWriter,
recoverLogFile,
getMemoInfo,
getSysConfig
} from '/@/api/auditManage/auditList'
// import { ElMessage } from 'element-ui'
defineOptions({
name: 'admin/BusinessAdministrator/Audit/Operations/Management'
})
interface UserInfo {
id: number | string
loginName: string
}
const userName = ref<UserInfo[]>([])
const TableHeaderRef = ref()
// 响应式数据定义
const formData = reactive({
loginName: '', //用户名
type: '', //事件类型
operateType: '', //操作类型
result: null,
searchBeginTime: '', //开始
searchEndTime: '', //结束
sortBy: '',
sortName: '',
orderBy: '',
pageNum: 1,
pageSize: 100
})
const formLine = reactive({
loginName: '', //用户名
type: '', //事件类型
operateType: '', //操作类型
searchBeginTime: '', //开始
searchEndTime: '', //结束
sortBy: '',
sortName: '',
orderBy: '',
pageNum: 1,
pageSize: 20
})
// 其他响应式数据
const loading = ref(false)
const loading1 = ref(false)
const view = ref(false)
const view1 = ref(false)
const flg = ref(true)
const showMqtt = ref(false)
const zoom = ref('') //图表焦点校验
const vh = ref(undefined)
const item = ref(['', ''])
const item1 = ref(['', ''])
const resultList = ref([
{ id: 1, label: '成功' },
{ id: 0, label: '失败' }
])
const datamock = ref([])
const statisticsData = ref([])
const eventType = ref([
{
id: 0,
label: '业务事件类型'
},
{
id: 1,
label: '系统事件类型'
}
]) //事件类型
const operationType = ref([
{ id: 1, value: '查询' },
{ id: 2, value: '新增' },
{ id: 3, value: '更新' },
{ id: 4, value: '删除' },
{ id: 5, value: '认证' },
{ id: 6, value: '注销' },
{ id: 7, value: '上传' },
{ id: 8, value: '下载' },
{ id: 9, value: '越权访问' }
]) //操作类型
const timeFlag = ref('')
const total = ref(undefined)
const statisticsTotal = ref(undefined)
const tableStore: any = new TableStore({
url: '/system-boot/audit/getAuditLog',
method: 'POST',
column: [
{ field: 'userName', title: '登录用户' },
{ field: 'ip', title: '登录ip' },
{ field: 'time', title: '登录时间' }
]
})
tableStore.table.params.loginName = ''
tableStore.table.params.type = ''
tableStore.table.params.operateType = ''
tableStore.table.params.result = ''
provide('tableStore', tableStore)
onMounted(() => {
tableStore.index()
search()
})
//下拉框查询
const search = () => {
getAllUserList().then(res => {
userName.value = res.data
})
}
</script>

View File

@@ -0,0 +1,597 @@
<template>
<div class="pd10">
<div v-show="flg" v-loading="loading" element-loading-text="数据加载中">
<el-form :inline="true" :model="formData" class="demo-form-inline">
<el-form-item>
<Timeinterval ref="interval" :interval="3"></Timeinterval>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="onSubmit" icon="el-icon-search">查询</el-button>
</el-form-item>
<el-form-item style="float: right">
<el-button type="primary" icon="el-icon-download" @click="exportEvent">导出</el-button>
<el-button type="primary" @click="backups">文件备份</el-button>
<!-- <el-button type="primary" @click="restore">文件恢复</el-button> -->
<el-button type="primary" @click="details">统计</el-button>
</el-form-item>
<el-form-item>
<el-button type="text" @click="closeHandle">
条件筛选
<i :class="!view ? 'el-icon-arrow-down' : 'el-icon-arrow-right'"></i>
</el-button>
</el-form-item>
</el-form>
<div class="container" id="container">
<i @click="closeHandle" class="el-icon-circle-close coles"></i>
<el-form :inline="true" :model="formData" label-width="90px" class="">
<el-form-item label="用户名:">
<el-select v-model="formData.loginName" placeholder="用户名" clearable filterable>
<el-option
v-for="item in userName"
:key="item.id"
:label="item.loginName"
:value="item.loginName"
></el-option>
</el-select>
</el-form-item>
<el-form-item label="事件类型:">
<el-select v-model="formData.type" placeholder="事件类型" clearable>
<el-option
v-for="item in eventType"
:key="item.id"
:label="item.label"
:value="item.id"
></el-option>
</el-select>
</el-form-item>
<el-form-item label="操作类型:">
<el-select v-model="formData.operateType" placeholder="操作类型" clearable>
<el-option
v-for="item in operationType"
:key="item.value"
:label="item.value"
:value="item.value"
></el-option>
</el-select>
</el-form-item>
<el-form-item label="操作结果:">
<el-select v-model="formData.result" placeholder="操作结果" clearable>
<el-option
v-for="item in resultList"
:key="item.id"
:label="item.label"
:value="item.id"
></el-option>
</el-select>
</el-form-item>
</el-form>
</div>
<vxe-table
size="mini"
stripe
:row-config="{ isCurrent: true, isHover: true }"
border
ref="management"
@sort-change="sortChangeEvent"
header-cell-class-name="table_header"
show-overflow="tooltip"
:data="datamock"
style="width: 100%"
:height="vh + 'px'"
>
<vxe-table-column
field="time"
title="操作时间"
align="center"
sortable
width="160"
show-overflow
></vxe-table-column>
<vxe-table-column field="userName" title="操作人员" align="center" width="120"></vxe-table-column>
<vxe-table-column
field="operate"
title="操作类型"
align="center"
sortable
width="220"
></vxe-table-column>
<vxe-table-column field="describe" title="事件描述" align="center"></vxe-table-column>
<vxe-table-column field="type" title="事件类型" align="center" sortable width="120"></vxe-table-column>
<vxe-table-column
field="result"
title="操作结果"
align="center"
sortable
width="120"
></vxe-table-column>
<vxe-table-column field="ip" title="操作IP" width="150" align="center"></vxe-table-column>
<vxe-table-column field="level" title="事件等级" align="center" sortable width="120"></vxe-table-column>
</vxe-table>
<el-pagination
background
align="right"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="formData.pageNum"
:page-sizes="[100, 200, 300, 500, 1000]"
:page-size="formData.pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="total"
class="mt10"
></el-pagination>
</div>
<div v-if="!flg" v-loading="loading1" element-loading-text="数据加载中">
<el-form :inline="true" :model="formLine" class="demo-form-inline">
<el-form-item>
<Time ref="intervaltime" :interval="3"></Time>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="OnSubmit" icon="el-icon-search">查询</el-button>
</el-form-item>
<el-form-item style="position: absolute; right: 10px; float: right">
<el-button type="primary" icon="el-icon-download" @click="exportEventstatistics">导出</el-button>
<el-button type="primary" @click="back">返回</el-button>
</el-form-item>
<el-form-item>
<el-button type="text" @click="closeHandle1">
条件筛选
<i :class="!view1 ? 'el-icon-arrow-down' : 'el-icon-arrow-right'"></i>
</el-button>
</el-form-item>
</el-form>
<div class="container" id="container1">
<i @click="closeHandle1" class="el-icon-circle-close coles"></i>
<el-form :inline="true" :model="formData" label-width="90px" class="">
<el-form-item label="用户名:">
<el-select v-model="formLine.loginName" placeholder="用户名" clearable filterable>
<el-option
v-for="item in userName"
:key="item.id"
:label="item.loginName"
:value="item.loginName"
></el-option>
</el-select>
</el-form-item>
<el-form-item label="事件类型:">
<el-select v-model="formLine.type" placeholder="用户名" clearable>
<el-option
v-for="item in eventType"
:key="item.id"
:label="item.label"
:value="item.id"
></el-option>
</el-select>
</el-form-item>
<el-form-item label="操作类型:">
<el-select v-model="formLine.operateType" placeholder="用户名" clearable>
<el-option
v-for="item in operationType"
:key="item.value"
:label="item.value"
:value="item.value"
></el-option>
</el-select>
</el-form-item>
</el-form>
</div>
<vxe-table
size="mini"
:row-config="{ isCurrent: true, isHover: true }"
border
ref="management1"
header-cell-class-name="table_header"
:data="statisticsData"
style="width: 100%"
:height="vh + 'px'"
>
<vxe-table-column field="loginName" title="操作人员" align="center"></vxe-table-column>
<vxe-table-column field="operateType" title="事件类型" align="center"></vxe-table-column>
<vxe-table-column field="count" title="事件总数" align="center"></vxe-table-column>
</vxe-table>
<el-pagination
background
align="right"
@size-change="handleSizeChange1"
@current-change="handleCurrentChange1"
:current-page="formLine.pageNum"
:page-sizes="[20, 30, 40, 50, 100]"
:page-size="formLine.pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="statisticsTotal"
class="mt10"
></el-pagination>
</div>
<MqttWs v-if="showMqtt" />
</div>
</template>
<script>
import Timeinterval from '@/views/components/Timeinterval.vue'
import Time from '@/views/components/Time.vue'
import {
getAllUserList,
getAuditLog,
censusAuditLog,
logFileWriter,
recoverLogFile,
getMemoInfo,
getSysConfig
} from '@/api/AuditManagement/AuditManagement'
import MqttWs from '@/components/Mqtt/mqttWs.vue'
export default {
components: {
Timeinterval,
Time,
MqttWs
},
props: {},
data() {
return {
loading: false,
loading1: false,
view: false,
view1: false,
flg: true,
showMqtt:false,
zoom: '', //图表焦点校验
vh: undefined,
formData: {
loginName: '', //用户名
type: '', //事件类型
operateType: '', //操作类型
result: null,
searchBeginTime: '', //开始
searchEndTime: '', //结束
sortBy: '',
sortName: '',
orderBy: '',
pageNum: 1,
pageSize: 100
},
formLine: {
loginName: '', //用户名
type: '', //事件类型
operateType: '', //操作类型
searchBeginTime: '', //开始
searchEndTime: '', //结束
sortBy: '',
sortName: '',
orderBy: '',
pageNum: 1,
pageSize: 20
},
item: ['', ''],
item1: ['', ''],
userName: [], //
resultList: [
{ id: 1, label: '成功' },
{ id: 0, label: '失败' }
],
datamock: [],
statisticsData: [],
eventType: [
{
id: 0,
label: '业务事件类型'
},
{
id: 1,
label: '系统事件类型'
}
], //事件类型
operationType: [
{ id: 1, value: '查询' },
{ id: 2, value: '新增' },
{ id: 3, value: '更新' },
{ id: 4, value: '删除' },
{ id: 5, value: '认证' },
{ id: 6, value: '注销' },
{ id: 7, value: '上传' },
{ id: 8, value: '下载' },
{ id: 9, value: '越权访问' }
], //操作类型
timeFlag: '',
total: undefined,
statisticsTotal: undefined
}
},
created() {
this.search()
},
mounted() {
this.zoom = 1 / document.body.style.zoom
window.addEventListener('resize', () => {
this.zoom = 1 / document.body.style.zoom
})
if(process.env.VUE_APP_HB == 'hbqr'){
this.showMqtt = JSON.parse(window.sessionStorage.getItem('Info')).roleCode.includes('audit_manager')
}
this.setHeight()
window.addEventListener('resize', this.setHeight)
this.onSubmit()
},
beforeDestroy() {
window.removeEventListener('resize', this.setHeight)
},
methods: {
setHeight() {
this.vh = window.sessionStorage.getItem('appheight') - 95
},
//条件筛选
closeHandle() {
if (this.view) {
this.view = false
} else {
this.view = true
}
//console.log('关闭和展开');
const dom = document.getElementById('container')
const closeDom = document.getElementsByClassName('close')[0]
if (!dom.className.match(/(?:^|\s)expend(?!\S)/)) {
dom.className = 'container expend'
} else {
dom.className = 'container close-container'
}
},
closeHandle1() {
if (this.view1) {
this.view1 = false
} else {
this.view1 = true
}
//console.log('关闭和展开');
const dom = document.getElementById('container1')
const closeDom = document.getElementsByClassName('close')[0]
if (!dom.className.match(/(?:^|\s)expend(?!\S)/)) {
dom.className = 'container expend'
} else {
dom.className = 'container close-container'
}
},
//统计
details() {
this.flg = false
setTimeout(() => {
this.OnSubmit()
}, 0)
},
OnSubmit() {
this.loading1 = true
this.item1 = this.$refs.intervaltime.timeValue
this.formLine.searchBeginTime = this.item1[0]
this.formLine.searchEndTime = this.item1[1]
censusAuditLog(this.formLine).then(res => {
this.statisticsData = res.data.records
this.statisticsTotal = res.data.total
this.loading1 = false
})
},
// 排序
sortChangeEvent({ column, field, order }) {
this.formData.sortName = column.title
this.formLine.sortName = column.title
this.formData.sortBy = field == 'operate' ? 'operate_type' : field == 'time' ? 'create_time' : field
this.formLine.sortBy = field == 'operate' ? 'operate_type' : field == 'time' ? 'create_time' : field
this.formData.orderBy = order
this.formLine.orderBy = order
this.onSubmit()
},
//下拉框查询
search() {
getAllUserList().then(res => {
this.userName = res.data
})
},
//返回
back() {
this.flg = true
this.onSubmit()
},
//查询
onSubmit() {
this.loading = true
this.item = this.$refs.interval.timeValue
this.formData.searchBeginTime = this.item[0]
this.formData.searchEndTime = this.item[1]
getAuditLog(this.formData).then(res => {
this.datamock = res.data.records
this.total = res.data.total
this.loading = false
this.getLogSize()
})
},
//查询日志大小
getLogSize(){
getMemoInfo().then(res => {
getSysConfig().then(re=>{
if (res.data>re.data.logSize) {
this.$message({
showClose: true,
duration: 0,
message: '日志表存储空间已超过'+re.data.logSize+'(M)请及时备份清理!',
type: 'warning'
})
}
})
})
},
//备份
backups() {
this.loading = true
logFileWriter().then(res => {})
setTimeout(() => {
this.$message({
type: 'success',
message: '文件备份成功'
})
this.loading = false
}, 50000)
},
//恢复
restore() {
this.loading = true
recoverLogFile().then(res => {})
setTimeout(() => {
this.$message({
type: 'success',
message: '文件恢复成功'
})
this.loading = false
}, 50000)
},
//每页条数改变时触发 选择一页显示多少行
handleSizeChange(val) {
this.formData.pageSize = val
this.onSubmit()
},
//当前页改变时触发 跳转其他页
handleCurrentChange(val) {
this.formData.pageNum = val
this.onSubmit()
},
//每页条数改变时触发 选择一页显示多少行
handleSizeChange1(val) {
this.formLine.pageSize = val
this.OnSubmit()
},
//当前页改变时触发 跳转其他页
handleCurrentChange1(val) {
this.formLine.pageNum = val
this.OnSubmit()
},
//导出
exportEvent() {
getAuditLog({
loginName: this.formData.loginName,
type: this.formData.type,
operateType: this.formData.operateType,
searchBeginTime: this.formData.searchBeginTime,
searchEndTime: this.formData.searchEndTime,
sortBy: this.formData.sortBy,
sortName: this.formData.sortName,
orderBy: this.formData.orderBy,
export:true,
pageNum: 1,
pageSize: this.total
}).then(res => {
this.$refs.management.exportData({
filename: 'export', // 文件名字
sheetName: 'Sheet1',
type: 'xlsx', //导出文件类型 xlsx 和 csv
useStyle: true,
data: res.data.records // 数据源 // 过滤那个字段导出
// columnFilterMethod: function (column, $columnIndex) {
// return !(column.$columnIndex === 0);
// },
})
})
},
exportEventstatistics() {
censusAuditLog({
loginName: this.formLine.loginName,
type: this.formLine.type,
operateType: this.formLine.operateType,
searchBeginTime: this.formLine.searchBeginTime,
searchEndTime: this.formLine.searchEndTime,
pageNum: 1,
export:true,
pageSize: this.statisticsTotal
}).then(res => {
this.$refs.management1.exportData({
filename: 'export', // 文件名字
sheetName: 'Sheet1',
type: 'xlsx', //导出文件类型 xlsx 和 csv
useStyle: true,
data: res.data.records // 数据源 // 过滤那个字段导出
// columnFilterMethod: function (column, $columnIndex) {
// return !(column.$columnIndex === 0);
// },
})
})
}
},
computed: {},
watch: {}
}
</script>
<style lang="less" scoped>
@import url('../../../styles/comStyle.less');
::v-deep .el-form-item--small .el-form-item__content,
.el-form-item--small .el-form-item__label {
height: 32px;
}
::v-deep .vxe-table .cell {
text-align: center;
}
.svgIcon {
display: flex;
justify-content: end;
}
.back {
position: absolute;
right: 10px;
float: right;
}
.container {
position: absolute;
/* margin: auto; */
top: 0;
right: 0;
z-index: 2000;
width: 50%;
height: 0;
overflow: auto;
background-color: #e4e7ebb9;
scroll-behavior: smooth;
-radius: 20px;
}
/* 隐藏滚动条 */
::-webkit-scrollbar {
display: block;
}
.expend {
animation: expend ease 5s forwards;
}
.close-container {
animation: no-expend ease 1s forwards;
}
@keyframes expend {
from {
top: 0;
height: auto;
}
to {
top: 0;
height: auto;
}
}
@keyframes no-expend {
from {
top: 0;
height: 20%;
}
to {
top: 0;
height: 0;
}
}
.coles {
position: absolute;
right: 0;
font-size: 20px;
cursor: pointer;
}
</style>