zhang1106
979c28fdcd
refactor(models): 为Room和Rack模型添加布局相关字段 feat(routes): 实现机房平面图相关API接口 feat(components): 添加平面图编辑器、画布渲染及交互组件 feat(hooks): 实现平面图数据管理和状态管理 feat(pages): 新增机房平面图页面入口 style(components): 优化平面图组件样式和交互体验
53 lines
1.5 KiB
React
53 lines
1.5 KiB
React
import React from 'react';
|
|
import { Radio, Select, Space } from 'antd';
|
|
import { AppstoreOutlined, FireOutlined, EditOutlined } from '@ant-design/icons';
|
|
|
|
const ViewModeSwitch = ({ viewMode, heatMapDimension, editMode, onViewModeChange, onEditModeChange }) => {
|
|
return (
|
|
<Space size={8}>
|
|
<Radio.Group
|
|
value={editMode ? 'edit' : viewMode}
|
|
onChange={(e) => {
|
|
const val = e.target.value;
|
|
if (val === 'edit') {
|
|
onEditModeChange(true);
|
|
onViewModeChange('standard');
|
|
} else {
|
|
onEditModeChange(false);
|
|
onViewModeChange(val);
|
|
}
|
|
}}
|
|
optionType="button"
|
|
buttonStyle="solid"
|
|
size="small"
|
|
>
|
|
<Radio.Button value="standard">
|
|
<AppstoreOutlined /> 标准
|
|
</Radio.Button>
|
|
<Radio.Button value="heatmap">
|
|
<FireOutlined /> 热力图
|
|
</Radio.Button>
|
|
<Radio.Button value="edit">
|
|
<EditOutlined /> 编辑
|
|
</Radio.Button>
|
|
</Radio.Group>
|
|
|
|
{viewMode === 'heatmap' && !editMode && (
|
|
<Select
|
|
value={heatMapDimension}
|
|
onChange={(val) => onViewModeChange('heatmap', val)}
|
|
size="small"
|
|
style={{ width: 120 }}
|
|
options={[
|
|
{ value: 'utilization', label: 'U位使用率' },
|
|
{ value: 'power', label: '功率负载' },
|
|
{ value: 'density', label: '设备密度' },
|
|
]}
|
|
/>
|
|
)}
|
|
</Space>
|
|
);
|
|
};
|
|
|
|
export default ViewModeSwitch;
|