init
This commit is contained in:
吴红兵
100
src/views/admin/log/detail.vue
Normal file
100
src/views/admin/log/detail.vue
Normal file
@@ -0,0 +1,100 @@
|
||||
<template>
|
||||
<el-drawer v-model="visible" :title="data.title" size="30%">
|
||||
<div class="w-full">
|
||||
<div class="coding inverse-toggle px-5 pt-4 shadow-lg text-gray-100 text-sm font-mono subpixel-antialiased
|
||||
bg-gray-800 pb-6 pt-4 rounded-lg leading-normal overflow-hidden">
|
||||
<div class="top mb-2 flex">
|
||||
<div class="h-3 w-3 bg-red-500 rounded-full"></div>
|
||||
<div class="ml-2 h-3 w-3 bg-orange-300 rounded-full"></div>
|
||||
<div class="ml-2 h-3 w-3 bg-green-500 rounded-full"></div>
|
||||
</div>
|
||||
<div class="mt-4 flex">
|
||||
<span class="text-green-400">{{ $t('syslog.createTime') }}: </span>
|
||||
<p class="flex-1 typing items-center pl-2 whitespace-normal overflow-hidden break-all">
|
||||
{{ data.createTime }}
|
||||
<br>
|
||||
</p>
|
||||
</div>
|
||||
<div class="mt-4 flex">
|
||||
<span class="text-green-400">{{ $t('syslog.createBy') }}: </span>
|
||||
<p class="flex-1 typing items-center pl-2 whitespace-normal overflow-hidden break-all">
|
||||
{{ data.createBy }}
|
||||
<br>
|
||||
</p>
|
||||
</div>
|
||||
<div class="mt-4 flex">
|
||||
<span class="text-green-400">{{ $t('syslog.requestUri') }}: </span>
|
||||
<p class="flex-1 typing items-center pl-2 whitespace-normal overflow-hidden break-all">
|
||||
{{ data.requestUri }}
|
||||
<br>
|
||||
</p>
|
||||
</div>
|
||||
<div class="mt-4 flex">
|
||||
<span class="text-green-400">{{ $t('syslog.remoteAddr') }}: </span>
|
||||
<p class="flex-1 typing items-center pl-2 whitespace-normal overflow-hidden break-all">
|
||||
{{ data.remoteAddr }}
|
||||
<br>
|
||||
</p>
|
||||
</div>
|
||||
<div class="mt-4 flex">
|
||||
<span class="text-green-400">{{ $t('syslog.method') }}: </span>
|
||||
<p class="flex-1 typing items-center pl-2 whitespace-normal overflow-hidden break-all">
|
||||
{{ data.method }}
|
||||
<br>
|
||||
</p>
|
||||
</div>
|
||||
<div class="mt-4 flex">
|
||||
<span class="text-green-400">{{ $t('syslog.serviceId') }}: </span>
|
||||
<p class="flex-1 typing items-center pl-2 whitespace-normal overflow-hidden break-all">
|
||||
{{ data.serviceId }}
|
||||
<br>
|
||||
</p>
|
||||
</div>
|
||||
<div class="mt-4 flex">
|
||||
<span class="text-green-400">{{ $t('syslog.time') }}: </span>
|
||||
<p class="flex-1 typing items-center pl-2 whitespace-normal overflow-hidden break-all">
|
||||
{{ data.time }}/ms
|
||||
<br>
|
||||
</p>
|
||||
</div>
|
||||
<div class="mt-4 flex">
|
||||
<span class="text-green-400">{{ $t('syslog.ua') }}: </span>
|
||||
<p class="flex-1 typing items-center pl-2 whitespace-normal overflow-hidden break-all">
|
||||
{{ data.userAgent }}
|
||||
<br>
|
||||
</p>
|
||||
</div>
|
||||
<div class="mt-4 flex" v-if="data.params">
|
||||
<span class="text-green-400">{{ $t('syslog.params') }}: </span>
|
||||
<p class="flex-1 typing items-center pl-2 whitespace-normal overflow-hidden break-all">
|
||||
{{ data.params }}
|
||||
<br>
|
||||
</p>
|
||||
</div>
|
||||
<div class="mt-4 flex" v-if="data.exception">
|
||||
<span class="text-green-400">{{ data.logType === '0' ? $t('syslog.result') : $t('syslog.exception') }}: </span>
|
||||
<p class="flex-1 typing items-center pl-2 whitespace-normal overflow-hidden break-all">
|
||||
{{ data.exception }}
|
||||
<br>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-drawer>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts" name="log-detail">
|
||||
const visible = ref(false);
|
||||
|
||||
const data = reactive({} as any);
|
||||
|
||||
const openDialog = (row: any) => {
|
||||
visible.value = true;
|
||||
Object.assign(data, row);
|
||||
};
|
||||
|
||||
// 暴露变量
|
||||
defineExpose({
|
||||
openDialog,
|
||||
});
|
||||
</script>
|
||||
22
src/views/admin/log/i18n/en.ts
Normal file
22
src/views/admin/log/i18n/en.ts
Normal file
@@ -0,0 +1,22 @@
|
||||
export default {
|
||||
syslog: {
|
||||
index: '#',
|
||||
logType: 'logType',
|
||||
title: 'title',
|
||||
remoteAddr: 'remoteAddr',
|
||||
method: 'method',
|
||||
ua: 'browser',
|
||||
serviceId: 'serviceId',
|
||||
time: 'time',
|
||||
params: 'params',
|
||||
createTime: 'createTime',
|
||||
requestUri: 'requestUri',
|
||||
exception: 'exception',
|
||||
createBy: 'createBy',
|
||||
action: 'action',
|
||||
inputLogTypeTip: 'select logType',
|
||||
inputStartPlaceholderTip: 'Start Time',
|
||||
inputEndPlaceholderTip: 'End TIme',
|
||||
result: 'result'
|
||||
},
|
||||
};
|
||||
22
src/views/admin/log/i18n/zh-cn.ts
Normal file
22
src/views/admin/log/i18n/zh-cn.ts
Normal file
@@ -0,0 +1,22 @@
|
||||
export default {
|
||||
syslog: {
|
||||
index: '#',
|
||||
logType: '类型',
|
||||
title: '标题',
|
||||
remoteAddr: 'IP地址',
|
||||
method: '请求方式',
|
||||
ua: '浏览器',
|
||||
serviceId: '客户端',
|
||||
time: '耗时',
|
||||
params: '请求参数',
|
||||
createTime: '请求时间',
|
||||
requestUri: '请求地址',
|
||||
exception: '异常信息',
|
||||
createBy: '操作人',
|
||||
action: '操作',
|
||||
inputLogTypeTip: '请选择类型',
|
||||
inputStartPlaceholderTip: '开始时间',
|
||||
inputEndPlaceholderTip: '结束时间',
|
||||
result: '结果',
|
||||
},
|
||||
};
|
||||
202
src/views/admin/log/index.vue
Normal file
202
src/views/admin/log/index.vue
Normal file
@@ -0,0 +1,202 @@
|
||||
<template>
|
||||
<div class="layout-padding">
|
||||
<div class="layout-padding-auto layout-padding-view">
|
||||
<!-- 顶部折线图-->
|
||||
<log-line-chart/>
|
||||
|
||||
<el-row class="mt-4 ml10" v-show="showSearch">
|
||||
<el-form :inline="true" :model="state.queryForm" @keyup.enter="getDataList" ref="queryRef">
|
||||
<el-form-item :label="$t('syslog.logType')" prop="logType">
|
||||
<el-select :placeholder="$t('syslog.inputLogTypeTip')" clearable
|
||||
v-model="state.queryForm.logType">
|
||||
<el-option :key="item.value" :label="item.label" :value="item.value" v-for="item in log_type"/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('syslog.createTime')" prop="createTime">
|
||||
<el-date-picker
|
||||
:end-placeholder="$t('syslog.inputEndPlaceholderTip')"
|
||||
:start-placeholder="$t('syslog.inputStartPlaceholderTip')"
|
||||
range-separator="To"
|
||||
type="datetimerange"
|
||||
v-model="state.queryForm.createTime"
|
||||
value-format="YYYY-MM-DD HH:mm:ss"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button @click="getDataList" icon="Search" type="primary">{{ $t('common.queryBtn') }}</el-button>
|
||||
<el-button @click="resetQuery" icon="Refresh">{{ $t('common.resetBtn') }}</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-row>
|
||||
|
||||
<el-row>
|
||||
<div class="mb-2" style="width: 100%">
|
||||
<el-button :disabled="multiple" v-auth="'sys_log_del'" @click="handleDelete(selectObjs)" class="ml10"
|
||||
icon="Delete" type="primary">
|
||||
{{ $t('common.delBtn') }}
|
||||
</el-button>
|
||||
<right-toolbar
|
||||
:export="'sys_log_export'"
|
||||
@exportExcel="exportExcel"
|
||||
@queryTable="getDataList"
|
||||
class="ml10"
|
||||
style="float: right; margin-right: 20px"
|
||||
v-model:showSearch="showSearch"
|
||||
></right-toolbar>
|
||||
</div>
|
||||
</el-row>
|
||||
<el-table
|
||||
ref="tableRef"
|
||||
:data="state.dataList"
|
||||
@selection-change="handleSelectionChange"
|
||||
@sort-change="sortChangeHandle"
|
||||
v-loading="state.loading"
|
||||
border
|
||||
:cell-style="tableStyle.cellStyle"
|
||||
:header-cell-style="tableStyle.headerCellStyle"
|
||||
>
|
||||
<el-table-column align="center" type="selection" width="40"/>
|
||||
<el-table-column :label="$t('syslog.index')" type="index" width="60"/>
|
||||
<el-table-column :label="$t('syslog.logType')" show-overflow-tooltip>
|
||||
<template #default="scope">
|
||||
<dict-tag :options="log_type" :value="scope.row.logType"></dict-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column :label="$t('syslog.title')" prop="title" show-overflow-tooltip></el-table-column>
|
||||
<el-table-column :label="$t('syslog.remoteAddr')" prop="remoteAddr" show-overflow-tooltip></el-table-column>
|
||||
<el-table-column :label="$t('syslog.method')" prop="method" show-overflow-tooltip></el-table-column>
|
||||
<el-table-column :label="$t('syslog.time')" prop="time" show-overflow-tooltip>
|
||||
<template #default="scope">
|
||||
<span v-if="scope.row.time">{{ scope.row.time }}/ms</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column :label="$t('syslog.createTime')" prop="createTime" show-overflow-tooltip sortable="custom"
|
||||
width="200"></el-table-column>
|
||||
<el-table-column :label="$t('syslog.createBy')" prop="createBy" show-overflow-tooltip sortable="custom"
|
||||
width="200"></el-table-column>
|
||||
<el-table-column :label="$t('common.action')" width="150">
|
||||
<template #default="scope">
|
||||
<el-button icon="view" @click="LogDetailRef.openDialog(scope.row)" size="small" text type="primary">
|
||||
{{ $t('common.detailBtn') }}
|
||||
</el-button>
|
||||
<el-button v-auth="'sys_log_del'" icon="delete" @click="handleDelete([scope.row.id])" size="small" text
|
||||
type="primary">
|
||||
{{ $t('common.delBtn') }}
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<pagination @current-change="currentChangeHandle" @size-change="sizeChangeHandle"
|
||||
v-bind="state.pagination"></pagination>
|
||||
<log-detail ref="LogDetailRef"></log-detail>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import {BasicTableProps, useTable} from '/@/hooks/table';
|
||||
import {delObj, pageList} from '/@/api/admin/log';
|
||||
import {useI18n} from 'vue-i18n';
|
||||
import {useMessage, useMessageBox} from '/@/hooks/message';
|
||||
import {useDict} from '/@/hooks/dict';
|
||||
|
||||
const LogDetail = defineAsyncComponent(() => import('./detail.vue'));
|
||||
const LogLineChart = defineAsyncComponent(() => import('./line-chart.vue'));
|
||||
|
||||
const LogDetailRef = ref();
|
||||
|
||||
const {log_type} = useDict('log_type');
|
||||
|
||||
const {t} = useI18n();
|
||||
|
||||
// 定义变量内容
|
||||
const queryRef = ref();
|
||||
const showSearch = ref(true);
|
||||
|
||||
// 多选rows
|
||||
const selectObjs = ref([]) as any;
|
||||
// 是否可以多选
|
||||
const multiple = ref(true);
|
||||
let tableRef = ref(null);
|
||||
|
||||
const state: BasicTableProps = reactive<BasicTableProps>({
|
||||
queryForm: {
|
||||
logType: '',
|
||||
createTime: '',
|
||||
serviceId: '',
|
||||
},
|
||||
selectObjs: [],
|
||||
pageList: pageList,
|
||||
descs: ['create_time'],
|
||||
createdIsNeed: false,
|
||||
});
|
||||
|
||||
// table hook
|
||||
const {
|
||||
downBlobFile,
|
||||
getDataList,
|
||||
currentChangeHandle: baseCurrentChangeHandle,
|
||||
sortChangeHandle,
|
||||
sizeChangeHandle,
|
||||
tableStyle
|
||||
} = useTable(state);
|
||||
|
||||
// 分页事件
|
||||
const currentChangeHandle = (page: number) => {
|
||||
// Reset table scroll position to top
|
||||
tableRef.value?.setScrollTop(0);
|
||||
// Call the original handler
|
||||
baseCurrentChangeHandle(page);
|
||||
};
|
||||
|
||||
// 清空搜索条件
|
||||
const resetQuery = () => {
|
||||
queryRef.value?.resetFields();
|
||||
getDataList();
|
||||
};
|
||||
|
||||
// 导出excel
|
||||
const exportExcel = () => {
|
||||
downBlobFile('/admin/log/export', state.queryForm, 'log.xlsx');
|
||||
};
|
||||
|
||||
// 多选事件
|
||||
const handleSelectionChange = (objs: { id: string }[]) => {
|
||||
selectObjs.value = objs.map(({id}) => id);
|
||||
multiple.value = !objs.length;
|
||||
};
|
||||
|
||||
// 删除操作
|
||||
const handleDelete = async (ids: string[]) => {
|
||||
try {
|
||||
await useMessageBox().confirm(t('common.delConfirmText'));
|
||||
} catch {
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
await delObj(ids);
|
||||
getDataList();
|
||||
useMessage().success(t('common.delSuccessText'));
|
||||
} catch (err: any) {
|
||||
useMessage().error(err.msg);
|
||||
}
|
||||
};
|
||||
|
||||
// onMounted 通过路由参数给 serviceId 赋值
|
||||
const route = useRoute();
|
||||
onMounted(() => {
|
||||
const {serviceId} = route.query;
|
||||
if (serviceId) {
|
||||
state.queryForm.serviceId = serviceId;
|
||||
}
|
||||
getDataList();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
pre code.hljs {
|
||||
width: 65%;
|
||||
}
|
||||
</style>
|
||||
202
src/views/admin/log/line-chart.vue
Normal file
202
src/views/admin/log/line-chart.vue
Normal file
@@ -0,0 +1,202 @@
|
||||
<template>
|
||||
<v-chart class="w-full h-80" :option="option" />
|
||||
</template>
|
||||
<script setup lang="ts" name="log-line-chart">
|
||||
import VChart from 'vue-echarts';
|
||||
import { formatPast } from '/@/utils/formatTime';
|
||||
import { getSum } from '/@/api/admin/log';
|
||||
import { use } from 'echarts/core';
|
||||
import { LineChart } from 'echarts/charts';
|
||||
import { GridComponent, LegendComponent, TitleComponent, ToolboxComponent, TooltipComponent } from 'echarts/components';
|
||||
import { CanvasRenderer } from 'echarts/renderers';
|
||||
|
||||
use([TitleComponent, TooltipComponent, LegendComponent, ToolboxComponent, GridComponent, LineChart, CanvasRenderer]);
|
||||
|
||||
const option = reactive({
|
||||
title: {
|
||||
textStyle: {
|
||||
fontSize: 16,
|
||||
fontWeight: 500,
|
||||
color: '#303133',
|
||||
},
|
||||
padding: [20, 0, 0, 20],
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
backgroundColor: '#ffffff',
|
||||
borderRadius: 8,
|
||||
padding: [12, 16],
|
||||
borderWidth: 0,
|
||||
shadowColor: 'rgba(0, 0, 0, 0.1)',
|
||||
shadowBlur: 12,
|
||||
shadowOffsetY: 4,
|
||||
textStyle: {
|
||||
color: '#303133',
|
||||
},
|
||||
axisPointer: {
|
||||
type: 'line',
|
||||
lineStyle: {
|
||||
color: '#ebeef5',
|
||||
width: 1,
|
||||
type: 'dashed',
|
||||
},
|
||||
},
|
||||
},
|
||||
legend: {
|
||||
data: ['成功', '失败'],
|
||||
icon: 'circle',
|
||||
itemWidth: 8,
|
||||
itemHeight: 8,
|
||||
textStyle: {
|
||||
color: '#606266',
|
||||
fontSize: 12,
|
||||
},
|
||||
right: '20px',
|
||||
top: '20px',
|
||||
},
|
||||
grid: {
|
||||
left: '3%',
|
||||
right: '4%',
|
||||
bottom: '3%',
|
||||
top: '15%',
|
||||
containLabel: true,
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
boundaryGap: false,
|
||||
data: [],
|
||||
axisLine: {
|
||||
show: false,
|
||||
},
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
axisLabel: {
|
||||
color: '#909399',
|
||||
fontSize: 12,
|
||||
margin: 16,
|
||||
},
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: '#ebeef5',
|
||||
type: 'dashed',
|
||||
},
|
||||
},
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
color: '#ebeef5',
|
||||
type: 'dashed',
|
||||
},
|
||||
},
|
||||
axisLabel: {
|
||||
color: '#909399',
|
||||
fontSize: 12,
|
||||
margin: 16,
|
||||
},
|
||||
axisLine: {
|
||||
show: false,
|
||||
},
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '成功',
|
||||
type: 'line',
|
||||
stack: 'Total',
|
||||
data: [],
|
||||
smooth: true,
|
||||
symbol: 'circle',
|
||||
symbolSize: 8,
|
||||
itemStyle: {
|
||||
color: '#79bbff',
|
||||
borderColor: '#fff',
|
||||
borderWidth: 2,
|
||||
},
|
||||
lineStyle: {
|
||||
width: 3,
|
||||
},
|
||||
areaStyle: {
|
||||
color: {
|
||||
type: 'linear',
|
||||
x: 0,
|
||||
y: 0,
|
||||
x2: 0,
|
||||
y2: 1,
|
||||
colorStops: [
|
||||
{
|
||||
offset: 0,
|
||||
color: 'rgba(121, 187, 255, 0.2)',
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: 'rgba(121, 187, 255, 0.02)',
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
name: '失败',
|
||||
type: 'line',
|
||||
stack: 'x',
|
||||
data: [],
|
||||
smooth: true,
|
||||
symbol: 'circle',
|
||||
symbolSize: 8,
|
||||
itemStyle: {
|
||||
color: '#909399',
|
||||
borderColor: '#fff',
|
||||
borderWidth: 2,
|
||||
},
|
||||
lineStyle: {
|
||||
width: 3,
|
||||
},
|
||||
areaStyle: {
|
||||
color: {
|
||||
type: 'linear',
|
||||
x: 0,
|
||||
y: 0,
|
||||
x2: 0,
|
||||
y2: 1,
|
||||
colorStops: [
|
||||
{
|
||||
offset: 0,
|
||||
color: 'rgba(144, 147, 153, 0.2)',
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: 'rgba(144, 147, 153, 0.02)',
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
});
|
||||
|
||||
interface LogSumItem {
|
||||
createTime: string;
|
||||
'0'?: number;
|
||||
'9'?: number;
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
getSum().then((res) => {
|
||||
option.xAxis.data = res.data.map((item: LogSumItem) => formatPast(new Date(item.createTime), 'mm-dd'));
|
||||
option.series[0].data = res.data.map((item: LogSumItem) => item['0'] || 0);
|
||||
option.series[1].data = res.data.map((item: LogSumItem) => item['9'] || 0);
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
:deep(.echarts) {
|
||||
background: transparent;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user