From fc968e74a1771b607364a9ea617a9a736919cccf Mon Sep 17 00:00:00 2001
From: gaoxq <376340421@qq.com>
Date: Mon, 9 Feb 2026 15:13:09 +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        | 143 +++++++++++-------
 .../components/info/Echart/Monitor.vue        | 114 ++++++++++----
 .../analysis/components/info/ServerInfo.vue   |   1 -
 3 files changed, 176 insertions(+), 82 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 e3c1d0ef..74ef1fa3 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,77 +1,112 @@
 <template>
-  	<Card title="基础信息">
-      <div class="card-grid base-info-content">
-        <div class="metric-card">
-          <div class="metric-label">主机名称:</div>
-          <div class="metric-value ellipsis-text" :title="serverInfo?.sysHostname || '--'">
-            {{ serverInfo?.sysHostname || '--' }}
-          </div>
-          <div class="metric-icon">🖥️</div>
-        </div>
-        <div class="metric-card">
-          <div class="metric-label">IP 地址:</div>
-          <div class="metric-value ellipsis-text" :title="serverInfo?.ipAddress || '--'">
-            {{ serverInfo?.ipAddress || '--' }}
-          </div>
-          <div class="metric-icon">🌐</div>
-        </div>
-        <div class="metric-card">
-          <div class="metric-label">CPU 型号:</div>
-          <div class="metric-value ellipsis-text" :title="serverInfo?.cpuModel || '--'">
-            {{ serverInfo?.cpuModel || '--' }}
-          </div>
-          <div class="metric-icon">⚙️</div>
-        </div>
-        <div class="metric-card">
-          <div class="metric-label">内存大小:</div>
-          <div class="metric-value ellipsis-text" :title="serverInfo?.memoryTotal || '--'">
-            {{ serverInfo?.memoryTotal || '--' }}
-          </div>
-          <div class="metric-icon">🧠</div>
-        </div>
-        <div class="metric-card">
-          <div class="metric-label">系统版本:</div>
-          <div class="metric-value ellipsis-text" :title="serverInfo?.kernelVersion || '--'">
-            {{ serverInfo?.kernelVersion || '--' }}
-          </div>
-          <div class="metric-icon">🖨️</div>
+  <Card title="基础信息">
+    <div class="card-grid base-info-content">
+      <div class="metric-card">
+        <div class="metric-label">主机名称:</div>
+        <div class="metric-value ellipsis-text" :title="serverInfo?.sysHostname || '--'">
+          {{ serverInfo?.sysHostname || '--' }}
         </div>
+        <div class="metric-icon">🖥️</div>
       </div>
-    </Card>
+      <div class="metric-card">
+        <div class="metric-label">IP 地址:</div>
+        <div class="metric-value ellipsis-text" :title="serverInfo?.ipAddress || '--'">
+          {{ serverInfo?.ipAddress || '--' }}
+        </div>
+        <div class="metric-icon">🌐</div>
+      </div>
+      <div class="metric-card">
+        <div class="metric-label">CPU 型号:</div>
+        <div class="metric-value ellipsis-text" :title="serverInfo?.cpuModel || '--'">
+          {{ serverInfo?.cpuModel || '--' }}
+        </div>
+        <div class="metric-icon">⚙️</div>
+      </div>
+      <div class="metric-card">
+        <div class="metric-label">内存大小:</div>
+        <div class="metric-value ellipsis-text" :title="serverInfo?.memoryTotal || '--'">
+          {{ serverInfo?.memoryTotal || '--' }}
+        </div>
+        <div class="metric-icon">🧠</div>
+      </div>
+      <div class="metric-card">
+        <div class="metric-label">系统版本:</div>
+        <div class="metric-value ellipsis-text" :title="serverInfo?.kernelVersion || '--'">
+          {{ serverInfo?.kernelVersion || '--' }}
+        </div>
+        <div class="metric-icon">🖨️</div>
+      </div>
+    </div>
+  </Card>
 </template>
 
 <script lang="ts" setup name="LeftOut">
-  import { ref, onMounted } from 'vue';
-  import { Card } from 'ant-design-vue';
-  import { useRouter } from 'vue-router';
-  
-  const props = defineProps<{
-    formParams: Record<string, any>; // 接收参数
-  }>();
-  
-  const serverInfo = ref<any>({});
+import { ref, onMounted, watch } from 'vue';
+import { Card } from 'ant-design-vue';
+import { useRouter } from 'vue-router';
+import { BizServerInfo, bizServerInfoListAll } from '@jeesite/biz/api/biz/serverInfo';
 
+const props = defineProps<{
+  formParams: Record<string, any>; // 接收参数
+}>();
+
+// 明确serverInfo的类型为BizServerInfo或空对象，而非any
+const serverInfo = ref<BizServerInfo>({} as BizServerInfo);
+
+const fetchList = async (params: Record<string, any>) => {
+  try {
+    const result = await bizServerInfoListAll(params);
+    // 赋值逻辑优化：兼容数组/对象返回值，兜底为空对象
+    serverInfo.value = Array.isArray(result) ? (result[0] || {}) : (result || {});
+  } catch (error) {
+    console.error('获取数据列表失败：', error);
+    // 异常兜底优化：重置为空对象而非数组，保持类型一致性
+    serverInfo.value = {} as BizServerInfo;
+  }
+};
+
+// 生命周期
+onMounted(() => {
+  fetchList(props.formParams);
+});
+
+watch(
+  () => props.formParams,
+  async (newParams) => {
+    await fetchList(newParams);
+  },
+  { deep: true, immediate: false }
+);
 </script>
 
-<!-- 模板和脚本部分保持不变，仅替换style部分 -->
 <style scoped>
-/* 基础信息卡片容器：核心滚动逻辑 */
+/* 基础信息卡片容器：核心滚动逻辑 + 紧凑间距 */
 .card-grid.base-info-content {
   width: 100%;
   height: 240px; 
   display: grid;
+  /* 关键：缩小卡片之间的间距（从12px改为8px） */
+  gap: 8px;
+  /* 关键：缩小容器内边距（从8px改为4px） */
+  padding: 4px;
   box-sizing: border-box;
+  /* 让卡片垂直排列，占满高度 */
+  grid-template-rows: repeat(auto-fit, minmax(40px, 1fr));
+  /* 允许内容溢出时滚动 */
+  overflow-y: auto;
 }
 
-/* 单个指标卡片样式（美化，提升体验） */
+/* 单个指标卡片样式（紧凑版） */
 .metric-card {
   display: flex;
   align-items: center;
-  padding: 4px;
+  /* 关键：缩小卡片内部内边距（从12px 16px改为6px 10px） */
+  padding: 6px 10px;
   background-color: #f8f9fa;
   border-radius: 8px;
   border: 1px solid #e9ecef;
   transition: all 0.2s ease;
+  /* 恢复原最小高度，更紧凑 */
   min-height: 40px;
   box-sizing: border-box;
 }
@@ -103,9 +138,13 @@
 }
 
 /* 图标样式 */
+.icon-spacing {
+  margin-left: 8px; /* 缩小图标左边距 */
+}
 .metric-icon {
   font-size: 20px;
-  margin-left: 12px;
+  /* 关键：缩小图标左边距（从12px改为8px） */
+  margin-left: 8px;
   color: #409eff;
 }
 
@@ -116,7 +155,7 @@
   text-overflow: ellipsis;
 }
 
-/* 滚动条美化（可选，提升视觉体验） */
+/* 滚动条美化（可选） */
 .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 19f9a762..35253e5d 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,6 +1,8 @@
 <template>
-  <Card title="监控信息">
-    <div ref="chartDom" class="monitor-content" style="width: 100%; height: 200px;"></div>
+  <!-- 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>
 </template>
 
@@ -62,9 +64,16 @@ const initChart = () => {
 
 // 渲染图表
 const renderChart = () => {
-  if (!chartInstance.value || monitorList.value.length === 0) {
+  if (!chartInstance.value) {
+    return;
+  }
+
+  if (monitorList.value.length === 0) {
     // 清空图表
-    chartInstance.value?.setOption({
+    chartInstance.value.setOption({
+      tooltip: {
+        show: false // 空数据时直接隐藏tooltip
+      },
       series: [{ data: [] }, { data: [] }],
       xAxis: { data: [] }
     });
@@ -111,44 +120,59 @@ const renderChart = () => {
     title: {
       left: 'center'
     },
-    // 提示框组件
-    tooltip: {
-      trigger: 'axis', // 坐标轴触发
-      formatter: '{b} <br/>{a}: {c}%', // 自定义提示框格式
-      textStyle: {
-        fontSize: 12
-      }
-    },
-    // 图例组件
+    // 图例组件 - 优化位置和间距，更紧凑
     legend: {
       data: ['CPU使用率', '内存使用率'],
-      top: 30
+      top: 5,        // 减少顶部距离
+      left: '10px',  // 调整左侧位置
+      itemGap: 15,   // 减小图例项之间的间距
+      textStyle: {
+        fontSize: 11 // 缩小图例文字
+      }
     },
-    // 网格配置
+    // 网格配置 - 核心优化：大幅减少左右边距，让图表更紧凑
     grid: {
-      left: '3%',
-      right: '4%',
-      bottom: '3%',
+      left: '1%',    // 从2%减到1%，大幅减少左侧空白
+      right: '1%',   // 从2%减到1%，大幅减少右侧空白
+      bottom: '8%',  // 微调底部间距
+      top: '18%',    // 减少顶部间距
       containLabel: true // 包含坐标轴标签
     },
-    // X轴配置
+    // 提示框优化
+    tooltip: {
+      trigger: 'axis',
+      padding: [8, 12], // 减小tooltip内边距
+      textStyle: {
+        fontSize: 11    // 缩小提示框文字
+      }
+    },
+    // X轴配置 - 优化标签显示，更紧凑
     xAxis: {
       type: 'category',
       data: xAxisData,
       axisLabel: {
-        rotate: 30, // 标签旋转30度，避免重叠
-        fontSize: 11
+        rotate: 20,     // 减少旋转角度，节省空间
+        fontSize: 10,   // 缩小字体
+        margin: 5       // 减小标签与轴线的距离
+      },
+      axisTick: {
+        alignWithLabel: true // 刻度线与标签对齐
       }
     },
     // Y轴配置（核心修改：自适应极值和刻度）
     yAxis: {
       type: 'value',
-      name: '使用率 (%)',
+      name: '使用率(%)',
+      nameTextStyle: {
+        fontSize: 10 // 缩小Y轴名称字体
+      },
       min: yMin, // 自适应最小值
       max: yMax, // 自适应最大值
       interval: yInterval, // 自适应刻度间隔
       axisLabel: {
-        formatter: '{value} %'
+        formatter: '{value}%',
+        fontSize: 10,      // 缩小Y轴标签字体
+        margin: 5          // 减小标签与轴线的距离
       }
     },
     // 系列数据（两条曲线）
@@ -170,6 +194,13 @@ const renderChart = () => {
             { 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
         }
       },
       {
@@ -186,16 +217,25 @@ const renderChart = () => {
         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
         }
       }
     ]
   };
 
-  // 设置图表配置项
-  chartInstance.value.setOption(option);
+  // 设置图表配置项（使用replaceMerge确保配置完全更新）
+  chartInstance.value.setOption(option, {
+    replaceMerge: ['tooltip', 'series', 'xAxis', 'yAxis'],
+    lazyUpdate: false
+  });
 };
 
 // 生命周期：挂载时初始化图表并获取数据
@@ -226,8 +266,24 @@ onUnmounted(() => {
 </script>
 
 <style scoped>
-.monitor-content {
-  width: 100%;
-  height: 200px; /* 固定图表高度，确保渲染正常 */
+/* 可选：进一步优化Card组件的样式 */
+:deep(.ant-card) {
+  border-radius: 4px;
+  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
+}
+
+:deep(.ant-card-head) {
+  padding: 0 12px;
+  min-height: 32px;
+  line-height: 32px;
+}
+
+:deep(.ant-card-head-title) {
+  font-size: 14px;
+  padding: 0;
+}
+
+:deep(.ant-card-body) {
+  padding: 8px;
 }
 </style>
diff --git a/web-vue/packages/core/layouts/views/desktop/analysis/components/info/ServerInfo.vue b/web-vue/packages/core/layouts/views/desktop/analysis/components/info/ServerInfo.vue
index 7332eed3..61362b15 100644
--- a/web-vue/packages/core/layouts/views/desktop/analysis/components/info/ServerInfo.vue
+++ b/web-vue/packages/core/layouts/views/desktop/analysis/components/info/ServerInfo.vue
@@ -5,7 +5,6 @@
     title="主机详情"
     :showOkBtn="false"
     :showCancelBtn="false"
-    defaultFullscreen="true"
     width="100%"
   >
     <div class="server-detail-container">