更新了仪表盘的页面，优化了设备管理的界面，字段框可以拖拉
This commit is contained in:
zhang1106
+20
-32
@@ -9,7 +9,7 @@ import RoomManagement from './pages/RoomManagement';
|
||||
import DeviceFieldManagement from './pages/DeviceFieldManagement';
|
||||
|
||||
|
||||
const { Header, Content, Sider } = Layout;
|
||||
const { Content, Sider } = Layout;
|
||||
|
||||
function App() {
|
||||
const {
|
||||
@@ -19,18 +19,7 @@ function App() {
|
||||
return (
|
||||
<Router>
|
||||
<Layout>
|
||||
<Header className="header" style={{
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
backgroundColor: '#001529',
|
||||
color: '#fff',
|
||||
fontSize: '20px',
|
||||
fontWeight: 'bold'
|
||||
}}>
|
||||
IDC设备管理系统
|
||||
</Header>
|
||||
<Layout>
|
||||
<Sider width={200} style={{ backgroundColor: colorBgContainer }}>
|
||||
<Sider width={200} style={{ backgroundColor: colorBgContainer }}>
|
||||
<Menu
|
||||
mode="inline"
|
||||
defaultSelectedKeys={['1']}
|
||||
@@ -64,25 +53,24 @@ function App() {
|
||||
]}
|
||||
/>
|
||||
</Sider>
|
||||
<Layout style={{ padding: '0 24px 24px' }}>
|
||||
<Content
|
||||
style={{
|
||||
padding: 24,
|
||||
margin: 0,
|
||||
minHeight: 280,
|
||||
background: colorBgContainer,
|
||||
borderRadius: borderRadiusLG,
|
||||
}}
|
||||
>
|
||||
<Routes>
|
||||
<Route path="/" element={<Dashboard />} />
|
||||
<Route path="/devices" element={<DeviceManagement />} />
|
||||
<Route path="/racks" element={<RackManagement />} />
|
||||
<Route path="/rooms" element={<RoomManagement />} />
|
||||
<Route path="/fields" element={<DeviceFieldManagement />} />
|
||||
</Routes>
|
||||
</Content>
|
||||
</Layout>
|
||||
<Layout style={{ padding: '0 24px 24px' }}>
|
||||
<Content
|
||||
style={{
|
||||
padding: 24,
|
||||
margin: 0,
|
||||
minHeight: 280,
|
||||
background: colorBgContainer,
|
||||
borderRadius: borderRadiusLG,
|
||||
}}
|
||||
>
|
||||
<Routes>
|
||||
<Route path="/" element={<Dashboard />} />
|
||||
<Route path="/devices" element={<DeviceManagement />} />
|
||||
<Route path="/racks" element={<RackManagement />} />
|
||||
<Route path="/rooms" element={<RoomManagement />} />
|
||||
<Route path="/fields" element={<DeviceFieldManagement />} />
|
||||
</Routes>
|
||||
</Content>
|
||||
</Layout>
|
||||
</Layout>
|
||||
</Router>
|
||||
|
||||
@@ -1,6 +1,18 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { Card, Row, Col, Statistic, Spin, message } from 'antd';
|
||||
import { DatabaseOutlined, CloudServerOutlined, WarningOutlined, PoweroffOutlined } from '@ant-design/icons';
|
||||
import { Card, Row, Col, Statistic, Spin, message, Button, Tag } from 'antd';
|
||||
import {
|
||||
DatabaseOutlined,
|
||||
CloudServerOutlined,
|
||||
WarningOutlined,
|
||||
PoweroffOutlined,
|
||||
HomeOutlined,
|
||||
MonitorOutlined,
|
||||
SettingOutlined,
|
||||
ArrowUpOutlined,
|
||||
ArrowDownOutlined,
|
||||
DashboardOutlined,
|
||||
ReloadOutlined
|
||||
} from '@ant-design/icons';
|
||||
import axios from 'axios';
|
||||
|
||||
function Dashboard() {
|
||||
@@ -8,7 +20,9 @@ function Dashboard() {
|
||||
totalDevices: 0,
|
||||
totalRacks: 0,
|
||||
totalRooms: 0,
|
||||
faultDevices: 0
|
||||
faultDevices: 0,
|
||||
deviceGrowth: 2.5, // 示例增长数据
|
||||
faultTrend: -12.3 // 示例趋势数据
|
||||
});
|
||||
const [loading, setLoading] = useState(true);
|
||||
|
||||
@@ -54,56 +68,424 @@ function Dashboard() {
|
||||
fetchStats();
|
||||
}, []);
|
||||
|
||||
// 科技感配色主题
|
||||
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 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)'
|
||||
};
|
||||
|
||||
return (
|
||||
<div>
|
||||
<h1>仪表盘</h1>
|
||||
<Row gutter={16} style={{ marginTop: 16 }}>
|
||||
<Col span={6}>
|
||||
<Card variant="outlined">
|
||||
<Statistic
|
||||
title="总设备数"
|
||||
value={stats.totalDevices}
|
||||
prefix={<CloudServerOutlined />}
|
||||
loading={loading}
|
||||
/>
|
||||
<div style={containerStyle}>
|
||||
{/* 页面头部 */}
|
||||
<div style={headerStyle}>
|
||||
<h1 style={titleStyle}>
|
||||
<DashboardOutlined style={{ marginRight: '12px' }} />
|
||||
IDC设备管理系统
|
||||
</h1>
|
||||
<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 span={6}>
|
||||
<Card variant="outlined">
|
||||
<Statistic
|
||||
title="总机柜数"
|
||||
value={stats.totalRacks}
|
||||
prefix={<DatabaseOutlined />}
|
||||
loading={loading}
|
||||
/>
|
||||
|
||||
<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 span={6}>
|
||||
<Card variant="outlined">
|
||||
<Statistic
|
||||
title="总机房数"
|
||||
value={stats.totalRooms}
|
||||
prefix={<DatabaseOutlined />}
|
||||
loading={loading}
|
||||
/>
|
||||
|
||||
<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 span={6}>
|
||||
<Card variant="outlined">
|
||||
<Statistic
|
||||
title="故障设备"
|
||||
value={stats.faultDevices}
|
||||
prefix={<WarningOutlined />}
|
||||
valueStyle={{ color: '#cf1322' }}
|
||||
loading={loading}
|
||||
/>
|
||||
|
||||
<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>
|
||||
</Row>
|
||||
<Card title="系统概览" style={{ marginTop: 16 }}>
|
||||
<p>欢迎使用IDC设备管理系统！</p>
|
||||
<p>本系统用于管理IDC机房中的设备、机柜和机房信息，提供设备状态监控、资源分配等功能。</p>
|
||||
</Card>
|
||||
|
||||
{/* 系统概览 */}
|
||||
<div style={systemOverviewStyle}>
|
||||
<Card style={overviewCardStyle}>
|
||||
<div style={{ padding: '24px' }}>
|
||||
{/* 欢迎区域 */}
|
||||
<div style={welcomeSectionStyle}>
|
||||
<h2 style={{
|
||||
fontSize: '1.5rem',
|
||||
fontWeight: '600',
|
||||
margin: '0 0 8px 0',
|
||||
color: 'white'
|
||||
}}>
|
||||
欢迎使用IDC设备管理系统
|
||||
</h2>
|
||||
<p style={{
|
||||
fontSize: '1rem',
|
||||
margin: '0',
|
||||
opacity: '0.9',
|
||||
color: 'white'
|
||||
}}>
|
||||
专业的机房设备管理解决方案
|
||||
</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>
|
||||
</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>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,12 +1,72 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { Table, Button, Modal, Form, Input, Select, DatePicker, message, Card, Space, InputNumber, Switch, Upload, Progress, Checkbox } from 'antd';
|
||||
import { PlusOutlined, EditOutlined, DeleteOutlined, SearchOutlined, UploadOutlined, DownloadOutlined, SettingOutlined } from '@ant-design/icons';
|
||||
import { PlusOutlined, EditOutlined, DeleteOutlined, SearchOutlined, UploadOutlined, DownloadOutlined, SettingOutlined, UndoOutlined, CloudServerOutlined, SwapOutlined, SafetyOutlined, DatabaseOutlined, AppstoreOutlined } from '@ant-design/icons';
|
||||
import axios from 'axios';
|
||||
import dayjs from 'dayjs';
|
||||
|
||||
const { Option } = Select;
|
||||
const { RangePicker } = DatePicker;
|
||||
|
||||
// 可调整列宽的表头组件
|
||||
const ResizeableTitle = (props) => {
|
||||
const { onResize, width, ...restProps } = props;
|
||||
|
||||
if (!width) {
|
||||
return <th {...restProps} />;
|
||||
}
|
||||
|
||||
const handleMouseDown = (e) => {
|
||||
if (!onResize) return;
|
||||
|
||||
|
||||
const startX = e.pageX;
|
||||
const startWidth = width;
|
||||
|
||||
const handleMouseMove = (moveEvent) => {
|
||||
const diff = moveEvent.pageX - startX;
|
||||
const newWidth = Math.max(50, startWidth + diff); // 最小宽度50px
|
||||
onResize(newWidth);
|
||||
};
|
||||
|
||||
const handleMouseUp = () => {
|
||||
document.removeEventListener('mousemove', handleMouseMove);
|
||||
document.removeEventListener('mouseup', handleMouseUp);
|
||||
};
|
||||
|
||||
document.addEventListener('mousemove', handleMouseMove);
|
||||
document.addEventListener('mouseup', handleMouseUp);
|
||||
};
|
||||
|
||||
return (
|
||||
<th
|
||||
{...restProps}
|
||||
style={{
|
||||
position: 'relative',
|
||||
width: width,
|
||||
maxWidth: width,
|
||||
minWidth: width,
|
||||
...restProps.style,
|
||||
}}
|
||||
>
|
||||
{restProps.children}
|
||||
<div
|
||||
style={{
|
||||
position: 'absolute',
|
||||
right: '-3px',
|
||||
top: 0,
|
||||
bottom: 0,
|
||||
width: '6px',
|
||||
cursor: 'col-resize',
|
||||
backgroundColor: 'transparent',
|
||||
zIndex: 10,
|
||||
}}
|
||||
onMouseDown={handleMouseDown}
|
||||
title="拖拽调整列宽"
|
||||
/>
|
||||
</th>
|
||||
);
|
||||
};
|
||||
|
||||
function DeviceManagement() {
|
||||
const [devices, setDevices] = useState([]);
|
||||
const [racks, setRacks] = useState([]);
|
||||
@@ -38,13 +98,18 @@ function DeviceManagement() {
|
||||
const [isImporting, setIsImporting] = useState(false);
|
||||
const [importResult, setImportResult] = useState(null);
|
||||
const [selectedDevices, setSelectedDevices] = useState([]);
|
||||
const [selectAll, setSelectAll] = useState(false);
|
||||
const [detailModalVisible, setDetailModalVisible] = useState(false);
|
||||
const [selectedDevice, setSelectedDevice] = useState(null);
|
||||
|
||||
// 自定义字段状态
|
||||
const [customFieldName, setCustomFieldName] = useState('');
|
||||
const [customFieldValue, setCustomFieldValue] = useState('');
|
||||
|
||||
// 字段配置模态框
|
||||
const [fieldConfigModalVisible, setFieldConfigModalVisible] = useState(false);
|
||||
|
||||
// 列宽状态
|
||||
const [columnWidths, setColumnWidths] = useState({});
|
||||
|
||||
// 获取所有设备（支持搜索、筛选和分页）
|
||||
const fetchDevices = async (page = 1, pageSize = 10, searchParams = {}) => {
|
||||
@@ -341,6 +406,12 @@ function DeviceManagement() {
|
||||
});
|
||||
};
|
||||
|
||||
// 显示设备详情
|
||||
const handleShowDetail = (device) => {
|
||||
setSelectedDevice(device);
|
||||
setDetailModalVisible(true);
|
||||
};
|
||||
|
||||
// 导出设备数据
|
||||
const handleExport = async () => {
|
||||
try {
|
||||
@@ -369,26 +440,7 @@ function DeviceManagement() {
|
||||
}
|
||||
};
|
||||
|
||||
// 处理单个设备选择
|
||||
const handleDeviceSelect = (deviceId) => {
|
||||
setSelectedDevices(prev => {
|
||||
if (prev.includes(deviceId)) {
|
||||
return prev.filter(id => id !== deviceId);
|
||||
} else {
|
||||
return [...prev, deviceId];
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
// 处理全选/取消全选
|
||||
const handleSelectAll = (e) => {
|
||||
setSelectAll(e.target.checked);
|
||||
if (e.target.checked) {
|
||||
setSelectedDevices(devices.map(device => device.deviceId));
|
||||
} else {
|
||||
setSelectedDevices([]);
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
|
||||
@@ -464,6 +516,36 @@ function DeviceManagement() {
|
||||
other: '其他设备'
|
||||
};
|
||||
|
||||
// 获取设备类型图标
|
||||
const getDeviceTypeIcon = (type) => {
|
||||
const iconMap = {
|
||||
server: <CloudServerOutlined style={{ color: '#1890ff' }} />,
|
||||
switch: <SwapOutlined style={{ color: '#52c41a' }} />,
|
||||
router: <SafetyOutlined style={{ color: '#faad14' }} />,
|
||||
storage: <DatabaseOutlined style={{ color: '#722ed1' }} />,
|
||||
other: <AppstoreOutlined style={{ color: '#8c8c8c' }} />
|
||||
};
|
||||
return iconMap[type] || <AppstoreOutlined style={{ color: '#8c8c8c' }} />;
|
||||
};
|
||||
|
||||
// 处理列宽变化
|
||||
const handleColumnResize = (key, width) => {
|
||||
setColumnWidths(prev => ({ ...prev, [key]: width }));
|
||||
};
|
||||
|
||||
// 重置列宽到默认值
|
||||
const resetColumnWidths = () => {
|
||||
setColumnWidths({});
|
||||
message.success('列宽已重置为默认值');
|
||||
};
|
||||
|
||||
// 处理表头单元格拖拽
|
||||
const handleHeaderCellResize = (key) => (column) => ({
|
||||
width: column.width,
|
||||
onResize: (width) => handleColumnResize(key, width),
|
||||
});
|
||||
|
||||
|
||||
// 动态生成表格列配置
|
||||
const columns = React.useMemo(() => {
|
||||
const generatedColumns = [];
|
||||
@@ -480,12 +562,16 @@ function DeviceManagement() {
|
||||
title: '所在机房',
|
||||
dataIndex: ['Rack', 'Room', 'name'],
|
||||
key: 'roomName',
|
||||
width: columnWidths.roomName || 120,
|
||||
onHeaderCell: handleHeaderCellResize('roomName'),
|
||||
});
|
||||
// 添加机柜信息列
|
||||
generatedColumns.push({
|
||||
title: field.displayName,
|
||||
dataIndex: ['Rack', 'name'],
|
||||
key: field.fieldName,
|
||||
width: columnWidths[field.fieldName] || 120,
|
||||
onHeaderCell: handleHeaderCellResize(field.fieldName),
|
||||
});
|
||||
}
|
||||
// 特殊处理设备类型
|
||||
@@ -494,17 +580,15 @@ function DeviceManagement() {
|
||||
title: field.displayName,
|
||||
dataIndex: field.fieldName,
|
||||
key: field.fieldName,
|
||||
width: columnWidths[field.fieldName] || 100,
|
||||
onHeaderCell: handleHeaderCellResize(field.fieldName),
|
||||
render: (type) => {
|
||||
if (Array.isArray(type)) {
|
||||
return (
|
||||
<Space>
|
||||
{type.map(t => (
|
||||
<span key={t}>{typeMap[t]}</span>
|
||||
))}
|
||||
</Space>
|
||||
);
|
||||
}
|
||||
return typeMap[type];
|
||||
return (
|
||||
<Space>
|
||||
{getDeviceTypeIcon(type)}
|
||||
<span>{typeMap[type]}</span>
|
||||
</Space>
|
||||
);
|
||||
},
|
||||
});
|
||||
}
|
||||
@@ -514,6 +598,8 @@ function DeviceManagement() {
|
||||
title: field.displayName,
|
||||
dataIndex: field.fieldName,
|
||||
key: field.fieldName,
|
||||
width: columnWidths[field.fieldName] || 100,
|
||||
onHeaderCell: handleHeaderCellResize(field.fieldName),
|
||||
render: (status) => {
|
||||
if (Array.isArray(status)) {
|
||||
return (
|
||||
@@ -540,6 +626,8 @@ function DeviceManagement() {
|
||||
title: field.displayName,
|
||||
dataIndex: field.fieldName,
|
||||
key: field.fieldName,
|
||||
width: columnWidths[field.fieldName] || 120,
|
||||
onHeaderCell: handleHeaderCellResize(field.fieldName),
|
||||
render: (date) => {
|
||||
if (!date) return '';
|
||||
|
||||
@@ -565,11 +653,46 @@ function DeviceManagement() {
|
||||
}
|
||||
// 普通字段
|
||||
else {
|
||||
generatedColumns.push({
|
||||
// 为不同类型的字段设置不同的默认宽度
|
||||
let defaultWidth = 120;
|
||||
if (field.fieldName === 'deviceId' || field.fieldName === 'name') {
|
||||
defaultWidth = 150;
|
||||
} else if (field.fieldName === 'description') {
|
||||
defaultWidth = 200;
|
||||
} else if (field.fieldType === 'number') {
|
||||
defaultWidth = 80;
|
||||
} else if (field.fieldType === 'textarea') {
|
||||
defaultWidth = 180;
|
||||
}
|
||||
|
||||
// 为设备名称和ID列添加点击查看详情功能
|
||||
const columnConfig = {
|
||||
title: field.displayName,
|
||||
dataIndex: field.fieldName,
|
||||
key: field.fieldName,
|
||||
});
|
||||
width: columnWidths[field.fieldName] || defaultWidth,
|
||||
onHeaderCell: handleHeaderCellResize(field.fieldName),
|
||||
};
|
||||
|
||||
// 设备名称和ID列添加点击效果
|
||||
if (field.fieldName === 'deviceId' || field.fieldName === 'name') {
|
||||
columnConfig.render = (value, record) => (
|
||||
<a
|
||||
onClick={() => handleShowDetail(record)}
|
||||
style={{
|
||||
color: '#1890ff',
|
||||
textDecoration: 'none',
|
||||
cursor: 'pointer'
|
||||
}}
|
||||
onMouseEnter={(e) => e.target.style.textDecoration = 'underline'}
|
||||
onMouseLeave={(e) => e.target.style.textDecoration = 'none'}
|
||||
>
|
||||
{value || '-'}
|
||||
</a>
|
||||
);
|
||||
}
|
||||
|
||||
generatedColumns.push(columnConfig);
|
||||
}
|
||||
});
|
||||
|
||||
@@ -577,6 +700,8 @@ function DeviceManagement() {
|
||||
generatedColumns.push({
|
||||
title: '操作',
|
||||
key: 'action',
|
||||
width: columnWidths.action || 120,
|
||||
onHeaderCell: handleHeaderCellResize('action'),
|
||||
render: (_, record) => (
|
||||
<Space size="middle">
|
||||
<Button type="primary" icon={<EditOutlined />} onClick={() => showModal(record)} size="small">
|
||||
@@ -590,7 +715,7 @@ function DeviceManagement() {
|
||||
});
|
||||
|
||||
return generatedColumns;
|
||||
}, [deviceFields]);
|
||||
}, [deviceFields, columnWidths]);
|
||||
|
||||
// 保存字段配置
|
||||
const handleSaveFieldConfig = async (values) => {
|
||||
@@ -629,6 +754,13 @@ function DeviceManagement() {
|
||||
<Button icon={<DownloadOutlined />} onClick={handleExport}>导出设备</Button>
|
||||
<Button icon={<UploadOutlined />} onClick={() => setImportModalVisible(true)}>导入设备</Button>
|
||||
<Button icon={<SettingOutlined />} onClick={() => setFieldConfigModalVisible(true)}>字段配置</Button>
|
||||
<Button
|
||||
icon={<UndoOutlined />}
|
||||
onClick={resetColumnWidths}
|
||||
title="重置列宽"
|
||||
>
|
||||
重置列宽
|
||||
</Button>
|
||||
<Button
|
||||
type="primary"
|
||||
danger={false}
|
||||
@@ -711,31 +843,22 @@ function DeviceManagement() {
|
||||
|
||||
|
||||
<Table
|
||||
columns={[
|
||||
{
|
||||
title: (
|
||||
<Checkbox
|
||||
checked={selectAll && devices.length > 0}
|
||||
onChange={handleSelectAll}
|
||||
indeterminate={selectedDevices.length > 0 && selectedDevices.length < devices.length}
|
||||
/>
|
||||
),
|
||||
key: 'selection',
|
||||
width: 60,
|
||||
render: (_, record) => (
|
||||
<Checkbox
|
||||
checked={selectedDevices.includes(record.deviceId)}
|
||||
onChange={() => handleDeviceSelect(record.deviceId)}
|
||||
/>
|
||||
)
|
||||
components={{
|
||||
header: {
|
||||
cell: ResizeableTitle,
|
||||
},
|
||||
...columns
|
||||
]}
|
||||
}}
|
||||
columns={columns}
|
||||
dataSource={devices}
|
||||
rowKey="deviceId"
|
||||
loading={loading}
|
||||
pagination={pagination}
|
||||
onChange={handleTableChange}
|
||||
scroll={{ x: 'max-content' }}
|
||||
rowSelection={{
|
||||
selectedRowKeys: selectedDevices,
|
||||
onChange: setSelectedDevices,
|
||||
}}
|
||||
/>
|
||||
</Card>
|
||||
|
||||
@@ -744,7 +867,7 @@ function DeviceManagement() {
|
||||
open={modalVisible}
|
||||
onCancel={handleCancel}
|
||||
footer={null}
|
||||
width={800}
|
||||
width={700}
|
||||
>
|
||||
<Form
|
||||
form={form}
|
||||
@@ -786,17 +909,15 @@ function DeviceManagement() {
|
||||
</Select>
|
||||
);
|
||||
} else {
|
||||
// 其他select类型字段改为使用复选框组支持多选
|
||||
// 设备类型等使用单选select
|
||||
control = (
|
||||
<Checkbox.Group placeholder={`请选择${field.displayName}`}>
|
||||
<Space direction="vertical">
|
||||
{field.options && field.options.map(option => (
|
||||
<Checkbox key={option.value} value={option.value}>
|
||||
{option.label}
|
||||
</Checkbox>
|
||||
))}
|
||||
</Space>
|
||||
</Checkbox.Group>
|
||||
<Select placeholder={`请选择${field.displayName}`}>
|
||||
{field.options && field.options.map(option => (
|
||||
<Option key={option.value} value={option.value}>
|
||||
{option.label}
|
||||
</Option>
|
||||
))}
|
||||
</Select>
|
||||
);
|
||||
}
|
||||
break;
|
||||
@@ -986,6 +1107,127 @@ function DeviceManagement() {
|
||||
</div>
|
||||
)}
|
||||
</Modal>
|
||||
|
||||
{/* 设备详情模态框 */}
|
||||
<Modal
|
||||
title="设备详情"
|
||||
open={detailModalVisible}
|
||||
onCancel={() => {
|
||||
setDetailModalVisible(false);
|
||||
setSelectedDevice(null);
|
||||
}}
|
||||
footer={[
|
||||
<Button key="close" onClick={() => {
|
||||
setDetailModalVisible(false);
|
||||
setSelectedDevice(null);
|
||||
}}>
|
||||
关闭
|
||||
</Button>,
|
||||
<Button key="edit" type="primary" onClick={() => {
|
||||
setDetailModalVisible(false);
|
||||
showModal(selectedDevice);
|
||||
}}>
|
||||
编辑
|
||||
</Button>
|
||||
]}
|
||||
width={800}
|
||||
destroyOnClose
|
||||
>
|
||||
{selectedDevice && (
|
||||
<div>
|
||||
{/* 基本信息区域 */}
|
||||
<Card size="small" title="基本信息">
|
||||
<div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: '16px' }}>
|
||||
<div>
|
||||
<label style={{ fontWeight: 'bold', color: '#666' }}>设备ID：</label>
|
||||
<span style={{ marginLeft: 8 }}>{selectedDevice.deviceId || '-'}</span>
|
||||
</div>
|
||||
<div>
|
||||
<label style={{ fontWeight: 'bold', color: '#666' }}>设备名称：</label>
|
||||
<span style={{ marginLeft: 8 }}>{selectedDevice.name || '-'}</span>
|
||||
</div>
|
||||
<div>
|
||||
<label style={{ fontWeight: 'bold', color: '#666' }}>设备类型：</label>
|
||||
<span style={{ marginLeft: 8 }}>
|
||||
{selectedDevice.type ? (
|
||||
<Space>
|
||||
{getDeviceTypeIcon(selectedDevice.type)}
|
||||
<span>{typeMap[selectedDevice.type] || selectedDevice.type}</span>
|
||||
</Space>
|
||||
) : '-'}
|
||||
</span>
|
||||
</div>
|
||||
<div>
|
||||
<label style={{ fontWeight: 'bold', color: '#666' }}>型号：</label>
|
||||
<span style={{ marginLeft: 8 }}>{selectedDevice.model || '-'}</span>
|
||||
</div>
|
||||
<div>
|
||||
<label style={{ fontWeight: 'bold', color: '#666' }}>序列号：</label>
|
||||
<span style={{ marginLeft: 8 }}>{selectedDevice.serialNumber || '-'}</span>
|
||||
</div>
|
||||
<div>
|
||||
<label style={{ fontWeight: 'bold', color: '#666' }}>IP地址：</label>
|
||||
<span style={{ marginLeft: 8 }}>{selectedDevice.ipAddress || '-'}</span>
|
||||
</div>
|
||||
<div>
|
||||
<label style={{ fontWeight: 'bold', color: '#666' }}>所在机房：</label>
|
||||
<span style={{ marginLeft: 8 }}>{selectedDevice.Rack?.Room?.name || '-'}</span>
|
||||
</div>
|
||||
<div>
|
||||
<label style={{ fontWeight: 'bold', color: '#666' }}>所在机柜：</label>
|
||||
<span style={{ marginLeft: 8 }}>{selectedDevice.Rack?.name || '-'}</span>
|
||||
</div>
|
||||
<div>
|
||||
<label style={{ fontWeight: 'bold', color: '#666' }}>位置：</label>
|
||||
<span style={{ marginLeft: 8 }}>{selectedDevice.position || '-'}</span>
|
||||
</div>
|
||||
<div>
|
||||
<label style={{ fontWeight: 'bold', color: '#666' }}>高度(U)：</label>
|
||||
<span style={{ marginLeft: 8 }}>{selectedDevice.height || '-'}</span>
|
||||
</div>
|
||||
<div>
|
||||
<label style={{ fontWeight: 'bold', color: '#666' }}>功率(W)：</label>
|
||||
<span style={{ marginLeft: 8 }}>{selectedDevice.power || '-'}</span>
|
||||
</div>
|
||||
<div>
|
||||
<label style={{ fontWeight: 'bold', color: '#666' }}>状态：</label>
|
||||
<span style={{
|
||||
marginLeft: 8,
|
||||
color: selectedDevice.status ? statusMap[selectedDevice.status]?.color : '#666',
|
||||
fontWeight: 'bold'
|
||||
}}>
|
||||
{selectedDevice.status ? statusMap[selectedDevice.status]?.text || selectedDevice.status : '-'}
|
||||
</span>
|
||||
</div>
|
||||
<div>
|
||||
<label style={{ fontWeight: 'bold', color: '#666' }}>购买日期：</label>
|
||||
<span style={{ marginLeft: 8 }}>
|
||||
{selectedDevice.purchaseDate ? new Date(selectedDevice.purchaseDate).toLocaleDateString('zh-CN') : '-'}
|
||||
</span>
|
||||
</div>
|
||||
<div>
|
||||
<label style={{ fontWeight: 'bold', color: '#666' }}>保修到期：</label>
|
||||
<span style={{
|
||||
marginLeft: 8,
|
||||
color: selectedDevice.warrantyExpiry && new Date(selectedDevice.warrantyExpiry) < new Date() ? '#d93025' : '#666',
|
||||
fontWeight: selectedDevice.warrantyExpiry && new Date(selectedDevice.warrantyExpiry) < new Date() ? 'bold' : 'normal'
|
||||
}}>
|
||||
{selectedDevice.warrantyExpiry ? new Date(selectedDevice.warrantyExpiry).toLocaleDateString('zh-CN') : '-'}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
{selectedDevice.description && (
|
||||
<div style={{ marginTop: 16 }}>
|
||||
<label style={{ fontWeight: 'bold', color: '#666' }}>描述：</label>
|
||||
<div style={{ marginTop: 8, padding: '8px', backgroundColor: '#f5f5f5', borderRadius: '4px' }}>
|
||||
{selectedDevice.description}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</Card>
|
||||
</div>
|
||||
)}
|
||||
</Modal>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user