1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
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
82
83
84
85
86
87
88
89
90
91
92
93
94
/*
* @Description:
* @Author: leizhe
* @Date: 2022-01-13 10:47:32
* @LastEditTime: 2022-03-25 10:29:20
* @LastEditors: leizhe
*/
/* eslint-disable indent */
import { Button, Spin } from 'antd';
import React, { useState, useEffect } from 'react';
import styles from '../dimensionsConfig.less';
import { GetSchemaInfoList } 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 [visible, setVisible] = useState(false); // 弹窗
const [flag, setFlag] = useState(0); // 状态更新
const [type, setType] = useState(''); // 弹窗类型
const [formObj, setFormObj] = useState({});
const onSubmit = prop => {
setVisible(false);
setFlag(flag + 1);
};
const onDeletebaseMap = value => {
setFlag(flag + 1);
};
const handleAdd = () => {
setType('schemeAdd');
setVisible(true);
};
useEffect(() => {
renderTile();
}, [flag]);
// 获取瓦片数据配置数据
const renderTile = () => {
setTreeLoading(true);
GetSchemaInfoList().then(res => {
if (res.msg === 'Ok') {
setTreeLoading(false);
setTileData(res.data);
} else {
setTreeLoading(false);
}
});
};
return (
<>
<Spin tip="loading..." spinning={treeLoading}>
<div>
<div className={styles.tileBtn}>
<Button
type="primary"
onClick={() => {
handleAdd();
}}
>
新增
</Button>
</div>
<div style={{ height: 'calc(100vh - 230px)', overflow: 'scroll' }}>
<div className={styles.cardsList}>
{tileData && tileData.length
? tileData.map((item, index) => {
return (
<div
className={styles.cardItem}
key={index}
span={5}
offset={2}
style={{ marginBottom: '1rem' }}
>
<Cards item={item} deletebaseMaps={onDeletebaseMap} />
</div>
);
})
: ''}
</div>
</div>
<AddModal
visible={visible}
onCancel={() => setVisible(false)}
callBackSubmit={onSubmit}
type={type}
formObj={formObj}
/>
</div>
</Spin>
</>
);
};
export default VectorData;