chuangte/bick_back
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

11

Browse Source
This commit is contained in:
tx 2024-12-27 10:29:51 +08:00
parent fcaba878f5
commit 7c86916a53
2 changed files with 177 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

212
src/components/Map/location/LocationMapss.vue
View File

@ -1,5 +1,5 @@
<template>
<div class="place-search-map" :style="{ width: width, height: height }" v-loading="loading">
<div class="place-search-map" :style="{ width: width, height: height }" >
<div id="container"></div>
<!-- 轨迹回放控制面板 -->
@ -72,6 +72,10 @@
<span class="label">锁状态:</span>
<span class="value">{{ currentLockStatus }}</span>
</div>
<div class="info-item">
<span class="label">电门:</span>
<span class="value">{{ currentEleLock }}</span>
</div>
</div>
</div>
</div>
@ -162,7 +166,8 @@ export default {
parkingPolygons: [],
currentStatus: '',
currentBattery: '',
currentLockStatus: ''
currentLockStatus: '',
currentEleLock: ''
}
},
@ -175,7 +180,7 @@ export default {
// 获取区域信息
await this.getAreas()
// 获取轨迹数据（移到最后执行）
} catch (error) {
console.error('初始化失败:', error)
this.$message.error('初始化失败')
@ -217,6 +222,35 @@ export default {
});
});
},
clearTrackData() {
if (this.polyline) {
this.map.remove(this.polyline);
}
if (this.passedPolyline) {
this.map.remove(this.passedPolyline);
}
if (this.marker) {
this.map.remove(this.marker);
}
// 清除起终点标记
if (this.startMarker) {
this.map.remove(this.startMarker);
}
if (this.endMarker) {
this.map.remove(this.endMarker);
}
this.trackPoints = [];
this.currentProgress = 0;
this.currentPoint = null;
this.currentPointTime = '';
this.currentSpeed = '0.00';
this.location = '';
this.currentStatus = '';
this.currentBattery = '';
this.currentLockStatus = '';
this.currentEleLock = ''
},
formatStatus(status) {
const statusMap = {
'0': '仓库中',
@ -256,7 +290,7 @@ export default {
initMarker() {
this.removeAllMarker()
if (this.currentLng != null && this.currentLat != null) {
this.updateTrackData()
this.updateTrackData()
this.addArea(JSON.parse(this.area.boundaryStr) || []);
//停车区
this.parkingList.forEach(parking => {
@ -576,6 +610,11 @@ export default {
async updateTrackData() {
try {
// 停止当前播放
this.stopPlayback()
// 清除旧数据
this.clearTrackData()
const params = {
sn: this.deviceSn,
startTime: this.startTime,
@ -586,23 +625,26 @@ export default {
if (res.code === 200) {
if (!res.data?.length) {
this.$message.warning('该时间段内无轨迹数据')
this.clearTrackData()
return
}
// 确保数据处理和绘制都执行
// 处理新的轨迹数据
this.trackPoints = res.data.map(point => ({
latitude: parseFloat(point.latitude),
longitude: parseFloat(point.longitude),
time: point.at,
status: point.status,
onlineStatus: point.onlineStatus
onlineStatus: point.onlineStatus,
bat: point.bat,
lockStatus: point.lockStatus,
q: point.q
}))
// 立即绘制轨迹线和起终点标记
// 绘制新的轨迹线
this.drawTrackLine()
// 重置播放位置
this.resetPlayback()
// 初始化播放位置
this.currentProgress = 0
this.updateMapPoint(0)
}
} catch (error) {
console.error("获取轨迹数据失败:", error)
@ -610,6 +652,48 @@ export default {
}
},
clearTrackData() {
// 停止播放定时器
if (this.playbackTimer) {
clearInterval(this.playbackTimer)
this.playbackTimer = null
}
// 清除地图上的元素
if (this.polyline) {
this.map.remove(this.polyline)
this.polyline = null
}
if (this.passedPolyline) {
this.map.remove(this.passedPolyline)
this.passedPolyline = null
}
if (this.marker) {
this.map.remove(this.marker)
this.marker = null
}
if (this.startMarker) {
this.map.remove(this.startMarker)
this.startMarker = null
}
if (this.endMarker) {
this.map.remove(this.endMarker)
this.endMarker = null
}
// 重置数据
this.trackPoints = []
this.currentProgress = 0
this.currentPoint = null
this.currentPointTime = ''
this.currentSpeed = '0.00'
this.location = ''
this.currentStatus = ''
this.currentBattery = ''
this.currentLockStatus = ''
this.currentEleLock = ''
this.isPlaying = false
},
processTrackData(data) {
this.trackPoints = data.map(point => ({
latitude: parseFloat(point.latitude),
@ -631,6 +715,12 @@ export default {
if (this.polyline) {
this.map.remove(this.polyline)
}
if (this.passedPolyline) {
this.map.remove(this.passedPolyline)
}
if (this.marker) {
this.map.remove(this.marker)
}
// 添加轨迹线
this.polyline = new this.AMap.Polyline({
@ -701,6 +791,7 @@ export default {
this.currentStatus = ''
this.currentBattery = ''
this.currentLockStatus = ''
this.currentEleLock = ''
},
updateMapPoint(index) {
@ -710,43 +801,91 @@ export default {
this.currentPoint = point
this.currentPointTime = point.time
this.location = `${point.longitude}, ${point.latitude}`
// 添加新字段的更新
console.log(point,'pointpointpoint');
// 更新状态信息
this.currentStatus = this.formatStatus(point.status)
this.currentBattery = point.bta == null ? '未知' : (point.bta / 10).toFixed(1) + 'V'
this.currentBattery = point.bat == null ? '未知' : (point.bat / 10).toFixed(1) + 'V'
this.currentLockStatus = point.lockStatus == '0' ? '关锁' : '开锁'
this.currentEleLock = point.q == null ? '未知' : (point.q == '0' ? '关锁' : '开锁')
// 计算速度
if (index > 0) {
const prevPoint = this.trackPoints[index - 1]
const distance = this.calculateDistance(
// 使用 Haversine 公式计算实际距离（单位：千米）
const distance = this.calculateHaversineDistance(
prevPoint.latitude,
prevPoint.longitude,
point.latitude,
point.longitude
)
const timeGap = (new Date(point.time) - new Date(prevPoint.time)) / 1000
this.currentSpeed = timeGap > 0 ? ((distance / timeGap) * 3.6).toFixed(1) : '0.00'
// 计算时间差（单位：小时）
const timeGap = (new Date(point.time) - new Date(prevPoint.time)) / (1000 * 3600)
// 计算速度（公里/小时）
this.currentSpeed = timeGap > 0 ? (distance / timeGap).toFixed(2) : '0.00'
} else {
this.currentSpeed = '0.00'
}
// 更新已经走过的轨迹线
this.updatePassedPolyline(index)
this.updateMarkerPosition(point)
// 更新标记位置
if (!this.marker) {
this.marker = new this.AMap.Marker({
position: [point.longitude, point.latitude],
icon: this.getMarkerIcon(point.status, point.onlineStatus),
offset: new this.AMap.Pixel(-12.5, -19.5)
})
this.map.add(this.marker)
} else {
this.marker.setPosition([point.longitude, point.latitude])
this.marker.setIcon(this.getMarkerIcon(point.status, point.onlineStatus))
}
},
// 添加 Haversine 距离计算方法
calculateHaversineDistance(lat1, lon1, lat2, lon2) {
// 地球半径（单位：千米）
const R = 6371
// 将经纬度转换为弧度
const dLat = this.toRad(lat2 - lat1)
const dLon = this.toRad(lon2 - lon1)
const radLat1 = this.toRad(lat1)
const radLat2 = this.toRad(lat2)
// Haversine 公式
const a = Math.sin(dLat / 2) * Math.sin(dLat / 2) +
Math.sin(dLon / 2) * Math.sin(dLon / 2) * Math.cos(radLat1) * Math.cos(radLat2)
const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a))
// 返回距离（单位：千米）
return R * c
},
// 角度转弧度
toRad(degrees) {
return degrees * Math.PI / 180
},
updatePassedPolyline(index) {
const passedPath = this.trackPoints
.slice(0, index + 1)
.map(p => [p.longitude, p.latitude])
if (!this.passedPolyline) {
this.passedPolyline = new this.AMap.Polyline({
path: passedPath,
strokeColor: "#AF5",
strokeWeight: 6
})
this.map.add(this.passedPolyline)
} else {
this.passedPolyline.setPath(passedPath)
// 移除旧的已经走过的轨迹线
if (this.passedPolyline) {
this.map.remove(this.passedPolyline)
}
// 创建新的已经走过的轨迹线
this.passedPolyline = new this.AMap.Polyline({
path: passedPath,
strokeColor: "#AF5",
strokeWeight: 6
})
this.map.add(this.passedPolyline)
},
updateMarkerPosition(point) {
@ -770,17 +909,14 @@ export default {
},
startPlayback() {
if (this.playbackTimer) return
if (this.playbackTimer) {
clearInterval(this.playbackTimer)
}
this.playbackTimer = setInterval(() => {
if (this.currentProgress >= this.trackPoints.length - 1) {
this.pausePlayback()
this.isPlaying = false
// 添加延时，让最后一个点的位置显示片刻后再回到起点
setTimeout(() => {
this.currentProgress = 0
this.updateMapPoint(0)
}, 1000)
return
}
this.currentProgress++
@ -794,12 +930,12 @@ export default {
this.playbackTimer = null
}
},
stopPlayback() {
this.pausePlayback()
if (this.playbackTimer) {
clearInterval(this.playbackTimer)
this.playbackTimer = null
}
this.isPlaying = false
this.currentProgress = 0
this.updateMapPoint(0) // 更新到起始点，而不是清除轨迹
},
changeSpeed(direction) {
@ -852,13 +988,15 @@ export default {
},
onSliderChange(value) {
this.stopPlayback() // 停止当前播放
this.currentProgress = value
this.updateMapPoint(value)
},
onSliderChanging(value) {
// this.stopPlayback() // 停止当前播放
this.updateMapPoint(value)
}
},
}
}
</script>

6
src/views/system/device/index.vue
View File

@ -1349,7 +1349,7 @@ handleAreaChange(val) {
// this.fetchData(response.data.deptId)
// this.open = true;
// this.title = "修改设备1";
if (response.data.deptId) {
selectAreaListByDeptId(response.data.deptId).then((res) => {
// 方案1: 使用Vue.set确保响应式更新
setTimeout(() => {
@ -1375,9 +1375,7 @@ handleAreaChange(val) {
}).finally(() => {
this.isUpdating = false;
});
} else {
this.isUpdating = false;
}
});
},
handleListing(row) {