control-projects/src/control.js

import React, {PureComponent} from 'react';
import ReactDOM from 'react-dom/client';
import './control.css';
import axios from "axios";


export default class Control extends PureComponent {

    state = {
        temperature:0,
        pattern:1,
        windSpeed : 6,
        selectType : false,
        openVisible : false,
        // 运行状态数据
        data:null,
    }

    componentWillMount() {
        this.getData();
        this.interval = setInterval(() => this.getData(), 300000);
    }

    //组件销毁的时候清除定时器就行
    componentWillUnmount() {
        clearInterval(this.interval);
    }

    // 获取数据
    getData = () =>{
        axios.get("/api/v1/status").then(res => {
            const datas = res?.data;
            if(datas && datas.code === 0){
                this.setState({
                    data : datas?.data || null ,
                    temperature : datas?.data?.set_temp,
                    openVisible : datas?.data?.power === 1,
                    pattern:datas?.data?.mode,
                    windSpeed: datas?.data?.fan_speed,
                })
            }
        }).catch(err => {
            this.toast(err.message,2000);
        })
    }

    // 提示框
    toast = (text, time) => {
        let toast = document.getElementById('toast');
        let toast_box = document.getElementsByClassName('toast_box')[0];
        toast.innerHTML = text;
        toast_box.style.animation = 'show 1.5s'
        toast_box.style.display = 'inline-block';
        setTimeout(function(){
            toast_box.style.animation = 'hide 1.5s'
            setTimeout(function(){
                toast_box.style.display = 'none';
            }, 1400)
        }, time)
    }

    // 增加温度
    add = () =>{
        const { temperature } = this.state;
        if(temperature < 30){
            axios.post("/api/v1/set_temp",{temp : temperature + 1}).then(res => {
                const data = res?.data;
                if(data && data.code === 0){
                    this.setState({temperature : temperature + 1});
                }else {
                    this.toast(data.message,2000);
                }
            }).catch(err => {
                this.toast(err.message,2000);
            })
        }else {
            this.toast('最高温度30度',2000);
        }
    }

    // 温度减
    down = () =>{
        const { temperature } = this.state;
        if(temperature > 16){
            axios.post("/api/v1/set_temp",{temp : temperature - 1}).then(res => {
                const data = res?.data;
                if(data && data.code === 0){
                    this.setState({ temperature : temperature - 1})
                }else {
                    this.toast(data.message,2000);
                }
            }).catch(err => {
                this.toast(err.message,2000);
            })
        }else {
            this.toast('最低温度16度',2000);
        }
    }

    // 选择模式
    patternSelect = item =>{
        axios.post("/api/v1/mode",{mode : item}).then(res => {
            const data = res?.data;
            if(data && data.code === 0){
                this.setState({ pattern : item});
            }
        }).catch(err => {
            this.toast(err.message,2000);
        })
    }

    // 选择风速
    speedSelect = item =>{
        axios.post("/api/v1/fan_speed",{speed : item}).then(res => {
            const data = res?.data;
            if(data && data.code === 0){
                this.setState({ windSpeed : item});
            }
        }).catch(err => {
            this.toast(err.message,2000);
        })
    }

    // 睡眠模式
    sleepSelect = () =>{
        const { selectType } = this.state;
        if(selectType){
            this.setState({ selectType : false});
        }else {
            this.setState({ selectType : true});
        }
    }

    // 开关
    onOpen = () =>{
        const { openVisible } = this.state;
        if(openVisible){
            axios.post("/api/v1/power",{power : 2}).then(res => {
                const data = res?.data;
                if(data && data.code === 0){
                    this.setState({ openVisible : false });
                }
            }).catch(err => {
                this.toast(err.message,2000);
            })
        }else {
            axios.post("/api/v1/power",{power : 1}).then(res => {
                const data = res?.data;
                if(data && data.code === 0){
                    this.setState({ openVisible : true });
                }
            }).catch(err => {
                this.toast(err.message,2000);
            })
        }
    }

    render() {

        const { pattern , windSpeed , openVisible , data } = this.state;
        return (
            <div className="control">
                <div className='control_item'>
                    <div className='temperature'>
                        <p>当前温度: {data?.ambient_temp}℃</p>
                        <p>室外环境温度: {data?.outdoor_ambient_temp}℃</p>
                        <p>回风口温度: {data?.air_return_ambient_temp}℃</p>
                        <p>灯板温度: {data?.light_board_ambient_temp}℃</p>
                    </div>
                    <div className='expected_temperature'>
                        <div style={{ fontSize: '20px' }}>预计温度</div>
                        <div style={{ fontSize: '50px', marginTop: '60px' }}>{this.state.temperature}℃</div>
                    </div>
                    <div>
                        <div className='up' onClick={this.add}>
                            <div className='arrow-up' />
                        </div>
                        <div className='down' onClick={this.down}>
                            <div className='arrow-down' />
                        </div>
                    </div>
                </div>
                <div>
                    <p style={{ fontWeight: 'bold' }}>模式</p>
                    <div className='pattern'>
                        <div className={['pattern_item', pattern === 1 ? 'pattern_selected' : null].join(' ')} onClick={()=>{this.patternSelect(1)}}>制冷</div>
                        <div className={['pattern_item', pattern === 2 ? 'pattern_selected' : null].join(' ')} onClick={()=>{this.patternSelect(2)}}>制热</div>
                        <div className={['pattern_item', pattern === 3 ? 'pattern_selected' : null].join(' ')} onClick={()=>{this.patternSelect(3)}}>除湿</div>
                        <div className={['pattern_item', pattern === 4 ? 'pattern_selected' : null].join(' ')} onClick={()=>{this.patternSelect(4)}}>送风</div>
                        <div className={['pattern_item', pattern === 5 ? 'pattern_selected' : null].join(' ')} onClick={()=>{this.patternSelect(5)}}>自动</div>
                    </div>
                </div>
                <div>
                    <p style={{ fontWeight: 'bold' }}>风速</p>
                    <div className='pattern'>
                        <div className={['pattern_item', windSpeed === 6 ? 'speed_selected' : null].join(' ')} onClick={()=>{this.speedSelect(6)}}>自动</div>
                        <div className={['pattern_item', windSpeed === 1 ? 'speed_selected' : null].join(' ')} onClick={()=>{this.speedSelect(1)}}>一档</div>
                        <div className={['pattern_item', windSpeed === 2 ? 'speed_selected' : null].join(' ')} onClick={()=>{this.speedSelect(2)}}>二档</div>
                        <div className={['pattern_item', windSpeed === 3 ? 'speed_selected' : null].join(' ')} onClick={()=>{this.speedSelect(3)}}>三档</div>
                        <div className={['pattern_item', windSpeed === 4 ? 'speed_selected' : null].join(' ')} onClick={()=>{this.speedSelect(4)}}>四档</div>
                        <div className={['pattern_item', windSpeed === 5 ? 'speed_selected' : null].join(' ')} onClick={()=>{this.speedSelect(5)}}>五档</div>
                    </div>
                </div>
                <div className='switch_item'>
                    {/*<div className={['sleep_mode', selectType ? 'sleep_select' : null].join(' ')} onClick={this.sleepSelect}>睡眠模式</div>*/}
                    {
                        openVisible ?
                            <img src='./switch_open.png' className='switch' alt="开关" onClick={this.onOpen} />
                            :
                            <img src='./switch_close.png' className='switch' alt="开关" onClick={this.onOpen} />
                    }
                </div>
                {/* 提示框 */}
                <div className="toast_box">
                    <p id="toast"></p>
                </div>
            </div>
        );
    }
}

ReactDOM.createRoot(document.getElementById("root")).render(<Control />);