多云账单分析工具是一款基于Vue.js的Web应用，旨在帮助用户快速、直观地分析来自不同云服务提供商（如阿里云、腾讯云、火山引擎）的账单数据。用户只需上传CSV或Excel格式的账单文件，该工具即可自动解析、处理数据，并通过一系列图表和表格，从多个维度清晰地展示费用分布情况，从而辅助用户进行成本优化和预算管理。
本工具完全在浏览器端运行，无需后端服务，确保了用户数据的隐私和安全。
- 自动识别: 能根据文件的表头特征，自动识别出账单所属的云平台（阿里云、腾讯云、火山引擎）。
- 手动选择: 用户也可以手动指定云平台，以确保解析的准确性。
- Excel支持: 新增对Excel文件(.xlsx)的支持。
- 总费用趋势分析: 以堆叠柱状图展示每月总费用的变化趋势，并显示与上月相比的增减金额。
- 消费排行-TOP15: 显示最新月份消费金额最高的15个实例，支持一键复制实例ID。
- 项目费用统计: 以表格形式详细列出各项目在各月份的费用及合计。
- 资源分类费用统计: 以表格形式展示各类资源在不同项目下的费用分布。
- 项目费用分布: 以饼图直观展示各个项目的费用占比。
- 基于处理后的数据源构建明细表格
- 列字段：产品、各月费用、合计
- 支持横向滚动条
- 点击按钮导出当前视图数据为Excel格式
- 导出内容包含所有表格数据
- 响应式布局
- 使用Element Plus组件库
- 主色调采用蓝橙渐变色系
- 完善错误提示机制
- Vue 3: 前端框架
- Element Plus: UI组件库
- ECharts: 图表库
- XLSX.js: Excel处理库
- Vite: 构建工具
- lodash: 数据处理工具库
- dayjs: 日期处理库
.
├── src/
│ ├── main.js # 应用入口文件
│ ├── App.vue # 主应用组件
│ ├── components/ # 组件目录
│ ├── utils/ # 工具函数目录
│ └── assets/ # 静态资源目录
├── index.html # 应用主页面
├── package.json # 项目依赖和脚本配置
├── vite.config.js # Vite配置文件
├── encoding-utils.js # 编码检测工具
├── papaparse.min.js # CSV解析库
├── README.md # 项目说明文件
└── style.css # 全局样式文件
-
安装依赖:
npm install
-
启动开发服务器:
npm run dev
-
构建生产版本:
npm run build
-
预览生产版本:
npm run serve
- 访问 火山引擎账单详情页面
- 在账单详情中选择"账单明细"
- 按账期选择并下载完整表格
- 访问 腾讯云账单下载页面
- 在账单确认和盖章中选择账期
- 下载并解压文件后，使用"L2-资源账单"文件
- 访问 阿里云明细账单页面
- 在账单详情中选择"明细账单"
- 按账期选择并下载全部内容
使用encoding-utils.js文件中的工具函数来检测和处理不同编码格式的文件，确保正确读取各种来源的CSV文件。
通过检测CSV文件的表头字段来自动识别云平台类型:
- 阿里云: 包含
财务单元、应付金额、实例ID、实例昵称、账期等字段 - 腾讯云: 包含
项目名称、现金支付(元)、资源ID、实例名称、账单月等字段 - 火山引擎: 包含
项目、应付金额、实例ID、实例名称、账务账期等字段
使用专门的处理器类来处理不同云平台的数据格式，将数据标准化为统一的结构以便后续分析。
使用ECharts来展示各种图表:
- 总费用趋势图: 展示每月总费用的变化趋势
- 项目费用分布图: 以饼图形式展示各项目的费用占比
- 实例聚合: 按实例ID分组累加消费金额，支持三大云平台字段映射
- 智能排序: 自动按金额降序排列，取前15名高消费实例
- 交互复制: 点击实例名称一键复制对应实例ID到剪贴板
- 视觉突出: 前三名采用特殊样式突出显示
- 响应式设计: 支持移动端适配，带有平滑加载动画
使用Element Plus的表格组件来展示详细数据，支持横向滚动和固定列。
使用XLSX.js库将表格数据导出为Excel文件。
应用采用组件化设计，主要包含以下组件:
- 文件上传组件: 处理文件选择和上传
- 图表组件: 展示各种分析图表
- 消费排行组件: TOP15实例消费排行榜
- 表格组件: 展示详细数据表格
- 导出组件: 处理数据导出功能
通过这种模块化设计，确保了代码的可维护性和可扩展性。