feat(web): 同步当前原型页与工具配置改动

统一提交当前工作区内的页面原型调整、新增运维相关页面以及本地工具配置目录变更,便于整体同步到远端环境继续联调与演示。

Made-with: Cursor
This commit is contained in:
王冕
2026-04-01 13:28:56 +08:00
parent 2a903b2cb4
commit 2018e34473
58 changed files with 13843 additions and 2137 deletions

524
工作台.jsx Normal file
View File

@@ -0,0 +1,524 @@
// 【重要】必须使用 const Component 作为组件变量名
// 数字化资产ONEOS运管平台 - 工作台模块
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 Row = antd.Row;
var Col = antd.Col;
var List = antd.List;
var Badge = antd.Badge;
var Modal = antd.Modal;
var Tabs = antd.Tabs;
var Space = antd.Space;
// 状态管理
var _approvalModalVisible = useState(false);
var _notificationModalVisible = useState(false);
var _activeRole = useState('业管');
var approvalModalVisible = _approvalModalVisible[0];
var setApprovalModalVisible = _approvalModalVisible[1];
var notificationModalVisible = _notificationModalVisible[0];
var setNotificationModalVisible = _notificationModalVisible[1];
var activeRole = _activeRole[0];
var setActiveRole = _activeRole[1];
// 样式定义
var styles = {
container: {
padding: '20px',
backgroundColor: '#f0f2f5',
minHeight: '100vh',
fontFamily: 'Arial, sans-serif'
},
breadcrumb: {
marginBottom: '20px',
fontSize: '14px'
},
metricCard: {
background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
borderRadius: '8px',
padding: '20px',
color: 'white',
cursor: 'pointer',
transition: 'transform 0.3s, box-shadow 0.3s'
},
metricCardCompleted: {
background: 'linear-gradient(135deg, #f093fb 0%, #f5576c 100%)'
},
metricCardApproved: {
background: 'linear-gradient(135deg, #4facfe 0%, #00f2fe 100%)'
},
metricCardNotification: {
background: 'linear-gradient(135deg, #fa709a 0%, #fee140 100%)'
},
metricTitle: {
fontSize: '14px',
opacity: '0.9',
marginBottom: '8px'
},
metricValue: {
fontSize: '32px',
fontWeight: 'bold'
},
metricDesc: {
fontSize: '12px',
opacity: '0.8',
marginTop: '8px'
},
sectionTitle: {
fontSize: '16px',
fontWeight: 'bold',
marginBottom: '16px',
color: '#262626',
paddingLeft: '8px',
borderLeft: '4px solid #1890ff'
},
taskList: {
maxHeight: '400px',
overflowY: 'auto'
},
taskItem: {
display: 'flex',
justifyContent: 'space-between',
alignItems: 'center',
padding: '12px 0',
borderBottom: '1px solid #f0f0f0'
},
taskInfo: {
flex: 1
},
taskName: {
fontSize: '14px',
color: '#262626',
marginBottom: '4px'
},
taskTime: {
fontSize: '12px',
color: '#8c8c8c'
},
processButton: {
padding: '6px 16px',
backgroundColor: '#1890ff',
color: 'white',
border: 'none',
borderRadius: '4px',
cursor: 'pointer',
fontSize: '12px'
},
statCards: {
marginBottom: '16px'
},
statItem: {
textAlign: 'center',
padding: '16px',
backgroundColor: '#fafafa',
borderRadius: '4px',
border: '1px solid #f0f0f0'
},
statValue: {
fontSize: '24px',
fontWeight: 'bold',
color: '#1890ff',
marginBottom: '4px'
},
statLabel: {
fontSize: '12px',
color: '#8c8c8c'
},
quickEntryCard: {
textAlign: 'center',
padding: '20px',
backgroundColor: 'white',
borderRadius: '8px',
cursor: 'pointer',
transition: 'all 0.3s',
border: '1px solid #f0f0f0'
},
quickEntryCardHover: {
boxShadow: '0 4px 12px rgba(0,0,0,0.1)',
transform: 'translateY(-2px)'
},
quickEntryIcon: {
fontSize: '32px',
marginBottom: '8px',
color: '#1890ff'
},
quickEntryName: {
fontSize: '12px',
color: '#262626'
},
modal: {
top: '20px'
},
notificationItem: {
padding: '12px',
borderBottom: '1px solid #f0f0f0'
},
notificationType: {
fontSize: '12px',
color: '#8c8c8c',
marginBottom: '4px'
},
notificationContent: {
fontSize: '14px',
color: '#262626',
marginBottom: '4px'
},
notificationTime: {
fontSize: '12px',
color: '#bfbfbf'
}
};
// 模拟数据 - 待办工作
var pendingTasks = [
{ id: 1, name: '交车任务 - 车辆管理', time: '2026-03-30 09:30', type: '运维侧' },
{ id: 2, name: '商业险到期 - 粤A12345', time: '2026-03-30 10:15', type: '业管侧' },
{ id: 3, name: '氢费审核 - 客户A项目', time: '2026-03-30 11:00', type: '业管-能源部侧' },
{ id: 4, name: '调拨任务 - 车辆V001', time: '2026-03-30 14:20', type: '运维侧' },
{ id: 5, name: '年审任务 - 沪D66666', time: '2026-03-30 15:45', type: '运维侧' }
];
// 模拟数据 - 已完成工作
var completedTasks = [
{ id: 1, name: '异动任务 - 车辆V003', time: '2026-03-29 16:30' },
{ id: 2, name: '租赁账单生成 - HT-2024-001', time: '2026-03-29 14:15' },
{ id: 3, name: '提车应收款 - 客户B', time: '2026-03-28 10:00' }
];
// 模拟数据 - 待审批任务
var pendingApprovals = [
{ id: 1, flowTime: '2026-03-30 09:00', flowType: '调拨审核', startTime: '2026-03-30 08:30', starter: '张三' },
{ id: 2, flowTime: '2026-03-30 10:30', flowType: '租赁账单审核', startTime: '2026-03-30 10:00', starter: '李四' },
{ id: 3, flowTime: '2026-03-30 11:15', flowType: '提车应收款审核', startTime: '2026-03-30 11:00', starter: '王五' },
{ id: 4, flowTime: '2026-03-30 14:00', flowType: '租赁合同审核', startTime: '2026-03-30 13:30', starter: '赵六' },
{ id: 5, flowTime: '2026-03-30 15:30', flowType: '氢费账单审核', startTime: '2026-03-30 15:00', starter: '孙七' }
];
// 模拟数据 - 已审批任务
var approvedTasks = [
{ id: 1, name: '替换车审核', time: '2026-03-29 15:00' },
{ id: 2, name: '还车应结款审核', time: '2026-03-28 14:30' }
];
// 模拟数据 - 通知消息
var notifications = [
{ id: 1, type: '保险到期提醒', content: '粤A12345商业险将在2026-04-15到期请尽快处理', time: '2026-03-30 09:00' },
{ id: 2, type: '营运证到期提醒', content: '粤B67890营运证还有90天到期请尽快更新营运证', time: '2026-03-30 10:30' },
{ id: 3, type: '租赁合同到期提醒', content: 'HT-2024-001 客户A项目还有30天到期请尽快处理', time: '2026-03-30 11:00' },
{ id: 4, type: '氢费余额不足提醒', content: '客户A 项目A氢费余额已不足500元请尽快通知客户处理', time: '2026-03-30 14:00' },
{ id: 5, type: '审批流程提醒', content: '张三 调拨流程审批节点已到达,请进行审批', time: '2026-03-30 15:30' }
];
// 模拟数据 - 车辆统计
var vehicleStats = {
total: 1250,
selfOperated: 890,
inventory: 210,
pending: 150
};
// 模拟数据 - 合同统计
var contractStats = {
total: 156,
selfOperated: 98
};
// 快速入口配置
var quickEntries = {
'业管': [
{ name: '租赁合同', icon: '📄' },
{ name: '交车任务', icon: '🚗' },
{ name: '提车应收款', icon: '💰' },
{ name: '租赁账单', icon: '📊' },
{ name: '还车应结款', icon: '💵' },
{ name: '能源账户', icon: '⚡' },
{ name: '氢费账单', icon: '🔋' },
{ name: '电费账单', icon: '⚡' },
{ name: 'ETC账单', icon: '🛣️' },
{ name: '保险管理', icon: '🛡️' },
{ name: '审批中心', icon: '✅' }
],
'业管-能源部': [
{ name: '加氢订单管理', icon: '⛽' }
],
'运维': [
{ name: '车辆管理', icon: '🚗' },
{ name: '证照管理', icon: '📋' },
{ name: '备车管理', icon: '🔧' },
{ name: '交车管理', icon: '🚀' },
{ name: '还车管理', icon: '🏠' },
{ name: '替换车管理', icon: '🔄' },
{ name: '调拨管理', icon: '📦' },
{ name: '异动管理', icon: '📊' },
{ name: '备件库管理', icon: '🔩' }
],
'财务': [
{ name: '提车应收款', icon: '💰' },
{ name: '租赁账单', icon: '📊' },
{ name: '还车应结款', icon: '💵' },
{ name: '审批中心', icon: '✅' },
{ name: '充值单管理', icon: '💳' }
],
'安全': [
{ name: '违章管理', icon: '🚦' },
{ name: '事故管理', icon: '🚨' },
{ name: '司机管理', icon: '👨‍✈️' },
{ name: '安全培训资料', icon: '📚' },
{ name: '安全培训记录', icon: '📝' }
],
'法务': [
{ name: '审批中心', icon: '✅' }
]
};
// 角色标签
var roleTabs = ['业管', '业管-能源部', '运维', '财务', '安全', '法务'];
// 处理待办任务
var handleProcessTask = function(task) {
console.log('处理任务:', task);
};
// 处理审批
var handleProcessApproval = function(approval) {
console.log('处理审批:', approval);
};
// 处理快速入口
var handleQuickEntry = function(entry) {
console.log('快速入口:', entry);
};
return React.createElement('div', { style: styles.container },
// 面包屑
React.createElement(Breadcrumb, { style: styles.breadcrumb },
React.createElement(Breadcrumb.Item, null, '工作台')
),
// 顶部关键指标卡片
React.createElement(Row, { gutter: 16, style: { marginBottom: '24px' } },
// 待办工作
React.createElement(Col, { span: 4 },
React.createElement('div', { style: styles.metricCard },
React.createElement('div', { style: styles.metricTitle }, '待办工作'),
React.createElement('div', { style: styles.metricValue }, '5'),
React.createElement('div', { style: styles.metricDesc }, '运维侧: 3 | 业管侧: 1 | 能源部: 1')
)
),
// 已完成工作
React.createElement(Col, { span: 4 },
React.createElement('div', { style: Object.assign({}, styles.metricCard, styles.metricCardCompleted) },
React.createElement('div', { style: styles.metricTitle }, '已完成工作'),
React.createElement('div', { style: styles.metricValue }, '3'),
React.createElement('div', { style: styles.metricDesc }, '本周完成: 3 | 本月完成: 12')
)
),
// 待审批任务
React.createElement(Col, { span: 4 },
React.createElement('div', { style: styles.metricCard, onClick: function() { setApprovalModalVisible(true); } },
React.createElement('div', { style: styles.metricTitle }, '待审批任务'),
React.createElement('div', { style: styles.metricValue }, '5'),
React.createElement('div', { style: styles.metricDesc }, '运维: 1 | 财务: 3 | 法务: 1')
)
),
// 已审批任务
React.createElement(Col, { span: 4 },
React.createElement('div', { style: Object.assign({}, styles.metricCard, styles.metricCardApproved) },
React.createElement('div', { style: styles.metricTitle }, '已审批任务'),
React.createElement('div', { style: styles.metricValue }, '2'),
React.createElement('div', { style: styles.metricDesc }, '本周审批: 2 | 本月审批: 8')
)
),
// 通知消息
React.createElement(Col, { span: 4 },
React.createElement('div', { style: Object.assign({}, styles.metricCard, styles.metricCardNotification), onClick: function() { setNotificationModalVisible(true); } },
React.createElement('div', { style: styles.metricTitle }, '通知消息'),
React.createElement('div', { style: styles.metricValue }, '5'),
React.createElement('div', { style: styles.metricDesc }, '运维: 3 | 业管: 1 | 审批: 1')
)
)
),
// 中间内容区域
React.createElement(Row, { gutter: 16 },
// 左侧 - 我的待办清单
React.createElement(Col, { span: 7 },
React.createElement(Card, { title: React.createElement('div', { style: styles.sectionTitle }, '我的待办清单'), bordered: false, style: { height: '100%' } },
React.createElement('div', { style: styles.taskList },
pendingTasks.map(function(task) {
return React.createElement('div', { key: task.id, style: styles.taskItem },
React.createElement('div', { style: styles.taskInfo },
React.createElement('div', { style: styles.taskName }, task.name),
React.createElement('div', { style: styles.taskTime }, task.time + ' | ' + task.type)
),
React.createElement('button', {
style: styles.processButton,
onClick: function() { handleProcessTask(task); }
}, '去处理')
);
})
)
)
),
// 中间 - 数据统计模块
React.createElement(Col, { span: 10 },
// 车辆数据统计
React.createElement(Card, { title: React.createElement('div', { style: styles.sectionTitle }, '车辆数据统计'), bordered: false, style: { marginBottom: '16px' } },
React.createElement(Row, { gutter: 16, style: styles.statCards },
React.createElement(Col, { span: 6 },
React.createElement('div', { style: styles.statItem },
React.createElement('div', { style: styles.statValue }, vehicleStats.total),
React.createElement('div', { style: styles.statLabel }, '车辆总数')
)
),
React.createElement(Col, { span: 6 },
React.createElement('div', { style: styles.statItem },
React.createElement('div', { style: styles.statValue }, vehicleStats.selfOperated),
React.createElement('div', { style: styles.statLabel }, '自营车辆数')
)
),
React.createElement(Col, { span: 6 },
React.createElement('div', { style: styles.statItem },
React.createElement('div', { style: styles.statValue }, vehicleStats.inventory),
React.createElement('div', { style: styles.statLabel }, '库存车辆数')
)
),
React.createElement(Col, { span: 6 },
React.createElement('div', { style: styles.statItem },
React.createElement('div', { style: styles.statValue }, vehicleStats.pending),
React.createElement('div', { style: styles.statLabel }, '待运营车辆数')
)
)
),
// 近12个月运营车辆、闲置车辆双柱状图使用Ant Design Charts
React.createElement('div', { style: { height: '200px', marginTop: '16px', backgroundColor: '#fafafa', borderRadius: '4px', display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#8c8c8c' } },
'[柱状图近12个月运营车辆、闲置车辆统计]'
)
),
// 合同数据统计
React.createElement(Card, { title: React.createElement('div', { style: styles.sectionTitle }, '合同数据统计'), bordered: false },
React.createElement(Row, { gutter: 16, style: styles.statCards },
React.createElement(Col, { span: 12 },
React.createElement('div', { style: styles.statItem },
React.createElement('div', { style: styles.statValue }, contractStats.total),
React.createElement('div', { style: styles.statLabel }, '租赁合同总数')
)
),
React.createElement(Col, { span: 12 },
React.createElement('div', { style: styles.statItem },
React.createElement('div', { style: styles.statValue }, contractStats.selfOperated),
React.createElement('div', { style: styles.statLabel }, '自营合同总数')
)
)
),
// 近12个月租赁合同、自营合同双柱状图
React.createElement('div', { style: { height: '200px', marginTop: '16px', backgroundColor: '#fafafa', borderRadius: '4px', display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#8c8c8c' } },
'[柱状图近12个月租赁合同、自营合同统计]'
)
)
),
// 右侧 - 我的通知清单
React.createElement(Col, { span: 7 },
React.createElement(Card, { title: React.createElement('div', { style: styles.sectionTitle }, '我的通知清单'), bordered: false, style: { height: '100%' } },
React.createElement('div', { style: styles.taskList },
notifications.map(function(notification) {
return React.createElement('div', { key: notification.id, style: styles.notificationItem },
React.createElement('div', { style: styles.notificationType }, notification.type),
React.createElement('div', { style: styles.notificationContent }, notification.content),
React.createElement('div', { style: styles.notificationTime }, notification.time)
);
})
)
)
)
),
// 底部快速入口
React.createElement(Card, { title: React.createElement('div', { style: styles.sectionTitle }, '快速入口'), bordered: false, style: { marginTop: '16px' } },
React.createElement(Tabs, { activeKey: activeRole, onChange: function(key) { setActiveRole(key); } },
roleTabs.map(function(role) {
return React.createElement(Tabs.TabPane, { tab: role, key: role },
React.createElement(Row, { gutter: 16 },
quickEntries[role].map(function(entry, index) {
return React.createElement(Col, { key: index, span: 4 },
React.createElement('div', {
style: styles.quickEntryCard,
onClick: function() { handleQuickEntry(entry); }
},
React.createElement('div', { style: styles.quickEntryIcon }, entry.icon),
React.createElement('div', { style: styles.quickEntryName }, entry.name)
)
);
})
)
);
})
)
),
// 待审批任务弹窗
React.createElement(Modal, {
title: '待审批任务',
visible: approvalModalVisible,
onCancel: function() { setApprovalModalVisible(false); },
footer: null,
width: 800,
style: styles.modal
},
React.createElement(List, {
dataSource: pendingApprovals,
renderItem: function(approval) {
return React.createElement(List.Item, null,
React.createElement(List.Item.Meta, {
title: approval.flowType,
description: React.createElement('div', null,
React.createElement('div', null, '流程到达时间: ' + approval.flowTime),
React.createElement('div', null, '发起时间: ' + approval.startTime),
React.createElement('div', null, '发起人: ' + approval.starter)
)
}),
React.createElement('button', {
style: styles.processButton,
onClick: function() { handleProcessApproval(approval); }
}, '去处理')
);
}
})
),
// 通知消息弹窗
React.createElement(Modal, {
title: '通知消息',
visible: notificationModalVisible,
onCancel: function() { setNotificationModalVisible(false); },
footer: null,
width: 800,
style: styles.modal
},
React.createElement(List, {
dataSource: notifications,
renderItem: function(notification) {
return React.createElement(List.Item, null,
React.createElement(List.Item.Meta, {
title: notification.type,
description: React.createElement('div', null,
React.createElement('div', { style: { fontSize: '14px', marginBottom: '4px' } }, notification.content),
React.createElement('div', { style: { fontSize: '12px', color: '#8c8c8c' } }, notification.time)
)
})
);
}
})
)
);
};