227 lines
11 KiB
JavaScript
227 lines
11 KiB
JavaScript
// 【重要】必须使用 const Component 作为组件变量名
|
|
// ONEOS-web - 运维管理 - 车辆业务 - 查看故障
|
|
|
|
const Component = function () {
|
|
var useState = React.useState;
|
|
|
|
var antd = window.antd;
|
|
var Button = antd.Button;
|
|
var Input = antd.Input;
|
|
var Select = antd.Select;
|
|
var DatePicker = antd.DatePicker;
|
|
var Form = antd.Form;
|
|
var Row = antd.Row;
|
|
var Col = antd.Col;
|
|
var Breadcrumb = antd.Breadcrumb;
|
|
var Layout = antd.Layout;
|
|
var message = antd.message;
|
|
var Card = antd.Card;
|
|
var Upload = antd.Upload;
|
|
|
|
var _form = Form.useForm();
|
|
var faultForm = _form[0];
|
|
|
|
// 故障等级枚举
|
|
var faultLevelOptions = [
|
|
{ label: '特急', value: '特急' },
|
|
{ label: '紧急', value: '紧急' },
|
|
{ label: '一般', value: '一般' },
|
|
{ label: '提示', value: '提示' }
|
|
];
|
|
|
|
// 故障类型枚举
|
|
var faultTypeOptions = [
|
|
{ label: '底盘故障', value: '底盘故障' },
|
|
{ label: '三电故障', value: '三电故障' },
|
|
{ label: '整车系统', value: '整车系统' },
|
|
{ label: '燃料电池系统故障', value: '燃料电池系统故障' },
|
|
{ label: '供氢系统故障', value: '供氢系统故障' },
|
|
{ label: '空调系统故障', value: '空调系统故障' },
|
|
{ label: '冷机故障', value: '冷机故障' },
|
|
{ label: '其他故障', value: '其他故障' }
|
|
];
|
|
|
|
// 故障来源枚举
|
|
var faultSourceOptions = [
|
|
{ label: '客户报告', value: '客户报告' },
|
|
{ label: '定期保养', value: '定期保养' },
|
|
{ label: '司机操作问题', value: '司机操作问题' }
|
|
];
|
|
|
|
// 解决情况枚举
|
|
var resolveStatusOptions = [
|
|
{ label: '未解决', value: '未解决' },
|
|
{ label: '临时排故', value: '临时排故' },
|
|
{ label: '已解决', value: '已解决' }
|
|
];
|
|
|
|
var plateOptions = [
|
|
{ label: '沪A12345', value: '沪A12345', brand: '一汽解放', model: 'J6P', company: '上海羚牛', vin: 'LNW1234567890ABCD' },
|
|
{ label: '浙B88888', value: '浙B88888', brand: '东风商用车', model: '天龙', company: '浙江羚牛', vin: 'LNW0987654321EFGH' },
|
|
{ label: '苏C66666', value: '苏C66666', brand: '福田欧曼', model: 'EST', company: '苏州冷链速运有限公司', vin: 'LNW1357924680IJKL' },
|
|
{ label: '沪D99999', value: '沪D99999', brand: '陕汽重卡', model: '德龙', company: '上海城配物流有限公司', vin: 'LNW2468013579MNOP' }
|
|
];
|
|
|
|
var handleBack = function () {
|
|
message.info('返回列表');
|
|
};
|
|
|
|
// 模拟数据加载
|
|
React.useEffect(function() {
|
|
var mockData = { key: '1', code: 'F-2024-001', plate: '沪A12345', brand: '一汽解放', model: 'J6P', company: '上海羚牛', type: '底盘故障', level: '紧急', source: '客户报告', status: '未解决', reportTime: '2024-05-10 08:30:00', lastOperator: '王婷婷', lastOperationTime: '2024-05-10 09:00:00', desc: '车辆重载下制动踏板偏软，制动距离明显变长' };
|
|
if (mockData.reportTime) {
|
|
if (typeof window.dayjs === 'function') {
|
|
mockData.reportTime = window.dayjs(mockData.reportTime);
|
|
} else if (typeof window.moment === 'function') {
|
|
mockData.reportTime = window.moment(mockData.reportTime);
|
|
}
|
|
}
|
|
faultForm.setFieldsValue(mockData);
|
|
}, []);
|
|
|
|
return React.createElement(Layout, { className: 'arco-theme-overrides', style: { minHeight: '100vh', background: '#f2f3f5', fontFamily: 'Inter, Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif' } },
|
|
React.createElement('style', null, `
|
|
.arco-theme-overrides .ant-btn { border-radius: 4px; }
|
|
.arco-theme-overrides .ant-btn-primary { background-color: #165dff; border-color: #165dff; }
|
|
.arco-theme-overrides .ant-btn-primary:hover { background-color: #4080ff; border-color: #4080ff; }
|
|
|
|
.arco-grouped-form-page { display: flex; flex-direction: column; min-height: 100vh; }
|
|
.arco-grouped-form-page-content { flex: 1; padding: 16px 20px 24px; }
|
|
.arco-grouped-form-page .ant-card { margin-bottom: 16px; border-radius: 4px; border: none; box-shadow: 0 1px 2px rgba(0,0,0,0.06); }
|
|
.arco-grouped-form-page .ant-card-head { border-bottom: none; padding: 20px 24px 0; min-height: auto; }
|
|
.arco-grouped-form-page .ant-card-head-title { font-size: 16px; font-weight: 500; color: #1d2129; padding: 0; }
|
|
.arco-grouped-form-page .ant-card-body { padding: 24px; }
|
|
.arco-grouped-form-page .ant-form-vertical .ant-form-item-label { padding-bottom: 8px; height: auto; line-height: 1.5715; }
|
|
.arco-grouped-form-page .ant-form-item { margin-bottom: 24px; }
|
|
|
|
.arco-grouped-form-page .ant-input,
|
|
.arco-grouped-form-page .ant-select-selector,
|
|
.arco-grouped-form-page .ant-picker,
|
|
.arco-grouped-form-page .ant-input-affix-wrapper { background-color: #f2f3f5; border: 1px solid #e5e6eb; border-radius: 2px; transition: all 0.1s cubic-bezier(0, 0, 1, 1); }
|
|
|
|
.arco-grouped-form-page .ant-input[disabled],
|
|
.arco-grouped-form-page .ant-select-disabled .ant-select-selector,
|
|
.arco-grouped-form-page .ant-picker-disabled { color: #86909c; background-color: #f2f3f5; border-color: #e5e6eb; cursor: not-allowed; }
|
|
.arco-grouped-form-page .ant-input-affix-wrapper[disabled] { background-color: #f2f3f5; border-color: #e5e6eb; cursor: not-allowed; }
|
|
.arco-grouped-form-page .ant-input-affix-wrapper > input.ant-input { background-color: transparent; }
|
|
|
|
.arco-grouped-form-footer { background: #fff; padding: 16px 24px; border-top: 1px solid #e5e6eb; display: flex; justify-content: flex-end; align-items: center; gap: 12px; position: sticky; bottom: 0; z-index: 100; box-shadow: 0 -2px 10px rgba(0,0,0,0.05); }
|
|
.arco-grouped-form-footer .ant-btn { border-radius: 5px; height: 32px; padding: 4px 16px; font-size: 14px; }
|
|
|
|
.arco-theme-overrides .ant-breadcrumb { color: #86909c; font-size: 14px; white-space: nowrap; flex-shrink: 0; margin-bottom: 20px; }
|
|
.arco-theme-overrides .ant-breadcrumb a { color: #4e5969; }
|
|
.arco-theme-overrides .ant-breadcrumb a:hover { color: #165dff; background-color: transparent; }
|
|
.arco-theme-overrides .ant-form-item-label > label { color: #4e5969; white-space: nowrap; }
|
|
.arco-theme-overrides .ant-form-item-label > label::after { display: none !important; content: "" !important; margin: 0 !important; }
|
|
`),
|
|
React.createElement('div', { className: 'arco-grouped-form-page' },
|
|
React.createElement('div', { className: 'arco-grouped-form-page-content' },
|
|
React.createElement(Breadcrumb, {
|
|
separator: React.createElement('span', { style: { color: '#c9cdd4' } }, '/'),
|
|
items: [
|
|
{ title: '首页' },
|
|
{ title: '运维管理' },
|
|
{ title: '车辆业务' },
|
|
{ title: React.createElement('a', { onClick: function(e) { e.preventDefault(); handleBack(); } }, '故障管理') },
|
|
{ title: React.createElement('span', { style: { color: '#1d2129' } }, '查看故障单') }
|
|
]
|
|
}),
|
|
|
|
React.createElement(Form, { form: faultForm, layout: 'vertical', disabled: true },
|
|
// 车辆信息
|
|
React.createElement(Card, { title: '车辆信息', bordered: false },
|
|
React.createElement(Row, { gutter: 24 },
|
|
React.createElement(Col, { span: 8 },
|
|
React.createElement(Form.Item, { label: '车牌号', name: 'plate', rules: [{ required: true, message: '请选择车牌号' }] },
|
|
React.createElement(Select, {
|
|
placeholder: '请选择车牌号',
|
|
options: plateOptions,
|
|
showSearch: true
|
|
})
|
|
)
|
|
),
|
|
React.createElement(Col, { span: 8 },
|
|
React.createElement(Form.Item, { label: '车辆品牌', name: 'brand' },
|
|
React.createElement(Input, { placeholder: '自动带入', disabled: true, style: { backgroundColor: '#f2f3f5', color: '#86909c' } })
|
|
)
|
|
),
|
|
React.createElement(Col, { span: 8 },
|
|
React.createElement(Form.Item, { label: '车辆型号', name: 'model' },
|
|
React.createElement(Input, { placeholder: '自动带入', disabled: true, style: { backgroundColor: '#f2f3f5', color: '#86909c' } })
|
|
)
|
|
),
|
|
React.createElement(Col, { span: 8 },
|
|
React.createElement(Form.Item, { label: '运营公司', name: 'company' },
|
|
React.createElement(Input, { placeholder: '自动带入', disabled: true, style: { backgroundColor: '#f2f3f5', color: '#86909c' } })
|
|
)
|
|
),
|
|
React.createElement(Col, { span: 8 },
|
|
React.createElement(Form.Item, { label: '车辆识别代码', name: 'vin' },
|
|
React.createElement(Input, { placeholder: '自动带入', disabled: true, style: { backgroundColor: '#f2f3f5', color: '#86909c' } })
|
|
)
|
|
)
|
|
)
|
|
),
|
|
|
|
// 故障信息
|
|
React.createElement(Card, { title: '故障信息', bordered: false },
|
|
React.createElement(Row, { gutter: 24 },
|
|
React.createElement(Col, { span: 8 },
|
|
React.createElement(Form.Item, { label: '故障类型', name: 'type', rules: [{ required: true, message: '请选择故障类型' }] },
|
|
React.createElement(Select, { placeholder: '请选择故障类型', options: faultTypeOptions })
|
|
)
|
|
),
|
|
React.createElement(Col, { span: 8 },
|
|
React.createElement(Form.Item, { label: '故障来源', name: 'source', rules: [{ required: true, message: '请选择故障来源' }] },
|
|
React.createElement(Select, { placeholder: '请选择故障来源', options: faultSourceOptions })
|
|
)
|
|
),
|
|
React.createElement(Col, { span: 8 },
|
|
React.createElement(Form.Item, { label: '故障等级', name: 'level', rules: [{ required: true, message: '请选择故障等级' }] },
|
|
React.createElement(Select, { placeholder: '请选择故障等级', options: faultLevelOptions })
|
|
)
|
|
),
|
|
React.createElement(Col, { span: 8 },
|
|
React.createElement(Form.Item, { label: '故障上报时间', name: 'reportTime', rules: [{ required: true, message: '请选择故障上报时间' }] },
|
|
React.createElement(DatePicker, { style: { width: '100%' }, placeholder: '请选择上报时间', showTime: true })
|
|
)
|
|
),
|
|
React.createElement(Col, { span: 8 },
|
|
React.createElement(Form.Item, { label: '解决情况', name: 'status', rules: [{ required: true, message: '请选择故障解决情况' }] },
|
|
React.createElement(Select, { placeholder: '请选择故障解决情况', options: resolveStatusOptions })
|
|
)
|
|
)
|
|
)
|
|
),
|
|
|
|
// 故障证据与描述
|
|
React.createElement(Card, { title: '故障证据与描述', bordered: false },
|
|
React.createElement(Row, { gutter: 24 },
|
|
React.createElement(Col, { span: 24 },
|
|
React.createElement(Form.Item, { label: '故障描述', name: 'desc', rules: [{ required: true, message: '请填写故障描述' }] },
|
|
React.createElement(Input.TextArea, {
|
|
placeholder: '在何种状态下，产生何种现象，导致何种事故',
|
|
style: { height: 80, minHeight: 80, resize: 'none' }
|
|
})
|
|
)
|
|
),
|
|
React.createElement(Col, { span: 24 },
|
|
React.createElement(Form.Item, { label: '故障证据', name: 'evidence' },
|
|
React.createElement(Upload, { listType: 'picture-card' }),
|
|
React.createElement('div', { style: { fontSize: 12, color: '#86909c', marginTop: 8 } }, '支持上传照片、视频、录音')
|
|
)
|
|
)
|
|
)
|
|
)
|
|
)
|
|
),
|
|
// 底部操作栏
|
|
React.createElement('div', { className: 'arco-grouped-form-footer' },
|
|
React.createElement(Button, { onClick: handleBack, style: { borderRadius: 5 } }, '返回列表')
|
|
)
|
|
)
|
|
);
|
|
};
|
|
|
|
if (typeof module !== 'undefined' && module.exports) module.exports = Component;
|