ADD: 修改数据合并逻辑,新增 event-source-polyfill包,实现长连接通信,展示合并进度
This commit is contained in:
@@ -1,33 +1,23 @@
|
||||
<template>
|
||||
<div class='table-box'>
|
||||
<ProTable
|
||||
ref='proTable'
|
||||
:columns='columns'
|
||||
:request-api='getTableList'
|
||||
>
|
||||
<!-- 表格 header 按钮 -->
|
||||
<template #tableHeader>
|
||||
<el-button type='primary' :icon='DataAnalysis'>分析</el-button>
|
||||
<el-button type='primary' :icon='Upload' @click='handleExport'>导出csv</el-button>
|
||||
</template>
|
||||
</ProTable>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<div class="table-box">
|
||||
<ProTable ref="proTable" :columns="columns" :request-api="getTableList">
|
||||
<!-- 表格 header 按钮 -->
|
||||
<template #tableHeader>
|
||||
<el-button type="primary" :icon="DataAnalysis">分析</el-button>
|
||||
<el-button type="primary" :icon="Upload" @click="handleExport">导出csv</el-button>
|
||||
</template>
|
||||
</ProTable>
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang='tsx' name='useProTable'>
|
||||
<script setup lang="tsx" name="useProTable">
|
||||
// 根据实际路径调整
|
||||
import TimeControl from '@/components/TimeControl/index.vue'
|
||||
import {type AuditLog} from '@/api/system/log/interface/log.ts'
|
||||
import ProTable from '@/components/ProTable/index.vue'
|
||||
import {DataAnalysis, Upload} from '@element-plus/icons-vue'
|
||||
import type {ColumnProps, ProTableInstance} from '@/components/ProTable/interface'
|
||||
import {reactive, ref} from 'vue'
|
||||
import {getAuditLog, exportCsv} from '@/api/system/log/index.ts'
|
||||
import {useDownload} from "@/hooks/useDownload";
|
||||
import {exportPqDev} from "@/api/device/device";
|
||||
|
||||
import { DataAnalysis, Upload } from '@element-plus/icons-vue'
|
||||
import type { ColumnProps, ProTableInstance } from '@/components/ProTable/interface'
|
||||
import { reactive, ref } from 'vue'
|
||||
import { exportCsv, getAuditLog } from '@/api/system/log'
|
||||
import { useDownload } from '@/hooks/useDownload'
|
||||
|
||||
// defineOptions({
|
||||
// name: 'log'
|
||||
@@ -39,94 +29,92 @@ const endDate = ref('')
|
||||
const proTable = ref<ProTableInstance>()
|
||||
|
||||
const getTableList = async (params: any) => {
|
||||
let newParams = JSON.parse(JSON.stringify(params))
|
||||
newParams.searchEndTime = endDate.value
|
||||
newParams.searchBeginTime = startDate.value
|
||||
return getAuditLog(newParams)
|
||||
let newParams = JSON.parse(JSON.stringify(params))
|
||||
newParams.searchEndTime = endDate.value
|
||||
newParams.searchBeginTime = startDate.value
|
||||
return getAuditLog(newParams)
|
||||
}
|
||||
|
||||
|
||||
// 表格配置项
|
||||
const columns = reactive<ColumnProps<AuditLog.ReqAuditLogParams>[]>([
|
||||
{type: 'selection', fixed: 'left', width: 70},
|
||||
{type: 'index', fixed: 'left', width: 70, label: '序号'},
|
||||
{
|
||||
prop: 'userName',
|
||||
label: '操作用户',
|
||||
search: {el: 'input'},
|
||||
minWidth: 100,
|
||||
},
|
||||
{
|
||||
prop: 'ip',
|
||||
label: 'IP',
|
||||
minWidth: 120,
|
||||
},
|
||||
{
|
||||
prop: 'logTime',
|
||||
label: '记录时间',
|
||||
minWidth: 180,
|
||||
search: {
|
||||
render: () => {
|
||||
return (
|
||||
<div class='flx-flex-start'>
|
||||
<TimeControl
|
||||
include={['日', '周', '月', '自定义']}
|
||||
default={'月'}
|
||||
onUpdate-dates={handleDateChange}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
},
|
||||
const columns = reactive<ColumnProps[]>([
|
||||
{ type: 'selection', fixed: 'left', width: 70 },
|
||||
{ type: 'index', fixed: 'left', width: 70, label: '序号' },
|
||||
{
|
||||
prop: 'userName',
|
||||
label: '操作用户',
|
||||
search: { el: 'input' },
|
||||
minWidth: 100
|
||||
},
|
||||
},
|
||||
{
|
||||
label: '事件描述',
|
||||
minWidth: 450,
|
||||
render: (scope) => {
|
||||
return (scope.row.userName + '在' + scope.row.logTime + '执行了' + scope.row.reCheckType + scope.row.operate + '操作,结果为' + scope.row.result + '。')
|
||||
{
|
||||
prop: 'ip',
|
||||
label: 'IP',
|
||||
minWidth: 120
|
||||
},
|
||||
{
|
||||
prop: 'logTime',
|
||||
label: '记录时间',
|
||||
minWidth: 180,
|
||||
search: {
|
||||
render: () => {
|
||||
return (
|
||||
<div class="flx-flex-start">
|
||||
<TimeControl
|
||||
include={['日', '周', '月', '自定义']}
|
||||
default={'月'}
|
||||
onUpdate-dates={handleDateChange}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
label: '事件描述',
|
||||
minWidth: 450,
|
||||
render(scope) {
|
||||
return `${scope.row.userName}在${scope.row.logTime}执行了【${scope.row.operateType}】${scope.row.operate}操作,结果为${scope.row.result}。`
|
||||
}
|
||||
},
|
||||
{
|
||||
prop: 'result',
|
||||
label: '事件结果',
|
||||
minWidth: 120
|
||||
},
|
||||
{
|
||||
prop: 'warn',
|
||||
label: '告警标志',
|
||||
minWidth: 100,
|
||||
render: scope => {
|
||||
return (
|
||||
<el-tag type={scope.row.warn == 1 ? 'danger' : 'success'}>
|
||||
{scope.row.warn == 1 ? '已告警' : '未告警'}
|
||||
</el-tag>
|
||||
)
|
||||
}
|
||||
},
|
||||
{
|
||||
prop: 'operateType',
|
||||
label: '日志类型',
|
||||
width: 100
|
||||
}
|
||||
},
|
||||
{
|
||||
prop: 'result',
|
||||
label: '事件结果',
|
||||
minWidth: 120,
|
||||
},
|
||||
{
|
||||
prop: 'warn',
|
||||
label: '告警标志',
|
||||
minWidth: 100,
|
||||
render: scope => {
|
||||
return (
|
||||
<el-tag type={scope.row.warn == 1 ? 'danger' : 'success'}>{scope.row.warn == 1 ? '已告警' : '未告警'}</el-tag>
|
||||
)
|
||||
},
|
||||
},
|
||||
{
|
||||
prop: 'operateType',
|
||||
label: '日志类型',
|
||||
width: 100,
|
||||
},
|
||||
])
|
||||
|
||||
// 处理日期变化的回调函数
|
||||
const handleDateChange = (startDateTemp: string, endDateTemp: string) => {
|
||||
startDate.value = startDateTemp
|
||||
endDate.value = endDateTemp
|
||||
startDate.value = startDateTemp
|
||||
endDate.value = endDateTemp
|
||||
}
|
||||
|
||||
const handleExport = () => {
|
||||
// 获取当前的搜索参数
|
||||
let searchParam = proTable.value?.searchParam || {}
|
||||
// 获取当前的搜索参数
|
||||
let searchParam = proTable.value?.searchParam || {}
|
||||
|
||||
// 将开始时间和结束时间添加到搜索参数中
|
||||
searchParam.searchBeginTime = startDate.value
|
||||
searchParam.searchEndTime = endDate.value
|
||||
// 将开始时间和结束时间添加到搜索参数中
|
||||
searchParam.searchBeginTime = startDate.value
|
||||
searchParam.searchEndTime = endDate.value
|
||||
|
||||
useDownload(exportCsv, '日志列表', searchParam, false, '.csv')
|
||||
useDownload(exportCsv, '日志列表', searchParam, false, '.csv')
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
<style scoped></style>
|
||||
|
||||
Reference in New Issue
Block a user