<script lang="ts" setup>
|
import type { NumberDictDataType } from '..\..\..\..\packages\effects\hooks\src';
|
|
import type { IotDeviceApi } from '#/api/iot/device/device';
|
|
import { computed, nextTick, onMounted, onUnmounted, ref } from 'vue';
|
import { useRouter } from 'vue-router';
|
|
import { DeviceStateEnum, DICT_TYPE } from '..\..\..\..\packages\constants\src';
|
import { getDictLabel, getDictOptions } from '..\..\..\..\packages\effects\hooks\src';
|
|
import { Card, Empty, Spin } from 'ant-design-vue';
|
|
import { getDeviceLocationList } from '#/api/iot/device/device';
|
import { loadBaiduMapSdk } from '#/components/map';
|
|
defineOptions({ name: 'DeviceMapCard' });
|
|
const router = useRouter();
|
const mapContainerRef = ref<HTMLElement>(); // 地图容器节点
|
let mapInstance: any = null; // 百度地图实例
|
const loading = ref(true); // 加载状态
|
const deviceList = ref<IotDeviceApi.Device[]>([]); // 设备分布列表
|
|
const hasData = computed(() => deviceList.value.length > 0); // 是否有数据
|
|
const stateOptions = computed(
|
() =>
|
getDictOptions(
|
DICT_TYPE.IOT_DEVICE_STATE,
|
'number',
|
) as NumberDictDataType[],
|
); // 状态图例列表（从字典获取）
|
|
const stateColorMap: Record<number, string> = {
|
[DeviceStateEnum.INACTIVE]: '#EAB308', // 待激活 - 黄色
|
[DeviceStateEnum.ONLINE]: '#22C55E', // 在线 - 绿色
|
[DeviceStateEnum.OFFLINE]: '#9CA3AF', // 离线 - 灰色
|
}; // 设备状态颜色映射
|
|
/** 获取设备状态配置；名称走字典，颜色用本地映射 */
|
function getStateConfig(state: number): { color: string; name: string } {
|
return {
|
name: getDictLabel(DICT_TYPE.IOT_DEVICE_STATE, state) || '未知',
|
color: stateColorMap[state] || '#909399',
|
};
|
}
|
|
/** 创建自定义标记点图标 */
|
function createMarkerIcon(color: string, isOnline: boolean) {
|
const size = isOnline ? 24 : 20;
|
const svg = `
|
<svg xmlns="http://www.w3.org/2000/svg" width="${size}" height="${size}" viewBox="0 0 24 24">
|
<circle cx="12" cy="12" r="8" fill="${color}" stroke="white" stroke-width="2"/>
|
${isOnline ? `<circle cx="12" cy="12" r="10" fill="none" stroke="${color}" stroke-width="2" opacity="0.5"/>` : ''}
|
</svg>
|
`;
|
const blob = new Blob([svg], { type: 'image/svg+xml' });
|
const url = URL.createObjectURL(blob);
|
return new window.BMapGL.Icon(url, new window.BMapGL.Size(size, size), {
|
anchor: new window.BMapGL.Size(size / 2, size / 2),
|
});
|
}
|
|
/** 初始化地图 */
|
function initMap() {
|
if (!mapContainerRef.value || !window.BMapGL) {
|
return;
|
}
|
|
// 销毁旧实例
|
if (mapInstance) {
|
mapInstance.destroy?.();
|
mapInstance = null;
|
}
|
|
// 创建地图实例，默认以中国为中心
|
mapInstance = new window.BMapGL.Map(mapContainerRef.value);
|
mapInstance.centerAndZoom(new window.BMapGL.Point(106, 37.5), 5);
|
mapInstance.enableScrollWheelZoom();
|
|
// 添加控件
|
mapInstance.addControl(new window.BMapGL.ScaleControl());
|
mapInstance.addControl(new window.BMapGL.ZoomControl());
|
|
// 添加设备标记点
|
deviceList.value.forEach((device) => {
|
const config = getStateConfig(device.state!);
|
const isOnline = device.state === DeviceStateEnum.ONLINE;
|
const point = new window.BMapGL.Point(device.longitude, device.latitude);
|
|
// 创建标记
|
const marker = new window.BMapGL.Marker(point, {
|
icon: createMarkerIcon(config.color, isOnline),
|
});
|
|
// 创建信息窗口内容
|
const infoContent = `
|
<div style="padding: 8px; min-width: 180px;">
|
<div style="font-weight: bold; margin-bottom: 8px; font-size: 14px;">${device.nickname || device.deviceName}</div>
|
<div style="color: #666; font-size: 12px; line-height: 1.8;">
|
<div>产品: ${device.productName || '-'}</div>
|
<div>状态: <span style="color: ${config.color}; font-weight: 500;">${config.name}</span></div>
|
</div>
|
<div style="margin-top: 8px; padding-top: 8px; border-top: 1px solid #eee;">
|
<a href="javascript:void(0)" class="device-link" data-id="${device.id}" style="color: #1890ff; font-size: 12px; text-decoration: none;">点击查看详情 →</a>
|
</div>
|
</div>
|
`;
|
|
// 点击标记显示信息窗口
|
marker.addEventListener('click', () => {
|
const infoWindow = new window.BMapGL.InfoWindow(infoContent, {
|
width: 220,
|
height: 140,
|
title: '',
|
});
|
|
// 信息窗口打开后绑定链接点击事件
|
infoWindow.addEventListener('open', () => {
|
setTimeout(() => {
|
const link = document.querySelector(
|
'.BMap_bubble_content .device-link',
|
);
|
if (!link) {
|
return;
|
}
|
link.addEventListener('click', (e) => {
|
e.preventDefault();
|
if (device.id === undefined || device.id === null) {
|
return;
|
}
|
router.push({
|
name: 'IoTDeviceDetail',
|
params: { id: device.id },
|
});
|
});
|
}, 100);
|
});
|
|
mapInstance.openInfoWindow(infoWindow, point);
|
});
|
|
mapInstance.addOverlay(marker);
|
});
|
}
|
|
/** 加载设备数据 */
|
async function loadDeviceData() {
|
loading.value = true;
|
try {
|
deviceList.value = await getDeviceLocationList();
|
} finally {
|
loading.value = false;
|
}
|
}
|
|
/** 初始化 */
|
async function init() {
|
await loadDeviceData();
|
if (!hasData.value) {
|
return;
|
}
|
await loadBaiduMapSdk();
|
// 等待 v-show 容器渲染完成；SDK 缓存命中时上一行会同步 resolve，DOM 来不及切换
|
await nextTick();
|
initMap();
|
}
|
|
/** 组件挂载时初始化 */
|
onMounted(() => {
|
init();
|
});
|
|
/** 组件卸载时销毁地图实例 */
|
onUnmounted(() => {
|
if (mapInstance) {
|
mapInstance.destroy?.();
|
mapInstance = null;
|
}
|
});
|
</script>
|
|
<template>
|
<Card class="h-full" title="设备分布地图">
|
<template #extra>
|
<div class="flex items-center gap-4 text-sm">
|
<span
|
v-for="item in stateOptions"
|
:key="item.value"
|
class="flex items-center gap-1"
|
>
|
<span
|
class="inline-block h-3 w-3 rounded-full"
|
:style="{
|
backgroundColor: stateColorMap[item.value],
|
}"
|
></span>
|
<span class="text-gray-500">{{ item.label }}</span>
|
</span>
|
</div>
|
</template>
|
<Spin v-if="loading" class="flex h-[500px] items-center justify-center" />
|
<Empty
|
v-else-if="!hasData"
|
class="h-[500px]"
|
description="暂无设备位置数据"
|
/>
|
<div
|
v-show="hasData && !loading"
|
ref="mapContainerRef"
|
class="h-[500px] w-full"
|
></div>
|
</Card>
|
</template>
|
