574 lines
20 KiB
TypeScript
574 lines
20 KiB
TypeScript
import React, { useEffect, useState, useCallback } from 'react';
|
||
import {
|
||
Row,
|
||
Col,
|
||
Card,
|
||
Tag,
|
||
Select,
|
||
Statistic,
|
||
Modal,
|
||
Spin,
|
||
Badge,
|
||
Tooltip,
|
||
DatePicker,
|
||
Alert,
|
||
Button,
|
||
Switch,
|
||
Space,
|
||
} from 'antd';
|
||
import {
|
||
HomeOutlined,
|
||
UserOutlined,
|
||
CalendarOutlined,
|
||
BankOutlined,
|
||
HistoryOutlined,
|
||
ShopOutlined,
|
||
CheckCircleOutlined,
|
||
SaveOutlined,
|
||
} from '@ant-design/icons';
|
||
import dayjs, { Dayjs } from 'dayjs';
|
||
import api from '../../api';
|
||
import { message } from '../../ui/app-message';
|
||
import PermissionButton from '../../components/PermissionButton';
|
||
import { usePermission } from '../../hooks/usePermission';
|
||
import { getInitialPresentOccupancyIds, togglePresentOccupancy } from './inspection-state';
|
||
|
||
function getCardStyle(room: any): React.CSSProperties {
|
||
let base: React.CSSProperties;
|
||
if (room.status === 'maintenance') base = { background: '#f5f5f5', borderColor: '#d9d9d9' };
|
||
else if (room.currentCount === 0) base = { background: '#f6ffed', borderColor: '#b7eb8f' };
|
||
else if (room.currentCount >= room.capacity)
|
||
base = { background: '#fff2f0', borderColor: '#ffccc7' };
|
||
else base = { background: '#e6f4ff', borderColor: '#91caff' };
|
||
if (room.organizationColor) {
|
||
return {
|
||
...base,
|
||
background: `color-mix(in srgb, ${room.organizationColor} 15%, ${base.background || '#fff'} 85%)`,
|
||
};
|
||
}
|
||
return base;
|
||
}
|
||
|
||
function getStatusLabel(room: any) {
|
||
if (room.status === 'maintenance') return <Tag color="default">维修中</Tag>;
|
||
if (room.currentCount === 0) return <Tag color="success">空闲</Tag>;
|
||
if (room.currentCount >= room.capacity) return <Tag color="error">满员</Tag>;
|
||
return <Tag color="processing">部分入住</Tag>;
|
||
}
|
||
|
||
function getOrganizationTags(occupants: any[]) {
|
||
const organizationList = [
|
||
...new Map(
|
||
occupants
|
||
.filter((o: any) => o.organizationName)
|
||
.map((o: any) => [
|
||
o.organizationId,
|
||
{ name: o.organizationName, color: o.organizationColor },
|
||
]),
|
||
).values(),
|
||
] as { name: string; color: string | null }[];
|
||
if (organizationList.length === 0) return null;
|
||
return (
|
||
<div className="room-card-tag-wrapper" style={{ marginBottom: 6 }}>
|
||
{organizationList.map((t) => (
|
||
<Tag
|
||
key={t.name}
|
||
color={t.color || 'gold'}
|
||
style={{ fontSize: 12, marginBottom: 4, maxWidth: '100%' }}
|
||
icon={<ShopOutlined />}
|
||
>
|
||
{t.name}
|
||
</Tag>
|
||
))}
|
||
</div>
|
||
);
|
||
}
|
||
|
||
const RoomVisualPage: React.FC = () => {
|
||
const [data, setData] = useState<any>(null);
|
||
const [loading, setLoading] = useState(true);
|
||
const [selectedBuilding, setSelectedBuilding] = useState<string>('all');
|
||
const [selectedOrganization, setSelectedOrganization] = useState<number | 'all'>('all');
|
||
const [detailRoom, setDetailRoom] = useState<any>(null);
|
||
const [asOf, setAsOf] = useState<Dayjs | null>(null);
|
||
const [presentOccupancyIds, setPresentOccupancyIds] = useState<number[]>([]);
|
||
const [inspectionSaving, setInspectionSaving] = useState(false);
|
||
const { hasPermission } = usePermission();
|
||
|
||
const isHistorical = !!asOf && !asOf.isSame(dayjs(), 'day');
|
||
|
||
const fetchData = useCallback(async () => {
|
||
setLoading(true);
|
||
try {
|
||
const params = isHistorical ? { asOf: asOf!.format('YYYY-MM-DD') } : undefined;
|
||
const res: any = await api.get('/rooms/visual', { params });
|
||
setData(res);
|
||
} catch (e: unknown) {
|
||
const err = e as { message?: string };
|
||
message.error(err?.message || '加载失败，请稍后重试');
|
||
}
|
||
setLoading(false);
|
||
}, [isHistorical, asOf]);
|
||
|
||
useEffect(() => {
|
||
fetchData();
|
||
}, [fetchData]);
|
||
|
||
useEffect(() => {
|
||
if (!detailRoom) {
|
||
setPresentOccupancyIds([]);
|
||
return;
|
||
}
|
||
setPresentOccupancyIds(
|
||
getInitialPresentOccupancyIds(
|
||
detailRoom.occupants || [],
|
||
detailRoom.inspection?.submitted === true,
|
||
),
|
||
);
|
||
}, [detailRoom]);
|
||
|
||
const inspectionDate = (asOf || dayjs()).format('YYYY-MM-DD');
|
||
|
||
const submitInspection = async () => {
|
||
if (!detailRoom || isHistorical) return;
|
||
setInspectionSaving(true);
|
||
try {
|
||
await api.put(`/rooms/${detailRoom.id}/inspections/${inspectionDate}`, {
|
||
presentOccupancyIds,
|
||
});
|
||
message.success(detailRoom.inspection?.submitted ? '查寝记录已更新' : '查寝已提交');
|
||
const params = isHistorical ? { asOf: inspectionDate } : undefined;
|
||
const res: any = await api.get('/rooms/visual', { params });
|
||
setData(res);
|
||
const updatedRoom = res.rooms.find((room: any) => room.id === detailRoom.id);
|
||
if (updatedRoom) setDetailRoom(updatedRoom);
|
||
} catch (e: unknown) {
|
||
const err = e as { message?: string };
|
||
message.error(err?.message || '查寝提交失败');
|
||
} finally {
|
||
setInspectionSaving(false);
|
||
}
|
||
};
|
||
|
||
if (!data) return <Spin size="large" style={{ display: 'block', margin: '100px auto' }} />;
|
||
|
||
const rooms = data.rooms.filter((r: any) => {
|
||
if (selectedBuilding !== 'all' && r.building !== selectedBuilding) return false;
|
||
if (selectedOrganization !== 'all' && !(r.organizationIds || []).includes(selectedOrganization))
|
||
return false;
|
||
return true;
|
||
});
|
||
|
||
const totalRooms = rooms.length;
|
||
const emptyRooms = rooms.filter(
|
||
(r: any) => r.currentCount === 0 && r.status !== 'maintenance',
|
||
).length;
|
||
const totalBeds = rooms.reduce((sum: number, r: any) => sum + (r.totalBeds || 0), 0);
|
||
const occupiedBeds = rooms.reduce((sum: number, r: any) => sum + (r.occupiedBeds || 0), 0);
|
||
const availableBedsCount = totalBeds - occupiedBeds;
|
||
const fullRooms = rooms.filter((r: any) => r.currentCount >= r.capacity).length;
|
||
|
||
/* getCardStyle, getStatusLabel, getOrganizationTags are now standalone functions outside the component */
|
||
|
||
return (
|
||
<div>
|
||
<div
|
||
style={{
|
||
marginBottom: 16,
|
||
display: 'flex',
|
||
justifyContent: 'space-between',
|
||
alignItems: 'center',
|
||
flexWrap: 'wrap',
|
||
gap: 12,
|
||
}}
|
||
>
|
||
<h2 style={{ margin: 0 }}>宿舍总览</h2>
|
||
<div style={{ display: 'flex', alignItems: 'center', gap: 12, flexWrap: 'wrap' }}>
|
||
<DatePicker
|
||
value={asOf}
|
||
onChange={setAsOf}
|
||
allowClear
|
||
placeholder="查看历史日期"
|
||
suffixIcon={<HistoryOutlined />}
|
||
disabledDate={(d) => d && d.isAfter(dayjs(), 'day')}
|
||
style={{ width: 180 }}
|
||
/>
|
||
<Select
|
||
value={selectedBuilding}
|
||
onChange={setSelectedBuilding}
|
||
style={{ width: 160 }}
|
||
options={[
|
||
{ value: 'all', label: '全部楼栋' },
|
||
...data.buildings.map((b: string) => ({ value: b, label: b })),
|
||
]}
|
||
/>
|
||
<Select
|
||
value={selectedOrganization}
|
||
onChange={setSelectedOrganization}
|
||
style={{ width: 180 }}
|
||
options={[
|
||
{ value: 'all', label: '全部机构' },
|
||
...(data.organizations || []).map((t: any) => ({
|
||
value: t.id,
|
||
label: (
|
||
<span style={{ display: 'inline-flex', alignItems: 'center', gap: 6 }}>
|
||
{t.color && (
|
||
<span
|
||
style={{
|
||
width: 8,
|
||
height: 8,
|
||
borderRadius: '50%',
|
||
backgroundColor: t.color,
|
||
display: 'inline-block',
|
||
}}
|
||
/>
|
||
)}
|
||
{t.name}
|
||
</span>
|
||
),
|
||
})),
|
||
]}
|
||
/>
|
||
</div>
|
||
</div>
|
||
|
||
{isHistorical && (
|
||
<Alert
|
||
type="warning"
|
||
showIcon
|
||
icon={<HistoryOutlined />}
|
||
style={{ marginBottom: 16 }}
|
||
title={`正在查看 ${asOf!.format('YYYY年M月D日')} 的历史入住情况（含当日已归档房间），非实时数据`}
|
||
action={
|
||
<Button size="small" type="link" onClick={() => setAsOf(null)}>
|
||
返回今天
|
||
</Button>
|
||
}
|
||
/>
|
||
)}
|
||
|
||
{loading && <Spin style={{ display: 'block', margin: '8px auto 16px' }} />}
|
||
|
||
{/* 统计栏 */}
|
||
<Row gutter={[12, 12]} style={{ marginBottom: 20 }}>
|
||
<Col xs={12} sm={6}>
|
||
<Card size="small">
|
||
<Statistic title="宿舍总数" value={totalRooms} prefix={<HomeOutlined />} />
|
||
</Card>
|
||
</Col>
|
||
<Col xs={12} sm={6}>
|
||
<Card size="small">
|
||
<Statistic
|
||
title="空闲房间"
|
||
value={emptyRooms}
|
||
styles={{ value: { color: '#34C759' } }}
|
||
/>
|
||
</Card>
|
||
</Col>
|
||
<Col xs={12} sm={6}>
|
||
<Card size="small">
|
||
<Statistic
|
||
title="可安排床位"
|
||
value={availableBedsCount}
|
||
styles={{ value: { color: '#007AFF' } }}
|
||
/>
|
||
</Card>
|
||
</Col>
|
||
<Col xs={12} sm={6}>
|
||
<Card size="small">
|
||
<Statistic
|
||
title="满员房间"
|
||
value={fullRooms}
|
||
styles={{ value: { color: '#FF3B30' } }}
|
||
/>
|
||
</Card>
|
||
</Col>
|
||
</Row>
|
||
|
||
{/* 房态网格 */}
|
||
<Row gutter={[12, 12]}>
|
||
{rooms.map((room: any) => (
|
||
<Col xs={12} sm={8} md={6} lg={4} key={room.id}>
|
||
<Card
|
||
size="small"
|
||
hoverable
|
||
style={{
|
||
...getCardStyle(room),
|
||
borderRadius: 12,
|
||
borderWidth: 2,
|
||
cursor: 'pointer',
|
||
height: '100%',
|
||
}}
|
||
onClick={() => setDetailRoom(room)}
|
||
>
|
||
<div
|
||
style={{
|
||
display: 'flex',
|
||
justifyContent: 'space-between',
|
||
alignItems: 'center',
|
||
marginBottom: 8,
|
||
}}
|
||
>
|
||
<span
|
||
style={{
|
||
display: 'flex',
|
||
alignItems: 'center',
|
||
gap: 6,
|
||
fontSize: 16,
|
||
fontWeight: 600,
|
||
color: '#1d1d1f',
|
||
}}
|
||
>
|
||
{room.organizationColor && (
|
||
<span
|
||
style={{
|
||
width: 10,
|
||
height: 10,
|
||
borderRadius: '50%',
|
||
backgroundColor: room.organizationColor,
|
||
display: 'inline-block',
|
||
flexShrink: 0,
|
||
}}
|
||
/>
|
||
)}
|
||
{room.roomNumber}
|
||
</span>
|
||
{getStatusLabel(room)}
|
||
</div>
|
||
<div style={{ color: '#86868b', fontSize: 12, marginBottom: 6 }}>
|
||
{room.building && <span>{room.building} </span>}
|
||
{room.floor && <span>{room.floor}F</span>}
|
||
</div>
|
||
{room.totalBeds > 0 && (
|
||
<div
|
||
style={{
|
||
fontSize: 12,
|
||
color: room.occupiedBeds >= room.totalBeds ? '#FF3B30' : '#34C759',
|
||
marginBottom: 6,
|
||
}}
|
||
>
|
||
床位: {room.occupiedBeds}/{room.totalBeds}
|
||
</div>
|
||
)}
|
||
<div style={{ display: 'flex', alignItems: 'center', gap: 4, marginBottom: 8 }}>
|
||
<Badge
|
||
count={`${room.currentCount}/${room.capacity}`}
|
||
showZero
|
||
style={{
|
||
backgroundColor:
|
||
room.currentCount >= room.capacity
|
||
? '#FF3B30'
|
||
: room.currentCount > 0
|
||
? '#007AFF'
|
||
: '#34C759',
|
||
fontSize: 12,
|
||
}}
|
||
/>
|
||
</div>
|
||
{room.orgLabel && (
|
||
<div className="room-card-tag-wrapper" style={{ marginBottom: 6 }}>
|
||
<Tag color="purple" style={{ fontSize: 12 }} icon={<BankOutlined />}>
|
||
{room.orgLabel}
|
||
</Tag>
|
||
</div>
|
||
)}
|
||
{getOrganizationTags(room.occupants)}
|
||
{room.occupants.length > 0 && (
|
||
<div
|
||
className="room-card-tag-wrapper"
|
||
style={{ borderTop: '1px solid rgba(0,0,0,0.06)', paddingTop: 6 }}
|
||
>
|
||
{room.occupants.slice(0, 4).map((o: any) => (
|
||
<Tooltip key={o.studentId} title={`入住 ${o.days} 天 (${o.checkInDate} 起)`}>
|
||
<Tag
|
||
style={{ margin: '0 4px 4px 0', fontSize: 12, maxWidth: '100%' }}
|
||
icon={<UserOutlined />}
|
||
>
|
||
{o.studentName}
|
||
</Tag>
|
||
</Tooltip>
|
||
))}
|
||
{room.occupants.length > 4 && <Tag>+{room.occupants.length - 4}</Tag>}
|
||
</div>
|
||
)}
|
||
{room.occupants.length > 0 && (
|
||
<div style={{ marginTop: 4 }}>
|
||
{room.inspection?.submitted ? (
|
||
<Tag color={room.inspection.source === 'automatic' ? 'orange' : 'green'}>
|
||
{room.inspection.source === 'automatic' ? '自动补记' : '已查寝'}
|
||
</Tag>
|
||
) : (
|
||
<Tag>未查寝</Tag>
|
||
)}
|
||
</div>
|
||
)}
|
||
</Card>
|
||
</Col>
|
||
))}
|
||
</Row>
|
||
|
||
{/* 详情弹窗 */}
|
||
<Modal
|
||
title={`宿舍 ${detailRoom?.roomNumber} 详情`}
|
||
open={!!detailRoom}
|
||
onCancel={() => setDetailRoom(null)}
|
||
footer={null}
|
||
width={500}
|
||
>
|
||
{detailRoom && (
|
||
<div>
|
||
<Row gutter={16} style={{ marginBottom: 16 }}>
|
||
<Col span={8}>
|
||
<Statistic title="额定人数" value={detailRoom.capacity} />
|
||
</Col>
|
||
<Col span={8}>
|
||
<Statistic title="当前入住" value={detailRoom.currentCount} />
|
||
</Col>
|
||
<Col span={8}>
|
||
<Statistic
|
||
title="剩余床位"
|
||
value={Math.max(0, detailRoom.capacity - detailRoom.currentCount)}
|
||
/>
|
||
</Col>
|
||
</Row>
|
||
<div style={{ marginBottom: 8, fontWeight: 500 }}>
|
||
位置：{detailRoom.building || '-'} {detailRoom.floor ? `${detailRoom.floor}F` : ''}
|
||
</div>
|
||
|
||
{detailRoom.organizationColor && (
|
||
<div style={{ marginBottom: 8 }}>
|
||
<Tag color={detailRoom.organizationColor}>
|
||
{detailRoom.occupants[0]?.organizationName || '机构'}
|
||
</Tag>
|
||
</div>
|
||
)}
|
||
<div style={{ marginBottom: 16 }}>{getStatusLabel(detailRoom)}</div>
|
||
{detailRoom.occupants.length > 0 ? (
|
||
<div>
|
||
<div
|
||
style={{
|
||
display: 'flex',
|
||
justifyContent: 'space-between',
|
||
alignItems: 'center',
|
||
gap: 12,
|
||
marginBottom: 8,
|
||
flexWrap: 'wrap',
|
||
}}
|
||
>
|
||
<h4 style={{ margin: 0 }}>床位查寝</h4>
|
||
{detailRoom.inspection?.submitted && (
|
||
<Tag color={detailRoom.inspection.source === 'automatic' ? 'orange' : 'green'}>
|
||
{detailRoom.inspection.source === 'automatic' ? '自动补记' : '已提交'} ·{' '}
|
||
{detailRoom.inspection.inspectorName}
|
||
</Tag>
|
||
)}
|
||
</div>
|
||
{detailRoom.occupants.map((o: any) => (
|
||
<Card key={o.occupancyId} size="small" style={{ marginBottom: 8, borderRadius: 8 }}>
|
||
<div
|
||
style={{
|
||
display: 'flex',
|
||
justifyContent: 'space-between',
|
||
alignItems: 'center',
|
||
}}
|
||
>
|
||
<div>
|
||
<UserOutlined style={{ marginRight: 6 }} />
|
||
<strong>{o.studentName}</strong>
|
||
{o.organization && (
|
||
<Tag color="purple" style={{ marginLeft: 6, fontSize: 12 }}>
|
||
{o.organization}
|
||
</Tag>
|
||
)}
|
||
</div>
|
||
{isHistorical ? (
|
||
<Tag
|
||
color={
|
||
o.inspectionStatus === 'present'
|
||
? 'green'
|
||
: o.inspectionStatus === 'absent'
|
||
? 'red'
|
||
: 'default'
|
||
}
|
||
>
|
||
{o.inspectionStatus === 'present'
|
||
? '在寝'
|
||
: o.inspectionStatus === 'absent'
|
||
? '缺勤'
|
||
: '无记录'}
|
||
</Tag>
|
||
) : (
|
||
<Space size="small">
|
||
<span style={{ color: '#86868b', fontSize: 12 }}>
|
||
{presentOccupancyIds.includes(o.occupancyId) ? '在寝' : '缺勤'}
|
||
</span>
|
||
<Switch
|
||
checked={presentOccupancyIds.includes(o.occupancyId)}
|
||
disabled={!hasPermission('room:inspect')}
|
||
checkedChildren="在寝"
|
||
unCheckedChildren="缺勤"
|
||
onChange={(checked) =>
|
||
setPresentOccupancyIds((current) =>
|
||
togglePresentOccupancy(current, o.occupancyId, checked),
|
||
)
|
||
}
|
||
/>
|
||
</Space>
|
||
)}
|
||
</div>
|
||
<div style={{ color: '#86868b', fontSize: 12, marginTop: 4 }}>
|
||
<CalendarOutlined style={{ marginRight: 4 }} />
|
||
床位：{o.bedNumber || '未分配'} |{' '}
|
||
入住：{o.checkInDate} | 计费起：{o.billingStartDate}
|
||
{o.supervisor && (
|
||
<span style={{ marginLeft: 8 }}>负责人：{o.supervisor}</span>
|
||
)}
|
||
</div>
|
||
</Card>
|
||
))}
|
||
{!isHistorical && hasPermission('room:inspect') && (
|
||
<div
|
||
style={{
|
||
display: 'flex',
|
||
justifyContent: 'flex-end',
|
||
gap: 8,
|
||
marginTop: 16,
|
||
flexWrap: 'wrap',
|
||
}}
|
||
>
|
||
<Button
|
||
icon={<CheckCircleOutlined />}
|
||
onClick={() =>
|
||
setPresentOccupancyIds(
|
||
detailRoom.occupants.map((occupant: any) => occupant.occupancyId),
|
||
)
|
||
}
|
||
>
|
||
本宿舍一键打卡
|
||
</Button>
|
||
<PermissionButton
|
||
permission="room:inspect"
|
||
type="primary"
|
||
icon={<SaveOutlined />}
|
||
loading={inspectionSaving}
|
||
onClick={submitInspection}
|
||
>
|
||
提交查寝
|
||
</PermissionButton>
|
||
</div>
|
||
)}
|
||
</div>
|
||
) : (
|
||
<div style={{ textAlign: 'center', padding: 24, color: '#86868b' }}>
|
||
当前无住户，可安排入住
|
||
</div>
|
||
)}
|
||
</div>
|
||
)}
|
||
</Modal>
|
||
</div>
|
||
);
|
||
};
|
||
|
||
export default RoomVisualPage;
|