web端:新增工作台;异动管理页面与需求说明更新

Made-with: Cursor
This commit is contained in:
王冕
2026-03-23 09:35:39 +08:00
parent 49d9e3675d
commit d3da3da73b
9 changed files with 706 additions and 104 deletions

488
web端/工作台.jsx Normal file
View File

@@ -0,0 +1,488 @@
// 【重要】必须使用 const Component 作为组件变量名
// 数字化资产 ONEOS 运管平台 - 工作台(需求见文件内「查看需求说明」)
const Component = function () {
var useState = React.useState;
var useMemo = React.useMemo;
var useCallback = React.useCallback;
var antd = window.antd;
var App = antd.App;
var Row = antd.Row;
var Col = antd.Col;
var Card = antd.Card;
var Statistic = antd.Statistic;
var List = antd.List;
var Tag = antd.Tag;
var Tabs = antd.Tabs;
var Badge = antd.Badge;
var Button = antd.Button;
var Space = antd.Space;
var Divider = antd.Divider;
var Modal = antd.Modal;
var Table = antd.Table;
var Popover = antd.Popover;
var Typography = antd.Typography;
var message = antd.message;
var Text = Typography.Text;
var layoutStyle = { padding: '16px 20px 24px', background: '#f0f2f5', minHeight: '100vh' };
var cardStyle = { borderRadius: 8, boxShadow: '0 1px 2px rgba(0,0,0,0.06)' };
function protoNav(hint) {
message.info('跳转「' + hint + '」(原型,联调配置路由)');
}
var requirementOpenState = useState(false);
var requirementOpen = requirementOpenState[0];
var setRequirementOpen = requirementOpenState[1];
var auditModalState = useState(false);
var auditModalOpen = auditModalState[0];
var setAuditModalOpen = auditModalState[1];
var noticeModalState = useState(false);
var noticeModalOpen = noticeModalState[0];
var setNoticeModalOpen = noticeModalState[1];
var roleTabState = useState('ops');
var roleTab = roleTabState[0];
var setRoleTab = roleTabState[1];
var requirementDoc = [
'一个「数字化资产ONEOS运管平台」中的「工作台」模块',
'#面包屑:工作台',
'',
'1.顶部为关键指标,以多个指标卡片分别展示,分别为:',
'1.1.待办工作:显示待办工作数量,包括以下任务:',
' 1.1.1.运维侧:交车任务、调拨任务、异动任务、年审任务;',
' 1.1.2.业管侧:商业险到期、租赁账单生成、提车应收款、还车应结款;',
' 1.1.3.业管-能源部侧:氢费审核;',
' 权限分配规则:业管、运维基层员工:仅显示当前登录人作为处理人的任务;业管、运维主管:显示所属部门所有未完成任务;',
'1.2.已完成工作:显示已完成工作数量,包括当前用户所有已完成的待办工作;',
'1.3.待审批任务:显示所有待审批任务数量,点击弹出卡片,列表显示流程到达时间、流程类型、发起时间、发起人、操作(去处理);',
'1.4.已审批任务:显示所有已审批任务数量,包括当前用户所有已完成的审批任务;',
'1.5.通知消息:显示所有通知消息数量,点击弹出卡片,列表显示时间、通知类型、内容;(含运维/业管/审批侧各类提醒格式,见需求原文)',
'',
'2.中间分为几个单独卡片:',
'2.1.我的待办清单左侧2.2.数据统计(车辆+合同2.3.我的通知清单:右侧;',
'2.4.底部快速入口:按角色 Tab业管、业管-能源部、运维、财务、安全、法务),图标+名称。',
'',
'(原型:数据为示例;权限与接口联调时对接。)'
].join('\n');
var todoPopoverContent = React.createElement('div', { style: { maxWidth: 360, fontSize: 12, lineHeight: 1.6 } },
React.createElement(Text, { strong: true }, '包含任务类型'),
React.createElement('div', { style: { marginTop: 8 } },
React.createElement('div', null, '【运维】交车、调拨、异动、年审'),
React.createElement('div', null, '【业管】商业险到期、租赁账单生成、提车应收款、还车应结款'),
React.createElement('div', null, '【业管-能源】氢费审核')
),
React.createElement(Divider, { style: { margin: '8px 0' } }),
React.createElement(Text, { type: 'secondary' }, '基层员工:仅本人待办;主管:本部门全部未完成。')
);
var topMetrics = useMemo(function () {
return [
{ key: 'todo', title: '待办工作', value: 18, color: '#722ed1', pop: true },
{ key: 'done', title: '已完成工作', value: 126, color: '#52c41a', pop: false },
{ key: 'auditPending', title: '待审批任务', value: 7, color: '#f5222d', pop: false, modal: 'audit' },
{ key: 'auditDone', title: '已审批任务', value: 89, color: '#1677ff', pop: false },
{ key: 'notice', title: '通知消息', value: 12, color: '#fa8c16', pop: false, modal: 'notice' }
];
}, []);
var myTodoList = useMemo(function () {
return [
{ id: '1', name: '交车任务 · 粤A12345 待确认交车单', time: '2026-02-27 09:00', path: 'web端/运维管理/车辆业务/交车管理.jsx' },
{ id: '2', name: '调拨任务 · 调拨单 DB-2026-009 待接收', time: '2026-02-26 15:20', path: 'web端/运维管理/车辆业务/调拨管理.jsx' },
{ id: '3', name: '异动任务 · 异动单待结束登记', time: '2026-02-26 11:00', path: 'web端/运维管理/车辆业务/异动管理-结束异动.jsx' },
{ id: '4', name: '年审任务 · 粤B11111 年审材料待上传', time: '2026-02-25 10:30', path: 'web端/运维管理/车辆业务/异动管理.jsx' },
{ id: '5', name: '商业险到期 · 粤C22334 续保跟进', time: '2026-02-24 14:00', path: 'web端/车辆管理.jsx' },
{ id: '6', name: '租赁账单生成 · 项目「华南物流」2月账单', time: '2026-02-24 09:00', path: 'web端/业务管理/租赁账单.jsx' },
{ id: '7', name: '提车应收款 · TK-2026-018 待提交', time: '2026-02-23 16:00', path: 'web端/财务管理/提车应收款.jsx' },
{ id: '8', name: '还车应结款 · HC-2026-006 待核对', time: '2026-02-23 11:00', path: 'web端/财务管理/还车应结款.jsx' },
{ id: '9', name: '氢费审核 · 加氢订单待审核', time: '2026-02-22 08:30', path: 'web端/加氢站管理/加氢订单.jsx' }
];
}, []);
var noticeList = useMemo(function () {
return [
{ id: 'n1', time: '2026-02-27 08:00', type: '商业险到期提醒', content: '「粤A12345」商业险将在2026-04-15到期请尽快处理' },
{ id: 'n2', time: '2026-02-26 18:00', type: '营运证到期提醒', content: '「粤B88888」营运证还有90天到期请尽快更新营运证' },
{ id: 'n3', time: '2026-02-26 10:00', type: '行驶证到期提醒', content: '「浙A11111」行驶证还有90天到期请尽快进行年审' },
{ id: 'n4', time: '2026-02-25 14:00', type: '租赁合同到期提醒', content: '「HT-2025-088」「某某产业园项目」还有30天到期请尽快处理' },
{ id: 'n5', time: '2026-02-25 09:00', type: '租赁账单生成提醒', content: '「HT-2025-088」「某某产业园项目」「ZD-202602-031」已生成请尽快处理' },
{ id: 'n6', time: '2026-02-24 11:00', type: '氢费余额不足提醒', content: '「某某物流」「华南干线项目」氢费余额已不足500元请尽快通知客户处理' },
{ id: 'n7', time: '2026-02-24 08:30', type: '审批流程提醒', content: '「李四」「异动审核」审批节点已到达,请进行审批' }
];
}, []);
var pendingAuditList = useMemo(function () {
return [
{ id: 'a1', arriveAt: '2026-02-27 09:15', flowType: '异动审核(运维)', startAt: '2026-02-26 14:00', starter: '张三', path: 'web端/运维管理/车辆业务/异动管理.jsx' },
{ id: 'a2', arriveAt: '2026-02-27 08:40', flowType: '调拨审核(运维)', startAt: '2026-02-25 10:00', starter: '王五', path: 'web端/运维管理/车辆业务/调拨管理.jsx' },
{ id: 'a3', arriveAt: '2026-02-26 16:00', flowType: '替换车审核(运维)', startAt: '2026-02-26 09:30', starter: '赵六', path: 'web端/运维管理/车辆业务/替换车管理.jsx' },
{ id: 'a4', arriveAt: '2026-02-26 11:20', flowType: '租赁账单审核(财务)', startAt: '2026-02-25 17:00', starter: '业管-陈七', path: 'web端/财务管理/租赁账单.jsx' },
{ id: 'a5', arriveAt: '2026-02-25 15:00', flowType: '提车应收款审核(财务)', startAt: '2026-02-24 11:00', starter: '业管-周八', path: 'web端/财务管理/提车应收款.jsx' },
{ id: 'a6', arriveAt: '2026-02-25 10:00', flowType: '还车应结款审核(财务)', startAt: '2026-02-23 16:00', starter: '业管-吴九', path: 'web端/财务管理/还车应结款.jsx' },
{ id: 'a7', arriveAt: '2026-02-24 14:00', flowType: '氢费账单审核(财务)', startAt: '2026-02-23 09:00', starter: '能源-郑十', path: 'web端/财务管理/氢费账单.jsx' },
{ id: 'a8', arriveAt: '2026-02-24 09:00', flowType: '租赁合同审核(法务·附件)', startAt: '2026-02-22 10:00', starter: '业管-钱一', path: 'web端/车辆租赁合同/车辆租赁合同.jsx' },
{ id: 'a9', arriveAt: '2026-02-23 11:00', flowType: 'CEO · 提车应收款', startAt: '2026-02-20 15:00', starter: '财务-孙二', path: 'web端/财务管理/提车应收款.jsx' }
];
}, []);
var vehicleMonthBars = useMemo(function () {
return [
{ m: '3月', op: 62, idle: 18 }, { m: '4月', op: 65, idle: 16 }, { m: '5月', op: 68, idle: 15 },
{ m: '6月', op: 70, idle: 14 }, { m: '7月', op: 72, idle: 13 }, { m: '8月', op: 75, idle: 12 },
{ m: '9月', op: 78, idle: 12 }, { m: '10月', op: 80, idle: 11 }, { m: '11月', op: 82, idle: 11 },
{ m: '12月', op: 85, idle: 10 }, { m: '1月', op: 88, idle: 10 }, { m: '2月', op: 90, idle: 9 }
];
}, []);
var contractMonthBars = useMemo(function () {
return [
{ m: '3月', lease: 8, self: 3 }, { m: '4月', lease: 9, self: 3 }, { m: '5月', lease: 10, self: 4 },
{ m: '6月', lease: 10, self: 4 }, { m: '7月', lease: 11, self: 4 }, { m: '8月', lease: 12, self: 5 },
{ m: '9月', lease: 12, self: 5 }, { m: '10月', lease: 13, self: 5 }, { m: '11月', lease: 14, self: 6 },
{ m: '12月', lease: 14, self: 6 }, { m: '1月', lease: 15, self: 6 }, { m: '2月', lease: 16, self: 7 }
];
}, []);
function renderBarGroup(items, k1, k2, c1, c2) {
var max = 1;
items.forEach(function (it) { max = Math.max(max, it[k1] + it[k2]); });
return React.createElement('div', { style: { display: 'flex', alignItems: 'flex-end', gap: 4, height: 140, paddingTop: 8, overflowX: 'auto' } },
items.map(function (it) {
var h1 = Math.round((it[k1] / max) * 100);
var h2 = Math.round((it[k2] / max) * 100);
return React.createElement('div', { key: it.m, style: { display: 'flex', flexDirection: 'column', alignItems: 'center', minWidth: 26 } },
React.createElement('div', { style: { display: 'flex', alignItems: 'flex-end', gap: 2, height: 108 } },
React.createElement('div', { style: { width: 9, height: h1, background: c1, borderRadius: 2 } }),
React.createElement('div', { style: { width: 9, height: h2, background: c2, borderRadius: 2 } })
),
React.createElement('span', { style: { fontSize: 10, color: 'rgba(0,0,0,0.45)', marginTop: 4 } }, it.m)
);
})
);
}
var quickByRole = useMemo(function () {
return {
ye: {
label: '业管',
items: [
{ t: '租赁合同', p: 'web端/车辆租赁合同/车辆租赁合同.jsx' },
{ t: '交车任务', p: 'web端/业务管理/交车任务.jsx' },
{ t: '提车应收款', p: 'web端/财务管理/提车应收款.jsx' },
{ t: '租赁账单', p: 'web端/业务管理/租赁账单.jsx' },
{ t: '还车应结款', p: 'web端/财务管理/还车应结款.jsx' },
{ t: '能源账户', p: 'web端/业务管理/能源账户.jsx' },
{ t: '氢费账单', p: 'web端/财务管理/氢费账单.jsx' },
{ t: '电费账单', p: 'web端/财务管理/电费账单.jsx' },
{ t: 'ETC账单', p: 'web端/业务管理/ETC管理.jsx' },
{ t: '保险管理', p: 'web端/业务管理/保险管理.jsx' },
{ t: '审批中心', p: 'web端/审批中心.jsx' }
]
},
yeEnergy: {
label: '业管-能源部',
items: [
{ t: '加氢订单管理', p: 'web端/加氢站管理/加氢订单.jsx' }
]
},
ops: {
label: '运维',
items: [
{ t: '车辆管理', p: 'web端/车辆管理.jsx' },
{ t: '证照管理', p: 'web端/运维管理/车辆业务/证照管理.jsx' },
{ t: '备车管理', p: 'web端/运维管理/车辆业务/备车管理.jsx' },
{ t: '交车管理', p: 'web端/运维管理/车辆业务/交车管理.jsx' },
{ t: '还车管理', p: 'web端/运维管理/车辆业务/还车管理.jsx' },
{ t: '替换车管理', p: 'web端/运维管理/车辆业务/替换车管理.jsx' },
{ t: '调拨管理', p: 'web端/运维管理/车辆业务/调拨管理.jsx' },
{ t: '异动管理', p: 'web端/运维管理/车辆业务/异动管理.jsx' },
{ t: '备件库管理', p: 'web端/运维管理/备件管理/备件库存.jsx' }
]
},
finance: {
label: '财务',
items: [
{ t: '提车应收款', p: 'web端/财务管理/提车应收款.jsx' },
{ t: '租赁账单', p: 'web端/财务管理/租赁账单.jsx' },
{ t: '还车应结款', p: 'web端/财务管理/还车应结款.jsx' },
{ t: '审批中心', p: 'web端/审批中心.jsx' },
{ t: '充值单管理', p: 'web端/财务管理/充值单管理.jsx' }
]
},
safety: {
label: '安全',
items: [
{ t: '违章管理', p: 'web端/安全管理/违章管理.jsx' },
{ t: '事故管理', p: 'web端/安全管理/事故管理.jsx' },
{ t: '司机管理', p: 'web端/安全管理/司机管理.jsx' },
{ t: '安全培训资料', p: 'web端/安全管理/安全培训资料.jsx' },
{ t: '安全培训记录', p: 'web端/安全管理/安全培训记录.jsx' }
]
},
legal: {
label: '法务',
items: [
{ t: '审批中心', p: 'web端/审批中心.jsx' }
]
}
};
}, []);
var auditColumns = useMemo(function () {
return [
{ title: '流程到达时间', dataIndex: 'arriveAt', key: 'arriveAt', width: 150 },
{ title: '流程类型', dataIndex: 'flowType', key: 'flowType', ellipsis: true },
{ title: '发起时间', dataIndex: 'startAt', key: 'startAt', width: 140 },
{ title: '发起人', dataIndex: 'starter', key: 'starter', width: 100 },
{
title: '操作',
key: 'act',
width: 88,
render: function (_, r) {
return React.createElement(Button, { type: 'link', size: 'small', onClick: function () { protoNav(r.path); } }, '去处理');
}
}
];
}, []);
var noticeColumns = useMemo(function () {
return [
{ title: '时间', dataIndex: 'time', key: 'time', width: 150 },
{ title: '通知类型', dataIndex: 'type', key: 'type', width: 160 },
{ title: '内容', dataIndex: 'content', key: 'content', ellipsis: true }
];
}, []);
function renderMetricCard(m) {
var inner = React.createElement(Card, {
size: 'small',
bordered: false,
style: Object.assign({}, cardStyle, { minHeight: 108, width: '100%', flex: 1, display: 'flex', flexDirection: 'column' }),
bodyStyle: {
padding: '16px 12px',
cursor: m.modal || m.pop ? 'pointer' : 'default',
flex: 1,
display: 'flex',
alignItems: 'flex-start',
justifyContent: 'center'
},
onClick: function () {
if (m.modal === 'audit') setAuditModalOpen(true);
else if (m.modal === 'notice') setNoticeModalOpen(true);
}
},
React.createElement(Statistic, {
title: React.createElement('span', { style: { fontSize: 13 } }, m.title),
value: m.value,
valueStyle: { color: m.color, fontWeight: 600, fontSize: 24 }
})
);
if (m.pop) {
return React.createElement(Popover, { content: todoPopoverContent, title: '待办工作说明', trigger: 'click' },
React.createElement('div', { style: { display: 'flex', flex: 1, width: '100%', minWidth: 0 } }, inner));
}
return inner;
}
var quickTabItems = useMemo(function () {
return ['ye', 'yeEnergy', 'ops', 'finance', 'safety', 'legal'].map(function (k) {
var g = quickByRole[k];
return {
key: k,
label: g.label,
children: React.createElement(Row, { gutter: [12, 12] },
g.items.map(function (it) {
return React.createElement(Col, { xs: 8, sm: 6, md: 4, lg: 3, key: it.t },
React.createElement(Card, {
size: 'small',
hoverable: true,
bodyStyle: { padding: '12px 8px', textAlign: 'center' },
onClick: function () { protoNav(it.p); }
},
React.createElement('div', {
style: {
width: 40, height: 40, margin: '0 auto 8px', borderRadius: 8,
background: 'linear-gradient(135deg,#e6f4ff,#bae0ff)', lineHeight: '40px', fontSize: 18
}
}, it.t.charAt(0)),
React.createElement('div', { style: { fontSize: 12, fontWeight: 500 } }, it.t)
)
);
})
)
};
});
}, [quickByRole]);
return React.createElement(App, null,
React.createElement('div', { style: layoutStyle },
React.createElement('div', { style: { display: 'flex', justifyContent: 'space-between', alignItems: 'center', flexWrap: 'wrap', gap: 8, marginBottom: 8 } },
React.createElement(Space, null,
React.createElement('span', { style: { fontSize: 20, fontWeight: 600, color: 'rgba(0,0,0,0.85)' } }, '工作台'),
React.createElement(Tag, { color: 'default' }, '工作台')
),
React.createElement(Button, { type: 'link', style: { padding: 0 }, onClick: function () { setRequirementOpen(true); } }, '查看需求说明')
),
React.createElement(Modal, {
title: '需求说明',
open: requirementOpen,
width: 760,
onCancel: function () { setRequirementOpen(false); },
footer: React.createElement(Button, { onClick: function () { setRequirementOpen(false); } }, '关闭'),
bodyStyle: { maxHeight: '72vh', overflow: 'auto' }
}, React.createElement('div', { style: { whiteSpace: 'pre-wrap', fontSize: 13, lineHeight: 1.65, color: 'rgba(0,0,0,0.85)' } }, requirementDoc)),
React.createElement(Modal, {
title: '待审批任务',
open: auditModalOpen,
width: 900,
onCancel: function () { setAuditModalOpen(false); },
footer: React.createElement(Button, { onClick: function () { setAuditModalOpen(false); } }, '关闭'),
destroyOnClose: true
},
React.createElement(Table, {
size: 'small',
rowKey: 'id',
columns: auditColumns,
dataSource: pendingAuditList,
pagination: { pageSize: 8, showSizeChanger: false }
})
),
React.createElement(Modal, {
title: '通知消息',
open: noticeModalOpen,
width: 860,
onCancel: function () { setNoticeModalOpen(false); },
footer: React.createElement(Button, { onClick: function () { setNoticeModalOpen(false); } }, '关闭'),
destroyOnClose: true
},
React.createElement(Table, {
size: 'small',
rowKey: 'id',
columns: noticeColumns,
dataSource: noticeList,
pagination: { pageSize: 8, showSizeChanger: false }
})
),
React.createElement('div', { style: { display: 'flex', flexWrap: 'wrap', gap: 16, marginBottom: 16, alignItems: 'stretch' } },
topMetrics.map(function (m) {
return React.createElement('div', { key: m.key, style: { flex: '1 1 160px', minWidth: 148, maxWidth: '100%', display: 'flex' } }, renderMetricCard(m));
})
),
React.createElement(Row, { gutter: [16, 16], style: { marginBottom: 16 } },
React.createElement(Col, { xs: 24, xl: 7 },
React.createElement(Card, {
title: React.createElement(Space, null, '我的待办清单', React.createElement(Badge, { count: myTodoList.length, style: { backgroundColor: '#1677ff' } })),
size: 'small',
bordered: false,
style: cardStyle,
bodyStyle: { maxHeight: 520, overflow: 'auto' }
},
React.createElement(List, {
size: 'small',
dataSource: myTodoList,
locale: { emptyText: '暂无待办' },
renderItem: function (item) {
return React.createElement(List.Item, {
actions: [
React.createElement(Button, { type: 'link', key: 'go', size: 'small', onClick: function () { protoNav(item.path); } }, '去处理')
]
},
React.createElement(List.Item.Meta, {
title: React.createElement('span', { style: { fontSize: 13 } }, item.name),
description: React.createElement(Text, { type: 'secondary', style: { fontSize: 12 } }, '生成时间:' + item.time)
})
);
}
})
)
),
React.createElement(Col, { xs: 24, xl: 10 },
React.createElement(Card, { title: '数据统计', size: 'small', bordered: false, style: Object.assign({ marginBottom: 16 }, cardStyle) },
React.createElement('div', { style: { fontWeight: 600, marginBottom: 12, fontSize: 13 } }, '车辆数据统计'),
React.createElement(Row, { gutter: 8 },
[
{ label: '车辆总数', v: 248 },
{ label: '自营车辆数', v: 32 },
{ label: '库存车辆数', v: 30 },
{ label: '待运营车辆数', v: 12 }
].map(function (s) {
return React.createElement(Col, { span: 12, key: s.label },
React.createElement(Card, { size: 'small', bodyStyle: { padding: '10px 8px' } },
React.createElement(Statistic, { title: s.label, value: s.v, valueStyle: { fontSize: 18 } })
)
);
})
),
React.createElement(Divider, { plain: true, style: { margin: '12px 0 8px', fontSize: 12 } }, '近12个月 · 运营车辆 / 闲置车辆'),
React.createElement('div', { style: { fontSize: 11, color: 'rgba(0,0,0,0.45)', marginBottom: 6 } }, '蓝色:运营 浅蓝:闲置(原型双柱示意)'),
renderBarGroup(vehicleMonthBars, 'op', 'idle', '#1677ff', '#91caff')
),
React.createElement(Card, { title: '合同数据统计', size: 'small', bordered: false, style: cardStyle },
React.createElement(Row, { gutter: 16 },
React.createElement(Col, { span: 12 }, React.createElement(Statistic, { title: '租赁合同总数', value: 58, valueStyle: { color: '#722ed1' } })),
React.createElement(Col, { span: 12 }, React.createElement(Statistic, { title: '自营合同总数', value: 14, valueStyle: { color: '#52c41a' } }))
),
React.createElement(Divider, { plain: true, style: { margin: '12px 0 8px', fontSize: 12 } }, '近12个月 · 租赁合同 / 自营合同'),
React.createElement('div', { style: { fontSize: 11, color: 'rgba(0,0,0,0.45)', marginBottom: 6 } }, '紫色:租赁 浅紫:自营(原型双柱示意)'),
renderBarGroup(contractMonthBars, 'lease', 'self', '#722ed1', '#b37feb')
)
),
React.createElement(Col, { xs: 24, xl: 7 },
React.createElement(Card, {
title: React.createElement(Space, null, '我的通知清单', React.createElement(Badge, { count: noticeList.length })),
size: 'small',
bordered: false,
style: cardStyle,
extra: React.createElement(Button, { type: 'link', size: 'small', style: { padding: 0 }, onClick: function () { setNoticeModalOpen(true); } }, '全部')
},
React.createElement('div', { style: { maxHeight: 480, overflow: 'auto' } },
React.createElement(List, {
size: 'small',
dataSource: noticeList.slice(0, 8),
renderItem: function (n) {
return React.createElement(List.Item, { style: { padding: '10px 0' } },
React.createElement(List.Item.Meta, {
title: React.createElement(Space, { wrap: true, size: 4 },
React.createElement(Text, { type: 'secondary', style: { fontSize: 12 } }, n.time),
React.createElement(Tag, null, n.type)
),
description: React.createElement('span', { style: { fontSize: 12, color: 'rgba(0,0,0,0.75)' } }, n.content)
})
);
}
})
)
)
)
),
React.createElement(Card, {
title: '快速入口(按角色)',
size: 'small',
bordered: false,
style: cardStyle,
extra: React.createElement(Text, { type: 'secondary', style: { fontSize: 12 } }, '多角色时 Tab 切换;联调按权限过滤')
},
React.createElement(Tabs, {
activeKey: roleTab,
onChange: setRoleTab,
items: quickTabItems
})
)
)
);
};

View File

@@ -1,5 +1,5 @@
// 使 const Component
// - - -
// - - - -
const Component = function () {
var useState = React.useState;
@@ -108,8 +108,7 @@ const Component = function () {
'1.3.异动目的地:必填项,选择器,选项为:停车场、维修站、其他;',
'2.4.目的地名称:必填项,如异动目的地为停车场,则此处为停车场(选择器),如异动目的地为维修站,则此处为维修站(选择器),如异动目的地为其他,则此处为输入框(自定义输入);',
'2.5.异动类型:必填项,选择器,选项为:维修、保养、年审、其他;',
'2.6.预计异动里程输入框支持2位小数输入后缀为km',
'2.7.备注:文本域,支持自定义输入;',
'2.6.备注:文本域,支持自定义输入',
'',
'2.车辆信息:',
'2.1.车牌号:显示车牌号,支持输入框模糊搜索下拉匹配对应选项;',
@@ -117,11 +116,12 @@ const Component = function () {
'2.3.品牌:根据所选车辆品牌自动反写,默认提示为请先选择车辆;',
'2.4.型号:根据所选车辆型号自动反写,默认提示为请先选择车辆;',
'2.5.出发停车场:根据所选车辆出发时停车场自动反写,默认提示为请先选择车辆;',
'2.6.异动开始里程:必填项,输入框,精确至2位小数后缀为km',
'2.7.异动开始氢量必填项输入框精确至2位小数后缀为%或MPa根据所选车辆型号中获取',
'2.8.异动开始必填项输入框精确至2位小数后缀为kWh',
'2.9.操作:删除',
'2.10.新增一行:铺满整行',
'2.6.预计异动里程:输入框,支持2位小数输入后缀为km',
'2.7.异动开始里程必填项输入框精确至2位小数后缀为km',
'2.8.异动开始必填项输入框精确至2位小数后缀为%或MPa根据所选车辆型号中获取',
'2.9.异动开始电量必填项输入框精确至2位小数后缀为kWh',
'2.10.操作:删除',
'2.11.新增一行:铺满整行;',
'',
'3.底部为提交审核、保存、取消;'
].join('\n');
@@ -133,7 +133,6 @@ const Component = function () {
destinationName: undefined,
destinationNameOther: '',
changeType: undefined,
plannedMileageKm: '',
remark: ''
});
var form = formState[0];
@@ -153,6 +152,7 @@ const Component = function () {
model: '',
departParking: '',
h2Unit: '',
plannedMileageKm: '',
startMileageKm: '',
startHydrogen: '',
startElectricKwh: ''
@@ -176,14 +176,16 @@ const Component = function () {
var handlePlateChange = useCallback(function (index, plateNo) {
var v = vehicleDb.find(function (x) { return x.plateNo === plateNo; });
updateRow(index, {
var patch = {
plateNo: plateNo,
vehicleType: v ? v.vehicleType : '',
brand: v ? v.brand : '',
model: v ? v.model : '',
departParking: v ? v.departParking : '',
h2Unit: v ? v.h2Unit : ''
});
};
if (!v) patch.plannedMileageKm = '';
updateRow(index, patch);
}, [vehicleDb, updateRow]);
var addRow = useCallback(function () {
@@ -196,6 +198,7 @@ const Component = function () {
model: '',
departParking: '',
h2Unit: '',
plannedMileageKm: '',
startMileageKm: '',
startHydrogen: '',
startElectricKwh: ''
@@ -216,6 +219,7 @@ const Component = function () {
model: '',
departParking: '',
h2Unit: '',
plannedMileageKm: '',
startMileageKm: '',
startHydrogen: '',
startElectricKwh: ''
@@ -243,6 +247,7 @@ const Component = function () {
for (var i = 0; i < (vehicles || []).length; i++) {
var r = vehicles[i] || {};
if (!String(r.plateNo || '').trim()) continue;
if (!String(r.plannedMileageKm || '').trim()) e['row_' + i + '_plannedMileageKm'] = '请输入预计异动里程';
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'] = '请输入异动开始电量';
@@ -362,6 +367,21 @@ const Component = function () {
return React.createElement(Input, { value: r.departParking ? r.departParking : '请先选择车辆', disabled: true });
}
},
{
title: React.createElement('span', null, reqStar, '预计异动里程'),
key: 'plannedMileageKm',
width: 160,
render: function (_, r, index) {
var k = 'row_' + index + '_plannedMileageKm';
return React.createElement(Input, {
value: r.plannedMileageKm,
onChange: function (e) { updateRow(index, { plannedMileageKm: toFixed2Input(e.target.value) }); },
placeholder: '0.00',
addonAfter: 'km',
status: errors[k] ? 'error' : undefined
});
}
},
{
title: React.createElement('span', null, reqStar, '异动开始里程'),
key: 'startMileageKm',
@@ -504,15 +524,6 @@ const Component = function () {
}),
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 }, '备注'),
@@ -534,7 +545,7 @@ const Component = function () {
dataSource: vehicles,
size: 'small',
pagination: false,
scroll: { x: 1250 }
scroll: { x: 1410 }
}),
React.createElement(Button, { type: 'dashed', style: { marginTop: 12, width: '100%' }, onClick: addRow }, '新增一行')
),

View File

@@ -82,7 +82,6 @@ const Component = function () {
destinationType: '维修站',
destinationName: '广州天河维修站',
changeType: '维修',
plannedMileageKm: '45.50',
remark: '车辆需进站检修制动系统,预计两日内完成。',
approvalStatus: '审批中',
endDateTime: getInitialDateTime('2026-02-22 17:45')
@@ -99,6 +98,7 @@ const Component = function () {
brand: '东风',
model: 'DFH1180',
departParking: '天河智慧停车场',
plannedMileageKm: '45.50',
startMileageKm: '15230.12',
startHydrogen: '28.30',
h2Unit: 'MPa',
@@ -159,6 +159,21 @@ const Component = function () {
return React.createElement(Input, { value: rowVehicleSelected(r) ? (r.departParking || '-') : '请先选择车辆', disabled: true });
}
},
{
title: '预计异动里程',
key: 'plannedMileageKm',
width: 160,
render: function (_, r) {
if (!rowVehicleSelected(r)) {
return React.createElement(Input, { value: '', disabled: true, placeholder: placeholderSelectVehicle });
}
return React.createElement(Input, {
value: fmtPlannedMileage(r.plannedMileageKm),
disabled: true,
addonAfter: 'km'
});
}
},
{
title: '异动开始里程',
key: 'startMileageKm',
@@ -256,8 +271,8 @@ const Component = function () {
'页面布局与字段与「异动管理-结束异动」一致;另含「审批状态」只读展示。',
'所有表单项、表格单元均为禁用只读,仅供查询展示。',
'',
'1.异动情况:异动开始/预计结束日期、异动目的地、目的地名称、异动类型、预计异动里程、审批状态、异动结束时间、备注 — 全部只读。',
'2.车辆信息:与结束异动表列一致(含异动结束里程/氢量/电量);仅展示单辆车(表格 1 行)— 全部只读;无新增行与删除。',
'1.异动情况:第一行开始/预计结束/目的地;第二行目的地名称、异动类型、审批状态(第三列);第三行异动结束时间(首列);备注跨三列 — 全部只读(不含预计异动里程)。',
'2.车辆信息:在出发停车场后展示预计异动里程(用例值,只读);其余与结束异动表列一致(含开始/结束里程氢量电量);仅 1 行;无新增行与删除。',
'3.底部仅「返回」按钮,返回异动管理列表(原型)。'
].join('\n');
@@ -323,14 +338,6 @@ const Component = function () {
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, {
@@ -340,8 +347,6 @@ const Component = function () {
disabled: true
})
),
React.createElement('div', { style: formItemStyle }),
React.createElement('div', { style: formItemStyle }),
React.createElement('div', { style: formItemStyle },
React.createElement('div', { style: labelStyle }, '异动结束时间'),
React.createElement(DatePicker, {
@@ -353,6 +358,8 @@ const Component = function () {
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, {
@@ -371,7 +378,7 @@ const Component = function () {
dataSource: vehicles,
size: 'small',
pagination: false,
scroll: { x: 1780 }
scroll: { x: 1940 }
})
),

View File

@@ -95,7 +95,6 @@ const Component = function () {
destinationType: '其他',
destinationName: '车管所检测线',
changeType: '年审',
plannedMileageKm: '8.20',
remark: '年审上线检测,预计半日完成。'
};
}, []);
@@ -109,6 +108,7 @@ const Component = function () {
brand: '比亚迪',
model: '汉',
departParking: '南山科技园停车场',
plannedMileageKm: '8.20',
startMileageKm: '8020.50',
startHydrogen: '55.00',
h2Unit: '%',
@@ -130,7 +130,7 @@ const Component = function () {
});
}, []);
// 1.7 异动结束时间必填YYYY-MM-DD HH:mm
// 1.6 异动结束时间必填YYYY-MM-DD HH:mm
var endDateTimeState = useState(getInitialDateTime('2026-02-24 11:30'));
var endDateTime = endDateTimeState[0];
var setEndDateTime = endDateTimeState[1];
@@ -182,6 +182,21 @@ const Component = function () {
return React.createElement(Input, { value: rowVehicleSelected(r) ? (r.departParking || '-') : '请先选择车辆', disabled: true });
}
},
{
title: '预计异动里程',
key: 'plannedMileageKm',
width: 160,
render: function (_, r) {
if (!rowVehicleSelected(r)) {
return React.createElement(Input, { value: '', disabled: true, placeholder: placeholderSelectVehicle });
}
return React.createElement(Input, {
value: fmtPlannedMileage(r.plannedMileageKm),
disabled: true,
addonAfter: 'km'
});
}
},
{
title: '异动开始里程',
key: 'startMileageKm',
@@ -286,9 +301,8 @@ const Component = function () {
'1.3.异动目的地:显示异动目的地,包括:停车场、维修站、其他;',
'1.4.目的地名称:显示目的地名称,包括:停车场名称、维修站名称、其他;',
'1.5.异动类型:显示异动类型,包括:维修、保养、年审、其他;',
'1.6.预计异动里程显示预计异动里程支持2位小数后缀为km',
'1.7.异动结束时间必填项日期选择器格式为YYYY-MM-DD HH:MM',
'1.8.备注:显示备注信息;',
'1.6.异动结束时间必填项日期选择器格式为YYYY-MM-DD HH:MM',
'1.7.备注:显示备注信息',
'',
'2.车辆信息:',
'2.1.车牌号:输入框(禁用),显示车牌号;',
@@ -296,13 +310,14 @@ const Component = function () {
'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.6.预计异动里程:显示预计异动里程,支持2位小数后缀为km',
'2.7.异动开始里程:输入框(禁用)精确至2位小数后缀为km',
'2.8.异动结束里程必填项输入框精确至2位小数后缀为km',
'2.9.异动开始氢量:输入框(禁用)精确至2位小数后缀为%或MPa根据所选车辆型号中获取',
'2.10.异动结束氢量必填项输入框精确至2位小数后缀为%或MPa根据所选车辆型号中获取',
'2.11.异动开始电量:输入框(禁用)精确至2位小数后缀为kWh',
'2.12.异动结束电量必填项输入框精确至2位小数后缀为kWh',
'2.13.异动结束电量必填项输入框精确至2位小数后缀为kWh',
'',
'3.底部为提交、取消;',
'3.1.提交:提交进行必填项校验,提交成功后计入历史记录;',
@@ -401,14 +416,6 @@ const Component = function () {
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, {
@@ -438,7 +445,7 @@ const Component = function () {
dataSource: vehicles,
size: 'small',
pagination: false,
scroll: { x: 1780 }
scroll: { x: 1940 }
})
),

View File

@@ -1,5 +1,5 @@
// 【重要】必须使用 const Component 作为组件变量名
// 运维管理 - 车辆业务 - 异动管理 - 编辑
// 运维管理 - 车辆业务 - 异动管理 - 编辑(与「异动管理-新增」同步维护)
const Component = function () {
var useState = React.useState;
@@ -37,6 +37,16 @@ const Component = function () {
return s;
}
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;
}
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 };
@@ -101,6 +111,7 @@ const Component = function () {
var requirementDocContent = [
'一个「数字化资产ONEOS运管平台」中的「异动管理」「编辑」模块',
'#面包屑:运维管理-车辆业务-异动管理-编辑',
'(原型)进入页面预填用例数据,联调时由详情接口按异动 ID 回填。',
'',
'1.异动情况;',
'1.1.异动开始日期必填项日期选择器格式为YYYY-MM-DD HH:MM',
@@ -108,8 +119,7 @@ const Component = function () {
'1.3.异动目的地:必填项,选择器,选项为:停车场、维修站、其他;',
'2.4.目的地名称:必填项,如异动目的地为停车场,则此处为停车场(选择器),如异动目的地为维修站,则此处为维修站(选择器),如异动目的地为其他,则此处为输入框(自定义输入);',
'2.5.异动类型:必填项,选择器,选项为:维修、保养、年审、其他;',
'2.6.预计异动里程输入框支持2位小数输入后缀为km',
'2.7.备注:文本域,支持自定义输入;',
'2.6.备注:文本域,支持自定义输入',
'',
'2.车辆信息:',
'2.1.车牌号:显示车牌号,支持输入框模糊搜索下拉匹配对应选项;',
@@ -117,24 +127,25 @@ const Component = function () {
'2.3.品牌:根据所选车辆品牌自动反写,默认提示为请先选择车辆;',
'2.4.型号:根据所选车辆型号自动反写,默认提示为请先选择车辆;',
'2.5.出发停车场:根据所选车辆出发时停车场自动反写,默认提示为请先选择车辆;',
'2.6.异动开始里程:必填项,输入框,精确至2位小数后缀为km',
'2.7.异动开始氢量必填项输入框精确至2位小数后缀为%或MPa根据所选车辆型号中获取',
'2.8.异动开始必填项输入框精确至2位小数后缀为kWh',
'2.9.操作:删除',
'2.10.新增一行:铺满整行',
'2.6.预计异动里程:输入框,支持2位小数输入后缀为km',
'2.7.异动开始里程必填项输入框精确至2位小数后缀为km',
'2.8.异动开始必填项输入框精确至2位小数后缀为%或MPa根据所选车辆型号中获取',
'2.9.异动开始电量必填项输入框精确至2位小数后缀为kWh',
'2.10.操作:删除',
'2.11.新增一行:铺满整行;',
'',
'3.底部为提交审核、保存、取消;'
].join('\n');
// 原型:进入编辑页时由详情接口回填;以下为联调前用例数据
var formState = useState({
startTime: null,
plannedEndTime: null,
destinationType: undefined,
destinationName: undefined,
startTime: getInitialDateTime('2026-02-20 09:30'),
plannedEndTime: getInitialDateTime('2026-02-22 18:00'),
destinationType: '维修站',
destinationName: '广州天河维修站',
destinationNameOther: '',
changeType: undefined,
plannedMileageKm: '',
remark: ''
changeType: '维修',
remark: '车辆需进站检修制动系统,预计两日内完成。'
});
var form = formState[0];
var setForm = formState[1];
@@ -143,19 +154,33 @@ const Component = function () {
var errors = errorsState[0];
var setErrors = errorsState[1];
var rowIdRef = React.useRef(2);
var rowIdRef = React.useRef(3);
var vehiclesState = useState([
{
id: 1,
plateNo: undefined,
vehicleType: '',
brand: '',
model: '',
departParking: '',
h2Unit: '',
startMileageKm: '',
startHydrogen: '',
startElectricKwh: ''
plateNo: '粤A12345',
vehicleType: '厢式货车',
brand: '东风',
model: 'DFH1180',
departParking: '天河智慧停车场',
h2Unit: 'MPa',
plannedMileageKm: '45.50',
startMileageKm: '15230.12',
startHydrogen: '28.30',
startElectricKwh: '68.40'
},
{
id: 2,
plateNo: '浙A11111',
vehicleType: 'SUV',
brand: '小鹏',
model: 'P7',
departParking: '西湖景区停车场',
h2Unit: '%',
plannedMileageKm: '120.00',
startMileageKm: '12010.00',
startHydrogen: '60.00',
startElectricKwh: '55.20'
}
]);
var vehicles = vehiclesState[0];
@@ -176,14 +201,16 @@ const Component = function () {
var handlePlateChange = useCallback(function (index, plateNo) {
var v = vehicleDb.find(function (x) { return x.plateNo === plateNo; });
updateRow(index, {
var patch = {
plateNo: plateNo,
vehicleType: v ? v.vehicleType : '',
brand: v ? v.brand : '',
model: v ? v.model : '',
departParking: v ? v.departParking : '',
h2Unit: v ? v.h2Unit : ''
});
};
if (!v) patch.plannedMileageKm = '';
updateRow(index, patch);
}, [vehicleDb, updateRow]);
var addRow = useCallback(function () {
@@ -196,6 +223,7 @@ const Component = function () {
model: '',
departParking: '',
h2Unit: '',
plannedMileageKm: '',
startMileageKm: '',
startHydrogen: '',
startElectricKwh: ''
@@ -216,6 +244,7 @@ const Component = function () {
model: '',
departParking: '',
h2Unit: '',
plannedMileageKm: '',
startMileageKm: '',
startHydrogen: '',
startElectricKwh: ''
@@ -243,6 +272,7 @@ const Component = function () {
for (var i = 0; i < (vehicles || []).length; i++) {
var r = vehicles[i] || {};
if (!String(r.plateNo || '').trim()) continue;
if (!String(r.plannedMileageKm || '').trim()) e['row_' + i + '_plannedMileageKm'] = '请输入预计异动里程';
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'] = '请输入异动开始电量';
@@ -362,6 +392,21 @@ const Component = function () {
return React.createElement(Input, { value: r.departParking ? r.departParking : '请先选择车辆', disabled: true });
}
},
{
title: React.createElement('span', null, reqStar, '预计异动里程'),
key: 'plannedMileageKm',
width: 160,
render: function (_, r, index) {
var k = 'row_' + index + '_plannedMileageKm';
return React.createElement(Input, {
value: r.plannedMileageKm,
onChange: function (e) { updateRow(index, { plannedMileageKm: toFixed2Input(e.target.value) }); },
placeholder: '0.00',
addonAfter: 'km',
status: errors[k] ? 'error' : undefined
});
}
},
{
title: React.createElement('span', null, reqStar, '异动开始里程'),
key: 'startMileageKm',
@@ -504,15 +549,6 @@ const Component = function () {
}),
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 }, '备注'),
@@ -534,7 +570,7 @@ const Component = function () {
dataSource: vehicles,
size: 'small',
pagination: false,
scroll: { x: 1250 }
scroll: { x: 1410 }
}),
React.createElement(Button, { type: 'dashed', style: { marginTop: 12, width: '100%' }, onClick: addRow }, '新增一行')
),

View File

@@ -586,7 +586,7 @@ const Component = function () {
}, []);
var handleAdd = useCallback(function () {
message.info('新增异动(原型,联调时跳转新建页或打开表单');
message.info('跳转异动-新增页(原型,表单与编辑页一致,联调时按路由区分新建/编辑');
}, []);
function fmtNowYMDHM() {
@@ -747,7 +747,7 @@ const Component = function () {
}, '结束异动'));
}
if (canShowMovementEdit(r.approvalStatus)) {
nodes.push(React.createElement(Button, { key: 'edit', type: 'link', size: 'small', onClick: function () { message.info('跳转异动-编辑页原型ID' + r.id); } }, '编辑'));
nodes.push(React.createElement(Button, { key: 'edit', type: 'link', size: 'small', onClick: function () { message.info('跳转异动-编辑页(原型,表单与新增页一致ID' + r.id); } }, '编辑'));
}
return React.createElement(React.Fragment, null, nodes);
}

View File

@@ -7,8 +7,7 @@
1.3.异动目的地:必填项,选择器,选项为:停车场、维修站、其他;
2.4.目的地名称:必填项,如异动目的地为停车场,则此处为停车场(选择器),如异动目的地为维修站,则此处为维修站(选择器),如异动目的地为其他,则此处为输入框(自定义输入);
2.5.异动类型:必填项,选择器,选项为:维修、保养、年审、其他;
2.6.预计异动里程输入框支持2位小数输入后缀为km
2.7.备注:文本域,支持自定义输入;
2.6.备注:文本域,支持自定义输入
2.车辆信息:
2.1.车牌号:显示车牌号,支持输入框模糊搜索下拉匹配对应选项;
@@ -16,10 +15,11 @@
2.3.品牌:根据所选车辆品牌自动反写,默认提示为请先选择车辆;
2.4.型号:根据所选车辆型号自动反写,默认提示为请先选择车辆;
2.5.出发停车场:根据所选车辆出发时停车场自动反写,默认提示为请先选择车辆;
2.6.异动开始里程:必填项,输入框,精确至2位小数后缀为km
2.7.异动开始氢量必填项输入框精确至2位小数后缀为%或MPa根据所选车辆型号中获取
2.8.异动开始必填项输入框精确至2位小数后缀为kWh
2.9.操作:删除
2.10.新增一行:铺满整行
2.6.预计异动里程:输入框,支持2位小数输入后缀为km
2.7.异动开始里程必填项输入框精确至2位小数后缀为km
2.8.异动开始必填项输入框精确至2位小数后缀为%或MPa根据所选车辆型号中获取
2.9.异动开始电量必填项输入框精确至2位小数后缀为kWh
2.10.操作:删除
2.11.新增一行:铺满整行;
3.底部为提交审核、保存、取消;

View File

@@ -7,7 +7,8 @@
1.3.车牌号:选择器,输入框支持模糊搜索下拉匹配结果;
1.4.右侧为查询、重置按钮;
2.列表:
2.列表:分为2个tab进行中、历史记录
#进行中:
2.1.异动开始日期显示车辆异动开始日期格式为YYYY-MM-DD HH:MM
2.2.异动预计结束日期显示车辆异动结束日期格式为YYYY-MM-DD HH:MM
2.3.审批状态:分为:待提交、审批中、审批完成、驳回、撤回;
@@ -18,11 +19,33 @@
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.14.1.查看:点击跳转异动-查看页;
3.列表右下方为分页功能,支持单页显示条数设置;

View File

@@ -0,0 +1,30 @@
一个「数字化资产ONEOS运管平台」中的「异动管理」「结束异动」模块
#面包屑:运维管理-车辆业务-异动管理-结束异动
1.异动情况:
1.1.异动开始日期显示异动开始日期YYYY-MM-DD HH:MM
1.2.异动预计结束日期显示异动预计结束日期格式为YYYY-MM-DD HH:MM
1.3.异动目的地:显示异动目的地,包括:停车场、维修站、其他;
1.4.目的地名称:显示目的地名称,包括:停车场名称、维修站名称、其他;
1.5.异动类型:显示异动类型,包括:维修、保养、年审、其他;
1.6.异动结束时间必填项日期选择器格式为YYYY-MM-DD HH:MM
1.7.备注:显示备注信息;
2.车辆信息:
2.1.车牌号:输入框(禁用),显示车牌号;
2.2.车辆类型:根据所选车辆类型自动反写,默认提示为请先选择车辆;
2.3.品牌:根据所选车辆品牌自动反写,默认提示为请先选择车辆;
2.4.型号:根据所选车辆型号自动反写,默认提示为请先选择车辆;
2.5.出发停车场:根据所选车辆出发时停车场自动反写,默认提示为请先选择车辆;
2.6.预计异动里程显示预计异动里程支持2位小数后缀为km
2.7.异动开始里程输入框禁用精确至2位小数后缀为km
2.8.异动结束里程必填项输入框精确至2位小数后缀为km
2.9.异动开始氢量输入框禁用精确至2位小数后缀为%或MPa根据所选车辆型号中获取
2.10.异动结束氢量必填项输入框精确至2位小数后缀为%或MPa根据所选车辆型号中获取
2.11.异动开始电量输入框禁用精确至2位小数后缀为kWh
2.12.异动结束电量必填项输入框精确至2位小数后缀为kWh
2.13.异动结束电量必填项输入框精确至2位小数后缀为kWh
3.底部为提交、取消;
3.1.提交:提交进行必填项校验,提交成功后计入历史记录;
3.2.取消:点击取消,返回列表;