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

feat(web): 同步当前原型页与工具配置改动

Browse Source 
统一提交当前工作区内的页面原型调整、新增运维相关页面以及本地工具配置目录变更，便于整体同步到远端环境继续联调与演示。

Made-with: Cursor
This commit is contained in:
王冕
2026-04-01 13:28:56 +08:00
parent 2a903b2cb4
commit 2018e34473
58 changed files with 13843 additions and 2137 deletions
Download Patch File Download Diff File Expand all files Collapse all files

490
web端/运维管理/车辆业务/调拨管理-查看.jsx
View File

@@ -4,298 +4,338 @@
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 Card = antd.Card;
var DatePicker = antd.DatePicker;
var Cascader = antd.Cascader;
var Table = antd.Table;
var Input = antd.Input;
var Modal = antd.Modal;
var Select = antd.Select;
var Table = antd.Table;
var message = antd.message;
function getInitialTransferDate() {
function filterOption(input, option) {
var label = (option && (option.label || option.children)) || '';
return String(label).toLowerCase().indexOf(String(input || '').toLowerCase()) >= 0;
}
function parseDateTime(s) {
var str = String(s || '').trim();
if (!str) return null;
try {
if (window.dayjs) return window.dayjs('2026-02-20');
if (window.dayjs) return window.dayjs(str);
} catch (e1) {}
try {
if (window.moment) return window.moment('2026-02-20', 'YYYY-MM-DD');
if (window.moment) return window.moment(str, ['YYYY-MM-DD HH:mm', 'YYYY-MM-DD HH:mm:ss', 'YYYY-MM-DD'], true);
} catch (e2) {}
return null;
}
var layoutStyle = { padding: '16px 24px', background: '#f5f5f5', minHeight: '100vh' };
function getMockSnapshot() {
return {
transferDateStr: '2026-03-31 10:30',
departRegionText: '广东省-广州市',
receiveRegionText: '浙江省-嘉兴市',
reason: '华南业务增量，需将车辆调至华东仓储节点保障运力。',
method: '司机运输',
transportLeader: '李建国',
transportPhone: '13800138000',
receivePersonName: '王芳',
receiveTimeStr: '2026-04-01 15:20',
receiveAreaType: '停车场',
receiveParkingName: '西湖景区停车场',
receiveAddress: '',
transferVehicles: [
{
id: 1,
brand: '小鹏',
model: 'P7',
plateNo: '浙A11111',
departMileageKm: '12010.00',
departHydrogen: '60.00',
h2Unit: '%',
departElectricKwh: '55.20',
departParking: '西湖景区停车场',
arriveMileageKm: '12110.20',
arriveHydrogen: '58.00',
arriveElectricKwh: '52.30'
},
{
id: 2,
brand: '蔚来',
model: 'ET5',
plateNo: '浙B22222',
departMileageKm: '15010.00',
departHydrogen: '22.10',
h2Unit: 'MPa',
departElectricKwh: '58.00',
departParking: '宁波江北停车场',
arriveMileageKm: '15120.00',
arriveHydrogen: '21.80',
arriveElectricKwh: '57.50'
}
]
};
}
var layoutStyle = { padding: '16px 24px 88px 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 readOnlyStyle = { background: 'rgba(0,0,0,0.02)' };
var regionOptions = useMemo(function () {
var snapshot = useMemo(function () { return getMockSnapshot(); }, []);
var parkingOptions = 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: '东莞市' }] }
{ value: '西湖景区停车场', label: '西湖景区停车场' },
{ value: '宁波江北停车场', label: '宁波江北停车场' },
{ value: '张江园区停车场', label: '张江园区停车场' },
{ value: '天河智慧停车场', 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运管平台」中的「调拨管理」「查看」模块',
'一个「数字化资产ONEOS运管平台」中的「调拨管理」「查看」模块（只读）',
'#面包屑：运维管理-车辆业务-调拨管理-查看',
'页面布局与字段与「调拨管理-新增」一致，所有表单项均为只读，仅供查询展示。',
'',
'1.调拨情况：调拨日期、出发/接收区域、接收人、调拨方式、调拨原因、运输方名称、运输方联系方式 — 全部禁用不可编辑。',
'2.调拨车辆清单：车牌号、车辆类型、品牌、型号、出发停车场、出发里程、出发氢量、出发电量 — 全部禁用；不提供新增行与删除操作。',
'3.底部仅提供「返回」按钮，返回调拨管理列表（原型）。'
'参照「调拨管理-接收信息-司机运输」页面结构生成查看页：',
'1.调拨情况（只读）',
'2.调拨信息（只读）',
'3.接收信息（只读）',
'4.调拨车辆清单（只读，包含到达时里程/氢量/电量）',
'5.底部按钮仅保留「返回」。'
].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' });
}
}
{ title: '品牌', key: 'brand', width: 120, render: function (_, r) { return React.createElement(Input, { value: r.brand || '', readOnly: true, style: readOnlyStyle }); } },
{ title: '型号', key: 'model', width: 120, render: function (_, r) { return React.createElement(Input, { value: r.model || '', readOnly: true, style: readOnlyStyle }); } },
{ title: '车牌号', key: 'plateNo', width: 140, render: function (_, r) { return React.createElement(Input, { value: r.plateNo || '', readOnly: true, style: readOnlyStyle }); } },
{ title: '出发停车场', key: 'departParking', width: 180, render: function (_, r) { return React.createElement(Input, { value: r.departParking || '', readOnly: true, style: readOnlyStyle }); } },
{ title: '出发时里程', key: 'departMileageKm', width: 130, render: function (_, r) { return React.createElement(Input, { value: r.departMileageKm || '', disabled: true, addonAfter: 'km' }); } },
{ title: '到达时里程', key: 'arriveMileageKm', width: 140, render: function (_, r) { return React.createElement(Input, { value: r.arriveMileageKm || '', disabled: true, addonAfter: 'km' }); } },
{ title: '出发时氢量', key: 'departHydrogen', width: 130, render: function (_, r) { return React.createElement(Input, { value: r.departHydrogen || '', disabled: true, addonAfter: r.h2Unit || '-' }); } },
{ title: '到达时氢量', key: 'arriveHydrogen', width: 140, render: function (_, r) { return React.createElement(Input, { value: r.arriveHydrogen || '', disabled: true, addonAfter: r.h2Unit || '%' }); } },
{ title: '出发时电量', key: 'departElectricKwh', width: 130, render: function (_, r) { return React.createElement(Input, { value: r.departElectricKwh || '', disabled: true, addonAfter: 'kWh' }); } },
{ title: '到达时电量', key: 'arriveElectricKwh', width: 140, render: function (_, r) { return React.createElement(Input, { value: r.arriveElectricKwh || '', 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 } },
var handleBack = useCallback(function () {
try {
if (window.history && window.history.length > 1) {
window.history.back();
return;
}
} catch (e) {}
message.info('返回调拨管理列表页（原型）');
}, []);
var receiveTimeVal = useMemo(function () { return parseDateTime(snapshot.receiveTimeStr); }, [snapshot.receiveTimeStr]);
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(
Modal,
{
title: '需求说明',
open: requirementModalOpen,
onCancel: function () { setRequirementModalOpen(false); },
width: 760,
footer: React.createElement(Button, { onClick: function () { setRequirementModalOpen(false); } }, '关闭'),
bodyStyle: { maxHeight: '70vh', overflow: 'auto' }
},
React.createElement('div', { style: { whiteSpace: 'pre-wrap', fontSize: 13, lineHeight: 1.65, 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(
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(Input, { value: snapshot.transferDateStr, readOnly: true, style: readOnlyStyle })
),
React.createElement(
'div',
{ style: formItemStyle },
React.createElement('div', { style: labelStyle }, '出发区域'),
React.createElement(Input, { value: snapshot.departRegionText, readOnly: true, style: readOnlyStyle })
),
React.createElement(
'div',
{ style: formItemStyle },
React.createElement('div', { style: labelStyle }, '接收区域'),
React.createElement(Input, { value: snapshot.receiveRegionText, readOnly: true, style: readOnlyStyle })
),
React.createElement(
'div',
{ style: Object.assign({}, formItemStyle, { gridColumn: 'span 3' }) },
React.createElement('div', { style: labelStyle }, '调拨原因'),
React.createElement(Input.TextArea, { value: snapshot.reason, readOnly: true, style: readOnlyStyle, autoSize: { minRows: 3, maxRows: 6 } })
)
)
),
React.createElement(
Card,
{ title: '调拨信息', style: { marginBottom: 16 } },
React.createElement(
'div',
{ style: { display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '16px 24px', alignItems: 'start' } },
React.createElement(
'div',
{ style: formItemStyle },
React.createElement('div', { style: labelStyle }, '调拨方式'),
React.createElement(Input, { value: snapshot.method, readOnly: true, style: readOnlyStyle })
),
React.createElement(
'div',
{ style: formItemStyle },
React.createElement('div', { style: labelStyle }, '运输负责人'),
React.createElement(Input, { value: snapshot.transportLeader, readOnly: true, style: readOnlyStyle })
),
React.createElement(
'div',
{ style: formItemStyle },
React.createElement('div', { style: labelStyle }, '运输方联系方式'),
React.createElement(Input, { value: snapshot.transportPhone, readOnly: true, style: readOnlyStyle })
),
React.createElement(
'div',
{ style: formItemStyle },
React.createElement('div', { style: labelStyle }, '接收人员'),
React.createElement(Input, { value: snapshot.receivePersonName, readOnly: true, style: readOnlyStyle })
)
)
),
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,
format: 'YYYY-MM-DD HH:mm',
showTime: { format: 'HH:mm' },
placeholder: '-',
value: receiveTimeVal,
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: 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, {
placeholder: '-',
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,
value: snapshot.receiveAreaType,
disabled: true,
autoSize: { minRows: 3, maxRows: 6 }
options: [{ value: '停车场', label: '停车场' }, { value: '其他', label: '其他' }]
})
),
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 })
snapshot.receiveAreaType === '停车场'
? React.createElement(
'div',
{ style: formItemStyle },
React.createElement('div', { style: labelStyle }, '停车场'),
React.createElement(Select, {
placeholder: '-',
style: controlStyle,
value: snapshot.receiveParkingName,
disabled: true,
showSearch: true,
options: parkingOptions,
filterOption: filterOption
})
)
: snapshot.receiveAreaType === '其他'
? React.createElement(
'div',
{ style: formItemStyle },
React.createElement('div', { style: labelStyle }, '停车地址'),
React.createElement(Input, { style: controlStyle, value: snapshot.receiveAddress || '-', readOnly: true, style: readOnlyStyle })
)
: React.createElement(
'div',
{ style: formItemStyle },
React.createElement('div', { style: labelStyle }, '停车场/停车地址'),
React.createElement(Input, { placeholder: '-', style: controlStyle, disabled: true })
)
)
),
React.createElement(Card, { title: '调拨车辆清单', style: { marginBottom: 16 } },
React.createElement(
Card,
{ title: '调拨车辆清单', style: { marginBottom: 16 } },
React.createElement(Table, {
rowKey: 'id',
columns: vehicleColumns,
dataSource: vehicles,
dataSource: snapshot.transferVehicles || [],
size: 'small',
pagination: false,
scroll: { x: 1020 }
scroll: { x: 'max-content' }
})
),
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('返回调拨管理页（原型）'); } }, '返回')
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: handleBack }, '返回')
)
)
);