feat(设备管理): 添加机房筛选功能并优化UI样式
refactor(耗材统计): 重构筛选卡片布局和统计卡片样式 style(3D可视化): 优化机柜信息卡片样式和交互体验
This commit is contained in:
zhang1106
@@ -157,39 +157,81 @@ const QuickFilterBtn = styled(Button)`
|
||||
|
||||
const FilterCard = styled(motion.div)`
|
||||
background: ${designTokens.colors.background.card};
|
||||
padding: 20px 24px;
|
||||
padding: 24px;
|
||||
border-radius: 16px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
|
||||
margin-bottom: 24px;
|
||||
border: 1px solid ${designTokens.colors.border};
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
flex-wrap: wrap;
|
||||
|
||||
@media (max-width: 768px) {
|
||||
padding: 16px;
|
||||
}
|
||||
`;
|
||||
|
||||
const FilterRow = styled.div`
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 24px;
|
||||
flex-wrap: wrap;
|
||||
|
||||
@media (max-width: 768px) {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
gap: 16px;
|
||||
}
|
||||
`;
|
||||
|
||||
const FilterGroup = styled.div`
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
|
||||
@media (max-width: 768px) {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 8px;
|
||||
}
|
||||
`;
|
||||
|
||||
const FilterItem = styled.div`
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
gap: 8px;
|
||||
|
||||
.filter-label {
|
||||
font-size: 12px;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
color: ${designTokens.colors.text.secondary};
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
color: ${designTokens.colors.text.primary};
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
width: 3px;
|
||||
height: 12px;
|
||||
background: ${designTokens.colors.primary.main};
|
||||
border-radius: 2px;
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
const FilterActions = styled.div`
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
margin-left: auto;
|
||||
|
||||
@media (max-width: 768px) {
|
||||
margin-left: 0;
|
||||
width: 100%;
|
||||
}
|
||||
`;
|
||||
|
||||
const StatsGrid = styled(motion.div)`
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: 20px;
|
||||
gap: 16px;
|
||||
margin-bottom: 24px;
|
||||
|
||||
@media (max-width: 1200px) {
|
||||
@@ -204,7 +246,7 @@ const StatsGrid = styled(motion.div)`
|
||||
const StatsCard = styled(motion.div)`
|
||||
background: ${designTokens.colors.background.card};
|
||||
border-radius: 16px;
|
||||
padding: 24px;
|
||||
padding: 20px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
|
||||
border: 1px solid ${designTokens.colors.border};
|
||||
position: relative;
|
||||
@@ -213,8 +255,9 @@ const StatsCard = styled(motion.div)`
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
|
||||
&:hover {
|
||||
transform: translateY(-4px);
|
||||
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08);
|
||||
transform: translateY(-6px);
|
||||
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.1);
|
||||
border-color: ${props => props.$borderColor || designTokens.colors.primary.main}40;
|
||||
}
|
||||
|
||||
&::before {
|
||||
@@ -223,44 +266,40 @@ const StatsCard = styled(motion.div)`
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 3px;
|
||||
height: 4px;
|
||||
background: ${props => props.$accent || designTokens.colors.primary.gradient};
|
||||
}
|
||||
|
||||
.card-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.card-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.card-icon {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
border-radius: 12px;
|
||||
border-radius: 14px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 22px;
|
||||
margin-bottom: 16px;
|
||||
font-size: 24px;
|
||||
background: ${props => props.$iconBg || 'rgba(99, 102, 241, 0.1)'};
|
||||
color: ${props => props.$iconColor || designTokens.colors.primary.main};
|
||||
}
|
||||
|
||||
.card-value {
|
||||
font-size: 36px;
|
||||
font-weight: 700;
|
||||
color: ${designTokens.colors.text.primary};
|
||||
line-height: 1.2;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.card-label {
|
||||
font-size: 14px;
|
||||
color: ${designTokens.colors.text.secondary};
|
||||
box-shadow: 0 4px 12px ${props => props.$iconShadow || 'rgba(99, 102, 241, 0.2)'};
|
||||
}
|
||||
|
||||
.card-trend {
|
||||
position: absolute;
|
||||
top: 24px;
|
||||
right: 24px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
font-size: 13px;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
padding: 4px 10px;
|
||||
border-radius: 20px;
|
||||
@@ -280,6 +319,25 @@ const StatsCard = styled(motion.div)`
|
||||
background: rgba(107, 114, 128, 0.1);
|
||||
}
|
||||
}
|
||||
|
||||
.card-body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.card-value {
|
||||
font-size: 32px;
|
||||
font-weight: 700;
|
||||
color: ${designTokens.colors.text.primary};
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.card-label {
|
||||
font-size: 13px;
|
||||
color: ${designTokens.colors.text.secondary};
|
||||
font-weight: 500;
|
||||
}
|
||||
`;
|
||||
|
||||
const BentoGrid = styled(motion.div)`
|
||||
@@ -312,12 +370,12 @@ const BentoCard = styled(motion.div)`
|
||||
}
|
||||
|
||||
.card-header {
|
||||
padding: 20px 24px;
|
||||
padding: 18px 24px;
|
||||
border-bottom: 1px solid ${designTokens.colors.border};
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
background: linear-gradient(135deg, #fafbfc 0%, #f5f7fa 100%);
|
||||
background: ${designTokens.colors.background.main};
|
||||
|
||||
.header-left {
|
||||
display: flex;
|
||||
@@ -325,19 +383,20 @@ const BentoCard = styled(motion.div)`
|
||||
gap: 12px;
|
||||
|
||||
.header-icon {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
border-radius: 10px;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 12px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 18px;
|
||||
font-size: 20px;
|
||||
background: ${props => props.$iconBg || designTokens.colors.primary.gradient};
|
||||
color: white;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.header-title {
|
||||
font-size: 16px;
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
color: ${designTokens.colors.text.primary};
|
||||
}
|
||||
@@ -345,19 +404,24 @@ const BentoCard = styled(motion.div)`
|
||||
|
||||
.header-extra {
|
||||
color: ${designTokens.colors.text.secondary};
|
||||
font-size: 13px;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
padding: 4px 10px;
|
||||
background: ${designTokens.colors.background.card};
|
||||
border-radius: 8px;
|
||||
border: 1px solid ${designTokens.colors.border};
|
||||
}
|
||||
}
|
||||
|
||||
.card-body {
|
||||
padding: 20px 24px;
|
||||
padding: 0;
|
||||
}
|
||||
`;
|
||||
|
||||
const InOutComparison = styled.div`
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 20px;
|
||||
gap: 16px;
|
||||
|
||||
@media (max-width: 576px) {
|
||||
grid-template-columns: 1fr;
|
||||
@@ -366,99 +430,146 @@ const InOutComparison = styled.div`
|
||||
|
||||
const ComparisonItem = styled.div`
|
||||
padding: 20px;
|
||||
border-radius: 12px;
|
||||
border-radius: 14px;
|
||||
background: ${props => props.$bg || 'transparent'};
|
||||
text-align: center;
|
||||
transition: all 0.3s ease;
|
||||
border: 1px solid ${props => props.$color}20;
|
||||
|
||||
&:hover {
|
||||
background: ${props => props.$bg || 'transparent'};
|
||||
border-color: ${props => props.$color}40;
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.item-icon {
|
||||
font-size: 28px;
|
||||
margin-bottom: 12px;
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
margin: 0 auto 14px;
|
||||
border-radius: 16px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 26px;
|
||||
background: ${props => props.$color}15;
|
||||
color: ${props => props.$color};
|
||||
}
|
||||
|
||||
.item-value {
|
||||
font-size: 32px;
|
||||
font-size: 34px;
|
||||
font-weight: 700;
|
||||
color: ${props => props.$color};
|
||||
margin-bottom: 4px;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.item-label {
|
||||
font-size: 14px;
|
||||
color: ${designTokens.colors.text.secondary};
|
||||
margin-bottom: 8px;
|
||||
margin-bottom: 10px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.item-sub {
|
||||
font-size: 13px;
|
||||
color: ${designTokens.colors.text.secondary};
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 4px;
|
||||
|
||||
strong {
|
||||
color: ${props => props.$color};
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
const CategoryGrid = styled.div`
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
|
||||
gap: 16px;
|
||||
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
|
||||
gap: 12px;
|
||||
`;
|
||||
|
||||
const CategoryCard = styled(motion.div)`
|
||||
padding: 20px;
|
||||
padding: 16px;
|
||||
border-radius: 12px;
|
||||
background: linear-gradient(135deg, #fafbfc 0%, #f5f7fa 100%);
|
||||
background: ${designTokens.colors.background.card};
|
||||
border: 1px solid ${designTokens.colors.border};
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 3px;
|
||||
background: ${props => props.$color};
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s ease;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06);
|
||||
transform: translateY(-4px);
|
||||
box-shadow: 0 8px 24px ${props => props.$color}20;
|
||||
border-color: ${props => props.$color}40;
|
||||
|
||||
&::before {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.category-badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
padding: 6px 14px;
|
||||
border-radius: 20px;
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
padding: 5px 12px;
|
||||
border-radius: 16px;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
margin-bottom: 12px;
|
||||
background: ${props => props.$color}15;
|
||||
color: ${props => props.$color};
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
|
||||
.dot {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border-radius: 50%;
|
||||
background: currentColor;
|
||||
}
|
||||
}
|
||||
|
||||
.category-count {
|
||||
font-size: 28px;
|
||||
font-size: 32px;
|
||||
font-weight: 700;
|
||||
color: ${designTokens.colors.text.primary};
|
||||
margin-bottom: 4px;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.category-label {
|
||||
font-size: 13px;
|
||||
font-size: 12px;
|
||||
color: ${designTokens.colors.text.secondary};
|
||||
margin-bottom: 12px;
|
||||
margin-bottom: 10px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.category-stock {
|
||||
font-size: 13px;
|
||||
font-size: 12px;
|
||||
color: ${designTokens.colors.text.secondary};
|
||||
padding-top: 8px;
|
||||
border-top: 1px solid ${designTokens.colors.border}40;
|
||||
|
||||
strong {
|
||||
color: ${designTokens.colors.text.primary};
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
`;
|
||||
@@ -466,15 +577,18 @@ const CategoryCard = styled(motion.div)`
|
||||
const StyledTable = styled(Table)`
|
||||
.ant-table {
|
||||
background: transparent;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.ant-table-thead > tr > th {
|
||||
background: linear-gradient(135deg, #fafbfc 0%, #f5f7fa 100%);
|
||||
font-weight: 600;
|
||||
font-size: 13px;
|
||||
font-size: 12px;
|
||||
color: ${designTokens.colors.text.secondary};
|
||||
border-bottom: 1px solid ${designTokens.colors.border};
|
||||
padding: 14px 16px;
|
||||
padding: 12px 16px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
.ant-table-tbody > tr > td {
|
||||
@@ -483,7 +597,11 @@ const StyledTable = styled(Table)`
|
||||
}
|
||||
|
||||
.ant-table-tbody > tr:hover > td {
|
||||
background: rgba(99, 102, 241, 0.02);
|
||||
background: rgba(99, 102, 241, 0.03);
|
||||
}
|
||||
|
||||
.ant-table-wrapper {
|
||||
border-radius: 0 0 16px 16px;
|
||||
}
|
||||
`;
|
||||
|
||||
@@ -921,45 +1039,71 @@ const ConsumableStatistics = () => {
|
||||
</QuickFilterBar>
|
||||
|
||||
<FilterCard variants={itemVariants}>
|
||||
<FilterItem>
|
||||
<span className="filter-label">时间范围</span>
|
||||
<RangePicker
|
||||
value={dateRange}
|
||||
onChange={(dates) => {
|
||||
setDateRange(dates);
|
||||
setQuickFilter(null);
|
||||
}}
|
||||
style={{ ...datePickerStyles.range, width: 280 }}
|
||||
allowClear={false}
|
||||
/>
|
||||
</FilterItem>
|
||||
<FilterItem>
|
||||
<span className="filter-label">耗材类别</span>
|
||||
<Select
|
||||
value={categoryFilter}
|
||||
onChange={setCategoryFilter}
|
||||
style={{ ...selectStyles.base, width: 160 }}
|
||||
>
|
||||
<Option value="all">全部类别</Option>
|
||||
{categories.map(cat => (
|
||||
<Option key={cat.id} value={cat.name}>{cat.name}</Option>
|
||||
))}
|
||||
</Select>
|
||||
</FilterItem>
|
||||
<Button
|
||||
type="primary"
|
||||
onClick={loadStatistics}
|
||||
loading={loading}
|
||||
style={{
|
||||
height: 38,
|
||||
borderRadius: 10,
|
||||
background: designTokens.colors.primary.gradient,
|
||||
border: 'none',
|
||||
marginLeft: 'auto',
|
||||
}}
|
||||
>
|
||||
应用筛选
|
||||
</Button>
|
||||
<FilterRow>
|
||||
<FilterGroup>
|
||||
<FilterItem>
|
||||
<span className="filter-label">时间范围</span>
|
||||
<RangePicker
|
||||
value={dateRange}
|
||||
onChange={(dates) => {
|
||||
setDateRange(dates);
|
||||
setQuickFilter(null);
|
||||
}}
|
||||
style={{ ...datePickerStyles.range, width: 320 }}
|
||||
allowClear={false}
|
||||
/>
|
||||
</FilterItem>
|
||||
<FilterItem>
|
||||
<span className="filter-label">耗材类别</span>
|
||||
<Select
|
||||
value={categoryFilter}
|
||||
onChange={setCategoryFilter}
|
||||
style={{ ...selectStyles.base, width: 180 }}
|
||||
showSearch
|
||||
placeholder="选择类别"
|
||||
optionFilterProp="children"
|
||||
>
|
||||
<Option value="all">全部类别</Option>
|
||||
{categories.map(cat => (
|
||||
<Option key={cat.id} value={cat.name}>{cat.name}</Option>
|
||||
))}
|
||||
</Select>
|
||||
</FilterItem>
|
||||
</FilterGroup>
|
||||
<FilterActions>
|
||||
<Button
|
||||
type="primary"
|
||||
onClick={loadStatistics}
|
||||
loading={loading}
|
||||
icon={<ThunderboltOutlined />}
|
||||
style={{
|
||||
height: 40,
|
||||
borderRadius: 10,
|
||||
background: designTokens.colors.primary.gradient,
|
||||
border: 'none',
|
||||
padding: '0 24px',
|
||||
fontWeight: 500,
|
||||
}}
|
||||
>
|
||||
应用筛选
|
||||
</Button>
|
||||
<Button
|
||||
onClick={() => {
|
||||
setQuickFilter('30days');
|
||||
setDateRange([dayjs().subtract(30, 'days'), dayjs()]);
|
||||
setCategoryFilter('all');
|
||||
}}
|
||||
icon={<ReloadOutlined />}
|
||||
style={{
|
||||
height: 40,
|
||||
borderRadius: 10,
|
||||
borderColor: designTokens.colors.border,
|
||||
}}
|
||||
>
|
||||
重置
|
||||
</Button>
|
||||
</FilterActions>
|
||||
</FilterRow>
|
||||
</FilterCard>
|
||||
|
||||
<StatsGrid variants={containerVariants} initial="hidden" animate="visible">
|
||||
@@ -968,11 +1112,22 @@ const ConsumableStatistics = () => {
|
||||
$accent={designTokens.colors.primary.gradient}
|
||||
$iconBg="rgba(99, 102, 241, 0.1)"
|
||||
$iconColor={designTokens.colors.primary.main}
|
||||
whileHover={{ y: -4 }}
|
||||
$iconShadow="rgba(99, 102, 241, 0.2)"
|
||||
$borderColor={designTokens.colors.primary.main}
|
||||
whileHover={{ y: -6 }}
|
||||
>
|
||||
<div className="card-icon"><DatabaseOutlined /></div>
|
||||
<div className="card-value">{summary?.total || 0}</div>
|
||||
<div className="card-label">耗材种类</div>
|
||||
<div className="card-content">
|
||||
<div className="card-header">
|
||||
<div className="card-icon"><DatabaseOutlined /></div>
|
||||
<div className="card-trend neutral">
|
||||
<AppstoreOutlined /> 总览
|
||||
</div>
|
||||
</div>
|
||||
<div className="card-body">
|
||||
<div className="card-value">{summary?.total || 0}</div>
|
||||
<div className="card-label">耗材种类</div>
|
||||
</div>
|
||||
</div>
|
||||
</StatsCard>
|
||||
|
||||
<StatsCard
|
||||
@@ -980,18 +1135,26 @@ const ConsumableStatistics = () => {
|
||||
$accent={designTokens.colors.warning.gradient}
|
||||
$iconBg="rgba(245, 158, 11, 0.1)"
|
||||
$iconColor={designTokens.colors.warning.main}
|
||||
whileHover={{ y: -4 }}
|
||||
$iconShadow="rgba(245, 158, 11, 0.2)"
|
||||
$borderColor={designTokens.colors.warning.main}
|
||||
whileHover={{ y: -6 }}
|
||||
>
|
||||
<div className="card-icon"><WarningOutlined /></div>
|
||||
<div className="card-value" style={{ color: designTokens.colors.warning.main }}>
|
||||
{summary?.lowStock || 0}
|
||||
</div>
|
||||
<div className="card-label">库存预警</div>
|
||||
{summary?.lowStock > 0 && (
|
||||
<div className="card-trend down">
|
||||
<ExclamationCircleOutlined /> 需关注
|
||||
<div className="card-content">
|
||||
<div className="card-header">
|
||||
<div className="card-icon"><WarningOutlined /></div>
|
||||
{summary?.lowStock > 0 && (
|
||||
<div className="card-trend down">
|
||||
<ExclamationCircleOutlined /> 需关注
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
<div className="card-body">
|
||||
<div className="card-value" style={{ color: designTokens.colors.warning.main }}>
|
||||
{summary?.lowStock || 0}
|
||||
</div>
|
||||
<div className="card-label">库存预警</div>
|
||||
</div>
|
||||
</div>
|
||||
</StatsCard>
|
||||
|
||||
<StatsCard
|
||||
@@ -999,13 +1162,24 @@ const ConsumableStatistics = () => {
|
||||
$accent={designTokens.colors.success.gradient}
|
||||
$iconBg="rgba(16, 185, 129, 0.1)"
|
||||
$iconColor={designTokens.colors.success.main}
|
||||
whileHover={{ y: -4 }}
|
||||
$iconShadow="rgba(16, 185, 129, 0.2)"
|
||||
$borderColor={designTokens.colors.success.main}
|
||||
whileHover={{ y: -6 }}
|
||||
>
|
||||
<div className="card-icon"><ArrowDownOutlined /></div>
|
||||
<div className="card-value" style={{ color: designTokens.colors.success.main }}>
|
||||
{stats?.inQuantity || 0}
|
||||
<div className="card-content">
|
||||
<div className="card-header">
|
||||
<div className="card-icon"><ArrowDownOutlined /></div>
|
||||
<div className="card-trend up">
|
||||
<RiseOutlined /> 入库
|
||||
</div>
|
||||
</div>
|
||||
<div className="card-body">
|
||||
<div className="card-value" style={{ color: designTokens.colors.success.main }}>
|
||||
{stats?.inQuantity || 0}
|
||||
</div>
|
||||
<div className="card-label">期间入库</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="card-label">期间入库</div>
|
||||
</StatsCard>
|
||||
|
||||
<StatsCard
|
||||
@@ -1013,13 +1187,24 @@ const ConsumableStatistics = () => {
|
||||
$accent={designTokens.colors.secondary.gradient}
|
||||
$iconBg="rgba(236, 72, 153, 0.1)"
|
||||
$iconColor={designTokens.colors.secondary.main}
|
||||
whileHover={{ y: -4 }}
|
||||
$iconShadow="rgba(236, 72, 153, 0.2)"
|
||||
$borderColor={designTokens.colors.secondary.main}
|
||||
whileHover={{ y: -6 }}
|
||||
>
|
||||
<div className="card-icon"><ArrowUpOutlined /></div>
|
||||
<div className="card-value" style={{ color: designTokens.colors.secondary.main }}>
|
||||
{stats?.outQuantity || 0}
|
||||
<div className="card-content">
|
||||
<div className="card-header">
|
||||
<div className="card-icon"><ArrowUpOutlined /></div>
|
||||
<div className="card-trend neutral">
|
||||
<FallOutlined /> 出库
|
||||
</div>
|
||||
</div>
|
||||
<div className="card-body">
|
||||
<div className="card-value" style={{ color: designTokens.colors.secondary.main }}>
|
||||
{stats?.outQuantity || 0}
|
||||
</div>
|
||||
<div className="card-label">期间出库</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="card-label">期间出库</div>
|
||||
</StatsCard>
|
||||
</StatsGrid>
|
||||
|
||||
@@ -1055,32 +1240,38 @@ const ConsumableStatistics = () => {
|
||||
<div className="item-sub">共 <strong>{stats?.outQuantity || 0}</strong> 件</div>
|
||||
</ComparisonItem>
|
||||
</InOutComparison>
|
||||
<div style={{
|
||||
marginTop: 20,
|
||||
padding: '16px',
|
||||
background: netQuantity >= 0 ? 'rgba(16, 185, 129, 0.06)' : 'rgba(239, 68, 68, 0.06)',
|
||||
borderRadius: 12,
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
gap: 8,
|
||||
}}>
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 10 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ delay: 0.2 }}
|
||||
style={{
|
||||
marginTop: 20,
|
||||
padding: '18px 24px',
|
||||
background: `linear-gradient(135deg, ${netQuantity >= 0 ? 'rgba(16, 185, 129, 0.08)' : 'rgba(239, 68, 68, 0.08)'} 0%, ${netQuantity >= 0 ? 'rgba(5, 150, 105, 0.04)' : 'rgba(185, 28, 28, 0.04)'} 100%)`,
|
||||
borderRadius: 14,
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
gap: 12,
|
||||
border: `1px solid ${netQuantity >= 0 ? 'rgba(16, 185, 129, 0.2)' : 'rgba(239, 68, 68, 0.2)'}`,
|
||||
}}
|
||||
>
|
||||
{netQuantity >= 0 ? (
|
||||
<>
|
||||
<RiseOutlined style={{ color: designTokens.colors.success.main, fontSize: 18 }} />
|
||||
<Text style={{ color: designTokens.colors.success.main, fontWeight: 600 }}>
|
||||
<RiseOutlined style={{ color: designTokens.colors.success.main, fontSize: 20 }} />
|
||||
<Text style={{ color: designTokens.colors.success.main, fontWeight: 600, fontSize: 15 }}>
|
||||
净入库 +{netQuantity} 件
|
||||
</Text>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<FallOutlined style={{ color: designTokens.colors.error.main, fontSize: 18 }} />
|
||||
<Text style={{ color: designTokens.colors.error.main, fontWeight: 600 }}>
|
||||
净出库 {netQuantity} 件
|
||||
<FallOutlined style={{ color: designTokens.colors.error.main, fontSize: 20 }} />
|
||||
<Text style={{ color: designTokens.colors.error.main, fontWeight: 600, fontSize: 15 }}>
|
||||
净出库 {Math.abs(netQuantity)} 件
|
||||
</Text>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
</BentoCard>
|
||||
|
||||
@@ -1132,10 +1323,23 @@ const ConsumableStatistics = () => {
|
||||
<div className="header-icon"><ExclamationCircleOutlined /></div>
|
||||
<span className="header-title">库存预警</span>
|
||||
</div>
|
||||
<Badge
|
||||
count={lowStockItems.length}
|
||||
style={{ backgroundColor: designTokens.colors.warning.main }}
|
||||
/>
|
||||
{lowStockItems.length > 0 ? (
|
||||
<Badge
|
||||
count={lowStockItems.length}
|
||||
style={{ backgroundColor: designTokens.colors.warning.main }}
|
||||
/>
|
||||
) : (
|
||||
<span style={{
|
||||
fontSize: 12,
|
||||
color: designTokens.colors.success.main,
|
||||
fontWeight: 500,
|
||||
padding: '4px 10px',
|
||||
background: 'rgba(16, 185, 129, 0.1)',
|
||||
borderRadius: 8
|
||||
}}>
|
||||
全部充足
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<div className="card-body" style={{ padding: 0 }}>
|
||||
<StyledTable
|
||||
|
||||
@@ -87,6 +87,8 @@ function DeviceManagement() {
|
||||
const [keyword, setKeyword] = useState('');
|
||||
const [status, setStatus] = useState('all');
|
||||
const [type, setType] = useState('all');
|
||||
const [roomId, setRoomId] = useState('all');
|
||||
const [rackId, setRackId] = useState('all');
|
||||
const [searchForm] = Form.useForm();
|
||||
|
||||
const [pagination, setPagination] = useState({
|
||||
@@ -133,6 +135,8 @@ function DeviceManagement() {
|
||||
keyword: debouncedKeyword || undefined,
|
||||
status: status !== 'all' ? status : undefined,
|
||||
type: type !== 'all' ? type : undefined,
|
||||
roomId: roomId !== 'all' ? roomId : undefined,
|
||||
rackId: rackId !== 'all' ? rackId : undefined,
|
||||
};
|
||||
|
||||
const response = await axios.get('/api/devices', { params });
|
||||
@@ -149,7 +153,7 @@ function DeviceManagement() {
|
||||
setLoading(false);
|
||||
}
|
||||
},
|
||||
[debouncedKeyword, status, type]
|
||||
[debouncedKeyword, status, type, roomId, rackId]
|
||||
);
|
||||
|
||||
const fetchDeviceFields = async () => {
|
||||
@@ -271,6 +275,8 @@ function DeviceManagement() {
|
||||
setKeyword(values.keyword || '');
|
||||
setStatus(values.status || 'all');
|
||||
setType(values.type || 'all');
|
||||
setRoomId(values.roomId || 'all');
|
||||
setRackId(values.rackId || 'all');
|
||||
|
||||
setPagination((prev) => ({ ...prev, current: 1 }));
|
||||
|
||||
@@ -283,6 +289,8 @@ function DeviceManagement() {
|
||||
setKeyword('');
|
||||
setStatus('all');
|
||||
setType('all');
|
||||
setRoomId('all');
|
||||
setRackId('all');
|
||||
searchForm.resetFields();
|
||||
|
||||
setTimeout(() => setSearching(false), 300);
|
||||
@@ -919,6 +927,43 @@ function DeviceManagement() {
|
||||
</Select>
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item name="roomId" style={{ margin: 0 }}>
|
||||
<Select
|
||||
value={roomId}
|
||||
onChange={(value) => {
|
||||
setRoomId(value);
|
||||
setRackId('all');
|
||||
}}
|
||||
style={{ width: '140px', borderRadius: designTokens.borderRadius.medium }}
|
||||
>
|
||||
<Option value="all">所有机房</Option>
|
||||
{rooms.map((room) => (
|
||||
<Option key={room.roomId} value={room.roomId}>
|
||||
{room.name}
|
||||
</Option>
|
||||
))}
|
||||
</Select>
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item name="rackId" style={{ margin: 0 }}>
|
||||
<Select
|
||||
value={rackId}
|
||||
onChange={setRackId}
|
||||
style={{ width: '140px', borderRadius: designTokens.borderRadius.medium }}
|
||||
showSearch
|
||||
optionFilterProp="children"
|
||||
>
|
||||
<Option value="all">所有机柜</Option>
|
||||
{racks
|
||||
.filter((rack) => roomId === 'all' || rack.roomId === roomId)
|
||||
.map((rack) => (
|
||||
<Option key={rack.rackId} value={rack.rackId}>
|
||||
{rack.name}
|
||||
</Option>
|
||||
))}
|
||||
</Select>
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item style={{ margin: 0 }}>
|
||||
<Space>
|
||||
<Button
|
||||
|
||||
@@ -18,6 +18,8 @@ import {
|
||||
DatePicker,
|
||||
Checkbox,
|
||||
Switch,
|
||||
Tooltip,
|
||||
Badge,
|
||||
} from 'antd';
|
||||
import {
|
||||
CloudServerOutlined,
|
||||
@@ -30,6 +32,8 @@ import {
|
||||
SettingOutlined,
|
||||
FullscreenOutlined,
|
||||
EyeOutlined,
|
||||
LeftOutlined,
|
||||
RightOutlined,
|
||||
} from '@ant-design/icons';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import axios from 'axios';
|
||||
@@ -74,7 +78,7 @@ const Rack3DVisualization = () => {
|
||||
|
||||
const [selectedRoom, setSelectedRoom] = useState(null);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [isRackInfoCollapsed, setIsRackInfoCollapsed] = useState(false); // Rack Info Card collapsed state
|
||||
const [isRackInfoCollapsed, setIsRackInfoCollapsed] = useState(false);
|
||||
|
||||
// Edit Modal State
|
||||
const [modalVisible, setModalVisible] = useState(false);
|
||||
@@ -343,7 +347,7 @@ const Rack3DVisualization = () => {
|
||||
useEffect(() => {
|
||||
if (selectedRack?.rackId) {
|
||||
fetchDevices(selectedRack.rackId);
|
||||
setSelectedDevice(null); // Reset selection on rack change
|
||||
setSelectedDevice(null);
|
||||
}
|
||||
}, [selectedRack, fetchDevices]);
|
||||
|
||||
@@ -361,6 +365,40 @@ const Rack3DVisualization = () => {
|
||||
return Array.from(roomMap.values());
|
||||
}, [racks]);
|
||||
|
||||
// 计算机柜统计数据的 useMemo
|
||||
const rackStats = useMemo(() => {
|
||||
if (!selectedRack || !devices.length) {
|
||||
return {
|
||||
usedU: 0,
|
||||
usagePercent: 0,
|
||||
totalPower: 0,
|
||||
availableU: selectedRack?.height || 0,
|
||||
};
|
||||
}
|
||||
|
||||
// 计算已用U位（考虑设备高度）
|
||||
const usedU = devices.reduce((sum, device) => sum + (device.height || 1), 0);
|
||||
|
||||
// 计算总功率
|
||||
const totalPower = devices.reduce((sum, device) => {
|
||||
const power = parseFloat(device.powerConsumption) || 0;
|
||||
return sum + power;
|
||||
}, 0);
|
||||
|
||||
// 机柜总高度
|
||||
const totalHeight = selectedRack.height || 45;
|
||||
|
||||
// 可用U位
|
||||
const availableU = totalHeight - usedU;
|
||||
|
||||
return {
|
||||
usedU,
|
||||
usagePercent: totalHeight > 0 ? Math.round((usedU / totalHeight) * 100) : 0,
|
||||
totalPower,
|
||||
availableU,
|
||||
};
|
||||
}, [selectedRack, devices]);
|
||||
|
||||
const racksInSelectedRoom = useMemo(() => {
|
||||
if (!selectedRoom) return [];
|
||||
return racks.filter(r => {
|
||||
@@ -444,6 +482,20 @@ const Rack3DVisualization = () => {
|
||||
[selectedDevice, fetchDeviceCables]
|
||||
);
|
||||
|
||||
const handlePrevRack = () => {
|
||||
if (racksInSelectedRoom.length <= 1) return;
|
||||
const currentIndex = racksInSelectedRoom.findIndex(r => r.rackId === selectedRack?.rackId);
|
||||
const prevIndex = currentIndex > 0 ? currentIndex - 1 : racksInSelectedRoom.length - 1;
|
||||
setSelectedRack(racksInSelectedRoom[prevIndex]);
|
||||
};
|
||||
|
||||
const handleNextRack = () => {
|
||||
if (racksInSelectedRoom.length <= 1) return;
|
||||
const currentIndex = racksInSelectedRoom.findIndex(r => r.rackId === selectedRack?.rackId);
|
||||
const nextIndex = currentIndex < racksInSelectedRoom.length - 1 ? currentIndex + 1 : 0;
|
||||
setSelectedRack(racksInSelectedRoom[nextIndex]);
|
||||
};
|
||||
|
||||
return (
|
||||
<Layout
|
||||
style={{ height: '100vh', overflow: 'hidden', background: '#000', position: 'relative' }}
|
||||
@@ -468,7 +520,7 @@ const Rack3DVisualization = () => {
|
||||
type="text"
|
||||
icon={<ArrowLeftOutlined style={{ color: 'rgba(255,255,255,0.8)' }} />}
|
||||
onClick={() => navigate('/')}
|
||||
style={{ marginRight: 16 }}
|
||||
style={{ marginRight: 8 }}
|
||||
className="hover-bright"
|
||||
/>
|
||||
<div
|
||||
@@ -499,7 +551,7 @@ const Rack3DVisualization = () => {
|
||||
</div>
|
||||
<Space size="middle">
|
||||
<Select
|
||||
placeholder="选择机房"
|
||||
placeholder="搜索机房"
|
||||
style={{ width: 180 }}
|
||||
value={selectedRoom}
|
||||
onChange={val => {
|
||||
@@ -513,6 +565,10 @@ const Rack3DVisualization = () => {
|
||||
variant="borderless"
|
||||
popupMatchSelectWidth={false}
|
||||
className="glass-select"
|
||||
showSearch
|
||||
filterOption={(input, option) =>
|
||||
(option?.children?.toString() || '').toLowerCase().includes(input.toLowerCase())
|
||||
}
|
||||
>
|
||||
{rooms.map(room => (
|
||||
<Option key={room.key} value={room.key}>
|
||||
@@ -520,14 +576,29 @@ const Rack3DVisualization = () => {
|
||||
</Option>
|
||||
))}
|
||||
</Select>
|
||||
<Button
|
||||
type="text"
|
||||
icon={<LeftOutlined />}
|
||||
onClick={handlePrevRack}
|
||||
disabled={!selectedRoom || racksInSelectedRoom.length <= 1}
|
||||
className="hover-bright"
|
||||
style={{
|
||||
color: 'rgba(255,255,255,0.9)',
|
||||
borderRadius: '6px',
|
||||
}}
|
||||
/>
|
||||
<Select
|
||||
placeholder="选择机柜"
|
||||
placeholder="搜索机柜"
|
||||
style={{ width: 180 }}
|
||||
value={selectedRack?.rackId}
|
||||
onChange={val => setSelectedRack(racks.find(r => r.rackId === val))}
|
||||
disabled={!selectedRoom}
|
||||
variant="borderless"
|
||||
className="glass-select"
|
||||
showSearch
|
||||
filterOption={(input, option) =>
|
||||
(option?.children?.toString() || '').toLowerCase().includes(input.toLowerCase())
|
||||
}
|
||||
>
|
||||
{racksInSelectedRoom.map(rack => (
|
||||
<Option key={rack.rackId} value={rack.rackId}>
|
||||
@@ -535,6 +606,17 @@ const Rack3DVisualization = () => {
|
||||
</Option>
|
||||
))}
|
||||
</Select>
|
||||
<Button
|
||||
type="text"
|
||||
icon={<RightOutlined />}
|
||||
onClick={handleNextRack}
|
||||
disabled={!selectedRoom || racksInSelectedRoom.length <= 1}
|
||||
className="hover-bright"
|
||||
style={{
|
||||
color: 'rgba(255,255,255,0.9)',
|
||||
borderRadius: '6px',
|
||||
}}
|
||||
/>
|
||||
<Button
|
||||
type="primary"
|
||||
ghost
|
||||
@@ -625,19 +707,100 @@ const Rack3DVisualization = () => {
|
||||
border: 1px solid rgba(255, 255, 255, 0.1) !important;
|
||||
color: white !important;
|
||||
border-radius: 6px !important;
|
||||
transition: all 0.3s;
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
padding: 4px 12px !important;
|
||||
height: auto !important;
|
||||
min-height: 32px !important;
|
||||
align-items: center !important;
|
||||
}
|
||||
.glass-select:hover .ant-select-selector {
|
||||
background: rgba(255, 255, 255, 0.15) !important;
|
||||
border-color: rgba(255, 255, 255, 0.3) !important;
|
||||
}
|
||||
.glass-select.ant-select-focused .ant-select-selector {
|
||||
background: rgba(255, 255, 255, 0.12) !important;
|
||||
border-color: #3b82f6 !important;
|
||||
box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.15), 0 0 12px rgba(59, 130, 246, 0.1) !important;
|
||||
}
|
||||
.glass-select .ant-select-selection-item,
|
||||
.glass-select .ant-select-selection-placeholder {
|
||||
color: rgba(255, 255, 255, 0.9) !important;
|
||||
font-size: 13px;
|
||||
font-size: 13px !important;
|
||||
line-height: 1.5 !important;
|
||||
white-space: nowrap !important;
|
||||
overflow: hidden !important;
|
||||
text-overflow: ellipsis !important;
|
||||
position: relative !important;
|
||||
z-index: 1 !important;
|
||||
flex: 0 1 auto !important;
|
||||
}
|
||||
.glass-select.ant-select-show-search .ant-select-selection-item,
|
||||
.glass-select.ant-select-show-search .ant-select-selection-placeholder {
|
||||
position: absolute !important;
|
||||
left: 0 !important;
|
||||
top: 50% !important;
|
||||
transform: translateY(-50%) !important;
|
||||
width: 100% !important;
|
||||
padding-right: 24px !important;
|
||||
}
|
||||
.glass-select.ant-select-show-search.ant-select-focused .ant-select-selection-item,
|
||||
.glass-select.ant-select-show-search.ant-select-focused .ant-select-selection-placeholder {
|
||||
display: none !important;
|
||||
}
|
||||
.glass-select .ant-select-selection-wrap {
|
||||
display: flex !important;
|
||||
flex-wrap: nowrap !important;
|
||||
align-items: center !important;
|
||||
white-space: nowrap !important;
|
||||
overflow: hidden !important;
|
||||
max-width: calc(100% - 24px) !important;
|
||||
}
|
||||
.glass-select .ant-select-selection-search {
|
||||
position: absolute !important;
|
||||
left: 0 !important;
|
||||
top: 50% !important;
|
||||
transform: translateY(-50%) !important;
|
||||
width: 100% !important;
|
||||
z-index: 2 !important;
|
||||
display: flex !important;
|
||||
align-items: center !important;
|
||||
}
|
||||
.glass-select .ant-select-selection-search-input {
|
||||
width: 100% !important;
|
||||
min-width: 0 !important;
|
||||
color: white !important;
|
||||
caret-color: #3b82f6 !important;
|
||||
font-size: 13px !important;
|
||||
background: transparent !important;
|
||||
border: none !important;
|
||||
outline: none !important;
|
||||
padding: 0 !important;
|
||||
}
|
||||
.glass-select .ant-select-selection-search-input::placeholder {
|
||||
color: rgba(255, 255, 255, 0.5) !important;
|
||||
}
|
||||
.glass-select .ant-select-arrow {
|
||||
color: rgba(255, 255, 255, 0.6) !important;
|
||||
transition: all 0.3s;
|
||||
position: relative !important;
|
||||
z-index: 1 !important;
|
||||
}
|
||||
.glass-select.ant-select-focused .ant-select-arrow {
|
||||
color: #60a5fa !important;
|
||||
transform: translateY(-50%) scale(1.1);
|
||||
}
|
||||
.glass-select input {
|
||||
color: white !important;
|
||||
caret-color: #3b82f6 !important;
|
||||
font-size: 13px !important;
|
||||
width: 100% !important;
|
||||
min-width: 0 !important;
|
||||
}
|
||||
.glass-select input::placeholder {
|
||||
color: rgba(255, 255, 255, 0.5) !important;
|
||||
}
|
||||
.glass-select.ant-select-open input {
|
||||
caret-color: #60a5fa !important;
|
||||
}
|
||||
.hover-bright:hover {
|
||||
color: white !important;
|
||||
@@ -645,7 +808,8 @@ const Rack3DVisualization = () => {
|
||||
}
|
||||
`}</style>
|
||||
|
||||
<Layout>
|
||||
<Layout style={{ marginTop: 64 }}>
|
||||
|
||||
<Content style={{ position: 'relative', background: '#ffffff' }}>
|
||||
{loading ? (
|
||||
<div
|
||||
@@ -679,17 +843,17 @@ const Rack3DVisualization = () => {
|
||||
<div
|
||||
style={{
|
||||
position: 'absolute',
|
||||
top: 88, // Moved down to avoid header overlap
|
||||
left: 24,
|
||||
background: 'rgba(255, 255, 255, 0.85)', // Slightly more transparent
|
||||
backdropFilter: 'blur(12px)',
|
||||
padding: isRackInfoCollapsed ? '12px 16px' : '20px',
|
||||
borderRadius: '16px',
|
||||
boxShadow: '0 8px 32px rgba(0, 0, 0, 0.08)', // Softer, deeper shadow
|
||||
width: isRackInfoCollapsed ? 'auto' : '280px',
|
||||
top: 88,
|
||||
right: 24,
|
||||
background: 'linear-gradient(135deg, rgba(15, 23, 42, 0.95) 0%, rgba(30, 41, 59, 0.9) 100%)',
|
||||
backdropFilter: 'blur(16px)',
|
||||
padding: isRackInfoCollapsed ? '14px 18px' : '20px',
|
||||
borderRadius: '20px',
|
||||
boxShadow: '0 8px 32px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.05)',
|
||||
width: isRackInfoCollapsed ? 'auto' : '300px',
|
||||
zIndex: 5,
|
||||
border: '1px solid rgba(255, 255, 255, 0.6)',
|
||||
transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)',
|
||||
border: '1px solid rgba(255, 255, 255, 0.08)',
|
||||
transition: 'all 0.4s cubic-bezier(0.4, 0, 0.2, 1)',
|
||||
overflow: 'hidden',
|
||||
cursor: isRackInfoCollapsed ? 'pointer' : 'default',
|
||||
}}
|
||||
@@ -700,48 +864,67 @@ const Rack3DVisualization = () => {
|
||||
style={{
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
marginBottom: isRackInfoCollapsed ? 0 : 16,
|
||||
marginBottom: isRackInfoCollapsed ? 0 : 20,
|
||||
justifyContent: 'space-between',
|
||||
}}
|
||||
>
|
||||
<div style={{ display: 'flex', alignItems: 'center' }}>
|
||||
<div style={{ display: 'flex', alignItems: 'center', flex: 1 }}>
|
||||
<div
|
||||
style={{
|
||||
width: 36,
|
||||
height: 36,
|
||||
width: 44,
|
||||
height: 44,
|
||||
background: 'linear-gradient(135deg, #3b82f6 0%, #2563eb 100%)',
|
||||
borderRadius: '10px',
|
||||
borderRadius: '12px',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
marginRight: 12,
|
||||
boxShadow: '0 4px 12px rgba(59, 130, 246, 0.3)',
|
||||
marginRight: 14,
|
||||
boxShadow: '0 6px 20px rgba(59, 130, 246, 0.4)',
|
||||
flexShrink: 0,
|
||||
}}
|
||||
>
|
||||
<CloudServerOutlined style={{ color: 'white', fontSize: 18 }} />
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
opacity: isRackInfoCollapsed ? 0 : 1,
|
||||
width: isRackInfoCollapsed ? 0 : 'auto',
|
||||
transition: 'opacity 0.2s',
|
||||
whiteSpace: 'nowrap',
|
||||
position: 'relative',
|
||||
overflow: 'hidden',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
fontSize: '16px',
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
left: 0,
|
||||
right: 0,
|
||||
height: '50%',
|
||||
background: 'linear-gradient(180deg, rgba(255,255,255,0.15) 0%, transparent 100%)',
|
||||
}}
|
||||
/>
|
||||
<CloudServerOutlined style={{ color: 'white', fontSize: 22, position: 'relative', zIndex: 1 }} />
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
opacity: isRackInfoCollapsed ? 0 : 1,
|
||||
width: isRackInfoCollapsed ? 0 : 'auto',
|
||||
transition: 'opacity 0.3s',
|
||||
overflow: 'hidden',
|
||||
flex: 1,
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
fontSize: '18px',
|
||||
fontWeight: 700,
|
||||
color: '#1e293b',
|
||||
color: '#f8fafc',
|
||||
lineHeight: 1.2,
|
||||
letterSpacing: '0.3px',
|
||||
}}
|
||||
>
|
||||
{selectedRack.name}
|
||||
</div>
|
||||
<div style={{ fontSize: '12px', color: '#64748b', marginTop: 2 }}>
|
||||
ID: {selectedRack.rackId}
|
||||
<div style={{
|
||||
fontSize: '12px',
|
||||
color: 'rgba(148, 163, 184, 0.8)',
|
||||
marginTop: 4,
|
||||
fontFamily: 'monospace',
|
||||
letterSpacing: '0.5px',
|
||||
}}>
|
||||
#{selectedRack.rackId}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -754,16 +937,26 @@ const Rack3DVisualization = () => {
|
||||
e.stopPropagation();
|
||||
setIsRackInfoCollapsed(!isRackInfoCollapsed);
|
||||
}}
|
||||
style={{ color: '#94a3b8', marginLeft: isRackInfoCollapsed ? 8 : 0 }}
|
||||
style={{
|
||||
color: 'rgba(148, 163, 184, 0.7)',
|
||||
marginLeft: isRackInfoCollapsed ? 0 : 8,
|
||||
width: isRackInfoCollapsed ? 44 : 32,
|
||||
height: isRackInfoCollapsed ? 44 : 32,
|
||||
borderRadius: isRackInfoCollapsed ? 12 : 8,
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
transition: 'all 0.3s',
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Content Area - Collapsible */}
|
||||
<div
|
||||
style={{
|
||||
maxHeight: isRackInfoCollapsed ? 0 : '500px',
|
||||
maxHeight: isRackInfoCollapsed ? 0 : '600px',
|
||||
opacity: isRackInfoCollapsed ? 0 : 1,
|
||||
transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)',
|
||||
transition: 'all 0.4s cubic-bezier(0.4, 0, 0.2, 1)',
|
||||
overflow: 'hidden',
|
||||
}}
|
||||
>
|
||||
@@ -771,87 +964,171 @@ const Rack3DVisualization = () => {
|
||||
<div
|
||||
style={{
|
||||
display: 'grid',
|
||||
gridTemplateColumns: '1fr 1fr',
|
||||
gap: 12,
|
||||
gridTemplateColumns: 'repeat(3, 1fr)',
|
||||
gap: 10,
|
||||
marginBottom: 16,
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
background: 'rgba(241, 245, 249, 0.6)',
|
||||
padding: '10px',
|
||||
borderRadius: '10px',
|
||||
background: 'rgba(59, 130, 246, 0.1)',
|
||||
border: '1px solid rgba(59, 130, 246, 0.2)',
|
||||
padding: '12px 10px',
|
||||
borderRadius: '12px',
|
||||
textAlign: 'center',
|
||||
}}
|
||||
>
|
||||
<div style={{ fontSize: '12px', color: '#64748b', marginBottom: 2 }}>
|
||||
总高度
|
||||
</div>
|
||||
<div style={{ fontSize: '18px', fontWeight: 600, color: '#0f172a' }}>
|
||||
<div style={{ fontSize: '22px', fontWeight: 700, color: '#60a5fa', lineHeight: 1 }}>
|
||||
{selectedRack.height}
|
||||
<span style={{ fontSize: '12px', fontWeight: 400, marginLeft: 2 }}>
|
||||
U
|
||||
</span>
|
||||
</div>
|
||||
<div style={{ fontSize: '10px', color: 'rgba(148, 163, 184, 0.7)', marginTop: 4, fontWeight: 500 }}>
|
||||
总高度
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
background: 'rgba(241, 245, 249, 0.6)',
|
||||
padding: '10px',
|
||||
borderRadius: '10px',
|
||||
background: 'rgba(16, 185, 129, 0.1)',
|
||||
border: '1px solid rgba(16, 185, 129, 0.2)',
|
||||
padding: '12px 10px',
|
||||
borderRadius: '12px',
|
||||
textAlign: 'center',
|
||||
}}
|
||||
>
|
||||
<div style={{ fontSize: '12px', color: '#64748b', marginBottom: 2 }}>
|
||||
<div style={{ fontSize: '22px', fontWeight: 700, color: '#34d399', lineHeight: 1 }}>
|
||||
{devices.length}
|
||||
</div>
|
||||
<div style={{ fontSize: '10px', color: 'rgba(148, 163, 184, 0.7)', marginTop: 4, fontWeight: 500 }}>
|
||||
设备数
|
||||
</div>
|
||||
<div style={{ fontSize: '18px', fontWeight: 600, color: '#3b82f6' }}>
|
||||
{devices.length}
|
||||
<span style={{ fontSize: '12px', fontWeight: 400, marginLeft: 2 }}>
|
||||
台
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
background: 'rgba(245, 158, 11, 0.1)',
|
||||
border: '1px solid rgba(245, 158, 11, 0.2)',
|
||||
padding: '12px 10px',
|
||||
borderRadius: '12px',
|
||||
textAlign: 'center',
|
||||
}}
|
||||
>
|
||||
<div style={{ fontSize: '22px', fontWeight: 700, color: '#fbbf24', lineHeight: 1 }}>
|
||||
{Math.round((devices.length / selectedRack.height) * 100)}%
|
||||
</div>
|
||||
<div style={{ fontSize: '10px', color: 'rgba(148, 163, 184, 0.7)', marginTop: 4, fontWeight: 500 }}>
|
||||
负载率
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Status Indicators */}
|
||||
<div
|
||||
style={{
|
||||
background: 'rgba(255, 255, 255, 0.03)',
|
||||
border: '1px solid rgba(255, 255, 255, 0.06)',
|
||||
borderRadius: '12px',
|
||||
padding: '14px',
|
||||
marginBottom: 16,
|
||||
}}
|
||||
>
|
||||
<div style={{ fontSize: '11px', color: 'rgba(148, 163, 184, 0.6)', marginBottom: 12, fontWeight: 600, letterSpacing: '0.5px', textTransform: 'uppercase' }}>
|
||||
资源监控
|
||||
</div>
|
||||
{[
|
||||
{
|
||||
label: 'U位使用',
|
||||
value: `${rackStats.usedU}U / ${selectedRack.height}U`,
|
||||
status: rackStats.usagePercent > 80 ? 'warning' : 'normal',
|
||||
icon: '📊',
|
||||
subValue: `剩余 ${rackStats.availableU}U`,
|
||||
},
|
||||
{
|
||||
label: '总功率',
|
||||
value: `${rackStats.totalPower.toFixed(1)}kW`,
|
||||
status: 'normal',
|
||||
icon: '⚡',
|
||||
subValue: '当前负载',
|
||||
},
|
||||
{
|
||||
label: '设备数',
|
||||
value: `${devices.length} 台`,
|
||||
status: 'normal',
|
||||
icon: '🖥️',
|
||||
subValue: `负载率 ${rackStats.usagePercent}%`,
|
||||
},
|
||||
].map((item, i) => (
|
||||
<div key={i} style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: i < 2 ? 12 : 0 }}>
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
|
||||
<span style={{ fontSize: 16 }}>{item.icon}</span>
|
||||
<div>
|
||||
<div style={{ fontSize: '13px', color: 'rgba(226, 232, 240, 0.9)', fontWeight: 500 }}>{item.label}</div>
|
||||
<div style={{ fontSize: '11px', color: 'rgba(148, 163, 184, 0.6)', marginTop: 2 }}>{item.subValue}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
|
||||
<span style={{ fontSize: '14px', fontWeight: 700, color: '#f8fafc' }}>{item.value}</span>
|
||||
<div style={{
|
||||
width: 8,
|
||||
height: 8,
|
||||
borderRadius: '50%',
|
||||
background: item.status === 'normal' ? '#10b981' : '#f59e0b',
|
||||
boxShadow: `0 0 8px ${item.status === 'normal' ? 'rgba(16, 185, 129, 0.6)' : 'rgba(245, 158, 11, 0.6)'}`,
|
||||
}} />
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Guide Section */}
|
||||
<div
|
||||
style={{
|
||||
marginTop: 16,
|
||||
paddingTop: 16,
|
||||
borderTop: '1px solid rgba(0,0,0,0.06)',
|
||||
background: 'rgba(59, 130, 246, 0.05)',
|
||||
border: '1px solid rgba(59, 130, 246, 0.1)',
|
||||
borderRadius: '12px',
|
||||
padding: '14px',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
fontSize: '12px',
|
||||
fontSize: '11px',
|
||||
fontWeight: 600,
|
||||
color: '#94a3b8',
|
||||
marginBottom: 8,
|
||||
color: 'rgba(148, 163, 184, 0.6)',
|
||||
marginBottom: 10,
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
letterSpacing: '0.5px',
|
||||
textTransform: 'uppercase',
|
||||
}}
|
||||
>
|
||||
<InfoCircleOutlined style={{ marginRight: 6 }} /> 操作指南
|
||||
<InfoCircleOutlined style={{ marginRight: 6, fontSize: 12 }} /> 操作指南
|
||||
</div>
|
||||
<div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
|
||||
<div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
|
||||
{[
|
||||
{ icon: '🖱️', text: '左键旋转视图' },
|
||||
{ icon: '🔍', text: '滚轮缩放视图' },
|
||||
{ icon: '👆', text: '点击设备查看详情' },
|
||||
{ icon: '🖱️', text: '左键旋转视图', color: '#3b82f6' },
|
||||
{ icon: '🔍', text: '滚轮缩放视图', color: '#8b5cf6' },
|
||||
{ icon: '👆', text: '点击设备查看详情', color: '#10b981' },
|
||||
].map((item, i) => (
|
||||
<div
|
||||
key={i}
|
||||
style={{
|
||||
fontSize: '12px',
|
||||
color: '#475569',
|
||||
color: 'rgba(226, 232, 240, 0.8)',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
background: 'rgba(255,255,255,0.5)',
|
||||
padding: '4px 8px',
|
||||
borderRadius: '6px',
|
||||
gap: 10,
|
||||
padding: '8px 10px',
|
||||
background: 'rgba(255, 255, 255, 0.02)',
|
||||
borderRadius: '8px',
|
||||
transition: 'all 0.2s',
|
||||
}}
|
||||
>
|
||||
<span style={{ marginRight: 8, opacity: 0.8 }}>{item.icon}</span>
|
||||
{item.text}
|
||||
<span style={{ fontSize: 14 }}>{item.icon}</span>
|
||||
<span style={{ flex: 1 }}>{item.text}</span>
|
||||
<div style={{
|
||||
width: 4,
|
||||
height: 4,
|
||||
borderRadius: '50%',
|
||||
background: item.color,
|
||||
boxShadow: `0 0 6px ${item.color}`,
|
||||
}} />
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user