fc86688beb
- 备车管理、新增备车、查看备车、备车-编辑：布局与字段调整，新增取消按钮 - 基本数据维护：型号参数列表/新增/查看/编辑页 - 车辆业务：备车-编辑页，示例图片、提交/保存/取消按钮 - 需求说明目录与文档整理 Made-with: Cursor
290 lines
17 KiB
JavaScript
290 lines
17 KiB
JavaScript
// 【重要】必须使用 const Component 作为组件变量名
|
||
// 运维管理 - 车辆数据 - 车辆详情（只读展示）
|
||
|
||
const Component = function () {
|
||
var useState = React.useState;
|
||
|
||
var antd = window.antd;
|
||
var Breadcrumb = antd.Breadcrumb;
|
||
var Card = antd.Card;
|
||
var Tabs = antd.Tabs;
|
||
var Table = antd.Table;
|
||
var Tag = antd.Tag;
|
||
var Button = antd.Button;
|
||
var Tooltip = antd.Tooltip;
|
||
|
||
// 顶部概览 mock 数据（与图片一致）
|
||
var overview = {
|
||
plateNo: '浙F06900F',
|
||
plateTag: '租赁',
|
||
vin: 'LA9HE60A0NBAF4031',
|
||
vehicleNo: '22FHD0007',
|
||
owner: '浙江羚牛氢能科技有限公司',
|
||
contractNo: 'LNZLHTSH2023071301',
|
||
outStatus: '租赁交车',
|
||
licenseStatus: '正常',
|
||
location: '浙江省嘉兴市平湖市XXXXXXXXXXX街道XXXXXXXXXXX号XXXXXXXx',
|
||
bodyColor: '白色',
|
||
purchaseDate: '2026-09-09',
|
||
warehouseStatus: '已交付车-租赁服务',
|
||
customerName: '上海迅杰物流有限公司',
|
||
prepStatus: '正常',
|
||
scrapStatus: '无',
|
||
gpsLastTime: '2026-09-09 10:50',
|
||
resourceCategory: 'XXXXXXXXXX',
|
||
manufactureYear: '2025',
|
||
parkingPlace: '-',
|
||
bizDept: '业务三部',
|
||
lastPrepTime: '2026-09-09',
|
||
assetRating: 'XXXXXXXXXX',
|
||
ratingTime: '2027-09-09',
|
||
forceScrapDate: '2026-09-09',
|
||
nextInspectionTime: '2026-09-09',
|
||
bizManager: '金可鹏',
|
||
maintainStatus: '正常',
|
||
preemptStatus: '无',
|
||
transferStatus: '无'
|
||
};
|
||
|
||
// 型号参数 tab 数据
|
||
var modelParams = {
|
||
brand: '苏龙',
|
||
model: '海格牌KLQ5180XYKFCEV',
|
||
vehicleType: '18吨双飞翼货车',
|
||
fuelType: '氢',
|
||
cabinColor: '绿牌',
|
||
wholeSize: '5995mm x 2145mm x 3130mm'
|
||
};
|
||
var tireInfo = { tireCount: '8', tireSpec: '15/80R22.5' };
|
||
var electricSystem = {
|
||
batteryType: '磷酸铁锂',
|
||
batteryVendor: 'xxxxxxxxxxxxx企业名称',
|
||
capacity: '100000 kWh',
|
||
range: '200 KM'
|
||
};
|
||
var hydrogenSystem = {
|
||
vendor: '某某供氢系统科技有限公司',
|
||
cylinderCapacity: 'xxx L',
|
||
gaugeMode: 'MPa',
|
||
range: '1000 KM'
|
||
};
|
||
var otherSystem = {
|
||
coldMachineVendor: 'xxxxxxxx企业',
|
||
stackVendor: 'XXXXXXXX企业'
|
||
};
|
||
var maintenanceList = [
|
||
{ key: '1', item: '变速器油', kmCycle: '60000', monthCycle: '24', laborCost: '0', materialCost: '571', total: '571', lastKm: '' },
|
||
{ key: '2', item: '变速器油', kmCycle: '60000', monthCycle: '24', laborCost: '0', materialCost: '571', total: '571', lastKm: '' },
|
||
{ key: '3', item: '变速器油', kmCycle: '60000', monthCycle: '24', laborCost: '0', materialCost: '571', total: '571', lastKm: '5000' },
|
||
{ key: '4', item: '变速器油', kmCycle: '60000', monthCycle: '24', laborCost: '0', materialCost: '571', total: '571', lastKm: '5000' },
|
||
{ key: '5', item: '变速器油', kmCycle: '60000', monthCycle: '24', laborCost: '0', materialCost: '571', total: '571', lastKm: '5000' }
|
||
];
|
||
|
||
var activeTab = useState('model');
|
||
|
||
var styles = {
|
||
page: { padding: '16px 24px 40px', backgroundColor: '#f5f5f5', minHeight: '100vh', fontSize: 14 },
|
||
breadcrumb: { marginBottom: 16, color: '#666' },
|
||
breadcrumbSep: { margin: '0 8px', color: '#999' },
|
||
card: { backgroundColor: '#fff', borderRadius: 8, marginBottom: 16, boxShadow: '0 1px 2px rgba(0,0,0,0.05)', overflow: 'hidden' },
|
||
cardBody: { padding: '20px 24px' },
|
||
overviewHeader: { display: 'flex', alignItems: 'center', gap: 12, marginBottom: 20, flexWrap: 'wrap' },
|
||
plateNo: { fontSize: 18, fontWeight: 600, color: '#333' },
|
||
overviewGrid: { display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: '12px 24px' },
|
||
overviewItem: { display: 'flex', gap: 8, minWidth: 0 },
|
||
overviewLabel: { color: '#666', flex: '0 0 110px' },
|
||
overviewValue: { color: '#333', flex: 1 },
|
||
cardTitleBar: { display: 'flex', alignItems: 'center', marginBottom: 16, fontSize: 15, fontWeight: 500 },
|
||
cardTitleBarLine: { width: 4, height: 16, backgroundColor: '#1890ff', marginRight: 8, borderRadius: 2 },
|
||
infoGrid: { display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: '12px 24px', marginBottom: 20 },
|
||
infoItem: { display: 'flex', gap: 8 },
|
||
infoLabel: { color: '#666', flex: '0 0 100px' },
|
||
infoValue: { color: '#333' }
|
||
};
|
||
|
||
function InfoRow(props) {
|
||
var val = props.value || '-';
|
||
var valueNode = props.ellipsisWithTooltip
|
||
? React.createElement(Tooltip, { title: val },
|
||
React.createElement('span', {
|
||
style: Object.assign({}, styles.overviewValue, { overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', display: 'block' })
|
||
}, val)
|
||
)
|
||
: React.createElement('span', { style: styles.overviewValue }, val);
|
||
return React.createElement('div', { style: styles.overviewItem },
|
||
React.createElement('span', { style: styles.overviewLabel }, props.label + '：'),
|
||
valueNode
|
||
);
|
||
}
|
||
|
||
function CardTitleWithBar(props) {
|
||
return React.createElement('div', { style: styles.cardTitleBar },
|
||
React.createElement('span', { style: styles.cardTitleBarLine }),
|
||
props.title
|
||
);
|
||
}
|
||
|
||
var tabItems = [
|
||
{
|
||
key: 'model',
|
||
label: '型号参数',
|
||
children: React.createElement('div', { style: { padding: '0 4px' } },
|
||
React.createElement(Card, { size: 'small', style: { marginBottom: 16 } },
|
||
React.createElement(CardTitleWithBar, { title: '型号参数' }),
|
||
React.createElement('div', { style: styles.infoGrid },
|
||
React.createElement('div', { style: styles.infoItem }, React.createElement('span', { style: styles.infoLabel }, '品牌：'), React.createElement('span', { style: styles.infoValue }, modelParams.brand)),
|
||
React.createElement('div', { style: styles.infoItem }, React.createElement('span', { style: styles.infoLabel }, '型号：'), React.createElement('span', { style: styles.infoValue }, modelParams.model)),
|
||
React.createElement('div', { style: styles.infoItem }, React.createElement('span', { style: styles.infoLabel }, '车辆类型：'), React.createElement('span', { style: styles.infoValue }, modelParams.vehicleType)),
|
||
React.createElement('div', { style: styles.infoItem }, React.createElement('span', { style: styles.infoLabel }, '燃料种类：'), React.createElement('span', { style: styles.infoValue }, modelParams.fuelType)),
|
||
React.createElement('div', { style: styles.infoItem }, React.createElement('span', { style: styles.infoLabel }, '车厢颜色：'), React.createElement('span', { style: styles.infoValue }, modelParams.cabinColor)),
|
||
React.createElement('div', { style: styles.infoItem }, React.createElement('span', { style: styles.infoLabel }, '整车尺寸：'), React.createElement('span', { style: styles.infoValue }, modelParams.wholeSize))
|
||
)
|
||
),
|
||
React.createElement(Card, { size: 'small', style: { marginBottom: 16 } },
|
||
React.createElement(CardTitleWithBar, { title: '轮胎情况' }),
|
||
React.createElement('div', { style: styles.infoGrid },
|
||
React.createElement('div', { style: styles.infoItem }, React.createElement('span', { style: styles.infoLabel }, '轮胎数量：'), React.createElement('span', { style: styles.infoValue }, tireInfo.tireCount)),
|
||
React.createElement('div', { style: styles.infoItem }, React.createElement('span', { style: styles.infoLabel }, '轮胎规格：'), React.createElement('span', { style: styles.infoValue }, tireInfo.tireSpec))
|
||
)
|
||
),
|
||
React.createElement(Card, { size: 'small', style: { marginBottom: 16 } },
|
||
React.createElement(CardTitleWithBar, { title: '电气系统' }),
|
||
React.createElement('div', { style: styles.infoGrid },
|
||
React.createElement('div', { style: styles.infoItem }, React.createElement('span', { style: styles.infoLabel }, '电池类型：'), React.createElement('span', { style: styles.infoValue }, electricSystem.batteryType)),
|
||
React.createElement('div', { style: styles.infoItem }, React.createElement('span', { style: styles.infoLabel }, '电池厂家：'), React.createElement('span', { style: styles.infoValue }, electricSystem.batteryVendor)),
|
||
React.createElement('div', { style: styles.infoItem }, React.createElement('span', { style: styles.infoLabel }, '储电量：'), React.createElement('span', { style: styles.infoValue }, electricSystem.capacity)),
|
||
React.createElement('div', { style: styles.infoItem }, React.createElement('span', { style: styles.infoLabel }, '续航里程：'), React.createElement('span', { style: styles.infoValue }, electricSystem.range))
|
||
)
|
||
),
|
||
React.createElement(Card, { size: 'small', style: { marginBottom: 16 } },
|
||
React.createElement(CardTitleWithBar, { title: '供氢系统' }),
|
||
React.createElement('div', { style: styles.infoGrid },
|
||
React.createElement('div', { style: styles.infoItem }, React.createElement('span', { style: styles.infoLabel }, '供氢系统厂家：'), React.createElement('span', { style: styles.infoValue }, hydrogenSystem.vendor)),
|
||
React.createElement('div', { style: styles.infoItem }, React.createElement('span', { style: styles.infoLabel }, '氢瓶容量：'), React.createElement('span', { style: styles.infoValue }, hydrogenSystem.cylinderCapacity)),
|
||
React.createElement('div', { style: styles.infoItem }, React.createElement('span', { style: styles.infoLabel }, '仪表盘模式：'), React.createElement('span', { style: styles.infoValue }, hydrogenSystem.gaugeMode)),
|
||
React.createElement('div', { style: styles.infoItem }, React.createElement('span', { style: styles.infoLabel }, '续航里程：'), React.createElement('span', { style: styles.infoValue }, hydrogenSystem.range))
|
||
)
|
||
),
|
||
React.createElement(Card, { size: 'small', style: { marginBottom: 16 } },
|
||
React.createElement(CardTitleWithBar, { title: '其他系统' }),
|
||
React.createElement('div', { style: styles.infoGrid },
|
||
React.createElement('div', { style: styles.infoItem }, React.createElement('span', { style: styles.infoLabel }, '冷机生产企业：'), React.createElement('span', { style: styles.infoValue }, otherSystem.coldMachineVendor)),
|
||
React.createElement('div', { style: styles.infoItem }, React.createElement('span', { style: styles.infoLabel }, '电堆生产企业：'), React.createElement('span', { style: styles.infoValue }, otherSystem.stackVendor))
|
||
)
|
||
),
|
||
React.createElement(Card, { size: 'small' },
|
||
React.createElement(CardTitleWithBar, { title: '保养参数' }),
|
||
React.createElement(Table, {
|
||
dataSource: maintenanceList,
|
||
columns: [
|
||
{ title: '序号', dataIndex: 'key', key: 'key', width: 60, render: function (_, __, i) { return i + 1; } },
|
||
{ title: '养护项目', dataIndex: 'item', key: 'item', width: 120 },
|
||
{ title: '保养公里周期(km)', dataIndex: 'kmCycle', key: 'kmCycle', width: 140 },
|
||
{ title: '保养时间周期(月)', dataIndex: 'monthCycle', key: 'monthCycle', width: 140 },
|
||
{ title: '工时费(元)', dataIndex: 'laborCost', key: 'laborCost', width: 100 },
|
||
{ title: '材料费(元)', dataIndex: 'materialCost', key: 'materialCost', width: 100 },
|
||
{ title: '合计', dataIndex: 'total', key: 'total', width: 80 },
|
||
{ title: '上次保养公里数(KM)', dataIndex: 'lastKm', key: 'lastKm', render: function (v) { return v || '—'; } }
|
||
],
|
||
pagination: false,
|
||
size: 'small',
|
||
bordered: true
|
||
})
|
||
)
|
||
)
|
||
},
|
||
{ key: 'equip', label: '后装设备', children: React.createElement('div', { style: { padding: 24, color: '#999' } }, '暂无数据') },
|
||
{ key: 'license', label: '证照信息', children: React.createElement('div', { style: { padding: 24, color: '#999' } }, '暂无数据') },
|
||
{ key: 'lease', label: '租赁记录', children: React.createElement('div', { style: { padding: 24, color: '#999' } }, '暂无数据') },
|
||
{ key: 'insurance', label: '保险记录', children: React.createElement('div', { style: { padding: 24, color: '#999' } }, '暂无数据') },
|
||
{ key: 'repair', label: '维修记录', children: React.createElement('div', { style: { padding: 24, color: '#999' } }, '暂无数据') },
|
||
{ key: 'maintain', label: '保养记录', children: React.createElement('div', { style: { padding: 24, color: '#999' } }, '暂无数据') },
|
||
{ key: 'accident', label: '事故记录', children: React.createElement('div', { style: { padding: 24, color: '#999' } }, '暂无数据') },
|
||
{ key: 'fault', label: '故障记录', children: React.createElement('div', { style: { padding: 24, color: '#999' } }, '暂无数据') },
|
||
{ key: 'violation', label: '违章记录', children: React.createElement('div', { style: { padding: 24, color: '#999' } }, '暂无数据') },
|
||
{ key: 'change', label: '异动记录', children: React.createElement('div', { style: { padding: 24, color: '#999' } }, '暂无数据') },
|
||
{ key: 'transfer', label: '调拨记录', children: React.createElement('div', { style: { padding: 24, color: '#999' } }, '暂无数据') },
|
||
{ key: 'prep', label: '整备记录', children: React.createElement('div', { style: { padding: 24, color: '#999' } }, '暂无数据') },
|
||
{ key: 'inspect', label: '抽检记录', children: React.createElement('div', { style: { padding: 24, color: '#999' } }, '暂无数据') }
|
||
];
|
||
|
||
var breadcrumbNodes = [
|
||
React.createElement('span', { key: '1' }, '车辆管理'),
|
||
React.createElement('span', { key: '2', style: styles.breadcrumbSep }, ' / '),
|
||
React.createElement('span', { key: '3' }, '车辆数据'),
|
||
React.createElement('span', { key: '4', style: styles.breadcrumbSep }, ' / '),
|
||
React.createElement('span', { key: '5', style: { color: '#1890ff' } }, '详情')
|
||
];
|
||
|
||
return React.createElement('div', { style: styles.page },
|
||
React.createElement('div', { style: styles.breadcrumb }, breadcrumbNodes),
|
||
React.createElement('div', { style: styles.card },
|
||
React.createElement('div', { style: styles.cardBody },
|
||
React.createElement('div', { style: styles.overviewHeader },
|
||
React.createElement('span', { style: styles.plateNo }, overview.plateNo),
|
||
React.createElement(Tag, { color: 'blue' }, overview.plateTag),
|
||
React.createElement(Button, { type: 'link', size: 'small', style: { padding: 0 } }, '1')
|
||
),
|
||
React.createElement('div', { style: styles.overviewGrid },
|
||
React.createElement(InfoRow, { label: '车架号', value: overview.vin }),
|
||
React.createElement(InfoRow, { label: '车辆编号', value: overview.vehicleNo }),
|
||
React.createElement(InfoRow, { label: '登记所有权', value: overview.owner }),
|
||
React.createElement(InfoRow, { label: '合同编号', value: overview.contractNo }),
|
||
React.createElement(InfoRow, { label: '出库状态', value: overview.outStatus }),
|
||
React.createElement(InfoRow, { label: '证照状态', value: overview.licenseStatus }),
|
||
React.createElement(InfoRow, { label: '车辆当前位置', value: overview.location, ellipsisWithTooltip: true }),
|
||
React.createElement(InfoRow, { label: '车身颜色', value: overview.bodyColor }),
|
||
React.createElement(InfoRow, { label: '采购入库日期', value: overview.purchaseDate }),
|
||
React.createElement(InfoRow, { label: '库位状态', value: overview.warehouseStatus }),
|
||
React.createElement(InfoRow, { label: '客户名称', value: overview.customerName }),
|
||
React.createElement(InfoRow, { label: '整备状态', value: overview.prepStatus }),
|
||
React.createElement(InfoRow, { label: '报废状态', value: overview.scrapStatus }),
|
||
React.createElement(InfoRow, { label: 'GPS最后上传', value: overview.gpsLastTime }),
|
||
React.createElement(InfoRow, { label: '资源分类', value: overview.resourceCategory }),
|
||
React.createElement(InfoRow, { label: '出厂年份', value: overview.manufactureYear }),
|
||
React.createElement(InfoRow, { label: '停车位置', value: overview.parkingPlace }),
|
||
React.createElement(InfoRow, { label: '业务部门', value: overview.bizDept }),
|
||
React.createElement(InfoRow, { label: '上次整备时间', value: overview.lastPrepTime }),
|
||
React.createElement(InfoRow, { label: '资产评级', value: overview.assetRating }),
|
||
React.createElement(InfoRow, { label: '等评时间', value: overview.ratingTime }),
|
||
React.createElement(InfoRow, { label: '强制报废期', value: overview.forceScrapDate }),
|
||
React.createElement(InfoRow, { label: '下次年检时间', value: overview.nextInspectionTime }),
|
||
React.createElement(InfoRow, { label: '业务负责人', value: overview.bizManager }),
|
||
React.createElement(InfoRow, { label: '维修状态', value: overview.maintainStatus }),
|
||
React.createElement(InfoRow, { label: '预占状态', value: overview.preemptStatus }),
|
||
React.createElement(InfoRow, { label: '过户状态', value: overview.transferStatus })
|
||
)
|
||
)
|
||
),
|
||
React.createElement('div', { style: Object.assign({}, styles.card, { marginBottom: 0 }) },
|
||
React.createElement('div', { style: styles.cardBody },
|
||
React.createElement(Tabs, {
|
||
activeKey: activeTab[0],
|
||
onChange: function (key) { activeTab[1](key); },
|
||
items: tabItems,
|
||
type: 'line'
|
||
})
|
||
)
|
||
)
|
||
);
|
||
};
|
||
|
||
if (typeof window !== 'undefined') {
|
||
window.Component = Component;
|
||
if (document.readyState === 'loading') {
|
||
document.addEventListener('DOMContentLoaded', function () {
|
||
var rootEl = document.getElementById('root');
|
||
if (rootEl && window.ReactDOM && window.React) {
|
||
var root = ReactDOM.createRoot(rootEl);
|
||
root.render(React.createElement(Component));
|
||
}
|
||
});
|
||
} else {
|
||
var rootEl = document.getElementById('root');
|
||
if (rootEl && window.ReactDOM && window.React) {
|
||
var root = ReactDOM.createRoot(rootEl);
|
||
root.render(React.createElement(Component));
|
||
}
|
||
}
|
||
}
|