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 | // 设备信息 | ... | ... |