399 lines
10 KiB
Vue
399 lines
10 KiB
Vue
<script setup lang="ts">
|
||
import { onMounted, ref, onUnmounted, watch, nextTick } from 'vue'
|
||
|
||
interface DataConnectionItem {
|
||
id: number
|
||
imei: string | null
|
||
networkType: string | null
|
||
wifiBssid: string | null
|
||
wifiState: string | null
|
||
wifiRssi: string | null
|
||
mobileState: string | null
|
||
mobileNetworkType: string | null
|
||
networkId: string | null
|
||
gsmStrength: string | null
|
||
cdmaDbm: string | null
|
||
evdoDbm: string | null
|
||
internalIp: string | null
|
||
webUrl: string | null
|
||
pingValue: string
|
||
userLat: string
|
||
userLon: string
|
||
userLocationInfo: string | null
|
||
bsLat: string | null
|
||
bsLon: string | null
|
||
timeIndexClient: string | null
|
||
version: string | null
|
||
timeServerInsert: string | null
|
||
ds: string | null
|
||
dt: string | null
|
||
}
|
||
|
||
const mapContainer = ref<HTMLDivElement | null>(null)
|
||
const operator = ref<string>('CMCC') // 默认选择中国移动
|
||
const date = ref<string>('')
|
||
const loading = ref<boolean>(false)
|
||
const dataLoaded = ref<boolean>(false)
|
||
const dataList = ref<DataConnectionItem[]>([])
|
||
const markers: any[] = []
|
||
|
||
let map: any = null
|
||
// 存储所有有效坐标点（带原数据）
|
||
let validPointsList: Array<{ lat: number; lon: number; item: DataConnectionItem }> = []
|
||
|
||
// 核心函数：默认聚焦到第一个有效点并放大
|
||
const calculateDensityFocus = (): { center: any; zoom: number; hasValid: boolean } => {
|
||
if (!window.BMap || validPointsList.length === 0) {
|
||
return {
|
||
center: new window.BMap.Point(105.8951, 36.5667), // 中国中心
|
||
zoom: 4,
|
||
hasValid: false
|
||
}
|
||
}
|
||
|
||
// 默认聚焦到第一个有效点，并放大到17级（更大的缩放级别）
|
||
const firstPoint = validPointsList[0]
|
||
return {
|
||
center: new window.BMap.Point(firstPoint.lon, firstPoint.lat),
|
||
zoom: 17, // 放大到17级，可以看到更详细的区域
|
||
hasValid: true
|
||
}
|
||
}
|
||
|
||
// 清除标记点
|
||
const clearMarkers = () => {
|
||
if (!map) return
|
||
// 遍历所有标记点并移除
|
||
markers.forEach(marker => {
|
||
try {
|
||
map.removeOverlay(marker)
|
||
} catch (error) {
|
||
console.warn('移除标记点失败:', error)
|
||
}
|
||
})
|
||
// 清空标记点数组
|
||
markers.length = 0
|
||
}
|
||
|
||
// 获取标记点颜色
|
||
const getMarkerColor = (pingValue: string): string => {
|
||
if (pingValue === '11111') return '#10b981'
|
||
if (pingValue === '00000') return '#6b7280'
|
||
return '#3b82f6'
|
||
}
|
||
|
||
// 添加标记点并自动聚焦
|
||
const addMarkersAndFocus = () => {
|
||
if (!map || validPointsList.length === 0) return
|
||
clearMarkers()
|
||
|
||
// 批量添加标记点
|
||
validPointsList.forEach(({ lat, lon, item }) => {
|
||
const point = new window.BMap.Point(lon, lat)
|
||
const color = getMarkerColor(item.pingValue)
|
||
|
||
// 自定义图标（固定大小，确保缩放后可见）
|
||
const icon = new window.BMap.Icon(
|
||
`data:image/svg+xml;base64,${btoa(`
|
||
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20">
|
||
<circle cx="10" cy="10" r="8" fill="${color}" stroke="white" stroke-width="2"/>
|
||
</svg>
|
||
`)}`,
|
||
new window.BMap.Size(20, 20),
|
||
{ anchor: new window.BMap.Size(10, 10) }
|
||
)
|
||
|
||
const marker = new window.BMap.Marker(point, { icon })
|
||
// 信息窗口
|
||
const infoWindow = new window.BMap.InfoWindow(`
|
||
<div style="padding:8px">
|
||
<p><strong>网络ID:</strong> ${item.networkId || 'N/A'}</p>
|
||
<p><strong>类型:</strong> ${item.networkType || 'N/A'}</p>
|
||
<p><strong>Ping值:</strong> ${item.pingValue}</p>
|
||
<p><strong>坐标:</strong> ${lat.toFixed(6)}, ${lon.toFixed(6)}</p>
|
||
</div>
|
||
`, { width: 200 })
|
||
|
||
marker.addEventListener('click', () => map.openInfoWindow(infoWindow, point))
|
||
map.addOverlay(marker)
|
||
markers.push(marker)
|
||
})
|
||
|
||
// 标记点添加完成后，立即聚焦密度中心（关键：同步执行，无延迟）
|
||
const { center, zoom } = calculateDensityFocus()
|
||
map.centerAndZoom(center, zoom)
|
||
}
|
||
|
||
// 过滤有效坐标点（中国境内）
|
||
const filterValidPoints = (data: DataConnectionItem[]) => {
|
||
validPointsList = data.filter(item => {
|
||
if (!item.userLat || !item.userLon) return false
|
||
const lat = parseFloat(item.userLat)
|
||
const lon = parseFloat(item.userLon)
|
||
// 中国经纬度范围：纬度18°N-53°N，经度73°E-135°E
|
||
return !isNaN(lat) && !isNaN(lon) && lat >= 18 && lat <= 53 && lon >= 73 && lon <= 135
|
||
}).map(item => ({
|
||
lat: parseFloat(item.userLat!),
|
||
lon: parseFloat(item.userLon!),
|
||
item
|
||
}))
|
||
}
|
||
|
||
// 获取数据
|
||
const fetchData = async () => {
|
||
loading.value = true
|
||
dataLoaded.value = false
|
||
|
||
// 先清除旧数据：清空有效点列表和地图上的标记点
|
||
validPointsList = []
|
||
if (map) {
|
||
clearMarkers()
|
||
}
|
||
|
||
try {
|
||
const body: { operator?: string; date?: string } = {}
|
||
if (operator.value) body.operator = operator.value
|
||
if (date.value) body.date = date.value
|
||
|
||
const response = await fetch('http://localhost:8081/dataConnection', {
|
||
method: 'POST',
|
||
headers: { 'Content-Type': 'application/json' },
|
||
body: JSON.stringify(body)
|
||
})
|
||
|
||
if (!response.ok) throw new Error(`HTTP error! status: ${response.status}`)
|
||
const data = await response.json() as DataConnectionItem[]
|
||
dataList.value = data
|
||
|
||
// 过滤有效点
|
||
filterValidPoints(data)
|
||
|
||
// 地图已初始化：直接添加标记点并聚焦
|
||
if (map) {
|
||
await nextTick()
|
||
addMarkersAndFocus()
|
||
}
|
||
} catch (error) {
|
||
console.error('获取数据失败:', error)
|
||
validPointsList = []
|
||
clearMarkers()
|
||
} finally {
|
||
loading.value = false
|
||
dataLoaded.value = true
|
||
}
|
||
}
|
||
|
||
// 初始化地图（必须在数据加载完成后执行！）
|
||
const initMapAfterData = async () => {
|
||
// 等待DOM渲染和百度地图API加载
|
||
await nextTick()
|
||
|
||
// 检查百度地图API是否加载完成
|
||
if (!window.BMap || !window.BMap.Map) {
|
||
console.warn('百度地图API未加载，等待中...')
|
||
setTimeout(() => initMapAfterData(), 200)
|
||
return
|
||
}
|
||
|
||
if (!mapContainer.value) {
|
||
console.warn('地图容器未找到')
|
||
return
|
||
}
|
||
|
||
// 如果地图已存在，先清除
|
||
if (map) {
|
||
clearMarkers()
|
||
}
|
||
|
||
// 初始化地图
|
||
map = new window.BMap.Map(mapContainer.value)
|
||
map.enableScrollWheelZoom(true)
|
||
map.enableDragging(true)
|
||
// 添加地图控件
|
||
map.addControl(new window.BMap.MapTypeControl({
|
||
mapTypes: [window.BMap.MapTypeId.NORMAL, window.BMap.MapTypeId.SATELLITE]
|
||
}))
|
||
map.addControl(new window.BMap.NavigationControl())
|
||
map.addControl(new window.BMap.ScaleControl())
|
||
|
||
// 如果有数据，添加标记点并聚焦
|
||
if (validPointsList.length > 0) {
|
||
// 等待地图完全初始化后再添加标记点
|
||
setTimeout(() => {
|
||
addMarkersAndFocus()
|
||
}, 100)
|
||
} else {
|
||
// 无数据时显示全国地图
|
||
map.centerAndZoom(new window.BMap.Point(105.8951, 36.5667), 4)
|
||
}
|
||
}
|
||
|
||
// 监听筛选条件变化
|
||
watch([operator, date], () => {
|
||
if (map && dataLoaded.value) fetchData()
|
||
})
|
||
|
||
onMounted(async () => {
|
||
// 第一步：先加载数据
|
||
await fetchData()
|
||
// 第二步：数据加载完成后，再初始化地图
|
||
await initMapAfterData()
|
||
})
|
||
|
||
onUnmounted(() => {
|
||
clearMarkers()
|
||
map = null
|
||
})
|
||
</script>
|
||
|
||
<template>
|
||
<div class="page">
|
||
<!-- 加载遮罩 -->
|
||
<div v-if="loading || !dataLoaded" class="loading-overlay">
|
||
<div class="loading-spinner">
|
||
<div class="spinner"></div>
|
||
<p class="loading-text">加载数据中...</p>
|
||
</div>
|
||
</div>
|
||
|
||
<h2>业务需求15：数据链接-数据链接率分布</h2>
|
||
|
||
<div class="filter-bar">
|
||
<div class="filter-item">
|
||
<label for="operator">运营商:</label>
|
||
<select id="operator" v-model="operator" class="select-input" :disabled="loading">
|
||
<option value="CMCC">中国移动</option>
|
||
<option value="CUCC">中国联通</option>
|
||
<option value="CTCC">中国电信</option>
|
||
</select>
|
||
</div>
|
||
<div class="filter-item">
|
||
<label for="date">日期:</label>
|
||
<input id="date" type="date" v-model="date" class="date-input" :disabled="loading" />
|
||
</div>
|
||
<button @click="fetchData" class="refresh-btn" :disabled="loading">
|
||
{{ loading ? '加载中...' : '刷新' }}
|
||
</button>
|
||
</div>
|
||
|
||
<div class="legend">
|
||
<div class="legend-item">
|
||
<span class="legend-dot" style="background-color: #10b981;"></span>
|
||
<span>正常 (11111)</span>
|
||
</div>
|
||
<div class="legend-item">
|
||
<span class="legend-dot" style="background-color: #6b7280;"></span>
|
||
<span>异常 (00000)</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="map-container" ref="mapContainer"></div>
|
||
</div>
|
||
</template>
|
||
|
||
<style scoped>
|
||
.page {
|
||
padding: 16px;
|
||
height: 100%;
|
||
display: flex;
|
||
flex-direction: column;
|
||
position: relative; /* 让加载遮罩只覆盖当前页面，而不是全局 */
|
||
}
|
||
|
||
h2 {
|
||
margin: 0 0 16px 0;
|
||
font-size: 20px;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.filter-bar {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 16px;
|
||
margin-bottom: 16px;
|
||
padding: 12px;
|
||
background: #f9fafb;
|
||
border-radius: 6px;
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.filter-item {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
}
|
||
|
||
.select-input, .date-input {
|
||
padding: 6px 12px;
|
||
border: 1px solid #d1d5db;
|
||
border-radius: 4px;
|
||
font-size: 14px;
|
||
}
|
||
|
||
.refresh-btn {
|
||
padding: 6px 16px;
|
||
background: #3b82f6;
|
||
color: white;
|
||
border: none;
|
||
border-radius: 4px;
|
||
cursor: pointer;
|
||
}
|
||
.refresh-btn:hover:not(:disabled) { background: #2563eb; }
|
||
.refresh-btn:disabled { background: #9ca3af; cursor: not-allowed; }
|
||
|
||
.legend {
|
||
display: flex;
|
||
gap: 24px;
|
||
margin-bottom: 12px;
|
||
padding: 8px 12px;
|
||
background: #f9fafb;
|
||
border-radius: 4px;
|
||
}
|
||
.legend-item {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
font-size: 14px;
|
||
}
|
||
.legend-dot {
|
||
width: 12px;
|
||
height: 12px;
|
||
border-radius: 50%;
|
||
border: 1px solid white;
|
||
box-shadow: 0 0 0 1px rgba(0,0,0,0.1);
|
||
}
|
||
|
||
.map-container {
|
||
width: 100%;
|
||
height: calc(100vh - 280px);
|
||
min-height: 500px;
|
||
border: 1px solid #e5e7eb;
|
||
border-radius: 4px;
|
||
flex: 1;
|
||
}
|
||
|
||
.loading-overlay {
|
||
position: absolute;
|
||
inset: 0;
|
||
background: rgba(255,255,255,0.9);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
z-index: 10;
|
||
}
|
||
.loading-spinner {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
gap: 16px;
|
||
}
|
||
.spinner {
|
||
width: 48px; height: 48px;
|
||
border: 4px solid #e5e7eb;
|
||
border-top-color: #3b82f6;
|
||
border-radius: 50%;
|
||
animation: spin 1s linear infinite;
|
||
}
|
||
@keyframes spin { to { transform: rotate(360deg); } }
|
||
.loading-text { font-size: 16px; color: #374151; margin: 0; }
|
||
</style> |