初始化IDC设备管理系统项目
This commit is contained in:
zhang1106
+38
@@ -0,0 +1,38 @@
|
||||
# Dependencies
|
||||
node_modules/
|
||||
|
||||
# Build outputs
|
||||
dist/
|
||||
build/
|
||||
|
||||
# Environment files
|
||||
.env
|
||||
.env.local
|
||||
.env.development.local
|
||||
.env.test.local
|
||||
.env.production.local
|
||||
|
||||
# Logs
|
||||
logs
|
||||
*.log
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
pnpm-debug.log*
|
||||
lerna-debug.log*
|
||||
|
||||
# Editor directories and files
|
||||
.vscode/
|
||||
.idea/
|
||||
*.swp
|
||||
*.swo
|
||||
*~
|
||||
.DS_Store
|
||||
|
||||
# Database files
|
||||
*.db
|
||||
*.sqlite
|
||||
|
||||
# Temporary files
|
||||
*.tmp
|
||||
*.temp
|
||||
@@ -0,0 +1,180 @@
|
||||
# IDC设备管理系统
|
||||
|
||||
一个基于React+Node.js+MySQL的IDC设备管理系统，用于管理IDC机房中的设备、机柜和机房信息。
|
||||
|
||||
## 功能特点
|
||||
|
||||
### 后端功能
|
||||
- 机房管理（增删改查）
|
||||
- 机柜管理（增删改查）
|
||||
- 设备管理（增删改查）
|
||||
- 功率统计与管理
|
||||
- 设备状态监控
|
||||
|
||||
### 前端功能
|
||||
- 仪表盘：设备、机柜、机房统计信息
|
||||
- 设备管理：设备列表、搜索、筛选、添加、编辑、删除
|
||||
- 机柜管理：机柜列表、搜索、筛选、添加、编辑、删除
|
||||
- 机房管理：机房列表、搜索、筛选、添加、编辑、删除
|
||||
|
||||
## 技术栈
|
||||
|
||||
### 前端
|
||||
- React 18
|
||||
- Ant Design 5
|
||||
- Vite 4
|
||||
- React Router 6
|
||||
- Axios
|
||||
|
||||
### 后端
|
||||
- Node.js
|
||||
- Express.js
|
||||
- Sequelize
|
||||
- MySQL
|
||||
|
||||
## 项目结构
|
||||
|
||||
```
|
||||
idc-device-management/
|
||||
├── backend/ # 后端代码
|
||||
│ ├── models/ # 数据库模型
|
||||
│ │ ├── Room.js # 机房模型
|
||||
│ │ ├── Rack.js # 机柜模型
|
||||
│ │ └── Device.js # 设备模型
|
||||
│ ├── routes/ # API路由
|
||||
│ │ ├── rooms.js # 机房路由
|
||||
│ │ ├── racks.js # 机柜路由
|
||||
│ │ └── devices.js # 设备路由
|
||||
│ ├── server.js # 服务器主文件
|
||||
│ └── package.json # 后端依赖
|
||||
├── frontend/ # 前端代码
|
||||
│ ├── src/ # 前端源码
|
||||
│ │ ├── pages/ # 页面组件
|
||||
│ │ │ ├── Dashboard.jsx # 仪表盘
|
||||
│ │ │ ├── DeviceManagement.jsx # 设备管理
|
||||
│ │ │ ├── RackManagement.jsx # 机柜管理
|
||||
│ │ │ └── RoomManagement.jsx # 机房管理
|
||||
│ │ ├── App.jsx # 应用主组件
|
||||
│ │ ├── main.jsx # 应用入口
|
||||
│ │ └── index.css # 全局样式
|
||||
│ ├── index.html # HTML模板
|
||||
│ ├── vite.config.js # Vite配置
|
||||
│ └── package.json # 前端依赖
|
||||
└── package.json # 项目依赖
|
||||
```
|
||||
|
||||
## 安装与运行
|
||||
|
||||
### 1. 安装依赖
|
||||
|
||||
```bash
|
||||
# 安装所有依赖
|
||||
npm run install:all
|
||||
```
|
||||
|
||||
### 2. 配置数据库
|
||||
|
||||
1. 创建MySQL数据库：
|
||||
```sql
|
||||
CREATE DATABASE idc_management;
|
||||
```
|
||||
|
||||
2. 修改后端数据库连接配置（backend/server.js）：
|
||||
```javascript
|
||||
const sequelize = new Sequelize({
|
||||
dialect: 'mysql',
|
||||
host: 'localhost',
|
||||
port: 3306,
|
||||
username: 'root', // 修改为你的MySQL用户名
|
||||
password: 'password', // 修改为你的MySQL密码
|
||||
database: 'idc_management'
|
||||
});
|
||||
```
|
||||
|
||||
### 3. 启动服务
|
||||
|
||||
```bash
|
||||
# 同时启动前后端服务
|
||||
npm start
|
||||
|
||||
# 或分别启动
|
||||
npm run start:backend # 启动后端服务（端口：3001）
|
||||
npm run start:frontend # 启动前端服务（端口：3000）
|
||||
```
|
||||
|
||||
### 4. 访问系统
|
||||
|
||||
前端地址：http://localhost:3000
|
||||
后端API地址：http://localhost:3001
|
||||
|
||||
## API接口
|
||||
|
||||
### 机房管理
|
||||
- GET /api/rooms - 获取所有机房
|
||||
- GET /api/rooms/:roomId - 获取单个机房
|
||||
- POST /api/rooms - 创建机房
|
||||
- PUT /api/rooms/:roomId - 更新机房
|
||||
- DELETE /api/rooms/:roomId - 删除机房
|
||||
|
||||
### 机柜管理
|
||||
- GET /api/racks - 获取所有机柜
|
||||
- GET /api/racks/:rackId - 获取单个机柜
|
||||
- POST /api/racks - 创建机柜
|
||||
- PUT /api/racks/:rackId - 更新机柜
|
||||
- DELETE /api/racks/:rackId - 删除机柜
|
||||
|
||||
### 设备管理
|
||||
- GET /api/devices - 获取所有设备
|
||||
- GET /api/devices/:deviceId - 获取单个设备
|
||||
- POST /api/devices - 创建设备
|
||||
- PUT /api/devices/:deviceId - 更新设备
|
||||
- DELETE /api/devices/:deviceId - 删除设备
|
||||
|
||||
## 开发说明
|
||||
|
||||
### 后端开发
|
||||
|
||||
1. 进入后端目录：
|
||||
```bash
|
||||
cd backend
|
||||
```
|
||||
|
||||
2. 安装依赖：
|
||||
```bash
|
||||
npm install
|
||||
```
|
||||
|
||||
3. 启动开发服务器：
|
||||
```bash
|
||||
npm run dev
|
||||
```
|
||||
|
||||
### 前端开发
|
||||
|
||||
1. 进入前端目录：
|
||||
```bash
|
||||
cd frontend
|
||||
```
|
||||
|
||||
2. 安装依赖：
|
||||
```bash
|
||||
npm install
|
||||
```
|
||||
|
||||
3. 启动开发服务器：
|
||||
```bash
|
||||
npm run dev
|
||||
```
|
||||
|
||||
## 注意事项
|
||||
|
||||
1. 确保MySQL服务已经启动
|
||||
2. 首次运行需要创建数据库
|
||||
3. 设备创建时会自动更新机柜的当前功率
|
||||
4. 设备更新或删除时会自动调整机柜的当前功率
|
||||
5. 机柜删除前需要确保没有关联的设备
|
||||
6. 机房删除前需要确保没有关联的机柜
|
||||
|
||||
## License
|
||||
|
||||
MIT
|
||||
@@ -0,0 +1,9 @@
|
||||
const { Sequelize } = require('sequelize');
|
||||
|
||||
// 创建并导出sequelize实例
|
||||
const sequelize = new Sequelize({
|
||||
dialect: 'sqlite',
|
||||
storage: './idc_management.db' // SQLite数据库文件路径
|
||||
});
|
||||
|
||||
module.exports = { sequelize };
|
||||
@@ -0,0 +1,171 @@
|
||||
const DeviceField = require('./models/DeviceField');
|
||||
const { sequelize } = require('./db');
|
||||
|
||||
// 默认设备字段配置
|
||||
const defaultDeviceFields = [
|
||||
{
|
||||
fieldName: 'deviceId',
|
||||
displayName: '设备ID',
|
||||
fieldType: 'string',
|
||||
required: true,
|
||||
order: 1,
|
||||
visible: true
|
||||
},
|
||||
{
|
||||
fieldName: 'name',
|
||||
displayName: '设备名称',
|
||||
fieldType: 'string',
|
||||
required: true,
|
||||
order: 2,
|
||||
visible: true
|
||||
},
|
||||
{
|
||||
fieldName: 'type',
|
||||
displayName: '设备类型',
|
||||
fieldType: 'select',
|
||||
required: true,
|
||||
order: 3,
|
||||
visible: true,
|
||||
options: [
|
||||
{ value: 'server', label: '服务器' },
|
||||
{ value: 'switch', label: '交换机' },
|
||||
{ value: 'router', label: '路由器' },
|
||||
{ value: 'storage', label: '存储设备' },
|
||||
{ value: 'other', label: '其他设备' }
|
||||
]
|
||||
},
|
||||
{
|
||||
fieldName: 'model',
|
||||
displayName: '型号',
|
||||
fieldType: 'string',
|
||||
required: true,
|
||||
order: 4,
|
||||
visible: true
|
||||
},
|
||||
{
|
||||
fieldName: 'serialNumber',
|
||||
displayName: '序列号',
|
||||
fieldType: 'string',
|
||||
required: true,
|
||||
order: 5,
|
||||
visible: true
|
||||
},
|
||||
{
|
||||
fieldName: 'rackId',
|
||||
displayName: '所在机柜',
|
||||
fieldType: 'select',
|
||||
required: true,
|
||||
order: 6,
|
||||
visible: true
|
||||
},
|
||||
{
|
||||
fieldName: 'position',
|
||||
displayName: '位置(U)',
|
||||
fieldType: 'number',
|
||||
required: true,
|
||||
order: 7,
|
||||
visible: true
|
||||
},
|
||||
{
|
||||
fieldName: 'height',
|
||||
displayName: '高度(U)',
|
||||
fieldType: 'number',
|
||||
required: true,
|
||||
order: 8,
|
||||
visible: true
|
||||
},
|
||||
{
|
||||
fieldName: 'powerConsumption',
|
||||
displayName: '功率(W)',
|
||||
fieldType: 'number',
|
||||
required: true,
|
||||
order: 9,
|
||||
visible: true
|
||||
},
|
||||
{
|
||||
fieldName: 'status',
|
||||
displayName: '状态',
|
||||
fieldType: 'select',
|
||||
required: true,
|
||||
order: 10,
|
||||
visible: true,
|
||||
options: [
|
||||
{ value: 'running', label: '运行中' },
|
||||
{ value: 'maintenance', label: '维护中' },
|
||||
{ value: 'offline', label: '离线' },
|
||||
{ value: 'fault', label: '故障' }
|
||||
]
|
||||
},
|
||||
{
|
||||
fieldName: 'purchaseDate',
|
||||
displayName: '购买日期',
|
||||
fieldType: 'date',
|
||||
required: true,
|
||||
order: 11,
|
||||
visible: true
|
||||
},
|
||||
{
|
||||
fieldName: 'warrantyExpiry',
|
||||
displayName: '保修到期',
|
||||
fieldType: 'date',
|
||||
required: true,
|
||||
order: 12,
|
||||
visible: true
|
||||
},
|
||||
{
|
||||
fieldName: 'ipAddress',
|
||||
displayName: 'IP地址',
|
||||
fieldType: 'string',
|
||||
required: false,
|
||||
order: 13,
|
||||
visible: true
|
||||
},
|
||||
{
|
||||
fieldName: 'description',
|
||||
displayName: '描述',
|
||||
fieldType: 'textarea',
|
||||
required: false,
|
||||
order: 14,
|
||||
visible: true
|
||||
}
|
||||
];
|
||||
|
||||
// 初始化设备字段
|
||||
async function initDeviceFields() {
|
||||
try {
|
||||
console.log('开始初始化设备字段配置...');
|
||||
|
||||
// 连接数据库
|
||||
await sequelize.authenticate();
|
||||
console.log('数据库连接成功');
|
||||
|
||||
// 同步表结构
|
||||
await sequelize.sync();
|
||||
console.log('数据库表结构同步完成');
|
||||
|
||||
// 批量创建默认字段
|
||||
for (const field of defaultDeviceFields) {
|
||||
// 检查字段是否已存在
|
||||
const existingField = await DeviceField.findOne({
|
||||
where: { fieldName: field.fieldName }
|
||||
});
|
||||
|
||||
if (existingField) {
|
||||
// 更新已有字段
|
||||
await existingField.update(field);
|
||||
console.log(`更新字段: ${field.displayName}`);
|
||||
} else {
|
||||
// 创建新字段
|
||||
await DeviceField.create(field);
|
||||
console.log(`创建字段: ${field.displayName}`);
|
||||
}
|
||||
}
|
||||
|
||||
console.log('设备字段配置初始化完成');
|
||||
} catch (error) {
|
||||
console.error('设备字段配置初始化失败:', error);
|
||||
}
|
||||
}
|
||||
|
||||
// 导出初始化函数
|
||||
module.exports = initDeviceFields;
|
||||
@@ -0,0 +1,82 @@
|
||||
const { DataTypes } = require('sequelize');
|
||||
const { sequelize } = require('../db');
|
||||
const Rack = require('./Rack');
|
||||
|
||||
const Device = sequelize.define('Device', {
|
||||
deviceId: {
|
||||
type: DataTypes.STRING,
|
||||
primaryKey: true,
|
||||
allowNull: false,
|
||||
unique: true
|
||||
},
|
||||
name: {
|
||||
type: DataTypes.STRING,
|
||||
allowNull: false
|
||||
},
|
||||
type: {
|
||||
type: DataTypes.STRING,
|
||||
allowNull: false
|
||||
},
|
||||
model: {
|
||||
type: DataTypes.STRING,
|
||||
allowNull: false
|
||||
},
|
||||
serialNumber: {
|
||||
type: DataTypes.STRING,
|
||||
allowNull: false,
|
||||
unique: true
|
||||
},
|
||||
rackId: {
|
||||
type: DataTypes.STRING,
|
||||
allowNull: false,
|
||||
references: {
|
||||
model: Rack,
|
||||
key: 'rackId'
|
||||
}
|
||||
},
|
||||
position: {
|
||||
type: DataTypes.INTEGER,
|
||||
allowNull: false // 设备在机柜中的位置（U数）
|
||||
},
|
||||
height: {
|
||||
type: DataTypes.INTEGER,
|
||||
allowNull: false,
|
||||
defaultValue: 1 // 设备高度（U数）
|
||||
},
|
||||
powerConsumption: {
|
||||
type: DataTypes.FLOAT,
|
||||
allowNull: false
|
||||
},
|
||||
status: {
|
||||
type: DataTypes.STRING,
|
||||
defaultValue: 'running'
|
||||
},
|
||||
purchaseDate: {
|
||||
type: DataTypes.DATE,
|
||||
allowNull: false
|
||||
},
|
||||
warrantyExpiry: {
|
||||
type: DataTypes.DATE,
|
||||
allowNull: false
|
||||
},
|
||||
ipAddress: {
|
||||
type: DataTypes.STRING
|
||||
},
|
||||
description: {
|
||||
type: DataTypes.TEXT
|
||||
},
|
||||
customFields: {
|
||||
type: DataTypes.JSON,
|
||||
defaultValue: {},
|
||||
allowNull: false
|
||||
}
|
||||
}, {
|
||||
tableName: 'devices',
|
||||
timestamps: true
|
||||
});
|
||||
|
||||
// 关联关系
|
||||
Device.belongsTo(Rack, { foreignKey: 'rackId' });
|
||||
Rack.hasMany(Device, { foreignKey: 'rackId' });
|
||||
|
||||
module.exports = Device;
|
||||
@@ -0,0 +1,49 @@
|
||||
const { DataTypes } = require('sequelize');
|
||||
const { sequelize } = require('../db');
|
||||
|
||||
const DeviceField = sequelize.define('DeviceField', {
|
||||
fieldId: {
|
||||
type: DataTypes.INTEGER,
|
||||
primaryKey: true,
|
||||
autoIncrement: true,
|
||||
allowNull: false
|
||||
},
|
||||
fieldName: {
|
||||
type: DataTypes.STRING,
|
||||
allowNull: false,
|
||||
unique: true
|
||||
},
|
||||
displayName: {
|
||||
type: DataTypes.STRING,
|
||||
allowNull: false
|
||||
},
|
||||
fieldType: {
|
||||
type: DataTypes.STRING,
|
||||
allowNull: false,
|
||||
defaultValue: 'string'
|
||||
},
|
||||
required: {
|
||||
type: DataTypes.BOOLEAN,
|
||||
allowNull: false,
|
||||
defaultValue: false
|
||||
},
|
||||
options: {
|
||||
type: DataTypes.JSON,
|
||||
allowNull: true
|
||||
},
|
||||
order: {
|
||||
type: DataTypes.INTEGER,
|
||||
allowNull: false,
|
||||
defaultValue: 0
|
||||
},
|
||||
visible: {
|
||||
type: DataTypes.BOOLEAN,
|
||||
allowNull: false,
|
||||
defaultValue: true
|
||||
}
|
||||
}, {
|
||||
tableName: 'deviceFields',
|
||||
timestamps: true
|
||||
});
|
||||
|
||||
module.exports = DeviceField;
|
||||
@@ -0,0 +1,50 @@
|
||||
const { DataTypes } = require('sequelize');
|
||||
const { sequelize } = require('../db');
|
||||
const Room = require('./Room');
|
||||
|
||||
const Rack = sequelize.define('Rack', {
|
||||
rackId: {
|
||||
type: DataTypes.STRING,
|
||||
primaryKey: true,
|
||||
allowNull: false,
|
||||
unique: true
|
||||
},
|
||||
name: {
|
||||
type: DataTypes.STRING,
|
||||
allowNull: false
|
||||
},
|
||||
height: {
|
||||
type: DataTypes.INTEGER,
|
||||
allowNull: false,
|
||||
defaultValue: 42 // 标准机柜高度（U数）
|
||||
},
|
||||
maxPower: {
|
||||
type: DataTypes.FLOAT,
|
||||
allowNull: false
|
||||
},
|
||||
currentPower: {
|
||||
type: DataTypes.FLOAT,
|
||||
defaultValue: 0
|
||||
},
|
||||
status: {
|
||||
type: DataTypes.STRING,
|
||||
defaultValue: 'active'
|
||||
},
|
||||
roomId: {
|
||||
type: DataTypes.STRING,
|
||||
allowNull: false,
|
||||
references: {
|
||||
model: Room,
|
||||
key: 'roomId'
|
||||
}
|
||||
}
|
||||
}, {
|
||||
tableName: 'racks',
|
||||
timestamps: true
|
||||
});
|
||||
|
||||
// 关联关系
|
||||
Rack.belongsTo(Room, { foreignKey: 'roomId' });
|
||||
Room.hasMany(Rack, { foreignKey: 'roomId' });
|
||||
|
||||
module.exports = Rack;
|
||||
@@ -0,0 +1,39 @@
|
||||
const { DataTypes } = require('sequelize');
|
||||
const { sequelize } = require('../db');
|
||||
|
||||
const Room = sequelize.define('Room', {
|
||||
roomId: {
|
||||
type: DataTypes.STRING,
|
||||
primaryKey: true,
|
||||
allowNull: false,
|
||||
unique: true
|
||||
},
|
||||
name: {
|
||||
type: DataTypes.STRING,
|
||||
allowNull: false
|
||||
},
|
||||
location: {
|
||||
type: DataTypes.STRING,
|
||||
allowNull: false
|
||||
},
|
||||
area: {
|
||||
type: DataTypes.FLOAT,
|
||||
allowNull: false
|
||||
},
|
||||
capacity: {
|
||||
type: DataTypes.INTEGER,
|
||||
allowNull: false
|
||||
},
|
||||
status: {
|
||||
type: DataTypes.STRING,
|
||||
defaultValue: 'active'
|
||||
},
|
||||
description: {
|
||||
type: DataTypes.TEXT
|
||||
}
|
||||
}, {
|
||||
tableName: 'rooms',
|
||||
timestamps: true
|
||||
});
|
||||
|
||||
module.exports = Room;
|
||||
Generated
+2864
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,18 @@
|
||||
{
|
||||
"name": "idc-backend",
|
||||
"version": "1.0.0",
|
||||
"description": "IDC设备管理系统后端",
|
||||
"scripts": {
|
||||
"start": "node server.js",
|
||||
"dev": "nodemon server.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"express": "^4.18.2",
|
||||
"sequelize": "^6.32.1",
|
||||
"sqlite3": "^5.1.6",
|
||||
"cors": "^2.8.5"
|
||||
},
|
||||
"devDependencies": {
|
||||
"nodemon": "^3.0.1"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,73 @@
|
||||
const express = require('express');
|
||||
const router = express.Router();
|
||||
const DeviceField = require('../models/DeviceField');
|
||||
|
||||
// 获取所有字段配置
|
||||
router.get('/', async (req, res) => {
|
||||
try {
|
||||
const fields = await DeviceField.findAll({
|
||||
order: [['order', 'ASC']]
|
||||
});
|
||||
res.json(fields);
|
||||
} catch (error) {
|
||||
res.status(500).json({ error: error.message });
|
||||
}
|
||||
});
|
||||
|
||||
// 获取单个字段配置
|
||||
router.get('/:fieldId', async (req, res) => {
|
||||
try {
|
||||
const field = await DeviceField.findByPk(req.params.fieldId);
|
||||
if (!field) {
|
||||
return res.status(404).json({ error: '字段不存在' });
|
||||
}
|
||||
res.json(field);
|
||||
} catch (error) {
|
||||
res.status(500).json({ error: error.message });
|
||||
}
|
||||
});
|
||||
|
||||
// 创建字段配置
|
||||
router.post('/', async (req, res) => {
|
||||
try {
|
||||
const field = await DeviceField.create(req.body);
|
||||
res.status(201).json(field);
|
||||
} catch (error) {
|
||||
res.status(400).json({ error: error.message });
|
||||
}
|
||||
});
|
||||
|
||||
// 更新字段配置
|
||||
router.put('/:fieldId', async (req, res) => {
|
||||
try {
|
||||
const [updated] = await DeviceField.update(req.body, {
|
||||
where: { fieldId: req.params.fieldId }
|
||||
});
|
||||
if (updated) {
|
||||
const updatedField = await DeviceField.findByPk(req.params.fieldId);
|
||||
res.json(updatedField);
|
||||
} else {
|
||||
res.status(404).json({ error: '字段不存在' });
|
||||
}
|
||||
} catch (error) {
|
||||
res.status(400).json({ error: error.message });
|
||||
}
|
||||
});
|
||||
|
||||
// 删除字段配置
|
||||
router.delete('/:fieldId', async (req, res) => {
|
||||
try {
|
||||
const deleted = await DeviceField.destroy({
|
||||
where: { fieldId: req.params.fieldId }
|
||||
});
|
||||
if (deleted) {
|
||||
res.status(204).json();
|
||||
} else {
|
||||
res.status(404).json({ error: '字段不存在' });
|
||||
}
|
||||
} catch (error) {
|
||||
res.status(500).json({ error: error.message });
|
||||
}
|
||||
});
|
||||
|
||||
module.exports = router;
|
||||
@@ -0,0 +1,124 @@
|
||||
const express = require('express');
|
||||
const router = express.Router();
|
||||
const Device = require('../models/Device');
|
||||
const Rack = require('../models/Rack');
|
||||
|
||||
// 获取所有设备
|
||||
router.get('/', async (req, res) => {
|
||||
try {
|
||||
const devices = await Device.findAll({
|
||||
include: [
|
||||
{ model: Rack }
|
||||
]
|
||||
});
|
||||
res.json(devices);
|
||||
} catch (error) {
|
||||
res.status(500).json({ error: error.message });
|
||||
}
|
||||
});
|
||||
|
||||
// 获取单个设备
|
||||
router.get('/:deviceId', async (req, res) => {
|
||||
try {
|
||||
const device = await Device.findByPk(req.params.deviceId, {
|
||||
include: [
|
||||
{ model: Rack }
|
||||
]
|
||||
});
|
||||
if (!device) {
|
||||
return res.status(404).json({ error: '设备不存在' });
|
||||
}
|
||||
res.json(device);
|
||||
} catch (error) {
|
||||
res.status(500).json({ error: error.message });
|
||||
}
|
||||
});
|
||||
|
||||
// 创建设备
|
||||
router.post('/', async (req, res) => {
|
||||
try {
|
||||
const device = await Device.create(req.body);
|
||||
|
||||
// 更新机柜当前功率
|
||||
const rack = await Rack.findByPk(req.body.rackId);
|
||||
if (rack) {
|
||||
await rack.update({
|
||||
currentPower: rack.currentPower + req.body.powerConsumption
|
||||
});
|
||||
}
|
||||
|
||||
res.status(201).json(device);
|
||||
} catch (error) {
|
||||
res.status(400).json({ error: error.message });
|
||||
}
|
||||
});
|
||||
|
||||
// 更新设备
|
||||
router.put('/:deviceId', async (req, res) => {
|
||||
try {
|
||||
// 获取旧设备信息以更新功率
|
||||
const oldDevice = await Device.findByPk(req.params.deviceId);
|
||||
if (!oldDevice) {
|
||||
return res.status(404).json({ error: '设备不存在' });
|
||||
}
|
||||
|
||||
const [updated] = await Device.update(req.body, {
|
||||
where: { deviceId: req.params.deviceId }
|
||||
});
|
||||
|
||||
if (updated) {
|
||||
// 更新机柜当前功率
|
||||
const rack = await Rack.findByPk(oldDevice.rackId);
|
||||
if (rack) {
|
||||
const powerDiff = req.body.powerConsumption - oldDevice.powerConsumption;
|
||||
await rack.update({
|
||||
currentPower: rack.currentPower + powerDiff
|
||||
});
|
||||
}
|
||||
|
||||
const updatedDevice = await Device.findByPk(req.params.deviceId, {
|
||||
include: [
|
||||
{ model: Rack }
|
||||
]
|
||||
});
|
||||
res.json(updatedDevice);
|
||||
} else {
|
||||
res.status(404).json({ error: '设备不存在' });
|
||||
}
|
||||
} catch (error) {
|
||||
res.status(400).json({ error: error.message });
|
||||
}
|
||||
});
|
||||
|
||||
// 删除设备
|
||||
router.delete('/:deviceId', async (req, res) => {
|
||||
try {
|
||||
// 获取设备信息以更新功率
|
||||
const device = await Device.findByPk(req.params.deviceId);
|
||||
if (!device) {
|
||||
return res.status(404).json({ error: '设备不存在' });
|
||||
}
|
||||
|
||||
const deleted = await Device.destroy({
|
||||
where: { deviceId: req.params.deviceId }
|
||||
});
|
||||
|
||||
if (deleted) {
|
||||
// 更新机柜当前功率
|
||||
const rack = await Rack.findByPk(device.rackId);
|
||||
if (rack) {
|
||||
await rack.update({
|
||||
currentPower: Math.max(0, rack.currentPower - device.powerConsumption)
|
||||
});
|
||||
}
|
||||
|
||||
res.status(204).json();
|
||||
} else {
|
||||
res.status(404).json({ error: '设备不存在' });
|
||||
}
|
||||
} catch (error) {
|
||||
res.status(500).json({ error: error.message });
|
||||
}
|
||||
});
|
||||
|
||||
module.exports = router;
|
||||
@@ -0,0 +1,94 @@
|
||||
const express = require('express');
|
||||
const router = express.Router();
|
||||
const Rack = require('../models/Rack');
|
||||
const Device = require('../models/Device');
|
||||
const Room = require('../models/Room');
|
||||
|
||||
// 获取所有机柜
|
||||
router.get('/', async (req, res) => {
|
||||
try {
|
||||
const racks = await Rack.findAll({
|
||||
include: [
|
||||
{ model: Room },
|
||||
{ model: Device }
|
||||
]
|
||||
});
|
||||
res.json(racks);
|
||||
} catch (error) {
|
||||
res.status(500).json({ error: error.message });
|
||||
}
|
||||
});
|
||||
|
||||
// 获取单个机柜
|
||||
router.get('/:rackId', async (req, res) => {
|
||||
try {
|
||||
const rack = await Rack.findByPk(req.params.rackId, {
|
||||
include: [
|
||||
{ model: Room },
|
||||
{ model: Device }
|
||||
]
|
||||
});
|
||||
if (!rack) {
|
||||
return res.status(404).json({ error: '机柜不存在' });
|
||||
}
|
||||
res.json(rack);
|
||||
} catch (error) {
|
||||
res.status(500).json({ error: error.message });
|
||||
}
|
||||
});
|
||||
|
||||
// 创建机柜
|
||||
router.post('/', async (req, res) => {
|
||||
try {
|
||||
const rack = await Rack.create(req.body);
|
||||
res.status(201).json(rack);
|
||||
} catch (error) {
|
||||
res.status(400).json({ error: error.message });
|
||||
}
|
||||
});
|
||||
|
||||
// 更新机柜
|
||||
router.put('/:rackId', async (req, res) => {
|
||||
try {
|
||||
const [updated] = await Rack.update(req.body, {
|
||||
where: { rackId: req.params.rackId }
|
||||
});
|
||||
if (updated) {
|
||||
const updatedRack = await Rack.findByPk(req.params.rackId, {
|
||||
include: [
|
||||
{ model: Room },
|
||||
{ model: Device }
|
||||
]
|
||||
});
|
||||
res.json(updatedRack);
|
||||
} else {
|
||||
res.status(404).json({ error: '机柜不存在' });
|
||||
}
|
||||
} catch (error) {
|
||||
res.status(400).json({ error: error.message });
|
||||
}
|
||||
});
|
||||
|
||||
// 删除机柜
|
||||
router.delete('/:rackId', async (req, res) => {
|
||||
try {
|
||||
// 检查是否有设备关联
|
||||
const devices = await Device.findAll({ where: { rackId: req.params.rackId } });
|
||||
if (devices.length > 0) {
|
||||
return res.status(400).json({ error: '该机柜下有设备，无法删除' });
|
||||
}
|
||||
|
||||
const deleted = await Rack.destroy({
|
||||
where: { rackId: req.params.rackId }
|
||||
});
|
||||
if (deleted) {
|
||||
res.status(204).json();
|
||||
} else {
|
||||
res.status(404).json({ error: '机柜不存在' });
|
||||
}
|
||||
} catch (error) {
|
||||
res.status(500).json({ error: error.message });
|
||||
}
|
||||
});
|
||||
|
||||
module.exports = router;
|
||||
@@ -0,0 +1,82 @@
|
||||
const express = require('express');
|
||||
const router = express.Router();
|
||||
const Room = require('../models/Room');
|
||||
const Rack = require('../models/Rack');
|
||||
|
||||
// 获取所有机房
|
||||
router.get('/', async (req, res) => {
|
||||
try {
|
||||
const rooms = await Room.findAll({
|
||||
include: Rack
|
||||
});
|
||||
res.json(rooms);
|
||||
} catch (error) {
|
||||
res.status(500).json({ error: error.message });
|
||||
}
|
||||
});
|
||||
|
||||
// 获取单个机房
|
||||
router.get('/:roomId', async (req, res) => {
|
||||
try {
|
||||
const room = await Room.findByPk(req.params.roomId, {
|
||||
include: Rack
|
||||
});
|
||||
if (!room) {
|
||||
return res.status(404).json({ error: '机房不存在' });
|
||||
}
|
||||
res.json(room);
|
||||
} catch (error) {
|
||||
res.status(500).json({ error: error.message });
|
||||
}
|
||||
});
|
||||
|
||||
// 创建机房
|
||||
router.post('/', async (req, res) => {
|
||||
try {
|
||||
const room = await Room.create(req.body);
|
||||
res.status(201).json(room);
|
||||
} catch (error) {
|
||||
res.status(400).json({ error: error.message });
|
||||
}
|
||||
});
|
||||
|
||||
// 更新机房
|
||||
router.put('/:roomId', async (req, res) => {
|
||||
try {
|
||||
const [updated] = await Room.update(req.body, {
|
||||
where: { roomId: req.params.roomId }
|
||||
});
|
||||
if (updated) {
|
||||
const updatedRoom = await Room.findByPk(req.params.roomId);
|
||||
res.json(updatedRoom);
|
||||
} else {
|
||||
res.status(404).json({ error: '机房不存在' });
|
||||
}
|
||||
} catch (error) {
|
||||
res.status(400).json({ error: error.message });
|
||||
}
|
||||
});
|
||||
|
||||
// 删除机房
|
||||
router.delete('/:roomId', async (req, res) => {
|
||||
try {
|
||||
// 检查是否有机柜关联
|
||||
const racks = await Rack.findAll({ where: { roomId: req.params.roomId } });
|
||||
if (racks.length > 0) {
|
||||
return res.status(400).json({ error: '该机房下有机柜，无法删除' });
|
||||
}
|
||||
|
||||
const deleted = await Room.destroy({
|
||||
where: { roomId: req.params.roomId }
|
||||
});
|
||||
if (deleted) {
|
||||
res.status(204).json();
|
||||
} else {
|
||||
res.status(404).json({ error: '机房不存在' });
|
||||
}
|
||||
} catch (error) {
|
||||
res.status(500).json({ error: error.message });
|
||||
}
|
||||
});
|
||||
|
||||
module.exports = router;
|
||||
@@ -0,0 +1,52 @@
|
||||
const express = require('express');
|
||||
const cors = require('cors');
|
||||
const { sequelize } = require('./db');
|
||||
|
||||
// 创建Express应用
|
||||
const app = express();
|
||||
const PORT = process.env.PORT || 3001;
|
||||
|
||||
// 中间件
|
||||
app.use(cors());
|
||||
app.use(express.json());
|
||||
|
||||
// 数据库连接已从db.js导入
|
||||
|
||||
// 测试数据库连接并同步表结构
|
||||
sequelize.authenticate()
|
||||
.then(() => {
|
||||
console.log('数据库连接成功');
|
||||
// 自动同步表结构，不再强制删除表
|
||||
return sequelize.sync({
|
||||
force: false, // 改为false，避免每次启动都删除表结构
|
||||
alter: false // SQLite不支持复杂的表结构修改
|
||||
});
|
||||
})
|
||||
.then(() => {
|
||||
console.log('数据库表结构同步完成');
|
||||
// 同步完成后初始化设备字段
|
||||
return require('./initDeviceFields')();
|
||||
})
|
||||
.catch(err => console.error('数据库操作失败:', err));
|
||||
|
||||
// 导入路由
|
||||
const deviceRoutes = require('./routes/devices');
|
||||
const rackRoutes = require('./routes/racks');
|
||||
const roomRoutes = require('./routes/rooms');
|
||||
const deviceFieldRoutes = require('./routes/deviceFields');
|
||||
|
||||
// 使用路由
|
||||
app.use('/api/devices', deviceRoutes);
|
||||
app.use('/api/racks', rackRoutes);
|
||||
app.use('/api/rooms', roomRoutes);
|
||||
app.use('/api/deviceFields', deviceFieldRoutes);
|
||||
|
||||
// 健康检查
|
||||
app.get('/health', (req, res) => {
|
||||
res.json({ status: 'ok', message: 'IDC设备管理系统后端服务正常运行' });
|
||||
});
|
||||
|
||||
// 启动服务器
|
||||
app.listen(PORT, () => {
|
||||
console.log(`服务器运行在 http://localhost:${PORT}`);
|
||||
});
|
||||
@@ -0,0 +1,12 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>IDC设备管理系统</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
<script type="module" src="/src/main.jsx"></script>
|
||||
</body>
|
||||
</html>
|
||||
Generated
+2689
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,23 @@
|
||||
{
|
||||
"name": "idc-frontend",
|
||||
"version": "1.0.0",
|
||||
"description": "IDC设备管理系统前端",
|
||||
"scripts": {
|
||||
"start": "vite",
|
||||
"dev": "vite",
|
||||
"build": "vite build",
|
||||
"preview": "vite preview"
|
||||
},
|
||||
"dependencies": {
|
||||
"@ant-design/icons": "^6.1.0",
|
||||
"antd": "^5.8.6",
|
||||
"axios": "^1.5.0",
|
||||
"react": "^18.2.0",
|
||||
"react-dom": "^18.2.0",
|
||||
"react-router-dom": "^6.15.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@vitejs/plugin-react": "^4.0.3",
|
||||
"vite": "^4.4.9"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,92 @@
|
||||
import React from 'react';
|
||||
import { Layout, Menu, theme } from 'antd';
|
||||
import { BrowserRouter as Router, Routes, Route, Link } from 'react-router-dom';
|
||||
import { BarChartOutlined, DatabaseOutlined, CloudServerOutlined } from '@ant-design/icons';
|
||||
import Dashboard from './pages/Dashboard';
|
||||
import DeviceManagement from './pages/DeviceManagement';
|
||||
import RackManagement from './pages/RackManagement';
|
||||
import RoomManagement from './pages/RoomManagement';
|
||||
import DeviceFieldManagement from './pages/DeviceFieldManagement';
|
||||
|
||||
|
||||
const { Header, Content, Sider } = Layout;
|
||||
|
||||
function App() {
|
||||
const {
|
||||
token: { colorBgContainer, borderRadiusLG },
|
||||
} = theme.useToken();
|
||||
|
||||
return (
|
||||
<Router>
|
||||
<Layout>
|
||||
<Header className="header" style={{
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
backgroundColor: '#001529',
|
||||
color: '#fff',
|
||||
fontSize: '20px',
|
||||
fontWeight: 'bold'
|
||||
}}>
|
||||
IDC设备管理系统
|
||||
</Header>
|
||||
<Layout>
|
||||
<Sider width={200} style={{ backgroundColor: colorBgContainer }}>
|
||||
<Menu
|
||||
mode="inline"
|
||||
defaultSelectedKeys={['1']}
|
||||
style={{ height: '100%', borderRight: 0 }}
|
||||
items={[
|
||||
{
|
||||
key: '1',
|
||||
icon: <BarChartOutlined />,
|
||||
label: <Link to="/">仪表盘</Link>,
|
||||
},
|
||||
{
|
||||
key: '2',
|
||||
icon: <CloudServerOutlined />,
|
||||
label: <Link to="/devices">设备管理</Link>,
|
||||
},
|
||||
{
|
||||
key: '3',
|
||||
icon: <DatabaseOutlined />,
|
||||
label: <Link to="/racks">机柜管理</Link>,
|
||||
},
|
||||
{
|
||||
key: '4',
|
||||
icon: <DatabaseOutlined />,
|
||||
label: <Link to="/rooms">机房管理</Link>,
|
||||
},
|
||||
{
|
||||
key: '5',
|
||||
icon: <BarChartOutlined />,
|
||||
label: <Link to="/fields">字段管理</Link>,
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</Sider>
|
||||
<Layout style={{ padding: '0 24px 24px' }}>
|
||||
<Content
|
||||
style={{
|
||||
padding: 24,
|
||||
margin: 0,
|
||||
minHeight: 280,
|
||||
background: colorBgContainer,
|
||||
borderRadius: borderRadiusLG,
|
||||
}}
|
||||
>
|
||||
<Routes>
|
||||
<Route path="/" element={<Dashboard />} />
|
||||
<Route path="/devices" element={<DeviceManagement />} />
|
||||
<Route path="/racks" element={<RackManagement />} />
|
||||
<Route path="/rooms" element={<RoomManagement />} />
|
||||
<Route path="/fields" element={<DeviceFieldManagement />} />
|
||||
</Routes>
|
||||
</Content>
|
||||
</Layout>
|
||||
</Layout>
|
||||
</Layout>
|
||||
</Router>
|
||||
);
|
||||
}
|
||||
|
||||
export default App;
|
||||
@@ -0,0 +1,34 @@
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
|
||||
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
|
||||
sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
#root {
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
.ant-layout {
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.ant-layout-content {
|
||||
padding: 24px;
|
||||
background-color: #f0f2f5;
|
||||
}
|
||||
|
||||
.ant-card {
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.ant-table {
|
||||
margin-top: 16px;
|
||||
}
|
||||
@@ -0,0 +1,10 @@
|
||||
import React from 'react';
|
||||
import ReactDOM from 'react-dom/client';
|
||||
import App from './App';
|
||||
import './index.css';
|
||||
|
||||
ReactDOM.createRoot(document.getElementById('root')).render(
|
||||
<React.StrictMode>
|
||||
<App />
|
||||
</React.StrictMode>
|
||||
);
|
||||
@@ -0,0 +1,105 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { Card, Row, Col, Statistic, Spin, message } from 'antd';
|
||||
import { DatabaseOutlined, CloudServerOutlined, WarningOutlined, PoweroffOutlined } from '@ant-design/icons';
|
||||
import axios from 'axios';
|
||||
|
||||
function Dashboard() {
|
||||
const [stats, setStats] = useState({
|
||||
totalDevices: 0,
|
||||
totalRacks: 0,
|
||||
totalRooms: 0,
|
||||
faultDevices: 0
|
||||
});
|
||||
const [loading, setLoading] = useState(true);
|
||||
|
||||
useEffect(() => {
|
||||
// 获取统计数据
|
||||
const fetchStats = async () => {
|
||||
try {
|
||||
setLoading(true);
|
||||
|
||||
// 获取所有设备
|
||||
const devicesRes = await axios.get('/api/devices');
|
||||
const totalDevices = devicesRes.data.length;
|
||||
const faultDevices = devicesRes.data.filter(device => device.status === 'fault').length;
|
||||
|
||||
// 获取所有机柜
|
||||
const racksRes = await axios.get('/api/racks');
|
||||
const totalRacks = racksRes.data.length;
|
||||
|
||||
// 获取所有机房
|
||||
const roomsRes = await axios.get('/api/rooms');
|
||||
const totalRooms = roomsRes.data.length;
|
||||
|
||||
setStats({
|
||||
totalDevices,
|
||||
totalRacks,
|
||||
totalRooms,
|
||||
faultDevices
|
||||
});
|
||||
} catch (error) {
|
||||
message.error('获取统计数据失败');
|
||||
console.error('获取统计数据失败:', error);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
fetchStats();
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div>
|
||||
<h1>仪表盘</h1>
|
||||
<Row gutter={16} style={{ marginTop: 16 }}>
|
||||
<Col span={6}>
|
||||
<Card variant="outlined">
|
||||
<Statistic
|
||||
title="总设备数"
|
||||
value={stats.totalDevices}
|
||||
prefix={<CloudServerOutlined />}
|
||||
loading={loading}
|
||||
/>
|
||||
</Card>
|
||||
</Col>
|
||||
<Col span={6}>
|
||||
<Card variant="outlined">
|
||||
<Statistic
|
||||
title="总机柜数"
|
||||
value={stats.totalRacks}
|
||||
prefix={<DatabaseOutlined />}
|
||||
loading={loading}
|
||||
/>
|
||||
</Card>
|
||||
</Col>
|
||||
<Col span={6}>
|
||||
<Card variant="outlined">
|
||||
<Statistic
|
||||
title="总机房数"
|
||||
value={stats.totalRooms}
|
||||
prefix={<DatabaseOutlined />}
|
||||
loading={loading}
|
||||
/>
|
||||
</Card>
|
||||
</Col>
|
||||
<Col span={6}>
|
||||
<Card variant="outlined">
|
||||
<Statistic
|
||||
title="故障设备"
|
||||
value={stats.faultDevices}
|
||||
prefix={<WarningOutlined />}
|
||||
valueStyle={{ color: '#cf1322' }}
|
||||
loading={loading}
|
||||
/>
|
||||
</Card>
|
||||
</Col>
|
||||
</Row>
|
||||
<Card title="系统概览" style={{ marginTop: 16 }}>
|
||||
<p>欢迎使用IDC设备管理系统！</p>
|
||||
<p>本系统用于管理IDC机房中的设备、机柜和机房信息，提供设备状态监控、资源分配等功能。</p>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default Dashboard;
|
||||
@@ -0,0 +1,275 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { Table, Button, Modal, Form, Input, Select, message, Card, Space, InputNumber, Switch } from 'antd';
|
||||
import { PlusOutlined, EditOutlined, DeleteOutlined } from '@ant-design/icons';
|
||||
import axios from 'axios';
|
||||
|
||||
const { Option } = Select;
|
||||
|
||||
function DeviceFieldManagement() {
|
||||
const [fields, setFields] = useState([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [modalVisible, setModalVisible] = useState(false);
|
||||
const [editingField, setEditingField] = useState(null);
|
||||
const [form] = Form.useForm();
|
||||
|
||||
// 获取所有字段配置
|
||||
const fetchFields = async () => {
|
||||
try {
|
||||
setLoading(true);
|
||||
const response = await axios.get('/api/deviceFields');
|
||||
setFields(response.data.sort((a, b) => a.order - b.order));
|
||||
} catch (error) {
|
||||
message.error('获取字段列表失败');
|
||||
console.error('获取字段列表失败:', error);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
fetchFields();
|
||||
}, []);
|
||||
|
||||
// 打开模态框
|
||||
const showModal = (field = null) => {
|
||||
setEditingField(field);
|
||||
if (field) {
|
||||
// 将options对象转换为JSON字符串以便在TextArea中显示
|
||||
const fieldData = {
|
||||
...field,
|
||||
options: field.options ? JSON.stringify(field.options, null, 2) : ''
|
||||
};
|
||||
form.setFieldsValue(fieldData);
|
||||
} else {
|
||||
form.resetFields();
|
||||
}
|
||||
setModalVisible(true);
|
||||
};
|
||||
|
||||
// 关闭模态框
|
||||
const handleCancel = () => {
|
||||
setModalVisible(false);
|
||||
setEditingField(null);
|
||||
};
|
||||
|
||||
// 提交表单
|
||||
const handleSubmit = async (values) => {
|
||||
try {
|
||||
// 处理选项配置，将JSON字符串转换为对象
|
||||
const fieldData = {
|
||||
...values,
|
||||
options: values.options ? JSON.parse(values.options) : null
|
||||
};
|
||||
|
||||
if (editingField) {
|
||||
// 更新字段
|
||||
await axios.put(`/api/deviceFields/${editingField.fieldId}`, fieldData);
|
||||
message.success('字段更新成功');
|
||||
} else {
|
||||
// 创建字段
|
||||
await axios.post('/api/deviceFields', fieldData);
|
||||
message.success('字段创建成功');
|
||||
}
|
||||
|
||||
setModalVisible(false);
|
||||
fetchFields();
|
||||
setEditingField(null);
|
||||
} catch (error) {
|
||||
message.error(editingField ? '字段更新失败' : '字段创建失败');
|
||||
console.error(editingField ? '字段更新失败:' : '字段创建失败:', error);
|
||||
}
|
||||
};
|
||||
|
||||
// 删除字段
|
||||
const handleDelete = async (fieldId) => {
|
||||
Modal.confirm({
|
||||
title: '确认删除',
|
||||
content: '确定要删除这个字段吗？',
|
||||
okText: '删除',
|
||||
okType: 'danger',
|
||||
cancelText: '取消',
|
||||
onOk: async () => {
|
||||
try {
|
||||
await axios.delete(`/api/deviceFields/${fieldId}`);
|
||||
message.success('字段删除成功');
|
||||
fetchFields();
|
||||
} catch (error) {
|
||||
message.error('字段删除失败');
|
||||
console.error('字段删除失败:', error);
|
||||
}
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
// 表格列配置
|
||||
const columns = [
|
||||
{
|
||||
title: '字段名称',
|
||||
dataIndex: 'fieldName',
|
||||
key: 'fieldName',
|
||||
},
|
||||
{
|
||||
title: '显示名称',
|
||||
dataIndex: 'displayName',
|
||||
key: 'displayName',
|
||||
},
|
||||
{
|
||||
title: '字段类型',
|
||||
dataIndex: 'fieldType',
|
||||
key: 'fieldType',
|
||||
render: (type) => {
|
||||
const typeMap = {
|
||||
string: '文本',
|
||||
number: '数字',
|
||||
boolean: '布尔值',
|
||||
select: '下拉选择',
|
||||
date: '日期',
|
||||
textarea: '多行文本'
|
||||
};
|
||||
return typeMap[type] || type;
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '必填',
|
||||
dataIndex: 'required',
|
||||
key: 'required',
|
||||
render: (required) => (
|
||||
<Switch checked={required} disabled />
|
||||
)
|
||||
},
|
||||
{
|
||||
title: '可见',
|
||||
dataIndex: 'visible',
|
||||
key: 'visible',
|
||||
render: (visible) => (
|
||||
<Switch checked={visible} disabled />
|
||||
)
|
||||
},
|
||||
{
|
||||
title: '顺序',
|
||||
dataIndex: 'order',
|
||||
key: 'order',
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
key: 'action',
|
||||
render: (_, record) => (
|
||||
<Space size="middle">
|
||||
<Button type="primary" icon={<EditOutlined />} onClick={() => showModal(record)} size="small">
|
||||
编辑
|
||||
</Button>
|
||||
<Button danger icon={<DeleteOutlined />} onClick={() => handleDelete(record.fieldId)} size="small">
|
||||
删除
|
||||
</Button>
|
||||
</Space>
|
||||
),
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<div>
|
||||
<Card title="设备字段管理" extra={
|
||||
<Button type="primary" icon={<PlusOutlined />} onClick={() => showModal()}>
|
||||
添加字段
|
||||
</Button>
|
||||
}>
|
||||
<Table
|
||||
columns={columns}
|
||||
dataSource={fields}
|
||||
rowKey="fieldId"
|
||||
loading={loading}
|
||||
pagination={{ pageSize: 10 }}
|
||||
/>
|
||||
</Card>
|
||||
|
||||
<Modal
|
||||
title={editingField ? '编辑字段' : '添加字段'}
|
||||
open={modalVisible}
|
||||
onCancel={handleCancel}
|
||||
footer={null}
|
||||
width={600}
|
||||
>
|
||||
<Form
|
||||
form={form}
|
||||
layout="vertical"
|
||||
onFinish={handleSubmit}
|
||||
>
|
||||
<Form.Item
|
||||
name="fieldName"
|
||||
label="字段名称"
|
||||
rules={[{ required: true, message: '请输入字段名称' }]}
|
||||
>
|
||||
<Input placeholder="请输入字段名称（英文，如：deviceId）" />
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item
|
||||
name="displayName"
|
||||
label="显示名称"
|
||||
rules={[{ required: true, message: '请输入显示名称' }]}
|
||||
>
|
||||
<Input placeholder="请输入显示名称（中文，如：设备ID）" />
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item
|
||||
name="fieldType"
|
||||
label="字段类型"
|
||||
rules={[{ required: true, message: '请选择字段类型' }]}
|
||||
>
|
||||
<Select placeholder="请选择字段类型">
|
||||
<Option value="string">文本</Option>
|
||||
<Option value="number">数字</Option>
|
||||
<Option value="boolean">布尔值</Option>
|
||||
<Option value="select">下拉选择</Option>
|
||||
<Option value="date">日期</Option>
|
||||
<Option value="textarea">多行文本</Option>
|
||||
</Select>
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item
|
||||
name="required"
|
||||
label="必填"
|
||||
>
|
||||
<Switch />
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item
|
||||
name="visible"
|
||||
label="可见"
|
||||
>
|
||||
<Switch defaultChecked />
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item
|
||||
name="order"
|
||||
label="显示顺序"
|
||||
rules={[{ required: true, message: '请输入显示顺序' }]}
|
||||
>
|
||||
<InputNumber placeholder="请输入显示顺序" min={0} style={{ width: '100%' }} />
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item
|
||||
name="options"
|
||||
label="选项配置（仅下拉选择类型，JSON格式）"
|
||||
tooltip="格式示例：[{value: 'option1', label: '选项1'}]，使用单引号"
|
||||
>
|
||||
<Input.TextArea
|
||||
rows={3}
|
||||
placeholder="请输入JSON格式的选项配置，使用单引号"
|
||||
/>
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item style={{ textAlign: 'right' }}>
|
||||
<Space>
|
||||
<Button onClick={handleCancel}>取消</Button>
|
||||
<Button type="primary" htmlType="submit">
|
||||
确定
|
||||
</Button>
|
||||
</Space>
|
||||
</Form.Item>
|
||||
</Form>
|
||||
</Modal>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default DeviceFieldManagement;
|
||||
@@ -0,0 +1,466 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { Table, Button, Modal, Form, Input, Select, DatePicker, message, Card, Space, InputNumber, Switch } from 'antd';
|
||||
import { PlusOutlined, EditOutlined, DeleteOutlined, SearchOutlined } from '@ant-design/icons';
|
||||
import axios from 'axios';
|
||||
import dayjs from 'dayjs';
|
||||
|
||||
const { Option } = Select;
|
||||
const { RangePicker } = DatePicker;
|
||||
|
||||
function DeviceManagement() {
|
||||
const [devices, setDevices] = useState([]);
|
||||
const [racks, setRacks] = useState([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [modalVisible, setModalVisible] = useState(false);
|
||||
const [editingDevice, setEditingDevice] = useState(null);
|
||||
const [form] = Form.useForm();
|
||||
// 自定义字段状态
|
||||
const [customFieldName, setCustomFieldName] = useState('');
|
||||
const [customFieldValue, setCustomFieldValue] = useState('');
|
||||
// 设备字段配置
|
||||
const [deviceFields, setDeviceFields] = useState([]);
|
||||
const [loadingFields, setLoadingFields] = useState(true);
|
||||
|
||||
// 获取所有设备
|
||||
const fetchDevices = async () => {
|
||||
try {
|
||||
setLoading(true);
|
||||
const response = await axios.get('/api/devices');
|
||||
|
||||
// 将customFields中的字段值映射为设备对象的直接属性
|
||||
const processedDevices = response.data.map(device => {
|
||||
const deviceWithFields = { ...device };
|
||||
|
||||
// 如果有自定义字段，将其展开为设备对象的直接属性
|
||||
if (device.customFields && typeof device.customFields === 'object') {
|
||||
Object.entries(device.customFields).forEach(([fieldName, value]) => {
|
||||
deviceWithFields[fieldName] = value;
|
||||
});
|
||||
}
|
||||
|
||||
return deviceWithFields;
|
||||
});
|
||||
|
||||
setDevices(processedDevices);
|
||||
} catch (error) {
|
||||
message.error('获取设备列表失败');
|
||||
console.error('获取设备列表失败:', error);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
// 获取设备字段配置
|
||||
const fetchDeviceFields = async () => {
|
||||
try {
|
||||
setLoadingFields(true);
|
||||
const response = await axios.get('/api/deviceFields');
|
||||
// 按顺序排序字段
|
||||
const sortedFields = response.data.sort((a, b) => a.order - b.order);
|
||||
setDeviceFields(sortedFields);
|
||||
} catch (error) {
|
||||
message.error('获取字段配置失败');
|
||||
console.error('获取字段配置失败:', error);
|
||||
// 如果获取失败，使用默认字段配置
|
||||
setDeviceFields(defaultDeviceFields);
|
||||
} finally {
|
||||
setLoadingFields(false);
|
||||
}
|
||||
};
|
||||
|
||||
// 默认设备字段配置
|
||||
const defaultDeviceFields = [
|
||||
{ fieldName: 'deviceId', displayName: '设备ID', fieldType: 'string', required: true, order: 1, visible: true },
|
||||
{ fieldName: 'name', displayName: '设备名称', fieldType: 'string', required: true, order: 2, visible: true },
|
||||
{ fieldName: 'type', displayName: '设备类型', fieldType: 'select', required: true, order: 3, visible: true,
|
||||
options: [{ value: 'server', label: '服务器' }, { value: 'switch', label: '交换机' }, { value: 'router', label: '路由器' }, { value: 'storage', label: '存储设备' }, { value: 'other', label: '其他设备' }] },
|
||||
{ fieldName: 'model', displayName: '型号', fieldType: 'string', required: true, order: 4, visible: true },
|
||||
{ fieldName: 'serialNumber', displayName: '序列号', fieldType: 'string', required: true, order: 5, visible: true },
|
||||
{ fieldName: 'rackId', displayName: '所在机柜', fieldType: 'select', required: true, order: 6, visible: true },
|
||||
{ fieldName: 'position', displayName: '位置(U)', fieldType: 'number', required: true, order: 7, visible: true },
|
||||
{ fieldName: 'height', displayName: '高度(U)', fieldType: 'number', required: true, order: 8, visible: true },
|
||||
{ fieldName: 'powerConsumption', displayName: '功率(W)', fieldType: 'number', required: true, order: 9, visible: true },
|
||||
{ fieldName: 'status', displayName: '状态', fieldType: 'select', required: true, order: 10, visible: true,
|
||||
options: [{ value: 'running', label: '运行中' }, { value: 'maintenance', label: '维护中' }, { value: 'offline', label: '离线' }, { value: 'fault', label: '故障' }] },
|
||||
{ fieldName: 'purchaseDate', displayName: '购买日期', fieldType: 'date', required: true, order: 11, visible: true },
|
||||
{ fieldName: 'warrantyExpiry', displayName: '保修到期', fieldType: 'date', required: true, order: 12, visible: true },
|
||||
{ fieldName: 'ipAddress', displayName: 'IP地址', fieldType: 'string', required: false, order: 13, visible: true },
|
||||
{ fieldName: 'description', displayName: '描述', fieldType: 'textarea', required: false, order: 14, visible: true }
|
||||
];
|
||||
|
||||
|
||||
// 获取所有机柜
|
||||
const fetchRacks = async () => {
|
||||
try {
|
||||
const response = await axios.get('/api/racks');
|
||||
setRacks(response.data);
|
||||
} catch (error) {
|
||||
message.error('获取机柜列表失败');
|
||||
console.error('获取机柜列表失败:', error);
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
fetchDevices();
|
||||
fetchRacks();
|
||||
fetchDeviceFields();
|
||||
}, []);
|
||||
|
||||
// 打开模态框
|
||||
const showModal = (device = null) => {
|
||||
setEditingDevice(device);
|
||||
if (device) {
|
||||
// 转换日期字段为dayjs格式
|
||||
const deviceData = { ...device };
|
||||
if (deviceData.purchaseDate) deviceData.purchaseDate = dayjs(deviceData.purchaseDate);
|
||||
if (deviceData.warrantyExpiry) deviceData.warrantyExpiry = dayjs(deviceData.warrantyExpiry);
|
||||
if (!deviceData.customFields) deviceData.customFields = {};
|
||||
|
||||
// 将customFields中的字段值合并到deviceData中，以便动态表单控件能正确显示
|
||||
Object.entries(deviceData.customFields).forEach(([fieldName, value]) => {
|
||||
deviceData[fieldName] = value;
|
||||
});
|
||||
|
||||
form.setFieldsValue(deviceData);
|
||||
} else {
|
||||
form.resetFields();
|
||||
}
|
||||
setModalVisible(true);
|
||||
};
|
||||
|
||||
// 关闭模态框
|
||||
const handleCancel = () => {
|
||||
setModalVisible(false);
|
||||
setEditingDevice(null);
|
||||
};
|
||||
|
||||
// 提交表单
|
||||
const handleSubmit = async (values) => {
|
||||
try {
|
||||
// 定义设备模型的固定字段
|
||||
const fixedFields = [
|
||||
'deviceId', 'name', 'type', 'model', 'serialNumber', 'rackId',
|
||||
'position', 'height', 'powerConsumption', 'status', 'purchaseDate',
|
||||
'warrantyExpiry', 'ipAddress', 'description'
|
||||
];
|
||||
|
||||
// 分离固定字段和动态字段
|
||||
const fixedFieldValues = {};
|
||||
const dynamicFieldValues = {};
|
||||
|
||||
Object.entries(values).forEach(([key, value]) => {
|
||||
if (fixedFields.includes(key)) {
|
||||
fixedFieldValues[key] = value;
|
||||
} else if (key !== 'customFields') {
|
||||
dynamicFieldValues[key] = value;
|
||||
}
|
||||
});
|
||||
|
||||
// 合并原有的自定义字段和新的动态字段
|
||||
const allCustomFields = {
|
||||
...(values.customFields || {}),
|
||||
...dynamicFieldValues
|
||||
};
|
||||
|
||||
// 构建最终的设备数据
|
||||
const deviceData = {
|
||||
...fixedFieldValues,
|
||||
purchaseDate: fixedFieldValues.purchaseDate ? fixedFieldValues.purchaseDate.format('YYYY-MM-DD') : null,
|
||||
warrantyExpiry: fixedFieldValues.warrantyExpiry ? fixedFieldValues.warrantyExpiry.format('YYYY-MM-DD') : null,
|
||||
customFields: allCustomFields
|
||||
};
|
||||
|
||||
if (editingDevice) {
|
||||
// 更新设备
|
||||
await axios.put(`/api/devices/${editingDevice.deviceId}`, deviceData);
|
||||
message.success('设备更新成功');
|
||||
} else {
|
||||
// 创建设备
|
||||
await axios.post('/api/devices', deviceData);
|
||||
message.success('设备创建成功');
|
||||
}
|
||||
|
||||
setModalVisible(false);
|
||||
fetchDevices();
|
||||
setEditingDevice(null);
|
||||
} catch (error) {
|
||||
message.error(editingDevice ? '设备更新失败' : '设备创建失败');
|
||||
console.error(editingDevice ? '设备更新失败:' : '设备创建失败:', error);
|
||||
}
|
||||
};
|
||||
|
||||
// 删除设备
|
||||
const handleDelete = async (deviceId) => {
|
||||
Modal.confirm({
|
||||
title: '确认删除',
|
||||
content: '确定要删除这个设备吗？',
|
||||
okText: '删除',
|
||||
okType: 'danger',
|
||||
cancelText: '取消',
|
||||
onOk: async () => {
|
||||
try {
|
||||
await axios.delete(`/api/devices/${deviceId}`);
|
||||
message.success('设备删除成功');
|
||||
fetchDevices();
|
||||
} catch (error) {
|
||||
message.error('设备删除失败');
|
||||
console.error('设备删除失败:', error);
|
||||
}
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
// 状态标签映射
|
||||
const statusMap = {
|
||||
running: { text: '运行中', color: 'green' },
|
||||
maintenance: { text: '维护中', color: 'orange' },
|
||||
offline: { text: '离线', color: 'gray' },
|
||||
fault: { text: '故障', color: 'red' }
|
||||
};
|
||||
|
||||
// 设备类型映射
|
||||
const typeMap = {
|
||||
server: '服务器',
|
||||
switch: '交换机',
|
||||
router: '路由器',
|
||||
storage: '存储设备',
|
||||
other: '其他设备'
|
||||
};
|
||||
|
||||
// 动态生成表格列配置
|
||||
const columns = React.useMemo(() => {
|
||||
const generatedColumns = [];
|
||||
|
||||
// 根据字段配置动态生成列
|
||||
deviceFields.forEach(field => {
|
||||
// 特殊处理机柜字段
|
||||
if (field.fieldName === 'rackId') {
|
||||
generatedColumns.push({
|
||||
title: field.displayName,
|
||||
dataIndex: ['Rack', 'name'],
|
||||
key: field.fieldName,
|
||||
});
|
||||
}
|
||||
// 特殊处理设备类型
|
||||
else if (field.fieldName === 'type') {
|
||||
generatedColumns.push({
|
||||
title: field.displayName,
|
||||
dataIndex: field.fieldName,
|
||||
key: field.fieldName,
|
||||
render: (type) => typeMap[type],
|
||||
});
|
||||
}
|
||||
// 特殊处理状态字段
|
||||
else if (field.fieldName === 'status') {
|
||||
generatedColumns.push({
|
||||
title: field.displayName,
|
||||
dataIndex: field.fieldName,
|
||||
key: field.fieldName,
|
||||
render: (status) => (
|
||||
<span style={{ color: statusMap[status]?.color || 'black' }}>
|
||||
{statusMap[status]?.text || status}
|
||||
</span>
|
||||
),
|
||||
});
|
||||
}
|
||||
// 特殊处理日期字段
|
||||
else if (field.fieldType === 'date') {
|
||||
generatedColumns.push({
|
||||
title: field.displayName,
|
||||
dataIndex: field.fieldName,
|
||||
key: field.fieldName,
|
||||
render: (date) => date ? new Date(date).toLocaleDateString('zh-CN') : '',
|
||||
});
|
||||
}
|
||||
// 普通字段
|
||||
else {
|
||||
generatedColumns.push({
|
||||
title: field.displayName,
|
||||
dataIndex: field.fieldName,
|
||||
key: field.fieldName,
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
// 添加操作列
|
||||
generatedColumns.push({
|
||||
title: '操作',
|
||||
key: 'action',
|
||||
render: (_, record) => (
|
||||
<Space size="middle">
|
||||
<Button type="primary" icon={<EditOutlined />} onClick={() => showModal(record)} size="small">
|
||||
编辑
|
||||
</Button>
|
||||
<Button danger icon={<DeleteOutlined />} onClick={() => handleDelete(record.deviceId)} size="small">
|
||||
删除
|
||||
</Button>
|
||||
</Space>
|
||||
),
|
||||
});
|
||||
|
||||
return generatedColumns;
|
||||
}, [deviceFields]);
|
||||
|
||||
return (
|
||||
<div>
|
||||
<Card title="设备管理" extra={
|
||||
<Button type="primary" icon={<PlusOutlined />} onClick={() => showModal()}>
|
||||
添加设备
|
||||
</Button>
|
||||
}>
|
||||
<Table
|
||||
columns={columns}
|
||||
dataSource={devices}
|
||||
rowKey="deviceId"
|
||||
loading={loading}
|
||||
pagination={{ pageSize: 10 }}
|
||||
/>
|
||||
</Card>
|
||||
|
||||
<Modal
|
||||
title={editingDevice ? '编辑设备' : '添加设备'}
|
||||
open={modalVisible}
|
||||
onCancel={handleCancel}
|
||||
footer={null}
|
||||
width={700}
|
||||
>
|
||||
<Form
|
||||
form={form}
|
||||
layout="vertical"
|
||||
onFinish={handleSubmit}
|
||||
>
|
||||
{/* 动态生成表单字段 */}
|
||||
{deviceFields.map(field => {
|
||||
// 根据字段类型生成表单控件
|
||||
let control = null;
|
||||
|
||||
switch (field.fieldType) {
|
||||
case 'text':
|
||||
case 'string':
|
||||
control = <Input placeholder={`请输入${field.displayName}`} />;
|
||||
break;
|
||||
case 'number':
|
||||
control = <InputNumber placeholder={`请输入${field.displayName}`} min={0} style={{ width: '100%' }} />;
|
||||
break;
|
||||
case 'boolean':
|
||||
control = <Switch />;
|
||||
break;
|
||||
case 'date':
|
||||
control = <DatePicker style={{ width: '100%' }} placeholder={`请选择${field.displayName}`} />;
|
||||
break;
|
||||
case 'textarea':
|
||||
control = <Input.TextArea placeholder={`请输入${field.displayName}`} rows={3} />;
|
||||
break;
|
||||
case 'select':
|
||||
// 特殊处理机柜选择
|
||||
if (field.fieldName === 'rackId') {
|
||||
control = (
|
||||
<Select placeholder={`请选择${field.displayName}`}>
|
||||
{racks.map(rack => (
|
||||
<Option key={rack.rackId} value={rack.rackId}>
|
||||
{rack.name} ({rack.rackId})
|
||||
</Option>
|
||||
))}
|
||||
</Select>
|
||||
);
|
||||
} else {
|
||||
control = (
|
||||
<Select placeholder={`请选择${field.displayName}`}>
|
||||
{field.options && field.options.map(option => (
|
||||
<Option key={option.value} value={option.value}>
|
||||
{option.label}
|
||||
</Option>
|
||||
))}
|
||||
</Select>
|
||||
);
|
||||
}
|
||||
break;
|
||||
default:
|
||||
control = <Input placeholder={`请输入${field.displayName}`} />;
|
||||
}
|
||||
|
||||
return (
|
||||
<Form.Item
|
||||
key={field.fieldName}
|
||||
name={field.fieldName}
|
||||
label={field.displayName}
|
||||
rules={field.required ? [{ required: true, message: `请输入${field.displayName}` }] : []}
|
||||
>
|
||||
{control}
|
||||
</Form.Item>
|
||||
);
|
||||
})}
|
||||
|
||||
{/* 自定义字段区域 */}
|
||||
<Form.Item label="自定义字段">
|
||||
<div>
|
||||
{/* 添加自定义字段 */}
|
||||
<Space style={{ marginBottom: 16 }}>
|
||||
<Input
|
||||
placeholder="字段名称"
|
||||
value={customFieldName}
|
||||
onChange={(e) => setCustomFieldName(e.target.value)}
|
||||
style={{ width: 150 }}
|
||||
/>
|
||||
<Input
|
||||
placeholder="字段值"
|
||||
value={customFieldValue}
|
||||
onChange={(e) => setCustomFieldValue(e.target.value)}
|
||||
style={{ width: 150 }}
|
||||
/>
|
||||
<Button
|
||||
type="primary"
|
||||
onClick={() => {
|
||||
if (customFieldName && customFieldValue) {
|
||||
const currentCustomFields = form.getFieldValue('customFields') || {};
|
||||
form.setFieldValue('customFields', {
|
||||
...currentCustomFields,
|
||||
[customFieldName]: customFieldValue
|
||||
});
|
||||
setCustomFieldName('');
|
||||
setCustomFieldValue('');
|
||||
}
|
||||
}}
|
||||
>
|
||||
添加字段
|
||||
</Button>
|
||||
</Space>
|
||||
|
||||
{/* 显示自定义字段 */}
|
||||
<div>
|
||||
{Object.entries(form.getFieldValue('customFields') || {}).map(([key, value]) => (
|
||||
<div key={key} style={{ marginBottom: 8, display: 'flex', alignItems: 'center' }}>
|
||||
<span style={{ marginRight: 8, fontWeight: 'bold' }}>{key}:</span>
|
||||
<span style={{ marginRight: 16 }}>{value}</span>
|
||||
<Button
|
||||
danger
|
||||
size="small"
|
||||
onClick={() => {
|
||||
const currentCustomFields = { ...form.getFieldValue('customFields') };
|
||||
delete currentCustomFields[key];
|
||||
form.setFieldValue('customFields', currentCustomFields);
|
||||
}}
|
||||
>
|
||||
删除
|
||||
</Button>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item style={{ textAlign: 'right' }}>
|
||||
<Space>
|
||||
<Button onClick={handleCancel}>取消</Button>
|
||||
<Button type="primary" htmlType="submit">
|
||||
确定
|
||||
</Button>
|
||||
</Space>
|
||||
</Form.Item>
|
||||
</Form>
|
||||
</Modal>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default DeviceManagement;
|
||||
@@ -0,0 +1,283 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { Table, Button, Modal, Form, Input, Select, message, Card, Space, InputNumber } from 'antd';
|
||||
import { PlusOutlined, EditOutlined, DeleteOutlined } from '@ant-design/icons';
|
||||
import axios from 'axios';
|
||||
|
||||
const { Option } = Select;
|
||||
|
||||
function RackManagement() {
|
||||
const [racks, setRacks] = useState([]);
|
||||
const [rooms, setRooms] = useState([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [modalVisible, setModalVisible] = useState(false);
|
||||
const [editingRack, setEditingRack] = useState(null);
|
||||
const [form] = Form.useForm();
|
||||
|
||||
// 获取所有机柜
|
||||
const fetchRacks = async () => {
|
||||
try {
|
||||
setLoading(true);
|
||||
const response = await axios.get('/api/racks');
|
||||
setRacks(response.data);
|
||||
} catch (error) {
|
||||
message.error('获取机柜列表失败');
|
||||
console.error('获取机柜列表失败:', error);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
// 获取所有机房
|
||||
const fetchRooms = async () => {
|
||||
try {
|
||||
const response = await axios.get('/api/rooms');
|
||||
setRooms(response.data);
|
||||
} catch (error) {
|
||||
message.error('获取机房列表失败');
|
||||
console.error('获取机房列表失败:', error);
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
fetchRacks();
|
||||
fetchRooms();
|
||||
}, []);
|
||||
|
||||
// 打开模态框
|
||||
const showModal = (rack = null) => {
|
||||
setEditingRack(rack);
|
||||
if (rack) {
|
||||
form.setFieldsValue(rack);
|
||||
} else {
|
||||
form.resetFields();
|
||||
}
|
||||
setModalVisible(true);
|
||||
};
|
||||
|
||||
// 关闭模态框
|
||||
const handleCancel = () => {
|
||||
setModalVisible(false);
|
||||
setEditingRack(null);
|
||||
};
|
||||
|
||||
// 提交表单
|
||||
const handleSubmit = async (values) => {
|
||||
try {
|
||||
if (editingRack) {
|
||||
// 更新机柜
|
||||
await axios.put(`/api/racks/${editingRack.rackId}`, values);
|
||||
message.success('机柜更新成功');
|
||||
} else {
|
||||
// 创建机柜
|
||||
await axios.post('/api/racks', values);
|
||||
message.success('机柜创建成功');
|
||||
}
|
||||
|
||||
setModalVisible(false);
|
||||
fetchRacks();
|
||||
setEditingRack(null);
|
||||
} catch (error) {
|
||||
message.error(editingRack ? '机柜更新失败' : '机柜创建失败');
|
||||
console.error(editingRack ? '机柜更新失败:' : '机柜创建失败:', error);
|
||||
}
|
||||
};
|
||||
|
||||
// 删除机柜
|
||||
const handleDelete = async (rackId) => {
|
||||
Modal.confirm({
|
||||
title: '确认删除',
|
||||
content: '确定要删除这个机柜吗？',
|
||||
okText: '删除',
|
||||
okType: 'danger',
|
||||
cancelText: '取消',
|
||||
onOk: async () => {
|
||||
try {
|
||||
await axios.delete(`/api/racks/${rackId}`);
|
||||
message.success('机柜删除成功');
|
||||
fetchRacks();
|
||||
} catch (error) {
|
||||
message.error('机柜删除失败');
|
||||
console.error('机柜删除失败:', error);
|
||||
}
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
// 状态标签映射
|
||||
const statusMap = {
|
||||
active: { text: '在用', color: 'green' },
|
||||
maintenance: { text: '维护中', color: 'orange' },
|
||||
inactive: { text: '停用', color: 'gray' }
|
||||
};
|
||||
|
||||
// 表格列配置
|
||||
const columns = [
|
||||
{
|
||||
title: '机柜ID',
|
||||
dataIndex: 'rackId',
|
||||
key: 'rackId',
|
||||
},
|
||||
{
|
||||
title: '机柜名称',
|
||||
dataIndex: 'name',
|
||||
key: 'name',
|
||||
},
|
||||
{
|
||||
title: '所属机房',
|
||||
dataIndex: ['Room', 'name'],
|
||||
key: 'room',
|
||||
},
|
||||
{
|
||||
title: '高度(U)',
|
||||
dataIndex: 'height',
|
||||
key: 'height',
|
||||
},
|
||||
{
|
||||
title: '最大功率(W)',
|
||||
dataIndex: 'maxPower',
|
||||
key: 'maxPower',
|
||||
},
|
||||
{
|
||||
title: '当前功率(W)',
|
||||
dataIndex: 'currentPower',
|
||||
key: 'currentPower',
|
||||
},
|
||||
{
|
||||
title: '状态',
|
||||
dataIndex: 'status',
|
||||
key: 'status',
|
||||
render: (status) => (
|
||||
<span style={{ color: statusMap[status].color }}>
|
||||
{statusMap[status].text}
|
||||
</span>
|
||||
),
|
||||
},
|
||||
{
|
||||
title: '设备数量',
|
||||
dataIndex: 'Devices',
|
||||
key: 'deviceCount',
|
||||
render: (devices) => devices ? devices.length : 0,
|
||||
},
|
||||
{
|
||||
title: '创建时间',
|
||||
dataIndex: 'createdAt',
|
||||
key: 'createdAt',
|
||||
render: (date) => date ? new Date(date).toLocaleString() : '',
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
key: 'action',
|
||||
render: (_, record) => (
|
||||
<Space size="middle">
|
||||
<Button type="primary" icon={<EditOutlined />} onClick={() => showModal(record)} size="small">
|
||||
编辑
|
||||
</Button>
|
||||
<Button danger icon={<DeleteOutlined />} onClick={() => handleDelete(record.rackId)} size="small">
|
||||
删除
|
||||
</Button>
|
||||
</Space>
|
||||
),
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<div>
|
||||
<Card title="机柜管理" extra={
|
||||
<Button type="primary" icon={<PlusOutlined />} onClick={() => showModal()}>
|
||||
添加机柜
|
||||
</Button>
|
||||
}>
|
||||
<Table
|
||||
columns={columns}
|
||||
dataSource={racks}
|
||||
rowKey="rackId"
|
||||
loading={loading}
|
||||
pagination={{ pageSize: 10 }}
|
||||
/>
|
||||
</Card>
|
||||
|
||||
<Modal
|
||||
title={editingRack ? '编辑机柜' : '添加机柜'}
|
||||
open={modalVisible}
|
||||
onCancel={handleCancel}
|
||||
footer={null}
|
||||
width={600}
|
||||
>
|
||||
<Form
|
||||
form={form}
|
||||
layout="vertical"
|
||||
onFinish={handleSubmit}
|
||||
>
|
||||
<Form.Item
|
||||
name="rackId"
|
||||
label="机柜ID"
|
||||
rules={[{ required: true, message: '请输入机柜ID' }]}
|
||||
>
|
||||
<Input placeholder="请输入机柜ID" />
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item
|
||||
name="name"
|
||||
label="机柜名称"
|
||||
rules={[{ required: true, message: '请输入机柜名称' }]}
|
||||
>
|
||||
<Input placeholder="请输入机柜名称" />
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item
|
||||
name="roomId"
|
||||
label="所属机房"
|
||||
rules={[{ required: true, message: '请选择机房' }]}
|
||||
>
|
||||
<Select placeholder="请选择机房">
|
||||
{rooms.map(room => (
|
||||
<Option key={room.roomId} value={room.roomId}>
|
||||
{room.name} ({room.roomId})
|
||||
</Option>
|
||||
))}
|
||||
</Select>
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item
|
||||
name="height"
|
||||
label="高度(U)"
|
||||
rules={[{ required: true, message: '请输入机柜高度' }]}
|
||||
>
|
||||
<InputNumber placeholder="请输入机柜高度" min={1} max={50} style={{ width: '100%' }} />
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item
|
||||
name="maxPower"
|
||||
label="最大功率(W)"
|
||||
rules={[{ required: true, message: '请输入最大功率' }]}
|
||||
>
|
||||
<InputNumber placeholder="请输入最大功率" min={0} style={{ width: '100%' }} />
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item
|
||||
name="status"
|
||||
label="状态"
|
||||
rules={[{ required: true, message: '请选择状态' }]}
|
||||
>
|
||||
<Select placeholder="请选择状态">
|
||||
<Option value="active">在用</Option>
|
||||
<Option value="maintenance">维护中</Option>
|
||||
<Option value="inactive">停用</Option>
|
||||
</Select>
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item style={{ textAlign: 'right' }}>
|
||||
<Space>
|
||||
<Button onClick={handleCancel}>取消</Button>
|
||||
<Button type="primary" htmlType="submit">
|
||||
确定
|
||||
</Button>
|
||||
</Space>
|
||||
</Form.Item>
|
||||
</Form>
|
||||
</Modal>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default RackManagement;
|
||||
@@ -0,0 +1,272 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { Table, Button, Modal, Form, Input, Select, message, Card, Space, InputNumber } from 'antd';
|
||||
import { PlusOutlined, EditOutlined, DeleteOutlined } from '@ant-design/icons';
|
||||
import axios from 'axios';
|
||||
|
||||
const { Option } = Select;
|
||||
|
||||
function RoomManagement() {
|
||||
const [rooms, setRooms] = useState([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [modalVisible, setModalVisible] = useState(false);
|
||||
const [editingRoom, setEditingRoom] = useState(null);
|
||||
const [form] = Form.useForm();
|
||||
|
||||
// 获取所有机房
|
||||
const fetchRooms = async () => {
|
||||
try {
|
||||
setLoading(true);
|
||||
const response = await axios.get('/api/rooms');
|
||||
setRooms(response.data);
|
||||
} catch (error) {
|
||||
message.error('获取机房列表失败');
|
||||
console.error('获取机房列表失败:', error);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
fetchRooms();
|
||||
}, []);
|
||||
|
||||
// 打开模态框
|
||||
const showModal = (room = null) => {
|
||||
setEditingRoom(room);
|
||||
if (room) {
|
||||
form.setFieldsValue(room);
|
||||
} else {
|
||||
form.resetFields();
|
||||
}
|
||||
setModalVisible(true);
|
||||
};
|
||||
|
||||
// 关闭模态框
|
||||
const handleCancel = () => {
|
||||
setModalVisible(false);
|
||||
setEditingRoom(null);
|
||||
};
|
||||
|
||||
// 提交表单
|
||||
const handleSubmit = async (values) => {
|
||||
try {
|
||||
if (editingRoom) {
|
||||
// 更新机房
|
||||
await axios.put(`/api/rooms/${editingRoom.roomId}`, values);
|
||||
message.success('机房更新成功');
|
||||
} else {
|
||||
// 创建机房
|
||||
await axios.post('/api/rooms', values);
|
||||
message.success('机房创建成功');
|
||||
}
|
||||
|
||||
setModalVisible(false);
|
||||
fetchRooms();
|
||||
setEditingRoom(null);
|
||||
} catch (error) {
|
||||
message.error(editingRoom ? '机房更新失败' : '机房创建失败');
|
||||
console.error(editingRoom ? '机房更新失败:' : '机房创建失败:', error);
|
||||
}
|
||||
};
|
||||
|
||||
// 删除机房
|
||||
const handleDelete = async (roomId) => {
|
||||
Modal.confirm({
|
||||
title: '确认删除',
|
||||
content: '确定要删除这个机房吗？',
|
||||
okText: '删除',
|
||||
okType: 'danger',
|
||||
cancelText: '取消',
|
||||
onOk: async () => {
|
||||
try {
|
||||
await axios.delete(`/api/rooms/${roomId}`);
|
||||
message.success('机房删除成功');
|
||||
fetchRooms();
|
||||
} catch (error) {
|
||||
message.error('机房删除失败');
|
||||
console.error('机房删除失败:', error);
|
||||
}
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
// 状态标签映射
|
||||
const statusMap = {
|
||||
active: { text: '在用', color: 'green' },
|
||||
maintenance: { text: '维护中', color: 'orange' },
|
||||
inactive: { text: '停用', color: 'gray' }
|
||||
};
|
||||
|
||||
// 表格列配置
|
||||
const columns = [
|
||||
{
|
||||
title: '机房ID',
|
||||
dataIndex: 'roomId',
|
||||
key: 'roomId',
|
||||
},
|
||||
{
|
||||
title: '机房名称',
|
||||
dataIndex: 'name',
|
||||
key: 'name',
|
||||
},
|
||||
{
|
||||
title: '位置',
|
||||
dataIndex: 'location',
|
||||
key: 'location',
|
||||
},
|
||||
{
|
||||
title: '面积(㎡)',
|
||||
dataIndex: 'area',
|
||||
key: 'area',
|
||||
},
|
||||
{
|
||||
title: '容量(机柜数)',
|
||||
dataIndex: 'capacity',
|
||||
key: 'capacity',
|
||||
},
|
||||
{
|
||||
title: '状态',
|
||||
dataIndex: 'status',
|
||||
key: 'status',
|
||||
render: (status) => (
|
||||
<span style={{ color: statusMap[status].color }}>
|
||||
{statusMap[status].text}
|
||||
</span>
|
||||
),
|
||||
},
|
||||
{
|
||||
title: '机柜数量',
|
||||
dataIndex: 'Racks',
|
||||
key: 'rackCount',
|
||||
render: (racks) => racks ? racks.length : 0,
|
||||
},
|
||||
{
|
||||
title: '描述',
|
||||
dataIndex: 'description',
|
||||
key: 'description',
|
||||
ellipsis: true,
|
||||
},
|
||||
{
|
||||
title: '创建时间',
|
||||
dataIndex: 'createdAt',
|
||||
key: 'createdAt',
|
||||
render: (date) => date ? new Date(date).toLocaleString() : '',
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
key: 'action',
|
||||
render: (_, record) => (
|
||||
<Space size="middle">
|
||||
<Button type="primary" icon={<EditOutlined />} onClick={() => showModal(record)} size="small">
|
||||
编辑
|
||||
</Button>
|
||||
<Button danger icon={<DeleteOutlined />} onClick={() => handleDelete(record.roomId)} size="small">
|
||||
删除
|
||||
</Button>
|
||||
</Space>
|
||||
),
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<div>
|
||||
<Card title="机房管理" extra={
|
||||
<Button type="primary" icon={<PlusOutlined />} onClick={() => showModal()}>
|
||||
添加机房
|
||||
</Button>
|
||||
}>
|
||||
<Table
|
||||
columns={columns}
|
||||
dataSource={rooms}
|
||||
rowKey="roomId"
|
||||
loading={loading}
|
||||
pagination={{ pageSize: 10 }}
|
||||
/>
|
||||
</Card>
|
||||
|
||||
<Modal
|
||||
title={editingRoom ? '编辑机房' : '添加机房'}
|
||||
open={modalVisible}
|
||||
onCancel={handleCancel}
|
||||
footer={null}
|
||||
width={600}
|
||||
>
|
||||
<Form
|
||||
form={form}
|
||||
layout="vertical"
|
||||
onFinish={handleSubmit}
|
||||
>
|
||||
<Form.Item
|
||||
name="roomId"
|
||||
label="机房ID"
|
||||
rules={[{ required: true, message: '请输入机房ID' }]}
|
||||
>
|
||||
<Input placeholder="请输入机房ID" />
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item
|
||||
name="name"
|
||||
label="机房名称"
|
||||
rules={[{ required: true, message: '请输入机房名称' }]}
|
||||
>
|
||||
<Input placeholder="请输入机房名称" />
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item
|
||||
name="location"
|
||||
label="位置"
|
||||
rules={[{ required: true, message: '请输入机房位置' }]}
|
||||
>
|
||||
<Input placeholder="请输入机房位置" />
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item
|
||||
name="area"
|
||||
label="面积(㎡)"
|
||||
rules={[{ required: true, message: '请输入机房面积' }]}
|
||||
>
|
||||
<InputNumber placeholder="请输入机房面积" min={0} step={0.1} style={{ width: '100%' }} />
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item
|
||||
name="capacity"
|
||||
label="容量(机柜数)"
|
||||
rules={[{ required: true, message: '请输入机柜容量' }]}
|
||||
>
|
||||
<InputNumber placeholder="请输入机柜容量" min={0} style={{ width: '100%' }} />
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item
|
||||
name="status"
|
||||
label="状态"
|
||||
rules={[{ required: true, message: '请选择状态' }]}
|
||||
>
|
||||
<Select placeholder="请选择状态">
|
||||
<Option value="active">在用</Option>
|
||||
<Option value="maintenance">维护中</Option>
|
||||
<Option value="inactive">停用</Option>
|
||||
</Select>
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item
|
||||
name="description"
|
||||
label="描述"
|
||||
>
|
||||
<Input.TextArea placeholder="请输入机房描述" rows={3} />
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item style={{ textAlign: 'right' }}>
|
||||
<Space>
|
||||
<Button onClick={handleCancel}>取消</Button>
|
||||
<Button type="primary" htmlType="submit">
|
||||
确定
|
||||
</Button>
|
||||
</Space>
|
||||
</Form.Item>
|
||||
</Form>
|
||||
</Modal>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default RoomManagement;
|
||||
@@ -0,0 +1,19 @@
|
||||
import { defineConfig } from 'vite';
|
||||
import react from '@vitejs/plugin-react';
|
||||
|
||||
export default defineConfig({
|
||||
plugins: [react()],
|
||||
server: {
|
||||
port: 3000,
|
||||
proxy: {
|
||||
'/api': {
|
||||
target: 'http://localhost:3001',
|
||||
changeOrigin: true
|
||||
}
|
||||
}
|
||||
},
|
||||
build: {
|
||||
outDir: 'dist',
|
||||
sourcemap: true
|
||||
}
|
||||
});
|
||||
@@ -0,0 +1,14 @@
|
||||
{
|
||||
"name": "idc-device-management",
|
||||
"version": "1.0.0",
|
||||
"description": "IDC设备管理系统",
|
||||
"scripts": {
|
||||
"start": "npm run start:backend & npm run start:frontend",
|
||||
"start:backend": "cd backend && npm run dev",
|
||||
"start:frontend": "cd frontend && npm run dev",
|
||||
"install:all": "npm install && cd backend && npm install && cd ../frontend && npm install"
|
||||
},
|
||||
"keywords": ["idc", "device", "management"],
|
||||
"author": "",
|
||||
"license": "MIT"
|
||||
}
|
||||
Reference in New Issue
Block a user