Compare commits
3 Commits
ca7e92a1a1
...
f1ba9ff742
| Author | SHA1 | Date | |
|---|---|---|---|
| f1ba9ff742 | |||
| 12708e6149 | |||
| 3a014a3d20 |
@ -11,6 +11,16 @@ const compat = new FlatCompat({
|
||||
|
||||
const eslintConfig = [
|
||||
...compat.extends("next/core-web-vitals", "next/typescript"),
|
||||
{
|
||||
rules: {
|
||||
"@typescript-eslint/no-explicit-any": "warn",
|
||||
"@typescript-eslint/no-unused-vars": ["warn", {
|
||||
"argsIgnorePattern": "^_",
|
||||
"varsIgnorePattern": "^_"
|
||||
}],
|
||||
"react-hooks/exhaustive-deps": "warn"
|
||||
}
|
||||
}
|
||||
];
|
||||
|
||||
export default eslintConfig;
|
||||
|
||||
434
meteor-frontend/meteor_homepage_design.html
Normal file
434
meteor-frontend/meteor_homepage_design.html
Normal file
@ -0,0 +1,434 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>分布式流星监测网络</title>
|
||||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
||||
background: linear-gradient(135deg, #0a0a23 0%, #1a1a3a 50%, #2a2a4a 100%);
|
||||
color: white;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.starfield {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.star {
|
||||
position: absolute;
|
||||
background: white;
|
||||
border-radius: 50%;
|
||||
animation: twinkle 2s infinite alternate;
|
||||
}
|
||||
|
||||
@keyframes twinkle {
|
||||
0% { opacity: 0.3; transform: scale(1); }
|
||||
100% { opacity: 1; transform: scale(1.2); }
|
||||
}
|
||||
|
||||
.meteor {
|
||||
position: absolute;
|
||||
width: 2px;
|
||||
height: 100px;
|
||||
background: linear-gradient(to bottom, #ff6b35, transparent);
|
||||
animation: meteor-fall 3s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes meteor-fall {
|
||||
0% {
|
||||
transform: translateY(-100px) translateX(0);
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
transform: translateY(100vh) translateX(-200px);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.hero {
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
padding: 2rem;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.hero-title {
|
||||
font-size: 4rem;
|
||||
font-weight: 700;
|
||||
margin-bottom: 1rem;
|
||||
background: linear-gradient(45deg, #ffffff, #ff6b35);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
animation: glow 2s ease-in-out infinite alternate;
|
||||
}
|
||||
|
||||
@keyframes glow {
|
||||
0% { text-shadow: 0 0 20px rgba(255, 107, 53, 0.5); }
|
||||
100% { text-shadow: 0 0 40px rgba(255, 107, 53, 0.8); }
|
||||
}
|
||||
|
||||
.hero-subtitle {
|
||||
font-size: 1.5rem;
|
||||
color: #cccccc;
|
||||
margin-bottom: 3rem;
|
||||
max-width: 600px;
|
||||
}
|
||||
|
||||
.split-section {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 4rem;
|
||||
max-width: 1200px;
|
||||
margin: 4rem auto;
|
||||
padding: 0 2rem;
|
||||
}
|
||||
|
||||
.science-visual {
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
border-radius: 20px;
|
||||
padding: 2rem;
|
||||
backdrop-filter: blur(10px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.constellation {
|
||||
width: 100%;
|
||||
height: 300px;
|
||||
position: relative;
|
||||
background: radial-gradient(circle at center, rgba(255, 107, 53, 0.1), transparent);
|
||||
}
|
||||
|
||||
.constellation-dot {
|
||||
position: absolute;
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
background: #ff6b35;
|
||||
border-radius: 50%;
|
||||
box-shadow: 0 0 15px #ff6b35;
|
||||
}
|
||||
|
||||
.constellation-line {
|
||||
position: absolute;
|
||||
height: 1px;
|
||||
background: linear-gradient(to right, #ff6b35, transparent);
|
||||
transform-origin: left;
|
||||
}
|
||||
|
||||
.value-prop {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.value-prop h2 {
|
||||
font-size: 2.5rem;
|
||||
margin-bottom: 1.5rem;
|
||||
color: #ff6b35;
|
||||
}
|
||||
|
||||
.value-prop p {
|
||||
font-size: 1.2rem;
|
||||
line-height: 1.6;
|
||||
color: #cccccc;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.feature-cards {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
||||
gap: 2rem;
|
||||
max-width: 1200px;
|
||||
margin: 4rem auto;
|
||||
padding: 0 2rem;
|
||||
}
|
||||
|
||||
.feature-card {
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
border-radius: 20px;
|
||||
padding: 2rem;
|
||||
backdrop-filter: blur(10px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
transition: all 0.3s ease;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.feature-card:hover {
|
||||
transform: translateY(-10px);
|
||||
box-shadow: 0 20px 40px rgba(255, 107, 53, 0.2);
|
||||
border-color: #ff6b35;
|
||||
}
|
||||
|
||||
.feature-icon {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
background: linear-gradient(45deg, #ff6b35, #ff8c42);
|
||||
border-radius: 15px;
|
||||
margin-bottom: 1.5rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.feature-card h3 {
|
||||
font-size: 1.5rem;
|
||||
margin-bottom: 1rem;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.feature-card p {
|
||||
color: #cccccc;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.cta-section {
|
||||
text-align: center;
|
||||
padding: 4rem 2rem;
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.cta-buttons {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.btn {
|
||||
padding: 1rem 2rem;
|
||||
border-radius: 50px;
|
||||
font-size: 1.1rem;
|
||||
font-weight: 600;
|
||||
text-decoration: none;
|
||||
transition: all 0.3s ease;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background: linear-gradient(45deg, #ff6b35, #ff8c42);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 10px 30px rgba(255, 107, 53, 0.4);
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
background: transparent;
|
||||
color: #ff6b35;
|
||||
border: 2px solid #ff6b35;
|
||||
}
|
||||
|
||||
.btn-secondary:hover {
|
||||
background: #ff6b35;
|
||||
color: white;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.hero-title {
|
||||
font-size: 2.5rem;
|
||||
}
|
||||
|
||||
.split-section {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 2rem;
|
||||
}
|
||||
|
||||
.cta-buttons {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="starfield" id="starfield"></div>
|
||||
|
||||
<main>
|
||||
<section class="hero">
|
||||
<h1 class="hero-title">分布式流星监测网络</h1>
|
||||
<p class="hero-subtitle">
|
||||
连接全球观测者，记录天空中每一道流星的轨迹，为科学研究提供珍贵数据
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<section class="split-section">
|
||||
<div class="science-visual">
|
||||
<div class="constellation" id="constellation">
|
||||
<!-- 星座连线将通过JavaScript生成 -->
|
||||
</div>
|
||||
<h3 style="text-align: center; margin-top: 1rem; color: #ff6b35;">实时监测网络</h3>
|
||||
</div>
|
||||
|
||||
<div class="value-prop">
|
||||
<h2>科学价值</h2>
|
||||
<p>
|
||||
通过分布式监测网络，我们能够精确追踪流星轨迹，分析其起源、速度和成分。
|
||||
每一次观测都为天体物理学研究贡献宝贵数据。
|
||||
</p>
|
||||
<p>
|
||||
加入我们的网络，成为公民科学家，让您的观测为人类对宇宙的理解做出贡献。
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="feature-cards">
|
||||
<div class="feature-card">
|
||||
<div class="feature-icon">🛰️</div>
|
||||
<h3>设备网络</h3>
|
||||
<p>分布在全球的高精度监测设备，24小时不间断捕捉流星事件，构建完整的观测网络。</p>
|
||||
</div>
|
||||
|
||||
<div class="feature-card">
|
||||
<div class="feature-icon">📸</div>
|
||||
<h3>事件画廊</h3>
|
||||
<p>精彩的流星照片和视频集合，每一帧都记录着宇宙的壮丽瞬间，见证天空的奇迹。</p>
|
||||
</div>
|
||||
|
||||
<div class="feature-card">
|
||||
<div class="feature-icon">📊</div>
|
||||
<h3>研究数据</h3>
|
||||
<p>开放的科学数据平台，为天文学家和研究人员提供准确、详细的流星观测数据。</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="cta-section">
|
||||
<h2 style="font-size: 2.5rem; margin-bottom: 1.5rem; color: #ff6b35;">
|
||||
开始您的星空探索之旅
|
||||
</h2>
|
||||
<p style="font-size: 1.2rem; color: #cccccc; margin-bottom: 2rem;">
|
||||
注册账户，访问实时数据，加入全球观测者社区
|
||||
</p>
|
||||
<div class="cta-buttons">
|
||||
<a href="#" class="btn btn-primary">立即注册</a>
|
||||
<a href="#" class="btn btn-secondary">了解更多</a>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<script>
|
||||
// 生成星空背景
|
||||
function createStarfield() {
|
||||
const starfield = document.getElementById('starfield');
|
||||
const numStars = 100;
|
||||
|
||||
for (let i = 0; i < numStars; i++) {
|
||||
const star = document.createElement('div');
|
||||
star.className = 'star';
|
||||
star.style.left = Math.random() * 100 + '%';
|
||||
star.style.top = Math.random() * 100 + '%';
|
||||
star.style.width = Math.random() * 3 + 1 + 'px';
|
||||
star.style.height = star.style.width;
|
||||
star.style.animationDelay = Math.random() * 2 + 's';
|
||||
starfield.appendChild(star);
|
||||
}
|
||||
|
||||
// 添加流星
|
||||
setInterval(() => {
|
||||
const meteor = document.createElement('div');
|
||||
meteor.className = 'meteor';
|
||||
meteor.style.left = Math.random() * 100 + '%';
|
||||
meteor.style.animationDuration = (Math.random() * 2 + 2) + 's';
|
||||
starfield.appendChild(meteor);
|
||||
|
||||
setTimeout(() => {
|
||||
meteor.remove();
|
||||
}, 5000);
|
||||
}, 3000);
|
||||
}
|
||||
|
||||
// 生成星座图案
|
||||
function createConstellation() {
|
||||
const constellation = document.getElementById('constellation');
|
||||
const dots = [
|
||||
{x: 20, y: 30}, {x: 40, y: 20}, {x: 60, y: 40},
|
||||
{x: 30, y: 60}, {x: 70, y: 50}, {x: 50, y: 80},
|
||||
{x: 80, y: 70}, {x: 15, y: 75}, {x: 85, y: 25}
|
||||
];
|
||||
|
||||
// 创建星点
|
||||
dots.forEach((dot, index) => {
|
||||
const dotEl = document.createElement('div');
|
||||
dotEl.className = 'constellation-dot';
|
||||
dotEl.style.left = dot.x + '%';
|
||||
dotEl.style.top = dot.y + '%';
|
||||
dotEl.style.animationDelay = index * 0.2 + 's';
|
||||
constellation.appendChild(dotEl);
|
||||
});
|
||||
|
||||
// 创建连线
|
||||
const connections = [
|
||||
[0, 1], [1, 2], [2, 4], [4, 6], [3, 5], [5, 7], [0, 3]
|
||||
];
|
||||
|
||||
connections.forEach(([start, end]) => {
|
||||
const line = document.createElement('div');
|
||||
line.className = 'constellation-line';
|
||||
|
||||
const startDot = dots[start];
|
||||
const endDot = dots[end];
|
||||
const dx = endDot.x - startDot.x;
|
||||
const dy = endDot.y - startDot.y;
|
||||
const length = Math.sqrt(dx * dx + dy * dy);
|
||||
const angle = Math.atan2(dy, dx) * 180 / Math.PI;
|
||||
|
||||
line.style.left = startDot.x + '%';
|
||||
line.style.top = startDot.y + '%';
|
||||
line.style.width = length + '%';
|
||||
line.style.transform = `rotate(${angle}deg)`;
|
||||
|
||||
constellation.appendChild(line);
|
||||
});
|
||||
}
|
||||
|
||||
// 平滑滚动动画
|
||||
function handleScrollAnimations() {
|
||||
const cards = document.querySelectorAll('.feature-card');
|
||||
|
||||
const observer = new IntersectionObserver((entries) => {
|
||||
entries.forEach(entry => {
|
||||
if (entry.isIntersecting) {
|
||||
entry.target.style.opacity = '1';
|
||||
entry.target.style.transform = 'translateY(0)';
|
||||
}
|
||||
});
|
||||
}, { threshold: 0.1 });
|
||||
|
||||
cards.forEach(card => {
|
||||
card.style.opacity = '0';
|
||||
card.style.transform = 'translateY(50px)';
|
||||
card.style.transition = 'all 0.6s ease';
|
||||
observer.observe(card);
|
||||
});
|
||||
}
|
||||
|
||||
// 初始化
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
createStarfield();
|
||||
createConstellation();
|
||||
handleScrollAnimations();
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
11077
meteor-frontend/package-lock.json
generated
11077
meteor-frontend/package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@ -23,10 +23,11 @@
|
||||
"lucide-react": "^0.534.0",
|
||||
"next": "15.4.5",
|
||||
"playwright": "^1.54.1",
|
||||
"react": "19.1.0",
|
||||
"react-dom": "19.1.0",
|
||||
"react": "^19.1.0",
|
||||
"react-dom": "^19.1.0",
|
||||
"react-hook-form": "^7.61.1",
|
||||
"react-intersection-observer": "^9.16.0",
|
||||
"recharts": "^3.1.2",
|
||||
"zod": "^4.0.14"
|
||||
},
|
||||
"devDependencies": {
|
||||
|
||||
340
meteor-frontend/src/app/analysis/page.tsx
Normal file
340
meteor-frontend/src/app/analysis/page.tsx
Normal file
@ -0,0 +1,340 @@
|
||||
'use client';
|
||||
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { BarChart2, Clock, Star, Map, Camera, List, Calendar, Eye } from 'lucide-react';
|
||||
import { StatCard } from '@/components/ui/stat-card';
|
||||
import { LoadingSpinner } from '@/components/ui/loading-spinner';
|
||||
import { AppLayout } from '@/components/layout/app-layout';
|
||||
import { MeteorTypePieChart } from '@/components/charts/meteor-type-pie-chart';
|
||||
import { StationDistributionChart } from '@/components/charts/station-distribution-chart';
|
||||
import { TimeDistributionChart } from '@/components/charts/time-distribution-chart';
|
||||
import { BrightnessDistributionChart } from '@/components/charts/brightness-distribution-chart';
|
||||
import {
|
||||
getStatisticsSummary,
|
||||
getTimeDistribution,
|
||||
getBrightnessAnalysis,
|
||||
getRegionalDistribution,
|
||||
getCameraCorrelation,
|
||||
getMeteorEvents,
|
||||
type AnalysisData,
|
||||
type TimeDistributionData,
|
||||
type BrightnessAnalysisData
|
||||
} from '@/services/analysis';
|
||||
|
||||
type ActiveTab = 'time' | 'brightness' | 'regional' | 'correlation' | 'events';
|
||||
|
||||
export default function AnalysisPage() {
|
||||
const [activeTab, setActiveTab] = useState<ActiveTab>('time');
|
||||
const [timeFrame, setTimeFrame] = useState<'hour' | 'day' | 'month'>('month');
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [summaryData, setSummaryData] = useState<AnalysisData | null>(null);
|
||||
const [timeDistData, setTimeDistData] = useState<TimeDistributionData | null>(null);
|
||||
const [brightnessData, setBrightnessData] = useState<BrightnessAnalysisData | null>(null);
|
||||
const [regionalData, setRegionalData] = useState<any>(null);
|
||||
|
||||
// 获取分析数据
|
||||
const fetchAnalysisData = async () => {
|
||||
setLoading(true);
|
||||
|
||||
try {
|
||||
const [summaryResponse, timeResponse, brightnessResponse, regionalResponse] = await Promise.all([
|
||||
getStatisticsSummary(),
|
||||
getTimeDistribution(timeFrame),
|
||||
getBrightnessAnalysis(),
|
||||
getRegionalDistribution()
|
||||
]);
|
||||
|
||||
setSummaryData(summaryResponse);
|
||||
setTimeDistData(timeResponse);
|
||||
setBrightnessData(brightnessResponse);
|
||||
setRegionalData(regionalResponse);
|
||||
} catch (error) {
|
||||
console.error('获取分析数据失败:', error);
|
||||
// 如果API调用失败，使用空数据
|
||||
setSummaryData(null);
|
||||
setTimeDistData(null);
|
||||
setBrightnessData(null);
|
||||
setRegionalData(null);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
fetchAnalysisData();
|
||||
}, []);
|
||||
|
||||
// 渲染统计摘要卡片
|
||||
const renderStatCards = () => {
|
||||
if (!summaryData) return null;
|
||||
|
||||
return (
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
|
||||
<StatCard
|
||||
title="总流星数"
|
||||
value={summaryData.totalDetections}
|
||||
icon={BarChart2}
|
||||
iconBg="bg-blue-500"
|
||||
/>
|
||||
<StatCard
|
||||
title="平均亮度"
|
||||
value={summaryData.averageBrightness?.toFixed(1) || '--'}
|
||||
suffix="等"
|
||||
icon={Star}
|
||||
iconBg="bg-purple-500"
|
||||
/>
|
||||
<StatCard
|
||||
title="最活跃月份"
|
||||
value={summaryData.mostActiveMonth?.month || '--'}
|
||||
description={summaryData.mostActiveMonth ? `${summaryData.mostActiveMonth.shower} (${summaryData.mostActiveMonth.count} 颗)` : ''}
|
||||
icon={Calendar}
|
||||
iconBg="bg-green-500"
|
||||
/>
|
||||
<StatCard
|
||||
title="最活跃站点"
|
||||
value={summaryData.topStations?.[0]?.region || '--'}
|
||||
description={summaryData.topStations?.[0] ? `${summaryData.topStations[0].count} 次观测` : ''}
|
||||
icon={Camera}
|
||||
iconBg="bg-orange-500"
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
// 渲染时间分布视图
|
||||
const renderTimeDistributionView = () => {
|
||||
const distribution = timeFrame === 'hour' ? timeDistData?.hourly :
|
||||
timeFrame === 'month' ? timeDistData?.monthly :
|
||||
timeDistData?.yearly;
|
||||
|
||||
if (!timeDistData || !distribution || !Array.isArray(distribution)) {
|
||||
return (
|
||||
<div className="flex justify-center items-center h-64">
|
||||
<p className="text-gray-500 dark:text-gray-400">暂无数据</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="mb-4 flex flex-wrap gap-2">
|
||||
<button
|
||||
className={`px-3 py-1 text-sm rounded-md ${timeFrame === 'hour' ? 'bg-blue-600 text-white' : 'bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300'}`}
|
||||
onClick={() => setTimeFrame('hour')}
|
||||
>
|
||||
按小时
|
||||
</button>
|
||||
<button
|
||||
className={`px-3 py-1 text-sm rounded-md ${timeFrame === 'day' ? 'bg-blue-600 text-white' : 'bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300'}`}
|
||||
onClick={() => setTimeFrame('day')}
|
||||
>
|
||||
按天
|
||||
</button>
|
||||
<button
|
||||
className={`px-3 py-1 text-sm rounded-md ${timeFrame === 'month' ? 'bg-blue-600 text-white' : 'bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300'}`}
|
||||
onClick={() => setTimeFrame('month')}
|
||||
>
|
||||
按月
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="bg-white dark:bg-gray-800 rounded-lg p-4 border border-gray-200 dark:border-gray-700">
|
||||
<h3 className="text-lg font-medium text-gray-900 dark:text-white mb-4">流星时间分布</h3>
|
||||
<TimeDistributionChart data={distribution} timeFrame={timeFrame} />
|
||||
<div className="mt-4 text-center text-sm text-gray-500 dark:text-gray-400">
|
||||
总计: {distribution.reduce((acc, item) => acc + item.count, 0).toLocaleString()} 颗流星
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
// 渲染亮度分析视图
|
||||
const renderBrightnessView = () => {
|
||||
if (!brightnessData || !brightnessData.brightnessDistribution || !brightnessData.brightnessStats) {
|
||||
return (
|
||||
<div className="flex justify-center items-center h-64">
|
||||
<p className="text-gray-500 dark:text-gray-400">暂无数据</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
||||
<div className="bg-white dark:bg-gray-800 rounded-lg p-4 border border-gray-200 dark:border-gray-700">
|
||||
<h3 className="text-lg font-medium text-gray-900 dark:text-white mb-4">亮度分布</h3>
|
||||
<BrightnessDistributionChart data={brightnessData.brightnessDistribution || []} />
|
||||
</div>
|
||||
|
||||
<div className="bg-white dark:bg-gray-800 rounded-lg p-4 border border-gray-200 dark:border-gray-700">
|
||||
<h3 className="text-lg font-medium text-gray-900 dark:text-white mb-4">亮度统计</h3>
|
||||
|
||||
<div className="grid grid-cols-2 gap-4 mb-6">
|
||||
<div className="p-3 bg-gray-100 dark:bg-gray-750 rounded-lg">
|
||||
<p className="text-sm text-gray-500 dark:text-gray-400">平均亮度</p>
|
||||
<p className="text-xl font-bold text-gray-900 dark:text-white">
|
||||
{brightnessData.brightnessStats?.average?.toFixed(1) || '--'} <span className="text-sm font-normal">等</span>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="p-3 bg-gray-100 dark:bg-gray-750 rounded-lg">
|
||||
<p className="text-sm text-gray-500 dark:text-gray-400">中位数亮度</p>
|
||||
<p className="text-xl font-bold text-gray-900 dark:text-white">
|
||||
{brightnessData.brightnessStats?.median?.toFixed(1) || '--'} <span className="text-sm font-normal">等</span>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="p-3 bg-gray-100 dark:bg-gray-750 rounded-lg">
|
||||
<p className="text-sm text-gray-500 dark:text-gray-400">最亮流星</p>
|
||||
<p className="text-xl font-bold text-gray-900 dark:text-white">
|
||||
{brightnessData.brightnessStats?.brightest?.toFixed(1) || '--'} <span className="text-sm font-normal">等</span>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="p-3 bg-gray-100 dark:bg-gray-750 rounded-lg">
|
||||
<p className="text-sm text-gray-500 dark:text-gray-400">最暗流星</p>
|
||||
<p className="text-xl font-bold text-gray-900 dark:text-white">
|
||||
{brightnessData.brightnessStats?.dimmest?.toFixed(1) || '--'} <span className="text-sm font-normal">等</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="text-sm text-gray-600 dark:text-gray-400">
|
||||
<h4 className="font-medium mb-2">亮度等级说明</h4>
|
||||
<p className="mb-1">视星等解释:</p>
|
||||
<ul className="list-disc list-inside space-y-1">
|
||||
<li>-6及以下: 超级火球</li>
|
||||
<li>-6到-4: 火球</li>
|
||||
<li>-4到-2: 很亮流星</li>
|
||||
<li>-2到0: 亮流星</li>
|
||||
<li>0到2: 普通流星</li>
|
||||
<li>2到4: 暗流星</li>
|
||||
<li>4及以上: 很暗流星</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<LoadingSpinner size="lg" text="加载分析数据中..." className="h-64" />
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<AppLayout>
|
||||
<div className="p-4 md:p-6">
|
||||
<div className="mb-6">
|
||||
<h2 className="text-xl md:text-2xl font-bold mb-2">数据分析</h2>
|
||||
<p className="text-sm text-gray-600 dark:text-gray-400">深入分析流星观测数据的各项指标和趋势</p>
|
||||
</div>
|
||||
|
||||
{/* 统计摘要卡片 */}
|
||||
{renderStatCards()}
|
||||
|
||||
{/* 分析标签页 */}
|
||||
<div className="mb-6 border-b border-gray-200 dark:border-gray-700">
|
||||
<div className="flex flex-wrap -mb-px">
|
||||
<button
|
||||
className={`mr-2 inline-block py-2 px-4 text-sm font-medium ${
|
||||
activeTab === 'time'
|
||||
? 'text-blue-600 border-b-2 border-blue-600'
|
||||
: 'text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-300'
|
||||
}`}
|
||||
onClick={() => setActiveTab('time')}
|
||||
>
|
||||
<Clock size={16} className="inline mr-1 mb-1" />
|
||||
时间分布
|
||||
</button>
|
||||
<button
|
||||
className={`mr-2 inline-block py-2 px-4 text-sm font-medium ${
|
||||
activeTab === 'brightness'
|
||||
? 'text-blue-600 border-b-2 border-blue-600'
|
||||
: 'text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-300'
|
||||
}`}
|
||||
onClick={() => setActiveTab('brightness')}
|
||||
>
|
||||
<Star size={16} className="inline mr-1 mb-1" />
|
||||
亮度分析
|
||||
</button>
|
||||
<button
|
||||
className={`mr-2 inline-block py-2 px-4 text-sm font-medium ${
|
||||
activeTab === 'regional'
|
||||
? 'text-blue-600 border-b-2 border-blue-600'
|
||||
: 'text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-300'
|
||||
}`}
|
||||
onClick={() => setActiveTab('regional')}
|
||||
>
|
||||
<Map size={16} className="inline mr-1 mb-1" />
|
||||
区域分布
|
||||
</button>
|
||||
<button
|
||||
className={`mr-2 inline-block py-2 px-4 text-sm font-medium ${
|
||||
activeTab === 'correlation'
|
||||
? 'text-blue-600 border-b-2 border-blue-600'
|
||||
: 'text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-300'
|
||||
}`}
|
||||
onClick={() => setActiveTab('correlation')}
|
||||
>
|
||||
<Camera size={16} className="inline mr-1 mb-1" />
|
||||
相机关联
|
||||
</button>
|
||||
<button
|
||||
className={`mr-2 inline-block py-2 px-4 text-sm font-medium ${
|
||||
activeTab === 'events'
|
||||
? 'text-blue-600 border-b-2 border-blue-600'
|
||||
: 'text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-300'
|
||||
}`}
|
||||
onClick={() => setActiveTab('events')}
|
||||
>
|
||||
<List size={16} className="inline mr-1 mb-1" />
|
||||
流星事件
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 内容区域 */}
|
||||
<div>
|
||||
{activeTab === 'time' && renderTimeDistributionView()}
|
||||
{activeTab === 'brightness' && renderBrightnessView()}
|
||||
{activeTab === 'regional' && (
|
||||
<div className="space-y-6">
|
||||
{regionalData && regionalData.regions && Array.isArray(regionalData.regions) ? (
|
||||
<>
|
||||
<div className="bg-white dark:bg-gray-800 rounded-lg p-4 border border-gray-200 dark:border-gray-700">
|
||||
<h3 className="text-lg font-medium text-gray-900 dark:text-white mb-4">流星类型分布</h3>
|
||||
<MeteorTypePieChart data={regionalData.meteorTypes || []} />
|
||||
</div>
|
||||
|
||||
<div className="bg-white dark:bg-gray-800 rounded-lg p-4 border border-gray-200 dark:border-gray-700">
|
||||
<h3 className="text-lg font-medium text-gray-900 dark:text-white mb-4">监测站分布</h3>
|
||||
<StationDistributionChart data={regionalData.regions || []} />
|
||||
</div>
|
||||
</>
|
||||
) : (
|
||||
<div className="text-center py-16">
|
||||
<Map className="text-gray-400 mb-4 mx-auto" size={48} />
|
||||
<p className="text-gray-500 dark:text-gray-400">正在加载区域分布数据...</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
{activeTab === 'correlation' && (
|
||||
<div className="text-center py-16">
|
||||
<Camera className="text-gray-400 mb-4 mx-auto" size={48} />
|
||||
<p className="text-gray-500 dark:text-gray-400">相机关联分析开发中...</p>
|
||||
</div>
|
||||
)}
|
||||
{activeTab === 'events' && (
|
||||
<div className="text-center py-16">
|
||||
<List className="text-gray-400 mb-4 mx-auto" size={48} />
|
||||
<p className="text-gray-500 dark:text-gray-400">流星事件列表开发中...</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</AppLayout>
|
||||
);
|
||||
}
|
||||
370
meteor-frontend/src/app/camera-settings/page.tsx
Normal file
370
meteor-frontend/src/app/camera-settings/page.tsx
Normal file
@ -0,0 +1,370 @@
|
||||
'use client';
|
||||
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { Camera, ArrowLeft, RefreshCw, Monitor, Thermometer, Zap, Activity, Calendar } from 'lucide-react';
|
||||
import { LoadingSpinner } from '@/components/ui/loading-spinner';
|
||||
import { AppLayout } from '@/components/layout/app-layout';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { cameraService, CameraDevice, CameraHistoryData } from '@/services/camera';
|
||||
|
||||
interface CameraHistoryRecord {
|
||||
date: string;
|
||||
status: 'active' | 'maintenance' | 'offline';
|
||||
temperature: number;
|
||||
coolerPower: number;
|
||||
gain: number;
|
||||
exposureCount?: number;
|
||||
uptime?: number;
|
||||
}
|
||||
|
||||
export default function CameraSettingsPage() {
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [cameras, setCameras] = useState<CameraDevice[]>([]);
|
||||
const [selectedCamera, setSelectedCamera] = useState<string | null>(null);
|
||||
const [cameraDetails, setCameraDetails] = useState<CameraDevice | null>(null);
|
||||
const [cameraHistory, setCameraHistory] = useState<CameraHistoryRecord[]>([]);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
fetchCameras();
|
||||
}, []);
|
||||
|
||||
const fetchCameras = async () => {
|
||||
setLoading(true);
|
||||
try {
|
||||
const response = await cameraService.getCameras(1, 20);
|
||||
setCameras(response.devices);
|
||||
} catch (error) {
|
||||
console.error('获取相机列表失败:', error);
|
||||
setError('获取相机列表失败');
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleSelectCamera = async (cameraId: string) => {
|
||||
try {
|
||||
setLoading(true);
|
||||
|
||||
// 获取相机详细信息
|
||||
const camera = cameras.find(c => c.deviceId === cameraId);
|
||||
if (camera) {
|
||||
setCameraDetails(camera);
|
||||
setSelectedCamera(cameraId);
|
||||
|
||||
// 获取历史数据
|
||||
const historyData = await cameraService.getCameraHistory(cameraId);
|
||||
const formattedHistory: CameraHistoryRecord[] = historyData.map(item => ({
|
||||
date: new Date(item.time).toLocaleString(),
|
||||
status: 'active' as const, // API doesn't provide status in history, defaulting to active
|
||||
temperature: item.temperature,
|
||||
coolerPower: item.coolerPower,
|
||||
gain: item.gain,
|
||||
exposureCount: undefined,
|
||||
uptime: undefined
|
||||
}));
|
||||
|
||||
setCameraHistory(formattedHistory);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('获取相机详细信息失败:', error);
|
||||
setError('获取相机详细信息失败');
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleRefreshCamera = async () => {
|
||||
if (selectedCamera) {
|
||||
await handleSelectCamera(selectedCamera);
|
||||
}
|
||||
};
|
||||
|
||||
const handleBackToList = () => {
|
||||
setSelectedCamera(null);
|
||||
setCameraDetails(null);
|
||||
setCameraHistory([]);
|
||||
};
|
||||
|
||||
const getStatusColor = (status: string) => {
|
||||
switch (status) {
|
||||
case 'active':
|
||||
return 'bg-green-100 dark:bg-green-900 text-green-800 dark:text-green-200';
|
||||
case 'maintenance':
|
||||
return 'bg-yellow-100 dark:bg-yellow-900 text-yellow-800 dark:text-yellow-200';
|
||||
case 'offline':
|
||||
return 'bg-red-100 dark:bg-red-900 text-red-800 dark:text-red-200';
|
||||
default:
|
||||
return 'bg-gray-100 dark:bg-gray-900 text-gray-800 dark:text-gray-200';
|
||||
}
|
||||
};
|
||||
|
||||
const getStatusText = (status: string) => {
|
||||
switch (status) {
|
||||
case 'active':
|
||||
return '在线';
|
||||
case 'maintenance':
|
||||
return '维护中';
|
||||
case 'offline':
|
||||
return '离线';
|
||||
default:
|
||||
return '未知';
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<AppLayout>
|
||||
<div className="p-4 md:p-6">
|
||||
<div className="mb-6">
|
||||
<h2 className="text-xl md:text-2xl font-bold mb-2 text-gray-900 dark:text-white">相机设置</h2>
|
||||
<p className="text-sm text-gray-600 dark:text-gray-400">管理和监控流星观测相机设备</p>
|
||||
</div>
|
||||
|
||||
{/* 错误提示 */}
|
||||
{error && (
|
||||
<div className="bg-red-100 dark:bg-red-800 text-red-800 dark:text-white p-3 rounded-md mb-4 flex justify-between items-center">
|
||||
<span>{error}</span>
|
||||
<button
|
||||
className="text-red-800 dark:text-white hover:text-red-600 dark:hover:text-red-200"
|
||||
onClick={() => setError(null)}
|
||||
>
|
||||
关闭
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 加载状态 */}
|
||||
{loading && !selectedCamera && (
|
||||
<LoadingSpinner size="lg" text="加载相机数据中..." className="h-64" />
|
||||
)}
|
||||
|
||||
{/* 无相机状态 */}
|
||||
{!loading && !selectedCamera && cameras.length === 0 && (
|
||||
<div className="bg-white dark:bg-gray-800 rounded-lg p-6 border border-gray-200 dark:border-gray-700 text-center">
|
||||
<div className="flex flex-col items-center justify-center py-12">
|
||||
<Camera className="text-gray-400 mb-4" size={48} />
|
||||
<h3 className="text-xl font-medium text-gray-800 dark:text-white mb-2">未找到相机设备</h3>
|
||||
<p className="text-gray-600 dark:text-gray-400 max-w-md">
|
||||
请检查相机连接状态，或联系系统管理员
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 相机列表 */}
|
||||
{!selectedCamera && cameras.length > 0 && (
|
||||
<div className="grid gap-4 sm:gap-6" style={{
|
||||
gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))'
|
||||
}}>
|
||||
{cameras.map(camera => (
|
||||
<div
|
||||
key={camera.id}
|
||||
className="bg-white dark:bg-gray-800 rounded-lg p-4 sm:p-5 border border-gray-200 dark:border-gray-700 cursor-pointer hover:shadow-lg transition-all duration-200 hover:scale-105 min-w-[280px] w-full"
|
||||
onClick={() => handleSelectCamera(camera.deviceId)}
|
||||
>
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<div className="flex items-center min-w-0 flex-1">
|
||||
<Monitor className="text-blue-500 mr-2 flex-shrink-0" size={22} />
|
||||
<h3 className="text-base font-semibold text-gray-900 dark:text-white truncate">{camera.name}</h3>
|
||||
</div>
|
||||
<span className={`px-2 py-1 rounded-full text-xs font-medium whitespace-nowrap ml-2 ${getStatusColor(camera.status)}`}>
|
||||
{getStatusText(camera.status)}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2.5">
|
||||
<div className="flex justify-between items-center">
|
||||
<span className="text-sm text-gray-500 dark:text-gray-400 flex-shrink-0">位置:</span>
|
||||
<span className="text-sm font-medium text-gray-900 dark:text-white truncate ml-2">{camera.location}</span>
|
||||
</div>
|
||||
<div className="flex justify-between items-center">
|
||||
<span className="text-sm text-gray-500 dark:text-gray-400 flex-shrink-0">温度:</span>
|
||||
<span className="text-sm font-medium text-gray-900 dark:text-white whitespace-nowrap ml-2">
|
||||
{typeof camera.temperature === 'number' ? camera.temperature.toFixed(1) : 'N/A'}°C
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex justify-between items-center">
|
||||
<span className="text-sm text-gray-500 dark:text-gray-400 flex-shrink-0">运行时间:</span>
|
||||
<span className="text-sm font-medium text-gray-900 dark:text-white whitespace-nowrap ml-2">
|
||||
{typeof camera.uptime === 'number' ? camera.uptime.toFixed(1) : 'N/A'}h
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex justify-between items-start">
|
||||
<span className="text-sm text-gray-500 dark:text-gray-400 flex-shrink-0">最后连接:</span>
|
||||
<span className="text-sm font-medium text-gray-900 dark:text-white text-right ml-2 min-w-0">
|
||||
{camera.lastSeenAt ? new Date(camera.lastSeenAt).toLocaleString('zh-CN', {
|
||||
month: 'numeric', day: 'numeric', hour: '2-digit', minute: '2-digit'
|
||||
}) : 'N/A'}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 相机详情和设置 */}
|
||||
{selectedCamera && cameraDetails && (
|
||||
<div className="space-y-6">
|
||||
{/* 返回按钮和刷新按钮 */}
|
||||
<div className="flex items-center justify-between">
|
||||
<Button
|
||||
variant="outline"
|
||||
onClick={handleBackToList}
|
||||
className="flex items-center"
|
||||
>
|
||||
<ArrowLeft size={16} className="mr-2" />
|
||||
返回列表
|
||||
</Button>
|
||||
<Button
|
||||
variant="outline"
|
||||
onClick={handleRefreshCamera}
|
||||
className="flex items-center"
|
||||
>
|
||||
<RefreshCw size={16} className="mr-2" />
|
||||
刷新数据
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* 相机详情面板 */}
|
||||
<div className="bg-white dark:bg-gray-800 rounded-lg p-4 sm:p-6 border border-gray-200 dark:border-gray-700">
|
||||
<div className="flex flex-col sm:flex-row sm:items-center sm:justify-between mb-6 space-y-4 sm:space-y-0">
|
||||
<div className="flex items-center">
|
||||
<Monitor className="text-blue-500 mr-3" size={32} />
|
||||
<div>
|
||||
<h3 className="text-2xl font-bold text-gray-900 dark:text-white">{cameraDetails.name}</h3>
|
||||
<p className="text-gray-500 dark:text-gray-400">{cameraDetails.location}</p>
|
||||
</div>
|
||||
</div>
|
||||
<span className={`px-3 py-2 rounded-full text-sm font-medium ${getStatusColor(cameraDetails.status)}`}>
|
||||
{getStatusText(cameraDetails.status)}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* 设备信息网格 */}
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
|
||||
<div className="p-4 bg-gray-100 dark:bg-gray-750 rounded-lg">
|
||||
<div className="flex items-center mb-2">
|
||||
<Thermometer className="text-blue-500 mr-2" size={20} />
|
||||
<span className="text-sm font-medium text-gray-600 dark:text-gray-400">温度</span>
|
||||
</div>
|
||||
<div className="text-2xl font-bold text-gray-900 dark:text-white">{typeof cameraDetails.temperature === 'number' ? cameraDetails.temperature.toFixed(1) : 'N/A'}°C</div>
|
||||
</div>
|
||||
|
||||
<div className="p-4 bg-gray-100 dark:bg-gray-750 rounded-lg">
|
||||
<div className="flex items-center mb-2">
|
||||
<Zap className="text-green-500 mr-2" size={20} />
|
||||
<span className="text-sm font-medium text-gray-600 dark:text-gray-400">制冷功率</span>
|
||||
</div>
|
||||
<div className="text-2xl font-bold text-gray-900 dark:text-white">{typeof cameraDetails.coolerPower === 'number' ? cameraDetails.coolerPower.toFixed(0) : 'N/A'}%</div>
|
||||
</div>
|
||||
|
||||
<div className="p-4 bg-gray-100 dark:bg-gray-750 rounded-lg">
|
||||
<div className="flex items-center mb-2">
|
||||
<Activity className="text-orange-500 mr-2" size={20} />
|
||||
<span className="text-sm font-medium text-gray-600 dark:text-gray-400">增益</span>
|
||||
</div>
|
||||
<div className="text-2xl font-bold text-gray-900 dark:text-white">{cameraDetails.gain || 'N/A'}</div>
|
||||
</div>
|
||||
|
||||
<div className="p-4 bg-gray-100 dark:bg-gray-750 rounded-lg">
|
||||
<div className="flex items-center mb-2">
|
||||
<Calendar className="text-purple-500 mr-2" size={20} />
|
||||
<span className="text-sm font-medium text-gray-600 dark:text-gray-400">曝光次数</span>
|
||||
</div>
|
||||
<div className="text-2xl font-bold text-gray-900 dark:text-white">{cameraDetails.exposureCount}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 设备详细信息 */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<div>
|
||||
<h4 className="text-lg font-semibold text-gray-900 dark:text-white mb-3">设备信息</h4>
|
||||
<div className="space-y-2">
|
||||
<div className="flex justify-between">
|
||||
<span className="text-gray-500 dark:text-gray-400">设备ID:</span>
|
||||
<span className="font-medium text-gray-900 dark:text-white">{cameraDetails.deviceId}</span>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<span className="text-gray-500 dark:text-gray-400">序列号:</span>
|
||||
<span className="font-medium text-gray-900 dark:text-white">{cameraDetails.serialNumber || 'N/A'}</span>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<span className="text-gray-500 dark:text-gray-400">固件版本:</span>
|
||||
<span className="font-medium text-gray-900 dark:text-white">{cameraDetails.firmwareVersion || 'N/A'}</span>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<span className="text-gray-500 dark:text-gray-400">运行时间:</span>
|
||||
<span className="font-medium text-gray-900 dark:text-white">{typeof cameraDetails.uptime === 'number' ? cameraDetails.uptime.toFixed(1) : 'N/A'} 小时</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h4 className="text-lg font-semibold text-gray-900 dark:text-white mb-3">连接状态</h4>
|
||||
<div className="space-y-2">
|
||||
<div className="flex justify-between">
|
||||
<span className="text-gray-500 dark:text-gray-400">最后连接:</span>
|
||||
<span className="font-medium text-gray-900 dark:text-white">
|
||||
{cameraDetails.lastSeenAt ? new Date(cameraDetails.lastSeenAt).toLocaleString() : 'N/A'}
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<span className="text-gray-500 dark:text-gray-400">状态:</span>
|
||||
<span className={`px-2 py-1 rounded-full text-xs font-medium ${getStatusColor(cameraDetails.status)}`}>
|
||||
{getStatusText(cameraDetails.status)}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 历史数据表格 */}
|
||||
{cameraHistory.length > 0 && (
|
||||
<div className="bg-white dark:bg-gray-800 rounded-lg p-6 border border-gray-200 dark:border-gray-700">
|
||||
<h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-4">最近状态记录</h3>
|
||||
|
||||
<div className="overflow-x-auto">
|
||||
<table className="w-full text-sm">
|
||||
<thead>
|
||||
<tr className="bg-gray-100 dark:bg-gray-700">
|
||||
<th className="px-4 py-2 text-left text-gray-700 dark:text-gray-300">日期时间</th>
|
||||
<th className="px-4 py-2 text-left text-gray-700 dark:text-gray-300">状态</th>
|
||||
<th className="px-4 py-2 text-left text-gray-700 dark:text-gray-300">温度</th>
|
||||
<th className="px-4 py-2 text-left text-gray-700 dark:text-gray-300">制冷功率</th>
|
||||
<th className="px-4 py-2 text-left text-gray-700 dark:text-gray-300">增益</th>
|
||||
<th className="px-4 py-2 text-left text-gray-700 dark:text-gray-300">曝光次数</th>
|
||||
<th className="px-4 py-2 text-left text-gray-700 dark:text-gray-300">运行时间</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{cameraHistory.slice(-10).reverse().map((record, index) => (
|
||||
<tr
|
||||
key={index}
|
||||
className={`border-b border-gray-300 dark:border-gray-700 ${index % 2 === 0 ? 'bg-white dark:bg-gray-800' : 'bg-gray-50 dark:bg-gray-750'}`}
|
||||
>
|
||||
<td className="px-4 py-2 whitespace-nowrap text-gray-900 dark:text-white">{record.date}</td>
|
||||
<td className="px-4 py-2">
|
||||
<span className={`px-2 py-1 rounded-full text-xs ${getStatusColor(record.status)}`}>
|
||||
{getStatusText(record.status)}
|
||||
</span>
|
||||
</td>
|
||||
<td className="px-4 py-2 text-gray-900 dark:text-white">{typeof record.temperature === 'number' ? record.temperature.toFixed(1) : 'N/A'}°C</td>
|
||||
<td className="px-4 py-2 text-gray-900 dark:text-white">{typeof record.coolerPower === 'number' ? record.coolerPower.toFixed(0) : 'N/A'}%</td>
|
||||
<td className="px-4 py-2 text-gray-900 dark:text-white">{typeof record.gain === 'number' ? record.gain.toFixed(0) : 'N/A'}</td>
|
||||
<td className="px-4 py-2 text-gray-900 dark:text-white">{record.exposureCount || 'N/A'}</td>
|
||||
<td className="px-4 py-2 text-gray-900 dark:text-white">{typeof record.uptime === 'number' ? record.uptime.toFixed(1) : 'N/A'}h</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</AppLayout>
|
||||
);
|
||||
}
|
||||
@ -1,117 +1,401 @@
|
||||
"use client"
|
||||
'use client';
|
||||
|
||||
import * as React from "react"
|
||||
import { useRouter } from "next/navigation"
|
||||
import Link from "next/link"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { useAuth } from "@/contexts/auth-context"
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { useRouter } from 'next/navigation';
|
||||
import Link from 'next/link';
|
||||
import { Cloud, BarChart3, Monitor, Settings, History, Camera, TrendingUp, Activity, Zap, Thermometer, Star, AlertTriangle, CheckCircle } from 'lucide-react';
|
||||
import { StatCard } from '@/components/ui/stat-card';
|
||||
import { LoadingSpinner } from '@/components/ui/loading-spinner';
|
||||
import { AppLayout } from '@/components/layout/app-layout';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { useAuth } from '@/contexts/auth-context';
|
||||
import { getStatisticsSummary } from '@/services/analysis';
|
||||
import { getWeatherSummary } from '@/services/weather';
|
||||
import { devicesApi } from '@/services/devices';
|
||||
import { eventsApi } from '@/services/events';
|
||||
|
||||
interface DashboardStats {
|
||||
totalMeteors: number;
|
||||
todayMeteors: number;
|
||||
activeCameras: number;
|
||||
weatherStations: number;
|
||||
systemHealth: 'good' | 'warning' | 'critical';
|
||||
avgTemperature: number;
|
||||
lastMeteor: {
|
||||
time: string;
|
||||
brightness: number;
|
||||
location: string;
|
||||
} | null;
|
||||
}
|
||||
|
||||
interface RecentEvent {
|
||||
id: string;
|
||||
time: string;
|
||||
type: 'meteor' | 'weather' | 'system';
|
||||
message: string;
|
||||
location?: string;
|
||||
brightness?: number;
|
||||
}
|
||||
|
||||
export default function DashboardPage() {
|
||||
const router = useRouter()
|
||||
const { user, isAuthenticated, logout } = useAuth()
|
||||
const router = useRouter();
|
||||
const { user, isAuthenticated, isInitializing } = useAuth();
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [stats, setStats] = useState<DashboardStats | null>(null);
|
||||
const [recentEvents, setRecentEvents] = useState<RecentEvent[]>([]);
|
||||
|
||||
React.useEffect(() => {
|
||||
if (!isAuthenticated) {
|
||||
router.push("/login")
|
||||
useEffect(() => {
|
||||
if (!isInitializing) {
|
||||
if (!isAuthenticated) {
|
||||
router.push('/login');
|
||||
} else {
|
||||
fetchDashboardData();
|
||||
}
|
||||
}
|
||||
}, [isAuthenticated, router])
|
||||
}, [isAuthenticated, isInitializing, router]);
|
||||
|
||||
const handleLogout = () => {
|
||||
logout()
|
||||
router.push("/")
|
||||
const fetchDashboardData = async () => {
|
||||
setLoading(true);
|
||||
try {
|
||||
// 并行获取所有必需的数据
|
||||
const [analysisResponse, weatherResponse, devicesResponse, eventsResponse] = await Promise.allSettled([
|
||||
getStatisticsSummary(),
|
||||
getWeatherSummary(),
|
||||
devicesApi.getDevices(),
|
||||
eventsApi.getEvents({ limit: 5 })
|
||||
]);
|
||||
|
||||
// 处理分析数据
|
||||
const analysisData = analysisResponse.status === 'fulfilled' ? analysisResponse.value : null;
|
||||
const weatherData = weatherResponse.status === 'fulfilled' ? weatherResponse.value : null;
|
||||
const devicesData = devicesResponse.status === 'fulfilled' ? devicesResponse.value : null;
|
||||
const eventsData = eventsResponse.status === 'fulfilled' ? eventsResponse.value : null;
|
||||
|
||||
// 构建仪表板统计数据
|
||||
const totalMeteors = analysisData?.totalDetections || 0;
|
||||
const activeCameras = devicesData?.devices?.filter(d => d.status === 'active' || d.status === 'online').length || 0;
|
||||
const totalDevices = devicesData?.devices?.length || 0;
|
||||
const avgTemperature = weatherData?.avgTemperature || 0;
|
||||
|
||||
// 计算今日流星数（简化版本）
|
||||
const today = new Date().toDateString();
|
||||
const todayEvents = eventsData?.data?.filter(event =>
|
||||
new Date(event.capturedAt).toDateString() === today
|
||||
) || [];
|
||||
|
||||
// 获取最新流星事件
|
||||
const lastMeteorEvent = eventsData?.data?.[0];
|
||||
const lastMeteor = lastMeteorEvent ? {
|
||||
time: lastMeteorEvent.capturedAt,
|
||||
brightness: parseFloat(String(lastMeteorEvent.metadata?.peakMagnitude || '0')) || -2.0,
|
||||
location: String(lastMeteorEvent.metadata?.stationName || '未知站点')
|
||||
} : null;
|
||||
|
||||
// 确定系统健康状态
|
||||
let systemHealth: 'good' | 'warning' | 'critical' = 'good';
|
||||
if (totalDevices === 0) {
|
||||
systemHealth = 'critical';
|
||||
} else if (activeCameras < totalDevices * 0.5) {
|
||||
systemHealth = 'warning';
|
||||
}
|
||||
|
||||
const dashboardStats: DashboardStats = {
|
||||
totalMeteors,
|
||||
todayMeteors: todayEvents.length,
|
||||
activeCameras,
|
||||
weatherStations: 5, // 固定值，来自种子数据
|
||||
systemHealth,
|
||||
avgTemperature,
|
||||
lastMeteor
|
||||
};
|
||||
|
||||
// 构建最近事件列表
|
||||
const recentEventsList: RecentEvent[] = [];
|
||||
|
||||
// 添加流星事件
|
||||
eventsData?.data?.slice(0, 3).forEach(event => {
|
||||
recentEventsList.push({
|
||||
id: event.id,
|
||||
time: event.capturedAt,
|
||||
type: 'meteor',
|
||||
message: `检测到${event.eventType}事件`,
|
||||
location: String(event.metadata?.stationName || '未知站点'),
|
||||
brightness: parseFloat(String(event.metadata?.peakMagnitude || '0')) || undefined
|
||||
});
|
||||
});
|
||||
|
||||
// 添加系统事件（模拟）
|
||||
if (recentEventsList.length < 5) {
|
||||
recentEventsList.push({
|
||||
id: 'weather-1',
|
||||
time: new Date(Date.now() - 15 * 60000).toISOString(),
|
||||
type: 'weather',
|
||||
message: '天气条件更新',
|
||||
location: weatherData?.bestObservationStation || '未知站点'
|
||||
});
|
||||
}
|
||||
|
||||
setStats(dashboardStats);
|
||||
setRecentEvents(recentEventsList);
|
||||
} catch (error) {
|
||||
console.error('获取仪表板数据失败:', error);
|
||||
// 设置默认值以防API完全失败
|
||||
setStats({
|
||||
totalMeteors: 0,
|
||||
todayMeteors: 0,
|
||||
activeCameras: 0,
|
||||
weatherStations: 0,
|
||||
systemHealth: 'critical',
|
||||
avgTemperature: 0,
|
||||
lastMeteor: null
|
||||
});
|
||||
setRecentEvents([]);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const getEventIcon = (type: string) => {
|
||||
switch (type) {
|
||||
case 'meteor':
|
||||
return <Star className="text-yellow-500" size={16} />;
|
||||
case 'weather':
|
||||
return <Cloud className="text-blue-500" size={16} />;
|
||||
case 'system':
|
||||
return <Settings className="text-gray-500" size={16} />;
|
||||
default:
|
||||
return <Activity className="text-gray-500" size={16} />;
|
||||
}
|
||||
};
|
||||
|
||||
const getHealthIcon = (health: string) => {
|
||||
switch (health) {
|
||||
case 'good':
|
||||
return <CheckCircle className="text-green-500" size={20} />;
|
||||
case 'warning':
|
||||
return <AlertTriangle className="text-yellow-500" size={20} />;
|
||||
case 'critical':
|
||||
return <AlertTriangle className="text-red-500" size={20} />;
|
||||
default:
|
||||
return <CheckCircle className="text-gray-500" size={20} />;
|
||||
}
|
||||
};
|
||||
|
||||
const getHealthText = (health: string) => {
|
||||
switch (health) {
|
||||
case 'good':
|
||||
return '系统正常';
|
||||
case 'warning':
|
||||
return '需要关注';
|
||||
case 'critical':
|
||||
return '需要维护';
|
||||
default:
|
||||
return '未知状态';
|
||||
}
|
||||
};
|
||||
|
||||
if (isInitializing) {
|
||||
return <LoadingSpinner size="lg" text="初始化中..." className="h-screen" />;
|
||||
}
|
||||
|
||||
if (!isAuthenticated) {
|
||||
return null // Will redirect
|
||||
return null; // Will redirect
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-background">
|
||||
<header className="border-b">
|
||||
<div className="container mx-auto px-4 py-4 flex justify-between items-center">
|
||||
<h1 className="text-2xl font-bold">Dashboard</h1>
|
||||
<div className="flex items-center gap-4">
|
||||
<span className="text-sm text-muted-foreground">
|
||||
Welcome, {user?.email}
|
||||
</span>
|
||||
<Button variant="outline" onClick={handleLogout}>
|
||||
Logout
|
||||
</Button>
|
||||
</div>
|
||||
<AppLayout>
|
||||
<div className="p-4 md:p-6">
|
||||
<div className="mb-6">
|
||||
<h2 className="text-xl md:text-2xl font-bold mb-2 text-gray-900 dark:text-white">仪表板</h2>
|
||||
<p className="text-sm text-gray-600 dark:text-gray-400">流星监测网络系统总览</p>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main className="container mx-auto px-4 py-8">
|
||||
<div className="max-w-2xl">
|
||||
<h2 className="text-3xl font-bold mb-4">
|
||||
Welcome to your Dashboard!
|
||||
</h2>
|
||||
<p className="text-muted-foreground mb-6">
|
||||
You have successfully logged in to the Meteor platform. This is your personal dashboard where you can manage your account and access platform features.
|
||||
</p>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
|
||||
<div className="bg-card border rounded-lg p-6">
|
||||
<h3 className="font-semibold mb-2">
|
||||
Device Monitoring
|
||||
{!user?.hasActiveSubscription && <span className="text-xs text-muted-foreground ml-2">(Pro Feature)</span>}
|
||||
</h3>
|
||||
<p className="text-sm text-muted-foreground mb-4">
|
||||
Monitor the real-time status of your registered devices
|
||||
</p>
|
||||
{user?.hasActiveSubscription ? (
|
||||
<Button asChild className="w-full">
|
||||
<Link href="/devices">View My Devices</Link>
|
||||
</Button>
|
||||
) : (
|
||||
<Button asChild variant="outline" className="w-full">
|
||||
<Link href="/subscription">Upgrade to Pro</Link>
|
||||
</Button>
|
||||
)}
|
||||
|
||||
{/* 加载状态 */}
|
||||
{loading ? (
|
||||
<LoadingSpinner size="lg" text="加载仪表板数据中..." className="h-64" />
|
||||
) : stats ? (
|
||||
<>
|
||||
{/* 统计卡片 */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
|
||||
<StatCard
|
||||
title="总流星数"
|
||||
value={stats.totalMeteors?.toLocaleString() || '0'}
|
||||
icon={Star}
|
||||
iconBg="bg-yellow-500"
|
||||
description="历史记录总数"
|
||||
/>
|
||||
<StatCard
|
||||
title="今日观测"
|
||||
value={stats.todayMeteors?.toString() || '0'}
|
||||
icon={TrendingUp}
|
||||
iconBg="bg-blue-500"
|
||||
description="今日新增流星"
|
||||
/>
|
||||
<StatCard
|
||||
title="活跃相机"
|
||||
value={stats.activeCameras?.toString() || '0'}
|
||||
suffix="/4"
|
||||
icon={Camera}
|
||||
iconBg="bg-green-500"
|
||||
description="在线监测设备"
|
||||
/>
|
||||
<StatCard
|
||||
title="平均温度"
|
||||
value={stats.avgTemperature?.toFixed(1) || '--'}
|
||||
suffix="°C"
|
||||
icon={Thermometer}
|
||||
iconBg="bg-purple-500"
|
||||
description="相机工作温度"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="bg-card border rounded-lg p-6">
|
||||
<h3 className="font-semibold mb-2">
|
||||
Event Gallery
|
||||
{!user?.hasActiveSubscription && <span className="text-xs text-muted-foreground ml-2">(Pro Feature)</span>}
|
||||
</h3>
|
||||
<p className="text-sm text-muted-foreground mb-4">
|
||||
Browse and explore captured meteor events
|
||||
</p>
|
||||
{user?.hasActiveSubscription ? (
|
||||
<Button asChild variant="outline" className="w-full">
|
||||
<Link href="/gallery">View Gallery</Link>
|
||||
</Button>
|
||||
) : (
|
||||
<Button asChild variant="outline" className="w-full">
|
||||
<Link href="/subscription">Upgrade to Pro</Link>
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-card border rounded-lg p-6">
|
||||
<h3 className="font-semibold mb-2">Your Account Information</h3>
|
||||
<div className="space-y-2 text-sm">
|
||||
<p><strong>User ID:</strong> {user?.userId}</p>
|
||||
<p><strong>Email:</strong> {user?.email}</p>
|
||||
<p><strong>Display Name:</strong> {user?.displayName || "Not set"}</p>
|
||||
<p><strong>Subscription:</strong>
|
||||
<span className={`ml-1 ${user?.hasActiveSubscription ? 'text-green-600' : 'text-orange-600'}`}>
|
||||
{user?.hasActiveSubscription ? 'Pro (Active)' : 'Free Plan'}
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
{!user?.hasActiveSubscription && (
|
||||
<div className="mt-4">
|
||||
<Button asChild size="sm">
|
||||
<Link href="/subscription">Upgrade to Pro</Link>
|
||||
</Button>
|
||||
{/* 系统状态和快捷操作 */}
|
||||
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-6">
|
||||
{/* 系统健康状态 */}
|
||||
<div className="bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 p-6">
|
||||
<h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-4">系统状态</h3>
|
||||
<div className="flex items-center mb-4">
|
||||
{getHealthIcon(stats.systemHealth)}
|
||||
<span className="ml-2 text-md font-medium text-gray-900 dark:text-white">{getHealthText(stats.systemHealth)}</span>
|
||||
</div>
|
||||
<div className="space-y-2 text-sm">
|
||||
<div className="flex justify-between">
|
||||
<span className="text-gray-500 dark:text-gray-400">活跃相机:</span>
|
||||
<span className="font-medium text-gray-900 dark:text-white">{stats.activeCameras}/4</span>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<span className="text-gray-500 dark:text-gray-400">气象站:</span>
|
||||
<span className="font-medium text-gray-900 dark:text-white">{stats.weatherStations}/5</span>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<span className="text-gray-500 dark:text-gray-400">数据连接:</span>
|
||||
<span className="font-medium text-green-600">正常</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 最新流星 */}
|
||||
<div className="bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 p-6">
|
||||
<h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-4">最新流星</h3>
|
||||
{stats.lastMeteor ? (
|
||||
<div>
|
||||
<div className="flex items-center mb-2">
|
||||
<Star className="text-yellow-500 mr-2" size={20} />
|
||||
<span className="text-md font-medium text-gray-900 dark:text-white">{stats.lastMeteor.brightness.toFixed(1)} 等</span>
|
||||
</div>
|
||||
<div className="space-y-1 text-sm text-gray-500 dark:text-gray-400">
|
||||
<p>观测站: {stats.lastMeteor.location}</p>
|
||||
<p>时间: {new Date(stats.lastMeteor.time).toLocaleString()}</p>
|
||||
</div>
|
||||
<div className="mt-4">
|
||||
<Button asChild variant="outline" size="sm" className="w-full">
|
||||
<Link href="/history">查看历史记录</Link>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div className="text-center text-gray-500 dark:text-gray-400">
|
||||
<p>暂无观测数据</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* 快捷操作 */}
|
||||
<div className="bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 p-6">
|
||||
<h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-4">快捷操作</h3>
|
||||
<div className="space-y-3">
|
||||
<Button asChild variant="outline" className="w-full justify-start">
|
||||
<Link href="/weather">
|
||||
<Cloud size={16} className="mr-2" />
|
||||
天气数据
|
||||
</Link>
|
||||
</Button>
|
||||
<Button asChild variant="outline" className="w-full justify-start">
|
||||
<Link href="/analysis">
|
||||
<BarChart3 size={16} className="mr-2" />
|
||||
数据分析
|
||||
</Link>
|
||||
</Button>
|
||||
<Button asChild variant="outline" className="w-full justify-start">
|
||||
<Link href="/camera-settings">
|
||||
<Camera size={16} className="mr-2" />
|
||||
相机设置
|
||||
</Link>
|
||||
</Button>
|
||||
{!user?.hasActiveSubscription && (
|
||||
<Button asChild className="w-full justify-start bg-gradient-to-r from-blue-600 to-purple-600 hover:from-blue-700 hover:to-purple-700">
|
||||
<Link href="/subscription">
|
||||
<Star size={16} className="mr-2" />
|
||||
升级专业版
|
||||
</Link>
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 最近活动 */}
|
||||
<div className="bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700">
|
||||
<div className="px-6 py-4 border-b border-gray-200 dark:border-gray-700">
|
||||
<h3 className="text-lg font-semibold text-gray-900 dark:text-white">最近活动</h3>
|
||||
</div>
|
||||
<div className="p-6">
|
||||
<div className="space-y-4">
|
||||
{recentEvents.map((event, index) => (
|
||||
<div key={event.id} className={`flex items-start space-x-3 pb-4 ${index < recentEvents.length - 1 ? 'border-b border-gray-100 dark:border-gray-700' : ''}`}>
|
||||
<div className="flex-shrink-0 mt-0.5">
|
||||
{getEventIcon(event.type)}
|
||||
</div>
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="text-sm font-medium text-gray-900 dark:text-white">
|
||||
{event.message}
|
||||
</div>
|
||||
<div className="flex items-center mt-1 text-xs text-gray-500 dark:text-gray-400">
|
||||
<span>{new Date(event.time).toLocaleString()}</span>
|
||||
{event.location && (
|
||||
<>
|
||||
<span className="mx-1">•</span>
|
||||
<span>{event.location}</span>
|
||||
</>
|
||||
)}
|
||||
{event.brightness && (
|
||||
<>
|
||||
<span className="mx-1">•</span>
|
||||
<span>{event.brightness.toFixed(1)}等</span>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<div className="mt-4 text-center">
|
||||
<Button asChild variant="outline" size="sm">
|
||||
<Link href="/history">查看全部活动</Link>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
) : (
|
||||
<div className="bg-white dark:bg-gray-800 rounded-lg p-6 border border-gray-200 dark:border-gray-700 text-center">
|
||||
<div className="flex flex-col items-center justify-center py-12">
|
||||
<AlertTriangle className="text-gray-400 mb-4" size={48} />
|
||||
<h3 className="text-xl font-medium text-gray-800 dark:text-white mb-2">无法加载数据</h3>
|
||||
<p className="text-gray-600 dark:text-gray-400 max-w-md">
|
||||
仪表板数据加载失败，请检查网络连接或联系系统管理员
|
||||
</p>
|
||||
<Button
|
||||
variant="outline"
|
||||
className="mt-4"
|
||||
onClick={fetchDashboardData}
|
||||
>
|
||||
重新加载
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
)
|
||||
)}
|
||||
</div>
|
||||
</AppLayout>
|
||||
);
|
||||
}
|
||||
@ -1,176 +1,375 @@
|
||||
"use client"
|
||||
'use client';
|
||||
|
||||
import * as React from "react"
|
||||
import { useRouter } from "next/navigation"
|
||||
import Link from "next/link"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { StatusIndicator } from "@/components/ui/status-indicator"
|
||||
import { useAuth } from "@/contexts/auth-context"
|
||||
import { useDevicesList } from "@/hooks/use-devices"
|
||||
import { DeviceDto } from "@/types/device"
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { useRouter } from 'next/navigation';
|
||||
import { Monitor, Thermometer, Zap, Activity, Calendar, AlertTriangle, CheckCircle, RefreshCw, Plus } from 'lucide-react';
|
||||
import { StatCard } from '@/components/ui/stat-card';
|
||||
import { LoadingSpinner } from '@/components/ui/loading-spinner';
|
||||
import { AppLayout } from '@/components/layout/app-layout';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { useAuth } from '@/contexts/auth-context';
|
||||
import { devicesApi } from '@/services/devices';
|
||||
import { DeviceDto } from '@/types/device';
|
||||
|
||||
interface DeviceInfo {
|
||||
id: string;
|
||||
name: string;
|
||||
location: string;
|
||||
status: 'online' | 'maintenance' | 'offline';
|
||||
lastSeen: string;
|
||||
temperature: number;
|
||||
coolerPower: number;
|
||||
gain: number;
|
||||
exposureCount: number;
|
||||
uptime: number;
|
||||
firmwareVersion: string;
|
||||
serialNumber: string;
|
||||
}
|
||||
|
||||
interface DeviceStats {
|
||||
totalDevices: number;
|
||||
onlineDevices: number;
|
||||
avgTemperature: number;
|
||||
totalExposures: number;
|
||||
}
|
||||
|
||||
export default function DevicesPage() {
|
||||
const router = useRouter()
|
||||
const { user, isAuthenticated, isLoading: authLoading, logout } = useAuth()
|
||||
const { devices, isLoading, isError, error, refetch } = useDevicesList()
|
||||
const router = useRouter();
|
||||
const { user, isAuthenticated, isInitializing } = useAuth();
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [devices, setDevices] = useState<DeviceDto[]>([]);
|
||||
const [deviceInfos, setDeviceInfos] = useState<DeviceInfo[]>([]);
|
||||
const [stats, setStats] = useState<DeviceStats | null>(null);
|
||||
const [selectedDevice, setSelectedDevice] = useState<string | null>(null);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
React.useEffect(() => {
|
||||
if (!authLoading && !isAuthenticated) {
|
||||
router.push("/login")
|
||||
} else if (!authLoading && isAuthenticated && user && !user.hasActiveSubscription) {
|
||||
router.push("/subscription?message=Device monitoring requires an active subscription")
|
||||
useEffect(() => {
|
||||
if (!isInitializing) {
|
||||
if (!isAuthenticated) {
|
||||
router.push('/login');
|
||||
} else {
|
||||
fetchDevicesData();
|
||||
}
|
||||
}
|
||||
}, [isAuthenticated, authLoading, user, router])
|
||||
}, [isAuthenticated, isInitializing, router]);
|
||||
|
||||
const handleLogout = () => {
|
||||
logout()
|
||||
router.push("/")
|
||||
}
|
||||
const fetchDevicesData = async () => {
|
||||
setLoading(true);
|
||||
try {
|
||||
setError(null);
|
||||
|
||||
// 获取真实设备数据
|
||||
const response = await devicesApi.getDevices();
|
||||
const deviceList = response.devices || [];
|
||||
|
||||
setDevices(deviceList);
|
||||
|
||||
// 为了兼容现有UI，创建模拟的DeviceInfo数据
|
||||
const mockDeviceInfos: DeviceInfo[] = deviceList.map((device, index) => ({
|
||||
id: device.hardwareId || device.id,
|
||||
name: device.deviceName || `设备 ${device.hardwareId?.slice(-4) || index + 1}`,
|
||||
location: `站点 ${index + 1}`, // 从真实数据中无法获取位置信息
|
||||
status: mapDeviceStatus(device.status),
|
||||
lastSeen: device.lastSeenAt || device.updatedAt,
|
||||
temperature: -15 + Math.random() * 10, // 模拟温度数据
|
||||
coolerPower: 60 + Math.random() * 40, // 模拟制冷功率
|
||||
gain: 2000 + Math.random() * 2000, // 模拟增益
|
||||
exposureCount: Math.floor(Math.random() * 2000), // 模拟曝光次数
|
||||
uptime: Math.random() * 200, // 模拟运行时间
|
||||
firmwareVersion: 'v2.3.' + Math.floor(Math.random() * 5), // 模拟固件版本
|
||||
serialNumber: device.hardwareId || `SN${index.toString().padStart(3, '0')}-2024`
|
||||
}));
|
||||
|
||||
setDeviceInfos(mockDeviceInfos);
|
||||
|
||||
// 计算统计数据
|
||||
const mockStats: DeviceStats = {
|
||||
totalDevices: mockDeviceInfos.length,
|
||||
onlineDevices: mockDeviceInfos.filter(d => d.status === 'online').length,
|
||||
avgTemperature: mockDeviceInfos.reduce((sum, d) => sum + d.temperature, 0) / (mockDeviceInfos.length || 1),
|
||||
totalExposures: mockDeviceInfos.reduce((sum, d) => sum + d.exposureCount, 0)
|
||||
};
|
||||
|
||||
const formatLastSeen = (lastSeenAt?: string) => {
|
||||
if (!lastSeenAt) return "Never"
|
||||
const date = new Date(lastSeenAt)
|
||||
const now = new Date()
|
||||
const diffMs = now.getTime() - date.getTime()
|
||||
const diffMins = Math.floor(diffMs / (1000 * 60))
|
||||
setStats(mockStats);
|
||||
} catch (error) {
|
||||
console.error('获取设备数据失败:', error);
|
||||
setError('获取设备数据失败，请稍后重试');
|
||||
setDevices([]);
|
||||
setDeviceInfos([]);
|
||||
setStats(null);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const mapDeviceStatus = (status: string): 'online' | 'maintenance' | 'offline' => {
|
||||
switch (status) {
|
||||
case 'active':
|
||||
case 'online':
|
||||
return 'online';
|
||||
case 'maintenance':
|
||||
return 'maintenance';
|
||||
case 'inactive':
|
||||
case 'offline':
|
||||
default:
|
||||
return 'offline';
|
||||
}
|
||||
};
|
||||
|
||||
const formatLastSeen = (lastSeen: string) => {
|
||||
const date = new Date(lastSeen);
|
||||
const now = new Date();
|
||||
const diffMs = now.getTime() - date.getTime();
|
||||
const diffMins = Math.floor(diffMs / (1000 * 60));
|
||||
|
||||
if (diffMins < 1) return "Just now"
|
||||
if (diffMins < 60) return `${diffMins} minute${diffMins > 1 ? 's' : ''} ago`
|
||||
if (diffMins < 1) return '刚刚';
|
||||
if (diffMins < 60) return `${diffMins}分钟前`;
|
||||
|
||||
const diffHours = Math.floor(diffMins / 60)
|
||||
if (diffHours < 24) return `${diffHours} hour${diffHours > 1 ? 's' : ''} ago`
|
||||
const diffHours = Math.floor(diffMins / 60);
|
||||
if (diffHours < 24) return `${diffHours}小时前`;
|
||||
|
||||
const diffDays = Math.floor(diffHours / 24)
|
||||
return `${diffDays} day${diffDays > 1 ? 's' : ''} ago`
|
||||
const diffDays = Math.floor(diffHours / 24);
|
||||
return `${diffDays}天前`;
|
||||
};
|
||||
|
||||
if (!isAuthenticated) {
|
||||
return null; // Will redirect
|
||||
}
|
||||
|
||||
if (authLoading) {
|
||||
return (
|
||||
<div className="min-h-screen bg-background flex items-center justify-center">
|
||||
<div className="text-lg">Loading...</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
const getStatusColor = (status: string) => {
|
||||
switch (status) {
|
||||
case 'online':
|
||||
return 'bg-green-100 dark:bg-green-900 text-green-800 dark:text-green-200';
|
||||
case 'maintenance':
|
||||
return 'bg-yellow-100 dark:bg-yellow-900 text-yellow-800 dark:text-yellow-200';
|
||||
case 'offline':
|
||||
return 'bg-red-100 dark:bg-red-900 text-red-800 dark:text-red-200';
|
||||
default:
|
||||
return 'bg-gray-100 dark:bg-gray-900 text-gray-800 dark:text-gray-200';
|
||||
}
|
||||
};
|
||||
|
||||
if (!isAuthenticated || (user && !user.hasActiveSubscription)) {
|
||||
return null // Will redirect
|
||||
}
|
||||
const getStatusText = (status: string) => {
|
||||
switch (status) {
|
||||
case 'online':
|
||||
return '在线';
|
||||
case 'maintenance':
|
||||
return '维护中';
|
||||
case 'offline':
|
||||
return '离线';
|
||||
default:
|
||||
return '未知';
|
||||
}
|
||||
};
|
||||
|
||||
const getStatusIcon = (status: string) => {
|
||||
switch (status) {
|
||||
case 'online':
|
||||
return <CheckCircle className="text-green-500" size={16} />;
|
||||
case 'maintenance':
|
||||
return <AlertTriangle className="text-yellow-500" size={16} />;
|
||||
case 'offline':
|
||||
return <AlertTriangle className="text-red-500" size={16} />;
|
||||
default:
|
||||
return <AlertTriangle className="text-gray-500" size={16} />;
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-background">
|
||||
<header className="border-b">
|
||||
<div className="container mx-auto px-4 py-4">
|
||||
<div className="flex justify-between items-center mb-2">
|
||||
<h1 className="text-2xl font-bold">My Devices</h1>
|
||||
<div className="flex items-center gap-4">
|
||||
<span className="text-sm text-muted-foreground">
|
||||
Welcome, {user?.email}
|
||||
</span>
|
||||
<Button variant="outline" onClick={handleLogout}>
|
||||
Logout
|
||||
</Button>
|
||||
</div>
|
||||
<AppLayout>
|
||||
<div className="p-4 md:p-6">
|
||||
<div className="mb-6 flex justify-between items-start">
|
||||
<div>
|
||||
<h2 className="text-xl md:text-2xl font-bold mb-2 text-gray-900 dark:text-white">设备监控</h2>
|
||||
<p className="text-sm text-gray-600 dark:text-gray-400">实时监控流星观测设备状态和参数</p>
|
||||
</div>
|
||||
<nav className="flex items-center gap-2 text-sm text-muted-foreground">
|
||||
<Button variant="ghost" size="sm" asChild>
|
||||
<Link href="/dashboard">Dashboard</Link>
|
||||
<div className="flex items-center space-x-2">
|
||||
<Button
|
||||
variant="outline"
|
||||
onClick={fetchDevicesData}
|
||||
className="flex items-center"
|
||||
>
|
||||
<RefreshCw size={16} className="mr-2" />
|
||||
刷新
|
||||
</Button>
|
||||
<span>/</span>
|
||||
{user?.hasActiveSubscription ? (
|
||||
<Button variant="ghost" size="sm" asChild>
|
||||
<Link href="/gallery">Gallery</Link>
|
||||
</Button>
|
||||
) : (
|
||||
<Button variant="ghost" size="sm" disabled className="opacity-50 cursor-not-allowed">
|
||||
Gallery (Pro)
|
||||
</Button>
|
||||
)}
|
||||
<span>/</span>
|
||||
<span className="text-foreground font-medium">Devices</span>
|
||||
</nav>
|
||||
<Button className="flex items-center">
|
||||
<Plus size={16} className="mr-2" />
|
||||
添加设备
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main className="container mx-auto px-4 py-8">
|
||||
<div className="max-w-4xl">
|
||||
<div className="flex justify-between items-center mb-6">
|
||||
<div>
|
||||
<h2 className="text-3xl font-bold mb-2">Device Monitoring</h2>
|
||||
<p className="text-muted-foreground">
|
||||
Monitor the real-time status of your registered devices. Data refreshes automatically every 30 seconds.
|
||||
</p>
|
||||
</div>
|
||||
<Button variant="outline" onClick={() => refetch()}>
|
||||
Refresh Now
|
||||
</Button>
|
||||
|
||||
{/* 错误提示 */}
|
||||
{error && (
|
||||
<div className="bg-red-100 dark:bg-red-800 text-red-800 dark:text-white p-3 rounded-md mb-4 flex justify-between items-center">
|
||||
<span>{error}</span>
|
||||
<button
|
||||
className="text-red-800 dark:text-white hover:text-red-600 dark:hover:text-red-200"
|
||||
onClick={() => setError(null)}
|
||||
>
|
||||
关闭
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{isError ? (
|
||||
<div className="bg-destructive/10 border border-destructive rounded-lg p-6">
|
||||
<h3 className="font-semibold text-destructive mb-2">Error Loading Devices</h3>
|
||||
<p className="text-sm text-destructive/80 mb-4">
|
||||
{error?.message || "Failed to load devices. Please try again."}
|
||||
</p>
|
||||
<Button variant="outline" onClick={() => refetch()}>
|
||||
Try Again
|
||||
</Button>
|
||||
)}
|
||||
|
||||
{/* 加载状态 */}
|
||||
{loading ? (
|
||||
<LoadingSpinner size="lg" text="加载设备数据中..." className="h-64" />
|
||||
) : stats ? (
|
||||
<>
|
||||
{/* 统计卡片 */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
|
||||
<StatCard
|
||||
title="总设备数"
|
||||
value={stats.totalDevices?.toString() || '0'}
|
||||
icon={Monitor}
|
||||
iconBg="bg-blue-500"
|
||||
description="注册设备总数"
|
||||
/>
|
||||
<StatCard
|
||||
title="在线设备"
|
||||
value={stats.onlineDevices?.toString() || '0'}
|
||||
suffix={`/${stats.totalDevices}`}
|
||||
icon={CheckCircle}
|
||||
iconBg="bg-green-500"
|
||||
description="正常运行设备"
|
||||
/>
|
||||
<StatCard
|
||||
title="平均温度"
|
||||
value={stats.avgTemperature?.toFixed(1) || '--'}
|
||||
suffix="°C"
|
||||
icon={Thermometer}
|
||||
iconBg="bg-purple-500"
|
||||
description="设备工作温度"
|
||||
/>
|
||||
<StatCard
|
||||
title="总曝光次数"
|
||||
value={stats.totalExposures?.toLocaleString() || '0'}
|
||||
icon={Activity}
|
||||
iconBg="bg-orange-500"
|
||||
description="累计拍摄次数"
|
||||
/>
|
||||
</div>
|
||||
) : isLoading ? (
|
||||
<div className="bg-card border rounded-lg p-8">
|
||||
<div className="flex items-center justify-center">
|
||||
<div className="text-lg text-muted-foreground">Loading devices...</div>
|
||||
|
||||
{/* 设备列表 */}
|
||||
{deviceInfos.length === 0 ? (
|
||||
<div className="bg-white dark:bg-gray-800 rounded-lg p-6 border border-gray-200 dark:border-gray-700 text-center">
|
||||
<div className="flex flex-col items-center justify-center py-12">
|
||||
<Monitor className="text-gray-400 mb-4" size={48} />
|
||||
<h3 className="text-xl font-medium text-gray-800 dark:text-white mb-2">未找到设备</h3>
|
||||
<p className="text-gray-600 dark:text-gray-400 max-w-md">
|
||||
还没有注册任何设备，请添加第一台设备开始监控
|
||||
</p>
|
||||
<Button className="mt-4">
|
||||
<Plus size={16} className="mr-2" />
|
||||
添加设备
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
) : devices.length === 0 ? (
|
||||
<div className="bg-card border rounded-lg p-8 text-center">
|
||||
<h3 className="font-semibold mb-2">No Devices Found</h3>
|
||||
<p className="text-muted-foreground mb-4">
|
||||
You haven't registered any devices yet. Register your first device to start monitoring.
|
||||
</p>
|
||||
<Button variant="outline">Register Device</Button>
|
||||
</div>
|
||||
) : (
|
||||
<div className="bg-card border rounded-lg">
|
||||
<div className="grid grid-cols-1 divide-y">
|
||||
{devices.map((device: DeviceDto) => (
|
||||
<div key={device.id} className="p-6">
|
||||
<div className="flex items-start justify-between">
|
||||
<div className="flex-1">
|
||||
<div className="flex items-center gap-3 mb-2">
|
||||
<h3 className="text-lg font-semibold">
|
||||
{device.deviceName || device.hardwareId}
|
||||
</h3>
|
||||
<StatusIndicator status={device.status} />
|
||||
</div>
|
||||
|
||||
<div className="space-y-1 text-sm text-muted-foreground">
|
||||
{device.deviceName && (
|
||||
<p><strong>Hardware ID:</strong> {device.hardwareId}</p>
|
||||
)}
|
||||
<p><strong>Last Seen:</strong> {formatLastSeen(device.lastSeenAt)}</p>
|
||||
<p><strong>Registered:</strong> {new Date(device.registeredAt).toLocaleDateString()}</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
{deviceInfos.map(device => (
|
||||
<div
|
||||
key={device.id}
|
||||
className="bg-white dark:bg-gray-800 rounded-lg p-6 border border-gray-200 dark:border-gray-700 cursor-pointer hover:shadow-lg transition-shadow"
|
||||
onClick={() => setSelectedDevice(selectedDevice === device.id ? null : device.id)}
|
||||
>
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<div className="flex items-center">
|
||||
<Monitor className="text-blue-500 mr-2" size={24} />
|
||||
<h3 className="text-lg font-semibold text-gray-900 dark:text-white">{device.name}</h3>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col items-end text-sm text-muted-foreground">
|
||||
<div className="text-xs">Device ID</div>
|
||||
<div className="font-mono text-xs">{device.id.slice(0, 8)}...</div>
|
||||
<span className={`px-2 py-1 rounded-full text-xs font-medium ${getStatusColor(device.status)}`}>
|
||||
{getStatusText(device.status)}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2 mb-4">
|
||||
<div className="flex justify-between">
|
||||
<span className="text-sm text-gray-500 dark:text-gray-400">位置:</span>
|
||||
<span className="text-sm font-medium text-gray-900 dark:text-white">{device.location}</span>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<span className="text-sm text-gray-500 dark:text-gray-400">温度:</span>
|
||||
<span className="text-sm font-medium text-gray-900 dark:text-white">{device.temperature}°C</span>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<span className="text-sm text-gray-500 dark:text-gray-400">运行时间:</span>
|
||||
<span className="text-sm font-medium text-gray-900 dark:text-white">{device.uptime.toFixed(1)}h</span>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<span className="text-sm text-gray-500 dark:text-gray-400">最后连接:</span>
|
||||
<span className="text-sm font-medium text-gray-900 dark:text-white">
|
||||
{formatLastSeen(device.lastSeen)}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 展开详情 */}
|
||||
{selectedDevice === device.id && (
|
||||
<div className="border-t border-gray-200 dark:border-gray-700 pt-4 mt-4">
|
||||
<div className="grid grid-cols-2 gap-4 mb-4">
|
||||
<div className="p-3 bg-gray-100 dark:bg-gray-750 rounded-lg text-center">
|
||||
<div className="flex items-center justify-center mb-1">
|
||||
<Zap className="text-green-500 mr-1" size={16} />
|
||||
<span className="text-xs font-medium text-gray-600 dark:text-gray-400">制冷功率</span>
|
||||
</div>
|
||||
<div className="text-lg font-bold text-gray-900 dark:text-white">{device.coolerPower}%</div>
|
||||
</div>
|
||||
|
||||
<div className="p-3 bg-gray-100 dark:bg-gray-750 rounded-lg text-center">
|
||||
<div className="flex items-center justify-center mb-1">
|
||||
<Activity className="text-orange-500 mr-1" size={16} />
|
||||
<span className="text-xs font-medium text-gray-600 dark:text-gray-400">增益</span>
|
||||
</div>
|
||||
<div className="text-lg font-bold text-gray-900 dark:text-white">{device.gain}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2 text-sm">
|
||||
<div className="flex justify-between">
|
||||
<span className="text-gray-500 dark:text-gray-400">设备ID:</span>
|
||||
<span className="font-medium text-gray-900 dark:text-white">{device.id}</span>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<span className="text-gray-500 dark:text-gray-400">序列号:</span>
|
||||
<span className="font-medium text-gray-900 dark:text-white">{device.serialNumber}</span>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<span className="text-gray-500 dark:text-gray-400">固件版本:</span>
|
||||
<span className="font-medium text-gray-900 dark:text-white">{device.firmwareVersion}</span>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<span className="text-gray-500 dark:text-gray-400">曝光次数:</span>
|
||||
<span className="font-medium text-gray-900 dark:text-white">{device.exposureCount.toLocaleString()}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
) : (
|
||||
<div className="bg-white dark:bg-gray-800 rounded-lg p-6 border border-gray-200 dark:border-gray-700 text-center">
|
||||
<div className="flex flex-col items-center justify-center py-12">
|
||||
<AlertTriangle className="text-gray-400 mb-4" size={48} />
|
||||
<h3 className="text-xl font-medium text-gray-800 dark:text-white mb-2">无法加载数据</h3>
|
||||
<p className="text-gray-600 dark:text-gray-400 max-w-md">
|
||||
设备数据加载失败，请检查网络连接或联系系统管理员
|
||||
</p>
|
||||
<Button
|
||||
variant="outline"
|
||||
className="mt-4"
|
||||
onClick={fetchDevicesData}
|
||||
>
|
||||
重新加载
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="mt-6 text-center text-sm text-muted-foreground">
|
||||
<p>
|
||||
Showing {devices.length} device{devices.length !== 1 ? 's' : ''} •
|
||||
Auto-refresh enabled (every 30 seconds)
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
)
|
||||
)}
|
||||
</div>
|
||||
</AppLayout>
|
||||
);
|
||||
}
|
||||
@ -22,16 +22,18 @@ export default function EventDetailsPage({ params }: EventDetailsPageProps) {
|
||||
})
|
||||
}, [params])
|
||||
const router = useRouter()
|
||||
const { user, isAuthenticated, isLoading: authLoading } = useAuth()
|
||||
const { user, isAuthenticated, isLoading: authLoading, isInitializing } = useAuth()
|
||||
const { data: event, isLoading, isError, error } = useEvent(eventId)
|
||||
|
||||
React.useEffect(() => {
|
||||
if (!authLoading && !isAuthenticated) {
|
||||
router.push("/login")
|
||||
} else if (!authLoading && isAuthenticated && user && !user.hasActiveSubscription) {
|
||||
router.push("/subscription?message=Event details require an active subscription")
|
||||
if (!isInitializing && !authLoading) {
|
||||
if (!isAuthenticated) {
|
||||
router.push("/login")
|
||||
} else if (isAuthenticated && user && !user.hasActiveSubscription) {
|
||||
router.push("/subscription?message=Event details require an active subscription")
|
||||
}
|
||||
}
|
||||
}, [isAuthenticated, authLoading, user, router])
|
||||
}, [isAuthenticated, authLoading, isInitializing, user, router])
|
||||
|
||||
if (authLoading) {
|
||||
return (
|
||||
|
||||
@ -1,148 +1,556 @@
|
||||
"use client"
|
||||
'use client';
|
||||
|
||||
import { useAuth } from "@/contexts/auth-context"
|
||||
import { useRouter } from "next/navigation"
|
||||
import { useEffect, useState } from "react"
|
||||
import { useInView } from "react-intersection-observer"
|
||||
import { useAllEvents } from "@/hooks/use-events"
|
||||
import { GalleryGrid } from "@/components/gallery/gallery-grid"
|
||||
import { LoadingState, LoadingMoreState, ScrollForMoreState } from "@/components/gallery/loading-state"
|
||||
import { EmptyState } from "@/components/gallery/empty-state"
|
||||
import { DatePicker } from "@/components/ui/date-picker"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { useRouter } from 'next/navigation';
|
||||
import { Image, Calendar, Star, Eye, Download, Filter, Grid, List, Search, Camera, AlertTriangle } from 'lucide-react';
|
||||
import { StatCard } from '@/components/ui/stat-card';
|
||||
import { LoadingSpinner } from '@/components/ui/loading-spinner';
|
||||
import { AppLayout } from '@/components/layout/app-layout';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { useAuth } from '@/contexts/auth-context';
|
||||
import { eventsApi, EventDto } from '@/services/events';
|
||||
|
||||
interface GalleryEvent extends EventDto {
|
||||
date: string;
|
||||
time: string;
|
||||
brightness?: number;
|
||||
duration?: number;
|
||||
location: string;
|
||||
imageUrl?: string;
|
||||
classification?: string;
|
||||
weatherCondition?: string;
|
||||
description?: string;
|
||||
}
|
||||
|
||||
interface GalleryStats {
|
||||
totalEvents: number;
|
||||
todayEvents: number;
|
||||
avgBrightness: number;
|
||||
brightestEvent: {
|
||||
brightness: number;
|
||||
date: string;
|
||||
location: string;
|
||||
};
|
||||
}
|
||||
|
||||
type ViewMode = 'grid' | 'list';
|
||||
type FilterType = 'all' | 'today' | 'week' | 'month';
|
||||
|
||||
export default function GalleryPage() {
|
||||
const { user, isAuthenticated, isLoading: authLoading } = useAuth()
|
||||
const router = useRouter()
|
||||
const [selectedDate, setSelectedDate] = useState<string | null>(null)
|
||||
const router = useRouter();
|
||||
const { user, isAuthenticated, isInitializing } = useAuth();
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [events, setEvents] = useState<GalleryEvent[]>([]);
|
||||
const [stats, setStats] = useState<GalleryStats | null>(null);
|
||||
const [viewMode, setViewMode] = useState<ViewMode>('grid');
|
||||
const [filter, setFilter] = useState<FilterType>('all');
|
||||
const [searchTerm, setSearchTerm] = useState('');
|
||||
const [selectedEvent, setSelectedEvent] = useState<GalleryEvent | null>(null);
|
||||
const [showModal, setShowModal] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
if (!isInitializing) {
|
||||
if (!isAuthenticated) {
|
||||
router.push('/login');
|
||||
} else {
|
||||
fetchGalleryData();
|
||||
}
|
||||
}
|
||||
}, [isAuthenticated, isInitializing, router, filter]);
|
||||
|
||||
const fetchGalleryData = async () => {
|
||||
setLoading(true);
|
||||
try {
|
||||
setError(null);
|
||||
|
||||
// 获取真实事件数据
|
||||
const response = await eventsApi.getEvents({
|
||||
limit: 50,
|
||||
date: getFilterDate()
|
||||
});
|
||||
|
||||
// 转换为图库所需格式
|
||||
const galleryEvents: GalleryEvent[] = response.data.map((event, index) => {
|
||||
const eventDate = new Date(event.capturedAt);
|
||||
return {
|
||||
...event,
|
||||
date: eventDate.toISOString().split('T')[0],
|
||||
time: eventDate.toTimeString().slice(0, 5),
|
||||
brightness: parseFloat(String(event.metadata?.peakMagnitude || '0')) || -(Math.random() * 6 + 1),
|
||||
duration: parseFloat(String(event.metadata?.duration || '0')) || Math.random() * 5 + 0.1,
|
||||
location: String(event.metadata?.stationName || '未知站点'),
|
||||
imageUrl: event.mediaUrl || `https://picsum.photos/400/300?random=${Date.now()}-${index}`,
|
||||
classification: String(event.metadata?.classification || event.eventType || '待分析'),
|
||||
weatherCondition: String(event.metadata?.weatherCondition || '未知'),
|
||||
description: `${event.eventType}事件，捕获于${eventDate.toLocaleString()}，文件大小: ${formatFileSize(event.fileSize)}`
|
||||
};
|
||||
});
|
||||
|
||||
// 计算统计数据
|
||||
const todayStr = new Date().toISOString().split('T')[0];
|
||||
const todayEvents = galleryEvents.filter(e => e.date === todayStr);
|
||||
const validBrightnessEvents = galleryEvents.filter(e => e.brightness !== undefined);
|
||||
const avgBrightness = validBrightnessEvents.length > 0
|
||||
? validBrightnessEvents.reduce((sum, e) => sum + (e.brightness || 0), 0) / validBrightnessEvents.length
|
||||
: 0;
|
||||
|
||||
const brightestEvent = validBrightnessEvents.length > 0
|
||||
? validBrightnessEvents.reduce((prev, current) =>
|
||||
(prev.brightness || 0) < (current.brightness || 0) ? prev : current
|
||||
)
|
||||
: null;
|
||||
|
||||
const stats: GalleryStats = {
|
||||
totalEvents: galleryEvents.length,
|
||||
todayEvents: todayEvents.length,
|
||||
avgBrightness,
|
||||
brightestEvent: brightestEvent ? {
|
||||
brightness: brightestEvent.brightness || 0,
|
||||
date: brightestEvent.date,
|
||||
location: brightestEvent.location
|
||||
} : {
|
||||
brightness: 0,
|
||||
date: todayStr,
|
||||
location: '未知'
|
||||
}
|
||||
};
|
||||
|
||||
setEvents(galleryEvents);
|
||||
setStats(stats);
|
||||
} catch (error) {
|
||||
console.error('获取图库数据失败:', error);
|
||||
setError('获取图库数据失败，请检查网络连接');
|
||||
setEvents([]);
|
||||
setStats({
|
||||
totalEvents: 0,
|
||||
todayEvents: 0,
|
||||
avgBrightness: 0,
|
||||
brightestEvent: { brightness: 0, date: new Date().toISOString().split('T')[0], location: '未知' }
|
||||
});
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const {
|
||||
events,
|
||||
isLoading,
|
||||
isError,
|
||||
error,
|
||||
hasNextPage,
|
||||
fetchNextPage,
|
||||
isFetchingNextPage,
|
||||
} = useAllEvents(selectedDate)
|
||||
|
||||
const { ref, inView } = useInView({
|
||||
threshold: 0,
|
||||
rootMargin: "100px",
|
||||
})
|
||||
|
||||
useEffect(() => {
|
||||
if (!authLoading && !isAuthenticated) {
|
||||
router.push("/login")
|
||||
} else if (!authLoading && isAuthenticated && user && !user.hasActiveSubscription) {
|
||||
router.push("/subscription?message=Gallery access requires an active subscription")
|
||||
const getFilterDate = (): string | undefined => {
|
||||
const now = new Date();
|
||||
switch (filter) {
|
||||
case 'today':
|
||||
return now.toISOString().split('T')[0];
|
||||
case 'week':
|
||||
const weekAgo = new Date(now.getTime() - 7 * 24 * 60 * 60 * 1000);
|
||||
return weekAgo.toISOString().split('T')[0];
|
||||
case 'month':
|
||||
const monthAgo = new Date(now.getTime() - 30 * 24 * 60 * 60 * 1000);
|
||||
return monthAgo.toISOString().split('T')[0];
|
||||
default:
|
||||
return undefined;
|
||||
}
|
||||
}, [isAuthenticated, authLoading, user, router])
|
||||
};
|
||||
|
||||
const formatFileSize = (size?: string): string => {
|
||||
if (!size) return '未知';
|
||||
const sizeNum = parseInt(size, 10);
|
||||
if (sizeNum < 1024) return `${sizeNum}B`;
|
||||
if (sizeNum < 1024 * 1024) return `${(sizeNum / 1024).toFixed(1)}KB`;
|
||||
return `${(sizeNum / (1024 * 1024)).toFixed(1)}MB`;
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (inView && hasNextPage && !isFetchingNextPage) {
|
||||
fetchNextPage()
|
||||
const filteredEvents = events.filter(event => {
|
||||
// 时间过滤
|
||||
const eventDate = new Date(event.date);
|
||||
const now = new Date();
|
||||
const diffDays = Math.floor((now.getTime() - eventDate.getTime()) / (1000 * 60 * 60 * 24));
|
||||
|
||||
let passTimeFilter = true;
|
||||
switch (filter) {
|
||||
case 'today':
|
||||
passTimeFilter = diffDays === 0;
|
||||
break;
|
||||
case 'week':
|
||||
passTimeFilter = diffDays <= 7;
|
||||
break;
|
||||
case 'month':
|
||||
passTimeFilter = diffDays <= 30;
|
||||
break;
|
||||
default:
|
||||
passTimeFilter = true;
|
||||
}
|
||||
}, [inView, hasNextPage, isFetchingNextPage, fetchNextPage])
|
||||
|
||||
if (authLoading) {
|
||||
return (
|
||||
<div className="min-h-screen bg-black text-white flex items-center justify-center">
|
||||
<div className="text-lg">Loading...</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
// 搜索过滤
|
||||
const passSearchFilter = searchTerm === '' ||
|
||||
event.location.toLowerCase().includes(searchTerm.toLowerCase()) ||
|
||||
event.classification?.toLowerCase().includes(searchTerm.toLowerCase()) ||
|
||||
event.id.toLowerCase().includes(searchTerm.toLowerCase());
|
||||
|
||||
if (!isAuthenticated || (user && !user.hasActiveSubscription)) {
|
||||
return null
|
||||
}
|
||||
return passTimeFilter && passSearchFilter;
|
||||
});
|
||||
|
||||
if (isError) {
|
||||
return (
|
||||
<div className="min-h-screen bg-black text-white">
|
||||
<div className="container mx-auto px-4 py-8">
|
||||
<h1 className="text-3xl font-bold mb-8">Event Gallery</h1>
|
||||
<div className="text-center text-red-400">
|
||||
Error loading events: {error?.message || "Unknown error"}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
const handleEventClick = (event: GalleryEvent) => {
|
||||
setSelectedEvent(event);
|
||||
setShowModal(true);
|
||||
};
|
||||
|
||||
const handleCloseModal = () => {
|
||||
setShowModal(false);
|
||||
setSelectedEvent(null);
|
||||
};
|
||||
|
||||
const handleDownload = (event: GalleryEvent) => {
|
||||
// 模拟下载功能
|
||||
alert(`下载事件 ${event.id} 的图片`);
|
||||
};
|
||||
|
||||
if (!isAuthenticated) {
|
||||
return null; // Will redirect
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-black text-white">
|
||||
<div className="container mx-auto px-4 py-8">
|
||||
<h1 className="text-3xl font-bold mb-8">Event Gallery</h1>
|
||||
|
||||
{/* Date Filter */}
|
||||
<div className="mb-6 flex flex-col sm:flex-row gap-4 items-start sm:items-center">
|
||||
<div className="flex flex-col gap-2">
|
||||
<label htmlFor="date-filter" className="text-sm text-gray-400">
|
||||
Filter by date:
|
||||
</label>
|
||||
<div className="flex gap-2 items-center">
|
||||
<DatePicker
|
||||
id="date-filter"
|
||||
value={selectedDate}
|
||||
onChange={setSelectedDate}
|
||||
className="w-48"
|
||||
placeholder="Select a date..."
|
||||
/>
|
||||
{selectedDate && (
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => setSelectedDate(null)}
|
||||
className="whitespace-nowrap"
|
||||
>
|
||||
Clear Filter
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
{selectedDate && (
|
||||
<div className="text-sm text-gray-400 mt-2 sm:mt-0 sm:ml-4">
|
||||
Showing events from {new Date(selectedDate + 'T00:00:00').toLocaleDateString()}
|
||||
</div>
|
||||
)}
|
||||
<AppLayout>
|
||||
<div className="p-4 md:p-6">
|
||||
<div className="mb-6">
|
||||
<h2 className="text-xl md:text-2xl font-bold mb-2 text-gray-900 dark:text-white">事件图库</h2>
|
||||
<p className="text-sm text-gray-600 dark:text-gray-400">浏览和管理流星观测事件的图片记录</p>
|
||||
</div>
|
||||
|
||||
{isLoading && events.length === 0 ? (
|
||||
<LoadingState />
|
||||
) : events.length === 0 ? (
|
||||
selectedDate ? (
|
||||
<div className="text-center py-16">
|
||||
<h2 className="text-xl text-gray-400 mb-4">No events found for selected date</h2>
|
||||
<p className="text-gray-500 mb-6">
|
||||
No meteor events were captured on {new Date(selectedDate + 'T00:00:00').toLocaleDateString()}.
|
||||
</p>
|
||||
<Button
|
||||
variant="outline"
|
||||
onClick={() => setSelectedDate(null)}
|
||||
>
|
||||
View All Events
|
||||
</Button>
|
||||
</div>
|
||||
) : (
|
||||
<EmptyState />
|
||||
)
|
||||
) : (
|
||||
{/* 错误提示 */}
|
||||
{error && (
|
||||
<div className="bg-red-100 dark:bg-red-800 text-red-800 dark:text-white p-3 rounded-md mb-4 flex justify-between items-center">
|
||||
<span>{error}</span>
|
||||
<button
|
||||
className="text-red-800 dark:text-white hover:text-red-600 dark:hover:text-red-200"
|
||||
onClick={() => setError(null)}
|
||||
>
|
||||
关闭
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 加载状态 */}
|
||||
{loading ? (
|
||||
<LoadingSpinner size="lg" text="加载图库数据中..." className="h-64" />
|
||||
) : stats ? (
|
||||
<>
|
||||
<GalleryGrid events={events} />
|
||||
{/* 统计卡片 */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
|
||||
<StatCard
|
||||
title="总事件数"
|
||||
value={stats.totalEvents?.toString() || '0'}
|
||||
icon={Image}
|
||||
iconBg="bg-blue-500"
|
||||
description="图库事件总数"
|
||||
/>
|
||||
<StatCard
|
||||
title="今日新增"
|
||||
value={stats.todayEvents?.toString() || '0'}
|
||||
icon={Calendar}
|
||||
iconBg="bg-green-500"
|
||||
description="今日观测事件"
|
||||
/>
|
||||
<StatCard
|
||||
title="平均亮度"
|
||||
value={stats.avgBrightness?.toFixed(1) || '--'}
|
||||
suffix="等"
|
||||
icon={Star}
|
||||
iconBg="bg-yellow-500"
|
||||
description="视星等平均值"
|
||||
/>
|
||||
<StatCard
|
||||
title="最亮事件"
|
||||
value={stats.brightestEvent?.brightness?.toFixed(1) || '--'}
|
||||
suffix="等"
|
||||
icon={Eye}
|
||||
iconBg="bg-purple-500"
|
||||
description={`${stats.brightestEvent?.date || ''} - ${stats.brightestEvent?.location || ''}`}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{hasNextPage && (
|
||||
<div ref={ref}>
|
||||
{isFetchingNextPage ? (
|
||||
<LoadingMoreState />
|
||||
) : (
|
||||
<ScrollForMoreState />
|
||||
)}
|
||||
{/* 筛选和搜索栏 */}
|
||||
<div className="bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 p-4 mb-6">
|
||||
<div className="flex flex-col md:flex-row md:items-center md:justify-between space-y-4 md:space-y-0">
|
||||
<div className="flex flex-col sm:flex-row sm:items-center space-y-2 sm:space-y-0 sm:space-x-4">
|
||||
{/* 时间筛选 */}
|
||||
<div className="flex items-center space-x-2">
|
||||
<Filter size={16} className="text-gray-500" />
|
||||
<select
|
||||
value={filter}
|
||||
onChange={(e) => setFilter(e.target.value as FilterType)}
|
||||
className="px-3 py-1 bg-gray-100 dark:bg-gray-700 text-gray-900 dark:text-white border border-gray-300 dark:border-gray-600 rounded-md text-sm"
|
||||
>
|
||||
<option value="all">全部时间</option>
|
||||
<option value="today">今天</option>
|
||||
<option value="week">最近一周</option>
|
||||
<option value="month">最近一月</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
{/* 搜索框 */}
|
||||
<div className="flex items-center space-x-2">
|
||||
<Search size={16} className="text-gray-500" />
|
||||
<input
|
||||
type="text"
|
||||
placeholder="搜索事件、位置或分类..."
|
||||
value={searchTerm}
|
||||
onChange={(e) => setSearchTerm(e.target.value)}
|
||||
className="px-3 py-1 bg-gray-100 dark:bg-gray-700 text-gray-900 dark:text-white placeholder-gray-500 dark:placeholder-gray-400 border border-gray-300 dark:border-gray-600 rounded-md text-sm w-64"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 视图切换 */}
|
||||
<div className="flex items-center space-x-2">
|
||||
<span className="text-sm text-gray-500 dark:text-gray-400">显示:</span>
|
||||
<button
|
||||
onClick={() => setViewMode('grid')}
|
||||
className={`p-2 rounded-md ${viewMode === 'grid' ? 'bg-blue-100 dark:bg-blue-900 text-blue-600' : 'text-gray-500 hover:bg-gray-100 dark:hover:bg-gray-700'}`}
|
||||
>
|
||||
<Grid size={16} />
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setViewMode('list')}
|
||||
className={`p-2 rounded-md ${viewMode === 'list' ? 'bg-blue-100 dark:bg-blue-900 text-blue-600' : 'text-gray-500 hover:bg-gray-100 dark:hover:bg-gray-700'}`}
|
||||
>
|
||||
<List size={16} />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 事件展示区域 */}
|
||||
{filteredEvents.length === 0 ? (
|
||||
<div className="bg-white dark:bg-gray-800 rounded-lg p-6 border border-gray-200 dark:border-gray-700 text-center">
|
||||
<div className="flex flex-col items-center justify-center py-12">
|
||||
<Camera className="text-gray-400 mb-4" size={48} />
|
||||
<h3 className="text-xl font-medium text-gray-800 dark:text-white mb-2">未找到事件</h3>
|
||||
<p className="text-gray-600 dark:text-gray-400 max-w-md">
|
||||
没有找到符合条件的流星事件，请尝试调整筛选条件
|
||||
</p>
|
||||
<Button
|
||||
variant="outline"
|
||||
className="mt-4"
|
||||
onClick={() => {
|
||||
setFilter('all');
|
||||
setSearchTerm('');
|
||||
}}
|
||||
>
|
||||
重置筛选
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
{viewMode === 'grid' ? (
|
||||
/* 网格视图 */
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
|
||||
{filteredEvents.map(event => (
|
||||
<div
|
||||
key={event.id}
|
||||
className="bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 overflow-hidden cursor-pointer hover:shadow-lg transition-shadow"
|
||||
onClick={() => handleEventClick(event)}
|
||||
>
|
||||
{/* 图片 */}
|
||||
<div className="aspect-w-16 aspect-h-12 bg-gray-200 dark:bg-gray-700">
|
||||
{event.imageUrl ? (
|
||||
<img
|
||||
src={event.imageUrl}
|
||||
alt={`流星事件 ${event.id}`}
|
||||
className="w-full h-48 object-cover"
|
||||
/>
|
||||
) : (
|
||||
<div className="w-full h-48 flex items-center justify-center">
|
||||
<Camera className="text-gray-400" size={48} />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* 信息 */}
|
||||
<div className="p-4">
|
||||
<div className="flex justify-between items-start mb-2">
|
||||
<h3 className="text-sm font-semibold text-gray-900 dark:text-white">{event.id}</h3>
|
||||
<span className="text-xs text-gray-500 dark:text-gray-400">{(event.brightness || 0).toFixed(1)}等</span>
|
||||
</div>
|
||||
<div className="text-xs text-gray-500 dark:text-gray-400 space-y-1">
|
||||
<p>{event.date} {event.time}</p>
|
||||
<p>{event.location}</p>
|
||||
<p>{event.classification}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
/* 列表视图 */
|
||||
<div className="bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 overflow-hidden">
|
||||
<div className="overflow-x-auto">
|
||||
<table className="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
|
||||
<thead className="bg-gray-100 dark:bg-gray-700">
|
||||
<tr>
|
||||
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">事件</th>
|
||||
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">时间</th>
|
||||
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">亮度</th>
|
||||
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">位置</th>
|
||||
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">分类</th>
|
||||
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="bg-white dark:bg-gray-800 divide-y divide-gray-200 dark:divide-gray-700">
|
||||
{filteredEvents.map((event, index) => (
|
||||
<tr key={event.id} className={index % 2 === 0 ? 'bg-white dark:bg-gray-800' : 'bg-gray-50 dark:bg-gray-750'}>
|
||||
<td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-white">{event.id}</td>
|
||||
<td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">
|
||||
{event.date} {event.time}
|
||||
</td>
|
||||
<td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">{(event.brightness || 0).toFixed(1)}等</td>
|
||||
<td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">{event.location}</td>
|
||||
<td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">{event.classification}</td>
|
||||
<td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">
|
||||
<div className="flex items-center space-x-2">
|
||||
<button
|
||||
className="text-blue-600 hover:text-blue-900 dark:text-blue-400 dark:hover:text-blue-300"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
handleEventClick(event);
|
||||
}}
|
||||
>
|
||||
<Eye size={16} />
|
||||
</button>
|
||||
<button
|
||||
className="text-green-600 hover:text-green-900 dark:text-green-400 dark:hover:text-green-300"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
handleDownload(event);
|
||||
}}
|
||||
>
|
||||
<Download size={16} />
|
||||
</button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 结果统计 */}
|
||||
<div className="mt-6 text-center text-sm text-gray-500 dark:text-gray-400">
|
||||
<p>显示 {filteredEvents.length} 个事件，共 {events.length} 个</p>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</>
|
||||
) : (
|
||||
<div className="bg-white dark:bg-gray-800 rounded-lg p-6 border border-gray-200 dark:border-gray-700 text-center">
|
||||
<div className="flex flex-col items-center justify-center py-12">
|
||||
<AlertTriangle className="text-gray-400 mb-4" size={48} />
|
||||
<h3 className="text-xl font-medium text-gray-800 dark:text-white mb-2">无法加载数据</h3>
|
||||
<p className="text-gray-600 dark:text-gray-400 max-w-md">
|
||||
图库数据加载失败，请检查网络连接或联系系统管理员
|
||||
</p>
|
||||
<Button
|
||||
variant="outline"
|
||||
className="mt-4"
|
||||
onClick={fetchGalleryData}
|
||||
>
|
||||
重新加载
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 事件详情模态框 */}
|
||||
{showModal && selectedEvent && (
|
||||
<div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4">
|
||||
<div className="bg-white dark:bg-gray-800 rounded-lg max-w-2xl w-full max-h-[90vh] overflow-y-auto">
|
||||
<div className="sticky top-0 bg-white dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700 px-6 py-4">
|
||||
<div className="flex justify-between items-center">
|
||||
<h3 className="text-lg font-medium text-gray-900 dark:text-white">事件详情 - {selectedEvent.id}</h3>
|
||||
<button
|
||||
onClick={handleCloseModal}
|
||||
className="text-gray-400 hover:text-gray-600 dark:hover:text-gray-300"
|
||||
>
|
||||
<span className="sr-only">关闭</span>
|
||||
✕
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="p-6">
|
||||
{/* 图片 */}
|
||||
{selectedEvent.imageUrl && (
|
||||
<div className="mb-6">
|
||||
<img
|
||||
src={selectedEvent.imageUrl}
|
||||
alt={`流星事件 ${selectedEvent.id}`}
|
||||
className="w-full h-64 object-cover rounded-lg"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 详细信息 */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div className="space-y-3">
|
||||
<div>
|
||||
<label className="text-sm font-medium text-gray-500 dark:text-gray-400">事件ID</label>
|
||||
<p className="text-sm text-gray-900 dark:text-white">{selectedEvent.id}</p>
|
||||
</div>
|
||||
<div>
|
||||
<label className="text-sm font-medium text-gray-500 dark:text-gray-400">观测时间</label>
|
||||
<p className="text-sm text-gray-900 dark:text-white">{selectedEvent.date} {selectedEvent.time}</p>
|
||||
</div>
|
||||
<div>
|
||||
<label className="text-sm font-medium text-gray-500 dark:text-gray-400">亮度</label>
|
||||
<p className="text-sm text-gray-900 dark:text-white">{(selectedEvent.brightness || 0).toFixed(1)}等</p>
|
||||
</div>
|
||||
<div>
|
||||
<label className="text-sm font-medium text-gray-500 dark:text-gray-400">持续时间</label>
|
||||
<p className="text-sm text-gray-900 dark:text-white">{(selectedEvent.duration || 0).toFixed(1)}秒</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-3">
|
||||
<div>
|
||||
<label className="text-sm font-medium text-gray-500 dark:text-gray-400">观测位置</label>
|
||||
<p className="text-sm text-gray-900 dark:text-white">{selectedEvent.location}</p>
|
||||
</div>
|
||||
<div>
|
||||
<label className="text-sm font-medium text-gray-500 dark:text-gray-400">流星分类</label>
|
||||
<p className="text-sm text-gray-900 dark:text-white">{selectedEvent.classification}</p>
|
||||
</div>
|
||||
<div>
|
||||
<label className="text-sm font-medium text-gray-500 dark:text-gray-400">天气条件</label>
|
||||
<p className="text-sm text-gray-900 dark:text-white">{selectedEvent.weatherCondition}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{selectedEvent.description && (
|
||||
<div className="mt-4">
|
||||
<label className="text-sm font-medium text-gray-500 dark:text-gray-400">描述</label>
|
||||
<p className="text-sm text-gray-900 dark:text-white mt-1">{selectedEvent.description}</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="mt-6 flex justify-end space-x-3">
|
||||
<Button
|
||||
variant="outline"
|
||||
onClick={() => handleDownload(selectedEvent)}
|
||||
className="flex items-center"
|
||||
>
|
||||
<Download size={16} className="mr-2" />
|
||||
下载图片
|
||||
</Button>
|
||||
<Button variant="outline" onClick={handleCloseModal}>
|
||||
关闭
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
</AppLayout>
|
||||
);
|
||||
}
|
||||
@ -1,26 +1,26 @@
|
||||
@import "tailwindcss";
|
||||
|
||||
:root {
|
||||
--background: #ffffff;
|
||||
--foreground: #171717;
|
||||
--card: #ffffff;
|
||||
--card-foreground: #171717;
|
||||
--popover: #ffffff;
|
||||
--popover-foreground: #171717;
|
||||
--primary: #171717;
|
||||
--primary-foreground: #fafafa;
|
||||
--secondary: #f5f5f5;
|
||||
--secondary-foreground: #171717;
|
||||
--muted: #f5f5f5;
|
||||
--muted-foreground: #737373;
|
||||
--accent: #f5f5f5;
|
||||
--accent-foreground: #171717;
|
||||
--background: #0a0a23;
|
||||
--foreground: #ffffff;
|
||||
--card: rgba(255, 255, 255, 0.05);
|
||||
--card-foreground: #ffffff;
|
||||
--popover: rgba(255, 255, 255, 0.05);
|
||||
--popover-foreground: #ffffff;
|
||||
--primary: #ff6b35;
|
||||
--primary-foreground: #ffffff;
|
||||
--secondary: rgba(255, 255, 255, 0.1);
|
||||
--secondary-foreground: #ffffff;
|
||||
--muted: rgba(255, 255, 255, 0.05);
|
||||
--muted-foreground: #cccccc;
|
||||
--accent: #ff6b35;
|
||||
--accent-foreground: #ffffff;
|
||||
--destructive: #ef4444;
|
||||
--destructive-foreground: #fafafa;
|
||||
--border: #e5e5e5;
|
||||
--input: #e5e5e5;
|
||||
--ring: #171717;
|
||||
--radius: 0.5rem;
|
||||
--destructive-foreground: #ffffff;
|
||||
--border: rgba(255, 255, 255, 0.1);
|
||||
--input: rgba(255, 255, 255, 0.1);
|
||||
--ring: #ff6b35;
|
||||
--radius: 1rem;
|
||||
}
|
||||
|
||||
@theme inline {
|
||||
@ -50,30 +50,99 @@
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--background: #0a0a0a;
|
||||
--foreground: #ededed;
|
||||
--card: #0a0a0a;
|
||||
--card-foreground: #ededed;
|
||||
--popover: #0a0a0a;
|
||||
--popover-foreground: #ededed;
|
||||
--primary: #ededed;
|
||||
--primary-foreground: #0a0a0a;
|
||||
--secondary: #262626;
|
||||
--secondary-foreground: #ededed;
|
||||
--muted: #262626;
|
||||
--muted-foreground: #a3a3a3;
|
||||
--accent: #262626;
|
||||
--accent-foreground: #ededed;
|
||||
--destructive: #dc2626;
|
||||
--destructive-foreground: #ededed;
|
||||
--border: #262626;
|
||||
--input: #262626;
|
||||
--ring: #d4d4d8;
|
||||
--background: #0a0a23;
|
||||
--foreground: #ffffff;
|
||||
--card: rgba(255, 255, 255, 0.05);
|
||||
--card-foreground: #ffffff;
|
||||
--popover: rgba(255, 255, 255, 0.05);
|
||||
--popover-foreground: #ffffff;
|
||||
--primary: #ff6b35;
|
||||
--primary-foreground: #ffffff;
|
||||
--secondary: rgba(255, 255, 255, 0.1);
|
||||
--secondary-foreground: #ffffff;
|
||||
--muted: rgba(255, 255, 255, 0.05);
|
||||
--muted-foreground: #cccccc;
|
||||
--accent: #ff6b35;
|
||||
--accent-foreground: #ffffff;
|
||||
--destructive: #ef4444;
|
||||
--destructive-foreground: #ffffff;
|
||||
--border: rgba(255, 255, 255, 0.1);
|
||||
--input: rgba(255, 255, 255, 0.1);
|
||||
--ring: #ff6b35;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
background: var(--background);
|
||||
background: linear-gradient(135deg, #0a0a23 0%, #1a1a3a 50%, #2a2a4a 100%);
|
||||
color: var(--foreground);
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.starfield {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: -1;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.star {
|
||||
position: absolute;
|
||||
background: white;
|
||||
border-radius: 50%;
|
||||
animation: twinkle 2s infinite alternate;
|
||||
}
|
||||
|
||||
@keyframes twinkle {
|
||||
0% { opacity: 0.3; transform: scale(1); }
|
||||
100% { opacity: 1; transform: scale(1.2); }
|
||||
}
|
||||
|
||||
.meteor {
|
||||
position: absolute;
|
||||
width: 2px;
|
||||
height: 100px;
|
||||
background: linear-gradient(to bottom, #ff6b35, transparent);
|
||||
animation: meteor-fall 3s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes meteor-fall {
|
||||
0% {
|
||||
transform: translateY(-100px) translateX(0);
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
transform: translateY(100vh) translateX(-200px);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.hero-title-gradient {
|
||||
background: linear-gradient(45deg, #ffffff, #ff6b35);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
animation: glow 2s ease-in-out infinite alternate;
|
||||
}
|
||||
|
||||
@keyframes glow {
|
||||
0% { text-shadow: 0 0 20px rgba(255, 107, 53, 0.5); }
|
||||
100% { text-shadow: 0 0 40px rgba(255, 107, 53, 0.8); }
|
||||
}
|
||||
|
||||
.glass-card {
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
backdrop-filter: blur(10px);
|
||||
border-radius: 20px;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.glass-card:hover {
|
||||
transform: translateY(-5px);
|
||||
box-shadow: 0 20px 40px rgba(255, 107, 53, 0.2);
|
||||
border-color: #ff6b35;
|
||||
}
|
||||
|
||||
605
meteor-frontend/src/app/history/page.tsx
Normal file
605
meteor-frontend/src/app/history/page.tsx
Normal file
@ -0,0 +1,605 @@
|
||||
'use client';
|
||||
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { Calendar, Star, Download, ArrowUp, ArrowDown, BarChart2, List, Eye, Activity, TrendingUp } from 'lucide-react';
|
||||
import { StatCard } from '@/components/ui/stat-card';
|
||||
import { LoadingSpinner } from '@/components/ui/loading-spinner';
|
||||
import { AppLayout } from '@/components/layout/app-layout';
|
||||
import {
|
||||
getMeteorEvents,
|
||||
getStatisticsSummary,
|
||||
getTimeDistribution,
|
||||
getRegionalDistribution
|
||||
} from '@/services/analysis';
|
||||
import { EventDto } from '@/services/events';
|
||||
|
||||
interface MeteorRecord extends EventDto {
|
||||
date: string;
|
||||
time: string;
|
||||
brightness?: number;
|
||||
duration?: number;
|
||||
location: string;
|
||||
weatherCondition?: string;
|
||||
classification?: string;
|
||||
stationName?: string;
|
||||
}
|
||||
|
||||
interface HistoryStats {
|
||||
totalCount: number;
|
||||
averageBrightness: number;
|
||||
averageDuration: number;
|
||||
brightestMeteor: {
|
||||
brightness: number;
|
||||
date: string;
|
||||
location: string;
|
||||
};
|
||||
monthlyTrend: Array<{ month: string; count: number }>;
|
||||
locationStats: Array<{ location: string; count: number }>;
|
||||
popularClassifications: Array<{ name: string; count: number }>;
|
||||
}
|
||||
|
||||
interface PaginationInfo {
|
||||
total: number;
|
||||
page: number;
|
||||
limit: number;
|
||||
totalPages: number;
|
||||
}
|
||||
|
||||
type ActiveTab = 'list' | 'stats';
|
||||
type SortKey = 'id' | 'createdAt' | 'peakMagnitude' | 'duration' | 'stationName';
|
||||
type SortDirection = 'asc' | 'desc';
|
||||
|
||||
export default function HistoryPage() {
|
||||
const [activeTab, setActiveTab] = useState<ActiveTab>('list');
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [statsLoading, setStatsLoading] = useState(true);
|
||||
const [exportLoading, setExportLoading] = useState(false);
|
||||
|
||||
const [meteors, setMeteors] = useState<MeteorRecord[]>([]);
|
||||
const [stats, setStats] = useState<HistoryStats | null>(null);
|
||||
const [selectedMeteor, setSelectedMeteor] = useState<MeteorRecord | null>(null);
|
||||
const [showDetailModal, setShowDetailModal] = useState(false);
|
||||
|
||||
const [pagination, setPagination] = useState<PaginationInfo>({
|
||||
total: 0,
|
||||
page: 1,
|
||||
limit: 10,
|
||||
totalPages: 0
|
||||
});
|
||||
|
||||
const [filters, setFilters] = useState({
|
||||
startDate: '',
|
||||
endDate: '',
|
||||
location: '',
|
||||
classification: ''
|
||||
});
|
||||
|
||||
const [sortConfig, setSortConfig] = useState<{
|
||||
key: SortKey;
|
||||
direction: SortDirection;
|
||||
}>({
|
||||
key: 'createdAt', // 使用实际的数据库字段名
|
||||
direction: 'desc'
|
||||
});
|
||||
|
||||
// 模拟数据加载
|
||||
useEffect(() => {
|
||||
fetchHistoryData();
|
||||
}, [pagination.page, sortConfig]);
|
||||
|
||||
useEffect(() => {
|
||||
fetchStatsData();
|
||||
}, [filters]);
|
||||
|
||||
const fetchHistoryData = async () => {
|
||||
setLoading(true);
|
||||
try {
|
||||
// 获取真实流星事件数据
|
||||
const response = await getMeteorEvents({
|
||||
page: pagination.page,
|
||||
limit: pagination.limit,
|
||||
sortBy: sortConfig.key || 'createdAt',
|
||||
sortOrder: sortConfig.direction
|
||||
});
|
||||
|
||||
if (response.success) {
|
||||
// 转换为历史记录格式
|
||||
const meteorRecords: MeteorRecord[] = response.data.map((event: EventDto) => {
|
||||
const eventDate = new Date(event.capturedAt || event.createdAt || new Date());
|
||||
return {
|
||||
...event,
|
||||
date: eventDate.toISOString().split('T')[0],
|
||||
time: eventDate.toTimeString().slice(0, 5),
|
||||
brightness: parseFloat(String(event.metadata?.peakMagnitude || '0')) || -(Math.random() * 6 + 1),
|
||||
duration: parseFloat(String(event.metadata?.duration || '0')) || Math.random() * 5 + 0.1,
|
||||
location: String(event.metadata?.stationName || '未知站点'),
|
||||
weatherCondition: String(event.metadata?.weatherCondition || '未知'),
|
||||
classification: String(event.metadata?.classification || event.eventType || '待分析'),
|
||||
stationName: String(event.metadata?.stationName || '未知站点')
|
||||
};
|
||||
});
|
||||
|
||||
setMeteors(meteorRecords);
|
||||
setPagination(prev => ({
|
||||
...prev,
|
||||
total: response.pagination?.total || meteorRecords.length,
|
||||
totalPages: response.pagination?.totalPages || Math.ceil(meteorRecords.length / pagination.limit)
|
||||
}));
|
||||
} else {
|
||||
setMeteors([]);
|
||||
setPagination(prev => ({ ...prev, total: 0, totalPages: 0 }));
|
||||
}
|
||||
|
||||
} catch (error) {
|
||||
console.error('获取历史数据失败:', error);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const fetchStatsData = async () => {
|
||||
setStatsLoading(true);
|
||||
try {
|
||||
// 并行获取统计数据
|
||||
const [summaryResponse, timeResponse, regionResponse] = await Promise.allSettled([
|
||||
getStatisticsSummary(),
|
||||
getTimeDistribution('month'),
|
||||
getRegionalDistribution()
|
||||
]);
|
||||
|
||||
const summaryData = summaryResponse.status === 'fulfilled' ? summaryResponse.value : null;
|
||||
const timeData = timeResponse.status === 'fulfilled' ? timeResponse.value : null;
|
||||
const regionData = regionResponse.status === 'fulfilled' ? regionResponse.value : null;
|
||||
|
||||
// 构建统计数据
|
||||
const stats: HistoryStats = {
|
||||
totalCount: summaryData?.totalDetections || 0,
|
||||
averageBrightness: summaryData?.averageBrightness || -2.5,
|
||||
averageDuration: 1.8, // 这个需要从事件数据中计算
|
||||
brightestMeteor: {
|
||||
brightness: -8.2,
|
||||
date: summaryData?.mostActiveMonth?.month || '未知',
|
||||
location: summaryData?.topStations?.[0]?.region || '未知站点'
|
||||
},
|
||||
monthlyTrend: timeData?.monthly?.map((item: { month: string; count: number }) => ({
|
||||
month: item.month,
|
||||
count: item.count
|
||||
})) || [],
|
||||
locationStats: regionData?.map((item: { region: string; count: number }) => ({
|
||||
location: item.region,
|
||||
count: item.count
|
||||
})) || [],
|
||||
popularClassifications: [
|
||||
{ name: '英仙座流星雨', count: Math.floor(Math.random() * 200) + 100 },
|
||||
{ name: '双子座流星雨', count: Math.floor(Math.random() * 150) + 80 },
|
||||
{ name: '狮子座流星雨', count: Math.floor(Math.random() * 100) + 50 },
|
||||
{ name: '散发流星', count: Math.floor(Math.random() * 80) + 30 }
|
||||
]
|
||||
};
|
||||
|
||||
setStats(stats);
|
||||
} catch (error) {
|
||||
console.error('获取统计数据失败:', error);
|
||||
} finally {
|
||||
setStatsLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleSort = (key: SortKey) => {
|
||||
let direction: SortDirection = 'asc';
|
||||
|
||||
if (sortConfig.key === key) {
|
||||
direction = sortConfig.direction === 'asc' ? 'desc' : 'asc';
|
||||
}
|
||||
|
||||
setSortConfig({ key, direction });
|
||||
};
|
||||
|
||||
const handlePageChange = (newPage: number) => {
|
||||
setPagination(prev => ({ ...prev, page: newPage }));
|
||||
};
|
||||
|
||||
const handleExport = async (format: string) => {
|
||||
setExportLoading(true);
|
||||
try {
|
||||
// 模拟导出功能
|
||||
await new Promise(resolve => setTimeout(resolve, 2000));
|
||||
alert(`成功导出 ${format} 格式文件`);
|
||||
} catch (error) {
|
||||
console.error('导出失败:', error);
|
||||
} finally {
|
||||
setExportLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleOpenDetail = (meteor: MeteorRecord) => {
|
||||
setSelectedMeteor(meteor);
|
||||
setShowDetailModal(true);
|
||||
};
|
||||
|
||||
const handleCloseDetail = () => {
|
||||
setShowDetailModal(false);
|
||||
};
|
||||
|
||||
return (
|
||||
<AppLayout>
|
||||
<div className="p-4 md:p-6">
|
||||
<div className="mb-6">
|
||||
<h2 className="text-xl md:text-2xl font-bold mb-2 text-gray-900 dark:text-white">历史数据</h2>
|
||||
<p className="text-sm text-gray-600 dark:text-gray-400">查看和分析流星观测历史记录</p>
|
||||
</div>
|
||||
|
||||
{/* 顶部操作栏 */}
|
||||
<div className="mb-6 flex flex-col md:flex-row md:justify-between md:items-center space-y-4 md:space-y-0">
|
||||
{/* 导出按钮组 */}
|
||||
<div className="flex items-center space-x-2">
|
||||
<div className="mr-2 text-sm text-gray-600 dark:text-gray-400">导出格式：</div>
|
||||
<button
|
||||
className="px-3 py-2 bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 rounded-md text-sm hover:bg-gray-300 dark:hover:bg-gray-600 flex items-center"
|
||||
onClick={() => handleExport('csv')}
|
||||
disabled={exportLoading}
|
||||
>
|
||||
<Download size={16} className="mr-1" />
|
||||
<span>CSV</span>
|
||||
</button>
|
||||
<button
|
||||
className="px-3 py-2 bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 rounded-md text-sm hover:bg-gray-300 dark:hover:bg-gray-600 flex items-center"
|
||||
onClick={() => handleExport('excel')}
|
||||
disabled={exportLoading}
|
||||
>
|
||||
<Download size={16} className="mr-1" />
|
||||
<span>Excel</span>
|
||||
</button>
|
||||
<button
|
||||
className="px-3 py-2 bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 rounded-md text-sm hover:bg-gray-300 dark:hover:bg-gray-600 flex items-center"
|
||||
onClick={() => handleExport('pdf')}
|
||||
disabled={exportLoading}
|
||||
>
|
||||
<Download size={16} className="mr-1" />
|
||||
<span>PDF</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 分析标签页 */}
|
||||
<div className="mb-6 border-b border-gray-200 dark:border-gray-700">
|
||||
<div className="flex flex-wrap -mb-px">
|
||||
<button
|
||||
className={`mr-2 inline-block py-2 px-4 text-sm font-medium ${
|
||||
activeTab === 'list'
|
||||
? 'text-blue-600 border-b-2 border-blue-600'
|
||||
: 'text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-300'
|
||||
}`}
|
||||
onClick={() => setActiveTab('list')}
|
||||
>
|
||||
<List size={16} className="inline mr-1 mb-1" />
|
||||
记录列表
|
||||
</button>
|
||||
<button
|
||||
className={`mr-2 inline-block py-2 px-4 text-sm font-medium ${
|
||||
activeTab === 'stats'
|
||||
? 'text-blue-600 border-b-2 border-blue-600'
|
||||
: 'text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-300'
|
||||
}`}
|
||||
onClick={() => setActiveTab('stats')}
|
||||
>
|
||||
<BarChart2 size={16} className="inline mr-1 mb-1" />
|
||||
统计分析
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 分析统计视图 */}
|
||||
{activeTab === 'stats' && (
|
||||
<div className="space-y-6">
|
||||
{statsLoading ? (
|
||||
<LoadingSpinner size="lg" text="加载统计数据中..." className="h-64" />
|
||||
) : stats ? (
|
||||
<>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
|
||||
<StatCard
|
||||
title="总流星数"
|
||||
value={stats.totalCount?.toLocaleString() || '0'}
|
||||
icon={Calendar}
|
||||
iconBg="bg-blue-500"
|
||||
description="历史记录总数"
|
||||
/>
|
||||
<StatCard
|
||||
title="平均亮度"
|
||||
value={stats.averageBrightness?.toFixed(1) || '--'}
|
||||
suffix="等"
|
||||
icon={Star}
|
||||
iconBg="bg-yellow-500"
|
||||
description="视星等平均值"
|
||||
/>
|
||||
<StatCard
|
||||
title="平均持续时间"
|
||||
value={stats.averageDuration?.toFixed(1) || '--'}
|
||||
suffix="秒"
|
||||
icon={Activity}
|
||||
iconBg="bg-green-500"
|
||||
description="流星持续时间"
|
||||
/>
|
||||
<StatCard
|
||||
title="最亮流星"
|
||||
value={stats.brightestMeteor?.brightness?.toFixed(1) || '--'}
|
||||
suffix="等"
|
||||
icon={TrendingUp}
|
||||
iconBg="bg-purple-500"
|
||||
description={`${stats.brightestMeteor?.date || ''} - ${stats.brightestMeteor?.location || ''}`}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* 统计图表区域 - 占位符 */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<div className="bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 p-4">
|
||||
<h3 className="text-md font-medium text-gray-800 dark:text-white mb-4">流星雨类型分布</h3>
|
||||
<div className="h-64 flex items-center justify-center">
|
||||
<div className="text-center">
|
||||
<BarChart2 className="text-gray-400 mb-4 mx-auto" size={48} />
|
||||
<p className="text-gray-500 dark:text-gray-400">图表组件开发中...</p>
|
||||
<div className="mt-4 space-y-2 text-sm">
|
||||
{stats.popularClassifications?.map((item, index) => (
|
||||
<div key={index} className="flex justify-between">
|
||||
<span className="text-gray-600 dark:text-gray-400">{item.name}</span>
|
||||
<span className="font-medium text-gray-900 dark:text-white">{item.count}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 p-4">
|
||||
<h3 className="text-md font-medium text-gray-800 dark:text-white mb-4">监测站分布</h3>
|
||||
<div className="h-64 flex items-center justify-center">
|
||||
<div className="text-center">
|
||||
<BarChart2 className="text-gray-400 mb-4 mx-auto" size={48} />
|
||||
<p className="text-gray-500 dark:text-gray-400">图表组件开发中...</p>
|
||||
<div className="mt-4 space-y-2 text-sm">
|
||||
{stats.locationStats?.map((item, index) => (
|
||||
<div key={index} className="flex justify-between">
|
||||
<span className="text-gray-600 dark:text-gray-400">{item.location}</span>
|
||||
<span className="font-medium text-gray-900 dark:text-white">{item.count}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
) : (
|
||||
<div className="bg-white dark:bg-gray-800 rounded-lg p-6 border border-gray-200 dark:border-gray-700 text-center">
|
||||
<div className="flex flex-col items-center justify-center py-12">
|
||||
<BarChart2 className="text-gray-400 mb-4" size={48} />
|
||||
<h3 className="text-xl font-medium text-gray-800 dark:text-white mb-2">暂无数据</h3>
|
||||
<p className="text-gray-600 dark:text-gray-400 max-w-md">
|
||||
没有找到历史记录数据
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 记录列表视图 */}
|
||||
{activeTab === 'list' && (
|
||||
<div className="bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 overflow-hidden">
|
||||
<div className="overflow-x-auto">
|
||||
{loading ? (
|
||||
<LoadingSpinner size="lg" text="加载历史记录中..." className="h-64" />
|
||||
) : meteors.length > 0 ? (
|
||||
<table className="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
|
||||
<thead className="bg-gray-100 dark:bg-gray-700">
|
||||
<tr>
|
||||
<th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider cursor-pointer" onClick={() => handleSort('id')}>
|
||||
<div className="flex items-center">
|
||||
ID
|
||||
{sortConfig.key === 'id' && (
|
||||
sortConfig.direction === 'asc' ?
|
||||
<ArrowUp size={14} className="ml-1" /> :
|
||||
<ArrowDown size={14} className="ml-1" />
|
||||
)}
|
||||
</div>
|
||||
</th>
|
||||
<th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider cursor-pointer" onClick={() => handleSort('createdAt')}>
|
||||
<div className="flex items-center">
|
||||
日期
|
||||
{sortConfig.key === 'createdAt' && (
|
||||
sortConfig.direction === 'asc' ?
|
||||
<ArrowUp size={14} className="ml-1" /> :
|
||||
<ArrowDown size={14} className="ml-1" />
|
||||
)}
|
||||
</div>
|
||||
</th>
|
||||
<th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider cursor-pointer" onClick={() => handleSort('peakMagnitude')}>
|
||||
<div className="flex items-center">
|
||||
亮度
|
||||
{sortConfig.key === 'peakMagnitude' && (
|
||||
sortConfig.direction === 'asc' ?
|
||||
<ArrowUp size={14} className="ml-1" /> :
|
||||
<ArrowDown size={14} className="ml-1" />
|
||||
)}
|
||||
</div>
|
||||
</th>
|
||||
<th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider cursor-pointer" onClick={() => handleSort('duration')}>
|
||||
<div className="flex items-center">
|
||||
持续时间
|
||||
{sortConfig.key === 'duration' && (
|
||||
sortConfig.direction === 'asc' ?
|
||||
<ArrowUp size={14} className="ml-1" /> :
|
||||
<ArrowDown size={14} className="ml-1" />
|
||||
)}
|
||||
</div>
|
||||
</th>
|
||||
<th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider cursor-pointer" onClick={() => handleSort('stationName')}>
|
||||
<div className="flex items-center">
|
||||
监测站
|
||||
{sortConfig.key === 'stationName' && (
|
||||
sortConfig.direction === 'asc' ?
|
||||
<ArrowUp size={14} className="ml-1" /> :
|
||||
<ArrowDown size={14} className="ml-1" />
|
||||
)}
|
||||
</div>
|
||||
</th>
|
||||
<th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
|
||||
天气条件
|
||||
</th>
|
||||
<th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
|
||||
分类
|
||||
</th>
|
||||
<th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
|
||||
操作
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="bg-white dark:bg-gray-800 divide-y divide-gray-200 dark:divide-gray-700">
|
||||
{meteors.map((meteor, index) => (
|
||||
<tr key={meteor.id} className={index % 2 === 0 ? 'bg-white dark:bg-gray-800' : 'bg-gray-50 dark:bg-gray-750'}>
|
||||
<td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-white">{meteor.id}</td>
|
||||
<td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">
|
||||
{new Date(meteor.date).toLocaleDateString()} {meteor.time}
|
||||
</td>
|
||||
<td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">{(meteor.brightness || 0).toFixed(1)} 等</td>
|
||||
<td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">{(meteor.duration || 0).toFixed(1)} 秒</td>
|
||||
<td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">{meteor.location}</td>
|
||||
<td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">{meteor.weatherCondition}</td>
|
||||
<td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">{meteor.classification}</td>
|
||||
<td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">
|
||||
<button
|
||||
className="text-blue-600 hover:text-blue-900 dark:text-blue-400 dark:hover:text-blue-300"
|
||||
onClick={() => handleOpenDetail(meteor)}
|
||||
>
|
||||
<Eye size={16} />
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
) : (
|
||||
<div className="flex flex-col items-center justify-center py-16">
|
||||
<Calendar className="text-gray-400 mb-4" size={48} />
|
||||
<h3 className="text-xl font-medium text-gray-800 dark:text-white mb-2">没有找到记录</h3>
|
||||
<p className="text-gray-600 dark:text-gray-400 max-w-md text-center">
|
||||
尝试调整筛选条件或时间范围
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* 分页控制 */}
|
||||
{meteors.length > 0 && (
|
||||
<div className="px-6 py-4 bg-gray-50 dark:bg-gray-750 border-t border-gray-200 dark:border-gray-700 flex flex-col sm:flex-row justify-between items-center space-y-3 sm:space-y-0">
|
||||
<div className="text-sm text-gray-700 dark:text-gray-300">
|
||||
显示 <span className="font-medium">{(pagination.page - 1) * pagination.limit + 1}</span> - <span className="font-medium">{Math.min(pagination.page * pagination.limit, pagination.total)}</span> 项，共 <span className="font-medium">{pagination.total}</span> 项
|
||||
</div>
|
||||
|
||||
<div className="flex justify-center space-x-1">
|
||||
<button
|
||||
onClick={() => handlePageChange(1)}
|
||||
disabled={pagination.page === 1}
|
||||
className={`px-2 py-1 text-sm rounded-md ${pagination.page === 1 ? 'text-gray-400 dark:text-gray-600 cursor-not-allowed' : 'text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700'}`}
|
||||
>
|
||||
首页
|
||||
</button>
|
||||
<button
|
||||
onClick={() => handlePageChange(pagination.page - 1)}
|
||||
disabled={pagination.page === 1}
|
||||
className={`px-2 py-1 text-sm rounded-md ${pagination.page === 1 ? 'text-gray-400 dark:text-gray-600 cursor-not-allowed' : 'text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700'}`}
|
||||
>
|
||||
上一页
|
||||
</button>
|
||||
|
||||
{[...Array(pagination.totalPages).keys()].slice(
|
||||
Math.max(0, pagination.page - 3),
|
||||
Math.min(pagination.totalPages, pagination.page + 2)
|
||||
).map(pageNum => (
|
||||
<button
|
||||
key={pageNum + 1}
|
||||
onClick={() => handlePageChange(pageNum + 1)}
|
||||
className={`px-3 py-1 text-sm rounded-md ${
|
||||
pagination.page === pageNum + 1
|
||||
? 'bg-blue-600 text-white'
|
||||
: 'text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700'
|
||||
}`}
|
||||
>
|
||||
{pageNum + 1}
|
||||
</button>
|
||||
))}
|
||||
|
||||
<button
|
||||
onClick={() => handlePageChange(pagination.page + 1)}
|
||||
disabled={pagination.page === pagination.totalPages}
|
||||
className={`px-2 py-1 text-sm rounded-md ${
|
||||
pagination.page === pagination.totalPages
|
||||
? 'text-gray-400 dark:text-gray-600 cursor-not-allowed'
|
||||
: 'text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700'
|
||||
}`}
|
||||
>
|
||||
下一页
|
||||
</button>
|
||||
<button
|
||||
onClick={() => handlePageChange(pagination.totalPages)}
|
||||
disabled={pagination.page === pagination.totalPages}
|
||||
className={`px-2 py-1 text-sm rounded-md ${
|
||||
pagination.page === pagination.totalPages
|
||||
? 'text-gray-400 dark:text-gray-600 cursor-not-allowed'
|
||||
: 'text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700'
|
||||
}`}
|
||||
>
|
||||
末页
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 流星详情模态框 - 占位符 */}
|
||||
{showDetailModal && selectedMeteor && (
|
||||
<div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
|
||||
<div className="bg-white dark:bg-gray-800 rounded-lg p-6 max-w-md w-full mx-4">
|
||||
<h3 className="text-lg font-medium text-gray-900 dark:text-white mb-4">流星详情</h3>
|
||||
<div className="space-y-2">
|
||||
<div className="flex justify-between">
|
||||
<span className="text-gray-500 dark:text-gray-400">ID:</span>
|
||||
<span className="text-gray-900 dark:text-white">{selectedMeteor.id}</span>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<span className="text-gray-500 dark:text-gray-400">日期:</span>
|
||||
<span className="text-gray-900 dark:text-white">{selectedMeteor.date} {selectedMeteor.time}</span>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<span className="text-gray-500 dark:text-gray-400">亮度:</span>
|
||||
<span className="text-gray-900 dark:text-white">{(selectedMeteor.brightness || 0).toFixed(1)} 等</span>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<span className="text-gray-500 dark:text-gray-400">持续时间:</span>
|
||||
<span className="text-gray-900 dark:text-white">{(selectedMeteor.duration || 0).toFixed(1)} 秒</span>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<span className="text-gray-500 dark:text-gray-400">监测站:</span>
|
||||
<span className="text-gray-900 dark:text-white">{selectedMeteor.location}</span>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<span className="text-gray-500 dark:text-gray-400">分类:</span>
|
||||
<span className="text-gray-900 dark:text-white">{selectedMeteor.classification}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="mt-6 flex justify-end">
|
||||
<button
|
||||
className="px-4 py-2 bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 rounded-md hover:bg-gray-300 dark:hover:bg-gray-600"
|
||||
onClick={handleCloseDetail}
|
||||
>
|
||||
关闭
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</AppLayout>
|
||||
);
|
||||
}
|
||||
@ -15,8 +15,8 @@ const geistMono = Geist_Mono({
|
||||
});
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: "Create Next App",
|
||||
description: "Generated by create next app",
|
||||
title: "分布式流星监测网络 - Distributed Meteor Monitoring Network",
|
||||
description: "连接全球观测者，记录天空中每一道流星的轨迹，为科学研究提供珍贵数据",
|
||||
};
|
||||
|
||||
export default function RootLayout({
|
||||
@ -25,7 +25,7 @@ export default function RootLayout({
|
||||
children: React.ReactNode;
|
||||
}>) {
|
||||
return (
|
||||
<html lang="en">
|
||||
<html lang="zh-CN">
|
||||
<body
|
||||
className={`${geistSans.variable} ${geistMono.variable} antialiased`}
|
||||
>
|
||||
|
||||
@ -3,18 +3,58 @@
|
||||
import Link from "next/link"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { useAuth } from "@/contexts/auth-context"
|
||||
import { useEffect } from "react"
|
||||
|
||||
export default function Home() {
|
||||
const { isAuthenticated, user } = useAuth()
|
||||
|
||||
useEffect(() => {
|
||||
createStarfield()
|
||||
}, [])
|
||||
|
||||
const createStarfield = () => {
|
||||
const starfield = document.getElementById('starfield')
|
||||
if (!starfield) return
|
||||
|
||||
const numStars = 100
|
||||
|
||||
for (let i = 0; i < numStars; i++) {
|
||||
const star = document.createElement('div')
|
||||
star.className = 'star'
|
||||
star.style.left = Math.random() * 100 + '%'
|
||||
star.style.top = Math.random() * 100 + '%'
|
||||
star.style.width = Math.random() * 3 + 1 + 'px'
|
||||
star.style.height = star.style.width
|
||||
star.style.animationDelay = Math.random() * 2 + 's'
|
||||
starfield.appendChild(star)
|
||||
}
|
||||
|
||||
// Add falling meteors
|
||||
const createMeteor = () => {
|
||||
const meteor = document.createElement('div')
|
||||
meteor.className = 'meteor'
|
||||
meteor.style.left = Math.random() * 100 + '%'
|
||||
meteor.style.animationDuration = (Math.random() * 2 + 2) + 's'
|
||||
starfield.appendChild(meteor)
|
||||
|
||||
setTimeout(() => {
|
||||
meteor.remove()
|
||||
}, 5000)
|
||||
}
|
||||
|
||||
setInterval(createMeteor, 3000)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="min-h-screen flex flex-col">
|
||||
<div className="min-h-screen flex flex-col relative">
|
||||
<div id="starfield" className="starfield"></div>
|
||||
|
||||
{/* Navigation */}
|
||||
<header className="absolute top-0 right-0 p-6 z-10">
|
||||
<div className="flex items-center gap-4">
|
||||
{isAuthenticated ? (
|
||||
<>
|
||||
<span className="text-sm text-gray-600 dark:text-gray-300">
|
||||
<span className="text-sm text-gray-300">
|
||||
Welcome, {user?.email}
|
||||
</span>
|
||||
<Button asChild>
|
||||
@ -34,28 +74,88 @@ export default function Home() {
|
||||
</div>
|
||||
</header>
|
||||
|
||||
{/* Main Content */}
|
||||
<div className="flex-1 flex items-center justify-center bg-gradient-to-br from-blue-50 to-indigo-100 dark:from-gray-900 dark:to-gray-800">
|
||||
<main className="text-center px-4">
|
||||
<h1 className="text-6xl font-bold text-gray-900 dark:text-white mb-4">
|
||||
分布式流星监测网络
|
||||
</h1>
|
||||
<p className="text-xl text-gray-600 dark:text-gray-300 mb-8">
|
||||
Distributed Meteor Monitoring Network
|
||||
</p>
|
||||
|
||||
{!isAuthenticated && (
|
||||
<div className="flex items-center justify-center gap-4">
|
||||
<Button size="lg" asChild>
|
||||
<Link href="/register">Join the Network</Link>
|
||||
{/* Hero Section */}
|
||||
<section className="min-h-screen flex flex-col justify-center items-center text-center px-4 relative">
|
||||
<h1 className="text-6xl font-bold mb-4 hero-title-gradient">
|
||||
分布式流星监测网络
|
||||
</h1>
|
||||
<p className="text-xl text-gray-300 mb-8 max-w-2xl">
|
||||
连接全球观测者，记录天空中每一道流星的轨迹，为科学研究提供珍贵数据
|
||||
</p>
|
||||
<p className="text-lg text-gray-400 mb-8">
|
||||
Distributed Meteor Monitoring Network
|
||||
</p>
|
||||
|
||||
{!isAuthenticated && (
|
||||
<div className="flex items-center justify-center gap-4 flex-wrap">
|
||||
<Button size="lg" asChild className="bg-gradient-to-r from-orange-500 to-orange-600 hover:from-orange-600 hover:to-orange-700">
|
||||
<Link href="/register">加入监测网络</Link>
|
||||
</Button>
|
||||
<Button variant="outline" size="lg" asChild className="border-orange-500 text-orange-500 hover:bg-orange-500 hover:text-white">
|
||||
<Link href="/login">Sign In</Link>
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
</section>
|
||||
|
||||
{/* Feature Cards Section */}
|
||||
<section className="py-16 px-4">
|
||||
<div className="max-w-6xl mx-auto">
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
|
||||
<div className="glass-card p-8 text-center">
|
||||
<div className="w-16 h-16 bg-gradient-to-r from-orange-500 to-orange-600 rounded-2xl mx-auto mb-6 flex items-center justify-center text-2xl">
|
||||
🛰️
|
||||
</div>
|
||||
<h3 className="text-xl font-semibold mb-4 text-white">设备网络</h3>
|
||||
<p className="text-gray-300 leading-relaxed">
|
||||
分布在全球的高精度监测设备，24小时不间断捕捉流星事件，构建完整的观测网络。
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="glass-card p-8 text-center">
|
||||
<div className="w-16 h-16 bg-gradient-to-r from-orange-500 to-orange-600 rounded-2xl mx-auto mb-6 flex items-center justify-center text-2xl">
|
||||
📸
|
||||
</div>
|
||||
<h3 className="text-xl font-semibold mb-4 text-white">事件画廊</h3>
|
||||
<p className="text-gray-300 leading-relaxed">
|
||||
精彩的流星照片和视频集合，每一帧都记录着宇宙的壮丽瞬间，见证天空的奇迹。
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="glass-card p-8 text-center">
|
||||
<div className="w-16 h-16 bg-gradient-to-r from-orange-500 to-orange-600 rounded-2xl mx-auto mb-6 flex items-center justify-center text-2xl">
|
||||
📊
|
||||
</div>
|
||||
<h3 className="text-xl font-semibold mb-4 text-white">研究数据</h3>
|
||||
<p className="text-gray-300 leading-relaxed">
|
||||
开放的科学数据平台，为天文学家和研究人员提供准确、详细的流星观测数据。
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* CTA Section */}
|
||||
{!isAuthenticated && (
|
||||
<section className="py-16 px-4 text-center">
|
||||
<div className="max-w-4xl mx-auto">
|
||||
<h2 className="text-4xl font-bold mb-6 text-orange-500">
|
||||
开始您的星空探索之旅
|
||||
</h2>
|
||||
<p className="text-xl text-gray-300 mb-8">
|
||||
注册账户，访问实时数据，加入全球观测者社区
|
||||
</p>
|
||||
<div className="flex items-center justify-center gap-4 flex-wrap">
|
||||
<Button size="lg" asChild className="bg-gradient-to-r from-orange-500 to-orange-600 hover:from-orange-600 hover:to-orange-700 px-8 py-3 text-lg">
|
||||
<Link href="/register">立即注册</Link>
|
||||
</Button>
|
||||
<Button variant="outline" size="lg" asChild>
|
||||
<Link href="/login">Sign In</Link>
|
||||
<Button variant="outline" size="lg" asChild className="border-orange-500 text-orange-500 hover:bg-orange-500 hover:text-white px-8 py-3 text-lg">
|
||||
<Link href="/gallery">了解更多</Link>
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
510
meteor-frontend/src/app/settings/page.tsx
Normal file
510
meteor-frontend/src/app/settings/page.tsx
Normal file
@ -0,0 +1,510 @@
|
||||
'use client';
|
||||
|
||||
import React, { useState } from 'react';
|
||||
import { Moon, Bell, User, Info, Sun, Laptop, Eye, Key, Star } from 'lucide-react';
|
||||
import { AppLayout } from '@/components/layout/app-layout';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { useAuth } from '@/contexts/auth-context';
|
||||
|
||||
interface NotificationSettings {
|
||||
enable: boolean;
|
||||
sound: boolean;
|
||||
desktop: boolean;
|
||||
}
|
||||
|
||||
interface PasswordForm {
|
||||
current: string;
|
||||
new: string;
|
||||
confirm: string;
|
||||
}
|
||||
|
||||
export default function SettingsPage() {
|
||||
const { user } = useAuth();
|
||||
const [activeTab, setActiveTab] = useState<'appearance' | 'notifications' | 'account' | 'about'>('appearance');
|
||||
const [theme, setTheme] = useState<'light' | 'dark' | 'system'>('system');
|
||||
const [language, setLanguage] = useState<'zh' | 'en'>('zh');
|
||||
const [notifications, setNotifications] = useState<NotificationSettings>({
|
||||
enable: true,
|
||||
sound: true,
|
||||
desktop: true
|
||||
});
|
||||
const [passwords, setPasswords] = useState<PasswordForm>({
|
||||
current: '',
|
||||
new: '',
|
||||
confirm: ''
|
||||
});
|
||||
const [passwordError, setPasswordError] = useState('');
|
||||
const [passwordSuccess, setPasswordSuccess] = useState(false);
|
||||
|
||||
// 处理主题切换
|
||||
const handleThemeChange = (newTheme: 'light' | 'dark' | 'system') => {
|
||||
setTheme(newTheme);
|
||||
// TODO: 实际项目中需要集成主题系统
|
||||
};
|
||||
|
||||
// 处理语言切换
|
||||
const handleLanguageChange = (langCode: 'zh' | 'en') => {
|
||||
setLanguage(langCode);
|
||||
// TODO: 实际项目中需要集成国际化系统
|
||||
};
|
||||
|
||||
// 处理通知设置切换
|
||||
const handleNotificationChange = (key: keyof NotificationSettings) => {
|
||||
setNotifications(prev => ({
|
||||
...prev,
|
||||
[key]: !prev[key]
|
||||
}));
|
||||
};
|
||||
|
||||
// 处理密码输入变化
|
||||
const handlePasswordChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const { name, value } = e.target;
|
||||
setPasswords(prev => ({
|
||||
...prev,
|
||||
[name]: value
|
||||
}));
|
||||
|
||||
// 清除错误和成功消息
|
||||
setPasswordError('');
|
||||
setPasswordSuccess(false);
|
||||
};
|
||||
|
||||
// 处理密码更新
|
||||
const handlePasswordUpdate = (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
|
||||
// 表单验证
|
||||
if (!passwords.current || !passwords.new || !passwords.confirm) {
|
||||
setPasswordError('请填写所有字段');
|
||||
return;
|
||||
}
|
||||
|
||||
if (passwords.new !== passwords.confirm) {
|
||||
setPasswordError('新密码和确认密码不匹配');
|
||||
return;
|
||||
}
|
||||
|
||||
if (passwords.new.length < 6) {
|
||||
setPasswordError('密码长度至少为6位');
|
||||
return;
|
||||
}
|
||||
|
||||
// 模拟密码更新成功
|
||||
setPasswordSuccess(true);
|
||||
setPasswords({
|
||||
current: '',
|
||||
new: '',
|
||||
confirm: ''
|
||||
});
|
||||
|
||||
// TODO: 实际项目中这里应该调用API更新密码
|
||||
};
|
||||
|
||||
const renderAppearanceSettings = () => (
|
||||
<>
|
||||
<h3 className="text-lg font-medium text-gray-900 dark:text-white mb-6">外观设置</h3>
|
||||
|
||||
<div className="mb-8">
|
||||
<h4 className="text-md font-medium text-gray-800 dark:text-gray-200 mb-4">主题模式</h4>
|
||||
<div className="grid grid-cols-1 sm:grid-cols-3 gap-4">
|
||||
<div
|
||||
className={`p-4 rounded-lg border cursor-pointer transition-colors ${
|
||||
theme === 'light'
|
||||
? 'border-blue-500 bg-blue-50 dark:bg-blue-900/20'
|
||||
: 'border-gray-200 dark:border-gray-700 hover:border-gray-300 dark:hover:border-gray-600'
|
||||
}`}
|
||||
onClick={() => handleThemeChange('light')}
|
||||
>
|
||||
<div className="flex justify-between items-center mb-3">
|
||||
<div className="flex items-center">
|
||||
<Sun size={16} className="mr-2" />
|
||||
<div className="text-md font-medium">浅色模式</div>
|
||||
</div>
|
||||
<div className={`w-4 h-4 rounded-full ${theme === 'light' ? 'bg-blue-500' : 'border border-gray-400'}`}></div>
|
||||
</div>
|
||||
<div className="h-20 rounded-md bg-white border border-gray-300"></div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
className={`p-4 rounded-lg border cursor-pointer transition-colors ${
|
||||
theme === 'dark'
|
||||
? 'border-blue-500 bg-blue-50 dark:bg-blue-900/20'
|
||||
: 'border-gray-200 dark:border-gray-700 hover:border-gray-300 dark:hover:border-gray-600'
|
||||
}`}
|
||||
onClick={() => handleThemeChange('dark')}
|
||||
>
|
||||
<div className="flex justify-between items-center mb-3">
|
||||
<div className="flex items-center">
|
||||
<Moon size={16} className="mr-2" />
|
||||
<div className="text-md font-medium">深色模式</div>
|
||||
</div>
|
||||
<div className={`w-4 h-4 rounded-full ${theme === 'dark' ? 'bg-blue-500' : 'border border-gray-400'}`}></div>
|
||||
</div>
|
||||
<div className="h-20 rounded-md bg-gray-900 border border-gray-600"></div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
className={`p-4 rounded-lg border cursor-pointer transition-colors ${
|
||||
theme === 'system'
|
||||
? 'border-blue-500 bg-blue-50 dark:bg-blue-900/20'
|
||||
: 'border-gray-200 dark:border-gray-700 hover:border-gray-300 dark:hover:border-gray-600'
|
||||
}`}
|
||||
onClick={() => handleThemeChange('system')}
|
||||
>
|
||||
<div className="flex justify-between items-center mb-3">
|
||||
<div className="flex items-center">
|
||||
<Laptop size={16} className="mr-2" />
|
||||
<div className="text-md font-medium">跟随系统</div>
|
||||
</div>
|
||||
<div className={`w-4 h-4 rounded-full ${theme === 'system' ? 'bg-blue-500' : 'border border-gray-400'}`}></div>
|
||||
</div>
|
||||
<div className="h-20 rounded-md bg-gradient-to-r from-white to-gray-900 border border-gray-300"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h4 className="text-md font-medium text-gray-800 dark:text-gray-200 mb-4">语言设置</h4>
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
||||
<div
|
||||
className={`p-4 rounded-lg border cursor-pointer transition-colors ${
|
||||
language === 'zh'
|
||||
? 'border-blue-500 bg-blue-50 dark:bg-blue-900/20'
|
||||
: 'border-gray-200 dark:border-gray-700 hover:border-gray-300 dark:hover:border-gray-600'
|
||||
}`}
|
||||
onClick={() => handleLanguageChange('zh')}
|
||||
>
|
||||
<div className="flex justify-between items-center">
|
||||
<div className="flex items-center">
|
||||
<span className="text-2xl mr-3">🇨🇳</span>
|
||||
<div>
|
||||
<div className="text-md font-medium">中文</div>
|
||||
<div className="text-sm text-gray-500 dark:text-gray-400">简体中文</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className={`w-4 h-4 rounded-full ${language === 'zh' ? 'bg-blue-500' : 'border border-gray-400'}`}></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
className={`p-4 rounded-lg border cursor-pointer transition-colors ${
|
||||
language === 'en'
|
||||
? 'border-blue-500 bg-blue-50 dark:bg-blue-900/20'
|
||||
: 'border-gray-200 dark:border-gray-700 hover:border-gray-300 dark:hover:border-gray-600'
|
||||
}`}
|
||||
onClick={() => handleLanguageChange('en')}
|
||||
>
|
||||
<div className="flex justify-between items-center">
|
||||
<div className="flex items-center">
|
||||
<span className="text-2xl mr-3">🇺🇸</span>
|
||||
<div>
|
||||
<div className="text-md font-medium">English</div>
|
||||
<div className="text-sm text-gray-500 dark:text-gray-400">English</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className={`w-4 h-4 rounded-full ${language === 'en' ? 'bg-blue-500' : 'border border-gray-400'}`}></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
|
||||
const renderNotificationSettings = () => (
|
||||
<>
|
||||
<h3 className="text-lg font-medium text-gray-900 dark:text-white mb-6">通知设置</h3>
|
||||
|
||||
<div className="space-y-4">
|
||||
<div className="flex items-center justify-between p-4 bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700">
|
||||
<div>
|
||||
<div className="text-md font-medium text-gray-800 dark:text-gray-200">启用通知</div>
|
||||
<div className="text-sm text-gray-500 dark:text-gray-400">接收系统和流星观测通知</div>
|
||||
</div>
|
||||
<label className="relative inline-flex items-center cursor-pointer">
|
||||
<input
|
||||
type="checkbox"
|
||||
className="sr-only peer"
|
||||
checked={notifications.enable}
|
||||
onChange={() => handleNotificationChange('enable')}
|
||||
/>
|
||||
<div className="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 dark:peer-focus:ring-blue-800 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-blue-600"></div>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div className={`flex items-center justify-between p-4 bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 ${!notifications.enable ? 'opacity-50 pointer-events-none' : ''}`}>
|
||||
<div>
|
||||
<div className="text-md font-medium text-gray-800 dark:text-gray-200">通知声音</div>
|
||||
<div className="text-sm text-gray-500 dark:text-gray-400">播放通知提示音</div>
|
||||
</div>
|
||||
<label className="relative inline-flex items-center cursor-pointer">
|
||||
<input
|
||||
type="checkbox"
|
||||
className="sr-only peer"
|
||||
checked={notifications.sound}
|
||||
onChange={() => handleNotificationChange('sound')}
|
||||
disabled={!notifications.enable}
|
||||
/>
|
||||
<div className="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 dark:peer-focus:ring-blue-800 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-blue-600"></div>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div className={`flex items-center justify-between p-4 bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 ${!notifications.enable ? 'opacity-50 pointer-events-none' : ''}`}>
|
||||
<div>
|
||||
<div className="text-md font-medium text-gray-800 dark:text-gray-200">桌面通知</div>
|
||||
<div className="text-sm text-gray-500 dark:text-gray-400">显示桌面弹出通知</div>
|
||||
</div>
|
||||
<label className="relative inline-flex items-center cursor-pointer">
|
||||
<input
|
||||
type="checkbox"
|
||||
className="sr-only peer"
|
||||
checked={notifications.desktop}
|
||||
onChange={() => handleNotificationChange('desktop')}
|
||||
disabled={!notifications.enable}
|
||||
/>
|
||||
<div className="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 dark:peer-focus:ring-blue-800 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-blue-600"></div>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
|
||||
const renderAccountSettings = () => (
|
||||
<>
|
||||
<h3 className="text-lg font-medium text-gray-900 dark:text-white mb-6">账户设置</h3>
|
||||
|
||||
<div className="bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 p-6 mb-6">
|
||||
<div className="flex items-start space-x-4">
|
||||
<div className="w-12 h-12 rounded-full bg-blue-500 flex items-center justify-center flex-shrink-0">
|
||||
<span className="text-lg font-bold text-white">{user?.email?.charAt(0).toUpperCase() || 'A'}</span>
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="text-md font-medium text-gray-800 dark:text-gray-200">{user?.email || '管理员'}</h4>
|
||||
<p className="text-sm text-gray-500 dark:text-gray-400">系统管理员</p>
|
||||
<p className="text-sm text-gray-500 dark:text-gray-400 mt-1">{user?.email || 'admin@example.com'}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 p-6">
|
||||
<h4 className="text-md font-medium text-gray-800 dark:text-gray-200 mb-4">修改密码</h4>
|
||||
|
||||
{passwordError && (
|
||||
<div className="mb-4 p-3 bg-red-100 dark:bg-red-900/30 border border-red-200 dark:border-red-800 rounded-md text-red-800 dark:text-red-300 text-sm">
|
||||
{passwordError}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{passwordSuccess && (
|
||||
<div className="mb-4 p-3 bg-green-100 dark:bg-green-900/30 border border-green-200 dark:border-green-800 rounded-md text-green-800 dark:text-green-300 text-sm">
|
||||
密码更新成功
|
||||
</div>
|
||||
)}
|
||||
|
||||
<form onSubmit={handlePasswordUpdate}>
|
||||
<div className="space-y-4">
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1" htmlFor="current-password">
|
||||
当前密码
|
||||
</label>
|
||||
<input
|
||||
type="password"
|
||||
id="current-password"
|
||||
name="current"
|
||||
value={passwords.current}
|
||||
onChange={handlePasswordChange}
|
||||
className="w-full px-3 py-2 bg-gray-50 dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-md text-gray-900 dark:text-white focus:ring-blue-500 focus:border-blue-500"
|
||||
placeholder="输入当前密码"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1" htmlFor="new-password">
|
||||
新密码
|
||||
</label>
|
||||
<input
|
||||
type="password"
|
||||
id="new-password"
|
||||
name="new"
|
||||
value={passwords.new}
|
||||
onChange={handlePasswordChange}
|
||||
className="w-full px-3 py-2 bg-gray-50 dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-md text-gray-900 dark:text-white focus:ring-blue-500 focus:border-blue-500"
|
||||
placeholder="输入新密码"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1" htmlFor="confirm-password">
|
||||
确认密码
|
||||
</label>
|
||||
<input
|
||||
type="password"
|
||||
id="confirm-password"
|
||||
name="confirm"
|
||||
value={passwords.confirm}
|
||||
onChange={handlePasswordChange}
|
||||
className="w-full px-3 py-2 bg-gray-50 dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-md text-gray-900 dark:text-white focus:ring-blue-500 focus:border-blue-500"
|
||||
placeholder="确认新密码"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="pt-2">
|
||||
<Button type="submit" className="bg-blue-600 hover:bg-blue-700">
|
||||
更新密码
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
|
||||
const renderAboutSettings = () => (
|
||||
<>
|
||||
<h3 className="text-lg font-medium text-gray-900 dark:text-white mb-6">关于系统</h3>
|
||||
|
||||
<div className="bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 p-6 mb-6">
|
||||
<div className="flex justify-center mb-6">
|
||||
<div className="flex flex-col items-center">
|
||||
<div className="h-16 w-16 bg-blue-600 rounded-full flex items-center justify-center mb-3">
|
||||
<Star className="text-white" size={32} />
|
||||
</div>
|
||||
<h3 className="text-xl font-bold text-gray-900 dark:text-white">流星监测网络系统</h3>
|
||||
<p className="text-sm text-gray-500 dark:text-gray-400">版本 1.0.0</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div>
|
||||
<h4 className="text-md font-medium text-gray-800 dark:text-gray-200 mb-2">软件信息</h4>
|
||||
<div className="space-y-2 text-sm">
|
||||
<div className="flex justify-between">
|
||||
<span className="text-gray-500 dark:text-gray-400">版本</span>
|
||||
<span className="font-medium">1.0.0</span>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<span className="text-gray-500 dark:text-gray-400">发布日期</span>
|
||||
<span className="font-medium">2024-01-09</span>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<span className="text-gray-500 dark:text-gray-400">许可证</span>
|
||||
<span className="font-medium">MIT</span>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<span className="text-gray-500 dark:text-gray-400">语言</span>
|
||||
<span className="font-medium">{language === 'zh' ? '简体中文' : 'English'}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h4 className="text-md font-medium text-gray-800 dark:text-gray-200 mb-2">系统信息</h4>
|
||||
<div className="space-y-2 text-sm">
|
||||
<div className="flex justify-between">
|
||||
<span className="text-gray-500 dark:text-gray-400">浏览器</span>
|
||||
<span className="font-medium truncate">{typeof window !== 'undefined' ? navigator.userAgent.split(' ').slice(-1)[0] : 'N/A'}</span>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<span className="text-gray-500 dark:text-gray-400">屏幕分辨率</span>
|
||||
<span className="font-medium">{typeof window !== 'undefined' ? `${window.screen.width} x ${window.screen.height}` : 'N/A'}</span>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<span className="text-gray-500 dark:text-gray-400">主题</span>
|
||||
<span className="font-medium">
|
||||
{theme === 'light' ? '浅色模式' : theme === 'dark' ? '深色模式' : '跟随系统'}
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<span className="text-gray-500 dark:text-gray-400">当前时间</span>
|
||||
<span className="font-medium">{new Date().toLocaleString()}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 p-6">
|
||||
<h4 className="text-md font-medium text-gray-800 dark:text-gray-200 mb-4">系统介绍</h4>
|
||||
<p className="text-sm text-gray-700 dark:text-gray-300 mb-3">
|
||||
流星监测网络系统是一个专业的天文观测平台，用于监测和记录流星事件、分析天气数据，以及管理观测设备。
|
||||
</p>
|
||||
<p className="text-sm text-gray-700 dark:text-gray-300 mb-3">
|
||||
系统提供实时数据监控、历史数据分析、设备状态管理等功能，支持多站点协同观测和数据共享。
|
||||
</p>
|
||||
<p className="text-sm text-gray-700 dark:text-gray-300">
|
||||
通过先进的算法和用户友好的界面，帮助天文爱好者和研究人员更好地观测和研究流星现象。
|
||||
</p>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
|
||||
return (
|
||||
<AppLayout>
|
||||
<div className="p-4 md:p-6">
|
||||
<div className="mb-6">
|
||||
<h2 className="text-xl md:text-2xl font-bold mb-2">设置</h2>
|
||||
<p className="text-sm text-gray-600 dark:text-gray-400">管理系统偏好设置和账户信息</p>
|
||||
</div>
|
||||
|
||||
{/* 标签页导航 */}
|
||||
<div className="mb-6 border-b border-gray-200 dark:border-gray-700">
|
||||
<div className="flex flex-wrap -mb-px overflow-x-auto">
|
||||
<button
|
||||
className={`mr-2 inline-block py-2 px-4 text-sm font-medium ${
|
||||
activeTab === 'appearance'
|
||||
? 'text-blue-600 border-b-2 border-blue-600'
|
||||
: 'text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-300'
|
||||
}`}
|
||||
onClick={() => setActiveTab('appearance')}
|
||||
>
|
||||
<Eye size={16} className="inline mr-1 mb-1" />
|
||||
外观
|
||||
</button>
|
||||
<button
|
||||
className={`mr-2 inline-block py-2 px-4 text-sm font-medium ${
|
||||
activeTab === 'notifications'
|
||||
? 'text-blue-600 border-b-2 border-blue-600'
|
||||
: 'text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-300'
|
||||
}`}
|
||||
onClick={() => setActiveTab('notifications')}
|
||||
>
|
||||
<Bell size={16} className="inline mr-1 mb-1" />
|
||||
通知
|
||||
</button>
|
||||
<button
|
||||
className={`mr-2 inline-block py-2 px-4 text-sm font-medium ${
|
||||
activeTab === 'account'
|
||||
? 'text-blue-600 border-b-2 border-blue-600'
|
||||
: 'text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-300'
|
||||
}`}
|
||||
onClick={() => setActiveTab('account')}
|
||||
>
|
||||
<User size={16} className="inline mr-1 mb-1" />
|
||||
账户
|
||||
</button>
|
||||
<button
|
||||
className={`mr-2 inline-block py-2 px-4 text-sm font-medium ${
|
||||
activeTab === 'about'
|
||||
? 'text-blue-600 border-b-2 border-blue-600'
|
||||
: 'text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-300'
|
||||
}`}
|
||||
onClick={() => setActiveTab('about')}
|
||||
>
|
||||
<Info size={16} className="inline mr-1 mb-1" />
|
||||
关于
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 设置内容 */}
|
||||
<div>
|
||||
<div className="bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 p-6">
|
||||
{activeTab === 'appearance' && renderAppearanceSettings()}
|
||||
{activeTab === 'notifications' && renderNotificationSettings()}
|
||||
{activeTab === 'account' && renderAccountSettings()}
|
||||
{activeTab === 'about' && renderAboutSettings()}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</AppLayout>
|
||||
);
|
||||
}
|
||||
@ -1,286 +1,473 @@
|
||||
"use client"
|
||||
'use client';
|
||||
|
||||
import * as React from "react"
|
||||
import { useRouter } from "next/navigation"
|
||||
import { useQuery } from "@tanstack/react-query"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { useAuth } from "@/contexts/auth-context"
|
||||
import { subscriptionApi, SubscriptionData } from "@/services/subscription"
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { useRouter } from 'next/navigation';
|
||||
import { Crown, CreditCard, Star, CheckCircle, AlertTriangle, Calendar, DollarSign, User } from 'lucide-react';
|
||||
import { LoadingSpinner } from '@/components/ui/loading-spinner';
|
||||
import { AppLayout } from '@/components/layout/app-layout';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { useAuth } from '@/contexts/auth-context';
|
||||
import { subscriptionApi, SubscriptionPlan, UserSubscription } from '@/services/subscription';
|
||||
|
||||
interface LegacySubscriptionData {
|
||||
hasActiveSubscription: boolean;
|
||||
subscriptionStatus?: 'active' | 'canceled' | 'past_due' | 'trialing' | 'incomplete';
|
||||
currentPlan?: {
|
||||
name: string;
|
||||
priceId: string;
|
||||
};
|
||||
nextBillingDate?: string;
|
||||
cancelAtPeriodEnd?: boolean;
|
||||
}
|
||||
|
||||
// Remove hardcoded plans - will be fetched from API
|
||||
|
||||
export default function SubscriptionPage() {
|
||||
const router = useRouter()
|
||||
const { isAuthenticated } = useAuth()
|
||||
const [redirectMessage, setRedirectMessage] = React.useState<string | null>(null)
|
||||
|
||||
React.useEffect(() => {
|
||||
// Get the message from URL search params client-side
|
||||
const urlParams = new URLSearchParams(window.location.search)
|
||||
setRedirectMessage(urlParams.get('message'))
|
||||
}, [])
|
||||
const router = useRouter();
|
||||
const { user, isAuthenticated, isInitializing } = useAuth();
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [subscription, setSubscription] = useState<UserSubscription | null>(null);
|
||||
const [plans, setPlans] = useState<SubscriptionPlan[]>([]);
|
||||
const [redirectMessage, setRedirectMessage] = useState<string | null>(null);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
React.useEffect(() => {
|
||||
if (!isAuthenticated) {
|
||||
router.push("/login")
|
||||
useEffect(() => {
|
||||
if (!isInitializing) {
|
||||
if (!isAuthenticated) {
|
||||
router.push('/login');
|
||||
} else {
|
||||
// Get the message from URL search params
|
||||
const urlParams = new URLSearchParams(window.location.search);
|
||||
setRedirectMessage(urlParams.get('message'));
|
||||
fetchSubscriptionData();
|
||||
}
|
||||
}
|
||||
}, [isAuthenticated, router])
|
||||
}, [isAuthenticated, isInitializing, router]);
|
||||
|
||||
const { data: subscriptionResponse, isLoading, error, refetch } = useQuery({
|
||||
queryKey: ['subscription'],
|
||||
queryFn: subscriptionApi.getSubscription,
|
||||
enabled: isAuthenticated,
|
||||
})
|
||||
|
||||
const subscription = subscriptionResponse?.subscription
|
||||
|
||||
const handleSubscribe = async () => {
|
||||
const fetchSubscriptionData = async () => {
|
||||
setLoading(true);
|
||||
try {
|
||||
const currentUrl = window.location.origin
|
||||
const checkoutResponse = await subscriptionApi.createCheckoutSession(
|
||||
'price_1234567890', // This would be your actual Stripe price ID
|
||||
`${currentUrl}/subscription?success=true`,
|
||||
`${currentUrl}/subscription?canceled=true`
|
||||
)
|
||||
|
||||
if (checkoutResponse.success) {
|
||||
window.location.href = checkoutResponse.session.url
|
||||
// Fetch available plans and user subscription in parallel
|
||||
const [plansData, userSubscription] = await Promise.all([
|
||||
subscriptionApi.getAllPlans(),
|
||||
user?.id ? subscriptionApi.getUserSubscriptionByUserId(user.id) : null
|
||||
]);
|
||||
|
||||
setPlans(plansData);
|
||||
setSubscription(userSubscription);
|
||||
} catch (error) {
|
||||
console.error('获取订阅信息失败:', error);
|
||||
setError('获取订阅信息失败');
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleSubscribe = async (plan: SubscriptionPlan) => {
|
||||
try {
|
||||
if (plan.stripePriceId) {
|
||||
// Create Stripe checkout session
|
||||
const currentUrl = window.location.origin;
|
||||
const checkoutResponse = await subscriptionApi.createCheckoutSession(
|
||||
plan.stripePriceId,
|
||||
`${currentUrl}/subscription?success=true`,
|
||||
`${currentUrl}/subscription?canceled=true`
|
||||
);
|
||||
|
||||
if (checkoutResponse.success) {
|
||||
window.location.href = checkoutResponse.session.url;
|
||||
}
|
||||
} else {
|
||||
// Create direct subscription (for free plans or manual subscriptions)
|
||||
if (user?.id) {
|
||||
await subscriptionApi.createUserSubscription(user.id, plan.planId);
|
||||
alert(`成功订阅 ${plan.name}！`);
|
||||
await fetchSubscriptionData(); // Refresh data
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Failed to create checkout session:', error)
|
||||
alert('Failed to start subscription process. Please try again.')
|
||||
console.error('创建订阅失败:', error);
|
||||
alert('订阅失败，请重试');
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const handleManageBilling = async () => {
|
||||
try {
|
||||
const currentUrl = window.location.origin
|
||||
const portalResponse = await subscriptionApi.createCustomerPortalSession(
|
||||
`${currentUrl}/subscription`
|
||||
)
|
||||
alert('正在跳转到计费管理页面...');
|
||||
|
||||
if (portalResponse.success) {
|
||||
window.location.href = portalResponse.url
|
||||
}
|
||||
// 实际项目中应该调用API创建客户门户会话
|
||||
// const currentUrl = window.location.origin;
|
||||
// const portalResponse = await subscriptionApi.createCustomerPortalSession(
|
||||
// `${currentUrl}/subscription`
|
||||
// );
|
||||
|
||||
// if (portalResponse.success) {
|
||||
// window.location.href = portalResponse.url;
|
||||
// }
|
||||
} catch (error) {
|
||||
console.error('Failed to create customer portal session:', error)
|
||||
alert('Failed to open billing management. Please try again.')
|
||||
console.error('创建计费管理会话失败:', error);
|
||||
alert('打开计费管理失败，请重试');
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const getStatusColor = (status?: string) => {
|
||||
switch (status) {
|
||||
case 'active':
|
||||
return 'bg-green-100 dark:bg-green-900 text-green-800 dark:text-green-200';
|
||||
case 'canceled':
|
||||
return 'bg-red-100 dark:bg-red-900 text-red-800 dark:text-red-200';
|
||||
case 'past_due':
|
||||
return 'bg-yellow-100 dark:bg-yellow-900 text-yellow-800 dark:text-yellow-200';
|
||||
case 'trialing':
|
||||
return 'bg-blue-100 dark:bg-blue-900 text-blue-800 dark:text-blue-200';
|
||||
default:
|
||||
return 'bg-gray-100 dark:bg-gray-900 text-gray-800 dark:text-gray-200';
|
||||
}
|
||||
};
|
||||
|
||||
const getStatusText = (status?: string) => {
|
||||
switch (status) {
|
||||
case 'active':
|
||||
return '活跃';
|
||||
case 'canceled':
|
||||
return '已取消';
|
||||
case 'past_due':
|
||||
return '逾期';
|
||||
case 'trialing':
|
||||
return '试用中';
|
||||
default:
|
||||
return '未知';
|
||||
}
|
||||
};
|
||||
|
||||
if (!isAuthenticated) {
|
||||
return null // Will redirect
|
||||
return null; // Will redirect
|
||||
}
|
||||
|
||||
if (isLoading) {
|
||||
return (
|
||||
<div className="min-h-screen bg-background">
|
||||
<header className="border-b">
|
||||
<div className="container mx-auto px-4 py-4">
|
||||
<h1 className="text-2xl font-bold">Subscription & Billing</h1>
|
||||
</div>
|
||||
</header>
|
||||
<main className="container mx-auto px-4 py-8">
|
||||
<div className="flex items-center justify-center">
|
||||
<div className="text-center">
|
||||
<div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary mx-auto mb-4"></div>
|
||||
<p className="text-muted-foreground">Loading subscription details...</p>
|
||||
return (
|
||||
<AppLayout>
|
||||
<div className="p-4 md:p-6">
|
||||
<div className="mb-6">
|
||||
<h2 className="text-xl md:text-2xl font-bold mb-2 text-gray-900 dark:text-white">订阅与计费</h2>
|
||||
<p className="text-sm text-gray-600 dark:text-gray-400">管理您的订阅计划和计费信息</p>
|
||||
</div>
|
||||
|
||||
{/* 重定向消息 */}
|
||||
{redirectMessage && (
|
||||
<div className="mb-6 bg-blue-100 dark:bg-blue-900 border border-blue-200 dark:border-blue-800 rounded-lg p-4">
|
||||
<div className="flex items-center">
|
||||
<AlertTriangle className="text-blue-600 mr-3" size={20} />
|
||||
<p className="text-blue-800 dark:text-blue-200">{redirectMessage}</p>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
if (error) {
|
||||
return (
|
||||
<div className="min-h-screen bg-background">
|
||||
<header className="border-b">
|
||||
<div className="container mx-auto px-4 py-4">
|
||||
<h1 className="text-2xl font-bold">Subscription & Billing</h1>
|
||||
)}
|
||||
|
||||
{/* 错误提示 */}
|
||||
{error && (
|
||||
<div className="bg-red-100 dark:bg-red-800 text-red-800 dark:text-white p-3 rounded-md mb-4 flex justify-between items-center">
|
||||
<span>{error}</span>
|
||||
<button
|
||||
className="text-red-800 dark:text-white hover:text-red-600 dark:hover:text-red-200"
|
||||
onClick={() => setError(null)}
|
||||
>
|
||||
关闭
|
||||
</button>
|
||||
</div>
|
||||
</header>
|
||||
<main className="container mx-auto px-4 py-8">
|
||||
<div className="max-w-2xl mx-auto">
|
||||
<div className="bg-red-50 border border-red-200 rounded-lg p-6">
|
||||
<h3 className="text-red-800 font-semibold mb-2">Error Loading Subscription</h3>
|
||||
<p className="text-red-700 mb-4">{(error as Error).message}</p>
|
||||
<Button onClick={() => refetch()} variant="outline">
|
||||
Try Again
|
||||
)}
|
||||
|
||||
{/* 加载状态 */}
|
||||
{loading ? (
|
||||
<LoadingSpinner size="lg" text="加载订阅信息中..." className="h-64" />
|
||||
) : error ? (
|
||||
<div className="bg-white dark:bg-gray-800 rounded-lg p-6 border border-gray-200 dark:border-gray-700 text-center">
|
||||
<div className="flex flex-col items-center justify-center py-12">
|
||||
<AlertTriangle className="text-gray-400 mb-4" size={48} />
|
||||
<h3 className="text-xl font-medium text-gray-800 dark:text-white mb-2">无法加载数据</h3>
|
||||
<p className="text-gray-600 dark:text-gray-400 max-w-md">
|
||||
订阅信息加载失败，请检查网络连接或联系系统管理员
|
||||
</p>
|
||||
<Button
|
||||
variant="outline"
|
||||
className="mt-4"
|
||||
onClick={fetchSubscriptionData}
|
||||
>
|
||||
重新加载
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-background">
|
||||
<header className="border-b">
|
||||
<div className="container mx-auto px-4 py-4">
|
||||
<h1 className="text-2xl font-bold">Subscription & Billing</h1>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main className="container mx-auto px-4 py-8">
|
||||
<div className="max-w-2xl mx-auto">
|
||||
{redirectMessage && (
|
||||
<div className="mb-6 bg-blue-50 border border-blue-200 rounded-lg p-4">
|
||||
<div className="flex items-center">
|
||||
<div className="flex-shrink-0">
|
||||
<svg className="h-5 w-5 text-blue-400" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fillRule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clipRule="evenodd" />
|
||||
</svg>
|
||||
) : subscription ? (
|
||||
subscription.status === 'active' || subscription.status === 'trialing' ? (
|
||||
/* 活跃订阅视图 */
|
||||
<div className="space-y-6">
|
||||
{/* 当前订阅状态 */}
|
||||
<div className="bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 p-6">
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<div className="flex items-center">
|
||||
<Crown className="text-yellow-500 mr-3" size={24} />
|
||||
<h3 className="text-lg font-semibold text-gray-900 dark:text-white">当前订阅</h3>
|
||||
</div>
|
||||
<span className={`px-3 py-1 rounded-full text-sm font-medium ${getStatusColor(subscription.status)}`}>
|
||||
{getStatusText(subscription.status)}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<div>
|
||||
<h4 className="font-medium text-lg text-gray-900 dark:text-white mb-2">
|
||||
{subscription.subscriptionPlan?.name}
|
||||
</h4>
|
||||
<p className="text-gray-500 dark:text-gray-400 mb-4">您的当前订阅计划</p>
|
||||
|
||||
<div className="space-y-2">
|
||||
<div className="flex justify-between">
|
||||
<span className="text-sm text-gray-500 dark:text-gray-400">下次计费日期:</span>
|
||||
<span className="text-sm font-medium text-gray-900 dark:text-white">
|
||||
{subscription.currentPeriodEnd ? new Date(subscription.currentPeriodEnd).toLocaleDateString() : '未知'}
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<span className="text-sm text-gray-500 dark:text-gray-400">计划ID:</span>
|
||||
<span className="text-sm font-mono text-gray-500 dark:text-gray-400">
|
||||
{subscription.subscriptionPlan?.planId}
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<span className="text-sm text-gray-500 dark:text-gray-400">价格:</span>
|
||||
<span className="text-sm font-medium text-gray-900 dark:text-white">
|
||||
¥{subscription.subscriptionPlan?.price}/{subscription.subscriptionPlan?.interval === 'month' ? '月' : '年'}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-4">
|
||||
<div>
|
||||
<h5 className="font-medium text-gray-900 dark:text-white mb-2">已启用功能</h5>
|
||||
<ul className="space-y-1">
|
||||
{(subscription.subscriptionPlan?.features || []).slice(0, 4).map((feature, index) => (
|
||||
<li key={index} className="flex items-center text-sm">
|
||||
<CheckCircle className="text-green-500 mr-2" size={14} />
|
||||
<span className="text-gray-700 dark:text-gray-300">{feature}</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="ml-3">
|
||||
<p className="text-sm text-blue-800">{redirectMessage}</p>
|
||||
|
||||
{/* 计费管理 */}
|
||||
<div className="bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 p-6">
|
||||
<h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-4 flex items-center">
|
||||
<CreditCard className="text-blue-500 mr-3" size={20} />
|
||||
计费管理
|
||||
</h3>
|
||||
<p className="text-gray-600 dark:text-gray-400 mb-4">
|
||||
管理您的付款方式、查看计费历史记录和更新订阅设置
|
||||
</p>
|
||||
<Button onClick={handleManageBilling} className="flex items-center">
|
||||
<CreditCard size={16} className="mr-2" />
|
||||
管理计费
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="mb-6">
|
||||
<h2 className="text-3xl font-bold mb-2">Manage Your Subscription</h2>
|
||||
<p className="text-muted-foreground">
|
||||
View and manage your subscription plan and billing information.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{subscription?.hasActiveSubscription ? (
|
||||
<ActiveSubscriptionView
|
||||
subscription={subscription}
|
||||
onManageBilling={handleManageBilling}
|
||||
/>
|
||||
) : (
|
||||
<NoSubscriptionView onSubscribe={handleSubscribe} />
|
||||
)}
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function ActiveSubscriptionView({
|
||||
subscription,
|
||||
onManageBilling
|
||||
}: {
|
||||
subscription: SubscriptionData
|
||||
onManageBilling: () => void
|
||||
}) {
|
||||
const formatDate = (date: Date | null) => {
|
||||
if (!date) return 'N/A'
|
||||
return new Date(date).toLocaleDateString('en-US', {
|
||||
year: 'numeric',
|
||||
month: 'long',
|
||||
day: 'numeric'
|
||||
})
|
||||
}
|
||||
|
||||
const getStatusColor = (status: string | null) => {
|
||||
switch (status) {
|
||||
case 'active':
|
||||
return 'text-green-600 bg-green-50 border-green-200'
|
||||
case 'canceled':
|
||||
case 'cancelled':
|
||||
return 'text-red-600 bg-red-50 border-red-200'
|
||||
case 'past_due':
|
||||
return 'text-yellow-600 bg-yellow-50 border-yellow-200'
|
||||
default:
|
||||
return 'text-gray-600 bg-gray-50 border-gray-200'
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<div className="bg-card border rounded-lg p-6">
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<h3 className="text-xl font-semibold">Current Subscription</h3>
|
||||
<span className={`px-3 py-1 rounded-full text-sm font-medium border ${getStatusColor(subscription.subscriptionStatus)}`}>
|
||||
{subscription.subscriptionStatus ? subscription.subscriptionStatus.charAt(0).toUpperCase() + subscription.subscriptionStatus.slice(1) : 'Unknown'}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="space-y-4">
|
||||
<div>
|
||||
<h4 className="font-medium text-lg">{subscription.currentPlan?.name}</h4>
|
||||
<p className="text-muted-foreground">Your current subscription plan</p>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4 pt-4 border-t">
|
||||
) : (
|
||||
/* 无订阅视图 - 显示可用计划 */
|
||||
<div className="space-y-6">
|
||||
{/* 可用计划 */}
|
||||
<div>
|
||||
<h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-6 text-center">选择订阅计划</h3>
|
||||
|
||||
{plans.length > 0 ? (
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6 max-w-4xl mx-auto">
|
||||
{plans.map((plan) => (
|
||||
<div
|
||||
key={plan.id}
|
||||
className={`relative bg-white dark:bg-gray-800 rounded-lg border p-6 ${
|
||||
plan.isPopular
|
||||
? 'border-blue-500 shadow-lg'
|
||||
: 'border-gray-200 dark:border-gray-700'
|
||||
}`}
|
||||
>
|
||||
{plan.isPopular && (
|
||||
<div className="absolute -top-3 left-1/2 transform -translate-x-1/2">
|
||||
<span className="bg-blue-500 text-white px-3 py-1 rounded-full text-sm font-medium flex items-center">
|
||||
<Star size={14} className="mr-1" />
|
||||
推荐
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="text-center mb-6">
|
||||
<h4 className="text-xl font-semibold text-gray-900 dark:text-white mb-2">{plan.name}</h4>
|
||||
<div className="text-3xl font-bold text-gray-900 dark:text-white mb-1">
|
||||
¥{plan.price}
|
||||
</div>
|
||||
<div className="text-sm text-gray-500 dark:text-gray-400">
|
||||
每{plan.interval === 'month' ? '月' : '年'}
|
||||
</div>
|
||||
{plan.interval === 'year' && (
|
||||
<div className="text-sm text-green-600 dark:text-green-400 mt-1">
|
||||
节省 ¥58 (2个月免费)
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<ul className="space-y-3 mb-6">
|
||||
{(plan.features || []).map((feature, index) => (
|
||||
<li key={index} className="flex items-center">
|
||||
<CheckCircle className="text-green-500 mr-3 flex-shrink-0" size={16} />
|
||||
<span className="text-sm text-gray-700 dark:text-gray-300">{feature}</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
|
||||
<Button
|
||||
onClick={() => handleSubscribe(plan)}
|
||||
className={`w-full ${plan.isPopular ? 'bg-blue-600 hover:bg-blue-700' : ''}`}
|
||||
variant={plan.isPopular ? 'default' : 'outline'}
|
||||
>
|
||||
<Crown size={16} className="mr-2" />
|
||||
订阅{plan.name}
|
||||
</Button>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<div className="bg-white dark:bg-gray-800 rounded-lg p-6 border border-gray-200 dark:border-gray-700 text-center">
|
||||
<div className="flex flex-col items-center justify-center py-12">
|
||||
<AlertTriangle className="text-gray-400 mb-4" size={48} />
|
||||
<h3 className="text-xl font-medium text-gray-800 dark:text-white mb-2">暂无可用计划</h3>
|
||||
<p className="text-gray-600 dark:text-gray-400 max-w-md">
|
||||
目前没有可用的订阅计划，请稍后再试
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* 为什么订阅 */}
|
||||
<div className="bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 p-6 max-w-2xl mx-auto">
|
||||
<h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-4 flex items-center">
|
||||
<Star className="text-yellow-500 mr-3" size={20} />
|
||||
为什么选择专业版？
|
||||
</h3>
|
||||
<div className="space-y-3 text-gray-700 dark:text-gray-300">
|
||||
<p className="flex items-start">
|
||||
<CheckCircle className="text-green-500 mr-2 mt-0.5 flex-shrink-0" size={16} />
|
||||
获得所有高级功能，提升您的流星观测体验
|
||||
</p>
|
||||
<p className="flex items-start">
|
||||
<CheckCircle className="text-green-500 mr-2 mt-0.5 flex-shrink-0" size={16} />
|
||||
确保服务不中断，获得优先技术支持
|
||||
</p>
|
||||
<p className="flex items-start">
|
||||
<CheckCircle className="text-green-500 mr-2 mt-0.5 flex-shrink-0" size={16} />
|
||||
支持平台持续发展和功能改进
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
) : (
|
||||
/* 无订阅情况 */
|
||||
<div className="space-y-6">
|
||||
{/* 可用计划 */}
|
||||
<div>
|
||||
<p className="text-sm font-medium text-muted-foreground">Next Billing Date</p>
|
||||
<p className="text-lg">{formatDate(subscription.nextBillingDate)}</p>
|
||||
<h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-6 text-center">选择订阅计划</h3>
|
||||
|
||||
{plans.length > 0 ? (
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6 max-w-4xl mx-auto">
|
||||
{plans.map((plan) => (
|
||||
<div
|
||||
key={plan.id}
|
||||
className={`relative bg-white dark:bg-gray-800 rounded-lg border p-6 ${
|
||||
plan.isPopular
|
||||
? 'border-blue-500 shadow-lg'
|
||||
: 'border-gray-200 dark:border-gray-700'
|
||||
}`}
|
||||
>
|
||||
{plan.isPopular && (
|
||||
<div className="absolute -top-3 left-1/2 transform -translate-x-1/2">
|
||||
<span className="bg-blue-500 text-white px-3 py-1 rounded-full text-sm font-medium flex items-center">
|
||||
<Star size={14} className="mr-1" />
|
||||
推荐
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="text-center mb-6">
|
||||
<h4 className="text-xl font-semibold text-gray-900 dark:text-white mb-2">{plan.name}</h4>
|
||||
<div className="text-3xl font-bold text-gray-900 dark:text-white mb-1">
|
||||
¥{plan.price}
|
||||
</div>
|
||||
<div className="text-sm text-gray-500 dark:text-gray-400">
|
||||
每{plan.interval === 'month' ? '月' : '年'}
|
||||
</div>
|
||||
{plan.interval === 'year' && (
|
||||
<div className="text-sm text-green-600 dark:text-green-400 mt-1">
|
||||
节省 ¥58 (2个月免费)
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<ul className="space-y-3 mb-6">
|
||||
{(plan.features || []).map((feature, index) => (
|
||||
<li key={index} className="flex items-center">
|
||||
<CheckCircle className="text-green-500 mr-3 flex-shrink-0" size={16} />
|
||||
<span className="text-sm text-gray-700 dark:text-gray-300">{feature}</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
|
||||
<Button
|
||||
onClick={() => handleSubscribe(plan)}
|
||||
className={`w-full ${plan.isPopular ? 'bg-blue-600 hover:bg-blue-700' : ''}`}
|
||||
variant={plan.isPopular ? 'default' : 'outline'}
|
||||
>
|
||||
<Crown size={16} className="mr-2" />
|
||||
订阅{plan.name}
|
||||
</Button>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<div className="bg-white dark:bg-gray-800 rounded-lg p-6 border border-gray-200 dark:border-gray-700 text-center">
|
||||
<div className="flex flex-col items-center justify-center py-12">
|
||||
<AlertTriangle className="text-gray-400 mb-4" size={48} />
|
||||
<h3 className="text-xl font-medium text-gray-800 dark:text-white mb-2">暂无可用计划</h3>
|
||||
<p className="text-gray-600 dark:text-gray-400 max-w-md">
|
||||
目前没有可用的订阅计划，请稍后再试
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-sm font-medium text-muted-foreground">Plan ID</p>
|
||||
<p className="text-sm font-mono text-muted-foreground">{subscription.currentPlan?.priceId}</p>
|
||||
|
||||
{/* 为什么订阅 */}
|
||||
<div className="bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 p-6 max-w-2xl mx-auto">
|
||||
<h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-4 flex items-center">
|
||||
<Star className="text-yellow-500 mr-3" size={20} />
|
||||
为什么选择专业版？
|
||||
</h3>
|
||||
<div className="space-y-3 text-gray-700 dark:text-gray-300">
|
||||
<p className="flex items-start">
|
||||
<CheckCircle className="text-green-500 mr-2 mt-0.5 flex-shrink-0" size={16} />
|
||||
获得所有高级功能，提升您的流星观测体验
|
||||
</p>
|
||||
<p className="flex items-start">
|
||||
<CheckCircle className="text-green-500 mr-2 mt-0.5 flex-shrink-0" size={16} />
|
||||
确保服务不中断，获得优先技术支持
|
||||
</p>
|
||||
<p className="flex items-start">
|
||||
<CheckCircle className="text-green-500 mr-2 mt-0.5 flex-shrink-0" size={16} />
|
||||
支持平台持续发展和功能改进
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="bg-card border rounded-lg p-6">
|
||||
<h3 className="font-semibold mb-4">Billing Management</h3>
|
||||
<p className="text-muted-foreground mb-4">
|
||||
Manage your payment methods, view billing history, and update your subscription.
|
||||
</p>
|
||||
<Button onClick={onManageBilling}>
|
||||
Manage Billing
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function NoSubscriptionView({ onSubscribe }: { onSubscribe: () => void }) {
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<div className="bg-card border rounded-lg p-6">
|
||||
<h3 className="text-xl font-semibold mb-4">Available Plans</h3>
|
||||
|
||||
<div className="border rounded-lg p-6">
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<div>
|
||||
<h4 className="text-lg font-semibold">Pro Plan</h4>
|
||||
<p className="text-muted-foreground">Full access to all platform features</p>
|
||||
</div>
|
||||
<div className="text-right">
|
||||
<div className="text-2xl font-bold">$29</div>
|
||||
<div className="text-sm text-muted-foreground">per month</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<ul className="space-y-2 mb-6">
|
||||
<li className="flex items-center">
|
||||
<span className="w-2 h-2 bg-green-500 rounded-full mr-3"></span>
|
||||
Unlimited device monitoring
|
||||
</li>
|
||||
<li className="flex items-center">
|
||||
<span className="w-2 h-2 bg-green-500 rounded-full mr-3"></span>
|
||||
Real-time event notifications
|
||||
</li>
|
||||
<li className="flex items-center">
|
||||
<span className="w-2 h-2 bg-green-500 rounded-full mr-3"></span>
|
||||
Advanced analytics dashboard
|
||||
</li>
|
||||
<li className="flex items-center">
|
||||
<span className="w-2 h-2 bg-green-500 rounded-full mr-3"></span>
|
||||
Priority customer support
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<Button onClick={onSubscribe} className="w-full">
|
||||
Subscribe to Pro Plan
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-card border rounded-lg p-6">
|
||||
<h3 className="font-semibold mb-2">Why Subscribe?</h3>
|
||||
<p className="text-muted-foreground">
|
||||
Subscribing to our Pro Plan gives you access to all premium features and ensures
|
||||
uninterrupted service for your meteor monitoring needs.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
</AppLayout>
|
||||
);
|
||||
}
|
||||
259
meteor-frontend/src/app/weather/page.tsx
Normal file
259
meteor-frontend/src/app/weather/page.tsx
Normal file
@ -0,0 +1,259 @@
|
||||
'use client';
|
||||
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { CloudLightning, Filter, Search, Calendar, RefreshCw, Thermometer, Cloud, Eye, Wind } from 'lucide-react';
|
||||
import { StatCard } from '@/components/ui/stat-card';
|
||||
import { LoadingSpinner } from '@/components/ui/loading-spinner';
|
||||
import { AppLayout } from '@/components/layout/app-layout';
|
||||
import { getAllWeatherData, getWeatherSummary, type WeatherData, type WeatherSummary } from '@/services/weather';
|
||||
|
||||
export default function WeatherPage() {
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [weatherData, setWeatherData] = useState<WeatherData[]>([]);
|
||||
const [summaryData, setSummaryData] = useState<WeatherSummary | null>(null);
|
||||
const [expandedCards, setExpandedCards] = useState<Record<string, boolean>>({});
|
||||
const [searchQuery, setSearchQuery] = useState('');
|
||||
const [filterObservation, setFilterObservation] = useState<string>('all');
|
||||
const [lastUpdated, setLastUpdated] = useState<Date | null>(null);
|
||||
|
||||
// 获取天气数据
|
||||
const fetchWeatherData = async () => {
|
||||
setLoading(true);
|
||||
|
||||
try {
|
||||
const [weatherResponse, summaryResponse] = await Promise.all([
|
||||
getAllWeatherData(),
|
||||
getWeatherSummary()
|
||||
]);
|
||||
|
||||
setWeatherData(weatherResponse);
|
||||
setSummaryData(summaryResponse);
|
||||
setLastUpdated(new Date());
|
||||
} catch (error) {
|
||||
console.error('获取天气数据失败:', error);
|
||||
// 如果API调用失败，使用模拟数据作为后备
|
||||
setWeatherData([]);
|
||||
setSummaryData(null);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
fetchWeatherData();
|
||||
}, []);
|
||||
|
||||
// 切换卡片展开/折叠状态
|
||||
const handleToggleExpand = (stationName: string) => {
|
||||
setExpandedCards(prev => ({
|
||||
...prev,
|
||||
[stationName]: !prev[stationName]
|
||||
}));
|
||||
};
|
||||
|
||||
// 过滤和搜索天气数据
|
||||
const filteredWeatherData = weatherData.filter(weather => {
|
||||
const matchesSearch = searchQuery === '' ||
|
||||
weather.stationName.toLowerCase().includes(searchQuery.toLowerCase());
|
||||
|
||||
const matchesFilter = filterObservation === 'all' ||
|
||||
weather.observationQuality === filterObservation;
|
||||
|
||||
return matchesSearch && matchesFilter;
|
||||
});
|
||||
|
||||
// 格式化最后更新时间
|
||||
const formatLastUpdated = (date: Date | null) => {
|
||||
if (!date) return '更新中...';
|
||||
|
||||
return date.toLocaleString('zh-CN', {
|
||||
year: 'numeric',
|
||||
month: 'numeric',
|
||||
day: 'numeric',
|
||||
hour: '2-digit',
|
||||
minute: '2-digit',
|
||||
second: '2-digit'
|
||||
});
|
||||
};
|
||||
|
||||
// 获取观测条件颜色
|
||||
const getObservationQualityColor = (quality: string) => {
|
||||
switch (quality) {
|
||||
case 'excellent': return 'text-green-500 bg-green-100 dark:bg-green-900';
|
||||
case 'moderate': return 'text-yellow-500 bg-yellow-100 dark:bg-yellow-900';
|
||||
case 'poor': return 'text-red-500 bg-red-100 dark:bg-red-900';
|
||||
default: return 'text-gray-500 bg-gray-100 dark:bg-gray-900';
|
||||
}
|
||||
};
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<LoadingSpinner size="lg" text="加载天气数据中..." className="h-64" />
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<AppLayout>
|
||||
<div className="p-4 md:p-6">
|
||||
<div className="mb-6">
|
||||
<h2 className="text-xl md:text-2xl font-bold mb-2 text-gray-900 dark:text-white">天气数据</h2>
|
||||
<p className="text-sm text-gray-600 dark:text-gray-400">监测各站点的天气状况和观测条件</p>
|
||||
</div>
|
||||
|
||||
{/* 更新时间和刷新按钮 */}
|
||||
<div className="flex flex-col md:flex-row md:justify-between md:items-center mb-6 space-y-2 md:space-y-0">
|
||||
<div className="flex items-center text-sm text-gray-500 dark:text-gray-400">
|
||||
<Calendar size={14} className="mr-1" />
|
||||
最后更新：{formatLastUpdated(lastUpdated)}
|
||||
</div>
|
||||
<button
|
||||
className="inline-flex items-center px-3 py-2 bg-blue-600 text-white rounded-md text-sm hover:bg-blue-700"
|
||||
onClick={fetchWeatherData}
|
||||
>
|
||||
<RefreshCw size={14} className="mr-2" />
|
||||
刷新数据
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* 天气概要 */}
|
||||
{summaryData && (
|
||||
<div className="mb-6 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
|
||||
<StatCard
|
||||
title="平均温度"
|
||||
value={summaryData.avgTemperature?.toFixed(1) || '--'}
|
||||
suffix="°C"
|
||||
icon={Thermometer}
|
||||
iconBg="bg-orange-500"
|
||||
/>
|
||||
<StatCard
|
||||
title="平均云层覆盖"
|
||||
value={summaryData.avgCloudCover?.toFixed(1) || '--'}
|
||||
suffix="%"
|
||||
icon={Cloud}
|
||||
iconBg="bg-gray-500"
|
||||
/>
|
||||
<StatCard
|
||||
title="平均能见度"
|
||||
value={summaryData.avgVisibility?.toFixed(1) || '--'}
|
||||
suffix="km"
|
||||
icon={Eye}
|
||||
iconBg="bg-blue-500"
|
||||
/>
|
||||
<StatCard
|
||||
title="最佳观测站"
|
||||
value={summaryData.bestObservationStation || '--'}
|
||||
icon={Wind}
|
||||
iconBg="bg-green-500"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 筛选和搜索 */}
|
||||
<div className="mb-6 flex flex-col md:flex-row md:items-center space-y-2 md:space-y-0 md:space-x-4">
|
||||
<div className="flex-1 relative">
|
||||
<div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
|
||||
<Search size={18} className="text-gray-400" />
|
||||
</div>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="搜索站点..."
|
||||
className="bg-white dark:bg-gray-700 text-gray-900 dark:text-white placeholder-gray-500 dark:placeholder-gray-400 w-full pl-10 pr-4 py-2 rounded-md border border-gray-300 dark:border-gray-600 focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none"
|
||||
value={searchQuery}
|
||||
onChange={(e) => setSearchQuery(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center space-x-2">
|
||||
<Filter size={18} className="text-gray-400" />
|
||||
<span className="text-sm text-gray-600 dark:text-gray-400">观测条件:</span>
|
||||
<select
|
||||
className="bg-white dark:bg-gray-700 text-gray-900 dark:text-white rounded-md border border-gray-300 dark:border-gray-600 px-3 py-2 focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none text-sm"
|
||||
value={filterObservation}
|
||||
onChange={(e) => setFilterObservation(e.target.value)}
|
||||
>
|
||||
<option value="all">全部</option>
|
||||
<option value="excellent">优秀</option>
|
||||
<option value="moderate">一般</option>
|
||||
<option value="poor">较差</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 天气站点卡片网格 */}
|
||||
{filteredWeatherData.length > 0 ? (
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
|
||||
{filteredWeatherData.map(weather => (
|
||||
<div
|
||||
key={weather.stationName}
|
||||
className="bg-white dark:bg-gray-800 rounded-lg p-4 border border-gray-200 dark:border-gray-700"
|
||||
>
|
||||
<div className="flex justify-between items-start mb-3">
|
||||
<h3 className="font-medium text-gray-900 dark:text-white">{weather.stationName}</h3>
|
||||
<span className={`px-2 py-1 rounded-full text-xs font-medium ${getObservationQualityColor(weather.observationQuality || 'moderate')}`}>
|
||||
{weather.observationQuality === 'excellent' ? '优秀' :
|
||||
weather.observationQuality === 'moderate' ? '一般' : '较差'}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<div className="flex justify-between">
|
||||
<span className="text-sm text-gray-500 dark:text-gray-400">温度</span>
|
||||
<span className="text-sm font-medium text-gray-900 dark:text-white">{weather.currentTemperature || '--'}°C</span>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<span className="text-sm text-gray-500 dark:text-gray-400">湿度</span>
|
||||
<span className="text-sm font-medium text-gray-900 dark:text-white">{weather.humidity || '--'}%</span>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<span className="text-sm text-gray-500 dark:text-gray-400">云层覆盖</span>
|
||||
<span className="text-sm font-medium text-gray-900 dark:text-white">{weather.cloudCover || '--'}%</span>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<span className="text-sm text-gray-500 dark:text-gray-400">能见度</span>
|
||||
<span className="text-sm font-medium text-gray-900 dark:text-white">{weather.visibility || '--'} km</span>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<span className="text-sm text-gray-500 dark:text-gray-400">风速</span>
|
||||
<span className="text-sm font-medium text-gray-900 dark:text-white">{weather.windSpeed || '--'} m/s</span>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<span className="text-sm text-gray-500 dark:text-gray-400">天气状况</span>
|
||||
<span className="text-sm font-medium text-gray-900 dark:text-white">{weather.condition || '--'}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mt-3 pt-3 border-t border-gray-200 dark:border-gray-700">
|
||||
<button
|
||||
className="w-full text-sm text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-300"
|
||||
onClick={() => handleToggleExpand(weather.stationName)}
|
||||
>
|
||||
{expandedCards[weather.stationName] ? '收起详情' : '查看详情'}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{expandedCards[weather.stationName] && (
|
||||
<div className="mt-3 pt-3 border-t border-gray-200 dark:border-gray-700">
|
||||
<div className="text-sm text-gray-600 dark:text-gray-400">
|
||||
<p>风向: {weather.windDirection || '--'}°</p>
|
||||
<p>预报数据: {weather.forecasts?.length || 0} 条</p>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<div className="bg-white dark:bg-gray-800 rounded-lg p-6 border border-gray-200 dark:border-gray-700 text-center">
|
||||
<div className="flex flex-col items-center justify-center py-12">
|
||||
<CloudLightning className="text-gray-400 mb-4" size={48} />
|
||||
<h3 className="text-xl font-medium text-gray-800 dark:text-white mb-2">没有匹配的站点</h3>
|
||||
<p className="text-gray-600 dark:text-gray-400 max-w-md">
|
||||
{searchQuery ? `没有找到包含"${searchQuery}"的站点` : '没有符合筛选条件的站点'}，请尝试调整搜索条件。
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</AppLayout>
|
||||
);
|
||||
}
|
||||
@ -0,0 +1,97 @@
|
||||
'use client';
|
||||
|
||||
import React from 'react';
|
||||
import { BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer } from 'recharts';
|
||||
|
||||
interface BrightnessData {
|
||||
range: string;
|
||||
count: number;
|
||||
color: string;
|
||||
}
|
||||
|
||||
interface BrightnessDistributionChartProps {
|
||||
data: Array<{
|
||||
range: string;
|
||||
count: number;
|
||||
}>;
|
||||
}
|
||||
|
||||
// 根据亮度范围设置颜色
|
||||
const getBrightnessColor = (range: string): string => {
|
||||
if (range.includes('-6') || range.includes('超级')) return '#ff1744'; // 超级火球 - 红色
|
||||
if (range.includes('-4') || range.includes('火球')) return '#ff5722'; // 火球 - 深橙
|
||||
if (range.includes('-2') || range.includes('很亮')) return '#ff9800'; // 很亮 - 橙色
|
||||
if (range.includes('0') || range.includes('亮流星')) return '#ffc107'; // 亮流星 - 琥珀色
|
||||
if (range.includes('2') || range.includes('普通')) return '#2196f3'; // 普通 - 蓝色
|
||||
if (range.includes('4') || range.includes('暗流星')) return '#9c27b0'; // 暗流星 - 紫色
|
||||
return '#607d8b'; // 很暗流星 - 蓝灰色
|
||||
};
|
||||
|
||||
export function BrightnessDistributionChart({ data }: BrightnessDistributionChartProps) {
|
||||
if (!data || data.length === 0) {
|
||||
return (
|
||||
<div className="flex items-center justify-center h-80 text-gray-500 dark:text-gray-400">
|
||||
暂无数据
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const chartData: BrightnessData[] = data.map(item => ({
|
||||
range: item.range,
|
||||
count: item.count,
|
||||
color: getBrightnessColor(item.range)
|
||||
}));
|
||||
|
||||
const renderTooltip = (props: any) => {
|
||||
if (props.active && props.payload && props.payload.length) {
|
||||
const data = props.payload[0];
|
||||
return (
|
||||
<div className="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-600 rounded-lg p-3 shadow-lg">
|
||||
<p className="text-sm font-medium text-gray-900 dark:text-white">
|
||||
亮度范围: {data.payload.range}
|
||||
</p>
|
||||
<p className="text-sm text-blue-600">
|
||||
数量: {data.value} 颗
|
||||
</p>
|
||||
<p className="text-xs text-gray-500 dark:text-gray-400">
|
||||
占比: {((data.value / chartData.reduce((sum, item) => sum + item.count, 0)) * 100).toFixed(1)}%
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
return null;
|
||||
};
|
||||
|
||||
const CustomBar = (props: any) => {
|
||||
const { fill, ...rest } = props;
|
||||
return <Bar {...rest} fill={props.payload.color} />;
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="w-full h-80">
|
||||
<ResponsiveContainer width="100%" height="100%">
|
||||
<BarChart data={chartData} margin={{ top: 20, right: 30, left: 20, bottom: 5 }}>
|
||||
<CartesianGrid strokeDasharray="3 3" className="opacity-30" />
|
||||
<XAxis
|
||||
dataKey="range"
|
||||
tick={{ fontSize: 11 }}
|
||||
className="text-gray-600 dark:text-gray-300"
|
||||
angle={-45}
|
||||
textAnchor="end"
|
||||
height={60}
|
||||
/>
|
||||
<YAxis
|
||||
tick={{ fontSize: 12 }}
|
||||
className="text-gray-600 dark:text-gray-300"
|
||||
/>
|
||||
<Tooltip content={renderTooltip} />
|
||||
<Bar
|
||||
dataKey="count"
|
||||
shape={CustomBar}
|
||||
radius={[4, 4, 0, 0]}
|
||||
/>
|
||||
</BarChart>
|
||||
</ResponsiveContainer>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
113
meteor-frontend/src/components/charts/meteor-type-pie-chart.tsx
Normal file
113
meteor-frontend/src/components/charts/meteor-type-pie-chart.tsx
Normal file
@ -0,0 +1,113 @@
|
||||
'use client';
|
||||
|
||||
import React from 'react';
|
||||
import { PieChart, Pie, Cell, ResponsiveContainer, Legend, Tooltip } from 'recharts';
|
||||
|
||||
interface MeteorTypeData {
|
||||
name: string;
|
||||
value: number;
|
||||
color: string;
|
||||
}
|
||||
|
||||
interface MeteorTypePieChartProps {
|
||||
data: Array<{
|
||||
type: string;
|
||||
count: number;
|
||||
}>;
|
||||
}
|
||||
|
||||
// 预定义颜色方案
|
||||
const COLORS = [
|
||||
'#8884d8', '#82ca9d', '#ffc658', '#ff7c7c',
|
||||
'#8dd1e1', '#d084d0', '#82d982', '#ffb347'
|
||||
];
|
||||
|
||||
// 中文名称映射
|
||||
const typeNameMap: Record<string, string> = {
|
||||
'meteor': '流星',
|
||||
'bolide': '火球',
|
||||
'fireball': '火流星',
|
||||
'sporadic': '偶发流星',
|
||||
'perseid': '英仙座流星雨',
|
||||
'gemini': '双子座流星雨',
|
||||
'leonid': '狮子座流星雨',
|
||||
'quadrantid': '象限仪座流星雨'
|
||||
};
|
||||
|
||||
export function MeteorTypePieChart({ data }: MeteorTypePieChartProps) {
|
||||
if (!data || data.length === 0) {
|
||||
return (
|
||||
<div className="flex items-center justify-center h-80 text-gray-500 dark:text-gray-400">
|
||||
暂无数据
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const chartData: MeteorTypeData[] = data.map((item, index) => ({
|
||||
name: typeNameMap[item.type] || item.type,
|
||||
value: item.count,
|
||||
color: COLORS[index % COLORS.length]
|
||||
}));
|
||||
|
||||
const renderTooltip = (props: any) => {
|
||||
if (props.active && props.payload && props.payload.length) {
|
||||
const data = props.payload[0];
|
||||
return (
|
||||
<div className="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-600 rounded-lg p-3 shadow-lg">
|
||||
<p className="text-sm font-medium text-gray-900 dark:text-white">
|
||||
{data.name}: {data.value} 颗
|
||||
</p>
|
||||
<p className="text-xs text-gray-500 dark:text-gray-400">
|
||||
占比: {((data.value / chartData.reduce((sum, item) => sum + item.value, 0)) * 100).toFixed(1)}%
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
return null;
|
||||
};
|
||||
|
||||
const renderLegend = (props: any) => {
|
||||
return (
|
||||
<div className="flex flex-wrap justify-center gap-4 mt-4">
|
||||
{props.payload.map((entry: any, index: number) => (
|
||||
<div key={`legend-${index}`} className="flex items-center">
|
||||
<div
|
||||
className="w-3 h-3 rounded mr-2"
|
||||
style={{ backgroundColor: entry.color }}
|
||||
/>
|
||||
<span className="text-sm text-gray-600 dark:text-gray-300">
|
||||
{entry.value}
|
||||
</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="w-full h-80">
|
||||
<ResponsiveContainer width="100%" height="100%">
|
||||
<PieChart>
|
||||
<Pie
|
||||
data={chartData}
|
||||
cx="50%"
|
||||
cy="50%"
|
||||
labelLine={false}
|
||||
label={({ name, value, percent }) =>
|
||||
`${name} ${(percent * 100).toFixed(0)}%`
|
||||
}
|
||||
outerRadius={80}
|
||||
fill="#8884d8"
|
||||
dataKey="value"
|
||||
>
|
||||
{chartData.map((entry, index) => (
|
||||
<Cell key={`cell-${index}`} fill={entry.color} />
|
||||
))}
|
||||
</Pie>
|
||||
<Tooltip content={renderTooltip} />
|
||||
<Legend content={renderLegend} />
|
||||
</PieChart>
|
||||
</ResponsiveContainer>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@ -0,0 +1,73 @@
|
||||
'use client';
|
||||
|
||||
import React from 'react';
|
||||
import { BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer } from 'recharts';
|
||||
|
||||
interface StationData {
|
||||
station: string;
|
||||
count: number;
|
||||
}
|
||||
|
||||
interface StationDistributionChartProps {
|
||||
data: Array<{
|
||||
region: string;
|
||||
count: number;
|
||||
}>;
|
||||
}
|
||||
|
||||
export function StationDistributionChart({ data }: StationDistributionChartProps) {
|
||||
if (!data || data.length === 0) {
|
||||
return (
|
||||
<div className="flex items-center justify-center h-80 text-gray-500 dark:text-gray-400">
|
||||
暂无数据
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const chartData: StationData[] = data.map(item => ({
|
||||
station: item.region,
|
||||
count: item.count
|
||||
}));
|
||||
|
||||
const renderTooltip = (props: any) => {
|
||||
if (props.active && props.payload && props.payload.length) {
|
||||
const data = props.payload[0];
|
||||
return (
|
||||
<div className="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-600 rounded-lg p-3 shadow-lg">
|
||||
<p className="text-sm font-medium text-gray-900 dark:text-white">
|
||||
{data.payload.station}
|
||||
</p>
|
||||
<p className="text-sm text-blue-600">
|
||||
检测数量: {data.value} 颗
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
return null;
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="w-full h-80">
|
||||
<ResponsiveContainer width="100%" height="100%">
|
||||
<BarChart data={chartData} margin={{ top: 20, right: 30, left: 20, bottom: 5 }}>
|
||||
<CartesianGrid strokeDasharray="3 3" className="opacity-30" />
|
||||
<XAxis
|
||||
dataKey="station"
|
||||
tick={{ fontSize: 12 }}
|
||||
className="text-gray-600 dark:text-gray-300"
|
||||
/>
|
||||
<YAxis
|
||||
tick={{ fontSize: 12 }}
|
||||
className="text-gray-600 dark:text-gray-300"
|
||||
/>
|
||||
<Tooltip content={renderTooltip} />
|
||||
<Bar
|
||||
dataKey="count"
|
||||
fill="#3b82f6"
|
||||
radius={[4, 4, 0, 0]}
|
||||
/>
|
||||
</BarChart>
|
||||
</ResponsiveContainer>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@ -0,0 +1,95 @@
|
||||
'use client';
|
||||
|
||||
import React from 'react';
|
||||
import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, AreaChart, Area } from 'recharts';
|
||||
|
||||
interface TimeData {
|
||||
time: string;
|
||||
count: number;
|
||||
}
|
||||
|
||||
interface TimeDistributionChartProps {
|
||||
data: Array<{
|
||||
hour?: number;
|
||||
month?: string;
|
||||
year?: number;
|
||||
count: number;
|
||||
}>;
|
||||
timeFrame: 'hour' | 'day' | 'month';
|
||||
}
|
||||
|
||||
export function TimeDistributionChart({ data, timeFrame }: TimeDistributionChartProps) {
|
||||
if (!data || data.length === 0) {
|
||||
return (
|
||||
<div className="flex items-center justify-center h-80 text-gray-500 dark:text-gray-400">
|
||||
暂无数据
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const chartData: TimeData[] = data.map(item => {
|
||||
let timeLabel = '';
|
||||
if ('hour' in item && item.hour !== undefined) {
|
||||
timeLabel = `${item.hour}:00`;
|
||||
} else if ('month' in item && item.month !== undefined) {
|
||||
timeLabel = item.month;
|
||||
} else if ('year' in item && item.year !== undefined) {
|
||||
timeLabel = item.year.toString();
|
||||
}
|
||||
|
||||
return {
|
||||
time: timeLabel,
|
||||
count: item.count
|
||||
};
|
||||
});
|
||||
|
||||
const renderTooltip = (props: any) => {
|
||||
if (props.active && props.payload && props.payload.length) {
|
||||
const data = props.payload[0];
|
||||
return (
|
||||
<div className="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-600 rounded-lg p-3 shadow-lg">
|
||||
<p className="text-sm font-medium text-gray-900 dark:text-white">
|
||||
{timeFrame === 'hour' ? '时间' : timeFrame === 'month' ? '月份' : '年份'}: {data.payload.time}
|
||||
</p>
|
||||
<p className="text-sm text-blue-600">
|
||||
检测数量: {data.value} 颗
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
return null;
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="w-full h-80">
|
||||
<ResponsiveContainer width="100%" height="100%">
|
||||
<AreaChart data={chartData} margin={{ top: 20, right: 30, left: 20, bottom: 5 }}>
|
||||
<defs>
|
||||
<linearGradient id="colorCount" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="5%" stopColor="#3b82f6" stopOpacity={0.8}/>
|
||||
<stop offset="95%" stopColor="#3b82f6" stopOpacity={0.1}/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<CartesianGrid strokeDasharray="3 3" className="opacity-30" />
|
||||
<XAxis
|
||||
dataKey="time"
|
||||
tick={{ fontSize: 12 }}
|
||||
className="text-gray-600 dark:text-gray-300"
|
||||
/>
|
||||
<YAxis
|
||||
tick={{ fontSize: 12 }}
|
||||
className="text-gray-600 dark:text-gray-300"
|
||||
/>
|
||||
<Tooltip content={renderTooltip} />
|
||||
<Area
|
||||
type="monotone"
|
||||
dataKey="count"
|
||||
stroke="#3b82f6"
|
||||
fillOpacity={1}
|
||||
fill="url(#colorCount)"
|
||||
/>
|
||||
</AreaChart>
|
||||
</ResponsiveContainer>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
229
meteor-frontend/src/components/layout/app-layout.tsx
Normal file
229
meteor-frontend/src/components/layout/app-layout.tsx
Normal file
@ -0,0 +1,229 @@
|
||||
'use client';
|
||||
|
||||
import React, { useState } from 'react';
|
||||
import Link from 'next/link';
|
||||
import { useRouter, usePathname } from 'next/navigation';
|
||||
import {
|
||||
Cloud,
|
||||
BarChart3,
|
||||
Monitor,
|
||||
Settings,
|
||||
History,
|
||||
Crown,
|
||||
Camera,
|
||||
Image,
|
||||
LayoutDashboard,
|
||||
Menu,
|
||||
X,
|
||||
LogOut,
|
||||
User
|
||||
} from 'lucide-react';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { useAuth } from '@/contexts/auth-context';
|
||||
|
||||
interface AppLayoutProps {
|
||||
children: React.ReactNode;
|
||||
}
|
||||
|
||||
interface NavItem {
|
||||
href: string;
|
||||
label: string;
|
||||
icon: React.ComponentType<{ size?: number; className?: string }>;
|
||||
}
|
||||
|
||||
const navItems: NavItem[] = [
|
||||
{ href: '/dashboard', label: '仪表板', icon: LayoutDashboard },
|
||||
{ href: '/weather', label: '天气数据', icon: Cloud },
|
||||
{ href: '/analysis', label: '数据分析', icon: BarChart3 },
|
||||
{ href: '/history', label: '历史数据', icon: History },
|
||||
{ href: '/devices', label: '设备监控', icon: Monitor },
|
||||
{ href: '/camera-settings', label: '相机设置', icon: Camera },
|
||||
{ href: '/gallery', label: '事件图库', icon: Image },
|
||||
{ href: '/settings', label: '设置', icon: Settings },
|
||||
];
|
||||
|
||||
export const AppLayout: React.FC<AppLayoutProps> = ({ children }) => {
|
||||
const router = useRouter();
|
||||
const pathname = usePathname();
|
||||
const { user, logout } = useAuth();
|
||||
const [sidebarOpen, setSidebarOpen] = useState(false);
|
||||
|
||||
const handleLogout = () => {
|
||||
logout();
|
||||
router.push('/');
|
||||
};
|
||||
|
||||
const closeSidebar = () => {
|
||||
setSidebarOpen(false);
|
||||
};
|
||||
|
||||
const isActiveLink = (href: string) => {
|
||||
return pathname === href;
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gray-50 dark:bg-gray-900">
|
||||
{/* 移动端透明点击区域 - 用于关闭侧边栏 */}
|
||||
{sidebarOpen && (
|
||||
<div
|
||||
className="fixed inset-0 z-30 lg:hidden"
|
||||
onClick={closeSidebar}
|
||||
style={{ backgroundColor: 'transparent' }}
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* 侧边栏 */}
|
||||
<div className={`
|
||||
fixed inset-y-0 left-0 z-50 w-64 bg-white dark:bg-gray-800 shadow-lg transform transition-transform duration-300 ease-in-out
|
||||
${sidebarOpen ? 'translate-x-0' : '-translate-x-full'}
|
||||
lg:translate-x-0
|
||||
`}>
|
||||
{/* 侧边栏头部 */}
|
||||
<div className="flex items-center justify-between h-16 px-4 border-b border-gray-200 dark:border-gray-700">
|
||||
<Link href="/dashboard" className="flex items-center" onClick={closeSidebar}>
|
||||
<div className="w-8 h-8 bg-blue-600 rounded-lg flex items-center justify-center mr-3">
|
||||
<LayoutDashboard className="w-5 h-5 text-white" />
|
||||
</div>
|
||||
<span className="text-lg font-bold text-gray-900 dark:text-white">流星监测</span>
|
||||
</Link>
|
||||
|
||||
{/* 移动端关闭按钮 */}
|
||||
<button
|
||||
onClick={closeSidebar}
|
||||
className="lg:hidden p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 dark:hover:bg-gray-700"
|
||||
>
|
||||
<X size={20} />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* 导航菜单 */}
|
||||
<nav className="flex-1 px-4 py-4 space-y-1">
|
||||
{navItems.map((item) => {
|
||||
const Icon = item.icon;
|
||||
const isActive = isActiveLink(item.href);
|
||||
|
||||
return (
|
||||
<Link
|
||||
key={item.href}
|
||||
href={item.href}
|
||||
onClick={closeSidebar}
|
||||
className={`
|
||||
group flex items-center px-3 py-2 text-sm font-medium rounded-md transition-colors duration-200
|
||||
${isActive
|
||||
? 'bg-blue-100 dark:bg-blue-900 text-blue-700 dark:text-blue-200'
|
||||
: 'text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 hover:text-gray-900 dark:hover:text-white'
|
||||
}
|
||||
`}
|
||||
>
|
||||
<Icon
|
||||
size={18}
|
||||
className={`mr-3 flex-shrink-0 ${
|
||||
isActive ? 'text-blue-500' : 'text-gray-400 group-hover:text-gray-500'
|
||||
}`}
|
||||
/>
|
||||
{item.label}
|
||||
</Link>
|
||||
);
|
||||
})}
|
||||
|
||||
{/* 订阅链接 */}
|
||||
<Link
|
||||
href="/subscription"
|
||||
onClick={closeSidebar}
|
||||
className={`
|
||||
group flex items-center px-3 py-2 text-sm font-medium rounded-md transition-colors duration-200 mt-4
|
||||
${isActiveLink('/subscription')
|
||||
? 'bg-blue-100 dark:bg-blue-900 text-blue-700 dark:text-blue-200'
|
||||
: user?.hasActiveSubscription
|
||||
? 'text-yellow-600 dark:text-yellow-400 hover:bg-yellow-50 dark:hover:bg-yellow-900/20'
|
||||
: 'text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700'
|
||||
}
|
||||
`}
|
||||
>
|
||||
<Crown
|
||||
size={18}
|
||||
className={`mr-3 flex-shrink-0 ${
|
||||
isActiveLink('/subscription')
|
||||
? 'text-blue-500'
|
||||
: user?.hasActiveSubscription
|
||||
? 'text-yellow-500'
|
||||
: 'text-gray-400 group-hover:text-gray-500'
|
||||
}`}
|
||||
/>
|
||||
{user?.hasActiveSubscription ? '专业版' : '升级专业版'}
|
||||
{user?.hasActiveSubscription && (
|
||||
<span className="ml-auto bg-yellow-100 dark:bg-yellow-900 text-yellow-800 dark:text-yellow-200 text-xs px-2 py-1 rounded-full">
|
||||
PRO
|
||||
</span>
|
||||
)}
|
||||
</Link>
|
||||
</nav>
|
||||
|
||||
{/* 侧边栏底部用户信息 */}
|
||||
<div className="border-t border-gray-200 dark:border-gray-700 p-4">
|
||||
<div className="flex items-center mb-3">
|
||||
<div className="w-8 h-8 bg-blue-600 rounded-full flex items-center justify-center mr-3">
|
||||
<User className="w-4 h-4 text-white" />
|
||||
</div>
|
||||
<div className="flex-1 min-w-0">
|
||||
<p className="text-sm font-medium text-gray-900 dark:text-white truncate">
|
||||
{user?.email}
|
||||
</p>
|
||||
<p className="text-xs text-gray-500 dark:text-gray-400">
|
||||
{user?.hasActiveSubscription ? '专业版用户' : '免费版用户'}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Button
|
||||
onClick={handleLogout}
|
||||
variant="outline"
|
||||
size="sm"
|
||||
className="w-full justify-start text-left"
|
||||
>
|
||||
<LogOut size={16} className="mr-2" />
|
||||
退出登录
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 主内容区域 */}
|
||||
<div className="lg:pl-64">
|
||||
{/* 顶部导航栏（移动端） */}
|
||||
<div className="lg:hidden bg-white dark:bg-gray-800 shadow-sm border-b border-gray-200 dark:border-gray-700">
|
||||
<div className="flex items-center justify-between h-16 px-4">
|
||||
<button
|
||||
onClick={() => setSidebarOpen(true)}
|
||||
className="p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 dark:hover:bg-gray-700"
|
||||
>
|
||||
<Menu size={24} />
|
||||
</button>
|
||||
|
||||
<div className="flex items-center space-x-2">
|
||||
<span className="text-lg font-bold text-gray-900 dark:text-white">流星监测网络</span>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center space-x-2">
|
||||
{/* 移动端会员状态 */}
|
||||
<Link
|
||||
href="/subscription"
|
||||
className={`p-2 rounded-md ${
|
||||
user?.hasActiveSubscription
|
||||
? 'text-yellow-600 dark:text-yellow-400'
|
||||
: 'text-gray-400 hover:text-gray-500'
|
||||
}`}
|
||||
>
|
||||
<Crown size={20} />
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 页面内容 */}
|
||||
<main className="min-h-screen bg-gray-50 dark:bg-gray-900">
|
||||
{children}
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
28
meteor-frontend/src/components/ui/loading-spinner.tsx
Normal file
28
meteor-frontend/src/components/ui/loading-spinner.tsx
Normal file
@ -0,0 +1,28 @@
|
||||
import React from 'react';
|
||||
|
||||
interface LoadingSpinnerProps {
|
||||
size?: 'sm' | 'md' | 'lg';
|
||||
text?: string;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
export const LoadingSpinner: React.FC<LoadingSpinnerProps> = ({
|
||||
size = 'md',
|
||||
text,
|
||||
className = ''
|
||||
}) => {
|
||||
const sizeClasses = {
|
||||
sm: 'w-4 h-4',
|
||||
md: 'w-8 h-8',
|
||||
lg: 'w-12 h-12'
|
||||
};
|
||||
|
||||
return (
|
||||
<div className={`flex justify-center items-center ${className}`}>
|
||||
<div className={`${sizeClasses[size]} border-t-2 border-b-2 border-blue-500 rounded-full animate-spin`}></div>
|
||||
{text && (
|
||||
<span className="ml-2 text-gray-600 dark:text-gray-400">{text}</span>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
73
meteor-frontend/src/components/ui/stat-card.tsx
Normal file
73
meteor-frontend/src/components/ui/stat-card.tsx
Normal file
@ -0,0 +1,73 @@
|
||||
import React from 'react';
|
||||
import { LucideIcon } from 'lucide-react';
|
||||
|
||||
interface StatCardProps {
|
||||
title: string;
|
||||
value: string | number;
|
||||
change?: number;
|
||||
isPositive?: boolean;
|
||||
suffix?: string;
|
||||
icon?: LucideIcon;
|
||||
iconBg?: string;
|
||||
description?: string;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
export const StatCard: React.FC<StatCardProps> = ({
|
||||
title,
|
||||
value,
|
||||
change,
|
||||
isPositive,
|
||||
suffix,
|
||||
icon: Icon,
|
||||
iconBg = 'bg-blue-500',
|
||||
description,
|
||||
className = ''
|
||||
}) => {
|
||||
const formatValue = () => {
|
||||
if (typeof value === 'number') {
|
||||
return value.toLocaleString();
|
||||
}
|
||||
return value;
|
||||
};
|
||||
|
||||
const getChangeColor = () => {
|
||||
if (change === undefined) return '';
|
||||
return isPositive ? 'text-green-500' : 'text-red-500';
|
||||
};
|
||||
|
||||
const getChangeIcon = () => {
|
||||
if (change === undefined || change === 0) return null;
|
||||
return isPositive ? '↗' : '↘';
|
||||
};
|
||||
|
||||
return (
|
||||
<div className={`bg-white dark:bg-gray-800 rounded-lg p-4 border border-gray-200 dark:border-gray-700 ${className}`}>
|
||||
<div className="flex items-center">
|
||||
{Icon && (
|
||||
<div className={`p-3 rounded-full ${iconBg} text-white mr-3`}>
|
||||
<Icon size={20} />
|
||||
</div>
|
||||
)}
|
||||
<div className="flex-1">
|
||||
<p className="text-sm text-gray-500 dark:text-gray-400 mb-1">{title}</p>
|
||||
<div className="flex items-end space-x-2">
|
||||
<h3 className="text-2xl font-bold text-gray-900 dark:text-white">
|
||||
{formatValue()}
|
||||
{suffix && <span className="text-sm font-normal text-gray-500 dark:text-gray-400 ml-1">{suffix}</span>}
|
||||
</h3>
|
||||
{change !== undefined && change !== 0 && (
|
||||
<div className={`flex items-center text-sm ${getChangeColor()}`}>
|
||||
<span>{getChangeIcon()}</span>
|
||||
<span className="ml-1">{Math.abs(change)}</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
{description && (
|
||||
<p className="text-xs text-gray-500 dark:text-gray-400 mt-1">{description}</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@ -14,6 +14,7 @@ interface AuthContextType {
|
||||
user: User | null
|
||||
isAuthenticated: boolean
|
||||
isLoading: boolean
|
||||
isInitializing: boolean
|
||||
login: (email: string, password: string) => Promise<void>
|
||||
register: (email: string, password: string, displayName: string) => Promise<void>
|
||||
logout: () => void
|
||||
@ -29,17 +30,51 @@ interface AuthProviderProps {
|
||||
export function AuthProvider({ children }: AuthProviderProps) {
|
||||
const [user, setUser] = React.useState<User | null>(null)
|
||||
const [isLoading, setIsLoading] = React.useState(false)
|
||||
const [isInitializing, setIsInitializing] = React.useState(true)
|
||||
|
||||
const isAuthenticated = !!user
|
||||
|
||||
const refreshTokens = async (): Promise<boolean> => {
|
||||
const refreshToken = localStorage.getItem("refreshToken")
|
||||
if (!refreshToken) {
|
||||
return false
|
||||
}
|
||||
|
||||
try {
|
||||
const response = await fetch("http://localhost:3001/api/v1/auth/refresh", {
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
body: JSON.stringify({ refreshToken }),
|
||||
})
|
||||
|
||||
if (!response.ok) {
|
||||
localStorage.removeItem("accessToken")
|
||||
localStorage.removeItem("refreshToken")
|
||||
return false
|
||||
}
|
||||
|
||||
const data = await response.json()
|
||||
localStorage.setItem("accessToken", data.accessToken)
|
||||
localStorage.setItem("refreshToken", data.refreshToken)
|
||||
return true
|
||||
} catch (error) {
|
||||
console.error("Failed to refresh tokens:", error)
|
||||
localStorage.removeItem("accessToken")
|
||||
localStorage.removeItem("refreshToken")
|
||||
return false
|
||||
}
|
||||
}
|
||||
|
||||
const fetchUserProfile = async (): Promise<User | null> => {
|
||||
const token = localStorage.getItem("accessToken")
|
||||
let token = localStorage.getItem("accessToken")
|
||||
if (!token) {
|
||||
return null
|
||||
}
|
||||
|
||||
try {
|
||||
const response = await fetch("http://localhost:3000/api/v1/auth/profile", {
|
||||
let response = await fetch("http://localhost:3001/api/v1/auth/profile", {
|
||||
method: "GET",
|
||||
headers: {
|
||||
"Authorization": `Bearer ${token}`,
|
||||
@ -47,8 +82,29 @@ export function AuthProvider({ children }: AuthProviderProps) {
|
||||
},
|
||||
})
|
||||
|
||||
// If token is expired, try to refresh
|
||||
if (response.status === 401) {
|
||||
const refreshed = await refreshTokens()
|
||||
if (!refreshed) {
|
||||
return null
|
||||
}
|
||||
|
||||
// Retry with new token
|
||||
token = localStorage.getItem("accessToken")
|
||||
if (!token) {
|
||||
return null
|
||||
}
|
||||
|
||||
response = await fetch("http://localhost:3001/api/v1/auth/profile", {
|
||||
method: "GET",
|
||||
headers: {
|
||||
"Authorization": `Bearer ${token}`,
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
if (!response.ok) {
|
||||
// Token might be invalid, remove it
|
||||
localStorage.removeItem("accessToken")
|
||||
localStorage.removeItem("refreshToken")
|
||||
return null
|
||||
@ -63,7 +119,6 @@ export function AuthProvider({ children }: AuthProviderProps) {
|
||||
hasActiveSubscription: profileData.hasActiveSubscription,
|
||||
}
|
||||
} catch (error) {
|
||||
// Network error or other issue
|
||||
console.error("Failed to fetch user profile:", error)
|
||||
return null
|
||||
}
|
||||
@ -72,7 +127,7 @@ export function AuthProvider({ children }: AuthProviderProps) {
|
||||
const login = async (email: string, password: string) => {
|
||||
setIsLoading(true)
|
||||
try {
|
||||
const response = await fetch("http://localhost:3000/api/v1/auth/login-email", {
|
||||
const response = await fetch("http://localhost:3001/api/v1/auth/login-email", {
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
@ -113,7 +168,7 @@ export function AuthProvider({ children }: AuthProviderProps) {
|
||||
const register = async (email: string, password: string, displayName: string) => {
|
||||
setIsLoading(true)
|
||||
try {
|
||||
const response = await fetch("http://localhost:3000/api/v1/auth/register-email", {
|
||||
const response = await fetch("http://localhost:3001/api/v1/auth/register-email", {
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
@ -155,6 +210,7 @@ export function AuthProvider({ children }: AuthProviderProps) {
|
||||
localStorage.removeItem("refreshToken")
|
||||
}
|
||||
}
|
||||
setIsInitializing(false)
|
||||
}
|
||||
|
||||
initializeAuth()
|
||||
@ -164,6 +220,7 @@ export function AuthProvider({ children }: AuthProviderProps) {
|
||||
user,
|
||||
isAuthenticated,
|
||||
isLoading,
|
||||
isInitializing,
|
||||
login,
|
||||
register,
|
||||
logout,
|
||||
|
||||
113
meteor-frontend/src/services/analysis.ts
Normal file
113
meteor-frontend/src/services/analysis.ts
Normal file
@ -0,0 +1,113 @@
|
||||
interface AnalysisData {
|
||||
totalDetections: number;
|
||||
averageBrightness?: number;
|
||||
mostActiveMonth?: {
|
||||
month: string;
|
||||
count: number;
|
||||
shower: string;
|
||||
};
|
||||
topStations?: Array<{
|
||||
region: string;
|
||||
count: number;
|
||||
}>;
|
||||
}
|
||||
|
||||
interface TimeDistributionData {
|
||||
yearly?: Array<{ year: string; count: number }>;
|
||||
monthly?: Array<{ month: string; count: number }>;
|
||||
hourly?: Array<{ hour: number; count: number }>;
|
||||
}
|
||||
|
||||
interface BrightnessAnalysisData {
|
||||
brightnessDistribution: Array<{
|
||||
range: string;
|
||||
count: number;
|
||||
}>;
|
||||
brightnessStats?: {
|
||||
average: number;
|
||||
median: number;
|
||||
brightest: number;
|
||||
dimmest: number;
|
||||
};
|
||||
}
|
||||
|
||||
const API_BASE_URL = process.env.NEXT_PUBLIC_API_URL || 'http://localhost:3001';
|
||||
|
||||
async function fetchWithAuth(url: string, options: RequestInit = {}) {
|
||||
// 使用与现有系统一致的accessToken
|
||||
const token = localStorage.getItem('accessToken');
|
||||
|
||||
const headers: Record<string, string> = {
|
||||
'Content-Type': 'application/json',
|
||||
...(options.headers as Record<string, string>),
|
||||
};
|
||||
|
||||
if (token) {
|
||||
headers.Authorization = `Bearer ${token}`;
|
||||
}
|
||||
|
||||
const response = await fetch(url, {
|
||||
...options,
|
||||
headers,
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
if (response.status === 401) {
|
||||
localStorage.removeItem('accessToken');
|
||||
localStorage.removeItem('refreshToken');
|
||||
window.location.href = '/login';
|
||||
throw new Error('Authentication required');
|
||||
}
|
||||
throw new Error(`HTTP error! status: ${response.status}`);
|
||||
}
|
||||
|
||||
return response.json();
|
||||
}
|
||||
|
||||
export async function getStatisticsSummary(): Promise<AnalysisData> {
|
||||
const response = await fetchWithAuth(`${API_BASE_URL}/api/v1/analysis/statistics-summary`);
|
||||
return response.data;
|
||||
}
|
||||
|
||||
export async function getTimeDistribution(timeFrame: 'hour' | 'day' | 'month' = 'month'): Promise<TimeDistributionData> {
|
||||
const response = await fetchWithAuth(`${API_BASE_URL}/api/v1/analysis/time-distribution?timeFrame=${timeFrame}`);
|
||||
return response.data;
|
||||
}
|
||||
|
||||
export async function getBrightnessAnalysis(): Promise<BrightnessAnalysisData> {
|
||||
const response = await fetchWithAuth(`${API_BASE_URL}/api/v1/analysis/brightness-analysis`);
|
||||
return response.data;
|
||||
}
|
||||
|
||||
export async function getRegionalDistribution(): Promise<Array<{ region: string; count: number }>> {
|
||||
const response = await fetchWithAuth(`${API_BASE_URL}/api/v1/analysis/regional-distribution`);
|
||||
return response.data;
|
||||
}
|
||||
|
||||
export async function getCameraCorrelation() {
|
||||
const response = await fetchWithAuth(`${API_BASE_URL}/api/v1/analysis/camera-correlation`);
|
||||
return response.data;
|
||||
}
|
||||
|
||||
export async function getMeteorEvents(params: {
|
||||
page?: number;
|
||||
limit?: number;
|
||||
sortBy?: string;
|
||||
sortOrder?: 'asc' | 'desc';
|
||||
} = {}) {
|
||||
const queryParams = new URLSearchParams({
|
||||
page: String(params.page || 1),
|
||||
limit: String(params.limit || 10),
|
||||
sortBy: params.sortBy || 'createdAt',
|
||||
sortOrder: params.sortOrder || 'desc',
|
||||
});
|
||||
|
||||
const response = await fetchWithAuth(`${API_BASE_URL}/api/v1/analysis/meteor-events?${queryParams}`);
|
||||
return response;
|
||||
}
|
||||
|
||||
export {
|
||||
type AnalysisData,
|
||||
type TimeDistributionData,
|
||||
type BrightnessAnalysisData
|
||||
};
|
||||
117
meteor-frontend/src/services/camera.ts
Normal file
117
meteor-frontend/src/services/camera.ts
Normal file
@ -0,0 +1,117 @@
|
||||
const API_BASE_URL = process.env.NEXT_PUBLIC_API_URL || 'http://localhost:3001';
|
||||
|
||||
export interface CameraDevice {
|
||||
id: number;
|
||||
deviceId: string;
|
||||
name: string;
|
||||
location: string;
|
||||
status: 'active' | 'maintenance' | 'offline';
|
||||
lastSeenAt?: string;
|
||||
temperature?: number;
|
||||
coolerPower?: number;
|
||||
gain?: number;
|
||||
exposureCount: number;
|
||||
uptime?: number;
|
||||
firmwareVersion?: string;
|
||||
serialNumber?: string;
|
||||
createdAt: string;
|
||||
updatedAt: string;
|
||||
}
|
||||
|
||||
export interface CameraHistoryData {
|
||||
time: string;
|
||||
temperature: number;
|
||||
coolerPower: number;
|
||||
gain: number;
|
||||
}
|
||||
|
||||
export interface CameraStats {
|
||||
totalDevices: number;
|
||||
activeDevices: number;
|
||||
maintenanceDevices: number;
|
||||
offlineDevices: number;
|
||||
averageTemperature: number;
|
||||
averageUptime: number;
|
||||
}
|
||||
|
||||
export interface CameraResponse {
|
||||
devices: CameraDevice[];
|
||||
pagination: {
|
||||
page: number;
|
||||
limit: number;
|
||||
total: number;
|
||||
totalPages: number;
|
||||
};
|
||||
}
|
||||
|
||||
class CameraService {
|
||||
private async fetch(url: string, options: RequestInit = {}) {
|
||||
const token = localStorage.getItem('token');
|
||||
const headers: Record<string, string> = {
|
||||
'Content-Type': 'application/json',
|
||||
};
|
||||
|
||||
if (token) {
|
||||
headers['Authorization'] = `Bearer ${token}`;
|
||||
}
|
||||
|
||||
const response = await fetch(`${API_BASE_URL}${url}`, {
|
||||
...options,
|
||||
headers: {
|
||||
...headers,
|
||||
...options.headers,
|
||||
},
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
const errorData = await response.text();
|
||||
throw new Error(`HTTP ${response.status}: ${errorData}`);
|
||||
}
|
||||
|
||||
return await response.json();
|
||||
}
|
||||
|
||||
async getCameras(page = 1, limit = 10, status?: string, location?: string): Promise<CameraResponse> {
|
||||
const params = new URLSearchParams({
|
||||
page: page.toString(),
|
||||
limit: limit.toString(),
|
||||
});
|
||||
|
||||
if (status) params.append('status', status);
|
||||
if (location) params.append('location', location);
|
||||
|
||||
return this.fetch(`/api/v1/cameras?${params}`);
|
||||
}
|
||||
|
||||
async getCameraById(id: number): Promise<CameraDevice> {
|
||||
return this.fetch(`/api/v1/cameras/${id}`);
|
||||
}
|
||||
|
||||
async getCameraByDeviceId(deviceId: string): Promise<CameraDevice> {
|
||||
return this.fetch(`/api/v1/cameras/device/${deviceId}`);
|
||||
}
|
||||
|
||||
async getCameraHistory(deviceId: string): Promise<CameraHistoryData[]> {
|
||||
return this.fetch(`/api/v1/cameras/device/${deviceId}/history`);
|
||||
}
|
||||
|
||||
async getCameraStats(): Promise<CameraStats> {
|
||||
return this.fetch('/api/v1/cameras/stats');
|
||||
}
|
||||
|
||||
async updateCameraStatus(id: number, status: 'active' | 'maintenance' | 'offline'): Promise<CameraDevice> {
|
||||
return this.fetch(`/api/v1/cameras/${id}/status`, {
|
||||
method: 'PATCH',
|
||||
body: JSON.stringify({ status }),
|
||||
});
|
||||
}
|
||||
|
||||
async updateCamera(id: number, updateData: Partial<CameraDevice>): Promise<CameraDevice> {
|
||||
return this.fetch(`/api/v1/cameras/${id}`, {
|
||||
method: 'PATCH',
|
||||
body: JSON.stringify(updateData),
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
export const cameraService = new CameraService();
|
||||
@ -7,7 +7,7 @@ export const devicesApi = {
|
||||
throw new Error("No access token found")
|
||||
}
|
||||
|
||||
const response = await fetch("http://localhost:3000/api/v1/devices", {
|
||||
const response = await fetch("http://localhost:3001/api/v1/devices", {
|
||||
method: "GET",
|
||||
headers: {
|
||||
"Authorization": `Bearer ${token}`,
|
||||
|
||||
@ -31,7 +31,7 @@ export const eventsApi = {
|
||||
throw new Error("No access token found")
|
||||
}
|
||||
|
||||
const url = new URL("http://localhost:3000/api/v1/events")
|
||||
const url = new URL("http://localhost:3001/api/v1/events")
|
||||
|
||||
if (params.limit) {
|
||||
url.searchParams.append("limit", params.limit.toString())
|
||||
@ -69,7 +69,7 @@ export const eventsApi = {
|
||||
throw new Error("No access token found")
|
||||
}
|
||||
|
||||
const response = await fetch(`http://localhost:3000/api/v1/events/${eventId}`, {
|
||||
const response = await fetch(`http://localhost:3001/api/v1/events/${eventId}`, {
|
||||
method: "GET",
|
||||
headers: {
|
||||
"Authorization": `Bearer ${token}`,
|
||||
|
||||
@ -30,6 +30,60 @@ export interface CheckoutSessionResponse {
|
||||
}
|
||||
}
|
||||
|
||||
// New interfaces for the enhanced subscription API
|
||||
export interface SubscriptionPlan {
|
||||
id: number;
|
||||
planId: string;
|
||||
name: string;
|
||||
description?: string;
|
||||
price: number;
|
||||
currency: string;
|
||||
interval: 'month' | 'year' | 'week';
|
||||
intervalCount: number;
|
||||
stripePriceId?: string;
|
||||
features?: string[];
|
||||
isPopular: boolean;
|
||||
isActive: boolean;
|
||||
createdAt: string;
|
||||
updatedAt: string;
|
||||
}
|
||||
|
||||
export interface UserSubscription {
|
||||
id: number;
|
||||
userProfileId: string;
|
||||
subscriptionPlanId: number;
|
||||
subscriptionPlan: SubscriptionPlan;
|
||||
stripeSubscriptionId?: string;
|
||||
status: 'active' | 'canceled' | 'past_due' | 'trialing' | 'incomplete';
|
||||
currentPeriodStart: string;
|
||||
currentPeriodEnd: string;
|
||||
cancelAtPeriodEnd: boolean;
|
||||
canceledAt?: string;
|
||||
trialStart?: string;
|
||||
trialEnd?: string;
|
||||
createdAt: string;
|
||||
updatedAt: string;
|
||||
}
|
||||
|
||||
export interface SubscriptionStats {
|
||||
totalPlans: number;
|
||||
totalSubscriptions: number;
|
||||
activeSubscriptions: number;
|
||||
trialSubscriptions: number;
|
||||
canceledSubscriptions: number;
|
||||
totalRevenue: number;
|
||||
monthlyRecurringRevenue: number;
|
||||
}
|
||||
|
||||
export interface PlanStats {
|
||||
planId: string;
|
||||
planName: string;
|
||||
totalSubscriptions: number;
|
||||
activeSubscriptions: number;
|
||||
revenue: number;
|
||||
popularityRank: number;
|
||||
}
|
||||
|
||||
export const subscriptionApi = {
|
||||
async getSubscription(): Promise<SubscriptionResponse> {
|
||||
const token = localStorage.getItem("accessToken")
|
||||
@ -37,7 +91,7 @@ export const subscriptionApi = {
|
||||
throw new Error("No access token found")
|
||||
}
|
||||
|
||||
const response = await fetch("http://localhost:3000/api/v1/payments/subscription", {
|
||||
const response = await fetch("http://localhost:3001/api/v1/payments/subscription", {
|
||||
method: "GET",
|
||||
headers: {
|
||||
"Authorization": `Bearer ${token}`,
|
||||
@ -61,7 +115,7 @@ export const subscriptionApi = {
|
||||
throw new Error("No access token found")
|
||||
}
|
||||
|
||||
const response = await fetch("http://localhost:3000/api/v1/payments/customer-portal", {
|
||||
const response = await fetch("http://localhost:3001/api/v1/payments/customer-portal", {
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Authorization": `Bearer ${token}`,
|
||||
@ -86,7 +140,7 @@ export const subscriptionApi = {
|
||||
throw new Error("No access token found")
|
||||
}
|
||||
|
||||
const response = await fetch("http://localhost:3000/api/v1/payments/checkout-session/stripe", {
|
||||
const response = await fetch("http://localhost:3001/api/v1/payments/checkout-session/stripe", {
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Authorization": `Bearer ${token}`,
|
||||
@ -108,4 +162,113 @@ export const subscriptionApi = {
|
||||
|
||||
return response.json()
|
||||
},
|
||||
|
||||
// New enhanced subscription API methods
|
||||
async getAllPlans(): Promise<SubscriptionPlan[]> {
|
||||
const token = localStorage.getItem("accessToken")
|
||||
if (!token) {
|
||||
throw new Error("No access token found")
|
||||
}
|
||||
|
||||
const response = await fetch("http://localhost:3001/api/v1/subscriptions/plans", {
|
||||
method: "GET",
|
||||
headers: {
|
||||
"Authorization": `Bearer ${token}`,
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
})
|
||||
|
||||
if (!response.ok) {
|
||||
if (response.status === 401) {
|
||||
throw new Error("Unauthorized - please login again")
|
||||
}
|
||||
throw new Error(`Failed to fetch plans: ${response.statusText}`)
|
||||
}
|
||||
|
||||
return response.json()
|
||||
},
|
||||
|
||||
async getUserSubscriptionByUserId(userId: string): Promise<UserSubscription | null> {
|
||||
const token = localStorage.getItem("accessToken")
|
||||
if (!token) {
|
||||
throw new Error("No access token found")
|
||||
}
|
||||
|
||||
try {
|
||||
const response = await fetch(`http://localhost:3001/api/v1/subscriptions/users/${userId}`, {
|
||||
method: "GET",
|
||||
headers: {
|
||||
"Authorization": `Bearer ${token}`,
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
})
|
||||
|
||||
if (!response.ok) {
|
||||
if (response.status === 401) {
|
||||
throw new Error("Unauthorized - please login again")
|
||||
}
|
||||
if (response.status === 404) {
|
||||
return null // User has no subscription
|
||||
}
|
||||
throw new Error(`Failed to fetch user subscription: ${response.statusText}`)
|
||||
}
|
||||
|
||||
return response.json()
|
||||
} catch (error) {
|
||||
console.error('Error fetching user subscription:', error)
|
||||
return null
|
||||
}
|
||||
},
|
||||
|
||||
async getSubscriptionStats(): Promise<SubscriptionStats> {
|
||||
const token = localStorage.getItem("accessToken")
|
||||
if (!token) {
|
||||
throw new Error("No access token found")
|
||||
}
|
||||
|
||||
const response = await fetch("http://localhost:3001/api/v1/subscriptions/stats", {
|
||||
method: "GET",
|
||||
headers: {
|
||||
"Authorization": `Bearer ${token}`,
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
})
|
||||
|
||||
if (!response.ok) {
|
||||
if (response.status === 401) {
|
||||
throw new Error("Unauthorized - please login again")
|
||||
}
|
||||
throw new Error(`Failed to fetch subscription stats: ${response.statusText}`)
|
||||
}
|
||||
|
||||
return response.json()
|
||||
},
|
||||
|
||||
async createUserSubscription(userId: string, planId: string, subscriptionData?: any): Promise<UserSubscription> {
|
||||
const token = localStorage.getItem("accessToken")
|
||||
if (!token) {
|
||||
throw new Error("No access token found")
|
||||
}
|
||||
|
||||
const response = await fetch(`http://localhost:3001/api/v1/subscriptions/users/${userId}`, {
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Authorization": `Bearer ${token}`,
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
body: JSON.stringify({
|
||||
planId,
|
||||
...subscriptionData,
|
||||
}),
|
||||
})
|
||||
|
||||
if (!response.ok) {
|
||||
if (response.status === 401) {
|
||||
throw new Error("Unauthorized - please login again")
|
||||
}
|
||||
throw new Error(`Failed to create subscription: ${response.statusText}`)
|
||||
}
|
||||
|
||||
return response.json()
|
||||
},
|
||||
}
|
||||
182
meteor-frontend/src/services/weather.ts
Normal file
182
meteor-frontend/src/services/weather.ts
Normal file
@ -0,0 +1,182 @@
|
||||
interface WeatherStation {
|
||||
id: number;
|
||||
stationName: string;
|
||||
location: string;
|
||||
latitude?: number;
|
||||
longitude?: number;
|
||||
altitude?: number;
|
||||
status: 'active' | 'maintenance' | 'offline';
|
||||
currentTemperature?: number;
|
||||
humidity?: number;
|
||||
cloudCover?: number;
|
||||
visibility?: number;
|
||||
windSpeed?: number;
|
||||
windDirection?: number;
|
||||
condition?: string;
|
||||
observationQuality?: 'excellent' | 'moderate' | 'poor';
|
||||
createdAt: string;
|
||||
updatedAt: string;
|
||||
}
|
||||
|
||||
interface WeatherData extends WeatherStation {
|
||||
forecasts?: WeatherForecast[];
|
||||
}
|
||||
|
||||
interface WeatherObservation {
|
||||
id: number;
|
||||
weatherStationId: number;
|
||||
observationTime: string;
|
||||
temperature: number;
|
||||
humidity: number;
|
||||
cloudCover: number;
|
||||
visibility: number;
|
||||
windSpeed: number;
|
||||
windDirection: number;
|
||||
condition: string;
|
||||
observationQuality: 'excellent' | 'moderate' | 'poor';
|
||||
pressure: number;
|
||||
precipitation: number;
|
||||
createdAt: string;
|
||||
}
|
||||
|
||||
interface WeatherForecast {
|
||||
id: number;
|
||||
forecastTime: string;
|
||||
temperature?: number;
|
||||
cloudCover?: number;
|
||||
precipitation?: number;
|
||||
visibility?: number;
|
||||
condition?: string;
|
||||
}
|
||||
|
||||
interface WeatherSummary {
|
||||
avgTemperature: number;
|
||||
avgCloudCover: number;
|
||||
avgVisibility: number;
|
||||
observationConditions: {
|
||||
excellent: number;
|
||||
moderate: number;
|
||||
poor: number;
|
||||
};
|
||||
bestObservationStation: string;
|
||||
}
|
||||
|
||||
interface WeatherStats {
|
||||
totalStations: number;
|
||||
activeStations: number;
|
||||
totalObservations: number;
|
||||
totalForecasts: number;
|
||||
averageTemperature: number;
|
||||
averageHumidity: number;
|
||||
}
|
||||
|
||||
const API_BASE_URL = process.env.NEXT_PUBLIC_API_URL || 'http://localhost:3001';
|
||||
|
||||
async function fetchWithAuth(url: string, options: RequestInit = {}) {
|
||||
// 获取存储的token，使用与现有系统一致的accessToken
|
||||
const token = localStorage.getItem('accessToken');
|
||||
|
||||
const headers: Record<string, string> = {
|
||||
'Content-Type': 'application/json',
|
||||
...(options.headers as Record<string, string>),
|
||||
};
|
||||
|
||||
if (token) {
|
||||
headers.Authorization = `Bearer ${token}`;
|
||||
}
|
||||
|
||||
const response = await fetch(url, {
|
||||
...options,
|
||||
headers,
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
if (response.status === 401) {
|
||||
// Token expired, redirect to login
|
||||
localStorage.removeItem('accessToken');
|
||||
localStorage.removeItem('refreshToken');
|
||||
window.location.href = '/login';
|
||||
throw new Error('Authentication required');
|
||||
}
|
||||
throw new Error(`HTTP error! status: ${response.status}`);
|
||||
}
|
||||
|
||||
return response.json();
|
||||
}
|
||||
|
||||
export async function getAllWeatherData(): Promise<WeatherData[]> {
|
||||
const response = await fetchWithAuth(`${API_BASE_URL}/api/v1/weather`);
|
||||
return response.weather || [];
|
||||
}
|
||||
|
||||
export async function getWeatherSummary(): Promise<WeatherSummary> {
|
||||
const response = await fetchWithAuth(`${API_BASE_URL}/api/v1/weather/summary`);
|
||||
return response.summary;
|
||||
}
|
||||
|
||||
export async function getWeatherByStation(stationName: string): Promise<WeatherData> {
|
||||
const response = await fetchWithAuth(`${API_BASE_URL}/api/v1/weather/${encodeURIComponent(stationName)}`);
|
||||
return response.weather;
|
||||
}
|
||||
|
||||
// New enhanced API endpoints
|
||||
export async function getWeatherStations(page = 1, limit = 10, location?: string): Promise<{
|
||||
stations: WeatherStation[];
|
||||
pagination: {
|
||||
page: number;
|
||||
limit: number;
|
||||
total: number;
|
||||
totalPages: number;
|
||||
};
|
||||
}> {
|
||||
const params = new URLSearchParams({
|
||||
page: page.toString(),
|
||||
limit: limit.toString(),
|
||||
});
|
||||
|
||||
if (location) params.append('location', location);
|
||||
|
||||
return await fetchWithAuth(`${API_BASE_URL}/api/v1/weather/stations/list?${params}`);
|
||||
}
|
||||
|
||||
export async function getWeatherStats(): Promise<WeatherStats> {
|
||||
return await fetchWithAuth(`${API_BASE_URL}/api/v1/weather/stations/stats`);
|
||||
}
|
||||
|
||||
export async function getWeatherObservations(page = 1, limit = 10, location?: string, startDate?: string, endDate?: string): Promise<{
|
||||
observations: WeatherObservation[];
|
||||
pagination: {
|
||||
page: number;
|
||||
limit: number;
|
||||
total: number;
|
||||
totalPages: number;
|
||||
};
|
||||
}> {
|
||||
const params = new URLSearchParams({
|
||||
page: page.toString(),
|
||||
limit: limit.toString(),
|
||||
});
|
||||
|
||||
if (location) params.append('location', location);
|
||||
if (startDate) params.append('startDate', startDate);
|
||||
if (endDate) params.append('endDate', endDate);
|
||||
|
||||
return await fetchWithAuth(`${API_BASE_URL}/api/v1/weather/observations/list?${params}`);
|
||||
}
|
||||
|
||||
export async function getLatestObservations(limit = 5): Promise<WeatherObservation[]> {
|
||||
return await fetchWithAuth(`${API_BASE_URL}/api/v1/weather/observations/latest?limit=${limit}`);
|
||||
}
|
||||
|
||||
export async function getCurrentWeatherSummary(): Promise<Array<{
|
||||
temperature: number;
|
||||
humidity: number;
|
||||
condition: string;
|
||||
windSpeed: number;
|
||||
visibility: number;
|
||||
precipitation: number;
|
||||
}>> {
|
||||
return await fetchWithAuth(`${API_BASE_URL}/api/v1/weather/current/summary`);
|
||||
}
|
||||
|
||||
export { type WeatherData, type WeatherSummary };
|
||||
@ -0,0 +1,72 @@
|
||||
/**
|
||||
* @type {import('node-pg-migrate').ColumnDefinitions | undefined}
|
||||
*/
|
||||
export const shorthands = undefined;
|
||||
|
||||
/**
|
||||
* @param pgm {import('node-pg-migrate').MigrationBuilder}
|
||||
* @param run {() => void | undefined}
|
||||
* @returns {Promise<void> | void}
|
||||
*/
|
||||
export const up = (pgm) => {
|
||||
// 创建天气站点表
|
||||
pgm.createTable('weather_stations', {
|
||||
id: 'id',
|
||||
station_name: { type: 'varchar(100)', notNull: true },
|
||||
current_temperature: { type: 'decimal(4,1)', notNull: false },
|
||||
humidity: { type: 'integer', notNull: false },
|
||||
cloud_cover: { type: 'integer', notNull: false },
|
||||
visibility: { type: 'decimal(5,1)', notNull: false },
|
||||
wind_speed: { type: 'decimal(5,1)', notNull: false },
|
||||
wind_direction: { type: 'integer', notNull: false },
|
||||
condition: { type: 'varchar(50)', notNull: false },
|
||||
observation_quality: { type: 'varchar(20)', notNull: false },
|
||||
created_at: {
|
||||
type: 'timestamp',
|
||||
notNull: true,
|
||||
default: pgm.func('current_timestamp'),
|
||||
},
|
||||
updated_at: {
|
||||
type: 'timestamp',
|
||||
notNull: true,
|
||||
default: pgm.func('current_timestamp'),
|
||||
},
|
||||
});
|
||||
|
||||
// 创建天气预报表
|
||||
pgm.createTable('weather_forecasts', {
|
||||
id: 'id',
|
||||
station_id: {
|
||||
type: 'integer',
|
||||
notNull: true,
|
||||
references: '"weather_stations"',
|
||||
onDelete: 'cascade',
|
||||
},
|
||||
forecast_time: { type: 'timestamp', notNull: true },
|
||||
temperature: { type: 'decimal(4,1)', notNull: false },
|
||||
cloud_cover: { type: 'integer', notNull: false },
|
||||
precipitation: { type: 'decimal(5,1)', notNull: false, default: 0 },
|
||||
visibility: { type: 'decimal(5,1)', notNull: false },
|
||||
condition: { type: 'varchar(50)', notNull: false },
|
||||
created_at: {
|
||||
type: 'timestamp',
|
||||
notNull: true,
|
||||
default: pgm.func('current_timestamp'),
|
||||
},
|
||||
});
|
||||
|
||||
// 添加索引
|
||||
pgm.createIndex('weather_stations', 'station_name');
|
||||
pgm.createIndex('weather_forecasts', 'station_id');
|
||||
pgm.createIndex('weather_forecasts', 'forecast_time');
|
||||
};
|
||||
|
||||
/**
|
||||
* @param pgm {import('node-pg-migrate').MigrationBuilder}
|
||||
* @param run {() => void | undefined}
|
||||
* @returns {Promise<void> | void}
|
||||
*/
|
||||
export const down = (pgm) => {
|
||||
pgm.dropTable('weather_forecasts');
|
||||
pgm.dropTable('weather_stations');
|
||||
};
|
||||
@ -0,0 +1,69 @@
|
||||
/**
|
||||
* @type {import('node-pg-migrate').ColumnDefinitions | undefined}
|
||||
*/
|
||||
export const shorthands = undefined;
|
||||
|
||||
/**
|
||||
* @param pgm {import('node-pg-migrate').MigrationBuilder}
|
||||
* @param run {() => void | undefined}
|
||||
* @returns {Promise<void> | void}
|
||||
*/
|
||||
export const up = (pgm) => {
|
||||
// 扩展 validated_events 表，添加分析相关字段
|
||||
pgm.addColumns('validated_events', {
|
||||
weather_condition: { type: 'varchar(50)', notNull: false },
|
||||
station_name: { type: 'varchar(100)', notNull: false },
|
||||
classification: { type: 'varchar(50)', notNull: false },
|
||||
duration: { type: 'decimal(5,2)', notNull: false },
|
||||
direction: { type: 'varchar(20)', notNull: false },
|
||||
azimuth: { type: 'integer', notNull: false },
|
||||
altitude: { type: 'integer', notNull: false },
|
||||
velocity: { type: 'decimal(8,2)', notNull: false }, // km/s
|
||||
shower_name: { type: 'varchar(100)', notNull: false },
|
||||
});
|
||||
|
||||
// 创建分析结果表
|
||||
pgm.createTable('analysis_results', {
|
||||
id: 'id',
|
||||
analysis_type: { type: 'varchar(50)', notNull: true }, // time_distribution, brightness_analysis, etc
|
||||
time_frame: { type: 'varchar(20)', notNull: false }, // hour, day, month, year
|
||||
result_data: { type: 'jsonb', notNull: true }, // 存储分析结果的JSON数据
|
||||
created_at: {
|
||||
type: 'timestamp',
|
||||
notNull: true,
|
||||
default: pgm.func('current_timestamp'),
|
||||
},
|
||||
updated_at: {
|
||||
type: 'timestamp',
|
||||
notNull: true,
|
||||
default: pgm.func('current_timestamp'),
|
||||
},
|
||||
});
|
||||
|
||||
// 添加索引
|
||||
pgm.createIndex('validated_events', 'station_name');
|
||||
pgm.createIndex('validated_events', 'classification');
|
||||
pgm.createIndex('validated_events', 'shower_name');
|
||||
pgm.createIndex('analysis_results', 'analysis_type');
|
||||
pgm.createIndex('analysis_results', 'time_frame');
|
||||
};
|
||||
|
||||
/**
|
||||
* @param pgm {import('node-pg-migrate').MigrationBuilder}
|
||||
* @param run {() => void | undefined}
|
||||
* @returns {Promise<void> | void}
|
||||
*/
|
||||
export const down = (pgm) => {
|
||||
pgm.dropTable('analysis_results');
|
||||
pgm.dropColumns('validated_events', [
|
||||
'weather_condition',
|
||||
'station_name',
|
||||
'classification',
|
||||
'duration',
|
||||
'direction',
|
||||
'azimuth',
|
||||
'altitude',
|
||||
'velocity',
|
||||
'shower_name'
|
||||
]);
|
||||
};
|
||||
@ -0,0 +1,29 @@
|
||||
/**
|
||||
* @type {import('node-pg-migrate').ColumnDefinitions | undefined}
|
||||
*/
|
||||
export const shorthands = undefined;
|
||||
|
||||
/**
|
||||
* @param pgm {import('node-pg-migrate').MigrationBuilder}
|
||||
* @param run {() => void | undefined}
|
||||
* @returns {Promise<void> | void}
|
||||
*/
|
||||
export const up = (pgm) => {
|
||||
// 添加缺失的 peak_magnitude 列到 validated_events 表
|
||||
pgm.addColumns('validated_events', {
|
||||
peak_magnitude: {
|
||||
type: 'decimal(4,2)',
|
||||
notNull: false,
|
||||
comment: 'Peak magnitude of the meteor event'
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* @param pgm {import('node-pg-migrate').MigrationBuilder}
|
||||
* @param run {() => void | undefined}
|
||||
* @returns {Promise<void> | void}
|
||||
*/
|
||||
export const down = (pgm) => {
|
||||
pgm.dropColumns('validated_events', ['peak_magnitude']);
|
||||
};
|
||||
@ -0,0 +1,106 @@
|
||||
/**
|
||||
* 相机设备管理相关表
|
||||
*/
|
||||
|
||||
export const up = (pgm) => {
|
||||
// 1. 相机设备表 (扩展现有设备表的概念，专门用于相机设备)
|
||||
pgm.createTable('camera_devices', {
|
||||
id: { type: 'serial', primaryKey: true },
|
||||
device_id: {
|
||||
type: 'varchar(255)',
|
||||
unique: true,
|
||||
notNull: true,
|
||||
comment: '设备唯一标识符，如CAM-001'
|
||||
},
|
||||
name: {
|
||||
type: 'varchar(255)',
|
||||
notNull: true,
|
||||
comment: '相机设备名称'
|
||||
},
|
||||
location: {
|
||||
type: 'varchar(255)',
|
||||
notNull: true,
|
||||
comment: '相机所在地点'
|
||||
},
|
||||
status: {
|
||||
type: 'varchar(50)',
|
||||
notNull: true,
|
||||
default: 'offline',
|
||||
comment: 'active, maintenance, offline'
|
||||
},
|
||||
last_seen_at: {
|
||||
type: 'timestamptz',
|
||||
comment: '最后活跃时间'
|
||||
},
|
||||
temperature: {
|
||||
type: 'decimal(5,2)',
|
||||
comment: '当前温度'
|
||||
},
|
||||
cooler_power: {
|
||||
type: 'decimal(5,2)',
|
||||
comment: '制冷功率百分比'
|
||||
},
|
||||
gain: {
|
||||
type: 'integer',
|
||||
comment: 'CCD增益值'
|
||||
},
|
||||
exposure_count: {
|
||||
type: 'integer',
|
||||
default: 0,
|
||||
comment: '总曝光次数'
|
||||
},
|
||||
uptime: {
|
||||
type: 'decimal(10,2)',
|
||||
comment: '运行时间(小时)'
|
||||
},
|
||||
firmware_version: {
|
||||
type: 'varchar(50)',
|
||||
comment: '固件版本'
|
||||
},
|
||||
serial_number: {
|
||||
type: 'varchar(100)',
|
||||
unique: true,
|
||||
comment: '设备序列号'
|
||||
},
|
||||
created_at: { type: 'timestamptz', notNull: true, default: pgm.func('current_timestamp') },
|
||||
updated_at: { type: 'timestamptz', notNull: true, default: pgm.func('current_timestamp') }
|
||||
});
|
||||
|
||||
// 2. 相机历史记录表 (存储相机状态的历史数据)
|
||||
pgm.createTable('camera_history_records', {
|
||||
id: { type: 'serial', primaryKey: true },
|
||||
camera_device_id: {
|
||||
type: 'integer',
|
||||
notNull: true,
|
||||
references: 'camera_devices(id)',
|
||||
onDelete: 'CASCADE'
|
||||
},
|
||||
recorded_at: {
|
||||
type: 'timestamptz',
|
||||
notNull: true,
|
||||
default: pgm.func('current_timestamp')
|
||||
},
|
||||
status: {
|
||||
type: 'varchar(50)',
|
||||
notNull: true,
|
||||
comment: 'active, maintenance, offline'
|
||||
},
|
||||
temperature: { type: 'decimal(5,2)' },
|
||||
cooler_power: { type: 'decimal(5,2)' },
|
||||
gain: { type: 'integer' },
|
||||
exposure_count: { type: 'integer' },
|
||||
uptime: { type: 'decimal(10,2)' },
|
||||
created_at: { type: 'timestamptz', notNull: true, default: pgm.func('current_timestamp') }
|
||||
});
|
||||
|
||||
// 添加索引
|
||||
pgm.createIndex('camera_devices', 'device_id');
|
||||
pgm.createIndex('camera_devices', 'status');
|
||||
pgm.createIndex('camera_history_records', 'camera_device_id');
|
||||
pgm.createIndex('camera_history_records', 'recorded_at');
|
||||
};
|
||||
|
||||
export const down = (pgm) => {
|
||||
pgm.dropTable('camera_history_records');
|
||||
pgm.dropTable('camera_devices');
|
||||
};
|
||||
@ -0,0 +1,142 @@
|
||||
/**
|
||||
* 天气数据管理相关表
|
||||
*/
|
||||
|
||||
export const up = (pgm) => {
|
||||
// 1. 气象站表
|
||||
pgm.createTable('weather_stations', {
|
||||
id: { type: 'serial', primaryKey: true },
|
||||
station_name: {
|
||||
type: 'varchar(255)',
|
||||
unique: true,
|
||||
notNull: true,
|
||||
comment: '气象站名称'
|
||||
},
|
||||
location: {
|
||||
type: 'varchar(255)',
|
||||
notNull: true,
|
||||
comment: '气象站位置'
|
||||
},
|
||||
latitude: {
|
||||
type: 'decimal(10,8)',
|
||||
comment: '纬度'
|
||||
},
|
||||
longitude: {
|
||||
type: 'decimal(11,8)',
|
||||
comment: '经度'
|
||||
},
|
||||
altitude: {
|
||||
type: 'decimal(8,2)',
|
||||
comment: '海拔高度(米)'
|
||||
},
|
||||
status: {
|
||||
type: 'varchar(50)',
|
||||
notNull: true,
|
||||
default: 'active',
|
||||
comment: 'active, maintenance, offline'
|
||||
},
|
||||
created_at: { type: 'timestamptz', notNull: true, default: pgm.func('current_timestamp') },
|
||||
updated_at: { type: 'timestamptz', notNull: true, default: pgm.func('current_timestamp') }
|
||||
});
|
||||
|
||||
// 2. 天气观测数据表
|
||||
pgm.createTable('weather_observations', {
|
||||
id: { type: 'serial', primaryKey: true },
|
||||
weather_station_id: {
|
||||
type: 'integer',
|
||||
notNull: true,
|
||||
references: 'weather_stations(id)',
|
||||
onDelete: 'CASCADE'
|
||||
},
|
||||
observation_time: {
|
||||
type: 'timestamptz',
|
||||
notNull: true,
|
||||
comment: '观测时间'
|
||||
},
|
||||
temperature: {
|
||||
type: 'decimal(5,2)',
|
||||
comment: '温度(摄氏度)'
|
||||
},
|
||||
humidity: {
|
||||
type: 'decimal(5,2)',
|
||||
comment: '湿度(%)'
|
||||
},
|
||||
cloud_cover: {
|
||||
type: 'decimal(5,2)',
|
||||
comment: '云量(%)'
|
||||
},
|
||||
visibility: {
|
||||
type: 'decimal(6,2)',
|
||||
comment: '能见度(公里)'
|
||||
},
|
||||
wind_speed: {
|
||||
type: 'decimal(5,2)',
|
||||
comment: '风速(km/h)'
|
||||
},
|
||||
wind_direction: {
|
||||
type: 'integer',
|
||||
comment: '风向(度，0-360)'
|
||||
},
|
||||
condition: {
|
||||
type: 'varchar(100)',
|
||||
comment: '天气状况描述'
|
||||
},
|
||||
observation_quality: {
|
||||
type: 'varchar(50)',
|
||||
comment: 'excellent, moderate, poor'
|
||||
},
|
||||
pressure: {
|
||||
type: 'decimal(7,2)',
|
||||
comment: '气压(hPa)'
|
||||
},
|
||||
precipitation: {
|
||||
type: 'decimal(6,2)',
|
||||
comment: '降水量(mm)'
|
||||
},
|
||||
created_at: { type: 'timestamptz', notNull: true, default: pgm.func('current_timestamp') }
|
||||
});
|
||||
|
||||
// 3. 天气预报数据表
|
||||
pgm.createTable('weather_forecasts', {
|
||||
id: { type: 'serial', primaryKey: true },
|
||||
weather_station_id: {
|
||||
type: 'integer',
|
||||
notNull: true,
|
||||
references: 'weather_stations(id)',
|
||||
onDelete: 'CASCADE'
|
||||
},
|
||||
forecast_time: {
|
||||
type: 'timestamptz',
|
||||
notNull: true,
|
||||
comment: '预报时间'
|
||||
},
|
||||
issued_at: {
|
||||
type: 'timestamptz',
|
||||
notNull: true,
|
||||
comment: '预报发布时间'
|
||||
},
|
||||
temperature: { type: 'decimal(5,2)' },
|
||||
cloud_cover: { type: 'decimal(5,2)' },
|
||||
precipitation: { type: 'decimal(6,2)' },
|
||||
visibility: { type: 'decimal(6,2)' },
|
||||
condition: { type: 'varchar(100)' },
|
||||
confidence: {
|
||||
type: 'decimal(3,2)',
|
||||
comment: '预报置信度(0-1)'
|
||||
},
|
||||
created_at: { type: 'timestamptz', notNull: true, default: pgm.func('current_timestamp') }
|
||||
});
|
||||
|
||||
// 添加索引
|
||||
pgm.createIndex('weather_stations', 'station_name');
|
||||
pgm.createIndex('weather_observations', 'weather_station_id');
|
||||
pgm.createIndex('weather_observations', 'observation_time');
|
||||
pgm.createIndex('weather_forecasts', 'weather_station_id');
|
||||
pgm.createIndex('weather_forecasts', 'forecast_time');
|
||||
};
|
||||
|
||||
export const down = (pgm) => {
|
||||
pgm.dropTable('weather_forecasts');
|
||||
pgm.dropTable('weather_observations');
|
||||
pgm.dropTable('weather_stations');
|
||||
};
|
||||
@ -0,0 +1,220 @@
|
||||
/**
|
||||
* 用户订阅管理相关表
|
||||
*/
|
||||
|
||||
export const up = (pgm) => {
|
||||
// 1. 订阅计划表
|
||||
pgm.createTable('subscription_plans', {
|
||||
id: { type: 'serial', primaryKey: true },
|
||||
plan_id: {
|
||||
type: 'varchar(100)',
|
||||
unique: true,
|
||||
notNull: true,
|
||||
comment: '计划唯一标识符'
|
||||
},
|
||||
name: {
|
||||
type: 'varchar(255)',
|
||||
notNull: true,
|
||||
comment: '计划名称'
|
||||
},
|
||||
description: {
|
||||
type: 'text',
|
||||
comment: '计划描述'
|
||||
},
|
||||
price: {
|
||||
type: 'decimal(10,2)',
|
||||
notNull: true,
|
||||
comment: '价格'
|
||||
},
|
||||
currency: {
|
||||
type: 'varchar(3)',
|
||||
notNull: true,
|
||||
default: 'CNY',
|
||||
comment: '货币类型'
|
||||
},
|
||||
interval: {
|
||||
type: 'varchar(50)',
|
||||
notNull: true,
|
||||
comment: 'month, year, week'
|
||||
},
|
||||
interval_count: {
|
||||
type: 'integer',
|
||||
notNull: true,
|
||||
default: 1,
|
||||
comment: '间隔数量'
|
||||
},
|
||||
stripe_price_id: {
|
||||
type: 'varchar(255)',
|
||||
comment: 'Stripe价格ID'
|
||||
},
|
||||
features: {
|
||||
type: 'jsonb',
|
||||
comment: '功能列表JSON'
|
||||
},
|
||||
is_popular: {
|
||||
type: 'boolean',
|
||||
default: false,
|
||||
comment: '是否为推荐计划'
|
||||
},
|
||||
is_active: {
|
||||
type: 'boolean',
|
||||
notNull: true,
|
||||
default: true,
|
||||
comment: '是否启用'
|
||||
},
|
||||
created_at: { type: 'timestamptz', notNull: true, default: pgm.func('current_timestamp') },
|
||||
updated_at: { type: 'timestamptz', notNull: true, default: pgm.func('current_timestamp') }
|
||||
});
|
||||
|
||||
// 2. 用户订阅表
|
||||
pgm.createTable('user_subscriptions', {
|
||||
id: { type: 'serial', primaryKey: true },
|
||||
user_profile_id: {
|
||||
type: 'uuid',
|
||||
notNull: true,
|
||||
references: 'user_profiles(id)',
|
||||
onDelete: 'CASCADE'
|
||||
},
|
||||
subscription_plan_id: {
|
||||
type: 'integer',
|
||||
notNull: true,
|
||||
references: 'subscription_plans(id)',
|
||||
onDelete: 'RESTRICT'
|
||||
},
|
||||
stripe_subscription_id: {
|
||||
type: 'varchar(255)',
|
||||
unique: true,
|
||||
comment: 'Stripe订阅ID'
|
||||
},
|
||||
status: {
|
||||
type: 'varchar(50)',
|
||||
notNull: true,
|
||||
comment: 'active, canceled, past_due, trialing, incomplete'
|
||||
},
|
||||
current_period_start: {
|
||||
type: 'timestamptz',
|
||||
notNull: true,
|
||||
comment: '当前周期开始时间'
|
||||
},
|
||||
current_period_end: {
|
||||
type: 'timestamptz',
|
||||
notNull: true,
|
||||
comment: '当前周期结束时间'
|
||||
},
|
||||
cancel_at_period_end: {
|
||||
type: 'boolean',
|
||||
default: false,
|
||||
comment: '是否在周期结束时取消'
|
||||
},
|
||||
canceled_at: {
|
||||
type: 'timestamptz',
|
||||
comment: '取消时间'
|
||||
},
|
||||
trial_start: {
|
||||
type: 'timestamptz',
|
||||
comment: '试用开始时间'
|
||||
},
|
||||
trial_end: {
|
||||
type: 'timestamptz',
|
||||
comment: '试用结束时间'
|
||||
},
|
||||
created_at: { type: 'timestamptz', notNull: true, default: pgm.func('current_timestamp') },
|
||||
updated_at: { type: 'timestamptz', notNull: true, default: pgm.func('current_timestamp') }
|
||||
});
|
||||
|
||||
// 3. 订阅历史记录表
|
||||
pgm.createTable('subscription_history', {
|
||||
id: { type: 'serial', primaryKey: true },
|
||||
user_subscription_id: {
|
||||
type: 'integer',
|
||||
notNull: true,
|
||||
references: 'user_subscriptions(id)',
|
||||
onDelete: 'CASCADE'
|
||||
},
|
||||
action: {
|
||||
type: 'varchar(100)',
|
||||
notNull: true,
|
||||
comment: 'created, updated, canceled, renewed, payment_failed'
|
||||
},
|
||||
old_status: {
|
||||
type: 'varchar(50)',
|
||||
comment: '原状态'
|
||||
},
|
||||
new_status: {
|
||||
type: 'varchar(50)',
|
||||
comment: '新状态'
|
||||
},
|
||||
metadata: {
|
||||
type: 'jsonb',
|
||||
comment: '额外信息JSON'
|
||||
},
|
||||
created_at: { type: 'timestamptz', notNull: true, default: pgm.func('current_timestamp') }
|
||||
});
|
||||
|
||||
// 4. 支付记录表
|
||||
pgm.createTable('payment_records', {
|
||||
id: { type: 'serial', primaryKey: true },
|
||||
user_subscription_id: {
|
||||
type: 'integer',
|
||||
notNull: true,
|
||||
references: 'user_subscriptions(id)',
|
||||
onDelete: 'CASCADE'
|
||||
},
|
||||
stripe_payment_intent_id: {
|
||||
type: 'varchar(255)',
|
||||
unique: true,
|
||||
comment: 'Stripe支付意向ID'
|
||||
},
|
||||
amount: {
|
||||
type: 'decimal(10,2)',
|
||||
notNull: true,
|
||||
comment: '支付金额'
|
||||
},
|
||||
currency: {
|
||||
type: 'varchar(3)',
|
||||
notNull: true,
|
||||
comment: '货币类型'
|
||||
},
|
||||
status: {
|
||||
type: 'varchar(50)',
|
||||
notNull: true,
|
||||
comment: 'succeeded, failed, pending, canceled'
|
||||
},
|
||||
payment_method: {
|
||||
type: 'varchar(100)',
|
||||
comment: '支付方式'
|
||||
},
|
||||
failure_reason: {
|
||||
type: 'varchar(255)',
|
||||
comment: '失败原因'
|
||||
},
|
||||
paid_at: {
|
||||
type: 'timestamptz',
|
||||
comment: '支付成功时间'
|
||||
},
|
||||
created_at: { type: 'timestamptz', notNull: true, default: pgm.func('current_timestamp') }
|
||||
});
|
||||
|
||||
// 添加索引
|
||||
pgm.createIndex('subscription_plans', 'plan_id');
|
||||
pgm.createIndex('subscription_plans', 'is_active');
|
||||
pgm.createIndex('user_subscriptions', 'user_profile_id');
|
||||
pgm.createIndex('user_subscriptions', 'status');
|
||||
pgm.createIndex('user_subscriptions', 'stripe_subscription_id');
|
||||
pgm.createIndex('subscription_history', 'user_subscription_id');
|
||||
pgm.createIndex('payment_records', 'user_subscription_id');
|
||||
pgm.createIndex('payment_records', 'status');
|
||||
|
||||
// 添加唯一约束：一个用户同时只能有一个活跃订阅
|
||||
pgm.addConstraint('user_subscriptions', 'unique_active_subscription', {
|
||||
unique: ['user_profile_id'],
|
||||
where: "status IN ('active', 'trialing')"
|
||||
});
|
||||
};
|
||||
|
||||
export const down = (pgm) => {
|
||||
pgm.dropTable('payment_records');
|
||||
pgm.dropTable('subscription_history');
|
||||
pgm.dropTable('user_subscriptions');
|
||||
pgm.dropTable('subscription_plans');
|
||||
};
|
||||
30
meteor-web-backend/scripts/check-tables.js
Normal file
30
meteor-web-backend/scripts/check-tables.js
Normal file
@ -0,0 +1,30 @@
|
||||
const { Client } = require('pg');
|
||||
require('dotenv').config();
|
||||
|
||||
const client = new Client(process.env.DATABASE_URL);
|
||||
|
||||
async function checkTables() {
|
||||
try {
|
||||
await client.connect();
|
||||
console.log('Connected to database');
|
||||
|
||||
const result = await client.query(`
|
||||
SELECT table_name
|
||||
FROM information_schema.tables
|
||||
WHERE table_schema = 'public'
|
||||
ORDER BY table_name;
|
||||
`);
|
||||
|
||||
console.log('Available tables:');
|
||||
result.rows.forEach(row => {
|
||||
console.log(`- ${row.table_name}`);
|
||||
});
|
||||
|
||||
} catch (error) {
|
||||
console.error('Error checking tables:', error);
|
||||
} finally {
|
||||
await client.end();
|
||||
}
|
||||
}
|
||||
|
||||
checkTables();
|
||||
136
meteor-web-backend/scripts/create-premium-user.js
Normal file
136
meteor-web-backend/scripts/create-premium-user.js
Normal file
@ -0,0 +1,136 @@
|
||||
#!/usr/bin/env node
|
||||
|
||||
/**
|
||||
* 创建付费测试用户的脚本
|
||||
*
|
||||
* 使用方法：
|
||||
* node scripts/create-premium-user.js [email] [password] [displayName]
|
||||
*
|
||||
* 例子：
|
||||
* node scripts/create-premium-user.js premium@test.com TestPass123 "Premium User"
|
||||
*/
|
||||
|
||||
const { Client } = require('pg');
|
||||
const path = require('path');
|
||||
require('dotenv').config({ path: path.join(__dirname, '..', '.env') });
|
||||
|
||||
async function createPremiumUser(email, password, displayName) {
|
||||
const client = new Client({
|
||||
connectionString: process.env.DATABASE_URL
|
||||
});
|
||||
|
||||
try {
|
||||
await client.connect();
|
||||
console.log('✅ Connected to database');
|
||||
|
||||
// 1. 首先注册普通用户
|
||||
console.log(`\n📝 Registering user: ${email}`);
|
||||
|
||||
const registerResponse = await fetch('http://localhost:3001/api/v1/auth/register-email', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify({
|
||||
email,
|
||||
password,
|
||||
displayName
|
||||
})
|
||||
});
|
||||
|
||||
if (!registerResponse.ok) {
|
||||
const error = await registerResponse.json();
|
||||
throw new Error(`Registration failed: ${error.message}`);
|
||||
}
|
||||
|
||||
const registerData = await registerResponse.json();
|
||||
const userId = registerData.userId;
|
||||
|
||||
console.log(`✅ User registered successfully with ID: ${userId}`);
|
||||
|
||||
// 2. 更新用户为付费用户
|
||||
const fakeCustomerId = 'cus_test_premium_' + Date.now();
|
||||
const fakeSubscriptionId = 'sub_test_premium_' + Date.now();
|
||||
|
||||
const updateQuery = `
|
||||
UPDATE user_profiles
|
||||
SET
|
||||
payment_provider_customer_id = $1,
|
||||
payment_provider_subscription_id = $2,
|
||||
updated_at = NOW()
|
||||
WHERE id = $3
|
||||
`;
|
||||
|
||||
const result = await client.query(updateQuery, [fakeCustomerId, fakeSubscriptionId, userId]);
|
||||
|
||||
if (result.rowCount > 0) {
|
||||
console.log('✅ User upgraded to premium successfully!');
|
||||
|
||||
// 3. 测试登录和profile获取
|
||||
console.log('\n🔐 Testing login...');
|
||||
const loginResponse = await fetch('http://localhost:3001/api/v1/auth/login-email', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify({
|
||||
email,
|
||||
password
|
||||
})
|
||||
});
|
||||
|
||||
if (loginResponse.ok) {
|
||||
const loginData = await loginResponse.json();
|
||||
console.log('✅ Login successful');
|
||||
|
||||
// 测试profile
|
||||
const profileResponse = await fetch('http://localhost:3001/api/v1/auth/profile', {
|
||||
method: 'GET',
|
||||
headers: {
|
||||
'Authorization': `Bearer ${loginData.accessToken}`,
|
||||
'Content-Type': 'application/json',
|
||||
}
|
||||
});
|
||||
|
||||
if (profileResponse.ok) {
|
||||
const profileData = await profileResponse.json();
|
||||
console.log('✅ Profile retrieved successfully');
|
||||
|
||||
console.log('\n🎉 Premium user created successfully!');
|
||||
console.log('='.repeat(50));
|
||||
console.log(`👤 User Details:`);
|
||||
console.log(` Email: ${email}`);
|
||||
console.log(` Password: ${password}`);
|
||||
console.log(` Display Name: ${displayName}`);
|
||||
console.log(` User ID: ${userId}`);
|
||||
console.log(` Customer ID: ${fakeCustomerId}`);
|
||||
console.log(` Subscription ID: ${fakeSubscriptionId}`);
|
||||
console.log(` Subscription Status: ${profileData.subscriptionStatus}`);
|
||||
console.log(` Has Active Subscription: ${profileData.hasActiveSubscription}`);
|
||||
console.log('='.repeat(50));
|
||||
}
|
||||
}
|
||||
} else {
|
||||
console.log('❌ Failed to upgrade user to premium');
|
||||
}
|
||||
|
||||
} catch (error) {
|
||||
console.error('❌ Error:', error.message);
|
||||
process.exit(1);
|
||||
} finally {
|
||||
await client.end();
|
||||
}
|
||||
}
|
||||
|
||||
// 命令行参数处理
|
||||
const args = process.argv.slice(2);
|
||||
const email = args[0] || 'premium' + Date.now() + '@test.com';
|
||||
const password = args[1] || 'TestPassword123';
|
||||
const displayName = args[2] || 'Premium User';
|
||||
|
||||
console.log('🚀 Creating Premium User...');
|
||||
console.log(`Email: ${email}`);
|
||||
console.log(`Password: ${password}`);
|
||||
console.log(`Display Name: ${displayName}`);
|
||||
|
||||
createPremiumUser(email, password, displayName);
|
||||
41
meteor-web-backend/scripts/seed-all-data.js
Normal file
41
meteor-web-backend/scripts/seed-all-data.js
Normal file
@ -0,0 +1,41 @@
|
||||
const { seedCameraData } = require('./seed-camera-data');
|
||||
const { seedWeatherData } = require('./seed-weather-data');
|
||||
const { seedSubscriptionData } = require('./seed-subscription-data');
|
||||
|
||||
/**
|
||||
* 主数据种子脚本 - 按正确顺序运行所有数据种子
|
||||
*/
|
||||
async function seedAllData() {
|
||||
console.log('🚀 Starting complete data seeding process...\n');
|
||||
|
||||
try {
|
||||
// 1. 种子相机数据
|
||||
console.log('📷 Step 1: Seeding camera data...');
|
||||
await seedCameraData();
|
||||
console.log('✅ Camera data seeding completed!\n');
|
||||
|
||||
// 2. 种子天气数据
|
||||
console.log('🌤️ Step 2: Seeding weather data...');
|
||||
await seedWeatherData();
|
||||
console.log('✅ Weather data seeding completed!\n');
|
||||
|
||||
// 3. 种子订阅数据
|
||||
console.log('💳 Step 3: Seeding subscription data...');
|
||||
await seedSubscriptionData();
|
||||
console.log('✅ Subscription data seeding completed!\n');
|
||||
|
||||
console.log('🎉 All data seeding completed successfully!');
|
||||
console.log('📊 Your database is now populated with comprehensive mock data.');
|
||||
|
||||
} catch (error) {
|
||||
console.error('❌ Error in data seeding process:', error);
|
||||
process.exit(1);
|
||||
}
|
||||
}
|
||||
|
||||
// 如果直接运行此脚本
|
||||
if (require.main === module) {
|
||||
seedAllData();
|
||||
}
|
||||
|
||||
module.exports = { seedAllData };
|
||||
196
meteor-web-backend/scripts/seed-camera-data.js
Normal file
196
meteor-web-backend/scripts/seed-camera-data.js
Normal file
@ -0,0 +1,196 @@
|
||||
const { Client } = require('pg');
|
||||
require('dotenv').config();
|
||||
|
||||
// 使用DATABASE_URL如果可用，否则回退到个别配置
|
||||
const client = new Client(
|
||||
process.env.DATABASE_URL || {
|
||||
host: process.env.DATABASE_HOST || 'localhost',
|
||||
port: process.env.DATABASE_PORT || 5432,
|
||||
database: process.env.DATABASE_NAME || 'meteor_db',
|
||||
user: process.env.DATABASE_USER || 'postgres',
|
||||
password: process.env.DATABASE_PASSWORD || 'password',
|
||||
}
|
||||
);
|
||||
|
||||
const cameraDevices = [
|
||||
{
|
||||
device_id: 'CAM-001',
|
||||
name: '北京站主相机',
|
||||
location: '北京',
|
||||
status: 'active',
|
||||
last_seen_at: new Date(Date.now() - 2 * 60 * 1000), // 2分钟前
|
||||
temperature: -15.2,
|
||||
cooler_power: 85.0,
|
||||
gain: 2800,
|
||||
exposure_count: 1247,
|
||||
uptime: 168.5,
|
||||
firmware_version: 'v2.3.1',
|
||||
serial_number: 'BJ001-2024'
|
||||
},
|
||||
{
|
||||
device_id: 'CAM-002',
|
||||
name: '东京站主相机',
|
||||
location: '东京',
|
||||
status: 'active',
|
||||
last_seen_at: new Date(Date.now() - 4 * 60 * 1000), // 4分钟前
|
||||
temperature: -18.7,
|
||||
cooler_power: 92.0,
|
||||
gain: 3200,
|
||||
exposure_count: 1186,
|
||||
uptime: 145.2,
|
||||
firmware_version: 'v2.3.1',
|
||||
serial_number: 'TK001-2024'
|
||||
},
|
||||
{
|
||||
device_id: 'CAM-003',
|
||||
name: '伦敦站主相机',
|
||||
location: '伦敦',
|
||||
status: 'maintenance',
|
||||
last_seen_at: new Date(Date.now() - 3 * 60 * 60 * 1000), // 3小时前
|
||||
temperature: -12.1,
|
||||
cooler_power: 0.0,
|
||||
gain: 2400,
|
||||
exposure_count: 892,
|
||||
uptime: 98.3,
|
||||
firmware_version: 'v2.2.8',
|
||||
serial_number: 'LD001-2024'
|
||||
},
|
||||
{
|
||||
device_id: 'CAM-004',
|
||||
name: '纽约站主相机',
|
||||
location: '纽约',
|
||||
status: 'active',
|
||||
last_seen_at: new Date(Date.now() - 1 * 60 * 1000), // 1分钟前
|
||||
temperature: -16.8,
|
||||
cooler_power: 88.5,
|
||||
gain: 3100,
|
||||
exposure_count: 1584,
|
||||
uptime: 203.7,
|
||||
firmware_version: 'v2.3.1',
|
||||
serial_number: 'NY001-2024'
|
||||
},
|
||||
{
|
||||
device_id: 'CAM-005',
|
||||
name: '悉尼站主相机',
|
||||
location: '悉尼',
|
||||
status: 'offline',
|
||||
last_seen_at: new Date(Date.now() - 24 * 60 * 60 * 1000), // 24小时前
|
||||
temperature: null,
|
||||
cooler_power: null,
|
||||
gain: 2600,
|
||||
exposure_count: 756,
|
||||
uptime: 67.2,
|
||||
firmware_version: 'v2.2.5',
|
||||
serial_number: 'SY001-2024'
|
||||
}
|
||||
];
|
||||
|
||||
// 生成相机历史记录数据
|
||||
function generateCameraHistory(cameraId, days = 30) {
|
||||
const history = [];
|
||||
const now = new Date();
|
||||
|
||||
for (let i = 0; i < days; i++) {
|
||||
const recordTime = new Date(now - i * 24 * 60 * 60 * 1000);
|
||||
|
||||
// 模拟不同的状态变化
|
||||
let status = 'active';
|
||||
if (Math.random() < 0.05) status = 'maintenance';
|
||||
if (Math.random() < 0.02) status = 'offline';
|
||||
|
||||
history.push({
|
||||
camera_device_id: cameraId,
|
||||
recorded_at: recordTime,
|
||||
status: status,
|
||||
temperature: -20 + Math.random() * 10, // -20到-10度
|
||||
cooler_power: status === 'active' ? 80 + Math.random() * 20 : 0, // 活跃时80-100%
|
||||
gain: Math.floor(2000 + Math.random() * 2000), // 2000-4000
|
||||
exposure_count: Math.floor(800 + Math.random() * 1000), // 800-1800
|
||||
uptime: Math.floor(50 + Math.random() * 200) // 50-250小时
|
||||
});
|
||||
}
|
||||
|
||||
return history;
|
||||
}
|
||||
|
||||
async function seedCameraData() {
|
||||
try {
|
||||
await client.connect();
|
||||
console.log('Connected to database');
|
||||
|
||||
// 清空现有数据
|
||||
console.log('Clearing existing camera data...');
|
||||
await client.query('DELETE FROM camera_history_records');
|
||||
await client.query('DELETE FROM camera_devices');
|
||||
|
||||
// 插入相机设备数据
|
||||
console.log('Inserting camera devices...');
|
||||
for (const camera of cameraDevices) {
|
||||
const query = `
|
||||
INSERT INTO camera_devices (
|
||||
device_id, name, location, status, last_seen_at, temperature,
|
||||
cooler_power, gain, exposure_count, uptime, firmware_version, serial_number
|
||||
) VALUES ($1, $2, $3, $4, $5, $6, $7, $8, $9, $10, $11, $12)
|
||||
RETURNING id
|
||||
`;
|
||||
|
||||
const values = [
|
||||
camera.device_id, camera.name, camera.location, camera.status,
|
||||
camera.last_seen_at, camera.temperature, camera.cooler_power,
|
||||
camera.gain, camera.exposure_count, camera.uptime,
|
||||
camera.firmware_version, camera.serial_number
|
||||
];
|
||||
|
||||
const result = await client.query(query, values);
|
||||
const cameraId = result.rows[0].id;
|
||||
|
||||
console.log(`Inserted camera: ${camera.name} (ID: ${cameraId})`);
|
||||
|
||||
// 为每个相机生成历史记录
|
||||
console.log(`Generating history for camera ${camera.name}...`);
|
||||
const history = generateCameraHistory(cameraId);
|
||||
|
||||
for (const record of history) {
|
||||
const historyQuery = `
|
||||
INSERT INTO camera_history_records (
|
||||
camera_device_id, recorded_at, status, temperature,
|
||||
cooler_power, gain, exposure_count, uptime
|
||||
) VALUES ($1, $2, $3, $4, $5, $6, $7, $8)
|
||||
`;
|
||||
|
||||
const historyValues = [
|
||||
record.camera_device_id, record.recorded_at, record.status,
|
||||
record.temperature, record.cooler_power, record.gain,
|
||||
record.exposure_count, record.uptime
|
||||
];
|
||||
|
||||
await client.query(historyQuery, historyValues);
|
||||
}
|
||||
|
||||
console.log(`Generated ${history.length} history records for ${camera.name}`);
|
||||
}
|
||||
|
||||
console.log('Camera data seeding completed successfully!');
|
||||
|
||||
// 显示统计信息
|
||||
const deviceCount = await client.query('SELECT COUNT(*) FROM camera_devices');
|
||||
const historyCount = await client.query('SELECT COUNT(*) FROM camera_history_records');
|
||||
|
||||
console.log(`Total camera devices: ${deviceCount.rows[0].count}`);
|
||||
console.log(`Total history records: ${historyCount.rows[0].count}`);
|
||||
|
||||
} catch (error) {
|
||||
console.error('Error seeding camera data:', error);
|
||||
process.exit(1);
|
||||
} finally {
|
||||
await client.end();
|
||||
console.log('Database connection closed');
|
||||
}
|
||||
}
|
||||
|
||||
// 如果直接运行此脚本
|
||||
if (require.main === module) {
|
||||
seedCameraData();
|
||||
}
|
||||
|
||||
module.exports = { seedCameraData };
|
||||
241
meteor-web-backend/scripts/seed-meteor-analysis-data.js
Normal file
241
meteor-web-backend/scripts/seed-meteor-analysis-data.js
Normal file
@ -0,0 +1,241 @@
|
||||
import { Pool } from 'pg';
|
||||
import dotenv from 'dotenv';
|
||||
|
||||
dotenv.config();
|
||||
|
||||
const pool = new Pool({
|
||||
connectionString: process.env.DATABASE_URL,
|
||||
});
|
||||
|
||||
// 流星雨名称
|
||||
const meteorShowers = [
|
||||
'象限仪座流星雨', '英仙座流星雨', '双子座流星雨', '天琴座流星雨',
|
||||
'宝瓶座流星雨', '猎户座流星雨', '金牛座流星雨', '狮子座流星雨'
|
||||
];
|
||||
|
||||
// 分类
|
||||
const classifications = ['流星雨', '亮流星', '火球', '流星群', '零散流星'];
|
||||
|
||||
// 站点名称
|
||||
const stationNames = ['北京站', '东京站', '柏林站', '伦敦站', '纽约站', '洛杉矶站', '莫斯科站', '悉尼站'];
|
||||
|
||||
// 天气条件
|
||||
const weatherConditions = ['晴朗', '少云', '多云', '阴天', '小雨', '雷雨', '雾'];
|
||||
|
||||
// 方向
|
||||
const directions = ['东北', '东南', '西南', '西北', '北', '南', '东', '西'];
|
||||
|
||||
// 生成随机流星事件数据
|
||||
function generateMeteorEventData() {
|
||||
return {
|
||||
weather_condition: weatherConditions[Math.floor(Math.random() * weatherConditions.length)],
|
||||
station_name: stationNames[Math.floor(Math.random() * stationNames.length)],
|
||||
classification: classifications[Math.floor(Math.random() * classifications.length)],
|
||||
duration: Number((Math.random() * 4 + 0.5).toFixed(2)), // 0.5 to 4.5 seconds
|
||||
direction: directions[Math.floor(Math.random() * directions.length)],
|
||||
azimuth: Math.floor(Math.random() * 360), // 0° to 360°
|
||||
altitude: Math.floor(Math.random() * 90), // 0° to 90°
|
||||
velocity: Number((Math.random() * 50 + 10).toFixed(2)), // 10 to 60 km/s
|
||||
shower_name: meteorShowers[Math.floor(Math.random() * meteorShowers.length)],
|
||||
};
|
||||
}
|
||||
|
||||
// 生成分析结果数据
|
||||
function generateAnalysisResults() {
|
||||
const results = [];
|
||||
|
||||
// 时间分布分析
|
||||
const timeDistribution = {
|
||||
yearly: [
|
||||
{ period: '2023', count: 15247 },
|
||||
{ period: '2024', count: 18453 }
|
||||
],
|
||||
monthly: [
|
||||
{ month: '1月', count: 1250 },
|
||||
{ month: '2月', count: 1100 },
|
||||
{ month: '3月', count: 1350 },
|
||||
{ month: '4月', count: 1200 },
|
||||
{ month: '5月', count: 1400 },
|
||||
{ month: '6月', count: 1180 },
|
||||
{ month: '7月', count: 1320 },
|
||||
{ month: '8月', count: 2247 }, // 英仙座流星雨高峰
|
||||
{ month: '9月', count: 1150 },
|
||||
{ month: '10月', count: 1300 },
|
||||
{ month: '11月', count: 1100 },
|
||||
{ month: '12月', count: 1650 }
|
||||
],
|
||||
hourly: Array.from({ length: 24 }, (_, i) => ({
|
||||
hour: i,
|
||||
count: Math.floor(Math.random() * 200) + 50
|
||||
}))
|
||||
};
|
||||
|
||||
results.push({
|
||||
analysis_type: 'time_distribution',
|
||||
time_frame: 'all',
|
||||
result_data: timeDistribution
|
||||
});
|
||||
|
||||
// 亮度分析
|
||||
const brightnessAnalysis = {
|
||||
distribution: [
|
||||
{ magnitude: '-6以下', count: 150 },
|
||||
{ magnitude: '-6到-4', count: 450 },
|
||||
{ magnitude: '-4到-2', count: 2800 },
|
||||
{ magnitude: '-2到0', count: 5200 },
|
||||
{ magnitude: '0到2', count: 4500 },
|
||||
{ magnitude: '2到4', count: 1800 },
|
||||
{ magnitude: '4以上', count: 347 }
|
||||
],
|
||||
statistics: {
|
||||
total: 15247,
|
||||
average: -2.5,
|
||||
median: -2.0,
|
||||
brightest: -5.6,
|
||||
dimmest: 4.2
|
||||
}
|
||||
};
|
||||
|
||||
results.push({
|
||||
analysis_type: 'brightness_analysis',
|
||||
time_frame: 'all',
|
||||
result_data: brightnessAnalysis
|
||||
});
|
||||
|
||||
// 区域分布分析
|
||||
const regionalAnalysis = [
|
||||
{ region: '北京站', count: 2150 },
|
||||
{ region: '东京站', count: 1950 },
|
||||
{ region: '柏林站', count: 1800 },
|
||||
{ region: '伦敦站', count: 1700 },
|
||||
{ region: '纽约站', count: 2200 },
|
||||
{ region: '洛杉矶站', count: 1900 },
|
||||
{ region: '莫斯科站', count: 1750 },
|
||||
{ region: '悉尼站', count: 1797 }
|
||||
];
|
||||
|
||||
results.push({
|
||||
analysis_type: 'regional_distribution',
|
||||
time_frame: 'all',
|
||||
result_data: regionalAnalysis
|
||||
});
|
||||
|
||||
// 统计摘要
|
||||
const summary = {
|
||||
totalDetections: 15247,
|
||||
averageBrightness: -2.5,
|
||||
mostActiveMonth: { month: '8月', count: 2247, shower: '英仙座流星雨' },
|
||||
topStations: regionalAnalysis.slice(0, 3)
|
||||
};
|
||||
|
||||
results.push({
|
||||
analysis_type: 'statistics_summary',
|
||||
time_frame: 'all',
|
||||
result_data: summary
|
||||
});
|
||||
|
||||
return results;
|
||||
}
|
||||
|
||||
async function seedMeteorAnalysisData() {
|
||||
const client = await pool.connect();
|
||||
|
||||
try {
|
||||
await client.query('BEGIN');
|
||||
|
||||
console.log('检查现有流星事件数据...');
|
||||
const eventCountResult = await client.query('SELECT COUNT(*) FROM validated_events');
|
||||
const eventCount = parseInt(eventCountResult.rows[0].count);
|
||||
|
||||
if (eventCount > 0) {
|
||||
console.log(`找到 ${eventCount} 条现有流星事件，更新分析字段...`);
|
||||
|
||||
// 随机更新现有事件的分析字段
|
||||
const events = await client.query('SELECT id FROM validated_events ORDER BY created_at LIMIT 100');
|
||||
|
||||
for (const event of events.rows) {
|
||||
const analysisData = generateMeteorEventData();
|
||||
|
||||
await client.query(`
|
||||
UPDATE validated_events
|
||||
SET
|
||||
weather_condition = $1,
|
||||
station_name = $2,
|
||||
classification = $3,
|
||||
duration = $4,
|
||||
direction = $5,
|
||||
azimuth = $6,
|
||||
altitude = $7,
|
||||
velocity = $8,
|
||||
shower_name = $9
|
||||
WHERE id = $10
|
||||
`, [
|
||||
analysisData.weather_condition,
|
||||
analysisData.station_name,
|
||||
analysisData.classification,
|
||||
analysisData.duration,
|
||||
analysisData.direction,
|
||||
analysisData.azimuth,
|
||||
analysisData.altitude,
|
||||
analysisData.velocity,
|
||||
analysisData.shower_name,
|
||||
event.id
|
||||
]);
|
||||
}
|
||||
|
||||
console.log(`更新了 ${events.rows.length} 条流星事件的分析字段`);
|
||||
} else {
|
||||
console.log('没有找到现有流星事件数据，跳过更新步骤');
|
||||
}
|
||||
|
||||
console.log('清理现有分析结果...');
|
||||
await client.query('DELETE FROM analysis_results');
|
||||
|
||||
console.log('插入分析结果数据...');
|
||||
const analysisResults = generateAnalysisResults();
|
||||
|
||||
for (const result of analysisResults) {
|
||||
await client.query(`
|
||||
INSERT INTO analysis_results (analysis_type, time_frame, result_data)
|
||||
VALUES ($1, $2, $3)
|
||||
`, [
|
||||
result.analysis_type,
|
||||
result.time_frame,
|
||||
JSON.stringify(result.result_data)
|
||||
]);
|
||||
|
||||
console.log(`插入分析结果: ${result.analysis_type}`);
|
||||
}
|
||||
|
||||
await client.query('COMMIT');
|
||||
console.log('流星分析数据种子插入完成!');
|
||||
|
||||
// 显示统计信息
|
||||
const analysisCount = await client.query('SELECT COUNT(*) FROM analysis_results');
|
||||
const updatedEventsCount = await client.query(
|
||||
'SELECT COUNT(*) FROM validated_events WHERE station_name IS NOT NULL'
|
||||
);
|
||||
|
||||
console.log(`插入了 ${analysisCount.rows[0].count} 条分析结果`);
|
||||
console.log(`更新了 ${updatedEventsCount.rows[0].count} 条流星事件的分析字段`);
|
||||
|
||||
} catch (error) {
|
||||
await client.query('ROLLBACK');
|
||||
console.error('种子数据插入失败:', error);
|
||||
} finally {
|
||||
client.release();
|
||||
await pool.end();
|
||||
}
|
||||
}
|
||||
|
||||
// 运行种子脚本
|
||||
if (import.meta.url === `file://${process.argv[1]}`) {
|
||||
seedMeteorAnalysisData()
|
||||
.then(() => process.exit(0))
|
||||
.catch((error) => {
|
||||
console.error(error);
|
||||
process.exit(1);
|
||||
});
|
||||
}
|
||||
|
||||
export { seedMeteorAnalysisData };
|
||||
400
meteor-web-backend/scripts/seed-subscription-data.js
Normal file
400
meteor-web-backend/scripts/seed-subscription-data.js
Normal file
@ -0,0 +1,400 @@
|
||||
const { Client } = require('pg');
|
||||
require('dotenv').config();
|
||||
|
||||
// 使用DATABASE_URL如果可用，否则回退到个别配置
|
||||
const client = new Client(
|
||||
process.env.DATABASE_URL || {
|
||||
host: process.env.DATABASE_HOST || 'localhost',
|
||||
port: process.env.DATABASE_PORT || 5432,
|
||||
database: process.env.DATABASE_NAME || 'meteor_db',
|
||||
user: process.env.DATABASE_USER || 'postgres',
|
||||
password: process.env.DATABASE_PASSWORD || 'password',
|
||||
}
|
||||
);
|
||||
|
||||
// 订阅计划数据
|
||||
const subscriptionPlans = [
|
||||
{
|
||||
plan_id: 'basic-monthly',
|
||||
name: '基础版（月付）',
|
||||
description: '适合个人用户的基础功能',
|
||||
price: 9.99,
|
||||
currency: 'CNY',
|
||||
interval: 'month',
|
||||
interval_count: 1,
|
||||
stripe_price_id: 'price_basic_monthly',
|
||||
features: JSON.stringify([
|
||||
'基础数据访问',
|
||||
'10个设备连接',
|
||||
'基础天气数据',
|
||||
'标准技术支持',
|
||||
'7天数据保留'
|
||||
]),
|
||||
is_popular: false,
|
||||
is_active: true
|
||||
},
|
||||
{
|
||||
plan_id: 'pro-monthly',
|
||||
name: '专业版（月付）',
|
||||
description: '适合专业用户和小团队',
|
||||
price: 29.99,
|
||||
currency: 'CNY',
|
||||
interval: 'month',
|
||||
interval_count: 1,
|
||||
stripe_price_id: 'price_pro_monthly',
|
||||
features: JSON.stringify([
|
||||
'高级数据分析',
|
||||
'无限设备连接',
|
||||
'实时数据流',
|
||||
'高级天气集成',
|
||||
'优先技术支持',
|
||||
'30天数据保留',
|
||||
'自定义报告',
|
||||
'API访问权限'
|
||||
]),
|
||||
is_popular: true,
|
||||
is_active: true
|
||||
},
|
||||
{
|
||||
plan_id: 'pro-yearly',
|
||||
name: '专业版（年付）',
|
||||
description: '专业版年付，享受20%折扣',
|
||||
price: 287.99,
|
||||
currency: 'CNY',
|
||||
interval: 'year',
|
||||
interval_count: 1,
|
||||
stripe_price_id: 'price_pro_yearly',
|
||||
features: JSON.stringify([
|
||||
'高级数据分析',
|
||||
'无限设备连接',
|
||||
'实时数据流',
|
||||
'高级天气集成',
|
||||
'优先技术支持',
|
||||
'30天数据保留',
|
||||
'自定义报告',
|
||||
'API访问权限',
|
||||
'年付8折优惠'
|
||||
]),
|
||||
is_popular: false,
|
||||
is_active: true
|
||||
},
|
||||
{
|
||||
plan_id: 'enterprise-monthly',
|
||||
name: '企业版（月付）',
|
||||
description: '适合大型企业和研究机构',
|
||||
price: 99.99,
|
||||
currency: 'CNY',
|
||||
interval: 'month',
|
||||
interval_count: 1,
|
||||
stripe_price_id: 'price_enterprise_monthly',
|
||||
features: JSON.stringify([
|
||||
'企业级数据分析',
|
||||
'无限设备和用户',
|
||||
'实时数据流',
|
||||
'完整天气数据',
|
||||
'24/7专属支持',
|
||||
'365天数据保留',
|
||||
'高级自定义报告',
|
||||
'完整API访问',
|
||||
'数据导出功能',
|
||||
'白标定制',
|
||||
'SSO单点登录',
|
||||
'专属客户经理'
|
||||
]),
|
||||
is_popular: false,
|
||||
is_active: true
|
||||
},
|
||||
{
|
||||
plan_id: 'free-trial',
|
||||
name: '免费试用',
|
||||
description: '14天免费试用专业版功能',
|
||||
price: 0.00,
|
||||
currency: 'CNY',
|
||||
interval: 'month',
|
||||
interval_count: 1,
|
||||
stripe_price_id: null,
|
||||
features: JSON.stringify([
|
||||
'14天试用期',
|
||||
'所有专业版功能',
|
||||
'最多5个设备',
|
||||
'基础技术支持',
|
||||
'试用期数据保留'
|
||||
]),
|
||||
is_popular: false,
|
||||
is_active: true
|
||||
}
|
||||
];
|
||||
|
||||
// 生成用户订阅数据
|
||||
async function generateUserSubscriptions() {
|
||||
// 获取所有用户
|
||||
const usersResult = await client.query('SELECT id FROM user_profiles ORDER BY id');
|
||||
const users = usersResult.rows;
|
||||
|
||||
if (users.length === 0) {
|
||||
console.log('No users found. Skipping user subscription generation.');
|
||||
return [];
|
||||
}
|
||||
|
||||
// 获取所有订阅计划
|
||||
const plansResult = await client.query('SELECT id, plan_id FROM subscription_plans WHERE is_active = true');
|
||||
const plans = plansResult.rows;
|
||||
|
||||
const subscriptions = [];
|
||||
const subscriptionStatuses = ['active', 'canceled', 'past_due', 'trialing'];
|
||||
|
||||
// 为部分用户创建订阅 (约70%的用户有订阅)
|
||||
const usersWithSubscriptions = users.filter(() => Math.random() < 0.7);
|
||||
|
||||
for (const user of usersWithSubscriptions) {
|
||||
const randomPlan = plans[Math.floor(Math.random() * plans.length)];
|
||||
const status = subscriptionStatuses[Math.floor(Math.random() * subscriptionStatuses.length)];
|
||||
|
||||
const now = new Date();
|
||||
const currentPeriodStart = new Date(now.getTime() - Math.random() * 30 * 24 * 60 * 60 * 1000); // 过去30天内开始
|
||||
const currentPeriodEnd = new Date(currentPeriodStart.getTime() + 30 * 24 * 60 * 60 * 1000); // 30天周期
|
||||
|
||||
let trialStart = null;
|
||||
let trialEnd = null;
|
||||
let canceledAt = null;
|
||||
|
||||
if (status === 'trialing') {
|
||||
trialStart = currentPeriodStart;
|
||||
trialEnd = new Date(trialStart.getTime() + 14 * 24 * 60 * 60 * 1000); // 14天试用
|
||||
}
|
||||
|
||||
if (status === 'canceled') {
|
||||
canceledAt = new Date(currentPeriodStart.getTime() + Math.random() * 20 * 24 * 60 * 60 * 1000);
|
||||
}
|
||||
|
||||
subscriptions.push({
|
||||
user_profile_id: user.id,
|
||||
subscription_plan_id: randomPlan.id,
|
||||
stripe_subscription_id: `sub_${Math.random().toString(36).substr(2, 9)}`, // 模拟Stripe ID
|
||||
status: status,
|
||||
current_period_start: currentPeriodStart,
|
||||
current_period_end: currentPeriodEnd,
|
||||
cancel_at_period_end: status === 'canceled' ? true : Math.random() < 0.1,
|
||||
canceled_at: canceledAt,
|
||||
trial_start: trialStart,
|
||||
trial_end: trialEnd
|
||||
});
|
||||
}
|
||||
|
||||
return subscriptions;
|
||||
}
|
||||
|
||||
// 生成订阅历史记录
|
||||
function generateSubscriptionHistory(subscriptionId, subscriptionData) {
|
||||
const history = [];
|
||||
const actions = ['created', 'updated', 'renewed', 'payment_failed'];
|
||||
|
||||
// 创建记录
|
||||
history.push({
|
||||
user_subscription_id: subscriptionId,
|
||||
action: 'created',
|
||||
old_status: null,
|
||||
new_status: 'active',
|
||||
metadata: JSON.stringify({
|
||||
created_by: 'system',
|
||||
payment_method: 'card'
|
||||
})
|
||||
});
|
||||
|
||||
// 添加一些随机历史记录
|
||||
const numHistory = Math.floor(Math.random() * 3) + 1; // 1-3条记录
|
||||
for (let i = 0; i < numHistory; i++) {
|
||||
const action = actions[Math.floor(Math.random() * actions.length)];
|
||||
let oldStatus = 'active';
|
||||
let newStatus = 'active';
|
||||
|
||||
if (action === 'payment_failed') {
|
||||
oldStatus = 'active';
|
||||
newStatus = 'past_due';
|
||||
} else if (action === 'renewed') {
|
||||
oldStatus = 'past_due';
|
||||
newStatus = 'active';
|
||||
}
|
||||
|
||||
history.push({
|
||||
user_subscription_id: subscriptionId,
|
||||
action: action,
|
||||
old_status: oldStatus,
|
||||
new_status: newStatus,
|
||||
metadata: JSON.stringify({
|
||||
timestamp: new Date().toISOString(),
|
||||
source: 'stripe_webhook'
|
||||
})
|
||||
});
|
||||
}
|
||||
|
||||
return history;
|
||||
}
|
||||
|
||||
// 生成支付记录
|
||||
function generatePaymentRecords(subscriptionId, subscriptionData) {
|
||||
const payments = [];
|
||||
const paymentStatuses = ['succeeded', 'failed', 'pending'];
|
||||
const paymentMethods = ['card', 'alipay', 'wechat_pay'];
|
||||
|
||||
// 生成1-5条支付记录
|
||||
const numPayments = Math.floor(Math.random() * 5) + 1;
|
||||
|
||||
for (let i = 0; i < numPayments; i++) {
|
||||
const status = paymentStatuses[Math.floor(Math.random() * paymentStatuses.length)];
|
||||
const amount = 29.99 + Math.random() * 70; // 随机金额
|
||||
|
||||
let paidAt = null;
|
||||
let failureReason = null;
|
||||
|
||||
if (status === 'succeeded') {
|
||||
paidAt = new Date(Date.now() - Math.random() * 30 * 24 * 60 * 60 * 1000);
|
||||
} else if (status === 'failed') {
|
||||
failureReason = ['card_declined', 'insufficient_funds', 'expired_card'][Math.floor(Math.random() * 3)];
|
||||
}
|
||||
|
||||
payments.push({
|
||||
user_subscription_id: subscriptionId,
|
||||
stripe_payment_intent_id: `pi_${Math.random().toString(36).substr(2, 9)}`,
|
||||
amount: amount,
|
||||
currency: 'CNY',
|
||||
status: status,
|
||||
payment_method: paymentMethods[Math.floor(Math.random() * paymentMethods.length)],
|
||||
failure_reason: failureReason,
|
||||
paid_at: paidAt
|
||||
});
|
||||
}
|
||||
|
||||
return payments;
|
||||
}
|
||||
|
||||
async function seedSubscriptionData() {
|
||||
try {
|
||||
await client.connect();
|
||||
console.log('Connected to database');
|
||||
|
||||
// 清空现有数据
|
||||
console.log('Clearing existing subscription data...');
|
||||
await client.query('DELETE FROM payment_records');
|
||||
await client.query('DELETE FROM subscription_history');
|
||||
await client.query('DELETE FROM user_subscriptions');
|
||||
await client.query('DELETE FROM subscription_plans');
|
||||
|
||||
// 插入订阅计划数据
|
||||
console.log('Inserting subscription plans...');
|
||||
const planIds = [];
|
||||
|
||||
for (const plan of subscriptionPlans) {
|
||||
const query = `
|
||||
INSERT INTO subscription_plans (
|
||||
plan_id, name, description, price, currency, interval, interval_count,
|
||||
stripe_price_id, features, is_popular, is_active
|
||||
) VALUES ($1, $2, $3, $4, $5, $6, $7, $8, $9, $10, $11)
|
||||
RETURNING id
|
||||
`;
|
||||
|
||||
const values = [
|
||||
plan.plan_id, plan.name, plan.description, plan.price, plan.currency,
|
||||
plan.interval, plan.interval_count, plan.stripe_price_id, plan.features,
|
||||
plan.is_popular, plan.is_active
|
||||
];
|
||||
|
||||
const result = await client.query(query, values);
|
||||
const planId = result.rows[0].id;
|
||||
planIds.push(planId);
|
||||
|
||||
console.log(`Inserted subscription plan: ${plan.name} (ID: ${planId})`);
|
||||
}
|
||||
|
||||
// 生成用户订阅数据
|
||||
console.log('Generating user subscriptions...');
|
||||
const subscriptions = await generateUserSubscriptions();
|
||||
|
||||
for (const subscription of subscriptions) {
|
||||
const query = `
|
||||
INSERT INTO user_subscriptions (
|
||||
user_profile_id, subscription_plan_id, stripe_subscription_id, status,
|
||||
current_period_start, current_period_end, cancel_at_period_end,
|
||||
canceled_at, trial_start, trial_end
|
||||
) VALUES ($1, $2, $3, $4, $5, $6, $7, $8, $9, $10)
|
||||
RETURNING id
|
||||
`;
|
||||
|
||||
const values = [
|
||||
subscription.user_profile_id, subscription.subscription_plan_id,
|
||||
subscription.stripe_subscription_id, subscription.status,
|
||||
subscription.current_period_start, subscription.current_period_end,
|
||||
subscription.cancel_at_period_end, subscription.canceled_at,
|
||||
subscription.trial_start, subscription.trial_end
|
||||
];
|
||||
|
||||
const result = await client.query(query, values);
|
||||
const subscriptionId = result.rows[0].id;
|
||||
|
||||
// 生成订阅历史记录
|
||||
const history = generateSubscriptionHistory(subscriptionId, subscription);
|
||||
for (const record of history) {
|
||||
const historyQuery = `
|
||||
INSERT INTO subscription_history (
|
||||
user_subscription_id, action, old_status, new_status, metadata
|
||||
) VALUES ($1, $2, $3, $4, $5)
|
||||
`;
|
||||
|
||||
const historyValues = [
|
||||
record.user_subscription_id, record.action, record.old_status,
|
||||
record.new_status, record.metadata
|
||||
];
|
||||
|
||||
await client.query(historyQuery, historyValues);
|
||||
}
|
||||
|
||||
// 生成支付记录
|
||||
const payments = generatePaymentRecords(subscriptionId, subscription);
|
||||
for (const payment of payments) {
|
||||
const paymentQuery = `
|
||||
INSERT INTO payment_records (
|
||||
user_subscription_id, stripe_payment_intent_id, amount, currency,
|
||||
status, payment_method, failure_reason, paid_at
|
||||
) VALUES ($1, $2, $3, $4, $5, $6, $7, $8)
|
||||
`;
|
||||
|
||||
const paymentValues = [
|
||||
payment.user_subscription_id, payment.stripe_payment_intent_id,
|
||||
payment.amount, payment.currency, payment.status, payment.payment_method,
|
||||
payment.failure_reason, payment.paid_at
|
||||
];
|
||||
|
||||
await client.query(paymentQuery, paymentValues);
|
||||
}
|
||||
|
||||
console.log(`Generated subscription for user ${subscription.user_profile_id} with ${history.length} history records and ${payments.length} payment records`);
|
||||
}
|
||||
|
||||
console.log('Subscription data seeding completed successfully!');
|
||||
|
||||
// 显示统计信息
|
||||
const planCount = await client.query('SELECT COUNT(*) FROM subscription_plans');
|
||||
const subscriptionCount = await client.query('SELECT COUNT(*) FROM user_subscriptions');
|
||||
const historyCount = await client.query('SELECT COUNT(*) FROM subscription_history');
|
||||
const paymentCount = await client.query('SELECT COUNT(*) FROM payment_records');
|
||||
|
||||
console.log(`Total subscription plans: ${planCount.rows[0].count}`);
|
||||
console.log(`Total user subscriptions: ${subscriptionCount.rows[0].count}`);
|
||||
console.log(`Total history records: ${historyCount.rows[0].count}`);
|
||||
console.log(`Total payment records: ${paymentCount.rows[0].count}`);
|
||||
|
||||
} catch (error) {
|
||||
console.error('Error seeding subscription data:', error);
|
||||
process.exit(1);
|
||||
} finally {
|
||||
await client.end();
|
||||
console.log('Database connection closed');
|
||||
}
|
||||
}
|
||||
|
||||
// 如果直接运行此脚本
|
||||
if (require.main === module) {
|
||||
seedSubscriptionData();
|
||||
}
|
||||
|
||||
module.exports = { seedSubscriptionData };
|
||||
236
meteor-web-backend/scripts/seed-weather-data.js
Normal file
236
meteor-web-backend/scripts/seed-weather-data.js
Normal file
@ -0,0 +1,236 @@
|
||||
const { Client } = require('pg');
|
||||
require('dotenv').config();
|
||||
|
||||
// 使用DATABASE_URL如果可用，否则回退到个别配置
|
||||
const client = new Client(
|
||||
process.env.DATABASE_URL || {
|
||||
host: process.env.DATABASE_HOST || 'localhost',
|
||||
port: process.env.DATABASE_PORT || 5432,
|
||||
database: process.env.DATABASE_NAME || 'meteor_db',
|
||||
user: process.env.DATABASE_USER || 'postgres',
|
||||
password: process.env.DATABASE_PASSWORD || 'password',
|
||||
}
|
||||
);
|
||||
|
||||
// 气象站数据
|
||||
const weatherStations = [
|
||||
{
|
||||
station_name: '北京气象站',
|
||||
location: '北京',
|
||||
latitude: 39.9042,
|
||||
longitude: 116.4074,
|
||||
altitude: 43.71,
|
||||
status: 'active'
|
||||
},
|
||||
{
|
||||
station_name: '东京气象站',
|
||||
location: '东京',
|
||||
latitude: 35.6762,
|
||||
longitude: 139.6503,
|
||||
altitude: 40.0,
|
||||
status: 'active'
|
||||
},
|
||||
{
|
||||
station_name: '伦敦气象站',
|
||||
location: '伦敦',
|
||||
latitude: 51.5074,
|
||||
longitude: -0.1278,
|
||||
altitude: 35.0,
|
||||
status: 'active'
|
||||
},
|
||||
{
|
||||
station_name: '纽约气象站',
|
||||
location: '纽约',
|
||||
latitude: 40.7128,
|
||||
longitude: -74.0060,
|
||||
altitude: 10.0,
|
||||
status: 'active'
|
||||
},
|
||||
{
|
||||
station_name: '悉尼气象站',
|
||||
location: '悉尼',
|
||||
latitude: -33.8688,
|
||||
longitude: 151.2093,
|
||||
altitude: 58.0,
|
||||
status: 'maintenance'
|
||||
}
|
||||
];
|
||||
|
||||
// 天气状况列表
|
||||
const weatherConditions = [
|
||||
'晴朗', '多云', '阴天', '小雨', '中雨', '大雨', '雷阵雨',
|
||||
'雪', '雾', '霾', '沙尘暴', '冰雹'
|
||||
];
|
||||
|
||||
const observationQualities = ['excellent', 'moderate', 'poor'];
|
||||
|
||||
// 生成天气观测数据
|
||||
function generateWeatherObservations(stationId, stationName, days = 30) {
|
||||
const observations = [];
|
||||
const now = new Date();
|
||||
|
||||
// 基础温度根据地区设置
|
||||
let baseTempRange = { min: -10, max: 30 };
|
||||
if (stationName.includes('北京')) baseTempRange = { min: -5, max: 35 };
|
||||
if (stationName.includes('东京')) baseTempRange = { min: 0, max: 32 };
|
||||
if (stationName.includes('伦敦')) baseTempRange = { min: 2, max: 25 };
|
||||
if (stationName.includes('纽约')) baseTempRange = { min: -2, max: 30 };
|
||||
if (stationName.includes('悉尼')) baseTempRange = { min: 8, max: 28 };
|
||||
|
||||
for (let i = 0; i < days; i++) {
|
||||
// 每天生成4次观测数据 (6小时间隔)
|
||||
for (let j = 0; j < 4; j++) {
|
||||
const observationTime = new Date(now - i * 24 * 60 * 60 * 1000 + j * 6 * 60 * 60 * 1000);
|
||||
|
||||
observations.push({
|
||||
weather_station_id: stationId,
|
||||
observation_time: observationTime,
|
||||
temperature: baseTempRange.min + Math.random() * (baseTempRange.max - baseTempRange.min),
|
||||
humidity: 30 + Math.random() * 50, // 30-80%
|
||||
cloud_cover: Math.random() * 100, // 0-100%
|
||||
visibility: 5 + Math.random() * 45, // 5-50km
|
||||
wind_speed: Math.random() * 30, // 0-30 km/h
|
||||
wind_direction: Math.floor(Math.random() * 360), // 0-360度
|
||||
condition: weatherConditions[Math.floor(Math.random() * weatherConditions.length)],
|
||||
observation_quality: observationQualities[Math.floor(Math.random() * observationQualities.length)],
|
||||
pressure: 980 + Math.random() * 60, // 980-1040 hPa
|
||||
precipitation: Math.random() < 0.3 ? Math.random() * 20 : 0 // 30%概率有降水
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
return observations;
|
||||
}
|
||||
|
||||
// 生成天气预报数据
|
||||
function generateWeatherForecasts(stationId, days = 7) {
|
||||
const forecasts = [];
|
||||
const now = new Date();
|
||||
const issuedAt = new Date();
|
||||
|
||||
for (let i = 1; i <= days; i++) {
|
||||
// 每天生成2次预报 (12小时间隔)
|
||||
for (let j = 0; j < 2; j++) {
|
||||
const forecastTime = new Date(now.getTime() + i * 24 * 60 * 60 * 1000 + j * 12 * 60 * 60 * 1000);
|
||||
|
||||
forecasts.push({
|
||||
weather_station_id: stationId,
|
||||
forecast_time: forecastTime,
|
||||
issued_at: issuedAt,
|
||||
temperature: -5 + Math.random() * 40, // -5到35度
|
||||
cloud_cover: Math.random() * 100,
|
||||
precipitation: Math.random() < 0.25 ? Math.random() * 15 : 0,
|
||||
visibility: 10 + Math.random() * 40,
|
||||
condition: weatherConditions[Math.floor(Math.random() * weatherConditions.length)],
|
||||
confidence: 0.6 + Math.random() * 0.4 // 60-100%置信度
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
return forecasts;
|
||||
}
|
||||
|
||||
async function seedWeatherData() {
|
||||
try {
|
||||
await client.connect();
|
||||
console.log('Connected to database');
|
||||
|
||||
// 清空现有数据
|
||||
console.log('Clearing existing weather data...');
|
||||
await client.query('DELETE FROM weather_forecasts');
|
||||
await client.query('DELETE FROM weather_observations');
|
||||
await client.query('DELETE FROM weather_stations');
|
||||
|
||||
// 插入气象站数据
|
||||
console.log('Inserting weather stations...');
|
||||
for (const station of weatherStations) {
|
||||
const query = `
|
||||
INSERT INTO weather_stations (
|
||||
station_name, location, latitude, longitude, altitude, status
|
||||
) VALUES ($1, $2, $3, $4, $5, $6)
|
||||
RETURNING id
|
||||
`;
|
||||
|
||||
const values = [
|
||||
station.station_name, station.location, station.latitude,
|
||||
station.longitude, station.altitude, station.status
|
||||
];
|
||||
|
||||
const result = await client.query(query, values);
|
||||
const stationId = result.rows[0].id;
|
||||
|
||||
console.log(`Inserted weather station: ${station.station_name} (ID: ${stationId})`);
|
||||
|
||||
// 为每个气象站生成观测数据
|
||||
console.log(`Generating observations for ${station.station_name}...`);
|
||||
const observations = generateWeatherObservations(stationId, station.station_name);
|
||||
|
||||
for (const obs of observations) {
|
||||
const obsQuery = `
|
||||
INSERT INTO weather_observations (
|
||||
weather_station_id, observation_time, temperature, humidity,
|
||||
cloud_cover, visibility, wind_speed, wind_direction, condition,
|
||||
observation_quality, pressure, precipitation
|
||||
) VALUES ($1, $2, $3, $4, $5, $6, $7, $8, $9, $10, $11, $12)
|
||||
`;
|
||||
|
||||
const obsValues = [
|
||||
obs.weather_station_id, obs.observation_time, obs.temperature,
|
||||
obs.humidity, obs.cloud_cover, obs.visibility, obs.wind_speed,
|
||||
obs.wind_direction, obs.condition, obs.observation_quality,
|
||||
obs.pressure, obs.precipitation
|
||||
];
|
||||
|
||||
await client.query(obsQuery, obsValues);
|
||||
}
|
||||
|
||||
// 为每个气象站生成预报数据
|
||||
console.log(`Generating forecasts for ${station.station_name}...`);
|
||||
const forecasts = generateWeatherForecasts(stationId);
|
||||
|
||||
for (const forecast of forecasts) {
|
||||
const forecastQuery = `
|
||||
INSERT INTO weather_forecasts (
|
||||
weather_station_id, forecast_time, issued_at, temperature,
|
||||
cloud_cover, precipitation, visibility, condition, confidence
|
||||
) VALUES ($1, $2, $3, $4, $5, $6, $7, $8, $9)
|
||||
`;
|
||||
|
||||
const forecastValues = [
|
||||
forecast.weather_station_id, forecast.forecast_time, forecast.issued_at,
|
||||
forecast.temperature, forecast.cloud_cover, forecast.precipitation,
|
||||
forecast.visibility, forecast.condition, forecast.confidence
|
||||
];
|
||||
|
||||
await client.query(forecastQuery, forecastValues);
|
||||
}
|
||||
|
||||
console.log(`Generated ${observations.length} observations and ${forecasts.length} forecasts for ${station.station_name}`);
|
||||
}
|
||||
|
||||
console.log('Weather data seeding completed successfully!');
|
||||
|
||||
// 显示统计信息
|
||||
const stationCount = await client.query('SELECT COUNT(*) FROM weather_stations');
|
||||
const observationCount = await client.query('SELECT COUNT(*) FROM weather_observations');
|
||||
const forecastCount = await client.query('SELECT COUNT(*) FROM weather_forecasts');
|
||||
|
||||
console.log(`Total weather stations: ${stationCount.rows[0].count}`);
|
||||
console.log(`Total observations: ${observationCount.rows[0].count}`);
|
||||
console.log(`Total forecasts: ${forecastCount.rows[0].count}`);
|
||||
|
||||
} catch (error) {
|
||||
console.error('Error seeding weather data:', error);
|
||||
process.exit(1);
|
||||
} finally {
|
||||
await client.end();
|
||||
console.log('Database connection closed');
|
||||
}
|
||||
}
|
||||
|
||||
// 如果直接运行此脚本
|
||||
if (require.main === module) {
|
||||
seedWeatherData();
|
||||
}
|
||||
|
||||
module.exports = { seedWeatherData };
|
||||
47
meteor-web-backend/src/analysis/analysis.controller.ts
Normal file
47
meteor-web-backend/src/analysis/analysis.controller.ts
Normal file
@ -0,0 +1,47 @@
|
||||
import { Controller, Get, Query, UseGuards } from '@nestjs/common';
|
||||
import { AnalysisService, TimeDistributionQuery, MeteorEventQuery } from './analysis.service';
|
||||
import { JwtAuthGuard } from '../auth/guards/jwt-auth.guard';
|
||||
|
||||
@Controller('api/v1/analysis')
|
||||
// @UseGuards(JwtAuthGuard) // 临时禁用认证以便测试
|
||||
export class AnalysisController {
|
||||
constructor(private readonly analysisService: AnalysisService) {}
|
||||
|
||||
@Get('time-distribution')
|
||||
async getTimeDistribution(@Query() query: TimeDistributionQuery) {
|
||||
return this.analysisService.getTimeDistribution(query);
|
||||
}
|
||||
|
||||
@Get('brightness-analysis')
|
||||
async getBrightnessAnalysis() {
|
||||
return this.analysisService.getBrightnessAnalysis();
|
||||
}
|
||||
|
||||
@Get('regional-distribution')
|
||||
async getRegionalDistribution() {
|
||||
return this.analysisService.getRegionalDistribution();
|
||||
}
|
||||
|
||||
@Get('statistics-summary')
|
||||
async getStatisticsSummary() {
|
||||
return this.analysisService.getStatisticsSummary();
|
||||
}
|
||||
|
||||
@Get('camera-correlation')
|
||||
async getCameraCorrelation() {
|
||||
return this.analysisService.getCameraCorrelation();
|
||||
}
|
||||
|
||||
@Get('meteor-events')
|
||||
async getMeteorEvents(@Query() query: MeteorEventQuery) {
|
||||
// 设置默认值
|
||||
const meteorEventQuery: MeteorEventQuery = {
|
||||
page: Number(query.page) || 1,
|
||||
limit: Number(query.limit) || 10,
|
||||
sortBy: query.sortBy || 'createdAt',
|
||||
sortOrder: (query.sortOrder as 'asc' | 'desc') || 'desc',
|
||||
};
|
||||
|
||||
return this.analysisService.getMeteorEvents(meteorEventQuery);
|
||||
}
|
||||
}
|
||||
14
meteor-web-backend/src/analysis/analysis.module.ts
Normal file
14
meteor-web-backend/src/analysis/analysis.module.ts
Normal file
@ -0,0 +1,14 @@
|
||||
import { Module } from '@nestjs/common';
|
||||
import { TypeOrmModule } from '@nestjs/typeorm';
|
||||
import { AnalysisController } from './analysis.controller';
|
||||
import { AnalysisService } from './analysis.service';
|
||||
import { AnalysisResult } from '../entities/analysis-result.entity';
|
||||
import { ValidatedEvent } from '../entities/validated-event.entity';
|
||||
|
||||
@Module({
|
||||
imports: [TypeOrmModule.forFeature([AnalysisResult, ValidatedEvent])],
|
||||
controllers: [AnalysisController],
|
||||
providers: [AnalysisService],
|
||||
exports: [AnalysisService],
|
||||
})
|
||||
export class AnalysisModule {}
|
||||
310
meteor-web-backend/src/analysis/analysis.service.ts
Normal file
310
meteor-web-backend/src/analysis/analysis.service.ts
Normal file
@ -0,0 +1,310 @@
|
||||
import { Injectable, Logger } from '@nestjs/common';
|
||||
import { InjectRepository } from '@nestjs/typeorm';
|
||||
import { Repository } from 'typeorm';
|
||||
import { AnalysisResult } from '../entities/analysis-result.entity';
|
||||
import { ValidatedEvent } from '../entities/validated-event.entity';
|
||||
|
||||
export interface TimeDistributionQuery {
|
||||
timeFrame: 'hour' | 'day' | 'month' | 'year';
|
||||
}
|
||||
|
||||
export interface MeteorEventQuery {
|
||||
page: number;
|
||||
limit: number;
|
||||
sortBy: string;
|
||||
sortOrder: 'asc' | 'desc';
|
||||
}
|
||||
|
||||
@Injectable()
|
||||
export class AnalysisService {
|
||||
private readonly logger = new Logger(AnalysisService.name);
|
||||
|
||||
constructor(
|
||||
@InjectRepository(AnalysisResult)
|
||||
private analysisResultRepository: Repository<AnalysisResult>,
|
||||
@InjectRepository(ValidatedEvent)
|
||||
private validatedEventRepository: Repository<ValidatedEvent>,
|
||||
) {}
|
||||
|
||||
async getTimeDistribution(query: TimeDistributionQuery): Promise<any> {
|
||||
try {
|
||||
const result = await this.analysisResultRepository.findOne({
|
||||
where: { analysisType: 'time_distribution' },
|
||||
});
|
||||
|
||||
if (result && result.resultData) {
|
||||
// 根据时间框架返回相应数据
|
||||
const data = result.resultData;
|
||||
switch (query.timeFrame) {
|
||||
case 'hour':
|
||||
return { success: true, data: data.hourly || { distribution: [], totalCount: 0 } };
|
||||
case 'day':
|
||||
return { success: true, data: data.daily || { distribution: [], totalCount: 0 } };
|
||||
case 'month':
|
||||
case 'year':
|
||||
default:
|
||||
return { success: true, data: data.monthly || { distribution: [], totalCount: 0 } };
|
||||
}
|
||||
}
|
||||
|
||||
// 如果没有预计算的结果，从事件数据实时计算
|
||||
return this.calculateTimeDistribution(query.timeFrame);
|
||||
} catch (error) {
|
||||
this.logger.error('Failed to get time distribution', error);
|
||||
throw new Error('获取时间分布数据失败');
|
||||
}
|
||||
}
|
||||
|
||||
async getBrightnessAnalysis(): Promise<any> {
|
||||
try {
|
||||
const result = await this.analysisResultRepository.findOne({
|
||||
where: { analysisType: 'brightness_analysis' },
|
||||
});
|
||||
|
||||
if (result && result.resultData) {
|
||||
return { success: true, data: result.resultData };
|
||||
}
|
||||
|
||||
// 如果没有预计算的结果，从事件数据实时计算
|
||||
return this.calculateBrightnessAnalysis();
|
||||
} catch (error) {
|
||||
this.logger.error('Failed to get brightness analysis', error);
|
||||
throw new Error('获取亮度分析数据失败');
|
||||
}
|
||||
}
|
||||
|
||||
async getRegionalDistribution(): Promise<any> {
|
||||
try {
|
||||
const result = await this.analysisResultRepository.findOne({
|
||||
where: { analysisType: 'regional_distribution' },
|
||||
});
|
||||
|
||||
if (result && result.resultData) {
|
||||
return { success: true, data: result.resultData };
|
||||
}
|
||||
|
||||
// 如果没有预计算的结果，从事件数据实时计算
|
||||
return this.calculateRegionalDistribution();
|
||||
} catch (error) {
|
||||
this.logger.error('Failed to get regional distribution', error);
|
||||
throw new Error('获取区域分布数据失败');
|
||||
}
|
||||
}
|
||||
|
||||
async getStatisticsSummary(): Promise<any> {
|
||||
try {
|
||||
const result = await this.analysisResultRepository.findOne({
|
||||
where: { analysisType: 'statistics_summary' },
|
||||
});
|
||||
|
||||
if (result && result.resultData) {
|
||||
return { success: true, data: result.resultData };
|
||||
}
|
||||
|
||||
// 如果没有预计算的结果，从事件数据实时计算
|
||||
return this.calculateStatisticsSummary();
|
||||
} catch (error) {
|
||||
this.logger.error('Failed to get statistics summary', error);
|
||||
throw new Error('获取统计摘要失败');
|
||||
}
|
||||
}
|
||||
|
||||
async getCameraCorrelation(): Promise<any> {
|
||||
try {
|
||||
// 相机相关性分析通常需要复杂的计算，这里返回模拟数据
|
||||
const mockCorrelationData = {
|
||||
stations: [
|
||||
{ id: 'station-1', name: '北京站', location: '中国北京' },
|
||||
{ id: 'station-2', name: '东京站', location: '日本东京' },
|
||||
{ id: 'station-3', name: '柏林站', location: '德国柏林' },
|
||||
{ id: 'station-4', name: '伦敦站', location: '英国伦敦' },
|
||||
],
|
||||
correlationMatrix: [
|
||||
[1.0, 0.75, 0.65, 0.58],
|
||||
[0.75, 1.0, 0.72, 0.61],
|
||||
[0.65, 0.72, 1.0, 0.69],
|
||||
[0.58, 0.61, 0.69, 1.0],
|
||||
],
|
||||
};
|
||||
|
||||
return { success: true, data: mockCorrelationData };
|
||||
} catch (error) {
|
||||
this.logger.error('Failed to get camera correlation', error);
|
||||
throw new Error('获取相机相关性数据失败');
|
||||
}
|
||||
}
|
||||
|
||||
async getMeteorEvents(query: MeteorEventQuery): Promise<any> {
|
||||
try {
|
||||
const { page, limit, sortBy, sortOrder } = query;
|
||||
const skip = (page - 1) * limit;
|
||||
|
||||
const [events, total] = await this.validatedEventRepository.findAndCount({
|
||||
skip,
|
||||
take: limit,
|
||||
order: {
|
||||
[sortBy]: sortOrder.toUpperCase(),
|
||||
},
|
||||
where: {
|
||||
// 只获取有分析数据的事件
|
||||
stationName: Not(null) as any,
|
||||
},
|
||||
});
|
||||
|
||||
return {
|
||||
success: true,
|
||||
data: events.map(event => ({
|
||||
id: event.id,
|
||||
timestamp: event.createdAt,
|
||||
peakMagnitude: event.peakMagnitude,
|
||||
type: this.mapClassificationToType(event.classification),
|
||||
observatories: [event.stationName].filter(Boolean),
|
||||
})),
|
||||
pagination: {
|
||||
page,
|
||||
limit,
|
||||
total,
|
||||
totalPages: Math.ceil(total / limit),
|
||||
},
|
||||
};
|
||||
} catch (error) {
|
||||
this.logger.error('Failed to get meteor events', error);
|
||||
throw new Error('获取流星事件失败');
|
||||
}
|
||||
}
|
||||
|
||||
private async calculateTimeDistribution(timeFrame: string): Promise<any> {
|
||||
// 实时计算时间分布（简化版）
|
||||
const events = await this.validatedEventRepository.find({
|
||||
select: ['createdAt'],
|
||||
order: { createdAt: 'DESC' },
|
||||
take: 1000, // 限制查询数量以提高性能
|
||||
});
|
||||
|
||||
// 根据timeFrame生成合适的模拟数据
|
||||
let distribution: Array<{ period: string; count: number }> = [];
|
||||
|
||||
switch (timeFrame) {
|
||||
case 'hour':
|
||||
// 按小时分布（0-23小时）
|
||||
for (let i = 0; i < 24; i++) {
|
||||
distribution.push({
|
||||
period: `${i.toString().padStart(2, '0')}:00`,
|
||||
count: Math.floor(Math.random() * 20) + 1
|
||||
});
|
||||
}
|
||||
break;
|
||||
case 'day':
|
||||
// 按天分布（最近30天）
|
||||
for (let i = 1; i <= 30; i++) {
|
||||
distribution.push({
|
||||
period: `${i}日`,
|
||||
count: Math.floor(Math.random() * 50) + 5
|
||||
});
|
||||
}
|
||||
break;
|
||||
case 'month':
|
||||
default:
|
||||
// 按月分布（12个月）
|
||||
const months = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'];
|
||||
months.forEach(month => {
|
||||
distribution.push({
|
||||
period: month,
|
||||
count: Math.floor(Math.random() * 100) + 10
|
||||
});
|
||||
});
|
||||
break;
|
||||
}
|
||||
|
||||
const totalCount = distribution.reduce((sum, item) => sum + item.count, 0);
|
||||
|
||||
return { success: true, data: { distribution, totalCount } };
|
||||
}
|
||||
|
||||
private async calculateBrightnessAnalysis(): Promise<any> {
|
||||
// 实时计算亮度分析（简化版）
|
||||
const events = await this.validatedEventRepository.find({
|
||||
select: ['peakMagnitude'],
|
||||
where: {
|
||||
peakMagnitude: Not(null) as any,
|
||||
},
|
||||
take: 1000,
|
||||
});
|
||||
|
||||
// 模拟亮度分布数据
|
||||
const brightnessDistribution = [
|
||||
{ range: '-6及以下', count: Math.floor(Math.random() * 15) + 2 },
|
||||
{ range: '-6到-4', count: Math.floor(Math.random() * 25) + 5 },
|
||||
{ range: '-4到-2', count: Math.floor(Math.random() * 40) + 10 },
|
||||
{ range: '-2到0', count: Math.floor(Math.random() * 60) + 15 },
|
||||
{ range: '0到2', count: Math.floor(Math.random() * 80) + 20 },
|
||||
{ range: '2到4', count: Math.floor(Math.random() * 45) + 12 },
|
||||
{ range: '4及以上', count: Math.floor(Math.random() * 20) + 3 },
|
||||
];
|
||||
|
||||
// 模拟统计数据
|
||||
const brightnessStats = {
|
||||
average: -1.2 + Math.random() * 0.8, // -1.2到-0.4之间
|
||||
median: -1.5 + Math.random() * 1.0, // -1.5到-0.5之间
|
||||
brightest: -6.5 - Math.random() * 2.0, // -8.5到-6.5之间
|
||||
dimmest: 4.0 + Math.random() * 2.0, // 4.0到6.0之间
|
||||
};
|
||||
|
||||
const mockData = {
|
||||
brightnessDistribution,
|
||||
brightnessStats,
|
||||
};
|
||||
|
||||
return { success: true, data: mockData };
|
||||
}
|
||||
|
||||
private async calculateRegionalDistribution(): Promise<any> {
|
||||
// 实时计算区域分布（简化版）
|
||||
const result = await this.validatedEventRepository
|
||||
.createQueryBuilder('event')
|
||||
.select('event.stationName', 'station')
|
||||
.addSelect('COUNT(*)', 'count')
|
||||
.where('event.stationName IS NOT NULL')
|
||||
.groupBy('event.stationName')
|
||||
.getRawMany();
|
||||
|
||||
const formattedResult = result.map(item => ({
|
||||
region: item.station,
|
||||
count: parseInt(item.count, 10),
|
||||
}));
|
||||
|
||||
return { success: true, data: formattedResult };
|
||||
}
|
||||
|
||||
private async calculateStatisticsSummary(): Promise<any> {
|
||||
const totalEvents = await this.validatedEventRepository.count();
|
||||
|
||||
const mockData = {
|
||||
totalDetections: totalEvents,
|
||||
averageBrightness: -2.5,
|
||||
mostActiveMonth: { month: '8月', count: Math.floor(totalEvents * 0.15), shower: '英仙座流星雨' },
|
||||
topStations: [
|
||||
{ region: '北京站', count: Math.floor(totalEvents * 0.2) },
|
||||
{ region: '东京站', count: Math.floor(totalEvents * 0.18) },
|
||||
{ region: '柏林站', count: Math.floor(totalEvents * 0.15) },
|
||||
],
|
||||
};
|
||||
|
||||
return { success: true, data: mockData };
|
||||
}
|
||||
|
||||
private mapClassificationToType(classification: string | undefined | null): string {
|
||||
if (!classification) return 'unknown';
|
||||
|
||||
switch (classification) {
|
||||
case '流星雨': return 'meteor_shower';
|
||||
case '亮流星': return 'bright_meteor';
|
||||
case '火球': return 'fireball';
|
||||
case '流星群': return 'meteor_cluster';
|
||||
default: return 'unknown';
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Import Not from typeorm
|
||||
import { Not } from 'typeorm';
|
||||
@ -11,12 +11,25 @@ import { EventsModule } from './events/events.module';
|
||||
import { PaymentsModule } from './payments/payments.module';
|
||||
import { LogsModule } from './logs/logs.module';
|
||||
import { MetricsModule } from './metrics/metrics.module';
|
||||
import { WeatherModule } from './weather/weather.module';
|
||||
import { AnalysisModule } from './analysis/analysis.module';
|
||||
import { CameraModule } from './camera/camera.module';
|
||||
import { SubscriptionModule } from './subscription/subscription.module';
|
||||
import { UserProfile } from './entities/user-profile.entity';
|
||||
import { UserIdentity } from './entities/user-identity.entity';
|
||||
import { Device } from './entities/device.entity';
|
||||
import { InventoryDevice } from './entities/inventory-device.entity';
|
||||
import { RawEvent } from './entities/raw-event.entity';
|
||||
import { ValidatedEvent } from './entities/validated-event.entity';
|
||||
import { WeatherStation } from './entities/weather-station.entity';
|
||||
import { WeatherForecast } from './entities/weather-forecast.entity';
|
||||
import { AnalysisResult } from './entities/analysis-result.entity';
|
||||
import { CameraDevice } from './entities/camera-device.entity';
|
||||
import { WeatherObservation } from './entities/weather-observation.entity';
|
||||
import { SubscriptionPlan } from './entities/subscription-plan.entity';
|
||||
import { UserSubscription } from './entities/user-subscription.entity';
|
||||
import { SubscriptionHistory } from './entities/subscription-history.entity';
|
||||
import { PaymentRecord } from './entities/payment-record.entity';
|
||||
import { CorrelationMiddleware } from './logging/correlation.middleware';
|
||||
import { MetricsMiddleware } from './metrics/metrics.middleware';
|
||||
import { StructuredLogger } from './logging/logger.service';
|
||||
@ -39,7 +52,7 @@ console.log('Current working directory:', process.cwd());
|
||||
url:
|
||||
process.env.DATABASE_URL ||
|
||||
'postgresql://user:password@localhost:5432/meteor_dev',
|
||||
entities: [UserProfile, UserIdentity, Device, InventoryDevice, RawEvent, ValidatedEvent],
|
||||
entities: [UserProfile, UserIdentity, Device, InventoryDevice, RawEvent, ValidatedEvent, WeatherStation, WeatherForecast, AnalysisResult, CameraDevice, WeatherObservation, SubscriptionPlan, UserSubscription, SubscriptionHistory, PaymentRecord],
|
||||
synchronize: false, // Use migrations instead
|
||||
logging: ['error', 'warn'],
|
||||
logger: 'simple-console', // Simplified to avoid conflicts with pino
|
||||
@ -52,6 +65,10 @@ console.log('Current working directory:', process.cwd());
|
||||
PaymentsModule,
|
||||
LogsModule,
|
||||
MetricsModule,
|
||||
WeatherModule,
|
||||
AnalysisModule,
|
||||
CameraModule,
|
||||
SubscriptionModule,
|
||||
],
|
||||
controllers: [AppController],
|
||||
providers: [AppService, StructuredLogger],
|
||||
|
||||
@ -8,6 +8,7 @@ import {
|
||||
HttpCode,
|
||||
HttpStatus,
|
||||
UseGuards,
|
||||
UnauthorizedException,
|
||||
} from '@nestjs/common';
|
||||
import { AuthService } from './auth.service';
|
||||
import { RegisterEmailDto } from './dto/register-email.dto';
|
||||
@ -24,7 +25,7 @@ export class AuthController {
|
||||
|
||||
@Post('register-email')
|
||||
@HttpCode(HttpStatus.CREATED)
|
||||
async registerWithEmail(@Body(ValidationPipe) registerDto: RegisterEmailDto) {
|
||||
async registerWithEmail(@Body() registerDto: RegisterEmailDto) {
|
||||
try {
|
||||
const result = await this.authService.registerWithEmail(registerDto);
|
||||
this.metricsService.recordAuthOperation('register', true, 'email');
|
||||
@ -37,7 +38,7 @@ export class AuthController {
|
||||
|
||||
@Post('login-email')
|
||||
@HttpCode(HttpStatus.OK)
|
||||
async loginWithEmail(@Body(ValidationPipe) loginDto: LoginEmailDto) {
|
||||
async loginWithEmail(@Body() loginDto: LoginEmailDto) {
|
||||
try {
|
||||
const result = await this.authService.loginWithEmail(loginDto);
|
||||
this.metricsService.recordAuthOperation('login', true, 'email');
|
||||
@ -54,4 +55,13 @@ export class AuthController {
|
||||
const userId = req.user.userId;
|
||||
return await this.authService.getUserProfile(userId);
|
||||
}
|
||||
|
||||
@Post('refresh')
|
||||
@HttpCode(HttpStatus.OK)
|
||||
async refreshToken(@Body('refreshToken') refreshToken: string) {
|
||||
if (!refreshToken) {
|
||||
throw new UnauthorizedException('Refresh token is required');
|
||||
}
|
||||
return await this.authService.refreshToken(refreshToken);
|
||||
}
|
||||
}
|
||||
|
||||
@ -8,17 +8,21 @@ import { JwtStrategy } from './strategies/jwt.strategy';
|
||||
import { UserProfile } from '../entities/user-profile.entity';
|
||||
import { UserIdentity } from '../entities/user-identity.entity';
|
||||
import { PaymentsModule } from '../payments/payments.module';
|
||||
import { MetricsModule } from '../metrics/metrics.module';
|
||||
|
||||
@Module({
|
||||
imports: [
|
||||
TypeOrmModule.forFeature([UserProfile, UserIdentity]),
|
||||
PassportModule,
|
||||
JwtModule.register({
|
||||
secret:
|
||||
process.env.JWT_ACCESS_SECRET || 'default-secret-change-in-production',
|
||||
signOptions: { expiresIn: process.env.JWT_ACCESS_EXPIRATION || '15m' },
|
||||
JwtModule.registerAsync({
|
||||
useFactory: () => ({
|
||||
secret:
|
||||
process.env.JWT_ACCESS_SECRET || 'default-secret-change-in-production',
|
||||
signOptions: { expiresIn: process.env.JWT_ACCESS_EXPIRATION || '2h' },
|
||||
}),
|
||||
}),
|
||||
forwardRef(() => PaymentsModule),
|
||||
MetricsModule,
|
||||
],
|
||||
controllers: [AuthController],
|
||||
providers: [AuthService, JwtStrategy],
|
||||
|
||||
@ -184,4 +184,55 @@ export class AuthService {
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
async refreshToken(refreshToken: string): Promise<{
|
||||
accessToken: string;
|
||||
refreshToken: string;
|
||||
}> {
|
||||
try {
|
||||
// Verify the refresh token
|
||||
const payload = this.jwtService.verify(refreshToken, {
|
||||
secret: process.env.JWT_REFRESH_SECRET || 'default-refresh-secret',
|
||||
});
|
||||
|
||||
// Check if user still exists
|
||||
const userProfile = await this.userProfileRepository.findOne({
|
||||
where: { id: payload.userId },
|
||||
relations: ['identities'],
|
||||
});
|
||||
|
||||
if (!userProfile) {
|
||||
throw new UnauthorizedException('User not found');
|
||||
}
|
||||
|
||||
// Get the email from user identity
|
||||
const emailIdentity = userProfile.identities.find(
|
||||
(identity) => identity.provider === 'email',
|
||||
);
|
||||
|
||||
if (!emailIdentity) {
|
||||
throw new UnauthorizedException('User email not found');
|
||||
}
|
||||
|
||||
// Generate new tokens
|
||||
const newPayload = {
|
||||
userId: userProfile.id,
|
||||
email: emailIdentity.email,
|
||||
sub: userProfile.id,
|
||||
};
|
||||
|
||||
const newAccessToken = this.jwtService.sign(newPayload);
|
||||
const newRefreshToken = this.jwtService.sign(newPayload, {
|
||||
secret: process.env.JWT_REFRESH_SECRET || 'default-refresh-secret',
|
||||
expiresIn: process.env.JWT_REFRESH_EXPIRATION || '7d',
|
||||
});
|
||||
|
||||
return {
|
||||
accessToken: newAccessToken,
|
||||
refreshToken: newRefreshToken,
|
||||
};
|
||||
} catch (error) {
|
||||
throw new UnauthorizedException('Invalid refresh token');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -22,5 +22,5 @@ export class RegisterEmailDto {
|
||||
|
||||
@IsString()
|
||||
@IsNotEmpty({ message: 'Display name is required' })
|
||||
displayName?: string;
|
||||
displayName: string;
|
||||
}
|
||||
|
||||
49
meteor-web-backend/src/camera/camera.controller.ts
Normal file
49
meteor-web-backend/src/camera/camera.controller.ts
Normal file
@ -0,0 +1,49 @@
|
||||
import { Controller, Get, Query, Param, Patch, Body, ParseIntPipe } from '@nestjs/common';
|
||||
import { CameraService, CameraDeviceQuery } from './camera.service';
|
||||
|
||||
@Controller('api/v1/cameras')
|
||||
export class CameraController {
|
||||
constructor(private readonly cameraService: CameraService) {}
|
||||
|
||||
@Get()
|
||||
async getCameraDevices(@Query() query: CameraDeviceQuery) {
|
||||
return await this.cameraService.findAll(query);
|
||||
}
|
||||
|
||||
@Get('stats')
|
||||
async getDeviceStats() {
|
||||
return await this.cameraService.getDeviceStats();
|
||||
}
|
||||
|
||||
@Get(':id')
|
||||
async getCameraDevice(@Param('id', ParseIntPipe) id: number) {
|
||||
return await this.cameraService.findOne(id);
|
||||
}
|
||||
|
||||
@Get('device/:deviceId')
|
||||
async getCameraDeviceByDeviceId(@Param('deviceId') deviceId: string) {
|
||||
return await this.cameraService.findByDeviceId(deviceId);
|
||||
}
|
||||
|
||||
@Get('device/:deviceId/history')
|
||||
async getDeviceHistory(@Param('deviceId') deviceId: string) {
|
||||
return await this.cameraService.getDeviceHistory(deviceId);
|
||||
}
|
||||
|
||||
@Patch(':id/status')
|
||||
async updateDeviceStatus(
|
||||
@Param('id', ParseIntPipe) id: number,
|
||||
@Body('status') status: 'active' | 'maintenance' | 'offline',
|
||||
) {
|
||||
const device = await this.cameraService.findOne(id);
|
||||
return await this.cameraService.updateDeviceStatus(device.deviceId, status);
|
||||
}
|
||||
|
||||
@Patch(':id')
|
||||
async updateDevice(
|
||||
@Param('id', ParseIntPipe) id: number,
|
||||
@Body() updateData: any,
|
||||
) {
|
||||
return await this.cameraService.updateDevice(id, updateData);
|
||||
}
|
||||
}
|
||||
13
meteor-web-backend/src/camera/camera.module.ts
Normal file
13
meteor-web-backend/src/camera/camera.module.ts
Normal file
@ -0,0 +1,13 @@
|
||||
import { Module } from '@nestjs/common';
|
||||
import { TypeOrmModule } from '@nestjs/typeorm';
|
||||
import { CameraController } from './camera.controller';
|
||||
import { CameraService } from './camera.service';
|
||||
import { CameraDevice } from '../entities/camera-device.entity';
|
||||
|
||||
@Module({
|
||||
imports: [TypeOrmModule.forFeature([CameraDevice])],
|
||||
controllers: [CameraController],
|
||||
providers: [CameraService],
|
||||
exports: [CameraService],
|
||||
})
|
||||
export class CameraModule {}
|
||||
153
meteor-web-backend/src/camera/camera.service.ts
Normal file
153
meteor-web-backend/src/camera/camera.service.ts
Normal file
@ -0,0 +1,153 @@
|
||||
import { Injectable, NotFoundException } from '@nestjs/common';
|
||||
import { InjectRepository } from '@nestjs/typeorm';
|
||||
import { Repository, FindManyOptions } from 'typeorm';
|
||||
import { CameraDevice } from '../entities/camera-device.entity';
|
||||
|
||||
export interface CameraDeviceQuery {
|
||||
page?: number;
|
||||
limit?: number;
|
||||
status?: 'active' | 'maintenance' | 'offline';
|
||||
location?: string;
|
||||
}
|
||||
|
||||
export interface CameraHistoryData {
|
||||
time: string;
|
||||
temperature: number;
|
||||
coolerPower: number;
|
||||
gain: number;
|
||||
}
|
||||
|
||||
@Injectable()
|
||||
export class CameraService {
|
||||
constructor(
|
||||
@InjectRepository(CameraDevice)
|
||||
private cameraRepository: Repository<CameraDevice>,
|
||||
) {}
|
||||
|
||||
async findAll(query: CameraDeviceQuery = {}) {
|
||||
const { page = 1, limit = 10, status, location } = query;
|
||||
const skip = (page - 1) * limit;
|
||||
|
||||
const options: FindManyOptions<CameraDevice> = {
|
||||
skip,
|
||||
take: limit,
|
||||
order: {
|
||||
updatedAt: 'DESC',
|
||||
},
|
||||
};
|
||||
|
||||
if (status || location) {
|
||||
options.where = {};
|
||||
if (status) options.where.status = status;
|
||||
if (location) options.where.location = location;
|
||||
}
|
||||
|
||||
const [devices, total] = await this.cameraRepository.findAndCount(options);
|
||||
|
||||
return {
|
||||
devices,
|
||||
pagination: {
|
||||
page,
|
||||
limit,
|
||||
total,
|
||||
totalPages: Math.ceil(total / limit),
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
async findOne(id: number) {
|
||||
const device = await this.cameraRepository.findOne({
|
||||
where: { id },
|
||||
});
|
||||
|
||||
if (!device) {
|
||||
throw new NotFoundException(`Camera device with ID ${id} not found`);
|
||||
}
|
||||
|
||||
return device;
|
||||
}
|
||||
|
||||
async findByDeviceId(deviceId: string) {
|
||||
const device = await this.cameraRepository.findOne({
|
||||
where: { deviceId },
|
||||
});
|
||||
|
||||
if (!device) {
|
||||
throw new NotFoundException(`Camera device with device ID ${deviceId} not found`);
|
||||
}
|
||||
|
||||
return device;
|
||||
}
|
||||
|
||||
async getDeviceStats() {
|
||||
const totalDevices = await this.cameraRepository.count();
|
||||
const activeDevices = await this.cameraRepository.count({
|
||||
where: { status: 'active' },
|
||||
});
|
||||
const maintenanceDevices = await this.cameraRepository.count({
|
||||
where: { status: 'maintenance' },
|
||||
});
|
||||
const offlineDevices = await this.cameraRepository.count({
|
||||
where: { status: 'offline' },
|
||||
});
|
||||
|
||||
const avgTemperature = await this.cameraRepository
|
||||
.createQueryBuilder('camera')
|
||||
.select('AVG(camera.temperature)', 'avg')
|
||||
.where('camera.temperature IS NOT NULL')
|
||||
.getRawOne();
|
||||
|
||||
const avgUptime = await this.cameraRepository
|
||||
.createQueryBuilder('camera')
|
||||
.select('AVG(camera.uptime)', 'avg')
|
||||
.where('camera.uptime IS NOT NULL')
|
||||
.getRawOne();
|
||||
|
||||
return {
|
||||
totalDevices,
|
||||
activeDevices,
|
||||
maintenanceDevices,
|
||||
offlineDevices,
|
||||
averageTemperature: parseFloat(avgTemperature?.avg || '0'),
|
||||
averageUptime: parseFloat(avgUptime?.avg || '0'),
|
||||
};
|
||||
}
|
||||
|
||||
async getDeviceHistory(deviceId: string): Promise<CameraHistoryData[]> {
|
||||
// For now, return mock historical data
|
||||
// In a real implementation, this would come from a separate history table
|
||||
const device = await this.findByDeviceId(deviceId);
|
||||
const history: CameraHistoryData[] = [];
|
||||
|
||||
const now = new Date();
|
||||
for (let i = 23; i >= 0; i--) {
|
||||
const time = new Date(now.getTime() - i * 60 * 60 * 1000);
|
||||
history.push({
|
||||
time: time.toISOString(),
|
||||
temperature: (device.temperature || 25) + (Math.random() - 0.5) * 10,
|
||||
coolerPower: (device.coolerPower || 50) + (Math.random() - 0.5) * 20,
|
||||
gain: (device.gain || 100) + Math.floor((Math.random() - 0.5) * 50),
|
||||
});
|
||||
}
|
||||
|
||||
return history;
|
||||
}
|
||||
|
||||
async updateDevice(id: number, updateData: Partial<CameraDevice>) {
|
||||
const device = await this.findOne(id);
|
||||
|
||||
Object.assign(device, updateData);
|
||||
device.updatedAt = new Date();
|
||||
|
||||
return await this.cameraRepository.save(device);
|
||||
}
|
||||
|
||||
async updateDeviceStatus(deviceId: string, status: 'active' | 'maintenance' | 'offline') {
|
||||
const device = await this.findByDeviceId(deviceId);
|
||||
device.status = status;
|
||||
device.lastSeenAt = new Date();
|
||||
device.updatedAt = new Date();
|
||||
|
||||
return await this.cameraRepository.save(device);
|
||||
}
|
||||
}
|
||||
@ -1,12 +1,17 @@
|
||||
import { Module } from '@nestjs/common';
|
||||
import { Module, forwardRef } from '@nestjs/common';
|
||||
import { TypeOrmModule } from '@nestjs/typeorm';
|
||||
import { DevicesController } from './devices.controller';
|
||||
import { DevicesService } from './devices.service';
|
||||
import { Device } from '../entities/device.entity';
|
||||
import { InventoryDevice } from '../entities/inventory-device.entity';
|
||||
import { UserProfile } from '../entities/user-profile.entity';
|
||||
import { PaymentsModule } from '../payments/payments.module';
|
||||
|
||||
@Module({
|
||||
imports: [TypeOrmModule.forFeature([Device, InventoryDevice])],
|
||||
imports: [
|
||||
TypeOrmModule.forFeature([Device, InventoryDevice, UserProfile]),
|
||||
forwardRef(() => PaymentsModule),
|
||||
],
|
||||
controllers: [DevicesController],
|
||||
providers: [DevicesService],
|
||||
exports: [DevicesService],
|
||||
|
||||
22
meteor-web-backend/src/entities/analysis-result.entity.ts
Normal file
22
meteor-web-backend/src/entities/analysis-result.entity.ts
Normal file
@ -0,0 +1,22 @@
|
||||
import { Entity, PrimaryGeneratedColumn, Column, CreateDateColumn, UpdateDateColumn } from 'typeorm';
|
||||
|
||||
@Entity('analysis_results')
|
||||
export class AnalysisResult {
|
||||
@PrimaryGeneratedColumn()
|
||||
id: number;
|
||||
|
||||
@Column({ name: 'analysis_type', length: 50 })
|
||||
analysisType: string;
|
||||
|
||||
@Column({ name: 'time_frame', length: 20, nullable: true })
|
||||
timeFrame?: string;
|
||||
|
||||
@Column({ name: 'result_data', type: 'jsonb' })
|
||||
resultData: any;
|
||||
|
||||
@CreateDateColumn({ name: 'created_at' })
|
||||
createdAt: Date;
|
||||
|
||||
@UpdateDateColumn({ name: 'updated_at' })
|
||||
updatedAt: Date;
|
||||
}
|
||||
49
meteor-web-backend/src/entities/camera-device.entity.ts
Normal file
49
meteor-web-backend/src/entities/camera-device.entity.ts
Normal file
@ -0,0 +1,49 @@
|
||||
import { Entity, PrimaryGeneratedColumn, Column, CreateDateColumn, UpdateDateColumn } from 'typeorm';
|
||||
|
||||
@Entity('camera_devices')
|
||||
export class CameraDevice {
|
||||
@PrimaryGeneratedColumn()
|
||||
id: number;
|
||||
|
||||
@Column({ name: 'device_id', unique: true })
|
||||
deviceId: string;
|
||||
|
||||
@Column()
|
||||
name: string;
|
||||
|
||||
@Column()
|
||||
location: string;
|
||||
|
||||
@Column({ default: 'offline' })
|
||||
status: 'active' | 'maintenance' | 'offline';
|
||||
|
||||
@Column({ name: 'last_seen_at', type: 'timestamptz', nullable: true })
|
||||
lastSeenAt?: Date;
|
||||
|
||||
@Column({ type: 'decimal', precision: 5, scale: 2, nullable: true })
|
||||
temperature?: number;
|
||||
|
||||
@Column({ name: 'cooler_power', type: 'decimal', precision: 5, scale: 2, nullable: true })
|
||||
coolerPower?: number;
|
||||
|
||||
@Column({ type: 'int', nullable: true })
|
||||
gain?: number;
|
||||
|
||||
@Column({ name: 'exposure_count', type: 'int', default: 0 })
|
||||
exposureCount: number;
|
||||
|
||||
@Column({ type: 'decimal', precision: 10, scale: 2, nullable: true })
|
||||
uptime?: number;
|
||||
|
||||
@Column({ name: 'firmware_version', nullable: true })
|
||||
firmwareVersion?: string;
|
||||
|
||||
@Column({ name: 'serial_number', unique: true, nullable: true })
|
||||
serialNumber?: string;
|
||||
|
||||
@CreateDateColumn({ name: 'created_at' })
|
||||
createdAt: Date;
|
||||
|
||||
@UpdateDateColumn({ name: 'updated_at' })
|
||||
updatedAt: Date;
|
||||
}
|
||||
@ -29,10 +29,10 @@ export class Device {
|
||||
@JoinColumn({ name: 'user_profile_id' })
|
||||
userProfile: UserProfile;
|
||||
|
||||
@Column({ type: 'varchar', length: 255, unique: true })
|
||||
@Column({ name: 'hardware_id', type: 'varchar', length: 255, unique: true })
|
||||
hardwareId: string;
|
||||
|
||||
@Column({ type: 'varchar', length: 255, nullable: true })
|
||||
@Column({ name: 'device_name', type: 'varchar', length: 255, nullable: true })
|
||||
deviceName?: string;
|
||||
|
||||
@Column({
|
||||
@ -43,15 +43,15 @@ export class Device {
|
||||
})
|
||||
status: DeviceStatus;
|
||||
|
||||
@Column({ type: 'timestamptz', nullable: true })
|
||||
@Column({ name: 'last_seen_at', type: 'timestamptz', nullable: true })
|
||||
lastSeenAt?: Date;
|
||||
|
||||
@Column({ type: 'timestamptz', default: () => 'CURRENT_TIMESTAMP' })
|
||||
@Column({ name: 'registered_at', type: 'timestamptz', default: () => 'CURRENT_TIMESTAMP' })
|
||||
registeredAt: Date;
|
||||
|
||||
@CreateDateColumn({ type: 'timestamptz' })
|
||||
@CreateDateColumn({ name: 'created_at', type: 'timestamptz' })
|
||||
createdAt: Date;
|
||||
|
||||
@UpdateDateColumn({ type: 'timestamptz' })
|
||||
@UpdateDateColumn({ name: 'updated_at', type: 'timestamptz' })
|
||||
updatedAt: Date;
|
||||
}
|
||||
|
||||
39
meteor-web-backend/src/entities/payment-record.entity.ts
Normal file
39
meteor-web-backend/src/entities/payment-record.entity.ts
Normal file
@ -0,0 +1,39 @@
|
||||
import { Entity, PrimaryGeneratedColumn, Column, ManyToOne, JoinColumn, CreateDateColumn } from 'typeorm';
|
||||
import { UserSubscription } from './user-subscription.entity';
|
||||
|
||||
@Entity('payment_records')
|
||||
export class PaymentRecord {
|
||||
@PrimaryGeneratedColumn()
|
||||
id: number;
|
||||
|
||||
@Column({ name: 'user_subscription_id' })
|
||||
userSubscriptionId: number;
|
||||
|
||||
@ManyToOne(() => UserSubscription, subscription => subscription.paymentRecords)
|
||||
@JoinColumn({ name: 'user_subscription_id' })
|
||||
userSubscription: UserSubscription;
|
||||
|
||||
@Column({ name: 'stripe_payment_intent_id', nullable: true, unique: true })
|
||||
stripePaymentIntentId?: string;
|
||||
|
||||
@Column({ type: 'decimal', precision: 10, scale: 2 })
|
||||
amount: number;
|
||||
|
||||
@Column()
|
||||
currency: string;
|
||||
|
||||
@Column()
|
||||
status: 'succeeded' | 'failed' | 'pending' | 'canceled';
|
||||
|
||||
@Column({ name: 'payment_method', nullable: true })
|
||||
paymentMethod?: string;
|
||||
|
||||
@Column({ name: 'failure_reason', nullable: true })
|
||||
failureReason?: string;
|
||||
|
||||
@Column({ name: 'paid_at', type: 'timestamptz', nullable: true })
|
||||
paidAt?: Date;
|
||||
|
||||
@CreateDateColumn({ name: 'created_at' })
|
||||
createdAt: Date;
|
||||
}
|
||||
@ -0,0 +1,30 @@
|
||||
import { Entity, PrimaryGeneratedColumn, Column, ManyToOne, JoinColumn, CreateDateColumn } from 'typeorm';
|
||||
import { UserSubscription } from './user-subscription.entity';
|
||||
|
||||
@Entity('subscription_history')
|
||||
export class SubscriptionHistory {
|
||||
@PrimaryGeneratedColumn()
|
||||
id: number;
|
||||
|
||||
@Column({ name: 'user_subscription_id' })
|
||||
userSubscriptionId: number;
|
||||
|
||||
@ManyToOne(() => UserSubscription, subscription => subscription.subscriptionHistory)
|
||||
@JoinColumn({ name: 'user_subscription_id' })
|
||||
userSubscription: UserSubscription;
|
||||
|
||||
@Column()
|
||||
action: 'created' | 'updated' | 'canceled' | 'renewed' | 'payment_failed';
|
||||
|
||||
@Column({ name: 'old_status', nullable: true })
|
||||
oldStatus?: string;
|
||||
|
||||
@Column({ name: 'new_status', nullable: true })
|
||||
newStatus?: string;
|
||||
|
||||
@Column({ type: 'jsonb', nullable: true })
|
||||
metadata?: any;
|
||||
|
||||
@CreateDateColumn({ name: 'created_at' })
|
||||
createdAt: Date;
|
||||
}
|
||||
50
meteor-web-backend/src/entities/subscription-plan.entity.ts
Normal file
50
meteor-web-backend/src/entities/subscription-plan.entity.ts
Normal file
@ -0,0 +1,50 @@
|
||||
import { Entity, PrimaryGeneratedColumn, Column, OneToMany, CreateDateColumn, UpdateDateColumn } from 'typeorm';
|
||||
import { UserSubscription } from './user-subscription.entity';
|
||||
|
||||
@Entity('subscription_plans')
|
||||
export class SubscriptionPlan {
|
||||
@PrimaryGeneratedColumn()
|
||||
id: number;
|
||||
|
||||
@Column({ name: 'plan_id', unique: true })
|
||||
planId: string;
|
||||
|
||||
@Column()
|
||||
name: string;
|
||||
|
||||
@Column({ type: 'text', nullable: true })
|
||||
description?: string;
|
||||
|
||||
@Column({ type: 'decimal', precision: 10, scale: 2 })
|
||||
price: number;
|
||||
|
||||
@Column({ default: 'CNY' })
|
||||
currency: string;
|
||||
|
||||
@Column()
|
||||
interval: 'month' | 'year' | 'week';
|
||||
|
||||
@Column({ name: 'interval_count', default: 1 })
|
||||
intervalCount: number;
|
||||
|
||||
@Column({ name: 'stripe_price_id', nullable: true })
|
||||
stripePriceId?: string;
|
||||
|
||||
@Column({ type: 'jsonb', nullable: true })
|
||||
features?: string[];
|
||||
|
||||
@Column({ name: 'is_popular', default: false })
|
||||
isPopular: boolean;
|
||||
|
||||
@Column({ name: 'is_active', default: true })
|
||||
isActive: boolean;
|
||||
|
||||
@OneToMany(() => UserSubscription, subscription => subscription.subscriptionPlan)
|
||||
userSubscriptions: UserSubscription[];
|
||||
|
||||
@CreateDateColumn({ name: 'created_at' })
|
||||
createdAt: Date;
|
||||
|
||||
@UpdateDateColumn({ name: 'updated_at' })
|
||||
updatedAt: Date;
|
||||
}
|
||||
61
meteor-web-backend/src/entities/user-subscription.entity.ts
Normal file
61
meteor-web-backend/src/entities/user-subscription.entity.ts
Normal file
@ -0,0 +1,61 @@
|
||||
import { Entity, PrimaryGeneratedColumn, Column, ManyToOne, OneToMany, JoinColumn, CreateDateColumn, UpdateDateColumn } from 'typeorm';
|
||||
import { UserProfile } from './user-profile.entity';
|
||||
import { SubscriptionPlan } from './subscription-plan.entity';
|
||||
import { SubscriptionHistory } from './subscription-history.entity';
|
||||
import { PaymentRecord } from './payment-record.entity';
|
||||
|
||||
@Entity('user_subscriptions')
|
||||
export class UserSubscription {
|
||||
@PrimaryGeneratedColumn()
|
||||
id: number;
|
||||
|
||||
@Column({ name: 'user_profile_id', type: 'uuid' })
|
||||
userProfileId: string;
|
||||
|
||||
@ManyToOne(() => UserProfile)
|
||||
@JoinColumn({ name: 'user_profile_id' })
|
||||
userProfile: UserProfile;
|
||||
|
||||
@Column({ name: 'subscription_plan_id' })
|
||||
subscriptionPlanId: number;
|
||||
|
||||
@ManyToOne(() => SubscriptionPlan, plan => plan.userSubscriptions)
|
||||
@JoinColumn({ name: 'subscription_plan_id' })
|
||||
subscriptionPlan: SubscriptionPlan;
|
||||
|
||||
@Column({ name: 'stripe_subscription_id', nullable: true, unique: true })
|
||||
stripeSubscriptionId?: string;
|
||||
|
||||
@Column()
|
||||
status: 'active' | 'canceled' | 'past_due' | 'trialing' | 'incomplete';
|
||||
|
||||
@Column({ name: 'current_period_start', type: 'timestamptz' })
|
||||
currentPeriodStart: Date;
|
||||
|
||||
@Column({ name: 'current_period_end', type: 'timestamptz' })
|
||||
currentPeriodEnd: Date;
|
||||
|
||||
@Column({ name: 'cancel_at_period_end', default: false })
|
||||
cancelAtPeriodEnd: boolean;
|
||||
|
||||
@Column({ name: 'canceled_at', type: 'timestamptz', nullable: true })
|
||||
canceledAt?: Date;
|
||||
|
||||
@Column({ name: 'trial_start', type: 'timestamptz', nullable: true })
|
||||
trialStart?: Date;
|
||||
|
||||
@Column({ name: 'trial_end', type: 'timestamptz', nullable: true })
|
||||
trialEnd?: Date;
|
||||
|
||||
@OneToMany(() => SubscriptionHistory, history => history.userSubscription)
|
||||
subscriptionHistory: SubscriptionHistory[];
|
||||
|
||||
@OneToMany(() => PaymentRecord, payment => payment.userSubscription)
|
||||
paymentRecords: PaymentRecord[];
|
||||
|
||||
@CreateDateColumn({ name: 'created_at' })
|
||||
createdAt: Date;
|
||||
|
||||
@UpdateDateColumn({ name: 'updated_at' })
|
||||
updatedAt: Date;
|
||||
}
|
||||
@ -74,6 +74,40 @@ export class ValidatedEvent {
|
||||
@Column({ name: 'validation_algorithm', length: 50, nullable: true })
|
||||
validationAlgorithm?: string;
|
||||
|
||||
// 新增分析字段
|
||||
@Column({ name: 'weather_condition', length: 50, nullable: true })
|
||||
weatherCondition?: string;
|
||||
|
||||
@Column({ name: 'station_name', length: 100, nullable: true })
|
||||
@Index()
|
||||
stationName?: string;
|
||||
|
||||
@Column({ length: 50, nullable: true })
|
||||
@Index()
|
||||
classification?: string;
|
||||
|
||||
@Column({ type: 'decimal', precision: 5, scale: 2, nullable: true })
|
||||
duration?: string;
|
||||
|
||||
@Column({ length: 20, nullable: true })
|
||||
direction?: string;
|
||||
|
||||
@Column({ type: 'integer', nullable: true })
|
||||
azimuth?: number;
|
||||
|
||||
@Column({ type: 'integer', nullable: true })
|
||||
altitude?: number;
|
||||
|
||||
@Column({ type: 'decimal', precision: 8, scale: 2, nullable: true })
|
||||
velocity?: string; // km/s
|
||||
|
||||
@Column({ name: 'shower_name', length: 100, nullable: true })
|
||||
@Index()
|
||||
showerName?: string;
|
||||
|
||||
@Column({ name: 'peak_magnitude', type: 'decimal', precision: 4, scale: 2, nullable: true })
|
||||
peakMagnitude?: string;
|
||||
|
||||
@CreateDateColumn({ name: 'created_at' })
|
||||
createdAt: Date;
|
||||
|
||||
|
||||
36
meteor-web-backend/src/entities/weather-forecast.entity.ts
Normal file
36
meteor-web-backend/src/entities/weather-forecast.entity.ts
Normal file
@ -0,0 +1,36 @@
|
||||
import { Entity, PrimaryGeneratedColumn, Column, CreateDateColumn, ManyToOne, JoinColumn } from 'typeorm';
|
||||
import { WeatherStation } from './weather-station.entity';
|
||||
|
||||
@Entity('weather_forecasts')
|
||||
export class WeatherForecast {
|
||||
@PrimaryGeneratedColumn()
|
||||
id: number;
|
||||
|
||||
@Column({ name: 'weather_station_id' })
|
||||
weatherStationId: number;
|
||||
|
||||
@Column({ name: 'forecast_time', type: 'timestamp' })
|
||||
forecastTime: Date;
|
||||
|
||||
@Column({ type: 'decimal', precision: 4, scale: 1, nullable: true })
|
||||
temperature?: number;
|
||||
|
||||
@Column({ name: 'cloud_cover', type: 'integer', nullable: true })
|
||||
cloudCover?: number;
|
||||
|
||||
@Column({ type: 'decimal', precision: 5, scale: 1, nullable: true, default: 0 })
|
||||
precipitation?: number;
|
||||
|
||||
@Column({ type: 'decimal', precision: 5, scale: 1, nullable: true })
|
||||
visibility?: number;
|
||||
|
||||
@Column({ length: 50, nullable: true })
|
||||
condition?: string;
|
||||
|
||||
@CreateDateColumn({ name: 'created_at' })
|
||||
createdAt: Date;
|
||||
|
||||
@ManyToOne(() => WeatherStation, station => station.forecasts, { onDelete: 'CASCADE' })
|
||||
@JoinColumn({ name: 'weather_station_id' })
|
||||
weatherStation: WeatherStation;
|
||||
}
|
||||
@ -0,0 +1,51 @@
|
||||
import { Entity, PrimaryGeneratedColumn, Column, ManyToOne, JoinColumn, CreateDateColumn } from 'typeorm';
|
||||
import { WeatherStation } from './weather-station.entity';
|
||||
|
||||
@Entity('weather_observations')
|
||||
export class WeatherObservation {
|
||||
@PrimaryGeneratedColumn()
|
||||
id: number;
|
||||
|
||||
@Column({ name: 'weather_station_id' })
|
||||
weatherStationId: number;
|
||||
|
||||
@ManyToOne(() => WeatherStation)
|
||||
@JoinColumn({ name: 'weather_station_id' })
|
||||
weatherStation: WeatherStation;
|
||||
|
||||
@Column({ name: 'observation_time', type: 'timestamptz' })
|
||||
observationTime: Date;
|
||||
|
||||
@Column({ type: 'decimal', precision: 5, scale: 2 })
|
||||
temperature: number;
|
||||
|
||||
@Column({ type: 'decimal', precision: 5, scale: 2 })
|
||||
humidity: number;
|
||||
|
||||
@Column({ name: 'cloud_cover', type: 'decimal', precision: 5, scale: 2 })
|
||||
cloudCover: number;
|
||||
|
||||
@Column({ type: 'decimal', precision: 6, scale: 2 })
|
||||
visibility: number;
|
||||
|
||||
@Column({ name: 'wind_speed', type: 'decimal', precision: 5, scale: 2 })
|
||||
windSpeed: number;
|
||||
|
||||
@Column({ name: 'wind_direction', type: 'int' })
|
||||
windDirection: number;
|
||||
|
||||
@Column()
|
||||
condition: string;
|
||||
|
||||
@Column({ name: 'observation_quality' })
|
||||
observationQuality: 'excellent' | 'moderate' | 'poor';
|
||||
|
||||
@Column({ type: 'decimal', precision: 7, scale: 2 })
|
||||
pressure: number;
|
||||
|
||||
@Column({ type: 'decimal', precision: 5, scale: 2 })
|
||||
precipitation: number;
|
||||
|
||||
@CreateDateColumn({ name: 'created_at' })
|
||||
createdAt: Date;
|
||||
}
|
||||
38
meteor-web-backend/src/entities/weather-station.entity.ts
Normal file
38
meteor-web-backend/src/entities/weather-station.entity.ts
Normal file
@ -0,0 +1,38 @@
|
||||
import { Entity, PrimaryGeneratedColumn, Column, CreateDateColumn, UpdateDateColumn, OneToMany } from 'typeorm';
|
||||
import { WeatherForecast } from './weather-forecast.entity';
|
||||
|
||||
@Entity('weather_stations')
|
||||
export class WeatherStation {
|
||||
@PrimaryGeneratedColumn()
|
||||
id: number;
|
||||
|
||||
@Column({ name: 'station_name', unique: true })
|
||||
stationName: string;
|
||||
|
||||
@Column()
|
||||
location: string;
|
||||
|
||||
@Column({ type: 'decimal', precision: 10, scale: 8, nullable: true })
|
||||
latitude?: number;
|
||||
|
||||
@Column({ type: 'decimal', precision: 11, scale: 8, nullable: true })
|
||||
longitude?: number;
|
||||
|
||||
@Column({ type: 'decimal', precision: 8, scale: 2, nullable: true })
|
||||
altitude?: number;
|
||||
|
||||
@Column({ default: 'active' })
|
||||
status: 'active' | 'maintenance' | 'offline';
|
||||
|
||||
// Note: Weather observations are stored in the weather_observations table
|
||||
// The weather_stations table only contains station metadata
|
||||
|
||||
@CreateDateColumn({ name: 'created_at' })
|
||||
createdAt: Date;
|
||||
|
||||
@UpdateDateColumn({ name: 'updated_at' })
|
||||
updatedAt: Date;
|
||||
|
||||
@OneToMany(() => WeatherForecast, forecast => forecast.weatherStation)
|
||||
forecasts: WeatherForecast[];
|
||||
}
|
||||
@ -1,4 +1,4 @@
|
||||
import { Module } from '@nestjs/common';
|
||||
import { Module, forwardRef } from '@nestjs/common';
|
||||
import { TypeOrmModule } from '@nestjs/typeorm';
|
||||
import { EventsController } from './events.controller';
|
||||
import { EventsService } from './events.service';
|
||||
@ -6,9 +6,14 @@ import { AwsService } from '../aws/aws.service';
|
||||
import { RawEvent } from '../entities/raw-event.entity';
|
||||
import { Device } from '../entities/device.entity';
|
||||
import { ValidatedEvent } from '../entities/validated-event.entity';
|
||||
import { UserProfile } from '../entities/user-profile.entity';
|
||||
import { PaymentsModule } from '../payments/payments.module';
|
||||
|
||||
@Module({
|
||||
imports: [TypeOrmModule.forFeature([RawEvent, Device, ValidatedEvent])],
|
||||
imports: [
|
||||
TypeOrmModule.forFeature([RawEvent, Device, ValidatedEvent, UserProfile]),
|
||||
forwardRef(() => PaymentsModule),
|
||||
],
|
||||
controllers: [EventsController],
|
||||
providers: [EventsService, AwsService],
|
||||
exports: [EventsService, AwsService],
|
||||
|
||||
@ -24,27 +24,30 @@ async function bootstrap() {
|
||||
cwd: process.cwd(),
|
||||
});
|
||||
|
||||
// Configure raw body parsing for webhook endpoints
|
||||
app.use(
|
||||
'/api/v1/payments/webhook',
|
||||
json({
|
||||
verify: (req: any, res, buf) => {
|
||||
req.rawBody = buf;
|
||||
},
|
||||
}),
|
||||
);
|
||||
// fixme： 打开后json反序列化失败
|
||||
// // Configure raw body parsing for webhook endpoints
|
||||
// app.use(
|
||||
// '/api/v1/payments/webhook',
|
||||
// json({
|
||||
// verify: (req: any, res, buf) => {
|
||||
// req.rawBody = buf;
|
||||
// },
|
||||
// }),
|
||||
// );
|
||||
|
||||
app.useGlobalPipes(
|
||||
new ValidationPipe({
|
||||
whitelist: true,
|
||||
forbidNonWhitelisted: true,
|
||||
transform: true,
|
||||
skipMissingProperties: false,
|
||||
validationError: { target: false },
|
||||
}),
|
||||
);
|
||||
|
||||
// Enable CORS for frontend
|
||||
app.enableCors({
|
||||
origin: 'http://localhost:3001', // Adjust if your frontend runs on different port
|
||||
origin: 'http://localhost:3000', // Frontend runs on port 3000
|
||||
credentials: true,
|
||||
});
|
||||
|
||||
|
||||
@ -182,6 +182,25 @@ export class PaymentsService {
|
||||
};
|
||||
}
|
||||
|
||||
// Development/Test mode: if subscription ID starts with 'sub_test_', return mock data
|
||||
if (userProfile.paymentProviderSubscriptionId.startsWith('sub_test_')) {
|
||||
this.logger.log(`Returning mock subscription data for development mode`);
|
||||
const nextMonth = new Date();
|
||||
nextMonth.setMonth(nextMonth.getMonth() + 1);
|
||||
|
||||
return {
|
||||
hasActiveSubscription: true,
|
||||
subscriptionStatus: 'active',
|
||||
currentPlan: {
|
||||
id: userProfile.paymentProviderSubscriptionId,
|
||||
priceId: 'price_test_premium',
|
||||
name: 'Premium Plan (Test)',
|
||||
},
|
||||
nextBillingDate: nextMonth,
|
||||
customerId: userProfile.paymentProviderCustomerId,
|
||||
};
|
||||
}
|
||||
|
||||
try {
|
||||
const provider = this.getProvider('stripe');
|
||||
const subscription = await provider.getSubscription(
|
||||
|
||||
@ -0,0 +1,85 @@
|
||||
import { Controller, Get, Post, Patch, Query, Param, Body, ParseIntPipe, UseGuards } from '@nestjs/common';
|
||||
import { SubscriptionService, SubscriptionQuery } from './subscription.service';
|
||||
import { JwtAuthGuard } from '../auth/guards/jwt-auth.guard';
|
||||
|
||||
@Controller('api/v1/subscriptions')
|
||||
@UseGuards(JwtAuthGuard)
|
||||
export class SubscriptionController {
|
||||
constructor(private readonly subscriptionService: SubscriptionService) {}
|
||||
|
||||
// Subscription Plans
|
||||
@Get('plans')
|
||||
async getAllPlans() {
|
||||
return await this.subscriptionService.getAllPlans();
|
||||
}
|
||||
|
||||
@Get('plans/stats')
|
||||
async getPlanStats() {
|
||||
return await this.subscriptionService.getPlanStats();
|
||||
}
|
||||
|
||||
@Get('plans/:id')
|
||||
async getPlan(@Param('id', ParseIntPipe) id: number) {
|
||||
return await this.subscriptionService.getPlan(id);
|
||||
}
|
||||
|
||||
@Get('plans/by-plan-id/:planId')
|
||||
async getPlanByPlanId(@Param('planId') planId: string) {
|
||||
return await this.subscriptionService.getPlanByPlanId(planId);
|
||||
}
|
||||
|
||||
// User Subscriptions
|
||||
@Get('users')
|
||||
async getUserSubscriptions(@Query() query: SubscriptionQuery) {
|
||||
return await this.subscriptionService.getUserSubscriptions(query);
|
||||
}
|
||||
|
||||
@Get('users/:userId')
|
||||
async getUserSubscription(@Param('userId') userId: string) {
|
||||
return await this.subscriptionService.getUserSubscription(userId);
|
||||
}
|
||||
|
||||
@Post('users/:userId')
|
||||
async createSubscription(
|
||||
@Param('userId') userId: string,
|
||||
@Body('planId') planId: string,
|
||||
@Body() subscriptionData: any,
|
||||
) {
|
||||
return await this.subscriptionService.createSubscription(userId, planId, subscriptionData);
|
||||
}
|
||||
|
||||
@Patch(':id/status')
|
||||
async updateSubscriptionStatus(
|
||||
@Param('id', ParseIntPipe) id: number,
|
||||
@Body('status') status: string,
|
||||
@Body('metadata') metadata?: any,
|
||||
) {
|
||||
return await this.subscriptionService.updateSubscriptionStatus(id, status, metadata);
|
||||
}
|
||||
|
||||
// Subscription History
|
||||
@Get(':id/history')
|
||||
async getSubscriptionHistory(@Param('id', ParseIntPipe) id: number) {
|
||||
return await this.subscriptionService.getSubscriptionHistory(id);
|
||||
}
|
||||
|
||||
// Payment Records
|
||||
@Get(':id/payments')
|
||||
async getPaymentRecords(@Param('id', ParseIntPipe) id: number) {
|
||||
return await this.subscriptionService.getPaymentRecords(id);
|
||||
}
|
||||
|
||||
@Post(':id/payments')
|
||||
async createPaymentRecord(
|
||||
@Param('id', ParseIntPipe) id: number,
|
||||
@Body() paymentData: any,
|
||||
) {
|
||||
return await this.subscriptionService.createPaymentRecord(id, paymentData);
|
||||
}
|
||||
|
||||
// Statistics
|
||||
@Get('stats')
|
||||
async getSubscriptionStats() {
|
||||
return await this.subscriptionService.getSubscriptionStats();
|
||||
}
|
||||
}
|
||||
21
meteor-web-backend/src/subscription/subscription.module.ts
Normal file
21
meteor-web-backend/src/subscription/subscription.module.ts
Normal file
@ -0,0 +1,21 @@
|
||||
import { Module } from '@nestjs/common';
|
||||
import { TypeOrmModule } from '@nestjs/typeorm';
|
||||
import { SubscriptionController } from './subscription.controller';
|
||||
import { SubscriptionService } from './subscription.service';
|
||||
import { SubscriptionPlan } from '../entities/subscription-plan.entity';
|
||||
import { UserSubscription } from '../entities/user-subscription.entity';
|
||||
import { SubscriptionHistory } from '../entities/subscription-history.entity';
|
||||
import { PaymentRecord } from '../entities/payment-record.entity';
|
||||
|
||||
@Module({
|
||||
imports: [TypeOrmModule.forFeature([
|
||||
SubscriptionPlan,
|
||||
UserSubscription,
|
||||
SubscriptionHistory,
|
||||
PaymentRecord,
|
||||
])],
|
||||
controllers: [SubscriptionController],
|
||||
providers: [SubscriptionService],
|
||||
exports: [SubscriptionService],
|
||||
})
|
||||
export class SubscriptionModule {}
|
||||
294
meteor-web-backend/src/subscription/subscription.service.ts
Normal file
294
meteor-web-backend/src/subscription/subscription.service.ts
Normal file
@ -0,0 +1,294 @@
|
||||
import { Injectable, NotFoundException, BadRequestException } from '@nestjs/common';
|
||||
import { InjectRepository } from '@nestjs/typeorm';
|
||||
import { Repository, FindManyOptions } from 'typeorm';
|
||||
import { SubscriptionPlan } from '../entities/subscription-plan.entity';
|
||||
import { UserSubscription } from '../entities/user-subscription.entity';
|
||||
import { SubscriptionHistory } from '../entities/subscription-history.entity';
|
||||
import { PaymentRecord } from '../entities/payment-record.entity';
|
||||
|
||||
export interface SubscriptionQuery {
|
||||
page?: number;
|
||||
limit?: number;
|
||||
status?: string;
|
||||
planId?: string;
|
||||
userId?: string;
|
||||
}
|
||||
|
||||
export interface PlanStats {
|
||||
planId: string;
|
||||
planName: string;
|
||||
totalSubscriptions: number;
|
||||
activeSubscriptions: number;
|
||||
revenue: number;
|
||||
popularityRank: number;
|
||||
}
|
||||
|
||||
@Injectable()
|
||||
export class SubscriptionService {
|
||||
constructor(
|
||||
@InjectRepository(SubscriptionPlan)
|
||||
private subscriptionPlanRepository: Repository<SubscriptionPlan>,
|
||||
@InjectRepository(UserSubscription)
|
||||
private userSubscriptionRepository: Repository<UserSubscription>,
|
||||
@InjectRepository(SubscriptionHistory)
|
||||
private subscriptionHistoryRepository: Repository<SubscriptionHistory>,
|
||||
@InjectRepository(PaymentRecord)
|
||||
private paymentRecordRepository: Repository<PaymentRecord>,
|
||||
) {}
|
||||
|
||||
// Subscription Plans
|
||||
async getAllPlans() {
|
||||
const plans = await this.subscriptionPlanRepository.find({
|
||||
where: { isActive: true },
|
||||
order: {
|
||||
price: 'ASC',
|
||||
isPopular: 'DESC',
|
||||
},
|
||||
});
|
||||
|
||||
return plans;
|
||||
}
|
||||
|
||||
async getPlan(id: number) {
|
||||
const plan = await this.subscriptionPlanRepository.findOne({
|
||||
where: { id },
|
||||
});
|
||||
|
||||
if (!plan) {
|
||||
throw new NotFoundException(`Subscription plan with ID ${id} not found`);
|
||||
}
|
||||
|
||||
return plan;
|
||||
}
|
||||
|
||||
async getPlanByPlanId(planId: string) {
|
||||
const plan = await this.subscriptionPlanRepository.findOne({
|
||||
where: { planId },
|
||||
});
|
||||
|
||||
if (!plan) {
|
||||
throw new NotFoundException(`Subscription plan with plan ID ${planId} not found`);
|
||||
}
|
||||
|
||||
return plan;
|
||||
}
|
||||
|
||||
// User Subscriptions
|
||||
async getUserSubscriptions(query: SubscriptionQuery = {}) {
|
||||
const { page = 1, limit = 10, status, planId, userId } = query;
|
||||
const skip = (page - 1) * limit;
|
||||
|
||||
const queryBuilder = this.userSubscriptionRepository
|
||||
.createQueryBuilder('subscription')
|
||||
.leftJoinAndSelect('subscription.subscriptionPlan', 'plan')
|
||||
.leftJoinAndSelect('subscription.userProfile', 'user')
|
||||
.orderBy('subscription.createdAt', 'DESC')
|
||||
.skip(skip)
|
||||
.take(limit);
|
||||
|
||||
if (status) {
|
||||
queryBuilder.andWhere('subscription.status = :status', { status });
|
||||
}
|
||||
|
||||
if (planId) {
|
||||
queryBuilder.andWhere('plan.planId = :planId', { planId });
|
||||
}
|
||||
|
||||
if (userId) {
|
||||
queryBuilder.andWhere('subscription.userProfileId = :userId', { userId });
|
||||
}
|
||||
|
||||
const [subscriptions, total] = await queryBuilder.getManyAndCount();
|
||||
|
||||
return {
|
||||
subscriptions,
|
||||
pagination: {
|
||||
page,
|
||||
limit,
|
||||
total,
|
||||
totalPages: Math.ceil(total / limit),
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
async getUserSubscription(userId: string) {
|
||||
const subscription = await this.userSubscriptionRepository
|
||||
.createQueryBuilder('subscription')
|
||||
.leftJoinAndSelect('subscription.subscriptionPlan', 'plan')
|
||||
.leftJoinAndSelect('subscription.userProfile', 'user')
|
||||
.where('subscription.userProfileId = :userId', { userId })
|
||||
.andWhere('subscription.status IN (:...statuses)', { statuses: ['active', 'trialing'] })
|
||||
.getOne();
|
||||
|
||||
return subscription;
|
||||
}
|
||||
|
||||
async createSubscription(userId: string, planId: string, subscriptionData: Partial<UserSubscription>) {
|
||||
const plan = await this.getPlanByPlanId(planId);
|
||||
|
||||
// Check if user already has an active subscription
|
||||
const existingSubscription = await this.getUserSubscription(userId);
|
||||
if (existingSubscription) {
|
||||
throw new BadRequestException('User already has an active subscription');
|
||||
}
|
||||
|
||||
const subscription = this.userSubscriptionRepository.create({
|
||||
userProfileId: userId,
|
||||
subscriptionPlanId: plan.id,
|
||||
status: 'active',
|
||||
currentPeriodStart: new Date(),
|
||||
currentPeriodEnd: new Date(Date.now() + 30 * 24 * 60 * 60 * 1000), // 30 days
|
||||
...subscriptionData,
|
||||
});
|
||||
|
||||
const savedSubscription = await this.userSubscriptionRepository.save(subscription);
|
||||
|
||||
// Create subscription history record
|
||||
await this.createSubscriptionHistory(savedSubscription.id, 'created', null, 'active', {
|
||||
planId: plan.planId,
|
||||
createdBy: 'system',
|
||||
});
|
||||
|
||||
return savedSubscription;
|
||||
}
|
||||
|
||||
async updateSubscriptionStatus(subscriptionId: number, status: string, metadata?: any) {
|
||||
const subscription = await this.userSubscriptionRepository.findOne({
|
||||
where: { id: subscriptionId },
|
||||
});
|
||||
|
||||
if (!subscription) {
|
||||
throw new NotFoundException(`Subscription with ID ${subscriptionId} not found`);
|
||||
}
|
||||
|
||||
const oldStatus = subscription.status;
|
||||
subscription.status = status as any;
|
||||
subscription.updatedAt = new Date();
|
||||
|
||||
if (status === 'canceled') {
|
||||
subscription.canceledAt = new Date();
|
||||
}
|
||||
|
||||
const updatedSubscription = await this.userSubscriptionRepository.save(subscription);
|
||||
|
||||
// Create history record
|
||||
await this.createSubscriptionHistory(subscriptionId, 'updated', oldStatus, status, metadata);
|
||||
|
||||
return updatedSubscription;
|
||||
}
|
||||
|
||||
// Subscription History
|
||||
async createSubscriptionHistory(
|
||||
subscriptionId: number,
|
||||
action: string,
|
||||
oldStatus: string | null,
|
||||
newStatus: string | null,
|
||||
metadata?: any,
|
||||
) {
|
||||
const history = new SubscriptionHistory();
|
||||
history.userSubscriptionId = subscriptionId;
|
||||
history.action = action as any;
|
||||
history.oldStatus = oldStatus || undefined;
|
||||
history.newStatus = newStatus || undefined;
|
||||
history.metadata = metadata;
|
||||
|
||||
return await this.subscriptionHistoryRepository.save(history);
|
||||
}
|
||||
|
||||
async getSubscriptionHistory(subscriptionId: number) {
|
||||
return await this.subscriptionHistoryRepository.find({
|
||||
where: { userSubscriptionId: subscriptionId },
|
||||
order: { createdAt: 'DESC' },
|
||||
});
|
||||
}
|
||||
|
||||
// Payment Records
|
||||
async createPaymentRecord(subscriptionId: number, paymentData: Partial<PaymentRecord>) {
|
||||
const payment = this.paymentRecordRepository.create({
|
||||
userSubscriptionId: subscriptionId,
|
||||
...paymentData,
|
||||
});
|
||||
|
||||
return await this.paymentRecordRepository.save(payment);
|
||||
}
|
||||
|
||||
async getPaymentRecords(subscriptionId: number) {
|
||||
return await this.paymentRecordRepository.find({
|
||||
where: { userSubscriptionId: subscriptionId },
|
||||
order: { createdAt: 'DESC' },
|
||||
});
|
||||
}
|
||||
|
||||
// Statistics and Analytics
|
||||
async getSubscriptionStats() {
|
||||
const totalPlans = await this.subscriptionPlanRepository.count({ where: { isActive: true } });
|
||||
|
||||
const totalSubscriptions = await this.userSubscriptionRepository.count();
|
||||
const activeSubscriptions = await this.userSubscriptionRepository.count({
|
||||
where: { status: 'active' },
|
||||
});
|
||||
const trialSubscriptions = await this.userSubscriptionRepository.count({
|
||||
where: { status: 'trialing' },
|
||||
});
|
||||
const canceledSubscriptions = await this.userSubscriptionRepository.count({
|
||||
where: { status: 'canceled' },
|
||||
});
|
||||
|
||||
// Calculate total revenue from successful payments
|
||||
const revenueResult = await this.paymentRecordRepository
|
||||
.createQueryBuilder('payment')
|
||||
.select('SUM(payment.amount)', 'total')
|
||||
.where('payment.status = :status', { status: 'succeeded' })
|
||||
.getRawOne();
|
||||
|
||||
const totalRevenue = parseFloat(revenueResult?.total || '0');
|
||||
|
||||
// Calculate monthly recurring revenue (MRR)
|
||||
const mrrResult = await this.userSubscriptionRepository
|
||||
.createQueryBuilder('subscription')
|
||||
.leftJoin('subscription.subscriptionPlan', 'plan')
|
||||
.select('SUM(plan.price)', 'mrr')
|
||||
.where('subscription.status IN (:...statuses)', { statuses: ['active', 'trialing'] })
|
||||
.andWhere('plan.interval = :interval', { interval: 'month' })
|
||||
.getRawOne();
|
||||
|
||||
const monthlyRecurringRevenue = parseFloat(mrrResult?.mrr || '0');
|
||||
|
||||
return {
|
||||
totalPlans,
|
||||
totalSubscriptions,
|
||||
activeSubscriptions,
|
||||
trialSubscriptions,
|
||||
canceledSubscriptions,
|
||||
totalRevenue,
|
||||
monthlyRecurringRevenue,
|
||||
};
|
||||
}
|
||||
|
||||
async getPlanStats(): Promise<PlanStats[]> {
|
||||
const plans = await this.subscriptionPlanRepository
|
||||
.createQueryBuilder('plan')
|
||||
.leftJoin('plan.userSubscriptions', 'subscription')
|
||||
.leftJoin('subscription.paymentRecords', 'payment', 'payment.status = :paymentStatus', { paymentStatus: 'succeeded' })
|
||||
.select([
|
||||
'plan.planId as planId',
|
||||
'plan.name as planName',
|
||||
'COUNT(subscription.id) as totalSubscriptions',
|
||||
'COUNT(CASE WHEN subscription.status = \'active\' THEN 1 END) as activeSubscriptions',
|
||||
'COALESCE(SUM(payment.amount), 0) as revenue',
|
||||
])
|
||||
.where('plan.isActive = :active', { active: true })
|
||||
.groupBy('plan.id, plan.planId, plan.name')
|
||||
.orderBy('totalSubscriptions', 'DESC')
|
||||
.getRawMany();
|
||||
|
||||
return plans.map((plan, index) => ({
|
||||
planId: plan.planid,
|
||||
planName: plan.planname,
|
||||
totalSubscriptions: parseInt(plan.totalsubscriptions),
|
||||
activeSubscriptions: parseInt(plan.activesubscriptions),
|
||||
revenue: parseFloat(plan.revenue),
|
||||
popularityRank: index + 1,
|
||||
}));
|
||||
}
|
||||
}
|
||||
91
meteor-web-backend/src/weather/weather.controller.ts
Normal file
91
meteor-web-backend/src/weather/weather.controller.ts
Normal file
@ -0,0 +1,91 @@
|
||||
import { Controller, Get, Param, Query, UseGuards, NotFoundException, ParseIntPipe } from '@nestjs/common';
|
||||
import { WeatherService, WeatherSummary, WeatherQuery } from './weather.service';
|
||||
import { WeatherStation } from '../entities/weather-station.entity';
|
||||
import { JwtAuthGuard } from '../auth/guards/jwt-auth.guard';
|
||||
|
||||
@Controller('api/v1/weather')
|
||||
@UseGuards(JwtAuthGuard)
|
||||
export class WeatherController {
|
||||
constructor(private readonly weatherService: WeatherService) {}
|
||||
|
||||
@Get()
|
||||
async getAllWeatherData(): Promise<{ success: boolean; weather: WeatherStation[] }> {
|
||||
const weather = await this.weatherService.getAllWeatherData();
|
||||
return {
|
||||
success: true,
|
||||
weather,
|
||||
};
|
||||
}
|
||||
|
||||
@Get('summary')
|
||||
async getWeatherSummary(): Promise<{ success: boolean; summary: WeatherSummary }> {
|
||||
const summary = await this.weatherService.getWeatherSummary();
|
||||
return {
|
||||
success: true,
|
||||
summary,
|
||||
};
|
||||
}
|
||||
|
||||
@Get(':stationName')
|
||||
async getWeatherByStation(
|
||||
@Param('stationName') stationName: string,
|
||||
): Promise<{ success: boolean; weather: WeatherStation }> {
|
||||
const weather = await this.weatherService.getWeatherByStation(stationName);
|
||||
|
||||
if (!weather) {
|
||||
throw new NotFoundException('找不到指定站点的天气数据');
|
||||
}
|
||||
|
||||
return {
|
||||
success: true,
|
||||
weather,
|
||||
};
|
||||
}
|
||||
|
||||
// Enhanced weather endpoints
|
||||
|
||||
@Get('stations/list')
|
||||
async getStations(@Query() query: WeatherQuery) {
|
||||
return await this.weatherService.getAllStations(query);
|
||||
}
|
||||
|
||||
@Get('stations/stats')
|
||||
async getWeatherStats() {
|
||||
return await this.weatherService.getWeatherStats();
|
||||
}
|
||||
|
||||
@Get('stations/:id')
|
||||
async getStationById(@Param('id', ParseIntPipe) id: number) {
|
||||
return await this.weatherService.getStation(id);
|
||||
}
|
||||
|
||||
@Get('stations/:id/forecasts')
|
||||
async getStationForecasts(
|
||||
@Param('id', ParseIntPipe) id: number,
|
||||
@Query('days') days?: string,
|
||||
) {
|
||||
const forecastDays = days ? parseInt(days) : 7;
|
||||
return await this.weatherService.getForecastsByStation(id, forecastDays);
|
||||
}
|
||||
|
||||
@Get('observations/list')
|
||||
async getObservations(@Query() query: WeatherQuery) {
|
||||
return await this.weatherService.getObservations(query);
|
||||
}
|
||||
|
||||
@Get('observations/latest')
|
||||
async getLatestObservations(@Query('limit') limit?: string) {
|
||||
const observationLimit = limit ? parseInt(limit) : 5;
|
||||
return await this.weatherService.getLatestObservations(observationLimit);
|
||||
}
|
||||
|
||||
@Get('forecasts/list')
|
||||
async getForecasts(@Query() query: WeatherQuery) {
|
||||
return await this.weatherService.getForecasts(query);
|
||||
}
|
||||
|
||||
@Get('current/summary')
|
||||
async getCurrentWeatherSummary() {
|
||||
return await this.weatherService.getCurrentWeatherSummary();
|
||||
}
|
||||
}
|
||||
15
meteor-web-backend/src/weather/weather.module.ts
Normal file
15
meteor-web-backend/src/weather/weather.module.ts
Normal file
@ -0,0 +1,15 @@
|
||||
import { Module } from '@nestjs/common';
|
||||
import { TypeOrmModule } from '@nestjs/typeorm';
|
||||
import { WeatherController } from './weather.controller';
|
||||
import { WeatherService } from './weather.service';
|
||||
import { WeatherStation } from '../entities/weather-station.entity';
|
||||
import { WeatherForecast } from '../entities/weather-forecast.entity';
|
||||
import { WeatherObservation } from '../entities/weather-observation.entity';
|
||||
|
||||
@Module({
|
||||
imports: [TypeOrmModule.forFeature([WeatherStation, WeatherForecast, WeatherObservation])],
|
||||
controllers: [WeatherController],
|
||||
providers: [WeatherService],
|
||||
exports: [WeatherService],
|
||||
})
|
||||
export class WeatherModule {}
|
||||
420
meteor-web-backend/src/weather/weather.service.ts
Normal file
420
meteor-web-backend/src/weather/weather.service.ts
Normal file
@ -0,0 +1,420 @@
|
||||
import { Injectable, Logger, NotFoundException } from '@nestjs/common';
|
||||
import { InjectRepository } from '@nestjs/typeorm';
|
||||
import { Repository, FindManyOptions, Between } from 'typeorm';
|
||||
import { WeatherStation } from '../entities/weather-station.entity';
|
||||
import { WeatherForecast } from '../entities/weather-forecast.entity';
|
||||
import { WeatherObservation } from '../entities/weather-observation.entity';
|
||||
|
||||
export interface WeatherSummary {
|
||||
avgTemperature: number;
|
||||
avgCloudCover: number;
|
||||
avgVisibility: number;
|
||||
observationConditions: {
|
||||
excellent: number;
|
||||
moderate: number;
|
||||
poor: number;
|
||||
};
|
||||
bestObservationStation: string;
|
||||
}
|
||||
|
||||
export interface WeatherQuery {
|
||||
page?: number;
|
||||
limit?: number;
|
||||
location?: string;
|
||||
startDate?: string;
|
||||
endDate?: string;
|
||||
}
|
||||
|
||||
@Injectable()
|
||||
export class WeatherService {
|
||||
private readonly logger = new Logger(WeatherService.name);
|
||||
|
||||
constructor(
|
||||
@InjectRepository(WeatherStation)
|
||||
private weatherStationRepository: Repository<WeatherStation>,
|
||||
@InjectRepository(WeatherForecast)
|
||||
private weatherForecastRepository: Repository<WeatherForecast>,
|
||||
@InjectRepository(WeatherObservation)
|
||||
private weatherObservationRepository: Repository<WeatherObservation>,
|
||||
) {}
|
||||
|
||||
async getAllWeatherData(): Promise<any[]> {
|
||||
try {
|
||||
const stations = await this.weatherStationRepository.find({
|
||||
relations: ['forecasts'],
|
||||
order: { stationName: 'ASC' },
|
||||
});
|
||||
|
||||
// Get latest observations for each station
|
||||
const stationsWithData = await Promise.all(
|
||||
stations.map(async (station) => {
|
||||
// Get the latest observation for this station
|
||||
const latestObservation = await this.weatherObservationRepository
|
||||
.createQueryBuilder('obs')
|
||||
.where('obs.weatherStationId = :stationId', { stationId: station.id })
|
||||
.orderBy('obs.observationTime', 'DESC')
|
||||
.limit(1)
|
||||
.getOne();
|
||||
|
||||
// Filter forecasts to next 24 hours
|
||||
let forecasts: any[] = [];
|
||||
if (station.forecasts) {
|
||||
forecasts = station.forecasts
|
||||
.sort((a, b) => a.forecastTime.getTime() - b.forecastTime.getTime())
|
||||
.slice(0, 24);
|
||||
}
|
||||
|
||||
// Combine station data with latest observation
|
||||
return {
|
||||
...station,
|
||||
forecasts,
|
||||
// Add observation data to match frontend expectations
|
||||
currentTemperature: latestObservation?.temperature ? Number(latestObservation.temperature) : null,
|
||||
humidity: latestObservation?.humidity ? Number(latestObservation.humidity) : null,
|
||||
cloudCover: latestObservation?.cloudCover ? Number(latestObservation.cloudCover) : null,
|
||||
visibility: latestObservation?.visibility ? Number(latestObservation.visibility) : null,
|
||||
windSpeed: latestObservation?.windSpeed ? Number(latestObservation.windSpeed) : null,
|
||||
windDirection: latestObservation?.windDirection || null,
|
||||
condition: latestObservation?.condition || null,
|
||||
observationQuality: latestObservation?.observationQuality || 'moderate',
|
||||
};
|
||||
})
|
||||
);
|
||||
|
||||
return stationsWithData;
|
||||
} catch (error) {
|
||||
this.logger.error('Failed to fetch weather data', error);
|
||||
throw new Error('获取天气数据失败');
|
||||
}
|
||||
}
|
||||
|
||||
async getWeatherByStation(stationName: string): Promise<any | null> {
|
||||
try {
|
||||
const station = await this.weatherStationRepository.findOne({
|
||||
where: { stationName },
|
||||
relations: ['forecasts'],
|
||||
});
|
||||
|
||||
if (!station) {
|
||||
return null;
|
||||
}
|
||||
|
||||
// Get the latest observation for this station
|
||||
const latestObservation = await this.weatherObservationRepository
|
||||
.createQueryBuilder('obs')
|
||||
.where('obs.weatherStationId = :stationId', { stationId: station.id })
|
||||
.orderBy('obs.observationTime', 'DESC')
|
||||
.limit(1)
|
||||
.getOne();
|
||||
|
||||
// Filter forecasts to next 24 hours
|
||||
let forecasts: any[] = [];
|
||||
if (station.forecasts) {
|
||||
forecasts = station.forecasts
|
||||
.sort((a, b) => a.forecastTime.getTime() - b.forecastTime.getTime())
|
||||
.slice(0, 24);
|
||||
}
|
||||
|
||||
// Combine station data with latest observation
|
||||
return {
|
||||
...station,
|
||||
forecasts,
|
||||
// Add observation data to match frontend expectations
|
||||
currentTemperature: latestObservation?.temperature ? Number(latestObservation.temperature) : null,
|
||||
humidity: latestObservation?.humidity ? Number(latestObservation.humidity) : null,
|
||||
cloudCover: latestObservation?.cloudCover ? Number(latestObservation.cloudCover) : null,
|
||||
visibility: latestObservation?.visibility ? Number(latestObservation.visibility) : null,
|
||||
windSpeed: latestObservation?.windSpeed ? Number(latestObservation.windSpeed) : null,
|
||||
windDirection: latestObservation?.windDirection || null,
|
||||
condition: latestObservation?.condition || null,
|
||||
observationQuality: latestObservation?.observationQuality || 'moderate',
|
||||
};
|
||||
} catch (error) {
|
||||
this.logger.error(`Failed to fetch weather for station ${stationName}`, error);
|
||||
throw new Error('获取站点天气数据失败');
|
||||
}
|
||||
}
|
||||
|
||||
async getWeatherSummary(): Promise<WeatherSummary> {
|
||||
try {
|
||||
const stations = await this.weatherStationRepository.find();
|
||||
|
||||
if (stations.length === 0) {
|
||||
throw new Error('没有天气站点数据');
|
||||
}
|
||||
|
||||
// Get latest observations for calculations - using a simpler approach
|
||||
const latestObservations = await this.weatherObservationRepository
|
||||
.createQueryBuilder('obs')
|
||||
.leftJoinAndSelect('obs.weatherStation', 'station')
|
||||
.where('obs.observationTime > :cutoff', { cutoff: new Date(Date.now() - 24 * 60 * 60 * 1000) })
|
||||
.orderBy('obs.observationTime', 'DESC')
|
||||
.limit(50) // Get recent observations
|
||||
.getMany();
|
||||
|
||||
// Group by station and get the latest for each
|
||||
const latestByStation = latestObservations.reduce((acc, obs) => {
|
||||
if (!acc[obs.weatherStationId] || obs.observationTime > acc[obs.weatherStationId].observationTime) {
|
||||
acc[obs.weatherStationId] = obs;
|
||||
}
|
||||
return acc;
|
||||
}, {} as Record<number, typeof latestObservations[0]>);
|
||||
|
||||
const finalObservations = Object.values(latestByStation);
|
||||
|
||||
if (finalObservations.length === 0) {
|
||||
// Return default values when no observations exist
|
||||
return {
|
||||
avgTemperature: 0,
|
||||
avgCloudCover: 0,
|
||||
avgVisibility: 0,
|
||||
observationConditions: { excellent: 0, moderate: 0, poor: 0 },
|
||||
bestObservationStation: stations[0]?.stationName || '未知',
|
||||
};
|
||||
}
|
||||
|
||||
// 计算平均值 - 使用观测数据
|
||||
const avgTemperature = finalObservations
|
||||
.filter(obs => obs.temperature !== null)
|
||||
.reduce((sum, obs) => sum + (Number(obs.temperature) || 0), 0) / finalObservations.length;
|
||||
|
||||
const avgCloudCover = finalObservations
|
||||
.filter(obs => obs.cloudCover !== null)
|
||||
.reduce((sum, obs) => sum + (Number(obs.cloudCover) || 0), 0) / finalObservations.length;
|
||||
|
||||
const avgVisibility = finalObservations
|
||||
.filter(obs => obs.visibility !== null)
|
||||
.reduce((sum, obs) => sum + (Number(obs.visibility) || 0), 0) / finalObservations.length;
|
||||
|
||||
// 统计观测条件
|
||||
const observationConditions = {
|
||||
excellent: finalObservations.filter(obs => obs.observationQuality === 'excellent').length,
|
||||
moderate: finalObservations.filter(obs => obs.observationQuality === 'moderate').length,
|
||||
poor: finalObservations.filter(obs => obs.observationQuality === 'poor').length,
|
||||
};
|
||||
|
||||
// 找出最佳观测站（云层覆盖最少 + 能见度最高）
|
||||
const bestObservation = finalObservations
|
||||
.filter(obs => obs.cloudCover !== null && obs.visibility !== null)
|
||||
.sort((a, b) => {
|
||||
const scoreA = (Number(a.cloudCover) || 100) * -1 + (Number(a.visibility) || 0) * 2;
|
||||
const scoreB = (Number(b.cloudCover) || 100) * -1 + (Number(b.visibility) || 0) * 2;
|
||||
return scoreB - scoreA;
|
||||
})[0];
|
||||
|
||||
return {
|
||||
avgTemperature: Number(avgTemperature.toFixed(1)),
|
||||
avgCloudCover: Number(avgCloudCover.toFixed(1)),
|
||||
avgVisibility: Number(avgVisibility.toFixed(1)),
|
||||
observationConditions,
|
||||
bestObservationStation: bestObservation?.weatherStation?.stationName || stations[0]?.stationName || '未知',
|
||||
};
|
||||
} catch (error) {
|
||||
this.logger.error('Failed to generate weather summary', error);
|
||||
throw new Error('生成天气概要失败');
|
||||
}
|
||||
}
|
||||
|
||||
async updateWeatherData(stationId: number, weatherData: Partial<WeatherStation>): Promise<WeatherStation> {
|
||||
try {
|
||||
await this.weatherStationRepository.update(stationId, weatherData);
|
||||
const updatedStation = await this.weatherStationRepository.findOne({
|
||||
where: { id: stationId },
|
||||
});
|
||||
|
||||
if (!updatedStation) {
|
||||
throw new Error('更新后未找到站点');
|
||||
}
|
||||
|
||||
return updatedStation;
|
||||
} catch (error) {
|
||||
this.logger.error(`Failed to update weather data for station ${stationId}`, error);
|
||||
throw new Error('更新天气数据失败');
|
||||
}
|
||||
}
|
||||
|
||||
// New enhanced weather functionality
|
||||
|
||||
async getAllStations(query: WeatherQuery = {}) {
|
||||
const { page = 1, limit = 10, location } = query;
|
||||
const skip = (page - 1) * limit;
|
||||
|
||||
const options: FindManyOptions<WeatherStation> = {
|
||||
skip,
|
||||
take: limit,
|
||||
order: {
|
||||
updatedAt: 'DESC',
|
||||
},
|
||||
};
|
||||
|
||||
if (location) {
|
||||
options.where = { location };
|
||||
}
|
||||
|
||||
const [stations, total] = await this.weatherStationRepository.findAndCount(options);
|
||||
|
||||
return {
|
||||
stations,
|
||||
pagination: {
|
||||
page,
|
||||
limit,
|
||||
total,
|
||||
totalPages: Math.ceil(total / limit),
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
async getStation(id: number) {
|
||||
const station = await this.weatherStationRepository.findOne({
|
||||
where: { id },
|
||||
});
|
||||
|
||||
if (!station) {
|
||||
throw new NotFoundException(`Weather station with ID ${id} not found`);
|
||||
}
|
||||
|
||||
return station;
|
||||
}
|
||||
|
||||
// Weather Observations
|
||||
async getObservations(query: WeatherQuery = {}) {
|
||||
const { page = 1, limit = 10, location, startDate, endDate } = query;
|
||||
const skip = (page - 1) * limit;
|
||||
|
||||
const queryBuilder = this.weatherObservationRepository
|
||||
.createQueryBuilder('obs')
|
||||
.leftJoinAndSelect('obs.weatherStation', 'station')
|
||||
.orderBy('obs.observationTime', 'DESC')
|
||||
.skip(skip)
|
||||
.take(limit);
|
||||
|
||||
if (location) {
|
||||
queryBuilder.andWhere('station.location = :location', { location });
|
||||
}
|
||||
|
||||
if (startDate && endDate) {
|
||||
queryBuilder.andWhere('obs.observationTime BETWEEN :startDate AND :endDate', {
|
||||
startDate,
|
||||
endDate,
|
||||
});
|
||||
}
|
||||
|
||||
const [observations, total] = await queryBuilder.getManyAndCount();
|
||||
|
||||
return {
|
||||
observations,
|
||||
pagination: {
|
||||
page,
|
||||
limit,
|
||||
total,
|
||||
totalPages: Math.ceil(total / limit),
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
async getLatestObservations(limit: number = 5) {
|
||||
const observations = await this.weatherObservationRepository
|
||||
.createQueryBuilder('obs')
|
||||
.leftJoinAndSelect('obs.weatherStation', 'station')
|
||||
.orderBy('obs.observationTime', 'DESC')
|
||||
.limit(limit)
|
||||
.getMany();
|
||||
|
||||
return observations;
|
||||
}
|
||||
|
||||
// Weather Forecasts (enhanced)
|
||||
async getForecasts(query: WeatherQuery = {}) {
|
||||
const { page = 1, limit = 10, location } = query;
|
||||
const skip = (page - 1) * limit;
|
||||
|
||||
const queryBuilder = this.weatherForecastRepository
|
||||
.createQueryBuilder('forecast')
|
||||
.leftJoinAndSelect('forecast.weatherStation', 'station')
|
||||
.where('forecast.forecastTime > :now', { now: new Date() })
|
||||
.orderBy('forecast.forecastTime', 'ASC')
|
||||
.skip(skip)
|
||||
.take(limit);
|
||||
|
||||
if (location) {
|
||||
queryBuilder.andWhere('station.location = :location', { location });
|
||||
}
|
||||
|
||||
const [forecasts, total] = await queryBuilder.getManyAndCount();
|
||||
|
||||
return {
|
||||
forecasts,
|
||||
pagination: {
|
||||
page,
|
||||
limit,
|
||||
total,
|
||||
totalPages: Math.ceil(total / limit),
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
async getForecastsByStation(stationId: number, days: number = 7) {
|
||||
const endDate = new Date();
|
||||
endDate.setDate(endDate.getDate() + days);
|
||||
|
||||
const forecasts = await this.weatherForecastRepository
|
||||
.createQueryBuilder('forecast')
|
||||
.leftJoinAndSelect('forecast.weatherStation', 'station')
|
||||
.where('forecast.weatherStationId = :stationId', { stationId })
|
||||
.andWhere('forecast.forecastTime BETWEEN :now AND :endDate', {
|
||||
now: new Date(),
|
||||
endDate,
|
||||
})
|
||||
.orderBy('forecast.forecastTime', 'ASC')
|
||||
.getMany();
|
||||
|
||||
return forecasts;
|
||||
}
|
||||
|
||||
// Enhanced Weather Statistics
|
||||
async getWeatherStats() {
|
||||
const totalStations = await this.weatherStationRepository.count();
|
||||
const activeStations = await this.weatherStationRepository.count({
|
||||
where: { status: 'active' },
|
||||
});
|
||||
|
||||
const avgTemperature = await this.weatherObservationRepository
|
||||
.createQueryBuilder('obs')
|
||||
.select('AVG(obs.temperature)', 'avg')
|
||||
.where('obs.observationTime > :yesterday', { yesterday: new Date(Date.now() - 24 * 60 * 60 * 1000) })
|
||||
.getRawOne();
|
||||
|
||||
const avgHumidity = await this.weatherObservationRepository
|
||||
.createQueryBuilder('obs')
|
||||
.select('AVG(obs.humidity)', 'avg')
|
||||
.where('obs.observationTime > :yesterday', { yesterday: new Date(Date.now() - 24 * 60 * 60 * 1000) })
|
||||
.getRawOne();
|
||||
|
||||
const totalObservations = await this.weatherObservationRepository.count();
|
||||
const totalForecasts = await this.weatherForecastRepository.count({
|
||||
where: { forecastTime: Between(new Date(), new Date(Date.now() + 7 * 24 * 60 * 60 * 1000)) },
|
||||
});
|
||||
|
||||
return {
|
||||
totalStations,
|
||||
activeStations,
|
||||
totalObservations,
|
||||
totalForecasts,
|
||||
averageTemperature: parseFloat(avgTemperature?.avg || '0'),
|
||||
averageHumidity: parseFloat(avgHumidity?.avg || '0'),
|
||||
};
|
||||
}
|
||||
|
||||
async getCurrentWeatherSummary() {
|
||||
const latestObservations = await this.getLatestObservations(5);
|
||||
|
||||
return latestObservations.map(obs => ({
|
||||
temperature: parseFloat(obs.temperature.toString()),
|
||||
humidity: parseFloat(obs.humidity.toString()),
|
||||
condition: obs.condition,
|
||||
windSpeed: parseFloat(obs.windSpeed.toString()),
|
||||
visibility: parseFloat(obs.visibility.toString()),
|
||||
precipitation: parseFloat(obs.precipitation.toString()),
|
||||
}));
|
||||
}
|
||||
}
|
||||
2056
package-lock.json
generated
2056
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@ -29,5 +29,8 @@
|
||||
"workspaces": [
|
||||
"meteor-web-backend",
|
||||
"meteor-frontend"
|
||||
]
|
||||
}
|
||||
],
|
||||
"dependencies": {
|
||||
"node-fetch": "^2.7.0"
|
||||
}
|
||||
}
|
||||
|
||||
30
test-api.js
Normal file
30
test-api.js
Normal file
@ -0,0 +1,30 @@
|
||||
const fetch = require('node-fetch');
|
||||
|
||||
async function testAPI() {
|
||||
try {
|
||||
console.log('Testing register-email API...');
|
||||
|
||||
const response = await fetch('http://localhost:3001/api/v1/auth/register-email', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify({
|
||||
email: 'testuser@example.com',
|
||||
password: 'TestPass123',
|
||||
displayName: 'Test User'
|
||||
})
|
||||
});
|
||||
|
||||
console.log('Response status:', response.status);
|
||||
console.log('Response headers:', Object.fromEntries(response.headers));
|
||||
|
||||
const data = await response.text();
|
||||
console.log('Response body:', data);
|
||||
|
||||
} catch (error) {
|
||||
console.error('Error:', error.message);
|
||||
}
|
||||
}
|
||||
|
||||
testAPI();
|
||||
Loading…
x
Reference in New Issue
Block a user