Add File
This commit is contained in:
284
src/family/pages/Dashboard.tsx
Normal file
284
src/family/pages/Dashboard.tsx
Normal file
@@ -0,0 +1,284 @@
|
|||||||
|
import React, { useState, useEffect } from 'react';
|
||||||
|
import {
|
||||||
|
MessageCircle,
|
||||||
|
Heart,
|
||||||
|
Image as ImageIcon,
|
||||||
|
AlertTriangle,
|
||||||
|
Video,
|
||||||
|
Maximize2,
|
||||||
|
} from 'lucide-react';
|
||||||
|
import { MetricCard } from '../components/MetricCard';
|
||||||
|
import { TrendChart } from '../components/TrendChart';
|
||||||
|
import * as moodService from '../services/moodService';
|
||||||
|
import * as mediaService from '../services/mediaService';
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 家属端 Dashboard - 今天概览
|
||||||
|
* 手机浏览器优化 - 单列布局，紧凑显示
|
||||||
|
* 一页看完今天所有重要信息
|
||||||
|
*/
|
||||||
|
|
||||||
|
interface DashboardProps {
|
||||||
|
onNavigate?: (page: 'interaction' | 'messages' | 'care' | 'alerts' | 'media' | 'mood') => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface ChatMessage {
|
||||||
|
username: string;
|
||||||
|
is_adopted: number;
|
||||||
|
type: 'fay' | 'member';
|
||||||
|
way: string;
|
||||||
|
content: string;
|
||||||
|
createtime: number;
|
||||||
|
timetext: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
const API_BASE_URL = 'http://127.0.0.1:5000';
|
||||||
|
const familyId = 'family_001';
|
||||||
|
|
||||||
|
export const Dashboard: React.FC<DashboardProps> = ({ onNavigate }) => {
|
||||||
|
const [isVideoFullscreen, setIsVideoFullscreen] = useState(false);
|
||||||
|
const [todayInteractionCount, setTodayInteractionCount] = useState(0);
|
||||||
|
const [latestMood, setLatestMood] = useState<moodService.MoodRecord | null>(null);
|
||||||
|
const [moodStats, setMoodStats] = useState<moodService.MoodStatsResponse | null>(null);
|
||||||
|
const [recentPlays, setRecentPlays] = useState<mediaService.RecentPlay[]>([]);
|
||||||
|
|
||||||
|
// 加载今日交互次数
|
||||||
|
const loadTodayInteractionCount = async () => {
|
||||||
|
try {
|
||||||
|
const response = await fetch(`${API_BASE_URL}/api/get-msg`, {
|
||||||
|
method: 'POST',
|
||||||
|
headers: {
|
||||||
|
'Content-Type': 'application/json',
|
||||||
|
},
|
||||||
|
body: JSON.stringify({ username: 'User', limit: 300 }),
|
||||||
|
});
|
||||||
|
|
||||||
|
if (response.ok) {
|
||||||
|
const data = await response.json();
|
||||||
|
const messages: ChatMessage[] = data.list || [];
|
||||||
|
|
||||||
|
// 获取今天的开始时间戳（00:00:00）
|
||||||
|
const today = new Date();
|
||||||
|
today.setHours(0, 0, 0, 0);
|
||||||
|
const todayTimestamp = Math.floor(today.getTime() / 1000);
|
||||||
|
|
||||||
|
// 统计今天老人说的话（type === 'member'）
|
||||||
|
const todayMemberMessages = messages.filter(
|
||||||
|
msg => msg.type === 'member' && msg.createtime >= todayTimestamp
|
||||||
|
);
|
||||||
|
|
||||||
|
setTodayInteractionCount(todayMemberMessages.length);
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error('获取今日交互次数失败:', error);
|
||||||
|
// 失败时保持为0，不影响页面显示
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// 加载情绪数据
|
||||||
|
const loadMoodData = async () => {
|
||||||
|
try {
|
||||||
|
const [latest, stats] = await Promise.all([
|
||||||
|
moodService.getFamilyMoods(familyId, { limit: 1 }),
|
||||||
|
moodService.getMoodStats(familyId, { days: 7 }),
|
||||||
|
]);
|
||||||
|
|
||||||
|
if (latest.records.length > 0) {
|
||||||
|
setLatestMood(latest.records[0]);
|
||||||
|
}
|
||||||
|
setMoodStats(stats);
|
||||||
|
} catch (error) {
|
||||||
|
console.error('加载情绪数据失败:', error);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// 加载最近播放
|
||||||
|
const loadRecentPlays = async () => {
|
||||||
|
try {
|
||||||
|
const plays = await mediaService.getRecentPlays(familyId, 2);
|
||||||
|
setRecentPlays(plays);
|
||||||
|
} catch (error) {
|
||||||
|
console.error('加载最近播放失败:', error);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
loadTodayInteractionCount();
|
||||||
|
loadMoodData();
|
||||||
|
loadRecentPlays();
|
||||||
|
// 每30秒刷新一次
|
||||||
|
const interval = setInterval(() => {
|
||||||
|
loadTodayInteractionCount();
|
||||||
|
loadMoodData();
|
||||||
|
loadRecentPlays();
|
||||||
|
}, 30000);
|
||||||
|
return () => clearInterval(interval);
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
// 情绪趋势数据 - 使用真实数据或默认数据
|
||||||
|
const emotionData = moodStats?.daily_stats.map(stat => ({
|
||||||
|
date: new Date(stat.date).toLocaleDateString('zh-CN', { month: 'numeric', day: 'numeric' }),
|
||||||
|
value: stat.avg_score,
|
||||||
|
})) || [];
|
||||||
|
|
||||||
|
|
||||||
|
// 格式化播放时间
|
||||||
|
const formatPlayTime = (playedAt: string) => {
|
||||||
|
const playTime = new Date(playedAt);
|
||||||
|
const now = new Date();
|
||||||
|
const diffMs = now.getTime() - playTime.getTime();
|
||||||
|
const diffMins = Math.floor(diffMs / 60000);
|
||||||
|
const diffHours = Math.floor(diffMs / 3600000);
|
||||||
|
const diffDays = Math.floor(diffMs / 86400000);
|
||||||
|
|
||||||
|
if (diffMins < 1) return '刚刚';
|
||||||
|
if (diffMins < 60) return `${diffMins}分钟前`;
|
||||||
|
if (diffHours < 24) return `${diffHours}小时前`;
|
||||||
|
if (diffDays === 1) return '昨天';
|
||||||
|
if (diffDays < 7) return `${diffDays}天前`;
|
||||||
|
|
||||||
|
return playTime.toLocaleDateString('zh-CN', { month: 'numeric', day: 'numeric' });
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="min-h-screen bg-gray-50">
|
||||||
|
{/* 主要内容区 - 手机优化 */}
|
||||||
|
<div className="px-4 py-4">
|
||||||
|
{/* 实时监控视频 */}
|
||||||
|
<div className="card p-0 mb-4 overflow-hidden">
|
||||||
|
<div className="relative">
|
||||||
|
{/* 视频播放器 */}
|
||||||
|
<div className="relative bg-gray-900 aspect-video">
|
||||||
|
{/* 模拟视频画面 */}
|
||||||
|
<div className="absolute inset-0 flex items-center justify-center">
|
||||||
|
<Video size={48} className="text-gray-600" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* 实时状态标签 */}
|
||||||
|
<div className="absolute top-3 left-3 flex items-center gap-1.5 bg-red-600 text-white px-2.5 py-1 rounded-full text-xs font-medium">
|
||||||
|
<div className="w-2 h-2 bg-white rounded-full animate-pulse"></div>
|
||||||
|
实时
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* 全屏按钮 */}
|
||||||
|
<button
|
||||||
|
onClick={() => setIsVideoFullscreen(!isVideoFullscreen)}
|
||||||
|
className="absolute top-3 right-3 bg-black/50 hover:bg-black/70 text-white p-2 rounded-lg transition-colors"
|
||||||
|
>
|
||||||
|
<Maximize2 size={18} />
|
||||||
|
</button>
|
||||||
|
|
||||||
|
{/* 视频信息叠加 */}
|
||||||
|
<div className="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/70 to-transparent p-3">
|
||||||
|
<div className="text-white">
|
||||||
|
<div className="text-xs opacity-90 mb-0.5">客厅监控</div>
|
||||||
|
<div className="text-sm font-medium">张奶奶正在与数字人对话</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* 视频控制栏 */}
|
||||||
|
<div className="bg-white border-t border-gray-200 px-4 py-2.5">
|
||||||
|
<div className="flex items-center justify-between text-xs">
|
||||||
|
<div className="flex items-center gap-3">
|
||||||
|
<span className="text-gray-600">画质：高清</span>
|
||||||
|
<span className="text-gray-300">|</span>
|
||||||
|
<span className="text-gray-600">延迟：<1s</span>
|
||||||
|
</div>
|
||||||
|
<button className="text-primary-600 hover:text-primary-700 font-medium">
|
||||||
|
切换摄像头
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
{/* 关键指标卡片 - 手机单列布局 */}
|
||||||
|
<div className="grid grid-cols-2 gap-3 mb-4">
|
||||||
|
<MetricCard
|
||||||
|
title="今日交互"
|
||||||
|
value={`${todayInteractionCount}次`}
|
||||||
|
subtitle="老人与数字人对话"
|
||||||
|
icon={MessageCircle}
|
||||||
|
color="blue"
|
||||||
|
onClick={() => onNavigate?.('interaction')}
|
||||||
|
/>
|
||||||
|
<MetricCard
|
||||||
|
title="情绪状态"
|
||||||
|
value={latestMood ? moodService.moodEmojiMap[latestMood.mood_type] : '暂无记录'}
|
||||||
|
subtitle={latestMood
|
||||||
|
? `${latestMood.mood_score}分 · ${moodService.formatRecordTime(latestMood.recorded_at || latestMood.created_at || '')}`
|
||||||
|
: '等待老人记录情绪'}
|
||||||
|
icon={Heart}
|
||||||
|
color={latestMood && latestMood.mood_score >= 6 ? 'green' : latestMood && latestMood.mood_score >= 4 ? 'yellow' : 'red'}
|
||||||
|
onClick={() => onNavigate?.('mood')}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* 趋势图表 - 手机单列堆叠 */}
|
||||||
|
<div className="space-y-4 mb-4">
|
||||||
|
<TrendChart
|
||||||
|
title="近 7 天情绪趋势"
|
||||||
|
data={emotionData}
|
||||||
|
color="#10b981"
|
||||||
|
height={220}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* 最近播放 - 手机优化 */}
|
||||||
|
<div className="card p-4 mb-4">
|
||||||
|
<div className="flex items-center justify-between mb-3">
|
||||||
|
<h3 className="text-base font-bold text-gray-900">最近播放</h3>
|
||||||
|
<button
|
||||||
|
onClick={() => onNavigate?.('media')}
|
||||||
|
className="text-sm text-primary-600 hover:text-primary-700 font-medium"
|
||||||
|
>
|
||||||
|
全部
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
{recentPlays.length > 0 ? (
|
||||||
|
<div className="space-y-3">
|
||||||
|
{recentPlays.map((media) => (
|
||||||
|
<div
|
||||||
|
key={media.id}
|
||||||
|
className="flex gap-3 p-3 rounded-lg border border-gray-200 active:bg-primary-50 transition-colors"
|
||||||
|
>
|
||||||
|
<div className="w-16 h-16 bg-gray-200 rounded-lg flex items-center justify-center flex-shrink-0 overflow-hidden">
|
||||||
|
{media.thumbnail_path ? (
|
||||||
|
<img
|
||||||
|
src={mediaService.getThumbnailUrl(media.thumbnail_path)}
|
||||||
|
alt={media.title}
|
||||||
|
className="w-full h-full object-cover"
|
||||||
|
onError={(e) => {
|
||||||
|
e.currentTarget.style.display = 'none';
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
) : (
|
||||||
|
<ImageIcon size={24} className="text-gray-400" />
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
<div className="flex-1 min-w-0">
|
||||||
|
<h4 className="text-sm font-medium text-gray-900 mb-1 truncate">
|
||||||
|
{media.title}
|
||||||
|
</h4>
|
||||||
|
<p className="text-xs text-gray-500 mb-2">{formatPlayTime(media.played_at)}</p>
|
||||||
|
<div className="flex items-center gap-3 text-xs">
|
||||||
|
<span className="text-green-600">👍 {media.likes}</span>
|
||||||
|
<span className="text-red-600">👎 {media.dislikes}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<div className="text-center py-8 text-gray-400">
|
||||||
|
<p className="text-sm">还没有播放记录</p>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
Reference in New Issue
Block a user