IotConfig.jsx 4.84 KB
Newer Older
mayongxin's avatar
mayongxin committed
1
import React, { useEffect, useState } from 'react'
2
import { Card, Form, Input, Button, Select, message } from 'antd'
mayongxin's avatar
mayongxin committed
3
import styles from './IotConfig.less'
4
import { GetIOTPlatformVersion, GetTCPConfigInfo, PingIOTPlatform, SaveTcpAddress } from '@/services/platform/hostmanager'
mayongxin's avatar
mayongxin committed
5 6 7
const layout = {
    labelCol: { span: 8 },
    wrapperCol: { span: 16 },
8

mayongxin's avatar
mayongxin committed
9 10 11
};
const tailLayout = {
    wrapperCol: { offset: 8, span: 16 },
12

mayongxin's avatar
mayongxin committed
13 14 15 16
};

const IotConfig = () => {

17 18 19 20 21 22 23 24 25

    const [currentIotVersion, setCurrentIotVersion] = useState({ data: "" });
    const [currentIotConfig, setCurrentIotConfig] = useState({
        TcpAddress: "",
        SSLSafe: "",
        IotAddress: ""
    });

    const [form] = Form.useForm();
mayongxin's avatar
mayongxin committed
26
    const onFinish = (values) => {
27 28 29
        if (values.IotAddress != null && values.IotAddress.length > 0) {
            PingIot({ ip: values.IotAddress, values: values })
        } else {
30
            SaveIotConfig({
31 32 33
                tcpAddress: values.TcpAddress,
                iotAddress: values.IotAddress,
                sslSafe: values.SSLSafe
34 35
            })
        }
mayongxin's avatar
mayongxin committed
36 37 38 39 40 41
    };

    const onFinishFailed = (errorInfo) => {
        console.log('Failed:', errorInfo);
    };

42 43 44
    useEffect(() => {
        GetCurentIotVerison()
        GetIotConfig()
45

46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72
    }, [])

    const GetCurentIotVerison = () => {
        GetIOTPlatformVersion().then(
            res => {
                if (res.data) {
                    setCurrentIotVersion(res)
                }
            }
        )
    }
    const GetIotConfig = () => {
        GetTCPConfigInfo().then(
            res => {
                if (res.data) {
                    let obj = {};
                    Object.keys(currentIotConfig).forEach(k => {
                        obj[k] = res.data[k];
                    });
                    console.log(obj)
                    form.setFieldsValue(obj);
                    setCurrentIotConfig(val => ({ ...val, ...obj }));

                }
            }
        )
    }
mayongxin's avatar
mayongxin committed
73
    const PingIot = ({ip, values}) => {
74
        PingIOTPlatform({
75
            ip: ip
76
        }).then(
77 78
            res => {
                if (res.code === 0) {
79
                    SaveIotConfig({
80 81 82
                        tcpAddress: values.TcpAddress,
                        iotAddress: values.IotAddress,
                        sslSafe: values.SSLSafe
83
                    })
84
                } else {
85 86 87 88 89
                    message.info("物联平台服务器连接异常!");
                }
            }
        )
    }
90
    const SaveIotConfig = (config) => {
91
        SaveTcpAddress(config).then(
92 93
            res => {
                if (res.code === 0) {
94 95 96 97 98 99 100
                    message.info('配置保存成功');
                }
            }
        )
    }


mayongxin's avatar
mayongxin committed
101 102
    return (
        <div className={styles.iot_container}>
mayongxin's avatar
mayongxin committed
103
            <Card title={`物联平台${currentIotVersion.data?`[${currentIotVersion.data}]`:""}`} style={{ width: "100%" }}>
mayongxin's avatar
mayongxin committed
104 105 106

                <Form
                    {...layout}
107
                    form={form}
mayongxin's avatar
mayongxin committed
108 109 110 111 112
                    name="basic"
                    initialValues={{ remember: true }}
                    onFinish={onFinish}
                    onFinishFailed={onFinishFailed}
                >
mayongxin's avatar
mayongxin committed
113
                    <div className={styles.section}>物联平台</div>
mayongxin's avatar
mayongxin committed
114
                    <Form.Item
115 116
                        label="服务器地址(平台)"
                        name="IotAddress"
117
                        rules={[{ required: true, pattern: new RegExp(/^(([1-9]?\d|1\d{2}|2[0-4]\d|25[0-5])\.){3}([1-9]?\d|1\d{2}|2[0-4]\d|25[0-5])$/, "g"),message: '请输入正确的IP例如:192.168.12.231' }]}
118

mayongxin's avatar
mayongxin committed
119 120 121
                    >
                        <Input />
                    </Form.Item>
mayongxin's avatar
mayongxin committed
122
                    <div className={styles.section}>EMQ</div>
mayongxin's avatar
mayongxin committed
123
                    <Form.Item
124 125
                        label="服务器地址(EMQ)"
                        name="TcpAddress"
126
                        rules={[{ required: true, message: '请输入域名(IP):端口,例如:192.168.19.102:8131' }]}
127 128


mayongxin's avatar
mayongxin committed
129 130 131
                    >
                        <Input />
                    </Form.Item>
132 133 134 135 136 137 138 139 140 141 142
                    <Form.Item
                        name="SSLSafe"
                        label="SSL(EMQ)"
                        rules={[{ required: true, message: '请选择是否!' }]}

                    >
                        <Select placeholder="请选择是否!">
                            <Option value="0"></Option>
                            <Option value="1"></Option>
                        </Select>
                    </Form.Item>
mayongxin's avatar
mayongxin committed
143
                    <Form.Item {...tailLayout}>
144
                        <Button type="primary" htmlType="submit" disabled={currentIotConfig.TcpAddress.length > 0 ? 0 : 1}>
mayongxin's avatar
mayongxin committed
145 146 147 148 149 150 151 152
                            保存连接
                        </Button>
                    </Form.Item>
                </Form>
            </Card>
        </div>
    )
}
153
export default IotConfig