完成了机柜可视化功能，鼠标悬停显示设备信息

backend/package-lock.json

@@ -15,7 +15,8 @@
         "express-fileupload": "^1.5.2",
         "iconv-lite": "^0.6.3",
         "sequelize": "^6.32.1",
-        "sqlite3": "^5.1.6"
+        "sqlite3": "^5.1.6",
+        "three": "^0.182.0"
       },
       "devDependencies": {
         "nodemon": "^3.0.1"
@@ -2730,6 +2731,12 @@
         "node": ">=8"
       }
     },
+    "node_modules/three": {
+      "version": "0.182.0",
+      "resolved": "https://registry.npmjs.org/three/-/three-0.182.0.tgz",
+      "integrity": "sha512-GbHabT+Irv+ihI1/f5kIIsZ+Ef9Sl5A1Y7imvS5RQjWgtTPfPnZ43JmlYI7NtCRDK9zir20lQpfg8/9Yd02OvQ==",
+      "license": "MIT"
+    },
     "node_modules/to-regex-range": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",

backend/package.json

@@ -14,7 +14,8 @@
     "express-fileupload": "^1.5.2",
     "iconv-lite": "^0.6.3",
     "sequelize": "^6.32.1",
-    "sqlite3": "^5.1.6"
+    "sqlite3": "^5.1.6",
+    "three": "^0.182.0"
   },
   "devDependencies": {
     "nodemon": "^3.0.1"

backend/routes/devices.js

@@ -14,7 +14,7 @@ const DeviceField = require('../models/DeviceField');
 // 获取所有设备（支持搜索和筛选）
 router.get('/', async (req, res) => {
   try {
-    const { keyword, status, type, page = 1, pageSize = 10 } = req.query;
+    const { keyword, status, type, rackId, page = 1, pageSize = 10 } = req.query;
     const offset = (page - 1) * pageSize;
     
     // 构建查询条件
@@ -44,6 +44,11 @@ router.get('/', async (req, res) => {
       where.type = type;
     }
     
+    // 机柜筛选（用于机柜可视化功能）
+    if (rackId) {
+      where.rackId = rackId;
+    }
+    
     // 执行查询
     const { count, rows } = await Device.findAndCountAll({
       where,

backend/server.js

@@ -5,7 +5,7 @@ const { sequelize } = require('./db');
 
 // 创建Express应用
 const app = express();
-const PORT = process.env.PORT || 3001;
+const PORT = process.env.PORT || 8000;
 
 // 中间件
 app.use(cors());

frontend/package-lock.json

@@ -13,7 +13,8 @@
         "axios": "^1.5.0",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
-        "react-router-dom": "^6.15.0"
+        "react-router-dom": "^6.15.0",
+        "three": "^0.160.0"
       },
       "devDependencies": {
         "@vitejs/plugin-react": "^4.0.3",
@@ -2575,6 +2576,12 @@
       "integrity": "sha512-yQ3rwFWRfwNUY7H5vpU0wfdkNSnvnJinhF9830Swlaxl03zsOjCfmX0ugac+3LtK0lYSgwL/KXc8oYL3mG4YFQ==",
       "license": "MIT"
     },
+    "node_modules/three": {
+      "version": "0.160.1",
+      "resolved": "https://registry.npmjs.org/three/-/three-0.160.1.tgz",
+      "integrity": "sha512-Bgl2wPJypDOZ1stAxwfWAcJ0WQf7QzlptsxkjYiURPz+n5k4RBDLsq+6f9Y75TYxn6aHLcWz+JNmwTOXWrQTBQ==",
+      "license": "MIT"
+    },
     "node_modules/throttle-debounce": {
       "version": "5.0.2",
       "resolved": "https://registry.npmjs.org/throttle-debounce/-/throttle-debounce-5.0.2.tgz",

frontend/package.json

@@ -14,7 +14,8 @@
     "axios": "^1.5.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-router-dom": "^6.15.0"
+    "react-router-dom": "^6.15.0",
+    "three": "^0.160.0"
   },
   "devDependencies": {
     "@vitejs/plugin-react": "^4.0.3",

frontend/src/App.jsx

@@ -1,12 +1,13 @@
 import React, { useState } from 'react';
 import { Layout, Menu, theme, Button } from 'antd';
 import { BrowserRouter as Router, Routes, Route, Link } from 'react-router-dom';
-import { BarChartOutlined, DatabaseOutlined, CloudServerOutlined, MenuUnfoldOutlined, MenuFoldOutlined } from '@ant-design/icons';
+import { BarChartOutlined, DatabaseOutlined, CloudServerOutlined, MenuUnfoldOutlined, MenuFoldOutlined, EyeOutlined } 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';
+import RackVisualization from './pages/RackVisualization';
 
 
 const { Content, Sider } = Layout;
@@ -87,6 +88,11 @@ function App() {
                   icon: <BarChartOutlined />,
                   label: <Link to="/fields">字段管理</Link>,
                 },
+                {
+                  key: '6',
+                  icon: <EyeOutlined />,
+                  label: <Link to="/visualization">机柜可视化</Link>,
+                },
               ]}
             />
           </Sider>
@@ -106,6 +112,7 @@ function App() {
               <Route path="/racks" element={<RackManagement />} />
               <Route path="/rooms" element={<RoomManagement />} />
               <Route path="/fields" element={<DeviceFieldManagement />} />
+              <Route path="/visualization" element={<RackVisualization />} />
             </Routes>
           </Content>
         </Layout>

frontend/vite.config.js

@@ -7,7 +7,7 @@ export default defineConfig({
     port: 3000,
     proxy: {
       '/api': {
-        target: 'http://localhost:3001',
+        target: 'http://localhost:8000',
         changeOrigin: true
       }
     }