wangmian/ONE-OS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
Made-with: Cursor
This commit is contained in:
王冕
2026-03-21 13:19:27 +08:00
parent c75d1656e3
commit 49d9e3675d
9 changed files with 2812 additions and 157 deletions
Download Patch File Download Diff File Expand all files Collapse all files

311
web端/运维管理/车辆业务/异动管理-查看.jsx
View File

@@ -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',