- 重构设备悬停提示逻辑,使用画布坐标替代DOM坐标 - 提取缩放控制逻辑到独立回调函数 - 移除未使用的组件和引用 - 改进全屏切换实现方式 - 添加平面图导出功能
57 lines
1.6 KiB
React
57 lines
1.6 KiB
React
import React, { useState, useEffect, useRef } from 'react';
|
|
import { Select, Spin, message } from 'antd';
|
|
import { HomeOutlined } from '@ant-design/icons';
|
|
import axios from 'axios';
|
|
import { RoomOptionContent, RoomIndicator } from '../styles';
|
|
|
|
const RoomSelector = ({ selectedRoomId, onRoomChange }) => {
|
|
const [rooms, setRooms] = useState([]);
|
|
const [loading, setLoading] = useState(false);
|
|
const hasAutoSelected = useRef(false);
|
|
|
|
useEffect(() => {
|
|
const fetchRooms = async () => {
|
|
setLoading(true);
|
|
try {
|
|
const response = await axios.get('/api/rooms', { params: { pageSize: 1000 } });
|
|
const roomList = response.data.rooms || [];
|
|
setRooms(roomList);
|
|
|
|
if (!hasAutoSelected.current && roomList.length > 0 && !selectedRoomId) {
|
|
hasAutoSelected.current = true;
|
|
onRoomChange(roomList[0].roomId);
|
|
}
|
|
} catch (err) {
|
|
message.error('获取机房列表失败');
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
fetchRooms();
|
|
}, []);
|
|
|
|
return (
|
|
<Select
|
|
value={selectedRoomId}
|
|
onChange={onRoomChange}
|
|
style={{ minWidth: 180 }}
|
|
placeholder="选择机房"
|
|
suffixIcon={loading ? <Spin size="small" /> : <HomeOutlined />}
|
|
options={rooms.map(r => ({
|
|
value: r.roomId,
|
|
label: (
|
|
<RoomOptionContent>
|
|
<RoomIndicator />
|
|
{r.name}
|
|
</RoomOptionContent>
|
|
),
|
|
}))}
|
|
notFoundContent={loading ? <Spin size="small" /> : '暂无机房'}
|
|
size="middle"
|
|
/>
|
|
);
|
|
};
|
|
|
|
export default RoomSelector;
|