Skip to content

C
CivManage
Commit 7cc450e3 authored by 皮倩雯's avatar 皮倩雯
Browse files
Options

修改宿主管理

parent 3e32beaa
Pipeline #39394 skipped with stages
        Hide whitespace changes
        Inline Side-by-side
        Showing with 271 additions and 203 deletions
        src/pages/platformCenter/hostmanager/IotConfig/IotConfig.jsx
        View file @ 7cc450e3
        import React, { useEffect, useState } from 'react' import React, { useEffect, useState } from 'react';
        import { Card, Form, Input, Button, Select, message, Divider, Row, Col, Spin } from 'antd' import {
        import styles from './IotConfig.less' Card,
        Form,
        Input,
        Button,
        Select,
        message,
        Divider,
        Row,
        Col,
        Spin,
        } from 'antd';
        import styles from './IotConfig.less';
        import Internet from '../../../../assets/images/icons/物联.svg'; import Internet from '../../../../assets/images/icons/物联.svg';
        import EMQ from '../../../../assets/images/icons/EMQ.svg'; import EMQ from '../../../../assets/images/icons/EMQ.svg';
        import Yes from '../../../../assets/images/icons/正确.svg'; import Yes from '../../../../assets/images/icons/正确.svg';
        import { GetIOTPlatformVersion, GetTCPConfigInfo, PingIOTPlatform, SaveTcpAddress } from '@/services/platform/hostmanager' import {
        GetIOTPlatformVersion,
        GetTCPConfigInfo,
        PingIOTPlatform,
        SaveTcpAddress,
        } from '@/services/platform/hostmanager';
        import { CloseCircleFilled } from '@ant-design/icons'; import { CloseCircleFilled } from '@ant-design/icons';
        const layout = { const layout = {
        labelCol: { span: 4 }, labelCol: { span: 4 },
        wrapperCol: { span: 20 }, wrapperCol: { span: 20 },
        }; };
        const tailLayout = { const tailLayout = {
        wrapperCol: { offset: 9, span: 15 }, wrapperCol: { offset: 9, span: 15 },
        }; };
        const IotConfig = () => { const IotConfig = () => {
        const [loading, setLoading] = useState(false); // 加载 const [loading, setLoading] = useState(false); // 加载
        const [show1, setShow1] = useState('none') const [show1, setShow1] = useState('none');
        const [show2, setShow2] = useState('none') const [show2, setShow2] = useState('none');
        const [currentIotVersion, setCurrentIotVersion] = useState({ data: "" }); const [currentIotVersion, setCurrentIotVersion] = useState({ data: '' });
        const [currentIotConfig, setCurrentIotConfig] = useState({ const [currentIotConfig, setCurrentIotConfig] = useState({
        TcpAddress: "", TcpAddress: '',
        SSLSafe: "", SSLSafe: '',
        IotAddress: "" IotAddress: '',
        }); });
        const [form] = Form.useForm(); const [form] = Form.useForm();
        const onFinish = (values) => { const onFinish = values => {
        if (values.IotAddress != null && values.IotAddress.length > 0) { if (values.IotAddress != null && values.IotAddress.length > 0) {
        if(values.SSLSafe=='是'){ if (values.SSLSafe == '是') {
        values.SSLSafe=1 values.SSLSafe = 0;
        } }
        if(values.SSLSafe=='否'){ if (values.SSLSafe == '否') {
        values.SSLSafe=0 values.SSLSafe = 1;
        } }
        PingIot({ ip: values.IotAddress, values: values }) PingIot({ ip: values.IotAddress, values: values });
        } else { } else {
        if(values.SSLSafe=='是'){ if (values.SSLSafe == '是') {
        values.SSLSafe=1 values.SSLSafe = 0;
        } }
        if(values.SSLSafe=='否'){ if (values.SSLSafe == '否') {
        values.SSLSafe=0 values.SSLSafe = 1;
        } }
        SaveIotConfig({ SaveIotConfig({
        tcpAddress: values.TcpAddress, tcpAddress: values.TcpAddress,
        iotAddress: values.IotAddress, iotAddress: values.IotAddress,
        sslSafe: values.SSLSafe sslSafe: values.SSLSafe,
        }) });
        } }
        }; };
        const onFinishFailed = (errorInfo) => {
        console.log('Failed:', errorInfo);
        };
        useEffect(() => { const onFinishFailed = errorInfo => {
        GetCurentIotVerison() console.log('Failed:', errorInfo);
        GetIotConfig() };
        }, []) useEffect(() => {
        GetCurentIotVerison();
        GetIotConfig();
        }, []);
        const GetCurentIotVerison = () => { const GetCurentIotVerison = () => {
        GetIOTPlatformVersion().then( GetIOTPlatformVersion().then(res => {
        res => { if (res.data) {
        if (res.data) { setCurrentIotVersion(res);
        setCurrentIotVersion(res) }
        } });
        } };
        ) const GetIotConfig = () => {
        } GetTCPConfigInfo().then(res => {
        const GetIotConfig = () => { if (res.data) {
        GetTCPConfigInfo().then( let obj = {};
        res => { Object.keys(currentIotConfig).forEach(k => {
        if (res.data) { obj[k] = res.data[k];
        let obj = {}; });
        Object.keys(currentIotConfig).forEach(k => { console.log(obj);
        obj[k] = res.data[k]; form.setFieldsValue(obj);
        }); setCurrentIotConfig(val => ({ ...val, ...obj }));
        console.log(obj) setLoading(true);
        form.setFieldsValue(obj);
        setCurrentIotConfig(val => ({ ...val, ...obj }));
        setLoading(true)
        PingIOTPlatform({
        ip: obj.IotAddress
        }).then(res => {
        setLoading(false)
        if (res.code === 0) {
        setShow1('block')
        setShow2('none')
        } else {
        setShow1('none')
        setShow2('block')
        }
        }
        )
        }
        }
        )
        }
        const PingIot = ({ ip, values }) => {
        SaveIotConfig({
        tcpAddress: values.TcpAddress,
        iotAddress: values.IotAddress,
        sslSafe: values.SSLSafe
        })
        }
        const PingIot1 = () => {
        setLoading(true)
        let aa = form.getFieldsValue().IotAddress
        PingIOTPlatform({ PingIOTPlatform({
        ip: aa ip: obj.IotAddress,
        }).then(res => { }).then(res => {
        setLoading(false) setLoading(false);
        if (res.code === 0) { if (res.code === 0) {
        setShow1('block') setShow1('block');
        setShow2('none') setShow2('none');
        message.success("连接成功!"); } else {
        } else { setShow1('none');
        setShow1('none') setShow2('block');
        setShow2('block') }
        message.error(res.msg); });
        } }
        } });
        ) };
        } const PingIot = ({ ip, values }) => {
        const SaveIotConfig = (config) => { SaveIotConfig({
        setLoading(true) tcpAddress: values.TcpAddress,
        SaveTcpAddress(config).then(res => { iotAddress: values.IotAddress,
        setLoading(false) sslSafe: values.SSLSafe,
        if (res.code === 0) { });
        message.info('配置保存成功'); };
        } else { const PingIot1 = () => {
        message.error(res.msg); setLoading(true);
        } let aa = form.getFieldsValue().IotAddress;
        } PingIOTPlatform({
        ) ip: aa,
        } }).then(res => {
        setLoading(false);
        if (res.code === 0) {
        return ( setShow1('block');
        <div className={styles.iot_container}> setShow2('none');
        <Card title={`物联平台${currentIotVersion.data ? `[${currentIotVersion.data}]` : ""}`} style={{ width: "100%", height: 'calc(100vh - 130px)' }}> message.success('连接成功!');
        <Spin spinning={loading} tip="loading"> } else {
        <Form setShow1('none');
        {...layout} setShow2('block');
        form={form} message.error(res.msg);
        name="basic" }
        initialValues={{ remember: true }} });
        onFinish={onFinish} };
        onFinishFailed={onFinishFailed} const SaveIotConfig = config => {
        > setLoading(true);
        <div style={{ marginTop: '10px', display: 'flex', alignItems: 'center', marginLeft: '15px' }}> SaveTcpAddress(config).then(res => {
        <img src={Internet} style={{ height: '16px' }} alt="" /><span style={{ marginLeft: '10px', fontWeight: 'bold' }}>物联平台</span> setLoading(false);
        </div> if (res.code === 0) {
        <Divider /> message.info('配置保存成功');
        <Row> } else {
        <Col span={18}> message.error(res.msg);
        <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: '95%' }} />
        </Form.Item>
        </Col>
        <Col span={3}>
        <Button type="primary" onClick={() => PingIot1()}>连接</Button>
        </Col>
        <Col span={3}>
        <span style={{ display: show1 }}><img src={Yes} style={{ height: '32px', marginRight: '20px', marginTop:'5px' }} alt="" /><span style={{verticalAlign: 'text-bottom'}}>已连接</span></span>
        <span style={{ display: show2 }}><CloseCircleFilled style={{ fontSize: '32px', marginRight: '20px', marginTop:'5px' }} /><span style={{verticalAlign: 'text-bottom'}}>未连接</span></span>
        </Col>
        <div style={{ marginTop: '40px', display: 'flex', alignItems: 'center', marginLeft: '15px' }}> return (
        <img src={EMQ} style={{ height: '16px' }} alt="" /><span style={{ marginLeft: '10px', fontWeight: 'bold' }}>EMQ</span> <div className={styles.iot_container}>
        </div> <Card
        <Divider /> title={`物联平台${
        <Col span={18}> currentIotVersion.data ? `[${currentIotVersion.data}]` : ''
        <Form.Item }`}
        label="服务地址(EMQ)" style={{ width: '100%', height: 'calc(100vh - 130px)' }}
        name="TcpAddress" >
        rules={[{ required: true, pattern: new RegExp(/^.*:.*$/), message: '请输入正确的IP:端口' }]} <Spin spinning={loading} tip="loading">
        > <Form
        <Input style={{ width: '95%' }} /> {...layout}
        </Form.Item> form={form}
        </Col> name="basic"
        <Col span={6}> initialValues={{ remember: true }}
        </Col> onFinish={onFinish}
        <Col span={18}> onFinishFailed={onFinishFailed}
        <Form.Item >
        name="SSLSafe" <div
        label="SSL(EMQ)" style={{
        rules={[{ required: true, message: '请选择是否!' }]} marginTop: '10px',
        display: 'flex',
        alignItems: 'center',
        marginLeft: '15px',
        }}
        >
        <img src={Internet} style={{ height: '16px' }} alt="" />
        <span style={{ marginLeft: '10px', fontWeight: 'bold' }}>
        物联平台
        </span>
        </div>
        <Divider />
        <Row>
        <Col span={18}>
        <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: '95%' }} />
        </Form.Item>
        </Col>
        <Col span={3}>
        <Button type="primary" onClick={() => PingIot1()}>
        连接
        </Button>
        </Col>
        <Col span={3}>
        <span style={{ display: show1 }}>
        <img
        src={Yes}
        style={{
        height: '32px',
        marginRight: '20px',
        marginTop: '5px',
        }}
        alt=""
        />
        <span style={{ verticalAlign: 'text-bottom' }}>已连接</span>
        </span>
        <span style={{ display: show2 }}>
        <CloseCircleFilled
        style={{
        fontSize: '32px',
        marginRight: '20px',
        marginTop: '5px',
        }}
        />
        <span style={{ verticalAlign: 'text-bottom' }}>未连接</span>
        </span>
        </Col>
        > <div
        <Select placeholder="请选择是否!" style={{ width: '95%' }}> style={{
        <Option value="0">是</Option> marginTop: '40px',
        <Option value="1">否</Option> display: 'flex',
        </Select> alignItems: 'center',
        </Form.Item> marginLeft: '15px',
        </Col> }}
        <Col span={6}> >
        </Col> <img src={EMQ} style={{ height: '16px' }} alt="" />
        <Col span={24}> <span style={{ marginLeft: '10px', fontWeight: 'bold' }}>
        <Form.Item {...tailLayout}> EMQ
        <Button type="primary" htmlType="submit" disabled={currentIotConfig.TcpAddress.length > 0 ? 0 : 1}> </span>
        保存 </div>
        </Button> <Divider />
        </Form.Item> <Col span={18}>
        </Col> <Form.Item
        </Row> label="服务地址(EMQ)"
        </Form> name="TcpAddress"
        </Spin> rules={[
        </Card> {
        </div> required: true,
        ) pattern: new RegExp(/^.*:.*$/),
        } message: '请输入正确的IP:端口',
        export default IotConfig },
        ]}
        >
        <Input style={{ width: '95%' }} />
        </Form.Item>
        </Col>
        <Col span={6} />
        <Col span={18}>
        <Form.Item
        name="SSLSafe"
        label="SSL(EMQ)"
        rules={[{ required: true, message: '请选择是否!' }]}
        >
        <Select placeholder="请选择是否!" style={{ width: '95%' }}>
        <Option value="0">是</Option>
        <Option value="1">否</Option>
        </Select>
        </Form.Item>
        </Col>
        <Col span={6} />
        <Col span={24}>
        <Form.Item {...tailLayout}>
        <Button
        type="primary"
        htmlType="submit"
        disabled={currentIotConfig.TcpAddress.length > 0 ? 0 : 1}
        >
        保存
        </Button>
        </Form.Item>
        </Col>
        </Row>
        </Form>
        </Spin>
        </Card>
        </div>
        );
        };
        export default IotConfig;
        Markdown is supported
        0% or
        You are about to add 0 people to the discussion. Proceed with caution.
        Finish editing this message first!
        Please register or to comment