财务门户设计

web-api/src/main/java/com/jeesite/modules/biz/web/BizItemInfoController.java

@@ -6,7 +6,6 @@ import com.jeesite.modules.app.utils.vDate;
 import jakarta.servlet.http.HttpServletRequest;
 import jakarta.servlet.http.HttpServletResponse;
 
-import org.apache.shiro.authz.annotation.RequiresPermissions;
 import org.springframework.stereotype.Controller;
 import org.springframework.ui.Model;
 import org.springframework.validation.annotation.Validated;

web-vue/packages/core/layouts/views/desktop/analysis/components/info/Echart/Monitor.vue

@@ -1,5 +1,5 @@
 <template>
-  <Card title="监控信息" style="width: 100%; height: 30vh; margin: 0; padding: 0;">
+  <Card title="监控信息" style="width: 100%; height: 100%;">
     <template #extra>
       <div class="status-filter-container">
         <div class="status-filter">
@@ -14,13 +14,14 @@
         </div>
       </div>
     </template>
-    <div ref="chartDom" style="width: 100%; height: calc(100% - 32px - 4px); padding: 2px;"></div>
+    <div ref="chartDom" style="width: 100%; height: 500px;"></div>
   </Card>
 </template>
 
-<script lang="ts" setup name="Monitor">
-import { ref, onMounted, watch, onUnmounted, nextTick } from 'vue';
+<script setup lang="ts">
+import { ref, onMounted, onUnmounted, watch, watchEffect } from 'vue';
 import { Card } from 'ant-design-vue';
+import { useMessage } from '@jeesite/core/hooks/web/useMessage';
 import { BizResourceMonitor, bizResourceMonitorListAll } from '@jeesite/biz/api/biz/resourceMonitor';
 import * as echarts from 'echarts';
 
@@ -28,11 +29,6 @@ const props = defineProps<{
   formParams: Record<string, any>;
 }>();
 
-const monitorList = ref<BizResourceMonitor[]>([]);
-const chartInstance = ref<echarts.ECharts | null>(null);
-const chartDom = ref<HTMLDivElement | null>(null);
-
-// 状态选项配置
 const statusOptions = ref([
   { value: '-12', label: '12小时' },
   { value: '-24', label: '24小时' },
@@ -41,23 +37,44 @@ const statusOptions = ref([
 ]);
 const currentStatus = ref<string>('-12');
 
-const resizeHandler = () => {
-  if (chartInstance.value) {
-    nextTick(() => {
-      chartInstance.value?.resize({
-        animation: { duration: 200 }
-      });
-    });
-  }
-};
-
 const handleStatusChange = (status: string) => {
   if (currentStatus.value === status) return;
   currentStatus.value = status;
-  fetchList(props.formParams);
+  fetchDataList(props.formParams);
 };
 
-const fetchList = async (params: Record<string, any>) => {
+const monitorList = ref<BizResourceMonitor[]>([]);
+const chartDom = ref<HTMLDivElement | null>(null);
+let myChart: echarts.ECharts | null = null;
+let resizeTimer: number | null = null;
+const { createMessage } = useMessage();
+
+const formatNumber = (num: string | number | undefined, decimal = 2): number => {
+  if (!num) return 0;
+  const parsed = Number(num);
+  return isNaN(parsed) ? 0 : Number(parsed.toFixed(decimal));
+};
+
+const formatUsagePercentage = (num: string | number | undefined, decimal = 1): string => {
+  const parsed = formatNumber(num, decimal);
+  return `${parsed.toFixed(decimal)}%`;
+};
+
+const formatHourTime = (hourTime: string | number | undefined): string => {
+  if (!hourTime) return '';
+  const timeStr = String(hourTime);
+  if (/^\d+$/.test(timeStr)) {
+    const hour = parseInt(timeStr, 10);
+    return `${hour.toString().padStart(2, '0')}:00`;
+  }
+  if (timeStr.includes(':')) {
+    const parts = timeStr.split(':');
+    return `${parts[0].padStart(2, '0')}:${parts[1].padStart(2, '0')}`;
+  }
+  return timeStr;
+};
+
+const fetchDataList = async (params?: Record<string, any>) => {
   try {
     const reqParams = {
       ...params,
@@ -65,247 +82,186 @@ const fetchList = async (params: Record<string, any>) => {
     };
     const result = await bizResourceMonitorListAll(reqParams);
     monitorList.value = result || [];
-    // 确保图表实例初始化完成后再渲染
-    if (chartInstance.value) {
-      renderChart();
-    } else {
-      // 如果实例未初始化，先初始化再渲染
-      initChart().then(() => renderChart());
-    }
   } catch (error) {
-    console.error('获取数据列表失败：', error);
+    console.error('获取数据失败：', error);
     monitorList.value = [];
-    renderChart();
   }
 };
 
-// 改为异步函数，确保初始化完成
-const initChart = async () => {
+const initChart = () => {
   if (!chartDom.value) return;
 
-  // 先销毁旧实例（如果存在）
-  if (chartInstance.value) {
-    chartInstance.value.dispose();
-    chartInstance.value = null;
+  if (!myChart) {
+    myChart = echarts.init(chartDom.value);
   }
 
-  // 等待DOM更新完成
-  await nextTick();
-  
-  // 初始化图表实例
-  chartInstance.value = echarts.init(chartDom.value);
-  
-  // 移除重复的事件监听
-  window.removeEventListener('resize', resizeHandler);
-  window.addEventListener('resize', resizeHandler);
-  
-  // 监听图例点击事件，增加错误捕获
-  chartInstance.value.on('legendselectchanged', (params) => {
-    try {
-      // 可以在这里自定义图例点击逻辑，也可以留空仅做错误捕获
-      console.log('图例选中状态变更:', params);
-    } catch (e) {
-      console.error('图例点击事件处理异常:', e);
-    }
-  });
-};
-
-const renderChart = () => {
-  // 核心保护：实例不存在时直接返回
-  if (!chartInstance.value) return;
-
-  // 空数据时的完整配置，避免交互报错
   if (monitorList.value.length === 0) {
-    chartInstance.value.setOption({
-      legend: {
-        data: ['CPU使用率', '内存使用率'],
-        top: 5,
-        left: 'center',
-        itemGap: 15,
-        textStyle: { fontSize: 11 }
-      },
-      grid: {
-        left: '2%',
-        right: '2%',
-        bottom: '8%',
-        top: '18%',
-        containLabel: true
-      },
-      xAxis: {
-        type: 'category',
-        data: [],
-        axisLabel: { rotate: 20, fontSize: 10, margin: 5 },
-        axisTick: { alignWithLabel: true }
-      },
+    myChart.setOption({
+      tooltip: { trigger: 'axis' },
+      legend: { data: ['CPU使用率', '内存使用率'], top: 10 },
+      grid: { left: 10, right: 40, bottom: 60, top: 40, containLabel: true },
+      xAxis: { type: 'category', data: [] },
       yAxis: {
         type: 'value',
-        name: '使用率(%)',
-        nameTextStyle: { fontSize: 10 },
+        name: '使用率（%）',
         min: 0,
         max: 100,
         interval: 20,
-        axisLabel: { formatter: '{value}%', fontSize: 10, margin: 5 }
+        axisLabel: { formatter: (v: number) => `${v.toFixed(1)}%` }
       },
-      tooltip: {
-        trigger: 'axis',
-        textStyle: { fontSize: 10 }
-      },
-      series: [
-        {
-          name: 'CPU使用率',
-          type: 'line',
-          data: [],
-          smooth: true
-        },
-        {
-          name: '内存使用率',
-          type: 'line',
-          data: [],
-          smooth: true
-        }
-      ]
-    });
+      noDataLoadingOption: { text: '暂无资源使用率数据', textStyle: { fontSize: 16 } }
+    }, true);
     return;
   }
 
-  const xAxisData = monitorList.value.map(item => item.hourTime || '');
-  const cpuData = monitorList.value.map(item => {
-    const value = item.cpuUsage ?? 0;
-    return Math.max(0, Math.min(100, value));
-  });
-  const memoryData = monitorList.value.map(item => {
-    const value = item.memoryUsage ?? 0;
-    return Math.max(0, Math.min(100, value));
-  });
-
-  const yMin = 0;
-  const yMax = 100;
-  const yInterval = 20;
+  const xAxisData = monitorList.value.map(item => formatHourTime(item.hourTime));
+  const cpuData = monitorList.value.map(item => formatNumber(item.cpuUsage, 1));
+  const memData = monitorList.value.map(item => formatNumber(item.memoryUsage, 1));
 
   const option = {
-    title: { left: 'center' },
-    legend: {
-      data: ['CPU使用率', '内存使用率'],
-      top: 5,
-      left: 'center',
-      itemGap: 15,
-      textStyle: { fontSize: 11 }
-    },
     tooltip: {
       trigger: 'axis',
-      textStyle: { fontSize: 10 },
-      // 增加tooltip配置，避免交互时的默认行为报错
-      axisPointer: {
-        type: 'line',
-        lineStyle: { width: 1, color: '#ccc' }
+      backgroundColor: '#fff',
+      borderColor: '#e8e8e8',
+      borderWidth: 1,
+      textStyle: { fontSize: 12 },
+      padding: 12,
+      formatter: (params: any[]) => {
+        const currentTime = params[0]?.axisValue || '';
+        const item = monitorList.value.find(i => formatHourTime(i.hourTime) === currentTime);
+        if (!item) return `<div>${currentTime} 暂无数据</div>`;
+        return `
+          <div style="font-weight:600; margin-bottom:8px;">${item.createTime || ''}</div>
+          <div>CPU：${formatUsagePercentage(item.cpuUsage)}</div>
+          <div>内存：${formatUsagePercentage(item.memoryUsage)}</div>
+        `;
       }
     },
+    legend: {
+      data: ['CPU使用率', '内存使用率'],
+      top: 10,
+      left: 'center',
+      textStyle: { fontSize: 11 }
+    },
     grid: {
-      left: '2%',
-      right: '2%',
-      bottom: '8%',
-      top: '18%',
+      left: 10,
+      right: 40,
+      bottom: 60,
+      top: 40,
       containLabel: true
     },
     xAxis: {
       type: 'category',
       data: xAxisData,
-      axisLabel: { rotate: 20, fontSize: 10, margin: 5 },
-      axisTick: { alignWithLabel: true }
+      boundaryGap: false,
+      axisLabel: { fontSize: 10, rotate: 45 },
+      axisLine: { onZero: true }
     },
     yAxis: {
       type: 'value',
-      name: '使用率(%)',
-      nameTextStyle: { fontSize: 10 },
-      min: yMin,
-      max: yMax,
-      interval: yInterval,
-      axisLabel: { formatter: '{value}%', fontSize: 10, margin: 5 }
+      min: 0,
+      max: 100,
+      interval: 20,
+      name: '使用率（%）',
+      nameTextStyle: { fontSize: 11 },
+      axisLabel: {
+        fontSize: 10,
+        formatter: (v: number) => `${v}%`
+      },
+      splitLine: { lineStyle: { color: '#e8e8e8' } },
+      axisTick: {
+        alignWithLabel: true,
+        interval: 0
+      }
     },
     series: [
       {
         name: 'CPU使用率',
         type: 'line',
-        data: cpuData,
         smooth: true,
-        lineStyle: { width: 2 },
-        itemStyle: { color: '#f56c6c' },
+        data: cpuData,
+        symbol: 'circle',
+        symbolSize: 4,
+        lineStyle: { width: 2, color: '#1890ff' },
+        itemStyle: { color: '#1890ff' },
         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)' }
+            { offset: 0, color: 'rgba(24, 144, 255, 0.3)' },
+            { offset: 1, color: 'rgba(24, 144, 255, 0.05)' }
           ])
-        },
-        precision: 2,
+        }
       },
       {
         name: '内存使用率',
         type: 'line',
-        data: memoryData,
         smooth: true,
-        lineStyle: { width: 2 },
-        itemStyle: { color: '#409eff' },
+        data: memData,
+        symbol: 'circle',
+        symbolSize: 4,
+        lineStyle: { width: 2, color: '#52c41a' },
+        itemStyle: { color: '#52c41a' },
         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)' }
+            { offset: 0, color: 'rgba(82, 196, 26, 0.3)' },
+            { offset: 1, color: 'rgba(82, 196, 26, 0.05)' }
           ])
-        },
-        precision: 2,
         }
-    ]
+      }
+    ],
+    animation: true,
+    animationDuration: 600
   };
 
-  chartInstance.value.setOption(option, {
-    replaceMerge: ['tooltip', 'series', 'xAxis', 'yAxis'],
-    lazyUpdate: false
-  });
+  myChart.setOption(option, true);
 };
 
-onMounted(async () => {
-  // 关键修复：先初始化图表，再获取数据渲染
-  await initChart();
-  await fetchList(props.formParams);
-});
+const resizeChart = () => {
+  myChart?.resize({ animation: { duration: 300 } });
+};
+
+const debounceResize = () => {
+  if (resizeTimer) clearTimeout(resizeTimer);
+  resizeTimer = window.setTimeout(resizeChart, 100);
+};
 
 watch(
   () => props.formParams,
-  async (newParams) => {
-    await fetchList(newParams);
+  (newParams) => {
+    if (Object.keys(newParams).length) {
+      fetchDataList(newParams);
+    }
   },
-  { deep: true, immediate: false }
+  { deep: true, immediate: true }
 );
 
+watchEffect(() => initChart());
+
+onMounted(() => {
+  fetchDataList(props.formParams);
+  window.addEventListener('resize', debounceResize);
+});
+
 onUnmounted(() => {
-  // 移除所有事件监听
-  window.removeEventListener('resize', resizeHandler);
-  if (chartInstance.value) {
-    // 移除图例点击事件监听
-    chartInstance.value.off('legendselectchanged');
-    chartInstance.value.dispose();
-    chartInstance.value = null;
-  }
+  clearTimeout(resizeTimer);
+  window.removeEventListener('resize', debounceResize);
+  myChart?.dispose();
+  myChart = null;
 });
 </script>
 
 <style scoped>
-/* extra插槽容器：状态标签 + 更多按钮 横向排列 */
 .status-filter-container {
   display: flex;
   align-items: center;
   gap: 16px;
 }
 
-/* 状态筛选栏（非按钮样式） */
 .status-filter {
   display: flex;
-  align-items: center;
-  flex-wrap: wrap;
-  gap: 12px; /* 标签间距 */
+  gap: 12px;
   font-size: 14px;
 }
 
-/* 状态项样式（纯文本标签） */
 .status-item {
   cursor: pointer;
   color: #666;
@@ -315,13 +271,11 @@ onUnmounted(() => {
   user-select: none;
 }
 
-/* 选中状态样式（下划线 + 高亮色） */
 .status-item.active {
   color: #1890ff;
   font-weight: 500;
 }
 
-/* 选中状态下划线 */
 .status-item.active::after {
   content: '';
   position: absolute;
@@ -329,36 +283,21 @@ onUnmounted(() => {
   left: 0;
   width: 100%;
   height: 2px;
-  background-color: #1890ff;
+  background: #1890ff;
   border-radius: 1px;
 }
 
-/* 悬浮效果 */
 .status-item:not(.active):hover {
   color: #40a9ff;
 }
 
 :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 !important;
-  min-height: 32px;
-  line-height: 32px;
-  border-bottom: 1px solid #f0f0f0;
-}
-
-:deep(.ant-card-head-title) {
-  font-size: 14px;
-  padding: 0;
+  border-radius: 8px;
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
 }
 
 :deep(.ant-card-body) {
   padding: 0 !important;
-  margin: 0;
-  height: calc(100% - 32px);
+  height: 100%;
 }
 </style>