# 视图与仪表盘设计模板

## 📱 不同角色的视图设计

### 角色1：业务员

**我的订单视图（表格视图）**
- 筛选：负责人 = 当前用户
- 显示字段：订单号、客户、产品、数量、状态、预计交期
- 排序：按创建时间倒序

**进行中订单（看板视图）**
- 分组：按订单阶段分组
- 筛选：订单状态 = "进行中"
- 卡片：订单号、客户、当前阶段、负责人

**客户列表（表格视图）**
- 显示字段：客户名称、联系人、电话、累计订单、累计金额
- 排序：按累计金额倒序

**订单日历（日历视图）**
- 时间字段：预计交期
- 显示：订单号、客户、金额
- 颜色：按状态着色

---

### 角色2：跟单员

**我的跟单任务（表格视图）**
- 筛选：跟单负责人 = 当前用户
- 显示字段：订单号、当前阶段、任务状态、完成时间
- 排序：按预计交期升序

**生产进度（甘特图视图）**
- 开始时间：排单日期
- 结束时间：预计交期
- 分组：按订单号

**延期订单（筛选视图）**
- 筛选：预计交期 < 今天 且 状态 ≠ "已完成"
- 显示字段：订单号、客户、延期天数、当前阶段
- 排序：按延期天数倒序

---

### 角色3：财务员

**收支明细（表格视图）**
- 显示字段：订单号、出货日期、收入、成本、毛利、毛利率
- 排序：按出货日期倒序

**应收账款（筛选视图）**
- 筛选：未收款 > 0
- 显示字段：客户、应收、已收、未收、最后收款日期
- 排序：按未收款倒序

**应付账款（筛选视图）**
- 筛选：未付款 > 0
- 显示字段：供应商、应付、已付、未付、最后付款日期
- 排序：按未付款倒序

**财务仪表盘**
- 指标卡：本月收入、本月支出、本月毛利
- 折线图：月度收支趋势
- 饼图：收入来源分布
- 柱状图：供应商付款对比

---

### 角色4：仓管员

**入库记录（表格视图）**
- 显示字段：订单号、产品、数量、入库日期、码单
- 排序：按入库日期倒序

**出库记录（表格视图）**
- 显示字段：订单号、产品、数量、出库日期、收货人
- 排序：按出库日期倒序

**库存查询（表格视图）**
- 显示字段：产品、库存数量、安全库存、状态
- 筛选：库存 < 安全库存（低库存）
- 排序：按库存数量升序

---

### 角色5：管理层

**订单总览（仪表盘）**
- 指标卡：
  - 进行中订单数
  - 本月新增订单
  - 本月完成订单
  - 延期订单数

- 图表：
  - 订单趋势（折线图）- 按月统计
  - 客户分布（饼图）- 按客户级别
  - 订单阶段分布（柱状图）
  - 延期原因分析（词云）

**财务概览（仪表盘）**
- 指标卡：
  - 本月收入
  - 本月支出
  - 本月毛利
  - 毛利率

- 图表：
  - 收支趋势（折线图）
  - 毛利趋势（面积图）
  - 客户收款排行（条形图）
  - 供应商付款对比（柱状图）

**团队绩效（仪表盘）**
- 指标卡：
  - 团队人数
  - 平均每人订单数
  - 平均每人完成额

- 图表：
  - 业务员业绩排行（条形图）
  - 跟单员效率对比（柱状图）
  - 部门协作网络（关系图）

---

## 🎨 仪表盘组件库

### 1. 指标卡（KPI Card）
**用途：** 显示关键指标
**内容：**
- 指标名称
- 当前值
- 同比/环比
- 趋势图标

**示例：**
- 本月订单数：120笔 ↑15%
- 本月收入：¥500万 ↑20%

### 2. 折线图（Line Chart）
**用途：** 显示趋势变化
**适用：** 时间序列数据
**示例：**
- 订单趋势
- 收支趋势
- 毛利趋势

### 3. 柱状图（Bar Chart）
**用途：** 对比不同类别
**适用：** 分类数据对比
**示例：**
- 各部门订单数
- 各产品销量
- 供应商付款对比

### 4. 饼图（Pie Chart）
**用途：** 显示占比
**适用：** 分类数据占比
**示例：**
- 客户级别分布
- 订单状态分布
- 收入来源分布

### 5. 条形图（Horizontal Bar）
**用途：** 排名展示
**适用：** TOP N 排行
**示例：**
- 客户业绩排行
- 业务员业绩排行
- 产品销量排行

### 6. 面积图（Area Chart）
**用途：** 显示累积效果
**适用：** 累计数据
**示例：**
- 累计收入
- 累计订单

### 7. 仪表盘（Gauge）
**用途：** 显示进度或完成率
**适用：** 目标完成度
**示例：**
- 月度目标完成率
- 项目进度

### 8. 表格视图（Table View）
**用途：** 详细数据展示
**适用：** 需要查看明细
**示例：**
- 订单列表
- 客户列表
- 财务明细

---

## 📊 仪表盘设计原则

### 1. 指标精选
- 只展示最重要的3-5个指标
- 避免信息过载
- 突出关键KPI

### 2. 视觉层次
- 重要指标放大显示
- 使用颜色区分状态
- 合理布局（F型或Z型）

### 3. 交互友好
- 支持筛选和钻取
- 支持时间范围选择
- 支持导出数据

### 4. 实时更新
- 数据自动刷新
- 显示更新时间
- 支持手动刷新

---

## 🎯 视图设计最佳实践

### 1. 按角色设计
- 不同角色看到不同视图
- 符合工作场景
- 减少无关信息

### 2. 筛选优化
- 默认显示最常用数据
- 支持自定义筛选
- 保存常用筛选条件

### 3. 排序合理
- 默认按重要字段排序
- 支持多字段排序
- 记住用户偏好

### 4. 视觉清晰
- 使用合适的颜色
- 字段数量适中（7-10个）
- 避免拥挤

---

## 📝 视图设计文档模板

```markdown
### [角色名称] - [视图名称]（[视图类型]）

**筛选条件：**
- [条件1]
- [条件2]

**显示字段：**
- [字段1]
- [字段2]
- [字段3]

**排序规则：**
- 按 [字段] [升序/降序]

**其他配置：**
- [分组方式]
- [颜色标记]
- [权限限制]
```

---

**模板版本：** 1.0
**最后更新：** 2026-03-12
**创建者：** 小虾米 🦐