主题
业务数据明细
基础信息
| 项 | 说明 |
|---|---|
| 菜单路径 | /businessDataCenter/serviceDataDetails/common |
| 路由名称 | /businessDataCenter/serviceDataDetails/common |
| 页面组件 | src/views/businessDataCenter/serviceDataDetails/common/index.vue |
| 接口模块 | 无独立 API 文件，各 Tab 组件内通过 this.$api.post('home/xxx') 直接调用 |
| Store | common.userInfo（读取首页权限类型） |
| 页面定位 | 业务数据中台的汇总首页，按「通用 / 销售 / 运营 / 经营」四个维度聚合展示经营与业务数据 |
Tab 与权限说明
页面顶部为 el-tabs，Tab 项并非固定，而是由当前用户的首页权限类型动态生成：
- 权限字段：
userInfo.homePageAuthType（Vuexcommon.userInfo），为逗号分隔的数字字符串 - 映射关系（
common/index.vue中activeArr计算）：
| 权限值 | Tab 名称 | 渲染组件 |
|---|---|---|
1 | 通用类 | currency/index.vue |
2 | 销售类 | sale/index.vue |
3 | 运营类 | operate/index.vue |
4 | 经营类 | management/index.vue |
用户只看到其权限值对应的 Tab；默认选中第一个（Currency）。切换 Tab 时通过 <component :is="activeName"> 动态渲染对应组件，并附带 slide-fade 过渡动画。
页面功能
1. 通用类（Currency）
整体栅格布局：左侧 19 栏（金额统计 + 地区分布地图），右侧 5 栏（快捷入口 + 公众号数据）。
- 金额统计（
AmountStatistics）：核心经营金额指标卡片 - 地区分布地图（
mapCharts，ECharts 中国地图）：按地区统计累计报案数量、手机维修商服务网点数量、宠物服务商网点数量三类数据 - 快捷入口（
Shortcut）：常用功能跳转 - 公众号数据（
OfficialAccount）：最新微信公众号数据概览
2. 销售类（Sale）
围绕销售订单与佣金的统计看板。
- 销售订单统计（
SaleOrder） - 退款订单统计（
RefundOrder） - 销售佣金统计（
SalesCommission）
3. 运营类（Operate）
运营侧多维数据统计，含工单、供应商、投诉、设备等多类图表。
- 工单数据统计（
OrderData）：服务工单、保险退款、已审保单、黑名单、投诉工单等 - 供应商数据统计（
SupplierData） - 占比类图表（
PieCharts）：维修方式占比、智能推荐使用率、关单时间、设备型号 / 品牌分布等
4. 经营类（management）
经营管理视角的工单与收支统计。
- 服务工单统计（
SaleOrder） - 销售订单统计（
RefundOrder） - 收入支出统计（
income）：支持分页查询与删除
使用组件
| 组件 | 路径 | 用途 |
|---|---|---|
Container | @/components/container | 通用页面容器（标题、面包屑） |
AmountStatistics | ../currency/amountStatistics | 通用类金额统计 |
mapCharts | @/components/echarts/map | 通用类地区分布地图 |
OfficialAccount | ../currency/officialAccount | 公众号数据 |
Shortcut | ../currency/shortcut | 快捷入口 |
SaleOrder / RefundOrder / SalesCommission | ../sale/* | 销售类各统计模块 |
OrderData / SupplierData / PieCharts | ../operate/* | 运营类各统计模块 |
SaleOrder / RefundOrder / income | ../management/* | 经营类各统计模块 |
ElTabs / ElTabPane / ElRow / ElCol | element-ui | Tab 切换与栅格布局 |
第三方 / 工具
| 依赖 | 用途 |
|---|---|
echarts（经 @/components/echarts/map 封装） | 地区分布地图 |
vuex（mapState） | 读取用户首页权限类型 |
使用 Store
| Store | 使用位置 | 用途 |
|---|---|---|
common.userInfo（mapState） | common/index.vue | 读取 homePageAuthType 决定展示哪些 Tab |
调用接口
所有接口实际请求统一带
/api前缀（下表 URL 为业务路径简写，如home/xxx→/api/home/xxx）。
业务数据明细无独立 API 文件，各 Tab 组件内通过 this.$api.post(url) 直接调用，URL 统一以 home/ 为前缀。
| 接口 URL | 所属 Tab | 用途 |
|---|---|---|
home/queryReportMapOfArea | 通用类 | 地区报案 / 网点分布 |
home/statisticsChart | 通用类 | 金额统计图表 |
home/getNewestWechatAccount | 通用类 | 最新公众号数据 |
home/saleOrderStatistics | 销售类 | 销售订单统计 |
home/refundOrderStatistics | 销售类 | 退款订单统计 |
home/orderCommissionStatistics | 销售类 | 订单佣金统计 |
home/serviceOrderStatistics | 运营类 | 服务工单统计 |
home/insuranceRefundStatistics | 运营类 | 保险退款统计 |
home/checkedPolicyStatistics | 运营类 | 已审保单统计 |
home/blackListStatistics | 运营类 | 黑名单统计 |
home/coOrderStatistics | 运营类 | 投诉工单统计 |
home/maintenanceModeStatistics | 运营类 | 维修方式统计 |
home/repairArrangeRecommendRateStatistics | 运营类 | 智能推荐使用率 |
home/avgExitDurationStatistics | 运营类 | 关单时间统计 |
home/equipmentModelStatistics | 运营类 | 设备型号统计 |
home/equipmentBrandStatistics | 运营类 | 设备品牌统计 |
home/managementServiceOrderStatistics | 经营类 | 服务工单统计 |
home/managementSaleOrderStatistics | 经营类 | 销售订单统计 |
home/incomeExpendPageQuery | 经营类 | 收入支出分页查询 |
home/incomeExpendDelete | 经营类 | 收入支出删除 |
修改记录
| 修改人 | 修改时间 | 修改内容 |
|---|---|---|
| zhouw | 2026-07-03 | 编写页面内容 |