450 lines
13 KiB
Vue
450 lines
13 KiB
Vue
|
<template>
|
|||
|
|
<div class="track-player">
|
|||
|
|
<!-- 地图容器 -->
|
|||
|
|
<div id="amap-container" class="map-container"></div>
|
|||
|
|
<div class="content_top">
|
|||
|
|
<div class="content_layout">
|
|||
|
|
<div v-if="deviceGroups && deviceGroups.length > 0">
|
|||
|
|
<el-timeline style="margin-left: -50px;">
|
|||
|
|
<!-- 日期分组循环 -->
|
|||
|
|
<el-timeline-item v-for="(group, groupIndex) in deviceGroups" :key="groupIndex"
|
|||
|
|
:timestamp="group.date" placement="top" icon="Time" color="rgba(0, 198, 250, 1)">
|
|||
|
|
<!-- 设备项循环 -->
|
|||
|
|
<div class="device-item">
|
|||
|
|
<!-- 设备名称 + 时间 -->
|
|||
|
|
<div class="device-header">
|
|||
|
|
<span class="device-name">{{ group.deviceName }}</span>
|
|||
|
|
<span class="device-time">{{ formatTimestampToHM(group.detailList[0].timestamp) }}</span>
|
|||
|
|
</div>
|
|||
|
|
<!-- 地点信息 -->
|
|||
|
|
<div class="device-place">
|
|||
|
|
<div class="d_f">
|
|||
|
|
<div class="Stime">初始地点：</div>
|
|||
|
|
<div class="Sloation">{{
|
|||
|
|
group.startLocation }}</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="d_f">
|
|||
|
|
<div class="Stime">结束地点：</div>
|
|||
|
|
<div class="Sloation">{{
|
|||
|
|
group.endLocation }}</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<!-- 轨迹播放按钮 -->
|
|||
|
|
<div class="control_btt">
|
|||
|
|
<el-button class="control_btn" @click="handlePlayPause(group)">轨迹播放</el-button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</el-timeline-item>
|
|||
|
|
</el-timeline>
|
|||
|
|
</div>
|
|||
|
|
<div v-if="deviceGroups == null" class="nodata">
|
|||
|
|
<img src="@/assets/images/nodata.png" alt="" class="nodataImg">
|
|||
|
|
<div class="title">暂无数据</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script setup lang="ts">
|
|||
|
|
import api from "@/api/controlCenter/historyjectory/index"
|
|||
|
|
import { formatTimestampToHM } from "@/utils/function"
|
|||
|
|
const route = useRoute();
|
|||
|
|
// -------------------------- 状态管理 --------------------------
|
|||
|
|
// 地图实例
|
|||
|
|
const mapRef = ref<AMap.Map | null>(null);
|
|||
|
|
// 轨迹线实例
|
|||
|
|
const polylineRef = ref<AMap.Polyline | null>(null);
|
|||
|
|
// 移动标记点实例
|
|||
|
|
const markerRef = ref<AMap.Marker | null>(null);
|
|||
|
|
// 轨迹数据（初始为空，从设备列表动态获取）
|
|||
|
|
const trackPoints = ref<[number, number][]>([]); // 移除硬编码默认值
|
|||
|
|
// 设备分组数据（包含各设备的轨迹点）
|
|||
|
|
const deviceGroups = ref([])
|
|||
|
|
// 播放状态
|
|||
|
|
const isPlaying = ref<boolean>(false);
|
|||
|
|
const isLoading = ref<boolean>(true);
|
|||
|
|
const playSpeed = ref<number>(1);
|
|||
|
|
const currentIndex = ref<number>(0);
|
|||
|
|
const playTimer = ref<number | null>(null);
|
|||
|
|
|
|||
|
|
// -------------------------- 地图初始化 --------------------------
|
|||
|
|
const initMap = () => {
|
|||
|
|
try {
|
|||
|
|
if (!window.AMap) {
|
|||
|
|
throw new Error('高德地图API加载失败');
|
|||
|
|
}
|
|||
|
|
// 创建地图实例：不设置 center 和 zoom，由 setBounds 自动调整
|
|||
|
|
const map = new AMap.Map('amap-container', {
|
|||
|
|
resizeEnable: true, // 允许地图自适应容器大小
|
|||
|
|
// 移除 center、zoom 等固定视角的配置
|
|||
|
|
});
|
|||
|
|
mapRef.value = map;
|
|||
|
|
// 创建轨迹线（初始无数据）
|
|||
|
|
const polyline = new AMap.Polyline({
|
|||
|
|
path: [],
|
|||
|
|
strokeColor: '#3886ff',
|
|||
|
|
strokeWeight: 10,
|
|||
|
|
strokeOpacity: 0.8,
|
|||
|
|
});
|
|||
|
|
map.add(polyline);
|
|||
|
|
polylineRef.value = polyline;
|
|||
|
|
// 创建标记点（初始位置临时设为 [0, 0]，播放时会覆盖）
|
|||
|
|
const marker = new AMap.Marker({
|
|||
|
|
position: [0, 0],
|
|||
|
|
icon: new AMap.Icon({
|
|||
|
|
size: new AMap.Size(40, 40),
|
|||
|
|
image: 'https://webapi.amap.com/images/car.png',
|
|||
|
|
imageSize: new AMap.Size(40, 40),
|
|||
|
|
}),
|
|||
|
|
anchor: 'center',
|
|||
|
|
});
|
|||
|
|
map.add(marker);
|
|||
|
|
markerRef.value = marker;
|
|||
|
|
|
|||
|
|
isLoading.value = false;
|
|||
|
|
fetchTrackData(); // 数据请求移到地图初始化后
|
|||
|
|
} catch (error) {
|
|||
|
|
console.error('地图初始化失败：', error);
|
|||
|
|
isLoading.value = false;
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
// 单独的接口请求函数
|
|||
|
|
const fetchTrackData = () => {
|
|||
|
|
const data = {
|
|||
|
|
id: route.params.id as string
|
|||
|
|
};
|
|||
|
|
api.getLocationHistoryDetail(data).then((res) => {
|
|||
|
|
if (res.code === 200) {
|
|||
|
|
deviceGroups.value = res.data;
|
|||
|
|
// 数据加载完成后，自动播放第一个设备的轨迹
|
|||
|
|
if (deviceGroups.value&&deviceGroups.value.length > 0) {
|
|||
|
|
const firstGroup = deviceGroups.value[0];
|
|||
|
|
const firstDetailList = firstGroup.detailList;
|
|||
|
|
// 检查轨迹列表是否有数据
|
|||
|
|
if (firstDetailList && firstDetailList.length > 0) {
|
|||
|
|
const firstPoint = firstDetailList[0];
|
|||
|
|
const centerLng = Number(firstPoint.longitude);
|
|||
|
|
const centerLat = Number(firstPoint.latitude);
|
|||
|
|
// 验证经纬度有效性
|
|||
|
|
if (!isNaN(centerLng) && !isNaN(centerLat) && mapRef.value) {
|
|||
|
|
// 设置地图中心为第一个轨迹点
|
|||
|
|
mapRef.value.setCenter([centerLng, centerLat]);
|
|||
|
|
// 设置合适的缩放级别（16为街道级，清晰无需手动放大）
|
|||
|
|
mapRef.value.setZoom(10);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
} else {
|
|||
|
|
ElMessage.error('获取轨迹数据失败');
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// -------------------------- 轨迹播放核心逻辑 --------------------------
|
|||
|
|
// 平滑移动标记点
|
|||
|
|
const smoothMoveMarker = (
|
|||
|
|
start: [number, number],
|
|||
|
|
end: [number, number],
|
|||
|
|
duration: number
|
|||
|
|
) => {
|
|||
|
|
const startLngLat = new AMap.LngLat(start[0], start[1]);
|
|||
|
|
const endLngLat = new AMap.LngLat(end[0], end[1]);
|
|||
|
|
const distance = startLngLat.distance(endLngLat);
|
|||
|
|
const speed = distance / duration;
|
|||
|
|
let startTime = Date.now();
|
|||
|
|
const moveFrame = () => {
|
|||
|
|
const elapsed = Date.now() - startTime;
|
|||
|
|
const progress = Math.min(elapsed / duration, 1);
|
|||
|
|
const currentLng = start[0] + (end[0] - start[0]) * progress;
|
|||
|
|
const currentLat = start[1] + (end[1] - start[1]) * progress;
|
|||
|
|
markerRef.value?.setPosition([currentLng, currentLat]);
|
|||
|
|
if (progress < 1) {
|
|||
|
|
playTimer.value = requestAnimationFrame(moveFrame);
|
|||
|
|
} else {
|
|||
|
|
currentIndex.value += 1;
|
|||
|
|
if (currentIndex.value < trackPoints.value.length - 1) {
|
|||
|
|
playNextSegment();
|
|||
|
|
} else {
|
|||
|
|
// 播放完成
|
|||
|
|
isPlaying.value = false;
|
|||
|
|
currentIndex.value = 0;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
playTimer.value = requestAnimationFrame(moveFrame);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// 播放下一段轨迹
|
|||
|
|
const playNextSegment = () => {
|
|||
|
|
if (currentIndex.value >= trackPoints.value.length - 1) return;
|
|||
|
|
const startPoint = trackPoints.value[currentIndex.value];
|
|||
|
|
const endPoint = trackPoints.value[currentIndex.value + 1];
|
|||
|
|
const baseDuration = 500;
|
|||
|
|
const duration = baseDuration / playSpeed.value;
|
|||
|
|
smoothMoveMarker(startPoint, endPoint, duration);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// 重置播放状态（切换设备时调用）
|
|||
|
|
const resetPlayState = () => {
|
|||
|
|
// 停止当前播放
|
|||
|
|
if (isPlaying.value && playTimer.value) {
|
|||
|
|
cancelAnimationFrame(playTimer.value);
|
|||
|
|
}
|
|||
|
|
// 重置状态
|
|||
|
|
isPlaying.value = false;
|
|||
|
|
currentIndex.value = 0;
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// 播放/暂停切换（接收设备的trackPoints）
|
|||
|
|
const handlePlayPause = (group: any) => {
|
|||
|
|
const trackPointList = group.detailList;
|
|||
|
|
const validTrackPoints = trackPointList.map((point: any) => {
|
|||
|
|
const lng = Number(point.longitude); // 经度
|
|||
|
|
const lat = Number(point.latitude); // 纬度
|
|||
|
|
// 验证经纬度有效性（避免NaN）
|
|||
|
|
return isNaN(lng) || isNaN(lat) ? null : [lng, lat] as [number, number];
|
|||
|
|
}).filter((point: any) => point !== null); // 过滤无效点
|
|||
|
|
|
|||
|
|
if (validTrackPoints.length < 2) {
|
|||
|
|
ElMessage.warning('有效轨迹点不足2个，无法播放');
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 3. 重置播放状态并赋值轨迹数据
|
|||
|
|
resetPlayState();
|
|||
|
|
trackPoints.value = validTrackPoints;
|
|||
|
|
|
|||
|
|
// 4. 开始播放
|
|||
|
|
isPlaying.value = true;
|
|||
|
|
playNextSegment();
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// -------------------------- 生命周期与监听 --------------------------
|
|||
|
|
onMounted(() => {
|
|||
|
|
initMap();
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
onUnmounted(() => {
|
|||
|
|
if (playTimer.value) {
|
|||
|
|
cancelAnimationFrame(playTimer.value);
|
|||
|
|
}
|
|||
|
|
mapRef.value?.remove(polylineRef.value!);
|
|||
|
|
mapRef.value?.remove(markerRef.value!);
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 监听轨迹数据变化（更新轨迹线和地图范围）
|
|||
|
|
watch(trackPoints, (newPoints) => {
|
|||
|
|
if (!mapRef.value || !polylineRef.value || !markerRef.value) return;
|
|||
|
|
if (newPoints.length === 0) return;
|
|||
|
|
// 1. 更新轨迹线
|
|||
|
|
polylineRef.value.setPath(newPoints);
|
|||
|
|
// 2. 获取第一个轨迹点（作为地图中心）
|
|||
|
|
const firstPoint = newPoints[0]; // [经度, 纬度]
|
|||
|
|
const centerLngLat = new AMap.LngLat(firstPoint[0], firstPoint[1]);
|
|||
|
|
// 3. 地图聚焦到第一个点，并设置固定zoom（16为街道级，足够大，无需手动放大）
|
|||
|
|
mapRef.value.setCenter(centerLngLat); // 设中心
|
|||
|
|
mapRef.value.setZoom(15); // 固定缩放级别（1-20，越大越近）
|
|||
|
|
// 4. 标记点移到第一个点
|
|||
|
|
markerRef.value.setPosition(firstPoint);
|
|||
|
|
}, { deep: true });
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style scoped>
|
|||
|
|
/* 样式保持不变 */
|
|||
|
|
:deep .el-timeline-item__tail {
|
|||
|
|
border-left: 1px solid rgba(0, 198, 250, 0.2);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
:deep .el-timeline-item__timestamp {
|
|||
|
|
color: rgba(2, 124, 251, 1);
|
|||
|
|
font-size: 16px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.track-player {
|
|||
|
|
width: 100%;
|
|||
|
|
height: 90vh;
|
|||
|
|
position: relative;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.map-container {
|
|||
|
|
width: 100%;
|
|||
|
|
height: 100%;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.content_top {
|
|||
|
|
width: 300px;
|
|||
|
|
border-radius: 4px;
|
|||
|
|
box-shadow: 0px 0px 6px 0px rgba(0, 34, 96, 0.1);
|
|||
|
|
background: #fff;
|
|||
|
|
height: 88vh;
|
|||
|
|
position: absolute;
|
|||
|
|
z-index: 1;
|
|||
|
|
top: 10px;
|
|||
|
|
left: 10px;
|
|||
|
|
overflow-y: auto;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.Stime {
|
|||
|
|
color: rgba(56, 64, 79, 0.6);
|
|||
|
|
white-space: nowrap;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.Sloation {
|
|||
|
|
color: rgba(56, 64, 79, 1);
|
|||
|
|
width: 150px;
|
|||
|
|
display: inline-block;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.d_f {
|
|||
|
|
display: flex;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.content_layout {
|
|||
|
|
padding: 20px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 时间线整体 */
|
|||
|
|
.el-timeline {
|
|||
|
|
margin-left: 20px;
|
|||
|
|
/* 调整时间线与左侧的间距 */
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 时间戳（日期） */
|
|||
|
|
.el-timeline-item__timestamp {
|
|||
|
|
font-weight: bold;
|
|||
|
|
margin-bottom: 8px;
|
|||
|
|
color: rgba(2, 124, 251, 1);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 设备项容器 */
|
|||
|
|
.device-item {
|
|||
|
|
background-color: #f9fafc;
|
|||
|
|
border-radius: 4px;
|
|||
|
|
padding: 10px;
|
|||
|
|
margin-bottom: 10px;
|
|||
|
|
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 设备名称 + 时间 行 */
|
|||
|
|
.device-header {
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
align-items: center;
|
|||
|
|
margin-bottom: 6px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 设备名称 */
|
|||
|
|
.device-name {
|
|||
|
|
font-weight: 500;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 设备时间 */
|
|||
|
|
.device-time {
|
|||
|
|
color: rgba(97, 128, 183, 1);
|
|||
|
|
font-size: 14px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 设备型号 */
|
|||
|
|
.device-model {
|
|||
|
|
color: #999;
|
|||
|
|
font-size: 13px;
|
|||
|
|
margin-bottom: 6px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 地点信息 */
|
|||
|
|
.device-place p {
|
|||
|
|
margin: 4px 0;
|
|||
|
|
font-size: 13px;
|
|||
|
|
color: #333;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.date_group {
|
|||
|
|
margin-bottom: 10px;
|
|||
|
|
padding: 20px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.date_header {
|
|||
|
|
padding: 8px 12px;
|
|||
|
|
border-radius: 4px 4px 0 0;
|
|||
|
|
font-weight: 500;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.device_item {
|
|||
|
|
padding: 10px 12px;
|
|||
|
|
background-color: #f7f8fc;
|
|||
|
|
border-radius: 4px;
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
position: relative;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.device_info {
|
|||
|
|
margin-bottom: 8px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.device_name {
|
|||
|
|
font-weight: 500;
|
|||
|
|
font-size: 14px;
|
|||
|
|
margin-bottom: 4px;
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.device_model {
|
|||
|
|
font-size: 12px;
|
|||
|
|
color: #666;
|
|||
|
|
margin-bottom: 4px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.time_info {
|
|||
|
|
font-size: 15px;
|
|||
|
|
color: rgba(97, 128, 183, 1);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.place_info {
|
|||
|
|
font-size: 13px;
|
|||
|
|
color: #666;
|
|||
|
|
line-height: 2;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.place_info p {
|
|||
|
|
margin: 2px 0;
|
|||
|
|
white-space: nowrap;
|
|||
|
|
overflow: hidden;
|
|||
|
|
text-overflow: ellipsis;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.control_btn {
|
|||
|
|
font-size: 14px;
|
|||
|
|
padding: 4px 12px;
|
|||
|
|
background: rgba(2, 124, 251, 0.06);
|
|||
|
|
color: #027cfb;
|
|||
|
|
border: none;
|
|||
|
|
border-radius: 4px;
|
|||
|
|
align-self: flex-end;
|
|||
|
|
cursor: pointer;
|
|||
|
|
transition: background 0.2s;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.control_btt {
|
|||
|
|
text-align: end;
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
.nodata{
|
|||
|
|
text-align: center;
|
|||
|
|
transform: translate(-1%,100%);
|
|||
|
|
left:50%;
|
|||
|
|
height: 30vh;
|
|||
|
|
}
|
|||
|
|
.nodataImg{
|
|||
|
|
width: 130px;
|
|||
|
|
}
|
|||
|
|
.title{
|
|||
|
|
color: #666;
|
|||
|
|
padding-top: 20px;
|
|||
|
|
}
|
|||
|
|
</style>
|