131 lines
3.0 KiB
Vue
131 lines
3.0 KiB
Vue
|
<template>
|
||
|
|
<div class="flyHistroy">
|
||
|
|
<span class="flyHistroy_name" @click="back">返回</span>
|
||
|
|
<span class="flyHistroy_name">{{ data.missionName }}</span>
|
||
|
|
<div class="flyHistroy_bottom">
|
||
|
|
<div class="bottom_item">
|
||
|
|
<div class="title">飞行器</div>
|
||
|
|
<div class="content">M3TD-庆福广场</div>
|
||
|
|
</div>
|
||
|
|
<div class="bottom_item">
|
||
|
|
<div class="title">任务开始时间</div>
|
||
|
|
<div class="content">{{ data.createdAt }}</div>
|
||
|
|
</div>
|
||
|
|
<div class="bottom_item">
|
||
|
|
<div class="title">任务结束时间</div>
|
||
|
|
<div class="content">
|
||
|
|
{{ parseTime(data.lastTime, '{y}-{m}-{d} {h}:{i}:{s}') }}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="bottom_item">
|
||
|
|
<div class="title">轨迹最后更新时间</div>
|
||
|
|
<div class="content">
|
||
|
|
{{ parseTime(data.lastTime, '{y}-{m}-{d} {h}:{i}:{s}') }}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="bottom_item">
|
||
|
|
<div class="title">实际飞行距离</div>
|
||
|
|
<div class="content">{{ length }}m</div>
|
||
|
|
</div>
|
||
|
|
<div class="bottom_item">
|
||
|
|
<div class="title">实际飞行时长</div>
|
||
|
|
<div class="content">{{ time }}</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import { parseTime } from '@/utils/index.ts';
|
||
|
|
export default {
|
||
|
|
name: 'flyHistroy',
|
||
|
|
props: {
|
||
|
|
data: {
|
||
|
|
type: Object,
|
||
|
|
default: () => {}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
points: [],
|
||
|
|
length: '',
|
||
|
|
time: ''
|
||
|
|
};
|
||
|
|
},
|
||
|
|
// 监听data
|
||
|
|
// watch: {
|
||
|
|
// data: function handle(newVal, oldVal) {
|
||
|
|
// let pointss = JSON.parse(newVal);
|
||
|
|
// this.renderRouter(pointss.points);
|
||
|
|
// }
|
||
|
|
// },
|
||
|
|
mounted() {
|
||
|
|
let pointss = JSON.parse(this.data.points);
|
||
|
|
this.renderRouter(pointss.points);
|
||
|
|
},
|
||
|
|
|
||
|
|
methods: {
|
||
|
|
parseTime(val) {
|
||
|
|
return parseTime(val);
|
||
|
|
},
|
||
|
|
renderRouter(positions) {
|
||
|
|
let airLine = new YJ.Obj.newAirLine(
|
||
|
|
{
|
||
|
|
positions,
|
||
|
|
frustumShow: false,
|
||
|
|
keyboard: false
|
||
|
|
},
|
||
|
|
window.Earth1.viewer
|
||
|
|
);
|
||
|
|
window.airLine = airLine;
|
||
|
|
this.length = airLine.countLength();
|
||
|
|
this.time = airLine.countTime();
|
||
|
|
window.airLine.flyTo();
|
||
|
|
// console.log("airLine", airLine);
|
||
|
|
},
|
||
|
|
// 返回计划库
|
||
|
|
back() {
|
||
|
|
this.$emit('back');
|
||
|
|
}
|
||
|
|
}
|
||
|
|
};
|
||
|
|
</script>
|
||
|
|
<style lang="scss">
|
||
|
|
.flyHistroy {
|
||
|
|
position: absolute;
|
||
|
|
top: 8%;
|
||
|
|
left: 20px;
|
||
|
|
z-index: 20;
|
||
|
|
color: #fff;
|
||
|
|
|
||
|
|
&_name {
|
||
|
|
border-radius: 8px;
|
||
|
|
padding: 8px 16px;
|
||
|
|
background: linear-gradient(180deg, rgba(0, 255, 255, 0.2) 0%, rgba(0, 255, 255, 0) 100%), rgba(0, 0, 0, 0.6);
|
||
|
|
backdrop-filter: blur(2px);
|
||
|
|
}
|
||
|
|
|
||
|
|
&_bottom {
|
||
|
|
position: fixed;
|
||
|
|
bottom: 10%;
|
||
|
|
left: 30px;
|
||
|
|
height: 80px;
|
||
|
|
width: 60%;
|
||
|
|
display: flex;
|
||
|
|
justify-content: space-between;
|
||
|
|
|
||
|
|
.title {
|
||
|
|
font-size: 16px;
|
||
|
|
margin-bottom: 10px;
|
||
|
|
font-weight: 400;
|
||
|
|
}
|
||
|
|
|
||
|
|
.content {
|
||
|
|
font-size: 18px;
|
||
|
|
color: rgba(0, 255, 255, 1);
|
||
|
|
font-weight: 600;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|