From 9de218fc58b5ed12271046d627218170377ab74c Mon Sep 17 00:00:00 2001
From: gaoxq <376340421@qq.com>
Date: Mon, 9 Feb 2026 01:34:37 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E9=A1=B5=E9=9D=A2=E5=BC=B9?=
 =?UTF-8?q?=E7=AA=97=E5=85=A8=E5=B1=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../analysis/components/info/ServerInfo.vue   | 192 ++++++++++++++++--
 1 file changed, 178 insertions(+), 14 deletions(-)

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 af563014..bc59dd1d 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
@@ -133,14 +133,14 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, ref, onMounted, onUnmounted, watch, computed, nextTick } from 'vue';
+import { defineComponent, ref, onMounted, onUnmounted, watch, nextTick } from 'vue';
 import { BasicModal, useModalInner } from '@jeesite/core/components/Modal';
 import { useMessage } from '@jeesite/core/hooks/web/useMessage';
 import { BizDeviceInfo, bizDeviceInfoListAll } from '@jeesite/biz/api/biz/deviceInfo';
 import { BizResourceMonitor, bizResourceMonitorListAll } from '@jeesite/biz/api/biz/resourceMonitor';
 
 import * as echarts from 'echarts';
-import type { ECharts, EChartsOption, LineSeriesOption } from 'echarts';
+import type { ECharts, EChartsOption, TooltipFormatterCallbackParams } from 'echarts';
 
 export default defineComponent({
   components: { BasicModal },
@@ -154,9 +154,127 @@ export default defineComponent({
 
     // 图表核心状态
     const chartDom = ref<HTMLDivElement | null>(null);
+    const chartInstance = ref<ECharts | null>(null);
     const monitorData = ref<BizResourceMonitor[]>([]);
-    const { createMessage } = useMessage();
 
+    // 初始化图表
+    const initChart = () => {
+      if (!chartDom.value) return;
+      // 销毁已有实例，避免重复创建
+      if (chartInstance.value) {
+        chartInstance.value.dispose();
+      }
+      // 创建新实例
+      chartInstance.value = echarts.init(chartDom.value);
+      // 设置默认配置
+      const defaultOption: EChartsOption = {
+        tooltip: {
+          trigger: 'axis',
+          triggerOn: 'mousemove|click', // 鼠标移动或点击时触发
+          textStyle: { fontSize: 12 },
+          backgroundColor: 'rgba(255,255,255,0.95)', // 提高背景透明度，更清晰
+          borderColor: '#e6e6e6',
+          borderWidth: 1,
+          padding: 12,
+          borderRadius: 6, // 圆角更美观
+        },
+        legend: {
+          data: ['CPU使用率(%)', '内存使用率(%)'],
+          textStyle: { fontSize: 12 },
+          top: 0
+        },
+        grid: {
+          left: '2%',
+          right: '2%',
+          bottom: '3%',
+          top: '15%',
+          containLabel: true
+        },
+        xAxis: {
+          type: 'category',
+          data: [],
+          axisLabel: { fontSize: 11 },
+          axisLine: { lineStyle: { color: '#e6e6e6' } }
+        },
+        yAxis: {
+          type: 'value',
+          min: 0,
+          max: 100,
+          name: '使用率(%)',
+          nameTextStyle: { fontSize: 12 },
+          axisLabel: { 
+            fontSize: 11,
+            formatter: '{value}%' 
+          },
+          axisLine: { lineStyle: { color: '#e6e6e6' } },
+          splitLine: { lineStyle: { color: '#f5f5f5' } }
+        },
+        series: [
+          {
+            name: 'CPU使用率(%)',
+            type: 'line',
+            data: [],
+            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)' }
+              ]) 
+            },
+            symbol: 'circle',
+            symbolSize: 6,
+          },
+          {
+            name: '内存使用率(%)',
+            type: 'line',
+            data: [],
+            smooth: true,
+            lineStyle: { width: 2 },
+            itemStyle: { color: '#e6a23c' },
+            areaStyle: { 
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                { offset: 0, color: 'rgba(230, 162, 60, 0.3)' },
+                { offset: 1, color: 'rgba(230, 162, 60, 0.05)' }
+              ]) 
+            },
+            symbol: 'circle',
+            symbolSize: 6,
+          }
+        ]
+      };
+      chartInstance.value.setOption(defaultOption);
+      
+      // 监听窗口大小变化，自适应图表
+      window.addEventListener('resize', resizeChart);
+    };
+
+    // 调整图表大小
+    const resizeChart = () => {
+      if (chartInstance.value) {
+        chartInstance.value.resize();
+      }
+    };
+
+    // 更新图表数据
+    const updateChart = () => {
+      if (!chartInstance.value || monitorData.value.length === 0) return;
+      
+      const xAxisData = monitorData.value.map(item => item.hourTime || '');
+      const cpuData = monitorData.value.map(item => item.cpuUsage || 0);
+      const memoryData = monitorData.value.map(item => item.memoryUsage || 0);
+      
+      // 更新图表配置
+      const option: EChartsOption = {
+        xAxis: { data: xAxisData },
+        series: [
+          { data: cpuData },
+          { data: memoryData }
+        ]
+      };
+      chartInstance.value.setOption(option);
+    };
 
     // 模态框初始化
     const [register, { closeModal }] = useModalInner(async (data: any) => {
@@ -169,20 +287,30 @@ export default defineComponent({
 
       try {
         diskList.value = await bizDeviceInfoListAll({ hostId: data.hostId });
-        // monitorData.value = await bizResourceMonitorListAll({ hostId: data.hostId });
+        monitorData.value = await bizResourceMonitorListAll({ hostId: data.hostId });
+		initChart();
       } catch (error) {
         console.error('主机数据加载失败:', error);
         monitorData.value = [];
-      } 
+      } finally {
+        isLoadingMonitor.value = false;
+      }
+    });
+
+    // 根据使用率获取进度条颜色
+    const getProgressColor = (rate?: number) => {
+      const usageRate = typeof rate === 'number' ? rate : 0;
+      if (usageRate >= 80) return '#f56c6c'; // 红色
+      if (usageRate >= 60) return '#e6a23c'; // 黄色
+      return '#409eff'; // 蓝色（默认）
+    };
+
+    // 监听监控数据变化，更新图表
+    watch(monitorData, () => {
+      if (!isLoadingMonitor.value) {
+        updateChart();
+      }
     });
-	
-	// 根据使用率获取进度条颜色
-	const getProgressColor = (rate?: number) => {
-	  const usageRate = typeof rate === 'number' ? rate : 0;
-	  if (usageRate >= 80) return '#f56c6c'; // 红色
-	  if (usageRate >= 60) return '#e6a23c'; // 黄色
-	  return '#409eff'; // 蓝色（默认）
-	};
 
     return {
       register,
@@ -193,11 +321,12 @@ export default defineComponent({
       chartDom,
       monitorData,
       isLoadingMonitor,
-	  getProgressColor
+      getProgressColor
     };
   },
 });
 </script>
+
 <style scoped>
 /* 整体容器样式 - 上下布局 */
 .server-detail-container {
@@ -462,6 +591,41 @@ export default defineComponent({
   padding: 8px 0;
 }
 
+/* 图表加载状态 */
+.chart-loading {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  color: #909399;
+}
+
+.loading-icon {
+  font-size: 48px;
+  margin-bottom: 16px;
+  animation: rotate 1.5s linear infinite;
+}
+
+.loading-text {
+  font-size: 14px;
+}
+
+/* 图表空数据状态 */
+.chart-empty {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  color: #909399;
+}
+
+@keyframes rotate {
+  from { transform: rotate(0deg); }
+  to { transform: rotate(360deg); }
+}
+
 /* 响应式适配 */
 @media (max-width: 1024px) {
   .server-info-top {