mirror of
https://github.com/pure-admin/vue-pure-admin.git
synced 2025-06-06 16:37:18 +08:00
feat: 添加系统监控-系统日志
This commit is contained in:
xiaoxian521
parent
6288e81130
commit
ac0d75cbdf
@ -95,7 +95,7 @@ const systemMonitorRouter = {
|
|||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: "/monitor/system-logs",
|
path: "/monitor/system-logs",
|
||||||
component: "monitor/logs/system",
|
component: "monitor/logs/system/index",
|
||||||
name: "SystemLog",
|
name: "SystemLog",
|
||||||
meta: {
|
meta: {
|
||||||
icon: "ri:file-search-line",
|
icon: "ri:file-search-line",
|
||||||
|
|||||||
@ -757,7 +757,7 @@ export default defineFakeRoute([
|
|||||||
title: "menus.hsSystemLog",
|
title: "menus.hsSystemLog",
|
||||||
name: "SystemLog",
|
name: "SystemLog",
|
||||||
path: "/monitor/system-logs",
|
path: "/monitor/system-logs",
|
||||||
component: "monitor/logs/system",
|
component: "monitor/logs/system/index",
|
||||||
rank: null,
|
rank: null,
|
||||||
redirect: "",
|
redirect: "",
|
||||||
icon: "ri:file-search-line",
|
icon: "ri:file-search-line",
|
||||||
@ -1138,5 +1138,63 @@ export default defineFakeRoute([
|
|||||||
}
|
}
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
},
|
||||||
|
// 系统日志
|
||||||
|
{
|
||||||
|
url: "/system-logs",
|
||||||
|
method: "post",
|
||||||
|
response: ({ body }) => {
|
||||||
|
let list = [
|
||||||
|
{
|
||||||
|
id: 1, // 日志ID
|
||||||
|
/**
|
||||||
|
* 日志级别
|
||||||
|
* 0 debug调试（最低级别的日志，用于调试和开发阶段）
|
||||||
|
* 1 info信息（默认级别，用于记录一般的信息）
|
||||||
|
* 2 warn警告（表示可能出现的问题或潜在的错误，但不会影响系统的正常运行）
|
||||||
|
* 3 error错误（表示发生了错误，但不会导致系统崩溃）
|
||||||
|
* 4 fatal致命（最高级别的日志，表示发生了严重错误，导致系统无法继续运行）
|
||||||
|
*/
|
||||||
|
level: 1,
|
||||||
|
module: "菜单管理", // 所属模块
|
||||||
|
url: "/menu", // 请求接口
|
||||||
|
method: "post", // 请求方法
|
||||||
|
ip: faker.internet.ipv4(),
|
||||||
|
address: "中国河南省信阳市",
|
||||||
|
system: "macOS",
|
||||||
|
browser: "Chrome",
|
||||||
|
/**
|
||||||
|
* 请求耗时（单位：ms 毫秒）
|
||||||
|
* 正常耗时：一般认为在几百毫秒（0.1-0.5秒）范围内的请求耗时较为正常
|
||||||
|
* 较慢耗时：在1秒以上的耗时可以被认为是较慢的请求，但具体是否较慢还需要根据具体业务场景和性能要求来判断
|
||||||
|
*/
|
||||||
|
takesTime: 10,
|
||||||
|
requestTime: new Date() // 请求时间
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 2,
|
||||||
|
level: 0,
|
||||||
|
module: "地图",
|
||||||
|
url: "/get-map-info",
|
||||||
|
method: "get",
|
||||||
|
ip: faker.internet.ipv4(),
|
||||||
|
address: "中国广东省深圳市",
|
||||||
|
system: "Windows",
|
||||||
|
browser: "Firefox",
|
||||||
|
takesTime: 1200,
|
||||||
|
requestTime: new Date()
|
||||||
|
}
|
||||||
|
];
|
||||||
|
list = list.filter(item => item.module.includes(body?.module));
|
||||||
|
return {
|
||||||
|
success: true,
|
||||||
|
data: {
|
||||||
|
list,
|
||||||
|
total: list.length, // 总条目数
|
||||||
|
pageSize: 10, // 每页显示条目个数
|
||||||
|
currentPage: 1 // 当前页数
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}
|
||||||
}
|
}
|
||||||
]);
|
]);
|
||||||
|
|||||||
@ -63,3 +63,8 @@ export const getLoginLogsList = (data?: object) => {
|
|||||||
export const getOperationLogsList = (data?: object) => {
|
export const getOperationLogsList = (data?: object) => {
|
||||||
return http.request<ResultTable>("post", "/operation-logs", { data });
|
return http.request<ResultTable>("post", "/operation-logs", { data });
|
||||||
};
|
};
|
||||||
|
|
||||||
|
/** 获取系统监控-系统日志列表 */
|
||||||
|
export const getSystemLogsList = (data?: object) => {
|
||||||
|
return http.request<ResultTable>("post", "/system-logs", { data });
|
||||||
|
};
|
||||||
|
|||||||
@ -82,10 +82,10 @@ export function useRole(tableRef: Ref) {
|
|||||||
},
|
},
|
||||||
{
|
{
|
||||||
label: "操作时间",
|
label: "操作时间",
|
||||||
prop: "loginTime",
|
prop: "operatingTime",
|
||||||
minWidth: 180,
|
minWidth: 180,
|
||||||
formatter: ({ loginTime }) =>
|
formatter: ({ operatingTime }) =>
|
||||||
dayjs(loginTime).format("YYYY-MM-DD HH:mm:ss")
|
dayjs(operatingTime).format("YYYY-MM-DD HH:mm:ss")
|
||||||
}
|
}
|
||||||
];
|
];
|
||||||
|
|
||||||
|
|||||||
@ -1,9 +0,0 @@
|
|||||||
<script setup lang="ts">
|
|
||||||
defineOptions({
|
|
||||||
name: "SystemLog"
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<div>正在开发中...</div>
|
|
||||||
</template>
|
|
||||||
228
src/views/monitor/logs/system/hook.tsx
Normal file
228
src/views/monitor/logs/system/hook.tsx
Normal file
@ -0,0 +1,228 @@
|
|||||||
|
import dayjs from "dayjs";
|
||||||
|
import { message } from "@/utils/message";
|
||||||
|
import { getSystemLogsList } from "@/api/system";
|
||||||
|
import type { PaginationProps } from "@pureadmin/table";
|
||||||
|
import { type Ref, reactive, ref, onMounted, toRaw } from "vue";
|
||||||
|
import { getKeyList, useCopyToClipboard } from "@pureadmin/utils";
|
||||||
|
import Info from "@iconify-icons/ri/question-line";
|
||||||
|
|
||||||
|
export function useRole(tableRef: Ref) {
|
||||||
|
const form = reactive({
|
||||||
|
module: "",
|
||||||
|
requestTime: ""
|
||||||
|
});
|
||||||
|
const dataList = ref([]);
|
||||||
|
const loading = ref(true);
|
||||||
|
const selectedNum = ref(0);
|
||||||
|
const { copied, update } = useCopyToClipboard();
|
||||||
|
|
||||||
|
const pagination = reactive<PaginationProps>({
|
||||||
|
total: 0,
|
||||||
|
pageSize: 10,
|
||||||
|
currentPage: 1,
|
||||||
|
background: true
|
||||||
|
});
|
||||||
|
|
||||||
|
// const getLevelType = (type, text = false) => {
|
||||||
|
// switch (type) {
|
||||||
|
// case 0:
|
||||||
|
// return text ? "debug" : "primary";
|
||||||
|
// case 1:
|
||||||
|
// return text ? "info" : "success";
|
||||||
|
// case 2:
|
||||||
|
// return text ? "warn" : "info";
|
||||||
|
// case 3:
|
||||||
|
// return text ? "error" : "warning";
|
||||||
|
// case 4:
|
||||||
|
// return text ? "fatal" : "danger";
|
||||||
|
// }
|
||||||
|
// };
|
||||||
|
|
||||||
|
const columns: TableColumnList = [
|
||||||
|
{
|
||||||
|
label: "勾选列", // 如果需要表格多选，此处label必须设置
|
||||||
|
type: "selection",
|
||||||
|
fixed: "left",
|
||||||
|
reserveSelection: true // 数据刷新后保留选项
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "ID",
|
||||||
|
prop: "id",
|
||||||
|
minWidth: 90
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "所属模块",
|
||||||
|
prop: "module",
|
||||||
|
minWidth: 100
|
||||||
|
},
|
||||||
|
{
|
||||||
|
headerRenderer: () => (
|
||||||
|
<span class="flex-c">
|
||||||
|
请求接口
|
||||||
|
<iconifyIconOffline
|
||||||
|
icon={Info}
|
||||||
|
class="ml-1 cursor-help"
|
||||||
|
v-tippy={{
|
||||||
|
content: "双击下面请求接口进行拷贝"
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</span>
|
||||||
|
),
|
||||||
|
prop: "url",
|
||||||
|
minWidth: 140
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "请求方法",
|
||||||
|
prop: "method",
|
||||||
|
minWidth: 140
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "IP 地址",
|
||||||
|
prop: "ip",
|
||||||
|
minWidth: 100
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "地点",
|
||||||
|
prop: "address",
|
||||||
|
minWidth: 140
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "操作系统",
|
||||||
|
prop: "system",
|
||||||
|
minWidth: 100
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "浏览器类型",
|
||||||
|
prop: "browser",
|
||||||
|
minWidth: 100
|
||||||
|
},
|
||||||
|
// {
|
||||||
|
// label: "级别",
|
||||||
|
// prop: "level",
|
||||||
|
// minWidth: 90,
|
||||||
|
// cellRenderer: ({ row, props }) => (
|
||||||
|
// <el-tag size={props.size} type={getLevelType(row.level)} effect="plain">
|
||||||
|
// {getLevelType(row.level, true)}
|
||||||
|
// </el-tag>
|
||||||
|
// )
|
||||||
|
// },
|
||||||
|
{
|
||||||
|
label: "请求耗时",
|
||||||
|
prop: "takesTime",
|
||||||
|
minWidth: 100,
|
||||||
|
cellRenderer: ({ row, props }) => (
|
||||||
|
<el-tag
|
||||||
|
size={props.size}
|
||||||
|
type={row.takesTime < 1000 ? "success" : "warning"}
|
||||||
|
effect="plain"
|
||||||
|
>
|
||||||
|
{row.takesTime} ms
|
||||||
|
</el-tag>
|
||||||
|
)
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "请求时间",
|
||||||
|
prop: "requestTime",
|
||||||
|
minWidth: 180,
|
||||||
|
formatter: ({ requestTime }) =>
|
||||||
|
dayjs(requestTime).format("YYYY-MM-DD HH:mm:ss")
|
||||||
|
}
|
||||||
|
// {
|
||||||
|
// label: "操作",
|
||||||
|
// fixed: "right",
|
||||||
|
// slot: "operation"
|
||||||
|
// }
|
||||||
|
];
|
||||||
|
|
||||||
|
function handleSizeChange(val: number) {
|
||||||
|
console.log(`${val} items per page`);
|
||||||
|
}
|
||||||
|
|
||||||
|
function handleCurrentChange(val: number) {
|
||||||
|
console.log(`current page: ${val}`);
|
||||||
|
}
|
||||||
|
|
||||||
|
/** 当CheckBox选择项发生变化时会触发该事件 */
|
||||||
|
function handleSelectionChange(val) {
|
||||||
|
selectedNum.value = val.length;
|
||||||
|
// 重置表格高度
|
||||||
|
tableRef.value.setAdaptive();
|
||||||
|
}
|
||||||
|
|
||||||
|
/** 取消选择 */
|
||||||
|
function onSelectionCancel() {
|
||||||
|
selectedNum.value = 0;
|
||||||
|
// 用于多选表格，清空用户的选择
|
||||||
|
tableRef.value.getTableRef().clearSelection();
|
||||||
|
}
|
||||||
|
|
||||||
|
/** 拷贝请求接口，表格单元格被双击时触发 */
|
||||||
|
function handleCellDblclick({ url }) {
|
||||||
|
update(url);
|
||||||
|
copied.value
|
||||||
|
? message(`${url} 已拷贝`, { type: "success" })
|
||||||
|
: message("拷贝失败", { type: "warning" });
|
||||||
|
}
|
||||||
|
|
||||||
|
/** 批量删除 */
|
||||||
|
function onbatchDel() {
|
||||||
|
// 返回当前选中的行
|
||||||
|
const curSelected = tableRef.value.getTableRef().getSelectionRows();
|
||||||
|
// 接下来根据实际业务，通过选中行的某项数据，比如下面的id，调用接口进行批量删除
|
||||||
|
message(`已删除序号为 ${getKeyList(curSelected, "id")} 的数据`, {
|
||||||
|
type: "success"
|
||||||
|
});
|
||||||
|
tableRef.value.getTableRef().clearSelection();
|
||||||
|
onSearch();
|
||||||
|
}
|
||||||
|
|
||||||
|
/** 清空日志 */
|
||||||
|
function clearAll() {
|
||||||
|
// 根据实际业务，调用接口删除所有日志数据
|
||||||
|
message("已删除所有日志数据", {
|
||||||
|
type: "success"
|
||||||
|
});
|
||||||
|
onSearch();
|
||||||
|
}
|
||||||
|
|
||||||
|
async function onSearch() {
|
||||||
|
loading.value = true;
|
||||||
|
const { data } = await getSystemLogsList(toRaw(form));
|
||||||
|
dataList.value = data.list;
|
||||||
|
pagination.total = data.total;
|
||||||
|
pagination.pageSize = data.pageSize;
|
||||||
|
pagination.currentPage = data.currentPage;
|
||||||
|
|
||||||
|
setTimeout(() => {
|
||||||
|
loading.value = false;
|
||||||
|
}, 500);
|
||||||
|
}
|
||||||
|
|
||||||
|
const resetForm = formEl => {
|
||||||
|
if (!formEl) return;
|
||||||
|
formEl.resetFields();
|
||||||
|
onSearch();
|
||||||
|
};
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
onSearch();
|
||||||
|
});
|
||||||
|
|
||||||
|
return {
|
||||||
|
form,
|
||||||
|
loading,
|
||||||
|
columns,
|
||||||
|
dataList,
|
||||||
|
pagination,
|
||||||
|
selectedNum,
|
||||||
|
onSearch,
|
||||||
|
clearAll,
|
||||||
|
resetForm,
|
||||||
|
onbatchDel,
|
||||||
|
handleSizeChange,
|
||||||
|
onSelectionCancel,
|
||||||
|
handleCellDblclick,
|
||||||
|
handleCurrentChange,
|
||||||
|
handleSelectionChange
|
||||||
|
};
|
||||||
|
}
|
||||||
156
src/views/monitor/logs/system/index.vue
Normal file
156
src/views/monitor/logs/system/index.vue
Normal file
@ -0,0 +1,156 @@
|
|||||||
|
<script setup lang="ts">
|
||||||
|
import { ref } from "vue";
|
||||||
|
import { useRole } from "./hook";
|
||||||
|
import { getPickerShortcuts } from "../../utils";
|
||||||
|
import { PureTableBar } from "@/components/RePureTableBar";
|
||||||
|
import { useRenderIcon } from "@/components/ReIcon/src/hooks";
|
||||||
|
|
||||||
|
import Delete from "@iconify-icons/ep/delete";
|
||||||
|
import Refresh from "@iconify-icons/ep/refresh";
|
||||||
|
|
||||||
|
defineOptions({
|
||||||
|
name: "SystemLog"
|
||||||
|
});
|
||||||
|
|
||||||
|
const formRef = ref();
|
||||||
|
const tableRef = ref();
|
||||||
|
|
||||||
|
const {
|
||||||
|
form,
|
||||||
|
loading,
|
||||||
|
columns,
|
||||||
|
dataList,
|
||||||
|
pagination,
|
||||||
|
selectedNum,
|
||||||
|
onSearch,
|
||||||
|
clearAll,
|
||||||
|
resetForm,
|
||||||
|
onbatchDel,
|
||||||
|
handleSizeChange,
|
||||||
|
onSelectionCancel,
|
||||||
|
handleCellDblclick,
|
||||||
|
handleCurrentChange,
|
||||||
|
handleSelectionChange
|
||||||
|
} = useRole(tableRef);
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div class="main">
|
||||||
|
<el-form
|
||||||
|
ref="formRef"
|
||||||
|
:inline="true"
|
||||||
|
:model="form"
|
||||||
|
class="search-form bg-bg_color w-[99/100] pl-8 pt-[12px]"
|
||||||
|
>
|
||||||
|
<el-form-item label="所属模块" prop="module">
|
||||||
|
<el-input
|
||||||
|
v-model="form.module"
|
||||||
|
placeholder="请输入所属模块"
|
||||||
|
clearable
|
||||||
|
class="!w-[170px]"
|
||||||
|
/>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="请求时间" prop="requestTime">
|
||||||
|
<el-date-picker
|
||||||
|
v-model="form.requestTime"
|
||||||
|
:shortcuts="getPickerShortcuts()"
|
||||||
|
type="datetimerange"
|
||||||
|
range-separator="至"
|
||||||
|
start-placeholder="开始日期时间"
|
||||||
|
end-placeholder="结束日期时间"
|
||||||
|
/>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item>
|
||||||
|
<el-button
|
||||||
|
type="primary"
|
||||||
|
:icon="useRenderIcon('ri:search-line')"
|
||||||
|
:loading="loading"
|
||||||
|
@click="onSearch"
|
||||||
|
>
|
||||||
|
搜索
|
||||||
|
</el-button>
|
||||||
|
<el-button :icon="useRenderIcon(Refresh)" @click="resetForm(formRef)">
|
||||||
|
重置
|
||||||
|
</el-button>
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
|
||||||
|
<PureTableBar
|
||||||
|
title="系统日志（仅演示，操作后不生效）"
|
||||||
|
:columns="columns"
|
||||||
|
@refresh="onSearch"
|
||||||
|
>
|
||||||
|
<template #buttons>
|
||||||
|
<el-popconfirm title="确定要删除所有日志数据吗？" @confirm="clearAll">
|
||||||
|
<template #reference>
|
||||||
|
<el-button type="danger" :icon="useRenderIcon(Delete)">
|
||||||
|
清空日志
|
||||||
|
</el-button>
|
||||||
|
</template>
|
||||||
|
</el-popconfirm>
|
||||||
|
</template>
|
||||||
|
<template v-slot="{ size, dynamicColumns }">
|
||||||
|
<div
|
||||||
|
v-if="selectedNum > 0"
|
||||||
|
v-motion-fade
|
||||||
|
class="bg-[var(--el-fill-color-light)] w-full h-[46px] mb-2 pl-4 flex items-center"
|
||||||
|
>
|
||||||
|
<div class="flex-auto">
|
||||||
|
<span
|
||||||
|
style="font-size: var(--el-font-size-base)"
|
||||||
|
class="text-[rgba(42,46,54,0.5)] dark:text-[rgba(220,220,242,0.5)]"
|
||||||
|
>
|
||||||
|
已选 {{ selectedNum }} 项
|
||||||
|
</span>
|
||||||
|
<el-button type="primary" text @click="onSelectionCancel">
|
||||||
|
取消选择
|
||||||
|
</el-button>
|
||||||
|
</div>
|
||||||
|
<el-popconfirm title="是否确认删除?" @confirm="onbatchDel">
|
||||||
|
<template #reference>
|
||||||
|
<el-button type="danger" text class="mr-1"> 批量删除 </el-button>
|
||||||
|
</template>
|
||||||
|
</el-popconfirm>
|
||||||
|
</div>
|
||||||
|
<pure-table
|
||||||
|
ref="tableRef"
|
||||||
|
row-key="id"
|
||||||
|
align-whole="center"
|
||||||
|
table-layout="auto"
|
||||||
|
:loading="loading"
|
||||||
|
:size="size"
|
||||||
|
adaptive
|
||||||
|
:adaptiveConfig="{ offsetBottom: 108 }"
|
||||||
|
:data="dataList"
|
||||||
|
:columns="dynamicColumns"
|
||||||
|
:pagination="pagination"
|
||||||
|
:paginationSmall="size === 'small' ? true : false"
|
||||||
|
:header-cell-style="{
|
||||||
|
background: 'var(--el-fill-color-light)',
|
||||||
|
color: 'var(--el-text-color-primary)'
|
||||||
|
}"
|
||||||
|
@selection-change="handleSelectionChange"
|
||||||
|
@page-size-change="handleSizeChange"
|
||||||
|
@page-current-change="handleCurrentChange"
|
||||||
|
@cell-dblclick="handleCellDblclick"
|
||||||
|
/>
|
||||||
|
</template>
|
||||||
|
</PureTableBar>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
:deep(.el-dropdown-menu__item i) {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.main-content {
|
||||||
|
margin: 24px 24px 0 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.search-form {
|
||||||
|
:deep(.el-form-item) {
|
||||||
|
margin-bottom: 12px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Loading…
x
Reference in New Issue
Block a user