117 lines
3.0 KiB
Vue
117 lines
3.0 KiB
Vue
|
<template>
|
|||
|
|
<a-layout>
|
|||
|
|
<a-layout-sider :resize-directions="['right']">
|
|||
|
|
<a-row>
|
|||
|
|
</a-row>
|
|||
|
|
</a-layout-sider>
|
|||
|
|
<a-layout-content>
|
|||
|
|
<div id="container"></div>
|
|||
|
|
<!-- 标记点信息弹出框 -->
|
|||
|
|
<a-modal v-model:visible="infoVisible" title="设备信息" :footer="null">
|
|||
|
|
<p>ID: {{ selectedDevice.id }}</p>
|
|||
|
|
<p>名称: {{ selectedDevice.name }}</p>
|
|||
|
|
<p>状态: {{ selectedDevice.state }}</p>
|
|||
|
|
<p>在线状态: {{ selectedDevice.online ? '是' : '否' }}</p>
|
|||
|
|
</a-modal>
|
|||
|
|
</a-layout-content>
|
|||
|
|
</a-layout>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script lang="ts" setup>
|
|||
|
|
import { onMounted, onUnmounted, ref } from 'vue';
|
|||
|
|
import AMapLoader from '@amap/amap-jsapi-loader';
|
|||
|
|
import { DeviceRecord, queryDeviceList } from '@/api/device';
|
|||
|
|
import "@amap/amap-jsapi-types";
|
|||
|
|
|
|||
|
|
let map: any = null;
|
|||
|
|
const selectedDevice = ref<DeviceRecord | null>(null);
|
|||
|
|
const infoVisible = ref(false);
|
|||
|
|
const deviceList = ref<DeviceRecord[]>([]);
|
|||
|
|
const markerContent = `<div class="custom-content-marker">
|
|||
|
|
<img src="//a.amap.com/jsapi_demos/static/demo-center/icons/dir-via-marker.png">
|
|||
|
|
<div class="close-btn">X</div>
|
|||
|
|
</div>`;
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
onMounted(() => {
|
|||
|
|
AMapLoader.load({
|
|||
|
|
key: 'a4e80eed798a56451b226dcfca81b846', // 申请好的Web端开发者Key，首次调用 load 时必填
|
|||
|
|
version: '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
|
|||
|
|
plugins: [], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
|
|||
|
|
})
|
|||
|
|
.then((AMap) => {
|
|||
|
|
map = new AMap.Map('container', {
|
|||
|
|
// 设置地图容器id
|
|||
|
|
viewMode: '3D', // 是否为3D地图模式
|
|||
|
|
zoom: 11, // 初始化地图级别
|
|||
|
|
center: [116.397428, 39.90923], // 初始化地图中心点位置
|
|||
|
|
});
|
|||
|
|
// 创建标记点
|
|||
|
|
const position = new AMap.LngLat(116.397428, 39.90923);
|
|||
|
|
const marker = new AMap.Marker({
|
|||
|
|
position,
|
|||
|
|
content: markerContent,
|
|||
|
|
offset: new AMap.Pixel(-13, -30),
|
|||
|
|
});
|
|||
|
|
map.add(marker);
|
|||
|
|
})
|
|||
|
|
.catch((e) => {
|
|||
|
|
console.log(e);
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 获取设备列表
|
|||
|
|
queryDeviceList({
|
|||
|
|
current: 1,
|
|||
|
|
size: 10,
|
|||
|
|
})
|
|||
|
|
.then((response) => {
|
|||
|
|
deviceList.value = response.data.records;
|
|||
|
|
})
|
|||
|
|
.catch((error) => {
|
|||
|
|
console.error('获取设备列表失败', error);
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
onUnmounted(() => {
|
|||
|
|
map?.destroy();
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style scoped>
|
|||
|
|
#container {
|
|||
|
|
width: 100%;
|
|||
|
|
height: 800px;
|
|||
|
|
}
|
|||
|
|
.custom-content-marker {
|
|||
|
|
position: relative;
|
|||
|
|
width: 25px;
|
|||
|
|
height: 34px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.custom-content-marker img {
|
|||
|
|
width: 100%;
|
|||
|
|
height: 100%;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.custom-content-marker .close-btn {
|
|||
|
|
position: absolute;
|
|||
|
|
top: -6px;
|
|||
|
|
right: -8px;
|
|||
|
|
width: 15px;
|
|||
|
|
height: 15px;
|
|||
|
|
font-size: 12px;
|
|||
|
|
background: #ccc;
|
|||
|
|
border-radius: 50%;
|
|||
|
|
color: #fff;
|
|||
|
|
text-align: center;
|
|||
|
|
line-height: 15px;
|
|||
|
|
box-shadow: -1px 1px 1px rgba(10, 10, 10, .2);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.custom-content-marker .close-btn:hover{
|
|||
|
|
background: #666;
|
|||
|
|
}
|
|||
|
|
</style>
|