/* eslint-disable react/jsx-no-undef */ import React, { useEffect, useState } from 'react'; import { Card, Form, Input, Button, Select, message, Divider, Row, Col, Spin } from 'antd'; import { CloseCircleFilled } from '@ant-design/icons'; import styles from './IotConfig.less'; import Internet from '../../../../assets/images/icons/物联.svg'; import EMQ from '../../../../assets/images/icons/EMQ.svg'; import Yes from '../../../../assets/images/icons/正确.svg'; import { GetIOTPlatformVersion, GetTCPConfigInfo, PingIOTPlatform, SaveTcpAddress, } from '@/services/hostmanager/hostmanager'; const layout = { labelCol: { span: 4 }, wrapperCol: { span: 20 }, }; const tailLayout = { wrapperCol: { offset: 9, span: 15 }, }; const IotConfig = () => { const [loading, setLoading] = useState(false); // 加载 const [show1, setShow1] = useState('none'); const [show2, setShow2] = useState('none'); const [currentIotVersion, setCurrentIotVersion] = useState({ data: '' }); const [currentIotConfig, setCurrentIotConfig] = useState({ TcpAddress: '', SSLSafe: '', IotAddress: '', }); const [form] = Form.useForm(); const onFinish = values => { if (values.IotAddress != null && values.IotAddress.length > 0) { if (values.SSLSafe === '是') { values.SSLSafe = 1; } if (values.SSLSafe === '否') { values.SSLSafe = 0; } PingIot({ ip: values.IotAddress, values }); } else { if (values.SSLSafe === '是') { values.SSLSafe = 1; } if (values.SSLSafe === '否') { values.SSLSafe = 0; } SaveIotConfig({ tcpAddress: values.TcpAddress, iotAddress: values.IotAddress, sslSafe: values.SSLSafe, }); } }; const onFinishFailed = errorInfo => { console.log('Failed:', errorInfo); }; useEffect(() => { GetCurentIotVerison(); GetIotConfig(); }, []); 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); if (!obj.IotAddress || obj.IotAddress == null) { form.setFieldsValue({ IotAddress: '127.0.0.1' }); } if (!obj.TcpAddress || obj.TcpAddress == null) { form.setFieldsValue({ TcpAddress: '127.0.0.1:8083' }); } if (!obj.SSLSafe || obj.SSLSafe == null) { form.setFieldsValue({ SSLSafe: '否' }); } setCurrentIotConfig(val => ({ ...val, ...obj })); } }); }; const PingIot = ({ ip, values }) => { SaveIotConfig({ tcpAddress: values.TcpAddress, iotAddress: values.IotAddress, sslSafe: values.SSLSafe, }); }; const PingIot1 = () => { setLoading(true); let aa = form.getFieldsValue().IotAddress; console.log(aa); PingIOTPlatform({ ip: aa, }).then(res => { setLoading(false); if (res.code === 0) { setShow1('block'); setShow2('none'); message.success('连接成功!'); } else { setShow1('none'); setShow2('block'); message.error(res.msg); } }); }; const SaveIotConfig = config => { setLoading(true); SaveTcpAddress(config).then(res => { setLoading(false); if (res.code === 0) { message.info('配置保存成功'); } else { message.error(res.msg); } }); }; return ( <div className={styles.iot_container}> <Card // title={`物联平台${currentIotVersion.data ? `[${currentIotVersion.data}]` : ''}`} style={{ width: '100%', height: 'calc(100vh - 130px)' }} > <Spin spinning={loading} tip="loading"> <Form form={form} name="basic" initialValues={{ remember: true }} onFinish={onFinish} onFinishFailed={onFinishFailed} > <div style={{ marginTop: '10px', display: 'flex', alignItems: 'center', }} > <img src={Internet} style={{ height: '16px' }} alt="" /> <span style={{ marginLeft: '10px', fontWeight: 'bold' }}>物联平台</span> </div> <Divider /> <Form.Item style={{ marginLeft: '20px', marginBottom: '0px' }} // label="服务地址(平台)" // name="IotAddress" // 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', // }, // ]} > <div style={{ display: 'flex', justifyContent: 'flex-start' }}> <Form.Item label="服务地址(平台)" name="IotAddress" 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', }, ]} > <Input style={{ width: '300px', marginLeft: '15px' }} placeholder="请输入服务地址" /> </Form.Item> <span style={{ display: show1 }}> <img src={Yes} style={{ height: '24px', marginTop: '10px', marginLeft: '26px', }} alt="" /> </span> <span style={{ display: show2 }}> <CloseCircleFilled style={{ fontSize: '24px', marginTop: '10px', marginLeft: '26px', }} /> </span> </div> </Form.Item> <Button type="primary" onClick={() => PingIot1()} style={{ marginLeft: '152px' }}> 连接 </Button> <div style={{ marginTop: '40px', display: 'flex', alignItems: 'center', }} > <img src={EMQ} style={{ height: '16px' }} alt="" /> <span style={{ marginLeft: '10px', fontWeight: 'bold' }}>EMQ</span> </div> <Divider /> <Form.Item style={{ marginLeft: '20px' }} label="服务地址(EMQ)" name="TcpAddress" rules={[ { required: true, pattern: new RegExp(/^.*:.*$/), message: '请输入正确的IP:端口', }, ]} > <Input style={{ width: '300px', marginLeft: '13px' }} /> </Form.Item> <Form.Item style={{ marginLeft: '20px' }} name="SSLSafe" label="SSL(EMQ)" rules={[{ required: true, message: '请选择是否!' }]} > <Select placeholder="请选择是否!" style={{ width: '300px', marginLeft: '48px' }}> <Option value="1">是</Option> <Option value="0">否</Option> </Select> </Form.Item> <Form.Item> <Button type="primary" htmlType="submit" style={{ marginLeft: '152px' }}> 保存 </Button> </Form.Item> </Form> </Spin> </Card> </div> ); }; export default IotConfig;