270 lines
9.0 KiB
TypeScript
270 lines
9.0 KiB
TypeScript
import React, { useState, useEffect } from 'react';
|
|
import { Card, Typography, Button, Space, Tag, Progress, Empty, Spin, message, Row, Col, Divider } from 'antd';
|
|
import { FileTextOutlined, CameraOutlined, ScheduleOutlined, PlusOutlined, ReloadOutlined } from '@ant-design/icons';
|
|
import { useNavigate } from 'react-router-dom';
|
|
import apiClient from '../../utils/request';
|
|
import dayjs from 'dayjs';
|
|
import { useAuthStore } from '../../store/authStore';
|
|
import { useLanguageStore } from '../../store/languageStore';
|
|
|
|
const { Title, Paragraph, Text } = Typography;
|
|
|
|
const WEATHER_ICONS: Record<string, string> = {
|
|
sunny: '☀️',
|
|
cloudy: '⛅',
|
|
rainy: '🌧️',
|
|
stormy: '⛈️',
|
|
windy: '💨',
|
|
};
|
|
|
|
interface Project {
|
|
id: number;
|
|
project_code: string;
|
|
name: string;
|
|
customer_name: string;
|
|
status: string;
|
|
start_date: string;
|
|
expected_end_date: string;
|
|
contract_amount: number;
|
|
currency: string;
|
|
manager_name: string;
|
|
progress_percentage: number;
|
|
latest_log?: {
|
|
id: number;
|
|
log_date: string;
|
|
weather: string;
|
|
work_content: string;
|
|
};
|
|
}
|
|
|
|
const ConstructionList: React.FC = () => {
|
|
const [isMobile, setIsMobile] = useState(false);
|
|
const [projects, setProjects] = useState<Project[]>([]);
|
|
const [loading, setLoading] = useState(true);
|
|
const navigate = useNavigate();
|
|
const { user } = useAuthStore();
|
|
const { t, currentLanguage } = useLanguageStore();
|
|
|
|
const STATUS_CONFIG: Record<string, { color: string; text: string }> = {
|
|
pending: { color: 'default', text: t('construction.pendingStart') },
|
|
active: { color: 'processing', text: t('construction.underConstruction') },
|
|
completed: { color: 'success', text: t('construction.completed') },
|
|
suspended: { color: 'warning', text: t('construction.paused') },
|
|
cancelled: { color: 'error', text: t('construction.cancelled') },
|
|
};
|
|
|
|
useEffect(() => {
|
|
const checkMobile = () => setIsMobile(window.innerWidth <= 768);
|
|
checkMobile();
|
|
window.addEventListener('resize', checkMobile);
|
|
return () => window.removeEventListener('resize', checkMobile);
|
|
}, []);
|
|
|
|
useEffect(() => {
|
|
fetchProjects();
|
|
}, []);
|
|
|
|
const fetchProjects = async () => {
|
|
setLoading(true);
|
|
try {
|
|
const res = await apiClient.get('/construction/my-projects');
|
|
if (res.data.success) {
|
|
setProjects(res.data.data);
|
|
}
|
|
} catch (error) {
|
|
console.error('获取项目列表失败:', error);
|
|
message.error(t('construction.getListFailed'));
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
const formatCurrency = (amount: number, currency: string = 'CNY') => {
|
|
const symbols: Record<string, string> = {
|
|
CNY: '¥',
|
|
USD: '$',
|
|
LAK: '₭',
|
|
THB: '฿',
|
|
};
|
|
const symbol = symbols[currency] || '¥';
|
|
return `${symbol}${(amount || 0).toLocaleString('zh-CN', { minimumFractionDigits: 0 })}`;
|
|
};
|
|
|
|
const isToday = (dateStr: string) => {
|
|
return dayjs(dateStr).isSame(dayjs(), 'day');
|
|
};
|
|
|
|
const getWeatherLabel = (weather: string) => {
|
|
const icon = WEATHER_ICONS[weather] || '';
|
|
const textMap: Record<string, string> = {
|
|
sunny: t('construction.sunny'),
|
|
cloudy: t('construction.cloudy'),
|
|
rainy: t('construction.rain'),
|
|
stormy: t('construction.thunderstorm'),
|
|
windy: t('construction.windy'),
|
|
};
|
|
return `${icon} ${textMap[weather] || weather}`;
|
|
};
|
|
|
|
const renderProjectCard = (project: Project) => {
|
|
const statusConfig = STATUS_CONFIG[project.status] || STATUS_CONFIG.pending;
|
|
const hasTodayLog = project.latest_log && isToday(project.latest_log.log_date);
|
|
|
|
return (
|
|
<Card
|
|
key={project.id}
|
|
style={{
|
|
marginBottom: isMobile ? 12 : 16,
|
|
borderRadius: 12,
|
|
boxShadow: '0 2px 8px rgba(0,0,0,0.08)',
|
|
}}
|
|
styles={{ body: { padding: isMobile ? 16 : 20 } }}
|
|
>
|
|
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: 12 }}>
|
|
<div style={{ flex: 1 }}>
|
|
<div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 4 }}>
|
|
<span style={{ fontSize: 20 }}>🎯</span>
|
|
<Text strong style={{ fontSize: isMobile ? 15 : 16 }}>{project.name}</Text>
|
|
</div>
|
|
<Text type="secondary" style={{ fontSize: 13 }}>
|
|
{t('construction.customerLabel')}{project.customer_name || t('common.notSet')}
|
|
</Text>
|
|
</div>
|
|
<Tag color={statusConfig.color} style={{ marginLeft: 8 }}>
|
|
{statusConfig.text}
|
|
</Tag>
|
|
</div>
|
|
|
|
<div style={{ marginBottom: 12 }}>
|
|
<div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 4 }}>
|
|
<Text type="secondary" style={{ fontSize: 12 }}>{t('construction.progress')}</Text>
|
|
<Text strong style={{ fontSize: 12 }}>{Math.round((project.progress_percentage || 0))}%</Text>
|
|
</div>
|
|
<Progress
|
|
percent={Math.round((project.progress_percentage || 0))}
|
|
showInfo={false}
|
|
strokeColor={{
|
|
'0%': '#108ee9',
|
|
'100%': '#87d068',
|
|
}}
|
|
trailColor="#f0f0f0"
|
|
/>
|
|
</div>
|
|
|
|
{project.status === 'active' && (
|
|
<div style={{
|
|
padding: '8px 12px',
|
|
background: hasTodayLog ? '#f6ffed' : '#fff7e6',
|
|
borderRadius: 8,
|
|
marginBottom: 12,
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
gap: 8
|
|
}}>
|
|
{hasTodayLog ? (
|
|
<>
|
|
<span>✅</span>
|
|
<Text style={{ fontSize: 13 }}>
|
|
{t('construction.todayLog')}{project.latest_log?.work_content?.substring(0, 30)}...
|
|
</Text>
|
|
</>
|
|
) : (
|
|
<>
|
|
<span>⚠️</span>
|
|
<Text type="warning" style={{ fontSize: 13 }}>{t('construction.todayLogEmpty')}</Text>
|
|
</>
|
|
)}
|
|
</div>
|
|
)}
|
|
|
|
<Divider style={{ margin: '12px 0' }} />
|
|
|
|
<Row gutter={[8, 8]}>
|
|
<Col xs={24} sm={8}>
|
|
<Button
|
|
type={project.status === 'active' && !hasTodayLog ? 'primary' : 'default'}
|
|
icon={<FileTextOutlined />}
|
|
onClick={() => navigate(`/construction/${project.id}/logs`)}
|
|
block
|
|
size={isMobile ? 'large' : 'middle'}
|
|
style={{ borderRadius: 8 }}
|
|
>
|
|
{project.status === 'active' && !hasTodayLog ? `📝 ${t('construction.writeLog')}` : `📝 ${t('construction.constructionLog')}`}
|
|
</Button>
|
|
</Col>
|
|
<Col xs={24} sm={8}>
|
|
<Button
|
|
icon={<CameraOutlined />}
|
|
onClick={() => navigate(`/construction/${project.id}/logs`)}
|
|
block
|
|
size={isMobile ? 'large' : 'middle'}
|
|
style={{ borderRadius: 8 }}
|
|
>
|
|
{`📷 ${t('construction.uploadPhoto')}`}
|
|
</Button>
|
|
</Col>
|
|
<Col xs={24} sm={8}>
|
|
<Button
|
|
icon={<ScheduleOutlined />}
|
|
onClick={() => navigate(`/construction/${project.id}/milestones`)}
|
|
block
|
|
size={isMobile ? 'large' : 'middle'}
|
|
style={{ borderRadius: 8 }}
|
|
>
|
|
{`📋 ${t('construction.milestoneProgress')}`}
|
|
</Button>
|
|
</Col>
|
|
</Row>
|
|
</Card>
|
|
);
|
|
};
|
|
|
|
return (
|
|
<div style={{
|
|
padding: isMobile ? 12 : 24,
|
|
maxWidth: 1200,
|
|
margin: '0 auto'
|
|
}}>
|
|
<div style={{ marginBottom: isMobile ? 16 : 24 }}>
|
|
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
|
|
<Title level={isMobile ? 4 : 3} style={{ marginBottom: 0 }}>{t('construction.management')}</Title>
|
|
<Button
|
|
icon={<ReloadOutlined />}
|
|
onClick={fetchProjects}
|
|
loading={loading}
|
|
>
|
|
{t('common.refresh')}
|
|
</Button>
|
|
</div>
|
|
<Paragraph type="secondary" style={{ marginTop: 8, marginBottom: 0 }}>
|
|
{t('construction.description')}
|
|
</Paragraph>
|
|
</div>
|
|
|
|
{loading ? (
|
|
<div style={{ textAlign: 'center', padding: 60 }}>
|
|
<Spin size="large" />
|
|
<Paragraph type="secondary" style={{ marginTop: 16 }}>{t('common.loading')}</Paragraph>
|
|
</div>
|
|
) : projects.length === 0 ? (
|
|
<Card style={{ borderRadius: 12 }}>
|
|
<Empty
|
|
description={t('construction.noConstructionProjects')}
|
|
image={Empty.PRESENTED_IMAGE_SIMPLE}
|
|
>
|
|
<Text type="secondary">{t('construction.contactAdmin')}</Text>
|
|
</Empty>
|
|
</Card>
|
|
) : (
|
|
<div>
|
|
<Text type="secondary" style={{ marginBottom: 12, display: 'block' }}>
|
|
{t('construction.myProjects')} ({projects.length})
|
|
</Text>
|
|
{projects.map(project => renderProjectCard(project))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default ConstructionList; |