Showing
1 changed file
with
52 additions
and
46 deletions
... | ... | @@ -2,7 +2,7 @@ |
2 | 2 | <div class="wrapper"> |
3 | 3 | <div ref="wrapRef" :style="{ height, width }"> </div> |
4 | 4 | <div class="right-wrap"> |
5 | - <BasicTable @register="registerTable" @rowClick="deviceRowClick"> | |
5 | + <BasicTable style="cursor: pointer" @register="registerTable" @rowClick="deviceRowClick"> | |
6 | 6 | <template #deviceState="{ record }"> |
7 | 7 | <Tag |
8 | 8 | :color=" |
... | ... | @@ -230,24 +230,28 @@ |
230 | 230 | const BMap = (window as any).BMap; |
231 | 231 | const wrapEl = unref(wrapRef); |
232 | 232 | const map = new BMap.Map(wrapEl); |
233 | - if (record.deviceInfo.address) { | |
234 | - keys = await getDeviceDataKeys(entityId); | |
235 | - const { name, organizationDTO, deviceState, deviceProfile } = record; | |
236 | - const { longitude, latitude, address } = record.deviceInfo; | |
237 | - const point = new BMap.Point(longitude, latitude); | |
238 | - let options = { | |
239 | - width: 330, // 信息窗口宽度 | |
240 | - height: 0, // 信息窗口高度 | |
241 | - }; | |
242 | - map.centerAndZoom(point, 15); | |
243 | - map.enableScrollWheelZoom(true); | |
244 | - // 创建信息窗口对象 | |
245 | - const res = await getDeviceActiveTime(entityId); | |
233 | + // if (record.deviceInfo.address) { | |
234 | + keys = await getDeviceDataKeys(entityId); | |
235 | + const { name, organizationDTO, deviceState, deviceProfile } = record; | |
236 | + const { longitude, latitude, address } = record.deviceInfo; | |
237 | + //这里如果没有地理位置 最好设置一个默认位置 不然地图会全蓝 | |
238 | + const point = new BMap.Point( | |
239 | + longitude == '' ? 104.04666605565338 : longitude, | |
240 | + latitude == '' ? 30.543516387560476 : latitude | |
241 | + ); | |
242 | + let options = { | |
243 | + width: 330, // 信息窗口宽度 | |
244 | + height: 0, // 信息窗口高度 | |
245 | + }; | |
246 | + map.centerAndZoom(point, 15); | |
247 | + map.enableScrollWheelZoom(true); | |
248 | + // 创建信息窗口对象 | |
249 | + const res = await getDeviceActiveTime(entityId); | |
246 | 250 | |
247 | - let { value: activeStatus, lastUpdateTs } = res[0]; | |
248 | - lastUpdateTs = moment(lastUpdateTs).format('YYYY-MM-DD HH:mm:ss'); | |
249 | - let infoWindow = new BMap.InfoWindow( | |
250 | - ` | |
251 | + let { value: activeStatus, lastUpdateTs } = res[0]; | |
252 | + lastUpdateTs = moment(lastUpdateTs).format('YYYY-MM-DD HH:mm:ss'); | |
253 | + let infoWindow = new BMap.InfoWindow( | |
254 | + ` | |
251 | 255 | <div style="display:flex;justify-content:space-between; margin:20px 0px;"> |
252 | 256 | <div style="font-size:16px;font-weight:bold">${name}</div> |
253 | 257 | ${ |
... | ... | @@ -261,43 +265,45 @@ |
261 | 265 | </div> |
262 | 266 | <div>所属组织:${organizationDTO.name}</div> |
263 | 267 | <div style="margin-top:6px;">接入协议:${deviceProfile.transportType}</div> |
264 | - <div style="margin-top:6px;">设备位置:${address}</div> | |
268 | + <div style="margin-top:6px;">设备位置:${ | |
269 | + address == '' ? '该设备暂无地理位置' : address | |
270 | + }</div> | |
265 | 271 | <div style="margin-top:6px;">${activeStatus ? '在' : '离'}线时间:${lastUpdateTs}</div> |
266 | 272 | <div style="display:flex;justify-content:end; margin-top:10px"> |
267 | 273 | <button onclick="openDeviceInfoDrawer()" style="margin-right:10px;color:#fff;background-color:#409eff;padding:4px; border-radius:4px;">设备信息</button> |
268 | 274 | <button onclick="openHistoryModal()" style="color:#fff;background-color:#409eff;padding:4px; border-radius:4px;">历史数据</button> |
269 | 275 | </div> |
270 | 276 | `, |
271 | - options | |
272 | - ); | |
277 | + options | |
278 | + ); | |
273 | 279 | |
274 | - map.openInfoWindow(infoWindow, map.getCenter()); | |
275 | - let preMarker = null; | |
280 | + map.openInfoWindow(infoWindow, map.getCenter()); | |
281 | + let preMarker = null; | |
276 | 282 | |
277 | - const rivet = deviceState === 'INACTIVE' ? djx : deviceState === 'ONLINE' ? zx : lx; | |
278 | - let myIcon = new BMap.Icon(rivet, new BMap.Size(20, 30)); | |
279 | - let marker = new BMap.Marker(point, { icon: myIcon }); | |
280 | - if (marker) { | |
281 | - map.removeOverlay(preMarker); | |
282 | - } | |
283 | - map.addOverlay(marker); | |
284 | - //标注监听事件 | |
285 | - marker.addEventListener('click', function () { | |
286 | - map.openInfoWindow(infoWindow, map.getCenter()); | |
287 | - }); | |
288 | - //标注监听事件 | |
289 | - } else { | |
290 | - const point = new BMap.Point(106.63028229687498, 36.06735821600903); | |
291 | - let options = { | |
292 | - width: 100, // 信息窗口宽度 | |
293 | - height: 100, // 信息窗口高度 | |
294 | - title: '提示', // 信息窗口标题 | |
295 | - }; | |
296 | - map.centerAndZoom(point, 5); | |
297 | - map.enableScrollWheelZoom(true); | |
298 | - let infoWindow = new BMap.InfoWindow('该设备暂无地理位置', options); // 创建信息窗口对象 | |
299 | - map.openInfoWindow(infoWindow, map.getCenter()); | |
283 | + const rivet = deviceState === 'INACTIVE' ? djx : deviceState === 'ONLINE' ? zx : lx; | |
284 | + let myIcon = new BMap.Icon(rivet, new BMap.Size(20, 30)); | |
285 | + let marker = new BMap.Marker(point, { icon: myIcon }); | |
286 | + if (marker) { | |
287 | + map.removeOverlay(preMarker); | |
300 | 288 | } |
289 | + map.addOverlay(marker); | |
290 | + //标注监听事件 | |
291 | + marker.addEventListener('click', function () { | |
292 | + map.openInfoWindow(infoWindow, map.getCenter()); | |
293 | + }); | |
294 | + //标注监听事件 | |
295 | + // } else { | |
296 | + // const point = new BMap.Point(106.63028229687498, 36.06735821600903); | |
297 | + // let options = { | |
298 | + // width: 100, // 信息窗口宽度 | |
299 | + // height: 100, // 信息窗口高度 | |
300 | + // title: '提示', // 信息窗口标题 | |
301 | + // }; | |
302 | + // map.centerAndZoom(point, 5); | |
303 | + // map.enableScrollWheelZoom(true); | |
304 | + // let infoWindow = new BMap.InfoWindow('该设备暂无地理位置', options); // 创建信息窗口对象 | |
305 | + // map.openInfoWindow(infoWindow, map.getCenter()); | |
306 | + // } | |
301 | 307 | }; |
302 | 308 | |
303 | 309 | // 设备信息 | ... | ... |