104 lines
2.7 KiB
Vue
104 lines
2.7 KiB
Vue
<template>
|
|
<div>
|
|
<el-row class="m-15" type="flex" justify="space-between">
|
|
<el-col :span="2">
|
|
<PublicTag icon="icon-weixing" :val="plane.planeState.satCount" unit="颗" state="normal" />
|
|
</el-col>
|
|
<el-col :span="2">
|
|
<PublicTag icon="icon-weixing" :val="plane.planeState.voltagBattery" unit="V" state="normal" />
|
|
</el-col>
|
|
<el-col :span="2">
|
|
<PublicTag icon="icon-weixing" :val="plane.planeState.loadweight" unit="克" state="normal" />
|
|
</el-col>
|
|
<el-col :span="2">
|
|
<PublicTag icon="icon-gaodu" :val="plane.planeState.state" unit="状" state="normal" />
|
|
</el-col>
|
|
<el-col :span="3">
|
|
<HeartTag :heartBeat="plane.planeState.heartBeat" :heartRandom="plane.planeState.heartRandom"
|
|
:getPlaneMode="plane.planeState.getPlaneMode" />
|
|
</el-col>
|
|
<el-col :span="2">
|
|
<PublicTag icon="icon-mianxingdiaogou" :val="plane.planeState.hookstatus" unit="" state="normal" />
|
|
</el-col>
|
|
<el-col :span="2">
|
|
<PublicTag icon="icon-gaodu" :val="plane.planeState.positionAlt" unit="米" state="normal" />
|
|
</el-col>
|
|
<el-col :span="2">
|
|
<PublicTag icon="icon-gaodu" :val="plane.planeState.currentBattery" unit="安" state="danger" />
|
|
</el-col>
|
|
<el-col :span="2">
|
|
<PublicTag icon="icon-gaodu" :val="plane.planeState.battCapacity" unit="%" state="danger" />
|
|
</el-col>
|
|
</el-row>
|
|
<div class="batteryBox">
|
|
<!-- <el-progress :percentage="plane.planeState.batteryRemaining" :show-text="false" stroke-width="2"></el-progress>
|
|
<tooltip :horizontalPosition="'80%'" backgroundColor="#ff3333">
|
|
H
|
|
</tooltip> -->
|
|
</div>
|
|
</div>
|
|
|
|
</template>
|
|
|
|
<script>
|
|
import HeartTag from '@/components/Tag/HeartTag'
|
|
import PublicTag from '@/components/Tag/PublicTag'
|
|
// import Tooltip from '@/components/Tag/Tooltip'
|
|
import geodist from 'geodist'
|
|
|
|
export default {
|
|
name: 'PlaneStatus',
|
|
data () {
|
|
return {
|
|
distance: 0
|
|
}
|
|
},
|
|
props: {
|
|
plane: {
|
|
typeof: 'Object',
|
|
deep: true
|
|
}
|
|
},
|
|
components: {
|
|
HeartTag,
|
|
PublicTag
|
|
// Tooltip
|
|
},
|
|
computed: {
|
|
},
|
|
watch: {
|
|
distance (val) {
|
|
console.log(val + '米')
|
|
}
|
|
},
|
|
methods: {},
|
|
created () {
|
|
try {
|
|
const point1 = { lat: 52.518611, lon: 13.408056 }
|
|
const point2 = { lat: 51.507222, lon: -0.1275 }
|
|
this.distance = geodist(point1, point2, { unit: 'meters' })
|
|
} catch (error) {
|
|
console.error('Error calculating distance:', error)
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
@import "@/styles/theme.scss";
|
|
|
|
.el-row {
|
|
z-index: 90;
|
|
}
|
|
|
|
.batteryBox {}
|
|
|
|
.batteryBox .el-progress {
|
|
z-index: 90;
|
|
}
|
|
|
|
.batteryBox .el-tooltip {
|
|
z-index: 90;
|
|
}
|
|
</style>
|