侧边栏添加收起展开按钮,修复修复增长趋势显示NaN的问题
This commit is contained in:
+42
-5
@@ -1,7 +1,7 @@
|
|||||||
import React from 'react';
|
import React, { useState } from 'react';
|
||||||
import { Layout, Menu, theme } from 'antd';
|
import { Layout, Menu, theme, Button } from 'antd';
|
||||||
import { BrowserRouter as Router, Routes, Route, Link } from 'react-router-dom';
|
import { BrowserRouter as Router, Routes, Route, Link } from 'react-router-dom';
|
||||||
import { BarChartOutlined, DatabaseOutlined, CloudServerOutlined } from '@ant-design/icons';
|
import { BarChartOutlined, DatabaseOutlined, CloudServerOutlined, MenuUnfoldOutlined, MenuFoldOutlined } from '@ant-design/icons';
|
||||||
import Dashboard from './pages/Dashboard';
|
import Dashboard from './pages/Dashboard';
|
||||||
import DeviceManagement from './pages/DeviceManagement';
|
import DeviceManagement from './pages/DeviceManagement';
|
||||||
import RackManagement from './pages/RackManagement';
|
import RackManagement from './pages/RackManagement';
|
||||||
@@ -12,6 +12,7 @@ import DeviceFieldManagement from './pages/DeviceFieldManagement';
|
|||||||
const { Content, Sider } = Layout;
|
const { Content, Sider } = Layout;
|
||||||
|
|
||||||
function App() {
|
function App() {
|
||||||
|
const [collapsed, setCollapsed] = useState(false);
|
||||||
const {
|
const {
|
||||||
token: { colorBgContainer, borderRadiusLG },
|
token: { colorBgContainer, borderRadiusLG },
|
||||||
} = theme.useToken();
|
} = theme.useToken();
|
||||||
@@ -19,11 +20,47 @@ function App() {
|
|||||||
return (
|
return (
|
||||||
<Router>
|
<Router>
|
||||||
<Layout>
|
<Layout>
|
||||||
<Sider width={200} style={{ backgroundColor: colorBgContainer }}>
|
<Sider
|
||||||
|
width={200}
|
||||||
|
collapsedWidth={80}
|
||||||
|
collapsed={collapsed}
|
||||||
|
style={{
|
||||||
|
backgroundColor: colorBgContainer,
|
||||||
|
boxShadow: '2px 0 8px rgba(0,0,0,0.08)'
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{/* 自定义收起/展开按钮 */}
|
||||||
|
<div style={{
|
||||||
|
display: 'flex',
|
||||||
|
justifyContent: 'center',
|
||||||
|
alignItems: 'center',
|
||||||
|
height: 64,
|
||||||
|
borderBottom: '1px solid #f0f0f0',
|
||||||
|
marginBottom: 16
|
||||||
|
}}>
|
||||||
|
<Button
|
||||||
|
type="text"
|
||||||
|
icon={collapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
|
||||||
|
onClick={() => setCollapsed(!collapsed)}
|
||||||
|
style={{
|
||||||
|
fontSize: 18,
|
||||||
|
padding: '8px',
|
||||||
|
borderRadius: 4,
|
||||||
|
transition: 'all 0.3s',
|
||||||
|
'&:hover': {
|
||||||
|
backgroundColor: '#e6f7ff'
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
<Menu
|
<Menu
|
||||||
mode="inline"
|
mode="inline"
|
||||||
defaultSelectedKeys={['1']}
|
defaultSelectedKeys={['1']}
|
||||||
style={{ height: '100%', borderRight: 0 }}
|
style={{
|
||||||
|
height: 'calc(100% - 80px)',
|
||||||
|
borderRight: 0,
|
||||||
|
backgroundColor: 'transparent'
|
||||||
|
}}
|
||||||
items={[
|
items={[
|
||||||
{
|
{
|
||||||
key: '1',
|
key: '1',
|
||||||
|
|||||||
@@ -55,7 +55,10 @@ function Dashboard() {
|
|||||||
totalDevices,
|
totalDevices,
|
||||||
totalRacks,
|
totalRacks,
|
||||||
totalRooms,
|
totalRooms,
|
||||||
faultDevices
|
faultDevices,
|
||||||
|
// 保留或更新趋势数据
|
||||||
|
deviceGrowth: stats.deviceGrowth || 0,
|
||||||
|
faultTrend: stats.faultTrend || 0
|
||||||
});
|
});
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
message.error('获取统计数据失败');
|
message.error('获取统计数据失败');
|
||||||
|
|||||||
Reference in New Issue
Block a user