150 lines
4.0 KiB
Vue
150 lines
4.0 KiB
Vue
<template>
|
|
<div class="h-100">
|
|
<map-box ref="mapbox">
|
|
<template #content>
|
|
<BatteryStatus :plane="plane" />
|
|
<PlaneStatus :plane="plane" />
|
|
<ControllerTabs :plane="plane" @mapXOffset="mapXOffset" @makeRoute="makeRoute" @clearRoute="clearRoute" />
|
|
</template>
|
|
</map-box>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import mqtt from '@/utils/mqtt'
|
|
import MapBox from '@/components/MapBox'
|
|
import ControllerTabs from '@/components/ControllerTabs'
|
|
import BatteryStatus from '@/components/BatteryStatus'
|
|
import PlaneStatus from '@/components/PlaneStatus'
|
|
|
|
export default {
|
|
name: 'Planes',
|
|
data () {
|
|
return {
|
|
mapBoxKey: '', // 初始化一个变量用于控制map-box组件的重新渲染
|
|
planesId: this.$route.params.id,
|
|
localCount: 0 // 本地存储计数器
|
|
}
|
|
},
|
|
components: {
|
|
MapBox,
|
|
ControllerTabs,
|
|
BatteryStatus,
|
|
PlaneStatus
|
|
},
|
|
computed: {
|
|
plane () {
|
|
if (this.$store.state.airList.length > 0) {
|
|
return this.$store.state.airList.find(plane => plane.id === this.planesId)
|
|
}
|
|
return null
|
|
},
|
|
position () {
|
|
if (this.plane) {
|
|
if (this.plane.planeState.position.length > 0) {
|
|
return this.plane.planeState.position
|
|
} else {
|
|
return []
|
|
}
|
|
} else {
|
|
return []
|
|
}
|
|
},
|
|
/**
|
|
* @description: 侧边栏显隐
|
|
*/
|
|
isCollapse () {
|
|
return this.$store.state.app.isCollapse
|
|
}
|
|
},
|
|
methods: {
|
|
/**
|
|
* @description: 创建飞机图标
|
|
*/
|
|
makePlane (plane) {
|
|
console.log('hi')
|
|
let planeDefaultLngLat
|
|
if (localStorage.getItem(plane.name)) { // 从本地缓存 拿飞机得初始位置
|
|
planeDefaultLngLat = JSON.parse(localStorage.getItem(plane.name))
|
|
plane.lng = planeDefaultLngLat.lng
|
|
plane.lat = planeDefaultLngLat.lat
|
|
} else {
|
|
plane.lng = 0
|
|
plane.lat = 0
|
|
}
|
|
this.$refs.mapbox.removePlanes()// 先清除画布上现有的飞机
|
|
this.$refs.mapbox.makePlane(plane)// 创建飞机
|
|
// this.$refs.mapbox.goto({ lng: plane.lng, lat: plane.lat })// 跳转到飞机位置
|
|
},
|
|
/**
|
|
* @description: 创建航线
|
|
*/
|
|
makeRoute (routeData) {
|
|
this.$refs.mapbox.makeRoute(routeData)
|
|
},
|
|
/**
|
|
* @description: 清楚航线
|
|
*/
|
|
clearRoute () {
|
|
this.$refs.mapbox.clearRoute()
|
|
},
|
|
/**
|
|
* @description: 屏幕横移
|
|
* @param {*} val 正数向左移动 负数向右移动
|
|
* @param {*} y 正数向上移动 负数向下移动
|
|
*/
|
|
mapXOffset (x, y) {
|
|
this.$refs.mapbox.mapXOffset(x, y)
|
|
}
|
|
},
|
|
mounted () {
|
|
if (this.plane) {
|
|
this.makePlane(this.plane) // 创建飞机图标
|
|
}
|
|
},
|
|
watch: {
|
|
plane: {
|
|
handler (val) {
|
|
this.makePlane(val)// 有飞机数据之后 在地图上创建飞机
|
|
if (!val.planeState.battCapacity) {
|
|
mqtt.publishFun(`cmd/${this.plane.macadd}`, '{"getBattCapacity":1}')// 发送设置飞机状态主题 请求飞控返回 电池总容量
|
|
}
|
|
},
|
|
deep: true
|
|
},
|
|
/**
|
|
* @description: 更新飞机位置 并画出轨迹 跟随飞机
|
|
*/
|
|
position: {
|
|
handler (val) {
|
|
const len = val.length
|
|
if (len > 2) {
|
|
const lng = val[len - 1][0]
|
|
const lat = val[len - 1][1]
|
|
this.localCount++// 计数器 叠加
|
|
if (this.localCount % 100 === 1) {
|
|
localStorage.setItem(this.plane.name, `{ "lng": ${lng}, "lat": ${lat} }`)
|
|
}
|
|
this.$refs.mapbox.setPlaneLngLat({ lng: lng, lat: lat }, 0, val, false)// 更新飞机位置 并画出轨迹 跟随飞机
|
|
}
|
|
},
|
|
deep: true
|
|
},
|
|
/**
|
|
* @description: 侧边栏缩进有变化时 地图重新自适应
|
|
*/
|
|
isCollapse: {
|
|
handler (val) {
|
|
if (val) {
|
|
setTimeout(() => {
|
|
this.$refs.mapbox.handleResize()
|
|
}, 500)
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped></style>
|