Files
yunrui_asset/frontend/src/components/floorplan/toolbar/RoomSelector.jsx
T
zhang1106 a5505207bc refactor(floorplan): 优化机房平面图交互与代码结构
- 重构设备悬停提示逻辑,使用画布坐标替代DOM坐标
- 提取缩放控制逻辑到独立回调函数
- 移除未使用的组件和引用
- 改进全屏切换实现方式
- 添加平面图导出功能
2026-05-08 13:07:27 +08:00

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;