feat: 首页功能数据渲染；设备管理列表添加设备图；推送历史页面数据渲染；
chris
7 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