feat(web): 运维管理-备车/型号参数与需求说明更新
- 备车管理、新增备车、查看备车、备车-编辑：布局与字段调整，新增取消按钮 - 基本数据维护：型号参数列表/新增/查看/编辑页 - 车辆业务：备车-编辑页，示例图片、提交/保存/取消按钮 - 需求说明目录与文档整理 Made-with: Cursor
This commit is contained in:
王冕
289
web端/运维管理/车辆管理-查看.jsx
Normal file
289
web端/运维管理/车辆管理-查看.jsx
Normal file
@@ -0,0 +1,289 @@
|
||||
// 【重要】必须使用 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));
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user