/* * @Description: * @Author: leizhe * @Date: 2022-01-13 10:47:32 * @LastEditTime: 2022-10-09 14:07:11 * @LastEditors: dengchao 754083046@qq.com */ /* eslint-disable indent */ import { Button, Spin, Empty } from 'antd'; import React, { useState, useEffect } from 'react'; import styles from '../SchemeConfig.less'; import { GetMaplayerByTerminalType, GettMaplayer } from '@/services/webConfig/api'; import AddModal from './AddModal'; import Cards from './components/card'; const VectorData = props => { const [treeLoading, setTreeLoading] = useState(false); // 弹窗显示 const [tileData, setTileData] = useState([]); // 页面初始化数据 const [nameData, setNameData] = useState([]); const [visible, setVisible] = useState(false); // 弹窗 const [flag, setFlag] = useState(0); // 状态更新 const [cardFlag, setCardFlag] = useState(false); // 状态更新 const [type, setType] = useState(''); // 弹窗类型 const [formObj, setFormObj] = useState({}); const [keepData, setKeepData] = useState([]); const onSubmit = prop => { setVisible(false); setFlag(flag + 1); }; const onDeletebaseMap = value => { setCardFlag(false); setFlag(flag + 1); }; const handleAdd = () => { setType('schemeAdd'); setVisible(true); }; useEffect(() => { console.log(1212); renderTile(); }, [flag]); // 获取瓦片数据配置数据 const renderTile = () => { setTreeLoading(true); GetMaplayerByTerminalType({ terminalType: 'scheme', isBaseMap: false, }).then(resdata => { if (resdata.code == '0') { setTreeLoading(false); GettMaplayer({ terminalType: 'base', isBaseMap: true }).then(res => { if (res.code == '0') { let arr = []; res.data.general.baseMap.layers.map(i => { console.log(i); arr.push(i.servicename); }); console.log(arr); setKeepData(arr); let list = []; console.log(resdata.data); 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); console.log(aa); console.log(data); let bb = aa.concat(data); console.log(bb); let i = bb.indexOf(j.baseMap[j.defaultBaseMap]); resdata.data[index].defaultOldBaseMap = j.baseMap; resdata.data[index].baseMap = bb; resdata.data[index].defaultBaseMap = i; }); console.log(list); setNameData(list); console.log(resdata.data); setTileData(resdata.data); } }); } else { console.log(3456); setTreeLoading(false); } }); }; useEffect(() => { setCardFlag(true); }, [tileData]); return ( <> <div className={styles.tileBtn}> <Button type="primary" onClick={() => { handleAdd(); }} > 新增 </Button> </div> <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} /> </div> </Spin> </div> </> ); }; export default VectorData;