118 lines
2.9 KiB
Vue
118 lines
2.9 KiB
Vue
<template>
|
|
<div class="container">
|
|
<div class="header">
|
|
<h1>警保联动数据总览</h1>
|
|
</div>
|
|
<MapContainer class="map-container" ref="mapRef" :init-callback="initMap">
|
|
<div class="left-panel panel">
|
|
<h2>左侧统计面板</h2>
|
|
<!-- 添加你的统计数据 -->
|
|
</div>
|
|
<div class="right-panel panel">
|
|
<h2>右侧统计面板</h2>
|
|
<!-- 添加你的统计数据 -->
|
|
</div>
|
|
</MapContainer>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import MapContainer from "@/components/aMap/MapContainer.vue";
|
|
import {createApp, h, onMounted, ref} from "vue";
|
|
import {ComponentExposed} from "vue-component-type-helpers";
|
|
import api from "@/axios";
|
|
import EnterprisesUnitInfoWindowContent from "@/views/components/EnterprisesUnitInfoWindowContent.vue";
|
|
import {EnterprisesUnit, StatisticsVo} from "@/types/views/index.ts";
|
|
|
|
const mapRef = ref<ComponentExposed<typeof MapContainer>>(null)
|
|
|
|
let infoWindow: AMap.InfoWindow = null;
|
|
|
|
const initMap = async () => {
|
|
const {data} = await api.get<EnterprisesUnit[]>('/m1/index/points')
|
|
mapRef.value?.mapInstance?.clearMap()
|
|
const markers = data.map(item => {
|
|
if (!item.point) {
|
|
return null;
|
|
}
|
|
const marker = new AMap.Marker({
|
|
icon: new AMap.Icon({
|
|
image: __APP_ENV.VITE_APP_MINIO_URL + item.type.extData.icon,
|
|
size: new AMap.Size(66, 66),
|
|
imageSize: new AMap.Size(66, 66),
|
|
}),
|
|
position: item.point,
|
|
offset: new AMap.Pixel(-33, -66)
|
|
})
|
|
marker.on('click', () => {
|
|
if (!infoWindow) {
|
|
infoWindow = new AMap.InfoWindow({
|
|
isCustom: true,
|
|
offset: new AMap.Pixel(66, -66),
|
|
closeWhenClickMap: true
|
|
});
|
|
}
|
|
const element = document.createElement('div')
|
|
//h 渲染组件 跟vue一样的用法
|
|
const _InfoWindow = h(EnterprisesUnitInfoWindowContent, item)
|
|
const app = createApp(_InfoWindow)
|
|
app.mount(element)
|
|
infoWindow.setContent(element)
|
|
infoWindow.open(mapRef.value?.mapInstance, item.point)
|
|
})
|
|
return marker
|
|
}).filter(Boolean)
|
|
mapRef.value.mapInstance.add(markers)
|
|
mapRef.value.mapInstance.setFitView()
|
|
}
|
|
|
|
onMounted(async () => {
|
|
const resp = await api.get<StatisticsVo>('/m1/index/statistics')
|
|
console.log(resp.data);
|
|
})
|
|
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.container {
|
|
position: relative;
|
|
height: 100%;
|
|
}
|
|
|
|
.header {
|
|
background-color: rgba(255, 255, 255, 0.7);
|
|
color: #333;
|
|
text-align: center;
|
|
padding: 20px;
|
|
position: absolute;
|
|
top: 20px;
|
|
left: 0;
|
|
right: 0;
|
|
z-index: 10;
|
|
}
|
|
|
|
.map-container {
|
|
height: 100%;
|
|
position: relative;
|
|
}
|
|
|
|
.panel {
|
|
background-color: rgba(255, 255, 255, 0.7);
|
|
padding: 20px;
|
|
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
|
position: absolute;
|
|
top: 100px; /* 调整顶部距离以避免与标题重叠 */
|
|
z-index: 10;
|
|
}
|
|
|
|
.left-panel {
|
|
width: 15%;
|
|
left: 10px;
|
|
}
|
|
|
|
.right-panel {
|
|
width: 15%;
|
|
right: 10px;
|
|
}
|
|
</style>
|