...
|
...
|
@@ -155,54 +155,55 @@ |
155
|
155
|
showSizeChanger: true,
|
156
|
156
|
},
|
157
|
157
|
afterFetch: async (data: DeviceInfo[]) => {
|
158
|
|
- Promise.resolve().then(() => {
|
159
|
|
- const BMap = (window as any).BMap;
|
160
|
|
- unref(BMapInstance).clearOverlays();
|
161
|
|
- const markerList: MarkerList[] = [];
|
162
|
|
- data.forEach((item) => {
|
163
|
|
- const {
|
164
|
|
- name,
|
165
|
|
- deviceState,
|
166
|
|
- deviceInfo: { longitude, latitude },
|
167
|
|
- } = item;
|
168
|
|
- const point = new BMap.Point(longitude, latitude);
|
169
|
|
- const rivet = deviceState === 'INACTIVE' ? djx : deviceState === 'ONLINE' ? zx : lx;
|
170
|
|
- const myIcon = new BMap.Icon(rivet, new BMap.Size(20, 30));
|
171
|
|
- const marker = new BMap.Marker(point, { icon: myIcon });
|
172
|
|
- const label = new BMap.Label(name, {
|
173
|
|
- position: point,
|
174
|
|
- offset: new BMap.Size(-15, -45),
|
175
|
|
- });
|
176
|
|
- label.setStyle({
|
177
|
|
- color: '#000',
|
178
|
|
- borderRadius: '5px',
|
179
|
|
- borderColor: '#ccc',
|
180
|
|
- padding: '5px',
|
181
|
|
- });
|
182
|
|
- markerList.push({ ...item, marker, label });
|
183
|
|
- });
|
184
|
|
-
|
185
|
|
- markerList.forEach((record) => {
|
186
|
|
- unref(BMapInstance).addOverlay(record.marker);
|
187
|
|
- unref(BMapInstance).addOverlay(record.label);
|
188
|
|
- const isAlarmStatus = !!record.alarmStatus;
|
189
|
|
- if (isAlarmStatus) {
|
190
|
|
- const alarmStatusClassName = 'device-status__alarm';
|
191
|
|
- const className = record.marker.Ec.getAttribute('class');
|
192
|
|
- record.marker.Ec.setAttribute('class', `${className} ${alarmStatusClassName}`);
|
193
|
|
- }
|
194
|
|
-
|
195
|
|
- //标注监听事件
|
196
|
|
- record.marker.addEventListener('click', function () {
|
197
|
|
- createDeviceInfoWindow(record);
|
198
|
|
- });
|
199
|
|
- });
|
200
|
|
- });
|
201
|
|
-
|
|
158
|
+ asyncFn(data);
|
202
|
159
|
return data;
|
203
|
160
|
},
|
204
|
161
|
});
|
205
|
162
|
|
|
163
|
+ async function asyncFn(data: DeviceInfo[]) {
|
|
164
|
+ const BMap = (window as any).BMap;
|
|
165
|
+ unref(BMapInstance)?.clearOverlays();
|
|
166
|
+ const markerList: MarkerList[] = [];
|
|
167
|
+ data.forEach((item) => {
|
|
168
|
+ const {
|
|
169
|
+ name,
|
|
170
|
+ deviceState,
|
|
171
|
+ deviceInfo: { longitude, latitude },
|
|
172
|
+ } = item;
|
|
173
|
+ const point = new BMap.Point(longitude, latitude);
|
|
174
|
+ const rivet = deviceState === 'INACTIVE' ? djx : deviceState === 'ONLINE' ? zx : lx;
|
|
175
|
+ const myIcon = new BMap.Icon(rivet, new BMap.Size(20, 30));
|
|
176
|
+ const marker = new BMap.Marker(point, { icon: myIcon });
|
|
177
|
+ const label = new BMap.Label(name, {
|
|
178
|
+ position: point,
|
|
179
|
+ offset: new BMap.Size(-15, -45),
|
|
180
|
+ });
|
|
181
|
+ label.setStyle({
|
|
182
|
+ color: '#000',
|
|
183
|
+ borderRadius: '5px',
|
|
184
|
+ borderColor: '#ccc',
|
|
185
|
+ padding: '5px',
|
|
186
|
+ });
|
|
187
|
+ markerList.push({ ...item, marker, label });
|
|
188
|
+ });
|
|
189
|
+
|
|
190
|
+ markerList.forEach((record) => {
|
|
191
|
+ unref(BMapInstance).addOverlay(record.marker);
|
|
192
|
+ unref(BMapInstance).addOverlay(record.label);
|
|
193
|
+ const isAlarmStatus = !!record.alarmStatus;
|
|
194
|
+ if (isAlarmStatus) {
|
|
195
|
+ const alarmStatusClassName = 'device-status__alarm';
|
|
196
|
+ const className = record.marker.Ec.getAttribute('class');
|
|
197
|
+ record.marker.Ec.setAttribute('class', `${className} ${alarmStatusClassName}`);
|
|
198
|
+ }
|
|
199
|
+
|
|
200
|
+ //标注监听事件
|
|
201
|
+ record.marker.addEventListener('click', function () {
|
|
202
|
+ createDeviceInfoWindow(record);
|
|
203
|
+ });
|
|
204
|
+ });
|
|
205
|
+ }
|
|
206
|
+
|
206
|
207
|
async function initMap() {
|
207
|
208
|
await toPromise();
|
208
|
209
|
await nextTick();
|
...
|
...
|
|