web端: 车辆/运维模块更新
- 车辆管理、车辆管理-查看：详情 Tab（后装设备/租赁/事故/违章/异动/调拨/证照管理等） - 车辆业务：异动管理列表与查看页、调拨相关页面与需求说明 - 需求说明文档补充 Made-with: Cursor
This commit is contained in:
王冕
347
web端/运维管理/车辆业务/异动管理-查看.jsx
Normal file
347
web端/运维管理/车辆业务/异动管理-查看.jsx
Normal file
@@ -0,0 +1,347 @@
|
||||
// 【重要】必须使用 const Component 作为组件变量名
|
||||
// 运维管理 - 车辆业务 - 异动管理 - 查看（只读）
|
||||
|
||||
const Component = function () {
|
||||
var useState = React.useState;
|
||||
var useMemo = React.useMemo;
|
||||
|
||||
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;
|
||||
}
|
||||
|
||||
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 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 approvalStatusOptions = useMemo(function () {
|
||||
return [
|
||||
{ value: '待提交', label: '待提交' },
|
||||
{ value: '审批中', label: '审批中' },
|
||||
{ value: '审批完成', label: '审批完成' },
|
||||
{ value: '驳回', label: '驳回' },
|
||||
{ value: '撤回', label: '撤回' }
|
||||
];
|
||||
}, []);
|
||||
|
||||
// 原型：详情接口返回的只读数据（字段与「异动管理.新增」一致，并含审批状态）
|
||||
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 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'
|
||||
}
|
||||
];
|
||||
|
||||
var destinationNameLabel = form.destinationType === '维修站' ? '维修站' : (form.destinationType === '停车场' ? '停车场' : '目的地名称');
|
||||
|
||||
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 vehicleColumns = useMemo(function () {
|
||||
return [
|
||||
{
|
||||
title: '车牌号',
|
||||
key: 'plateNo',
|
||||
width: 140,
|
||||
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: r.vehicleType || '-', disabled: true });
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '品牌',
|
||||
key: 'brand',
|
||||
width: 100,
|
||||
render: function (_, r) {
|
||||
return React.createElement(Input, { value: r.brand || '-', disabled: true });
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '型号',
|
||||
key: 'model',
|
||||
width: 120,
|
||||
render: function (_, r) {
|
||||
return React.createElement(Input, { value: r.model || '-', disabled: true });
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '出发停车场',
|
||||
key: 'departParking',
|
||||
width: 160,
|
||||
render: function (_, r) {
|
||||
return React.createElement(Input, { value: r.departParking || '-', disabled: true });
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '异动开始里程',
|
||||
key: 'startMileageKm',
|
||||
width: 160,
|
||||
render: function (_, r) {
|
||||
return React.createElement(Input, { value: r.startMileageKm || '-', disabled: true, addonAfter: 'km' });
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '异动开始氢量',
|
||||
key: 'startHydrogen',
|
||||
width: 150,
|
||||
render: function (_, r) {
|
||||
var unit = r.h2Unit || '';
|
||||
return React.createElement(Input, { value: r.startHydrogen || '-', disabled: true, addonAfter: unit || '-' });
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '异动开始电量',
|
||||
key: 'startElectricKwh',
|
||||
width: 150,
|
||||
render: function (_, r) {
|
||||
return React.createElement(Input, { value: r.startElectricKwh || '-', disabled: true, addonAfter: 'kWh' });
|
||||
}
|
||||
}
|
||||
];
|
||||
}, []);
|
||||
|
||||
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: form.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: form.plannedEndTime,
|
||||
disabled: true,
|
||||
inputReadOnly: true
|
||||
})
|
||||
),
|
||||
React.createElement('div', { style: formItemStyle },
|
||||
React.createElement('div', { style: labelStyle }, '审批状态'),
|
||||
React.createElement(Select, {
|
||||
style: controlStyle,
|
||||
value: form.approvalStatus,
|
||||
options: approvalStatusOptions,
|
||||
disabled: true
|
||||
})
|
||||
),
|
||||
|
||||
React.createElement('div', { style: formItemStyle },
|
||||
React.createElement('div', { style: labelStyle }, '异动目的地'),
|
||||
React.createElement(Select, {
|
||||
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 || '-',
|
||||
disabled: true,
|
||||
addonAfter: 'km'
|
||||
})
|
||||
),
|
||||
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 || '-',
|
||||
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: 1180 }
|
||||
})
|
||||
),
|
||||
|
||||
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, { onClick: function () { message.info('返回异动管理列表（原型）'); } }, '返回')
|
||||
)
|
||||
)
|
||||
);
|
||||
};
|
||||
Reference in New Issue
Block a user