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

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

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

  useEffect(() => {
89 90 91 92 93 94
    IsIotUpgrade().then(res => {
      if (res.code === 0) {
        setUpgrade(res.data);
        console.log(res);
      }
    });
95

96 97 98 99 100 101
    GetCurentIotVerison();
    GetIotConfig();
    return () => {
      if (time) {
        clearTimeout(time);
        time = null;
皮倩雯's avatar
皮倩雯 committed
102
      }
103 104 105 106 107 108 109
    };
  }, []);

  // 获取数据库连接
  const getCurrentConfig = () => {
    GetDataBaseConfig().then(res => {
      if (res.code === 0) {
邓超's avatar
邓超 committed
110
        GetDbProduct({ ...res.data }).then(ress => {
111
          if (ress.data.Project.length > 0) {
112
            setKeep(ress.data.Project[ress.data.Project.length - 1].projectName);
113 114
          }
        });
115 116
        setCurrentDataBase(res.data);
        // 数据库是否已添加
117
        setLoading(true);
118
        CheckIsServiceAdd()
119 120
          .then(resdata1 => {
            setLoading(false);
121
            if (resdata1.code === 0) {
122 123 124 125 126 127 128 129 130 131 132
              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');
              }
133 134 135
            }
          })
          .catch(err => {
136
            message.error('网络异常');
137 138
            setLoading(false);
          });
139
      }
140
    });
皮倩雯's avatar
皮倩雯 committed
141
  };
mayongxin's avatar
mayongxin committed
142

143 144
  const getStatus = (x, y) => {
    // 查询是否禁用
145
    GetServiceInfo()
146
      .then(resdata => {
147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167
        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);
168 169
          }

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

188 189 190 191 192 193 194 195
  // 获取站点编号
  const getSiteCode = () => {
    GetBasicInfo().then(res => {
      if (res.code === 0) {
        setcurrentSiteInfo(res.data);
      }
    });
  };
196

皮倩雯's avatar
皮倩雯 committed
197 198 199 200 201 202 203
  const GetCurentIotVerison = () => {
    GetIOTPlatformVersion().then(res => {
      if (res.data) {
        setCurrentIotVersion(res);
      }
    });
  };
204 205

  // 获取物联平台,EMQ服务地址
皮倩雯's avatar
皮倩雯 committed
206 207 208 209 210 211 212
  const GetIotConfig = () => {
    GetTCPConfigInfo().then(res => {
      if (res.data) {
        let obj = {};
        Object.keys(currentIotConfig).forEach(k => {
          obj[k] = res.data[k];
        });
213
        GetIotVersion({
214 215 216 217 218 219 220
          ip: obj.IotAddress ? obj.IotAddress : '127.0.0.1',
        }).then(resdata => {
          if (resdata.code === 0) {
            if (resdata.data === 'BS') {
              GetGateWay().then(resda => {
                if (resda.code === 0) {
                  if (resda.data === false) {
221
                    setFlag(0);
222 223
                    setGetWayVisible(true);
                  } else {
224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239
                    setFlag(1);
                    getCurrentConfig();
                    getSiteCode();
                    // HealthCheck()
                    //   .then(ress => {
                    //     if (ress.success) {
                    //       setFlag(1);
                    //       getCurrentConfig();
                    //       getSiteCode();
                    //     } else {
                    //       setFlag(0);
                    //     }
                    //   })
                    //   .catch(err => {
                    //     console.log(err);
                    //   });
240 241 242 243 244 245 246 247 248 249
                  }
                }
              });
            } else {
              setFlag(0);
            }
          } else {
            message.error(resdata.msg);
          }
        });
皮倩雯's avatar
皮倩雯 committed
250
        form.setFieldsValue(obj);
251 252 253 254 255 256 257 258 259
        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
260 261 262 263
        setCurrentIotConfig(val => ({ ...val, ...obj }));
      }
    });
  };
264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292

  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);
  };

293 294 295 296 297 298 299 300 301 302 303 304 305 306
  // 物联网升级
  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
307 308 309 310 311 312 313 314 315 316
  const PingIot = ({ ip, values }) => {
    SaveIotConfig({
      tcpAddress: values.TcpAddress,
      iotAddress: values.IotAddress,
      sslSafe: values.SSLSafe,
    });
  };
  const PingIot1 = () => {
    setLoading(true);
    let aa = form.getFieldsValue().IotAddress;
317
    console.log(aa);
皮倩雯's avatar
皮倩雯 committed
318 319 320 321 322 323 324 325 326 327 328 329 330 331 332
    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);
      }
    });
  };
333 334 335

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

皮倩雯's avatar
皮倩雯 committed
390 391 392 393 394 395 396 397 398 399 400
  const SaveIotConfig = config => {
    setLoading(true);
    SaveTcpAddress(config).then(res => {
      setLoading(false);
      if (res.code === 0) {
        message.info('配置保存成功');
      } else {
        message.error(res.msg);
      }
    });
  };
401

402 403 404
  const OperateNginx = checked => {
    if (checked) {
      setSwitchStatus(true);
405
      setLoading(true);
406
      DepositServiceEnable().then(res => {
407
        setLoading(false);
408
        getStatus(currentDataBase.ip, currentDataBase.dbName);
409
        if (res.code === 0) {
410 411 412 413 414 415 416
          // setCurrentConfig(checked);
          message.success(res.msg);
        } else {
          message.error(res.msg);
        }
      });
    } else {
417
      setLoading(true);
418
      DepositServiceDisable().then(res => {
419
        setLoading(false);
420
        if (res.code === 0) {
421 422
          setDbStatus('已禁用');
          setBuStatus('启动');
423 424 425 426 427 428 429 430 431 432
          setProcessLength(0);
          setCurrentConfig(checked);
          message.success(res.msg);
        } else {
          message.error(res.msg);
        }
      });
    }
  };

433 434 435
  const submit = () => {
    window.location.href = `/civmanage/platform/host`;
  };
皮倩雯's avatar
皮倩雯 committed
436 437 438
  return (
    <div className={styles.iot_container}>
      <Card
439
        // title={`物联平台${currentIotVersion.data ? `[${currentIotVersion.data}]` : ''}`}
皮倩雯's avatar
皮倩雯 committed
440 441 442 443 444 445 446 447 448 449 450 451 452 453 454 455 456 457
        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="" />
458
              <span style={{ marginLeft: '10px', fontWeight: 'bold' }}>物联网统一接入平台</span>
459 460 461 462 463 464 465 466 467 468 469 470 471 472 473 474
              {/* <div>
                {getWay === false ? (
                  <>
                    <InfoCircleFilled
                      style={{
                        color: '#faad14',
                        fontSize: '18px',
                        marginLeft: '10px',
                      }}
                    />
                    <span style={{ marginLeft: '5px' }}>请开启网关!</span>
                  </>
                ) : (
                  <></>
                )}
              </div> */}
皮倩雯's avatar
皮倩雯 committed
475 476
            </div>
            <Divider />
477
            <Form.Item style={{ marginLeft: '20px', marginBottom: '0px' }}>
478
              <div style={{ display: 'flex', justifyContent: 'flex-start' }}>
479 480 481 482 483 484 485 486 487 488 489 490 491 492 493 494 495 496 497
                <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>
498
                <Button onClick={() => PingIot1()} style={{ marginLeft: '-88px' }}>
499 500
                  测试连接
                </Button>
501
                {upgrade && (
502
                  <>
503 504 505 506 507 508 509
                    <Button
                      type="primary"
                      onClick={() => PingIotUpdata()}
                      style={{ marginLeft: '25px' }}
                    >
                      平台升级
                    </Button>
510 511 512 513 514 515
                    <Tooltip title="添加物联统一接入平台的子网站,并导入网页菜单数据">
                      <QuestionCircleOutlined
                        style={{ fontSize: '18px', marginLeft: '10px', marginTop: '12px' }}
                      />
                    </Tooltip>
                  </>
516
                )}
皮倩雯's avatar
皮倩雯 committed
517 518 519 520
                <span style={{ display: show1 }}>
                  <img
                    src={Yes}
                    style={{
521
                      height: '24px',
522
                      marginTop: '5px',
523
                      marginLeft: '26px',
皮倩雯's avatar
皮倩雯 committed
524 525 526 527 528 529 530
                    }}
                    alt=""
                  />
                </span>
                <span style={{ display: show2 }}>
                  <CloseCircleFilled
                    style={{
531
                      fontSize: '24px',
532
                      marginTop: '5px',
533
                      marginLeft: '26px',
皮倩雯's avatar
皮倩雯 committed
534 535 536 537
                    }}
                  />
                </span>
              </div>
538
            </Form.Item>
539 540 541 542 543 544 545 546 547 548 549 550 551 552 553 554 555 556 557 558 559 560 561 562 563 564 565 566 567 568 569 570

            <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
571 572 573 574 575 576
                      checkedChildren="开启"
                      unCheckedChildren="关闭"
                      checked={currentConfig}
                      onChange={OperateNginx}
                      style={{ marginLeft: '15px' }}
                      disabled={switchStatus}
577
                    /> */}
578 579 580 581 582 583 584
                    </div>
                  </Form.Item>
                </>
              ) : (
                <></>
              )}
            </div>
585

586 587 588 589 590 591 592 593 594 595 596 597 598 599 600 601 602 603 604 605 606 607 608 609 610 611 612 613 614 615 616 617 618 619 620 621 622 623 624 625 626
            <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
627 628 629
          </Form>
        </Spin>
      </Card>
630 631 632 633
      <Modal
        visible={getWayVisible}
        title="提示"
        width="350px"
634 635 636
        closable
        maskClosable={false}
        onCancel={() => setGetWayVisible(false)}
637
        all
638 639 640 641 642 643 644 645 646 647 648 649 650 651 652 653 654 655 656 657 658 659 660
        footer={
          <Space>
            <Button
              onClick={() => {
                setGetWayVisible(false);
                setActiveKey('5');
              }}
              type="primary"
            >
              好的,去开启
            </Button>
          </Space>
        }
      >
        <InfoCircleFilled
          style={{
            color: '#faad14',
            fontSize: '18px',
            marginRight: '10px',
          }}
        />
        <span>当前网关暂未打开,请前往开启!</span>
      </Modal>
皮倩雯's avatar
皮倩雯 committed
661 662 663 664
    </div>
  );
};
export default IotConfig;