merge: integrate remote main with local H2 prototypes and xll driver training nav.
Keep remote xll-miniapp registry while preserving local hydrogen station weekly/analysis pages; sync driver-training into ONEOS xll navigation. Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
@@ -1,19 +1,7 @@
|
||||
{
|
||||
"version": 1,
|
||||
"updatedAt": "2026-07-17T03:32:12.024Z",
|
||||
"updatedAt": "2026-07-20T05:34:45.927Z",
|
||||
"prototypes": [
|
||||
{
|
||||
"id": "item-prototypes-oneos-web-approval",
|
||||
"kind": "item",
|
||||
"title": "oneos web approval",
|
||||
"itemKey": "prototypes/oneos-web-approval"
|
||||
},
|
||||
{
|
||||
"id": "item-prototypes-oneos-web-h2-station-analysis",
|
||||
"kind": "item",
|
||||
"title": "oneos web h2 station analysis",
|
||||
"itemKey": "prototypes/oneos-web-h2-station-analysis"
|
||||
},
|
||||
{
|
||||
"id": "folder-1783875936186-27raza",
|
||||
"kind": "folder",
|
||||
@@ -25,12 +13,6 @@
|
||||
"title": "业务管理",
|
||||
"itemKey": "prototypes/oneos-web-business"
|
||||
},
|
||||
{
|
||||
"id": "item:prototypes:oneos-web-contract-template",
|
||||
"kind": "item",
|
||||
"title": "合同模板管理",
|
||||
"itemKey": "prototypes/oneos-web-contract-template"
|
||||
},
|
||||
{
|
||||
"id": "item:prototypes:oneos-web-data-analysis",
|
||||
"kind": "item",
|
||||
@@ -43,12 +25,6 @@
|
||||
"title": "财务管理(合包)",
|
||||
"itemKey": "prototypes/oneos-web-finance"
|
||||
},
|
||||
{
|
||||
"id": "item:prototypes:oneos-web-h2-station",
|
||||
"kind": "item",
|
||||
"title": "加氢站管理",
|
||||
"itemKey": "prototypes/oneos-web-h2-station"
|
||||
},
|
||||
{
|
||||
"id": "item:prototypes:oneos-web-help-center",
|
||||
"kind": "item",
|
||||
@@ -132,7 +108,7 @@
|
||||
{
|
||||
"id": "folder-1782874599304-roj8fd",
|
||||
"kind": "folder",
|
||||
"title": "运维管理",
|
||||
"title": "车辆资产",
|
||||
"children": [
|
||||
{
|
||||
"id": "item:prototypes:vehicle-management",
|
||||
@@ -197,11 +173,29 @@
|
||||
"title": "站点信息",
|
||||
"itemKey": "prototypes/oneos-web-h2-station-site"
|
||||
},
|
||||
{
|
||||
"id": "item:prototypes:oneos-h5-h2-order",
|
||||
"kind": "item",
|
||||
"title": "加氢记录(H5)",
|
||||
"itemKey": "prototypes/oneos-h5-h2-order"
|
||||
},
|
||||
{
|
||||
"id": "item:prototypes:oneos-web-h2-station",
|
||||
"kind": "item",
|
||||
"title": "加氢记录",
|
||||
"itemKey": "prototypes/oneos-web-h2-station"
|
||||
},
|
||||
{
|
||||
"id": "item:prototypes:oneos-web-h2-station-weekly",
|
||||
"kind": "item",
|
||||
"title": "站点周报统计",
|
||||
"itemKey": "prototypes/oneos-web-h2-station-weekly"
|
||||
},
|
||||
{
|
||||
"id": "item-prototypes-oneos-web-h2-station-analysis",
|
||||
"kind": "item",
|
||||
"title": "oneos web h2 station analysis",
|
||||
"itemKey": "prototypes/oneos-web-h2-station-analysis"
|
||||
}
|
||||
]
|
||||
},
|
||||
@@ -213,8 +207,20 @@
|
||||
{
|
||||
"id": "item:prototypes:business-dept-ledger",
|
||||
"kind": "item",
|
||||
"title": "业务部台账",
|
||||
"title": "项目盈亏情况",
|
||||
"itemKey": "prototypes/business-dept-ledger"
|
||||
},
|
||||
{
|
||||
"id": "item:prototypes:oneos-web-h2-station-stats",
|
||||
"kind": "item",
|
||||
"title": "加氢站数量统计",
|
||||
"itemKey": "prototypes/oneos-web-h2-station-stats"
|
||||
},
|
||||
{
|
||||
"id": "item:prototypes:customer-payment-collection",
|
||||
"kind": "item",
|
||||
"title": "客户回款情况",
|
||||
"itemKey": "prototypes/customer-payment-collection"
|
||||
}
|
||||
]
|
||||
},
|
||||
@@ -277,12 +283,6 @@
|
||||
"kind": "item",
|
||||
"title": "还车应结款",
|
||||
"itemKey": "prototypes/vehicle-return-settlement"
|
||||
},
|
||||
{
|
||||
"id": "item:prototypes:vehicle-return-settlement-v2",
|
||||
"kind": "item",
|
||||
"title": "还车应结款-新",
|
||||
"itemKey": "prototypes/vehicle-return-settlement-v2"
|
||||
}
|
||||
]
|
||||
},
|
||||
@@ -299,6 +299,19 @@
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "folder-1784341576489-spa7ms",
|
||||
"kind": "folder",
|
||||
"title": "审批中心",
|
||||
"children": [
|
||||
{
|
||||
"id": "item:prototypes:oneos-web-approval",
|
||||
"kind": "item",
|
||||
"title": "审批中心",
|
||||
"itemKey": "prototypes/oneos-web-approval"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "item:prototypes:lease-business-line-overview",
|
||||
"kind": "item",
|
||||
|
||||
37
.cursor/rules/business-logic-documentation.mdc
Normal file
37
.cursor/rules/business-logic-documentation.mdc
Normal file
@@ -0,0 +1,37 @@
|
||||
---
|
||||
description: 复杂业务/判断逻辑必须同步写入 PRD 与 .spec Markdown,并同步标注目录
|
||||
alwaysApply: true
|
||||
---
|
||||
|
||||
# 业务逻辑文档化(全局强制)
|
||||
|
||||
实现或修改**复杂判断逻辑**时,代码与文档**同一轮交付**。完整指南:`rules/business-logic-documentation-guide.md`。
|
||||
|
||||
## 触发条件(满足任一即必须文档化)
|
||||
|
||||
多步判定链、跨模块校验、状态/公式推导、导入保存规则、权限分支、一键修复建议值。
|
||||
|
||||
## 必须更新的文件
|
||||
|
||||
1. **`src/prototypes/<name>/.spec/<topic>.md`** — 完整规则(判定顺序、数据源、边界、代码路径)
|
||||
2. **`src/prototypes/<name>/.spec/requirements-prd.md`** — 摘要表 + §验收项 + 链接到规格全文
|
||||
3. **`annotation-source.json`** — 运行 `sync-annotation-directory.mjs` 同步目录/字段标注
|
||||
4. 字段级:`columnHeaderTips.ts` 或对应 `annotationText`(如有)
|
||||
|
||||
## 规格文最低要求
|
||||
|
||||
- 判定**优先级顺序**(表格)
|
||||
- **前置条件**(何时不校验)
|
||||
- **数据源**(种子 JSON / 哪几个模块)
|
||||
- 用户可见结果(通过/警告文案、是否可替换)
|
||||
- 标明原型本地种子 vs 未接真实 API
|
||||
|
||||
## 禁止
|
||||
|
||||
- 只改 `utils/*.ts` 不更新 PRD / `.spec`
|
||||
- 口头解释替代 Markdown
|
||||
- 验收通过时 PRD 与页面行为不一致
|
||||
|
||||
## 范例
|
||||
|
||||
`lease-business-detail`:`.spec/field-checks.md` + PRD §5 单元格系统校验 + 目录「单元格系统校验」
|
||||
31
.cursor/rules/cloud-publish-url.mdc
Normal file
31
.cursor/rules/cloud-publish-url.mdc
Normal file
@@ -0,0 +1,31 @@
|
||||
---
|
||||
description: 对象存储发布 URL 必须与 Make 工具一致,禁止改后缀或加 prototypes/ 前缀
|
||||
alwaysApply: true
|
||||
---
|
||||
|
||||
# 对象存储发布 URL(全局强制)
|
||||
|
||||
完整规范:`rules/cloud-publish-url-guide.md`。配置:`.axhub/make/axhub.config.json` → `cloudPublishing.s3`。
|
||||
|
||||
## 标准形态
|
||||
|
||||
```text
|
||||
{baseUrl}/{prototype-id}/index.html
|
||||
```
|
||||
|
||||
示例:`https://prototype.lnoneos.com/lease-business-detail/index.html`
|
||||
|
||||
## 禁止(Agent 发布或写链接时)
|
||||
|
||||
- 不得改为 `/prototypes/{id}/index.html`
|
||||
- 不得去掉 `/index.html` 后缀
|
||||
- 不得自改 `baseUrl` 域名
|
||||
- 不得把本地 dev 路径 `/prototypes/...` 当作已发布链接写入 PRD/导航/registry
|
||||
|
||||
## 脚本发布
|
||||
|
||||
使用 `scripts/publish-all-to-s3.mjs`;`resolveObjectPrefix` 已与 Make 对齐为扁平 `{prototype-id}`。
|
||||
|
||||
## 回报用户
|
||||
|
||||
发布成功后给出的 URL 须与 Make「已发布到对象存储」弹窗**完全一致**。
|
||||
@@ -20,6 +20,8 @@
|
||||
| 主题 | `src/themes/<theme-key>/` | `rules/theme-guide.md` |
|
||||
| 项目资料和文档 | `src/resources/` | `rules/resource-management-guide.md` |
|
||||
| 画布 | `src/prototypes/<prototype-name>/canvas.excalidraw`、`canvas-assets/` | 原型画布和画布素材 |
|
||||
| 业务逻辑规格 | `src/prototypes/<prototype-name>/.spec/<topic>.md` | `rules/business-logic-documentation-guide.md` |
|
||||
| 对象存储发布 URL | `.axhub/make/axhub.config.json` → `cloudPublishing.s3` | `rules/cloud-publish-url-guide.md` |
|
||||
| 原型标注布局 | `src/common/prototype-annotation-host.tsx` | `rules/prototype-annotation-layout-guide.md` |
|
||||
|
||||
## ⚠️ 重要原则
|
||||
@@ -41,6 +43,11 @@
|
||||
6. **讲人话,用户不懂技术**
|
||||
- 用用户能理解的方式说明取舍、风险和结果;用户无法执行 CLI 命令,不得省略验收流程
|
||||
- 向用户请求反馈或验收时,提醒用户尽量提供截图、预览链接、页面路径或具体问题位置,便于准确定位和复现
|
||||
7. **复杂业务逻辑必须文档化**
|
||||
- 多步判定、跨模块校验、状态/公式推导、导入规则等,除代码外必须写入 `.spec/*.md` 与 `requirements-prd.md`,并同步标注目录(见 `rules/business-logic-documentation-guide.md`)
|
||||
- 不得默认「先实现、后补文档」;逻辑变更与 PRD/标注更新同一轮交付
|
||||
8. **对象存储发布 URL 与 Make 工具一致**
|
||||
- 发布或写链接时格式为 `{baseUrl}/{prototype-id}/index.html`;禁止加 `prototypes/` 前缀或去掉 `index.html`(见 `rules/cloud-publish-url-guide.md`)
|
||||
|
||||
## 项目结构
|
||||
|
||||
|
||||
@@ -18,6 +18,8 @@
|
||||
| 项目资料和文档 | `src/resources/` | `rules/resource-management-guide.md` |
|
||||
| UI Review 结论 | `src/prototypes/<prototype-name>/.spec/ui-review.md` | `rules/ui-review-guide.md` |
|
||||
| 原型 Review 结论 | `src/prototypes/<prototype-name>/.spec/prototype-review.md` | `rules/prototype-review-guide.md` |
|
||||
| 业务逻辑规格 | `src/prototypes/<prototype-name>/.spec/<topic>.md` | `rules/business-logic-documentation-guide.md` |
|
||||
| 对象存储发布 URL | `.axhub/make/axhub.config.json` → `cloudPublishing.s3` | `rules/cloud-publish-url-guide.md` |
|
||||
| ACP 对话缓存 | `src/prototypes/<prototype-name>/.spec/acp/` | 本地私有运行数据,不提交、不导出、不发布 |
|
||||
|
||||
## ⚠️ 重要原则
|
||||
@@ -43,6 +45,10 @@
|
||||
- 产品需求、设计方案或原型应尽早交给用户确认,不要等到全部完成后才暴露方向问题
|
||||
6. **讲人话,用户不懂技术**
|
||||
- 用用户能理解的方式说明取舍、风险和结果;用户无法执行 CLI 命令,不得省略验收流程
|
||||
7. **复杂业务逻辑必须文档化**
|
||||
- 多步判定、跨模块校验、状态/公式推导、导入规则等,除代码外必须写入 `.spec/*.md` 与 `requirements-prd.md`,并同步标注目录(见 `rules/business-logic-documentation-guide.md`)
|
||||
8. **对象存储发布 URL 与 Make 工具一致**
|
||||
- `{baseUrl}/{prototype-id}/index.html`;禁止擅自改路径后缀(见 `rules/cloud-publish-url-guide.md`)
|
||||
|
||||
## 项目结构
|
||||
|
||||
|
||||
135
rules/business-logic-documentation-guide.md
Normal file
135
rules/business-logic-documentation-guide.md
Normal file
@@ -0,0 +1,135 @@
|
||||
# 业务逻辑文档化指南(全局)
|
||||
|
||||
凡原型或页面实现**复杂判断逻辑、跨模块校验、状态/公式推导、导入导出规则**时,除代码外**必须**同步写入 Markdown 与 PRD,供评审、标注目录与后续 Agent 读取。
|
||||
|
||||
参考范例:`src/prototypes/lease-business-detail/.spec/field-checks.md` + `requirements-prd.md` §5 单元格系统校验。
|
||||
|
||||
---
|
||||
|
||||
## 何时必须文档化
|
||||
|
||||
满足以下**任一**条件,即视为「复杂业务逻辑」,不得只留在代码或口头说明:
|
||||
|
||||
| 类型 | 示例 |
|
||||
|------|------|
|
||||
| 多步判定 / 优先级链 | 客户名称 5 步校验、收款状态三态 |
|
||||
| 跨模块对照 | 对照客户管理、车辆管理、合同台账 |
|
||||
| 公式 / 聚合口径 | KPI、表尾 SUBTOTAL、应收租金 = 租金 × 月数 |
|
||||
| 状态机 | 未收款 → 部分收款 → 已结清 |
|
||||
| 导入 / 保存拦截 | 重复键策略、实收 ≤ 应收 |
|
||||
| 权限 / 角色分支 | 主管可改、数据范围(若实现) |
|
||||
| 一键修复 / 建议值 | 校验警告 + 替换动作 |
|
||||
|
||||
纯样式、文案、布局微调**不**触发本指南;但若改动会改变上述判定结果,必须更新文档。
|
||||
|
||||
---
|
||||
|
||||
## 文档落点(三层)
|
||||
|
||||
```text
|
||||
src/prototypes/<name>/
|
||||
├── .spec/requirements-prd.md # ① PRD:摘要 + 验收项(产品可读)
|
||||
├── .spec/<logic-topic>.md # ② 规格:完整判定顺序、数据源、边界(开发/评审)
|
||||
├── annotation-source.json # ③ 标注:目录节点 + 页面/字段标注(经同步脚本)
|
||||
└── columnHeaderTips.ts 等 # 可选:表头/字段级一句话提示
|
||||
```
|
||||
|
||||
### ① PRD(`requirements-prd.md`)
|
||||
|
||||
在对应功能章节增加**摘要**,至少包含:
|
||||
|
||||
- 业务目的(一句话)
|
||||
- 判定顺序或状态表(表格优先)
|
||||
- 数据源 / 对照模块
|
||||
- 用户可见结果(图标、文案、是否可一键修复)
|
||||
- 链接到 `.spec/<logic-topic>.md` 全文
|
||||
|
||||
在 **§验收重点** 增加可勾选项。
|
||||
|
||||
### ② 规格 Markdown(`.spec/<logic-topic>.md`)
|
||||
|
||||
完整规则文档,建议结构:
|
||||
|
||||
```markdown
|
||||
# <模块> · <逻辑名称>
|
||||
|
||||
> 实现:`utils/xxx.ts`;UI:`components/xxx.tsx`
|
||||
|
||||
## 对照数据源
|
||||
## 交互与状态(ok / warn / none)
|
||||
## <字段或场景 A> 判定顺序(表格)
|
||||
## <字段或场景 B> …
|
||||
## 启用范围 / 与代码映射
|
||||
```
|
||||
|
||||
要求:
|
||||
|
||||
- **判定顺序**写清优先级(命中即返回)
|
||||
- **前置条件**写清何时不校验
|
||||
- **弱校验 / 强校验**区分标注
|
||||
- 标明原型种子 vs 真实 API(若未接后端)
|
||||
|
||||
### ③ 标注目录(`annotation-source.json`)
|
||||
|
||||
通过 `scripts/sync-annotation-directory.mjs`(或等价脚本)同步:
|
||||
|
||||
| 同步目标 | 内容 |
|
||||
|----------|------|
|
||||
| `directory` → 规格说明 | 全文或 `markdownPath` 指向 `.spec/*.md` |
|
||||
| 页面标注节点 | 功能区摘要(如列表工具栏、明细表) |
|
||||
| 字段标注节点 | 单字段判定摘要(如客户名称) |
|
||||
| `markdownMap` | 与节点 `annotationText` 一致 |
|
||||
|
||||
**禁止**:代码已改、PRD/标注仍写旧逻辑。
|
||||
|
||||
---
|
||||
|
||||
## 实施顺序(与开发绑定)
|
||||
|
||||
```text
|
||||
实现 / 修改业务逻辑代码
|
||||
↓
|
||||
编写或更新 .spec/<logic-topic>.md
|
||||
↓
|
||||
更新 requirements-prd.md 摘要 + 验收项
|
||||
↓
|
||||
更新表头提示 / 字段标注文案(如有)
|
||||
↓
|
||||
运行 sync-annotation-directory.mjs
|
||||
↓
|
||||
验收:目录与 PRD 可读、与页面行为一致
|
||||
```
|
||||
|
||||
逻辑变更与文档变更**同一轮交付**;不得「先合代码、后补文档」作为默认流程。
|
||||
|
||||
---
|
||||
|
||||
## 最小检查清单
|
||||
|
||||
- [ ] 复杂逻辑有独立 `.spec/*.md` 或 PRD 内等价完整章节
|
||||
- [ ] PRD 摘要含判定顺序表 / 状态表
|
||||
- [ ] PRD §验收 含可验证条目
|
||||
- [ ] `annotation-source.json` 目录已同步
|
||||
- [ ] 关键字段在「字段标注」或表头提示有一句业务说明
|
||||
- [ ] 文档标明数据来源(种子 / API / 手工列)
|
||||
- [ ] 代码路径在 PRD §源码入口 或规格文首注明
|
||||
|
||||
---
|
||||
|
||||
## 反例
|
||||
|
||||
| ❌ 不做 | ✅ 应做 |
|
||||
|--------|--------|
|
||||
| 只在 `utils/field-checks.ts` 里写 5 层 if | 同步 `field-checks.md` + PRD §5 摘要 |
|
||||
| 评审时口头解释客户名校验 | 目录「单元格系统校验」可点开全文 |
|
||||
| 改判定顺序不更新 PRD | 同 PR 更新 `.spec` + 跑 sync 脚本 |
|
||||
| 表头提示与真实逻辑矛盾 | 以 `.spec` 为单一真相,提示引用摘要 |
|
||||
|
||||
---
|
||||
|
||||
## 关联规则
|
||||
|
||||
- 产品需求对齐:`rules/requirements-alignment-guide.md`
|
||||
- 原型开发验收:`rules/prototype-development-guide.md`
|
||||
- 标注布局:`rules/prototype-annotation-layout-guide.md`
|
||||
- Agent 门禁:根目录 `AGENTS.md`
|
||||
86
rules/cloud-publish-url-guide.md
Normal file
86
rules/cloud-publish-url-guide.md
Normal file
@@ -0,0 +1,86 @@
|
||||
# 对象存储发布 URL 规范(全局)
|
||||
|
||||
Make 客户端「发布到对象存储」与脚本/Agent 批量发布**必须使用同一套公网路径**,避免维护两套链接。
|
||||
|
||||
配置来源:`.axhub/make/axhub.config.json` → `cloudPublishing.s3`
|
||||
|
||||
---
|
||||
|
||||
## 标准 URL 形态
|
||||
|
||||
```text
|
||||
{baseUrl}/{objectPrefix}/index.html
|
||||
```
|
||||
|
||||
| 项 | 默认值 | 示例 |
|
||||
|---|---|---|
|
||||
| `baseUrl` | `https://prototype.lnoneos.com` | — |
|
||||
| 原型页 `objectPrefix` | `{prototype-id}` | `lease-business-detail` |
|
||||
| 主题页 `objectPrefix` | `themes/{theme-id}` | `themes/claude` |
|
||||
| 入口文件名 | **固定** `index.html` | 不得改为 `/`、`.html` 省略或 `index.htm` |
|
||||
|
||||
**租赁业务明细(范例)**
|
||||
|
||||
```text
|
||||
https://prototype.lnoneos.com/lease-business-detail/index.html
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 禁止的改写
|
||||
|
||||
| ❌ 禁止 | 说明 |
|
||||
|--------|------|
|
||||
| 加 `prototypes/` 前缀 | 不得发布为 `/prototypes/lease-business-detail/index.html` |
|
||||
| 去掉 `index.html` | 不得改为目录根 `/lease-business-detail/` |
|
||||
| 改 `baseUrl` 域名 | 以 `axhub.config.json` 的 `s3.baseUrl` 为准 |
|
||||
| 自造路径别名 | 仅 `pathAliases` 中已声明的 id 可例外 |
|
||||
|
||||
---
|
||||
|
||||
## pathAliases(例外)
|
||||
|
||||
仅在 `axhub.config.json` → `cloudPublishing.s3.pathAliases` 中显式配置时覆盖默认前缀,例如:
|
||||
|
||||
```json
|
||||
"pathAliases": {
|
||||
"oneos-prototype-nav": "oneos-prototype-nav"
|
||||
}
|
||||
```
|
||||
|
||||
新增别名须**同时**更新:
|
||||
|
||||
1. `axhub.config.json` → `pathAliases`
|
||||
2. `src/prototypes/oneos-prototype-nav/nav-data.ts` → `CLOUD_PUBLISH_PATH_ALIASES`
|
||||
3. `prototype-registry.json` 变更说明(如有)
|
||||
|
||||
---
|
||||
|
||||
## 实现对照
|
||||
|
||||
| 场景 | 路径解析 |
|
||||
|------|----------|
|
||||
| Make 客户端发布 | `/{prototype-id}/index.html` |
|
||||
| `scripts/publish-all-to-s3.mjs` | `resolveObjectPrefix()` → 同上 |
|
||||
| 导航页 `resolvePrototypeHref()` | 云主机上 `/{segment}/index.html` |
|
||||
| 本地开发 | `/prototypes/{prototype-id}`(仅 dev,不是发布 URL) |
|
||||
|
||||
---
|
||||
|
||||
## Agent / AI 发布检查清单
|
||||
|
||||
发布或向用户回报链接前:
|
||||
|
||||
- [ ] 使用 `axhub.config.json` 中的 `baseUrl`
|
||||
- [ ] 原型链接以 `/index.html` 结尾
|
||||
- [ ] 未擅自添加 `prototypes/` 前缀
|
||||
- [ ] 与 Make 工具弹窗中的 URL 逐字一致
|
||||
- [ ] 未将 dev 路径(`/prototypes/...`)当作对象存储链接写入 PRD/导航
|
||||
|
||||
---
|
||||
|
||||
## 关联文件
|
||||
|
||||
- `scripts/publish-all-to-s3.mjs` — `resolveObjectPrefix`、`resolvePublicUrl`
|
||||
- `src/prototypes/oneos-prototype-nav/nav-data.ts` — 静态站跳转
|
||||
- `.cursor/rules/cloud-publish-url.mdc` — Agent 强制规则
|
||||
@@ -1,5 +1,7 @@
|
||||
# ONE-OS 全局设计规范(开发版)
|
||||
|
||||
> **对外分享请使用**:[`src/resources/design-system/`](../src/resources/design-system/README.md)(含 `DESIGN.md`、`tokens.json`、AI 提示模板)。本文件为项目内 Agent 规则副本。
|
||||
|
||||
| 项 | 说明 |
|
||||
|---|---|
|
||||
| 文档版本 | v1.0 |
|
||||
@@ -144,23 +146,53 @@ import '../vehicle-management/style.css';
|
||||
|
||||
| 元素 | 类名 | 规格 |
|
||||
|---|---|---|
|
||||
| 容器 | `vm-filter-card` | 白底、12px 圆角、1px 边框、轻阴影 |
|
||||
| 容器 | `vm-filter-card`(兼容 `lc-filter-card`) | 白底、12px 圆角、1px 边框、轻阴影 |
|
||||
| 标题 | `vm-filter-title` | 「筛选条件」,1.125rem / 600 |
|
||||
| 栅格 | `vm-filter-grid` | 默认 4 列;1280px 以下 2 列;640px 以下 1 列 |
|
||||
| 字段 | `vm-filter-field` | 标签在上、控件在下;标签 12px / muted |
|
||||
| 操作区 | `vm-filter-actions` | 顶部分割线;右对齐「重置」「查询」 |
|
||||
| 操作区 | `vm-filter-actions` | 顶部分割线;左侧「更多筛选/收起」,右侧「重置」「查询」 |
|
||||
|
||||
**日期区间(强制)**
|
||||
**参考实现(强制对齐)**:[`lease-business-detail/components/FilterPanel.tsx`](../src/prototypes/lease-business-detail/components/FilterPanel.tsx)
|
||||
|
||||
#### 4.1.1 筛选提示文本(placeholder)— 强制统一
|
||||
|
||||
筛选卡内所有空态提示(输入框、FilterPicker、日期区间、Ant Select)必须一致:
|
||||
|
||||
| 属性 | Token / 值 |
|
||||
|---|---|
|
||||
| 字体 | `var(--vm-font)` |
|
||||
| 字号 | `0.875rem`(14px) |
|
||||
| 字重 | `400` |
|
||||
| 颜色 | `var(--ln-muted-soft)`(`#a1a1aa`) |
|
||||
| 透明度 | `opacity: 1`(覆盖 Ant Select 默认半透明) |
|
||||
|
||||
样式落点:`vehicle-management/style.css` 中 `.vm-filter-card` / `.lc-filter-card` 下的 `::placeholder` 与 `.ant-select-selection-placeholder`。
|
||||
**禁止**各页单独改占位色、字号或字重。
|
||||
|
||||
#### 4.1.2 日期区间(强制)
|
||||
|
||||
- 使用 `DateRangeFilterField`(`vehicle-management/components/DateRangeFilterField`)。
|
||||
- 展示分隔符为中文「**至**」。
|
||||
- 类名:`vm-date-range-field`、`vm-filter-picker-control`。
|
||||
- 弹层必须 portal + `fixed`(避免滚动容器错位)。
|
||||
- **禁止**筛选区用 Ant `RangePicker`、双 `<input type="date">` 等替代方案。
|
||||
|
||||
**折叠筛选**
|
||||
#### 4.1.3 更多筛选 / 收起(强制)
|
||||
|
||||
- 超过 4 项时其余放入 `vm-filter-expand`(见 `src/common/vm-filter-panel.ts`)。
|
||||
- 切换按钮:`vm-filter-toggle` + 角标 `vm-filter-toggle-badge`。
|
||||
超过 4 项时必须折叠;实现与物流业务明细相同:
|
||||
|
||||
| 项 | 规则 |
|
||||
|---|---|
|
||||
| 拆分 | `splitFilterFields()` / `shouldShowFilterExpand()`([`src/common/vm-filter-panel.ts`](../src/common/vm-filter-panel.ts)) |
|
||||
| 首行 | 最多 4 项;**禁止**首行 5 项导致第二行仅 1 项 |
|
||||
| 展开区 | `vm-filter-expand` + `is-expanded`;内层 `vm-filter-expand-inner` + 独立 `vm-filter-grid` |
|
||||
| 文案 | 仅「更多筛选」/「收起」(禁用「展开」) |
|
||||
| 按钮 | `vm-btn vm-btn-link vm-filter-toggle`;`data-vm-icon` 为 `filter` / `chevron-up` |
|
||||
| 角标 | 收起且扩展项有值时显示 `vm-filter-toggle-badge`(主色底、白字) |
|
||||
| 操作区布局 | 切换在左(`margin-right: auto`),重置/查询在右 |
|
||||
| 别名 | `ldb-filter-expand` / `ldb-filter-toggle` 等同 `vm-filter-*`;**新代码优先 `vm-filter-*`** |
|
||||
|
||||
新建或改动列表页必须遵循;旧页触及时迁移。
|
||||
|
||||
### 4.2 输入框 `.vm-input`
|
||||
|
||||
@@ -170,15 +202,16 @@ import '../vehicle-management/style.css';
|
||||
| 表单页 | min 44px | 1rem(移动端友好) |
|
||||
|
||||
- 边框:`--ln-hairline-strong`;focus 时主题色边框。
|
||||
- 占位符:`--ln-muted-soft`。
|
||||
- 占位符:见 §4.1.1(`--ln-muted-soft`,0.875rem / 400)。
|
||||
|
||||
### 4.3 下拉选择 `.vm-filter-picker-*`
|
||||
|
||||
| 元素 | 说明 |
|
||||
|---|---|
|
||||
| `vm-filter-picker-control` | 触发器,与输入框同高 |
|
||||
| `vm-filter-picker-control` | 触发器,与输入框同高(32px) |
|
||||
| `vm-filter-picker-popover` | 下拉面板,卡片圆角 + hover 阴影 |
|
||||
| `vm-filter-picker-option.checked` | 主色浅底 + 深绿字 |
|
||||
| 占位符 | 见 §4.1.1;与日期区间、Ant Select 同色同字号 |
|
||||
|
||||
### 4.4 按钮 `.vm-btn`
|
||||
|
||||
@@ -391,7 +424,7 @@ const vmTheme = {
|
||||
| 合同 Ant 对齐 | `src/prototypes/lease-contract-management/styles/lease-contract.css` |
|
||||
| 参考:车辆管理 | `src/prototypes/vehicle-management/index.tsx` |
|
||||
| 参考:租赁合同 | `src/prototypes/lease-contract-management/LeaseContractManagement.jsx` |
|
||||
| 参考:加氢站站点 | `src/prototypes/oneos-web-h2-station/pages/03-站点信息.jsx` |
|
||||
| 参考:加氢站站点 | `src/prototypes/oneos-web-h2-station-site/pages/03-站点信息.jsx` |
|
||||
| 主题 token 来源 | `src/themes/linear/DESIGN.md`(inverse 浅色用于 vm) |
|
||||
|
||||
---
|
||||
|
||||
@@ -105,6 +105,18 @@ export default function MyApp() {
|
||||
|
||||
参考:`vehicle-management/index.tsx`、`lease-business-ledger/index.tsx`。
|
||||
|
||||
## 业务逻辑文档化(强制)
|
||||
|
||||
实现**复杂判断逻辑**(多步判定、跨模块校验、状态/公式推导、导入保存规则等)时,必须与代码**同一轮**更新文档。详见 `rules/business-logic-documentation-guide.md`。
|
||||
|
||||
```text
|
||||
.spec/<logic-topic>.md # 完整规则(判定顺序、数据源、代码路径)
|
||||
.spec/requirements-prd.md # 摘要 + 验收项
|
||||
annotation-source.json # sync-annotation-directory.mjs 同步目录/字段标注
|
||||
```
|
||||
|
||||
范例:`lease-business-detail/.spec/field-checks.md`。
|
||||
|
||||
## 验收流程
|
||||
|
||||
运行原型验收脚本:
|
||||
@@ -132,3 +144,4 @@ node scripts/check-app-ready.mjs /prototypes/[原型目录]
|
||||
- [ ] 占位原型已更新为有意义的目录名和显示名。
|
||||
- [ ] 新增依赖已写入 `package.json`。
|
||||
- [ ] `check-app-ready.mjs` 原型验收通过。
|
||||
- [ ] 若含复杂业务逻辑:`.spec` 规格文 + PRD 摘要 + 标注目录已同步(见 `business-logic-documentation-guide.md`)。
|
||||
|
||||
@@ -46,6 +46,7 @@
|
||||
- 本次范围、功能清单和不做什么。
|
||||
- 页面或资源的核心内容、数据来源和素材来源。
|
||||
- 关键状态、核心路径和必要交互。
|
||||
- **复杂判定逻辑**(校验链、状态机、公式口径、导入规则):在 PRD 中写摘要,并规划 `.spec/<topic>.md` 全文(见 `rules/business-logic-documentation-guide.md`)。
|
||||
- 用户最终如何判断结果可用。
|
||||
|
||||
只问会影响范围、成本或验收的问题。能从上下文推断的内容直接记为假设继续;如果缺失信息会导致不同功能范围、不同页面结构或不同验收标准,必须先问。
|
||||
|
||||
167
scripts/merge-registry-sidebar-conflicts.mjs
Normal file
167
scripts/merge-registry-sidebar-conflicts.mjs
Normal file
@@ -0,0 +1,167 @@
|
||||
#!/usr/bin/env node
|
||||
/**
|
||||
* 合并 merge 冲突中的 prototype-registry.json 与 sidebar-tree.json(保留两侧内容)。
|
||||
* 用法:node scripts/merge-registry-sidebar-conflicts.mjs
|
||||
*/
|
||||
import fs from 'node:fs';
|
||||
import path from 'node:path';
|
||||
import { execSync } from 'node:child_process';
|
||||
import { fileURLToPath } from 'node:url';
|
||||
|
||||
const __dirname = path.dirname(fileURLToPath(import.meta.url));
|
||||
const projectRoot = path.resolve(__dirname, '..');
|
||||
|
||||
function gitShow(stage, filePath) {
|
||||
return execSync(`git show :${stage}:${filePath}`, {
|
||||
cwd: projectRoot,
|
||||
encoding: 'utf8',
|
||||
});
|
||||
}
|
||||
|
||||
function readJsonFromGit(stage, relativePath) {
|
||||
return JSON.parse(gitShow(stage, relativePath));
|
||||
}
|
||||
|
||||
function writeJson(relativePath, value) {
|
||||
const abs = path.join(projectRoot, relativePath);
|
||||
fs.writeFileSync(abs, `${JSON.stringify(value, null, 2)}\n`, 'utf8');
|
||||
}
|
||||
|
||||
function collectItemKeys(items, acc = new Set()) {
|
||||
for (const item of items || []) {
|
||||
if (item?.itemKey) acc.add(item.itemKey);
|
||||
if (Array.isArray(item?.children)) collectItemKeys(item.children, acc);
|
||||
}
|
||||
return acc;
|
||||
}
|
||||
|
||||
function findItemByKey(items, itemKey) {
|
||||
for (const item of items || []) {
|
||||
if (item?.itemKey === itemKey) return item;
|
||||
if (Array.isArray(item?.children)) {
|
||||
const found = findItemByKey(item.children, itemKey);
|
||||
if (found) return found;
|
||||
}
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
function findFolder(items, title) {
|
||||
for (const item of items || []) {
|
||||
if (item?.kind === 'folder' && item?.title === title) return item;
|
||||
if (Array.isArray(item?.children)) {
|
||||
const found = findFolder(item.children, title);
|
||||
if (found) return found;
|
||||
}
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
function ensureChildFolder(parent, folderTitle, folderId) {
|
||||
parent.children = parent.children || [];
|
||||
let folder = parent.children.find((c) => c.kind === 'folder' && c.title === folderTitle);
|
||||
if (!folder) {
|
||||
folder = {
|
||||
id: folderId,
|
||||
kind: 'folder',
|
||||
title: folderTitle,
|
||||
children: [],
|
||||
};
|
||||
parent.children.push(folder);
|
||||
}
|
||||
folder.children = folder.children || [];
|
||||
return folder;
|
||||
}
|
||||
|
||||
function ensureItem(folder, item) {
|
||||
if (!item?.itemKey) return;
|
||||
const exists = folder.children.some((c) => c.itemKey === item.itemKey);
|
||||
if (!exists) folder.children.push(JSON.parse(JSON.stringify(item)));
|
||||
}
|
||||
|
||||
function mergeRegistry() {
|
||||
const relativePath = 'src/prototypes/oneos-prototype-nav/prototype-registry.json';
|
||||
const ours = readJsonFromGit(2, relativePath);
|
||||
const theirs = readJsonFromGit(3, relativePath);
|
||||
|
||||
const merged = {
|
||||
version: 1,
|
||||
updatedAt: new Date().toISOString(),
|
||||
prototypes: { ...theirs.prototypes },
|
||||
recentUpdates: [],
|
||||
};
|
||||
|
||||
for (const key of ['oneos-web-h2-station-weekly', 'oneos-web-h2-station-analysis']) {
|
||||
if (ours.prototypes[key]) merged.prototypes[key] = ours.prototypes[key];
|
||||
}
|
||||
|
||||
const seen = new Set();
|
||||
const combinedRecent = [...(ours.recentUpdates || []), ...(theirs.recentUpdates || [])];
|
||||
for (const entry of combinedRecent) {
|
||||
const sig = `${entry.prototypeId}|${entry.version}|${entry.date}|${entry.time}`;
|
||||
if (seen.has(sig)) continue;
|
||||
seen.add(sig);
|
||||
merged.recentUpdates.push(entry);
|
||||
}
|
||||
merged.recentUpdates = merged.recentUpdates.slice(0, 40);
|
||||
|
||||
writeJson(relativePath, merged);
|
||||
return {
|
||||
prototypeCount: Object.keys(merged.prototypes).length,
|
||||
recentCount: merged.recentUpdates.length,
|
||||
hasXll: Boolean(merged.prototypes['xll-miniapp']),
|
||||
h2AnalysisVersion: merged.prototypes['oneos-web-h2-station-analysis']?.version,
|
||||
};
|
||||
}
|
||||
|
||||
function mergeSidebar() {
|
||||
const relativePath = '.axhub/make/sidebar-tree.json';
|
||||
const ours = readJsonFromGit(2, relativePath);
|
||||
const theirs = readJsonFromGit(3, relativePath);
|
||||
|
||||
const merged = JSON.parse(JSON.stringify(theirs));
|
||||
merged.updatedAt = new Date().toISOString();
|
||||
|
||||
const oursKeys = collectItemKeys(ours.prototypes);
|
||||
const mergedKeys = collectItemKeys(merged.prototypes);
|
||||
const localOnlyKeys = [
|
||||
'prototypes/oneos-web-h2-station-weekly',
|
||||
'prototypes/oneos-web-h2-station-analysis',
|
||||
].filter((key) => oursKeys.has(key) && !mergedKeys.has(key));
|
||||
|
||||
const oneOsFolder = findFolder(merged.prototypes, 'OneOS');
|
||||
const h2Folder = oneOsFolder ? findFolder(oneOsFolder.children, '加氢站管理') : findFolder(merged.prototypes, '加氢站管理');
|
||||
|
||||
if (h2Folder) {
|
||||
for (const itemKey of localOnlyKeys) {
|
||||
const source =
|
||||
findItemByKey(ours.prototypes, itemKey) ||
|
||||
({
|
||||
'prototypes/oneos-web-h2-station-weekly': {
|
||||
id: 'item:prototypes:oneos-web-h2-station-weekly',
|
||||
kind: 'item',
|
||||
title: '站点周报统计',
|
||||
itemKey: 'prototypes/oneos-web-h2-station-weekly',
|
||||
},
|
||||
'prototypes/oneos-web-h2-station-analysis': {
|
||||
id: 'item-prototypes-oneos-web-h2-station-analysis',
|
||||
kind: 'item',
|
||||
title: '加氢站分析',
|
||||
itemKey: 'prototypes/oneos-web-h2-station-analysis',
|
||||
},
|
||||
}[itemKey]);
|
||||
ensureItem(h2Folder, source);
|
||||
}
|
||||
}
|
||||
|
||||
writeJson(relativePath, merged);
|
||||
return {
|
||||
addedKeys: localOnlyKeys,
|
||||
itemCount: collectItemKeys(merged.prototypes).size,
|
||||
};
|
||||
}
|
||||
|
||||
const registry = mergeRegistry();
|
||||
const sidebar = mergeSidebar();
|
||||
console.log('[merge] prototype-registry.json', registry);
|
||||
console.log('[merge] sidebar-tree.json', sidebar);
|
||||
@@ -7,6 +7,7 @@
|
||||
* node scripts/publish-all-to-s3.mjs
|
||||
* node scripts/publish-all-to-s3.mjs --dry-run
|
||||
* node scripts/publish-all-to-s3.mjs --group prototypes
|
||||
* node scripts/publish-all-to-s3.mjs --ids vehicle-management,oneos-prototype-nav
|
||||
*/
|
||||
import fs from 'node:fs';
|
||||
import os from 'node:os';
|
||||
@@ -26,6 +27,7 @@ function parseArgs(argv) {
|
||||
adminOrigin: '',
|
||||
dryRun: false,
|
||||
group: 'all',
|
||||
ids: [],
|
||||
includeSource: true,
|
||||
};
|
||||
for (let i = 0; i < argv.length; i += 1) {
|
||||
@@ -33,6 +35,9 @@ function parseArgs(argv) {
|
||||
if (arg === '--project-id' && argv[i + 1]) args.projectId = argv[++i].trim();
|
||||
else if (arg === '--admin-origin' && argv[i + 1]) args.adminOrigin = argv[++i].trim();
|
||||
else if (arg === '--group' && argv[i + 1]) args.group = argv[++i].trim();
|
||||
else if (arg === '--ids' && argv[i + 1]) {
|
||||
args.ids = argv[++i].split(',').map((id) => id.trim()).filter(Boolean);
|
||||
}
|
||||
else if (arg === '--dry-run') args.dryRun = true;
|
||||
else if (arg === '--no-source') args.includeSource = false;
|
||||
}
|
||||
@@ -69,8 +74,9 @@ function resolveObjectPrefix(entry, pathAliases = {}) {
|
||||
if (alias) return String(alias).replace(/^\/+|\/+$/gu, '');
|
||||
|
||||
const normalized = entry.path.replace(/^\/+|\/+$/gu, '');
|
||||
const prototypeMatch = normalized.match(/^(?:src\/)?prototypes\/(.+)$/u);
|
||||
if (prototypeMatch?.[1]) return `prototypes/${prototypeMatch[1]}`;
|
||||
const prototypeMatch = normalized.match(/^(?:src\/)?prototypes\/([^/]+)$/u);
|
||||
// 与 Make 客户端「发布到对象存储」一致:/{prototype-id}/index.html(不加 prototypes/ 前缀)
|
||||
if (prototypeMatch?.[1]) return prototypeMatch[1];
|
||||
const themeMatch = normalized.match(/^(?:src\/)?themes\/(.+)$/u);
|
||||
if (themeMatch?.[1]) return `themes/${themeMatch[1]}`;
|
||||
return entry.id;
|
||||
@@ -227,7 +233,15 @@ async function main() {
|
||||
const adminOrigin = resolveAdminOrigin(args.adminOrigin);
|
||||
const s3Config = readS3Config();
|
||||
const includeSource = args.includeSource && s3Config.includeSource;
|
||||
const entries = await collectPublishEntries(adminOrigin, args.projectId, args.group, s3Config.pathAliases);
|
||||
let entries = await collectPublishEntries(adminOrigin, args.projectId, args.group, s3Config.pathAliases);
|
||||
if (args.ids.length > 0) {
|
||||
const idSet = new Set(args.ids);
|
||||
entries = entries.filter((entry) => idSet.has(entry.id));
|
||||
const missing = args.ids.filter((id) => !entries.some((entry) => entry.id === id));
|
||||
if (missing.length > 0) {
|
||||
throw new Error(`未找到原型: ${missing.join(', ')}`);
|
||||
}
|
||||
}
|
||||
|
||||
console.log(`Admin: ${adminOrigin}`);
|
||||
console.log(`Bucket: ${s3Config.bucket}`);
|
||||
|
||||
@@ -23,9 +23,10 @@ const XLL_MODULES = [
|
||||
/** 从 ONE-OS Web 合包拆出、由项目内手写 index 维护的独立原型 */
|
||||
const STANDALONE_MODULES = [
|
||||
{ slug: 'business-dept-ledger', title: '业务部台账', skipCodegen: true },
|
||||
{ slug: 'customer-payment-collection', title: '客户回款情况', skipCodegen: true },
|
||||
{ slug: 'vehicle-maintenance-ledger', title: '车辆维修明细', skipCodegen: true },
|
||||
{ slug: 'oneos-web-h2-station-site', title: '站点信息', skipCodegen: true },
|
||||
{ slug: 'oneos-web-h2-station-weekly', title: '站点周报统计', skipCodegen: true },
|
||||
{ slug: 'oneos-web-h2-station-stats', title: '加氢站数量统计', skipCodegen: true },
|
||||
{ slug: 'vehicle-return-settlement', title: '还车应结款', skipCodegen: true },
|
||||
{ slug: 'vehicle-pickup-receivable', title: '提车应收款', skipCodegen: true },
|
||||
{ slug: 'oneos-web-approval', title: '审批中心', skipCodegen: true },
|
||||
@@ -61,7 +62,7 @@ const MODULES = [
|
||||
{ slug: 'oneos-web-procurement', title: '采购管理', dir: '采购管理' },
|
||||
{ slug: 'oneos-web-lease-contract', title: '车辆租赁合同', dir: '车辆租赁合同' },
|
||||
{ slug: 'oneos-web-h2-station', title: '加氢站管理', dir: '加氢站管理', excludeDirs: ['export-tools', 'AI-加氢站站点信息-complete'], excludeFiles: ['站点信息.jsx'] },
|
||||
{ slug: 'oneos-web-data-analysis', title: '数据分析', dir: '数据分析', excludeFiles: ['业务部台账.jsx'] },
|
||||
{ slug: 'oneos-web-data-analysis', title: '数据分析', dir: '数据分析', excludeFiles: ['业务部台账.jsx', '客户回款情况.jsx'] },
|
||||
{ slug: 'oneos-web-ledger-data', title: '台账数据', dir: '台账数据', excludeDirs: ['docs'], excludeFiles: ['车辆维修明细.jsx'] },
|
||||
{ slug: 'oneos-web-business', title: '业务管理', dir: '业务管理', excludeDirs: ['文档', 'export-tools', 'AI-保险采购-complete'] },
|
||||
{ slug: 'oneos-web-ops', title: '运维管理', dir: '运维管理' },
|
||||
|
||||
@@ -24,6 +24,8 @@ const ROUTE_TO_PAGE = {
|
||||
'third-return': 'third-return',
|
||||
replace: 'replace',
|
||||
'audit-return': 'audit-return',
|
||||
training: 'driver-training',
|
||||
'driver-training': 'driver-training',
|
||||
};
|
||||
|
||||
function parseArgs(argv) {
|
||||
|
||||
@@ -5,12 +5,14 @@ import {
|
||||
ArrowRightLeft,
|
||||
Car,
|
||||
CircleDollarSign,
|
||||
Download,
|
||||
Eye,
|
||||
FileText,
|
||||
MoreHorizontal,
|
||||
OctagonX,
|
||||
Pencil,
|
||||
RefreshCw,
|
||||
Settings2,
|
||||
Trash2,
|
||||
Undo2,
|
||||
Upload,
|
||||
@@ -31,6 +33,7 @@ export type OperationActionItem = {
|
||||
const MORE_ACTION_ICONS: Record<string, LucideIcon> = {
|
||||
edit: Pencil,
|
||||
del: Trash2,
|
||||
delete: Trash2,
|
||||
addVehicle: Car,
|
||||
renew: RefreshCw,
|
||||
authorized: FileText,
|
||||
@@ -41,6 +44,9 @@ const MORE_ACTION_ICONS: Record<string, LucideIcon> = {
|
||||
toFormal: ArrowRightLeft,
|
||||
stampSupplement: Upload,
|
||||
uploadStamped: Upload,
|
||||
manage: Settings2,
|
||||
preview: Eye,
|
||||
download: Download,
|
||||
};
|
||||
|
||||
function renderMenuItemLabel(item: OperationActionItem) {
|
||||
|
||||
150
src/common/h2DispenserBrandStore.js
Normal file
150
src/common/h2DispenserBrandStore.js
Normal file
@@ -0,0 +1,150 @@
|
||||
/**
|
||||
* 加氢机品牌 / 型号维护(原型本地 Store)
|
||||
* 供「站点信息」维护、「加氢订单 H5」OCR 读取品牌型号线索。
|
||||
*/
|
||||
(function initH2DispenserBrandStore(global) {
|
||||
var STORAGE_KEY = 'oneos.h2.dispenserBrands.v1';
|
||||
|
||||
var SEED = [
|
||||
{ id: 'db-1', brand: '海德利森', model: 'H2-D50', remark: '嘉兴站常用', updatedAt: '2026-07-10 09:00:00' },
|
||||
{ id: 'db-2', brand: '海德利森', model: 'H2-D80', remark: '', updatedAt: '2026-07-10 09:00:00' },
|
||||
{ id: 'db-3', brand: '舜华新能源', model: 'SH-H35', remark: '面板 OCR 模板 A', updatedAt: '2026-07-12 14:20:00' },
|
||||
{ id: 'db-4', brand: '厚普股份', model: 'HP-H70', remark: '', updatedAt: '2026-07-14 11:05:00' },
|
||||
];
|
||||
|
||||
function clone(list) {
|
||||
return (list || []).map(function (row) {
|
||||
return Object.assign({}, row);
|
||||
});
|
||||
}
|
||||
|
||||
function readRaw() {
|
||||
try {
|
||||
var raw = global.localStorage && global.localStorage.getItem(STORAGE_KEY);
|
||||
if (!raw) return clone(SEED);
|
||||
var parsed = JSON.parse(raw);
|
||||
if (!Array.isArray(parsed) || !parsed.length) return clone(SEED);
|
||||
return parsed.map(function (row) {
|
||||
return {
|
||||
id: String(row.id || ''),
|
||||
brand: String(row.brand || '').trim(),
|
||||
model: String(row.model || '').trim(),
|
||||
remark: String(row.remark || '').trim(),
|
||||
updatedAt: String(row.updatedAt || ''),
|
||||
};
|
||||
}).filter(function (row) {
|
||||
return row.id && row.brand && row.model;
|
||||
});
|
||||
} catch (e) {
|
||||
return clone(SEED);
|
||||
}
|
||||
}
|
||||
|
||||
function writeRaw(list) {
|
||||
try {
|
||||
if (global.localStorage) {
|
||||
global.localStorage.setItem(STORAGE_KEY, JSON.stringify(list));
|
||||
}
|
||||
} catch (e) {
|
||||
/* ignore quota */
|
||||
}
|
||||
}
|
||||
|
||||
function nowText() {
|
||||
var d = new Date();
|
||||
var pad = function (n) {
|
||||
return n < 10 ? '0' + n : String(n);
|
||||
};
|
||||
return (
|
||||
d.getFullYear() +
|
||||
'-' +
|
||||
pad(d.getMonth() + 1) +
|
||||
'-' +
|
||||
pad(d.getDate()) +
|
||||
' ' +
|
||||
pad(d.getHours()) +
|
||||
':' +
|
||||
pad(d.getMinutes()) +
|
||||
':' +
|
||||
pad(d.getSeconds())
|
||||
);
|
||||
}
|
||||
|
||||
function listBrands() {
|
||||
return clone(readRaw()).sort(function (a, b) {
|
||||
var brandCmp = a.brand.localeCompare(b.brand, 'zh');
|
||||
if (brandCmp !== 0) return brandCmp;
|
||||
return a.model.localeCompare(b.model, 'zh');
|
||||
});
|
||||
}
|
||||
|
||||
function upsertBrand(payload) {
|
||||
var brand = String(payload.brand || '').trim();
|
||||
var model = String(payload.model || '').trim();
|
||||
var remark = String(payload.remark || '').trim();
|
||||
if (!brand || !model) {
|
||||
return { ok: false, message: '品牌与型号均为必填' };
|
||||
}
|
||||
var list = readRaw();
|
||||
var id = String(payload.id || '').trim();
|
||||
var dup = list.some(function (row) {
|
||||
return (
|
||||
row.brand === brand &&
|
||||
row.model === model &&
|
||||
row.id !== id
|
||||
);
|
||||
});
|
||||
if (dup) {
|
||||
return { ok: false, message: '已存在相同品牌与型号' };
|
||||
}
|
||||
if (id) {
|
||||
var found = false;
|
||||
list = list.map(function (row) {
|
||||
if (row.id !== id) return row;
|
||||
found = true;
|
||||
return {
|
||||
id: row.id,
|
||||
brand: brand,
|
||||
model: model,
|
||||
remark: remark,
|
||||
updatedAt: nowText(),
|
||||
};
|
||||
});
|
||||
if (!found) {
|
||||
return { ok: false, message: '记录不存在' };
|
||||
}
|
||||
} else {
|
||||
list.push({
|
||||
id: 'db-' + Date.now() + '-' + Math.floor(Math.random() * 1000),
|
||||
brand: brand,
|
||||
model: model,
|
||||
remark: remark,
|
||||
updatedAt: nowText(),
|
||||
});
|
||||
}
|
||||
writeRaw(list);
|
||||
return { ok: true, list: clone(list) };
|
||||
}
|
||||
|
||||
function removeBrand(id) {
|
||||
var next = readRaw().filter(function (row) {
|
||||
return row.id !== id;
|
||||
});
|
||||
writeRaw(next);
|
||||
return { ok: true, list: clone(next) };
|
||||
}
|
||||
|
||||
function brandModelLabels() {
|
||||
return listBrands().map(function (row) {
|
||||
return row.brand + ' · ' + row.model;
|
||||
});
|
||||
}
|
||||
|
||||
global.H2DispenserBrandStore = {
|
||||
list: listBrands,
|
||||
upsert: upsertBrand,
|
||||
remove: removeBrand,
|
||||
labels: brandModelLabels,
|
||||
SEED: clone(SEED),
|
||||
};
|
||||
})(typeof window !== 'undefined' ? window : globalThis);
|
||||
@@ -5,31 +5,44 @@
|
||||
|
||||
var H2_RECONCILE_RECONCILED = 'reconciled';
|
||||
var H2_RECONCILE_PENDING = 'pending';
|
||||
var H2_VERIFY_VERIFIED = 'verified';
|
||||
var H2_VERIFY_UNVERIFIED = 'unverified';
|
||||
/** 记录来源:站端上传 | 羚牛上传(车辆氢费明细人工录入) */
|
||||
var H2_RECORD_SOURCE_STATION = 'station';
|
||||
var H2_RECORD_SOURCE_LINGNIU = 'lingniu';
|
||||
|
||||
var H2_STATION_CODE_MAP = {
|
||||
'嘉兴加氢站(一期)': 'JX-H2-001',
|
||||
'中国石油中油高新能源牙谷加油加氢站': 'JX-H2-001',
|
||||
'杭州临平加氢站': 'HZ-H2-002',
|
||||
'上海宝山加氢站': 'SH-H2-003',
|
||||
'苏州工业园区备用站': 'SZ-H2-004'
|
||||
};
|
||||
|
||||
/** 与车辆氢费明细、加氢站模块对齐的 canonical seed(10 条) */
|
||||
var H2_CANONICAL_LEDGER_SEED = [
|
||||
{ key: 'rf-1', id: 'rf-1', stationId: 'JX-H2-001', stationName: '嘉兴加氢站(一期)', hydrogenTime: '2026-05-28 10:21:08', plateNo: '浙A12345F', customerName: '嘉兴市鑫峤供应链科技有限公司', hydrogenKg: 12.5, costUnitPrice: 42.5, costTotal: 531.25, customerUnitPrice: 45, customerAmount: 562.5, settlementStatus: 'customer', mileageKm: 128560, creatorName: '张三', reconcileStatus: H2_RECONCILE_RECONCILED },
|
||||
{ key: 'rf-2', id: 'rf-2', stationId: 'JX-H2-001', stationName: '嘉兴加氢站(一期)', hydrogenTime: '2026-05-26 14:08:33', plateNo: '浙A67890F', customerName: '浙江绿运物流有限公司', hydrogenKg: 10.0, costUnitPrice: 42.5, costTotal: 425.0, customerUnitPrice: 45, customerAmount: 450.0, settlementStatus: 'internal', mileageKm: 95230, creatorName: '李四', reconcileStatus: H2_RECONCILE_RECONCILED },
|
||||
{ key: 'rf-3', id: 'rf-3', stationId: 'JX-H2-001', stationName: '嘉兴加氢站(一期)', hydrogenTime: '2026-05-22 09:15:00', plateNo: '浙A88888F', customerName: '嘉兴市鑫峤供应链科技有限公司', hydrogenKg: 18.3, costUnitPrice: 42.5, costTotal: 777.75, customerUnitPrice: 45, customerAmount: 823.5, settlementStatus: 'customer_self', mileageKm: 201880, creatorName: '王静', reconcileStatus: H2_RECONCILE_RECONCILED },
|
||||
{ key: 'rf-4', id: 'rf-4', stationId: 'JX-H2-001', stationName: '嘉兴加氢站(一期)', hydrogenTime: '2026-05-18 16:42:11', plateNo: '浙A03561F', customerName: '嘉兴港务氢能运输队', hydrogenKg: 15.6, costUnitPrice: 42.5, costTotal: 663.0, customerUnitPrice: 45, customerAmount: 702.0, settlementStatus: 'customer', mileageKm: 167420, creatorName: '张三', reconcileStatus: H2_RECONCILE_RECONCILED },
|
||||
{ key: 'rf-5', id: 'rf-5', stationId: 'HZ-H2-002', stationName: '杭州临平加氢站', hydrogenTime: '2026-05-30 09:30:22', plateNo: '浙B23456F', customerName: '杭州临平城配中心', hydrogenKg: 15.3, costUnitPrice: 43.0, costTotal: 657.9, customerUnitPrice: 46, customerAmount: 703.8, settlementStatus: 'internal', mileageKm: 143200, creatorName: '赵敏', reconcileStatus: H2_RECONCILE_RECONCILED },
|
||||
{ key: 'rf-6', id: 'rf-6', stationId: 'HZ-H2-002', stationName: '杭州临平加氢站', hydrogenTime: '2026-05-27 18:10:05', plateNo: '浙B99999F', customerName: '浙江氢运科技', hydrogenKg: 18.2, costUnitPrice: 43.0, costTotal: 782.6, customerUnitPrice: 46, customerAmount: 837.2, settlementStatus: 'customer_self', mileageKm: 189650, creatorName: '陈浩', reconcileStatus: H2_RECONCILE_RECONCILED },
|
||||
{ key: 'rf-7', id: 'rf-7', stationId: 'HZ-H2-002', stationName: '杭州临平加氢站', hydrogenTime: '2026-05-24 11:05:40', plateNo: '浙B58888F', customerName: '杭州临平城配中心', hydrogenKg: 11.8, costUnitPrice: 43.0, costTotal: 507.4, customerUnitPrice: 46, customerAmount: 542.8, settlementStatus: 'customer', mileageKm: 110340, creatorName: '李四', reconcileStatus: H2_RECONCILE_RECONCILED },
|
||||
{ key: 'rf-8', id: 'rf-8', stationId: 'SH-H2-003', stationName: '上海宝山加氢站', hydrogenTime: '2026-04-20 16:45:18', plateNo: '沪A88888F', customerName: '上海羚牛氢运', hydrogenKg: 8.0, costUnitPrice: 44.0, costTotal: 352.0, customerUnitPrice: 47, customerAmount: 376.0, settlementStatus: 'internal', mileageKm: 88420, creatorName: '王静', reconcileStatus: H2_RECONCILE_RECONCILED },
|
||||
{ key: 'rf-9', id: 'rf-9', stationId: 'SH-H2-003', stationName: '上海宝山加氢站', hydrogenTime: '2026-04-08 09:12:55', plateNo: '沪BDB9161F', customerName: '宝山园区试运车队', hydrogenKg: 9.5, costUnitPrice: 44.0, costTotal: 418.0, customerUnitPrice: 47, customerAmount: 446.5, settlementStatus: 'customer_self', mileageKm: 76500, creatorName: '张三', reconcileStatus: H2_RECONCILE_RECONCILED },
|
||||
{ key: 'rf-10', id: 'rf-10', stationId: 'SZ-H2-004', stationName: '苏州工业园区备用站', hydrogenTime: '2026-03-15 10:00:00', plateNo: '苏E33333F', customerName: '苏州试运客户', hydrogenKg: 6.2, costUnitPrice: 41.0, costTotal: 254.2, customerUnitPrice: 44, customerAmount: 272.8, settlementStatus: 'customer', mileageKm: 45210, creatorName: '赵敏', reconcileStatus: H2_RECONCILE_PENDING }
|
||||
];
|
||||
var H2_STATION_CODE_SET = (function () {
|
||||
var set = {};
|
||||
Object.keys(H2_STATION_CODE_MAP).forEach(function (name) {
|
||||
set[H2_STATION_CODE_MAP[name]] = true;
|
||||
});
|
||||
return set;
|
||||
})();
|
||||
|
||||
function h2BridgeCloneRows(rows) {
|
||||
return (rows || []).map(function (r) { return Object.assign({}, r); });
|
||||
}
|
||||
/** 与车辆氢费明细、加氢站模块对齐的 canonical seed(含本站未核对 / 已核对未对账用例) */
|
||||
var H2_CANONICAL_LEDGER_SEED = [
|
||||
/* 嘉兴本站 · 列表首页用例:未核对(无核对时间)→ 已核对未对账 → 已核对已对账 */
|
||||
{ key: 'rf-11', id: 'rf-11', stationId: 'JX-H2-001', stationName: '中国石油中油高新能源牙谷加油加氢站', hydrogenTime: '2026-07-16 09:20:18', plateNo: '浙A55666F', customerName: '中国石油中油高新能源牙谷加油加氢站·站端上报', hydrogenKg: 11.2, costUnitPrice: 42.5, costTotal: 476.0, customerUnitPrice: 42.5, customerAmount: 476.0, settlementStatus: 'customer', mileageKm: 132080, creatorName: '站端账号', verifyStatus: H2_VERIFY_UNVERIFIED, verifiedAt: null, reconcileStatus: H2_RECONCILE_PENDING },
|
||||
{ key: 'rf-12', id: 'rf-12', stationId: 'JX-H2-001', stationName: '中国石油中油高新能源牙谷加油加氢站', hydrogenTime: '2026-07-15 16:45:02', plateNo: '浙A77888F', customerName: '中国石油中油高新能源牙谷加油加氢站·站端上报', hydrogenKg: 9.8, costUnitPrice: 42.5, costTotal: 416.5, customerUnitPrice: 42.5, customerAmount: 416.5, settlementStatus: 'customer', mileageKm: null, creatorName: '站端账号', verifyStatus: H2_VERIFY_UNVERIFIED, verifiedAt: null, reconcileStatus: H2_RECONCILE_PENDING },
|
||||
{ key: 'rf-13', id: 'rf-13', stationId: 'JX-H2-001', stationName: '中国石油中油高新能源牙谷加油加氢站', hydrogenTime: '2026-07-14 11:08:40', plateNo: '浙A99001F', customerName: '嘉兴市鑫峤供应链科技有限公司', hydrogenKg: 14.0, costUnitPrice: 42.5, costTotal: 595.0, customerUnitPrice: 45, customerAmount: 630.0, settlementStatus: 'customer', mileageKm: 155200, creatorName: '站端账号', verifyStatus: H2_VERIFY_VERIFIED, verifiedAt: '2026-07-14 15:30:00', reconcileStatus: H2_RECONCILE_PENDING, reconcileDate: null },
|
||||
{ key: 'rf-1', id: 'rf-1', stationId: 'JX-H2-001', stationName: '中国石油中油高新能源牙谷加油加氢站', hydrogenTime: '2026-05-28 10:21:08', plateNo: '浙A12345F', customerName: '嘉兴市鑫峤供应链科技有限公司', hydrogenKg: 12.5, costUnitPrice: 42.5, costTotal: 531.25, customerUnitPrice: 45, customerAmount: 562.5, settlementStatus: 'customer', mileageKm: 128560, creatorName: '张三', verifyStatus: H2_VERIFY_VERIFIED, verifiedAt: '2026-05-29 10:00:00', reconcileStatus: H2_RECONCILE_RECONCILED, reconcileDate: '2026-05-29 10:00:00' },
|
||||
{ key: 'rf-2', id: 'rf-2', stationId: 'JX-H2-001', stationName: '中国石油中油高新能源牙谷加油加氢站', hydrogenTime: '2026-05-26 14:08:33', plateNo: '浙A67890F', customerName: '浙江绿运物流有限公司', hydrogenKg: 10.0, costUnitPrice: 42.5, costTotal: 425.0, customerUnitPrice: 45, customerAmount: 450.0, settlementStatus: 'internal', mileageKm: 95230, creatorName: '李四', verifyStatus: H2_VERIFY_VERIFIED, verifiedAt: '2026-05-27 10:00:00', reconcileStatus: H2_RECONCILE_RECONCILED, reconcileDate: '2026-05-27 10:00:00' },
|
||||
{ key: 'rf-3', id: 'rf-3', stationId: 'JX-H2-001', stationName: '中国石油中油高新能源牙谷加油加氢站', hydrogenTime: '2026-05-22 09:15:00', plateNo: '浙A88888F', customerName: '嘉兴市鑫峤供应链科技有限公司', hydrogenKg: 18.3, costUnitPrice: 42.5, costTotal: 777.75, customerUnitPrice: 45, customerAmount: 823.5, settlementStatus: 'customer_self', mileageKm: 201880, creatorName: '王静', verifyStatus: H2_VERIFY_VERIFIED, verifiedAt: '2026-05-23 10:00:00', reconcileStatus: H2_RECONCILE_RECONCILED, reconcileDate: '2026-05-23 10:00:00' },
|
||||
{ key: 'rf-4', id: 'rf-4', stationId: 'JX-H2-001', stationName: '中国石油中油高新能源牙谷加油加氢站', hydrogenTime: '2026-05-18 16:42:11', plateNo: '浙A03561F', customerName: '嘉兴港务氢能运输队', hydrogenKg: 15.6, costUnitPrice: 42.5, costTotal: 663.0, customerUnitPrice: 45, customerAmount: 702.0, settlementStatus: 'customer', mileageKm: 167420, creatorName: '张三', verifyStatus: H2_VERIFY_VERIFIED, verifiedAt: '2026-05-19 10:00:00', reconcileStatus: H2_RECONCILE_RECONCILED, reconcileDate: '2026-05-19 10:00:00' },
|
||||
{ key: 'rf-5', id: 'rf-5', stationId: 'HZ-H2-002', stationName: '杭州临平加氢站', hydrogenTime: '2026-05-30 09:30:22', plateNo: '浙B23456F', customerName: '杭州临平城配中心', hydrogenKg: 15.3, costUnitPrice: 43.0, costTotal: 657.9, customerUnitPrice: 46, customerAmount: 703.8, settlementStatus: 'internal', mileageKm: 143200, creatorName: '赵敏', verifyStatus: H2_VERIFY_VERIFIED, verifiedAt: '2026-05-31 10:00:00', reconcileStatus: H2_RECONCILE_RECONCILED, reconcileDate: '2026-05-31 10:00:00' },
|
||||
{ key: 'rf-6', id: 'rf-6', stationId: 'HZ-H2-002', stationName: '杭州临平加氢站', hydrogenTime: '2026-05-27 18:10:05', plateNo: '浙B99999F', customerName: '浙江氢运科技', hydrogenKg: 18.2, costUnitPrice: 43.0, costTotal: 782.6, customerUnitPrice: 46, customerAmount: 837.2, settlementStatus: 'customer_self', mileageKm: 189650, creatorName: '陈浩', verifyStatus: H2_VERIFY_VERIFIED, verifiedAt: '2026-05-28 10:00:00', reconcileStatus: H2_RECONCILE_RECONCILED, reconcileDate: '2026-05-28 10:00:00' },
|
||||
{ key: 'rf-7', id: 'rf-7', stationId: 'HZ-H2-002', stationName: '杭州临平加氢站', hydrogenTime: '2026-05-24 11:05:40', plateNo: '浙B58888F', customerName: '杭州临平城配中心', hydrogenKg: 11.8, costUnitPrice: 43.0, costTotal: 507.4, customerUnitPrice: 46, customerAmount: 542.8, settlementStatus: 'customer', mileageKm: 110340, creatorName: '李四', verifyStatus: H2_VERIFY_VERIFIED, verifiedAt: '2026-05-25 10:00:00', reconcileStatus: H2_RECONCILE_RECONCILED, reconcileDate: '2026-05-25 10:00:00' },
|
||||
{ key: 'rf-8', id: 'rf-8', stationId: 'SH-H2-003', stationName: '上海宝山加氢站', hydrogenTime: '2026-04-20 16:45:18', plateNo: '沪A88888F', customerName: '上海羚牛氢运', hydrogenKg: 8.0, costUnitPrice: 44.0, costTotal: 352.0, customerUnitPrice: 47, customerAmount: 376.0, settlementStatus: 'internal', mileageKm: 88420, creatorName: '王静', verifyStatus: H2_VERIFY_VERIFIED, verifiedAt: '2026-04-21 10:00:00', reconcileStatus: H2_RECONCILE_RECONCILED, reconcileDate: '2026-04-21 10:00:00' },
|
||||
{ key: 'rf-9', id: 'rf-9', stationId: 'SH-H2-003', stationName: '上海宝山加氢站', hydrogenTime: '2026-04-08 09:12:55', plateNo: '沪BDB9161F', customerName: '宝山园区试运车队', hydrogenKg: 9.5, costUnitPrice: 44.0, costTotal: 418.0, customerUnitPrice: 47, customerAmount: 446.5, settlementStatus: 'customer_self', mileageKm: 76500, creatorName: '张三', verifyStatus: H2_VERIFY_VERIFIED, verifiedAt: '2026-04-09 10:00:00', reconcileStatus: H2_RECONCILE_PENDING, reconcileDate: null },
|
||||
{ key: 'rf-10', id: 'rf-10', stationId: 'SZ-H2-004', stationName: '苏州工业园区备用站', hydrogenTime: '2026-03-15 10:00:00', plateNo: '苏E33333F', customerName: '苏州试运客户', hydrogenKg: 6.2, costUnitPrice: 41.0, costTotal: 254.2, customerUnitPrice: 44, customerAmount: 272.8, settlementStatus: 'customer', mileageKm: 45210, creatorName: '赵敏', verifyStatus: H2_VERIFY_UNVERIFIED, verifiedAt: null, reconcileStatus: H2_RECONCILE_PENDING }
|
||||
];
|
||||
|
||||
function h2BridgeFormatDateTime(value) {
|
||||
if (!value) return '';
|
||||
@@ -38,6 +51,26 @@ function h2BridgeFormatDateTime(value) {
|
||||
return String(value);
|
||||
}
|
||||
|
||||
/** 已对账记录必须有对账时间;缺省时按加氢日次日 10:00:00 推导(原型演示) */
|
||||
function h2BridgeDeriveReconcileTime(hydrogenTime) {
|
||||
var s = h2BridgeFormatDateTime(hydrogenTime);
|
||||
var m = String(s).match(/^(\d{4})-(\d{2})-(\d{2})/);
|
||||
if (!m) return '2026-01-01 10:00:00';
|
||||
var d = new Date(Number(m[1]), Number(m[2]) - 1, Number(m[3]) + 1, 10, 0, 0);
|
||||
var pad = function (n) { return n < 10 ? '0' + n : String(n); };
|
||||
return d.getFullYear() + '-' + pad(d.getMonth() + 1) + '-' + pad(d.getDate()) + ' 10:00:00';
|
||||
}
|
||||
|
||||
function h2BridgeResolveReconcileTime(row) {
|
||||
/* 对账时间仅来自对账单回写的 reconcileDate;勿用 reconciledAt(完成核对会写入) */
|
||||
var explicit = row.reconcileDate || '';
|
||||
if (explicit) return h2BridgeFormatDateTime(explicit);
|
||||
if (row.reconcileStatus === H2_RECONCILE_RECONCILED) {
|
||||
return h2BridgeDeriveReconcileTime(row.hydrogenTime);
|
||||
}
|
||||
return '';
|
||||
}
|
||||
|
||||
function h2BridgeMatchStatementPatch(row, patch) {
|
||||
if (patch.ledgerId && row.ledgerSyncId && patch.ledgerId === row.ledgerSyncId) return true;
|
||||
var rowTime = h2BridgeFormatDateTime(row.hydrogenTime);
|
||||
@@ -47,6 +80,127 @@ function h2BridgeMatchStatementPatch(row, patch) {
|
||||
&& (rowTime === patchTime || String(row.hydrogenTime || '') === patchTime);
|
||||
}
|
||||
|
||||
function h2BridgeInferRecordSource(row) {
|
||||
if (!row) return H2_RECORD_SOURCE_LINGNIU;
|
||||
if (row.recordSource === H2_RECORD_SOURCE_STATION || row.recordSource === H2_RECORD_SOURCE_LINGNIU) {
|
||||
return row.recordSource;
|
||||
}
|
||||
var creator = String(row.creatorName || '').trim();
|
||||
var customer = String(row.customerName || '');
|
||||
if (creator === '站端账号' || customer.indexOf('·站端上报') >= 0) return H2_RECORD_SOURCE_STATION;
|
||||
return H2_RECORD_SOURCE_LINGNIU;
|
||||
}
|
||||
|
||||
function h2BridgeNormalizeRow(row) {
|
||||
if (!row) return row;
|
||||
var next = Object.assign({}, row);
|
||||
next.recordSource = h2BridgeInferRecordSource(next);
|
||||
if (!Array.isArray(next.changeLogs)) next.changeLogs = [];
|
||||
if (next.verifiedByName == null) next.verifiedByName = '';
|
||||
if (next.reconciledByName == null) next.reconciledByName = '';
|
||||
return next;
|
||||
}
|
||||
|
||||
function h2BridgeFormatLogScalar(value) {
|
||||
if (value == null || value === '') return '—';
|
||||
if (typeof value === 'number' && isFinite(value)) {
|
||||
return String(Math.round(value * 100) / 100);
|
||||
}
|
||||
return String(value);
|
||||
}
|
||||
|
||||
/** 站端/台账编辑时对比字段,生成变更日志条目(时间倒序由调用方 unshift) */
|
||||
function h2BridgeBuildFieldChangeLogs(prev, next, operatorName) {
|
||||
if (!prev || !next) return [];
|
||||
var fields = [
|
||||
{ key: 'hydrogenTime', label: '加氢时间' },
|
||||
{ key: 'plateNo', label: '车牌号' },
|
||||
{ key: 'hydrogenKg', label: '加氢量' },
|
||||
{ key: 'costUnitPrice', label: '氢气单价' },
|
||||
{ key: 'costTotal', label: '加氢总额', alt: 'customerAmount' },
|
||||
{ key: 'mileageKm', label: '里程' }
|
||||
];
|
||||
var logs = [];
|
||||
var now = new Date();
|
||||
var nowStr = now.getFullYear() + '-' + h2BridgePad2(now.getMonth() + 1) + '-' + h2BridgePad2(now.getDate())
|
||||
+ ' ' + h2BridgePad2(now.getHours()) + ':' + h2BridgePad2(now.getMinutes()) + ':' + h2BridgePad2(now.getSeconds());
|
||||
fields.forEach(function (f) {
|
||||
var before = prev[f.key];
|
||||
var after = next[f.key];
|
||||
if (before == null && f.alt) before = prev[f.alt];
|
||||
if (after == null && f.alt) after = next[f.alt];
|
||||
var beforeText = h2BridgeFormatLogScalar(before);
|
||||
var afterText = h2BridgeFormatLogScalar(after);
|
||||
if (beforeText === afterText) return;
|
||||
logs.push({
|
||||
id: 'clog-' + Date.now() + '-' + Math.random().toString(36).slice(2, 8),
|
||||
at: nowStr,
|
||||
operatorName: operatorName || next.creatorName || '系统',
|
||||
userName: operatorName || next.creatorName || '系统',
|
||||
field: f.key,
|
||||
fieldLabel: f.label,
|
||||
oldValue: beforeText,
|
||||
newValue: afterText,
|
||||
before: beforeText,
|
||||
after: afterText
|
||||
});
|
||||
});
|
||||
return logs;
|
||||
}
|
||||
|
||||
function h2BridgeEnrichSeedDefaults(row) {
|
||||
var next = h2BridgeNormalizeRow(row);
|
||||
if (next.verifyStatus === H2_VERIFY_VERIFIED && !next.verifiedByName) {
|
||||
next.verifiedByName = next.creatorName === '站端账号' ? '李业务' : (next.creatorName || '李业务');
|
||||
}
|
||||
if (next.reconcileStatus === H2_RECONCILE_RECONCILED && !next.reconciledByName) {
|
||||
next.reconciledByName = '系统管理员';
|
||||
}
|
||||
if (next.key === 'rf-13' && (!next.changeLogs || !next.changeLogs.length)) {
|
||||
next.changeLogs = [
|
||||
{
|
||||
id: 'clog-seed-rf13-1',
|
||||
at: '2026-07-14 11:20:00',
|
||||
operatorName: '站端账号',
|
||||
userName: '站端账号',
|
||||
field: 'hydrogenKg',
|
||||
fieldLabel: '加氢量',
|
||||
oldValue: '13.50',
|
||||
newValue: '14.00',
|
||||
before: '13.50',
|
||||
after: '14.00'
|
||||
}
|
||||
];
|
||||
}
|
||||
if (next.key === 'rf-1' && (!next.changeLogs || !next.changeLogs.length)) {
|
||||
next.changeLogs = [
|
||||
{
|
||||
id: 'clog-seed-rf1-1',
|
||||
at: '2026-05-28 11:05:00',
|
||||
operatorName: '张三',
|
||||
userName: '张三',
|
||||
field: 'costUnitPrice',
|
||||
fieldLabel: '氢气单价',
|
||||
oldValue: '42.00',
|
||||
newValue: '42.50',
|
||||
before: '42.00',
|
||||
after: '42.50'
|
||||
}
|
||||
];
|
||||
}
|
||||
return next;
|
||||
}
|
||||
|
||||
function h2BridgeCloneRows(rows) {
|
||||
return (rows || []).map(function (r) {
|
||||
var cloned = Object.assign({}, r);
|
||||
if (Array.isArray(r.changeLogs)) {
|
||||
cloned.changeLogs = r.changeLogs.map(function (log) { return Object.assign({}, log); });
|
||||
}
|
||||
return h2BridgeNormalizeRow(cloned);
|
||||
});
|
||||
}
|
||||
|
||||
function h2BridgeApplyStatementPatches(rows, patches) {
|
||||
if (!patches || !patches.length) return h2BridgeCloneRows(rows);
|
||||
return (rows || []).map(function (r) {
|
||||
@@ -58,26 +212,95 @@ function h2BridgeApplyStatementPatches(rows, patches) {
|
||||
break;
|
||||
}
|
||||
}
|
||||
if (!patch) return r;
|
||||
return Object.assign({}, r, {
|
||||
if (!patch) return h2BridgeNormalizeRow(r);
|
||||
return h2BridgeNormalizeRow(Object.assign({}, r, {
|
||||
statementPatched: true,
|
||||
reconcileStatus: H2_RECONCILE_RECONCILED,
|
||||
reconcileDate: patch.reconcileDate,
|
||||
receiptDate: patch.receiptDate,
|
||||
stationPaymentStatus: patch.paymentStatus || 'paid',
|
||||
paymentStatus: patch.paymentStatus || 'paid',
|
||||
reconciledAt: patch.reconcileDate
|
||||
});
|
||||
statementRecordId: patch.statementRecordId != null ? patch.statementRecordId : r.statementRecordId,
|
||||
reconciledByName: patch.reconciler || patch.reconciledByName || r.reconciledByName || ''
|
||||
}));
|
||||
});
|
||||
}
|
||||
|
||||
function h2BridgeBuildInitialRows() {
|
||||
var patches = (typeof window !== 'undefined' && window.H2_STATION_STATEMENT_LEDGER_UPDATES) || [];
|
||||
return h2BridgeApplyStatementPatches(h2BridgeCloneRows(H2_CANONICAL_LEDGER_SEED), patches);
|
||||
var seeded = (H2_CANONICAL_LEDGER_SEED || []).map(h2BridgeEnrichSeedDefaults);
|
||||
return h2BridgeApplyStatementPatches(seeded, patches);
|
||||
}
|
||||
|
||||
function h2BridgePad2(n) {
|
||||
return n < 10 ? '0' + n : String(n);
|
||||
}
|
||||
|
||||
/** 自然日 YYYY-MM-DD(设备本地时区) */
|
||||
function h2BridgeTodayDateKey(d) {
|
||||
var x = d || new Date();
|
||||
return x.getFullYear() + '-' + h2BridgePad2(x.getMonth() + 1) + '-' + h2BridgePad2(x.getDate());
|
||||
}
|
||||
|
||||
function h2BridgeYesterdayDateKey() {
|
||||
var d = new Date();
|
||||
d.setDate(d.getDate() - 1);
|
||||
return h2BridgeTodayDateKey(d);
|
||||
}
|
||||
|
||||
function h2BridgeManualLedgerKey(stationId, ledgerDate) {
|
||||
return String(stationId || '').trim() + '|' + String(ledgerDate || '').trim();
|
||||
}
|
||||
|
||||
/** 解析站点编码:支持传入编码或站名(勿把站名原样当 id) */
|
||||
function h2BridgeResolveStationId(stationId, stationName) {
|
||||
var a = String(stationId || '').trim();
|
||||
var b = String(stationName || '').trim();
|
||||
if (a && H2_STATION_CODE_MAP[a]) return H2_STATION_CODE_MAP[a];
|
||||
if (b && H2_STATION_CODE_MAP[b]) return H2_STATION_CODE_MAP[b];
|
||||
if (a && H2_STATION_CODE_SET[a]) return a;
|
||||
if (b && H2_STATION_CODE_SET[b]) return b;
|
||||
return a || '';
|
||||
}
|
||||
|
||||
/** 手工台账种子:昨日已上传;今日默认未上传,便于演示拦截新增 */
|
||||
function h2BridgeBuildInitialManualLedgers() {
|
||||
var yesterday = h2BridgeYesterdayDateKey();
|
||||
return [
|
||||
{
|
||||
id: 'ml-seed-yesterday',
|
||||
stationId: 'JX-H2-001',
|
||||
stationName: '中国石油中油高新能源牙谷加油加氢站',
|
||||
ledgerDate: yesterday,
|
||||
images: [
|
||||
{
|
||||
id: 'ml-img-seed-1',
|
||||
name: '昨日手工台账.jpg',
|
||||
dataUrl: '',
|
||||
placeholder: true,
|
||||
archived: true,
|
||||
uploadedAt: yesterday + ' 18:30:00'
|
||||
}
|
||||
],
|
||||
updatedAt: yesterday + ' 18:30:00'
|
||||
}
|
||||
];
|
||||
}
|
||||
|
||||
function h2BridgeCloneManualLedgers(list) {
|
||||
return (list || []).map(function (item) {
|
||||
return Object.assign({}, item, {
|
||||
images: (item.images || []).map(function (img) { return Object.assign({}, img); })
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
function h2BridgeCreateStore() {
|
||||
var listeners = [];
|
||||
var state = { rows: h2BridgeBuildInitialRows() };
|
||||
var state = {
|
||||
rows: h2BridgeBuildInitialRows(),
|
||||
manualLedgers: h2BridgeBuildInitialManualLedgers()
|
||||
};
|
||||
|
||||
function notify() {
|
||||
listeners.forEach(function (fn) {
|
||||
@@ -91,6 +314,7 @@ function h2BridgeCreateStore() {
|
||||
state.rows = h2BridgeCloneRows(rows);
|
||||
notify();
|
||||
},
|
||||
getManualLedgers: function () { return h2BridgeCloneManualLedgers(state.manualLedgers); },
|
||||
subscribe: function (fn) {
|
||||
listeners.push(fn);
|
||||
return function () {
|
||||
@@ -101,6 +325,145 @@ function h2BridgeCreateStore() {
|
||||
if (!patches || !patches.length) return;
|
||||
state.rows = h2BridgeApplyStatementPatches(state.rows, patches);
|
||||
notify();
|
||||
},
|
||||
upsertRow: function (row) {
|
||||
if (!row) return null;
|
||||
var next = Object.assign({}, row);
|
||||
if (!next.id && !next.key) {
|
||||
next.id = 'rf-h5-' + Date.now() + '-' + Math.floor(Math.random() * 1000);
|
||||
next.key = next.id;
|
||||
} else {
|
||||
next.id = next.id || next.key;
|
||||
next.key = next.key || next.id;
|
||||
}
|
||||
if (!next.reconcileStatus) next.reconcileStatus = H2_RECONCILE_PENDING;
|
||||
if (!next.verifyStatus) next.verifyStatus = H2_VERIFY_UNVERIFIED;
|
||||
if (!next.recordSource) next.recordSource = h2BridgeInferRecordSource(next);
|
||||
var found = false;
|
||||
var saved = null;
|
||||
state.rows = state.rows.map(function (r) {
|
||||
if ((r.id || r.key) === next.id || (r.id || r.key) === next.key) {
|
||||
found = true;
|
||||
var merged = h2BridgeNormalizeRow(Object.assign({}, r, next));
|
||||
if (!next.recordSource && r.recordSource) merged.recordSource = r.recordSource;
|
||||
var operator = next.changeLogOperator || next.creatorName || r.creatorName || '系统';
|
||||
var fieldLogs = h2BridgeBuildFieldChangeLogs(r, merged, operator);
|
||||
var prevLogs = Array.isArray(r.changeLogs) ? r.changeLogs.slice() : [];
|
||||
if (Array.isArray(next.changeLogs) && next.replaceChangeLogs) {
|
||||
merged.changeLogs = next.changeLogs.slice();
|
||||
} else {
|
||||
merged.changeLogs = fieldLogs.concat(prevLogs);
|
||||
}
|
||||
saved = merged;
|
||||
return merged;
|
||||
}
|
||||
return r;
|
||||
});
|
||||
if (!found) {
|
||||
saved = h2BridgeNormalizeRow(next);
|
||||
if (!Array.isArray(saved.changeLogs)) saved.changeLogs = [];
|
||||
state.rows = [saved].concat(state.rows);
|
||||
}
|
||||
notify();
|
||||
return Object.assign({}, saved);
|
||||
},
|
||||
removeRow: function (id) {
|
||||
var target = String(id || '');
|
||||
if (!target) return false;
|
||||
var before = state.rows.length;
|
||||
state.rows = state.rows.filter(function (r) {
|
||||
return String(r.id || r.key || '') !== target;
|
||||
});
|
||||
var changed = state.rows.length !== before;
|
||||
if (changed) notify();
|
||||
return changed;
|
||||
},
|
||||
upsertManualLedger: function (input) {
|
||||
if (!input) return null;
|
||||
var stationId = h2BridgeResolveStationId(input.stationId, input.stationName);
|
||||
var stationName = String(input.stationName || '').trim();
|
||||
var ledgerDate = String(input.ledgerDate || h2BridgeTodayDateKey()).trim();
|
||||
if (!stationId || !ledgerDate) return null;
|
||||
var key = h2BridgeManualLedgerKey(stationId, ledgerDate);
|
||||
var existing = null;
|
||||
state.manualLedgers.forEach(function (item) {
|
||||
if (h2BridgeManualLedgerKey(item.stationId, item.ledgerDate) === key) existing = item;
|
||||
});
|
||||
function normalizeImage(img, i) {
|
||||
return {
|
||||
id: img.id || ('ml-img-' + Date.now() + '-' + i),
|
||||
name: String(img.name || ('台账照片' + (i + 1) + '.jpg')),
|
||||
dataUrl: String(img.dataUrl || ''),
|
||||
placeholder: Boolean(img.placeholder),
|
||||
archived: true,
|
||||
uploadedAt: img.uploadedAt || (ledgerDate + ' 12:00:00')
|
||||
};
|
||||
}
|
||||
/** 已归档图不可删:保留原有全部,仅追加新图 */
|
||||
var images = (existing && existing.images ? existing.images : []).map(function (img, i) {
|
||||
return normalizeImage(img, i);
|
||||
});
|
||||
var seen = {};
|
||||
images.forEach(function (img) { seen[img.id] = true; });
|
||||
(input.images || []).forEach(function (img, i) {
|
||||
var nextImg = normalizeImage(img, images.length + i);
|
||||
if (!nextImg.dataUrl && !nextImg.placeholder) return;
|
||||
if (seen[nextImg.id]) return;
|
||||
seen[nextImg.id] = true;
|
||||
images.push(nextImg);
|
||||
});
|
||||
if (!images.length) return null;
|
||||
var now = new Date();
|
||||
var nowStr = now.getFullYear() + '-' + h2BridgePad2(now.getMonth() + 1) + '-' + h2BridgePad2(now.getDate())
|
||||
+ ' ' + h2BridgePad2(now.getHours()) + ':' + h2BridgePad2(now.getMinutes()) + ':' + h2BridgePad2(now.getSeconds());
|
||||
var next = {
|
||||
id: 'ml-' + stationId + '-' + ledgerDate,
|
||||
stationId: stationId,
|
||||
stationName: stationName || stationId,
|
||||
ledgerDate: ledgerDate,
|
||||
images: images,
|
||||
updatedAt: nowStr
|
||||
};
|
||||
var found = false;
|
||||
state.manualLedgers = state.manualLedgers.map(function (item) {
|
||||
if (h2BridgeManualLedgerKey(item.stationId, item.ledgerDate) === key) {
|
||||
found = true;
|
||||
return next;
|
||||
}
|
||||
return item;
|
||||
});
|
||||
if (!found) state.manualLedgers = [next].concat(state.manualLedgers);
|
||||
notify();
|
||||
return h2BridgeCloneManualLedgers([next])[0];
|
||||
},
|
||||
getManualLedger: function (stationIdOrName, ledgerDate) {
|
||||
var dateKey = String(ledgerDate || h2BridgeTodayDateKey()).trim();
|
||||
var sid = h2BridgeResolveStationId(stationIdOrName, stationIdOrName);
|
||||
if (!sid) sid = h2BridgeResolveStationId('', stationIdOrName);
|
||||
if (!sid) return null;
|
||||
var key = h2BridgeManualLedgerKey(sid, dateKey);
|
||||
var i;
|
||||
for (i = 0; i < state.manualLedgers.length; i++) {
|
||||
var item = state.manualLedgers[i];
|
||||
if (h2BridgeManualLedgerKey(item.stationId, item.ledgerDate) === key) {
|
||||
return h2BridgeCloneManualLedgers([item])[0];
|
||||
}
|
||||
}
|
||||
return null;
|
||||
},
|
||||
listManualLedgersByStation: function (stationIdOrName) {
|
||||
var sid = h2BridgeResolveStationId(stationIdOrName, stationIdOrName);
|
||||
if (!sid) sid = h2BridgeResolveStationId('', stationIdOrName);
|
||||
if (!sid) return [];
|
||||
return h2BridgeCloneManualLedgers(state.manualLedgers.filter(function (item) {
|
||||
return item.stationId === sid;
|
||||
})).sort(function (a, b) {
|
||||
return String(b.ledgerDate).localeCompare(String(a.ledgerDate));
|
||||
});
|
||||
},
|
||||
hasManualLedgerForDate: function (stationIdOrName, ledgerDate) {
|
||||
var entry = this.getManualLedger(stationIdOrName, ledgerDate);
|
||||
return Boolean(entry && entry.images && entry.images.length);
|
||||
}
|
||||
};
|
||||
}
|
||||
@@ -154,17 +517,39 @@ function h2BridgeMapToStationLedgerRow(row, index) {
|
||||
|
||||
function h2BridgeMapToHrRecord(row, index, fillerNames) {
|
||||
var fillers = fillerNames || ['张三', '李四', '王静', '赵敏', '陈浩'];
|
||||
var costTotal = row.costTotal != null ? row.costTotal : row.costAmount;
|
||||
var unitPrice = row.costUnitPrice != null ? row.costUnitPrice : row.customerUnitPrice;
|
||||
var totalAmount = costTotal != null ? costTotal : row.customerAmount;
|
||||
var reconcileTime = h2BridgeResolveReconcileTime(row);
|
||||
var isReconciled = row.reconcileStatus === H2_RECONCILE_RECONCILED || Boolean(row.reconcileDate);
|
||||
var verifiedAt = row.verifiedAt || '';
|
||||
var changeLogs = Array.isArray(row.changeLogs)
|
||||
? row.changeLogs.map(function (log) { return Object.assign({}, log); })
|
||||
: [];
|
||||
return {
|
||||
id: row.id || row.key || ('hr-' + (index + 1)),
|
||||
hydrogenTime: h2BridgeFormatDateTime(row.hydrogenTime),
|
||||
plateNo: row.plateNo,
|
||||
hydrogenKg: row.hydrogenKg,
|
||||
customerAmount: row.customerAmount,
|
||||
unitPrice: unitPrice,
|
||||
totalAmount: totalAmount,
|
||||
/* 兼容旧列名:金额同站端口径 */
|
||||
customerAmount: totalAmount,
|
||||
costUnitPrice: unitPrice,
|
||||
costTotal: totalAmount,
|
||||
mileageKm: row.mileageKm,
|
||||
fillerName: row.creatorName || fillers[index % fillers.length],
|
||||
settlementStatus: row.settlementStatus,
|
||||
stationName: row.stationName,
|
||||
stationCode: row.stationId || H2_STATION_CODE_MAP[row.stationName] || ''
|
||||
stationCode: row.stationId || H2_STATION_CODE_MAP[row.stationName] || '',
|
||||
recordSource: h2BridgeInferRecordSource(row),
|
||||
verifyStatus: row.verifyStatus === H2_VERIFY_VERIFIED ? H2_VERIFY_VERIFIED : H2_VERIFY_UNVERIFIED,
|
||||
verifiedAt: verifiedAt ? h2BridgeFormatDateTime(verifiedAt) : '',
|
||||
verifiedByName: row.verifiedByName || '',
|
||||
reconcileStatus: isReconciled ? H2_RECONCILE_RECONCILED : H2_RECONCILE_PENDING,
|
||||
reconcileTime: isReconciled ? reconcileTime : '',
|
||||
reconciledByName: row.reconciledByName || '',
|
||||
changeLogs: changeLogs
|
||||
};
|
||||
}
|
||||
|
||||
@@ -251,6 +636,84 @@ function h2BridgeGetStationList() {
|
||||
return list;
|
||||
}
|
||||
|
||||
/** 车牌写入口径:大写并补尾缀 F */
|
||||
function h2BridgeNormalizePlate(plateNo) {
|
||||
var plate = String(plateNo || '').trim().toUpperCase();
|
||||
if (plate && !/F$/u.test(plate)) plate += 'F';
|
||||
return plate;
|
||||
}
|
||||
|
||||
/** 时间写入口径:补全秒 */
|
||||
function h2BridgeNormalizeHydrogenTime(hydrogenTime) {
|
||||
var s = String(hydrogenTime || '').trim();
|
||||
if (s.length === 16) s += ':00';
|
||||
return s;
|
||||
}
|
||||
|
||||
/**
|
||||
* 业务主键:同站 + 同车牌 + 同加氢时间(精确到秒)视为重复。
|
||||
* @returns {object|null} 已存在行的浅拷贝,未命中返回 null
|
||||
*/
|
||||
function h2BridgeFindDuplicateRow(candidate, excludeId) {
|
||||
if (!candidate) return null;
|
||||
var store = h2BridgeGetStore();
|
||||
if (!store) return null;
|
||||
var station = String(candidate.stationName || '').trim();
|
||||
var plate = h2BridgeNormalizePlate(candidate.plateNo);
|
||||
var time = h2BridgeNormalizeHydrogenTime(candidate.hydrogenTime);
|
||||
if (!station || !plate || !time) return null;
|
||||
var exclude = excludeId != null ? String(excludeId) : '';
|
||||
var rows = store.getRows();
|
||||
var i;
|
||||
for (i = 0; i < rows.length; i++) {
|
||||
var row = rows[i];
|
||||
var id = String(row.id || row.key || '');
|
||||
if (exclude && id === exclude) continue;
|
||||
if (String(row.stationName || '').trim() !== station) continue;
|
||||
if (h2BridgeNormalizePlate(row.plateNo) !== plate) continue;
|
||||
if (h2BridgeNormalizeHydrogenTime(row.hydrogenTime) !== time) continue;
|
||||
return Object.assign({}, row);
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
/**
|
||||
* 总额与「单价×量」偏差(元)。容差默认 0.05。
|
||||
* @returns {{ expected: number, actual: number, diff: number }|null}
|
||||
*/
|
||||
function h2BridgeTotalAmountMismatch(unitPrice, hydrogenKg, totalAmount, toleranceYuan) {
|
||||
var p = Number(unitPrice);
|
||||
var k = Number(hydrogenKg);
|
||||
var a = Number(totalAmount);
|
||||
if (!isFinite(p) || !isFinite(k) || !isFinite(a)) return null;
|
||||
var expected = Math.round(p * k * 100) / 100;
|
||||
var actual = Math.round(a * 100) / 100;
|
||||
var tol = toleranceYuan != null ? Number(toleranceYuan) : 0.05;
|
||||
if (!isFinite(tol)) tol = 0.05;
|
||||
var diff = Math.round(Math.abs(actual - expected) * 100) / 100;
|
||||
if (diff <= tol) return null;
|
||||
return { expected: expected, actual: actual, diff: diff };
|
||||
}
|
||||
|
||||
/** 取该站最近一条流水的站端口径单价,缺省 42.5 */
|
||||
function h2BridgeLookupStationUnitPrice(stationName) {
|
||||
var name = String(stationName || '').trim();
|
||||
if (!name) return 42.5;
|
||||
var store = h2BridgeGetStore();
|
||||
if (!store) return 42.5;
|
||||
var rows = store.getRows().slice().sort(function (a, b) {
|
||||
return String(b.hydrogenTime || '').localeCompare(String(a.hydrogenTime || ''));
|
||||
});
|
||||
var i;
|
||||
for (i = 0; i < rows.length; i++) {
|
||||
if (String(rows[i].stationName || '').trim() !== name) continue;
|
||||
var price = rows[i].costUnitPrice != null ? rows[i].costUnitPrice : rows[i].customerUnitPrice;
|
||||
var n = Number(price);
|
||||
if (isFinite(n) && n >= 0) return Math.round(n * 100) / 100;
|
||||
}
|
||||
return 42.5;
|
||||
}
|
||||
|
||||
function h2BridgeInit() {
|
||||
h2BridgeEnsureApi();
|
||||
var store = h2BridgeGetStore();
|
||||
@@ -263,6 +726,26 @@ function h2BridgeInit() {
|
||||
getHrRecords: h2BridgeGetHrRecords,
|
||||
getOrderRecords: h2BridgeGetOrderRecords,
|
||||
getStationList: h2BridgeGetStationList,
|
||||
normalizePlate: h2BridgeNormalizePlate,
|
||||
normalizeHydrogenTime: h2BridgeNormalizeHydrogenTime,
|
||||
findDuplicateRow: h2BridgeFindDuplicateRow,
|
||||
totalAmountMismatch: h2BridgeTotalAmountMismatch,
|
||||
lookupStationUnitPrice: h2BridgeLookupStationUnitPrice,
|
||||
todayDateKey: h2BridgeTodayDateKey,
|
||||
getManualLedger: function (stationIdOrName, ledgerDate) {
|
||||
return store.getManualLedger(stationIdOrName, ledgerDate);
|
||||
},
|
||||
listManualLedgersByStation: function (stationIdOrName) {
|
||||
return store.listManualLedgersByStation(stationIdOrName);
|
||||
},
|
||||
hasManualLedgerForDate: function (stationIdOrName, ledgerDate) {
|
||||
return store.hasManualLedgerForDate(stationIdOrName, ledgerDate);
|
||||
},
|
||||
upsertManualLedger: function (input) {
|
||||
return store.upsertManualLedger(input);
|
||||
},
|
||||
upsertRow: function (row) { return store.upsertRow(row); },
|
||||
removeRow: function (id) { return store.removeRow(id); },
|
||||
subscribe: function (fn) { return store.subscribe(fn); }
|
||||
};
|
||||
}
|
||||
@@ -274,6 +757,12 @@ h2BridgeInit();
|
||||
export {
|
||||
H2_CANONICAL_LEDGER_SEED,
|
||||
H2_STATION_CODE_MAP,
|
||||
H2_RECONCILE_RECONCILED,
|
||||
H2_RECONCILE_PENDING,
|
||||
H2_VERIFY_VERIFIED,
|
||||
H2_VERIFY_UNVERIFIED,
|
||||
H2_RECORD_SOURCE_STATION,
|
||||
H2_RECORD_SOURCE_LINGNIU,
|
||||
h2BridgeInit,
|
||||
h2BridgeGetStore,
|
||||
h2BridgeGetAllRefuelRecords,
|
||||
@@ -281,5 +770,11 @@ export {
|
||||
h2BridgeBuildStationLedgerStore,
|
||||
h2BridgeGetHrRecords,
|
||||
h2BridgeGetOrderRecords,
|
||||
h2BridgeGetStationList
|
||||
h2BridgeGetStationList,
|
||||
h2BridgeNormalizePlate,
|
||||
h2BridgeNormalizeHydrogenTime,
|
||||
h2BridgeFindDuplicateRow,
|
||||
h2BridgeTotalAmountMismatch,
|
||||
h2BridgeLookupStationUnitPrice,
|
||||
h2BridgeInferRecordSource
|
||||
};
|
||||
|
||||
@@ -42,6 +42,9 @@
|
||||
}
|
||||
|
||||
.vm-kpi-val,
|
||||
.lbd-kpi-val,
|
||||
.bdl-kpi-val,
|
||||
.sob-kpi-val,
|
||||
.vm-mileage,
|
||||
.vm-expire-date,
|
||||
.vm-handover-situation-line--mile,
|
||||
|
||||
@@ -1,7 +1,18 @@
|
||||
/**
|
||||
* 列表页筛选区全局规则(与 vehicle-management/style.css 中 .vm-filter-grid 4 列布局一致)
|
||||
*
|
||||
* 规则:筛选项超过 1 行(默认 4 项)时,其余收入折叠区,通过「更多筛选」展开。
|
||||
* 完整视觉与交互规范:`rules/global-design-spec.md` §4.1
|
||||
* 参考实现:`src/prototypes/lease-business-detail/components/FilterPanel.tsx`
|
||||
*
|
||||
* ## 布局约束
|
||||
* 1. 收起时:首行(primary)最多展示 `VM_FILTER_COLUMNS_PER_ROW`(默认 4)项,占满 1 行。
|
||||
* 2. 展开时:其余项放入 `vm-filter-expand`(`ldb-filter-expand` 为同义别名);primary 与 extra 各自使用 4 列栅格。
|
||||
* 3. 禁止「末行仅 1 项」:若展开区项数为 4n+1,从首行尾部借调 1 项到展开区(首行变为 3 项)。
|
||||
* 典型:总项数 5 → 首行 3 + 展开 2;总项数 6 → 首行 4 + 展开 2。
|
||||
* 4. 切换文案仅「更多筛选」/「收起」;按钮类名 `vm-btn vm-btn-link vm-filter-toggle`。
|
||||
*
|
||||
* ## 占位符(筛选卡内强制)
|
||||
* font: `var(--vm-font)`;size: 0.875rem;weight: 400;color: `var(--ln-muted-soft)`;opacity: 1
|
||||
*/
|
||||
export const VM_FILTER_COLUMNS_PER_ROW = 4;
|
||||
|
||||
@@ -12,13 +23,37 @@ export function splitFilterFields<T>(
|
||||
fields: T[],
|
||||
primaryCount: number = VM_FILTER_PRIMARY_VISIBLE_COUNT,
|
||||
): { primary: T[]; extra: T[] } {
|
||||
if (fields.length <= primaryCount) {
|
||||
const columnsPerRow = primaryCount;
|
||||
if (fields.length <= columnsPerRow) {
|
||||
return { primary: fields, extra: [] };
|
||||
}
|
||||
return {
|
||||
primary: fields.slice(0, primaryCount),
|
||||
extra: fields.slice(primaryCount),
|
||||
};
|
||||
|
||||
const primary = fields.slice(0, columnsPerRow);
|
||||
const extra = fields.slice(columnsPerRow);
|
||||
|
||||
return rebalanceFilterSplit(primary, extra, columnsPerRow);
|
||||
}
|
||||
|
||||
/** 避免展开区出现 4n+1 项导致末行孤零零 1 项 */
|
||||
function rebalanceFilterSplit<T>(
|
||||
primary: T[],
|
||||
extra: T[],
|
||||
columnsPerRow: number,
|
||||
): { primary: T[]; extra: T[] } {
|
||||
const nextPrimary = [...primary];
|
||||
const nextExtra = [...extra];
|
||||
|
||||
while (
|
||||
nextExtra.length > 0
|
||||
&& nextExtra.length % columnsPerRow === 1
|
||||
&& nextPrimary.length > 0
|
||||
) {
|
||||
const moved = nextPrimary.pop();
|
||||
if (moved === undefined) break;
|
||||
nextExtra.unshift(moved);
|
||||
}
|
||||
|
||||
return { primary: nextPrimary, extra: nextExtra };
|
||||
}
|
||||
|
||||
export function shouldShowFilterExpand(
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
28
src/prototypes/customer-payment-collection/index.tsx
Normal file
28
src/prototypes/customer-payment-collection/index.tsx
Normal file
@@ -0,0 +1,28 @@
|
||||
/**
|
||||
* @name 客户回款情况
|
||||
* 自 ONE-OS Web 端 / 数据分析 / 客户回款情况 独立预览(OneOS 菜单入口)
|
||||
*/
|
||||
import '../../common/oneosWebLegacy/legacyGlobals';
|
||||
import React, { useEffect } from 'react';
|
||||
import * as antd from 'antd';
|
||||
import dayjs from 'dayjs';
|
||||
import { ConfigProvider } from 'antd';
|
||||
import 'antd/dist/reset.css';
|
||||
import { clearHostPrototypeRouteInfo } from '../../common/useHashPage';
|
||||
import CustomerPaymentCollectionPage from './pages/客户回款情况.jsx';
|
||||
|
||||
window.React = React;
|
||||
window.antd = antd;
|
||||
window.dayjs = dayjs;
|
||||
|
||||
export default function CustomerPaymentCollection() {
|
||||
useEffect(() => {
|
||||
clearHostPrototypeRouteInfo();
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<ConfigProvider>
|
||||
<CustomerPaymentCollectionPage />
|
||||
</ConfigProvider>
|
||||
);
|
||||
}
|
||||
847
src/prototypes/customer-payment-collection/pages/客户回款情况.jsx
Normal file
847
src/prototypes/customer-payment-collection/pages/客户回款情况.jsx
Normal file
@@ -0,0 +1,847 @@
|
||||
// 【重要】必须使用 const Component 作为组件变量名
|
||||
// 数据分析 - 客户回款情况
|
||||
// 默认展示当期客户应收/实收/期末余额;钻取至账单周期与多业务条线;实收变更实时联动期末余额
|
||||
|
||||
const Component = function () {
|
||||
var useState = React.useState;
|
||||
var useMemo = React.useMemo;
|
||||
var useCallback = React.useCallback;
|
||||
|
||||
var antd = window.antd;
|
||||
var App = antd.App;
|
||||
var Card = antd.Card;
|
||||
var Button = antd.Button;
|
||||
var Table = antd.Table;
|
||||
var Select = antd.Select;
|
||||
var DatePicker = antd.DatePicker;
|
||||
var Row = antd.Row;
|
||||
var Col = antd.Col;
|
||||
var Space = antd.Space;
|
||||
var Breadcrumb = antd.Breadcrumb;
|
||||
var InputNumber = antd.InputNumber;
|
||||
var Tag = antd.Tag;
|
||||
var Statistic = antd.Statistic;
|
||||
var message = antd.message;
|
||||
|
||||
var LINE_DEFS = [
|
||||
{ key: 'lease', label: '租赁业务' },
|
||||
{ key: 'logistics', label: '物流业务' },
|
||||
{ key: 'h2', label: '氢费业务' },
|
||||
{ key: 'electricity', label: '电费业务' },
|
||||
{ key: 'etc', label: 'ETC业务' }
|
||||
];
|
||||
|
||||
var LINE_KEYS = LINE_DEFS.map(function (d) { return d.key; });
|
||||
|
||||
var CUSTOMER_SEEDS = [
|
||||
{ name: '嘉兴古道物流有限公司', dept: '业务二部', salesperson: '谈云' },
|
||||
{ name: '杭州绿道城配科技有限公司', dept: '业务二部', salesperson: '刘念念' },
|
||||
{ name: '宁波港联氢运物流有限公司', dept: '业务一部', salesperson: '谯云' },
|
||||
{ name: '上海虹钦物流有限公司', dept: '业务一部', salesperson: '董剑煜' },
|
||||
{ name: '嘉兴市乍浦港口经营有限公司', dept: '业务三部', salesperson: '尚建华' },
|
||||
{ name: '荣达餐饮(广东)集团有限公司', dept: '业务三部', salesperson: '谈云' },
|
||||
{ name: '苏州氢能城配科技有限公司', dept: '业务二部', salesperson: '刘念念' },
|
||||
{ name: '无锡绿运供应链有限公司', dept: '业务一部', salesperson: '谯云' }
|
||||
];
|
||||
|
||||
function filterOption(input, option) {
|
||||
var label = (option && (option.label || option.children)) || '';
|
||||
return String(label).toLowerCase().indexOf(String(input || '').toLowerCase()) >= 0;
|
||||
}
|
||||
|
||||
function fmtMoney(n) {
|
||||
if (n === null || n === undefined || n === '') return '—';
|
||||
var x = Number(n);
|
||||
if (isNaN(x)) return '—';
|
||||
return x.toLocaleString('zh-CN', { minimumFractionDigits: 2, maximumFractionDigits: 2 });
|
||||
}
|
||||
|
||||
function numOrZero(v) {
|
||||
if (v === null || v === undefined || v === '') return 0;
|
||||
var n = Number(v);
|
||||
return isNaN(n) ? 0 : n;
|
||||
}
|
||||
|
||||
function escapeCsv(v) {
|
||||
var s = v == null ? '' : String(v);
|
||||
if (s.indexOf(',') !== -1 || s.indexOf('"') !== -1 || s.indexOf('\n') !== -1) {
|
||||
return '"' + s.replace(/"/g, '""') + '"';
|
||||
}
|
||||
return s;
|
||||
}
|
||||
|
||||
function downloadCsv(filename, lines) {
|
||||
var csv = lines.map(function (row) { return row.map(escapeCsv).join(','); }).join('\n');
|
||||
var blob = new Blob(['\ufeff' + csv], { type: 'text/csv;charset=utf-8' });
|
||||
var url = URL.createObjectURL(blob);
|
||||
var a = document.createElement('a');
|
||||
a.href = url;
|
||||
a.download = filename;
|
||||
a.click();
|
||||
URL.revokeObjectURL(url);
|
||||
}
|
||||
|
||||
function defaultPeriodMonth() {
|
||||
try {
|
||||
if (window.dayjs) return window.dayjs('2026-07-01');
|
||||
} catch (e1) {}
|
||||
return null;
|
||||
}
|
||||
|
||||
function periodKeyFromMonth(m) {
|
||||
if (!m || !m.format) return '2026-07';
|
||||
return m.format('YYYY-MM');
|
||||
}
|
||||
|
||||
function periodLabel(key) {
|
||||
if (!key || key.indexOf('-') < 0) return key || '—';
|
||||
var parts = key.split('-');
|
||||
return parts[0] + '年' + Number(parts[1]) + '月';
|
||||
}
|
||||
|
||||
function lineLabel(key) {
|
||||
var found = LINE_DEFS.find(function (d) { return d.key === key; });
|
||||
return found ? found.label : key;
|
||||
}
|
||||
|
||||
function sumLineAmounts(lines, field) {
|
||||
var total = 0;
|
||||
LINE_KEYS.forEach(function (k) {
|
||||
total += numOrZero(lines && lines[k] && lines[k][field]);
|
||||
});
|
||||
return total;
|
||||
}
|
||||
|
||||
function periodUncollected(lines) {
|
||||
return sumLineAmounts(lines, 'receivable') - sumLineAmounts(lines, 'received');
|
||||
}
|
||||
|
||||
function buildSeedRecords() {
|
||||
var records = [];
|
||||
var months = ['2026-01', '2026-02', '2026-03', '2026-04', '2026-05', '2026-06', '2026-07'];
|
||||
CUSTOMER_SEEDS.forEach(function (c, ci) {
|
||||
var periods = months.map(function (pk, mi) {
|
||||
var lines = {};
|
||||
LINE_KEYS.forEach(function (lk, li) {
|
||||
var base = 28000 + ci * 4200 + mi * 1800 + li * 2600;
|
||||
var recv = Math.round(base * (0.85 + (ci % 3) * 0.05));
|
||||
var got = recv - (mi % 4 === 0 && li % 2 === 0 ? Math.round(recv * 0.18) : Math.round(recv * 0.06));
|
||||
lines[lk] = { receivable: recv, received: got };
|
||||
});
|
||||
return { periodKey: pk, lines: lines };
|
||||
});
|
||||
records.push({
|
||||
id: 'cust-' + ci,
|
||||
customerName: c.name,
|
||||
dept: c.dept,
|
||||
salesperson: c.salesperson,
|
||||
periods: periods
|
||||
});
|
||||
});
|
||||
return records;
|
||||
}
|
||||
|
||||
function enrichCustomerPeriods(customer) {
|
||||
var sorted = (customer.periods || []).slice().sort(function (a, b) {
|
||||
return String(a.periodKey).localeCompare(String(b.periodKey));
|
||||
});
|
||||
var cumulative = 0;
|
||||
return sorted.map(function (p) {
|
||||
var receivable = sumLineAmounts(p.lines, 'receivable');
|
||||
var received = sumLineAmounts(p.lines, 'received');
|
||||
var uncollected = receivable - received;
|
||||
cumulative += uncollected;
|
||||
return Object.assign({}, p, {
|
||||
receivable: receivable,
|
||||
received: received,
|
||||
uncollected: uncollected,
|
||||
endingBalance: cumulative
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
function getCustomerPeriod(customer, periodKey) {
|
||||
var enriched = enrichCustomerPeriods(customer);
|
||||
return enriched.find(function (p) { return p.periodKey === periodKey; }) || null;
|
||||
}
|
||||
|
||||
function buildCustomerSummaryRows(records, periodKey, filters) {
|
||||
return records.map(function (cust) {
|
||||
var periods = enrichCustomerPeriods(cust);
|
||||
var current = periods.find(function (p) { return p.periodKey === periodKey; });
|
||||
if (!current) return null;
|
||||
if (filters.dept && cust.dept !== filters.dept) return null;
|
||||
if (filters.salesperson && cust.salesperson !== filters.salesperson) return null;
|
||||
if (filters.customer && cust.customerName !== filters.customer) return null;
|
||||
if (filters.lineKey) {
|
||||
var line = current.lines[filters.lineKey];
|
||||
if (!line || (line.receivable === 0 && line.received === 0)) return null;
|
||||
}
|
||||
return {
|
||||
key: cust.id,
|
||||
customerId: cust.id,
|
||||
customerName: cust.customerName,
|
||||
dept: cust.dept,
|
||||
salesperson: cust.salesperson,
|
||||
receivable: current.receivable,
|
||||
received: current.received,
|
||||
uncollected: current.uncollected,
|
||||
endingBalance: current.endingBalance,
|
||||
periodKey: periodKey
|
||||
};
|
||||
}).filter(Boolean);
|
||||
}
|
||||
|
||||
function buildLineRows(customer, periodKey) {
|
||||
var period = getCustomerPeriod(customer, periodKey);
|
||||
if (!period) return [];
|
||||
return LINE_DEFS.map(function (def) {
|
||||
var line = period.lines[def.key] || { receivable: 0, received: 0 };
|
||||
var recv = numOrZero(line.receivable);
|
||||
var got = numOrZero(line.received);
|
||||
return {
|
||||
key: def.key,
|
||||
lineKey: def.key,
|
||||
lineLabel: def.label,
|
||||
receivable: recv,
|
||||
received: got,
|
||||
uncollected: recv - got
|
||||
};
|
||||
});
|
||||
}
|
||||
|
||||
function updateLineReceived(records, customerId, periodKey, lineKey, newReceived) {
|
||||
return records.map(function (cust) {
|
||||
if (cust.id !== customerId) return cust;
|
||||
var periods = cust.periods.map(function (p) {
|
||||
if (p.periodKey !== periodKey) return p;
|
||||
var lines = Object.assign({}, p.lines);
|
||||
var prev = lines[lineKey] || { receivable: 0, received: 0 };
|
||||
lines[lineKey] = {
|
||||
receivable: prev.receivable,
|
||||
received: Math.max(0, numOrZero(newReceived))
|
||||
};
|
||||
return Object.assign({}, p, { lines: lines });
|
||||
});
|
||||
return Object.assign({}, cust, { periods: periods });
|
||||
});
|
||||
}
|
||||
|
||||
var layoutStyle = { padding: '16px 24px', background: '#f5f7fa', minHeight: '100vh' };
|
||||
var filterLabelStyle = { marginBottom: 6, fontSize: 14, color: 'rgba(0,0,0,0.65)' };
|
||||
var filterItemStyle = { marginBottom: 12 };
|
||||
var filterControlStyle = { width: '100%' };
|
||||
var drillLinkStyle = { cursor: 'pointer', color: '#165dff', border: 'none', background: 'none', padding: 0, font: 'inherit' };
|
||||
var moneyCellStyle = { fontVariantNumeric: 'tabular-nums' };
|
||||
var warnStyle = { color: '#cf1322', fontVariantNumeric: 'tabular-nums' };
|
||||
|
||||
var tableStyle =
|
||||
'.cpr-table .ant-table-thead>tr>th{background:#e8f3ff!important;font-weight:500;font-size:13px}' +
|
||||
'.cpr-table .ant-table-tbody>tr>td{white-space:nowrap}' +
|
||||
'.cpr-table .ant-table-summary{background:#fafafa;font-weight:600}' +
|
||||
'.cpr-kpi .ant-statistic-title{font-size:13px;color:rgba(0,0,0,0.55)}' +
|
||||
'.cpr-kpi .ant-statistic-content{font-variant-numeric:tabular-nums}';
|
||||
|
||||
var recordsState = useState(buildSeedRecords);
|
||||
var records = recordsState[0];
|
||||
var setRecords = recordsState[1];
|
||||
|
||||
var periodDraftState = useState(defaultPeriodMonth);
|
||||
var periodDraft = periodDraftState[0];
|
||||
var setPeriodDraft = periodDraftState[1];
|
||||
var periodAppliedState = useState(defaultPeriodMonth);
|
||||
var periodApplied = periodAppliedState[0];
|
||||
var setPeriodApplied = periodAppliedState[1];
|
||||
|
||||
var deptDraftState = useState(undefined);
|
||||
var deptDraft = deptDraftState[0];
|
||||
var setDeptDraft = deptDraftState[1];
|
||||
var deptAppliedState = useState(undefined);
|
||||
var deptApplied = deptAppliedState[0];
|
||||
var setDeptApplied = deptAppliedState[1];
|
||||
|
||||
var spDraftState = useState(undefined);
|
||||
var spDraft = spDraftState[0];
|
||||
var setSpDraft = spDraftState[1];
|
||||
var spAppliedState = useState(undefined);
|
||||
var spApplied = spAppliedState[0];
|
||||
var setSpApplied = spAppliedState[1];
|
||||
|
||||
var cuDraftState = useState(undefined);
|
||||
var cuDraft = cuDraftState[0];
|
||||
var setCuDraft = cuDraftState[1];
|
||||
var cuAppliedState = useState(undefined);
|
||||
var cuApplied = cuAppliedState[0];
|
||||
var setCuApplied = cuAppliedState[1];
|
||||
|
||||
var lineDraftState = useState(undefined);
|
||||
var lineDraft = lineDraftState[0];
|
||||
var setLineDraft = lineDraftState[1];
|
||||
var lineAppliedState = useState(undefined);
|
||||
var lineApplied = lineAppliedState[0];
|
||||
var setLineApplied = lineAppliedState[1];
|
||||
|
||||
var viewState = useState({ level: 'list', customerId: null, periodKey: null });
|
||||
var view = viewState[0];
|
||||
var setView = viewState[1];
|
||||
|
||||
var appliedPeriodKey = useMemo(function () {
|
||||
return periodKeyFromMonth(periodApplied);
|
||||
}, [periodApplied]);
|
||||
|
||||
var filters = useMemo(function () {
|
||||
return {
|
||||
dept: deptApplied,
|
||||
salesperson: spApplied,
|
||||
customer: cuApplied,
|
||||
lineKey: lineApplied
|
||||
};
|
||||
}, [deptApplied, spApplied, cuApplied, lineApplied]);
|
||||
|
||||
var summaryRows = useMemo(function () {
|
||||
return buildCustomerSummaryRows(records, appliedPeriodKey, filters);
|
||||
}, [records, appliedPeriodKey, filters]);
|
||||
|
||||
var activeCustomer = useMemo(function () {
|
||||
if (!view.customerId) return null;
|
||||
return records.find(function (r) { return r.id === view.customerId; }) || null;
|
||||
}, [records, view.customerId]);
|
||||
|
||||
var customerPeriodRows = useMemo(function () {
|
||||
if (!activeCustomer) return [];
|
||||
return enrichCustomerPeriods(activeCustomer);
|
||||
}, [activeCustomer]);
|
||||
|
||||
var lineRows = useMemo(function () {
|
||||
if (!activeCustomer || !view.periodKey) return [];
|
||||
return buildLineRows(activeCustomer, view.periodKey);
|
||||
}, [activeCustomer, view.periodKey]);
|
||||
|
||||
var kpi = useMemo(function () {
|
||||
var recv = 0;
|
||||
var got = 0;
|
||||
var endBal = 0;
|
||||
summaryRows.forEach(function (r) {
|
||||
recv += numOrZero(r.receivable);
|
||||
got += numOrZero(r.received);
|
||||
endBal += numOrZero(r.endingBalance);
|
||||
});
|
||||
return {
|
||||
customerCount: summaryRows.length,
|
||||
receivable: recv,
|
||||
received: got,
|
||||
uncollected: recv - got,
|
||||
endingBalance: endBal
|
||||
};
|
||||
}, [summaryRows]);
|
||||
|
||||
var deptOptions = useMemo(function () {
|
||||
var set = {};
|
||||
records.forEach(function (r) { set[r.dept] = true; });
|
||||
return [{ value: '', label: '全部部门' }].concat(Object.keys(set).sort().map(function (d) {
|
||||
return { value: d, label: d };
|
||||
}));
|
||||
}, [records]);
|
||||
|
||||
var spOptions = useMemo(function () {
|
||||
var set = {};
|
||||
records.forEach(function (r) { set[r.salesperson] = true; });
|
||||
return [{ value: '', label: '全部业务员' }].concat(Object.keys(set).sort().map(function (s) {
|
||||
return { value: s, label: s };
|
||||
}));
|
||||
}, [records]);
|
||||
|
||||
var cuOptions = useMemo(function () {
|
||||
return [{ value: '', label: '全部客户' }].concat(records.map(function (r) {
|
||||
return { value: r.customerName, label: r.customerName };
|
||||
}));
|
||||
}, [records]);
|
||||
|
||||
var lineOptions = useMemo(function () {
|
||||
return [{ value: '', label: '全部条线' }].concat(LINE_DEFS.map(function (d) {
|
||||
return { value: d.key, label: d.label };
|
||||
}));
|
||||
}, []);
|
||||
|
||||
var handleQuery = useCallback(function () {
|
||||
setPeriodApplied(periodDraft);
|
||||
setDeptApplied(deptDraft || undefined);
|
||||
setSpApplied(spDraft || undefined);
|
||||
setCuApplied(cuDraft || undefined);
|
||||
setLineApplied(lineDraft || undefined);
|
||||
setView({ level: 'list', customerId: null, periodKey: null });
|
||||
}, [periodDraft, deptDraft, spDraft, cuDraft, lineDraft]);
|
||||
|
||||
var handleReset = useCallback(function () {
|
||||
var p0 = defaultPeriodMonth();
|
||||
setPeriodDraft(p0);
|
||||
setPeriodApplied(p0);
|
||||
setDeptDraft(undefined);
|
||||
setDeptApplied(undefined);
|
||||
setSpDraft(undefined);
|
||||
setSpApplied(undefined);
|
||||
setCuDraft(undefined);
|
||||
setCuApplied(undefined);
|
||||
setLineDraft(undefined);
|
||||
setLineApplied(undefined);
|
||||
setView({ level: 'list', customerId: null, periodKey: null });
|
||||
}, []);
|
||||
|
||||
var openCustomer = useCallback(function (customerId) {
|
||||
setView({ level: 'customer', customerId: customerId, periodKey: null });
|
||||
}, []);
|
||||
|
||||
var openPeriod = useCallback(function (periodKey) {
|
||||
setView(function (prev) {
|
||||
return Object.assign({}, prev, { level: 'period', periodKey: periodKey });
|
||||
});
|
||||
}, []);
|
||||
|
||||
var backToList = useCallback(function () {
|
||||
setView({ level: 'list', customerId: null, periodKey: null });
|
||||
}, []);
|
||||
|
||||
var backToCustomer = useCallback(function () {
|
||||
setView(function (prev) {
|
||||
return Object.assign({}, prev, { level: 'customer', periodKey: null });
|
||||
});
|
||||
}, []);
|
||||
|
||||
var handleLineReceivedChange = useCallback(function (lineKey, value) {
|
||||
if (!activeCustomer || !view.periodKey) return;
|
||||
var period = getCustomerPeriod(activeCustomer, view.periodKey);
|
||||
if (!period) return;
|
||||
var line = period.lines[lineKey] || { receivable: 0, received: 0 };
|
||||
var recv = numOrZero(line.receivable);
|
||||
var got = numOrZero(value);
|
||||
if (got > recv) {
|
||||
message.warning('实收不能超过应收');
|
||||
return;
|
||||
}
|
||||
setRecords(function (prev) {
|
||||
return updateLineReceived(prev, activeCustomer.id, view.periodKey, lineKey, got);
|
||||
});
|
||||
}, [activeCustomer, view.periodKey]);
|
||||
|
||||
var exportListCsv = useCallback(function () {
|
||||
var headers = ['客户名称', '业务部门', '业务员', '统计周期', '应收', '实收', '未收', '期末余额'];
|
||||
var lines = [headers];
|
||||
summaryRows.forEach(function (r) {
|
||||
lines.push([
|
||||
r.customerName, r.dept, r.salesperson, periodLabel(appliedPeriodKey),
|
||||
r.receivable, r.received, r.uncollected, r.endingBalance
|
||||
]);
|
||||
});
|
||||
downloadCsv('客户回款情况_' + appliedPeriodKey + '.csv', lines);
|
||||
message.success('已导出客户汇总');
|
||||
}, [summaryRows, appliedPeriodKey]);
|
||||
|
||||
var exportCustomerCsv = useCallback(function () {
|
||||
if (!activeCustomer) return;
|
||||
var headers = ['账单周期', '应收', '实收', '未收', '期末余额'];
|
||||
var lines = [headers];
|
||||
customerPeriodRows.forEach(function (r) {
|
||||
lines.push([periodLabel(r.periodKey), r.receivable, r.received, r.uncollected, r.endingBalance]);
|
||||
});
|
||||
downloadCsv(activeCustomer.customerName + '_账单周期回款.csv', lines);
|
||||
message.success('已导出账单周期明细');
|
||||
}, [activeCustomer, customerPeriodRows]);
|
||||
|
||||
var exportLineCsv = useCallback(function () {
|
||||
if (!activeCustomer || !view.periodKey) return;
|
||||
var headers = ['业务条线', '应收', '实收', '未收'];
|
||||
var lines = [headers];
|
||||
lineRows.forEach(function (r) {
|
||||
lines.push([r.lineLabel, r.receivable, r.received, r.uncollected]);
|
||||
});
|
||||
downloadCsv(activeCustomer.customerName + '_' + view.periodKey + '_条线回款.csv', lines);
|
||||
message.success('已导出条线明细');
|
||||
}, [activeCustomer, view.periodKey, lineRows]);
|
||||
|
||||
var summaryFooter = useCallback(function () {
|
||||
var recv = 0;
|
||||
var got = 0;
|
||||
var uncol = 0;
|
||||
var endBal = 0;
|
||||
summaryRows.forEach(function (r) {
|
||||
recv += numOrZero(r.receivable);
|
||||
got += numOrZero(r.received);
|
||||
uncol += numOrZero(r.uncollected);
|
||||
endBal += numOrZero(r.endingBalance);
|
||||
});
|
||||
return React.createElement(Table.Summary, { fixed: true },
|
||||
React.createElement(Table.Summary.Row, null,
|
||||
React.createElement(Table.Summary.Cell, { index: 0, colSpan: 3 }, '合计(' + summaryRows.length + ' 家客户)'),
|
||||
React.createElement(Table.Summary.Cell, { index: 3, align: 'right' }, React.createElement('span', { style: moneyCellStyle }, fmtMoney(recv))),
|
||||
React.createElement(Table.Summary.Cell, { index: 4, align: 'right' }, React.createElement('span', { style: moneyCellStyle }, fmtMoney(got))),
|
||||
React.createElement(Table.Summary.Cell, { index: 5, align: 'right' }, React.createElement('span', { style: uncol > 0 ? warnStyle : moneyCellStyle }, fmtMoney(uncol))),
|
||||
React.createElement(Table.Summary.Cell, { index: 6, align: 'right' }, React.createElement('span', { style: endBal > 0 ? warnStyle : moneyCellStyle }, fmtMoney(endBal))),
|
||||
React.createElement(Table.Summary.Cell, { index: 7 })
|
||||
)
|
||||
);
|
||||
}, [summaryRows]);
|
||||
|
||||
var listColumns = [
|
||||
{
|
||||
title: '客户名称',
|
||||
dataIndex: 'customerName',
|
||||
key: 'customerName',
|
||||
width: 220,
|
||||
fixed: 'left',
|
||||
render: function (v, row) {
|
||||
return React.createElement('button', {
|
||||
type: 'button',
|
||||
className: 'cpr-drill-link',
|
||||
style: drillLinkStyle,
|
||||
onClick: function () { openCustomer(row.customerId); }
|
||||
}, v);
|
||||
}
|
||||
},
|
||||
{ title: '业务部门', dataIndex: 'dept', key: 'dept', width: 110 },
|
||||
{ title: '业务员', dataIndex: 'salesperson', key: 'salesperson', width: 100 },
|
||||
{
|
||||
title: '当期应收',
|
||||
dataIndex: 'receivable',
|
||||
key: 'receivable',
|
||||
width: 120,
|
||||
align: 'right',
|
||||
render: function (v) { return React.createElement('span', { style: moneyCellStyle }, fmtMoney(v)); }
|
||||
},
|
||||
{
|
||||
title: '当期实收',
|
||||
dataIndex: 'received',
|
||||
key: 'received',
|
||||
width: 120,
|
||||
align: 'right',
|
||||
render: function (v) { return React.createElement('span', { style: moneyCellStyle }, fmtMoney(v)); }
|
||||
},
|
||||
{
|
||||
title: '当期未收',
|
||||
dataIndex: 'uncollected',
|
||||
key: 'uncollected',
|
||||
width: 120,
|
||||
align: 'right',
|
||||
render: function (v) {
|
||||
return React.createElement('span', { style: v > 0 ? warnStyle : moneyCellStyle }, fmtMoney(v));
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '期末余额',
|
||||
dataIndex: 'endingBalance',
|
||||
key: 'endingBalance',
|
||||
width: 130,
|
||||
align: 'right',
|
||||
render: function (v) {
|
||||
return React.createElement('span', {
|
||||
style: v > 0 ? warnStyle : moneyCellStyle,
|
||||
title: '截至本期的累计未收余额(含历史各期未收之和)'
|
||||
}, fmtMoney(v));
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
key: 'action',
|
||||
width: 88,
|
||||
fixed: 'right',
|
||||
render: function (_, row) {
|
||||
return React.createElement(Button, {
|
||||
type: 'link',
|
||||
size: 'small',
|
||||
onClick: function () { openCustomer(row.customerId); }
|
||||
}, '钻取');
|
||||
}
|
||||
}
|
||||
];
|
||||
|
||||
var periodColumns = [
|
||||
{
|
||||
title: '账单周期',
|
||||
dataIndex: 'periodKey',
|
||||
key: 'periodKey',
|
||||
width: 140,
|
||||
render: function (v, row) {
|
||||
return React.createElement('button', {
|
||||
type: 'button',
|
||||
style: drillLinkStyle,
|
||||
onClick: function () { openPeriod(row.periodKey); }
|
||||
}, periodLabel(v));
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '应收',
|
||||
dataIndex: 'receivable',
|
||||
key: 'receivable',
|
||||
align: 'right',
|
||||
render: function (v) { return React.createElement('span', { style: moneyCellStyle }, fmtMoney(v)); }
|
||||
},
|
||||
{
|
||||
title: '实收',
|
||||
dataIndex: 'received',
|
||||
key: 'received',
|
||||
align: 'right',
|
||||
render: function (v) { return React.createElement('span', { style: moneyCellStyle }, fmtMoney(v)); }
|
||||
},
|
||||
{
|
||||
title: '未收',
|
||||
dataIndex: 'uncollected',
|
||||
key: 'uncollected',
|
||||
align: 'right',
|
||||
render: function (v) {
|
||||
return React.createElement('span', { style: v > 0 ? warnStyle : moneyCellStyle }, fmtMoney(v));
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '期末余额',
|
||||
dataIndex: 'endingBalance',
|
||||
key: 'endingBalance',
|
||||
align: 'right',
|
||||
render: function (v) {
|
||||
return React.createElement('span', { style: v > 0 ? warnStyle : moneyCellStyle }, fmtMoney(v));
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
key: 'action',
|
||||
width: 120,
|
||||
render: function (_, row) {
|
||||
return React.createElement(Button, {
|
||||
type: 'link',
|
||||
size: 'small',
|
||||
onClick: function () { openPeriod(row.periodKey); }
|
||||
}, '条线明细');
|
||||
}
|
||||
}
|
||||
];
|
||||
|
||||
var lineColumns = [
|
||||
{ title: '业务条线', dataIndex: 'lineLabel', key: 'lineLabel', width: 120 },
|
||||
{
|
||||
title: '应收',
|
||||
dataIndex: 'receivable',
|
||||
key: 'receivable',
|
||||
align: 'right',
|
||||
render: function (v) { return React.createElement('span', { style: moneyCellStyle }, fmtMoney(v)); }
|
||||
},
|
||||
{
|
||||
title: '实收',
|
||||
dataIndex: 'received',
|
||||
key: 'received',
|
||||
align: 'right',
|
||||
width: 160,
|
||||
render: function (v, row) {
|
||||
return React.createElement(InputNumber, {
|
||||
min: 0,
|
||||
max: numOrZero(row.receivable),
|
||||
step: 100,
|
||||
value: numOrZero(v),
|
||||
formatter: function (val) { return val == null ? '' : String(val); },
|
||||
parser: function (val) { return val ? val.replace(/,/g, '') : ''; },
|
||||
style: { width: '100%' },
|
||||
onChange: function (val) { handleLineReceivedChange(row.lineKey, val); }
|
||||
});
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '未收',
|
||||
dataIndex: 'uncollected',
|
||||
key: 'uncollected',
|
||||
align: 'right',
|
||||
render: function (v) {
|
||||
return React.createElement('span', { style: v > 0 ? warnStyle : moneyCellStyle }, fmtMoney(v));
|
||||
}
|
||||
}
|
||||
];
|
||||
|
||||
var breadcrumbItems = useMemo(function () {
|
||||
var items = [{ title: React.createElement('button', { type: 'button', style: drillLinkStyle, onClick: backToList }, '客户回款情况') }];
|
||||
if (view.level !== 'list' && activeCustomer) {
|
||||
items.push({
|
||||
title: view.level === 'customer'
|
||||
? activeCustomer.customerName
|
||||
: React.createElement('button', { type: 'button', style: drillLinkStyle, onClick: backToCustomer }, activeCustomer.customerName)
|
||||
});
|
||||
}
|
||||
if (view.level === 'period' && view.periodKey) {
|
||||
items.push({ title: periodLabel(view.periodKey) });
|
||||
}
|
||||
return items;
|
||||
}, [view, activeCustomer, backToList, backToCustomer]);
|
||||
|
||||
var pageTitle = view.level === 'list'
|
||||
? '客户回款情况'
|
||||
: view.level === 'customer'
|
||||
? activeCustomer ? activeCustomer.customerName + ' · 账单周期' : '账单周期'
|
||||
: '业务条线回款明细';
|
||||
|
||||
var pageHint = view.level === 'list'
|
||||
? '默认展示当期(' + periodLabel(appliedPeriodKey) + ')全部客户的应收、实收与期末余额;期末余额为截至当期的累计未收。'
|
||||
: view.level === 'customer'
|
||||
? '按账单周期查看该客户各期回款;期末余额逐期累加历史未收。'
|
||||
: '调整实收后,当期未收与本客户后续各期期末余额将实时重算。';
|
||||
|
||||
var exportHandler = view.level === 'list' ? exportListCsv : view.level === 'customer' ? exportCustomerCsv : exportLineCsv;
|
||||
|
||||
var tableData = view.level === 'list'
|
||||
? summaryRows
|
||||
: view.level === 'customer'
|
||||
? customerPeriodRows
|
||||
: lineRows;
|
||||
|
||||
var tableColumns = view.level === 'list'
|
||||
? listColumns
|
||||
: view.level === 'customer'
|
||||
? periodColumns
|
||||
: lineColumns;
|
||||
|
||||
var activePeriodSummary = useMemo(function () {
|
||||
if (!activeCustomer || !view.periodKey) return null;
|
||||
return getCustomerPeriod(activeCustomer, view.periodKey);
|
||||
}, [activeCustomer, view.periodKey, records]);
|
||||
|
||||
return React.createElement(App, null,
|
||||
React.createElement('style', null, tableStyle),
|
||||
React.createElement('div', { style: layoutStyle },
|
||||
React.createElement(Card, {
|
||||
bordered: false,
|
||||
style: { marginBottom: 16 },
|
||||
title: pageTitle,
|
||||
extra: React.createElement(Space, null,
|
||||
view.level !== 'list' ? React.createElement(Button, { onClick: view.level === 'period' ? backToCustomer : backToList }, '返回上一级') : null,
|
||||
React.createElement(Button, { onClick: exportHandler }, '导出 CSV')
|
||||
)
|
||||
},
|
||||
React.createElement(Breadcrumb, { items: breadcrumbItems, style: { marginBottom: 12 } }),
|
||||
React.createElement('div', { style: { marginBottom: 16, color: 'rgba(0,0,0,0.55)', fontSize: 13 } }, pageHint),
|
||||
view.level === 'list' ? React.createElement(Row, { gutter: 16, style: { marginBottom: 16 }, className: 'cpr-kpi' },
|
||||
React.createElement(Col, { xs: 12, sm: 8, md: 4 },
|
||||
React.createElement(Statistic, { title: '客户数', value: kpi.customerCount, suffix: '家' })
|
||||
),
|
||||
React.createElement(Col, { xs: 12, sm: 8, md: 5 },
|
||||
React.createElement(Statistic, { title: '当期应收合计', value: kpi.receivable, precision: 2, suffix: '元' })
|
||||
),
|
||||
React.createElement(Col, { xs: 12, sm: 8, md: 5 },
|
||||
React.createElement(Statistic, { title: '当期实收合计', value: kpi.received, precision: 2, suffix: '元' })
|
||||
),
|
||||
React.createElement(Col, { xs: 12, sm: 8, md: 5 },
|
||||
React.createElement(Statistic, { title: '当期未收合计', value: kpi.uncollected, precision: 2, suffix: '元', valueStyle: kpi.uncollected > 0 ? { color: '#cf1322' } : undefined })
|
||||
),
|
||||
React.createElement(Col, { xs: 12, sm: 8, md: 5 },
|
||||
React.createElement(Statistic, { title: '期末余额合计', value: kpi.endingBalance, precision: 2, suffix: '元', valueStyle: kpi.endingBalance > 0 ? { color: '#cf1322' } : undefined })
|
||||
)
|
||||
) : null,
|
||||
view.level === 'period' && activePeriodSummary ? React.createElement(Row, { gutter: 16, style: { marginBottom: 16 }, className: 'cpr-kpi' },
|
||||
React.createElement(Col, { span: 6 },
|
||||
React.createElement(Statistic, { title: '本期应收', value: activePeriodSummary.receivable, precision: 2, suffix: '元' })
|
||||
),
|
||||
React.createElement(Col, { span: 6 },
|
||||
React.createElement(Statistic, { title: '本期实收', value: activePeriodSummary.received, precision: 2, suffix: '元' })
|
||||
),
|
||||
React.createElement(Col, { span: 6 },
|
||||
React.createElement(Statistic, { title: '本期未收', value: activePeriodSummary.uncollected, precision: 2, suffix: '元', valueStyle: activePeriodSummary.uncollected > 0 ? { color: '#cf1322' } : undefined })
|
||||
),
|
||||
React.createElement(Col, { span: 6 },
|
||||
React.createElement(Statistic, { title: '期末余额', value: activePeriodSummary.endingBalance, precision: 2, suffix: '元', valueStyle: activePeriodSummary.endingBalance > 0 ? { color: '#cf1322' } : undefined })
|
||||
)
|
||||
) : null,
|
||||
view.level === 'list' ? React.createElement(Card, {
|
||||
size: 'small',
|
||||
style: { marginBottom: 16, background: '#fafafa' },
|
||||
title: '筛选条件'
|
||||
},
|
||||
React.createElement(Row, { gutter: 16 },
|
||||
React.createElement(Col, { xs: 24, sm: 12, md: 6 },
|
||||
React.createElement('div', { style: filterItemStyle },
|
||||
React.createElement('div', { style: filterLabelStyle }, '统计周期'),
|
||||
React.createElement(DatePicker, {
|
||||
picker: 'month',
|
||||
style: filterControlStyle,
|
||||
value: periodDraft,
|
||||
onChange: setPeriodDraft,
|
||||
allowClear: false
|
||||
})
|
||||
)
|
||||
),
|
||||
React.createElement(Col, { xs: 24, sm: 12, md: 6 },
|
||||
React.createElement('div', { style: filterItemStyle },
|
||||
React.createElement('div', { style: filterLabelStyle }, '客户名称'),
|
||||
React.createElement(Select, {
|
||||
showSearch: true,
|
||||
allowClear: true,
|
||||
placeholder: '全部客户',
|
||||
style: filterControlStyle,
|
||||
options: cuOptions,
|
||||
value: cuDraft,
|
||||
onChange: setCuDraft,
|
||||
filterOption: filterOption
|
||||
})
|
||||
)
|
||||
),
|
||||
React.createElement(Col, { xs: 24, sm: 12, md: 6 },
|
||||
React.createElement('div', { style: filterItemStyle },
|
||||
React.createElement('div', { style: filterLabelStyle }, '业务部门'),
|
||||
React.createElement(Select, {
|
||||
allowClear: true,
|
||||
placeholder: '全部部门',
|
||||
style: filterControlStyle,
|
||||
options: deptOptions,
|
||||
value: deptDraft,
|
||||
onChange: setDeptDraft
|
||||
})
|
||||
)
|
||||
),
|
||||
React.createElement(Col, { xs: 24, sm: 12, md: 6 },
|
||||
React.createElement('div', { style: filterItemStyle },
|
||||
React.createElement('div', { style: filterLabelStyle }, '业务员'),
|
||||
React.createElement(Select, {
|
||||
showSearch: true,
|
||||
allowClear: true,
|
||||
placeholder: '全部业务员',
|
||||
style: filterControlStyle,
|
||||
options: spOptions,
|
||||
value: spDraft,
|
||||
onChange: setSpDraft,
|
||||
filterOption: filterOption
|
||||
})
|
||||
)
|
||||
),
|
||||
React.createElement(Col, { xs: 24, sm: 12, md: 6 },
|
||||
React.createElement('div', { style: filterItemStyle },
|
||||
React.createElement('div', { style: filterLabelStyle }, '业务条线'),
|
||||
React.createElement(Select, {
|
||||
allowClear: true,
|
||||
placeholder: '全部条线',
|
||||
style: filterControlStyle,
|
||||
options: lineOptions,
|
||||
value: lineDraft,
|
||||
onChange: setLineDraft
|
||||
})
|
||||
)
|
||||
),
|
||||
React.createElement(Col, { xs: 24, sm: 12, md: 6 },
|
||||
React.createElement('div', { style: Object.assign({}, filterItemStyle, { paddingTop: 28 }) },
|
||||
React.createElement(Space, null,
|
||||
React.createElement(Button, { type: 'primary', onClick: handleQuery }, '查询'),
|
||||
React.createElement(Button, { onClick: handleReset }, '重置')
|
||||
)
|
||||
)
|
||||
)
|
||||
)
|
||||
) : null,
|
||||
view.level === 'period' ? React.createElement(Tag, { color: 'processing', style: { marginBottom: 12 } }, '可在「实收」列直接修改,期末余额将实时联动') : null,
|
||||
React.createElement(Table, {
|
||||
className: 'cpr-table',
|
||||
size: 'small',
|
||||
bordered: true,
|
||||
scroll: { x: view.level === 'list' ? 980 : 720 },
|
||||
columns: tableColumns,
|
||||
dataSource: tableData,
|
||||
pagination: view.level === 'list' ? { pageSize: 10, showSizeChanger: true, showTotal: function (t) { return '共 ' + t + ' 条'; } } : false,
|
||||
summary: view.level === 'list' ? summaryFooter : undefined,
|
||||
locale: { emptyText: '暂无符合条件的数据' }
|
||||
})
|
||||
)
|
||||
)
|
||||
);
|
||||
};
|
||||
|
||||
export default Component;
|
||||
@@ -6,6 +6,11 @@
|
||||
|
||||
import React, { useState, useMemo, useCallback, useRef } from 'react';
|
||||
import { OperationActions } from '../../common/OperationActions';
|
||||
import {
|
||||
shouldShowFilterExpand,
|
||||
splitFilterFields,
|
||||
VM_FILTER_PRIMARY_VISIBLE_COUNT,
|
||||
} from '../../common/vm-filter-panel';
|
||||
import dayjs from 'dayjs';
|
||||
import customParseFormat from 'dayjs/plugin/customParseFormat';
|
||||
import {
|
||||
@@ -6335,7 +6340,7 @@ const Component = function () {
|
||||
};
|
||||
|
||||
const renderFilterField = (label, control) => (
|
||||
<label className="lc-filter-field">
|
||||
<label key={label} className="lc-filter-field">
|
||||
<span className="lc-filter-field-label">{label}</span>
|
||||
<div className="lc-filter-field-control">{control}</div>
|
||||
</label>
|
||||
@@ -6498,160 +6503,229 @@ const Component = function () {
|
||||
onHeaderCell: listColumnHeaderCell,
|
||||
render: (record) => (
|
||||
<OperationActions
|
||||
view={{ label: '管理', onClick: () => openVehicleInsuranceMgmt(record) }}
|
||||
more={[{ key: 'manage', label: '管理', onClick: () => openVehicleInsuranceMgmt(record) }]}
|
||||
/>
|
||||
),
|
||||
},
|
||||
];
|
||||
|
||||
const listFilterFieldNodes = [
|
||||
renderFilterField('车牌号', (
|
||||
<Input
|
||||
placeholder={appliedMultiPlates.length ? '已启用多车牌筛选' : '请输入车牌号'}
|
||||
allowClear
|
||||
disabled={appliedMultiPlates.length > 0}
|
||||
value={listFilters.plateNo}
|
||||
onChange={(e) => setListFilters((prev) => ({ ...prev, plateNo: e.target.value }))}
|
||||
onPressEnter={handleListFilterQuery}
|
||||
/>
|
||||
)),
|
||||
renderFilterField('多车牌', (
|
||||
<Popover
|
||||
open={multiPlateOpen}
|
||||
onOpenChange={handleMultiPlateOpenChange}
|
||||
trigger="click"
|
||||
placement="bottomLeft"
|
||||
content={(
|
||||
<div className="lc-multi-plate-pop">
|
||||
<div className="lc-multi-plate-pop-hint">每行一个车牌,或同一行内用逗号分隔</div>
|
||||
<Input.TextArea
|
||||
rows={5}
|
||||
value={multiPlateDraft}
|
||||
onChange={(e) => setMultiPlateDraft(e.target.value)}
|
||||
placeholder={'沪A03561F\n粤B58888F'}
|
||||
/>
|
||||
<div className="lc-multi-plate-pop-actions">
|
||||
<Button size="small" onClick={() => setMultiPlateOpen(false)}>取消</Button>
|
||||
<Button size="small" type="primary" onClick={handleListFilterQuery}>应用</Button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
>
|
||||
const listFilterFields = [
|
||||
{
|
||||
key: 'plateNo',
|
||||
active: Boolean(String(listFilters.plateNo || '').trim()),
|
||||
node: renderFilterField('车牌号', (
|
||||
<Input
|
||||
className="lc-multi-plate-trigger"
|
||||
readOnly
|
||||
placeholder="点击输入多个车牌"
|
||||
value={appliedMultiPlates.length ? `已选 ${appliedMultiPlates.length} 个车牌` : ''}
|
||||
/>
|
||||
</Popover>
|
||||
)),
|
||||
renderFilterField('VIN码', (
|
||||
<Input
|
||||
placeholder="请输入车辆识别代码"
|
||||
allowClear
|
||||
value={listFilters.vin}
|
||||
onChange={(e) => setListFilters((prev) => ({ ...prev, vin: e.target.value }))}
|
||||
onPressEnter={handleListFilterQuery}
|
||||
/>
|
||||
)),
|
||||
renderFilterField('品牌', (
|
||||
<Select
|
||||
placeholder="请选择或输入品牌"
|
||||
allowClear
|
||||
showSearch
|
||||
value={listFilters.brand || undefined}
|
||||
onChange={(val) => setListFilters((prev) => ({ ...prev, brand: val || '' }))}
|
||||
options={brandOptions}
|
||||
filterOption={(input, option) => (option?.label || '').toLowerCase().includes(input.toLowerCase())}
|
||||
style={{ width: '100%' }}
|
||||
/>
|
||||
)),
|
||||
renderFilterField('型号', (
|
||||
<Select
|
||||
placeholder="请选择或输入型号"
|
||||
allowClear
|
||||
showSearch
|
||||
value={listFilters.model || undefined}
|
||||
onChange={(val) => setListFilters((prev) => ({ ...prev, model: val || '' }))}
|
||||
options={modelOptions}
|
||||
filterOption={(input, option) => (option?.label || '').toLowerCase().includes(input.toLowerCase())}
|
||||
style={{ width: '100%' }}
|
||||
/>
|
||||
)),
|
||||
renderFilterField('运营状态', (
|
||||
<Select
|
||||
value={listFilters.operateStatus}
|
||||
onChange={(val) => setListFilters((prev) => ({ ...prev, operateStatus: val }))}
|
||||
style={{ width: '100%' }}
|
||||
>
|
||||
<Select.Option value="全部">全部</Select.Option>
|
||||
<Select.Option value="租赁">租赁</Select.Option>
|
||||
<Select.Option value="自营">自营</Select.Option>
|
||||
<Select.Option value="库存">库存</Select.Option>
|
||||
<Select.Option value="退出运营">退出运营</Select.Option>
|
||||
</Select>
|
||||
)),
|
||||
renderFilterField('保险状态', (
|
||||
<Select
|
||||
value={listFilters.insuranceStatus}
|
||||
onChange={(val) => setListFilters((prev) => ({ ...prev, insuranceStatus: val }))}
|
||||
style={{ width: '100%' }}
|
||||
>
|
||||
<Select.Option value="全部">全部</Select.Option>
|
||||
<Select.Option value="正常">正常/临期</Select.Option>
|
||||
<Select.Option value="异常">异常</Select.Option>
|
||||
</Select>
|
||||
)),
|
||||
renderFilterField('保险类型', (
|
||||
<Select
|
||||
placeholder="请选择险种"
|
||||
allowClear
|
||||
value={listFilters.insuranceType || undefined}
|
||||
onChange={(val) => setListFilters((prev) => ({
|
||||
...prev,
|
||||
insuranceType: val || '',
|
||||
endDateRange: val ? prev.endDateRange : null,
|
||||
}))}
|
||||
options={INSURANCE_TYPE_ITEMS.map((item) => ({
|
||||
label: item.fullLabel,
|
||||
value: item.fullLabel,
|
||||
}))}
|
||||
style={{ width: '100%' }}
|
||||
/>
|
||||
)),
|
||||
renderFilterField('到期时间', (
|
||||
<Tooltip title={listFilters.insuranceType ? '' : '须先选择保险类型'}>
|
||||
<DatePicker.RangePicker
|
||||
style={{ width: '100%' }}
|
||||
value={listFilters.endDateRange}
|
||||
disabled={!listFilters.insuranceType}
|
||||
onChange={(range) => {
|
||||
if (!listFilters.insuranceType) {
|
||||
message.warning('请先选择保险类型');
|
||||
return;
|
||||
}
|
||||
setListFilters((prev) => ({ ...prev, endDateRange: range }));
|
||||
}}
|
||||
placeholder={listFilters.insuranceType ? ['开始日期', '结束日期'] : ['请先选择保险类型', '']}
|
||||
placeholder={appliedMultiPlates.length ? '已启用多车牌筛选' : '请输入车牌号'}
|
||||
allowClear
|
||||
disabled={appliedMultiPlates.length > 0}
|
||||
value={listFilters.plateNo}
|
||||
onChange={(e) => setListFilters((prev) => ({ ...prev, plateNo: e.target.value }))}
|
||||
onPressEnter={handleListFilterQuery}
|
||||
/>
|
||||
</Tooltip>
|
||||
)),
|
||||
)),
|
||||
},
|
||||
{
|
||||
key: 'plateNos',
|
||||
active: Boolean(String(listFilters.plateNos || multiPlateDraft || '').trim()),
|
||||
node: renderFilterField('多车牌', (
|
||||
<Popover
|
||||
open={multiPlateOpen}
|
||||
onOpenChange={handleMultiPlateOpenChange}
|
||||
trigger="click"
|
||||
placement="bottomLeft"
|
||||
content={(
|
||||
<div className="lc-multi-plate-pop">
|
||||
<div className="lc-multi-plate-pop-hint">每行一个车牌,或同一行内用逗号分隔</div>
|
||||
<Input.TextArea
|
||||
rows={5}
|
||||
value={multiPlateDraft}
|
||||
onChange={(e) => setMultiPlateDraft(e.target.value)}
|
||||
placeholder={'沪A03561F\n粤B58888F'}
|
||||
/>
|
||||
<div className="lc-multi-plate-pop-actions">
|
||||
<Button size="small" onClick={() => setMultiPlateOpen(false)}>取消</Button>
|
||||
<Button size="small" type="primary" onClick={handleListFilterQuery}>应用</Button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
>
|
||||
<Input
|
||||
className="lc-multi-plate-trigger"
|
||||
readOnly
|
||||
placeholder="点击输入多个车牌"
|
||||
value={appliedMultiPlates.length ? `已选 ${appliedMultiPlates.length} 个车牌` : ''}
|
||||
/>
|
||||
</Popover>
|
||||
)),
|
||||
},
|
||||
{
|
||||
key: 'vin',
|
||||
active: Boolean(String(listFilters.vin || '').trim()),
|
||||
node: renderFilterField('VIN码', (
|
||||
<Input
|
||||
placeholder="请输入车辆识别代码"
|
||||
allowClear
|
||||
value={listFilters.vin}
|
||||
onChange={(e) => setListFilters((prev) => ({ ...prev, vin: e.target.value }))}
|
||||
onPressEnter={handleListFilterQuery}
|
||||
/>
|
||||
)),
|
||||
},
|
||||
{
|
||||
key: 'brand',
|
||||
active: Boolean(listFilters.brand),
|
||||
node: renderFilterField('品牌', (
|
||||
<Select
|
||||
placeholder="请选择或输入品牌"
|
||||
allowClear
|
||||
showSearch
|
||||
value={listFilters.brand || undefined}
|
||||
onChange={(val) => setListFilters((prev) => ({ ...prev, brand: val || '' }))}
|
||||
options={brandOptions}
|
||||
filterOption={(input, option) => (option?.label || '').toLowerCase().includes(input.toLowerCase())}
|
||||
style={{ width: '100%' }}
|
||||
/>
|
||||
)),
|
||||
},
|
||||
{
|
||||
key: 'model',
|
||||
active: Boolean(listFilters.model),
|
||||
node: renderFilterField('型号', (
|
||||
<Select
|
||||
placeholder="请选择或输入型号"
|
||||
allowClear
|
||||
showSearch
|
||||
value={listFilters.model || undefined}
|
||||
onChange={(val) => setListFilters((prev) => ({ ...prev, model: val || '' }))}
|
||||
options={modelOptions}
|
||||
filterOption={(input, option) => (option?.label || '').toLowerCase().includes(input.toLowerCase())}
|
||||
style={{ width: '100%' }}
|
||||
/>
|
||||
)),
|
||||
},
|
||||
{
|
||||
key: 'operateStatus',
|
||||
active: listFilters.operateStatus !== '全部',
|
||||
node: renderFilterField('运营状态', (
|
||||
<Select
|
||||
value={listFilters.operateStatus}
|
||||
onChange={(val) => setListFilters((prev) => ({ ...prev, operateStatus: val }))}
|
||||
style={{ width: '100%' }}
|
||||
>
|
||||
<Select.Option value="全部">全部</Select.Option>
|
||||
<Select.Option value="租赁">租赁</Select.Option>
|
||||
<Select.Option value="自营">自营</Select.Option>
|
||||
<Select.Option value="库存">库存</Select.Option>
|
||||
<Select.Option value="退出运营">退出运营</Select.Option>
|
||||
</Select>
|
||||
)),
|
||||
},
|
||||
{
|
||||
key: 'insuranceStatus',
|
||||
active: listFilters.insuranceStatus !== '全部',
|
||||
node: renderFilterField('保险状态', (
|
||||
<Select
|
||||
value={listFilters.insuranceStatus}
|
||||
onChange={(val) => setListFilters((prev) => ({ ...prev, insuranceStatus: val }))}
|
||||
style={{ width: '100%' }}
|
||||
>
|
||||
<Select.Option value="全部">全部</Select.Option>
|
||||
<Select.Option value="正常">正常/临期</Select.Option>
|
||||
<Select.Option value="异常">异常</Select.Option>
|
||||
</Select>
|
||||
)),
|
||||
},
|
||||
{
|
||||
key: 'insuranceType',
|
||||
active: Boolean(listFilters.insuranceType),
|
||||
node: renderFilterField('保险类型', (
|
||||
<Select
|
||||
placeholder="请选择险种"
|
||||
allowClear
|
||||
value={listFilters.insuranceType || undefined}
|
||||
onChange={(val) => setListFilters((prev) => ({
|
||||
...prev,
|
||||
insuranceType: val || '',
|
||||
endDateRange: val ? prev.endDateRange : null,
|
||||
}))}
|
||||
options={INSURANCE_TYPE_ITEMS.map((item) => ({
|
||||
label: item.fullLabel,
|
||||
value: item.fullLabel,
|
||||
}))}
|
||||
style={{ width: '100%' }}
|
||||
/>
|
||||
)),
|
||||
},
|
||||
{
|
||||
key: 'endDateRange',
|
||||
active: Boolean(listFilters.endDateRange?.[0] || listFilters.endDateRange?.[1]),
|
||||
node: renderFilterField('到期时间', (
|
||||
<Tooltip title={listFilters.insuranceType ? '' : '须先选择保险类型'}>
|
||||
<DatePicker.RangePicker
|
||||
style={{ width: '100%' }}
|
||||
value={listFilters.endDateRange}
|
||||
disabled={!listFilters.insuranceType}
|
||||
onChange={(range) => {
|
||||
if (!listFilters.insuranceType) {
|
||||
message.warning('请先选择保险类型');
|
||||
return;
|
||||
}
|
||||
setListFilters((prev) => ({ ...prev, endDateRange: range }));
|
||||
}}
|
||||
placeholder={listFilters.insuranceType ? ['开始日期', '结束日期'] : ['请先选择保险类型', '']}
|
||||
allowClear
|
||||
/>
|
||||
</Tooltip>
|
||||
)),
|
||||
},
|
||||
];
|
||||
|
||||
const listFilterSplit = splitFilterFields(listFilterFields, VM_FILTER_PRIMARY_VISIBLE_COUNT);
|
||||
const listFilterPrimary = listFilterSplit.primary;
|
||||
const listFilterExtra = listFilterSplit.extra;
|
||||
const showListFilterExpand = shouldShowFilterExpand(listFilterFields.length);
|
||||
const listFilterExtraActiveCount = listFilterExtra.filter((field) => field.active).length;
|
||||
const listFilterExpandPanelId = 'ipc-filter-expand-panel';
|
||||
|
||||
return (
|
||||
<div className="vm-page ipc-page">
|
||||
<style>{PAGE_STYLE}</style>
|
||||
|
||||
<div className="ipc-list-shell">
|
||||
<Card className="lc-filter-card" data-annotation-id="ipc-filter" title="筛选条件" bordered={false}>
|
||||
<div className="lc-filter-grid">
|
||||
{(listFilterExpanded ? listFilterFieldNodes : listFilterFieldNodes.slice(0, 4))}
|
||||
<div className="vm-filter-body">
|
||||
<div className="lc-filter-grid vm-filter-grid--primary" data-filter-tier="primary">
|
||||
{listFilterPrimary.map((field) => field.node)}
|
||||
</div>
|
||||
{showListFilterExpand ? (
|
||||
<div
|
||||
className={`vm-filter-expand${listFilterExpanded ? ' is-expanded' : ''}`}
|
||||
aria-hidden={!listFilterExpanded}
|
||||
id={listFilterExpandPanelId}
|
||||
>
|
||||
<div className="vm-filter-expand-inner">
|
||||
<div className="lc-filter-grid vm-filter-expand-grid" data-filter-tier="extra">
|
||||
{listFilterExpanded ? listFilterExtra.map((field) => field.node) : null}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
<div className="lc-filter-actions">
|
||||
{listFilterFieldNodes.length > 4 ? (
|
||||
<Button type="link" className="lc-filter-expand-btn" onClick={() => setListFilterExpanded((prev) => !prev)}>
|
||||
{showListFilterExpand ? (
|
||||
<Button
|
||||
type="link"
|
||||
className="lc-filter-expand-btn vm-filter-toggle"
|
||||
onClick={() => setListFilterExpanded((prev) => !prev)}
|
||||
aria-expanded={listFilterExpanded}
|
||||
aria-controls={listFilterExpandPanelId}
|
||||
>
|
||||
{listFilterExpanded ? '收起' : '更多筛选'}
|
||||
{listFilterExtraActiveCount > 0 && !listFilterExpanded ? (
|
||||
<span className="vm-filter-toggle-badge" aria-label={`已设置 ${listFilterExtraActiveCount} 项扩展筛选`}>
|
||||
{listFilterExtraActiveCount}
|
||||
</span>
|
||||
) : null}
|
||||
</Button>
|
||||
) : null}
|
||||
<Button onClick={handleListFilterReset}>重置</Button>
|
||||
|
||||
@@ -480,10 +480,10 @@
|
||||
},
|
||||
"markdownMap": {
|
||||
"ipc-header": "# 模块边界\n\n保险采购包含两条**相互独立**的业务线:\n\n1. **保单管理**:一车一档台账,OCR/导入/手工录入,停保/复驶/退保留痕,与车辆管理交车合规联动。\n2. **比价单**:采购前多方报价、批次管理、最晚付费预警、采购审批;**审批通过不自动写入保单台账**。\n\n右上角「查看需求说明」含完整研发 PRD。",
|
||||
"ipc-filter": "# 筛选条件\n\n| 字段 | 说明 |\n|------|------|\n| 车牌号 | 单车模糊匹配;与多车牌互斥 |\n| 多车牌 | 每行一个或逗号分隔 |\n| VIN | 车辆识别代码 |\n| 品牌/型号 | 下拉可搜 |\n| 运营状态 | 租赁/自营/库存/退出运营 |\n| 保险状态 | 正常/临期 或 异常 |\n| 保险类型 + 到期时间 | 须先选险种再选日期范围 |\n\n点击「查询」应用条件;「重置」清空。",
|
||||
"ipc-filter": "# 筛选条件\n\n默认首行展示主筛选项;其余收入「更多筛选」展开区(布局与重排规则同全局 `vm-filter-panel`)。\n\n| 字段 | 说明 |\n|------|------|\n| 车牌号 | 单车模糊匹配;与多车牌互斥 |\n| 多车牌 | 每行一个或逗号分隔 |\n| VIN | 车辆识别代码 |\n| 品牌/型号 | 下拉可搜 |\n| 运营状态 | 租赁/自营/库存/退出运营 |\n| 保险状态 | 正常/临期 或 异常 |\n| 保险类型 + 到期时间 | 须先选险种再选日期范围 |\n\n点击「查询」应用条件;「重置」清空。收起时若扩展区已有条件,按钮显示数量角标。",
|
||||
"ipc-btn-compare-mgmt": "# 比价单管理\n\n独立业务线入口。支持:\n\n- 按创建时间、车牌筛选批次\n- 最晚付费临期/超期 KPI 筛选\n- 新建/编辑比价单\n- 查看采购状态(审批中/通过/驳回/撤回)\n\n**不自动同步**至保单台账。",
|
||||
"ipc-btn-policy-ocr": "# 保单批量识别(OCR)\n\n- 业务类型:保单录入、停保、复驶、退保\n- 自动识别车牌、保单号并匹配台账\n- 识别结果须**人工确认**后落库\n- OCR 确认页**不展示**承保险种明细、分项保费等(手工新增保留)",
|
||||
"ipc-vehicle-table": "# 台账列表\n\n| 列 | 说明 |\n|----|------|\n| 车牌/VIN/品牌型号 | 车辆标识 |\n| 运营状态 | 退出运营行灰显 |\n| 保险状态 | 与 KPI 口径一致 |\n| 五类险种到期日 | 副文案:临期天数/停保/退保标签 |\n| 操作·管理 | 打开车辆保险档案 |",
|
||||
"ipc-vehicle-table": "# 台账列表\n\n| 列 | 说明 |\n|----|------|\n| 车牌/VIN/品牌型号 | 车辆标识 |\n| 运营状态 | 退出运营行灰显 |\n| 保险状态 | 与 KPI 口径一致 |\n| 五类险种到期日 | 副文案:临期天数/停保/退保标签 |\n| 操作·更多 → 管理 | 打开车辆保险档案 |",
|
||||
"ipc-vehicle-mgmt": "# 车辆保险档案\n\n展示车辆元信息、保险状态胶囊、客户/产权方等。\n\n**保险状态**:交强险+商业险均在有效期内为正常,否则异常(禁止交车)。",
|
||||
"ipc-vehicle-mgmt-tabs": "# Tab 结构\n\n- **全周期记录**:时间轴,左新保/续保,右停保/复驶/退保\n- **分险种 Tab**:交强险、商业险、超赔、驾意、货物\n\n历史表含:导入时间、类型、保单号、保险状态、保司、日期、金额、操作。\n\n当前有效保单可办理停保/复驶/退保;归档记录只读。",
|
||||
"ipc-compare-mgmt": "# 比价单批次\n\n列表展示创建时间、创建人、购买记录数、确认金额、备注等。\n\n操作:编辑、删除(未提交审批时)、查看附件。",
|
||||
|
||||
@@ -4,6 +4,8 @@
|
||||
*/
|
||||
@import url('../../../resources/oneos-web-legacy/styles/oneos-app.css');
|
||||
@import url('../../../resources/oneos-web-legacy/styles/ant-table-global-fix.css');
|
||||
/* 列表「更多」下拉:与租赁合同等台账页 OperationActions 效果一致 */
|
||||
@import url('../../../common/vm-operation-actions.css');
|
||||
|
||||
/* 列表页全屏滚动布局 */
|
||||
.vm-page.ipc-page {
|
||||
@@ -200,6 +202,69 @@
|
||||
font-weight: var(--oneos-font-weight-medium);
|
||||
}
|
||||
|
||||
/* 更多筛选展开区 — 与 vm-filter-panel / 合同模板等台账页一致 */
|
||||
.vm-page.ipc-page .vm-filter-body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.vm-page.ipc-page .vm-filter-expand {
|
||||
display: grid;
|
||||
grid-template-rows: 0fr;
|
||||
transition: grid-template-rows 0.28s ease, opacity 0.22s ease, margin-top 0.22s ease;
|
||||
opacity: 0;
|
||||
margin-top: 0;
|
||||
pointer-events: none;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.vm-page.ipc-page .vm-filter-expand.is-expanded {
|
||||
grid-template-rows: 1fr;
|
||||
opacity: 1;
|
||||
margin-top: 12px;
|
||||
pointer-events: auto;
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
.vm-page.ipc-page .vm-filter-expand.is-expanded .vm-filter-expand-inner {
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.vm-page.ipc-page .vm-filter-expand-inner {
|
||||
overflow: hidden;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.vm-page.ipc-page .vm-filter-toggle {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.vm-page.ipc-page .vm-filter-toggle-badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-width: 18px;
|
||||
height: 18px;
|
||||
padding: 0 5px;
|
||||
border-radius: 999px;
|
||||
background: var(--oneos-color-primary, #10b981);
|
||||
color: #fff;
|
||||
font-size: 0.6875rem;
|
||||
font-weight: 700;
|
||||
line-height: 1;
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.vm-page.ipc-page .vm-filter-expand {
|
||||
transition: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* 列表工具栏 */
|
||||
.vm-page.ipc-page .lc-table-toolbar-meta {
|
||||
font-size: var(--oneos-font-size-sm);
|
||||
|
||||
153
src/prototypes/lease-business-detail/.spec/field-checks.md
Normal file
153
src/prototypes/lease-business-detail/.spec/field-checks.md
Normal file
@@ -0,0 +1,153 @@
|
||||
# 租赁业务明细 · 单元格系统校验
|
||||
|
||||
> 实现:`utils/field-checks.ts`、`utils/system-ref.ts`;UI:`components/FieldCheckIcon.tsx`
|
||||
|
||||
列表部分列在单元格右侧展示**校验图标**(绿色 ✓ / 黄色 ⚠)。点击可查看说明;警告项在支持时提供**一键替换**为系统建议值。
|
||||
|
||||
## 对照数据源(原型本地种子)
|
||||
|
||||
| 来源 | 路径 | 用途 |
|
||||
|---|---|---|
|
||||
| 客户管理 | `customer-management/data/customers.json` | 客户名称是否已登记 |
|
||||
| 车辆管理 | `vehicle-management/data/vehicles.json` | 车牌是否存在、交车/还车日期、登记所有权 |
|
||||
| 明细种子合同 | `lease-business-detail/data/rows.json` | 车牌 + 客户 → 合同(押金、租金、提车/退车日期等) |
|
||||
|
||||
启动时由 `system-ref.ts` 聚合为内存索引;**当前原型未接真实后端 API**。
|
||||
|
||||
## 交互与状态
|
||||
|
||||
| 状态 | 图标 | 点击行为 |
|
||||
|---|---|---|
|
||||
| `ok` | 绿色 ✓ | 展示通过说明(tooltip) |
|
||||
| `warn` | 黄色 ⚠ | 展示差异说明;部分字段可「一键替换」 |
|
||||
| `none` | 不显示 | 无校验条件或无需提示 |
|
||||
|
||||
匹配规则:字符串比较前 **trim 首尾空格**;金额比较容差 **0.005 元**。
|
||||
|
||||
---
|
||||
|
||||
## 客户名称(`customerName`)
|
||||
|
||||
**前置**:车牌、客户名称均非空,否则不校验。
|
||||
|
||||
**期望客户 `expected`**:`resolveExpectedCustomer(车牌, 提车日期, 退车日期)`
|
||||
|
||||
- 在同车牌的所有合同记录中筛选;
|
||||
- 若明细行有提车日期且合同有提车日期 → 必须一致;
|
||||
- 若明细行有退车日期且合同有退车日期 → 必须一致;
|
||||
- 取匹配合同的客户名称(多条时以后遍历结果为准)。
|
||||
|
||||
**判定顺序**(命中即返回,不再往下):
|
||||
|
||||
| 优先级 | 条件 | 结果 | 提示文案 |
|
||||
|---|---|---|---|
|
||||
| 1 | `expected` 非空且与当前客户名完全一致 | ✅ 通过 | 客户名称与系统登记一致 |
|
||||
| 2 | `getContractRef(车牌, 客户名)` 命中且名称一致 | ✅ 通过 | 客户名称与租赁合同一致 |
|
||||
| 3 | `expected` 非空但与当前客户名不一致 | ⚠️ 警告 | 客户名称与系统「客户管理」不对应;**建议客户:{expected}**;可一键替换 |
|
||||
| 4 | `isKnownCustomerName(客户名)` 为真 | ✅ 通过(弱校验) | 客户名称已在客户管理中登记 |
|
||||
| 5 | 以上均否 | ⚠️ 警告 | 客户名称与系统「客户管理」不对应;请核对提车日期与退车日期 |
|
||||
|
||||
**`isKnownCustomerName` 弱校验**:
|
||||
|
||||
- 与客户管理名单**完全一致**;或
|
||||
- **双向包含**(任一方名称包含另一方,如简称/全称)。
|
||||
|
||||
---
|
||||
|
||||
## 车牌号码(`plateNo`)
|
||||
|
||||
| 条件 | 结果 | 说明 |
|
||||
|---|---|---|
|
||||
| 车牌为空 | 不校验 | — |
|
||||
| 车牌在车辆管理中 | ✅ 通过 | 车牌已在车辆管理中登记 |
|
||||
| 否则 | ⚠️ 警告 | 车牌不存在;该车牌未在系统「车辆管理」中登记,无法导入 |
|
||||
|
||||
---
|
||||
|
||||
## 提车日期(`pickupDate`)
|
||||
|
||||
对照车辆管理 `lastDeliveryTime`(交车管理)。
|
||||
|
||||
| 条件 | 结果 |
|
||||
|---|---|
|
||||
| 无车辆档案或无提车日期 | 不校验 |
|
||||
| 与系统交车日期一致(YYYY-MM-DD) | ✅ 提车日期与交车管理一致 |
|
||||
| 不一致 | ⚠️ 警告;展示系统日期;可一键替换 |
|
||||
|
||||
---
|
||||
|
||||
## 退车日期(`returnDate`)
|
||||
|
||||
对照车辆管理 `lastReturnTime`(还车记录)。
|
||||
|
||||
| 条件 | 结果 |
|
||||
|---|---|
|
||||
| 无车辆档案或无退车日期 | 不校验 |
|
||||
| 与系统还车日期一致 | ✅ 退车日期与还车记录一致 |
|
||||
| 不一致 | ⚠️ 警告;展示系统日期;可一键替换 |
|
||||
|
||||
---
|
||||
|
||||
## 押金(`deposit`)
|
||||
|
||||
对照租赁合同保证金(`车牌 + 客户名` 合同)。
|
||||
|
||||
| 条件 | 结果 |
|
||||
|---|---|
|
||||
| 无合同或押金非数值 | 不校验 |
|
||||
| 与合同保证金一致 | ✅ 押金与合同保证金一致 |
|
||||
| 不一致 | ⚠️ 警告;可一键替换为合同值 |
|
||||
|
||||
---
|
||||
|
||||
## 合同标的租金(`contractRent`)
|
||||
|
||||
对照租赁合同租金。
|
||||
|
||||
| 条件 | 结果 |
|
||||
|---|---|
|
||||
| 无合同或无租金 | 不校验 |
|
||||
| 与合同租金一致 | ✅ 租金与合同一致 |
|
||||
| 不一致 | ⚠️ 警告;可一键替换 |
|
||||
|
||||
---
|
||||
|
||||
## 应收租金(`receivableRent`)
|
||||
|
||||
**期望**:`合同标的租金 × 结算周期月数`(月数来自合同 `paymentMethod` 解析:月度 1 / 季度 3 / 半年 6 / 年度 12)。
|
||||
|
||||
| 条件 | 结果 |
|
||||
|---|---|
|
||||
| 期望与当前均为 0 | 不校验 |
|
||||
| 与期望一致 | ✅ 应收租金 = 合同标的租金 × N 个月 |
|
||||
| 不一致 | ⚠️ 警告;展示正确金额;可一键替换 |
|
||||
|
||||
---
|
||||
|
||||
## 里程减免 / 其他减免(`mileageDeduction`、`otherDeduction`)
|
||||
|
||||
| 条件 | 结果 |
|
||||
|---|---|
|
||||
| 值为 0 | 不校验 |
|
||||
| 值为负数 | ✅ 以负数显示(符合 Excel 口径) |
|
||||
| 值为正数 | ⚠️ 警告:应录入负值 |
|
||||
|
||||
---
|
||||
|
||||
## 资产归属(`assetOwner`)
|
||||
|
||||
对照车辆管理「登记所有权」。
|
||||
|
||||
| 条件 | 结果 |
|
||||
|---|---|
|
||||
| 无车辆档案或无资产归属 | 不校验 |
|
||||
| 与登记所有权一致 | ✅ 与车辆登记所有权一致 |
|
||||
| 不一致 | ⚠️ 警告;可一键替换 |
|
||||
|
||||
---
|
||||
|
||||
## 启用校验的列
|
||||
|
||||
在 `components/tableColumns.ts` 中通过 `checkField` 挂载,由 `DetailTable` 调用 `getFieldCheck()`:
|
||||
|
||||
`plateNo`、`customerName`、`pickupDate`、`returnDate`、`deposit`、`contractRent`、`receivableRent`、`mileageDeduction`、`otherDeduction`、`assetOwner`。
|
||||
45
src/prototypes/lease-business-detail/.spec/import-rules.md
Normal file
45
src/prototypes/lease-business-detail/.spec/import-rules.md
Normal file
@@ -0,0 +1,45 @@
|
||||
# 租赁业务明细 · 导入与金额规则
|
||||
|
||||
> 实现:`utils/row-key.ts`、`utils/import-merge.ts`、`utils/batch-io.ts`、`utils/validate-detail.ts`
|
||||
> UI:`components/DetailImportModal.tsx`、`components/DetailEditModal.tsx`
|
||||
|
||||
## 导入业务主键(去重)
|
||||
|
||||
| 组成字段 | 说明 |
|
||||
|---|---|
|
||||
| 年份 | `year` |
|
||||
| 月份 | `month` |
|
||||
| 车牌号码 | `plateNo`(trim) |
|
||||
| **客户名称** | `customerName`(trim) |
|
||||
|
||||
键格式:`{year}-{MM}-{plateNo}::{customerName}`(见 `detailRowBusinessKey`)。
|
||||
|
||||
同一主键下支持三种策略:
|
||||
|
||||
| 策略 | 行为 |
|
||||
|---|---|
|
||||
| 跳过重复(默认) | 已存在同键记录则跳过导入行 |
|
||||
| 覆盖重复 | 用导入行覆盖已有记录(保留原 `id`) |
|
||||
| 报错 | 重复行写入错误日志,不入库 |
|
||||
|
||||
**边界**:同一车牌、同一月份、**不同客户**视为两条不同记录,不互相覆盖。
|
||||
|
||||
数据源:原型本地导入解析 + 内存中的已有明细;**未接真实后端 API**。
|
||||
|
||||
---
|
||||
|
||||
## 实收金额 vs 应收合计
|
||||
|
||||
| 项 | 规则 |
|
||||
|---|---|
|
||||
| 导入 | **不拦截**实收大于应收合计 |
|
||||
| 编辑保存 | **不拦截**实收大于应收合计 |
|
||||
| 未收计算 | 仍为「应收合计 − 实收金额」;实收超额时未收为负,列表用超额样式提示 |
|
||||
|
||||
历史规则「实收金额 ≤ 应收合计」已在 `validate-detail.ts` 中注释停用,函数保留签名便于对照。
|
||||
|
||||
---
|
||||
|
||||
## 与收款状态的关系
|
||||
|
||||
收款状态仍按实收与应收比较展示(未收款 / 部分收款 / 已结清);实收 ≥ 应收合计时为「已结清」,与是否允许多收不冲突。
|
||||
@@ -1,94 +1,54 @@
|
||||
# Prototype Review
|
||||
|
||||
- 审查目标:`src/prototypes/lease-business-detail`(页面 `list`)
|
||||
- 用户资料/参考资料:
|
||||
- 对话中已确认的 Excel《2026年业务二部运营台账总表6.17 - 新版》「2.租赁车辆收入明细表」字段顺序、23 项汇总、6 项公式列与 7 项 KPI 口径
|
||||
- `src/resources/oneos-web-legacy/数据分析/租赁车辆收入明细.jsx`
|
||||
- `src/prototypes/oneos-web-data-analysis/pages/08-租赁车辆收入明细.jsx`
|
||||
- `src/prototypes/oneos-web-data-analysis/pages/05-业务部台账.jsx`(租赁业绩数据来源说明)
|
||||
- `src/prototypes/lease-business-ledger/.spec/requirements-prd.md`(对照模块)
|
||||
- 原型源码、`annotation-source.json`、`data/rows.json`
|
||||
- 生成时间:2026-07-09 16:18
|
||||
- 用户资料/参考资料:`.spec/requirements-prd.md`、`lease-business-ledger` PRD、原型源码
|
||||
- 生成时间:2026-07-13 15:50
|
||||
- 状态:**复审通过(对账能力已移除)**
|
||||
|
||||
## 总体点评
|
||||
|
||||
原型在「租赁运营明细宽表」主路径上已具备可运行闭环:筛选 → 7 项 KPI → 47 列分页列表 → 23 项表尾汇总 → 批量导入/导出,且公式列(应收合计、月度收入、未收、车辆实际成本、总成本、盈亏)与 Excel SUBTOTAL 逻辑一致,553 条 2026 年样例数据汇总与台账样表核对无偏差。列表字段、双运维费列、左冻结年份/车牌、日期列排序等近期决策在实现中落地较完整。
|
||||
租赁业务明细为单页宽表维护:筛选(含收款状态)→ 7 项 KPI → 批量导入/导出 → 48 列明细表。行内操作仅保留**编辑、删除、变更日志**;盈亏月度汇总改由业务部台账承接,本页不再提供 Tab 或对账锁定。
|
||||
|
||||
主要缺口集中在**模块边界与资料体系**:相对 `src/resources` 中「租赁车辆收入明细」双 Tab 结构,当前仅实现明细列表,缺少「租赁业务盈亏月度汇总」;相对 `lease-business-ledger`,本原型未说明「明细维护」与「台账收款关联」的分工,实收仍为导入手工列。导入流程可完成演示,但缺少重复数据与行级校验策略,长期批量维护存在数据质量风险。整体适合作为 Excel 明细表的交互原型,尚不足以单独支撑数据分析侧完整用户旅程。
|
||||
主路径「筛选 → KPI → 宽表 → 导入/导出 → 编辑」可完整演示。剩余风险主要为跨模块集成(实收与租赁业务台账/收款模块自动同步)与明细表暂无「氢费预充值」字段——已降为待规划,不阻塞当前原型验收。
|
||||
|
||||
## P0-P3 优先级问题
|
||||
|
||||
### P1 - 缺少「租赁业务盈亏月度汇总」Tab / 页面
|
||||
|
||||
- 证据:`src/resources/oneos-web-legacy/数据分析/租赁车辆收入明细.jsx` 与 `src/prototypes/oneos-web-data-analysis/pages/08-租赁车辆收入明细.jsx` 均包含「租赁业务明细」+「租赁业务盈亏月度汇总」两个 Tab;当前 `index.tsx` 仅单页 `list`,`annotation-source.json` 目录也只有一条路由。
|
||||
- 影响:需要按月查看盈亏汇总、对比年度趋势的用户无法在本原型完成核心分析任务,与既有产品资料表达不一致。
|
||||
- 修复方向:在 `.spec` 明确是否纳入本原型范围;若纳入,增加第二 Tab 或子路由,按年份聚合月份级押金/应收/实收/未收/收入/成本/盈亏,并保留导出。
|
||||
|
||||
### P1 - 与「租赁业务台账」边界不清,实收口径未闭环
|
||||
|
||||
- 证据:`lease-business-ledger` PRD 定义收款关联、`calcReceivedAmountFromReceipts`、明细状态;本原型 `receivedAmount` 为导入手工列(`batch-io.ts`),无关联收款、无「未收款/部分收款/已收款」状态;`oneos-web-data-analysis/05-业务部台账.jsx` 注明租赁业绩来自「租赁业务明细」。
|
||||
- 影响:业务方可能混淆两个模块职责;实收可任意填写导致未收/盈亏与真实收款脱节,下游汇总分析可信度下降。
|
||||
- 修复方向:在 `.spec/requirements-prd.md` 写清「明细表 = 业管 Excel 维护」「台账 = 收款闭环」或统一为一条链路;至少增加实收 ≤ 应收合计校验,并标注与台账/收款模块的集成计划。
|
||||
|
||||
### P2 - 批量导入仅追加,无重复键与覆盖策略
|
||||
|
||||
- 证据:`index.tsx` 导入成功后 `setRecords((prev) => [...imported, ...prev])`;`parseDetailImportFile` 仅以「年份 + 月份 + 车牌号码」判空跳过,不检测同键已存在行。
|
||||
- 影响:业管重复导入同月同车数据会产生重复行,KPI 与表尾汇总被放大,难以恢复。
|
||||
- 修复方向:定义业务主键(建议 `year + month + plateNo`,是否加业务员待确认);导入时支持跳过/覆盖/报错三种策略,并返回行级结果摘要。
|
||||
|
||||
### P2 - 导入与计算缺少行级校验反馈
|
||||
|
||||
- 证据:导入失败仅 Toast(`未解析到有效数据` / `导入失败`);无字段格式、数值范围、必填组合(如平均天数为 0 时成本为 0)的逐行报告;`receivedAmount` 可大于 `receivableTotal` 产生负未收且无提示。
|
||||
- 影响:大批量维护时难以定位问题行,错误数据静默进入列表。
|
||||
- 修复方向:导入结果弹层展示成功/跳过/失败行数与原因;对实收超额、非法日期、押金格式等做行级校验清单。
|
||||
|
||||
### P3 - 缺少正式需求文档,annotation 未覆盖字段与公式说明
|
||||
|
||||
- 证据:`.spec/` 仅有空的 `prototype-comments.json`,无 `requirements-prd.md`;`annotation-source.json` 仅 4 个区块简述,未像 `lease-business-ledger` 那样标注各列口径、公式列只读规则、与 Excel 样表映射。
|
||||
- 影响:评审、测试与后续开发缺少单一事实来源,跨模块对齐成本高。
|
||||
- 修复方向:补充 `.spec/requirements-prd.md`(用户、范围、不做项、验收清单);扩展 annotation 对公式列、导入模板列、KPI/汇总口径的说明。
|
||||
(本轮复审无新增 P0–P3 问题。)
|
||||
|
||||
## 完整性与项目对齐
|
||||
|
||||
| 维度 | 结论 |
|
||||
|------|------|
|
||||
| 核心用户 | 隐含为业务二部业管/运营人员(样例数据均为「业务二部」),未在 `.spec` 明文写出 |
|
||||
| 核心任务 | **已覆盖**:按条件查询明细、查看 KPI 与表尾汇总、Excel 模板导入与导出 |
|
||||
| 主流程入口 | 侧边栏 `prototypes/lease-business-detail`(`sidebar-tree.json`) |
|
||||
| 主流程出口 | 导出当前筛选结果;无保存至服务端、无返回上游分析页导航 |
|
||||
| 范围边界 | **已对齐**:47 列宽表、6 公式列自动计算、7+23 汇总结构、2026 样例 1–6 月 |
|
||||
| 范围缺口 | **未覆盖**:盈亏月度汇总 Tab;行内编辑/删除;持久化;收款关联 |
|
||||
| 与 ledger 关系 | **待确认**:两模块均处理租赁运营金额,字段模型不同(明细 47 列 vs 台账账单字段),需产品定稿分工 |
|
||||
| 与数据分析关系 | `05-业务部台账` 声明租赁业绩取自本明细;当前原型未暴露 API/聚合接口,仅本地 JSON,**集成待确认** |
|
||||
| 资料冲突 | Legacy 数据分析页为简化列(应收/实收/自然月收入等 ~20 列),本原型已升级为 Excel 运营台账 47 列——**以对话与 Excel 样表为准**,Legacy 作交互参考而非字段真相 |
|
||||
| 核心用户 | 业务二部业管 / 运营人员 |
|
||||
| 核心任务 | **已覆盖**:明细维护、状态筛选、KPI/汇总、导入导出 |
|
||||
| Tab 结构 | **已对齐**:单页宽表;盈亏汇总见业务部台账 |
|
||||
| 与 ledger 分工 | 已文档化;实收仍为手工列,**集成待规划** |
|
||||
| 资料冲突 | 明细「已结清」vs 台账「已收款」——跨模块术语待产品统一 |
|
||||
|
||||
## 业务逻辑连贯性
|
||||
|
||||
- **筛选逻辑**:`statMonth`(`YYYY-MM`)、业务部门、业务员精确匹配,客户名称模糊匹配,车牌多选;查询按钮触发 `appliedFilters`,与 KPI/汇总联动,逻辑自洽。
|
||||
- **汇总口径**:KPI 7 项与表尾 23 项均基于**全量筛选结果**(非当前页),与 Excel SUBTOTAL 语义一致;分页仅影响表格 body,不影响汇总,合理。
|
||||
- **公式链路**:`calc-detail.ts` 与 Excel 公式一致(应收合计、月度收入、未收、车辆实际成本、总成本、盈亏);加载种子数据与导入后均调用 `applyDetailCalculations`,避免公式列脏读。
|
||||
- **状态迁移**:无「草稿/已提交/归档」;导入即入库(内存),无版本与审计轨迹。
|
||||
- **角色权限**:未实现员工/主管数据范围(`lease-business-ledger` 有 `filterRecordsByRole`),本原型全员可见全部 553 条。
|
||||
- **跨页一致性**:单页原型,无跨路由状态问题。
|
||||
- 收款状态、公式列、导入校验链路自洽。
|
||||
- KPI/表尾汇总与筛选结果口径一致。
|
||||
|
||||
## 状态、异常、边界与恢复
|
||||
|
||||
| 场景 | 现状 | 评价 |
|
||||
|------|------|------|
|
||||
| 空数据 | 表格区展示空状态文案 + 导入引导 | 已覆盖 |
|
||||
| 加载 | 筛选查询 280ms 骨架屏 | 已覆盖(模拟) |
|
||||
| 导入成功 | Toast + 关闭弹窗 + 重置页码 | 已覆盖 |
|
||||
| 导入无有效行 | Toast 提示检查模板 | 已覆盖,但无行级原因 |
|
||||
| 导入异常 | 通用「导入失败」Toast | 偏弱 |
|
||||
| 导出 | 导出筛选结果 + Toast | 已覆盖 |
|
||||
| 重复导入 | 直接追加 | **缺恢复路径** |
|
||||
| 实收 > 应收 | 允许,未收为负 | **缺业务提示** |
|
||||
| 刷新页面 | 恢复种子数据,导入丢失 | 原型可接受,需标注 |
|
||||
| 宽表横向滚动 | `lbd-table-wrap` overflow 修复 | 已覆盖 |
|
||||
| 并发/权限 | 未涉及 | 不适用 |
|
||||
| 场景 | 现状 |
|
||||
|------|------|
|
||||
| 重复导入 | 跳过 / 覆盖 / 报错;主键 year-month-plate-customer |
|
||||
| 实收超额 | **允许**;导入/编辑不拦截;列表负未收/超额样式 |
|
||||
| 行内操作 | 编辑、删除、变更日志 |
|
||||
|
||||
## 证据与评估说明
|
||||
|
||||
- **用户资料优先级**:本轮无新的用户附件;以对话中 Excel 对齐决策为主。与 Legacy 简化列模型存在差异,已在「完整性与项目对齐」标记,**不视为 P0 冲突**。
|
||||
- **读取范围**:`rules/prototype-review-guide.md`;`index.tsx`、`types.ts`、`utils/calc-detail.ts`、`utils/batch-io.ts`、`utils/detail.ts`、`components/*`、`data/rows.json`、`annotation-source.json`;`src/resources/oneos-web-legacy/数据分析/租赁车辆收入明细.jsx`;`lease-business-ledger/.spec/requirements-prd.md`;`oneos-web-data-analysis/pages/05-业务部台账.jsx`(片段);`.axhub/make/sidebar-tree.json`。
|
||||
- **独立评估**:`degraded`(未使用双子代理;在同一审查内先建立业务基线再对照源码,结论仍基于双源交叉验证)。
|
||||
- **读取范围**:`index.tsx`、`DetailTable.tsx`、`import-merge.ts`、`validate-detail.ts`、`requirements-prd.md`
|
||||
- **独立评估**:`degraded`(单轮复审,对照需求清单验收)
|
||||
|
||||
## 首轮问题关闭记录
|
||||
|
||||
| 原优先级 | 问题 | 处理 |
|
||||
|---|---|---|
|
||||
| P1 | 缺少盈亏月度汇总 Tab | ➡️ 改由业务部台账;本页已移除 Tab |
|
||||
| P1 | 对账/锁定无入口 | ➡️ 产品范围调整:本页不做对账锁定 |
|
||||
| P2 | 导入重复键 | ✅ 三策略 + 主键 year-month-plate-**customer** |
|
||||
| P2 | 实收超额 | ➡️ 产品调整:**允许**超额;拦截已停用 |
|
||||
| P3 | PRD/annotation 偏差 | ✅ 公式、导出 48 列、边界文案已更新 |
|
||||
|
||||
@@ -27,7 +27,7 @@
|
||||
|
||||
### 不做范围(当前原型)
|
||||
|
||||
- 「租赁业务盈亏月度汇总」独立 Tab(Legacy 数据分析页有,本原型待规划)
|
||||
- 租赁业务盈亏月度汇总(改由**业务部台账**汇总展示)
|
||||
- 服务端持久化、员工/主管数据权限隔离(主管预览:`?role=supervisor`)
|
||||
- 关联收款记录自动回写实收
|
||||
|
||||
@@ -35,7 +35,7 @@
|
||||
|
||||
## 2. 筛选区
|
||||
|
||||
默认展示 5 项(一行),「更多筛选」展开车牌多选。
|
||||
默认展示 **首行 4 项**(统计月份、业务部门、业务员、客户名称),「更多筛选」展开**状态、车牌号码**(与全局 `vm-filter-panel.ts` 4 列栅格规则一致,避免末行仅 1 项)。
|
||||
|
||||
| 筛选项 | 说明 |
|
||||
|---|---|
|
||||
@@ -43,7 +43,7 @@
|
||||
| 业务部门 | 精确匹配 |
|
||||
| 业务员 | 精确匹配 |
|
||||
| 客户名称 | 模糊包含 |
|
||||
| 状态 | 已结清 / 部分收款 / 未收款(按实收与应收合计计算) |
|
||||
| 状态 | 已结清 / 部分收款 / 未收款(按实收与应收合计计算;更多筛选) |
|
||||
| 车牌号码 | 多选精确匹配(更多筛选) |
|
||||
|
||||
查询按钮触发筛选;KPI 与表尾汇总基于**全量筛选结果**(非当前页)。
|
||||
@@ -70,12 +70,26 @@
|
||||
|
||||
| 按钮 | 行为 |
|
||||
|---|---|
|
||||
| 批量导入 | 下载模板(36 列手工录入)→ 上传 Excel → 公式列自动计算 |
|
||||
| 批量导出 | 导出当前筛选结果(完整 48 列,含公式列结果) |
|
||||
| 批量导入 | 下载模板(36 列手工录入)→ 选择重复策略 → 上传 Excel → 公式列自动计算 |
|
||||
| 批量导出 | 导出当前筛选结果(**状态** + 47 列业务字段,共 48 列) |
|
||||
|
||||
### 行内操作
|
||||
|
||||
编辑、删除、变更日志(操作列);已锁定记录仅主管可改(`?role=supervisor`)。
|
||||
编辑、删除、变更日志。
|
||||
|
||||
### 导入重复策略
|
||||
|
||||
业务主键:`年份 + 月份 + 车牌号码 + 客户名称`(完整规则见 **`.spec/import-rules.md`**)。
|
||||
|
||||
| 策略 | 行为 |
|
||||
|---|---|
|
||||
| 跳过重复(默认) | 已存在同键记录则跳过 |
|
||||
| 覆盖重复 | 用导入行覆盖已有记录 |
|
||||
| 报错 | 重复行写入错误日志 |
|
||||
|
||||
### 实收金额
|
||||
|
||||
**不限制**实收 ≤ 应收合计:导入与编辑均允许实收大于应收合计(未收可为负,列表超额样式提示)。旧规则已停用,见 `.spec/import-rules.md`。
|
||||
|
||||
---
|
||||
|
||||
@@ -104,6 +118,32 @@
|
||||
|
||||
押金、合同标的租金、应收合计、应收租金、月度收入、月度租金、维保包干收入、保险上浮费、运维费(收入)、其他收入、里程减免金额、其他减免金额、实收金额、未收、车辆标准成本、车辆实际成本、保险费、氢费、运维费(成本)、居间费、其他、总成本、盈亏。
|
||||
|
||||
### 单元格系统校验
|
||||
|
||||
部分列在单元格右侧展示校验图标(绿色 ✓ / 黄色 ⚠),点击可查看说明;警告项在支持时提供**一键替换**。完整规则见 **`.spec/field-checks.md`**。
|
||||
|
||||
**对照数据源(原型本地种子)**:客户管理、车辆管理、明细种子合同(`system-ref.ts` 聚合);当前未接真实后端。
|
||||
|
||||
| 字段 | 校验要点 |
|
||||
|---|---|
|
||||
| 车牌号码 | 是否在车辆管理中登记 |
|
||||
| **客户名称** | 见下表 |
|
||||
| 提车 / 退车日期 | 与交车管理 / 还车记录一致 |
|
||||
| 押金、合同标的租金 | 与租赁合同一致 |
|
||||
| 应收租金 | = 合同标的租金 × 结算周期月数 |
|
||||
| 里程 / 其他减免 | 应以负数录入 |
|
||||
| 资产归属 | 与车辆登记所有权一致 |
|
||||
|
||||
#### 客户名称判定顺序
|
||||
|
||||
1. **通过(强)**:按「车牌 + 提车日期 + 退车日期」匹配合同,期望客户与当前名**完全一致** →「与系统登记一致」。
|
||||
2. **通过(强)**:「车牌 + 客户名」能命中租赁合同且名称一致 →「与租赁合同一致」。
|
||||
3. **警告**:能推算期望客户但与当前名不一致 → 提示建议客户,**可一键替换**。
|
||||
4. **通过(弱)**:客户名在客户管理中已登记(全等或双向包含简称/全称)→「已在客户管理中登记」。
|
||||
5. **警告**:以上均不满足 →「与系统不对应,请核对提车/退车日期」。
|
||||
|
||||
车牌或客户名为空时不显示校验图标。
|
||||
|
||||
---
|
||||
|
||||
## 6. 公式列(系统自动计算)
|
||||
@@ -112,7 +152,7 @@
|
||||
|
||||
| 字段 | 计算方式 |
|
||||
|---|---|
|
||||
| **应收合计** | 维保包干收入 + 保险上浮费 + 运维费(收入)+ 其他收入 + 里程减免 + 其他减免 |
|
||||
| **应收合计** | 应收租金 + 维保包干收入 + 保险上浮费 + 运维费(收入)+ 其他收入 + 里程减免 + 其他减免 |
|
||||
| **月度收入** | 月度租金 + 维保包干收入 + 保险上浮费 + 运维费(收入)+ 其他收入 + 里程减免 + 其他减免 |
|
||||
| **未收** | 应收合计 − 实收金额 |
|
||||
| **车辆实际成本** | 车辆标准成本 × 平均天数 |
|
||||
@@ -141,7 +181,10 @@
|
||||
| 筛选 / KPI 汇总 | `utils/detail.ts` |
|
||||
| 收款状态 | `utils/payment-status.ts` |
|
||||
| 公式计算 | `utils/calc-detail.ts` |
|
||||
| 导入导出 | `utils/batch-io.ts` |
|
||||
| 导入导出 | `utils/batch-io.ts`、`utils/import-merge.ts`、`utils/row-key.ts` |
|
||||
| 单元格校验 | `utils/field-checks.ts`、`utils/system-ref.ts`、`components/FieldCheckIcon.tsx` |
|
||||
| 保存校验 | `utils/validate-detail.ts`(实收超额拦截已停用) |
|
||||
| 导入规则说明 | `.spec/import-rules.md` |
|
||||
| 变更日志 | `utils/change-log.ts` |
|
||||
| 类型 | `types.ts` |
|
||||
| 组件 | `FilterPanel.tsx`、`DetailKpiRow.tsx`、`DetailTable.tsx`、`DetailImportModal.tsx`、`DetailEditModal.tsx`、`DetailChangeLogModal.tsx` |
|
||||
@@ -155,6 +198,9 @@
|
||||
3. 左冻结:状态 + 月份 + 车牌号码
|
||||
4. 氢费非零可点击明细;编辑/删除/变更日志可用
|
||||
5. 未收 > 0 标红;盈亏正负着色
|
||||
6. 客户名称等校验列:通过显示绿勾,不一致显示黄警告并可查看说明 / 一键替换(规则见 `.spec/field-checks.md`)
|
||||
7. 导入主键含客户名称;同车牌同月不同客户可并存
|
||||
8. 实收可大于应收合计:导入/编辑不拦截;未收可为负并有超额样式
|
||||
|
||||
---
|
||||
|
||||
@@ -162,6 +208,5 @@
|
||||
|
||||
详见 `.spec/prototype-review.md`:
|
||||
|
||||
- P1:盈亏月度汇总 Tab
|
||||
- P1:与租赁业务台账 / 收款模块集成口径
|
||||
- P2:导入重复键(年+月+车牌)处理策略
|
||||
- P2:与租赁业务台账 / 收款模块集成口径(实收自动回写)
|
||||
- P3:氢费预充值字段(业务部台账月度汇总占位,明细表暂无对应列)
|
||||
|
||||
File diff suppressed because one or more lines are too long
@@ -5,7 +5,7 @@ export const COLUMN_HEADER_TIPS: Record<string, string> = {
|
||||
'lbd-col-plate': '车牌号码与系统「车辆管理」匹配;不存在的车牌导入失败。',
|
||||
'lbd-col-vehicle-type': '根据车牌号,显示系统「品牌·型号」。',
|
||||
'lbd-col-business-dept': '根据车牌对应租赁合同显示业务部门与业务员;展示时合并为两行。',
|
||||
'lbd-col-customer': '导入后与客户管理比对;不一致时提示正确客户并支持一键替换。',
|
||||
'lbd-col-customer': '导入后按车牌+租期与合同比对客户名;不一致时提示建议客户并支持一键替换(规则见 field-checks.md)。',
|
||||
'lbd-col-pickup-date': '对照交车管理校验提车日期;不一致时显示警告。',
|
||||
'lbd-col-return-date': '对照还车记录校验退车日期;不一致时显示警告。',
|
||||
'lbd-col-avg-days': '平均天数 = 本月在租天数 ÷ 当月自然日天数,保留两位小数。',
|
||||
|
||||
@@ -3,6 +3,7 @@ import { X } from 'lucide-react';
|
||||
import type { LeaseBusinessDetailRow } from '../types';
|
||||
import { detailRowYearMonth } from '../utils/detail';
|
||||
import { DETAIL_EDIT_FIELDS, draftFromRow, parseDraftToPatch } from '../utils/edit-fields';
|
||||
import { validateDetailPatch } from '../utils/validate-detail';
|
||||
|
||||
interface DetailEditModalProps {
|
||||
open: boolean;
|
||||
@@ -13,9 +14,13 @@ interface DetailEditModalProps {
|
||||
|
||||
export function DetailEditModal({ open, row, onClose, onSave }: DetailEditModalProps) {
|
||||
const [draft, setDraft] = useState<Record<string, string | number>>({});
|
||||
const [error, setError] = useState('');
|
||||
|
||||
useEffect(() => {
|
||||
if (open && row) setDraft(draftFromRow(row));
|
||||
if (open && row) {
|
||||
setDraft(draftFromRow(row));
|
||||
setError('');
|
||||
}
|
||||
}, [open, row]);
|
||||
|
||||
if (!open || !row) return null;
|
||||
@@ -24,7 +29,13 @@ export function DetailEditModal({ open, row, onClose, onSave }: DetailEditModalP
|
||||
|
||||
const handleSubmit = (event: React.FormEvent) => {
|
||||
event.preventDefault();
|
||||
onSave(parseDraftToPatch(draft));
|
||||
const patch = parseDraftToPatch(draft);
|
||||
const validationError = validateDetailPatch(row, patch);
|
||||
if (validationError) {
|
||||
setError(validationError);
|
||||
return;
|
||||
}
|
||||
onSave(patch);
|
||||
};
|
||||
|
||||
return (
|
||||
@@ -43,7 +54,8 @@ export function DetailEditModal({ open, row, onClose, onSave }: DetailEditModalP
|
||||
</button>
|
||||
</header>
|
||||
<form id="lbd-edit-form" className="vm-modal-body lbd-edit-form" onSubmit={handleSubmit}>
|
||||
<p className="lbd-edit-hint">公式列(应收合计、月度收入、未收、车辆实际成本、总成本、盈亏、氢费等)保存后由系统自动重算。</p>
|
||||
<p className="lbd-edit-hint">公式列(应收合计、月度收入、未收、车辆实际成本、总成本、盈亏、氢费等)保存后由系统自动重算。实收金额允许大于应收合计(未收可为负)。</p>
|
||||
{error ? <p className="lbd-edit-error" role="alert">{error}</p> : null}
|
||||
<div className="lbd-edit-grid">
|
||||
{DETAIL_EDIT_FIELDS.map((field) => (
|
||||
<label key={field.key} className="lbd-edit-field">
|
||||
|
||||
@@ -1,26 +1,43 @@
|
||||
import React, { useRef } from 'react';
|
||||
import { Download, Upload, X } from 'lucide-react';
|
||||
import { Upload, X } from 'lucide-react';
|
||||
import type { DetailImportDuplicateStrategy } from '../utils/import-merge';
|
||||
|
||||
interface DetailImportModalProps {
|
||||
open: boolean;
|
||||
onClose: () => void;
|
||||
onDownloadTemplate: () => void;
|
||||
onImport: (file: File) => void;
|
||||
duplicateStrategy: DetailImportDuplicateStrategy;
|
||||
onDuplicateStrategyChange: (strategy: DetailImportDuplicateStrategy) => void;
|
||||
failedCount?: number;
|
||||
skippedCount?: number;
|
||||
overwrittenCount?: number;
|
||||
onDownloadErrorLog?: () => void;
|
||||
}
|
||||
|
||||
const DUPLICATE_OPTIONS: { value: DetailImportDuplicateStrategy; label: string; hint: string }[] = [
|
||||
{ value: 'skip', label: '跳过重复', hint: '同「年份+月份+车牌+客户名称」已存在则跳过' },
|
||||
{ value: 'overwrite', label: '覆盖重复', hint: '用导入行覆盖已有记录' },
|
||||
{ value: 'error', label: '报错', hint: '重复行写入错误日志' },
|
||||
];
|
||||
|
||||
export function DetailImportModal({
|
||||
open,
|
||||
onClose,
|
||||
onDownloadTemplate,
|
||||
onImport,
|
||||
duplicateStrategy,
|
||||
onDuplicateStrategyChange,
|
||||
failedCount = 0,
|
||||
skippedCount = 0,
|
||||
overwrittenCount = 0,
|
||||
onDownloadErrorLog,
|
||||
}: DetailImportModalProps) {
|
||||
const inputRef = useRef<HTMLInputElement>(null);
|
||||
if (!open) return null;
|
||||
|
||||
const hasResultSummary = failedCount > 0 || skippedCount > 0 || overwrittenCount > 0;
|
||||
|
||||
return (
|
||||
<div className="vm-modal-backdrop" role="presentation" onClick={onClose}>
|
||||
<div
|
||||
@@ -42,12 +59,34 @@ export function DetailImportModal({
|
||||
<span className="vm-step-badge">1</span>
|
||||
<span>下载导入模板</span>
|
||||
</div>
|
||||
<button type="button" className="vm-btn vm-btn-primary" onClick={onDownloadTemplate} data-vm-icon="download">下载明细导入模板
|
||||
<button type="button" className="vm-btn vm-btn-primary" onClick={onDownloadTemplate} data-vm-icon="download">
|
||||
下载明细导入模板
|
||||
</button>
|
||||
</section>
|
||||
<section className="vm-import-step">
|
||||
<div className="vm-import-step-head">
|
||||
<span className="vm-step-badge">2</span>
|
||||
<span>重复记录处理(主键:年份 + 月份 + 车牌 + 客户名称)</span>
|
||||
</div>
|
||||
<div className="lbd-import-dup-options" role="radiogroup" aria-label="重复记录处理">
|
||||
{DUPLICATE_OPTIONS.map((option) => (
|
||||
<label key={option.value} className="lbd-import-dup-option">
|
||||
<input
|
||||
type="radio"
|
||||
name="lbd-import-dup"
|
||||
value={option.value}
|
||||
checked={duplicateStrategy === option.value}
|
||||
onChange={() => onDuplicateStrategyChange(option.value)}
|
||||
/>
|
||||
<span className="lbd-import-dup-label">{option.label}</span>
|
||||
<span className="lbd-import-dup-hint">{option.hint}</span>
|
||||
</label>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
<section className="vm-import-step">
|
||||
<div className="vm-import-step-head">
|
||||
<span className="vm-step-badge">3</span>
|
||||
<span>上传填写好的 Excel 文件</span>
|
||||
</div>
|
||||
<button
|
||||
@@ -70,13 +109,28 @@ export function DetailImportModal({
|
||||
/>
|
||||
</button>
|
||||
</section>
|
||||
{failedCount > 0 && onDownloadErrorLog ? (
|
||||
{hasResultSummary ? (
|
||||
<section className="vm-import-step lbd-import-error-step">
|
||||
<p className="lbd-import-error-summary">
|
||||
本次有 <strong>{failedCount}</strong> 条记录导入失败(如车牌号不存在),可下载错误日志核对。
|
||||
</p>
|
||||
<button type="button" className="vm-btn vm-btn-secondary" onClick={onDownloadErrorLog} data-vm-icon="download">下载错误日志
|
||||
</button>
|
||||
{failedCount > 0 ? (
|
||||
<p className="lbd-import-error-summary">
|
||||
本次有 <strong>{failedCount}</strong> 条记录导入失败,可下载错误日志核对。
|
||||
</p>
|
||||
) : null}
|
||||
{skippedCount > 0 ? (
|
||||
<p className="lbd-import-error-summary">
|
||||
已跳过 <strong>{skippedCount}</strong> 条重复记录。
|
||||
</p>
|
||||
) : null}
|
||||
{overwrittenCount > 0 ? (
|
||||
<p className="lbd-import-error-summary">
|
||||
已覆盖 <strong>{overwrittenCount}</strong> 条重复记录。
|
||||
</p>
|
||||
) : null}
|
||||
{failedCount > 0 && onDownloadErrorLog ? (
|
||||
<button type="button" className="vm-btn vm-btn-secondary" onClick={onDownloadErrorLog} data-vm-icon="download">
|
||||
下载错误日志
|
||||
</button>
|
||||
) : null}
|
||||
</section>
|
||||
) : null}
|
||||
</div>
|
||||
|
||||
@@ -0,0 +1,35 @@
|
||||
import React from 'react';
|
||||
|
||||
export type DetailMainTab = 'detail' | 'monthly-pl';
|
||||
|
||||
interface DetailMainTabsProps {
|
||||
mainTab: DetailMainTab;
|
||||
onChange: (tab: DetailMainTab) => void;
|
||||
}
|
||||
|
||||
export function DetailMainTabs({ mainTab, onChange }: DetailMainTabsProps) {
|
||||
return (
|
||||
<nav
|
||||
className="lbd-main-tabs lbd-main-tabs--toolbar"
|
||||
aria-label="租赁业务明细模块"
|
||||
data-annotation-id="lbd-main-tabs"
|
||||
>
|
||||
<button
|
||||
type="button"
|
||||
className={`lbd-main-tab${mainTab === 'detail' ? ' is-active' : ''}`}
|
||||
aria-current={mainTab === 'detail' ? 'page' : undefined}
|
||||
onClick={() => onChange('detail')}
|
||||
>
|
||||
租赁业务明细
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className={`lbd-main-tab${mainTab === 'monthly-pl' ? ' is-active' : ''}`}
|
||||
aria-current={mainTab === 'monthly-pl' ? 'page' : undefined}
|
||||
onClick={() => onChange('monthly-pl')}
|
||||
>
|
||||
租赁业务盈亏月度汇总
|
||||
</button>
|
||||
</nav>
|
||||
);
|
||||
}
|
||||
@@ -28,7 +28,6 @@ import {
|
||||
paymentStatusSortValue,
|
||||
resolveDetailPaymentStatus,
|
||||
} from '../utils/payment-status';
|
||||
import { canEditDetailRow } from '../utils/change-log';
|
||||
import {
|
||||
LedgerDetailPopover,
|
||||
LedgerDetailTable,
|
||||
@@ -38,7 +37,6 @@ interface DetailTableProps {
|
||||
records: LeaseBusinessDetailRow[];
|
||||
summary: LeaseDetailKpiSummary;
|
||||
loading?: boolean;
|
||||
isSupervisor: boolean;
|
||||
onEdit: (row: LeaseBusinessDetailRow) => void;
|
||||
onDelete: (row: LeaseBusinessDetailRow) => void;
|
||||
onChangeLog: (row: LeaseBusinessDetailRow) => void;
|
||||
@@ -157,8 +155,11 @@ function renderCellContent(
|
||||
}
|
||||
|
||||
if (col.key === 'outstanding') {
|
||||
const { text, warn } = displayOutstanding(row.outstanding);
|
||||
const { text, warn, overpaid } = displayOutstanding(row.outstanding);
|
||||
if (!text) return '';
|
||||
if (overpaid) {
|
||||
return <span className="lbd-outstanding-overpaid tabular-nums" title="实收超过应收合计">{text}</span>;
|
||||
}
|
||||
return warn
|
||||
? <span className="lbd-outstanding-warn tabular-nums">{text}</span>
|
||||
: <span className="tabular-nums">{text}</span>;
|
||||
@@ -218,7 +219,10 @@ function renderSummaryCell(col: DetailTableColumn, summary: LeaseDetailKpiSummar
|
||||
|
||||
const value = summary[col.summaryKey];
|
||||
if (col.summaryKey === 'outstanding') {
|
||||
const { text, warn } = displayOutstanding(value);
|
||||
const { text, warn, overpaid } = displayOutstanding(value);
|
||||
if (overpaid) {
|
||||
return <span className="lbd-outstanding-overpaid tabular-nums">{text}</span>;
|
||||
}
|
||||
return warn
|
||||
? <span className="lbd-outstanding-warn tabular-nums">{text}</span>
|
||||
: <span className="tabular-nums">{text}</span>;
|
||||
@@ -249,7 +253,6 @@ export function DetailTable({
|
||||
records,
|
||||
summary,
|
||||
loading = false,
|
||||
isSupervisor,
|
||||
onEdit,
|
||||
onDelete,
|
||||
onChangeLog,
|
||||
@@ -386,11 +389,8 @@ export function DetailTable({
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{sortedRecords.map((row) => {
|
||||
const canEdit = canEditDetailRow(row, isSupervisor);
|
||||
const archived = row.archiveStatus === 'archived';
|
||||
return (
|
||||
<tr key={row.id} className={archived ? 'lbd-row-archived' : undefined}>
|
||||
{sortedRecords.map((row) => (
|
||||
<tr key={row.id}>
|
||||
{DETAIL_TABLE_COLUMNS.map((col) => (
|
||||
<td
|
||||
key={col.key}
|
||||
@@ -406,16 +406,14 @@ export function DetailTable({
|
||||
))}
|
||||
<td className="sticky-col-right ldb-col-actions">
|
||||
<OperationActions
|
||||
edit={canEdit ? { onClick: () => onEdit(row) } : undefined}
|
||||
edit={{ onClick: () => onEdit(row) }}
|
||||
more={[
|
||||
...(canEdit
|
||||
? [{
|
||||
key: 'delete',
|
||||
label: '删除',
|
||||
danger: true,
|
||||
onClick: () => onDelete(row),
|
||||
}]
|
||||
: []),
|
||||
{
|
||||
key: 'delete',
|
||||
label: '删除',
|
||||
danger: true,
|
||||
onClick: () => onDelete(row),
|
||||
},
|
||||
{
|
||||
key: 'changeLog',
|
||||
label: '变更日志',
|
||||
@@ -425,8 +423,7 @@ export function DetailTable({
|
||||
/>
|
||||
</td>
|
||||
</tr>
|
||||
);
|
||||
})}
|
||||
))}
|
||||
</tbody>
|
||||
<tfoot>
|
||||
<tr className="lbd-summary-row">
|
||||
|
||||
@@ -1,18 +1,17 @@
|
||||
import React, { useEffect, useMemo, useState } from 'react';
|
||||
import { ChevronDown, Search } from 'lucide-react';
|
||||
import {
|
||||
shouldShowFilterExpand,
|
||||
splitFilterFields,
|
||||
VM_FILTER_PRIMARY_VISIBLE_COUNT,
|
||||
} from '../../../common/vm-filter-panel';
|
||||
import type { LeaseBusinessDetailRow, LeaseDetailFilters } from '../types';
|
||||
import { FilterPickerField } from '../../vehicle-management/components/FilterPickerField';
|
||||
import { MultiPlateFilterField } from '../../vehicle-management/components/MultiPlateFilterField';
|
||||
import { buildDetailMonthOptions, buildDetailOptions } from '../utils/detail';
|
||||
import { DETAIL_PAYMENT_STATUS_OPTIONS } from '../utils/payment-status';
|
||||
|
||||
const PRIMARY_KEYS = ['statMonth', 'businessDept', 'salesperson', 'customerName', 'paymentStatus'] as const;
|
||||
const EXTRA_KEYS = ['plateNos'] as const;
|
||||
|
||||
type FieldKey = (typeof PRIMARY_KEYS)[number] | (typeof EXTRA_KEYS)[number];
|
||||
|
||||
interface FilterFieldDef {
|
||||
key: FieldKey;
|
||||
key: string;
|
||||
label: string;
|
||||
control: React.ReactNode;
|
||||
}
|
||||
@@ -26,7 +25,11 @@ interface FilterPanelProps {
|
||||
}
|
||||
|
||||
function hasExtraFiltersActive(filters: LeaseDetailFilters): boolean {
|
||||
return filters.plateNos.length > 0;
|
||||
return Boolean(filters.paymentStatus || filters.plateNos.length > 0);
|
||||
}
|
||||
|
||||
function countExtraFiltersActive(filters: LeaseDetailFilters): number {
|
||||
return [filters.paymentStatus, filters.plateNos.length > 0].filter(Boolean).length;
|
||||
}
|
||||
|
||||
export function FilterPanel({
|
||||
@@ -40,14 +43,14 @@ export function FilterPanel({
|
||||
|
||||
useEffect(() => {
|
||||
if (hasExtraFiltersActive(filters)) setExpanded(true);
|
||||
}, [filters.plateNos]);
|
||||
}, [filters.paymentStatus, filters.plateNos]);
|
||||
|
||||
const monthOptions = useMemo(() => buildDetailMonthOptions(records), [records]);
|
||||
const deptOptions = useMemo(() => buildDetailOptions(records, 'businessDept'), [records]);
|
||||
const salespersonOptions = useMemo(() => buildDetailOptions(records, 'salesperson'), [records]);
|
||||
|
||||
const fieldMap = useMemo<Record<FieldKey, FilterFieldDef>>(() => ({
|
||||
statMonth: {
|
||||
const fields = useMemo<FilterFieldDef[]>(() => [
|
||||
{
|
||||
key: 'statMonth',
|
||||
label: '统计月份',
|
||||
control: (
|
||||
@@ -60,7 +63,7 @@ export function FilterPanel({
|
||||
/>
|
||||
),
|
||||
},
|
||||
businessDept: {
|
||||
{
|
||||
key: 'businessDept',
|
||||
label: '业务部门',
|
||||
control: (
|
||||
@@ -73,7 +76,7 @@ export function FilterPanel({
|
||||
/>
|
||||
),
|
||||
},
|
||||
salesperson: {
|
||||
{
|
||||
key: 'salesperson',
|
||||
label: '业务员',
|
||||
control: (
|
||||
@@ -86,12 +89,12 @@ export function FilterPanel({
|
||||
/>
|
||||
),
|
||||
},
|
||||
customerName: {
|
||||
{
|
||||
key: 'customerName',
|
||||
label: '客户名称',
|
||||
control: (
|
||||
<input
|
||||
className="vm-input"
|
||||
className="vm-input lbd-filter-text-control"
|
||||
value={filters.customerName}
|
||||
placeholder="输入客户名称(模糊匹配)"
|
||||
aria-label="客户名称"
|
||||
@@ -99,7 +102,7 @@ export function FilterPanel({
|
||||
/>
|
||||
),
|
||||
},
|
||||
paymentStatus: {
|
||||
{
|
||||
key: 'paymentStatus',
|
||||
label: '状态',
|
||||
control: (
|
||||
@@ -112,7 +115,7 @@ export function FilterPanel({
|
||||
/>
|
||||
),
|
||||
},
|
||||
plateNos: {
|
||||
{
|
||||
key: 'plateNos',
|
||||
label: '车牌号码',
|
||||
control: (
|
||||
@@ -124,11 +127,12 @@ export function FilterPanel({
|
||||
/>
|
||||
),
|
||||
},
|
||||
}), [filters, onChange, monthOptions, deptOptions, salespersonOptions]);
|
||||
], [filters, onChange, monthOptions, deptOptions, salespersonOptions]);
|
||||
|
||||
const primaryFields = PRIMARY_KEYS.map((key) => fieldMap[key]);
|
||||
const extraFields = EXTRA_KEYS.map((key) => fieldMap[key]);
|
||||
const extraActiveCount = filters.plateNos.length > 0 ? 1 : 0;
|
||||
const { primary, extra } = splitFilterFields(fields, VM_FILTER_PRIMARY_VISIBLE_COUNT);
|
||||
const showExpand = shouldShowFilterExpand(fields.length);
|
||||
const extraActiveCount = countExtraFiltersActive(filters);
|
||||
const expandPanelId = 'lbd-filter-expand-panel';
|
||||
|
||||
const renderField = (field: FilterFieldDef) => (
|
||||
<label key={field.key} className="vm-filter-field">
|
||||
@@ -149,42 +153,47 @@ export function FilterPanel({
|
||||
|
||||
<div className="ldb-filter-body">
|
||||
<div className="vm-filter-grid ldb-filter-grid ldb-filter-grid--primary" data-filter-tier="primary">
|
||||
{primaryFields.map(renderField)}
|
||||
{primary.map(renderField)}
|
||||
</div>
|
||||
|
||||
<div
|
||||
className={`ldb-filter-expand ${expanded ? 'is-expanded' : ''}`}
|
||||
aria-hidden={!expanded}
|
||||
id="lbd-filter-expand-panel"
|
||||
>
|
||||
<div className="ldb-filter-expand-inner">
|
||||
<div className="vm-filter-grid ldb-filter-grid ldb-filter-expand-grid" data-filter-tier="extra">
|
||||
{expanded ? extraFields.map(renderField) : null}
|
||||
{showExpand ? (
|
||||
<div
|
||||
className={`ldb-filter-expand ${expanded ? 'is-expanded' : ''}`}
|
||||
aria-hidden={!expanded}
|
||||
id={expandPanelId}
|
||||
>
|
||||
<div className="ldb-filter-expand-inner">
|
||||
<div className="vm-filter-grid ldb-filter-grid ldb-filter-expand-grid" data-filter-tier="extra">
|
||||
{expanded ? extra.map(renderField) : null}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
|
||||
<div className="vm-filter-actions ldb-filter-actions">
|
||||
<button
|
||||
type="button"
|
||||
className="vm-btn vm-btn-link ldb-filter-toggle"
|
||||
onClick={() => setExpanded(!expanded)}
|
||||
aria-expanded={expanded}
|
||||
aria-controls="lbd-filter-expand-panel"
|
||||
|
||||
data-vm-icon={expanded ? 'chevron-up' : 'filter'}>
|
||||
{expanded ? '收起' : '更多筛选'}
|
||||
{extraActiveCount > 0 && !expanded ? (
|
||||
<span className="ldb-filter-toggle-badge" aria-label="已设置扩展筛选">
|
||||
{extraActiveCount}
|
||||
</span>
|
||||
) : null}
|
||||
{showExpand ? (
|
||||
<button
|
||||
type="button"
|
||||
className="vm-btn vm-btn-link ldb-filter-toggle"
|
||||
onClick={() => setExpanded(!expanded)}
|
||||
aria-expanded={expanded}
|
||||
aria-controls={expandPanelId}
|
||||
data-vm-icon={expanded ? 'chevron-up' : 'filter'}
|
||||
>
|
||||
{expanded ? '收起' : '更多筛选'}
|
||||
{extraActiveCount > 0 && !expanded ? (
|
||||
<span className="ldb-filter-toggle-badge" aria-label="已设置扩展筛选">
|
||||
{extraActiveCount}
|
||||
</span>
|
||||
) : null}
|
||||
</button>
|
||||
) : null}
|
||||
<button type="button" className="vm-btn vm-btn-ghost ldb-toolbar-btn" onClick={onReset} data-vm-icon="rotate-ccw">
|
||||
重置
|
||||
</button>
|
||||
<button type="button" className="vm-btn vm-btn-primary ldb-toolbar-btn" onClick={onSearch} data-vm-icon="search">查询
|
||||
<button type="button" className="vm-btn vm-btn-primary ldb-toolbar-btn" onClick={onSearch} data-vm-icon="search">
|
||||
查询
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
194
src/prototypes/lease-business-detail/components/MonthlyPlTab.tsx
Normal file
194
src/prototypes/lease-business-detail/components/MonthlyPlTab.tsx
Normal file
@@ -0,0 +1,194 @@
|
||||
import React, { useMemo, useState } from 'react';
|
||||
import { Download } from 'lucide-react';
|
||||
import type { LeaseBusinessDetailRow } from '../types';
|
||||
import { formatMoney } from '../utils/detail';
|
||||
import {
|
||||
buildDetailYearOptions,
|
||||
buildMonthlyPlRows,
|
||||
exportMonthlyPlRows,
|
||||
sumMonthlyPlRows,
|
||||
type MonthlyPlRow,
|
||||
} from '../utils/monthly-pl';
|
||||
|
||||
import type { DetailMainTab } from './DetailMainTabs';
|
||||
import { DetailMainTabs } from './DetailMainTabs';
|
||||
|
||||
interface MonthlyPlTabProps {
|
||||
records: LeaseBusinessDetailRow[];
|
||||
onToast: (message: string) => void;
|
||||
mainTab: DetailMainTab;
|
||||
onTabChange: (tab: DetailMainTab) => void;
|
||||
}
|
||||
|
||||
function displayCell(row: MonthlyPlRow, value: number): string {
|
||||
if (!row.hasData && value === 0) return '';
|
||||
return formatMoney(value);
|
||||
}
|
||||
|
||||
function renderOutstanding(row: MonthlyPlRow): React.ReactNode {
|
||||
if (!row.hasData && row.outstanding === 0) return '';
|
||||
const text = formatMoney(row.outstanding);
|
||||
if (row.outstanding > 0) {
|
||||
return <span className="lbd-outstanding-warn tabular-nums">{text}</span>;
|
||||
}
|
||||
if (row.outstanding < 0) {
|
||||
return <span className="lbd-outstanding-overpaid tabular-nums">{text}</span>;
|
||||
}
|
||||
return <span className="tabular-nums">{text}</span>;
|
||||
}
|
||||
|
||||
function renderProfit(row: MonthlyPlRow): React.ReactNode {
|
||||
if (!row.hasData && row.profit === 0) return '';
|
||||
const text = formatMoney(row.profit);
|
||||
const cls = row.profit >= 0 ? 'lbd-profit-pos' : 'lbd-profit-neg';
|
||||
return <span className={`tabular-nums ${cls}`}>{text}</span>;
|
||||
}
|
||||
|
||||
export function MonthlyPlTab({ records, onToast, mainTab, onTabChange }: MonthlyPlTabProps) {
|
||||
const yearOptions = useMemo(() => buildDetailYearOptions(records), [records]);
|
||||
const defaultYear = yearOptions[0] ?? new Date().getFullYear();
|
||||
|
||||
const [draftYear, setDraftYear] = useState(defaultYear);
|
||||
const [appliedYear, setAppliedYear] = useState(defaultYear);
|
||||
|
||||
const rows = useMemo(
|
||||
() => buildMonthlyPlRows(records, appliedYear),
|
||||
[records, appliedYear],
|
||||
);
|
||||
const sums = useMemo(() => sumMonthlyPlRows(rows), [rows]);
|
||||
const title = `租赁业务${appliedYear}年盈亏月度汇总`;
|
||||
|
||||
const handleExport = () => {
|
||||
const hasAny = rows.some((row) => row.hasData);
|
||||
if (!hasAny) {
|
||||
onToast('当前年份无明细数据可导出');
|
||||
return;
|
||||
}
|
||||
exportMonthlyPlRows(rows, appliedYear);
|
||||
onToast(`已导出 ${appliedYear} 年盈亏月度汇总`);
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<section className="vm-filter-card lbd-filter-card" data-annotation-id="lbd-monthly-pl-filter">
|
||||
<div className="vm-filter-grid lbd-filter-grid lbd-monthly-pl-filter-grid">
|
||||
<label className="vm-filter-field">
|
||||
<span className="vm-filter-label">选择年份</span>
|
||||
<select
|
||||
className="vm-select"
|
||||
value={String(draftYear)}
|
||||
onChange={(event) => setDraftYear(Number(event.target.value))}
|
||||
>
|
||||
{(yearOptions.length ? yearOptions : [defaultYear]).map((year) => (
|
||||
<option key={year} value={year}>{year} 年</option>
|
||||
))}
|
||||
</select>
|
||||
</label>
|
||||
</div>
|
||||
<div className="vm-filter-actions">
|
||||
<button
|
||||
type="button"
|
||||
className="vm-btn vm-btn-ghost"
|
||||
onClick={() => {
|
||||
setDraftYear(defaultYear);
|
||||
setAppliedYear(defaultYear);
|
||||
}}
|
||||
>
|
||||
重置
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className="vm-btn vm-btn-primary"
|
||||
onClick={() => setAppliedYear(draftYear)}
|
||||
>
|
||||
查询
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="vm-table-section">
|
||||
<div className="vm-table-toolbar ldb-table-toolbar" data-annotation-id="lbd-monthly-pl-toolbar">
|
||||
<DetailMainTabs mainTab={mainTab} onChange={onTabChange} />
|
||||
<div className="vm-table-actions">
|
||||
<button
|
||||
type="button"
|
||||
className="vm-btn vm-btn-ghost ldb-toolbar-btn"
|
||||
data-vm-icon="download"
|
||||
onClick={handleExport}
|
||||
>
|
||||
导出
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="vm-table-card">
|
||||
<h2 className="lbd-monthly-pl-title">{title}</h2>
|
||||
<div className="vm-table-wrap lbd-monthly-pl-wrap" data-annotation-id="lbd-monthly-pl-table">
|
||||
<table className="vm-table ldb-table lbd-monthly-pl-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>月份</th>
|
||||
<th className="ldb-col-money">押金</th>
|
||||
<th className="ldb-col-money">应收</th>
|
||||
<th className="ldb-col-money">实收</th>
|
||||
<th className="ldb-col-money">未收</th>
|
||||
<th className="ldb-col-money">自然月收入</th>
|
||||
<th className="ldb-col-money">氢费预充值</th>
|
||||
<th className="ldb-col-money">成本</th>
|
||||
<th className="ldb-col-money">居间费</th>
|
||||
<th className="ldb-col-money">氢费</th>
|
||||
<th className="ldb-col-money">总成本</th>
|
||||
<th className="ldb-col-money">盈亏</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{rows.map((row) => (
|
||||
<tr key={row.month}>
|
||||
<td className="tabular-nums">{row.month}</td>
|
||||
<td className="ldb-col-money tabular-nums">{displayCell(row, row.deposit)}</td>
|
||||
<td className="ldb-col-money tabular-nums">{displayCell(row, row.receivable)}</td>
|
||||
<td className="ldb-col-money tabular-nums">{displayCell(row, row.received)}</td>
|
||||
<td className="ldb-col-money">{renderOutstanding(row)}</td>
|
||||
<td className="ldb-col-money tabular-nums">{displayCell(row, row.naturalMonthIncome)}</td>
|
||||
<td className="ldb-col-money tabular-nums">{displayCell(row, row.hydrogenPrepay)}</td>
|
||||
<td className="ldb-col-money tabular-nums">{displayCell(row, row.baseCost)}</td>
|
||||
<td className="ldb-col-money tabular-nums">{displayCell(row, row.brokerage)}</td>
|
||||
<td className="ldb-col-money tabular-nums">{displayCell(row, row.hydrogenFee)}</td>
|
||||
<td className="ldb-col-money tabular-nums">{displayCell(row, row.totalCost)}</td>
|
||||
<td className="ldb-col-money">{renderProfit(row)}</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
<tfoot>
|
||||
<tr className="lbd-summary-row">
|
||||
<td className="lbd-summary-cell">总计</td>
|
||||
<td className="ldb-col-money tabular-nums lbd-summary-cell">{formatMoney(sums.deposit ?? 0)}</td>
|
||||
<td className="ldb-col-money tabular-nums lbd-summary-cell">{formatMoney(sums.receivable ?? 0)}</td>
|
||||
<td className="ldb-col-money tabular-nums lbd-summary-cell">{formatMoney(sums.received ?? 0)}</td>
|
||||
<td className="ldb-col-money lbd-summary-cell">
|
||||
{Number(sums.outstanding) > 0 ? (
|
||||
<span className="lbd-outstanding-warn tabular-nums">{formatMoney(sums.outstanding ?? 0)}</span>
|
||||
) : (
|
||||
<span className="tabular-nums">{formatMoney(sums.outstanding ?? 0)}</span>
|
||||
)}
|
||||
</td>
|
||||
<td className="ldb-col-money tabular-nums lbd-summary-cell">{formatMoney(sums.naturalMonthIncome ?? 0)}</td>
|
||||
<td className="ldb-col-money tabular-nums lbd-summary-cell">{formatMoney(sums.hydrogenPrepay ?? 0)}</td>
|
||||
<td className="ldb-col-money tabular-nums lbd-summary-cell">{formatMoney(sums.baseCost ?? 0)}</td>
|
||||
<td className="ldb-col-money tabular-nums lbd-summary-cell">{formatMoney(sums.brokerage ?? 0)}</td>
|
||||
<td className="ldb-col-money tabular-nums lbd-summary-cell">{formatMoney(sums.hydrogenFee ?? 0)}</td>
|
||||
<td className="ldb-col-money tabular-nums lbd-summary-cell">{formatMoney(sums.totalCost ?? 0)}</td>
|
||||
<td className="ldb-col-money lbd-summary-cell">
|
||||
<span className={`tabular-nums ${(sums.profit ?? 0) >= 0 ? 'lbd-profit-pos' : 'lbd-profit-neg'}`}>
|
||||
{formatMoney(sums.profit ?? 0)}
|
||||
</span>
|
||||
</td>
|
||||
</tr>
|
||||
</tfoot>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -268,7 +268,7 @@ export const DETAIL_TABLE_COLUMNS: DetailTableColumn[] = [
|
||||
{ key: 'remark', title: '备注', className: 'ldb-col-remark', defaultWidth: 140 },
|
||||
];
|
||||
|
||||
/** Excel 导入/导出列规格(47 列,含独立年份/月份/业务员) */
|
||||
/** Excel 导入/导出列规格(47 列业务字段;导出时在首列追加「状态」共 48 列) */
|
||||
export const DETAIL_EXPORT_SPECS: { key: keyof LeaseBusinessDetailRow; title: string }[] = [
|
||||
{ key: 'year', title: '年份' },
|
||||
{ key: 'month', title: '月份' },
|
||||
|
||||
@@ -94,33 +94,13 @@
|
||||
},
|
||||
{
|
||||
"id": "lbd-clog-seed-33-5",
|
||||
"operatedAt": "2026-01-18 10:22:36",
|
||||
"operatorId": "staff-002",
|
||||
"operatorName": "尚建华",
|
||||
"field": "_reconcile",
|
||||
"fieldLabel": "完成对账",
|
||||
"before": "未对账",
|
||||
"after": "已对账(2026-01-18)"
|
||||
},
|
||||
{
|
||||
"id": "lbd-clog-seed-33-6",
|
||||
"operatedAt": "2026-01-18 10:22:36",
|
||||
"operatorId": "staff-002",
|
||||
"operatorName": "尚建华",
|
||||
"field": "archiveStatus",
|
||||
"fieldLabel": "对账状态",
|
||||
"before": "未对账",
|
||||
"after": "已对账"
|
||||
},
|
||||
{
|
||||
"id": "lbd-clog-seed-33-7",
|
||||
"operatedAt": "2026-01-20 14:11:08",
|
||||
"operatorId": "supervisor-001",
|
||||
"operatorName": "王主管",
|
||||
"field": "remark",
|
||||
"fieldLabel": "备注",
|
||||
"before": "—",
|
||||
"after": "主管复核:实收与合同一致,归档确认"
|
||||
"after": "主管复核:实收与合同一致"
|
||||
}
|
||||
],
|
||||
"lbd-280": [
|
||||
|
||||
@@ -6,11 +6,10 @@ import '../vehicle-management/style.css';
|
||||
import '../lease-business-ledger/styles/index.css';
|
||||
import './styles/index.css';
|
||||
import React, { useCallback, useMemo, useState } from 'react';
|
||||
import { Download, FileUp } from 'lucide-react';
|
||||
import {
|
||||
type AnnotationDirectoryRouteNode,
|
||||
type AnnotationSourceDocument,
|
||||
type AnnotationViewerOptions
|
||||
type AnnotationViewerOptions,
|
||||
} from '@axhub/annotation';
|
||||
import { PrototypeAnnotationHost } from '../../common/prototype-annotation-host';
|
||||
import seedRows from './data/rows.json';
|
||||
@@ -43,21 +42,18 @@ import {
|
||||
createChangeLogEntry,
|
||||
type DetailChangeLogsByRowId,
|
||||
} from './utils/change-log';
|
||||
import { isDetailSupervisor, resolveDetailOperator } from './utils/role';
|
||||
import { resolveDetailOperator } from './utils/role';
|
||||
import {
|
||||
mergeDetailImportRows,
|
||||
type DetailImportDuplicateStrategy,
|
||||
} from './utils/import-merge';
|
||||
import annotationSourceDocument from './annotation-source.json';
|
||||
|
||||
const ARCHIVED_DEMO_ROW_IDS = new Set(['lbd-33']);
|
||||
|
||||
export default function LeaseBusinessDetailApp() {
|
||||
const operator = useMemo(() => resolveDetailOperator(), []);
|
||||
const isSupervisor = isDetailSupervisor(operator);
|
||||
|
||||
const [records, setRecords] = useState<LeaseBusinessDetailRow[]>(() =>
|
||||
(seedRows as LeaseBusinessDetailRow[]).map((row) => applyDetailCalculations({
|
||||
...row,
|
||||
archiveStatus: ARCHIVED_DEMO_ROW_IDS.has(row.id) ? 'archived' : (row.archiveStatus ?? 'active'),
|
||||
reconciledAt: ARCHIVED_DEMO_ROW_IDS.has(row.id) ? '2026-01-18' : (row.reconciledAt ?? ''),
|
||||
})),
|
||||
(seedRows as LeaseBusinessDetailRow[]).map((row) => applyDetailCalculations(row)),
|
||||
);
|
||||
const [changeLogs, setChangeLogs] = useState<DetailChangeLogsByRowId>(
|
||||
() => ({ ...(changeLogSeed as DetailChangeLogsByRowId) }),
|
||||
@@ -70,6 +66,9 @@ export default function LeaseBusinessDetailApp() {
|
||||
const [importOpen, setImportOpen] = useState(false);
|
||||
const [importErrors, setImportErrors] = useState<DetailImportErrorRow[]>([]);
|
||||
const [importErrorHeaders, setImportErrorHeaders] = useState<string[]>([]);
|
||||
const [importSkipped, setImportSkipped] = useState(0);
|
||||
const [importOverwritten, setImportOverwritten] = useState(0);
|
||||
const [duplicateStrategy, setDuplicateStrategy] = useState<DetailImportDuplicateStrategy>('skip');
|
||||
const [toast, setToast] = useState('');
|
||||
const [editRow, setEditRow] = useState<LeaseBusinessDetailRow | null>(null);
|
||||
const [deleteRow, setDeleteRow] = useState<LeaseBusinessDetailRow | null>(null);
|
||||
@@ -94,7 +93,7 @@ export default function LeaseBusinessDetailApp() {
|
||||
const updateRow = useCallback((
|
||||
id: string,
|
||||
patch: Partial<LeaseBusinessDetailRow>,
|
||||
logMeta?: { forceField?: string; fieldLabel?: string },
|
||||
logMeta?: { forceField?: string; fieldLabel?: string; beforeText?: string; afterText?: string },
|
||||
) => {
|
||||
setRecords((prev) => {
|
||||
const before = prev.find((row) => row.id === id);
|
||||
@@ -109,7 +108,12 @@ export default function LeaseBusinessDetailApp() {
|
||||
logMeta.forceField,
|
||||
before[logMeta.forceField as keyof LeaseBusinessDetailRow],
|
||||
after[logMeta.forceField as keyof LeaseBusinessDetailRow],
|
||||
{ fieldLabel: logMeta.fieldLabel, force: true },
|
||||
{
|
||||
fieldLabel: logMeta.fieldLabel,
|
||||
beforeText: logMeta.beforeText,
|
||||
afterText: logMeta.afterText,
|
||||
force: true,
|
||||
},
|
||||
);
|
||||
if (entry) setChangeLogs((prevLogs) => appendChangeLogs(prevLogs, id, [entry]));
|
||||
}
|
||||
@@ -135,28 +139,39 @@ export default function LeaseBusinessDetailApp() {
|
||||
const handleImport = async (file: File) => {
|
||||
try {
|
||||
const result = await parseDetailImportFile(file);
|
||||
setImportErrors(result.errors);
|
||||
setImportErrorHeaders(result.fileHeaders);
|
||||
const merged = mergeDetailImportRows(records, result.success, duplicateStrategy);
|
||||
const allErrors = [
|
||||
...result.errors,
|
||||
...merged.duplicateErrors,
|
||||
...merged.amountErrors,
|
||||
];
|
||||
|
||||
if (result.success.length === 0 && result.errors.length === 0) {
|
||||
setImportErrors(allErrors);
|
||||
setImportErrorHeaders(result.fileHeaders);
|
||||
setImportSkipped(merged.skipped);
|
||||
setImportOverwritten(merged.overwritten);
|
||||
|
||||
const affectedCount = merged.records.length - records.length + merged.overwritten;
|
||||
|
||||
if (affectedCount === 0 && allErrors.length === 0) {
|
||||
showToast('未解析到有效数据,请检查模板与必填列');
|
||||
return;
|
||||
}
|
||||
|
||||
if (result.success.length > 0) {
|
||||
const imported = result.success.map((row) => applyDetailCalculations({
|
||||
...row,
|
||||
archiveStatus: 'active',
|
||||
reconciledAt: '',
|
||||
}));
|
||||
setRecords((prev) => [...imported, ...prev]);
|
||||
if (affectedCount > 0) {
|
||||
const previousIds = new Set(records.map((row) => row.id));
|
||||
const overwrittenIdSet = new Set(merged.overwrittenIds);
|
||||
setRecords(merged.records);
|
||||
setChangeLogs((prev) => {
|
||||
let next = { ...prev };
|
||||
imported.forEach((row) => {
|
||||
merged.records.forEach((row) => {
|
||||
const isNew = !previousIds.has(row.id);
|
||||
const isOverwrite = overwrittenIdSet.has(row.id);
|
||||
if (!isNew && !isOverwrite) return;
|
||||
const entry = createChangeLogEntry(operator, '_import', null, null, {
|
||||
fieldLabel: '批量导入',
|
||||
beforeText: '—',
|
||||
afterText: '新增明细',
|
||||
afterText: isOverwrite ? '覆盖导入' : '新增明细',
|
||||
force: true,
|
||||
});
|
||||
if (entry) next = appendChangeLogs(next, row.id, [entry]);
|
||||
@@ -166,13 +181,18 @@ export default function LeaseBusinessDetailApp() {
|
||||
setPage(1);
|
||||
}
|
||||
|
||||
if (result.errors.length > 0 && result.success.length > 0) {
|
||||
showToast(`已导入 ${result.success.length} 条;${result.errors.length} 条失败,可下载错误日志`);
|
||||
} else if (result.errors.length > 0) {
|
||||
showToast(`${result.errors.length} 条导入失败,请下载错误日志查看原因`);
|
||||
if (allErrors.length > 0 && affectedCount > 0) {
|
||||
const parts = [`已处理 ${affectedCount} 条`];
|
||||
if (merged.skipped > 0) parts.push(`跳过 ${merged.skipped} 条重复`);
|
||||
parts.push(`${allErrors.length} 条失败,可下载错误日志`);
|
||||
showToast(parts.join(';'));
|
||||
} else if (allErrors.length > 0) {
|
||||
showToast(`${allErrors.length} 条导入失败,请下载错误日志查看原因`);
|
||||
} else {
|
||||
setImportOpen(false);
|
||||
showToast(`已导入 ${result.success.length} 条明细,公式列已自动计算`);
|
||||
const parts = [`已导入 ${affectedCount} 条明细`];
|
||||
if (merged.skipped > 0) parts.push(`跳过 ${merged.skipped} 条重复`);
|
||||
showToast(`${parts.join(',')},公式列已自动计算`);
|
||||
}
|
||||
} catch {
|
||||
showToast('导入失败,请检查文件格式');
|
||||
@@ -214,16 +234,6 @@ export default function LeaseBusinessDetailApp() {
|
||||
return (
|
||||
<>
|
||||
<div className="vm-page ldb-page lc-page lc-page--list-dense lbd-page">
|
||||
<div className="lbd-role-banner" role="status">
|
||||
<span>
|
||||
当前视角:
|
||||
{isSupervisor ? '业务管理部主管(可修改已锁定记录)' : '业管人员'}
|
||||
</span>
|
||||
{!isSupervisor && (
|
||||
<span className="lbd-role-banner-hint">主管预览:URL 追加 ?role=supervisor</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<FilterPanel
|
||||
records={records}
|
||||
filters={pendingFilters}
|
||||
@@ -237,29 +247,31 @@ export default function LeaseBusinessDetailApp() {
|
||||
<section className="vm-table-section">
|
||||
<div className="vm-table-toolbar ldb-table-toolbar" data-annotation-id="lbd-toolbar">
|
||||
<div className="vm-table-actions">
|
||||
<button
|
||||
type="button"
|
||||
className="vm-btn vm-btn-secondary ldb-toolbar-btn"
|
||||
data-vm-icon="import"
|
||||
onClick={() => {
|
||||
setImportErrors([]);
|
||||
setImportErrorHeaders([]);
|
||||
setImportOpen(true);
|
||||
}}
|
||||
>
|
||||
批量导入
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className="vm-btn vm-btn-ghost ldb-toolbar-btn"
|
||||
data-vm-icon="download"
|
||||
onClick={() => {
|
||||
exportDetailRows(filtered);
|
||||
showToast(`已导出 ${filtered.length} 条明细`);
|
||||
}}
|
||||
>
|
||||
批量导出
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className="vm-btn vm-btn-secondary ldb-toolbar-btn"
|
||||
data-vm-icon="import"
|
||||
onClick={() => {
|
||||
setImportErrors([]);
|
||||
setImportErrorHeaders([]);
|
||||
setImportSkipped(0);
|
||||
setImportOverwritten(0);
|
||||
setImportOpen(true);
|
||||
}}
|
||||
>
|
||||
批量导入
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className="vm-btn vm-btn-ghost ldb-toolbar-btn"
|
||||
data-vm-icon="download"
|
||||
onClick={() => {
|
||||
exportDetailRows(filtered);
|
||||
showToast(`已导出 ${filtered.length} 条明细`);
|
||||
}}
|
||||
>
|
||||
批量导出
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -268,7 +280,6 @@ export default function LeaseBusinessDetailApp() {
|
||||
records={paged}
|
||||
summary={kpi}
|
||||
loading={tableLoading}
|
||||
isSupervisor={isSupervisor}
|
||||
onEdit={setEditRow}
|
||||
onDelete={setDeleteRow}
|
||||
onChangeLog={setChangeLogRow}
|
||||
@@ -297,7 +308,11 @@ export default function LeaseBusinessDetailApp() {
|
||||
onClose={() => setImportOpen(false)}
|
||||
onDownloadTemplate={downloadDetailImportTemplate}
|
||||
onImport={handleImport}
|
||||
duplicateStrategy={duplicateStrategy}
|
||||
onDuplicateStrategyChange={setDuplicateStrategy}
|
||||
failedCount={importErrors.length}
|
||||
skippedCount={importSkipped}
|
||||
overwrittenCount={importOverwritten}
|
||||
onDownloadErrorLog={
|
||||
importErrors.length > 0
|
||||
? () => downloadDetailImportErrorLog(importErrors, importErrorHeaders)
|
||||
|
||||
@@ -9,11 +9,114 @@ const __dirname = dirname(fileURLToPath(import.meta.url));
|
||||
const root = join(__dirname, '..');
|
||||
const jsonPath = join(root, 'annotation-source.json');
|
||||
const prdPath = join(root, '.spec/requirements-prd.md');
|
||||
const fieldChecksPath = join(root, '.spec/field-checks.md');
|
||||
const importRulesPath = join(root, '.spec/import-rules.md');
|
||||
|
||||
const doc = JSON.parse(readFileSync(jsonPath, 'utf8'));
|
||||
const prd = readFileSync(prdPath, 'utf8');
|
||||
const fieldChecksMd = readFileSync(fieldChecksPath, 'utf8');
|
||||
const importRulesMd = readFileSync(importRulesPath, 'utf8');
|
||||
|
||||
for (const node of doc.data.nodes) {
|
||||
if (node.annotationText) {
|
||||
doc.markdownMap[node.id] = node.annotationText;
|
||||
}
|
||||
}
|
||||
|
||||
const mm = doc.markdownMap;
|
||||
|
||||
const filterSectionMatch = prd.match(/## 2\. 筛选区\n+([\s\S]*?)\n+---/);
|
||||
if (filterSectionMatch) {
|
||||
doc.markdownMap['lbd-filter'] = `## 2. 筛选区\n\n${filterSectionMatch[1].trim()}\n\n---`;
|
||||
}
|
||||
|
||||
doc.markdownMap['lbd-doc-field-checks'] = fieldChecksMd;
|
||||
|
||||
doc.markdownMap['lbd-col-customer'] = `## 客户名称 · 系统校验
|
||||
|
||||
导入后按**车牌 + 提车/退车日期**与合同推算期望客户,并与客户管理、租赁合同比对。
|
||||
|
||||
### 判定顺序
|
||||
|
||||
1. 期望客户与当前名完全一致 → ✅ 与系统登记一致
|
||||
2. 车牌+客户名命中租赁合同 → ✅ 与租赁合同一致
|
||||
3. 有期望客户但不一致 → ⚠️ 提示建议客户,可**一键替换**
|
||||
4. 客户管理已登记(全等或简称包含)→ ✅ 弱校验通过
|
||||
5. 否则 → ⚠️ 请核对提车/退车日期
|
||||
|
||||
完整规则见目录「单元格系统校验」或 \`.spec/field-checks.md\`。
|
||||
|
||||
---`;
|
||||
|
||||
const tableSectionMatch = prd.match(/## 5\. 明细列表(48 列)\n+([\s\S]*?)\n+---\n+\n+## 6\./);
|
||||
if (tableSectionMatch) {
|
||||
doc.markdownMap['lbd-table'] = `## 5. 明细列表(48 列)\n\n${tableSectionMatch[1].trim()}\n\n---`;
|
||||
}
|
||||
|
||||
doc.markdownMap['lbd-toolbar'] = `## 4. 列表工具栏
|
||||
|
||||
| 按钮 | 行为 |
|
||||
|---|---|
|
||||
| 批量导入 | 下载模板(36 列)→ 选择重复策略 → 上传 Excel |
|
||||
| 批量导出 | 导出当前筛选结果(状态 + 47 列业务字段,共 48 列) |
|
||||
|
||||
### 行内操作
|
||||
|
||||
编辑、删除、变更日志。
|
||||
|
||||
### 导入重复策略
|
||||
|
||||
主键:年份 + 月份 + 车牌 + **客户名称**。支持跳过 / 覆盖 / 报错。
|
||||
|
||||
### 实收金额
|
||||
|
||||
允许实收大于应收合计(导入/编辑不拦截)。详见 \`.spec/import-rules.md\`。
|
||||
|
||||
---`;
|
||||
|
||||
doc.markdownMap['lbd-doc-import-rules'] = importRulesMd;
|
||||
|
||||
doc.markdownMap['lbd-doc-formulas'] = `## 6. 公式列(系统自动计算)
|
||||
|
||||
| 字段 | 计算方式 |
|
||||
|---|---|
|
||||
| **应收合计** | 应收租金 + 维保包干收入 + 保险上浮费 + 运维费(收入)+ 其他收入 + 里程减免 + 其他减免 |
|
||||
| **月度收入** | 月度租金 + 维保包干收入 + 保险上浮费 + 运维费(收入)+ 其他收入 + 里程减免 + 其他减免 |
|
||||
| **未收** | 应收合计 − 实收金额 |
|
||||
| **车辆实际成本** | 车辆标准成本 × 平均天数 |
|
||||
| **总成本** | 车辆实际成本 + 保险费 + 氢费 + 运维费(成本)+ 居间费 + 其他 |
|
||||
| **盈亏** | 月度收入 − 总成本 |
|
||||
|
||||
---`;
|
||||
|
||||
doc.markdownMap['lbd-doc-boundary'] = `## 模块边界
|
||||
|
||||
| 模块 | 定位 |
|
||||
|---|---|
|
||||
| **租赁业务明细** | Excel 宽表维护;48 列;收款状态;导入去重(含客户名称) |
|
||||
| **租赁业务台账** | 账单维度、收款关联、归档与数据范围 |
|
||||
| **业务部台账** | 租赁业绩与盈亏月度汇总(数据来源含本模块明细) |
|
||||
|
||||
### 不做范围
|
||||
|
||||
- 本页不做盈亏月度汇总(见业务部台账)
|
||||
- 服务端持久化、员工数据范围隔离
|
||||
- 收款记录自动回写实收
|
||||
|
||||
---`;
|
||||
|
||||
for (const node of doc.data.nodes) {
|
||||
if (node.id === 'lbd-toolbar') {
|
||||
node.annotationText = doc.markdownMap['lbd-toolbar'];
|
||||
}
|
||||
if (node.id === 'lbd-filter') {
|
||||
node.annotationText = doc.markdownMap['lbd-filter'];
|
||||
}
|
||||
if (node.id === 'lbd-table') {
|
||||
node.annotationText = doc.markdownMap['lbd-table'];
|
||||
}
|
||||
}
|
||||
|
||||
doc.markdownMap['lbd-doc-overview'] = `## 1. 模块定位
|
||||
|
||||
| 项 | 说明 |
|
||||
@@ -21,7 +124,7 @@ doc.markdownMap['lbd-doc-overview'] = `## 1. 模块定位
|
||||
| 模块名称 | 台账数据 — 租赁业务明细 |
|
||||
| 目标用户 | 业务二部业管 / 运营人员 |
|
||||
| 核心任务 | 按 Excel 样表维护租赁车辆收入明细、查询汇总、批量导入导出 |
|
||||
| 页面结构 | 筛选区 + 7 项 KPI + 工具栏 + 48 列宽表(表尾 23 项汇总)+ 分页 |
|
||||
| 页面结构 | 筛选区 + 7 项 KPI + 工具栏 + 48 列宽表 + 分页 |
|
||||
| 设计基底 | vm-page + ldb-page + lc-page |
|
||||
|
||||
对齐 Excel《2026年业务二部运营台账总表》「2.租赁车辆收入明细表」。
|
||||
@@ -90,6 +193,7 @@ doc.directory.nodes = [
|
||||
defaultExpanded: false,
|
||||
children: [
|
||||
nodeDoc('lbd-col-status', '状态'),
|
||||
nodeDoc('lbd-col-customer', '客户名称'),
|
||||
nodeDoc('lbd-col-receivable-total', '应收合计'),
|
||||
nodeDoc('lbd-col-outstanding', '未收'),
|
||||
nodeDoc('lbd-col-vehicle-actual-cost', '车辆实际成本'),
|
||||
@@ -116,6 +220,20 @@ doc.directory.nodes = [
|
||||
title: '模块边界',
|
||||
markdown: mm['lbd-doc-boundary'],
|
||||
},
|
||||
{
|
||||
type: 'markdown',
|
||||
id: 'lbd-doc-field-checks',
|
||||
title: '单元格系统校验',
|
||||
markdown: mm['lbd-doc-field-checks'],
|
||||
markdownPath: 'src/prototypes/lease-business-detail/.spec/field-checks.md',
|
||||
},
|
||||
{
|
||||
type: 'markdown',
|
||||
id: 'lbd-doc-import-rules',
|
||||
title: '导入与金额规则',
|
||||
markdown: mm['lbd-doc-import-rules'],
|
||||
markdownPath: 'src/prototypes/lease-business-detail/.spec/import-rules.md',
|
||||
},
|
||||
{
|
||||
type: 'markdown',
|
||||
id: 'lbd-doc-source',
|
||||
@@ -130,7 +248,11 @@ doc.directory.nodes = [
|
||||
| 筛选 / KPI 汇总 | \`utils/detail.ts\` |
|
||||
| 收款状态 | \`utils/payment-status.ts\` |
|
||||
| 公式计算 | \`utils/calc-detail.ts\` |
|
||||
| 导入导出 | \`utils/batch-io.ts\` |
|
||||
| 导入导出 | \`utils/batch-io.ts\`、\`utils/import-merge.ts\`、\`utils/row-key.ts\` |
|
||||
| 单元格校验 | \`utils/field-checks.ts\`、\`utils/system-ref.ts\`、\`components/FieldCheckIcon.tsx\` |
|
||||
| 保存校验 | \`utils/validate-detail.ts\`(实收超额拦截已停用) |
|
||||
| 校验说明 | \`.spec/field-checks.md\` |
|
||||
| 导入规则 | \`.spec/import-rules.md\` |
|
||||
| 变更日志 | \`utils/change-log.ts\` |
|
||||
| 类型 | \`types.ts\` |
|
||||
| 组件 | \`FilterPanel.tsx\`、\`DetailKpiRow.tsx\`、\`DetailTable.tsx\`、\`DetailImportModal.tsx\`、\`DetailEditModal.tsx\`、\`DetailChangeLogModal.tsx\` |
|
||||
|
||||
@@ -11,6 +11,15 @@
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
/* 筛选区文本输入与 FilterPicker 控件等高 */
|
||||
.lbd-filter-text-control {
|
||||
min-height: var(--vm-control-height);
|
||||
height: var(--vm-control-height);
|
||||
padding: 0 10px;
|
||||
font-size: 0.875rem;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* —— KPI 汇总卡片(7 项关键指标) —— */
|
||||
.lbd-kpi-row {
|
||||
display: grid;
|
||||
@@ -484,14 +493,6 @@
|
||||
min-width: 200px;
|
||||
}
|
||||
|
||||
.lbd-row-archived td {
|
||||
background: color-mix(in srgb, var(--ln-muted) 6%, var(--ln-surface-card));
|
||||
}
|
||||
|
||||
.lbd-row-archived:hover td {
|
||||
background: color-mix(in srgb, var(--ln-muted) 10%, var(--ln-surface-card));
|
||||
}
|
||||
|
||||
.lbd-changelog-meta {
|
||||
margin: 0 0 12px;
|
||||
font-size: 0.8125rem;
|
||||
@@ -678,3 +679,114 @@
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.lbd-edit-error {
|
||||
margin: 0 0 12px;
|
||||
padding: 8px 12px;
|
||||
border-radius: var(--ln-radius-control);
|
||||
border: 1px solid color-mix(in srgb, var(--ln-danger, #cf1322) 35%, var(--ln-hairline));
|
||||
background: color-mix(in srgb, var(--ln-danger, #cf1322) 8%, var(--ln-surface-card));
|
||||
color: var(--ln-danger, #cf1322);
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.lbd-outstanding-overpaid {
|
||||
color: #d48806;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.lbd-main-tabs {
|
||||
display: flex;
|
||||
gap: 4px;
|
||||
padding: 4px;
|
||||
border-radius: var(--ln-radius-control);
|
||||
border: 1px solid var(--ln-hairline);
|
||||
background: var(--ln-surface-card);
|
||||
width: fit-content;
|
||||
max-width: 100%;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.lbd-main-tabs--toolbar {
|
||||
margin-bottom: 0;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.lbd-main-tab {
|
||||
appearance: none;
|
||||
border: none;
|
||||
background: transparent;
|
||||
color: var(--ln-text-secondary);
|
||||
font-size: 0.875rem;
|
||||
font-weight: 500;
|
||||
padding: 8px 14px;
|
||||
border-radius: calc(var(--ln-radius-control) - 2px);
|
||||
cursor: pointer;
|
||||
transition: background 0.15s ease, color 0.15s ease;
|
||||
}
|
||||
|
||||
.lbd-main-tab:hover {
|
||||
background: color-mix(in srgb, var(--ln-primary) 8%, transparent);
|
||||
color: var(--ln-text-primary);
|
||||
}
|
||||
|
||||
.lbd-main-tab.is-active {
|
||||
background: color-mix(in srgb, var(--ln-primary) 12%, var(--ln-surface-card));
|
||||
color: var(--ln-primary);
|
||||
box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
|
||||
}
|
||||
|
||||
.lbd-monthly-pl-title {
|
||||
margin: 0 0 12px;
|
||||
text-align: center;
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
color: var(--ln-text-primary);
|
||||
}
|
||||
|
||||
.lbd-monthly-pl-wrap {
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.lbd-monthly-pl-table th,
|
||||
.lbd-monthly-pl-table td {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.lbd-monthly-pl-filter-grid {
|
||||
grid-template-columns: minmax(180px, 240px);
|
||||
}
|
||||
|
||||
.lbd-import-dup-options {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.lbd-import-dup-option {
|
||||
display: grid;
|
||||
grid-template-columns: auto 1fr;
|
||||
gap: 4px 10px;
|
||||
align-items: start;
|
||||
padding: 10px 12px;
|
||||
border: 1px solid var(--ln-hairline);
|
||||
border-radius: var(--ln-radius-control);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.lbd-import-dup-option:has(input:checked) {
|
||||
border-color: color-mix(in srgb, var(--ln-primary) 40%, var(--ln-hairline));
|
||||
background: color-mix(in srgb, var(--ln-primary) 6%, var(--ln-surface-card));
|
||||
}
|
||||
|
||||
.lbd-import-dup-label {
|
||||
font-size: 0.875rem;
|
||||
font-weight: 500;
|
||||
color: var(--ln-text-primary);
|
||||
}
|
||||
|
||||
.lbd-import-dup-hint {
|
||||
grid-column: 2;
|
||||
font-size: 0.8125rem;
|
||||
color: var(--ln-muted);
|
||||
}
|
||||
|
||||
|
||||
@@ -1,5 +1,3 @@
|
||||
export type DetailArchiveStatus = 'active' | 'archived';
|
||||
|
||||
export interface LeaseBusinessDetailRow {
|
||||
id: string;
|
||||
year: number;
|
||||
@@ -49,10 +47,6 @@ export interface LeaseBusinessDetailRow {
|
||||
assetOwner: string;
|
||||
signingCompany: string;
|
||||
remark: string;
|
||||
/** 未对账可编辑;已对账后仅业务管理部主管可改 */
|
||||
archiveStatus?: DetailArchiveStatus;
|
||||
/** 完成对账日期 YYYY-MM-DD */
|
||||
reconciledAt?: string;
|
||||
}
|
||||
|
||||
export interface LeaseDetailFilters {
|
||||
|
||||
@@ -3,6 +3,7 @@ import type { LeaseBusinessDetailRow } from '../types';
|
||||
import { DETAIL_EXPORT_HEADERS, DETAIL_EXPORT_SPECS } from '../components/tableColumns';
|
||||
import { applyDetailCalculations } from './calc-detail';
|
||||
import { getContractRef, getVehicleRef, isPlateInVehicleSystem } from './system-ref';
|
||||
import { resolveDetailPaymentStatus } from './payment-status';
|
||||
|
||||
/** 导入模板列(不含公式列;业务部门/业务员由系统合同反写) */
|
||||
export const DETAIL_IMPORT_TEMPLATE_HEADERS = [
|
||||
@@ -326,7 +327,14 @@ export function downloadDetailImportErrorLog(
|
||||
}
|
||||
|
||||
export function exportDetailRows(rows: LeaseBusinessDetailRow[]): void {
|
||||
const body = [DETAIL_EXPORT_HEADERS, ...rows.map(rowToExportCells)];
|
||||
const headers = ['状态', ...DETAIL_EXPORT_HEADERS];
|
||||
const body = [
|
||||
headers,
|
||||
...rows.map((row) => [
|
||||
resolveDetailPaymentStatus(row.receivableTotal, row.receivedAmount),
|
||||
...rowToExportCells(row),
|
||||
]),
|
||||
];
|
||||
const sheet = XLSX.utils.aoa_to_sheet(body);
|
||||
const book = XLSX.utils.book_new();
|
||||
XLSX.utils.book_append_sheet(book, sheet, '租赁业务明细');
|
||||
@@ -363,7 +371,9 @@ export async function parseDetailImportFile(file: File): Promise<DetailImportPar
|
||||
return;
|
||||
}
|
||||
|
||||
success.push(applyDetailCalculations(draft));
|
||||
const calculated = applyDetailCalculations(draft);
|
||||
// 实收 ≤ 应收合计:已停用,允许实收大于应收合计
|
||||
success.push(calculated);
|
||||
});
|
||||
|
||||
return { success, errors, fileHeaders };
|
||||
|
||||
@@ -248,7 +248,5 @@ export function applyDetailCalculations(
|
||||
totalCost,
|
||||
outstanding,
|
||||
profitLoss,
|
||||
archiveStatus: row.archiveStatus ?? 'active',
|
||||
reconciledAt: row.reconciledAt ?? '',
|
||||
};
|
||||
}
|
||||
|
||||
@@ -17,11 +17,8 @@ export interface DetailChangeLogEntry {
|
||||
export type DetailChangeLogsByRowId = Record<string, DetailChangeLogEntry[]>;
|
||||
|
||||
const EXTRA_FIELD_LABELS: Record<string, string> = {
|
||||
archiveStatus: '对账状态',
|
||||
reconciledAt: '对账日期',
|
||||
_delete: '删除记录',
|
||||
_import: '批量导入',
|
||||
_reconcile: '完成对账',
|
||||
};
|
||||
|
||||
const FIELD_LABELS: Record<string, string> = Object.fromEntries(
|
||||
@@ -40,11 +37,6 @@ const MONEY_FIELDS = new Set<string>([
|
||||
]);
|
||||
|
||||
export function formatLogValue(field: string, value: unknown): string {
|
||||
if (field === 'archiveStatus') {
|
||||
if (value === 'archived') return '已对账';
|
||||
if (value === 'active') return '未对账';
|
||||
return displayText(value);
|
||||
}
|
||||
if (field === 'year' || field === 'month') {
|
||||
return value === null || value === undefined || value === '' ? '—' : String(value);
|
||||
}
|
||||
@@ -62,8 +54,6 @@ export function valuesEqualForLog(field: string, before: unknown, after: unknown
|
||||
|
||||
const LOGGED_ROW_FIELDS: (keyof LeaseBusinessDetailRow)[] = [
|
||||
...DETAIL_EXPORT_SPECS.map((spec) => spec.key),
|
||||
'archiveStatus',
|
||||
'reconciledAt',
|
||||
];
|
||||
|
||||
export function createChangeLogEntry(
|
||||
@@ -116,11 +106,3 @@ export function collectRowChangeLogs(
|
||||
});
|
||||
return entries;
|
||||
}
|
||||
|
||||
export function canEditDetailRow(
|
||||
row: Pick<LeaseBusinessDetailRow, 'archiveStatus'>,
|
||||
isSupervisor: boolean,
|
||||
): boolean {
|
||||
if (row.archiveStatus === 'archived') return isSupervisor;
|
||||
return true;
|
||||
}
|
||||
|
||||
@@ -30,9 +30,12 @@ export function displayDeposit(value: number | string): string {
|
||||
return String(value);
|
||||
}
|
||||
|
||||
export function displayOutstanding(value: number): { text: string; warn: boolean } {
|
||||
if (value === 0) return { text: '0.00', warn: false };
|
||||
return { text: formatMoney(value), warn: value > 0 };
|
||||
export function displayOutstanding(value: number): { text: string; warn: boolean; overpaid: boolean } {
|
||||
if (value === 0) return { text: '0.00', warn: false, overpaid: false };
|
||||
if (value < 0) {
|
||||
return { text: formatMoney(value), warn: true, overpaid: true };
|
||||
}
|
||||
return { text: formatMoney(value), warn: value > 0, overpaid: false };
|
||||
}
|
||||
|
||||
export function applyDetailFilters(
|
||||
|
||||
98
src/prototypes/lease-business-detail/utils/import-merge.ts
Normal file
98
src/prototypes/lease-business-detail/utils/import-merge.ts
Normal file
@@ -0,0 +1,98 @@
|
||||
import type { LeaseBusinessDetailRow } from '../types';
|
||||
import type { DetailImportErrorRow } from './batch-io';
|
||||
import { detailRowBusinessKey, detailRowBusinessKeyLabel } from './row-key';
|
||||
|
||||
export type DetailImportDuplicateStrategy = 'skip' | 'overwrite' | 'error';
|
||||
|
||||
export interface DetailImportMergeResult {
|
||||
records: LeaseBusinessDetailRow[];
|
||||
skipped: number;
|
||||
overwritten: number;
|
||||
overwrittenIds: string[];
|
||||
duplicateErrors: DetailImportErrorRow[];
|
||||
/** 历史字段:实收超额校验已停用,始终为空 */
|
||||
amountErrors: DetailImportErrorRow[];
|
||||
}
|
||||
|
||||
function emptyRawCells(): (string | number)[] {
|
||||
return [];
|
||||
}
|
||||
|
||||
export function mergeDetailImportRows(
|
||||
existing: LeaseBusinessDetailRow[],
|
||||
imported: LeaseBusinessDetailRow[],
|
||||
strategy: DetailImportDuplicateStrategy,
|
||||
): DetailImportMergeResult {
|
||||
const keyToIndex = new Map<string, number>();
|
||||
existing.forEach((row, index) => {
|
||||
keyToIndex.set(detailRowBusinessKey(row), index);
|
||||
});
|
||||
|
||||
const next = [...existing];
|
||||
const toPrepend: LeaseBusinessDetailRow[] = [];
|
||||
let skipped = 0;
|
||||
let overwritten = 0;
|
||||
const overwrittenIds: string[] = [];
|
||||
const duplicateErrors: DetailImportErrorRow[] = [];
|
||||
const amountErrors: DetailImportErrorRow[] = [];
|
||||
|
||||
imported.forEach((row) => {
|
||||
// 实收 ≤ 应收合计:已停用,允许实收大于应收合计
|
||||
const key = detailRowBusinessKey(row);
|
||||
let existingIndex = keyToIndex.get(key);
|
||||
|
||||
if (existingIndex === undefined) {
|
||||
const prependIndex = toPrepend.length;
|
||||
toPrepend.push(row);
|
||||
keyToIndex.set(key, next.length + prependIndex);
|
||||
return;
|
||||
}
|
||||
|
||||
if (existingIndex >= next.length) {
|
||||
const prependIndex = existingIndex - next.length;
|
||||
const current = toPrepend[prependIndex];
|
||||
if (strategy === 'skip') {
|
||||
skipped += 1;
|
||||
return;
|
||||
}
|
||||
if (strategy === 'error') {
|
||||
duplicateErrors.push({
|
||||
reason: `重复记录:${detailRowBusinessKeyLabel(row)} 与本批导入重复`,
|
||||
rawCells: emptyRawCells(),
|
||||
});
|
||||
return;
|
||||
}
|
||||
toPrepend[prependIndex] = { ...row, id: current.id };
|
||||
overwritten += 1;
|
||||
overwrittenIds.push(current.id);
|
||||
return;
|
||||
}
|
||||
|
||||
if (strategy === 'skip') {
|
||||
skipped += 1;
|
||||
return;
|
||||
}
|
||||
|
||||
if (strategy === 'error') {
|
||||
duplicateErrors.push({
|
||||
reason: `重复记录:${detailRowBusinessKeyLabel(row)} 已存在`,
|
||||
rawCells: emptyRawCells(),
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
const preservedId = next[existingIndex].id;
|
||||
next[existingIndex] = { ...row, id: preservedId };
|
||||
overwritten += 1;
|
||||
overwrittenIds.push(preservedId);
|
||||
});
|
||||
|
||||
return {
|
||||
records: [...toPrepend, ...next],
|
||||
skipped,
|
||||
overwritten,
|
||||
overwrittenIds,
|
||||
duplicateErrors,
|
||||
amountErrors,
|
||||
};
|
||||
}
|
||||
146
src/prototypes/lease-business-detail/utils/monthly-pl.ts
Normal file
146
src/prototypes/lease-business-detail/utils/monthly-pl.ts
Normal file
@@ -0,0 +1,146 @@
|
||||
import * as XLSX from 'xlsx';
|
||||
import type { LeaseBusinessDetailRow } from '../types';
|
||||
import { formatMoney } from './detail';
|
||||
|
||||
export interface MonthlyPlRow {
|
||||
month: number;
|
||||
deposit: number;
|
||||
receivable: number;
|
||||
received: number;
|
||||
outstanding: number;
|
||||
naturalMonthIncome: number;
|
||||
/** 明细表无此字段,汇总占位为 0 */
|
||||
hydrogenPrepay: number;
|
||||
baseCost: number;
|
||||
brokerage: number;
|
||||
hydrogenFee: number;
|
||||
totalCost: number;
|
||||
profit: number;
|
||||
hasData: boolean;
|
||||
}
|
||||
|
||||
export const MONTHLY_PL_SUM_KEYS: (keyof MonthlyPlRow)[] = [
|
||||
'deposit',
|
||||
'receivable',
|
||||
'received',
|
||||
'outstanding',
|
||||
'naturalMonthIncome',
|
||||
'hydrogenPrepay',
|
||||
'baseCost',
|
||||
'brokerage',
|
||||
'hydrogenFee',
|
||||
'totalCost',
|
||||
'profit',
|
||||
];
|
||||
|
||||
function emptyMonthlyRow(month: number): MonthlyPlRow {
|
||||
return {
|
||||
month,
|
||||
deposit: 0,
|
||||
receivable: 0,
|
||||
received: 0,
|
||||
outstanding: 0,
|
||||
naturalMonthIncome: 0,
|
||||
hydrogenPrepay: 0,
|
||||
baseCost: 0,
|
||||
brokerage: 0,
|
||||
hydrogenFee: 0,
|
||||
totalCost: 0,
|
||||
profit: 0,
|
||||
hasData: false,
|
||||
};
|
||||
}
|
||||
|
||||
/** 按年份聚合明细行为 1–12 月盈亏汇总 */
|
||||
export function buildMonthlyPlRows(
|
||||
records: LeaseBusinessDetailRow[],
|
||||
year: number,
|
||||
): MonthlyPlRow[] {
|
||||
const buckets = new Map<number, MonthlyPlRow>();
|
||||
for (let month = 1; month <= 12; month += 1) {
|
||||
buckets.set(month, emptyMonthlyRow(month));
|
||||
}
|
||||
|
||||
records.forEach((row) => {
|
||||
if (row.year !== year) return;
|
||||
const bucket = buckets.get(row.month);
|
||||
if (!bucket) return;
|
||||
|
||||
bucket.hasData = true;
|
||||
bucket.deposit += typeof row.deposit === 'number' ? row.deposit : 0;
|
||||
bucket.receivable += row.receivableTotal;
|
||||
bucket.received += row.receivedAmount;
|
||||
bucket.outstanding += row.outstanding;
|
||||
bucket.naturalMonthIncome += row.monthlyIncome;
|
||||
bucket.baseCost += row.vehicleActualCost;
|
||||
bucket.brokerage += row.brokerageFee;
|
||||
bucket.hydrogenFee += row.hydrogenFee;
|
||||
bucket.totalCost += row.totalCost;
|
||||
bucket.profit += row.profitLoss;
|
||||
});
|
||||
|
||||
return Array.from(buckets.values()).sort((a, b) => a.month - b.month);
|
||||
}
|
||||
|
||||
export function sumMonthlyPlRows(rows: MonthlyPlRow[]): Record<string, number> {
|
||||
const sums: Record<string, number> = {};
|
||||
MONTHLY_PL_SUM_KEYS.forEach((key) => {
|
||||
sums[key] = rows.reduce((acc, row) => acc + (row[key] as number), 0);
|
||||
});
|
||||
return sums;
|
||||
}
|
||||
|
||||
function displayPlMoney(value: number, hasData: boolean): string {
|
||||
if (!hasData && value === 0) return '';
|
||||
return formatMoney(value);
|
||||
}
|
||||
|
||||
export function exportMonthlyPlRows(rows: MonthlyPlRow[], year: number): void {
|
||||
const headers = [
|
||||
'月份',
|
||||
'押金',
|
||||
'应收',
|
||||
'实收',
|
||||
'未收',
|
||||
'自然月收入',
|
||||
'氢费预充值',
|
||||
'成本',
|
||||
'居间费',
|
||||
'氢费',
|
||||
'总成本',
|
||||
'盈亏',
|
||||
];
|
||||
const body = rows.map((row) => [
|
||||
String(row.month),
|
||||
displayPlMoney(row.deposit, row.hasData),
|
||||
displayPlMoney(row.receivable, row.hasData),
|
||||
displayPlMoney(row.received, row.hasData),
|
||||
displayPlMoney(row.outstanding, row.hasData),
|
||||
displayPlMoney(row.naturalMonthIncome, row.hasData),
|
||||
displayPlMoney(row.hydrogenPrepay, row.hasData),
|
||||
displayPlMoney(row.baseCost, row.hasData),
|
||||
displayPlMoney(row.brokerage, row.hasData),
|
||||
displayPlMoney(row.hydrogenFee, row.hasData),
|
||||
displayPlMoney(row.totalCost, row.hasData),
|
||||
displayPlMoney(row.profit, row.hasData),
|
||||
]);
|
||||
|
||||
const sums = sumMonthlyPlRows(rows);
|
||||
const totalRow = [
|
||||
'总计',
|
||||
...MONTHLY_PL_SUM_KEYS.map((key) => formatMoney(sums[key] ?? 0)),
|
||||
];
|
||||
|
||||
const sheet = XLSX.utils.aoa_to_sheet([headers, ...body, totalRow]);
|
||||
const book = XLSX.utils.book_new();
|
||||
XLSX.utils.book_append_sheet(book, sheet, '盈亏月度汇总');
|
||||
XLSX.writeFile(book, `租赁业务盈亏月度汇总_${year}_${Date.now()}.xlsx`);
|
||||
}
|
||||
|
||||
export function buildDetailYearOptions(records: LeaseBusinessDetailRow[]): number[] {
|
||||
const years = new Set<number>();
|
||||
records.forEach((row) => {
|
||||
if (row.year) years.add(row.year);
|
||||
});
|
||||
return Array.from(years).sort((a, b) => b - a);
|
||||
}
|
||||
15
src/prototypes/lease-business-detail/utils/row-key.ts
Normal file
15
src/prototypes/lease-business-detail/utils/row-key.ts
Normal file
@@ -0,0 +1,15 @@
|
||||
import type { LeaseBusinessDetailRow } from '../types';
|
||||
|
||||
/** 业务主键:年份 + 月份 + 车牌号码 + 客户名称 */
|
||||
export function detailRowBusinessKey(
|
||||
row: Pick<LeaseBusinessDetailRow, 'year' | 'month' | 'plateNo' | 'customerName'>,
|
||||
): string {
|
||||
return `${row.year}-${String(row.month).padStart(2, '0')}-${row.plateNo.trim()}::${row.customerName.trim()}`;
|
||||
}
|
||||
|
||||
/** 重复提示用的可读标签 */
|
||||
export function detailRowBusinessKeyLabel(
|
||||
row: Pick<LeaseBusinessDetailRow, 'year' | 'month' | 'plateNo' | 'customerName'>,
|
||||
): string {
|
||||
return `${row.year}年${row.month}月 · ${row.plateNo} · ${row.customerName.trim() || '(无客户)'}`;
|
||||
}
|
||||
@@ -0,0 +1,33 @@
|
||||
import type { LeaseBusinessDetailRow } from '../types';
|
||||
import { applyDetailCalculations } from './calc-detail';
|
||||
|
||||
const MONEY_EPS = 0.005;
|
||||
|
||||
/**
|
||||
* 【已停用】原规则:实收金额不得超过应收合计。
|
||||
* 产品已确认:实收金额可以大于应收合计(多收/预收场景),导入与编辑均不再拦截。
|
||||
* 保留函数签名供对照历史逻辑;当前始终返回 null。
|
||||
*/
|
||||
export function validateReceivedAgainstReceivable(
|
||||
_receivableTotal: number,
|
||||
_receivedAmount: number,
|
||||
): string | null {
|
||||
// if (receivedAmount > receivableTotal + MONEY_EPS) {
|
||||
// return `实收金额(${receivedAmount.toFixed(2)})不能大于应收合计(${receivableTotal.toFixed(2)})`;
|
||||
// }
|
||||
void MONEY_EPS;
|
||||
return null;
|
||||
}
|
||||
|
||||
export function validateDetailRowAmounts(row: LeaseBusinessDetailRow): string | null {
|
||||
return validateReceivedAgainstReceivable(row.receivableTotal, row.receivedAmount);
|
||||
}
|
||||
|
||||
/** 编辑保存前:合并 patch 并重算后校验(当前无金额上限拦截) */
|
||||
export function validateDetailPatch(
|
||||
before: LeaseBusinessDetailRow,
|
||||
patch: Partial<LeaseBusinessDetailRow>,
|
||||
): string | null {
|
||||
const next = applyDetailCalculations({ ...before, ...patch });
|
||||
return validateDetailRowAmounts(next);
|
||||
}
|
||||
@@ -283,8 +283,8 @@ export const ENERGY_MODULES: LineModule[] = [
|
||||
],
|
||||
closure:
|
||||
'签约站氢费由站点主动上报或 PLC 自动采集,预约订单在线闭环,减少能源部手工补录、提升数据时效性。',
|
||||
prototypeHref: '/prototypes/oneos-web-h2-station',
|
||||
prototypeLabel: '打开加氢订单',
|
||||
prototypeHref: '/prototypes/oneos-h5-h2-order',
|
||||
prototypeLabel: '打开加氢订单(H5)',
|
||||
},
|
||||
{
|
||||
id: 'vehicle-h2-fee',
|
||||
@@ -805,7 +805,7 @@ export const SELF_OPERATED_MODULES: LineModule[] = [
|
||||
],
|
||||
closure: '项目收入、司机与车辆成本在同一台账内可核对,盈亏结果可对接财务实收。',
|
||||
prototypeHref: '/prototypes/self-operated-business-ledger',
|
||||
prototypeLabel: '打开自营业务台账',
|
||||
prototypeLabel: '打开物流业务明细',
|
||||
},
|
||||
];
|
||||
|
||||
|
||||
@@ -47,6 +47,8 @@ vm-page ldb-page
|
||||
## 筛选区
|
||||
|
||||
- 默认一行 **4 项**,其余放入 `ldb-filter-expand` 动画区(与全局 `vm-filter-expand` / `src/common/vm-filter-panel.ts` 规则一致)
|
||||
- 筛选项顺序按业务优先级排列后,**必须**经 `splitFilterFields()` 拆分;禁止手写 `PRIMARY_KEYS` 超过 4 项导致首行溢出
|
||||
- **禁止末行仅 1 项**:展开区项数为 4n+1 时,从首行借调 1 项到展开区(见 `vm-filter-panel.ts` 内 `rebalanceFilterSplit`)
|
||||
- 日期区间使用 `DateRangeFilterField`(见 `vm-shared/DESIGN.md`),展示分隔符为「**至**」
|
||||
- 重置 / 查询按钮加 `ldb-toolbar-btn`
|
||||
|
||||
|
||||
@@ -197,6 +197,10 @@
|
||||
color: var(--ln-muted);
|
||||
}
|
||||
|
||||
/*
|
||||
* ldb-filter-* 与全局 vm-filter-* 同义(见 rules/global-design-spec.md §4.1.3)。
|
||||
* 新代码优先使用 vm-filter-body / vm-filter-expand / vm-filter-toggle。
|
||||
*/
|
||||
.ldb-filter-expand.is-expanded .ldb-filter-expand-inner {
|
||||
overflow: visible;
|
||||
}
|
||||
@@ -251,6 +255,7 @@
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.ldb-filter-toggle-badge {
|
||||
|
||||
@@ -0,0 +1,53 @@
|
||||
# 加氢订单(H5)Implementation Plan
|
||||
|
||||
> **For agentic workers:** Implement task-by-task. Checkbox tracking. Do **not** git commit unless user asks.
|
||||
|
||||
**Goal:** 交付手机端「加氢订单」原型,站端可查看本站记录、OCR 新增,并对账单联动已对账状态。
|
||||
|
||||
**Architecture:** React 单页原型 + 小羚羚 token 的 390 手机壳;数据读写 `h2VehicleLedgerBridge` 共享 Store;列表 / 分步新增 / 只读详情三视图本地状态切换。
|
||||
|
||||
**Tech Stack:** React + TypeScript、本地 CSS、`@axhub/annotation`、现有 Bridge Store
|
||||
|
||||
---
|
||||
|
||||
### Task 1: Bridge 写入 API
|
||||
|
||||
**Files:**
|
||||
- Modify: `src/common/h2VehicleLedgerBridge.js`
|
||||
|
||||
- [x] 增加 `upsertRow(row)`、`removeRow(id)`,挂到 `H2VehicleLedgerBridge` 与 Store
|
||||
- [x] 新增行默认 `reconcileStatus: pending`;通知 subscribe
|
||||
|
||||
### Task 2: 原型骨架与类型
|
||||
|
||||
**Files:**
|
||||
- Create: `src/prototypes/oneos-h5-h2-order/index.tsx`
|
||||
- Create: `src/prototypes/oneos-h5-h2-order/index.html`(若扫描需要)
|
||||
- Create: `src/prototypes/oneos-h5-h2-order/types.ts`
|
||||
- Create: `src/prototypes/oneos-h5-h2-order/styles/index.css`
|
||||
- Create: `src/prototypes/oneos-h5-h2-order/utils/orders.ts`
|
||||
- Create: `src/prototypes/oneos-h5-h2-order/utils/ocr-mock.ts`
|
||||
- Create: `src/prototypes/oneos-h5-h2-order/utils/format.ts`
|
||||
|
||||
### Task 3: 列表 / 新增向导 / 详情组件
|
||||
|
||||
**Files:**
|
||||
- Create: `components/PhoneShell.tsx`
|
||||
- Create: `components/OrderList.tsx`
|
||||
- Create: `components/OrderCard.tsx`
|
||||
- Create: `components/CreateWizard.tsx`
|
||||
- Create: `components/OrderDetail.tsx`
|
||||
- Create: `components/StationSwitcher.tsx`
|
||||
|
||||
### Task 4: 文档、菜单、标注、导航同步
|
||||
|
||||
**Files:**
|
||||
- Create: `.spec/requirements-prd.md`、`.spec/reconcile-linkage.md`
|
||||
- Create: `annotation-source.json`
|
||||
- Modify: `.axhub/make/sidebar-tree.json`(加氢站管理下「加氢订单」)
|
||||
- Run: `npm run project-nav:sync`、`npm run nav:sync -- --prototype oneos-h5-h2-order --note "..."`
|
||||
|
||||
### Task 5: 验收
|
||||
|
||||
- [ ] `/prototypes/oneos-h5-h2-order` 列表仅本站、FAB 新增 OCR 模拟、已对账只读
|
||||
- [ ] 站点信息对账后本页状态同步(同会话)
|
||||
@@ -0,0 +1,113 @@
|
||||
# 加氢订单(H5)— 已确认需求与设计决策
|
||||
|
||||
| 项 | 内容 |
|
||||
|---|---|
|
||||
| 日期 | 2026-07-14 |
|
||||
| 原型 ID | `oneos-h5-h2-order` |
|
||||
| 菜单位置 | OneOS → 加氢站管理 → 加氢订单 |
|
||||
| 文档性质 | 决策快照(对齐当时确认,不随实现逐行同步) |
|
||||
|
||||
---
|
||||
|
||||
## 1. 已确认产品需求
|
||||
|
||||
| 问题 | 用户选择 |
|
||||
|---|---|
|
||||
| 列表数据范围 | **A. 仅本站**(当前演示站点绑定的加氢站) |
|
||||
| 登录态 | **A. 已登录态**;顶栏展示站名,演示可切换示例站 |
|
||||
| 已对账记录 | **A. 不可改**(只读);未对账可编辑 / 删除 |
|
||||
| OCR 演示 | **A. 拍照或选图 → 约 1s 模拟识别 → 可校正**(已改为单表单,非三步) |
|
||||
|
||||
### 1.1 目标与范围
|
||||
|
||||
| 项 | 说明 |
|
||||
|---|---|
|
||||
| 目标用户 | 加氢站操作人员(采购建站、绑供应商、开账号后使用) |
|
||||
| 核心任务 | 手机浏览器查看 / 上报本站加氢订单,供能源部对账 |
|
||||
| 访问形态 | 手机浏览器 H5(桌面预览用 390 宽手机框) |
|
||||
| 与 Web 关系 | Web 站端/运营仍用「加氢记录」;本页为站端手机入口 |
|
||||
|
||||
**功能清单**
|
||||
|
||||
1. 本站订单列表(KPI:订单数 / 加氢量 / 加氢金额)
|
||||
2. 卡片字段:加氢时间、加氢站名称、车牌号、氢气单价(元/kg)、加氢量、加氢总额、对账状态、对账时间
|
||||
3. 新增:分步 OCR(车牌 → 加氢机面板)→ 核对提交;加氢时间默认当前;站名只读
|
||||
4. 未对账可编辑 / 删除;已对账只读
|
||||
5. 与「站点信息 → 对账单」共享氢费 Store:对账后本页状态变为「已对账」,对账时间为 `YYYY-MM-DD HH:mm`
|
||||
|
||||
**不做**:真登录鉴权、真 OCR 模型、PLC、原生 App、审批流、后端联调
|
||||
|
||||
### 1.2 验收重点
|
||||
|
||||
1. 手机宽度下列表 + 分步新增顺畅(含两次 OCR 模拟)
|
||||
2. 仅展示当前演示站点数据;切换站点列表随之变化
|
||||
3. 已对账不可编辑 / 删除
|
||||
4. 在站点信息完成对账后,本页对应记录状态与对账时间同步(同会话共享 Store)
|
||||
|
||||
---
|
||||
|
||||
## 2. 已确认设计方案
|
||||
|
||||
| 问题 | 用户选择 |
|
||||
|---|---|
|
||||
| 设计基底 | **A. 小羚羚** `make-project-20260629/.../xll-miniapp/DESIGN.md` |
|
||||
| 布局方案 | 列表 + FAB 新增;新增为单表单页(含 OCR);返回时非空二次确认 |
|
||||
|
||||
### 2.1 设计决策
|
||||
|
||||
| 决策 | 内容 |
|
||||
|---|---|
|
||||
| 主色 | `#7AB929` / `#6AA322`(小羚羚绿);与 OneOS Web `#32a06e` 区分,视为「站端 H5」 |
|
||||
| 预览壳 | 居中 390×844 手机框;真机浏览器可全宽 |
|
||||
| 首屏 | 列表为主 + 悬浮「+」 |
|
||||
| 卡片优先级 | 车牌、状态、时间、量与金额;单价 / 对账时间次级 |
|
||||
| 无底 Tab | 本模块单入口,不套小羚羚全局 Tab |
|
||||
| 演示切换 | 顶栏站点下拉,仅演示,不代表正式鉴权 |
|
||||
|
||||
### 2.2 信息架构
|
||||
|
||||
```text
|
||||
加氢订单(H5)
|
||||
├── 列表
|
||||
│ ├── 顶栏:标题 + 当前站(演示切换)
|
||||
│ ├── 摘要条:未对账 n · 已对账 m
|
||||
│ ├── 卡片列表(时间倒序)
|
||||
│ └── FAB 新增
|
||||
├── 新增 / 编辑(未对账)— 单表单
|
||||
│ ├── 加氢时间(默认当前)+ 站名只读
|
||||
│ ├── 拍车牌 OCR → 可校正
|
||||
│ ├── 拍面板 OCR → 单价 / 量 / 总额可校正
|
||||
│ └── 提交;返回时若有未提交内容二次确认
|
||||
└── 详情(已对账,只读)
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 3. 数据与对账联动(实现约定)
|
||||
|
||||
| 项 | 约定 |
|
||||
|---|---|
|
||||
| 数据源 | `src/common/h2VehicleLedgerBridge.js` 共享 Store(与站点信息、车辆氢费明细同源种子) |
|
||||
| 过滤 | `stationName` / `stationId` === 当前演示站 |
|
||||
| 列表单价 / 总额 | 站端口径:`costUnitPrice`、`costTotal`(加氢机成本侧);`hydrogenKg` |
|
||||
| 对账状态 | `reconcileStatus === 'reconciled'` → 已对账;否则未对账 |
|
||||
| 对账时间 | 优先 `reconcileDate`,格式展示 `YYYY-MM-DD HH:mm` |
|
||||
| 写入 | 扩展 Bridge:`upsertRow` / `removeRow`(或等价),保证站点对账单可拉到站端新增的未对账记录 |
|
||||
| 新增默认 | `reconcileStatus: pending`;站名 / stationId 取当前站;客户等字段用演示占位以满足 Store 结构 |
|
||||
| 原型边界 | 本地种子 + 内存 Store,**未接真实 API** |
|
||||
|
||||
---
|
||||
|
||||
## 4. 实施边界(确认后执行)
|
||||
|
||||
**做**
|
||||
|
||||
- 新建原型 `oneos-h5-h2-order`(列表 / 分步新增 / 只读详情)
|
||||
- 挂菜单、同步导航注册表
|
||||
- Bridge 写入能力与对账订阅展示
|
||||
- `.spec/requirements-prd.md` + 对账联动业务说明 + annotation
|
||||
|
||||
**不做**
|
||||
|
||||
- 改造桌面「加氢记录」为主流程(保持并列)
|
||||
- 真相机 OCR SDK、账号体系
|
||||
49
src/prototypes/oneos-h5-h2-order/.spec/feature-create.md
Normal file
49
src/prototypes/oneos-h5-h2-order/.spec/feature-create.md
Normal file
@@ -0,0 +1,49 @@
|
||||
# 功能:新增加氢记录
|
||||
|
||||
## 目标
|
||||
|
||||
站端通过手机浏览器上报一笔加氢记录:拍照识别 + 可校正,提交写入共享氢费 Store。
|
||||
|
||||
## 表单分区
|
||||
|
||||
### 1. 基础信息
|
||||
|
||||
| 字段 | 规则 |
|
||||
|------|------|
|
||||
| 加氢时间 * | 默认=点击「新增」时的当前时间;点击底部弹层选日期+时+分 |
|
||||
| 加氢站名称 | 只读,登录本站名称 |
|
||||
|
||||
### 2. 车牌识别
|
||||
|
||||
| 字段 | 规则 |
|
||||
|------|------|
|
||||
| 拍摄区 | 提示「请拍摄车牌」;相册/相机;选图后自动叠加**时间、地点**水印;OCR 模拟回填车牌 |
|
||||
| 车牌号 * | 占位「请拍摄或输入车牌号」;点击弹出车牌键盘 |
|
||||
| 车辆标签 | 有车牌后:系统车辆列表命中→「羚牛车辆」,否则→「非羚牛车辆」 |
|
||||
| 里程(km) | 选填;支持**从车机获取**(原型 Mock);识别车牌后可自动回填 |
|
||||
|
||||
### 3. 加氢机面板
|
||||
|
||||
| 字段 | 规则 |
|
||||
|------|------|
|
||||
| 拍摄区 | 提示「请拍摄清晰的加氢机照片」;选图后叠加**时间、地点**水印;OCR 模拟回填单价、量、总额 |
|
||||
| OCR 参考 | 展示站点信息维护的加氢机品牌/型号线索(见站点信息「加氢机品牌管理」) |
|
||||
| 氢气单价 * | 可改;变更后重算总额 |
|
||||
| 加氢量 * | 可改;变更后重算总额 |
|
||||
| 加氢总额(元) | 只读;= 单价 × 加氢量(两位小数);界面不展示公式文案 |
|
||||
|
||||
## 提交与拦截
|
||||
|
||||
- 必填齐全方可提交
|
||||
- 同站 + 同车牌 + 同加氢时间 → 拦截重复
|
||||
- 有填写内容点返回 → 二次确认防丢失
|
||||
- 已核对或已对账记录不可从此入口编辑(列表进详情后按钮隐藏)
|
||||
|
||||
## 验收
|
||||
|
||||
1. 时间默认正确且可选到分
|
||||
2. 车牌键盘可用;标签随车牌变化
|
||||
3. 车牌/面板照片右下角可见时间与地点水印
|
||||
4. 可从车机获取里程(有车牌时)
|
||||
5. 改单价或量后总额自动更新且不可手改
|
||||
6. 空表单可直接返回;有内容返回需确认
|
||||
37
src/prototypes/oneos-h5-h2-order/.spec/feature-detail.md
Normal file
37
src/prototypes/oneos-h5-h2-order/.spec/feature-detail.md
Normal file
@@ -0,0 +1,37 @@
|
||||
# 功能:详情、编辑与删除
|
||||
|
||||
## 目标
|
||||
|
||||
查看单笔加氢记录完整字段;在「未核对且未对账」时可编辑或删除。
|
||||
|
||||
## 详情展示
|
||||
|
||||
- 顶部:车牌、加氢时间、核对标签、对账标签
|
||||
- 指标条:加氢总额、加氢量
|
||||
- **识别原图**:车牌照片、加氢机面板照片(均为拍摄时叠加时间/地点水印后的原图;种子数据无实拍时用演示水印图)
|
||||
- 明细行:站点、车牌、里程、单价、核对/对账状态与时间
|
||||
|
||||
## 锁定规则
|
||||
|
||||
| 条件 | 结果 |
|
||||
|------|------|
|
||||
| 已对账 | 不可编辑/删除;提示已纳入站点对账单 |
|
||||
| 已核对(未对账) | 不可编辑/删除;提示能源部已核对 |
|
||||
| 未核对且未对账 | 可编辑、可删除 |
|
||||
|
||||
判定函数:`isOrderLocked`(核对或对账任一成立即锁)。
|
||||
|
||||
## 编辑
|
||||
|
||||
进入与「新增」同一套表单,预填当前值(含已存水印照片);提交走更新逻辑(仍校验重复键)。
|
||||
|
||||
## 删除
|
||||
|
||||
二次确认后从 Bridge 移除该行。
|
||||
|
||||
## 验收
|
||||
|
||||
1. 未核对未对账:底部有删除/编辑
|
||||
2. 已核对或已对账:无操作栏,有锁定说明
|
||||
3. 详情含对账信息;列表卡片不含对账
|
||||
4. 详情展示车牌与面板带水印原图(新上报提交后为实拍;种子行为演示图)
|
||||
40
src/prototypes/oneos-h5-h2-order/.spec/feature-list.md
Normal file
40
src/prototypes/oneos-h5-h2-order/.spec/feature-list.md
Normal file
@@ -0,0 +1,40 @@
|
||||
# 功能:本站列表与 KPI
|
||||
|
||||
## 目标
|
||||
|
||||
站端人员打开「加氢订单」后,一眼看到本站汇总与近期加氢记录,点击卡片进入详情。
|
||||
|
||||
## 页面结构
|
||||
|
||||
1. **当前站点**(只读):登录账号对应加氢站名称,无切站入口
|
||||
2. **KPI 三卡**:订单数 / 加氢量(kg) / 加氢金额
|
||||
3. **加氢记录列表**:按加氢时间倒序
|
||||
4. **底栏「新增」**:固定不遮挡卡片滚动区
|
||||
|
||||
## 列表卡片字段
|
||||
|
||||
| 展示 | 说明 |
|
||||
|------|------|
|
||||
| 车牌号 | 去掉尾缀 F 展示 |
|
||||
| 核对标签 | 未核对(橙)/ 已核对(绿) |
|
||||
| 加氢时间 | 精确到分 |
|
||||
| 加氢量 / 加氢总额 | 等宽数字 |
|
||||
| 单价 | 页脚左侧 |
|
||||
| 核对时间 | 仅已核对时页脚右侧显示 |
|
||||
|
||||
**不展示**:里程、对账状态(对账在站点对账单侧完成)。
|
||||
|
||||
## 交互
|
||||
|
||||
- 点击卡片 → 详情页
|
||||
- 点击底栏「新增」→ 新增表单(时间默认=点击时刻)
|
||||
|
||||
## 数据范围
|
||||
|
||||
仅 `stationName === 当前登录站` 的 Bridge 台账行。原型默认站:中国石油中油高新能源牙谷加油加氢站。
|
||||
|
||||
## 验收
|
||||
|
||||
1. 无切站控件
|
||||
2. KPI 与列表条数一致
|
||||
3. 滚动列表时底栏「新增」仍固定且不压住末条卡片
|
||||
@@ -0,0 +1,61 @@
|
||||
# 功能:手工台账上传
|
||||
|
||||
## 目标
|
||||
|
||||
站端每日上传纸质**手工台账照片**,作为系统电子加氢记录的核对依据。多日未操作时,可通过日历查看缺口并补传过往日期。
|
||||
|
||||
## 产品口径
|
||||
|
||||
| 项 | 规则 |
|
||||
|---|---|
|
||||
| 入口 | H5:底部 Tab「手工台账」;Web:顶栏「手工台账」 |
|
||||
| 站点范围 | 仅展示当前登录用户角色对应站点;单站人员仅 1 个、多站可切换、超级管理员可选全部(原型用标注状态切换演示,未接真实登录) |
|
||||
| 上传形态 | 仅图片(拍照/相册),可多张 |
|
||||
| 维度 | **加氢站 + 自然日(本地日历日)** 一份 |
|
||||
| 日历 | 月历自本站**首笔加氢记录日**起算:绿=已传、橙=未传;首笔之前无需补传;禁选未来日 |
|
||||
| 补传 | 允许为过往未传日期补传;已传日期仅可**追加**新图 |
|
||||
| 归档 | **确认上传后的图片进入已归档状态,不可删除**;未确认的草稿图仍可删除 |
|
||||
| 二次确认 | Web 点「确认上传/补传」先弹窗:「提交后将无法修改,是否确认手工台账照片无误」;确认后才写入 |
|
||||
| 拦截 | **未上传今日手工台账 → 禁止新增加氢记录**(编辑已有记录不拦;补传历史不替代今日校验) |
|
||||
| 数据 | 共享 `H2VehicleLedgerBridge` 内存 Store(未接真实 API);站名/编码解析见 Bridge.`h2BridgeResolveStationId` |
|
||||
|
||||
## 判定顺序(新增拦截)
|
||||
|
||||
| 优先级 | 条件 | 结果 |
|
||||
|--------|------|------|
|
||||
| 1 | 操作=编辑已有记录 | 不校验手工台账 |
|
||||
| 2 | 操作=新增,且目标站今日已有 ≥1 张台账图 | 允许进入新增 |
|
||||
| 3 | 操作=新增,今日未上传 | 提示并跳转手工台账 Tab |
|
||||
|
||||
## 日历与补传
|
||||
|
||||
| 规则 | 说明 |
|
||||
|------|------|
|
||||
| 数据源 | `listManualLedgersByStation`;当日有 ≥1 张图视为已上传 |
|
||||
| 业务起点 | 取本站 Bridge 加氢记录中最早 `hydrogenTime` 自然日;无记录则历史日均不要求补传 |
|
||||
| 未传计数 | 本月内 `max(月初, 首笔日)`~min(月末, 今日) 中未上传的天数 |
|
||||
| 点选 | 仅 `dateKey ≤ 今日`;选中后右侧/下方展示该日草稿图与上传按钮 |
|
||||
| 归档不可删 | Store 已有图强制保留;`upsertManualLedger` 仅追加新图,忽略删除已有图的请求 |
|
||||
| 与拦截关系 | 仅 **今日** 影响「禁止新增」;历史补传解决核对缺口,不放宽今日门禁 |
|
||||
|
||||
## 用户可见
|
||||
|
||||
- 今日状态双反馈(Web 放在右侧「当日台账」卡片内):未上传「今日尚未上传手工台账(YYYY-MM-DD)」异常态;已上传「今日已上传手工台账(YYYY-MM-DD)」正常态
|
||||
- 今日未上传:橙/黄提示 + Tab 红点
|
||||
- 日历:自首笔加氢日起绿/橙标记;首笔之前无橙点(无需补传);本月未传天数摘要
|
||||
- Web 右侧面板标题「手工台账」:空态提示;有图可点进全屏翻页预览并角标「已归档/待提交」;预览区内上传;底部确认前二次弹窗;提交后立即展示已归档缩略图;左右卡片等高
|
||||
|
||||
## 代码路径
|
||||
|
||||
- Bridge:`src/common/h2VehicleLedgerBridge.js`(`hasManualLedgerForDate` / `upsertManualLedger` / `listManualLedgersByStation`)
|
||||
- H5:`oneos-h5-h2-order` · `ManualLedgerPanel` + `utils/manual-ledger.ts`(`buildManualMonthCells` / `getFirstHydrogenDateKey`)
|
||||
- Web:`oneos-web-h2-station/pages/02-加氢记录.jsx`(手工台账 Tab 月历)
|
||||
|
||||
## 验收
|
||||
|
||||
1. 今日未上传时,H5/Web 点「新增」均被拦截并引导上传
|
||||
2. 上传至少一张图并确认后,可新增电子记录
|
||||
3. 日历自首笔加氢日起区分已传/未传;首笔之前不标未传、不计入补传;可点选范围内未传日补传
|
||||
4. 补传历史日后,该日日历变为已传;今日仍未传时新增仍被拦截
|
||||
5. 确认上传后的图显示已归档且不可删除;仅可追加补传
|
||||
6. H5 与 Web 共用同一 Store,一端上传另一端可见(同会话)
|
||||
30
src/prototypes/oneos-h5-h2-order/.spec/fleet-plate-tag.md
Normal file
30
src/prototypes/oneos-h5-h2-order/.spec/fleet-plate-tag.md
Normal file
@@ -0,0 +1,30 @@
|
||||
# 车牌「羚牛车辆 / 非羚牛车辆」标签
|
||||
|
||||
原型本地判定,未接真实车辆管理 API。
|
||||
|
||||
## 判定顺序
|
||||
|
||||
| 优先级 | 条件 | 结果 |
|
||||
|--------|------|------|
|
||||
| 1 | 车牌为空 | 不展示标签 |
|
||||
| 2 | 规范化后车牌 ∈ 本地系统车辆集合 | **羚牛车辆** |
|
||||
| 3 | 有车牌但不在集合中 | **非羚牛车辆** |
|
||||
|
||||
## 前置条件
|
||||
|
||||
- 识别(OCR)或键盘输入得到车牌后才展示。
|
||||
- 比较前去掉尾缀 `F`,统一大写。
|
||||
|
||||
## 数据源
|
||||
|
||||
- `utils/fleet-plates.ts` 内本地种子车牌集合(含加氢 Bridge 演示车牌与部分车辆管理样例)。
|
||||
- 正式环境应改为查询车辆管理 / 系统车辆列表接口。
|
||||
|
||||
## 用户可见结果
|
||||
|
||||
- 绿色标签「羚牛车辆」或橙色标签「非羚牛车辆」。
|
||||
- 不拦截提交(仅提示归属)。
|
||||
|
||||
## 代码路径
|
||||
|
||||
- `getVehicleTag` / `isLingniuVehicle` → `CreateWizard` 车牌行右侧标签。
|
||||
48
src/prototypes/oneos-h5-h2-order/.spec/reconcile-linkage.md
Normal file
48
src/prototypes/oneos-h5-h2-order/.spec/reconcile-linkage.md
Normal file
@@ -0,0 +1,48 @@
|
||||
# 加氢订单(H5)· 对账 / 核对联动规则
|
||||
|
||||
| 项 | 说明 |
|
||||
|---|---|
|
||||
| 代码路径 | Store:`src/common/h2VehicleLedgerBridge.js`;对账单:`oneos-web-h2-station-site`;PC 加氢记录:`oneos-web-h2-station`;车辆氢费明细:`vehicle-h2-fee-ledger` |
|
||||
| 规格全文 | [../vehicle-h2-fee-ledger/.spec/verify-reconcile.md](../vehicle-h2-fee-ledger/.spec/verify-reconcile.md) |
|
||||
| 数据源 | 原型本地种子 + 内存共享 Store(**未接真实 API**) |
|
||||
|
||||
---
|
||||
|
||||
## 1. 两套状态(判定优先级)
|
||||
|
||||
| 优先级 | 状态 | 字段 | 谁触发 | 用户可见 |
|
||||
|---|---|---|---|---|
|
||||
| 1 | **核对** | `verifyStatus` / `verifiedAt` | 车辆氢费明细 · **完成核对** | 未核对 / 已核对 + 核对时间 |
|
||||
| 2 | **对账** | `reconcileStatus` / `reconcileDate` | 站点信息 · **对账单提交** | 未对账 / 已对账 + 对账时间 |
|
||||
|
||||
> `reconciledAt` 仅作完成核对时的兼容写入,**不得**再用于判定「已对账」。
|
||||
|
||||
## 2. 数据流
|
||||
|
||||
```text
|
||||
站端 H5 / Web 新增加氢记录
|
||||
→ Bridge.upsertRow(verify=unverified,reconcile=pending;成本单价/量/总额)
|
||||
→ 车辆氢费明细可见
|
||||
|
||||
能源部 · 完成核对
|
||||
→ verifyStatus=verified + verifiedAt
|
||||
→ 站端同步「已核对」,禁改删
|
||||
|
||||
站点信息 · 对账单提交(仅已核对 ∧ 未对账)
|
||||
→ reconcileStatus=reconciled + reconcileDate + statementRecordId
|
||||
→ 站端 / 台账同步「已对账」
|
||||
```
|
||||
|
||||
## 3. 用户可见结果(H5)
|
||||
|
||||
| 结果 | 行为 |
|
||||
|---|---|
|
||||
| 未核对 | 可编辑、删除 |
|
||||
| 已核对未对账 | 只读;提示能源部已核对 |
|
||||
| 已对账 | 只读;提示已纳入对账单 |
|
||||
|
||||
## 4. 边界
|
||||
|
||||
- 站端上报默认未核对、未对账
|
||||
- 对账时间只认 `reconcileDate`(对账单回写)
|
||||
- 跨页联动依赖同浏览器会话共享 Store
|
||||
80
src/prototypes/oneos-h5-h2-order/.spec/requirements-prd.md
Normal file
80
src/prototypes/oneos-h5-h2-order/.spec/requirements-prd.md
Normal file
@@ -0,0 +1,80 @@
|
||||
# 加氢订单(H5)— 产品需求文档(PRD)
|
||||
|
||||
| 项 | 内容 |
|
||||
|---|---|
|
||||
| 文档版本 | v1.5 |
|
||||
| 模块名称 | 加氢站管理 → 加氢订单 |
|
||||
| 所属系统 | ONE-OS(加氢站手机浏览器) |
|
||||
| 交互原型 | `/prototypes/oneos-h5-h2-order` |
|
||||
| 设计基底 | 小羚羚 `xll-miniapp/DESIGN.md` |
|
||||
| 关联模块 | [站点信息](/prototypes/oneos-web-h2-station-site)、[加氢记录 Web](/prototypes/oneos-web-h2-station)、[车辆氢费明细](/prototypes/vehicle-h2-fee-ledger) |
|
||||
|
||||
---
|
||||
|
||||
## 1. 背景与目标
|
||||
|
||||
采购创建加氢站并绑定供应商、开放系统账号后,加氢站人员通过手机浏览器登录 OneOS,在「加氢订单」模块上报加氢记录。Web「加氢记录」为同一业务的 PC 入口(共享 Bridge 数据;PC 另有导出与预约加氢)。
|
||||
|
||||
每日须上传**手工台账**照片,作为电子记录的核对依据;未上传当日手工台账时不可新增加氢记录。手工台账页提供月历,标出已传/未传日期,支持补传过往缺口。
|
||||
|
||||
### 1.1 目标用户
|
||||
|
||||
加氢站操作人员(户外 / 站场手机使用)。
|
||||
|
||||
### 1.2 功能清单
|
||||
|
||||
| # | 功能 | 说明文档 |
|
||||
|---|---|---|
|
||||
| 1 | 本站列表与 KPI | [feature-list.md](./feature-list.md) |
|
||||
| 2 | 新增加氢记录 | [feature-create.md](./feature-create.md) |
|
||||
| 3 | 详情 / 编辑 / 删除 | [feature-detail.md](./feature-detail.md) |
|
||||
| 4 | **手工台账上传** | [feature-manual-ledger.md](./feature-manual-ledger.md) |
|
||||
| 5 | 羚牛车辆标签 | [fleet-plate-tag.md](./fleet-plate-tag.md) |
|
||||
| 6 | 核对与对账联动 | [reconcile-linkage.md](./reconcile-linkage.md) |
|
||||
|
||||
### 1.3 列表字段
|
||||
|
||||
加氢时间、车牌号、氢气单价、加氢量、加氢总额、核对状态;已核对时展示核对时间。里程在新增/详情展示(选填),列表不展示。列表不展示对账状态。
|
||||
|
||||
### 1.4 不做
|
||||
|
||||
真登录、真 OCR SDK、PLC、原生 App、后端联调。
|
||||
|
||||
---
|
||||
|
||||
## 2. 验收项
|
||||
|
||||
1. 菜单位于 OneOS → 加氢站管理 → 加氢订单
|
||||
2. 默认已登录本站;列表仅本站(无切站)
|
||||
3. 底栏 Tab:加氢订单 / 手工台账;月历可区分已传/未传并补传过往日;未上传今日手工台账不可新增;上传后可新增;时间默认点击新增时刻(到分)
|
||||
4. 已核对或已对账不可编辑/删除;未核对未对账可
|
||||
5. 能源部完成核对后同步「已核对」;站点对账单提交后同步「已对账」+ 对账时间
|
||||
6. 同站同车牌同加氢时间重复保存被拦截
|
||||
7. Web「加氢记录」与 H5「加氢订单」手工台账逻辑一致(同 Store)
|
||||
8. 车牌/面板拍摄预览含水印(时间、地点=本站名称);里程可从车机获取(Mock)
|
||||
9. 面板 OCR 可展示站点信息维护的加氢机品牌型号线索
|
||||
10. 详情页展示车牌与面板带水印原图
|
||||
|
||||
---
|
||||
|
||||
## 3. 复杂逻辑摘要
|
||||
|
||||
| 主题 | 摘要 | 全文 |
|
||||
|---|---|---|
|
||||
| 对账 / 核对 | 核对≠对账;触发方不同 | [reconcile-linkage.md](./reconcile-linkage.md)、[车辆氢费 verify-reconcile](../vehicle-h2-fee-ledger/.spec/verify-reconcile.md) |
|
||||
| 重复键 | 与 Web 共用 Bridge | [Web 数据模型](../oneos-web-h2-station/.spec/record-data-model.md) |
|
||||
| 羚牛车辆标签 | 本地系统车辆集合判定 | [fleet-plate-tag.md](./fleet-plate-tag.md) |
|
||||
| 总额 | 单价×加氢量自动算,界面不展示公式 | [feature-create.md](./feature-create.md) |
|
||||
| 手工台账 | 按站+自然日上传图片;月历标已传/未传可补传;未上传今日禁新增 | [feature-manual-ledger.md](./feature-manual-ledger.md) |
|
||||
|
||||
---
|
||||
|
||||
## 4. 页面与标注对照
|
||||
|
||||
| 页面 pageId | 主要能力 |
|
||||
|---|---|
|
||||
| `list` | 站点头、KPI、订单卡片、底栏新增 |
|
||||
| `create` | 时间选择、站名、车牌键盘、面板 OCR、金额字段 |
|
||||
| `detail` | 详情字段、锁定说明、编辑/删除 |
|
||||
|
||||
标注数据:`annotation-source.json`(由 `scripts/build-annotation-source.mjs` 从本目录 Markdown 生成)。
|
||||
513
src/prototypes/oneos-h5-h2-order/annotation-source.json
Normal file
513
src/prototypes/oneos-h5-h2-order/annotation-source.json
Normal file
@@ -0,0 +1,513 @@
|
||||
{
|
||||
"documentVersion": 1,
|
||||
"format": "axhub-annotation-source",
|
||||
"data": {
|
||||
"version": 2,
|
||||
"prototypeName": "oneos-h5-h2-order",
|
||||
"pageId": "list",
|
||||
"updatedAt": 1784280448632,
|
||||
"nodes": [
|
||||
{
|
||||
"images": [],
|
||||
"controls": [],
|
||||
"createdAt": 1784280448632,
|
||||
"updatedAt": 1784280448632,
|
||||
"hasMarkdown": true,
|
||||
"annotationText": "",
|
||||
"id": "h5-hero",
|
||||
"index": 1,
|
||||
"title": "当前站点",
|
||||
"pageId": "list",
|
||||
"color": "#7AB929",
|
||||
"locator": {
|
||||
"selectors": [
|
||||
"[data-annotation-id='h5-hero']",
|
||||
".h5-hero"
|
||||
],
|
||||
"fingerprint": "hero|list",
|
||||
"path": []
|
||||
}
|
||||
},
|
||||
{
|
||||
"images": [],
|
||||
"controls": [],
|
||||
"createdAt": 1784280448632,
|
||||
"updatedAt": 1784280448632,
|
||||
"hasMarkdown": true,
|
||||
"annotationText": "",
|
||||
"id": "h5-summary",
|
||||
"index": 2,
|
||||
"title": "本站 KPI",
|
||||
"pageId": "list",
|
||||
"color": "#0E8A7B",
|
||||
"locator": {
|
||||
"selectors": [
|
||||
"[data-annotation-id='h5-summary']",
|
||||
".h5-summary"
|
||||
],
|
||||
"fingerprint": "summary|list",
|
||||
"path": []
|
||||
}
|
||||
},
|
||||
{
|
||||
"images": [],
|
||||
"controls": [],
|
||||
"createdAt": 1784280448632,
|
||||
"updatedAt": 1784280448632,
|
||||
"hasMarkdown": true,
|
||||
"annotationText": "",
|
||||
"id": "h5-card",
|
||||
"index": 3,
|
||||
"title": "订单卡片",
|
||||
"pageId": "list",
|
||||
"color": "#FF7D00",
|
||||
"locator": {
|
||||
"selectors": [
|
||||
"[data-annotation-id='h5-card']",
|
||||
".h5-card"
|
||||
],
|
||||
"fingerprint": "card|list",
|
||||
"path": []
|
||||
}
|
||||
},
|
||||
{
|
||||
"images": [],
|
||||
"controls": [],
|
||||
"createdAt": 1784280448632,
|
||||
"updatedAt": 1784280448632,
|
||||
"hasMarkdown": true,
|
||||
"annotationText": "",
|
||||
"id": "h5-fab",
|
||||
"index": 4,
|
||||
"title": "底栏新增",
|
||||
"pageId": "list",
|
||||
"color": "#7AB929",
|
||||
"locator": {
|
||||
"selectors": [
|
||||
"[data-annotation-id='h5-fab']",
|
||||
".h5-fab"
|
||||
],
|
||||
"fingerprint": "fab|list",
|
||||
"path": []
|
||||
}
|
||||
},
|
||||
{
|
||||
"images": [],
|
||||
"controls": [],
|
||||
"createdAt": 1784280448632,
|
||||
"updatedAt": 1784280448632,
|
||||
"hasMarkdown": true,
|
||||
"annotationText": "",
|
||||
"id": "h5-time",
|
||||
"index": 5,
|
||||
"title": "加氢时间",
|
||||
"pageId": "create",
|
||||
"color": "#7AB929",
|
||||
"locator": {
|
||||
"selectors": [
|
||||
"[data-annotation-id='h5-time']",
|
||||
"#h5-time"
|
||||
],
|
||||
"fingerprint": "field|h5-time",
|
||||
"path": []
|
||||
}
|
||||
},
|
||||
{
|
||||
"images": [],
|
||||
"controls": [],
|
||||
"createdAt": 1784280448632,
|
||||
"updatedAt": 1784280448632,
|
||||
"hasMarkdown": true,
|
||||
"annotationText": "",
|
||||
"id": "h5-station",
|
||||
"index": 6,
|
||||
"title": "加氢站名称",
|
||||
"pageId": "create",
|
||||
"color": "#86909C",
|
||||
"locator": {
|
||||
"selectors": [
|
||||
"[data-annotation-id='h5-station']",
|
||||
"#h5-station"
|
||||
],
|
||||
"fingerprint": "field|h5-station",
|
||||
"path": []
|
||||
}
|
||||
},
|
||||
{
|
||||
"images": [],
|
||||
"controls": [],
|
||||
"createdAt": 1784280448632,
|
||||
"updatedAt": 1784280448632,
|
||||
"hasMarkdown": true,
|
||||
"annotationText": "",
|
||||
"id": "h5-plate",
|
||||
"index": 7,
|
||||
"title": "车牌号",
|
||||
"pageId": "create",
|
||||
"color": "#FF7D00",
|
||||
"locator": {
|
||||
"selectors": [
|
||||
"[data-annotation-id='h5-plate']",
|
||||
"#h5-plate"
|
||||
],
|
||||
"fingerprint": "field|h5-plate",
|
||||
"path": []
|
||||
}
|
||||
},
|
||||
{
|
||||
"images": [],
|
||||
"controls": [],
|
||||
"createdAt": 1784280448632,
|
||||
"updatedAt": 1784280448632,
|
||||
"hasMarkdown": true,
|
||||
"annotationText": "",
|
||||
"id": "h5-mileage",
|
||||
"index": 8,
|
||||
"title": "里程",
|
||||
"pageId": "create",
|
||||
"color": "#0E8A7B",
|
||||
"locator": {
|
||||
"selectors": [
|
||||
"[data-annotation-id='h5-mileage']",
|
||||
"#h5-mileage"
|
||||
],
|
||||
"fingerprint": "field|h5-mileage",
|
||||
"path": []
|
||||
}
|
||||
},
|
||||
{
|
||||
"images": [],
|
||||
"controls": [],
|
||||
"createdAt": 1784280448632,
|
||||
"updatedAt": 1784280448632,
|
||||
"hasMarkdown": true,
|
||||
"annotationText": "",
|
||||
"id": "h5-dispenser-brands",
|
||||
"index": 9,
|
||||
"title": "加氢机品牌参考",
|
||||
"pageId": "create",
|
||||
"color": "#7C3AED",
|
||||
"locator": {
|
||||
"selectors": [
|
||||
"[data-annotation-id='h5-dispenser-brands']",
|
||||
".h5-brand-hint"
|
||||
],
|
||||
"fingerprint": "hint|dispenser-brands",
|
||||
"path": []
|
||||
}
|
||||
},
|
||||
{
|
||||
"images": [],
|
||||
"controls": [],
|
||||
"createdAt": 1784280448632,
|
||||
"updatedAt": 1784280448632,
|
||||
"hasMarkdown": true,
|
||||
"annotationText": "",
|
||||
"id": "h5-price",
|
||||
"index": 10,
|
||||
"title": "氢气单价",
|
||||
"pageId": "create",
|
||||
"color": "#7AB929",
|
||||
"locator": {
|
||||
"selectors": [
|
||||
"[data-annotation-id='h5-price']",
|
||||
"#h5-price"
|
||||
],
|
||||
"fingerprint": "field|h5-price",
|
||||
"path": []
|
||||
}
|
||||
},
|
||||
{
|
||||
"images": [],
|
||||
"controls": [],
|
||||
"createdAt": 1784280448632,
|
||||
"updatedAt": 1784280448632,
|
||||
"hasMarkdown": true,
|
||||
"annotationText": "",
|
||||
"id": "h5-kg",
|
||||
"index": 11,
|
||||
"title": "加氢量",
|
||||
"pageId": "create",
|
||||
"color": "#7AB929",
|
||||
"locator": {
|
||||
"selectors": [
|
||||
"[data-annotation-id='h5-kg']",
|
||||
"#h5-kg"
|
||||
],
|
||||
"fingerprint": "field|h5-kg",
|
||||
"path": []
|
||||
}
|
||||
},
|
||||
{
|
||||
"images": [],
|
||||
"controls": [],
|
||||
"createdAt": 1784280448632,
|
||||
"updatedAt": 1784280448632,
|
||||
"hasMarkdown": true,
|
||||
"annotationText": "",
|
||||
"id": "h5-total-label",
|
||||
"index": 12,
|
||||
"title": "加氢总额",
|
||||
"pageId": "create",
|
||||
"color": "#0E8A7B",
|
||||
"locator": {
|
||||
"selectors": [
|
||||
"[data-annotation-id='h5-total-label']",
|
||||
"#h5-total"
|
||||
],
|
||||
"fingerprint": "field|h5-total",
|
||||
"path": []
|
||||
}
|
||||
},
|
||||
{
|
||||
"images": [],
|
||||
"controls": [],
|
||||
"createdAt": 1784280448632,
|
||||
"updatedAt": 1784280448632,
|
||||
"hasMarkdown": true,
|
||||
"annotationText": "",
|
||||
"id": "h5-detail",
|
||||
"index": 13,
|
||||
"title": "记录详情",
|
||||
"pageId": "detail",
|
||||
"color": "#FF7D00",
|
||||
"locator": {
|
||||
"selectors": [
|
||||
"[data-annotation-id='h5-detail']",
|
||||
".h5-panel--detail"
|
||||
],
|
||||
"fingerprint": "detail|panel",
|
||||
"path": []
|
||||
}
|
||||
},
|
||||
{
|
||||
"images": [],
|
||||
"controls": [],
|
||||
"createdAt": 1784280448632,
|
||||
"updatedAt": 1784280448632,
|
||||
"hasMarkdown": true,
|
||||
"annotationText": "",
|
||||
"id": "h5-detail-photos",
|
||||
"index": 14,
|
||||
"title": "识别原图",
|
||||
"pageId": "detail",
|
||||
"color": "#0E8A7B",
|
||||
"locator": {
|
||||
"selectors": [
|
||||
"[data-annotation-id='h5-detail-photos']",
|
||||
".h5-detail-photos"
|
||||
],
|
||||
"fingerprint": "detail|photos",
|
||||
"path": []
|
||||
}
|
||||
},
|
||||
{
|
||||
"images": [],
|
||||
"controls": [],
|
||||
"createdAt": 1784280448632,
|
||||
"updatedAt": 1784280448632,
|
||||
"hasMarkdown": true,
|
||||
"annotationText": "",
|
||||
"id": "h5-manual",
|
||||
"index": 15,
|
||||
"title": "手工台账",
|
||||
"pageId": "manual",
|
||||
"color": "#7AB929",
|
||||
"locator": {
|
||||
"selectors": [
|
||||
"[data-annotation-id='h5-manual']",
|
||||
".h5-manual"
|
||||
],
|
||||
"fingerprint": "manual|panel",
|
||||
"path": []
|
||||
}
|
||||
},
|
||||
{
|
||||
"images": [],
|
||||
"controls": [],
|
||||
"createdAt": 1784280448632,
|
||||
"updatedAt": 1784280448632,
|
||||
"hasMarkdown": true,
|
||||
"annotationText": "",
|
||||
"id": "h5-manual-calendar",
|
||||
"index": 16,
|
||||
"title": "台账日历",
|
||||
"pageId": "manual",
|
||||
"color": "#0E8A7B",
|
||||
"locator": {
|
||||
"selectors": [
|
||||
"[data-annotation-id='h5-manual-calendar']",
|
||||
".h5-cal-grid"
|
||||
],
|
||||
"fingerprint": "manual|calendar",
|
||||
"path": []
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
"markdownMap": {
|
||||
"h5-hero": "## 当前站点\n\n只读展示登录账号对应加氢站,列表页不提供切站。\n\n详见 [本站列表](feature-list)。",
|
||||
"h5-summary": "## 本站 KPI\n\n订单数 / 加氢量(kg) / 加氢金额,随本站列表实时汇总。\n\n详见功能说明「本站列表与 KPI」。",
|
||||
"h5-card": "# 功能:本站列表与 KPI\n\n## 目标\n\n站端人员打开「加氢订单」后,一眼看到本站汇总与近期加氢记录,点击卡片进入详情。\n\n## 页面结构\n\n1. **当前站点**(只读):登录账号对应加氢站名称,无切站入口 \n2. **KPI 三卡**:订单数 / 加氢量(kg) / 加氢金额 \n3. **加氢记录列表**:按加氢时间倒序 \n4. **底栏「新增」**:固定不遮挡卡片滚动区 \n\n## 列表卡片字段\n\n| 展示 | 说明 |\n|------|------|\n| 车牌号 | 去掉尾缀 F 展示 |\n| 核对标签 | 未核对(橙)/ 已核对(绿) |\n| 加氢时间 | 精确到分 |\n| 加氢量 / 加氢总额 | 等宽数字 |\n| 单价 | 页脚左侧 |\n| 核对时间 | 仅已核对时页脚右侧显示 |\n\n**不展示**:里程、对账状态(对账在站点对账单侧完成)。\n\n## 交互\n\n- 点击卡片 → 详情页 \n- 点击底栏「新增」→ 新增表单(时间默认=点击时刻) \n\n## 数据范围\n\n仅 `stationName === 当前登录站` 的 Bridge 台账行。原型默认站:中国石油中油高新能源牙谷加油加氢站。\n\n## 验收\n\n1. 无切站控件 \n2. KPI 与列表条数一致 \n3. 滚动列表时底栏「新增」仍固定且不压住末条卡片 \n",
|
||||
"h5-fab": "## 底栏新增\n\n固定在列表底部,不遮挡卡片滚动区。点击进入新增表单,加氢时间默认=点击时刻。\n\n详见功能说明「新增加氢记录」。",
|
||||
"h5-time": "## 加氢时间(必填)\n\n默认=点击「新增」时的当前时间;点击后底部弹层选择日期 + 时 + 分。",
|
||||
"h5-station": "## 加氢站名称\n\n只读。默认显示当前登录账号对应加氢站名称,不可切换。",
|
||||
"h5-plate": "# 车牌「羚牛车辆 / 非羚牛车辆」标签\n\n原型本地判定,未接真实车辆管理 API。\n\n## 判定顺序\n\n| 优先级 | 条件 | 结果 |\n|--------|------|------|\n| 1 | 车牌为空 | 不展示标签 |\n| 2 | 规范化后车牌 ∈ 本地系统车辆集合 | **羚牛车辆** |\n| 3 | 有车牌但不在集合中 | **非羚牛车辆** |\n\n## 前置条件\n\n- 识别(OCR)或键盘输入得到车牌后才展示。\n- 比较前去掉尾缀 `F`,统一大写。\n\n## 数据源\n\n- `utils/fleet-plates.ts` 内本地种子车牌集合(含加氢 Bridge 演示车牌与部分车辆管理样例)。\n- 正式环境应改为查询车辆管理 / 系统车辆列表接口。\n\n## 用户可见结果\n\n- 绿色标签「羚牛车辆」或橙色标签「非羚牛车辆」。\n- 不拦截提交(仅提示归属)。\n\n## 代码路径\n\n- `getVehicleTag` / `isLingniuVehicle` → `CreateWizard` 车牌行右侧标签。\n",
|
||||
"h5-mileage": "## 里程(km)\n\n选填。支持「从车机获取」(原型 Mock);识别车牌后可自动回填。正式环境对接车机 / T-Box。\n\n详见 [新增加氢记录](feature-create)。",
|
||||
"h5-dispenser-brands": "## 加氢机品牌参考\n\n展示站点信息「加氢机品牌管理」维护的品牌·型号,供面板 OCR 模型判断参考。数据源:`h2DispenserBrandStore`。",
|
||||
"h5-price": "## 氢气单价(必填)\n\n可 OCR 识别后校正;变更后自动重算加氢总额(单价×加氢量)。",
|
||||
"h5-kg": "## 加氢量(必填)\n\n可 OCR 识别后校正;变更后自动重算加氢总额。",
|
||||
"h5-total-label": "## 加氢总额(元)\n\n只读展示;由单价×加氢量自动计算(两位小数)。界面标签不展示公式文案。",
|
||||
"h5-detail": "# 功能:详情、编辑与删除\n\n## 目标\n\n查看单笔加氢记录完整字段;在「未核对且未对账」时可编辑或删除。\n\n## 详情展示\n\n- 顶部:车牌、加氢时间、核对标签、对账标签 \n- 指标条:加氢总额、加氢量 \n- **识别原图**:车牌照片、加氢机面板照片(均为拍摄时叠加时间/地点水印后的原图;种子数据无实拍时用演示水印图) \n- 明细行:站点、车牌、里程、单价、核对/对账状态与时间 \n\n## 锁定规则\n\n| 条件 | 结果 |\n|------|------|\n| 已对账 | 不可编辑/删除;提示已纳入站点对账单 |\n| 已核对(未对账) | 不可编辑/删除;提示能源部已核对 |\n| 未核对且未对账 | 可编辑、可删除 |\n\n判定函数:`isOrderLocked`(核对或对账任一成立即锁)。\n\n## 编辑\n\n进入与「新增」同一套表单,预填当前值(含已存水印照片);提交走更新逻辑(仍校验重复键)。\n\n## 删除\n\n二次确认后从 Bridge 移除该行。\n\n## 验收\n\n1. 未核对未对账:底部有删除/编辑 \n2. 已核对或已对账:无操作栏,有锁定说明 \n3. 详情含对账信息;列表卡片不含对账 \n4. 详情展示车牌与面板带水印原图(新上报提交后为实拍;种子行为演示图) \n",
|
||||
"h5-detail-photos": "## 识别原图(含水印)\n\n详情展示车牌识别、加氢机面板的原始照片;照片在拍摄/选图时已叠加时间与地点水印并随记录保存。种子数据无实拍时用演示水印图。\n\n详见 [详情编辑删除](feature-detail)。",
|
||||
"h5-manual": "# 功能:手工台账上传\n\n## 目标\n\n站端每日上传纸质**手工台账照片**,作为系统电子加氢记录的核对依据。多日未操作时,可通过日历查看缺口并补传过往日期。\n\n## 产品口径\n\n| 项 | 规则 |\n|---|---|\n| 入口 | H5:底部 Tab「手工台账」;Web:顶栏「手工台账」 |\n| 上传形态 | 仅图片(拍照/相册),可多张 |\n| 维度 | **加氢站 + 自然日(本地日历日)** 一份 |\n| 日历 | 月历自本站**首笔加氢记录日**起算:绿=已传、橙=未传;首笔之前无需补传;禁选未来日 |\n| 补传 | 允许为过往未传日期补传;已传日期仅可**追加**新图 |\n| 归档 | **确认上传后的图片进入已归档状态,不可删除**;未确认的草稿图仍可删除 |\n| 拦截 | **未上传今日手工台账 → 禁止新增加氢记录**(编辑已有记录不拦;补传历史不替代今日校验) |\n| 数据 | 共享 `H2VehicleLedgerBridge` 内存 Store(未接真实 API) |\n\n## 判定顺序(新增拦截)\n\n| 优先级 | 条件 | 结果 |\n|--------|------|------|\n| 1 | 操作=编辑已有记录 | 不校验手工台账 |\n| 2 | 操作=新增,且目标站今日已有 ≥1 张台账图 | 允许进入新增 |\n| 3 | 操作=新增,今日未上传 | 提示并跳转手工台账 Tab |\n\n## 日历与补传\n\n| 规则 | 说明 |\n|------|------|\n| 数据源 | `listManualLedgersByStation`;当日有 ≥1 张图视为已上传 |\n| 业务起点 | 取本站 Bridge 加氢记录中最早 `hydrogenTime` 自然日;无记录则历史日均不要求补传 |\n| 未传计数 | 本月内 `max(月初, 首笔日)`~min(月末, 今日) 中未上传的天数 |\n| 点选 | 仅 `dateKey ≤ 今日`;选中后右侧/下方展示该日草稿图与上传按钮 |\n| 归档不可删 | Store 已有图强制保留;`upsertManualLedger` 仅追加新图,忽略删除已有图的请求 |\n| 与拦截关系 | 仅 **今日** 影响「禁止新增」;历史补传解决核对缺口,不放宽今日门禁 |\n\n## 用户可见\n\n- 今日未上传:橙/黄提示条 + Tab 红点 \n- 日历:自首笔加氢日起绿/橙标记;首笔之前无橙点(无需补传);本月未传天数摘要 \n- 选中日:上传区标题为该日期;已归档图显示「已归档」无删除;仅未确认草稿可删;已有台账时主按钮为「确认补传」\n\n## 代码路径\n\n- Bridge:`src/common/h2VehicleLedgerBridge.js`(`hasManualLedgerForDate` / `upsertManualLedger` / `listManualLedgersByStation`) \n- H5:`oneos-h5-h2-order` · `ManualLedgerPanel` + `utils/manual-ledger.ts`(`buildManualMonthCells` / `getFirstHydrogenDateKey`) \n- Web:`oneos-web-h2-station/pages/02-加氢记录.jsx`(手工台账 Tab 月历) \n\n## 验收\n\n1. 今日未上传时,H5/Web 点「新增」均被拦截并引导上传 \n2. 上传至少一张图并确认后,可新增电子记录 \n3. 日历自首笔加氢日起区分已传/未传;首笔之前不标未传、不计入补传;可点选范围内未传日补传 \n4. 补传历史日后,该日日历变为已传;今日仍未传时新增仍被拦截 \n5. 确认上传后的图显示已归档且不可删除;仅可追加补传 \n6. H5 与 Web 共用同一 Store,一端上传另一端可见(同会话) \n",
|
||||
"h5-manual-calendar": "## 台账日历\n\n自本站首笔加氢记录日起:绿=已上传,橙=未上传;首笔之前无需补传。禁选未来日。点选范围内未传日可补传。仅「今日」是否上传影响新增加氢记录。\n\n详见 [手工台账上传](feature-manual-ledger)。"
|
||||
},
|
||||
"assetMap": {},
|
||||
"directory": {
|
||||
"nodes": [
|
||||
{
|
||||
"type": "folder",
|
||||
"id": "h5-doc-root",
|
||||
"title": "加氢订单(H5)说明",
|
||||
"defaultExpanded": true,
|
||||
"children": [
|
||||
{
|
||||
"type": "markdown",
|
||||
"id": "h5-doc-prd",
|
||||
"title": "PRD 全文",
|
||||
"markdown": "# 加氢订单(H5)— 产品需求文档(PRD)\n\n| 项 | 内容 |\n|---|---|\n| 文档版本 | v1.5 |\n| 模块名称 | 加氢站管理 → 加氢订单 |\n| 所属系统 | ONE-OS(加氢站手机浏览器) |\n| 交互原型 | `/prototypes/oneos-h5-h2-order` |\n| 设计基底 | 小羚羚 `xll-miniapp/DESIGN.md` |\n| 关联模块 | [站点信息](/prototypes/oneos-web-h2-station-site)、[加氢记录 Web](/prototypes/oneos-web-h2-station)、[车辆氢费明细](/prototypes/vehicle-h2-fee-ledger) |\n\n---\n\n## 1. 背景与目标\n\n采购创建加氢站并绑定供应商、开放系统账号后,加氢站人员通过手机浏览器登录 OneOS,在「加氢订单」模块上报加氢记录。Web「加氢记录」为同一业务的 PC 入口(共享 Bridge 数据;PC 另有导出与预约加氢)。\n\n每日须上传**手工台账**照片,作为电子记录的核对依据;未上传当日手工台账时不可新增加氢记录。手工台账页提供月历,标出已传/未传日期,支持补传过往缺口。\n\n### 1.1 目标用户\n\n加氢站操作人员(户外 / 站场手机使用)。\n\n### 1.2 功能清单\n\n| # | 功能 | 说明文档 |\n|---|---|---|\n| 1 | 本站列表与 KPI | [feature-list.md](./feature-list.md) |\n| 2 | 新增加氢记录 | [feature-create.md](./feature-create.md) |\n| 3 | 详情 / 编辑 / 删除 | [feature-detail.md](./feature-detail.md) |\n| 4 | **手工台账上传** | [feature-manual-ledger.md](./feature-manual-ledger.md) |\n| 5 | 羚牛车辆标签 | [fleet-plate-tag.md](./fleet-plate-tag.md) |\n| 6 | 核对与对账联动 | [reconcile-linkage.md](./reconcile-linkage.md) |\n\n### 1.3 列表字段\n\n加氢时间、车牌号、氢气单价、加氢量、加氢总额、核对状态;已核对时展示核对时间。里程在新增/详情展示(选填),列表不展示。列表不展示对账状态。\n\n### 1.4 不做\n\n真登录、真 OCR SDK、PLC、原生 App、后端联调。\n\n---\n\n## 2. 验收项\n\n1. 菜单位于 OneOS → 加氢站管理 → 加氢订单 \n2. 默认已登录本站;列表仅本站(无切站) \n3. 底栏 Tab:加氢订单 / 手工台账;月历可区分已传/未传并补传过往日;未上传今日手工台账不可新增;上传后可新增;时间默认点击新增时刻(到分) \n4. 已核对或已对账不可编辑/删除;未核对未对账可 \n5. 能源部完成核对后同步「已核对」;站点对账单提交后同步「已对账」+ 对账时间 \n6. 同站同车牌同加氢时间重复保存被拦截 \n7. Web「加氢记录」与 H5「加氢订单」手工台账逻辑一致(同 Store) \n8. 车牌/面板拍摄预览含水印(时间、地点=本站名称);里程可从车机获取(Mock) \n9. 面板 OCR 可展示站点信息维护的加氢机品牌型号线索 \n10. 详情页展示车牌与面板带水印原图 \n\n---\n\n## 3. 复杂逻辑摘要\n\n| 主题 | 摘要 | 全文 |\n|---|---|---|\n| 对账 / 核对 | 核对≠对账;触发方不同 | [reconcile-linkage.md](./reconcile-linkage.md)、[车辆氢费 verify-reconcile](../vehicle-h2-fee-ledger/.spec/verify-reconcile.md) |\n| 重复键 | 与 Web 共用 Bridge | [Web 数据模型](../oneos-web-h2-station/.spec/record-data-model.md) |\n| 羚牛车辆标签 | 本地系统车辆集合判定 | [fleet-plate-tag.md](./fleet-plate-tag.md) |\n| 总额 | 单价×加氢量自动算,界面不展示公式 | [feature-create.md](./feature-create.md) |\n| 手工台账 | 按站+自然日上传图片;月历标已传/未传可补传;未上传今日禁新增 | [feature-manual-ledger.md](./feature-manual-ledger.md) |\n\n---\n\n## 4. 页面与标注对照\n\n| 页面 pageId | 主要能力 |\n|---|---|\n| `list` | 站点头、KPI、订单卡片、底栏新增 |\n| `create` | 时间选择、站名、车牌键盘、面板 OCR、金额字段 |\n| `detail` | 详情字段、锁定说明、编辑/删除 |\n\n标注数据:`annotation-source.json`(由 `scripts/build-annotation-source.mjs` 从本目录 Markdown 生成)。\n",
|
||||
"markdownPath": ".spec/requirements-prd.md"
|
||||
},
|
||||
{
|
||||
"type": "folder",
|
||||
"id": "h5-doc-features",
|
||||
"title": "功能说明",
|
||||
"defaultExpanded": true,
|
||||
"children": [
|
||||
{
|
||||
"type": "markdown",
|
||||
"id": "h5-doc-list",
|
||||
"title": "本站列表与 KPI",
|
||||
"markdown": "# 功能:本站列表与 KPI\n\n## 目标\n\n站端人员打开「加氢订单」后,一眼看到本站汇总与近期加氢记录,点击卡片进入详情。\n\n## 页面结构\n\n1. **当前站点**(只读):登录账号对应加氢站名称,无切站入口 \n2. **KPI 三卡**:订单数 / 加氢量(kg) / 加氢金额 \n3. **加氢记录列表**:按加氢时间倒序 \n4. **底栏「新增」**:固定不遮挡卡片滚动区 \n\n## 列表卡片字段\n\n| 展示 | 说明 |\n|------|------|\n| 车牌号 | 去掉尾缀 F 展示 |\n| 核对标签 | 未核对(橙)/ 已核对(绿) |\n| 加氢时间 | 精确到分 |\n| 加氢量 / 加氢总额 | 等宽数字 |\n| 单价 | 页脚左侧 |\n| 核对时间 | 仅已核对时页脚右侧显示 |\n\n**不展示**:里程、对账状态(对账在站点对账单侧完成)。\n\n## 交互\n\n- 点击卡片 → 详情页 \n- 点击底栏「新增」→ 新增表单(时间默认=点击时刻) \n\n## 数据范围\n\n仅 `stationName === 当前登录站` 的 Bridge 台账行。原型默认站:中国石油中油高新能源牙谷加油加氢站。\n\n## 验收\n\n1. 无切站控件 \n2. KPI 与列表条数一致 \n3. 滚动列表时底栏「新增」仍固定且不压住末条卡片 \n",
|
||||
"markdownPath": ".spec/feature-list.md"
|
||||
},
|
||||
{
|
||||
"type": "markdown",
|
||||
"id": "h5-doc-create",
|
||||
"title": "新增加氢记录",
|
||||
"markdown": "# 功能:新增加氢记录\n\n## 目标\n\n站端通过手机浏览器上报一笔加氢记录:拍照识别 + 可校正,提交写入共享氢费 Store。\n\n## 表单分区\n\n### 1. 基础信息\n\n| 字段 | 规则 |\n|------|------|\n| 加氢时间 * | 默认=点击「新增」时的当前时间;点击底部弹层选日期+时+分 |\n| 加氢站名称 | 只读,登录本站名称 |\n\n### 2. 车牌识别\n\n| 字段 | 规则 |\n|------|------|\n| 拍摄区 | 提示「请拍摄车牌」;相册/相机;选图后自动叠加**时间、地点**水印;OCR 模拟回填车牌 |\n| 车牌号 * | 占位「请拍摄或输入车牌号」;点击弹出车牌键盘 |\n| 车辆标签 | 有车牌后:系统车辆列表命中→「羚牛车辆」,否则→「非羚牛车辆」 |\n| 里程(km) | 选填;支持**从车机获取**(原型 Mock);识别车牌后可自动回填 |\n\n### 3. 加氢机面板\n\n| 字段 | 规则 |\n|------|------|\n| 拍摄区 | 提示「请拍摄清晰的加氢机照片」;选图后叠加**时间、地点**水印;OCR 模拟回填单价、量、总额 |\n| OCR 参考 | 展示站点信息维护的加氢机品牌/型号线索(见站点信息「加氢机品牌管理」) |\n| 氢气单价 * | 可改;变更后重算总额 |\n| 加氢量 * | 可改;变更后重算总额 |\n| 加氢总额(元) | 只读;= 单价 × 加氢量(两位小数);界面不展示公式文案 |\n\n## 提交与拦截\n\n- 必填齐全方可提交 \n- 同站 + 同车牌 + 同加氢时间 → 拦截重复 \n- 有填写内容点返回 → 二次确认防丢失 \n- 已核对或已对账记录不可从此入口编辑(列表进详情后按钮隐藏) \n\n## 验收\n\n1. 时间默认正确且可选到分 \n2. 车牌键盘可用;标签随车牌变化 \n3. 车牌/面板照片右下角可见时间与地点水印 \n4. 可从车机获取里程(有车牌时) \n5. 改单价或量后总额自动更新且不可手改 \n6. 空表单可直接返回;有内容返回需确认 \n",
|
||||
"markdownPath": ".spec/feature-create.md"
|
||||
},
|
||||
{
|
||||
"type": "markdown",
|
||||
"id": "h5-doc-manual",
|
||||
"title": "手工台账上传",
|
||||
"markdown": "# 功能:手工台账上传\n\n## 目标\n\n站端每日上传纸质**手工台账照片**,作为系统电子加氢记录的核对依据。多日未操作时,可通过日历查看缺口并补传过往日期。\n\n## 产品口径\n\n| 项 | 规则 |\n|---|---|\n| 入口 | H5:底部 Tab「手工台账」;Web:顶栏「手工台账」 |\n| 上传形态 | 仅图片(拍照/相册),可多张 |\n| 维度 | **加氢站 + 自然日(本地日历日)** 一份 |\n| 日历 | 月历自本站**首笔加氢记录日**起算:绿=已传、橙=未传;首笔之前无需补传;禁选未来日 |\n| 补传 | 允许为过往未传日期补传;已传日期仅可**追加**新图 |\n| 归档 | **确认上传后的图片进入已归档状态,不可删除**;未确认的草稿图仍可删除 |\n| 拦截 | **未上传今日手工台账 → 禁止新增加氢记录**(编辑已有记录不拦;补传历史不替代今日校验) |\n| 数据 | 共享 `H2VehicleLedgerBridge` 内存 Store(未接真实 API) |\n\n## 判定顺序(新增拦截)\n\n| 优先级 | 条件 | 结果 |\n|--------|------|------|\n| 1 | 操作=编辑已有记录 | 不校验手工台账 |\n| 2 | 操作=新增,且目标站今日已有 ≥1 张台账图 | 允许进入新增 |\n| 3 | 操作=新增,今日未上传 | 提示并跳转手工台账 Tab |\n\n## 日历与补传\n\n| 规则 | 说明 |\n|------|------|\n| 数据源 | `listManualLedgersByStation`;当日有 ≥1 张图视为已上传 |\n| 业务起点 | 取本站 Bridge 加氢记录中最早 `hydrogenTime` 自然日;无记录则历史日均不要求补传 |\n| 未传计数 | 本月内 `max(月初, 首笔日)`~min(月末, 今日) 中未上传的天数 |\n| 点选 | 仅 `dateKey ≤ 今日`;选中后右侧/下方展示该日草稿图与上传按钮 |\n| 归档不可删 | Store 已有图强制保留;`upsertManualLedger` 仅追加新图,忽略删除已有图的请求 |\n| 与拦截关系 | 仅 **今日** 影响「禁止新增」;历史补传解决核对缺口,不放宽今日门禁 |\n\n## 用户可见\n\n- 今日未上传:橙/黄提示条 + Tab 红点 \n- 日历:自首笔加氢日起绿/橙标记;首笔之前无橙点(无需补传);本月未传天数摘要 \n- 选中日:上传区标题为该日期;已归档图显示「已归档」无删除;仅未确认草稿可删;已有台账时主按钮为「确认补传」\n\n## 代码路径\n\n- Bridge:`src/common/h2VehicleLedgerBridge.js`(`hasManualLedgerForDate` / `upsertManualLedger` / `listManualLedgersByStation`) \n- H5:`oneos-h5-h2-order` · `ManualLedgerPanel` + `utils/manual-ledger.ts`(`buildManualMonthCells` / `getFirstHydrogenDateKey`) \n- Web:`oneos-web-h2-station/pages/02-加氢记录.jsx`(手工台账 Tab 月历) \n\n## 验收\n\n1. 今日未上传时,H5/Web 点「新增」均被拦截并引导上传 \n2. 上传至少一张图并确认后,可新增电子记录 \n3. 日历自首笔加氢日起区分已传/未传;首笔之前不标未传、不计入补传;可点选范围内未传日补传 \n4. 补传历史日后,该日日历变为已传;今日仍未传时新增仍被拦截 \n5. 确认上传后的图显示已归档且不可删除;仅可追加补传 \n6. H5 与 Web 共用同一 Store,一端上传另一端可见(同会话) \n",
|
||||
"markdownPath": ".spec/feature-manual-ledger.md"
|
||||
},
|
||||
{
|
||||
"type": "markdown",
|
||||
"id": "h5-doc-detail",
|
||||
"title": "详情编辑删除",
|
||||
"markdown": "# 功能:详情、编辑与删除\n\n## 目标\n\n查看单笔加氢记录完整字段;在「未核对且未对账」时可编辑或删除。\n\n## 详情展示\n\n- 顶部:车牌、加氢时间、核对标签、对账标签 \n- 指标条:加氢总额、加氢量 \n- **识别原图**:车牌照片、加氢机面板照片(均为拍摄时叠加时间/地点水印后的原图;种子数据无实拍时用演示水印图) \n- 明细行:站点、车牌、里程、单价、核对/对账状态与时间 \n\n## 锁定规则\n\n| 条件 | 结果 |\n|------|------|\n| 已对账 | 不可编辑/删除;提示已纳入站点对账单 |\n| 已核对(未对账) | 不可编辑/删除;提示能源部已核对 |\n| 未核对且未对账 | 可编辑、可删除 |\n\n判定函数:`isOrderLocked`(核对或对账任一成立即锁)。\n\n## 编辑\n\n进入与「新增」同一套表单,预填当前值(含已存水印照片);提交走更新逻辑(仍校验重复键)。\n\n## 删除\n\n二次确认后从 Bridge 移除该行。\n\n## 验收\n\n1. 未核对未对账:底部有删除/编辑 \n2. 已核对或已对账:无操作栏,有锁定说明 \n3. 详情含对账信息;列表卡片不含对账 \n4. 详情展示车牌与面板带水印原图(新上报提交后为实拍;种子行为演示图) \n",
|
||||
"markdownPath": ".spec/feature-detail.md"
|
||||
},
|
||||
{
|
||||
"type": "markdown",
|
||||
"id": "h5-doc-fleet",
|
||||
"title": "羚牛车辆标签",
|
||||
"markdown": "# 车牌「羚牛车辆 / 非羚牛车辆」标签\n\n原型本地判定,未接真实车辆管理 API。\n\n## 判定顺序\n\n| 优先级 | 条件 | 结果 |\n|--------|------|------|\n| 1 | 车牌为空 | 不展示标签 |\n| 2 | 规范化后车牌 ∈ 本地系统车辆集合 | **羚牛车辆** |\n| 3 | 有车牌但不在集合中 | **非羚牛车辆** |\n\n## 前置条件\n\n- 识别(OCR)或键盘输入得到车牌后才展示。\n- 比较前去掉尾缀 `F`,统一大写。\n\n## 数据源\n\n- `utils/fleet-plates.ts` 内本地种子车牌集合(含加氢 Bridge 演示车牌与部分车辆管理样例)。\n- 正式环境应改为查询车辆管理 / 系统车辆列表接口。\n\n## 用户可见结果\n\n- 绿色标签「羚牛车辆」或橙色标签「非羚牛车辆」。\n- 不拦截提交(仅提示归属)。\n\n## 代码路径\n\n- `getVehicleTag` / `isLingniuVehicle` → `CreateWizard` 车牌行右侧标签。\n",
|
||||
"markdownPath": ".spec/fleet-plate-tag.md"
|
||||
},
|
||||
{
|
||||
"type": "markdown",
|
||||
"id": "h5-doc-reconcile",
|
||||
"title": "核对与对账联动",
|
||||
"markdown": "# 加氢订单(H5)· 对账 / 核对联动规则\n\n| 项 | 说明 |\n|---|---|\n| 代码路径 | Store:`src/common/h2VehicleLedgerBridge.js`;对账单:`oneos-web-h2-station-site`;PC 加氢记录:`oneos-web-h2-station`;车辆氢费明细:`vehicle-h2-fee-ledger` |\n| 规格全文 | [../vehicle-h2-fee-ledger/.spec/verify-reconcile.md](../vehicle-h2-fee-ledger/.spec/verify-reconcile.md) |\n| 数据源 | 原型本地种子 + 内存共享 Store(**未接真实 API**) |\n\n---\n\n## 1. 两套状态(判定优先级)\n\n| 优先级 | 状态 | 字段 | 谁触发 | 用户可见 |\n|---|---|---|---|---|\n| 1 | **核对** | `verifyStatus` / `verifiedAt` | 车辆氢费明细 · **完成核对** | 未核对 / 已核对 + 核对时间 |\n| 2 | **对账** | `reconcileStatus` / `reconcileDate` | 站点信息 · **对账单提交** | 未对账 / 已对账 + 对账时间 |\n\n> `reconciledAt` 仅作完成核对时的兼容写入,**不得**再用于判定「已对账」。\n\n## 2. 数据流\n\n```text\n站端 H5 / Web 新增加氢记录\n → Bridge.upsertRow(verify=unverified,reconcile=pending;成本单价/量/总额)\n → 车辆氢费明细可见\n\n能源部 · 完成核对\n → verifyStatus=verified + verifiedAt\n → 站端同步「已核对」,禁改删\n\n站点信息 · 对账单提交(仅已核对 ∧ 未对账)\n → reconcileStatus=reconciled + reconcileDate + statementRecordId\n → 站端 / 台账同步「已对账」\n```\n\n## 3. 用户可见结果(H5)\n\n| 结果 | 行为 |\n|---|---|\n| 未核对 | 可编辑、删除 |\n| 已核对未对账 | 只读;提示能源部已核对 |\n| 已对账 | 只读;提示已纳入对账单 |\n\n## 4. 边界\n\n- 站端上报默认未核对、未对账\n- 对账时间只认 `reconcileDate`(对账单回写)\n- 跨页联动依赖同浏览器会话共享 Store\n",
|
||||
"markdownPath": ".spec/reconcile-linkage.md"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "folder",
|
||||
"id": "h5-doc-pages",
|
||||
"title": "按页面",
|
||||
"defaultExpanded": true,
|
||||
"children": [
|
||||
{
|
||||
"type": "folder",
|
||||
"id": "h5-page-list",
|
||||
"title": "列表页",
|
||||
"defaultExpanded": true,
|
||||
"children": [
|
||||
{
|
||||
"type": "route",
|
||||
"id": "h5-route-list",
|
||||
"title": "list",
|
||||
"route": "list",
|
||||
"payload": {
|
||||
"pageId": "list"
|
||||
}
|
||||
},
|
||||
{
|
||||
"type": "markdown",
|
||||
"id": "h5-page-list-md",
|
||||
"title": "列表页要点",
|
||||
"markdown": "# 功能:本站列表与 KPI\n\n## 目标\n\n站端人员打开「加氢订单」后,一眼看到本站汇总与近期加氢记录,点击卡片进入详情。\n\n## 页面结构\n\n1. **当前站点**(只读):登录账号对应加氢站名称,无切站入口 \n2. **KPI 三卡**:订单数 / 加氢量(kg) / 加氢金额 \n3. **加氢记录列表**:按加氢时间倒序 \n4. **底栏「新增」**:固定不遮挡卡片滚动区 \n\n## 列表卡片字段\n\n| 展示 | 说明 |\n|------|------|\n| 车牌号 | 去掉尾缀 F 展示 |\n| 核对标签 | 未核对(橙)/ 已核对(绿) |\n| 加氢时间 | 精确到分 |\n| 加氢量 / 加氢总额 | 等宽数字 |\n| 单价 | 页脚左侧 |\n| 核对时间 | 仅已核对时页脚右侧显示 |\n\n**不展示**:里程、对账状态(对账在站点对账单侧完成)。\n\n## 交互\n\n- 点击卡片 → 详情页 \n- 点击底栏「新增」→ 新增表单(时间默认=点击时刻) \n\n## 数据范围\n\n仅 `stationName === 当前登录站` 的 Bridge 台账行。原型默认站:中国石油中油高新能源牙谷加油加氢站。\n\n## 验收\n\n1. 无切站控件 \n2. KPI 与列表条数一致 \n3. 滚动列表时底栏「新增」仍固定且不压住末条卡片 \n"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "folder",
|
||||
"id": "h5-page-create",
|
||||
"title": "新增页",
|
||||
"defaultExpanded": true,
|
||||
"children": [
|
||||
{
|
||||
"type": "route",
|
||||
"id": "h5-route-create",
|
||||
"title": "create",
|
||||
"route": "create",
|
||||
"payload": {
|
||||
"pageId": "create"
|
||||
}
|
||||
},
|
||||
{
|
||||
"type": "markdown",
|
||||
"id": "h5-page-create-md",
|
||||
"title": "新增页要点",
|
||||
"markdown": "# 功能:新增加氢记录\n\n## 目标\n\n站端通过手机浏览器上报一笔加氢记录:拍照识别 + 可校正,提交写入共享氢费 Store。\n\n## 表单分区\n\n### 1. 基础信息\n\n| 字段 | 规则 |\n|------|------|\n| 加氢时间 * | 默认=点击「新增」时的当前时间;点击底部弹层选日期+时+分 |\n| 加氢站名称 | 只读,登录本站名称 |\n\n### 2. 车牌识别\n\n| 字段 | 规则 |\n|------|------|\n| 拍摄区 | 提示「请拍摄车牌」;相册/相机;选图后自动叠加**时间、地点**水印;OCR 模拟回填车牌 |\n| 车牌号 * | 占位「请拍摄或输入车牌号」;点击弹出车牌键盘 |\n| 车辆标签 | 有车牌后:系统车辆列表命中→「羚牛车辆」,否则→「非羚牛车辆」 |\n| 里程(km) | 选填;支持**从车机获取**(原型 Mock);识别车牌后可自动回填 |\n\n### 3. 加氢机面板\n\n| 字段 | 规则 |\n|------|------|\n| 拍摄区 | 提示「请拍摄清晰的加氢机照片」;选图后叠加**时间、地点**水印;OCR 模拟回填单价、量、总额 |\n| OCR 参考 | 展示站点信息维护的加氢机品牌/型号线索(见站点信息「加氢机品牌管理」) |\n| 氢气单价 * | 可改;变更后重算总额 |\n| 加氢量 * | 可改;变更后重算总额 |\n| 加氢总额(元) | 只读;= 单价 × 加氢量(两位小数);界面不展示公式文案 |\n\n## 提交与拦截\n\n- 必填齐全方可提交 \n- 同站 + 同车牌 + 同加氢时间 → 拦截重复 \n- 有填写内容点返回 → 二次确认防丢失 \n- 已核对或已对账记录不可从此入口编辑(列表进详情后按钮隐藏) \n\n## 验收\n\n1. 时间默认正确且可选到分 \n2. 车牌键盘可用;标签随车牌变化 \n3. 车牌/面板照片右下角可见时间与地点水印 \n4. 可从车机获取里程(有车牌时) \n5. 改单价或量后总额自动更新且不可手改 \n6. 空表单可直接返回;有内容返回需确认 \n"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "folder",
|
||||
"id": "h5-page-detail",
|
||||
"title": "详情页",
|
||||
"defaultExpanded": true,
|
||||
"children": [
|
||||
{
|
||||
"type": "route",
|
||||
"id": "h5-route-detail",
|
||||
"title": "detail",
|
||||
"route": "detail",
|
||||
"payload": {
|
||||
"pageId": "detail"
|
||||
}
|
||||
},
|
||||
{
|
||||
"type": "markdown",
|
||||
"id": "h5-page-detail-md",
|
||||
"title": "详情页要点",
|
||||
"markdown": "# 功能:详情、编辑与删除\n\n## 目标\n\n查看单笔加氢记录完整字段;在「未核对且未对账」时可编辑或删除。\n\n## 详情展示\n\n- 顶部:车牌、加氢时间、核对标签、对账标签 \n- 指标条:加氢总额、加氢量 \n- **识别原图**:车牌照片、加氢机面板照片(均为拍摄时叠加时间/地点水印后的原图;种子数据无实拍时用演示水印图) \n- 明细行:站点、车牌、里程、单价、核对/对账状态与时间 \n\n## 锁定规则\n\n| 条件 | 结果 |\n|------|------|\n| 已对账 | 不可编辑/删除;提示已纳入站点对账单 |\n| 已核对(未对账) | 不可编辑/删除;提示能源部已核对 |\n| 未核对且未对账 | 可编辑、可删除 |\n\n判定函数:`isOrderLocked`(核对或对账任一成立即锁)。\n\n## 编辑\n\n进入与「新增」同一套表单,预填当前值(含已存水印照片);提交走更新逻辑(仍校验重复键)。\n\n## 删除\n\n二次确认后从 Bridge 移除该行。\n\n## 验收\n\n1. 未核对未对账:底部有删除/编辑 \n2. 已核对或已对账:无操作栏,有锁定说明 \n3. 详情含对账信息;列表卡片不含对账 \n4. 详情展示车牌与面板带水印原图(新上报提交后为实拍;种子行为演示图) \n"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
486
src/prototypes/oneos-h5-h2-order/components/CreateWizard.tsx
Normal file
486
src/prototypes/oneos-h5-h2-order/components/CreateWizard.tsx
Normal file
@@ -0,0 +1,486 @@
|
||||
import React, { useMemo, useRef, useState } from 'react';
|
||||
import type { CreateDraft } from '../types';
|
||||
import { getVehicleTag } from '../utils/fleet-plates';
|
||||
import { delay, mockPanelOcr, mockPlateOcr, readFileAsDataUrl } from '../utils/ocr-mock';
|
||||
import { applyPhotoWatermark, formatWatermarkTime } from '../utils/photo-watermark';
|
||||
import { fetchMileageFromVehicle } from '../utils/vehicle-mileage';
|
||||
import { DateTimePickerSheet } from './DateTimePickerSheet';
|
||||
import {
|
||||
IconCamera,
|
||||
IconCheck,
|
||||
IconChevronLeft,
|
||||
IconClock,
|
||||
IconFuel,
|
||||
IconSpinner,
|
||||
} from './Icons';
|
||||
import { PhoneShell } from './PhoneShell';
|
||||
import { PlateKeyboardSheet } from './PlateKeyboardSheet';
|
||||
|
||||
function listDispenserBrandHints(): string[] {
|
||||
const store = (window as unknown as { H2DispenserBrandStore?: { labels?: () => string[] } })
|
||||
.H2DispenserBrandStore;
|
||||
if (!store || typeof store.labels !== 'function') return [];
|
||||
try {
|
||||
return store.labels().slice(0, 4);
|
||||
} catch {
|
||||
return [];
|
||||
}
|
||||
}
|
||||
|
||||
type Props = {
|
||||
mode: 'create' | 'edit';
|
||||
draft: CreateDraft;
|
||||
initialDraft: CreateDraft;
|
||||
stationName: string;
|
||||
onChangeDraft: (patch: Partial<CreateDraft>) => void;
|
||||
onBack: () => void;
|
||||
onSubmit: () => void;
|
||||
toast?: string;
|
||||
};
|
||||
|
||||
function draftFingerprint(draft: CreateDraft): string {
|
||||
return [
|
||||
draft.hydrogenTime.trim(),
|
||||
draft.plateNo.trim(),
|
||||
draft.mileageKm.trim(),
|
||||
draft.unitPrice.trim(),
|
||||
draft.hydrogenKg.trim(),
|
||||
draft.totalAmount.trim(),
|
||||
draft.platePreviewUrl ? '1' : '0',
|
||||
draft.panelPreviewUrl ? '1' : '0',
|
||||
].join('|');
|
||||
}
|
||||
|
||||
export function isDraftDirty(
|
||||
draft: CreateDraft,
|
||||
initialDraft: CreateDraft,
|
||||
mode: 'create' | 'edit',
|
||||
): boolean {
|
||||
if (mode === 'edit') {
|
||||
return draftFingerprint(draft) !== draftFingerprint(initialDraft);
|
||||
}
|
||||
return Boolean(
|
||||
draft.plateNo.trim() ||
|
||||
draft.mileageKm.trim() ||
|
||||
draft.unitPrice.trim() ||
|
||||
draft.hydrogenKg.trim() ||
|
||||
draft.totalAmount.trim() ||
|
||||
draft.platePreviewUrl ||
|
||||
draft.panelPreviewUrl,
|
||||
);
|
||||
}
|
||||
|
||||
function calcTotalAmount(unitPrice: string, hydrogenKg: string): string {
|
||||
const price = Number(unitPrice);
|
||||
const kg = Number(hydrogenKg);
|
||||
if (!Number.isFinite(price) || !Number.isFinite(kg) || unitPrice === '' || hydrogenKg === '') {
|
||||
return '';
|
||||
}
|
||||
return String(Math.round(price * kg * 100) / 100);
|
||||
}
|
||||
|
||||
function RequiredMark() {
|
||||
return (
|
||||
<span className="h5-req" aria-hidden>
|
||||
*
|
||||
</span>
|
||||
);
|
||||
}
|
||||
|
||||
export function CreateWizard({
|
||||
mode,
|
||||
draft,
|
||||
initialDraft,
|
||||
stationName,
|
||||
onChangeDraft,
|
||||
onBack,
|
||||
onSubmit,
|
||||
toast,
|
||||
}: Props) {
|
||||
const plateInputRef = useRef<HTMLInputElement>(null);
|
||||
const panelInputRef = useRef<HTMLInputElement>(null);
|
||||
const [recognizing, setRecognizing] = useState<'plate' | 'panel' | null>(null);
|
||||
const [submitting, setSubmitting] = useState(false);
|
||||
const [fetchingMileage, setFetchingMileage] = useState(false);
|
||||
const [mileageHint, setMileageHint] = useState('');
|
||||
const [timeOpen, setTimeOpen] = useState(false);
|
||||
const [plateOpen, setPlateOpen] = useState(false);
|
||||
|
||||
const vehicleTag = useMemo(() => getVehicleTag(draft.plateNo), [draft.plateNo]);
|
||||
const brandHints = listDispenserBrandHints();
|
||||
|
||||
function patchDraft(patch: Partial<CreateDraft>) {
|
||||
const nextPrice = patch.unitPrice !== undefined ? patch.unitPrice : draft.unitPrice;
|
||||
const nextKg = patch.hydrogenKg !== undefined ? patch.hydrogenKg : draft.hydrogenKg;
|
||||
if (patch.unitPrice !== undefined || patch.hydrogenKg !== undefined) {
|
||||
patch = { ...patch, totalAmount: calcTotalAmount(nextPrice, nextKg) };
|
||||
}
|
||||
onChangeDraft(patch);
|
||||
}
|
||||
|
||||
async function watermarkPreview(rawUrl: string): Promise<string> {
|
||||
return applyPhotoWatermark(rawUrl, {
|
||||
timeText: formatWatermarkTime(),
|
||||
locationText: stationName || '加氢站',
|
||||
});
|
||||
}
|
||||
|
||||
async function pullMileageFromVehicle(plateNo: string, autoFill: boolean) {
|
||||
setFetchingMileage(true);
|
||||
try {
|
||||
const result = await fetchMileageFromVehicle(plateNo);
|
||||
setMileageHint(result.message);
|
||||
if (result.ok && (autoFill || !draft.mileageKm.trim())) {
|
||||
onChangeDraft({ mileageKm: result.mileageKm });
|
||||
}
|
||||
return result;
|
||||
} finally {
|
||||
setFetchingMileage(false);
|
||||
}
|
||||
}
|
||||
|
||||
async function handlePlateFile(file: File | null) {
|
||||
if (!file) return;
|
||||
setRecognizing('plate');
|
||||
try {
|
||||
const rawUrl = await readFileAsDataUrl(file);
|
||||
const url = await watermarkPreview(rawUrl);
|
||||
await delay(900);
|
||||
const ocr = mockPlateOcr();
|
||||
const mileage = await fetchMileageFromVehicle(ocr.plateNo);
|
||||
setMileageHint(mileage.message);
|
||||
onChangeDraft({
|
||||
platePreviewUrl: url,
|
||||
plateNo: ocr.plateNo,
|
||||
...(mileage.ok ? { mileageKm: mileage.mileageKm } : {}),
|
||||
});
|
||||
if (typeof navigator !== 'undefined' && navigator.vibrate) navigator.vibrate(10);
|
||||
} finally {
|
||||
setRecognizing(null);
|
||||
}
|
||||
}
|
||||
|
||||
async function handlePanelFile(file: File | null) {
|
||||
if (!file) return;
|
||||
setRecognizing('panel');
|
||||
try {
|
||||
const rawUrl = await readFileAsDataUrl(file);
|
||||
const url = await watermarkPreview(rawUrl);
|
||||
await delay(900);
|
||||
const ocr = mockPanelOcr();
|
||||
onChangeDraft({
|
||||
panelPreviewUrl: url,
|
||||
unitPrice: String(ocr.unitPrice),
|
||||
hydrogenKg: String(ocr.hydrogenKg),
|
||||
totalAmount: String(ocr.totalAmount),
|
||||
});
|
||||
if (typeof navigator !== 'undefined' && navigator.vibrate) navigator.vibrate(10);
|
||||
} finally {
|
||||
setRecognizing(null);
|
||||
}
|
||||
}
|
||||
|
||||
function requestBack() {
|
||||
if (isDraftDirty(draft, initialDraft, mode)) {
|
||||
const ok = window.confirm('当前内容尚未提交,返回将丢失已填写信息。确认返回?');
|
||||
if (!ok) return;
|
||||
}
|
||||
onBack();
|
||||
}
|
||||
|
||||
async function handleSubmitClick() {
|
||||
if (submitting) return;
|
||||
setSubmitting(true);
|
||||
try {
|
||||
onSubmit();
|
||||
} finally {
|
||||
window.setTimeout(() => setSubmitting(false), 400);
|
||||
}
|
||||
}
|
||||
|
||||
const canSubmit =
|
||||
Boolean(draft.plateNo.trim()) &&
|
||||
Boolean(draft.unitPrice) &&
|
||||
Boolean(draft.hydrogenKg) &&
|
||||
Boolean(draft.totalAmount) &&
|
||||
Boolean(draft.hydrogenTime.trim()) &&
|
||||
!recognizing &&
|
||||
!submitting;
|
||||
|
||||
return (
|
||||
<PhoneShell
|
||||
title={mode === 'edit' ? '编辑加氢记录' : '新增加氢记录'}
|
||||
left={
|
||||
<button type="button" className="h5-nav-btn" onClick={requestBack} aria-label="返回">
|
||||
<IconChevronLeft size={20} />
|
||||
</button>
|
||||
}
|
||||
bodyClassName="h5-body--wizard"
|
||||
footer={
|
||||
<div className="h5-action-bar">
|
||||
<button type="button" className="h5-btn" onClick={requestBack} disabled={submitting}>
|
||||
取消
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className="h5-btn h5-btn--primary"
|
||||
disabled={!canSubmit}
|
||||
onClick={() => void handleSubmitClick()}
|
||||
>
|
||||
{submitting ? <IconSpinner size={18} /> : <IconCheck size={18} />}
|
||||
{submitting ? '提交中…' : '提交'}
|
||||
</button>
|
||||
</div>
|
||||
}
|
||||
>
|
||||
<section className="h5-panel" data-annotation-id="h5-create-basic">
|
||||
<div className="h5-panel-head">
|
||||
<div className="h5-panel-badge" aria-hidden>
|
||||
<IconClock size={18} />
|
||||
</div>
|
||||
<div>
|
||||
<h3>基础信息</h3>
|
||||
</div>
|
||||
</div>
|
||||
<div className="h5-field">
|
||||
<label htmlFor="h5-time">
|
||||
<RequiredMark />
|
||||
加氢时间
|
||||
</label>
|
||||
<button
|
||||
type="button"
|
||||
id="h5-time"
|
||||
className="h5-field-trigger tabular-nums"
|
||||
data-annotation-id="h5-time"
|
||||
onClick={() => setTimeOpen(true)}
|
||||
>
|
||||
{draft.hydrogenTime || '请选择加氢时间'}
|
||||
</button>
|
||||
</div>
|
||||
<div className="h5-field">
|
||||
<label htmlFor="h5-station">加氢站名称</label>
|
||||
<input
|
||||
id="h5-station"
|
||||
data-annotation-id="h5-station"
|
||||
value={stationName}
|
||||
disabled
|
||||
title="取当前登录账号对应加氢站"
|
||||
/>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="h5-panel">
|
||||
<div className="h5-panel-head">
|
||||
<div className="h5-panel-badge" aria-hidden>
|
||||
<IconCamera size={18} />
|
||||
</div>
|
||||
<div>
|
||||
<h3>车牌识别</h3>
|
||||
<p>请拍摄车牌</p>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
className={`h5-shot h5-shot--compact${draft.platePreviewUrl ? ' h5-shot--filled' : ''}`}
|
||||
role="button"
|
||||
tabIndex={0}
|
||||
onClick={() => plateInputRef.current?.click()}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === 'Enter' || e.key === ' ') plateInputRef.current?.click();
|
||||
}}
|
||||
>
|
||||
{draft.platePreviewUrl ? <img src={draft.platePreviewUrl} alt="车牌照片预览" /> : null}
|
||||
<div className="h5-shot-content">
|
||||
{recognizing === 'plate' ? <IconSpinner size={18} /> : <IconCamera size={18} />}
|
||||
<span>
|
||||
{recognizing === 'plate'
|
||||
? '识别中…'
|
||||
: draft.platePreviewUrl
|
||||
? '重新拍摄 / 选图'
|
||||
: '拍摄车牌'}
|
||||
</span>
|
||||
</div>
|
||||
<input
|
||||
ref={plateInputRef}
|
||||
type="file"
|
||||
accept="image/*"
|
||||
capture="environment"
|
||||
onChange={(e) => {
|
||||
void handlePlateFile(e.target.files?.[0] || null);
|
||||
e.target.value = '';
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<div className="h5-field" style={{ marginTop: 12 }}>
|
||||
<label htmlFor="h5-plate">
|
||||
<RequiredMark />
|
||||
车牌号
|
||||
</label>
|
||||
<div className="h5-plate-row">
|
||||
<button
|
||||
type="button"
|
||||
id="h5-plate"
|
||||
className="h5-field-trigger"
|
||||
data-annotation-id="h5-plate"
|
||||
onClick={() => setPlateOpen(true)}
|
||||
>
|
||||
{draft.plateNo || (
|
||||
<span className="h5-field-trigger__ph">请拍摄或输入车牌号</span>
|
||||
)}
|
||||
</button>
|
||||
{vehicleTag === 'lingniu' ? (
|
||||
<span className="h5-vehicle-tag h5-vehicle-tag--in">羚牛车辆</span>
|
||||
) : null}
|
||||
{vehicleTag === 'external' ? (
|
||||
<span className="h5-vehicle-tag h5-vehicle-tag--out">非羚牛车辆</span>
|
||||
) : null}
|
||||
</div>
|
||||
</div>
|
||||
<div className="h5-field" data-annotation-id="h5-mileage">
|
||||
<label htmlFor="h5-mileage">里程(km)</label>
|
||||
<div className="h5-mileage-row">
|
||||
<input
|
||||
id="h5-mileage"
|
||||
inputMode="numeric"
|
||||
value={draft.mileageKm}
|
||||
onChange={(e) => {
|
||||
setMileageHint('');
|
||||
onChangeDraft({ mileageKm: e.target.value });
|
||||
}}
|
||||
placeholder="可从车机获取或手工填写"
|
||||
autoComplete="off"
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
className="h5-btn h5-btn--ghost h5-mileage-fetch"
|
||||
disabled={fetchingMileage || recognizing === 'plate'}
|
||||
onClick={() => void pullMileageFromVehicle(draft.plateNo, true)}
|
||||
aria-label="从车机获取里程"
|
||||
>
|
||||
{fetchingMileage ? <IconSpinner size={16} /> : null}
|
||||
{fetchingMileage ? '获取中…' : '从车机获取'}
|
||||
</button>
|
||||
</div>
|
||||
{mileageHint ? (
|
||||
<p className="h5-field-hint" role="status">
|
||||
{mileageHint}
|
||||
</p>
|
||||
) : (
|
||||
<p className="h5-field-hint">识别车牌后可自动取数;也可点「从车机获取」(原型 Mock)。</p>
|
||||
)}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="h5-panel">
|
||||
<div className="h5-panel-head">
|
||||
<div className="h5-panel-badge" aria-hidden>
|
||||
<IconFuel size={18} />
|
||||
</div>
|
||||
<div>
|
||||
<h3>加氢机面板识别</h3>
|
||||
<p>请拍摄清晰的加氢机照片</p>
|
||||
</div>
|
||||
</div>
|
||||
{brandHints.length ? (
|
||||
<p className="h5-brand-hint" data-annotation-id="h5-dispenser-brands">
|
||||
OCR 参考品牌型号(站点信息维护):{brandHints.join('、')}
|
||||
{brandHints.length >= 4 ? '…' : ''}
|
||||
</p>
|
||||
) : null}
|
||||
<div
|
||||
className={`h5-shot h5-shot--compact${draft.panelPreviewUrl ? ' h5-shot--filled' : ''}`}
|
||||
role="button"
|
||||
tabIndex={0}
|
||||
onClick={() => panelInputRef.current?.click()}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === 'Enter' || e.key === ' ') panelInputRef.current?.click();
|
||||
}}
|
||||
>
|
||||
{draft.panelPreviewUrl ? <img src={draft.panelPreviewUrl} alt="加氢机面板预览" /> : null}
|
||||
<div className="h5-shot-content">
|
||||
{recognizing === 'panel' ? <IconSpinner size={18} /> : <IconCamera size={18} />}
|
||||
<span>
|
||||
{recognizing === 'panel'
|
||||
? '识别中…'
|
||||
: draft.panelPreviewUrl
|
||||
? '重新拍摄 / 选图'
|
||||
: '拍摄面板'}
|
||||
</span>
|
||||
</div>
|
||||
<input
|
||||
ref={panelInputRef}
|
||||
type="file"
|
||||
accept="image/*"
|
||||
capture="environment"
|
||||
onChange={(e) => {
|
||||
void handlePanelFile(e.target.files?.[0] || null);
|
||||
e.target.value = '';
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<div className="h5-field" style={{ marginTop: 12 }}>
|
||||
<label htmlFor="h5-price">
|
||||
<RequiredMark />
|
||||
氢气单价(元/kg)
|
||||
</label>
|
||||
<input
|
||||
id="h5-price"
|
||||
data-annotation-id="h5-price"
|
||||
inputMode="decimal"
|
||||
value={draft.unitPrice}
|
||||
onChange={(e) => patchDraft({ unitPrice: e.target.value })}
|
||||
/>
|
||||
</div>
|
||||
<div className="h5-field">
|
||||
<label htmlFor="h5-kg">
|
||||
<RequiredMark />
|
||||
加氢量(kg)
|
||||
</label>
|
||||
<input
|
||||
id="h5-kg"
|
||||
data-annotation-id="h5-kg"
|
||||
inputMode="decimal"
|
||||
value={draft.hydrogenKg}
|
||||
onChange={(e) => patchDraft({ hydrogenKg: e.target.value })}
|
||||
/>
|
||||
</div>
|
||||
<div className="h5-field">
|
||||
<label htmlFor="h5-total" data-annotation-id="h5-total-label">
|
||||
加氢总额(元)
|
||||
</label>
|
||||
<input
|
||||
id="h5-total"
|
||||
inputMode="decimal"
|
||||
value={draft.totalAmount}
|
||||
readOnly
|
||||
disabled
|
||||
/>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{toast ? (
|
||||
<div className="h5-toast" role="status" aria-live="polite">
|
||||
{toast}
|
||||
</div>
|
||||
) : null}
|
||||
|
||||
<DateTimePickerSheet
|
||||
open={timeOpen}
|
||||
value={draft.hydrogenTime}
|
||||
onClose={() => setTimeOpen(false)}
|
||||
onConfirm={(next) => {
|
||||
onChangeDraft({ hydrogenTime: next });
|
||||
setTimeOpen(false);
|
||||
}}
|
||||
/>
|
||||
<PlateKeyboardSheet
|
||||
open={plateOpen}
|
||||
value={draft.plateNo}
|
||||
onClose={() => setPlateOpen(false)}
|
||||
onConfirm={(next) => {
|
||||
onChangeDraft({ plateNo: next });
|
||||
setPlateOpen(false);
|
||||
}}
|
||||
/>
|
||||
</PhoneShell>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,103 @@
|
||||
import React, { useEffect, useMemo, useState } from 'react';
|
||||
import { pad2 } from '../utils/format';
|
||||
|
||||
type Props = {
|
||||
open: boolean;
|
||||
value: string;
|
||||
onClose: () => void;
|
||||
onConfirm: (next: string) => void;
|
||||
};
|
||||
|
||||
function parseValue(value: string): { date: string; hour: number; minute: number } {
|
||||
const raw = String(value || '').trim().replace('T', ' ');
|
||||
const date = raw.slice(0, 10);
|
||||
const hour = Number(raw.slice(11, 13));
|
||||
const minute = Number(raw.slice(14, 16));
|
||||
const now = new Date();
|
||||
return {
|
||||
date: /^\d{4}-\d{2}-\d{2}$/.test(date)
|
||||
? date
|
||||
: `${now.getFullYear()}-${pad2(now.getMonth() + 1)}-${pad2(now.getDate())}`,
|
||||
hour: Number.isFinite(hour) ? hour : now.getHours(),
|
||||
minute: Number.isFinite(minute) ? minute : now.getMinutes(),
|
||||
};
|
||||
}
|
||||
|
||||
export function DateTimePickerSheet({ open, value, onClose, onConfirm }: Props) {
|
||||
const initial = useMemo(() => parseValue(value), [value, open]);
|
||||
const [date, setDate] = useState(initial.date);
|
||||
const [hour, setHour] = useState(initial.hour);
|
||||
const [minute, setMinute] = useState(initial.minute);
|
||||
|
||||
useEffect(() => {
|
||||
if (!open) return;
|
||||
const next = parseValue(value);
|
||||
setDate(next.date);
|
||||
setHour(next.hour);
|
||||
setMinute(next.minute);
|
||||
}, [open, value]);
|
||||
|
||||
if (!open) return null;
|
||||
|
||||
const preview = `${date} ${pad2(hour)}:${pad2(minute)}`;
|
||||
|
||||
return (
|
||||
<div className="h5-sheet-root" role="dialog" aria-modal="true" aria-label="选择加氢时间">
|
||||
<button type="button" className="h5-sheet-mask" aria-label="关闭" onClick={onClose} />
|
||||
<div className="h5-sheet">
|
||||
<div className="h5-sheet-bar">
|
||||
<button type="button" className="h5-sheet-bar-btn" onClick={onClose}>
|
||||
取消
|
||||
</button>
|
||||
<strong>加氢时间</strong>
|
||||
<button
|
||||
type="button"
|
||||
className="h5-sheet-bar-btn h5-sheet-bar-btn--ok"
|
||||
onClick={() => onConfirm(preview)}
|
||||
>
|
||||
确定
|
||||
</button>
|
||||
</div>
|
||||
<div className="h5-sheet-preview tabular-nums">{preview}</div>
|
||||
<div className="h5-dt-grid">
|
||||
<label className="h5-dt-field">
|
||||
<span>日期</span>
|
||||
<input
|
||||
type="date"
|
||||
value={date}
|
||||
onChange={(e) => setDate(e.target.value)}
|
||||
/>
|
||||
</label>
|
||||
<label className="h5-dt-field">
|
||||
<span>时</span>
|
||||
<select
|
||||
value={hour}
|
||||
onChange={(e) => setHour(Number(e.target.value))}
|
||||
aria-label="小时"
|
||||
>
|
||||
{Array.from({ length: 24 }, (_, i) => (
|
||||
<option key={i} value={i}>
|
||||
{pad2(i)}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</label>
|
||||
<label className="h5-dt-field">
|
||||
<span>分</span>
|
||||
<select
|
||||
value={minute}
|
||||
onChange={(e) => setMinute(Number(e.target.value))}
|
||||
aria-label="分钟"
|
||||
>
|
||||
{Array.from({ length: 60 }, (_, i) => (
|
||||
<option key={i} value={i}>
|
||||
{pad2(i)}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
145
src/prototypes/oneos-h5-h2-order/components/Icons.tsx
Normal file
145
src/prototypes/oneos-h5-h2-order/components/Icons.tsx
Normal file
@@ -0,0 +1,145 @@
|
||||
import React from 'react';
|
||||
|
||||
type IconProps = {
|
||||
size?: number;
|
||||
className?: string;
|
||||
};
|
||||
|
||||
function Svg({
|
||||
size = 20,
|
||||
className,
|
||||
children,
|
||||
}: IconProps & { children: React.ReactNode }) {
|
||||
return (
|
||||
<svg
|
||||
className={className}
|
||||
width={size}
|
||||
height={size}
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth="2"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
aria-hidden
|
||||
>
|
||||
{children}
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
export function IconChevronLeft(props: IconProps) {
|
||||
return (
|
||||
<Svg {...props}>
|
||||
<path d="M15 18l-6-6 6-6" />
|
||||
</Svg>
|
||||
);
|
||||
}
|
||||
|
||||
export function IconPlus(props: IconProps) {
|
||||
return (
|
||||
<Svg {...props}>
|
||||
<path d="M12 5v14M5 12h14" />
|
||||
</Svg>
|
||||
);
|
||||
}
|
||||
|
||||
export function IconCamera(props: IconProps) {
|
||||
return (
|
||||
<Svg {...props}>
|
||||
<path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z" />
|
||||
<circle cx="12" cy="13" r="4" />
|
||||
</Svg>
|
||||
);
|
||||
}
|
||||
|
||||
export function IconFuel(props: IconProps) {
|
||||
return (
|
||||
<Svg {...props}>
|
||||
<path d="M3 22h12M5 22V10l7-4v16M19 22V8l-4-2v16" />
|
||||
<circle cx="8.5" cy="17.5" r="1.5" />
|
||||
</Svg>
|
||||
);
|
||||
}
|
||||
|
||||
export function IconList(props: IconProps) {
|
||||
return (
|
||||
<Svg {...props}>
|
||||
<path d="M8 6h13M8 12h13M8 18h13M3 6h.01M3 12h.01M3 18h.01" />
|
||||
</Svg>
|
||||
);
|
||||
}
|
||||
|
||||
export function IconDroplet(props: IconProps) {
|
||||
return (
|
||||
<Svg {...props}>
|
||||
<path d="M12 2.69l5.66 5.66a8 8 0 1 1-11.31 0z" />
|
||||
</Svg>
|
||||
);
|
||||
}
|
||||
|
||||
export function IconWallet(props: IconProps) {
|
||||
return (
|
||||
<Svg {...props}>
|
||||
<path d="M20 7H4a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2z" />
|
||||
<path d="M16 14h.01" />
|
||||
<path d="M22 10V7a2 2 0 0 0-2-2H8" />
|
||||
</Svg>
|
||||
);
|
||||
}
|
||||
|
||||
export function IconMapPin(props: IconProps) {
|
||||
return (
|
||||
<Svg {...props}>
|
||||
<path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z" />
|
||||
<circle cx="12" cy="10" r="3" />
|
||||
</Svg>
|
||||
);
|
||||
}
|
||||
|
||||
export function IconCheck(props: IconProps) {
|
||||
return (
|
||||
<Svg {...props}>
|
||||
<path d="M20 6L9 17l-5-5" />
|
||||
</Svg>
|
||||
);
|
||||
}
|
||||
|
||||
export function IconClock(props: IconProps) {
|
||||
return (
|
||||
<Svg {...props}>
|
||||
<circle cx="12" cy="12" r="10" />
|
||||
<path d="M12 6v6l4 2" />
|
||||
</Svg>
|
||||
);
|
||||
}
|
||||
|
||||
export function IconInbox(props: IconProps) {
|
||||
return (
|
||||
<Svg size={props.size || 40} className={props.className}>
|
||||
<path d="M22 12h-6l-2 3h-4l-2-3H2" />
|
||||
<path d="M5.45 5.11L2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z" />
|
||||
</Svg>
|
||||
);
|
||||
}
|
||||
|
||||
export function IconSpinner({ size = 16, className }: IconProps) {
|
||||
return (
|
||||
<svg
|
||||
className={`h5-spinner ${className || ''}`.trim()}
|
||||
width={size}
|
||||
height={size}
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
aria-hidden
|
||||
>
|
||||
<circle cx="12" cy="12" r="9" stroke="currentColor" strokeOpacity="0.25" strokeWidth="3" />
|
||||
<path
|
||||
d="M21 12a9 9 0 0 0-9-9"
|
||||
stroke="currentColor"
|
||||
strokeWidth="3"
|
||||
strokeLinecap="round"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,347 @@
|
||||
import React, { useEffect, useMemo, useRef, useState } from 'react';
|
||||
import type { StationOption } from '../types';
|
||||
import { readFileAsDataUrl } from '../utils/ocr-mock';
|
||||
import {
|
||||
buildManualMonthCells,
|
||||
countMissingInMonth,
|
||||
getFirstHydrogenDateKey,
|
||||
getManualLedger,
|
||||
isArchivedManualImage,
|
||||
listManualLedgersByStation,
|
||||
todayDateKey,
|
||||
upsertManualLedger,
|
||||
type ManualLedgerImage,
|
||||
} from '../utils/manual-ledger';
|
||||
import { IconCamera, IconCheck } from './Icons';
|
||||
|
||||
type Props = {
|
||||
station: StationOption;
|
||||
tick: number;
|
||||
onUploaded: () => void;
|
||||
showToast: (msg: string) => void;
|
||||
};
|
||||
|
||||
const WEEK_LABELS = ['日', '一', '二', '三', '四', '五', '六'];
|
||||
|
||||
export function ManualLedgerPanel({ station, tick, onUploaded, showToast }: Props) {
|
||||
const today = todayDateKey();
|
||||
const fileRef = useRef<HTMLInputElement>(null);
|
||||
const [draftImages, setDraftImages] = useState<ManualLedgerImage[]>([]);
|
||||
const [saving, setSaving] = useState(false);
|
||||
const [selectedDate, setSelectedDate] = useState(today);
|
||||
const [cursorYm, setCursorYm] = useState(() => {
|
||||
const [y, m] = today.split('-').map(Number);
|
||||
return { y, m };
|
||||
});
|
||||
|
||||
const stationKey = station.stationId || station.stationName;
|
||||
|
||||
const allEntries = useMemo(
|
||||
() => listManualLedgersByStation(stationKey),
|
||||
[stationKey, tick],
|
||||
);
|
||||
|
||||
const uploadedSet = useMemo(() => {
|
||||
const set = new Set<string>();
|
||||
allEntries.forEach((item) => {
|
||||
if (item.images?.length) set.add(item.ledgerDate);
|
||||
});
|
||||
return set;
|
||||
}, [allEntries]);
|
||||
|
||||
const firstHydrogenDate = useMemo(
|
||||
() => getFirstHydrogenDateKey(stationKey) || getFirstHydrogenDateKey(station.stationName),
|
||||
[stationKey, station.stationName, tick],
|
||||
);
|
||||
|
||||
const selectedEntry = useMemo(
|
||||
() => getManualLedger(stationKey, selectedDate),
|
||||
[stationKey, selectedDate, tick],
|
||||
);
|
||||
|
||||
const cells = useMemo(
|
||||
() => buildManualMonthCells(cursorYm.y, cursorYm.m, uploadedSet, today, firstHydrogenDate),
|
||||
[cursorYm.y, cursorYm.m, uploadedSet, today, firstHydrogenDate],
|
||||
);
|
||||
|
||||
const missingInMonth = useMemo(
|
||||
() => countMissingInMonth(cursorYm.y, cursorYm.m, uploadedSet, today, firstHydrogenDate),
|
||||
[cursorYm.y, cursorYm.m, uploadedSet, today, firstHydrogenDate],
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
if (selectedEntry?.images?.length) {
|
||||
setDraftImages(
|
||||
selectedEntry.images.map((img) => ({
|
||||
...img,
|
||||
archived: true,
|
||||
})),
|
||||
);
|
||||
} else {
|
||||
setDraftImages([]);
|
||||
}
|
||||
}, [selectedEntry, selectedDate, tick]);
|
||||
|
||||
const selectedUploaded = Boolean(selectedEntry?.images?.length);
|
||||
const isTodaySelected = selectedDate === today;
|
||||
const canEditSelected = selectedDate <= today;
|
||||
const pendingNewCount = draftImages.filter((img) => !isArchivedManualImage(img)).length;
|
||||
const canSubmit = canEditSelected && (selectedUploaded ? pendingNewCount > 0 : draftImages.length > 0);
|
||||
|
||||
async function handleFiles(files: FileList | null) {
|
||||
if (!files?.length || !canEditSelected) return;
|
||||
const next: ManualLedgerImage[] = [...draftImages];
|
||||
for (let i = 0; i < files.length; i++) {
|
||||
const file = files[i];
|
||||
if (!file.type.startsWith('image/')) continue;
|
||||
next.push({
|
||||
id: `ml-img-${Date.now()}-${i}`,
|
||||
name: file.name || `台账照片${next.length + 1}.jpg`,
|
||||
dataUrl: await readFileAsDataUrl(file),
|
||||
archived: false,
|
||||
uploadedAt: new Date().toISOString().slice(0, 19).replace('T', ' '),
|
||||
});
|
||||
}
|
||||
setDraftImages(next);
|
||||
}
|
||||
|
||||
function removeImage(id: string) {
|
||||
setDraftImages((prev) =>
|
||||
prev.filter((img) => {
|
||||
if (img.id !== id) return true;
|
||||
return !isArchivedManualImage(img);
|
||||
}),
|
||||
);
|
||||
}
|
||||
|
||||
function handleSave() {
|
||||
if (!canEditSelected) {
|
||||
showToast('不能上传未来日期');
|
||||
return;
|
||||
}
|
||||
if (selectedUploaded && pendingNewCount === 0) {
|
||||
showToast('请先添加补传照片');
|
||||
return;
|
||||
}
|
||||
if (!draftImages.length) {
|
||||
showToast('请至少上传一张手工台账照片');
|
||||
return;
|
||||
}
|
||||
const ok = window.confirm('确认上传后该记录将归档无法修改,是否确认无误');
|
||||
if (!ok) return;
|
||||
setSaving(true);
|
||||
try {
|
||||
const saved = upsertManualLedger({
|
||||
stationId: station.stationId,
|
||||
stationName: station.stationName,
|
||||
ledgerDate: selectedDate,
|
||||
images: draftImages,
|
||||
});
|
||||
if (!saved) {
|
||||
showToast('上传失败,请重试');
|
||||
return;
|
||||
}
|
||||
showToast(
|
||||
selectedUploaded
|
||||
? `${selectedDate} 已补传`
|
||||
: isTodaySelected
|
||||
? '今日手工台账已上传'
|
||||
: `${selectedDate} 手工台账已上传`,
|
||||
);
|
||||
onUploaded();
|
||||
} finally {
|
||||
setSaving(false);
|
||||
}
|
||||
}
|
||||
|
||||
function shiftMonth(delta: number) {
|
||||
setCursorYm((prev) => {
|
||||
let m = prev.m + delta;
|
||||
let y = prev.y;
|
||||
if (m < 1) {
|
||||
m = 12;
|
||||
y -= 1;
|
||||
} else if (m > 12) {
|
||||
m = 1;
|
||||
y += 1;
|
||||
}
|
||||
return { y, m };
|
||||
});
|
||||
}
|
||||
|
||||
function selectDay(dateKey: string, isFuture: boolean) {
|
||||
if (isFuture) return;
|
||||
setSelectedDate(dateKey);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="h5-manual" data-annotation-id="h5-manual">
|
||||
<div
|
||||
className={`h5-manual-status${
|
||||
uploadedSet.has(today) ? ' h5-manual-status--ok' : ''
|
||||
}`}
|
||||
>
|
||||
{uploadedSet.has(today) ? <IconCheck size={16} /> : null}
|
||||
<div>
|
||||
<strong>{uploadedSet.has(today) ? '今日已上传' : '今日尚未上传'}</strong>
|
||||
<p>
|
||||
{today} · {station.stationName}
|
||||
{!uploadedSet.has(today) ? '。上传今日台账后才可新增加氢记录。' : ''}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<section className="h5-panel" data-annotation-id="h5-manual-calendar">
|
||||
<div className="h5-cal-head">
|
||||
<button type="button" className="h5-cal-nav" onClick={() => shiftMonth(-1)} aria-label="上一月">
|
||||
‹
|
||||
</button>
|
||||
<strong className="tabular-nums">
|
||||
{cursorYm.y}年{cursorYm.m}月
|
||||
</strong>
|
||||
<button type="button" className="h5-cal-nav" onClick={() => shiftMonth(1)} aria-label="下一月">
|
||||
›
|
||||
</button>
|
||||
</div>
|
||||
<p className="h5-cal-summary">
|
||||
{firstHydrogenDate
|
||||
? missingInMonth > 0
|
||||
? `本月尚有 ${missingInMonth} 天未上传(自 ${firstHydrogenDate} 起),点选日期可补传`
|
||||
: `本月自 ${firstHydrogenDate} 起截至今日均已上传`
|
||||
: '本站尚无加氢记录,历史日期无需补传'}
|
||||
</p>
|
||||
<div className="h5-cal-week">
|
||||
{WEEK_LABELS.map((w) => (
|
||||
<span key={w}>{w}</span>
|
||||
))}
|
||||
</div>
|
||||
<div className="h5-cal-grid" role="grid" aria-label="手工台账日历">
|
||||
{cells.map((cell) => {
|
||||
const cls = [
|
||||
'h5-cal-day',
|
||||
cell.inMonth ? '' : 'is-out',
|
||||
cell.isFuture ? 'is-future' : '',
|
||||
cell.isToday ? 'is-today' : '',
|
||||
!cell.needsLedger && cell.inMonth && !cell.isFuture ? 'is-before-start' : '',
|
||||
cell.needsLedger && cell.uploaded ? 'is-uploaded' : '',
|
||||
cell.needsLedger && !cell.uploaded ? 'is-missing' : '',
|
||||
selectedDate === cell.dateKey ? 'is-selected' : '',
|
||||
]
|
||||
.filter(Boolean)
|
||||
.join(' ');
|
||||
const statusLabel = cell.isFuture
|
||||
? '未来'
|
||||
: !cell.needsLedger
|
||||
? '无需补传'
|
||||
: cell.uploaded
|
||||
? '已上传'
|
||||
: '未上传';
|
||||
return (
|
||||
<button
|
||||
key={cell.dateKey + (cell.inMonth ? '' : '-o')}
|
||||
type="button"
|
||||
className={cls}
|
||||
disabled={cell.isFuture}
|
||||
onClick={() => selectDay(cell.dateKey, cell.isFuture)}
|
||||
aria-label={`${cell.dateKey}${statusLabel}`}
|
||||
>
|
||||
<span className="tabular-nums">{cell.day}</span>
|
||||
{cell.inMonth && cell.needsLedger ? (
|
||||
<i className={`h5-cal-dot${cell.uploaded ? ' is-on' : ''}`} aria-hidden />
|
||||
) : null}
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
<div className="h5-cal-legend">
|
||||
<span>
|
||||
<i className="h5-cal-dot is-on" /> 已上传
|
||||
</span>
|
||||
<span>
|
||||
<i className="h5-cal-dot" /> 未上传
|
||||
</span>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="h5-panel">
|
||||
<div className="h5-panel-head">
|
||||
<div className="h5-panel-badge" aria-hidden>
|
||||
<IconCamera size={18} />
|
||||
</div>
|
||||
<div>
|
||||
<h3>
|
||||
上传 {selectedDate}
|
||||
{isTodaySelected ? '(今日)' : ''} 手工台账
|
||||
</h3>
|
||||
<p>
|
||||
{selectedUploaded
|
||||
? '该日台账已归档,仅可补传新图,不可删除'
|
||||
: '请拍摄清晰的纸质台账照片,可多张'}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="h5-manual-grid">
|
||||
{draftImages.map((img) => {
|
||||
const archived = isArchivedManualImage(img);
|
||||
return (
|
||||
<div
|
||||
key={img.id}
|
||||
className={`h5-manual-thumb${archived ? ' is-archived' : ''}`}
|
||||
>
|
||||
{img.dataUrl ? (
|
||||
<img src={img.dataUrl} alt={img.name} />
|
||||
) : (
|
||||
<div className="h5-manual-thumb__ph">已归档</div>
|
||||
)}
|
||||
{archived ? (
|
||||
<span className="h5-manual-thumb__badge">已归档</span>
|
||||
) : (
|
||||
<button
|
||||
type="button"
|
||||
className="h5-manual-thumb__del"
|
||||
onClick={() => removeImage(img.id)}
|
||||
>
|
||||
删除
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
<button
|
||||
type="button"
|
||||
className="h5-manual-add"
|
||||
onClick={() => fileRef.current?.click()}
|
||||
disabled={!canEditSelected}
|
||||
aria-label="添加台账照片"
|
||||
>
|
||||
<IconCamera size={22} />
|
||||
<span>拍照/选图</span>
|
||||
</button>
|
||||
</div>
|
||||
<input
|
||||
ref={fileRef}
|
||||
type="file"
|
||||
accept="image/*"
|
||||
multiple
|
||||
capture="environment"
|
||||
className="sr-only"
|
||||
onChange={(e) => {
|
||||
void handleFiles(e.target.files);
|
||||
e.target.value = '';
|
||||
}}
|
||||
/>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
className="h5-btn h5-btn--primary"
|
||||
style={{ width: '100%', marginTop: 14 }}
|
||||
disabled={saving || !canSubmit}
|
||||
onClick={handleSave}
|
||||
>
|
||||
{selectedUploaded ? `确认补传 ${selectedDate}` : `确认上传 ${selectedDate}`}
|
||||
</button>
|
||||
</section>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
55
src/prototypes/oneos-h5-h2-order/components/OrderCard.tsx
Normal file
55
src/prototypes/oneos-h5-h2-order/components/OrderCard.tsx
Normal file
@@ -0,0 +1,55 @@
|
||||
import React from 'react';
|
||||
import type { H5OrderRecord } from '../types';
|
||||
import { formatDateTimeMinute, formatKg, formatMoney, formatPlateDisplay } from '../utils/format';
|
||||
import { IconCheck, IconClock } from './Icons';
|
||||
|
||||
type Props = {
|
||||
order: H5OrderRecord;
|
||||
onClick: () => void;
|
||||
index?: number;
|
||||
};
|
||||
|
||||
export function OrderCard({ order, onClick, index = 0 }: Props) {
|
||||
const verified = order.verifyStatus === 'verified';
|
||||
return (
|
||||
<button
|
||||
type="button"
|
||||
className={`h5-card${verified ? ' h5-card--done' : ' h5-card--pending'}`}
|
||||
data-annotation-id="h5-card"
|
||||
onClick={onClick}
|
||||
style={{ animationDelay: `${Math.min(index, 8) * 40}ms` }}
|
||||
aria-label={`${formatPlateDisplay(order.plateNo)},${verified ? '已核对' : '未核对'}`}
|
||||
>
|
||||
<div className="h5-card-top">
|
||||
<div className="h5-plate">{formatPlateDisplay(order.plateNo)}</div>
|
||||
<span className={`h5-tag ${verified ? 'h5-tag--done' : 'h5-tag--pending'}`}>
|
||||
{verified ? <IconCheck size={12} /> : <IconClock size={12} />}
|
||||
{verified ? '已核对' : '未核对'}
|
||||
</span>
|
||||
</div>
|
||||
<div className="h5-card-meta">
|
||||
<IconClock size={13} />
|
||||
<span className="tabular-nums">{formatDateTimeMinute(order.hydrogenTime)}</span>
|
||||
</div>
|
||||
<div className="h5-card-metrics" aria-label="加氢数据">
|
||||
<div>
|
||||
<span>加氢量</span>
|
||||
<strong>
|
||||
{formatKg(order.hydrogenKg)}
|
||||
<em> kg</em>
|
||||
</strong>
|
||||
</div>
|
||||
<div>
|
||||
<span>加氢总额</span>
|
||||
<strong className="h5-card-metrics__money">¥{formatMoney(order.totalAmount)}</strong>
|
||||
</div>
|
||||
</div>
|
||||
<div className="h5-card-foot">
|
||||
<span>单价 {formatMoney(order.unitPrice)} 元/kg</span>
|
||||
{verified ? (
|
||||
<span className="h5-card-foot__verify">核对 {formatDateTimeMinute(order.verifiedAt)}</span>
|
||||
) : null}
|
||||
</div>
|
||||
</button>
|
||||
);
|
||||
}
|
||||
183
src/prototypes/oneos-h5-h2-order/components/OrderDetail.tsx
Normal file
183
src/prototypes/oneos-h5-h2-order/components/OrderDetail.tsx
Normal file
@@ -0,0 +1,183 @@
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import type { H5OrderRecord } from '../types';
|
||||
import { buildDemoWatermarkedPhoto } from '../utils/demo-photo';
|
||||
import { formatDateTimeMinute, formatKg, formatMileage, formatMoney, formatPlateDisplay } from '../utils/format';
|
||||
import { IconCheck, IconChevronLeft, IconClock } from './Icons';
|
||||
import { PhoneShell } from './PhoneShell';
|
||||
import { isOrderLocked } from '../utils/orders';
|
||||
|
||||
type Props = {
|
||||
order: H5OrderRecord;
|
||||
onBack: () => void;
|
||||
onEdit?: () => void;
|
||||
onDelete?: () => void;
|
||||
};
|
||||
|
||||
export function OrderDetail({ order, onBack, onEdit, onDelete }: Props) {
|
||||
const reconciled = order.reconcileStatus === 'reconciled';
|
||||
const verified = order.verifyStatus === 'verified';
|
||||
const locked = isOrderLocked(order);
|
||||
const [plateSrc, setPlateSrc] = useState(order.platePhotoUrl || '');
|
||||
const [panelSrc, setPanelSrc] = useState(order.panelPhotoUrl || '');
|
||||
|
||||
useEffect(() => {
|
||||
let cancelled = false;
|
||||
setPlateSrc(order.platePhotoUrl || '');
|
||||
setPanelSrc(order.panelPhotoUrl || '');
|
||||
|
||||
async function ensureDemoPhotos() {
|
||||
if (!order.platePhotoUrl) {
|
||||
const url = await buildDemoWatermarkedPhoto({
|
||||
kind: 'plate',
|
||||
plateNo: order.plateNo,
|
||||
stationName: order.stationName,
|
||||
hydrogenTime: order.hydrogenTime,
|
||||
});
|
||||
if (!cancelled && url) setPlateSrc(url);
|
||||
}
|
||||
if (!order.panelPhotoUrl) {
|
||||
const url = await buildDemoWatermarkedPhoto({
|
||||
kind: 'panel',
|
||||
plateNo: order.plateNo,
|
||||
stationName: order.stationName,
|
||||
hydrogenTime: order.hydrogenTime,
|
||||
});
|
||||
if (!cancelled && url) setPanelSrc(url);
|
||||
}
|
||||
}
|
||||
|
||||
if (!order.platePhotoUrl || !order.panelPhotoUrl) {
|
||||
void ensureDemoPhotos();
|
||||
}
|
||||
|
||||
return () => {
|
||||
cancelled = true;
|
||||
};
|
||||
}, [
|
||||
order.id,
|
||||
order.platePhotoUrl,
|
||||
order.panelPhotoUrl,
|
||||
order.plateNo,
|
||||
order.stationName,
|
||||
order.hydrogenTime,
|
||||
]);
|
||||
|
||||
return (
|
||||
<PhoneShell
|
||||
title="加氢记录详情"
|
||||
left={
|
||||
<button type="button" className="h5-nav-btn" onClick={onBack} aria-label="返回">
|
||||
<IconChevronLeft size={20} />
|
||||
</button>
|
||||
}
|
||||
bodyClassName={locked ? undefined : 'h5-body--wizard'}
|
||||
footer={
|
||||
locked ? null : (
|
||||
<div className="h5-action-bar">
|
||||
<button type="button" className="h5-btn h5-btn--danger" onClick={onDelete}>
|
||||
删除
|
||||
</button>
|
||||
<button type="button" className="h5-btn h5-btn--primary" onClick={onEdit}>
|
||||
编辑
|
||||
</button>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
>
|
||||
<section className="h5-panel h5-panel--detail" data-annotation-id="h5-detail">
|
||||
<div className="h5-detail-hero">
|
||||
<div>
|
||||
<div className="h5-plate">{formatPlateDisplay(order.plateNo)}</div>
|
||||
<div className="h5-detail-hero__time tabular-nums">
|
||||
{formatDateTimeMinute(order.hydrogenTime)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="h5-tag-row">
|
||||
<span className={`h5-tag ${verified ? 'h5-tag--done' : 'h5-tag--pending'}`}>
|
||||
{verified ? <IconCheck size={12} /> : <IconClock size={12} />}
|
||||
{verified ? '已核对' : '未核对'}
|
||||
</span>
|
||||
<span className={`h5-tag ${reconciled ? 'h5-tag--done' : 'h5-tag--muted'}`}>
|
||||
{reconciled ? <IconCheck size={12} /> : <IconClock size={12} />}
|
||||
{reconciled ? '已对账' : '未对账'}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="h5-detail-metrics" aria-label="加氢金额与用量">
|
||||
<div>
|
||||
<span>加氢总额</span>
|
||||
<strong>¥{formatMoney(order.totalAmount)}</strong>
|
||||
</div>
|
||||
<div>
|
||||
<span>加氢量</span>
|
||||
<strong>
|
||||
{formatKg(order.hydrogenKg)}
|
||||
<em> kg</em>
|
||||
</strong>
|
||||
</div>
|
||||
</div>
|
||||
<div className="h5-detail-photos" data-annotation-id="h5-detail-photos">
|
||||
<div className="h5-detail-photo">
|
||||
<div className="h5-detail-photo__label">车牌识别原图(含水印)</div>
|
||||
{plateSrc ? (
|
||||
<img src={plateSrc} alt="车牌识别原图(含水印)" />
|
||||
) : (
|
||||
<div className="h5-detail-photo__empty">暂无车牌照片</div>
|
||||
)}
|
||||
</div>
|
||||
<div className="h5-detail-photo">
|
||||
<div className="h5-detail-photo__label">加氢机面板原图(含水印)</div>
|
||||
{panelSrc ? (
|
||||
<img src={panelSrc} alt="加氢机面板原图(含水印)" />
|
||||
) : (
|
||||
<div className="h5-detail-photo__empty">暂无面板照片</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="h5-detail-row h5-detail-row--station">
|
||||
<span>加氢站名称</span>
|
||||
<strong title={order.stationName}>{order.stationName}</strong>
|
||||
</div>
|
||||
<div className="h5-detail-row">
|
||||
<span>车牌号</span>
|
||||
<strong>{formatPlateDisplay(order.plateNo)}</strong>
|
||||
</div>
|
||||
<div className="h5-detail-row">
|
||||
<span>里程</span>
|
||||
<strong>{formatMileage(order.mileageKm)} km</strong>
|
||||
</div>
|
||||
<div className="h5-detail-row">
|
||||
<span>氢气单价</span>
|
||||
<strong>{formatMoney(order.unitPrice)} 元/kg</strong>
|
||||
</div>
|
||||
<div className="h5-detail-row">
|
||||
<span>核对状态</span>
|
||||
<strong>{verified ? '已核对' : '未核对'}</strong>
|
||||
</div>
|
||||
<div className="h5-detail-row">
|
||||
<span>核对时间</span>
|
||||
<strong>{verified ? formatDateTimeMinute(order.verifiedAt) : '—'}</strong>
|
||||
</div>
|
||||
<div className="h5-detail-row">
|
||||
<span>对账状态</span>
|
||||
<strong>{reconciled ? '已对账' : '未对账'}</strong>
|
||||
</div>
|
||||
<div className="h5-detail-row">
|
||||
<span>对账时间</span>
|
||||
<strong>{reconciled ? formatDateTimeMinute(order.reconcileTime) : '—'}</strong>
|
||||
</div>
|
||||
</section>
|
||||
{reconciled ? (
|
||||
<p className="h5-lock-note">
|
||||
<IconCheck size={16} />
|
||||
该记录已纳入站点对账单,不可修改
|
||||
</p>
|
||||
) : verified ? (
|
||||
<p className="h5-lock-note">
|
||||
<IconCheck size={16} />
|
||||
能源部已完成核对,不可修改
|
||||
</p>
|
||||
) : null}
|
||||
</PhoneShell>
|
||||
);
|
||||
}
|
||||
31
src/prototypes/oneos-h5-h2-order/components/PhoneShell.tsx
Normal file
31
src/prototypes/oneos-h5-h2-order/components/PhoneShell.tsx
Normal file
@@ -0,0 +1,31 @@
|
||||
import React from 'react';
|
||||
|
||||
type Props = {
|
||||
title: string;
|
||||
left?: React.ReactNode;
|
||||
right?: React.ReactNode;
|
||||
children: React.ReactNode;
|
||||
bodyClassName?: string;
|
||||
footer?: React.ReactNode;
|
||||
};
|
||||
|
||||
export function PhoneShell({ title, left, right, children, bodyClassName, footer }: Props) {
|
||||
const now = new Date();
|
||||
const timeLabel = `${String(now.getHours()).padStart(2, '0')}:${String(now.getMinutes()).padStart(2, '0')}`;
|
||||
|
||||
return (
|
||||
<div className="h5-phone">
|
||||
<div className="h5-status-bar" aria-hidden>
|
||||
<span>{timeLabel}</span>
|
||||
<span>5G · 86%</span>
|
||||
</div>
|
||||
<header className="h5-nav">
|
||||
<div className="h5-nav-side">{left || null}</div>
|
||||
<h1 className="h5-nav-title">{title}</h1>
|
||||
<div className="h5-nav-side h5-nav-side--end">{right || null}</div>
|
||||
</header>
|
||||
<main className={`h5-body${bodyClassName ? ` ${bodyClassName}` : ''}`}>{children}</main>
|
||||
{footer}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,107 @@
|
||||
import React, { useEffect, useState } from 'react';
|
||||
|
||||
type Props = {
|
||||
open: boolean;
|
||||
value: string;
|
||||
onClose: () => void;
|
||||
onConfirm: (next: string) => void;
|
||||
};
|
||||
|
||||
const PROVINCES = [
|
||||
'京', '津', '沪', '渝', '冀', '豫', '云', '辽', '黑', '湘',
|
||||
'皖', '鲁', '新', '苏', '浙', '赣', '鄂', '桂', '甘', '晋',
|
||||
'蒙', '陕', '吉', '闽', '贵', '粤', '青', '藏', '川', '宁', '琼',
|
||||
];
|
||||
|
||||
const LETTERS = 'ABCDEFGHJKLMNPQRSTUVWXYZ'.split('');
|
||||
const DIGITS = '0123456789'.split('');
|
||||
const SPECIAL = ['学', '挂', '警', '港', '澳'];
|
||||
|
||||
const MAX_LEN = 8;
|
||||
|
||||
export function PlateKeyboardSheet({ open, value, onClose, onConfirm }: Props) {
|
||||
const [draft, setDraft] = useState(value);
|
||||
|
||||
useEffect(() => {
|
||||
if (open) setDraft(String(value || '').toUpperCase().replace(/F$/u, ''));
|
||||
}, [open, value]);
|
||||
|
||||
if (!open) return null;
|
||||
|
||||
const needProvince = draft.length === 0;
|
||||
|
||||
function append(ch: string) {
|
||||
setDraft((prev) => {
|
||||
if (prev.length >= MAX_LEN) return prev;
|
||||
return `${prev}${ch}`.slice(0, MAX_LEN);
|
||||
});
|
||||
}
|
||||
|
||||
function backspace() {
|
||||
setDraft((prev) => prev.slice(0, -1));
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="h5-sheet-root" role="dialog" aria-modal="true" aria-label="输入车牌号">
|
||||
<button type="button" className="h5-sheet-mask" aria-label="关闭" onClick={onClose} />
|
||||
<div className="h5-sheet h5-sheet--plate">
|
||||
<div className="h5-sheet-bar">
|
||||
<button type="button" className="h5-sheet-bar-btn" onClick={onClose}>
|
||||
取消
|
||||
</button>
|
||||
<strong>车牌号</strong>
|
||||
<button
|
||||
type="button"
|
||||
className="h5-sheet-bar-btn h5-sheet-bar-btn--ok"
|
||||
disabled={draft.length < 7}
|
||||
onClick={() => onConfirm(draft)}
|
||||
>
|
||||
完成
|
||||
</button>
|
||||
</div>
|
||||
<div className="h5-plate-draft" aria-live="polite">
|
||||
{draft || <span className="h5-plate-draft__ph">请输入车牌号</span>}
|
||||
</div>
|
||||
<div className="h5-plate-keys">
|
||||
{needProvince
|
||||
? PROVINCES.map((p) => (
|
||||
<button key={p} type="button" className="h5-plate-key" onClick={() => append(p)}>
|
||||
{p}
|
||||
</button>
|
||||
))
|
||||
: (
|
||||
<>
|
||||
{LETTERS.map((ch) => (
|
||||
<button key={ch} type="button" className="h5-plate-key" onClick={() => append(ch)}>
|
||||
{ch}
|
||||
</button>
|
||||
))}
|
||||
{DIGITS.map((ch) => (
|
||||
<button key={ch} type="button" className="h5-plate-key" onClick={() => append(ch)}>
|
||||
{ch}
|
||||
</button>
|
||||
))}
|
||||
{SPECIAL.map((ch) => (
|
||||
<button key={ch} type="button" className="h5-plate-key h5-plate-key--soft" onClick={() => append(ch)}>
|
||||
{ch}
|
||||
</button>
|
||||
))}
|
||||
</>
|
||||
)}
|
||||
<button type="button" className="h5-plate-key h5-plate-key--wide" onClick={backspace}>
|
||||
删除
|
||||
</button>
|
||||
{!needProvince ? (
|
||||
<button
|
||||
type="button"
|
||||
className="h5-plate-key h5-plate-key--wide"
|
||||
onClick={() => setDraft('')}
|
||||
>
|
||||
重选省份
|
||||
</button>
|
||||
) : null}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
401
src/prototypes/oneos-h5-h2-order/index.tsx
Normal file
401
src/prototypes/oneos-h5-h2-order/index.tsx
Normal file
@@ -0,0 +1,401 @@
|
||||
/**
|
||||
* @name 加氢订单
|
||||
* 加氢站手机浏览器 H5:本站加氢记录列表、OCR 新增、与站点对账单联动
|
||||
*/
|
||||
import '../../common/h2VehicleLedgerBridge.js';
|
||||
import '../../common/h2DispenserBrandStore.js';
|
||||
import './styles/index.css';
|
||||
|
||||
import React, { useEffect, useMemo, useState } from 'react';
|
||||
import {
|
||||
type AnnotationSourceDocument,
|
||||
type AnnotationViewerOptions,
|
||||
} from '@axhub/annotation';
|
||||
import { PrototypeAnnotationHost } from '../../common/prototype-annotation-host';
|
||||
import { clearHostPrototypeRouteInfo } from '../../common/useHashPage';
|
||||
import annotationSourceDocument from './annotation-source.json';
|
||||
import { CreateWizard } from './components/CreateWizard';
|
||||
import {
|
||||
IconCamera,
|
||||
IconChevronLeft,
|
||||
IconDroplet,
|
||||
IconInbox,
|
||||
IconList,
|
||||
IconMapPin,
|
||||
IconPlus,
|
||||
IconWallet,
|
||||
} from './components/Icons';
|
||||
import { ManualLedgerPanel } from './components/ManualLedgerPanel';
|
||||
import { OrderCard } from './components/OrderCard';
|
||||
import { OrderDetail } from './components/OrderDetail';
|
||||
import { PhoneShell } from './components/PhoneShell';
|
||||
import type { AppView, CreateDraft, StationOption } from './types';
|
||||
import { formatDateTimeMinute, formatKg, formatMoney, nowDateTimeMinute } from './utils/format';
|
||||
import { hasManualLedgerForDate } from './utils/manual-ledger';
|
||||
import {
|
||||
findDuplicateStationOrder,
|
||||
getTotalAmountMismatch,
|
||||
isOrderLocked,
|
||||
listOrdersForStation,
|
||||
listStations,
|
||||
removeStationOrder,
|
||||
subscribeOrders,
|
||||
summarizeOrders,
|
||||
upsertStationOrder,
|
||||
} from './utils/orders';
|
||||
|
||||
function emptyDraft(partial?: Partial<CreateDraft>): CreateDraft {
|
||||
return {
|
||||
hydrogenTime: nowDateTimeMinute(),
|
||||
plateNo: '',
|
||||
mileageKm: '',
|
||||
unitPrice: '',
|
||||
hydrogenKg: '',
|
||||
totalAmount: '',
|
||||
platePreviewUrl: '',
|
||||
panelPreviewUrl: '',
|
||||
...partial,
|
||||
};
|
||||
}
|
||||
|
||||
export default function OneosH5H2Order() {
|
||||
useEffect(() => {
|
||||
clearHostPrototypeRouteInfo();
|
||||
}, []);
|
||||
|
||||
const stations = useMemo(() => listStations(), []);
|
||||
/** 已登录本站(原型固定演示站,不提供切换) */
|
||||
const station: StationOption = useMemo(
|
||||
() => stations[0] || { stationId: 'JX-H2-001', stationName: '中国石油中油高新能源牙谷加油加氢站' },
|
||||
[stations],
|
||||
);
|
||||
const [tick, setTick] = useState(0);
|
||||
const [view, setView] = useState<AppView>({ name: 'list' });
|
||||
const [mainTab, setMainTab] = useState<'orders' | 'manual'>('orders');
|
||||
const [toast, setToast] = useState('');
|
||||
|
||||
useEffect(() => {
|
||||
return subscribeOrders(() => setTick((n) => n + 1));
|
||||
}, []);
|
||||
|
||||
const orders = useMemo(
|
||||
() => listOrdersForStation(station.stationName),
|
||||
[station.stationName, tick],
|
||||
);
|
||||
const summary = useMemo(() => summarizeOrders(orders), [orders]);
|
||||
|
||||
function showToast(msg: string) {
|
||||
setToast(msg);
|
||||
window.setTimeout(() => setToast(''), 2400);
|
||||
}
|
||||
|
||||
function openCreate() {
|
||||
if (!hasManualLedgerForDate(station.stationId || station.stationName)) {
|
||||
showToast('请先上传今日手工台账');
|
||||
setMainTab('manual');
|
||||
setView({ name: 'list' });
|
||||
return;
|
||||
}
|
||||
const draft = emptyDraft();
|
||||
setView({
|
||||
name: 'create',
|
||||
mode: 'create',
|
||||
draft,
|
||||
initialDraft: { ...draft },
|
||||
});
|
||||
}
|
||||
|
||||
function openEdit(id: string) {
|
||||
const order = orders.find((item) => item.id === id);
|
||||
if (!order || isOrderLocked(order)) return;
|
||||
const draft = emptyDraft({
|
||||
id: order.id,
|
||||
hydrogenTime:
|
||||
formatDateTimeMinute(order.hydrogenTime) === '—'
|
||||
? nowDateTimeMinute()
|
||||
: order.hydrogenTime.slice(0, 16),
|
||||
plateNo: order.plateNo.replace(/F$/u, ''),
|
||||
mileageKm: order.mileageKm != null ? String(order.mileageKm) : '',
|
||||
unitPrice: String(order.unitPrice),
|
||||
hydrogenKg: String(order.hydrogenKg),
|
||||
totalAmount: String(order.totalAmount),
|
||||
platePreviewUrl: order.platePhotoUrl || '',
|
||||
panelPreviewUrl: order.panelPhotoUrl || '',
|
||||
});
|
||||
setView({
|
||||
name: 'create',
|
||||
mode: 'edit',
|
||||
draft,
|
||||
initialDraft: { ...draft },
|
||||
});
|
||||
}
|
||||
|
||||
function handleSubmit() {
|
||||
if (view.name !== 'create') return;
|
||||
const { draft, mode } = view;
|
||||
const unitPrice = Number(draft.unitPrice);
|
||||
const hydrogenKg = Number(draft.hydrogenKg);
|
||||
const totalAmount = Number(draft.totalAmount);
|
||||
if (!draft.plateNo.trim() || !Number.isFinite(unitPrice) || !Number.isFinite(hydrogenKg) || !Number.isFinite(totalAmount)) {
|
||||
showToast('请完善加氢信息');
|
||||
return;
|
||||
}
|
||||
let mileageKm: number | null = null;
|
||||
const mileageRaw = draft.mileageKm.trim();
|
||||
if (mileageRaw) {
|
||||
const n = Number(mileageRaw);
|
||||
if (!Number.isFinite(n) || n < 0) {
|
||||
showToast('里程须为不小于 0 的数字');
|
||||
return;
|
||||
}
|
||||
mileageKm = Math.round(n);
|
||||
}
|
||||
if (
|
||||
findDuplicateStationOrder({
|
||||
id: draft.id,
|
||||
stationName: station.stationName,
|
||||
plateNo: draft.plateNo.trim(),
|
||||
hydrogenTime: draft.hydrogenTime,
|
||||
})
|
||||
) {
|
||||
showToast('已存在相同加氢站、车牌号与加氢时间的记录');
|
||||
return;
|
||||
}
|
||||
const mismatch = getTotalAmountMismatch(unitPrice, hydrogenKg, totalAmount);
|
||||
if (mismatch) {
|
||||
const ok = window.confirm(
|
||||
`加氢总额与单价×量不一致:应为 ${mismatch.expected.toFixed(2)} 元,当前 ${mismatch.actual.toFixed(2)} 元。仍要保存吗?`,
|
||||
);
|
||||
if (!ok) return;
|
||||
}
|
||||
const saved = upsertStationOrder({
|
||||
id: draft.id,
|
||||
stationId: station.stationId,
|
||||
stationName: station.stationName,
|
||||
hydrogenTime: draft.hydrogenTime,
|
||||
plateNo: draft.plateNo.trim(),
|
||||
mileageKm,
|
||||
unitPrice,
|
||||
hydrogenKg,
|
||||
totalAmount,
|
||||
platePhotoUrl: draft.platePreviewUrl || '',
|
||||
panelPhotoUrl: draft.panelPreviewUrl || '',
|
||||
});
|
||||
if (!saved) {
|
||||
showToast('保存失败,请刷新后重试');
|
||||
return;
|
||||
}
|
||||
setTick((n) => n + 1);
|
||||
setView({ name: 'list' });
|
||||
showToast(mode === 'edit' ? '已更新加氢记录' : '已新增加氢记录');
|
||||
}
|
||||
|
||||
function handleDelete(id: string) {
|
||||
const order = orders.find((item) => item.id === id);
|
||||
if (!order || isOrderLocked(order)) return;
|
||||
if (!window.confirm(`确认删除车牌 ${order.plateNo.replace(/F$/u, '')} 的未对账记录?`)) return;
|
||||
removeStationOrder(id);
|
||||
setTick((n) => n + 1);
|
||||
setView({ name: 'list' });
|
||||
showToast('已删除');
|
||||
}
|
||||
|
||||
const annotationPageId =
|
||||
view.name === 'create' ? 'create' : view.name === 'detail' ? 'detail' : 'list';
|
||||
|
||||
const annotationOptions = useMemo<AnnotationViewerOptions>(
|
||||
() => ({
|
||||
showToolbar: true,
|
||||
showThemeToggle: true,
|
||||
showColorFilter: true,
|
||||
emptyWhenNoData: false,
|
||||
toolbarEdge: 'right',
|
||||
currentPageId: annotationPageId,
|
||||
}),
|
||||
[annotationPageId],
|
||||
);
|
||||
|
||||
let content: React.ReactNode = null;
|
||||
|
||||
if (view.name === 'create') {
|
||||
content = (
|
||||
<CreateWizard
|
||||
mode={view.mode}
|
||||
draft={view.draft}
|
||||
initialDraft={view.initialDraft}
|
||||
stationName={station.stationName}
|
||||
onChangeDraft={(patch) =>
|
||||
setView((prev) =>
|
||||
prev.name === 'create' ? { ...prev, draft: { ...prev.draft, ...patch } } : prev,
|
||||
)
|
||||
}
|
||||
onBack={() => setView({ name: 'list' })}
|
||||
onSubmit={handleSubmit}
|
||||
toast={toast}
|
||||
/>
|
||||
);
|
||||
} else if (view.name === 'detail') {
|
||||
const order = orders.find((item) => item.id === view.id);
|
||||
content = order ? (
|
||||
<OrderDetail
|
||||
order={order}
|
||||
onBack={() => setView({ name: 'list' })}
|
||||
onEdit={() => openEdit(order.id)}
|
||||
onDelete={() => handleDelete(order.id)}
|
||||
/>
|
||||
) : (
|
||||
<PhoneShell
|
||||
title="加氢记录详情"
|
||||
left={
|
||||
<button
|
||||
type="button"
|
||||
className="h5-nav-btn"
|
||||
onClick={() => setView({ name: 'list' })}
|
||||
aria-label="返回"
|
||||
>
|
||||
<IconChevronLeft size={20} />
|
||||
</button>
|
||||
}
|
||||
>
|
||||
<div className="h5-empty">
|
||||
<div className="h5-empty-icon" aria-hidden>
|
||||
<IconInbox size={36} />
|
||||
</div>
|
||||
<strong>记录不存在</strong>
|
||||
请返回列表查看
|
||||
</div>
|
||||
</PhoneShell>
|
||||
);
|
||||
} else {
|
||||
const todayUploaded = hasManualLedgerForDate(station.stationId || station.stationName);
|
||||
content = (
|
||||
<PhoneShell
|
||||
title={mainTab === 'manual' ? '手工台账' : '加氢订单'}
|
||||
bodyClassName="h5-body--list"
|
||||
footer={
|
||||
<>
|
||||
{mainTab === 'orders' ? (
|
||||
<div className="h5-fab-dock" data-annotation-id="h5-fab-dock">
|
||||
{!todayUploaded ? (
|
||||
<p className="h5-fab-dock__hint">今日未上传手工台账,无法新增电子记录</p>
|
||||
) : null}
|
||||
<button
|
||||
type="button"
|
||||
className="h5-fab"
|
||||
data-annotation-id="h5-fab"
|
||||
onClick={openCreate}
|
||||
aria-label="新增加氢记录"
|
||||
>
|
||||
<IconPlus size={22} />
|
||||
<span className="h5-fab-label">新增</span>
|
||||
</button>
|
||||
</div>
|
||||
) : null}
|
||||
<nav className="h5-tabbar" aria-label="主导航">
|
||||
<button
|
||||
type="button"
|
||||
className={`h5-tabbar-item${mainTab === 'orders' ? ' is-active' : ''}`}
|
||||
onClick={() => setMainTab('orders')}
|
||||
>
|
||||
<IconList size={18} />
|
||||
加氢订单
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className={`h5-tabbar-item${mainTab === 'manual' ? ' is-active' : ''}`}
|
||||
onClick={() => setMainTab('manual')}
|
||||
>
|
||||
<IconCamera size={18} />
|
||||
手工台账
|
||||
{!todayUploaded ? <span className="h5-tabbar-dot" aria-label="今日未上传" /> : null}
|
||||
</button>
|
||||
</nav>
|
||||
{toast ? (
|
||||
<div className="h5-toast h5-toast--above-dock" role="status" aria-live="polite">
|
||||
{toast}
|
||||
</div>
|
||||
) : null}
|
||||
</>
|
||||
}
|
||||
>
|
||||
{mainTab === 'manual' ? (
|
||||
<ManualLedgerPanel
|
||||
station={station}
|
||||
tick={tick}
|
||||
showToast={showToast}
|
||||
onUploaded={() => setTick((n) => n + 1)}
|
||||
/>
|
||||
) : (
|
||||
<>
|
||||
<div className="h5-hero" data-annotation-id="h5-hero" aria-label="当前站点">
|
||||
<div className="h5-hero-label">
|
||||
<IconMapPin size={13} />
|
||||
当前站点
|
||||
</div>
|
||||
<div className="h5-hero-station">{station.stationName}</div>
|
||||
</div>
|
||||
|
||||
<div className="h5-summary" data-annotation-id="h5-summary" aria-label="本站汇总">
|
||||
<div className="h5-summary-chip">
|
||||
<div className="h5-summary-chip-icon" aria-hidden>
|
||||
<IconList size={15} />
|
||||
</div>
|
||||
<strong>{summary.count}</strong>
|
||||
<span>订单数</span>
|
||||
</div>
|
||||
<div className="h5-summary-chip">
|
||||
<div className="h5-summary-chip-icon" aria-hidden>
|
||||
<IconDroplet size={15} />
|
||||
</div>
|
||||
<strong>{formatKg(summary.totalKg)}</strong>
|
||||
<span>加氢量 kg</span>
|
||||
</div>
|
||||
<div className="h5-summary-chip">
|
||||
<div className="h5-summary-chip-icon" aria-hidden>
|
||||
<IconWallet size={15} />
|
||||
</div>
|
||||
<strong>{formatMoney(summary.totalAmount)}</strong>
|
||||
<span>加氢金额</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{orders.length === 0 ? (
|
||||
<div className="h5-empty">
|
||||
<div className="h5-empty-icon" aria-hidden>
|
||||
<IconInbox size={36} />
|
||||
</div>
|
||||
<strong>本站暂无加氢记录</strong>
|
||||
点击下方「新增」开始上报第一笔订单
|
||||
</div>
|
||||
) : (
|
||||
<section className="h5-list-section" aria-label="加氢记录列表">
|
||||
<div className="h5-list-head">
|
||||
<h2 className="h5-list-head__title">加氢记录</h2>
|
||||
<span className="h5-list-head__count tabular-nums">共 {orders.length} 条</span>
|
||||
</div>
|
||||
{orders.map((order, index) => (
|
||||
<OrderCard
|
||||
key={order.id}
|
||||
order={order}
|
||||
index={index}
|
||||
onClick={() => setView({ name: 'detail', id: order.id })}
|
||||
/>
|
||||
))}
|
||||
</section>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</PhoneShell>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="h5-h2-order-page" data-ax="h5-h2-order-root">
|
||||
{content}
|
||||
<PrototypeAnnotationHost
|
||||
source={annotationSourceDocument as AnnotationSourceDocument}
|
||||
options={annotationOptions}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,416 @@
|
||||
/**
|
||||
* 从 .spec/*.md 生成 annotation-source.json
|
||||
* 用法:node src/prototypes/oneos-h5-h2-order/scripts/build-annotation-source.mjs
|
||||
*/
|
||||
import fs from 'node:fs';
|
||||
import path from 'node:path';
|
||||
import { fileURLToPath } from 'node:url';
|
||||
|
||||
const __dirname = path.dirname(fileURLToPath(import.meta.url));
|
||||
const root = path.resolve(__dirname, '..');
|
||||
const specDir = path.join(root, '.spec');
|
||||
const outFile = path.join(root, 'annotation-source.json');
|
||||
const now = Date.now();
|
||||
|
||||
function readMd(name) {
|
||||
return fs.readFileSync(path.join(specDir, name), 'utf8');
|
||||
}
|
||||
|
||||
function node(partial) {
|
||||
return {
|
||||
images: [],
|
||||
controls: [],
|
||||
createdAt: now,
|
||||
updatedAt: now,
|
||||
hasMarkdown: true,
|
||||
annotationText: '',
|
||||
...partial,
|
||||
};
|
||||
}
|
||||
|
||||
const mdPrd = readMd('requirements-prd.md');
|
||||
const mdList = readMd('feature-list.md');
|
||||
const mdCreate = readMd('feature-create.md');
|
||||
const mdDetail = readMd('feature-detail.md');
|
||||
const mdManual = readMd('feature-manual-ledger.md');
|
||||
const mdFleet = readMd('fleet-plate-tag.md');
|
||||
const mdReconcile = readMd('reconcile-linkage.md');
|
||||
|
||||
const source = {
|
||||
documentVersion: 1,
|
||||
format: 'axhub-annotation-source',
|
||||
data: {
|
||||
version: 2,
|
||||
prototypeName: 'oneos-h5-h2-order',
|
||||
pageId: 'list',
|
||||
updatedAt: now,
|
||||
nodes: [
|
||||
node({
|
||||
id: 'h5-hero',
|
||||
index: 1,
|
||||
title: '当前站点',
|
||||
pageId: 'list',
|
||||
color: '#7AB929',
|
||||
locator: {
|
||||
selectors: ["[data-annotation-id='h5-hero']", '.h5-hero'],
|
||||
fingerprint: 'hero|list',
|
||||
path: [],
|
||||
},
|
||||
}),
|
||||
node({
|
||||
id: 'h5-summary',
|
||||
index: 2,
|
||||
title: '本站 KPI',
|
||||
pageId: 'list',
|
||||
color: '#0E8A7B',
|
||||
locator: {
|
||||
selectors: ["[data-annotation-id='h5-summary']", '.h5-summary'],
|
||||
fingerprint: 'summary|list',
|
||||
path: [],
|
||||
},
|
||||
}),
|
||||
node({
|
||||
id: 'h5-card',
|
||||
index: 3,
|
||||
title: '订单卡片',
|
||||
pageId: 'list',
|
||||
color: '#FF7D00',
|
||||
locator: {
|
||||
selectors: ["[data-annotation-id='h5-card']", '.h5-card'],
|
||||
fingerprint: 'card|list',
|
||||
path: [],
|
||||
},
|
||||
}),
|
||||
node({
|
||||
id: 'h5-fab',
|
||||
index: 4,
|
||||
title: '底栏新增',
|
||||
pageId: 'list',
|
||||
color: '#7AB929',
|
||||
locator: {
|
||||
selectors: ["[data-annotation-id='h5-fab']", '.h5-fab'],
|
||||
fingerprint: 'fab|list',
|
||||
path: [],
|
||||
},
|
||||
}),
|
||||
node({
|
||||
id: 'h5-time',
|
||||
index: 5,
|
||||
title: '加氢时间',
|
||||
pageId: 'create',
|
||||
color: '#7AB929',
|
||||
locator: {
|
||||
selectors: ["[data-annotation-id='h5-time']", '#h5-time'],
|
||||
fingerprint: 'field|h5-time',
|
||||
path: [],
|
||||
},
|
||||
}),
|
||||
node({
|
||||
id: 'h5-station',
|
||||
index: 6,
|
||||
title: '加氢站名称',
|
||||
pageId: 'create',
|
||||
color: '#86909C',
|
||||
locator: {
|
||||
selectors: ["[data-annotation-id='h5-station']", '#h5-station'],
|
||||
fingerprint: 'field|h5-station',
|
||||
path: [],
|
||||
},
|
||||
}),
|
||||
node({
|
||||
id: 'h5-plate',
|
||||
index: 7,
|
||||
title: '车牌号',
|
||||
pageId: 'create',
|
||||
color: '#FF7D00',
|
||||
locator: {
|
||||
selectors: ["[data-annotation-id='h5-plate']", '#h5-plate'],
|
||||
fingerprint: 'field|h5-plate',
|
||||
path: [],
|
||||
},
|
||||
}),
|
||||
node({
|
||||
id: 'h5-mileage',
|
||||
index: 8,
|
||||
title: '里程',
|
||||
pageId: 'create',
|
||||
color: '#0E8A7B',
|
||||
locator: {
|
||||
selectors: ["[data-annotation-id='h5-mileage']", '#h5-mileage'],
|
||||
fingerprint: 'field|h5-mileage',
|
||||
path: [],
|
||||
},
|
||||
}),
|
||||
node({
|
||||
id: 'h5-dispenser-brands',
|
||||
index: 9,
|
||||
title: '加氢机品牌参考',
|
||||
pageId: 'create',
|
||||
color: '#7C3AED',
|
||||
locator: {
|
||||
selectors: ["[data-annotation-id='h5-dispenser-brands']", '.h5-brand-hint'],
|
||||
fingerprint: 'hint|dispenser-brands',
|
||||
path: [],
|
||||
},
|
||||
}),
|
||||
node({
|
||||
id: 'h5-price',
|
||||
index: 10,
|
||||
title: '氢气单价',
|
||||
pageId: 'create',
|
||||
color: '#7AB929',
|
||||
locator: {
|
||||
selectors: ["[data-annotation-id='h5-price']", '#h5-price'],
|
||||
fingerprint: 'field|h5-price',
|
||||
path: [],
|
||||
},
|
||||
}),
|
||||
node({
|
||||
id: 'h5-kg',
|
||||
index: 11,
|
||||
title: '加氢量',
|
||||
pageId: 'create',
|
||||
color: '#7AB929',
|
||||
locator: {
|
||||
selectors: ["[data-annotation-id='h5-kg']", '#h5-kg'],
|
||||
fingerprint: 'field|h5-kg',
|
||||
path: [],
|
||||
},
|
||||
}),
|
||||
node({
|
||||
id: 'h5-total-label',
|
||||
index: 12,
|
||||
title: '加氢总额',
|
||||
pageId: 'create',
|
||||
color: '#0E8A7B',
|
||||
locator: {
|
||||
selectors: ["[data-annotation-id='h5-total-label']", '#h5-total'],
|
||||
fingerprint: 'field|h5-total',
|
||||
path: [],
|
||||
},
|
||||
}),
|
||||
node({
|
||||
id: 'h5-detail',
|
||||
index: 13,
|
||||
title: '记录详情',
|
||||
pageId: 'detail',
|
||||
color: '#FF7D00',
|
||||
locator: {
|
||||
selectors: ["[data-annotation-id='h5-detail']", '.h5-panel--detail'],
|
||||
fingerprint: 'detail|panel',
|
||||
path: [],
|
||||
},
|
||||
}),
|
||||
node({
|
||||
id: 'h5-detail-photos',
|
||||
index: 14,
|
||||
title: '识别原图',
|
||||
pageId: 'detail',
|
||||
color: '#0E8A7B',
|
||||
locator: {
|
||||
selectors: ["[data-annotation-id='h5-detail-photos']", '.h5-detail-photos'],
|
||||
fingerprint: 'detail|photos',
|
||||
path: [],
|
||||
},
|
||||
}),
|
||||
node({
|
||||
id: 'h5-manual',
|
||||
index: 15,
|
||||
title: '手工台账',
|
||||
pageId: 'manual',
|
||||
color: '#7AB929',
|
||||
locator: {
|
||||
selectors: ["[data-annotation-id='h5-manual']", '.h5-manual'],
|
||||
fingerprint: 'manual|panel',
|
||||
path: [],
|
||||
},
|
||||
}),
|
||||
node({
|
||||
id: 'h5-manual-calendar',
|
||||
index: 16,
|
||||
title: '台账日历',
|
||||
pageId: 'manual',
|
||||
color: '#0E8A7B',
|
||||
locator: {
|
||||
selectors: ["[data-annotation-id='h5-manual-calendar']", '.h5-cal-grid'],
|
||||
fingerprint: 'manual|calendar',
|
||||
path: [],
|
||||
},
|
||||
}),
|
||||
],
|
||||
},
|
||||
markdownMap: {
|
||||
'h5-hero':
|
||||
'## 当前站点\n\n只读展示登录账号对应加氢站,列表页不提供切站。\n\n详见 [本站列表](feature-list)。',
|
||||
'h5-summary':
|
||||
'## 本站 KPI\n\n订单数 / 加氢量(kg) / 加氢金额,随本站列表实时汇总。\n\n详见功能说明「本站列表与 KPI」。',
|
||||
'h5-card': mdList,
|
||||
'h5-fab':
|
||||
'## 底栏新增\n\n固定在列表底部,不遮挡卡片滚动区。点击进入新增表单,加氢时间默认=点击时刻。\n\n详见功能说明「新增加氢记录」。',
|
||||
'h5-time':
|
||||
'## 加氢时间(必填)\n\n默认=点击「新增」时的当前时间;点击后底部弹层选择日期 + 时 + 分。',
|
||||
'h5-station':
|
||||
'## 加氢站名称\n\n只读。默认显示当前登录账号对应加氢站名称,不可切换。',
|
||||
'h5-plate': mdFleet,
|
||||
'h5-mileage':
|
||||
'## 里程(km)\n\n选填。支持「从车机获取」(原型 Mock);识别车牌后可自动回填。正式环境对接车机 / T-Box。\n\n详见 [新增加氢记录](feature-create)。',
|
||||
'h5-dispenser-brands':
|
||||
'## 加氢机品牌参考\n\n展示站点信息「加氢机品牌管理」维护的品牌·型号,供面板 OCR 模型判断参考。数据源:`h2DispenserBrandStore`。',
|
||||
'h5-price':
|
||||
'## 氢气单价(必填)\n\n可 OCR 识别后校正;变更后自动重算加氢总额(单价×加氢量)。',
|
||||
'h5-kg':
|
||||
'## 加氢量(必填)\n\n可 OCR 识别后校正;变更后自动重算加氢总额。',
|
||||
'h5-total-label':
|
||||
'## 加氢总额(元)\n\n只读展示;由单价×加氢量自动计算(两位小数)。界面标签不展示公式文案。',
|
||||
'h5-detail': mdDetail,
|
||||
'h5-detail-photos':
|
||||
'## 识别原图(含水印)\n\n详情展示车牌识别、加氢机面板的原始照片;照片在拍摄/选图时已叠加时间与地点水印并随记录保存。种子数据无实拍时用演示水印图。\n\n详见 [详情编辑删除](feature-detail)。',
|
||||
'h5-manual': mdManual,
|
||||
'h5-manual-calendar':
|
||||
'## 台账日历\n\n自本站首笔加氢记录日起:绿=已上传,橙=未上传;首笔之前无需补传。禁选未来日。点选范围内未传日可补传。仅「今日」是否上传影响新增加氢记录。\n\n详见 [手工台账上传](feature-manual-ledger)。',
|
||||
},
|
||||
assetMap: {},
|
||||
directory: {
|
||||
nodes: [
|
||||
{
|
||||
type: 'folder',
|
||||
id: 'h5-doc-root',
|
||||
title: '加氢订单(H5)说明',
|
||||
defaultExpanded: true,
|
||||
children: [
|
||||
{
|
||||
type: 'markdown',
|
||||
id: 'h5-doc-prd',
|
||||
title: 'PRD 全文',
|
||||
markdown: mdPrd,
|
||||
markdownPath: '.spec/requirements-prd.md',
|
||||
},
|
||||
{
|
||||
type: 'folder',
|
||||
id: 'h5-doc-features',
|
||||
title: '功能说明',
|
||||
defaultExpanded: true,
|
||||
children: [
|
||||
{
|
||||
type: 'markdown',
|
||||
id: 'h5-doc-list',
|
||||
title: '本站列表与 KPI',
|
||||
markdown: mdList,
|
||||
markdownPath: '.spec/feature-list.md',
|
||||
},
|
||||
{
|
||||
type: 'markdown',
|
||||
id: 'h5-doc-create',
|
||||
title: '新增加氢记录',
|
||||
markdown: mdCreate,
|
||||
markdownPath: '.spec/feature-create.md',
|
||||
},
|
||||
{
|
||||
type: 'markdown',
|
||||
id: 'h5-doc-manual',
|
||||
title: '手工台账上传',
|
||||
markdown: mdManual,
|
||||
markdownPath: '.spec/feature-manual-ledger.md',
|
||||
},
|
||||
{
|
||||
type: 'markdown',
|
||||
id: 'h5-doc-detail',
|
||||
title: '详情编辑删除',
|
||||
markdown: mdDetail,
|
||||
markdownPath: '.spec/feature-detail.md',
|
||||
},
|
||||
{
|
||||
type: 'markdown',
|
||||
id: 'h5-doc-fleet',
|
||||
title: '羚牛车辆标签',
|
||||
markdown: mdFleet,
|
||||
markdownPath: '.spec/fleet-plate-tag.md',
|
||||
},
|
||||
{
|
||||
type: 'markdown',
|
||||
id: 'h5-doc-reconcile',
|
||||
title: '核对与对账联动',
|
||||
markdown: mdReconcile,
|
||||
markdownPath: '.spec/reconcile-linkage.md',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
type: 'folder',
|
||||
id: 'h5-doc-pages',
|
||||
title: '按页面',
|
||||
defaultExpanded: true,
|
||||
children: [
|
||||
{
|
||||
type: 'folder',
|
||||
id: 'h5-page-list',
|
||||
title: '列表页',
|
||||
defaultExpanded: true,
|
||||
children: [
|
||||
{
|
||||
type: 'route',
|
||||
id: 'h5-route-list',
|
||||
title: 'list',
|
||||
route: 'list',
|
||||
payload: { pageId: 'list' },
|
||||
},
|
||||
{
|
||||
type: 'markdown',
|
||||
id: 'h5-page-list-md',
|
||||
title: '列表页要点',
|
||||
markdown: mdList,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
type: 'folder',
|
||||
id: 'h5-page-create',
|
||||
title: '新增页',
|
||||
defaultExpanded: true,
|
||||
children: [
|
||||
{
|
||||
type: 'route',
|
||||
id: 'h5-route-create',
|
||||
title: 'create',
|
||||
route: 'create',
|
||||
payload: { pageId: 'create' },
|
||||
},
|
||||
{
|
||||
type: 'markdown',
|
||||
id: 'h5-page-create-md',
|
||||
title: '新增页要点',
|
||||
markdown: mdCreate,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
type: 'folder',
|
||||
id: 'h5-page-detail',
|
||||
title: '详情页',
|
||||
defaultExpanded: true,
|
||||
children: [
|
||||
{
|
||||
type: 'route',
|
||||
id: 'h5-route-detail',
|
||||
title: 'detail',
|
||||
route: 'detail',
|
||||
payload: { pageId: 'detail' },
|
||||
},
|
||||
{
|
||||
type: 'markdown',
|
||||
id: 'h5-page-detail-md',
|
||||
title: '详情页要点',
|
||||
markdown: mdDetail,
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
};
|
||||
|
||||
fs.writeFileSync(outFile, `${JSON.stringify(source, null, 2)}\n`, 'utf8');
|
||||
console.log(`Wrote ${path.relative(process.cwd(), outFile)} (${source.data.nodes.length} markers)`);
|
||||
1721
src/prototypes/oneos-h5-h2-order/styles/index.css
Normal file
1721
src/prototypes/oneos-h5-h2-order/styles/index.css
Normal file
File diff suppressed because it is too large
Load Diff
50
src/prototypes/oneos-h5-h2-order/types.ts
Normal file
50
src/prototypes/oneos-h5-h2-order/types.ts
Normal file
@@ -0,0 +1,50 @@
|
||||
export type ReconcileStatus = 'pending' | 'reconciled';
|
||||
export type VerifyStatus = 'unverified' | 'verified';
|
||||
|
||||
export type StationOption = {
|
||||
stationId: string;
|
||||
stationName: string;
|
||||
};
|
||||
|
||||
export type H5OrderRecord = {
|
||||
id: string;
|
||||
stationId: string;
|
||||
stationName: string;
|
||||
hydrogenTime: string;
|
||||
plateNo: string;
|
||||
/** 里程 km;未填为 null */
|
||||
mileageKm: number | null;
|
||||
unitPrice: number;
|
||||
hydrogenKg: number;
|
||||
totalAmount: number;
|
||||
verifyStatus: VerifyStatus;
|
||||
verifiedAt: string;
|
||||
reconcileStatus: ReconcileStatus;
|
||||
reconcileTime: string;
|
||||
/** 车牌识别原图(含水印),无则为空 */
|
||||
platePhotoUrl: string;
|
||||
/** 加氢机面板原图(含水印),无则为空 */
|
||||
panelPhotoUrl: string;
|
||||
};
|
||||
|
||||
export type CreateDraft = {
|
||||
id?: string;
|
||||
hydrogenTime: string;
|
||||
plateNo: string;
|
||||
mileageKm: string;
|
||||
unitPrice: string;
|
||||
hydrogenKg: string;
|
||||
totalAmount: string;
|
||||
platePreviewUrl: string;
|
||||
panelPreviewUrl: string;
|
||||
};
|
||||
|
||||
export type AppView =
|
||||
| { name: 'list' }
|
||||
| {
|
||||
name: 'create';
|
||||
draft: CreateDraft;
|
||||
initialDraft: CreateDraft;
|
||||
mode: 'create' | 'edit';
|
||||
}
|
||||
| { name: 'detail'; id: string };
|
||||
48
src/prototypes/oneos-h5-h2-order/utils/demo-photo.ts
Normal file
48
src/prototypes/oneos-h5-h2-order/utils/demo-photo.ts
Normal file
@@ -0,0 +1,48 @@
|
||||
/** 种子记录无实拍时,生成带水印的演示占位图(原型用) */
|
||||
|
||||
import { applyPhotoWatermark, formatWatermarkTime } from './photo-watermark';
|
||||
|
||||
function makeBaseCanvas(label: string, tone: 'plate' | 'panel'): string {
|
||||
const canvas = document.createElement('canvas');
|
||||
canvas.width = 720;
|
||||
canvas.height = 405;
|
||||
const ctx = canvas.getContext('2d');
|
||||
if (!ctx) return '';
|
||||
const gradient = ctx.createLinearGradient(0, 0, 720, 405);
|
||||
if (tone === 'plate') {
|
||||
gradient.addColorStop(0, '#1e293b');
|
||||
gradient.addColorStop(1, '#334155');
|
||||
} else {
|
||||
gradient.addColorStop(0, '#064e3b');
|
||||
gradient.addColorStop(1, '#0f766e');
|
||||
}
|
||||
ctx.fillStyle = gradient;
|
||||
ctx.fillRect(0, 0, 720, 405);
|
||||
ctx.fillStyle = 'rgba(255,255,255,0.92)';
|
||||
ctx.font = '700 36px ui-sans-serif, system-ui, "PingFang SC", sans-serif';
|
||||
ctx.textAlign = 'center';
|
||||
ctx.fillText(label, 360, 190);
|
||||
ctx.font = '500 18px ui-sans-serif, system-ui, "PingFang SC", sans-serif';
|
||||
ctx.fillStyle = 'rgba(255,255,255,0.72)';
|
||||
ctx.fillText('演示原图(含水印)', 360, 232);
|
||||
return canvas.toDataURL('image/jpeg', 0.88);
|
||||
}
|
||||
|
||||
export async function buildDemoWatermarkedPhoto(options: {
|
||||
kind: 'plate' | 'panel';
|
||||
plateNo: string;
|
||||
stationName: string;
|
||||
hydrogenTime: string;
|
||||
}): Promise<string> {
|
||||
const label =
|
||||
options.kind === 'plate'
|
||||
? `车牌 ${String(options.plateNo || '').replace(/F$/u, '') || '—'}`
|
||||
: '加氢机面板';
|
||||
const base = makeBaseCanvas(label, options.kind);
|
||||
if (!base) return '';
|
||||
const timeText = String(options.hydrogenTime || formatWatermarkTime()).slice(0, 19);
|
||||
return applyPhotoWatermark(base, {
|
||||
timeText,
|
||||
locationText: options.stationName || '加氢站',
|
||||
});
|
||||
}
|
||||
47
src/prototypes/oneos-h5-h2-order/utils/fleet-plates.ts
Normal file
47
src/prototypes/oneos-h5-h2-order/utils/fleet-plates.ts
Normal file
@@ -0,0 +1,47 @@
|
||||
/** 原型本地「系统车辆列表」车牌(不含尾缀 F),用于羚牛/非羚牛判定 */
|
||||
const FLEET_PLATES = new Set(
|
||||
[
|
||||
'浙A55666',
|
||||
'浙A77888',
|
||||
'浙A99001',
|
||||
'浙A12345',
|
||||
'浙A67890',
|
||||
'浙A88888',
|
||||
'浙A03561',
|
||||
'浙B23456',
|
||||
'浙B99999',
|
||||
'浙B58888',
|
||||
'沪A88888',
|
||||
'沪BDB9161',
|
||||
'沪ADB9161',
|
||||
'苏E33333',
|
||||
'浙A88H201',
|
||||
'浙F00688',
|
||||
'浙F07588',
|
||||
'浙F06618',
|
||||
'粤AGR8556',
|
||||
'粤AGP5156',
|
||||
].map((p) => p.toUpperCase()),
|
||||
);
|
||||
|
||||
export function normalizePlateKey(plateNo: string): string {
|
||||
return String(plateNo || '')
|
||||
.trim()
|
||||
.toUpperCase()
|
||||
.replace(/F$/u, '');
|
||||
}
|
||||
|
||||
/** 车牌是否在系统车辆列表中 → 羚牛车辆 */
|
||||
export function isLingniuVehicle(plateNo: string): boolean {
|
||||
const key = normalizePlateKey(plateNo);
|
||||
if (!key) return false;
|
||||
return FLEET_PLATES.has(key);
|
||||
}
|
||||
|
||||
export type VehicleTagKind = 'lingniu' | 'external' | null;
|
||||
|
||||
export function getVehicleTag(plateNo: string): VehicleTagKind {
|
||||
const key = normalizePlateKey(plateNo);
|
||||
if (!key) return null;
|
||||
return isLingniuVehicle(key) ? 'lingniu' : 'external';
|
||||
}
|
||||
40
src/prototypes/oneos-h5-h2-order/utils/format.ts
Normal file
40
src/prototypes/oneos-h5-h2-order/utils/format.ts
Normal file
@@ -0,0 +1,40 @@
|
||||
export function pad2(n: number): string {
|
||||
return String(n).padStart(2, '0');
|
||||
}
|
||||
|
||||
/** 展示用:YYYY-MM-DD HH:mm */
|
||||
export function formatDateTimeMinute(value: string | null | undefined): string {
|
||||
const raw = String(value || '').trim();
|
||||
if (!raw) return '—';
|
||||
const normalized = raw.replace('T', ' ');
|
||||
if (normalized.length >= 16) return normalized.slice(0, 16);
|
||||
return normalized;
|
||||
}
|
||||
|
||||
export function nowDateTimeMinute(): string {
|
||||
const d = new Date();
|
||||
return `${d.getFullYear()}-${pad2(d.getMonth() + 1)}-${pad2(d.getDate())} ${pad2(d.getHours())}:${pad2(d.getMinutes())}`;
|
||||
}
|
||||
|
||||
export function formatPlateDisplay(plateNo: string): string {
|
||||
const p = String(plateNo || '').replace(/F$/u, '');
|
||||
return p || '—';
|
||||
}
|
||||
|
||||
export function formatMoney(n: number): string {
|
||||
if (!Number.isFinite(n)) return '—';
|
||||
return n.toLocaleString('zh-CN', { minimumFractionDigits: 2, maximumFractionDigits: 2 });
|
||||
}
|
||||
|
||||
export function formatKg(n: number): string {
|
||||
if (!Number.isFinite(n)) return '—';
|
||||
return n.toLocaleString('zh-CN', { minimumFractionDigits: 1, maximumFractionDigits: 2 });
|
||||
}
|
||||
|
||||
/** 里程展示;未填显示 — */
|
||||
export function formatMileage(n: number | null | undefined): string {
|
||||
if (n == null) return '—';
|
||||
const v = Number(n);
|
||||
if (!Number.isFinite(v)) return '—';
|
||||
return Math.round(v).toLocaleString('zh-CN');
|
||||
}
|
||||
202
src/prototypes/oneos-h5-h2-order/utils/manual-ledger.ts
Normal file
202
src/prototypes/oneos-h5-h2-order/utils/manual-ledger.ts
Normal file
@@ -0,0 +1,202 @@
|
||||
export type ManualLedgerImage = {
|
||||
id: string;
|
||||
name: string;
|
||||
dataUrl: string;
|
||||
/** 已确认入库:界面不可删除,仅可补传新图 */
|
||||
archived?: boolean;
|
||||
placeholder?: boolean;
|
||||
uploadedAt: string;
|
||||
};
|
||||
|
||||
export function isArchivedManualImage(img: ManualLedgerImage): boolean {
|
||||
return Boolean(img.archived || img.placeholder);
|
||||
}
|
||||
|
||||
export type ManualLedgerEntry = {
|
||||
id: string;
|
||||
stationId: string;
|
||||
stationName: string;
|
||||
ledgerDate: string;
|
||||
images: ManualLedgerImage[];
|
||||
updatedAt: string;
|
||||
};
|
||||
|
||||
export type ManualCalendarCell = {
|
||||
dateKey: string;
|
||||
day: number;
|
||||
inMonth: boolean;
|
||||
isToday: boolean;
|
||||
isFuture: boolean;
|
||||
/** 是否纳入手工台账补传范围(≥本站首笔加氢日 且 ≤今日) */
|
||||
needsLedger: boolean;
|
||||
uploaded: boolean;
|
||||
};
|
||||
|
||||
function bridge() {
|
||||
return typeof window !== 'undefined' ? window.H2VehicleLedgerBridge : undefined;
|
||||
}
|
||||
|
||||
function pad2(n: number): string {
|
||||
return String(n).padStart(2, '0');
|
||||
}
|
||||
|
||||
function dateKeyFromHydrogenTime(hydrogenTime: unknown): string {
|
||||
const m = String(hydrogenTime || '').match(/^(\d{4}-\d{2}-\d{2})/);
|
||||
return m ? m[1] : '';
|
||||
}
|
||||
|
||||
/** 本站首笔加氢记录的自然日;无记录时返回 null(日历不要求历史补传) */
|
||||
export function getFirstHydrogenDateKey(stationIdOrName: string): string | null {
|
||||
const b = bridge();
|
||||
const rows = b?.getRows?.() || [];
|
||||
const key = String(stationIdOrName || '').trim();
|
||||
if (!key) return null;
|
||||
let earliest: string | null = null;
|
||||
rows.forEach((row) => {
|
||||
const sid = String(row.stationId || '').trim();
|
||||
const sn = String(row.stationName || '').trim();
|
||||
if (sid !== key && sn !== key) return;
|
||||
const dk = dateKeyFromHydrogenTime(row.hydrogenTime);
|
||||
if (!dk) return;
|
||||
if (!earliest || dk < earliest) earliest = dk;
|
||||
});
|
||||
return earliest;
|
||||
}
|
||||
|
||||
export function todayDateKey(): string {
|
||||
const b = bridge();
|
||||
if (b?.todayDateKey) return b.todayDateKey();
|
||||
const d = new Date();
|
||||
return `${d.getFullYear()}-${pad2(d.getMonth() + 1)}-${pad2(d.getDate())}`;
|
||||
}
|
||||
|
||||
export function hasManualLedgerForDate(
|
||||
stationIdOrName: string,
|
||||
ledgerDate?: string,
|
||||
): boolean {
|
||||
const b = bridge();
|
||||
if (!b?.hasManualLedgerForDate) return false;
|
||||
return Boolean(b.hasManualLedgerForDate(stationIdOrName, ledgerDate || todayDateKey()));
|
||||
}
|
||||
|
||||
export function getManualLedger(
|
||||
stationIdOrName: string,
|
||||
ledgerDate?: string,
|
||||
): ManualLedgerEntry | null {
|
||||
const b = bridge();
|
||||
if (!b?.getManualLedger) return null;
|
||||
return b.getManualLedger(stationIdOrName, ledgerDate || todayDateKey()) || null;
|
||||
}
|
||||
|
||||
export function listManualLedgersByStation(stationIdOrName: string): ManualLedgerEntry[] {
|
||||
const b = bridge();
|
||||
if (!b?.listManualLedgersByStation) return [];
|
||||
return b.listManualLedgersByStation(stationIdOrName) || [];
|
||||
}
|
||||
|
||||
export function upsertManualLedger(input: {
|
||||
stationId: string;
|
||||
stationName: string;
|
||||
ledgerDate: string;
|
||||
images: Array<{ id?: string; name: string; dataUrl: string; placeholder?: boolean }>;
|
||||
}): ManualLedgerEntry | null {
|
||||
const b = bridge();
|
||||
if (!b?.upsertManualLedger) return null;
|
||||
return b.upsertManualLedger(input) || null;
|
||||
}
|
||||
|
||||
function cellNeedsLedger(
|
||||
dateKey: string,
|
||||
todayKey: string,
|
||||
firstHydrogenDateKey: string | null,
|
||||
): boolean {
|
||||
if (dateKey > todayKey) return false;
|
||||
if (!firstHydrogenDateKey) return false;
|
||||
return dateKey >= firstHydrogenDateKey;
|
||||
}
|
||||
|
||||
/** 构建某月日历格(含上月末 / 本月 / 下月头,共 6×7) */
|
||||
export function buildManualMonthCells(
|
||||
year: number,
|
||||
month1to12: number,
|
||||
uploadedDateSet: Set<string>,
|
||||
todayKey: string = todayDateKey(),
|
||||
firstHydrogenDateKey: string | null = null,
|
||||
): ManualCalendarCell[] {
|
||||
const first = new Date(year, month1to12 - 1, 1);
|
||||
const startWeekday = first.getDay();
|
||||
const daysInMonth = new Date(year, month1to12, 0).getDate();
|
||||
const prevDays = new Date(year, month1to12 - 1, 0).getDate();
|
||||
const cells: ManualCalendarCell[] = [];
|
||||
|
||||
for (let i = 0; i < 42; i++) {
|
||||
let y = year;
|
||||
let m = month1to12;
|
||||
let d: number;
|
||||
let inMonth = true;
|
||||
if (i < startWeekday) {
|
||||
d = prevDays - startWeekday + i + 1;
|
||||
m = month1to12 - 1;
|
||||
if (m < 1) {
|
||||
m = 12;
|
||||
y -= 1;
|
||||
}
|
||||
inMonth = false;
|
||||
} else if (i >= startWeekday + daysInMonth) {
|
||||
d = i - startWeekday - daysInMonth + 1;
|
||||
m = month1to12 + 1;
|
||||
if (m > 12) {
|
||||
m = 1;
|
||||
y += 1;
|
||||
}
|
||||
inMonth = false;
|
||||
} else {
|
||||
d = i - startWeekday + 1;
|
||||
}
|
||||
const dateKey = `${y}-${pad2(m)}-${pad2(d)}`;
|
||||
const needsLedger = cellNeedsLedger(dateKey, todayKey, firstHydrogenDateKey);
|
||||
cells.push({
|
||||
dateKey,
|
||||
day: d,
|
||||
inMonth,
|
||||
isToday: dateKey === todayKey,
|
||||
isFuture: dateKey > todayKey,
|
||||
needsLedger,
|
||||
uploaded: uploadedDateSet.has(dateKey),
|
||||
});
|
||||
}
|
||||
return cells;
|
||||
}
|
||||
|
||||
/** 本月内需补传且未上传的天数(从首笔加氢日起算,不含未来) */
|
||||
export function countMissingInMonth(
|
||||
year: number,
|
||||
month1to12: number,
|
||||
uploadedDateSet: Set<string>,
|
||||
todayKey: string = todayDateKey(),
|
||||
firstHydrogenDateKey: string | null = null,
|
||||
): number {
|
||||
const daysInMonth = new Date(year, month1to12, 0).getDate();
|
||||
let n = 0;
|
||||
for (let d = 1; d <= daysInMonth; d++) {
|
||||
const key = `${year}-${pad2(month1to12)}-${pad2(d)}`;
|
||||
if (key > todayKey) break;
|
||||
if (!cellNeedsLedger(key, todayKey, firstHydrogenDateKey)) continue;
|
||||
if (!uploadedDateSet.has(key)) n += 1;
|
||||
}
|
||||
return n;
|
||||
}
|
||||
|
||||
declare global {
|
||||
interface Window {
|
||||
H2VehicleLedgerBridge?: {
|
||||
todayDateKey?: () => string;
|
||||
getRows?: () => Array<{ stationId?: string; stationName?: string; hydrogenTime?: string }>;
|
||||
hasManualLedgerForDate?: (stationIdOrName: string, ledgerDate?: string) => boolean;
|
||||
getManualLedger?: (stationIdOrName: string, ledgerDate?: string) => ManualLedgerEntry | null;
|
||||
listManualLedgersByStation?: (stationIdOrName: string) => ManualLedgerEntry[];
|
||||
upsertManualLedger?: (input: unknown) => ManualLedgerEntry | null;
|
||||
subscribe?: (fn: () => void) => () => void;
|
||||
};
|
||||
}
|
||||
}
|
||||
39
src/prototypes/oneos-h5-h2-order/utils/ocr-mock.ts
Normal file
39
src/prototypes/oneos-h5-h2-order/utils/ocr-mock.ts
Normal file
@@ -0,0 +1,39 @@
|
||||
const PLATE_POOL = ['浙A88H201', '浙A12345', '浙B23456', '沪ADB9161', '苏E33333'];
|
||||
|
||||
function pick<T>(list: T[]): T {
|
||||
return list[Math.floor(Math.random() * list.length)];
|
||||
}
|
||||
|
||||
function round1(n: number): number {
|
||||
return Math.round(n * 10) / 10;
|
||||
}
|
||||
|
||||
function round2(n: number): number {
|
||||
return Math.round(n * 100) / 100;
|
||||
}
|
||||
|
||||
export function mockPlateOcr(): { plateNo: string } {
|
||||
return { plateNo: pick(PLATE_POOL) };
|
||||
}
|
||||
|
||||
export function mockPanelOcr(): { unitPrice: number; hydrogenKg: number; totalAmount: number } {
|
||||
const unitPrice = pick([42.5, 43, 44, 41, 45]);
|
||||
const hydrogenKg = round1(8 + Math.random() * 12);
|
||||
const totalAmount = round2(unitPrice * hydrogenKg);
|
||||
return { unitPrice, hydrogenKg, totalAmount };
|
||||
}
|
||||
|
||||
export function readFileAsDataUrl(file: File): Promise<string> {
|
||||
return new Promise((resolve, reject) => {
|
||||
const reader = new FileReader();
|
||||
reader.onload = () => resolve(String(reader.result || ''));
|
||||
reader.onerror = () => reject(reader.error);
|
||||
reader.readAsDataURL(file);
|
||||
});
|
||||
}
|
||||
|
||||
export function delay(ms: number): Promise<void> {
|
||||
return new Promise((resolve) => {
|
||||
window.setTimeout(resolve, ms);
|
||||
});
|
||||
}
|
||||
224
src/prototypes/oneos-h5-h2-order/utils/orders.ts
Normal file
224
src/prototypes/oneos-h5-h2-order/utils/orders.ts
Normal file
@@ -0,0 +1,224 @@
|
||||
import type { H5OrderRecord, StationOption } from '../types';
|
||||
|
||||
declare global {
|
||||
interface Window {
|
||||
H2VehicleLedgerBridge?: {
|
||||
getRows: () => Array<Record<string, unknown>>;
|
||||
getStationList: () => Array<{ value: string; label: string }>;
|
||||
upsertRow: (row: Record<string, unknown>) => Record<string, unknown> | null;
|
||||
removeRow: (id: string) => boolean;
|
||||
subscribe: (fn: (rows: Array<Record<string, unknown>>) => void) => () => void;
|
||||
findDuplicateRow?: (
|
||||
candidate: { stationName?: string; plateNo?: string; hydrogenTime?: string },
|
||||
excludeId?: string,
|
||||
) => Record<string, unknown> | null;
|
||||
totalAmountMismatch?: (
|
||||
unitPrice: number,
|
||||
hydrogenKg: number,
|
||||
totalAmount: number,
|
||||
toleranceYuan?: number,
|
||||
) => { expected: number; actual: number; diff: number } | null;
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
const RECONCILED = 'reconciled';
|
||||
const VERIFIED = 'verified';
|
||||
|
||||
function asNumber(value: unknown, fallback = 0): number {
|
||||
const n = Number(value);
|
||||
return Number.isFinite(n) ? n : fallback;
|
||||
}
|
||||
|
||||
function asString(value: unknown): string {
|
||||
return value == null ? '' : String(value);
|
||||
}
|
||||
|
||||
/** 已对账必须有对账时间;缺省时按加氢日次日 10:00:00 推导(原型演示) */
|
||||
function deriveReconcileTime(hydrogenTime: string): string {
|
||||
const m = String(hydrogenTime || '').match(/^(\d{4})-(\d{2})-(\d{2})/);
|
||||
if (!m) return '2026-01-01 10:00:00';
|
||||
const d = new Date(Number(m[1]), Number(m[2]) - 1, Number(m[3]) + 1, 10, 0, 0);
|
||||
const pad = (n: number) => (n < 10 ? `0${n}` : String(n));
|
||||
return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())} 10:00:00`;
|
||||
}
|
||||
|
||||
export function mapRowToOrder(row: Record<string, unknown>): H5OrderRecord {
|
||||
/* 对账时间仅认 reconcileDate,勿用 reconciledAt(完成核对会写) */
|
||||
let reconcileTime = asString(row.reconcileDate);
|
||||
const reconcileStatus =
|
||||
asString(row.reconcileStatus) === RECONCILED || Boolean(reconcileTime)
|
||||
? 'reconciled'
|
||||
: 'pending';
|
||||
if (reconcileStatus === 'reconciled' && !reconcileTime) {
|
||||
reconcileTime = deriveReconcileTime(asString(row.hydrogenTime));
|
||||
}
|
||||
const verifyStatus =
|
||||
asString(row.verifyStatus) === VERIFIED || Boolean(row.verifiedAt) ? 'verified' : 'unverified';
|
||||
const verifiedAt = verifyStatus === 'verified' ? asString(row.verifiedAt) : '';
|
||||
const unitPrice = asNumber(row.costUnitPrice, asNumber(row.customerUnitPrice));
|
||||
const hydrogenKg = asNumber(row.hydrogenKg);
|
||||
const totalAmount = asNumber(row.costTotal, asNumber(row.costAmount, asNumber(row.customerAmount)));
|
||||
const mileageRaw = row.mileageKm;
|
||||
let mileageKm: number | null = null;
|
||||
if (mileageRaw != null && mileageRaw !== '') {
|
||||
const n = Number(mileageRaw);
|
||||
if (Number.isFinite(n) && n >= 0) mileageKm = Math.round(n);
|
||||
}
|
||||
return {
|
||||
id: asString(row.id || row.key),
|
||||
stationId: asString(row.stationId),
|
||||
stationName: asString(row.stationName),
|
||||
hydrogenTime: asString(row.hydrogenTime),
|
||||
plateNo: asString(row.plateNo),
|
||||
mileageKm,
|
||||
unitPrice,
|
||||
hydrogenKg,
|
||||
totalAmount,
|
||||
verifyStatus,
|
||||
verifiedAt,
|
||||
reconcileStatus,
|
||||
reconcileTime: reconcileStatus === 'reconciled' ? reconcileTime : '',
|
||||
platePhotoUrl: asString(row.platePhotoUrl),
|
||||
panelPhotoUrl: asString(row.panelPhotoUrl),
|
||||
};
|
||||
}
|
||||
|
||||
export function isOrderLocked(order: H5OrderRecord): boolean {
|
||||
return order.verifyStatus === 'verified' || order.reconcileStatus === 'reconciled';
|
||||
}
|
||||
|
||||
export function listStations(): StationOption[] {
|
||||
const bridge = typeof window !== 'undefined' ? window.H2VehicleLedgerBridge : undefined;
|
||||
if (!bridge) {
|
||||
return [
|
||||
{ stationId: 'JX-H2-001', stationName: '中国石油中油高新能源牙谷加油加氢站' },
|
||||
{ stationId: 'HZ-H2-002', stationName: '杭州临平加氢站' },
|
||||
{ stationId: 'SH-H2-003', stationName: '上海宝山加氢站' },
|
||||
{ stationId: 'SZ-H2-004', stationName: '苏州工业园区备用站' },
|
||||
];
|
||||
}
|
||||
return bridge.getStationList().map((item) => ({
|
||||
stationId: item.value,
|
||||
stationName: item.label,
|
||||
}));
|
||||
}
|
||||
|
||||
export function listOrdersForStation(stationName: string): H5OrderRecord[] {
|
||||
const bridge = typeof window !== 'undefined' ? window.H2VehicleLedgerBridge : undefined;
|
||||
const rows = bridge?.getRows() || [];
|
||||
return rows
|
||||
.map(mapRowToOrder)
|
||||
.filter((r) => r.stationName === stationName)
|
||||
.sort((a, b) => String(b.hydrogenTime).localeCompare(String(a.hydrogenTime)));
|
||||
}
|
||||
|
||||
export function subscribeOrders(onChange: () => void): () => void {
|
||||
const bridge = typeof window !== 'undefined' ? window.H2VehicleLedgerBridge : undefined;
|
||||
if (!bridge?.subscribe) return () => undefined;
|
||||
return bridge.subscribe(() => onChange());
|
||||
}
|
||||
|
||||
export function upsertStationOrder(input: {
|
||||
id?: string;
|
||||
stationId: string;
|
||||
stationName: string;
|
||||
hydrogenTime: string;
|
||||
plateNo: string;
|
||||
mileageKm?: number | null;
|
||||
unitPrice: number;
|
||||
hydrogenKg: number;
|
||||
totalAmount: number;
|
||||
platePhotoUrl?: string;
|
||||
panelPhotoUrl?: string;
|
||||
}): H5OrderRecord | null {
|
||||
const bridge = typeof window !== 'undefined' ? window.H2VehicleLedgerBridge : undefined;
|
||||
if (!bridge?.upsertRow) return null;
|
||||
const plate = input.plateNo.endsWith('F') ? input.plateNo : `${input.plateNo}F`;
|
||||
const hydrogenTime =
|
||||
input.hydrogenTime.length === 16 ? `${input.hydrogenTime}:00` : input.hydrogenTime;
|
||||
const mileageKm =
|
||||
input.mileageKm != null && Number.isFinite(input.mileageKm) && input.mileageKm >= 0
|
||||
? Math.round(input.mileageKm)
|
||||
: null;
|
||||
const saved = bridge.upsertRow({
|
||||
id: input.id,
|
||||
key: input.id,
|
||||
stationId: input.stationId,
|
||||
stationName: input.stationName,
|
||||
hydrogenTime,
|
||||
plateNo: plate,
|
||||
customerName: `${input.stationName}·站端上报`,
|
||||
hydrogenKg: input.hydrogenKg,
|
||||
costUnitPrice: input.unitPrice,
|
||||
costTotal: input.totalAmount,
|
||||
customerUnitPrice: input.unitPrice,
|
||||
customerAmount: input.totalAmount,
|
||||
settlementStatus: 'customer',
|
||||
mileageKm,
|
||||
platePhotoUrl: String(input.platePhotoUrl || ''),
|
||||
panelPhotoUrl: String(input.panelPhotoUrl || ''),
|
||||
creatorName: '站端账号',
|
||||
recordSource: 'station',
|
||||
changeLogOperator: '站端账号',
|
||||
reconcileStatus: 'pending',
|
||||
verifyStatus: 'unverified',
|
||||
});
|
||||
return saved ? mapRowToOrder(saved) : null;
|
||||
}
|
||||
|
||||
export function findDuplicateStationOrder(input: {
|
||||
id?: string;
|
||||
stationName: string;
|
||||
plateNo: string;
|
||||
hydrogenTime: string;
|
||||
}): boolean {
|
||||
const bridge = typeof window !== 'undefined' ? window.H2VehicleLedgerBridge : undefined;
|
||||
if (!bridge?.findDuplicateRow) return false;
|
||||
const plate = input.plateNo.endsWith('F') ? input.plateNo : `${input.plateNo}F`;
|
||||
const hydrogenTime =
|
||||
input.hydrogenTime.length === 16 ? `${input.hydrogenTime}:00` : input.hydrogenTime;
|
||||
return Boolean(
|
||||
bridge.findDuplicateRow(
|
||||
{ stationName: input.stationName, plateNo: plate, hydrogenTime },
|
||||
input.id,
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
export function getTotalAmountMismatch(
|
||||
unitPrice: number,
|
||||
hydrogenKg: number,
|
||||
totalAmount: number,
|
||||
): { expected: number; actual: number; diff: number } | null {
|
||||
const bridge = typeof window !== 'undefined' ? window.H2VehicleLedgerBridge : undefined;
|
||||
if (bridge?.totalAmountMismatch) {
|
||||
return bridge.totalAmountMismatch(unitPrice, hydrogenKg, totalAmount, 0.05);
|
||||
}
|
||||
const expected = Math.round(unitPrice * hydrogenKg * 100) / 100;
|
||||
const actual = Math.round(totalAmount * 100) / 100;
|
||||
const diff = Math.round(Math.abs(actual - expected) * 100) / 100;
|
||||
return diff > 0.05 ? { expected, actual, diff } : null;
|
||||
}
|
||||
|
||||
export function removeStationOrder(id: string): boolean {
|
||||
const bridge = typeof window !== 'undefined' ? window.H2VehicleLedgerBridge : undefined;
|
||||
if (!bridge?.removeRow) return false;
|
||||
return bridge.removeRow(id);
|
||||
}
|
||||
|
||||
export function summarizeOrders(orders: H5OrderRecord[]): {
|
||||
count: number;
|
||||
totalKg: number;
|
||||
totalAmount: number;
|
||||
} {
|
||||
return orders.reduce(
|
||||
(acc, row) => {
|
||||
acc.count += 1;
|
||||
acc.totalKg += row.hydrogenKg || 0;
|
||||
acc.totalAmount += row.totalAmount || 0;
|
||||
return acc;
|
||||
},
|
||||
{ count: 0, totalKg: 0, totalAmount: 0 },
|
||||
);
|
||||
}
|
||||
68
src/prototypes/oneos-h5-h2-order/utils/photo-watermark.ts
Normal file
68
src/prototypes/oneos-h5-h2-order/utils/photo-watermark.ts
Normal file
@@ -0,0 +1,68 @@
|
||||
/** 拍摄预览加水印:时间 + 地点(原型本地 canvas,未接真相机 SDK) */
|
||||
|
||||
function pad2(n: number): string {
|
||||
return n < 10 ? `0${n}` : String(n);
|
||||
}
|
||||
|
||||
export function formatWatermarkTime(date = new Date()): string {
|
||||
return (
|
||||
`${date.getFullYear()}-${pad2(date.getMonth() + 1)}-${pad2(date.getDate())} ` +
|
||||
`${pad2(date.getHours())}:${pad2(date.getMinutes())}:${pad2(date.getSeconds())}`
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* 在图片右下角绘制半透明水印条:第一行时间,第二行地点。
|
||||
*/
|
||||
export function applyPhotoWatermark(
|
||||
dataUrl: string,
|
||||
options: { timeText: string; locationText: string },
|
||||
): Promise<string> {
|
||||
return new Promise((resolve, reject) => {
|
||||
const img = new Image();
|
||||
img.onload = () => {
|
||||
try {
|
||||
const canvas = document.createElement('canvas');
|
||||
const w = img.naturalWidth || img.width || 1;
|
||||
const h = img.naturalHeight || img.height || 1;
|
||||
canvas.width = w;
|
||||
canvas.height = h;
|
||||
const ctx = canvas.getContext('2d');
|
||||
if (!ctx) {
|
||||
resolve(dataUrl);
|
||||
return;
|
||||
}
|
||||
ctx.drawImage(img, 0, 0, w, h);
|
||||
|
||||
const fontSize = Math.max(14, Math.round(Math.min(w, h) * 0.032));
|
||||
const lineGap = Math.round(fontSize * 1.35);
|
||||
const padX = Math.round(fontSize * 0.7);
|
||||
const padY = Math.round(fontSize * 0.55);
|
||||
const lines = [
|
||||
`时间 ${options.timeText}`,
|
||||
`地点 ${options.locationText || '位置未知'}`,
|
||||
];
|
||||
ctx.font = `600 ${fontSize}px ui-sans-serif, system-ui, -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif`;
|
||||
const textWidth = Math.max(...lines.map((line) => ctx.measureText(line).width));
|
||||
const boxW = textWidth + padX * 2;
|
||||
const boxH = lineGap * lines.length + padY * 2;
|
||||
const boxX = Math.max(8, w - boxW - Math.round(fontSize * 0.6));
|
||||
const boxY = Math.max(8, h - boxH - Math.round(fontSize * 0.6));
|
||||
|
||||
ctx.fillStyle = 'rgba(15, 23, 42, 0.58)';
|
||||
ctx.fillRect(boxX, boxY, boxW, boxH);
|
||||
ctx.fillStyle = '#ffffff';
|
||||
ctx.textBaseline = 'top';
|
||||
lines.forEach((line, index) => {
|
||||
ctx.fillText(line, boxX + padX, boxY + padY + index * lineGap);
|
||||
});
|
||||
|
||||
resolve(canvas.toDataURL('image/jpeg', 0.92));
|
||||
} catch (error) {
|
||||
reject(error);
|
||||
}
|
||||
};
|
||||
img.onerror = () => reject(new Error('水印图片加载失败'));
|
||||
img.src = dataUrl;
|
||||
});
|
||||
}
|
||||
61
src/prototypes/oneos-h5-h2-order/utils/vehicle-mileage.ts
Normal file
61
src/prototypes/oneos-h5-h2-order/utils/vehicle-mileage.ts
Normal file
@@ -0,0 +1,61 @@
|
||||
/**
|
||||
* 车机里程(原型 Mock)
|
||||
* 正式环境应改为车机 / T-Box / 车辆管理接口;此处按车牌返回演示里程。
|
||||
*/
|
||||
|
||||
const MILEAGE_BY_PLATE: Record<string, number> = {
|
||||
浙A88H201: 128560,
|
||||
浙A12345: 132000,
|
||||
浙B23456: 98640,
|
||||
沪ADB9161: 75420,
|
||||
苏E33333: 110280,
|
||||
浙A99880: 87210,
|
||||
};
|
||||
|
||||
function normalizePlate(plateNo: string): string {
|
||||
return String(plateNo || '')
|
||||
.trim()
|
||||
.toUpperCase()
|
||||
.replace(/F$/u, '');
|
||||
}
|
||||
|
||||
export type VehicleMileageResult = {
|
||||
ok: boolean;
|
||||
mileageKm: string;
|
||||
source: 'vehicle' | 'fallback';
|
||||
message: string;
|
||||
};
|
||||
|
||||
/** 模拟从车机拉取当前里程;无命中时给可演示的回退值 */
|
||||
export async function fetchMileageFromVehicle(plateNo: string): Promise<VehicleMileageResult> {
|
||||
await new Promise((resolve) => {
|
||||
window.setTimeout(resolve, 450);
|
||||
});
|
||||
const key = normalizePlate(plateNo);
|
||||
if (!key) {
|
||||
return {
|
||||
ok: false,
|
||||
mileageKm: '',
|
||||
source: 'fallback',
|
||||
message: '请先填写或识别车牌号后再取里程',
|
||||
};
|
||||
}
|
||||
if (MILEAGE_BY_PLATE[key] != null) {
|
||||
return {
|
||||
ok: true,
|
||||
mileageKm: String(MILEAGE_BY_PLATE[key]),
|
||||
source: 'vehicle',
|
||||
message: '已从车机获取当前里程',
|
||||
};
|
||||
}
|
||||
// 非种子车牌:用稳定伪值,便于演示「可取数」
|
||||
let hash = 0;
|
||||
for (let i = 0; i < key.length; i += 1) hash = (hash * 31 + key.charCodeAt(i)) % 100000;
|
||||
const mileage = 60000 + hash;
|
||||
return {
|
||||
ok: true,
|
||||
mileageKm: String(mileage),
|
||||
source: 'fallback',
|
||||
message: '车机未直连,已按演示规则回填里程',
|
||||
};
|
||||
}
|
||||
@@ -32,7 +32,8 @@ const CLOUD_PUBLISH_PATH_ALIASES: Record<string, string> = {
|
||||
};
|
||||
|
||||
function cloudPrototypeSegment(prototypeId: string): string {
|
||||
return CLOUD_PUBLISH_PATH_ALIASES[prototypeId] || `prototypes/${prototypeId}`;
|
||||
// 与 axhub.config.json cloudPublishing.s3 及 Make 发布路径一致:/{id}/index.html
|
||||
return CLOUD_PUBLISH_PATH_ALIASES[prototypeId] || prototypeId;
|
||||
}
|
||||
|
||||
/** 对象存储静态发布站点(无 Make 本地 dev server 路由) */
|
||||
@@ -40,7 +41,7 @@ export function isPublishedCloudHost(): boolean {
|
||||
if (typeof window === 'undefined') return false;
|
||||
const { hostname, pathname } = window.location;
|
||||
if (PUBLISHED_CLOUD_HOSTS.has(hostname)) return true;
|
||||
// export-html 发布页:/{prototype}/index.html 或 /prototypes/{prototype}/index.html
|
||||
// export-html 发布页:/{prototype-id}/index.html(与 Make 对象存储发布一致)
|
||||
return /\/index\.html$/u.test(pathname);
|
||||
}
|
||||
|
||||
@@ -126,6 +127,7 @@ type SidebarNode = {
|
||||
};
|
||||
|
||||
const GROUP_ICONS: Record<string, LucideIcon> = {
|
||||
车辆资产: Car,
|
||||
运维管理: Wrench,
|
||||
业务管理: Briefcase,
|
||||
合同配置: FileText,
|
||||
|
||||
@@ -45,7 +45,7 @@
|
||||
{
|
||||
"id": "folder-1782874599304-roj8fd",
|
||||
"kind": "folder",
|
||||
"title": "运维管理",
|
||||
"title": "车辆资产",
|
||||
"children": [
|
||||
{
|
||||
"id": "item:prototypes:vehicle-management",
|
||||
@@ -111,10 +111,16 @@
|
||||
"itemKey": "prototypes/oneos-web-h2-station-site"
|
||||
},
|
||||
{
|
||||
"id": "item:prototypes:oneos-web-h2-station-weekly",
|
||||
"id": "item:prototypes:oneos-h5-h2-order",
|
||||
"kind": "item",
|
||||
"title": "站点周报统计",
|
||||
"itemKey": "prototypes/oneos-web-h2-station-weekly"
|
||||
"title": "加氢记录(H5)",
|
||||
"itemKey": "prototypes/oneos-h5-h2-order"
|
||||
},
|
||||
{
|
||||
"id": "item:prototypes:oneos-web-h2-station",
|
||||
"kind": "item",
|
||||
"title": "加氢记录",
|
||||
"itemKey": "prototypes/oneos-web-h2-station"
|
||||
}
|
||||
]
|
||||
},
|
||||
@@ -126,8 +132,20 @@
|
||||
{
|
||||
"id": "item:prototypes:business-dept-ledger",
|
||||
"kind": "item",
|
||||
"title": "业务部台账",
|
||||
"title": "项目盈亏情况",
|
||||
"itemKey": "prototypes/business-dept-ledger"
|
||||
},
|
||||
{
|
||||
"id": "item:prototypes:oneos-web-h2-station-stats",
|
||||
"kind": "item",
|
||||
"title": "加氢站数量统计",
|
||||
"itemKey": "prototypes/oneos-web-h2-station-stats"
|
||||
},
|
||||
{
|
||||
"id": "item:prototypes:customer-payment-collection",
|
||||
"kind": "item",
|
||||
"title": "客户回款情况",
|
||||
"itemKey": "prototypes/customer-payment-collection"
|
||||
}
|
||||
]
|
||||
},
|
||||
@@ -190,12 +208,6 @@
|
||||
"kind": "item",
|
||||
"title": "还车应结款",
|
||||
"itemKey": "prototypes/vehicle-return-settlement"
|
||||
},
|
||||
{
|
||||
"id": "item:prototypes:vehicle-return-settlement-v2",
|
||||
"kind": "item",
|
||||
"title": "还车应结款-新",
|
||||
"itemKey": "prototypes/vehicle-return-settlement-v2"
|
||||
}
|
||||
]
|
||||
},
|
||||
@@ -212,6 +224,19 @@
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "folder-1784341576489-spa7ms",
|
||||
"kind": "folder",
|
||||
"title": "审批中心",
|
||||
"children": [
|
||||
{
|
||||
"id": "item:prototypes:oneos-web-approval",
|
||||
"kind": "item",
|
||||
"title": "审批中心",
|
||||
"itemKey": "prototypes/oneos-web-approval"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "item:prototypes:lease-business-line-overview",
|
||||
"kind": "item",
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@@ -1,12 +1,12 @@
|
||||
{
|
||||
"version": 1,
|
||||
"updatedAt": "2026-07-12T14:43:43.194Z",
|
||||
"updatedAt": "2026-07-20T05:34:46.063Z",
|
||||
"title": "小羚羚",
|
||||
"sectionId": "folder-prototypes-xll-miniapp",
|
||||
"description": "氢能车辆运营移动端原型;菜单与小羚羚「小程序」项目目录同步。",
|
||||
"prototypeId": "xll-miniapp",
|
||||
"runtimeOrigin": "http://localhost:51721",
|
||||
"hrefPrefix": "http://localhost:51721/prototypes/xll-miniapp",
|
||||
"runtimeOrigin": "http://localhost:51723",
|
||||
"hrefPrefix": "http://localhost:51723/prototypes/xll-miniapp",
|
||||
"groups": [
|
||||
{
|
||||
"id": "directory-main",
|
||||
@@ -80,6 +80,12 @@
|
||||
"pageId": "replace",
|
||||
"route": "replace"
|
||||
},
|
||||
{
|
||||
"id": "route-driver-training",
|
||||
"title": "司机安全培训",
|
||||
"pageId": "driver-training",
|
||||
"route": "driver-training"
|
||||
},
|
||||
{
|
||||
"id": "route-audit-return",
|
||||
"title": "还车应结款(说明)",
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
{
|
||||
"projectRoot": "/Users/sylvawong/make-project-20260629",
|
||||
"projectRoot": "C:/Users/hsu06/Projects/xll-mini-program",
|
||||
"prototypeId": "xll-miniapp",
|
||||
"annotationSource": "src/prototypes/xll-miniapp/annotation-source.json",
|
||||
"devServerInfo": ".axhub/make/.dev-server-info.json",
|
||||
|
||||
@@ -1,23 +0,0 @@
|
||||
/**
|
||||
* @name 合同模板管理
|
||||
* 自 ONE-OS web端 原稿复刻(1 个页面)
|
||||
*/
|
||||
import '../../common/oneosWebLegacy/legacyGlobals';
|
||||
import React from 'react';
|
||||
import '../vehicle-management/style.css';
|
||||
import Page1 from './pages/01-合同模板管理.jsx';
|
||||
import { OneosWebLegacyShell } from '../../common/oneosWebLegacy/OneosWebLegacyShell';
|
||||
|
||||
const pages = [
|
||||
{ id: 'u5408u540cu6a21u677fu7ba1u7406', title: '合同模板管理', component: Page1 },
|
||||
];
|
||||
|
||||
export default function OneosWebContractTemplate() {
|
||||
return (
|
||||
<OneosWebLegacyShell
|
||||
moduleTitle="合同模板管理"
|
||||
pages={pages}
|
||||
defaultPageId="u5408u540cu6a21u677fu7ba1u7406"
|
||||
/>
|
||||
);
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
@@ -1,6 +1,6 @@
|
||||
/**
|
||||
* @name 数据分析
|
||||
* 自 ONE-OS web端 原稿复刻(8 个页面;业务部台账已迁至 OneOS → 数据分析)
|
||||
* 自 ONE-OS web端 原稿复刻(8 个页面;业务部台账、客户回款情况已迁至 OneOS → 数据分析)
|
||||
*/
|
||||
import '../../common/oneosWebLegacy/legacyGlobals';
|
||||
import React from 'react';
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,33 @@
|
||||
# 加氢机品牌管理
|
||||
|
||||
| 项 | 内容 |
|
||||
|---|---|
|
||||
| 模块 | 加氢站管理 → 站点信息 |
|
||||
| 入口 | 列表工具栏 → **加氢机品牌管理** |
|
||||
| 关联 | H5「加氢订单」面板 OCR |
|
||||
| 数据 | `src/common/h2DispenserBrandStore.js`(localStorage 演示,未接真实 API) |
|
||||
|
||||
## 目标
|
||||
|
||||
维护加氢机**品牌 + 型号**清单,供站端拍照 OCR 时作为识别模型 / 模板判断参考(原型展示为 H5 面板区提示文案)。
|
||||
|
||||
## 字段
|
||||
|
||||
| 字段 | 规则 |
|
||||
|---|---|
|
||||
| 品牌 * | 必填,如「海德利森」 |
|
||||
| 型号 * | 必填,如「H2-D50」;同品牌+型号不可重复 |
|
||||
| 备注 | 选填,如 OCR 模板说明 |
|
||||
| 更新时间 | 系统写入 |
|
||||
|
||||
## 交互
|
||||
|
||||
1. 打开弹窗加载当前清单(含种子数据)。
|
||||
2. 填写品牌/型号/备注 → **新增** 或编辑后 **保存修改**。
|
||||
3. 行操作:编辑、删除(二次确认)。
|
||||
|
||||
## 验收
|
||||
|
||||
1. 站点信息工具栏可见「加氢机品牌管理」。
|
||||
2. 可增删改品牌型号,刷新后仍保留(同浏览器)。
|
||||
3. H5 新增页「加氢机面板识别」展示已维护品牌型号提示(若 Store 已加载)。
|
||||
@@ -0,0 +1,171 @@
|
||||
# 期末余额设置 · 需求说明
|
||||
|
||||
| 项 | 内容 |
|
||||
|---|---|
|
||||
| 模块 | 加氢站管理 → 站点信息 |
|
||||
| 功能名称 | 期末余额设置 |
|
||||
| 交互原型 | `/prototypes/oneos-web-h2-station-site` |
|
||||
| 关联功能 | 预付余额列表展示、预付余额下钻、车辆氢费明细、生成对账单 |
|
||||
| 文档状态 | 已对齐原型 |
|
||||
|
||||
---
|
||||
|
||||
## 1. 需求背景
|
||||
|
||||
运营与加氢站(如嘉兴站)对账后,账面「期末余额」与系统内车辆氢费明细之间常有**时间差**:对账时点之后,站点仍可能继续产生加氢支出或充值收入,导致列表「预付余额」无法直接等于对账结果。
|
||||
|
||||
需要提供能力:在站点侧登记一次对账时的**期末余额**与**期末时间**,并以此为锚点推算当前可用余额。
|
||||
|
||||
---
|
||||
|
||||
## 2. 需求目标
|
||||
|
||||
1. 支持按站点登记期末余额、期末时间。
|
||||
2. 保存时按统一公式重算「当前预付余额」并写回列表。
|
||||
3. 预付余额下钻流水以期末时间为锚点,重新展示余额滚动。
|
||||
4. 保留完整变更记录,便于追溯。
|
||||
|
||||
---
|
||||
|
||||
## 3. 用户与入口
|
||||
|
||||
| 角色 | 诉求 |
|
||||
|---|---|
|
||||
| 财务 / 结算 | 对账后登记期末余额,得到可解释的当前预付余额 |
|
||||
| 加氢站运营 | 查看当前余额及下钻流水是否与期末锚点一致 |
|
||||
|
||||
**入口**:站点信息列表 → 操作列 **更多(⋮)** → **期末余额设置**
|
||||
(菜单位置:余额提醒设置 与 生成对账单 之间)
|
||||
|
||||
---
|
||||
|
||||
## 4. 功能描述
|
||||
|
||||
### 4.1 弹窗内容
|
||||
|
||||
| 区域 | 内容 | 说明 |
|
||||
|---|---|---|
|
||||
| 站点摘要 | 站点名称、当前预付余额 | 只读 |
|
||||
| 表单 | 期末余额(元)*、期末时间 * | 必填 |
|
||||
| 操作 | 取消 / 保存 | 保存触发校验与重算 |
|
||||
| 变更记录 | 期末余额、生效时间、操作人、操作时间 | 只追加;支持分页 |
|
||||
|
||||
### 4.2 主流程
|
||||
|
||||
```text
|
||||
打开期末余额设置
|
||||
→ 填写期末余额、期末时间
|
||||
→ 点击保存
|
||||
→ 校验通过
|
||||
→ 追加变更记录
|
||||
→ 按规则重算当前预付余额并写回列表
|
||||
→ 提示保存成功
|
||||
```
|
||||
|
||||
打开该站点「预付余额」下钻时,若已存在生效期末配置,流水按锚点规则重算展示(见 §6)。
|
||||
|
||||
---
|
||||
|
||||
## 5. 业务规则(核心)
|
||||
|
||||
### 5.1 字段规则
|
||||
|
||||
| 规则 ID | 规则 | 说明 |
|
||||
|---|---|---|
|
||||
| R1 | 期末余额必填 | 须为有效数字;**允许负数**(欠费场景) |
|
||||
| R2 | 期末时间必填 | 精确到分钟(`YYYY-MM-DD HH:mm`) |
|
||||
| R3 | 期末时间不可晚于当前时刻 | 日期不可选今天之后;保存时若时刻晚于现在,阻止保存 |
|
||||
| R4 | 以最近一次保存为生效锚点 | 站点仅保留一套「当前生效」的期末余额 / 期末时间;历史见变更记录 |
|
||||
|
||||
### 5.2 当前预付余额计算公式
|
||||
|
||||
**仅在点击「保存」时计算一次**(不监听之后新产生的流水自动刷新)。
|
||||
|
||||
```text
|
||||
当前预付余额 = 期末余额 − 期末后支出合计 + 期末后收入合计
|
||||
```
|
||||
|
||||
| 规则 ID | 规则 | 说明 |
|
||||
|---|---|---|
|
||||
| R5 | 支出范围 | 该站点、业务时间 **严格晚于** 期末时间 `T` 的车辆氢费明细,按**成本总价**合计 |
|
||||
| R6 | 收入范围 | 该站点、变更时间 **严格晚于** `T` 的充值类收入合计 |
|
||||
| R7 | 取整 | 结果保留 **2 位小数** 后写回「预付余额(元)」 |
|
||||
| R8 | 时间边界 | 等于期末时间 `T` 当刻的流水 **不计入** 期末后收支(只统计 `> T`) |
|
||||
|
||||
### 5.3 变更记录规则
|
||||
|
||||
| 规则 ID | 规则 | 说明 |
|
||||
|---|---|---|
|
||||
| R9 | 只追加 | 每次保存成功新增一条记录 |
|
||||
| R10 | 不可删除 | 界面不提供删除 / 清空 |
|
||||
| R11 | 不可编辑 | 历史行不可改 |
|
||||
| R12 | 记录字段 | 期末余额、生效时间(= 本次期末时间)、操作人、操作时间(保存时刻) |
|
||||
| R13 | 分页 | 变更记录支持分页(紧凑页码:5 / 10 / 20 / 50) |
|
||||
|
||||
### 5.4 与其他功能的关系
|
||||
|
||||
| 规则 ID | 规则 | 说明 |
|
||||
|---|---|---|
|
||||
| R14 | KPI / 余额提醒 | 仍读取「预付余额」;期末保存写回后,预警 / 欠费 KPI 随之变化 |
|
||||
| R15 | 生成对账单 | 对账单提交仍可扣减 / 写回预付余额;与期末重算冲突时,**以后发生的写操作为准** |
|
||||
| R16 | 未配置期末 | 未保存过期末余额时,预付余额逻辑保持原状(对账扣减、手工/其他入口) |
|
||||
|
||||
---
|
||||
|
||||
## 6. 预付余额下钻规则
|
||||
|
||||
当站点已配置生效的期末余额、期末时间时:
|
||||
|
||||
| 规则 ID | 规则 | 说明 |
|
||||
|---|---|---|
|
||||
| R17 | 插入锚点行 | 在流水中增加类型为「期末余额」的行:时间为期末时间,余额列 = 期末余额 |
|
||||
| R18 | 锚点前流水 | 时间 ≤ 期末时间的历史流水可继续展示 |
|
||||
| R19 | 锚点后流水 | 时间 > 期末时间的收入 / 支出,从期末余额起按时间顺序累加,重算每行余额 |
|
||||
| R20 | 下钻不写回 | 打开下钻只重算展示,**不再次写回**列表预付余额(列表值仍以最近一次保存结果为准) |
|
||||
|
||||
**锚点后单行余额推算:**
|
||||
|
||||
```text
|
||||
行余额 = 上一行余额 + 本行收入 − 本行支出
|
||||
(起点上一行余额 = 期末余额)
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 7. 校验与异常
|
||||
|
||||
| 场景 | 系统行为 |
|
||||
|---|---|
|
||||
| 期末余额为空 / 非数字 | 阻止保存,提示填写有效期末余额 |
|
||||
| 期末时间为空 | 阻止保存,提示选择期末时间 |
|
||||
| 期末时间晚于当前时刻 | 阻止保存,提示「期末时间不能晚于今天」 |
|
||||
| 期末后无收支流水 | 允许保存;当前预付余额 = 期末余额 |
|
||||
| 变更记录为空 | 展示「暂无变更记录」 |
|
||||
|
||||
---
|
||||
|
||||
## 8. 验收标准
|
||||
|
||||
- [ ] 更多菜单可见「期末余额设置」
|
||||
- [ ] 必填与「期末时间不可晚于今天」校验生效
|
||||
- [ ] 保存后列表预付余额 = 公式计算结果
|
||||
- [ ] 变更记录追加成功,无删除入口,分页可用
|
||||
- [ ] 余额下钻出现「期末余额」锚点,其后余额连续正确
|
||||
- [ ] 未配置期末时,原有预付余额 / 下钻行为不受影响
|
||||
|
||||
---
|
||||
|
||||
## 9. 非目标(本期不做)
|
||||
|
||||
- 变更记录编辑、删除、回滚到某一历史锚点
|
||||
- 保存后对新流水的自动实时重算
|
||||
- 多套期末锚点同时生效
|
||||
- 真实充值流水 API、审批流(原型可用 Mock)
|
||||
|
||||
---
|
||||
|
||||
## 10. 修订记录
|
||||
|
||||
| 版本 | 日期 | 说明 |
|
||||
|---|---|---|
|
||||
| v1.0 | 2026-07-17 | 首版需求:口径、写回时机、不可删日志、时间上限、下钻锚点 |
|
||||
@@ -4,7 +4,7 @@
|
||||
- 用户资料/参考资料:
|
||||
- `src/prototypes/oneos-web-h2-station-site/.spec/requirements.md`
|
||||
- `src/resources/oneos-web-legacy/加氢站管理/站点管理使用说明书.md`
|
||||
- 页面实现:`src/prototypes/oneos-web-h2-station/pages/03-站点信息.jsx`
|
||||
- 页面实现:`src/prototypes/oneos-web-h2-station-site/pages/03-站点信息.jsx`
|
||||
- 氢费共享 Store:`src/common/h2VehicleLedgerBridge.js`
|
||||
- 生成时间:2026-07-01(复审)
|
||||
|
||||
|
||||
@@ -203,4 +203,4 @@ flowchart TD
|
||||
| 口径函数 | `h2IsBalanceAlertStation` / `h2IsArrearsStation` |
|
||||
| 打开弹窗 | `openAlertStationModal` |
|
||||
| 批量充值 | `handleBatchRechargeFromAlert` → `openRechargeModal` |
|
||||
| 页面文件 | `src/prototypes/oneos-web-h2-station/pages/03-站点信息.jsx` |
|
||||
| 页面文件 | `src/prototypes/oneos-web-h2-station-site/pages/03-站点信息.jsx` |
|
||||
|
||||
@@ -17,7 +17,7 @@
|
||||
|
||||
1. **筛选区** — 名称、签约、地区、营业状态
|
||||
2. **KPI 分类** — 全部 / 签约·普通 / 预付余额预警 / 已欠费 / 无加氢
|
||||
3. **工具栏** — 全站余额提醒、批量导入、发起充值单、新建站点
|
||||
3. **工具栏** — 全站余额提醒、批量导入、加氢机品牌管理、发起充值单、新建站点
|
||||
4. **站点列表** — 主数据 + 运营指标 + 操作列
|
||||
5. **分页栏** — 每页 5/10/20/50 条
|
||||
|
||||
@@ -82,6 +82,7 @@
|
||||
|---|---|
|
||||
| 全站余额提醒设置 | 配置全局预付余额预警阈值 |
|
||||
| 批量导入 | 下载模板 → 上传 CSV/Excel → 预览确认导入 |
|
||||
| 加氢机品牌管理 | 维护品牌与型号,供 H5 面板 OCR 参考(见 `.spec/dispenser-brand.md`) |
|
||||
| 发起充值单 | 为站点发起预付充值流程(原型演示) |
|
||||
| 新建站点 | 进入同页内嵌新建视图 |
|
||||
|
||||
@@ -100,7 +101,7 @@
|
||||
| 联系方式 | 联系人 + 电话 |
|
||||
| 操作 | 查看 + 更多菜单 |
|
||||
|
||||
**更多菜单**:编辑、删除、营业状态、价格配置、生成对账单、查看对账记录等(按状态与权限显隐)。
|
||||
**更多菜单**:编辑、删除、营业状态、价格配置、余额提醒、期末余额设置、生成对账单、查看对账记录等(按状态与权限显隐)。
|
||||
|
||||
**分页**:默认 10 条,可选 5/10/20/50。
|
||||
|
||||
@@ -119,4 +120,5 @@
|
||||
| 入口 | 路径 |
|
||||
|---|---|
|
||||
| 独立原型(本页) | OneOS → 加氢站管理 → 站点信息 |
|
||||
| 合包 | ONE-OS Web 端 → 加氢站管理 → 加氢订单 / 加氢记录 |
|
||||
| 加氢订单 | OneOS → 加氢站管理 → 加氢订单(H5) |
|
||||
| 加氢记录 | OneOS → 加氢站管理 → 加氢记录(Web) |
|
||||
|
||||
@@ -1,37 +1,51 @@
|
||||
# 加氢站管理 · 站点信息 — 对账与结算 PRD
|
||||
|
||||
> 本模块与「车辆氢费明细」配合完成**站点侧氢费结算闭环**。
|
||||
> **重要**:生成对账单时,账期筛选出的明细**必须来自车辆氢费明细中「已核对」的记录**;未核对明细不得进入对账单。完整判定见 [statement-verified-filter.md](./statement-verified-filter.md);台账双状态见车辆氢费明细 `.spec/verify-reconcile.md`。
|
||||
|
||||
---
|
||||
|
||||
## 1. 数据来源
|
||||
|
||||
对账单明细取自 **车辆氢费明细** 中同时满足以下条件的记录:
|
||||
对账单明细取自 **车辆氢费明细**(共享 Store)中**同时满足**以下条件的记录:
|
||||
|
||||
1. 对账状态 = **已对账**(台账已完成「完成对账」)
|
||||
2. **尚未**被本站点历史对账单结算过(未绑定 `statementRecordId`)
|
||||
3. 加氢时间落在用户选择的 **[账单开始日期, 账单结束日期]** 内
|
||||
4. 加氢站名称与当前操作站点一致
|
||||
| 优先级 | 条件 | 说明 |
|
||||
|---|---|---|
|
||||
| 1 | 未绑定 `statementRecordId` | 尚未被历史对账单结算 |
|
||||
| 2 | 核对状态 = **已核对**(`verifyStatus = verified`) | **硬约束**:未核对一律不纳入 |
|
||||
| 3 | 对账状态 = **未对账**(`reconcileStatus = pending`) | 已对账由对账单提交产生,不再进入新账单 |
|
||||
| 4 | 加氢站名称 = 当前操作站点 | 仅本站 |
|
||||
| 5 | 加氢时间落在 **[账单开始日期, 账单结束日期]** | 用户所选账期(按日闭区间) |
|
||||
|
||||
> 对账单明细**仅展示成本字段**(加氢量、成本单价、成本总价等),不展示加氢单价、加氢总价。
|
||||
|
||||
### 1.1 为何必须「已核对」
|
||||
|
||||
能源部在车辆氢费明细点击「完成核对」后,明细才视为业务已确认。站点侧生成对账单是结算动作,只能拉取已确认数据;未核对记录即使时间落在账期内,也**静默排除**,不出现在对账单明细与统计中。
|
||||
|
||||
```text
|
||||
未核对 ──✕──→ 不可进对账单
|
||||
已核对 + 未对账 ──✓──→ 可进对账单(提交后变为已对账)
|
||||
已核对 + 已对账 ──✕──→ 不可再进下一张对账单
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 2. 两阶段交互
|
||||
|
||||
#### 生成对账单 · 业务逻辑
|
||||
|
||||
1. 选择**账单开始日期**与**账单结束日期**后,从**车辆氢费明细**获取该时间段内、对应当前站点的加氢记录(已对账且尚未结算)。
|
||||
2. 点击「**生成对账单**」时弹出**二次确认**,提示:生成对账单后,车辆氢费明细中对应记录将自动标记为已对账且无法修改。
|
||||
1. 选择**账单开始日期**与**账单结束日期**后,从**车辆氢费明细**获取该时间段内、对应当前站点、且为**已核对且尚未结算(未对账)**的加氢记录。
|
||||
2. 点击「**生成对账单**」时弹出**二次确认**,提示:生成并提交后,车辆氢费明细中对应记录将标记为**已对账**且无法修改。
|
||||
3. 确认后进入结算阶段,填写**收票日期**、**收票金额**及**发票附件**(对账日期在提交时由系统自动回写)。
|
||||
4. 点击「**提交对账单**」后,本批明细在车辆氢费明细中锁定为已对账/已结算状态,不可再修改。
|
||||
4. 点击「**提交对账单**」后,本批明细在车辆氢费明细中锁定为**已对账**并绑定本对账单,不可再进入后续对账单。
|
||||
|
||||
**阶段一 · 选期生成**
|
||||
|
||||
- 日期区下方展示:**上次对账单结束时间**(无历史则「暂无」)
|
||||
- 默认开始日期建议 = 上次结束日 + 1 天
|
||||
- 点击「生成对账单」时弹出**二次确认**:提示生成后车辆氢费明细对应记录将标记为已对账且无法修改;确认后进入阶段二,日期锁定不可改
|
||||
- 无符合条件记录时提示调整日期
|
||||
- 点击「生成对账单」时弹出**二次确认**;确认后进入阶段二,日期锁定不可改
|
||||
- 无符合条件记录时提示调整日期(含:账期内仅有未核对、或均已结算等情况)
|
||||
|
||||
**阶段二 · 结算提交**
|
||||
|
||||
@@ -39,7 +53,7 @@
|
||||
|
||||
| 指标 | 说明 |
|
||||
|---|---|
|
||||
| 加氢次数 | 本账单包含的已对账记录笔数 |
|
||||
| 加氢次数 | 本账单包含的**已核对**记录笔数 |
|
||||
| 加氢总量 | kg 合计 |
|
||||
| 成本总金额 | 成本总价合计 |
|
||||
|
||||
@@ -65,12 +79,15 @@
|
||||
|
||||
| 车辆氢费明细字段 | 回写值 |
|
||||
|---|---|
|
||||
| 对账状态 | **已对账**(`reconcileStatus = reconciled`) |
|
||||
| 对账日期 | 操作完成时间 |
|
||||
| 收票日期 | 操作完成日期 |
|
||||
| 加氢站付款状态 | 已付款 |
|
||||
|
||||
原型通过 `H2_STATION_STATEMENT_LEDGER_UPDATES` / `h2VehicleLedgerBridge` 模拟跨页回写。
|
||||
|
||||
> 「完成核对」只改变核对状态,**不会**把记录写成已对账;已对账仅由本页对账单提交产生。
|
||||
|
||||
---
|
||||
|
||||
## 4. 查看对账记录
|
||||
@@ -88,7 +105,8 @@
|
||||
| 场景 | 处理 |
|
||||
|---|---|
|
||||
| 日期未填 / 开始晚于结束 | 阻止生成 |
|
||||
| 区间内无已对账未结算记录 | 阻止生成,提示调整日期 |
|
||||
| 区间内无「已核对且未对账未结算」记录 | 阻止生成,提示调整日期(或先完成核对) |
|
||||
| 区间内存在未核对记录 | **不纳入**对账单;不单独弹窗枚举(静默排除) |
|
||||
| 点击「生成对账单」未确认 | 不进入结算阶段 |
|
||||
| 收票日期/金额/附件未填 | 阻止提交 |
|
||||
| 收票金额 ≤ 0 | 阻止提交 |
|
||||
@@ -98,8 +116,10 @@
|
||||
|
||||
## 6. 研发要点
|
||||
|
||||
1. **对账单幂等**:同一笔已对账记录只能进入一次成功提交的对账单
|
||||
2. **上次结束时间**:取该站点已成功提交对账单的最大 `endDate`
|
||||
3. **余额计算**:`balanceAfter = prepaidBalance - sum(costTotal)`
|
||||
4. **跨模块同步**:生产对接统一台账;原型使用 Bridge Store
|
||||
5. **明细字段范围**:对账弹窗不展示客户侧加氢单价/总价
|
||||
1. **准入**:`verifyStatus === verified` 为硬条件;勿再用「已对账」作为生成筛选条件
|
||||
2. **对账单幂等**:同一笔明细只能进入一次成功提交的对账单(`statementRecordId` 约束)
|
||||
3. **上次结束时间**:取该站点已成功提交对账单的最大 `endDate`
|
||||
4. **余额计算**:`balanceAfter = prepaidBalance - sum(costTotal)`
|
||||
5. **跨模块同步**:生产对接统一台账;原型使用 Bridge Store
|
||||
6. **明细字段范围**:对账弹窗不展示客户侧加氢单价/总价
|
||||
7. **规格全文**:[statement-verified-filter.md](./statement-verified-filter.md)
|
||||
|
||||
@@ -7,7 +7,7 @@
|
||||
| 所属系统 | ONE-OS Web 端 |
|
||||
| 目标读者 | 前端 / 后端 / 测试 / 业务产品对接人 |
|
||||
| 交互原型 | `/prototypes/oneos-web-h2-station-site` |
|
||||
| 关联原型 | [车辆氢费明细](/prototypes/vehicle-h2-fee-ledger)、[加氢站合包](/prototypes/oneos-web-h2-station) |
|
||||
| 关联原型 | [车辆氢费明细](/prototypes/vehicle-h2-fee-ledger)、[加氢记录](/prototypes/oneos-web-h2-station)、[加氢订单 H5](/prototypes/oneos-h5-h2-order) |
|
||||
| 文档状态 | 已对齐原型 |
|
||||
|
||||
---
|
||||
@@ -36,7 +36,7 @@
|
||||
|
||||
- 对账单审批流、ERP 自动过账
|
||||
- 发票 OCR 识别与验真
|
||||
- 加氢订单、加氢记录(仍在合包 `oneos-web-h2-station`)
|
||||
- 加氢订单(独立 H5:`oneos-h5-h2-order`)、加氢记录(独立 Web:`oneos-web-h2-station`)本页不内嵌
|
||||
- 后端接口联调(原型使用 Mock + 共享 Store)
|
||||
|
||||
---
|
||||
@@ -118,22 +118,37 @@
|
||||
3. **阶梯量重置日期**见价格配置表单内「阶梯量重置日期」;到达重置日后,累计加氢量**从零重新计数**,用于判断当前所处价格区间。
|
||||
4. **生效时间**自表单内「生效时间」起对新数据生效,**不追溯**此前已产生的数据;生效时间之前的历史记录,仍按当时已达的**最高阶梯价格**结算。
|
||||
|
||||
### 5.3 下钻分析
|
||||
### 5.3 期末余额设置
|
||||
|
||||
> 完整规则见 [period-end-balance.md](./period-end-balance.md)
|
||||
|
||||
与加氢站对账存在时间差时,登记**期末余额**与**期末时间**作为锚点:
|
||||
|
||||
- **入口**:更多 → 期末余额设置
|
||||
- **计算**:`当前预付余额 = 期末余额 − 期末后支出 + 期末后收入`(仅保存时重算一次)
|
||||
- **约束**:期末时间不可晚于今天;变更记录只追加、不可删除
|
||||
- **下钻**:余额流水从期末锚点行起重新累加
|
||||
|
||||
### 5.4 下钻分析
|
||||
|
||||
- **加氢量下钻**:统计卡 + 明细表 + 导出,字段对齐车辆氢费明细
|
||||
- **预付余额下钻**:充值/加氢流水 + 趋势图 + 导出
|
||||
- **预付余额下钻**:充值/加氢流水 + 趋势图 + 导出;若已配置期末余额,自期末时间锚点重算后续余额
|
||||
|
||||
---
|
||||
|
||||
## 6. 对账与结算(重点)
|
||||
|
||||
> 详见 `.spec/requirements-prd-statement.md`
|
||||
> 详见 [requirements-prd-statement.md](./requirements-prd-statement.md);纳入规则全文见 [statement-verified-filter.md](./statement-verified-filter.md)
|
||||
|
||||
与「车辆氢费明细」配合完成站点侧氢费结算闭环:
|
||||
|
||||
1. 拉取已对账且未结算的记录
|
||||
2. 两阶段:选期生成 → 填收票提交
|
||||
3. 提交后更新预付余额、写对账历史、回写台账(对账日期、收票日期、已付款)
|
||||
| 步骤 | 说明 |
|
||||
|---|---|
|
||||
| 1. 拉取明细 | 按账期从车辆氢费明细取 **已核对** ∧ **未对账** ∧ 未结算 ∧ 本站 的记录;**未核对不纳入** |
|
||||
| 2. 两阶段 | 选期生成 → 填收票提交 |
|
||||
| 3. 提交回写 | 更新预付余额、写对账历史;台账变为 **已对账**(对账日期、收票日期、已付款) |
|
||||
|
||||
> **核对 ≠ 对账**:核对由车辆氢费明细「完成核对」产生;对账仅由本页「提交对账单」回写。
|
||||
|
||||
---
|
||||
|
||||
@@ -143,7 +158,7 @@
|
||||
|---|---|
|
||||
| 氢费明细 | `src/common/h2VehicleLedgerBridge.js` |
|
||||
| 对账回写 | `H2_STATION_STATEMENT_LEDGER_UPDATES` |
|
||||
| 页面实现 | `src/prototypes/oneos-web-h2-station/pages/03-站点信息.jsx` |
|
||||
| 页面实现 | `src/prototypes/oneos-web-h2-station-site/pages/03-站点信息.jsx` |
|
||||
| 独立入口 | `src/prototypes/oneos-web-h2-station-site/index.tsx` |
|
||||
|
||||
---
|
||||
@@ -159,11 +174,17 @@
|
||||
|
||||
### 8.2 对账流程
|
||||
|
||||
- [ ] 仅已对账未结算记录可进入对账单
|
||||
- [ ] 仅 **已核对** 且未对账、未结算的记录可进入对账单;未核对明细即使在账期内也不出现
|
||||
- [ ] 两阶段交互与必填校验完整
|
||||
- [ ] 提交后回写车辆氢费明细可跨页验收
|
||||
- [ ] 提交后回写车辆氢费明细为 **已对账**,可跨页验收
|
||||
|
||||
### 8.3 标注与文档
|
||||
### 8.3 期末余额设置
|
||||
|
||||
- [ ] 更多菜单可打开期末余额设置;期末时间不可晚于今天
|
||||
- [ ] 保存后写回预付余额,变更记录只追加不可删
|
||||
- [ ] 余额下钻出现期末锚点且后续余额连续推算
|
||||
|
||||
### 8.4 标注与文档
|
||||
|
||||
- [ ] `@axhub/annotation` 已接入,关键区域有 `data-annotation-id`
|
||||
- [ ] 右侧工具栏目录可阅 PRD 全文与页面标注
|
||||
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user