veepai-service-details

服务器监控详情组件库，基于 Vue3 + TypeScript + ECharts 开发，用于展示服务器的实时监控数据。

✨ 核心特性

• 📊 四大监控图表 - CPU使用率、内存使用率、网络流量、系统负载
• ⚡ 快速渲染 - 先用初始数据渲染，再异步更新最新数据
• 🎨 ECharts可视化 - 基于 ECharts 的高性能折线图
• 🔄 智能更新 - 抽屉打开时自动更新，关闭时清理数据
• 🌐 环境切换 - 内置 API，根据环境变量自动切换接口地址
• 📱 响应式布局 - 自动适应窗口大小

📦 安装

npm install veepai-service-details
# 或
yarn add veepai-service-details
# 或
pnpm add veepai-service-details

依赖说明

项目中需要安装（peerDependencies）：

# 必须安装的核心依赖
npm install vue@^3.0.0 echarts@^5.0.0

🚀 快速开始

❗ 重要：引入样式文件

必须手动导入 CSS 样式文件，否则组件无法正常显示！

// 在使用组件的文件中导入样式
import { ServiceDetails } from 'veepai-service-details'
import 'veepai-service-details/dist/index.css' // ⚠️ 必须导入！

或者在入口文件中全局导入：

// main.ts
import { createApp } from 'vue'
import App from './App.vue'
import 'veepai-service-details/dist/index.css' // 全局导入样式

const app = createApp(App)
app.mount('#app')

全局注册

// main.ts
import { createApp } from 'vue'
import ServiceDetailsPlugin from 'veepai-service-details'
import 'veepai-service-details/dist/index.css' // 导入样式
import App from './App.vue'

const app = createApp(App)
app.use(ServiceDetailsPlugin)
app.mount('#app')

局部注册（推荐）

<template>
  <el-drawer v-model="drawerVisible" title="服务器详情" size="80%" destroy-on-close>
    <ServiceDetails :server-data="currentServer" :drawer-visible="drawerVisible" :env="currentEnv" />
  </el-drawer>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { ServiceDetails } from 'veepai-service-details'
import 'veepai-service-details/dist/index.css' // 导入样式

const drawerVisible = ref(false)
const currentEnv = ref(import.meta.env.MODE) // 环境变量：development/test/production

const currentServer = ref({
  instance: '192.168.1.100:9090',
  cpuUsage: {
    timestamps: ['2025-01-09 10:00', '2025-01-09 10:01'],
    values: [45.2, 48.5],
  },
  memUsage: {
    timestamps: ['2025-01-09 10:00', '2025-01-09 10:01'],
    values: [62.3, 63.1],
  },
  networkIn: {
    timestamps: ['2025-01-09 10:00', '2025-01-09 10:01'],
    values: [1024000, 1056000],
  },
  networkOut: {
    timestamps: ['2025-01-09 10:00', '2025-01-09 10:01'],
    values: [512000, 528000],
  },
  load1: {
    timestamps: ['2025-01-09 10:00', '2025-01-09 10:01'],
    values: [1.2, 1.3],
  },
  load5: {
    timestamps: ['2025-01-09 10:00', '2025-01-09 10:01'],
    values: [1.5, 1.6],
  },
  load15: {
    timestamps: ['2025-01-09 10:00', '2025-01-09 10:01'],
    values: [1.8, 1.9],
  },
})

const openDrawer = (server: any) => {
  currentServer.value = server
  drawerVisible.value = true
}
</script>

📖 API 文档

ServiceDetails 组件

Props

| 参数 | 类型 | 必填 | 默认值 | 说明 | | --------------- | --------- | ---- | ---------------------- | ---------------------------------------------------------- | | serverData | object | ✅ | - | 服务器数据（包含初始监控数据，用于快速渲染） | | drawerVisible | boolean | ✅ | - | 抽屉显隐状态（用于控制数据加载和清理） | | env | string | ❌ | import.meta.env.MODE | 环境变量（development/test/production），自动切换 API 地址 |

serverData 数据结构

interface ServerData {
  instance: string // 服务器实例标识，格式：'ip:port'
  cpuUsage?: {
    timestamps: string[] // 时间戳数组
    values: number[] // CPU使用率数组（0-100）
  }
  memUsage?: {
    timestamps: string[]
    values: number[] // 内存使用率数组（0-100）
  }
  networkIn?: {
    timestamps: string[]
    values: number[] // 网络流入字节数
  }
  networkOut?: {
    timestamps: string[]
    values: number[] // 网络流出字节数
  }
  load1?: {
    timestamps: string[]
    values: number[] // 1分钟负载
  }
  load5?: {
    timestamps: string[]
    values: number[] // 5分钟负载
  }
  load15?: {
    timestamps: string[]
    values: number[] // 15分钟负载
  }
}

🌐 环境变量与 API 地址映射

组件内置 API 方法，会根据 env 参数自动切换接口地址：

| 环境 | env 值 | API 地址 | 接口路径前缀 | | -------- | ----------- | --------------------------------- | ----------------------- | | 开发环境 | development | http://192.168.252.76:25624 | 无（直接 /service/...） | | 测试环境 | test | http://192.168.252.115:2123 | /unifiledClound | | 生产环境 | production | https://api-asset03.eye4cloud.com | /unifiledClound |

完整接口 URL 示例：

// 开发环境
http://192.168.252.76:25624/service/find/MonitorIndicators

// 测试环境
http://192.168.252.115:2123/unifiledClound/service/find/MonitorIndicators

// 生产环境
https://api-asset03.eye4cloud.com/unifiledClound/service/find/MonitorIndicators

🎯 使用场景

场景1：在 Element Plus 抽屉中使用

<template>
  <div>
    <el-table :data="serverList">
      <el-table-column label="操作">
        <template #default="{ row }">
          <el-button @click="viewDetails(row)">详情</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-drawer v-model="drawerVisible" title="服务器监控详情" size="80%" destroy-on-close>
      <ServiceDetails v-if="currentServer" :server-data="currentServer" :drawer-visible="drawerVisible" :env="currentEnv" />
    </el-drawer>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { ServiceDetails } from 'veepai-service-details'
import 'veepai-service-details/dist/index.css' // 导入样式

const drawerVisible = ref(false)
const currentServer = ref(null)
const currentEnv = ref(import.meta.env.MODE)

const serverList = ref([
  {
    instance: '192.168.1.100:9090',
    // ... 监控数据
  },
])

const viewDetails = (server: any) => {
  currentServer.value = server
  drawerVisible.value = true
}
</script>

场景2：直接在页面中使用（不使用抽屉）

<template>
  <div class="monitor-container">
    <ServiceDetails :server-data="serverData" :drawer-visible="true" :env="currentEnv" />
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { ServiceDetails } from 'veepai-service-details'

const currentEnv = ref(import.meta.env.MODE)
const serverData = ref({
  instance: '192.168.1.100:9090',
  // ... 初始数据
})
</script>

场景3：手动指定环境

<template>
  <ServiceDetails :server-data="serverData" :drawer-visible="visible" env="production" />
</template>

<script setup lang="ts">
// 不管当前实际环境是什么，强制使用生产环境的 API
</script>

🔧 数据处理说明

1. 网络流量单位转换

组件会自动将网络流量数据从**字节（Byte）**转换为 KB：

// 转换公式：KB = Byte / 8 / 1024
// 示例：1024000 字节 = 125 KB

2. CPU/内存数据精度

CPU 和内存使用率数据会保留 2 位小数：

// 原始值：45.23456
// 显示值：45.23%

3. 负载数据

系统负载数据直接显示，不做单位转换：

// load1: 1.23
// load5: 1.45
// load15: 1.67

⚠️ 注意事项

1. 必须导入样式文件：

   import 'veepai-service-details/dist/index.css'

   如果没有导入样式，会导致：

   • 图表容器高度为 0，无法显示
   • ECharts 报错：Can't get DOM width or height
   • 控制台警告：[ServiceChart] DOM 尺寸无效 (height: 0)

2. 必须提供 serverData：组件依赖 serverData.instance 字段来解析服务器 IP 和端口

3. drawerVisible 控制数据生命周期：

   • true → 加载初始数据 → 调用 API 更新最新数据
   • false → 清空所有图表数据

4. 环境变量说明：

   • 不传 env 时，自动使用 import.meta.env.MODE
   • 可手动传入 env 参数强制指定环境

5. 时间戳格式：timestamps 数组中的时间字符串会在 X 轴显示时，将空格替换为换行符（如 2025-01-09 10:00 显示为两行）

6. 性能优化：

   • 图表会自动监听窗口 resize 事件
   • 组件卸载时会自动销毁图表实例
   • 使用 destroy-on-close 搭配抽屉使用

🔄 更新日志

v1.0.2 (2025-01-09)

• 🐛 修复 CSS 样式打包问题，确保样式文件正常生成
• ⚙️ 配置 cssCodeSplit: false 合并 CSS 到单个文件
• 📝 更新文档，添加样式引入说明
• ⏱️ 优化抽屉动画延迟，修复 ECharts DOM 尺寸为 0 的问题

v1.0.1 (2025-01-09)

• ✨ 内置 API 方法，根据环境变量自动切换接口地址
• 🔧 移除 onGetMonitorIndicators prop，简化使用方式
• 📝 更新文档说明

v1.0.0 (2025-01-09)

• ✨ 初始版本发布
• 📊 支持 CPU、内存、网络、负载四大监控图表
• ⚡ 快速渲染优化

❓ 常见问题

Q1: 图表不显示，控制台报错 "DOM 尺寸无效"

问题现象：

[ServiceChart] DOM 尺寸无效 (width: 550, height: 0)
Can't get DOM width or height. Please check dom.clientWidth and dom.clientHeight.

原因：没有导入 CSS 样式文件，导致图表容器高度为 0。

解决方案：

// 在使用组件的文件中添加
import 'veepai-service-details/dist/index.css'

Q2: 本地引入源码正常，但 npm 包不行

原因：本地引入源码时，Vite 会自动处理样式；但构建后的 npm 包需要手动导入 CSS。

解决方案：

// 从本地源码引入（开发时）
import { ServiceDetails } from '/@/veepai-service-details/src'

// 从 npm 包引入（生产时）
import { ServiceDetails } from 'veepai-service-details'
import 'veepai-service-details/dist/index.css' // 必须添加！

Q3: 如何更改图表样式？

方法1：覆盖 CSS 变量（在导入样式后）

/* 自定义样式 */
.service-chart {
  height: 500px !important; /* 修改图表高度 */
}

方法2：使用深度选择器

<style scoped>
:deep(.service-chart) {
  height: 500px;
}
</style>

Q4: 如何调试 API 请求？

组件内置了控制台日志，打开抽屉时会输出：

🔍 [服务器监控] 请求环境: development, API: http://192.168.252.76:25624/service/find/MonitorIndicators

检查该日志确认：

• 环境变量是否正确
• API 地址是否匹配当前环境
• 路径前缀是否正确（开发环境无前缀，测试/生产有 /unifiledClound）

🤝 贡献

欢迎提交 Issue 和 Pull Request！

📄 许可证

MIT License

🔗 相关链接

• ECharts 文档
• Vue 3 文档
• TypeScript 文档