+ {t('header.brandName')} }
+
+ setCollapsed(!collapsed)}>
+ {collapsed ?
+
+
+
+ {t('header.alarmNotification')}
+ {alarmCount > 0 && {alarmCount} {t('header.activeAlarms')} }
+
}
+ content={
+
+ {darkMode ?
+
+ {recentAlarms.length === 0 ? (
+
+ }
+ >
+ - {
+ const sev = SEVERITY_CONFIG[alarm.severity] || SEVERITY_CONFIG.info;
+ return (
+
{alarm.message || alarm.title}
+ {alarm.triggered_at}
+ }
+ />
+
+ {user?.full_name || user?.username || '用户'}
+
+
+
+ {loading ? (
+ showDetail(d)}
+ styles={{ body: { padding: 16, textAlign: 'center' } }}
+ >
+ {d.device_type}
+
+ {d.status === 'healthy' ? '健康' : d.status === 'warning' ? '警告' : '危险'}
+ {trendIcons[d.trend]} {d.trend === 'improving' ? '改善' : d.trend === 'degrading' ? '下降' : '稳定'}
+
+
+
+ ))}
+
+
+ setDetailDevice(null)}
+ width={720}
+ >
+ {detailDevice && (
+ <>
+
+ {detailDevice.device_name}
+ {detailDevice.device_type}
+
+
+ {detailDevice.health_score}
+
+
+
+
+ {detailDevice.status === 'healthy' ? '健康' : detailDevice.status === 'warning' ? '警告' : '危险'}
+
+
+
+ {trendIcons[detailDevice.trend]} {detailDevice.trend === 'improving' ? '持续改善' : detailDevice.trend === 'degrading' ? '持续下降' : '保持稳定'}
+
+
+
+
+
+ {radarOption &&
+
+
+ {historyOption ? (
+
+
+
+
+ )}
+
+
+ );
+}
+
+// ── Tab: Anomaly Center ────────────────────────────────────────────
+
+function AnomalyCenter() {
+ const [anomalies, setAnomalies] = useState
+
+
+ {d.device_name}
+
+
+
+ `共 ${t} 条`,
+ }}
+ size="small"
+ />
+
+ );
+}
+
+// ── Tab: Diagnostic Panel ──────────────────────────────────────────
+
+function DiagnosticPanel() {
+ const [reports, setReports] = useState
+
+
+ } onClick={handleScan}>扫描异常
+
+
+ {/* Controls */}
+
+
+ dates && setDateRange(dates as [Dayjs, Dayjs])}
+ />
+
+
+ } onClick={handleExport}>导出
+
+
+
+ {/* KPI Cards */}
+
+
+
+
+
+
+
+
+ = 0 ?
+
+
+ = 0 ?
+
+
+
+ {/* Charts Row */}
+
+
+
+
+
+
+
+
+
+ {/* Device cost bar chart */}
+
+
+
+ );
+}
diff --git a/frontend/src/pages/Analysis/LossAnalysis.tsx b/frontend/src/pages/Analysis/LossAnalysis.tsx
new file mode 100644
index 0000000..180264f
--- /dev/null
+++ b/frontend/src/pages/Analysis/LossAnalysis.tsx
@@ -0,0 +1,107 @@
+import { useEffect, useState } from 'react';
+import { Card, Table, DatePicker, Select, Space, Tag, message } from 'antd';
+import ReactECharts from 'echarts-for-react';
+import dayjs, { type Dayjs } from 'dayjs';
+import { getEnergyLoss } from '../../services/api';
+
+const { RangePicker } = DatePicker;
+
+interface LossItem {
+ group_name: string;
+ parent_consumption: number;
+ children_consumption: number;
+ loss: number;
+ loss_rate_pct: number;
+}
+
+export default function LossAnalysis() {
+ const [data, setData] = useState
+
+
+ 日期范围:
+ dates && setDateRange(dates as [Dayjs, Dayjs])} />
+ 能源类型:
+
+
+
+
+
+
+
+
+
+
+
+ );
+}
diff --git a/frontend/src/pages/Analysis/MomAnalysis.tsx b/frontend/src/pages/Analysis/MomAnalysis.tsx
new file mode 100644
index 0000000..236ec6c
--- /dev/null
+++ b/frontend/src/pages/Analysis/MomAnalysis.tsx
@@ -0,0 +1,130 @@
+import { useEffect, useState } from 'react';
+import { Card, Row, Col, Select, Space, Statistic, message } from 'antd';
+import { ArrowUpOutlined, ArrowDownOutlined } from '@ant-design/icons';
+import ReactECharts from 'echarts-for-react';
+import { getEnergyMom } from '../../services/api';
+
+interface MomItem {
+ label: string;
+ current_period: number;
+ previous_period: number;
+ change_pct: number;
+}
+
+interface MomData {
+ items: MomItem[];
+ total_current: number;
+ total_previous: number;
+ total_change_pct: number;
+}
+
+export default function MomAnalysis() {
+ const [data, setData] = useState
+
+
+ 对比周期:
+
+ 能源类型:
+
+
+
+
+
+
+
+
+
+
+
+
+ = 0 ?
+
+
+
+
+ {data &&
+
+ );
+}
diff --git a/frontend/src/pages/Analysis/SubitemAnalysis.tsx b/frontend/src/pages/Analysis/SubitemAnalysis.tsx
new file mode 100644
index 0000000..a01c86f
--- /dev/null
+++ b/frontend/src/pages/Analysis/SubitemAnalysis.tsx
@@ -0,0 +1,222 @@
+import { useEffect, useState } from 'react';
+import { Card, Row, Col, DatePicker, Checkbox, Table, message } from 'antd';
+import ReactECharts from 'echarts-for-react';
+import dayjs, { type Dayjs } from 'dayjs';
+import api from '../../services/api';
+
+const { RangePicker } = DatePicker;
+
+interface Category {
+ id: number;
+ name: string;
+ code: string;
+ color: string;
+ children?: Category[];
+}
+
+interface ByCategory {
+ id: number;
+ name: string;
+ code: string;
+ color: string;
+ consumption: number;
+ percentage: number;
+}
+
+interface RankingItem {
+ name: string;
+ color: string;
+ consumption: number;
+}
+
+interface TrendItem {
+ date: string;
+ category: string;
+ color: string;
+ consumption: number;
+}
+
+export default function SubitemAnalysis() {
+ const [categories, setCategories] = useState
+
+
+ dates && setDateRange(dates as [Dayjs, Dayjs])}
+ />
+
+ setSelectedCodes(vals as string[])}
+ options={flatCategories.map(c => ({ label: c.name, value: c.code }))}
+ />
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+}
diff --git a/frontend/src/pages/Analysis/YoyAnalysis.tsx b/frontend/src/pages/Analysis/YoyAnalysis.tsx
new file mode 100644
index 0000000..8d16a37
--- /dev/null
+++ b/frontend/src/pages/Analysis/YoyAnalysis.tsx
@@ -0,0 +1,108 @@
+import { useEffect, useState } from 'react';
+import { Card, Table, DatePicker, Select, Space, message } from 'antd';
+import { ArrowUpOutlined, ArrowDownOutlined } from '@ant-design/icons';
+import ReactECharts from 'echarts-for-react';
+import dayjs from 'dayjs';
+import { getEnergyYoy } from '../../services/api';
+
+interface YoyItem {
+ month: number;
+ current_year: number;
+ previous_year: number;
+ change_pct: number;
+}
+
+export default function YoyAnalysis() {
+ const [data, setData] = useState
+
+
+ 年份:
+
+ 能源类型:
+
+
+
+
+
+
+
+
+
+
+
+ );
+}
diff --git a/frontend/src/pages/Analysis/index.tsx b/frontend/src/pages/Analysis/index.tsx
new file mode 100644
index 0000000..b24a1ca
--- /dev/null
+++ b/frontend/src/pages/Analysis/index.tsx
@@ -0,0 +1,336 @@
+import { useEffect, useState } from 'react';
+import { Card, Row, Col, DatePicker, Select, Statistic, Table, Button, Space, message, Tabs } from 'antd';
+import { ArrowUpOutlined, ArrowDownOutlined, DownloadOutlined, SwapOutlined } from '@ant-design/icons';
+import ReactECharts from 'echarts-for-react';
+import dayjs, { type Dayjs } from 'dayjs';
+import { getEnergyHistory, getEnergyComparison, getEnergyDailySummary, exportEnergyData } from '../../services/api';
+import LossAnalysis from './LossAnalysis';
+import YoyAnalysis from './YoyAnalysis';
+import MomAnalysis from './MomAnalysis';
+import CostAnalysis from './CostAnalysis';
+import SubitemAnalysis from './SubitemAnalysis';
+
+const { RangePicker } = DatePicker;
+
+function ComparisonView() {
+ const [range1, setRange1] = useState<[Dayjs, Dayjs]>([
+ dayjs().subtract(30, 'day'), dayjs(),
+ ]);
+ const [range2, setRange2] = useState<[Dayjs, Dayjs]>([
+ dayjs().subtract(60, 'day'), dayjs().subtract(30, 'day'),
+ ]);
+ const [data1, setData1] = useState{label}
+ 时段一
+ {v1.toFixed(precision)}
+ {unit}
+
+ 时段二
+ {v2.toFixed(precision)}
+ {unit}
+
+ 0 ? '#f5222d' : '#666',
+ }}>
+ {change > 0 ?
+
+
+
+ 时段一:
+ dates && setRange1(dates as [Dayjs, Dayjs])}
+ />
+ 时段二:
+ dates && setRange2(dates as [Dayjs, Dayjs])}
+ />
+ } loading={loading} onClick={loadComparisonData}>
+ 对比
+
+
+
+
+
+ {renderMetricCard('总用电量', m1.totalConsumption, m2.totalConsumption, 'kWh')}
+ {renderMetricCard('峰值功率', m1.peakPower, m2.peakPower, 'kW')}
+ {renderMetricCard('平均负荷', m1.avgLoad, m2.avgLoad, 'kW')}
+ {renderMetricCard('碳排放', m1.carbonEmission, m2.carbonEmission, 'kg', 2)}
+
+
+
+
+
+ );
+}
+
+export default function Analysis() {
+ const [historyData, setHistoryData] = useState
+
+
+ } loading={exporting} onClick={() => handleExport('csv')}>
+ 导出CSV
+
+ } loading={exporting} onClick={() => handleExport('xlsx')}>
+ 导出Excel
+
+
+
+
+
+
+
+
+
+ = 0 ?
+
+
+ = 0 ?
+
+
+
+
+
+
+
+ );
+
+ return (
+
+
+ );
+}
diff --git a/frontend/src/pages/BigScreen/components/AlarmCard.tsx b/frontend/src/pages/BigScreen/components/AlarmCard.tsx
new file mode 100644
index 0000000..53faf4a
--- /dev/null
+++ b/frontend/src/pages/BigScreen/components/AlarmCard.tsx
@@ -0,0 +1,91 @@
+import ReactECharts from 'echarts-for-react';
+import styles from '../styles.module.css';
+import AnimatedNumber from './AnimatedNumber';
+
+interface Props {
+ alarmEvents: any[];
+ alarmStats: any;
+}
+
+export default function AlarmCard({ alarmEvents, alarmStats }: Props) {
+ const activeCount = alarmStats?.active_count ?? 0;
+ const weeklyTrend = alarmStats?.weekly_trend ?? [3, 5, 2, 8, 4, 6, 1];
+ const weekDays = ['周一', '周二', '周三', '周四', '周五', '周六', '周日'];
+
+ const trendOption = {
+ grid: { left: 30, right: 8, top: 8, bottom: 20 },
+ xAxis: {
+ type: 'category' as const,
+ data: weekDays,
+ axisLine: { lineStyle: { color: 'rgba(0,212,255,0.2)' } },
+ axisLabel: { fontSize: 10, color: 'rgba(224,232,240,0.5)' },
+ axisTick: { show: false },
+ },
+ yAxis: {
+ type: 'value' as const,
+ splitLine: { lineStyle: { color: 'rgba(0,212,255,0.08)' } },
+ axisLabel: { fontSize: 10, color: 'rgba(224,232,240,0.4)' },
+ },
+ series: [{
+ type: 'bar',
+ data: weeklyTrend,
+ itemStyle: {
+ color: {
+ type: 'linear',
+ x: 0, y: 0, x2: 0, y2: 1,
+ colorStops: [
+ { offset: 0, color: '#ff8c00' },
+ { offset: 1, color: 'rgba(255, 140, 0, 0.2)' },
+ ],
+ } as any,
+ borderRadius: [2, 2, 0, 0],
+ },
+ barWidth: '50%',
+ }],
+ tooltip: { trigger: 'axis' as const, backgroundColor: 'rgba(6,30,62,0.9)', borderColor: 'rgba(0,212,255,0.3)', textStyle: { color: '#e0e8f0', fontSize: 12 } },
+ };
+
+ const getSeverityClass = (severity: string) => {
+ if (severity === 'critical' || severity === 'high') return styles.alarmSeverityCritical;
+ if (severity === 'warning' || severity === 'medium') return styles.alarmSeverityWarning;
+ return styles.alarmSeverityInfo;
+ };
+
+ const formatTime = (ts: string) => {
+ if (!ts) return '';
+ const d = new Date(ts);
+ return `${d.getMonth() + 1}/${d.getDate()} ${d.getHours().toString().padStart(2, '0')}:${d.getMinutes().toString().padStart(2, '0')}`;
+ };
+
+ return (
+
+
+ );
+}
diff --git a/frontend/src/pages/BigScreen/components/AnimatedNumber.tsx b/frontend/src/pages/BigScreen/components/AnimatedNumber.tsx
new file mode 100644
index 0000000..82605a0
--- /dev/null
+++ b/frontend/src/pages/BigScreen/components/AnimatedNumber.tsx
@@ -0,0 +1,38 @@
+import { useEffect, useRef, useState } from 'react';
+
+interface Props {
+ value: number;
+ duration?: number;
+ decimals?: number;
+ className?: string;
+}
+
+export default function AnimatedNumber({ value, duration = 1500, decimals = 0, className }: Props) {
+ const [display, setDisplay] = useState(0);
+ const rafRef = useRef告警信息
+
+
+
+
+
+ 活跃告警
+
+
+
+
+ {(alarmEvents ?? []).slice(0, 5).map((alarm: any, idx: number) => (
+
+
+
+ {alarm.message ?? alarm.description ?? '未知告警'}
+ {formatTime(alarm.triggered_at ?? alarm.created_at)}
+
+ ))}
+ {(!alarmEvents || alarmEvents.length === 0) && (
+ 暂无告警
+ )}
+
+
+
+
+ );
+}
diff --git a/frontend/src/pages/BigScreen/components/EnergyFlowDiagram.tsx b/frontend/src/pages/BigScreen/components/EnergyFlowDiagram.tsx
new file mode 100644
index 0000000..f7416b5
--- /dev/null
+++ b/frontend/src/pages/BigScreen/components/EnergyFlowDiagram.tsx
@@ -0,0 +1,190 @@
+import { useEffect, useRef } from 'react';
+import styles from '../styles.module.css';
+
+interface Props {
+ realtime: any;
+ overview: any;
+}
+
+interface Particle {
+ x: number;
+ y: number;
+ progress: number;
+ speed: number;
+ pathIndex: number;
+}
+
+export default function EnergyFlowDiagram({ realtime, overview }: Props) {
+ const canvasRef = useRef碳排放
+
+
+
+
+
+
+
+
+
+ 年碳排放
+
+
+
+ 年碳减排
+
+
+
+
+
+
+
+ );
+}
diff --git a/frontend/src/pages/BigScreen/components/EnergyOverviewCard.tsx b/frontend/src/pages/BigScreen/components/EnergyOverviewCard.tsx
new file mode 100644
index 0000000..c347514
--- /dev/null
+++ b/frontend/src/pages/BigScreen/components/EnergyOverviewCard.tsx
@@ -0,0 +1,101 @@
+import ReactECharts from 'echarts-for-react';
+import styles from '../styles.module.css';
+import AnimatedNumber from './AnimatedNumber';
+
+interface Props {
+ data: any;
+ realtime: any;
+}
+
+export default function EnergyOverviewCard({ data, realtime }: Props) {
+ const selfUseRate = data?.self_consumption_rate ?? 0;
+
+ const gaugeOption = {
+ series: [{
+ type: 'gauge',
+ startAngle: 220,
+ endAngle: -40,
+ radius: '90%',
+ center: ['50%', '55%'],
+ min: 0,
+ max: 100,
+ splitNumber: 5,
+ progress: { show: true, width: 12, itemStyle: { color: '#00d4ff' } },
+ axisLine: { lineStyle: { width: 12, color: [[1, 'rgba(0, 212, 255, 0.15)']] } },
+ axisTick: { show: false },
+ splitLine: { show: false },
+ axisLabel: { show: false },
+ pointer: { show: false },
+ title: { show: false },
+ detail: {
+ fontSize: 22,
+ fontWeight: 700,
+ color: '#00d4ff',
+ offsetCenter: [0, '10%'],
+ formatter: '{value}%',
+ },
+ data: [{ value: selfUseRate.toFixed(1) }],
+ }],
+ };
+
+ return (
+
+
+ );
+}
diff --git a/frontend/src/pages/BigScreen/components/HeatPumpCard.tsx b/frontend/src/pages/BigScreen/components/HeatPumpCard.tsx
new file mode 100644
index 0000000..80567a6
--- /dev/null
+++ b/frontend/src/pages/BigScreen/components/HeatPumpCard.tsx
@@ -0,0 +1,96 @@
+import ReactECharts from 'echarts-for-react';
+import styles from '../styles.module.css';
+import AnimatedNumber from './AnimatedNumber';
+
+interface Props {
+ realtime: any;
+ overview: any;
+}
+
+export default function HeatPumpCard({ realtime, overview }: Props) {
+ const hpPower = realtime?.heatpump_power ?? 0;
+ const cop = overview?.heatpump_cop ?? 3.5;
+ const todayConsumption = overview?.heatpump_consumption_today ?? 0;
+ const monthlyConsumption = overview?.heatpump_monthly_consumption ?? 0;
+ const operatingHours = overview?.heatpump_operating_hours ?? 0;
+
+ const copGaugeOption = {
+ series: [{
+ type: 'gauge',
+ startAngle: 220,
+ endAngle: -40,
+ radius: '90%',
+ center: ['50%', '55%'],
+ min: 0,
+ max: 6,
+ splitNumber: 3,
+ progress: {
+ show: true,
+ width: 10,
+ itemStyle: { color: cop >= 3 ? '#00ff88' : '#ff8c00' },
+ },
+ axisLine: { lineStyle: { width: 10, color: [[1, 'rgba(0, 255, 136, 0.12)']] } },
+ axisTick: { show: false },
+ splitLine: { show: false },
+ axisLabel: { show: false },
+ pointer: { show: false },
+ title: { show: false },
+ detail: {
+ fontSize: 20,
+ fontWeight: 700,
+ color: '#00ff88',
+ offsetCenter: [0, '10%'],
+ formatter: '{value}',
+ },
+ data: [{ value: cop.toFixed(2) }],
+ }],
+ };
+
+ return (
+ 综合能源概览
+
+
+
+
+
+ 今日用电
+
+
+
+ 光伏发电
+
+
+
+
+
+ 电网购电
+
+
+
+ 实时功率
+
+
+
+
+
+
+
+
+
+ 碳排放
+
+
+
+ 碳减排
+
+
+
+
+ );
+}
diff --git a/frontend/src/pages/BigScreen/components/LoadCurveCard.tsx b/frontend/src/pages/BigScreen/components/LoadCurveCard.tsx
new file mode 100644
index 0000000..d282d78
--- /dev/null
+++ b/frontend/src/pages/BigScreen/components/LoadCurveCard.tsx
@@ -0,0 +1,83 @@
+import ReactECharts from 'echarts-for-react';
+import styles from '../styles.module.css';
+
+interface Props {
+ loadData: any;
+}
+
+export default function LoadCurveCard({ loadData }: Props) {
+ const hours = loadData?.hours ?? Array.from({ length: 24 }, (_, i) => `${i}:00`);
+ const values = loadData?.values ?? new Array(24).fill(0);
+ const peak = values.length ? Math.max(...values) : 0;
+ const valley = values.length ? Math.min(...values.filter((v: number) => v > 0)) || 0 : 0;
+ const avg = values.length ? values.reduce((a: number, b: number) => a + b, 0) / values.filter((v: number) => v > 0).length || 0 : 0;
+
+ const option = {
+ grid: { left: 40, right: 12, top: 30, bottom: 24 },
+ tooltip: {
+ trigger: 'axis' as const,
+ backgroundColor: 'rgba(6,30,62,0.9)',
+ borderColor: 'rgba(0,212,255,0.3)',
+ textStyle: { color: '#e0e8f0', fontSize: 12 },
+ },
+ xAxis: {
+ type: 'category' as const,
+ data: hours,
+ axisLine: { lineStyle: { color: 'rgba(0,212,255,0.2)' } },
+ axisLabel: { fontSize: 10, color: 'rgba(224,232,240,0.5)', interval: 3 },
+ axisTick: { show: false },
+ },
+ yAxis: {
+ type: 'value' as const,
+ name: 'kW',
+ nameTextStyle: { color: 'rgba(224,232,240,0.4)', fontSize: 10 },
+ splitLine: { lineStyle: { color: 'rgba(0,212,255,0.08)' } },
+ axisLabel: { fontSize: 10, color: 'rgba(224,232,240,0.4)' },
+ },
+ series: [{
+ type: 'line',
+ data: values,
+ smooth: true,
+ symbol: 'none',
+ lineStyle: { color: '#00d4ff', width: 2 },
+ areaStyle: {
+ color: {
+ type: 'linear',
+ x: 0, y: 0, x2: 0, y2: 1,
+ colorStops: [
+ { offset: 0, color: 'rgba(0, 212, 255, 0.3)' },
+ { offset: 1, color: 'rgba(0, 212, 255, 0.02)' },
+ ],
+ } as any,
+ },
+ markLine: {
+ silent: true,
+ symbol: 'none',
+ lineStyle: { type: 'dashed' as const, width: 1 },
+ data: [
+ { yAxis: peak, label: { formatter: '峰值 {c}kW', color: '#ff4757', fontSize: 10 }, lineStyle: { color: '#ff475740' } },
+ { yAxis: avg, label: { formatter: '均值 {c}kW', color: '#ff8c00', fontSize: 10 }, lineStyle: { color: '#ff8c0040' } },
+ ],
+ },
+ }],
+ };
+
+ return (
+ 热泵系统
+
+
+
+
+
+
+ 实时功率
+
+
+
+
+ 平均COP
+
+
+
+
+ 今日用电
+
+
+
+ 本月用电
+
+
+
+
+
+ 今日运行
+
+
+
+
+ );
+}
diff --git a/frontend/src/pages/BigScreen/components/PVCard.tsx b/frontend/src/pages/BigScreen/components/PVCard.tsx
new file mode 100644
index 0000000..05bc661
--- /dev/null
+++ b/frontend/src/pages/BigScreen/components/PVCard.tsx
@@ -0,0 +1,110 @@
+import ReactECharts from 'echarts-for-react';
+import styles from '../styles.module.css';
+import AnimatedNumber from './AnimatedNumber';
+
+interface Props {
+ realtime: any;
+ overview: any;
+}
+
+export default function PVCard({ realtime, overview }: Props) {
+ const pvPower = realtime?.pv_power ?? 0;
+ const todayGen = overview?.pv_generation_today ?? 0;
+ const monthlyGen = overview?.pv_monthly_generation ?? 0;
+ const selfUseRate = overview?.self_consumption_rate ?? 0;
+
+ // Donut for self-use ratio
+ const donutOption = {
+ series: [{
+ type: 'pie',
+ radius: ['60%', '80%'],
+ center: ['50%', '50%'],
+ silent: true,
+ label: { show: false },
+ data: [
+ { value: selfUseRate, itemStyle: { color: '#00ff88' } },
+ { value: 100 - selfUseRate, itemStyle: { color: 'rgba(0, 255, 136, 0.1)' } },
+ ],
+ }],
+ };
+
+ // Monthly PV bar chart (mock 12 months)
+ const months = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'];
+ const monthlyData = overview?.monthly_pv_data ?? months.map(() => Math.round(Math.random() * 3000 + 1000));
+
+ const barOption = {
+ grid: { left: 35, right: 8, top: 8, bottom: 20 },
+ xAxis: {
+ type: 'category' as const,
+ data: months,
+ axisLine: { lineStyle: { color: 'rgba(0,212,255,0.2)' } },
+ axisLabel: { fontSize: 10, color: 'rgba(224,232,240,0.5)' },
+ axisTick: { show: false },
+ },
+ yAxis: {
+ type: 'value' as const,
+ splitLine: { lineStyle: { color: 'rgba(0,212,255,0.08)' } },
+ axisLabel: { fontSize: 10, color: 'rgba(224,232,240,0.4)' },
+ },
+ series: [{
+ type: 'bar',
+ data: monthlyData,
+ itemStyle: {
+ color: {
+ type: 'linear',
+ x: 0, y: 0, x2: 0, y2: 1,
+ colorStops: [
+ { offset: 0, color: '#00ff88' },
+ { offset: 1, color: 'rgba(0, 255, 136, 0.2)' },
+ ],
+ } as any,
+ borderRadius: [2, 2, 0, 0],
+ },
+ barWidth: '50%',
+ }],
+ tooltip: { trigger: 'axis' as const, backgroundColor: 'rgba(6,30,62,0.9)', borderColor: 'rgba(0,212,255,0.3)', textStyle: { color: '#e0e8f0', fontSize: 12 } },
+ };
+
+ return (
+ 用电分析
+
+
+
+
+
+ 峰值 {peak.toFixed(1)} kW
+
+
+ 谷值 {valley.toFixed(1)} kW
+
+
+
+
+
+ );
+}
diff --git a/frontend/src/pages/BigScreen/index.tsx b/frontend/src/pages/BigScreen/index.tsx
new file mode 100644
index 0000000..af92b77
--- /dev/null
+++ b/frontend/src/pages/BigScreen/index.tsx
@@ -0,0 +1,195 @@
+import { useEffect, useState, useCallback, useRef } from 'react';
+import styles from './styles.module.css';
+import EnergyOverviewCard from './components/EnergyOverviewCard';
+import PVCard from './components/PVCard';
+import HeatPumpCard from './components/HeatPumpCard';
+import EnergyFlowDiagram from './components/EnergyFlowDiagram';
+import LoadCurveCard from './components/LoadCurveCard';
+import AlarmCard from './components/AlarmCard';
+import CarbonCard from './components/CarbonCard';
+import AnimatedNumber from './components/AnimatedNumber';
+import useRealtimeWebSocket from '../../hooks/useRealtimeWebSocket';
+import {
+ getDashboardOverview,
+ getRealtimeData,
+ getLoadCurve,
+ getAlarmEvents,
+ getAlarmStats,
+ getCarbonOverview,
+ getCarbonTrend,
+ getDeviceStats,
+} from '../../services/api';
+
+export default function BigScreen() {
+ const [clock, setClock] = useState(new Date());
+ const [overview, setOverview] = useState光伏发电
+
+
+
+
+
+
+ 实时功率
+
+
+
+
+ 自用率
+ {selfUseRate.toFixed(1)}% +
+ + {selfUseRate.toFixed(1)}% +
+
+
+ 今日发电
+
+
+
+ 本月发电
+
+
+
+
+
+ {/* Header */}
+
+ );
+}
diff --git a/frontend/src/pages/BigScreen/styles.module.css b/frontend/src/pages/BigScreen/styles.module.css
new file mode 100644
index 0000000..04697bf
--- /dev/null
+++ b/frontend/src/pages/BigScreen/styles.module.css
@@ -0,0 +1,658 @@
+/* Big Screen Visualization Dashboard - Dark Theme */
+
+.container {
+ width: 100vw;
+ height: 100vh;
+ background: #0a1628;
+ background-image:
+ radial-gradient(circle at 1px 1px, rgba(0, 212, 255, 0.06) 1px, transparent 0);
+ background-size: 40px 40px;
+ color: #e0e8f0;
+ font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', sans-serif;
+ overflow: hidden;
+ display: flex;
+ flex-direction: column;
+}
+
+/* Header */
+.header {
+ height: 72px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ position: relative;
+ background: linear-gradient(180deg, rgba(0, 212, 255, 0.12) 0%, transparent 100%);
+ border-bottom: 1px solid rgba(0, 212, 255, 0.2);
+ flex-shrink: 0;
+}
+
+.headerTitle {
+ font-size: 28px;
+ font-weight: 700;
+ letter-spacing: 6px;
+ background: linear-gradient(90deg, #00d4ff, #00ff88, #00d4ff);
+ background-size: 200% 100%;
+ -webkit-background-clip: text;
+ -webkit-text-fill-color: transparent;
+ background-clip: text;
+ animation: shimmer 4s ease-in-out infinite;
+}
+
+@keyframes shimmer {
+ 0%, 100% { background-position: 0% 50%; }
+ 50% { background-position: 100% 50%; }
+}
+
+.headerTime {
+ position: absolute;
+ right: 32px;
+ font-size: 16px;
+ color: rgba(0, 212, 255, 0.8);
+ letter-spacing: 2px;
+}
+
+.headerDate {
+ position: absolute;
+ left: 32px;
+ font-size: 14px;
+ color: rgba(0, 212, 255, 0.6);
+ letter-spacing: 1px;
+}
+
+/* Main Grid */
+.mainGrid {
+ flex: 1;
+ display: grid;
+ grid-template-columns: 1fr 2fr 1fr;
+ gap: 12px;
+ padding: 12px;
+ min-height: 0;
+}
+
+.column {
+ display: flex;
+ flex-direction: column;
+ gap: 12px;
+ min-height: 0;
+}
+
+/* Cards */
+.card {
+ background: rgba(6, 30, 62, 0.85);
+ border: 1px solid rgba(0, 212, 255, 0.25);
+ border-radius: 8px;
+ padding: 14px 16px;
+ position: relative;
+ overflow: hidden;
+ box-shadow:
+ 0 0 12px rgba(0, 212, 255, 0.08),
+ inset 0 1px 0 rgba(0, 212, 255, 0.1);
+ display: flex;
+ flex-direction: column;
+}
+
+.card::before {
+ content: '';
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ height: 2px;
+ background: linear-gradient(90deg, transparent, rgba(0, 212, 255, 0.5), transparent);
+}
+
+.cardTitle {
+ font-size: 15px;
+ font-weight: 600;
+ color: #00d4ff;
+ margin-bottom: 12px;
+ padding-left: 10px;
+ border-left: 3px solid #00d4ff;
+ letter-spacing: 2px;
+ flex-shrink: 0;
+}
+
+.cardBody {
+ flex: 1;
+ min-height: 0;
+ display: flex;
+ flex-direction: column;
+}
+
+/* Big numbers */
+.bigNumber {
+ font-size: 32px;
+ font-weight: 700;
+ color: #00ff88;
+ line-height: 1;
+}
+
+.bigNumberCyan {
+ font-size: 32px;
+ font-weight: 700;
+ color: #00d4ff;
+ line-height: 1;
+}
+
+.bigNumberOrange {
+ font-size: 32px;
+ font-weight: 700;
+ color: #ff8c00;
+ line-height: 1;
+}
+
+.bigNumberRed {
+ font-size: 24px;
+ font-weight: 700;
+ color: #ff4757;
+ line-height: 1;
+}
+
+.unit {
+ font-size: 13px;
+ font-weight: 400;
+ color: rgba(224, 232, 240, 0.6);
+ margin-left: 4px;
+}
+
+/* Stat grid rows */
+.statRow {
+ display: grid;
+ grid-template-columns: 1fr 1fr;
+ gap: 8px;
+ margin-bottom: 8px;
+}
+
+.statItem {
+ display: flex;
+ flex-direction: column;
+ gap: 2px;
+}
+
+.statLabel {
+ font-size: 12px;
+ color: rgba(224, 232, 240, 0.5);
+}
+
+.statValue {
+ font-size: 18px;
+ font-weight: 600;
+ color: #e0e8f0;
+}
+
+.statValueCyan {
+ font-size: 18px;
+ font-weight: 600;
+ color: #00d4ff;
+}
+
+.statValueGreen {
+ font-size: 18px;
+ font-weight: 600;
+ color: #00ff88;
+}
+
+.statValueOrange {
+ font-size: 18px;
+ font-weight: 600;
+ color: #ff8c00;
+}
+
+/* Center - Energy Flow */
+.centerCard {
+ background: rgba(6, 30, 62, 0.85);
+ border: 1px solid rgba(0, 212, 255, 0.25);
+ border-radius: 8px;
+ padding: 16px;
+ flex: 1;
+ position: relative;
+ overflow: hidden;
+ box-shadow:
+ 0 0 12px rgba(0, 212, 255, 0.08),
+ inset 0 1px 0 rgba(0, 212, 255, 0.1);
+ display: flex;
+ flex-direction: column;
+}
+
+.centerCard::before {
+ content: '';
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ height: 2px;
+ background: linear-gradient(90deg, transparent, rgba(0, 212, 255, 0.5), transparent);
+}
+
+/* Device status bar */
+.deviceStatusBar {
+ display: flex;
+ gap: 24px;
+ justify-content: center;
+ padding: 8px 0;
+ flex-shrink: 0;
+}
+
+.deviceStatusItem {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+}
+
+.statusDot {
+ width: 10px;
+ height: 10px;
+ border-radius: 50%;
+}
+
+.statusDotGreen {
+ composes: statusDot;
+ background: #00ff88;
+ box-shadow: 0 0 8px rgba(0, 255, 136, 0.5);
+}
+
+.statusDotRed {
+ composes: statusDot;
+ background: #ff4757;
+ box-shadow: 0 0 8px rgba(255, 71, 87, 0.5);
+}
+
+.statusDotOrange {
+ composes: statusDot;
+ background: #ff8c00;
+ box-shadow: 0 0 8px rgba(255, 140, 0, 0.5);
+}
+
+.statusDotCyan {
+ composes: statusDot;
+ background: #00d4ff;
+ box-shadow: 0 0 8px rgba(0, 212, 255, 0.5);
+}
+
+.statusLabel {
+ font-size: 13px;
+ color: rgba(224, 232, 240, 0.6);
+}
+
+.statusCount {
+ font-size: 18px;
+ font-weight: 700;
+ color: #e0e8f0;
+}
+
+/* Alarm list */
+.alarmList {
+ flex: 1;
+ overflow: hidden;
+}
+
+.alarmItem {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+ padding: 6px 0;
+ border-bottom: 1px solid rgba(0, 212, 255, 0.1);
+ font-size: 12px;
+}
+
+.alarmSeverity {
+ width: 6px;
+ height: 6px;
+ border-radius: 50%;
+ flex-shrink: 0;
+}
+
+.alarmSeverityCritical {
+ composes: alarmSeverity;
+ background: #ff4757;
+ box-shadow: 0 0 6px rgba(255, 71, 87, 0.6);
+}
+
+.alarmSeverityWarning {
+ composes: alarmSeverity;
+ background: #ff8c00;
+ box-shadow: 0 0 6px rgba(255, 140, 0, 0.6);
+}
+
+.alarmSeverityInfo {
+ composes: alarmSeverity;
+ background: #00d4ff;
+ box-shadow: 0 0 6px rgba(0, 212, 255, 0.6);
+}
+
+.alarmMsg {
+ flex: 1;
+ color: rgba(224, 232, 240, 0.8);
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+}
+
+.alarmTime {
+ color: rgba(224, 232, 240, 0.4);
+ flex-shrink: 0;
+ font-size: 11px;
+}
+
+/* Progress ring */
+.progressRing {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ gap: 16px;
+}
+
+/* Chart wrapper */
+.chartWrap {
+ flex: 1;
+ min-height: 0;
+}
+
+/* Energy Flow SVG area */
+.energyFlowWrap {
+ flex: 1;
+ min-height: 0;
+ position: relative;
+}
+
+/* Animated flow particles */
+@keyframes flowRight {
+ 0% { offset-distance: 0%; opacity: 0; }
+ 10% { opacity: 1; }
+ 90% { opacity: 1; }
+ 100% { offset-distance: 100%; opacity: 0; }
+}
+
+@keyframes flowLeft {
+ 0% { offset-distance: 100%; opacity: 0; }
+ 10% { opacity: 1; }
+ 90% { opacity: 1; }
+ 100% { offset-distance: 0%; opacity: 0; }
+}
+
+@keyframes pulse {
+ 0%, 100% { opacity: 0.6; transform: scale(1); }
+ 50% { opacity: 1; transform: scale(1.05); }
+}
+
+.pulseAnim {
+ animation: pulse 2s ease-in-out infinite;
+}
+
+/* Energy flow node */
+.flowNode {
+ position: absolute;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ width: 140px;
+ height: 100px;
+ background: rgba(6, 30, 62, 0.95);
+ border: 1.5px solid rgba(0, 212, 255, 0.4);
+ border-radius: 12px;
+ box-shadow: 0 0 20px rgba(0, 212, 255, 0.15);
+ z-index: 2;
+}
+
+.flowNodeLabel {
+ font-size: 13px;
+ color: rgba(224, 232, 240, 0.7);
+ margin-bottom: 4px;
+}
+
+.flowNodeValue {
+ font-size: 22px;
+ font-weight: 700;
+ color: #00d4ff;
+}
+
+.flowNodeUnit {
+ font-size: 11px;
+ color: rgba(224, 232, 240, 0.5);
+}
+
+/* Gauge display */
+.gaugeWrap {
+ display: flex;
+ align-items: center;
+ gap: 12px;
+ margin-bottom: 8px;
+}
+
+.gaugeLabel {
+ font-size: 12px;
+ color: rgba(224, 232, 240, 0.5);
+}
+
+/* WebSocket connection indicator */
+.wsIndicator {
+ position: fixed;
+ bottom: 8px;
+ right: 8px;
+ font-size: 11px;
+ color: rgba(224, 232, 240, 0.4);
+ z-index: 100;
+ display: flex;
+ align-items: center;
+ gap: 4px;
+}
+
+.wsIndicatorDot {
+ width: 6px;
+ height: 6px;
+ border-radius: 50%;
+}
+
+.wsIndicatorDotConnected {
+ composes: wsIndicatorDot;
+ background: #00ff88;
+ box-shadow: 0 0 6px rgba(0, 255, 136, 0.5);
+}
+
+.wsIndicatorDotDisconnected {
+ composes: wsIndicatorDot;
+ background: #ff8c00;
+ box-shadow: 0 0 6px rgba(255, 140, 0, 0.5);
+}
+
+/* ============================================
+ Responsive: Tablet (768px and below)
+ ============================================ */
+@media (max-width: 768px) {
+ .container {
+ overflow-y: auto;
+ overflow-x: hidden;
+ height: auto;
+ min-height: 100vh;
+ }
+
+ .header {
+ height: 56px;
+ flex-wrap: wrap;
+ padding: 0 12px;
+ }
+
+ .headerTitle {
+ font-size: 18px;
+ letter-spacing: 2px;
+ }
+
+ .headerDate {
+ position: static;
+ font-size: 12px;
+ order: 2;
+ }
+
+ .headerTime {
+ position: static;
+ font-size: 14px;
+ order: 3;
+ }
+
+ .mainGrid {
+ grid-template-columns: 1fr;
+ gap: 10px;
+ padding: 10px;
+ }
+
+ .column {
+ gap: 10px;
+ }
+
+ .card {
+ padding: 12px;
+ }
+
+ .centerCard {
+ padding: 12px;
+ min-height: 300px;
+ }
+
+ .cardTitle {
+ font-size: 14px;
+ margin-bottom: 8px;
+ }
+
+ .bigNumber,
+ .bigNumberCyan,
+ .bigNumberOrange {
+ font-size: 24px;
+ }
+
+ .bigNumberRed {
+ font-size: 20px;
+ }
+
+ .statValue,
+ .statValueCyan,
+ .statValueGreen,
+ .statValueOrange {
+ font-size: 16px;
+ }
+
+ .deviceStatusBar {
+ flex-wrap: wrap;
+ gap: 12px;
+ justify-content: space-around;
+ }
+
+ .statusCount {
+ font-size: 16px;
+ }
+
+ .flowNode {
+ width: 110px;
+ height: 80px;
+ }
+
+ .flowNodeValue {
+ font-size: 18px;
+ }
+
+ .flowNodeLabel {
+ font-size: 11px;
+ }
+}
+
+/* ============================================
+ Responsive: Mobile (375px and below)
+ ============================================ */
+@media (max-width: 375px) {
+ .header {
+ height: 48px;
+ padding: 0 8px;
+ }
+
+ .headerTitle {
+ font-size: 14px;
+ letter-spacing: 1px;
+ }
+
+ .headerDate {
+ display: none;
+ }
+
+ .headerTime {
+ font-size: 12px;
+ }
+
+ .mainGrid {
+ padding: 6px;
+ gap: 8px;
+ }
+
+ .column {
+ gap: 8px;
+ }
+
+ .card {
+ padding: 10px 12px;
+ }
+
+ .centerCard {
+ min-height: 250px;
+ padding: 10px 12px;
+ }
+
+ .cardTitle {
+ font-size: 13px;
+ margin-bottom: 6px;
+ padding-left: 8px;
+ }
+
+ .bigNumber,
+ .bigNumberCyan,
+ .bigNumberOrange {
+ font-size: 20px;
+ }
+
+ .bigNumberRed {
+ font-size: 18px;
+ }
+
+ .statRow {
+ grid-template-columns: 1fr;
+ gap: 6px;
+ }
+
+ .statValue,
+ .statValueCyan,
+ .statValueGreen,
+ .statValueOrange {
+ font-size: 14px;
+ }
+
+ .statLabel {
+ font-size: 11px;
+ }
+
+ .deviceStatusBar {
+ flex-direction: column;
+ gap: 8px;
+ align-items: flex-start;
+ padding: 4px 8px;
+ }
+
+ .alarmItem {
+ font-size: 11px;
+ padding: 4px 0;
+ }
+
+ .flowNode {
+ width: 90px;
+ height: 64px;
+ }
+
+ .flowNodeValue {
+ font-size: 14px;
+ }
+
+ .flowNodeLabel {
+ font-size: 10px;
+ }
+
+ .unit {
+ font-size: 11px;
+ }
+}
diff --git a/frontend/src/pages/BigScreen3D/components/Buildings.tsx b/frontend/src/pages/BigScreen3D/components/Buildings.tsx
new file mode 100644
index 0000000..1d8b3b0
--- /dev/null
+++ b/frontend/src/pages/BigScreen3D/components/Buildings.tsx
@@ -0,0 +1,130 @@
+import { useMemo } from 'react';
+import * as THREE from 'three';
+import { Html } from '@react-three/drei';
+import { BUILDINGS, COLORS } from '../constants';
+
+interface BuildingsProps {
+ detailMode?: boolean;
+ onBuildingClick?: (building: string) => void;
+}
+
+function WindowGrid({ width, height, depth }: { width: number; height: number; depth: number }) {
+ const windows = useMemo(() => {
+ const cols = 4;
+ const rows = 3;
+ const winW = 1.5;
+ const winH = 0.8;
+ const winD = 0.05;
+ const gapX = (width - cols * winW) / (cols + 1);
+ const gapY = (height - rows * winH) / (rows + 1);
+ const items: { pos: [number, number, number] }[] = [];
+
+ for (let r = 0; r < rows; r++) {
+ for (let c = 0; c < cols; c++) {
+ const x = -width / 2 + gapX + winW / 2 + c * (winW + gapX);
+ const y = -height / 2 + gapY + winH / 2 + r * (winH + gapY);
+ items.push({ pos: [x, y, depth / 2 + winD / 2] });
+ }
+ }
+ return items;
+ }, [width, height, depth]);
+
+ return (
+
+ {formatDate(clock)}
+
+
+ {/* WebSocket connection indicator */}
+ 天普零碳园区智慧能源管理平台
+ {formatTime(clock)} +
+
+ {wsConnected ? '实时' : '轮询'}
+
+
+ {/* Main 3-column grid */}
+
+ {/* Left Column */}
+
+
+
+
+ {/* Center Column */}
+
+
+
+ {/* Right Column */}
+
+
+ 能源流向
+
+
+ 设备状态
+
+
+
+
+ 总设备
+
+
+
+ 在线
+
+
+
+ 离线
+
+
+
+ 告警
+
+
+
+ {label}
+
+
+
+
+
+{`┌─────────┐ ┌──────┐ ┌─────────┐
+│ DC Input │ → │ MPPT │ → │ AC Output│
+└─────────┘ └──────┘ └─────────┘`}
+
+
+
+ DC电压: {getValue('dc_voltage').toFixed(1)} V
+ AC电压: {getValue('ac_voltage').toFixed(1)} V
+ 功率: {getValue('power').toFixed(1)} kW
+ 温度: {getValue('temperature').toFixed(1)} ℃
+
+
+
+ 热泵详情
+ 功率: {getValue('power').toFixed(1)} kW
+ COP: {getValue('cop').toFixed(2)}
+ 进水温度: {getValue('inlet_temp').toFixed(1)} ℃
+ 出水温度: {getValue('outlet_temp').toFixed(1)} ℃
+ 流量: {getValue('flow_rate').toFixed(2)} m³/h
+ 室外温度: {getValue('outdoor_temp').toFixed(1)} ℃
+
+
+
+ 电表详情
+ 功率: {getValue('power').toFixed(1)} kW
+ 电压: {getValue('voltage').toFixed(1)} V
+ 电流: {getValue('current').toFixed(2)} A
+ 功率因数: {getValue('power_factor').toFixed(3)}
+
+
+
+ 热量表详情
+ 热功率: {getValue('heat_power').toFixed(1)} kW
+ 流量: {getValue('flow_rate').toFixed(2)} m³/h
+ 供水温度: {getValue('supply_temp').toFixed(1)} ℃
+ 回水温度: {getValue('return_temp').toFixed(1)} ℃
+ 累计热量: {getValue('cumulative_heat').toFixed(3)} GJ
+
+
+
+ 传感器详情
+ 温度: {getValue('temperature').toFixed(1)} ℃
+ 湿度: {getValue('humidity').toFixed(1)} %
+
+
+
+ {name}
+
+
+ );
+}
diff --git a/frontend/src/pages/BigScreen3D/components/DeviceListPanel.tsx b/frontend/src/pages/BigScreen3D/components/DeviceListPanel.tsx
new file mode 100644
index 0000000..a38c457
--- /dev/null
+++ b/frontend/src/pages/BigScreen3D/components/DeviceListPanel.tsx
@@ -0,0 +1,85 @@
+import { useState } from 'react';
+import styles from '../styles.module.css';
+import { getDevicePhoto } from '../../../utils/devicePhoto';
+
+interface Device {
+ id: number;
+ name: string;
+ code: string;
+ device_type: string;
+ status: string;
+ primaryValue?: string;
+}
+
+interface DeviceListPanelProps {
+ devices: Device[];
+ selectedDeviceId: number | null;
+ onDeviceSelect: (device: Device) => void;
+}
+
+const TYPE_LABELS: Record
+ {device.name}
+
+
+
+
+ })
+
+
+
+
+
+
+ 状态
+
+ {STATUS_LABELS[device.status] || device.status}
+
+
+ {device.model && (
+
+ 型号
+ {device.model}
+
+ )}
+ {device.manufacturer && (
+
+ 厂家
+ {device.manufacturer}
+
+ )}
+ {device.rated_power != null && (
+
+ 额定功率
+ {device.rated_power} kW
+
+ )}
+
+ {params.map(param => {
+ const data = realtimeData[param.key];
+ const valueStr = data != null ? `${data.value}${param.unit ? ' ' + param.unit : ''}` : '--';
+ return (
+
+
+
+
+ {param.label}
+ {valueStr}
+
+ );
+ })}
+
+ {Object.entries(TYPE_LABELS).map(([type, label]) => {
+ const group = groups[type];
+ if (!group || group.length === 0) return null;
+ const isCollapsed = collapsed[type] ?? false;
+
+ return (
+
+ );
+}
diff --git a/frontend/src/pages/BigScreen3D/components/DeviceMarkers.tsx b/frontend/src/pages/BigScreen3D/components/DeviceMarkers.tsx
new file mode 100644
index 0000000..2fb0bbb
--- /dev/null
+++ b/frontend/src/pages/BigScreen3D/components/DeviceMarkers.tsx
@@ -0,0 +1,200 @@
+import { useMemo } from 'react';
+import { Html } from '@react-three/drei';
+import { DEVICE_POSITIONS, COLORS } from '../constants';
+
+interface DeviceMarkersProps {
+ devices: Array<{
+ id: number;
+ code: string;
+ device_type: string;
+ name: string;
+ status: string;
+ primaryValue?: string;
+ }>;
+ hoveredId: number | null;
+ onHover: (id: number | null) => void;
+ onClick: (device: { id: number; code: string; device_type: string; name: string; status: string; primaryValue?: string }) => void;
+ detailMode?: boolean;
+}
+
+const labelStyle: React.CSSProperties = {
+ fontSize: '11px',
+ color: COLORS.text,
+ background: 'rgba(6, 30, 62, 0.85)',
+ padding: '2px 6px',
+ borderRadius: '3px',
+ border: '1px solid rgba(0, 212, 255, 0.2)',
+ whiteSpace: 'nowrap',
+ pointerEvents: 'none',
+ textAlign: 'center',
+};
+
+function MeterMarker({
+ device,
+ position,
+ isHovered,
+ accentColor,
+ onHover,
+ onClick,
+}: {
+ device: DeviceMarkersProps['devices'][number];
+ position: [number, number, number];
+ isHovered: boolean;
+ accentColor: string;
+ onHover: (id: number | null) => void;
+ onClick: (device: DeviceMarkersProps['devices'][number]) => void;
+}) {
+ const scale: [number, number, number] = isHovered ? [1.2, 1.2, 1.2] : [1, 1, 1];
+
+ return (
+
+
+ );
+ })}
+ toggleGroup(type)}>
+ {isCollapsed ? '▸' : '▾'} {label}
+
+ {!isCollapsed &&
+ group.map(device => (
+ onDeviceSelect(device)}
+ >
+
+
+ {device.name}
+ {device.primaryValue && (
+ {device.primaryValue}
+ )}
+
+ ))}
+
+
+
+ {device.name}
+ {device.primaryValue && {device.primaryValue}
}
+
+
+
+ {device.name}
+ {device.primaryValue && {device.primaryValue}
}
+
+
+ );
+}
diff --git a/frontend/src/pages/BigScreen3D/components/HeatPumps.tsx b/frontend/src/pages/BigScreen3D/components/HeatPumps.tsx
new file mode 100644
index 0000000..8a1b786
--- /dev/null
+++ b/frontend/src/pages/BigScreen3D/components/HeatPumps.tsx
@@ -0,0 +1,147 @@
+import { useRef, useMemo } from 'react';
+import * as THREE from 'three';
+import { useFrame } from '@react-three/fiber';
+import { DEVICE_POSITIONS } from '../constants';
+
+interface HeatPumpsProps {
+ devices: Array<{ id: number; code: string; status: string; power?: number }>;
+ hoveredId: number | null;
+ onHover: (id: number | null) => void;
+ onClick: (device: { id: number; code: string; status: string; power?: number }) => void;
+ detailMode?: boolean;
+}
+
+const HP_CODES = ['HP-01', 'HP-02', 'HP-03', 'HP-04'] as const;
+
+function FanBlades({ speed, status }: { speed: number; status: string }) {
+ const bladesRef = useRef
+ {formatDate(now)}
+ 天普零碳园区 3D智慧能源管理平台
+ {formatTime(now)}
+
+
+
+
+
+ 光伏发电
+
+
+
+ 电网功率
+
+
+
+ 总负荷
+
+
+
+ 今日发电
+
+
+
+ 碳减排
+
+
+
+
+ );
+ }
+
+ return (
+
+
+ 天普零碳园区 3D智慧能源管理平台
+正在加载设备数据...
+
+ {/* 3D Canvas — fills entire screen */}
+
+ );
+}
diff --git a/frontend/src/pages/BigScreen3D/styles.module.css b/frontend/src/pages/BigScreen3D/styles.module.css
new file mode 100644
index 0000000..b41fb15
--- /dev/null
+++ b/frontend/src/pages/BigScreen3D/styles.module.css
@@ -0,0 +1,329 @@
+/* BigScreen 3D - Dark monitoring theme */
+.container {
+ width: 100vw;
+ height: 100vh;
+ background: #0a1628;
+ position: relative;
+ overflow: hidden;
+ font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+ color: #e0e8f0;
+}
+
+.placeholder {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ height: 100%;
+ color: #00d4ff;
+}
+
+.placeholderTitle {
+ font-size: 2rem;
+ margin-bottom: 1rem;
+}
+
+/* Canvas fills entire screen */
+.canvasWrapper {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ z-index: 1;
+}
+
+/* HUD overlay on top of canvas */
+.hudOverlay {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ z-index: 10;
+ pointer-events: none;
+}
+
+/* Header bar */
+.header {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ padding: 12px 24px;
+ background: linear-gradient(180deg, rgba(6, 30, 62, 0.95) 0%, transparent 100%);
+ pointer-events: none;
+}
+
+.headerDate {
+ font-size: 14px;
+ color: #8899aa;
+ min-width: 200px;
+}
+
+.headerTitle {
+ font-size: 24px;
+ font-weight: 700;
+ background: linear-gradient(90deg, #00d4ff, #00ff88, #00d4ff);
+ background-size: 200% auto;
+ -webkit-background-clip: text;
+ -webkit-text-fill-color: transparent;
+ animation: shimmer 3s linear infinite;
+ text-align: center;
+}
+
+@keyframes shimmer {
+ to { background-position: 200% center; }
+}
+
+.headerClock {
+ font-size: 20px;
+ font-weight: 600;
+ color: #00d4ff;
+ font-variant-numeric: tabular-nums;
+ min-width: 200px;
+ text-align: right;
+}
+
+/* Bottom metrics bar */
+.metricsBar {
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ width: 100%;
+ display: flex;
+ justify-content: center;
+ gap: 24px;
+ padding: 16px 24px;
+ background: linear-gradient(0deg, rgba(6, 30, 62, 0.95) 0%, transparent 100%);
+ pointer-events: none;
+}
+
+.metricCard {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ padding: 8px 20px;
+ background: rgba(0, 212, 255, 0.08);
+ border: 1px solid rgba(0, 212, 255, 0.2);
+ border-radius: 8px;
+ min-width: 140px;
+}
+
+.metricLabel {
+ font-size: 12px;
+ color: #8899aa;
+ margin-bottom: 4px;
+}
+
+.metricValue {
+ font-size: 22px;
+ font-weight: 700;
+ color: #00d4ff;
+ font-variant-numeric: tabular-nums;
+}
+
+.metricUnit {
+ font-size: 12px;
+ color: #8899aa;
+ margin-left: 4px;
+}
+
+/* Left device list panel */
+.deviceListPanel {
+ position: absolute;
+ top: 60px;
+ left: 16px;
+ width: 240px;
+ max-height: calc(100vh - 160px);
+ overflow-y: auto;
+ background: rgba(6, 30, 62, 0.85);
+ border: 1px solid rgba(0, 212, 255, 0.25);
+ border-radius: 8px;
+ padding: 12px;
+ z-index: 20;
+ pointer-events: auto;
+}
+
+.deviceListPanel::-webkit-scrollbar {
+ width: 4px;
+}
+.deviceListPanel::-webkit-scrollbar-thumb {
+ background: rgba(0, 212, 255, 0.3);
+ border-radius: 2px;
+}
+
+.deviceGroupTitle {
+ font-size: 13px;
+ font-weight: 600;
+ color: #00d4ff;
+ padding: 8px 0 4px;
+ border-bottom: 1px solid rgba(0, 212, 255, 0.15);
+ margin-bottom: 4px;
+ cursor: pointer;
+ user-select: none;
+}
+
+.deviceItem {
+ display: flex;
+ align-items: center;
+ padding: 6px 8px;
+ border-radius: 4px;
+ cursor: pointer;
+ transition: background 0.2s;
+ gap: 8px;
+}
+
+.deviceItem:hover {
+ background: rgba(0, 212, 255, 0.1);
+}
+
+.deviceItemActive {
+ background: rgba(0, 212, 255, 0.15);
+ border: 1px solid rgba(0, 212, 255, 0.3);
+}
+
+.statusDot {
+ width: 8px;
+ height: 8px;
+ border-radius: 50%;
+ flex-shrink: 0;
+}
+
+.deviceName {
+ font-size: 12px;
+ color: #e0e8f0;
+ flex: 1;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+}
+
+.deviceValue {
+ font-size: 11px;
+ color: #00d4ff;
+ font-variant-numeric: tabular-nums;
+}
+
+/* Right device info panel */
+.deviceInfoPanel {
+ position: absolute;
+ top: 60px;
+ right: 16px;
+ width: 300px;
+ max-height: calc(100vh - 160px);
+ overflow-y: auto;
+ background: rgba(6, 30, 62, 0.9);
+ border: 1px solid rgba(0, 212, 255, 0.25);
+ border-radius: 8px;
+ padding: 16px;
+ z-index: 20;
+ pointer-events: auto;
+}
+
+.infoPanelHeader {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ margin-bottom: 12px;
+ padding-bottom: 8px;
+ border-bottom: 1px solid rgba(0, 212, 255, 0.2);
+}
+
+.infoPanelTitle {
+ font-size: 16px;
+ font-weight: 600;
+ color: #e0e8f0;
+}
+
+.closeBtn {
+ background: none;
+ border: 1px solid rgba(0, 212, 255, 0.3);
+ color: #8899aa;
+ font-size: 14px;
+ cursor: pointer;
+ padding: 2px 8px;
+ border-radius: 4px;
+ transition: all 0.2s;
+}
+
+.closeBtn:hover {
+ color: #00d4ff;
+ border-color: #00d4ff;
+}
+
+.paramRow {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ padding: 6px 0;
+ border-bottom: 1px solid rgba(255, 255, 255, 0.05);
+}
+
+.paramLabel {
+ font-size: 13px;
+ color: #8899aa;
+}
+
+.paramValue {
+ font-size: 15px;
+ font-weight: 600;
+ color: #00d4ff;
+ font-variant-numeric: tabular-nums;
+}
+
+.detailBtn {
+ width: 100%;
+ margin-top: 12px;
+ padding: 8px;
+ background: rgba(0, 212, 255, 0.15);
+ border: 1px solid rgba(0, 212, 255, 0.4);
+ border-radius: 6px;
+ color: #00d4ff;
+ font-size: 14px;
+ cursor: pointer;
+ transition: all 0.2s;
+}
+
+.detailBtn:hover {
+ background: rgba(0, 212, 255, 0.25);
+}
+
+/* Return button (detail view) */
+.returnBtn {
+ position: absolute;
+ top: 70px;
+ left: 50%;
+ transform: translateX(-50%);
+ padding: 8px 24px;
+ background: rgba(6, 30, 62, 0.9);
+ border: 1px solid rgba(0, 212, 255, 0.4);
+ border-radius: 20px;
+ color: #00d4ff;
+ font-size: 14px;
+ cursor: pointer;
+ z-index: 25;
+ pointer-events: auto;
+ transition: all 0.2s;
+}
+
+.returnBtn:hover {
+ background: rgba(0, 212, 255, 0.2);
+}
+
+/* 3D label styles (used inside drei Html) */
+.label3d {
+ font-size: 11px;
+ color: #e0e8f0;
+ background: rgba(6, 30, 62, 0.8);
+ padding: 2px 8px;
+ border-radius: 4px;
+ border: 1px solid rgba(0, 212, 255, 0.2);
+ white-space: nowrap;
+ pointer-events: none;
+}
+
+.label3dValue {
+ color: #00d4ff;
+ font-weight: 600;
+ margin-left: 4px;
+}
diff --git a/frontend/src/pages/BigScreen3D/types.ts b/frontend/src/pages/BigScreen3D/types.ts
new file mode 100644
index 0000000..19b19bb
--- /dev/null
+++ b/frontend/src/pages/BigScreen3D/types.ts
@@ -0,0 +1,73 @@
+// 3D BigScreen shared type definitions
+
+export interface DeviceInfo {
+ id: number;
+ name: string;
+ code: string;
+ device_type: string;
+ device_type_id?: number;
+ status: 'online' | 'offline' | 'alarm' | 'maintenance';
+ model?: string;
+ manufacturer?: string;
+ rated_power?: number;
+ location?: string;
+ serial_number?: string;
+ collect_interval?: number;
+}
+
+export interface DeviceRealtimeEntry {
+ value: number;
+ unit: string;
+ timestamp: string;
+}
+
+export type DeviceRealtimeData = Record
+
+
+ {/* HUD: header bar + bottom metrics — pointer-events: none */}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {target && (
+
+
+ )}
+
+
+
+
+
+
+
+
+
+ {(dashboard?.reduction_by_source || []).length > 0
+ ?
+
+
+
+
+
+
+ );
+}
+
+// ============================================================
+// Targets Tab
+// ============================================================
+function TargetsTab() {
+ const [targets, setTargets] = useState基于年度减排量折算 (1棵树 ≈ 0.02 tCO₂/年)
+
+
+
+ {(progress?.monthly_targets || []).length > 0 ? (
+ `${m.month}月`) },
+ yAxis: { type: 'value', name: 'tCO₂' },
+ series: [
+ { name: '目标', type: 'bar', data: progress.monthly_targets.map((m: any) => m.target_tons), itemStyle: { color: '#1890ff' } },
+ { name: '实际', type: 'bar', data: progress.monthly_targets.map((m: any) => m.actual_tons), itemStyle: { color: '#f5222d' } },
+ ],
+ }} style={{ height: 280 }} />
+ ) :
+
+
+
+
+
+
+
+ setModalOpen(false)} okText="创建">
+
+
+
+ );
+}
+
+// ============================================================
+// Reductions Tab
+// ============================================================
+function ReductionsTab() {
+ const [reductions, setReductions] = useState
+
+
+
+ {summary.map((s: any) => (
+
+
+
+
+
+
+
+
+
+ );
+}
+
+// ============================================================
+// Certificates Tab
+// ============================================================
+function CertificatesTab() {
+ const [certs, setCerts] = useState等效植树 {s.equivalent_trees} 棵
+ + ))} +
+
+
+
+
+
+
+
+
+
+
+
+
+ {Object.entries(portfolio?.by_status || {}).map(([k, v]: any) => (
+
+ {k}
+
+ ))}
+
+
+
+
+
+
+
+
+ setModalOpen(false)} okText="登记" width={520}>
+
+
+
+ );
+}
+
+// ============================================================
+// Reports Tab
+// ============================================================
+function ReportsTab() {
+ const [reports, setReports] = useState
+
+
+
+ {detail && (
+ setDetail(null)}>关闭}>
+
+
+ {detail.report_data?.monthly_breakdown && (
+ m.month) },
+ yAxis: { type: 'value', name: 'tCO₂' },
+ series: [
+ { name: '排放', type: 'bar', data: detail.report_data.monthly_breakdown.map((m: any) => m.emission_tons), itemStyle: { color: '#f5222d' } },
+ { name: '减排', type: 'bar', data: detail.report_data.monthly_breakdown.map((m: any) => m.reduction_tons), itemStyle: { color: '#52c41a' } },
+ ],
+ }} />
+ )}
+
+ )}
+
+ setModalOpen(false)}
+ okText="生成" confirmLoading={generating}>
+
+
+
+ );
+}
+
+// ============================================================
+// Benchmarks Tab
+// ============================================================
+function BenchmarksTab() {
+ const [benchmarks, setBenchmarks] = useState
+ {comparison && (
+
+
+ )}
+
+
+
+ {chartOption ?
+
+
+
+
+
+
+
+ );
+}
+
+// ============================================================
+// Main Page
+// ============================================================
+export default function Carbon() {
+ const items = [
+ { key: 'overview', label: '总览', icon:
+ ({ ...t, label: {t.icon} {t.label} }))} />
+
+ );
+}
diff --git a/frontend/src/pages/Charging/Dashboard.tsx b/frontend/src/pages/Charging/Dashboard.tsx
new file mode 100644
index 0000000..5bd2b49
--- /dev/null
+++ b/frontend/src/pages/Charging/Dashboard.tsx
@@ -0,0 +1,169 @@
+import { useEffect, useState } from 'react';
+import { Card, Row, Col, Statistic, message } from 'antd';
+import { DollarOutlined, ThunderboltOutlined, CarOutlined, DashboardOutlined } from '@ant-design/icons';
+import { getChargingDashboard } from '../../services/api';
+import ReactECharts from 'echarts-for-react';
+
+export default function ChargingDashboard() {
+ const [data, setData] = useState
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {data?.revenue_trend?.length > 0 ? (
+
+
+
+ {pileStatusData.length > 0 ? (
+
+
+
+
+
+
+ {data?.station_ranking?.length > 0 ? (
+
+
+
+
+ );
+}
diff --git a/frontend/src/pages/Charging/Orders.tsx b/frontend/src/pages/Charging/Orders.tsx
new file mode 100644
index 0000000..b3492db
--- /dev/null
+++ b/frontend/src/pages/Charging/Orders.tsx
@@ -0,0 +1,201 @@
+import { useEffect, useState, useCallback } from 'react';
+import { Card, Table, Tag, Button, Tabs, Space, DatePicker, Select, message } from 'antd';
+import { SyncOutlined, WarningOutlined } from '@ant-design/icons';
+import { getChargingOrders, getChargingRealtimeOrders, getChargingAbnormalOrders, settleChargingOrder } from '../../services/api';
+
+const { RangePicker } = DatePicker;
+
+const orderStatusMap: Record暂无数据
+ )}
+ 暂无数据
+ )}
+ 暂无数据
+ )}
+