主题
手机工单监控
基础信息
| 项 | 说明 |
|---|---|
| 菜单路径 | /operationsManagement/statisticAnalysis/workOrderMonitoring |
| 路由名称 | work-order-monitoring |
| 页面组件 | src/views/operationsManagement/statisticAnalysis/workOrderMonitoring/index.vue |
| 接口模块 | 组件内 this.$api.post(...) 直接调用 |
| Store | 无 |
| 页面定位 | 按多维筛选条件监控手机维修工单的数量、金额、时效、维修品质等多类图表看板 |
页面功能
页面由 SearchFilter（筛选区）与 ChartsPanel（图表区）两个子组件构成。筛选区查询时通过 $emit('onParams', params) 把条件传给父组件，父组件再调用 ChartsPanel.getChartsData(params) 刷新图表。
1. 筛选区（SearchFilter）
筛选条件包括：承保公司（多选级联）、服务商（多选）、品牌/机型（多选级联）、工单状态（多选级联）、项目名称（多选）、展示维度（日 / 周 / 月）、派单时间、保险报案日期、工单关单时间。
筛选区存在联动与互斥逻辑：
- 至少选一个时间：派单时间、保险报案日期、工单关单时间三选一，否则提示「至少选择一项！」。
- 工单状态联动：
- 工单状态全为
3*（已派单类）或4*（已关单类）时，才允许选服务商、派单时间。 - 仅当工单状态全为
4*时，才允许选关单时间；其余情况关单时间禁用并清空。
- 工单状态全为
- 30 天校验：展示维度为「日」时，时间区间不得超过 31 天。
- 选择任一时间会清空其余两个时间区间（三者互斥）。
筛选下拉项通过以下接口初始化：commodity/getList（项目）、businessCustomer/getTreeList（承保公司）、product/equipmentModel/getAllBrandAndModel（品牌型号）、supplier/getlist（服务商）、ddic/getList（工单状态 service_order_status、展示维度 time_dimension）。
2. 图表区（ChartsPanel）
按工单状态动态决定展示哪些图表。核心接口：wo/blackList/statistics，参数中带 chartType（1~16）分别取不同图表。
| chartType | 图表 | 组件 |
|---|---|---|
| 1 | 工单数 | BarAndLine（柱状） |
| 2 | 按工单状态（可下钻） | drillPieCharts（下钻饼图） |
| 3 | 黑屏率 | drillPieCharts（饼图） |
| 4 | 维修方式（可下钻到维修品质） | drillPieCharts（下钻饼图） |
| 5 | 配件占比 | drillPieCharts（饼图） |
| 6 | 单均金额 | multipleLineCharts（折线） |
| 7 | 关单时效 | multipleLineCharts（折线） |
| 8 | 返修率 | drillPieCharts（饼图） |
| 9 | 工单/按维修方式 | multipleLineCharts（柱状） |
| 10 | 内外屏比例 | multipleLineCharts（柱状） |
| 11 | 单均金额 | multipleLineCharts（柱状） |
| 12 | 关单时效 | multipleLineCharts（柱状） |
| 13 | 返修率 | multipleLineCharts（柱状） |
| 14 | 合计金额 | multipleLineCharts（柱状） |
| 15 | 合计金额 | multipleLineCharts（折线） |
| 16 | 拒赔率 | multipleLineCharts（折线） |
当工单状态全为
3*/4*时，图表 4~16 会被隐藏（hideChartList），仅展示 1~3。
使用组件
| 组件 | 路径 | 用途 |
|---|---|---|
SearchFilter | ./components/SearchFilter | 筛选区 |
ChartsPanel | ./components/ChartsPanel | 图表区 |
SearchContainer | @/components/SearchTableContainer | 筛选区容器 |
insuranceCompanyCascader | @/components/insuranceCompanyCascader | 承保公司级联 |
phoneBrandSelect | @/components/phoneBrandSelect | 品牌型号选择 |
BarAndLine | @/components/echarts/barAndLine | 柱状/折线图 |
drillPieCharts | @/components/echarts/drillPie | 下钻饼图 |
multipleLineCharts | @/components/echarts/multipleLine | 多折线/柱状图 |
使用 Store
无。
调用接口
所有接口实际请求统一带
/api前缀（下表 URL 为业务路径简写，如wo/xxx→/api/wo/xxx）。
| 接口 URL | 用途 |
|---|---|
wo/blackList/statistics | 各图表数据（按 chartType 区分） |
commodity/getList | 项目名称下拉 |
businessCustomer/getTreeList | 承保公司树 |
product/equipmentModel/getAllBrandAndModel | 品牌/型号级联数据 |
supplier/getlist | 服务商列表 |
ddic/getList | 字典（工单状态 / 展示维度） |
修改记录
| 修改人 | 修改时间 | 修改内容 |
|---|---|---|
| zhouw | 2026-07-03 | 初始化页面 |
| zhouw | 2026-07-09 | 编写页面内容 |