feat: 首页功能数据渲染；设备管理列表添加设备图；推送历史页面数据渲染；
chris
6 days ago
parent
af8313de91
commit
4dabcb080e
@ -0,0 +1,24 @@
|
||||
/*
|
||||
* @Author: chris
|
||||
* @Date: 2025-09-05 11:34:53
|
||||
* @LastEditors: chris
|
||||
* @LastEditTime: 2025-10-27 17:05:10
|
||||
*/
|
||||
import request from "@/utils/request";
|
||||
|
||||
// 查询推送历史列表
|
||||
export function listNotify(query) {
|
||||
return request({
|
||||
url: "/leilinglitchi/business/device/list",
|
||||
method: "get",
|
||||
params: Object.assign({ type: 1 }, query),
|
||||
});
|
||||
}
|
||||
|
||||
// 查询推送历史详细
|
||||
export function getNotify(id) {
|
||||
return request({
|
||||
url: "/leilinglitchi/business/device/" + id,
|
||||
method: "get",
|
||||
});
|
||||
}
|
||||
@ -0,0 +1,83 @@
|
||||
<!--
|
||||
* @Author: chris
|
||||
* @Date: 2025-01-13 16:31:10
|
||||
* @LastEditors: chris
|
||||
* @LastEditTime: 2025-10-31 15:33:18
|
||||
-->
|
||||
<script setup>
|
||||
import { BmMarker, BmInfoWindow } from 'vue-baidu-map-3x'
|
||||
|
||||
const props = defineProps({
|
||||
deviceList: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
},
|
||||
currentDevice: {
|
||||
type: Object,
|
||||
default: () => null
|
||||
}
|
||||
})
|
||||
|
||||
const Map = ref(null)
|
||||
const pestMap = ref(null)
|
||||
const baiduMapConfig = {
|
||||
center: '汕头市潮南区雷岭镇',
|
||||
zoom: 12,
|
||||
}
|
||||
|
||||
const mapDevices = computed(() => {
|
||||
if (!Map.value) return []
|
||||
return props.deviceList.map(item => {
|
||||
const [lng, lat] = item.installPointDes.split(',')
|
||||
return Object.assign({}, item, {
|
||||
point: new Map.value.Point(lng, lat),
|
||||
open: false
|
||||
})
|
||||
})
|
||||
})
|
||||
|
||||
watch(() => props.currentDevice, (newVal) => {
|
||||
if(!pestMap.value || !props.currentDevice) return
|
||||
const device = mapDevices.value.find(item => item.deviceAddr === newVal.deviceAddr)
|
||||
device && pestMap.value.flyTo(device.point, 16)
|
||||
})
|
||||
|
||||
function mapReady({BMap, map}) {
|
||||
console.log(BMap, map)
|
||||
pestMap.value = map;
|
||||
Map.value = BMap;
|
||||
map.enableScrollWheelZoom(true)
|
||||
|
||||
// const overlays = map.getOverlays()
|
||||
// const points = overlays.map(item => item.latLng)
|
||||
// const viewport = map.getViewport(points)
|
||||
// map.setViewport(viewport)
|
||||
}
|
||||
|
||||
function mapZoomEnd({target}) {
|
||||
target.setTilt(45)
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="device-map" >
|
||||
<baidu-map class="map" :center="baiduMapConfig.center" :zoom="baiduMapConfig.zoom" @ready="mapReady" @zoomend="mapZoomEnd">
|
||||
<bm-marker v-for="item in mapDevices" :key="item.deviceAddr" :position="{lng: item.point.lng, lat: item.point.lat}" >
|
||||
</bm-marker>
|
||||
</baidu-map>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.device-map {
|
||||
// @apply mx-[-19px] my-[-15px];
|
||||
}
|
||||
|
||||
.device-map, .map {
|
||||
@apply w-full h-full;
|
||||
}
|
||||
|
||||
:deep(.anchorBL) {
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue