A Next.js component that calculates the amount of water needed to adjust room humidity

HumidityCalculator.tsx

import React, { useState } from 'react';
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Input } from "@/components/ui/input"
import { Button } from "@/components/ui/button"
import { Label } from "@/components/ui/label"

const HumidityCalculator = () => {
  const [temperature, setTemperature] = useState('');
  const [currentHumidity, setCurrentHumidity] = useState('');
  const [targetHumidity, setTargetHumidity] = useState('');
  const [roomArea, setRoomArea] = useState('');
  const [roomHeight, setRoomHeight] = useState('');
  const [result, setResult] = useState('');

  const calculateHumidity = () => {
    // 将输入转换为数字
    const temp = parseFloat(temperature);
    const curHum = parseFloat(currentHumidity);
    const targHum = parseFloat(targetHumidity);
    const area = parseFloat(roomArea);
    const height = parseFloat(roomHeight);

    // 计算饱和水蒸气压 (使用近似公式)
    const saturatedVaporPressure = 6.112 * Math.exp((17.67 * temp) / (temp + 243.5));

    // 计算当前和目标绝对湿度
    const currentAbsoluteHumidity = (curHum / 100) * saturatedVaporPressure * 2.1674 / (273.15 + temp);
    const targetAbsoluteHumidity = (targHum / 100) * saturatedVaporPressure * 2.1674 / (273.15 + temp);

    // 计算水量差异
    const volumeDifference = (targetAbsoluteHumidity - currentAbsoluteHumidity) * area * height;
    const waterDifference = volumeDifference * 1000; // 转换为毫升

    if (waterDifference > 0) {
      setResult(`需要蒸发 ${waterDifference.toFixed(2)} 毫升水`);
    } else {
      setResult(`需要凝结 ${Math.abs(waterDifference).toFixed(2)} 毫升水`);
    }
  };

  return (
    <Card className="w-[350px]">
      <CardHeader>
        <CardTitle>空气湿度计算器</CardTitle>
      </CardHeader>
      <CardContent>
        <div className="grid w-full items-center gap-4">
          <div className="flex flex-col space-y-1.5">
            <Label htmlFor="temperature">温度 (°C)</Label>
            <Input id="temperature" value={temperature} onChange={(e) => setTemperature(e.target.value)} />
          </div>
          <div className="flex flex-col space-y-1.5">
            <Label htmlFor="currentHumidity">当前相对湿度 (%)</Label>
            <Input id="currentHumidity" value={currentHumidity} onChange={(e) => setCurrentHumidity(e.target.value)} />
          </div>
          <div className="flex flex-col space-y-1.5">
            <Label htmlFor="targetHumidity">目标相对湿度 (%)</Label>
            <Input id="targetHumidity" value={targetHumidity} onChange={(e) => setTargetHumidity(e.target.value)} />
          </div>
          <div className="flex flex-col space-y-1.5">
            <Label htmlFor="roomArea">房间面积 (m²)</Label>
            <Input id="roomArea" value={roomArea} onChange={(e) => setRoomArea(e.target.value)} />
          </div>
          <div className="flex flex-col space-y-1.5">
            <Label htmlFor="roomHeight">房间层高 (m)</Label>
            <Input id="roomHeight" value={roomHeight} onChange={(e) => setRoomHeight(e.target.value)} />
          </div>
          <Button onClick={calculateHumidity}>计算</Button>
          {result && <div className="text-center font-semibold">{result}</div>}
        </div>
      </CardContent>
    </Card>
  );
};

export default HumidityCalculator;