c75d1656e3
- 车辆管理、车辆管理-查看：详情 Tab（后装设备/租赁/事故/违章/异动/调拨/证照管理等） - 车辆业务：异动管理列表与查看页、调拨相关页面与需求说明 - 需求说明文档补充 Made-with: Cursor
303 lines
10 KiB
JavaScript
303 lines
10 KiB
JavaScript
// 【重要】必须使用 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 Cascader = antd.Cascader;
|
|
var Table = antd.Table;
|
|
var Modal = antd.Modal;
|
|
var message = antd.message;
|
|
|
|
function getInitialTransferDate() {
|
|
try {
|
|
if (window.dayjs) return window.dayjs('2026-02-20');
|
|
} catch (e1) {}
|
|
try {
|
|
if (window.moment) return window.moment('2026-02-20', 'YYYY-MM-DD');
|
|
} 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 regionOptions = useMemo(function () {
|
|
return [
|
|
{ value: 'zhejiang', label: '浙江省', children: [{ value: 'hangzhou', label: '杭州市' }, { value: 'ningbo', label: '宁波市' }, { value: 'jiaxing', label: '嘉兴市' }] },
|
|
{ value: 'shanghai', label: '上海市', children: [{ value: 'shanghai', label: '上海市' }] },
|
|
{ value: 'guangdong', label: '广东省', children: [{ value: 'guangzhou', label: '广州市' }, { value: 'shenzhen', label: '深圳市' }, { value: 'dongguan', label: '东莞市' }] }
|
|
];
|
|
}, []);
|
|
|
|
var userOptions = useMemo(function () {
|
|
return [
|
|
{ value: '张明', label: '张明' },
|
|
{ value: '王芳', label: '王芳' },
|
|
{ value: '李华', label: '李华' },
|
|
{ value: '赵强', label: '赵强' },
|
|
{ value: '陈静', label: '陈静' }
|
|
];
|
|
}, []);
|
|
|
|
var methodOptions = useMemo(function () {
|
|
return [
|
|
{ value: '第三方运输', label: '第三方运输' },
|
|
{ value: '司机驾驶', label: '司机驾驶' }
|
|
];
|
|
}, []);
|
|
|
|
// 原型：从详情接口拉取的只读数据（与新增/编辑字段一致）
|
|
var form = {
|
|
transferDate: getInitialTransferDate(),
|
|
departRegion: ['guangdong', 'guangzhou'],
|
|
receiveRegion: ['zhejiang', 'hangzhou'],
|
|
receivePerson: '王芳',
|
|
method: '第三方运输',
|
|
reason: '场站资源调整，车辆需从广州仓库调度至杭州项目点，保障项目运力。',
|
|
carrierName: '顺丰同城运输',
|
|
carrierPhone: '400-123-4567'
|
|
};
|
|
|
|
var vehicles = [
|
|
{
|
|
id: 1,
|
|
plateNo: '粤A12345',
|
|
vehicleType: '厢式货车',
|
|
brand: '东风',
|
|
model: 'DFH1180',
|
|
departParking: '天河智慧停车场',
|
|
departMileageKm: '15230.12',
|
|
departHydrogen: '28.30',
|
|
h2Unit: 'MPa',
|
|
departElectricKwh: '68.40'
|
|
},
|
|
{
|
|
id: 2,
|
|
plateNo: '浙A11111',
|
|
vehicleType: 'SUV',
|
|
brand: '小鹏',
|
|
model: 'P7',
|
|
departParking: '西湖景区停车场',
|
|
departMileageKm: '12010.00',
|
|
departHydrogen: '60.00',
|
|
h2Unit: '%',
|
|
departElectricKwh: '55.20'
|
|
}
|
|
];
|
|
|
|
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: 'departMileageKm',
|
|
width: 140,
|
|
render: function (_, r) {
|
|
return React.createElement(Input, { value: r.departMileageKm || '-', disabled: true, addonAfter: 'km' });
|
|
}
|
|
},
|
|
{
|
|
title: '出发氢量',
|
|
key: 'departHydrogen',
|
|
width: 140,
|
|
render: function (_, r) {
|
|
var unit = r.h2Unit || '';
|
|
return React.createElement(Input, { value: r.departHydrogen || '-', disabled: true, addonAfter: unit || '-' });
|
|
}
|
|
},
|
|
{
|
|
title: '出发电量',
|
|
key: 'departElectricKwh',
|
|
width: 150,
|
|
render: function (_, r) {
|
|
return React.createElement(Input, { value: r.departElectricKwh || '-', 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,
|
|
format: 'YYYY-MM-DD',
|
|
value: form.transferDate,
|
|
disabled: true,
|
|
inputReadOnly: true
|
|
})
|
|
),
|
|
React.createElement('div', { style: formItemStyle },
|
|
React.createElement('div', { style: labelStyle }, '出发区域'),
|
|
React.createElement(Cascader, {
|
|
style: controlStyle,
|
|
options: regionOptions,
|
|
value: form.departRegion,
|
|
disabled: true
|
|
})
|
|
),
|
|
React.createElement('div', { style: formItemStyle },
|
|
React.createElement('div', { style: labelStyle }, '接收区域'),
|
|
React.createElement(Cascader, {
|
|
style: controlStyle,
|
|
options: regionOptions,
|
|
value: form.receiveRegion,
|
|
disabled: true
|
|
})
|
|
),
|
|
|
|
React.createElement('div', { style: formItemStyle },
|
|
React.createElement('div', { style: labelStyle }, '接收人'),
|
|
React.createElement(Select, {
|
|
style: controlStyle,
|
|
value: form.receivePerson,
|
|
options: userOptions,
|
|
disabled: true
|
|
})
|
|
),
|
|
React.createElement('div', { style: formItemStyle },
|
|
React.createElement('div', { style: labelStyle }, '调拨方式'),
|
|
React.createElement(Select, {
|
|
style: controlStyle,
|
|
value: form.method,
|
|
options: methodOptions,
|
|
disabled: true
|
|
})
|
|
),
|
|
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.reason,
|
|
disabled: true,
|
|
autoSize: { minRows: 3, maxRows: 6 }
|
|
})
|
|
),
|
|
|
|
React.createElement('div', { style: formItemStyle },
|
|
React.createElement('div', { style: labelStyle }, '运输方名称'),
|
|
React.createElement(Input, { value: form.carrierName, disabled: true })
|
|
),
|
|
React.createElement('div', { style: formItemStyle },
|
|
React.createElement('div', { style: labelStyle }, '运输方联系方式'),
|
|
React.createElement(Input, { value: form.carrierPhone, disabled: true })
|
|
),
|
|
React.createElement('div', { style: formItemStyle })
|
|
)
|
|
),
|
|
|
|
React.createElement(Card, { title: '调拨车辆清单', style: { marginBottom: 16 } },
|
|
React.createElement(Table, {
|
|
rowKey: 'id',
|
|
columns: vehicleColumns,
|
|
dataSource: vehicles,
|
|
size: 'small',
|
|
pagination: false,
|
|
scroll: { x: 1020 }
|
|
})
|
|
),
|
|
|
|
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('返回调拨管理页（原型）'); } }, '返回')
|
|
)
|
|
)
|
|
);
|
|
};
|