新增前端vue

2026-02-09 15:13:09 +08:00
parent 1de2958fd1
commit fc968e74a1
3 changed files with 176 additions and 82 deletions
--- 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';
+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>; // 接收参数
-  }>();
+const props = defineProps<{
+  formParams: Record<string, any>; // 接收参数
+}>();

-  const serverInfo = ref<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; /* 滚动条宽度 */
 }
--- 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>
--- 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">