gaoxing/UNIVPLMDataIntegration
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

🍒 fix(HttpLog): 修复热力图样式问题

Browse Source
This commit is contained in:
喵你个汪呀 2025-08-20 15:06:07 +08:00
parent 868ed1bc2b
commit b6befed368
1 changed files with 13 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
Web/src/views/system/log/loghttp/index.vue
View File

@ -1,11 +1,7 @@
<template> <template>
<div class="sys-sysLogHttp-container"> <div class="sys-sysLogHttp-container">
<el-card shadow="hover" :body-style="{ padding: '5px 5px 0 5px' }"> <el-card shadow="hover" :body-style="{ padding: '5px 5px 0 5px' }">
<el-collapse @change="collapseChange"> <scEcharts v-if="echartsOption.series.data" height="200px" :option="echartsOption" @clickData="clickData"></scEcharts>
<el-collapse-item title="请求日志">
<scEcharts ref="echartRef" height="200px" :option="echartsOption" :autoDraw="false" @clickData="clickData"></scEcharts>
</el-collapse-item>
</el-collapse>
</el-card> </el-card>
<el-card shadow="hover" :body-style="{ padding: '5px', display: 'flex', width: '100%', height: '100%', alignItems: 'start' }"> <el-card shadow="hover" :body-style="{ padding: '5px', display: 'flex', width: '100%', height: '100%', alignItems: 'start' }">
<el-form :model="state.queryParams" ref="queryForm" :show-message="false" :inlineMessage="true" label-width="auto" style="flex: 1 1 0%"> <el-form :model="state.queryParams" ref="queryForm" :show-message="false" :inlineMessage="true" label-width="auto" style="flex: 1 1 0%">
@ -184,6 +180,7 @@ onMounted(async () => {
// 查询api // 查询api
const handleQueryApi = async (page: VxeGridPropTypes.ProxyAjaxQueryPageParams) => { const handleQueryApi = async (page: VxeGridPropTypes.ProxyAjaxQueryPageParams) => {
await getYearDayStatsData();
const params = Object.assign(state.queryParams, { const params = Object.assign(state.queryParams, {
page: page.currentPage, page: page.currentPage,
pageSize: page.pageSize, pageSize: page.pageSize,
@ -220,6 +217,10 @@ const resetQuery = async () => {
await xGrid.value?.commitProxy('reload'); await xGrid.value?.commitProxy('reload');
}; };
// 获取主题颜色变量
const colors = ['--el-color-primary-light-9', '--el-color-primary-light-7', '--el-color-primary-light-5', '--el-color-primary-light-3', '--el-color-primary-light-1', '--el-color-primary'].map(
(variable) => getComputedStyle(document.documentElement).getPropertyValue(variable).trim()
);
const echartsOption = ref({ const echartsOption = ref({
title: { title: {
top: 30, top: 30,
@ -234,9 +235,12 @@ const echartsOption = ref({
}, },
visualMap: { visualMap: {
show: true, show: true,
// inRange: { inRange: {
// color: ['#fbeee2', '#f2cac9', '#efafad', '#f19790', '#f1908c', '#f17666', '#f05a46', '#ed3b2f', '#ec2b24', '#de2a18'], color: colors,
// }, },
outOfRange: {
color: ['#000000'],
},
min: 0, min: 0,
max: 1000, max: 1000,
maxOpen: { maxOpen: {
@ -276,6 +280,7 @@ const echartsOption = ref({
data: [], data: [],
}, },
}); });
const clickData = (e: any) => { const clickData = (e: any) => {
if (e[1] < 1) return ElMessage.warning('没有日志数据'); if (e[1] < 1) return ElMessage.warning('没有日志数据');
state.queryParams.createTimeRange = []; state.queryParams.createTimeRange = [];
@ -317,12 +322,5 @@ const gridEvents: VxeGridListeners<PageLogHttpOutput> = {
} }
}, },
}; };
const echartRef = ref();
const collapseChange = async () => {
await getYearDayStatsData();
if (echartRef.value.myChart == null) {
echartRef.value.draw();
}
};
</script> </script>
<style scoped></style> <style scoped></style>