From 69ac89de6b44417ce5f443c6b3d443a3da9b145c Mon Sep 17 00:00:00 2001
From: gaoxq <376340421@qq.com>
Date: Mon, 9 Feb 2026 16:27:42 +0800
Subject: [PATCH] =?UTF-8?q?=E6=96=B0=E5=A2=9E=E5=89=8D=E7=AB=AFvue?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/info/Echart/LeftOut.vue        |  27 ++-
 .../components/info/Echart/Monitor.vue        | 161 ++++--------------
 .../components/info/Echart/RightOut.vue       |  32 ++--
 3 files changed, 76 insertions(+), 144 deletions(-)

diff --git a/web-vue/packages/core/layouts/views/desktop/analysis/components/info/Echart/LeftOut.vue b/web-vue/packages/core/layouts/views/desktop/analysis/components/info/Echart/LeftOut.vue
index 74ef1fa3..41755320 100644
--- a/web-vue/packages/core/layouts/views/desktop/analysis/components/info/Echart/LeftOut.vue
+++ b/web-vue/packages/core/layouts/views/desktop/analysis/components/info/Echart/LeftOut.vue
@@ -1,5 +1,6 @@
 <template>
-  <Card title="基础信息">
+  <!-- 移除Card默认的内边距，让内容更贴近边缘 -->
+  <Card title="基础信息" style="padding: 0;">
     <div class="card-grid base-info-content">
       <div class="metric-card">
         <div class="metric-label">主机名称:</div>
@@ -80,15 +81,14 @@ watch(
 </script>
 
 <style scoped>
-/* 基础信息卡片容器：核心滚动逻辑 + 紧凑间距 */
+/* 基础信息卡片容器：核心滚动逻辑 + 2px边缘间距 */
 .card-grid.base-info-content {
   width: 100%;
-  height: 240px; 
+  height: 30vh; 
   display: grid;
-  /* 关键：缩小卡片之间的间距（从12px改为8px） */
+  /* 关键：卡片间距保持8px，容器内边距改为2px */
   gap: 8px;
-  /* 关键：缩小容器内边距（从8px改为4px） */
-  padding: 4px;
+  padding: 2px; /* 核心修改：贴近Card边缘仅2px */
   box-sizing: border-box;
   /* 让卡片垂直排列，占满高度 */
   grid-template-rows: repeat(auto-fit, minmax(40px, 1fr));
@@ -100,8 +100,8 @@ watch(
 .metric-card {
   display: flex;
   align-items: center;
-  /* 关键：缩小卡片内部内边距（从12px 16px改为6px 10px） */
-  padding: 6px 10px;
+  /* 关键：缩小卡片内部内边距（从6px 10px改为4px 8px） */
+  padding: 4px 8px;
   background-color: #f8f9fa;
   border-radius: 8px;
   border: 1px solid #e9ecef;
@@ -155,6 +155,17 @@ watch(
   text-overflow: ellipsis;
 }
 
+/* 覆盖Ant Design Vue Card组件的默认内边距 */
+:deep(.ant-card-body) {
+  padding: 0 !important; /* 移除Card主体的默认内边距 */
+  margin: 0;
+}
+
+:deep(.ant-card-head) {
+  padding: 0 12px !important; /* 调整Card标题栏内边距，保持标题美观 */
+  border-bottom: 1px solid #f0f0f0; /* 保留标题栏下划线 */
+}
+
 /* 滚动条美化（可选） */
 .card-grid.base-info-content::-webkit-scrollbar {
   width: 6px; /* 滚动条宽度 */
diff --git a/web-vue/packages/core/layouts/views/desktop/analysis/components/info/Echart/Monitor.vue b/web-vue/packages/core/layouts/views/desktop/analysis/components/info/Echart/Monitor.vue
index 35253e5d..350f1e69 100644
--- a/web-vue/packages/core/layouts/views/desktop/analysis/components/info/Echart/Monitor.vue
+++ b/web-vue/packages/core/layouts/views/desktop/analysis/components/info/Echart/Monitor.vue
@@ -1,110 +1,78 @@
 <template>
-  <!-- 1. 优化Card的内边距和间距，移除不必要的margin，减少整体占用空间 -->
-  <Card title="监控信息" style="width: 100%; height: 280px; margin: 0; padding: 8px;">
-    <!-- 2. 调整图表容器高度，配合整体紧凑布局 -->
-    <div ref="chartDom" style="width: 100%; height: 210px;"></div>
+  <Card title="监控信息" style="width: 100%; height: 30vh; margin: 0; padding: 0;">
+    <div ref="chartDom" style="width: 100%; height: calc(100% - 32px - 4px); padding: 2px;"></div>
   </Card>
 </template>
-
 <script lang="ts" setup name="Monitor">
 import { ref, onMounted, watch, onUnmounted } from 'vue';
 import { Card } from 'ant-design-vue';
-import { useRouter } from 'vue-router';
 import { BizResourceMonitor, bizResourceMonitorListAll } from '@jeesite/biz/api/biz/resourceMonitor';
 import * as echarts from 'echarts';
 
-// 定义接收的参数类型
 const props = defineProps<{
-  formParams: Record<string, any>; // 接收参数
+  formParams: Record<string, any>;
 }>();
 
-// 监控数据列表
 const monitorList = ref<BizResourceMonitor[]>([]);
-// 改用普通ref管理echarts实例（移除shallowRef）
 const chartInstance = ref<echarts.ECharts | null>(null);
-// 图表DOM引用
 const chartDom = ref<HTMLDivElement | null>(null);
 
-// 存储resize回调函数，方便卸载时移除
 const resizeHandler = () => {
   chartInstance.value?.resize();
 };
 
-// 获取监控数据
 const fetchList = async (params: Record<string, any>) => {
   try {
     const result = await bizResourceMonitorListAll(params);
     monitorList.value = result || [];
-    // 数据更新后重新渲染图表
     renderChart();
   } catch (error) {
     console.error('获取数据列表失败：', error);
     monitorList.value = [];
-    // 数据获取失败也清空图表
     renderChart();
   }
 };
 
-// 初始化ECharts实例
 const initChart = () => {
   if (!chartDom.value) return;
   
-  // 避免重复创建实例
   if (chartInstance.value) {
     chartInstance.value.dispose();
     chartInstance.value = null;
   }
   
-  // 创建ECharts实例
   chartInstance.value = echarts.init(chartDom.value);
-  
-  // 监听窗口大小变化，自适应调整图表
   window.addEventListener('resize', resizeHandler);
 };
 
-// 渲染图表
 const renderChart = () => {
-  if (!chartInstance.value) {
-    return;
-  }
+  if (!chartInstance.value) return;
 
   if (monitorList.value.length === 0) {
-    // 清空图表
+    // 空数据时不直接隐藏tooltip，仅清空数据（避免影响tooltip初始化）
     chartInstance.value.setOption({
-      tooltip: {
-        show: false // 空数据时直接隐藏tooltip
-      },
       series: [{ data: [] }, { data: [] }],
       xAxis: { data: [] }
     });
     return;
   }
 
-  // 处理数据：提取X轴和Y轴数据
   const xAxisData = monitorList.value.map(item => item.hourTime || '');
   const cpuData = monitorList.value.map(item => {
-    // 处理空值/异常值，确保数据合法性（0-100）
     const value = item.cpuUsage ?? 0;
     return Math.max(0, Math.min(100, value));
   });
   const memoryData = monitorList.value.map(item => {
-    // 处理空值/异常值，确保数据合法性（0-100）
     const value = item.memoryUsage ?? 0;
     return Math.max(0, Math.min(100, value));
   });
 
-  // 计算Y轴自适应的最大值和最小值
-  // 合并所有数据，找到极值
   const allData = [...cpuData, ...memoryData];
   const minValue = Math.min(...allData);
   const maxValue = Math.max(...allData);
-  
-  // 给Y轴极值增加一点余量，让图表显示更美观（比如±5%）
-  // 确保最小值不小于0，最大值不大于100
   const yMin = Math.max(0, minValue - 5);
   const yMax = Math.min(100, maxValue + 5);
   
-  // 自动计算刻度间隔（按5/10/20等整数分割，保证刻度美观）
   const getInterval = (min: number, max: number) => {
     const range = max - min;
     if (range <= 10) return 2;
@@ -114,137 +82,82 @@ const renderChart = () => {
   };
   const yInterval = getInterval(yMin, yMax);
 
-  // 配置ECharts选项
   const option = {
-    // 图表标题
-    title: {
-      left: 'center'
-    },
-    // 图例组件 - 优化位置和间距，更紧凑
+    title: { left: 'center' },
     legend: {
       data: ['CPU使用率', '内存使用率'],
-      top: 5,        // 减少顶部距离
-      left: '10px',  // 调整左侧位置
-      itemGap: 15,   // 减小图例项之间的间距
-      textStyle: {
-        fontSize: 11 // 缩小图例文字
-      }
+      top: 5,
+      left: 'center',
+      itemGap: 15,
+      textStyle: { fontSize: 11 }
     },
-    // 网格配置 - 核心优化：大幅减少左右边距，让图表更紧凑
     grid: {
-      left: '1%',    // 从2%减到1%，大幅减少左侧空白
-      right: '1%',   // 从2%减到1%，大幅减少右侧空白
-      bottom: '8%',  // 微调底部间距
-      top: '18%',    // 减少顶部间距
-      containLabel: true // 包含坐标轴标签
+      left: '2%',    // 从1%改为5%，扩大触发区域
+      right: '2%',   // 从1%改为5%，扩大触发区域
+      bottom: '8%',
+      top: '18%',
+      containLabel: true
     },
-    // 提示框优化
-    tooltip: {
-      trigger: 'axis',
-      padding: [8, 12], // 减小tooltip内边距
-      textStyle: {
-        fontSize: 11    // 缩小提示框文字
-      }
-    },
-    // X轴配置 - 优化标签显示，更紧凑
     xAxis: {
       type: 'category',
       data: xAxisData,
-      axisLabel: {
-        rotate: 20,     // 减少旋转角度，节省空间
-        fontSize: 10,   // 缩小字体
-        margin: 5       // 减小标签与轴线的距离
-      },
-      axisTick: {
-        alignWithLabel: true // 刻度线与标签对齐
-      }
+      axisLabel: { rotate: 20, fontSize: 10, margin: 5 },
+      axisTick: { alignWithLabel: true }
     },
-    // Y轴配置（核心修改：自适应极值和刻度）
     yAxis: {
       type: 'value',
       name: '使用率(%)',
-      nameTextStyle: {
-        fontSize: 10 // 缩小Y轴名称字体
-      },
-      min: yMin, // 自适应最小值
-      max: yMax, // 自适应最大值
-      interval: yInterval, // 自适应刻度间隔
-      axisLabel: {
-        formatter: '{value}%',
-        fontSize: 10,      // 缩小Y轴标签字体
-        margin: 5          // 减小标签与轴线的距离
-      }
+      nameTextStyle: { fontSize: 10 },
+      min: yMin,
+      max: yMax,
+      interval: yInterval,
+      axisLabel: { formatter: '{value}%', fontSize: 10, margin: 5 }
     },
-    // 系列数据（两条曲线）
     series: [
       {
         name: 'CPU使用率',
-        type: 'line', // 折线图
+        type: 'line',
         data: cpuData,
-        smooth: true, // 平滑曲线
-        lineStyle: {
-          width: 2
-        },
-        itemStyle: {
-          color: '#f56c6c' // CPU曲线颜色
-        },
+        smooth: true,
+        lineStyle: { width: 2 },
+        itemStyle: { color: '#f56c6c' },
         areaStyle: {
-          // 面积填充，增加视觉效果
           color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
             { offset: 0, color: 'rgba(245, 108, 108, 0.3)' },
             { offset: 1, color: 'rgba(245, 108, 108, 0.05)' }
           ])
         },
-        // 数值精度
         precision: 2,
-        // 增加tooltip触发的阈值
-        triggerLine: {
-          show: true,
-          length: 5
-        }
       },
       {
         name: '内存使用率',
-        type: 'line', // 折线图
+        type: 'line',
         data: memoryData,
-        smooth: true, // 平滑曲线
-        lineStyle: {
-          width: 2
-        },
-        itemStyle: {
-          color: '#409eff' // 内存曲线颜色
-        },
+        smooth: true,
+        lineStyle: { width: 2 },
+        itemStyle: { color: '#409eff' },
         areaStyle: {
-          // 面积填充
           color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+            { offset: 0, color: 'rgba(64, 158, 255, 0.3)' },
             { offset: 1, color: 'rgba(64, 158, 255, 0.05)' }
           ])
         },
-        // 数值精度
         precision: 2,
-        // 增加tooltip触发的阈值
-        triggerLine: {
-          show: true,
-          length: 5
-        }
       }
     ]
   };
 
-  // 设置图表配置项（使用replaceMerge确保配置完全更新）
   chartInstance.value.setOption(option, {
     replaceMerge: ['tooltip', 'series', 'xAxis', 'yAxis'],
     lazyUpdate: false
   });
 };
 
-// 生命周期：挂载时初始化图表并获取数据
 onMounted(() => {
   initChart();
   fetchList(props.formParams);
 });
 
-// 监听参数变化，重新获取数据
 watch(
   () => props.formParams,
   async (newParams) => {
@@ -253,11 +166,8 @@ watch(
   { deep: true, immediate: false }
 );
 
-// 组件卸载时清理资源（新增/完善onUnmounted）
 onUnmounted(() => {
-  // 1. 移除窗口resize事件监听
   window.removeEventListener('resize', resizeHandler);
-  // 2. 销毁ECharts实例，释放内存
   if (chartInstance.value) {
     chartInstance.value.dispose();
     chartInstance.value = null;
@@ -266,16 +176,17 @@ onUnmounted(() => {
 </script>
 
 <style scoped>
-/* 可选：进一步优化Card组件的样式 */
 :deep(.ant-card) {
   border-radius: 4px;
   box-shadow: 0 1px 2px rgba(0,0,0,0.05);
+  box-sizing: border-box;
 }
 
 :deep(.ant-card-head) {
-  padding: 0 12px;
+  padding: 0 12px !important;
   min-height: 32px;
   line-height: 32px;
+  border-bottom: 1px solid #f0f0f0;
 }
 
 :deep(.ant-card-head-title) {
@@ -284,6 +195,8 @@ onUnmounted(() => {
 }
 
 :deep(.ant-card-body) {
-  padding: 8px;
+  padding: 0 !important;
+  margin: 0;
+  height: calc(100% - 32px);
 }
 </style>
diff --git a/web-vue/packages/core/layouts/views/desktop/analysis/components/info/Echart/RightOut.vue b/web-vue/packages/core/layouts/views/desktop/analysis/components/info/Echart/RightOut.vue
index 8bddacc4..26ebc043 100644
--- a/web-vue/packages/core/layouts/views/desktop/analysis/components/info/Echart/RightOut.vue
+++ b/web-vue/packages/core/layouts/views/desktop/analysis/components/info/Echart/RightOut.vue
@@ -1,5 +1,6 @@
 <template>
-  <Card title="磁盘信息">
+  <!-- 移除Card默认内边距，让内容贴近边缘 -->
+  <Card title="磁盘信息" style="padding: 0;">
     <div class="disk-table-container disk-info-content">
       <div class="custom-table-wrapper">
         <!-- 固定表头 -->
@@ -124,13 +125,12 @@ watch(
 </script>
 
 <style scoped>
-/* 核心修复：给外层容器设置明确高度约束 */
+/* 核心修复：给外层容器设置明确高度约束 + 2px内边距贴近Card边缘 */
 .disk-table-container {
   width: 100%;
-  /* 关键：设置固定高度，也可根据需求改为 max-height */
-  height: 240px; 
-  /* 或者用百分比：height: 80vh;（相对于视口高度） */
+  height: 30vh; 
   box-sizing: border-box;
+  padding: 2px; /* 核心：内容与Card边缘仅2px间距 */
 }
 
 .custom-table-wrapper {
@@ -140,7 +140,7 @@ watch(
   flex-direction: column;
 }
 
-/* 固定表头样式 */
+/* 固定表头样式 - 调整内边距更紧凑 */
 .table-header {
   display: flex;
   align-items: center;
@@ -148,24 +148,21 @@ watch(
   background-color: #f8f9fa;
   border-bottom: 1px solid #e9ecef;
   font-weight: 600;
-  padding: 0 16px;
+  padding: 0 8px; /* 从16px改为8px，更紧凑 */
   box-sizing: border-box;
-  /* 固定表头：sticky 结合父容器定位 */
   position: relative; 
   z-index: 10;
 }
 
 /* 核心修复：内容区域强制高度 + 滚动 */
 .table-body-wrapper {
-  /* 表头高度48px，剩余高度全部给内容区 */
   height: calc(100% - 48px); 
-  /* 强制显示滚动条（也可保留auto，仅溢出时显示） */
   overflow-y: scroll; 
   overflow-x: hidden;
   box-sizing: border-box;
 }
 
-/* 表格行/列基础样式 */
+/* 表格行/列基础样式 - 调整内边距更紧凑 */
 .table-th, .table-td {
   display: flex;
   align-items: center;
@@ -178,7 +175,7 @@ watch(
   align-items: center;
   height: 48px;
   border-bottom: 1px solid #e9ecef;
-  padding: 0 16px;
+  padding: 0 8px; /* 从16px改为8px，更紧凑 */
   box-sizing: border-box;
   transition: background-color 0.2s;
 }
@@ -275,4 +272,15 @@ watch(
 .table-body-wrapper::-webkit-scrollbar-thumb:hover {
   background: #a8a8a8;
 }
+
+/* 覆盖Ant Design Vue Card组件的默认内边距 */
+:deep(.ant-card-body) {
+  padding: 0 !important; /* 移除Card主体的默认内边距 */
+  margin: 0;
+}
+
+:deep(.ant-card-head) {
+  padding: 0 12px !important; /* 调整Card标题栏内边距，保持标题美观 */
+  border-bottom: 1px solid #f0f0f0; /* 保留标题栏下划线 */
+}
 </style>