样式修改
This commit is contained in:
1
package-lock.json
generated
1
package-lock.json
generated
@@ -10,6 +10,7 @@
|
||||
"dependencies": {
|
||||
"@ant-design/charts": "^2.6.7",
|
||||
"@ant-design/icons": "^6.2.2",
|
||||
"@ant-design/plots": "^2.6.8",
|
||||
"@reduxjs/toolkit": "^2.11.2",
|
||||
"@tailwindcss/vite": "^4.1.14",
|
||||
"@vitejs/plugin-react": "^5.0.4",
|
||||
|
||||
@@ -13,6 +13,7 @@
|
||||
"dependencies": {
|
||||
"@ant-design/charts": "^2.6.7",
|
||||
"@ant-design/icons": "^6.2.2",
|
||||
"@ant-design/plots": "^2.6.8",
|
||||
"@reduxjs/toolkit": "^2.11.2",
|
||||
"@tailwindcss/vite": "^4.1.14",
|
||||
"@vitejs/plugin-react": "^5.0.4",
|
||||
|
||||
@@ -195,7 +195,7 @@ export default function CleanOptimizationPage() {
|
||||
<div>
|
||||
<Text type="secondary" style={{ fontSize: 13 }}>上次清洗时间</Text>
|
||||
<div style={{ margin: '4px 0' }}>
|
||||
<Text style={{ fontSize: 20, fontWeight: 'bold' }}>2025-05-12</Text>
|
||||
<Text style={{ fontSize: 24, fontWeight: 'bold' }}>2025-05-12</Text>
|
||||
</div>
|
||||
<div style={{ fontSize: 12 }}>
|
||||
<Text type="secondary">距今 12 天</Text>
|
||||
|
||||
@@ -3,19 +3,19 @@ import { Card, Row, Col, Statistic, Button, Space, Tag, Typography } from 'antd'
|
||||
import {
|
||||
CloudOutlined, ThunderboltOutlined, BarChartOutlined,
|
||||
RiseOutlined, BellOutlined, WalletOutlined,
|
||||
MinusOutlined, PlusOutlined, SyncOutlined
|
||||
MinusOutlined, PlusOutlined, SyncOutlined,
|
||||
MoneyCollectOutlined,
|
||||
DashboardOutlined
|
||||
} from '@ant-design/icons';
|
||||
import { Line, Bar, Pie } from '@ant-design/charts';
|
||||
import { getWeatherData } from '../lib/utils';
|
||||
|
||||
|
||||
|
||||
const { Text } = Typography;
|
||||
|
||||
|
||||
export default function StationDashboard() {
|
||||
// ==============================================
|
||||
// 🔥 接入真实天气状态（从你第一个组件复制过来）
|
||||
// ==============================================
|
||||
const [weatherdata, setWeatherData] = useState({
|
||||
province: "江苏省",
|
||||
city: "南通市",
|
||||
@@ -45,14 +45,14 @@ export default function StationDashboard() {
|
||||
|
||||
// 模拟数据
|
||||
const stationOverview = {
|
||||
todayEnergy: 45.9,
|
||||
currentPower: 66811.3,
|
||||
systemEfficiency: 66.8,
|
||||
todayEnergy: 4752.0,
|
||||
currentPower: 812.6,
|
||||
systemEfficiency: 82.6,
|
||||
yesterdayEfficiency: 81.3,
|
||||
systemAvailability: 92.31,
|
||||
systemAvailability: 99.35,
|
||||
onlineDevices: "12/13",
|
||||
alarmCount: 5,
|
||||
costSaved: 8278
|
||||
alarmCount: 8,
|
||||
costSaved: 36540
|
||||
};
|
||||
|
||||
const realtimeAlerts = [
|
||||
@@ -260,46 +260,174 @@ export default function StationDashboard() {
|
||||
overflow: 'hidden'
|
||||
}}
|
||||
>
|
||||
{/* 今日发电量 */}
|
||||
<Col flex="1 1 16.666%">
|
||||
<Card bordered={false} style={cardStyle}>
|
||||
<Statistic title={<span style={{ color: '#000', fontSize: 14, fontWeight: 800 }}>今日发电量</span>}
|
||||
value={stationOverview.todayEnergy} precision={1} valueStyle={{ color: '#1890ff', fontSize: 24, fontWeight: 800 }} prefix={<CloudOutlined style={{ fontSize: 20 }} />} suffix="kWh" />
|
||||
<div style={{ fontSize: 12, color: '#999', marginTop: 4 }}>日发电实时累计</div>
|
||||
<Card bordered={false} style={cardStyle} bodyStyle={{ padding: '16px' }}>
|
||||
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
|
||||
<div>
|
||||
<div style={{ color: '#000', fontSize: 14, fontWeight: 600, marginBottom: 8 }}>今日发电量</div>
|
||||
<div style={{ display: 'flex', alignItems: 'baseline' }}>
|
||||
<span style={{ color: '#00B42A', fontSize: 24, fontWeight: 800 }}>4,752</span>
|
||||
<span style={{ color: '#666', fontSize: 14, marginLeft: 4 }}>kWh</span>
|
||||
</div>
|
||||
<div style={{ fontSize: 12, color: '#999', marginTop: 8 }}>日目标 5,000 kWh</div>
|
||||
</div>
|
||||
<div style={{
|
||||
width: 64,
|
||||
height: 64,
|
||||
background: '#E8FFEA',
|
||||
borderRadius: '50%',
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
boxShadow: '0 2px 8px rgba(0, 180, 42, 0.1)'
|
||||
}}>
|
||||
<ThunderboltOutlined style={{ fontSize: 32, color: '#00B42A' }} />
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
</Col>
|
||||
|
||||
{/* 当前功率 */}
|
||||
<Col flex="1 1 16.666%">
|
||||
<Card bordered={false} style={cardStyle}>
|
||||
<Statistic title={<span style={{ color: '#000', fontSize: 14, fontWeight: 800 }}>当前功率</span>}
|
||||
value={stationOverview.currentPower} precision={1} valueStyle={{ color: '#1890ff', fontSize: 24, fontWeight: 800 }} prefix={<ThunderboltOutlined style={{ fontSize: 20 }} />} suffix="kW" />
|
||||
<div style={{ fontSize: 12, color: '#999', marginTop: 4 }}>装机容量 100.0 MWp</div>
|
||||
<Card bordered={false} style={cardStyle} bodyStyle={{ padding: '16px' }}>
|
||||
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
|
||||
<div>
|
||||
<div style={{ color: '#000', fontSize: 14, fontWeight: 600, marginBottom: 8 }}>当前功率</div>
|
||||
<div style={{ display: 'flex', alignItems: 'baseline' }}>
|
||||
<span style={{ color: '#165DFF', fontSize: 24, fontWeight: 800 }}>812.6</span>
|
||||
<span style={{ color: '#165DFF', fontSize: 14, marginLeft: 4 }}>kW</span>
|
||||
</div>
|
||||
<div style={{ fontSize: 12, color: '#999', marginTop: 8 }}>装机容量 1,000 kWp</div>
|
||||
</div>
|
||||
<div style={{
|
||||
width: 64,
|
||||
height: 64,
|
||||
background: '#E8F3FF',
|
||||
borderRadius: '50%',
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
boxShadow: '0 2px 8px rgba(22, 93, 255, 0.1)'
|
||||
}}>
|
||||
<DashboardOutlined style={{ fontSize: 32, color: '#165DFF' }} />
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
</Col>
|
||||
|
||||
{/* Performance Ratio(PR) */}
|
||||
<Col flex="1 1 16.666%">
|
||||
<Card bordered={false} style={cardStyle}>
|
||||
<Statistic title={<span style={{ color: '#000', fontSize: 14, fontWeight: 800 }}>系统效率 PR</span>}
|
||||
value={stationOverview.systemEfficiency} precision={1} valueStyle={{ color: '#52c41a', fontSize: 24, fontWeight: 800 }} prefix={<BarChartOutlined style={{ fontSize: 20 }} />} suffix="%" />
|
||||
<div style={{ fontSize: 12, color: '#999', marginTop: 4 }}>昨日 {stationOverview.yesterdayEfficiency}% +1.3%</div>
|
||||
<Card bordered={false} style={cardStyle} bodyStyle={{ padding: '16px' }}>
|
||||
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
|
||||
<div>
|
||||
<div style={{ color: '#000', fontSize: 14, fontWeight: 600, marginBottom: 8 }}>Performance Ratio(PR)</div>
|
||||
<div style={{ display: 'flex', alignItems: 'baseline' }}>
|
||||
<span style={{ color: '#00B42A', fontSize: 24, fontWeight: 800 }}>82.6%</span>
|
||||
</div>
|
||||
<div style={{ fontSize: 12, color: '#999', marginTop: 8 }}>
|
||||
昨日 81.3% 环比 <span style={{ color: '#00B42A' }}>↑1.3%</span>
|
||||
</div>
|
||||
</div>
|
||||
<div style={{
|
||||
width: 64,
|
||||
height: 64,
|
||||
background: '#E8FFEA',
|
||||
borderRadius: '50%',
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
boxShadow: '0 2px 8px rgba(0, 180, 42, 0.1)'
|
||||
}}>
|
||||
<BarChartOutlined style={{ fontSize: 32, color: '#00B42A' }} />
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
</Col>
|
||||
|
||||
{/* 系统可用率 */}
|
||||
<Col flex="1 1 16.666%">
|
||||
<Card bordered={false} style={cardStyle}>
|
||||
<Statistic title={<span style={{ color: '#000', fontSize: 14, fontWeight: 800 }}>系统可用率</span>}
|
||||
value={stationOverview.systemAvailability} precision={2} valueStyle={{ color: '#faad14', fontSize: 24, fontWeight: 800 }} prefix={<RiseOutlined style={{ fontSize: 20 }} />} suffix="%" />
|
||||
<div style={{ fontSize: 12, color: '#999', marginTop: 4 }}>在线设备 {stationOverview.onlineDevices}</div>
|
||||
<Card bordered={false} style={cardStyle} bodyStyle={{ padding: '16px' }}>
|
||||
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
|
||||
<div>
|
||||
<div style={{ color: '#000', fontSize: 14, fontWeight: 600, marginBottom: 8 }}>系统可用率</div>
|
||||
<div style={{ display: 'flex', alignItems: 'baseline' }}>
|
||||
<span style={{ color: '#165DFF', fontSize: 24, fontWeight: 800 }}>99.35%</span>
|
||||
</div>
|
||||
<div style={{ fontSize: 12, color: '#999', marginTop: 8 }}>
|
||||
昨日 99.12% 环比 <span style={{ color: '#00B42A' }}>↑0.23%</span>
|
||||
</div>
|
||||
</div>
|
||||
<div style={{
|
||||
width: 64,
|
||||
height: 64,
|
||||
background: '#E8F3FF',
|
||||
borderRadius: '50%',
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
boxShadow: '0 2px 8px rgba(22, 93, 255, 0.1)'
|
||||
}}>
|
||||
<RiseOutlined style={{ fontSize: 32, color: '#165DFF' }} />
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</Card>
|
||||
</Col>
|
||||
|
||||
{/* 告警数量 */}
|
||||
<Col flex="1 1 16.666%">
|
||||
<Card bordered={false} style={cardStyle}>
|
||||
<Statistic title={<span style={{ color: '#000', fontSize: 14, fontWeight: 800 }}>告警数量</span>}
|
||||
value={stationOverview.alarmCount} valueStyle={{ color: '#ff4d4f', fontSize: 24, fontWeight: 800 }} prefix={<BellOutlined style={{ fontSize: 20 }} />} suffix="条" />
|
||||
<div style={{ fontSize: 12, color: '#999', marginTop: 4 }}>今日新增 0 条</div>
|
||||
<Card bordered={false} style={cardStyle} bodyStyle={{ padding: '16px' }}>
|
||||
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
|
||||
<div>
|
||||
<div style={{ color: '#000', fontSize: 14, fontWeight: 600, marginBottom: 8 }}>告警数量</div>
|
||||
<div style={{ display: 'flex', alignItems: 'baseline' }}>
|
||||
<span style={{ color: '#F53F3F', fontSize: 24, fontWeight: 800 }}>8</span>
|
||||
</div>
|
||||
<div style={{ fontSize: 12, color: '#999', marginTop: 8 }}>
|
||||
未处理 <span style={{ color: '#F53F3F' }}>5</span> 已处理 <span style={{ color: '#666' }}>3</span>
|
||||
</div>
|
||||
</div>
|
||||
<div style={{
|
||||
width: 64,
|
||||
height: 64,
|
||||
background: '#FFF1F0',
|
||||
borderRadius: '50%',
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
boxShadow: '0 2px 8px rgba(245, 63, 63, 0.1)'
|
||||
}}>
|
||||
<BellOutlined style={{ fontSize: 32, color: '#F53F3F' }} />
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
</Col>
|
||||
|
||||
{/* 节省运维成本 */}
|
||||
<Col flex="1 1 16.666%">
|
||||
<Card bordered={false} style={cardStyle}>
|
||||
<Statistic title={<span style={{ color: '#000', fontSize: 14, fontWeight: 800 }}>节省运维成本</span>}
|
||||
value={stationOverview.costSaved} valueStyle={{ color: '#1890ff', fontSize: 24, fontWeight: 800 }} prefix="¥" />
|
||||
<div style={{ fontSize: 12, color: '#999', marginTop: 4 }}>清洗收益 + 工单闭环估算</div>
|
||||
<Card bordered={false} style={cardStyle} bodyStyle={{ padding: '16px' }}>
|
||||
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
|
||||
<div>
|
||||
<div style={{ color: '#000', fontSize: 14, fontWeight: 600, marginBottom: 8 }}>节省运维成本</div>
|
||||
<div style={{ display: 'flex', alignItems: 'baseline' }}>
|
||||
<span style={{ color: '#FF7D00', fontSize: 24, fontWeight: 800 }}>¥ 36,540</span>
|
||||
</div>
|
||||
<div style={{ fontSize: 12, color: '#999', marginTop: 8 }}>本月累计节省</div>
|
||||
</div>
|
||||
<div style={{
|
||||
width: 64,
|
||||
height: 64,
|
||||
background: '#FFF7E8',
|
||||
borderRadius: '50%',
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
boxShadow: '0 2px 8px rgba(255, 125, 0, 0.1)'
|
||||
}}>
|
||||
<MoneyCollectOutlined style={{ fontSize: 32, color: '#FF7D00' }} />
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
</Col>
|
||||
</Row>
|
||||
|
||||
Reference in New Issue
Block a user