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

25 26 27 28 29
  const onSubmit = prop => {
    setVisible(false);
    setFlag(flag + 1);
  };
  const onDeletebaseMap = value => {
30
    setCardFlag(false);
31 32 33 34 35 36 37
    setFlag(flag + 1);
  };
  const handleAdd = () => {
    setType('schemeAdd');
    setVisible(true);
  };
  useEffect(() => {
38
    console.log(1212);
39 40
    renderTile();
  }, [flag]);
41

42 43 44 45 46 47
  // 获取瓦片数据配置数据
  const renderTile = () => {
    setTreeLoading(true);
    GetMaplayerByTerminalType({
      terminalType: 'scheme',
      isBaseMap: false,
48
    }).then(resdata => {
49 50 51
      console.log(123);
      if (resdata.code == 0) {
        console.log(333);
52
        setTreeLoading(false);
53
        GettMaplayer({ terminalType: 'base', isBaseMap: true }).then(res => {
54 55 56 57 58 59 60 61 62
          if (res.code == 0) {
            console.log(666);
            let arr = [];
            res.data.general.baseMap.layers.map(i => {
              console.log(i);
              arr.push(i.servicename);
            });
            console.log(arr);
            setKeepData(arr);
63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81
            resdata.data.scheme.optionalLayer.layers.map((j, index) => {
              let data = [];
              let aa = [];
              j.baseMap.map(k => {
                if (arr.indexOf(k) != -1) {
                  data.push(k);
                } else {
                  aa.push(k);
                }
              });
              let bb = aa.concat(data);
              let i = bb.indexOf(j.baseMap[j.defaultBaseMap]);
              resdata.data.scheme.optionalLayer.layers[index].defaultOldBaseMap = j.baseMap;
              resdata.data.scheme.optionalLayer.layers[index].baseMap = bb;
              resdata.data.scheme.optionalLayer.layers[index].defaultBaseMap = i;
            });
            setTileData(resdata.data.scheme.optionalLayer.layers);
          }
        });
82
      } else {
83
        console.log(3456);
84 85 86 87
        setTreeLoading(false);
      }
    });
  };
88 89 90
  useEffect(() => {
    setCardFlag(true);
  }, [tileData]);
91 92
  return (
    <>
93 94 95 96 97 98 99 100 101 102
      <div className={styles.tileBtn}>
        <Button
          type="primary"
          onClick={() => {
            handleAdd();
          }}
        >
          新增
        </Button>
      </div>
103
      <Spin tip="loading..." spinning={treeLoading}>
104
        <div style={{ height: 'calc(100vh - 216px)', width: '100%' }}>
105
          <div className={styles.cardsList}>
106
            {/* {console.log(tileData)} */}
107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128
            {tileData && tileData.length ? (
              tileData.map((item, index) => {
                return (
                  <div
                    className={styles.cardItem}
                    key={index}
                    span={5}
                    offset={2}
                    style={{ marginBottom: '1rem' }}
                  >
                    <Cards
                      item={item}
                      cardFlag={cardFlag}
                      deletebaseMaps={onDeletebaseMap}
                      keepData={keepData}
                    />
                  </div>
                );
              })
            ) : (
              <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} style={{ margin: 'auto' }} />
            )}
129 130 131 132 133 134 135
          </div>
          <AddModal
            visible={visible}
            onCancel={() => setVisible(false)}
            callBackSubmit={onSubmit}
            type={type}
            formObj={formObj}
136
            keepData={keepData}
137 138 139 140 141 142 143
          />
        </div>
      </Spin>
    </>
  );
};
export default VectorData;