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
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
/*
* @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;