perf(frontend): 优化前端性能与代码结构
refactor(components): 使用React.memo和useCallback优化组件渲染 feat(cache): 添加API缓存管理功能 perf(build): 配置Vite构建优化选项 style: 提取工具函数减少重复代码 chore: 添加懒加载和Suspense支持
This commit is contained in:
zhang1106
+335
-424
@@ -1,12 +1,11 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { Card, Row, Col, Statistic, Spin, message, Button, Tag } from 'antd';
|
||||
import React, { useState, useEffect, useCallback, useMemo } from 'react';
|
||||
import { Card, Row, Col, Statistic, message, Button, Tag } from 'antd';
|
||||
import {
|
||||
DatabaseOutlined,
|
||||
CloudServerOutlined,
|
||||
WarningOutlined,
|
||||
PoweroffOutlined,
|
||||
HomeOutlined,
|
||||
MonitorOutlined,
|
||||
SettingOutlined,
|
||||
ArrowUpOutlined,
|
||||
ArrowDownOutlined,
|
||||
@@ -15,197 +14,351 @@ import {
|
||||
} from '@ant-design/icons';
|
||||
import axios from 'axios';
|
||||
|
||||
const theme = {
|
||||
primary: '#1890ff',
|
||||
primaryDark: '#096dd9',
|
||||
secondary: '#722ed1',
|
||||
success: '#52c41a',
|
||||
warning: '#faad14',
|
||||
error: '#ff4d4f',
|
||||
background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
|
||||
cardBg: 'rgba(255, 255, 255, 0.95)',
|
||||
textPrimary: '#262626',
|
||||
textSecondary: '#8c8c8c'
|
||||
};
|
||||
|
||||
const containerStyle = {
|
||||
minHeight: '100vh',
|
||||
background: 'linear-gradient(135deg, #e3f2fd 0%, #f3e5f5 100%)',
|
||||
padding: '24px'
|
||||
};
|
||||
|
||||
const headerStyle = {
|
||||
textAlign: 'center',
|
||||
marginBottom: '32px'
|
||||
};
|
||||
|
||||
const titleStyle = {
|
||||
fontSize: '2.5rem',
|
||||
fontWeight: '700',
|
||||
background: theme.background,
|
||||
WebkitBackgroundClip: 'text',
|
||||
WebkitTextFillColor: 'transparent',
|
||||
margin: '0 0 8px 0'
|
||||
};
|
||||
|
||||
const subtitleStyle = {
|
||||
fontSize: '1.1rem',
|
||||
color: theme.textSecondary,
|
||||
margin: '0'
|
||||
};
|
||||
|
||||
const statCardStyle = {
|
||||
borderRadius: '16px',
|
||||
border: 'none',
|
||||
boxShadow: '0 4px 16px rgba(24, 144, 255, 0.1)',
|
||||
background: theme.cardBg,
|
||||
backdropFilter: 'blur(10px)',
|
||||
transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)',
|
||||
position: 'relative',
|
||||
overflow: 'hidden',
|
||||
cursor: 'pointer'
|
||||
};
|
||||
|
||||
const systemOverviewStyle = {
|
||||
marginTop: '32px'
|
||||
};
|
||||
|
||||
const overviewCardStyle = {
|
||||
borderRadius: '20px',
|
||||
border: 'none',
|
||||
boxShadow: '0 8px 32px rgba(24, 144, 255, 0.15)',
|
||||
background: theme.cardBg,
|
||||
backdropFilter: 'blur(10px)'
|
||||
};
|
||||
|
||||
const welcomeSectionStyle = {
|
||||
background: theme.background,
|
||||
borderRadius: '12px',
|
||||
padding: '20px',
|
||||
textAlign: 'center',
|
||||
color: 'white',
|
||||
marginBottom: '24px'
|
||||
};
|
||||
|
||||
const navigationGridStyle = {
|
||||
display: 'grid',
|
||||
gridTemplateColumns: 'repeat(auto-fit, minmax(160px, 1fr))',
|
||||
gap: '16px',
|
||||
marginBottom: '24px'
|
||||
};
|
||||
|
||||
const navButtonStyle = {
|
||||
height: 'auto',
|
||||
padding: '20px 16px',
|
||||
borderRadius: '12px',
|
||||
border: '2px solid rgba(24, 144, 255, 0.1)',
|
||||
background: 'rgba(24, 144, 255, 0.02)',
|
||||
transition: 'all 0.3s ease',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
alignItems: 'center',
|
||||
gap: '8px'
|
||||
};
|
||||
|
||||
const navIconStyle = {
|
||||
fontSize: '2rem',
|
||||
color: theme.primary
|
||||
};
|
||||
|
||||
const navTextStyle = {
|
||||
fontSize: '0.95rem',
|
||||
fontWeight: '600',
|
||||
color: theme.textPrimary
|
||||
};
|
||||
|
||||
const systemInfoStyle = {
|
||||
background: 'linear-gradient(135deg, #e8f4fd 0%, #f0f9ff 100%)',
|
||||
borderRadius: '12px',
|
||||
padding: '16px',
|
||||
border: '1px solid rgba(24, 144, 255, 0.1)'
|
||||
};
|
||||
|
||||
const navButtonsData = [
|
||||
{ key: 'devices', icon: CloudServerOutlined, text: '设备管理', path: '/devices' },
|
||||
{ key: 'racks', icon: DatabaseOutlined, text: '资源规划', path: '/racks' },
|
||||
{ key: 'faults', icon: WarningOutlined, text: '故障监控', path: '/faults' },
|
||||
{ key: 'settings', icon: SettingOutlined, text: '系统配置', path: '/settings' }
|
||||
];
|
||||
|
||||
const createTrendStyle = (trend) => ({
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
fontSize: '0.875rem',
|
||||
fontWeight: '500',
|
||||
color: trend > 0 ? theme.success : theme.error,
|
||||
marginTop: '8px'
|
||||
});
|
||||
|
||||
const createStatCardBg = (color) => ({
|
||||
position: 'absolute',
|
||||
top: '0',
|
||||
right: '0',
|
||||
width: '60px',
|
||||
height: '60px',
|
||||
background: `linear-gradient(135deg, ${color} 0%, ${color}99 100%)`,
|
||||
borderRadius: '50%',
|
||||
opacity: '0.1'
|
||||
});
|
||||
|
||||
function Dashboard() {
|
||||
const [stats, setStats] = useState({
|
||||
totalDevices: 0,
|
||||
totalRacks: 0,
|
||||
totalRooms: 0,
|
||||
faultDevices: 0,
|
||||
deviceGrowth: 2.5, // 示例增长数据
|
||||
faultTrend: -12.3 // 示例趋势数据
|
||||
});
|
||||
totalDevices: 0,
|
||||
totalRacks: 0,
|
||||
totalRooms: 0,
|
||||
faultDevices: 0,
|
||||
deviceGrowth: 2.5,
|
||||
faultTrend: -12.3
|
||||
});
|
||||
const [loading, setLoading] = useState(true);
|
||||
|
||||
useEffect(() => {
|
||||
// 获取统计数据
|
||||
const fetchStats = async () => {
|
||||
try {
|
||||
setLoading(true);
|
||||
|
||||
// 获取所有设备
|
||||
const devicesRes = await axios.get('/api/devices');
|
||||
// 设备API返回的是包含total和devices数组的对象
|
||||
const totalDevices = devicesRes.data.total;
|
||||
// 获取所有设备以统计故障设备数量
|
||||
const allDevicesRes = await axios.get('/api/devices', { params: { pageSize: totalDevices } });
|
||||
const allDevices = allDevicesRes.data.devices || allDevicesRes.data;
|
||||
const faultDevices = allDevices.filter(device => device.status === 'fault').length;
|
||||
|
||||
// 获取所有机柜
|
||||
const racksRes = await axios.get('/api/racks');
|
||||
// 机柜API返回的是包含total和racks数组的对象
|
||||
const totalRacks = racksRes.data.total;
|
||||
const racks = racksRes.data.racks || [];
|
||||
|
||||
// 获取所有机房
|
||||
const roomsRes = await axios.get('/api/rooms');
|
||||
const rooms = roomsRes.data;
|
||||
const totalRooms = rooms.length;
|
||||
|
||||
setStats({
|
||||
totalDevices,
|
||||
totalRacks,
|
||||
totalRooms,
|
||||
faultDevices,
|
||||
// 保留或更新趋势数据
|
||||
deviceGrowth: stats.deviceGrowth || 0,
|
||||
faultTrend: stats.faultTrend || 0
|
||||
});
|
||||
} catch (error) {
|
||||
message.error('获取统计数据失败');
|
||||
console.error('获取统计数据失败:', error);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
const fetchStats = useCallback(async () => {
|
||||
try {
|
||||
setLoading(true);
|
||||
|
||||
const [devicesRes, racksRes, roomsRes] = await Promise.all([
|
||||
axios.get('/api/devices', { params: { pageSize: 1 } }),
|
||||
axios.get('/api/racks', { params: { pageSize: 1 } }),
|
||||
axios.get('/api/rooms')
|
||||
]);
|
||||
|
||||
const totalDevices = devicesRes.data.total || 0;
|
||||
const totalRacks = racksRes.data.total || 0;
|
||||
const rooms = roomsRes.data || [];
|
||||
const totalRooms = rooms.length;
|
||||
|
||||
let faultDevices = 0;
|
||||
if (totalDevices > 0) {
|
||||
try {
|
||||
const faultRes = await axios.get('/api/devices/count', {
|
||||
params: { status: 'fault' }
|
||||
});
|
||||
faultDevices = faultRes.data.count || 0;
|
||||
} catch {
|
||||
faultDevices = 0;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
fetchStats();
|
||||
|
||||
setStats({
|
||||
totalDevices,
|
||||
totalRacks,
|
||||
totalRooms,
|
||||
faultDevices,
|
||||
deviceGrowth: 2.5,
|
||||
faultTrend: -12.3
|
||||
});
|
||||
} catch (error) {
|
||||
message.error('获取统计数据失败');
|
||||
console.error('获取统计数据失败:', error);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}, []);
|
||||
|
||||
// 科技感配色主题
|
||||
const theme = {
|
||||
primary: '#1890ff', // 科技蓝
|
||||
primaryDark: '#096dd9', // 深蓝
|
||||
secondary: '#722ed1', // 紫色
|
||||
success: '#52c41a', // 绿色
|
||||
warning: '#faad14', // 橙色
|
||||
error: '#ff4d4f', // 红色
|
||||
background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
|
||||
cardBg: 'rgba(255, 255, 255, 0.95)',
|
||||
textPrimary: '#262626',
|
||||
textSecondary: '#8c8c8c'
|
||||
};
|
||||
useEffect(() => {
|
||||
fetchStats();
|
||||
}, [fetchStats]);
|
||||
|
||||
const containerStyle = {
|
||||
minHeight: '100vh',
|
||||
background: 'linear-gradient(135deg, #e3f2fd 0%, #f3e5f5 100%)',
|
||||
padding: '24px'
|
||||
};
|
||||
const handleNavHover = useCallback((e, isEnter) => {
|
||||
if (isEnter) {
|
||||
e.currentTarget.style.borderColor = theme.primary;
|
||||
e.currentTarget.style.background = 'rgba(24, 144, 255, 0.1)';
|
||||
e.currentTarget.style.transform = 'translateY(-2px)';
|
||||
} else {
|
||||
e.currentTarget.style.borderColor = 'rgba(24, 144, 255, 0.1)';
|
||||
e.currentTarget.style.background = 'rgba(24, 144, 255, 0.02)';
|
||||
e.currentTarget.style.transform = 'translateY(0)';
|
||||
}
|
||||
}, []);
|
||||
|
||||
const headerStyle = {
|
||||
textAlign: 'center',
|
||||
marginBottom: '32px'
|
||||
};
|
||||
const handleRefresh = useCallback(() => {
|
||||
fetchStats();
|
||||
}, [fetchStats]);
|
||||
|
||||
const titleStyle = {
|
||||
fontSize: '2.5rem',
|
||||
fontWeight: '700',
|
||||
background: theme.background,
|
||||
WebkitBackgroundClip: 'text',
|
||||
WebkitTextFillColor: 'transparent',
|
||||
margin: '0 0 8px 0'
|
||||
};
|
||||
const statCards = useMemo(() => [
|
||||
{
|
||||
key: 'devices',
|
||||
xs: 24, sm: 12, lg: 6,
|
||||
icon: CloudServerOutlined,
|
||||
color: '#1890ff',
|
||||
statKey: 'totalDevices',
|
||||
title: '总设备数',
|
||||
trend: stats.deviceGrowth,
|
||||
tagColor: 'blue'
|
||||
},
|
||||
{
|
||||
key: 'racks',
|
||||
xs: 24, sm: 12, lg: 6,
|
||||
icon: DatabaseOutlined,
|
||||
color: '#722ed1',
|
||||
statKey: 'totalRacks',
|
||||
title: '总机柜数',
|
||||
trend: 0,
|
||||
tagColor: 'green',
|
||||
customStatus: true
|
||||
},
|
||||
{
|
||||
key: 'rooms',
|
||||
xs: 24, sm: 12, lg: 6,
|
||||
icon: HomeOutlined,
|
||||
color: '#52c41a',
|
||||
statKey: 'totalRooms',
|
||||
title: '总机房数',
|
||||
trend: 0,
|
||||
tagColor: 'green',
|
||||
customStatus: true
|
||||
},
|
||||
{
|
||||
key: 'faults',
|
||||
xs: 24, sm: 12, lg: 6,
|
||||
icon: WarningOutlined,
|
||||
color: '#ff4d4f',
|
||||
statKey: 'faultDevices',
|
||||
title: '故障设备',
|
||||
trend: stats.faultTrend,
|
||||
tagColor: 'red'
|
||||
}
|
||||
], [stats.deviceGrowth, stats.faultTrend]);
|
||||
|
||||
const subtitleStyle = {
|
||||
fontSize: '1.1rem',
|
||||
color: theme.textSecondary,
|
||||
margin: '0'
|
||||
};
|
||||
const renderStatCard = useCallback((config) => {
|
||||
const { icon: Icon, color, statKey, title, trend, tagColor, customStatus, xs, sm, lg } = config;
|
||||
const colProps = { xs, sm, lg };
|
||||
|
||||
return (
|
||||
<Col key={statKey} {...colProps}>
|
||||
<Card style={statCardStyle}>
|
||||
<div style={{ position: 'relative' }}>
|
||||
<div style={createStatCardBg(color)} />
|
||||
<Statistic
|
||||
title={
|
||||
<span style={{ fontSize: '0.95rem', fontWeight: '600', color: theme.textSecondary }}>
|
||||
{title}
|
||||
</span>
|
||||
}
|
||||
value={stats[statKey]}
|
||||
prefix={<Icon style={{ color, fontSize: '1.2rem' }} />}
|
||||
valueStyle={{
|
||||
fontSize: '2rem',
|
||||
fontWeight: '700',
|
||||
color: theme.textPrimary,
|
||||
marginBottom: '8px'
|
||||
}}
|
||||
loading={loading}
|
||||
/>
|
||||
{customStatus ? (
|
||||
statKey === 'totalRacks' ? (
|
||||
<div style={{ display: 'flex', alignItems: 'center', fontSize: '0.875rem', color: theme.success }}>
|
||||
<PoweroffOutlined style={{ marginRight: '4px' }} />
|
||||
<span>正常运行</span>
|
||||
</div>
|
||||
) : (
|
||||
<div style={{ display: 'flex', alignItems: 'center', fontSize: '0.875rem', color: theme.success }}>
|
||||
<span style={{ width: '8px', height: '8px', background: theme.success, borderRadius: '50%', marginRight: '8px' }} />
|
||||
<span>全部在线</span>
|
||||
</div>
|
||||
)
|
||||
) : (
|
||||
<div style={createTrendStyle(trend)}>
|
||||
{trend > 0 ? <ArrowUpOutlined /> : <ArrowDownOutlined />}
|
||||
<span style={{ marginLeft: '4px' }}>{Math.abs(trend)}%</span>
|
||||
<Tag color={tagColor} style={{ marginLeft: '8px', fontSize: '0.75rem' }}>本月</Tag>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</Card>
|
||||
</Col>
|
||||
);
|
||||
}, [stats, loading]);
|
||||
|
||||
const statCardStyle = {
|
||||
borderRadius: '16px',
|
||||
border: 'none',
|
||||
boxShadow: '0 4px 16px rgba(24, 144, 255, 0.1)',
|
||||
background: theme.cardBg,
|
||||
backdropFilter: 'blur(10px)',
|
||||
transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)',
|
||||
position: 'relative',
|
||||
overflow: 'hidden',
|
||||
cursor: 'pointer'
|
||||
};
|
||||
const navButtons = useMemo(() => navButtonsData.map(({ key, icon: Icon, text }) => (
|
||||
<Button
|
||||
key={key}
|
||||
type="text"
|
||||
style={navButtonStyle}
|
||||
onMouseEnter={(e) => handleNavHover(e, true)}
|
||||
onMouseLeave={(e) => handleNavHover(e, false)}
|
||||
>
|
||||
<Icon style={navIconStyle} />
|
||||
<span style={navTextStyle}>{text}</span>
|
||||
</Button>
|
||||
)), [handleNavHover]);
|
||||
|
||||
const statCardHoverStyle = {
|
||||
transform: 'translateY(-4px)',
|
||||
boxShadow: '0 8px 32px rgba(24, 144, 255, 0.2)'
|
||||
};
|
||||
|
||||
const trendStyle = (trend) => ({
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
fontSize: '0.875rem',
|
||||
fontWeight: '500',
|
||||
color: trend > 0 ? theme.success : theme.error,
|
||||
marginTop: '8px'
|
||||
});
|
||||
|
||||
const systemOverviewStyle = {
|
||||
marginTop: '32px'
|
||||
};
|
||||
|
||||
const overviewCardStyle = {
|
||||
borderRadius: '20px',
|
||||
border: 'none',
|
||||
boxShadow: '0 8px 32px rgba(24, 144, 255, 0.15)',
|
||||
background: theme.cardBg,
|
||||
backdropFilter: 'blur(10px)'
|
||||
};
|
||||
|
||||
const welcomeSectionStyle = {
|
||||
background: theme.background,
|
||||
borderRadius: '12px',
|
||||
padding: '20px',
|
||||
textAlign: 'center',
|
||||
color: 'white',
|
||||
marginBottom: '24px'
|
||||
};
|
||||
|
||||
const navigationGridStyle = {
|
||||
display: 'grid',
|
||||
gridTemplateColumns: 'repeat(auto-fit, minmax(160px, 1fr))',
|
||||
gap: '16px',
|
||||
marginBottom: '24px'
|
||||
};
|
||||
|
||||
const navButtonStyle = {
|
||||
height: 'auto',
|
||||
padding: '20px 16px',
|
||||
borderRadius: '12px',
|
||||
border: '2px solid rgba(24, 144, 255, 0.1)',
|
||||
background: 'rgba(24, 144, 255, 0.02)',
|
||||
transition: 'all 0.3s ease',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
alignItems: 'center',
|
||||
gap: '8px'
|
||||
};
|
||||
|
||||
const navButtonHoverStyle = {
|
||||
borderColor: theme.primary,
|
||||
background: 'rgba(24, 144, 255, 0.1)',
|
||||
transform: 'translateY(-2px)'
|
||||
};
|
||||
|
||||
const navIconStyle = {
|
||||
fontSize: '2rem',
|
||||
color: theme.primary
|
||||
};
|
||||
|
||||
const navTextStyle = {
|
||||
fontSize: '0.95rem',
|
||||
fontWeight: '600',
|
||||
color: theme.textPrimary
|
||||
};
|
||||
|
||||
const systemInfoStyle = {
|
||||
background: 'linear-gradient(135deg, #e8f4fd 0%, #f0f9ff 100%)',
|
||||
borderRadius: '12px',
|
||||
padding: '16px',
|
||||
border: '1px solid rgba(24, 144, 255, 0.1)'
|
||||
};
|
||||
const systemInfo = useMemo(() => (
|
||||
<div style={systemInfoStyle}>
|
||||
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
|
||||
<div>
|
||||
<p style={{ margin: '0', fontSize: '0.95rem', color: theme.textPrimary, fontWeight: '500' }}>
|
||||
<strong>系统版本：</strong> v1.0.0
|
||||
</p>
|
||||
<p style={{ margin: '4px 0 0 0', fontSize: '0.85rem', color: theme.textSecondary }}>
|
||||
<strong>最后更新：</strong>{new Date().toLocaleDateString()}
|
||||
</p>
|
||||
</div>
|
||||
<Button
|
||||
type="primary"
|
||||
icon={<ReloadOutlined />}
|
||||
size="small"
|
||||
onClick={handleRefresh}
|
||||
style={{ background: theme.primary, borderColor: theme.primary }}
|
||||
>
|
||||
刷新数据
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
), [handleRefresh]);
|
||||
|
||||
return (
|
||||
<div style={containerStyle}>
|
||||
{/* 页面头部 */}
|
||||
<div style={headerStyle}>
|
||||
<h1 style={titleStyle}>
|
||||
<DashboardOutlined style={{ marginRight: '12px' }} />
|
||||
@@ -214,164 +367,13 @@ function Dashboard() {
|
||||
<p style={subtitleStyle}>实时监控 • 智能管理 • 高效运维</p>
|
||||
</div>
|
||||
|
||||
{/* 数据概览卡片 */}
|
||||
<Row gutter={[24, 24]} style={{ marginBottom: '32px' }}>
|
||||
<Col xs={24} sm={12} lg={6}>
|
||||
<Card style={statCardStyle}>
|
||||
<div style={{ position: 'relative' }}>
|
||||
<div style={{
|
||||
position: 'absolute',
|
||||
top: '0',
|
||||
right: '0',
|
||||
width: '60px',
|
||||
height: '60px',
|
||||
background: 'linear-gradient(135deg, #1890ff 0%, #096dd9 100%)',
|
||||
borderRadius: '50%',
|
||||
opacity: '0.1'
|
||||
}} />
|
||||
<Statistic
|
||||
title={
|
||||
<span style={{ fontSize: '0.95rem', fontWeight: '600', color: theme.textSecondary }}>
|
||||
总设备数
|
||||
</span>
|
||||
}
|
||||
value={stats.totalDevices}
|
||||
prefix={<CloudServerOutlined style={{ color: theme.primary, fontSize: '1.2rem' }} />}
|
||||
valueStyle={{
|
||||
fontSize: '2rem',
|
||||
fontWeight: '700',
|
||||
color: theme.textPrimary,
|
||||
marginBottom: '8px'
|
||||
}}
|
||||
loading={loading}
|
||||
/>
|
||||
<div style={trendStyle(stats.deviceGrowth)}>
|
||||
{stats.deviceGrowth > 0 ? <ArrowUpOutlined /> : <ArrowDownOutlined />}
|
||||
<span style={{ marginLeft: '4px' }}>{Math.abs(stats.deviceGrowth)}%</span>
|
||||
<Tag color="blue" style={{ marginLeft: '8px', fontSize: '0.75rem' }}>本月</Tag>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
</Col>
|
||||
|
||||
<Col xs={24} sm={12} lg={6}>
|
||||
<Card style={statCardStyle}>
|
||||
<div style={{ position: 'relative' }}>
|
||||
<div style={{
|
||||
position: 'absolute',
|
||||
top: '0',
|
||||
right: '0',
|
||||
width: '60px',
|
||||
height: '60px',
|
||||
background: 'linear-gradient(135deg, #722ed1 0%, #531dab 100%)',
|
||||
borderRadius: '50%',
|
||||
opacity: '0.1'
|
||||
}} />
|
||||
<Statistic
|
||||
title={
|
||||
<span style={{ fontSize: '0.95rem', fontWeight: '600', color: theme.textSecondary }}>
|
||||
总机柜数
|
||||
</span>
|
||||
}
|
||||
value={stats.totalRacks}
|
||||
prefix={<DatabaseOutlined style={{ color: theme.secondary, fontSize: '1.2rem' }} />}
|
||||
valueStyle={{
|
||||
fontSize: '2rem',
|
||||
fontWeight: '700',
|
||||
color: theme.textPrimary,
|
||||
marginBottom: '8px'
|
||||
}}
|
||||
loading={loading}
|
||||
/>
|
||||
<div style={{ display: 'flex', alignItems: 'center', fontSize: '0.875rem', color: theme.success }}>
|
||||
<PoweroffOutlined style={{ marginRight: '4px' }} />
|
||||
<span>正常运行</span>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
</Col>
|
||||
|
||||
<Col xs={24} sm={12} lg={6}>
|
||||
<Card style={statCardStyle}>
|
||||
<div style={{ position: 'relative' }}>
|
||||
<div style={{
|
||||
position: 'absolute',
|
||||
top: '0',
|
||||
right: '0',
|
||||
width: '60px',
|
||||
height: '60px',
|
||||
background: 'linear-gradient(135deg, #52c41a 0%, #389e0d 100%)',
|
||||
borderRadius: '50%',
|
||||
opacity: '0.1'
|
||||
}} />
|
||||
<Statistic
|
||||
title={
|
||||
<span style={{ fontSize: '0.95rem', fontWeight: '600', color: theme.textSecondary }}>
|
||||
总机房数
|
||||
</span>
|
||||
}
|
||||
value={stats.totalRooms}
|
||||
prefix={<HomeOutlined style={{ color: theme.success, fontSize: '1.2rem' }} />}
|
||||
valueStyle={{
|
||||
fontSize: '2rem',
|
||||
fontWeight: '700',
|
||||
color: theme.textPrimary,
|
||||
marginBottom: '8px'
|
||||
}}
|
||||
loading={loading}
|
||||
/>
|
||||
<div style={{ display: 'flex', alignItems: 'center', fontSize: '0.875rem', color: theme.success }}>
|
||||
<span style={{ width: '8px', height: '8px', background: theme.success, borderRadius: '50%', marginRight: '8px' }} />
|
||||
<span>全部在线</span>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
</Col>
|
||||
|
||||
<Col xs={24} sm={12} lg={6}>
|
||||
<Card style={{ ...statCardStyle, borderLeft: `4px solid ${theme.error}` }}>
|
||||
<div style={{ position: 'relative' }}>
|
||||
<div style={{
|
||||
position: 'absolute',
|
||||
top: '0',
|
||||
right: '0',
|
||||
width: '60px',
|
||||
height: '60px',
|
||||
background: 'linear-gradient(135deg, #ff4d4f 0%, #d73027 100%)',
|
||||
borderRadius: '50%',
|
||||
opacity: '0.1'
|
||||
}} />
|
||||
<Statistic
|
||||
title={
|
||||
<span style={{ fontSize: '0.95rem', fontWeight: '600', color: theme.textSecondary }}>
|
||||
故障设备
|
||||
</span>
|
||||
}
|
||||
value={stats.faultDevices}
|
||||
prefix={<WarningOutlined style={{ color: theme.error, fontSize: '1.2rem' }} />}
|
||||
valueStyle={{
|
||||
fontSize: '2rem',
|
||||
fontWeight: '700',
|
||||
color: theme.error,
|
||||
marginBottom: '8px'
|
||||
}}
|
||||
loading={loading}
|
||||
/>
|
||||
<div style={trendStyle(stats.faultTrend)}>
|
||||
{stats.faultTrend < 0 ? <ArrowDownOutlined /> : <ArrowUpOutlined />}
|
||||
<span style={{ marginLeft: '4px' }}>{Math.abs(stats.faultTrend)}%</span>
|
||||
<Tag color="red" style={{ marginLeft: '8px', fontSize: '0.75rem' }}>本周</Tag>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
</Col>
|
||||
{statCards.map(renderStatCard)}
|
||||
</Row>
|
||||
|
||||
{/* 系统概览 */}
|
||||
<div style={systemOverviewStyle}>
|
||||
<Card style={overviewCardStyle}>
|
||||
<div style={{ padding: '24px' }}>
|
||||
{/* 欢迎区域 */}
|
||||
<div style={welcomeSectionStyle}>
|
||||
<h2 style={{
|
||||
fontSize: '1.5rem',
|
||||
@@ -391,102 +393,11 @@ function Dashboard() {
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* 导航功能网格 */}
|
||||
<div style={navigationGridStyle}>
|
||||
<Button
|
||||
type="text"
|
||||
style={navButtonStyle}
|
||||
onMouseEnter={(e) => {
|
||||
e.currentTarget.style.borderColor = theme.primary;
|
||||
e.currentTarget.style.background = 'rgba(24, 144, 255, 0.1)';
|
||||
e.currentTarget.style.transform = 'translateY(-2px)';
|
||||
}}
|
||||
onMouseLeave={(e) => {
|
||||
e.currentTarget.style.borderColor = 'rgba(24, 144, 255, 0.1)';
|
||||
e.currentTarget.style.background = 'rgba(24, 144, 255, 0.02)';
|
||||
e.currentTarget.style.transform = 'translateY(0)';
|
||||
}}
|
||||
>
|
||||
<CloudServerOutlined style={navIconStyle} />
|
||||
<span style={navTextStyle}>设备管理</span>
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
type="text"
|
||||
style={navButtonStyle}
|
||||
onMouseEnter={(e) => {
|
||||
e.currentTarget.style.borderColor = theme.primary;
|
||||
e.currentTarget.style.background = 'rgba(24, 144, 255, 0.1)';
|
||||
e.currentTarget.style.transform = 'translateY(-2px)';
|
||||
}}
|
||||
onMouseLeave={(e) => {
|
||||
e.currentTarget.style.borderColor = 'rgba(24, 144, 255, 0.1)';
|
||||
e.currentTarget.style.background = 'rgba(24, 144, 255, 0.02)';
|
||||
e.currentTarget.style.transform = 'translateY(0)';
|
||||
}}
|
||||
>
|
||||
<DatabaseOutlined style={navIconStyle} />
|
||||
<span style={navTextStyle}>资源规划</span>
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
type="text"
|
||||
style={navButtonStyle}
|
||||
onMouseEnter={(e) => {
|
||||
e.currentTarget.style.borderColor = theme.primary;
|
||||
e.currentTarget.style.background = 'rgba(24, 144, 255, 0.1)';
|
||||
e.currentTarget.style.transform = 'translateY(-2px)';
|
||||
}}
|
||||
onMouseLeave={(e) => {
|
||||
e.currentTarget.style.borderColor = 'rgba(24, 144, 255, 0.1)';
|
||||
e.currentTarget.style.background = 'rgba(24, 144, 255, 0.02)';
|
||||
e.currentTarget.style.transform = 'translateY(0)';
|
||||
}}
|
||||
>
|
||||
<WarningOutlined style={navIconStyle} />
|
||||
<span style={navTextStyle}>故障监控</span>
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
type="text"
|
||||
style={navButtonStyle}
|
||||
onMouseEnter={(e) => {
|
||||
e.currentTarget.style.borderColor = theme.primary;
|
||||
e.currentTarget.style.background = 'rgba(24, 144, 255, 0.1)';
|
||||
e.currentTarget.style.transform = 'translateY(-2px)';
|
||||
}}
|
||||
onMouseLeave={(e) => {
|
||||
e.currentTarget.style.borderColor = 'rgba(24, 144, 255, 0.1)';
|
||||
e.currentTarget.style.background = 'rgba(24, 144, 255, 0.02)';
|
||||
e.currentTarget.style.transform = 'translateY(0)';
|
||||
}}
|
||||
>
|
||||
<SettingOutlined style={navIconStyle} />
|
||||
<span style={navTextStyle}>系统配置</span>
|
||||
</Button>
|
||||
{navButtons}
|
||||
</div>
|
||||
|
||||
{/* 系统信息 */}
|
||||
<div style={systemInfoStyle}>
|
||||
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
|
||||
<div>
|
||||
<p style={{ margin: '0', fontSize: '0.95rem', color: theme.textPrimary, fontWeight: '500' }}>
|
||||
<strong>系统版本：</strong> v1.0.0
|
||||
</p>
|
||||
<p style={{ margin: '4px 0 0 0', fontSize: '0.85rem', color: theme.textSecondary }}>
|
||||
最后更新：{new Date().toLocaleDateString()}
|
||||
</p>
|
||||
</div>
|
||||
<Button
|
||||
type="primary"
|
||||
icon={<ReloadOutlined />}
|
||||
size="small"
|
||||
style={{ background: theme.primary, borderColor: theme.primary }}
|
||||
>
|
||||
刷新数据
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
{systemInfo}
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
@@ -494,4 +405,4 @@ function Dashboard() {
|
||||
);
|
||||
}
|
||||
|
||||
export default Dashboard;
|
||||
export default React.memo(Dashboard);
|
||||
|
||||
Reference in New Issue
Block a user