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

Web/src/views/system/log/loghttp/index.vue

@@ -1,11 +1,7 @@
 <template>
 	<div class="sys-sysLogHttp-container">
 		<el-card shadow="hover" :body-style="{ padding: '5px 5px 0 5px' }">
-			<el-collapse @change="collapseChange">
-				<el-collapse-item title="请求日志">
-					<scEcharts ref="echartRef" height="200px" :option="echartsOption" :autoDraw="false" @clickData="clickData"></scEcharts>
-				</el-collapse-item>
-			</el-collapse>
+			<scEcharts v-if="echartsOption.series.data" height="200px" :option="echartsOption" @clickData="clickData"></scEcharts>
 		</el-card>
 		<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%">
@@ -184,6 +180,7 @@ onMounted(async () => {
 
 // 查询api
 const handleQueryApi = async (page: VxeGridPropTypes.ProxyAjaxQueryPageParams) => {
+	await getYearDayStatsData();
 	const params = Object.assign(state.queryParams, {
 		page: page.currentPage,
 		pageSize: page.pageSize,
@@ -220,6 +217,10 @@ const resetQuery = async () => {
 	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({
 	title: {
 		top: 30,
@@ -234,9 +235,12 @@ const echartsOption = ref({
 	},
 	visualMap: {
 		show: true,
-		// inRange: {
-		// 	color: ['#fbeee2', '#f2cac9', '#efafad', '#f19790', '#f1908c', '#f17666', '#f05a46', '#ed3b2f', '#ec2b24', '#de2a18'],
-		// },
+		inRange: {
+			color: colors,
+		},
+		outOfRange: {
+			color: ['#000000'],
+		},
 		min: 0,
 		max: 1000,
 		maxOpen: {
@@ -276,6 +280,7 @@ const echartsOption = ref({
 		data: [],
 	},
 });
+
 const clickData = (e: any) => {
 	if (e[1] < 1) return ElMessage.warning('没有日志数据');
 	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>
 <style scoped></style>