feat(运维-车辆): 异动管理查看/结束异动/编辑、备件与需求说明更新

Made-with: Cursor
2026-03-21 13:19:27 +08:00
parent c75d1656e3
commit 49d9e3675d
9 changed files with 2812 additions and 157 deletions
--- a/web端/运维管理/车辆业务/异动管理-查看.jsx
+++ b/web端/运维管理/车辆业务/异动管理-查看.jsx
@@ -1,5 +1,5 @@
 // 【重要】必须使用 const Component 作为组件变量名
-// 运维管理 - 车辆业务 - 异动管理 - 查看（只读）
+// 运维管理 - 车辆业务 - 异动管理 - 查看（布局对齐「结束异动」，全部只读）

 const Component = function () {
 	var useState = React.useState;
@@ -27,10 +27,25 @@ const Component = function () {
 		return null;
 	}

-	var layoutStyle = { padding: '16px 24px', background: '#f5f5f5', minHeight: '100vh' };
+	function fmtPlannedMileage(v) {
+		if (v == null || v === '') return '-';
+		var n = Number(v);
+		if (isNaN(n)) return String(v);
+		return n.toFixed(2);
+	}
+
+	function fmtNum2Display(v) {
+		if (v === null || v === undefined || v === '') return '';
+		var n = Number(v);
+		if (isNaN(n)) return String(v);
+		return n.toFixed(2);
+	}
+
+	var layoutStyle = { padding: '16px 24px', background: '#f5f5f5', minHeight: '100vh', paddingBottom: 80 };
 	var labelStyle = { marginBottom: 6, fontSize: 14, color: 'rgba(0,0,0,0.65)' };
 	var formItemStyle = { marginBottom: 12 };
 	var controlStyle = { width: '100%' };
+	var placeholderSelectVehicle = '请先选择车辆';

 	var destinationTypeOptions = useMemo(function () {
 		return [
@@ -40,24 +55,6 @@ const Component = function () {
 		];
 	}, []);

-	var destinationParkingOptions = useMemo(function () {
-		return [
-			{ value: '天河智慧停车场', label: '天河智慧停车场' },
-			{ value: '南山科技园停车场', label: '南山科技园停车场' },
-			{ value: '西湖景区停车场', label: '西湖景区停车场' },
-			{ value: '宁波江北停车场', label: '宁波江北停车场' },
-			{ value: '张江园区停车场', label: '张江园区停车场' }
-		];
-	}, []);
-
-	var destinationRepairOptions = useMemo(function () {
-		return [
-			{ value: '杭州拱墅维修站', label: '杭州拱墅维修站' },
-			{ value: '广州天河维修站', label: '广州天河维修站' },
-			{ value: '上海浦东维修站', label: '上海浦东维修站' }
-		];
-	}, []);
-
 	var changeTypeOptions = useMemo(function () {
 		return [
 			{ value: '维修', label: '维修' },
@@ -77,77 +74,47 @@ const Component = function () {
 		];
 	}, []);

-	// 原型：详情接口返回的只读数据（字段与「异动管理.新增」一致，并含审批状态）
-	var form = {
-		startTime: getInitialDateTime('2026-02-20 09:30'),
-		plannedEndTime: getInitialDateTime('2026-02-22 18:00'),
-		destinationType: '维修站',
-		destinationName: '广州天河维修站',
-		destinationNameOther: '',
-		changeType: '维修',
-		plannedMileageKm: '45.50',
-		remark: '车辆需进站检修制动系统，预计两日内完成。',
-		approvalStatus: '审批中'
-	};
+	// 原型：详情接口返回（联调时由路由/接口填充）；字段布局对齐「结束异动」
+	var movementReadonly = useMemo(function () {
+		return {
+			startTime: getInitialDateTime('2026-02-20 09:30'),
+			plannedEndTime: getInitialDateTime('2026-02-22 18:00'),
+			destinationType: '维修站',
+			destinationName: '广州天河维修站',
+			changeType: '维修',
+			plannedMileageKm: '45.50',
+			remark: '车辆需进站检修制动系统，预计两日内完成。',
+			approvalStatus: '审批中',
+			endDateTime: getInitialDateTime('2026-02-22 17:45')
+		};
+	}, []);

-	var vehicles = [
-		{
-			id: 1,
-			plateNo: '粤A12345',
-			vehicleType: '厢式货车',
-			brand: '东风',
-			model: 'DFH1180',
-			departParking: '天河智慧停车场',
-			startMileageKm: '15230.12',
-			startHydrogen: '28.30',
-			h2Unit: 'MPa',
-			startElectricKwh: '68.40'
-		},
-		{
-			id: 2,
-			plateNo: '浙A11111',
-			vehicleType: 'SUV',
-			brand: '小鹏',
-			model: 'P7',
-			departParking: '西湖景区停车场',
-			startMileageKm: '12010.00',
-			startHydrogen: '60.00',
-			h2Unit: '%',
-			startElectricKwh: '55.20'
-		}
-	];
+	// 查看页仅展示单辆车（1 条记录；联调时详情接口按单车辆返回）
+	var vehicles = useMemo(function () {
+		return [
+			{
+				id: 1,
+				plateNo: '粤A12345',
+				vehicleType: '厢式货车',
+				brand: '东风',
+				model: 'DFH1180',
+				departParking: '天河智慧停车场',
+				startMileageKm: '15230.12',
+				startHydrogen: '28.30',
+				h2Unit: 'MPa',
+				startElectricKwh: '68.40',
+				endMileageKm: '15280.55',
+				endHydrogen: '26.80',
+				endElectricKwh: '70.00'
+			}
+		];
+	}, []);

-	var destinationNameLabel = form.destinationType === '维修站' ? '维修站' : (form.destinationType === '停车场' ? '停车场' : '目的地名称');
+	function rowVehicleSelected(r) {
+		return !!(r && String(r.plateNo || '').trim());
+	}

-	var destinationNameNode = (function () {
-		if (form.destinationType === '其他') {
-			return React.createElement(Input, {
-				value: form.destinationNameOther || '-',
-				disabled: true
-			});
-		}
-		var opts = form.destinationType === '维修站' ? destinationRepairOptions : destinationParkingOptions;
-		return React.createElement(Select, {
-			style: controlStyle,
-			value: form.destinationName,
-			options: opts,
-			disabled: true
-		});
-	})();
-
-	var requirementModalState = useState(false);
-	var requirementModalOpen = requirementModalState[0];
-	var setRequirementModalOpen = requirementModalState[1];
-
-	var requirementDocContent = [
-		'一个「数字化资产ONEOS运管平台」中的「异动管理」「查看」模块',
-		'#面包屑：运维管理-车辆业务-异动管理-查看',
-		'页面布局与字段与「异动管理.新增」一致，所有表单项均为只读，仅供查询展示。',
-		'',
-		'1.异动情况：异动开始/预计结束日期、审批状态、异动目的地、目的地名称、异动类型、预计异动里程、备注 — 全部禁用不可编辑。',
-		'2.车辆信息：车牌号、车辆类型、品牌、型号、出发停车场、异动开始里程、异动开始氢量、异动开始电量 — 全部禁用；无新增行与删除操作。',
-		'3.底部仅提供「返回」按钮，返回异动管理列表（原型）。'
-	].join('\n');
+	var destLabel = movementReadonly.destinationType === '维修站' ? '维修站名称' : (movementReadonly.destinationType === '停车场' ? '停车场名称' : '目的地名称');

 	var vehicleColumns = useMemo(function () {
 		return [
@@ -155,6 +122,7 @@ const Component = function () {
 				title: '车牌号',
 				key: 'plateNo',
 				width: 140,
+				fixed: 'left',
 				render: function (_, r) {
 					return React.createElement(Input, { value: r.plateNo || '-', disabled: true });
 				}
@@ -164,7 +132,7 @@ const Component = function () {
 				key: 'vehicleType',
 				width: 120,
 				render: function (_, r) {
-					return React.createElement(Input, { value: r.vehicleType || '-', disabled: true });
+					return React.createElement(Input, { value: rowVehicleSelected(r) ? (r.vehicleType || '-') : '请先选择车辆', disabled: true });
 				}
 			},
 			{
@@ -172,7 +140,7 @@ const Component = function () {
 				key: 'brand',
 				width: 100,
 				render: function (_, r) {
-					return React.createElement(Input, { value: r.brand || '-', disabled: true });
+					return React.createElement(Input, { value: rowVehicleSelected(r) ? (r.brand || '-') : '请先选择车辆', disabled: true });
 				}
 			},
 			{
@@ -180,7 +148,7 @@ const Component = function () {
 				key: 'model',
 				width: 120,
 				render: function (_, r) {
-					return React.createElement(Input, { value: r.model || '-', disabled: true });
+					return React.createElement(Input, { value: rowVehicleSelected(r) ? (r.model || '-') : '请先选择车辆', disabled: true });
 				}
 			},
 			{
@@ -188,7 +156,7 @@ const Component = function () {
 				key: 'departParking',
 				width: 160,
 				render: function (_, r) {
-					return React.createElement(Input, { value: r.departParking || '-', disabled: true });
+					return React.createElement(Input, { value: rowVehicleSelected(r) ? (r.departParking || '-') : '请先选择车辆', disabled: true });
 				}
 			},
 			{
@@ -196,7 +164,27 @@ const Component = function () {
 				key: 'startMileageKm',
 				width: 160,
 				render: function (_, r) {
-					return React.createElement(Input, { value: r.startMileageKm || '-', disabled: true, addonAfter: 'km' });
+					return React.createElement(Input, {
+						value: rowVehicleSelected(r) ? fmtNum2Display(r.startMileageKm) : '',
+						disabled: true,
+						addonAfter: 'km',
+						placeholder: rowVehicleSelected(r) ? undefined : placeholderSelectVehicle
+					});
+				}
+			},
+			{
+				title: '异动结束里程',
+				key: 'endMileageKm',
+				width: 160,
+				render: function (_, r) {
+					if (!rowVehicleSelected(r)) {
+						return React.createElement(Input, { value: '', disabled: true, placeholder: placeholderSelectVehicle });
+					}
+					return React.createElement(Input, {
+						value: fmtNum2Display(r.endMileageKm),
+						disabled: true,
+						addonAfter: 'km'
+					});
 				}
 			},
 			{
@@ -204,8 +192,27 @@ const Component = function () {
 				key: 'startHydrogen',
 				width: 150,
 				render: function (_, r) {
+					var unit = rowVehicleSelected(r) ? (r.h2Unit || '') : '';
+					return React.createElement(Input, Object.assign({
+						value: rowVehicleSelected(r) ? fmtNum2Display(r.startHydrogen) : '',
+						disabled: true,
+						placeholder: rowVehicleSelected(r) ? undefined : placeholderSelectVehicle
+					}, unit ? { addonAfter: unit } : {}));
+				}
+			},
+			{
+				title: '异动结束氢量',
+				key: 'endHydrogen',
+				width: 150,
+				render: function (_, r) {
+					if (!rowVehicleSelected(r)) {
+						return React.createElement(Input, { value: '', disabled: true, placeholder: placeholderSelectVehicle });
+					}
 					var unit = r.h2Unit || '';
-					return React.createElement(Input, { value: r.startHydrogen || '-', disabled: true, addonAfter: unit || '-' });
+					return React.createElement(Input, Object.assign({
+						value: fmtNum2Display(r.endHydrogen),
+						disabled: true
+					}, unit ? { addonAfter: unit } : {}));
 				}
 			},
 			{
@@ -213,12 +220,47 @@ const Component = function () {
 				key: 'startElectricKwh',
 				width: 150,
 				render: function (_, r) {
-					return React.createElement(Input, { value: r.startElectricKwh || '-', disabled: true, addonAfter: 'kWh' });
+					return React.createElement(Input, {
+						value: rowVehicleSelected(r) ? fmtNum2Display(r.startElectricKwh) : '',
+						disabled: true,
+						addonAfter: 'kWh',
+						placeholder: rowVehicleSelected(r) ? undefined : placeholderSelectVehicle
+					});
+				}
+			},
+			{
+				title: '异动结束电量',
+				key: 'endElectricKwh',
+				width: 150,
+				render: function (_, r) {
+					if (!rowVehicleSelected(r)) {
+						return React.createElement(Input, { value: '', disabled: true, placeholder: placeholderSelectVehicle });
+					}
+					return React.createElement(Input, {
+						value: fmtNum2Display(r.endElectricKwh),
+						disabled: true,
+						addonAfter: 'kWh'
+					});
 				}
 			}
 		];
 	}, []);

+	var requirementModalState = useState(false);
+	var requirementModalOpen = requirementModalState[0];
+	var setRequirementModalOpen = requirementModalState[1];
+
+	var requirementDocContent = [
+		'一个「数字化资产ONEOS运管平台」中的「异动管理」「查看」模块',
+		'#面包屑：运维管理-车辆业务-异动管理-查看',
+		'页面布局与字段与「异动管理-结束异动」一致；另含「审批状态」只读展示。',
+		'所有表单项、表格单元均为禁用只读，仅供查询展示。',
+		'',
+		'1.异动情况：异动开始/预计结束日期、异动目的地、目的地名称、异动类型、预计异动里程、审批状态、异动结束时间、备注 — 全部只读。',
+		'2.车辆信息：与结束异动表列一致（含异动结束里程/氢量/电量）；仅展示单辆车（表格 1 行）— 全部只读；无新增行与删除。',
+		'3.底部仅「返回」按钮，返回异动管理列表（原型）。'
+	].join('\n');
+
 	return React.createElement(App, null,
 		React.createElement('div', { style: layoutStyle },
 			React.createElement('div', { style: { display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 16, flexWrap: 'wrap', gap: 8 } },
@@ -243,7 +285,7 @@ const Component = function () {
 							style: controlStyle,
 							showTime: { format: 'HH:mm' },
 							format: 'YYYY-MM-DD HH:mm',
-							value: form.startTime,
+							value: movementReadonly.startTime,
 							disabled: true,
 							inputReadOnly: true
 						})
@@ -254,59 +296,67 @@ const Component = function () {
 							style: controlStyle,
 							showTime: { format: 'HH:mm' },
 							format: 'YYYY-MM-DD HH:mm',
-							value: form.plannedEndTime,
+							value: movementReadonly.plannedEndTime,
 							disabled: true,
 							inputReadOnly: true
 						})
 					),
+					React.createElement('div', { style: formItemStyle },
+						React.createElement('div', { style: labelStyle }, '异动目的地'),
+						React.createElement(Select, {
+							style: controlStyle,
+							value: movementReadonly.destinationType,
+							options: destinationTypeOptions,
+							disabled: true
+						})
+					),
+					React.createElement('div', { style: formItemStyle },
+						React.createElement('div', { style: labelStyle }, destLabel),
+						React.createElement(Input, { value: movementReadonly.destinationName || '-', disabled: true })
+					),
+					React.createElement('div', { style: formItemStyle },
+						React.createElement('div', { style: labelStyle }, '异动类型'),
+						React.createElement(Select, {
+							style: controlStyle,
+							value: movementReadonly.changeType,
+							options: changeTypeOptions,
+							disabled: true
+						})
+					),
+					React.createElement('div', { style: formItemStyle },
+						React.createElement('div', { style: labelStyle }, '预计异动里程'),
+						React.createElement(Input, {
+							value: fmtPlannedMileage(movementReadonly.plannedMileageKm),
+							disabled: true,
+							addonAfter: 'km'
+						})
+					),
 					React.createElement('div', { style: formItemStyle },
 						React.createElement('div', { style: labelStyle }, '审批状态'),
 						React.createElement(Select, {
 							style: controlStyle,
-							value: form.approvalStatus,
+							value: movementReadonly.approvalStatus,
 							options: approvalStatusOptions,
 							disabled: true
 						})
 					),
-
+					React.createElement('div', { style: formItemStyle }),
+					React.createElement('div', { style: formItemStyle }),
 					React.createElement('div', { style: formItemStyle },
-						React.createElement('div', { style: labelStyle }, '异动目的地'),
-						React.createElement(Select, {
+						React.createElement('div', { style: labelStyle }, '异动结束时间'),
+						React.createElement(DatePicker, {
 							style: controlStyle,
-							value: form.destinationType,
-							options: destinationTypeOptions,
-							disabled: true
-						})
-					),
-					React.createElement('div', { style: formItemStyle },
-						React.createElement('div', { style: labelStyle }, destinationNameLabel),
-						destinationNameNode
-					),
-					React.createElement('div', { style: formItemStyle },
-						React.createElement('div', { style: labelStyle }, '异动类型'),
-						React.createElement(Select, {
-							style: controlStyle,
-							value: form.changeType,
-							options: changeTypeOptions,
-							disabled: true
-						})
-					),
-
-					React.createElement('div', { style: formItemStyle },
-						React.createElement('div', { style: labelStyle }, '预计异动里程'),
-						React.createElement(Input, {
-							value: form.plannedMileageKm || '-',
+							showTime: { format: 'HH:mm' },
+							format: 'YYYY-MM-DD HH:mm',
+							value: movementReadonly.endDateTime,
 							disabled: true,
-							addonAfter: 'km'
+							inputReadOnly: true
 						})
 					),
-					React.createElement('div', { style: formItemStyle }),
-					React.createElement('div', { style: formItemStyle }),
-
 					React.createElement('div', { style: Object.assign({}, formItemStyle, { gridColumn: 'span 3' }) },
 						React.createElement('div', { style: labelStyle }, '备注'),
 						React.createElement(Input.TextArea, {
-							value: form.remark || '-',
+							value: movementReadonly.remark || '-',
 							disabled: true,
 							autoSize: { minRows: 3, maxRows: 6 }
 						})
@@ -321,11 +371,10 @@ const Component = function () {
 					dataSource: vehicles,
 					size: 'small',
 					pagination: false,
-					scroll: { x: 1180 }
+					scroll: { x: 1780 }
 				})
 			),

-			React.createElement('div', { style: { height: 56 } }),
 			React.createElement('div', {
 				style: {
 					position: 'fixed',
--- a/web端/运维管理/车辆业务/异动管理-结束异动.jsx
+++ b/web端/运维管理/车辆业务/异动管理-结束异动.jsx
@@ -0,0 +1,464 @@
+// 【重要】必须使用 const Component 作为组件变量名
+// 运维管理 - 车辆业务 - 异动管理 - 结束异动
+
+const Component = function () {
+	var useState = React.useState;
+	var useMemo = React.useMemo;
+	var useCallback = React.useCallback;
+
+	var antd = window.antd;
+	var App = antd.App;
+	var Breadcrumb = antd.Breadcrumb;
+	var Card = antd.Card;
+	var Button = antd.Button;
+	var Input = antd.Input;
+	var Select = antd.Select;
+	var DatePicker = antd.DatePicker;
+	var Table = antd.Table;
+	var Modal = antd.Modal;
+	var message = antd.message;
+
+	function getInitialDateTime(str) {
+		try {
+			if (window.dayjs) return window.dayjs(str);
+		} catch (e1) {}
+		try {
+			if (window.moment) return window.moment(str, 'YYYY-MM-DD HH:mm');
+		} catch (e2) {}
+		return null;
+	}
+
+	function fmtPlannedMileage(v) {
+		if (v == null || v === '') return '-';
+		var n = Number(v);
+		if (isNaN(n)) return String(v);
+		return n.toFixed(2);
+	}
+
+	function fmtNum2Display(v) {
+		if (v === null || v === undefined || v === '') return '';
+		var n = Number(v);
+		if (isNaN(n)) return String(v);
+		return n.toFixed(2);
+	}
+
+	function toFixed2Input(v) {
+		var s = String(v === null || v === undefined ? '' : v);
+		s = s.replace(/[^\d.]/g, '');
+		var firstDot = s.indexOf('.');
+		if (firstDot >= 0) {
+			s = s.slice(0, firstDot + 1) + s.slice(firstDot + 1).replace(/\./g, '');
+		}
+		if (firstDot >= 0) {
+			var a = s.split('.');
+			s = a[0] + '.' + (a[1] || '').slice(0, 2);
+		}
+		return s;
+	}
+
+	var layoutStyle = { padding: '16px 24px', background: '#f5f5f5', minHeight: '100vh', paddingBottom: 80 };
+	var labelStyle = { marginBottom: 6, fontSize: 14, color: 'rgba(0,0,0,0.65)' };
+	var formItemStyle = { marginBottom: 12 };
+	var controlStyle = { width: '100%' };
+	var placeholderSelectVehicle = '请先选择车辆';
+	var requiredMarkStyle = { color: '#ff4d4f', marginRight: 4, fontFamily: 'SimSun, sans-serif' };
+
+	function labelWithRequired(text, required) {
+		return React.createElement('div', { style: labelStyle },
+			required ? React.createElement('span', { style: requiredMarkStyle }, '*') : null,
+			text
+		);
+	}
+
+	var destinationTypeOptions = useMemo(function () {
+		return [
+			{ value: '停车场', label: '停车场' },
+			{ value: '维修站', label: '维修站' },
+			{ value: '其他', label: '其他' }
+		];
+	}, []);
+
+	var changeTypeOptions = useMemo(function () {
+		return [
+			{ value: '维修', label: '维修' },
+			{ value: '保养', label: '保养' },
+			{ value: '年审', label: '年审' },
+			{ value: '其他', label: '其他' }
+		];
+	}, []);
+
+	// 原型：从列表跳转带入的异动与车辆（联调时由路由/接口填充）
+	var movementReadonly = useMemo(function () {
+		return {
+			startTime: getInitialDateTime('2026-02-24 08:15'),
+			plannedEndTime: getInitialDateTime('2026-02-24 12:00'),
+			destinationType: '其他',
+			destinationName: '车管所检测线',
+			changeType: '年审',
+			plannedMileageKm: '8.20',
+			remark: '年审上线检测，预计半日完成。'
+		};
+	}, []);
+
+	// 车辆信息：结束里程/氢量/电量可编辑（规则同新增页开始三项）
+	var vehiclesState = useState([
+		{
+			id: 1,
+			plateNo: '粤B11111',
+			vehicleType: '轿车',
+			brand: '比亚迪',
+			model: '汉',
+			departParking: '南山科技园停车场',
+			startMileageKm: '8020.50',
+			startHydrogen: '55.00',
+			h2Unit: '%',
+			startElectricKwh: '62.10',
+			endMileageKm: '8055.20',
+			endHydrogen: '52.30',
+			endElectricKwh: '58.88'
+		}
+	]);
+	var vehicles = vehiclesState[0];
+	var setVehicles = vehiclesState[1];
+
+	var updateVehicleRow = useCallback(function (index, patch) {
+		setVehicles(function (prev) {
+			var list = prev.slice();
+			var cur = list[index] || {};
+			list[index] = Object.assign({}, cur, patch);
+			return list;
+		});
+	}, []);
+
+	// 1.7 异动结束时间：必填，YYYY-MM-DD HH:mm
+	var endDateTimeState = useState(getInitialDateTime('2026-02-24 11:30'));
+	var endDateTime = endDateTimeState[0];
+	var setEndDateTime = endDateTimeState[1];
+
+	function rowVehicleSelected(r) {
+		return !!(r && String(r.plateNo || '').trim());
+	}
+
+	var vehicleColumns = useMemo(function () {
+		return [
+			{
+				title: '车牌号',
+				key: 'plateNo',
+				width: 140,
+				fixed: 'left',
+				render: function (_, r) {
+					return React.createElement(Input, { value: r.plateNo || '-', disabled: true });
+				}
+			},
+			{
+				title: '车辆类型',
+				key: 'vehicleType',
+				width: 120,
+				render: function (_, r) {
+					return React.createElement(Input, { value: rowVehicleSelected(r) ? (r.vehicleType || '-') : '请先选择车辆', disabled: true });
+				}
+			},
+			{
+				title: '品牌',
+				key: 'brand',
+				width: 100,
+				render: function (_, r) {
+					return React.createElement(Input, { value: rowVehicleSelected(r) ? (r.brand || '-') : '请先选择车辆', disabled: true });
+				}
+			},
+			{
+				title: '型号',
+				key: 'model',
+				width: 120,
+				render: function (_, r) {
+					return React.createElement(Input, { value: rowVehicleSelected(r) ? (r.model || '-') : '请先选择车辆', disabled: true });
+				}
+			},
+			{
+				title: '出发停车场',
+				key: 'departParking',
+				width: 160,
+				render: function (_, r) {
+					return React.createElement(Input, { value: rowVehicleSelected(r) ? (r.departParking || '-') : '请先选择车辆', disabled: true });
+				}
+			},
+			{
+				title: '异动开始里程',
+				key: 'startMileageKm',
+				width: 160,
+				render: function (_, r) {
+					return React.createElement(Input, {
+						value: rowVehicleSelected(r) ? fmtNum2Display(r.startMileageKm) : '',
+						disabled: true,
+						addonAfter: 'km',
+						placeholder: rowVehicleSelected(r) ? undefined : placeholderSelectVehicle
+					});
+				}
+			},
+			{
+				title: React.createElement('span', null, React.createElement('span', { style: requiredMarkStyle }, '*'), '异动结束里程'),
+				key: 'endMileageKm',
+				width: 160,
+				render: function (_, r, index) {
+					if (!rowVehicleSelected(r)) {
+						return React.createElement(Input, { value: '', disabled: true, placeholder: placeholderSelectVehicle });
+					}
+					return React.createElement(Input, {
+						value: r.endMileageKm,
+						onChange: function (e) { updateVehicleRow(index, { endMileageKm: toFixed2Input(e.target.value) }); },
+						placeholder: '0.00',
+						addonAfter: 'km'
+					});
+				}
+			},
+			{
+				title: '异动开始氢量',
+				key: 'startHydrogen',
+				width: 150,
+				render: function (_, r) {
+					var unit = rowVehicleSelected(r) ? (r.h2Unit || '') : '';
+					return React.createElement(Input, Object.assign({
+						value: rowVehicleSelected(r) ? fmtNum2Display(r.startHydrogen) : '',
+						disabled: true,
+						placeholder: rowVehicleSelected(r) ? undefined : placeholderSelectVehicle
+					}, unit ? { addonAfter: unit } : {}));
+				}
+			},
+			{
+				title: React.createElement('span', null, React.createElement('span', { style: requiredMarkStyle }, '*'), '异动结束氢量'),
+				key: 'endHydrogen',
+				width: 150,
+				render: function (_, r, index) {
+					if (!rowVehicleSelected(r)) {
+						return React.createElement(Input, { value: '', disabled: true, placeholder: placeholderSelectVehicle });
+					}
+					var unit = r.h2Unit || '';
+					return React.createElement(Input, Object.assign({
+						value: r.endHydrogen,
+						onChange: function (e) { updateVehicleRow(index, { endHydrogen: toFixed2Input(e.target.value) }); },
+						placeholder: '0.00'
+					}, unit ? { addonAfter: unit } : {}));
+				}
+			},
+			{
+				title: '异动开始电量',
+				key: 'startElectricKwh',
+				width: 150,
+				render: function (_, r) {
+					return React.createElement(Input, {
+						value: rowVehicleSelected(r) ? fmtNum2Display(r.startElectricKwh) : '',
+						disabled: true,
+						addonAfter: 'kWh',
+						placeholder: rowVehicleSelected(r) ? undefined : placeholderSelectVehicle
+					});
+				}
+			},
+			{
+				title: React.createElement('span', null, React.createElement('span', { style: requiredMarkStyle }, '*'), '异动结束电量'),
+				key: 'endElectricKwh',
+				width: 150,
+				render: function (_, r, index) {
+					if (!rowVehicleSelected(r)) {
+						return React.createElement(Input, { value: '', disabled: true, placeholder: placeholderSelectVehicle });
+					}
+					return React.createElement(Input, {
+						value: r.endElectricKwh,
+						onChange: function (e) { updateVehicleRow(index, { endElectricKwh: toFixed2Input(e.target.value) }); },
+						placeholder: '0.00',
+						addonAfter: 'kWh'
+					});
+				}
+			}
+		];
+	}, [updateVehicleRow]);
+
+	var requirementModalState = useState(false);
+	var requirementModalOpen = requirementModalState[0];
+	var setRequirementModalOpen = requirementModalState[1];
+
+	var requirementDocContent = [
+		'一个「数字化资产ONEOS运管平台」中的「异动管理」「结束异动」模块',
+		'#面包屑：运维管理-车辆业务-异动管理-结束异动',
+		'',
+		'1.异动情况：',
+		'1.1.异动开始日期：显示异动开始日期：YYYY-MM-DD HH:MM；',
+		'1.2.异动预计结束日期：显示异动预计结束日期，格式为：YYYY-MM-DD HH:MM；',
+		'1.3.异动目的地：显示异动目的地，包括：停车场、维修站、其他；',
+		'1.4.目的地名称：显示目的地名称，包括：停车场名称、维修站名称、其他；',
+		'1.5.异动类型：显示异动类型，包括：维修、保养、年审、其他；',
+		'1.6.预计异动里程：显示预计异动里程，支持2位小数，后缀为km；',
+		'1.7.异动结束时间：必填项，日期选择器，格式为：YYYY-MM-DD HH:MM；',
+		'1.8.备注：显示备注信息；',
+		'',
+		'2.车辆信息：',
+		'2.1.车牌号：输入框（禁用），显示车牌号；',
+		'2.2.车辆类型：根据所选车辆类型自动反写，默认提示为请先选择车辆；',
+		'2.3.品牌：根据所选车辆品牌自动反写，默认提示为请先选择车辆；',
+		'2.4.型号：根据所选车辆型号自动反写，默认提示为请先选择车辆；',
+		'2.5.出发停车场：根据所选车辆出发时停车场自动反写，默认提示为请先选择车辆；',
+		'2.6.异动开始里程：输入框（禁用），精确至2位小数，后缀为km；',
+		'2.7.异动结束里程：必填项，输入框，精确至2位小数，后缀为km；',
+		'2.8.异动开始氢量：输入框（禁用），精确至2位小数，后缀为%或MPa，根据所选车辆型号中获取；',
+		'2.9.异动结束氢量：必填项，输入框，精确至2位小数，后缀为%或MPa，根据所选车辆型号中获取；',
+		'2.10.异动开始电量：输入框（禁用），精确至2位小数，后缀为kWh；',
+		'2.11.异动结束电量：必填项，输入框，精确至2位小数，后缀为kWh；',
+		'2.12.异动结束电量：必填项，输入框，精确至2位小数，后缀为kWh；',
+		'',
+		'3.底部为提交、取消；',
+		'3.1.提交：提交进行必填项校验，提交成功后计入历史记录；',
+		'3.2.取消：点击取消，返回列表；'
+	].join('\n');
+
+	var handleSubmit = useCallback(function () {
+		if (!endDateTime) {
+			message.error('请选择异动结束时间');
+			return;
+		}
+		for (var i = 0; i < (vehicles || []).length; i++) {
+			var r = vehicles[i];
+			if (!rowVehicleSelected(r)) continue;
+			if (!String(r.endMileageKm || '').trim()) {
+				message.error('请填写异动结束里程');
+				return;
+			}
+			if (!String(r.endHydrogen || '').trim()) {
+				message.error('请填写异动结束氢量');
+				return;
+			}
+			if (!String(r.endElectricKwh || '').trim()) {
+				message.error('请填写异动结束电量');
+				return;
+			}
+		}
+		message.success('提交成功（原型，联调时对接结束异动接口）');
+	}, [vehicles, endDateTime]);
+
+	var handleCancel = useCallback(function () {
+		message.info('取消并返回（原型，联调时路由返回上一页）');
+	}, []);
+
+	var destLabel = movementReadonly.destinationType === '维修站' ? '维修站名称' : (movementReadonly.destinationType === '停车场' ? '停车场名称' : '目的地名称');
+
+	return React.createElement(App, null,
+		React.createElement('div', { style: layoutStyle },
+			React.createElement('div', { style: { display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 16, flexWrap: 'wrap', gap: 8 } },
+				React.createElement(Breadcrumb, { items: [{ title: '运维管理' }, { title: '车辆业务' }, { title: '异动管理' }, { title: '结束异动' }] }),
+				React.createElement(Button, { type: 'link', style: { padding: 0 }, onClick: function () { setRequirementModalOpen(true); } }, '查看需求说明')
+			),
+
+			React.createElement(Modal, {
+				title: '需求说明',
+				open: requirementModalOpen,
+				onCancel: function () { setRequirementModalOpen(false); },
+				width: 720,
+				footer: React.createElement(Button, { onClick: function () { setRequirementModalOpen(false); } }, '关闭'),
+				bodyStyle: { maxHeight: '70vh', overflow: 'auto' }
+			}, React.createElement('div', { style: { whiteSpace: 'pre-wrap', fontSize: 13, lineHeight: 1.6, color: 'rgba(0,0,0,0.85)' } }, requirementDocContent)),
+
+			React.createElement(Card, { title: '异动情况', style: { marginBottom: 16 } },
+				React.createElement('div', { style: { display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: '16px 24px', alignItems: 'start' } },
+					React.createElement('div', { style: formItemStyle },
+						React.createElement('div', { style: labelStyle }, '异动开始日期'),
+						React.createElement(DatePicker, {
+							style: controlStyle,
+							showTime: { format: 'HH:mm' },
+							format: 'YYYY-MM-DD HH:mm',
+							value: movementReadonly.startTime,
+							disabled: true,
+							inputReadOnly: true
+						})
+					),
+					React.createElement('div', { style: formItemStyle },
+						React.createElement('div', { style: labelStyle }, '异动预计结束日期'),
+						React.createElement(DatePicker, {
+							style: controlStyle,
+							showTime: { format: 'HH:mm' },
+							format: 'YYYY-MM-DD HH:mm',
+							value: movementReadonly.plannedEndTime,
+							disabled: true,
+							inputReadOnly: true
+						})
+					),
+					React.createElement('div', { style: formItemStyle },
+						React.createElement('div', { style: labelStyle }, '异动目的地'),
+						React.createElement(Select, {
+							style: controlStyle,
+							value: movementReadonly.destinationType,
+							options: destinationTypeOptions,
+							disabled: true
+						})
+					),
+					React.createElement('div', { style: formItemStyle },
+						React.createElement('div', { style: labelStyle }, destLabel),
+						React.createElement(Input, { value: movementReadonly.destinationName || '-', disabled: true })
+					),
+					React.createElement('div', { style: formItemStyle },
+						React.createElement('div', { style: labelStyle }, '异动类型'),
+						React.createElement(Select, {
+							style: controlStyle,
+							value: movementReadonly.changeType,
+							options: changeTypeOptions,
+							disabled: true
+						})
+					),
+					React.createElement('div', { style: formItemStyle },
+						React.createElement('div', { style: labelStyle }, '预计异动里程'),
+						React.createElement(Input, {
+							value: fmtPlannedMileage(movementReadonly.plannedMileageKm),
+							disabled: true,
+							addonAfter: 'km'
+						})
+					),
+					React.createElement('div', { style: formItemStyle },
+						labelWithRequired('异动结束时间', true),
+						React.createElement(DatePicker, {
+							style: controlStyle,
+							showTime: { format: 'HH:mm' },
+							format: 'YYYY-MM-DD HH:mm',
+							value: endDateTime,
+							onChange: function (d) { setEndDateTime(d); },
+							placeholder: '请选择异动结束时间'
+						})
+					),
+					React.createElement('div', { style: Object.assign({}, formItemStyle, { gridColumn: 'span 3' }) },
+						React.createElement('div', { style: labelStyle }, '备注'),
+						React.createElement(Input.TextArea, {
+							value: movementReadonly.remark || '-',
+							disabled: true,
+							autoSize: { minRows: 3, maxRows: 6 }
+						})
+					)
+				)
+			),
+
+			React.createElement(Card, { title: '车辆信息', style: { marginBottom: 16 } },
+				React.createElement(Table, {
+					rowKey: 'id',
+					columns: vehicleColumns,
+					dataSource: vehicles,
+					size: 'small',
+					pagination: false,
+					scroll: { x: 1780 }
+				})
+			),
+
+			React.createElement('div', {
+				style: {
+					position: 'fixed',
+					left: 0,
+					right: 0,
+					bottom: 0,
+					padding: '12px 24px',
+					background: '#fff',
+					borderTop: '1px solid #f0f0f0',
+					display: 'flex',
+					gap: 8,
+					zIndex: 10
+				}
+			},
+				React.createElement(Button, { type: 'primary', onClick: handleSubmit }, '提交'),
+				React.createElement(Button, { onClick: handleCancel }, '取消')
+			)
+		)
+	);
+};
--- a/web端/运维管理/车辆业务/异动管理-编辑.jsx
+++ b/web端/运维管理/车辆业务/异动管理-编辑.jsx
@@ -0,0 +1,564 @@
+// 【重要】必须使用 const Component 作为组件变量名
+// 运维管理 - 车辆业务 - 异动管理 - 编辑
+
+const Component = function () {
+	var useState = React.useState;
+	var useMemo = React.useMemo;
+	var useCallback = React.useCallback;
+
+	var antd = window.antd;
+	var App = antd.App;
+	var Breadcrumb = antd.Breadcrumb;
+	var Card = antd.Card;
+	var Button = antd.Button;
+	var Input = antd.Input;
+	var Select = antd.Select;
+	var DatePicker = antd.DatePicker;
+	var Table = antd.Table;
+	var Modal = antd.Modal;
+	var message = antd.message;
+
+	function filterOption(input, option) {
+		var label = (option && (option.label || option.children)) || '';
+		return String(label).toLowerCase().indexOf(String(input || '').toLowerCase()) >= 0;
+	}
+
+	function toFixed2Input(v) {
+		var s = String(v === null || v === undefined ? '' : v);
+		s = s.replace(/[^\d.]/g, '');
+		var firstDot = s.indexOf('.');
+		if (firstDot >= 0) {
+			s = s.slice(0, firstDot + 1) + s.slice(firstDot + 1).replace(/\./g, '');
+		}
+		if (firstDot >= 0) {
+			var a = s.split('.');
+			s = a[0] + '.' + (a[1] || '').slice(0, 2);
+		}
+		return s;
+	}
+
+	var layoutStyle = { padding: '16px 24px', background: '#f5f5f5', minHeight: '100vh' };
+	var labelStyle = { marginBottom: 6, fontSize: 14, color: 'rgba(0,0,0,0.65)' };
+	var formItemStyle = { marginBottom: 12 };
+	var controlStyle = { width: '100%' };
+	var reqStarStyle = { color: '#ff4d4f', marginRight: 4 };
+	var reqStar = React.createElement('span', { style: reqStarStyle }, '*');
+
+	// 车辆表（用于车牌选择与反写）
+	var vehicleDb = useMemo(function () {
+		return [
+			{ plateNo: '粤A12345', vehicleType: '厢式货车', brand: '东风', model: 'DFH1180', departParking: '天河智慧停车场', h2Unit: 'MPa' },
+			{ plateNo: '粤B11111', vehicleType: '轿车', brand: '比亚迪', model: '汉', departParking: '南山科技园停车场', h2Unit: '%' },
+			{ plateNo: '浙A11111', vehicleType: 'SUV', brand: '小鹏', model: 'P7', departParking: '西湖景区停车场', h2Unit: '%' },
+			{ plateNo: '浙B22222', vehicleType: '轿车', brand: '蔚来', model: 'ET5', departParking: '宁波江北停车场', h2Unit: 'MPa' },
+			{ plateNo: '沪A30003', vehicleType: '厢式货车', brand: '福田', model: 'BJ1180', departParking: '张江园区停车场', h2Unit: 'MPa' }
+		];
+	}, []);
+
+	var plateOptions = useMemo(function () {
+		return vehicleDb.map(function (v) { return { value: v.plateNo, label: v.plateNo }; });
+	}, [vehicleDb]);
+
+	var destinationTypeOptions = useMemo(function () {
+		return [
+			{ value: '停车场', label: '停车场' },
+			{ value: '维修站', label: '维修站' },
+			{ value: '其他', label: '其他' }
+		];
+	}, []);
+
+	var destinationParkingOptions = useMemo(function () {
+		return [
+			{ value: '天河智慧停车场', label: '天河智慧停车场' },
+			{ value: '南山科技园停车场', label: '南山科技园停车场' },
+			{ value: '西湖景区停车场', label: '西湖景区停车场' },
+			{ value: '宁波江北停车场', label: '宁波江北停车场' },
+			{ value: '张江园区停车场', label: '张江园区停车场' }
+		];
+	}, []);
+
+	var destinationRepairOptions = useMemo(function () {
+		return [
+			{ value: '杭州拱墅维修站', label: '杭州拱墅维修站' },
+			{ value: '广州天河维修站', label: '广州天河维修站' },
+			{ value: '上海浦东维修站', label: '上海浦东维修站' }
+		];
+	}, []);
+
+	var changeTypeOptions = useMemo(function () {
+		return [
+			{ value: '维修', label: '维修' },
+			{ value: '保养', label: '保养' },
+			{ value: '年审', label: '年审' },
+			{ value: '其他', label: '其他' }
+		];
+	}, []);
+
+	var requirementModalState = useState(false);
+	var requirementModalOpen = requirementModalState[0];
+	var setRequirementModalOpen = requirementModalState[1];
+
+	var requirementDocContent = [
+		'一个「数字化资产ONEOS运管平台」中的「异动管理」「编辑」模块',
+		'#面包屑：运维管理-车辆业务-异动管理-编辑',
+		'',
+		'1.异动情况；',
+		'1.1.异动开始日期：必填项，日期选择器，格式为：YYYY-MM-DD HH:MM；',
+		'1.2.异动预计结束日期：必填项，日期选择器，格式为：YYYY-MM-DD HH:MM；',
+		'1.3.异动目的地：必填项，选择器，选项为：停车场、维修站、其他；',
+		'2.4.目的地名称：必填项，如异动目的地为停车场，则此处为停车场（选择器），如异动目的地为维修站，则此处为维修站（选择器），如异动目的地为其他，则此处为输入框（自定义输入）；',
+		'2.5.异动类型：必填项，选择器，选项为：维修、保养、年审、其他；',
+		'2.6.预计异动里程：输入框，支持2位小数输入，后缀为km；',
+		'2.7.备注：文本域，支持自定义输入；',
+		'',
+		'2.车辆信息：',
+		'2.1.车牌号：显示车牌号，支持输入框模糊搜索下拉匹配对应选项；',
+		'2.2.车辆类型：根据所选车辆类型自动反写，默认提示为请先选择车辆；',
+		'2.3.品牌：根据所选车辆品牌自动反写，默认提示为请先选择车辆；',
+		'2.4.型号：根据所选车辆型号自动反写，默认提示为请先选择车辆；',
+		'2.5.出发停车场：根据所选车辆出发时停车场自动反写，默认提示为请先选择车辆；',
+		'2.6.异动开始里程：必填项，输入框，精确至2位小数，后缀为km；',
+		'2.7.异动开始氢量：必填项，输入框，精确至2位小数，后缀为%或MPa，根据所选车辆型号中获取；',
+		'2.8.异动开始电量：必填项，输入框，精确至2位小数，后缀为kWh；',
+		'2.9.操作：删除；',
+		'2.10.新增一行：铺满整行；',
+		'',
+		'3.底部为提交审核、保存、取消；'
+	].join('\n');
+
+	var formState = useState({
+		startTime: null,
+		plannedEndTime: null,
+		destinationType: undefined,
+		destinationName: undefined,
+		destinationNameOther: '',
+		changeType: undefined,
+		plannedMileageKm: '',
+		remark: ''
+	});
+	var form = formState[0];
+	var setForm = formState[1];
+
+	var errorsState = useState({});
+	var errors = errorsState[0];
+	var setErrors = errorsState[1];
+
+	var rowIdRef = React.useRef(2);
+	var vehiclesState = useState([
+		{
+			id: 1,
+			plateNo: undefined,
+			vehicleType: '',
+			brand: '',
+			model: '',
+			departParking: '',
+			h2Unit: '',
+			startMileageKm: '',
+			startHydrogen: '',
+			startElectricKwh: ''
+		}
+	]);
+	var vehicles = vehiclesState[0];
+	var setVehicles = vehiclesState[1];
+
+	var updateForm = useCallback(function (patch) {
+		setForm(function (p) { return Object.assign({}, p, patch); });
+	}, []);
+
+	var updateRow = useCallback(function (index, patch) {
+		setVehicles(function (prev) {
+			var list = prev.slice();
+			var cur = list[index] || {};
+			list[index] = Object.assign({}, cur, patch);
+			return list;
+		});
+	}, []);
+
+	var handlePlateChange = useCallback(function (index, plateNo) {
+		var v = vehicleDb.find(function (x) { return x.plateNo === plateNo; });
+		updateRow(index, {
+			plateNo: plateNo,
+			vehicleType: v ? v.vehicleType : '',
+			brand: v ? v.brand : '',
+			model: v ? v.model : '',
+			departParking: v ? v.departParking : '',
+			h2Unit: v ? v.h2Unit : ''
+		});
+	}, [vehicleDb, updateRow]);
+
+	var addRow = useCallback(function () {
+		setVehicles(function (prev) {
+			return prev.concat([{
+				id: rowIdRef.current++,
+				plateNo: undefined,
+				vehicleType: '',
+				brand: '',
+				model: '',
+				departParking: '',
+				h2Unit: '',
+				startMileageKm: '',
+				startHydrogen: '',
+				startElectricKwh: ''
+			}]);
+		});
+	}, []);
+
+	var removeRow = useCallback(function (index) {
+		setVehicles(function (prev) {
+			var list = prev.slice();
+			list.splice(index, 1);
+			if (list.length === 0) {
+				return [{
+					id: rowIdRef.current++,
+					plateNo: undefined,
+					vehicleType: '',
+					brand: '',
+					model: '',
+					departParking: '',
+					h2Unit: '',
+					startMileageKm: '',
+					startHydrogen: '',
+					startElectricKwh: ''
+				}];
+			}
+			return list;
+		});
+	}, []);
+
+	function validate() {
+		var e = {};
+		if (!form.startTime) e.startTime = '请选择异动开始日期';
+		if (!form.plannedEndTime) e.plannedEndTime = '请选择异动预计结束日期';
+		if (!form.destinationType) e.destinationType = '请选择异动目的地';
+		if (form.destinationType === '其他') {
+			if (!String(form.destinationNameOther || '').trim()) e.destinationName = '请输入目的地名称';
+		} else {
+			if (!form.destinationName) e.destinationName = '请选择目的地名称';
+		}
+		if (!form.changeType) e.changeType = '请选择异动类型';
+
+		var effectiveRows = (vehicles || []).filter(function (r) { return r && String(r.plateNo || '').trim(); });
+		if (effectiveRows.length === 0) e.vehicleList = '请至少选择一辆车';
+
+		for (var i = 0; i < (vehicles || []).length; i++) {
+			var r = vehicles[i] || {};
+			if (!String(r.plateNo || '').trim()) continue;
+			if (!String(r.startMileageKm || '').trim()) e['row_' + i + '_startMileageKm'] = '请输入异动开始里程';
+			if (!String(r.startHydrogen || '').trim()) e['row_' + i + '_startHydrogen'] = '请输入异动开始氢量';
+			if (!String(r.startElectricKwh || '').trim()) e['row_' + i + '_startElectricKwh'] = '请输入异动开始电量';
+		}
+
+		setErrors(e);
+		return Object.keys(e).length === 0;
+	}
+
+	var handleSubmitAudit = useCallback(function () {
+		if (!validate()) {
+			message.error('请完善必填项后再提交');
+			return;
+		}
+		Modal.confirm({
+			title: '确认提交审核？',
+			content: '提交后将进入审批流程（原型）。',
+			okText: '提交审核',
+			cancelText: '取消',
+			onOk: function () {
+				message.success('已提交审核（原型）');
+			}
+		});
+	}, [form, vehicles]);
+
+	var handleSave = useCallback(function () {
+		message.info('已保存（原型，不做校验）');
+	}, []);
+
+	var handleCancel = useCallback(function () {
+		Modal.confirm({
+			title: '是否确认取消',
+			content: '取消将会丢失所有已填写内容，是否确认？',
+			okText: '确认',
+			cancelText: '取消',
+			onOk: function () {
+				message.info('返回异动管理列表页（原型）');
+			}
+		});
+	}, []);
+
+	// 目的地名称控件：随异动目的地变化
+	var destinationNameLabel = form.destinationType === '维修站' ? '维修站' : (form.destinationType === '停车场' ? '停车场' : '目的地名称');
+	var destinationNameNode = (function () {
+		if (form.destinationType === '其他') {
+			return React.createElement(Input, {
+				placeholder: '请输入目的地名称',
+				value: form.destinationNameOther,
+				onChange: function (e) { updateForm({ destinationNameOther: e.target.value }); },
+				status: errors.destinationName ? 'error' : undefined
+			});
+		}
+		var opts = form.destinationType === '维修站' ? destinationRepairOptions : destinationParkingOptions;
+		return React.createElement(Select, {
+			placeholder: '请选择' + destinationNameLabel,
+			style: controlStyle,
+			value: form.destinationName,
+			onChange: function (v) { updateForm({ destinationName: v }); },
+			allowClear: true,
+			showSearch: true,
+			options: opts,
+			filterOption: filterOption,
+			status: errors.destinationName ? 'error' : undefined,
+			disabled: !form.destinationType
+		});
+	})();
+
+	var vehicleColumns = useMemo(function () {
+		return [
+			{
+				title: React.createElement('span', null, reqStar, '车牌号'),
+				key: 'plateNo',
+				width: 140,
+				render: function (_, r, index) {
+					return React.createElement(Select, {
+						placeholder: '请输入或选择车牌号',
+						style: { width: '100%' },
+						value: r.plateNo,
+						onChange: function (v) { handlePlateChange(index, v); },
+						allowClear: true,
+						showSearch: true,
+						options: plateOptions,
+						filterOption: filterOption,
+						status: errors.vehicleList ? 'error' : undefined
+					});
+				}
+			},
+			{
+				title: '车辆类型',
+				key: 'vehicleType',
+				width: 120,
+				render: function (_, r) {
+					return React.createElement(Input, { value: r.vehicleType ? r.vehicleType : '请先选择车辆', disabled: true });
+				}
+			},
+			{
+				title: '品牌',
+				key: 'brand',
+				width: 100,
+				render: function (_, r) {
+					return React.createElement(Input, { value: r.brand ? r.brand : '请先选择车辆', disabled: true });
+				}
+			},
+			{
+				title: '型号',
+				key: 'model',
+				width: 120,
+				render: function (_, r) {
+					return React.createElement(Input, { value: r.model ? r.model : '请先选择车辆', disabled: true });
+				}
+			},
+			{
+				title: '出发停车场',
+				key: 'departParking',
+				width: 160,
+				render: function (_, r) {
+					return React.createElement(Input, { value: r.departParking ? r.departParking : '请先选择车辆', disabled: true });
+				}
+			},
+			{
+				title: React.createElement('span', null, reqStar, '异动开始里程'),
+				key: 'startMileageKm',
+				width: 160,
+				render: function (_, r, index) {
+					var k = 'row_' + index + '_startMileageKm';
+					return React.createElement(Input, {
+						value: r.startMileageKm,
+						onChange: function (e) { updateRow(index, { startMileageKm: toFixed2Input(e.target.value) }); },
+						placeholder: '0.00',
+						addonAfter: 'km',
+						status: errors[k] ? 'error' : undefined
+					});
+				}
+			},
+			{
+				title: React.createElement('span', null, reqStar, '异动开始氢量'),
+				key: 'startHydrogen',
+				width: 150,
+				render: function (_, r, index) {
+					var k = 'row_' + index + '_startHydrogen';
+					var unit = r.h2Unit || '%/MPa';
+					return React.createElement(Input, {
+						value: r.startHydrogen,
+						onChange: function (e) { updateRow(index, { startHydrogen: toFixed2Input(e.target.value) }); },
+						placeholder: '0.00',
+						addonAfter: unit,
+						status: errors[k] ? 'error' : undefined
+					});
+				}
+			},
+			{
+				title: React.createElement('span', null, reqStar, '异动开始电量'),
+				key: 'startElectricKwh',
+				width: 150,
+				render: function (_, r, index) {
+					var k = 'row_' + index + '_startElectricKwh';
+					return React.createElement(Input, {
+						value: r.startElectricKwh,
+						onChange: function (e) { updateRow(index, { startElectricKwh: toFixed2Input(e.target.value) }); },
+						placeholder: '0.00',
+						addonAfter: 'kWh',
+						status: errors[k] ? 'error' : undefined
+					});
+				}
+			},
+			{
+				title: '操作',
+				key: 'action',
+				width: 80,
+				fixed: 'right',
+				render: function (_, __, index) {
+					return React.createElement(Button, { type: 'link', danger: true, size: 'small', onClick: function () { removeRow(index); } }, '删除');
+				}
+			}
+		];
+	}, [plateOptions, errors, handlePlateChange, updateRow, removeRow]);
+
+	return React.createElement(App, null,
+		React.createElement('div', { style: layoutStyle },
+			React.createElement('div', { style: { display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 16, flexWrap: 'wrap', gap: 8 } },
+				React.createElement(Breadcrumb, { items: [{ title: '运维管理' }, { title: '车辆业务' }, { title: '异动管理' }, { title: '编辑' }] }),
+				React.createElement(Button, { type: 'link', style: { padding: 0 }, onClick: function () { setRequirementModalOpen(true); } }, '查看需求说明')
+			),
+
+			React.createElement(Modal, {
+				title: '需求说明',
+				open: requirementModalOpen,
+				onCancel: function () { setRequirementModalOpen(false); },
+				width: 720,
+				footer: React.createElement(Button, { onClick: function () { setRequirementModalOpen(false); } }, '关闭'),
+				bodyStyle: { maxHeight: '70vh', overflow: 'auto' }
+			}, React.createElement('div', { style: { whiteSpace: 'pre-wrap', fontSize: 13, lineHeight: 1.6, color: 'rgba(0,0,0,0.85)' } }, requirementDocContent)),
+
+			React.createElement(Card, { title: '异动情况', style: { marginBottom: 16 } },
+				React.createElement('div', { style: { display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: '16px 24px', alignItems: 'start' } },
+					React.createElement('div', { style: formItemStyle },
+						React.createElement('div', { style: labelStyle }, reqStar, '异动开始日期'),
+						React.createElement(DatePicker, {
+							style: controlStyle,
+							showTime: { format: 'HH:mm' },
+							format: 'YYYY-MM-DD HH:mm',
+							placeholder: '请选择异动开始日期',
+							value: form.startTime,
+							onChange: function (v) { updateForm({ startTime: v }); },
+							status: errors.startTime ? 'error' : undefined
+						}),
+						errors.startTime ? React.createElement('div', { style: { marginTop: 4, color: '#ff4d4f', fontSize: 12 } }, errors.startTime) : null
+					),
+					React.createElement('div', { style: formItemStyle },
+						React.createElement('div', { style: labelStyle }, reqStar, '异动预计结束日期'),
+						React.createElement(DatePicker, {
+							style: controlStyle,
+							showTime: { format: 'HH:mm' },
+							format: 'YYYY-MM-DD HH:mm',
+							placeholder: '请选择异动预计结束日期',
+							value: form.plannedEndTime,
+							onChange: function (v) { updateForm({ plannedEndTime: v }); },
+							status: errors.plannedEndTime ? 'error' : undefined
+						}),
+						errors.plannedEndTime ? React.createElement('div', { style: { marginTop: 4, color: '#ff4d4f', fontSize: 12 } }, errors.plannedEndTime) : null
+					),
+					React.createElement('div', { style: formItemStyle },
+						React.createElement('div', { style: labelStyle }, reqStar, '异动目的地'),
+						React.createElement(Select, {
+							placeholder: '请选择异动目的地',
+							style: controlStyle,
+							value: form.destinationType,
+							onChange: function (v) {
+								setForm(function (p) {
+									return Object.assign({}, p, {
+										destinationType: v,
+										destinationName: undefined,
+										destinationNameOther: ''
+									});
+								});
+							},
+							allowClear: true,
+							options: destinationTypeOptions,
+							status: errors.destinationType ? 'error' : undefined
+						}),
+						errors.destinationType ? React.createElement('div', { style: { marginTop: 4, color: '#ff4d4f', fontSize: 12 } }, errors.destinationType) : null
+					),
+
+					React.createElement('div', { style: formItemStyle },
+						React.createElement('div', { style: labelStyle }, reqStar, destinationNameLabel),
+						destinationNameNode,
+						errors.destinationName ? React.createElement('div', { style: { marginTop: 4, color: '#ff4d4f', fontSize: 12 } }, errors.destinationName) : null
+					),
+					React.createElement('div', { style: formItemStyle },
+						React.createElement('div', { style: labelStyle }, reqStar, '异动类型'),
+						React.createElement(Select, {
+							placeholder: '请选择异动类型',
+							style: controlStyle,
+							value: form.changeType,
+							onChange: function (v) { updateForm({ changeType: v }); },
+							allowClear: true,
+							options: changeTypeOptions,
+							status: errors.changeType ? 'error' : undefined
+						}),
+						errors.changeType ? React.createElement('div', { style: { marginTop: 4, color: '#ff4d4f', fontSize: 12 } }, errors.changeType) : null
+					),
+					React.createElement('div', { style: formItemStyle },
+						React.createElement('div', { style: labelStyle }, '预计异动里程'),
+						React.createElement(Input, {
+							placeholder: '0.00',
+							value: form.plannedMileageKm,
+							onChange: function (e) { updateForm({ plannedMileageKm: toFixed2Input(e.target.value) }); },
+							addonAfter: 'km'
+						})
+					),
+
+					React.createElement('div', { style: Object.assign({}, formItemStyle, { gridColumn: 'span 3' }) },
+						React.createElement('div', { style: labelStyle }, '备注'),
+						React.createElement(Input.TextArea, {
+							placeholder: '请输入备注',
+							value: form.remark,
+							onChange: function (e) { updateForm({ remark: e.target.value }); },
+							autoSize: { minRows: 3, maxRows: 6 }
+						})
+					)
+				)
+			),
+
+			React.createElement(Card, { title: '车辆信息', style: { marginBottom: 16 } },
+				errors.vehicleList ? React.createElement('div', { style: { marginBottom: 12, color: '#ff4d4f', fontSize: 12 } }, errors.vehicleList) : null,
+				React.createElement(Table, {
+					rowKey: 'id',
+					columns: vehicleColumns,
+					dataSource: vehicles,
+					size: 'small',
+					pagination: false,
+					scroll: { x: 1250 }
+				}),
+				React.createElement(Button, { type: 'dashed', style: { marginTop: 12, width: '100%' }, onClick: addRow }, '新增一行')
+			),
+
+			React.createElement('div', { style: { height: 56 } }),
+			React.createElement('div', {
+				style: {
+					position: 'fixed',
+					left: 0,
+					right: 0,
+					bottom: 0,
+					padding: '12px 24px',
+					background: '#fff',
+					borderTop: '1px solid #f0f0f0',
+					display: 'flex',
+					gap: 8,
+					zIndex: 10
+				}
+			},
+				React.createElement(Button, { type: 'primary', onClick: handleSubmitAudit }, '提交审核'),
+				React.createElement(Button, { onClick: handleSave }, '保存'),
+				React.createElement(Button, { onClick: handleCancel }, '取消')
+			)
+		)
+	);
+};
+
--- a/web端/运维管理/车辆业务/异动管理.jsx
+++ b/web端/运维管理/车辆业务/异动管理.jsx
@@ -16,6 +16,7 @@ const Component = function () {
 	var DatePicker = antd.DatePicker;
 	var message = antd.message;
 	var Modal = antd.Modal;
+	var Tabs = antd.Tabs;

 	var RangePicker = DatePicker.RangePicker;

@@ -45,11 +46,18 @@ const Component = function () {
 		return s === '待提交' || s === '驳回' || s === '撤回';
 	}

+	/** 已结束异动（进入历史记录 Tab） */
+	function isMovementEnded(r) {
+		if (!r) return false;
+		return !!(r.movementEndedAt || r.movementEnded);
+	}
+
 	var layoutStyle = { padding: '16px 24px', background: '#f5f5f5', minHeight: '100vh' };
 	var filterLabelStyle = { marginBottom: 6, fontSize: 14, color: 'rgba(0,0,0,0.65)' };
 	var filterItemStyle = { marginBottom: 12 };
 	var filterControlStyle = { width: '100%' };
 	var tableSingleLineStyle = '.movement-list-table .ant-table-thead th,.movement-list-table .ant-table-tbody td{white-space:nowrap;}';
+	var movementTabsBarStyle = '.movement-list-tabs .ant-tabs-nav{align-items:center;margin-bottom:0;}';

 	var moveTypeOptions = useMemo(function () {
 		return [
@@ -98,6 +106,10 @@ const Component = function () {
 	var pageSize = pageSizeState[0];
 	var setPageSize = pageSizeState[1];

+	var listTabState = useState('ongoing');
+	var listTab = listTabState[0];
+	var setListTab = listTabState[1];
+
 	var requirementModalState = useState(false);
 	var requirementModalOpen = requirementModalState[0];
 	var setRequirementModalOpen = requirementModalState[1];
@@ -112,7 +124,8 @@ const Component = function () {
 		'1.3.车牌号：选择器，输入框支持模糊搜索下拉匹配结果；',
 		'1.4.右侧为查询、重置按钮；',
 		'',
-		'2.列表：',
+		'2.列表：分为2个tab：进行中、历史记录；',
+		'#进行中：',
 		'2.1.异动开始日期：显示车辆异动开始日期，格式为：YYYY-MM-DD HH:MM；',
 		'2.2.异动预计结束日期：显示车辆异动结束日期，格式为：YYYY-MM-DD HH:MM；',
 		'2.3.审批状态：分为:待提交、审批中、审批完成、驳回、撤回；',
@@ -123,12 +136,34 @@ const Component = function () {
 		'2.8.车牌号：显示车牌号；',
 		'2.9.异动开始里程（km）：显示车辆异动开始里程；',
 		'2.10.异动开始电量（kWh）：显示车辆异动开始电量；',
-		'2.11.异动开始氢量；显示车辆异动开始氢量，带单位，单位根据型号参数表获取，分为%和MPa；',
+		'2.11.异动开始氢量：显示车辆异动开始氢量，带单位，单位根据型号参数表获取，分为%和MPa；',
 		'2.12.创建人：显示发起人姓名；',
 		'2.13.创建时间：显示发起时间，格式为：YYYY-MM-DD HH:MM；',
-		'2.14.操作：查看、编辑；',
+		'2.14.操作：查看、编辑、撤回、结束异动；',
 		'     2.14.1.查看：点击跳转异动-查看页；',
 		'     2.14.2.编辑：点击跳转异动-编辑页，只有审批状态为：待提交、驳回、撤回时显示编辑；',
+		'     2.14.3.撤回：点击进行二次确认，确认后撤回该数据并将审批状态修改为：撤回；',
+		'     2.14.4.结束异动：当审批状态为审批完成后显示结束异动，点击跳转异动-结束异动页；',
+		'',
+		'#历史记录：',
+		'3.1.异动开始日期：显示车辆异动开始日期，格式为：YYYY-MM-DD HH:MM；',
+		'3.2.异动预计结束日期：显示车辆异动结束日期，格式为：YYYY-MM-DD HH:MM；',
+		'3.3.审批状态：分为:待提交、审批中、审批完成、驳回、撤回；',
+		'3.4.异动目的地：显示车辆异动目的地，选项包括：停车场、维修站、其他；',
+		'3.5.目的地名称：显示车辆异动目的地名称；',
+		'3.6.异动类型：显示车辆异动类型，选项包括：维修、保养、年审、其他；',
+		'3.7.预计异动里程（km）：显示车辆预计异动里程；',
+		'3.8.车牌号：显示车牌号；',
+		'3.9.异动开始里程（km）：显示车辆异动开始里程；',
+		'3.10.异动结束里程（km）：显示车辆异动结束里程；',
+		'3.11.异动开始电量（kWh）：显示车辆异动开始电量；',
+		'3.12.异动结束电量（kWh）：显示车辆异动结束电量；',
+		'3.13.异动开始氢量：显示车辆异动开始氢量，带单位，单位根据型号参数表获取，分为%和MPa；',
+		'3.14.异动结束氢量：显示车辆异动结束氢量，带单位，单位根据型号参数表获取，分为%和MPa；',
+		'3.15.创建人：显示发起人姓名；',
+		'3.16.创建时间：显示发起时间，格式为：YYYY-MM-DD HH:MM；',
+		'3.17.操作：查看；',
+		'     3.17.1.查看：点击跳转异动-查看页；',
 		'',
 		'3.列表右下方为分页功能，支持单页显示条数设置；'
 	].join('\n');
@@ -304,10 +339,202 @@ const Component = function () {
 				h2Unit: '%',
 				creatorName: '陈静',
 				createTime: '2026-03-01 05:40'
+			},
+			// 历史记录样例（已结束异动，共 10 条）
+			{
+				id: 'mv-h-01',
+				moveStartAt: '2025-11-08 08:00',
+				moveEndExpectedAt: '2025-11-10 18:00',
+				approvalStatus: '审批完成',
+				destination: '维修站',
+				destinationName: '广州白云氢能维保中心',
+				moveType: '维修',
+				expectedMileageKm: '28.5',
+				plateNo: '粤A12345',
+				startMileageKm: '14800.00',
+				startElectricKwh: '70.00',
+				startHydrogen: '30.00',
+				h2Unit: 'MPa',
+				creatorName: '张明',
+				createTime: '2025-11-07 16:20',
+				movementEndedAt: '2025-11-10 19:30',
+				movementEnded: true
+			},
+			{
+				id: 'mv-h-02',
+				moveStartAt: '2025-11-15 09:30',
+				moveEndExpectedAt: '2025-11-15 17:00',
+				approvalStatus: '审批完成',
+				destination: '停车场',
+				destinationName: '深圳湾口岸停车场',
+				moveType: '保养',
+				expectedMileageKm: '15.2',
+				plateNo: '粤B11111',
+				startMileageKm: '9200.50',
+				startElectricKwh: '58.30',
+				startHydrogen: '62.00',
+				h2Unit: '%',
+				creatorName: '王芳',
+				createTime: '2025-11-14 14:00',
+				movementEndedAt: '2025-11-15 17:45',
+				movementEnded: true
+			},
+			{
+				id: 'mv-h-03',
+				moveStartAt: '2025-12-02 07:15',
+				moveEndExpectedAt: '2025-12-02 12:30',
+				approvalStatus: '审批完成',
+				destination: '其他',
+				destinationName: '杭州车管所年检线',
+				moveType: '年审',
+				expectedMileageKm: '9.8',
+				plateNo: '浙A11111',
+				startMileageKm: '11550.20',
+				startElectricKwh: '64.00',
+				startHydrogen: '48.50',
+				h2Unit: '%',
+				creatorName: '李华',
+				createTime: '2025-12-01 18:10',
+				movementEndedAt: '2025-12-02 13:20',
+				movementEnded: true
+			},
+			{
+				id: 'mv-h-04',
+				moveStartAt: '2025-12-18 13:00',
+				moveEndExpectedAt: '2025-12-20 09:00',
+				approvalStatus: '审批完成',
+				destination: '维修站',
+				destinationName: '上海嘉定氢能服务站',
+				moveType: '维修',
+				expectedMileageKm: '42.0',
+				plateNo: '沪A30003',
+				startMileageKm: '10100.00',
+				startElectricKwh: '66.50',
+				startHydrogen: '27.20',
+				h2Unit: 'MPa',
+				creatorName: '赵强',
+				createTime: '2025-12-17 11:30',
+				movementEndedAt: '2025-12-20 10:15',
+				movementEnded: true
+			},
+			{
+				id: 'mv-h-05',
+				moveStartAt: '2026-01-05 10:20',
+				moveEndExpectedAt: '2026-01-06 16:00',
+				approvalStatus: '审批完成',
+				destination: '停车场',
+				destinationName: '南京南站枢纽停车场',
+				moveType: '其他',
+				expectedMileageKm: '19.6',
+				plateNo: '苏E88888',
+				startMileageKm: '22800.00',
+				startElectricKwh: '45.80',
+				startHydrogen: '50.00',
+				h2Unit: '%',
+				creatorName: '陈静',
+				createTime: '2026-01-04 09:45',
+				movementEndedAt: '2026-01-06 17:00',
+				movementEnded: true
+			},
+			{
+				id: 'mv-h-06',
+				moveStartAt: '2026-01-12 08:45',
+				moveEndExpectedAt: '2026-01-12 15:30',
+				approvalStatus: '审批完成',
+				destination: '维修站',
+				destinationName: '北京亦庄氢能维修站',
+				moveType: '保养',
+				expectedMileageKm: '11.3',
+				plateNo: '京A66666',
+				startMileageKm: '8750.00',
+				startElectricKwh: '72.00',
+				startHydrogen: '32.00',
+				h2Unit: 'MPa',
+				creatorName: '王芳',
+				createTime: '2026-01-11 17:00',
+				movementEndedAt: '2026-01-12 16:10',
+				movementEnded: true
+			},
+			{
+				id: 'mv-h-07',
+				moveStartAt: '2026-01-22 14:00',
+				moveEndExpectedAt: '2026-01-23 11:00',
+				approvalStatus: '审批完成',
+				destination: '其他',
+				destinationName: '重庆两江新区检测站',
+				moveType: '年审',
+				expectedMileageKm: '33.0',
+				plateNo: '渝A99999',
+				startMileageKm: '17200.00',
+				startElectricKwh: '49.20',
+				startHydrogen: '59.00',
+				h2Unit: '%',
+				creatorName: '李华',
+				createTime: '2026-01-22 08:30',
+				movementEndedAt: '2026-01-23 12:00',
+				movementEnded: true
+			},
+			{
+				id: 'mv-h-08',
+				moveStartAt: '2026-02-01 09:00',
+				moveEndExpectedAt: '2026-02-03 18:00',
+				approvalStatus: '审批完成',
+				destination: '维修站',
+				destinationName: '成都龙泉驿维保基地',
+				moveType: '维修',
+				expectedMileageKm: '55.8',
+				plateNo: '川A77777',
+				startMileageKm: '33800.00',
+				startElectricKwh: '35.00',
+				startHydrogen: '25.00',
+				h2Unit: 'MPa',
+				creatorName: '赵强',
+				createTime: '2026-01-31 16:40',
+				movementEndedAt: '2026-02-03 19:00',
+				movementEnded: true
+			},
+			{
+				id: 'mv-h-09',
+				moveStartAt: '2026-02-10 06:30',
+				moveEndExpectedAt: '2026-02-10 14:00',
+				approvalStatus: '审批完成',
+				destination: '停车场',
+				destinationName: '青岛前湾港停车场',
+				moveType: '保养',
+				expectedMileageKm: '12.5',
+				plateNo: '鲁B55555',
+				startMileageKm: '11050.00',
+				startElectricKwh: '63.80',
+				startHydrogen: '61.00',
+				h2Unit: '%',
+				creatorName: '陈静',
+				createTime: '2026-02-09 20:15',
+				movementEndedAt: '2026-02-10 15:30',
+				movementEnded: true
+			},
+			{
+				id: 'mv-h-10',
+				moveStartAt: '2026-02-18 11:20',
+				moveEndExpectedAt: '2026-02-19 10:00',
+				approvalStatus: '审批完成',
+				destination: '其他',
+				destinationName: '宁波北仑港区临时点',
+				moveType: '其他',
+				expectedMileageKm: '24.0',
+				plateNo: '浙B22222',
+				startMileageKm: '14950.00',
+				startElectricKwh: '57.00',
+				startHydrogen: '23.50',
+				h2Unit: 'MPa',
+				creatorName: '张明',
+				createTime: '2026-02-17 15:00',
+				movementEndedAt: '2026-02-19 11:20',
+				movementEnded: true
 			}
 		];
 	});
 	var list = listState[0];
+	var setList = listState[1];

 	function matchRange(valStr, range) {
 		if (!range || !range[0] || !range[1]) return true;
@@ -333,7 +560,13 @@ const Component = function () {
 		});
 	}

-	var filtered = useMemo(function () { return applyFilters(list); }, [list, applied]);
+	var filtered = useMemo(function () {
+		var base = applyFilters(list);
+		if (listTab === 'ongoing') {
+			return base.filter(function (r) { return !isMovementEnded(r); });
+		}
+		return base.filter(function (r) { return isMovementEnded(r); });
+	}, [list, applied, listTab]);

 	var paged = useMemo(function () {
 		var start = (page - 1) * pageSize;
@@ -352,6 +585,118 @@ const Component = function () {
 		setPage(1);
 	}, []);

+	var handleAdd = useCallback(function () {
+		message.info('新增异动（原型，联调时跳转新建页或打开表单）');
+	}, []);
+
+	function fmtNowYMDHM() {
+		var d = new Date();
+		var p2 = function (n) { return n < 10 ? '0' + n : '' + n; };
+		return d.getFullYear() + '-' + p2(d.getMonth() + 1) + '-' + p2(d.getDate()) + ' ' + p2(d.getHours()) + ':' + p2(d.getMinutes());
+	}
+
+	var handleEndMovement = useCallback(function (recordId) {
+		Modal.confirm({
+			title: '确认结束异动',
+			content: '确定结束该条异动吗？确认后将归档至「历史记录」，仅可查看。',
+			okText: '确认结束',
+			cancelText: '取消',
+			onOk: function () {
+				var endedAt = fmtNowYMDHM();
+				setList(function (prev) {
+					return (prev || []).map(function (row) {
+						if (row.id !== recordId) return row;
+						return Object.assign({}, row, { movementEndedAt: endedAt, movementEnded: true });
+					});
+				});
+				message.success('结束异动成功');
+			}
+		});
+	}, []);
+
+	var handleWithdrawMovement = useCallback(function (recordId) {
+		Modal.confirm({
+			title: '确认撤回',
+			content: '确定要撤回该条异动申请吗？确认后审批状态将变更为「撤回」，可再次编辑后提交。',
+			okText: '确认撤回',
+			cancelText: '取消',
+			onOk: function () {
+				setList(function (prev) {
+					return (prev || []).map(function (row) {
+						if (row.id !== recordId) return row;
+						return Object.assign({}, row, { approvalStatus: '撤回' });
+					});
+				});
+				message.success('撤回成功');
+			}
+		});
+	}, []);
+
+	function formatStartHydrogenForExport(r) {
+		var u = r.h2Unit || '';
+		if (r.startHydrogen == null || r.startHydrogen === '') return '-';
+		return String(r.startHydrogen) + (u ? ' ' + u : '');
+	}
+
+	var handleExport = useCallback(function () {
+		var rows = filtered;
+		if (!rows || rows.length === 0) {
+			message.warning('当前无数据可导出');
+			return;
+		}
+		var escapeCsv = function (v) {
+			var s = v == null ? '' : String(v);
+			if (s.indexOf(',') !== -1 || s.indexOf('"') !== -1 || s.indexOf('\n') !== -1 || s.indexOf('\r') !== -1) {
+				return '"' + s.replace(/"/g, '""') + '"';
+			}
+			return s;
+		};
+		var headers = [
+			'异动开始日期',
+			'异动预计结束日期',
+			'审批状态',
+			'异动目的地',
+			'目的地名称',
+			'异动类型',
+			'预计异动里程（km）',
+			'车牌号',
+			'异动开始里程（km）',
+			'异动开始电量（kWh）',
+			'异动开始氢量',
+			'创建人',
+			'创建时间'
+		];
+		var rowToCells = function (r) {
+			return [
+				fmtYMDHM(r.moveStartAt),
+				fmtYMDHM(r.moveEndExpectedAt),
+				r.approvalStatus,
+				r.destination,
+				r.destinationName,
+				r.moveType,
+				r.expectedMileageKm,
+				r.plateNo,
+				r.startMileageKm,
+				r.startElectricKwh,
+				formatStartHydrogenForExport(r),
+				r.creatorName,
+				fmtYMDHM(r.createTime)
+			];
+		};
+		var csv = headers.map(escapeCsv).join(',') + '\n';
+		rows.forEach(function (r) {
+			csv += rowToCells(r).map(escapeCsv).join(',') + '\n';
+		});
+		var blob = new Blob(['\ufeff' + csv], { type: 'text/csv;charset=utf-8' });
+		var url = URL.createObjectURL(blob);
+		var a = document.createElement('a');
+		a.href = url;
+		a.download = '异动管理导出_' + (listTab === 'ongoing' ? '进行中' : '历史记录') + '_' + new Date().getTime() + '.csv';
+		a.click();
+		URL.revokeObjectURL(url);
+		message.success('已导出 ' + rows.length + ' 条记录');
+	}, [filtered, listTab]);
+
 	var columns = useMemo(function () {
 		return [
 			{ title: '异动开始日期', dataIndex: 'moveStartAt', key: 'moveStartAt', width: 160, render: function (v) { return fmtYMDHM(v); } },
@@ -378,12 +723,29 @@ const Component = function () {
 			{
 				title: '操作',
 				key: 'action',
-				width: 120,
+				width: 200,
 				fixed: 'right',
 				render: function (_, r) {
 					var nodes = [
 						React.createElement(Button, { key: 'view', type: 'link', size: 'small', onClick: function () { message.info('跳转异动-查看页（原型）ID：' + r.id); } }, '查看')
 					];
+					if (String(r.approvalStatus || '') === '审批中') {
+						nodes.push(React.createElement(Button, {
+							key: 'withdraw',
+							type: 'link',
+							size: 'small',
+							danger: true,
+							onClick: function () { handleWithdrawMovement(r.id); }
+						}, '撤回'));
+					}
+					if (String(r.approvalStatus || '') === '审批完成' && !isMovementEnded(r)) {
+						nodes.push(React.createElement(Button, {
+							key: 'end',
+							type: 'link',
+							size: 'small',
+							onClick: function () { handleEndMovement(r.id); }
+						}, '结束异动'));
+					}
 					if (canShowMovementEdit(r.approvalStatus)) {
 						nodes.push(React.createElement(Button, { key: 'edit', type: 'link', size: 'small', onClick: function () { message.info('跳转异动-编辑页（原型）ID：' + r.id); } }, '编辑'));
 					}
@@ -391,7 +753,7 @@ const Component = function () {
 				}
 			}
 		];
-	}, []);
+	}, [handleWithdrawMovement, handleEndMovement]);

 	return React.createElement(App, null,
 		React.createElement('div', { style: layoutStyle },
@@ -455,25 +817,73 @@ const Component = function () {
 			),

 			React.createElement(Card, null,
-				React.createElement('style', null, tableSingleLineStyle),
-				React.createElement('div', { className: 'movement-list-table' },
-					React.createElement(Table, {
-						rowKey: 'id',
-						columns: columns,
-						dataSource: paged,
-						scroll: { x: 2240 },
-						size: 'small',
-						pagination: {
-							current: page,
-							pageSize: pageSize,
-							total: filtered.length,
-							showSizeChanger: true,
-							showQuickJumper: true,
-							showTotal: function (t) { return '共 ' + t + ' 条'; },
-							onChange: function (pg, ps) { setPage(pg); if (ps) setPageSize(ps); }
+				React.createElement('style', null, movementTabsBarStyle),
+				React.createElement(Tabs, {
+					className: 'movement-list-tabs',
+					activeKey: listTab,
+					onChange: function (k) {
+						setListTab(k);
+						setPage(1);
+					},
+					destroyInactiveTabPane: true,
+					tabBarExtraContent: React.createElement('div', { style: { display: 'flex', alignItems: 'center', gap: 8 } },
+						React.createElement(Button, { type: 'primary', onClick: handleAdd }, '新增'),
+						React.createElement(Button, { onClick: handleExport }, '导出')
+					),
+					tabBarStyle: { marginBottom: 0 },
+					items: [
+						{
+							key: 'ongoing',
+							label: '进行中',
+							children: React.createElement('div', { style: { marginTop: 16 } },
+								React.createElement('style', null, tableSingleLineStyle),
+								React.createElement('div', { className: 'movement-list-table' },
+									React.createElement(Table, {
+										rowKey: 'id',
+										columns: columns,
+										dataSource: paged,
+										scroll: { x: 2240 },
+										size: 'small',
+										pagination: {
+											current: page,
+											pageSize: pageSize,
+											total: filtered.length,
+											showSizeChanger: true,
+											showQuickJumper: true,
+											showTotal: function (t) { return '共 ' + t + ' 条'; },
+											onChange: function (pg, ps) { setPage(pg); if (ps) setPageSize(ps); }
+										}
+									})
+								)
+							)
+						},
+						{
+							key: 'history',
+							label: '历史记录',
+							children: React.createElement('div', { style: { marginTop: 16 } },
+								React.createElement('style', null, tableSingleLineStyle),
+								React.createElement('div', { className: 'movement-list-table' },
+									React.createElement(Table, {
+										rowKey: 'id',
+										columns: columns,
+										dataSource: paged,
+										scroll: { x: 2240 },
+										size: 'small',
+										pagination: {
+											current: page,
+											pageSize: pageSize,
+											total: filtered.length,
+											showSizeChanger: true,
+											showQuickJumper: true,
+											showTotal: function (t) { return '共 ' + t + ' 条'; },
+											onChange: function (pg, ps) { setPage(pg); if (ps) setPageSize(ps); }
+										}
+									})
+								)
+							)
 						}
-					})
-				)
+					]
+				})
 			)
 		)
 	);