客户业务概览功能说明

功能概述

客户业务概览功能为系统管理员和业务人员提供了一个全面的客户数据可视化界面,用于快速了解单个客户的整体业务状况,包括项目、设备、维护计划和工单等关键指标。

功能入口

• 路由路径: /business/customer-overview
• 页面文件: ui/src/views/business/customer-overview/index.vue
• 权限要求: business:customer:query

主要功能模块

1. 总体统计卡片

显示客户的核心业务指标,包括:

2. 项目详情表格

展示客户所有项目的详细信息:

3. 设备统计图表

通过可视化图表展示设备分布情况:

3.1 按供应商统计 (饼图)

• 显示不同供应商提供的设备数量分布
• 自动统计所有供应商及其对应的设备数量
• 未指定供应商的设备归类为”未知供应商”

3.2 按设备状态统计 (环形图)

• 显示设备在不同状态下的数量分布
• 支持的状态:
  • 正常 (normal)
  • 警告 (warning)
  • 故障 (fault)
  • 维护中 (maintenance)
  • 离线 (offline)
  • 报废 (scrapped)

4. 工单状态分布 (柱状图)

展示客户所有工单在各状态下的分布情况:

5. 维护计划统计表格

展示客户所有维护计划的详细信息:

技术实现

前端实现

文件位置: ui/src/views/business/customer-overview/index.vue

核心技术:

• Vue 3 Composition API
• Element Plus UI组件
• ECharts 图表库
• 响应式布局设计

页面参数:

• customerId: 客户ID (通过路由query参数传递)
• customerName: 客户名称 (通过路由query参数传递)

后端实现

API接口

接口地址: GET /business/customer/business-overview/{customerId}

Controller:

// 文件: BzCustomerController.java (第332行)
@PreAuthorize("@ss.hasPermi('business:customer:query')")
@GetMapping("/business-overview/{customerId}")
public AjaxResult getCustomerBusinessOverview(@PathVariable("customerId") Long customerId)

Service接口:

// 文件: IBzCustomerService.java (第134行)
public CustomerBusinessOverviewVo getCustomerBusinessOverview(Long customerId);

Service实现:

// 文件: BzCustomerServiceImpl.java (第353-553行)
// 包含完整的数据统计和组装逻辑

数据模型

VO类: CustomerBusinessOverviewVo.java

CustomerBusinessOverviewVo
├── projectCount: Integer                           // 项目数量
├── equipmentCount: Integer                         // 设备数量
├── maintenancePlanCount: Integer                   // 维护计划数量
├── workOrderCount: Integer                         // 工单数量
├── projectDetails: List<ProjectDetailVo>           // 项目详情列表
├── maintenancePlanDetails: List<MaintenancePlanDetailVo>  // 维护计划详情
├── equipmentStats: EquipmentStatsVo                // 设备统计
└── workOrderStats: List<WorkOrderStatVo>           // 工单统计

数据来源

业务逻辑

1. 数据查询: 根据客户ID查询所有相关的项目、设备、维护计划和工单数据
2. 数据统计: 统计各类数据的总数和分类统计
3. 数据分组:
   • 设备按供应商和状态分组
   • 工单按状态分组
   • 项目关联的设备和工单分组统计
4. 标签转换: 将数据库中的英文状态码转换为中文标签
5. 数据组装: 将统计结果组装成前端需要的数据结构

使用场景

1. 客户管理: 管理员查看客户整体业务状况
2. 项目监控: 快速了解客户各项目的运行情况
3. 设备监控: 监控客户所有设备的运行状态
4. 工单分析: 分析客户工单处理情况
5. 维护跟踪: 跟踪客户维护计划执行情况

访问示例

// 从客户列表页面跳转
router.push({
  path: '/business/customer-overview',
  query: {
    customerId: 123,
    customerName: '某某科技有限公司'
  }
})

响应式设计

页面支持移动端和平板设备访问:

• 移动端: 统计卡片纵向排列,字体适配
• 平板设备: 部分卡片缩小显示
• 桌面端: 完整4列布局展示

性能优化

1. 数据缓存: 使用Vue的响应式数据,避免重复请求
2. 按需加载: 图表在数据加载完成后才初始化
3. 图表销毁: 页面卸载时自动销毁图表实例,释放内存
4. 分页支持: 表格数据支持前端分页和排序

扩展建议

1. 时间范围筛选: 添加日期范围选择器,支持查看特定时间段的数据
2. 导出功能: 支持将概览数据导出为PDF或Excel
3. 数据对比: 支持多个客户的数据对比分析
4. 趋势分析: 添加时间趋势图,展示数据变化趋势
5. 告警提醒: 添加异常数据告警功能

注意事项

1. 需要确保用户具有 business:customer:query 权限
2. 客户ID必须有效,否则返回空数据
3. 图表渲染需要等待DOM元素加载完成
4. 大数据量时建议添加分页或虚拟滚动
5. 确保后端Mapper接口支持按客户ID查询

相关文件清单

前端文件

• ui/src/views/business/customer-overview/index.vue - 页面组件
• ui/src/api/business/customer.js - API接口定义

后端文件

• src/main/java/com/husky/business/controller/BzCustomerController.java - 控制器
• src/main/java/com/husky/business/service/IBzCustomerService.java - 服务接口
• src/main/java/com/husky/business/service/impl/BzCustomerServiceImpl.java - 服务实现
• src/main/java/com/husky/business/vo/CustomerBusinessOverviewVo.java - VO类
• src/main/java/com/husky/business/mapper/BzProjectMapper.java - 项目Mapper
• src/main/java/com/husky/business/mapper/BzEquipmentMapper.java - 设备Mapper
• src/main/java/com/husky/business/mapper/BzMaintenancePlanMapper.java - 维护计划Mapper
• src/main/java/com/husky/business/mapper/BzWorkOrderMapper.java - 工单Mapper

文档版本: v1.0
创建日期: 2025-10-15
最后更新: 2025-10-15
维护人员: Claude Code