Commit 6f25bf589a4cba37232b3a08dfaaf81d07e061fa

Authored by fengtao
1 parent 206cacba

fix:修改地理位置 地图弹窗提示问题

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