projectMessage.jsx 6.24 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, notification } 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 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81
    })
      .then(resdata => {
        if (resdata.code == '0') {
          GettMaplayer({ terminalType: 'base', isBaseMap: true }).then(res => {
            if (res.code == '0') {
              let arr = [];
              res.data.general.baseMap.layers.map(i => {
                arr.push(i.servicename);
              });
              setKeepData(arr);
              let list = [];
              resdata.data.map((j, index) => {
                let data = [];
                let aa = [];
                j.baseMap.map(k => {
                  if (arr.indexOf(k) != -1) {
                    data.push(k);
                  } else {
                    aa.push(k);
                  }
                });
                list.push(j.schemename);
                let bb = aa.concat(data);
                let i = bb.indexOf(j.baseMap[j.defaultBaseMap]);
                resdata.data[index].defaultOldBaseMap = j.baseMap;
                resdata.data[index].baseMap = bb;
                resdata.data[index].defaultBaseMap = i;
82
              });
83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105
              setNameData(list);
              setTileData(resdata.data);
              setTreeLoading(false);
            }
          });
        } else {
          setTreeLoading(false);
        }
      })
      .catch(err => {
        if (err.message.indexOf('timeout') !== -1) {
          notification.error({
            message: '提示',
            duration: 3,
            description: '请求超时',
          });
        } else {
          notification.error({
            message: '提示',
            duration: 3,
            description: err.message,
          });
        }
106
        setTreeLoading(false);
107
      });
108
  };
109 110 111
  useEffect(() => {
    setCardFlag(true);
  }, [tileData]);
112 113 114 115 116 117 118 119

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

  const handleSort = () => {
    setSortVisible(true);
  };
120 121 122 123 124 125 126 127
  // 搜索
  const handleSearch = text => {
    setFlag(flag + 1);
  };
  // 搜索框改变时存储输入的值
  const handleChange = e => {
    setSearchValue(e.target.value);
  };
128

129 130
  return (
    <>
131
      <div className={styles.tileBtn}>
132 133 134 135 136 137 138 139 140 141
        <span style={{ marginLeft: '20px', marginRight: '5px' }}>快速检索</span>
        <Search
          allowClear
          placeholder="请输入方案名或管网"
          onSearch={handleSearch}
          onChange={handleChange}
          value={searchValue}
          enterButton
          style={{ width: '300px', marginRight: '20px' }}
        />
142 143 144 145 146 147 148 149 150 151 152 153
        <Button
          icon={<OrderedListOutlined className={styles.icon} />}
          onClick={() => {
            handleSort();
          }}
          style={{
            verticalAlign: 'middle',
            marginRight: '10px',
          }}
        >
          排序
        </Button>
154 155 156 157 158 159 160 161 162
        <Button
          type="primary"
          onClick={() => {
            handleAdd();
          }}
        >
          新增
        </Button>
      </div>
163 164 165 166 167
      <div className={styles.schemeBox}>
        <Spin tip="loading..." spinning={treeLoading}>
          <div style={{ height: 'calc(100%)', width: '100%' }}>
            <div className={styles.cardsList}>
              {/* {console.log(tileData)} */}
168
              {tileData.length > 0 ? (
169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198
                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}
            />
199 200 201 202 203 204 205
            <SortModal
              title="调整顺序"
              visible={sortVisible}
              sortData={tileData}
              onCancel={() => setSortVisible(false)}
              callBackSubmit={onOK}
            />
206
          </div>
207 208
        </Spin>
      </div>
209 210 211 212
    </>
  );
};
export default VectorData;