IotConfig.jsx 16.7 KB
Newer Older
1
/* eslint-disable react/jsx-no-undef */
皮倩雯's avatar
皮倩雯 committed
2
import React, { useEffect, useState } from 'react';
3 4 5 6 7 8 9 10 11 12 13 14 15 16 17
import {
  Card,
  Form,
  Input,
  Button,
  Select,
  message,
  Divider,
  Row,
  Col,
  Spin,
  Switch,
  Progress,
  Tooltip,
} from 'antd';
18
import { CloseCircleFilled } from '@ant-design/icons';
皮倩雯's avatar
皮倩雯 committed
19
import styles from './IotConfig.less';
20 21
import Internet from '../../../../assets/images/icons/物联.svg';
import EMQ from '../../../../assets/images/icons/EMQ.svg';
22
import Yes from '../../../../assets/images/icons/正确.svg';
23
import Things from '../../../../assets/images/icons/物联网.svg';
皮倩雯's avatar
皮倩雯 committed
24 25 26 27 28
import {
  GetIOTPlatformVersion,
  GetTCPConfigInfo,
  PingIOTPlatform,
  SaveTcpAddress,
29 30 31 32 33 34 35 36
  GetDataBaseConfig,
  GetBasicInfo,
  HealthCheck, // 健康检查接口
  CheckIsServiceAdd, // 判断数据库服务是否已添加
  GetServiceInfo, // 查询当前数据库服务状态信息
  AddDB, // 添加数据库
  DepositServiceDisable, // 停止数据库服务
  DepositServiceEnable, // 启动数据库服务
邓超's avatar
邓超 committed
37
} from '@/services/hostmanager/hostmanager';
38 39 40
import {
  GetDbProduct, // 获取产品方案配置
} from '@/services/database/api';
mayongxin's avatar
mayongxin committed
41
const layout = {
皮倩雯's avatar
皮倩雯 committed
42 43
  labelCol: { span: 4 },
  wrapperCol: { span: 20 },
mayongxin's avatar
mayongxin committed
44 45
};
const tailLayout = {
皮倩雯's avatar
皮倩雯 committed
46
  wrapperCol: { offset: 9, span: 15 },
mayongxin's avatar
mayongxin committed
47
};
48
let time = null;
mayongxin's avatar
mayongxin committed
49
const IotConfig = () => {
皮倩雯's avatar
皮倩雯 committed
50 51 52
  const [loading, setLoading] = useState(false); // 加载
  const [show1, setShow1] = useState('none');
  const [show2, setShow2] = useState('none');
53 54
  const [show3, setShow3] = useState('none');
  const [show4, setShow4] = useState('none');
皮倩雯's avatar
皮倩雯 committed
55 56 57 58 59 60
  const [currentIotVersion, setCurrentIotVersion] = useState({ data: '' });
  const [currentIotConfig, setCurrentIotConfig] = useState({
    TcpAddress: '',
    SSLSafe: '',
    IotAddress: '',
  });
61

62 63 64 65 66 67 68 69 70
  const [currentDataBase, setCurrentDataBase] = useState({
    userName: '',
    password: '',
    dbName: '',
    ip: '',
  });
  const [currentSiteInfo, setcurrentSiteInfo] = useState('');
  const [currentConfig, setCurrentConfig] = useState();

皮倩雯's avatar
皮倩雯 committed
71
  const [form] = Form.useForm();
72 73 74
  const [flag, setFlag] = useState('');
  const [processLength, setProcessLength] = useState(0);
  const [switchStatus, setSwitchStatus] = useState(true);
75 76
  const [dbStatus, setDbStatus] = useState(''); // 数据库状态
  const [buStatus, setBuStatus] = useState(''); // 按钮状态
77
  const [keep, setKeep] = useState('');
78 79 80 81 82 83 84 85 86

  useEffect(() => {
    HealthCheck().then(res => {
      if (res.success) {
        setFlag(1);
        getCurrentConfig();
        getSiteCode();
      } else {
        setFlag(0);
皮倩雯's avatar
皮倩雯 committed
87
      }
88 89 90 91 92 93 94
    });
    GetCurentIotVerison();
    GetIotConfig();
    return () => {
      if (time) {
        clearTimeout(time);
        time = null;
皮倩雯's avatar
皮倩雯 committed
95
      }
96 97 98 99 100 101 102
    };
  }, []);

  // 获取数据库连接
  const getCurrentConfig = () => {
    GetDataBaseConfig().then(res => {
      if (res.code === 0) {
邓超's avatar
邓超 committed
103
        GetDbProduct({ ...res.data }).then(ress => {
104
          console.log(res.data);
105 106 107
          console.log(ress.data.Project);
          if (ress.data.Project.length > 0) {
            console.log(ress.data.Project[ress.data.Project.length - 1].projectName);
108
            setKeep(ress.data.Project[ress.data.Project.length - 1].projectName);
109 110
          }
        });
111 112
        setCurrentDataBase(res.data);
        // 数据库是否已添加
113
        setLoading(true);
114
        CheckIsServiceAdd({ host: res.data.ip, dataBaseName: res.data.dbName }).then(resdata1 => {
115
          setLoading(false);
116 117 118 119 120
          if (resdata1.success) {
            setShow3('inline-block');
            setShow4('none');
            getStatus(res.data.ip, res.data.dbName);
          } else {
121 122
            setDbStatus(resdata1.msg);
            setBuStatus('添加');
123 124 125 126 127
            setSwitchStatus(true);
            setShow3('none');
            setShow4('inline-block');
          }
        });
128
      }
129
    });
皮倩雯's avatar
皮倩雯 committed
130
  };
mayongxin's avatar
mayongxin committed
131

132 133 134 135
  const getStatus = (x, y) => {
    // 查询是否禁用
    GetServiceInfo({ host: x, dataBaseName: y })
      .then(resdata => {
136
        setDbStatus(resdata.response.statusText);
137 138
        setProcessLength(resdata.response.loadingProgress * 100);
        if (resdata.response.statusText != '正常' && resdata.response.statusText != '已禁用') {
139
          setBuStatus('启动中');
140 141 142 143 144
          setSwitchStatus(true);
          time = setTimeout(() => {
            getStatus(x, y);
          }, 1000);
        } else {
145 146 147 148 149 150
          if (resdata.response.statusText == '正常') {
            setBuStatus('停止');
          }
          if (resdata.response.statusText == '已禁用') {
            setBuStatus('启动');
          }
151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170
          if (time) {
            clearTimeout(time);
            time = null;
          }
          setSwitchStatus(false);
        }

        if (resdata.response.statusText == '正常') {
          setCurrentConfig(true);
        } else {
          setCurrentConfig(false);
        }
      })
      .catch(err => {
        if (time) {
          clearTimeout(time);
          time = null;
        }
        message.error('访问异常请稍后再试');
      });
皮倩雯's avatar
皮倩雯 committed
171
  };
172

173 174 175 176 177 178 179 180
  // 获取站点编号
  const getSiteCode = () => {
    GetBasicInfo().then(res => {
      if (res.code === 0) {
        setcurrentSiteInfo(res.data);
      }
    });
  };
181

皮倩雯's avatar
皮倩雯 committed
182 183 184 185 186 187 188
  const GetCurentIotVerison = () => {
    GetIOTPlatformVersion().then(res => {
      if (res.data) {
        setCurrentIotVersion(res);
      }
    });
  };
189 190

  // 获取物联平台,EMQ服务地址
皮倩雯's avatar
皮倩雯 committed
191 192 193 194 195 196 197 198 199
  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);
200 201 202 203 204 205 206 207 208
        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: '否' });
        }
皮倩雯's avatar
皮倩雯 committed
209 210 211 212
        setCurrentIotConfig(val => ({ ...val, ...obj }));
      }
    });
  };
213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241

  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 || currentIotConfig.IotAddress,
        sslSafe: values.SSLSafe,
      });
    }
  };

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

皮倩雯's avatar
皮倩雯 committed
242 243 244 245 246 247 248 249 250 251
  const PingIot = ({ ip, values }) => {
    SaveIotConfig({
      tcpAddress: values.TcpAddress,
      iotAddress: values.IotAddress,
      sslSafe: values.SSLSafe,
    });
  };
  const PingIot1 = () => {
    setLoading(true);
    let aa = form.getFieldsValue().IotAddress;
252
    console.log(aa);
皮倩雯's avatar
皮倩雯 committed
253 254 255 256 257 258 259 260 261 262 263 264 265 266 267
    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);
      }
    });
  };
268 269 270

  // 添加当前连接数据库
  const PingIot2 = () => {
271 272 273 274 275 276 277 278 279
    console.log(buStatus);
    console.log(show3);
    if (show3 === 'inline-block') {
      // 数据库已添加
      if (buStatus === '停止') {
        OperateNginx(false);
      } else if (buStatus === '启动') {
        OperateNginx(true);
      }
280
    } else {
281
      // 数据库未添加
282 283 284 285 286 287 288
      setLoading(true);
      AddDB({
        host: currentDataBase.ip,
        user: currentDataBase.userName,
        pwd: currentDataBase.password,
        dataBaseName: currentDataBase.dbName,
        siteCode: currentSiteInfo,
289
        name: keep,
290 291 292 293 294 295 296 297 298 299 300 301 302 303
      }).then(res => {
        setLoading(false);
        if (res.success) {
          setShow3('inline-block');
          setShow4('none');
          message.success('添加成功!');
          getStatus(currentDataBase.ip, currentDataBase.dbName);
        } else {
          setShow3('none');
          setShow4('inline-block');
          message.error(res.msg);
        }
      });
    }
304 305 306 307 308 309 310 311 312 313 314 315 316 317 318 319 320 321 322 323 324 325 326 327 328 329 330 331
    // if (show3 == 'inline-block') {
    //   message.warning('该数据库已添加!');
    // } else if (!currentDataBase.ip) {
    //   message.error('未获取数据库信息');
    // } else if (!currentSiteInfo) {
    //   message.error('未获取站点编号');
    // } else {
    //   setLoading(true);
    //   AddDB({
    //     host: currentDataBase.ip,
    //     user: currentDataBase.userName,
    //     pwd: currentDataBase.password,
    //     dataBaseName: currentDataBase.dbName,
    //     siteCode: currentSiteInfo,
    //   }).then(res => {
    //     setLoading(false);
    //     if (res.success) {
    //       setShow3('inline-block');
    //       setShow4('none');
    //       message.success('添加成功!');
    //       getStatus(currentDataBase.ip, currentDataBase.dbName);
    //     } else {
    //       setShow3('none');
    //       setShow4('inline-block');
    //       message.error(res.msg);
    //     }
    //   });
    // }
332 333
  };

皮倩雯's avatar
皮倩雯 committed
334 335 336 337 338 339 340 341 342 343 344
  const SaveIotConfig = config => {
    setLoading(true);
    SaveTcpAddress(config).then(res => {
      setLoading(false);
      if (res.code === 0) {
        message.info('配置保存成功');
      } else {
        message.error(res.msg);
      }
    });
  };
345

346 347 348
  const OperateNginx = checked => {
    if (checked) {
      setSwitchStatus(true);
349
      setLoading(true);
350 351 352 353
      DepositServiceEnable({
        host: currentDataBase.ip,
        dataBaseName: currentDataBase.dbName,
      }).then(res => {
354
        setLoading(false);
355 356 357 358 359 360 361 362 363
        getStatus(currentDataBase.ip, currentDataBase.dbName);
        if (res.success) {
          // setCurrentConfig(checked);
          message.success(res.msg);
        } else {
          message.error(res.msg);
        }
      });
    } else {
364
      setLoading(true);
365 366 367 368
      DepositServiceDisable({
        host: currentDataBase.ip,
        dataBaseName: currentDataBase.dbName,
      }).then(res => {
369
        setLoading(false);
370
        if (res.success) {
371 372
          setDbStatus('已禁用');
          setBuStatus('启动');
373 374 375 376 377 378 379 380 381 382
          setProcessLength(0);
          setCurrentConfig(checked);
          message.success(res.msg);
        } else {
          message.error(res.msg);
        }
      });
    }
  };

皮倩雯's avatar
皮倩雯 committed
383 384 385
  return (
    <div className={styles.iot_container}>
      <Card
386
        // title={`物联平台${currentIotVersion.data ? `[${currentIotVersion.data}]` : ''}`}
皮倩雯's avatar
皮倩雯 committed
387 388 389 390 391 392 393 394 395 396 397 398 399 400 401 402 403 404
        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="" />
405
              <span style={{ marginLeft: '10px', fontWeight: 'bold' }}>物联平台</span>
皮倩雯's avatar
皮倩雯 committed
406 407
            </div>
            <Divider />
408
            <Form.Item style={{ marginLeft: '20px', marginBottom: '0px' }}>
409
              <div style={{ display: 'flex', justifyContent: 'flex-start' }}>
410 411 412 413 414 415 416 417 418 419 420 421 422 423 424 425 426 427 428
                <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>
皮倩雯's avatar
皮倩雯 committed
429 430 431 432
                <span style={{ display: show1 }}>
                  <img
                    src={Yes}
                    style={{
433 434 435
                      height: '24px',
                      marginTop: '10px',
                      marginLeft: '26px',
皮倩雯's avatar
皮倩雯 committed
436 437 438 439 440 441 442
                    }}
                    alt=""
                  />
                </span>
                <span style={{ display: show2 }}>
                  <CloseCircleFilled
                    style={{
443 444 445
                      fontSize: '24px',
                      marginTop: '10px',
                      marginLeft: '26px',
皮倩雯's avatar
皮倩雯 committed
446 447 448 449
                    }}
                  />
                </span>
              </div>
450 451 452 453
            </Form.Item>
            <Button type="primary" onClick={() => PingIot1()} style={{ marginLeft: '152px' }}>
              连接
            </Button>
454 455 456 457 458 459 460 461 462
            {flag === 1 ? (
              <>
                <div
                  style={{
                    marginTop: '40px',
                    display: 'flex',
                    alignItems: 'center',
                  }}
                >
463
                  <img src={Things} style={{ height: '20px' }} alt="" />
464 465 466 467
                  <span style={{ marginLeft: '10px', fontWeight: 'bold' }}>物联网统一接入平台</span>
                </div>
                <Divider />
                <Form.Item label="当前数据库" style={{ marginLeft: '50px' }}>
468 469 470
                  <span style={{ marginLeft: '14px' }}>{`${currentDataBase.ip}/${
                    currentDataBase.dbName
                  }`}</span>
471
                  {show3 === 'none' ? <></> : <span>({dbStatus})</span>}
472 473 474 475 476 477 478 479 480 481 482 483 484 485
                </Form.Item>
                <Form.Item label="加载进度" style={{ marginLeft: '65px' }}>
                  <div style={{ width: 200, marginBottom: '30px' }}>
                    <Progress
                      style={{ marginTop: '4px', marginLeft: '14px' }}
                      strokeColor={{
                        from: '#108ee9',
                        to: '#87d068',
                      }}
                      percent={processLength}
                      status={processLength == '100' ? 'success' : 'active'}
                    />
                  </div>
                  <div>
486 487 488 489
                    <Button
                      type="primary"
                      onClick={() => PingIot2()}
                      style={{ marginLeft: '15px' }}
490
                      disabled={buStatus === '启动中'}
491
                    >
492
                      {buStatus}
493
                    </Button>
494
                    {/* <Switch
495 496 497 498 499 500
                      checkedChildren="开启"
                      unCheckedChildren="关闭"
                      checked={currentConfig}
                      onChange={OperateNginx}
                      style={{ marginLeft: '15px' }}
                      disabled={switchStatus}
501
                    /> */}
502 503 504 505 506 507 508
                  </div>
                </Form.Item>
              </>
            ) : (
              <></>
            )}

509 510 511 512 513 514 515 516 517 518 519 520 521 522 523 524 525 526 527 528 529 530 531 532 533 534 535 536 537 538 539 540 541 542 543 544 545 546 547 548 549
            <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>
皮倩雯's avatar
皮倩雯 committed
550 551 552 553 554 555 556
          </Form>
        </Spin>
      </Card>
    </div>
  );
};
export default IotConfig;