feat: 完成客户拜访模块全功能开发
本次提交实现了完整的客户拜访业务系统： 1. 新增对象存储上传服务，支持S3兼容协议的RustFS存储 2. 完善客户拜访实体与数据库表结构，补充全业务字段 3. 开发拜访台账与记录的前后端接口，包含增删改查、批量创建、状态流转等能力 4. 新增拜访表单页面与路由，支持父级菜单补全面包屑 5. 新增勘察列表页预填客户ID跳转逻辑 6. 补充UI设计文档与页面截图 7. 调整日志中间件跳过上传路由，优化RBAC权限配置
This commit is contained in:
andyesfly committed
1 parent
68af363ca9
commit
1c83e09fa1
33 files changed
+6920
-587
No files matched your search
@@ -0,0 +1,200 @@
|
||||
---
|
||||
name: Industrial Precision
|
||||
colors:
|
||||
surface: '#ffffff'
|
||||
surface-dim: '#ccdbf1'
|
||||
surface-bright: '#f8f9ff'
|
||||
surface-container-lowest: '#ffffff'
|
||||
surface-container-low: '#eef4ff'
|
||||
surface-container: '#e5efff'
|
||||
surface-container-high: '#dbe9ff'
|
||||
surface-container-highest: '#d5e4fa'
|
||||
on-surface: '#0d1c2c'
|
||||
on-surface-variant: '#424655'
|
||||
inverse-surface: '#233142'
|
||||
inverse-on-surface: '#e9f1ff'
|
||||
outline: '#727787'
|
||||
outline-variant: '#c2c6d8'
|
||||
surface-tint: '#0056d2'
|
||||
primary: '#0054cd'
|
||||
on-primary: '#ffffff'
|
||||
primary-container: '#136bfb'
|
||||
on-primary-container: '#fefcff'
|
||||
inverse-primary: '#b2c5ff'
|
||||
secondary: '#712ae2'
|
||||
on-secondary: '#ffffff'
|
||||
secondary-container: '#8a4cfc'
|
||||
on-secondary-container: '#fffbff'
|
||||
tertiary: '#00685f'
|
||||
on-tertiary: '#ffffff'
|
||||
tertiary-container: '#008378'
|
||||
on-tertiary-container: '#f4fffc'
|
||||
error: '#ba1a1a'
|
||||
on-error: '#ffffff'
|
||||
error-container: '#ffdad6'
|
||||
on-error-container: '#93000a'
|
||||
primary-fixed: '#dae2ff'
|
||||
primary-fixed-dim: '#b2c5ff'
|
||||
on-primary-fixed: '#001847'
|
||||
on-primary-fixed-variant: '#0040a1'
|
||||
secondary-fixed: '#eaddff'
|
||||
secondary-fixed-dim: '#d2bbff'
|
||||
on-secondary-fixed: '#25005a'
|
||||
on-secondary-fixed-variant: '#5a00c6'
|
||||
tertiary-fixed: '#89f5e7'
|
||||
tertiary-fixed-dim: '#6bd8cb'
|
||||
on-tertiary-fixed: '#00201d'
|
||||
on-tertiary-fixed-variant: '#005049'
|
||||
background: '#f8f9ff'
|
||||
on-background: '#0d1c2c'
|
||||
surface-variant: '#d5e4fa'
|
||||
bg-page: '#eef3f8'
|
||||
text-muted: '#5b6b7e'
|
||||
border-rule: '#dbe4ee'
|
||||
status-warn: '#e0852b'
|
||||
status-error: '#dc2626'
|
||||
accent-subtle: rgba(29,111,255,0.08)
|
||||
typography:
|
||||
display-lg:
|
||||
fontFamily: hankenGrotesk
|
||||
fontSize: 32px
|
||||
fontWeight: '700'
|
||||
lineHeight: 40px
|
||||
headline-md:
|
||||
fontFamily: hankenGrotesk
|
||||
fontSize: 23px
|
||||
fontWeight: '700'
|
||||
lineHeight: 28px
|
||||
title-sm:
|
||||
fontFamily: hankenGrotesk
|
||||
fontSize: 17px
|
||||
fontWeight: '700'
|
||||
lineHeight: 24px
|
||||
body-md:
|
||||
fontFamily: hankenGrotesk
|
||||
fontSize: 15px
|
||||
fontWeight: '400'
|
||||
lineHeight: 24px
|
||||
label-bold:
|
||||
fontFamily: hankenGrotesk
|
||||
fontSize: 13px
|
||||
fontWeight: '700'
|
||||
lineHeight: 16px
|
||||
data-mono:
|
||||
fontFamily: jetbrainsMono
|
||||
fontSize: 12px
|
||||
fontWeight: '500'
|
||||
lineHeight: 16px
|
||||
caption-sm:
|
||||
fontFamily: hankenGrotesk
|
||||
fontSize: 12px
|
||||
fontWeight: '700'
|
||||
lineHeight: 14px
|
||||
headline-md-mobile:
|
||||
fontFamily: hankenGrotesk
|
||||
fontSize: 20px
|
||||
fontWeight: '700'
|
||||
lineHeight: 26px
|
||||
rounded:
|
||||
sm: 0.25rem
|
||||
DEFAULT: 0.5rem
|
||||
md: 0.75rem
|
||||
lg: 1rem
|
||||
xl: 1.5rem
|
||||
full: 9999px
|
||||
spacing:
|
||||
base: 4px
|
||||
xs: 8px
|
||||
sm: 12px
|
||||
md: 16px
|
||||
lg: 24px
|
||||
xl: 40px
|
||||
container-max: 1200px
|
||||
gutter: 16px
|
||||
---
|
||||
|
||||
## Brand & Style
|
||||
|
||||
The design system is engineered for the **Xintong Smart Power Operation Management APP**, targeting power engineers and grid operators. The brand personality is **Professional, Efficient, and Industrial Tech**. It emphasizes reliability through a structured, high-density interface that transforms complex electrical data into actionable insights.
|
||||
|
||||
The design style is a blend of **Corporate Modern** and **Information-Dense Minimalism**. It utilizes a "Layered Surface" approach where data is organized into logical card blocks, using subtle elevations and clear semantic color-coding to denote system status. The aesthetic is clean and functional, avoiding decorative elements in favor of technical precision and rapid scanability.
|
||||
|
||||
- **Professionalism:** High-contrast typography and a restrained color palette.
|
||||
- **Efficiency:** Condensed layouts that prioritize data visualization and task status.
|
||||
- **Reliability:** Solid borders, consistent spacing, and clear state indicators.
|
||||
|
||||
## Colors
|
||||
|
||||
The color architecture is strictly functional, mapping specifically to the operation layers of the power management system.
|
||||
|
||||
- **Primary (Deep Blue):** Reserved for core branding, navigation, and "Client" layer interactions.
|
||||
- **Secondary (Purple):** Dedicated to "Gateway" operations and task-specific management.
|
||||
- **Tertiary (Teal):** Used for "Service" layer success states and optimized performance indicators.
|
||||
- **Neutral (Ink):** Used for primary text to ensure maximum legibility against light surfaces.
|
||||
|
||||
**Semantic Usage:**
|
||||
- Use **status-warn (Amber)** for non-critical alerts or data synchronization states.
|
||||
- Use **status-error (Red)** for critical power failures or permission denials.
|
||||
- The **bg-page** provides a soft, low-strain canvas for long-duration monitoring, while **surface** (White) distinguishes interactive cards and data containers.
|
||||
|
||||
## Typography
|
||||
|
||||
This design system uses **Hanken Grotesk** as the primary typeface for its sharp, contemporary feel that bridges the gap between industrial and tech. **JetBrains Mono** is employed for technical data, device IDs, and numerical values to emphasize the system's engineering DNA.
|
||||
|
||||
- **Hierarchy:** Use `display-lg` for dashboard summaries. `title-sm` is the default for card headers.
|
||||
- **Data Visualization:** All tabular data and technical strings must use `data-mono` for character alignment and clarity.
|
||||
- **Mobile Adaptation:** For mobile screens, headlines should scale down to `headline-md-mobile` to maintain visual balance while preserving authority.
|
||||
|
||||
## Layout & Spacing
|
||||
|
||||
The layout utilizes a **Flexible Grid System** with a focus on logical grouping through card-based containment.
|
||||
|
||||
- **Grid:** A 12-column grid is used for desktop views, transitioning to a single-column stacked layout for mobile.
|
||||
- **Rhythm:** An 8px-based spacing scale ensures vertical consistency. Use `lg (24px)` for outer card padding and `md (16px)` for internal element spacing.
|
||||
- **Mobile Margins:** Standard mobile side margins are set to `md (16px)` to maximize screen real estate for dense data tables.
|
||||
- **Sectioning:** Distinct operational modules should be separated by `xl (40px)` of vertical space to prevent cognitive overload.
|
||||
|
||||
## Elevation & Depth
|
||||
|
||||
This design system conveys hierarchy through **Tonal Layering** and **Subtle Ambient Shadows**. We avoid heavy skeuomorphism in favor of a "Flat-Plus" approach.
|
||||
|
||||
- **Base Layer:** The page background (`bg-page`) sits at the lowest elevation.
|
||||
- **Mid Layer (Cards):** UI cards use a white surface with a subtle shadow (`0 4px 14px rgba(0,0,0,.07)`) to appear slightly lifted.
|
||||
- **Interactive Layer:** On hover or active state, cards may transition to a higher elevation (`0 8px 28px rgba(0,0,0,.1)`) with a slight upward translation of -2px.
|
||||
- **Overlays:** Modals and dropdowns use the highest z-index with a distinct backdrop blur to maintain focus on the task at hand.
|
||||
- **Gradients:** Use soft radial gradients in the background (Blue/Purple) to create environmental depth without interfering with content legibility.
|
||||
|
||||
## Shapes
|
||||
|
||||
The shape language is **Rounded**, balancing industrial rigidity with modern software approachability.
|
||||
|
||||
- **Cards & Sections:** Use the standard `rounded-lg (1rem)` for primary containers.
|
||||
- **Nodes & Blocks:** Architecture and data nodes use `rounded (0.5rem)` to fit more compactly within layouts.
|
||||
- **Interactive Elements:** Buttons and tags use a "Pill-shape" (`rounded-xl` or 999px) to distinguish them from structural containers.
|
||||
- **Borders:** Use `1px solid` with the `border-rule` color for most containers. Active states or primary focus areas may increase to `1.5px`.
|
||||
|
||||
## Components
|
||||
|
||||
**Buttons:**
|
||||
- **Primary:** Solid `primary_color` with white text. Pill-shaped.
|
||||
- **Secondary:** Transparent with `primary_color` border or subtle purple tint for operation tasks.
|
||||
- **Danger:** Solid `status-error` for irreversible actions.
|
||||
|
||||
**Cards:**
|
||||
- White background, `1px` border-rule, and `rounded-lg` corners.
|
||||
- Headers should have a `18px` internal padding and a bottom border to separate from the content body.
|
||||
|
||||
**Input Fields:**
|
||||
- Soft white background with `1px` border.
|
||||
- Focused states should use a `primary_color` border with a subtle outer glow.
|
||||
|
||||
**Chips & Tags:**
|
||||
- Used for status (e.g., "Active", "Offline").
|
||||
- Backgrounds should use `8% opacity` versions of the semantic colors (Blue, Green, Red) with bolded text in the 100% opacity color.
|
||||
|
||||
**Data Visualization:**
|
||||
- Charts should use the primary blue and secondary purple as the main data series colors.
|
||||
- Use `data-mono` for all axis labels and tooltips to ensure technical accuracy.
|
||||
|
||||
**Status Indicators:**
|
||||
- Small `7px` circular dots used within lists or architecture nodes to show real-time connectivity status.
|
||||
@@ -0,0 +1,744 @@
|
||||
<!DOCTYPE html>
|
||||
|
||||
<html lang="zh-CN"><head>
|
||||
<meta charset="utf-8"/>
|
||||
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
||||
<title>现场勘察派单台账 - 鑫潼智电 XT-POWER OS</title>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
||||
<link href="https://fonts.googleapis.com/css2?family=hankenGrotesk:wght@100..900&family=JetBrains+Mono:wght@400..700&display=swap" rel="stylesheet"/>
|
||||
<style>
|
||||
@layer base {
|
||||
html, body { margin: 0; padding: 0; }
|
||||
body { overscroll-behavior: none; }
|
||||
}
|
||||
::-webkit-scrollbar { width: 6px; height: 6px; }
|
||||
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 9999px; }
|
||||
::-webkit-scrollbar-track { background: transparent; }
|
||||
</style>
|
||||
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
||||
<script id="tailwind-config">
|
||||
tailwind.config = {
|
||||
darkMode: "class",
|
||||
theme: {
|
||||
extend: {
|
||||
colors: {
|
||||
"primary": "#0054cd",
|
||||
"primary-container": "#136bfb",
|
||||
"on-primary": "#ffffff",
|
||||
"surface": "#ffffff",
|
||||
"bg-page": "#f4f7fb",
|
||||
"on-surface": "#0d1c2c",
|
||||
"on-surface-variant": "#424655",
|
||||
"text-muted": "#5b6b7e",
|
||||
"border-rule": "#e2e8f0",
|
||||
"inverse-surface": "#1e293b",
|
||||
"surface-container-low": "#f8fafc",
|
||||
"surface-container": "#eef2f7",
|
||||
"surface-container-high": "#e2e8f0",
|
||||
"accent-subtle": "rgba(0,84,205,0.08)",
|
||||
"tertiary": "#00685f",
|
||||
"status-warn": "#d97706",
|
||||
"error": "#dc2626"
|
||||
},
|
||||
fontFamily: {
|
||||
"sans": ["hankenGrotesk", "sans-serif"],
|
||||
"mono": ["JetBrains Mono", "monospace"]
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
</head>
|
||||
<body class="bg-bg-page font-sans text-on-surface antialiased text-[13.5px]">
|
||||
<!-- Global Industrial Sidebar -->
|
||||
<aside class="fixed left-0 top-0 h-full w-64 bg-inverse-surface z-50 flex flex-col justify-between shadow-xl">
|
||||
<div class="flex flex-col h-full">
|
||||
<!-- Logo -->
|
||||
<div class="h-16 flex items-center px-5 gap-3 border-b border-white/10">
|
||||
<div class="w-8 h-8 rounded-lg bg-primary flex items-center justify-center text-white font-bold shadow-md shadow-blue-500/30">
|
||||
<span class="material-symbols-outlined text-[20px]">bolt</span>
|
||||
</div>
|
||||
<div class="flex flex-col">
|
||||
<span class="text-white font-bold text-[15px] tracking-wide">鑫潼智电</span>
|
||||
<span class="font-mono text-[11px] text-slate-400 tracking-wider">XT-POWER OS v3.8</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Navigation Links -->
|
||||
<nav class="flex-1 px-3 py-4 space-y-1 overflow-y-auto">
|
||||
<a class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-slate-300 hover:bg-white/10 hover:text-white transition-all text-[13.5px]" href="#">
|
||||
<span class="material-symbols-outlined text-[20px]">dashboard</span>
|
||||
<span>运营工作台</span>
|
||||
</a>
|
||||
<a class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-slate-300 hover:bg-white/10 hover:text-white transition-all text-[13.5px]" href="#">
|
||||
<span class="material-symbols-outlined text-[20px]">corporate_fare</span>
|
||||
<span>客户管理</span>
|
||||
</a>
|
||||
<!-- Menu Group: Project Management (Expanded & Active) -->
|
||||
<div class="pt-2">
|
||||
<div class="flex items-center justify-between px-3 py-2 text-white font-medium text-[13.5px]">
|
||||
<div class="flex items-center gap-3">
|
||||
<span class="material-symbols-outlined text-[20px] text-blue-400">schema</span>
|
||||
<span>项目管理</span>
|
||||
</div>
|
||||
<span class="material-symbols-outlined text-[16px] text-slate-400">expand_less</span>
|
||||
</div>
|
||||
<div class="pl-7 pr-2 space-y-1 mt-1 border-l border-white/10 ml-5">
|
||||
<a class="flex items-center py-2 px-3 rounded-lg text-slate-400 hover:bg-white/10 hover:text-white text-[13px] transition-all" href="#">全周期工程看板</a>
|
||||
<a class="flex items-center py-2 px-3 rounded-lg bg-primary text-white font-semibold text-[13px] shadow-sm shadow-blue-900/40" href="#">现场勘察派单</a>
|
||||
<a class="flex items-center py-2 px-3 rounded-lg text-slate-400 hover:bg-white/10 hover:text-white text-[13px] transition-all" href="#">项目合同管理</a>
|
||||
<a class="flex items-center py-2 px-3 rounded-lg text-slate-400 hover:bg-white/10 hover:text-white text-[13px] transition-all" href="#">工程安装派单</a>
|
||||
<a class="flex items-center py-2 px-3 rounded-lg text-slate-400 hover:bg-white/10 hover:text-white text-[13px] transition-all" href="#">工程竣工验收</a>
|
||||
</div>
|
||||
</div>
|
||||
<a class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-slate-300 hover:bg-white/10 hover:text-white transition-all text-[13.5px]" href="#">
|
||||
<span class="material-symbols-outlined text-[20px]">send_time_extension</span>
|
||||
<span>运营派单</span>
|
||||
</a>
|
||||
<a class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-slate-300 hover:bg-white/10 hover:text-white transition-all text-[13.5px]" href="#">
|
||||
<span class="material-symbols-outlined text-[20px]">sensors</span>
|
||||
<span>设备监控</span>
|
||||
</a>
|
||||
<a class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-slate-300 hover:bg-white/10 hover:text-white transition-all text-[13.5px]" href="#">
|
||||
<span class="material-symbols-outlined text-[20px]">query_stats</span>
|
||||
<span>统计报表</span>
|
||||
</a>
|
||||
<a class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-slate-300 hover:bg-white/10 hover:text-white transition-all text-[13.5px]" href="#">
|
||||
<span class="material-symbols-outlined text-[20px]">settings</span>
|
||||
<span>系统管理</span>
|
||||
</a>
|
||||
</nav>
|
||||
<!-- Bottom Status -->
|
||||
<div class="p-4 border-t border-white/10 bg-slate-900/50">
|
||||
<div class="flex items-center justify-between text-[12px] text-slate-400">
|
||||
<span>华东区 · 枢纽调度</span>
|
||||
<span class="flex items-center gap-1.5 text-emerald-400 font-mono text-[11px]">
|
||||
<span class="w-2 h-2 rounded-full bg-emerald-400 animate-pulse"></span> 系统稳定
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
<!-- Main Shell Viewport -->
|
||||
<div class="pl-64 flex flex-col min-h-screen">
|
||||
<!-- Top Navigation Bar -->
|
||||
<header class="fixed top-0 left-64 right-0 h-16 z-40 bg-surface/90 backdrop-blur-md border-b border-border-rule px-8 flex items-center justify-between shadow-sm">
|
||||
<div class="flex items-center gap-5">
|
||||
<div class="flex items-center gap-2 text-slate-500 text-[13px]">
|
||||
<span class="hover:text-slate-700 cursor-pointer">项目管理</span>
|
||||
<span class="text-slate-300">/</span>
|
||||
<span class="text-on-surface font-semibold">现场勘察派单台账</span>
|
||||
</div>
|
||||
<div class="relative w-80">
|
||||
<span class="material-symbols-outlined absolute left-3 top-1/2 -translate-y-1/2 text-slate-400 text-[18px]">search</span>
|
||||
<input class="w-full pl-9 pr-4 py-1.5 bg-slate-100/90 text-on-surface rounded-lg text-[13px] border border-transparent focus:border-primary focus:bg-white focus:outline-none transition-all" placeholder="检索工单编号、客户或项目..." type="text"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center gap-4">
|
||||
<div class="flex items-center gap-2 pr-3 border-r border-border-rule">
|
||||
<button class="relative w-8 h-8 flex items-center justify-center rounded-lg hover:bg-slate-100 text-slate-600 transition-colors" title="消息通知">
|
||||
<span class="material-symbols-outlined text-[20px]">notifications</span>
|
||||
<span class="absolute top-1.5 right-1.5 w-2 h-2 bg-red-500 rounded-full"></span>
|
||||
</button>
|
||||
<button class="w-8 h-8 flex items-center justify-center rounded-lg hover:bg-slate-100 text-slate-600 transition-colors" title="使用帮助">
|
||||
<span class="material-symbols-outlined text-[20px]">help</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="flex items-center gap-3 pl-1">
|
||||
<div class="text-right">
|
||||
<div class="font-semibold text-slate-800 text-[13px] flex items-center justify-end gap-1.5">
|
||||
<span>李工</span>
|
||||
<span class="text-[10.5px] px-1.5 py-0.2 rounded bg-blue-50 text-primary border border-blue-100 font-normal">主控工程师</span>
|
||||
</div>
|
||||
<div class="text-[11px] text-slate-500 font-mono">调度中心 · 席位04</div>
|
||||
</div>
|
||||
<div class="w-9 h-9 rounded-full bg-gradient-to-tr from-primary to-blue-500 text-white flex items-center justify-center font-bold text-[14px] shadow-sm">
|
||||
李
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<!-- Main Workspace Ledger -->
|
||||
<main class="w-full pt-20 flex-1 p-8 space-y-5">
|
||||
<!-- Page Header: Title + Ledger Actions -->
|
||||
<div class="flex flex-col lg:flex-row lg:items-center justify-between gap-4">
|
||||
<div>
|
||||
<div class="flex items-center gap-2.5">
|
||||
<h1 class="text-[22px] font-bold text-slate-900 tracking-tight">现场勘察派单台账</h1>
|
||||
<span class="text-[12px] font-mono font-medium px-2 py-0.5 rounded-md bg-slate-100 text-slate-600 border border-slate-200">SURVEY DISPATCH LEDGER</span>
|
||||
</div>
|
||||
<p class="text-[13px] text-slate-500 mt-1">
|
||||
统一调度与全周期管理电力工程勘察测绘工单，监控现场执行时效、电工指派状态及测绘成果归档。
|
||||
</p>
|
||||
</div>
|
||||
<div class="flex items-center gap-2.5">
|
||||
<button class="px-3.5 py-2 rounded-lg bg-white border border-slate-200 hover:bg-slate-50 hover:border-slate-300 text-slate-700 font-medium text-[13px] shadow-sm transition-all flex items-center gap-1.5">
|
||||
<span class="material-symbols-outlined text-[17px] text-slate-500">file_download</span>
|
||||
<span>导出台账数据</span>
|
||||
</button>
|
||||
<button class="px-3.5 py-2 rounded-lg bg-white border border-slate-200 hover:bg-slate-50 hover:border-slate-300 text-slate-700 font-medium text-[13px] shadow-sm transition-all flex items-center gap-1.5">
|
||||
<span class="material-symbols-outlined text-[17px] text-slate-500">group_add</span>
|
||||
<span>批量派工</span>
|
||||
</button>
|
||||
<button class="px-4 py-2 rounded-lg bg-primary hover:bg-blue-700 text-white font-semibold text-[13px] shadow-sm shadow-blue-500/25 transition-all flex items-center gap-1.5">
|
||||
<span class="material-symbols-outlined text-[18px]">add</span>
|
||||
<span>发起勘察派单</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Ledger Top Status Metric Tabs (AntD style filter tabs) -->
|
||||
<div class="grid grid-cols-2 md:grid-cols-5 gap-3">
|
||||
<!-- Card 1: All -->
|
||||
<div class="bg-surface rounded-xl p-3.5 border-2 border-primary/20 bg-gradient-to-b from-blue-50/50 to-surface shadow-sm cursor-pointer hover:border-primary transition-all">
|
||||
<div class="flex items-center justify-between">
|
||||
<span class="text-[12.5px] font-semibold text-slate-700">全部工单</span>
|
||||
<span class="material-symbols-outlined text-[18px] text-primary">view_kanban</span>
|
||||
</div>
|
||||
<div class="mt-2 flex items-baseline gap-2">
|
||||
<span class="text-[22px] font-bold text-slate-900 font-mono">170</span>
|
||||
<span class="text-[11px] text-slate-400">总台账量</span>
|
||||
</div>
|
||||
<div class="mt-1 text-[11.5px] text-slate-500 flex items-center gap-1">
|
||||
<span>当月环比</span>
|
||||
<span class="text-emerald-600 font-medium font-mono">+12.4%</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Card 2: Pending Dispatch -->
|
||||
<div class="bg-surface rounded-xl p-3.5 border border-border-rule shadow-sm hover:border-amber-400 cursor-pointer transition-all">
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex items-center gap-1.5">
|
||||
<span class="w-2 h-2 rounded-full bg-amber-500"></span>
|
||||
<span class="text-[12.5px] font-semibold text-slate-700">待指派 / 待派单</span>
|
||||
</div>
|
||||
<span class="px-1.5 py-0.5 rounded text-[10.5px] bg-amber-50 text-amber-700 font-medium border border-amber-200">预警</span>
|
||||
</div>
|
||||
<div class="mt-2 flex items-baseline gap-2">
|
||||
<span class="text-[22px] font-bold text-amber-600 font-mono">4</span>
|
||||
<span class="text-[11px] text-slate-400">单急需调度</span>
|
||||
</div>
|
||||
<div class="mt-1 text-[11.5px] text-amber-600 font-medium flex items-center gap-1">
|
||||
<span class="material-symbols-outlined text-[13px]">alarm</span>
|
||||
<span>1 单即将超出到场时效</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Card 3: In Progress -->
|
||||
<div class="bg-surface rounded-xl p-3.5 border border-border-rule shadow-sm hover:border-blue-400 cursor-pointer transition-all">
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex items-center gap-1.5">
|
||||
<span class="w-2 h-2 rounded-full bg-blue-500 animate-pulse"></span>
|
||||
<span class="text-[12.5px] font-semibold text-slate-700">现场勘察中</span>
|
||||
</div>
|
||||
<span class="material-symbols-outlined text-[18px] text-blue-500">architecture</span>
|
||||
</div>
|
||||
<div class="mt-2 flex items-baseline gap-2">
|
||||
<span class="text-[22px] font-bold text-primary font-mono">12</span>
|
||||
<span class="text-[11px] text-slate-400">单在场测绘</span>
|
||||
</div>
|
||||
<div class="mt-1 text-[11.5px] text-slate-500 flex items-center gap-1">
|
||||
<span>平均履约到场率</span>
|
||||
<span class="text-blue-600 font-medium font-mono">98.6%</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Card 4: Under Technical Review -->
|
||||
<div class="bg-surface rounded-xl p-3.5 border border-border-rule shadow-sm hover:border-purple-400 cursor-pointer transition-all">
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex items-center gap-1.5">
|
||||
<span class="w-2 h-2 rounded-full bg-purple-500"></span>
|
||||
<span class="text-[12.5px] font-semibold text-slate-700">成果待技术复核</span>
|
||||
</div>
|
||||
<span class="material-symbols-outlined text-[18px] text-purple-600">fact_check</span>
|
||||
</div>
|
||||
<div class="mt-2 flex items-baseline gap-2">
|
||||
<span class="text-[22px] font-bold text-purple-600 font-mono">6</span>
|
||||
<span class="text-[11px] text-slate-400">单已回传照片</span>
|
||||
</div>
|
||||
<div class="mt-1 text-[11.5px] text-slate-500 flex items-center gap-1">
|
||||
<span>总工复审平均</span>
|
||||
<span class="text-purple-600 font-medium font-mono">2.1 小时</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Card 5: Archived/Completed -->
|
||||
<div class="bg-surface rounded-xl p-3.5 border border-border-rule shadow-sm hover:border-emerald-400 cursor-pointer transition-all">
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex items-center gap-1.5">
|
||||
<span class="w-2 h-2 rounded-full bg-emerald-500"></span>
|
||||
<span class="text-[12.5px] font-semibold text-slate-700">勘察完成 / 已归档</span>
|
||||
</div>
|
||||
<span class="material-symbols-outlined text-[18px] text-emerald-600">check_circle</span>
|
||||
</div>
|
||||
<div class="mt-2 flex items-baseline gap-2">
|
||||
<span class="text-[22px] font-bold text-emerald-600 font-mono">148</span>
|
||||
<span class="text-[11px] text-slate-400">单本月归档</span>
|
||||
</div>
|
||||
<div class="mt-1 text-[11.5px] text-slate-500 flex items-center gap-1">
|
||||
<span>方案出具率</span>
|
||||
<span class="text-emerald-600 font-medium font-mono">100%</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Filter Bar: Search, Filters & Action buttons -->
|
||||
<div class="bg-surface rounded-xl p-4 border border-border-rule shadow-sm space-y-3">
|
||||
<div class="grid grid-cols-1 md:grid-cols-12 gap-3 items-center">
|
||||
<!-- Search Query -->
|
||||
<div class="md:col-span-4">
|
||||
<label class="block text-[11.5px] font-medium text-slate-500 mb-1">模糊搜索</label>
|
||||
<div class="relative">
|
||||
<span class="material-symbols-outlined absolute left-3 top-1/2 -translate-y-1/2 text-slate-400 text-[18px]">search</span>
|
||||
<input class="w-full pl-9 pr-3 py-1.5 text-[13px] bg-slate-50 border border-slate-200 rounded-lg text-slate-800 placeholder-slate-400 focus:bg-white focus:border-primary focus:outline-none transition-colors" placeholder="工单编号、客户名称、物理建筑、业务员" type="text"/>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Status Filter -->
|
||||
<div class="md:col-span-2">
|
||||
<label class="block text-[11.5px] font-medium text-slate-500 mb-1">工单流程状态</label>
|
||||
<select class="w-full py-1.5 px-3 text-[13px] bg-slate-50 border border-slate-200 rounded-lg text-slate-800 focus:bg-white focus:border-primary focus:outline-none">
|
||||
<option value="all">全部状态 (170)</option>
|
||||
<option value="pending">待指派 (4)</option>
|
||||
<option value="progress">勘察中 (12)</option>
|
||||
<option value="review">待技术复核 (6)</option>
|
||||
<option value="completed">已归档 (148)</option>
|
||||
</select>
|
||||
</div>
|
||||
<!-- Electrician Filter -->
|
||||
<div class="md:col-span-2">
|
||||
<label class="block text-[11.5px] font-medium text-slate-500 mb-1">指派电工</label>
|
||||
<select class="w-full py-1.5 px-3 text-[13px] bg-slate-50 border border-slate-200 rounded-lg text-slate-800 focus:bg-white focus:border-primary focus:outline-none">
|
||||
<option value="all">全部电工 (38人)</option>
|
||||
<option value="unassigned">待指派电工</option>
|
||||
<option value="1">赵志强 (特种高压/4.98分)</option>
|
||||
<option value="2">孙明远 (继电保护/4.92分)</option>
|
||||
<option value="3">王建国 (特种低压/4.95分)</option>
|
||||
<option value="4">周正海 (电气试验/4.88分)</option>
|
||||
</select>
|
||||
</div>
|
||||
<!-- Date Picker -->
|
||||
<div class="md:col-span-2">
|
||||
<label class="block text-[11.5px] font-medium text-slate-500 mb-1">计划到场窗口</label>
|
||||
<div class="relative">
|
||||
<span class="material-symbols-outlined absolute left-2.5 top-1/2 -translate-y-1/2 text-slate-400 text-[16px]">calendar_today</span>
|
||||
<input class="w-full pl-8 pr-2.5 py-1.5 text-[12.5px] bg-slate-50 border border-slate-200 rounded-lg text-slate-800 focus:bg-white focus:border-primary focus:outline-none font-mono" placeholder="2026-03-01 ~ 03-31" type="text" value="2026-03-01 ~ 03-15"/>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Buttons -->
|
||||
<div class="md:col-span-2 flex items-center gap-2 pt-5">
|
||||
<button class="flex-1 py-1.5 bg-primary hover:bg-blue-700 text-white font-medium rounded-lg text-[13px] shadow-sm transition-colors flex items-center justify-center gap-1">
|
||||
<span class="material-symbols-outlined text-[16px]">search</span>
|
||||
<span>查询</span>
|
||||
</button>
|
||||
<button class="px-3 py-1.5 bg-white border border-slate-200 hover:bg-slate-50 text-slate-600 rounded-lg text-[13px] transition-colors">
|
||||
重置
|
||||
</button>
|
||||
<button class="text-primary hover:text-blue-700 text-[12px] flex items-center gap-0.5 whitespace-nowrap pl-1" title="展开高级筛选">
|
||||
<span>高级</span>
|
||||
<span class="material-symbols-outlined text-[15px]">tune</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Main Data Table Container (Ant Design Pro Table Style) -->
|
||||
<div class="bg-surface rounded-xl border border-border-rule shadow-sm overflow-hidden">
|
||||
<!-- Table Subheader -->
|
||||
<div class="px-5 py-3.5 border-b border-border-rule bg-slate-50/60 flex items-center justify-between">
|
||||
<div class="flex items-center gap-3 text-[13px]">
|
||||
<span class="font-semibold text-slate-800">勘察派工数据台账</span>
|
||||
<span class="text-slate-400">|</span>
|
||||
<span class="text-slate-500 text-[12px]">显示第 <span class="font-mono text-slate-700 font-semibold">1</span> 到 <span class="font-mono text-slate-700 font-semibold">5</span> 笔，共 <span class="font-mono text-primary font-bold">170</span> 笔工单记录</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2 text-[12px] text-slate-500">
|
||||
<span class="flex items-center gap-1"><span class="w-2 h-2 rounded-full bg-red-500"></span>特急 2</span>
|
||||
<span class="flex items-center gap-1 ml-2"><span class="w-2 h-2 rounded-full bg-amber-500"></span>加急 5</span>
|
||||
<span class="flex items-center gap-1 ml-2"><span class="w-2 h-2 rounded-full bg-slate-400"></span>常规 163</span>
|
||||
<button class="ml-3 text-slate-400 hover:text-slate-700 p-1" title="刷新表格">
|
||||
<span class="material-symbols-outlined text-[18px]">refresh</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Actual Table -->
|
||||
<div class="overflow-x-auto">
|
||||
<table class="w-full text-left border-collapse text-[13px]">
|
||||
<thead>
|
||||
<tr class="bg-slate-50/90 text-slate-600 text-[12px] border-b border-slate-200 uppercase tracking-wider font-semibold">
|
||||
<th class="py-3 px-4 w-10 text-center">
|
||||
<input class="rounded border-slate-300 text-primary focus:ring-0 w-4 h-4 cursor-pointer" type="checkbox"/>
|
||||
</th>
|
||||
<th class="py-3 px-3 min-w-[150px]">工单编号 / 优先级</th>
|
||||
<th class="py-3 px-3 min-w-[210px]">关联客户与项目</th>
|
||||
<th class="py-3 px-3 min-w-[180px]">现场空间位置</th>
|
||||
<th class="py-3 px-3 min-w-[150px]">测绘回路 / 规格</th>
|
||||
<th class="py-3 px-3 min-w-[130px]">责任业务员</th>
|
||||
<th class="py-3 px-3 min-w-[170px]">调度指派电工</th>
|
||||
<th class="py-3 px-3 min-w-[150px]">期望时效 / SLA</th>
|
||||
<th class="py-3 px-3 min-w-[100px]">预估劳务费</th>
|
||||
<th class="py-3 px-3 min-w-[110px] text-center">工单状态</th>
|
||||
<th class="py-3 px-4 min-w-[160px] text-center sticky right-0 bg-slate-50">操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="divide-y divide-slate-100 text-slate-700">
|
||||
<!-- Row 1: 待指派 (WH-SURV-2026-0302) 特急 -->
|
||||
<tr class="hover:bg-blue-50/40 transition-colors bg-amber-50/20">
|
||||
<td class="py-3.5 px-4 text-center">
|
||||
<input class="rounded border-slate-300 text-primary focus:ring-0 w-4 h-4 cursor-pointer" type="checkbox"/>
|
||||
</td>
|
||||
<td class="py-3.5 px-3">
|
||||
<div class="flex items-center gap-1.5">
|
||||
<span class="font-mono font-bold text-primary hover:underline cursor-pointer">WH-SURV-2026-0302</span>
|
||||
</div>
|
||||
<div class="mt-1">
|
||||
<span class="text-[10.5px] px-1.5 py-0.5 rounded bg-red-100 text-red-700 font-semibold border border-red-200">特急派发</span>
|
||||
</div>
|
||||
</td>
|
||||
<td class="py-3.5 px-3">
|
||||
<div class="font-semibold text-slate-900 leading-snug line-clamp-1">武汉软件工程职业学院 · 实训楼智能配电改造</div>
|
||||
<div class="text-[11.5px] text-slate-400 mt-0.5">签约客户：武汉软件工程职业学院后勤处</div>
|
||||
</td>
|
||||
<td class="py-3.5 px-3">
|
||||
<div class="flex items-start gap-1 text-[12.5px] text-slate-700">
|
||||
<span class="material-symbols-outlined text-[15px] text-slate-400 shrink-0 mt-0.5">pin_drop</span>
|
||||
<span>实训综合楼 1F低压室 及 2~3F强电竖井</span>
|
||||
</div>
|
||||
</td>
|
||||
<td class="py-3.5 px-3">
|
||||
<div class="font-mono font-semibold text-slate-800">40 回路</div>
|
||||
<div class="text-[11.5px] text-slate-500">380V / 400A MCCB</div>
|
||||
</td>
|
||||
<td class="py-3.5 px-3">
|
||||
<div class="font-medium text-slate-800">程经理</div>
|
||||
<div class="font-mono text-[11.5px] text-slate-400">138****9201</div>
|
||||
</td>
|
||||
<td class="py-3.5 px-3">
|
||||
<div class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-lg bg-amber-50 border border-amber-200 text-amber-800">
|
||||
<span class="material-symbols-outlined text-[15px] text-amber-600">person_search</span>
|
||||
<span class="font-medium text-[12px]">待指派电工</span>
|
||||
<span class="text-[11px] text-primary underline cursor-pointer ml-0.5">指派</span>
|
||||
</div>
|
||||
</td>
|
||||
<td class="py-3.5 px-3">
|
||||
<div class="text-amber-700 font-medium text-[12.5px] flex items-center gap-1">
|
||||
<span class="material-symbols-outlined text-[15px]">timer</span>
|
||||
<span>接单后 45 分钟内</span>
|
||||
</div>
|
||||
<div class="text-[11px] text-red-600 font-mono font-medium mt-0.5">剩余 1.2 小时超时</div>
|
||||
</td>
|
||||
<td class="py-3.5 px-3 font-mono font-bold text-slate-900">
|
||||
¥ 550.00
|
||||
</td>
|
||||
<td class="py-3.5 px-3 text-center">
|
||||
<span class="inline-flex items-center gap-1 px-2.5 py-0.5 rounded-full text-[12px] font-medium bg-amber-50 text-amber-700 border border-amber-200">
|
||||
<span class="w-1.5 h-1.5 rounded-full bg-amber-500"></span>待指派
|
||||
</span>
|
||||
</td>
|
||||
<td class="py-3.5 px-4 text-center sticky right-0 bg-white/95">
|
||||
<div class="flex items-center justify-center gap-2">
|
||||
<button class="text-primary hover:text-blue-700 font-semibold text-[12.5px]">指派电工</button>
|
||||
<span class="text-slate-200">|</span>
|
||||
<button class="text-slate-600 hover:text-slate-900 text-[12.5px]">编辑</button>
|
||||
<span class="text-slate-200">|</span>
|
||||
<button class="text-slate-400 hover:text-red-600 text-[12.5px]">取消</button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<!-- Row 2: 现场勘察中 (WH-SURV-2026-0303) 加急 -->
|
||||
<tr class="hover:bg-blue-50/40 transition-colors">
|
||||
<td class="py-3.5 px-4 text-center">
|
||||
<input class="rounded border-slate-300 text-primary focus:ring-0 w-4 h-4 cursor-pointer" type="checkbox"/>
|
||||
</td>
|
||||
<td class="py-3.5 px-3">
|
||||
<div class="flex items-center gap-1.5">
|
||||
<span class="font-mono font-bold text-primary hover:underline cursor-pointer">WH-SURV-2026-0303</span>
|
||||
</div>
|
||||
<div class="mt-1">
|
||||
<span class="text-[10.5px] px-1.5 py-0.5 rounded bg-amber-100 text-amber-800 font-semibold border border-amber-200">加急工单</span>
|
||||
</div>
|
||||
</td>
|
||||
<td class="py-3.5 px-3">
|
||||
<div class="font-semibold text-slate-900 leading-snug line-clamp-1">华中师范大学南湖校区 · 二期环网柜勘察测绘</div>
|
||||
<div class="text-[11.5px] text-slate-400 mt-0.5">签约客户：湖北科教基建投资有限公司</div>
|
||||
</td>
|
||||
<td class="py-3.5 px-3">
|
||||
<div class="flex items-start gap-1 text-[12.5px] text-slate-700">
|
||||
<span class="material-symbols-outlined text-[15px] text-slate-400 shrink-0 mt-0.5">pin_drop</span>
|
||||
<span>南湖校区 10kV 开闭所及 2# 箱变</span>
|
||||
</div>
|
||||
</td>
|
||||
<td class="py-3.5 px-3">
|
||||
<div class="font-mono font-semibold text-slate-800">24 回路</div>
|
||||
<div class="text-[11.5px] text-slate-500">10kV 环网柜 / 630kVA</div>
|
||||
</td>
|
||||
<td class="py-3.5 px-3">
|
||||
<div class="font-medium text-slate-800">万工</div>
|
||||
<div class="font-mono text-[11.5px] text-slate-400">135****4829</div>
|
||||
</td>
|
||||
<td class="py-3.5 px-3">
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="w-6 h-6 rounded-full bg-primary/10 text-primary flex items-center justify-center font-bold text-[11px]">赵</div>
|
||||
<div>
|
||||
<div class="font-semibold text-slate-800 text-[12.5px]">赵志强</div>
|
||||
<div class="text-[11px] text-slate-400">距1.8km · <span class="text-amber-600 font-semibold">★4.98</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="py-3.5 px-3">
|
||||
<div class="text-slate-800 font-medium text-[12.5px]">履约测绘中</div>
|
||||
<div class="text-[11.5px] text-emerald-600 font-mono">已完成 18/24 回路</div>
|
||||
</td>
|
||||
<td class="py-3.5 px-3 font-mono font-bold text-slate-900">
|
||||
¥ 680.00
|
||||
</td>
|
||||
<td class="py-3.5 px-3 text-center">
|
||||
<span class="inline-flex items-center gap-1 px-2.5 py-0.5 rounded-full text-[12px] font-medium bg-blue-50 text-blue-700 border border-blue-200">
|
||||
<span class="w-1.5 h-1.5 rounded-full bg-blue-500 animate-pulse"></span>现场勘察中
|
||||
</span>
|
||||
</td>
|
||||
<td class="py-3.5 px-4 text-center sticky right-0 bg-white/95">
|
||||
<div class="flex items-center justify-center gap-2">
|
||||
<button class="text-primary hover:text-blue-700 font-semibold text-[12.5px]">进度跟踪</button>
|
||||
<span class="text-slate-200">|</span>
|
||||
<button class="text-slate-600 hover:text-slate-900 text-[12.5px]">改派</button>
|
||||
<span class="text-slate-200">|</span>
|
||||
<button class="text-slate-600 hover:text-amber-600 text-[12.5px]">催办</button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<!-- Row 3: 待技术复核 (WH-SURV-2026-0304) 常规 -->
|
||||
<tr class="hover:bg-blue-50/40 transition-colors">
|
||||
<td class="py-3.5 px-4 text-center">
|
||||
<input class="rounded border-slate-300 text-primary focus:ring-0 w-4 h-4 cursor-pointer" type="checkbox"/>
|
||||
</td>
|
||||
<td class="py-3.5 px-3">
|
||||
<div class="flex items-center gap-1.5">
|
||||
<span class="font-mono font-bold text-primary hover:underline cursor-pointer">WH-SURV-2026-0304</span>
|
||||
</div>
|
||||
<div class="mt-1">
|
||||
<span class="text-[10.5px] px-1.5 py-0.5 rounded bg-slate-100 text-slate-600 font-medium border border-slate-200">常规工单</span>
|
||||
</div>
|
||||
</td>
|
||||
<td class="py-3.5 px-3">
|
||||
<div class="font-semibold text-slate-900 leading-snug line-clamp-1">光谷微电子产业园 · 3号配电站扩容测绘</div>
|
||||
<div class="text-[11.5px] text-slate-400 mt-0.5">签约客户：光谷微电子联合实验室</div>
|
||||
</td>
|
||||
<td class="py-3.5 px-3">
|
||||
<div class="flex items-start gap-1 text-[12.5px] text-slate-700">
|
||||
<span class="material-symbols-outlined text-[15px] text-slate-400 shrink-0 mt-0.5">pin_drop</span>
|
||||
<span>高新大道999号 研发楼B座负一层配电间</span>
|
||||
</div>
|
||||
</td>
|
||||
<td class="py-3.5 px-3">
|
||||
<div class="font-mono font-semibold text-slate-800">56 回路</div>
|
||||
<div class="text-[11.5px] text-slate-500">双电源 ATS / 630A</div>
|
||||
</td>
|
||||
<td class="py-3.5 px-3">
|
||||
<div class="font-medium text-slate-800">刘经理</div>
|
||||
<div class="font-mono text-[11.5px] text-slate-400">139****1124</div>
|
||||
</td>
|
||||
<td class="py-3.5 px-3">
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="w-6 h-6 rounded-full bg-purple-100 text-purple-700 flex items-center justify-center font-bold text-[11px]">孙</div>
|
||||
<div>
|
||||
<div class="font-semibold text-slate-800 text-[12.5px]">孙明远</div>
|
||||
<div class="text-[11px] text-slate-400">距4.2km · <span class="text-amber-600 font-semibold">★4.92</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="py-3.5 px-3">
|
||||
<div class="text-slate-800 font-medium text-[12.5px]">已完成回传</div>
|
||||
<div class="text-[11.5px] text-purple-600 font-mono">16张图纸待复核</div>
|
||||
</td>
|
||||
<td class="py-3.5 px-3 font-mono font-bold text-slate-900">
|
||||
¥ 820.00
|
||||
</td>
|
||||
<td class="py-3.5 px-3 text-center">
|
||||
<span class="inline-flex items-center gap-1 px-2.5 py-0.5 rounded-full text-[12px] font-medium bg-purple-50 text-purple-700 border border-purple-200">
|
||||
<span class="w-1.5 h-1.5 rounded-full bg-purple-500"></span>待技术复核
|
||||
</span>
|
||||
</td>
|
||||
<td class="py-3.5 px-4 text-center sticky right-0 bg-white/95">
|
||||
<div class="flex items-center justify-center gap-2">
|
||||
<button class="text-purple-600 hover:text-purple-800 font-bold text-[12.5px]">审核测绘成果</button>
|
||||
<span class="text-slate-200">|</span>
|
||||
<button class="text-slate-600 hover:text-slate-900 text-[12.5px]">取证照片</button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<!-- Row 4: 待指派 (WH-SURV-2026-0305) 常规 -->
|
||||
<tr class="hover:bg-blue-50/40 transition-colors">
|
||||
<td class="py-3.5 px-4 text-center">
|
||||
<input class="rounded border-slate-300 text-primary focus:ring-0 w-4 h-4 cursor-pointer" type="checkbox"/>
|
||||
</td>
|
||||
<td class="py-3.5 px-3">
|
||||
<div class="flex items-center gap-1.5">
|
||||
<span class="font-mono font-bold text-primary hover:underline cursor-pointer">WH-SURV-2026-0305</span>
|
||||
</div>
|
||||
<div class="mt-1">
|
||||
<span class="text-[10.5px] px-1.5 py-0.5 rounded bg-slate-100 text-slate-600 font-medium border border-slate-200">常规工单</span>
|
||||
</div>
|
||||
</td>
|
||||
<td class="py-3.5 px-3">
|
||||
<div class="font-semibold text-slate-900 leading-snug line-clamp-1">汉口新华医院 · 急诊楼供电后备发电机进线勘察</div>
|
||||
<div class="text-[11.5px] text-slate-400 mt-0.5">签约客户：汉口新华医疗投资集团</div>
|
||||
</td>
|
||||
<td class="py-3.5 px-3">
|
||||
<div class="flex items-start gap-1 text-[12.5px] text-slate-700">
|
||||
<span class="material-symbols-outlined text-[15px] text-slate-400 shrink-0 mt-0.5">pin_drop</span>
|
||||
<span>急诊综合大楼 B2柴发机房及母线桥架</span>
|
||||
</div>
|
||||
</td>
|
||||
<td class="py-3.5 px-3">
|
||||
<div class="font-mono font-semibold text-slate-800">18 回路</div>
|
||||
<div class="text-[11.5px] text-slate-500">400V 应急发电机母排</div>
|
||||
</td>
|
||||
<td class="py-3.5 px-3">
|
||||
<div class="font-medium text-slate-800">黄主管</div>
|
||||
<div class="font-mono text-[11.5px] text-slate-400">136****9012</div>
|
||||
</td>
|
||||
<td class="py-3.5 px-3">
|
||||
<div class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-lg bg-slate-100 border border-slate-200 text-slate-600">
|
||||
<span class="material-symbols-outlined text-[15px] text-slate-400">schedule</span>
|
||||
<span class="font-medium text-[12px]">待指定电工</span>
|
||||
<span class="text-[11px] text-primary underline cursor-pointer ml-0.5">智能派单</span>
|
||||
</div>
|
||||
</td>
|
||||
<td class="py-3.5 px-3">
|
||||
<div class="text-slate-800 font-medium text-[12.5px]">24小时内到场</div>
|
||||
<div class="text-[11px] text-slate-500 font-mono">剩余 19.5 小时</div>
|
||||
</td>
|
||||
<td class="py-3.5 px-3 font-mono font-bold text-slate-900">
|
||||
¥ 420.00
|
||||
</td>
|
||||
<td class="py-3.5 px-3 text-center">
|
||||
<span class="inline-flex items-center gap-1 px-2.5 py-0.5 rounded-full text-[12px] font-medium bg-amber-50 text-amber-700 border border-amber-200">
|
||||
<span class="w-1.5 h-1.5 rounded-full bg-amber-500"></span>待指派
|
||||
</span>
|
||||
</td>
|
||||
<td class="py-3.5 px-4 text-center sticky right-0 bg-white/95">
|
||||
<div class="flex items-center justify-center gap-2">
|
||||
<button class="text-primary hover:text-blue-700 font-semibold text-[12.5px]">指派电工</button>
|
||||
<span class="text-slate-200">|</span>
|
||||
<button class="text-slate-600 hover:text-slate-900 text-[12.5px]">编辑</button>
|
||||
<span class="text-slate-200">|</span>
|
||||
<button class="text-slate-400 hover:text-red-600 text-[12.5px]">取消</button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<!-- Row 5: 勘察完成/已归档 (WH-SURV-2026-0288) 常规 -->
|
||||
<tr class="hover:bg-blue-50/40 transition-colors">
|
||||
<td class="py-3.5 px-4 text-center">
|
||||
<input class="rounded border-slate-300 text-primary focus:ring-0 w-4 h-4 cursor-pointer" type="checkbox"/>
|
||||
</td>
|
||||
<td class="py-3.5 px-3">
|
||||
<div class="flex items-center gap-1.5">
|
||||
<span class="font-mono font-bold text-primary hover:underline cursor-pointer">WH-SURV-2026-0288</span>
|
||||
</div>
|
||||
<div class="mt-1">
|
||||
<span class="text-[10.5px] px-1.5 py-0.5 rounded bg-slate-100 text-slate-600 font-medium border border-slate-200">常规工单</span>
|
||||
</div>
|
||||
</td>
|
||||
<td class="py-3.5 px-3">
|
||||
<div class="font-semibold text-slate-900 leading-snug line-clamp-1">东西湖现代冷链物流港 · 02号智能仓冷风机配电</div>
|
||||
<div class="text-[11.5px] text-slate-400 mt-0.5">签约客户：湖北现代冷链物流发展有限公司</div>
|
||||
</td>
|
||||
<td class="py-3.5 px-3">
|
||||
<div class="flex items-start gap-1 text-[12.5px] text-slate-700">
|
||||
<span class="material-symbols-outlined text-[15px] text-slate-400 shrink-0 mt-0.5">pin_drop</span>
|
||||
<span>冷链1号库东侧冷机房控制柜</span>
|
||||
</div>
|
||||
</td>
|
||||
<td class="py-3.5 px-3">
|
||||
<div class="font-mono font-semibold text-slate-800">32 回路</div>
|
||||
<div class="text-[11.5px] text-slate-500">变频动力柜 / 250A</div>
|
||||
</td>
|
||||
<td class="py-3.5 px-3">
|
||||
<div class="font-medium text-slate-800">王工</div>
|
||||
<div class="font-mono text-[11.5px] text-slate-400">137****6632</div>
|
||||
</td>
|
||||
<td class="py-3.5 px-3">
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="w-6 h-6 rounded-full bg-emerald-100 text-emerald-800 flex items-center justify-center font-bold text-[11px]">王</div>
|
||||
<div>
|
||||
<div class="font-semibold text-slate-800 text-[12.5px]">王建国</div>
|
||||
<div class="text-[11px] text-slate-400">履约完成 · <span class="text-amber-600 font-semibold">★4.95</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="py-3.5 px-3">
|
||||
<div class="text-emerald-700 font-medium text-[12.5px] flex items-center gap-1">
|
||||
<span class="material-symbols-outlined text-[15px]">verified</span>
|
||||
<span>SLA 100% 达标</span>
|
||||
</div>
|
||||
<div class="text-[11px] text-slate-400 font-mono">已归档至项目库</div>
|
||||
</td>
|
||||
<td class="py-3.5 px-3 font-mono font-bold text-slate-900">
|
||||
¥ 620.00
|
||||
</td>
|
||||
<td class="py-3.5 px-3 text-center">
|
||||
<span class="inline-flex items-center gap-1 px-2.5 py-0.5 rounded-full text-[12px] font-medium bg-emerald-50 text-emerald-700 border border-emerald-200">
|
||||
<span class="w-1.5 h-1.5 rounded-full bg-emerald-500"></span>已归档
|
||||
</span>
|
||||
</td>
|
||||
<td class="py-3.5 px-4 text-center sticky right-0 bg-white/95">
|
||||
<div class="flex items-center justify-center gap-2">
|
||||
<button class="text-primary hover:text-blue-700 font-medium text-[12.5px]">生成方案</button>
|
||||
<span class="text-slate-200">|</span>
|
||||
<button class="text-slate-600 hover:text-slate-900 text-[12.5px]">查看报告</button>
|
||||
<span class="text-slate-200">|</span>
|
||||
<button class="text-slate-400 hover:text-slate-600 text-[12.5px]">详情</button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<!-- Table Footer & Ant Design Pagination -->
|
||||
<div class="px-5 py-4 border-t border-border-rule bg-surface flex flex-col md:flex-row items-center justify-between gap-4">
|
||||
<!-- Batch Actions -->
|
||||
<div class="flex items-center gap-3">
|
||||
<span class="text-[12.5px] text-slate-500">
|
||||
已选中 <strong class="text-primary font-mono font-bold">0</strong> 项
|
||||
</span>
|
||||
<button class="px-3 py-1.5 rounded-lg border border-slate-200 hover:bg-slate-50 text-slate-600 text-[12px] font-medium transition-colors disabled:opacity-50" disabled="">
|
||||
批量指定电工
|
||||
</button>
|
||||
<button class="px-3 py-1.5 rounded-lg border border-slate-200 hover:bg-slate-50 text-slate-600 text-[12px] font-medium transition-colors disabled:opacity-50" disabled="">
|
||||
批量打印现场作业票
|
||||
</button>
|
||||
</div>
|
||||
<!-- Pagination Controls -->
|
||||
<div class="flex items-center gap-2 text-[13px]">
|
||||
<span class="text-slate-500 text-[12.5px]">共 170 条</span>
|
||||
<!-- Page Size Selector -->
|
||||
<select class="py-1 px-2.5 border border-slate-200 rounded-lg text-[12px] text-slate-700 bg-slate-50 focus:outline-none focus:border-primary">
|
||||
<option value="10">10 条/页</option>
|
||||
<option value="20">20 条/页</option>
|
||||
<option value="50">50 条/页</option>
|
||||
</select>
|
||||
<!-- Page Buttons -->
|
||||
<div class="flex items-center gap-1 ml-2">
|
||||
<button class="w-8 h-8 rounded-lg border border-slate-200 flex items-center justify-center text-slate-400 hover:bg-slate-50 disabled:opacity-40" disabled="">
|
||||
<span class="material-symbols-outlined text-[16px]">chevron_left</span>
|
||||
</button>
|
||||
<button class="w-8 h-8 rounded-lg bg-primary text-white font-bold flex items-center justify-center text-[12.5px] shadow-sm">
|
||||
1
|
||||
</button>
|
||||
<button class="w-8 h-8 rounded-lg border border-slate-200 text-slate-600 hover:bg-slate-50 flex items-center justify-center text-[12.5px]">
|
||||
2
|
||||
</button>
|
||||
<button class="w-8 h-8 rounded-lg border border-slate-200 text-slate-600 hover:bg-slate-50 flex items-center justify-center text-[12.5px]">
|
||||
3
|
||||
</button>
|
||||
<span class="text-slate-400 px-1 font-mono text-[12px]">...</span>
|
||||
<button class="w-8 h-8 rounded-lg border border-slate-200 text-slate-600 hover:bg-slate-50 flex items-center justify-center text-[12.5px]">
|
||||
17
|
||||
</button>
|
||||
<button class="w-8 h-8 rounded-lg border border-slate-200 flex items-center justify-center text-slate-600 hover:bg-slate-50">
|
||||
<span class="material-symbols-outlined text-[16px]">chevron_right</span>
|
||||
</button>
|
||||
</div>
|
||||
<!-- Quick Jumper -->
|
||||
<div class="flex items-center gap-1.5 ml-2 text-slate-500 text-[12.5px]">
|
||||
<span>跳至</span>
|
||||
<input class="w-12 py-1 px-1 text-center font-mono border border-slate-200 rounded-lg text-[12px] focus:outline-none focus:border-primary" type="text" value="1"/>
|
||||
<span>页</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
</body></html>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 495 KiB |
Reference in new issue
Block a user