Skip to content

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

修改宿主管理

parent 3e32beaa
Pipeline #39394 skipped with stages
        Show whitespace changes
        Inline Side-by-side
        Showing with 159 additions and 91 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) => { const onFinishFailed = errorInfo => {
        console.log('Failed:', errorInfo); console.log('Failed:', errorInfo);
        }; };
        useEffect(() => { useEffect(() => {
        GetCurentIotVerison() GetCurentIotVerison();
        GetIotConfig() GetIotConfig();
        }, []);
        }, [])
        const GetCurentIotVerison = () => { const GetCurentIotVerison = () => {
        GetIOTPlatformVersion().then( GetIOTPlatformVersion().then(res => {
        res => {
        if (res.data) { if (res.data) {
        setCurrentIotVersion(res) setCurrentIotVersion(res);
        }
        }
        )
        } }
        });
        };
        const GetIotConfig = () => { const GetIotConfig = () => {
        GetTCPConfigInfo().then( GetTCPConfigInfo().then(res => {
        res => {
        if (res.data) { if (res.data) {
        let obj = {}; let obj = {};
        Object.keys(currentIotConfig).forEach(k => { Object.keys(currentIotConfig).forEach(k => {
        obj[k] = res.data[k]; obj[k] = res.data[k];
        }); });
        console.log(obj) console.log(obj);
        form.setFieldsValue(obj); form.setFieldsValue(obj);
        setCurrentIotConfig(val => ({ ...val, ...obj })); setCurrentIotConfig(val => ({ ...val, ...obj }));
        setLoading(true) setLoading(true);
        PingIOTPlatform({ PingIOTPlatform({
        ip: obj.IotAddress 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');
        } else { } else {
        setShow1('none') setShow1('none');
        setShow2('block') setShow2('block');
        }
        } }
        ) });
        }
        }
        )
        } }
        });
        };
        const PingIot = ({ ip, values }) => { const PingIot = ({ ip, values }) => {
        SaveIotConfig({ SaveIotConfig({
        tcpAddress: values.TcpAddress, tcpAddress: values.TcpAddress,
        iotAddress: values.IotAddress, iotAddress: values.IotAddress,
        sslSafe: values.SSLSafe sslSafe: values.SSLSafe,
        }) });
        } };
        const PingIot1 = () => { const PingIot1 = () => {
        setLoading(true) setLoading(true);
        let aa = form.getFieldsValue().IotAddress let aa = form.getFieldsValue().IotAddress;
        PingIOTPlatform({ PingIOTPlatform({
        ip: aa ip: aa,
        }).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("连接成功!"); message.success('连接成功!');
        } else { } else {
        setShow1('none') setShow1('none');
        setShow2('block') setShow2('block');
        message.error(res.msg); message.error(res.msg);
        } }
        } });
        ) };
        } const SaveIotConfig = config => {
        const SaveIotConfig = (config) => { setLoading(true);
        setLoading(true)
        SaveTcpAddress(config).then(res => { SaveTcpAddress(config).then(res => {
        setLoading(false) setLoading(false);
        if (res.code === 0) { if (res.code === 0) {
        message.info('配置保存成功'); message.info('配置保存成功');
        } else { } else {
        message.error(res.msg); message.error(res.msg);
        } }
        } });
        ) };
        }
        return ( return (
        <div className={styles.iot_container}> <div className={styles.iot_container}>
        <Card title={`物联平台${currentIotVersion.data ? `[${currentIotVersion.data}]` : ""}`} style={{ width: "100%", height: 'calc(100vh - 130px)' }}> <Card
        title={`物联平台${
        currentIotVersion.data ? `[${currentIotVersion.data}]` : ''
        }`}
        style={{ width: '100%', height: 'calc(100vh - 130px)' }}
        >
        <Spin spinning={loading} tip="loading"> <Spin spinning={loading} tip="loading">
        <Form <Form
        {...layout} {...layout}
        ...@@ -152,8 +162,18 @@ const IotConfig = () => { ...@@ -152,8 +162,18 @@ const IotConfig = () => {
        onFinish={onFinish} onFinish={onFinish}
        onFinishFailed={onFinishFailed} onFinishFailed={onFinishFailed}
        > >
        <div style={{ marginTop: '10px', display: 'flex', alignItems: 'center', marginLeft: '15px' }}> <div
        <img src={Internet} style={{ height: '16px' }} alt="" /><span style={{ marginLeft: '10px', fontWeight: 'bold' }}>物联平台</span> style={{
        marginTop: '10px',
        display: 'flex',
        alignItems: 'center',
        marginLeft: '15px',
        }}
        >
        <img src={Internet} style={{ height: '16px' }} alt="" />
        <span style={{ marginLeft: '10px', fontWeight: 'bold' }}>
        物联平台
        </span>
        </div> </div>
        <Divider /> <Divider />
        <Row> <Row>
        ...@@ -161,40 +181,85 @@ const IotConfig = () => { ...@@ -161,40 +181,85 @@ const IotConfig = () => {
        <Form.Item <Form.Item
        label="服务地址(平台)" label="服务地址(平台)"
        name="IotAddress" 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' }]} 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%' }} /> <Input style={{ width: '95%' }} />
        </Form.Item> </Form.Item>
        </Col> </Col>
        <Col span={3}> <Col span={3}>
        <Button type="primary" onClick={() => PingIot1()}>连接</Button> <Button type="primary" onClick={() => PingIot1()}>
        连接
        </Button>
        </Col> </Col>
        <Col span={3}> <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: show1 }}>
        <span style={{ display: show2 }}><CloseCircleFilled style={{ fontSize: '32px', marginRight: '20px', marginTop:'5px' }} /><span style={{verticalAlign: 'text-bottom'}}>未连接</span></span> <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> </Col>
        <div style={{ marginTop: '40px', display: 'flex', alignItems: 'center', marginLeft: '15px' }}> <div
        <img src={EMQ} style={{ height: '16px' }} alt="" /><span style={{ marginLeft: '10px', fontWeight: 'bold' }}>EMQ</span> style={{
        marginTop: '40px',
        display: 'flex',
        alignItems: 'center',
        marginLeft: '15px',
        }}
        >
        <img src={EMQ} style={{ height: '16px' }} alt="" />
        <span style={{ marginLeft: '10px', fontWeight: 'bold' }}>
        EMQ
        </span>
        </div> </div>
        <Divider /> <Divider />
        <Col span={18}> <Col span={18}>
        <Form.Item <Form.Item
        label="服务地址(EMQ)" label="服务地址(EMQ)"
        name="TcpAddress" name="TcpAddress"
        rules={[{ required: true, pattern: new RegExp(/^.*:.*$/), message: '请输入正确的IP:端口' }]} rules={[
        {
        required: true,
        pattern: new RegExp(/^.*:.*$/),
        message: '请输入正确的IP:端口',
        },
        ]}
        > >
        <Input style={{ width: '95%' }} /> <Input style={{ width: '95%' }} />
        </Form.Item> </Form.Item>
        </Col> </Col>
        <Col span={6}> <Col span={6} />
        </Col>
        <Col span={18}> <Col span={18}>
        <Form.Item <Form.Item
        name="SSLSafe" name="SSLSafe"
        label="SSL(EMQ)" label="SSL(EMQ)"
        rules={[{ required: true, message: '请选择是否!' }]} rules={[{ required: true, message: '请选择是否!' }]}
        > >
        <Select placeholder="请选择是否!" style={{ width: '95%' }}> <Select placeholder="请选择是否!" style={{ width: '95%' }}>
        <Option value="0">是</Option> <Option value="0">是</Option>
        ...@@ -202,11 +267,14 @@ const IotConfig = () => { ...@@ -202,11 +267,14 @@ const IotConfig = () => {
        </Select> </Select>
        </Form.Item> </Form.Item>
        </Col> </Col>
        <Col span={6}> <Col span={6} />
        </Col>
        <Col span={24}> <Col span={24}>
        <Form.Item {...tailLayout}> <Form.Item {...tailLayout}>
        <Button type="primary" htmlType="submit" disabled={currentIotConfig.TcpAddress.length > 0 ? 0 : 1}> <Button
        type="primary"
        htmlType="submit"
        disabled={currentIotConfig.TcpAddress.length > 0 ? 0 : 1}
        >
        保存 保存
        </Button> </Button>
        </Form.Item> </Form.Item>
        ...@@ -216,6 +284,6 @@ const IotConfig = () => { ...@@ -216,6 +284,6 @@ const IotConfig = () => {
        </Spin> </Spin>
        </Card> </Card>
        </div> </div>
        ) );
        } };
        export default IotConfig 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