|
@@ -5,7 +5,7 @@
|
|
|
<button @click="zoomIn">放大</button>
|
|
|
<button @click="zoomOut">缩小</button>
|
|
|
<button @click="toggleMapType"
|
|
|
- >切换地图类型({{ mapType === 'BMAP_NORMAL_MAP' ? '地图' : '卫星' }})</button>
|
|
|
+ >切换地图类型({{ mapType === 'BMAP_NORMAL_MAP' ? '地图' : '卫星' }})</button>
|
|
|
</div>
|
|
|
</div>
|
|
|
<DeviceMonitorDrawer :model-value="drawerVisible" @update:model-value="(val) => (drawerVisible = val)" :id="deviceId" :deviceName="deviceName" :lastLineTime="lastLineTime"
|
|
@@ -233,7 +233,8 @@ const showDeviceInfoWindow = (device: IotDeviceVO, point: any) => {
|
|
|
DeptApi.getDept(device.deptId).then(res=>{
|
|
|
dept.value = res.name
|
|
|
const content = `
|
|
|
- <div style="margin-top: 5px">
|
|
|
+<div style="display: flex;flex-direction: column;justify-content: center;border: 1px solid #ccc;">
|
|
|
+ <div style="margin-top: 1px;padding: 8px">
|
|
|
<p><strong>设备编码:</strong> ${device.deviceCode}</p>
|
|
|
<p><strong>设备名称:</strong> ${device.deviceName}</p>
|
|
|
<p><strong>所在部门:</strong> ${res.name}</p>
|
|
@@ -242,19 +243,20 @@ const showDeviceInfoWindow = (device: IotDeviceVO, point: any) => {
|
|
|
<p><strong>是否在线:</strong> ${getDictLabel(DICT_TYPE.IOT_DEVICE_STATUS, device.ifInline)}</p>
|
|
|
<p><strong>最后在线时间:</strong> ${device.lastInlineTime}</p>
|
|
|
</div>
|
|
|
- <div>
|
|
|
+ <div style="margin-bottom: 5px;padding: 8px">
|
|
|
<button id="device-detail-btn" style=" background-color: #2196f3;
|
|
|
color: white;
|
|
|
border: none;
|
|
|
padding: 8px 16px;
|
|
|
border-radius: 4px;
|
|
|
- margin-top: 15px;
|
|
|
+
|
|
|
cursor: pointer;">查看</button>
|
|
|
</div>
|
|
|
+ </div>
|
|
|
`
|
|
|
const infoWindow = new (window as any).BMap.InfoWindow(content, {
|
|
|
width: 350,
|
|
|
- height: 220
|
|
|
+ height: 270
|
|
|
})
|
|
|
map.value.openInfoWindow(infoWindow, point)
|
|
|
|
|
@@ -306,7 +308,14 @@ onMounted(async () => {
|
|
|
|
|
|
onBeforeUnmount(() => {
|
|
|
if (map.value) {
|
|
|
- map.value.destroy()
|
|
|
+ // 清除地图上的覆盖物
|
|
|
+ map.value.clearOverlays();
|
|
|
+ // 移除地图容器中的内容
|
|
|
+ if (mapContainer.value) {
|
|
|
+ mapContainer.value.innerHTML = '';
|
|
|
+ }
|
|
|
+ // 解除地图的事件绑定
|
|
|
+ map.value.removeEventListener('zoomend', initDeviceMarkers);
|
|
|
}
|
|
|
})
|
|
|
|