Compare commits
17
Commits
Profile0928
...
main
| Author | SHA1 | Date | |
|---|---|---|---|
 shishengliang
|
da87d7e144 | ||
|
shishengliang
|
097e882886 | ||
|
shishengliang
|
589f06391f | ||
|
shishengliang
|
fd585c991f | ||
|
shishengliang
|
358e2ecf4f | ||
|
shishengliang
|
fb86bbce3c | ||
|
shishengliang
|
e7916b9ee2 | ||
|
shishengliang
|
7d8bff4660 | ||
|
shishengliang
|
4ebcf355fc | ||
|
shishengliang
|
04045b41db | ||
|
shishengliang
|
c6bf129564 | ||
|
shishengliang
|
0190bd6174 | ||
|
shishengliang
|
1a48b607b2 | ||
|
shishengliang
|
269e3139a3 | ||
|
shishengliang
|
c2f21a3a8a | ||
|
shishengliang
|
17b084ce62 | ||
|
shishengliang
|
dae727dfde |
@@ -3,6 +3,7 @@ dist
|
||||
.env
|
||||
.env.*
|
||||
!.env.example
|
||||
!.env.*.example
|
||||
.git
|
||||
.codex
|
||||
outputs
|
||||
|
||||
@@ -0,0 +1,18 @@
|
||||
# Copy to .env.local; never commit real credentials. Environment values win.
|
||||
HYDROGEN_DB_HOST=
|
||||
HYDROGEN_DB_PORT=3306
|
||||
HYDROGEN_DB_USER=
|
||||
HYDROGEN_DB_PASSWORD=
|
||||
HYDROGEN_DB_NAME=
|
||||
# 单站与外部客户数据租户；仅由服务端设置，不接受网页传入。
|
||||
HYDROGEN_TENANT_ID=000000
|
||||
# Optional legacy/electric business database; use a database-level read-only user.
|
||||
DB_HOST=
|
||||
DB_PORT=3306
|
||||
DB_USER=
|
||||
DB_PASSWORD=
|
||||
DB_NAME=
|
||||
# Local development uses the public OneOS endpoint; the ECS private IP is not reachable locally.
|
||||
ONEOS_MILEAGE_API_BASE_URL=https://open.d.lnoneos.com
|
||||
ONEOS_MILEAGE_API_KEY=
|
||||
ONEOS_MILEAGE_API_TIMEOUT_MS=20000
|
||||
+2
-2
@@ -3,10 +3,10 @@ dist
|
||||
.env
|
||||
.env.*
|
||||
!.env.example
|
||||
!.env.*.example
|
||||
.worktrees
|
||||
|
||||
# Local machine metadata and runtime logs
|
||||
.DS_Store
|
||||
scripts-tmp
|
||||
*.log
|
||||
|
||||
# Permission-preview audit trail (operator/target identifiers)
|
||||
|
||||
+5
-3
@@ -2,7 +2,7 @@ FROM node:22-alpine AS builder
|
||||
|
||||
WORKDIR /app
|
||||
COPY package.json package-lock.json ./
|
||||
RUN npm ci
|
||||
RUN npm ci --registry=https://registry.npmmirror.com/ --no-audit --no-fund
|
||||
COPY . .
|
||||
RUN npm run build
|
||||
|
||||
@@ -10,14 +10,16 @@ FROM node:22-alpine
|
||||
|
||||
WORKDIR /app
|
||||
COPY package.json package-lock.json ./
|
||||
RUN npm ci --omit=dev
|
||||
RUN npm ci --omit=dev --registry=https://registry.npmmirror.com/ --no-audit --no-fund
|
||||
COPY --from=builder /app/dist ./dist
|
||||
COPY src/server ./src/server
|
||||
COPY src/shared ./src/shared
|
||||
COPY tsconfig.json ./
|
||||
|
||||
EXPOSE 3001
|
||||
ENV NODE_ENV=production
|
||||
ENV SERVER_PORT=3001
|
||||
ENV EXTERNAL_API_BASE=https://lnh2e.com
|
||||
ENV JWT_SECRET=ln-bi-jwt-prod-secret
|
||||
# JWT_SECRET 不再写入镜像：镜像层里的默认密钥等同于公开密钥，任何人可离线伪造令牌。
|
||||
# 必须在运行环境注入（至少 32 字符），缺失时服务会拒绝启动（见 src/server/config.ts）。
|
||||
CMD ["npm", "run", "start"]
|
||||
|
||||
@@ -0,0 +1,87 @@
|
||||
# LN-BI
|
||||
|
||||
羚牛业务数据的统一 BI Web 应用。React 19 + Vite 前端，Hono 后端，单进程同时提供 API 与静态页面。
|
||||
|
||||
## 入口
|
||||
|
||||
| 入口 | 模块 | 路由 |
|
||||
| --- | --- | --- |
|
||||
| 资产 BI | 资产管理、里程管理、车辆/加氢热力图、智能调度 | `/asset` |
|
||||
| 能源 BI | 氢费 BI、电能、ETC | `/energy` |
|
||||
| 隐藏页 | 充电记录导入（需能源角色） | `/ele/import` |
|
||||
| 隐藏页 | 用户反馈管理 | `/admin/feedback` |
|
||||
| 独立入口 | 氢能经营看板（与 `/energy` 内同一组件） | `/energy/hydrogen-board` |
|
||||
|
||||
页面内部用 Hash 保存子页面状态，例如 `/energy#hydrogen/overview`。入口兼容逻辑见 `src/app/routing.ts`。
|
||||
|
||||
## 快速开始
|
||||
|
||||
需要 Node.js 22 与 npm。
|
||||
|
||||
```bash
|
||||
npm ci
|
||||
cp .env.local.example .env.local # 填入数据库等连接配置，切勿提交
|
||||
npm run dev:local # 只读本地预览：前端 127.0.0.1:8115，API 127.0.0.1:3001
|
||||
```
|
||||
|
||||
`dev:local` 会强制 `DB_READ_ONLY=1`、`HYDROGEN_DB_READ_ONLY=1`、`MILEAGE_REPORT_AUTO_ARCHIVE=0`、
|
||||
`DEV_BYPASS_AUTH=1`，并且**不启动建表与定时任务**，适合看真实数据而不写库。不要把它暴露到公网。
|
||||
|
||||
常规开发（前端 3000，后端 3001，`/api` 由 Vite 代理）：
|
||||
|
||||
```bash
|
||||
npm run dev
|
||||
```
|
||||
|
||||
## 命令
|
||||
|
||||
| 命令 | 说明 |
|
||||
| --- | --- |
|
||||
| `npm run dev` | 前后端开发模式 |
|
||||
| `npm run dev:local` | 只读本地预览（免登录，禁写库） |
|
||||
| `npm run lint` | 类型检查（`tsc --noEmit`） |
|
||||
| `npm test` | Node 内置测试运行器 |
|
||||
| `npm run build` | 生成 `dist` |
|
||||
| `npm start` | 生产式启动（需先 build，且必须提供环境变量） |
|
||||
|
||||
发布门禁是 `lint` + `test` + `build` 三者同时通过（CI 见 `woodpecker.yml`）。
|
||||
|
||||
## 目录
|
||||
|
||||
```
|
||||
src/
|
||||
├── app/ 应用外壳：路由解析、导航注册
|
||||
├── auth/ 前端认证状态与注入
|
||||
├── components/ 跨模块 UI（Shell、反馈、通用控件）
|
||||
├── modules/ 前端业务域（每个域自带 api / model / components / css）
|
||||
│ ├── assets/ 资产管理
|
||||
│ ├── mileage/ 里程（monitoring / statistics / daily-report）
|
||||
│ ├── scheduling/智能调度
|
||||
│ ├── energy/ 能源（hydrogen / electric / etc）
|
||||
│ ├── ele/ 电能数据导入
|
||||
│ ├── admin/ 反馈后台
|
||||
│ └── *-heatmap/ 两类热力图
|
||||
├── shared/ 前后端共享的叶子层（角色常量、跨端 DTO、日期区间、Excel、高德接入）
|
||||
└── server/
|
||||
├── config.ts 环境变量集中读取 + 启动期校验
|
||||
├── app.ts 应用装配（无副作用，便于测试）
|
||||
├── index.ts 进程启动
|
||||
├── local.ts 只读预览启动
|
||||
├── db/ MySQL / PostgreSQL 连接
|
||||
├── middleware/认证、只读
|
||||
├── auth/ 登录（SSO 换票 / 固定密码）、权限
|
||||
└── routes/ 按业务域的 HTTP 路由
|
||||
```
|
||||
|
||||
## 架构约定
|
||||
|
||||
分层规则、依赖方向与「新增一个模块该放哪」见 [`docs/ARCHITECTURE.md`](docs/ARCHITECTURE.md)。
|
||||
其中 6 条硬规则由 `src/architecture.test.ts` 断言，违反即测试失败。
|
||||
|
||||
## 部署注意事项
|
||||
|
||||
- `JWT_SECRET` **必须**在运行环境注入且不少于 32 字符；SSO 模式下缺失时服务会拒绝启动。
|
||||
镜像内不再内置默认密钥（历史默认值等同于公开密钥，可被离线伪造令牌）。
|
||||
- 数据库口令、Harbor 凭据、OSS / OneOS / 高德密钥一律通过环境变量或 CI Secret 注入，
|
||||
仓库内不保留真实值。历史提交中出现过的凭据都需要轮换。
|
||||
- 生产环境请显式设置 `NODE_ENV=production` 与 `DEV_BYPASS_AUTH=0`；后者会绕过全部认证。
|
||||
@@ -0,0 +1,47 @@
|
||||
# Energy Hydrogen Board Design QA
|
||||
|
||||
- Source of truth: `/tmp/energy-h2-bi-board-prototype-0818/index.html`
|
||||
- Prototype archive: `/Users/kkfluous/Library/Containers/com.tencent.xinWeChat/Data/Documents/xwechat_files/wxid_1704407055112_3af8/msg/file/2026-08/energy-h2-bi-board-html.zip`
|
||||
- Implementation: `http://localhost:3000/energy#hydrogen/overview`
|
||||
- Desktop viewport: 1280 x 720 CSS px
|
||||
- Mobile viewport checked for the daily flow: 390 x 844 CSS px
|
||||
|
||||
## Compared States
|
||||
|
||||
| State | Prototype | Implementation | Combined comparison |
|
||||
| --- | --- | --- | --- |
|
||||
| Global overview | `/var/tmp/proto-global-overview.png` | `/var/tmp/impl-global-overview-final.png` | `/var/tmp/compare-global-overview-final.png` |
|
||||
| Global daily | `/var/tmp/proto-global-daily.png` | `/var/tmp/impl-global-daily-final.png` | `/var/tmp/compare-global-daily-final.png` |
|
||||
| All stations | `/var/tmp/proto-station.png` | `/var/tmp/impl-station-final.png` | `/var/tmp/compare-station-final.png` |
|
||||
| Station detail | `/var/tmp/proto-station-detail.png` | `/var/tmp/impl-station-detail-final.png` | `/var/tmp/compare-station-detail-final.png` |
|
||||
|
||||
All desktop comparisons use the same viewport, pixel dimensions, navigation state, and side-by-side source/implementation input.
|
||||
|
||||
## Interaction Evidence
|
||||
|
||||
- Global overview KPI, month, region, station, customer, and insight entries open real ledger drill-down data.
|
||||
- Global daily supports date presets, custom dates, all/Lingniu/external vehicle scopes, chart-to-date focus, and date -> station -> customer -> vehicle/source drill-down.
|
||||
- Daily and station evidence tables provide Excel export where the prototype exposes an export command.
|
||||
- All-station mode supports all/single station display, station selection, clickable daily KPI dialogs, and zero-activity stations.
|
||||
- Station detail includes a continuous 10-day series with zero-filled late days, recent 7-day table, range trend, and 12-month customer quantity/fee matrices.
|
||||
- Entering and leaving a station detail resets the page scroll position so the header and notice remain visible.
|
||||
- A clean browser tab loaded the final overview with no console warnings or errors.
|
||||
- Daily mobile flow has no body-level horizontal overflow; wide analytical tables retain intentional internal horizontal scrolling.
|
||||
|
||||
## Iteration History
|
||||
|
||||
1. P1: Station detail inherited the long station-list scroll position. Added deterministic scroll reset on enter and return.
|
||||
2. P1: Daily drill stopped at station level. Implemented the prototype's full four-level drill and real ledger rows.
|
||||
3. P1: Station KPI cards were static. Added the three prototype daily detail dialogs using continuous server-side daily summaries.
|
||||
4. P2: Prototype state matrix was incomplete. Added global overview, global daily, all-station, single-station selector, and station detail states.
|
||||
5. P2: Icons differed from the prototype. Replaced approximate icons with matching Lucide Fuel, Zap, Wallet, Calendar, Truck, Refresh, Download, and navigation icons.
|
||||
6. P2: Recharts could measure a transitioning container at a negative size. Added minimum and initial dimensions and verified a clean reload.
|
||||
7. P2: Station detail omitted dates without records. Zero-filled the requested range so delayed or absent reporting is visible rather than silently skipped.
|
||||
|
||||
## Residual P3
|
||||
|
||||
- Prototype screenshots contain fixed mock dates and values; implementation screenshots use the current read-only database values.
|
||||
- The prototype warning says opening balances are still calibrating. The implementation uses a truthful traceability notice because the live ledger does not expose that calibration state.
|
||||
- Native date-picker popovers vary by operating system; the closed controls match the prototype hierarchy and icon roles.
|
||||
|
||||
final result: passed
|
||||
+30
-19
@@ -1,29 +1,31 @@
|
||||
version: '3.8'
|
||||
|
||||
# 凭据一律通过 Portainer / 环境变量注入，不再写入本文件。
|
||||
# 注意：此前提交到 Git 的数据库口令与 JWT 密钥已视为泄漏，必须轮换后再使用。
|
||||
# JWT_SECRET 至少要 32 个字符，缺失时服务会拒绝启动（src/server/config.ts）。
|
||||
|
||||
services:
|
||||
ln-bi:
|
||||
image: harbor.lnh2e.com/lingniu-v1/ln-bi:feature-asset-statistics-1.1.18
|
||||
image: harbor.lnh2e.com/lingniu-v1/ln-bi:main-1.2.3
|
||||
network_mode: host
|
||||
environment:
|
||||
# Runtime only: set this variable in Portainer Stack environment variables.
|
||||
DEEPSEEK_API_KEY: "${DEEPSEEK_API_KEY:-}"
|
||||
# Enabled when a Key is configured; set 0 to use the local planner only.
|
||||
ASSET_AI_EXTERNAL_ENABLED: "${ASSET_AI_EXTERNAL_ENABLED:-1}"
|
||||
DB_HOST: "rm-bp179zbv481rnw3e2no.mysql.rds.aliyuncs.com"
|
||||
DB_PORT: "3306"
|
||||
DB_USER: "oneos_db_prod"
|
||||
DB_PASSWORD: "adASHJcviqwjkbn23ngt1"
|
||||
DB_NAME: "ln_asset_management"
|
||||
HYDROGEN_DB_HOST: "47.99.185.173"
|
||||
HYDROGEN_DB_PORT: "3306"
|
||||
HYDROGEN_DB_USER: "root"
|
||||
HYDROGEN_DB_PASSWORD: "lnMysql."
|
||||
HYDROGEN_DB_NAME: "ln_asset_management"
|
||||
MILEAGE_DB_HOST: "101.133.130.65"
|
||||
MILEAGE_DB_PORT: "3306"
|
||||
MILEAGE_DB_USER: "bi_reader_02"
|
||||
MILEAGE_DB_PASSWORD: "bi_reader_02_Pass"
|
||||
MILEAGE_DB_NAME: "hydrogen_energy"
|
||||
NODE_ENV: "production"
|
||||
# 生产必须保持为 0：该开关会绕过全部认证。
|
||||
DEV_BYPASS_AUTH: "0"
|
||||
DB_HOST: "${DB_HOST:?请注入主业务库地址}"
|
||||
DB_PORT: "${DB_PORT:-3306}"
|
||||
DB_USER: "${DB_USER:?请注入主业务库只读账号}"
|
||||
DB_PASSWORD: "${DB_PASSWORD:?请注入主业务库口令}"
|
||||
DB_NAME: "${DB_NAME:-ln_asset_management}"
|
||||
# 氢能库未配置时复用主库，因此默认不再单独注入；如需独立只读库再配置。
|
||||
HYDROGEN_DB_HOST: "${HYDROGEN_DB_HOST:-}"
|
||||
HYDROGEN_DB_PORT: "${HYDROGEN_DB_PORT:-3306}"
|
||||
HYDROGEN_DB_USER: "${HYDROGEN_DB_USER:-}"
|
||||
HYDROGEN_DB_PASSWORD: "${HYDROGEN_DB_PASSWORD:-}"
|
||||
HYDROGEN_DB_NAME: "${HYDROGEN_DB_NAME:-}"
|
||||
HYDROGEN_TENANT_ID: "${HYDROGEN_TENANT_ID:-000000}"
|
||||
# ECS production accesses OneOS over the private network. Configure the key
|
||||
# as a Portainer stack environment variable; never commit it to this file.
|
||||
ONEOS_MILEAGE_API_BASE_URL: "${ONEOS_MILEAGE_API_BASE_URL:-http://172.17.111.55:20310}"
|
||||
@@ -31,7 +33,9 @@ services:
|
||||
ONEOS_MILEAGE_API_TIMEOUT_MS: "${ONEOS_MILEAGE_API_TIMEOUT_MS:-20000}"
|
||||
SERVER_PORT: "8111"
|
||||
EXTERNAL_API_BASE: "https://lnh2e.com"
|
||||
JWT_SECRET: "ln-bi-jwt-prod-k8s9m2x7"
|
||||
BI_AUTH_MODE: "${BI_AUTH_MODE:-sso}"
|
||||
BI_AUTH_PASSWORD: "${BI_AUTH_PASSWORD:-}"
|
||||
JWT_SECRET: "${JWT_SECRET:?请注入至少 32 字符的随机签名密钥}"
|
||||
AMAP_WEB_KEY: "${AMAP_WEB_KEY}"
|
||||
AMAP_SECURITY_JS_CODE: "${AMAP_SECURITY_JS_CODE}"
|
||||
HEATMAP_DB_HOST: "${HEATMAP_DB_HOST}"
|
||||
@@ -40,6 +44,13 @@ services:
|
||||
HEATMAP_DB_PASSWORD: "${HEATMAP_DB_PASSWORD}"
|
||||
HEATMAP_DB_NAME: "${HEATMAP_DB_NAME:-lingniu_vehicle_data}"
|
||||
HEATMAP_DB_SSL: "${HEATMAP_DB_SSL:-false}"
|
||||
# 用户反馈截图上传所需；此前缺失会导致反馈上传必然失败。
|
||||
OSS_REGION: "${OSS_REGION}"
|
||||
OSS_ENDPOINT: "${OSS_ENDPOINT}"
|
||||
OSS_BUCKET: "${OSS_BUCKET}"
|
||||
OSS_ACCESS_KEY_ID: "${OSS_ACCESS_KEY_ID}"
|
||||
OSS_ACCESS_KEY_SECRET: "${OSS_ACCESS_KEY_SECRET}"
|
||||
OSS_BASE_DIR: "${OSS_BASE_DIR}"
|
||||
deploy:
|
||||
replicas: 1
|
||||
restart_policy:
|
||||
|
||||
@@ -0,0 +1,165 @@
|
||||
# 架构与分层约定
|
||||
|
||||
本文是这个仓库的结构契约。**6 条硬规则由 `src/architecture.test.ts` 断言**，破坏即测试失败。
|
||||
|
||||
## 1. 分层与依赖方向
|
||||
|
||||
```
|
||||
app/ 应用外壳（路由、导航注册）
|
||||
↓
|
||||
modules/ 前端业务域 —— 只依赖 shared/
|
||||
↓
|
||||
shared/ 叶子层：角色常量、跨端 DTO、纯工具（不得依赖 modules/ 或 server/）
|
||||
|
||||
server/ 后端 —— 只依赖 shared/，不得依赖 modules/
|
||||
```
|
||||
|
||||
**依赖只能向下**。前端通过 HTTP 调用后端，不通过 import。
|
||||
|
||||
### 6 条硬规则
|
||||
|
||||
| # | 规则 | 违反后果 |
|
||||
| --- | --- | --- |
|
||||
| 1 | `server/**` 不得 import `modules/**` | 服务端被前端类型/组件绑架，无法独立部署与测试 |
|
||||
| 2 | `modules/**`、`components/**`、`auth/**`、`app/**` 不得 import `server/**` | 打包会拖入服务端代码与密钥 |
|
||||
| 3 | `shared/**` 不得 import `modules/**` / `server/**` / `components/**` | 叶子层反向依赖会让依赖图成环 |
|
||||
| 4 | 不得出现 `vendor/` 引用 | 生产代码必须位于业务域目录，不能藏在"第三方/参考"目录里 |
|
||||
| 5 | `model.ts` / `model.tsx` 不得 import `react` | 纯模型必须能在 Node 里直接单测，不依赖 DOM |
|
||||
| 6 | `@ts-nocheck` 只允许出现在已登记的原型快照文件 | 类型门禁对最大文件失效 |
|
||||
|
||||
### 关于第 6 条的豁免清单
|
||||
|
||||
这三个文件是**逐字节保留**的 8113 验收原型（UI / CSS 冻结，改动需重新做桌面与移动端截图验收）：
|
||||
|
||||
```
|
||||
modules/energy/hydrogen/board/EnergyBiBoardApp.tsx
|
||||
modules/energy/hydrogen/station-daily/StationDailyApp.tsx
|
||||
modules/energy/hydrogen/station-daily/StationDailyDetailView.tsx
|
||||
```
|
||||
|
||||
豁免清单是**只减不增**的：新增 `@ts-nocheck` 会被测试拦下，请改为修正类型。
|
||||
|
||||
## 2. 前端业务域的形状
|
||||
|
||||
每个域尽量保持同一形状，便于"进一个目录就知道从哪读起"：
|
||||
|
||||
```
|
||||
modules/<domain>/
|
||||
index.tsx 域入口组件（导出给 app/modules.ts 注册）
|
||||
api.ts 只做 HTTP，不做业务判断
|
||||
types.ts DTO
|
||||
model.ts 纯函数：筛选 / 排序 / 聚合 / 口径（可被 node:test 直接测）
|
||||
components/ 无状态展示组件
|
||||
*.css 域内样式
|
||||
```
|
||||
|
||||
复杂域可以再分子域，例如氢能：
|
||||
|
||||
```
|
||||
modules/energy/hydrogen/
|
||||
index.tsx 导航入口
|
||||
api.ts types.ts 数据访问与 DTO
|
||||
model/ 纯逻辑（格式化、承担方标签、按日汇总格式）
|
||||
board/ 经营看板 UI
|
||||
station-daily/ 单站日报 UI
|
||||
drill/ 下钻弹层 UI
|
||||
common/ 域内共享工具与组件
|
||||
fonts/ 看板专用字体
|
||||
```
|
||||
|
||||
判定标准很简单：**能在 Node 里直接测的放 `model/`；需要浏览器/DOM 的放 UI 子目录。**
|
||||
|
||||
## 3. 后端结构
|
||||
|
||||
```
|
||||
server/
|
||||
config.ts 环境变量集中读取 + assertRuntimeConfig() 启动期校验
|
||||
app.ts createApp()：装配中间件、挂载路由、静态托管（无副作用，可测试）
|
||||
index.ts 进程启动：config 校验 → app → bootstrap → listen
|
||||
local.ts 只读预览启动（不建表、不定时任务）
|
||||
bootstrap.ts 启动副作用总入口
|
||||
db/ mysql / hydrogen / heatmap 连接
|
||||
db/schema/ 运行时建表/改表的唯一位置（只读模式下整体跳过）
|
||||
middleware/ auth（JWT → 注入 user）、read-only
|
||||
auth/ 登录换票、固定密码、权限过滤与脱敏
|
||||
routes/<domain>/ 按业务域的 HTTP 路由
|
||||
```
|
||||
|
||||
### 后端业务域的形状（`server/routes/<domain>/`）
|
||||
|
||||
命名约定：`index.ts` 是**聚合器**（把子路由挂到前缀上），`routes.ts` 是**叶子路由**。
|
||||
|
||||
| 域 | 文件 | 说明 |
|
||||
| --- | --- | --- |
|
||||
| `vehicles/` | `routes.ts` `repository.ts` `model.ts` `utils.ts` `types.ts` | ✅ 完整分层；SQL 有契约测试 |
|
||||
| `ele/` | `routes.ts` `repository.ts` `model.ts`（+ `model.test.ts` `routes.test.ts`） | ✅ 完整分层；改造前后 SQL/参数/响应体已做等价性验证 |
|
||||
| `feedback/` | `routes.ts` `repository.ts` `oss.ts`（+ `routes.test.ts`） | ✅ 完整分层；同上 |
|
||||
| `mileage/` | `index.ts`（聚合）+ `monitoring.ts` `targets.ts` `trend.ts` `daily-report.ts` `vehicle-recent.ts` + `repository.ts` + `*-model.ts` + `cache.ts` `oneos-api.ts` `daily-report-{service,store,scheduler}.ts` | ✅ 完整分层；车辆关联信息 SQL 与 18 个查询集中在此 |
|
||||
| `energy/` | `index.ts`（聚合）+ `electric.ts` `etc.ts` `hydrogen-station-board.ts` `hydrogen-bi-v2.ts` + `repository.ts` + `query-model.ts` `cache.ts` `constants.ts` | ✅ 完整分层；WHERE 片段组装（`buildFilterClauses` / `buildGroupSelect` / `buildScopedWhere` / `resolvedWhere`）与共享 SQL 片段也都在 repository / constants |
|
||||
| `scheduling/` | `index.ts`（聚合）+ `suggestions.ts` `notify.ts` `repository.ts` + `algorithm.ts` `notification-model.ts` | ✅ 完整分层；跨域数据源（里程车辆信息 / OneOS）显式注入 |
|
||||
| `hydrogen-heatmap/` | `routes.ts` `repository.ts` `model.ts`（+ `routes.test.ts`） | ✅ 完整分层；`buildWhere` 片段与参数顺序已锁定 |
|
||||
| `vehicle-heatmap/` | `routes.ts` `repository.ts` `model.ts`（+ `routes.test.ts`） | ✅ 完整分层；同时覆盖 MySQL（考核批次）与 PG（定位点）两个库 |
|
||||
|
||||
**全部八个域**（`vehicles` / `ele` / `feedback` / `vehicle-heatmap` / `hydrogen-heatmap` / `scheduling` / `energy` / `mileage`）
|
||||
由架构测试守护：必须存在 `repository.ts`，且该域**其他任何非测试文件都不得含 SQL**。
|
||||
其余域（`energy` / `mileage`）尚未拆出 repository——拆分时**不要改变 SQL 与参数顺序**，
|
||||
请按 `ele/routes.test.ts` 的配方先补契约测试，并用"改造前后同一批请求对比落库 SQL 与响应体"做等价性验证。
|
||||
|
||||
|
||||
### 中间件顺序（在 `app.ts` 中显式体现）
|
||||
|
||||
```
|
||||
cors → read-only → /api/auth（公开） → authMiddleware → 各业务域路由
|
||||
→ /api/health → /api/* 未匹配返回 JSON 404 → 静态托管 + SPA 回退
|
||||
```
|
||||
|
||||
两个已经踩过的坑，改动时不要退回去：
|
||||
|
||||
- **未匹配的 `/api/*` 必须返回 JSON 404**。若落到 SPA 回退，会返回 `200 text/html`，
|
||||
前端 `res.ok` 为真后在 `res.json()` 抛解析错误，把"路由不存在"伪装成数据问题。
|
||||
- **模块守卫必须 fail-closed**，写法是 `if (!canAccessX(user?.roles))`，
|
||||
不能写成 `if (user && !canAccessX(user.roles))`——后者在 `user` 缺失时静默放行。
|
||||
|
||||
### 角色与数据权限
|
||||
|
||||
- 角色常量唯一真源：`src/shared/auth/roles.ts`（前后端共用）。
|
||||
- 数据范围过滤与客户名脱敏：`src/server/auth/permissions.ts`。
|
||||
- `permissionLevel` 只表示**数据范围**，不等于模块权限；能源/调度/反馈各自另有白名单。
|
||||
|
||||
## 4. 新增一个业务模块的步骤
|
||||
|
||||
1. `src/modules/<domain>/`：建 `api.ts`（HTTP）、`model.ts`（纯逻辑）、`index.tsx`（入口）、`components/`。
|
||||
2. `src/app/modules.ts`：注册导航项，必要时用 `roles.ts` 的判断控制可见性。
|
||||
3. `src/server/routes/<domain>.ts`（或 `routes/<domain>/`）：实现接口；需要模块级权限就加 **fail-closed** 守卫。
|
||||
4. 数据权限：读取后调用 `filterByPermission` + `maskCustomerNames`，或写等价的 SQL 过滤。
|
||||
5. 测试：纯逻辑进 `model.test.ts`；接口口径用**固定夹具**锁 SQL 与参数（参考 `server/routes/energy/routes.test.ts`）。
|
||||
6. 跑 `npm run lint && npm test && npm run build`。
|
||||
|
||||
## 5. 已知未尽事项
|
||||
|
||||
诚实记录，避免后来者以为已经做完：
|
||||
|
||||
- **后端八个域都已拆出 repository**，SQL 只允许出现在各域的 `repository.ts`（以及共享片段模块
|
||||
`energy/constants.ts`）中，由架构测试守护。新增查询请沿用同一形状：路由只做校验与组装，
|
||||
SQL 进 `repository.ts`，纯逻辑进 `model.ts`，并用 mock pool 的契约测试锁定 SQL 与参数。
|
||||
守卫用的是"语句形状"正则（如 `update <table> set`）而不是裸关键字，避免把
|
||||
`UpdateNotification` 或日志里的 "update error" 误判为 SQL；小写 SQL 同样能被抓到。
|
||||
- **运行时建表已集中到 `server/db/schema/`**，并在 `DB_READ_ONLY=1` 时整体跳过（由架构测试守护，
|
||||
已实测不触碰数据库）。它仍由业务接口在首次调用时触发，而不是只由 `bootstrap.ts` 调用——
|
||||
要彻底改成显式迁移，需要先建立数据库变更脚本流程，避免"代码里偷偷建表"。
|
||||
- **`src/lib/cn.ts` 刻意不引入 `tailwind-merge`**：全仓只有 2 处调用，为此新增一个
|
||||
传递依赖不划算。若将来条件类覆盖变多，再换 `clsx` + `tailwind-merge`。
|
||||
- **前端 `dist` 体积**：氢能看板单个 chunk 约 200 kB（gzip 50 kB），来自原型渲染方式（大量内联样式）。
|
||||
|
||||
### 已收敛的重复实现（不要退回多份）
|
||||
|
||||
| 能力 | 唯一实现 | 由测试守护 |
|
||||
| --- | --- | --- |
|
||||
| Excel 导出（拼装与写出） | `src/shared/xlsx.ts` | 架构测试：`modules/**` 不得再出现 `book_new` / `book_append_sheet` / `writeFile(` |
|
||||
| 高德 JSAPI 加载与底图 | `src/shared/amap.ts` | 架构测试：只有它可 import `@amap/amap-jsapi-loader` |
|
||||
| 运行时 DDL（建表/改表） | `src/server/db/schema/*` | 架构测试：其他 server 文件不得出现 `CREATE TABLE` / `ALTER TABLE`；每个 schema 模块必须检查 `ddlAllowed()` |
|
||||
| 自然日区间（近 N 天/快捷区间） | `src/shared/date-range.ts`、`modules/energy/daily-range/model.ts` | `date-range` 暂无独立测试；改动请补 |
|
||||
| 氢能数值格式化 | `modules/energy/hydrogen/model/display-format.ts` | `display-format.test.ts` |
|
||||
| 角色常量与模块可见性 | `src/shared/auth/roles.ts` | `app/modules.test.ts` |
|
||||
| 环境变量读取与校验 | `src/server/config.ts` | `auth/password.test.ts` 覆盖密码模式；JWT 缺失拒绝启动已实测 |
|
||||
|
||||
@@ -51,3 +51,8 @@
|
||||
- 未进行生产部署、生产数据库需求表建表验证或长期真实用户效果评估。本轮保留工作区修改，未提交、推送或发布。
|
||||
|
||||
开发复盘：问题根因是封闭词表先行拦截、模型只负责展示、会话没有传递实际问答及结果上下文。改为模型完整规划并用真实中文多轮样本验证。本轮证据属于项目改造，不新增全局开发知识候选。
|
||||
|
||||
|
||||
## 合入 main 的补充验证
|
||||
|
||||
入口移至资产页右下角，移除原顶部入口与资产页反馈悬浮按钮；保留其他模块既有入口。桌面与 390px 手机已验证打开、关闭后焦点恢复和底部导航不遮挡。合并沿用 main 的数据库模块与只读预览设置，补充只读账号导出/会话清理及需求记录只读测试。合并版本共 276 项测试通过，类型检查与生产构建通过。
|
||||
|
||||
@@ -27,7 +27,7 @@
|
||||
|
||||
## 部署与会话生命周期
|
||||
|
||||
环境变量和 Portainer 操作见 [部署说明](portainer-deepseek.md)。需求表复用现有 MySQL 连接，首次访问自动创建；预建 SQL 在 `src/server/routes/asset-assistant/gaps.ts`。表不可用不影响正常统计。
|
||||
环境变量和 Portainer 操作见 [部署说明](portainer-deepseek.md)。需求表复用现有 MySQL 连接，首次访问自动创建；预建 SQL 在 `src/server/db/schema/asset-ai-gaps.ts`。表不可用不影响正常统计。沿用 `main` 既有只读预览配置时不写入或清理需求记录。
|
||||
|
||||
会话仅在应用进程内保存，闲置 1 小时失效；每用户最多 10 个会话，每会话最多 100 步。重启后可用原问题开启新对话，但不能恢复旧的分析范围。多副本需要粘性路由或共享会话存储。取消本轮新增的每日/每分钟问数额度，仅阻止同用户同时重复执行请求。
|
||||
|
||||
|
||||
@@ -0,0 +1,101 @@
|
||||
# 故障管理
|
||||
|
||||
2026-10-13：故障管理为左侧独立业务入口 `/asset#faults`，与资产管理并列。首页展示四项总统计及故障趋势统计，不展示旧版维度排行或常驻故障明细。点击任一卡片进入多维分析，再进入故障明细。
|
||||
|
||||
## 四项指标
|
||||
|
||||
| 指标 | 口径 |
|
||||
| --- | --- |
|
||||
| 今日新增 | `fault_report_time` 在北京时间今日自然日内 |
|
||||
| 本日解决 | 状态已归档且 `archived_at` 在北京时间今日内，与提报日无关 |
|
||||
| 当前在办 | 全部待处理、处理中故障，不限制提报日期；按最新确认，在办 = 待处理 + 处理中 |
|
||||
| 累计台账 | 全部有效故障台账，包括归档、未闭环和其他状态 |
|
||||
|
||||
「当前在办」卡片以“待处理 ＋ 处理中”展示构成，逾期以总量旁的“逾期”独立标记，均使用故障多维分析与故障明细下钻。按最新确认，在办仅为待处理与处理中之和，挂起保留在累计台账；旧兼容接口的全部未闭环口径保持不变。
|
||||
|
||||
- 待处理/处理中：按 OneOS 标准化任务状态分别统计，兼容待处置、未处理、处置中等历史值。
|
||||
- 逾期：待处理或处理中，且保存的 `deadline_at` 严格早于本次数据时间。按北京时间解释截止时间，挂起和已归档不计入；无截止时间不自行以提报时间或固定 30 天推算。与 OneOS `selectSupervisorRows.overdueCount` 汇总口径一致，存储的截止时间包含业务端 SLA 配置及挂起顺延结果。
|
||||
- 逾期是当前在办的重叠子集，不与待处理、处理中相加。下钻明细不展示处置截止时间，也不提供该字段的统计维度；该字段仅保留用于逾期计算。
|
||||
- 四张卡片使用统一紧凑高度：桌面 164px、移动端 132px。
|
||||
|
||||
所有数量以故障主键去重、单位为“单”；同车多故障分别统计。有效范围为 `vehicle_fault_manage.del_flag='0' AND is_submit IN (0,1)`。保留退出运营、缺失车辆关联的历史故障；缺失日期不以创建时间补齐。
|
||||
|
||||
## 下钻
|
||||
|
||||
在资产管理九个维度（车型、型号、区域、城市、部门、业务负责人、客户、资产用途、运营状态）基础上，增加独立的「运维处置人」「车牌」「故障工单状态」，共十二个维度，「运维处置人」固定为第二个维度选项，「车牌」为第三个。车牌取故障台账车牌，同车多故障按故障单计数，缺失车牌归入「未关联车辆」。支持组合分组、多选筛选、合并单元格、组内小计、排序、筛选此组、故障明细搜索和分批加载。运维处置人与业务负责人独立，按人员 ID 分组，同名不同 ID 不合并；多人共同处置分别计入各人，总数、上级小计和明细按故障去重，人员行不可直接相加。
|
||||
|
||||
车辆相关维度使用车辆当前资料，运维处置人取故障或关联工单的当前处置分配。城市使用 OneOS `vehicle_info.operation_city` 对应的城市，不使用车机 GPS；区域采用 Asset BI 的宏观区域映射。客户/部门/业务负责人取每车最新 `vehicle_lease_order_record`，按 `last_delivery_time DESC,id DESC`，型号与车型复用资产管理的别名和分类函数。无匹配资料保留未知组。客户键采用散列，展示名称脱敏，不因相同脱敏名称合并不同客户。
|
||||
|
||||
明细第一列主显示车牌、辅显示故障单号，第二列为运维处置人；其后依次展示故障描述、状态、提报时间、归档时间、运营城市、客户 / 部门。处置人来源优先级：有效来源任务工单多人→任务工单单人→故障多人→故障单人或历史姓名；用户 BIGINT ID 保持字符串精度，停用/删除人员保留历史姓名。
|
||||
|
||||
## 权限与接口
|
||||
|
||||
- `GET /api/asset-faults/overview`：北京时间日期、数据时间、四项总数。
|
||||
- `GET /api/asset-faults/analysis?metric=reported|closed|open|waiting|processing|suspended|overdue|ledger`：所选指标的授权记录及分析单元，供前端在同份数据上分组和下钻。
|
||||
- 旧 `GET /api/asset-faults` 查询接口保留兼容，首页不再使用。
|
||||
|
||||
接口以只读一致性事务读取数据，不修改 OneOS 业务表，不运行定时任务或迁移。汇总及下钻先应用既有全量/部门/本人权限；历史故障不继承公共库存的权限放宽规则；缺车辆资料仅全量权限可见。无共享响应缓存，HTTP `no-store`。401 未认证、400 无效参数、503 查询失败。首页和下钻分别读取最新数据，实时变化可能造成短暂数量差异。
|
||||
|
||||
源码依据（`oneos/ln-asset-management`）：`FaultLedgerStatus`、`FaultLedgerQuerySupport`、`FaultManualCreateSupport`、`FaultHandlerAssignmentService.resolveForSupervisorBatch`、`VehicleFaultDispositionServiceImpl.archiveNow`、`VehicleFaultDispositionMapper.xml`、`VehicleLeaseOrderRecordMapper.xml`。
|
||||
|
||||
## 验证
|
||||
|
||||
故障模型与路由测试覆盖北京时间午夜边界、跨日归档、全部日期在办、累计范围、权限隔离、客户脱敏、同车多故障、资产维度映射及总数与明细一致。同步运行导航、资产分组/筛选/合并单元格回归、TypeScript检查、生产构建及桌面/手机 Playwright 交互验证。仅本地开发，未部署。
|
||||
|
||||
## 故障趋势统计
|
||||
|
||||
复用交还车的日期选择器，默认北京时间近30天，支持自选日期（最多370天）、按日/按月切换。以 `fault_report_time` 划分新增批次，统计同一批故障截至查询时刻的已闭环（已归档）和未闭环（其他状态，含挂起）。不将该日归档的其他批次故障混入，归档时间可在提报区间之后。
|
||||
|
||||
堆叠柱总高度为新增数，新增 = 已闭环 + 未闭环。零新增周期补零；无提报时间不进入趋势；月聚合严格保持起止边界，不扩展整月。每日/每月统计表按新日期在前展示新增、已闭环、未闭环和闭环率（零分母显示横线）。汇总与周期数字均可下钻到故障多维分析及故障明细。点击柱图内已闭环 / 未闭环色块，按对应日或月和状态下钻；趋势下钻默认按「运维处置人 → 故障工单状态」分组，重置也恢复这两个维度，按月仍保留所选日期边界。
|
||||
|
||||
接口 `GET /api/asset-faults/trend?start=YYYY-MM-DD&end=YYYY-MM-DD&granularity=day|month` 返回区间汇总与周期序列。`GET /api/asset-faults/trend-analysis` 使用同样区间及粒度，可附 `period=YYYY-MM-DD|YYYY-MM` 和 `status=all|closed|unclosed`。两个接口均先应用原有数据权限，范围/粒度/周期校验在查询数据库前执行。总览和下钻按请求分别读取最新数据。
|
||||
|
||||
## 故障运维周报
|
||||
|
||||
周报复用故障处理趋势的日期选择器，默认业务周（周六至周五），支持自选最多370天。按最新要求仅展示「新增故障」「解决故障」两项区间合计、日期倒序的每日数量及表尾合计，均可下钻。汇总下方增加每日折线图，蓝色实线表示新增故障，绿色实线表示解决故障，与日期选择器、每日统计表使用同一份数据；补齐零值日期、纵轴从零开始，保留表格提供精确数量与下钻。
|
||||
|
||||
- 新增故障：按 `fault_report_time` 当日计单。
|
||||
- 解决故障：已归档故障按 `archived_at` 当日计单，不受提报日期限制。
|
||||
|
||||
已移除接收处理汇总、每日列、说明及故障明细中的接收时间列。现有接口暂保留接收指标兼容能力，页面不使用；不更改业务数据。
|
||||
|
||||
接口：`GET /api/asset-faults/weekly-report?start=YYYY-MM-DD&end=YYYY-MM-DD`；下钻 `GET /api/asset-faults/weekly-report-analysis` 传 `metric=reported|closed`，可附 `day=YYYY-MM-DD`。所有计数和下钻均先应用既有业务数据权限，沿用只读事务及 HTTP no-store。
|
||||
|
||||
页面时间标签统一为「解决时间」，底层仍取 `archived_at`，统计口径不变。周报折线图仍按时间正序，采用平滑实线、顶部图例、浅网格与统一悬浮提示。
|
||||
|
||||
故障工单状态独立于车辆运营状态：已归档为「已闭环」，其他状态（含待处理、处理中、挂起）均为「未闭环」，与故障处理趋势口径一致。所有故障下钻入口均可按该维度分组、多选筛选、查看明细。
|
||||
|
||||
所有下钻明细按提报时间倒序展示，无提报时间排在末尾；同一提报时间按故障 ID 倒序稳定排序。先筛选、排序，再分页，搜索和加载更多保持该顺序。
|
||||
|
||||
客户展示：已关联车辆且当前运营状态为库存、客户为空时，客户分组、筛选和明细显示「库存车」（独立键 `inventory-unlinked`）；非库存或缺失车辆资料的空客户仍为「未关联客户」。有客户名称时仍按原客户展示和脱敏。此调整不改业务数据及权限。
|
||||
|
||||
下钻维度和筛选按入口保存在当前页面内存中；关闭、误点遮罩或 Esc 后重新打开恢复已应用设置。各入口互不覆盖，桌面与手机共用。点击重置恢复该入口默认维度并清空筛选；刷新整个页面后全部清除，不写入 localStorage 或跨刷新存储。每次重开仍重新请求实时数据。
|
||||
|
||||
## 报表导出
|
||||
|
||||
故障处理趋势和故障运维周报标题右侧均提供「导出 Excel」。导出当前已加载且经过权限过滤的统计快照；日期范围、趋势按日/按月粒度与页面一致，不重新查询或扩大数据范围。加载中及请求失败时禁用导出，生成文件期间显示进度状态并防止重复点击，失败可重试。
|
||||
|
||||
- 趋势：提报日期/月份、新增故障、已闭环、未闭环、闭环率，包含全部统计日期，按日期倒序。
|
||||
- 周报：日期、星期、新增故障、解决故障，按日期倒序；不导出接收处理指标。
|
||||
- XLSX 包含带标题、范围、数据时间、汇总指标的统计表；当前有图表时附加「图表」工作表，以图片保存页面图表快照并保持比例。图表为静态快照，修改统计表不会联动图表。
|
||||
- 统一深色表头、指标配色、交替底色、今日浅色标记；真实 Excel 日期和数字格式、合计及闭环率公式、冻结表头、筛选与打印设置。ExcelJS 按导出操作动态加载。
|
||||
|
||||
## 风险与服务分析总览（2026-10-13）
|
||||
|
||||
故障管理按最新确认保留「管理总览 / 多维分析 / 故障明细」三个页签。管理总览与处理效率合并，恢复原有页面及统计：今日新增、本日解决、当前在办（待处理 + 处理中，逾期为子集）、累计台账，沿用 `/overview` 接口；下方直接展示原有故障处理趋势与故障运维周报。趋势默认近30天，周报默认周六至周五，分别选择日期、导出和下钻。管理总览不受其他页签的业务筛选影响。多维分析、故障明细保留新增分析能力及统一日期、区域、客户、品牌车型查询；更多筛选包含城市、业务部门、运维处置人、故障程度、故障部位、库存状态，点击查询生效。
|
||||
|
||||
- 期间新增故障：所选提报日期内的有效故障。卡片及导出仅展示期间新增总量，不再拆分提报来源。对比上期采用紧邻本期、天数相同的区间；上期为零时显示无可比基数。
|
||||
- 受影响车辆：同批故障按关联车辆 ID 去重，缺 ID 时使用故障车牌；两者都缺失的不计车辆数，单列数据完整性提示。车辆跨组可能重复，不直接累加。
|
||||
- 当前在办：已应用业务筛选下，所有日期的待处理 + 处理中。逾期为其子集；最长逾期按截止时间到数据时间的天数向上取整。
|
||||
- 区域、等级、客户、车型分布和车型×部位矩阵：按本期提报队列统计，闭环状态截至更新时间。一单多部位分别计入单元格，车型合计按单去重。
|
||||
- 客户影响表：本期影响车辆去重；同一客户的当前在办不限提报日期。库存空客户单列库存车。仅展示本期存在故障的客户组。
|
||||
- 重点跟进：只展示 L1-特急且未闭环（状态非已归档，含挂起等）的故障，沿用权限及业务筛选，不限制提报日期。逾期优先，同优先级按提报时间倒序，最多展示5单；统计标签使用同一 L1 未闭环范围，没有符合条件的故障时显示空态。“查看全部”始终可用，进入当前权限内的全部故障台账，清除业务筛选和搜索条件，不限等级、状态及提报日期。完整明细可切换本期、在办、逾期及累计台账，搜索车牌、单号、描述或运维处置人。
|
||||
|
||||
新增只读字段：`fault_level`、`fault_categories`、`solve_process`。等级映射经 OneOS 字典核对：1=L1-特急、2=L2-紧急、3=L3-一般、4=L4-提示；缺失等级/部位独立显示未标注。处置记录使用 `solve_process`，不将 AI 流转字段 `process_status` 当作业务处理进度。没有同期服务车辆规模、实际停运和修复时长依据，发生频率禁用并提示缺少分母，停运和修复时长提示待补数据。
|
||||
|
||||
新增接口：
|
||||
- `GET /api/asset-faults/dashboard?start=YYYY-MM-DD&end=YYYY-MM-DD`：授权范围内汇总、筛选项、分布、交叉矩阵、重点跟进和完整性信息。
|
||||
- `GET /api/asset-faults/dashboard-analysis`：同样日期和业务筛选；`scope=focus|cohort|open|waiting|processing|overdue|ledger|reported|closed`。focus 为全部提报日期的 L1 未闭环故障；cohort 为提报日期队列，reported/closed 为北京时间今日，其他为全部日期当前状态；可附 `id` 查看单条记录。
|
||||
- 趋势、周报及其下钻接口同时支持上述业务筛选。所有接口先执行权限筛选，筛选项也仅来自授权记录，保持 no-store，不写业务数据库。
|
||||
|
||||
总览导出新增 6 张 Excel 工作表：管理总览、区域分布、故障程度、客户影响、车型分布、车型与部位。导出已加载统计快照，包含日期、业务筛选、数据时间、冻结表头、交替底色和数字格式。趋势、周报的既有导出保留，并增加业务筛选说明。
|
||||
@@ -11,7 +11,7 @@
|
||||
- AG Grid Community：排序、列筛选、列宽调整、固定识别列和分页。未使用 Enterprise、授权密钥、企业分组或 Excel 导出接口。
|
||||
- H5：同一数据/列定义驱动 shadcn 卡片与分页；关键数量、异动类型/时间、待交车合同/脱敏客户直接可见，辅助信息按需展开。手机不加载桌面 Grid 模块。
|
||||
- Excel 导出沿用现有 xlsx，按需加载。
|
||||
- 移除旧资产展示组件及 assets.css/apple-tokens.css；没有新增资产自定义选择器。视觉变量直接采用 apple-design 技能提供的 `src/vendor/apple-design/tokens.css`，组件空间、颜色与暗色适配使用 shadcn/ui 属性和 Tailwind 工具类。其他 BI 模块未迁移。
|
||||
- 移除旧资产展示组件及 assets.css/apple-tokens.css；没有新增资产自定义选择器。视觉变量直接采用 apple-design 技能提供的 `src/shared/styles/apple-tokens.css`，组件空间、颜色与暗色适配使用 shadcn/ui 属性和 Tailwind 工具类。其他 BI 模块未迁移。
|
||||
|
||||
资产总览采用靛蓝标题区、浅色分组底、蓝色运营卡与靛蓝库存卡，并缩小卡片高度以提高信息密度。操作控件集中在标题下方，主视图与库存子视图选中态更清晰。资产页提供浅色/深色切换并记住当前浏览器选择；图表坐标、图例及明细表格颜色跟随主题。
|
||||
|
||||
|
||||
@@ -0,0 +1,46 @@
|
||||
# 登录方式与 Portainer 配置
|
||||
|
||||
不设置 `BI_AUTH_MODE` 时默认 `sso`，沿用业务系统 jumpToken 登录。
|
||||
设置 `BI_AUTH_MODE=password` 时只开放固定密码登录，关闭 SSO 换票入口。
|
||||
浏览器从 `/api/auth/config` 获取模式，密码不会打包到前端，不使用 VITE_ 密码变量。
|
||||
|
||||
## Portainer Stack
|
||||
|
||||
在现有 BI 服务的 `environment` 中合并以下配置，保留原镜像、端口、数据库等配置：
|
||||
|
||||
```yaml
|
||||
environment:
|
||||
BI_AUTH_MODE: ${BI_AUTH_MODE:-sso}
|
||||
BI_AUTH_PASSWORD: ${BI_AUTH_PASSWORD:-}
|
||||
JWT_SECRET: ${JWT_SECRET:?必须配置独立的随机签名密钥}
|
||||
DEV_BYPASS_AUTH: "0"
|
||||
NODE_ENV: production
|
||||
```
|
||||
|
||||
在 Stack 的 Environment variables 区域录入以下名称和值：
|
||||
|
||||
| 名称 | 固定密码模式 | SSO 模式 |
|
||||
| --- | --- | --- |
|
||||
| BI_AUTH_MODE | password | sso |
|
||||
| BI_AUTH_PASSWORD | 非空密码，允许短密码，推荐独立随机密码 | 留空 |
|
||||
| JWT_SECRET | 独立随机密钥，至少 32 字符 | 保留部署专用密钥 |
|
||||
|
||||
不要把真实密码提交进 Git。Portainer 中填写的 Stack 变量必须通过上面的 environment 映射才能进入容器。
|
||||
更新 Stack 并重新创建容器；单纯 Restart 不会更新容器环境变量。
|
||||
容器方式部署：Duplicate/Edit → Advanced container settings → Env，填写同样变量，再重新部署。
|
||||
需要先构建包含本功能的新镜像；旧镜像不认识这些变量。
|
||||
|
||||
## 权限、安全和验证
|
||||
|
||||
- 固定密码身份是共享只读身份，具有全量看板数据读取范围及能源访问权限，无调度/反馈管理角色；服务端拒绝写入方法。
|
||||
- 会话有效期 8 小时。更换密码、JWT_SECRET 或切换模式后，原密码会话失效。
|
||||
- 每个服务实例 15 分钟最多 20 次密码验证请求；多副本需在网关配置共享限流。共享限流可能被恶意请求耗尽，建议只在内网或受控网络开放。
|
||||
- 外网必须使用 HTTPS，避免明文传输密码和令牌。密码/环境变量对拥有容器管理权限的人可见。
|
||||
- 密码为空或全为空白，或签名密钥少于 32 字符时拒绝登录；无默认访问密码。不要沿用镜像中的旧默认 JWT_SECRET。
|
||||
- 短密码容易被猜中，仅建议在内网或受限访问环境使用；登录限流保持开启。
|
||||
- DB_READ_ONLY=1 时密码登录仍可用，业务写入仍被禁止。
|
||||
- 测试未登录访问、错误密码、正确密码、刷新恢复会话；切回 sso 后检查跳转登录。
|
||||
- 开发免登录仅 SSO 开发模式生效，生产必须保持 DEV_BYPASS_AUTH=0。
|
||||
|
||||
Portainer 官方说明：https://docs.portainer.io/user/docker/containers/advanced
|
||||
以及 https://docs.portainer.io/sts/user/docker/stacks/add
|
||||
@@ -0,0 +1,671 @@
|
||||
# LN-BI 项目移交交接说明
|
||||
|
||||
> 文档版本：1.0
|
||||
> 更新日期：2026-08-21
|
||||
> 对应代码版本：`1.1.15`
|
||||
> 对应分支 / 提交：`main` / `2518d9ee5440c39138427ce76d1f6e0faf8d9f29`
|
||||
> 项目仓库：`https://gitea.lnh2e.com/shishengliang/ln-bi.git`
|
||||
|
||||
## 1. 文档目的与交接边界
|
||||
|
||||
本文用于帮助新的研发、测试、运维和产品人员快速接管 LN-BI 项目，覆盖：
|
||||
|
||||
- 系统定位、代码结构和运行拓扑；
|
||||
- 登录认证、角色鉴权和数据权限；
|
||||
- 本地开发与免登录调试；
|
||||
- 前后端技术栈；
|
||||
- 数据对接方、数据库、外部服务及对应 BI / 报表；
|
||||
- 当前功能、后台任务、接口边界和部署流程；
|
||||
- 已知技术债、安全风险和交接检查清单。
|
||||
|
||||
本文依据当前仓库代码和配置编写，不记录数据库密码、JWT 密钥、API Key、OSS 密钥或 CI 仓库凭据。此类信息应通过密码管理器、Portainer / Docker 环境变量或 CI Secret 单独移交。
|
||||
|
||||
## 2. 项目概览
|
||||
|
||||
### 2.1 系统定位
|
||||
|
||||
LN-BI 是羚牛业务数据的统一 BI Web 应用。目前包含两组主入口：
|
||||
|
||||
| 主入口 | 主要模块 | 默认路由 |
|
||||
| --- | --- | --- |
|
||||
| 资产 BI | 资产管理、里程管理、车辆 / 加氢热力图、智能调度 | `/asset` |
|
||||
| 能源 BI | 氢能、电能、ETC | `/energy` |
|
||||
|
||||
应用还保留两个不在主导航中展示的后台入口：
|
||||
|
||||
| 隐藏入口 | 用途 | 路由 |
|
||||
| --- | --- | --- |
|
||||
| 充电记录导入 | 上传并管理电费 XLSX 数据 | `/ele/import` |
|
||||
| 用户反馈管理 | 查看、回复和推进用户反馈 | `/admin/feedback` |
|
||||
|
||||
页面内部主要使用 Hash 保存模块和子页面状态，例如 `/energy#hydrogen/overview`。入口兼容逻辑位于 `src/app/routing.ts`。
|
||||
|
||||
### 2.2 总体架构
|
||||
|
||||
```mermaid
|
||||
flowchart LR
|
||||
A[羚牛业务系统] -->|一次性 jumpToken| B[LN-BI React 前端]
|
||||
B -->|/api/auth/exchange| C[Hono API]
|
||||
C -->|校验 jumpToken / 获取用户角色| A
|
||||
C -->|签发 8 小时本地 JWT| B
|
||||
B -->|Bearer JWT| C
|
||||
|
||||
C --> D[(主业务 MySQL / 跨 Schema)]
|
||||
C --> E[(氢能 MySQL 连接\n默认复用主库)]
|
||||
C --> F[(车辆位置 PostgreSQL)]
|
||||
C --> G[OneOS 里程 API]
|
||||
C --> H[阿里云 OSS]
|
||||
B --> I[高德地图 JS API]
|
||||
```
|
||||
|
||||
生产环境由一个 Node.js 进程同时提供 REST API 和 Vite 构建后的静态页面。开发环境中，Vite 前端和 Hono 后端分别运行，由 Vite 将 `/api` 代理到后端。
|
||||
|
||||
### 2.3 关键目录
|
||||
|
||||
| 路径 | 说明 |
|
||||
| --- | --- |
|
||||
| `src/App.tsx` | 应用入口、认证门禁、主路由和隐藏页面装配 |
|
||||
| `src/app/modules.ts` | 资产 / 能源导航模块注册与角色可见性 |
|
||||
| `src/auth/` | 前端认证状态、JWT 注入、未授权页面 |
|
||||
| `src/shared/auth/` | 前后端共用角色常量和模块访问判断 |
|
||||
| `src/server/` | Hono 服务、认证中间件、数据库连接、API 路由和后台任务 |
|
||||
| `src/modules/` | 各 BI 页面和交互实现 |
|
||||
| `src/modules/energy/hydrogen-bi-v2/` | 当前氢能 BI 原型迁入版、真实数据适配器和下钻实现 |
|
||||
| `docs/` | 接口、重构和交接文档 |
|
||||
| `Dockerfile` | 前端构建 + Node 运行时镜像 |
|
||||
| `docker-compose.yml` | 当前容器部署参数样例 |
|
||||
| `woodpecker.yml` | Woodpecker CI 构建、测试、镜像推送流程 |
|
||||
|
||||
### 2.4 当前质量基线
|
||||
|
||||
2026-08-21 在当前提交和本地依赖环境完成以下验证：
|
||||
|
||||
| 检查 | 结果 |
|
||||
| --- | --- |
|
||||
| `npm run lint` | 通过 |
|
||||
| `npm test` | 113 项通过，0 项失败 |
|
||||
| `npm run build` | 通过，Vite 成功生成生产构建 |
|
||||
|
||||
测试和构建会输出 Node.js `DEP0205`（`module.register()` 已弃用）警告，目前不阻断运行；后续升级 `tsx` / Node 工具链时应处理。
|
||||
|
||||
## 3. 登录认证方式
|
||||
|
||||
### 3.1 正常登录链路
|
||||
|
||||
项目自身没有用户名 / 密码登录表单，正常入口依赖羚牛业务系统单点跳转：
|
||||
|
||||
1. 用户先登录羚牛业务系统。
|
||||
2. 业务系统跳转到 LN-BI，并在 URL 中携带一次性 `jumpToken`。
|
||||
3. 前端调用 `GET /api/auth/exchange?jumpToken=...`。
|
||||
4. LN-BI 后端调用业务系统的 `issueTokenByJump` 接口校验一次性令牌并取得用户、部门编码和角色。
|
||||
5. 后端根据角色计算数据权限级别，并通过主业务库 `tab_department` 补全部门名称。
|
||||
6. 后端使用 `JWT_SECRET` 签发有效期 8 小时的 LN-BI JWT。
|
||||
7. 前端将 JWT 和用户信息保存到当前标签页的 `sessionStorage`：
|
||||
- `bi_jwt`
|
||||
- `bi_user`
|
||||
8. 前端从地址栏移除 `jumpToken`，之后所有受保护 API 均发送 `Authorization: Bearer <JWT>`。
|
||||
9. API 返回 `401` 时，前端清空本地会话并显示“会话已过期”。
|
||||
|
||||
关键实现：
|
||||
|
||||
- 前端：`src/auth/AuthProvider.tsx`
|
||||
- Token 注入：`src/auth/api-client.ts`
|
||||
- Token 换取：`src/server/auth/login.ts`
|
||||
- API 认证：`src/server/auth/middleware.ts`
|
||||
|
||||
### 3.2 公开接口与受保护接口
|
||||
|
||||
不要求 JWT 的接口：
|
||||
|
||||
- `/api/health`
|
||||
- `/api/auth/*`
|
||||
|
||||
其余 `/api/*` 默认经过统一认证中间件。能源、智能调度、加氢热力图和反馈管理在统一认证之上还有模块级或接口级角色校验。
|
||||
|
||||
### 3.3 会话特征
|
||||
|
||||
| 项目 | 当前实现 |
|
||||
| --- | --- |
|
||||
| Token 类型 | HS256 JWT（`jsonwebtoken` 默认签名算法） |
|
||||
| 有效期 | 8 小时 |
|
||||
| 浏览器存储 | `sessionStorage`，关闭标签页后失效 |
|
||||
| 用户来源 | 羚牛业务系统 jumpToken 换取 |
|
||||
| 部门名称来源 | 主业务库 `tab_department` |
|
||||
| 退出方式 | 当前无独立退出接口；清除标签页会话或收到 401 后清理 |
|
||||
|
||||
## 4. 角色鉴权与数据权限
|
||||
|
||||
权限分为两层，接手时必须分别理解：
|
||||
|
||||
1. **模块访问权限**：决定能否进入能源、智能调度或反馈后台。
|
||||
2. **数据范围权限**：决定用户可查看全量、部门或个人负责的数据。
|
||||
|
||||
### 4.1 数据范围角色
|
||||
|
||||
| 业务系统角色 | JWT `permissionLevel` | 数据范围 |
|
||||
| --- | --- | --- |
|
||||
| `所有权限`、`数智中心`、`BI-Leader` | `full` | 全量数据 |
|
||||
| `BI-Leader-Dep` | `department` | `departmentName / department = user.depName` |
|
||||
| 其他角色或无上述角色 | `personal` | `managerId = user.userId` |
|
||||
|
||||
数据过滤和客户名称脱敏由 `src/server/auth/permissions.ts` 提供。目前明确接入该过滤的主要范围包括：
|
||||
|
||||
- 资产车辆统计与列表；
|
||||
- 里程实时监控；
|
||||
- 里程考核车辆明细；
|
||||
- 智能调度建议。
|
||||
|
||||
注意：数据权限不是数据库行级安全，而是路由读取数据后在服务端过滤。新增 API 时必须主动调用统一过滤逻辑或实现等价的 SQL 过滤，不能只依赖前端隐藏。
|
||||
|
||||
### 4.2 模块访问角色
|
||||
|
||||
| 模块 / 能力 | 允许角色 | 前端控制 | 后端控制 |
|
||||
| --- | --- | --- | --- |
|
||||
| 资产管理、里程管理、车辆热力图 | 已认证用户 | 导航默认展示 | 统一 JWT 中间件 |
|
||||
| 能源 BI（氢能 / 电能 / ETC） | `BI-LEADER-ENERGY` 或 `所有权限` | `/energy` 门禁 | `/api/energy/*` 守卫 |
|
||||
| 加氢热力图 | `BI-LEADER-ENERGY` 或 `所有权限` | 无权限时不出现在热力图子导航 | `/api/hydrogen-heatmap/*` 守卫 |
|
||||
| 智能调度 | `BI-SCHEDULE-OPT` | 无角色时不显示模块 | `/api/scheduling/*` 守卫 |
|
||||
| 反馈管理 | `BI-ADMIN-FEEDBACK` 或任一全量数据角色 | 隐藏页面，需直接访问 | 管理列表与更新接口校验 |
|
||||
| 用户反馈提交 / 我的反馈 | 已认证用户 | 页面反馈入口 | 统一 JWT 中间件 |
|
||||
|
||||
角色常量和判断位于 `src/shared/auth/roles.ts`。
|
||||
|
||||
### 4.3 容易误解的权限边界
|
||||
|
||||
- `full` 只表示数据范围，不代表自动拥有所有模块权限。
|
||||
- `数智中心`、`BI-Leader` 虽会获得全量数据，但当前不会自动进入能源模块；能源仅额外接受 `所有权限`。
|
||||
- 智能调度当前仅接受 `BI-SCHEDULE-OPT`，不会因为拥有 `full` 数据权限自动放行。
|
||||
- 前端隐藏不是安全措施；任何新增受限能力都必须增加后端守卫。
|
||||
|
||||
## 5. 本地免登录调试环境
|
||||
|
||||
### 5.1 环境要求
|
||||
|
||||
- Node.js 22（Docker 和 CI 均使用 Node 22）；
|
||||
- npm，依赖版本以 `package-lock.json` 为准；
|
||||
- 能访问所需数据库和外部 API 的网络环境；
|
||||
- 本地配置文件 `.env`。该文件已被 `.gitignore` 忽略，禁止提交。
|
||||
|
||||
### 5.2 最小启动步骤
|
||||
|
||||
```bash
|
||||
npm ci
|
||||
npm run dev
|
||||
```
|
||||
|
||||
启动后：
|
||||
|
||||
| 服务 | 地址 | 说明 |
|
||||
| --- | --- | --- |
|
||||
| Vite 前端 | `http://localhost:3000` | 对局域网开放，`/api` 代理到 3001 |
|
||||
| Hono 后端 | `http://localhost:3001` | `SERVER_PORT` 未设置时的默认端口 |
|
||||
| 健康检查 | `http://localhost:3001/api/health` | 只验证进程可访问，不验证数据库 |
|
||||
|
||||
### 5.3 免登录开关
|
||||
|
||||
本地前后端需要同时开启免登录：
|
||||
|
||||
```dotenv
|
||||
# 仅用于本地开发，生产环境严禁设置为 1
|
||||
VITE_DEV_BYPASS_AUTH=1
|
||||
DEV_BYPASS_AUTH=1
|
||||
```
|
||||
|
||||
- `VITE_DEV_BYPASS_AUTH=1`：前端直接构造“本地开发”全权限用户，仅在 Vite dev 模式生效。
|
||||
- `DEV_BYPASS_AUTH=1`：后端认证中间件注入本地开发用户，否则前端虽然进入页面，API 仍会返回 401。
|
||||
- 本地用户包含 `所有权限`、`BI-SCHEDULE-OPT`、`BI-ADMIN-FEEDBACK`、`BI-LEADER-ENERGY`。
|
||||
- 免登录只绕过认证，不会替代数据库、OneOS API、高德地图或 OSS 配置。
|
||||
|
||||
### 5.4 `.env` 配置模板
|
||||
|
||||
以下仅列变量名和占位符，不得把真实值写入本文或提交到 Git：
|
||||
|
||||
```dotenv
|
||||
# 认证
|
||||
EXTERNAL_API_BASE=https://<业务系统域名>
|
||||
JWT_SECRET=<高强度随机密钥>
|
||||
DEV_BYPASS_AUTH=1
|
||||
VITE_DEV_BYPASS_AUTH=1
|
||||
|
||||
# 主业务 MySQL
|
||||
DB_HOST=<host>
|
||||
DB_PORT=3306
|
||||
DB_USER=<user>
|
||||
DB_PASSWORD=<password>
|
||||
DB_NAME=<database>
|
||||
|
||||
# 氢能 MySQL；不填时复用 DB_*
|
||||
HYDROGEN_DB_HOST=<host>
|
||||
HYDROGEN_DB_PORT=3306
|
||||
HYDROGEN_DB_USER=<user>
|
||||
HYDROGEN_DB_PASSWORD=<password>
|
||||
HYDROGEN_DB_NAME=<database>
|
||||
|
||||
# 历史里程 MySQL 连接配置
|
||||
# 当前 src/server/mileage-db.ts 未被运行时代码引用；不要误认为修改后会影响里程页面
|
||||
MILEAGE_DB_HOST=<host>
|
||||
MILEAGE_DB_PORT=3306
|
||||
MILEAGE_DB_USER=<user>
|
||||
MILEAGE_DB_PASSWORD=<password>
|
||||
MILEAGE_DB_NAME=<database>
|
||||
|
||||
# 车辆位置 PostgreSQL
|
||||
HEATMAP_DB_HOST=<host>
|
||||
HEATMAP_DB_PORT=5432
|
||||
HEATMAP_DB_USER=<read-only-user>
|
||||
HEATMAP_DB_PASSWORD=<password>
|
||||
HEATMAP_DB_NAME=<database>
|
||||
HEATMAP_DB_SSL=false
|
||||
|
||||
# OneOS 里程 API
|
||||
ONEOS_MILEAGE_API_BASE_URL=https://<api-host>
|
||||
ONEOS_MILEAGE_API_KEY=<api-key>
|
||||
ONEOS_MILEAGE_API_TIMEOUT_MS=20000
|
||||
|
||||
# 高德地图
|
||||
AMAP_WEB_KEY=<web-key>
|
||||
AMAP_SECURITY_JS_CODE=<security-code>
|
||||
|
||||
# 用户反馈截图 OSS
|
||||
OSS_REGION=<region>
|
||||
OSS_ENDPOINT=<endpoint>
|
||||
OSS_BUCKET=<bucket>
|
||||
OSS_ACCESS_KEY_ID=<access-key-id>
|
||||
OSS_ACCESS_KEY_SECRET=<access-key-secret>
|
||||
OSS_BASE_DIR=<directory>
|
||||
|
||||
# 运行参数
|
||||
SERVER_PORT=3001
|
||||
MILEAGE_REPORT_AUTO_ARCHIVE=0
|
||||
```
|
||||
|
||||
本地调试建议将 `MILEAGE_REPORT_AUTO_ARCHIVE=0`，避免开发进程在 06:30 自动生成正式日报快照。
|
||||
|
||||
## 6. 技术栈
|
||||
|
||||
### 6.1 前端
|
||||
|
||||
| 分类 | 技术 |
|
||||
| --- | --- |
|
||||
| 语言 | TypeScript、TSX、CSS |
|
||||
| 框架 | React 19 |
|
||||
| 构建工具 | Vite 6 |
|
||||
| 样式 | Tailwind CSS 4 + 模块专用 CSS |
|
||||
| 图表 | Recharts 3；氢能原型包含自定义 DOM / CSS 图表 |
|
||||
| 动效 | Motion for React |
|
||||
| 图标 | Lucide React |
|
||||
| Excel | SheetJS `xlsx` |
|
||||
| 地图 | 高德地图 JS API |
|
||||
| 路由 | 浏览器 Path + Hash 自研轻量路由，无 React Router |
|
||||
|
||||
### 6.2 后端
|
||||
|
||||
| 分类 | 技术 |
|
||||
| --- | --- |
|
||||
| 语言 / 运行时 | TypeScript、Node.js 22、ES Module |
|
||||
| Web 框架 | Hono 4 + `@hono/node-server` |
|
||||
| TypeScript 运行 | `tsx` |
|
||||
| 认证 | `jsonwebtoken` |
|
||||
| MySQL | `mysql2/promise` |
|
||||
| PostgreSQL | `pg` |
|
||||
| 对象存储 | `ali-oss` |
|
||||
| 配置 | `dotenv` / 容器环境变量 |
|
||||
| 测试 | Node.js 内置 Test Runner |
|
||||
|
||||
### 6.3 构建与部署
|
||||
|
||||
- `npm run lint`：TypeScript 静态检查；
|
||||
- `npm test`：运行 `src/**/*.test.ts`；
|
||||
- `npm run build`：生成 Vite `dist`；
|
||||
- `npm run start`：Node 直接通过 `tsx` loader 启动服务；
|
||||
- Docker：Node 22 Alpine 多阶段构建；
|
||||
- CI：Woodpecker 执行安装、静态检查、测试、构建、Docker 镜像构建和 Harbor 推送；
|
||||
- 镜像标签：`<分支名>-<package.json version>`；
|
||||
- 当前 Compose 使用 host 网络，容器服务端口由 `SERVER_PORT` 注入，现有部署样例为 `8111`。
|
||||
|
||||
## 7. 数据对接与数据源映射
|
||||
|
||||
### 7.1 运行时数据源总表
|
||||
|
||||
| 数据源 / 对接方 | 连接方式 | 配置入口 | 主要数据 | 消费模块 |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| 羚牛业务系统认证服务 | HTTPS API | `EXTERNAL_API_BASE` | jumpToken、用户、部门编码、角色 | 登录认证 |
|
||||
| 主业务 MySQL | MySQL | `DB_*` | 车辆、合同、客户、部门、资产流转、电费、ETC、反馈、调度记录等 | 资产、里程关联信息、调度、电能、ETC、反馈 |
|
||||
| 氢能业务库 | MySQL | `HYDROGEN_DB_*`；未配置则复用 `DB_*` | 加氢流水、加氢站、付款 / 结算、站点余额等 | 氢能 BI、单站、按日、下钻 |
|
||||
| 里程考核数据 | 主业务 MySQL / 跨 Schema 查询 | 当前实际使用 `DB_*` | 考核目标、考核车辆、日报快照 | 里程统计、日报、智能调度 |
|
||||
| OneOS 里程服务 | HTTPS API | `ONEOS_MILEAGE_API_*` | 按日 / 区间车辆里程、来源协议 | 里程监控、日报、调度 |
|
||||
| 车辆位置分析库 | PostgreSQL 只读 | `HEATMAP_DB_*` | 每车每日首个有效定位点 | 车辆热力图 |
|
||||
| 高德地图 | 浏览器 JS API | `AMAP_WEB_KEY`、`AMAP_SECURITY_JS_CODE` | 地图底图、空间展示 | 车辆 / 加氢热力图 |
|
||||
| 阿里云 OSS | OSS SDK | `OSS_*` | 用户反馈截图 | 反馈提交、反馈管理 |
|
||||
| 本地地区映射 | JSON | `src/server/routes/mileage/region-map.json` | 城市到运营区域映射 | 里程筛选和区域聚合 |
|
||||
|
||||
`src/server/mileage-db.ts` 仍定义了一组 `MILEAGE_DB_*` MySQL 连接，但当前没有任何运行时代码导入该连接池。因此它属于历史遗留配置，不计入当前有效运行时数据源；接手人不应通过修改 `MILEAGE_DB_*` 来排查现有里程页面。
|
||||
|
||||
### 7.2 主业务 MySQL 的主要表 / Schema
|
||||
|
||||
当前部署样例中 `DB_NAME` 指向业务库，同时代码存在 `lingniu_prod.*` 跨 Schema 查询。数据库账号必须具备实际所需 Schema 的最小权限。
|
||||
|
||||
| 数据域 | 代表表 | 用途 |
|
||||
| --- | --- | --- |
|
||||
| 车辆主数据 | `vehicle_info`、`vehicle_status`、`vehicle_model` | 资产、车辆归属、车型、运营状态 |
|
||||
| 租赁 / 客户 | `vehicle_lease_order_record`、`vehicle_lease_contract_info`、`customer_info` | 客户、部门、经理、项目 |
|
||||
| 资产流转 | `delivery_vehicle`、`return_vehicle_task`、`vehicle_replacement` | 交车、退车、换车周统计及明细 |
|
||||
| 实时车辆 | `tab_truck_remote_sync_realtime_info` | 当日里程、车辆省份 |
|
||||
| 里程考核 | `lingniu_prod.tab_mileage_assessment_target`、`lingniu_prod.tab_mileage_assessment_vehicle` | 目标、车辆、完成率 |
|
||||
| 里程日报 | `lingniu_prod.tab_mileage_daily_report` | 每日归档快照 |
|
||||
| 电费 | `bi_ele_charge_record` | XLSX 导入后的充电记录 |
|
||||
| ETC | `etc_toll_record`、`energy_etc_bill` | 通行明细、应收和已收 |
|
||||
| 调度 | `tab_scheduling_notifications` | 调度干预、执行状态和历史 |
|
||||
| 用户反馈 | `bi_user_feedback` | 反馈、截图地址、回复和状态 |
|
||||
|
||||
### 7.3 氢能 BI 主要数据表
|
||||
|
||||
| 表 | 用途 |
|
||||
| --- | --- |
|
||||
| `hydrogen_fuel_ledger` | 加氢主流水，统计加氢量、成本、对客金额、车辆、客户、核对状态和数据来源 |
|
||||
| `hydrogen_station` | 历史加氢站主数据 |
|
||||
| `new_hydrogen_site` | 当前业务站点主数据及省市区等属性 |
|
||||
| `hydrogen_station_payment` | 加氢站付款 / 结算记录 |
|
||||
| `new_hydrogen_site_balance_record` | 站点预充值余额记录 |
|
||||
| `tab_outside_hydrogen_site` | 外部站点与内部站点、坐标的映射，用于热力图 |
|
||||
| `common_district` | 行政区划名称映射 |
|
||||
|
||||
氢能 V2 API 统一提供总览、按日树、下钻等视图。旧 `/hydrogen/*` 接口仍保留用于兼容和回滚，但当前氢能页面入口只装配 `hydrogen-bi-v2/PrototypeBoard.tsx`。
|
||||
|
||||
### 7.4 数据口径注意事项
|
||||
|
||||
- 氢能“车辆归属”和“成本承担方”是两个独立维度，不得互相替代。
|
||||
- 氢能成本承担方按业务字段归纳为“我司承担、客户承担、其他”；利润口径是客户承担订单的“对客总价 - 等量订单成本总价”。
|
||||
- 电能导入按 `order_no` 去重，并根据车辆信息匹配内部 / 外部 / 未知车辆。
|
||||
- ETC 金额、应收和已收直接读取台账，不做推算；没有数据时前端展示空状态。
|
||||
- 里程按自然日和上海时区处理；OneOS API 支持单日和区间查询，并按协议优先级归一化来源。
|
||||
- 客户名称会根据数据权限在服务端进行脱敏。
|
||||
|
||||
## 8. 当前功能清单
|
||||
|
||||
### 8.1 资产管理 BI
|
||||
|
||||
| 功能域 | 当前能力 |
|
||||
| --- | --- |
|
||||
| 资产总览 | 总资产、运营、库存、待交付、周交车 / 退车 / 换车 |
|
||||
| 车型分析 | 按车辆类型、车型、批次逐级统计和展开 |
|
||||
| 部门分析 | 按部门 / 经理统计、展开车辆明细 |
|
||||
| 区域分析 | 按大区、省市、客户筛选与统计 |
|
||||
| 客户分析 | 客户多选、品牌、部门、经理、区域筛选 |
|
||||
| 库存分析 | 按区域 / 车型切换，支持多级展开和筛选 |
|
||||
| 资产流转 | 自定义日期范围，交车 / 退车 / 换车趋势与明细下钻 |
|
||||
| 车辆明细 | 车牌、车型、批次、客户、状态、位置等筛选和弹窗 |
|
||||
| 导出 | 资产相关列表和明细 Excel 导出 |
|
||||
| 自动刷新 | 主页面数据每 60 秒刷新 |
|
||||
|
||||
### 8.2 里程管理 BI
|
||||
|
||||
| 子页面 | 当前能力 |
|
||||
| --- | --- |
|
||||
| 实时监控 | 当日 / 指定日 / 区间里程，来源协议优先级、部门、客户、项目、主体、状态、区域、品牌、里程区间等筛选 |
|
||||
| 实时监控 | 当日 / 累计 / 统计时间排序，异常和在线状态识别，车辆详情 |
|
||||
| 统计报表 | 考核目标、目标车辆、累计完成率、当年完成率、日均要求、趋势下钻 |
|
||||
| 每日汇报 | 运营 / 库存车辆、当日里程、环比、车型与地区分组、近 7 日趋势、历史快照 |
|
||||
| 导出 | 监控区间和车辆汇总 Excel 导出 |
|
||||
| 缓存 | 服务启动立即刷新，之后每分钟刷新实时监控缓存 |
|
||||
| 自动归档 | 上海时间每天 06:30 归档上一自然日日报，可通过环境变量关闭 |
|
||||
|
||||
### 8.3 智能调度
|
||||
|
||||
| 功能 | 当前能力 |
|
||||
| --- | --- |
|
||||
| 建议生成 | 根据考核里程、剩余天数、车辆状态和车型生成高低里程调度建议 |
|
||||
| 筛选 | 按建议类型、部门、车型等条件筛选和搜索 |
|
||||
| 详情 | 查看当前车辆、候选车辆及差距 |
|
||||
| 操作 | 单条 / 批量登记调度干预 |
|
||||
| 历史 | 通知 / 干预记录查询、状态更新、取消或完成 |
|
||||
| 导出 | 建议列表 CSV 导出 |
|
||||
|
||||
### 8.4 车辆热力图
|
||||
|
||||
- 按日期范围、车牌 / VIN、考核批次筛选；
|
||||
- 定位活跃度 / 车辆覆盖度切换；
|
||||
- 网格聚合、全国概览、区域下钻和附近车辆；
|
||||
- 地图和详情面板可独立展开，支持全屏；
|
||||
- PostgreSQL 连接配置为只读事务默认值。
|
||||
|
||||
### 8.5 加氢热力图
|
||||
|
||||
- 按日期、站点搜索、承担维度筛选；
|
||||
- 加氢量、加氢频次、车辆覆盖三种热力指标；
|
||||
- 加氢站排名、区域下钻、附近站点和 GPS 覆盖提示；
|
||||
- 仅对有有效坐标的数据进行地图聚合；
|
||||
- 受能源角色控制。
|
||||
|
||||
### 8.6 氢能经营 BI（当前 V2 页面）
|
||||
|
||||
| 页面 / 维度 | 当前能力 |
|
||||
| --- | --- |
|
||||
| 全局总览 | 年份、核对状态、车辆归属筛选；累计加氢量、累计成本、利润、本月、本日 KPI |
|
||||
| 趋势 | 月度加氢量、月度收支、站点 Top5、区域省 / 市占比 |
|
||||
| 汇总 | 加氢站汇总、客户账单汇总、列表折叠、排序和筛选 |
|
||||
| KPI 下钻 | 支持先站点后客户或先客户后站点，再到车辆 / 流水 |
|
||||
| 图表下钻 | 月份、站点、区域、客户等上下文穿透 |
|
||||
| 账单下钻 | 客户 → 日期 → 车辆流水；站点 → 日期 → 客户 / 流水 |
|
||||
| 按日页面 | 日期范围、车辆归属、核对状态；日期 → 站点 → 客户 → 车辆 / 数据源多层展开 |
|
||||
| 单站页面 | 站点日期筛选、日汇总、趋势、流水和导出 |
|
||||
| 导出 | KPI 穿透、客户账单、站点账单、每日明细 Excel |
|
||||
| 接口 | `/api/energy/h2/v2/meta`、`overview`、`daily`、`daily-tree`、`drill` |
|
||||
|
||||
说明：原型源码中仍有演示常量和兼容组件；真实运行数据应以 `prototype-adapter.ts`、`prototype-real-daily.tsx`、`prototype-real-drills.tsx` 和 V2 API 返回为准。修改页面时必须同时检查 Web 与移动端，不能只以测试通过代替原型截图验收。
|
||||
|
||||
### 8.7 电能经营 BI
|
||||
|
||||
| 页面 / 能力 | 当前实现 |
|
||||
| --- | --- |
|
||||
| 按日 | 日充电量、费用、订单、内部 / 外部车辆和趋势 |
|
||||
| 总览 | 汇总 KPI、月份趋势、车辆归属统计 |
|
||||
| 数据导入 | 隐藏入口上传 `.xlsx`，按订单号去重、批次管理、记录搜索和归属汇总 |
|
||||
| 数据表 | `bi_ele_charge_record`，接口首次调用时自动确保建表 |
|
||||
|
||||
### 8.8 ETC 看板
|
||||
|
||||
- 通行明细笔数；
|
||||
- 涉及车辆去重数；
|
||||
- 通行费金额；
|
||||
- ETC 账单数、应收和已收；
|
||||
- 最新通行时间；
|
||||
- 无台账时展示“暂无数据”，不生成模拟数据。
|
||||
|
||||
### 8.9 用户反馈闭环
|
||||
|
||||
- 普通用户提交新维度、Bug、体验或其他反馈；
|
||||
- 支持最多 6 张截图，单张最大 5 MB，上传至 OSS；
|
||||
- 用户查看自己的反馈历史；
|
||||
- 管理员按状态查看、回复和更新为待处理 / 处理中 / 已完成 / 已忽略；
|
||||
- 反馈表由接口首次调用时自动创建并兼容补列。
|
||||
|
||||
## 9. API 路由概览
|
||||
|
||||
| 路由前缀 | 用途 |
|
||||
| --- | --- |
|
||||
| `/api/auth` | jumpToken 换 JWT、查看当前 JWT 用户 |
|
||||
| `/api/vehicles` | 资产总览、车型 / 部门 / 区域 / 客户 / 库存、流转、车辆明细 |
|
||||
| `/api/mileage` | 实时监控、目标、趋势、车辆近期里程、日报及历史 |
|
||||
| `/api/scheduling` | 调度建议、通知和执行记录 |
|
||||
| `/api/energy` | 氢能 V2 / 兼容接口、电能经营、ETC |
|
||||
| `/api/ele` | 电费 XLSX 导入、列表、批次、聚合 |
|
||||
| `/api/vehicle-heatmap` | 车辆位置热力图配置、元数据、点位和附近车辆 |
|
||||
| `/api/hydrogen-heatmap` | 加氢热力图配置、元数据、点位和附近站点 |
|
||||
| `/api/feedback` | 反馈提交、截图上传、我的反馈、管理列表和更新 |
|
||||
|
||||
## 10. 后台任务与自动建表
|
||||
|
||||
### 10.1 服务启动动作
|
||||
|
||||
`src/server/bootstrap.ts` 在正式服务进程启动时执行：
|
||||
|
||||
1. 确保 `tab_scheduling_notifications` 存在；
|
||||
2. 立即刷新里程监控缓存；
|
||||
3. 每 60 秒刷新里程监控缓存；
|
||||
4. 启动里程日报 06:30 自动归档调度器。
|
||||
|
||||
### 10.2 按需自动建表
|
||||
|
||||
以下接口会在首次使用时执行 `CREATE TABLE IF NOT EXISTS`：
|
||||
|
||||
- 电费：`bi_ele_charge_record`；
|
||||
- 用户反馈：`bi_user_feedback`；
|
||||
- 里程日报：`lingniu_prod.tab_mileage_daily_report`；
|
||||
- 智能调度：`tab_scheduling_notifications`（服务启动时）。
|
||||
|
||||
生产数据库账号若严格只读，这些功能会启动或调用失败。交接时应明确“读数据账号”和“应用写表账号”的权限边界。
|
||||
|
||||
## 11. 开发、测试和发布流程
|
||||
|
||||
### 11.1 常用命令
|
||||
|
||||
```bash
|
||||
# 安装锁定依赖
|
||||
npm ci
|
||||
|
||||
# 前后端开发模式
|
||||
npm run dev
|
||||
|
||||
# 仅后端 / 仅前端
|
||||
npm run dev:server
|
||||
npm run dev:client
|
||||
|
||||
# 质量检查
|
||||
npm run lint
|
||||
npm test
|
||||
npm run build
|
||||
|
||||
# 生产式本地启动（需先 build）
|
||||
npm run start
|
||||
```
|
||||
|
||||
### 11.2 发版步骤
|
||||
|
||||
1. 确认工作区只包含本次变更，排除 `.DS_Store`、临时脚本和本地数据文件。
|
||||
2. 执行 `npm run lint && npm test && npm run build`。
|
||||
3. 按语义版本更新 `package.json` 和 `package-lock.json`。
|
||||
4. 提交并推送到目标分支。
|
||||
5. Woodpecker 根据分支和版本生成镜像标签并推送 Harbor。
|
||||
6. 在 Portainer / Compose 中更新镜像版本，保留原镜像标签用于回滚。
|
||||
7. 验证健康检查、登录跳转、关键 API、Web 页面和移动端页面。
|
||||
|
||||
版本只在 Git 中更新不代表已部署；必须分别确认：
|
||||
|
||||
- 代码已推送；
|
||||
- CI 已通过；
|
||||
- 镜像已推送；
|
||||
- 部署已更新；
|
||||
- 页面和数据已验收。
|
||||
|
||||
## 12. 日志与排障入口
|
||||
|
||||
| 现象 | 优先检查 |
|
||||
| --- | --- |
|
||||
| 无法从业务系统登录 | 浏览器 URL 是否有 `jumpToken`；`/api/auth/exchange` 响应；`EXTERNAL_API_BASE`；后端认证日志 |
|
||||
| 页面能进但 API 401 | 前后端免登录是否同时开启；`bi_jwt` 是否存在；JWT_SECRET 是否一致 |
|
||||
| 页面 403 | 业务系统角色、JWT 中 `roles`、模块白名单，不要只看 `permissionLevel` |
|
||||
| 健康检查正常但页面无数据 | `/api/health` 不检查数据库；继续检查具体 API、数据库连接和 SQL 权限 |
|
||||
| 里程无数据 | OneOS API 地址 / Key、网络、traceId、协议兼容降级日志、主库车辆关联信息 |
|
||||
| 热力图无底图 | 高德 Key 和安全码、域名白名单、浏览器控制台 |
|
||||
| 车辆热力图无点位 | PostgreSQL 连接、只读权限、日期范围、`is_heatmap_eligible` |
|
||||
| 氢能数据慢 | V2 API 查询耗时、筛选范围、数据库索引、是否误走兼容接口 |
|
||||
| 反馈图片失败 | OSS 配置、Bucket 权限、文件类型和 5 MB 限制 |
|
||||
| 日报未归档 | `MILEAGE_REPORT_AUTO_ARCHIVE`、容器时区、06:30 日志、日报表写权限 |
|
||||
|
||||
## 13. 已知风险与优先整改项
|
||||
|
||||
### P0：凭据管理
|
||||
|
||||
1. 当前仓库的部署配置和部分数据库连接代码存在硬编码凭据或默认口令。交接后应立即：
|
||||
- 将数据库、JWT、Harbor、OSS、API Key 全部迁移到 CI Secret / Portainer Secret / 环境变量；
|
||||
- 删除代码和配置中的真实 fallback；
|
||||
- 对已经进入 Git 历史的凭据执行轮换；
|
||||
- 不要只删除当前文件内容而忽略历史提交。
|
||||
2. `Dockerfile` 和认证代码存在可预测的 JWT 默认密钥。生产必须显式注入随机 `JWT_SECRET`，并在缺失时让应用拒绝启动。
|
||||
|
||||
### P1：认证与权限
|
||||
|
||||
1. 前端当前用公开的 `/api/health` 判断缓存 JWT 是否有效，因此该请求并未真正校验 Token；过期 Token 会在第一次访问受保护 API 时才被清理。应改为调用 `/api/auth/me`。
|
||||
2. `jumpToken` 通过查询参数传递，可能进入代理访问日志；业务条件允许时应改为 POST body，并限制日志记录。
|
||||
3. `cors()` 当前未限制来源；生产应配置允许域名白名单。
|
||||
4. `full` 数据角色与模块角色不是同一套白名单，容易产生“能看全量数据但进不了模块”的误解。变更角色策略前应由产品 / 管理员确认。
|
||||
5. 隐藏页面不是授权控制。充电导入接口目前仅依赖“已登录”，若属于管理能力，应补独立角色和后端守卫。
|
||||
|
||||
### P1：数据与运行稳定性
|
||||
|
||||
1. 主库、跨 Schema 查询和专用数据库连接并存，部署账号权限和 Schema 默认值需形成正式清单。
|
||||
2. `src/server/mileage-db.ts` 是当前未被引用的历史连接文件，`docker-compose.yml` 仍保留相应变量，容易误导排障；确认无外部依赖后应删除或重新接入。
|
||||
3. 应用启动和部分接口会自动建表；数据库权限收紧前需先迁移为正式数据库变更脚本。
|
||||
4. 氢能兼容接口和 V2 接口同时存在，新增功能应明确修改当前 V2 路径，避免只修旧接口。
|
||||
5. 氢能原型目录仍包含演示常量；新增展示必须确认数据来自真实 API，禁止把演示数据带入经营口径。
|
||||
6. 车辆和加氢热力图的默认日期目前为代码常量，长期运行应改为根据数据水位或当前日期计算。
|
||||
|
||||
### P2：工程治理
|
||||
|
||||
1. 仓库缺少统一根 README，本交接文档可作为后续 README 的基础。
|
||||
2. 本地 `.DS_Store` 容易进入工作区，建议补充全局 / 项目忽略规则。
|
||||
3. 目前使用 Path + Hash 自研路由；新增页面时必须同时验证直达、刷新、前进后退和移动端底栏状态。
|
||||
4. 氢能页面属于严格原型复刻范围，CSS / DOM 调整必须做桌面与移动端截图对比验收。
|
||||
|
||||
## 14. 交接资料与权限清单
|
||||
|
||||
以下内容不应写入 Git，需要由原负责人通过安全渠道单独移交：
|
||||
|
||||
- Gitea 项目成员权限及分支保护规则；
|
||||
- Woodpecker 项目、流水线和 Secret 管理权限；
|
||||
- Harbor 项目及镜像拉取 / 推送账号；
|
||||
- Portainer / ECS / Docker 服务管理权限；
|
||||
- 主业务、氢能、里程和位置数据库的只读 / 读写账号；
|
||||
- OneOS 里程 API 地址、API Key、调用方白名单和联系人；
|
||||
- 羚牛业务系统认证接口联系人和 jumpToken 协议；
|
||||
- 高德地图 Key、安全码及域名白名单；
|
||||
- OSS Bucket、RAM 用户和目录权限；
|
||||
- 生产域名、反向代理、证书和 DNS 管理权限；
|
||||
- 数据口径负责人：资产、里程、调度、氢能、电能、ETC 各一名。
|
||||
|
||||
## 15. 接手验收清单
|
||||
|
||||
### 15.1 代码与环境
|
||||
|
||||
- [ ] 能拉取 `main` 并确认目标版本；
|
||||
- [ ] Node.js 22、`npm ci`、lint、test、build 均通过；
|
||||
- [ ] 已获得不含明文传播的本地 / 测试环境变量；
|
||||
- [ ] 本地前后端和免登录调试正常；
|
||||
- [ ] `.env`、数据库导出、截图和临时文件不会进入 Git。
|
||||
|
||||
### 15.2 认证与权限
|
||||
|
||||
- [ ] 从业务系统 jumpToken 跳转登录成功；
|
||||
- [ ] 普通、部门、全量三类数据权限分别验收；
|
||||
- [ ] 能源、智能调度、反馈管理员角色分别验收；
|
||||
- [ ] 无权限用户前端不可见且后端返回 403；
|
||||
- [ ] Token 过期后能正确退出并重新登录。
|
||||
|
||||
### 15.3 数据与功能
|
||||
|
||||
- [ ] 资产、里程、调度、氢能、电能、ETC 的主要 API 都能访问真实数据；
|
||||
- [ ] BI 汇总值与最小粒度明细守恒；
|
||||
- [ ] 氢能成本承担方、对客金额、成本金额和利润口径已由业务负责人确认；
|
||||
- [ ] 里程 OneOS API 的单日、区间和来源协议正常；
|
||||
- [ ] 车辆 / 加氢热力图可加载地图、点位和详情；
|
||||
- [ ] Excel / CSV 导入导出可用；
|
||||
- [ ] 用户反馈和截图上传可用；
|
||||
- [ ] 06:30 日报归档在测试环境完成一次验证。
|
||||
|
||||
### 15.4 发布与回滚
|
||||
|
||||
- [ ] Woodpecker 流水线通过；
|
||||
- [ ] Harbor 中存在对应版本镜像；
|
||||
- [ ] Portainer / Compose 使用目标镜像标签和正确 Secret；
|
||||
- [ ] 部署后验证健康检查、登录、API、Web 和移动端；
|
||||
- [ ] 记录上一稳定镜像标签、数据库变更和回滚步骤。
|
||||
|
||||
## 16. 维护原则
|
||||
|
||||
1. **先确认真实数据口径，再改页面**：经营指标必须能从汇总下钻到真实流水。
|
||||
2. **前端隐藏不代替后端鉴权**：任何管理或敏感能力都要有 API 守卫。
|
||||
3. **配置与凭据分离**：代码只保留变量名和安全默认行为，不保留真实密码。
|
||||
4. **原型页面以截图验收**：氢能模块必须对照原型验证布局、样式、交互、下钻层级和移动端。
|
||||
5. **变更必须可回滚**：发版保留旧镜像，数据库变更先备份、再迁移、再核对。
|
||||
6. **区分可达与可用**：健康检查正常不代表数据库、外部 API 和经营数据正常。
|
||||
@@ -0,0 +1,13 @@
|
||||
# 本地只读预览
|
||||
|
||||
使用 Node.js 22+ 和 npm，在本项目内执行 `npm ci`，避免依赖其他工作目录的 node_modules 软链接。
|
||||
|
||||
将 `.env.local.example` 复制为 `.env.local` 并填写连接配置，或通过进程环境变量提供配置。使用数据库侧只读账号；不要提交真实凭据。
|
||||
|
||||
执行 `npm run dev:local`，浏览器访问 http://127.0.0.1:8115/energy#hydrogen 。前后端固定绑定本机 8115 / 3001；端口占用时退出，不自动换端口。停止终端进程即可停止服务；此命令不配置开机自启。
|
||||
|
||||
本地入口关闭 mock、启用本地免登录，禁用后台建表与定时归档，并拒绝 API 的 POST / PUT / PATCH / DELETE。请勿把免登录预览暴露到公网。氢能查询启用只读 SQL 检查；这不能替代数据库账号的只读权限。
|
||||
|
||||
`npm run dev` / `npm start` 保留原部署方式；设置 `DB_READ_ONLY=1` 时同样不启动后台任务，且 API 禁止写入。生产登录流程需要写请求，因此不要把本地只读模式当作生产部署配置。
|
||||
|
||||
验证：`npm test`、`npm run lint`、`npm run build`；健康检查为 `GET http://127.0.0.1:3001/api/health`。健康检查成功仅代表进程可用，还需检查氢能 meta / overview 的真实数据响应。
|
||||
@@ -43,7 +43,7 @@ const mileagePool = mysql.createPool({
|
||||
host: '101.133.130.65',
|
||||
port: 3306,
|
||||
user: 'bi_reader_02',
|
||||
password: 'bi_reader_02_Pass',
|
||||
password: process.env.MILEAGE_DB_PASSWORD,
|
||||
database: 'hydrogen_energy',
|
||||
waitForConnections: true,
|
||||
connectionLimit: 5,
|
||||
|
||||
@@ -20,7 +20,7 @@
|
||||
|
||||
### 数据库 2：hydrogen_energy（新增连接）
|
||||
|
||||
- 连接信息：`101.133.130.65:3306`，用户 `bi_reader_02`，密码 `bi_reader_02_Pass`，库名 `hydrogen_energy`
|
||||
- 连接信息：`101.133.130.65:3306`，用户 `bi_reader_02`，密码 `<见环境变量 MILEAGE_DB_PASSWORD>`，库名 `hydrogen_energy`
|
||||
- `v_vehicle_daily_stats` — 1004 辆车的每日里程明细（plate, vin, stat_date, daily_km, total_km, day_hydrogen, daily_run_secs, source）
|
||||
|
||||
## 架构
|
||||
|
||||
Generated
+2069
-3
File diff suppressed because it is too large
Load Diff
+6
-2
@@ -1,16 +1,19 @@
|
||||
{
|
||||
"name": "ln-bi",
|
||||
"private": true,
|
||||
"version": "1.1.18",
|
||||
"version": "1.2.3",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev:local": "concurrently -k -n server,client \"npm run dev:local:server\" \"npm run dev:local:client\"",
|
||||
"dev:local:server": "node --import tsx src/server/local.ts",
|
||||
"dev:local:client": "DEV_MOCK_API=0 VITE_DEV_BYPASS_AUTH=1 vite --host 127.0.0.1 --port 8115 --strictPort",
|
||||
"dev": "concurrently -n server,client -c blue,green \"npm run dev:server\" \"npm run dev:client\"",
|
||||
"dev:server": "tsx watch src/server/index.ts",
|
||||
"dev:client": "vite --port=3000 --host=0.0.0.0",
|
||||
"build": "vite build",
|
||||
"start": "node --import tsx src/server/index.ts",
|
||||
"lint": "tsc --noEmit",
|
||||
"test": "node --import tsx --test $(find src -type f -name '*.test.ts' -print | sort)",
|
||||
"test": "node --import tsx --test $(find src -type f \\( -name '*.test.ts' -o -name '*.test.tsx' \\) -print | sort)",
|
||||
"test:mileage-report": "node --import tsx --test src/server/routes/mileage/daily-report-model.test.ts"
|
||||
},
|
||||
"dependencies": {
|
||||
@@ -22,6 +25,7 @@
|
||||
"cn": "^0.4.0",
|
||||
"dotenv": "^16.4.0",
|
||||
"echarts": "^6.1.0",
|
||||
"exceljs": "^4.4.0",
|
||||
"hono": "^4.7.0",
|
||||
"jsonwebtoken": "^9.0.3",
|
||||
"lucide-react": "^0.546.0",
|
||||
|
||||
@@ -0,0 +1,43 @@
|
||||
<svg width="150" height="36" viewBox="0 0 150 36" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M18.0459 4.69253L24.4084 4.6875L17.3427 16.9334C16.0108 19.2369 14.67 21.5335 13.357 23.8492C12.8279 24.6836 12.7967 25.5367 14.0379 25.5663C17.6611 25.6526 21.3268 25.5356 24.9495 25.6042C24.4224 26.7246 23.2874 28.5534 22.6381 29.6706L21.6984 31.3061L13.8032 31.3074C11.2823 31.3084 7.42295 31.774 6.15339 28.9623C5.10923 26.6498 6.73472 24.2701 7.86608 22.3109L10.1604 18.3408L18.0459 4.69253Z" fill="#2F2828"/>
|
||||
<path d="M30.7029 4.69293L38.1664 4.6931C40.8704 4.68656 45.5224 4.1044 46.4284 7.56236C47.0408 9.9001 45.3543 12.286 44.21 14.218C42.2951 14.125 39.809 14.1965 37.8457 14.1908C38.3321 13.3838 40.2747 10.8182 38.8199 10.5324C37.4531 10.2639 35.1947 10.4548 33.7653 10.4209C32.0072 13.3847 30.3349 16.4036 28.5844 19.3723C28.4964 19.5215 28.3602 19.7716 28.257 19.9038L21.9204 19.9023L30.7029 4.69293Z" fill="#2F2828"/>
|
||||
<path d="M89.1232 4.67032C89.7835 4.62775 90.9099 4.66078 91.6053 4.65867L90.978 7.75816L98.7808 7.75999C98.6607 8.46499 98.5297 9.16816 98.3877 9.86921L90.5769 9.86774C90.1934 11.0614 89.853 13.7315 89.4731 15.1689L97.9522 15.1851C97.8321 15.8946 97.6872 16.5697 97.5364 17.2721C94.9175 17.1811 91.7297 17.2538 89.0954 17.2677C88.594 19.3603 88.1541 21.9308 87.7303 24.0635C86.9061 24.0335 86.0812 24.0264 85.2563 24.0421C85.7525 22.0904 86.18 19.3243 86.6177 17.2638L85.2372 17.257L77.0092 17.2648C77.1446 16.5758 77.2727 15.8857 77.3957 15.1944C79.8624 15.1112 82.3687 15.2077 84.839 15.1714C85.5417 15.161 86.2942 15.1588 86.9939 15.2057C87.447 13.5537 87.6608 11.5742 88.1087 9.87872C86.2986 9.82772 84.3142 9.86591 82.4909 9.86569C81.7604 11.226 81.0028 12.4816 80.2657 13.8163L77.5362 13.8114C79.6816 10.4975 80.6808 8.44223 82.2311 4.86287C83.0545 4.83579 84.0075 4.85801 84.8405 4.85771C84.4152 5.82928 83.998 6.81499 83.512 7.75669C85.1516 7.77967 86.8351 7.76247 88.4769 7.76452C88.7163 6.8407 88.9417 5.61995 89.1232 4.67032Z" fill="#2F2828"/>
|
||||
<path d="M70.2503 4.65824L73.7308 4.65625C74.7336 7.08713 76.1309 9.57515 77.5099 11.8054C76.5818 11.7752 75.527 11.798 74.5887 11.7967C73.5397 9.99962 72.6069 8.13727 71.7957 6.22117C71.2298 6.89947 70.7149 7.63591 70.1079 8.35496L72.1324 8.35415C72.359 9.56198 72.4332 11.2339 72.4619 12.4558L70.2398 12.4478C70.2372 11.0171 70.1331 9.90113 70.0025 8.48344C69.1539 9.57259 67.962 10.814 66.9868 11.7877L65.7182 11.7932L64.2958 11.7963C64.2202 12.4282 64.0755 13.0643 63.9444 13.6881L60.6789 13.6869C60.5363 14.5168 60.3766 15.3436 60.1998 16.1668L63.9171 16.1664L63.5281 18.0826C62.277 18.0555 60.9445 18.0784 59.687 18.0782C58.9474 20.2403 57.828 22.2532 56.3813 24.0224C55.6509 24.0768 54.3913 24.03 53.5917 24.0442C55.3706 21.7397 56.0946 20.7987 57.3125 18.0802L53.6008 18.0731C53.7608 17.396 53.882 16.8655 53.9824 16.1718C55.2848 16.1587 56.5873 16.1591 57.8898 16.1732L58.3652 13.6896L54.9231 13.6853C55.1139 13.0172 55.1958 12.5027 55.3015 11.8164C56.2519 11.7504 57.7795 11.7881 58.7587 11.8109C58.8945 11.0981 59.037 10.3867 59.1861 9.67657C57.9106 9.6642 56.6351 9.66427 55.3597 9.67657C55.4544 9.05996 55.5544 8.44415 55.66 7.8293C57.5354 7.80764 59.4484 7.82827 61.3266 7.83003C61.9933 6.86852 62.6551 5.74668 63.0825 4.66341L65.5379 4.65888C64.9966 5.88817 64.5907 6.67983 63.9019 7.83288L65.5427 7.82645C65.4452 8.4301 65.2987 9.07927 65.1744 9.68205C63.9717 9.64854 62.7013 9.67152 61.4934 9.67532C61.3775 10.3714 61.2146 11.1007 61.0712 11.7947L63.9987 11.7913C66.5788 9.20798 68.0943 7.61586 70.2503 4.65824Z" fill="#2F2828"/>
|
||||
<path d="M122.532 11.8166C125.798 11.7231 129.441 11.7977 132.734 11.7984C132.466 13.5695 131.978 15.624 131.64 17.4038C131.42 18.5691 130.997 20.9151 130.604 21.9327C130.313 22.7085 129.869 23.4177 129.299 24.0182C128.475 24.0895 127.218 24.0195 126.289 24.0612C126.736 23.701 127.014 23.4316 127.42 23.0228C128.176 22.1519 128.359 21.6669 128.744 20.5722C126.97 20.5048 124.822 20.5601 123.018 20.5584C122.945 21.3158 122.507 23.1882 122.339 24.0641C121.646 24.031 120.793 24.0186 120.111 24.0547C120.247 23.0506 120.522 21.8389 120.724 20.8256L121.799 15.4428C121.945 14.7076 122.299 12.3722 122.532 11.8166ZM129.104 18.8694C129.21 18.2708 129.304 17.7024 129.465 17.1139C127.646 17.0946 125.48 17.1746 123.726 17.1053C123.609 17.6915 123.487 18.2767 123.359 18.8607C125.251 18.8633 127.22 18.8364 129.104 18.8694ZM124.059 15.3809C124.989 15.3848 129.088 15.5282 129.805 15.3507C129.899 14.7602 130.003 14.261 130.135 13.6774C128.223 13.6522 126.311 13.6515 124.399 13.6752C124.302 14.1834 124.187 14.895 124.059 15.3809Z" fill="#2F2828"/>
|
||||
<path d="M28.257 19.9042C30.3408 19.8373 32.5067 19.9107 34.6003 19.8799C33.5304 21.7989 32.4375 23.705 31.3217 25.5977L37.6027 25.587C37.1076 26.6547 36.2454 28.0061 35.655 29.0623C35.3804 29.5534 34.6405 30.8847 34.3403 31.3077L28.0049 31.3022C28.8125 29.6956 29.8532 28.1298 30.7172 26.5471C30.8889 26.2323 31.0858 25.9059 31.2849 25.6084C29.1922 25.6072 27.049 25.5816 24.9604 25.61C25.6026 24.4466 26.26 23.2918 26.9324 22.1456C27.3144 21.4843 27.8407 20.5151 28.257 19.9042Z" fill="#007143"/>
|
||||
<path d="M99.7206 10.1076C106.203 9.98573 113.088 10.0971 119.599 10.1018C118.777 13.8389 118.005 17.7955 117.477 21.5875C117.37 22.3581 118.045 23.5899 118.033 24.042C117.125 24.0338 116.218 24.0361 115.311 24.0488C114.92 21.1109 115.519 19.0866 116.068 16.2425C116.357 14.7439 116.652 13.209 116.981 11.7202L99.4205 11.7137C99.5633 11.1642 99.6343 10.6691 99.7206 10.1076Z" fill="#2F2828"/>
|
||||
<path d="M64.5255 12.945C68.4291 12.8445 72.7488 12.9376 76.6835 12.9394C76.5327 13.651 76.4317 14.5237 75.9691 15.0919C75.4018 15.7882 74.7928 16.4582 74.197 17.1312L70.7419 21.0305L69.7438 21.059C70.2176 22.0474 70.6693 23.0462 71.0985 24.0548C70.1752 24.0352 69.2515 24.0344 68.3282 24.0525C67.9964 23.2947 67.6583 22.5397 67.3138 21.7875C66.4548 19.874 65.5159 17.9972 64.5 16.1621C65.3591 16.1484 66.2391 16.156 67.1001 16.1542C67.8294 17.3343 68.5019 18.5485 69.1155 19.7926C70.6881 18.1842 72.2203 16.5366 73.7103 14.8514L64.1427 14.8496C64.2745 14.2155 64.402 13.5807 64.5255 12.945Z" fill="#2F2828"/>
|
||||
<path d="M100.218 12.4635C104.946 12.4535 109.674 12.4727 114.401 12.5212C114.273 12.9715 114.112 13.3776 113.946 13.814C112.657 14.4639 111.179 15.1061 109.857 15.7056C111.599 15.949 113.275 15.9778 115.027 16.028C114.844 16.6716 114.645 17.3102 114.427 17.943C112.64 17.957 110.455 17.6924 108.705 17.3225C108.285 17.2407 107.508 16.991 107.072 16.8654C104.084 18.0184 101.851 17.949 98.7192 17.9316C98.791 17.2822 98.9052 16.6738 99.0208 16.0327C102.633 15.9161 105.599 15.8462 108.933 14.123C106.178 14.2266 102.668 14.1367 99.8604 14.135C99.9731 13.5764 100.092 13.0192 100.218 12.4635Z" fill="#2F2828"/>
|
||||
<path d="M98.7625 18.3504C100.425 18.3036 102.282 18.3451 103.963 18.3452L114.077 18.3459C113.979 18.982 113.891 19.4244 113.733 20.0481C111.681 19.9793 109.274 20.0318 107.196 20.0488C107.14 20.5854 106.873 21.7822 106.759 22.3601C108.872 22.2731 111.751 22.3361 113.883 22.3568C113.718 22.9049 113.8 23.5534 113.504 23.9553C113.406 24.0871 113.154 24.042 112.96 24.0414C107.731 23.9823 102.283 24.0035 97.0497 24.0421C97.15 23.4629 97.2678 22.9333 97.3996 22.3599C99.6372 22.3158 102.265 22.3081 104.496 22.3613C104.62 21.6 104.787 20.8055 104.936 20.0457C102.829 19.9936 100.54 20.0389 98.4199 20.0394L98.7625 18.3504Z" fill="#2F2828"/>
|
||||
<path d="M133.256 13.9166C133.997 13.9023 134.788 13.9161 135.533 13.9168C135.386 14.8072 135.174 15.7896 135.001 16.6831C137.384 16.4394 139.769 16.2153 142.155 16.0109C141.98 16.6792 141.965 17.2281 141.716 17.9362C141.421 17.9321 141.131 17.9513 140.839 17.9823C138.756 18.2028 136.663 18.3336 134.585 18.5982C134.457 19.6086 134.11 21.1394 133.89 22.1662L135.596 22.1591H140.893C140.792 22.7924 140.684 23.4247 140.569 24.0557C137.586 23.9698 134.244 24.0318 131.246 24.0396C131.9 20.9278 132.738 17.0234 133.256 13.9166Z" fill="#2F2828"/>
|
||||
<path d="M135.098 4.62931C135.853 4.62166 136.607 4.62419 137.363 4.6369C137.162 5.41299 137.017 6.28154 136.868 7.07464C139.102 6.84738 141.908 6.69114 144.053 6.37755C143.943 7.01342 143.835 7.73358 143.657 8.34683L136.465 8.98722C136.314 9.81163 136.157 10.6349 135.994 11.4569C136.445 11.4309 137.106 11.4499 137.573 11.4482C139.397 11.4591 141.222 11.4559 143.046 11.4386C142.935 12.1076 142.839 12.6758 142.674 13.3374C139.624 13.2772 136.387 13.3227 133.323 13.3214C133.552 12.5671 133.793 11.1594 133.955 10.3413C134.324 8.43507 134.706 6.53103 135.098 4.62931Z" fill="#2F2828"/>
|
||||
<path d="M102.916 4.63357C103.716 4.61473 104.573 4.6323 105.378 4.63596L104.934 5.48128L121.832 5.48318C121.739 6.10161 121.672 6.52446 121.507 7.12456C119.818 7.05448 117.769 7.10604 116.053 7.10625L103.984 7.11772C103.38 7.9858 102.762 8.89904 102.054 9.68109C101.302 9.67604 100.124 9.63799 99.419 9.71446C99.8816 9.06719 100.543 8.33907 101.04 7.66743C101.837 6.59222 102.296 5.78928 102.916 4.63357Z" fill="#2F2828"/>
|
||||
<path d="M126 4.67433C126.546 4.62029 128.007 4.65657 128.619 4.65502C127.72 6.37437 126.984 7.53498 125.875 9.09798C127.492 9.05503 129.258 9.08605 130.886 9.08474C130.822 8.136 130.773 7.13368 130.53 6.2156C131.306 6.15771 132.166 6.17288 132.949 6.17043C133.021 7.06163 133.221 8.13834 133.316 9.09988C133.309 9.63037 133.157 10.3841 133.057 10.9028C129.465 10.8026 125.423 10.8945 121.795 10.8945C123.602 8.78078 124.778 7.14823 126 4.67433Z" fill="#2F2828"/>
|
||||
<path d="M37.8456 14.1928C39.809 14.1984 42.2951 14.127 44.2099 14.22L41.9937 18.0919C41.7788 18.4647 41.1512 19.6063 40.9155 19.9025L34.5791 19.8957C35.6336 17.9833 36.7911 16.1017 37.8456 14.1928Z" fill="#007143"/>
|
||||
<path d="M40.9155 19.902C43.0195 19.8499 45.1502 19.9224 47.2506 19.8789C46.4721 21.4168 44.8928 24.105 43.9715 25.602L37.6138 25.6077C38.4831 23.9831 39.9311 21.447 40.9155 19.902Z" fill="#007143"/>
|
||||
<path d="M104.415 7.76391L120.496 7.76172C120.35 8.3135 120.238 8.87355 120.16 9.43887C118.084 9.37345 115.82 9.41552 113.733 9.4153L104.085 9.42408C104.155 8.93055 104.312 8.26469 104.415 7.76391Z" fill="#2F2828"/>
|
||||
<path d="M96.4304 26.879C99.2507 26.6667 98.9579 30.7714 95.9312 31.3474C92.5488 31.3098 93.6973 27.1881 96.4304 26.879ZM95.9883 30.5709C96.9304 30.2786 97.7955 29.3384 97.4662 28.3229C97.3944 28.096 97.2327 27.9087 97.0175 27.8056C96.7964 27.6975 96.4978 27.6448 96.2518 27.6614C95.3083 27.9393 94.49 28.8604 94.7842 29.8668C94.8501 30.099 95.0075 30.2944 95.2205 30.4079C95.4752 30.5427 95.7065 30.5599 95.9883 30.5709Z" fill="#2F2828"/>
|
||||
<path d="M120.579 26.8756C123.424 26.7179 123.034 30.7691 120.086 31.3456C116.806 31.3978 117.733 27.1994 120.579 26.8756ZM120.22 30.5368C122.019 29.9774 122.223 27.4751 120.314 27.6674C119.642 27.9156 119.439 28.0285 119.093 28.7081C118.616 29.6484 119.009 30.7721 120.22 30.5368Z" fill="#2F2828"/>
|
||||
<path d="M116.66 26.9238L117.992 26.9219C117.747 28.2834 117.347 29.9417 117.049 31.3153L116.157 31.3083C116.347 30.6023 116.495 29.7902 116.644 29.0672C116.688 28.9313 116.767 28.502 116.801 28.3408C116.395 29.0335 115.459 30.9511 114.675 31.3444C114.566 31.399 114.465 31.3038 114.371 31.2359C114.165 30.71 113.925 28.8772 113.836 28.242L113.198 31.3117L112.31 31.3165L113.23 26.9279L114.491 26.9225C114.605 27.7811 114.833 28.7942 114.973 29.6896C115.472 28.9993 116.215 27.6823 116.66 26.9238Z" fill="#2F2828"/>
|
||||
<path d="M86.5921 26.9211C86.9917 26.9147 87.4287 26.9264 87.8225 26.9095C90.4759 26.7956 90.1867 29.6754 88.5223 30.9111C87.5305 31.4374 86.7699 31.3173 85.6661 31.3024C85.7957 30.2878 86.3578 28.007 86.5921 26.9211ZM86.7231 30.4522C87.1359 30.4503 87.7347 30.4871 88.1007 30.316C88.6401 29.8127 89.3033 28.7778 88.6848 28.0956C88.3158 27.6887 87.7976 27.7551 87.2911 27.7533C87.1257 28.5612 86.9295 29.669 86.7231 30.4522Z" fill="#2F2828"/>
|
||||
<path d="M123.457 26.9226C124.213 26.9143 125.634 26.8007 126.186 27.3128C126.71 27.7978 125.896 28.5423 125.68 28.9376C125.595 29.0947 126.087 29.5814 126.078 29.8632C126.065 30.2604 125.746 30.6635 125.492 30.9391C124.737 31.4476 123.501 31.3147 122.564 31.3117C122.81 29.8751 123.187 28.3774 123.457 26.9226ZM123.593 30.5161C124.141 30.5116 124.358 30.5255 124.891 30.3884C125.067 30.151 125.129 30.0825 125.184 29.7933C125.024 29.2759 124.325 29.3801 123.862 29.3789L123.593 30.5161ZM123.999 28.6156C124.282 28.6098 124.866 28.6145 125.123 28.5796C125.245 28.3715 125.336 28.252 125.328 28.0082C125.082 27.6121 124.658 27.6901 124.214 27.6711C124.144 27.9762 124.058 28.3111 123.999 28.6156Z" fill="#2F2828"/>
|
||||
<path d="M90.735 26.9215C92.024 26.9243 94.8238 26.5442 93.2493 29.0441C93.0876 29.3009 92.7831 29.446 92.5137 29.583C92.7384 30.1413 92.9478 30.7419 93.1556 31.3095C92.8314 31.3198 92.3036 31.3998 92.0979 31.1551C91.9179 30.6395 91.7971 30.0956 91.3931 29.741C90.8792 29.6812 90.7592 30.8999 90.6765 31.3136L89.8201 31.3149C90.1114 29.8477 90.4166 28.3831 90.735 26.9215ZM91.2167 28.8258C91.4736 28.8227 92.2707 28.8268 92.4815 28.7911C92.6447 28.5511 92.7304 28.4484 92.7926 28.1652C92.6755 27.6152 91.9171 27.7496 91.4458 27.7535C91.366 28.1101 91.2891 28.4675 91.2167 28.8258Z" fill="#2F2828"/>
|
||||
<path d="M69.3081 26.9222L70.1771 26.9141C69.9698 28.186 69.5337 30.0383 69.2388 31.3177L68.1065 31.3098C67.8398 30.3494 67.4692 29.2815 67.1696 28.3128C67.0189 29.2546 66.7757 30.3753 66.5616 31.3076L65.6787 31.3079L66.6075 26.9221L67.7409 26.9223C68.0639 27.8733 68.37 28.898 68.6717 29.8604C68.873 28.8787 69.0851 27.8992 69.3081 26.9222Z" fill="#2F2828"/>
|
||||
<path d="M108.881 29.8868C109.027 29.2478 109.289 27.5001 109.54 27.0002C109.723 26.889 110.12 26.9136 110.352 26.9105C110.263 27.8288 109.679 30.3103 109.457 31.3037L108.341 31.3085C108.011 30.3531 107.719 29.367 107.384 28.4004L106.772 31.3134L105.9 31.3077C106.155 29.911 106.523 28.3126 106.832 26.9175L107.966 26.9206C108.2 27.8185 108.6 28.9795 108.881 29.8868Z" fill="#2F2828"/>
|
||||
<path d="M61.0197 26.9225L61.8629 26.9102C61.7079 28.0991 61.2332 30.0627 60.9722 31.3099L59.8503 31.3086C59.519 30.3592 59.2069 29.3429 58.8931 28.3815L58.2722 31.3125L57.3802 31.3049C57.7123 30.0129 58.0673 28.24 58.3208 26.9184L59.4601 26.922C59.6904 27.8033 60.1149 29.0009 60.4008 29.8927C60.5467 28.9635 60.7999 27.8383 61.0197 26.9225Z" fill="#2F2828"/>
|
||||
<path d="M78.6518 26.9215L79.5294 26.9146C79.4255 27.4595 79.2959 28.0172 79.1766 28.5603C79.689 28.553 80.216 28.5592 80.7298 28.5592L81.0951 26.923L81.9493 26.9141C81.8519 27.9269 81.2576 30.0868 81.0526 31.1643C81.0343 31.2615 80.9867 31.26 80.8865 31.3094C80.6281 31.3129 80.44 31.3262 80.1889 31.262C80.2658 30.6683 80.4253 30.0042 80.5534 29.4127L78.998 29.4118C78.867 30.0925 78.7586 30.6456 78.5669 31.3166L77.7339 31.3159C77.9893 29.9039 78.3363 28.3198 78.6518 26.9215Z" fill="#2F2828"/>
|
||||
<path d="M103.391 26.918L106.201 26.9222L106.032 27.7871C105.48 27.7389 104.623 27.7531 104.059 27.7493C104.008 28.0771 103.939 28.4261 103.88 28.7546L105.576 28.7521L105.445 29.4786C105.093 29.4693 104.014 29.408 103.727 29.5427L103.677 29.7236L103.488 30.4471L105.46 30.4415C105.391 30.7111 105.332 31.0336 105.273 31.3098C104.347 31.2889 103.359 31.3061 102.428 31.3067C102.714 29.9523 103.028 28.2233 103.391 26.918Z" fill="#2F2828"/>
|
||||
<path d="M101.23 26.8806C101.741 26.8186 102.269 26.978 102.715 27.2175C102.67 27.4649 102.637 27.8569 102.466 28.0164C102.325 28.0441 101.618 27.7141 101.272 27.6162C100.683 27.7595 100.181 27.9029 99.8684 28.4645C99.2265 29.6163 99.5405 30.8072 101.032 30.4857C101.475 30.0635 101.026 29.4324 101.687 29.1473C101.888 29.1663 102.02 29.1878 102.216 29.2257C102.312 29.5647 101.987 30.9407 101.742 31.0531C97.9931 32.7738 97.5708 27.2933 101.23 26.8806Z" fill="#2F2828"/>
|
||||
<path d="M74.9385 26.9214C75.1712 26.9118 75.4808 26.8744 75.6821 26.9707C75.7905 27.2226 75.7246 27.2838 75.6726 27.6035C75.3345 28.829 75.382 30.2578 74.2211 31.0737C73.6941 31.4969 72.454 31.4555 72.0957 30.8256C71.57 29.9017 72.2194 27.9607 72.4365 26.9236L73.3245 26.923C73.2315 27.4568 72.5294 29.9806 72.8643 30.2786C74.3522 31.6025 74.7181 27.8186 74.9385 26.9214Z" fill="#2F2828"/>
|
||||
<path d="M64.4934 26.8798C65.0658 26.8499 65.4038 26.9622 65.9183 27.1614C65.9004 27.4821 65.8231 27.8782 65.7694 28.201C65.3237 27.8267 65.0369 27.7669 64.4898 27.6111C64.0346 27.7299 63.4555 27.898 63.1815 28.3015C62.8659 28.7125 62.5666 30.01 63.1207 30.2988C64.5127 31.0242 64.4083 30.3038 64.6865 29.2341C64.6957 29.1988 65.0789 29.1547 65.1737 29.1403L65.443 29.2169C65.5798 29.5824 65.2474 30.6016 65.1325 31.0264C64.7903 31.1835 64.4256 31.2859 64.0516 31.3298C60.9761 31.6856 61.3322 27.1955 64.4934 26.8798Z" fill="#2F2828"/>
|
||||
<path d="M85.1552 26.9215L86.2297 26.918C85.7693 27.4771 85.3097 28.0605 84.8551 28.6258C84.028 29.5226 84.0163 30.1406 83.7762 31.3103L82.8773 31.3089C83.4446 29.0983 83.1291 29.0171 82.3298 26.9199L83.3107 26.9197C83.512 27.4507 83.7059 27.9844 83.8926 28.5204L85.1552 26.9215Z" fill="#2F2828"/>
|
||||
<path d="M139.373 26.9247L140.422 26.918C140.11 27.4009 139.441 28.178 139.059 28.6479C138.207 29.6578 138.305 30.0537 137.985 31.3112L137.113 31.3094C137.262 30.7606 137.396 30.0375 137.516 29.4702C137.197 28.6188 136.873 27.7696 136.543 26.9227L137.516 26.921C137.728 27.4476 137.932 27.9767 138.13 28.5083C138.556 27.9893 138.97 27.4613 139.373 26.9247Z" fill="#2F2828"/>
|
||||
<path d="M57.3993 4.67527C58.1061 4.65383 58.8637 4.66377 59.5748 4.66016C59.8347 5.63537 59.8946 6.41442 59.9652 7.40979C59.3798 7.36896 58.4268 7.39837 57.8139 7.39757C57.7331 6.3945 57.6463 5.64817 57.3993 4.67527Z" fill="#2F2828"/>
|
||||
<path d="M133.406 26.9219L136.447 26.9253L136.333 27.7751C135.986 27.7619 135.585 27.7671 135.234 27.7638C135.054 28.5778 134.891 29.4212 134.722 30.2397L134.468 31.3148L133.589 31.3145C133.858 30.1379 134.11 28.9573 134.343 27.7731C134.007 27.7561 133.613 27.7725 133.273 27.7783L133.406 26.9219Z" fill="#2F2828"/>
|
||||
<path d="M53.4287 26.918L54.3232 26.9254L53.5875 30.453L55.5179 30.4498L55.3763 31.3123C54.4204 31.2926 53.4227 31.3031 52.4631 31.2988C52.7142 30.6151 53.2746 27.7241 53.4287 26.918Z" fill="#2F2828"/>
|
||||
<path d="M128.859 26.924L129.753 26.9219C129.475 28.0093 129.226 29.3489 128.993 30.4563L130.915 30.4496L130.763 31.3133C129.848 31.2883 128.851 31.3078 127.93 31.3087L128.859 26.924Z" fill="#2F2828"/>
|
||||
<path d="M127.308 26.9204L128.164 26.918L127.239 31.3152L126.351 31.3151C126.65 29.8952 126.949 28.3149 127.308 26.9204Z" fill="#2F2828"/>
|
||||
<path d="M56.7724 26.918L57.6656 26.9141C57.3133 28.3287 57.0132 29.8795 56.7123 31.3129L55.8318 31.3086C56.1293 29.8417 56.4429 28.3781 56.7724 26.918Z" fill="#2F2828"/>
|
||||
<path d="M70.8595 26.9214L71.7381 26.918C71.567 28.0722 71.0941 30.1443 70.8119 31.3022L69.9707 31.3105C70.1852 29.9437 70.5812 28.3064 70.8595 26.9214Z" fill="#2F2828"/>
|
||||
<path d="M132.146 26.9187L133.056 26.918C132.809 28.082 132.418 30.2402 132.087 31.3152L131.25 31.3052C131.533 29.8444 131.902 28.3846 132.146 26.9187Z" fill="#2F2828"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 18 KiB |
@@ -1,178 +0,0 @@
|
||||
沪A00113F
|
||||
沪A00220F
|
||||
沪A00333F
|
||||
沪A00607F
|
||||
沪A01056F
|
||||
沪A01311F
|
||||
沪A01775F
|
||||
沪A01813F
|
||||
沪A01855F
|
||||
沪A02303F
|
||||
沪A02311F
|
||||
沪A02326F
|
||||
沪A02361F
|
||||
沪A02720F
|
||||
沪A03086F
|
||||
沪A03397F
|
||||
沪A03565F
|
||||
沪A03620F
|
||||
沪A03659F
|
||||
沪A03801F
|
||||
沪A03870F
|
||||
沪A05035F
|
||||
沪A05113F
|
||||
沪A05223F
|
||||
沪A05501F
|
||||
沪A05675F
|
||||
沪A05697F
|
||||
沪A05830F
|
||||
沪A06335F
|
||||
沪A06599F
|
||||
沪A06695F
|
||||
沪A07006F
|
||||
沪A07153F
|
||||
沪A07806F
|
||||
沪A08037F
|
||||
沪A08150F
|
||||
沪A08315F
|
||||
沪A08598F
|
||||
沪A08786F
|
||||
沪A09100F
|
||||
沪A09251F
|
||||
沪A09276F
|
||||
沪A09303F
|
||||
沪A09313F
|
||||
沪A09322F
|
||||
沪A09689F
|
||||
沪A30010F
|
||||
沪A30399F
|
||||
沪A31031F
|
||||
沪A31211F
|
||||
沪A31281F
|
||||
沪A31308F
|
||||
沪A31381F
|
||||
沪A31613F
|
||||
沪A32269F
|
||||
沪A33216F
|
||||
沪A35236F
|
||||
沪A35798F
|
||||
沪A35879F
|
||||
沪A35898F
|
||||
沪A36133F
|
||||
沪A36169F
|
||||
沪A36569F
|
||||
沪A36980F
|
||||
沪A37785F
|
||||
沪A38795F
|
||||
沪A39287F
|
||||
沪A39289F
|
||||
沪A39585F
|
||||
沪A39608F
|
||||
沪A39626F
|
||||
沪A39815F
|
||||
沪A39835F
|
||||
沪A39912F
|
||||
沪A50026F
|
||||
沪A50069F
|
||||
沪A50309F
|
||||
沪A51580F
|
||||
沪A51612F
|
||||
沪A51677F
|
||||
沪A51893F
|
||||
沪A52331F
|
||||
沪A52511F
|
||||
沪A53309F
|
||||
沪A53322F
|
||||
沪A53506F
|
||||
沪A53960F
|
||||
沪A55179F
|
||||
沪A55297F
|
||||
沪A55339F
|
||||
沪A55666F
|
||||
沪A55695F
|
||||
沪A56122F
|
||||
沪A56701F
|
||||
沪A56959F
|
||||
沪A56988F
|
||||
沪A57139F
|
||||
沪A57167F
|
||||
沪A57198F
|
||||
沪A57838F
|
||||
沪A57850F
|
||||
沪A57895F
|
||||
沪A58087F
|
||||
沪A58159F
|
||||
沪A58185F
|
||||
沪A58307F
|
||||
沪A58533F
|
||||
沪A58538F
|
||||
沪A58593F
|
||||
沪A58922F
|
||||
沪A59095F
|
||||
沪A59510F
|
||||
沪A59613F
|
||||
沪A59682F
|
||||
沪A59799F
|
||||
沪A59932F
|
||||
沪A60339F
|
||||
沪A60691F
|
||||
沪A60820F
|
||||
沪A61187F
|
||||
沪A61193F
|
||||
沪A61312F
|
||||
沪A61559F
|
||||
沪A61600F
|
||||
沪A61711F
|
||||
沪A61738F
|
||||
沪A62322F
|
||||
沪A62772F
|
||||
沪A62928F
|
||||
沪A63013F
|
||||
沪A63305F
|
||||
沪A63522F
|
||||
沪A63660F
|
||||
沪A63697F
|
||||
沪A65036F
|
||||
沪A65181F
|
||||
沪A65522F
|
||||
沪A65995F
|
||||
沪A66216F
|
||||
沪A66256F
|
||||
沪A66329F
|
||||
沪A66593F
|
||||
沪A66710F
|
||||
沪A66921F
|
||||
沪A67018F
|
||||
沪A67033F
|
||||
沪A67872F
|
||||
沪A68115F
|
||||
沪A68139F
|
||||
沪A68332F
|
||||
沪A68613F
|
||||
沪A68658F
|
||||
沪A68752F
|
||||
沪A69311F
|
||||
沪A69826F
|
||||
沪A69997F
|
||||
沪A85021F
|
||||
沪A89315F
|
||||
沪A89385F
|
||||
沪A89662F
|
||||
浙F00885F
|
||||
浙F08889F
|
||||
浙F09898F
|
||||
粤A00255F
|
||||
粤A02683F
|
||||
粤A02956F
|
||||
粤A03502F
|
||||
粤A03532F
|
||||
粤A03569F
|
||||
粤A05106F
|
||||
粤A05391F
|
||||
粤A05428F
|
||||
粤A05839F
|
||||
粤A05985F
|
||||
粤A05995F
|
||||
粤A06569F
|
||||
粤A06931F
|
||||
粤A06932F
|
||||
@@ -1,60 +0,0 @@
|
||||
import mysql from 'mysql2/promise';
|
||||
import fs from 'node:fs';
|
||||
|
||||
const pool = mysql.createPool({
|
||||
host: 'rm-uf65w5v2r77n674x2.mysql.rds.aliyuncs.com',
|
||||
port: 3306,
|
||||
user: 'root',
|
||||
password: 'LN#Passw0rd@2026',
|
||||
database: 'lingniu_prod',
|
||||
connectTimeout: 15000, ssl: { rejectUnauthorized: false },
|
||||
});
|
||||
|
||||
async function main() {
|
||||
const excelPlates = new Set(
|
||||
fs.readFileSync('/Users/kkfluous/Projects/ai-coding/ln-bi/scripts-tmp/excel_plates.txt', 'utf8').trim().split('\n').map((s) => s.trim())
|
||||
);
|
||||
console.log('excel plates:', excelPlates.size);
|
||||
|
||||
// 按 dept-stats 逻辑查金可鹏 18T Operating
|
||||
const [rows] = await pool.query<any[]>(`
|
||||
SELECT truck.plate_number AS plate,
|
||||
dic_type.dic_name AS type_label,
|
||||
dic_status.dic_name AS status_label,
|
||||
cus.customer_name AS customer,
|
||||
org_truck.org_name AS subject_org
|
||||
FROM tab_truck truck
|
||||
LEFT JOIN tab_dic dic_type ON dic_type.parent_code='dic_truck_type' AND dic_type.dic_code=truck.model AND dic_type.is_deleted=0
|
||||
LEFT JOIN tab_dic dic_status ON dic_status.parent_code='dic_truck_rent_status' AND dic_status.dic_code=truck.truck_rent_status AND dic_status.is_deleted=0
|
||||
LEFT JOIN tab_truck_status_info si ON si.truck_id=truck.id AND si.is_deleted=0
|
||||
LEFT JOIN tab_contract c ON c.id=si.contract_id AND c.is_deleted=0
|
||||
LEFT JOIN tab_customer cus ON cus.id=c.customer_id AND cus.is_deleted=0
|
||||
LEFT JOIN tab_org org_truck ON org_truck.id=truck.org_id AND org_truck.is_deleted=0
|
||||
LEFT JOIN tab_user u ON u.id=c.bd AND u.is_deleted=0
|
||||
WHERE truck.is_deleted=0 AND truck.is_operation=1
|
||||
AND u.user_name='金可鹏'
|
||||
AND dic_type.dic_name LIKE '%18吨%'
|
||||
AND dic_status.dic_name IN ('租赁','自营','挂靠')
|
||||
ORDER BY truck.plate_number
|
||||
`);
|
||||
|
||||
console.log('DB 金可鹏 18T operating:', rows.length);
|
||||
const dbPlates = new Set((rows as any[]).map((r) => (r.plate || '').trim()));
|
||||
|
||||
const extra = [...dbPlates].filter((p) => !excelPlates.has(p)).sort();
|
||||
const missing = [...excelPlates].filter((p) => !dbPlates.has(p)).sort();
|
||||
|
||||
console.log('\n=== DB 有但 Excel 没有（多出来的） ===');
|
||||
console.log('数量:', extra.length);
|
||||
for (const p of extra) {
|
||||
const r = (rows as any[]).find((x) => x.plate === p);
|
||||
console.log(' ', p, '|', r?.type_label, '|', r?.customer, '|', r?.subject_org);
|
||||
}
|
||||
|
||||
console.log('\n=== Excel 有但 DB 没有 ===');
|
||||
console.log('数量:', missing.length);
|
||||
for (const p of missing) console.log(' ', p);
|
||||
|
||||
await pool.end();
|
||||
}
|
||||
main().catch((e) => { console.error(e); process.exit(1); });
|
||||
+19
-1
@@ -4,6 +4,7 @@ import AuthProvider from "./auth/AuthProvider";
|
||||
import PermissionPreview, { PermissionPreviewPage } from "./auth/PermissionPreview";
|
||||
import { useAuth } from "./auth/useAuth";
|
||||
import UnauthorizedPage from "./auth/UnauthorizedPage";
|
||||
import PasswordLogin from "./auth/PasswordLogin";
|
||||
import { canAccessEnergy } from "./shared/auth/roles";
|
||||
import { LoadingState, SkeletonBlock, SurfaceCard } from "./components/ui/surface";
|
||||
import { buildModules } from "./app/modules";
|
||||
@@ -14,10 +15,16 @@ import {
|
||||
|
||||
const EleImportPage = lazy(() => import("./modules/ele/EleImportPage"));
|
||||
const FeedbackAdminPage = lazy(() => import("./modules/admin/FeedbackAdminPage"));
|
||||
const HydrogenPrototypeBoard = lazy(
|
||||
() =>
|
||||
import("./modules/energy/hydrogen/board/EnergyBiBoardApp").then(
|
||||
({ EnergyBiBoardApp }) => ({ default: EnergyBiBoardApp }),
|
||||
),
|
||||
);
|
||||
normalizeBrowserPath();
|
||||
|
||||
function AuthGate() {
|
||||
const { isLoading, isAuthenticated, error, user } = useAuth();
|
||||
const { isLoading, isAuthenticated, error, user, mode } = useAuth();
|
||||
const [route, setRoute] = useState(readBrowserRoute);
|
||||
const { routeKey, pathSet } = route;
|
||||
|
||||
@@ -66,6 +73,7 @@ function AuthGate() {
|
||||
}
|
||||
|
||||
if (!isAuthenticated) {
|
||||
if (mode === 'password') return <PasswordLogin />;
|
||||
return <UnauthorizedPage message={error || undefined} />;
|
||||
}
|
||||
|
||||
@@ -86,6 +94,16 @@ function AuthGate() {
|
||||
</Suspense>
|
||||
);
|
||||
}
|
||||
if (routeKey === "energy/hydrogen-board") {
|
||||
if (!canAccessEnergy(user?.roles)) {
|
||||
return <UnauthorizedPage message="无能源管理模块访问权限" />;
|
||||
}
|
||||
return (
|
||||
<Suspense fallback={<LoadingState label="正在加载氢能经营看板" />}>
|
||||
<HydrogenPrototypeBoard />
|
||||
</Suspense>
|
||||
);
|
||||
}
|
||||
|
||||
// /energy 整组按能源权限控制
|
||||
if (pathSet === "energy" && !canAccessEnergy(user?.roles)) {
|
||||
|
||||
@@ -12,9 +12,10 @@ function heatmapChildIds(roles?: string[]): string[] {
|
||||
}
|
||||
|
||||
test('keeps the base asset navigation and role-gated scheduling module', () => {
|
||||
assert.deepEqual(moduleIds(), ['assets', 'mileage', 'heatmap']);
|
||||
assert.deepEqual(moduleIds(), ['assets', 'faults', 'mileage', 'heatmap']);
|
||||
assert.deepEqual(moduleIds(['BI-SCHEDULE-OPT']), [
|
||||
'assets',
|
||||
'faults',
|
||||
'mileage',
|
||||
'heatmap',
|
||||
'scheduling',
|
||||
@@ -35,4 +36,5 @@ test('keeps energy heatmap visibility and the independent energy navigation', ()
|
||||
buildModules('energy', []).map(module => module.id),
|
||||
['hydrogen', 'electric', 'etc'],
|
||||
);
|
||||
assert.equal(buildModules('energy', [])[0]?.label, '氢费BI');
|
||||
});
|
||||
|
||||
+9
-6
@@ -1,21 +1,23 @@
|
||||
import { lazy } from 'react';
|
||||
import {
|
||||
Activity,
|
||||
BatteryCharging,
|
||||
Fuel,
|
||||
MapPinned,
|
||||
Receipt,
|
||||
Route,
|
||||
Truck,
|
||||
Wrench,
|
||||
Wallet,
|
||||
Zap,
|
||||
} from 'lucide-react';
|
||||
import type { ModuleConfig } from '../components/Shell';
|
||||
import { canAccessEnergy, canAccessScheduling } from '../shared/auth/roles';
|
||||
import type { PathSet } from './routing';
|
||||
|
||||
const AssetsModule = lazy(() => import('../modules/assets/AssetsModule'));
|
||||
const FaultManagement = lazy(() => import('../modules/assets/faults/FaultManagement'));
|
||||
const MileageModule = lazy(() => import('../modules/mileage/MileageModule'));
|
||||
const SchedulingModule = lazy(() => import('../modules/scheduling/SchedulingModule'));
|
||||
const HydrogenModule = lazy(() => import('../modules/energy/HydrogenModule'));
|
||||
const HydrogenModule = lazy(() => import('../modules/energy/hydrogen/index'));
|
||||
const ElectricModule = lazy(() => import('../modules/energy/ElectricModule'));
|
||||
const EtcModule = lazy(() => import('../modules/energy/EtcModule'));
|
||||
const VehicleHeatmapModule = lazy(() => import('../modules/vehicle-heatmap/VehicleHeatmapModule'));
|
||||
@@ -23,6 +25,7 @@ const HydrogenHeatmapModule = lazy(() => import('../modules/hydrogen-heatmap/Hyd
|
||||
|
||||
const ASSET_MODULES: ModuleConfig[] = [
|
||||
{ id: 'assets', label: '资产管理', icon: Truck, component: AssetsModule },
|
||||
{ id: 'faults', label: '故障管理', icon: Wrench, component: FaultManagement },
|
||||
{ id: 'mileage', label: '里程管理', icon: Route, component: MileageModule },
|
||||
];
|
||||
|
||||
@@ -48,9 +51,9 @@ const SCHEDULING_MODULE: ModuleConfig = {
|
||||
};
|
||||
|
||||
const ENERGY_MODULES: ModuleConfig[] = [
|
||||
{ id: 'hydrogen', label: '氢能', icon: Fuel, component: HydrogenModule },
|
||||
{ id: 'electric', label: '电能', icon: BatteryCharging, component: ElectricModule },
|
||||
{ id: 'etc', label: 'ETC', icon: Receipt, component: EtcModule },
|
||||
{ id: 'hydrogen', label: '氢费BI', icon: Fuel, component: HydrogenModule },
|
||||
{ id: 'electric', label: '电能', icon: Zap, component: ElectricModule },
|
||||
{ id: 'etc', label: 'ETC', icon: Wallet, component: EtcModule },
|
||||
];
|
||||
|
||||
/** 根据主路径和角色生成导航；返回新数组，避免调用方修改静态注册表。 */
|
||||
|
||||
@@ -9,12 +9,15 @@ test('normalizes legacy asset paths without losing search parameters', () => {
|
||||
test('keeps canonical and hidden administration paths unchanged', () => {
|
||||
assert.equal(resolveCanonicalUrl({ pathname: '/asset', search: '', hash: '#assets' }), null);
|
||||
assert.equal(resolveCanonicalUrl({ pathname: '/admin/feedback', search: '', hash: '' }), null);
|
||||
assert.equal(resolveCanonicalUrl({ pathname: '/energy/hydrogen-board', search: '', hash: '' }), null);
|
||||
assert.equal(resolveCanonicalUrl({ pathname: '/who', search: '', hash: '' }), null);
|
||||
});
|
||||
|
||||
test('derives path groups and hidden routes from path or hash', () => {
|
||||
assert.equal(getPathSet('/energy'), 'energy');
|
||||
assert.equal(getPathSet('/energy/hydrogen-board'), 'energy');
|
||||
assert.equal(getPathSet('/asset'), 'asset');
|
||||
assert.equal(getRouteKey('/energy/hydrogen-board', ''), 'energy/hydrogen-board');
|
||||
assert.equal(getRouteKey('/asset', '#/ele/import'), 'ele/import');
|
||||
assert.equal(getRouteKey('/admin/feedback', ''), 'admin/feedback');
|
||||
assert.equal(getRouteKey('/who', ''), 'who');
|
||||
|
||||
+5
-2
@@ -5,7 +5,7 @@ interface BrowserLocation {
|
||||
search: string;
|
||||
hash: string;
|
||||
}
|
||||
const ROOT_PATHS = new Set(['/asset', '/energy', '/ele/import', '/admin/feedback', '/who']);
|
||||
const ROOT_PATHS = new Set(['/asset', '/energy', '/energy/hydrogen-board', '/ele/import', '/admin/feedback', '/who']);
|
||||
|
||||
const LEGACY_PATHS: Record<string, { path: string; hash?: string }> = {
|
||||
'/': { path: '/asset' },
|
||||
@@ -31,10 +31,13 @@ export function normalizeBrowserPath(): void {
|
||||
}
|
||||
|
||||
export function getPathSet(pathname: string): PathSet {
|
||||
return pathname === '/energy' ? 'energy' : 'asset';
|
||||
return pathname === '/energy' || pathname === '/energy/hydrogen-board' ? 'energy' : 'asset';
|
||||
}
|
||||
|
||||
export function getRouteKey(pathname: string, hash: string): string {
|
||||
if (pathname === '/energy/hydrogen-board') {
|
||||
return 'energy/hydrogen-board';
|
||||
}
|
||||
if (pathname === '/who') return 'who';
|
||||
if (pathname === '/ele/import' || hash === '#/ele/import' || hash === '#ele/import') {
|
||||
return 'ele/import';
|
||||
|
||||
@@ -0,0 +1,206 @@
|
||||
import assert from "node:assert/strict";
|
||||
import { existsSync, readFileSync, readdirSync } from "node:fs";
|
||||
import { fileURLToPath } from "node:url";
|
||||
import path from "node:path";
|
||||
import test from "node:test";
|
||||
|
||||
/**
|
||||
* 架构守护测试。
|
||||
*
|
||||
* 这些不是代码风格偏好，而是这个仓库赖以保持"能读懂"的结构约束。
|
||||
* 一旦被打破（尤其是 client/server 互相引用、shared 反向依赖上层），
|
||||
* 依赖图会重新变成无法追踪的网，所以用断言固化。
|
||||
*/
|
||||
|
||||
const srcDir = path.dirname(fileURLToPath(import.meta.url));
|
||||
|
||||
function walk(dir: string, out: string[] = []): string[] {
|
||||
for (const entry of readdirSync(dir, { withFileTypes: true })) {
|
||||
const full = path.join(dir, entry.name);
|
||||
if (entry.isDirectory()) walk(full, out);
|
||||
else if (/\.(ts|tsx|css)$/.test(entry.name)) out.push(full);
|
||||
}
|
||||
return out;
|
||||
}
|
||||
|
||||
const allFiles = walk(srcDir);
|
||||
const rel = (file: string) => path.relative(srcDir, file);
|
||||
|
||||
/** 取出文件里所有 import 说明符（含副作用 import / 动态 import / @import）。 */
|
||||
function specifiers(file: string): string[] {
|
||||
const source = readFileSync(file, "utf8");
|
||||
const found: string[] = [];
|
||||
const patterns = [
|
||||
/(?:^|[^\w$])(?:import|export)\s+[\s\S]*?\sfrom\s*['"]([^'"]+)['"]/g,
|
||||
/(?:^|[^\w$])import\s*['"]([^'"]+)['"]/g,
|
||||
/(?:^|[^\w$])import\s*\(\s*['"]([^'"]+)['"]\s*\)/g,
|
||||
/@import\s+['"]([^'"]+)['"]/g,
|
||||
];
|
||||
for (const re of patterns) {
|
||||
for (const match of source.matchAll(re)) found.push(match[1]);
|
||||
}
|
||||
return found;
|
||||
}
|
||||
|
||||
/** 把相对 import 解析为 src 下的路径（用于判断它指向哪个分区）。 */
|
||||
function targetPath(file: string, spec: string): string | null {
|
||||
if (!spec.startsWith(".")) return null;
|
||||
return path.relative(srcDir, path.resolve(path.dirname(file), spec));
|
||||
}
|
||||
|
||||
/** 去掉注释后再做 SQL 关键字匹配：注释里的 "update status" 之类不应触发守卫。 */
|
||||
function stripComments(source: string): string {
|
||||
return source.replace(/\/\*[\s\S]*?\*\//g, " ").replace(/(^|[^:])\/\/[^\n]*/g, "$1 ");
|
||||
}
|
||||
|
||||
function filesUnder(prefix: string): string[] {
|
||||
return allFiles.filter((f) => rel(f).startsWith(prefix));
|
||||
}
|
||||
|
||||
function fileContains(file: string, re: RegExp): boolean {
|
||||
return re.test(readFileSync(file, "utf8"));
|
||||
}
|
||||
|
||||
test("分层铁律：server 不得依赖前端 modules", () => {
|
||||
const violations: string[] = [];
|
||||
for (const file of filesUnder("server/")) {
|
||||
for (const spec of specifiers(file)) {
|
||||
const target = targetPath(file, spec);
|
||||
if (target && target.startsWith("modules/")) violations.push(`${rel(file)} -> ${spec}`);
|
||||
}
|
||||
}
|
||||
assert.deepEqual(violations, [], "server 必须独立于前端：请把共享内容下沉到 src/shared");
|
||||
});
|
||||
|
||||
test("分层铁律：前端不得依赖 server", () => {
|
||||
const violations: string[] = [];
|
||||
const clientDirs = ["modules/", "components/", "auth/", "app/"];
|
||||
for (const dir of clientDirs) {
|
||||
for (const file of filesUnder(dir)) {
|
||||
for (const spec of specifiers(file)) {
|
||||
const target = targetPath(file, spec);
|
||||
if (target && target.startsWith("server/")) violations.push(`${rel(file)} -> ${spec}`);
|
||||
}
|
||||
}
|
||||
}
|
||||
assert.deepEqual(violations, [], "前端不得直接引用服务端模块");
|
||||
});
|
||||
|
||||
test("分层铁律：shared 是最底层，不得反向依赖上层", () => {
|
||||
const violations: string[] = [];
|
||||
for (const file of filesUnder("shared/")) {
|
||||
for (const spec of specifiers(file)) {
|
||||
const target = targetPath(file, spec);
|
||||
if (target && (target.startsWith("modules/") || target.startsWith("server/") || target.startsWith("components/"))) {
|
||||
violations.push(`${rel(file)} -> ${spec}`);
|
||||
}
|
||||
}
|
||||
}
|
||||
assert.deepEqual(violations, [], "src/shared 必须保持为可被前后端共同依赖的叶子层");
|
||||
});
|
||||
|
||||
test("原型代码不再散落在 vendor 目录", () => {
|
||||
const violations: string[] = [];
|
||||
for (const file of allFiles) {
|
||||
for (const spec of specifiers(file)) {
|
||||
if (spec.includes("vendor/")) violations.push(`${rel(file)} -> ${spec}`);
|
||||
}
|
||||
}
|
||||
assert.deepEqual(violations, [], "生产代码应位于 src/modules 下的业务域目录，而不是 src/vendor");
|
||||
});
|
||||
|
||||
test("纯模型文件不得依赖 React（保证可被 node:test 直接测）", () => {
|
||||
const violations: string[] = [];
|
||||
for (const file of allFiles.filter((f) => /(^|\/)model\.tsx?$/.test(rel(f)))) {
|
||||
for (const spec of specifiers(file)) {
|
||||
if (spec === "react" || spec.startsWith("react/")) violations.push(`${rel(file)} -> ${spec}`);
|
||||
}
|
||||
}
|
||||
assert.deepEqual(violations, [], "model.ts 应只包含可在 Node 中直接执行的纯函数");
|
||||
});
|
||||
|
||||
test("高德 SDK 只在 shared/amap.ts 接入", () => {
|
||||
// 两个热力图曾各自写一份 load + 底图 + 控件 + 色带，导致同类地图长得不一样。
|
||||
const importers = allFiles
|
||||
.filter((f) => rel(f) !== "shared/amap.ts")
|
||||
.filter((f) => specifiers(f).some((s) => s === "@amap/amap-jsapi-loader"))
|
||||
.map(rel);
|
||||
assert.deepEqual(importers, [], "请通过 src/shared/amap.ts 使用高德地图，不要各自加载 SDK");
|
||||
});
|
||||
|
||||
test("Excel 导出只在 shared/xlsx.ts 组装工作簿", () => {
|
||||
// 允许 server 侧直接读 xlsx（导入解析），但不允许前端再次自行拼装 workbook。
|
||||
const offenders = allFiles
|
||||
.filter((f) => rel(f).startsWith("modules/"))
|
||||
.filter((f) => {
|
||||
const source = readFileSync(f, "utf8");
|
||||
return /book_new|book_append_sheet|writeFile\(/.test(source);
|
||||
})
|
||||
.map(rel);
|
||||
assert.deepEqual(offenders, [], "请改用 src/shared/xlsx.ts 的 writeWorkbook / export*Sheet");
|
||||
});
|
||||
|
||||
test("类型豁免清单只减不增：@ts-nocheck 仅限已登记的 8113 原型快照", () => {
|
||||
// 这三个文件是逐字节保留的验收原型（UI/CSS 冻结），显式登记为唯一豁免。
|
||||
const allowed = [
|
||||
"modules/energy/hydrogen/board/EnergyBiBoardApp.tsx",
|
||||
"modules/energy/hydrogen/station-daily/StationDailyApp.tsx",
|
||||
"modules/energy/hydrogen/station-daily/StationDailyDetailView.tsx",
|
||||
];
|
||||
const actual = allFiles.filter((f) => fileContains(f, /^\/\/\s*@ts-nocheck/m)).map(rel).sort();
|
||||
assert.deepEqual(actual, [...allowed].sort(), "新增 @ts-nocheck 会让类型门禁失效，请改为修正类型");
|
||||
});
|
||||
|
||||
test("运行时 DDL 只允许出现在 server/db/schema", () => {
|
||||
// 建表原先散落在路由与 store 里，且由 GET 触发，使"只读预览"仍可能写库。
|
||||
const offenders = allFiles
|
||||
.filter((f) => rel(f).startsWith("server/") && !rel(f).startsWith("server/db/schema/"))
|
||||
.filter((f) => !rel(f).endsWith(".test.ts"))
|
||||
.filter((f) => /CREATE TABLE|ALTER TABLE/.test(readFileSync(f, "utf8")))
|
||||
.map(rel);
|
||||
assert.deepEqual(offenders, [], "请把建表/改表语句集中到 src/server/db/schema/");
|
||||
});
|
||||
|
||||
test("运行时建表必须尊重只读模式", () => {
|
||||
const schemaFiles = allFiles.filter((f) => rel(f).startsWith("server/db/schema/") && rel(f) !== "server/db/schema/guard.ts");
|
||||
const offenders = schemaFiles
|
||||
.filter((f) => !readFileSync(f, "utf8").includes("ddlAllowed()"))
|
||||
.map(rel);
|
||||
assert.deepEqual(offenders, [], "每个 schema 模块都要在 DB_READ_ONLY=1 时跳过 DDL");
|
||||
});
|
||||
|
||||
test("已完整分层的域：repository.ts 存在，且 SQL 只允许出现在那里", () => {
|
||||
// 这些域已完成 routes / repository / model 拆分；其余域仍把 SQL 放在路由里
|
||||
// （见 docs/ARCHITECTURE.md 的"后端业务域形状"表）。
|
||||
const layered = [
|
||||
"server/routes/vehicles",
|
||||
"server/routes/ele",
|
||||
"server/routes/feedback",
|
||||
"server/routes/vehicle-heatmap",
|
||||
"server/routes/hydrogen-heatmap",
|
||||
"server/routes/scheduling",
|
||||
"server/routes/energy",
|
||||
"server/routes/mileage",
|
||||
];
|
||||
// 用"语句形状"而不是裸关键字：UpdateNotification 或 "update error" 这类标识符/日志
|
||||
// 不应误判，而小写 SQL 也依然能被抓到。
|
||||
const SQL = /\bselect\b[\s\S]{0,400}?\bfrom\b|\binsert\s+(into|ignore)\b|\bupdate\s+[\w.`]+\s+set\b|\bdelete\s+from\b|\bcreate\s+table\b|\balter\s+table\b/i;
|
||||
const offenders: string[] = [];
|
||||
for (const dir of layered) {
|
||||
const abs = path.join(srcDir, dir);
|
||||
if (!existsSync(path.join(abs, "repository.ts"))) {
|
||||
offenders.push(`${dir}/repository.ts 缺失`);
|
||||
continue;
|
||||
}
|
||||
for (const file of readdirSync(abs)) {
|
||||
if (!file.endsWith(".ts")) continue;
|
||||
// repository.ts 是 SQL 的归属地；constants.ts 允许存放被多条查询共享的
|
||||
// SQL 片段（如公共 WHERE / CTE），否则这些片段会被迫复制到每个查询里。
|
||||
if (file === "repository.ts" || file === "constants.ts" || file.endsWith(".test.ts")) continue;
|
||||
if (SQL.test(stripComments(readFileSync(path.join(abs, file), "utf8")))) {
|
||||
offenders.push(`${dir}/${file} 仍含 SQL`);
|
||||
}
|
||||
}
|
||||
}
|
||||
assert.deepEqual(offenders, [], "SQL 必须留在各域的 repository.ts");
|
||||
});
|
||||
@@ -5,6 +5,7 @@ import { setTokenGetter, setPreviewTokenGetter, invalidateAuthenticatedRequests,
|
||||
const AUTH_API = '/api/auth';
|
||||
|
||||
export default function AuthProvider({ children }: { children: ReactNode }) {
|
||||
const [mode, setMode] = useState<'sso' | 'password'>('sso');
|
||||
const [state, setState] = useState<AuthState>({
|
||||
isLoading: true,
|
||||
isAuthenticated: false,
|
||||
@@ -140,8 +141,19 @@ export default function AuthProvider({ children }: { children: ReactNode }) {
|
||||
}, []);
|
||||
|
||||
async function authenticate() {
|
||||
let currentMode: 'sso' | 'password';
|
||||
try {
|
||||
const response = await fetch(`${AUTH_API}/config`, { cache: 'no-store' });
|
||||
const config = await response.json();
|
||||
if (!response.ok || !['sso', 'password'].includes(config.mode)) throw new Error();
|
||||
currentMode = config.mode;
|
||||
setMode(currentMode);
|
||||
} catch {
|
||||
setState({ isLoading: false, isAuthenticated: false, user: null, error: '无法获取验证配置，请刷新重试' });
|
||||
return;
|
||||
}
|
||||
// 本地开发免登录开关：.env 里设 VITE_DEV_BYPASS_AUTH=1 启用，仅 dev 生效
|
||||
if (import.meta.env.DEV && import.meta.env.VITE_DEV_BYPASS_AUTH === '1') {
|
||||
if (currentMode === 'sso' && import.meta.env.DEV && import.meta.env.VITE_DEV_BYPASS_AUTH === '1') {
|
||||
const devUser: AuthUser = {
|
||||
userId: 'dev-local',
|
||||
userName: '本地开发',
|
||||
@@ -163,7 +175,7 @@ export default function AuthProvider({ children }: { children: ReactNode }) {
|
||||
tokenRef.current = savedToken;
|
||||
// 从受保护的身份接口验证 JWT；不使用本地缓存用户决定权限。
|
||||
try {
|
||||
const res = await fetch('/api/auth/me', {
|
||||
const res = await fetch(`${AUTH_API}/me`, {
|
||||
headers: { Authorization: `Bearer ${savedToken}` },
|
||||
});
|
||||
if (res.ok) {
|
||||
@@ -179,6 +191,11 @@ export default function AuthProvider({ children }: { children: ReactNode }) {
|
||||
sessionStorage.removeItem('bi_user');
|
||||
}
|
||||
|
||||
if (currentMode === 'password') {
|
||||
setState({ isLoading: false, isAuthenticated: false, user: null, error: null });
|
||||
return;
|
||||
}
|
||||
|
||||
// 2. 从 URL 提取 jumpToken
|
||||
const params = new URLSearchParams(window.location.search);
|
||||
const jumpToken = params.get('jumpToken');
|
||||
@@ -216,8 +233,18 @@ export default function AuthProvider({ children }: { children: ReactNode }) {
|
||||
}
|
||||
}
|
||||
|
||||
async function loginWithPassword(password: string) {
|
||||
const response = await fetch(`${AUTH_API}/password`, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ password }) });
|
||||
const data = await response.json();
|
||||
if (!response.ok || !data.token) throw new Error(data.message || '登录失败');
|
||||
tokenRef.current = data.token;
|
||||
sessionStorage.setItem('bi_jwt', data.token);
|
||||
sessionStorage.setItem('bi_user', JSON.stringify(data.user));
|
||||
await finishAuthentication(data.user);
|
||||
}
|
||||
|
||||
return (
|
||||
<AuthContext.Provider value={{ ...state, actor: actorRef.current || state.user,
|
||||
<AuthContext.Provider value={{ ...state, mode, loginWithPassword, actor: actorRef.current || state.user,
|
||||
user: preview?.user || state.user, preview, canPreview, identityVersion, previewNotice,
|
||||
startPreview, stopPreview, clearPreviewNotice: () => setPreviewNotice(null) }}>
|
||||
{children}
|
||||
|
||||
@@ -0,0 +1,25 @@
|
||||
import { useState } from 'react';
|
||||
import { useAuth } from './useAuth';
|
||||
|
||||
export default function PasswordLogin() {
|
||||
const { loginWithPassword, error: sessionError } = useAuth();
|
||||
const [password, setPassword] = useState('');
|
||||
const [error, setError] = useState('');
|
||||
const [busy, setBusy] = useState(false);
|
||||
return <main className="min-h-screen flex items-center justify-center bg-slate-950 p-6">
|
||||
<form className="w-full max-w-sm rounded-2xl bg-white p-7 shadow-xl" onSubmit={async event => {
|
||||
event.preventDefault(); if (busy || !loginWithPassword) return;
|
||||
setBusy(true); setError('');
|
||||
try { await loginWithPassword(password); } catch (e) { setError(e instanceof Error ? e.message : '登录失败，请重试'); }
|
||||
finally { setBusy(false); setPassword(''); }
|
||||
}}>
|
||||
<p className="text-xs font-semibold text-blue-600">羚牛 · 能源 BI</p>
|
||||
<h1 className="mt-2 text-2xl font-bold text-slate-900">访问看板</h1>
|
||||
<p className="mt-2 mb-6 text-sm text-slate-500">请输入管理员提供的访问密码。此入口仅提供只读访问。</p>
|
||||
<label htmlFor="bi-password" className="text-sm font-medium text-slate-700">访问密码</label>
|
||||
<input id="bi-password" type="password" autoComplete="current-password" required maxLength={1024} value={password} onChange={e => setPassword(e.target.value)} className="mt-2 w-full rounded-lg border border-slate-300 px-3 py-3 text-base focus:outline-blue-600" />
|
||||
{error || sessionError ? <p role="alert" className="mt-3 text-sm text-red-600">{error || sessionError}</p> : null}
|
||||
<button disabled={busy || !password} className="mt-5 min-h-11 w-full rounded-lg bg-blue-600 px-4 py-3 font-semibold text-white disabled:opacity-50">{busy ? '正在验证…' : '进入看板'}</button>
|
||||
</form>
|
||||
</main>;
|
||||
}
|
||||
@@ -10,6 +10,8 @@ export interface AuthUser {
|
||||
roles?: string[];
|
||||
}
|
||||
export interface AuthState {
|
||||
mode?: 'sso' | 'password';
|
||||
loginWithPassword?: (password: string) => Promise<void>;
|
||||
isLoading: boolean;
|
||||
isAuthenticated: boolean;
|
||||
user: AuthUser | null;
|
||||
|
||||
@@ -1,17 +0,0 @@
|
||||
import { createContext, useContext, type ReactNode } from 'react';
|
||||
|
||||
const DemoModeContext = createContext(false);
|
||||
|
||||
export function DemoModeProvider({ enabled, children }: { enabled: boolean; children: ReactNode }) {
|
||||
return <DemoModeContext.Provider value={enabled}>{children}</DemoModeContext.Provider>;
|
||||
}
|
||||
|
||||
export function useDemoMode() {
|
||||
return useContext(DemoModeContext);
|
||||
}
|
||||
|
||||
export default function Blur({ children }: { children: ReactNode }) {
|
||||
const demo = useContext(DemoModeContext);
|
||||
if (!demo) return <>{children}</>;
|
||||
return <span className="blur-[5px] select-none">{children}</span>;
|
||||
}
|
||||
+21
-11
@@ -1,8 +1,7 @@
|
||||
import { useState, useEffect, useMemo, type ComponentType, type ElementType, Suspense } from 'react';
|
||||
import { motion } from 'motion/react';
|
||||
import { Building2, ChevronRight, ShieldCheck } from 'lucide-react';
|
||||
import { Building2, ChevronRight } from 'lucide-react';
|
||||
import { useAuth } from '../auth/useAuth';
|
||||
import { DemoModeProvider } from './Blur';
|
||||
import { cn } from '../lib/cn';
|
||||
import { LoadingState } from './ui/surface';
|
||||
|
||||
@@ -82,23 +81,31 @@ export function Shell({ modules }: { modules: ModuleConfig[] }) {
|
||||
|
||||
const { user } = useAuth();
|
||||
const activeLabel = flatModules.find((module) => module.id === activeModule)?.label ?? '业务看板';
|
||||
const isHydrogenPrototype = activeModule === 'hydrogen';
|
||||
// 水印时间戳随会话推进刷新，避免长时间停留后时间失真。
|
||||
const [watermarkNow, setWatermarkNow] = useState(() => Date.now());
|
||||
useEffect(() => {
|
||||
const timer = window.setInterval(() => setWatermarkNow(Date.now()), 30000);
|
||||
return () => window.clearInterval(timer);
|
||||
}, []);
|
||||
const watermarkText = useMemo(() => {
|
||||
const name = user?.userName || '未登录';
|
||||
const time = new Date().toLocaleString('zh-CN', { year: 'numeric', month: '2-digit', day: '2-digit', hour: '2-digit', minute: '2-digit', second: '2-digit', hour12: false }).replace(/\//g, '-');
|
||||
const time = new Date(watermarkNow).toLocaleString('zh-CN', { year: 'numeric', month: '2-digit', day: '2-digit', hour: '2-digit', minute: '2-digit', second: '2-digit', hour12: false }).replace(/\//g, '-');
|
||||
return `${name}-${time}`;
|
||||
}, [user]);
|
||||
}, [user, watermarkNow]);
|
||||
|
||||
return (
|
||||
<DemoModeProvider enabled={false}>
|
||||
<div className="app-shell enterprise-grid-bg flex min-h-screen">
|
||||
{/* 全局水印 */}
|
||||
{/* 氢费看板按原型交付；其他模块继续保留全局水印。 */}
|
||||
{!isHydrogenPrototype ? (
|
||||
<div className="fixed inset-0 pointer-events-none z-[9999] overflow-hidden" style={{ opacity: 0.06 }}>
|
||||
<div className="absolute inset-0" style={{
|
||||
backgroundImage: `url("data:image/svg+xml,${encodeURIComponent(`<svg xmlns='http://www.w3.org/2000/svg' width='320' height='200'><text x='50%' y='50%' text-anchor='middle' dominant-baseline='middle' font-size='14' font-family='sans-serif' fill='%23000' transform='rotate(-25 160 100)'>${watermarkText}</text></svg>`)}")`,
|
||||
backgroundRepeat: 'repeat',
|
||||
}} />
|
||||
</div>
|
||||
{/* Web 侧边栏 (md 及以上) */}
|
||||
) : null}
|
||||
{/* Web 侧边栏 (md 及以上)：能源各模块使用同一套规格，以电能为基准。 */}
|
||||
<nav className="fixed left-0 top-0 z-50 hidden h-full w-20 flex-col items-center border-r border-white/10 bg-slate-950 px-2 py-4 text-white shadow-[12px_0_40px_rgba(15,23,42,0.16)] md:flex">
|
||||
<div className="mb-5 flex h-12 w-12 items-center justify-center rounded-2xl bg-white text-blue-600 shadow-lg shadow-blue-950/20">
|
||||
<Building2 size={22} />
|
||||
@@ -117,7 +124,8 @@ export function Shell({ modules }: { modules: ModuleConfig[] }) {
|
||||
aria-expanded={isGroup ? isOpen : undefined}
|
||||
aria-haspopup={isGroup ? 'menu' : undefined}
|
||||
className={cn(
|
||||
'group relative flex h-16 w-16 flex-col items-center justify-center rounded-2xl text-[10px] font-black transition-all',
|
||||
'group relative flex flex-col items-center justify-center transition-all',
|
||||
'h-16 w-16 rounded-2xl text-[10px] font-black',
|
||||
isActive ? 'text-white' : 'text-slate-400 hover:bg-white/8 hover:text-white',
|
||||
)}
|
||||
title={m.label}
|
||||
@@ -148,7 +156,9 @@ export function Shell({ modules }: { modules: ModuleConfig[] }) {
|
||||
</div>
|
||||
<div className="flex w-full flex-col items-center gap-2 border-t border-white/10 pt-3">
|
||||
<div className="flex h-10 w-10 items-center justify-center rounded-xl bg-emerald-400/10 text-emerald-300 ring-1 ring-emerald-300/20" title={user?.userName || '当前用户'}>
|
||||
<ShieldCheck size={18} />
|
||||
<svg width="28" height="22" viewBox="4 3 44 30" role="img" aria-label="羚牛 Logo">
|
||||
<image href="/lingniu-logo-light.svg" width="150" height="36" style={{ filter: 'brightness(0) invert(1)' }} />
|
||||
</svg>
|
||||
</div>
|
||||
<div className="max-w-16 truncate text-center text-[9px] font-bold text-slate-400">{user?.userName || '未登录'}</div>
|
||||
</div>
|
||||
@@ -156,15 +166,16 @@ export function Shell({ modules }: { modules: ModuleConfig[] }) {
|
||||
|
||||
{/* 内容区 */}
|
||||
<main className="app-shell-content min-w-0 flex-1 pb-16 md:ml-20 md:pb-0" style={{ overflowX: 'clip' }}>
|
||||
{!isHydrogenPrototype && (
|
||||
<div className="pointer-events-none fixed left-20 right-0 top-0 z-20 hidden h-12 items-center border-b border-white/60 bg-white/55 px-6 text-xs font-bold text-slate-400 backdrop-blur-xl md:flex">
|
||||
<span className="text-slate-600">羚牛氢能 BI</span>
|
||||
<span className="mx-2 text-slate-300">/</span>
|
||||
<span>{activeLabel}</span>
|
||||
</div>
|
||||
)}
|
||||
<Suspense fallback={<div className="p-3 md:p-6"><LoadingState label="正在加载业务模块" /></div>}>
|
||||
{ActiveComponent && <ActiveComponent />}
|
||||
</Suspense>
|
||||
|
||||
</main>
|
||||
|
||||
{/* 移动端底部导航 (md 以下) */}
|
||||
@@ -209,6 +220,5 @@ export function Shell({ modules }: { modules: ModuleConfig[] }) {
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
</DemoModeProvider>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -0,0 +1,14 @@
|
||||
import assert from "node:assert/strict";
|
||||
import test from "node:test";
|
||||
import { BUSINESS_QUESTIONS } from "../modules/assets/assistant/conversation-presentation.js";
|
||||
import { localPlan } from "../server/routes/asset-assistant/planner.js";
|
||||
import { projectQuestion } from "../server/routes/asset-assistant/privacy.js";
|
||||
|
||||
test("business starters produce supported queries matching their promises even without a language model",()=>{
|
||||
const plans=BUSINESS_QUESTIONS.map(question=>localPlan(projectQuestion(question,[])).plan);
|
||||
assert.equal(plans[0].analysis,"briefing");assert.equal(plans[0].category,"all");
|
||||
assert.equal(plans[1].category,"inventory");
|
||||
assert.deepEqual(new Set([plans[1].groupBy,plans[1].secondaryGroupBy]),new Set(["type","region"]));
|
||||
assert.equal(plans[2].kind,"flow");assert.equal(Date.parse(plans[2].end!)-Date.parse(plans[2].start!),6*86400000);
|
||||
assert.equal(plans[3].category,"abnormal");assert.equal(plans[3].view,"list");
|
||||
});
|
||||
@@ -0,0 +1,77 @@
|
||||
import assert from 'node:assert/strict';
|
||||
import test from 'node:test';
|
||||
import { mapFault, faultHandlers } from '../server/routes/asset-faults/model.js';
|
||||
import type { FaultAnalysisRecord, FaultOption } from '../shared/assets/faults';
|
||||
import { analyzeFaultRecords, filterFaultRecords, faultDimensionValues, faultParentTotals, FAULT_ANALYSIS_DIMENSIONS, FAULT_ANALYSIS_LABELS } from '../modules/assets/faults/analysis-model.js';
|
||||
function fault(id: string, handlers: FaultOption[], manager = '客户业务经理', city = '上海市'): FaultAnalysisRecord {
|
||||
const row = mapFault({ id, business_manager: manager, city_name: city }, new Map());
|
||||
return { ...row, handlers, cell: row.assetCell };
|
||||
}
|
||||
const a = { value: 'id:1234567890123456789', label: '处置甲' };
|
||||
const b = { value: 'id:2234567890123456789', label: '处置乙' };
|
||||
const data = [fault('shared', [a, b, a]), fault('single', [a]), fault('none', [])];
|
||||
|
||||
test('运维处置人是独立维度，未分配不以业务负责人兜底', () => {
|
||||
assert.ok(FAULT_ANALYSIS_DIMENSIONS.includes('handler')); assert.ok(FAULT_ANALYSIS_DIMENSIONS.includes('manager'));
|
||||
assert.equal(FAULT_ANALYSIS_LABELS.handler, '运维处置人');
|
||||
assert.deepEqual(faultDimensionValues(data[0], 'handler'), [a.value, b.value]);
|
||||
assert.deepEqual(faultDimensionValues(data[0], 'manager'), ['客户业务经理']);
|
||||
assert.deepEqual(faultDimensionValues(data[2], 'handler'), ['unassigned']);
|
||||
assert.deepEqual(faultHandlers({ business_manager: '客户业务经理' }, new Map()), [{ value: 'unassigned', label: '未指派' }]);
|
||||
});
|
||||
test('多人各自成组，总数和组内明细按故障ID去重，父级小计取并集', () => {
|
||||
const result = analyzeFaultRecords([...data, data[0]], ['city', 'handler']);
|
||||
assert.equal(result.total, 3);
|
||||
assert.equal(result.rows.find(row => row.values.handler === a.value)?.count, 2);
|
||||
assert.equal(result.rows.find(row => row.values.handler === b.value)?.count, 1);
|
||||
assert.equal(result.rows.reduce((n, row) => n + row.count, 0), 4);
|
||||
assert.ok(faultParentTotals(result.rows, ['city', 'handler']).every(row => row[0] === 3));
|
||||
for (const group of result.rows) assert.equal(new Set(group.recordIds).size, group.count);
|
||||
});
|
||||
test('多选处置人取并集，不分组时不放大；筛选甲后不出现共享故障的乙分组', () => {
|
||||
assert.equal(filterFaultRecords(data, { handler: [a.value, b.value] }).length, 2);
|
||||
assert.equal(analyzeFaultRecords(data, ['city'], { handler: [a.value, b.value] }).rows[0].count, 2);
|
||||
const result = analyzeFaultRecords(data, ['handler'], { handler: [a.value] });
|
||||
assert.equal(result.total, 2); assert.equal(result.rows.length, 1); assert.equal(result.rows[0].values.handler, a.value);
|
||||
assert.equal(filterFaultRecords(data, { handler: [a.value], manager: ['其他业务经理'] }).length, 0);
|
||||
assert.equal(filterFaultRecords(data, { handler: ['unassigned'] })[0].id, 'none');
|
||||
});
|
||||
test('同名处置人保持ID独立，组合筛选与组明细对应，空数据安全', () => {
|
||||
const rows = [fault('one', [{ ...a, label: '同名' }]), fault('two', [{ ...b, label: '同名' }])];
|
||||
const result = analyzeFaultRecords(rows, ['manager', 'handler']);
|
||||
assert.equal(result.rows.length, 2);
|
||||
for (const group of result.rows) {
|
||||
const matched = filterFaultRecords(rows, { manager: [group.values.manager!], handler: [group.values.handler!] });
|
||||
assert.deepEqual(matched.map(row => row.id), group.recordIds);
|
||||
}
|
||||
assert.deepEqual(analyzeFaultRecords([], ['handler']), { total: 0, rows: [] });
|
||||
});
|
||||
|
||||
|
||||
test('故障工单状态按归档闭环，与车辆运营状态独立；组合分组、筛选和去重口径一致', () => {
|
||||
const states = ['已归档', '待处理', '处理中', '挂起', '未知状态'];
|
||||
const rows = states.map((status, i) => ({ ...fault(String(i), i === 0 ? [a, b] : [a]), status }));
|
||||
assert.deepEqual(rows.map(row => faultDimensionValues(row, 'faultStatus')), [['closed'], ['unclosed'], ['unclosed'], ['unclosed'], ['unclosed']]);
|
||||
const result = analyzeFaultRecords(rows, ['handler', 'faultStatus']);
|
||||
assert.equal(result.total, 5);
|
||||
assert.equal(result.rows.find(row => row.values.handler === a.value && row.values.faultStatus === 'closed')?.count, 1);
|
||||
assert.equal(result.rows.find(row => row.values.handler === a.value && row.values.faultStatus === 'unclosed')?.count, 4);
|
||||
const parentTotals = faultParentTotals(result.rows, ['handler', 'faultStatus']);
|
||||
result.rows.forEach((row, i) => assert.equal(parentTotals[i][0], row.values.handler === a.value ? 5 : 1));
|
||||
assert.deepEqual(filterFaultRecords(rows, { faultStatus: ['closed'], handler: [a.value, b.value] }).map(row => row.id), ['0']);
|
||||
assert.equal(filterFaultRecords(rows, { faultStatus: ['closed', 'unclosed'] }).length, 5);
|
||||
assert.deepEqual(filterFaultRecords(rows, { faultStatus: ['unclosed'], handler: [b.value] }), []);
|
||||
for (const group of result.rows) assert.deepEqual(filterFaultRecords(rows, { handler: [group.values.handler!], faultStatus: [group.values.faultStatus!] }).map(row => row.id), group.recordIds);
|
||||
});
|
||||
|
||||
|
||||
test('车牌位于第三个维度，同车多故障按单计数，支持组合筛选和缺失车牌', () => {
|
||||
assert.equal(FAULT_ANALYSIS_DIMENSIONS[2], 'plate');
|
||||
const rows = [{ ...fault('1', [a]), plate: '沪A12345' }, { ...fault('2', [b]), plate: '沪A12345' }, { ...fault('3', [a]), plate: '粤A12345' }, { ...fault('4', []), plate: '' }];
|
||||
const grouped = analyzeFaultRecords(rows, ['plate']);
|
||||
assert.equal(grouped.total, 4);
|
||||
assert.equal(grouped.rows.find(row => row.values.plate === '沪A12345')?.count, 2);
|
||||
assert.deepEqual(filterFaultRecords(rows, { plate: ['沪A12345'], handler: [b.value] }).map(row => row.id), ['2']);
|
||||
assert.equal(filterFaultRecords(rows, { plate: ['沪A12345', '粤A12345'] }).length, 3);
|
||||
assert.deepEqual(filterFaultRecords(rows, { plate: ['未关联车辆'] }).map(row => row.id), ['4']);
|
||||
});
|
||||
@@ -0,0 +1,194 @@
|
||||
import assert from 'node:assert/strict';
|
||||
import test from 'node:test';
|
||||
import { Hono } from 'hono';
|
||||
import { analyzeFaults, faultAnalysis, faultHandlers, faultInventory, mapFault, normalizeFaultStatus, parseFaultQuery, visibleFaults, type ScopedFault } from '../server/routes/asset-faults/model.js';
|
||||
import { createFaultRouter } from '../server/routes/asset-faults/index.js';
|
||||
import type { AuthUser } from '../server/auth/types.js';
|
||||
|
||||
const full: AuthUser = { userId: 'm1', userName: 'User', loginName: 'user', depCode: '', depName: '业务一部', permissionLevel: 'full', roles: [] };
|
||||
function fault(id: string, overrides: Partial<ScopedFault> = {}): ScopedFault {
|
||||
return { assetCell: mapFault({ id }, new Map()).assetCell, id, code: id, plate: '测试车', description: '', reportedAt: '2026-10-01 12:00:00', archivedAt: null, deadlineAt: null, receivedAt: null,
|
||||
city: '广州市', status: '待处理', inventory: '不适用', customer: 'customer1', customerLabel: '测试***户', department: '业务一部',
|
||||
handlers: [{ value: 'id:1', label: '甲' }], subject: 'A', departmentName: '业务一部', managerId: 'm1', missingVehicle: false, ...overrides };
|
||||
}
|
||||
const query = (params: Record<string, string> = {}) => parseFaultQuery({ start: '2026-10-13', end: '2026-10-13', ...params });
|
||||
|
||||
test('跨日完结独立于提报日期，全部挂单不受日期筛选影响，挂起和审核中均未闭环', () => {
|
||||
const rows = [fault('old'), fault('suspended', { status: '挂起' }), fault('review', { status: '处理中' }),
|
||||
fault('closed', { status: '已归档', archivedAt: '2026-10-13 00:00:00' }),
|
||||
fault('new', { reportedAt: '2026-10-13 23:59:59' }), fault('tomorrow', { status: '已归档', archivedAt: '2026-10-14 00:00:00' })];
|
||||
const result = analyzeFaults(rows, query(), 'now');
|
||||
assert.deepEqual(result.totals, { reported: 1, closed: 1, open: 4 });
|
||||
assert.equal(result.details.total, 4);
|
||||
assert.deepEqual(result.daily, [{ date: '2026-10-13', reported: 1, closed: 1 }]);
|
||||
assert.equal(analyzeFaults(rows, query({ start: '2025-01-01', end: '2025-01-02', day: '2025-01-01' }), 'now').totals.open, 4);
|
||||
assert.equal(analyzeFaults(rows, query({ metric: 'closed' }), 'now').details.rows[0].id, 'closed');
|
||||
});
|
||||
|
||||
test('多人负责按人员计单，总计去重；人员筛选与人员分组下钻一致', () => {
|
||||
const row = fault('shared', { handlers: [{ value: 'id:1', label: '甲' }, { value: 'id:2', label: '乙' }] });
|
||||
const result = analyzeFaults([row], query({ groupBy: 'handler' }), 'now');
|
||||
assert.equal(result.totals.open, 1); assert.equal(result.groups.reduce((sum, r) => sum + r.open, 0), 2);
|
||||
assert.equal(analyzeFaults([row], query({ handler: 'id:2' }), 'now').details.total, 1);
|
||||
assert.equal(analyzeFaults([row], query({ groupBy: 'handler', groupValue: 'id:2' }), 'now').details.total, 1);
|
||||
});
|
||||
|
||||
test('处置人优先来源任务工单，兼容历史姓名，保留 BIGINT 精度并去重', () => {
|
||||
const directory = new Map([['1234567890123456789', '当前姓名']]);
|
||||
const row = { work_ids: '[1234567890123456789,1234567890123456789]', work_names: '["旧名","旧名"]', handler_id: '2', handler_name: '非当前处置人' };
|
||||
assert.deepEqual(faultHandlers(row, directory), [{ value: 'id:1234567890123456789', label: '当前姓名' }]);
|
||||
assert.deepEqual(faultHandlers({ work_names: '["历史姓名"]', handler_id: '2' }, directory), [{ value: 'name:历史姓名', label: '历史姓名' }]);
|
||||
assert.deepEqual(faultHandlers({ handler_ids: 'bad-json', handler_id: '99' }, directory), [{ value: 'id:99', label: '历史处理人(99)' }]);
|
||||
assert.deepEqual(faultHandlers({ handler_ids: '[99,99]', handler_names: '["历史[123]","另一姓名"]' }, directory), [{ value: 'id:99', label: '历史[123]' }]);
|
||||
assert.deepEqual(faultHandlers({}, directory), [{ value: 'unassigned', label: '未指派' }]);
|
||||
});
|
||||
|
||||
test('库存先判断运营状态，再细分；未知状态不自动计为归档', () => {
|
||||
assert.equal(faultInventory('1', '14', true), '不适用');
|
||||
assert.equal(faultInventory('3', '14', true), '异动');
|
||||
assert.equal(faultInventory('4', '4', true), '待交车');
|
||||
assert.equal(faultInventory('3', '2', true), '可运营');
|
||||
assert.equal(faultInventory('4', '2', true), '待运营');
|
||||
assert.equal(faultInventory('5', '2', true), '不适用');
|
||||
assert.equal(faultInventory(null, null, false), '未知');
|
||||
assert.equal(normalizeFaultStatus('待处置'), '待处理');
|
||||
assert.equal(normalizeFaultStatus('已挂起'), '挂起');
|
||||
assert.equal(analyzeFaults([fault('odd', { status: '其他状态' })], query(), 'now').totals.open, 0);
|
||||
});
|
||||
|
||||
test('缺失车辆和日期保留总量及可用归档事件，客户名称脱敏且不传递服务端权限字段', () => {
|
||||
const row = mapFault({ id: 'lost', fault_code: 'F', customer_name: '需要脱敏的客户名称', handling_status: '已归档', archived_at: '2026-10-13 08:00:00' }, new Map());
|
||||
const result = analyzeFaults([row], query({ metric: 'closed' }), 'now');
|
||||
assert.deepEqual(result.totals, { reported: 0, closed: 1, open: 0 });
|
||||
assert.equal(result.quality.missingReport, 1); assert.equal(result.quality.missingVehicle, 1);
|
||||
assert.equal(result.details.rows[0].city, '未知');
|
||||
assert.ok(!JSON.stringify(result).includes('需要脱敏的客户名称'));
|
||||
assert.ok(!('managerId' in result.details.rows[0]));
|
||||
});
|
||||
|
||||
test('故障历史使用严格人员/部门权限，库存不放宽；全权限保留失联车辆', () => {
|
||||
const rows = [fault('mine'), fault('private', { managerId: 'm2', departmentName: '其他部', department: '其他部', inventory: '可运营' }), fault('lost', { managerId: '', departmentName: '', missingVehicle: true })];
|
||||
assert.equal(visibleFaults(rows, full).length, 3);
|
||||
assert.deepEqual(visibleFaults(rows, { ...full, permissionLevel: 'personal' }).map(r => r.id), ['mine']);
|
||||
assert.deepEqual(visibleFaults(rows, { ...full, permissionLevel: 'department' }).map(r => r.id), ['mine']);
|
||||
assert.equal(visibleFaults(rows, { ...full, permissionLevel: 'department', depName: '' }).length, 0);
|
||||
assert.equal(visibleFaults(rows, full, 'B').length, 0);
|
||||
});
|
||||
|
||||
test('日期合法性、范围限制和分页边界', () => {
|
||||
const invalid: Record<string, string>[] = [{ start: '2026-02-30' }, { start: '2027-01-01' }, { start: '2023-01-01' }, { page: '-1' }, { groupBy: '__proto__' }, { metric: 'unknown' }, { day: '2026-10-14' }];
|
||||
for (const params of invalid) assert.throws(() => query(params));
|
||||
const rows = Array.from({ length: 51 }, (_, i) => fault(String(i)));
|
||||
const result = analyzeFaults(rows, query({ page: '99' }), 'now');
|
||||
assert.equal(result.details.page, 2); assert.equal(result.details.rows.length, 1);
|
||||
});
|
||||
|
||||
test('API 在汇总、筛选项和明细前应用权限，未认证和无效日期不查询数据库', async () => {
|
||||
let calls = 0;
|
||||
const router = createFaultRouter(async () => { calls++; return { updatedAt: 'now', rows: [fault('mine'), fault('secret', { managerId: 'm2', city: '保密城市' })] }; });
|
||||
assert.equal((await router.request('/')).status, 401); assert.equal(calls, 0);
|
||||
const app = new Hono<{ Variables: { user: AuthUser } }>();
|
||||
app.use('*', async (c, next) => { c.set('user', { ...full, permissionLevel: 'personal' }); await next(); });
|
||||
app.route('/faults', router);
|
||||
assert.equal((await app.request('/faults?start=bad')).status, 400); assert.equal(calls, 0);
|
||||
const response = await app.request('/faults?start=2026-10-13&end=2026-10-13');
|
||||
assert.equal(response.status, 200); assert.equal(response.headers.get('Cache-Control'), 'no-store');
|
||||
const body = await response.json(); assert.equal(body.totals.open, 1); assert.ok(!JSON.stringify(body).includes('保密城市'));
|
||||
});
|
||||
|
||||
test('四个总指标使用北京时间自然日，全部台账包含未知状态和无日期故障', async () => {
|
||||
const { faultOverview, faultAnalysis } = await import('../server/routes/asset-faults/model.js');
|
||||
const rows = [fault('old'), fault('today', { reportedAt: '2026-10-14 00:00:00' }),
|
||||
fault('closed', { status: '已归档', archivedAt: '2026-10-14 23:59:59' }),
|
||||
fault('unknown', { status: '未知状态', reportedAt: null, missingVehicle: true })];
|
||||
const at = '2026-10-13T16:00:00Z';
|
||||
const summary = faultOverview(rows, at);
|
||||
assert.equal(summary.date, '2026-10-14');
|
||||
assert.deepEqual(summary.totals, { reported: 1, closed: 1, open: 2, waiting: 2, processing: 0, suspended: 0, overdue: 0, ledger: 4 });
|
||||
for (const metric of ['reported', 'closed', 'open', 'ledger'] as const) {
|
||||
const analysis = faultAnalysis(rows, metric, at);
|
||||
assert.equal(analysis.rows.length, summary.totals[metric]);
|
||||
assert.equal(analysis.rows.reduce((sum, row) => sum + row.cell.quantity, 0), summary.totals[metric]);
|
||||
assert.ok(!JSON.stringify(analysis).includes('managerId'));
|
||||
}
|
||||
assert.equal(faultOverview(rows, '2026-10-13T15:59:59Z').totals.reported, 0);
|
||||
});
|
||||
|
||||
test('故障下钻与资产维度映射同步，同车多故障逐单统计，脱敏客户保持独立', async () => {
|
||||
const { faultAnalysis } = await import('../server/routes/asset-faults/model.js');
|
||||
const { getAvailableDimensions, getCustomAnalysis } = await import('../modules/assets/analytics-model.js');
|
||||
const raw = { matched_vehicle_id: 'V1', model_name: '公务用车/小客车', brand: 'denza', vehicle_source: '0',
|
||||
city_name: '上海市', province_name: '上海市', operation_status: '2', business_dept: '业务部', business_manager: '经理甲' };
|
||||
const rows = [mapFault({ ...raw, id: 'F1', customer_name: '客户甲' }, new Map()), mapFault({ ...raw, id: 'F2', customer_name: '客户乙' }, new Map())];
|
||||
const data = faultAnalysis(rows, 'ledger', '2026-10-13T06:00:00Z');
|
||||
assert.equal(data.rows[0].cell.model, '公务车/挂靠车');
|
||||
assert.equal(data.rows[0].cell.department, '公务车');
|
||||
assert.equal(data.rows[0].cell.region, '华东');
|
||||
assert.equal(data.rows[0].cell.manager, '经理甲');
|
||||
assert.equal(data.rows[0].cell.assetDisposition, '自营');
|
||||
assert.equal(getCustomAnalysis(data.rows.map(row => row.cell), { view: 'assets', dimensions: ['model'] }).rows[0].count, 2);
|
||||
assert.equal(getCustomAnalysis(data.rows.map(row => row.cell), { view: 'assets', dimensions: ['customer'] }).rows.length, 2);
|
||||
assert.equal(getAvailableDimensions('assets').length, 9);
|
||||
});
|
||||
|
||||
test('总览与下钻接口先应用权限，无效指标和未认证不查询', async () => {
|
||||
let calls = 0;
|
||||
const router = createFaultRouter(async () => { calls++; return { updatedAt: '2026-10-13T06:00:00Z', rows: [fault('mine'), fault('secret', { managerId: 'm2', customer: 'secret-customer', customerLabel: '保密客户' })] }; });
|
||||
for (const url of ['/overview', '/analysis?metric=ledger']) assert.equal((await router.request(url)).status, 401);
|
||||
assert.equal(calls, 0);
|
||||
const app = new Hono<{ Variables: { user: AuthUser } }>();
|
||||
app.use('*', async (c, next) => { c.set('user', { ...full, permissionLevel: 'personal' }); await next(); });
|
||||
app.route('/faults', router);
|
||||
assert.equal((await app.request('/faults/analysis?metric=__proto__')).status, 400);
|
||||
assert.equal(calls, 0);
|
||||
const summary = await (await app.request('/faults/overview')).json();
|
||||
assert.equal(summary.totals.ledger, 1);
|
||||
const response = await app.request('/faults/analysis?metric=ledger');
|
||||
const data = await response.json();
|
||||
assert.equal(response.headers.get('Cache-Control'), 'no-store');
|
||||
assert.equal(data.rows.length, summary.totals.ledger);
|
||||
assert.ok(!JSON.stringify(data).includes('secret'));
|
||||
});
|
||||
|
||||
test('在办按状态细分；逾期以北京时间截止时间严格比较，排除挂起、归档和无截止时间', async () => {
|
||||
const { faultOverview, faultAnalysis } = await import('../server/routes/asset-faults/model.js');
|
||||
const at = '2026-10-13T06:00:00Z';
|
||||
const rows = [fault('waiting-overdue', { deadlineAt: '2026-10-13 13:59:59' }),
|
||||
fault('processing-overdue', { status: '处理中', deadlineAt: '2026-10-12 14:00:00' }),
|
||||
fault('boundary', { deadlineAt: '2026-10-13 14:00:00' }),
|
||||
fault('future', { status: '处理中', deadlineAt: '2026-10-13 14:00:01' }),
|
||||
fault('missing'), fault('invalid', { deadlineAt: 'invalid' }),
|
||||
fault('suspended', { status: '挂起', deadlineAt: '2026-01-01 00:00:00' }),
|
||||
fault('archived', { status: '已归档', deadlineAt: '2026-01-01 00:00:00' })];
|
||||
const summary = faultOverview(rows, at);
|
||||
assert.equal(summary.totals.waiting, 4);
|
||||
assert.equal(summary.totals.processing, 2);
|
||||
assert.equal(summary.totals.suspended, 1);
|
||||
assert.equal(summary.totals.open, 6);
|
||||
assert.equal(summary.totals.overdue, 2);
|
||||
assert.equal(summary.totals.open, summary.totals.waiting + summary.totals.processing);
|
||||
for (const metric of ['open', 'waiting', 'processing', 'suspended', 'overdue'] as const) {
|
||||
assert.equal(faultAnalysis(rows, metric, at).rows.length, summary.totals[metric]);
|
||||
}
|
||||
const openIds = new Set(faultAnalysis(rows, 'open', at).rows.map(r => r.id));
|
||||
assert.ok(faultAnalysis(rows, 'overdue', at).rows.every(row => openIds.has(row.id)));
|
||||
assert.deepEqual(faultAnalysis(rows, 'overdue', at).rows.map(r => r.id), ['waiting-overdue', 'processing-overdue']);
|
||||
});
|
||||
|
||||
|
||||
test('未关联客户的库存车单独展示，不混入非库存、未知车辆或已有客户', () => {
|
||||
const make = (extra: Record<string, unknown>) => mapFault({ id: 'stock', matched_vehicle_id: 'v1', operation_status: '3', ...extra }, new Map());
|
||||
for (const operation_status of ['3', '4', '可运营', '待运营', '在库']) {
|
||||
const row = make({ operation_status });
|
||||
assert.equal(row.customer, 'inventory-unlinked');
|
||||
assert.equal(row.assetCell.customer, 'inventory-unlinked');
|
||||
assert.equal(row.customerLabel, '库存车');
|
||||
}
|
||||
for (const extra of [{ operation_status: '1' }, { operation_status: '5' }, { operation_status: null }, { matched_vehicle_id: null }]) {
|
||||
const row = make(extra); assert.equal(row.customer, 'unlinked'); assert.equal(row.customerLabel, '未关联客户');
|
||||
}
|
||||
const assigned = make({ customer_name: '测试客户名称' });
|
||||
assert.notEqual(assigned.customer, 'inventory-unlinked');assert.notEqual(assigned.customerLabel, '库存车');
|
||||
const result = faultAnalysis([make({}), make({ id: 'other', operation_status: '1' })], 'ledger', '2026-10-13T00:00:00Z');
|
||||
assert.equal(result.customerLabels['inventory-unlinked'], '库存车');assert.equal(result.customerLabels.unlinked, '未关联客户');assert.equal(result.rows.length, 2);
|
||||
});
|
||||
+7
-7
@@ -1,13 +1,13 @@
|
||||
import assert from "node:assert/strict";
|
||||
import test, { type TestContext } from "node:test";
|
||||
import { Hono } from "hono";
|
||||
import router from "./index.js";
|
||||
import { vehicleRepository } from "../vehicles/repository.js";
|
||||
import { gapStore } from "./gaps.js";
|
||||
import type { AuthUser } from "../../auth/types.js";
|
||||
import type { Vehicle } from "../../types.js";
|
||||
import type { AssistantResult, AssistantRequest } from "../../../shared/assets/assistant.js";
|
||||
import { copyResultText } from "../../../modules/assets/assistant/result-presentation.js";
|
||||
import router from "../server/routes/asset-assistant/index.js";
|
||||
import { vehicleRepository } from "../server/routes/vehicles/repository.js";
|
||||
import { gapStore } from "../server/routes/asset-assistant/gaps.js";
|
||||
import type { AuthUser } from "../server/auth/types.js";
|
||||
import type { Vehicle } from "../server/types.js";
|
||||
import type { AssistantResult, AssistantRequest } from "../shared/assets/assistant.js";
|
||||
import { copyResultText } from "../modules/assets/assistant/result-presentation.js";
|
||||
let sequence = 0;
|
||||
function setup(t: TestContext) {
|
||||
const user = { userId: `independent-${++sequence}`, userName: "独立验收", loginName: "qa", depCode: "qa", depName: "业务三部", permissionLevel: "personal", roles: [] } as AuthUser;
|
||||
@@ -10,7 +10,7 @@ import {
|
||||
MapPin,
|
||||
} from 'lucide-react';
|
||||
import { motion, AnimatePresence } from 'motion/react';
|
||||
import * as XLSX from 'xlsx';
|
||||
import { buildJsonSheet, writeWorkbook } from '../../shared/xlsx';
|
||||
import {
|
||||
BarChart,
|
||||
Bar,
|
||||
@@ -40,7 +40,6 @@ import {
|
||||
} from './model';
|
||||
import { SearchSelect } from '../../components/SearchSelect';
|
||||
import { MultiSearchSelect } from '../../components/MultiSearchSelect';
|
||||
import Blur from '../../components/Blur';
|
||||
import { ErrorState, LoadingState, PageFrame, SkeletonBlock, SurfaceCard } from '../../components/ui/surface';
|
||||
import { AssetsHeader } from './components/AssetsHeader';
|
||||
import { FlowAnalysisModal } from './components/FlowAnalysisModal';
|
||||
@@ -386,7 +385,7 @@ export default function AssetsModule() {
|
||||
合同: item.contractNo || '',
|
||||
项目名称: item.projectName || '',
|
||||
}));
|
||||
const ws = XLSX.utils.json_to_sheet(table);
|
||||
const ws = buildJsonSheet(table);
|
||||
ws['!cols'] = [
|
||||
{ wch: 14 },
|
||||
{ wch: 8 },
|
||||
@@ -399,9 +398,7 @@ export default function AssetsModule() {
|
||||
{ wch: 28 },
|
||||
{ wch: 30 },
|
||||
];
|
||||
const wb = XLSX.utils.book_new();
|
||||
XLSX.utils.book_append_sheet(wb, ws, '明细');
|
||||
XLSX.writeFile(wb, `${title}-${flowRange.start}-${flowRange.end}.xlsx`);
|
||||
writeWorkbook([{ name: '明细', sheet: ws }], `${title}-${flowRange.start}-${flowRange.end}.xlsx`);
|
||||
}, [flowRange.end, flowRange.start, flowStats]);
|
||||
|
||||
const [customerProvinceData, setCustomerProvinceData] = useState<{ name: string; value: number }[]>([]);
|
||||
@@ -708,7 +705,7 @@ export default function AssetsModule() {
|
||||
>
|
||||
<div className="flex items-center gap-2">
|
||||
{isManagerExpanded ? <ChevronDown size={14} className="text-blue-500" /> : <ChevronRight size={14} className="text-gray-300" />}
|
||||
<span className="font-bold text-gray-700 text-xs"><Blur>{m.manager}</Blur></span>
|
||||
<span className="font-bold text-gray-700 text-xs"><>{m.manager}</></span>
|
||||
</div>
|
||||
<button
|
||||
onClick={(e) => {
|
||||
@@ -790,7 +787,7 @@ export default function AssetsModule() {
|
||||
>
|
||||
<td className="p-2 border-r border-gray-100 font-bold text-gray-800 flex items-center gap-1">
|
||||
{isManagerExpanded ? <ChevronDown size={12} className="text-blue-400" /> : <ChevronRight size={12} className="text-gray-300" />}
|
||||
<Blur>{m.manager}</Blur>
|
||||
<>{m.manager}</>
|
||||
</td>
|
||||
<td className="p-2 border-r border-gray-100 text-gray-600">{m.department}</td>
|
||||
<td
|
||||
@@ -910,7 +907,7 @@ export default function AssetsModule() {
|
||||
>
|
||||
<div className="flex items-center gap-1">
|
||||
{isManagerExpanded ? <ChevronDown size={12} className="text-blue-400" /> : <ChevronRight size={12} className="text-gray-300" />}
|
||||
<span className="text-[11px] font-bold text-gray-700"><Blur>{m.manager}</Blur></span>
|
||||
<span className="text-[11px] font-bold text-gray-700"><>{m.manager}</></span>
|
||||
</div>
|
||||
<button
|
||||
onClick={(e) => {
|
||||
@@ -989,7 +986,7 @@ export default function AssetsModule() {
|
||||
<div className="flex items-center gap-2 flex-1 min-w-0">
|
||||
{isManagerExpanded ? <ChevronDown size={14} className="text-blue-500" /> : <ChevronRight size={14} className="text-gray-300" />}
|
||||
<div className="flex items-center gap-3 min-w-0">
|
||||
<h3 className="text-sm font-bold text-gray-800 shrink-0"><Blur>{m.manager}</Blur></h3>
|
||||
<h3 className="text-sm font-bold text-gray-800 shrink-0"><>{m.manager}</></h3>
|
||||
<span className="text-[11px] text-gray-500 shrink-0">{m.department}</span>
|
||||
<div
|
||||
className="text-[11px] font-bold text-blue-600 whitespace-nowrap"
|
||||
@@ -1513,12 +1510,12 @@ export default function AssetsModule() {
|
||||
>
|
||||
<td className="p-2 border-r border-gray-100 font-bold text-gray-800 flex items-center gap-2">
|
||||
{isExpanded ? <ChevronDown size={14} className="text-emerald-600" /> : <ChevronRight size={14} className="text-gray-400" />}
|
||||
<Blur>{cust.customer}</Blur>
|
||||
<>{cust.customer}</>
|
||||
</td>
|
||||
<td className="p-2 border-r border-gray-100 text-gray-600 text-center">
|
||||
<span className="bg-gray-100 px-2 py-0.5 rounded text-[10px] font-medium">{cust.region}</span>
|
||||
</td>
|
||||
<td className="p-2 border-r border-gray-100 text-gray-600 text-center"><Blur>{cust.manager}</Blur></td>
|
||||
<td className="p-2 border-r border-gray-100 text-gray-600 text-center"><>{cust.manager}</></td>
|
||||
<td className="p-2 border-r border-gray-100 text-center text-gray-500 cursor-pointer hover:bg-emerald-50 transition-colors" onClick={(e) => { e.stopPropagation(); setShowPlateNumbers({ batch: 'All', model: 'All', location: 'All', customer: cust.customer, type: '4.5T', isColdChain: false, source: 'customer', title: `客户运营统计 - ${cust.customer} - 4.5T` }); }}>{cust.t4_5}</td>
|
||||
<td className="p-2 border-r border-gray-100 text-center text-gray-500 cursor-pointer hover:bg-emerald-50 transition-colors" onClick={(e) => { e.stopPropagation(); setShowPlateNumbers({ batch: 'All', model: 'All', location: 'All', customer: cust.customer, type: '4.5T', isColdChain: true, source: 'customer', title: `客户运营统计 - ${cust.customer} - 4.5T冷链` }); }}>{cust.t4_5c}</td>
|
||||
<td className="p-2 border-r border-gray-100 text-center text-gray-500 cursor-pointer hover:bg-emerald-50 transition-colors" onClick={(e) => { e.stopPropagation(); setShowPlateNumbers({ batch: 'All', model: 'All', location: 'All', customer: cust.customer, type: '18T', source: 'customer', title: `客户运营统计 - ${cust.customer} - 18T` }); }}>{cust.t18}</td>
|
||||
@@ -1533,7 +1530,7 @@ export default function AssetsModule() {
|
||||
<div className="grid grid-cols-4 gap-2">
|
||||
<div className="bg-white p-2 rounded border border-gray-100 shadow-sm">
|
||||
<div className="text-[10px] text-gray-400 uppercase mb-1">客户详情</div>
|
||||
<div className="text-sm font-bold text-gray-700"><Blur>{cust.customer}</Blur></div>
|
||||
<div className="text-sm font-bold text-gray-700"><>{cust.customer}</></div>
|
||||
</div>
|
||||
<div className="bg-white p-2 rounded border border-gray-100 shadow-sm">
|
||||
<div className="text-[10px] text-gray-400 uppercase mb-1">主要车型</div>
|
||||
@@ -1543,7 +1540,7 @@ export default function AssetsModule() {
|
||||
</div>
|
||||
<div className="bg-white p-2 rounded border border-gray-100 shadow-sm">
|
||||
<div className="text-[10px] text-gray-400 uppercase mb-1">业务经理</div>
|
||||
<div className="text-sm font-bold text-gray-700"><Blur>{cust.manager}</Blur></div>
|
||||
<div className="text-sm font-bold text-gray-700"><>{cust.manager}</></div>
|
||||
</div>
|
||||
<div className="bg-white p-2 rounded border border-gray-100 shadow-sm">
|
||||
<div className="text-[10px] text-gray-400 uppercase mb-1">资产占比</div>
|
||||
@@ -1577,7 +1574,7 @@ export default function AssetsModule() {
|
||||
<div className="flex items-center gap-2">
|
||||
{isExpanded ? <ChevronDown size={16} className="text-emerald-600" /> : <ChevronRight size={16} className="text-gray-400" />}
|
||||
<div className="flex flex-col">
|
||||
<span className="font-bold text-gray-800 text-sm"><Blur>{cust.customer}</Blur></span>
|
||||
<span className="font-bold text-gray-800 text-sm"><>{cust.customer}</></span>
|
||||
<span className="text-[10px] text-emerald-600 font-medium">{cust.region}区域</span>
|
||||
</div>
|
||||
</div>
|
||||
@@ -1595,7 +1592,7 @@ export default function AssetsModule() {
|
||||
<div className="grid grid-cols-2 gap-2">
|
||||
<div className="bg-gray-50 p-2 rounded border border-gray-100">
|
||||
<div className="text-[8px] text-gray-400 uppercase mb-1">客户详情</div>
|
||||
<div className="text-[10px] font-bold text-gray-700"><Blur>{cust.customer}</Blur></div>
|
||||
<div className="text-[10px] font-bold text-gray-700"><>{cust.customer}</></div>
|
||||
</div>
|
||||
<div className="bg-gray-50 p-2 rounded border border-gray-100">
|
||||
<div className="text-[8px] text-gray-400 uppercase mb-1">主要车型</div>
|
||||
@@ -1605,7 +1602,7 @@ export default function AssetsModule() {
|
||||
</div>
|
||||
<div className="bg-gray-50 p-2 rounded border border-gray-100">
|
||||
<div className="text-[8px] text-gray-400 uppercase mb-1">业务经理</div>
|
||||
<div className="text-xs font-bold text-gray-700"><Blur>{cust.manager}</Blur></div>
|
||||
<div className="text-xs font-bold text-gray-700"><>{cust.manager}</></div>
|
||||
</div>
|
||||
<div className="bg-gray-50 p-2 rounded border border-gray-100">
|
||||
<div className="text-[8px] text-gray-400 uppercase mb-1">资产占比</div>
|
||||
@@ -1687,7 +1684,6 @@ export default function AssetsModule() {
|
||||
/>
|
||||
|
||||
</div>
|
||||
|
||||
<button
|
||||
ref={assistantTrigger}
|
||||
type="button"
|
||||
|
||||
@@ -34,21 +34,23 @@ export function vehicleExportRows(vehicles: VehicleListItem[]): ExportRow[] {
|
||||
}));
|
||||
}
|
||||
|
||||
export async function createAnalysisWorkbook(statistics: ExportRow[], details: ExportRow[]) {
|
||||
const XLSX = await import('xlsx');
|
||||
const workbook = XLSX.utils.book_new();
|
||||
for (const [name, rows] of [['统计表', statistics], ['详情表', details]] as const) {
|
||||
const sheet = XLSX.utils.json_to_sheet(rows.map(row => Object.fromEntries(Object.entries(row).map(([key, value]) => [key, value ?? '—']))));
|
||||
async function analysisSheets(statistics: ExportRow[], details: ExportRow[]) {
|
||||
const { buildJsonSheet } = await import('../../shared/xlsx');
|
||||
return ([['统计表', statistics], ['详情表', details]] as const).map(([name, rows]) => {
|
||||
const sheet = buildJsonSheet(rows.map(row => Object.fromEntries(Object.entries(row).map(([key, value]) => [key, value ?? '—']))));
|
||||
sheet['!cols'] = Object.keys(rows[0] || {}).map(label => ({ wch: /时间|合同|项目|工作/.test(label) ? 28 : 18 }));
|
||||
if (sheet['!ref']) sheet['!autofilter'] = { ref: sheet['!ref'] };
|
||||
XLSX.utils.book_append_sheet(workbook, sheet, name);
|
||||
return { name, sheet };
|
||||
});
|
||||
}
|
||||
return workbook;
|
||||
|
||||
export async function createAnalysisWorkbook(statistics: ExportRow[], details: ExportRow[]) {
|
||||
const { createWorkbook } = await import('../../shared/xlsx');
|
||||
return createWorkbook(await analysisSheets(statistics, details));
|
||||
}
|
||||
|
||||
export async function downloadAnalysisWorkbook(statistics: ExportRow[], details: ExportRow[], title: string) {
|
||||
const workbook = await createAnalysisWorkbook(statistics, details);
|
||||
const XLSX = await import('xlsx');
|
||||
const { writeWorkbook } = await import('../../shared/xlsx');
|
||||
const safeTitle = title.replace(/[\\/:*?"<>|\x00-\x1f]/g, '-').slice(0, 120);
|
||||
XLSX.writeFile(workbook, `${safeTitle}.xlsx`, { compression: true });
|
||||
writeWorkbook(await analysisSheets(statistics, details), `${safeTitle}.xlsx`, { compression: true });
|
||||
}
|
||||
|
||||
@@ -1,18 +1,8 @@
|
||||
import assert from "node:assert/strict";
|
||||
import test from "node:test";
|
||||
import { BUSINESS_QUESTIONS, conversationTitle } from "./conversation-presentation.js";
|
||||
import { localPlan } from "../../../server/routes/asset-assistant/planner.js";
|
||||
import { projectQuestion } from "../../../server/routes/asset-assistant/privacy.js";
|
||||
import { conversationTitle } from "./conversation-presentation.js";
|
||||
import type { AssistantResult } from "../../../shared/assets/assistant.js";
|
||||
|
||||
test("business starters produce supported queries matching their promises even without a language model",()=>{
|
||||
const plans=BUSINESS_QUESTIONS.map(question=>localPlan(projectQuestion(question,[])).plan);
|
||||
assert.equal(plans[0].analysis,"briefing");assert.equal(plans[0].category,"all");
|
||||
assert.equal(plans[1].category,"inventory");
|
||||
assert.deepEqual(new Set([plans[1].groupBy,plans[1].secondaryGroupBy]),new Set(["type","region"]));
|
||||
assert.equal(plans[2].kind,"flow");assert.equal(Date.parse(plans[2].end!)-Date.parse(plans[2].start!),6*86400000);
|
||||
assert.equal(plans[3].category,"abnormal");assert.equal(plans[3].view,"list");
|
||||
});
|
||||
test("history titles describe the actual result and keep long questions readable",()=>{
|
||||
const base={plan:{kind:"assets",category:"inventory",groupBy:"type",filters:{},view:"chart"}} as AssistantResult;
|
||||
assert.equal(conversationTitle("a long question",base),"车型库存");
|
||||
|
||||
@@ -1,4 +1,3 @@
|
||||
import Blur from '../../../components/Blur';
|
||||
import type { VehicleListItem } from '../types';
|
||||
|
||||
type DetailsProps = { vehicles: VehicleListItem[] };
|
||||
@@ -24,12 +23,12 @@ function InventoryVehicleDetails({ vehicles, kind }: DetailsProps & { kind: 'abn
|
||||
<p className="px-4 py-3 text-xs leading-5 text-slate-500">{pending ? '展示当前待交车任务的合同信息，客户名称已脱敏。' : '申请人取异动单创建人；未结束的异动显示“未完成”，缺失信息显示“未提供”。'}</p>
|
||||
<div className="space-y-3 px-3 pb-3 md:hidden">
|
||||
{vehicles.map(vehicle => <article key={vehicle.id} className="rounded-xl border border-slate-200 bg-white p-4 shadow-sm">
|
||||
<h4 className="break-all font-mono text-base font-bold text-blue-700"><Blur>{vehicle.plateNumber || vehicle.vin || '—'}</Blur></h4>
|
||||
<h4 className="break-all font-mono text-base font-bold text-blue-700"><>{vehicle.plateNumber || vehicle.vin || '—'}</></h4>
|
||||
<p className="mt-1 text-xs text-slate-500">{vehicle.brandLabel || '—'} · {vehicle.type} · {vehicle.location === '其他' ? '对接中' : vehicle.location}</p>
|
||||
<dl className="mt-4 space-y-3 text-sm">
|
||||
{details(vehicle).map((value, index) => <div key={labels[index]} className="grid grid-cols-[6rem_minmax(0,1fr)] gap-2">
|
||||
<dt className="text-slate-500">{labels[index]}</dt>
|
||||
<dd className="whitespace-pre-wrap break-words font-medium text-slate-800 [overflow-wrap:anywhere]"><Blur>{value}</Blur></dd>
|
||||
<dd className="whitespace-pre-wrap break-words font-medium text-slate-800 [overflow-wrap:anywhere]"><>{value}</></dd>
|
||||
</div>)}
|
||||
</dl>
|
||||
</article>)}
|
||||
@@ -40,11 +39,11 @@ function InventoryVehicleDetails({ vehicles, kind }: DetailsProps & { kind: 'abn
|
||||
{['车牌', '品牌', '车型', '所在地', ...labels].map(label => <th key={label} scope="col" className={`whitespace-nowrap p-3 ${label === "具体工作" ? "w-64" : ""}`}>{label}</th>)}
|
||||
</tr></thead>
|
||||
<tbody>{vehicles.map(vehicle => <tr key={vehicle.id} className="border-b border-slate-200 bg-white align-top">
|
||||
<td className="p-3 font-mono font-bold text-blue-700"><Blur>{vehicle.plateNumber || vehicle.vin || '—'}</Blur></td>
|
||||
<td className="p-3 font-mono font-bold text-blue-700"><>{vehicle.plateNumber || vehicle.vin || '—'}</></td>
|
||||
<td className="p-3 text-slate-600">{vehicle.brandLabel || '—'}</td>
|
||||
<td className="p-3 text-slate-600">{vehicle.type}</td>
|
||||
<td className="p-3 text-slate-600">{vehicle.location === '其他' ? '对接中' : vehicle.location}</td>
|
||||
{details(vehicle).map((value, index) => <td key={labels[index]} className={`whitespace-pre-wrap break-words p-3 leading-6 text-slate-700 [overflow-wrap:anywhere] ${labels[index] === "具体工作" ? "min-w-56 max-w-72" : "min-w-28 max-w-48"}`}><Blur>{value}</Blur></td>)}
|
||||
{details(vehicle).map((value, index) => <td key={labels[index]} className={`whitespace-pre-wrap break-words p-3 leading-6 text-slate-700 [overflow-wrap:anywhere] ${labels[index] === "具体工作" ? "min-w-56 max-w-72" : "min-w-28 max-w-48"}`}><>{value}</></td>)}
|
||||
</tr>)}</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
@@ -3,7 +3,6 @@ import { AbnormalVehicleDetails, PendingVehicleDetails } from './AbnormalVehicle
|
||||
import { useDialogFocus } from './useDialogFocus';
|
||||
import { ChevronDown, Filter, Loader2, PlusCircle, Truck } from 'lucide-react';
|
||||
import { AnimatePresence, motion } from 'motion/react';
|
||||
import Blur from '../../../components/Blur';
|
||||
import { SearchSelect } from '../../../components/SearchSelect';
|
||||
import type { WeeklyDetailItem } from '../api';
|
||||
import type { ModalVehicleFilters, VehicleModalSelection } from '../model';
|
||||
@@ -178,8 +177,8 @@ export function VehicleDetailModal({
|
||||
<tbody className="text-[11px]">
|
||||
{filteredModalWeeklyDetail.map((v, i) => (
|
||||
<tr key={`${v.truck_id}-${i}`} className={`border-b border-gray-100 hover:bg-blue-50/50 transition-colors ${i % 2 === 0 ? 'bg-white' : 'bg-gray-50/30'}`}>
|
||||
<td className="p-2 border-r border-gray-100 font-mono font-bold text-blue-700 text-center"><Blur>{v.plate_number}</Blur></td>
|
||||
<td className="p-2 border-r border-gray-100 text-gray-600 text-center"><Blur>{v.customer_name || '—'}</Blur></td>
|
||||
<td className="p-2 border-r border-gray-100 font-mono font-bold text-blue-700 text-center"><>{v.plate_number}</></td>
|
||||
<td className="p-2 border-r border-gray-100 text-gray-600 text-center"><>{v.customer_name || '—'}</></td>
|
||||
<td className="p-2 text-gray-500 text-center">{v.handover_date ? v.handover_date.slice(0, 10) : '—'}</td>
|
||||
</tr>
|
||||
))}
|
||||
@@ -226,12 +225,12 @@ export function VehicleDetailModal({
|
||||
{showPlateNumbers.source === 'customer' ? (
|
||||
<>
|
||||
<td className="p-2 border-r border-gray-100 text-gray-600">{v.departmentName || '—'}</td>
|
||||
<td className="p-2 border-r border-gray-100 font-medium text-gray-700"><Blur>{v.customerManager || '—'}</Blur></td>
|
||||
<td className="p-2 border-r border-gray-100 font-medium text-gray-700"><>{v.customerManager || '—'}</></td>
|
||||
<td className="p-2 border-r border-gray-100 text-gray-600">{v.brandLabel || '—'}</td>
|
||||
<td className="p-2 border-r border-gray-100 text-gray-600">{v.type}</td>
|
||||
<td className="p-2 border-r border-gray-100 text-gray-500 text-[10px]"><Blur>{v.subjectOrg || '—'}</Blur></td>
|
||||
<td className="p-2 border-r border-gray-100 font-bold text-gray-800"><Blur>{v.customerName || '—'}</Blur></td>
|
||||
<td className={`p-2 border-r border-gray-100 font-mono font-bold ${v.plateNumber ? 'text-blue-700' : 'text-orange-500'}`}><Blur>{v.plateNumber || v.vin || '—'}</Blur></td>
|
||||
<td className="p-2 border-r border-gray-100 text-gray-500 text-[10px]"><>{v.subjectOrg || '—'}</></td>
|
||||
<td className="p-2 border-r border-gray-100 font-bold text-gray-800"><>{v.customerName || '—'}</></td>
|
||||
<td className={`p-2 border-r border-gray-100 font-mono font-bold ${v.plateNumber ? 'text-blue-700' : 'text-orange-500'}`}><>{v.plateNumber || v.vin || '—'}</></td>
|
||||
<td className="p-2 border-r border-gray-100 text-center">
|
||||
<span className={`px-1.5 py-0.5 rounded-full text-[9px] font-bold ${
|
||||
v.status === 'Operating' ? 'bg-green-100 text-green-700' :
|
||||
@@ -244,13 +243,13 @@ export function VehicleDetailModal({
|
||||
<td className="p-2 border-r border-gray-100 text-center text-gray-500">{'—'}</td>
|
||||
<td className="p-2 border-r border-gray-100 text-gray-600">{v.location === '其他' ? '对接中' : v.location}</td>
|
||||
<td className="p-2 border-r border-gray-100 text-center font-bold text-orange-600">{'—'}</td>
|
||||
<td className="p-2 text-gray-500 text-[10px]"><Blur>{v.orgName || '—'}</Blur></td>
|
||||
<td className="p-2 text-gray-500 text-[10px]"><>{v.orgName || '—'}</></td>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<td className={`p-2 border-r border-gray-100 font-mono font-bold text-center ${v.plateNumber ? 'text-blue-700' : 'text-orange-500'}`}><Blur>{v.plateNumber || v.vin || '—'}</Blur></td>
|
||||
<td className={`p-2 border-r border-gray-100 font-mono font-bold text-center ${v.plateNumber ? 'text-blue-700' : 'text-orange-500'}`}><>{v.plateNumber || v.vin || '—'}</></td>
|
||||
{showPlateNumbers.source !== 'asset' && showPlateNumbers.category !== 'Inventory' && (
|
||||
<td className="p-2 border-r border-gray-100 font-bold text-gray-800 text-center"><Blur>{v.customerName || '—'}</Blur></td>
|
||||
<td className="p-2 border-r border-gray-100 font-bold text-gray-800 text-center"><>{v.customerName || '—'}</></td>
|
||||
)}
|
||||
<td className="p-2 border-r border-gray-100 text-gray-600 text-center">{v.brandLabel || '—'}</td>
|
||||
<td className="p-2 border-r border-gray-100 text-gray-600 text-center">{v.type}</td>
|
||||
|
||||
@@ -1,7 +1,6 @@
|
||||
import { useEffect, useMemo, useRef, useState } from 'react';
|
||||
import { ArrowLeft, BarChart3, Filter, Loader2, Search, X } from 'lucide-react';
|
||||
import { fetchJson } from '../../../../auth/api-client';
|
||||
import Blur from '../../../../components/Blur';
|
||||
import type { AssetAnalysisResponse, AssetAnalysisDimension } from '../../../../shared/assets/analytics';
|
||||
import { ANALYSIS_META, DIMENSION_LABELS, compareCustomLabels, getCustomAnalysis, getAvailableDimensions, getDefaultDimensions, getDimensionValueLabel, type AnalysisFilterValues, type CustomAnalysisRow, type AnalysisSort, type AnalysisView } from '../../analytics-model';
|
||||
import { dimensionChildCounts, dimensionCountUnit, dimensionParentTotals, dimensionRowSpans, orderDimensionGroups, visibleDimensionRowSpans } from '../../dimension-layout';
|
||||
@@ -148,7 +147,7 @@ function AnalysisDialog({ selection, subject, close }: Props & { selection: Vehi
|
||||
<tbody>{shownGroups.map((row, rowIndex) => <tr key={row.key} className={merged && spans[rowIndex][0] > 0 ? 'analysis-group-start' : undefined}>
|
||||
{analysis.dimensions.length ? analysis.dimensions.map((dimension, columnIndex) => {
|
||||
const span = merged ? spans[rowIndex][columnIndex] : 1;
|
||||
return span === 0 ? null : <td key={dimension} rowSpan={span} className={span > 1 ? 'analysis-parent-cell' : undefined} data-label={DIMENSION_LABELS[dimension]}><Blur>{getDimensionValueLabel(dimension, row.values[dimension] || '')}</Blur>{merged && columnIndex < analysis.dimensions.length - 1 && childCounts[rowIndex][columnIndex] > 1 && <><small className="analysis-parent-total" title="当前筛选范围内该分组的完整合计（全部筛选结果）">合计 <strong>{number(parentTotals[rowIndex][columnIndex])}</strong> 台</small><small className="analysis-parent-children" title="当前筛选范围内下一级维度的去重分组数（全部筛选结果）">{DIMENSION_LABELS[analysis.dimensions[columnIndex + 1]]}：<strong>{number(childCounts[rowIndex][columnIndex])}</strong> {dimensionCountUnit(analysis.dimensions[columnIndex + 1])}</small></>}</td>;
|
||||
return span === 0 ? null : <td key={dimension} rowSpan={span} className={span > 1 ? 'analysis-parent-cell' : undefined} data-label={DIMENSION_LABELS[dimension]}>{getDimensionValueLabel(dimension, row.values[dimension] || '')}{merged && columnIndex < analysis.dimensions.length - 1 && childCounts[rowIndex][columnIndex] > 1 && <><small className="analysis-parent-total" title="当前筛选范围内该分组的完整合计（全部筛选结果）">合计 <strong>{number(parentTotals[rowIndex][columnIndex])}</strong> 台</small><small className="analysis-parent-children" title="当前筛选范围内下一级维度的去重分组数（全部筛选结果）">{DIMENSION_LABELS[analysis.dimensions[columnIndex + 1]]}：<strong>{number(childCounts[rowIndex][columnIndex])}</strong> {dimensionCountUnit(analysis.dimensions[columnIndex + 1])}</small></>}</td>;
|
||||
}) : <td data-label="统计范围">当前筛选结果</td>}
|
||||
<td className="analysis-numeric" data-label="数量（台）"><strong>{number(row.count)}</strong></td>
|
||||
{view === 'inventory' && <><td className={`analysis-numeric ${row.totals.pending ? 'analysis-pending-count' : 'analysis-zero-count'}`} data-label="待交车（台）">{number(row.totals.pending)}</td><td className={`analysis-numeric ${row.totals.abnormal ? 'analysis-abnormal-count' : 'analysis-zero-count'}`} data-label="异动（台）">{number(row.totals.abnormal)}</td></>}
|
||||
@@ -182,7 +181,7 @@ function VehicleRows({ vehicles }: { vehicles: VehicleListItem[] }) {
|
||||
const business = ({ Abnormal: '异动', Pending: '待交车', Inventory: '在库', Operating: '运营中' } as Record<string, string>)[vehicle.status] || vehicle.status;
|
||||
return [business, operation].filter(Boolean).join(' · ');
|
||||
};
|
||||
return <div className="analysis-detail-table" tabIndex={0} role="region" aria-label="车辆明细表"><table><thead><tr>{['车牌 / VIN', '品牌 / 车型 / 型号', '省份 / 城市', '状态', '客户 / 签约公司', '部门 / 业务负责人', '所属公司'].map(label => <th key={label}>{label}</th>)}</tr></thead><tbody>{vehicles.map(vehicle => <tr key={vehicle.id}><td><Blur>{vehicle.plateNumber || vehicle.vin || '未提供'}</Blur></td><td>{vehicle.brandLabel || '—'} · {vehicle.type}<small>{vehicle.model}</small></td><td>{vehicle.province || '未标注'} / {vehicle.city || vehicle.location || '未标注'}</td><td>{stateLabel(vehicle)}</td><td><Blur>{vehicle.customerName || '—'}</Blur><small><Blur>{vehicle.orgName || '—'}</Blur></small></td><td><Blur>{vehicle.departmentName || '—'}</Blur><small><Blur>{vehicle.customerManager || '—'}</Blur></small></td><td>{vehicle.subjectOrg || '—'}</td></tr>)}</tbody></table></div>;
|
||||
return <div className="analysis-detail-table" tabIndex={0} role="region" aria-label="车辆明细表"><table><thead><tr>{['车牌 / VIN', '品牌 / 车型 / 型号', '省份 / 城市', '状态', '客户 / 签约公司', '部门 / 业务负责人', '所属公司'].map(label => <th key={label}>{label}</th>)}</tr></thead><tbody>{vehicles.map(vehicle => <tr key={vehicle.id}><td>{vehicle.plateNumber || vehicle.vin || '未提供'}</td><td>{vehicle.brandLabel || '—'} · {vehicle.type}<small>{vehicle.model}</small></td><td>{vehicle.province || '未标注'} / {vehicle.city || vehicle.location || '未标注'}</td><td>{stateLabel(vehicle)}</td><td>{vehicle.customerName || '—'}<small>{vehicle.orgName || '—'}</small></td><td>{vehicle.departmentName || '—'}<small>{vehicle.customerManager || '—'}</small></td><td>{vehicle.subjectOrg || '—'}</td></tr>)}</tbody></table></div>;
|
||||
}
|
||||
|
||||
type WeeklyDimension = 'date' | 'contract_type';
|
||||
@@ -288,7 +287,7 @@ function WeeklyAnalysis({ rows }: { rows: WeeklyDetailItem[] }) {
|
||||
</> : <>
|
||||
<div className="analysis-navigation"><button type="button" className="analysis-back" onClick={() => { setDetailKey(null); }}><ArrowLeft size={14} />返回统计分析</button><span className="analysis-detail-scope">{detailGroup ? groupLabel(detailGroup) : '当前分组'}</span></div>
|
||||
<div className="analysis-table-tools"><h3>交还车业务明细 <small>{number(detailRows.length)} 车次</small></h3><AnalysisExportButton disabled={!detailRows.length} onExport={exportWorkbook} /></div>
|
||||
{detailRows.length ? <><div className="analysis-detail-table" role="region" aria-label="交还车业务明细表" tabIndex={0}><table><thead><tr><th>车牌</th><th>日期</th><th>合同类型</th><th>客户</th></tr></thead><tbody>{shownDetails.map((row, index) => <tr key={`${row.truck_id}-${index}`}><td><Blur>{row.plate_number || '—'}</Blur></td><td>{row.handover_date || '—'}</td><td>{row.contract_type || '—'}</td><td><Blur>{row.customer_name || '—'}</Blur></td></tr>)}</tbody></table></div>
|
||||
{detailRows.length ? <><div className="analysis-detail-table" role="region" aria-label="交还车业务明细表" tabIndex={0}><table><thead><tr><th>车牌</th><th>日期</th><th>合同类型</th><th>客户</th></tr></thead><tbody>{shownDetails.map((row, index) => <tr key={`${row.truck_id}-${index}`}><td>{row.plate_number || '—'}</td><td>{row.handover_date || '—'}</td><td>{row.contract_type || '—'}</td><td>{row.customer_name || '—'}</td></tr>)}</tbody></table></div>
|
||||
<ProgressiveRowsStatus {...detailProgress} unit="条" />
|
||||
</> : <p className="analysis-message">当前分组暂无数据，请返回统计分析。</p>}
|
||||
</>}
|
||||
|
||||
@@ -0,0 +1,71 @@
|
||||
import { useId, useRef, useState } from 'react';
|
||||
import { ArrowLeft, Check, ChevronDown, Filter, Search, X } from 'lucide-react';
|
||||
|
||||
export type MobileDimension = { key: string; label: string; options: { value: string; label: string; count?: number }[] };
|
||||
type Filters = Partial<Record<string, string[]>>;
|
||||
type Props = {
|
||||
available: MobileDimension[];
|
||||
dimensions: string[];
|
||||
filters: Filters;
|
||||
defaults: string[];
|
||||
apply: (dimensions: string[], filters: Filters) => void;
|
||||
};
|
||||
|
||||
/** Draft all mobile settings together; cancelling never changes the current result. */
|
||||
export function MobileAnalysisControls({ available, dimensions, filters, defaults, apply }: Props) {
|
||||
const [mode, setMode] = useState<'group' | 'filter' | null>(null);
|
||||
const [draftDimensions, setDraftDimensions] = useState(dimensions);
|
||||
const [draftFilters, setDraftFilters] = useState(filters);
|
||||
const [editing, setEditing] = useState<string | null>(null);
|
||||
const [query, setQuery] = useState('');
|
||||
const trigger = useRef<HTMLButtonElement | null>(null);
|
||||
const panel = useRef<HTMLDivElement>(null);
|
||||
const id = useId();
|
||||
const selected = available.filter(d => filters[d.key]?.length);
|
||||
const editor = available.find(d => d.key === editing);
|
||||
const options = editor?.options.filter(o => o.label.toLocaleLowerCase().includes(query.toLocaleLowerCase())) || [];
|
||||
const close = () => { setMode(null); trigger.current?.focus(); };
|
||||
const open = (next: 'group' | 'filter', button: HTMLButtonElement) => {
|
||||
trigger.current = button; setDraftDimensions([...dimensions]); setDraftFilters({ ...filters });
|
||||
setEditing(null); setQuery(''); setMode(next);
|
||||
requestAnimationFrame(() => panel.current?.focus());
|
||||
};
|
||||
const toggle = (key: string, value: string) => {
|
||||
const values = draftFilters[key] || [];
|
||||
setDraftFilters({ ...draftFilters, [key]: values.includes(value) ? values.filter(v => v !== value) : [...values, value] });
|
||||
};
|
||||
return <div className="analysis-mobile-controls">
|
||||
<div className="analysis-mobile-dimension-heading"><strong>分析维度</strong><span>可多选 · 左右滑动</span><button onClick={e => open('group', e.currentTarget)} aria-expanded={mode === 'group'} aria-controls={id}>分组设置</button></div>
|
||||
<div className="analysis-mobile-toolbar">
|
||||
<div className="analysis-dimension-strip" role="group" aria-label="分析维度">
|
||||
{available.map(d => <button key={d.key} type="button" aria-pressed={dimensions.includes(d.key)} onClick={() => apply(dimensions.includes(d.key) ? dimensions.filter(key => key !== d.key) : [...dimensions, d.key], filters)}>{d.label}{dimensions.includes(d.key) && <small>{dimensions.indexOf(d.key) + 1}</small>}</button>)}
|
||||
<button type="button" aria-pressed={!dimensions.length} onClick={() => apply([], filters)}>仅汇总</button>
|
||||
</div>
|
||||
<button type="button" onClick={e => open('filter', e.currentTarget)} aria-expanded={mode === 'filter'} aria-controls={id}><Filter size={16} />筛选{selected.length ? ` ${selected.length}` : ''}</button>
|
||||
</div>
|
||||
{!!selected.length && <div className="analysis-mobile-chips" aria-label="已选筛选条件">{selected.map(d => <button key={d.key} title={(filters[d.key] || []).map(v => d.options.find(o => o.value === v)?.label || v).join('、')} aria-label={`移除${d.label}筛选`} onClick={() => { const next = { ...filters }; delete next[d.key]; apply(dimensions, next); }}><span>{d.label}：{filters[d.key]?.length === 1 ? d.options.find(o => o.value === filters[d.key]?.[0])?.label || filters[d.key]?.[0] : `${filters[d.key]?.length}项`}</span><X size={14} /></button>)}</div>}
|
||||
{mode && <div className="analysis-settings-backdrop" onClick={e => { if (e.target === e.currentTarget) close(); }}>
|
||||
<div ref={panel} id={id} role="dialog" aria-modal="true" aria-label={mode === 'group' ? '分组设置' : '筛选条件'} tabIndex={-1} className="analysis-settings-panel" onKeyDown={e => {
|
||||
if (e.key === 'Escape') { e.preventDefault(); e.stopPropagation(); if (editing) { setEditing(null); setQuery(''); } else close(); }
|
||||
if (e.key === 'Tab') {
|
||||
e.stopPropagation();
|
||||
const items = Array.from(panel.current?.querySelectorAll<HTMLElement>('button:not([disabled]),input') || []).filter(el => el.getClientRects().length);
|
||||
const first = items[0], last = items.at(-1);
|
||||
if (e.shiftKey && (document.activeElement === first || document.activeElement === panel.current)) { e.preventDefault(); last?.focus(); }
|
||||
else if (!e.shiftKey && (document.activeElement === last || document.activeElement === panel.current)) { e.preventDefault(); first?.focus(); }
|
||||
}
|
||||
}}>
|
||||
<header><button aria-label={editing ? '返回筛选条件' : '取消设置'} onClick={() => editing ? (setEditing(null), setQuery('')) : close()}><ArrowLeft size={20} /></button><h3>{editor?.label || (mode === 'group' ? '分组设置' : '筛选条件')}</h3><button aria-label="关闭设置" onClick={close}><X size={20} /></button></header>
|
||||
{editor && <label className="analysis-settings-search"><Search size={17} /><input aria-label={`搜索${editor.label}`} placeholder={`搜索${editor.label}`} value={query} onChange={e => setQuery(e.target.value)} /></label>}
|
||||
<div className="analysis-settings-content">
|
||||
{mode === 'group' ? <><p>可选择多个维度，按选择顺序组合统计。</p><div className="analysis-settings-groups">{available.map(d => <button key={d.key} aria-pressed={draftDimensions.includes(d.key)} onClick={() => setDraftDimensions(draftDimensions.includes(d.key) ? draftDimensions.filter(v => v !== d.key) : [...draftDimensions, d.key])}><span>{d.label}</span>{draftDimensions.includes(d.key) && <span className="analysis-dimension-order">{draftDimensions.indexOf(d.key) + 1}</span>}</button>)}</div><button className="analysis-settings-row" aria-pressed={!draftDimensions.length} onClick={() => setDraftDimensions([])}>仅汇总，不分组{!draftDimensions.length && <Check size={18} />}</button></> : editor ? <>
|
||||
<div className="analysis-settings-select"><button onClick={() => setDraftFilters({ ...draftFilters, [editor.key]: [...new Set([...(draftFilters[editor.key] || []), ...options.map(o => o.value)])] })}>全选{query ? '搜索结果' : ''}</button><button onClick={() => setDraftFilters({ ...draftFilters, [editor.key]: [] })}>清除选择</button><span>{draftFilters[editor.key]?.length || 0} 项已选</span></div>
|
||||
{options.map(o => <label className="analysis-settings-option" key={o.value}><input type="checkbox" checked={draftFilters[editor.key]?.includes(o.value) || false} onChange={() => toggle(editor.key, o.value)} /><span>{o.label}</span>{o.count !== undefined && <small>{o.count.toLocaleString()}</small>}</label>)}
|
||||
{!options.length && <p>没有匹配选项，可调整搜索。</p>}
|
||||
</> : <><p>同一维度多选取并集，不同维度同时满足。未选择表示不限。</p>{available.map(d => <button className="analysis-settings-row" key={d.key} onClick={() => { setEditing(d.key); setQuery(''); }}><span>{d.label}</span><small>{draftFilters[d.key]?.length ? `已选 ${draftFilters[d.key]?.length} 项` : '不限'}</small><ChevronDown size={16} /></button>)}</>}
|
||||
</div>
|
||||
<footer><button onClick={() => mode === 'group' ? setDraftDimensions([...defaults]) : setDraftFilters({})}>重置{mode === 'group' ? '分组' : '筛选'}</button><button className="analysis-settings-apply" onClick={() => { const clean = Object.fromEntries(Object.entries(draftFilters).filter(([, values]) => values?.length)); apply(draftDimensions, clean); close(); }}>查看结果</button></footer>
|
||||
</div>
|
||||
</div>}
|
||||
</div>;
|
||||
}
|
||||
@@ -0,0 +1,40 @@
|
||||
import type { ReactNode } from 'react';
|
||||
import { Filter } from 'lucide-react';
|
||||
|
||||
type Row = { key: string; label: string; values: ReactNode[]; count: number; share: number; note?: ReactNode };
|
||||
type Props = {
|
||||
dimensions: string[];
|
||||
rows: Row[];
|
||||
unit: string;
|
||||
merged: boolean;
|
||||
setMerged: (value: boolean) => void;
|
||||
spans: number[][];
|
||||
parentTotals: number[][];
|
||||
onDetails: (index: number) => void;
|
||||
onFilter?: (index: number) => void;
|
||||
};
|
||||
|
||||
/** Retain table semantics and actual parent row spans at narrow viewport widths. */
|
||||
export function MobileGroupedTable({ dimensions, rows, unit, merged, setMerged, spans, parentTotals, onDetails, onFilter }: Props) {
|
||||
const multiple = dimensions.length > 1;
|
||||
return <section className={`analysis-mobile-grid${onFilter ? '' : ' without-filter'}`}>
|
||||
<div className="analysis-mobile-grid-heading"><strong>分组统计</strong>{multiple ? <label><input type="checkbox" role="switch" checked={merged} onChange={e => setMerged(e.target.checked)} /><span>合并单元格</span></label> : <span>数量 · 占比</span>}</div>
|
||||
{multiple && <p className="analysis-mobile-grid-hint">左右滑动查看完整表格{merged ? ' · 相同上级已合并' : ' · 每行独立显示'}</p>}
|
||||
<div className="analysis-mobile-grid-scroll" role="region" aria-label="分组统计表，可左右滑动" tabIndex={0}>
|
||||
<table style={{ minWidth: multiple ? `${dimensions.length * 108 + 192}px` : '100%' }}>
|
||||
<thead><tr>{dimensions.length ? dimensions.map((label, i) => <th scope="col" key={i}>{label}</th>) : <th scope="col">范围</th>}<th scope="col" className="mobile-grid-number">数量<small>（{unit}）</small></th><th scope="col" className="mobile-grid-share">占比</th><th scope="col" className="mobile-grid-actions">操作</th></tr></thead>
|
||||
<tbody>{rows.map((row, rowIndex) => <tr key={row.key} className={merged && spans[rowIndex]?.[0] > 0 ? 'mobile-grid-group-start' : undefined}>
|
||||
{dimensions.length ? row.values.map((value, colIndex) => {
|
||||
const span = merged ? spans[rowIndex]?.[colIndex] ?? 1 : 1;
|
||||
if (!span) return null;
|
||||
const parent = merged && colIndex < dimensions.length - 1;
|
||||
return <td key={colIndex} rowSpan={span} className={parent ? 'mobile-grid-parent' : 'mobile-grid-label'}>{value}{parent && <small>合计 <b>{parentTotals[rowIndex]?.[colIndex]?.toLocaleString('zh-CN')}</b> {unit}</small>}</td>;
|
||||
}) : <td className="mobile-grid-label">当前结果</td>}
|
||||
<td className="mobile-grid-number"><strong>{row.count.toLocaleString('zh-CN')}</strong>{row.note && <small>{row.note}</small>}</td>
|
||||
<td className="mobile-grid-share"><span>{row.share.toFixed(1)}%</span><i aria-hidden="true"><i style={{ width: `${row.share}%` }} /></i></td>
|
||||
<td className="mobile-grid-actions"><div>{onFilter && dimensions.length > 0 && <button className="mobile-grid-filter" aria-label={`筛选分组 ${row.label}`} title="筛选此组" onClick={() => onFilter(rowIndex)}><Filter size={15} /></button>}<button aria-label={`查看明细 ${row.label}`} onClick={() => onDetails(rowIndex)}>明细</button></div></td>
|
||||
</tr>)}</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</section>;
|
||||
}
|
||||
@@ -0,0 +1,157 @@
|
||||
/* Shared mobile presentation for asset statistics, filters and vehicle details. */
|
||||
@media (max-width: 767px) {
|
||||
.asset-analysis-overlay, .bi-flow-modal-backdrop { padding: 0; align-items: stretch; }
|
||||
.asset-analysis-dialog, .bi-flow-modal { width: 100%; max-width: none; height: 100dvh; max-height: 100dvh; min-height: 0; border-radius: 0; font-size: 13px; }
|
||||
.analysis-header, .bi-flow-modal-header { padding: max(6px, env(safe-area-inset-top)) 10px 6px; background: #fff; color: var(--color-slate-800, #1e293b); border-bottom: 1px solid var(--color-slate-200, #e2e8f0); }
|
||||
.analysis-header { gap: 8px; }
|
||||
.analysis-header > div { flex: 1; min-width: 0; }
|
||||
.analysis-header h2, .bi-flow-modal-header h3 { font-size: 15px; }
|
||||
.analysis-header h2 > svg { display: none; }
|
||||
.analysis-header h2, .bi-flow-modal-header h3 { border-left: 3px solid var(--color-blue-600, #2563eb); padding-left: 8px; }
|
||||
.analysis-header p, .bi-flow-modal-header p { font-size: 11px; line-height: 1.5; color: var(--color-slate-500, #64748b); }
|
||||
.analysis-header button, .bi-flow-modal-close, .bi-flow-mobile-back { display: grid; place-items: center; flex-shrink: 0; width: 44px; height: 44px; padding: 0; color: var(--color-slate-500, #64748b); background: var(--color-slate-50, #f8fafc); border-radius: 8px; }
|
||||
.analysis-header button:hover, .bi-flow-modal-close:hover { background: var(--color-blue-50, #eff6ff); }
|
||||
.analysis-scroll, .bi-flow-modal-body { padding: 12px 16px max(16px, env(safe-area-inset-bottom)); background: var(--app-bg, #f4f7fb); }
|
||||
.analysis-result-bar { padding: 10px 14px; gap: 8px; font-size: 12px; background: var(--color-blue-50, #eff6ff); border: 1px solid var(--color-blue-100, #dbeafe); border-radius: 10px; color: var(--color-slate-600, #475569); margin-bottom: 10px; }
|
||||
.analysis-result-bar strong { font-size: 28px; margin: 0 4px; color: var(--color-blue-600, #2563eb); }
|
||||
.analysis-result-dimensions { display: none; }
|
||||
.analysis-inventory-subsets { gap: 5px 12px; font-size: 11px; margin: -11px 0 8px; padding: 8px 14px; background: var(--color-blue-50, #eff6ff); border: 1px solid var(--color-blue-100, #dbeafe); border-top: 0; border-radius: 0 0 10px 10px; }
|
||||
.analysis-inventory-subsets small { width: 100%; font-size: 11px; }
|
||||
.analysis-mobile-toolbar { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 8px; }
|
||||
.analysis-mobile-toolbar > button { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; border: 1px solid #d8e0eb; border-radius: 9px; padding: 8px 12px; background: #f8fafc; color: #334155; font-size: 13px; }
|
||||
.analysis-mobile-toolbar > button:first-child { justify-content: space-between; }
|
||||
.analysis-mobile-toolbar > button > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||||
.analysis-mobile-toolbar svg { flex-shrink: 0; }
|
||||
.analysis-mobile-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
|
||||
.analysis-mobile-chips button { display: flex; align-items: center; gap: 6px; max-width: 100%; min-height: 44px; padding: 6px 10px; border-radius: 8px; color: var(--color-blue-700, #1d4ed8); background: #eff6ff; font-size: 11px; }
|
||||
.analysis-mobile-chips span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||||
.analysis-mobile-chips svg { flex-shrink: 0; }
|
||||
.analysis-overview-tools > p, .analysis-overview-tools .analysis-merge-toggle { display: none; }
|
||||
.analysis-overview-tools.is-empty { display: none; }
|
||||
.analysis-overview-tools .analysis-table-options { width: 100%; justify-content: space-between; gap: 6px; }
|
||||
.analysis-table-tools { margin: 8px 0; }
|
||||
.analysis-table-tools label, .analysis-table-tools select, .analysis-export-action button { font-size: 11px; }
|
||||
.analysis-table-tools select, .analysis-export-action button { min-height: 44px; }
|
||||
.analysis-table-tools h3 { font-size: 14px; }
|
||||
.analysis-table-tools h3 small { font-size: 12px; }
|
||||
.analysis-table-total { border: 0; border-radius: 0; background: none; padding: 8px 0; font-size: 11px; line-height: 1.6; }
|
||||
.analysis-table-total > span:last-child { display: none; }
|
||||
.analysis-mobile-detail-scope { font-size: 12px; color: #64748b; margin-bottom: 8px; }
|
||||
.analysis-search { width: 100%; min-height: 44px; padding: 9px 12px; border-radius: 8px; }
|
||||
.analysis-search input { font-size: 16px; width: 100%; }
|
||||
.analysis-vehicle-cards { display: grid; gap: 8px; margin-top: 10px; }
|
||||
.analysis-vehicle-card { min-width: 0; padding: 12px; border: 1px solid #e2e8f0; border-radius: 10px; background: #fff; }
|
||||
.analysis-vehicle-card header { display: flex; align-items: flex-start; flex-wrap: wrap; gap: 6px 12px; justify-content: space-between; }
|
||||
.analysis-vehicle-card h4 { color: var(--color-blue-700, #1d4ed8); font-size: 14px; font-weight: 600; line-height: 1.5; overflow-wrap: anywhere; }
|
||||
.analysis-vehicle-card header > span { font-size: 11px; padding: 3px 6px; border-radius: 4px; color: #475569; background: #f1f5f9; }
|
||||
.analysis-vehicle-card > p { font-size: 12px; color: #64748b; line-height: 1.6; margin-top: 6px; overflow-wrap: anywhere; }
|
||||
.analysis-vehicle-card summary { display: flex; align-items: center; min-height: 44px; font-size: 12px; color: var(--color-blue-600, #2563eb); cursor: pointer; }
|
||||
.analysis-vehicle-card summary::after { content: '＋'; margin-left: auto; }
|
||||
.analysis-vehicle-card details[open] summary::after { content: '−'; }
|
||||
.analysis-vehicle-card dl > div { display: grid; grid-template-columns: 90px minmax(0,1fr); gap: 10px; padding: 4px 0; font-size: 12px; line-height: 1.6; }
|
||||
.analysis-vehicle-card dt { color: #64748b; }
|
||||
.analysis-vehicle-card dd { color: #334155; overflow-wrap: anywhere; }
|
||||
.analysis-footer { padding: 0 16px max(0px, env(safe-area-inset-bottom)); background: #fff; font-size: 11px; }
|
||||
.analysis-footer details { width: 100%; max-height: 28dvh; overflow-y: auto; }
|
||||
.analysis-footer summary { display: flex; align-items: center; min-height: 44px; cursor: pointer; }
|
||||
.analysis-footer details p { margin-bottom: 10px; line-height: 1.6; }
|
||||
.analysis-message { font-size: 13px; min-height: 240px; }
|
||||
.analysis-message h3 { font-size: 15px; }
|
||||
.analysis-definition { font-size: 11px; }
|
||||
.analysis-details .text-base { font-size: 14px; }
|
||||
.analysis-details .text-sm { font-size: 13px; }
|
||||
.analysis-details .text-xs { font-size: 11px; }
|
||||
.analysis-details .space-y-3.px-3 { padding: 0; }
|
||||
.analysis-details .space-y-3 article { box-shadow: none; }
|
||||
.analysis-settings-backdrop { position: fixed; inset: 0; z-index: 30; background: rgb(15 23 42 / 38%); display: flex; align-items: flex-end; }
|
||||
.analysis-settings-panel { display: flex; flex-direction: column; width: 100%; height: min(680px, 90dvh); min-height: 0; background: #fff; border-radius: 12px 12px 0 0; color: #334155; box-shadow: 0 -12px 36px #0f172a20; outline: none; }
|
||||
.analysis-settings-panel header { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-bottom: 1px solid #e2e8f0; }
|
||||
.analysis-settings-panel header h3 { flex: 1; font-size: 15px; font-weight: 600; }
|
||||
.analysis-settings-panel header button { width: 44px; height: 44px; display: grid; place-items: center; }
|
||||
.analysis-settings-search { display: flex; align-items: center; gap: 8px; margin: 12px 16px 0; padding: 10px 12px; border: 1px solid #cbd5e1; border-radius: 8px; }
|
||||
.analysis-settings-search input { min-width: 0; width: 100%; font-size: 16px; outline: none; }
|
||||
.analysis-settings-content { flex: 1; min-height: 0; overflow: auto; overscroll-behavior: contain; padding: 12px 16px; }
|
||||
.analysis-settings-content > p { color: #64748b; font-size: 12px; line-height: 1.6; margin: 0 0 12px; }
|
||||
.analysis-settings-groups { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; margin-bottom: 18px; }
|
||||
.analysis-settings-groups button { min-height: 48px; display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; border: 1px solid #d8e0eb; border-radius: 8px; font-size: 13px; }
|
||||
.analysis-settings-groups button[aria-pressed=true] { color: var(--color-blue-700, #1d4ed8); background: #eff6ff; border-color: #93c5fd; }
|
||||
.analysis-settings-groups .analysis-dimension-order { width: 20px; height: 20px; font-size: 11px; }
|
||||
.analysis-settings-row { display: flex; gap: 10px; width: 100%; align-items: center; min-height: 48px; padding: 8px 0; border-bottom: 1px solid #e2e8f0; text-align: left; font-size: 13px; }
|
||||
.analysis-settings-row > span { flex: 1; }
|
||||
.analysis-settings-row > small { font-size: 12px; color: #64748b; }
|
||||
.analysis-settings-select { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; font-size: 12px; }
|
||||
.analysis-settings-select button { min-height: 44px; color: var(--color-blue-600, #2563eb); }
|
||||
.analysis-settings-select > span { margin-left: auto; color: #64748b; }
|
||||
.analysis-settings-option { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 8px 0; border-bottom: 1px solid #f1f5f9; font-size: 13px; }
|
||||
.analysis-settings-option input { width: 18px; height: 18px; accent-color: var(--color-blue-600, #2563eb); flex-shrink: 0; }
|
||||
.analysis-settings-option span { flex: 1; overflow-wrap: anywhere; }
|
||||
.analysis-settings-option small { color: #64748b; font-size: 12px; }
|
||||
.analysis-settings-panel footer { display: grid; grid-template-columns: 1fr 2fr; gap: 12px; padding: 12px 16px max(12px, env(safe-area-inset-bottom)); border-top: 1px solid #e2e8f0; }
|
||||
.analysis-settings-panel footer button { min-height: 46px; border-radius: 9px; background: #f1f5f9; font-size: 13px; }
|
||||
.analysis-settings-panel footer .analysis-settings-apply { background: var(--color-blue-600, #2563eb); color: #fff; }
|
||||
}
|
||||
@media (max-width: 767px) {
|
||||
.bi-flow-modal-header-row { align-items: center; gap: 8px; }
|
||||
.bi-flow-modal-header-row > div { flex: 1; min-width: 0; }
|
||||
.bi-flow-modal-summary { margin: 0 0 12px; background: var(--color-blue-50, #eff6ff); border-color: var(--color-blue-100, #dbeafe); }
|
||||
.bi-flow-modal-summary > div { padding: 10px 8px; gap: 6px; }
|
||||
.bi-flow-modal-summary span, .bi-flow-modal strong small { font-size: 11px; }
|
||||
.bi-flow-modal-summary strong { font-size: 23px; }
|
||||
.bi-flow-modal-section-heading { margin: 12px 0 4px; }
|
||||
.bi-flow-modal-section-heading h4 { font-size: 14px; }
|
||||
.bi-flow-modal-section-heading p { font-size: 11px; }
|
||||
.bi-flow-modal-empty { font-size: 13px; line-height: 1.7; color: #64748b; }
|
||||
}
|
||||
@media (max-width: 767px) {
|
||||
.analysis-details .space-y-3 dt { font-size: 11px; line-height: 1.8; }
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
.analysis-mobile-controls { position: sticky; top: -12px; z-index: 5; background: var(--app-bg, #f4f7fb); padding: 0 0 6px; }
|
||||
.analysis-mobile-dimension-heading { display: flex; align-items: center; gap: 8px; color: var(--color-slate-700, #334155); font-size: 12px; }
|
||||
.analysis-mobile-dimension-heading > span { color: var(--color-slate-500, #64748b); font-size: 11px; }
|
||||
.analysis-mobile-dimension-heading > button { margin-left: auto; min-height: 44px; color: var(--color-blue-600, #2563eb); font-size: 11px; }
|
||||
.analysis-mobile-toolbar { grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
|
||||
.analysis-mobile-toolbar > button { align-self: start; height: 44px; padding: 0 8px; gap: 4px; white-space: nowrap; color: var(--color-blue-600, #2563eb); border-color: var(--color-blue-100, #dbeafe); background: var(--color-blue-50, #eff6ff); }
|
||||
.analysis-dimension-strip { display: flex; gap: 6px; min-width: 0; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin; scrollbar-color: var(--color-slate-300, #cbd5e1) transparent; padding-bottom: 4px; }
|
||||
.analysis-dimension-strip button { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 0 11px; border: 1px solid var(--color-slate-200, #e2e8f0); border-radius: 8px; background: #fff; color: var(--color-slate-600, #475569); font-size: 12px; }
|
||||
.analysis-dimension-strip button[aria-pressed=true] { background: var(--color-blue-600, #2563eb); border-color: var(--color-blue-600, #2563eb); color: #fff; box-shadow: 0 2px 4px rgb(37 99 235 / 12%); }
|
||||
.analysis-dimension-strip small { display: grid; place-items: center; width: 17px; height: 17px; border-radius: 50%; background: #ffffff2b; font-size: 10px; }
|
||||
.analysis-mobile-grid { border: 1px solid var(--color-slate-200, #e2e8f0); border-radius: 10px; overflow: hidden; background: #fff; box-shadow: 0 2px 6px rgb(15 23 42 / 3%); }
|
||||
.analysis-mobile-grid-heading { min-height: 44px; display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 0 12px; background: var(--color-blue-50, #eff6ff); color: var(--color-slate-700, #334155); font-size: 12px; }
|
||||
.analysis-mobile-grid-heading > span { font-size: 11px; color: var(--color-slate-500, #64748b); }
|
||||
.analysis-mobile-grid-heading label { display: inline-flex; align-items: center; gap: 7px; min-height: 44px; font-size: 11px; cursor: pointer; }
|
||||
.analysis-mobile-grid-heading input { appearance: none; width: 30px; height: 18px; border-radius: 10px; background: var(--color-slate-400, #94a3b8); position: relative; cursor: pointer; }
|
||||
.analysis-mobile-grid-heading input::after { content: ''; position: absolute; top: 3px; left: 3px; width: 12px; height: 12px; border-radius: 50%; background: #fff; }
|
||||
.analysis-mobile-grid-heading input:checked { background: var(--color-blue-600, #2563eb); }
|
||||
.analysis-mobile-grid-heading input:checked::after { left: 15px; }
|
||||
.analysis-mobile-grid-hint { padding: 6px 12px; font-size: 11px; color: var(--color-slate-500, #64748b); border-bottom: 1px solid var(--color-slate-200, #e2e8f0); background: var(--color-slate-50, #f8fafc); }
|
||||
.analysis-mobile-grid-scroll { overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin; }
|
||||
.analysis-mobile-grid table { width: 100%; border-collapse: separate; border-spacing: 0; table-layout: fixed; font-size: 12px; }
|
||||
.analysis-mobile-grid th { background: var(--color-slate-50, #f8fafc); color: var(--color-slate-500, #64748b); font-weight: 500; padding: 7px 6px; text-align: left; border-bottom: 1px solid var(--color-slate-200, #e2e8f0); }
|
||||
.analysis-mobile-grid th:first-child { padding-left: 12px; }
|
||||
.analysis-mobile-grid td { padding: 4px 6px; border-bottom: 1px solid var(--color-slate-100, #f1f5f9); vertical-align: middle; overflow-wrap: anywhere; color: var(--color-slate-700, #334155); line-height: 1.5; }
|
||||
.analysis-mobile-grid tr:nth-child(even) td { background: var(--color-slate-50, #f8fafc); }
|
||||
.analysis-mobile-grid tr:last-child td { border-bottom: 0; }
|
||||
.analysis-mobile-grid td:first-child { padding-left: 12px; }
|
||||
.analysis-mobile-grid .mobile-grid-parent { background: var(--color-blue-50, #eff6ff); border-right: 1px solid var(--color-blue-100, #dbeafe); font-weight: 600; vertical-align: top; padding-top: 14px; }
|
||||
.analysis-mobile-grid .mobile-grid-parent small { display: block; margin-top: 6px; font-size: 11px; font-weight: 400; color: var(--color-slate-500, #64748b); }
|
||||
.analysis-mobile-grid .mobile-grid-group-start:not(:first-child) td { border-top: 1px solid var(--color-slate-300, #cbd5e1); }
|
||||
.analysis-mobile-grid .mobile-grid-number { width: 60px; text-align: right; font-variant-numeric: tabular-nums; }
|
||||
.analysis-mobile-grid th small { display: block; font-size: 10px; }
|
||||
.analysis-mobile-grid td.mobile-grid-number strong { font-size: 17px; color: var(--color-blue-600, #2563eb); font-weight: 600; }
|
||||
.analysis-mobile-grid td.mobile-grid-number small { display: block; font-size: 10px; color: var(--color-amber-600, #d97706); }
|
||||
.analysis-mobile-grid .mobile-grid-share { width: 58px; text-align: right; font-size: 11px; font-variant-numeric: tabular-nums; }
|
||||
.mobile-grid-share > i { display: block; margin-top: 5px; height: 3px; border-radius: 3px; overflow: hidden; background: var(--color-blue-100, #dbeafe); }
|
||||
.mobile-grid-share > i > i { display: block; height: 100%; background: var(--color-blue-500, #3b82f6); }
|
||||
.analysis-mobile-grid .mobile-grid-actions { width: 90px; text-align: center; padding-left: 0; padding-right: 4px; }
|
||||
.analysis-mobile-grid.without-filter .mobile-grid-actions { width: 56px; }
|
||||
.mobile-grid-actions > div { display: flex; justify-content: flex-end; }
|
||||
.mobile-grid-actions button { display: grid; place-items: center; min-width: 44px; height: 44px; color: var(--color-blue-600, #2563eb); font-size: 11px; border-radius: 7px; }
|
||||
.mobile-grid-actions button:active { background: #dbeafe; }
|
||||
.mobile-grid-actions .mobile-grid-filter { color: var(--color-slate-400, #94a3b8); }
|
||||
.analysis-table-tools { margin-top: 0; }
|
||||
.analysis-mobile-detail-scope { padding: 10px 12px; border-left: 3px solid var(--color-blue-600, #2563eb); border-radius: 0 6px 6px 0; background: var(--color-blue-50, #eff6ff); color: var(--color-slate-600, #475569); }
|
||||
.analysis-vehicle-card { border-color: var(--color-slate-200, #e2e8f0); border-top: 3px solid var(--color-blue-100, #dbeafe); }
|
||||
.bi-flow-modal-summary strong { color: var(--color-blue-600, #2563eb); }
|
||||
}
|
||||
@@ -8,7 +8,7 @@ const parseDate = (value: string) => new Date(`${value}T12:00:00`);
|
||||
const shiftDay = (date: Date, offset: number) => new Date(date.getFullYear(), date.getMonth(), date.getDate() + offset);
|
||||
const dayCount = (start: string, end: string) => Math.round((Date.parse(`${end}T00:00:00Z`) - Date.parse(`${start}T00:00:00Z`)) / 86400000) + 1;
|
||||
|
||||
export function FlowDateRangePicker({ value, onChange }: { value: DateRange; onChange: (range: DateRange) => void }) {
|
||||
export function FlowDateRangePicker({ value, onChange, dateLabel = '运维签章时间' }: { value: DateRange; onChange: (range: DateRange) => void; dateLabel?: string }) {
|
||||
const dialog = useRef<HTMLDialogElement>(null);
|
||||
const [draft, setDraft] = useState(value);
|
||||
const [selecting, setSelecting] = useState<'start' | 'end'>('start');
|
||||
@@ -69,7 +69,7 @@ export function FlowDateRangePicker({ value, onChange }: { value: DateRange; onC
|
||||
className="mt-3 flex w-full items-center gap-3 rounded-2xl border border-slate-200 bg-white px-4 py-3 text-left shadow-sm transition hover:border-blue-300 hover:bg-blue-50/40 focus-visible:outline-2 focus-visible:outline-blue-500">
|
||||
<span className="flex h-9 w-9 shrink-0 items-center justify-center rounded-xl bg-blue-50 text-blue-600"><CalendarDays size={18} /></span>
|
||||
<span className="min-w-0 flex-1">
|
||||
<span className="block text-[10px] font-medium text-slate-400">统计日期 · 运维签章时间</span>
|
||||
<span className="block text-[10px] font-medium text-slate-400">统计日期 · {dateLabel}</span>
|
||||
<span className="mt-1 flex items-center gap-2 text-[13px] font-bold text-slate-700"><span>{value.start.replaceAll('-', '/')}</span><ArrowRight size={13} className="shrink-0 text-slate-300" /><span>{value.end.replaceAll('-', '/')}</span></span>
|
||||
</span>
|
||||
<span className="hidden rounded-lg bg-slate-100 px-2 py-1 text-[11px] font-medium text-slate-500 sm:block">{dayCount(value.start, value.end)} 天</span>
|
||||
|
||||
@@ -0,0 +1,42 @@
|
||||
import { useState } from 'react';
|
||||
import { Bar, BarChart, CartesianGrid, LabelList, ResponsiveContainer, Tooltip, XAxis, YAxis } from 'recharts';
|
||||
import { ArrowUpRight, Info } from 'lucide-react';
|
||||
import type { FaultAnalysisRecord, FaultDashboardDimension, FaultDashboardResponse, FaultDashboardScope, FaultDistribution } from '../../../shared/assets/faults';
|
||||
export type DashboardDrill = (title: string, scope?: FaultDashboardScope, filters?: Record<string, string>) => void;
|
||||
const colors = ['#ef4444','#f59e0b','#2563eb','#93c5fd','#94a3b8'];
|
||||
export function DashboardPanels({data, drill}:{data:FaultDashboardResponse;drill:DashboardDrill}) {
|
||||
const [dimension,setDimension]=useState<'region'|'level'|'customer'|'model'>('region');
|
||||
const [metric,setMetric]=useState<'reported'|'vehicles'>('reported');
|
||||
const [expanded,setExpanded]=useState(false),[matrixExpanded,setMatrixExpanded]=useState(false),[customersExpanded,setCustomersExpanded]=useState(false);
|
||||
const groups=data.distributions[dimension],shown=expanded?groups:groups.slice(0,8);
|
||||
const levels=[...data.distributions.level].sort((a,b)=>(a.value==='未标注'?1:0)-(b.value==='未标注'?1:0)||a.value.localeCompare(b.value,'zh-CN'));
|
||||
const models=matrixExpanded?data.matrix.models:data.matrix.models.slice(0,3);
|
||||
const max=Math.max(1,...data.matrix.cells.map(c=>c.count));
|
||||
const customers=[...data.distributions.customer].sort((a,b)=>b.vehicles-a.vehicles||b.reported-a.reported);
|
||||
const chartDrill=(datum:unknown,key:FaultDashboardDimension,title:string)=>{const row=(datum as {payload?:FaultDistribution})?.payload;if(row)drill(`${title} · ${row.label}`,'cohort',{[key]:row.value});};
|
||||
return <>
|
||||
<div className="fd-grid fd-grid-primary">
|
||||
<section className="fd-panel" aria-label="故障分布与对比"><div className="fd-panel-title"><h2>故障分布与对比</h2><span>按本期提报队列统计，截至当前的闭环状态。</span></div>
|
||||
<div className="fd-chart-controls"><div className="fd-segment" aria-label="故障分布维度">{([['region','区域'],['level','程度'],['customer','客户'],['model','车型']] as const).map(([key,label])=><button key={key} aria-pressed={dimension===key} onClick={()=>{setDimension(key);setExpanded(false);}}>{label}</button>)}</div><div className="fd-segment" aria-label="故障分布指标"><button aria-pressed={metric==='reported'} onClick={()=>setMetric('reported')}>故障量</button><button aria-pressed={metric==='vehicles'} onClick={()=>setMetric('vehicles')}>受影响车辆</button><button disabled title="缺少同期服务车辆规模，暂不计算发生频率">发生频率 · 待补分母</button></div></div>
|
||||
<div className="fd-legend">{metric==='reported'?<><span className="fd-blue">已闭环 {groups.reduce((n,r)=>n+r.closed,0)}</span><span className="fd-orange">未闭环 {groups.reduce((n,r)=>n+r.unclosed,0)}</span></>:<span className="fd-blue">按车辆去重 · 辆</span>}</div>
|
||||
{shown.length?<div className="fd-distribution-chart"><ResponsiveContainer width="100%" height={Math.max(150,shown.length*26)} minWidth={0}><BarChart data={shown} layout="vertical" margin={{top:4,right:30,left:0,bottom:0}}>
|
||||
<CartesianGrid horizontal={false} stroke="#edf2fa"/><XAxis type="number" allowDecimals={false} axisLine={false} tickLine={false} tick={{fontSize:10,fill:'#7c8ba7'}}/><YAxis type="category" dataKey="label" interval={0} width={116} axisLine={false} tickLine={false} tick={{fontSize:11,fill:'#334155'}} tickFormatter={v=>v.length>12?`${v.slice(0,11)}…`:v}/><Tooltip cursor={{fill:'#f4f7fc'}} contentStyle={{borderRadius:8,borderColor:'#e2e8f0',fontSize:12}}/>
|
||||
{metric==='reported'?<><Bar dataKey="closed" name="已闭环" stackId="faults" fill="#2475ff" maxBarSize={18} isAnimationActive={false} cursor="pointer" onClick={d=>chartDrill(d,dimension,'故障分布')}><LabelList dataKey={(row:FaultDistribution)=>row.unclosed===0?row.reported:''} position="right" fontSize={10} fill="#334155"/></Bar><Bar dataKey="unclosed" name="未闭环" stackId="faults" fill="#ff981a" maxBarSize={18} isAnimationActive={false} cursor="pointer" onClick={d=>chartDrill(d,dimension,'故障分布')}><LabelList dataKey="reported" position="right" fontSize={10} fill="#334155"/></Bar></>:<Bar dataKey="vehicles" name="受影响车辆" fill="#2475ff" maxBarSize={18} isAnimationActive={false} cursor="pointer" onClick={d=>chartDrill(d,dimension,'受影响车辆对应故障')}><LabelList dataKey="vehicles" position="right" fontSize={10} fill="#334155"/></Bar>}</BarChart></ResponsiveContainer></div>:<p className="fd-empty">所选条件下暂无故障。</p>}
|
||||
<div className="fd-panel-foot"><span>点击图表查看对应故障；车辆跨组可能重复，不直接累加。</span>{groups.length>8&&<button onClick={()=>setExpanded(!expanded)}>{expanded?'收起':`全部 ${groups.length} 组`}</button>}</div>
|
||||
<details className="fd-chart-data"><summary>查看精确数量与下钻</summary><table><thead><tr><th>分组</th><th>故障量</th><th>已闭环</th><th>未闭环</th><th>车辆</th></tr></thead><tbody>{groups.map(r=><tr key={r.value}><td><button onClick={()=>drill(r.label,'cohort',{[dimension]:r.value})}>{r.label}</button></td><td>{r.reported}</td><td>{r.closed}</td><td>{r.unclosed}</td><td>{r.vehicles}</td></tr>)}</tbody></table></details>
|
||||
</section>
|
||||
<section className="fd-panel" aria-label="故障程度"><div className="fd-panel-title"><h2>故障程度</h2><span className="fd-chip">现有等级口径</span></div><p className="fd-caption">按本期故障数量统计，点击等级查看明细。</p>
|
||||
<div className="fd-level-list">{levels.map(row=><button key={row.value} onClick={()=>drill(`故障程度 · ${row.label}`,'cohort',{level:row.value})}><span>{row.label}</span><span className="fd-level-track"><span style={{width:`${row.reported/Math.max(1,...levels.map(r=>r.reported))*100}%`,background:colors[/^L[1-4]/.test(row.value)?Number(row.value[1])-1:4]}}/></span><b>{row.reported}</b><ArrowUpRight size={12}/></button>)}</div>
|
||||
{!levels.length&&<p className="fd-empty">暂无等级统计。</p>}
|
||||
<p className="fd-info"><Info size={15}/>等级不等于实际停运影响，请结合车辆状态与服务记录判断。</p><p className="fd-caption">未标注等级 {data.quality.missingLevel} 单；停运车辆与修复时长待补数据。</p>
|
||||
</section>
|
||||
</div>
|
||||
<div className="fd-grid fd-grid-secondary">
|
||||
<section className="fd-panel" aria-label="品牌车型与故障部位"><div className="fd-panel-title"><h2>品牌车型 × 故障部位</h2><span>点击交叉单元格查看对应故障。</span></div><div className="fd-table-scroll"><table className="fd-matrix"><thead><tr><th>品牌车型</th>{data.matrix.categories.map(c=><th key={c.value}>{c.label}</th>)}<th>合计</th></tr></thead><tbody>{models.map(m=><tr key={m.value}><th title={m.label}>{m.label}</th>{data.matrix.categories.map(c=>{const count=data.matrix.cells.find(cell=>cell.model===m.value&&cell.category===c.value)?.count||0;return <td key={c.value} style={{background:count?`rgba(36,117,255,${.08+.52*count/max})`:undefined}}><button disabled={!count} aria-label={`${m.label}，${c.label}，${count} 单`} onClick={()=>drill(`${m.label} · ${c.label}`,'cohort',{model:m.value,category:c.value})}>{count||'—'}</button></td>})}<td><button onClick={()=>drill(m.label,'cohort',{model:m.value})}>{data.matrix.totals[m.value]}</button></td></tr>)}</tbody></table></div>{!models.length&&<p className="fd-empty">暂无车型与部位数据。</p>}<div className="fd-panel-foot"><span>一单多部位分别计入，合计按故障单去重。</span>{data.matrix.models.length>3&&<button onClick={()=>setMatrixExpanded(!matrixExpanded)}>{matrixExpanded?'收起':`全部 ${data.matrix.models.length} 个车型`}</button>}</div></section>
|
||||
<section className="fd-panel" aria-label="客户受影响情况"><div className="fd-panel-title"><h2>客户受影响情况</h2><span>同一车辆在同一客户下去重。</span></div><div className="fd-table-scroll"><table className="fd-customers"><thead><tr><th>#</th><th>客户名称</th><th>本期影响车辆</th><th>当前在办</th></tr></thead><tbody>{(customersExpanded?customers:customers.slice(0,4)).map((r,i)=><tr key={r.value}><td>{i+1}</td><td><button onClick={()=>drill(r.label,'cohort',{customer:r.value})}>{r.label}</button></td><td><button className="fd-customer-meter" onClick={()=>drill(`${r.label} · 本期故障`,'cohort',{customer:r.value})}><progress max={Math.max(1,customers[0]?.vehicles||0)} value={r.vehicles}/><b>{r.vehicles}</b></button></td><td><button className="fd-danger" disabled={!r.open} onClick={()=>drill(`${r.label} · 当前在办`,'open',{customer:r.value})}>{r.open}</button></td></tr>)}</tbody></table></div>{!customers.length&&<p className="fd-empty">暂无客户影响数据。</p>}<div className="fd-panel-foot"><span>当前在办不限制提报日期；库存车单独展示。</span>{customers.length>4&&<button onClick={()=>setCustomersExpanded(!customersExpanded)}>{customersExpanded?'收起':`全部 ${customers.length} 组`}</button>}</div></section>
|
||||
</div>
|
||||
</>;
|
||||
}
|
||||
export function DashboardTicketTable({rows,updatedAt,drill,emptyMessage='当前条件下暂无故障。'}:{rows:FaultAnalysisRecord[];updatedAt:string;drill:DashboardDrill;emptyMessage?:string}) {
|
||||
return <div className="fd-table-scroll"><table className="fd-tickets"><thead><tr><th>车辆 / 故障单号</th><th>运维处置人</th><th>区域 / 客户</th><th>等级</th><th>当前状态</th><th>处置记录 / 故障描述</th><th>提报时间</th><th>操作</th></tr></thead><tbody>{rows.map(row=>{const overdue=['待处理','处理中'].includes(row.status)&&row.deadlineAt&&Date.parse(`${row.deadlineAt.replace(' ','T')}+08:00`)<Date.parse(updatedAt);return <tr key={row.id}><td><strong>{row.plate}</strong><small>{row.code}</small></td><td>{row.handlers.map(h=>h.label).join('、')}</td><td>{row.cell.region}<small>{row.customerLabel}</small></td><td><span className={`fd-grade fd-grade-${row.level?.slice(0,2)}`}>{row.level||'未标注'}</span></td><td><span className={row.status==='已归档'?'fd-green':'fd-orange'}>{row.status==='已归档'?'已闭环':row.status}</span>{overdue&&<small className="fd-overdue-tag">已逾期</small>}</td><td className="fd-description" title={row.progress||row.description}>{row.progress||row.description||'暂无处置记录'}</td><td>{row.reportedAt||'未记录'}</td><td><button onClick={()=>drill(`${row.plate} · ${row.code}`,'ledger',{id:row.id})}>查看</button></td></tr>})}</tbody></table>{!rows.length&&<p className="fd-empty">{emptyMessage}</p>}</div>;
|
||||
}
|
||||
@@ -0,0 +1,16 @@
|
||||
/** Neutral placeholders communicate structure without suggesting partial statistics. */
|
||||
export function FaultAnalysisLoading() {
|
||||
return <div className="fault-analysis-loading" role="status" aria-live="polite">
|
||||
<div className="fault-loading-status">
|
||||
<svg className="fault-loading-spinner" viewBox="0 0 32 32" aria-hidden="true">
|
||||
{Array.from({ length: 12 }, (_, i) => <rect key={i} x="14.75" y="2" width="2.5" height="7" rx="1.25" fill="currentColor" transform={`rotate(${i * 30} 16 16)`} style={{ animationDelay: `${i / 12 - 1}s` }} />)}
|
||||
</svg>
|
||||
<span>正在加载故障数据…</span>
|
||||
</div>
|
||||
<div className="fault-loading-skeleton" aria-hidden="true">
|
||||
<div className="fault-loading-controls"><span className="fault-loading-block fault-loading-title" /><div>{Array.from({ length: 6 }, (_, i) => <span className="fault-loading-block" key={i} />)}</div></div>
|
||||
<div className="fault-loading-summary"><span className="fault-loading-block" /><span className="fault-loading-block" /></div>
|
||||
<div className="fault-loading-table"><div className="fault-loading-table-head">{Array.from({ length: 3 }, (_, i) => <span className="fault-loading-block" key={i} />)}</div>{Array.from({ length: 5 }, (_, i) => <div className="fault-loading-row" key={i}><span className="fault-loading-block" /><span className="fault-loading-block" /><span className="fault-loading-block" /></div>)}</div>
|
||||
</div>
|
||||
</div>;
|
||||
}
|
||||
@@ -0,0 +1,100 @@
|
||||
import { useEffect, useMemo, useRef, useState } from 'react';
|
||||
import { ArrowLeft, Search, Wrench, X } from 'lucide-react';
|
||||
import { fetchJson } from '../../../auth/api-client';
|
||||
import { FAULT_OVERVIEW_METRICS, type FaultAnalysisResponse, type FaultOverviewMetric } from '../../../shared/assets/faults';
|
||||
import { getDimensionValueLabel } from '../analytics-model';
|
||||
import { FAULT_CLOSURE_LABELS, FAULT_ANALYSIS_DIMENSIONS, FAULT_ANALYSIS_LABELS as DIMENSION_LABELS, analyzeFaultRecords, filterFaultRecords, faultDimensionValues, faultParentTotals, type FaultAnalysisDimension, type FaultAnalysisFilters, type FaultAnalysisGroup } from './analysis-model';
|
||||
import { dimensionRowSpans, orderDimensionGroups } from '../dimension-layout';
|
||||
import { FaultAnalysisLoading } from './FaultAnalysisLoading';
|
||||
import { DimensionPicker } from '../components/analysis/DimensionPicker';
|
||||
import { MobileAnalysisControls } from '../components/analysis/MobileAnalysisControls';
|
||||
import { MobileGroupedTable } from '../components/analysis/MobileGroupedTable';
|
||||
import { useDialogFocus } from '../components/useDialogFocus';
|
||||
import { useMobileLayout } from '../useMobileLayout';
|
||||
import '../components/analysis/asset-analysis.css';
|
||||
import '../components/analysis/mobile-analysis.css';
|
||||
|
||||
const available = FAULT_ANALYSIS_DIMENSIONS;
|
||||
// Page-lifetime memory only: closing a modal retains settings; a full reload clears them.
|
||||
const analysisSettings = new Map<string, { dimensions: FaultAnalysisDimension[]; filters: FaultAnalysisFilters }>();
|
||||
export interface FaultAnalysisSource { url: string; title: string; periodLabel: string; definition?: string; defaultDimensions?: FaultAnalysisDimension[]; initialDetails?: boolean }
|
||||
export function FaultAnalysisModal({ metric, onClose, source }: { metric: FaultOverviewMetric; onClose: () => void; source?: FaultAnalysisSource }) {
|
||||
const ref = useRef<HTMLDivElement>(null);
|
||||
useDialogFocus(true, ref, onClose);
|
||||
const mobile = useMobileLayout();
|
||||
const [data, setData] = useState<FaultAnalysisResponse | null>(null);
|
||||
const [error, setError] = useState('');
|
||||
const [revision, setRevision] = useState(0);
|
||||
const defaultDimensions: FaultAnalysisDimension[] = source?.defaultDimensions || ['type'];
|
||||
const settingsKey = source?.url || `overview:${metric}`;
|
||||
const [dimensions, setDimensions] = useState<FaultAnalysisDimension[]>(() => analysisSettings.get(settingsKey)?.dimensions || defaultDimensions);
|
||||
const [filters, setFilters] = useState<FaultAnalysisFilters>(() => analysisSettings.get(settingsKey)?.filters || {});
|
||||
const [merged, setMerged] = useState(true);
|
||||
const [sort, setSort] = useState<'count-desc' | 'count-asc' | 'label'>('count-desc');
|
||||
const [group, setGroup] = useState<FaultAnalysisGroup | null>(null);
|
||||
const [search, setSearch] = useState('');
|
||||
const [limit, setLimit] = useState(50);
|
||||
useEffect(() => {
|
||||
const controller = new AbortController();
|
||||
setError(''); setData(null);
|
||||
fetchJson<FaultAnalysisResponse>(source?.url || `/api/asset-faults/analysis?metric=${metric}`, { signal: controller.signal })
|
||||
.then(result => { if (!controller.signal.aborted) { setData(result); if (source?.initialDetails) setGroup({key:"all", values:{}, count:result.rows.length, share:100, recordIds:result.rows.map(r=>r.id)}); } }).catch(e => { if (!controller.signal.aborted) setError(e instanceof Error ? e.message : '加载失败'); });
|
||||
return () => controller.abort();
|
||||
}, [metric, revision, source?.url]);
|
||||
const records = useMemo(() => data?.rows || [], [data]);
|
||||
const handlerLabels = useMemo(() => new Map(records.flatMap(row => row.handlers.map(h => [h.value, h.label] as const))), [records]);
|
||||
const label = (d: FaultAnalysisDimension, value: string) => d === 'plate' ? value : d === 'faultStatus' ? FAULT_CLOSURE_LABELS[value] || value : d === 'handler' ? handlerLabels.get(value) || '未指派' : d === 'customer' ? data?.customerLabels[value] || '未关联客户' : getDimensionValueLabel(d, value);
|
||||
const options = available.map(key => {
|
||||
const otherFilters = { ...filters }; delete otherFilters[key];
|
||||
const counts = new Map<string, number>();
|
||||
filterFaultRecords(records, otherFilters).forEach(row => faultDimensionValues(row, key).forEach(value => counts.set(value, (counts.get(value) || 0) + 1)));
|
||||
// Keep applied selections removable even if another filter excludes them.
|
||||
filters[key]?.forEach(value => { if (!counts.has(value)) counts.set(value, 0); });
|
||||
return { key, label: DIMENSION_LABELS[key], options: [...counts].map(([value, count]) => ({ value, count, label: label(key, value) })).sort((a, b) => a.label.localeCompare(b.label, 'zh-CN')) };
|
||||
});
|
||||
const analysis = useMemo(() => analyzeFaultRecords(records, dimensions, filters), [records, dimensions, filters]);
|
||||
const values = (row: FaultAnalysisGroup) => dimensions.map(d => row.values[d]!);
|
||||
const ordered = orderDimensionGroups(analysis.rows, dimensions.length, values, row => row.count, sort,
|
||||
(a, b, i) => label(dimensions[i], values(a)[i]).localeCompare(label(dimensions[i], values(b)[i]), 'zh-CN'));
|
||||
const rows = ordered.slice(0, limit);
|
||||
const spans = dimensionRowSpans(rows, dimensions.length, values);
|
||||
const totals = faultParentTotals(ordered, dimensions);
|
||||
const groupLabel = (row: FaultAnalysisGroup) => dimensions.map(d => label(d, row.values[d]!)).join(' · ') || '合计';
|
||||
const apply = (dims: FaultAnalysisDimension[], nextFilters: FaultAnalysisFilters) => {
|
||||
const saved = { dimensions: [...dims], filters: Object.fromEntries(Object.entries(nextFilters).filter(([, values]) => values?.length).map(([key, values]) => [key, [...values!]])) };
|
||||
analysisSettings.set(settingsKey, saved);
|
||||
setDimensions(saved.dimensions); setFilters(saved.filters); setLimit(50);
|
||||
};
|
||||
const reset = () => { analysisSettings.delete(settingsKey); setDimensions([...defaultDimensions]); setFilters({}); setLimit(50); };
|
||||
const showDetails = (row: FaultAnalysisGroup) => { setGroup(row); setSearch(''); setLimit(50); };
|
||||
const filterGroup = (row: FaultAnalysisGroup) => apply(dimensions, { ...filters, ...Object.fromEntries(dimensions.map(d => [d, [row.values[d]!]])) });
|
||||
const groupIds = useMemo(() => new Set(group?.recordIds || []), [group]);
|
||||
const details = group ? records.filter(row => groupIds.has(row.id) &&
|
||||
`${row.code} ${row.plate} ${row.description} ${row.status} ${row.handlers.map(h => h.label).join(' ')}`.toLocaleLowerCase().includes(search.trim().toLocaleLowerCase()))
|
||||
.sort((a, b) => (b.reportedAt || '').localeCompare(a.reportedAt || '') || b.id.localeCompare(a.id, undefined, { numeric: true })) : [];
|
||||
return <div className="asset-analysis-overlay fault-analysis-overlay" onClick={e => { if (e.target === e.currentTarget) onClose(); }}>
|
||||
<div className="asset-analysis-dialog fault-analysis-dialog" ref={ref} role="dialog" aria-modal="true" aria-labelledby="fault-analysis-title" tabIndex={-1}>
|
||||
<header className="analysis-header"><div><h2 id="fault-analysis-title"><Wrench size={18} />{source?.title || FAULT_OVERVIEW_METRICS[metric]} · {group ? '故障明细' : '多维分析'}</h2><p>{source?.periodLabel || `${data?.date || '正在读取数据'} · ${metric !== 'reported' && metric !== 'closed' ? '全部日期' : '北京时间自然日'}`} · 按故障单统计</p></div><button onClick={onClose} aria-label="关闭故障分析"><X size={20} /></button></header>
|
||||
<div className="analysis-scroll">
|
||||
{error ? <div className="fault-message" role="alert">{error}<button onClick={() => setRevision(v => v + 1)}>重试</button></div> : !data ? <FaultAnalysisLoading /> : group ? <>
|
||||
<div className="analysis-table-tools"><button className="analysis-button" onClick={() => { setGroup(null); setLimit(50); }}><ArrowLeft size={14} />返回分组</button><span>{groupLabel(group)} · {details.length.toLocaleString()} 单</span><label className="fault-detail-search"><Search size={14} /><input aria-label="搜索故障明细" placeholder="搜索单号、车牌、描述、处置人" value={search} onChange={e => { setSearch(e.target.value); setLimit(50); }} /></label></div>
|
||||
<div className="analysis-group-table is-merged fault-detail-table"><table><thead><tr>{['车牌 / 故障单号', '运维处置人', '故障描述', '状态', '提报时间', '解决时间', '运营城市', '客户 / 部门'].map(h => <th key={h}>{h}</th>)}</tr></thead><tbody>{details.slice(0, limit).map(row => <tr key={row.id}><td><strong>{row.plate || '未关联车辆'}</strong><small>{row.code || '未编号'}</small></td><td>{row.handlers.map(h => h.label).join('、') || '未指派'}</td><td>{row.description || '—'}</td><td>{row.status}</td><td>{row.reportedAt || '—'}</td><td>{row.archivedAt || '—'}</td><td>{row.city}</td><td>{row.customerLabel}<small>{row.department}</small></td></tr>)}</tbody></table></div>
|
||||
{!details.length && <p className="fault-empty">没有符合条件的故障明细</p>}
|
||||
{details.length > limit && <button className="analysis-button fault-more" onClick={() => setLimit(v => v + 50)}>加载更多明细（已显示 {limit} / {details.length}）</button>}
|
||||
</> : <>
|
||||
{mobile ? <MobileAnalysisControls available={options} dimensions={dimensions} filters={filters} defaults={defaultDimensions} apply={(dims, next) => apply(dims as FaultAnalysisDimension[], next)} /> : <div className="analysis-builder"><div className="analysis-builder-heading"><h3>分析维度</h3><span>点击维度分组，展开箭头可多选筛选</span><button className="analysis-reset" onClick={reset}>重置</button></div><div className="analysis-dimension-options">{options.map(d => <DimensionPicker key={d.key} label={d.label} grouped={dimensions.includes(d.key)} order={dimensions.indexOf(d.key) + 1} options={d.options} selectedValues={filters[d.key]} onToggleGroup={() => apply(dimensions.includes(d.key) ? dimensions.filter(v => v !== d.key) : [...dimensions, d.key], filters)} onApplyFilter={selected => apply(dimensions, { ...filters, [d.key]: selected })} />)}<button aria-pressed={!dimensions.length} onClick={() => apply([], filters)}>仅汇总</button></div></div>}
|
||||
<div className="analysis-result-bar"><span>当前结果<strong>{analysis.total.toLocaleString()}</strong>单</span><span>{analysis.rows.length.toLocaleString()} 个分组</span>{mobile && <button className="analysis-text-button" onClick={reset}>重置</button>}<button className="analysis-text-button" onClick={() => showDetails({ key: 'all', values: {}, count: analysis.total, share: 100, recordIds: filterFaultRecords(records, filters).map(row => row.id) })} disabled={dimensions.length > 0 || !analysis.total} hidden={dimensions.length > 0}>查看全部明细</button></div>
|
||||
{dimensions.includes('handler') && <p className="fault-analysis-note">运维处置人来自故障或关联工单的当前处置分配。多人共同处置分别计入各人，总数和上级小计按故障去重，人员行不可直接相加。</p>}
|
||||
<div className="analysis-table-tools">{!mobile && <h3>分组统计</h3>}<label>排序<select aria-label="分组排序" value={sort} onChange={e => { setSort(e.target.value as typeof sort); setLimit(50); }}><option value="count-desc">数量从多到少</option><option value="count-asc">数量从少到多</option><option value="label">名称顺序</option></select></label>{!mobile && dimensions.length > 1 && <label><input type="checkbox" checked={merged} onChange={e => setMerged(e.target.checked)} />合并单元格</label>}</div>
|
||||
{mobile ? <MobileGroupedTable dimensions={dimensions.map(d => DIMENSION_LABELS[d])} rows={rows.map(row => ({ ...row, label: groupLabel(row), values: dimensions.map(d => label(d, row.values[d]!)) }))} unit="单" merged={merged} setMerged={setMerged} spans={spans} parentTotals={totals} onDetails={i => showDetails(rows[i])} onFilter={i => filterGroup(rows[i])} /> : <div className="analysis-group-table"><table><thead><tr>{dimensions.length ? dimensions.map(d => <th key={d}>{DIMENSION_LABELS[d]}</th>) : <th>范围</th>}<th>数量（单）</th><th>占比</th><th>操作</th></tr></thead><tbody>{rows.map((row, ri) => <tr key={row.key}>{dimensions.length ? dimensions.map((d, ci) => {
|
||||
const span = merged ? spans[ri][ci] : 1;
|
||||
return span ? <td key={d} rowSpan={span}>{label(d, row.values[d]!)}{merged && ci < dimensions.length - 1 && <small className="fault-parent-total">合计 {totals[ri][ci].toLocaleString()} 单</small>}</td> : null;
|
||||
}) : <td>合计</td>}<td><strong>{row.count.toLocaleString()}</strong></td><td>{row.share.toFixed(1)}%</td><td>{dimensions.length > 0 && <button className="analysis-text-button" onClick={() => filterGroup(row)}>筛选此组</button>}<button className="analysis-text-button" onClick={() => showDetails(row)} aria-label={`查看明细 ${groupLabel(row)}`}>查看明细</button></td></tr>)}</tbody></table></div>}
|
||||
{!rows.length && <p className="fault-empty">暂无符合条件的故障，可调整筛选条件。</p>}
|
||||
{ordered.length > limit && <button className="analysis-button fault-more" onClick={() => setLimit(v => v + 50)}>加载更多分组（已显示 {limit} / {ordered.length}）</button>}
|
||||
<p className="fault-analysis-note">{metric === 'overdue' && '逾期仅统计待处理、处理中且处置截止时间早于本次数据时间的故障；挂起停表，无截止时间不计入。'}{source ? source.definition || '按提报日期筛选同批故障，闭环状态截至本次数据时间；已归档为已闭环，其余为未闭环。' : '维度按车辆当前信息归属；本日解决按解决时间统计。'}下钻读取最新台账，实时变动可能与首页数量存在差异。</p>
|
||||
</>}
|
||||
</div>
|
||||
</div>
|
||||
</div>;
|
||||
}
|
||||
@@ -0,0 +1,71 @@
|
||||
import { useCallback, useEffect, useState } from 'react';
|
||||
import { ArrowUpRight, CarFront, ClipboardList, Clock3, Filter, Info, RefreshCw, Search, TriangleAlert } from 'lucide-react';
|
||||
import { fetchJson } from '../../../auth/api-client';
|
||||
import { FAULT_DASHBOARD_FILTERS, type FaultAnalysisResponse, type FaultDashboardDimension, type FaultDashboardFilters, type FaultDashboardResponse, type FaultDashboardScope } from '../../../shared/assets/faults';
|
||||
import { FlowDateRangePicker } from '../components/overview/FlowDateRangePicker';
|
||||
import { AnalysisExportButton } from '../components/analysis/AnalysisExportButton';
|
||||
import { FaultAnalysisModal, type FaultAnalysisSource } from './FaultAnalysisModal';
|
||||
import { FaultOverview } from './FaultOverview';
|
||||
import { DashboardPanels, DashboardTicketTable, type DashboardDrill } from './DashboardPanels';
|
||||
import { downloadDashboard } from './dashboard-export';
|
||||
import './fault-management.css';
|
||||
import './dashboard.css';
|
||||
const tabs = ['管理总览','多维分析','故障明细'] as const;
|
||||
function initialRange(){const end=new Date(Date.now()+8*3600000).toISOString().slice(0,10);return {start:new Date(Date.parse(end)-29*86400000).toISOString().slice(0,10),end};}
|
||||
export default function FaultManagement(){
|
||||
const [range,setRange]=useState(initialRange),[filters,setFilters]=useState<FaultDashboardFilters>({});
|
||||
const [applied,setApplied]=useState(()=>({...initialRange(),filters:{} as FaultDashboardFilters}));
|
||||
const [tab,setTab]=useState<typeof tabs[number]>('管理总览'),[more,setMore]=useState(false);
|
||||
const [data,setData]=useState<FaultDashboardResponse|null>(null),[loading,setLoading]=useState(true),[error,setError]=useState('');
|
||||
const [revision,setRevision]=useState(0),[source,setSource]=useState<FaultAnalysisSource|null>(null);
|
||||
const [detailScope,setDetailScope]=useState<FaultDashboardScope>('cohort'),[detailData,setDetailData]=useState<FaultAnalysisResponse|null>(null),[detailError,setDetailError]=useState(''),[detailLoading,setDetailLoading]=useState(false);
|
||||
const [search,setSearch]=useState(''),[limit,setLimit]=useState(50);
|
||||
const close=useCallback(()=>setSource(null),[]);
|
||||
const query=new URLSearchParams({start:applied.start,end:applied.end,...applied.filters}).toString();
|
||||
useEffect(()=>{if(tab==='管理总览')return;const c=new AbortController();setLoading(true);setError('');fetchJson<FaultDashboardResponse>(`/api/asset-faults/dashboard?${query}`,{signal:c.signal}).then(d=>{if(!c.signal.aborted)setData(d);}).catch(e=>{if(!c.signal.aborted)setError(e instanceof Error?e.message:'加载失败');}).finally(()=>{if(!c.signal.aborted)setLoading(false);});return()=>c.abort();},[query,revision,tab]);
|
||||
useEffect(()=>{if(tab!=='故障明细')return;const c=new AbortController();setDetailData(null);setDetailError('');setDetailLoading(true);setLimit(50);fetchJson<FaultAnalysisResponse>(`/api/asset-faults/dashboard-analysis?${query}&scope=${detailScope}`,{signal:c.signal}).then(d=>{if(!c.signal.aborted)setDetailData(d);}).catch(()=>{if(!c.signal.aborted)setDetailError('故障明细加载失败，请重试。');}).finally(()=>{if(!c.signal.aborted)setDetailLoading(false);});return()=>c.abort();},[tab,query,detailScope,revision]);
|
||||
const drill:DashboardDrill=(title,scope='cohort',extra={})=>{if(loading||error||!data)return;const params=new URLSearchParams({start:data.start,end:data.end,...applied.filters,...extra,scope});setSource({url:`/api/asset-faults/dashboard-analysis?${params}`,title,periodLabel:scope==='cohort'?`${data.start} 至 ${data.end} · 按提报日期`:scope==='reported'||scope==='closed'?'北京时间今日':'全部提报日期 · 当前状态',defaultDimensions:extra.id?[]:['handler','faultStatus'],initialDetails:!!extra.id,definition:scope==='focus'?'仅包含 L1-特急且未归档的故障（含待处理、处理中、挂起等状态），不限制提报日期。':scope==='cohort'?'按提报日期筛选同批故障，已归档为已闭环，其余状态为未闭环。':scope==='overdue'?'逾期仅包含待处理、处理中且处置截止时间早于数据时间的故障；挂起、未设置截止时间不计入。':scope==='reported'?'按北京时间今日提报时间统计。':scope==='closed'?'按北京时间今日解决时间统计，不限制提报日期。':'不限制提报日期，按当前状态及已应用条件统计；当前在办 = 待处理 + 处理中。'});};
|
||||
const t=data?.totals;
|
||||
const detailRows=(detailData?.rows||[]).filter(r=>`${r.code} ${r.plate} ${r.description} ${r.handlers.map(h=>h.label).join(' ')}`.toLowerCase().includes(search.trim().toLowerCase())).sort((a,b)=>(b.reportedAt||'').localeCompare(a.reportedAt||'')||b.id.localeCompare(a.id,'en',{numeric:true}));
|
||||
const dirty=range.start!==applied.start||range.end!==applied.end||JSON.stringify(filters)!==JSON.stringify(applied.filters);
|
||||
const count=(n?:number)=>loading?'—':n?.toLocaleString('zh-CN')??'—';
|
||||
const select=(key:FaultDashboardDimension)=><label className="fd-filter" key={key}><span>{FAULT_DASHBOARD_FILTERS[key]}</span><select aria-label={FAULT_DASHBOARD_FILTERS[key]} value={filters[key]||''} onChange={e=>setFilters(v=>({...v,[key]:e.target.value}))}><option value="">全部</option>{data?.options[key].map(o=><option key={o.value} value={o.value}>{o.label}</option>)}</select></label>;
|
||||
const showAllOpen=()=>{setDetailScope('open');setTab('故障明细');setSearch('');};
|
||||
const showAllFaults=()=>{setFilters({});setApplied({...range,filters:{}});setDetailScope('ledger');setTab('故障明细');setSearch('');};
|
||||
const navigation=<nav className="fd-tabs" aria-label="故障分析页面">{tabs.map(name=><button key={name} aria-current={tab===name?'page':undefined} onClick={()=>setTab(name)}>{name}</button>)}</nav>;
|
||||
if(tab==='管理总览')return <FaultOverview navigation={navigation}/>;
|
||||
return <div className="fault-page fd-page">
|
||||
<header className="fd-header"><div><p className="fd-breadcrumb">羚牛氢能 BI / 故障分析</p><div className="fd-heading-line"><h1>故障风险与服务分析</h1><p>从问题分布，追溯到车辆与处理进展。</p></div></div><div className="fd-header-actions"><span>更新时间：{data?new Date(data.updatedAt).toLocaleString('zh-CN',{timeZone:'Asia/Shanghai',hour12:false}):'读取中'}</span><button disabled={loading} aria-label="刷新故障统计" onClick={()=>setRevision(v=>v+1)}><RefreshCw size={14} className={loading?'animate-spin':''}/>刷新</button><AnalysisExportButton disabled={loading||!data||!!error} onExport={()=>data?downloadDashboard(data,Object.entries(applied.filters).filter(([,v])=>v).map(([k,v])=>`${FAULT_DASHBOARD_FILTERS[k as FaultDashboardDimension]}：${data.options[k as FaultDashboardDimension].find(o=>o.value===v)?.label||v}`).join(' · ')):undefined}/></div></header>
|
||||
{navigation}
|
||||
<form className="fd-toolbar" onSubmit={e=>{e.preventDefault();setApplied({...range,filters:{...filters}});}}><div className="fd-date"><FlowDateRangePicker value={range} onChange={setRange} dateLabel="故障提报时间"/></div>{(['region','customer','model'] as const).map(select)}<button className="fd-filter-toggle" type="button" aria-expanded={more} onClick={()=>setMore(!more)}><Filter size={15}/>更多筛选{Object.entries(filters).filter(([k,v])=>!['region','customer','model'].includes(k)&&v).length?` (${Object.entries(filters).filter(([k,v])=>!['region','customer','model'].includes(k)&&v).length})`:''}</button><button className="fd-query" type="submit" disabled={loading}>查询</button>{more&&<div className="fd-more-filters">{(['city','department','handler','level','category','inventory'] as const).map(select)}<button type="button" onClick={()=>{setFilters({});setApplied({...range,filters:{}});}}>重置筛选</button></div>}</form>
|
||||
<p className="fd-scope-note">期间指标按提报日期统计；当前在办不限制提报日期，状态截至更新时间。{dirty&&<strong>条件已修改，点击查询后生效。</strong>}</p>
|
||||
{error&&<div className="fault-message" role="alert">{error}<button onClick={()=>setRevision(v=>v+1)}>重试</button></div>}
|
||||
{!data&&loading?<div className="fd-loading" role="status"><RefreshCw className="animate-spin" size={20}/>正在汇总故障分析…</div>:data&&<div className={loading||error?'fd-content is-loading':'fd-content'} aria-busy={loading}>
|
||||
{tab==='多维分析'&&<>
|
||||
<section className="fd-kpis" aria-label="故障总统计">
|
||||
<article className="fd-kpi"><button disabled={loading||!!error} onClick={()=>drill('期间新增故障')}><ClipboardList className="fd-kpi-icon"/><span>期间新增故障</span><ArrowUpRight size={14}/><strong>{count(t?.reported)}<small>单</small></strong></button><p>对比上期 <b className={t?.change!=null&&t.change>0?'fd-orange':'fd-blue'}>{t?.change==null?'无可比基数':`${t.change>0?'+':''}${t.change.toFixed(1)}%`}</b><small>上期 {t?.previous} 单</small></p></article>
|
||||
<article className="fd-kpi"><button disabled={loading||!!error} onClick={()=>drill('受影响车辆对应故障')}><CarFront className="fd-kpi-icon fd-purple"/><span>受影响车辆</span><ArrowUpRight size={14}/><strong>{count(t?.vehicles)}<small>辆</small></strong></button><p>涉及 <b>{t?.customers}</b> 家已关联客户<small>按车辆去重</small></p></article>
|
||||
<article className="fd-kpi"><button disabled={loading||!!error} onClick={()=>drill('当前在办','open')}><Clock3 className="fd-kpi-icon fd-orange"/><span>当前在办</span><ArrowUpRight size={14}/><strong>{count(t?.open)}<small>单</small></strong></button><div className="fd-kpi-parts"><button disabled={loading||!!error} onClick={()=>drill('待处理','waiting')}>待处理 <b>{count(t?.waiting)}</b></button><span>+</span><button disabled={loading||!!error} onClick={()=>drill('处理中','processing')}>处理中 <b>{count(t?.processing)}</b></button></div></article>
|
||||
<article className="fd-kpi"><button disabled={loading||!!error} onClick={()=>drill('逾期','overdue')}><TriangleAlert className="fd-kpi-icon fd-danger"/><span>逾期</span><ArrowUpRight size={14}/><strong className="fd-danger">{count(t?.overdue)}<small>单</small></strong></button><p>最长逾期 <b className="fd-danger">{t?.longestOverdueDays} 天</b><small>在办子集</small></p></article>
|
||||
</section>
|
||||
<div className="fd-today-stats"><span>实时统计</span><button onClick={()=>drill('今日新增','reported')}>今日新增 <b>{t?.todayReported}</b></button><button onClick={()=>drill('本日解决','closed')}>本日解决 <b>{t?.todayClosed}</b></button></div>
|
||||
<div className="fd-insight"><Info size={18}/><strong>{data.distributions.region[0]?`本期关注：${data.distributions.region[0].label}故障量最高，共 ${data.distributions.region[0].reported} 单；当前 ${t?.overdue} 单在办故障已逾期。`:'所选条件下暂无本期故障，可调整日期或筛选范围。'}</strong><span>按数量描述，不代表故障发生率。</span><button disabled={!t?.open} onClick={showAllOpen}>查看关联故障 <ArrowUpRight size={13}/></button></div>
|
||||
{tab==='多维分析'&&<div className="fd-analysis-banner"><div><h2>组合维度，追溯故障</h2><p>支持运维处置人、车牌、工单状态、车型、区域、客户等 12 个维度，多选筛选与明细下钻。</p></div><button className="fd-query" onClick={()=>drill('本期故障多维分析')}>打开多维分析</button></div>}
|
||||
<DashboardPanels data={data} drill={drill}/>
|
||||
<section className="fd-panel fd-focus" aria-label="重点故障跟进">
|
||||
<div className="fd-panel-title">
|
||||
<h2>重点故障跟进</h2>
|
||||
<span className="fd-chip fd-orange">L1 未闭环 {data.focusTotals.total}</span>
|
||||
<span className="fd-chip fd-danger">逾期 {data.focusTotals.overdue}</span>
|
||||
<button onClick={showAllFaults} title="查看当前权限内的全部故障记录">查看全部 <ArrowUpRight size={13}/></button>
|
||||
</div>
|
||||
<DashboardTicketTable rows={data.focus} updatedAt={data.updatedAt} drill={drill} emptyMessage="当前筛选范围内暂无 L1 未闭环故障。"/>
|
||||
<p className="fd-caption">仅展示 L1-特急且未闭环（未归档）的故障；沿用当前业务筛选，不限制提报日期。逾期优先，同优先级按提报时间倒序，最多展示 5 单。“查看全部”进入当前权限内的全部故障台账，并清除业务筛选和搜索条件，不限等级、状态及提报日期。</p>
|
||||
</section>
|
||||
</>}
|
||||
{tab==='故障明细'&&<section className="fd-panel fd-details"><div className="fd-panel-title"><h2>故障明细</h2><span>按提报时间倒序 · {detailRows.length} 单</span><button onClick={()=>drill('故障明细多维分析',detailScope)}>多维分析 <ArrowUpRight size={13}/></button></div><div className="fd-detail-controls"><div className="fd-segment">{([['cohort','本期提报'],['open','当前在办'],['overdue','逾期故障'],['ledger','累计台账']] as const).map(([key,title])=><button key={key} aria-pressed={detailScope===key} onClick={()=>{setDetailScope(key);setSearch('');}}>{title}</button>)}</div><label><Search size={15}/><input placeholder="搜索车牌、单号、处置人" aria-label="搜索故障明细列表" value={search} onChange={e=>{setSearch(e.target.value);setLimit(50);}}/></label></div>{detailLoading?<p className="fd-loading" role="status">正在加载故障明细…</p>:detailError?<p role="alert" className="fault-message">{detailError}<button onClick={()=>setRevision(v=>v+1)}>重试</button></p>:<><DashboardTicketTable rows={detailRows.slice(0,limit)} updatedAt={detailData?.updatedAt||data.updatedAt} drill={drill}/>{detailRows.length>limit&&<button className="fd-load-more" onClick={()=>setLimit(v=>v+50)}>加载更多（{Math.min(limit,detailRows.length)} / {detailRows.length}）</button>}</>}</section>}
|
||||
<footer className="fd-quality"><Info size={13}/>数据完整性：本期未标注等级 {data.quality.missingLevel} 单，未标注部位 {data.quality.missingCategory} 单，缺少车辆标识 {data.quality.missingVehicle} 单；在办中 {data.quality.missingDeadline} 单未设置截止时间，不计入逾期。</footer>
|
||||
</div>}
|
||||
{source&&<FaultAnalysisModal key={source.url} metric="ledger" source={source} onClose={close}/>}
|
||||
</div>;
|
||||
}
|
||||
@@ -0,0 +1,69 @@
|
||||
import type { ReactNode } from 'react';
|
||||
import { Fragment, useCallback, useEffect, useState } from 'react';
|
||||
import { ArrowUpRight, CheckCircle2, ClipboardList, Clock3, PlusCircle, RefreshCw } from 'lucide-react';
|
||||
import { fetchJson } from '../../../auth/api-client';
|
||||
import { FAULT_OVERVIEW_METRICS, type FaultOverview, type FaultOverviewMetric } from '../../../shared/assets/faults';
|
||||
import { FaultAnalysisModal } from './FaultAnalysisModal';
|
||||
import { FaultWeeklyReport } from './FaultWeeklyReport';
|
||||
import { FaultTrendCard } from './FaultTrendCard';
|
||||
import './fault-management.css';
|
||||
|
||||
export const FAULT_DEFINITIONS = {
|
||||
reported: '按今日提报时间统计', closed: '按今日解决时间统计',
|
||||
open: '当前在办 = 待处理 + 处理中', ledger: '全部有效故障台账',
|
||||
};
|
||||
const icons = { reported: PlusCircle, closed: CheckCircle2, open: Clock3, ledger: ClipboardList };
|
||||
const metrics = ['reported', 'closed', 'open', 'ledger'] as const;
|
||||
export function FaultOverview({ navigation }: { navigation: ReactNode }) {
|
||||
const [data, setData] = useState<FaultOverview | null>(null);
|
||||
const [error, setError] = useState('');
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [revision, setRevision] = useState(0);
|
||||
const [metric, setMetric] = useState<FaultOverviewMetric | null>(null);
|
||||
const close = useCallback(() => setMetric(null), []);
|
||||
useEffect(() => {
|
||||
const controller = new AbortController();
|
||||
setLoading(true); setError('');
|
||||
fetchJson<FaultOverview>('/api/asset-faults/overview', { signal: controller.signal })
|
||||
.then(result => { if (!controller.signal.aborted) setData(result); }).catch(e => { if (!controller.signal.aborted) setError(e instanceof Error ? e.message : '加载失败'); })
|
||||
.finally(() => { if (!controller.signal.aborted) setLoading(false); });
|
||||
return () => controller.abort();
|
||||
}, [revision]);
|
||||
return <div className="fault-page fault-overview-page">
|
||||
<header className="fd-header">
|
||||
<div><p className="fd-breadcrumb">羚牛氢能 BI / 故障分析</p><div className="fd-heading-line"><h1>羚牛氢能-故障管理</h1><p>实时掌握故障数量、闭环趋势与运维进展。</p></div></div>
|
||||
<div className="fd-header-actions"><span>{data ? `更新时间：${new Date(data.updatedAt).toLocaleString('zh-CN', { timeZone: 'Asia/Shanghai', hour12: false })}` : '正在读取故障台账'}</span><button aria-label="刷新故障统计" disabled={loading} onClick={() => setRevision(v => v + 1)}><RefreshCw size={14} className={loading ? 'animate-spin' : ''} />刷新</button></div>
|
||||
</header>
|
||||
{navigation}
|
||||
{error && <div className="fault-message" role="alert">{error}<button onClick={() => setRevision(v => v + 1)}>重试</button></div>}
|
||||
<section className="fault-summary" aria-label="故障总统计" aria-busy={loading}>
|
||||
<div className="fault-summary-heading"><h2>故障数据实时汇总</h2><span>{data?.date || '—'} · 北京时间</span></div>
|
||||
<div className="fault-metrics">{metrics.map(key => {
|
||||
const Icon = icons[key];
|
||||
return <article key={key} className={`fault-metric fault-metric-${key}`}><button className="fault-metric-main" disabled={!data || loading || !!error} onClick={() => setMetric(key)} aria-label={`${FAULT_OVERVIEW_METRICS[key]} ${data?.totals[key] ?? '加载中'} 单，查看分析`}>
|
||||
<div className="fault-metric-label"><span className="fault-metric-icon"><Icon size={19} /></span><span>{FAULT_OVERVIEW_METRICS[key]}</span><ArrowUpRight size={15} /></div>
|
||||
<div className="fault-metric-count"><strong>{loading ? '—' : data?.totals[key].toLocaleString('zh-CN') ?? '—'}</strong><span>单</span></div>
|
||||
<p>{FAULT_DEFINITIONS[key]}</p><span className="fault-metric-link">查看分析与明细 →</span>
|
||||
</button>
|
||||
{key === 'open' && <>
|
||||
<button className="fault-overdue-subset" disabled={!data || loading || !!error} onClick={() => setMetric('overdue')} aria-label={`逾期 ${data?.totals.overdue ?? '加载中'} 单，查看分析`}>
|
||||
<span>逾期</span><strong>{loading ? '—' : data?.totals.overdue?.toLocaleString('zh-CN') ?? '—'}</strong><small>单</small>
|
||||
</button>
|
||||
<div className="fault-open-breakdown" aria-label="当前在办等于待处理加处理中">
|
||||
{(['waiting', 'processing'] as const).map((part, index) => <Fragment key={part}>
|
||||
{index > 0 && <span className="fault-composition-plus" aria-hidden="true">＋</span>}
|
||||
<button className={`fault-submetric fault-submetric-${part}`} disabled={!data || loading || !!error} onClick={() => setMetric(part)} aria-label={`${FAULT_OVERVIEW_METRICS[part]} ${data?.totals[part] ?? '加载中'} 单，查看分析`}>
|
||||
<span>{FAULT_OVERVIEW_METRICS[part]}</span><strong>{loading ? '—' : data?.totals[part]?.toLocaleString('zh-CN') ?? '—'}</strong>
|
||||
</button>
|
||||
</Fragment>)}
|
||||
</div>
|
||||
</>}
|
||||
</article>;
|
||||
})}</div>
|
||||
<p className="fault-summary-note">当前在办 = 待处理 + 处理中，逾期为在办子集，不重复累加；按处置截止时间统计，挂起停表，未设置截止时间不计入逾期。</p>
|
||||
</section>
|
||||
<FaultTrendCard refresh={revision} />
|
||||
<FaultWeeklyReport refresh={revision} />
|
||||
{metric && <FaultAnalysisModal key={metric} metric={metric} onClose={close} />}
|
||||
</div>;
|
||||
}
|
||||
@@ -0,0 +1,73 @@
|
||||
import type { FaultDashboardFilters } from '../../../shared/assets/faults';
|
||||
import { useCallback, useEffect, useRef, useState } from 'react';
|
||||
import { CalendarDays, ChevronDown, RefreshCw } from 'lucide-react';
|
||||
import { Bar, BarChart, CartesianGrid, Legend, ResponsiveContainer, Tooltip, XAxis, YAxis } from 'recharts';
|
||||
import { fetchJson } from '../../../auth/api-client';
|
||||
import type { FaultTrendResponse, FaultTrendStatus } from '../../../shared/assets/faults';
|
||||
import { AnalysisExportButton } from '../components/analysis/AnalysisExportButton';
|
||||
import { downloadFaultReport } from './report-export';
|
||||
import { FlowDateRangePicker } from '../components/overview/FlowDateRangePicker';
|
||||
import { FaultAnalysisModal, type FaultAnalysisSource } from './FaultAnalysisModal';
|
||||
|
||||
function initialRange() {
|
||||
const end = new Date(Date.now() + 8 * 3600000).toISOString().slice(0, 10);
|
||||
return { start: new Date(Date.parse(end) - 29 * 86400000).toISOString().slice(0, 10), end };
|
||||
}
|
||||
const statusLabels = { all: '新增故障', closed: '其中已闭环', unclosed: '其中未闭环' };
|
||||
const countKeys = { all: 'reported', closed: 'closed', unclosed: 'unclosed' } as const;
|
||||
export function FaultTrendCard({ refresh, scope = {}, scopeLabel = '', period }: { refresh: number; scope?: FaultDashboardFilters; scopeLabel?: string; period?: { start: string; end: string } }) {
|
||||
const [range, setRange] = useState(() => period || initialRange());
|
||||
const [granularity, setGranularity] = useState<'day' | 'month'>('day');
|
||||
const scopeKey = new URLSearchParams(scope).toString();
|
||||
useEffect(() => { if (period) setRange(period); }, [period?.start, period?.end]);
|
||||
const [data, setData] = useState<FaultTrendResponse | null>(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState('');
|
||||
const [revision, setRevision] = useState(0);
|
||||
const [expanded, setExpanded] = useState(false);
|
||||
const [source, setSource] = useState<FaultAnalysisSource | null>(null);
|
||||
const chartRef = useRef<HTMLDivElement>(null);
|
||||
const close = useCallback(() => setSource(null), []);
|
||||
useEffect(() => {
|
||||
const controller = new AbortController();
|
||||
setLoading(true); setError(''); setData(null);
|
||||
const params = new URLSearchParams({ ...range, granularity, ...scope });
|
||||
fetchJson<FaultTrendResponse>(`/api/asset-faults/trend?${params}`, { signal: controller.signal })
|
||||
.then(result => { if (!controller.signal.aborted) setData(result); })
|
||||
.catch(e => { if (!controller.signal.aborted) setError(e instanceof Error ? e.message : '加载失败'); })
|
||||
.finally(() => { if (!controller.signal.aborted) setLoading(false); });
|
||||
return () => controller.abort();
|
||||
}, [range.start, range.end, granularity, revision, refresh, scopeKey]);
|
||||
const drill = (status: FaultTrendStatus, period?: string) => {
|
||||
if (!data || loading) return;
|
||||
const params = new URLSearchParams({ start: data.start, end: data.end, granularity: data.granularity, status, ...scope });
|
||||
if (period) params.set('period', period);
|
||||
setSource({ url: `/api/asset-faults/trend-analysis?${params}`, title: `故障处理趋势 · ${statusLabels[status]}`, defaultDimensions: ['handler', 'faultStatus'],
|
||||
periodLabel: `${data.start} 至 ${data.end}${period ? ` · ${period}` : ''} · 按提报日期` });
|
||||
};
|
||||
return <section className="fault-trend fault-summary" aria-label="故障处理趋势" aria-busy={loading}>
|
||||
<div className="fault-trend-heading"><h2><CalendarDays size={16} />故障处理趋势</h2><div className="fault-report-actions"><AnalysisExportButton disabled={loading || !data || !!error} onExport={() => data ? downloadFaultReport({ kind: 'trend', data, filterLabel: scopeLabel }, chartRef.current?.querySelector<SVGSVGElement>('svg.recharts-surface[role=application]') || undefined) : undefined} /><div role="group" aria-label="趋势时间粒度">{(['day', 'month'] as const).map(value => <button key={value} aria-pressed={granularity === value} onClick={() => setGranularity(value)}>{value === 'day' ? '按日' : '按月'}</button>)}</div></div></div>
|
||||
<p className="fault-trend-definition">按提报日期统计新增故障，展示这批故障截至当前的闭环情况。新增 = 已闭环 + 未闭环。点击柱内色块，可按运维处置人、故障工单状态查看对应日期的故障。</p>
|
||||
<FlowDateRangePicker dateLabel="故障提报时间" value={range} onChange={setRange} />
|
||||
{error ? <div className="fault-message" role="alert">故障趋势加载失败，请稍后重试。<button onClick={() => setRevision(v => v + 1)}>重试</button></div> : loading || !data ? <div className="fault-trend-loading" role="status"><RefreshCw size={16} className="animate-spin" />正在加载故障趋势…</div> : <>
|
||||
<div className="fault-trend-totals">{(['all', 'closed', 'unclosed'] as const).map(status => <button key={status} className={`fault-trend-${status}`} disabled={!data.totals[countKeys[status]]} onClick={() => drill(status)} aria-label={`${statusLabels[status]} ${data.totals[countKeys[status]]} 单，查看趋势分析`}><strong>{data.totals[countKeys[status]].toLocaleString()}</strong><span>{statusLabels[status]} ↗</span></button>)}</div>
|
||||
{data.totals.reported ? <div ref={chartRef} className="fault-trend-chart" role="region" aria-label={`故障${granularity === 'day' ? '日' : '月'}趋势堆叠柱图，新增${data.totals.reported}单，已闭环${data.totals.closed}单，未闭环${data.totals.unclosed}单；精确数量可展开统计表查看`}>
|
||||
<ResponsiveContainer width="100%" height={240} minWidth={0}>
|
||||
<BarChart data={data.periods} margin={{ top: 12, right: 8, left: -18, bottom: 0 }} accessibilityLayer>
|
||||
<CartesianGrid strokeDasharray="4 6" vertical={false} stroke="#e8edf3" />
|
||||
<XAxis dataKey="period" tick={{ fontSize: 10, fill: '#64748b' }} tickFormatter={v => data.granularity === 'day' ? v.slice(5) : v} minTickGap={24} axisLine={false} tickLine={false} />
|
||||
<YAxis allowDecimals={false} tick={{ fontSize: 10, fill: '#64748b' }} axisLine={false} tickLine={false} />
|
||||
<Tooltip cursor={{ fill: '#f1f5f9', opacity: 0.7 }} contentStyle={{ border: '1px solid #e2e8f0', borderRadius: 12, boxShadow: '0 8px 24px rgb(15 23 42 / .08)', fontSize: 12 }} labelFormatter={(_, payload) => { const point = payload?.[0]?.payload; return point ? `${point.period} · 新增 ${point.reported} 单` : ''; }} formatter={(value, name) => [`${value} 单`, name]} />
|
||||
<Legend iconType="circle" iconSize={8} wrapperStyle={{ fontSize: 11 }} />
|
||||
<Bar dataKey="closed" name="已闭环" cursor="pointer" onClick={bar => { const period = data.periods.find(row => row.period === bar.payload?.period); if (period?.closed) drill('closed', period.period); }} fill="#2475ff" stackId="faults" maxBarSize={34} isAnimationActive={false} />
|
||||
<Bar dataKey="unclosed" name="未闭环" cursor="pointer" onClick={bar => { const period = data.periods.find(row => row.period === bar.payload?.period); if (period?.unclosed) drill('unclosed', period.period); }} fill="#ff981a" stackId="faults" maxBarSize={34} isAnimationActive={false} />
|
||||
</BarChart>
|
||||
</ResponsiveContainer>
|
||||
</div> : <p className="fault-empty">所选时间范围暂无新增故障</p>}
|
||||
<button className="fault-trend-expand" aria-expanded={expanded} aria-controls="fault-trend-periods" onClick={() => setExpanded(v => !v)}><span>{expanded ? '收起' : '展开'}{data.granularity === 'day' ? '每日' : '每月'}统计 · 点击数量查看故障闭环明细</span><ChevronDown size={16} style={{ transform: expanded ? 'rotate(180deg)' : undefined }} /></button>
|
||||
{expanded && <div id="fault-trend-periods" className="fault-trend-table"><table><thead><tr><th>{data.granularity === 'day' ? '提报日期' : '提报月份'}</th><th>新增</th><th>已闭环</th><th>未闭环</th><th>闭环率</th></tr></thead><tbody>{[...data.periods].reverse().map(row => <tr key={row.period}><td>{row.period}</td>{(['all', 'closed', 'unclosed'] as const).map(status => <td key={status}><button disabled={!row[countKeys[status]]} onClick={() => drill(status, row.period)} aria-label={`${row.period} ${statusLabels[status]} ${row[countKeys[status]]} 单，查看明细`}>{row[countKeys[status]].toLocaleString()}</button></td>)}<td>{row.reported ? `${(row.closed / row.reported * 100).toFixed(1)}%` : '—'}</td></tr>)}</tbody></table></div>}
|
||||
<p className="fault-summary-note">已归档视为已闭环，其余状态（含挂起）为未闭环；无提报时间不纳入趋势。按月仍仅统计所选日期范围，不扩展至整月。状态截至 {new Date(data.updatedAt).toLocaleString('zh-CN', { timeZone: 'Asia/Shanghai', hour12: false })}。</p>
|
||||
</>}
|
||||
{source && <FaultAnalysisModal key={source.url} metric="ledger" source={source} onClose={close} />}
|
||||
</section>;
|
||||
}
|
||||
@@ -0,0 +1,68 @@
|
||||
import type { FaultDashboardFilters } from '../../../shared/assets/faults';
|
||||
import { useCallback, useEffect, useRef, useState } from 'react';
|
||||
import { ClipboardList, RefreshCw } from 'lucide-react';
|
||||
import { CartesianGrid, Line, LineChart, ResponsiveContainer, Tooltip, XAxis, YAxis } from 'recharts';
|
||||
import { fetchJson } from '../../../auth/api-client';
|
||||
import { FAULT_WEEKLY_METRICS, type FaultWeeklyMetric, type FaultWeeklyResponse } from '../../../shared/assets/faults';
|
||||
import { AnalysisExportButton } from '../components/analysis/AnalysisExportButton';
|
||||
import { downloadFaultReport } from './report-export';
|
||||
import { FlowDateRangePicker } from '../components/overview/FlowDateRangePicker';
|
||||
import { getWeeklyFlowRange } from '../model';
|
||||
import { FaultAnalysisModal, type FaultAnalysisSource } from './FaultAnalysisModal';
|
||||
|
||||
const metrics: FaultWeeklyMetric[] = ['reported', 'closed'];
|
||||
const definition = '新增故障按提报时间统计，解决故障按解决时间统计；同一故障可在不同日期分别计入两个指标。';
|
||||
export function FaultWeeklyReport({ refresh, scope = {}, scopeLabel = '', period }: { refresh: number; scope?: FaultDashboardFilters; scopeLabel?: string; period?: { start: string; end: string } }) {
|
||||
const [range, setRange] = useState(() => period || getWeeklyFlowRange());
|
||||
const scopeKey = new URLSearchParams(scope).toString();
|
||||
useEffect(() => { if (period) setRange(period); }, [period?.start, period?.end]);
|
||||
const [data, setData] = useState<FaultWeeklyResponse | null>(null);
|
||||
const [error, setError] = useState('');
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [revision, setRevision] = useState(0);
|
||||
const [source, setSource] = useState<FaultAnalysisSource | null>(null);
|
||||
const chartRef = useRef<HTMLDivElement>(null);
|
||||
const close = useCallback(() => setSource(null), []);
|
||||
const today = new Date(Date.now() + 8 * 3600000).toISOString().slice(0, 10);
|
||||
useEffect(() => {
|
||||
const controller = new AbortController();
|
||||
setLoading(true); setData(null); setError('');
|
||||
fetchJson<FaultWeeklyResponse>(`/api/asset-faults/weekly-report?${new URLSearchParams({ start: range.start, end: range.end, ...scope })}`, { signal: controller.signal })
|
||||
.then(result => { if (!controller.signal.aborted) setData(result); })
|
||||
.catch(e => { if (!controller.signal.aborted) setError(e instanceof Error ? e.message : '加载失败'); })
|
||||
.finally(() => { if (!controller.signal.aborted) setLoading(false); });
|
||||
return () => controller.abort();
|
||||
}, [range.start, range.end, revision, refresh, scopeKey]);
|
||||
const drill = (metric: FaultWeeklyMetric, day?: string) => {
|
||||
if (!data || loading) return;
|
||||
const params = new URLSearchParams({ start: data.start, end: data.end, metric, ...scope });
|
||||
if (day) params.set('day', day);
|
||||
setSource({ url: `/api/asset-faults/weekly-report-analysis?${params}`, title: `故障运维周报 · ${FAULT_WEEKLY_METRICS[metric]}`,
|
||||
periodLabel: `${day || `${data.start} 至 ${data.end}`} · 按事件发生时间`, definition });
|
||||
};
|
||||
return <section className="fault-weekly fault-trend fault-summary" aria-label="故障运维周报" aria-busy={loading}>
|
||||
<div className="fault-trend-heading"><h2><ClipboardList size={16} />故障运维周报</h2><div className="fault-report-actions"><span className="fault-weekly-unit">单位：单</span><AnalysisExportButton disabled={loading || !data || !!error} onExport={() => data ? downloadFaultReport({ kind: 'weekly', data, filterLabel: scopeLabel }, chartRef.current?.querySelector<SVGSVGElement>('svg.recharts-surface[role=application]') || undefined) : undefined} /></div></div>
|
||||
<p className="fault-trend-definition">按日展示新增故障和解决故障。{period ? '统计周期沿用查询范围，可在下方单独调整。' : '默认业务周为周六至周五，可自选日期。'}</p>
|
||||
<FlowDateRangePicker dateLabel="提报 / 解决时间" value={range} onChange={setRange} />
|
||||
{error ? <div className="fault-message" role="alert">故障运维周报加载失败，请稍后重试。<button onClick={() => setRevision(v => v + 1)}>重试</button></div> : loading || !data ? <div className="fault-trend-loading" role="status"><RefreshCw size={16} className="animate-spin" />正在加载故障运维周报…</div> : <>
|
||||
<div className="fault-trend-totals">{metrics.map(metric => <button key={metric} className={`fault-weekly-${metric}`} disabled={!data.totals[metric]} onClick={() => drill(metric)} aria-label={`周报${FAULT_WEEKLY_METRICS[metric]} ${data.totals[metric]} 单，查看分析`}><strong>{data.totals[metric].toLocaleString()}</strong><span>{FAULT_WEEKLY_METRICS[metric]} ↗</span></button>)}</div>
|
||||
<div ref={chartRef} className="fault-trend-chart fault-weekly-chart" role="region" aria-label="每日新增故障与解决故障折线图，精确数量及下钻见下方每日统计表">
|
||||
<div className="fault-chart-heading"><span>每日变化<small>单位：单</small></span><div className="fault-chart-legend" aria-label="图例"><span className="fault-chart-key-reported"><i />新增故障</span><span className="fault-chart-key-closed"><i />解决故障</span></div></div>
|
||||
<ResponsiveContainer width="100%" height={240} minWidth={0}>
|
||||
<LineChart data={data.days} margin={{ top: 20, right: 14, left: 0, bottom: 8 }} accessibilityLayer>
|
||||
<CartesianGrid strokeDasharray="4 6" vertical={false} stroke="#e8edf3" />
|
||||
<XAxis dataKey="date" tick={{ fontSize: 10, fill: '#64748b' }} tickFormatter={v => v.slice(5)} minTickGap={32} tickMargin={12} padding={{ left: 12, right: 12 }} axisLine={false} tickLine={false} />
|
||||
<YAxis width={30} tickMargin={8} tickCount={5} domain={[0, 'auto']} allowDecimals={false} tick={{ fontSize: 10, fill: '#64748b' }} axisLine={false} tickLine={false} />
|
||||
<Tooltip cursor={{ stroke: '#cbd5e1', strokeDasharray: '4 4' }} contentStyle={{ border: '1px solid #e2e8f0', borderRadius: 12, boxShadow: '0 8px 24px rgb(15 23 42 / .08)', padding: '10px 14px', fontSize: 12 }} labelStyle={{ color: '#334155', fontWeight: 600, marginBottom: 6 }} formatter={(value, name) => [`${value} 单`, name]} />
|
||||
<Line type="monotone" dataKey="reported" name="新增故障" stroke="#2563eb" strokeWidth={2.5} dot={data.days.length <= 14 ? { r: 3.5, fill: '#fff', strokeWidth: 2 } : false} activeDot={{ r: 6, stroke: '#fff', strokeWidth: 3 }} isAnimationActive={false} />
|
||||
<Line type="monotone" dataKey="closed" name="解决故障" stroke="#059669" strokeWidth={2.5} dot={data.days.length <= 14 ? { r: 3.5, fill: '#059669', stroke: '#fff', strokeWidth: 1.5 } : false} activeDot={{ r: 6, stroke: '#fff', strokeWidth: 3 }} isAnimationActive={false} />
|
||||
</LineChart>
|
||||
</ResponsiveContainer>
|
||||
</div>
|
||||
<div className="fault-trend-table fault-weekly-table" role="region" aria-label="故障运维每日统计表" tabIndex={0}><table><thead><tr><th>日期</th>{metrics.map(metric => <th key={metric}>{FAULT_WEEKLY_METRICS[metric]}</th>)}</tr></thead><tbody>{[...data.days].reverse().map(row => <tr key={row.date} className={row.date === today ? 'fault-weekly-today' : undefined} aria-current={row.date === today ? 'date' : undefined}><td><span className="fault-weekly-date">{row.date}{row.date === today && <span className="fault-today-label">今天</span>}</span><small>{new Date(`${row.date}T12:00:00+08:00`).toLocaleDateString('zh-CN', { weekday: 'short', timeZone: 'Asia/Shanghai' })}</small></td>{metrics.map(metric => <td key={metric}><button className={`fault-weekly-${metric}`} disabled={!row[metric]} onClick={() => drill(metric, row.date)} aria-label={`${row.date} ${FAULT_WEEKLY_METRICS[metric]} ${row[metric]} 单，查看明细`}>{row[metric].toLocaleString()}</button></td>)}</tr>)}</tbody><tfoot><tr><th>合计</th>{metrics.map(metric => <th key={metric}><button disabled={!data.totals[metric]} onClick={() => drill(metric)} aria-label={`合计${FAULT_WEEKLY_METRICS[metric]} ${data.totals[metric]} 单，查看明细`}>{data.totals[metric].toLocaleString()}</button></th>)}</tr></tfoot></table></div>
|
||||
{!metrics.some(metric => data.totals[metric]) && <p className="fault-weekly-empty">所选日期范围暂无新增或解决故障。</p>}
|
||||
<p className="fault-summary-note">新增故障按提报日期，解决故障按解决日期统计，不受提报日期限制。数据时间：{new Date(data.updatedAt).toLocaleString('zh-CN', { timeZone: 'Asia/Shanghai', hour12: false })}。</p>
|
||||
</>}
|
||||
{source && <FaultAnalysisModal key={source.url} metric="ledger" source={source} onClose={close} />}
|
||||
</section>;
|
||||
}
|
||||
@@ -0,0 +1,50 @@
|
||||
import type { AssetAnalysisDimension } from '../../../shared/assets/analytics';
|
||||
import type { FaultAnalysisRecord } from '../../../shared/assets/faults';
|
||||
import { DIMENSION_LABELS, getAvailableDimensions } from '../analytics-model';
|
||||
|
||||
export type FaultAnalysisDimension = AssetAnalysisDimension | 'handler' | 'plate' | 'faultStatus';
|
||||
export type FaultAnalysisFilters = Partial<Record<FaultAnalysisDimension, string[]>>;
|
||||
export const FAULT_ANALYSIS_DIMENSIONS: FaultAnalysisDimension[] = getAvailableDimensions('assets').flatMap(d => d === 'type' ? [d, 'handler', 'plate', 'faultStatus'] : [d]);
|
||||
export const FAULT_ANALYSIS_LABELS = { ...DIMENSION_LABELS, handler: '运维处置人', plate: '车牌', faultStatus: '故障工单状态' };
|
||||
export const FAULT_CLOSURE_LABELS: Record<string, string> = { closed: '已闭环', unclosed: '未闭环' };
|
||||
export interface FaultAnalysisGroup {
|
||||
key: string; values: Partial<Record<FaultAnalysisDimension, string>>;
|
||||
count: number; share: number; recordIds: string[];
|
||||
}
|
||||
export function faultDimensionValues(row: FaultAnalysisRecord, dimension: FaultAnalysisDimension): string[] {
|
||||
if (dimension === 'plate') return [row.plate?.trim() || '未关联车辆'];
|
||||
if (dimension === 'faultStatus') return [row.status === '已归档' ? 'closed' : 'unclosed'];
|
||||
return dimension === 'handler' ? [...new Set(row.handlers.length ? row.handlers.map(h => h.value) : ['unassigned'])] : [row.cell[dimension]];
|
||||
}
|
||||
export function filterFaultRecords(rows: FaultAnalysisRecord[], filters: FaultAnalysisFilters = {}): FaultAnalysisRecord[] {
|
||||
return [...new Map(rows.filter(row => FAULT_ANALYSIS_DIMENSIONS.every(d => !filters[d]?.length || faultDimensionValues(row, d).some(value => filters[d]!.includes(value)))).map(row => [row.id, row])).values()];
|
||||
}
|
||||
/** Expand only the grouped handler dimension; totals and each group remain distinct fault IDs. */
|
||||
export function analyzeFaultRecords(rows: FaultAnalysisRecord[], dimensions: FaultAnalysisDimension[], filters: FaultAnalysisFilters = {}) {
|
||||
const selected = filterFaultRecords(rows, filters);
|
||||
const groups = new Map<string, { values: FaultAnalysisGroup['values']; ids: Set<string> }>();
|
||||
const validDimensions = [...new Set(dimensions.filter(d => FAULT_ANALYSIS_DIMENSIONS.includes(d)))];
|
||||
for (const row of selected) {
|
||||
let combinations: [FaultAnalysisDimension, string][][] = [[]];
|
||||
for (const d of validDimensions) {
|
||||
const values = faultDimensionValues(row, d).filter(value => !filters[d]?.length || filters[d]!.includes(value));
|
||||
combinations = combinations.flatMap(parts => values.map(value => [...parts, [d, value] as [FaultAnalysisDimension, string]]));
|
||||
}
|
||||
for (const entries of combinations) {
|
||||
const key = JSON.stringify(entries);
|
||||
const group = groups.get(key) || { values: Object.fromEntries(entries), ids: new Set<string>() };
|
||||
group.ids.add(row.id); groups.set(key, group);
|
||||
}
|
||||
}
|
||||
return { total: selected.length, rows: [...groups].map(([key, group]): FaultAnalysisGroup => ({ key, values: group.values,
|
||||
count: group.ids.size, share: selected.length ? group.ids.size / selected.length * 100 : 0, recordIds: [...group.ids] })) };
|
||||
}
|
||||
/** Multi-handler child rows overlap: parent subtotals must use the union, never sum children. */
|
||||
export function faultParentTotals(rows: FaultAnalysisGroup[], dimensions: FaultAnalysisDimension[]): number[][] {
|
||||
const totals = new Map<string, Set<string>>();
|
||||
const keys = rows.map(row => dimensions.slice(0, -1).map((_, depth) => JSON.stringify(dimensions.slice(0, depth + 1).map(d => row.values[d]))));
|
||||
rows.forEach((row, i) => keys[i].forEach(key => {
|
||||
const ids = totals.get(key) || new Set<string>(); row.recordIds.forEach(id => ids.add(id)); totals.set(key, ids);
|
||||
}));
|
||||
return keys.map(row => row.map(key => totals.get(key)!.size));
|
||||
}
|
||||
@@ -0,0 +1,18 @@
|
||||
import { createStyledWorkbook, downloadStyledWorkbook } from '../../../shared/xlsx';
|
||||
import type { FaultDashboardResponse } from '../../../shared/assets/faults';
|
||||
export async function downloadDashboard(data:FaultDashboardResponse,filters:string) {
|
||||
const book=await createStyledWorkbook();book.creator='羚牛氢能 BI';
|
||||
const tables: {name:string;headers:string[];rows:(string|number)[][]}[]=[
|
||||
{name:'管理总览',headers:['指标','数量','口径'],rows:[['期间新增故障',data.totals.reported,'按提报日期'],['受影响车辆',data.totals.vehicles,'本期故障车辆去重'],['当前在办',data.totals.open,'全部待处理 + 处理中'],['逾期',data.totals.overdue,'当前在办中超过处置截止时间'],['待处理',data.totals.waiting,'全部待处理'],['处理中',data.totals.processing,'全部处理中'],['今日新增',data.totals.todayReported,'北京时间今日提报'],['本日解决',data.totals.todayClosed,'北京时间今日解决'],['累计台账',data.totals.ledger,'当前筛选范围的全部有效故障']]},
|
||||
...Object.entries(data.distributions).map(([key,rows])=>({name:({region:'区域分布',level:'故障程度',customer:'客户影响',model:'车型分布'} as Record<string,string>)[key],headers:['分组','本期故障','已闭环','未闭环','影响车辆','当前在办'],rows:rows.map(r=>[r.label,r.reported,r.closed,r.unclosed,r.vehicles,r.open])})),
|
||||
{name:'车型与部位',headers:['品牌车型','故障部位','故障数量'],rows:data.matrix.cells.filter(c=>c.count).map(c=>[c.model,c.category,c.count])},
|
||||
];
|
||||
for(const table of tables){const sheet=book.addWorksheet(table.name);sheet.columns=table.headers.map((_,i)=>({width:i===0?32:24}));sheet.mergeCells(1,1,1,table.headers.length);sheet.getCell('A1').value=`故障风险与服务分析 · ${table.name}`;sheet.getRow(1).height=36;sheet.getCell('A1').font={size:18,bold:true,color:{argb:'FFFFFFFF'}};sheet.getCell('A1').fill={type:'pattern',pattern:'solid',fgColor:{argb:'FF1E293B'}};
|
||||
sheet.mergeCells(2,1,2,table.headers.length);sheet.getCell('A2').value=`${data.start} 至 ${data.end} · ${filters||'全部数据权限范围'}`;sheet.getCell('A2').alignment={wrapText:true};sheet.getRow(2).height=32;
|
||||
sheet.mergeCells(3,1,3,table.headers.length);sheet.getCell('A3').value=`数据时间：${new Date(data.updatedAt).toLocaleString('zh-CN',{timeZone:'Asia/Shanghai',hour12:false})}（北京时间）`;
|
||||
sheet.getRow(5).values=table.headers;table.rows.forEach((r,i)=>sheet.getRow(i+6).values=r);
|
||||
for(let n=5;n<=table.rows.length+5;n++){sheet.getRow(n).height=27;sheet.getRow(n).eachCell((cell,i)=>{cell.font={name:'Microsoft YaHei',size:11,bold:n===5,color:{argb:n===5?'FFFFFFFF':'FF334155'}};cell.fill={type:'pattern',pattern:'solid',fgColor:{argb:n===5?'FF2563EB':n%2?'FFF5F8FC':'FFFFFFFF'}};cell.alignment={vertical:'middle',horizontal:i===1?'left':'center'};if(typeof cell.value==='number')cell.numFmt='#,##0';});}
|
||||
sheet.views=[{state:'frozen',ySplit:5,showGridLines:false}];sheet.autoFilter={from:'A5',to:{row:table.rows.length+5,column:table.headers.length}};
|
||||
}
|
||||
await downloadStyledWorkbook(book, `故障风险与服务分析_${data.start}_${data.end}.xlsx`);
|
||||
}
|
||||
@@ -0,0 +1,123 @@
|
||||
/* Fault analysis workspace: compact panels and a shared, explicit query scope. */
|
||||
.fd-page,.fault-overview-page { --fd-blue:#0965ff; --fd-ink:#162449; --fd-muted:#7385a4; --fd-border:#e3ebf6; padding:18px 22px 22px; background:#f8fbff; color:var(--fd-ink); font-size:12px; min-height:100vh; }
|
||||
.fd-page button { cursor:pointer; }.fd-page button:disabled { cursor:default; opacity:.48; }.fd-page button:focus-visible,.fd-page select:focus-visible,.fd-page input:focus-visible,.fd-page summary:focus-visible { outline:2px solid #2563eb; outline-offset:3px; }
|
||||
.fd-header { display:flex; align-items:center; justify-content:space-between; gap:18px; }.fd-breadcrumb { color:var(--fd-muted); font-size:11px; margin-bottom:10px; }.fd-heading-line { display:flex; gap:16px; align-items:center; }.fd-heading-line h1 { font-size:24px; font-weight:750; letter-spacing:-.04em; color:#081e50; white-space:nowrap; }.fd-heading-line p { font-size:12px; color:#526584; }
|
||||
.fd-header-actions { display:flex; align-items:center; gap:16px; flex-shrink:0; font-size:11px; }.fd-header-actions>span { color:var(--fd-muted); }.fd-header-actions>button,.fd-header-actions .analysis-button { display:inline-flex; align-items:center; gap:6px; }.fd-header-actions .analysis-button { background:white; border:1px solid #d8e3f2; border-radius:6px; padding:9px 15px; }.fd-header-actions .analysis-export-action { display:flex; flex-direction:column; align-items:flex-end; }.fd-header-actions small { color:#dc2626; }
|
||||
.fd-tabs { display:flex; gap:28px; border-bottom:1px solid var(--fd-border); margin:14px 0 14px; }.fd-tabs button { padding:10px 20px 9px; border-bottom:3px solid transparent; font-size:13px; font-weight:600; }.fd-tabs button[aria-current=page] { color:var(--fd-blue); border-color:var(--fd-blue); }
|
||||
.fd-toolbar { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }.fd-date { flex:1.6 1 275px; min-width:240px; }.fd-date>button { margin:0; padding:6px 10px; border-radius:6px; box-shadow:none; gap:8px; height:42px; }.fd-date>button>span:first-child { width:24px; height:24px; background:white; }.fd-date>button>span:nth-child(2) { display:flex; align-items:center; gap:10px; }.fd-date>button>span:nth-child(2)>span:first-child { font-size:10px; }.fd-date>button>span:nth-child(2)>span:nth-child(2) { margin:0; font-size:11px; font-weight:500; }.fd-date>button>span:nth-child(3) { display:none; }
|
||||
.fd-filter { display:flex; align-items:center; gap:10px; flex:1 1 170px; min-width:0; }.fd-filter>span { color:#687e9f; font-size:11px; white-space:nowrap; }.fd-filter select { border:1px solid #d8e3f2; height:36px; border-radius:5px; min-width:0; flex:1; padding:0 10px; background:#fff; font-size:11px; }
|
||||
.fd-filter-toggle { display:flex; align-items:center; justify-content:center; gap:8px; border:1px solid #d8e3f2; height:36px; border-radius:5px; padding:0 13px; background:white; }.fd-filter-toggle svg { color:var(--fd-blue); }.fd-query { background:var(--fd-blue); color:white; padding:10px 27px; border-radius:5px; font-size:12px; font-weight:600; white-space:nowrap; }.fd-more-filters { flex-basis:100%; display:flex; align-items:center; flex-wrap:wrap; gap:14px; padding:12px; border:1px solid var(--fd-border); border-radius:6px; background:#fff; }.fd-more-filters>button { color:var(--fd-blue); padding:10px; }.fd-scope-note { color:#7e91ad; font-size:10px; margin:7px 0 10px; }.fd-scope-note strong { color:#c9750a; margin-left:8px; font-weight:500; }
|
||||
.fd-content.is-loading { opacity:.5; pointer-events:none; }.fd-kpis { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; }.fd-kpi { background:white; border:1px solid var(--fd-border); border-radius:7px; padding:10px 14px; min-width:0; height:117px; }.fd-kpi>button { display:grid; grid-template-columns:32px 1fr 15px; align-items:center; width:100%; text-align:left; gap:7px 10px; }.fd-kpi>button>span { font-size:12px; font-weight:600; }.fd-kpi>button>svg:last-of-type { color:#8ca1c2; }.fd-kpi-icon { width:30px; height:30px; padding:6px; border-radius:8px; color:var(--fd-blue); background:#eff6ff; }.fd-kpi strong { grid-column:2/4; font-size:29px; font-weight:650; line-height:1.05; font-variant-numeric:tabular-nums; }.fd-kpi strong small { font-size:11px; font-weight:400; color:#8596b0; margin-left:8px; }.fd-kpi>p { display:flex; align-items:center; gap:8px; margin-top:12px; font-size:10px; color:#8091ac; }.fd-kpi>p b { font-size:12px; }.fd-kpi>p small { margin-left:auto; font-size:9px; }.fd-kpi-parts { display:flex; align-items:center; gap:5px; margin-top:9px; }.fd-kpi-parts>span { color:#8495af; }.fd-kpi-parts button { flex:1; display:flex; justify-content:space-between; align-items:center; background:#fff9e8; color:#ad7615; padding:6px 8px; border-radius:4px; font-size:10px; }.fd-kpi-parts button:last-child { background:#eff5ff; color:#1b65d8; }.fd-kpi-parts b { color:var(--fd-ink); font-size:13px; }
|
||||
.fd-blue { color:#1764f4; }.fd-purple { color:#5645ef; background:#f2f0ff; }.fd-orange { color:#d98308; }.fd-danger { color:#dc2626!important; }.fd-green { color:#059669; }.fd-kpi-icon.fd-orange { background:#fff7e6; }.fd-kpi-icon.fd-danger { background:#fff0f2; }
|
||||
.fd-today-stats { display:flex; align-items:center; gap:18px; padding:9px 2px; font-size:10px; color:#8192ad; }.fd-today-stats button { color:#647896; }.fd-today-stats b { color:#294779; margin-left:6px; font-size:11px; }.fd-insight { display:flex; align-items:center; gap:10px; background:#eef6ff; border:1px solid #c7ddff; color:#0965ff; padding:10px 13px; border-radius:6px; margin:0 0 12px; font-size:11px; }.fd-insight>svg { flex-shrink:0; }.fd-insight strong { font-weight:550; }.fd-insight>span { color:#7e94b8; font-size:10px; margin-left:auto; }.fd-insight button { display:flex; align-items:center; gap:4px; flex-shrink:0; }
|
||||
.fd-grid { display:grid; gap:12px; margin-bottom:12px; }.fd-grid-primary { grid-template-columns:1.5fr 1fr; }.fd-grid-secondary { grid-template-columns:1.2fr 1fr; }.fd-panel { background:#fff; border:1px solid var(--fd-border); border-radius:7px; padding:12px; min-width:0; }.fd-panel-title { display:flex; align-items:center; flex-wrap:wrap; gap:10px; margin-bottom:11px; }.fd-panel-title h2 { font-size:14px; font-weight:700; color:#172647; border-left:4px solid #0965ff; padding-left:9px; line-height:16px; }.fd-panel-title>span { color:#7a8eac; font-size:10px; }.fd-panel-title>button { display:flex; align-items:center; gap:4px; margin-left:auto; color:var(--fd-blue); font-size:11px; }.fd-panel-title>.fd-chip { margin-left:auto; }.fd-focus .fd-panel-title>.fd-chip { margin-left:0; }.fd-chip { padding:4px 8px; border:1px solid #e5ebf4; border-radius:4px; background:#f8fafc; }.fd-chip.fd-orange { color:#ad7615; background:#fff9e9; }.fd-chip.fd-danger { background:#fff1f2; border-color:#fecdd3; }
|
||||
.fd-chart-controls { display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap; }.fd-segment { display:flex; border-radius:4px; background:#f3f6fa; padding:2px; gap:2px; }.fd-segment button { padding:6px 12px; font-size:11px; white-space:nowrap; border-radius:3px; color:#5b7296; }.fd-segment button[aria-pressed=true] { color:white; background:var(--fd-blue); }.fd-segment button:disabled { font-size:9px; padding:6px; }.fd-legend { display:flex; gap:18px; justify-content:flex-end; margin:12px 0 2px; font-size:10px; }.fd-distribution-chart { max-height:360px; overflow:auto; }.fd-panel-foot { display:flex; justify-content:space-between; align-items:center; gap:8px; margin-top:7px; font-size:9px; color:#8296b3; }.fd-panel-foot button { color:var(--fd-blue); font-size:10px; flex-shrink:0; padding:3px; }.fd-caption { font-size:10px; color:#8396b2; margin:8px 0; line-height:1.6; }.fd-level-list { display:grid; gap:11px; padding:14px 12px; }.fd-level-list button { display:grid; grid-template-columns:68px 1fr 28px 12px; align-items:center; gap:10px; font-size:11px; text-align:left; }.fd-level-track { height:18px; }.fd-level-track>span { display:block; height:100%; min-width:2px; }.fd-level-list button>svg { color:#90a3bf; }.fd-info { display:flex; align-items:center; gap:10px; font-size:10px; line-height:1.7; border-radius:5px; padding:8px 10px; color:#286dd7; background:#eff6ff; }.fd-info svg { flex-shrink:0; }
|
||||
.fd-table-scroll { overflow:auto; max-height:420px; border:1px solid #e7eef7; border-radius:5px; }.fd-page table { width:100%; border-collapse:collapse; font-size:11px; }.fd-page th { font-size:10px; font-weight:600; background:#f7f9fc; color:#637b9e; text-align:left; }.fd-page td,.fd-page th { padding:7px 9px; border-bottom:1px solid #edf2f9; }.fd-page tbody tr:last-child td,.fd-page tbody tr:last-child th { border-bottom:none; }.fd-page table button { color:#1764ef; }.fd-page table button:hover { text-decoration:underline; }.fd-matrix { min-width:620px; }.fd-matrix td,.fd-matrix thead th:not(:first-child) { text-align:center; border-left:1px solid #ecf2fa; }.fd-matrix tbody th { max-width:145px; min-width:135px; white-space:normal; background:white; color:#334a6d; }.fd-matrix td button { display:block; width:100%; min-width:38px; color:#12356e; font-weight:600; }.fd-customers { min-width:440px; }.fd-customer-meter { display:flex; align-items:center; gap:7px; width:100%; }.fd-customer-meter progress { width:110px; height:9px; appearance:none; border:none; background:transparent; border-radius:8px; }.fd-customer-meter progress::-webkit-progress-bar { background:#f0f5fc; border-radius:8px; }.fd-customer-meter progress::-webkit-progress-value { background:#2475ff; border-radius:8px; }.fd-customer-meter progress::-moz-progress-bar { background:#2475ff; border-radius:8px; }.fd-customers td:first-child { color:#8193b0; }.fd-customers td:last-child { text-align:center; }
|
||||
.fd-tickets { min-width:1000px; }.fd-tickets td { line-height:1.5; }.fd-tickets small { display:block; margin-top:2px; font-size:9px; color:#7d90ab; }.fd-tickets strong { font-weight:600; }.fd-tickets td:nth-child(2) { max-width:140px; }.fd-description { max-width:250px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }.fd-grade { white-space:nowrap; font-size:10px; padding:3px 5px; border-radius:3px; color:#73859f; background:#f2f5f9; }.fd-grade-L1 { color:#dc2626; background:#fff0f1; }.fd-grade-L2 { color:#cf7b00; background:#fff7e8; }.fd-grade-L3 { color:#1264e8; background:#eff6ff; }.fd-grade-L4 { color:#5786c1; background:#eff6ff; }.fd-tickets .fd-overdue-tag { display:inline-block; color:#dc2626; background:#fff1f2; padding:1px 4px; margin-left:5px; }.fd-focus .fd-caption { margin-bottom:0; }.fd-quality { display:flex; gap:7px; align-items:center; font-size:10px; color:#8a9ab1; padding:12px 2px 0; line-height:1.7; }.fd-quality svg { flex-shrink:0; }.fd-empty { padding:28px 16px; text-align:center; color:#8798b1; }.fd-loading { display:flex; align-items:center; justify-content:center; gap:12px; padding:80px 20px; color:#8193ad; }.fd-chart-data { font-size:10px; color:#6b83a5; margin-top:6px; }.fd-chart-data summary { cursor:pointer; }.fd-chart-data[open] { max-height:260px; overflow:auto; }.fd-chart-data table { margin-top:6px; }
|
||||
.fd-analysis-banner { display:flex; justify-content:space-between; gap:16px; padding:15px; background:white; border:1px solid var(--fd-border); border-radius:6px; margin-bottom:12px; }.fd-analysis-banner h2 { font-weight:600; margin-bottom:6px; }.fd-analysis-banner p { color:#7c8da8; font-size:11px; }.fd-reports>.fault-summary { margin-top:12px; border-radius:8px; border-color:var(--fd-border); padding:16px; }.fd-detail-controls { display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px; margin:14px 0; }.fd-detail-controls>label { display:flex; align-items:center; gap:7px; border:1px solid var(--fd-border); padding:7px 10px; border-radius:5px; color:#90a0b7; }.fd-detail-controls input { width:220px; outline:none; color:#334155; }.fd-details .fd-table-scroll { max-height:65vh; }.fd-load-more { display:block; margin:12px auto; color:var(--fd-blue); padding:10px; }
|
||||
@media(min-width:1350px) { .fd-toolbar { flex-wrap:nowrap; position:relative; }.fd-toolbar:has(.fd-more-filters) { flex-wrap:wrap; }.fd-date { flex:0 0 330px; }.fd-filter { flex:1 1 150px; }.fd-query { padding:10px 29px; } }
|
||||
@media(max-width:1150px) { .fd-header { align-items:flex-start; }.fd-heading-line { display:block; }.fd-heading-line p { margin-top:7px; }.fd-header-actions { gap:10px; flex-wrap:wrap; justify-content:flex-end; max-width:260px; }.fd-kpis { gap:10px; }.fd-insight>span { display:none; }.fd-grid-primary,.fd-grid-secondary { grid-template-columns:1.2fr 1fr; }.fd-kpi>p small { display:none; } }
|
||||
@media(max-width:900px) { .fd-grid-primary,.fd-grid-secondary { grid-template-columns:1fr; }.fd-kpis { grid-template-columns:repeat(2,minmax(0,1fr)); }.fd-header-actions>span { display:none; }.fd-heading-line h1 { font-size:21px; } }
|
||||
@media(max-width:767px) { .fd-page { padding:14px 12px 20px; }.fd-header { gap:10px; }.fd-breadcrumb { font-size:10px; margin-bottom:6px; }.fd-heading-line h1 { font-size:19px; }.fd-heading-line p { display:none; }.fd-header-actions { gap:7px; }.fd-header-actions .analysis-button { font-size:10px; padding:9px 7px; min-height:36px; }.fd-header-actions>button { font-size:0; padding:8px; }.fd-header-actions>button svg { width:16px; height:16px; }.fd-tabs { gap:0; margin:10px 0 12px; }.fd-tabs button { flex:1; padding:10px 0; font-size:12px; }.fd-toolbar { gap:8px; }.fd-date { flex-basis:100%; min-width:0; }.fd-date>button { height:40px; }.fd-date>button>span:nth-child(2) { justify-content:space-between; }.fd-filter { flex:1 1 calc(50% - 8px); gap:5px; }.fd-filter>span { font-size:10px; min-width:40px; }.fd-filter select { height:36px; padding:0 6px; font-size:11px; }.fd-toolbar>.fd-filter:nth-of-type(3) { flex-basis:100%; }.fd-filter-toggle { flex:1; }.fd-toolbar>.fd-query { flex:1; padding:10px; }.fd-scope-note { font-size:9px; line-height:1.7; }.fd-scope-note strong { display:block; margin:0; }.fd-kpis { gap:8px; }.fd-kpi { height:111px; padding:10px; }.fd-kpi>button { grid-template-columns:25px 1fr 12px; gap:7px; }.fd-kpi-icon { width:25px; height:25px; padding:5px; }.fd-kpi>button>span { font-size:11px; }.fd-kpi strong { font-size:26px; }.fd-kpi>p { font-size:9px; gap:6px; margin-top:10px; }.fd-kpi>p b { font-size:11px; }.fd-kpi-parts { margin-top:9px; gap:3px; }.fd-kpi-parts button { font-size:9px; padding:5px; }.fd-kpi-parts b { font-size:12px; }.fd-today-stats { gap:12px; justify-content:space-between; font-size:9px; }.fd-today-stats>span { display:none; }.fd-today-stats b { margin-left:4px; }.fd-insight { font-size:10px; align-items:flex-start; gap:7px; padding:9px; flex-wrap:wrap; }.fd-insight strong { flex:1; line-height:1.7; }.fd-insight button { margin-left:auto; padding:4px; }.fd-grid { gap:10px; margin-bottom:10px; }.fd-panel { padding:10px; }.fd-panel-title h2 { font-size:13px; }.fd-panel-title { gap:7px; }.fd-panel-title>span { font-size:9px; }.fd-chart-controls { gap:8px; }.fd-segment button { padding:7px 9px; font-size:10px; }.fd-level-list { padding:12px 6px; }.fd-level-list button { min-height:28px; }.fd-panel-foot { font-size:9px; }.fd-focus .fd-chip { font-size:9px; padding:3px 5px; }.fd-focus .fd-panel-title>button { font-size:10px; }.fd-analysis-banner { flex-direction:column; }.fd-quality { font-size:9px; align-items:flex-start; }.fd-detail-controls>label { width:100%; }.fd-detail-controls input { width:100%; }.fd-more-filters { gap:9px; padding:9px; }.fd-more-filters .fd-filter { flex-basis:100%; }.fd-page .fault-analysis-dialog { font-size:12px; } }
|
||||
@media(prefers-reduced-motion:reduce) { .fd-page * { scroll-behavior:auto; } }
|
||||
/* The workspace owns its breadcrumb, so the shell's fixed breadcrumb must not cover it. */
|
||||
.app-shell-content:has(>.fd-page)>.fixed.top-0 { display:none; }
|
||||
.fd-breadcrumb { margin-bottom:6px; line-height:16px; }.fd-heading-line h1 { line-height:1.25; }.fd-tabs { margin-top:10px; margin-bottom:10px; }
|
||||
.fd-date>button>span:nth-child(2)>span:first-child { display:none; }.fd-date>button>span:nth-child(2)>span:nth-child(2) { font-size:12px; gap:14px; }
|
||||
.fd-focus td { padding-top:6px; padding-bottom:6px; }
|
||||
@media(max-width:360px) {
|
||||
.fd-header { flex-wrap:wrap; gap:8px; }
|
||||
.fd-header-actions { width:100%; justify-content:flex-end; }
|
||||
.fd-kpi>button { grid-template-columns:21px 1fr 10px; gap:6px 4px; }
|
||||
.fd-kpi-icon { width:21px; height:21px; padding:4px; }
|
||||
.fd-kpi>button>span { font-size:10px; }
|
||||
}
|
||||
@media(max-width:360px) {
|
||||
.fd-toolbar>.fd-filter { flex-basis:100%; }
|
||||
.fd-toolbar>.fd-filter>span { min-width:42px; }
|
||||
}
|
||||
@media(min-width:901px) {
|
||||
.fd-grid-primary .fd-panel-title { margin-bottom:8px; }
|
||||
.fd-grid-primary .fd-caption { margin:5px 0; }
|
||||
.fd-level-list { gap:8px; padding:8px 12px; }
|
||||
.fd-grid-primary .fd-info { padding:6px 10px; }
|
||||
.fd-grid-secondary td,.fd-grid-secondary th { padding:4px 9px; }
|
||||
}
|
||||
|
||||
/* Overview shares the analysis palette while preserving its statistics and report layout. */
|
||||
.fault-overview-page button { cursor:pointer; }
|
||||
.fault-overview-page button:disabled { cursor:default; }
|
||||
.fault-overview-page button:focus-visible { outline:2px solid var(--fd-blue); outline-offset:3px; }
|
||||
.fault-overview-page>.fault-summary {
|
||||
padding:16px; border-color:var(--fd-border); border-radius:7px; box-shadow:none;
|
||||
}
|
||||
.fault-overview-page>.fault-trend { margin-top:12px; }
|
||||
.fault-overview-page .fault-summary-heading { margin-bottom:14px; }
|
||||
.fault-overview-page .fault-summary-heading h2,
|
||||
.fault-overview-page .fault-trend-heading h2 {
|
||||
border-left:4px solid var(--fd-blue); padding-left:9px; color:#172647;
|
||||
font-size:14px; font-weight:700; line-height:16px;
|
||||
}
|
||||
.fault-overview-page .fault-trend-heading h2>svg { display:none; }
|
||||
.fault-overview-page .fault-summary-heading>span,
|
||||
.fault-overview-page .fault-trend-definition,
|
||||
.fault-overview-page .fault-summary-note { color:var(--fd-muted); }
|
||||
.fault-overview-page .fault-metric { border-color:var(--fd-border); border-radius:7px; }
|
||||
.fault-overview-page .fault-metric-main { border-radius:7px; }
|
||||
.fault-overview-page .fault-metric:hover { border-color:#93c5fd; box-shadow:0 3px 10px rgb(9 101 255 / .05); }
|
||||
.fault-overview-page .fault-metric-label { color:#334a6d; font-weight:600; }
|
||||
.fault-overview-page .fault-metric-count strong { color:var(--fd-ink); }
|
||||
.fault-overview-page .fault-metric p { color:var(--fd-muted); }
|
||||
.fault-overview-page .fault-metric-link { color:var(--fd-blue); }
|
||||
.fault-overview-page .fault-metric-icon { color:var(--fd-blue); background:#eff6ff; }
|
||||
.fault-overview-page .fault-metric-closed .fault-metric-icon { color:#059669; background:#ecfdf5; }
|
||||
.fault-overview-page .fault-metric-open .fault-metric-icon { color:#d98308; background:#fff7e6; }
|
||||
.fault-overview-page .fault-metric-ledger .fault-metric-icon { color:#5645ef; background:#f2f0ff; }
|
||||
.fault-overview-page .fault-open-breakdown { border-color:var(--fd-border); }
|
||||
.fault-overview-page .fault-submetric { border-radius:4px; }
|
||||
.fault-overview-page .fault-submetric-waiting { color:#ad7615; background:#fff9e8; }
|
||||
.fault-overview-page .fault-submetric-processing { color:#1b65d8; background:#eff5ff; }
|
||||
.fault-overview-page .fault-submetric strong { color:var(--fd-ink); }
|
||||
.fault-overview-page .fault-overdue-subset { border-color:#fecdd3; border-radius:4px; background:#fff1f2; }
|
||||
.fault-overview-page .fault-report-actions .analysis-export-action button {
|
||||
border-color:#d8e3f2; border-radius:6px; color:#526584; box-shadow:none;
|
||||
}
|
||||
.fault-overview-page .fault-trend-heading [role=group] { border-radius:4px; background:#f3f6fa; padding:2px; gap:2px; }
|
||||
.fault-overview-page .fault-trend-heading [role=group] button { border-radius:3px; color:#5b7296; }
|
||||
.fault-overview-page .fault-trend-heading button[aria-pressed=true] { color:white; background:var(--fd-blue); box-shadow:none; }
|
||||
.fault-overview-page [data-testid=asset-flow-date-range] {
|
||||
border-color:#d8e3f2; border-radius:6px; padding:10px 12px; box-shadow:none;
|
||||
}
|
||||
.fault-overview-page [data-testid=asset-flow-date-range]>span:first-child { width:30px; height:30px; border-radius:6px; color:var(--fd-blue); background:#eff6ff; }
|
||||
.fault-overview-page [data-testid=asset-flow-date-range]>span:nth-child(3) { border-radius:4px; color:#687e9f; background:#f3f6fa; }
|
||||
.fault-overview-page .fault-trend-totals { border-color:var(--fd-border); border-radius:6px; background:#f7faff; }
|
||||
.fault-overview-page .fault-trend-totals button { border-color:var(--fd-border); }
|
||||
.fault-overview-page .fault-trend-all,
|
||||
.fault-overview-page .fault-trend-closed { color:#1764f4; }
|
||||
.fault-overview-page .fault-trend-unclosed { color:#d98308; }
|
||||
.fault-overview-page .fault-trend-expand { border-color:#c7ddff; border-radius:6px; color:var(--fd-blue); background:#eef6ff; }
|
||||
.fault-overview-page .fault-weekly-chart { border-color:var(--fd-border); border-radius:7px; }
|
||||
.fault-overview-page .fault-trend-table { border-color:var(--fd-border); border-radius:5px; }
|
||||
.fault-overview-page .fault-trend-table th { color:#637b9e; background:#f7f9fc; }
|
||||
.fault-overview-page .fault-trend-table td { border-color:#edf2f9; }
|
||||
@media(max-width:767px) {
|
||||
.fault-overview-page { padding:14px 12px 20px; }
|
||||
.fault-overview-page>.fault-summary { padding:12px; }
|
||||
.fault-overview-page .fault-summary-heading h2,
|
||||
.fault-overview-page .fault-trend-heading h2 { font-size:13px; }
|
||||
}
|
||||
.app-shell-content:has(>.fault-overview-page)>.fixed.top-0 { display:none; }
|
||||
.fd-kpis>.fd-kpi { display:flex; flex-direction:column; }
|
||||
.fd-kpis .fd-kpi>button { flex-shrink:0; }
|
||||
.fd-kpis .fd-kpi>p,
|
||||
.fd-kpis .fd-kpi-parts { margin-top:auto; min-height:24px; }
|
||||
.fd-kpis .fd-kpi>p { align-items:center; }
|
||||
.fd-kpis .fd-kpi-parts { gap:5px; }
|
||||
.fd-kpis .fd-kpi-parts button {
|
||||
height:24px; min-width:0; padding:3px 7px; line-height:18px; white-space:nowrap;
|
||||
}
|
||||
.fd-kpis .fd-kpi-parts b { line-height:18px; }
|
||||
.fd-kpis .fd-kpi-parts>span { line-height:24px; font-size:12px; }
|
||||
@media(max-width:1100px) {
|
||||
.fd-kpis { grid-template-columns:repeat(2,minmax(0,1fr)); }
|
||||
}
|
||||
@@ -0,0 +1,221 @@
|
||||
.fault-page { color:#334155; min-width:0; padding:24px; }
|
||||
.fault-page-header { position:relative; z-index:30; margin:-24px -24px 24px; padding:18px 24px 12px; background:rgb(255 255 255 / .95); border-bottom:1px solid #f1f5f9; text-align:center; }
|
||||
.fault-page-header h1 { font-size:16px; font-weight:600; letter-spacing:.04em; color:#1f2937; }
|
||||
.fault-page-header>div { display:flex; justify-content:center; align-items:center; flex-wrap:wrap; gap:12px; margin-top:9px; font-size:10px; color:#94a3b8; }
|
||||
.fault-page-header button { display:inline-flex; align-items:center; gap:4px; color:#64748b; cursor:pointer; padding:4px; }
|
||||
.fault-summary { background:white; border:1px solid #f1f5f9; border-radius:16px; padding:20px; box-shadow:0 1px 3px rgb(15 23 42 / .02); }
|
||||
.fault-summary-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:20px; }
|
||||
.fault-summary-heading h2 { font-size:14px; font-weight:600; color:#1e293b; }
|
||||
.fault-summary-heading>span { color:#94a3b8; font-size:11px; }
|
||||
.fault-metrics { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; align-items:start; }
|
||||
.fault-metric { text-align:left; padding:0; border:1px solid #e2e8f0; background:#fff; border-radius:12px; transition:border-color .15s,box-shadow .15s; min-width:0; }
|
||||
.fault-metric:hover:not(:disabled) { border-color:#93c5fd; box-shadow:0 4px 12px rgb(37 99 235 / .06); }
|
||||
.fault-metric-main:focus-visible { outline:2px solid #2563eb; outline-offset:3px; }
|
||||
.fault-metric-main:disabled { cursor:default; opacity:.6; }
|
||||
.fault-metric-label { display:flex; align-items:center; gap:9px; font-size:13px; font-weight:500; }
|
||||
.fault-metric-label>svg { margin-left:auto; color:#94a3b8; }
|
||||
.fault-metric-icon { display:flex; align-items:center; justify-content:center; width:34px; height:34px; border-radius:9px; background:#eff6ff; color:#2563eb; flex-shrink:0; }
|
||||
.fault-metric-closed .fault-metric-icon { background:#ecfdf5; color:#059669; }
|
||||
.fault-metric-open .fault-metric-icon { background:#fff7ed; color:#d97706; }
|
||||
.fault-metric-ledger .fault-metric-icon { background:#f5f3ff; color:#7c3aed; }
|
||||
.fault-metric-count { display:flex; align-items:baseline; gap:8px; margin:18px 0 10px; }
|
||||
.fault-metric-count strong { font-size:32px; line-height:1.15; font-weight:650; color:#0f172a; font-variant-numeric:tabular-nums; }
|
||||
.fault-metric-count>span { font-size:11px; color:#94a3b8; }
|
||||
.fault-metric p { font-size:11px; color:#94a3b8; line-height:1.6; min-height:35px; }
|
||||
.fault-metric-link { display:block; font-size:11px; color:#3b82f6; margin-top:12px; }
|
||||
.fault-message { margin:12px 0; padding:14px; border:1px solid #fecaca; background:#fef2f2; border-radius:8px; color:#b91c1c; font-size:12px; }
|
||||
.fault-message button { margin-left:12px; text-decoration:underline; cursor:pointer; }
|
||||
.fault-parent-total,.fault-detail-table small { display:block; margin-top:5px; font-size:11px; color:#94a3b8; }
|
||||
.fault-detail-table table { min-width:1100px; }
|
||||
.fault-detail-table td:first-child { white-space:nowrap; }
|
||||
.fault-detail-table td:first-child strong { color:#1e293b; font-weight:600; }
|
||||
.fault-detail-table td:nth-child(2) { min-width:100px; max-width:180px; white-space:normal; overflow-wrap:anywhere; }
|
||||
.fault-detail-table td:nth-child(3) { min-width:180px; max-width:320px; white-space:normal; overflow-wrap:anywhere; }
|
||||
.fault-detail-search { display:flex; gap:6px; border:1px solid #e2e8f0; padding:8px; border-radius:6px; }
|
||||
.fault-detail-search input { min-width:0; width:220px; outline:none; }
|
||||
.fault-empty { text-align:center; padding:32px; color:#94a3b8; }
|
||||
.fault-analysis-note { margin-top:16px; color:#94a3b8; font-size:11px; line-height:1.7; }
|
||||
.fault-analysis-dialog .analysis-dimension-options { align-items:flex-start; }
|
||||
.fault-more { display:flex; margin:16px auto; }
|
||||
@media(max-width:1100px) { .fault-metrics { grid-template-columns:repeat(2,minmax(0,1fr)); } }
|
||||
@media(max-width:767px) {
|
||||
.fault-page { padding:12px; }
|
||||
.fault-page-header { position:relative; z-index:30; margin:-12px -12px 16px; padding:14px 12px 10px; }
|
||||
.fault-page-header h1 { font-size:15px; }
|
||||
.fault-summary { padding:14px; border-radius:12px; }
|
||||
.fault-summary-heading { align-items:flex-start; flex-direction:column; gap:6px; margin-bottom:14px; }
|
||||
.fault-metrics { gap:10px; }
|
||||
.fault-metric { padding:0; border-radius:10px; }
|
||||
.fault-metric-label { font-size:12px; gap:6px; }
|
||||
.fault-metric-icon { width:28px; height:28px; }
|
||||
.fault-metric-label>svg { display:none; }
|
||||
.fault-metric-count strong { font-size:29px; }
|
||||
.fault-metric p { font-size:10px; }
|
||||
.fault-detail-search { width:100%; }
|
||||
.fault-detail-search input { width:100%; }
|
||||
}
|
||||
|
||||
.fault-metric-main { display:block; width:100%; padding:18px; text-align:left; cursor:pointer; border-radius:12px; }
|
||||
/* Fixed compact height keeps every metric aligned, including the open-work breakdown. */
|
||||
.fault-metric { height:164px; display:flex; flex-direction:column; }
|
||||
.fault-metric-main { flex:1; min-height:0; display:flex; flex-direction:column; padding:12px 14px; }
|
||||
.fault-metric-label { width:100%; }
|
||||
.fault-metric-icon { width:28px; height:28px; border-radius:7px; }
|
||||
.fault-metric-count { margin:8px 0 5px; }
|
||||
.fault-metric-count strong { font-size:28px; }
|
||||
.fault-metric p { min-height:0; font-size:10px; }
|
||||
.fault-metric-link { margin-top:auto; padding-top:6px; font-size:10px; }
|
||||
.fault-metric-open { position:relative; }
|
||||
.fault-metric-open .fault-metric-main>p,.fault-metric-open .fault-metric-link { display:none; }
|
||||
.fault-open-breakdown { display:flex; align-items:center; gap:4px; margin:0 12px 12px; padding-top:8px; border-top:1px solid #f1f5f9; }
|
||||
.fault-submetric { flex:1; min-width:0; display:flex; flex-direction:column; align-items:center; gap:2px; padding:4px 2px; border-radius:5px; font-size:10px; cursor:pointer; color:#64748b; }
|
||||
.fault-submetric:hover { background:#eff6ff; color:#2563eb; }
|
||||
.fault-submetric:focus-visible { outline:2px solid #2563eb; outline-offset:1px; }
|
||||
.fault-submetric:disabled { opacity:.6; cursor:default; }
|
||||
.fault-submetric strong { font-variant-numeric:tabular-nums; font-size:16px; line-height:1.2; color:#334155; }
|
||||
.fault-submetric svg { display:none; }
|
||||
.fault-composition-plus { color:#94a3b8; font-size:18px; font-weight:400; }
|
||||
.fault-submetric-waiting { background:#fffbeb; color:#b45309; }
|
||||
.fault-submetric-processing { background:#eff6ff; color:#2563eb; }
|
||||
.fault-overdue-subset { position:absolute; right:14px; top:51px; display:flex; align-items:baseline; gap:4px; padding:5px 8px; border:1px solid #fee2e2; border-radius:6px; background:#fef2f2; color:#dc2626; cursor:pointer; }
|
||||
.fault-overdue-subset span,.fault-overdue-subset small { font-size:10px; }
|
||||
.fault-overdue-subset strong { font-size:16px; line-height:1.2; font-variant-numeric:tabular-nums; }
|
||||
.fault-overdue-subset:hover { background:#fee2e2; }
|
||||
.fault-overdue-subset:focus-visible { outline:2px solid #dc2626; outline-offset:2px; }
|
||||
.fault-overdue-subset:disabled { opacity:.6; cursor:default; }
|
||||
.fault-summary-note { margin-top:12px; font-size:10px; color:#94a3b8; line-height:1.6; }
|
||||
@media(max-width:767px) {
|
||||
.fault-metric { height:172px; }
|
||||
.fault-metric-main { padding:12px; }
|
||||
.fault-open-breakdown { margin:0 8px 10px; gap:2px; }
|
||||
.fault-submetric { min-height:40px; }
|
||||
.fault-overdue-subset { right:8px; top:53px; gap:3px; padding:5px; }
|
||||
.fault-overdue-subset span,.fault-overdue-subset small { font-size:9px; }
|
||||
}
|
||||
.fault-trend { margin-top:20px; }
|
||||
.fault-trend-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; }
|
||||
.fault-trend-heading h2 { display:flex; align-items:center; gap:7px; font-size:14px; font-weight:600; }
|
||||
.fault-trend-heading h2 svg { color:#2563eb; }
|
||||
.fault-trend-heading [role=group] { display:flex; padding:3px; border-radius:8px; background:#f1f5f9; }
|
||||
.fault-trend-heading button { padding:6px 12px; border-radius:6px; font-size:11px; color:#64748b; cursor:pointer; }
|
||||
.fault-trend-heading button[aria-pressed=true] { color:#2563eb; background:#fff; box-shadow:0 1px 3px #e2e8f0; }
|
||||
.fault-trend-definition { margin-top:7px; font-size:11px; line-height:1.7; color:#94a3b8; }
|
||||
.fault-trend-totals { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); margin:14px 0; padding:10px; border:1px solid #f1f5f9; border-radius:10px; background:#f8fafc; }
|
||||
.fault-trend-totals button { display:flex; flex-direction:column; align-items:center; gap:4px; cursor:pointer; border-right:1px solid #e2e8f0; padding:4px; }
|
||||
.fault-trend-totals button:last-child { border-right:0; }
|
||||
.fault-trend-totals strong { font-size:21px; line-height:1.2; font-weight:650; font-variant-numeric:tabular-nums; }
|
||||
.fault-trend-totals span { font-size:11px; }
|
||||
.fault-trend-all { color:#2563eb; }.fault-trend-closed { color:#059669; }.fault-trend-unclosed { color:#d97706; }
|
||||
.fault-trend button:disabled { cursor:default; opacity:.5; }
|
||||
.fault-trend button:focus-visible { outline:2px solid #2563eb; outline-offset:2px; }
|
||||
.fault-trend-chart { width:100%; min-width:0; height:240px; }
|
||||
.fault-trend-loading { min-height:120px; display:flex; align-items:center; justify-content:center; gap:8px; color:#94a3b8; font-size:12px; }
|
||||
.fault-trend-expand { display:flex; align-items:center; justify-content:space-between; gap:8px; width:100%; margin-top:12px; padding:12px; border:1px solid #bfdbfe; border-radius:8px; color:#2563eb; background:#eff6ff; font-size:12px; cursor:pointer; text-align:left; }
|
||||
.fault-trend-table { max-height:400px; overflow:auto; margin-top:12px; border:1px solid #e2e8f0; border-radius:8px; }
|
||||
.fault-trend-table table { width:100%; border-collapse:collapse; font-size:12px; white-space:nowrap; }
|
||||
.fault-trend-table th { text-align:right; padding:10px 12px; position:sticky; top:0; background:#f8fafc; color:#64748b; z-index:1; }
|
||||
.fault-trend-table td { padding:5px 12px; text-align:right; border-top:1px solid #f1f5f9; font-variant-numeric:tabular-nums; }
|
||||
.fault-trend-table th:first-child,.fault-trend-table td:first-child { text-align:left; }
|
||||
.fault-trend-table button { min-height:32px; min-width:32px; color:#2563eb; cursor:pointer; }
|
||||
@media(max-width:767px) { .fault-trend { margin-top:14px; }.fault-trend-heading h2 { font-size:12px; }.fault-trend-heading button { padding:7px 10px; }.fault-trend-table th,.fault-trend-table td { padding-left:6px; padding-right:6px; font-size:10px; }.fault-trend-table button { min-height:40px; }.fault-trend-expand { font-size:11px; } }
|
||||
.fault-weekly .fault-trend-totals { grid-template-columns:repeat(2,minmax(0,1fr)); }
|
||||
.fault-weekly-unit { font-size:11px; color:#94a3b8; }
|
||||
.fault-weekly-reported,.fault-weekly-table button.fault-weekly-reported { color:#2563eb; }
|
||||
.fault-weekly-received,.fault-weekly-table button.fault-weekly-received { color:#d97706; }
|
||||
.fault-weekly-closed,.fault-weekly-table button.fault-weekly-closed { color:#059669; }
|
||||
.fault-weekly-table td small { display:inline-block; margin-left:8px; color:#94a3b8; font-size:10px; }
|
||||
.fault-weekly-table tfoot th { position:static; border-top:1px solid #e2e8f0; background:#f8fafc; padding-top:4px; padding-bottom:4px; }
|
||||
.fault-weekly-empty { margin-top:10px; font-size:12px; color:#94a3b8; text-align:center; }
|
||||
@media(max-width:767px) { .fault-weekly-table td small { display:block; margin:0; }.fault-weekly .fault-trend-totals span { font-size:10px; } }
|
||||
|
||||
.fault-weekly-chart { height:auto; padding:16px 12px 4px; border:1px solid #edf2f7; border-radius:12px; background:#fff; }
|
||||
.fault-chart-heading { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px; padding:0 4px 4px; font-size:12px; color:#334155; font-weight:600; }
|
||||
.fault-chart-heading small { margin-left:10px; font-size:10px; color:#94a3b8; font-weight:400; }
|
||||
.fault-chart-legend { display:flex; align-items:center; gap:18px; font-size:11px; color:#64748b; font-weight:400; }
|
||||
.fault-chart-legend>span { display:flex; align-items:center; gap:7px; }
|
||||
.fault-chart-legend i { position:relative; width:20px; height:2px; background:#2563eb; }
|
||||
.fault-chart-legend i::after { content:''; position:absolute; left:7px; top:-3px; width:8px; height:8px; border:2px solid #2563eb; border-radius:50%; background:#fff; }
|
||||
.fault-chart-key-closed i { background:#059669; }
|
||||
.fault-chart-key-closed i::after { border-color:#059669; background:#059669; }
|
||||
@media(max-width:767px) { .fault-weekly-chart { padding:14px 6px 2px; }.fault-chart-heading { gap:10px; }.fault-chart-legend { gap:12px; font-size:10px; } }
|
||||
|
||||
/* Compact mobile summary: preserve equal card heights and all drill-down targets. */
|
||||
@media(max-width:767px) {
|
||||
.fault-page-header { margin-bottom:10px; padding:10px 12px 6px; }
|
||||
.fault-page-header>div { gap:8px; margin-top:3px; }
|
||||
.fault-page-header button { min-height:32px; }
|
||||
.fault-page>.fault-summary:first-of-type { padding:12px; }
|
||||
.fault-summary-heading { flex-direction:row; flex-wrap:wrap; align-items:center; gap:4px 8px; margin-bottom:10px; }
|
||||
.fault-summary-heading h2 { font-size:13px; }
|
||||
.fault-summary-heading>span { font-size:10px; }
|
||||
.fault-metrics { gap:8px; }
|
||||
.fault-metric { height:132px; }
|
||||
.fault-metric-main { padding:10px; }
|
||||
.fault-metric-label { gap:6px; }
|
||||
.fault-metric-icon { width:24px; height:24px; border-radius:6px; }
|
||||
.fault-metric-icon svg { width:17px; height:17px; }
|
||||
.fault-metric-count { gap:5px; margin:5px 0 3px; }
|
||||
.fault-metric-count strong { font-size:26px; }
|
||||
.fault-metric-link { padding-top:4px; }
|
||||
.fault-open-breakdown { margin:0 8px 8px; padding-top:6px; gap:3px; }
|
||||
.fault-submetric { flex-direction:row; justify-content:center; gap:4px; min-height:32px; padding:4px 2px; }
|
||||
.fault-submetric strong { font-size:14px; }
|
||||
.fault-composition-plus { font-size:14px; }
|
||||
.fault-overdue-subset { top:41px; right:8px; min-height:32px; padding:4px; gap:3px; align-items:center; }
|
||||
.fault-overdue-subset .fault-overdue-prefix { display:none; }
|
||||
.fault-overdue-subset strong { font-size:14px; }
|
||||
.fault-page>.fault-summary:first-of-type>.fault-summary-note { margin-top:8px; font-size:10px; line-height:1.5; }
|
||||
}
|
||||
@media(max-width:359px) {
|
||||
.fault-open-breakdown { margin-right:6px; margin-left:6px; gap:2px; }
|
||||
.fault-submetric { gap:2px; padding-right:0; padding-left:0; font-size:9px; white-space:nowrap; }
|
||||
.fault-submetric strong { font-size:13px; }
|
||||
.fault-composition-plus { font-size:12px; }
|
||||
}
|
||||
|
||||
.fault-weekly-date { display:inline-flex; align-items:center; gap:6px; }
|
||||
.fault-weekly-table tr.fault-weekly-today { background:#f5f8ff; }
|
||||
.fault-weekly-today td:first-child { box-shadow:inset 2px 0 #bfd0ee; }
|
||||
.fault-today-label { padding:1px 5px; border-radius:4px; background:#e8effb; color:#536d96; font-size:10px; line-height:1.6; font-weight:500; }
|
||||
@media(max-width:767px) { .fault-weekly-date { gap:4px; }.fault-today-label { padding:1px 4px; font-size:9px; } }
|
||||
|
||||
/* Short, single-pass entrance: no bounce, list staggering, or animated blur. */
|
||||
.fault-analysis-overlay { animation:fault-backdrop-enter 160ms ease-out backwards; }
|
||||
.fault-analysis-dialog { --fault-enter-y:12px; --fault-enter-scale:.985; transform-origin:50% 60%; animation:fault-dialog-enter 260ms cubic-bezier(.16,1,.3,1) backwards; }
|
||||
@keyframes fault-backdrop-enter { from { opacity:0; } to { opacity:1; } }
|
||||
@keyframes fault-dialog-enter { from { opacity:0; transform:translateY(var(--fault-enter-y)) scale(var(--fault-enter-scale)); } to { opacity:1; transform:none; } }
|
||||
@media(max-width:767px) { .fault-analysis-dialog { --fault-enter-y:8px; --fault-enter-scale:1; animation-duration:220ms; } }
|
||||
@media(prefers-reduced-motion:reduce) { .fault-analysis-overlay,.fault-analysis-dialog { animation:none; } }
|
||||
|
||||
/* Scoped Apple-style semantic grays; keep the surrounding BI theme unchanged. */
|
||||
.fault-analysis-loading { --loading-label:rgba(60,60,67,.72); --loading-fill:rgba(118,118,128,.09); --loading-line:rgba(60,60,67,.08); --loading-radius:12px; padding:8px 0 4px; min-height:340px; }
|
||||
.fault-loading-status { display:flex; align-items:center; justify-content:center; gap:10px; min-height:40px; margin-bottom:20px; color:var(--loading-label); font-size:12px; letter-spacing:.01em; }
|
||||
.fault-loading-spinner { width:24px; height:24px; flex-shrink:0; }
|
||||
.fault-loading-spinner rect { opacity:.2; animation:fault-spinner-tick 1s linear infinite; }
|
||||
@keyframes fault-spinner-tick { from { opacity:1; } to { opacity:.15; } }
|
||||
.fault-loading-skeleton { animation:fault-skeleton-breathe 1.8s ease-in-out infinite; }
|
||||
@keyframes fault-skeleton-breathe { 0%,100% { opacity:.65; } 50% { opacity:1; } }
|
||||
.fault-loading-block { display:block; height:10px; border-radius:5px; background:var(--loading-fill); }
|
||||
.fault-loading-controls { padding:16px; border:1px solid var(--loading-line); border-radius:var(--loading-radius); }
|
||||
.fault-loading-title { width:84px; margin-bottom:14px; }
|
||||
.fault-loading-controls>div { display:flex; flex-wrap:wrap; gap:8px; }
|
||||
.fault-loading-controls>div>span { width:88px; height:28px; border-radius:7px; }
|
||||
.fault-loading-controls>div>span:nth-child(2n) { width:106px; }
|
||||
.fault-loading-summary { display:flex; align-items:center; gap:16px; padding:20px 0; }
|
||||
.fault-loading-summary>span:first-child { width:128px; height:18px; }.fault-loading-summary>span:last-child { width:66px; }
|
||||
.fault-loading-table { border:1px solid var(--loading-line); border-radius:var(--loading-radius); overflow:hidden; }
|
||||
.fault-loading-table-head,.fault-loading-row { display:grid; grid-template-columns:2fr 1fr 1fr; align-items:center; gap:24px; padding:16px; }
|
||||
.fault-loading-table-head { background:var(--loading-fill); }
|
||||
.fault-loading-row { border-top:1px solid var(--loading-line); }
|
||||
.fault-loading-table .fault-loading-block { width:60%; max-width:130px; }
|
||||
.fault-loading-row:nth-child(2n)>.fault-loading-block:first-child { width:80%; }
|
||||
@media(max-width:767px) { .fault-loading-status { margin-bottom:16px; }.fault-loading-controls { padding:12px; }.fault-loading-controls>div { flex-wrap:nowrap; overflow:hidden; }.fault-loading-controls>div>span { flex-shrink:0; width:76px; }.fault-loading-table-head,.fault-loading-row { padding:16px 12px; gap:16px; } }
|
||||
@media(prefers-reduced-motion:reduce) { .fault-loading-spinner rect,.fault-loading-skeleton { animation:none; }.fault-loading-spinner rect:nth-child(3n) { opacity:.65; } }
|
||||
@media(prefers-contrast:more) { .fault-analysis-loading { --loading-label:#334155; --loading-line:#94a3b8; --loading-fill:rgba(118,118,128,.18); } }
|
||||
|
||||
.fault-report-actions { display:flex; align-items:center; gap:10px; flex-wrap:wrap; justify-content:flex-end; }
|
||||
.fault-report-actions .analysis-export-action { display:flex; flex-direction:column; align-items:flex-end; gap:4px; }
|
||||
.fault-report-actions .analysis-export-action button { display:inline-flex; align-items:center; justify-content:center; gap:5px; min-height:32px; border:1px solid #dbe4f0; border-radius:7px; background:#fff; color:#475569; padding:6px 10px; white-space:nowrap; }
|
||||
.fault-report-actions .analysis-export-action button:hover:not(:disabled) { color:#2563eb; border-color:#93c5fd; background:#eff6ff; }
|
||||
.fault-report-actions .analysis-export-action small { font-size:10px; color:#dc2626; }
|
||||
@media(max-width:767px) { .fault-trend-heading { flex-wrap:wrap; gap:8px; }.fault-report-actions { gap:6px; margin-left:auto; }.fault-report-actions .analysis-export-action button { min-height:40px; padding:7px 8px; font-size:10px; }.fault-report-actions .fault-weekly-unit { display:none; } }
|
||||
@@ -0,0 +1,60 @@
|
||||
import assert from 'node:assert/strict';
|
||||
import test from 'node:test';
|
||||
import ExcelJS from 'exceljs';
|
||||
import { createFaultReportWorkbook, type FaultReport } from './report-export';
|
||||
|
||||
const now = new Date('2026-10-13T08:00:00Z');
|
||||
async function saved(report: FaultReport) {
|
||||
const book = await createFaultReportWorkbook(report, undefined, now);
|
||||
const reopened = new ExcelJS.Workbook();
|
||||
await reopened.xlsx.load(await book.xlsx.writeBuffer());
|
||||
return reopened.worksheets[0];
|
||||
}
|
||||
|
||||
test('trend export preserves monthly range, real dates, cohort counts and weighted closure rate after serialization', async () => {
|
||||
const sheet = await saved({ kind: 'trend', data: {
|
||||
start: '2026-09-14', end: '2026-10-13', granularity: 'month', updatedAt: now.toISOString(),
|
||||
totals: { reported: 10, closed: 7, unclosed: 3 },
|
||||
periods: [{ period: '2026-09', reported: 8, closed: 5, unclosed: 3 }, { period: '2026-10', reported: 2, closed: 2, unclosed: 0 }],
|
||||
} });
|
||||
assert.match(String(sheet.getCell('A2').value), /2026-09-14 至 2026-10-13.*按月/);
|
||||
assert.equal((sheet.getCell('A10').value as Date).toISOString(), '2026-10-01T00:00:00.000Z');
|
||||
assert.equal(sheet.getCell('A10').numFmt, 'yyyy-mm');
|
||||
assert.equal(sheet.getCell('B11').value, 8);
|
||||
assert.equal(sheet.getCell('C11').value, 5);
|
||||
assert.equal(sheet.getCell('D11').value, 3);
|
||||
assert.deepEqual(sheet.getCell('B12').value, { formula: 'SUM(B10:B11)', result: 10 });
|
||||
assert.deepEqual(sheet.getCell('E12').value, { formula: 'IFERROR(C12/B12,0)', result: .7 });
|
||||
assert.equal(sheet.autoFilter, 'A9:E11');
|
||||
assert.equal(sheet.views[0].state, 'frozen');
|
||||
assert.equal(sheet.getCell('A9').fill.type, 'pattern');
|
||||
});
|
||||
|
||||
test('weekly export keeps independent solved counts, descending dates and excludes receipt metrics', async () => {
|
||||
const sheet = await saved({ kind: 'weekly', data: {
|
||||
start: '2026-10-12', end: '2026-10-13', updatedAt: now.toISOString(),
|
||||
totals: { reported: 3, closed: 9, received: 99 },
|
||||
days: [{ date: '2026-10-12', reported: 1, closed: 3, received: 90 }, { date: '2026-10-13', reported: 2, closed: 6, received: 9 }],
|
||||
} });
|
||||
assert.deepEqual([1, 2, 3, 4].map(col => sheet.getCell(9, col).value), ['日期', '星期', '新增故障（单）', '解决故障（单）']);
|
||||
assert.equal((sheet.getCell('A10').value as Date).toISOString(), '2026-10-13T00:00:00.000Z');
|
||||
assert.match(sheet.getCell('A10').numFmt, /今天/);
|
||||
assert.equal(sheet.getCell('B10').value, '周二');
|
||||
assert.equal(sheet.getCell('D10').value, 6);
|
||||
assert.deepEqual(sheet.getCell('D12').value, { formula: 'SUM(D10:D11)', result: 9 });
|
||||
assert.deepEqual(sheet.getCell('C6').value, { formula: 'SUM(D10:D11)', result: 9 });
|
||||
assert.equal(sheet.columnCount, 4);
|
||||
});
|
||||
|
||||
test('zero-data trend exports valid guarded ratios and empty reports avoid inverted SUM ranges', async () => {
|
||||
for (const periods of [[], [{ period: '2026-10-13', reported: 0, closed: 0, unclosed: 0 }]]) {
|
||||
const sheet = await saved({ kind: 'trend', data: {
|
||||
start: '2026-10-13', end: '2026-10-13', granularity: 'day', updatedAt: now.toISOString(),
|
||||
totals: { reported: 0, closed: 0, unclosed: 0 }, periods,
|
||||
} });
|
||||
const total = 10 + periods.length;
|
||||
assert.equal(sheet.getCell(`E${total}`).formula, `IFERROR(C${total}/B${total},0)`);
|
||||
assert.equal(sheet.getCell(`B${total}`).formula, periods.length ? 'SUM(B10:B10)' : '0');
|
||||
assert.equal(sheet.getCell('A6').result, 0);
|
||||
}
|
||||
});
|
||||
@@ -0,0 +1,137 @@
|
||||
import { createStyledWorkbook, downloadStyledWorkbook } from '../../../shared/xlsx';
|
||||
import type { FaultTrendResponse, FaultWeeklyResponse } from '../../../shared/assets/faults';
|
||||
import type { Cell, Worksheet } from 'exceljs';
|
||||
|
||||
export type FaultReport = ({ kind: 'trend'; data: FaultTrendResponse } | { kind: 'weekly'; data: FaultWeeklyResponse }) & { filterLabel?: string };
|
||||
interface ReportChartImage { dataUrl: string; width: number; height: number }
|
||||
const palette = { navy: '1E293B', text: '334155', muted: '64748B', blue: '2563EB', green: '059669', amber: 'D97706', line: 'E2E8F0', stripe: 'F8FAFC', today: 'EFF6FF', white: 'FFFFFF' };
|
||||
const fill = (color: string) => ({ type: 'pattern' as const, pattern: 'solid' as const, fgColor: { argb: `FF${color}` } });
|
||||
const excelDate = (date: string) => new Date(`${date.length === 7 ? `${date}-01` : date}T00:00:00Z`);
|
||||
const beijingTime = (date: string | Date) => new Date(date).toLocaleString('zh-CN', { timeZone: 'Asia/Shanghai', hour12: false });
|
||||
function merged(sheet: Worksheet, row: number, from: number, to: number, value: Cell['value']) {
|
||||
if (to > from) sheet.mergeCells(row, from, row, to);
|
||||
const cell = sheet.getCell(row, from); cell.value = value; return cell;
|
||||
}
|
||||
|
||||
/** Browser-independent workbook builder; export the displayed authorized snapshot without requerying. */
|
||||
export async function createFaultReportWorkbook(report: FaultReport, chartImage?: ReportChartImage, now = new Date()) {
|
||||
const book = await createStyledWorkbook();
|
||||
book.creator = '羚牛氢能 BI'; book.created = now; book.modified = now;
|
||||
const trend = report.kind === 'trend';
|
||||
const title = trend ? '故障处理趋势' : '故障运维周报';
|
||||
const headers = trend ? [report.data.granularity === 'month' ? '提报月份' : '提报日期', '新增故障（单）', '已闭环（单）', '未闭环（单）', '闭环率'] : ['日期', '星期', '新增故障（单）', '解决故障（单）'];
|
||||
const columns = headers.length;
|
||||
const sheet = book.addWorksheet(title, { properties: { defaultRowHeight: 22 }, pageSetup: { paperSize: 9, orientation: 'portrait', fitToPage: true, fitToWidth: 1, fitToHeight: 0, horizontalCentered: true, margins: { left: .3, right: .3, top: .4, bottom: .4, header: .2, footer: .2 } } });
|
||||
sheet.columns = (trend ? [24, 19, 19, 19, 18] : [26, 16, 25, 25]).map(width => ({ width }));
|
||||
const headerRow = 9;
|
||||
const periods = trend ? [...report.data.periods].reverse() : [...report.data.days].reverse();
|
||||
const start = headerRow + 1, end = headerRow + periods.length, totalRow = end + 1;
|
||||
const today = new Date(now.getTime() + 8 * 3600000).toISOString().slice(0, 10);
|
||||
const bottom = totalRow + 3;
|
||||
for (let row = 1; row <= bottom; row++) for (let col = 1; col <= columns; col++) {
|
||||
const cell = sheet.getCell(row, col);
|
||||
cell.font = { name: 'Microsoft YaHei', size: 11, color: { argb: `FF${palette.text}` } };
|
||||
cell.alignment = { vertical: 'middle', horizontal: col === 1 ? 'left' : 'center' };
|
||||
}
|
||||
const titleCell = merged(sheet, 1, 1, columns, `羚牛氢能 · ${title}`);
|
||||
titleCell.font = { name: 'Microsoft YaHei', size: 22, bold: true, color: { argb: 'FFFFFFFF' } };
|
||||
titleCell.fill = fill(palette.navy); titleCell.alignment = { vertical: 'middle', indent: 1 }; sheet.getRow(1).height = 48;
|
||||
merged(sheet, 2, 1, columns, `统计范围：${report.data.start} 至 ${report.data.end} · ${trend && report.data.granularity === 'month' ? '按月' : '按日'} · 单位：单`);
|
||||
const stamp = merged(sheet, 3, 1, columns, `数据时间：${beijingTime(report.data.updatedAt)}（北京时间）`); stamp.font = { name: 'Microsoft YaHei', size: 10, color: { argb: `FF${palette.muted}` } };
|
||||
sheet.getRow(2).height = 28; sheet.getRow(4).height = 10; sheet.getRow(7).height = 10;
|
||||
if (report.filterLabel) { const filter = merged(sheet, 4, 1, columns, `筛选条件：${report.filterLabel}`); filter.font = { name: 'Microsoft YaHei', size: 10, color: { argb: `FF${palette.muted}` } }; filter.alignment = { wrapText: true, vertical: 'middle' }; sheet.getRow(4).height = 32; }
|
||||
const sum = (column: string) => periods.length ? `SUM(${column}${start}:${column}${end})` : '0';
|
||||
const cards = trend
|
||||
? [{ from: 1, to: 2, label: '新增故障', col: 'B', value: report.data.totals.reported, color: palette.blue }, { from: 3, to: 4, label: '已闭环', col: 'C', value: report.data.totals.closed, color: palette.green }, { from: 5, to: 5, label: '未闭环', col: 'D', value: report.data.totals.unclosed, color: palette.amber }]
|
||||
: [{ from: 1, to: 2, label: '新增故障', col: 'C', value: report.data.totals.reported, color: palette.blue }, { from: 3, to: 4, label: '解决故障', col: 'D', value: report.data.totals.closed, color: palette.green }];
|
||||
for (const card of cards) {
|
||||
const label = merged(sheet, 5, card.from, card.to, card.label);
|
||||
const value = merged(sheet, 6, card.from, card.to, { formula: sum(card.col), result: card.value });
|
||||
for (const cell of [label, value]) { cell.fill = fill(palette.stripe); cell.alignment = { horizontal: 'center', vertical: 'middle' }; }
|
||||
label.font = { name: 'Microsoft YaHei', size: 11, color: { argb: `FF${palette.muted}` } };
|
||||
value.font = { name: 'Microsoft YaHei', size: 26, bold: true, color: { argb: `FF${card.color}` } }; value.numFmt = '#,##0';
|
||||
}
|
||||
sheet.getRow(5).height = 25; sheet.getRow(6).height = 40;
|
||||
if (chartImage) {
|
||||
const chart = book.addWorksheet('图表', { views: [{ showGridLines: false }], pageSetup: { paperSize: 9, orientation: 'landscape', fitToPage: true, fitToWidth: 1, fitToHeight: 1 } });
|
||||
chart.columns = headers.map(() => ({ width: 900 / columns / 7 }));
|
||||
chart.properties.defaultRowHeight = 24;
|
||||
const heading = merged(chart, 1, 1, columns, `羚牛氢能 · ${title}`);
|
||||
heading.font = { name: 'Microsoft YaHei', size: 22, bold: true, color: { argb: 'FFFFFFFF' } }; heading.fill = fill(palette.navy); heading.alignment = { vertical: 'middle', indent: 1 }; chart.getRow(1).height = 48;
|
||||
const period = merged(chart, 2, 1, columns, `${report.data.start} 至 ${report.data.end} · ${trend && report.data.granularity === 'month' ? '按月' : '按日'} · 单位：单`);
|
||||
period.font = { name: 'Microsoft YaHei', size: 11, color: { argb: `FF${palette.text}` } };
|
||||
const key = merged(chart, 3, 1, columns, trend ? '绿色：已闭环 橙色：未闭环 柱总高为新增故障数' : '蓝色：新增故障 绿色：解决故障');
|
||||
key.font = { name: 'Microsoft YaHei', size: 10, color: { argb: `FF${palette.muted}` } };
|
||||
const id = book.addImage({ base64: chartImage.dataUrl, extension: 'png' });
|
||||
const scale = Math.min(900 / chartImage.width, 360 / chartImage.height);
|
||||
const width = chartImage.width * scale, height = chartImage.height * scale;
|
||||
// Keep circles and labels proportional for both desktop and mobile snapshots.
|
||||
chart.addImage(id, { tl: { col: (900 - width) / 2 / (900 / columns), row: 4 + (360 - height) / 64 }, ext: { width, height }, editAs: 'oneCell' });
|
||||
const caption = merged(chart, 17, 1, columns, `图表为当前页面快照，精确数量见「${title}」工作表。`);
|
||||
caption.font = { name: 'Microsoft YaHei', size: 10, color: { argb: `FF${palette.muted}` } };
|
||||
chart.pageSetup.printArea = `A1:${String.fromCharCode(64 + columns)}17`;
|
||||
}
|
||||
headers.forEach((label, i) => { const cell = sheet.getCell(headerRow, i + 1); cell.value = label; cell.fill = fill(palette.navy); cell.font = { name: 'Microsoft YaHei', size: 11, bold: true, color: { argb: 'FFFFFFFF' } }; });
|
||||
sheet.getRow(headerRow).height = 30;
|
||||
if (trend) [...report.data.periods].reverse().forEach((row, i) => {
|
||||
const n = start + i;
|
||||
sheet.getRow(n).values = [excelDate(row.period), row.reported, row.closed, row.unclosed, { formula: `IFERROR(C${n}/B${n},0)`, result: row.reported ? row.closed / row.reported : 0 }];
|
||||
sheet.getCell(n, 1).numFmt = report.data.granularity === 'month' ? 'yyyy-mm' : 'yyyy-mm-dd';
|
||||
sheet.getCell(n, 5).numFmt = '0.0%;-0.0%;"—"';
|
||||
});
|
||||
else [...report.data.days].reverse().forEach((row, i) => {
|
||||
sheet.getRow(start + i).values = [excelDate(row.date), excelDate(row.date).toLocaleDateString('zh-CN', { weekday: 'short', timeZone: 'UTC' }), row.reported, row.closed];
|
||||
sheet.getCell(start + i, 1).numFmt = row.date === today ? 'yyyy-mm-dd" 今天"' : 'yyyy-mm-dd';
|
||||
});
|
||||
for (let row = start; row <= end; row++) {
|
||||
const date = sheet.getCell(row, 1).value as Date;
|
||||
const highlight = date.toISOString().slice(0, 10) === today && (!trend || report.data.granularity === 'day');
|
||||
sheet.getRow(row).height = 26;
|
||||
for (let col = 1; col <= columns; col++) {
|
||||
const cell = sheet.getCell(row, col); cell.fill = fill(highlight ? palette.today : (row - start) % 2 ? palette.stripe : palette.white);
|
||||
cell.font = { name: 'Microsoft YaHei', size: 11, color: { argb: `FF${palette.text}` } };
|
||||
cell.alignment = { vertical: 'middle', horizontal: col === 1 ? 'left' : 'center' };
|
||||
cell.border = { bottom: { style: 'hair', color: { argb: `FF${palette.line}` } } };
|
||||
if (col > (trend ? 1 : 2) && !(trend && col === 5)) {
|
||||
cell.numFmt = '#,##0'; const color = trend ? [palette.blue, palette.green, palette.amber][col - 2] : col === 3 ? palette.blue : palette.green;
|
||||
cell.font = { name: 'Microsoft YaHei', size: 11, color: { argb: `FF${color}` } };
|
||||
}
|
||||
}
|
||||
}
|
||||
sheet.getCell(totalRow, 1).value = '合计';
|
||||
cards.forEach(card => { sheet.getCell(`${card.col}${totalRow}`).value = { formula: sum(card.col), result: card.value }; sheet.getCell(`${card.col}${totalRow}`).numFmt = '#,##0'; });
|
||||
if (trend) { sheet.getCell(totalRow, 5).value = { formula: `IFERROR(C${totalRow}/B${totalRow},0)`, result: report.data.totals.reported ? report.data.totals.closed / report.data.totals.reported : 0 }; sheet.getCell(totalRow, 5).numFmt = '0.0%;-0.0%;"—"'; }
|
||||
for (let col = 1; col <= columns; col++) { const cell = sheet.getCell(totalRow, col); cell.fill = fill('E8EFF9'); cell.font = { name: 'Microsoft YaHei', size: 11, bold: true, color: { argb: `FF${palette.navy}` } }; }
|
||||
sheet.getRow(totalRow).height = 30;
|
||||
const note = merged(sheet, totalRow + 2, 1, columns, trend ? '统计口径：按提报日期统计同批故障；已归档为已闭环，其余状态（含挂起）为未闭环。按月仅统计所选日期范围。' : '统计口径：新增故障按提报日期；解决故障按解决日期统计，不受提报日期限制。同一故障可在不同日期分别计入两个指标。');
|
||||
note.font = { name: 'Microsoft YaHei', size: 10, color: { argb: `FF${palette.muted}` } }; note.alignment = { wrapText: true, vertical: 'middle' }; sheet.getRow(totalRow + 2).height = 36;
|
||||
const source = merged(sheet, bottom, 1, columns, `来源：羚牛氢能 BI 当前可见统计 · 导出时间：${beijingTime(now)}（北京时间）`); source.font = { name: 'Microsoft YaHei', size: 9, color: { argb: `FF${palette.muted}` } };
|
||||
sheet.autoFilter = { from: { row: headerRow, column: 1 }, to: { row: Math.max(headerRow, end), column: columns } };
|
||||
sheet.views = [{ state: 'frozen', ySplit: headerRow, topLeftCell: `A${start}`, showGridLines: false }];
|
||||
sheet.pageSetup.printArea = `A1:${String.fromCharCode(64 + columns)}${bottom}`;
|
||||
sheet.pageSetup.printTitlesRow = `${headerRow}:${headerRow}`;
|
||||
sheet.headerFooter.oddFooter = '&L羚牛氢能 · 故障管理&R第 &P 页 / 共 &N 页';
|
||||
return book;
|
||||
}
|
||||
|
||||
async function chartImage(svg: SVGSVGElement): Promise<ReportChartImage> {
|
||||
const width = svg.clientWidth || Number(svg.getAttribute('width')) || 800;
|
||||
const height = svg.clientHeight || Number(svg.getAttribute('height')) || 240;
|
||||
const clone = svg.cloneNode(true) as SVGSVGElement;
|
||||
clone.setAttribute('xmlns', 'http://www.w3.org/2000/svg'); clone.setAttribute('width', String(width)); clone.setAttribute('height', String(height));
|
||||
clone.style.fontFamily = 'Arial, sans-serif';
|
||||
const url = URL.createObjectURL(new Blob([new XMLSerializer().serializeToString(clone)], { type: 'image/svg+xml;charset=utf-8' }));
|
||||
try {
|
||||
const image = new Image();
|
||||
await new Promise<void>((resolve, reject) => { image.onload = () => resolve(); image.onerror = () => reject(new Error('图表生成失败')); image.src = url; });
|
||||
const canvas = document.createElement('canvas'); canvas.width = Math.ceil(width * 2); canvas.height = Math.ceil(height * 2);
|
||||
const ctx = canvas.getContext('2d'); if (!ctx) throw new Error('图表生成失败');
|
||||
ctx.scale(2, 2); ctx.fillStyle = '#fff'; ctx.fillRect(0, 0, width, height); ctx.drawImage(image, 0, 0, width, height);
|
||||
return { dataUrl: canvas.toDataURL('image/png'), width, height };
|
||||
} finally { URL.revokeObjectURL(url); }
|
||||
}
|
||||
export async function downloadFaultReport(report: FaultReport, svg?: SVGSVGElement) {
|
||||
const png = svg ? await chartImage(svg) : undefined;
|
||||
const book = await createFaultReportWorkbook(report, png);
|
||||
await downloadStyledWorkbook(book, `${report.kind === 'trend' ? `故障处理趋势_${report.data.granularity === 'day' ? '按日' : '按月'}` : '故障运维周报'}_${report.data.start}_${report.data.end}.xlsx`);
|
||||
}
|
||||
@@ -0,0 +1,12 @@
|
||||
import { useSyncExternalStore } from 'react';
|
||||
|
||||
const query = '(max-width: 767px)';
|
||||
const subscribe = (notify: () => void) => {
|
||||
const media = window.matchMedia(query);
|
||||
media.addEventListener('change', notify);
|
||||
return () => media.removeEventListener('change', notify);
|
||||
};
|
||||
/** Keep the two mobile asset surfaces on the same breakpoint. */
|
||||
export function useMobileLayout() {
|
||||
return useSyncExternalStore(subscribe, () => window.matchMedia(query).matches, () => false);
|
||||
}
|
||||
@@ -1,69 +1,49 @@
|
||||
import { motion } from 'motion/react';
|
||||
import { Construction, Hammer } from 'lucide-react';
|
||||
import { useEffect, useState } from 'react';
|
||||
import { BadgeCheck, CarFront, FileText, ReceiptText, WalletCards } from 'lucide-react';
|
||||
import { fetchEtcOverview, type EtcOverviewResponse } from './api';
|
||||
import { EmptyState, ErrorState, LoadingState, MetricTile, SurfaceCard } from '../../components/ui/surface';
|
||||
|
||||
function formatYuan(value: number) {
|
||||
return `¥${value.toLocaleString('zh-CN', { maximumFractionDigits: 0 })}`;
|
||||
}
|
||||
|
||||
export default function ETCView() {
|
||||
const [data, setData] = useState<EtcOverviewResponse | null>(null);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
let cancelled = false;
|
||||
fetchEtcOverview()
|
||||
.then(result => { if (!cancelled) setData(result); })
|
||||
.catch(reason => { if (!cancelled) setError(reason instanceof Error ? reason.message : String(reason)); });
|
||||
return () => { cancelled = true; };
|
||||
}, []);
|
||||
|
||||
if (error) return <ErrorState message="ETC 数据源暂时不可用，请稍后刷新。" />;
|
||||
if (!data) return <LoadingState label="正在核对 ETC 台账" />;
|
||||
|
||||
if (!data.hasData) {
|
||||
return (
|
||||
<div className="flex flex-col gap-4">
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 12 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.3 }}
|
||||
className="bg-white rounded-2xl border border-slate-100 shadow-sm px-6 py-14 flex flex-col items-center text-center"
|
||||
>
|
||||
<div className="relative w-20 h-20 mb-4">
|
||||
<motion.div
|
||||
animate={{ rotate: [0, -8, 8, -4, 4, 0] }}
|
||||
transition={{ duration: 2.4, repeat: Infinity, ease: 'easeInOut' }}
|
||||
className="absolute inset-0 rounded-3xl bg-gradient-to-br from-amber-50 to-orange-50 flex items-center justify-center"
|
||||
>
|
||||
<Construction size={36} className="text-amber-500" strokeWidth={2.2} />
|
||||
</motion.div>
|
||||
<motion.div
|
||||
animate={{ rotate: [0, 18, -10, 0], y: [0, -2, 1, 0] }}
|
||||
transition={{ duration: 1.6, repeat: Infinity, ease: 'easeInOut' }}
|
||||
className="absolute -top-1 -right-1 w-9 h-9 rounded-2xl bg-white border border-amber-100 shadow-sm flex items-center justify-center"
|
||||
>
|
||||
<Hammer size={16} className="text-amber-500" strokeWidth={2.2} />
|
||||
</motion.div>
|
||||
<div className="flex flex-col gap-3">
|
||||
<EmptyState title="暂无 ETC 通行台账" description="当前账单和通行明细均未入库，接入后会自动展示统计数据。" />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
<div className="text-base font-black text-slate-800 mb-1.5">ETC 模块建设中</div>
|
||||
<div className="text-[12px] text-slate-500 font-bold leading-relaxed max-w-[280px]">
|
||||
通行费明细、按车按月统计、运营成本拆分
|
||||
<br />
|
||||
这些数据都在路上啦
|
||||
return (
|
||||
<div className="flex flex-col gap-3">
|
||||
<div className="grid grid-cols-2 gap-3 md:grid-cols-4">
|
||||
<MetricTile icon={ReceiptText} label="通行明细" value={data.tollRecordCount.toLocaleString('zh-CN')} unit="笔" helper={data.latestTollTime ? `最新记录 ${data.latestTollTime}` : '暂无通行时间'} />
|
||||
<MetricTile icon={CarFront} label="涉及车辆" value={data.vehicleCount.toLocaleString('zh-CN')} unit="台" helper="按通行明细车牌去重" tone="emerald" />
|
||||
<MetricTile icon={WalletCards} label="通行费金额" value={formatYuan(data.totalAmount)} helper="通行费与服务费合计" tone="amber" />
|
||||
<MetricTile icon={FileText} label="ETC 账单" value={data.billCount.toLocaleString('zh-CN')} unit="张" helper={`应收 ${formatYuan(data.receivableAmount)} · 已收 ${formatYuan(data.paidAmount)}`} tone="slate" />
|
||||
</div>
|
||||
|
||||
{/* 简单的里程碑进度感 */}
|
||||
<div className="mt-6 w-full max-w-xs space-y-2">
|
||||
{[
|
||||
{ label: '需求评审', done: true },
|
||||
{ label: '数据对接', done: true },
|
||||
{ label: '页面开发', done: false, current: true },
|
||||
{ label: '正式上线', done: false },
|
||||
].map((m, i) => (
|
||||
<motion.div
|
||||
key={i}
|
||||
initial={{ opacity: 0, x: -8 }}
|
||||
animate={{ opacity: 1, x: 0 }}
|
||||
transition={{ delay: 0.1 + i * 0.08, duration: 0.3 }}
|
||||
className="flex items-center gap-2.5 text-[11px]"
|
||||
>
|
||||
<span className={`w-3 h-3 rounded-full flex-shrink-0 ${
|
||||
m.done ? 'bg-emerald-400'
|
||||
: m.current ? 'bg-amber-400 ring-4 ring-amber-100 animate-pulse'
|
||||
: 'bg-slate-200'
|
||||
}`} />
|
||||
<span className={`font-bold ${m.done ? 'text-slate-500' : m.current ? 'text-amber-600' : 'text-slate-300'}`}>
|
||||
{m.label}
|
||||
</span>
|
||||
{m.done && <span className="text-[10px] text-emerald-500 font-bold ml-auto">已完成</span>}
|
||||
{m.current && <span className="text-[10px] text-amber-500 font-bold ml-auto">进行中</span>}
|
||||
</motion.div>
|
||||
))}
|
||||
<SurfaceCard className="p-4">
|
||||
<div className="flex items-start gap-2 text-xs font-bold text-slate-500">
|
||||
<BadgeCheck size={17} className="mt-0.5 shrink-0 text-emerald-500" />
|
||||
<div>当前统计直接读取 ETC 通行明细与账单台账；金额、应收和已收均不做推算。</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
</SurfaceCard>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
import { useEffect, useMemo, useState } from 'react';
|
||||
import { BatteryCharging, CalendarDays, ChevronRight, Plug, TrendingUp, Wallet } from 'lucide-react';
|
||||
import { motion, AnimatePresence } from 'motion/react';
|
||||
import { BatteryCharging, CalendarDays, ChevronRight, TrendingUp, Wallet } from 'lucide-react';
|
||||
import { AnimatePresence, motion } from 'motion/react';
|
||||
import TrendBadge from './TrendBadge';
|
||||
import { fetchElectricMonthly } from './api';
|
||||
import type { CustomerType, DateQuickPick, ElectricMonthGroup } from './types';
|
||||
@@ -27,6 +27,7 @@ export default function ElectricDaily() {
|
||||
useEffect(() => {
|
||||
let cancelled = false;
|
||||
setError(null);
|
||||
setMonths(null);
|
||||
const query = pick === 'custom'
|
||||
? { startDate: effectiveRange.start, endDate: effectiveRange.end }
|
||||
: { range: pick };
|
||||
@@ -37,7 +38,11 @@ export default function ElectricDaily() {
|
||||
// 默认展开最新一个月
|
||||
if (m.length > 0) setOpenMonths(new Set([m[0].month]));
|
||||
})
|
||||
.catch(e => { if (!cancelled) setError(e instanceof Error ? e.message : String(e)); });
|
||||
.catch(e => {
|
||||
if (cancelled) return;
|
||||
setMonths(null);
|
||||
setError(e instanceof Error ? e.message : String(e));
|
||||
});
|
||||
return () => { cancelled = true; };
|
||||
}, [customer, pick, effectiveRange.start, effectiveRange.end]);
|
||||
|
||||
@@ -58,7 +63,6 @@ export default function ElectricDaily() {
|
||||
} = useMemo(() => summarizeElectricMonths(months), [months]);
|
||||
const scopeLabel = getRangeModeLabel(pick);
|
||||
const rangeText = `${effectiveRange.start} 至 ${effectiveRange.end}`;
|
||||
const showExternalEmpty = customer === 'external' && months !== null && totalKwh === 0;
|
||||
|
||||
const applyQuickPick = (nextPick: DateQuickPick) => {
|
||||
setPick(nextPick);
|
||||
@@ -71,6 +75,23 @@ export default function ElectricDaily() {
|
||||
setDateRange(prev => ({ ...prev, [field]: value }));
|
||||
};
|
||||
|
||||
if (error) {
|
||||
return (
|
||||
<div className="flex flex-col gap-3">
|
||||
<DailyRangeControls
|
||||
pick={pick}
|
||||
dateRange={dateRange}
|
||||
customer={customer}
|
||||
onQuickPick={applyQuickPick}
|
||||
onCustomPick={() => setPick('custom')}
|
||||
onDateRangeChange={updateDateRange}
|
||||
onCustomerChange={setCustomer}
|
||||
/>
|
||||
<ErrorState message={error} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="flex flex-col gap-3">
|
||||
<DailyRangeControls
|
||||
@@ -88,37 +109,15 @@ export default function ElectricDaily() {
|
||||
<MetricTile
|
||||
icon={Wallet}
|
||||
label="充电费用"
|
||||
value={hasFeeDetail ? `¥${totalFee.toLocaleString('zh-CN', { maximumFractionDigits: 0 })}` : '待同步'}
|
||||
helper={hasFeeDetail ? `均价 ${avgPrice.toFixed(2)} 元/度` : '当前明细仅返回充电量'}
|
||||
value={`¥${totalFee.toLocaleString('zh-CN', { maximumFractionDigits: 0 })}`}
|
||||
helper={hasFeeDetail ? `均价 ${avgPrice.toFixed(2)} 元/度` : '当前范围未记录费用'}
|
||||
tone={hasFeeDetail ? 'emerald' : 'slate'}
|
||||
/>
|
||||
<MetricTile icon={CalendarDays} label="有效天数" value={`${activeDays}`} unit="天" helper={`日均 ${avgKwh.toLocaleString('zh-CN', { maximumFractionDigits: 1 })} 度`} tone="amber" />
|
||||
<MetricTile icon={TrendingUp} label="波动提醒" value={abnormalDays} unit="天" helper="环比超过 30% 标记" tone={abnormalDays > 0 ? 'rose' : 'slate'} />
|
||||
</div>
|
||||
|
||||
{/* 外部车辆 数据未就绪 */}
|
||||
{showExternalEmpty && (
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 8 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
className="bg-white rounded-2xl border border-slate-100 shadow-sm px-6 py-14 flex flex-col items-center text-center"
|
||||
>
|
||||
<div className="w-14 h-14 rounded-2xl bg-blue-50 flex items-center justify-center mb-3 relative">
|
||||
<Plug size={22} className="text-blue-500" />
|
||||
<span className="absolute -top-0.5 -right-0.5 w-3 h-3 rounded-full bg-blue-400 animate-ping" />
|
||||
<span className="absolute -top-0.5 -right-0.5 w-3 h-3 rounded-full bg-blue-500" />
|
||||
</div>
|
||||
<div className="text-sm font-bold text-slate-700 mb-1">外部车辆 · 数据未就绪</div>
|
||||
<div className="text-[11px] text-slate-400 max-w-[280px] leading-relaxed">
|
||||
新系统的外部车辆充电数据还在准备中
|
||||
<br />
|
||||
上线后此处将展示完整明细
|
||||
</div>
|
||||
</motion.div>
|
||||
)}
|
||||
|
||||
{/* 月份分组表 */}
|
||||
{!showExternalEmpty && (
|
||||
<div className="bg-white rounded-2xl border border-slate-100 shadow-sm overflow-hidden">
|
||||
<div className="grid grid-cols-[minmax(0,1fr)_120px_88px] md:grid-cols-[minmax(0,1fr)_160px_120px] gap-3 px-3 py-2 bg-slate-50 text-[11px] font-bold text-slate-500">
|
||||
<span>月份 / 日期</span>
|
||||
@@ -184,8 +183,6 @@ export default function ElectricDaily() {
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -6,7 +6,7 @@ import { useHashSubTab } from './useHashSubTab';
|
||||
import { FadeIn, PageFrame } from '../../components/ui/surface';
|
||||
|
||||
const SUB_TABS = [
|
||||
{ id: 'daily', label: '每日', icon: CalendarDays },
|
||||
{ id: 'daily', label: '按日', icon: CalendarDays },
|
||||
{ id: 'overview', label: '总览', icon: LayoutDashboard },
|
||||
] as const satisfies readonly { id: ElectricSubTab; label: string; icon: typeof CalendarDays }[];
|
||||
|
||||
@@ -16,11 +16,11 @@ export default function ElectricModule() {
|
||||
const [sub, setSub] = useHashSubTab<ElectricSubTab>('electric', SUB_IDS);
|
||||
return (
|
||||
<PageFrame
|
||||
title="电能成本看板"
|
||||
subtitle="围绕充电量、费用、日趋势和车辆归属展示电能支出结构，辅助识别费用波动。"
|
||||
title="电能经营看板"
|
||||
subtitle="充电量、费用、日趋势与车辆归属"
|
||||
icon={CalendarDays}
|
||||
eyebrow="ELECTRIC BI"
|
||||
meta="时间单位清晰标注 · 支持日/总览切换"
|
||||
meta="按日 · 总览"
|
||||
>
|
||||
<SubTabs tabs={SUB_TABS} active={sub} onChange={setSub} />
|
||||
<AnimatePresence mode="wait">
|
||||
|
||||
@@ -33,28 +33,32 @@ export default function ElectricOverview() {
|
||||
const trendData = data.trend;
|
||||
// 当电能数据滞后（本月无数据走 fallback）时，柱图标题显示实际月份
|
||||
const trendMonthLabel = trendData[0]?.date.slice(0, 7);
|
||||
const currentMonth = new Date().toISOString().slice(0, 7);
|
||||
const chartTitle = trendMonthLabel && trendMonthLabel !== currentMonth
|
||||
? `${trendMonthLabel} 每日充电`
|
||||
: '本月每日充电';
|
||||
const now = new Date();
|
||||
const currentMonth = `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, '0')}`;
|
||||
const dataIsCurrentMonth = trendMonthLabel === currentMonth;
|
||||
const chartTitle = trendMonthLabel ? `${trendMonthLabel} 每日充电` : '每日充电';
|
||||
const activeDays = trendData.filter(item => item.kwh > 0).length;
|
||||
const avgDailyKwh = activeDays > 0 ? trendData.reduce((sum, item) => sum + item.kwh, 0) / activeDays : 0;
|
||||
const avgDailyFee = activeDays > 0 ? trendData.reduce((sum, item) => sum + item.fee, 0) / activeDays : 0;
|
||||
const peakDay = trendData.reduce<typeof trendData[number] | null>((best, item) => (!best || item.kwh > best.kwh ? item : best), null);
|
||||
const latestDay = trendData.at(-1) ?? null;
|
||||
const displayedMonthKwh = dataIsCurrentMonth ? k.monthKwh : trendData.reduce((sum, item) => sum + item.kwh, 0);
|
||||
const displayedMonthFee = dataIsCurrentMonth ? k.monthFee : trendData.reduce((sum, item) => sum + item.fee, 0);
|
||||
const avgPrice = k.totalKwh > 0 ? k.totalFee / k.totalKwh : 0;
|
||||
const monthPrice = k.monthKwh > 0 ? k.monthFee / k.monthKwh : 0;
|
||||
const monthPrice = displayedMonthKwh > 0 ? displayedMonthFee / displayedMonthKwh : 0;
|
||||
const dataAsOf = data.latestChargeTime ?? '暂无充电记录';
|
||||
|
||||
return (
|
||||
<div className="flex flex-col gap-3">
|
||||
<div className="bg-white rounded-xl border border-slate-100 px-3 py-1.5 text-[11px] text-slate-400">
|
||||
龙王路停车场充电站，期初 2025-01-01，手工导入每日更新
|
||||
<div className="rounded-xl border border-slate-100 bg-white px-3 py-1.5 text-[11px] font-bold text-slate-400">
|
||||
充电账本最新记录：{dataAsOf} · {dataIsCurrentMonth ? '本月数据' : `${trendMonthLabel ?? '暂无'} 数据`}
|
||||
</div>
|
||||
{/* 横向 mini KPI 头 */}
|
||||
<div className="grid grid-cols-2 gap-3 md:grid-cols-4">
|
||||
<MetricTile icon={Wallet} label="累计充电费" value={fmtYuan(k.totalFee)} helper={fmtKwh(k.totalKwh)} />
|
||||
<MetricTile icon={CalendarClock} label="本月充电费" value={fmtYuan(k.monthFee)} helper={fmtKwh(k.monthKwh)} tone="emerald" />
|
||||
<MetricTile icon={Gauge} label="累计均价" value={avgPrice.toFixed(2)} unit="元/度" helper={`本月 ${monthPrice.toFixed(2)} 元/度`} tone="amber" />
|
||||
<MetricTile icon={BatteryCharging} label="今日充电" value={k.todayKwh.toLocaleString('zh-CN', { maximumFractionDigits: 1 })} unit="度" helper={`${fmtYuan(k.todayFee)} · ${k.todayChainPct >= 0 ? '+' : ''}${(k.todayChainPct * 100).toFixed(1)}%`} tone={Math.abs(k.todayChainPct) >= 0.3 ? 'rose' : 'slate'} />
|
||||
<MetricTile icon={CalendarClock} label={dataIsCurrentMonth ? '本月充电费' : '数据最新月费用'} value={fmtYuan(displayedMonthFee)} helper={fmtKwh(displayedMonthKwh)} tone="emerald" />
|
||||
<MetricTile icon={Gauge} label="累计均价" value={avgPrice.toFixed(2)} unit="元/度" helper={`${dataIsCurrentMonth ? '本月' : '最新月'} ${monthPrice.toFixed(2)} 元/度`} tone="amber" />
|
||||
<MetricTile icon={BatteryCharging} label={dataIsCurrentMonth ? '今日充电' : '最新日充电'} value={(dataIsCurrentMonth ? k.todayKwh : latestDay?.kwh ?? 0).toLocaleString('zh-CN', { maximumFractionDigits: 1 })} unit="度" helper={dataIsCurrentMonth ? `${fmtYuan(k.todayFee)} · ${k.todayChainPct >= 0 ? '+' : ''}${(k.todayChainPct * 100).toFixed(1)}%` : `${latestDay?.date ?? '暂无记录'} · ${fmtYuan(latestDay?.fee ?? 0)}`} tone={dataIsCurrentMonth && Math.abs(k.todayChainPct) >= 0.3 ? 'rose' : 'slate'} />
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 gap-3 md:grid-cols-3">
|
||||
@@ -70,8 +74,8 @@ export default function ElectricOverview() {
|
||||
</SurfaceCard>
|
||||
<SurfaceCard className="p-3">
|
||||
<div className="text-[11px] font-black text-slate-400">月度占比</div>
|
||||
<div className="mt-1 text-xl font-black text-emerald-600">{k.totalFee > 0 ? (k.monthFee / k.totalFee * 100).toFixed(1) : '0.0'}%</div>
|
||||
<div className="mt-1 text-[11px] font-bold text-slate-500">本月费用 / 累计费用</div>
|
||||
<div className="mt-1 text-xl font-black text-emerald-600">{k.totalFee > 0 ? (displayedMonthFee / k.totalFee * 100).toFixed(1) : '0.0'}%</div>
|
||||
<div className="mt-1 text-[11px] font-bold text-slate-500">{dataIsCurrentMonth ? '本月' : '最新月'}费用 / 累计费用</div>
|
||||
</SurfaceCard>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -6,10 +6,10 @@ export default function EtcModule() {
|
||||
return (
|
||||
<PageFrame
|
||||
title="ETC 通行费看板"
|
||||
subtitle="规划按车、按月、按线路拆分通行费，让车辆运营成本口径逐步完整。"
|
||||
subtitle="通行明细、账单与回款状态"
|
||||
icon={Receipt}
|
||||
eyebrow="ETC BI"
|
||||
meta="数据对接中 · 页面能力预留"
|
||||
meta="通行明细 · 账单"
|
||||
>
|
||||
<ETCView />
|
||||
</PageFrame>
|
||||
|
||||
@@ -1,277 +0,0 @@
|
||||
import { useEffect, useMemo, useState } from 'react';
|
||||
import { ChevronRight, Fuel, Plug, TrendingUp, Truck } from 'lucide-react';
|
||||
import { motion, AnimatePresence } from 'motion/react';
|
||||
import { BarChart, Bar, XAxis, YAxis, ResponsiveContainer, Cell, Tooltip, ReferenceLine } from 'recharts';
|
||||
import TrendBadge from './TrendBadge';
|
||||
import { fetchHydrogenDaily } from './api';
|
||||
import type { CustomerType, DateQuickPick, HydrogenDailyRow } from './types';
|
||||
import {
|
||||
getQuickRange,
|
||||
getRangeModeLabel,
|
||||
normalizeRange,
|
||||
summarizeHydrogenRows,
|
||||
type RangeMode,
|
||||
} from './hydrogen-daily/model';
|
||||
import DailyRangeControls from './daily-range/DailyRangeControls';
|
||||
import { EmptyState, ErrorState, LoadingState, MetricTile, SurfaceCard } from '../../components/ui/surface';
|
||||
|
||||
export default function HydrogenDaily() {
|
||||
const [pick, setPick] = useState<RangeMode>('last15');
|
||||
const [dateRange, setDateRange] = useState(() => getQuickRange('last15'));
|
||||
const [customer, setCustomer] = useState<CustomerType>('lingniu');
|
||||
const [expanded, setExpanded] = useState<Set<string>>(new Set());
|
||||
const [rows, setRows] = useState<HydrogenDailyRow[] | null>(null);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
const effectiveRange = useMemo(() => normalizeRange(dateRange.start, dateRange.end), [dateRange.start, dateRange.end]);
|
||||
|
||||
useEffect(() => {
|
||||
let cancelled = false;
|
||||
setError(null);
|
||||
const query = pick === 'custom'
|
||||
? { startDate: effectiveRange.start, endDate: effectiveRange.end }
|
||||
: { range: pick };
|
||||
fetchHydrogenDaily(query, customer)
|
||||
.then(r => { if (!cancelled) setRows(r); })
|
||||
.catch(e => { if (!cancelled) setError(e instanceof Error ? e.message : String(e)); });
|
||||
return () => { cancelled = true; };
|
||||
}, [pick, customer, effectiveRange.start, effectiveRange.end]);
|
||||
|
||||
const {
|
||||
trendData,
|
||||
totalKg,
|
||||
activeDays,
|
||||
stationCount,
|
||||
avgKg,
|
||||
peakDay,
|
||||
lowDay,
|
||||
zeroDays,
|
||||
} = useMemo(() => summarizeHydrogenRows(rows), [rows]);
|
||||
const scopeLabel = getRangeModeLabel(pick);
|
||||
const rangeText = `${effectiveRange.start} 至 ${effectiveRange.end}`;
|
||||
|
||||
const toggle = (date: string) => setExpanded(prev => {
|
||||
const next = new Set(prev);
|
||||
next.has(date) ? next.delete(date) : next.add(date);
|
||||
return next;
|
||||
});
|
||||
|
||||
const applyQuickPick = (nextPick: DateQuickPick) => {
|
||||
setPick(nextPick);
|
||||
setDateRange(getQuickRange(nextPick));
|
||||
};
|
||||
|
||||
const updateDateRange = (field: 'start' | 'end', value: string) => {
|
||||
if (!value) return;
|
||||
setPick('custom');
|
||||
setDateRange(prev => ({ ...prev, [field]: value }));
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="flex flex-col gap-3">
|
||||
<DailyRangeControls
|
||||
pick={pick}
|
||||
dateRange={dateRange}
|
||||
customer={customer}
|
||||
onQuickPick={applyQuickPick}
|
||||
onCustomPick={() => setPick('custom')}
|
||||
onDateRangeChange={updateDateRange}
|
||||
onCustomerChange={setCustomer}
|
||||
/>
|
||||
|
||||
<div className="grid grid-cols-2 gap-3 md:grid-cols-4">
|
||||
<MetricTile icon={Fuel} label={`${scopeLabel}加氢量`} value={totalKg.toLocaleString('zh-CN', { maximumFractionDigits: 1 })} unit="Kg" helper={rangeText} />
|
||||
<MetricTile icon={Truck} label="车辆归属" value={customer === 'external' ? '外部' : '羚牛'} helper="当前筛选口径" tone="emerald" />
|
||||
<MetricTile icon={TrendingUp} label="有效天数" value={`${activeDays}/${rows?.length ?? 0}`} helper={`日均 ${avgKg.toLocaleString('zh-CN', { maximumFractionDigits: 1 })} Kg`} tone="amber" />
|
||||
<MetricTile icon={Plug} label="涉及加氢站" value={stationCount} unit="站" helper="按明细站点去重" tone="slate" />
|
||||
</div>
|
||||
|
||||
{/* 外部车辆：新系统数据还没准备好 */}
|
||||
{customer === 'external' && rows !== null && totalKg === 0 && (
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 8 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
className="bg-white rounded-2xl border border-slate-100 shadow-sm px-6 py-14 flex flex-col items-center text-center"
|
||||
>
|
||||
<div className="w-14 h-14 rounded-2xl bg-blue-50 flex items-center justify-center mb-3 relative">
|
||||
<Plug size={22} className="text-blue-500" />
|
||||
<span className="absolute -top-0.5 -right-0.5 w-3 h-3 rounded-full bg-blue-400 animate-ping" />
|
||||
<span className="absolute -top-0.5 -right-0.5 w-3 h-3 rounded-full bg-blue-500" />
|
||||
</div>
|
||||
<div className="text-sm font-bold text-slate-700 mb-1">外部车辆 · 数据未就绪</div>
|
||||
<div className="text-[11px] text-slate-400 max-w-[280px] leading-relaxed">
|
||||
新系统的外部车辆加氢数据还在准备中
|
||||
<br />
|
||||
上线后此处将展示完整明细
|
||||
</div>
|
||||
</motion.div>
|
||||
)}
|
||||
|
||||
{/* 时段加氢量柱图（外部车辆无数据时不渲染） */}
|
||||
{!(customer === 'external' && totalKg === 0) && trendData.length > 0 && (
|
||||
<SurfaceCard>
|
||||
<div className="flex items-center justify-between px-4 pt-4 mb-2">
|
||||
<span className="text-sm font-bold text-slate-700">每日加氢量</span>
|
||||
<span className="text-[11px] text-slate-400 font-bold">时间单位：日 · 单位 Kg</span>
|
||||
</div>
|
||||
<div className="mx-4 mb-2 grid grid-cols-3 gap-2 rounded-xl bg-slate-50 p-2">
|
||||
<div>
|
||||
<div className="text-[10px] font-black text-slate-400">峰值日</div>
|
||||
<div className="mt-0.5 truncate text-[11px] font-black text-slate-800">
|
||||
{peakDay ? `${peakDay.date.slice(5)} · ${peakDay.totalKg.toLocaleString('zh-CN', { maximumFractionDigits: 0 })}` : '—'}
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-[10px] font-black text-slate-400">低谷日</div>
|
||||
<div className="mt-0.5 truncate text-[11px] font-black text-slate-800">
|
||||
{lowDay ? `${lowDay.date.slice(5)} · ${lowDay.totalKg.toLocaleString('zh-CN', { maximumFractionDigits: 0 })}` : '—'}
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-[10px] font-black text-slate-400">零数据日</div>
|
||||
<div className={`mt-0.5 text-[11px] font-black ${zeroDays > 0 ? 'text-amber-600' : 'text-emerald-600'}`}>
|
||||
{zeroDays} 天
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="h-[180px] min-w-0 px-2 pb-2">
|
||||
<ResponsiveContainer width="100%" height={180} minWidth={0}>
|
||||
<BarChart data={trendData} margin={{ top: 8, right: 8, bottom: 0, left: -16 }}>
|
||||
<XAxis
|
||||
dataKey="date"
|
||||
tickFormatter={(v: string) => v.slice(5)}
|
||||
tick={{ fontSize: 10, fill: '#94a3b8' }}
|
||||
tickLine={false}
|
||||
axisLine={false}
|
||||
interval="preserveStartEnd"
|
||||
minTickGap={8}
|
||||
/>
|
||||
<YAxis
|
||||
width={42}
|
||||
axisLine={false}
|
||||
tickLine={false}
|
||||
tick={{ fontSize: 9, fill: '#94a3b8' }}
|
||||
tickFormatter={(v: number) => v >= 1000 ? `${Math.round(v / 1000)}k` : `${Math.round(v)}`}
|
||||
/>
|
||||
<Tooltip
|
||||
formatter={(v) => [`${Number(v ?? 0).toLocaleString('zh-CN', { maximumFractionDigits: 2 })} Kg`, '加氢量']}
|
||||
labelFormatter={(d) => `日期 ${d}`}
|
||||
contentStyle={{ borderRadius: 12, fontSize: 12 }}
|
||||
cursor={{ fill: 'rgba(34, 211, 238, 0.06)' }}
|
||||
/>
|
||||
{avgKg > 0 && (
|
||||
<ReferenceLine
|
||||
y={avgKg}
|
||||
stroke="#f59e0b"
|
||||
strokeDasharray="4 4"
|
||||
label={{ value: '均值', position: 'right', fill: '#d97706', fontSize: 10, fontWeight: 700 }}
|
||||
/>
|
||||
)}
|
||||
<Bar dataKey="totalKg" radius={[4, 4, 0, 0]}>
|
||||
{trendData.map((_, i) => (
|
||||
<Cell key={i} fill="url(#hydrogenBarGrad)" />
|
||||
))}
|
||||
</Bar>
|
||||
<defs>
|
||||
<linearGradient id="hydrogenBarGrad" x1="0" x2="0" y1="0" y2="1">
|
||||
<stop offset="0%" stopColor="#22d3ee" />
|
||||
<stop offset="100%" stopColor="#3b82f6" />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
</BarChart>
|
||||
</ResponsiveContainer>
|
||||
</div>
|
||||
</SurfaceCard>
|
||||
)}
|
||||
|
||||
{/* 表格（外部车辆 + 全 0 时不渲染，由上方友好空状态替代） */}
|
||||
{!(customer === 'external' && rows !== null && totalKg === 0) && (
|
||||
<div className="bg-white rounded-2xl border border-slate-100 shadow-sm overflow-hidden">
|
||||
{/* 表头 */}
|
||||
<div className="grid grid-cols-[minmax(0,1fr)_84px_80px] md:grid-cols-[minmax(0,1fr)_140px_120px_104px] gap-2 md:gap-3 px-3 py-2 bg-slate-50 text-[11px] font-bold text-slate-500">
|
||||
<span>日期 / 加氢站</span>
|
||||
<span className="hidden md:block text-right">单价 (元/Kg)</span>
|
||||
<span className="text-right">加氢量 (Kg)</span>
|
||||
<span className="text-right">环比</span>
|
||||
</div>
|
||||
{/* 合计行 */}
|
||||
<div className="grid grid-cols-[minmax(0,1fr)_84px_80px] md:grid-cols-[minmax(0,1fr)_140px_120px_104px] gap-2 md:gap-3 px-3 py-2 bg-blue-50/50 text-[12px] text-blue-600 font-bold">
|
||||
<span>合计</span>
|
||||
<span className="hidden md:block" />
|
||||
<span className="text-right">{totalKg.toLocaleString('zh-CN', { maximumFractionDigits: 2 })}</span>
|
||||
<span />
|
||||
</div>
|
||||
{/* 主行 + 子行 */}
|
||||
{error ? (
|
||||
<div className="p-3"><ErrorState message={error} /></div>
|
||||
) : rows === null ? (
|
||||
<div className="p-3"><LoadingState label="正在加载加氢明细" /></div>
|
||||
) : rows.length === 0 ? (
|
||||
<div className="p-3"><EmptyState title="暂无加氢数据" description="请切换时间范围或车辆归属" /></div>
|
||||
) : rows.map(r => {
|
||||
const open = expanded.has(r.date);
|
||||
const isAbnormal = Math.abs(r.chainPct) >= 0.3;
|
||||
const abnormalBg = isAbnormal
|
||||
? r.chainPct > 0 ? 'bg-emerald-50/40' : 'bg-red-50/40'
|
||||
: '';
|
||||
return (
|
||||
<div key={r.date} className={`border-t border-slate-100 ${abnormalBg}`}>
|
||||
<button
|
||||
onClick={() => toggle(r.date)}
|
||||
className="w-full grid grid-cols-[minmax(0,1fr)_84px_80px] md:grid-cols-[minmax(0,1fr)_140px_120px_104px] gap-2 md:gap-3 px-3 py-2.5 text-left hover:bg-slate-50/60 transition-colors"
|
||||
>
|
||||
<span className="flex items-center gap-1 text-[12px] text-slate-700 font-bold">
|
||||
<ChevronRight size={14} className={`transition-transform ${open ? 'rotate-90' : ''} text-slate-400`} />
|
||||
{r.date}
|
||||
</span>
|
||||
<span className="hidden md:block text-right text-[12px] text-slate-300">—</span>
|
||||
<span className="text-right text-[12px] text-slate-700 font-bold tabular-nums">
|
||||
{r.totalKg.toLocaleString('zh-CN', { maximumFractionDigits: 2 })}
|
||||
</span>
|
||||
<span className="text-right"><TrendBadge value={r.chainPct} /></span>
|
||||
</button>
|
||||
<AnimatePresence initial={false}>
|
||||
{open && (
|
||||
<motion.div
|
||||
initial={{ height: 0, opacity: 0 }}
|
||||
animate={{ height: 'auto', opacity: 1 }}
|
||||
exit={{ height: 0, opacity: 0 }}
|
||||
transition={{ duration: 0.15 }}
|
||||
className="overflow-hidden bg-slate-50/50"
|
||||
>
|
||||
{r.stations.map(s => (
|
||||
<div
|
||||
key={s.name}
|
||||
className="grid grid-cols-[minmax(0,1fr)_84px_80px] md:grid-cols-[minmax(0,1fr)_140px_120px_104px] gap-2 md:gap-3 px-3 py-2 pl-6 md:pl-9 border-t border-slate-100 first:border-t-0 items-start"
|
||||
>
|
||||
<div className="min-w-0">
|
||||
<div className="text-[12px] text-slate-700 font-medium whitespace-nowrap leading-snug">
|
||||
{s.name}
|
||||
</div>
|
||||
{s.pricePerKg > 0 && (
|
||||
<div className="md:hidden mt-1">
|
||||
<span className="inline-flex items-center text-[10px] text-amber-600 bg-amber-50 px-1.5 py-0.5 rounded font-bold whitespace-nowrap">
|
||||
单价 {s.pricePerKg} 元/Kg
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<span className="hidden md:block text-right text-[12px] text-slate-500 font-bold tabular-nums">{s.pricePerKg > 0 ? s.pricePerKg : '—'}</span>
|
||||
<span className="text-right text-[12px] text-slate-700 font-bold tabular-nums">
|
||||
{s.kg.toLocaleString('zh-CN', { maximumFractionDigits: 2 })}
|
||||
</span>
|
||||
<span className="text-right"><TrendBadge value={s.chainPct} /></span>
|
||||
</div>
|
||||
))}
|
||||
</motion.div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,33 +0,0 @@
|
||||
import { LayoutDashboard, CalendarDays } from 'lucide-react';
|
||||
import { AnimatePresence } from 'motion/react';
|
||||
import HydrogenView, { type HydrogenSubTab } from './HydrogenView';
|
||||
import SubTabs from './SubTabs';
|
||||
import { useHashSubTab } from './useHashSubTab';
|
||||
import { FadeIn, PageFrame } from '../../components/ui/surface';
|
||||
|
||||
const SUB_TABS = [
|
||||
{ id: 'daily', label: '每日', icon: CalendarDays },
|
||||
{ id: 'overview', label: '总览', icon: LayoutDashboard },
|
||||
] as const satisfies readonly { id: HydrogenSubTab; label: string; icon: typeof CalendarDays }[];
|
||||
|
||||
const SUB_IDS: readonly HydrogenSubTab[] = ['daily', 'overview'];
|
||||
|
||||
export default function HydrogenModule() {
|
||||
const [sub, setSub] = useHashSubTab<HydrogenSubTab>('hydrogen', SUB_IDS);
|
||||
return (
|
||||
<PageFrame
|
||||
title="氢能经营看板"
|
||||
subtitle="按时间、车辆归属、加氢站和区域统一展示加氢量、费用、收入与异常波动。"
|
||||
icon={CalendarDays}
|
||||
eyebrow="ENERGY BI"
|
||||
meta="数据单位清晰标注 · 支持日/总览切换"
|
||||
>
|
||||
<SubTabs tabs={SUB_TABS} active={sub} onChange={setSub} />
|
||||
<AnimatePresence mode="wait">
|
||||
<FadeIn key={sub}>
|
||||
<HydrogenView sub={sub} />
|
||||
</FadeIn>
|
||||
</AnimatePresence>
|
||||
</PageFrame>
|
||||
);
|
||||
}
|
||||
@@ -1,104 +0,0 @@
|
||||
import { useCallback, useEffect, useRef, useState } from 'react';
|
||||
import { fetchHydrogenOverview, type HydrogenOverviewResponse } from './api';
|
||||
import { DistributionCharts } from './hydrogen-overview/components/DistributionCharts';
|
||||
import { HydrogenOverviewSkeleton } from './hydrogen-overview/components/HydrogenOverviewSkeleton';
|
||||
import { InsightCards } from './hydrogen-overview/components/InsightCards';
|
||||
import { KpiSection } from './hydrogen-overview/components/KpiSection';
|
||||
import { MonthlyCharts } from './hydrogen-overview/components/MonthlyCharts';
|
||||
import { OverviewHeader } from './hydrogen-overview/components/OverviewHeader';
|
||||
import { RefreshOverlay } from './hydrogen-overview/components/RefreshOverlay';
|
||||
import { CustomerSummaryTable, StationSummaryTable } from './hydrogen-overview/components/SummaryTables';
|
||||
import { deriveOverviewMetrics, formatYuan as fmtYuan } from './hydrogen-overview/model';
|
||||
|
||||
export default function HydrogenOverview() {
|
||||
const [data, setData] = useState<HydrogenOverviewResponse | null>(null);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [year, setYear] = useState<number | null>(null);
|
||||
const [refreshing, setRefreshing] = useState(false);
|
||||
const [lastRefreshAt, setLastRefreshAt] = useState<number>(0);
|
||||
const refreshSeq = useRef(0);
|
||||
|
||||
const load = useCallback(async (selectedYear: number | null, force: boolean) => {
|
||||
const seq = ++refreshSeq.current;
|
||||
setRefreshing(true);
|
||||
try {
|
||||
const d = await fetchHydrogenOverview(selectedYear ?? undefined, force);
|
||||
if (seq !== refreshSeq.current) return; // outdated
|
||||
setData(d);
|
||||
setError(null);
|
||||
setLastRefreshAt(Date.now());
|
||||
} catch (e) {
|
||||
if (seq !== refreshSeq.current) return;
|
||||
setError(e instanceof Error ? e.message : String(e));
|
||||
} finally {
|
||||
if (seq === refreshSeq.current) setRefreshing(false);
|
||||
}
|
||||
}, []);
|
||||
|
||||
// 初始加载 + 年份切换：用 force=false 命中热缓存
|
||||
useEffect(() => { void load(year, false); }, [year, load]);
|
||||
|
||||
// 客户端兜底自动刷新：每 60s 静默拉一次（命中后端热缓存，几乎零成本）
|
||||
useEffect(() => {
|
||||
const t = setInterval(() => { void load(year, false); }, 60_000);
|
||||
return () => clearInterval(t);
|
||||
}, [year, load]);
|
||||
|
||||
if (error && !data) {
|
||||
return <div className="bg-red-50 text-red-600 rounded-2xl border border-red-100 p-4 text-sm">加载失败：{error}</div>;
|
||||
}
|
||||
if (!data) {
|
||||
return <HydrogenOverviewSkeleton />;
|
||||
}
|
||||
|
||||
const { kpi, top5, regions, monthly, customers, stations, availableYears, year: activeYear } = data;
|
||||
const {
|
||||
monthAvgKg,
|
||||
bestMonth,
|
||||
latestMonth,
|
||||
monthMomentum,
|
||||
top5Share,
|
||||
profitYield,
|
||||
stationAvgKg,
|
||||
monthlyDual,
|
||||
} = deriveOverviewMetrics(data);
|
||||
const yearProfitFmt = fmtYuan(kpi.yearProfit);
|
||||
const yearRevenueFmt = fmtYuan(kpi.yearRevenue);
|
||||
|
||||
return (
|
||||
<div className="flex flex-col gap-3 relative">
|
||||
<OverviewHeader
|
||||
activeYear={activeYear}
|
||||
availableYears={availableYears}
|
||||
lastRefreshAt={lastRefreshAt}
|
||||
refreshing={refreshing}
|
||||
onSelectYear={setYear}
|
||||
onRefresh={() => void load(year, true)}
|
||||
/>
|
||||
|
||||
<KpiSection kpi={kpi} />
|
||||
|
||||
<InsightCards
|
||||
monthAvgKg={monthAvgKg}
|
||||
bestMonth={bestMonth}
|
||||
latestMonth={latestMonth}
|
||||
monthMomentum={monthMomentum}
|
||||
top5Share={top5Share}
|
||||
profitYield={profitYield}
|
||||
stationAvgKg={stationAvgKg}
|
||||
stationCount={stations.length}
|
||||
yearProfitValue={yearProfitFmt.value}
|
||||
yearProfitUnit={yearProfitFmt.unit}
|
||||
yearRevenueValue={yearRevenueFmt.value}
|
||||
yearRevenueUnit={yearRevenueFmt.unit}
|
||||
/>
|
||||
|
||||
<MonthlyCharts activeYear={activeYear} monthly={monthly} monthlyDual={monthlyDual} />
|
||||
<DistributionCharts top5={top5} regions={regions} yearKg={kpi.yearKg} />
|
||||
<StationSummaryTable stations={stations} />
|
||||
<CustomerSummaryTable customers={customers} />
|
||||
|
||||
<RefreshOverlay refreshing={refreshing} hasData={Boolean(data)} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,12 +0,0 @@
|
||||
import HydrogenOverview from './HydrogenOverview';
|
||||
import HydrogenDaily from './HydrogenDaily';
|
||||
|
||||
export type HydrogenSubTab = 'daily' | 'overview';
|
||||
|
||||
interface Props {
|
||||
sub: HydrogenSubTab;
|
||||
}
|
||||
|
||||
export default function HydrogenView({ sub }: Props) {
|
||||
return sub === 'overview' ? <HydrogenOverview /> : <HydrogenDaily />;
|
||||
}
|
||||
+43
-32
@@ -1,59 +1,70 @@
|
||||
import { fetchJson } from '../../auth/api-client';
|
||||
import type {
|
||||
HydrogenKpi, HydrogenStationTop, HydrogenRegionShare, HydrogenMonthlyPoint, HydrogenDailyRow,
|
||||
HydrogenCustomerRow, HydrogenStationFull,
|
||||
ElectricKpi, ElectricDailyRow, ElectricMonthGroup,
|
||||
CustomerType, DateQuickPick,
|
||||
HydrogenStationBoardResponse,
|
||||
} from './types';
|
||||
|
||||
const BASE = '/api/energy';
|
||||
|
||||
export interface HydrogenOverviewResponse {
|
||||
kpi: HydrogenKpi;
|
||||
top5: HydrogenStationTop[];
|
||||
regions: HydrogenRegionShare[];
|
||||
monthly: HydrogenMonthlyPoint[];
|
||||
customers: HydrogenCustomerRow[];
|
||||
stations: HydrogenStationFull[];
|
||||
availableYears: number[];
|
||||
year: number;
|
||||
/**
|
||||
* 氢能单站日报数据源。
|
||||
* 注意：该接口路径仍带 `/hydrogen` 前缀（历史命名），但为当前单站日报页面在用，
|
||||
* 与已下线的 `/hydrogen/overview|daily|settlement` 等旧接口无关。
|
||||
*/
|
||||
export interface HydrogenStationBoardQuery {
|
||||
startDate: string;
|
||||
endDate: string;
|
||||
stationId?: number | null;
|
||||
force?: boolean;
|
||||
}
|
||||
|
||||
export function fetchHydrogenOverview(year?: number, force = false): Promise<HydrogenOverviewResponse> {
|
||||
const params = new URLSearchParams();
|
||||
if (year) params.set('year', String(year));
|
||||
if (force) params.set('force', '1');
|
||||
const q = params.toString();
|
||||
return fetchJson<HydrogenOverviewResponse>(`${BASE}/hydrogen/overview${q ? `?${q}` : ''}`);
|
||||
export function fetchHydrogenStationBoard(query: HydrogenStationBoardQuery): Promise<HydrogenStationBoardResponse> {
|
||||
const params = new URLSearchParams({ startDate: query.startDate, endDate: query.endDate });
|
||||
if (query.stationId) params.set('stationId', String(query.stationId));
|
||||
if (query.force) params.set('force', '1');
|
||||
return fetchJson<HydrogenStationBoardResponse>(`${BASE}/hydrogen/station-board?${params.toString()}`);
|
||||
}
|
||||
|
||||
export interface HydrogenDailyQuery {
|
||||
/** 电能与 ETC 共用的自然日区间查询参数。 */
|
||||
export interface EnergyRangeQuery {
|
||||
range?: DateQuickPick;
|
||||
startDate?: string;
|
||||
endDate?: string;
|
||||
}
|
||||
|
||||
export function fetchHydrogenDaily(query: HydrogenDailyQuery, customer: CustomerType): Promise<HydrogenDailyRow[]> {
|
||||
const q = new URLSearchParams({ customer });
|
||||
if (query.range) q.set('range', query.range);
|
||||
if (query.startDate) q.set('startDate', query.startDate);
|
||||
if (query.endDate) q.set('endDate', query.endDate);
|
||||
return fetchJson<HydrogenDailyRow[]>(`${BASE}/hydrogen/daily?${q.toString()}`);
|
||||
}
|
||||
|
||||
export interface ElectricOverviewResponse {
|
||||
kpi: ElectricKpi;
|
||||
trend: ElectricDailyRow[];
|
||||
latestChargeTime: string | null;
|
||||
}
|
||||
|
||||
export function fetchElectricOverview(): Promise<ElectricOverviewResponse> {
|
||||
return fetchJson<ElectricOverviewResponse>(`${BASE}/electric/overview`);
|
||||
}
|
||||
|
||||
export function fetchElectricMonthly(customer: CustomerType, query: HydrogenDailyQuery = { range: 'last15' }): Promise<ElectricMonthGroup[]> {
|
||||
const q = new URLSearchParams({ customer });
|
||||
if (query.range) q.set('range', query.range);
|
||||
if (query.startDate) q.set('startDate', query.startDate);
|
||||
if (query.endDate) q.set('endDate', query.endDate);
|
||||
return fetchJson<ElectricMonthGroup[]>(`${BASE}/electric/monthly?${q.toString()}`);
|
||||
export function fetchElectricMonthly(
|
||||
customer: CustomerType,
|
||||
query: EnergyRangeQuery = { range: 'last15' },
|
||||
): Promise<ElectricMonthGroup[]> {
|
||||
const params = new URLSearchParams({ customer });
|
||||
if (query.range) params.set('range', query.range);
|
||||
if (query.startDate) params.set('startDate', query.startDate);
|
||||
if (query.endDate) params.set('endDate', query.endDate);
|
||||
return fetchJson<ElectricMonthGroup[]>(`${BASE}/electric/monthly?${params.toString()}`);
|
||||
}
|
||||
|
||||
export interface EtcOverviewResponse {
|
||||
tollRecordCount: number;
|
||||
vehicleCount: number;
|
||||
totalAmount: number;
|
||||
latestTollTime: string | null;
|
||||
billCount: number;
|
||||
receivableAmount: number;
|
||||
paidAmount: number;
|
||||
hasData: boolean;
|
||||
}
|
||||
|
||||
export function fetchEtcOverview(force = false): Promise<EtcOverviewResponse> {
|
||||
return fetchJson<EtcOverviewResponse>(`${BASE}/etc/overview${force ? '?force=1' : ''}`);
|
||||
}
|
||||
|
||||
@@ -1,5 +1,4 @@
|
||||
import { Truck } from 'lucide-react';
|
||||
import { SurfaceCard } from '../../../components/ui/surface';
|
||||
import { Calendar, Fuel, RefreshCw, Truck } from 'lucide-react';
|
||||
import type { CustomerType, DateQuickPick } from '../types';
|
||||
import { QUICK_PICK_OPTIONS, type RangeMode } from './model';
|
||||
|
||||
@@ -7,86 +6,138 @@ interface DailyRangeControlsProps {
|
||||
pick: RangeMode;
|
||||
dateRange: { start: string; end: string };
|
||||
customer: CustomerType;
|
||||
stations?: { id: number; name: string }[];
|
||||
selectedStationId?: number | null;
|
||||
updatedAt?: string | null;
|
||||
loading?: boolean;
|
||||
onQuickPick: (pick: DateQuickPick) => void;
|
||||
onCustomPick: () => void;
|
||||
onDateRangeChange: (field: 'start' | 'end', value: string) => void;
|
||||
onCustomerChange: (customer: CustomerType) => void;
|
||||
onStationChange?: (stationId: number | null) => void;
|
||||
onRefresh?: () => void;
|
||||
}
|
||||
|
||||
export default function DailyRangeControls({
|
||||
pick,
|
||||
dateRange,
|
||||
customer,
|
||||
stations = [],
|
||||
selectedStationId = null,
|
||||
updatedAt,
|
||||
loading = false,
|
||||
onQuickPick,
|
||||
onCustomPick,
|
||||
onDateRangeChange,
|
||||
onCustomerChange,
|
||||
onStationChange,
|
||||
onRefresh,
|
||||
}: DailyRangeControlsProps) {
|
||||
return (
|
||||
<SurfaceCard className="p-2 md:p-3">
|
||||
<div className="flex items-center gap-2 overflow-x-auto pb-1">
|
||||
{QUICK_PICK_OPTIONS.map(opt => (
|
||||
<section className="rounded-[14px] border border-slate-200/70 bg-white px-3 py-3 shadow-sm md:px-4">
|
||||
<div className="flex flex-col gap-3">
|
||||
<div className="flex min-w-0 flex-wrap items-center gap-2">
|
||||
<div className="flex rounded-md bg-slate-100 p-0.5">
|
||||
{QUICK_PICK_OPTIONS.map(option => (
|
||||
<button
|
||||
key={opt.id}
|
||||
onClick={() => onQuickPick(opt.id)}
|
||||
className={`min-h-9 shrink-0 rounded-xl border px-3 text-[12px] font-black transition-colors ${
|
||||
pick === opt.id
|
||||
? 'border-blue-200 bg-blue-50 text-blue-600 shadow-sm'
|
||||
: 'border-slate-100 bg-white text-slate-500 hover:bg-slate-50'
|
||||
key={option.id}
|
||||
type="button"
|
||||
onClick={() => onQuickPick(option.id)}
|
||||
className={`h-7 rounded px-3 text-[12px] font-medium transition-colors ${
|
||||
pick === option.id
|
||||
? 'bg-white font-semibold text-blue-600 shadow-sm'
|
||||
: 'text-slate-500 hover:text-slate-800'
|
||||
}`}
|
||||
>
|
||||
{opt.label}
|
||||
{option.label}
|
||||
</button>
|
||||
))}
|
||||
<button
|
||||
type="button"
|
||||
onClick={onCustomPick}
|
||||
className={`min-h-9 shrink-0 rounded-xl border px-3 text-[12px] font-black transition-colors ${
|
||||
className={`h-7 rounded px-3 text-[12px] font-medium transition-colors ${
|
||||
pick === 'custom'
|
||||
? 'border-blue-200 bg-blue-50 text-blue-600 shadow-sm'
|
||||
: 'border-slate-100 bg-white text-slate-500 hover:bg-slate-50'
|
||||
? 'bg-white font-semibold text-blue-600 shadow-sm'
|
||||
: 'text-slate-500 hover:text-slate-800'
|
||||
}`}
|
||||
>
|
||||
自定义
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="mt-2 grid grid-cols-2 gap-2">
|
||||
<label className="min-w-0 rounded-xl border border-slate-100 bg-slate-50 px-3 py-2">
|
||||
<span className="block text-[10px] font-black text-slate-400">开始日期</span>
|
||||
<input
|
||||
type="date"
|
||||
value={dateRange.start}
|
||||
onChange={event => onDateRangeChange('start', event.target.value)}
|
||||
onInput={event => onDateRangeChange('start', event.currentTarget.value)}
|
||||
className="mt-1 h-6 w-full bg-transparent text-[12px] font-black text-slate-800 outline-none"
|
||||
/>
|
||||
</label>
|
||||
<label className="min-w-0 rounded-xl border border-slate-100 bg-slate-50 px-3 py-2">
|
||||
<span className="block text-[10px] font-black text-slate-400">结束日期</span>
|
||||
<input
|
||||
type="date"
|
||||
value={dateRange.end}
|
||||
onChange={event => onDateRangeChange('end', event.target.value)}
|
||||
onInput={event => onDateRangeChange('end', event.currentTarget.value)}
|
||||
className="mt-1 h-6 w-full bg-transparent text-[12px] font-black text-slate-800 outline-none"
|
||||
/>
|
||||
<DateField label="开始日期" value={dateRange.start} onChange={value => onDateRangeChange('start', value)} />
|
||||
<DateField label="结束日期" value={dateRange.end} onChange={value => onDateRangeChange('end', value)} />
|
||||
|
||||
{onStationChange ? (
|
||||
<label className="inline-flex h-8 min-w-[190px] max-w-full items-center gap-2 rounded-md border border-slate-300 bg-white px-2.5 text-slate-600 transition-colors focus-within:border-sky-600 focus-within:ring-2 focus-within:ring-sky-100">
|
||||
<Fuel size={13} className="shrink-0 text-slate-400" />
|
||||
<select
|
||||
aria-label="选择加氢站"
|
||||
value={selectedStationId ?? ''}
|
||||
onChange={event => onStationChange(event.target.value === '' ? null : Number(event.target.value))}
|
||||
className="min-w-0 flex-1 bg-transparent text-[12px] font-semibold text-slate-700 outline-none"
|
||||
>
|
||||
<option value="">请选择加氢站</option>
|
||||
{stations.map((station, index) => (
|
||||
<option key={`${station.id}-${station.name}-${index}`} value={station.id}>{station.name}</option>
|
||||
))}
|
||||
</select>
|
||||
</label>
|
||||
) : null}
|
||||
</div>
|
||||
|
||||
<div className="mt-2 grid grid-cols-2 gap-1 rounded-xl bg-slate-100 p-1">
|
||||
<div className="flex flex-wrap items-center justify-between gap-2">
|
||||
<div className="flex rounded-md bg-slate-100 p-0.5">
|
||||
{(['lingniu', 'external'] as const).map(option => (
|
||||
<button
|
||||
key={option}
|
||||
type="button"
|
||||
onClick={() => onCustomerChange(option)}
|
||||
className={`flex min-h-9 items-center justify-center gap-1.5 rounded-lg text-[12px] font-black transition-all ${
|
||||
customer === option ? 'bg-white text-slate-900 shadow-sm' : 'text-slate-500 hover:text-slate-700'
|
||||
className={`inline-flex h-8 items-center gap-1.5 rounded px-3 text-[12px] font-medium transition-colors ${
|
||||
customer === option
|
||||
? 'bg-white font-semibold text-blue-600 shadow-sm'
|
||||
: 'text-slate-500 hover:text-slate-800'
|
||||
}`}
|
||||
>
|
||||
<Truck size={14} />
|
||||
<Truck size={13} />
|
||||
{option === 'external' ? '外部车辆' : '羚牛车辆'}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</SurfaceCard>
|
||||
|
||||
<div className="ml-auto flex items-center gap-3">
|
||||
{updatedAt ? <span className="font-mono text-[11px] text-slate-400">{updatedAt}</span> : null}
|
||||
{onRefresh ? (
|
||||
<button
|
||||
type="button"
|
||||
onClick={onRefresh}
|
||||
disabled={loading}
|
||||
title="刷新数据"
|
||||
className="inline-flex h-8 items-center gap-1.5 rounded-md border border-slate-200 bg-white px-3 text-[12px] font-semibold text-slate-600 transition-colors hover:border-blue-200 hover:text-blue-600 disabled:cursor-wait disabled:opacity-60"
|
||||
>
|
||||
<RefreshCw size={13} className={loading ? 'animate-spin' : ''} />
|
||||
刷新
|
||||
</button>
|
||||
) : null}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
function DateField({ label, value, onChange }: { label: string; value: string; onChange: (value: string) => void }) {
|
||||
return (
|
||||
<label className="inline-flex h-8 items-center gap-2 rounded-md border border-slate-300 bg-white px-2.5 transition-colors focus-within:border-sky-600 focus-within:ring-2 focus-within:ring-sky-100">
|
||||
<Calendar size={13} className="shrink-0 text-sky-600" />
|
||||
<span className="hidden text-[11px] font-medium text-slate-400 sm:inline">{label}</span>
|
||||
<input
|
||||
type="date"
|
||||
aria-label={label}
|
||||
value={value}
|
||||
onChange={event => onChange(event.target.value)}
|
||||
className="h-7 min-w-[112px] bg-transparent font-mono text-[11px] font-semibold text-slate-700 outline-none"
|
||||
/>
|
||||
</label>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,84 +0,0 @@
|
||||
import assert from 'node:assert/strict';
|
||||
import test from 'node:test';
|
||||
import type { HydrogenDailyRow } from '../types.js';
|
||||
import {
|
||||
getQuickRange,
|
||||
getRangeModeLabel,
|
||||
normalizeRange,
|
||||
summarizeHydrogenRows,
|
||||
} from './model.js';
|
||||
|
||||
test('快捷日期继续使用本地自然日并覆盖本周、本月和近15天', () => {
|
||||
const now = new Date(2026, 7, 12, 23, 30);
|
||||
assert.deepEqual(getQuickRange('thisWeek', now), {
|
||||
start: '2026-08-10',
|
||||
end: '2026-08-12',
|
||||
});
|
||||
assert.deepEqual(getQuickRange('thisMonth', now), {
|
||||
start: '2026-08-01',
|
||||
end: '2026-08-12',
|
||||
});
|
||||
assert.deepEqual(getQuickRange('last15', now), {
|
||||
start: '2026-07-29',
|
||||
end: '2026-08-12',
|
||||
});
|
||||
});
|
||||
|
||||
test('自定义日期倒置时仅交换查询边界', () => {
|
||||
assert.deepEqual(normalizeRange('2026-08-12', '2026-08-01'), {
|
||||
start: '2026-08-01',
|
||||
end: '2026-08-12',
|
||||
});
|
||||
assert.equal(getRangeModeLabel('custom'), '自定义区间');
|
||||
assert.equal(getRangeModeLabel('last15'), '近 15 天');
|
||||
});
|
||||
|
||||
test('每日加氢统计保持排序、有效天、站点去重和峰谷口径', () => {
|
||||
const rows: HydrogenDailyRow[] = [
|
||||
{
|
||||
date: '2026-08-12',
|
||||
totalKg: 0,
|
||||
chainPct: -1,
|
||||
customerType: 'lingniu',
|
||||
stations: [{ name: 'A站', kg: 0, pricePerKg: 0, chainPct: -1 }],
|
||||
},
|
||||
{
|
||||
date: '2026-08-10',
|
||||
totalKg: 100,
|
||||
chainPct: 0,
|
||||
customerType: 'lingniu',
|
||||
stations: [{ name: 'A站', kg: 100, pricePerKg: 20, chainPct: 0 }],
|
||||
},
|
||||
{
|
||||
date: '2026-08-11',
|
||||
totalKg: 300,
|
||||
chainPct: 2,
|
||||
customerType: 'lingniu',
|
||||
stations: [{ name: 'B站', kg: 300, pricePerKg: 25, chainPct: 2 }],
|
||||
},
|
||||
];
|
||||
|
||||
const summary = summarizeHydrogenRows(rows);
|
||||
assert.deepEqual(rows.map(row => row.date), ['2026-08-12', '2026-08-10', '2026-08-11']);
|
||||
assert.deepEqual(summary.trendData.map(row => row.date), ['2026-08-10', '2026-08-11', '2026-08-12']);
|
||||
assert.equal(summary.totalKg, 400);
|
||||
assert.equal(summary.activeDays, 2);
|
||||
assert.equal(summary.avgKg, 200);
|
||||
assert.equal(summary.stationCount, 2);
|
||||
assert.equal(summary.peakDay?.date, '2026-08-11');
|
||||
assert.equal(summary.lowDay?.date, '2026-08-10');
|
||||
assert.equal(summary.zeroDays, 1);
|
||||
});
|
||||
|
||||
test('空数据保持零值且没有峰谷日', () => {
|
||||
assert.deepEqual(summarizeHydrogenRows(null), {
|
||||
trendData: [],
|
||||
totalKg: 0,
|
||||
activeDays: 0,
|
||||
stationCount: 0,
|
||||
avgKg: 0,
|
||||
peakDay: null,
|
||||
lowDay: null,
|
||||
zeroDays: 0,
|
||||
});
|
||||
});
|
||||
@@ -1,41 +0,0 @@
|
||||
import type { HydrogenDailyRow } from '../types';
|
||||
|
||||
export {
|
||||
formatYmd,
|
||||
getQuickRange,
|
||||
getRangeModeLabel,
|
||||
normalizeRange,
|
||||
QUICK_PICK_OPTIONS,
|
||||
type RangeMode,
|
||||
} from '../daily-range/model';
|
||||
|
||||
export function summarizeHydrogenRows(rows: HydrogenDailyRow[] | null) {
|
||||
const source = rows ?? [];
|
||||
// 图表固定按日期升序；复制数组避免改变接口返回及表格原始顺序。
|
||||
const trendData = [...source].sort((left, right) => left.date.localeCompare(right.date));
|
||||
const totalKg = source.reduce((total, row) => total + row.totalKg, 0);
|
||||
const activeDays = source.filter(row => row.totalKg > 0).length;
|
||||
const stationNames = new Set<string>();
|
||||
source.forEach(row => row.stations.forEach(station => stationNames.add(station.name)));
|
||||
const peakDay = trendData.reduce<HydrogenDailyRow | null>(
|
||||
(best, item) => (!best || item.totalKg > best.totalKg ? item : best),
|
||||
null,
|
||||
);
|
||||
const lowDay = trendData
|
||||
.filter(item => item.totalKg > 0)
|
||||
.reduce<HydrogenDailyRow | null>(
|
||||
(low, item) => (!low || item.totalKg < low.totalKg ? item : low),
|
||||
null,
|
||||
);
|
||||
|
||||
return {
|
||||
trendData,
|
||||
totalKg,
|
||||
activeDays,
|
||||
stationCount: stationNames.size,
|
||||
avgKg: activeDays > 0 ? totalKg / activeDays : 0,
|
||||
peakDay,
|
||||
lowDay,
|
||||
zeroDays: source.filter(row => row.totalKg === 0).length,
|
||||
};
|
||||
}
|
||||
@@ -1,133 +0,0 @@
|
||||
import {
|
||||
Bar,
|
||||
BarChart,
|
||||
Cell,
|
||||
LabelList,
|
||||
Pie,
|
||||
PieChart,
|
||||
ResponsiveContainer,
|
||||
Tooltip,
|
||||
XAxis,
|
||||
YAxis,
|
||||
} from 'recharts';
|
||||
import type { HydrogenRegionShare, HydrogenStationTop } from '../../types';
|
||||
|
||||
const REGION_COLORS = [
|
||||
'#3b82f6', '#22d3ee', '#a855f7', '#f59e0b',
|
||||
'#10b981', '#ef4444', '#6366f1', '#14b8a6',
|
||||
'#94a3b8',
|
||||
];
|
||||
|
||||
interface YAxisTickProps {
|
||||
x?: number;
|
||||
y?: number;
|
||||
index?: number;
|
||||
payload?: { value: string };
|
||||
}
|
||||
|
||||
function RankYAxisTick({ x = 0, y = 0, index = 0, payload }: YAxisTickProps) {
|
||||
return (
|
||||
<g transform={`translate(${x},${y})`}>
|
||||
<circle cx={-172} cy={0} r={9} fill="#3b82f6" />
|
||||
<text x={-172} y={3} textAnchor="middle" fontSize={10} fontWeight={700} fill="#fff">
|
||||
{index + 1}
|
||||
</text>
|
||||
<text x={-154} y={4} textAnchor="start" fontSize={11} fill="#475569">
|
||||
{payload?.value}
|
||||
</text>
|
||||
</g>
|
||||
);
|
||||
}
|
||||
|
||||
interface DistributionChartsProps {
|
||||
top5: HydrogenStationTop[];
|
||||
regions: HydrogenRegionShare[];
|
||||
yearKg: number;
|
||||
}
|
||||
|
||||
export function DistributionCharts({ top5, regions, yearKg }: DistributionChartsProps) {
|
||||
return (
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-3">
|
||||
<div className="bg-white rounded-2xl border border-slate-100 shadow-sm p-3 md:p-4">
|
||||
<div className="flex items-center justify-between mb-3">
|
||||
<span className="text-sm font-bold text-slate-700">加氢站加注量 Top5</span>
|
||||
<span className="text-[11px] text-slate-400 font-bold">单位 Kg</span>
|
||||
</div>
|
||||
<ResponsiveContainer width="100%" height={260}>
|
||||
<BarChart data={top5} layout="vertical" margin={{ top: 4, right: 80, bottom: 4, left: 12 }}>
|
||||
<XAxis type="number" hide />
|
||||
<YAxis
|
||||
type="category"
|
||||
dataKey="name"
|
||||
width={188}
|
||||
tick={<RankYAxisTick />}
|
||||
tickLine={false}
|
||||
axisLine={false}
|
||||
/>
|
||||
<Tooltip
|
||||
formatter={(v) => `${Number(v ?? 0).toLocaleString('zh-CN')} Kg`}
|
||||
contentStyle={{ borderRadius: 12, fontSize: 12 }}
|
||||
/>
|
||||
<Bar dataKey="kg" radius={[6, 6, 6, 6]}>
|
||||
{top5.map((_, i) => (
|
||||
<Cell key={i} fill="url(#topBarGrad)" />
|
||||
))}
|
||||
<LabelList
|
||||
dataKey="kg"
|
||||
position="right"
|
||||
formatter={(v) => `${Number(v ?? 0).toLocaleString('zh-CN', { maximumFractionDigits: 0 })}`}
|
||||
fill="#475569"
|
||||
fontSize={11}
|
||||
fontWeight={700}
|
||||
/>
|
||||
</Bar>
|
||||
<defs>
|
||||
<linearGradient id="topBarGrad" x1="0" x2="1" y1="0" y2="0">
|
||||
<stop offset="0%" stopColor="#3b82f6" />
|
||||
<stop offset="100%" stopColor="#22d3ee" />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
</BarChart>
|
||||
</ResponsiveContainer>
|
||||
</div>
|
||||
|
||||
<div className="bg-white rounded-2xl border border-slate-100 shadow-sm p-3 md:p-4 flex flex-col gap-2">
|
||||
<span className="text-sm font-bold text-slate-700">各区域加氢占比</span>
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="relative w-1/2 h-[200px]">
|
||||
<ResponsiveContainer width="100%" height="100%">
|
||||
<PieChart>
|
||||
<Pie
|
||||
data={regions}
|
||||
dataKey="kg"
|
||||
nameKey="region"
|
||||
innerRadius={48}
|
||||
outerRadius={80}
|
||||
paddingAngle={1}
|
||||
>
|
||||
{regions.map((_, i) => (
|
||||
<Cell key={i} fill={REGION_COLORS[i % REGION_COLORS.length]} />
|
||||
))}
|
||||
</Pie>
|
||||
<Tooltip formatter={(v) => `${(Number(v ?? 0) / 1000).toFixed(2)}T`} contentStyle={{ borderRadius: 12, fontSize: 12 }} />
|
||||
</PieChart>
|
||||
</ResponsiveContainer>
|
||||
<div className="absolute inset-0 flex flex-col items-center justify-center pointer-events-none">
|
||||
<div className="text-[10px] text-slate-400 font-bold">年合计</div>
|
||||
<div className="text-base font-bold text-slate-700 leading-tight">{(yearKg / 1000).toFixed(2)}T</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex-1 grid grid-cols-1 md:grid-cols-2 gap-x-3 gap-y-1 text-[11px]">
|
||||
{regions.map((r, i) => (
|
||||
<div key={r.region} className="flex items-center gap-1.5">
|
||||
<span className="w-2 h-2 rounded-full flex-shrink-0" style={{ background: REGION_COLORS[i % REGION_COLORS.length] }} />
|
||||
<span className="text-slate-600 truncate">{r.region}</span>
|
||||
<span className="text-slate-400 ml-auto font-bold flex-shrink-0">{(r.share * 100).toFixed(1)}%</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,80 +0,0 @@
|
||||
export function HydrogenOverviewSkeleton() {
|
||||
return (
|
||||
<div className="flex flex-col gap-3 animate-pulse">
|
||||
<div className="bg-white rounded-xl border border-slate-100 px-3 py-2">
|
||||
<div className="h-3 w-44 bg-slate-100 rounded" />
|
||||
</div>
|
||||
|
||||
{/* 5 卡占位 */}
|
||||
<div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-5 gap-2 md:gap-3">
|
||||
{Array.from({ length: 5 }).map((_, i) => (
|
||||
<div key={i} className="bg-white rounded-2xl border border-slate-100 shadow-sm p-3 md:p-4 space-y-2">
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="w-7 h-7 rounded-xl bg-slate-100" />
|
||||
<div className="h-3 w-16 bg-slate-100 rounded" />
|
||||
</div>
|
||||
<div className="h-7 w-24 bg-slate-200 rounded" />
|
||||
<div className="space-y-1.5 pt-1 border-t border-slate-50">
|
||||
<div className="flex justify-between"><div className="h-2.5 w-10 bg-slate-100 rounded" /><div className="h-2.5 w-16 bg-slate-100 rounded" /></div>
|
||||
<div className="flex justify-between"><div className="h-2.5 w-10 bg-slate-100 rounded" /><div className="h-2.5 w-16 bg-slate-100 rounded" /></div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* 月度柱图占位 */}
|
||||
<div className="bg-white rounded-2xl border border-slate-100 shadow-sm p-4">
|
||||
<div className="flex items-center justify-between mb-3">
|
||||
<div className="h-4 w-32 bg-slate-100 rounded" />
|
||||
<div className="h-3 w-12 bg-slate-100 rounded" />
|
||||
</div>
|
||||
<div className="flex items-end gap-2 h-[120px]">
|
||||
{[60, 75, 50, 80, 35, 90, 45].map((h, i) => (
|
||||
<div key={i} className="flex-1 bg-slate-100 rounded-t" style={{ height: `${h}%` }} />
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-3">
|
||||
<div className="bg-white rounded-2xl border border-slate-100 shadow-sm p-4">
|
||||
<div className="flex items-center justify-between mb-3">
|
||||
<div className="h-4 w-32 bg-slate-100 rounded" />
|
||||
<div className="h-3 w-12 bg-slate-100 rounded" />
|
||||
</div>
|
||||
<div className="space-y-3">
|
||||
{[100, 78, 56, 40, 28].map((w, i) => (
|
||||
<div key={i} className="flex items-center gap-3">
|
||||
<div className="w-5 h-5 rounded-full bg-slate-200" />
|
||||
<div className="h-3 w-32 bg-slate-100 rounded" />
|
||||
<div className="flex-1 h-4 rounded-md bg-gradient-to-r from-slate-200 to-slate-100" style={{ maxWidth: `${w}%` }} />
|
||||
<div className="h-3 w-12 bg-slate-100 rounded" />
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
<div className="bg-white rounded-2xl border border-slate-100 shadow-sm p-4 flex flex-col gap-3">
|
||||
<div className="h-4 w-28 bg-slate-100 rounded" />
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="w-1/2 h-[200px] flex items-center justify-center">
|
||||
<div className="w-32 h-32 rounded-full border-[18px] border-slate-100" />
|
||||
</div>
|
||||
<div className="flex-1 space-y-2">
|
||||
{Array.from({ length: 5 }).map((_, i) => (
|
||||
<div key={i} className="flex items-center gap-2">
|
||||
<div className="w-2 h-2 rounded-full bg-slate-200" />
|
||||
<div className="h-3 w-16 bg-slate-100 rounded" />
|
||||
<div className="h-3 w-10 bg-slate-100 rounded ml-auto" />
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="text-center text-[11px] text-slate-400 font-bold flex items-center justify-center gap-1.5">
|
||||
<span className="inline-block w-1.5 h-1.5 rounded-full bg-blue-400 animate-pulse" />
|
||||
正在加载氢能总览…
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,88 +0,0 @@
|
||||
import { AlertTriangle, Building2, Gauge } from 'lucide-react';
|
||||
import type { HydrogenMonthlyPoint } from '../../types';
|
||||
import { formatKg as fmtKg } from '../model';
|
||||
|
||||
interface InsightCardsProps {
|
||||
monthAvgKg: number;
|
||||
bestMonth: HydrogenMonthlyPoint | null;
|
||||
latestMonth: HydrogenMonthlyPoint | undefined;
|
||||
monthMomentum: number | null;
|
||||
top5Share: number;
|
||||
profitYield: number;
|
||||
stationAvgKg: number;
|
||||
stationCount: number;
|
||||
yearProfitValue: string;
|
||||
yearProfitUnit: string;
|
||||
yearRevenueValue: string;
|
||||
yearRevenueUnit: string;
|
||||
}
|
||||
|
||||
export function InsightCards({
|
||||
monthAvgKg,
|
||||
bestMonth,
|
||||
latestMonth,
|
||||
monthMomentum,
|
||||
top5Share,
|
||||
profitYield,
|
||||
stationAvgKg,
|
||||
stationCount,
|
||||
yearProfitValue,
|
||||
yearProfitUnit,
|
||||
yearRevenueValue,
|
||||
yearRevenueUnit,
|
||||
}: InsightCardsProps) {
|
||||
return (
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-2 md:gap-3">
|
||||
<div className="rounded-2xl border border-slate-100 bg-white p-3 shadow-sm">
|
||||
<div className="flex items-center justify-between gap-2">
|
||||
<div>
|
||||
<div className="text-[11px] font-black text-slate-400">月度动能</div>
|
||||
<div className="mt-1 text-lg font-black text-slate-900">
|
||||
{monthMomentum === null ? '暂无对比' : `${monthMomentum >= 0 ? '+' : ''}${monthMomentum.toFixed(1)}%`}
|
||||
</div>
|
||||
</div>
|
||||
<span className="flex h-9 w-9 items-center justify-center rounded-xl bg-blue-50 text-blue-600 ring-1 ring-blue-100">
|
||||
<Gauge size={18} />
|
||||
</span>
|
||||
</div>
|
||||
<div className="mt-2 text-[11px] font-bold leading-relaxed text-slate-500">
|
||||
{latestMonth ? `${latestMonth.month} 加氢 ${fmtKg(latestMonth.kg).value}${fmtKg(latestMonth.kg).unit}` : '暂无月度数据'}
|
||||
{bestMonth ? ` · 峰值 ${bestMonth.month}` : ''}
|
||||
{monthAvgKg > 0 ? ` · 月均 ${fmtKg(monthAvgKg).value}${fmtKg(monthAvgKg).unit}` : ''}
|
||||
</div>
|
||||
</div>
|
||||
<div className="rounded-2xl border border-slate-100 bg-white p-3 shadow-sm">
|
||||
<div className="flex items-center justify-between gap-2">
|
||||
<div>
|
||||
<div className="text-[11px] font-black text-slate-400">站点集中度</div>
|
||||
<div className="mt-1 text-lg font-black text-slate-900">Top5 {top5Share.toFixed(1)}%</div>
|
||||
</div>
|
||||
<span className="flex h-9 w-9 items-center justify-center rounded-xl bg-cyan-50 text-cyan-600 ring-1 ring-cyan-100">
|
||||
<Building2 size={18} />
|
||||
</span>
|
||||
</div>
|
||||
<div className="mt-2 text-[11px] font-bold leading-relaxed text-slate-500">
|
||||
共 {stationCount} 站 · 单站年均 {fmtKg(stationAvgKg).value}{fmtKg(stationAvgKg).unit}
|
||||
{top5Share >= 70 ? ' · 头部站点依赖偏高' : ' · 分布相对健康'}
|
||||
</div>
|
||||
</div>
|
||||
<div className="rounded-2xl border border-slate-100 bg-white p-3 shadow-sm">
|
||||
<div className="flex items-center justify-between gap-2">
|
||||
<div>
|
||||
<div className="text-[11px] font-black text-slate-400">收支健康度</div>
|
||||
<div className={`mt-1 text-lg font-black ${profitYield >= 0 ? 'text-emerald-600' : 'text-rose-600'}`}>
|
||||
{profitYield.toFixed(1)}%
|
||||
</div>
|
||||
</div>
|
||||
<span className={`flex h-9 w-9 items-center justify-center rounded-xl ring-1 ${profitYield >= 0 ? 'bg-emerald-50 text-emerald-600 ring-emerald-100' : 'bg-rose-50 text-rose-600 ring-rose-100'}`}>
|
||||
<AlertTriangle size={18} />
|
||||
</span>
|
||||
</div>
|
||||
<div className="mt-2 text-[11px] font-bold leading-relaxed text-slate-500">
|
||||
时享获利 {yearProfitValue}{yearProfitUnit} · 客户收入 {yearRevenueValue}{yearRevenueUnit}
|
||||
{profitYield < 0 ? ' · 需关注亏损站点与客户价格' : ' · 当前保持正向收益'}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,114 +0,0 @@
|
||||
import type { ReactNode } from 'react';
|
||||
import { CalendarDays, Fuel, Sparkles, TrendingUp, Wallet } from 'lucide-react';
|
||||
import type { HydrogenKpi } from '../../types';
|
||||
import { formatKg as fmtKg, formatYuan as fmtYuan } from '../model';
|
||||
|
||||
interface KpiCardProps {
|
||||
icon: ReactNode;
|
||||
label: string;
|
||||
hero: { value: string; unit: string };
|
||||
rows: { label: string; value: string; valueClass?: string }[];
|
||||
accentClass: string;
|
||||
iconBg: string;
|
||||
}
|
||||
|
||||
function KpiCard({ icon, label, hero, rows, accentClass, iconBg }: KpiCardProps) {
|
||||
return (
|
||||
<div className="bg-white rounded-2xl border border-slate-100 shadow-sm p-3 md:p-4 flex flex-col gap-2">
|
||||
<div className="flex items-center gap-2">
|
||||
<div className={`w-7 h-7 rounded-xl flex items-center justify-center ${iconBg}`}>
|
||||
{icon}
|
||||
</div>
|
||||
<span className="text-[11px] font-bold text-slate-500">{label}</span>
|
||||
</div>
|
||||
<div className="flex items-baseline gap-1">
|
||||
<span className={`text-xl md:text-2xl font-black tabular-nums leading-none ${accentClass}`}>{hero.value}</span>
|
||||
<span className="text-[11px] text-slate-400 font-bold">{hero.unit}</span>
|
||||
</div>
|
||||
<div className="space-y-0.5 pt-1 border-t border-slate-50">
|
||||
{rows.map((r, i) => (
|
||||
<div key={i} className="flex items-center justify-between text-[11px] font-bold">
|
||||
<span className="text-slate-400">{r.label}</span>
|
||||
<span className={`tabular-nums ${r.valueClass ?? 'text-slate-700'}`}>{r.value}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export function KpiSection({ kpi: k }: { kpi: HydrogenKpi }) {
|
||||
const yearKgFmt = fmtKg(k.yearKg);
|
||||
const yearFeeFmt = fmtYuan(k.yearFee);
|
||||
const yearProfitFmt = fmtYuan(k.yearProfit);
|
||||
const ourYearKgFmt = fmtKg(k.ourYearKg);
|
||||
const customerYearKgFmt = fmtKg(k.customerYearKg);
|
||||
const monthKgFmt = fmtKg(k.monthKg);
|
||||
const monthFeeFmt = fmtYuan(k.monthFee);
|
||||
const todayKgFmt = fmtKg(k.todayKg);
|
||||
const todayFeeFmt = fmtYuan(k.todayFee);
|
||||
const customerYearFee = Math.max(0, k.yearFee - k.ourYearFee);
|
||||
const customerYearFeeFmt = fmtYuan(customerYearFee);
|
||||
const yearRevenueFmt = fmtYuan(k.yearRevenue);
|
||||
const profitColor = k.yearProfit >= 0 ? 'text-emerald-600' : 'text-red-600';
|
||||
|
||||
return (
|
||||
<div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-5 gap-2 md:gap-3">
|
||||
<KpiCard
|
||||
icon={<Fuel size={14} className="text-cyan-600" strokeWidth={2.4} />}
|
||||
iconBg="bg-cyan-50"
|
||||
accentClass="text-slate-800"
|
||||
label="累计加氢量"
|
||||
hero={yearKgFmt}
|
||||
rows={[
|
||||
{ label: '我司', value: `${ourYearKgFmt.value} ${ourYearKgFmt.unit}` },
|
||||
{ label: '客户', value: `${customerYearKgFmt.value} ${customerYearKgFmt.unit}` },
|
||||
]}
|
||||
/>
|
||||
<KpiCard
|
||||
icon={<Wallet size={14} className="text-blue-600" strokeWidth={2.4} />}
|
||||
iconBg="bg-blue-50"
|
||||
accentClass="text-slate-800"
|
||||
label="累计加氢费"
|
||||
hero={{ value: `¥${yearFeeFmt.value}`, unit: yearFeeFmt.unit }}
|
||||
rows={[
|
||||
{ label: '我司承担', value: `¥${fmtYuan(k.ourYearFee).value} ${fmtYuan(k.ourYearFee).unit}` },
|
||||
{ label: '客户承担', value: `¥${customerYearFeeFmt.value} ${customerYearFeeFmt.unit}` },
|
||||
]}
|
||||
/>
|
||||
<KpiCard
|
||||
icon={<TrendingUp size={14} className="text-emerald-600" strokeWidth={2.4} />}
|
||||
iconBg="bg-emerald-50"
|
||||
accentClass={profitColor}
|
||||
label="时享加氢获利"
|
||||
hero={{ value: `¥${yearProfitFmt.value}`, unit: yearProfitFmt.unit }}
|
||||
rows={[
|
||||
{ label: '收入', value: `¥${yearRevenueFmt.value} ${yearRevenueFmt.unit}` },
|
||||
{ label: '成本', value: `¥${yearFeeFmt.value} ${yearFeeFmt.unit}` },
|
||||
]}
|
||||
/>
|
||||
<KpiCard
|
||||
icon={<CalendarDays size={14} className="text-amber-600" strokeWidth={2.4} />}
|
||||
iconBg="bg-amber-50"
|
||||
accentClass="text-amber-600"
|
||||
label="本月加氢"
|
||||
hero={monthKgFmt}
|
||||
rows={[
|
||||
{ label: '加氢费', value: `¥${monthFeeFmt.value} ${monthFeeFmt.unit}` },
|
||||
{ label: '占年比', value: `${k.yearKg > 0 ? (k.monthKg / k.yearKg * 100).toFixed(1) : '0.0'}%` },
|
||||
]}
|
||||
/>
|
||||
<KpiCard
|
||||
icon={<Sparkles size={14} className="text-violet-600" strokeWidth={2.4} />}
|
||||
iconBg="bg-violet-50"
|
||||
accentClass="text-violet-600"
|
||||
label="本日加氢"
|
||||
hero={todayKgFmt}
|
||||
rows={[
|
||||
{ label: '加氢费', value: `¥${todayFeeFmt.value} ${todayFeeFmt.unit}` },
|
||||
{ label: '占月比', value: `${k.monthKg > 0 ? (k.todayKg / k.monthKg * 100).toFixed(1) : '0.0'}%` },
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,101 +0,0 @@
|
||||
import {
|
||||
Bar,
|
||||
BarChart,
|
||||
Cell,
|
||||
Legend,
|
||||
ResponsiveContainer,
|
||||
Tooltip,
|
||||
XAxis,
|
||||
YAxis,
|
||||
} from 'recharts';
|
||||
import type { HydrogenMonthlyPoint } from '../../types';
|
||||
import { formatYuan as fmtYuan } from '../model';
|
||||
|
||||
type MonthlyChartPoint = HydrogenMonthlyPoint & { monthLabel: string };
|
||||
|
||||
interface MonthlyChartsProps {
|
||||
activeYear: number;
|
||||
monthly: HydrogenMonthlyPoint[];
|
||||
monthlyDual: MonthlyChartPoint[];
|
||||
}
|
||||
|
||||
export function MonthlyCharts({ activeYear, monthly, monthlyDual }: MonthlyChartsProps) {
|
||||
return (
|
||||
<>
|
||||
{monthly.length > 0 && (
|
||||
<div className="bg-white rounded-2xl border border-slate-100 shadow-sm p-3 md:p-4">
|
||||
<div className="flex items-center justify-between mb-2">
|
||||
<span className="text-sm font-bold text-slate-700">{activeYear} 年月度加氢量</span>
|
||||
<span className="text-[11px] text-slate-400 font-bold">单位 Kg</span>
|
||||
</div>
|
||||
<ResponsiveContainer width="100%" height={140}>
|
||||
<BarChart data={monthlyDual} margin={{ top: 8, right: 4, bottom: 0, left: 0 }}>
|
||||
<XAxis
|
||||
dataKey="monthLabel"
|
||||
tick={{ fontSize: 10, fill: '#94a3b8' }}
|
||||
tickLine={false}
|
||||
axisLine={false}
|
||||
interval={0}
|
||||
/>
|
||||
<YAxis hide />
|
||||
<Tooltip
|
||||
formatter={(v) => [`${Number(v ?? 0).toLocaleString('zh-CN', { maximumFractionDigits: 0 })} Kg`, '加氢量']}
|
||||
labelFormatter={(d) => `${d}`}
|
||||
contentStyle={{ borderRadius: 12, fontSize: 12 }}
|
||||
cursor={{ fill: 'rgba(34, 211, 238, 0.06)' }}
|
||||
/>
|
||||
<Bar dataKey="kg" radius={[4, 4, 0, 0]}>
|
||||
{monthlyDual.map((_, i) => (
|
||||
<Cell key={i} fill="url(#monthlyBarGrad)" />
|
||||
))}
|
||||
</Bar>
|
||||
<defs>
|
||||
<linearGradient id="monthlyBarGrad" x1="0" x2="0" y1="0" y2="1">
|
||||
<stop offset="0%" stopColor="#22d3ee" />
|
||||
<stop offset="100%" stopColor="#3b82f6" />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
</BarChart>
|
||||
</ResponsiveContainer>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{monthly.length > 0 && (
|
||||
<div className="bg-white rounded-2xl border border-slate-100 shadow-sm p-3 md:p-4">
|
||||
<div className="flex items-center justify-between mb-2">
|
||||
<span className="text-sm font-bold text-slate-700">{activeYear} 年月度收支对比</span>
|
||||
<span className="text-[11px] text-slate-400 font-bold">单位 元</span>
|
||||
</div>
|
||||
<ResponsiveContainer width="100%" height={180}>
|
||||
<BarChart data={monthlyDual} margin={{ top: 8, right: 4, bottom: 0, left: 0 }}>
|
||||
<XAxis
|
||||
dataKey="monthLabel"
|
||||
tick={{ fontSize: 10, fill: '#94a3b8' }}
|
||||
tickLine={false}
|
||||
axisLine={false}
|
||||
interval={0}
|
||||
/>
|
||||
<YAxis hide />
|
||||
<Legend
|
||||
verticalAlign="top"
|
||||
height={20}
|
||||
iconSize={8}
|
||||
wrapperStyle={{ fontSize: 11, paddingBottom: 4 }}
|
||||
/>
|
||||
<Tooltip
|
||||
formatter={(v, name) => {
|
||||
const f = fmtYuan(Number(v ?? 0));
|
||||
return [`¥${f.value} ${f.unit}`, name];
|
||||
}}
|
||||
contentStyle={{ borderRadius: 12, fontSize: 12 }}
|
||||
cursor={{ fill: 'rgba(148, 163, 184, 0.06)' }}
|
||||
/>
|
||||
<Bar dataKey="fee" name="成本支出" fill="#f59e0b" radius={[3, 3, 0, 0]} />
|
||||
<Bar dataKey="revenue" name="客户收入" fill="#10b981" radius={[3, 3, 0, 0]} />
|
||||
</BarChart>
|
||||
</ResponsiveContainer>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -1,53 +0,0 @@
|
||||
import { RefreshCw } from 'lucide-react';
|
||||
import { formatRefreshTime } from '../model';
|
||||
|
||||
interface OverviewHeaderProps {
|
||||
activeYear: number;
|
||||
availableYears: number[];
|
||||
lastRefreshAt: number;
|
||||
refreshing: boolean;
|
||||
onSelectYear: (year: number) => void;
|
||||
onRefresh: () => void;
|
||||
}
|
||||
|
||||
export function OverviewHeader({
|
||||
activeYear,
|
||||
availableYears,
|
||||
lastRefreshAt,
|
||||
refreshing,
|
||||
onSelectYear,
|
||||
onRefresh,
|
||||
}: OverviewHeaderProps) {
|
||||
return (
|
||||
<div className="bg-white rounded-xl border border-slate-100 px-3 py-1.5 text-[11px] text-slate-400 flex items-center justify-between gap-2">
|
||||
<span className="truncate">{lastRefreshAt ? `更新于 ${formatRefreshTime(lastRefreshAt)}` : '数据自 2025-01-01 起'}</span>
|
||||
<div className="flex items-center gap-2 flex-shrink-0">
|
||||
<div className="flex items-center gap-1 bg-slate-50 rounded-lg p-0.5">
|
||||
{availableYears.map(y => {
|
||||
const active = y === activeYear;
|
||||
return (
|
||||
<button
|
||||
key={y}
|
||||
onClick={() => onSelectYear(y)}
|
||||
className={`px-2 py-0.5 text-[11px] font-bold rounded-md transition-all ${
|
||||
active ? 'bg-white text-blue-600 shadow-sm' : 'text-slate-400 hover:text-slate-600'
|
||||
}`}
|
||||
>
|
||||
{y}
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
<button
|
||||
onClick={onRefresh}
|
||||
disabled={refreshing}
|
||||
className="flex items-center gap-1 px-2 py-0.5 rounded-lg bg-blue-50 text-blue-600 hover:bg-blue-100 disabled:opacity-60 disabled:cursor-not-allowed transition-colors"
|
||||
title="手动刷新（绕过缓存）"
|
||||
>
|
||||
<RefreshCw size={11} className={refreshing ? 'animate-spin' : ''} strokeWidth={2.6} />
|
||||
<span className="text-[11px] font-bold">刷新</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,31 +0,0 @@
|
||||
import { AnimatePresence, motion } from 'motion/react';
|
||||
|
||||
interface RefreshOverlayProps {
|
||||
refreshing: boolean;
|
||||
hasData: boolean;
|
||||
}
|
||||
|
||||
export function RefreshOverlay({ refreshing, hasData }: RefreshOverlayProps) {
|
||||
return (
|
||||
<AnimatePresence>
|
||||
{refreshing && hasData && (
|
||||
<motion.div
|
||||
key="refresh-overlay"
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
exit={{ opacity: 0 }}
|
||||
transition={{ duration: 0.2 }}
|
||||
className="fixed top-0 left-0 right-0 h-0.5 z-50 pointer-events-none overflow-hidden"
|
||||
>
|
||||
<motion.div
|
||||
className="h-full bg-gradient-to-r from-blue-400 via-cyan-400 to-blue-400"
|
||||
initial={{ x: '-100%' }}
|
||||
animate={{ x: '100%' }}
|
||||
transition={{ duration: 1.2, repeat: Infinity, ease: 'linear' }}
|
||||
style={{ width: '40%' }}
|
||||
/>
|
||||
</motion.div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
);
|
||||
}
|
||||
@@ -1,123 +0,0 @@
|
||||
import type { HydrogenCustomerRow, HydrogenStationFull } from '../../types';
|
||||
import { formatKg as fmtKg, formatYuan as fmtYuan } from '../model';
|
||||
|
||||
export function StationSummaryTable({ stations }: { stations: HydrogenStationFull[] }) {
|
||||
return (
|
||||
<>
|
||||
{stations.length > 0 && (
|
||||
<div className="bg-white rounded-2xl border border-slate-100 shadow-sm p-3 md:p-4">
|
||||
<div className="flex items-center justify-between mb-2">
|
||||
<span className="text-sm font-bold text-slate-700">加氢站加氢汇总</span>
|
||||
<span className="text-[11px] text-slate-400 font-bold">共 {stations.length} 站</span>
|
||||
</div>
|
||||
<div className="overflow-x-auto -mx-1 px-1">
|
||||
<table className="w-full text-[11px]">
|
||||
<thead>
|
||||
<tr className="text-slate-400 font-bold border-b border-slate-100">
|
||||
<th className="text-left py-1.5 pl-1 w-8">#</th>
|
||||
<th className="text-left py-1.5">加氢站</th>
|
||||
<th className="text-right py-1.5 w-20">加氢量</th>
|
||||
<th className="text-right py-1.5 pl-2 hidden sm:table-cell">占比</th>
|
||||
<th className="text-right py-1.5 pl-2 w-24">氢费收入</th>
|
||||
<th className="text-right py-1.5 pr-1 hidden md:table-cell">收入占比</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{stations.map((s, i) => {
|
||||
const kgFmt = fmtKg(s.kg);
|
||||
const revFmt = fmtYuan(s.revenue);
|
||||
return (
|
||||
<tr key={s.name + i} className="border-b border-slate-50 hover:bg-slate-50/60">
|
||||
<td className="py-1.5 pl-1 text-slate-400 tabular-nums">{i + 1}</td>
|
||||
<td className="py-1.5 text-slate-700 truncate max-w-[180px]">{s.name}</td>
|
||||
<td className="py-1.5 text-right tabular-nums font-bold text-slate-700">
|
||||
{kgFmt.value}<span className="text-slate-400 font-normal ml-0.5">{kgFmt.unit}</span>
|
||||
</td>
|
||||
<td className="py-1.5 pl-2 text-right hidden sm:table-cell">
|
||||
<div className="inline-flex items-center gap-1.5">
|
||||
<div className="w-12 h-1 bg-slate-100 rounded-full overflow-hidden">
|
||||
<div className="h-full bg-gradient-to-r from-cyan-400 to-blue-500" style={{ width: `${Math.min(100, s.share * 100)}%` }} />
|
||||
</div>
|
||||
<span className="text-slate-500 tabular-nums">{(s.share * 100).toFixed(1)}%</span>
|
||||
</div>
|
||||
</td>
|
||||
<td className="py-1.5 pl-2 text-right tabular-nums font-bold text-emerald-600">
|
||||
¥{revFmt.value}<span className="text-slate-400 font-normal ml-0.5">{revFmt.unit}</span>
|
||||
</td>
|
||||
<td className="py-1.5 pr-1 text-right hidden md:table-cell">
|
||||
<div className="inline-flex items-center gap-1.5">
|
||||
<div className="w-12 h-1 bg-slate-100 rounded-full overflow-hidden">
|
||||
<div className="h-full bg-gradient-to-r from-emerald-400 to-emerald-600" style={{ width: `${Math.min(100, s.revenueShare * 100)}%` }} />
|
||||
</div>
|
||||
<span className="text-slate-500 tabular-nums">{(s.revenueShare * 100).toFixed(1)}%</span>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
);
|
||||
})}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export function CustomerSummaryTable({ customers }: { customers: HydrogenCustomerRow[] }) {
|
||||
return (
|
||||
<>
|
||||
{customers.length > 0 && (
|
||||
<div className="bg-white rounded-2xl border border-slate-100 shadow-sm p-3 md:p-4">
|
||||
<div className="flex items-center justify-between mb-2">
|
||||
<span className="text-sm font-bold text-slate-700">客户账单汇总</span>
|
||||
<span className="text-[11px] text-slate-400 font-bold">Top {customers.length}</span>
|
||||
</div>
|
||||
<div className="overflow-x-auto -mx-1 px-1">
|
||||
<table className="w-full text-[11px]">
|
||||
<thead>
|
||||
<tr className="text-slate-400 font-bold border-b border-slate-100">
|
||||
<th className="text-left py-1.5 pl-1 w-8">#</th>
|
||||
<th className="text-left py-1.5">客户</th>
|
||||
<th className="text-center py-1.5 w-14 hidden sm:table-cell">承担方</th>
|
||||
<th className="text-right py-1.5 w-20">加氢量</th>
|
||||
<th className="text-right py-1.5 pl-2 w-24">成本支出</th>
|
||||
<th className="text-right py-1.5 pr-1 w-24 hidden md:table-cell">应收</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{customers.map((c2, i) => {
|
||||
const kgFmt = fmtKg(c2.kg);
|
||||
const costFmt = fmtYuan(c2.cost);
|
||||
const revFmt = fmtYuan(c2.revenue);
|
||||
return (
|
||||
<tr key={c2.name + i} className="border-b border-slate-50 hover:bg-slate-50/60">
|
||||
<td className="py-1.5 pl-1 text-slate-400 tabular-nums">{i + 1}</td>
|
||||
<td className="py-1.5 text-slate-700 truncate max-w-[200px]">{c2.name}</td>
|
||||
<td className="py-1.5 text-center hidden sm:table-cell">
|
||||
{c2.payer === 'lingniu' ? (
|
||||
<span className="px-1.5 py-0.5 rounded bg-blue-50 text-blue-600 text-[10px] font-bold">羚牛</span>
|
||||
) : (
|
||||
<span className="px-1.5 py-0.5 rounded bg-amber-50 text-amber-600 text-[10px] font-bold">客户</span>
|
||||
)}
|
||||
</td>
|
||||
<td className="py-1.5 text-right tabular-nums font-bold text-slate-700">
|
||||
{kgFmt.value}<span className="text-slate-400 font-normal ml-0.5">{kgFmt.unit}</span>
|
||||
</td>
|
||||
<td className="py-1.5 pl-2 text-right tabular-nums text-amber-600 font-bold">
|
||||
¥{costFmt.value}<span className="text-slate-400 font-normal ml-0.5">{costFmt.unit}</span>
|
||||
</td>
|
||||
<td className="py-1.5 pr-1 text-right tabular-nums text-emerald-600 font-bold hidden md:table-cell">
|
||||
¥{revFmt.value}<span className="text-slate-400 font-normal ml-0.5">{revFmt.unit}</span>
|
||||
</td>
|
||||
</tr>
|
||||
);
|
||||
})}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -1,72 +0,0 @@
|
||||
import assert from 'node:assert/strict';
|
||||
import test from 'node:test';
|
||||
import type { HydrogenOverviewResponse } from '../api.js';
|
||||
import {
|
||||
deriveOverviewMetrics,
|
||||
formatKg,
|
||||
formatRelative,
|
||||
formatYuan,
|
||||
} from './model.js';
|
||||
|
||||
test('重量和金额单位保持现有阈值及负数格式', () => {
|
||||
assert.deepEqual(formatKg(999.5), { value: '999.50', unit: 'Kg' });
|
||||
assert.deepEqual(formatKg(1000), { value: '1.00', unit: 'T' });
|
||||
assert.deepEqual(formatYuan(9999), { value: '9,999', unit: '元' });
|
||||
assert.deepEqual(formatYuan(12345), { value: '1.23', unit: '万元' });
|
||||
assert.deepEqual(formatYuan(-100_000_000), { value: '-1.00', unit: '亿元' });
|
||||
});
|
||||
|
||||
test('相对更新时间保持秒、分钟、小时和未来时间边界', () => {
|
||||
const now = new Date(2026, 7, 13, 12, 0, 0).getTime();
|
||||
assert.equal(formatRelative(now + 60_000, now), '刚刚');
|
||||
assert.equal(formatRelative(now - 30_000, now), '30 秒前');
|
||||
assert.equal(formatRelative(now - 5 * 60_000, now), '5 分钟前');
|
||||
assert.equal(formatRelative(now - 3 * 60 * 60_000, now), '3 小时前');
|
||||
});
|
||||
|
||||
test('总览派生指标保持月份顺序、动能、集中度和收益率口径', () => {
|
||||
const data = {
|
||||
kpi: {
|
||||
yearKg: 1000,
|
||||
yearFee: 0,
|
||||
yearProfit: -50,
|
||||
ourYearKg: 0,
|
||||
customerYearKg: 0,
|
||||
ourYearFee: 0,
|
||||
yearRevenue: 500,
|
||||
monthKg: 0,
|
||||
monthFee: 0,
|
||||
monthRevenue: 0,
|
||||
monthProfit: 0,
|
||||
todayKg: 0,
|
||||
todayFee: 0,
|
||||
todayRevenue: 0,
|
||||
todayProfit: 0,
|
||||
lingniuBornKg: 0,
|
||||
lingniuBornFee: 0,
|
||||
},
|
||||
top5: [{ rank: 1, name: 'A', kg: 600, fee: 100, share: 0.6 }],
|
||||
regions: [],
|
||||
monthly: [
|
||||
{ month: '2026-01', kg: 100, fee: 20, revenue: 30, profit: 10 },
|
||||
{ month: '2026-02', kg: 150, fee: 30, revenue: 40, profit: 10 },
|
||||
],
|
||||
customers: [],
|
||||
stations: [
|
||||
{ name: 'A', kg: 600, share: 0.6, revenue: 300, revenueShare: 0.6 },
|
||||
{ name: 'B', kg: 400, share: 0.4, revenue: 200, revenueShare: 0.4 },
|
||||
],
|
||||
availableYears: [2026],
|
||||
year: 2026,
|
||||
} satisfies HydrogenOverviewResponse;
|
||||
|
||||
const metrics = deriveOverviewMetrics(data);
|
||||
assert.equal(metrics.monthAvgKg, 125);
|
||||
assert.equal(metrics.bestMonth?.month, '2026-02');
|
||||
assert.equal(metrics.latestMonth?.month, '2026-02');
|
||||
assert.equal(metrics.monthMomentum, 50);
|
||||
assert.equal(metrics.top5Share, 60);
|
||||
assert.equal(metrics.profitYield, -10);
|
||||
assert.equal(metrics.stationAvgKg, 500);
|
||||
assert.deepEqual(metrics.monthlyDual.map(item => item.monthLabel), ['1月', '2月']);
|
||||
});
|
||||
@@ -1,75 +0,0 @@
|
||||
import type { HydrogenOverviewResponse } from '../api';
|
||||
|
||||
export function formatKg(kg: number): { value: string; unit: string } {
|
||||
if (kg >= 1000) return { value: (kg / 1000).toFixed(2), unit: 'T' };
|
||||
return { value: kg.toFixed(2), unit: 'Kg' };
|
||||
}
|
||||
|
||||
export function formatYuan(yuan: number): { value: string; unit: string } {
|
||||
const absolute = Math.abs(yuan);
|
||||
if (absolute >= 100_000_000) {
|
||||
return { value: (yuan / 100_000_000).toFixed(2), unit: '亿元' };
|
||||
}
|
||||
if (absolute >= 10_000) {
|
||||
return {
|
||||
value: (yuan / 10_000).toLocaleString('zh-CN', { maximumFractionDigits: 2 }),
|
||||
unit: '万元',
|
||||
};
|
||||
}
|
||||
return {
|
||||
value: yuan.toLocaleString('zh-CN', { maximumFractionDigits: 0 }),
|
||||
unit: '元',
|
||||
};
|
||||
}
|
||||
|
||||
export function formatRelative(timestamp: number, now = Date.now()): string {
|
||||
const seconds = Math.max(0, Math.floor((now - timestamp) / 1000));
|
||||
if (seconds < 5) return '刚刚';
|
||||
if (seconds < 60) return `${seconds} 秒前`;
|
||||
const minutes = Math.floor(seconds / 60);
|
||||
if (minutes < 60) return `${minutes} 分钟前`;
|
||||
const hours = Math.floor(minutes / 60);
|
||||
if (hours < 24) return `${hours} 小时前`;
|
||||
return new Date(timestamp).toLocaleString('zh-CN', { hour12: false });
|
||||
}
|
||||
|
||||
export function formatRefreshTime(timestamp: number, now = Date.now()): string {
|
||||
const exactTime = new Date(timestamp).toLocaleString('zh-CN', {
|
||||
year: 'numeric',
|
||||
month: '2-digit',
|
||||
day: '2-digit',
|
||||
hour: '2-digit',
|
||||
minute: '2-digit',
|
||||
hour12: false,
|
||||
});
|
||||
return `${formatRelative(timestamp, now)} · ${exactTime.replace(/\//g, '-')}`;
|
||||
}
|
||||
|
||||
export function deriveOverviewMetrics(data: HydrogenOverviewResponse) {
|
||||
const { kpi, monthly, stations, top5 } = data;
|
||||
const monthAvgKg = monthly.length > 0
|
||||
? monthly.reduce((sum, month) => sum + month.kg, 0) / monthly.length
|
||||
: 0;
|
||||
const bestMonth = monthly.reduce<typeof monthly[number] | null>(
|
||||
(best, item) => (!best || item.kg > best.kg ? item : best),
|
||||
null,
|
||||
);
|
||||
const latestMonth = monthly[monthly.length - 1];
|
||||
const previousMonth = monthly[monthly.length - 2];
|
||||
|
||||
return {
|
||||
monthAvgKg,
|
||||
bestMonth,
|
||||
latestMonth,
|
||||
monthMomentum: latestMonth && previousMonth && previousMonth.kg > 0
|
||||
? ((latestMonth.kg - previousMonth.kg) / previousMonth.kg) * 100
|
||||
: null,
|
||||
top5Share: (top5.reduce((sum, item) => sum + item.kg, 0) / Math.max(1, kpi.yearKg)) * 100,
|
||||
profitYield: kpi.yearRevenue > 0 ? (kpi.yearProfit / kpi.yearRevenue) * 100 : 0,
|
||||
stationAvgKg: stations.length > 0 ? kpi.yearKg / stations.length : 0,
|
||||
monthlyDual: monthly.map(month => ({
|
||||
...month,
|
||||
monthLabel: `${month.month.slice(5).replace(/^0/, '')}月`,
|
||||
})),
|
||||
};
|
||||
}
|
||||
@@ -0,0 +1,182 @@
|
||||
import { fetchJson } from '../../../auth/api-client';
|
||||
import type {
|
||||
H2BiDailyResponse,
|
||||
H2BiDailyTreeQuery,
|
||||
H2BiDailyTreeResponse,
|
||||
H2BiDrillReadOptions,
|
||||
H2BiFullDrillOptions,
|
||||
H2BiFullDrillResponse,
|
||||
H2BiDrillQuery,
|
||||
H2BiDrillResponse,
|
||||
H2BiMetaResponse,
|
||||
H2BiOverviewResponse,
|
||||
H2BiQuery,
|
||||
} from './types';
|
||||
|
||||
const BASE = '/api/energy/h2/v2';
|
||||
|
||||
function queryString(query: Record<string, unknown>) {
|
||||
const params = new URLSearchParams();
|
||||
for (const [key, value] of Object.entries(query)) {
|
||||
if (value !== undefined && value !== null && value !== '') params.set(key, String(value));
|
||||
}
|
||||
return params.toString();
|
||||
}
|
||||
|
||||
function request<T>(path: string, query: object = {}, options?: RequestInit) {
|
||||
const qs = queryString(query as Record<string, unknown>);
|
||||
return fetchJson<T>(`${BASE}/${path}${qs ? `?${qs}` : ''}`, options);
|
||||
}
|
||||
|
||||
export function fetchH2BiMeta() {
|
||||
return request<H2BiMetaResponse>('meta');
|
||||
}
|
||||
|
||||
export function fetchH2BiOverview(query: H2BiQuery) {
|
||||
return request<H2BiOverviewResponse>('overview', query);
|
||||
}
|
||||
|
||||
export function fetchH2BiDaily(query: H2BiQuery) {
|
||||
return request<H2BiDailyResponse>('daily', query).catch(async () => {
|
||||
// The date-group drill is backed by the same read-only ledger and has a
|
||||
// simpler query plan. Keep the date view usable when the aggregate daily
|
||||
// endpoint times out/fails, without substituting mock data.
|
||||
const drill = await request<H2BiDrillResponse>('drill', {
|
||||
...query,
|
||||
groupBy: 'date',
|
||||
pageSize: 400,
|
||||
});
|
||||
const startDate = query.startDate ?? `${query.year}-01-01`;
|
||||
const endDate = query.endDate ?? new Intl.DateTimeFormat('en-CA', {
|
||||
timeZone: 'Asia/Shanghai',
|
||||
year: 'numeric',
|
||||
month: '2-digit',
|
||||
day: '2-digit',
|
||||
}).format(new Date());
|
||||
const byDate = new Map(drill.groups.map((row) => [row.name, row]));
|
||||
const days = [] as H2BiDailyResponse['trend'];
|
||||
for (let cursor = new Date(`${startDate}T00:00:00Z`); cursor <= new Date(`${endDate}T00:00:00Z`); cursor.setUTCDate(cursor.getUTCDate() + 1)) {
|
||||
const date = cursor.toISOString().slice(0, 10);
|
||||
const row = byDate.get(date);
|
||||
days.push({
|
||||
date,
|
||||
kg: Number(row?.kg ?? 0),
|
||||
lingniuKg: Number(row?.lingniuKg ?? 0),
|
||||
externalKg: Number(row?.externalKg ?? 0),
|
||||
cost: Number(row?.cost ?? 0),
|
||||
recordCount: Number(row?.recordCount ?? 0),
|
||||
});
|
||||
}
|
||||
const totalKg = days.reduce((sum, row) => sum + row.kg, 0);
|
||||
const totalCost = days.reduce((sum, row) => sum + row.cost, 0);
|
||||
return {
|
||||
range: { startDate, endDate },
|
||||
watermark: { ledgerAt: null, paymentAt: null },
|
||||
filters: query,
|
||||
kpis: {
|
||||
totalKg,
|
||||
totalCost,
|
||||
averageDailyKg: totalKg / Math.max(1, days.length),
|
||||
stationCount: Number(drill.summary.stationCount ?? 0),
|
||||
activeDays: days.filter((row) => row.kg > 0).length,
|
||||
},
|
||||
trend: days,
|
||||
days: [...days].reverse(),
|
||||
};
|
||||
});
|
||||
}
|
||||
|
||||
export function fetchH2BiDailyTree(date: string, query: H2BiDailyTreeQuery) {
|
||||
return request<H2BiDailyTreeResponse>('daily-tree', { date, ...query });
|
||||
}
|
||||
|
||||
export async function fetchH2BiDrill(
|
||||
query: H2BiDrillQuery,
|
||||
options?: H2BiDrillReadOptions,
|
||||
) {
|
||||
const page = query.page ?? 1;
|
||||
const pageSize = Math.min(Math.max(1, query.pageSize ?? 100), 200);
|
||||
const response = await request<H2BiDrillResponse>(
|
||||
'drill',
|
||||
{ ...query, page, pageSize },
|
||||
options,
|
||||
);
|
||||
const itemCount = query.groupBy === 'record'
|
||||
? response.records.length
|
||||
: response.groups.length;
|
||||
// Older servers only set hasMore for record pages. A full page is therefore
|
||||
// also treated as potentially incomplete; the final empty/short page proves
|
||||
// completion without silently dropping grouped rows.
|
||||
return {
|
||||
...response,
|
||||
page: {
|
||||
...response.page,
|
||||
page,
|
||||
pageSize,
|
||||
itemCount,
|
||||
hasMore: Boolean(response.page?.hasMore) || itemCount === pageSize,
|
||||
},
|
||||
} satisfies H2BiDrillResponse;
|
||||
}
|
||||
|
||||
function abortError() {
|
||||
const error = new Error('已取消全量读取');
|
||||
error.name = 'AbortError';
|
||||
return error;
|
||||
}
|
||||
|
||||
/**
|
||||
* Reads every page only after a caller explicitly asks for a complete result.
|
||||
* It never returns a partial collection: server errors, cancellation, and the
|
||||
* page guard all reject before an export can be created.
|
||||
*/
|
||||
export async function fetchAllH2BiDrill(
|
||||
query: Omit<H2BiDrillQuery, 'page' | 'pageSize'>,
|
||||
options: H2BiFullDrillOptions = {},
|
||||
): Promise<H2BiFullDrillResponse> {
|
||||
const pageSize = Math.min(Math.max(1, options.pageSize ?? 200), 200);
|
||||
const maxPages = Math.max(1, options.maxPages ?? 250);
|
||||
const maxRows = Math.max(1, options.maxRows ?? 50_000);
|
||||
const groups: H2BiDrillResponse['groups'] = [];
|
||||
const records: H2BiDrillResponse['records'] = [];
|
||||
let first: H2BiDrillResponse | null = null;
|
||||
|
||||
for (let page = 1; page <= maxPages; page += 1) {
|
||||
if (options.signal?.aborted) throw abortError();
|
||||
const result = await fetchH2BiDrill(
|
||||
{ ...query, page, pageSize },
|
||||
{ signal: options.signal },
|
||||
);
|
||||
if (!first) first = result;
|
||||
groups.push(...result.groups);
|
||||
records.push(...result.records);
|
||||
const itemCount = query.groupBy === 'record' ? records.length : groups.length;
|
||||
if (itemCount > maxRows)
|
||||
throw new Error(`全量读取超过 ${maxRows} 条保护上限，未生成不完整结果；请缩小日期范围后重新导出`);
|
||||
if (!result.page.hasMore) {
|
||||
return {
|
||||
...first,
|
||||
groups,
|
||||
records,
|
||||
page: {
|
||||
...result.page,
|
||||
page: 1,
|
||||
pageSize,
|
||||
itemCount,
|
||||
hasMore: false,
|
||||
pagesRead: page,
|
||||
complete: true,
|
||||
},
|
||||
};
|
||||
}
|
||||
}
|
||||
throw new Error(`全量读取超过 ${maxPages} 页保护上限，未生成不完整结果；请缩小日期范围后重新导出`);
|
||||
}
|
||||
|
||||
/** Reusable contract for station-detail consumers that need every raw record. */
|
||||
export function fetchAllH2BiDrillRecords(
|
||||
query: Omit<H2BiDrillQuery, 'groupBy' | 'page' | 'pageSize'>,
|
||||
options?: H2BiFullDrillOptions,
|
||||
) {
|
||||
return fetchAllH2BiDrill({ ...query, groupBy: 'record' }, options);
|
||||
}
|
||||
@@ -0,0 +1,41 @@
|
||||
# 移动端经营总览布局决策
|
||||
|
||||
## 问题
|
||||
|
||||
- 顶部筛选区域占用首屏过多。
|
||||
- 累计加氢量与累计加氢费使用两个大卡片并排，数字和承担结构拥挤。
|
||||
- 利润卡片与本月、本日卡片高度不一致，形成大面积无效留白。
|
||||
- 移动端需要先回答经营结果，再提供费用结构与近期指标。
|
||||
|
||||
## 用户选择
|
||||
|
||||
- 仅优化移动端布局，保留现有数据、筛选和下钻交互。
|
||||
- 使用克制、专业、低饱和的视觉方向。
|
||||
- 以管理层快速查看经营结果、费用结构和近期表现为核心任务。
|
||||
|
||||
## 最终设计决策
|
||||
|
||||
1. 新增单个移动端「经营总览」容器，集中展示累计加氢量、累计加氢费及我司承担、客户承担、待核准三行对照数据。
|
||||
2. 桌面端继续使用原有 KPI 栅格，移动端隐藏原累计量费双卡，避免重复信息。
|
||||
3. 加氢利润改为全宽紧凑卡，本月加氢量与今日加氢量并排呈现。
|
||||
4. 压缩移动端页头、筛选容器和范围提示的垂直空间，不改变筛选状态与即时生效逻辑。
|
||||
5. 保持 44px 最小触控热区、等宽数字及 375px/390px 视口无横向溢出。
|
||||
|
||||
## 参考稿细化确认
|
||||
|
||||
用户追加确认以参考截图优化移动端首屏：
|
||||
|
||||
1. 顶部只保留年份、视图、车辆范围和筛选四项快捷入口，订单范围收进展开筛选。
|
||||
2. 累计经营概览增加我司、客户、待核准三段加氢量构成条，并展示吨数与占比。
|
||||
3. 增加「查看构成」入口，继续复用累计加氢量明细。
|
||||
4. 利润卡改为左侧利润、右侧收入与成本的横向结构。
|
||||
5. 本月与今日指标使用等宽双卡，经营诊断延后至趋势内容之后。
|
||||
|
||||
## 单站页与累计明细补充确认
|
||||
|
||||
1. 单站页把站点数、统计加氢总量、车次、统计金额和现结金额收进一张经营概览，不再把桌面端四卡压成手机两列。
|
||||
2. 日期范围与更新时间保留在同一块紧凑查询区；各站概况改为纵向卡片，竖屏不展示无必要的横屏入口。
|
||||
3. 累计明细顶部改为双主指标：数据归集总量、数据总金额；覆盖站点数和来源完整度降为一行辅助信息。
|
||||
4. 累计明细筛选默认收起为范围摘要，点击后展开完整筛选；竖屏只保留左上返回，不再重复提供关闭和横屏入口。
|
||||
5. 层级数据优先保证站点、客户、车辆与订单摘要在首列可读；详细字段继续在表格内部横向查看，不允许撑宽整页。
|
||||
6. 移动端竖屏明细页头保留左侧返回；站点与客户宽表明细同时保留右侧横屏图标，但不显示重复关闭按钮。业务标题按内容增高并换行，任何入口不得覆盖站点名、客户名或统计时间。
|
||||
@@ -0,0 +1,151 @@
|
||||
# 能源氢费经营看板 · 产品需求说明（PRD）
|
||||
|
||||
> 原型路径：`src/prototypes/energy-h2-bi-board`
|
||||
> 宿主嵌入：`https://bi-next.lnh2e.com/energy#hydrogen/overview`
|
||||
> 宿主视觉单源：`src/resources/prd/energy-bi-host-ref/`
|
||||
> 方案底稿：`src/resources/prd/energy-board-plan-20260806.md`
|
||||
> 口令：`lingniu`（轻门禁 · 本会话记住）
|
||||
> 拍板：嵌入总览 · 我司成本三维度 · 站月/客户汇总表 · **禁 OneOS V2** · D1 无自动解读
|
||||
> **2026-08-12**：顶栏白卡右上角 **全局 / 单站**；单站嵌加氢站日报（起止查询日期自管）；单站模式**不显示**看板标题旁时间芯片；现结登记仍独立 OneOS 模块
|
||||
> **2026-08-13**：全局视图**去掉**「加氢站日报 / 站日现结登记」关联入口卡；站日报仅经顶栏「单站」；现结登记走独立模块，本页不再挂跳转摘要
|
||||
|
||||
> 二期：双视角全路径 · 充耗存侧卡 · **预充值能源账户扣款（体系 B）**
|
||||
> 作者：OneOS
|
||||
|
||||
---
|
||||
|
||||
## 0. 嵌入与设计约定
|
||||
|
||||
| 项 | 口径 |
|
||||
|---|---|
|
||||
| 口令 | `lingniu`（轻门禁；本会话 `sessionStorage` 记住） |
|
||||
| 宿主页 | `#hydrogen/overview` |
|
||||
| 功能 | 独立嵌入块「我司成本」：三维度 + 两张汇总表 + 订单明细；**单站**嵌加氢站日报 |
|
||||
| 设计 | 只跟 bi-next 能源 BI；禁止 `V2*`；字体对齐 V2 §2.2 |
|
||||
|
||||
### 视图决策
|
||||
|
||||
| 决策 | 结论 | 理由 |
|
||||
|---|---|---|
|
||||
| 顶栏范围 | **全局 / 单站**（白卡右上角） | 单站回嵌经营看板 |
|
||||
| 全局内视图 | `按日` / `总览` | 原看板能力保留 |
|
||||
| 总览筛选 | 默认**全部车辆**；可切**仅羚牛车辆** / **仅外部车辆**；与年份、全量订单/仅已核对联动 | 外层筛选与 KPI / 图表 / 钻取同一口径 |
|
||||
| 承担方式 | **我司承担 / 客户承担 / 待核准**三类；「自行」并入「客户承担」 | 首页拆分、穿透筛选、明细列和导出口径一致 |
|
||||
| 核心 KPI | PC 展示全部 5 项；移动端前 2 项突出，其余 3 项紧凑保留且均可点击穿透 | 不隐藏旧版指标能力 |
|
||||
| 单站形态 | 加氢站日报：起止查询日期 + KPI 钻取 + 各站单卡（行内加氢量占比 · 按量降序） | 一眼可查 |
|
||||
| 单站时间 | **不展示**看板标题旁「统计时间范围」芯片 | 与全局统计维度不同 |
|
||||
| 单站明细 | 日汇总、区间趋势、客户月量/费、收支、现结；导出取证 `.xlsx` | 查看与取证 |
|
||||
| 现结登记 | **独立** `energy-spot-cash-intake`；本页不办理 | 1C 手维入口唯一 |
|
||||
| 预充值能源账户 | **二期 · 体系 B** | 与现结完全独立 |
|
||||
|
||||
### 关联独立模块
|
||||
|
||||
| 模块 | 路径 | 本看板角色 |
|
||||
|---|---|---|
|
||||
| 加氢站日报 | `energy-h2-station-daily` | 顶栏「单站」嵌入；可独立外链；**不**再挂全局关联卡 |
|
||||
| 站日现结登记 | `energy-spot-cash-intake` | 独立模块办理；本页**不**挂跳转入口与近窗摘要 |
|
||||
| 加氢客户（外部） | `energy-h2-external-customer` | 外部客户主数据；与租赁客户隔离 |
|
||||
| 外部车辆明细 | `energy-h2-external-vehicle` | 外部车牌主数据 + 导入；API 分流「仅外部」数据源 |
|
||||
|
||||
> **2026-08-13 分流口径：** 南海站 API 流水命中外部车辆台账 → `fleetCategory=external`，**只进本看板/站日报**，不进车辆氢费明细；命中自有/租赁车队 → 进氢费明细并可核对。主数据种子车牌与 `mockDaily` 外部牌对齐（见 `src/common/energy-h2-external-fleet`）。
|
||||
|
||||
---
|
||||
|
||||
## 0.1 现结 ≠ 预充值（双体系硬隔离）
|
||||
|
||||
| | **体系 A · 现结** | **体系 B · 预充值（以后）** |
|
||||
|---|---|---|
|
||||
| 一句话 | 到站加完氢 → 当场在线支付 | 预充进账户 → 加氢扣款 |
|
||||
| 本期 | 独立模块手维；看板/站日报只读 | **不做** |
|
||||
| 禁止 | 「账户充值」指现结；订单金额冒充现结 | 用现结台账冒充账户流水 |
|
||||
|
||||
---
|
||||
|
||||
## 1. 模块定位
|
||||
|
||||
| 项 | 说明 |
|
||||
|---|---|
|
||||
| 名称 | 能源氢费经营看板（嵌入：我司成本） |
|
||||
| 核心任务 | 全局：三维度结构 → 站月/客户汇总 → 订单解释；单站：站日经营读数与取证 |
|
||||
| 不做 | 现结登记表单；体系 B |
|
||||
|
||||
---
|
||||
|
||||
## 2. 我司成本三维度（仅全局）
|
||||
|
||||
| 维度 | 二级 |
|
||||
|---|---|
|
||||
| 租赁成本 | 我司承担 · 包氢项目 |
|
||||
| 物流成本 | — |
|
||||
| 运维成本 | 异动 · 调拨 |
|
||||
|
||||
客户承担不进三维度。核对 ≠ 对账。
|
||||
|
||||
---
|
||||
|
||||
## 3. 用户故事
|
||||
|
||||
### 经营看板 · 全局
|
||||
|
||||
- **起点：** 打开看板（口令后）→ 顶栏「全局」→ 按日 / 总览。
|
||||
- **怎么运作：** 看我司成本与汇总；站日报经顶栏「单站」进入。
|
||||
- **闭环：** 本页解释成本结构。
|
||||
|
||||
### 经营看板 · 单站
|
||||
|
||||
- **起点：** 顶栏切「单站」→ 驾驶舱各站卡片。
|
||||
- **怎么运作：** 点站点进入汇报口径明细（日汇总/趋势/客户月量费/收支/车辆/现结）；可导出取证 Excel。
|
||||
- **闭环：** 数字可查、明细可追到车与现结笔；登记仍去现结模块。
|
||||
|
||||
---
|
||||
|
||||
## 4. KPI 穿透表 · 类型标签口径
|
||||
|
||||
穿透钻取表（加氢站 → 客户 → 车辆）：
|
||||
|
||||
表头支持「**按加氢站**」与「**按客户**」两种组织方式；切换只改变层级顺序，均可下钻到车辆和单笔订单。
|
||||
|
||||
| 层级 | 类型 / 归属列 |
|
||||
|---|---|
|
||||
| 加氢站 | **不展示**自用消费 / 对外销售（站侧不再分自用与对外） |
|
||||
| 客户 | **不展示**内部客户 / 外部客户标签 |
|
||||
| 车辆 | 无法识别车牌 → 名称统一「无车牌」（与有牌车辆同级），标签「外部车辆」；能识别且为羚牛车队 → 标签「羚牛车辆」；能识别的外部车 → 标签「外部车辆」 |
|
||||
| 车辆下订单行 | 展示标签「订单编号」+ 单号；字段口径为**加氢订单编号**（导出列亦用「订单编号」） |
|
||||
| 加氢站核对状态 | 按下属羚牛车辆汇总：**已核对**（全部已核）/ **部分核对**（有已核也有未核，或任一带部分）/ **未核对**（一条未核）；无参与核对车辆时显示 `-` |
|
||||
| 穿透筛 | **加氢站 / 客户 / 车辆**可搜索选择器（级联）+ **车辆归属**单选按钮组（全部 / 仅羚牛 / 仅外部）+ **承担方式**（全部 / 我司承担 / 客户承担 / 待核准）；禁 V2 |
|
||||
| 加氢利润穿透 | 关键列展示**收入 / 成本 / 利润**；顶栏汇总亦为收入·成本·利润 |
|
||||
| 本月加氢穿透 | 关键列展示**本月加氢量 / 本月加氢费 / 加氢费占年比** |
|
||||
| 本日加氢穿透 | 关键列展示**本日加氢量 / 本日加氢费 / 加氢费占月比** |
|
||||
| 月度柱钻取 | 点月度加氢量柱 → 该月**各站**内部客户加氢总量 / 外部客户加氢总量 / 合计 |
|
||||
| 月度收支柱钻取 | 点**客户收入**柱 → 该月各站客户收入；点**成本支出**柱 → 该月各站成本支出 |
|
||||
| Top5 站横条 | 点条 → 该站**内部/外部客户加氢总量**（表可竖滚） |
|
||||
| 区域环图/图例 | 点市或省 → 该区域**各站加氢总量与占比**（表可竖滚） |
|
||||
| 站汇总表钻取 | 默认按日展示：**日期 / 车辆数与加氢笔数 / 加氢量 / 较前日增减 / 氢费收入 / 平均单价**；展开后展示客户、车牌、车辆归属、加氢时间和单笔明细 |
|
||||
| 客户汇总表钻取 | 关键字段：**承担方 / 加氢量 / 成本支出 / 应收 / 已收 / 未收**（按日展开） |
|
||||
| 头部加氢站占比 | 点击展开**加氢量排名**下拉（高→低、可滚动）；点站可进穿透 |
|
||||
| 按日经营指标 | 默认展示**区间加氢量 / 日均加氢量 / 较上一周期 / 活跃加氢站**；活跃站点按“当前有记录站点 / 全网络站点”展示并给出覆盖率；车辆构成降级为筛选区间说明，不占主指标卡 |
|
||||
| 全局时间范围 | 每个页面、列表、全屏明细与钻取弹窗必须展示明确的开始与结束时间；**经营汇总到天、当日实时到分钟、订单与加氢流水到秒**；“本日 / 本月 / 年度”等业务名称不可替代具体时间范围 |
|
||||
| 穿透标签提示 | 车辆归属 / 数据来源 / 核对状态标签均有悬浮说明 |
|
||||
|
||||
---
|
||||
|
||||
## 5. 验收
|
||||
|
||||
1. 顶栏白卡右上角有 **全局 / 单站**；全局下仍有按日/总览。
|
||||
2. 单站：站点卡片 → 明细含汇报 Excel 对应区块；导出 `.xlsx`。
|
||||
3. 空态不填 0；现结 ≠ 预充值。
|
||||
4. 口令 `lingniu`；标注壳在门外。
|
||||
5. 禁 OneOS V2 控件。
|
||||
6. KPI 穿透：站/客户无自用·内外标签；无车牌归「无车牌」+「外部车辆」。
|
||||
7. 总览顶栏：默认全部车辆；切仅羚牛/仅外部/年份/核对后，KPI、图表、钻取数同步变化。
|
||||
8. 承担方式仅有我司承担、客户承担、待核准三类；不再单列「自行」，且首页、筛选、明细、导出一致。
|
||||
9. KPI 穿透可按加氢站或客户组织，两种方式都可追到车辆和单笔订单。
|
||||
10. PC 可见 5 项核心 KPI；移动端 5 项均可见、可点击，前 2 项保持主视觉层级。
|
||||
|
||||
---
|
||||
|
||||
## 6. 明确不做（本期）
|
||||
|
||||
- 体系 B 预充值账户
|
||||
- 现结在本页办理
|
||||
- 云效建单（默认不上）
|
||||
@@ -0,0 +1,30 @@
|
||||
# 氢能经营看板开发交付说明
|
||||
|
||||
## 页面入口
|
||||
|
||||
- 本地地址：`http://127.0.0.1:51720/prototypes/energy-h2-bi-board`
|
||||
- 访问口令：`lingniu`
|
||||
- 启动方式：在项目目录执行 `npm ci`，再执行 `npm run dev`
|
||||
|
||||
## 本次交付范围
|
||||
|
||||
- PC 与移动端全局经营总览、日期视图、单站视角。
|
||||
- 年份、日期区间、车辆归属、订单范围、站点、客户等筛选交互。
|
||||
- KPI 下钻、表格逐级展开、Tab 切换、更多数据、横屏查看与退出。
|
||||
- 单站经营明细（日加氢、客户月度、收支、进账）与日期查询。
|
||||
- Excel 导出入口及前端下载逻辑。
|
||||
|
||||
## 数据与接口边界
|
||||
|
||||
- 当前为可运行原型，经营数据来自 `data/mockBoard.ts`、`data/mockDaily.ts` 和单站模块的 `data/mockStationDaily.ts`。
|
||||
- 正式开发需将模拟数据替换为接口返回值，但应保留现有筛选、空状态、下钻层级、双端响应式布局与横屏交互。
|
||||
- 查询条件为即时生效；日期弹层点击“确定”后更新页面统计范围。
|
||||
|
||||
## 验证命令
|
||||
|
||||
```bash
|
||||
npx vitest run tests/energy-h2-bi-board.ui.test.ts tests/energy-h2-bearer-model.test.ts tests/energy-h2-dual-end-interaction.test.ts tests/energy-h2-mobile-kpi-tone.test.ts tests/energy-h2-mobile-layout-polish.test.ts tests/energy-bi-board.visual.test.ts tests/common/EnergyBiBoardMobileLayout.test.ts tests/common/MobileListFullscreenButton.test.tsx
|
||||
ENTRY_KEY=prototypes/energy-h2-bi-board npx vite build
|
||||
```
|
||||
|
||||
交付前结果：8 个测试文件、97 项检查全部通过，目标页面生产构建通过。
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,287 @@
|
||||
import type {
|
||||
CostDim,
|
||||
FleetScope,
|
||||
H2OrderRow,
|
||||
LeaseKind,
|
||||
OpsKind,
|
||||
} from '../types';
|
||||
import { BORNE_BY_LABEL, BORNE_BY_ORDER, COST_DIM_LABEL, LEASE_KIND_LABEL, OPS_KIND_LABEL } from '../types';
|
||||
|
||||
export function filterOrders(
|
||||
rows: H2OrderRow[],
|
||||
year: number,
|
||||
verifyScope: 'all' | 'verified',
|
||||
fleetScope: FleetScope,
|
||||
): H2OrderRow[] {
|
||||
return rows.filter((r) => {
|
||||
if (!r.occurredAt.startsWith(String(year))) return false;
|
||||
if (verifyScope === 'verified' && r.verifyStatus !== 'verified') return false;
|
||||
if (fleetScope === 'own' && r.fleet !== 'own') return false;
|
||||
if (fleetScope === 'external' && r.fleet !== 'external') return false;
|
||||
return true;
|
||||
});
|
||||
}
|
||||
|
||||
export function sumAmount(rows: H2OrderRow[]): number {
|
||||
return rows.reduce((s, r) => s + r.amount, 0);
|
||||
}
|
||||
|
||||
export function sumKg(rows: H2OrderRow[]): number {
|
||||
return rows.reduce((s, r) => s + r.quantityKg, 0);
|
||||
}
|
||||
|
||||
export function companyCostRows(rows: H2OrderRow[]): H2OrderRow[] {
|
||||
return rows.filter((r) => r.borneBy === 'company');
|
||||
}
|
||||
|
||||
export function dimAmount(rows: H2OrderRow[], dim: CostDim): number {
|
||||
return sumAmount(companyCostRows(rows).filter((r) => r.costDim === dim));
|
||||
}
|
||||
|
||||
export function leaseSubAmount(rows: H2OrderRow[], kind: LeaseKind): number {
|
||||
return sumAmount(
|
||||
companyCostRows(rows).filter((r) => r.costDim === 'lease' && r.leaseKind === kind),
|
||||
);
|
||||
}
|
||||
|
||||
export function opsSubAmount(rows: H2OrderRow[], kind: OpsKind): number {
|
||||
return sumAmount(
|
||||
companyCostRows(rows).filter((r) => r.costDim === 'ops' && r.opsKind === kind),
|
||||
);
|
||||
}
|
||||
|
||||
export interface DimCard {
|
||||
key: CostDim;
|
||||
label: string;
|
||||
amount: number;
|
||||
subs: { key: string; label: string; amount: number }[];
|
||||
}
|
||||
|
||||
export function costDimCards(rows: H2OrderRow[]): DimCard[] {
|
||||
return [
|
||||
{
|
||||
key: 'lease',
|
||||
label: COST_DIM_LABEL.lease,
|
||||
amount: dimAmount(rows, 'lease'),
|
||||
subs: [
|
||||
{ key: 'company_borne', label: LEASE_KIND_LABEL.company_borne, amount: leaseSubAmount(rows, 'company_borne') },
|
||||
{ key: 'package_h2', label: LEASE_KIND_LABEL.package_h2, amount: leaseSubAmount(rows, 'package_h2') },
|
||||
],
|
||||
},
|
||||
{
|
||||
key: 'logistics',
|
||||
label: COST_DIM_LABEL.logistics,
|
||||
amount: dimAmount(rows, 'logistics'),
|
||||
subs: [],
|
||||
},
|
||||
{
|
||||
key: 'ops',
|
||||
label: COST_DIM_LABEL.ops,
|
||||
amount: dimAmount(rows, 'ops'),
|
||||
subs: [
|
||||
{ key: 'abnormal', label: OPS_KIND_LABEL.abnormal, amount: opsSubAmount(rows, 'abnormal') },
|
||||
{ key: 'transfer', label: OPS_KIND_LABEL.transfer, amount: opsSubAmount(rows, 'transfer') },
|
||||
],
|
||||
},
|
||||
];
|
||||
}
|
||||
|
||||
export function pendingAmount(rows: H2OrderRow[]): number {
|
||||
return dimAmount(rows, 'pending');
|
||||
}
|
||||
|
||||
export function unverified(rows: H2OrderRow[]): { amount: number; count: number } {
|
||||
const list = rows.filter((r) => r.verifyStatus === 'unverified');
|
||||
return { amount: sumAmount(list), count: list.length };
|
||||
}
|
||||
|
||||
export function formatYuan(n: number): string {
|
||||
return `¥${n.toLocaleString('zh-CN', { maximumFractionDigits: 0 })}`;
|
||||
}
|
||||
|
||||
export function formatKg(n: number): string {
|
||||
return `${n.toLocaleString('zh-CN', { maximumFractionDigits: 2 })} kg`;
|
||||
}
|
||||
|
||||
export function costDimLabel(row: H2OrderRow): string {
|
||||
if (row.costDim === 'lease' && row.leaseKind) {
|
||||
return `${COST_DIM_LABEL.lease} · ${LEASE_KIND_LABEL[row.leaseKind]}`;
|
||||
}
|
||||
if (row.costDim === 'ops' && row.opsKind) {
|
||||
return `${COST_DIM_LABEL.ops} · ${OPS_KIND_LABEL[row.opsKind]}`;
|
||||
}
|
||||
return COST_DIM_LABEL[row.costDim];
|
||||
}
|
||||
|
||||
export type DimFilter =
|
||||
| { dim: CostDim; sub?: string }
|
||||
| null;
|
||||
|
||||
export function applyDimFilter(rows: H2OrderRow[], filter: DimFilter): H2OrderRow[] {
|
||||
if (!filter) return rows;
|
||||
return rows.filter((r) => {
|
||||
if (r.borneBy !== 'company') return false;
|
||||
if (r.costDim !== filter.dim) return false;
|
||||
if (!filter.sub) return true;
|
||||
if (filter.dim === 'lease') return r.leaseKind === filter.sub;
|
||||
if (filter.dim === 'ops') return r.opsKind === filter.sub;
|
||||
return true;
|
||||
});
|
||||
}
|
||||
|
||||
/** 统计/明细共用：维度筛后的我司成本行；无维度筛则全部我司行 */
|
||||
export function companyRowsForStats(rows: H2OrderRow[], filter: DimFilter): H2OrderRow[] {
|
||||
if (!filter) return companyCostRows(rows);
|
||||
return applyDimFilter(rows, filter);
|
||||
}
|
||||
|
||||
export interface StationMonthRow {
|
||||
stationId: string;
|
||||
stationName: string;
|
||||
month: string;
|
||||
amount: number;
|
||||
quantityKg: number;
|
||||
unverifiedAmount: number;
|
||||
}
|
||||
|
||||
export function stationMonthAgg(rows: H2OrderRow[]): StationMonthRow[] {
|
||||
const map = new Map<string, H2OrderRow[]>();
|
||||
rows.forEach((r) => {
|
||||
const month = r.occurredAt.slice(0, 7);
|
||||
const key = `${r.stationId}|${month}`;
|
||||
const list = map.get(key) ?? [];
|
||||
list.push(r);
|
||||
map.set(key, list);
|
||||
});
|
||||
return Array.from(map.entries())
|
||||
.map(([key, list]) => {
|
||||
const [stationId, month] = key.split('|');
|
||||
return {
|
||||
stationId,
|
||||
stationName: list[0].stationName,
|
||||
month,
|
||||
amount: sumAmount(list),
|
||||
quantityKg: sumKg(list),
|
||||
unverifiedAmount: sumAmount(list.filter((x) => x.verifyStatus === 'unverified')),
|
||||
};
|
||||
})
|
||||
.sort((a, b) => b.amount - a.amount);
|
||||
}
|
||||
|
||||
export interface CustomerAttrRow {
|
||||
customerId: string;
|
||||
customerName: string;
|
||||
borneLabel: string;
|
||||
quantityKg: number;
|
||||
companyCost: number;
|
||||
unverifiedAmount: number;
|
||||
}
|
||||
|
||||
export function customerAttrAgg(rows: H2OrderRow[]): CustomerAttrRow[] {
|
||||
const map = new Map<string, H2OrderRow[]>();
|
||||
rows.forEach((r) => {
|
||||
const list = map.get(r.customerId) ?? [];
|
||||
list.push(r);
|
||||
map.set(r.customerId, list);
|
||||
});
|
||||
return Array.from(map.entries())
|
||||
.map(([customerId, list]) => {
|
||||
const company = list.filter((x) => x.borneBy === 'company');
|
||||
const activeBorneTypes = BORNE_BY_ORDER.filter((borneBy) => list.some((x) => x.borneBy === borneBy));
|
||||
const borneLabel = activeBorneTypes.length === 1 ? BORNE_BY_LABEL[activeBorneTypes[0]] : '混合';
|
||||
return {
|
||||
customerId,
|
||||
customerName: list[0].customerName,
|
||||
borneLabel,
|
||||
quantityKg: sumKg(list),
|
||||
companyCost: sumAmount(company),
|
||||
unverifiedAmount: sumAmount(list.filter((x) => x.verifyStatus === 'unverified')),
|
||||
};
|
||||
})
|
||||
.sort((a, b) => b.companyCost - a.companyCost || b.quantityKg - a.quantityKg);
|
||||
}
|
||||
|
||||
export const SOURCE_LABEL: Record<H2OrderRow['source'], string> = {
|
||||
api: 'API',
|
||||
manual: '补录',
|
||||
fence: '围栏',
|
||||
};
|
||||
|
||||
/** 总览 KPI：在宿主示意量级上按当前筛选（年/车辆/核对）等比缩放，保证卡片跟随顶栏筛选 */
|
||||
export function computeHostKpi(
|
||||
filtered: H2OrderRow[],
|
||||
year: number,
|
||||
allOrders: H2OrderRow[],
|
||||
base: {
|
||||
totalKgT: number;
|
||||
companyKgT: number;
|
||||
customerKgT: number;
|
||||
pendingKgT: number;
|
||||
totalFeeWan: number;
|
||||
companyFeeWan: number;
|
||||
customerFeeWan: number;
|
||||
pendingFeeWan: number;
|
||||
profitWan: number;
|
||||
incomeWan: number;
|
||||
costWan: number;
|
||||
monthKgT: number;
|
||||
monthFeeWan: number;
|
||||
monthYearPct: number;
|
||||
dayKg: number;
|
||||
dayFee: number;
|
||||
dayMonthPct: number;
|
||||
},
|
||||
) {
|
||||
const round2 = (n: number) => Math.round(n * 100) / 100;
|
||||
const baseline = filterOrders(allOrders, year, 'all', 'all');
|
||||
const baseKg = sumKg(baseline) || 1;
|
||||
const fKg = sumKg(filtered);
|
||||
const ratio = fKg / baseKg;
|
||||
|
||||
const companyKg = sumKg(filtered.filter((r) => r.borneBy === 'company'));
|
||||
const customerKg = sumKg(filtered.filter((r) => r.borneBy === 'customer'));
|
||||
const pendingKg = sumKg(filtered.filter((r) => r.borneBy === 'pending'));
|
||||
const split = companyKg + customerKg + pendingKg || 1;
|
||||
const companyShare = companyKg / split;
|
||||
const customerShare = customerKg / split;
|
||||
const pendingShare = pendingKg / split;
|
||||
|
||||
const monthRows = filtered.filter((r) => r.occurredAt.startsWith(`${year}-08`));
|
||||
const dayRows = filtered.filter((r) => r.occurredAt.startsWith(`${year}-08-08`));
|
||||
const monthKg = sumKg(monthRows);
|
||||
const dayKgVal = sumKg(dayRows);
|
||||
const monthAmt = sumAmount(monthRows);
|
||||
const dayAmt = sumAmount(dayRows);
|
||||
const yearKg = fKg || 1;
|
||||
const monthKgShare = monthKg / yearKg;
|
||||
const dayMonthShare = monthKg > 0 ? dayKgVal / monthKg : 0;
|
||||
|
||||
const totalKgT = round2(base.totalKgT * ratio);
|
||||
const totalFeeWan = round2(base.totalFeeWan * ratio);
|
||||
const incomeWan = round2(base.incomeWan * ratio);
|
||||
const costWan = round2(base.costWan * ratio);
|
||||
const profitWan = round2(base.profitWan * ratio);
|
||||
const monthKgT = round2(totalKgT * monthKgShare);
|
||||
const monthFeeWan = round2(totalFeeWan * monthKgShare);
|
||||
|
||||
return {
|
||||
totalKgT,
|
||||
companyKgT: round2(totalKgT * companyShare),
|
||||
customerKgT: round2(totalKgT * customerShare),
|
||||
pendingKgT: round2(totalKgT * pendingShare),
|
||||
totalFeeWan,
|
||||
companyFeeWan: round2(totalFeeWan * companyShare),
|
||||
customerFeeWan: round2(totalFeeWan * customerShare),
|
||||
pendingFeeWan: round2(totalFeeWan * pendingShare),
|
||||
profitWan,
|
||||
incomeWan,
|
||||
costWan,
|
||||
monthKgT,
|
||||
monthFeeWan,
|
||||
monthYearPct: round2(monthKgShare * 100),
|
||||
dayKg: round2(dayKgVal > 0 ? dayKgVal : base.dayKg * ratio * Math.max(dayMonthShare, 0.01)),
|
||||
dayFee: Math.round(dayAmt > 0 ? dayAmt : base.dayFee * ratio * Math.max(dayMonthShare, 0.01)),
|
||||
dayMonthPct: round2((dayMonthShare || base.dayMonthPct / 100) * 100),
|
||||
profitRatePct: incomeWan > 0 ? round2((profitWan / incomeWan) * 100) : 0,
|
||||
};
|
||||
}
|
||||
@@ -0,0 +1,191 @@
|
||||
import type { H2OrderRow, StationPrepaid } from '../types';
|
||||
|
||||
/** 辅助生成 200 条逼真高质量订单明细假数据 */
|
||||
function generate200MockOrders(): H2OrderRow[] {
|
||||
const stations = [
|
||||
{ id: 'st-ln', name: '佛山南海羚牛加氢站' },
|
||||
{ id: 'st-dp', name: '东鹏大道甲醇制氢一体站' },
|
||||
{ id: 'st-jx', name: '嘉兴中石化滨海加氢站' },
|
||||
{ id: 'st-jj', name: '嘉兴嘉锦加氢站' },
|
||||
{ id: 'st-cd', name: '成都中石化天府机场高速北站加氢站' },
|
||||
{ id: 'st-gz', name: '广州黄埔高新区氢能示范加氢站' },
|
||||
{ id: 'st-sh', name: '上海安亭加氢站' },
|
||||
];
|
||||
|
||||
const ownPlates = [
|
||||
'粤A99887', '粤B12001', '浙A52088', '浙F77881', '浙A88888F',
|
||||
'浙A66666', '浙F11223', '浙F33445', '川A77889', '川B99001',
|
||||
'沪A33219', '粤B88102', '浙F99812', '浙F66521', '粤A11029',
|
||||
];
|
||||
|
||||
const extPlates = [
|
||||
'粤A77661', '浙F33211', '川A55432', '沪B98765', '粤B66554',
|
||||
'浙A22334', '粤A99102', '川B88761', '无车牌(散车)',
|
||||
];
|
||||
|
||||
const customers = [
|
||||
{ id: 'c-ln', name: '羚牛自营', type: 'internal', deptId: 'd-ops', deptName: '运维中心' },
|
||||
{ id: 'c-bao', name: '包氢专线项目', type: 'internal', deptId: 'd-lease', deptName: '租赁业务一部' },
|
||||
{ id: 'c-lease-a', name: '嘉兴智奇供应链', type: 'internal', deptId: 'd-lease', deptName: '租赁业务一部' },
|
||||
{ id: 'c-log', name: '嘉兴益顺冷链', type: 'internal', deptId: 'd-log', deptName: '物流中心' },
|
||||
{ id: 'c-log2', name: '四川群彬物流', type: 'internal', deptId: 'd-log', deptName: '物流中心' },
|
||||
{ id: 'c-lease-b', name: '无锡铭康物流', type: 'internal', deptId: 'd-lease', deptName: '租赁业务二部' },
|
||||
{ id: 'c-ops', name: '运维调拨车辆', type: 'internal', deptId: 'd-ops', deptName: '运维中心' },
|
||||
{ id: 'c-pend', name: '待归属样本', type: 'internal', deptId: 'd-lease', deptName: '租赁业务一部' },
|
||||
{ id: 'c-ext-a', name: '广东氢动力', type: 'external', deptId: 'd-sales', deptName: '能源销售' },
|
||||
{ id: 'c-ext-b', name: '广东清运专线', type: 'external', deptId: 'd-sales', deptName: '能源销售' },
|
||||
{ id: 'c-ext-c', name: '东展供应链', type: 'external', deptId: 'd-sales', deptName: '能源销售' },
|
||||
{ id: 'c-ext-d', name: '顺丰冷运专线', type: 'external', deptId: 'd-sales', deptName: '能源销售' },
|
||||
{ id: 'c-ext-e', name: '极兔速递冷链', type: 'external', deptId: 'd-sales', deptName: '能源销售' },
|
||||
];
|
||||
|
||||
const list: H2OrderRow[] = [];
|
||||
|
||||
// 生成 200 条记录
|
||||
for (let i = 1; i <= 200; i++) {
|
||||
const padId = String(i).padStart(3, '0');
|
||||
|
||||
// 年份分配: 1~145 (2026年), 146~185 (2025年), 186~200 (2024年)
|
||||
let year = 2026;
|
||||
let month = Math.floor((i % 8)) + 1; // 1~8月
|
||||
if (i > 145 && i <= 185) {
|
||||
year = 2025;
|
||||
month = Math.floor((i % 12)) + 1;
|
||||
} else if (i > 185) {
|
||||
year = 2024;
|
||||
month = Math.floor((i % 12)) + 1;
|
||||
}
|
||||
|
||||
const day = (i * 7 % 28) + 1;
|
||||
const hour = (i * 3 % 14) + 7;
|
||||
const minute = (i * 11 % 50) + 5;
|
||||
|
||||
const mm = month < 10 ? `0${month}` : `${month}`;
|
||||
const dd = day < 10 ? `0${day}` : `${day}`;
|
||||
const hh = hour < 10 ? `0${hour}` : `${hour}`;
|
||||
const min = minute < 10 ? `0${minute}` : `${minute}`;
|
||||
|
||||
const occurredAt = `${year}-${mm}-${dd} ${hh}:${min}`;
|
||||
const station = stations[i % stations.length];
|
||||
const customer = customers[i % customers.length];
|
||||
|
||||
const isOwn = customer.type === 'internal';
|
||||
const fleet = isOwn ? 'own' : 'external';
|
||||
const plateNo = isOwn
|
||||
? ownPlates[i % ownPlates.length]
|
||||
: extPlates[i % extPlates.length];
|
||||
|
||||
// 单价 & 加氢量
|
||||
const unitPrice = [28, 30, 32, 35][i % 4];
|
||||
const quantityKg = Math.round((18 + (i * 3.7 % 85)) * 100) / 100;
|
||||
const amount = Math.round(quantityKg * unitPrice);
|
||||
|
||||
// 成本维度与费用承担（三类：自行结算并入客户承担）
|
||||
let borneBy: 'company' | 'customer' | 'pending' = 'company';
|
||||
let costDim: 'lease' | 'logistics' | 'ops' | 'pending' = 'lease';
|
||||
let leaseKind: 'company_borne' | 'package_h2' | undefined = undefined;
|
||||
let opsKind: 'abnormal' | 'transfer' | undefined = undefined;
|
||||
|
||||
const borneSlot = i % 10;
|
||||
if (customer.id === 'c-ext-a' || customer.id === 'c-ext-d' || borneSlot === 7 || borneSlot === 8) {
|
||||
borneBy = 'customer';
|
||||
} else if (borneSlot === 9) {
|
||||
borneBy = 'pending';
|
||||
}
|
||||
|
||||
const dimType = i % 5;
|
||||
if (borneBy !== 'company') {
|
||||
costDim = 'pending';
|
||||
leaseKind = undefined;
|
||||
opsKind = undefined;
|
||||
} else if (dimType === 0) {
|
||||
costDim = 'lease';
|
||||
leaseKind = 'company_borne';
|
||||
} else if (dimType === 1) {
|
||||
costDim = 'lease';
|
||||
leaseKind = 'package_h2';
|
||||
} else if (dimType === 2) {
|
||||
costDim = 'logistics';
|
||||
} else if (dimType === 3) {
|
||||
costDim = 'ops';
|
||||
opsKind = i % 2 === 0 ? 'abnormal' : 'transfer';
|
||||
} else {
|
||||
costDim = 'pending';
|
||||
}
|
||||
|
||||
// 核对状态与数据来源
|
||||
const verifyStatus = isOwn ? (i % 4 === 0 ? 'unverified' : 'verified') : 'unverified';
|
||||
const source = isOwn
|
||||
? (i % 3 === 0 ? 'manual' : i % 3 === 1 ? 'fence' : 'api')
|
||||
: (i % 2 === 0 ? 'api' : 'manual');
|
||||
|
||||
list.push({
|
||||
id: `HO-${String(year).slice(2)}${mm}-${padId}`,
|
||||
occurredAt,
|
||||
stationId: station.id,
|
||||
stationName: station.name,
|
||||
plateNo,
|
||||
customerId: customer.id,
|
||||
customerName: customer.name,
|
||||
deptId: customer.deptId,
|
||||
deptName: customer.deptName,
|
||||
amount,
|
||||
quantityKg,
|
||||
unitPrice,
|
||||
borneBy,
|
||||
costDim,
|
||||
leaseKind,
|
||||
opsKind,
|
||||
verifyStatus,
|
||||
source,
|
||||
fleet,
|
||||
});
|
||||
}
|
||||
|
||||
return list;
|
||||
}
|
||||
|
||||
/** 假数：200 条订单明细（三维度成本拆分） */
|
||||
export const MOCK_ORDERS: H2OrderRow[] = generate200MockOrders();
|
||||
|
||||
export const MOCK_PREPAID: StationPrepaid[] = [
|
||||
{
|
||||
stationId: 'st-jx',
|
||||
stationName: '嘉兴中石化滨海加氢站',
|
||||
openingBalance: 120000,
|
||||
openingAnchorLabel: '2025 年末财务期末',
|
||||
recharge: 80000,
|
||||
consume: 95000,
|
||||
},
|
||||
{
|
||||
stationId: 'st-jj',
|
||||
stationName: '嘉兴嘉锦加氢站',
|
||||
openingBalance: null,
|
||||
openingAnchorLabel: null,
|
||||
recharge: 40000,
|
||||
consume: 28000,
|
||||
},
|
||||
];
|
||||
|
||||
/** 宿主总览 KPI（三类承担口径，自行结算已并入客户承担） */
|
||||
export const HOST_KPI = {
|
||||
totalKgT: 697.16,
|
||||
companyKgT: 598.01,
|
||||
customerKgT: 80,
|
||||
pendingKgT: 19.15,
|
||||
totalFeeWan: 2093.71,
|
||||
companyFeeWan: 1795.95,
|
||||
customerFeeWan: 240,
|
||||
pendingFeeWan: 57.76,
|
||||
profitWan: 13.01,
|
||||
incomeWan: 2106.72,
|
||||
costWan: 2093.71,
|
||||
monthKgT: 16.67,
|
||||
monthFeeWan: 50.36,
|
||||
monthYearPct: 2.4,
|
||||
dayKg: 181.78,
|
||||
dayFee: 6533,
|
||||
dayMonthPct: 1.1,
|
||||
};
|
||||
|
||||
export const DEFAULT_YEAR = 2026;
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,73 @@
|
||||
/** 能源 BI · 氢能总览嵌入功能 · 类型（宿主 bi-next #hydrogen/overview，非 OneOS V2） */
|
||||
|
||||
/** 我司成本三维度（本尊 2026-08-07） */
|
||||
export type CostDim = 'lease' | 'logistics' | 'ops' | 'pending';
|
||||
|
||||
/** 租赁成本二级 */
|
||||
export type LeaseKind = 'company_borne' | 'package_h2';
|
||||
|
||||
/** 运维成本二级 */
|
||||
export type OpsKind = 'abnormal' | 'transfer';
|
||||
|
||||
export type VerifyStatus = 'verified' | 'unverified';
|
||||
/** 氢费承担口径：自行结算并入客户承担，未明确归属的订单进入待核准。 */
|
||||
export type BorneBy = 'company' | 'customer' | 'pending';
|
||||
export type FleetScope = 'own' | 'external' | 'all';
|
||||
/** 按日 | 总览（站日报 / 现结登记已拆独立模块） */
|
||||
export type HostView = 'daily' | 'overview';
|
||||
|
||||
export interface H2OrderRow {
|
||||
id: string;
|
||||
occurredAt: string;
|
||||
stationId: string;
|
||||
stationName: string;
|
||||
plateNo: string;
|
||||
customerId: string;
|
||||
customerName: string;
|
||||
deptId: string;
|
||||
deptName: string;
|
||||
amount: number;
|
||||
quantityKg: number;
|
||||
unitPrice: number;
|
||||
borneBy: BorneBy;
|
||||
costDim: CostDim;
|
||||
leaseKind?: LeaseKind;
|
||||
opsKind?: OpsKind;
|
||||
verifyStatus: VerifyStatus;
|
||||
source: 'api' | 'manual' | 'fence';
|
||||
fleet: 'own' | 'external';
|
||||
}
|
||||
|
||||
export interface StationPrepaid {
|
||||
stationId: string;
|
||||
stationName: string;
|
||||
openingBalance: number | null;
|
||||
openingAnchorLabel: string | null;
|
||||
recharge: number;
|
||||
consume: number;
|
||||
}
|
||||
|
||||
export const COST_DIM_LABEL: Record<CostDim, string> = {
|
||||
lease: '租赁成本',
|
||||
logistics: '物流成本',
|
||||
ops: '运维成本',
|
||||
pending: '待归属',
|
||||
};
|
||||
|
||||
export const LEASE_KIND_LABEL: Record<LeaseKind, string> = {
|
||||
company_borne: '我司承担',
|
||||
package_h2: '包氢项目',
|
||||
};
|
||||
|
||||
export const OPS_KIND_LABEL: Record<OpsKind, string> = {
|
||||
abnormal: '异动',
|
||||
transfer: '调拨',
|
||||
};
|
||||
|
||||
export const BORNE_BY_LABEL: Record<BorneBy, string> = {
|
||||
company: '我司承担',
|
||||
customer: '客户承担',
|
||||
pending: '待核准',
|
||||
};
|
||||
|
||||
export const BORNE_BY_ORDER: BorneBy[] = ['company', 'customer', 'pending'];
|
||||
@@ -0,0 +1,109 @@
|
||||
import React, { useEffect, useRef, useState } from 'react';
|
||||
import { isPhoneUserAgent, phoneRotation } from './phone-viewport';
|
||||
import { Maximize2 } from 'lucide-react';
|
||||
import './mobile-list-fullscreen.css';
|
||||
|
||||
export function MobileListFullscreenButton({
|
||||
label = '横屏查看',
|
||||
placement = 'overlay',
|
||||
}: {
|
||||
label?: string;
|
||||
placement?: 'overlay' | 'inline';
|
||||
}) {
|
||||
const [isActive, setIsActive] = useState(false);
|
||||
const targetRef = useRef<HTMLElement | null>(null);
|
||||
const savedStyles = useRef(new Map<string, [string, string]>());
|
||||
const restoreGeometry = () => {
|
||||
const target = targetRef.current;
|
||||
if (!target) return;
|
||||
savedStyles.current.forEach(([value, priority], key) => {
|
||||
if (value) target.style.setProperty(key, value, priority); else target.style.removeProperty(key);
|
||||
});
|
||||
savedStyles.current.clear();
|
||||
};
|
||||
const updateGeometry = () => {
|
||||
const target = targetRef.current;
|
||||
if (!target) return;
|
||||
restoreGeometry();
|
||||
const width = window.visualViewport?.width ?? window.innerWidth;
|
||||
const height = window.visualViewport?.height ?? window.innerHeight;
|
||||
const rotate = phoneRotation(navigator.userAgent, width, height);
|
||||
target.dataset.mobileFullscreenMode = rotate ? 'phone-rotated' : 'native-scroll';
|
||||
if (!rotate) return;
|
||||
const styles: Record<string, string> = {
|
||||
position: 'fixed', top: '0px', left: '0px', right: 'auto', bottom: 'auto',
|
||||
width: `${height}px`, height: `${width}px`, 'max-width': 'none', 'max-height': 'none',
|
||||
margin: '0px', transform: `translateX(${width}px) rotate(90deg)`, 'transform-origin': '0 0',
|
||||
overflow: 'hidden', padding: '0px',
|
||||
};
|
||||
Object.entries(styles).forEach(([key, value]) => {
|
||||
savedStyles.current.set(key, [target.style.getPropertyValue(key), target.style.getPropertyPriority(key)]);
|
||||
target.style.setProperty(key, value, 'important');
|
||||
});
|
||||
};
|
||||
useEffect(() => {
|
||||
const resize = () => updateGeometry();
|
||||
const escape = (event: KeyboardEvent) => {
|
||||
if (event.key === 'Escape' && targetRef.current) { event.stopPropagation(); leaveLandscape(targetRef.current); }
|
||||
};
|
||||
window.addEventListener('resize', resize);
|
||||
window.visualViewport?.addEventListener('resize', resize);
|
||||
document.addEventListener('keydown', escape, true);
|
||||
return () => {
|
||||
window.removeEventListener('resize', resize);
|
||||
window.visualViewport?.removeEventListener('resize', resize);
|
||||
document.removeEventListener('keydown', escape, true);
|
||||
if (targetRef.current) {
|
||||
restoreGeometry();
|
||||
targetRef.current.removeAttribute('data-mobile-fullscreen-active');
|
||||
targetRef.current.removeAttribute('data-mobile-fullscreen-mode');
|
||||
targetRef.current.classList.remove('is-mobile-list-fullscreen', 'is-mobile-list-fallback');
|
||||
targetRef.current = null;
|
||||
document.documentElement.classList.remove('ehb-landscape-session');
|
||||
}
|
||||
};
|
||||
}, []);
|
||||
|
||||
const leaveLandscape = (target: HTMLElement) => {
|
||||
restoreGeometry();
|
||||
targetRef.current = null;
|
||||
target.removeAttribute('data-mobile-fullscreen-active');
|
||||
target.removeAttribute('data-mobile-fullscreen-mode');
|
||||
target.classList.remove('is-mobile-list-fullscreen', 'is-mobile-list-fallback');
|
||||
document.documentElement.classList.remove('ehb-landscape-session');
|
||||
setIsActive(false);
|
||||
};
|
||||
|
||||
const openFullscreen = (event: React.MouseEvent<HTMLButtonElement>) => {
|
||||
event.stopPropagation();
|
||||
const target = event.currentTarget.closest<HTMLElement>('[data-mobile-fullscreen-list]');
|
||||
if (!target) return;
|
||||
|
||||
if (target.dataset.mobileFullscreenActive === 'true') {
|
||||
leaveLandscape(target);
|
||||
return;
|
||||
}
|
||||
|
||||
target.dataset.mobileFullscreenActive = 'true';
|
||||
targetRef.current = target;
|
||||
target.classList.add('is-mobile-list-fullscreen');
|
||||
document.documentElement.classList.add('ehb-landscape-session');
|
||||
setIsActive(true);
|
||||
|
||||
updateGeometry();
|
||||
};
|
||||
|
||||
return (
|
||||
<button
|
||||
type="button"
|
||||
className={`mobile-list-fullscreen-trigger${placement === 'inline' ? ' is-inline' : ''}`}
|
||||
aria-label={isActive ? '退出完整宽表' : label}
|
||||
aria-pressed={isActive}
|
||||
title={isActive ? '退出宽表模式' : label}
|
||||
onClick={openFullscreen}
|
||||
>
|
||||
<span className="mobile-list-fullscreen-trigger__label">{isActive ? '退出宽表' : isPhoneUserAgent(navigator.userAgent) ? '横屏查看' : '查看完整表格'}</span>
|
||||
<Maximize2 size={15} aria-hidden />
|
||||
</button>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,2 @@
|
||||
export * from './types';
|
||||
export * from './store';
|
||||
@@ -0,0 +1,569 @@
|
||||
/**
|
||||
* 体系 A · 站日现结进账 Mock + localStorage
|
||||
* 仅本尊提供 Excel 实站；禁造站。
|
||||
* - 南海：截止8.11 收支汇总 → 现结
|
||||
* - 东鹏大道：加氢记录-20260802 汇总进账明细 → 现结
|
||||
*/
|
||||
import type {
|
||||
CashIntakeChangeLog,
|
||||
StationCashIntakeDay,
|
||||
StationCashIntakeLine,
|
||||
} from './types';
|
||||
|
||||
export const CASH_INTAKE_STORAGE_KEY = 'oneos-energy-spot-cash-intake-v4';
|
||||
const LEGACY_STORAGE_KEYS = [
|
||||
'oneos-energy-spot-cash-intake-v3',
|
||||
'oneos-energy-spot-cash-intake-v2',
|
||||
];
|
||||
|
||||
function seedDays(): StationCashIntakeDay[] {
|
||||
return [
|
||||
{
|
||||
id: 'day-st-fs-nanhai-2026-08-02',
|
||||
stationId: 'st-fs-nanhai',
|
||||
stationName: "佛山南海羚牛加氢站",
|
||||
bizDate: '2026-08-02',
|
||||
totalAmount: 2530.42,
|
||||
lines: [
|
||||
{ id: 'line-st-fs-nanhai-2026-08-02-0', customerName: "东展供应链（广州）有限公司", amount: 655.12, payMethod: 'wechat_scan' },
|
||||
{ id: 'line-st-fs-nanhai-2026-08-02-1', customerName: "广东开鸿氢能科技有限公司", amount: 503.88, payMethod: 'wechat_scan' },
|
||||
{ id: 'line-st-fs-nanhai-2026-08-02-2', customerName: "现代氢能科技有限公司", amount: 760.38, payMethod: 'wechat_scan' },
|
||||
{ id: 'line-st-fs-nanhai-2026-08-02-3', customerName: "广东氢动力科技服务有限公司", amount: 296.78, payMethod: 'wechat_scan' },
|
||||
{ id: 'line-st-fs-nanhai-2026-08-02-4', customerName: "羚牛氢能科技(广东)有限公司", amount: 314.26, payMethod: 'wechat_scan' },
|
||||
],
|
||||
updatedBy: "杨凤娥",
|
||||
updatedAt: '2026-08-02 18:00',
|
||||
},
|
||||
{
|
||||
id: 'day-st-fs-nanhai-2026-08-03',
|
||||
stationId: 'st-fs-nanhai',
|
||||
stationName: "佛山南海羚牛加氢站",
|
||||
bizDate: '2026-08-03',
|
||||
totalAmount: 2193.36,
|
||||
lines: [
|
||||
{ id: 'line-st-fs-nanhai-2026-08-03-0', customerName: "现代氢能科技有限公司", amount: 1259.7, payMethod: 'wechat_scan' },
|
||||
{ id: 'line-st-fs-nanhai-2026-08-03-1', customerName: "羚牛氢能科技(广东)有限公司", amount: 634.22, payMethod: 'wechat_scan' },
|
||||
{ id: 'line-st-fs-nanhai-2026-08-03-2', customerName: "东展供应链（广州）有限公司", amount: 299.44, payMethod: 'wechat_scan' },
|
||||
],
|
||||
updatedBy: "杨凤娥",
|
||||
updatedAt: '2026-08-03 18:00',
|
||||
},
|
||||
{
|
||||
id: 'day-st-fs-nanhai-2026-08-04',
|
||||
stationId: 'st-fs-nanhai',
|
||||
stationName: "佛山南海羚牛加氢站",
|
||||
bizDate: '2026-08-04',
|
||||
totalAmount: 5216.16,
|
||||
lines: [
|
||||
{ id: 'line-st-fs-nanhai-2026-08-04-0', customerName: "广东沣开科技有限公司", amount: 3000.0, payMethod: 'bank_transfer' },
|
||||
{ id: 'line-st-fs-nanhai-2026-08-04-1', customerName: "现代氢能科技有限公司", amount: 1024.1, payMethod: 'wechat_scan' },
|
||||
{ id: 'line-st-fs-nanhai-2026-08-04-2', customerName: "羚牛氢能科技(广东)有限公司", amount: 473.86, payMethod: 'wechat_scan' },
|
||||
{ id: 'line-st-fs-nanhai-2026-08-04-3', customerName: "广东氢动力科技服务有限公司", amount: 368.6, payMethod: 'wechat_scan' },
|
||||
{ id: 'line-st-fs-nanhai-2026-08-04-4', customerName: "东展供应链（广州）有限公司", amount: 163.78, payMethod: 'wechat_scan' },
|
||||
{ id: 'line-st-fs-nanhai-2026-08-04-5', customerName: "外省过路车", amount: 185.82, payMethod: 'wechat_scan' },
|
||||
],
|
||||
updatedBy: "杨凤娥",
|
||||
updatedAt: '2026-08-04 18:00',
|
||||
},
|
||||
{
|
||||
id: 'day-st-fs-nanhai-2026-08-05',
|
||||
stationId: 'st-fs-nanhai',
|
||||
stationName: "佛山南海羚牛加氢站",
|
||||
bizDate: '2026-08-05',
|
||||
totalAmount: 3469.78,
|
||||
lines: [
|
||||
{ id: 'line-st-fs-nanhai-2026-08-05-0', customerName: "现代氢能科技有限公司", amount: 1155.58, payMethod: 'wechat_scan' },
|
||||
{ id: 'line-st-fs-nanhai-2026-08-05-1', customerName: "羚牛氢能科技(广东)有限公司", amount: 608.0, payMethod: 'wechat_scan' },
|
||||
{ id: 'line-st-fs-nanhai-2026-08-05-2', customerName: "广东氢动力科技服务有限公司", amount: 530.86, payMethod: 'wechat_scan' },
|
||||
{ id: 'line-st-fs-nanhai-2026-08-05-3', customerName: "广东开鸿氢能科技有限公司", amount: 315.78, payMethod: 'wechat_scan' },
|
||||
{ id: 'line-st-fs-nanhai-2026-08-05-4', customerName: "东展供应链（广州）有限公司", amount: 859.56, payMethod: 'wechat_scan' },
|
||||
],
|
||||
updatedBy: "杨凤娥",
|
||||
updatedAt: '2026-08-05 18:00',
|
||||
},
|
||||
{
|
||||
id: 'day-st-fs-nanhai-2026-08-06',
|
||||
stationId: 'st-fs-nanhai',
|
||||
stationName: "佛山南海羚牛加氢站",
|
||||
bizDate: '2026-08-06',
|
||||
totalAmount: 1006.24,
|
||||
lines: [
|
||||
{ id: 'line-st-fs-nanhai-2026-08-06-0', customerName: "现代氢能科技有限公司", amount: 478.8, payMethod: 'wechat_scan' },
|
||||
{ id: 'line-st-fs-nanhai-2026-08-06-1', customerName: "羚牛氢能科技(广东)有限公司", amount: 527.44, payMethod: 'wechat_scan' },
|
||||
],
|
||||
updatedBy: "杨凤娥",
|
||||
updatedAt: '2026-08-06 18:00',
|
||||
},
|
||||
{
|
||||
id: 'day-st-fs-nanhai-2026-08-07',
|
||||
stationId: 'st-fs-nanhai',
|
||||
stationName: "佛山南海羚牛加氢站",
|
||||
bizDate: '2026-08-07',
|
||||
totalAmount: 22094.18,
|
||||
lines: [
|
||||
{ id: 'line-st-fs-nanhai-2026-08-07-0', customerName: "东展供应链（广州）有限公司", amount: 201.02, payMethod: 'wechat_scan' },
|
||||
{ id: 'line-st-fs-nanhai-2026-08-07-1', customerName: "现代氢能科技有限公司", amount: 1410.18, payMethod: 'wechat_scan' },
|
||||
{ id: 'line-st-fs-nanhai-2026-08-07-2', customerName: "羚牛氢能科技(广东)有限公司", amount: 482.98, payMethod: 'wechat_scan' },
|
||||
{ id: 'line-st-fs-nanhai-2026-08-07-3', customerName: "羚牛氢能科技(广东)有限公司", amount: 20000.0, payMethod: 'bank_transfer' },
|
||||
],
|
||||
updatedBy: "杨凤娥",
|
||||
updatedAt: '2026-08-07 18:00',
|
||||
},
|
||||
{
|
||||
id: 'day-st-fs-nanhai-2026-08-08',
|
||||
stationId: 'st-fs-nanhai',
|
||||
stationName: "佛山南海羚牛加氢站",
|
||||
bizDate: '2026-08-08',
|
||||
totalAmount: 2845.06,
|
||||
lines: [
|
||||
{ id: 'line-st-fs-nanhai-2026-08-08-0', customerName: "东展供应链（广州）有限公司", amount: 745.94, payMethod: 'wechat_scan' },
|
||||
{ id: 'line-st-fs-nanhai-2026-08-08-1', customerName: "现代氢能科技有限公司", amount: 1371.8, payMethod: 'wechat_scan' },
|
||||
{ id: 'line-st-fs-nanhai-2026-08-08-2', customerName: "羚牛氢能科技(广东)有限公司", amount: 727.32, payMethod: 'wechat_scan' },
|
||||
],
|
||||
updatedBy: "杨凤娥",
|
||||
updatedAt: '2026-08-08 18:00',
|
||||
},
|
||||
{
|
||||
id: 'day-st-fs-nanhai-2026-08-09',
|
||||
stationId: 'st-fs-nanhai',
|
||||
stationName: "佛山南海羚牛加氢站",
|
||||
bizDate: '2026-08-09',
|
||||
totalAmount: 2485.58,
|
||||
lines: [
|
||||
{ id: 'line-st-fs-nanhai-2026-08-09-0', customerName: "现代氢能科技有限公司", amount: 775.2, payMethod: 'wechat_scan' },
|
||||
{ id: 'line-st-fs-nanhai-2026-08-09-1', customerName: "羚牛氢能科技(广东)有限公司", amount: 987.62, payMethod: 'wechat_scan' },
|
||||
{ id: 'line-st-fs-nanhai-2026-08-09-2', customerName: "广东氢动力科技服务有限公司", amount: 250.42, payMethod: 'wechat_scan' },
|
||||
{ id: 'line-st-fs-nanhai-2026-08-09-3', customerName: "东展供应链（广州）有限公司", amount: 472.34, payMethod: 'wechat_scan' },
|
||||
],
|
||||
updatedBy: "杨凤娥",
|
||||
updatedAt: '2026-08-09 18:00',
|
||||
},
|
||||
{
|
||||
id: 'day-st-fs-nanhai-2026-08-10',
|
||||
stationId: 'st-fs-nanhai',
|
||||
stationName: "佛山南海羚牛加氢站",
|
||||
bizDate: '2026-08-10',
|
||||
totalAmount: 22823.78,
|
||||
lines: [
|
||||
{ id: 'line-st-fs-nanhai-2026-08-10-0', customerName: "现代氢能科技有限公司", amount: 1582.7, payMethod: 'wechat_scan' },
|
||||
{ id: 'line-st-fs-nanhai-2026-08-10-1', customerName: "羚牛氢能科技(广东)有限公司", amount: 757.34, payMethod: 'wechat_scan' },
|
||||
{ id: 'line-st-fs-nanhai-2026-08-10-2', customerName: "广东氢动力科技服务有限公司", amount: 186.2, payMethod: 'wechat_scan' },
|
||||
{ id: 'line-st-fs-nanhai-2026-08-10-3', customerName: "东展供应链（广州）有限公司", amount: 297.54, payMethod: 'wechat_scan' },
|
||||
{ id: 'line-st-fs-nanhai-2026-08-10-4', customerName: "广东瀚清能源有限公司", amount: 20000.0, payMethod: 'bank_transfer' },
|
||||
],
|
||||
updatedBy: "杨凤娥",
|
||||
updatedAt: '2026-08-10 18:00',
|
||||
},
|
||||
{
|
||||
id: 'day-st-fs-nanhai-2026-08-11',
|
||||
stationId: 'st-fs-nanhai',
|
||||
stationName: "佛山南海羚牛加氢站",
|
||||
bizDate: '2026-08-11',
|
||||
totalAmount: 2301.04,
|
||||
lines: [
|
||||
{ id: 'line-st-fs-nanhai-2026-08-11-0', customerName: "现代氢能科技有限公司", amount: 755.06, payMethod: 'wechat_scan' },
|
||||
{ id: 'line-st-fs-nanhai-2026-08-11-1', customerName: "羚牛氢能科技(广东)有限公司", amount: 596.36, payMethod: 'wechat_scan' },
|
||||
{ id: 'line-st-fs-nanhai-2026-08-11-2', customerName: "广东开鸿氢能科技有限公司", amount: 599.26, payMethod: 'wechat_scan' },
|
||||
{ id: 'line-st-fs-nanhai-2026-08-11-3', customerName: "东展供应链（广州）有限公司", amount: 350.36, payMethod: 'wechat_scan' },
|
||||
],
|
||||
updatedBy: "杨凤娥",
|
||||
updatedAt: '2026-08-11 18:00',
|
||||
},
|
||||
{
|
||||
id: 'day-st-dp-dongpeng-2026-06-26',
|
||||
stationId: 'st-dp-dongpeng',
|
||||
stationName: "东鹏大道甲醇制氢一体站",
|
||||
bizDate: '2026-06-26',
|
||||
totalAmount: 10000.0,
|
||||
lines: [
|
||||
{ id: 'line-st-dp-dongpeng-2026-06-26-0', customerName: "广州市梅洛特物流有限公司", amount: 10000.0, payMethod: 'bank_transfer' },
|
||||
],
|
||||
updatedBy: "金可鹏",
|
||||
updatedAt: '2026-06-26 18:00',
|
||||
},
|
||||
{
|
||||
id: 'day-st-dp-dongpeng-2026-07-01',
|
||||
stationId: 'st-dp-dongpeng',
|
||||
stationName: "东鹏大道甲醇制氢一体站",
|
||||
bizDate: '2026-07-01',
|
||||
totalAmount: 1506.75,
|
||||
lines: [
|
||||
{ id: 'line-st-dp-dongpeng-2026-07-01-0', customerName: "广州新运多租赁有限公司", amount: 1506.75, payMethod: 'wechat_scan' },
|
||||
],
|
||||
updatedBy: "金可鹏",
|
||||
updatedAt: '2026-07-01 18:00',
|
||||
},
|
||||
{
|
||||
id: 'day-st-dp-dongpeng-2026-07-02',
|
||||
stationId: 'st-dp-dongpeng',
|
||||
stationName: "东鹏大道甲醇制氢一体站",
|
||||
bizDate: '2026-07-02',
|
||||
totalAmount: 596.4,
|
||||
lines: [
|
||||
{ id: 'line-st-dp-dongpeng-2026-07-02-0', customerName: "广州中味餐饮服务有限公司", amount: 96.25, payMethod: 'wechat_scan' },
|
||||
{ id: 'line-st-dp-dongpeng-2026-07-02-1', customerName: "广州新运多租赁有限公司", amount: 500.15, payMethod: 'wechat_scan' },
|
||||
],
|
||||
updatedBy: "金可鹏",
|
||||
updatedAt: '2026-07-02 18:00',
|
||||
},
|
||||
{
|
||||
id: 'day-st-dp-dongpeng-2026-07-03',
|
||||
stationId: 'st-dp-dongpeng',
|
||||
stationName: "东鹏大道甲醇制氢一体站",
|
||||
bizDate: '2026-07-03',
|
||||
totalAmount: 918.4,
|
||||
lines: [
|
||||
{ id: 'line-st-dp-dongpeng-2026-07-03-0', customerName: "广州新运多租赁有限公司", amount: 918.4, payMethod: 'wechat_scan' },
|
||||
],
|
||||
updatedBy: "金可鹏",
|
||||
updatedAt: '2026-07-03 18:00',
|
||||
},
|
||||
{
|
||||
id: 'day-st-dp-dongpeng-2026-07-04',
|
||||
stationId: 'st-dp-dongpeng',
|
||||
stationName: "东鹏大道甲醇制氢一体站",
|
||||
bizDate: '2026-07-04',
|
||||
totalAmount: 349.3,
|
||||
lines: [
|
||||
{ id: 'line-st-dp-dongpeng-2026-07-04-0', customerName: "广州新运多租赁有限公司", amount: 349.3, payMethod: 'wechat_scan' },
|
||||
],
|
||||
updatedBy: "金可鹏",
|
||||
updatedAt: '2026-07-04 18:00',
|
||||
},
|
||||
{
|
||||
id: 'day-st-dp-dongpeng-2026-07-07',
|
||||
stationId: 'st-dp-dongpeng',
|
||||
stationName: "东鹏大道甲醇制氢一体站",
|
||||
bizDate: '2026-07-07',
|
||||
totalAmount: 20640.15,
|
||||
lines: [
|
||||
{ id: 'line-st-dp-dongpeng-2026-07-07-0', customerName: "广州市梅洛特物流有限公司", amount: 20000.0, payMethod: 'bank_transfer' },
|
||||
{ id: 'line-st-dp-dongpeng-2026-07-07-1', customerName: "广州中味餐饮服务有限公司", amount: 362.25, payMethod: 'wechat_scan' },
|
||||
{ id: 'line-st-dp-dongpeng-2026-07-07-2', customerName: "广州新运多租赁有限公司", amount: 277.9, payMethod: 'wechat_scan' },
|
||||
],
|
||||
updatedBy: "金可鹏",
|
||||
updatedAt: '2026-07-07 18:00',
|
||||
},
|
||||
{
|
||||
id: 'day-st-dp-dongpeng-2026-07-08',
|
||||
stationId: 'st-dp-dongpeng',
|
||||
stationName: "东鹏大道甲醇制氢一体站",
|
||||
bizDate: '2026-07-08',
|
||||
totalAmount: 896.35,
|
||||
lines: [
|
||||
{ id: 'line-st-dp-dongpeng-2026-07-08-0', customerName: "广州新运多租赁有限公司", amount: 896.35, payMethod: 'wechat_scan' },
|
||||
],
|
||||
updatedBy: "金可鹏",
|
||||
updatedAt: '2026-07-08 18:00',
|
||||
},
|
||||
{
|
||||
id: 'day-st-dp-dongpeng-2026-07-09',
|
||||
stationId: 'st-dp-dongpeng',
|
||||
stationName: "东鹏大道甲醇制氢一体站",
|
||||
bizDate: '2026-07-09',
|
||||
totalAmount: 902.65,
|
||||
lines: [
|
||||
{ id: 'line-st-dp-dongpeng-2026-07-09-0', customerName: "广州中味餐饮服务有限公司", amount: 211.4, payMethod: 'wechat_scan' },
|
||||
{ id: 'line-st-dp-dongpeng-2026-07-09-1', customerName: "广州新运多租赁有限公司", amount: 691.25, payMethod: 'wechat_scan' },
|
||||
],
|
||||
updatedBy: "金可鹏",
|
||||
updatedAt: '2026-07-09 18:00',
|
||||
},
|
||||
{
|
||||
id: 'day-st-dp-dongpeng-2026-07-10',
|
||||
stationId: 'st-dp-dongpeng',
|
||||
stationName: "东鹏大道甲醇制氢一体站",
|
||||
bizDate: '2026-07-10',
|
||||
totalAmount: 1198.05,
|
||||
lines: [
|
||||
{ id: 'line-st-dp-dongpeng-2026-07-10-0', customerName: "广州中味餐饮服务有限公司", amount: 314.65, payMethod: 'wechat_scan' },
|
||||
{ id: 'line-st-dp-dongpeng-2026-07-10-1', customerName: "广州新运多租赁有限公司", amount: 883.4, payMethod: 'wechat_scan' },
|
||||
],
|
||||
updatedBy: "金可鹏",
|
||||
updatedAt: '2026-07-10 18:00',
|
||||
},
|
||||
{
|
||||
id: 'day-st-dp-dongpeng-2026-07-14',
|
||||
stationId: 'st-dp-dongpeng',
|
||||
stationName: "东鹏大道甲醇制氢一体站",
|
||||
bizDate: '2026-07-14',
|
||||
totalAmount: 266.7,
|
||||
lines: [
|
||||
{ id: 'line-st-dp-dongpeng-2026-07-14-0', customerName: "广州中味餐饮服务有限公司", amount: 266.7, payMethod: 'wechat_scan' },
|
||||
],
|
||||
updatedBy: "金可鹏",
|
||||
updatedAt: '2026-07-14 18:00',
|
||||
},
|
||||
{
|
||||
id: 'day-st-dp-dongpeng-2026-07-15',
|
||||
stationId: 'st-dp-dongpeng',
|
||||
stationName: "东鹏大道甲醇制氢一体站",
|
||||
bizDate: '2026-07-15',
|
||||
totalAmount: 562.8,
|
||||
lines: [
|
||||
{ id: 'line-st-dp-dongpeng-2026-07-15-0', customerName: "广州中味餐饮服务有限公司", amount: 262.5, payMethod: 'wechat_scan' },
|
||||
{ id: 'line-st-dp-dongpeng-2026-07-15-1', customerName: "广州新运多租赁有限公司", amount: 300.3, payMethod: 'wechat_scan' },
|
||||
],
|
||||
updatedBy: "金可鹏",
|
||||
updatedAt: '2026-07-15 18:00',
|
||||
},
|
||||
{
|
||||
id: 'day-st-dp-dongpeng-2026-07-16',
|
||||
stationId: 'st-dp-dongpeng',
|
||||
stationName: "东鹏大道甲醇制氢一体站",
|
||||
bizDate: '2026-07-16',
|
||||
totalAmount: 497.7,
|
||||
lines: [
|
||||
{ id: 'line-st-dp-dongpeng-2026-07-16-0', customerName: "广州中味餐饮服务有限公司", amount: 200.9, payMethod: 'wechat_scan' },
|
||||
{ id: 'line-st-dp-dongpeng-2026-07-16-1', customerName: "广州新运多租赁有限公司", amount: 296.8, payMethod: 'wechat_scan' },
|
||||
],
|
||||
updatedBy: "金可鹏",
|
||||
updatedAt: '2026-07-16 18:00',
|
||||
},
|
||||
{
|
||||
id: 'day-st-dp-dongpeng-2026-07-17',
|
||||
stationId: 'st-dp-dongpeng',
|
||||
stationName: "东鹏大道甲醇制氢一体站",
|
||||
bizDate: '2026-07-17',
|
||||
totalAmount: 911.4,
|
||||
lines: [
|
||||
{ id: 'line-st-dp-dongpeng-2026-07-17-0', customerName: "广州新运多租赁有限公司", amount: 911.4, payMethod: 'wechat_scan' },
|
||||
],
|
||||
updatedBy: "金可鹏",
|
||||
updatedAt: '2026-07-17 18:00',
|
||||
},
|
||||
{
|
||||
id: 'day-st-dp-dongpeng-2026-07-18',
|
||||
stationId: 'st-dp-dongpeng',
|
||||
stationName: "东鹏大道甲醇制氢一体站",
|
||||
bizDate: '2026-07-18',
|
||||
totalAmount: 870.45,
|
||||
lines: [
|
||||
{ id: 'line-st-dp-dongpeng-2026-07-18-0', customerName: "广州新运多租赁有限公司", amount: 870.45, payMethod: 'wechat_scan' },
|
||||
],
|
||||
updatedBy: "金可鹏",
|
||||
updatedAt: '2026-07-18 18:00',
|
||||
},
|
||||
{
|
||||
id: 'day-st-dp-dongpeng-2026-07-19',
|
||||
stationId: 'st-dp-dongpeng',
|
||||
stationName: "东鹏大道甲醇制氢一体站",
|
||||
bizDate: '2026-07-19',
|
||||
totalAmount: 468.65,
|
||||
lines: [
|
||||
{ id: 'line-st-dp-dongpeng-2026-07-19-0', customerName: "广州中味餐饮服务有限公司", amount: 181.3, payMethod: 'wechat_scan' },
|
||||
{ id: 'line-st-dp-dongpeng-2026-07-19-1', customerName: "广州新运多租赁有限公司", amount: 287.35, payMethod: 'wechat_scan' },
|
||||
],
|
||||
updatedBy: "金可鹏",
|
||||
updatedAt: '2026-07-19 18:00',
|
||||
},
|
||||
{
|
||||
id: 'day-st-dp-dongpeng-2026-07-20',
|
||||
stationId: 'st-dp-dongpeng',
|
||||
stationName: "东鹏大道甲醇制氢一体站",
|
||||
bizDate: '2026-07-20',
|
||||
totalAmount: 708.75,
|
||||
lines: [
|
||||
{ id: 'line-st-dp-dongpeng-2026-07-20-0', customerName: "广州新运多租赁有限公司", amount: 480.55, payMethod: 'wechat_scan' },
|
||||
{ id: 'line-st-dp-dongpeng-2026-07-20-1', customerName: "广州中味餐饮服务有限公司", amount: 228.2, payMethod: 'wechat_scan' },
|
||||
],
|
||||
updatedBy: "金可鹏",
|
||||
updatedAt: '2026-07-20 18:00',
|
||||
},
|
||||
{
|
||||
id: 'day-st-dp-dongpeng-2026-07-21',
|
||||
stationId: 'st-dp-dongpeng',
|
||||
stationName: "东鹏大道甲醇制氢一体站",
|
||||
bizDate: '2026-07-21',
|
||||
totalAmount: 234.85,
|
||||
lines: [
|
||||
{ id: 'line-st-dp-dongpeng-2026-07-21-0', customerName: "广州新运多租赁有限公司", amount: 234.85, payMethod: 'wechat_scan' },
|
||||
],
|
||||
updatedBy: "金可鹏",
|
||||
updatedAt: '2026-07-21 18:00',
|
||||
},
|
||||
{
|
||||
id: 'day-st-dp-dongpeng-2026-07-25',
|
||||
stationId: 'st-dp-dongpeng',
|
||||
stationName: "东鹏大道甲醇制氢一体站",
|
||||
bizDate: '2026-07-25',
|
||||
totalAmount: 20686.0,
|
||||
lines: [
|
||||
{ id: 'line-st-dp-dongpeng-2026-07-25-0', customerName: "广州新运多租赁有限公司", amount: 686.0, payMethod: 'wechat_scan' },
|
||||
{ id: 'line-st-dp-dongpeng-2026-07-25-1', customerName: "广州福满华冷链物流有限公司", amount: 20000.0, payMethod: 'bank_transfer' },
|
||||
],
|
||||
updatedBy: "金可鹏",
|
||||
updatedAt: '2026-07-25 18:00',
|
||||
},
|
||||
{
|
||||
id: 'day-st-dp-dongpeng-2026-07-27',
|
||||
stationId: 'st-dp-dongpeng',
|
||||
stationName: "东鹏大道甲醇制氢一体站",
|
||||
bizDate: '2026-07-27',
|
||||
totalAmount: 213.85,
|
||||
lines: [
|
||||
{ id: 'line-st-dp-dongpeng-2026-07-27-0', customerName: "广州新运多租赁有限公司", amount: 213.85, payMethod: 'wechat_scan' },
|
||||
],
|
||||
updatedBy: "金可鹏",
|
||||
updatedAt: '2026-07-27 18:00',
|
||||
},
|
||||
{
|
||||
id: 'day-st-dp-dongpeng-2026-07-28',
|
||||
stationId: 'st-dp-dongpeng',
|
||||
stationName: "东鹏大道甲醇制氢一体站",
|
||||
bizDate: '2026-07-28',
|
||||
totalAmount: 20872.2,
|
||||
lines: [
|
||||
{ id: 'line-st-dp-dongpeng-2026-07-28-0', customerName: "广州中味餐饮服务有限公司", amount: 480.9, payMethod: 'wechat_scan' },
|
||||
{ id: 'line-st-dp-dongpeng-2026-07-28-1', customerName: "广州新运多租赁有限公司", amount: 391.3, payMethod: 'wechat_scan' },
|
||||
{ id: 'line-st-dp-dongpeng-2026-07-28-2', customerName: "广州市梅洛特物流有限公司", amount: 20000.0, payMethod: 'bank_transfer' },
|
||||
],
|
||||
updatedBy: "金可鹏",
|
||||
updatedAt: '2026-07-28 18:00',
|
||||
},
|
||||
{
|
||||
id: 'day-st-dp-dongpeng-2026-07-29',
|
||||
stationId: 'st-dp-dongpeng',
|
||||
stationName: "东鹏大道甲醇制氢一体站",
|
||||
bizDate: '2026-07-29',
|
||||
totalAmount: 814.8,
|
||||
lines: [
|
||||
{ id: 'line-st-dp-dongpeng-2026-07-29-0', customerName: "广州中味餐饮服务有限公司", amount: 84.0, payMethod: 'wechat_scan' },
|
||||
{ id: 'line-st-dp-dongpeng-2026-07-29-1', customerName: "广州新运多租赁有限公司", amount: 730.8, payMethod: 'wechat_scan' },
|
||||
],
|
||||
updatedBy: "金可鹏",
|
||||
updatedAt: '2026-07-29 18:00',
|
||||
},
|
||||
{
|
||||
id: 'day-st-dp-dongpeng-2026-07-30',
|
||||
stationId: 'st-dp-dongpeng',
|
||||
stationName: "东鹏大道甲醇制氢一体站",
|
||||
bizDate: '2026-07-30',
|
||||
totalAmount: 1450.4,
|
||||
lines: [
|
||||
{ id: 'line-st-dp-dongpeng-2026-07-30-0', customerName: "广州中味餐饮服务有限公司", amount: 393.05, payMethod: 'wechat_scan' },
|
||||
{ id: 'line-st-dp-dongpeng-2026-07-30-1', customerName: "广州新运多租赁有限公司", amount: 1057.35, payMethod: 'wechat_scan' },
|
||||
],
|
||||
updatedBy: "金可鹏",
|
||||
updatedAt: '2026-07-30 18:00',
|
||||
},
|
||||
{
|
||||
id: 'day-st-dp-dongpeng-2026-07-31',
|
||||
stationId: 'st-dp-dongpeng',
|
||||
stationName: "东鹏大道甲醇制氢一体站",
|
||||
bizDate: '2026-07-31',
|
||||
totalAmount: 587.65,
|
||||
lines: [
|
||||
{ id: 'line-st-dp-dongpeng-2026-07-31-0', customerName: "广州新运多租赁有限公司", amount: 587.65, payMethod: 'wechat_scan' },
|
||||
],
|
||||
updatedBy: "金可鹏",
|
||||
updatedAt: '2026-07-31 18:00',
|
||||
},
|
||||
];
|
||||
}
|
||||
|
||||
function normalizeDay(d: StationCashIntakeDay): StationCashIntakeDay {
|
||||
return {
|
||||
...d,
|
||||
changeLogs: Array.isArray(d.changeLogs) ? d.changeLogs : [],
|
||||
};
|
||||
}
|
||||
|
||||
export function loadCashIntakeDays(): StationCashIntakeDay[] {
|
||||
try {
|
||||
const raw = localStorage.getItem(CASH_INTAKE_STORAGE_KEY);
|
||||
if (raw) {
|
||||
const parsed = JSON.parse(raw) as StationCashIntakeDay[];
|
||||
if (Array.isArray(parsed) && parsed.length) return parsed.map(normalizeDay);
|
||||
}
|
||||
for (const key of LEGACY_STORAGE_KEYS) {
|
||||
const legacy = localStorage.getItem(key);
|
||||
if (!legacy) continue;
|
||||
const parsed = JSON.parse(legacy) as StationCashIntakeDay[];
|
||||
if (Array.isArray(parsed) && parsed.length) {
|
||||
const next = parsed.map(normalizeDay);
|
||||
saveCashIntakeDays(next);
|
||||
return next;
|
||||
}
|
||||
}
|
||||
} catch {
|
||||
/* ignore */
|
||||
}
|
||||
return seedDays().map(normalizeDay);
|
||||
}
|
||||
|
||||
export function saveCashIntakeDays(days: StationCashIntakeDay[]): void {
|
||||
try {
|
||||
localStorage.setItem(CASH_INTAKE_STORAGE_KEY, JSON.stringify(days));
|
||||
} catch {
|
||||
/* ignore */
|
||||
}
|
||||
}
|
||||
|
||||
export function getCashIntakeForStationRange(
|
||||
days: StationCashIntakeDay[],
|
||||
stationId: string,
|
||||
startDate: string,
|
||||
endDate: string,
|
||||
): StationCashIntakeDay[] {
|
||||
return days
|
||||
.filter((d) => d.stationId === stationId && d.bizDate >= startDate && d.bizDate <= endDate)
|
||||
.slice()
|
||||
.sort((a, b) => a.bizDate.localeCompare(b.bizDate));
|
||||
}
|
||||
|
||||
export function appendChangeLog(
|
||||
day: StationCashIntakeDay,
|
||||
entry: Omit<CashIntakeChangeLog, 'id'> & { id?: string },
|
||||
): StationCashIntakeDay {
|
||||
const log = {
|
||||
id: entry.id || `log-${Date.now()}-${Math.random().toString(36).slice(2, 7)}`,
|
||||
at: entry.at,
|
||||
by: entry.by,
|
||||
action: entry.action,
|
||||
summary: entry.summary,
|
||||
};
|
||||
const prev = Array.isArray(day.changeLogs) ? day.changeLogs : [];
|
||||
return { ...day, changeLogs: [log, ...prev].slice(0, 80) };
|
||||
}
|
||||
|
||||
export function upsertCashIntakeDay(
|
||||
days: StationCashIntakeDay[],
|
||||
next: StationCashIntakeDay,
|
||||
): StationCashIntakeDay[] {
|
||||
const idx = days.findIndex((d) => d.stationId === next.stationId && d.bizDate === next.bizDate);
|
||||
const copy = days.slice();
|
||||
if (idx >= 0) copy[idx] = { ...next, changeLogs: next.changeLogs || copy[idx].changeLogs || [] };
|
||||
else copy.push({ ...next, changeLogs: next.changeLogs || [] });
|
||||
return copy.sort((a, b) => b.bizDate.localeCompare(a.bizDate));
|
||||
}
|
||||
|
||||
export function deleteCashIntakeDay(
|
||||
days: StationCashIntakeDay[],
|
||||
stationId: string,
|
||||
bizDate: string,
|
||||
): StationCashIntakeDay[] {
|
||||
return days.filter((d) => !(d.stationId === stationId && d.bizDate === bizDate));
|
||||
}
|
||||
|
||||
export function sumLines(lines: StationCashIntakeLine[]): number {
|
||||
return lines.reduce((s, l) => s + (Number(l.amount) || 0), 0);
|
||||
}
|
||||
|
||||
export function summarizeCashIntake(
|
||||
days: StationCashIntakeDay[],
|
||||
startDate?: string,
|
||||
endDate?: string,
|
||||
): { dayCount: number; totalAmount: number; stationCount: number } {
|
||||
const filtered = days.filter((d) => {
|
||||
if (startDate && d.bizDate < startDate) return false;
|
||||
if (endDate && d.bizDate > endDate) return false;
|
||||
return true;
|
||||
});
|
||||
const stations = new Set(filtered.map((d) => d.stationId));
|
||||
return {
|
||||
dayCount: filtered.length,
|
||||
totalAmount: filtered.reduce((s, d) => s + d.totalAmount, 0),
|
||||
stationCount: stations.size,
|
||||
};
|
||||
}
|
||||
@@ -0,0 +1,65 @@
|
||||
/**
|
||||
* 站日现结进账类型（共享）
|
||||
* 禁止与预充值能源账户混用（口径见 PRD，不进 UI）。
|
||||
*/
|
||||
|
||||
export type SpotPayMethod = 'wechat_scan' | 'bank_transfer' | 'other';
|
||||
|
||||
export const SPOT_PAY_METHOD_LABEL: Record<SpotPayMethod, string> = {
|
||||
wechat_scan: '微信扫码',
|
||||
bank_transfer: '对公转账',
|
||||
other: '其他',
|
||||
};
|
||||
|
||||
export function parsePayMethodLabel(raw: string): SpotPayMethod | null {
|
||||
const t = String(raw || '').trim();
|
||||
if (!t) return null;
|
||||
const entry = (Object.keys(SPOT_PAY_METHOD_LABEL) as SpotPayMethod[]).find(
|
||||
(k) => SPOT_PAY_METHOD_LABEL[k] === t || k === t,
|
||||
);
|
||||
return entry || null;
|
||||
}
|
||||
|
||||
export interface StationCashIntakeLine {
|
||||
id: string;
|
||||
customerName: string;
|
||||
amount: number;
|
||||
payMethod: SpotPayMethod;
|
||||
remark?: string;
|
||||
}
|
||||
|
||||
export type CashIntakeChangeAction = 'create' | 'update' | 'delete' | 'import';
|
||||
|
||||
export interface CashIntakeChangeLog {
|
||||
id: string;
|
||||
at: string;
|
||||
by: string;
|
||||
action: CashIntakeChangeAction;
|
||||
summary: string;
|
||||
}
|
||||
|
||||
/** 唯一键 stationId + bizDate（业务字段仍用 bizDate；UI 称「登记日期」） */
|
||||
export interface StationCashIntakeDay {
|
||||
id: string;
|
||||
stationId: string;
|
||||
stationName: string;
|
||||
bizDate: string; // YYYY-MM-DD · 登记日期
|
||||
totalAmount: number;
|
||||
remark?: string;
|
||||
lines: StationCashIntakeLine[];
|
||||
updatedBy: string;
|
||||
updatedAt: string;
|
||||
changeLogs?: CashIntakeChangeLog[];
|
||||
}
|
||||
|
||||
export const CASH_INTAKE_STATIONS = [
|
||||
{ id: 'st-fs-nanhai', name: '佛山南海羚牛加氢站' },
|
||||
{ id: 'st-dp-dongpeng', name: '东鹏大道甲醇制氢一体站' },
|
||||
] as const;
|
||||
|
||||
export const DEFAULT_CASH_STATION_ID = 'st-fs-nanhai';
|
||||
|
||||
/** Make / 本地预览跳转 */
|
||||
export const PROTO_PATH_SPOT_CASH = '/prototypes/energy-spot-cash-intake';
|
||||
export const PROTO_PATH_STATION_DAILY = '/prototypes/energy-h2-station-daily';
|
||||
export const PROTO_PATH_ENERGY_BI = '/prototypes/energy-h2-bi-board';
|
||||
@@ -0,0 +1,385 @@
|
||||
.mobile-list-fullscreen-trigger {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
[data-mobile-fullscreen-list] {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.mobile-list-fullscreen-trigger {
|
||||
position: absolute;
|
||||
z-index: 4;
|
||||
top: 10px;
|
||||
right: 10px;
|
||||
display: inline-flex;
|
||||
width: auto;
|
||||
min-width: 124px;
|
||||
height: 32px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 6px;
|
||||
padding: 0 10px;
|
||||
border: 1px solid #dbe4f1;
|
||||
border-radius: 9px;
|
||||
background: #fff;
|
||||
color: #fff;
|
||||
background: #2563eb;
|
||||
border-color: #2563eb;
|
||||
box-shadow: 0 5px 14px rgb(37 99 235 / 20%);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.mobile-list-fullscreen-trigger.is-inline {
|
||||
position: relative;
|
||||
inset: auto;
|
||||
z-index: auto;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
.mobile-list-fullscreen-trigger__label {
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.mobile-list-fullscreen-trigger::before {
|
||||
position: absolute;
|
||||
inset: -6px;
|
||||
content: '';
|
||||
}
|
||||
|
||||
[data-mobile-fullscreen-list] > h2,
|
||||
[data-mobile-fullscreen-list] > .sd-section-head,
|
||||
[data-mobile-fullscreen-list] > .sd-panel__head-row,
|
||||
[data-mobile-fullscreen-list] > .ehb-sum-table-card__head,
|
||||
[data-mobile-fullscreen-list] > .ehb-mobile-detail-tabs-head,
|
||||
[data-mobile-fullscreen-list] > .ehb-daily-table-head {
|
||||
box-sizing: border-box;
|
||||
padding-inline-end: 112px !important;
|
||||
}
|
||||
|
||||
/* 复合标题区的 Tab 在第二行，只让第一行标题避让横屏按钮。 */
|
||||
[data-mobile-fullscreen-list] > .ehb-mobile-detail-tabs-head {
|
||||
padding-inline-end: 14px !important;
|
||||
}
|
||||
|
||||
[data-mobile-fullscreen-list] > .ehb-sum-table-card__head .ehb-sum-table-card__meta,
|
||||
[data-mobile-fullscreen-list] > .sd-section-head .sd-panel__meta,
|
||||
[data-mobile-fullscreen-list] > .sd-panel__head-row .sd-panel__meta {
|
||||
max-width: 100%;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
|
||||
[data-mobile-fullscreen-list]:fullscreen,
|
||||
[data-mobile-fullscreen-list].is-mobile-list-fullscreen,
|
||||
[data-mobile-fullscreen-list][data-mobile-fullscreen-active="true"] {
|
||||
box-sizing: border-box;
|
||||
z-index: 200;
|
||||
overflow: auto;
|
||||
padding: 14px;
|
||||
border-radius: 0;
|
||||
background: #f4f7fb;
|
||||
}
|
||||
|
||||
[data-mobile-fullscreen-list].is-mobile-list-fullscreen,
|
||||
[data-mobile-fullscreen-list][data-mobile-fullscreen-active="true"] {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
}
|
||||
|
||||
[data-mobile-fullscreen-list][data-mobile-fullscreen-active="true"] > .mobile-list-fullscreen-trigger,
|
||||
[data-mobile-fullscreen-list][data-mobile-fullscreen-active="true"] > * > .mobile-list-fullscreen-trigger {
|
||||
position: fixed !important;
|
||||
top: 10px !important;
|
||||
right: 10px !important;
|
||||
z-index: 260 !important;
|
||||
}
|
||||
|
||||
[data-mobile-fullscreen-list]:fullscreen .ehb-sum-table-wrap,
|
||||
[data-mobile-fullscreen-list]:fullscreen .ehb-table-wrap,
|
||||
[data-mobile-fullscreen-list]:fullscreen .sd-table-scroll,
|
||||
[data-mobile-fullscreen-list].is-mobile-list-fullscreen .ehb-sum-table-wrap,
|
||||
[data-mobile-fullscreen-list].is-mobile-list-fullscreen .ehb-table-wrap,
|
||||
[data-mobile-fullscreen-list].is-mobile-list-fullscreen .sd-table-scroll,
|
||||
[data-mobile-fullscreen-list][data-mobile-fullscreen-active="true"] .ehb-sum-table-wrap,
|
||||
[data-mobile-fullscreen-list][data-mobile-fullscreen-active="true"] .ehb-table-wrap,
|
||||
[data-mobile-fullscreen-list][data-mobile-fullscreen-active="true"] .sd-table-scroll {
|
||||
max-height: none;
|
||||
overflow: auto;
|
||||
background: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
/* 宽表只切换阅读布局：竖屏保持原方向并由表格横向滚动。 */
|
||||
[data-mobile-fullscreen-list][data-mobile-fullscreen-active="true"] {
|
||||
box-sizing: border-box;
|
||||
position: fixed !important;
|
||||
z-index: 200 !important;
|
||||
inset: 0 !important;
|
||||
overflow: auto !important;
|
||||
padding: 10px !important;
|
||||
border-radius: 0 !important;
|
||||
background: #f4f7fb !important;
|
||||
}
|
||||
|
||||
[data-mobile-fullscreen-list][data-mobile-fullscreen-active="true"] .mobile-list-fullscreen-trigger {
|
||||
position: fixed !important;
|
||||
z-index: 260 !important;
|
||||
top: 10px !important;
|
||||
right: 10px !important;
|
||||
display: inline-flex !important;
|
||||
width: auto;
|
||||
min-width: 92px;
|
||||
height: 32px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 6px;
|
||||
padding: 0 10px;
|
||||
border: 1px solid #dbe4f1;
|
||||
border-radius: 9px;
|
||||
background: #fff;
|
||||
color: #4f6f9f;
|
||||
}
|
||||
|
||||
[data-mobile-fullscreen-list][data-mobile-fullscreen-active="true"] .ehb-sum-table-wrap,
|
||||
[data-mobile-fullscreen-list][data-mobile-fullscreen-active="true"] .ehb-table-wrap,
|
||||
[data-mobile-fullscreen-list][data-mobile-fullscreen-active="true"] .sd-table-scroll {
|
||||
max-height: none !important;
|
||||
overflow: auto !important;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
[data-mobile-fullscreen-list][data-mobile-fullscreen-active="true"] table {
|
||||
width: max-content !important;
|
||||
min-width: 100% !important;
|
||||
}
|
||||
|
||||
[data-mobile-fullscreen-list][data-mobile-fullscreen-active="true"] table thead th {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 4;
|
||||
}
|
||||
|
||||
[data-mobile-fullscreen-list][data-mobile-fullscreen-active="true"] table th:first-child,
|
||||
[data-mobile-fullscreen-list][data-mobile-fullscreen-active="true"] table td:first-child {
|
||||
position: sticky;
|
||||
left: 0;
|
||||
z-index: 5;
|
||||
background: #fff;
|
||||
box-shadow: 5px 0 9px -9px #0f172a;
|
||||
}
|
||||
|
||||
[data-mobile-fullscreen-list][data-mobile-fullscreen-active="true"] table thead th:first-child {
|
||||
z-index: 7;
|
||||
background: #f7f9fc;
|
||||
}
|
||||
|
||||
/* 汇总表的第一列只是序号；继续冻结第二列站点名称，横向滚动时保留行身份。 */
|
||||
[data-mobile-fullscreen-list][data-mobile-fullscreen-active="true"] .ehb-sum-table th:first-child,
|
||||
[data-mobile-fullscreen-list][data-mobile-fullscreen-active="true"] .ehb-sum-table td:first-child {
|
||||
width: 42px;
|
||||
min-width: 42px;
|
||||
max-width: 42px;
|
||||
}
|
||||
|
||||
[data-mobile-fullscreen-list][data-mobile-fullscreen-active="true"] .ehb-sum-table th:nth-child(2),
|
||||
[data-mobile-fullscreen-list][data-mobile-fullscreen-active="true"] .ehb-sum-table td:nth-child(2) {
|
||||
position: sticky;
|
||||
left: 42px;
|
||||
z-index: 5;
|
||||
min-width: 190px;
|
||||
background: #fff;
|
||||
box-shadow: 7px 0 10px -10px #0f172a;
|
||||
}
|
||||
|
||||
[data-mobile-fullscreen-list][data-mobile-fullscreen-active="true"] .ehb-sum-table thead th:nth-child(2) {
|
||||
z-index: 7;
|
||||
background: #f7f9fc;
|
||||
}
|
||||
|
||||
[data-mobile-fullscreen-list][data-mobile-fullscreen-active="true"]::after {
|
||||
position: fixed;
|
||||
right: 10px;
|
||||
bottom: 10px;
|
||||
z-index: 250;
|
||||
padding: 5px 9px;
|
||||
border: 1px solid #dbe4f1;
|
||||
border-radius: 999px;
|
||||
background: rgb(255 255 255 / 92%);
|
||||
color: #64748b;
|
||||
content: '左右滑动查看更多列';
|
||||
font-size: 11px;
|
||||
pointer-events: none;
|
||||
box-shadow: 0 4px 12px rgb(15 23 42 / 8%);
|
||||
}
|
||||
|
||||
@media (max-width: 767px) and (orientation: portrait) {
|
||||
[data-mobile-fullscreen-list][data-mobile-fullscreen-active="true"],
|
||||
[data-mobile-fullscreen-list][data-mobile-fullscreen-active="true"].is-mobile-list-fallback {
|
||||
transform: none !important;
|
||||
transform-origin: initial !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* 下钻弹层最终移动端约束：本文件最后加载，避免旧版宽表规则反向撑开页面。 */
|
||||
@media (max-width: 767px) {
|
||||
.ehb-drill-modal--unified .ehb-modal-body {
|
||||
display: flex !important;
|
||||
flex-direction: column !important;
|
||||
width: 100% !important;
|
||||
min-width: 0 !important;
|
||||
padding: 12px !important;
|
||||
gap: 10px !important;
|
||||
overflow: hidden !important;
|
||||
}
|
||||
|
||||
.ehb-drill-modal--unified .ehb-modal-meta-bar {
|
||||
flex: 0 0 auto !important;
|
||||
width: 100% !important;
|
||||
min-width: 0 !important;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
|
||||
gap: 6px !important;
|
||||
overflow: visible !important;
|
||||
}
|
||||
|
||||
.ehb-drill-modal--unified .ehb-modal-meta-item {
|
||||
min-width: 0 !important;
|
||||
padding: 10px !important;
|
||||
}
|
||||
|
||||
.ehb-drill-modal--unified .ehb-real-drill-filter-summary,
|
||||
.ehb-drill-modal--unified .ehb-drill-filter-summary-row {
|
||||
display: flex !important;
|
||||
flex: 0 0 auto !important;
|
||||
width: 100% !important;
|
||||
min-width: 0 !important;
|
||||
}
|
||||
|
||||
.ehb-real-drill-primary-actions {
|
||||
display: grid !important;
|
||||
flex: 0 0 auto;
|
||||
grid-template-columns: minmax(0, 1fr) 132px;
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.ehb-real-drill-primary-actions .ehb-real-drill-filter-summary,
|
||||
.ehb-real-drill-primary-actions .mobile-list-fullscreen-trigger {
|
||||
position: static !important;
|
||||
width: 100% !important;
|
||||
min-width: 0 !important;
|
||||
height: 48px !important;
|
||||
border-radius: 12px !important;
|
||||
}
|
||||
|
||||
.ehb-real-drill-primary-actions .ehb-real-drill-filter-summary {
|
||||
display: grid !important;
|
||||
grid-template-columns: auto minmax(0, 1fr) auto;
|
||||
gap: 7px;
|
||||
}
|
||||
|
||||
.ehb-real-drill-primary-actions .ehb-real-drill-filter-summary strong {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.ehb-drill-modal--unified .ehb-real-drill-filter-summary {
|
||||
min-height: 48px !important;
|
||||
padding: 0 14px !important;
|
||||
border: 1px solid #d9e3f0 !important;
|
||||
border-radius: 12px !important;
|
||||
background: #fff !important;
|
||||
}
|
||||
|
||||
.ehb-drill-modal--unified .ehb-modal-table-wrap {
|
||||
flex: 1 1 auto !important;
|
||||
width: 100% !important;
|
||||
min-width: 0 !important;
|
||||
min-height: 0 !important;
|
||||
overflow: auto !important;
|
||||
overscroll-behavior: contain;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
|
||||
.ehb-drill-modal--unified .ehb-drill-filter-summary-row {
|
||||
display: grid !important;
|
||||
grid-template-columns: minmax(0, 1fr) auto !important;
|
||||
align-items: stretch !important;
|
||||
gap: 8px !important;
|
||||
}
|
||||
|
||||
.ehb-drill-modal--unified .ehb-drill-filter-summary-row .mobile-list-fullscreen-trigger {
|
||||
position: static !important;
|
||||
min-width: 124px !important;
|
||||
height: 48px !important;
|
||||
border-radius: 12px !important;
|
||||
}
|
||||
|
||||
.ehb-drill-usage-guide {
|
||||
display: grid !important;
|
||||
flex: 0 0 auto;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
width: 100%;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.ehb-drill-usage-guide > span {
|
||||
min-width: 0;
|
||||
padding: 7px 8px;
|
||||
border-radius: 8px;
|
||||
background: #eaf2ff;
|
||||
color: #52637b;
|
||||
font-size: 10px;
|
||||
line-height: 1.35;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.ehb-drill-usage-guide strong { color: #1f5fe0; }
|
||||
|
||||
.ehb-drill-modal--unified .ehb-modal-table tr[aria-expanded] > td:first-child {
|
||||
position: sticky !important;
|
||||
}
|
||||
|
||||
.ehb-drill-modal--unified .ehb-modal-table tr[aria-expanded] > td:first-child::after {
|
||||
display: inline-flex;
|
||||
margin-left: 8px;
|
||||
padding: 2px 6px;
|
||||
border-radius: 999px;
|
||||
background: #e8f1ff;
|
||||
color: #2563eb;
|
||||
content: '展开';
|
||||
font-size: 9px;
|
||||
font-weight: 700;
|
||||
white-space: nowrap;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.ehb-drill-modal--unified .ehb-modal-table tr[aria-expanded="true"] > td:first-child::after {
|
||||
background: #e7f8f1;
|
||||
color: #07875f;
|
||||
content: '收起';
|
||||
}
|
||||
}
|
||||
|
||||
html.ehb-landscape-session .ehb-drill-modal--unified .ehb-modal-body {
|
||||
width: 100% !important;
|
||||
min-width: 0 !important;
|
||||
overflow: hidden !important;
|
||||
}
|
||||
|
||||
html.ehb-landscape-session .ehb-drill-modal--unified .ehb-modal-meta-bar {
|
||||
width: 100% !important;
|
||||
min-width: 0 !important;
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
|
||||
}
|
||||
|
||||
html.ehb-landscape-session .ehb-drill-modal--unified .ehb-modal-table-wrap {
|
||||
flex: 1 1 auto !important;
|
||||
width: 100% !important;
|
||||
min-width: 0 !important;
|
||||
min-height: 0 !important;
|
||||
overflow: auto !important;
|
||||
}
|
||||
@@ -0,0 +1,13 @@
|
||||
import assert from 'node:assert/strict';
|
||||
import test from 'node:test';
|
||||
import { isPhoneUserAgent, phoneRotation } from './phone-viewport.js';
|
||||
test('仅手机 UA 在竖屏宽表模式旋转，不影响平板和桌面', () => {
|
||||
for (const ua of ['Mozilla/5.0 (iPhone; CPU iPhone OS 18_0 like Mac OS X)', 'Mozilla/5.0 (Linux; Android 14) Mobile Safari/537.36']) {
|
||||
assert.equal(isPhoneUserAgent(ua), true);
|
||||
assert.equal(phoneRotation(ua, 390, 844), true);
|
||||
assert.equal(phoneRotation(ua, 844, 390), false);
|
||||
}
|
||||
for (const ua of ['Mozilla/5.0 (iPad; CPU OS 18_0 like Mac OS X)', 'Mozilla/5.0 (Macintosh; Intel Mac OS X)', 'Mozilla/5.0 (Linux; Android 14) Safari/537.36', 'Mozilla/5.0 (Windows NT 10.0; Win64; x64)']) {
|
||||
assert.equal(phoneRotation(ua, 390, 844), false);
|
||||
}
|
||||
});
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user