TileConfig.jsx 10.6 KB
Newer Older
1
/* eslint-disable indent */
2 3 4 5 6 7 8 9 10 11 12
import {
  Space,
  Table,
  Button,
  Popconfirm,
  notification,
  Spin,
  Divider,
  Tooltip,
  Empty,
} from 'antd';
shaoan123's avatar
shaoan123 committed
13
import React, { useState, useEffect } from 'react';
14 15
import { PlusOutlined, UserAddOutlined } from '@ant-design/icons';
import AutoResponsive from 'autoresponsive-react';
16
import styles from '../SchemeConfig.less';
皮倩雯's avatar
皮倩雯 committed
17 18 19 20 21 22
import {
  GettMaplayer,
  deleteConfig,
  GetMaplayerByTerminalType,
  QueryBaseMapItems,
} from '@/services/webConfig/api';
23
import AddModal from './AddModal';
皮倩雯's avatar
皮倩雯 committed
24 25
import EditModal from './EditModal';
import NewEditModal from './NewEditModal';
26 27
import Cards from './card';
import AddProjectModal from './AddProjectModal';
皮倩雯's avatar
皮倩雯 committed
28

29
const TileData = props => {
30 31
  const [treeLoading, setTreeLoading] = useState(false); // 弹窗显示
  const [tileData, setTileData] = useState([]); // table表格数据
32
  const [cardData, setCardData] = useState([]);
33
  const [visible, setVisible] = useState(false); // 弹窗
34
  const [projectVisible, setProjectVisible] = useState(false);
皮倩雯's avatar
皮倩雯 committed
35 36
  const [addVisible, setAddVisible] = useState(false); // 弹窗
  const [editVisible, setEditVisible] = useState(false);
37 38 39
  const [type, setType] = useState(''); // 弹窗类型
  const [formObj, setFormObj] = useState({});
  const [flag, setFlag] = useState(0); // 弹窗类型
40
  const [baseMap, setBaseMap] = useState([]); // 底图数据
皮倩雯's avatar
皮倩雯 committed
41
  const [name, setName] = useState([]);
42 43
  const [flagAdd, setFlagAdd] = useState(0);
  const [type1, setType1] = useState('');
皮倩雯's avatar
皮倩雯 committed
44
  const [json, setJson] = useState([]);
45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63
  const columns = [
    {
      title: '服务名',
      dataIndex: 'servicename',
      key: 'servicename',
      align: 'center',
    },
    {
      title: '标签',
      dataIndex: 'label',
      key: 'label',
      align: 'center',
    },
    {
      title: '类型',
      dataIndex: 'type',
      key: 'type',
      align: 'center',
    },
64 65 66 67 68 69 70
    // {
    //   title: '透明度',
    //   dataIndex: 'alpha',
    //   key: 'alpha',
    //   align: 'center',
    //   render: (text, record) => <span>{`${(text * 100).toFixed()}%`}</span>,
    // },
71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102
    {
      title: '编辑',
      align: 'center',
      render: (text, record) => (
        <Space>
          <Button
            type="primary"
            size="small"
            onClick={() => {
              changebaseMap(record);
            }}
          >
            编辑
          </Button>
          <div onClick={e => e.stopPropagation()}>
            <Popconfirm
              title="是否删除该底图?"
              okText="确认"
              cancelText="取消"
              onConfirm={() => {
                delConfirm(record);
              }}
            >
              <Button size="small" danger>
                删除
              </Button>
            </Popconfirm>
          </div>
        </Space>
      ),
    },
  ];
103 104 105 106 107 108

  useEffect(() => {
    setTreeLoading(true);
    GetMaplayerByTerminalType({
      terminalType: 'baseMapscheme',
      isBaseMap: false,
皮倩雯's avatar
皮倩雯 committed
109 110 111 112 113 114 115 116 117 118
    })
      .then(res => {
        console.log('res', res);
        if (res.code == '0') {
          setTreeLoading(false);
          setCardData(res.data.optionalLayer.layers);
        } else {
          setTreeLoading(false);
        }
      })
119 120 121 122 123 124 125 126 127 128 129 130 131 132
      .catch(err => {
        if (err.message.indexOf('timeout') !== -1) {
          notification.error({
            message: '提示',
            duration: 3,
            description: '请求超时',
          });
        } else {
          notification.error({
            message: '提示',
            duration: 3,
            description: err.message,
          });
        }
133
        setTreeLoading(false);
皮倩雯's avatar
皮倩雯 committed
134
      });
135
  }, [flagAdd]);
136 137 138
  const changebaseMap = record => {
    setType('edit');
    setFormObj(record);
皮倩雯's avatar
皮倩雯 committed
139
    setEditVisible(true);
140 141
  };
  const onSubmit = prop => {
皮倩雯's avatar
皮倩雯 committed
142
    setEditVisible(false);
143
    setFlag(flag + 1);
皮倩雯's avatar
皮倩雯 committed
144
    setAddVisible(false);
145
  };
146

147 148 149 150 151
  const onSubmitProject = prop => {
    setProjectVisible(false);
    setFlagAdd(flagAdd + 1);
  };

152 153 154 155
  const delConfirm = record => {
    const { servicename = '' } = record;
    setTreeLoading(true);
    deleteConfig({
156
      servicename,
157 158 159 160 161
      terminalType: 'base',
      isBaseMap: true,
    })
      .then(res => {
        setFlag(flag + 1);
162
        setFlagAdd(flagAdd + 1);
163
        setTreeLoading(false);
164
        if (res.code == '0') {
165 166 167 168 169 170 171 172 173 174 175 176 177
          // form.resetFields();
          // callBackSubmit();
          notification.success({
            message: '提示',
            duration: 3,
            description: res.message || '删除成功',
          });
        } else {
          notification.error({
            message: '提示',
            duration: 3,
            description: res.message || '删除失败',
          });
178
        }
179 180 181 182 183 184 185
      })
      .catch(err => {
        setFlag(flag + 1);
        setTreeLoading(false);
      });
  };
  const handleAdd = () => {
186 187 188 189 190 191 192 193 194 195 196
    // console.log(baseMap);
    // if (baseMap.length) {
    setType('add');
    setAddVisible(true);
    // } else {
    //   notification.warning({
    //     message: '提示',
    //     duration: 3,
    //     description: '地图类型已都存在,可编辑修改',
    //   });
    // }
197 198 199 200
  };
  useEffect(() => {
    renderTile();
  }, [flag]);
皮倩雯's avatar
皮倩雯 committed
201 202

  useEffect(() => {
203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224
    QueryBaseMapItems()
      .then(res => {
        if (res.code === '0') {
          setJson(res.data);
        }
      })
      .catch(err => {
        if (err.message.indexOf('timeout') !== -1) {
          notification.error({
            message: '提示',
            duration: 3,
            description: '请求超时',
          });
        } else {
          notification.error({
            message: '提示',
            duration: 3,
            description: err.message,
          });
        }
        setTreeLoading(false);
      });
皮倩雯's avatar
皮倩雯 committed
225
  }, []);
226 227 228
  // 获取瓦片数据配置数据
  const renderTile = () => {
    setTreeLoading(true);
皮倩雯's avatar
皮倩雯 committed
229 230 231 232 233 234 235 236
    const baseMapData = [
      // '谷歌地形',
      // '谷歌影像',
      '高德地形',
      '高德影像',
      '天地图地形',
      '天地图影像',
    ];
237 238 239
    GettMaplayer({
      terminalType: 'base',
      isBaseMap: true,
皮倩雯's avatar
皮倩雯 committed
240 241 242 243
    })
      .then(res => {
        if (res.code == '0') {
          setTreeLoading(false);
244
          let newdata = res.data.general.baseMap.layers?.filter(i => i.isVector === 0);
皮倩雯's avatar
皮倩雯 committed
245
          setTileData(newdata);
皮倩雯's avatar
皮倩雯 committed
246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263
          let data = [];
          res.data.general.baseMap.layers.map(item => {
            data.push(item.servicename);
            let index = baseMapData.indexOf(item.servicename);
            if (index != -1) {
              baseMapData.splice(index, 1);
            }
          });
          setName(data);
          setBaseMap(baseMapData);
        } else {
          setTreeLoading(false);
          notification.error({
            message: '获取失败',
            description: res.message,
          });
        }
      })
264 265 266 267 268 269 270 271 272 273 274 275 276 277
      .catch(err => {
        if (err.message.indexOf('timeout') !== -1) {
          notification.error({
            message: '提示',
            duration: 3,
            description: '请求超时',
          });
        } else {
          notification.error({
            message: '提示',
            duration: 3,
            description: err.message,
          });
        }
278
        setTreeLoading(false);
皮倩雯's avatar
皮倩雯 committed
279
      });
280
  };
281

282 283 284 285 286 287 288 289
  const addType = () => {
    setType1('schemeAdd');
    setProjectVisible(true);
  };

  const onDeletebaseMap = value => {
    setFlagAdd(flagAdd + 1);
  };
290
  return (
291
    <div className={styles.tileContainer}>
292
      <div>
293 294 295
        <Spin tip="loading..." spinning={treeLoading}>
          <Divider orientation="left">
            <div className={styles.divider}>
296 297
              基础底图{' '}
              <Tooltip title="新增基础底图">
298 299 300 301 302 303 304 305 306
                <PlusOutlined
                  onClick={() => {
                    handleAdd();
                  }}
                  style={{ marginTop: '5px', marginLeft: '10px', color: '#4699f4' }}
                />
              </Tooltip>
            </div>
          </Divider>
307
          <Table
皮倩雯's avatar
皮倩雯 committed
308
            className={styles.tableTile}
309 310 311 312
            columns={columns}
            dataSource={tileData}
            bordered
            rowKey="servicename"
皮倩雯's avatar
皮倩雯 committed
313 314 315 316
            pagination={{
              showTotal: (total, range) => `第${range[0]}-${range[1]} 条/共 ${total} 条`,
              pageSize: 5,
            }}
317
          />
皮倩雯's avatar
皮倩雯 committed
318
          <Divider orientation="left">
319
            <div className={styles.divider}>
320 321
              分级底图{' '}
              <Tooltip title="新增分级底图">
322 323 324 325 326 327 328 329 330 331 332 333 334 335 336 337 338
                <PlusOutlined
                  onClick={() => {
                    addType();
                  }}
                  style={{ marginTop: '5px', marginLeft: '10px', color: '#4699f4' }}
                />
              </Tooltip>
            </div>{' '}
          </Divider>
          <div className={styles.cardsList1}>
            {/* <AutoResponsive
            itemMargin="10"
            containerWidth="100%"
            itemClassName="item"
            gridWidth="100"
            transitionDuration=".5"
          > */}
339
            {cardData && cardData.length ? (
340 341 342 343 344 345 346 347 348 349 350
              cardData.map((item, index) => (
                <div
                  className={styles.cardItem}
                  key={index}
                  span={5}
                  offset={2}
                  style={{ marginBottom: '1rem' }}
                >
                  <Cards item={item} deletebaseMaps={onDeletebaseMap} cardData={cardData} />
                </div>
              ))
351 352 353
            ) : (
              <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} style={{ margin: 'auto' }} />
            )}
354 355
            {/* </AutoResponsive> */}
          </div>
356

357 358 359 360 361 362 363 364
          <AddModal
            visible={addVisible}
            onCancel={() => setAddVisible(false)}
            callBackSubmit={onSubmit}
            type={type}
            formObj={formObj}
            baseMap={baseMap}
            name={name}
皮倩雯's avatar
皮倩雯 committed
365
            json={json}
366 367 368 369 370 371 372 373 374 375 376 377 378 379 380 381 382
          />
          <EditModal
            visible={visible}
            onCancel={() => setVisible(false)}
            callBackSubmit={onSubmit}
            type={type}
            formObj={formObj}
            baseMap={baseMap}
          />
          <NewEditModal
            visible={editVisible}
            onCancel={() => setEditVisible(false)}
            callBackSubmit={onSubmit}
            type={type}
            formObj={formObj}
            baseMap={baseMap}
            name={name}
皮倩雯's avatar
皮倩雯 committed
383
            json={json}
384 385 386 387 388 389 390 391 392 393
          />
          <AddProjectModal
            visible={projectVisible}
            onCancel={() => setProjectVisible(false)}
            callBackSubmit={onSubmitProject}
            type={type1}
            formObj={formObj}
          />
        </Spin>
      </div>
394
    </div>
395 396 397
  );
};
export default TileData;