CurrentSolution.jsx 4.71 KB
Newer Older
1 2
import React, { useState, useEffect } from 'react';
import { Select, Card, Row, Col, Button, Spin, notification } from 'antd';
3
import PageContainer from '@/components/BasePageContainer';
4 5 6 7 8
import {
  getSolutionList,
  changeSolution,
  publishGetSolutionList,
} from '@/services/database/api';
9 10 11
import styles from './CurrentSolution.less';
const { Option } = Select;
const CurrentSolution = () => {
12 13
  const [currentData, setCurrentData] = useState(''); // 解决方案的值
  const [dataList, setDataList] = useState([]); // 下拉数组
14
  const [loading, setLoading] = useState(false);
15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32
  // useEffect(() => {
  //   setLoading(true);
  //   getSolutionList({
  //     _version: 9999,
  //     _dc: new Date().getTime(),
  //   })
  //     .then(res => {
  //       setLoading(false);
  //       if (res.success) {
  //         setCurrentData(res.currentSolution);
  //         setDataList(res.solutions);
  //       }
  //     })
  //     .catch(err => {
  //       setLoading(false);
  //       console.error(err);
  //     });
  // }, []);
33
  useEffect(() => {
34 35 36
    newGetSolution();
  }, []);
  const newGetSolution = () => {
37
    setLoading(true);
38
    publishGetSolutionList({
39 40 41 42
      _version: 9999,
      _dc: new Date().getTime(),
    })
      .then(res => {
43 44 45 46
        if (res.code === 0) {
          const { currentSolution, solutions } = res.data;
          setCurrentData(currentSolution);
          setDataList(solutions);
47 48
        }
      })
49
      .finally(() => {
50 51
        setLoading(false);
      });
52
  };
53
  // 切换解决方案
54 55 56
  const handleSelect = e => {
    setCurrentData(e);
  };
57
  // 提交配置信息
58 59 60 61 62 63 64 65 66 67 68 69
  const submit = params => {
    setLoading(true);
    changeSolution({
      solution: currentData,
      _version: 9999,
      _dc: new Date().getTime(),
    })
      .then(res => {
        setLoading(false);
        if (res.success) {
          notification.success({
            message: '提示',
70
            description: res.message || '切换成功',
71 72 73 74 75
            duration: 3,
          });
        } else {
          notification.error({
            message: '提示',
76
            description: res.message || '切换失败',
Maofei94's avatar
Maofei94 committed
77
            duration: 15,
78 79 80 81 82
          });
        }
      })
      .catch(err => {
        setLoading(false);
Maofei94's avatar
Maofei94 committed
83
        console.error(err);
84 85 86 87 88 89 90 91
      });
  };
  return (
    <PageContainer>
      <Card className={styles.cardbox}>
        <Spin tip="Loading..." spinning={loading} className={styles.tAlign}>
          <Row>
            <Col span={2} className={styles.divbox}>
Maofei94's avatar
Maofei94 committed
92
              <div>切换解决方案:</div>
93
            </Col>
Maofei94's avatar
Maofei94 committed
94
            <Col span={22}>
95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113
              {currentData && (
                <Select
                  style={{ width: '100%' }}
                  placeholder="请切换解决方案"
                  defaultValue={currentData}
                  onChange={e => {
                    handleSelect(e);
                  }}
                >
                  {dataList &&
                    dataList.map((item, index) => (
                      <Option value={item} key={`item${index}`}>
                        {item}
                      </Option>
                    ))}
                </Select>
              )}
            </Col>
          </Row>
Maofei94's avatar
Maofei94 committed
114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137
          <div className={styles.textBox}>
            <p>
              <strong>友情提示:</strong>
            </p>
            <p>
              熊猫智慧水务应用解决方案的管理,集成了数据库管理、用户权限管理、基础平台管理、应用中心管理、系统日志管理等核心模块;
            </p>
            <p>
              主要为客户项目经理在实施应用部署的过程中提供可视化配置系统,一站式交付用户需求的熊猫智慧水务相关产品;
            </p>
            <p>
              数据库支持SQL Server、Oracle、MongoDB、MySQL四大类常见数据库;
            </p>
            <p>
              平台中心涵盖GIS平台、物联网平台、业务平台、消息平台等基础平台,2021年会推出数字孪生平台、数据治理平台、AI平台等进阶平台;
            </p>
            {/* 无线App端、微信小程序端 */}
            <p>
              应用中心主要把客户应用按端分离,分为PCWeb端、移动应用端,结合应用界面与菜单权限配置完成;
            </p>
            <p>
              用户中心负责管理用户与平台的关系、用户与端的关系、用户与功能菜单的关系、用户与设备的关系。
            </p>
          </div>
138 139 140 141 142 143 144 145 146 147 148 149
          <div className={styles.btnBox}>
            <Button type="primary" onClick={() => submit()}>
              提交
            </Button>
          </div>
        </Spin>
      </Card>
    </PageContainer>
  );
};

export default CurrentSolution;