projectMessage.jsx 5.75 KB
Newer Older
1 2 3 4
/*
 * @Description:
 * @Author: leizhe
 * @Date: 2022-01-13 10:47:32
5 6
 * @LastEditTime: 2022-10-09 14:07:11
 * @LastEditors: dengchao 754083046@qq.com
7
 */
8
/* eslint-disable indent */
9
import { Button, Spin, Empty, Input } from 'antd';
10
import React, { useState, useEffect } from 'react';
11
import { OrderedListOutlined } from '@ant-design/icons';
12
import styles from '../SchemeConfig.less';
13
import { GetMaplayerByTerminalType, GettMaplayer } from '@/services/webConfig/api';
14 15
import AddModal from './AddModal';
import Cards from './components/card';
16 17
import SortModal from './SortModal';

18
const VectorData = props => {
19 20
  const [treeLoading, setTreeLoading] = useState(false); // 弹窗显示
  const [tileData, setTileData] = useState([]); // 页面初始化数据
21
  const [nameData, setNameData] = useState([]);
22 23
  const [visible, setVisible] = useState(false); // 弹窗
  const [flag, setFlag] = useState(0); // 状态更新
24
  const [cardFlag, setCardFlag] = useState(false); // 状态更新
25 26
  const [type, setType] = useState(''); // 弹窗类型
  const [formObj, setFormObj] = useState({});
27
  const [keepData, setKeepData] = useState([]);
28
  const [sortVisible, setSortVisible] = useState(false);
29 30
  const [searchValue, setSearchValue] = useState('');
  const { Search } = Input;
31

32 33 34 35 36
  const onSubmit = prop => {
    setVisible(false);
    setFlag(flag + 1);
  };
  const onDeletebaseMap = value => {
37
    setCardFlag(false);
38 39 40 41 42 43 44
    setFlag(flag + 1);
  };
  const handleAdd = () => {
    setType('schemeAdd');
    setVisible(true);
  };
  useEffect(() => {
45
    renderTile({ filter: searchValue });
46
  }, [flag]);
47

48
  // 获取瓦片数据配置数据
49
  const renderTile = (params = { filter: '' }) => {
50 51 52 53
    setTreeLoading(true);
    GetMaplayerByTerminalType({
      terminalType: 'scheme',
      isBaseMap: false,
54
      ...params,
55
    }).then(resdata => {
56
      if (resdata.code == '0') {
57
        setTreeLoading(false);
58
        GettMaplayer({ terminalType: 'base', isBaseMap: true }).then(res => {
59
          if (res.code == '0') {
60 61 62 63 64
            let arr = [];
            res.data.general.baseMap.layers.map(i => {
              arr.push(i.servicename);
            });
            setKeepData(arr);
65 66
            let list = [];
            resdata.data.map((j, index) => {
67 68 69 70 71 72 73 74 75
              let data = [];
              let aa = [];
              j.baseMap.map(k => {
                if (arr.indexOf(k) != -1) {
                  data.push(k);
                } else {
                  aa.push(k);
                }
              });
76
              list.push(j.schemename);
77 78
              let bb = aa.concat(data);
              let i = bb.indexOf(j.baseMap[j.defaultBaseMap]);
79 80 81
              resdata.data[index].defaultOldBaseMap = j.baseMap;
              resdata.data[index].baseMap = bb;
              resdata.data[index].defaultBaseMap = i;
82
            });
83 84
            setNameData(list);
            setTileData(resdata.data);
85 86
          }
        });
87 88 89 90 91
      } else {
        setTreeLoading(false);
      }
    });
  };
92 93 94
  useEffect(() => {
    setCardFlag(true);
  }, [tileData]);
95 96 97 98 99 100 101 102

  const onOK = () => {
    setFlag(flag + 1);
  };

  const handleSort = () => {
    setSortVisible(true);
  };
103 104 105 106 107 108 109 110
  // 搜索
  const handleSearch = text => {
    setFlag(flag + 1);
  };
  // 搜索框改变时存储输入的值
  const handleChange = e => {
    setSearchValue(e.target.value);
  };
111

112 113
  return (
    <>
114
      <div className={styles.tileBtn}>
115 116 117 118 119 120 121 122 123 124
        <span style={{ marginLeft: '20px', marginRight: '5px' }}>快速检索</span>
        <Search
          allowClear
          placeholder="请输入方案名或管网"
          onSearch={handleSearch}
          onChange={handleChange}
          value={searchValue}
          enterButton
          style={{ width: '300px', marginRight: '20px' }}
        />
125 126 127 128 129 130 131 132 133 134 135 136
        <Button
          icon={<OrderedListOutlined className={styles.icon} />}
          onClick={() => {
            handleSort();
          }}
          style={{
            verticalAlign: 'middle',
            marginRight: '10px',
          }}
        >
          排序
        </Button>
137 138 139 140 141 142 143 144 145
        <Button
          type="primary"
          onClick={() => {
            handleAdd();
          }}
        >
          新增
        </Button>
      </div>
146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181
      <div className={styles.schemeBox}>
        <Spin tip="loading..." spinning={treeLoading}>
          <div style={{ height: 'calc(100%)', width: '100%' }}>
            <div className={styles.cardsList}>
              {/* {console.log(tileData)} */}
              {tileData && tileData.length ? (
                tileData.map((item, index) => (
                  <div
                    className={styles.cardItem}
                    key={index}
                    span={5}
                    offset={2}
                    style={{ marginBottom: '1rem' }}
                  >
                    <Cards
                      item={item}
                      cardFlag={cardFlag}
                      deletebaseMaps={onDeletebaseMap}
                      keepData={keepData}
                      nameData={nameData}
                    />
                  </div>
                ))
              ) : (
                <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} style={{ margin: 'auto' }} />
              )}
            </div>
            <AddModal
              visible={visible}
              onCancel={() => setVisible(false)}
              callBackSubmit={onSubmit}
              type={type}
              formObj={formObj}
              keepData={keepData}
              nameData={nameData}
            />
182 183 184 185 186 187 188
            <SortModal
              title="调整顺序"
              visible={sortVisible}
              sortData={tileData}
              onCancel={() => setSortVisible(false)}
              callBackSubmit={onOK}
            />
189
          </div>
190 191
        </Spin>
      </div>
192 193 194 195
    </>
  );
};
export default VectorData;