projectMessage.jsx 2.65 KB
Newer Older
1 2 3 4 5 6 7
/*
 * @Description:
 * @Author: leizhe
 * @Date: 2022-01-13 10:47:32
 * @LastEditTime: 2022-03-25 10:29:20
 * @LastEditors: leizhe
 */
8 9
/* eslint-disable indent */
import { Button, Spin } from 'antd';
10
import React, { useState, useEffect } from 'react';
11 12 13 14
import styles from '../dimensionsConfig.less';
import { GetSchemaInfoList } from '@/services/webConfig/api';
import AddModal from './AddModal';
import Cards from './components/card';
15
const VectorData = props => {
16 17 18 19 20 21
  const [treeLoading, setTreeLoading] = useState(false); // 弹窗显示
  const [tileData, setTileData] = useState([]); // 页面初始化数据
  const [visible, setVisible] = useState(false); // 弹窗
  const [flag, setFlag] = useState(0); // 状态更新
  const [type, setType] = useState(''); // 弹窗类型
  const [formObj, setFormObj] = useState({});
22

23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51
  const onSubmit = prop => {
    setVisible(false);
    setFlag(flag + 1);
  };
  const onDeletebaseMap = value => {
    setFlag(flag + 1);
  };
  const handleAdd = () => {
    setType('schemeAdd');
    setVisible(true);
  };
  useEffect(() => {
    renderTile();
  }, [flag]);
  // 获取瓦片数据配置数据
  const renderTile = () => {
    setTreeLoading(true);
    GetSchemaInfoList().then(res => {
      if (res.msg === 'Ok') {
        setTreeLoading(false);
        setTileData(res.data);
      } else {
        setTreeLoading(false);
      }
    });
  };
  return (
    <>
      <Spin tip="loading..." spinning={treeLoading}>
52
        <div>
53 54 55 56 57 58 59 60 61 62
          <div className={styles.tileBtn}>
            <Button
              type="primary"
              onClick={() => {
                handleAdd();
              }}
            >
              新增
            </Button>
          </div>
63
          <div style={{ height: 'calc(100vh - 230px)', overflow: 'scroll' }}>
64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80
            <div className={styles.cardsList}>
              {tileData && tileData.length
                ? tileData.map((item, index) => {
                    return (
                      <div
                        className={styles.cardItem}
                        key={index}
                        span={5}
                        offset={2}
                        style={{ marginBottom: '1rem' }}
                      >
                        <Cards item={item} deletebaseMaps={onDeletebaseMap} />
                      </div>
                    );
                  })
                : ''}
            </div>
81 82 83 84 85 86 87 88 89 90 91 92 93 94
          </div>
          <AddModal
            visible={visible}
            onCancel={() => setVisible(false)}
            callBackSubmit={onSubmit}
            type={type}
            formObj={formObj}
          />
        </div>
      </Spin>
    </>
  );
};
export default VectorData;