楼宇空调控制系统的代码

好的，按照上述思路，我们可以逐步写出源代码。以下是一个简化版的实现框架，包含基本的功能模块：温湿度数据显示、BIM模型加载、空调控制接口以及响应式设计。这个例子使用了 Node.js 和 React，并用 Three.js 进行BIM模型的加载。

1. 后端：Node.js (Express) API 服务

首先，我们需要设置一个简单的 Node.js 后端服务，用来提供温湿度数据、空调控制和处理BIM模型数据。

a. 安装 Node.js 依赖

mkdir air-conditioning-system
cd air-conditioning-system
npm init -y
npm install express socket.io cors

b. 创建 server.js

// server.js
const express = require("express");
const cors = require("cors");
const socketIo = require("socket.io");

const app = express();
const port = 3000;

// 使用CORS来支持跨域请求
app.use(cors());

// 温湿度模拟数据
const floors = [
  { floor: 1, temperature: 22, humidity: 50 },
  { floor: 2, temperature: 21, humidity: 48 },
  // ...
  { floor: 17, temperature: 23, humidity: 55 },
];

// API：获取温湿度数据
app.get("/api/floors", (req, res) => {
  res.json(floors);
});

// API：控制空调（模拟）
app.post("/api/control-ac", express.json(), (req, res) => {
  const { floor, action } = req.body;
  console.log(`Floor ${floor}: AC ${action}`);
  res.send({ success: true, message: `AC on floor ${floor} turned ${action}` });
});

// 启动 WebSocket
const server = app.listen(port, () => {
  console.log(`Server is running on http://localhost:${port}`);
});

const io = socketIo(server);

io.on("connection", (socket) => {
  console.log("New client connected");

  // 模拟温湿度数据更新
  setInterval(() => {
    const updatedFloors = floors.map((floor) => ({
      ...floor,
      temperature: floor.temperature + Math.random() * 2 - 1, // slight change
      humidity: floor.humidity + Math.random() * 2 - 1, // slight change
    }));
    io.emit("floorsUpdate", updatedFloors);
  }, 5000);
});

c. 启动服务器

在命令行中启动服务器：

node server.js

---

2. 前端：React 应用

接下来，我们实现前端，使用 React 和 Three.js 来展示温湿度信息和BIM模型。

a. 创建 React 项目

npx create-react-app air-conditioning-frontend
cd air-conditioning-frontend
npm install three socket.io-client

b. 创建 App.js

// src/App.js
import React, { useState, useEffect } from 'react';
import './App.css';
import io from 'socket.io-client';
import * as THREE from 'three';

// 连接到后端的 WebSocket 服务
const socket = io("http://localhost:3000");

function App() {
  const [floors, setFloors] = useState([]);
  const [acStatus, setAcStatus] = useState({});

  // 获取楼层的温湿度数据
  useEffect(() => {
    fetch('http://localhost:3000/api/floors')
      .then(response => response.json())
      .then(data => setFloors(data));
    
    // 实时更新温湿度数据
    socket.on('floorsUpdate', (updatedFloors) => {
      setFloors(updatedFloors);
    });

    return () => {
      socket.off('floorsUpdate');
    };
  }, []);

  // 控制空调
  const controlAC = (floor, action) => {
    fetch('http://localhost:3000/api/control-ac', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ floor, action })
    })
    .then(response => response.json())
    .then(data => {
      setAcStatus(prevState => ({ ...prevState, [floor]: action }));
    });
  };

  // 初始化BIM模型（简单示例）
  useEffect(() => {
    const scene = new THREE.Scene();
    const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
    const renderer = new THREE.WebGLRenderer();
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.getElementById('bim-container').appendChild(renderer.domElement);

    const geometry = new THREE.BoxGeometry();
    const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
    const cube = new THREE.Mesh(geometry, material);
    scene.add(cube);

    camera.position.z = 5;

    const animate = function () {
      requestAnimationFrame(animate);
      cube.rotation.x += 0.01;
      cube.rotation.y += 0.01;
      renderer.render(scene, camera);
    };
    animate();
  }, []);

  return (
    <div className="App">
      <h1>空调控制系统</h1>

      <div className="bim-viewer" id="bim-container"></div>

      <div className="floor-info">
        <h2>楼层温湿度</h2>
        <ul>
          {floors.map(floor => (
            <li key={floor.floor}>
              <h3>楼层 {floor.floor}</h3>
              <p>温度: {floor.temperature.toFixed(2)} °C</p>
              <p>湿度: {floor.humidity.toFixed(2)} %</p>
              <button onClick={() => controlAC(floor.floor, 'on')}>开启空调</button>
              <button onClick={() => controlAC(floor.floor, 'off')}>关闭空调</button>
              <p>空调状态: {acStatus[floor.floor] || '未知'}</p>
            </li>
          ))}
        </ul>
      </div>
    </div>
  );
}

export default App;

c. 设置响应式布局 (CSS)

在 src/App.css 中添加基本的样式：

.App {
  text-align: center;
}

.bim-viewer {
  width: 100%;
  height: 400px;
}

.floor-info {
  margin-top: 20px;
  text-align: left;
  padding: 10px;
}

.floor-info ul {
  list-style: none;
}

.floor-info li {
  border: 1px solid #ccc;
  padding: 10px;
  margin-bottom: 10px;
}

button {
  margin: 5px;
  padding: 10px;
}

---

3. 启动前端应用

在前端项目目录下，启动 React 应用：

npm start

---

4. 功能说明

1. 温湿度显示： 应用会定时更新楼层的温湿度数据，并通过 WebSocket 实时更新。
2. 空调控制： 每个楼层都有“开启空调”和“关闭空调”按钮，点击后会调用后端接口模拟控制空调状态。
3. BIM模型展示： 使用 Three.js 渲染一个简单的3D立方体，作为BIM模型的占位符，你可以根据需要扩展成真实的BIM模型展示。

---

5. 扩展和优化

1. BIM模型导入： 目前代码使用了一个简单的3D模型，实际应用中，你可以使用如 Autodesk Forge 或 Xbim 来处理和展示IFC格式的BIM模型。
2. 数据库存储： 实际项目中，你需要将温湿度数据和空调状态存储在数据库中，常见的选择是 MySQL 或 MongoDB。
3. 权限管理： 添加用户权限系统，例如管理员可以控制空调，普通用户只能查看温湿度数据。
4. 移动端适配： 使用 react-responsive 或 CSS 媒体查询来优化移动端访问体验。

通过这个基本框架，你可以进一步扩展系统的功能，逐步实现一个完整的楼宇空调控制系统。