Compare commits
80 Commits
cf8f7cf969
...
demo
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
6b75437423 | ||
|
|
a472e543ce | ||
|
|
0c258dd1a2 | ||
|
|
200172f0af | ||
|
|
a954fb90f6 | ||
|
|
2ea00a5383 | ||
|
|
cf138f67c0 | ||
|
|
e32b0b58b3 | ||
|
|
9d1e8c4d30 | ||
|
|
ba1e0e9f16 | ||
|
|
1b2ad68743 | ||
|
|
210db7f8ff | ||
|
|
1d9f4cb43d | ||
|
|
3ef0d4edfa | ||
|
|
31716c6547 | ||
|
|
335282a2c3 | ||
|
|
dfc32c4485 | ||
|
|
ceed067807 | ||
|
|
2f11afc25f | ||
|
|
9f781c766a | ||
|
|
8664317852 | ||
|
|
c3de4ebaf5 | ||
|
|
aa9a29fed8 | ||
|
|
a52a77f3a2 | ||
|
|
9012a955b8 | ||
|
|
caff78c5f3 | ||
|
|
f6f872d2ce | ||
|
|
dbefb90089 | ||
|
|
db568c1ebb | ||
|
|
ba6a38973d | ||
|
|
7aa0d961ce | ||
|
|
4f02a54d38 | ||
|
|
073496cd44 | ||
|
|
bea67b6710 | ||
|
|
d0984a430b | ||
|
|
b3a6beb26b | ||
|
|
0a7a9a096d | ||
|
|
dd03157804 | ||
|
|
694e9a207a | ||
|
|
fb89c9beed | ||
|
|
75f0aca5d1 | ||
|
|
8598aea445 | ||
|
|
25199b507c | ||
|
|
6a3a5ba319 | ||
|
|
0785c78382 | ||
|
|
afec75a1cc | ||
|
|
1d1f8901aa | ||
|
|
81305be2df | ||
|
|
64f47d5ad6 | ||
|
|
9398688829 | ||
|
|
48fa3bc73f | ||
|
|
1a5a1c1514 | ||
|
|
73080a605d | ||
|
|
6f7555a407 | ||
|
|
bcbeb64e28 | ||
|
|
6ee811c937 | ||
|
|
495f4bf44f | ||
|
|
ec3b079311 | ||
|
|
033af15814 | ||
|
|
253cc2f2c0 | ||
|
|
db5ca2e686 | ||
|
|
2e82a30893 | ||
|
|
9c005bebc8 | ||
|
|
82ee7f5480 | ||
|
|
4169e04a9c | ||
|
|
86d5bc8738 | ||
|
|
460c9906e1 | ||
|
|
569b5ea349 | ||
|
|
ebe46c6f73 | ||
|
|
32b297c731 | ||
|
|
9bf9bdd8ff | ||
|
|
188d2b105f | ||
|
|
26d59190c9 | ||
|
|
f3b795e8a9 | ||
|
|
71ff459111 | ||
|
|
4acf10ef79 | ||
|
|
820fde5547 | ||
|
|
d6c31dd2b6 | ||
|
|
8660c0d999 | ||
|
|
b4c4929dbb |
@@ -13,6 +13,7 @@ COPY package.json package-lock.json ./
|
||||
RUN npm ci --omit=dev
|
||||
COPY --from=builder /app/dist ./dist
|
||||
COPY src/server ./src/server
|
||||
COPY src/shared ./src/shared
|
||||
COPY tsconfig.json ./
|
||||
|
||||
EXPOSE 3001
|
||||
|
||||
@@ -5,10 +5,10 @@ services:
|
||||
image: harbor.lnh2e.com/lingniu-v1/ln-bi:main-1.0.0
|
||||
network_mode: host
|
||||
environment:
|
||||
DB_HOST: "192.168.130.111"
|
||||
DB_HOST: "47.101.148.99"
|
||||
DB_PORT: "3306"
|
||||
DB_USER: "linsset_01"
|
||||
DB_PASSWORD: "LN3456#&"
|
||||
DB_USER: "root"
|
||||
DB_PASSWORD: "LN#Passw0rd@2026"
|
||||
DB_NAME: "lingniu_prod"
|
||||
SERVER_PORT: "8111"
|
||||
EXTERNAL_API_BASE: "https://lnh2e.com"
|
||||
|
||||
BIN
docs/.DS_Store
vendored
Normal file
BIN
docs/.DS_Store
vendored
Normal file
Binary file not shown.
BIN
docs/superpowers/.DS_Store
vendored
Normal file
BIN
docs/superpowers/.DS_Store
vendored
Normal file
Binary file not shown.
753
docs/superpowers/plans/2026-03-27-three-modules.md
Normal file
753
docs/superpowers/plans/2026-03-27-three-modules.md
Normal file
@@ -0,0 +1,753 @@
|
||||
# Three Operations Modules Implementation Plan
|
||||
|
||||
> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.
|
||||
|
||||
**Goal:** Add department, region, and customer operations statistics sections to the dashboard, ported from lnoneos prototype with real MySQL data.
|
||||
|
||||
**Architecture:** All 3 new API endpoints aggregate from the existing `getVehicles()` cache (no new DB queries). A new macro-region mapping function converts province/city to 华东/华南/etc. The frontend adds 3 new collapsible sections below the existing asset summary table, each with desktop table + mobile card views. The existing vehicle list modal is extended with new filter params (manager, customer, isColdChain, isTrailer).
|
||||
|
||||
**Tech Stack:** Hono (backend), React + Tailwind CSS + Motion (frontend), TypeScript throughout.
|
||||
|
||||
**Reference:** lnoneos prototype at `/Users/kkfluous/Projects/ai-coding/lnoneos/src/App.tsx`
|
||||
|
||||
---
|
||||
|
||||
### Task 1: Backend — Macro-region mapping + vehicle type classification helpers
|
||||
|
||||
**Files:**
|
||||
- Modify: `src/server/routes/vehicles.ts` (add functions after line ~111)
|
||||
|
||||
- [ ] **Step 1: Add macro-region mapping function**
|
||||
|
||||
Add after `mapInventoryRegion` (line 111) in `src/server/routes/vehicles.ts`:
|
||||
|
||||
```typescript
|
||||
// Macro-region mapping: province/city -> 华东/华南/华北/华中/西南/西北/其他
|
||||
function mapMacroRegion(province: string | null, city: string | null): string {
|
||||
const prov = (province || '').trim();
|
||||
const c = (city || '').trim();
|
||||
const loc = prov + c;
|
||||
// 华东: 上海/江苏/浙江/安徽/福建/江西/山东
|
||||
if (/上海|江苏|浙江|安徽|福建|江西|山东|南京|杭州|合肥|济南|青岛|苏州|宁波|厦门|嘉兴|无锡/.test(loc)) return '华东';
|
||||
// 华南: 广东/广西/海南
|
||||
if (/广东|广西|海南|广州|深圳|佛山|东莞|珠海|惠州|中山|南宁/.test(loc)) return '华南';
|
||||
// 华北: 北京/天津/河北/山西/内蒙古
|
||||
if (/北京|天津|河北|山西|内蒙古|石家庄|太原|呼和浩特/.test(loc)) return '华北';
|
||||
// 华中: 河南/湖北/湖南
|
||||
if (/河南|湖北|湖南|郑州|武汉|长沙/.test(loc)) return '华中';
|
||||
// 西南: 重庆/四川/贵州/云南/西藏
|
||||
if (/重庆|四川|贵州|云南|西藏|成都|昆明|贵阳/.test(loc)) return '西南';
|
||||
// 西北: 陕西/甘肃/青海/宁夏/新疆
|
||||
if (/陕西|甘肃|青海|宁夏|新疆|西安|兰州|乌鲁木齐/.test(loc)) return '西北';
|
||||
return '其他';
|
||||
}
|
||||
|
||||
// Vehicle type classification for per-type counts
|
||||
type VehicleTypeCounts = { t4_5: number; t4_5c: number; t18: number; t49: number; trailer: number; other: number; total: number };
|
||||
|
||||
function classifyVehicleType(v: Vehicle): keyof Omit<VehicleTypeCounts, 'total'> {
|
||||
if (v.type === '4.5T' && !v.model.includes('冷链')) return 't4_5';
|
||||
if (v.type === '4.5T' && v.model.includes('冷链')) return 't4_5c';
|
||||
if (v.type === '18T') return 't18';
|
||||
if (v.type === '49T') return 't49';
|
||||
if (v.type === '挂车' || v.model.includes('挂车')) return 'trailer';
|
||||
return 'other';
|
||||
}
|
||||
|
||||
function countByType(vehicles: Vehicle[]): VehicleTypeCounts {
|
||||
const counts: VehicleTypeCounts = { t4_5: 0, t4_5c: 0, t18: 0, t49: 0, trailer: 0, other: 0, total: 0 };
|
||||
for (const v of vehicles) {
|
||||
counts[classifyVehicleType(v)]++;
|
||||
counts.total++;
|
||||
}
|
||||
return counts;
|
||||
}
|
||||
```
|
||||
|
||||
- [ ] **Step 2: Verify TypeScript compiles**
|
||||
|
||||
Run: `npx tsc --noEmit`
|
||||
Expected: no errors
|
||||
|
||||
- [ ] **Step 3: Commit**
|
||||
|
||||
```bash
|
||||
git add src/server/routes/vehicles.ts
|
||||
git commit -m "feat: add macro-region mapping and vehicle type classification helpers"
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### Task 2: Backend — Three new API endpoints
|
||||
|
||||
**Files:**
|
||||
- Modify: `src/server/routes/vehicles.ts` (add endpoints before the `/list` endpoint)
|
||||
|
||||
- [ ] **Step 1: Add `/dept-stats` endpoint**
|
||||
|
||||
Add before the `VEHICLE_TYPE_FILTERS` const (which is before `/list`) in `src/server/routes/vehicles.ts`:
|
||||
|
||||
```typescript
|
||||
// GET /api/vehicles/dept-stats
|
||||
app.get('/dept-stats', async (c) => {
|
||||
const vehicles = await getVehicles();
|
||||
// Only count operating vehicles for department stats (those with a customerManager)
|
||||
const withManager = vehicles.filter((v) => v.customerManager);
|
||||
|
||||
const deptMap = new Map<string, Map<string, Vehicle[]>>();
|
||||
for (const v of withManager) {
|
||||
const dept = v.departmentName || '未分配';
|
||||
const mgr = v.customerManager!;
|
||||
if (!deptMap.has(dept)) deptMap.set(dept, new Map());
|
||||
const mgrMap = deptMap.get(dept)!;
|
||||
if (!mgrMap.has(mgr)) mgrMap.set(mgr, []);
|
||||
mgrMap.get(mgr)!.push(v);
|
||||
}
|
||||
|
||||
const result = Array.from(deptMap.entries()).map(([department, mgrMap]) => {
|
||||
const allDeptVehicles = Array.from(mgrMap.values()).flat();
|
||||
const managers = Array.from(mgrMap.entries())
|
||||
.map(([manager, mvs]) => ({
|
||||
manager,
|
||||
department,
|
||||
...countByType(mvs),
|
||||
}))
|
||||
.sort((a, b) => b.total - a.total);
|
||||
|
||||
return {
|
||||
department,
|
||||
totalAssets: allDeptVehicles.length,
|
||||
operatingCount: allDeptVehicles.filter((v) => v.status === 'Operating').length,
|
||||
idleCount: allDeptVehicles.filter((v) => v.status !== 'Operating').length,
|
||||
managers,
|
||||
};
|
||||
}).sort((a, b) => b.totalAssets - a.totalAssets);
|
||||
|
||||
return c.json(result);
|
||||
});
|
||||
```
|
||||
|
||||
- [ ] **Step 2: Add `/region-stats` endpoint**
|
||||
|
||||
```typescript
|
||||
// GET /api/vehicles/region-stats
|
||||
app.get('/region-stats', async (c) => {
|
||||
const vehicles = await getVehicles();
|
||||
const operating = vehicles.filter((v) => v.status === 'Operating');
|
||||
|
||||
const regionMap = new Map<string, Vehicle[]>();
|
||||
for (const v of operating) {
|
||||
const region = mapMacroRegion(v.province, v.city);
|
||||
if (!regionMap.has(region)) regionMap.set(region, []);
|
||||
regionMap.get(region)!.push(v);
|
||||
}
|
||||
|
||||
const regionOrder = ['华东', '华南', '华北', '华中', '西南', '西北', '其他'];
|
||||
const result = regionOrder
|
||||
.filter((r) => regionMap.has(r))
|
||||
.map((region) => {
|
||||
const rv = regionMap.get(region)!;
|
||||
const customers = Array.from(new Set(rv.map((v) => v.customerName).filter(Boolean))) as string[];
|
||||
const typeBreakdown = ['4.5T', '18T', '49T'].map((type) => {
|
||||
const typeVehicles = rv.filter((v) => v.type === type);
|
||||
return {
|
||||
type,
|
||||
total: typeVehicles.length,
|
||||
operating: typeVehicles.filter((v) => v.status === 'Operating').length,
|
||||
inventory: typeVehicles.filter((v) => v.status === 'Inventory').length,
|
||||
customers: Array.from(new Set(typeVehicles.map((v) => v.customerName).filter(Boolean))) as string[],
|
||||
};
|
||||
}).filter((t) => t.total > 0);
|
||||
|
||||
return {
|
||||
region,
|
||||
totalAssets: rv.length,
|
||||
operatingCount: rv.filter((v) => v.status === 'Operating').length,
|
||||
inventoryCount: rv.filter((v) => v.status === 'Inventory').length,
|
||||
customers,
|
||||
typeBreakdown,
|
||||
};
|
||||
});
|
||||
|
||||
return c.json(result);
|
||||
});
|
||||
```
|
||||
|
||||
- [ ] **Step 3: Add `/customer-stats` endpoint**
|
||||
|
||||
```typescript
|
||||
// GET /api/vehicles/customer-stats
|
||||
app.get('/customer-stats', async (c) => {
|
||||
const vehicles = await getVehicles();
|
||||
const operating = vehicles.filter((v) => v.status === 'Operating' && v.customerName);
|
||||
|
||||
const custMap = new Map<string, Vehicle[]>();
|
||||
for (const v of operating) {
|
||||
const cust = v.customerName!;
|
||||
if (!custMap.has(cust)) custMap.set(cust, []);
|
||||
custMap.get(cust)!.push(v);
|
||||
}
|
||||
|
||||
const result = Array.from(custMap.entries())
|
||||
.map(([customer, cvs]) => {
|
||||
const first = cvs[0];
|
||||
return {
|
||||
customer,
|
||||
manager: first.customerManager || '',
|
||||
brand: first.brandLabel || '',
|
||||
department: first.departmentName || '',
|
||||
region: mapMacroRegion(first.province, first.city),
|
||||
city: first.city || '',
|
||||
...countByType(cvs),
|
||||
};
|
||||
})
|
||||
.sort((a, b) => b.total - a.total);
|
||||
|
||||
return c.json(result);
|
||||
});
|
||||
```
|
||||
|
||||
- [ ] **Step 4: Verify TypeScript compiles**
|
||||
|
||||
Run: `npx tsc --noEmit`
|
||||
Expected: no errors
|
||||
|
||||
- [ ] **Step 5: Commit**
|
||||
|
||||
```bash
|
||||
git add src/server/routes/vehicles.ts
|
||||
git commit -m "feat: add dept-stats, region-stats, customer-stats API endpoints"
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### Task 3: Backend — Extend `/list` with new filter params
|
||||
|
||||
**Files:**
|
||||
- Modify: `src/server/routes/vehicles.ts` (the `/list` endpoint)
|
||||
|
||||
- [ ] **Step 1: Add manager, customer, isColdChain, isTrailer filters**
|
||||
|
||||
In the `/list` endpoint, after the existing `category` filter block, add:
|
||||
|
||||
```typescript
|
||||
const { batch, model, location, status, category, vehicleType, manager, customer, isColdChain, isTrailer } = c.req.query();
|
||||
```
|
||||
|
||||
(Replace the existing destructure line.)
|
||||
|
||||
Then after the `if (category)` block, add:
|
||||
|
||||
```typescript
|
||||
if (manager) {
|
||||
filtered = filtered.filter((v) => v.customerManager === manager);
|
||||
}
|
||||
if (customer) {
|
||||
filtered = filtered.filter((v) => v.customerName === customer);
|
||||
}
|
||||
if (isColdChain !== undefined) {
|
||||
const wantCold = isColdChain === 'true';
|
||||
filtered = filtered.filter((v) => wantCold ? v.model.includes('冷链') : !v.model.includes('冷链'));
|
||||
}
|
||||
if (isTrailer !== undefined) {
|
||||
const wantTrailer = isTrailer === 'true';
|
||||
filtered = filtered.filter((v) => wantTrailer ? (v.type === '挂车' || v.model.includes('挂车')) : !(v.type === '挂车' || v.model.includes('挂车')));
|
||||
}
|
||||
```
|
||||
|
||||
- [ ] **Step 2: Verify TypeScript compiles and build passes**
|
||||
|
||||
Run: `npx tsc --noEmit && npx vite build`
|
||||
Expected: no errors, successful build
|
||||
|
||||
- [ ] **Step 3: Commit**
|
||||
|
||||
```bash
|
||||
git add src/server/routes/vehicles.ts
|
||||
git commit -m "feat: extend /list endpoint with manager, customer, coldchain, trailer filters"
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### Task 4: Frontend — Types and API client
|
||||
|
||||
**Files:**
|
||||
- Modify: `src/types.ts`
|
||||
- Modify: `src/api.ts`
|
||||
|
||||
- [ ] **Step 1: Add new interfaces to `src/types.ts`**
|
||||
|
||||
Append at end of file:
|
||||
|
||||
```typescript
|
||||
export interface ManagerStats {
|
||||
manager: string;
|
||||
department: string;
|
||||
t4_5: number;
|
||||
t4_5c: number;
|
||||
t18: number;
|
||||
t49: number;
|
||||
trailer: number;
|
||||
other: number;
|
||||
total: number;
|
||||
}
|
||||
|
||||
export interface DeptGroup {
|
||||
department: string;
|
||||
totalAssets: number;
|
||||
operatingCount: number;
|
||||
idleCount: number;
|
||||
managers: ManagerStats[];
|
||||
}
|
||||
|
||||
export interface RegionGroup {
|
||||
region: string;
|
||||
totalAssets: number;
|
||||
operatingCount: number;
|
||||
inventoryCount: number;
|
||||
customers: string[];
|
||||
typeBreakdown: { type: string; total: number; operating: number; inventory: number; customers: string[] }[];
|
||||
}
|
||||
|
||||
export interface CustomerStats {
|
||||
customer: string;
|
||||
manager: string;
|
||||
brand: string;
|
||||
department: string;
|
||||
region: string;
|
||||
city: string;
|
||||
t4_5: number;
|
||||
t4_5c: number;
|
||||
t18: number;
|
||||
t49: number;
|
||||
trailer: number;
|
||||
other: number;
|
||||
total: number;
|
||||
}
|
||||
```
|
||||
|
||||
- [ ] **Step 2: Add API functions to `src/api.ts`**
|
||||
|
||||
Add imports at top:
|
||||
|
||||
```typescript
|
||||
import type {
|
||||
SummaryData,
|
||||
TypeSummary,
|
||||
VehicleListItem,
|
||||
DeptGroup,
|
||||
RegionGroup,
|
||||
CustomerStats,
|
||||
} from './types';
|
||||
```
|
||||
|
||||
Add after `fetchVehicleList`:
|
||||
|
||||
```typescript
|
||||
export async function fetchDeptStats(): Promise<DeptGroup[]> {
|
||||
return fetchJson<DeptGroup[]>(`${BASE}/dept-stats`);
|
||||
}
|
||||
|
||||
export async function fetchRegionStats(): Promise<RegionGroup[]> {
|
||||
return fetchJson<RegionGroup[]>(`${BASE}/region-stats`);
|
||||
}
|
||||
|
||||
export async function fetchCustomerStats(): Promise<CustomerStats[]> {
|
||||
return fetchJson<CustomerStats[]>(`${BASE}/customer-stats`);
|
||||
}
|
||||
```
|
||||
|
||||
Also update `fetchVehicleList` params type to include new filters:
|
||||
|
||||
```typescript
|
||||
export async function fetchVehicleList(params: {
|
||||
batch?: string;
|
||||
model?: string;
|
||||
location?: string;
|
||||
status?: string;
|
||||
category?: string;
|
||||
vehicleType?: string;
|
||||
manager?: string;
|
||||
customer?: string;
|
||||
isColdChain?: string;
|
||||
isTrailer?: string;
|
||||
}): Promise<VehicleListItem[]> {
|
||||
const query = new URLSearchParams();
|
||||
if (params.batch) query.set('batch', params.batch);
|
||||
if (params.model) query.set('model', params.model);
|
||||
if (params.location) query.set('location', params.location);
|
||||
if (params.status) query.set('status', params.status);
|
||||
if (params.category) query.set('category', params.category);
|
||||
if (params.vehicleType) query.set('vehicleType', params.vehicleType);
|
||||
if (params.manager) query.set('manager', params.manager);
|
||||
if (params.customer) query.set('customer', params.customer);
|
||||
if (params.isColdChain) query.set('isColdChain', params.isColdChain);
|
||||
if (params.isTrailer) query.set('isTrailer', params.isTrailer);
|
||||
return fetchJson<VehicleListItem[]>(`${BASE}/list?${query.toString()}`);
|
||||
}
|
||||
```
|
||||
|
||||
- [ ] **Step 3: Verify TypeScript compiles**
|
||||
|
||||
Run: `npx tsc --noEmit`
|
||||
Expected: no errors
|
||||
|
||||
- [ ] **Step 4: Commit**
|
||||
|
||||
```bash
|
||||
git add src/types.ts src/api.ts
|
||||
git commit -m "feat: add frontend types and API client for dept/region/customer stats"
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### Task 5: Frontend — Extend App.tsx state, data loading, imports, and showPlateNumbers
|
||||
|
||||
**Files:**
|
||||
- Modify: `src/App.tsx`
|
||||
|
||||
- [ ] **Step 1: Update imports**
|
||||
|
||||
Replace the existing import lines at top of `src/App.tsx`:
|
||||
|
||||
```typescript
|
||||
import {
|
||||
Truck,
|
||||
Warehouse,
|
||||
Activity,
|
||||
PlusCircle,
|
||||
MinusCircle,
|
||||
History,
|
||||
ChevronDown,
|
||||
ChevronRight,
|
||||
Info,
|
||||
Loader2,
|
||||
Search,
|
||||
Filter,
|
||||
ArrowRightLeft,
|
||||
} from 'lucide-react';
|
||||
```
|
||||
|
||||
Update type imports:
|
||||
|
||||
```typescript
|
||||
import type { SummaryData, TypeSummary, VehicleListItem, DeptGroup, RegionGroup, CustomerStats } from './types';
|
||||
import { fetchSummary, fetchByType, fetchVehicleList, fetchWeeklyDetail, fetchDeptStats, fetchRegionStats, fetchCustomerStats } from './api';
|
||||
```
|
||||
|
||||
- [ ] **Step 2: Add new state variables**
|
||||
|
||||
After the existing state declarations (after `const [modalLoading, setModalLoading] = useState(false);`), add:
|
||||
|
||||
```typescript
|
||||
// Dept/Region/Customer data
|
||||
const [deptData, setDeptData] = useState<DeptGroup[]>([]);
|
||||
const [regionData, setRegionData] = useState<RegionGroup[]>([]);
|
||||
const [customerData, setCustomerData] = useState<CustomerStats[]>([]);
|
||||
|
||||
// Dept section state
|
||||
const [deptViewMode, setDeptViewMode] = useState<'department' | 'manager'>('department');
|
||||
const [expandedDepts, setExpandedDepts] = useState<Set<string>>(new Set());
|
||||
const [expandedManagerDetails, setExpandedManagerDetails] = useState<Set<string>>(new Set());
|
||||
const [selectedManager, setSelectedManager] = useState<string>('All');
|
||||
|
||||
// Region section state
|
||||
const [expandedRegions, setExpandedRegions] = useState<Set<string>>(new Set());
|
||||
const [regionFilters, setRegionFilters] = useState({ region: '', city: '', customer: '' });
|
||||
const [isRegionFilterOpen, setIsRegionFilterOpen] = useState(false);
|
||||
|
||||
// Customer section state
|
||||
const [expandedCustomers, setExpandedCustomers] = useState<Set<string>>(new Set());
|
||||
const [customerFilters, setCustomerFilters] = useState({ customer: '', brand: '', department: '', manager: '', region: '' });
|
||||
const [isCustomerFilterOpen, setIsCustomerFilterOpen] = useState(false);
|
||||
```
|
||||
|
||||
- [ ] **Step 3: Update loadData to fetch all 3 new endpoints**
|
||||
|
||||
Update the `loadData` callback:
|
||||
|
||||
```typescript
|
||||
const loadData = useCallback(async () => {
|
||||
try {
|
||||
setLoading(true);
|
||||
setError(null);
|
||||
const [s, byType, dept, region, cust] = await Promise.all([
|
||||
fetchSummary(),
|
||||
fetchByType(),
|
||||
fetchDeptStats(),
|
||||
fetchRegionStats(),
|
||||
fetchCustomerStats(),
|
||||
]);
|
||||
setSummary(s);
|
||||
setProcessedData(byType);
|
||||
setDeptData(dept);
|
||||
setRegionData(region);
|
||||
setCustomerData(cust);
|
||||
setLastUpdate(new Date().toLocaleString('zh-CN'));
|
||||
} catch (e) {
|
||||
setError(e instanceof Error ? e.message : '数据加载失败');
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}, []);
|
||||
```
|
||||
|
||||
- [ ] **Step 4: Extend showPlateNumbers type**
|
||||
|
||||
Update the showPlateNumbers state type:
|
||||
|
||||
```typescript
|
||||
const [showPlateNumbers, setShowPlateNumbers] = useState<{
|
||||
batch: string;
|
||||
model: string;
|
||||
location: string;
|
||||
category?: 'Inventory' | 'Pending' | 'Delivered' | 'Returned' | 'Replaced' | 'Operating';
|
||||
vehicleType?: string;
|
||||
manager?: string;
|
||||
customer?: string;
|
||||
isColdChain?: boolean;
|
||||
isTrailer?: boolean;
|
||||
} | null>(null);
|
||||
```
|
||||
|
||||
- [ ] **Step 5: Update modal loading to pass new filter params**
|
||||
|
||||
In the `useEffect` for modal loading, update the params block (the "Normal vehicle list" section):
|
||||
|
||||
```typescript
|
||||
// Normal vehicle list
|
||||
setModalWeeklyDetail([]);
|
||||
const params: Record<string, string> = {};
|
||||
if (showPlateNumbers.vehicleType) params.vehicleType = showPlateNumbers.vehicleType;
|
||||
if (showPlateNumbers.batch !== 'All') params.batch = showPlateNumbers.batch;
|
||||
if (showPlateNumbers.model !== 'All') params.model = showPlateNumbers.model;
|
||||
if (showPlateNumbers.location !== 'All') params.location = showPlateNumbers.location;
|
||||
if (cat === 'Inventory') params.status = 'Inventory';
|
||||
if (cat === 'Operating') params.category = 'Operating';
|
||||
if (showPlateNumbers.manager) params.manager = showPlateNumbers.manager;
|
||||
if (showPlateNumbers.customer) params.customer = showPlateNumbers.customer;
|
||||
if (showPlateNumbers.isColdChain !== undefined) params.isColdChain = String(showPlateNumbers.isColdChain);
|
||||
if (showPlateNumbers.isTrailer !== undefined) params.isTrailer = String(showPlateNumbers.isTrailer);
|
||||
```
|
||||
|
||||
- [ ] **Step 6: Add toggle helpers and derived data**
|
||||
|
||||
After the existing `toggleModel` function, add:
|
||||
|
||||
```typescript
|
||||
const toggleDept = (dept: string) => {
|
||||
const newSet = new Set(expandedDepts);
|
||||
if (newSet.has(dept)) newSet.delete(dept);
|
||||
else newSet.add(dept);
|
||||
setExpandedDepts(newSet);
|
||||
};
|
||||
|
||||
const toggleManagerDetails = (manager: string) => {
|
||||
const newSet = new Set(expandedManagerDetails);
|
||||
if (newSet.has(manager)) newSet.delete(manager);
|
||||
else newSet.add(manager);
|
||||
setExpandedManagerDetails(newSet);
|
||||
};
|
||||
|
||||
const toggleRegion = (region: string) => {
|
||||
const newSet = new Set(expandedRegions);
|
||||
if (newSet.has(region)) newSet.delete(region);
|
||||
else newSet.add(region);
|
||||
setExpandedRegions(newSet);
|
||||
};
|
||||
|
||||
const toggleCustomer = (customer: string) => {
|
||||
const newSet = new Set(expandedCustomers);
|
||||
if (newSet.has(customer)) newSet.delete(customer);
|
||||
else newSet.add(customer);
|
||||
setExpandedCustomers(newSet);
|
||||
};
|
||||
|
||||
// Derived data for dept section
|
||||
const allManagersList = deptData.flatMap((d) => d.managers.map((m) => m.manager)).filter((v, i, a) => a.indexOf(v) === i).sort();
|
||||
const managerStats = deptData
|
||||
.flatMap((d) => d.managers)
|
||||
.filter((m) => selectedManager === 'All' || m.manager === selectedManager)
|
||||
.sort((a, b) => b.total - a.total);
|
||||
|
||||
// Derived data for customer section
|
||||
const filteredCustomerStats = customerData.filter((s) => {
|
||||
const mc = !customerFilters.customer || s.customer.toLowerCase().includes(customerFilters.customer.toLowerCase());
|
||||
const mb = !customerFilters.brand || s.brand === customerFilters.brand;
|
||||
const md = !customerFilters.department || s.department === customerFilters.department;
|
||||
const mm = !customerFilters.manager || s.manager.toLowerCase().includes(customerFilters.manager.toLowerCase());
|
||||
const mr = !customerFilters.region || s.region === customerFilters.region;
|
||||
return mc && mb && md && mm && mr;
|
||||
});
|
||||
const uniqueBrands = Array.from(new Set(customerData.map((s) => s.brand).filter(Boolean)));
|
||||
const uniqueDepts = Array.from(new Set(customerData.map((s) => s.department).filter(Boolean)));
|
||||
const uniqueRegions = Array.from(new Set(customerData.map((s) => s.region)));
|
||||
const uniqueCities = Array.from(new Set(customerData.map((s) => s.city).filter(Boolean)));
|
||||
|
||||
// Derived data for region section
|
||||
const filteredRegionData = regionData.filter((r) => !regionFilters.region || r.region === regionFilters.region);
|
||||
```
|
||||
|
||||
- [ ] **Step 7: Verify TypeScript compiles**
|
||||
|
||||
Run: `npx tsc --noEmit`
|
||||
Expected: no errors
|
||||
|
||||
- [ ] **Step 8: Commit**
|
||||
|
||||
```bash
|
||||
git add src/App.tsx
|
||||
git commit -m "feat: add state, data loading, and helpers for 3 new modules"
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### Task 6: Frontend — Department Operations UI
|
||||
|
||||
**Files:**
|
||||
- Modify: `src/App.tsx` (add section after the asset summary table's closing `</div>`, before the Plate Number Modal)
|
||||
|
||||
- [ ] **Step 1: Add the department operations section**
|
||||
|
||||
Insert the department operations section JSX. Reference: lnoneos lines 1362-1880. This section goes right after the closing `</div>` of the asset summary table (`bg-white rounded-sm border...`) and before `{/* Plate Number Modal */}`.
|
||||
|
||||
The section includes:
|
||||
1. Header with title "部门运营统计"
|
||||
2. Dark summary bar (总资产/运营中/闲置中 — skip 平均出勤)
|
||||
3. Toggle buttons (按部门 / 按业务员) + manager filter dropdown
|
||||
4. Desktop table view (`hidden lg:block`)
|
||||
- Department mode: department rows expandable to show manager cards with 6 vehicle type cells
|
||||
- Manager mode: flat manager rows expandable to show 6 vehicle type cells
|
||||
5. Mobile card view (`lg:hidden`)
|
||||
|
||||
Port the JSX from lnoneos lines 1362-1880, replacing:
|
||||
- `MOCK_DEPT_STATS` → `deptData`
|
||||
- `DEPT_TOTALS.total` → `deptData.reduce((s, d) => s + d.totalAssets, 0)`
|
||||
- `allManagersList` / `managerStats` / `deptViewMode` / `expandedDepts` / `expandedManagerDetails` / `selectedManager` → already defined in Task 5
|
||||
- `setShowPlateNumbers` calls: keep the same structure but remove `source` field (not needed in ln-bi)
|
||||
- Remove `ArrowRightLeft` icon usage in toggle buttons — replace with simple text button
|
||||
- All `rounded-2xl` → `rounded-sm` to match ln-bi style
|
||||
- All `shadow-sm` stay as is
|
||||
|
||||
The `setShowPlateNumbers` calls from lnoneos use `manager`, `type`, `isColdChain`, `isTrailer` fields which we added to the state type in Task 5.
|
||||
|
||||
- [ ] **Step 2: Verify TypeScript compiles and build passes**
|
||||
|
||||
Run: `npx tsc --noEmit && npx vite build`
|
||||
Expected: no errors, successful build
|
||||
|
||||
- [ ] **Step 3: Commit**
|
||||
|
||||
```bash
|
||||
git add src/App.tsx
|
||||
git commit -m "feat: add department operations statistics section"
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### Task 7: Frontend — Region Operations UI
|
||||
|
||||
**Files:**
|
||||
- Modify: `src/App.tsx` (add section after department section, before Plate Number Modal)
|
||||
|
||||
- [ ] **Step 1: Add the region operations section**
|
||||
|
||||
Reference: lnoneos lines 1882-2174. Insert after the department section.
|
||||
|
||||
The section includes:
|
||||
1. Slate-themed header with "区域运营统计" + filter button
|
||||
2. Filter popover (客户搜索 / 区域下拉 / 城市下拉)
|
||||
3. Desktop table: expandable region rows → vehicle type sub-rows
|
||||
4. Mobile cards: expandable region cards with type breakdown
|
||||
|
||||
Port the JSX from lnoneos, replacing:
|
||||
- `MOCK_CUSTOMER_STATS` region-based filtering → use `filteredRegionData` (from Task 5)
|
||||
- Region stats aggregation in lnoneos used mock data with `Math.floor(totalAssets * 0.8)` for operating — use real `r.operatingCount` and `r.inventoryCount`
|
||||
- Type breakdown: use `r.typeBreakdown` array from API
|
||||
- `uniqueRegions` / `uniqueCities` → already defined in Task 5
|
||||
- `setShowPlateNumbers` calls: use `vehicleType` field for type filtering instead of lnoneos's `type` field
|
||||
- `rounded-2xl` → `rounded-sm`
|
||||
- Filter popover for cities: derive from `regionData` (all unique cities from customers)
|
||||
|
||||
Note: The region filter's city dropdown needs city data. Add to Task 5's derived data if not already there. The regionData from API contains customer names but not cities. For the city filter, we can derive from customerData filtered by region.
|
||||
|
||||
- [ ] **Step 2: Verify TypeScript compiles and build passes**
|
||||
|
||||
Run: `npx tsc --noEmit && npx vite build`
|
||||
Expected: no errors, successful build
|
||||
|
||||
- [ ] **Step 3: Commit**
|
||||
|
||||
```bash
|
||||
git add src/App.tsx
|
||||
git commit -m "feat: add region operations statistics section"
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### Task 8: Frontend — Customer Operations UI
|
||||
|
||||
**Files:**
|
||||
- Modify: `src/App.tsx` (add section after region section, before Plate Number Modal)
|
||||
|
||||
- [ ] **Step 1: Add the customer operations section**
|
||||
|
||||
Reference: lnoneos lines 2176-2496. Insert after the region section.
|
||||
|
||||
The section includes:
|
||||
1. Emerald-themed header with "客户运营统计" + filter button
|
||||
2. Filter popover (客户名搜索 / 业务员搜索 / 品牌下拉 / 部门下拉 / 区域下拉)
|
||||
3. Desktop table: customer rows with 6 vehicle type columns + total, expandable detail cards
|
||||
4. Mobile cards: customer cards with expandable vehicle type grid
|
||||
|
||||
Port the JSX from lnoneos, replacing:
|
||||
- `MOCK_CUSTOMER_STATS` → `filteredCustomerStats` (from Task 5)
|
||||
- `DEPT_TOTALS.total` → `customerData.reduce((s, c) => s + c.total, 0)` for asset ratio
|
||||
- `setShowPlateNumbers` calls: use `vehicleType` + `customer` fields
|
||||
- `uniqueBrands` / `uniqueDepts` / `uniqueRegions` → already defined in Task 5
|
||||
- `rounded-2xl` → `rounded-sm`
|
||||
|
||||
- [ ] **Step 2: Verify TypeScript compiles and build passes**
|
||||
|
||||
Run: `npx tsc --noEmit && npx vite build`
|
||||
Expected: no errors, successful build
|
||||
|
||||
- [ ] **Step 3: Commit**
|
||||
|
||||
```bash
|
||||
git add src/App.tsx
|
||||
git commit -m "feat: add customer operations statistics section"
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### Task 9: Final verification and build
|
||||
|
||||
**Files:** All modified files
|
||||
|
||||
- [ ] **Step 1: Full TypeScript check**
|
||||
|
||||
Run: `npx tsc --noEmit`
|
||||
Expected: no errors
|
||||
|
||||
- [ ] **Step 2: Production build**
|
||||
|
||||
Run: `npx vite build`
|
||||
Expected: successful build with no warnings
|
||||
|
||||
- [ ] **Step 3: Verify all sections render**
|
||||
|
||||
Run: `npm run dev` and check:
|
||||
- Department section loads with real data
|
||||
- Region section loads with real data
|
||||
- Customer section loads with real data
|
||||
- Filter popovers work
|
||||
- Expand/collapse works
|
||||
- Click-through to plate number modal works
|
||||
|
||||
- [ ] **Step 4: Final commit if any fixes needed**
|
||||
|
||||
```bash
|
||||
git add -A
|
||||
git commit -m "fix: address any issues from final review"
|
||||
```
|
||||
926
docs/superpowers/plans/2026-04-02-mileage-backend-refactor.md
Normal file
926
docs/superpowers/plans/2026-04-02-mileage-backend-refactor.md
Normal file
@@ -0,0 +1,926 @@
|
||||
# Mileage Backend Refactor Implementation Plan
|
||||
|
||||
> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.
|
||||
|
||||
**Goal:** Refactor `src/server/routes/mileage.ts` (569 lines) into well-typed, modular files with clear responsibilities, eliminating duplicate logic and `as any` casts.
|
||||
|
||||
**Architecture:** Split the monolithic route file into: shared types, a reusable vehicle-info query module, a monitoring cache module, and focused route handlers. The API contract (request/response shapes) stays identical — this is a pure internal refactor with zero frontend changes.
|
||||
|
||||
**Tech Stack:** Hono, mysql2/promise, TypeScript strict types
|
||||
|
||||
---
|
||||
|
||||
## File Structure
|
||||
|
||||
| File | Responsibility |
|
||||
|------|---------------|
|
||||
| `src/server/routes/mileage/types.ts` | All interfaces for mileage domain (cache, vehicles, filters, API responses) |
|
||||
| `src/server/routes/mileage/vehicle-info.ts` | Shared SQL + helper to build plate→info Map from `lingniu_prod` |
|
||||
| `src/server/routes/mileage/cache.ts` | Monitoring cache: refresh logic, data merging, filter precomputation, target mapping |
|
||||
| `src/server/routes/mileage/monitoring.ts` | `GET /monitoring` route handler |
|
||||
| `src/server/routes/mileage/targets.ts` | `GET /targets`, `GET /target/:id/vehicles` route handlers |
|
||||
| `src/server/routes/mileage/trend.ts` | `GET /trend` route handler |
|
||||
| `src/server/routes/mileage/index.ts` | Hono app assembly: imports routes, starts cache timer, exports app |
|
||||
|
||||
After refactor, delete: `src/server/routes/mileage.ts` (the old monolith).
|
||||
|
||||
## Constraints
|
||||
|
||||
- **Zero API changes** — all request params and response JSON shapes must remain identical
|
||||
- **Zero frontend changes** — `src/modules/mileage/api.ts` and `types.ts` stay untouched
|
||||
- **Preserve all existing behavior** including cache refresh interval, date queries, filter logic
|
||||
|
||||
---
|
||||
|
||||
### Task 1: Create shared types
|
||||
|
||||
**Files:**
|
||||
- Create: `src/server/routes/mileage/types.ts`
|
||||
|
||||
- [ ] **Step 1: Create the types file**
|
||||
|
||||
```typescript
|
||||
// src/server/routes/mileage/types.ts
|
||||
|
||||
/** 缓存中的单辆车数据 */
|
||||
export interface CachedVehicle {
|
||||
plate: string;
|
||||
vin: string;
|
||||
dailyKm: number;
|
||||
totalKm: number | null;
|
||||
source: string;
|
||||
isOnline: boolean;
|
||||
isDataSynced: boolean;
|
||||
customer: string | null;
|
||||
department: string | null;
|
||||
manager: string | null;
|
||||
rentStatus: string | null;
|
||||
entity: string | null;
|
||||
project: string | null;
|
||||
yesterdayKm: number;
|
||||
}
|
||||
|
||||
/** 车牌前缀统计 */
|
||||
export interface PlatePrefix {
|
||||
prefix: string;
|
||||
count: number;
|
||||
}
|
||||
|
||||
/** 筛选选项(前端下拉) */
|
||||
export interface MonitoringFilters {
|
||||
departments: string[];
|
||||
customers: string[];
|
||||
plates: string[];
|
||||
projects: string[];
|
||||
entities: string[];
|
||||
rentStatuses: string[];
|
||||
platePrefixes: PlatePrefix[];
|
||||
targetNames: string[];
|
||||
}
|
||||
|
||||
/** 监控缓存 */
|
||||
export interface MonitoringCache {
|
||||
vehicles: CachedVehicle[];
|
||||
stats: { totalToday: number; totalAll: number; vehicleCount: number };
|
||||
filters: MonitoringFilters;
|
||||
targetPlatesMap: Map<string, Set<string>>;
|
||||
updatedAt: string;
|
||||
}
|
||||
|
||||
/** /monitoring 响应中的统计 */
|
||||
export interface MonitoringStats {
|
||||
totalToday: number;
|
||||
totalAll: number;
|
||||
vehicleCount: number;
|
||||
yesterdayTotal: number;
|
||||
}
|
||||
|
||||
/** /monitoring 完整响应 */
|
||||
export interface MonitoringResponse {
|
||||
vehicles: CachedVehicle[];
|
||||
stats: MonitoringStats;
|
||||
filters: MonitoringFilters;
|
||||
total: number;
|
||||
page: number;
|
||||
totalPages: number;
|
||||
updatedAt: string;
|
||||
}
|
||||
|
||||
/** 车辆关联信息(从 lingniu_prod 查出的原始行) */
|
||||
export interface VehicleInfoRow {
|
||||
plate: string;
|
||||
customer: string | null;
|
||||
department: string | null;
|
||||
manager: string | null;
|
||||
rent_status: string | null;
|
||||
entity: string | null;
|
||||
project: string | null;
|
||||
}
|
||||
```
|
||||
|
||||
- [ ] **Step 2: Verify TypeScript compiles**
|
||||
|
||||
Run: `npx tsc --noEmit`
|
||||
Expected: no errors (new file has no imports/consumers yet)
|
||||
|
||||
- [ ] **Step 3: Commit**
|
||||
|
||||
```bash
|
||||
git add src/server/routes/mileage/types.ts
|
||||
git commit -m "refactor: extract mileage shared types"
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### Task 2: Extract vehicle-info query module
|
||||
|
||||
**Files:**
|
||||
- Create: `src/server/routes/mileage/vehicle-info.ts`
|
||||
|
||||
- [ ] **Step 1: Create the vehicle-info module**
|
||||
|
||||
This extracts the `VEHICLE_INFO_SQL` constant and a helper function to build the info Map. Both the cache builder and the `/target/:id/vehicles` route reuse this.
|
||||
|
||||
```typescript
|
||||
// src/server/routes/mileage/vehicle-info.ts
|
||||
import pool from '../../db.js';
|
||||
import type { VehicleInfoRow } from './types.js';
|
||||
|
||||
/** 车辆关联信息 SQL(客户名、部门、经理、租赁状态、主体、项目) */
|
||||
export const VEHICLE_INFO_SQL = `SELECT
|
||||
truck.plate_number AS plate,
|
||||
cus.customer_name AS customer,
|
||||
dep.dep_name AS department,
|
||||
u.user_name AS manager,
|
||||
dic_status.dic_name AS rent_status,
|
||||
org_truck.org_name AS entity,
|
||||
c.project_name AS project
|
||||
FROM tab_truck truck
|
||||
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_user u ON u.id = c.bd AND u.is_deleted = 0
|
||||
LEFT JOIN tab_department dep ON dep.id = u.dep_id AND dep.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_org org_truck ON org_truck.id = truck.org_id AND org_truck.is_deleted = 0
|
||||
WHERE truck.is_deleted = 0 AND truck.is_operation = 1`;
|
||||
|
||||
/** 查询所有车辆关联信息,返回 plate→info 的 Map */
|
||||
export async function fetchVehicleInfoMap(): Promise<Map<string, VehicleInfoRow>> {
|
||||
const [rows] = await pool.execute(VEHICLE_INFO_SQL) as [VehicleInfoRow[], unknown];
|
||||
const map = new Map<string, VehicleInfoRow>();
|
||||
for (const row of rows) {
|
||||
map.set(row.plate, row);
|
||||
}
|
||||
return map;
|
||||
}
|
||||
|
||||
/** 查询指定车牌的关联信息 */
|
||||
export async function fetchVehicleInfoByPlates(plates: string[]): Promise<Map<string, VehicleInfoRow>> {
|
||||
if (plates.length === 0) return new Map();
|
||||
const [rows] = await pool.execute(
|
||||
`${VEHICLE_INFO_SQL} AND truck.plate_number IN (${plates.map(() => '?').join(',')})`,
|
||||
plates
|
||||
) as [VehicleInfoRow[], unknown];
|
||||
const map = new Map<string, VehicleInfoRow>();
|
||||
for (const row of rows) {
|
||||
map.set(row.plate, row);
|
||||
}
|
||||
return map;
|
||||
}
|
||||
```
|
||||
|
||||
- [ ] **Step 2: Verify TypeScript compiles**
|
||||
|
||||
Run: `npx tsc --noEmit`
|
||||
Expected: no errors
|
||||
|
||||
- [ ] **Step 3: Commit**
|
||||
|
||||
```bash
|
||||
git add src/server/routes/mileage/vehicle-info.ts
|
||||
git commit -m "refactor: extract vehicle-info query module"
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### Task 3: Extract monitoring cache module
|
||||
|
||||
**Files:**
|
||||
- Create: `src/server/routes/mileage/cache.ts`
|
||||
|
||||
- [ ] **Step 1: Create the cache module**
|
||||
|
||||
This contains the cache singleton, refresh logic, and the `queryDateMileage` function. Both used to live in the monolith.
|
||||
|
||||
```typescript
|
||||
// src/server/routes/mileage/cache.ts
|
||||
import pool from '../../db.js';
|
||||
import mileagePool from '../../mileage-db.js';
|
||||
import { fetchVehicleInfoMap } from './vehicle-info.js';
|
||||
import type { CachedVehicle, MonitoringCache, MonitoringFilters, PlatePrefix } from './types.js';
|
||||
|
||||
let monitoringCache: MonitoringCache | null = null;
|
||||
|
||||
export function getCache(): MonitoringCache | null {
|
||||
return monitoringCache;
|
||||
}
|
||||
|
||||
/** 部门排序顺序 */
|
||||
const DEPT_ORDER = ['一', '二', '三', '四', '五', '六', '七', '八', '九', '十'];
|
||||
|
||||
function sortDepartments(departments: string[]): string[] {
|
||||
return departments.sort((a, b) => {
|
||||
const ai = DEPT_ORDER.findIndex(d => a.includes(d));
|
||||
const bi = DEPT_ORDER.findIndex(d => b.includes(d));
|
||||
return (ai === -1 ? 99 : ai) - (bi === -1 ? 99 : bi);
|
||||
});
|
||||
}
|
||||
|
||||
/** 从车辆列表计算筛选选项 */
|
||||
function buildFilters(vehicles: CachedVehicle[], targetNames: string[]): MonitoringFilters {
|
||||
const departments = sortDepartments(
|
||||
Array.from(new Set(vehicles.map(v => v.department).filter((d): d is string => d !== null)))
|
||||
);
|
||||
const customers = Array.from(new Set(vehicles.map(v => v.customer).filter((c): c is string => c !== null)));
|
||||
const plates = vehicles.map(v => v.plate);
|
||||
const projects = Array.from(new Set(vehicles.map(v => v.project).filter((p): p is string => p !== null)));
|
||||
const entities = Array.from(new Set(vehicles.map(v => v.entity).filter((e): e is string => e !== null)));
|
||||
const rentStatuses = Array.from(new Set(vehicles.map(v => v.rentStatus).filter((r): r is string => r !== null)));
|
||||
|
||||
const prefixCount = new Map<string, number>();
|
||||
for (const v of vehicles) {
|
||||
const p = v.plate.charAt(0);
|
||||
prefixCount.set(p, (prefixCount.get(p) || 0) + 1);
|
||||
}
|
||||
const platePrefixes: PlatePrefix[] = Array.from(prefixCount.entries())
|
||||
.map(([prefix, count]) => ({ prefix, count }))
|
||||
.sort((a, b) => b.count - a.count);
|
||||
|
||||
return { departments, customers, plates, projects, entities, rentStatuses, platePrefixes, targetNames };
|
||||
}
|
||||
|
||||
/** 将里程原始行 + 车辆信息合并为 CachedVehicle 列表 */
|
||||
function mergeVehicles(
|
||||
mileageRows: { plate: string; vin: string; daily_km: string; total_km: string | null; source: string }[],
|
||||
infoMap: Map<string, { customer: string | null; department: string | null; manager: string | null; rent_status: string | null; entity: string | null; project: string | null }>,
|
||||
yesterdayMap: Map<string, number>,
|
||||
): CachedVehicle[] {
|
||||
// 去重:同一 plate 取 daily_km 最大的
|
||||
const mileageMap = new Map<string, typeof mileageRows[0]>();
|
||||
for (const row of mileageRows) {
|
||||
const existing = mileageMap.get(row.plate);
|
||||
if (!existing || Number(row.daily_km) > Number(existing.daily_km)) {
|
||||
mileageMap.set(row.plate, row);
|
||||
}
|
||||
}
|
||||
|
||||
return Array.from(mileageMap.values()).map(m => {
|
||||
const info = infoMap.get(m.plate);
|
||||
const dailyKm = Number(m.daily_km) || 0;
|
||||
const source = m.source || 'NONE';
|
||||
return {
|
||||
plate: m.plate,
|
||||
vin: m.vin,
|
||||
dailyKm,
|
||||
totalKm: m.total_km !== null ? Number(m.total_km) : null,
|
||||
source,
|
||||
isOnline: source !== 'NONE' && dailyKm > 0,
|
||||
isDataSynced: source !== 'NONE',
|
||||
customer: info?.customer || null,
|
||||
department: info?.department || null,
|
||||
manager: info?.manager || null,
|
||||
rentStatus: info?.rent_status || null,
|
||||
entity: info?.entity || null,
|
||||
project: info?.project || null,
|
||||
yesterdayKm: yesterdayMap.get(m.plate) || 0,
|
||||
};
|
||||
});
|
||||
}
|
||||
|
||||
/** 刷新监控缓存(从两个数据库并行查询) */
|
||||
export async function refreshMonitoringCache(): Promise<void> {
|
||||
try {
|
||||
console.log('[mileage] refreshing monitoring cache...');
|
||||
const start = Date.now();
|
||||
|
||||
const [mileageRows, yesterdayMap, infoMap, targetRows] = await Promise.all([
|
||||
// 最新日期的里程数据
|
||||
(async () => {
|
||||
const [dateRows] = await mileagePool.execute(
|
||||
'SELECT MAX(stat_date) as latest FROM v_vehicle_daily_stats'
|
||||
) as [{ latest: string | null }[], unknown];
|
||||
const latestDate = dateRows[0]?.latest;
|
||||
if (!latestDate) return [];
|
||||
const [rows] = await mileagePool.execute(
|
||||
'SELECT plate, vin, daily_km, total_km, source FROM v_vehicle_daily_stats WHERE stat_date = ?',
|
||||
[latestDate]
|
||||
) as [any[], unknown];
|
||||
return rows;
|
||||
})(),
|
||||
// 昨日里程(用于环比)
|
||||
(async () => {
|
||||
const [rows] = await mileagePool.execute(
|
||||
`SELECT plate, daily_km FROM v_vehicle_daily_stats
|
||||
WHERE stat_date = DATE_SUB((SELECT MAX(stat_date) FROM v_vehicle_daily_stats), INTERVAL 1 DAY)`
|
||||
) as [any[], unknown];
|
||||
const map = new Map<string, number>();
|
||||
for (const r of rows) {
|
||||
const km = Number(r.daily_km) || 0;
|
||||
const existing = map.get(r.plate) || 0;
|
||||
if (km > existing) map.set(r.plate, km);
|
||||
}
|
||||
return map;
|
||||
})(),
|
||||
// 车辆关联信息
|
||||
fetchVehicleInfoMap(),
|
||||
// 考核批次→车牌映射
|
||||
pool.execute(
|
||||
`SELECT t.id, t.target_name, v.plate_number
|
||||
FROM tab_mileage_assessment_target t
|
||||
JOIN tab_mileage_assessment_vehicle v ON v.target_id = t.id AND v.is_deleted = 0
|
||||
WHERE t.is_deleted = 0`
|
||||
).then(([rows]) => rows as { id: number; target_name: string; plate_number: string }[]),
|
||||
]);
|
||||
|
||||
// 构建批次映射
|
||||
const targetPlatesMap = new Map<string, Set<string>>();
|
||||
for (const r of targetRows) {
|
||||
const set = targetPlatesMap.get(r.target_name) || new Set();
|
||||
set.add(r.plate_number);
|
||||
targetPlatesMap.set(r.target_name, set);
|
||||
}
|
||||
const targetNames = Array.from(targetPlatesMap.keys());
|
||||
|
||||
const vehicles = mergeVehicles(mileageRows, infoMap, yesterdayMap);
|
||||
|
||||
const totalToday = vehicles.reduce((sum, v) => sum + v.dailyKm, 0);
|
||||
const totalAll = vehicles.reduce((sum, v) => sum + (v.totalKm || 0), 0);
|
||||
|
||||
monitoringCache = {
|
||||
vehicles,
|
||||
stats: { totalToday, totalAll, vehicleCount: vehicles.length },
|
||||
filters: buildFilters(vehicles, targetNames),
|
||||
targetPlatesMap,
|
||||
updatedAt: new Date().toISOString(),
|
||||
};
|
||||
|
||||
console.log(`[mileage] cache refreshed: ${vehicles.length} vehicles in ${Date.now() - start}ms`);
|
||||
} catch (e: unknown) {
|
||||
console.error('[mileage] cache refresh error:', e);
|
||||
}
|
||||
}
|
||||
|
||||
/** 查询指定日期的里程数据(不使用缓存) */
|
||||
export async function queryDateMileage(dateStr: string): Promise<CachedVehicle[]> {
|
||||
const [mileageRows, yesterdayRows, infoMap] = await Promise.all([
|
||||
mileagePool.execute(
|
||||
'SELECT plate, vin, daily_km, total_km, source FROM v_vehicle_daily_stats WHERE stat_date = ?',
|
||||
[dateStr]
|
||||
).then(([r]) => r as any[]),
|
||||
mileagePool.execute(
|
||||
'SELECT plate, daily_km FROM v_vehicle_daily_stats WHERE stat_date = DATE_SUB(?, INTERVAL 1 DAY)',
|
||||
[dateStr]
|
||||
).then(([r]) => r as any[]),
|
||||
fetchVehicleInfoMap(),
|
||||
]);
|
||||
|
||||
const yesterdayMap = new Map<string, number>();
|
||||
for (const r of yesterdayRows) {
|
||||
const km = Number(r.daily_km) || 0;
|
||||
const existing = yesterdayMap.get(r.plate) || 0;
|
||||
if (km > existing) yesterdayMap.set(r.plate, km);
|
||||
}
|
||||
|
||||
return mergeVehicles(mileageRows, infoMap, yesterdayMap);
|
||||
}
|
||||
|
||||
/** 构建指定日期数据的筛选选项 */
|
||||
export function buildDateFilters(vehicles: CachedVehicle[]): MonitoringFilters {
|
||||
return buildFilters(vehicles, monitoringCache?.filters.targetNames || []);
|
||||
}
|
||||
```
|
||||
|
||||
- [ ] **Step 2: Verify TypeScript compiles**
|
||||
|
||||
Run: `npx tsc --noEmit`
|
||||
Expected: no errors
|
||||
|
||||
- [ ] **Step 3: Commit**
|
||||
|
||||
```bash
|
||||
git add src/server/routes/mileage/cache.ts
|
||||
git commit -m "refactor: extract monitoring cache module"
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### Task 4: Create monitoring route handler
|
||||
|
||||
**Files:**
|
||||
- Create: `src/server/routes/mileage/monitoring.ts`
|
||||
|
||||
- [ ] **Step 1: Create the monitoring route**
|
||||
|
||||
```typescript
|
||||
// src/server/routes/mileage/monitoring.ts
|
||||
import { Hono } from 'hono';
|
||||
import { getCache, queryDateMileage, buildDateFilters } from './cache.js';
|
||||
import type { CachedVehicle, MonitoringFilters, MonitoringResponse } from './types.js';
|
||||
|
||||
const app = new Hono();
|
||||
|
||||
const EMPTY_RESPONSE: MonitoringResponse = {
|
||||
vehicles: [],
|
||||
stats: { totalToday: 0, totalAll: 0, vehicleCount: 0, yesterdayTotal: 0 },
|
||||
filters: { departments: [], customers: [], plates: [], projects: [], entities: [], rentStatuses: [], platePrefixes: [], targetNames: [] },
|
||||
total: 0,
|
||||
page: 1,
|
||||
totalPages: 1,
|
||||
updatedAt: new Date().toISOString(),
|
||||
};
|
||||
|
||||
/** 应用筛选条件 */
|
||||
function applyFilters(vehicles: CachedVehicle[], params: {
|
||||
search: string; dept: string; customer: string; project: string;
|
||||
entity: string; rentStatus: string; plate: string; platePrefix: string;
|
||||
targetName: string; mileageMin: string; mileageMax: string;
|
||||
}): CachedVehicle[] {
|
||||
let result = vehicles;
|
||||
|
||||
if (params.search) {
|
||||
const q = params.search.toLowerCase();
|
||||
result = result.filter(v =>
|
||||
v.plate.toLowerCase().includes(q) ||
|
||||
(v.customer || '').toLowerCase().includes(q) ||
|
||||
(v.project || '').toLowerCase().includes(q)
|
||||
);
|
||||
}
|
||||
if (params.dept) result = result.filter(v => params.dept === '__EMPTY__' ? !v.department : v.department === params.dept);
|
||||
if (params.customer) result = result.filter(v => params.customer === '__EMPTY__' ? !v.customer : v.customer === params.customer);
|
||||
if (params.project) result = result.filter(v => v.project === params.project);
|
||||
if (params.entity) result = result.filter(v => v.entity === params.entity);
|
||||
if (params.rentStatus) result = result.filter(v => v.rentStatus === params.rentStatus);
|
||||
if (params.plate) result = result.filter(v => v.plate === params.plate);
|
||||
if (params.platePrefix) result = result.filter(v => v.plate.startsWith(params.platePrefix));
|
||||
if (params.targetName) {
|
||||
const cache = getCache();
|
||||
const tPlates = cache?.targetPlatesMap.get(params.targetName);
|
||||
result = tPlates ? result.filter(v => tPlates.has(v.plate)) : [];
|
||||
}
|
||||
if (params.mileageMin) result = result.filter(v => v.dailyKm >= Number(params.mileageMin));
|
||||
if (params.mileageMax) result = result.filter(v => v.dailyKm <= Number(params.mileageMax));
|
||||
|
||||
return result;
|
||||
}
|
||||
|
||||
app.get('/', async (c) => {
|
||||
const sortBy = c.req.query('sortBy') || 'today';
|
||||
const sortOrder = c.req.query('sortOrder') || 'desc';
|
||||
const limit = Number(c.req.query('limit')) || 50;
|
||||
const page = Number(c.req.query('page')) || 1;
|
||||
const date = c.req.query('date') || '';
|
||||
|
||||
const filterParams = {
|
||||
search: c.req.query('search') || '',
|
||||
dept: c.req.query('dept') || '',
|
||||
customer: c.req.query('customer') || '',
|
||||
project: c.req.query('project') || '',
|
||||
entity: c.req.query('entity') || '',
|
||||
rentStatus: c.req.query('rentStatus') || '',
|
||||
plate: c.req.query('plate') || '',
|
||||
platePrefix: c.req.query('platePrefix') || '',
|
||||
targetName: c.req.query('targetName') || '',
|
||||
mileageMin: c.req.query('mileageMin') || '',
|
||||
mileageMax: c.req.query('mileageMax') || '',
|
||||
};
|
||||
|
||||
// 获取数据源
|
||||
let allVehicles: CachedVehicle[];
|
||||
let filters: MonitoringFilters;
|
||||
|
||||
if (date) {
|
||||
try {
|
||||
allVehicles = await queryDateMileage(date);
|
||||
filters = buildDateFilters(allVehicles);
|
||||
} catch (e: unknown) {
|
||||
console.error('monitoring date query error:', e);
|
||||
return c.json(EMPTY_RESPONSE, 500);
|
||||
}
|
||||
} else {
|
||||
const cache = getCache();
|
||||
if (!cache) return c.json(EMPTY_RESPONSE);
|
||||
allVehicles = cache.vehicles;
|
||||
filters = cache.filters;
|
||||
}
|
||||
|
||||
// 筛选
|
||||
const filtered = applyFilters(allVehicles, filterParams);
|
||||
|
||||
// 统计
|
||||
const stats = {
|
||||
totalToday: filtered.reduce((sum, v) => sum + v.dailyKm, 0),
|
||||
totalAll: filtered.reduce((sum, v) => sum + (v.totalKm || 0), 0),
|
||||
vehicleCount: filtered.length,
|
||||
yesterdayTotal: filtered.reduce((sum, v) => sum + v.yesterdayKm, 0),
|
||||
};
|
||||
|
||||
// 排序
|
||||
const sorted = [...filtered].sort((a, b) => {
|
||||
const valA = sortBy === 'today' ? a.dailyKm : (a.totalKm || 0);
|
||||
const valB = sortBy === 'today' ? b.dailyKm : (b.totalKm || 0);
|
||||
return sortOrder === 'desc' ? valB - valA : valA - valB;
|
||||
});
|
||||
|
||||
// 分页
|
||||
const offset = (page - 1) * limit;
|
||||
const paged = sorted.slice(offset, offset + limit);
|
||||
const total = filtered.length;
|
||||
|
||||
return c.json({
|
||||
vehicles: paged,
|
||||
stats,
|
||||
filters,
|
||||
total,
|
||||
page,
|
||||
totalPages: Math.ceil(total / limit),
|
||||
updatedAt: date || getCache()?.updatedAt || new Date().toISOString(),
|
||||
});
|
||||
});
|
||||
|
||||
export default app;
|
||||
```
|
||||
|
||||
- [ ] **Step 2: Verify TypeScript compiles**
|
||||
|
||||
Run: `npx tsc --noEmit`
|
||||
Expected: no errors
|
||||
|
||||
- [ ] **Step 3: Commit**
|
||||
|
||||
```bash
|
||||
git add src/server/routes/mileage/monitoring.ts
|
||||
git commit -m "refactor: create monitoring route handler"
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### Task 5: Create targets route handler
|
||||
|
||||
**Files:**
|
||||
- Create: `src/server/routes/mileage/targets.ts`
|
||||
|
||||
- [ ] **Step 1: Create the targets route**
|
||||
|
||||
```typescript
|
||||
// src/server/routes/mileage/targets.ts
|
||||
import { Hono } from 'hono';
|
||||
import pool from '../../db.js';
|
||||
import mileagePool from '../../mileage-db.js';
|
||||
import { getCache } from './cache.js';
|
||||
import { fetchVehicleInfoByPlates } from './vehicle-info.js';
|
||||
|
||||
const app = new Hono();
|
||||
|
||||
// GET /targets — 考核项目列表 + 汇总
|
||||
app.get('/', async (c) => {
|
||||
try {
|
||||
const [targets] = await pool.execute(
|
||||
'SELECT * FROM tab_mileage_assessment_target WHERE is_deleted = 0 ORDER BY id'
|
||||
) as [any[], unknown];
|
||||
|
||||
const [vehicleStats] = await pool.execute(`
|
||||
SELECT
|
||||
target_id, COUNT(*) as total,
|
||||
SUM(today_mileage) as today_total,
|
||||
SUM(current_mileage) as cumulative_total,
|
||||
AVG(current_year_completion_rate) as avg_completion,
|
||||
SUM(CASE WHEN is_qualified = 1 THEN 1 ELSE 0 END) as qualified_count,
|
||||
SUM(CASE WHEN current_year_is_qualified = 1 THEN 1 ELSE 0 END) as year_qualified_count,
|
||||
SUM(CASE WHEN current_year_completion_rate >= 0.5 THEN 1 ELSE 0 END) as half_qualified_count,
|
||||
SUM(current_year_mileage_task) as current_year_target,
|
||||
SUM(current_year_mileage) as current_year_completed,
|
||||
MAX(current_year_assessment_end_date) as year_end_date
|
||||
FROM tab_mileage_assessment_vehicle WHERE is_deleted = 0
|
||||
GROUP BY target_id
|
||||
`) as [any[], unknown];
|
||||
|
||||
const statsMap = new Map<number, any>();
|
||||
for (const s of vehicleStats) statsMap.set(s.target_id, s);
|
||||
|
||||
const [periodRows] = await pool.execute(`
|
||||
SELECT target_id,
|
||||
DATE_FORMAT(assessment_start_date, '%Y-%m-%d') as start_date,
|
||||
DATE_FORMAT(assessment_end_date, '%Y-%m-%d') as end_date,
|
||||
COUNT(*) as cnt
|
||||
FROM tab_mileage_assessment_vehicle WHERE is_deleted = 0
|
||||
GROUP BY target_id, assessment_start_date, assessment_end_date
|
||||
ORDER BY target_id, assessment_start_date
|
||||
`) as [any[], unknown];
|
||||
|
||||
const periodsMap = new Map<number, string[]>();
|
||||
for (const p of periodRows) {
|
||||
const list = periodsMap.get(p.target_id) || [];
|
||||
list.push(`${p.start_date} ~ ${p.end_date} (${p.cnt}台)`);
|
||||
periodsMap.set(p.target_id, list);
|
||||
}
|
||||
|
||||
// 使用监控缓存里程数据(与里程看板一致)
|
||||
const cache = getCache();
|
||||
const cacheVehicleMap = new Map<string, number>();
|
||||
if (cache) {
|
||||
for (const v of cache.vehicles) {
|
||||
cacheVehicleMap.set(v.plate, Math.max(0, v.dailyKm || 0));
|
||||
}
|
||||
}
|
||||
|
||||
const [targetVehicleRows] = await pool.execute(
|
||||
'SELECT target_id, plate_number FROM tab_mileage_assessment_vehicle WHERE is_deleted = 0'
|
||||
) as [{ target_id: number; plate_number: string }[], unknown];
|
||||
|
||||
const targetIdPlatesMap = new Map<number, string[]>();
|
||||
for (const r of targetVehicleRows) {
|
||||
const list = targetIdPlatesMap.get(r.target_id) || [];
|
||||
list.push(r.plate_number);
|
||||
targetIdPlatesMap.set(r.target_id, list);
|
||||
}
|
||||
|
||||
const now = new Date();
|
||||
const result = targets.map((t: any) => {
|
||||
const s = statsMap.get(t.id) || {};
|
||||
const currentYearTarget = Number(s.current_year_target) || 0;
|
||||
const currentYearCompleted = Number(s.current_year_completed) || 0;
|
||||
const remaining = Math.max(0, currentYearTarget - currentYearCompleted);
|
||||
const yearEnd = s.year_end_date ? new Date(s.year_end_date) : now;
|
||||
const daysLeft = Math.max(1, Math.ceil((yearEnd.getTime() - now.getTime()) / 86400000));
|
||||
const dailyTarget = remaining / daysLeft;
|
||||
|
||||
const periods = periodsMap.get(t.id) || [];
|
||||
if (periods.length === 0) {
|
||||
const startDate = t.default_start_date ? new Date(t.default_start_date).toISOString().split('T')[0] : '';
|
||||
const endDate = t.default_end_date ? new Date(t.default_end_date).toISOString().split('T')[0] : '';
|
||||
if (startDate || endDate) periods.push(`${startDate} ~ ${endDate}`);
|
||||
}
|
||||
|
||||
return {
|
||||
id: t.id,
|
||||
targetName: t.target_name,
|
||||
vehicleCount: Number(s.total) || t.vehicle_count,
|
||||
totalMileagePerVehicle: Number(t.total_mileage_per_vehicle),
|
||||
annualMileagePerVehicle: Number(t.annual_mileage_per_vehicle),
|
||||
assessmentYears: t.assessment_years,
|
||||
periods,
|
||||
todayTotal: (targetIdPlatesMap.get(t.id) || []).reduce((sum, plate) => sum + (cacheVehicleMap.get(plate) || 0), 0),
|
||||
cumulativeTotal: Number(s.cumulative_total) || 0,
|
||||
avgCompletion: (Number(s.avg_completion) || 0) * 100,
|
||||
qualifiedCount: Number(s.qualified_count) || 0,
|
||||
yearQualifiedCount: Number(s.year_qualified_count) || 0,
|
||||
halfQualifiedCount: Number(s.half_qualified_count) || 0,
|
||||
currentYearTarget,
|
||||
currentYearCompleted,
|
||||
remaining,
|
||||
daysLeft,
|
||||
dailyTarget: Math.round(dailyTarget * 10) / 10,
|
||||
};
|
||||
});
|
||||
|
||||
return c.json(result);
|
||||
} catch (e: unknown) {
|
||||
console.error('targets error:', e);
|
||||
return c.json([], 500);
|
||||
}
|
||||
});
|
||||
|
||||
// GET /target/:id/vehicles — 某项目的车辆明细
|
||||
app.get('/:id/vehicles', async (c) => {
|
||||
const targetId = c.req.param('id');
|
||||
const date = c.req.query('date') || '';
|
||||
|
||||
try {
|
||||
const [rows] = await pool.execute(
|
||||
`SELECT plate_number, today_mileage, vehicle_total_mileage,
|
||||
completion_rate, is_qualified, current_year_is_qualified,
|
||||
daily_required_mileage
|
||||
FROM tab_mileage_assessment_vehicle
|
||||
WHERE target_id = ? AND is_deleted = 0
|
||||
ORDER BY today_mileage DESC`,
|
||||
[targetId]
|
||||
) as [any[], unknown];
|
||||
|
||||
const plates: string[] = rows.map((r: any) => r.plate_number);
|
||||
const infoMap = await fetchVehicleInfoByPlates(plates);
|
||||
|
||||
// 指定日期时,从里程库查该日里程
|
||||
const dateMileageMap = new Map<string, { dailyKm: number; totalKm: number | null; isOnline: boolean }>();
|
||||
if (date && plates.length > 0) {
|
||||
const [mileageRows] = await mileagePool.execute(
|
||||
`SELECT plate, daily_km, total_km, source FROM v_vehicle_daily_stats
|
||||
WHERE stat_date = ? AND plate IN (${plates.map(() => '?').join(',')})`,
|
||||
[date, ...plates]
|
||||
) as [any[], unknown];
|
||||
for (const m of mileageRows) {
|
||||
const existing = dateMileageMap.get(m.plate);
|
||||
const dailyKm = Number(m.daily_km) || 0;
|
||||
if (!existing || dailyKm > existing.dailyKm) {
|
||||
const source = m.source || 'NONE';
|
||||
dateMileageMap.set(m.plate, {
|
||||
dailyKm,
|
||||
totalKm: m.total_km !== null ? Number(m.total_km) : null,
|
||||
isOnline: source !== 'NONE' && dailyKm > 0,
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const result = rows.map((r: any) => {
|
||||
const info = infoMap.get(r.plate_number);
|
||||
const dateMileage = date ? dateMileageMap.get(r.plate_number) : null;
|
||||
return {
|
||||
plateNumber: r.plate_number,
|
||||
todayMileage: dateMileage ? dateMileage.dailyKm : (Number(r.today_mileage) || 0),
|
||||
totalMileage: dateMileage?.totalKm ?? (Number(r.vehicle_total_mileage) || 0),
|
||||
completionRate: Number(r.completion_rate) || 0,
|
||||
isQualified: r.is_qualified === 1,
|
||||
currentYearIsQualified: r.current_year_is_qualified === 1,
|
||||
dailyRequiredMileage: Number(r.daily_required_mileage) || 0,
|
||||
rentStatus: info?.rent_status || null,
|
||||
department: info?.department || null,
|
||||
customer: info?.customer || null,
|
||||
isOnline: dateMileage ? dateMileage.isOnline : true,
|
||||
};
|
||||
});
|
||||
|
||||
return c.json(result);
|
||||
} catch (e: unknown) {
|
||||
console.error('target vehicles error:', e);
|
||||
return c.json([], 500);
|
||||
}
|
||||
});
|
||||
|
||||
export default app;
|
||||
```
|
||||
|
||||
- [ ] **Step 2: Verify TypeScript compiles**
|
||||
|
||||
Run: `npx tsc --noEmit`
|
||||
Expected: no errors
|
||||
|
||||
- [ ] **Step 3: Commit**
|
||||
|
||||
```bash
|
||||
git add src/server/routes/mileage/targets.ts
|
||||
git commit -m "refactor: create targets route handler"
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### Task 6: Create trend route handler
|
||||
|
||||
**Files:**
|
||||
- Create: `src/server/routes/mileage/trend.ts`
|
||||
|
||||
- [ ] **Step 1: Create the trend route**
|
||||
|
||||
```typescript
|
||||
// src/server/routes/mileage/trend.ts
|
||||
import { Hono } from 'hono';
|
||||
import pool from '../../db.js';
|
||||
import mileagePool from '../../mileage-db.js';
|
||||
|
||||
const app = new Hono();
|
||||
|
||||
app.get('/', async (c) => {
|
||||
const targetId = c.req.query('targetId');
|
||||
const days = Number(c.req.query('days')) || 7;
|
||||
|
||||
try {
|
||||
let plates: string[] = [];
|
||||
if (targetId) {
|
||||
const [vehicleRows] = await pool.execute(
|
||||
'SELECT plate_number FROM tab_mileage_assessment_vehicle WHERE target_id = ? AND is_deleted = 0',
|
||||
[targetId]
|
||||
) as [{ plate_number: string }[], unknown];
|
||||
plates = vehicleRows.map(r => r.plate_number);
|
||||
if (plates.length === 0) return c.json([]);
|
||||
}
|
||||
|
||||
let sql = `
|
||||
SELECT DATE_FORMAT(stat_date, '%m-%d') as date, SUM(daily_km) as mileage
|
||||
FROM v_vehicle_daily_stats
|
||||
WHERE stat_date >= DATE_SUB(CURDATE(), INTERVAL ? DAY) AND stat_date < CURDATE()
|
||||
`;
|
||||
const params: (string | number)[] = [days];
|
||||
|
||||
if (plates.length > 0) {
|
||||
sql += ` AND plate IN (${plates.map(() => '?').join(',')})`;
|
||||
params.push(...plates);
|
||||
}
|
||||
|
||||
sql += ' GROUP BY stat_date ORDER BY stat_date';
|
||||
|
||||
const [rows] = await mileagePool.execute(sql, params) as [any[], unknown];
|
||||
|
||||
return c.json(rows.map((r: any) => ({
|
||||
date: r.date,
|
||||
mileage: Math.round(Number(r.mileage) || 0),
|
||||
})));
|
||||
} catch (e: unknown) {
|
||||
console.error('trend error:', e);
|
||||
return c.json([], 500);
|
||||
}
|
||||
});
|
||||
|
||||
export default app;
|
||||
```
|
||||
|
||||
- [ ] **Step 2: Verify TypeScript compiles**
|
||||
|
||||
Run: `npx tsc --noEmit`
|
||||
Expected: no errors
|
||||
|
||||
- [ ] **Step 3: Commit**
|
||||
|
||||
```bash
|
||||
git add src/server/routes/mileage/trend.ts
|
||||
git commit -m "refactor: create trend route handler"
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### Task 7: Assemble new index and swap in
|
||||
|
||||
**Files:**
|
||||
- Create: `src/server/routes/mileage/index.ts`
|
||||
- Delete: `src/server/routes/mileage.ts`
|
||||
|
||||
- [ ] **Step 1: Create the new index**
|
||||
|
||||
```typescript
|
||||
// src/server/routes/mileage/index.ts
|
||||
import { Hono } from 'hono';
|
||||
import { refreshMonitoringCache } from './cache.js';
|
||||
import monitoringRouter from './monitoring.js';
|
||||
import targetsRouter from './targets.js';
|
||||
import trendRouter from './trend.js';
|
||||
|
||||
const app = new Hono();
|
||||
|
||||
app.route('/monitoring', monitoringRouter);
|
||||
app.route('/targets', targetsRouter);
|
||||
app.route('/target', targetsRouter);
|
||||
app.route('/trend', trendRouter);
|
||||
|
||||
// 启动时立即刷新缓存,之后每分钟刷新
|
||||
refreshMonitoringCache();
|
||||
setInterval(refreshMonitoringCache, 60 * 1000);
|
||||
|
||||
export default app;
|
||||
```
|
||||
|
||||
- [ ] **Step 2: Delete the old monolith**
|
||||
|
||||
```bash
|
||||
rm src/server/routes/mileage.ts
|
||||
```
|
||||
|
||||
- [ ] **Step 3: Verify TypeScript compiles**
|
||||
|
||||
Run: `npx tsc --noEmit`
|
||||
Expected: no errors
|
||||
|
||||
- [ ] **Step 4: Verify the server starts and API works**
|
||||
|
||||
Run: `npm run dev` and test:
|
||||
- `curl http://localhost:3001/api/mileage/monitoring?limit=2` — should return vehicles
|
||||
- `curl http://localhost:3001/api/mileage/targets` — should return target list
|
||||
- `curl http://localhost:3001/api/mileage/trend?days=7` — should return trend data
|
||||
|
||||
- [ ] **Step 5: Commit**
|
||||
|
||||
```bash
|
||||
git add src/server/routes/mileage/ && git add -u src/server/routes/mileage.ts
|
||||
git commit -m "refactor: replace mileage monolith with modular route files"
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### Task 8: Fix the stale comment and final cleanup
|
||||
|
||||
**Files:**
|
||||
- Modify: `src/server/routes/mileage/cache.ts`
|
||||
|
||||
- [ ] **Step 1: Verify no leftover references to old file**
|
||||
|
||||
Run: `grep -r "routes/mileage.js" src/` — should only find `src/server/index.ts` which imports `./routes/mileage.js`. Since we moved to `mileage/index.ts`, the import path `./routes/mileage.js` resolves to `./routes/mileage/index.js` automatically. No change needed.
|
||||
|
||||
- [ ] **Step 2: Verify full build**
|
||||
|
||||
Run: `npx tsc --noEmit && npm run build`
|
||||
Expected: no errors
|
||||
|
||||
- [ ] **Step 3: Final commit**
|
||||
|
||||
```bash
|
||||
git commit --allow-empty -m "refactor: mileage backend refactor complete — verified build"
|
||||
```
|
||||
1615
docs/superpowers/plans/2026-04-16-smart-scheduling.md
Normal file
1615
docs/superpowers/plans/2026-04-16-smart-scheduling.md
Normal file
File diff suppressed because it is too large
Load Diff
153
docs/superpowers/specs/2026-03-27-three-modules-design.md
Normal file
153
docs/superpowers/specs/2026-03-27-three-modules-design.md
Normal file
@@ -0,0 +1,153 @@
|
||||
# 三大运营统计模块设计
|
||||
|
||||
从 lnoneos 原型迁移到 ln-bi 生产项目,使用真实 MySQL 数据。
|
||||
|
||||
## 架构决策
|
||||
|
||||
- **数据源**:复用现有 `getVehicles()` 缓存(~1000 辆,内存聚合无性能问题)
|
||||
- **跳过**:出勤率、日均里程(无数据源),QR Code
|
||||
- **新增图标**:`Search`, `Filter`, `ArrowRightLeft` (lucide-react,已安装)
|
||||
|
||||
## 模块 1:部门运营统计
|
||||
|
||||
### 后端 API
|
||||
|
||||
**`GET /api/vehicles/dept-stats`** — 返回 `DeptGroup[]`
|
||||
|
||||
聚合逻辑:按 `Vehicle.departmentName` 分组,每个部门下按 `Vehicle.customerManager` 分组。每个业务员统计车型分布:
|
||||
|
||||
| 车型类别 | 过滤条件 |
|
||||
|---|---|
|
||||
| t4_5 | type=4.5T 且 model 不含"冷链" |
|
||||
| t4_5c | type=4.5T 且 model 含"冷链" |
|
||||
| t18 | type=18T |
|
||||
| t49 | type=49T |
|
||||
| trailer | model 含"挂车" |
|
||||
| other | 以上都不是 |
|
||||
|
||||
部门级别额外字段:`totalAssets`(运营中的)、`operatingCount`(status=Operating)、`idleCount`(status=Inventory 或 Abnormal)。
|
||||
|
||||
### 后端:扩展 `/api/vehicles/list`
|
||||
|
||||
新增查询参数:
|
||||
- `manager` — 按客户经理筛选
|
||||
- `customer` — 按客户名称筛选
|
||||
- `isColdChain` — true/false,筛选冷链/非冷链
|
||||
- `isTrailer` — true/false,筛选挂车/非挂车
|
||||
|
||||
### 前端类型
|
||||
|
||||
```typescript
|
||||
interface ManagerStats {
|
||||
manager: string;
|
||||
department: string;
|
||||
t4_5: number;
|
||||
t4_5c: number;
|
||||
t18: number;
|
||||
t49: number;
|
||||
trailer: number;
|
||||
other: number;
|
||||
total: number;
|
||||
}
|
||||
|
||||
interface DeptGroup {
|
||||
department: string;
|
||||
totalAssets: number;
|
||||
operatingCount: number;
|
||||
idleCount: number;
|
||||
managers: ManagerStats[];
|
||||
}
|
||||
```
|
||||
|
||||
### 前端 UI
|
||||
|
||||
参照 lnoneos 1362-1880 行:
|
||||
- 顶部深色汇总条(总资产/运营中/闲置中,跳过平均出勤)
|
||||
- 按部门/按业务员切换
|
||||
- 桌面表格 + 移动端卡片
|
||||
- 展开部门显示业务员卡片,展开业务员显示 6 个车型格子(可点击下钻到车牌列表)
|
||||
|
||||
## 模块 2:区域运营统计
|
||||
|
||||
### 后端 API
|
||||
|
||||
**`GET /api/vehicles/region-stats`** — 返回 `RegionGroup[]`
|
||||
|
||||
新增大区映射函数(province/city → 华东/华南/华北/华中/西南/西北/其他)。按大区分组,每个区域下统计:
|
||||
- 按车型(4.5T/18T/49T)的资产/运营/库存数
|
||||
- 列出区域内的客户列表
|
||||
|
||||
```typescript
|
||||
interface RegionGroup {
|
||||
region: string; // 华东、华南等
|
||||
totalAssets: number;
|
||||
operatingCount: number;
|
||||
inventoryCount: number;
|
||||
customers: string[];
|
||||
typeBreakdown: { type: string; total: number; operating: number; inventory: number; customers: string[] }[];
|
||||
}
|
||||
```
|
||||
|
||||
### 前端 UI
|
||||
|
||||
参照 lnoneos 1882-2174 行:
|
||||
- 筛选弹出框(客户搜索/区域/城市下拉)
|
||||
- 可展开区域行,展开后显示车型子行
|
||||
- 桌面表格 + 移动端卡片
|
||||
|
||||
## 模块 3:客户运营统计
|
||||
|
||||
### 后端 API
|
||||
|
||||
**`GET /api/vehicles/customer-stats`** — 返回 `CustomerStats[]`
|
||||
|
||||
按 `Vehicle.customerName` 分组(只统计 status=Operating 的车辆),每个客户统计:
|
||||
- 关联业务员(customerManager)、品牌(brandLabel)、部门(departmentName)
|
||||
- 大区(从 province/city 映射)、城市
|
||||
- 6 个车型分列计数 + 合计
|
||||
|
||||
```typescript
|
||||
interface CustomerStats {
|
||||
customer: string;
|
||||
manager: string;
|
||||
brand: string;
|
||||
department: string;
|
||||
region: string;
|
||||
city: string;
|
||||
t4_5: number;
|
||||
t4_5c: number;
|
||||
t18: number;
|
||||
t49: number;
|
||||
trailer: number;
|
||||
other: number;
|
||||
total: number;
|
||||
}
|
||||
```
|
||||
|
||||
### 前端 UI
|
||||
|
||||
参照 lnoneos 2176-2496 行:
|
||||
- 筛选弹出框(客户名/业务员搜索,品牌/部门/区域下拉)
|
||||
- 翡翠绿色主题表头
|
||||
- 客户表格,各车型列可点击下钻
|
||||
- 展开后显示 4 个详情卡片(客户详情/主要车型/运营状态/资产占比)
|
||||
- 桌面表格 + 移动端卡片
|
||||
|
||||
## 文件变更清单
|
||||
|
||||
| 文件 | 变更 |
|
||||
|---|---|
|
||||
| `src/server/routes/vehicles.ts` | 新增 3 个 API 端点 + 扩展 `/list` 的过滤参数 + 大区映射函数 |
|
||||
| `src/types.ts` | 新增 `DeptGroup`, `ManagerStats`, `CustomerStats`, `RegionGroup` 接口 |
|
||||
| `src/server/types.ts` | 同步新增后端类型 |
|
||||
| `src/api.ts` | 新增 `fetchDeptStats`, `fetchRegionStats`, `fetchCustomerStats` |
|
||||
| `src/App.tsx` | 新增 3 个 section + 相关 state/toggle/filter 逻辑 + 扩展 showPlateNumbers 类型 |
|
||||
|
||||
## 实现顺序
|
||||
|
||||
1. 后端:大区映射 + 3 个 API + 扩展 list 过滤
|
||||
2. 前端类型 + API 客户端
|
||||
3. 部门运营统计 UI
|
||||
4. 区域运营统计 UI
|
||||
5. 客户运营统计 UI
|
||||
6. 验证构建通过
|
||||
224
docs/superpowers/specs/2026-04-16-smart-scheduling-design.md
Normal file
224
docs/superpowers/specs/2026-04-16-smart-scheduling-design.md
Normal file
@@ -0,0 +1,224 @@
|
||||
# 智能调度模块设计
|
||||
|
||||
基于里程考核数据,通过贪心优先级匹配算法,生成车辆替换建议,帮助调度员优化车队里程分布,最大化达标车辆数。
|
||||
|
||||
## 业务背景
|
||||
|
||||
公司有多批次考核车辆(40台普货、190台冷藏车等),每批次有年度里程考核目标。车辆租赁给不同客户,客户实际使用强度差异大。考核的是**车辆本身的里程**,因此需要通过替换车辆来均衡里程:
|
||||
- 高里程客户的已达标车换下来,换上里程缺口大的车(让新车追赶)
|
||||
- 低里程客户的无望达标车换下来给高里程客户(抢救),给低里程客户换上已达标的车
|
||||
|
||||
## 核心算法
|
||||
|
||||
### 车辆分类
|
||||
|
||||
从 `tab_mileage_assessment_vehicle` 获取所有考核车辆,按客户聚合计算**客户日均里程**(客户下所有车辆近 30 天日均里程的平均值),然后对每辆车计算:
|
||||
|
||||
```
|
||||
预测年终里程 = 当前累计里程 + 客户日均里程 × 剩余天数
|
||||
达标概率 = 预测年终里程 / 年度目标里程
|
||||
```
|
||||
|
||||
分为三类:
|
||||
|
||||
| 类型 | 条件 | 含义 |
|
||||
|------|------|------|
|
||||
| qualified | `currentYearIsQualified = true` 或 达标概率 ≥ 120% | 已完成或铁定完成 |
|
||||
| hopeless | 达标概率 < 60% | 按当前客户使用强度,年底肯定完不成 |
|
||||
| normal | 60% ≤ 达标概率 < 120% | 有希望但不确定,暂不干预 |
|
||||
|
||||
### 替换建议生成
|
||||
|
||||
**场景 A:replace_qualified(高里程客户的已达标车辆)**
|
||||
- 目标:把已达标的车换下来,换上里程缺口大的库存车
|
||||
- 候选池:库存车(rent_status='在库')+ 同车型 + 同区域
|
||||
- 排序:优先选剩余缺口最大但换后仍可达标的车
|
||||
- 校验:`候选车当前累计 + 客户日均 × 剩余天数 ≥ 年度目标` 才推荐
|
||||
|
||||
**场景 B:rescue_hopeless(低里程客户的无望达标车辆)**
|
||||
- 目标:把无望车换给高里程客户抢救,给低里程客户换上已达标/库存车
|
||||
- 候选池:库存中已达标或将达标的同车型同区域车辆
|
||||
- 排序:优先选已达标且里程最高的车(对低里程客户无影响)
|
||||
|
||||
### 车型匹配规则
|
||||
|
||||
| 源车型 | 可替换为 | 说明 |
|
||||
|--------|---------|------|
|
||||
| 4.5T冷链 | 4.5T冷链、4.5T普货 | 冷链不开空调可当普货用 |
|
||||
| 4.5T普货 | 4.5T普货 | 不能反向替换冷链 |
|
||||
| 18T | 18T | 同型号互换 |
|
||||
| 49T | 49T | 同型号互换 |
|
||||
| 挂车 | 挂车 | 同型号互换 |
|
||||
|
||||
### 区域匹配规则
|
||||
|
||||
复用已有 `mapRegion()` 函数,将 province/city 映射到大区(嘉兴/广东/北京/新疆/其他)。同一大区内可替换,跨大区不推荐。
|
||||
|
||||
### 优先级排序
|
||||
|
||||
干预清单排序:
|
||||
1. **hopeless + 有可行替换方案** → priority: high(最紧急,还能抢救)
|
||||
2. **qualified + 高里程客户 + 有库存可换** → priority: medium(释放达标车,让新车追赶)
|
||||
|
||||
## 后端 API
|
||||
|
||||
### GET /api/scheduling/suggestions
|
||||
|
||||
获取调度建议列表。每次请求实时计算(不使用定时缓存),因为用户操作后需要立即看到最新结果。
|
||||
|
||||
**请求参数**:
|
||||
|
||||
| 参数 | 类型 | 说明 |
|
||||
|------|------|------|
|
||||
| targetId | number (可选) | 按批次筛选,不传则全部 |
|
||||
|
||||
**响应**:
|
||||
|
||||
```typescript
|
||||
{
|
||||
summary: {
|
||||
qualifiedCount: number; // 已达标车辆数
|
||||
hopelessCount: number; // 无望达标车辆数
|
||||
suggestionCount: number; // 可干预建议数
|
||||
estimatedGain: number; // 预计干预后可新增达标数
|
||||
};
|
||||
suggestions: SchedulingSuggestion[];
|
||||
targets: { id: number; name: string; vehicleCount: number }[];
|
||||
}
|
||||
```
|
||||
|
||||
`SchedulingSuggestion` 结构:
|
||||
|
||||
```typescript
|
||||
{
|
||||
id: string; // 建议唯一ID(如 "s-{plate}-{timestamp}")
|
||||
priority: 'high' | 'medium';
|
||||
type: 'replace_qualified' | 'rescue_hopeless';
|
||||
|
||||
currentVehicle: {
|
||||
plateNumber: string;
|
||||
targetId: number;
|
||||
targetName: string; // 所属批次
|
||||
vehicleType: string; // "4.5T冷链" / "18T" 等
|
||||
totalMileage: number;
|
||||
completionRate: number; // 0-1
|
||||
yearTarget: number; // 年度目标里程
|
||||
region: string; // 大区(嘉兴/广东等)
|
||||
province: string; // 原始省份
|
||||
customer: string;
|
||||
customerAvgDaily: number; // 客户日均里程
|
||||
predictedYearEnd: number; // 预测年终里程
|
||||
daysLeft: number;
|
||||
};
|
||||
|
||||
candidates: {
|
||||
plateNumber: string;
|
||||
targetId: number | null; // 库存车可能无批次
|
||||
targetName: string | null;
|
||||
vehicleType: string;
|
||||
totalMileage: number;
|
||||
completionRate: number;
|
||||
yearTarget: number | null;
|
||||
region: string;
|
||||
province: string;
|
||||
mileageGap: number; // 剩余缺口
|
||||
predictedAfterSwap: number; // 换到该客户后预测年终里程
|
||||
canQualifyAfterSwap: boolean;
|
||||
}[];
|
||||
|
||||
reason: string; // 建议原因文案
|
||||
}
|
||||
```
|
||||
|
||||
### POST /api/scheduling/notify
|
||||
|
||||
发送替换通知。成功后前端立即重新拉取 suggestions。
|
||||
|
||||
**请求体**:
|
||||
|
||||
```typescript
|
||||
{
|
||||
suggestionId: string;
|
||||
currentPlate: string;
|
||||
candidatePlate: string;
|
||||
}
|
||||
```
|
||||
|
||||
操作人从 JWT auth 中获取。
|
||||
|
||||
**响应**:`{ success: boolean; message: string }`
|
||||
|
||||
**行为**:调用外部回调接口发送通知(具体回调 URL 后续配置)。成功后在本地记录已操作状态,后续 GET suggestions 时排除已操作的建议。
|
||||
|
||||
### 数据查询流程
|
||||
|
||||
后端一次请求聚合以下数据:
|
||||
1. 所有考核车辆 — `tab_mileage_assessment_vehicle`(里程进度、达标状态)
|
||||
2. 所有考核目标 — `tab_mileage_assessment_target`(批次名称、年度目标)
|
||||
3. 库存车辆 — `tab_truck WHERE truck_rent_status = 0`(在库)+ 同表获取车型
|
||||
4. 车辆实时位置 — `tab_truck_remote_sync_realtime_info`(province, city)
|
||||
5. 合同/客户信息 — 复用 `vehicle-info.ts` 已有的 JOIN 查询
|
||||
6. 客户日均里程 — 按客户聚合 `v_vehicle_daily_stats` 近 30 天均值
|
||||
|
||||
## 前端结构
|
||||
|
||||
### 文件组织
|
||||
|
||||
```
|
||||
src/modules/scheduling/
|
||||
├── SchedulingModule.tsx // 主入口,状态管理和数据加载
|
||||
├── SuggestionList.tsx // 干预建议清单列表
|
||||
├── SuggestionDetail.tsx // 单条建议展开详情(含替换车辆对比)
|
||||
├── api.ts // fetchSuggestions(), sendNotify()
|
||||
└── types.ts // SchedulingSuggestion 等类型定义
|
||||
```
|
||||
|
||||
后端:
|
||||
```
|
||||
src/server/routes/scheduling/
|
||||
├── index.ts // 路由注册
|
||||
├── suggestions.ts // GET /suggestions 算法核心
|
||||
└── notify.ts // POST /notify 回调通知
|
||||
```
|
||||
|
||||
### 页面层级
|
||||
|
||||
```
|
||||
智能调度 Tab
|
||||
├── 顶部:批次选择器(复用里程统计的批次 tabs,默认"全部")
|
||||
├── 统计卡片区(3 个)
|
||||
│ ├── 已达标车辆数(绿色)
|
||||
│ ├── 无望达标车辆数(红色)
|
||||
│ └── 可干预建议数 + 预计可新增达标数(蓝色)
|
||||
├── 干预建议清单(主列表,按优先级排序)
|
||||
│ ├── 每条:车牌、批次、客户、客户日均、完成率、区域、类型标签(已达标/无望)
|
||||
│ └── 点击 → 展开干预详情
|
||||
└── 干预详情(弹窗)
|
||||
├── 当前车辆信息卡片
|
||||
├── 推荐替换车辆列表(最多 5 辆)
|
||||
│ └── 每辆显示对比:替换前后的区域、车型、里程、预测达标
|
||||
├── 建议原因说明
|
||||
└── 「发送替换通知」按钮 → notify 接口 → 成功后刷新列表
|
||||
```
|
||||
|
||||
### UI 设计要求
|
||||
|
||||
- 以原型 `SmartSchedulingView` 组件为基础风格
|
||||
- 使用 ui-ux-pro-max 优化视觉质量
|
||||
- 适配移动端(竖屏卡片流)和 Web 端(landscape 横屏大表格)
|
||||
- 干预详情弹窗需截图友好:完整卡片布局、替换前后对比一屏可见、关键数据醒目
|
||||
- 统计卡片区保持与原型一致的三列 grid 布局
|
||||
- 批次选择器横向滚动 pill 按钮样式
|
||||
|
||||
### 技术栈
|
||||
|
||||
复用项目已有:React 19 + Tailwind CSS + motion/react(动画)+ recharts(图表)+ lucide-react(图标)
|
||||
|
||||
## 约束与边界
|
||||
|
||||
- 替换仅为建议,不直接操作数据库修改车辆归属
|
||||
- 不能推荐已租赁给其他客户的车辆,只从库存(在库)中推荐
|
||||
- 跨批次可替换,但车型必须匹配(含冷链→普货单向规则)
|
||||
- 同大区内替换,不跨大区
|
||||
- notify 操作后数据立即更新(不使用定时缓存)
|
||||
- 客户名称展示需使用已有的脱敏/Blur 组件
|
||||
@@ -1,7 +1,7 @@
|
||||
{
|
||||
"name": "ln-bi",
|
||||
"private": true,
|
||||
"version": "1.1.0",
|
||||
"version": "1.1.5",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "concurrently -n server,client -c blue,green \"npm run dev:server\" \"npm run dev:client\"",
|
||||
|
||||
178
scripts-tmp/excel_plates.txt
Normal file
178
scripts-tmp/excel_plates.txt
Normal file
@@ -0,0 +1,178 @@
|
||||
沪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
|
||||
60
scripts-tmp/find_extra.ts
Normal file
60
scripts-tmp/find_extra.ts
Normal file
@@ -0,0 +1,60 @@
|
||||
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); });
|
||||
22
src/App.tsx
22
src/App.tsx
@@ -1,18 +1,32 @@
|
||||
import { Truck, Route } from 'lucide-react';
|
||||
import { useMemo } from 'react';
|
||||
import { Truck, Route, Activity } from 'lucide-react';
|
||||
import { Shell, type ModuleConfig } from './components/Shell';
|
||||
import AssetsModule from './modules/assets/AssetsModule';
|
||||
import MileageModule from './modules/mileage/MileageModule';
|
||||
import SchedulingModule from './modules/scheduling/SchedulingModule';
|
||||
import AuthProvider from './auth/AuthProvider';
|
||||
import { useAuth } from './auth/useAuth';
|
||||
import UnauthorizedPage from './auth/UnauthorizedPage';
|
||||
import { canAccessScheduling } from './shared/auth/roles';
|
||||
|
||||
const MODULES: ModuleConfig[] = [
|
||||
const BASE_MODULES: ModuleConfig[] = [
|
||||
{ id: 'assets', label: '资产管理', icon: Truck, component: AssetsModule },
|
||||
{ id: 'mileage', label: '里程管理', icon: Route, component: MileageModule },
|
||||
];
|
||||
|
||||
const SCHEDULING_MODULE: ModuleConfig = {
|
||||
id: 'scheduling', label: '智能调度', icon: Activity, component: SchedulingModule,
|
||||
};
|
||||
|
||||
function AuthGate() {
|
||||
const { isLoading, isAuthenticated, error } = useAuth();
|
||||
const { isLoading, isAuthenticated, error, user } = useAuth();
|
||||
|
||||
const modules = useMemo(() => {
|
||||
if (canAccessScheduling(user?.roles)) {
|
||||
return [...BASE_MODULES, SCHEDULING_MODULE];
|
||||
}
|
||||
return BASE_MODULES;
|
||||
}, [user?.roles]);
|
||||
|
||||
if (isLoading) {
|
||||
return (
|
||||
@@ -29,7 +43,7 @@ function AuthGate() {
|
||||
return <UnauthorizedPage message={error || undefined} />;
|
||||
}
|
||||
|
||||
return <Shell modules={MODULES} />;
|
||||
return <Shell modules={modules} />;
|
||||
}
|
||||
|
||||
export default function App() {
|
||||
|
||||
@@ -65,7 +65,7 @@ export default function AuthProvider({ children }: { children: ReactNode }) {
|
||||
const jumpToken = params.get('jumpToken');
|
||||
|
||||
if (!jumpToken) {
|
||||
// 临时:无 token 时直接放行
|
||||
// 演示模式:无 token 时直接放行
|
||||
setState({ isLoading: false, isAuthenticated: true, user: null, error: null });
|
||||
return;
|
||||
}
|
||||
|
||||
@@ -3,7 +3,13 @@ import { createContext, useContext } from 'react';
|
||||
export interface AuthState {
|
||||
isLoading: boolean;
|
||||
isAuthenticated: boolean;
|
||||
user: { userName: string; permissionLevel: string; depName: string } | null;
|
||||
user: {
|
||||
userId: string;
|
||||
userName: string;
|
||||
permissionLevel: string;
|
||||
depName: string;
|
||||
roles?: string[];
|
||||
} | null;
|
||||
error: string | null;
|
||||
}
|
||||
|
||||
|
||||
@@ -14,6 +14,7 @@ const PATH_MAP: Record<string, string> = {
|
||||
'/vehicle': 'assets',
|
||||
'/assets': 'assets',
|
||||
'/mileage': 'mileage',
|
||||
'/scheduling': 'scheduling',
|
||||
};
|
||||
|
||||
function getInitialModule(modules: ModuleConfig[]): string {
|
||||
@@ -45,14 +46,19 @@ export function Shell({ modules }: { modules: ModuleConfig[] }) {
|
||||
}, [modules]);
|
||||
|
||||
useEffect(() => {
|
||||
// 同步 hash 到当前模块
|
||||
// 同步 hash 到当前模块:使用 replaceState 避免产生多余的 history 记录,
|
||||
// 否则在小程序/webview 环境下首次进入需要点两次返回才能退出
|
||||
if (window.location.hash.slice(1) !== activeModule) {
|
||||
window.location.hash = activeModule;
|
||||
const { pathname, search } = window.location;
|
||||
window.history.replaceState(null, '', `${pathname}${search}#${activeModule}`);
|
||||
}
|
||||
}, [activeModule]);
|
||||
|
||||
const switchModule = (id: string) => {
|
||||
window.location.hash = id;
|
||||
if (window.location.hash.slice(1) === id) return;
|
||||
const { pathname, search } = window.location;
|
||||
window.history.replaceState(null, '', `${pathname}${search}#${id}`);
|
||||
setActiveModule(id);
|
||||
};
|
||||
|
||||
const ActiveComponent = modules.find((m) => m.id === activeModule)?.component ?? modules[0]?.component;
|
||||
@@ -66,6 +72,7 @@ export function Shell({ modules }: { modules: ModuleConfig[] }) {
|
||||
|
||||
return (
|
||||
<DemoModeProvider enabled={true}>
|
||||
|
||||
<div className="flex min-h-screen">
|
||||
{/* 全局水印 */}
|
||||
<div className="fixed inset-0 pointer-events-none z-[9999] overflow-hidden" style={{ opacity: 0.06 }}>
|
||||
|
||||
@@ -30,7 +30,7 @@ import {
|
||||
LabelList,
|
||||
} from 'recharts';
|
||||
import type { SummaryData, TypeSummary, VehicleListItem, DeptGroup, RegionGroup, CustomerStats, RegionalInventoryStats } from './types';
|
||||
import { fetchSummary, fetchByType, fetchVehicleList, fetchWeeklyDetail, fetchDeptStats, fetchRegionStats, fetchCustomerStats, fetchInventoryStats, fetchRegionChart } from './api';
|
||||
import { fetchSummary, fetchByType, fetchVehicleList, fetchWeeklyDetail, fetchDeptStats, fetchRegionStats, fetchCustomerStats, fetchInventoryStats, fetchRegionChart, fetchSubjects, type SubjectOption } from './api';
|
||||
import type { WeeklyDetailItem } from './api';
|
||||
import { SearchSelect } from '../../components/SearchSelect';
|
||||
import { MultiSearchSelect } from '../../components/MultiSearchSelect';
|
||||
@@ -58,6 +58,13 @@ export default function AssetsModule() {
|
||||
}
|
||||
}, [activeTab]);
|
||||
const [theme, setTheme] = useState<'soft' | 'minimal' | 'vibrant'>('soft');
|
||||
|
||||
// 所属公司(归属主体)筛选 —— 影响全页聚合
|
||||
const [selectedSubject, setSelectedSubject] = useState<string | null>(null);
|
||||
const [subjects, setSubjects] = useState<SubjectOption[]>([]);
|
||||
const [subjectDropdownOpen, setSubjectDropdownOpen] = useState(false);
|
||||
const [subjectSearch, setSubjectSearch] = useState('');
|
||||
const subjectDropdownRef = useRef<HTMLDivElement>(null);
|
||||
const [expandedModels, setExpandedModels] = useState<Set<string>>(new Set());
|
||||
const [expandedAssetTypes, setExpandedAssetTypes] = useState<Set<string>>(new Set());
|
||||
const [showPlateNumbers, setShowPlateNumbers] = useState<{
|
||||
@@ -141,12 +148,12 @@ export default function AssetsModule() {
|
||||
setLoading(true);
|
||||
setError(null);
|
||||
const [s, byType, dept, region, cust, inv] = await Promise.all([
|
||||
fetchSummary(),
|
||||
fetchByType(),
|
||||
fetchDeptStats(),
|
||||
fetchRegionStats(),
|
||||
fetchCustomerStats(),
|
||||
fetchInventoryStats(),
|
||||
fetchSummary(selectedSubject),
|
||||
fetchByType(selectedSubject),
|
||||
fetchDeptStats(selectedSubject),
|
||||
fetchRegionStats(undefined, selectedSubject),
|
||||
fetchCustomerStats(selectedSubject),
|
||||
fetchInventoryStats(selectedSubject),
|
||||
]);
|
||||
setSummary(s);
|
||||
setProcessedData(byType);
|
||||
@@ -160,7 +167,7 @@ export default function AssetsModule() {
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}, []);
|
||||
}, [selectedSubject]);
|
||||
|
||||
useEffect(() => {
|
||||
loadData();
|
||||
@@ -168,22 +175,43 @@ export default function AssetsModule() {
|
||||
return () => clearInterval(interval);
|
||||
}, [loadData]);
|
||||
|
||||
// 归属公司列表(仅首次加载,公司集合相对稳定)
|
||||
useEffect(() => {
|
||||
fetchSubjects().then(setSubjects).catch(() => setSubjects([]));
|
||||
}, []);
|
||||
|
||||
// 点击外部关闭归属公司下拉
|
||||
useEffect(() => {
|
||||
if (!subjectDropdownOpen) return;
|
||||
const handler = (e: MouseEvent) => {
|
||||
if (subjectDropdownRef.current && !subjectDropdownRef.current.contains(e.target as Node)) {
|
||||
setSubjectDropdownOpen(false);
|
||||
}
|
||||
};
|
||||
document.addEventListener('mousedown', handler);
|
||||
return () => document.removeEventListener('mousedown', handler);
|
||||
}, [subjectDropdownOpen]);
|
||||
|
||||
// Re-fetch region data when filters change
|
||||
useEffect(() => {
|
||||
const hasFilter = regionFilters.customer || regionFilters.city || regionFilters.region;
|
||||
if (hasFilter) {
|
||||
fetchRegionStats({ customer: regionFilters.customer || undefined, city: regionFilters.city || undefined, region: regionFilters.region || undefined })
|
||||
.then(setRegionData).catch(() => {});
|
||||
fetchRegionStats(
|
||||
{ customer: regionFilters.customer || undefined, city: regionFilters.city || undefined, region: regionFilters.region || undefined },
|
||||
selectedSubject,
|
||||
).then(setRegionData).catch(() => {});
|
||||
} else {
|
||||
// No filters: use data from the main loadData cycle
|
||||
fetchRegionStats().then(setRegionData).catch(() => {});
|
||||
fetchRegionStats(undefined, selectedSubject).then(setRegionData).catch(() => {});
|
||||
}
|
||||
}, [regionFilters]);
|
||||
}, [regionFilters, selectedSubject]);
|
||||
|
||||
// Fetch region chart data when view changes
|
||||
useEffect(() => {
|
||||
fetchRegionChart(regionChartView, regionChartView === 'province' ? 5 : 8).then(setRegionChartData).catch(() => setRegionChartData([]));
|
||||
}, [regionChartView]);
|
||||
fetchRegionChart(regionChartView, regionChartView === 'province' ? 5 : 8, 'realtime', selectedSubject)
|
||||
.then(setRegionChartData)
|
||||
.catch(() => setRegionChartData([]));
|
||||
}, [regionChartView, selectedSubject]);
|
||||
|
||||
// Load modal vehicles
|
||||
useEffect(() => {
|
||||
@@ -236,11 +264,11 @@ export default function AssetsModule() {
|
||||
else if (showPlateNumbers.isTrailer === false) params.vehicleType = '其他';
|
||||
}
|
||||
}
|
||||
fetchVehicleList(params)
|
||||
fetchVehicleList({ ...params, subject: selectedSubject })
|
||||
.then(setModalVehicles)
|
||||
.catch(() => setModalVehicles([]))
|
||||
.finally(() => setModalLoading(false));
|
||||
}, [showPlateNumbers]);
|
||||
}, [showPlateNumbers, selectedSubject]);
|
||||
|
||||
const allTypesExpanded = processedData.length > 0 && processedData.every((t) => expandedAssetTypes.has(t.type));
|
||||
|
||||
@@ -440,9 +468,9 @@ export default function AssetsModule() {
|
||||
const [customerProvinceData, setCustomerProvinceData] = useState<{ name: string; value: number }[]>([]);
|
||||
useEffect(() => {
|
||||
if (customerChartView === 'province') {
|
||||
fetchRegionChart('province', 5, 'vehicle').then(setCustomerProvinceData).catch(() => setCustomerProvinceData([]));
|
||||
fetchRegionChart('province', 5, 'vehicle', selectedSubject).then(setCustomerProvinceData).catch(() => setCustomerProvinceData([]));
|
||||
}
|
||||
}, [customerChartView]);
|
||||
}, [customerChartView, selectedSubject]);
|
||||
|
||||
const customerPieData = useMemo(() => {
|
||||
if (customerChartView === 'region') {
|
||||
@@ -513,6 +541,115 @@ export default function AssetsModule() {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* 归属公司作用域筛选 (Scope Chip) */}
|
||||
<div className="flex items-center justify-center px-4 pt-1">
|
||||
<div className="relative" ref={subjectDropdownRef}>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => {
|
||||
setSubjectDropdownOpen((o) => !o);
|
||||
setSubjectSearch('');
|
||||
}}
|
||||
className={`group inline-flex items-center gap-1.5 h-7 pl-2.5 pr-2 rounded-full border text-[11px] font-normal transition-all cursor-pointer ${
|
||||
selectedSubject
|
||||
? 'bg-blue-50 border-blue-300 text-blue-700 hover:bg-blue-100'
|
||||
: 'bg-white border-gray-200 text-gray-500 hover:border-gray-300 hover:text-gray-700'
|
||||
}`}
|
||||
title={selectedSubject || '全部公司'}
|
||||
>
|
||||
<Filter size={11} className={selectedSubject ? 'text-blue-500' : 'text-gray-400'} />
|
||||
<span className="max-w-[180px] truncate">
|
||||
所属公司:{selectedSubject || '全部公司'}
|
||||
</span>
|
||||
{selectedSubject ? (
|
||||
<span
|
||||
role="button"
|
||||
tabIndex={0}
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
setSelectedSubject(null);
|
||||
}}
|
||||
className="ml-0.5 w-3.5 h-3.5 inline-flex items-center justify-center rounded-full text-blue-500 hover:bg-blue-200 hover:text-blue-700 cursor-pointer"
|
||||
aria-label="清除归属公司筛选"
|
||||
>
|
||||
×
|
||||
</span>
|
||||
) : (
|
||||
<ChevronDown size={11} className="text-gray-400" />
|
||||
)}
|
||||
</button>
|
||||
{subjectDropdownOpen && (
|
||||
<div className="absolute left-1/2 -translate-x-1/2 top-full mt-1.5 w-[320px] max-h-[380px] bg-white border border-gray-200 rounded-lg shadow-lg z-50 flex flex-col">
|
||||
<div className="p-2 border-b border-gray-100">
|
||||
<div className="relative">
|
||||
<Search size={12} className="absolute left-2 top-1/2 -translate-y-1/2 text-gray-400" />
|
||||
<input
|
||||
autoFocus
|
||||
value={subjectSearch}
|
||||
onChange={(e) => setSubjectSearch(e.target.value)}
|
||||
placeholder="搜索公司名"
|
||||
className="w-full h-7 pl-6 pr-2 text-[11px] bg-gray-50 border border-gray-100 rounded focus:outline-none focus:border-blue-300 focus:bg-white"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="overflow-y-auto flex-1 py-1">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => {
|
||||
setSelectedSubject(null);
|
||||
setSubjectDropdownOpen(false);
|
||||
}}
|
||||
className={`w-full flex items-center justify-between px-3 py-1.5 text-[11px] hover:bg-gray-50 cursor-pointer ${
|
||||
!selectedSubject ? 'text-blue-600 font-medium' : 'text-gray-700'
|
||||
}`}
|
||||
>
|
||||
<span className="flex items-center gap-1.5">
|
||||
<span className={`w-1.5 h-1.5 rounded-full ${!selectedSubject ? 'bg-blue-500' : 'bg-gray-300'}`} />
|
||||
全部公司
|
||||
</span>
|
||||
<span className="text-[10px] text-gray-400">
|
||||
{subjects.reduce((s, x) => s + x.total, 0)} 台
|
||||
</span>
|
||||
</button>
|
||||
<div className="my-1 mx-3 border-t border-gray-100" />
|
||||
{subjects
|
||||
.filter((s) => !subjectSearch || s.name.toLowerCase().includes(subjectSearch.toLowerCase()))
|
||||
.map((s) => {
|
||||
const active = selectedSubject === s.name;
|
||||
return (
|
||||
<button
|
||||
key={s.name}
|
||||
type="button"
|
||||
onClick={() => {
|
||||
setSelectedSubject(s.name);
|
||||
setSubjectDropdownOpen(false);
|
||||
}}
|
||||
className={`w-full flex items-center justify-between gap-2 px-3 py-1.5 text-[11px] hover:bg-gray-50 cursor-pointer ${
|
||||
active ? 'text-blue-600 font-medium bg-blue-50/40' : 'text-gray-700'
|
||||
}`}
|
||||
title={s.name}
|
||||
>
|
||||
<span className="flex items-center gap-1.5 min-w-0">
|
||||
<span className={`w-1.5 h-1.5 rounded-full flex-shrink-0 ${active ? 'bg-blue-500' : 'bg-gray-300'}`} />
|
||||
<span className="truncate">{s.name}</span>
|
||||
</span>
|
||||
<span className="text-[10px] text-gray-400 flex-shrink-0 tabular-nums">
|
||||
{s.total} 台
|
||||
<span className="mx-1 text-gray-200">·</span>
|
||||
<span className="text-green-500">运营 {s.operating}</span>
|
||||
</span>
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
{subjects.filter((s) => !subjectSearch || s.name.toLowerCase().includes(subjectSearch.toLowerCase())).length === 0 && (
|
||||
<div className="px-3 py-6 text-center text-[11px] text-gray-400">未找到匹配公司</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Tab row */}
|
||||
<div className="flex items-center justify-center gap-1 px-4 pb-0 overflow-x-auto no-scrollbar">
|
||||
{TABS.map(tab => (
|
||||
|
||||
@@ -11,12 +11,29 @@ import { fetchJson } from '../../auth/api-client';
|
||||
|
||||
const BASE = '/api/vehicles';
|
||||
|
||||
export async function fetchSummary(): Promise<SummaryData> {
|
||||
return fetchJson<SummaryData>(`${BASE}/summary`);
|
||||
export interface SubjectOption {
|
||||
name: string;
|
||||
total: number;
|
||||
inventory: number;
|
||||
operating: number;
|
||||
}
|
||||
|
||||
export async function fetchByType(): Promise<TypeSummary[]> {
|
||||
return fetchJson<TypeSummary[]>(`${BASE}/by-type`);
|
||||
function withSubject(path: string, subject?: string | null): string {
|
||||
if (!subject) return path;
|
||||
const sep = path.includes('?') ? '&' : '?';
|
||||
return `${path}${sep}subject=${encodeURIComponent(subject)}`;
|
||||
}
|
||||
|
||||
export async function fetchSubjects(): Promise<SubjectOption[]> {
|
||||
return fetchJson<SubjectOption[]>(`${BASE}/subjects`);
|
||||
}
|
||||
|
||||
export async function fetchSummary(subject?: string | null): Promise<SummaryData> {
|
||||
return fetchJson<SummaryData>(withSubject(`${BASE}/summary`, subject));
|
||||
}
|
||||
|
||||
export async function fetchByType(subject?: string | null): Promise<TypeSummary[]> {
|
||||
return fetchJson<TypeSummary[]>(withSubject(`${BASE}/by-type`, subject));
|
||||
}
|
||||
|
||||
export async function fetchVehicleList(params: {
|
||||
@@ -32,6 +49,7 @@ export async function fetchVehicleList(params: {
|
||||
isTrailer?: string;
|
||||
department?: string;
|
||||
attendance?: string;
|
||||
subject?: string | null;
|
||||
}): Promise<VehicleListItem[]> {
|
||||
const query = new URLSearchParams();
|
||||
if (params.batch) query.set('batch', params.batch);
|
||||
@@ -46,6 +64,7 @@ export async function fetchVehicleList(params: {
|
||||
if (params.isTrailer) query.set('isTrailer', params.isTrailer);
|
||||
if (params.department) query.set('department', params.department);
|
||||
if (params.attendance) query.set('attendance', params.attendance);
|
||||
if (params.subject) query.set('subject', params.subject);
|
||||
return fetchJson<VehicleListItem[]>(`${BASE}/list?${query.toString()}`);
|
||||
}
|
||||
|
||||
@@ -57,29 +76,40 @@ export interface WeeklyDetailItem {
|
||||
customer_name: string | null;
|
||||
}
|
||||
|
||||
export async function fetchDeptStats(): Promise<DeptGroup[]> {
|
||||
return fetchJson<DeptGroup[]>(`${BASE}/dept-stats`);
|
||||
export async function fetchDeptStats(subject?: string | null): Promise<DeptGroup[]> {
|
||||
return fetchJson<DeptGroup[]>(withSubject(`${BASE}/dept-stats`, subject));
|
||||
}
|
||||
|
||||
export async function fetchRegionStats(params?: { customer?: string; city?: string; region?: string }): Promise<RegionGroup[]> {
|
||||
export async function fetchRegionStats(
|
||||
params?: { customer?: string; city?: string; region?: string },
|
||||
subject?: string | null,
|
||||
): Promise<RegionGroup[]> {
|
||||
const query = new URLSearchParams();
|
||||
if (params?.customer) query.set('customer', params.customer);
|
||||
if (params?.city) query.set('city', params.city);
|
||||
if (params?.region) query.set('region', params.region);
|
||||
if (subject) query.set('subject', subject);
|
||||
const qs = query.toString();
|
||||
return fetchJson<RegionGroup[]>(`${BASE}/region-stats${qs ? `?${qs}` : ''}`);
|
||||
}
|
||||
|
||||
export async function fetchCustomerStats(): Promise<CustomerStats[]> {
|
||||
return fetchJson<CustomerStats[]>(`${BASE}/customer-stats`);
|
||||
export async function fetchCustomerStats(subject?: string | null): Promise<CustomerStats[]> {
|
||||
return fetchJson<CustomerStats[]>(withSubject(`${BASE}/customer-stats`, subject));
|
||||
}
|
||||
|
||||
export async function fetchInventoryStats(): Promise<RegionalInventoryStats[]> {
|
||||
return fetchJson<RegionalInventoryStats[]>(`${BASE}/inventory-stats`);
|
||||
export async function fetchInventoryStats(subject?: string | null): Promise<RegionalInventoryStats[]> {
|
||||
return fetchJson<RegionalInventoryStats[]>(withSubject(`${BASE}/inventory-stats`, subject));
|
||||
}
|
||||
|
||||
export async function fetchRegionChart(groupBy: string, top = 8, source = 'realtime'): Promise<{ name: string; value: number }[]> {
|
||||
return fetchJson<{ name: string; value: number }[]>(`${BASE}/region-chart?groupBy=${groupBy}&top=${top}&source=${source}`);
|
||||
export async function fetchRegionChart(
|
||||
groupBy: string,
|
||||
top = 8,
|
||||
source = 'realtime',
|
||||
subject?: string | null,
|
||||
): Promise<{ name: string; value: number }[]> {
|
||||
return fetchJson<{ name: string; value: number }[]>(
|
||||
withSubject(`${BASE}/region-chart?groupBy=${groupBy}&top=${top}&source=${source}`, subject),
|
||||
);
|
||||
}
|
||||
|
||||
export async function fetchWeeklyDetail(type: string): Promise<WeeklyDetailItem[]> {
|
||||
|
||||
@@ -279,6 +279,20 @@ export default function MonitoringView() {
|
||||
return () => { document.body.style.overflow = ''; };
|
||||
}, [isFullscreen]);
|
||||
|
||||
// 检测是否在小程序 webview 中(微信/抖音/支付宝等),且当前是竖屏
|
||||
// 小程序 webview 无法调用系统旋转 API,只能用 CSS rotate 强制横屏
|
||||
const forceLandscape = useMemo(() => {
|
||||
if (typeof window === 'undefined') return false;
|
||||
const ua = navigator.userAgent || '';
|
||||
const isMiniProgram =
|
||||
/miniProgram/i.test(ua) ||
|
||||
/toutiaomicroapp/i.test(ua) ||
|
||||
/AlipayClient/i.test(ua) ||
|
||||
(window as any).__wxjs_environment === 'miniprogram';
|
||||
const isPortrait = window.innerHeight > window.innerWidth;
|
||||
return isMiniProgram && isPortrait;
|
||||
}, [isFullscreen]);
|
||||
|
||||
return (
|
||||
<>
|
||||
{/* 顶部哨兵:离开视口时显示回到顶部按钮 */}
|
||||
@@ -291,7 +305,20 @@ export default function MonitoringView() {
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
exit={{ opacity: 0 }}
|
||||
className="fixed inset-0 z-[100] bg-slate-950 flex flex-col overflow-hidden"
|
||||
className="fixed z-[100] bg-slate-950 flex flex-col overflow-hidden"
|
||||
style={
|
||||
forceLandscape
|
||||
? {
|
||||
// 小程序 webview 无法真横屏,强制 CSS 旋转 90 度模拟横屏
|
||||
top: 0,
|
||||
left: '100vw',
|
||||
width: '100vh',
|
||||
height: '100vw',
|
||||
transform: 'rotate(90deg)',
|
||||
transformOrigin: 'top left',
|
||||
}
|
||||
: { top: 0, left: 0, right: 0, bottom: 0 }
|
||||
}
|
||||
>
|
||||
{/* Top bar: compact inline KPI */}
|
||||
<div className="flex-shrink-0 px-3 py-2 border-b border-slate-800/60 flex items-center justify-between">
|
||||
|
||||
342
src/modules/scheduling/NotificationHistory.tsx
Normal file
342
src/modules/scheduling/NotificationHistory.tsx
Normal file
@@ -0,0 +1,342 @@
|
||||
import { useCallback, useEffect, useMemo, useState } from 'react';
|
||||
import { X, RotateCcw, Clock, CheckCircle2, XCircle, Send, Loader2, ChevronRight } from 'lucide-react';
|
||||
import { motion, AnimatePresence } from 'motion/react';
|
||||
import { fetchNotifications, updateNotification } from './api';
|
||||
import type { NotificationRecord, NotificationStatus, SchedulingSuggestion, CandidateVehicle } from './types';
|
||||
import Blur from '../../components/Blur';
|
||||
import SwapPreview from './SwapPreview';
|
||||
|
||||
interface Props {
|
||||
onClose: () => void;
|
||||
onChange?: () => void;
|
||||
/** When true, pre-filter to the last 7 days (excluding cancelled). */
|
||||
recentOnly?: boolean;
|
||||
/** Current suggestions used to enrich records with customer/dept/manager and enable drill-down. */
|
||||
suggestions?: SchedulingSuggestion[];
|
||||
}
|
||||
|
||||
const SEVEN_DAYS_MS = 7 * 24 * 60 * 60 * 1000;
|
||||
|
||||
function shortDept(dept: string | null | undefined): string {
|
||||
return (dept || '').replace('业务', '');
|
||||
}
|
||||
|
||||
type StatusTab = 'all' | NotificationStatus;
|
||||
|
||||
const STATUS_TABS: { key: StatusTab; label: string }[] = [
|
||||
{ key: 'all', label: '全部' },
|
||||
{ key: 'sent', label: '待执行' },
|
||||
{ key: 'executed', label: '已执行' },
|
||||
{ key: 'cancelled', label: '已取消' },
|
||||
];
|
||||
|
||||
function statusBadge(status: NotificationStatus) {
|
||||
if (status === 'sent') return { text: '待执行', icon: <Send size={9} />, cls: 'text-amber-700 bg-amber-50' };
|
||||
if (status === 'executed') return { text: '已执行', icon: <CheckCircle2 size={9} />, cls: 'text-emerald-700 bg-emerald-50' };
|
||||
return { text: '已取消', icon: <XCircle size={9} />, cls: 'text-slate-500 bg-slate-100' };
|
||||
}
|
||||
|
||||
function fmtDateTime(iso: string): string {
|
||||
if (!iso) return '';
|
||||
const d = new Date(iso);
|
||||
const y = d.getFullYear();
|
||||
const m = String(d.getMonth() + 1).padStart(2, '0');
|
||||
const day = String(d.getDate()).padStart(2, '0');
|
||||
const hh = String(d.getHours()).padStart(2, '0');
|
||||
const mm = String(d.getMinutes()).padStart(2, '0');
|
||||
return `${y}-${m}-${day} ${hh}:${mm}`;
|
||||
}
|
||||
|
||||
export default function NotificationHistory({ onClose, onChange, recentOnly = false, suggestions }: Props) {
|
||||
const [records, setRecords] = useState<NotificationRecord[]>([]);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [tab, setTab] = useState<StatusTab>('all');
|
||||
const [recent7d, setRecent7d] = useState(recentOnly);
|
||||
const [mutatingId, setMutatingId] = useState<number | null>(null);
|
||||
const [executeTarget, setExecuteTarget] = useState<NotificationRecord | null>(null);
|
||||
const [afterMileageInput, setAfterMileageInput] = useState('');
|
||||
const [notesInput, setNotesInput] = useState('');
|
||||
const [drillTarget, setDrillTarget] = useState<{ suggestion: SchedulingSuggestion; candidate: CandidateVehicle } | null>(null);
|
||||
|
||||
const suggestionById = useMemo(() => {
|
||||
const map = new Map<string, SchedulingSuggestion>();
|
||||
for (const s of suggestions ?? []) map.set(s.id, s);
|
||||
return map;
|
||||
}, [suggestions]);
|
||||
|
||||
const visibleRecords = recent7d
|
||||
? records.filter(r => {
|
||||
const t = Date.parse(r.createdAt);
|
||||
return Number.isFinite(t) && Date.now() - t <= SEVEN_DAYS_MS;
|
||||
})
|
||||
: records;
|
||||
|
||||
const load = useCallback(async () => {
|
||||
setLoading(true);
|
||||
try {
|
||||
const resp = await fetchNotifications(tab === 'all' ? undefined : tab);
|
||||
setRecords(resp.records);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}, [tab]);
|
||||
|
||||
useEffect(() => { load(); }, [load]);
|
||||
|
||||
const handleExecuteClick = (rec: NotificationRecord) => {
|
||||
setExecuteTarget(rec);
|
||||
setAfterMileageInput('');
|
||||
setNotesInput('');
|
||||
};
|
||||
|
||||
const handleExecuteConfirm = async () => {
|
||||
if (!executeTarget) return;
|
||||
setMutatingId(executeTarget.id);
|
||||
try {
|
||||
const body: { status: NotificationStatus; notes?: string; afterMileage?: number } = { status: 'executed' };
|
||||
if (notesInput.trim()) body.notes = notesInput.trim();
|
||||
const parsed = Number(afterMileageInput);
|
||||
if (Number.isFinite(parsed) && parsed > 0) body.afterMileage = parsed;
|
||||
await updateNotification(executeTarget.id, body);
|
||||
setExecuteTarget(null);
|
||||
await load();
|
||||
onChange?.();
|
||||
} finally {
|
||||
setMutatingId(null);
|
||||
}
|
||||
};
|
||||
|
||||
const handleCancel = async (rec: NotificationRecord) => {
|
||||
if (!confirm(`确定取消 ${rec.currentPlate} → ${rec.candidatePlate} 的干预?`)) return;
|
||||
setMutatingId(rec.id);
|
||||
try {
|
||||
await updateNotification(rec.id, { status: 'cancelled' });
|
||||
await load();
|
||||
onChange?.();
|
||||
} finally {
|
||||
setMutatingId(null);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="fixed inset-0 bg-black/50 backdrop-blur-sm z-[60] flex items-end sm:items-center justify-center" onClick={onClose}>
|
||||
<motion.div
|
||||
initial={{ y: 40, opacity: 0 }}
|
||||
animate={{ y: 0, opacity: 1 }}
|
||||
onClick={e => e.stopPropagation()}
|
||||
className="bg-white rounded-t-2xl sm:rounded-2xl shadow-2xl w-full sm:max-w-xl overflow-hidden flex flex-col max-h-[85vh] sm:mx-4"
|
||||
>
|
||||
{/* Header */}
|
||||
<div className="bg-slate-800 px-4 py-3 flex items-center justify-between flex-shrink-0">
|
||||
<div className="flex items-center gap-2">
|
||||
<Clock size={16} className="text-white" />
|
||||
<span className="text-white font-bold text-sm">调度记录</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-1">
|
||||
<button onClick={load} disabled={loading} className="text-slate-300 hover:text-white p-1 cursor-pointer">
|
||||
<RotateCcw size={14} className={loading ? 'animate-spin' : ''} />
|
||||
</button>
|
||||
<button onClick={onClose} className="text-slate-300 hover:text-white p-1 cursor-pointer">
|
||||
<X size={18} />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Status tabs */}
|
||||
<div className="border-b border-slate-100 px-4 py-2 flex gap-1.5 flex-shrink-0 flex-wrap items-center">
|
||||
{STATUS_TABS.map(t => (
|
||||
<button
|
||||
key={t.key}
|
||||
onClick={() => setTab(t.key)}
|
||||
className={`text-[11px] px-3 py-1 rounded-full font-medium cursor-pointer transition-colors ${
|
||||
tab === t.key ? 'bg-slate-800 text-white' : 'bg-slate-100 text-slate-500 hover:bg-slate-200'
|
||||
}`}
|
||||
>
|
||||
{t.label}
|
||||
</button>
|
||||
))}
|
||||
<div className="ml-auto">
|
||||
<button
|
||||
onClick={() => setRecent7d(v => !v)}
|
||||
className={`text-[11px] px-3 py-1 rounded-full font-medium cursor-pointer transition-colors ${
|
||||
recent7d ? 'bg-emerald-600 text-white' : 'bg-slate-100 text-slate-500 hover:bg-slate-200'
|
||||
}`}
|
||||
title="仅看最近 7 天"
|
||||
>
|
||||
近 7 天
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Body */}
|
||||
<div className="flex-1 overflow-y-auto">
|
||||
{loading && records.length === 0 ? (
|
||||
<div className="py-16 text-center text-slate-400 text-xs flex items-center justify-center gap-2">
|
||||
<Loader2 size={14} className="animate-spin" /> 加载中
|
||||
</div>
|
||||
) : visibleRecords.length === 0 ? (
|
||||
<div className="py-16 text-center text-slate-400">
|
||||
<Clock className="w-8 h-8 text-slate-200 mx-auto mb-2" />
|
||||
<p className="text-sm">{recent7d ? '最近 7 天暂无干预记录' : '暂无记录'}</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="divide-y divide-slate-50">
|
||||
{visibleRecords.map(rec => {
|
||||
const badge = statusBadge(rec.status);
|
||||
const busy = mutatingId === rec.id;
|
||||
const suggestion = suggestionById.get(rec.suggestionId);
|
||||
const candidate = suggestion?.candidates.find(c => c.plateNumber === rec.candidatePlate) ?? null;
|
||||
const canDrill = !!suggestion && !!candidate;
|
||||
const v = suggestion?.currentVehicle;
|
||||
|
||||
const handleRowClick = () => {
|
||||
if (canDrill && suggestion && candidate) setDrillTarget({ suggestion, candidate });
|
||||
};
|
||||
|
||||
return (
|
||||
<div
|
||||
key={rec.id}
|
||||
onClick={handleRowClick}
|
||||
className={`px-4 py-3 transition-colors ${canDrill ? 'cursor-pointer hover:bg-slate-50/60 active:bg-slate-100' : ''}`}
|
||||
>
|
||||
<div className="flex items-center justify-between gap-2 mb-1">
|
||||
<div className="flex items-center gap-1.5 text-xs min-w-0">
|
||||
<span className="font-mono font-bold text-slate-900"><Blur>{rec.currentPlate}</Blur></span>
|
||||
<span className="text-slate-400">→</span>
|
||||
<span className="font-mono font-bold text-blue-700"><Blur>{rec.candidatePlate}</Blur></span>
|
||||
</div>
|
||||
<div className="flex items-center gap-1.5 flex-shrink-0">
|
||||
<span className={`text-[9px] font-bold px-1.5 py-0.5 rounded flex items-center gap-0.5 ${badge.cls}`}>
|
||||
{badge.icon} {badge.text}
|
||||
</span>
|
||||
{canDrill && <ChevronRight size={12} className="text-slate-300" />}
|
||||
</div>
|
||||
</div>
|
||||
{v && (
|
||||
<div className="flex items-center gap-1.5 text-[10px] text-slate-500 mb-0.5 truncate">
|
||||
{v.department && <span className="font-medium">{shortDept(v.department)}</span>}
|
||||
{v.manager && <span>{v.manager}</span>}
|
||||
<span className="text-slate-400 truncate"><Blur>{v.customer || '-'}</Blur></span>
|
||||
</div>
|
||||
)}
|
||||
<div className="flex items-center gap-3 text-[10px] text-slate-400">
|
||||
{rec.operatorName && <span>操作人 {rec.operatorName}</span>}
|
||||
<span>{fmtDateTime(rec.createdAt)}</span>
|
||||
{rec.status === 'executed' && rec.executedAt && (
|
||||
<span className="text-emerald-500">执行 {fmtDateTime(rec.executedAt)}</span>
|
||||
)}
|
||||
</div>
|
||||
{rec.notes && (
|
||||
<div className="mt-1 text-[10px] text-slate-500 bg-slate-50 rounded px-2 py-1">{rec.notes}</div>
|
||||
)}
|
||||
{rec.status === 'sent' && (
|
||||
<div className="mt-2 flex items-center gap-2" onClick={e => e.stopPropagation()}>
|
||||
<button
|
||||
onClick={() => handleExecuteClick(rec)}
|
||||
disabled={busy}
|
||||
className="text-[10px] font-bold text-white bg-emerald-600 hover:bg-emerald-500 disabled:opacity-50 px-2.5 py-1 rounded cursor-pointer transition-colors flex items-center gap-1"
|
||||
>
|
||||
<CheckCircle2 size={10} /> 标记已执行
|
||||
</button>
|
||||
<button
|
||||
onClick={() => handleCancel(rec)}
|
||||
disabled={busy}
|
||||
className="text-[10px] font-medium text-slate-500 hover:text-rose-600 disabled:opacity-50 px-2 py-1 rounded cursor-pointer transition-colors"
|
||||
>
|
||||
取消
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
{/* Execute confirmation modal */}
|
||||
<AnimatePresence>
|
||||
{executeTarget && (
|
||||
<div
|
||||
className="fixed inset-0 bg-black/50 backdrop-blur-sm z-[80] flex items-end sm:items-center justify-center"
|
||||
onClick={() => mutatingId === null && setExecuteTarget(null)}
|
||||
>
|
||||
<motion.div
|
||||
initial={{ y: 40, opacity: 0 }}
|
||||
animate={{ y: 0, opacity: 1 }}
|
||||
exit={{ y: 40, opacity: 0 }}
|
||||
onClick={e => e.stopPropagation()}
|
||||
className="bg-white rounded-t-2xl sm:rounded-2xl shadow-2xl w-full sm:max-w-sm overflow-hidden flex flex-col sm:mx-4"
|
||||
>
|
||||
<div className="bg-emerald-600 px-4 py-3 flex items-center justify-between">
|
||||
<span className="text-white font-bold text-sm">确认已执行</span>
|
||||
<button
|
||||
onClick={() => mutatingId === null && setExecuteTarget(null)}
|
||||
disabled={mutatingId !== null}
|
||||
className="text-emerald-100 hover:text-white p-1 cursor-pointer disabled:opacity-50"
|
||||
>
|
||||
<X size={16} />
|
||||
</button>
|
||||
</div>
|
||||
<div className="px-4 py-4 space-y-3">
|
||||
<div className="text-xs text-slate-500">
|
||||
<span className="font-mono font-bold text-slate-900"><Blur>{executeTarget.currentPlate}</Blur></span>
|
||||
<span className="mx-1.5">→</span>
|
||||
<span className="font-mono font-bold text-blue-700"><Blur>{executeTarget.candidatePlate}</Blur></span>
|
||||
</div>
|
||||
<div>
|
||||
<label className="text-[10px] text-slate-400 uppercase font-bold block mb-1">执行后里程 (km, 可选)</label>
|
||||
<input
|
||||
type="number"
|
||||
inputMode="numeric"
|
||||
value={afterMileageInput}
|
||||
onChange={e => setAfterMileageInput(e.target.value)}
|
||||
placeholder="例如 45230"
|
||||
className="w-full px-3 py-2 text-xs bg-slate-50 rounded-lg border border-slate-200 outline-none focus:ring-2 focus:ring-emerald-500/20 focus:border-emerald-400 transition-all"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="text-[10px] text-slate-400 uppercase font-bold block mb-1">备注 (可选)</label>
|
||||
<textarea
|
||||
value={notesInput}
|
||||
onChange={e => setNotesInput(e.target.value)}
|
||||
rows={2}
|
||||
placeholder="例如:司机已到位,交接完成"
|
||||
className="w-full px-3 py-2 text-xs bg-slate-50 rounded-lg border border-slate-200 outline-none focus:ring-2 focus:ring-emerald-500/20 focus:border-emerald-400 transition-all resize-none"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="border-t border-slate-100 px-4 py-3 flex gap-2">
|
||||
<button
|
||||
onClick={() => setExecuteTarget(null)}
|
||||
disabled={mutatingId !== null}
|
||||
className="flex-1 py-2 text-xs font-bold text-slate-500 bg-slate-50 hover:bg-slate-100 rounded-lg cursor-pointer disabled:opacity-50 transition-colors"
|
||||
>
|
||||
取消
|
||||
</button>
|
||||
<button
|
||||
onClick={handleExecuteConfirm}
|
||||
disabled={mutatingId !== null}
|
||||
className="flex-1 py-2 text-xs font-bold text-white bg-emerald-600 hover:bg-emerald-500 rounded-lg cursor-pointer disabled:opacity-50 transition-colors"
|
||||
>
|
||||
{mutatingId !== null ? '保存中...' : '确认'}
|
||||
</button>
|
||||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
|
||||
{/* Drill-down: replacement plan */}
|
||||
{drillTarget && (
|
||||
<SwapPreview
|
||||
suggestion={drillTarget.suggestion}
|
||||
candidate={drillTarget.candidate}
|
||||
onClose={() => setDrillTarget(null)}
|
||||
onSuccess={() => { load(); onChange?.(); }}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
637
src/modules/scheduling/SchedulingModule.tsx
Normal file
637
src/modules/scheduling/SchedulingModule.tsx
Normal file
@@ -0,0 +1,637 @@
|
||||
import { useState, useEffect, useCallback, useMemo, useRef } from 'react';
|
||||
import { Filter, RotateCcw, X, Search, ChevronDown, CheckSquare, Send, Clock, Download } from 'lucide-react';
|
||||
import { motion, AnimatePresence } from 'motion/react';
|
||||
import { fetchSuggestions, sendNotifyBatch } from './api';
|
||||
import type { SchedulingResponse, SchedulingSuggestion, CandidateVehicle } from './types';
|
||||
import SuggestionList from './SuggestionList';
|
||||
import SuggestionDetail from './SuggestionDetail';
|
||||
import NotificationHistory from './NotificationHistory';
|
||||
import { exportSuggestionsCsv } from './csv-export';
|
||||
import Blur from '../../components/Blur';
|
||||
|
||||
type TypeFilter = 'all' | 'qualified' | 'hopeless';
|
||||
|
||||
interface AdvancedFilters {
|
||||
plateSearch: string;
|
||||
region: string;
|
||||
vehicleType: string;
|
||||
customer: string;
|
||||
department: string;
|
||||
manager: string;
|
||||
}
|
||||
|
||||
const EMPTY_FILTERS: AdvancedFilters = { plateSearch: '', region: '', vehicleType: '', customer: '', department: '', manager: '' };
|
||||
|
||||
function shortTargetName(name: string): string {
|
||||
const match = name.match(/(\d+)[辆台](.+)/);
|
||||
if (!match) return name;
|
||||
const count = match[1];
|
||||
let desc = match[2];
|
||||
desc = desc.replace('4.5T普货', '普货');
|
||||
desc = desc.replace('4.5T冷链车', '冷藏车');
|
||||
desc = desc.replace('4.5T冷链', '冷藏车');
|
||||
return `${count}台${desc}`;
|
||||
}
|
||||
|
||||
function hasActiveFilters(f: AdvancedFilters): boolean {
|
||||
return f.plateSearch !== '' || f.region !== '' || f.vehicleType !== '' || f.customer !== '';
|
||||
}
|
||||
|
||||
function FilterSelect({ label, options, value, onChange, placeholder }: {
|
||||
label: string; options: string[]; value: string; onChange: (v: string) => void; placeholder: string;
|
||||
}) {
|
||||
const [open, setOpen] = useState(false);
|
||||
const [search, setSearch] = useState('');
|
||||
const ref = useRef<HTMLDivElement>(null);
|
||||
const filtered = options.filter(o => o.toLowerCase().includes(search.toLowerCase()));
|
||||
|
||||
useEffect(() => {
|
||||
const handler = (e: MouseEvent) => { if (ref.current && !ref.current.contains(e.target as Node)) setOpen(false); };
|
||||
document.addEventListener('mousedown', handler);
|
||||
return () => document.removeEventListener('mousedown', handler);
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div ref={ref} className="space-y-1">
|
||||
<label className="text-[10px] text-slate-400 uppercase font-bold">{label}</label>
|
||||
<button
|
||||
onClick={() => setOpen(!open)}
|
||||
className="w-full flex items-center justify-between bg-slate-50 rounded-lg px-3 py-2 text-xs text-left cursor-pointer hover:bg-slate-100 transition-colors"
|
||||
>
|
||||
<span className={value ? 'text-slate-800 font-medium' : 'text-slate-400'}>{value || placeholder}</span>
|
||||
<ChevronDown size={14} className={`text-slate-400 transition-transform ${open ? 'rotate-180' : ''}`} />
|
||||
</button>
|
||||
{open && (
|
||||
<div className="bg-white border border-slate-200 rounded-lg shadow-lg max-h-48 overflow-hidden z-10 relative">
|
||||
{options.length > 5 && (
|
||||
<div className="p-1.5 border-b border-slate-100">
|
||||
<div className="relative">
|
||||
<Search size={12} className="absolute left-2 top-1/2 -translate-y-1/2 text-slate-400" />
|
||||
<input type="text" value={search} onChange={e => setSearch(e.target.value)} placeholder="搜索..." autoFocus
|
||||
className="w-full pl-7 pr-2 py-1.5 text-xs bg-slate-50 rounded border-none outline-none" />
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
<div className="overflow-y-auto max-h-36">
|
||||
<button onClick={() => { onChange(''); setOpen(false); setSearch(''); }}
|
||||
className={`w-full text-left px-3 py-2 text-xs hover:bg-slate-50 cursor-pointer ${!value ? 'text-blue-600 font-bold' : 'text-slate-400'}`}>全部</button>
|
||||
{filtered.map(opt => (
|
||||
<button key={opt} onClick={() => { onChange(opt); setOpen(false); setSearch(''); }}
|
||||
className={`w-full text-left px-3 py-2 text-xs hover:bg-slate-50 cursor-pointer ${value === opt ? 'text-blue-600 font-bold bg-blue-50' : 'text-slate-700'}`}>{opt}</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
/** Skeleton pulse block */
|
||||
function Sk({ className }: { className?: string }) {
|
||||
return <div className={`animate-pulse bg-slate-200/70 rounded ${className ?? ''}`} />;
|
||||
}
|
||||
|
||||
function SkeletonPage() {
|
||||
return (
|
||||
<div className="min-h-screen bg-[#F0F4F8] font-sans p-3 md:p-6">
|
||||
<div className="max-w-6xl mx-auto flex flex-col gap-3 pb-16 md:pb-0">
|
||||
{/* Cards skeleton */}
|
||||
<div className="grid grid-cols-3 gap-2.5">
|
||||
{[0, 1, 2].map(i => (
|
||||
<div key={i} className="p-4 rounded-2xl bg-white border border-slate-100 space-y-2.5">
|
||||
<Sk className="h-3 w-16" />
|
||||
<Sk className="h-7 w-12" />
|
||||
<Sk className="h-2.5 w-24" />
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* List card skeleton */}
|
||||
<div className="bg-white rounded-2xl border border-slate-200/60 overflow-hidden">
|
||||
{/* Header */}
|
||||
<div className="px-4 py-3 border-b border-slate-100 space-y-3">
|
||||
<div className="flex items-center justify-between">
|
||||
<Sk className="h-4 w-28" />
|
||||
<div className="flex gap-2"><Sk className="h-6 w-6 rounded-lg" /><Sk className="h-6 w-6 rounded-lg" /></div>
|
||||
</div>
|
||||
<div className="flex gap-2">
|
||||
{[0, 1, 2, 3].map(i => <Sk key={i} className="h-7 w-20 rounded-full" />)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Rows */}
|
||||
<div className="divide-y divide-slate-50">
|
||||
{Array.from({ length: 8 }).map((_, i) => (
|
||||
<div key={i} className="px-4 py-3 flex items-center gap-3">
|
||||
<Sk className="w-1 h-10 rounded-full" />
|
||||
<div className="flex-1 space-y-2">
|
||||
<div className="flex items-center gap-2">
|
||||
<Sk className="h-3.5 w-20" />
|
||||
<Sk className="h-3 w-10 rounded-full" />
|
||||
<Sk className="h-3 w-14" />
|
||||
</div>
|
||||
<div className="flex items-center gap-3">
|
||||
<Sk className="h-2.5 w-28" />
|
||||
<Sk className="h-2.5 w-16" />
|
||||
<Sk className="h-2.5 w-14" />
|
||||
</div>
|
||||
</div>
|
||||
<Sk className="h-4 w-8" />
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function pickBestCandidate(s: SchedulingSuggestion): CandidateVehicle | null {
|
||||
// Business rule: at most one active intervention per suggestion. If ANY
|
||||
// candidate is already intervened, skip the whole suggestion in batch flow.
|
||||
const hasActive = s.candidates.some(
|
||||
c => c.notificationStatus === 'sent' || c.notificationStatus === 'executed',
|
||||
);
|
||||
if (hasActive) return null;
|
||||
return s.candidates.find(c => c.canQualifyAfterSwap) ?? s.candidates[0] ?? null;
|
||||
}
|
||||
|
||||
export default function SchedulingModule() {
|
||||
const [data, setData] = useState<SchedulingResponse | null>(null);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [selectedTargetId, setSelectedTargetId] = useState<number | undefined>(undefined);
|
||||
const [selectedSuggestion, setSelectedSuggestion] = useState<SchedulingSuggestion | null>(null);
|
||||
const [typeFilter, setTypeFilter] = useState<TypeFilter>('all');
|
||||
const [showFilter, setShowFilter] = useState(false);
|
||||
const [filters, setFilters] = useState<AdvancedFilters>(EMPTY_FILTERS);
|
||||
const [tempFilters, setTempFilters] = useState<AdvancedFilters>(EMPTY_FILTERS);
|
||||
const [selectMode, setSelectMode] = useState(false);
|
||||
const [selectedIds, setSelectedIds] = useState<Set<string>>(new Set());
|
||||
const [showBatchConfirm, setShowBatchConfirm] = useState(false);
|
||||
const [batchInFlight, setBatchInFlight] = useState(false);
|
||||
const [batchResultMsg, setBatchResultMsg] = useState<string | null>(null);
|
||||
const [showHistory, setShowHistory] = useState(false);
|
||||
const [historyRecentOnly, setHistoryRecentOnly] = useState(false);
|
||||
|
||||
const loadData = useCallback(async () => {
|
||||
setLoading(true);
|
||||
try { setData(await fetchSuggestions(selectedTargetId)); } finally { setLoading(false); }
|
||||
}, [selectedTargetId]);
|
||||
|
||||
useEffect(() => { loadData(); }, [loadData]);
|
||||
const handleNotifySuccess = useCallback(() => { loadData(); }, [loadData]);
|
||||
|
||||
// Keep selectedSuggestion synced with latest data so candidate notification
|
||||
// status changes (登记 / 取消干预) propagate into the open detail modal.
|
||||
useEffect(() => {
|
||||
if (!selectedSuggestion || !data) return;
|
||||
const fresh = data.suggestions.find(s => s.id === selectedSuggestion.id);
|
||||
if (!fresh) setSelectedSuggestion(null);
|
||||
else if (fresh !== selectedSuggestion) setSelectedSuggestion(fresh);
|
||||
}, [data, selectedSuggestion]);
|
||||
|
||||
const toggleSelect = useCallback((id: string) => {
|
||||
setSelectedIds(prev => {
|
||||
const next = new Set(prev);
|
||||
if (next.has(id)) next.delete(id); else next.add(id);
|
||||
return next;
|
||||
});
|
||||
}, []);
|
||||
|
||||
const exitSelectMode = useCallback(() => {
|
||||
setSelectMode(false);
|
||||
setSelectedIds(new Set());
|
||||
setShowBatchConfirm(false);
|
||||
}, []);
|
||||
|
||||
const batchItems = useMemo(() => {
|
||||
if (!data) return [];
|
||||
return [...selectedIds]
|
||||
.map(id => data.suggestions.find(s => s.id === id))
|
||||
.filter((s): s is SchedulingSuggestion => !!s)
|
||||
.map(s => {
|
||||
const candidate = pickBestCandidate(s);
|
||||
if (!candidate) return null;
|
||||
return { suggestion: s, candidate };
|
||||
})
|
||||
.filter((x): x is { suggestion: SchedulingSuggestion; candidate: CandidateVehicle } => !!x);
|
||||
}, [data, selectedIds]);
|
||||
|
||||
const handleBatchSubmit = useCallback(async () => {
|
||||
if (batchItems.length === 0) return;
|
||||
setBatchInFlight(true);
|
||||
try {
|
||||
const resp = await sendNotifyBatch({
|
||||
items: batchItems.map(i => ({
|
||||
suggestionId: i.suggestion.id,
|
||||
currentPlate: i.suggestion.currentVehicle.plateNumber,
|
||||
candidatePlate: i.candidate.plateNumber,
|
||||
})),
|
||||
});
|
||||
setBatchResultMsg(resp.message);
|
||||
await loadData();
|
||||
exitSelectMode();
|
||||
} catch (e) {
|
||||
console.error('batch notify failed:', e);
|
||||
setBatchResultMsg('批量干预失败,请重试');
|
||||
} finally {
|
||||
setBatchInFlight(false);
|
||||
}
|
||||
}, [batchItems, loadData, exitSelectMode]);
|
||||
|
||||
const filterOptions = useMemo(() => {
|
||||
if (!data) return { regions: [], vehicleTypes: [], customers: [], departments: [], managers: [] };
|
||||
const r = new Set<string>(), t = new Set<string>(), c = new Set<string>(), d = new Set<string>(), m = new Set<string>();
|
||||
for (const s of data.suggestions) {
|
||||
const v = s.currentVehicle;
|
||||
if (v.region) r.add(v.region);
|
||||
if (v.vehicleType) t.add(v.vehicleType);
|
||||
if (v.customer) c.add(v.customer);
|
||||
if (v.department) d.add(v.department);
|
||||
if (v.manager) m.add(v.manager);
|
||||
}
|
||||
return { regions: [...r].sort(), vehicleTypes: [...t].sort(), customers: [...c].sort(), departments: [...d].sort(), managers: [...m].sort() };
|
||||
}, [data]);
|
||||
|
||||
const filteredSuggestions = useMemo(() => {
|
||||
if (!data) return [];
|
||||
let list = data.suggestions;
|
||||
if (typeFilter === 'qualified') list = list.filter(s => s.type === 'replace_qualified');
|
||||
if (typeFilter === 'hopeless') list = list.filter(s => s.type === 'rescue_hopeless');
|
||||
if (filters.plateSearch) { const q = filters.plateSearch.toLowerCase(); list = list.filter(s => s.currentVehicle.plateNumber.toLowerCase().includes(q)); }
|
||||
if (filters.region) list = list.filter(s => s.currentVehicle.region === filters.region);
|
||||
if (filters.vehicleType) list = list.filter(s => s.currentVehicle.vehicleType === filters.vehicleType);
|
||||
if (filters.customer) list = list.filter(s => s.currentVehicle.customer === filters.customer);
|
||||
if (filters.department) list = list.filter(s => s.currentVehicle.department === filters.department);
|
||||
if (filters.manager) list = list.filter(s => s.currentVehicle.manager === filters.manager);
|
||||
return list;
|
||||
}, [data, typeFilter, filters]);
|
||||
|
||||
const summary = data?.summary;
|
||||
const activeFilterCount = [filters.plateSearch, filters.region, filters.vehicleType, filters.customer, filters.department, filters.manager].filter(Boolean).length;
|
||||
|
||||
// Initial load — full page skeleton
|
||||
if (loading && !data) return <SkeletonPage />;
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-[#F0F4F8] text-slate-800 font-sans p-3 md:p-6" style={{ overflowX: 'clip' }}>
|
||||
<div className="max-w-6xl mx-auto flex flex-col gap-3 pb-16 md:pb-0">
|
||||
|
||||
{/* ===== Summary Cards ===== */}
|
||||
<div className="grid grid-cols-2 md:grid-cols-4 gap-2.5">
|
||||
{/* 里程高·换下 — warm orange */}
|
||||
<button
|
||||
onClick={() => setTypeFilter(typeFilter === 'qualified' ? 'all' : 'qualified')}
|
||||
className={`p-3.5 rounded-2xl text-left transition-all cursor-pointer ${
|
||||
typeFilter === 'qualified'
|
||||
? 'bg-orange-500 text-white shadow-lg shadow-orange-500/25'
|
||||
: 'bg-gradient-to-br from-orange-50 to-amber-50 border border-orange-200/60'
|
||||
}`}
|
||||
>
|
||||
<div className={`text-[10px] font-bold mb-1 ${typeFilter === 'qualified' ? 'text-orange-100' : 'text-orange-600'}`}>
|
||||
已完成考核目标
|
||||
</div>
|
||||
<div className={`text-2xl font-black ${typeFilter === 'qualified' ? 'text-white' : 'text-orange-700'}`}>
|
||||
{loading && !data ? '-' : summary?.qualifiedCount ?? 0}
|
||||
<span className={`text-[10px] font-normal ml-1 ${typeFilter === 'qualified' ? 'text-orange-200' : 'text-orange-400'}`}>台</span>
|
||||
</div>
|
||||
<div className={`text-[9px] mt-0.5 ${typeFilter === 'qualified' ? 'text-orange-200' : 'text-orange-400'}`}>
|
||||
换下,腾位给待达标车
|
||||
</div>
|
||||
</button>
|
||||
|
||||
{/* 里程低·换走 — cool blue */}
|
||||
<button
|
||||
onClick={() => setTypeFilter(typeFilter === 'hopeless' ? 'all' : 'hopeless')}
|
||||
className={`p-3.5 rounded-2xl text-left transition-all cursor-pointer ${
|
||||
typeFilter === 'hopeless'
|
||||
? 'bg-blue-600 text-white shadow-lg shadow-blue-600/25'
|
||||
: 'bg-gradient-to-br from-blue-50 to-indigo-50 border border-blue-200/60'
|
||||
}`}
|
||||
>
|
||||
<div className={`text-[10px] font-bold mb-1 ${typeFilter === 'hopeless' ? 'text-blue-100' : 'text-blue-600'}`}>
|
||||
预估无法达标
|
||||
</div>
|
||||
<div className={`text-2xl font-black ${typeFilter === 'hopeless' ? 'text-white' : 'text-blue-700'}`}>
|
||||
{loading && !data ? '-' : summary?.hopelessCount ?? 0}
|
||||
<span className={`text-[10px] font-normal ml-1 ${typeFilter === 'hopeless' ? 'text-blue-200' : 'text-blue-400'}`}>台</span>
|
||||
</div>
|
||||
<div className={`text-[9px] mt-0.5 ${typeFilter === 'hopeless' ? 'text-blue-200' : 'text-blue-400'}`}>
|
||||
换走,换上快达标的车
|
||||
</div>
|
||||
</button>
|
||||
|
||||
{/* 替换建议 — neutral dark */}
|
||||
<button
|
||||
onClick={() => setTypeFilter('all')}
|
||||
className={`p-3.5 rounded-2xl text-left transition-all cursor-pointer ${
|
||||
typeFilter === 'all'
|
||||
? 'bg-slate-800 text-white shadow-lg shadow-slate-800/25'
|
||||
: 'bg-gradient-to-br from-slate-50 to-slate-100 border border-slate-200/60'
|
||||
}`}
|
||||
>
|
||||
<div className={`text-[10px] font-bold mb-1 ${typeFilter === 'all' ? 'text-slate-300' : 'text-slate-500'}`}>
|
||||
替换建议
|
||||
</div>
|
||||
<div className={`text-2xl font-black ${typeFilter === 'all' ? 'text-white' : 'text-slate-800'}`}>
|
||||
{loading && !data ? '-' : summary?.suggestionCount ?? 0}
|
||||
<span className={`text-[10px] font-normal ml-1 ${typeFilter === 'all' ? 'text-slate-400' : 'text-slate-400'}`}>条</span>
|
||||
</div>
|
||||
<div className={`text-[9px] mt-0.5 ${typeFilter === 'all' ? 'text-slate-400' : 'text-slate-400'}`}>
|
||||
执行后预计 +{summary?.estimatedGain ?? 0} 台达标
|
||||
</div>
|
||||
</button>
|
||||
|
||||
{/* 近期已干预 — emerald */}
|
||||
<button
|
||||
onClick={() => { setShowHistory(true); setHistoryRecentOnly(true); }}
|
||||
className="p-3.5 rounded-2xl text-left transition-all cursor-pointer bg-gradient-to-br from-emerald-50 to-teal-50 border border-emerald-200/60"
|
||||
>
|
||||
<div className="text-[10px] font-bold mb-1 text-emerald-600">
|
||||
近期已干预
|
||||
</div>
|
||||
<div className="text-2xl font-black text-emerald-700">
|
||||
{loading && !data ? '-' : summary?.recentInterventionCount ?? 0}
|
||||
<span className="text-[10px] font-normal ml-1 text-emerald-400">条</span>
|
||||
</div>
|
||||
<div className="text-[9px] mt-0.5 text-emerald-400">
|
||||
最近 7 天 · 点击查看
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* ===== List Card ===== */}
|
||||
<div className="bg-white rounded-2xl border border-slate-200/60 shadow-sm overflow-hidden">
|
||||
|
||||
{/* Header */}
|
||||
<div className="px-4 py-3 border-b border-slate-100">
|
||||
<div className="flex items-center justify-between mb-3">
|
||||
<h3 className="text-sm font-bold text-slate-900">智能调度干预清单</h3>
|
||||
<div className="flex items-center gap-1">
|
||||
<button onClick={loadData} disabled={loading}
|
||||
className="p-1.5 text-slate-400 hover:text-slate-600 transition-colors rounded-lg hover:bg-slate-50 cursor-pointer">
|
||||
<RotateCcw size={15} className={loading ? 'animate-spin' : ''} />
|
||||
</button>
|
||||
<button
|
||||
onClick={() => exportSuggestionsCsv(filteredSuggestions)}
|
||||
disabled={filteredSuggestions.length === 0}
|
||||
className="p-1.5 text-slate-400 hover:text-slate-600 transition-colors rounded-lg hover:bg-slate-50 cursor-pointer disabled:opacity-40 disabled:cursor-not-allowed"
|
||||
title="导出 CSV"
|
||||
>
|
||||
<Download size={15} />
|
||||
</button>
|
||||
<button
|
||||
onClick={() => { setShowHistory(true); setHistoryRecentOnly(false); }}
|
||||
className="p-1.5 text-slate-400 hover:text-slate-600 transition-colors rounded-lg hover:bg-slate-50 cursor-pointer"
|
||||
title="调度记录"
|
||||
>
|
||||
<Clock size={15} />
|
||||
</button>
|
||||
<button
|
||||
onClick={() => {
|
||||
if (selectMode) exitSelectMode();
|
||||
else { setSelectMode(true); setSelectedSuggestion(null); }
|
||||
}}
|
||||
className={`relative p-1.5 transition-colors rounded-lg cursor-pointer ${
|
||||
selectMode ? 'text-blue-600 bg-blue-50' : 'text-slate-400 hover:text-slate-600 hover:bg-slate-50'
|
||||
}`}
|
||||
title={selectMode ? '退出多选' : '多选模式'}
|
||||
>
|
||||
<CheckSquare size={15} />
|
||||
</button>
|
||||
<button
|
||||
onClick={() => { setShowFilter(!showFilter); setTempFilters(filters); }}
|
||||
className={`relative p-1.5 transition-colors rounded-lg cursor-pointer ${
|
||||
showFilter || activeFilterCount > 0 ? 'text-blue-600 bg-blue-50' : 'text-slate-400 hover:text-slate-600 hover:bg-slate-50'
|
||||
}`}
|
||||
>
|
||||
<Filter size={15} />
|
||||
{activeFilterCount > 0 && (
|
||||
<span className="absolute -top-1 -right-1 w-4 h-4 bg-blue-600 text-white text-[8px] font-bold rounded-full flex items-center justify-center">{activeFilterCount}</span>
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex gap-2 overflow-x-auto no-scrollbar">
|
||||
<button
|
||||
onClick={() => { setSelectedTargetId(undefined); setTypeFilter('all'); }}
|
||||
className={`px-4 py-1.5 rounded-full text-[11px] font-bold whitespace-nowrap transition-all cursor-pointer ${
|
||||
selectedTargetId === undefined ? 'bg-slate-800 text-white shadow-sm' : 'bg-slate-100 text-slate-500 hover:bg-slate-200'
|
||||
}`}
|
||||
>
|
||||
全部批次
|
||||
</button>
|
||||
{data?.targets.map(t => (
|
||||
<button key={t.id}
|
||||
onClick={() => { setSelectedTargetId(t.id); setTypeFilter('all'); }}
|
||||
className={`px-4 py-1.5 rounded-full text-[11px] font-bold whitespace-nowrap transition-all cursor-pointer ${
|
||||
selectedTargetId === t.id ? 'bg-slate-800 text-white shadow-sm' : 'bg-slate-100 text-slate-500 hover:bg-slate-200'
|
||||
}`}
|
||||
>
|
||||
{shortTargetName(t.name)}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Filter Panel */}
|
||||
<AnimatePresence>
|
||||
{showFilter && (
|
||||
<motion.div initial={{ height: 0, opacity: 0 }} animate={{ height: 'auto', opacity: 1 }} exit={{ height: 0, opacity: 0 }} className="overflow-hidden border-b border-slate-100">
|
||||
<div className="px-4 py-4 bg-slate-50/60 space-y-3">
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="text-xs font-bold text-slate-700">高级筛选</span>
|
||||
{hasActiveFilters(tempFilters) && (
|
||||
<button onClick={() => setTempFilters(EMPTY_FILTERS)} className="text-[10px] text-slate-400 hover:text-slate-600 cursor-pointer">重置</button>
|
||||
)}
|
||||
</div>
|
||||
<div className="space-y-1">
|
||||
<label className="text-[10px] text-slate-400 uppercase font-bold">车牌号</label>
|
||||
<div className="relative">
|
||||
<Search size={12} className="absolute left-3 top-1/2 -translate-y-1/2 text-slate-400" />
|
||||
<input type="text" value={tempFilters.plateSearch} onChange={e => setTempFilters(prev => ({ ...prev, plateSearch: e.target.value }))}
|
||||
placeholder="搜索车牌号..." className="w-full pl-8 pr-3 py-2 bg-white rounded-lg text-xs border border-slate-200 outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-400 transition-all" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="grid grid-cols-2 gap-3">
|
||||
<FilterSelect label="运营区域" options={filterOptions.regions} value={tempFilters.region} onChange={v => setTempFilters(prev => ({ ...prev, region: v }))} placeholder="全部区域" />
|
||||
<FilterSelect label="车辆类型" options={filterOptions.vehicleTypes} value={tempFilters.vehicleType} onChange={v => setTempFilters(prev => ({ ...prev, vehicleType: v }))} placeholder="全部类型" />
|
||||
</div>
|
||||
<div className="grid grid-cols-2 gap-3">
|
||||
<FilterSelect label="业务部门" options={filterOptions.departments} value={tempFilters.department} onChange={v => setTempFilters(prev => ({ ...prev, department: v }))} placeholder="全部部门" />
|
||||
<FilterSelect label="业务负责人" options={filterOptions.managers} value={tempFilters.manager} onChange={v => setTempFilters(prev => ({ ...prev, manager: v }))} placeholder="全部负责人" />
|
||||
</div>
|
||||
<FilterSelect label="客户" options={filterOptions.customers} value={tempFilters.customer} onChange={v => setTempFilters(prev => ({ ...prev, customer: v }))} placeholder="全部客户" />
|
||||
<div className="flex gap-2 pt-1">
|
||||
<button onClick={() => setShowFilter(false)} className="flex-1 py-2 text-xs font-bold text-slate-500 bg-white border border-slate-200 rounded-lg cursor-pointer hover:bg-slate-50 transition-colors">取消</button>
|
||||
<button onClick={() => { setFilters(tempFilters); setShowFilter(false); }} className="flex-1 py-2 text-xs font-bold text-white bg-slate-800 rounded-lg cursor-pointer hover:bg-slate-900 transition-colors shadow-sm">确认筛选</button>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
|
||||
{/* Active filter tags */}
|
||||
{activeFilterCount > 0 && !showFilter && (
|
||||
<div className="px-4 py-2 border-b border-slate-100 flex items-center gap-2 flex-wrap">
|
||||
<span className="text-[10px] text-slate-400">筛选:</span>
|
||||
{filters.plateSearch && <span className="text-[10px] bg-slate-100 text-slate-600 px-2 py-0.5 rounded-full flex items-center gap-1">车牌 "{filters.plateSearch}" <X size={10} className="cursor-pointer" onClick={() => setFilters(prev => ({ ...prev, plateSearch: '' }))} /></span>}
|
||||
{filters.region && <span className="text-[10px] bg-slate-100 text-slate-600 px-2 py-0.5 rounded-full flex items-center gap-1">{filters.region} <X size={10} className="cursor-pointer" onClick={() => setFilters(prev => ({ ...prev, region: '' }))} /></span>}
|
||||
{filters.vehicleType && <span className="text-[10px] bg-slate-100 text-slate-600 px-2 py-0.5 rounded-full flex items-center gap-1">{filters.vehicleType} <X size={10} className="cursor-pointer" onClick={() => setFilters(prev => ({ ...prev, vehicleType: '' }))} /></span>}
|
||||
{filters.department && <span className="text-[10px] bg-slate-100 text-slate-600 px-2 py-0.5 rounded-full flex items-center gap-1">{filters.department} <X size={10} className="cursor-pointer" onClick={() => setFilters(prev => ({ ...prev, department: '' }))} /></span>}
|
||||
{filters.manager && <span className="text-[10px] bg-slate-100 text-slate-600 px-2 py-0.5 rounded-full flex items-center gap-1">{filters.manager} <X size={10} className="cursor-pointer" onClick={() => setFilters(prev => ({ ...prev, manager: '' }))} /></span>}
|
||||
{filters.customer && <span className="text-[10px] bg-slate-100 text-slate-600 px-2 py-0.5 rounded-full flex items-center gap-1">{filters.customer} <X size={10} className="cursor-pointer" onClick={() => setFilters(prev => ({ ...prev, customer: '' }))} /></span>}
|
||||
<button onClick={() => setFilters(EMPTY_FILTERS)} className="text-[10px] text-slate-400 hover:text-slate-600 cursor-pointer">清除</button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{(activeFilterCount > 0 || typeFilter !== 'all') && (
|
||||
<div className="px-4 py-1.5 border-b border-slate-50 text-[10px] text-slate-400">共 {filteredSuggestions.length} 条结果</div>
|
||||
)}
|
||||
|
||||
{loading ? (
|
||||
/* List skeleton while refreshing */
|
||||
<div className="divide-y divide-slate-50">
|
||||
{Array.from({ length: 6 }).map((_, i) => (
|
||||
<div key={i} className="px-4 py-3 flex items-center gap-3">
|
||||
<Sk className="w-1 h-10 rounded-full" />
|
||||
<div className="flex-1 space-y-2">
|
||||
<div className="flex items-center gap-2">
|
||||
<Sk className="h-3.5 w-20" />
|
||||
<Sk className="h-3 w-10 rounded-full" />
|
||||
<Sk className="h-3 w-14" />
|
||||
</div>
|
||||
<div className="flex items-center gap-3">
|
||||
<Sk className="h-2.5 w-28" />
|
||||
<Sk className="h-2.5 w-16" />
|
||||
<Sk className="h-2.5 w-14" />
|
||||
</div>
|
||||
</div>
|
||||
<Sk className="h-4 w-8" />
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<SuggestionList
|
||||
suggestions={filteredSuggestions}
|
||||
onSelect={setSelectedSuggestion}
|
||||
selectMode={selectMode}
|
||||
selectedIds={selectedIds}
|
||||
onToggleSelect={toggleSelect}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{selectedSuggestion && (
|
||||
<SuggestionDetail suggestion={selectedSuggestion} onClose={() => setSelectedSuggestion(null)} onNotifySuccess={handleNotifySuccess} />
|
||||
)}
|
||||
|
||||
{showHistory && (
|
||||
<NotificationHistory
|
||||
onClose={() => setShowHistory(false)}
|
||||
onChange={loadData}
|
||||
recentOnly={historyRecentOnly}
|
||||
suggestions={data?.suggestions}
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* Batch action bar */}
|
||||
<AnimatePresence>
|
||||
{selectMode && (
|
||||
<motion.div
|
||||
initial={{ y: 80, opacity: 0 }}
|
||||
animate={{ y: 0, opacity: 1 }}
|
||||
exit={{ y: 80, opacity: 0 }}
|
||||
className="fixed bottom-4 left-3 right-3 md:left-auto md:right-6 md:bottom-6 md:w-[360px] z-40 bg-slate-900 text-white rounded-2xl shadow-2xl px-4 py-3 flex items-center justify-between gap-3"
|
||||
>
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-xs font-medium">已选</span>
|
||||
<span className="text-lg font-black">{selectedIds.size}</span>
|
||||
<span className="text-xs text-slate-400">条</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<button
|
||||
onClick={exitSelectMode}
|
||||
className="text-xs font-medium text-slate-300 hover:text-white px-2 py-1.5 cursor-pointer transition-colors"
|
||||
>
|
||||
取消
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setShowBatchConfirm(true)}
|
||||
disabled={selectedIds.size === 0}
|
||||
className="flex items-center gap-1.5 text-xs font-bold bg-blue-600 hover:bg-blue-500 disabled:bg-slate-700 disabled:text-slate-400 text-white px-3 py-1.5 rounded-lg cursor-pointer disabled:cursor-not-allowed transition-colors"
|
||||
>
|
||||
<Send size={12} /> 批量干预
|
||||
</button>
|
||||
</div>
|
||||
</motion.div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
|
||||
{/* Batch confirmation modal */}
|
||||
{showBatchConfirm && (
|
||||
<div className="fixed inset-0 bg-black/50 backdrop-blur-sm z-[70] flex items-end sm:items-center justify-center" onClick={() => !batchInFlight && setShowBatchConfirm(false)}>
|
||||
<motion.div
|
||||
initial={{ y: 40, opacity: 0 }}
|
||||
animate={{ y: 0, opacity: 1 }}
|
||||
onClick={e => e.stopPropagation()}
|
||||
className="bg-white rounded-t-2xl sm:rounded-2xl shadow-2xl w-full sm:max-w-md overflow-hidden flex flex-col max-h-[80vh] sm:mx-4"
|
||||
>
|
||||
<div className="bg-slate-800 px-4 py-3 flex items-center justify-between flex-shrink-0">
|
||||
<span className="text-white font-bold text-sm">确认批量干预</span>
|
||||
<button
|
||||
onClick={() => !batchInFlight && setShowBatchConfirm(false)}
|
||||
disabled={batchInFlight}
|
||||
className="text-slate-400 hover:text-white transition-colors p-1 cursor-pointer disabled:opacity-50"
|
||||
>
|
||||
<X size={18} />
|
||||
</button>
|
||||
</div>
|
||||
<div className="px-4 py-3 overflow-y-auto flex-1">
|
||||
<p className="text-xs text-slate-500 mb-3">
|
||||
将登记 <span className="font-bold text-slate-800">{batchItems.length}</span> 条干预,已排除无可用候选车的建议。
|
||||
</p>
|
||||
<div className="space-y-2">
|
||||
{batchItems.map(({ suggestion, candidate }) => (
|
||||
<div key={suggestion.id} className="text-[11px] bg-slate-50 rounded-lg px-3 py-2 flex items-center justify-between gap-2">
|
||||
<div className="flex items-center gap-1.5 min-w-0">
|
||||
<span className="font-mono font-bold text-slate-900"><Blur>{suggestion.currentVehicle.plateNumber}</Blur></span>
|
||||
<span className="text-slate-400">→</span>
|
||||
<span className="font-mono font-bold text-blue-700"><Blur>{candidate.plateNumber}</Blur></span>
|
||||
</div>
|
||||
{candidate.canQualifyAfterSwap ? (
|
||||
<span className="text-emerald-600 text-[9px] font-bold flex-shrink-0">可达标</span>
|
||||
) : (
|
||||
<span className="text-amber-500 text-[9px] font-bold flex-shrink-0">需关注</span>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
{batchResultMsg && (
|
||||
<p className="mt-3 text-[11px] text-slate-500">{batchResultMsg}</p>
|
||||
)}
|
||||
</div>
|
||||
<div className="border-t border-slate-100 px-4 py-3 flex-shrink-0 flex gap-2">
|
||||
<button
|
||||
onClick={() => setShowBatchConfirm(false)}
|
||||
disabled={batchInFlight}
|
||||
className="flex-1 py-2 text-xs font-bold text-slate-500 bg-slate-50 hover:bg-slate-100 rounded-lg cursor-pointer disabled:opacity-50 transition-colors"
|
||||
>
|
||||
取消
|
||||
</button>
|
||||
<button
|
||||
onClick={handleBatchSubmit}
|
||||
disabled={batchInFlight || batchItems.length === 0}
|
||||
className="flex-1 py-2 text-xs font-bold text-white bg-blue-600 hover:bg-blue-500 rounded-lg cursor-pointer disabled:opacity-50 transition-colors"
|
||||
>
|
||||
{batchInFlight ? '登记中...' : `确认登记 ${batchItems.length} 条`}
|
||||
</button>
|
||||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
378
src/modules/scheduling/SuggestionDetail.tsx
Normal file
378
src/modules/scheduling/SuggestionDetail.tsx
Normal file
@@ -0,0 +1,378 @@
|
||||
import { useState, useMemo } from 'react';
|
||||
import {
|
||||
X, MapPin, AlertTriangle, CheckCircle, ArrowDown, ArrowUp, ArrowRight, ArrowUpDown, Lock,
|
||||
} from 'lucide-react';
|
||||
import { motion } from 'motion/react';
|
||||
import type { SchedulingSuggestion, CandidateVehicle } from './types';
|
||||
import Blur from '../../components/Blur';
|
||||
import SwapPreview from './SwapPreview';
|
||||
|
||||
type SortKey = 'predicted' | 'current';
|
||||
type SortDir = 'asc' | 'desc';
|
||||
|
||||
interface Props {
|
||||
suggestion: SchedulingSuggestion;
|
||||
onClose: () => void;
|
||||
onNotifySuccess: () => void;
|
||||
}
|
||||
|
||||
function fmtKm(value: number): string {
|
||||
if (value >= 10000) return (value / 10000).toFixed(1) + '万';
|
||||
return Math.round(value).toLocaleString();
|
||||
}
|
||||
|
||||
function fmtRate(rate: number): string {
|
||||
return (rate * 100).toFixed(1) + '%';
|
||||
}
|
||||
|
||||
const CUSTOMER_REASON_LABELS = new Set(['客户日均']);
|
||||
|
||||
export default function SuggestionDetail({ suggestion: s, onClose, onNotifySuccess }: Props) {
|
||||
const [previewCandidate, setPreviewCandidate] = useState<CandidateVehicle | null>(null);
|
||||
const [sentPlates, setSentPlates] = useState<Set<string>>(new Set());
|
||||
const [batchFilter, setBatchFilter] = useState<Set<string>>(new Set());
|
||||
const [sortKey, setSortKey] = useState<SortKey>('predicted');
|
||||
const [sortDir, setSortDir] = useState<SortDir>('desc');
|
||||
|
||||
const v = s.currentVehicle;
|
||||
const isRescue = s.type === 'rescue_hopeless';
|
||||
|
||||
// Business rule: a current vehicle can have AT MOST ONE active intervention.
|
||||
// Find the active candidate (if any) — other candidates are blocked until
|
||||
// this one is cancelled.
|
||||
const activeIntervention = s.candidates.find(
|
||||
cc => cc.notificationStatus === 'sent' || cc.notificationStatus === 'executed',
|
||||
);
|
||||
|
||||
// Batch options from candidates
|
||||
const batchOptions = useMemo(() => {
|
||||
const set = new Set<string>();
|
||||
for (const c of s.candidates) if (c.targetName) set.add(c.targetName);
|
||||
return [...set].sort();
|
||||
}, [s.candidates]);
|
||||
|
||||
// Filtered + sorted candidates, grouped by region
|
||||
const { sameRegion, crossRegion } = useMemo(() => {
|
||||
let list = s.candidates;
|
||||
if (batchFilter.size > 0) list = list.filter(c => c.targetName != null && batchFilter.has(c.targetName));
|
||||
const sorted = [...list].sort((a, b) => {
|
||||
const va = sortKey === 'predicted' ? a.predictedAfterSwap : a.totalMileage;
|
||||
const vb = sortKey === 'predicted' ? b.predictedAfterSwap : b.totalMileage;
|
||||
return sortDir === 'desc' ? vb - va : va - vb;
|
||||
});
|
||||
return {
|
||||
sameRegion: sorted.filter(c => c.isSameRegion),
|
||||
crossRegion: sorted.filter(c => !c.isSameRegion),
|
||||
};
|
||||
}, [s.candidates, batchFilter, sortKey, sortDir]);
|
||||
|
||||
const displayCount = sameRegion.length + crossRegion.length;
|
||||
|
||||
const toggleSort = (key: SortKey) => {
|
||||
if (sortKey === key) { setSortDir(d => d === 'desc' ? 'asc' : 'desc'); }
|
||||
else { setSortKey(key); setSortDir('desc'); }
|
||||
};
|
||||
|
||||
const renderCandidate = (c: CandidateVehicle) => {
|
||||
const sent =
|
||||
sentPlates.has(c.plateNumber) ||
|
||||
c.notificationStatus === 'sent' ||
|
||||
c.notificationStatus === 'executed';
|
||||
const blockedByOther = !!activeIntervention && activeIntervention.plateNumber !== c.plateNumber;
|
||||
return (
|
||||
<div key={c.plateNumber} className={`rounded-xl border overflow-hidden bg-white ${blockedByOther ? 'border-slate-200 opacity-60' : 'border-slate-200'}`}>
|
||||
<div className="flex items-center justify-between px-3 py-2">
|
||||
<div className="flex items-center gap-2 flex-wrap">
|
||||
<span className="text-xs font-black text-slate-900 font-mono"><Blur>{c.plateNumber}</Blur></span>
|
||||
<span className={`text-[9px] px-1.5 py-0.5 rounded flex items-center gap-0.5 ${c.isSameRegion ? 'bg-slate-100 text-slate-500' : 'bg-amber-50 text-amber-600'}`}>
|
||||
<MapPin size={9} />{c.region}{!c.isSameRegion && ' · 跨区'}
|
||||
</span>
|
||||
<span className="text-[9px] text-slate-400">{c.vehicleType}</span>
|
||||
<span className="text-[9px] text-slate-300">{c.targetName || '库存'}</span>
|
||||
<span className="text-[9px] text-slate-400">剩余{c.daysLeft}天</span>
|
||||
</div>
|
||||
{c.canQualifyAfterSwap ? (
|
||||
<span className="text-[9px] font-bold text-emerald-600 flex items-center gap-0.5 bg-emerald-50 px-1.5 py-0.5 rounded flex-shrink-0">
|
||||
<CheckCircle size={10} /> 可达标
|
||||
</span>
|
||||
) : (
|
||||
<span className="text-[9px] font-bold text-amber-500 flex items-center gap-0.5 bg-amber-50 px-1.5 py-0.5 rounded flex-shrink-0">
|
||||
<AlertTriangle size={10} /> 需关注
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="px-3 pb-2">
|
||||
<div className="flex text-[10px] bg-slate-50 rounded-lg overflow-hidden divide-x divide-slate-200">
|
||||
<div className="flex-1 py-1.5 px-2 text-center">
|
||||
<div className="text-slate-400">当前</div>
|
||||
<div className="font-bold text-slate-700">{fmtKm(c.totalMileage)}</div>
|
||||
</div>
|
||||
<div className="flex-1 py-1.5 px-2 text-center">
|
||||
<div className="text-slate-400">替换后预计</div>
|
||||
<div className={`font-bold ${c.canQualifyAfterSwap ? 'text-emerald-600' : 'text-amber-600'}`}>{fmtKm(c.predictedAfterSwap)}</div>
|
||||
</div>
|
||||
<div className="flex-1 py-1.5 px-2 text-center">
|
||||
<div className="text-blue-400">考核</div>
|
||||
<div className="font-bold text-blue-700">{c.yearTarget ? fmtKm(c.yearTarget) : '-'}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="px-3 pb-2.5">
|
||||
{blockedByOther ? (
|
||||
<div className="w-full flex items-center justify-center gap-1.5 text-[11px] font-medium py-2 rounded-lg bg-slate-50 text-slate-400 cursor-not-allowed">
|
||||
<Lock size={11} /> 该车已有其他干预,请先解除
|
||||
</div>
|
||||
) : (
|
||||
<button
|
||||
onClick={() => setPreviewCandidate(c)}
|
||||
className={`w-full flex items-center justify-center gap-1.5 text-[11px] font-bold py-2 rounded-lg transition-all cursor-pointer ${
|
||||
sent
|
||||
? 'bg-emerald-50 hover:bg-emerald-100 text-emerald-700 border border-emerald-200'
|
||||
: 'bg-slate-800 hover:bg-slate-900 text-white active:scale-[0.98] shadow-sm'
|
||||
}`}
|
||||
>
|
||||
{sent ? <><CheckCircle size={12} /> 已干预 · 查看 <ArrowRight size={12} /></> : <>查看替换方案 <ArrowRight size={12} /></>}
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="fixed inset-0 bg-black/50 backdrop-blur-sm z-[60] flex items-end sm:items-center justify-center" onClick={onClose}>
|
||||
<motion.div
|
||||
initial={{ y: 40, opacity: 0 }}
|
||||
animate={{ y: 0, opacity: 1 }}
|
||||
onClick={e => e.stopPropagation()}
|
||||
className="bg-white rounded-t-2xl sm:rounded-2xl shadow-2xl w-full sm:max-w-lg overflow-hidden flex flex-col max-h-[92vh] sm:max-h-[85vh] sm:mx-4"
|
||||
>
|
||||
{/* Header — unified dark slate */}
|
||||
<div className="bg-slate-800 px-4 py-3 flex items-center justify-between flex-shrink-0">
|
||||
<div className="flex items-center gap-2">
|
||||
{isRescue
|
||||
? <ArrowDown size={14} className="text-blue-300" />
|
||||
: <ArrowUp size={14} className="text-amber-300" />
|
||||
}
|
||||
<span className="text-white font-bold text-sm">
|
||||
{isRescue ? '里程低·换走此车' : '里程高·换下此车'}
|
||||
</span>
|
||||
</div>
|
||||
<button onClick={onClose} className="text-slate-400 hover:text-white transition-colors p-1 cursor-pointer">
|
||||
<X size={18} />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Body */}
|
||||
<div className="overflow-y-auto flex-1 no-scrollbar">
|
||||
|
||||
{/* Current Vehicle — same format as candidate cards */}
|
||||
<div className="px-4 py-3 border-b border-slate-100">
|
||||
<div className="rounded-xl border border-slate-200 overflow-hidden bg-white">
|
||||
{/* Header — same style as candidate header */}
|
||||
<div className="flex items-center justify-between px-3 py-2">
|
||||
<div className="flex items-center gap-2 flex-wrap">
|
||||
<span className="text-xs font-black text-slate-900 font-mono"><Blur>{v.plateNumber}</Blur></span>
|
||||
<span className="text-[9px] text-slate-500 bg-slate-100 px-1.5 py-0.5 rounded flex items-center gap-0.5"><MapPin size={9} />{v.region}</span>
|
||||
<span className="text-[9px] text-slate-400">{v.vehicleType}</span>
|
||||
<span className="text-[9px] text-slate-300">{v.targetName}</span>
|
||||
<span className="text-[9px] text-slate-400">剩余{v.daysLeft}天</span>
|
||||
</div>
|
||||
<span className={`text-sm font-black tabular-nums ${v.completionRate >= 1 ? 'text-emerald-600' : 'text-rose-500'}`}>
|
||||
{fmtRate(v.completionRate)}
|
||||
</span>
|
||||
</div>
|
||||
{/* Customer + dept/manager info */}
|
||||
<div className="px-3 pb-1.5 flex items-center gap-2 text-[10px] text-slate-500 flex-wrap">
|
||||
{v.department && <span><b className="text-slate-700">{v.department}</b></span>}
|
||||
{v.manager && <span><b className="text-slate-700">{v.manager}</b></span>}
|
||||
{(v.department || v.manager) && <span className="text-slate-200">|</span>}
|
||||
<span>客户 <b className="text-slate-700"><Blur>{v.customer || '-'}</Blur></b></span>
|
||||
<span>
|
||||
30日均 <b className="text-slate-700">{Math.round(v.customerAvgDaily)}</b> km
|
||||
</span>
|
||||
</div>
|
||||
{/* Metrics */}
|
||||
<div className="px-3 pb-2">
|
||||
<div className="flex text-[10px] bg-slate-50 rounded-lg overflow-hidden divide-x divide-slate-200">
|
||||
<div className="flex-1 py-1.5 px-2 text-center">
|
||||
<div className="text-slate-400">当前</div>
|
||||
<div className="font-bold text-slate-700">{fmtKm(v.currentYearMileage)}</div>
|
||||
</div>
|
||||
<div className="flex-1 py-1.5 px-2 text-center">
|
||||
<div className="text-slate-400">考核期结束预估</div>
|
||||
<div className={`font-bold ${v.completionRate >= 1 ? 'text-emerald-600' : 'text-rose-500'}`}>{fmtKm(v.currentYearMileage + v.customerAvgDaily * v.daysLeft)}</div>
|
||||
</div>
|
||||
<div className="flex-1 py-1.5 px-2 text-center">
|
||||
<div className="text-blue-400">考核</div>
|
||||
<div className="font-bold text-blue-700">{fmtKm(v.yearTarget)}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Reason — customer vs vehicle columns */}
|
||||
<div className="px-4 py-2.5 border-b border-slate-100 bg-slate-50/60">
|
||||
<div className="grid grid-cols-2 gap-x-5">
|
||||
{(() => {
|
||||
const customerLines = s.reason.lines.filter(l => CUSTOMER_REASON_LABELS.has(l.label));
|
||||
const vehicleLines = s.reason.lines.filter(l => !CUSTOMER_REASON_LABELS.has(l.label));
|
||||
return (
|
||||
<>
|
||||
<div>
|
||||
<div className="text-[9px] font-bold text-slate-400 uppercase tracking-wider mb-1">客户</div>
|
||||
<div className="space-y-1">
|
||||
{customerLines.map((line, i) => (
|
||||
<div key={i} className="flex items-center justify-between text-[11px]">
|
||||
<span className="text-slate-500">{line.label}</span>
|
||||
<span className="text-slate-700 font-medium">{line.value}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-[9px] font-bold text-slate-400 uppercase tracking-wider mb-1">车辆</div>
|
||||
<div className="space-y-1">
|
||||
{vehicleLines.map((line, i) => (
|
||||
<div key={i} className="flex items-center justify-between text-[11px]">
|
||||
<span className="text-slate-500">{line.label}</span>
|
||||
<span className="text-slate-700 font-medium">{line.value}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
})()}
|
||||
</div>
|
||||
<div className="mt-2 pt-2 border-t border-slate-200">
|
||||
<span className="text-xs font-bold text-rose-600">{s.reason.conclusion}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Candidates */}
|
||||
<div className="px-4 py-3">
|
||||
<div className="flex items-center justify-between mb-1.5">
|
||||
<span className="text-xs font-bold text-slate-700">可替换在库车辆</span>
|
||||
<span className="text-[10px] text-slate-400">{displayCount}/{s.candidates.length} 辆</span>
|
||||
</div>
|
||||
|
||||
{activeIntervention && (
|
||||
<div className="mb-2.5 flex items-start gap-2 rounded-lg bg-emerald-50 border border-emerald-200 px-3 py-2 text-[11px] text-emerald-800">
|
||||
<Lock size={12} className="mt-0.5 flex-shrink-0" />
|
||||
<span>
|
||||
此车已干预替换为 <b className="font-mono"><Blur>{activeIntervention.plateNumber}</Blur></b>。如需更换方案,请先在该候选车处解除干预。
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Filter + Sort controls */}
|
||||
<div className="flex items-center gap-2 mb-2.5 flex-wrap">
|
||||
{/* Batch multi-select pills */}
|
||||
<div className="flex items-center gap-1.5 flex-wrap">
|
||||
<button
|
||||
onClick={() => setBatchFilter(new Set())}
|
||||
className={`text-[10px] px-2 py-1 rounded-lg border cursor-pointer transition-colors ${
|
||||
batchFilter.size === 0 ? 'border-blue-300 bg-blue-50 text-blue-700 font-bold' : 'border-slate-200 text-slate-500'
|
||||
}`}
|
||||
>
|
||||
全部
|
||||
</button>
|
||||
{batchOptions.map(b => {
|
||||
const active = batchFilter.has(b);
|
||||
return (
|
||||
<button
|
||||
key={b}
|
||||
onClick={() => setBatchFilter(prev => {
|
||||
const next = new Set(prev);
|
||||
if (active) next.delete(b); else next.add(b);
|
||||
return next;
|
||||
})}
|
||||
className={`text-[10px] px-2 py-1 rounded-lg border cursor-pointer transition-colors ${
|
||||
active ? 'border-blue-300 bg-blue-50 text-blue-700 font-bold' : 'border-slate-200 text-slate-500'
|
||||
}`}
|
||||
>
|
||||
{b}
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
|
||||
{/* Sort buttons */}
|
||||
<button
|
||||
onClick={() => toggleSort('predicted')}
|
||||
className={`text-[10px] px-2 py-1 rounded-lg border flex items-center gap-1 cursor-pointer transition-colors ${
|
||||
sortKey === 'predicted' ? 'border-blue-300 bg-blue-50 text-blue-700' : 'border-slate-200 text-slate-500'
|
||||
}`}
|
||||
>
|
||||
替换后预计
|
||||
{sortKey === 'predicted' && (sortDir === 'desc' ? <ArrowDown size={10} /> : <ArrowUp size={10} />)}
|
||||
{sortKey !== 'predicted' && <ArrowUpDown size={10} />}
|
||||
</button>
|
||||
<button
|
||||
onClick={() => toggleSort('current')}
|
||||
className={`text-[10px] px-2 py-1 rounded-lg border flex items-center gap-1 cursor-pointer transition-colors ${
|
||||
sortKey === 'current' ? 'border-blue-300 bg-blue-50 text-blue-700' : 'border-slate-200 text-slate-500'
|
||||
}`}
|
||||
>
|
||||
当前里程
|
||||
{sortKey === 'current' && (sortDir === 'desc' ? <ArrowDown size={10} /> : <ArrowUp size={10} />)}
|
||||
{sortKey !== 'current' && <ArrowUpDown size={10} />}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{sameRegion.length > 0 && (
|
||||
<div className="space-y-2">
|
||||
{sameRegion.map(c => renderCandidate(c))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{crossRegion.length > 0 && (
|
||||
<>
|
||||
<div className="flex items-center gap-2 my-3">
|
||||
<div className="flex-1 h-px bg-slate-200" />
|
||||
<span className="text-[10px] text-slate-400 font-medium">跨区候选 · {crossRegion.length} 辆</span>
|
||||
<div className="flex-1 h-px bg-slate-200" />
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
{crossRegion.map(c => renderCandidate(c))}
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
|
||||
{displayCount === 0 && (
|
||||
<div className="py-8 text-center text-xs text-slate-400">当前筛选条件下无可替换车辆</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Footer */}
|
||||
<div className="border-t border-slate-100 px-4 py-2.5 flex-shrink-0">
|
||||
<button
|
||||
onClick={onClose}
|
||||
className="w-full py-2 text-xs font-bold text-slate-500 bg-slate-50 hover:bg-slate-100 rounded-lg transition-colors cursor-pointer"
|
||||
>
|
||||
关闭
|
||||
</button>
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
{/* Full-screen swap preview */}
|
||||
{previewCandidate && (
|
||||
<SwapPreview
|
||||
suggestion={s}
|
||||
candidate={previewCandidate}
|
||||
onClose={() => setPreviewCandidate(null)}
|
||||
onSuccess={() => {
|
||||
setSentPlates(prev => new Set(prev).add(previewCandidate.plateNumber));
|
||||
setPreviewCandidate(null);
|
||||
onNotifySuccess();
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
172
src/modules/scheduling/SuggestionList.tsx
Normal file
172
src/modules/scheduling/SuggestionList.tsx
Normal file
@@ -0,0 +1,172 @@
|
||||
import { useState, useMemo } from 'react';
|
||||
import { ArrowRightLeft, ChevronRight, ArrowDown, ArrowUp, ArrowUpDown, CheckCircle, Check } from 'lucide-react';
|
||||
import { motion } from 'motion/react';
|
||||
import type { SchedulingSuggestion } from './types';
|
||||
import Blur from '../../components/Blur';
|
||||
|
||||
interface Props {
|
||||
suggestions: SchedulingSuggestion[];
|
||||
onSelect: (s: SchedulingSuggestion) => void;
|
||||
selectMode?: boolean;
|
||||
selectedIds?: Set<string>;
|
||||
onToggleSelect?: (id: string) => void;
|
||||
}
|
||||
|
||||
function hasActiveNotification(s: SchedulingSuggestion): boolean {
|
||||
return s.candidates.some(c => c.notificationStatus === 'sent' || c.notificationStatus === 'executed');
|
||||
}
|
||||
|
||||
function fmtRate(rate: number): string {
|
||||
return (rate * 100).toFixed(1) + '%';
|
||||
}
|
||||
|
||||
type SortKey = 'default' | 'avgDaily' | 'completion';
|
||||
type SortDir = 'asc' | 'desc';
|
||||
|
||||
export default function SuggestionList({ suggestions, onSelect, selectMode = false, selectedIds, onToggleSelect }: Props) {
|
||||
const [sortKey, setSortKey] = useState<SortKey>('default');
|
||||
const [sortDir, setSortDir] = useState<SortDir>('desc');
|
||||
|
||||
const toggleSort = (key: SortKey) => {
|
||||
if (sortKey === key) { setSortDir(d => d === 'desc' ? 'asc' : 'desc'); }
|
||||
else { setSortKey(key); setSortDir('desc'); }
|
||||
};
|
||||
|
||||
const sorted = useMemo(() => {
|
||||
if (sortKey === 'default') return suggestions;
|
||||
return [...suggestions].sort((a, b) => {
|
||||
const va = sortKey === 'avgDaily' ? a.currentVehicle.customerAvgDaily : a.currentVehicle.completionRate;
|
||||
const vb = sortKey === 'avgDaily' ? b.currentVehicle.customerAvgDaily : b.currentVehicle.completionRate;
|
||||
return sortDir === 'desc' ? vb - va : va - vb;
|
||||
});
|
||||
}, [suggestions, sortKey, sortDir]);
|
||||
|
||||
if (suggestions.length === 0) {
|
||||
return (
|
||||
<div className="py-16 text-center">
|
||||
<ArrowRightLeft className="w-8 h-8 text-slate-200 mx-auto mb-2" />
|
||||
<p className="text-sm text-slate-400">暂无调度建议</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div>
|
||||
{/* Sort controls */}
|
||||
<div className="px-4 py-2 border-b border-slate-50 flex items-center gap-2">
|
||||
<button
|
||||
onClick={() => toggleSort('avgDaily')}
|
||||
className={`text-[10px] px-2 py-1 rounded-lg border flex items-center gap-1 cursor-pointer transition-colors ${
|
||||
sortKey === 'avgDaily' ? 'border-blue-300 bg-blue-50 text-blue-700' : 'border-slate-200 text-slate-500'
|
||||
}`}
|
||||
>
|
||||
客户日均
|
||||
{sortKey === 'avgDaily' && (sortDir === 'desc' ? <ArrowDown size={10} /> : <ArrowUp size={10} />)}
|
||||
{sortKey !== 'avgDaily' && <ArrowUpDown size={10} />}
|
||||
</button>
|
||||
<button
|
||||
onClick={() => toggleSort('completion')}
|
||||
className={`text-[10px] px-2 py-1 rounded-lg border flex items-center gap-1 cursor-pointer transition-colors ${
|
||||
sortKey === 'completion' ? 'border-blue-300 bg-blue-50 text-blue-700' : 'border-slate-200 text-slate-500'
|
||||
}`}
|
||||
>
|
||||
年度达标
|
||||
{sortKey === 'completion' && (sortDir === 'desc' ? <ArrowDown size={10} /> : <ArrowUp size={10} />)}
|
||||
{sortKey !== 'completion' && <ArrowUpDown size={10} />}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="divide-y divide-slate-50">
|
||||
{sorted.map((s, idx) => {
|
||||
const isRescue = s.type === 'rescue_hopeless';
|
||||
const v = s.currentVehicle;
|
||||
const notified = hasActiveNotification(s);
|
||||
const isSelected = selectedIds?.has(s.id) ?? false;
|
||||
const canSelect = selectMode && !notified;
|
||||
|
||||
const handleClick = () => {
|
||||
if (selectMode) {
|
||||
if (canSelect) onToggleSelect?.(s.id);
|
||||
} else {
|
||||
onSelect(s);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<motion.div
|
||||
key={s.id}
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
transition={{ delay: Math.min(idx * 0.02, 0.3) }}
|
||||
className={`px-4 py-3 hover:bg-slate-50/60 transition-colors flex items-center gap-3 ${
|
||||
canSelect || !selectMode ? 'cursor-pointer active:bg-slate-100' : 'cursor-default opacity-60'
|
||||
} ${isSelected ? 'bg-blue-50/60' : ''}`}
|
||||
onClick={handleClick}
|
||||
>
|
||||
{/* Checkbox (select mode) */}
|
||||
{selectMode && (
|
||||
<div
|
||||
className={`w-4 h-4 rounded flex-shrink-0 flex items-center justify-center border transition-colors ${
|
||||
isSelected
|
||||
? 'bg-blue-600 border-blue-600 text-white'
|
||||
: notified
|
||||
? 'bg-slate-100 border-slate-200'
|
||||
: 'bg-white border-slate-300'
|
||||
}`}
|
||||
>
|
||||
{isSelected && <Check size={12} strokeWidth={3} />}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Color bar */}
|
||||
<div className={`w-1 h-10 rounded-full flex-shrink-0 ${isRescue ? 'bg-blue-400' : 'bg-amber-400'}`} />
|
||||
|
||||
{/* Info */}
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex items-center justify-between gap-2">
|
||||
<div className="flex items-center gap-2 min-w-0">
|
||||
<span className="text-xs font-black text-slate-900 font-mono">
|
||||
<Blur>{v.plateNumber}</Blur>
|
||||
</span>
|
||||
<span className="text-[9px] text-slate-400">{v.vehicleType}</span>
|
||||
<span className="text-[9px] text-slate-300">·</span>
|
||||
<span className="text-[9px] text-slate-400">{v.region}</span>
|
||||
{notified && (
|
||||
<span className="text-[9px] font-bold text-emerald-600 bg-emerald-50 px-1.5 py-0.5 rounded flex items-center gap-0.5">
|
||||
<CheckCircle size={9} /> 已干预
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<span className="text-[10px] flex-shrink-0">
|
||||
<span className="text-slate-500">年度考核 </span>
|
||||
<span className={`font-medium ${v.completionRate >= 1 ? 'text-emerald-600' : v.completionRate >= 0.5 ? 'text-amber-600' : 'text-rose-500'}`}>{fmtRate(v.completionRate)}</span>
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex items-center justify-between mt-0.5 text-[10px] overflow-hidden">
|
||||
<div className="flex items-center gap-1.5 text-slate-400 truncate">
|
||||
{v.department && <span className="text-slate-500 font-medium">{v.department.replace('业务', '')}</span>}
|
||||
{v.manager && <span className="text-slate-500">{v.manager}</span>}
|
||||
<span className="truncate"><Blur>{v.customer || '-'}</Blur></span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2 flex-shrink-0 ml-2">
|
||||
<span className="text-slate-500">
|
||||
客户日均 <span className="text-slate-700 font-medium">{Math.round(v.customerAvgDaily)}</span> km
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Right */}
|
||||
{!selectMode && (
|
||||
<div className="flex items-center gap-0.5 flex-shrink-0">
|
||||
<span className="text-[9px] text-slate-400">干预</span>
|
||||
<ChevronRight size={14} className="text-slate-300" />
|
||||
</div>
|
||||
)}
|
||||
</motion.div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
169
src/modules/scheduling/SwapPreview.tsx
Normal file
169
src/modules/scheduling/SwapPreview.tsx
Normal file
@@ -0,0 +1,169 @@
|
||||
import { useState } from 'react';
|
||||
import { ArrowDownUp, CheckCircle, Send, X, Ban } from 'lucide-react';
|
||||
import { sendNotify, updateNotification } from './api';
|
||||
import type { SchedulingSuggestion, CandidateVehicle } from './types';
|
||||
import Blur from '../../components/Blur';
|
||||
|
||||
interface Props {
|
||||
suggestion: SchedulingSuggestion;
|
||||
candidate: CandidateVehicle;
|
||||
onClose: () => void;
|
||||
onSuccess: () => void;
|
||||
}
|
||||
|
||||
function fmtKm(value: number): string {
|
||||
if (value >= 10000) return (value / 10000).toFixed(1) + '万';
|
||||
return Math.round(value).toLocaleString();
|
||||
}
|
||||
|
||||
function fmtRate(rate: number): string {
|
||||
return (rate * 100).toFixed(1) + '%';
|
||||
}
|
||||
|
||||
export default function SwapPreview({ suggestion: s, candidate: c, onClose, onSuccess }: Props) {
|
||||
const [sending, setSending] = useState(false);
|
||||
const [sent, setSent] = useState(false);
|
||||
const [cancelling, setCancelling] = useState(false);
|
||||
const v = s.currentVehicle;
|
||||
|
||||
const alreadyIntervened =
|
||||
!sent && (c.notificationStatus === 'sent' || c.notificationStatus === 'executed');
|
||||
const isExecuted = c.notificationStatus === 'executed';
|
||||
|
||||
const handleSend = async () => {
|
||||
if (sending || sent || alreadyIntervened) return;
|
||||
setSending(true);
|
||||
try {
|
||||
const result = await sendNotify({ suggestionId: s.id, currentPlate: v.plateNumber, candidatePlate: c.plateNumber });
|
||||
if (result.success) { setSent(true); onSuccess(); } else { alert(result.message || '发送失败'); }
|
||||
} catch { alert('网络错误'); } finally { setSending(false); }
|
||||
};
|
||||
|
||||
const handleCancel = async () => {
|
||||
if (!c.notificationId || cancelling) return;
|
||||
if (isExecuted) {
|
||||
if (!confirm('此干预已标记为执行。确定要取消吗?')) return;
|
||||
} else {
|
||||
if (!confirm(`确定取消 ${v.plateNumber} → ${c.plateNumber} 的干预?`)) return;
|
||||
}
|
||||
setCancelling(true);
|
||||
try {
|
||||
const result = await updateNotification(c.notificationId, { status: 'cancelled' });
|
||||
if (result.success) { onSuccess(); onClose(); }
|
||||
else { alert(result.message || '取消失败'); }
|
||||
} catch { alert('网络错误'); } finally { setCancelling(false); }
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="fixed inset-0 z-[80] bg-[#F0F4F8] flex flex-col">
|
||||
{/* Header */}
|
||||
<div className="flex items-center justify-between px-5 py-3 bg-white border-b border-slate-200 flex-shrink-0">
|
||||
<span className="text-sm font-bold text-slate-800">车辆替换方案</span>
|
||||
<button onClick={onClose} className="p-1 text-slate-400 hover:text-slate-600 cursor-pointer"><X size={20} /></button>
|
||||
</div>
|
||||
|
||||
{/* Content */}
|
||||
<div className="flex-1 overflow-auto px-5 py-5">
|
||||
<div className="max-w-sm mx-auto space-y-4">
|
||||
|
||||
{/* === Swap Cards === */}
|
||||
<div className="relative">
|
||||
{/* Current vehicle */}
|
||||
<div className="bg-white rounded-2xl p-4 border border-slate-200 shadow-sm">
|
||||
<div className="flex items-start justify-between">
|
||||
<div>
|
||||
<div className="text-lg font-black text-slate-900 font-mono"><Blur>{v.plateNumber}</Blur></div>
|
||||
<div className="text-[10px] text-slate-400 mt-0.5">{v.vehicleType} · {v.targetName}</div>
|
||||
</div>
|
||||
<div className="text-right">
|
||||
<div className="text-base font-black text-slate-800">{fmtKm(v.currentYearMileage)}<span className="text-[9px] text-slate-400 ml-0.5">km</span></div>
|
||||
<div className="text-[10px] text-slate-400">考核 {fmtKm(v.yearTarget)} km</div>
|
||||
<div className="text-[10px] text-slate-400">年度考核剩余 <b className="text-slate-700">{v.daysLeft}</b> 天</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-3 mt-2.5 text-[10px] text-slate-500">
|
||||
<span><Blur>{v.customer || '-'}</Blur></span>
|
||||
<span>日均 <b className="text-slate-700">{Math.round(v.customerAvgDaily)}</b></span>
|
||||
<span>完成 <b className={v.completionRate >= 1 ? 'text-emerald-600' : 'text-rose-500'}>{fmtRate(v.completionRate)}</b></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Arrow bridge */}
|
||||
<div className="flex justify-center -my-3 relative z-10">
|
||||
<div className="w-10 h-10 rounded-full bg-slate-800 flex items-center justify-center shadow-lg">
|
||||
<ArrowDownUp size={16} className="text-white" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Replacement vehicle */}
|
||||
<div className="bg-white rounded-2xl p-4 border border-emerald-300 shadow-sm">
|
||||
<div className="flex items-start justify-between">
|
||||
<div>
|
||||
<div className="text-lg font-black text-slate-900 font-mono"><Blur>{c.plateNumber}</Blur></div>
|
||||
<div className="text-[10px] text-slate-400 mt-0.5">{c.vehicleType} · {c.targetName || '库存'} · {c.region}</div>
|
||||
</div>
|
||||
<div className="text-right">
|
||||
<div className="text-base font-black text-slate-800">{fmtKm(c.totalMileage)}<span className="text-[9px] text-slate-400 ml-0.5">km</span></div>
|
||||
<div className="text-[10px] text-slate-400">考核 {c.yearTarget ? fmtKm(c.yearTarget) : '-'} km</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-3 mt-2.5 text-[10px] text-slate-500">
|
||||
<span>缺口 <b className="text-rose-500">{fmtKm(c.mileageGap)}</b></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* === Result === */}
|
||||
<div className="bg-white rounded-2xl p-4 border border-slate-200 shadow-sm">
|
||||
<div className="text-[10px] font-bold text-slate-400 uppercase mb-3">替换后预测</div>
|
||||
<div className="flex items-end gap-6">
|
||||
<div>
|
||||
<div className="text-[9px] text-slate-400 mb-0.5">预测年终里程</div>
|
||||
<div className="text-xl font-black text-slate-800">{fmtKm(c.predictedAfterSwap)} <span className="text-[10px] font-normal text-slate-400">km</span></div>
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-[9px] text-slate-400 mb-0.5">考核目标</div>
|
||||
<div className="text-xl font-black text-slate-800">{c.yearTarget ? fmtKm(c.yearTarget) : '-'} <span className="text-[10px] font-normal text-slate-400">km</span></div>
|
||||
</div>
|
||||
<div className={`text-sm font-black px-3 py-1 rounded-lg ${c.canQualifyAfterSwap ? 'bg-emerald-50 text-emerald-600' : 'bg-amber-50 text-amber-600'}`}>
|
||||
{c.canQualifyAfterSwap ? '可达标' : '需关注'}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Bottom */}
|
||||
<div className="px-5 pb-6 pt-2 flex-shrink-0 bg-[#F0F4F8]">
|
||||
<div className="max-w-sm mx-auto space-y-2">
|
||||
{alreadyIntervened && (
|
||||
<div className="rounded-xl bg-emerald-50 border border-emerald-200 px-3 py-2 text-[11px] text-emerald-700 flex items-center gap-2">
|
||||
<CheckCircle size={13} />
|
||||
<span>此车已{isExecuted ? '执行干预' : '登记干预'},如需重新干预请先取消。</span>
|
||||
</div>
|
||||
)}
|
||||
{alreadyIntervened ? (
|
||||
<button
|
||||
onClick={handleCancel}
|
||||
disabled={cancelling}
|
||||
className="w-full flex items-center justify-center gap-2 py-3.5 rounded-xl text-sm font-bold bg-white text-rose-600 border border-rose-200 hover:bg-rose-50 active:scale-[0.98] transition-all cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed"
|
||||
>
|
||||
<Ban size={16} /> {cancelling ? '取消中...' : '取消干预'}
|
||||
</button>
|
||||
) : (
|
||||
<button
|
||||
onClick={handleSend}
|
||||
disabled={sending || sent}
|
||||
className={`w-full flex items-center justify-center gap-2 py-3.5 rounded-xl text-sm font-bold transition-all cursor-pointer ${
|
||||
sent ? 'bg-emerald-100 text-emerald-600' : 'bg-slate-800 hover:bg-slate-900 text-white active:scale-[0.98] shadow-lg'
|
||||
}`}
|
||||
>
|
||||
{sent ? <><CheckCircle size={16} /> 已登记</> : <><Send size={16} /> 登记干预</>}
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
61
src/modules/scheduling/api.ts
Normal file
61
src/modules/scheduling/api.ts
Normal file
@@ -0,0 +1,61 @@
|
||||
import { fetchJson } from '../../auth/api-client';
|
||||
import type {
|
||||
SchedulingResponse,
|
||||
NotifyRequest,
|
||||
NotifyBatchRequest,
|
||||
NotifyBatchResult,
|
||||
NotificationRecord,
|
||||
NotificationStatus,
|
||||
UpdateNotificationRequest,
|
||||
} from './types';
|
||||
|
||||
const BASE = '/api/scheduling';
|
||||
|
||||
export async function fetchSuggestions(targetId?: number): Promise<SchedulingResponse> {
|
||||
const params = new URLSearchParams();
|
||||
if (targetId !== undefined) params.set('targetId', String(targetId));
|
||||
const qs = params.toString();
|
||||
return fetchJson<SchedulingResponse>(`${BASE}/suggestions${qs ? `?${qs}` : ''}`);
|
||||
}
|
||||
|
||||
export async function sendNotify(
|
||||
body: NotifyRequest,
|
||||
): Promise<{ success: boolean; message: string; record?: NotificationRecord }> {
|
||||
return fetchJson(`${BASE}/notify`, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify(body),
|
||||
});
|
||||
}
|
||||
|
||||
export async function sendNotifyBatch(
|
||||
body: NotifyBatchRequest,
|
||||
): Promise<{ success: boolean; message: string; result: NotifyBatchResult }> {
|
||||
return fetchJson(`${BASE}/notify/batch`, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify(body),
|
||||
});
|
||||
}
|
||||
|
||||
export async function fetchNotifications(
|
||||
status?: NotificationStatus,
|
||||
limit?: number,
|
||||
): Promise<{ records: NotificationRecord[] }> {
|
||||
const params = new URLSearchParams();
|
||||
if (status) params.set('status', status);
|
||||
if (limit) params.set('limit', String(limit));
|
||||
const qs = params.toString();
|
||||
return fetchJson(`${BASE}/notify${qs ? `?${qs}` : ''}`);
|
||||
}
|
||||
|
||||
export async function updateNotification(
|
||||
id: number,
|
||||
body: UpdateNotificationRequest,
|
||||
): Promise<{ success: boolean; record?: NotificationRecord; message?: string }> {
|
||||
return fetchJson(`${BASE}/notify/${id}`, {
|
||||
method: 'PATCH',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify(body),
|
||||
});
|
||||
}
|
||||
103
src/modules/scheduling/csv-export.ts
Normal file
103
src/modules/scheduling/csv-export.ts
Normal file
@@ -0,0 +1,103 @@
|
||||
import type { SchedulingSuggestion, CandidateVehicle } from './types';
|
||||
|
||||
function csvCell(v: string | number | null | undefined): string {
|
||||
if (v === null || v === undefined) return '';
|
||||
const s = typeof v === 'number' ? String(v) : v;
|
||||
if (/[",\n\r]/.test(s)) return `"${s.replace(/"/g, '""')}"`;
|
||||
return s;
|
||||
}
|
||||
|
||||
function pickTopCandidate(s: SchedulingSuggestion): CandidateVehicle | null {
|
||||
if (s.candidates.length === 0) return null;
|
||||
const sameRegion = s.candidates.filter(c => c.isSameRegion);
|
||||
const pool = sameRegion.length > 0 ? sameRegion : s.candidates;
|
||||
return pool.find(c => c.canQualifyAfterSwap) ?? pool[0];
|
||||
}
|
||||
|
||||
function pctString(rate: number): string {
|
||||
return (rate * 100).toFixed(1) + '%';
|
||||
}
|
||||
|
||||
function typeLabel(s: SchedulingSuggestion): string {
|
||||
return s.type === 'replace_qualified' ? '里程高·换下' : '里程低·换走';
|
||||
}
|
||||
|
||||
const HEADERS = [
|
||||
'车牌号',
|
||||
'业务部门',
|
||||
'业务负责人',
|
||||
'客户',
|
||||
'车型',
|
||||
'运营区域',
|
||||
'调度类型',
|
||||
'当前年里程(km)',
|
||||
'年度考核(km)',
|
||||
'年度完成率',
|
||||
'客户30日均(km)',
|
||||
'客户7日均(km)',
|
||||
'剩余天数',
|
||||
'最优候选车牌',
|
||||
'候选当前里程(km)',
|
||||
'候选替换后预估(km)',
|
||||
'候选可达标',
|
||||
'候选区域',
|
||||
'干预状态',
|
||||
] as const;
|
||||
|
||||
export function buildSuggestionsCsv(suggestions: SchedulingSuggestion[]): string {
|
||||
const rows: string[] = [HEADERS.map(csvCell).join(',')];
|
||||
for (const s of suggestions) {
|
||||
const v = s.currentVehicle;
|
||||
const top = pickTopCandidate(s);
|
||||
const notifStatus =
|
||||
s.candidates.find(c => c.notificationStatus === 'executed') ? '已执行'
|
||||
: s.candidates.find(c => c.notificationStatus === 'sent') ? '待执行'
|
||||
: '';
|
||||
rows.push([
|
||||
csvCell(v.plateNumber),
|
||||
csvCell(v.department ?? ''),
|
||||
csvCell(v.manager ?? ''),
|
||||
csvCell(v.customer ?? ''),
|
||||
csvCell(v.vehicleType),
|
||||
csvCell(v.region),
|
||||
csvCell(typeLabel(s)),
|
||||
csvCell(Math.round(v.currentYearMileage)),
|
||||
csvCell(Math.round(v.yearTarget)),
|
||||
csvCell(pctString(v.completionRate)),
|
||||
csvCell(Math.round(v.customerAvgDaily)),
|
||||
csvCell(Math.round(v.customerAvgDaily7d)),
|
||||
csvCell(v.daysLeft),
|
||||
csvCell(top?.plateNumber ?? ''),
|
||||
csvCell(top ? Math.round(top.totalMileage) : ''),
|
||||
csvCell(top ? Math.round(top.predictedAfterSwap) : ''),
|
||||
csvCell(top ? (top.canQualifyAfterSwap ? '是' : '否') : ''),
|
||||
csvCell(top?.region ?? ''),
|
||||
csvCell(notifStatus),
|
||||
].join(','));
|
||||
}
|
||||
return rows.join('\r\n');
|
||||
}
|
||||
|
||||
export function downloadCsv(filename: string, csv: string): void {
|
||||
// UTF-8 BOM so Excel opens Chinese characters correctly
|
||||
const blob = new Blob(['\uFEFF', csv], { type: 'text/csv;charset=utf-8' });
|
||||
const url = URL.createObjectURL(blob);
|
||||
const a = document.createElement('a');
|
||||
a.href = url;
|
||||
a.download = filename;
|
||||
document.body.appendChild(a);
|
||||
a.click();
|
||||
document.body.removeChild(a);
|
||||
URL.revokeObjectURL(url);
|
||||
}
|
||||
|
||||
export function exportSuggestionsCsv(suggestions: SchedulingSuggestion[], prefix = '调度建议'): void {
|
||||
const now = new Date();
|
||||
const y = now.getFullYear();
|
||||
const m = String(now.getMonth() + 1).padStart(2, '0');
|
||||
const d = String(now.getDate()).padStart(2, '0');
|
||||
const hh = String(now.getHours()).padStart(2, '0');
|
||||
const mm = String(now.getMinutes()).padStart(2, '0');
|
||||
const csv = buildSuggestionsCsv(suggestions);
|
||||
downloadCsv(`${prefix}_${y}${m}${d}_${hh}${mm}.csv`, csv);
|
||||
}
|
||||
16
src/modules/scheduling/types.ts
Normal file
16
src/modules/scheduling/types.ts
Normal file
@@ -0,0 +1,16 @@
|
||||
export type {
|
||||
SchedulingVehicleInfo,
|
||||
CandidateVehicle,
|
||||
SchedulingSuggestion,
|
||||
SchedulingSummary,
|
||||
SchedulingTargetOption,
|
||||
SchedulingResponse,
|
||||
NotifyRequest,
|
||||
NotifyBatchRequest,
|
||||
NotifyBatchResult,
|
||||
NotificationStatus,
|
||||
NotificationRecord,
|
||||
UpdateNotificationRequest,
|
||||
ReasonLine,
|
||||
ReasonBlock,
|
||||
} from '../../shared/scheduling/types';
|
||||
@@ -66,6 +66,7 @@ app.get('/exchange', async (c) => {
|
||||
depCode: userInfo.depCode,
|
||||
depName,
|
||||
permissionLevel,
|
||||
roles: roleNames,
|
||||
};
|
||||
|
||||
const token = jwt.sign(payload, JWT_SECRET, { expiresIn: '8h' });
|
||||
|
||||
@@ -4,11 +4,15 @@ import type { JwtPayload, AuthUser } from './types.js';
|
||||
|
||||
const JWT_SECRET = process.env.JWT_SECRET || 'ln-bi-default-secret';
|
||||
|
||||
// 演示分支:跳过所有认证(保留完整逻辑便于快速恢复)
|
||||
const BYPASS_AUTH = true;
|
||||
|
||||
export async function authMiddleware(c: Context, next: Next) {
|
||||
const path = c.req.path;
|
||||
|
||||
// 临时:跳过所有认证
|
||||
return next();
|
||||
if (BYPASS_AUTH) {
|
||||
return next();
|
||||
}
|
||||
|
||||
// 跳过不需要认证的路径
|
||||
if (path === '/api/health' || path.startsWith('/api/auth/')) {
|
||||
@@ -16,7 +20,7 @@ export async function authMiddleware(c: Context, next: Next) {
|
||||
}
|
||||
|
||||
const authHeader = c.req.header('Authorization');
|
||||
if (!authHeader?.startsWith('Bearer ')) {
|
||||
if (!authHeader || !authHeader.startsWith('Bearer ')) {
|
||||
return c.json({ error: 'Unauthorized' }, 401);
|
||||
}
|
||||
|
||||
@@ -31,6 +35,7 @@ export async function authMiddleware(c: Context, next: Next) {
|
||||
depCode: payload.depCode,
|
||||
depName: payload.depName,
|
||||
permissionLevel: payload.permissionLevel,
|
||||
roles: payload.roles ?? [],
|
||||
};
|
||||
c.set('user', user);
|
||||
return next();
|
||||
|
||||
@@ -7,6 +7,7 @@ export interface AuthUser {
|
||||
depCode: string;
|
||||
depName: string;
|
||||
permissionLevel: PermissionLevel;
|
||||
roles: string[];
|
||||
}
|
||||
|
||||
export interface JwtPayload {
|
||||
@@ -16,12 +17,16 @@ export interface JwtPayload {
|
||||
depCode: string;
|
||||
depName: string;
|
||||
permissionLevel: PermissionLevel;
|
||||
roles: string[];
|
||||
iat?: number;
|
||||
exp?: number;
|
||||
}
|
||||
|
||||
/** 全量权限角色名 */
|
||||
export const FULL_ACCESS_ROLES = ['所有权限', '数智中心', 'BI-Leader'];
|
||||
|
||||
/** 部门级权限角色名 */
|
||||
export const DEPT_ACCESS_ROLES = ['BI-Leader-Dep'];
|
||||
// Re-export role constants and helpers from the shared module so existing
|
||||
// server imports (`from './types.js'`) keep working.
|
||||
export {
|
||||
FULL_ACCESS_ROLES,
|
||||
DEPT_ACCESS_ROLES,
|
||||
SCHEDULING_ACCESS_ROLES,
|
||||
canAccessScheduling,
|
||||
} from '../../shared/auth/roles.js';
|
||||
|
||||
@@ -5,6 +5,8 @@ import { cors } from 'hono/cors';
|
||||
import dotenv from 'dotenv';
|
||||
import vehiclesRouter from './routes/vehicles.js';
|
||||
import mileageRouter from './routes/mileage/index.js';
|
||||
import schedulingRouter from './routes/scheduling/index.js';
|
||||
import { ensureSchedulingTables } from './routes/scheduling/db-schema.js';
|
||||
import authRouter from './auth/login.js';
|
||||
import { authMiddleware } from './auth/middleware.js';
|
||||
|
||||
@@ -22,6 +24,7 @@ app.use('/api/*', authMiddleware);
|
||||
|
||||
app.route('/api/vehicles', vehiclesRouter);
|
||||
app.route('/api/mileage', mileageRouter);
|
||||
app.route('/api/scheduling', schedulingRouter);
|
||||
|
||||
app.get('/api/health', (c) => c.json({ status: 'ok', time: new Date().toISOString() }));
|
||||
|
||||
@@ -32,6 +35,7 @@ app.use('/*', serveStatic({ root: './dist', path: 'index.html' }));
|
||||
const port = Number(process.env.SERVER_PORT) || 3001;
|
||||
|
||||
console.log(`Server starting on port ${port}...`);
|
||||
ensureSchedulingTables().catch(e => console.error('scheduling bootstrap error:', e));
|
||||
serve({ fetch: app.fetch, port }, () => {
|
||||
console.log(`Server running at http://localhost:${port}`);
|
||||
});
|
||||
|
||||
@@ -49,10 +49,26 @@ interface MileageRow {
|
||||
source: string;
|
||||
}
|
||||
|
||||
async function fetchBizTotalMileageMap(): Promise<Map<string, number>> {
|
||||
// v_vehicle_daily_stats.total_km 对 G7S 数据源常为 NULL(G7 只回传日增量),
|
||||
// 业务库 tab_mileage_assessment_vehicle.vehicle_total_mileage 是累加后的权威累计值,
|
||||
// 用它兜底保证 totalKm 汇总完整。
|
||||
const [rows] = await pool.execute(
|
||||
'SELECT plate_number, vehicle_total_mileage FROM tab_mileage_assessment_vehicle WHERE is_deleted = 0'
|
||||
) as [{ plate_number: string; vehicle_total_mileage: string | number | null }[], unknown];
|
||||
const map = new Map<string, number>();
|
||||
for (const r of rows) {
|
||||
const km = Number(r.vehicle_total_mileage);
|
||||
if (Number.isFinite(km) && km > 0) map.set(r.plate_number, km);
|
||||
}
|
||||
return map;
|
||||
}
|
||||
|
||||
function mergeVehicles(
|
||||
mileageRows: MileageRow[],
|
||||
infoMap: Map<string, VehicleInfoRow>,
|
||||
yesterdayMap: Map<string, number>,
|
||||
bizTotalMap: Map<string, number>,
|
||||
): CachedVehicle[] {
|
||||
const mileageMap = new Map<string, MileageRow>();
|
||||
for (const row of mileageRows) {
|
||||
@@ -66,11 +82,13 @@ function mergeVehicles(
|
||||
const info = infoMap.get(m.plate);
|
||||
const dailyKm = Number(m.daily_km) || 0;
|
||||
const source = m.source || 'NONE';
|
||||
const gpsTotal = m.total_km !== null ? Number(m.total_km) : null;
|
||||
const bizTotal = bizTotalMap.get(m.plate);
|
||||
return {
|
||||
plate: m.plate,
|
||||
vin: m.vin,
|
||||
dailyKm,
|
||||
totalKm: m.total_km !== null ? Number(m.total_km) : null,
|
||||
totalKm: gpsTotal !== null ? gpsTotal : (bizTotal ?? null),
|
||||
source,
|
||||
isOnline: source !== 'NONE' && dailyKm > 0,
|
||||
isDataSynced: source !== 'NONE',
|
||||
@@ -91,7 +109,7 @@ export async function refreshMonitoringCache(): Promise<void> {
|
||||
console.log('[mileage] refreshing monitoring cache...');
|
||||
const start = Date.now();
|
||||
|
||||
const [mileageRows, yesterdayMap, infoMap, targetRows] = await Promise.all([
|
||||
const [mileageRows, yesterdayMap, infoMap, targetRows, bizTotalMap] = await Promise.all([
|
||||
(async () => {
|
||||
const [dateRows] = await mileagePool.execute(
|
||||
'SELECT MAX(stat_date) as latest FROM v_vehicle_daily_stats'
|
||||
@@ -124,6 +142,7 @@ export async function refreshMonitoringCache(): Promise<void> {
|
||||
JOIN tab_mileage_assessment_vehicle v ON v.target_id = t.id AND v.is_deleted = 0
|
||||
WHERE t.is_deleted = 0`
|
||||
).then(([rows]) => rows as { id: number; target_name: string; plate_number: string }[]),
|
||||
fetchBizTotalMileageMap(),
|
||||
]);
|
||||
|
||||
const targetPlatesMap = new Map<string, Set<string>>();
|
||||
@@ -134,7 +153,7 @@ export async function refreshMonitoringCache(): Promise<void> {
|
||||
}
|
||||
const targetNames = Array.from(targetPlatesMap.keys());
|
||||
|
||||
const vehicles = mergeVehicles(mileageRows, infoMap, yesterdayMap);
|
||||
const vehicles = mergeVehicles(mileageRows, infoMap, yesterdayMap, bizTotalMap);
|
||||
const totalToday = vehicles.reduce((sum, v) => sum + v.dailyKm, 0);
|
||||
const totalAll = vehicles.reduce((sum, v) => sum + (v.totalKm || 0), 0);
|
||||
|
||||
@@ -153,7 +172,7 @@ export async function refreshMonitoringCache(): Promise<void> {
|
||||
}
|
||||
|
||||
export async function queryDateMileage(dateStr: string): Promise<CachedVehicle[]> {
|
||||
const [mileageRows, yesterdayRows, infoMap] = await Promise.all([
|
||||
const [mileageRows, yesterdayRows, infoMap, bizTotalMap] = await Promise.all([
|
||||
mileagePool.execute(
|
||||
'SELECT plate, vin, daily_km, total_km, source FROM v_vehicle_daily_stats WHERE stat_date = ?',
|
||||
[dateStr]
|
||||
@@ -163,6 +182,7 @@ export async function queryDateMileage(dateStr: string): Promise<CachedVehicle[]
|
||||
[dateStr]
|
||||
).then(([r]) => r as { plate: string; daily_km: string }[]),
|
||||
fetchVehicleInfoMap(),
|
||||
fetchBizTotalMileageMap(),
|
||||
]);
|
||||
|
||||
const yesterdayMap = new Map<string, number>();
|
||||
@@ -172,7 +192,7 @@ export async function queryDateMileage(dateStr: string): Promise<CachedVehicle[]
|
||||
if (km > existing) yesterdayMap.set(r.plate, km);
|
||||
}
|
||||
|
||||
return mergeVehicles(mileageRows, infoMap, yesterdayMap);
|
||||
return mergeVehicles(mileageRows, infoMap, yesterdayMap, bizTotalMap);
|
||||
}
|
||||
|
||||
export function buildDateFilters(vehicles: CachedVehicle[]): MonitoringFilters {
|
||||
|
||||
257
src/server/routes/scheduling/algorithm.ts
Normal file
257
src/server/routes/scheduling/algorithm.ts
Normal file
@@ -0,0 +1,257 @@
|
||||
import type {
|
||||
EnrichedVehicle, InventoryVehicle, SchedulingSuggestion,
|
||||
CandidateVehicle, VehicleClassification, SchedulingSummary,
|
||||
ReasonBlock,
|
||||
} from './types.js';
|
||||
|
||||
function fmtKmSimple(v: number): string {
|
||||
if (v >= 10000) return (v / 10000).toFixed(1) + '万';
|
||||
return Math.round(v).toLocaleString();
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// 1. Vehicle type compatibility
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
export function isTypeCompatible(sourceType: string, candidateType: string): boolean {
|
||||
if (sourceType === candidateType) return true;
|
||||
// Cold-chain 4.5T can replace plain-cargo 4.5T
|
||||
if (candidateType === '4.5T冷链' && (sourceType === '4.5T冷链' || sourceType === '4.5T普货')) return true;
|
||||
return false;
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// 2. Vehicle classification
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
export function classifyVehicle(
|
||||
currentYearIsQualified: boolean,
|
||||
currentYearMileage: number,
|
||||
yearTarget: number,
|
||||
predictedYearEnd: number,
|
||||
): VehicleClassification {
|
||||
// qualified: current year mileage already >= target (actually done, not just predicted)
|
||||
const actualRate = yearTarget > 0 ? currentYearMileage / yearTarget : 0;
|
||||
if (currentYearIsQualified || actualRate >= 1.0) return 'qualified';
|
||||
// hopeless: even with remaining days, predicted < 60% of target
|
||||
if (yearTarget > 0 && predictedYearEnd / yearTarget < 0.6) return 'hopeless';
|
||||
return 'normal';
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// 3. Helper – convert EnrichedVehicle to SchedulingVehicleInfo shape
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
import type { SchedulingVehicleInfo } from './types.js';
|
||||
|
||||
export function toVehicleInfo(v: EnrichedVehicle): SchedulingVehicleInfo {
|
||||
// Use current year completion rate instead of overall
|
||||
const yearCompletionRate = v.yearTarget > 0 ? v.currentYearMileage / v.yearTarget : 0;
|
||||
return {
|
||||
plateNumber: v.plateNumber,
|
||||
targetId: v.targetId,
|
||||
targetName: v.targetName,
|
||||
vehicleType: v.vehicleType,
|
||||
totalMileage: v.totalMileage,
|
||||
currentYearMileage: v.currentYearMileage,
|
||||
completionRate: yearCompletionRate,
|
||||
yearTarget: v.yearTarget,
|
||||
region: v.region,
|
||||
province: v.province,
|
||||
customer: v.customer,
|
||||
department: v.department,
|
||||
manager: v.manager,
|
||||
customerAvgDaily: v.customerAvgDaily,
|
||||
customerAvgDaily7d: v.customerAvgDaily7d,
|
||||
predictedYearEnd: v.predictedYearEnd,
|
||||
daysLeft: v.daysLeft,
|
||||
};
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// 4. Main algorithm – generate scheduling suggestions
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
export function generateSuggestions(
|
||||
vehicles: EnrichedVehicle[],
|
||||
inventoryVehicles: InventoryVehicle[],
|
||||
): { suggestions: SchedulingSuggestion[]; summary: SchedulingSummary } {
|
||||
const qualified = vehicles.filter((v) => v.classification === 'qualified');
|
||||
const hopeless = vehicles.filter((v) => v.classification === 'hopeless');
|
||||
|
||||
const suggestions: SchedulingSuggestion[] = [];
|
||||
|
||||
// --- rescue_hopeless (high priority) ---
|
||||
// Take the hopeless car away → give to high-mileage customer to sprint.
|
||||
// Replace with an inventory car that is CLOSE to qualifying — the low-mileage
|
||||
// customer's remaining driving days can push it over the finish line.
|
||||
//
|
||||
// Key insight: pick candidates where
|
||||
// candidate.totalMileage + customer.avgDaily × daysLeft >= yearTarget
|
||||
// i.e., the customer's daily driving is enough to finish the candidate's target.
|
||||
// Among those, prefer the one with the smallest gap (easiest to finish).
|
||||
// Exclude already-qualified (>= 100%) — no value in swapping those.
|
||||
for (const vehicle of hopeless) {
|
||||
const candidates: CandidateVehicle[] = inventoryVehicles
|
||||
.filter((inv) => {
|
||||
if (!isTypeCompatible(vehicle.vehicleType, inv.vehicleType)) return false;
|
||||
const effectiveTarget = inv.yearTarget ?? vehicle.yearTarget;
|
||||
if (effectiveTarget > 0 && inv.totalMileage >= effectiveTarget) return false;
|
||||
return true;
|
||||
})
|
||||
.map((inv) => {
|
||||
const effectiveTarget = inv.yearTarget ?? vehicle.yearTarget;
|
||||
const mileageGap = Math.max(0, effectiveTarget - inv.totalMileage);
|
||||
const candidateCanAdd = vehicle.customerAvgDaily * inv.daysLeft;
|
||||
const predictedAfterSwap = inv.totalMileage + candidateCanAdd;
|
||||
const canQualifyAfterSwap = predictedAfterSwap >= effectiveTarget;
|
||||
return {
|
||||
plateNumber: inv.plateNumber,
|
||||
targetId: inv.targetId,
|
||||
targetName: inv.targetName,
|
||||
vehicleType: inv.vehicleType,
|
||||
totalMileage: inv.totalMileage,
|
||||
completionRate: inv.completionRate,
|
||||
yearTarget: inv.yearTarget ?? vehicle.yearTarget,
|
||||
daysLeft: inv.daysLeft,
|
||||
region: inv.region,
|
||||
province: inv.province,
|
||||
mileageGap,
|
||||
predictedAfterSwap,
|
||||
canQualifyAfterSwap,
|
||||
isSameRegion: inv.region === vehicle.region,
|
||||
notificationId: null,
|
||||
notificationStatus: null,
|
||||
};
|
||||
})
|
||||
.sort((a, b) => {
|
||||
// 1. Same-region first (business rule: prefer same-region swaps)
|
||||
if (a.isSameRegion !== b.isSameRegion) return a.isSameRegion ? -1 : 1;
|
||||
// 2. Can-qualify next
|
||||
if (a.canQualifyAfterSwap !== b.canQualifyAfterSwap)
|
||||
return a.canQualifyAfterSwap ? -1 : 1;
|
||||
// 3. Smallest gap (closest to target)
|
||||
return a.mileageGap - b.mileageGap;
|
||||
})
|
||||
;
|
||||
|
||||
const gap = Math.max(0, vehicle.yearTarget - vehicle.currentYearMileage);
|
||||
const dailyReq = vehicle.daysLeft > 0 ? Math.round(gap / vehicle.daysLeft) : 0;
|
||||
const reason: ReasonBlock = {
|
||||
lines: [
|
||||
{ label: '客户日均', value: `${Math.round(vehicle.customerAvgDaily)} km` },
|
||||
{ label: '年度考核剩余', value: `${vehicle.daysLeft} 天` },
|
||||
{ label: '日均需', value: `${fmtKmSimple(dailyReq)} km` },
|
||||
],
|
||||
conclusion: '预估无法达标,需替换',
|
||||
};
|
||||
|
||||
suggestions.push({
|
||||
id: `hopeless-${vehicle.plateNumber}`,
|
||||
priority: 'high',
|
||||
type: 'rescue_hopeless',
|
||||
currentVehicle: toVehicleInfo(vehicle),
|
||||
candidates,
|
||||
reason,
|
||||
});
|
||||
}
|
||||
|
||||
// --- replace_qualified (medium priority) ---
|
||||
// Every qualified vehicle gets a suggestion row so the list count matches
|
||||
// `qualifiedCount`. Candidates may be empty when no inventory vehicle can
|
||||
// reach target at this customer — the row still surfaces for manual review.
|
||||
for (const vehicle of qualified) {
|
||||
const candidates: CandidateVehicle[] = inventoryVehicles
|
||||
.filter((inv) => {
|
||||
if (!isTypeCompatible(vehicle.vehicleType, inv.vehicleType)) return false;
|
||||
const effectiveTarget = inv.yearTarget ?? vehicle.yearTarget;
|
||||
if (effectiveTarget > 0 && inv.totalMileage >= effectiveTarget) return false;
|
||||
return true;
|
||||
})
|
||||
.map((inv) => {
|
||||
const effectiveTarget = inv.yearTarget ?? vehicle.yearTarget;
|
||||
const mileageGap = Math.max(0, effectiveTarget - inv.totalMileage);
|
||||
const candidateCanAdd = vehicle.customerAvgDaily * inv.daysLeft;
|
||||
const predictedAfterSwap = inv.totalMileage + candidateCanAdd;
|
||||
const canQualifyAfterSwap = predictedAfterSwap >= effectiveTarget;
|
||||
return {
|
||||
plateNumber: inv.plateNumber,
|
||||
targetId: inv.targetId,
|
||||
targetName: inv.targetName,
|
||||
vehicleType: inv.vehicleType,
|
||||
totalMileage: inv.totalMileage,
|
||||
completionRate: inv.completionRate,
|
||||
yearTarget: inv.yearTarget ?? vehicle.yearTarget,
|
||||
daysLeft: inv.daysLeft,
|
||||
region: inv.region,
|
||||
province: inv.province,
|
||||
mileageGap,
|
||||
predictedAfterSwap,
|
||||
canQualifyAfterSwap,
|
||||
isSameRegion: inv.region === vehicle.region,
|
||||
notificationId: null,
|
||||
notificationStatus: null,
|
||||
};
|
||||
})
|
||||
// Only keep candidates that can actually qualify at this customer —
|
||||
// swapping in a car that still can't reach target wastes the high-mileage customer
|
||||
.filter(c => c.canQualifyAfterSwap)
|
||||
.sort((a, b) => {
|
||||
// 1. Same-region first
|
||||
if (a.isSameRegion !== b.isSameRegion) return a.isSameRegion ? -1 : 1;
|
||||
// 2. Biggest gap first (most value from the swap)
|
||||
return b.mileageGap - a.mileageGap;
|
||||
})
|
||||
;
|
||||
|
||||
const yearRate = vehicle.yearTarget > 0 ? Math.round((vehicle.currentYearMileage / vehicle.yearTarget) * 100) : 0;
|
||||
const canAddKm = vehicle.customerAvgDaily * vehicle.daysLeft;
|
||||
const reason: ReasonBlock = {
|
||||
lines: [
|
||||
{ label: '客户日均', value: `${Math.round(vehicle.customerAvgDaily)} km` },
|
||||
{ label: '年度完成率', value: `${yearRate}%` },
|
||||
{ label: '年度考核剩余', value: `${vehicle.daysLeft} 天` },
|
||||
{ label: '可为新车贡献', value: `约 ${fmtKmSimple(Math.round(canAddKm))} km` },
|
||||
],
|
||||
conclusion: '已达标,建议换上未达标车辆',
|
||||
};
|
||||
|
||||
suggestions.push({
|
||||
id: `qualified-${vehicle.plateNumber}`,
|
||||
priority: 'medium',
|
||||
type: 'replace_qualified',
|
||||
currentVehicle: toVehicleInfo(vehicle),
|
||||
candidates,
|
||||
reason,
|
||||
});
|
||||
}
|
||||
|
||||
// Drop rescue_hopeless with no candidates — no actionable rescue available.
|
||||
// Keep every replace_qualified so the list count matches the qualifiedCount card.
|
||||
const filteredSuggestions = suggestions.filter(
|
||||
(s) => s.type === 'replace_qualified' || s.candidates.length > 0,
|
||||
);
|
||||
|
||||
// Sort: high priority first
|
||||
filteredSuggestions.sort((a, b) => {
|
||||
if (a.priority === b.priority) return 0;
|
||||
return a.priority === 'high' ? -1 : 1;
|
||||
});
|
||||
|
||||
// estimatedGain uses strict definition: count suggestions that have at least
|
||||
// one candidate able to qualify after swap. The API layer recomputes this
|
||||
// post permission-filtering, so keep both sides consistent.
|
||||
const estimatedGain = filteredSuggestions.filter((s) =>
|
||||
s.candidates.some((c) => c.canQualifyAfterSwap),
|
||||
).length;
|
||||
|
||||
const summary: SchedulingSummary = {
|
||||
qualifiedCount: qualified.length,
|
||||
hopelessCount: hopeless.length,
|
||||
suggestionCount: filteredSuggestions.length,
|
||||
estimatedGain,
|
||||
recentInterventionCount: 0,
|
||||
};
|
||||
|
||||
return { suggestions: filteredSuggestions, summary };
|
||||
}
|
||||
34
src/server/routes/scheduling/db-schema.ts
Normal file
34
src/server/routes/scheduling/db-schema.ts
Normal file
@@ -0,0 +1,34 @@
|
||||
import pool from '../../db.js';
|
||||
|
||||
const CREATE_NOTIFICATIONS_TABLE = `
|
||||
CREATE TABLE IF NOT EXISTS tab_scheduling_notifications (
|
||||
id BIGINT PRIMARY KEY AUTO_INCREMENT,
|
||||
suggestion_id VARCHAR(128) NOT NULL,
|
||||
current_plate VARCHAR(32) NOT NULL,
|
||||
candidate_plate VARCHAR(32) NOT NULL,
|
||||
operator_id VARCHAR(64),
|
||||
operator_name VARCHAR(128),
|
||||
status VARCHAR(16) NOT NULL DEFAULT 'sent',
|
||||
created_at DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP,
|
||||
updated_at DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
|
||||
executed_at DATETIME NULL,
|
||||
notes VARCHAR(500) NULL,
|
||||
before_mileage INT NULL,
|
||||
after_mileage INT NULL,
|
||||
INDEX idx_suggestion_id (suggestion_id),
|
||||
INDEX idx_current_plate (current_plate),
|
||||
INDEX idx_candidate_plate (candidate_plate),
|
||||
INDEX idx_status (status),
|
||||
INDEX idx_created_at (created_at)
|
||||
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COMMENT='智能调度干预/执行记录'
|
||||
`;
|
||||
|
||||
export async function ensureSchedulingTables(): Promise<void> {
|
||||
try {
|
||||
await pool.query(CREATE_NOTIFICATIONS_TABLE);
|
||||
console.log('[scheduling] notifications table ready');
|
||||
} catch (e) {
|
||||
console.error('[scheduling] failed to ensure tables:', e);
|
||||
throw e;
|
||||
}
|
||||
}
|
||||
23
src/server/routes/scheduling/index.ts
Normal file
23
src/server/routes/scheduling/index.ts
Normal file
@@ -0,0 +1,23 @@
|
||||
import { Hono } from 'hono';
|
||||
import suggestionsRouter from './suggestions.js';
|
||||
import notifyRouter from './notify.js';
|
||||
import type { AuthUser } from '../../auth/types.js';
|
||||
import { canAccessScheduling } from '../../auth/types.js';
|
||||
|
||||
const app = new Hono();
|
||||
|
||||
// Module-level access guard. When auth middleware is active, `user` is set and
|
||||
// we require a role from SCHEDULING_ACCESS_ROLES (or a full-access role).
|
||||
// When auth is bypassed (dev), `user` is undefined and requests pass through.
|
||||
app.use('*', async (c, next) => {
|
||||
const user = (c as any).get('user') as AuthUser | undefined;
|
||||
if (user && !canAccessScheduling(user.roles)) {
|
||||
return c.json({ error: 'Forbidden: 智能调度访问需要 BI-SCHEDULE-OPT 角色' }, 403);
|
||||
}
|
||||
return next();
|
||||
});
|
||||
|
||||
app.route('/suggestions', suggestionsRouter);
|
||||
app.route('/notify', notifyRouter);
|
||||
|
||||
export default app;
|
||||
281
src/server/routes/scheduling/notify.ts
Normal file
281
src/server/routes/scheduling/notify.ts
Normal file
@@ -0,0 +1,281 @@
|
||||
import { Hono } from 'hono';
|
||||
import pool from '../../db.js';
|
||||
import type { AuthUser } from '../../auth/types.js';
|
||||
import type {
|
||||
NotifyRequest,
|
||||
NotifyBatchRequest,
|
||||
NotifyBatchResult,
|
||||
NotificationRecord,
|
||||
NotificationStatus,
|
||||
UpdateNotificationRequest,
|
||||
} from './types.js';
|
||||
|
||||
const app = new Hono();
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Helpers
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
function rowToRecord(row: any): NotificationRecord {
|
||||
return {
|
||||
id: Number(row.id),
|
||||
suggestionId: row.suggestion_id,
|
||||
currentPlate: row.current_plate,
|
||||
candidatePlate: row.candidate_plate,
|
||||
operatorId: row.operator_id,
|
||||
operatorName: row.operator_name,
|
||||
status: row.status,
|
||||
createdAt: row.created_at ? new Date(row.created_at).toISOString() : '',
|
||||
updatedAt: row.updated_at ? new Date(row.updated_at).toISOString() : '',
|
||||
executedAt: row.executed_at ? new Date(row.executed_at).toISOString() : null,
|
||||
notes: row.notes,
|
||||
beforeMileage: row.before_mileage != null ? Number(row.before_mileage) : null,
|
||||
afterMileage: row.after_mileage != null ? Number(row.after_mileage) : null,
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* Count non-cancelled interventions created within the last 7 days.
|
||||
*/
|
||||
export async function fetchRecentInterventionCount(): Promise<number> {
|
||||
const [rows] = (await pool.execute(
|
||||
`SELECT COUNT(*) AS cnt FROM tab_scheduling_notifications
|
||||
WHERE status != 'cancelled'
|
||||
AND created_at >= DATE_SUB(NOW(), INTERVAL 7 DAY)`,
|
||||
)) as [any[], unknown];
|
||||
return rows.length > 0 ? Number(rows[0].cnt) || 0 : 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* Fetch notification status map for the currently-visible (suggestion, candidate) pairs.
|
||||
* Key: `${suggestionId}::${candidatePlate}` → latest non-cancelled notification.
|
||||
*/
|
||||
export async function fetchActiveNotificationMap(): Promise<
|
||||
Map<string, { id: number; status: NotificationStatus }>
|
||||
> {
|
||||
const [rows] = (await pool.execute(
|
||||
`SELECT id, suggestion_id, candidate_plate, status, created_at
|
||||
FROM tab_scheduling_notifications
|
||||
WHERE status != 'cancelled'
|
||||
ORDER BY created_at DESC`,
|
||||
)) as [any[], unknown];
|
||||
|
||||
const map = new Map<string, { id: number; status: NotificationStatus }>();
|
||||
for (const row of rows) {
|
||||
const key = `${row.suggestion_id}::${row.candidate_plate}`;
|
||||
if (!map.has(key)) {
|
||||
map.set(key, { id: Number(row.id), status: row.status });
|
||||
}
|
||||
}
|
||||
return map;
|
||||
}
|
||||
|
||||
async function insertNotification(
|
||||
req: NotifyRequest,
|
||||
operator: { id: string | null; name: string | null },
|
||||
): Promise<NotificationRecord | { skipped: true; existingPlate: string }> {
|
||||
// Business rule: each current vehicle (suggestion) can have AT MOST ONE
|
||||
// active intervention at a time. Any non-cancelled record for the same
|
||||
// suggestion_id blocks further interventions until it is cancelled.
|
||||
const [existing] = (await pool.execute(
|
||||
`SELECT id, candidate_plate FROM tab_scheduling_notifications
|
||||
WHERE suggestion_id = ? AND status != 'cancelled'
|
||||
LIMIT 1`,
|
||||
[req.suggestionId],
|
||||
)) as [any[], unknown];
|
||||
|
||||
if (existing.length > 0) {
|
||||
return { skipped: true, existingPlate: existing[0].candidate_plate as string };
|
||||
}
|
||||
|
||||
const [result] = (await pool.execute(
|
||||
`INSERT INTO tab_scheduling_notifications
|
||||
(suggestion_id, current_plate, candidate_plate, operator_id, operator_name, status)
|
||||
VALUES (?, ?, ?, ?, ?, 'sent')`,
|
||||
[req.suggestionId, req.currentPlate, req.candidatePlate, operator.id, operator.name],
|
||||
)) as [any, unknown];
|
||||
|
||||
const insertedId = Number(result.insertId);
|
||||
const [rows] = (await pool.execute(
|
||||
`SELECT * FROM tab_scheduling_notifications WHERE id = ?`,
|
||||
[insertedId],
|
||||
)) as [any[], unknown];
|
||||
|
||||
return rowToRecord(rows[0]);
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Routes
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
// POST /api/scheduling/notify — single notify
|
||||
app.post('/', async (c) => {
|
||||
try {
|
||||
const body = await c.req.json<NotifyRequest>();
|
||||
const { suggestionId, currentPlate, candidatePlate } = body;
|
||||
|
||||
if (!suggestionId || !currentPlate || !candidatePlate) {
|
||||
return c.json({ success: false, message: '缺少必要参数' }, 400);
|
||||
}
|
||||
|
||||
const user = (c as any).get('user') as AuthUser | undefined;
|
||||
const operator = {
|
||||
id: user?.userId ?? null,
|
||||
name: user?.userName ?? null,
|
||||
};
|
||||
|
||||
const result = await insertNotification(body, operator);
|
||||
if ('skipped' in result) {
|
||||
return c.json(
|
||||
{ success: false, message: `此车已有干预(候选车 ${result.existingPlate}),请先解除` },
|
||||
409,
|
||||
);
|
||||
}
|
||||
|
||||
console.log(
|
||||
`[scheduling:notify] operator=${operator.name} suggestion=${suggestionId} current=${currentPlate} candidate=${candidatePlate}`,
|
||||
);
|
||||
|
||||
return c.json({
|
||||
success: true,
|
||||
message: `干预已登记:${currentPlate} → ${candidatePlate}`,
|
||||
record: result,
|
||||
});
|
||||
} catch (e: unknown) {
|
||||
console.error('scheduling notify error:', e);
|
||||
return c.json({ success: false, message: '登记干预失败' }, 500);
|
||||
}
|
||||
});
|
||||
|
||||
// POST /api/scheduling/notify/batch — bulk notify
|
||||
app.post('/batch', async (c) => {
|
||||
try {
|
||||
const body = await c.req.json<NotifyBatchRequest>();
|
||||
if (!Array.isArray(body.items) || body.items.length === 0) {
|
||||
return c.json({ success: false, message: '缺少 items' }, 400);
|
||||
}
|
||||
|
||||
const user = (c as any).get('user') as AuthUser | undefined;
|
||||
const operator = {
|
||||
id: user?.userId ?? null,
|
||||
name: user?.userName ?? null,
|
||||
};
|
||||
|
||||
const result: NotifyBatchResult = { success: 0, skipped: 0, failed: 0, records: [] };
|
||||
for (const item of body.items) {
|
||||
if (!item.suggestionId || !item.currentPlate || !item.candidatePlate) {
|
||||
result.failed++;
|
||||
continue;
|
||||
}
|
||||
try {
|
||||
const r = await insertNotification(item, operator);
|
||||
if ('skipped' in r) result.skipped++;
|
||||
else {
|
||||
result.success++;
|
||||
result.records.push(r);
|
||||
}
|
||||
} catch {
|
||||
result.failed++;
|
||||
}
|
||||
}
|
||||
|
||||
console.log(
|
||||
`[scheduling:notify:batch] operator=${operator.name} total=${body.items.length} success=${result.success} skipped=${result.skipped} failed=${result.failed}`,
|
||||
);
|
||||
|
||||
return c.json({
|
||||
success: true,
|
||||
message: `批量干预:成功 ${result.success},跳过 ${result.skipped},失败 ${result.failed}`,
|
||||
result,
|
||||
});
|
||||
} catch (e: unknown) {
|
||||
console.error('scheduling batch notify error:', e);
|
||||
return c.json({ success: false, message: '批量干预失败' }, 500);
|
||||
}
|
||||
});
|
||||
|
||||
// GET /api/scheduling/notify — list all notifications (history)
|
||||
app.get('/', async (c) => {
|
||||
try {
|
||||
const status = c.req.query('status');
|
||||
const limit = Math.min(Number(c.req.query('limit')) || 200, 500);
|
||||
|
||||
const where: string[] = [];
|
||||
const params: (string | number)[] = [];
|
||||
if (status) {
|
||||
where.push('status = ?');
|
||||
params.push(status);
|
||||
}
|
||||
const whereSql = where.length ? `WHERE ${where.join(' AND ')}` : '';
|
||||
params.push(limit);
|
||||
|
||||
const [rows] = (await pool.query(
|
||||
`SELECT * FROM tab_scheduling_notifications
|
||||
${whereSql}
|
||||
ORDER BY created_at DESC
|
||||
LIMIT ?`,
|
||||
params,
|
||||
)) as [any[], unknown];
|
||||
|
||||
return c.json({ records: rows.map(rowToRecord) });
|
||||
} catch (e: unknown) {
|
||||
console.error('scheduling notifications list error:', e);
|
||||
return c.json({ records: [] }, 500);
|
||||
}
|
||||
});
|
||||
|
||||
// PATCH /api/scheduling/notify/:id — update status (execute / cancel)
|
||||
app.patch('/:id', async (c) => {
|
||||
try {
|
||||
const id = Number(c.req.param('id'));
|
||||
if (!Number.isFinite(id) || id <= 0) {
|
||||
return c.json({ success: false, message: 'id 无效' }, 400);
|
||||
}
|
||||
|
||||
const body = await c.req.json<UpdateNotificationRequest>();
|
||||
if (!body.status) {
|
||||
return c.json({ success: false, message: '缺少 status' }, 400);
|
||||
}
|
||||
|
||||
const validStatuses: NotificationStatus[] = ['sent', 'executed', 'cancelled'];
|
||||
if (!validStatuses.includes(body.status)) {
|
||||
return c.json({ success: false, message: 'status 不合法' }, 400);
|
||||
}
|
||||
|
||||
const fields: string[] = ['status = ?'];
|
||||
const params: (string | number | null)[] = [body.status];
|
||||
if (body.status === 'executed') {
|
||||
fields.push('executed_at = CURRENT_TIMESTAMP');
|
||||
}
|
||||
if (body.notes !== undefined) {
|
||||
fields.push('notes = ?');
|
||||
params.push(body.notes);
|
||||
}
|
||||
if (body.afterMileage !== undefined) {
|
||||
fields.push('after_mileage = ?');
|
||||
params.push(body.afterMileage);
|
||||
}
|
||||
params.push(id);
|
||||
|
||||
await pool.execute(
|
||||
`UPDATE tab_scheduling_notifications SET ${fields.join(', ')} WHERE id = ?`,
|
||||
params,
|
||||
);
|
||||
|
||||
const [rows] = (await pool.execute(
|
||||
`SELECT * FROM tab_scheduling_notifications WHERE id = ?`,
|
||||
[id],
|
||||
)) as [any[], unknown];
|
||||
|
||||
if (rows.length === 0) {
|
||||
return c.json({ success: false, message: '记录不存在' }, 404);
|
||||
}
|
||||
|
||||
return c.json({ success: true, record: rowToRecord(rows[0]) });
|
||||
} catch (e: unknown) {
|
||||
console.error('scheduling notification update error:', e);
|
||||
return c.json({ success: false, message: '更新失败' }, 500);
|
||||
}
|
||||
});
|
||||
|
||||
export default app;
|
||||
376
src/server/routes/scheduling/suggestions.ts
Normal file
376
src/server/routes/scheduling/suggestions.ts
Normal file
@@ -0,0 +1,376 @@
|
||||
import { Hono } from 'hono';
|
||||
import pool from '../../db.js';
|
||||
import mileagePool from '../../mileage-db.js';
|
||||
import { fetchVehicleInfoMap } from '../mileage/vehicle-info.js';
|
||||
import { mapRegion } from '../vehicles.js';
|
||||
import { filterByPermission, maskCustomerNames } from '../../auth/permissions.js';
|
||||
import { classifyVehicle, generateSuggestions } from './algorithm.js';
|
||||
import { fetchActiveNotificationMap, fetchRecentInterventionCount } from './notify.js';
|
||||
import type { EnrichedVehicle, InventoryVehicle, SchedulingResponse, SchedulingSummary } from './types.js';
|
||||
import type { AuthUser } from '../../auth/types.js';
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Helper: vehicle type classification
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* Infer vehicle type from target name when truck table has no match.
|
||||
* e.g. "交投190辆4.5T冷链车" → "4.5T冷链", "羚牛100辆18T" → "18T"
|
||||
*/
|
||||
function inferTypeFromTargetName(targetName: string): string {
|
||||
const t = targetName || '';
|
||||
if (t.includes('冷链')) return '4.5T冷链';
|
||||
if (t.includes('普货') || (t.includes('4.5') && !t.includes('冷链'))) return '4.5T普货';
|
||||
if (t.includes('18T') || t.includes('18t')) return '18T';
|
||||
if (t.includes('49') || t.includes('牵引')) return '49T';
|
||||
if (t.includes('挂车')) return '挂车';
|
||||
return '其他';
|
||||
}
|
||||
|
||||
/**
|
||||
* Classify vehicle type from dic_type.dic_name (e.g. "4.5吨冷链车", "4.5吨货车", "18吨双飞翼货车").
|
||||
* The typeName is the full label from the dictionary, modelRaw is the numeric dic_code.
|
||||
*/
|
||||
function classifyVehicleType(typeName: string, _modelRaw: string): string {
|
||||
const t = (typeName || '').trim();
|
||||
if (t.includes('4.5') && t.includes('冷链')) return '4.5T冷链';
|
||||
if (t.includes('4.5')) return '4.5T普货';
|
||||
if (t.includes('18')) return '18T';
|
||||
if (t.includes('49') || t.includes('牵引')) return '49T';
|
||||
if (t.includes('挂车')) return '挂车';
|
||||
return t || '其他';
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Route
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
const app = new Hono();
|
||||
|
||||
app.get('/', async (c) => {
|
||||
try {
|
||||
const targetIdParam = c.req.query('targetId');
|
||||
const filterTargetId = targetIdParam ? Number(targetIdParam) : null;
|
||||
|
||||
// ---- Query 1: Assessment targets ----
|
||||
const [targets] = await pool.execute(
|
||||
'SELECT id, target_name, annual_mileage_per_vehicle FROM tab_mileage_assessment_target WHERE is_deleted = 0 ORDER BY id',
|
||||
) as [any[], unknown];
|
||||
|
||||
const targetMap = new Map<number, { targetName: string; annualMileage: number }>();
|
||||
for (const t of targets) {
|
||||
targetMap.set(t.id, {
|
||||
targetName: t.target_name,
|
||||
annualMileage: Number(t.annual_mileage_per_vehicle) || 0,
|
||||
});
|
||||
}
|
||||
|
||||
// ---- Query 2: Assessment vehicles ----
|
||||
const [assessmentRows] = await pool.execute(`
|
||||
SELECT target_id, plate_number, today_mileage, vehicle_total_mileage,
|
||||
current_mileage, current_year_mileage, current_year_mileage_task,
|
||||
completion_rate, is_qualified, current_year_is_qualified,
|
||||
daily_required_mileage, current_year_assessment_end_date
|
||||
FROM tab_mileage_assessment_vehicle WHERE is_deleted = 0
|
||||
`) as [any[], unknown];
|
||||
|
||||
// ---- Query 3: Vehicle info (customer, dept, manager) ----
|
||||
const vehicleInfoMap = await fetchVehicleInfoMap();
|
||||
|
||||
// ---- Query 4: Vehicle types from tab_truck ----
|
||||
// Include soft-deleted trucks: many assessment vehicles have is_deleted=1 in tab_truck
|
||||
// but are still active in the assessment. We need their type info.
|
||||
const [truckTypeRows] = await pool.execute(`
|
||||
SELECT truck.plate_number, dic_type.dic_name AS type_name, truck.model AS model_raw
|
||||
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
|
||||
WHERE truck.is_operation = 1
|
||||
`) as [any[], unknown];
|
||||
|
||||
const truckTypeMap = new Map<string, { typeName: string; modelRaw: string }>();
|
||||
for (const row of truckTypeRows) {
|
||||
truckTypeMap.set(row.plate_number, {
|
||||
typeName: row.type_name || '',
|
||||
modelRaw: row.model_raw || '',
|
||||
});
|
||||
}
|
||||
|
||||
// ---- Query 5: Real-time location ----
|
||||
const [locationRows] = await pool.execute(`
|
||||
SELECT plate_number, province, city
|
||||
FROM tab_truck_remote_sync_realtime_info
|
||||
WHERE is_deleted = 0 AND plate_number IS NOT NULL
|
||||
`) as [any[], unknown];
|
||||
|
||||
const locationMap = new Map<string, { province: string; city: string }>();
|
||||
for (const row of locationRows) {
|
||||
locationMap.set(row.plate_number, {
|
||||
province: row.province || '',
|
||||
city: row.city || '',
|
||||
});
|
||||
}
|
||||
|
||||
// ---- Collect all plates for Query 6 ----
|
||||
const allPlates = assessmentRows.map((r: any) => r.plate_number as string);
|
||||
|
||||
// ---- Query 6: Customer daily avg (from mileage DB) — 30d baseline + 7d recent ----
|
||||
const customerAvgDailyMap = new Map<string, number>();
|
||||
const customerAvgDaily7dMap = new Map<string, number>();
|
||||
if (allPlates.length > 0) {
|
||||
const placeholders = allPlates.map(() => '?').join(',');
|
||||
// Single query returning both windows per plate.
|
||||
const [dailyRows] = await mileagePool.execute(
|
||||
`SELECT plate,
|
||||
AVG(CASE WHEN stat_date >= DATE_SUB(CURDATE(), INTERVAL 30 DAY) THEN daily_km END) AS avg_30d,
|
||||
AVG(CASE WHEN stat_date >= DATE_SUB(CURDATE(), INTERVAL 7 DAY) THEN daily_km END) AS avg_7d
|
||||
FROM v_vehicle_daily_stats
|
||||
WHERE stat_date >= DATE_SUB(CURDATE(), INTERVAL 30 DAY)
|
||||
AND stat_date < CURDATE()
|
||||
AND plate IN (${placeholders})
|
||||
GROUP BY plate`,
|
||||
allPlates,
|
||||
) as [any[], unknown];
|
||||
|
||||
const plateAvg30Map = new Map<string, number>();
|
||||
const plateAvg7Map = new Map<string, number>();
|
||||
for (const row of dailyRows) {
|
||||
if (row.avg_30d !== null) plateAvg30Map.set(row.plate, Number(row.avg_30d));
|
||||
if (row.avg_7d !== null) plateAvg7Map.set(row.plate, Number(row.avg_7d));
|
||||
}
|
||||
|
||||
const customerPlates30 = new Map<string, number[]>();
|
||||
const customerPlates7 = new Map<string, number[]>();
|
||||
for (const plate of allPlates) {
|
||||
const info = vehicleInfoMap.get(plate);
|
||||
const customer = info?.customer || '未知客户';
|
||||
if (!customerPlates30.has(customer)) customerPlates30.set(customer, []);
|
||||
if (!customerPlates7.has(customer)) customerPlates7.set(customer, []);
|
||||
const v30 = plateAvg30Map.get(plate);
|
||||
const v7 = plateAvg7Map.get(plate);
|
||||
if (v30 !== undefined) customerPlates30.get(customer)!.push(v30);
|
||||
if (v7 !== undefined) customerPlates7.get(customer)!.push(v7);
|
||||
}
|
||||
for (const [customer, avgs] of customerPlates30) {
|
||||
if (avgs.length > 0) customerAvgDailyMap.set(customer, avgs.reduce((s, v) => s + v, 0) / avgs.length);
|
||||
}
|
||||
for (const [customer, avgs] of customerPlates7) {
|
||||
if (avgs.length > 0) customerAvgDaily7dMap.set(customer, avgs.reduce((s, v) => s + v, 0) / avgs.length);
|
||||
}
|
||||
}
|
||||
|
||||
// ---- Query 7: Inventory vehicles (rent_status = 0) ----
|
||||
const [inventoryTruckRows] = await pool.execute(`
|
||||
SELECT truck.plate_number, dic_type.dic_name AS type_name, truck.model AS model_raw
|
||||
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
|
||||
WHERE truck.is_deleted = 0 AND truck.is_operation = 1
|
||||
AND truck.truck_rent_status = 0
|
||||
`) as [any[], unknown];
|
||||
|
||||
// ---- Build assessment vehicle lookup for inventory cross-reference ----
|
||||
const assessmentByPlate = new Map<string, any>();
|
||||
for (const row of assessmentRows) {
|
||||
assessmentByPlate.set(row.plate_number, row);
|
||||
}
|
||||
|
||||
// ---- Enrich assessment vehicles ----
|
||||
const now = new Date();
|
||||
const yearEnd = new Date(now.getFullYear(), 11, 31); // Dec 31
|
||||
|
||||
const enrichedVehicles: EnrichedVehicle[] = [];
|
||||
for (const row of assessmentRows) {
|
||||
const targetId = row.target_id as number;
|
||||
if (filterTargetId !== null && targetId !== filterTargetId) continue;
|
||||
|
||||
const target = targetMap.get(targetId);
|
||||
if (!target) continue;
|
||||
|
||||
const plate = row.plate_number as string;
|
||||
const info = vehicleInfoMap.get(plate);
|
||||
|
||||
// Only include vehicles that are actively rented/operated (租赁 or 自营)
|
||||
const rentStatus = info?.rent_status || '';
|
||||
if (rentStatus !== '租赁' && rentStatus !== '自营') continue;
|
||||
|
||||
const loc = locationMap.get(plate);
|
||||
const truckType = truckTypeMap.get(plate);
|
||||
|
||||
const province = loc?.province || '';
|
||||
const city = loc?.city || '';
|
||||
const region = mapRegion(province, city);
|
||||
|
||||
// Determine vehicle type: prefer truck table, fallback to target name
|
||||
let vehicleType = '其他';
|
||||
if (truckType) {
|
||||
vehicleType = classifyVehicleType(truckType.typeName, truckType.modelRaw);
|
||||
} else {
|
||||
// Fallback: infer from target name (e.g. "交投190辆4.5T冷链车" → "4.5T冷链")
|
||||
vehicleType = inferTypeFromTargetName(target.targetName);
|
||||
}
|
||||
|
||||
const endDate = row.current_year_assessment_end_date
|
||||
? new Date(row.current_year_assessment_end_date)
|
||||
: yearEnd;
|
||||
const daysLeft = Math.max(1, Math.ceil((endDate.getTime() - now.getTime()) / 86400000));
|
||||
|
||||
const customer = info?.customer || null;
|
||||
const customerAvgDaily = customerAvgDailyMap.get(customer || '未知客户') || 0;
|
||||
const customerAvgDaily7d = customerAvgDaily7dMap.get(customer || '未知客户') || 0;
|
||||
const currentYearMileage = Number(row.current_year_mileage) || 0;
|
||||
const yearTarget = Number(row.current_year_mileage_task) || 0;
|
||||
const predictedYearEnd = currentYearMileage + customerAvgDaily * daysLeft;
|
||||
|
||||
const currentYearIsQualified = row.current_year_is_qualified === 1;
|
||||
const classification = classifyVehicle(currentYearIsQualified, currentYearMileage, yearTarget, predictedYearEnd);
|
||||
|
||||
enrichedVehicles.push({
|
||||
plateNumber: plate,
|
||||
targetId,
|
||||
targetName: target.targetName,
|
||||
vehicleType,
|
||||
totalMileage: Number(row.vehicle_total_mileage) || 0,
|
||||
currentYearMileage,
|
||||
completionRate: Number(row.completion_rate) || 0,
|
||||
yearTarget,
|
||||
isQualified: row.is_qualified === 1,
|
||||
currentYearIsQualified,
|
||||
dailyRequiredMileage: Number(row.daily_required_mileage) || 0,
|
||||
region,
|
||||
province,
|
||||
customer,
|
||||
department: info?.department || null,
|
||||
manager: info?.manager || null,
|
||||
customerAvgDaily,
|
||||
customerAvgDaily7d,
|
||||
predictedYearEnd,
|
||||
daysLeft,
|
||||
classification,
|
||||
});
|
||||
}
|
||||
|
||||
// ---- Build inventory vehicles ----
|
||||
const inventoryVehicles: InventoryVehicle[] = [];
|
||||
for (const row of inventoryTruckRows) {
|
||||
const plate = row.plate_number as string;
|
||||
const loc = locationMap.get(plate);
|
||||
const province = loc?.province || '';
|
||||
const city = loc?.city || '';
|
||||
const region = mapRegion(province, city);
|
||||
const vehicleType = classifyVehicleType(row.type_name || '', row.model_raw || '');
|
||||
|
||||
// Cross-reference with assessment data
|
||||
const assessment = assessmentByPlate.get(plate);
|
||||
// Compute this vehicle's own daysLeft from its assessment end date
|
||||
let invDaysLeft = 0;
|
||||
if (assessment?.current_year_assessment_end_date) {
|
||||
const endDate = new Date(assessment.current_year_assessment_end_date);
|
||||
invDaysLeft = Math.max(1, Math.ceil((endDate.getTime() - now.getTime()) / 86400000));
|
||||
} else {
|
||||
invDaysLeft = Math.max(1, Math.ceil((yearEnd.getTime() - now.getTime()) / 86400000));
|
||||
}
|
||||
inventoryVehicles.push({
|
||||
plateNumber: plate,
|
||||
vehicleType,
|
||||
region,
|
||||
province,
|
||||
totalMileage: assessment ? Number(assessment.vehicle_total_mileage) || 0 : 0,
|
||||
daysLeft: invDaysLeft,
|
||||
targetId: assessment ? (assessment.target_id as number) : null,
|
||||
targetName: assessment ? (targetMap.get(assessment.target_id)?.targetName ?? null) : null,
|
||||
yearTarget: assessment ? Number(assessment.current_year_mileage_task) || null : null,
|
||||
completionRate: assessment ? Number(assessment.completion_rate) || 0 : 0,
|
||||
});
|
||||
}
|
||||
|
||||
// ---- Run algorithm ----
|
||||
const { suggestions, summary } = generateSuggestions(enrichedVehicles, inventoryVehicles);
|
||||
|
||||
// ---- Attach notification status to candidates ----
|
||||
const notificationMap = await fetchActiveNotificationMap();
|
||||
for (const s of suggestions) {
|
||||
for (const c of s.candidates) {
|
||||
const key = `${s.id}::${c.plateNumber}`;
|
||||
const notif = notificationMap.get(key);
|
||||
if (notif) {
|
||||
c.notificationId = notif.id;
|
||||
c.notificationStatus = notif.status;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// ---- Permission filtering & customer name masking ----
|
||||
const user = (c as any).get('user') as AuthUser | undefined;
|
||||
|
||||
// Attach department/manager info so filterByPermission can work
|
||||
const suggestionsWithPermFields = suggestions.map((s) => {
|
||||
const info = vehicleInfoMap.get(s.currentVehicle.plateNumber);
|
||||
return {
|
||||
...s,
|
||||
department: info?.department || null,
|
||||
departmentName: info?.department || null,
|
||||
managerId: info?.manager_id || null,
|
||||
};
|
||||
});
|
||||
|
||||
const filtered = user
|
||||
? filterByPermission(suggestionsWithPermFields, user)
|
||||
: suggestionsWithPermFields;
|
||||
|
||||
// Mask customer names in suggestions
|
||||
const masked = maskCustomerNames(
|
||||
filtered.map((s) => {
|
||||
// Strip permission-filtering fields from response
|
||||
const { department, departmentName, managerId, ...rest } = s;
|
||||
return rest;
|
||||
}),
|
||||
);
|
||||
|
||||
// ---- Build target options list for filter UI ----
|
||||
const targetVehicleCounts = new Map<number, number>();
|
||||
for (const v of enrichedVehicles) {
|
||||
targetVehicleCounts.set(v.targetId, (targetVehicleCounts.get(v.targetId) || 0) + 1);
|
||||
}
|
||||
|
||||
const targetOptions = targets.map((t: any) => ({
|
||||
id: t.id as number,
|
||||
name: t.target_name as string,
|
||||
vehicleCount: targetVehicleCounts.get(t.id) || 0,
|
||||
}));
|
||||
|
||||
// Recalculate summary based on permission-filtered results
|
||||
const filteredQualified = masked.filter((s: any) => s.type === 'replace_qualified').length;
|
||||
const filteredHopeless = masked.filter((s: any) => s.type === 'rescue_hopeless').length;
|
||||
const recentInterventionCount = await fetchRecentInterventionCount();
|
||||
const filteredSummary: SchedulingSummary = {
|
||||
qualifiedCount: filteredQualified,
|
||||
hopelessCount: filteredHopeless,
|
||||
suggestionCount: masked.length,
|
||||
estimatedGain: masked.filter((s: any) =>
|
||||
s.candidates?.some((c: any) => c.canQualifyAfterSwap)
|
||||
).length,
|
||||
recentInterventionCount,
|
||||
};
|
||||
|
||||
const response: SchedulingResponse = {
|
||||
summary: filteredSummary,
|
||||
suggestions: masked,
|
||||
targets: targetOptions,
|
||||
};
|
||||
|
||||
return c.json(response);
|
||||
} catch (e: unknown) {
|
||||
console.error('scheduling suggestions error:', e);
|
||||
return c.json(
|
||||
{
|
||||
summary: { qualifiedCount: 0, hopelessCount: 0, suggestionCount: 0, estimatedGain: 0, recentInterventionCount: 0 },
|
||||
suggestions: [],
|
||||
targets: [],
|
||||
} satisfies SchedulingResponse,
|
||||
500,
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
export default app;
|
||||
59
src/server/routes/scheduling/types.ts
Normal file
59
src/server/routes/scheduling/types.ts
Normal file
@@ -0,0 +1,59 @@
|
||||
export type {
|
||||
SchedulingVehicleInfo,
|
||||
CandidateVehicle,
|
||||
SchedulingSuggestion,
|
||||
SchedulingSummary,
|
||||
SchedulingTargetOption,
|
||||
SchedulingResponse,
|
||||
NotifyRequest,
|
||||
NotifyBatchRequest,
|
||||
NotifyBatchResult,
|
||||
NotificationStatus,
|
||||
NotificationRecord,
|
||||
UpdateNotificationRequest,
|
||||
ReasonLine,
|
||||
ReasonBlock,
|
||||
} from '../../../shared/scheduling/types.js';
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Server-only types
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
export type VehicleClassification = 'qualified' | 'hopeless' | 'normal';
|
||||
|
||||
export interface EnrichedVehicle {
|
||||
plateNumber: string;
|
||||
targetId: number;
|
||||
targetName: string;
|
||||
vehicleType: string;
|
||||
totalMileage: number;
|
||||
currentYearMileage: number;
|
||||
completionRate: number;
|
||||
yearTarget: number;
|
||||
isQualified: boolean;
|
||||
currentYearIsQualified: boolean;
|
||||
dailyRequiredMileage: number;
|
||||
region: string;
|
||||
province: string;
|
||||
customer: string | null;
|
||||
department: string | null;
|
||||
manager: string | null;
|
||||
customerAvgDaily: number;
|
||||
customerAvgDaily7d: number;
|
||||
predictedYearEnd: number;
|
||||
daysLeft: number;
|
||||
classification: VehicleClassification;
|
||||
}
|
||||
|
||||
export interface InventoryVehicle {
|
||||
plateNumber: string;
|
||||
vehicleType: string;
|
||||
region: string;
|
||||
province: string;
|
||||
totalMileage: number;
|
||||
daysLeft: number;
|
||||
targetId: number | null;
|
||||
targetName: string | null;
|
||||
yearTarget: number | null;
|
||||
completionRate: number;
|
||||
}
|
||||
@@ -91,7 +91,7 @@ WHERE truck.is_deleted = 0
|
||||
const REGIONS = ['嘉兴', '广东', '北京', '新疆', '其他'] as const;
|
||||
const INVENTORY_REGIONS = ['江浙沪', '广东', '新疆', '其它'] as const;
|
||||
|
||||
function mapRegion(province: string | null, city: string | null): string {
|
||||
export function mapRegion(province: string | null, city: string | null): string {
|
||||
if (!province && !city) return '其他';
|
||||
const loc = (city || province || '').trim();
|
||||
if (loc.includes('嘉兴') || loc.includes('浙江') || loc.includes('上海') || loc.includes('江苏')) return '嘉兴';
|
||||
@@ -313,11 +313,21 @@ async function getVehicles(): Promise<Vehicle[]> {
|
||||
async function getVehiclesForUser(c: Context): Promise<Vehicle[]> {
|
||||
const all = await getVehicles();
|
||||
const user = ((c as any).get?.('user') || (c as any).var?.user) as AuthUser | undefined;
|
||||
if (user) {
|
||||
const filtered = filterByPermission(all, user);
|
||||
return maskCustomerNames(filtered);
|
||||
}
|
||||
return maskCustomerNames(all);
|
||||
let list = user ? filterByPermission(all, user) : all;
|
||||
list = applySubjectFilter(c, list);
|
||||
return maskCustomerNames(list);
|
||||
}
|
||||
|
||||
// 归属公司筛选(所属公司 = tab_truck.org_id → org_name, 即 Vehicle.subjectOrg)
|
||||
function getSubjectParam(c: Context): string | null {
|
||||
const raw = (c.req.query('subject') || '').trim();
|
||||
return raw ? raw : null;
|
||||
}
|
||||
|
||||
function applySubjectFilter(c: Context, vehicles: Vehicle[]): Vehicle[] {
|
||||
const subject = getSubjectParam(c);
|
||||
if (!subject) return vehicles;
|
||||
return vehicles.filter((v) => (v.subjectOrg || '') === subject);
|
||||
}
|
||||
|
||||
function getRegionCounts(vehicles: Vehicle[], regions: readonly string[]): Record<string, number> {
|
||||
@@ -611,7 +621,7 @@ app.get('/by-batch', async (c) => {
|
||||
|
||||
// GET /api/vehicles/inventory-analysis — 库存分析,不设数据权限,对所有人开放
|
||||
app.get('/inventory-analysis', async (c) => {
|
||||
const vehicles = await getVehicles();
|
||||
const vehicles = applySubjectFilter(c, await getVehicles());
|
||||
|
||||
const typeFilters = [
|
||||
{ name: '4.5T普货', filter: (v: Vehicle) => v.type === '4.5T' && !v.model.includes('冷链') },
|
||||
@@ -680,16 +690,43 @@ app.get('/dept-stats', async (c) => {
|
||||
if (plate) todayMileageMap.set(plate, Number(row.day_mileage) || 0);
|
||||
}
|
||||
|
||||
// 不在部门列表展示的用户(非业务员或管理账号)
|
||||
const EXCLUDED_MANAGERS = new Set(['超级用户', '刘思宇', '潘舒', '黄卓华', '许铮杰']);
|
||||
|
||||
const deptMap = new Map<string, Map<string, Vehicle[]>>();
|
||||
for (const v of withManager) {
|
||||
const dept = v.departmentName || '公务车';
|
||||
const mgr = v.customerManager || '未分配';
|
||||
if (EXCLUDED_MANAGERS.has(mgr)) continue;
|
||||
if (!deptMap.has(dept)) deptMap.set(dept, new Map());
|
||||
const mgrMap = deptMap.get(dept)!;
|
||||
if (!mgrMap.has(mgr)) mgrMap.set(mgr, []);
|
||||
mgrMap.get(mgr)!.push(v);
|
||||
}
|
||||
|
||||
// 补齐:业务部门内所有在职用户,即使当前无车辆也需显示
|
||||
const deptNames = Array.from(deptMap.keys()).filter((d) => d !== '公务车');
|
||||
if (deptNames.length > 0) {
|
||||
const placeholders = deptNames.map(() => '?').join(',');
|
||||
const [userRows] = await pool.query<any[]>(
|
||||
`SELECT u.user_name, dep.dep_name
|
||||
FROM tab_user u
|
||||
LEFT JOIN tab_department dep ON dep.id = u.dep_id AND dep.is_deleted = 0
|
||||
WHERE u.is_deleted = 0
|
||||
AND dep.dep_name IN (${placeholders})`,
|
||||
deptNames,
|
||||
);
|
||||
for (const r of userRows as any[]) {
|
||||
const dept = r.dep_name as string | null;
|
||||
const mgr = r.user_name as string | null;
|
||||
if (!dept || !mgr) continue;
|
||||
if (EXCLUDED_MANAGERS.has(mgr)) continue;
|
||||
const mgrMap = deptMap.get(dept);
|
||||
if (!mgrMap) continue;
|
||||
if (!mgrMap.has(mgr)) mgrMap.set(mgr, []);
|
||||
}
|
||||
}
|
||||
|
||||
// Compute attendance & avg mileage from realtime data
|
||||
const getMileageStats = (vList: Vehicle[]) => {
|
||||
const todayActive = vList.filter((v) => (todayMileageMap.get(v.plateNumber) || 0) > 0).length;
|
||||
@@ -951,7 +988,7 @@ app.get('/list', async (c) => {
|
||||
|
||||
// GET /api/vehicles/inventory-stats — 库存统计,不设数据权限,对所有人开放
|
||||
app.get('/inventory-stats', async (c) => {
|
||||
const vehicles = await getVehicles();
|
||||
const vehicles = applySubjectFilter(c, await getVehicles());
|
||||
const inventory = vehicles.filter((v) => v.status === 'Inventory' || v.status === 'Abnormal');
|
||||
|
||||
const TYPE_NAME_MAP: Record<string, string> = {
|
||||
@@ -1010,6 +1047,30 @@ app.get('/weekly-detail', async (c) => {
|
||||
return c.json(masked);
|
||||
});
|
||||
|
||||
// GET /api/vehicles/subjects — 归属公司列表(含台数预览),用于顶部筛选下拉
|
||||
app.get('/subjects', async (c) => {
|
||||
const all = await getVehicles();
|
||||
const user = ((c as any).get?.('user') || (c as any).var?.user) as AuthUser | undefined;
|
||||
const visible = user ? filterByPermission(all, user) : all;
|
||||
|
||||
const map = new Map<string, { total: number; inventory: number; operating: number }>();
|
||||
for (const v of visible) {
|
||||
const name = (v.subjectOrg || '').trim();
|
||||
if (!name) continue;
|
||||
if (!map.has(name)) map.set(name, { total: 0, inventory: 0, operating: 0 });
|
||||
const s = map.get(name)!;
|
||||
s.total += 1;
|
||||
if (v.status === 'Inventory' || v.status === 'Abnormal') s.inventory += 1;
|
||||
if (v.status === 'Operating') s.operating += 1;
|
||||
}
|
||||
|
||||
const result = Array.from(map.entries())
|
||||
.map(([name, stats]) => ({ name, ...stats }))
|
||||
.sort((a, b) => b.total - a.total);
|
||||
|
||||
return c.json(result);
|
||||
});
|
||||
|
||||
// GET /api/vehicles/refresh — force cache refresh
|
||||
app.get('/refresh', async (c) => {
|
||||
lastFetchTime = 0;
|
||||
|
||||
17
src/shared/auth/roles.ts
Normal file
17
src/shared/auth/roles.ts
Normal file
@@ -0,0 +1,17 @@
|
||||
// Role constants and role-based access helpers shared between server (JWT
|
||||
// issuance / API guards) and client (nav visibility / module gating).
|
||||
|
||||
/** 全量权限角色名 */
|
||||
export const FULL_ACCESS_ROLES = ['所有权限', '数智中心', 'BI-Leader'];
|
||||
|
||||
/** 部门级权限角色名 */
|
||||
export const DEPT_ACCESS_ROLES = ['BI-Leader-Dep'];
|
||||
|
||||
/** 智能调度模块访问角色 */
|
||||
export const SCHEDULING_ACCESS_ROLES = ['BI-SCHEDULE-OPT'];
|
||||
|
||||
/** 用户是否可访问智能调度模块。仅 BI-SCHEDULE-OPT 角色允许访问。 */
|
||||
export function canAccessScheduling(roles: readonly string[] | null | undefined): boolean {
|
||||
if (!roles || roles.length === 0) return false;
|
||||
return roles.some(r => SCHEDULING_ACCESS_ROLES.includes(r));
|
||||
}
|
||||
123
src/shared/scheduling/types.ts
Normal file
123
src/shared/scheduling/types.ts
Normal file
@@ -0,0 +1,123 @@
|
||||
// Shared scheduling types — used by both client (modules/scheduling) and server
|
||||
// (server/routes/scheduling). Keep server-only types (EnrichedVehicle etc.) in
|
||||
// server/routes/scheduling/types.ts.
|
||||
|
||||
export interface SchedulingVehicleInfo {
|
||||
plateNumber: string;
|
||||
targetId: number;
|
||||
targetName: string;
|
||||
vehicleType: string;
|
||||
totalMileage: number;
|
||||
currentYearMileage: number;
|
||||
completionRate: number;
|
||||
yearTarget: number;
|
||||
region: string;
|
||||
province: string;
|
||||
customer: string | null;
|
||||
department: string | null;
|
||||
manager: string | null;
|
||||
customerAvgDaily: number;
|
||||
customerAvgDaily7d: number;
|
||||
predictedYearEnd: number;
|
||||
daysLeft: number;
|
||||
}
|
||||
|
||||
export type NotificationStatus = 'sent' | 'executed' | 'cancelled';
|
||||
|
||||
export interface CandidateVehicle {
|
||||
plateNumber: string;
|
||||
targetId: number | null;
|
||||
targetName: string | null;
|
||||
vehicleType: string;
|
||||
totalMileage: number;
|
||||
completionRate: number;
|
||||
yearTarget: number | null;
|
||||
daysLeft: number;
|
||||
region: string;
|
||||
province: string;
|
||||
mileageGap: number;
|
||||
predictedAfterSwap: number;
|
||||
canQualifyAfterSwap: boolean;
|
||||
isSameRegion: boolean;
|
||||
notificationId: number | null;
|
||||
notificationStatus: NotificationStatus | null;
|
||||
}
|
||||
|
||||
export interface NotificationRecord {
|
||||
id: number;
|
||||
suggestionId: string;
|
||||
currentPlate: string;
|
||||
candidatePlate: string;
|
||||
operatorId: string | null;
|
||||
operatorName: string | null;
|
||||
status: NotificationStatus;
|
||||
createdAt: string;
|
||||
updatedAt: string;
|
||||
executedAt: string | null;
|
||||
notes: string | null;
|
||||
beforeMileage: number | null;
|
||||
afterMileage: number | null;
|
||||
}
|
||||
|
||||
export interface NotifyBatchRequest {
|
||||
items: NotifyRequest[];
|
||||
}
|
||||
|
||||
export interface NotifyBatchResult {
|
||||
success: number;
|
||||
skipped: number;
|
||||
failed: number;
|
||||
records: NotificationRecord[];
|
||||
}
|
||||
|
||||
export interface UpdateNotificationRequest {
|
||||
status: NotificationStatus;
|
||||
notes?: string;
|
||||
afterMileage?: number;
|
||||
}
|
||||
|
||||
export interface ReasonLine {
|
||||
label: string;
|
||||
value: string;
|
||||
}
|
||||
|
||||
export interface ReasonBlock {
|
||||
lines: ReasonLine[];
|
||||
conclusion: string;
|
||||
}
|
||||
|
||||
export interface SchedulingSuggestion {
|
||||
id: string;
|
||||
priority: 'high' | 'medium';
|
||||
type: 'replace_qualified' | 'rescue_hopeless';
|
||||
currentVehicle: SchedulingVehicleInfo;
|
||||
candidates: CandidateVehicle[];
|
||||
reason: ReasonBlock;
|
||||
}
|
||||
|
||||
export interface SchedulingSummary {
|
||||
qualifiedCount: number;
|
||||
hopelessCount: number;
|
||||
suggestionCount: number;
|
||||
estimatedGain: number;
|
||||
/** Count of interventions created within the last 7 days (excluding cancelled). */
|
||||
recentInterventionCount: number;
|
||||
}
|
||||
|
||||
export interface SchedulingTargetOption {
|
||||
id: number;
|
||||
name: string;
|
||||
vehicleCount: number;
|
||||
}
|
||||
|
||||
export interface SchedulingResponse {
|
||||
summary: SchedulingSummary;
|
||||
suggestions: SchedulingSuggestion[];
|
||||
targets: SchedulingTargetOption[];
|
||||
}
|
||||
|
||||
export interface NotifyRequest {
|
||||
suggestionId: string;
|
||||
currentPlate: string;
|
||||
candidatePlate: string;
|
||||
}
|
||||
Reference in New Issue
Block a user