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

feat(运维-车辆): 异动管理查看/结束异动/编辑、备件与需求说明更新

Browse Source 
Made-with: Cursor
This commit is contained in:
王冕
2026-03-21 13:19:27 +08:00
parent c75d1656e3
commit 49d9e3675d
9 changed files with 2812 additions and 157 deletions
Download Patch File Download Diff File Expand all files Collapse all files

498
web端/运维管理/备件管理/仓库管理.jsx Normal file
View File

@@ -0,0 +1,498 @@
// 【重要】必须使用 const Component 作为组件变量名
// 运维管理 - 备件库 - 仓库管理（列表页原型）
const Component = function () {
var useState = React.useState;
var useMemo = React.useMemo;
var useCallback = React.useCallback;
var antd = window.antd;
var Breadcrumb = antd.Breadcrumb;
var Card = antd.Card;
var Button = antd.Button;
var Drawer = antd.Drawer;
var Input = antd.Input;
var Table = antd.Table;
var Select = antd.Select;
var DatePicker = antd.DatePicker;
var Modal = antd.Modal;
var message = antd.message;
var RangePicker = DatePicker.RangePicker;
function filterOption(input, option) {
var label = (option && (option.label || option.children)) || '';
return String(label).toLowerCase().indexOf(String(input || '').toLowerCase()) >= 0;
}
function pad2(n) {
return n < 10 ? '0' + n : '' + n;
}
// 格式化：YYYY-MM-DD HH:MM（尽量保持输入原样）
function fmtYMDHM(v) {
if (v === null || v === undefined) return '-';
var s = String(v).trim();
if (!s) return '-';
if (/^\d{4}-\d{2}-\d{2}\s+\d{2}:\d{2}/.test(s)) return s.slice(0, 16);
if (/^\d{4}-\d{2}-\d{2}$/.test(s)) return s + ' 00:00';
try {
var d = new Date(s.replace(/-/g, '/'));
if (isNaN(d.getTime())) return s;
return d.getFullYear() + '-' + pad2(d.getMonth() + 1) + '-' + pad2(d.getDate()) + ' ' + pad2(d.getHours()) + ':' + pad2(d.getMinutes());
} catch (e) {
return s;
}
}
function matchRange(valStr, range) {
if (!range || !range[0] || !range[1]) return true;
var s = '';
var e = '';
if (range[0] && range[0].format) s = range[0].format('YYYY-MM-DD');
if (range[1] && range[1].format) e = range[1].format('YYYY-MM-DD');
if (!s && !e) return true;
var v = String(valStr || '').slice(0, 10);
if (s && v < s) return false;
if (e && v > e) return false;
return true;
}
var layoutStyle = { padding: '16px 24px', background: '#f5f5f5', minHeight: '100vh' };
var filterLabelStyle = { marginBottom: 6, fontSize: 14, color: 'rgba(0,0,0,0.65)' };
var filterItemStyle = { marginBottom: 12 };
var filterControlStyle = { width: '100%' };
var tableSingleLineStyle = '.warehouse-list-table .ant-table-thead th,.warehouse-list-table .ant-table-tbody td{white-space:nowrap;}';
// mock 列表数据（仓库是否为空用 itemCount 表示）
var warehousesState = useState(function () {
return [
{ id: 'wh1', warehouseCode: 'WH-001', warehouseName: '天河备件库', warehouseAddress: '广州市天河区xx路1号', warehouseManager: '张明', creatorName: '张明', createTime: '2026-02-20 09:30', itemCount: 12 },
{ id: 'wh2', warehouseCode: 'WH-002', warehouseName: '西湖服务备件库', warehouseAddress: '杭州市西湖区xx街88号', warehouseManager: '王芳', creatorName: '王芳', createTime: '2026-02-21 14:10', itemCount: 0 },
{ id: 'wh3', warehouseCode: 'WH-003', warehouseName: '上海浦东备件仓', warehouseAddress: '上海市浦东新区xx大道55号', warehouseManager: '李华', creatorName: '李华', createTime: '2026-02-22 08:45', itemCount: 5 },
{ id: 'wh4', warehouseCode: 'WH-004', warehouseName: '深圳南山备件仓', warehouseAddress: '深圳市南山区xx科技园3栋', warehouseManager: '赵强', creatorName: '赵强', createTime: '2026-02-23 10:20', itemCount: 0 },
{ id: 'wh5', warehouseCode: 'WH-005', warehouseName: '成都高新备件库', warehouseAddress: '成都市高新区xx路12号', warehouseManager: '陈静', creatorName: '陈静', createTime: '2026-02-24 11:05', itemCount: 9 },
{ id: 'wh6', warehouseCode: 'WH-006', warehouseName: '宁波江北备件库', warehouseAddress: '宁波市江北区xx街道6号', warehouseManager: '张明', creatorName: '张明', createTime: '2026-02-25 16:40', itemCount: 0 },
{ id: 'wh7', warehouseCode: 'WH-007', warehouseName: '北京朝阳备件仓', warehouseAddress: '北京市朝阳区xx路77号', warehouseManager: '王芳', creatorName: '王芳', createTime: '2026-02-26 09:15', itemCount: 21 },
{ id: 'wh8', warehouseCode: 'WH-008', warehouseName: '重庆两江备件库', warehouseAddress: '重庆市两江新区xx大道18号', warehouseManager: '李华', creatorName: '李华', createTime: '2026-02-27 07:45', itemCount: 2 }
];
});
var warehouses = warehousesState[0];
var setWarehouses = warehousesState[1];
var defaultDraftState = { warehouseName: undefined, creatorName: undefined, createTimeRange: null };
var draftState = useState(Object.assign({}, defaultDraftState));
var draft = draftState[0];
var setDraft = draftState[1];
var appliedState = useState(Object.assign({}, defaultDraftState));
var applied = appliedState[0];
var setApplied = appliedState[1];
var pageState = useState(1);
var page = pageState[0];
var setPage = pageState[1];
var pageSizeState = useState(10);
var pageSize = pageSizeState[0];
var setPageSize = pageSizeState[1];
var requirementModalState = useState(false);
var requirementModalOpen = requirementModalState[0];
var setRequirementModalOpen = requirementModalState[1];
// 新增抽屉
var addDrawerOpenState = useState(false);
var addDrawerOpen = addDrawerOpenState[0];
var setAddDrawerOpen = addDrawerOpenState[1];
var addDrawerModeState = useState('add'); // 'add' | 'edit'
var addDrawerMode = addDrawerModeState[0];
var setAddDrawerMode = addDrawerModeState[1];
var editingWarehouseIdState = useState(null);
var editingWarehouseId = editingWarehouseIdState[0];
var setEditingWarehouseId = editingWarehouseIdState[1];
var addFormState = useState({
warehouseCode: '',
warehouseName: '',
warehouseAddress: '',
warehouseManager: undefined
});
var addForm = addFormState[0];
var setAddForm = addFormState[1];
var requirementDocContent = [
'一个「数字化资产ONEOS运管平台」中的「仓库管理」模块',
'#面包屑：运维管理-备件库-仓库管理',
'',
'1.筛选：',
'1.1.仓库名称：选择器，支持输入框内输入内容模糊搜索下拉匹配结果；',
'1.2.创建人：选择器，下拉显示创建人；',
'1.3.创建时间：日期选择器，支持单输入框双日历通过开始-结束时间筛选；',
'',
'2.列表；右侧为新增；',
'2.1.序号：1.2.3.以此类推；',
'2.2.仓库编码：显示仓库编码；',
'2.3.仓库名称：显示仓库名称；',
'2.4.仓库地址：显示仓库地址；',
'2.5.仓库管理人：显示仓库管理人；',
'2.6.创建人：显示创建人；',
'2.7.创建时间：显示创建时间，格式为：YYYY-MM-DD HH:MM；',
'2.8.操作：编辑、删除；',
' 2.8.1.编辑：跳转仓库设置-编辑页；',
' 2.8.2.删除：点击进行二次确认，确认后判断仓库是否为空，如果仓库非空则提示：清空仓库后才可删除该仓库，仓库为空则提示：删除成功；'
].join('\n');
var creatorOptions = useMemo(function () {
// 创建人下拉来源：固定示例 + 兼容 mock 数据变更
var set = new Set();
setWarehouses; // keep linter friendly for unused setters in some generators
(warehouses || []).forEach(function (r) { if (r && r.creatorName) set.add(r.creatorName); });
if (set.size === 0) {
['张明', '王芳', '李华', '赵强', '陈静'].forEach(function (v) { set.add(v); });
}
return Array.from(set).map(function (v) { return { value: v, label: v }; });
}, [warehouses]);
var warehouseManagerOptions = useMemo(function () {
var set = new Set();
(warehouses || []).forEach(function (r) { if (r && r.warehouseManager) set.add(r.warehouseManager); });
if (set.size === 0) {
['张明', '王芳', '李华', '赵强', '陈静'].forEach(function (v) { set.add(v); });
}
return Array.from(set).map(function (v) { return { value: v, label: v }; });
}, [warehouses]);
var warehouseNameOptions = useMemo(function () {
var set = new Set();
(warehouses || []).forEach(function (r) { if (r && r.warehouseName) set.add(r.warehouseName); });
return Array.from(set).map(function (v) { return { value: v, label: v }; });
}, [warehouses]);
var filtered = useMemo(function () {
return (warehouses || []).filter(function (r) {
if (applied.warehouseName && r.warehouseName !== applied.warehouseName) return false;
if (applied.creatorName && r.creatorName !== applied.creatorName) return false;
if (!matchRange(r.createTime, applied.createTimeRange)) return false;
return true;
});
}, [warehouses, applied]);
var paged = useMemo(function () {
var start = (page - 1) * pageSize;
return filtered.slice(start, start + pageSize);
}, [filtered, page, pageSize]);
var serialStart = (page - 1) * pageSize;
var handleQuery = useCallback(function () {
setApplied({
warehouseName: draft.warehouseName,
creatorName: draft.creatorName,
createTimeRange: draft.createTimeRange
});
setPage(1);
}, [draft]);
var handleReset = useCallback(function () {
setDraft(Object.assign({}, defaultDraftState));
setApplied(Object.assign({}, defaultDraftState));
setPage(1);
}, []);
var handleAdd = useCallback(function () {
setAddDrawerMode('add');
setEditingWarehouseId(null);
setAddForm({ warehouseCode: '', warehouseName: '', warehouseAddress: '', warehouseManager: undefined });
setAddDrawerOpen(true);
}, []);
var handleEdit = useCallback(function (row) {
if (!row) return;
setAddDrawerMode('edit');
setEditingWarehouseId(row.id);
setAddForm({
warehouseCode: row.warehouseCode || '',
warehouseName: row.warehouseName || '',
warehouseAddress: row.warehouseAddress || '',
warehouseManager: row.warehouseManager
});
setAddDrawerOpen(true);
}, []);
var handleAddCancel = useCallback(function () {
setAddDrawerOpen(false);
setAddDrawerMode('add');
setEditingWarehouseId(null);
setAddForm({ warehouseCode: '', warehouseName: '', warehouseAddress: '', warehouseManager: undefined });
}, []);
function nowYMDHM() {
var d = new Date();
return d.getFullYear() + '-' + pad2(d.getMonth() + 1) + '-' + pad2(d.getDate()) + ' ' + pad2(d.getHours()) + ':' + pad2(d.getMinutes());
}
var handleAddSubmit = useCallback(function () {
var code = String(addForm.warehouseCode || '').trim();
var name = String(addForm.warehouseName || '').trim();
var address = String(addForm.warehouseAddress || '').trim();
var manager = addForm.warehouseManager ? addForm.warehouseManager : undefined;
// 仅仓库编码、仓库名称必填；地址/管理人选填
if (!code) {
message.warning('请填写仓库编码');
return;
}
if (!name) {
message.warning('请填写仓库名称');
return;
}
if (addDrawerMode === 'edit') {
if (!editingWarehouseId) {
message.error('无法定位要编辑的仓库记录');
return;
}
setWarehouses(function (prev) {
return (prev || []).map(function (r) {
if (!r || r.id !== editingWarehouseId) return r;
return Object.assign({}, r, {
warehouseCode: code,
warehouseName: name,
warehouseAddress: address,
warehouseManager: manager
});
});
});
setAddDrawerOpen(false);
setAddDrawerMode('add');
setEditingWarehouseId(null);
message.success('编辑成功');
return;
}
var item = {
id: 'wh' + Date.now(),
warehouseCode: code,
warehouseName: name,
warehouseAddress: address,
warehouseManager: manager,
creatorName: '当前用户',
createTime: nowYMDHM(),
itemCount: 0
};
setWarehouses(function (prev) {
return [item].concat(prev || []);
});
setAddDrawerOpen(false);
setAddDrawerMode('add');
setEditingWarehouseId(null);
message.success('新增成功');
}, [addForm, addDrawerMode, editingWarehouseId, setWarehouses, setAddDrawerMode, setEditingWarehouseId]);
var handleDelete = useCallback(function (row) {
if (!row) return;
Modal.confirm({
title: '确认删除',
content: '请确认是否删除该仓库',
okText: '确认',
cancelText: '取消',
onOk: function () {
if (row.itemCount > 0) {
message.warning('清空仓库后才可删除该仓库');
return;
}
setWarehouses(function (prev) {
return (prev || []).filter(function (r) { return r.id !== row.id; });
});
message.success('删除成功');
}
});
}, [setWarehouses]);
var columns = useMemo(function () {
return [
{
title: '序号',
key: 'serial',
width: 70,
fixed: 'left',
render: function (_, r, idx) {
return serialStart + idx + 1;
}
},
{ title: '仓库编码', dataIndex: 'warehouseCode', key: 'warehouseCode', width: 160, fixed: 'left' },
{ title: '仓库名称', dataIndex: 'warehouseName', key: 'warehouseName', width: 180, ellipsis: true },
{ title: '仓库地址', dataIndex: 'warehouseAddress', key: 'warehouseAddress', width: 240, ellipsis: true },
{ title: '仓库管理人', dataIndex: 'warehouseManager', key: 'warehouseManager', width: 140 },
{ title: '创建人', dataIndex: 'creatorName', key: 'creatorName', width: 120 },
{
title: '创建时间',
dataIndex: 'createTime',
key: 'createTime',
width: 200,
render: function (v) { return fmtYMDHM(v); }
},
{
title: '操作',
key: 'action',
width: 180,
fixed: 'right',
render: function (_, r) {
return React.createElement('div', { style: { display: 'flex', gap: 8, alignItems: 'center' } },
React.createElement(Button, { type: 'link', size: 'small', onClick: function () { handleEdit(r); } }, '编辑'),
React.createElement(Button, { type: 'link', size: 'small', danger: true, onClick: function () { handleDelete(r); } }, '删除')
);
}
}
];
}, [serialStart, handleDelete]);
return 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: '仓库管理' }] }),
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, { style: { marginBottom: 16 } },
React.createElement('div', { style: { display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: '16px 24px', alignItems: 'start' } },
React.createElement('div', { style: filterItemStyle },
React.createElement('div', { style: filterLabelStyle }, '仓库名称'),
React.createElement(Select, {
placeholder: '请输入或选择仓库名称',
style: filterControlStyle,
value: draft.warehouseName,
onChange: function (v) { setDraft(function (p) { return Object.assign({}, p, { warehouseName: v }); }); },
allowClear: true,
showSearch: true,
options: warehouseNameOptions,
filterOption: filterOption
})
),
React.createElement('div', { style: filterItemStyle },
React.createElement('div', { style: filterLabelStyle }, '创建人'),
React.createElement(Select, {
placeholder: '请选择创建人',
style: filterControlStyle,
value: draft.creatorName,
onChange: function (v) { setDraft(function (p) { return Object.assign({}, p, { creatorName: v }); }); },
allowClear: true,
showSearch: true,
options: creatorOptions
})
),
React.createElement('div', { style: filterItemStyle },
React.createElement('div', { style: filterLabelStyle }, '创建时间'),
React.createElement(RangePicker, {
style: filterControlStyle,
value: draft.createTimeRange,
onChange: function (v) { setDraft(function (p) { return Object.assign({}, p, { createTimeRange: v }); }); },
placeholder: ['开始时间', '结束时间'],
showTime: false
})
)
),
React.createElement('div', { style: { display: 'flex', justifyContent: 'flex-end', gap: 8, marginTop: 16 } },
React.createElement(Button, { onClick: handleReset }, '重置'),
React.createElement(Button, { type: 'primary', onClick: handleQuery }, '查询')
)
),
React.createElement(Card, null,
React.createElement('div', { style: { display: 'flex', justifyContent: 'flex-end', marginBottom: 12 } },
React.createElement(Button, { type: 'primary', onClick: handleAdd }, '新增')
),
React.createElement('style', null, tableSingleLineStyle),
React.createElement('div', { className: 'warehouse-list-table' },
React.createElement(Table, {
rowKey: 'id',
columns: columns,
dataSource: paged,
scroll: { x: 1200 },
size: 'small',
pagination: {
current: page,
pageSize: pageSize,
total: filtered.length,
showSizeChanger: true,
showQuickJumper: true,
showTotal: function (t) { return '共 ' + t + ' 条'; },
onChange: function (pg, ps) { setPage(pg); if (ps) setPageSize(ps); }
}
})
)
),
React.createElement(Drawer, {
title: addDrawerMode === 'edit' ? '编辑仓库' : '新增仓库',
placement: 'right',
width: 460,
open: addDrawerOpen,
onClose: handleAddCancel,
styles: { body: { padding: 24 } },
footer: React.createElement('div', { style: { display: 'flex', justifyContent: 'flex-end', gap: 8 } },
React.createElement(Button, { type: 'primary', onClick: handleAddSubmit }, '提交'),
React.createElement(Button, { onClick: handleAddCancel }, '取消')
)
},
React.createElement('div', { style: { display: 'flex', flexDirection: 'column', gap: 14 } },
React.createElement('div', null,
React.createElement('div', { style: { marginBottom: 6, color: '#666', fontSize: 14 } }, '仓库编码'),
React.createElement(Input, {
value: addForm.warehouseCode,
disabled: addDrawerMode === 'edit',
onChange: function (e) { setAddForm(function (p) { return Object.assign({}, p, { warehouseCode: e && e.target ? e.target.value : '' }); }); },
placeholder: '请输入仓库编码'
})
),
React.createElement('div', null,
React.createElement('div', { style: { marginBottom: 6, color: '#666', fontSize: 14 } }, '仓库名称'),
React.createElement(Input, {
value: addForm.warehouseName,
onChange: function (e) { setAddForm(function (p) { return Object.assign({}, p, { warehouseName: e && e.target ? e.target.value : '' }); }); },
placeholder: '请输入仓库名称'
})
),
React.createElement('div', null,
React.createElement('div', { style: { marginBottom: 6, color: '#666', fontSize: 14 } }, '仓库地址'),
React.createElement(Input, {
value: addForm.warehouseAddress,
onChange: function (e) { setAddForm(function (p) { return Object.assign({}, p, { warehouseAddress: e && e.target ? e.target.value : '' }); }); },
placeholder: '请输入仓库地址'
})
),
React.createElement('div', null,
React.createElement('div', { style: { marginBottom: 6, color: '#666', fontSize: 14 } }, '仓库管理人'),
React.createElement(Select, {
placeholder: '请选择人员',
value: addForm.warehouseManager,
onChange: function (v) { setAddForm(function (p) { return Object.assign({}, p, { warehouseManager: v }); }); },
style: { width: '100%' },
allowClear: true,
showSearch: true,
filterOption: filterOption,
options: warehouseManagerOptions
})
)
)
)
);
};

584
web端/运维管理/备件管理/备件库存.jsx Normal file
View File

@@ -0,0 +1,584 @@
// 【重要】必须使用 const Component 作为组件变量名
// 运维管理 - 备件库 - 备件库存（列表页原型）
const Component = function () {
var useState = React.useState;
var useMemo = React.useMemo;
var useCallback = React.useCallback;
var antd = window.antd;
var Breadcrumb = antd.Breadcrumb;
var Card = antd.Card;
var Button = antd.Button;
var Table = antd.Table;
var Select = antd.Select;
var Modal = antd.Modal;
var Drawer = antd.Drawer;
var Form = antd.Form;
var Input = antd.Input;
var Tabs = antd.Tabs;
var message = antd.message;
function filterOption(input, option) {
var label = (option && (option.label || option.children)) || '';
return String(label).toLowerCase().indexOf(String(input || '').toLowerCase()) >= 0;
}
var layoutStyle = { padding: '16px 24px', background: '#f5f5f5', minHeight: '100vh' };
var filterLabelStyle = { marginBottom: 6, fontSize: 14, color: 'rgba(0,0,0,0.65)' };
var filterItemStyle = { marginBottom: 12 };
var filterControlStyle = { width: '100%' };
var tableStyle = '.spare-stock-table .ant-table-thead th,.spare-stock-table .ant-table-tbody td{white-space:nowrap;}' +
'.spare-stock-table .col-stock-qty{text-align:left !important;}' +
'.spare-stock-table th.col-stock-qty{text-align:left !important;}';
var tabsAlignStyle = '.spare-stock-main-tabs .ant-tabs-nav{align-items:center;margin-bottom:0;}';
// 适配车型：选项 value 与列表一致；label 附带关联型号（与基本数据-型号参数对应）
var vehicleModelSpecMap = {
'飞驰49t': '海格牌KLQ5180XYKFCEV',
'宇通49t': 'KLQ6129',
'现代4.5t': 'BJ5180',
'跃进4.5t': '帅铃Q6',
'苏龙18t': '海格牌KLQ5180XYKFCEV'
};
var allVehicleModelOptions = useMemo(function () {
return [
{ value: '飞驰49t', label: '飞驰49t' },
{ value: '宇通49t', label: '宇通49t' },
{ value: '现代4.5t', label: '现代4.5t' },
{ value: '跃进4.5t', label: '跃进4.5t' },
{ value: '苏龙18t', label: '苏龙18t' }
];
}, []);
var addDrawerVehicleOptions = useMemo(function () {
return allVehicleModelOptions.map(function (opt) {
var spec = vehicleModelSpecMap[opt.value];
return {
value: opt.value,
label: spec ? opt.value + '（型号：' + spec + '）' : opt.label
};
});
}, [allVehicleModelOptions]);
// 样例数据：新件库 11 条 + 易损件库 5 条（入库/出库与业务截图一致）
var listState = useState(function () {
var XJ = '新件库';
var XJCode = 'WH-XJK';
var YS = '易损件库';
var YSCode = 'WH-YSK';
return [
{ id: 'ss-xj-01', warehouseCode: XJCode, warehouseName: XJ, spareCode: 'FC49t-XJ-0001', spareName: '去离子柱(飞驰49t-新件)', vehicleModels: ['飞驰49t'], stockQty: 34, totalInbound: 42, totalOutbound: 8 },
{ id: 'ss-xj-02', warehouseCode: XJCode, warehouseName: XJ, spareCode: 'FC49t-XJ-0002', spareName: '燃料电池空气滤芯(飞驰49t-新件)', vehicleModels: ['飞驰49t'], stockQty: 28, totalInbound: 55, totalOutbound: 27 },
{ id: 'ss-xj-03', warehouseCode: XJCode, warehouseName: XJ, spareCode: 'YT49t-XJ-0001', spareName: '去离子柱(宇通49t-新件)', vehicleModels: ['宇通49t'], stockQty: 20, totalInbound: 28, totalOutbound: 8 },
{ id: 'ss-xj-04', warehouseCode: XJCode, warehouseName: XJ, spareCode: 'YT49t-XJ-0002', spareName: '燃料电池空气滤芯(宇通49t-新件)', vehicleModels: ['宇通49t'], stockQty: 12, totalInbound: 18, totalOutbound: 6 },
{ id: 'ss-xj-05', warehouseCode: XJCode, warehouseName: XJ, spareCode: 'YT49t-XJ-0005', spareName: '燃料电池去离子水(宇通49t-新件)', vehicleModels: ['宇通49t'], stockQty: 5, totalInbound: 5, totalOutbound: 0 },
{ id: 'ss-xj-06', warehouseCode: XJCode, warehouseName: XJ, spareCode: 'YT49t-XJ-0029', spareName: '小循环滤网(宇通49t-新件)', vehicleModels: ['宇通49t'], stockQty: 11, totalInbound: 13, totalOutbound: 2 },
{ id: 'ss-xj-07', warehouseCode: XJCode, warehouseName: XJ, spareCode: 'YT49t-XJ-0030', spareName: '大循环滤网(宇通49t-新件)', vehicleModels: ['宇通49t'], stockQty: 10, totalInbound: 10, totalOutbound: 0 },
{ id: 'ss-xj-08', warehouseCode: XJCode, warehouseName: XJ, spareCode: 'XD4.5t-XJ-0008', spareName: '后尾灯(现代4.5t-新件)', vehicleModels: ['现代4.5t'], stockQty: 18, totalInbound: 40, totalOutbound: 22 },
{ id: 'ss-xj-09', warehouseCode: XJCode, warehouseName: XJ, spareCode: 'YJ4.5t-XJ-0035', spareName: '12V蓄电池(跃进4.5t-新件)', vehicleModels: ['跃进4.5t'], stockQty: 23, totalInbound: 26, totalOutbound: 3 },
{ id: 'ss-xj-10', warehouseCode: XJCode, warehouseName: XJ, spareCode: 'SL18t-XJ-0001', spareName: '去离子柱(苏龙18t-新件)', vehicleModels: ['苏龙18t'], stockQty: 11, totalInbound: 12, totalOutbound: 1 },
{ id: 'ss-xj-11', warehouseCode: XJCode, warehouseName: XJ, spareCode: 'SL18t-XJ-0002', spareName: '燃料电池空气滤芯(苏龙18t-新件)', vehicleModels: ['苏龙18t'], stockQty: 16, totalInbound: 16, totalOutbound: 0 },
{ id: 'ss-ys-01', warehouseCode: YSCode, warehouseName: YS, spareCode: 'TY-YS-0001', spareName: 'H1灯泡-易损件', vehicleModels: [], stockQty: 55, totalInbound: 55, totalOutbound: 0 },
{ id: 'ss-ys-02', warehouseCode: YSCode, warehouseName: YS, spareCode: 'TY-YS-0002', spareName: 'H3灯泡-易损件', vehicleModels: [], stockQty: 50, totalInbound: 50, totalOutbound: 0 },
{ id: 'ss-ys-03', warehouseCode: YSCode, warehouseName: YS, spareCode: 'TY-YS-0003', spareName: 'H7灯泡-易损件', vehicleModels: [], stockQty: 53, totalInbound: 53, totalOutbound: 0 },
{ id: 'ss-ys-04', warehouseCode: YSCode, warehouseName: YS, spareCode: 'TY-YS-0004', spareName: '小灯泡-易损件', vehicleModels: [], stockQty: 52, totalInbound: 52, totalOutbound: 0 },
{ id: 'ss-ys-05', warehouseCode: YSCode, warehouseName: YS, spareCode: 'TY-YS-0005', spareName: '2405灯泡-易损件', vehicleModels: [], stockQty: 110, totalInbound: 110, totalOutbound: 0 }
];
});
var list = listState[0];
// 入库 / 出库记录样例（原型）
var inboundListState = useState(function () {
return [
{ id: 'in-001', billNo: 'RK20250227001', inboundTime: '2025-02-27 09:12', warehouseName: '新件库', spareCode: 'FC49t-XJ-0001', spareName: '去离子柱(飞驰49t-新件)', qty: 4, operator: '张三' },
{ id: 'in-002', billNo: 'RK20250226088', inboundTime: '2025-02-26 14:30', warehouseName: '新件库', spareCode: 'YT49t-XJ-0002', spareName: '燃料电池空气滤芯(宇通49t-新件)', qty: 6, operator: '李四' },
{ id: 'in-003', billNo: 'RK20250225102', inboundTime: '2025-02-25 11:05', warehouseName: '易损件库', spareCode: 'TY-YS-0001', spareName: 'H1灯泡-易损件', qty: 20, operator: '王五' },
{ id: 'in-004', billNo: 'RK20250224056', inboundTime: '2025-02-24 16:20', warehouseName: '新件库', spareCode: 'SL18t-XJ-0002', spareName: '燃料电池空气滤芯(苏龙18t-新件)', qty: 8, operator: '张三' }
];
});
var inboundList = inboundListState[0];
var outboundListState = useState(function () {
return [
{ id: 'out-001', billNo: 'CK20250227012', outboundTime: '2025-02-27 10:08', warehouseName: '新件库', spareCode: 'FC49t-XJ-0002', spareName: '燃料电池空气滤芯(飞驰49t-新件)', qty: 2, recipient: '维修一组' },
{ id: 'out-002', billNo: 'CK20250226995', outboundTime: '2025-02-26 09:45', warehouseName: '新件库', spareCode: 'XD4.5t-XJ-0008', spareName: '后尾灯(现代4.5t-新件)', qty: 1, recipient: '维修二组' },
{ id: 'out-003', billNo: 'CK20250225880', outboundTime: '2025-02-25 13:22', warehouseName: '易损件库', spareCode: 'TY-YS-0003', spareName: 'H7灯泡-易损件', qty: 5, recipient: '场站 A' },
{ id: 'out-004', billNo: 'CK20250224771', outboundTime: '2025-02-24 08:50', warehouseName: '新件库', spareCode: 'YJ4.5t-XJ-0035', spareName: '12V蓄电池(跃进4.5t-新件)', qty: 1, recipient: '维修一组' }
];
});
var outboundList = outboundListState[0];
var inboundPageState = useState(1);
var inboundPage = inboundPageState[0];
var setInboundPage = inboundPageState[1];
var inboundPageSizeState = useState(10);
var inboundPageSize = inboundPageSizeState[0];
var setInboundPageSize = inboundPageSizeState[1];
var outboundPageState = useState(1);
var outboundPage = outboundPageState[0];
var setOutboundPage = outboundPageState[1];
var outboundPageSizeState = useState(10);
var outboundPageSize = outboundPageSizeState[0];
var setOutboundPageSize = outboundPageSizeState[1];
var mainTabState = useState('stock');
var mainTab = mainTabState[0];
var setMainTab = mainTabState[1];
var defaultDraft = {
warehouseName: undefined,
spareCode: undefined,
spareName: undefined,
vehicleModels: []
};
var draftState = useState(Object.assign({}, defaultDraft));
var draft = draftState[0];
var setDraft = draftState[1];
var appliedState = useState(Object.assign({}, defaultDraft));
var applied = appliedState[0];
var setApplied = appliedState[1];
var pageState = useState(1);
var page = pageState[0];
var setPage = pageState[1];
var pageSizeState = useState(10);
var pageSize = pageSizeState[0];
var setPageSize = pageSizeState[1];
var requirementModalState = useState(false);
var requirementModalOpen = requirementModalState[0];
var setRequirementModalOpen = requirementModalState[1];
var addDrawerState = useState(false);
var addDrawerOpen = addDrawerState[0];
var setAddDrawerOpen = addDrawerState[1];
var addForm = Form.useForm()[0];
var requirementDocContent = [
'一个「数字化资产ONEOS运管平台」中的「备件库存」模块',
'#面包屑：运维管理-备件库-备件库存',
'',
'1.筛选：',
'1.1.仓库名称：选择器，支持输入框内输入模糊搜索，下拉匹配正确项；',
'1.2.备件编码：选择器，支持输入框内输入模糊搜索，下拉匹配正确项；',
'1.3.备件名称：选择器，支持输入框内输入模糊搜索，下拉匹配正确项；',
'1.4.适配车型：选择器，支持多选，显示所有型号；',
'',
'2.列表；右侧为新增物料信息、导出按钮',
'2.1.序号：1.2.3.以此类推；',
'2.2.仓库编码：显示仓库编码；',
'2.3.仓库名称：显示仓库名称；',
'2.4.备件编码：显示备件编码；',
'2.5.备件名称：显示备件名称；',
'2.6.适配车型：显示适配车型，一个备件可能有多个车型；',
'2.7.库存数量：显示库存数量；',
'2.8.累积入库数量：显示该备件入库数量总和；',
'2.9.累积出库数量：显示该备件出库数量总和；',
'2.10.右下角为分页功能，支持选择单页显示数据条数；'
].join('\n');
var warehouseNameOptions = useMemo(function () {
var set = new Set();
(list || []).forEach(function (r) { if (r && r.warehouseName) set.add(r.warehouseName); });
return Array.from(set).map(function (v) { return { value: v, label: v }; });
}, [list]);
var spareCodeOptions = useMemo(function () {
var set = new Set();
(list || []).forEach(function (r) { if (r && r.spareCode) set.add(r.spareCode); });
return Array.from(set).map(function (v) { return { value: v, label: v }; });
}, [list]);
var spareNameOptions = useMemo(function () {
var set = new Set();
(list || []).forEach(function (r) { if (r && r.spareName) set.add(r.spareName); });
return Array.from(set).map(function (v) { return { value: v, label: v }; });
}, [list]);
function rowMatchesVehicleModels(row, selected) {
if (!selected || selected.length === 0) return true;
var models = row.vehicleModels || [];
for (var i = 0; i < selected.length; i++) {
if (models.indexOf(selected[i]) >= 0) return true;
}
return false;
}
var filtered = useMemo(function () {
return (list || []).filter(function (r) {
if (applied.warehouseName && r.warehouseName !== applied.warehouseName) return false;
if (applied.spareCode && r.spareCode !== applied.spareCode) return false;
if (applied.spareName && r.spareName !== applied.spareName) return false;
if (!rowMatchesVehicleModels(r, applied.vehicleModels)) return false;
return true;
});
}, [list, applied]);
var paged = useMemo(function () {
var start = (page - 1) * pageSize;
return filtered.slice(start, start + pageSize);
}, [filtered, page, pageSize]);
var serialStart = (page - 1) * pageSize;
var handleQuery = useCallback(function () {
setApplied({
warehouseName: draft.warehouseName,
spareCode: draft.spareCode,
spareName: draft.spareName,
vehicleModels: draft.vehicleModels ? draft.vehicleModels.slice() : []
});
setPage(1);
}, [draft]);
var handleReset = useCallback(function () {
setDraft(Object.assign({}, defaultDraft));
setApplied(Object.assign({}, defaultDraft));
setPage(1);
}, []);
var handleAdd = useCallback(function () {
addForm.resetFields();
setAddDrawerOpen(true);
}, [addForm]);
var handleAddDrawerClose = useCallback(function () {
setAddDrawerOpen(false);
addForm.resetFields();
}, [addForm]);
var handleAddDrawerSubmit = useCallback(function () {
addForm.validateFields().then(function () {
message.success('已保存（原型，联调时对接建档接口）');
setAddDrawerOpen(false);
addForm.resetFields();
}).catch(function () {});
}, [addForm]);
var handleExport = useCallback(function () {
message.success('导出当前筛选结果（原型，联调时对接导出接口）');
}, []);
var columns = useMemo(function () {
return [
{
title: '序号',
key: 'serial',
width: 70,
fixed: 'left',
render: function (_, r, idx) {
return serialStart + idx + 1;
}
},
{ title: '仓库编码', dataIndex: 'warehouseCode', key: 'warehouseCode', width: 120, fixed: 'left' },
{ title: '仓库名称', dataIndex: 'warehouseName', key: 'warehouseName', width: 160, ellipsis: true },
{ title: '备件编码', dataIndex: 'spareCode', key: 'spareCode', width: 120 },
{ title: '备件名称', dataIndex: 'spareName', key: 'spareName', width: 260, ellipsis: true },
{
title: '适配车型',
key: 'vehicleModels',
width: 220,
ellipsis: true,
render: function (_, r) {
var arr = r.vehicleModels || [];
return arr.length ? arr.join('、') : '-';
}
},
{
title: '库存数量',
dataIndex: 'stockQty',
key: 'stockQty',
width: 100,
align: 'left',
className: 'col-stock-qty',
onHeaderCell: function () { return { className: 'col-stock-qty' }; },
render: function (v) {
if (v == null) return '-';
return React.createElement('span', {
style: {
color: 'var(--ant-color-primary, #1677ff)',
fontWeight: 600,
fontSize: 15
}
}, v);
}
},
{
title: '累积入库数量',
dataIndex: 'totalInbound',
key: 'totalInbound',
width: 130,
render: function (v) { return v != null ? Number(v).toFixed(1) : '-'; }
},
{
title: '累积出库数量',
dataIndex: 'totalOutbound',
key: 'totalOutbound',
width: 130,
render: function (v) { return v != null ? Number(v).toFixed(1) : '-'; }
}
];
}, [serialStart]);
var inboundSerialStart = (inboundPage - 1) * inboundPageSize;
var inboundPaged = useMemo(function () {
var start = (inboundPage - 1) * inboundPageSize;
return (inboundList || []).slice(start, start + inboundPageSize);
}, [inboundList, inboundPage, inboundPageSize]);
var outboundSerialStart = (outboundPage - 1) * outboundPageSize;
var outboundPaged = useMemo(function () {
var start = (outboundPage - 1) * outboundPageSize;
return (outboundList || []).slice(start, start + outboundPageSize);
}, [outboundList, outboundPage, outboundPageSize]);
var inboundColumns = useMemo(function () {
return [
{ title: '序号', key: 'serial', width: 70, render: function (_, r, idx) { return inboundSerialStart + idx + 1; } },
{ title: '入库单号', dataIndex: 'billNo', key: 'billNo', width: 150 },
{ title: '入库时间', dataIndex: 'inboundTime', key: 'inboundTime', width: 160 },
{ title: '仓库名称', dataIndex: 'warehouseName', key: 'warehouseName', width: 120 },
{ title: '备件编码', dataIndex: 'spareCode', key: 'spareCode', width: 130 },
{ title: '备件名称', dataIndex: 'spareName', key: 'spareName', ellipsis: true },
{ title: '入库数量', dataIndex: 'qty', key: 'qty', width: 100 },
{ title: '经办人', dataIndex: 'operator', key: 'operator', width: 100 }
];
}, [inboundSerialStart]);
var outboundColumns = useMemo(function () {
return [
{ title: '序号', key: 'serial', width: 70, render: function (_, r, idx) { return outboundSerialStart + idx + 1; } },
{ title: '出库单号', dataIndex: 'billNo', key: 'billNo', width: 150 },
{ title: '出库时间', dataIndex: 'outboundTime', key: 'outboundTime', width: 160 },
{ title: '仓库名称', dataIndex: 'warehouseName', key: 'warehouseName', width: 120 },
{ title: '备件编码', dataIndex: 'spareCode', key: 'spareCode', width: 130 },
{ title: '备件名称', dataIndex: 'spareName', key: 'spareName', ellipsis: true },
{ title: '出库数量', dataIndex: 'qty', key: 'qty', width: 100 },
{ title: '领用方', dataIndex: 'recipient', key: 'recipient', width: 120 }
];
}, [outboundSerialStart]);
var tabItems = useMemo(function () {
var stockTab = React.createElement(Card, { style: { marginTop: 0 } },
React.createElement('style', null, tableStyle),
React.createElement('div', { className: 'spare-stock-table' },
React.createElement(Table, {
rowKey: 'id',
columns: columns,
dataSource: paged,
scroll: { x: 1460 },
size: 'small',
pagination: {
current: page,
pageSize: pageSize,
total: filtered.length,
showSizeChanger: true,
showQuickJumper: true,
showTotal: function (t) { return '共 ' + t + ' 条'; },
onChange: function (pg, ps) { setPage(pg); if (ps) setPageSize(ps); }
}
})
)
);
var inboundTab = React.createElement(Card, null,
React.createElement(Table, {
rowKey: 'id',
columns: inboundColumns,
dataSource: inboundPaged,
size: 'small',
scroll: { x: 1200 },
pagination: {
current: inboundPage,
pageSize: inboundPageSize,
total: (inboundList || []).length,
showSizeChanger: true,
showQuickJumper: true,
showTotal: function (t) { return '共 ' + t + ' 条'; },
onChange: function (pg, ps) { setInboundPage(pg); if (ps) setInboundPageSize(ps); }
}
})
);
var outboundTab = React.createElement(Card, null,
React.createElement(Table, {
rowKey: 'id',
columns: outboundColumns,
dataSource: outboundPaged,
size: 'small',
scroll: { x: 1200 },
pagination: {
current: outboundPage,
pageSize: outboundPageSize,
total: (outboundList || []).length,
showSizeChanger: true,
showQuickJumper: true,
showTotal: function (t) { return '共 ' + t + ' 条'; },
onChange: function (pg, ps) { setOutboundPage(pg); if (ps) setOutboundPageSize(ps); }
}
})
);
return [
{ key: 'stock', label: '备件库存', children: stockTab },
{ key: 'inbound', label: '入库记录', children: inboundTab },
{ key: 'outbound', label: '出库记录', children: outboundTab }
];
}, [
columns, paged, page, pageSize, filtered.length,
inboundColumns, inboundPaged, inboundPage, inboundPageSize, inboundList,
outboundColumns, outboundPaged, outboundPage, outboundPageSize, outboundList,
tableStyle
]);
return 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: '备件库存' }] }),
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(Drawer, {
title: '新增物料信息',
placement: 'right',
width: 440,
open: addDrawerOpen,
onClose: handleAddDrawerClose,
destroyOnClose: true,
footer: React.createElement('div', { style: { textAlign: 'right' } },
React.createElement(Button, { onClick: handleAddDrawerClose, style: { marginRight: 8 } }, '取消'),
React.createElement(Button, { type: 'primary', onClick: handleAddDrawerSubmit }, '确定')
)
},
React.createElement(Form, {
form: addForm,
layout: 'vertical',
preserve: false
},
React.createElement(Form.Item, {
name: 'spareCode',
label: '备件编码',
rules: [{ required: true, message: '请输入备件编码' }]
}, React.createElement(Input, { placeholder: '请输入备件编码', allowClear: true })),
React.createElement(Form.Item, {
name: 'spareName',
label: '备件名称',
rules: [{ required: true, message: '请输入备件名称' }]
}, React.createElement(Input, { placeholder: '请输入备件名称', allowClear: true })),
React.createElement(Form.Item, {
name: 'unit',
label: '计算单位',
rules: [{ required: true, message: '请输入计算单位' }]
}, React.createElement(Input, { placeholder: '请输入计算单位', allowClear: true })),
React.createElement(Form.Item, {
name: 'vehicleModels',
label: '适配车型',
rules: [{ required: true, message: '请选择适配车型', type: 'array', min: 1 }]
}, React.createElement(Select, {
mode: 'multiple',
placeholder: '请选择车型（可多选，选项含关联型号）',
allowClear: true,
options: addDrawerVehicleOptions,
showSearch: true,
filterOption: filterOption,
maxTagCount: 'responsive'
})),
React.createElement(Form.Item, {
name: 'alertThreshold',
label: '告警阈值',
extra: React.createElement('span', { style: { color: 'rgba(0,0,0,0.45)', fontSize: 12 } }, '备件库存低于阈值会推送提示用户')
}, React.createElement(Input, { placeholder: '请设置备件告警阈值', allowClear: true }))
)
),
mainTab === 'stock' ? React.createElement(Card, { style: { marginBottom: 16 } },
React.createElement('div', { style: { display: 'grid', gridTemplateColumns: '1fr 1fr 1fr 1fr', gap: '16px 24px', alignItems: 'start' } },
React.createElement('div', { style: filterItemStyle },
React.createElement('div', { style: filterLabelStyle }, '仓库名称'),
React.createElement(Select, {
placeholder: '请输入或选择仓库名称',
style: filterControlStyle,
value: draft.warehouseName,
onChange: function (v) { setDraft(function (p) { return Object.assign({}, p, { warehouseName: v }); }); },
allowClear: true,
showSearch: true,
options: warehouseNameOptions,
filterOption: filterOption
})
),
React.createElement('div', { style: filterItemStyle },
React.createElement('div', { style: filterLabelStyle }, '备件编码'),
React.createElement(Select, {
placeholder: '请输入或选择备件编码',
style: filterControlStyle,
value: draft.spareCode,
onChange: function (v) { setDraft(function (p) { return Object.assign({}, p, { spareCode: v }); }); },
allowClear: true,
showSearch: true,
options: spareCodeOptions,
filterOption: filterOption
})
),
React.createElement('div', { style: filterItemStyle },
React.createElement('div', { style: filterLabelStyle }, '备件名称'),
React.createElement(Select, {
placeholder: '请输入或选择备件名称',
style: filterControlStyle,
value: draft.spareName,
onChange: function (v) { setDraft(function (p) { return Object.assign({}, p, { spareName: v }); }); },
allowClear: true,
showSearch: true,
options: spareNameOptions,
filterOption: filterOption
})
),
React.createElement('div', { style: filterItemStyle },
React.createElement('div', { style: filterLabelStyle }, '适配车型'),
React.createElement(Select, {
mode: 'multiple',
placeholder: '请选择型号（可多选）',
style: filterControlStyle,
value: draft.vehicleModels,
onChange: function (v) { setDraft(function (p) { return Object.assign({}, p, { vehicleModels: v || [] }); }); },
allowClear: true,
options: allVehicleModelOptions,
maxTagCount: 'responsive'
})
)
),
React.createElement('div', { style: { display: 'flex', justifyContent: 'flex-end', gap: 8, marginTop: 16 } },
React.createElement(Button, { onClick: handleReset }, '重置'),
React.createElement(Button, { type: 'primary', onClick: handleQuery }, '查询')
)
) : null,
React.createElement('style', null, tabsAlignStyle),
React.createElement(Tabs, {
className: 'spare-stock-main-tabs',
activeKey: mainTab,
onChange: setMainTab,
items: tabItems,
destroyInactiveTabPane: false,
tabBarExtraContent: mainTab === 'stock'
? React.createElement('div', { style: { display: 'flex', alignItems: 'center', gap: 8 } },
React.createElement(Button, { type: 'primary', onClick: handleAdd }, '新增物料信息'),
React.createElement(Button, { onClick: handleExport }, '导出')
)
: null,
tabBarStyle: { marginBottom: 0 }
})
);
};

311
web端/运维管理/车辆业务/异动管理-查看.jsx
View File

@@ -1,5 +1,5 @@
// 【重要】必须使用 const Component 作为组件变量名
// 运维管理 - 车辆业务 - 异动管理 - 查看（只读）
// 运维管理 - 车辆业务 - 异动管理 - 查看（布局对齐「结束异动」，全部只读）
const Component = function () {
var useState = React.useState;
@@ -27,10 +27,25 @@ const Component = function () {
return null;
}
var layoutStyle = { padding: '16px 24px', background: '#f5f5f5', minHeight: '100vh' };
function fmtPlannedMileage(v) {
if (v == null || v === '') return '-';
var n = Number(v);
if (isNaN(n)) return String(v);
return n.toFixed(2);
}
function fmtNum2Display(v) {
if (v === null || v === undefined || v === '') return '';
var n = Number(v);
if (isNaN(n)) return String(v);
return n.toFixed(2);
}
var layoutStyle = { padding: '16px 24px', background: '#f5f5f5', minHeight: '100vh', paddingBottom: 80 };
var labelStyle = { marginBottom: 6, fontSize: 14, color: 'rgba(0,0,0,0.65)' };
var formItemStyle = { marginBottom: 12 };
var controlStyle = { width: '100%' };
var placeholderSelectVehicle = '请先选择车辆';
var destinationTypeOptions = useMemo(function () {
return [
@@ -40,24 +55,6 @@ const Component = function () {
];
}, []);
var destinationParkingOptions = useMemo(function () {
return [
{ value: '天河智慧停车场', label: '天河智慧停车场' },
{ value: '南山科技园停车场', label: '南山科技园停车场' },
{ value: '西湖景区停车场', label: '西湖景区停车场' },
{ value: '宁波江北停车场', label: '宁波江北停车场' },
{ value: '张江园区停车场', label: '张江园区停车场' }
];
}, []);
var destinationRepairOptions = useMemo(function () {
return [
{ value: '杭州拱墅维修站', label: '杭州拱墅维修站' },
{ value: '广州天河维修站', label: '广州天河维修站' },
{ value: '上海浦东维修站', label: '上海浦东维修站' }
];
}, []);
var changeTypeOptions = useMemo(function () {
return [
{ value: '维修', label: '维修' },
@@ -77,77 +74,47 @@ const Component = function () {
];
}, []);
// 原型：详情接口返回的只读数据（字段与「异动管理.新增」一致，并含审批状态）
var form = {
startTime: getInitialDateTime('2026-02-20 09:30'),
plannedEndTime: getInitialDateTime('2026-02-22 18:00'),
destinationType: '维修站',
destinationName: '广州天河维修站',
destinationNameOther: '',
changeType: '维修',
plannedMileageKm: '45.50',
remark: '车辆需进站检修制动系统，预计两日内完成。',
approvalStatus: '审批中'
};
// 原型：详情接口返回（联调时由路由/接口填充）；字段布局对齐「结束异动」
var movementReadonly = useMemo(function () {
return {
startTime: getInitialDateTime('2026-02-20 09:30'),
plannedEndTime: getInitialDateTime('2026-02-22 18:00'),
destinationType: '维修站',
destinationName: '广州天河维修站',
changeType: '维修',
plannedMileageKm: '45.50',
remark: '车辆需进站检修制动系统，预计两日内完成。',
approvalStatus: '审批中',
endDateTime: getInitialDateTime('2026-02-22 17:45')
};
}, []);
var vehicles = [
{
id: 1,
plateNo: '粤A12345',
vehicleType: '厢式货车',
brand: '东风',
model: 'DFH1180',
departParking: '天河智慧停车场',
startMileageKm: '15230.12',
startHydrogen: '28.30',
h2Unit: 'MPa',
startElectricKwh: '68.40'
},
{
id: 2,
plateNo: '浙A11111',
vehicleType: 'SUV',
brand: '小鹏',
model: 'P7',
departParking: '西湖景区停车场',
startMileageKm: '12010.00',
startHydrogen: '60.00',
h2Unit: '%',
startElectricKwh: '55.20'
}
];
// 查看页仅展示单辆车（1 条记录；联调时详情接口按单车辆返回）
var vehicles = useMemo(function () {
return [
{
id: 1,
plateNo: '粤A12345',
vehicleType: '厢式货车',
brand: '东风',
model: 'DFH1180',
departParking: '天河智慧停车场',
startMileageKm: '15230.12',
startHydrogen: '28.30',
h2Unit: 'MPa',
startElectricKwh: '68.40',
endMileageKm: '15280.55',
endHydrogen: '26.80',
endElectricKwh: '70.00'
}
];
}, []);
var destinationNameLabel = form.destinationType === '维修站' ? '维修站' : (form.destinationType === '停车场' ? '停车场' : '目的地名称');
function rowVehicleSelected(r) {
return !!(r && String(r.plateNo || '').trim());
}
var destinationNameNode = (function () {
if (form.destinationType === '其他') {
return React.createElement(Input, {
value: form.destinationNameOther || '-',
disabled: true
});
}
var opts = form.destinationType === '维修站' ? destinationRepairOptions : destinationParkingOptions;
return React.createElement(Select, {
style: controlStyle,
value: form.destinationName,
options: opts,
disabled: true
});
})();
var requirementModalState = useState(false);
var requirementModalOpen = requirementModalState[0];
var setRequirementModalOpen = requirementModalState[1];
var requirementDocContent = [
'一个「数字化资产ONEOS运管平台」中的「异动管理」「查看」模块',
'#面包屑：运维管理-车辆业务-异动管理-查看',
'页面布局与字段与「异动管理.新增」一致，所有表单项均为只读，仅供查询展示。',
'',
'1.异动情况：异动开始/预计结束日期、审批状态、异动目的地、目的地名称、异动类型、预计异动里程、备注 — 全部禁用不可编辑。',
'2.车辆信息：车牌号、车辆类型、品牌、型号、出发停车场、异动开始里程、异动开始氢量、异动开始电量 — 全部禁用；无新增行与删除操作。',
'3.底部仅提供「返回」按钮，返回异动管理列表（原型）。'
].join('\n');
var destLabel = movementReadonly.destinationType === '维修站' ? '维修站名称' : (movementReadonly.destinationType === '停车场' ? '停车场名称' : '目的地名称');
var vehicleColumns = useMemo(function () {
return [
@@ -155,6 +122,7 @@ const Component = function () {
title: '车牌号',
key: 'plateNo',
width: 140,
fixed: 'left',
render: function (_, r) {
return React.createElement(Input, { value: r.plateNo || '-', disabled: true });
}
@@ -164,7 +132,7 @@ const Component = function () {
key: 'vehicleType',
width: 120,
render: function (_, r) {
return React.createElement(Input, { value: r.vehicleType || '-', disabled: true });
return React.createElement(Input, { value: rowVehicleSelected(r) ? (r.vehicleType || '-') : '请先选择车辆', disabled: true });
}
},
{
@@ -172,7 +140,7 @@ const Component = function () {
key: 'brand',
width: 100,
render: function (_, r) {
return React.createElement(Input, { value: r.brand || '-', disabled: true });
return React.createElement(Input, { value: rowVehicleSelected(r) ? (r.brand || '-') : '请先选择车辆', disabled: true });
}
},
{
@@ -180,7 +148,7 @@ const Component = function () {
key: 'model',
width: 120,
render: function (_, r) {
return React.createElement(Input, { value: r.model || '-', disabled: true });
return React.createElement(Input, { value: rowVehicleSelected(r) ? (r.model || '-') : '请先选择车辆', disabled: true });
}
},
{
@@ -188,7 +156,7 @@ const Component = function () {
key: 'departParking',
width: 160,
render: function (_, r) {
return React.createElement(Input, { value: r.departParking || '-', disabled: true });
return React.createElement(Input, { value: rowVehicleSelected(r) ? (r.departParking || '-') : '请先选择车辆', disabled: true });
}
},
{
@@ -196,7 +164,27 @@ const Component = function () {
key: 'startMileageKm',
width: 160,
render: function (_, r) {
return React.createElement(Input, { value: r.startMileageKm || '-', disabled: true, addonAfter: 'km' });
return React.createElement(Input, {
value: rowVehicleSelected(r) ? fmtNum2Display(r.startMileageKm) : '',
disabled: true,
addonAfter: 'km',
placeholder: rowVehicleSelected(r) ? undefined : placeholderSelectVehicle
});
}
},
{
title: '异动结束里程',
key: 'endMileageKm',
width: 160,
render: function (_, r) {
if (!rowVehicleSelected(r)) {
return React.createElement(Input, { value: '', disabled: true, placeholder: placeholderSelectVehicle });
}
return React.createElement(Input, {
value: fmtNum2Display(r.endMileageKm),
disabled: true,
addonAfter: 'km'
});
}
},
{
@@ -204,8 +192,27 @@ const Component = function () {
key: 'startHydrogen',
width: 150,
render: function (_, r) {
var unit = rowVehicleSelected(r) ? (r.h2Unit || '') : '';
return React.createElement(Input, Object.assign({
value: rowVehicleSelected(r) ? fmtNum2Display(r.startHydrogen) : '',
disabled: true,
placeholder: rowVehicleSelected(r) ? undefined : placeholderSelectVehicle
}, unit ? { addonAfter: unit } : {}));
}
},
{
title: '异动结束氢量',
key: 'endHydrogen',
width: 150,
render: function (_, r) {
if (!rowVehicleSelected(r)) {
return React.createElement(Input, { value: '', disabled: true, placeholder: placeholderSelectVehicle });
}
var unit = r.h2Unit || '';
return React.createElement(Input, { value: r.startHydrogen || '-', disabled: true, addonAfter: unit || '-' });
return React.createElement(Input, Object.assign({
value: fmtNum2Display(r.endHydrogen),
disabled: true
}, unit ? { addonAfter: unit } : {}));
}
},
{
@@ -213,12 +220,47 @@ const Component = function () {
key: 'startElectricKwh',
width: 150,
render: function (_, r) {
return React.createElement(Input, { value: r.startElectricKwh || '-', disabled: true, addonAfter: 'kWh' });
return React.createElement(Input, {
value: rowVehicleSelected(r) ? fmtNum2Display(r.startElectricKwh) : '',
disabled: true,
addonAfter: 'kWh',
placeholder: rowVehicleSelected(r) ? undefined : placeholderSelectVehicle
});
}
},
{
title: '异动结束电量',
key: 'endElectricKwh',
width: 150,
render: function (_, r) {
if (!rowVehicleSelected(r)) {
return React.createElement(Input, { value: '', disabled: true, placeholder: placeholderSelectVehicle });
}
return React.createElement(Input, {
value: fmtNum2Display(r.endElectricKwh),
disabled: true,
addonAfter: 'kWh'
});
}
}
];
}, []);
var requirementModalState = useState(false);
var requirementModalOpen = requirementModalState[0];
var setRequirementModalOpen = requirementModalState[1];
var requirementDocContent = [
'一个「数字化资产ONEOS运管平台」中的「异动管理」「查看」模块',
'#面包屑：运维管理-车辆业务-异动管理-查看',
'页面布局与字段与「异动管理-结束异动」一致；另含「审批状态」只读展示。',
'所有表单项、表格单元均为禁用只读，仅供查询展示。',
'',
'1.异动情况：异动开始/预计结束日期、异动目的地、目的地名称、异动类型、预计异动里程、审批状态、异动结束时间、备注 — 全部只读。',
'2.车辆信息：与结束异动表列一致（含异动结束里程/氢量/电量）；仅展示单辆车（表格 1 行）— 全部只读；无新增行与删除。',
'3.底部仅「返回」按钮，返回异动管理列表（原型）。'
].join('\n');
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 } },
@@ -243,7 +285,7 @@ const Component = function () {
style: controlStyle,
showTime: { format: 'HH:mm' },
format: 'YYYY-MM-DD HH:mm',
value: form.startTime,
value: movementReadonly.startTime,
disabled: true,
inputReadOnly: true
})
@@ -254,59 +296,67 @@ const Component = function () {
style: controlStyle,
showTime: { format: 'HH:mm' },
format: 'YYYY-MM-DD HH:mm',
value: form.plannedEndTime,
value: movementReadonly.plannedEndTime,
disabled: true,
inputReadOnly: true
})
),
React.createElement('div', { style: formItemStyle },
React.createElement('div', { style: labelStyle }, '异动目的地'),
React.createElement(Select, {
style: controlStyle,
value: movementReadonly.destinationType,
options: destinationTypeOptions,
disabled: true
})
),
React.createElement('div', { style: formItemStyle },
React.createElement('div', { style: labelStyle }, destLabel),
React.createElement(Input, { value: movementReadonly.destinationName || '-', disabled: true })
),
React.createElement('div', { style: formItemStyle },
React.createElement('div', { style: labelStyle }, '异动类型'),
React.createElement(Select, {
style: controlStyle,
value: movementReadonly.changeType,
options: changeTypeOptions,
disabled: true
})
),
React.createElement('div', { style: formItemStyle },
React.createElement('div', { style: labelStyle }, '预计异动里程'),
React.createElement(Input, {
value: fmtPlannedMileage(movementReadonly.plannedMileageKm),
disabled: true,
addonAfter: 'km'
})
),
React.createElement('div', { style: formItemStyle },
React.createElement('div', { style: labelStyle }, '审批状态'),
React.createElement(Select, {
style: controlStyle,
value: form.approvalStatus,
value: movementReadonly.approvalStatus,
options: approvalStatusOptions,
disabled: true
})
),
React.createElement('div', { style: formItemStyle }),
React.createElement('div', { style: formItemStyle }),
React.createElement('div', { style: formItemStyle },
React.createElement('div', { style: labelStyle }, '异动目的地'),
React.createElement(Select, {
React.createElement('div', { style: labelStyle }, '异动结束时间'),
React.createElement(DatePicker, {
style: controlStyle,
value: form.destinationType,
options: destinationTypeOptions,
disabled: true
})
),
React.createElement('div', { style: formItemStyle },
React.createElement('div', { style: labelStyle }, destinationNameLabel),
destinationNameNode
),
React.createElement('div', { style: formItemStyle },
React.createElement('div', { style: labelStyle }, '异动类型'),
React.createElement(Select, {
style: controlStyle,
value: form.changeType,
options: changeTypeOptions,
disabled: true
})
),
React.createElement('div', { style: formItemStyle },
React.createElement('div', { style: labelStyle }, '预计异动里程'),
React.createElement(Input, {
value: form.plannedMileageKm || '-',
showTime: { format: 'HH:mm' },
format: 'YYYY-MM-DD HH:mm',
value: movementReadonly.endDateTime,
disabled: true,
addonAfter: 'km'
inputReadOnly: true
})
),
React.createElement('div', { style: formItemStyle }),
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.remark || '-',
value: movementReadonly.remark || '-',
disabled: true,
autoSize: { minRows: 3, maxRows: 6 }
})
@@ -321,11 +371,10 @@ const Component = function () {
dataSource: vehicles,
size: 'small',
pagination: false,
scroll: { x: 1180 }
scroll: { x: 1780 }
})
),
React.createElement('div', { style: { height: 56 } }),
React.createElement('div', {
style: {
position: 'fixed',

464
web端/运维管理/车辆业务/异动管理-结束异动.jsx Normal file
View File

@@ -0,0 +1,464 @@
// 【重要】必须使用 const Component 作为组件变量名
// 运维管理 - 车辆业务 - 异动管理 - 结束异动
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 DatePicker = antd.DatePicker;
var Table = antd.Table;
var Modal = antd.Modal;
var message = antd.message;
function getInitialDateTime(str) {
try {
if (window.dayjs) return window.dayjs(str);
} catch (e1) {}
try {
if (window.moment) return window.moment(str, 'YYYY-MM-DD HH:mm');
} catch (e2) {}
return null;
}
function fmtPlannedMileage(v) {
if (v == null || v === '') return '-';
var n = Number(v);
if (isNaN(n)) return String(v);
return n.toFixed(2);
}
function fmtNum2Display(v) {
if (v === null || v === undefined || v === '') return '';
var n = Number(v);
if (isNaN(n)) return String(v);
return n.toFixed(2);
}
function toFixed2Input(v) {
var s = String(v === null || v === undefined ? '' : v);
s = s.replace(/[^\d.]/g, '');
var firstDot = s.indexOf('.');
if (firstDot >= 0) {
s = s.slice(0, firstDot + 1) + s.slice(firstDot + 1).replace(/\./g, '');
}
if (firstDot >= 0) {
var a = s.split('.');
s = a[0] + '.' + (a[1] || '').slice(0, 2);
}
return s;
}
var layoutStyle = { padding: '16px 24px', background: '#f5f5f5', minHeight: '100vh', paddingBottom: 80 };
var labelStyle = { marginBottom: 6, fontSize: 14, color: 'rgba(0,0,0,0.65)' };
var formItemStyle = { marginBottom: 12 };
var controlStyle = { width: '100%' };
var placeholderSelectVehicle = '请先选择车辆';
var requiredMarkStyle = { color: '#ff4d4f', marginRight: 4, fontFamily: 'SimSun, sans-serif' };
function labelWithRequired(text, required) {
return React.createElement('div', { style: labelStyle },
required ? React.createElement('span', { style: requiredMarkStyle }, '*') : null,
text
);
}
var destinationTypeOptions = useMemo(function () {
return [
{ value: '停车场', label: '停车场' },
{ value: '维修站', label: '维修站' },
{ value: '其他', label: '其他' }
];
}, []);
var changeTypeOptions = useMemo(function () {
return [
{ value: '维修', label: '维修' },
{ value: '保养', label: '保养' },
{ value: '年审', label: '年审' },
{ value: '其他', label: '其他' }
];
}, []);
// 原型：从列表跳转带入的异动与车辆（联调时由路由/接口填充）
var movementReadonly = useMemo(function () {
return {
startTime: getInitialDateTime('2026-02-24 08:15'),
plannedEndTime: getInitialDateTime('2026-02-24 12:00'),
destinationType: '其他',
destinationName: '车管所检测线',
changeType: '年审',
plannedMileageKm: '8.20',
remark: '年审上线检测，预计半日完成。'
};
}, []);
// 车辆信息：结束里程/氢量/电量可编辑（规则同新增页开始三项）
var vehiclesState = useState([
{
id: 1,
plateNo: '粤B11111',
vehicleType: '轿车',
brand: '比亚迪',
model: '汉',
departParking: '南山科技园停车场',
startMileageKm: '8020.50',
startHydrogen: '55.00',
h2Unit: '%',
startElectricKwh: '62.10',
endMileageKm: '8055.20',
endHydrogen: '52.30',
endElectricKwh: '58.88'
}
]);
var vehicles = vehiclesState[0];
var setVehicles = vehiclesState[1];
var updateVehicleRow = useCallback(function (index, patch) {
setVehicles(function (prev) {
var list = prev.slice();
var cur = list[index] || {};
list[index] = Object.assign({}, cur, patch);
return list;
});
}, []);
// 1.7 异动结束时间：必填，YYYY-MM-DD HH:mm
var endDateTimeState = useState(getInitialDateTime('2026-02-24 11:30'));
var endDateTime = endDateTimeState[0];
var setEndDateTime = endDateTimeState[1];
function rowVehicleSelected(r) {
return !!(r && String(r.plateNo || '').trim());
}
var vehicleColumns = useMemo(function () {
return [
{
title: '车牌号',
key: 'plateNo',
width: 140,
fixed: 'left',
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: rowVehicleSelected(r) ? (r.vehicleType || '-') : '请先选择车辆', disabled: true });
}
},
{
title: '品牌',
key: 'brand',
width: 100,
render: function (_, r) {
return React.createElement(Input, { value: rowVehicleSelected(r) ? (r.brand || '-') : '请先选择车辆', disabled: true });
}
},
{
title: '型号',
key: 'model',
width: 120,
render: function (_, r) {
return React.createElement(Input, { value: rowVehicleSelected(r) ? (r.model || '-') : '请先选择车辆', disabled: true });
}
},
{
title: '出发停车场',
key: 'departParking',
width: 160,
render: function (_, r) {
return React.createElement(Input, { value: rowVehicleSelected(r) ? (r.departParking || '-') : '请先选择车辆', disabled: true });
}
},
{
title: '异动开始里程',
key: 'startMileageKm',
width: 160,
render: function (_, r) {
return React.createElement(Input, {
value: rowVehicleSelected(r) ? fmtNum2Display(r.startMileageKm) : '',
disabled: true,
addonAfter: 'km',
placeholder: rowVehicleSelected(r) ? undefined : placeholderSelectVehicle
});
}
},
{
title: React.createElement('span', null, React.createElement('span', { style: requiredMarkStyle }, '*'), '异动结束里程'),
key: 'endMileageKm',
width: 160,
render: function (_, r, index) {
if (!rowVehicleSelected(r)) {
return React.createElement(Input, { value: '', disabled: true, placeholder: placeholderSelectVehicle });
}
return React.createElement(Input, {
value: r.endMileageKm,
onChange: function (e) { updateVehicleRow(index, { endMileageKm: toFixed2Input(e.target.value) }); },
placeholder: '0.00',
addonAfter: 'km'
});
}
},
{
title: '异动开始氢量',
key: 'startHydrogen',
width: 150,
render: function (_, r) {
var unit = rowVehicleSelected(r) ? (r.h2Unit || '') : '';
return React.createElement(Input, Object.assign({
value: rowVehicleSelected(r) ? fmtNum2Display(r.startHydrogen) : '',
disabled: true,
placeholder: rowVehicleSelected(r) ? undefined : placeholderSelectVehicle
}, unit ? { addonAfter: unit } : {}));
}
},
{
title: React.createElement('span', null, React.createElement('span', { style: requiredMarkStyle }, '*'), '异动结束氢量'),
key: 'endHydrogen',
width: 150,
render: function (_, r, index) {
if (!rowVehicleSelected(r)) {
return React.createElement(Input, { value: '', disabled: true, placeholder: placeholderSelectVehicle });
}
var unit = r.h2Unit || '';
return React.createElement(Input, Object.assign({
value: r.endHydrogen,
onChange: function (e) { updateVehicleRow(index, { endHydrogen: toFixed2Input(e.target.value) }); },
placeholder: '0.00'
}, unit ? { addonAfter: unit } : {}));
}
},
{
title: '异动开始电量',
key: 'startElectricKwh',
width: 150,
render: function (_, r) {
return React.createElement(Input, {
value: rowVehicleSelected(r) ? fmtNum2Display(r.startElectricKwh) : '',
disabled: true,
addonAfter: 'kWh',
placeholder: rowVehicleSelected(r) ? undefined : placeholderSelectVehicle
});
}
},
{
title: React.createElement('span', null, React.createElement('span', { style: requiredMarkStyle }, '*'), '异动结束电量'),
key: 'endElectricKwh',
width: 150,
render: function (_, r, index) {
if (!rowVehicleSelected(r)) {
return React.createElement(Input, { value: '', disabled: true, placeholder: placeholderSelectVehicle });
}
return React.createElement(Input, {
value: r.endElectricKwh,
onChange: function (e) { updateVehicleRow(index, { endElectricKwh: toFixed2Input(e.target.value) }); },
placeholder: '0.00',
addonAfter: 'kWh'
});
}
}
];
}, [updateVehicleRow]);
var requirementModalState = useState(false);
var requirementModalOpen = requirementModalState[0];
var setRequirementModalOpen = requirementModalState[1];
var requirementDocContent = [
'一个「数字化资产ONEOS运管平台」中的「异动管理」「结束异动」模块',
'#面包屑：运维管理-车辆业务-异动管理-结束异动',
'',
'1.异动情况：',
'1.1.异动开始日期：显示异动开始日期：YYYY-MM-DD HH:MM；',
'1.2.异动预计结束日期：显示异动预计结束日期，格式为：YYYY-MM-DD HH:MM；',
'1.3.异动目的地：显示异动目的地，包括：停车场、维修站、其他；',
'1.4.目的地名称：显示目的地名称，包括：停车场名称、维修站名称、其他；',
'1.5.异动类型：显示异动类型，包括：维修、保养、年审、其他；',
'1.6.预计异动里程：显示预计异动里程，支持2位小数，后缀为km；',
'1.7.异动结束时间：必填项，日期选择器，格式为：YYYY-MM-DD HH:MM；',
'1.8.备注：显示备注信息；',
'',
'2.车辆信息：',
'2.1.车牌号：输入框（禁用），显示车牌号；',
'2.2.车辆类型：根据所选车辆类型自动反写，默认提示为请先选择车辆；',
'2.3.品牌：根据所选车辆品牌自动反写，默认提示为请先选择车辆；',
'2.4.型号：根据所选车辆型号自动反写，默认提示为请先选择车辆；',
'2.5.出发停车场：根据所选车辆出发时停车场自动反写，默认提示为请先选择车辆；',
'2.6.异动开始里程：输入框（禁用），精确至2位小数，后缀为km；',
'2.7.异动结束里程：必填项，输入框，精确至2位小数，后缀为km；',
'2.8.异动开始氢量：输入框（禁用），精确至2位小数，后缀为%或MPa，根据所选车辆型号中获取；',
'2.9.异动结束氢量：必填项，输入框，精确至2位小数，后缀为%或MPa，根据所选车辆型号中获取；',
'2.10.异动开始电量：输入框（禁用），精确至2位小数，后缀为kWh；',
'2.11.异动结束电量：必填项，输入框，精确至2位小数，后缀为kWh；',
'2.12.异动结束电量：必填项，输入框，精确至2位小数，后缀为kWh；',
'',
'3.底部为提交、取消；',
'3.1.提交：提交进行必填项校验，提交成功后计入历史记录；',
'3.2.取消：点击取消，返回列表；'
].join('\n');
var handleSubmit = useCallback(function () {
if (!endDateTime) {
message.error('请选择异动结束时间');
return;
}
for (var i = 0; i < (vehicles || []).length; i++) {
var r = vehicles[i];
if (!rowVehicleSelected(r)) continue;
if (!String(r.endMileageKm || '').trim()) {
message.error('请填写异动结束里程');
return;
}
if (!String(r.endHydrogen || '').trim()) {
message.error('请填写异动结束氢量');
return;
}
if (!String(r.endElectricKwh || '').trim()) {
message.error('请填写异动结束电量');
return;
}
}
message.success('提交成功（原型，联调时对接结束异动接口）');
}, [vehicles, endDateTime]);
var handleCancel = useCallback(function () {
message.info('取消并返回（原型，联调时路由返回上一页）');
}, []);
var destLabel = movementReadonly.destinationType === '维修站' ? '维修站名称' : (movementReadonly.destinationType === '停车场' ? '停车场名称' : '目的地名称');
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,
showTime: { format: 'HH:mm' },
format: 'YYYY-MM-DD HH:mm',
value: movementReadonly.startTime,
disabled: true,
inputReadOnly: true
})
),
React.createElement('div', { style: formItemStyle },
React.createElement('div', { style: labelStyle }, '异动预计结束日期'),
React.createElement(DatePicker, {
style: controlStyle,
showTime: { format: 'HH:mm' },
format: 'YYYY-MM-DD HH:mm',
value: movementReadonly.plannedEndTime,
disabled: true,
inputReadOnly: true
})
),
React.createElement('div', { style: formItemStyle },
React.createElement('div', { style: labelStyle }, '异动目的地'),
React.createElement(Select, {
style: controlStyle,
value: movementReadonly.destinationType,
options: destinationTypeOptions,
disabled: true
})
),
React.createElement('div', { style: formItemStyle },
React.createElement('div', { style: labelStyle }, destLabel),
React.createElement(Input, { value: movementReadonly.destinationName || '-', disabled: true })
),
React.createElement('div', { style: formItemStyle },
React.createElement('div', { style: labelStyle }, '异动类型'),
React.createElement(Select, {
style: controlStyle,
value: movementReadonly.changeType,
options: changeTypeOptions,
disabled: true
})
),
React.createElement('div', { style: formItemStyle },
React.createElement('div', { style: labelStyle }, '预计异动里程'),
React.createElement(Input, {
value: fmtPlannedMileage(movementReadonly.plannedMileageKm),
disabled: true,
addonAfter: 'km'
})
),
React.createElement('div', { style: formItemStyle },
labelWithRequired('异动结束时间', true),
React.createElement(DatePicker, {
style: controlStyle,
showTime: { format: 'HH:mm' },
format: 'YYYY-MM-DD HH:mm',
value: endDateTime,
onChange: function (d) { setEndDateTime(d); },
placeholder: '请选择异动结束时间'
})
),
React.createElement('div', { style: Object.assign({}, formItemStyle, { gridColumn: 'span 3' }) },
React.createElement('div', { style: labelStyle }, '备注'),
React.createElement(Input.TextArea, {
value: movementReadonly.remark || '-',
disabled: true,
autoSize: { minRows: 3, maxRows: 6 }
})
)
)
),
React.createElement(Card, { title: '车辆信息', style: { marginBottom: 16 } },
React.createElement(Table, {
rowKey: 'id',
columns: vehicleColumns,
dataSource: vehicles,
size: 'small',
pagination: false,
scroll: { x: 1780 }
})
),
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, { type: 'primary', onClick: handleSubmit }, '提交'),
React.createElement(Button, { onClick: handleCancel }, '取消')
)
)
);
};

564
web端/运维管理/车辆业务/异动管理-编辑.jsx Normal file
View File

@@ -0,0 +1,564 @@
// 【重要】必须使用 const Component 作为组件变量名
// 运维管理 - 车辆业务 - 异动管理 - 编辑
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 DatePicker = antd.DatePicker;
var Table = antd.Table;
var Modal = antd.Modal;
var message = antd.message;
function filterOption(input, option) {
var label = (option && (option.label || option.children)) || '';
return String(label).toLowerCase().indexOf(String(input || '').toLowerCase()) >= 0;
}
function toFixed2Input(v) {
var s = String(v === null || v === undefined ? '' : v);
s = s.replace(/[^\d.]/g, '');
var firstDot = s.indexOf('.');
if (firstDot >= 0) {
s = s.slice(0, firstDot + 1) + s.slice(firstDot + 1).replace(/\./g, '');
}
if (firstDot >= 0) {
var a = s.split('.');
s = a[0] + '.' + (a[1] || '').slice(0, 2);
}
return s;
}
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 reqStarStyle = { color: '#ff4d4f', marginRight: 4 };
var reqStar = React.createElement('span', { style: reqStarStyle }, '*');
// 车辆表（用于车牌选择与反写）
var vehicleDb = useMemo(function () {
return [
{ plateNo: '粤A12345', vehicleType: '厢式货车', brand: '东风', model: 'DFH1180', departParking: '天河智慧停车场', h2Unit: 'MPa' },
{ plateNo: '粤B11111', vehicleType: '轿车', brand: '比亚迪', model: '汉', departParking: '南山科技园停车场', h2Unit: '%' },
{ plateNo: '浙A11111', vehicleType: 'SUV', brand: '小鹏', model: 'P7', departParking: '西湖景区停车场', h2Unit: '%' },
{ plateNo: '浙B22222', vehicleType: '轿车', brand: '蔚来', model: 'ET5', departParking: '宁波江北停车场', h2Unit: 'MPa' },
{ plateNo: '沪A30003', vehicleType: '厢式货车', brand: '福田', model: 'BJ1180', departParking: '张江园区停车场', h2Unit: 'MPa' }
];
}, []);
var plateOptions = useMemo(function () {
return vehicleDb.map(function (v) { return { value: v.plateNo, label: v.plateNo }; });
}, [vehicleDb]);
var destinationTypeOptions = useMemo(function () {
return [
{ value: '停车场', label: '停车场' },
{ value: '维修站', label: '维修站' },
{ value: '其他', label: '其他' }
];
}, []);
var destinationParkingOptions = useMemo(function () {
return [
{ value: '天河智慧停车场', label: '天河智慧停车场' },
{ value: '南山科技园停车场', label: '南山科技园停车场' },
{ value: '西湖景区停车场', label: '西湖景区停车场' },
{ value: '宁波江北停车场', label: '宁波江北停车场' },
{ value: '张江园区停车场', label: '张江园区停车场' }
];
}, []);
var destinationRepairOptions = useMemo(function () {
return [
{ value: '杭州拱墅维修站', label: '杭州拱墅维修站' },
{ value: '广州天河维修站', label: '广州天河维修站' },
{ value: '上海浦东维修站', label: '上海浦东维修站' }
];
}, []);
var changeTypeOptions = useMemo(function () {
return [
{ value: '维修', label: '维修' },
{ value: '保养', label: '保养' },
{ value: '年审', label: '年审' },
{ value: '其他', label: '其他' }
];
}, []);
var requirementModalState = useState(false);
var requirementModalOpen = requirementModalState[0];
var setRequirementModalOpen = requirementModalState[1];
var requirementDocContent = [
'一个「数字化资产ONEOS运管平台」中的「异动管理」「编辑」模块',
'#面包屑：运维管理-车辆业务-异动管理-编辑',
'',
'1.异动情况；',
'1.1.异动开始日期：必填项，日期选择器，格式为：YYYY-MM-DD HH:MM；',
'1.2.异动预计结束日期：必填项，日期选择器，格式为：YYYY-MM-DD HH:MM；',
'1.3.异动目的地：必填项，选择器，选项为：停车场、维修站、其他；',
'2.4.目的地名称：必填项，如异动目的地为停车场，则此处为停车场（选择器），如异动目的地为维修站，则此处为维修站（选择器），如异动目的地为其他，则此处为输入框（自定义输入）；',
'2.5.异动类型：必填项，选择器，选项为：维修、保养、年审、其他；',
'2.6.预计异动里程：输入框，支持2位小数输入，后缀为km；',
'2.7.备注：文本域，支持自定义输入；',
'',
'2.车辆信息：',
'2.1.车牌号：显示车牌号，支持输入框模糊搜索下拉匹配对应选项；',
'2.2.车辆类型：根据所选车辆类型自动反写，默认提示为请先选择车辆；',
'2.3.品牌：根据所选车辆品牌自动反写，默认提示为请先选择车辆；',
'2.4.型号：根据所选车辆型号自动反写，默认提示为请先选择车辆；',
'2.5.出发停车场：根据所选车辆出发时停车场自动反写，默认提示为请先选择车辆；',
'2.6.异动开始里程：必填项，输入框，精确至2位小数，后缀为km；',
'2.7.异动开始氢量：必填项，输入框，精确至2位小数，后缀为%或MPa，根据所选车辆型号中获取；',
'2.8.异动开始电量：必填项，输入框，精确至2位小数，后缀为kWh；',
'2.9.操作：删除；',
'2.10.新增一行：铺满整行；',
'',
'3.底部为提交审核、保存、取消；'
].join('\n');
var formState = useState({
startTime: null,
plannedEndTime: null,
destinationType: undefined,
destinationName: undefined,
destinationNameOther: '',
changeType: undefined,
plannedMileageKm: '',
remark: ''
});
var form = formState[0];
var setForm = formState[1];
var errorsState = useState({});
var errors = errorsState[0];
var setErrors = errorsState[1];
var rowIdRef = React.useRef(2);
var vehiclesState = useState([
{
id: 1,
plateNo: undefined,
vehicleType: '',
brand: '',
model: '',
departParking: '',
h2Unit: '',
startMileageKm: '',
startHydrogen: '',
startElectricKwh: ''
}
]);
var vehicles = vehiclesState[0];
var setVehicles = vehiclesState[1];
var updateForm = useCallback(function (patch) {
setForm(function (p) { return Object.assign({}, p, patch); });
}, []);
var updateRow = useCallback(function (index, patch) {
setVehicles(function (prev) {
var list = prev.slice();
var cur = list[index] || {};
list[index] = Object.assign({}, cur, patch);
return list;
});
}, []);
var handlePlateChange = useCallback(function (index, plateNo) {
var v = vehicleDb.find(function (x) { return x.plateNo === plateNo; });
updateRow(index, {
plateNo: plateNo,
vehicleType: v ? v.vehicleType : '',
brand: v ? v.brand : '',
model: v ? v.model : '',
departParking: v ? v.departParking : '',
h2Unit: v ? v.h2Unit : ''
});
}, [vehicleDb, updateRow]);
var addRow = useCallback(function () {
setVehicles(function (prev) {
return prev.concat([{
id: rowIdRef.current++,
plateNo: undefined,
vehicleType: '',
brand: '',
model: '',
departParking: '',
h2Unit: '',
startMileageKm: '',
startHydrogen: '',
startElectricKwh: ''
}]);
});
}, []);
var removeRow = useCallback(function (index) {
setVehicles(function (prev) {
var list = prev.slice();
list.splice(index, 1);
if (list.length === 0) {
return [{
id: rowIdRef.current++,
plateNo: undefined,
vehicleType: '',
brand: '',
model: '',
departParking: '',
h2Unit: '',
startMileageKm: '',
startHydrogen: '',
startElectricKwh: ''
}];
}
return list;
});
}, []);
function validate() {
var e = {};
if (!form.startTime) e.startTime = '请选择异动开始日期';
if (!form.plannedEndTime) e.plannedEndTime = '请选择异动预计结束日期';
if (!form.destinationType) e.destinationType = '请选择异动目的地';
if (form.destinationType === '其他') {
if (!String(form.destinationNameOther || '').trim()) e.destinationName = '请输入目的地名称';
} else {
if (!form.destinationName) e.destinationName = '请选择目的地名称';
}
if (!form.changeType) e.changeType = '请选择异动类型';
var effectiveRows = (vehicles || []).filter(function (r) { return r && String(r.plateNo || '').trim(); });
if (effectiveRows.length === 0) e.vehicleList = '请至少选择一辆车';
for (var i = 0; i < (vehicles || []).length; i++) {
var r = vehicles[i] || {};
if (!String(r.plateNo || '').trim()) continue;
if (!String(r.startMileageKm || '').trim()) e['row_' + i + '_startMileageKm'] = '请输入异动开始里程';
if (!String(r.startHydrogen || '').trim()) e['row_' + i + '_startHydrogen'] = '请输入异动开始氢量';
if (!String(r.startElectricKwh || '').trim()) e['row_' + i + '_startElectricKwh'] = '请输入异动开始电量';
}
setErrors(e);
return Object.keys(e).length === 0;
}
var handleSubmitAudit = useCallback(function () {
if (!validate()) {
message.error('请完善必填项后再提交');
return;
}
Modal.confirm({
title: '确认提交审核？',
content: '提交后将进入审批流程（原型）。',
okText: '提交审核',
cancelText: '取消',
onOk: function () {
message.success('已提交审核（原型）');
}
});
}, [form, vehicles]);
var handleSave = useCallback(function () {
message.info('已保存（原型，不做校验）');
}, []);
var handleCancel = useCallback(function () {
Modal.confirm({
title: '是否确认取消',
content: '取消将会丢失所有已填写内容，是否确认？',
okText: '确认',
cancelText: '取消',
onOk: function () {
message.info('返回异动管理列表页（原型）');
}
});
}, []);
// 目的地名称控件：随异动目的地变化
var destinationNameLabel = form.destinationType === '维修站' ? '维修站' : (form.destinationType === '停车场' ? '停车场' : '目的地名称');
var destinationNameNode = (function () {
if (form.destinationType === '其他') {
return React.createElement(Input, {
placeholder: '请输入目的地名称',
value: form.destinationNameOther,
onChange: function (e) { updateForm({ destinationNameOther: e.target.value }); },
status: errors.destinationName ? 'error' : undefined
});
}
var opts = form.destinationType === '维修站' ? destinationRepairOptions : destinationParkingOptions;
return React.createElement(Select, {
placeholder: '请选择' + destinationNameLabel,
style: controlStyle,
value: form.destinationName,
onChange: function (v) { updateForm({ destinationName: v }); },
allowClear: true,
showSearch: true,
options: opts,
filterOption: filterOption,
status: errors.destinationName ? 'error' : undefined,
disabled: !form.destinationType
});
})();
var vehicleColumns = useMemo(function () {
return [
{
title: React.createElement('span', null, reqStar, '车牌号'),
key: 'plateNo',
width: 140,
render: function (_, r, index) {
return React.createElement(Select, {
placeholder: '请输入或选择车牌号',
style: { width: '100%' },
value: r.plateNo,
onChange: function (v) { handlePlateChange(index, v); },
allowClear: true,
showSearch: true,
options: plateOptions,
filterOption: filterOption,
status: errors.vehicleList ? 'error' : undefined
});
}
},
{
title: '车辆类型',
key: 'vehicleType',
width: 120,
render: function (_, r) {
return React.createElement(Input, { value: r.vehicleType ? r.vehicleType : '请先选择车辆', disabled: true });
}
},
{
title: '品牌',
key: 'brand',
width: 100,
render: function (_, r) {
return React.createElement(Input, { value: r.brand ? r.brand : '请先选择车辆', disabled: true });
}
},
{
title: '型号',
key: 'model',
width: 120,
render: function (_, r) {
return React.createElement(Input, { value: r.model ? r.model : '请先选择车辆', disabled: true });
}
},
{
title: '出发停车场',
key: 'departParking',
width: 160,
render: function (_, r) {
return React.createElement(Input, { value: r.departParking ? r.departParking : '请先选择车辆', disabled: true });
}
},
{
title: React.createElement('span', null, reqStar, '异动开始里程'),
key: 'startMileageKm',
width: 160,
render: function (_, r, index) {
var k = 'row_' + index + '_startMileageKm';
return React.createElement(Input, {
value: r.startMileageKm,
onChange: function (e) { updateRow(index, { startMileageKm: toFixed2Input(e.target.value) }); },
placeholder: '0.00',
addonAfter: 'km',
status: errors[k] ? 'error' : undefined
});
}
},
{
title: React.createElement('span', null, reqStar, '异动开始氢量'),
key: 'startHydrogen',
width: 150,
render: function (_, r, index) {
var k = 'row_' + index + '_startHydrogen';
var unit = r.h2Unit || '%/MPa';
return React.createElement(Input, {
value: r.startHydrogen,
onChange: function (e) { updateRow(index, { startHydrogen: toFixed2Input(e.target.value) }); },
placeholder: '0.00',
addonAfter: unit,
status: errors[k] ? 'error' : undefined
});
}
},
{
title: React.createElement('span', null, reqStar, '异动开始电量'),
key: 'startElectricKwh',
width: 150,
render: function (_, r, index) {
var k = 'row_' + index + '_startElectricKwh';
return React.createElement(Input, {
value: r.startElectricKwh,
onChange: function (e) { updateRow(index, { startElectricKwh: toFixed2Input(e.target.value) }); },
placeholder: '0.00',
addonAfter: 'kWh',
status: errors[k] ? 'error' : undefined
});
}
},
{
title: '操作',
key: 'action',
width: 80,
fixed: 'right',
render: function (_, __, index) {
return React.createElement(Button, { type: 'link', danger: true, size: 'small', onClick: function () { removeRow(index); } }, '删除');
}
}
];
}, [plateOptions, errors, handlePlateChange, updateRow, removeRow]);
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 }, reqStar, '异动开始日期'),
React.createElement(DatePicker, {
style: controlStyle,
showTime: { format: 'HH:mm' },
format: 'YYYY-MM-DD HH:mm',
placeholder: '请选择异动开始日期',
value: form.startTime,
onChange: function (v) { updateForm({ startTime: v }); },
status: errors.startTime ? 'error' : undefined
}),
errors.startTime ? React.createElement('div', { style: { marginTop: 4, color: '#ff4d4f', fontSize: 12 } }, errors.startTime) : null
),
React.createElement('div', { style: formItemStyle },
React.createElement('div', { style: labelStyle }, reqStar, '异动预计结束日期'),
React.createElement(DatePicker, {
style: controlStyle,
showTime: { format: 'HH:mm' },
format: 'YYYY-MM-DD HH:mm',
placeholder: '请选择异动预计结束日期',
value: form.plannedEndTime,
onChange: function (v) { updateForm({ plannedEndTime: v }); },
status: errors.plannedEndTime ? 'error' : undefined
}),
errors.plannedEndTime ? React.createElement('div', { style: { marginTop: 4, color: '#ff4d4f', fontSize: 12 } }, errors.plannedEndTime) : null
),
React.createElement('div', { style: formItemStyle },
React.createElement('div', { style: labelStyle }, reqStar, '异动目的地'),
React.createElement(Select, {
placeholder: '请选择异动目的地',
style: controlStyle,
value: form.destinationType,
onChange: function (v) {
setForm(function (p) {
return Object.assign({}, p, {
destinationType: v,
destinationName: undefined,
destinationNameOther: ''
});
});
},
allowClear: true,
options: destinationTypeOptions,
status: errors.destinationType ? 'error' : undefined
}),
errors.destinationType ? React.createElement('div', { style: { marginTop: 4, color: '#ff4d4f', fontSize: 12 } }, errors.destinationType) : null
),
React.createElement('div', { style: formItemStyle },
React.createElement('div', { style: labelStyle }, reqStar, destinationNameLabel),
destinationNameNode,
errors.destinationName ? React.createElement('div', { style: { marginTop: 4, color: '#ff4d4f', fontSize: 12 } }, errors.destinationName) : null
),
React.createElement('div', { style: formItemStyle },
React.createElement('div', { style: labelStyle }, reqStar, '异动类型'),
React.createElement(Select, {
placeholder: '请选择异动类型',
style: controlStyle,
value: form.changeType,
onChange: function (v) { updateForm({ changeType: v }); },
allowClear: true,
options: changeTypeOptions,
status: errors.changeType ? 'error' : undefined
}),
errors.changeType ? React.createElement('div', { style: { marginTop: 4, color: '#ff4d4f', fontSize: 12 } }, errors.changeType) : null
),
React.createElement('div', { style: formItemStyle },
React.createElement('div', { style: labelStyle }, '预计异动里程'),
React.createElement(Input, {
placeholder: '0.00',
value: form.plannedMileageKm,
onChange: function (e) { updateForm({ plannedMileageKm: toFixed2Input(e.target.value) }); },
addonAfter: 'km'
})
),
React.createElement('div', { style: Object.assign({}, formItemStyle, { gridColumn: 'span 3' }) },
React.createElement('div', { style: labelStyle }, '备注'),
React.createElement(Input.TextArea, {
placeholder: '请输入备注',
value: form.remark,
onChange: function (e) { updateForm({ remark: e.target.value }); },
autoSize: { minRows: 3, maxRows: 6 }
})
)
)
),
React.createElement(Card, { title: '车辆信息', style: { marginBottom: 16 } },
errors.vehicleList ? React.createElement('div', { style: { marginBottom: 12, color: '#ff4d4f', fontSize: 12 } }, errors.vehicleList) : null,
React.createElement(Table, {
rowKey: 'id',
columns: vehicleColumns,
dataSource: vehicles,
size: 'small',
pagination: false,
scroll: { x: 1250 }
}),
React.createElement(Button, { type: 'dashed', style: { marginTop: 12, width: '100%' }, onClick: addRow }, '新增一行')
),
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, { type: 'primary', onClick: handleSubmitAudit }, '提交审核'),
React.createElement(Button, { onClick: handleSave }, '保存'),
React.createElement(Button, { onClick: handleCancel }, '取消')
)
)
);
};

458
web端/运维管理/车辆业务/异动管理.jsx
View File

@@ -16,6 +16,7 @@ const Component = function () {
var DatePicker = antd.DatePicker;
var message = antd.message;
var Modal = antd.Modal;
var Tabs = antd.Tabs;
var RangePicker = DatePicker.RangePicker;
@@ -45,11 +46,18 @@ const Component = function () {
return s === '待提交' || s === '驳回' || s === '撤回';
}
/** 已结束异动（进入历史记录 Tab） */
function isMovementEnded(r) {
if (!r) return false;
return !!(r.movementEndedAt || r.movementEnded);
}
var layoutStyle = { padding: '16px 24px', background: '#f5f5f5', minHeight: '100vh' };
var filterLabelStyle = { marginBottom: 6, fontSize: 14, color: 'rgba(0,0,0,0.65)' };
var filterItemStyle = { marginBottom: 12 };
var filterControlStyle = { width: '100%' };
var tableSingleLineStyle = '.movement-list-table .ant-table-thead th,.movement-list-table .ant-table-tbody td{white-space:nowrap;}';
var movementTabsBarStyle = '.movement-list-tabs .ant-tabs-nav{align-items:center;margin-bottom:0;}';
var moveTypeOptions = useMemo(function () {
return [
@@ -98,6 +106,10 @@ const Component = function () {
var pageSize = pageSizeState[0];
var setPageSize = pageSizeState[1];
var listTabState = useState('ongoing');
var listTab = listTabState[0];
var setListTab = listTabState[1];
var requirementModalState = useState(false);
var requirementModalOpen = requirementModalState[0];
var setRequirementModalOpen = requirementModalState[1];
@@ -112,7 +124,8 @@ const Component = function () {
'1.3.车牌号：选择器，输入框支持模糊搜索下拉匹配结果；',
'1.4.右侧为查询、重置按钮；',
'',
'2.列表：',
'2.列表：分为2个tab：进行中、历史记录；',
'#进行中：',
'2.1.异动开始日期：显示车辆异动开始日期，格式为：YYYY-MM-DD HH:MM；',
'2.2.异动预计结束日期：显示车辆异动结束日期，格式为：YYYY-MM-DD HH:MM；',
'2.3.审批状态：分为:待提交、审批中、审批完成、驳回、撤回；',
@@ -123,12 +136,34 @@ const Component = function () {
'2.8.车牌号：显示车牌号；',
'2.9.异动开始里程（km）：显示车辆异动开始里程；',
'2.10.异动开始电量（kWh）：显示车辆异动开始电量；',
'2.11.异动开始氢量；显示车辆异动开始氢量，带单位，单位根据型号参数表获取，分为%和MPa；',
'2.11.异动开始氢量：显示车辆异动开始氢量，带单位，单位根据型号参数表获取，分为%和MPa；',
'2.12.创建人：显示发起人姓名；',
'2.13.创建时间：显示发起时间，格式为：YYYY-MM-DD HH:MM；',
'2.14.操作：查看、编辑；',
'2.14.操作：查看、编辑、撤回、结束异动；',
' 2.14.1.查看：点击跳转异动-查看页；',
' 2.14.2.编辑：点击跳转异动-编辑页，只有审批状态为：待提交、驳回、撤回时显示编辑；',
' 2.14.3.撤回：点击进行二次确认，确认后撤回该数据并将审批状态修改为：撤回；',
' 2.14.4.结束异动：当审批状态为审批完成后显示结束异动，点击跳转异动-结束异动页；',
'',
'#历史记录：',
'3.1.异动开始日期：显示车辆异动开始日期，格式为：YYYY-MM-DD HH:MM；',
'3.2.异动预计结束日期：显示车辆异动结束日期，格式为：YYYY-MM-DD HH:MM；',
'3.3.审批状态：分为:待提交、审批中、审批完成、驳回、撤回；',
'3.4.异动目的地：显示车辆异动目的地，选项包括：停车场、维修站、其他；',
'3.5.目的地名称：显示车辆异动目的地名称；',
'3.6.异动类型：显示车辆异动类型，选项包括：维修、保养、年审、其他；',
'3.7.预计异动里程（km）：显示车辆预计异动里程；',
'3.8.车牌号：显示车牌号；',
'3.9.异动开始里程（km）：显示车辆异动开始里程；',
'3.10.异动结束里程（km）：显示车辆异动结束里程；',
'3.11.异动开始电量（kWh）：显示车辆异动开始电量；',
'3.12.异动结束电量（kWh）：显示车辆异动结束电量；',
'3.13.异动开始氢量：显示车辆异动开始氢量，带单位，单位根据型号参数表获取，分为%和MPa；',
'3.14.异动结束氢量：显示车辆异动结束氢量，带单位，单位根据型号参数表获取，分为%和MPa；',
'3.15.创建人：显示发起人姓名；',
'3.16.创建时间：显示发起时间，格式为：YYYY-MM-DD HH:MM；',
'3.17.操作：查看；',
' 3.17.1.查看：点击跳转异动-查看页；',
'',
'3.列表右下方为分页功能，支持单页显示条数设置；'
].join('\n');
@@ -304,10 +339,202 @@ const Component = function () {
h2Unit: '%',
creatorName: '陈静',
createTime: '2026-03-01 05:40'
},
// 历史记录样例（已结束异动，共 10 条）
{
id: 'mv-h-01',
moveStartAt: '2025-11-08 08:00',
moveEndExpectedAt: '2025-11-10 18:00',
approvalStatus: '审批完成',
destination: '维修站',
destinationName: '广州白云氢能维保中心',
moveType: '维修',
expectedMileageKm: '28.5',
plateNo: '粤A12345',
startMileageKm: '14800.00',
startElectricKwh: '70.00',
startHydrogen: '30.00',
h2Unit: 'MPa',
creatorName: '张明',
createTime: '2025-11-07 16:20',
movementEndedAt: '2025-11-10 19:30',
movementEnded: true
},
{
id: 'mv-h-02',
moveStartAt: '2025-11-15 09:30',
moveEndExpectedAt: '2025-11-15 17:00',
approvalStatus: '审批完成',
destination: '停车场',
destinationName: '深圳湾口岸停车场',
moveType: '保养',
expectedMileageKm: '15.2',
plateNo: '粤B11111',
startMileageKm: '9200.50',
startElectricKwh: '58.30',
startHydrogen: '62.00',
h2Unit: '%',
creatorName: '王芳',
createTime: '2025-11-14 14:00',
movementEndedAt: '2025-11-15 17:45',
movementEnded: true
},
{
id: 'mv-h-03',
moveStartAt: '2025-12-02 07:15',
moveEndExpectedAt: '2025-12-02 12:30',
approvalStatus: '审批完成',
destination: '其他',
destinationName: '杭州车管所年检线',
moveType: '年审',
expectedMileageKm: '9.8',
plateNo: '浙A11111',
startMileageKm: '11550.20',
startElectricKwh: '64.00',
startHydrogen: '48.50',
h2Unit: '%',
creatorName: '李华',
createTime: '2025-12-01 18:10',
movementEndedAt: '2025-12-02 13:20',
movementEnded: true
},
{
id: 'mv-h-04',
moveStartAt: '2025-12-18 13:00',
moveEndExpectedAt: '2025-12-20 09:00',
approvalStatus: '审批完成',
destination: '维修站',
destinationName: '上海嘉定氢能服务站',
moveType: '维修',
expectedMileageKm: '42.0',
plateNo: '沪A30003',
startMileageKm: '10100.00',
startElectricKwh: '66.50',
startHydrogen: '27.20',
h2Unit: 'MPa',
creatorName: '赵强',
createTime: '2025-12-17 11:30',
movementEndedAt: '2025-12-20 10:15',
movementEnded: true
},
{
id: 'mv-h-05',
moveStartAt: '2026-01-05 10:20',
moveEndExpectedAt: '2026-01-06 16:00',
approvalStatus: '审批完成',
destination: '停车场',
destinationName: '南京南站枢纽停车场',
moveType: '其他',
expectedMileageKm: '19.6',
plateNo: '苏E88888',
startMileageKm: '22800.00',
startElectricKwh: '45.80',
startHydrogen: '50.00',
h2Unit: '%',
creatorName: '陈静',
createTime: '2026-01-04 09:45',
movementEndedAt: '2026-01-06 17:00',
movementEnded: true
},
{
id: 'mv-h-06',
moveStartAt: '2026-01-12 08:45',
moveEndExpectedAt: '2026-01-12 15:30',
approvalStatus: '审批完成',
destination: '维修站',
destinationName: '北京亦庄氢能维修站',
moveType: '保养',
expectedMileageKm: '11.3',
plateNo: '京A66666',
startMileageKm: '8750.00',
startElectricKwh: '72.00',
startHydrogen: '32.00',
h2Unit: 'MPa',
creatorName: '王芳',
createTime: '2026-01-11 17:00',
movementEndedAt: '2026-01-12 16:10',
movementEnded: true
},
{
id: 'mv-h-07',
moveStartAt: '2026-01-22 14:00',
moveEndExpectedAt: '2026-01-23 11:00',
approvalStatus: '审批完成',
destination: '其他',
destinationName: '重庆两江新区检测站',
moveType: '年审',
expectedMileageKm: '33.0',
plateNo: '渝A99999',
startMileageKm: '17200.00',
startElectricKwh: '49.20',
startHydrogen: '59.00',
h2Unit: '%',
creatorName: '李华',
createTime: '2026-01-22 08:30',
movementEndedAt: '2026-01-23 12:00',
movementEnded: true
},
{
id: 'mv-h-08',
moveStartAt: '2026-02-01 09:00',
moveEndExpectedAt: '2026-02-03 18:00',
approvalStatus: '审批完成',
destination: '维修站',
destinationName: '成都龙泉驿维保基地',
moveType: '维修',
expectedMileageKm: '55.8',
plateNo: '川A77777',
startMileageKm: '33800.00',
startElectricKwh: '35.00',
startHydrogen: '25.00',
h2Unit: 'MPa',
creatorName: '赵强',
createTime: '2026-01-31 16:40',
movementEndedAt: '2026-02-03 19:00',
movementEnded: true
},
{
id: 'mv-h-09',
moveStartAt: '2026-02-10 06:30',
moveEndExpectedAt: '2026-02-10 14:00',
approvalStatus: '审批完成',
destination: '停车场',
destinationName: '青岛前湾港停车场',
moveType: '保养',
expectedMileageKm: '12.5',
plateNo: '鲁B55555',
startMileageKm: '11050.00',
startElectricKwh: '63.80',
startHydrogen: '61.00',
h2Unit: '%',
creatorName: '陈静',
createTime: '2026-02-09 20:15',
movementEndedAt: '2026-02-10 15:30',
movementEnded: true
},
{
id: 'mv-h-10',
moveStartAt: '2026-02-18 11:20',
moveEndExpectedAt: '2026-02-19 10:00',
approvalStatus: '审批完成',
destination: '其他',
destinationName: '宁波北仑港区临时点',
moveType: '其他',
expectedMileageKm: '24.0',
plateNo: '浙B22222',
startMileageKm: '14950.00',
startElectricKwh: '57.00',
startHydrogen: '23.50',
h2Unit: 'MPa',
creatorName: '张明',
createTime: '2026-02-17 15:00',
movementEndedAt: '2026-02-19 11:20',
movementEnded: true
}
];
});
var list = listState[0];
var setList = listState[1];
function matchRange(valStr, range) {
if (!range || !range[0] || !range[1]) return true;
@@ -333,7 +560,13 @@ const Component = function () {
});
}
var filtered = useMemo(function () { return applyFilters(list); }, [list, applied]);
var filtered = useMemo(function () {
var base = applyFilters(list);
if (listTab === 'ongoing') {
return base.filter(function (r) { return !isMovementEnded(r); });
}
return base.filter(function (r) { return isMovementEnded(r); });
}, [list, applied, listTab]);
var paged = useMemo(function () {
var start = (page - 1) * pageSize;
@@ -352,6 +585,118 @@ const Component = function () {
setPage(1);
}, []);
var handleAdd = useCallback(function () {
message.info('新增异动（原型，联调时跳转新建页或打开表单）');
}, []);
function fmtNowYMDHM() {
var d = new Date();
var p2 = function (n) { return n < 10 ? '0' + n : '' + n; };
return d.getFullYear() + '-' + p2(d.getMonth() + 1) + '-' + p2(d.getDate()) + ' ' + p2(d.getHours()) + ':' + p2(d.getMinutes());
}
var handleEndMovement = useCallback(function (recordId) {
Modal.confirm({
title: '确认结束异动',
content: '确定结束该条异动吗？确认后将归档至「历史记录」，仅可查看。',
okText: '确认结束',
cancelText: '取消',
onOk: function () {
var endedAt = fmtNowYMDHM();
setList(function (prev) {
return (prev || []).map(function (row) {
if (row.id !== recordId) return row;
return Object.assign({}, row, { movementEndedAt: endedAt, movementEnded: true });
});
});
message.success('结束异动成功');
}
});
}, []);
var handleWithdrawMovement = useCallback(function (recordId) {
Modal.confirm({
title: '确认撤回',
content: '确定要撤回该条异动申请吗？确认后审批状态将变更为「撤回」，可再次编辑后提交。',
okText: '确认撤回',
cancelText: '取消',
onOk: function () {
setList(function (prev) {
return (prev || []).map(function (row) {
if (row.id !== recordId) return row;
return Object.assign({}, row, { approvalStatus: '撤回' });
});
});
message.success('撤回成功');
}
});
}, []);
function formatStartHydrogenForExport(r) {
var u = r.h2Unit || '';
if (r.startHydrogen == null || r.startHydrogen === '') return '-';
return String(r.startHydrogen) + (u ? ' ' + u : '');
}
var handleExport = useCallback(function () {
var rows = filtered;
if (!rows || rows.length === 0) {
message.warning('当前无数据可导出');
return;
}
var escapeCsv = function (v) {
var s = v == null ? '' : String(v);
if (s.indexOf(',') !== -1 || s.indexOf('"') !== -1 || s.indexOf('\n') !== -1 || s.indexOf('\r') !== -1) {
return '"' + s.replace(/"/g, '""') + '"';
}
return s;
};
var headers = [
'异动开始日期',
'异动预计结束日期',
'审批状态',
'异动目的地',
'目的地名称',
'异动类型',
'预计异动里程（km）',
'车牌号',
'异动开始里程（km）',
'异动开始电量（kWh）',
'异动开始氢量',
'创建人',
'创建时间'
];
var rowToCells = function (r) {
return [
fmtYMDHM(r.moveStartAt),
fmtYMDHM(r.moveEndExpectedAt),
r.approvalStatus,
r.destination,
r.destinationName,
r.moveType,
r.expectedMileageKm,
r.plateNo,
r.startMileageKm,
r.startElectricKwh,
formatStartHydrogenForExport(r),
r.creatorName,
fmtYMDHM(r.createTime)
];
};
var csv = headers.map(escapeCsv).join(',') + '\n';
rows.forEach(function (r) {
csv += rowToCells(r).map(escapeCsv).join(',') + '\n';
});
var blob = new Blob(['\ufeff' + csv], { type: 'text/csv;charset=utf-8' });
var url = URL.createObjectURL(blob);
var a = document.createElement('a');
a.href = url;
a.download = '异动管理导出_' + (listTab === 'ongoing' ? '进行中' : '历史记录') + '_' + new Date().getTime() + '.csv';
a.click();
URL.revokeObjectURL(url);
message.success('已导出 ' + rows.length + ' 条记录');
}, [filtered, listTab]);
var columns = useMemo(function () {
return [
{ title: '异动开始日期', dataIndex: 'moveStartAt', key: 'moveStartAt', width: 160, render: function (v) { return fmtYMDHM(v); } },
@@ -378,12 +723,29 @@ const Component = function () {
{
title: '操作',
key: 'action',
width: 120,
width: 200,
fixed: 'right',
render: function (_, r) {
var nodes = [
React.createElement(Button, { key: 'view', type: 'link', size: 'small', onClick: function () { message.info('跳转异动-查看页（原型）ID：' + r.id); } }, '查看')
];
if (String(r.approvalStatus || '') === '审批中') {
nodes.push(React.createElement(Button, {
key: 'withdraw',
type: 'link',
size: 'small',
danger: true,
onClick: function () { handleWithdrawMovement(r.id); }
}, '撤回'));
}
if (String(r.approvalStatus || '') === '审批完成' && !isMovementEnded(r)) {
nodes.push(React.createElement(Button, {
key: 'end',
type: 'link',
size: 'small',
onClick: function () { handleEndMovement(r.id); }
}, '结束异动'));
}
if (canShowMovementEdit(r.approvalStatus)) {
nodes.push(React.createElement(Button, { key: 'edit', type: 'link', size: 'small', onClick: function () { message.info('跳转异动-编辑页（原型）ID：' + r.id); } }, '编辑'));
}
@@ -391,7 +753,7 @@ const Component = function () {
}
}
];
}, []);
}, [handleWithdrawMovement, handleEndMovement]);
return React.createElement(App, null,
React.createElement('div', { style: layoutStyle },
@@ -455,25 +817,73 @@ const Component = function () {
),
React.createElement(Card, null,
React.createElement('style', null, tableSingleLineStyle),
React.createElement('div', { className: 'movement-list-table' },
React.createElement(Table, {
rowKey: 'id',
columns: columns,
dataSource: paged,
scroll: { x: 2240 },
size: 'small',
pagination: {
current: page,
pageSize: pageSize,
total: filtered.length,
showSizeChanger: true,
showQuickJumper: true,
showTotal: function (t) { return '共 ' + t + ' 条'; },
onChange: function (pg, ps) { setPage(pg); if (ps) setPageSize(ps); }
React.createElement('style', null, movementTabsBarStyle),
React.createElement(Tabs, {
className: 'movement-list-tabs',
activeKey: listTab,
onChange: function (k) {
setListTab(k);
setPage(1);
},
destroyInactiveTabPane: true,
tabBarExtraContent: React.createElement('div', { style: { display: 'flex', alignItems: 'center', gap: 8 } },
React.createElement(Button, { type: 'primary', onClick: handleAdd }, '新增'),
React.createElement(Button, { onClick: handleExport }, '导出')
),
tabBarStyle: { marginBottom: 0 },
items: [
{
key: 'ongoing',
label: '进行中',
children: React.createElement('div', { style: { marginTop: 16 } },
React.createElement('style', null, tableSingleLineStyle),
React.createElement('div', { className: 'movement-list-table' },
React.createElement(Table, {
rowKey: 'id',
columns: columns,
dataSource: paged,
scroll: { x: 2240 },
size: 'small',
pagination: {
current: page,
pageSize: pageSize,
total: filtered.length,
showSizeChanger: true,
showQuickJumper: true,
showTotal: function (t) { return '共 ' + t + ' 条'; },
onChange: function (pg, ps) { setPage(pg); if (ps) setPageSize(ps); }
}
})
)
)
},
{
key: 'history',
label: '历史记录',
children: React.createElement('div', { style: { marginTop: 16 } },
React.createElement('style', null, tableSingleLineStyle),
React.createElement('div', { className: 'movement-list-table' },
React.createElement(Table, {
rowKey: 'id',
columns: columns,
dataSource: paged,
scroll: { x: 2240 },
size: 'small',
pagination: {
current: page,
pageSize: pageSize,
total: filtered.length,
showSizeChanger: true,
showQuickJumper: true,
showTotal: function (t) { return '共 ' + t + ' 条'; },
onChange: function (pg, ps) { setPage(pg); if (ps) setPageSize(ps); }
}
})
)
)
}
})
)
]
})
)
)
);

51
web端/运维管理/车辆管理-查看.jsx
View File

@@ -80,12 +80,23 @@ const Component = function () {
// 证照管理 Tab：证件照片占位（可替换为真实 URL，支持 Image 预览）
var licensePhotoPlaceholder = 'data:image/svg+xml,' + encodeURIComponent('<svg xmlns="http://www.w3.org/2000/svg" width="336" height="224"><rect fill="#f5f5f5" width="100%" height="100%"/><text x="50%" y="50%" dominant-baseline="middle" text-anchor="middle" fill="#8c8c8c" font-size="14" font-family="system-ui,sans-serif">行驶证/证照示意图</text></svg>');
function certPhotoPlaceholder(captionText) {
return 'data:image/svg+xml,' + encodeURIComponent('<svg xmlns="http://www.w3.org/2000/svg" width="336" height="224"><rect fill="#f5f5f5" width="100%" height="100%"/><text x="50%" y="50%" dominant-baseline="middle" text-anchor="middle" fill="#8c8c8c" font-size="13" font-family="system-ui,sans-serif">' + String(captionText || '') + '</text></svg>');
}
var certificateDetail = {
drivingLicense: { img: licensePhotoPlaceholder, regDate: '2025-07-01', scrapDate: '2038-12-31', inspectExpire: '2027-07-31' },
operationPermit: { img: licensePhotoPlaceholder, permitNo: '营330482001234', regDate: '2025-07-15', inspectExpire: '2026-07-14', certExpire: '2030-07-14' },
passPermit: { img: licensePhotoPlaceholder, code: 'TX-ZJ-2025-0088', area: '浙江省嘉兴市平湖市行政辖区', expire: '2026-12-31' },
registrationCert: { img: licensePhotoPlaceholder },
h2Permit: { img: licensePhotoPlaceholder, permitCode: 'JQZ-2025-F069001', cardCode: 'JK-88A901256', inspectDate: '2025-06-15' },
h2Permit: {
photos: [
{ label: '特种设备使用登记证', src: certPhotoPlaceholder('特种设备使用登记证') },
{ label: '特种设备使用标志', src: certPhotoPlaceholder('特种设备使用标志') }
],
permitCode: 'JQZ-2025-F069001',
cardCode: 'JK-88A901256',
inspectDate: '2025-06-15'
},
h2Card: { img: licensePhotoPlaceholder, stationName: '嘉兴港区某某加氢站' },
safetyValve: { img: licensePhotoPlaceholder, inspectDate: '2025-05-10', cycle: '12个月', validUntil: '2026-05-09' },
pressureGauge: { img: licensePhotoPlaceholder, inspectDate: '2025-05-10', cycle: '12个月', gaugeValidUntil: '2026-05-09' },
@@ -545,6 +556,42 @@ const Component = function () {
)
);
}
/** 证照多图：每项 { label, src }，如加氢证下登记证 + 使用标志 */
function CertSectionCardMulti(title, photoSlots, fieldNodes) {
var right = fieldNodes && fieldNodes.length
? React.createElement('div', {
style: {
flex: 1,
minWidth: 260,
display: 'flex',
alignItems: 'center',
alignSelf: 'stretch'
}
}, React.createElement('div', { style: { width: '100%' } }, fieldNodes))
: null;
var slots = photoSlots || [];
var photosRow = React.createElement('div', { style: { display: 'flex', gap: 16, flexWrap: 'wrap', flexShrink: 0, alignItems: 'flex-start' } },
slots.map(function (slot, idx) {
return React.createElement('div', { key: idx, style: { display: 'flex', flexDirection: 'column' } },
React.createElement('div', { style: { marginBottom: 8, color: 'rgba(0,0,0,0.45)', fontSize: 13 } }, slot.label || '证件照片'),
React.createElement(Image, {
width: 168,
height: 112,
style: { objectFit: 'cover', borderRadius: 4, border: '1px solid #f0f0f0', background: '#fafafa' },
src: slot.src,
alt: (slot.label || title) + '',
preview: true
})
);
})
);
return React.createElement(Card, { key: title, size: 'small', style: { marginBottom: 16 }, title: title },
React.createElement('div', { style: { display: 'flex', gap: 24, flexWrap: 'wrap', alignItems: 'stretch' } },
photosRow,
right
)
);
}
var cd = certificateDetail;
var licenseManagementTabContent = React.createElement('div', { style: { padding: '0 4px' } },
@@ -565,7 +612,7 @@ const Component = function () {
CertFieldRow('有效期', cd.passPermit.expire)
]),
CertSectionCard('登记证', cd.registrationCert.img, null),
CertSectionCard('加氢证', cd.h2Permit.img, [
CertSectionCardMulti('加氢证', cd.h2Permit.photos, [
CertFieldRow('加氢证编码', cd.h2Permit.permitCode),
CertFieldRow('加氢卡编码', cd.h2Permit.cardCode),
CertFieldRow('检验日期', cd.h2Permit.inspectDate)

19
web端/需求说明/运维管理-仓库管理/交车任务 Normal file
View File

@@ -0,0 +1,19 @@
一个「数字化资产ONEOS运管平台」中的「仓库管理」模块
#面包屑：运维管理-备件库-仓库管理
1.筛选：
1.1.仓库名称：选择器，支持输入框内输入内容模糊搜索下拉匹配结果；
1.2.创建人：选择器，下拉显示创建人；
1.3.创建时间：日期选择器，支持单输入框双日历通过开始-结束时间筛选；
2.列表；右侧为新增；
2.1.序号：1.2.3.以此类推；
2.2.仓库编码：显示仓库编码；
2.3.仓库名称：显示仓库名称；
2.4.仓库地址：显示仓库地址；
2.5.仓库管理人：显示仓库管理人；
2.6.创建人：显示创建人；
2.7.创建时间：显示创建时间，格式为：YYYY-MM-DD HH:MM；
2.8.操作：编辑、删除；
2.8.1.编辑：跳转仓库设置-编辑页；
2.8.2.删除：点击进行二次确认，确认后判断仓库是否为空，如果仓库非空则提示：清空仓库后才可删除该仓库，仓库为空则提示：删除成功；

20
web端/需求说明/运维管理-仓库管理/备件库存 Normal file
View File

@@ -0,0 +1,20 @@
一个「数字化资产ONEOS运管平台」中的「备件库存」模块
#面包屑：运维管理-备件库-备件库存
1.筛选：
1.1.仓库名称：选择器，支持输入框内输入模糊搜索，下拉匹配正确项；
1.2.备件编码：选择器，支持输入框内输入模糊搜索，下拉匹配正确项；
1.3.备件名称：选择器，支持输入框内输入模糊搜索，下拉匹配正确项；
1.4.适配车型：选择器，支持多选，显示所有型号；
2.列表；右侧为新增、导出按钮
2.1.序号：1.2.3.以此类推；
2.2.仓库编码：显示仓库编码；
2.3.仓库名称：显示仓库名称；
2.4.备件编码：显示备件编码；
2.5.备件名称：显示备件名称；
2.6.适配车型：显示适配车型，一个备件可能有多个车型；
2.7.库存数量：显示库存数量；
2.8.累积入库数量：显示该备件入库数量总和；
2.9.累积出库数量：显示该备件出库数量总和；
2.10.右下角为分页功能，支持选择单页显示数据条数；