257 lines
13 KiB
TypeScript
257 lines
13 KiB
TypeScript
'use client';
|
||
|
||
import React, { useState, useEffect, useCallback } from 'react';
|
||
import { useAuth } from '@/contexts/AuthContext';
|
||
import { useRouter } from 'next/navigation';
|
||
import Link from 'next/link';
|
||
import LoadingSpinner from '@/components/LoadingSpinner';
|
||
import { api, BaseResponse } from '@/utils/axios';
|
||
import { FiZap, FiClock, FiAlertCircle, FiCheckCircle, FiPower, FiArrowLeft, FiInfo } from 'react-icons/fi';
|
||
|
||
// 与 dashboard/page.tsx 类似的活动会话接口，可能需要根据后端VO调整
|
||
interface ActiveChargingSession {
|
||
id: number;
|
||
spotUidSnapshot: string | null;
|
||
robotUidSnapshot?: string | null;
|
||
chargeStartTime: string | null; // ISO String Date
|
||
status: string;
|
||
// 根据需要可以从后端 ChargingSessionVO 添加更多字段
|
||
// e.g., energyConsumedKwh, cost (though these might be final values)
|
||
}
|
||
|
||
const POLLING_INTERVAL = 5000; // 5 seconds for polling
|
||
|
||
// 定义终止状态常量，用于组件内多处使用
|
||
const TERMINAL_STATUSES = ['COMPLETED', 'PAID', 'CANCELLED_BY_USER', 'CANCELLED_BY_SYSTEM', 'ERROR', 'ROBOT_TASK_TIMEOUT'];
|
||
|
||
export default function ChargingStatusPage() {
|
||
const { isAuthenticated, isLoading: authLoading } = useAuth();
|
||
const router = useRouter();
|
||
|
||
const [session, setSession] = useState<ActiveChargingSession | null | undefined>(undefined);
|
||
const [isLoading, setIsLoading] = useState(true);
|
||
const [error, setError] = useState<string | null>(null);
|
||
const [isStopping, setIsStopping] = useState(false);
|
||
const [elapsedTime, setElapsedTime] = useState("00:00:00");
|
||
|
||
const fetchActiveSession = useCallback(async () => {
|
||
if (!isAuthenticated) return;
|
||
try {
|
||
const response = await api.get<BaseResponse<ActiveChargingSession | null>>('/session/my/active');
|
||
console.log('Active charging session response:', response.data);
|
||
if (response.data && response.data.code === 0) {
|
||
const activeSessionData = response.data.data;
|
||
setSession(activeSessionData);
|
||
setError(null);
|
||
if (activeSessionData) {
|
||
console.log('Current session status:', activeSessionData.status);
|
||
if (TERMINAL_STATUSES.includes(activeSessionData.status)) {
|
||
setTimeout(() => router.push('/dashboard'), 3000);
|
||
}
|
||
} else {
|
||
console.log('No active charging session found');
|
||
}
|
||
} else {
|
||
setError(response.data?.message || '获取充电状态失败');
|
||
}
|
||
} catch (err: any) {
|
||
console.error("Error fetching active session:", err);
|
||
setError(err.response?.data?.message || err.message || '网络错误，无法获取充电状态');
|
||
} finally {
|
||
setIsLoading(false);
|
||
}
|
||
}, [isAuthenticated, router]);
|
||
|
||
useEffect(() => {
|
||
if (!authLoading && !isAuthenticated) {
|
||
router.replace('/login');
|
||
return;
|
||
}
|
||
if (isAuthenticated) {
|
||
setIsLoading(true);
|
||
fetchActiveSession();
|
||
}
|
||
}, [authLoading, isAuthenticated, router, fetchActiveSession]);
|
||
|
||
useEffect(() => {
|
||
let intervalId: NodeJS.Timeout;
|
||
if (isAuthenticated && session && !isLoading) {
|
||
if (session && !TERMINAL_STATUSES.includes(session.status)) {
|
||
intervalId = setInterval(fetchActiveSession, POLLING_INTERVAL);
|
||
}
|
||
}
|
||
return () => clearInterval(intervalId);
|
||
}, [isAuthenticated, session, isLoading, fetchActiveSession]);
|
||
|
||
const calculateDuration = useCallback((startTime: string | null): string => {
|
||
if (!startTime) return '00:00:00';
|
||
const start = new Date(startTime).getTime();
|
||
const now = Date.now();
|
||
if (now < start) return '00:00:00';
|
||
let diff = Math.floor((now - start) / 1000);
|
||
const hours = String(Math.floor(diff / 3600)).padStart(2, '0');
|
||
diff %= 3600;
|
||
const minutes = String(Math.floor(diff / 60)).padStart(2, '0');
|
||
const seconds = String(diff % 60).padStart(2, '0');
|
||
return `${hours}:${minutes}:${seconds}`;
|
||
}, []);
|
||
|
||
useEffect(() => {
|
||
let timerId: NodeJS.Timeout;
|
||
if (session && session.chargeStartTime && (session.status === 'CHARGING_STARTED' || session.status === 'CHARGING_IN_PROGRESS')) {
|
||
setElapsedTime(calculateDuration(session.chargeStartTime)); // Initial calculation
|
||
timerId = setInterval(() => {
|
||
setElapsedTime(calculateDuration(session.chargeStartTime));
|
||
}, 1000);
|
||
} else if (session && session.chargeStartTime) {
|
||
setElapsedTime(calculateDuration(session.chargeStartTime)); // Calculate final duration once if session ended
|
||
} else {
|
||
setElapsedTime('00:00:00');
|
||
}
|
||
return () => clearInterval(timerId);
|
||
}, [session, calculateDuration]);
|
||
|
||
const handleStopCharging = async () => {
|
||
if (!session || !session.id) {
|
||
setError("无法停止充电：无效的会话信息。");
|
||
return;
|
||
}
|
||
setIsStopping(true);
|
||
setError(null);
|
||
try {
|
||
const response = await api.post<BaseResponse<any>>(`/session/stop`, { sessionId: session.id });
|
||
if (response.data && response.data.code === 0) {
|
||
// Rely on polling to update the session state
|
||
// Optionally, trigger an immediate refresh:
|
||
fetchActiveSession();
|
||
} else {
|
||
setError(response.data?.message || "停止充电请求失败");
|
||
}
|
||
} catch (err: any) {
|
||
console.error("Error stopping charging session:", err);
|
||
setError(err.response?.data?.message || err.message || "停止充电时发生错误");
|
||
}
|
||
setIsStopping(false);
|
||
};
|
||
|
||
if (authLoading || (isLoading && session === undefined)) {
|
||
return <LoadingSpinner />;
|
||
}
|
||
|
||
if (!isAuthenticated) {
|
||
return <div className="p-4 text-center">请先登录。</div>;
|
||
}
|
||
|
||
return (
|
||
<div className="min-h-screen bg-gray-100 p-4 md:p-8 flex flex-col items-center">
|
||
<div className="w-full max-w-2xl">
|
||
<header className="mb-8 flex items-center">
|
||
<Link href="/dashboard" className="text-indigo-600 hover:text-indigo-700 mr-4">
|
||
<FiArrowLeft size={24} />
|
||
</Link>
|
||
<h1 className="text-3xl font-bold text-gray-800">充电状态</h1>
|
||
</header>
|
||
|
||
{error && (
|
||
<div className="mb-6 p-4 bg-red-100 text-red-700 border border-red-300 rounded-md shadow-sm" role="alert">
|
||
<div className="flex items-center">
|
||
<FiAlertCircle className="mr-2" />
|
||
<p>{error}</p>
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{session === null && !error && (
|
||
<div className="bg-white p-8 rounded-xl shadow-xl text-center">
|
||
<FiInfo size={48} className="mx-auto text-blue-500 mb-4" />
|
||
<h2 className="text-2xl font-semibold text-gray-700 mb-2">无活动充电会话</h2>
|
||
<p className="text-gray-600 mb-6">您当前没有正在进行的充电。是否要开始新的充电？</p>
|
||
<Link href="/request-charging" className="inline-block bg-indigo-600 hover:bg-indigo-700 text-white font-semibold py-3 px-6 rounded-lg shadow-md transition duration-150 ease-in-out">
|
||
前往充电
|
||
</Link>
|
||
</div>
|
||
)}
|
||
|
||
{session && (
|
||
<div className="bg-white p-6 md:p-8 rounded-xl shadow-xl">
|
||
<div className="mb-6 border-b pb-4 border-gray-200">
|
||
<h2 className="text-2xl font-semibold text-gray-700 mb-1">会话ID: {session.id}</h2>
|
||
<p className={`text-lg font-medium ${session.status === 'CHARGING_STARTED' || session.status === 'CHARGING_IN_PROGRESS' ? 'text-green-500' : 'text-gray-600'}`}>
|
||
状态: {session.status}
|
||
</p>
|
||
</div>
|
||
|
||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
|
||
<div>
|
||
<p className="text-sm text-gray-500">车位编号</p>
|
||
<p className="text-lg font-medium text-gray-800">{session.spotUidSnapshot || 'N/A'}</p>
|
||
</div>
|
||
<div>
|
||
<p className="text-sm text-gray-500">机器人编号</p>
|
||
<p className="text-lg font-medium text-gray-800">{session.robotUidSnapshot || 'N/A'}</p>
|
||
</div>
|
||
<div>
|
||
<p className="text-sm text-gray-500">开始时间</p>
|
||
<p className="text-lg font-medium text-gray-800">
|
||
{session.chargeStartTime ? new Date(session.chargeStartTime).toLocaleString() : '等待开始'}
|
||
</p>
|
||
</div>
|
||
<div>
|
||
<p className="text-sm text-gray-500">已充电时长</p>
|
||
<p className="text-2xl font-bold text-indigo-600 tabular-nums">
|
||
<FiClock className="inline mr-2 mb-1" />{elapsedTime}
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="mb-8">
|
||
<p className="text-sm text-gray-500 mb-1">充电进度 (基于时间)</p>
|
||
<div className="w-full bg-gray-200 rounded-full h-4 overflow-hidden">
|
||
<div className={`bg-green-500 h-4 ${session.status === 'CHARGING_STARTED' || session.status === 'CHARGING_IN_PROGRESS' ? 'animate-pulse-fast' : ''}`} style={{ width: '100%' }}></div>
|
||
</div>
|
||
<p className="text-xs text-gray-500 mt-1">充电电量将根据总充电时间计算。</p>
|
||
</div>
|
||
|
||
{/* 根据会话状态显示不同的内容 */}
|
||
{(session.status === 'CHARGING_STARTED' || session.status === 'CHARGING_IN_PROGRESS' || session.status === 'ROBOT_ARRIVED' || session.status === 'ROBOT_ASSIGNED') ? (
|
||
// 显示停止充电按钮
|
||
<button
|
||
onClick={handleStopCharging}
|
||
disabled={isStopping}
|
||
className="w-full bg-red-500 hover:bg-red-600 text-white font-bold py-3 px-4 rounded-lg shadow-md transition duration-150 ease-in-out disabled:opacity-60 disabled:cursor-not-allowed flex items-center justify-center"
|
||
>
|
||
{isStopping ? (
|
||
<>
|
||
<svg className="animate-spin -ml-1 mr-3 h-5 w-5 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
|
||
<circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
|
||
<path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
|
||
</svg>
|
||
正在停止...
|
||
</>
|
||
) : (
|
||
<><FiPower className="mr-2" /> 停止充电</>
|
||
)}
|
||
</button>
|
||
) : (
|
||
// 会话状态不适合显示停止按钮，显示原因
|
||
<div className="mb-2 p-3 bg-yellow-50 border border-yellow-200 rounded-md text-sm text-yellow-700">
|
||
当前会话状态为 <strong>{session.status}</strong>，无法执行停止充电操作。
|
||
{TERMINAL_STATUSES.includes(session.status) && " 会话已结束或处于终止状态。"}
|
||
</div>
|
||
)}
|
||
{(session.status === 'COMPLETED' || session.status === 'PAID' || session.status === 'PAYMENT_PENDING') && (
|
||
<div className="mt-6 text-center p-4 bg-green-50 border-green-200 border rounded-md">
|
||
<FiCheckCircle size={28} className="text-green-500 mx-auto mb-2" />
|
||
<p className="text-green-700 font-semibold">充电已完成或等待支付。</p>
|
||
<p className="text-sm text-gray-600">感谢您的使用！</p>
|
||
<Link href="/my-sessions" className="mt-3 inline-block text-indigo-600 hover:text-indigo-800 font-medium">
|
||
查看充电记录
|
||
</Link>
|
||
</div>
|
||
)}
|
||
</div>
|
||
)}
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|