IotConfig.jsx 21 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
import {
  Card,
  Form,
  Input,
  Button,
  Select,
  message,
  Divider,
  Row,
  Col,
  Spin,
  Switch,
  Progress,
  Tooltip,
17 18
  Modal,
  Space,
19
  Radio,
20
} from 'antd';
21
import { CloseCircleFilled, InfoCircleFilled, QuestionCircleOutlined } from '@ant-design/icons';
皮倩雯's avatar
皮倩雯 committed
22
import styles from './IotConfig.less';
23 24
import Internet from '../../../../assets/images/icons/物联.svg';
import EMQ from '../../../../assets/images/icons/EMQ.svg';
25
import Yes from '../../../../assets/images/icons/正确.svg';
26
import Things from '../../../../assets/images/icons/物联网.svg';
皮倩雯's avatar
皮倩雯 committed
27 28 29 30 31
import {
  GetIOTPlatformVersion,
  GetTCPConfigInfo,
  PingIOTPlatform,
  SaveTcpAddress,
32 33 34 35 36 37 38 39
  GetDataBaseConfig,
  GetBasicInfo,
  HealthCheck, // 健康检查接口
  CheckIsServiceAdd, // 判断数据库服务是否已添加
  GetServiceInfo, // 查询当前数据库服务状态信息
  AddDB, // 添加数据库
  DepositServiceDisable, // 停止数据库服务
  DepositServiceEnable, // 启动数据库服务
40
  GetGateWay,
41 42
  IsIotUpgrade, // 判断是否需要升级物联网统一接入平台
  IotUpgrade, // 升级物联网统一接入平台
43
  GetIotVersion, // 检查版本BS还是CS
44 45
  SaveSysConfigurate,
  SysConfiguration,
邓超's avatar
邓超 committed
46
} from '@/services/hostmanager/hostmanager';
47 48 49
import {
  GetDbProduct, // 获取产品方案配置
} from '@/services/database/api';
mayongxin's avatar
mayongxin committed
50
const layout = {
皮倩雯's avatar
皮倩雯 committed
51 52
  labelCol: { span: 4 },
  wrapperCol: { span: 20 },
mayongxin's avatar
mayongxin committed
53 54
};
const tailLayout = {
皮倩雯's avatar
皮倩雯 committed
55
  wrapperCol: { offset: 9, span: 15 },
mayongxin's avatar
mayongxin committed
56
};
57
let time = null;
58
const IotConfig = props => {
59
  const { setActiveKey } = props;
皮倩雯's avatar
皮倩雯 committed
60 61 62
  const [loading, setLoading] = useState(false); // 加载
  const [show1, setShow1] = useState('none');
  const [show2, setShow2] = useState('none');
63 64
  const [show3, setShow3] = useState('none');
  const [show4, setShow4] = useState('none');
皮倩雯's avatar
皮倩雯 committed
65 66 67 68 69 70
  const [currentIotVersion, setCurrentIotVersion] = useState({ data: '' });
  const [currentIotConfig, setCurrentIotConfig] = useState({
    TcpAddress: '',
    SSLSafe: '',
    IotAddress: '',
  });
71

72 73 74 75 76 77 78 79 80
  const [currentDataBase, setCurrentDataBase] = useState({
    userName: '',
    password: '',
    dbName: '',
    ip: '',
  });
  const [currentSiteInfo, setcurrentSiteInfo] = useState('');
  const [currentConfig, setCurrentConfig] = useState();

皮倩雯's avatar
皮倩雯 committed
81
  const [form] = Form.useForm();
82 83 84
  const [flag, setFlag] = useState('');
  const [processLength, setProcessLength] = useState(0);
  const [switchStatus, setSwitchStatus] = useState(true);
85 86
  const [dbStatus, setDbStatus] = useState(''); // 数据库状态
  const [buStatus, setBuStatus] = useState(''); // 按钮状态
87
  const [keep, setKeep] = useState('');
88
  const [getWayVisible, setGetWayVisible] = useState(false);
89
  const [upgrade, setUpgrade] = useState(false);
90 91

  useEffect(() => {
92 93 94 95 96 97
    IsIotUpgrade().then(res => {
      if (res.code === 0) {
        setUpgrade(res.data);
        console.log(res);
      }
    });
98

99 100 101 102 103 104
    GetCurentIotVerison();
    GetIotConfig();
    return () => {
      if (time) {
        clearTimeout(time);
        time = null;
皮倩雯's avatar
皮倩雯 committed
105
      }
106
      form.resetFields();
107 108 109 110 111 112 113
    };
  }, []);

  // 获取数据库连接
  const getCurrentConfig = () => {
    GetDataBaseConfig().then(res => {
      if (res.code === 0) {
邓超's avatar
邓超 committed
114
        GetDbProduct({ ...res.data }).then(ress => {
115
          if (ress.data.Project.length > 0) {
116
            setKeep(ress.data.Project[ress.data.Project.length - 1].projectName);
117 118
          }
        });
119 120
        setCurrentDataBase(res.data);
        // 数据库是否已添加
121
        setLoading(true);
122
        CheckIsServiceAdd()
123 124
          .then(resdata1 => {
            setLoading(false);
125
            if (resdata1.code === 0) {
126 127 128 129 130 131 132 133 134 135 136
              if (resdata1.data === true) {
                setShow3('inline-block');
                setShow4('none');
                getStatus(res.data.ip, res.data.dbName);
              } else {
                setDbStatus(resdata1.msg);
                setBuStatus('添加');
                setSwitchStatus(true);
                setShow3('none');
                setShow4('inline-block');
              }
137 138 139
            }
          })
          .catch(err => {
140
            message.error('网络异常');
141 142
            setLoading(false);
          });
143
      }
144
    });
皮倩雯's avatar
皮倩雯 committed
145
  };
mayongxin's avatar
mayongxin committed
146

147 148
  const getStatus = (x, y) => {
    // 查询是否禁用
149
    GetServiceInfo()
150
      .then(resdata => {
151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171
        if (resdata.code === 0) {
          setDbStatus(resdata.data.statusText);
          setProcessLength(resdata.data.loadingProgress * 100);
          if (resdata.data.statusText != '正常' && resdata.data.statusText != '已禁用') {
            setBuStatus('启动中');
            setSwitchStatus(true);
            time = setTimeout(() => {
              getStatus(x, y);
            }, 1000);
          } else {
            if (resdata.data.statusText == '正常') {
              setBuStatus('停止');
            }
            if (resdata.data.statusText == '已禁用') {
              setBuStatus('启动');
            }
            if (time) {
              clearTimeout(time);
              time = null;
            }
            setSwitchStatus(false);
172 173
          }

174 175 176 177 178
          if (resdata.data.statusText == '正常') {
            setCurrentConfig(true);
          } else {
            setCurrentConfig(false);
          }
179
        } else {
180
          message.error(resdata.msg);
181 182 183 184 185 186 187
        }
      })
      .catch(err => {
        if (time) {
          clearTimeout(time);
          time = null;
        }
188
        // message.error('访问异常请稍后再试');
189
      });
皮倩雯's avatar
皮倩雯 committed
190
  };
191

192 193 194 195 196 197 198 199
  // 获取站点编号
  const getSiteCode = () => {
    GetBasicInfo().then(res => {
      if (res.code === 0) {
        setcurrentSiteInfo(res.data);
      }
    });
  };
200

皮倩雯's avatar
皮倩雯 committed
201 202 203 204 205 206 207
  const GetCurentIotVerison = () => {
    GetIOTPlatformVersion().then(res => {
      if (res.data) {
        setCurrentIotVersion(res);
      }
    });
  };
208 209

  // 获取物联平台,EMQ服务地址
皮倩雯's avatar
皮倩雯 committed
210 211 212 213 214 215 216
  const GetIotConfig = () => {
    GetTCPConfigInfo().then(res => {
      if (res.data) {
        let obj = {};
        Object.keys(currentIotConfig).forEach(k => {
          obj[k] = res.data[k];
        });
217
        GetIotVersion({
218
          ip: obj.IotAddress,
219 220 221 222 223 224
        }).then(resdata => {
          if (resdata.code === 0) {
            if (resdata.data === 'BS') {
              GetGateWay().then(resda => {
                if (resda.code === 0) {
                  if (resda.data === false) {
225
                    setFlag(0);
226 227
                    setGetWayVisible(true);
                  } else {
228 229 230
                    setFlag(1);
                    getCurrentConfig();
                    getSiteCode();
231 232 233 234 235 236 237 238 239 240
                  }
                }
              });
            } else {
              setFlag(0);
            }
          } else {
            message.error(resdata.msg);
          }
        });
皮倩雯's avatar
皮倩雯 committed
241
        form.setFieldsValue(obj);
242 243 244 245 246 247 248 249 250 251
        SysConfiguration({ moduleName: 'EMQ_API' }).then(res1 => {
          if (res1.code === 0) {
            form.setFieldsValue({ configName: res1.data });
          }
        });
        SysConfiguration({ moduleName: 'EMQ版本' }).then(res2 => {
          if (res2.code === 0) {
            form.setFieldsValue({ configValue: res2.data });
          }
        });
252 253 254
        if (!obj.SSLSafe || obj.SSLSafe == null) {
          form.setFieldsValue({ SSLSafe: '否' });
        }
皮倩雯's avatar
皮倩雯 committed
255 256 257 258
        setCurrentIotConfig(val => ({ ...val, ...obj }));
      }
    });
  };
259 260

  const onFinish = values => {
261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286
    form.validateFields().then(validate => {
      if (validate) {
        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,
            },
            values,
          );
        }
287
      }
288
    });
289 290 291 292 293 294
  };

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

295 296 297 298 299 300 301 302 303 304 305 306 307 308
  // 物联网升级
  const PingIotUpdata = () => {
    setLoading(true);
    IotUpgrade().then(res => {
      setLoading(false);
      if (res.code === 0) {
        setUpgrade(false);
        message.success('升级成功!');
      } else {
        message.error(res.msg);
      }
    });
  };

皮倩雯's avatar
皮倩雯 committed
309
  const PingIot = ({ ip, values }) => {
310 311 312 313 314 315 316 317
    SaveIotConfig(
      {
        tcpAddress: values.TcpAddress,
        iotAddress: values.IotAddress,
        sslSafe: values.SSLSafe,
      },
      values,
    );
皮倩雯's avatar
皮倩雯 committed
318 319 320 321 322 323 324 325 326 327 328 329 330 331 332 333 334 335 336
  };
  const PingIot1 = () => {
    setLoading(true);
    let aa = form.getFieldsValue().IotAddress;
    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);
      }
    });
  };
337 338 339

  // 添加当前连接数据库
  const PingIot2 = () => {
340 341 342 343 344 345 346
    if (show3 === 'inline-block') {
      // 数据库已添加
      if (buStatus === '停止') {
        OperateNginx(false);
      } else if (buStatus === '启动') {
        OperateNginx(true);
      }
347
    } else {
348
      // 数据库未添加
349
      setLoading(true);
350
      AddDB().then(res => {
351
        setLoading(false);
352
        if (res.code === 0) {
353 354 355 356 357 358 359 360 361 362 363
          setShow3('inline-block');
          setShow4('none');
          message.success('添加成功!');
          getStatus(currentDataBase.ip, currentDataBase.dbName);
        } else {
          setShow3('none');
          setShow4('inline-block');
          message.error(res.msg);
        }
      });
    }
364 365 366 367 368 369 370 371 372 373 374 375 376 377 378 379 380 381 382 383 384 385 386 387 388 389 390 391
    // 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);
    //     }
    //   });
    // }
392 393
  };

394
  const SaveIotConfig = (config, values) => {
皮倩雯's avatar
皮倩雯 committed
395 396 397 398
    setLoading(true);
    SaveTcpAddress(config).then(res => {
      setLoading(false);
      if (res.code === 0) {
399 400 401 402 403 404 405 406 407 408 409 410 411 412 413 414 415 416 417
        SaveSysConfigurate({
          configName: 'EMQ版本',
          configValue: values.configValue,
        }).then(resData => {
          if (resData.code === 0) {
            SaveSysConfigurate({
              configName: 'EMQ_API',
              configValue: values.configName,
            }).then(resData1 => {
              if (resData1.code === 0) {
                message.success('配置保存成功');
              } else {
                message.error(resData.msg);
              }
            });
          } else {
            message.error(resData.msg);
          }
        });
皮倩雯's avatar
皮倩雯 committed
418 419 420 421 422
      } else {
        message.error(res.msg);
      }
    });
  };
423

424 425 426
  const OperateNginx = checked => {
    if (checked) {
      setSwitchStatus(true);
427
      setLoading(true);
428
      DepositServiceEnable().then(res => {
429
        setLoading(false);
430
        getStatus(currentDataBase.ip, currentDataBase.dbName);
431
        if (res.code === 0) {
432 433 434 435 436 437 438
          // setCurrentConfig(checked);
          message.success(res.msg);
        } else {
          message.error(res.msg);
        }
      });
    } else {
439
      setLoading(true);
440
      DepositServiceDisable().then(res => {
441
        setLoading(false);
442
        if (res.code === 0) {
443 444
          setDbStatus('已禁用');
          setBuStatus('启动');
445 446 447 448 449 450 451 452 453 454
          setProcessLength(0);
          setCurrentConfig(checked);
          message.success(res.msg);
        } else {
          message.error(res.msg);
        }
      });
    }
  };

455 456 457
  const submit = () => {
    window.location.href = `/civmanage/platform/host`;
  };
皮倩雯's avatar
皮倩雯 committed
458 459 460
  return (
    <div className={styles.iot_container}>
      <Card
461
        // title={`物联平台${currentIotVersion.data ? `[${currentIotVersion.data}]` : ''}`}
皮倩雯's avatar
皮倩雯 committed
462 463 464 465 466 467
        style={{ width: '100%', height: 'calc(100vh - 130px)' }}
      >
        <Spin spinning={loading} tip="loading">
          <Form
            form={form}
            name="basic"
468
            initialValues={{ remember: true, configValue: 'V4' }}
皮倩雯's avatar
皮倩雯 committed
469 470 471 472 473 474 475 476 477 478 479
            onFinish={onFinish}
            onFinishFailed={onFinishFailed}
          >
            <div
              style={{
                marginTop: '10px',
                display: 'flex',
                alignItems: 'center',
              }}
            >
              <img src={Internet} style={{ height: '16px' }} alt="" />
480
              <span style={{ marginLeft: '10px', fontWeight: 'bold' }}>物联网统一接入平台</span>
481 482 483 484 485 486 487 488 489 490 491 492 493 494 495 496
              {/* <div>
                {getWay === false ? (
                  <>
                    <InfoCircleFilled
                      style={{
                        color: '#faad14',
                        fontSize: '18px',
                        marginLeft: '10px',
                      }}
                    />
                    <span style={{ marginLeft: '5px' }}>请开启网关!</span>
                  </>
                ) : (
                  <></>
                )}
              </div> */}
皮倩雯's avatar
皮倩雯 committed
497 498
            </div>
            <Divider />
499
            <Form.Item style={{ marginLeft: '20px', marginBottom: '0px' }}>
500
              <div style={{ display: 'flex', justifyContent: 'flex-start' }}>
501 502 503 504 505 506 507 508 509 510 511 512 513 514 515 516
                <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' }}
517
                    // placeholder="请输入服务地址"
518 519
                  />
                </Form.Item>
520
                <Button onClick={() => PingIot1()} style={{ marginLeft: '-88px' }}>
521 522
                  测试连接
                </Button>
523
                {upgrade && (
524
                  <>
525 526 527 528 529 530 531
                    <Button
                      type="primary"
                      onClick={() => PingIotUpdata()}
                      style={{ marginLeft: '25px' }}
                    >
                      平台升级
                    </Button>
532 533 534 535 536 537
                    <Tooltip title="添加物联统一接入平台的子网站,并导入网页菜单数据">
                      <QuestionCircleOutlined
                        style={{ fontSize: '18px', marginLeft: '10px', marginTop: '12px' }}
                      />
                    </Tooltip>
                  </>
538
                )}
皮倩雯's avatar
皮倩雯 committed
539 540 541 542
                <span style={{ display: show1 }}>
                  <img
                    src={Yes}
                    style={{
543
                      height: '24px',
544
                      marginTop: '5px',
545
                      marginLeft: '26px',
皮倩雯's avatar
皮倩雯 committed
546 547 548 549 550 551 552
                    }}
                    alt=""
                  />
                </span>
                <span style={{ display: show2 }}>
                  <CloseCircleFilled
                    style={{
553
                      fontSize: '24px',
554
                      marginTop: '5px',
555
                      marginLeft: '26px',
皮倩雯's avatar
皮倩雯 committed
556 557 558 559
                    }}
                  />
                </span>
              </div>
560
            </Form.Item>
561 562 563 564 565 566 567 568 569 570 571 572 573 574 575 576 577 578 579 580 581 582 583 584 585 586 587 588 589 590 591 592

            <div style={{ marginTop: '20px' }}>
              {flag === 1 ? (
                <>
                  <Form.Item label="当前数据库" style={{ marginLeft: '50px' }}>
                    <span style={{ marginLeft: '14px' }}>{`${currentDataBase.ip}/${
                      currentDataBase.dbName
                    }`}</span>
                    {show3 === 'none' ? <></> : <span>({dbStatus})</span>}
                  </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>
                      <Button
                        type="primary"
                        onClick={() => PingIot2()}
                        style={{ marginLeft: '15px' }}
                        disabled={buStatus === '启动中'}
                      >
                        {buStatus}
                      </Button>
                      {/* <Switch
593 594 595 596 597 598
                      checkedChildren="开启"
                      unCheckedChildren="关闭"
                      checked={currentConfig}
                      onChange={OperateNginx}
                      style={{ marginLeft: '15px' }}
                      disabled={switchStatus}
599
                    /> */}
600 601 602 603 604 605 606
                    </div>
                  </Form.Item>
                </>
              ) : (
                <></>
              )}
            </div>
607

608 609 610 611 612 613 614 615 616 617 618 619 620 621 622 623 624 625 626 627 628 629 630 631 632 633 634 635 636 637 638 639 640 641 642 643
            <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>
644 645 646 647 648 649 650 651 652 653 654 655 656 657 658 659 660 661 662
            <Form.Item
              style={{ marginLeft: '30px' }}
              label="API地址"
              name="configName"
              rules={[
                {
                  pattern: new RegExp(/^.*:.*$/),
                  message: '请输入正确的IP:端口',
                },
              ]}
            >
              <Input style={{ width: '300px', marginLeft: '60px' }} />
            </Form.Item>
            <Form.Item style={{ marginLeft: '30px' }} label="EMQ版本" name="configValue">
              <Radio.Group style={{ marginLeft: '50px' }}>
                <Radio value="V4">V4</Radio>
                <Radio value="V5">V5</Radio>
              </Radio.Group>
            </Form.Item>
663 664 665 666 667
            <Form.Item>
              <Button type="primary" htmlType="submit" style={{ marginLeft: '152px' }}>
                保存
              </Button>
            </Form.Item>
皮倩雯's avatar
皮倩雯 committed
668 669 670
          </Form>
        </Spin>
      </Card>
671 672 673 674
      <Modal
        visible={getWayVisible}
        title="提示"
        width="350px"
675 676 677
        closable
        maskClosable={false}
        onCancel={() => setGetWayVisible(false)}
678
        all
679 680 681 682 683
        footer={
          <Space>
            <Button
              onClick={() => {
                setGetWayVisible(false);
684
                setActiveKey('6');
685 686 687 688 689 690 691 692 693 694 695 696 697 698 699 700 701
              }}
              type="primary"
            >
              好的,去开启
            </Button>
          </Space>
        }
      >
        <InfoCircleFilled
          style={{
            color: '#faad14',
            fontSize: '18px',
            marginRight: '10px',
          }}
        />
        <span>当前网关暂未打开,请前往开启!</span>
      </Modal>
皮倩雯's avatar
皮倩雯 committed
702 703 704 705
    </div>
  );
};
export default IotConfig;