450 lines
14 KiB
Vue
450 lines
14 KiB
Vue
<script lang="ts" setup>
|
|
import { useClipboard } from '@vueuse/core';
|
|
import {
|
|
SystemLogParam,
|
|
SystemLogRecord,
|
|
SystemLogDetailRecord,
|
|
listSystemLog,
|
|
getSystemLog,
|
|
} from '@/api/monitor/log';
|
|
import VueJsonPretty from 'vue-json-pretty';
|
|
import 'vue-json-pretty/lib/styles.css';
|
|
|
|
const { proxy } = getCurrentInstance() as any;
|
|
const { copy, copied } = useClipboard();
|
|
const queryFormRef = ref();
|
|
const systemLogList = ref<SystemLogRecord[]>([]);
|
|
const systemLog = ref<SystemLogDetailRecord>({
|
|
traceId: '',
|
|
requestUrl: '',
|
|
requestMethod: '',
|
|
requestHeaders: '',
|
|
requestBody: '',
|
|
statusCode: 200,
|
|
responseHeaders: '',
|
|
responseBody: '',
|
|
timeTaken: 0,
|
|
ip: '',
|
|
address: '',
|
|
browser: '',
|
|
os: '',
|
|
createTime: '',
|
|
});
|
|
const total = ref(0);
|
|
const loading = ref(false);
|
|
const visible = ref(false);
|
|
|
|
const data = reactive({
|
|
// 查询参数
|
|
queryParams: {
|
|
traceId: undefined,
|
|
createTime: undefined,
|
|
page: 1,
|
|
size: 10,
|
|
sort: ['createTime,desc'],
|
|
},
|
|
});
|
|
const { queryParams } = toRefs(data);
|
|
|
|
/**
|
|
* 查询列表
|
|
*
|
|
* @param params 查询参数
|
|
*/
|
|
const getList = (params: SystemLogParam = { ...queryParams.value }) => {
|
|
loading.value = true;
|
|
listSystemLog(params)
|
|
.then((res) => {
|
|
systemLogList.value = res.data.list;
|
|
total.value = res.data.total;
|
|
})
|
|
.finally(() => {
|
|
loading.value = false;
|
|
});
|
|
};
|
|
getList();
|
|
|
|
/**
|
|
* 查看详情
|
|
*
|
|
* @param id ID
|
|
*/
|
|
const toDetail = async (id: number) => {
|
|
visible.value = true;
|
|
loading.value = true;
|
|
getSystemLog(id)
|
|
.then((res) => {
|
|
systemLog.value = res.data;
|
|
})
|
|
.finally(() => {
|
|
loading.value = false;
|
|
});
|
|
};
|
|
|
|
/**
|
|
* 关闭详情
|
|
*/
|
|
const handleCancel = () => {
|
|
visible.value = false;
|
|
};
|
|
|
|
/**
|
|
* 复制内容
|
|
*
|
|
* @param content 内容
|
|
*/
|
|
const handleCopy = (content: string) => {
|
|
copy(content);
|
|
};
|
|
watch(copied, () => {
|
|
if (copied.value) {
|
|
proxy.$message.success('复制成功');
|
|
}
|
|
});
|
|
|
|
/**
|
|
* 查询
|
|
*/
|
|
const handleQuery = () => {
|
|
getList();
|
|
};
|
|
|
|
/**
|
|
* 重置
|
|
*/
|
|
const resetQuery = () => {
|
|
queryFormRef.value.resetFields();
|
|
handleQuery();
|
|
};
|
|
|
|
/**
|
|
* 切换页码
|
|
*
|
|
* @param current 页码
|
|
*/
|
|
const handlePageChange = (current: number) => {
|
|
queryParams.value.page = current;
|
|
getList();
|
|
};
|
|
|
|
/**
|
|
* 切换每页条数
|
|
*
|
|
* @param pageSize 每页条数
|
|
*/
|
|
const handlePageSizeChange = (pageSize: number) => {
|
|
queryParams.value.size = pageSize;
|
|
getList();
|
|
};
|
|
</script>
|
|
|
|
<script lang="ts">
|
|
export default {
|
|
name: 'SystemLog',
|
|
};
|
|
</script>
|
|
|
|
<template>
|
|
<div class="app-container">
|
|
<Breadcrumb :items="['menu.monitor', 'menu.log.system.list']" />
|
|
<a-card class="general-card" :title="$t('menu.log.system.list')">
|
|
<!-- 头部区域 -->
|
|
<div class="header">
|
|
<!-- 搜索栏 -->
|
|
<div class="header-query">
|
|
<a-form ref="queryFormRef" :model="queryParams" layout="inline">
|
|
<a-form-item field="createTime" hide-label>
|
|
<date-range-picker v-model="queryParams.createTime" />
|
|
</a-form-item>
|
|
<a-form-item hide-label>
|
|
<a-space>
|
|
<a-button type="primary" @click="handleQuery">
|
|
<template #icon><icon-search /></template>查询
|
|
</a-button>
|
|
<a-button @click="resetQuery">
|
|
<template #icon><icon-refresh /></template>重置
|
|
</a-button>
|
|
</a-space>
|
|
</a-form-item>
|
|
</a-form>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 列表区域 -->
|
|
<a-table
|
|
ref="tableRef"
|
|
row-key="id"
|
|
:data="systemLogList"
|
|
:loading="loading"
|
|
:pagination="{
|
|
showTotal: true,
|
|
showPageSize: true,
|
|
total: total,
|
|
current: queryParams.page,
|
|
}"
|
|
:bordered="false"
|
|
column-resizable
|
|
stripe
|
|
size="large"
|
|
@page-change="handlePageChange"
|
|
@page-size-change="handlePageSizeChange"
|
|
>
|
|
<template #columns>
|
|
<a-table-column title="序号">
|
|
<template #cell="{ rowIndex }">
|
|
{{ rowIndex + 1 + (queryParams.page - 1) * queryParams.size }}
|
|
</template>
|
|
</a-table-column>
|
|
<a-table-column title="状态码" align="center">
|
|
<template #cell="{ record }">
|
|
<a-tag v-if="record.statusCode >= 400" color="red">{{
|
|
record.statusCode
|
|
}}</a-tag>
|
|
<a-tag v-else-if="record.statusCode === 200" color="green">{{
|
|
record.statusCode
|
|
}}</a-tag>
|
|
<a-tag v-else color="orange">{{ record.statusCode }}</a-tag>
|
|
</template>
|
|
</a-table-column>
|
|
<a-table-column
|
|
title="请求方式"
|
|
align="center"
|
|
data-index="requestMethod"
|
|
/>
|
|
<a-table-column title="请求 URI">
|
|
<template #cell="{ record }">
|
|
<span :title="decodeURIComponent(record.requestUrl)">{{
|
|
record.requestUrl.match(
|
|
/(\w+):\/\/([^/:]+)(:\d*)?([^#|\?|\n]*)(\?.*)?/,
|
|
)[4]
|
|
}}</span>
|
|
</template>
|
|
</a-table-column>
|
|
<a-table-column title="IP" data-index="ip" />
|
|
<a-table-column title="地址" data-index="address" />
|
|
<a-table-column title="浏览器" data-index="browser" />
|
|
<a-table-column title="耗时">
|
|
<template #cell="{ record }">
|
|
<a-tag v-if="record.timeTaken > 500" color="red"
|
|
>{{ record.timeTaken }} ms</a-tag
|
|
>
|
|
<a-tag v-else-if="record.timeTaken > 200" color="orange"
|
|
>{{ record.timeTaken }} ms</a-tag
|
|
>
|
|
<a-tag v-else color="green">{{ record.timeTaken }} ms</a-tag>
|
|
</template>
|
|
</a-table-column>
|
|
<a-table-column title="请求时间" data-index="createTime" />
|
|
<a-table-column title="操作" align="center">
|
|
<template #cell="{ record }">
|
|
<a-button
|
|
type="text"
|
|
size="small"
|
|
title="查看详情"
|
|
@click="toDetail(record.id)"
|
|
>
|
|
<template #icon><icon-eye /></template>详情
|
|
</a-button>
|
|
</template>
|
|
</a-table-column>
|
|
</template>
|
|
</a-table>
|
|
|
|
<!-- 详情区域 -->
|
|
<a-drawer
|
|
title="日志详情"
|
|
:visible="visible"
|
|
:width="660"
|
|
:footer="false"
|
|
unmount-on-close
|
|
render-to-body
|
|
@cancel="handleCancel"
|
|
>
|
|
<div style="margin: 10px 0 0 10px">
|
|
<a-descriptions :column="2" bordered>
|
|
<a-descriptions-item label="状态码">
|
|
<a-skeleton v-if="loading" :animation="true">
|
|
<a-skeleton-line :rows="1" />
|
|
</a-skeleton>
|
|
<span v-else>
|
|
<a-tag v-if="systemLog.statusCode >= 400" color="red">{{
|
|
systemLog.statusCode
|
|
}}</a-tag>
|
|
<a-tag v-else-if="systemLog.statusCode === 200" color="green">{{
|
|
systemLog.statusCode
|
|
}}</a-tag>
|
|
<a-tag v-else color="orange">{{ systemLog.statusCode }}</a-tag>
|
|
</span>
|
|
</a-descriptions-item>
|
|
<a-descriptions-item label="请求方式">
|
|
<a-skeleton v-if="loading" :animation="true">
|
|
<a-skeleton-line :rows="1" />
|
|
</a-skeleton>
|
|
<span v-else>{{ systemLog.requestMethod }}</span>
|
|
</a-descriptions-item>
|
|
<a-descriptions-item label="IP">
|
|
<a-skeleton v-if="loading" :animation="true">
|
|
<a-skeleton-line :widths="['200px']" :rows="1" />
|
|
</a-skeleton>
|
|
<span v-else>{{ systemLog.ip }}</span>
|
|
</a-descriptions-item>
|
|
<a-descriptions-item label="地址">
|
|
<a-skeleton v-if="loading" :animation="true">
|
|
<a-skeleton-line :widths="['200px']" :rows="1" />
|
|
</a-skeleton>
|
|
<span v-else>{{ systemLog.address }}</span>
|
|
</a-descriptions-item>
|
|
<a-descriptions-item label="浏览器">
|
|
<a-skeleton v-if="loading" :animation="true">
|
|
<a-skeleton-line :widths="['200px']" :rows="1" />
|
|
</a-skeleton>
|
|
<span v-else>{{ systemLog.browser }}</span>
|
|
</a-descriptions-item>
|
|
<a-descriptions-item label="操作系统">
|
|
<a-skeleton v-if="loading" :animation="true">
|
|
<a-skeleton-line :widths="['200px']" :rows="1" />
|
|
</a-skeleton>
|
|
<span v-else>{{ systemLog.os }}</span>
|
|
</a-descriptions-item>
|
|
<a-descriptions-item label="请求时间">
|
|
<a-skeleton v-if="loading" :animation="true">
|
|
<a-skeleton-line :widths="['200px']" :rows="1" />
|
|
</a-skeleton>
|
|
<span v-else>{{ systemLog.createTime }}</span>
|
|
</a-descriptions-item>
|
|
<a-descriptions-item label="耗时">
|
|
<a-skeleton v-if="loading" :animation="true">
|
|
<a-skeleton-line :widths="['200px']" :rows="1" />
|
|
</a-skeleton>
|
|
<span v-else>
|
|
<a-tag v-if="systemLog.timeTaken > 500" color="red">
|
|
{{ systemLog.timeTaken }} ms
|
|
</a-tag>
|
|
<a-tag v-else-if="systemLog.timeTaken > 200" color="orange">
|
|
{{ systemLog.timeTaken }} ms
|
|
</a-tag>
|
|
<a-tag v-else color="green">{{ systemLog.timeTaken }} ms</a-tag>
|
|
</span>
|
|
</a-descriptions-item>
|
|
<a-descriptions-item label="请求 URI" :span="2">
|
|
<a-skeleton v-if="loading" :animation="true">
|
|
<a-skeleton-line :rows="1" />
|
|
</a-skeleton>
|
|
<span v-else>
|
|
{{ systemLog.requestUrl }}
|
|
<icon-copy
|
|
class="copy-btn"
|
|
@click="handleCopy(systemLog.requestUrl)"
|
|
/>
|
|
</span>
|
|
</a-descriptions-item>
|
|
<a-descriptions-item label="Trace ID" :span="2">
|
|
<a-skeleton v-if="loading" :animation="true">
|
|
<a-skeleton-line :rows="1" />
|
|
</a-skeleton>
|
|
<span v-else>
|
|
{{ systemLog.traceId }}
|
|
<icon-copy
|
|
class="copy-btn"
|
|
@click="handleCopy(systemLog.traceId)"
|
|
/>
|
|
</span>
|
|
</a-descriptions-item>
|
|
</a-descriptions>
|
|
<a-descriptions
|
|
layout="inline-vertical"
|
|
:column="2"
|
|
style="margin-top: 10px; position: relative"
|
|
>
|
|
<a-descriptions-item :span="2">
|
|
<a-tabs type="card">
|
|
<a-tab-pane key="1" title="响应头">
|
|
<a-skeleton v-if="loading" :animation="true">
|
|
<a-skeleton-line :rows="3" />
|
|
</a-skeleton>
|
|
<a-space v-else>
|
|
<VueJsonPretty
|
|
v-if="systemLog.responseHeaders"
|
|
:path="'res'"
|
|
:data="JSON.parse(systemLog.responseHeaders)"
|
|
:show-length="true"
|
|
/>
|
|
<span v-else>无</span>
|
|
</a-space>
|
|
</a-tab-pane>
|
|
<a-tab-pane key="2" title="响应体">
|
|
<a-skeleton v-if="loading" :animation="true">
|
|
<a-skeleton-line :rows="3" />
|
|
</a-skeleton>
|
|
<a-space v-else>
|
|
<VueJsonPretty
|
|
v-if="systemLog.responseBody"
|
|
:path="'res'"
|
|
:data="JSON.parse(systemLog.responseBody)"
|
|
:show-length="true"
|
|
/>
|
|
<span v-else>无</span>
|
|
</a-space>
|
|
</a-tab-pane>
|
|
</a-tabs>
|
|
</a-descriptions-item>
|
|
</a-descriptions>
|
|
<a-descriptions
|
|
layout="inline-vertical"
|
|
:column="2"
|
|
style="margin-top: 10px; position: relative"
|
|
>
|
|
<a-descriptions-item :span="2">
|
|
<a-tabs type="card">
|
|
<a-tab-pane key="1" title="请求头">
|
|
<a-skeleton v-if="loading" :animation="true">
|
|
<a-skeleton-line :rows="3" />
|
|
</a-skeleton>
|
|
<a-space v-else>
|
|
<VueJsonPretty
|
|
v-if="systemLog.requestHeaders"
|
|
:data="JSON.parse(systemLog.requestHeaders)"
|
|
:show-length="true"
|
|
/>
|
|
<span v-else>无</span>
|
|
</a-space>
|
|
</a-tab-pane>
|
|
<a-tab-pane key="2" title="请求体">
|
|
<a-skeleton v-if="loading" :animation="true">
|
|
<a-skeleton-line :rows="3" />
|
|
</a-skeleton>
|
|
<a-space v-else>
|
|
<VueJsonPretty
|
|
v-if="systemLog.requestBody"
|
|
:path="'res'"
|
|
:data="JSON.parse(systemLog.requestBody)"
|
|
:show-length="true"
|
|
/>
|
|
<span v-else>无</span>
|
|
</a-space>
|
|
</a-tab-pane>
|
|
</a-tabs>
|
|
</a-descriptions-item>
|
|
</a-descriptions>
|
|
</div>
|
|
</a-drawer>
|
|
</a-card>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped lang="less">
|
|
.copy-btn {
|
|
color: gray;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.copy-btn:hover {
|
|
color: rgb(var(--arcoblue-6));
|
|
}
|
|
|
|
:deep(.arco-tabs-content) {
|
|
padding-top: 5px;
|
|
padding-left: 15px;
|
|
}
|
|
</style>
|