<!--
|
* @Author : yuan
|
* @Date : 2025-06-17 09:50:12
|
* @LastEditors : yuan
|
* @LastEditTime : 2025-07-05 16:23:32
|
* @FilePath : \src\components\DeviceJobDetails\HistoryDronePopup.vue
|
* @Description :
|
* Copyright 2025 OBKoro1, All Rights Reserved.
|
* 2025-06-17 09:50:12
|
-->
|
<template>
|
<div class="history-drone-map-popup">
|
<div class="container">
|
<div class="header">
|
{{ props.data.name }}
|
|
<el-icon class="header-close" @click="props.removeLabel(props.data)">
|
<Close />
|
</el-icon>
|
</div>
|
|
<div class="content">
|
<div class="content-item cg">
|
<span class="content-item-title">飞行成果数：</span>
|
|
<div class="content-item-category" v-html="flyResultNum"></div>
|
</div>
|
|
<div class="content-item sc">
|
<span class="content-item-title">飞行时长：</span>
|
|
<div class="content-item-category" v-html="flyTime"></div>
|
</div>
|
|
<div class="content-item jl">
|
<span class="content-item-title">飞行距离：</span>
|
|
<div class="content-item-category" v-html="flyDistance"></div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script setup>
|
import { Close } from '@element-plus/icons-vue'
|
|
const props = defineProps(['data', 'removeLabel'])
|
|
const flyResultNum = computed(() => {
|
let flyResultNum = props.data?.fly_result_num || '--'
|
|
if (flyResultNum !== '--') {
|
return `
|
<span class="content-item-category-num">${flyResultNum}</span>
|
<span class="content-item-category-unit">个</span>
|
`
|
} else {
|
return `
|
<span class="content-item-category-num">${flyResultNum}</span>
|
`
|
}
|
})
|
|
const flyTime = computed(() => {
|
let flyTime = props.data?.fly_time || '--'
|
if (flyTime > 60) {
|
const minute = Math.floor(flyTime / 60)
|
const second = Math.round(flyTime % 60)
|
|
return `
|
<span class="content-item-category-num">${minute}</span>
|
<span class="content-item-category-unit">m</span>
|
<span class="content-item-category-num">${second}</span>
|
<span class="content-item-category-unit">s</span>
|
`
|
} else {
|
if (flyTime !== '--') {
|
flyTime = Math.round(flyTime)
|
|
return `
|
<span class="content-item-category-num">${flyTime}</span>
|
<span class="content-item-category-unit">s</span>
|
`
|
} else {
|
return `
|
<span class="content-item-category-num">${flyTime}</span>
|
`
|
}
|
}
|
})
|
|
const flyDistance = computed(() => {
|
let distance = props.data?.fly_distance || '--'
|
|
if (distance > 1000) {
|
distance = (distance / 1000).toFixed(2)
|
|
return `
|
<span class="content-item-category-num">${distance}</span>
|
<span class="content-item-category-unit">km</span>
|
`
|
} else {
|
if (distance !== '--') {
|
distance = distance.toFixed(2)
|
|
return `
|
<span class="content-item-category-num">${distance}</span>
|
<span class="content-item-category-unit">m</span>
|
`
|
} else {
|
return `
|
<span class="content-item-category-num">${distance}</span>
|
`
|
}
|
}
|
})
|
|
const list = ref([
|
{ name: '空闲中', value: 0, color: 'rgb(6, 217, 87)' },
|
{ name: '作业', value: 0, color: '#FFA768' },
|
{ name: '离线中', value: 0, color: '#FF7373' },
|
])
|
const loading = ref(true)
|
|
const dataObj = ref({
|
device_num: 0,
|
jobNum: 0,
|
region_name: '',
|
})
|
onMounted(async () => {
|
loading.value = true
|
|
loading.value = false
|
})
|
</script>
|
<style scoped lang="scss">
|
.history-drone-map-popup {
|
position: relative;
|
width: 200px;
|
height: 156px;
|
background: url('@/assets/images/historyMapPopup/popup-bg.png') no-repeat center / 100% 100%;
|
backdrop-filter: blur(4px);
|
|
.container {
|
padding: 6px;
|
display: flex;
|
flex-direction: column;
|
position: absolute;
|
bottom: 0;
|
width: 200px;
|
height: 156px;
|
// background: rgba(3, 13, 33, 0.4);
|
border-radius: 10px;
|
|
.header {
|
margin: 0 10px;
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
height: 34px;
|
font-family: Source Han Sans CN, Source Han Sans CN;
|
font-weight: bold;
|
font-size: 16px;
|
color: #ffffff;
|
text-align: left;
|
font-style: normal;
|
text-transform: none;
|
border-bottom: 2px solid rgba(255, 255, 255, 0.2);
|
|
.header-close {
|
display: flex;
|
align-items: center;
|
width: 16px;
|
cursor: pointer;
|
}
|
}
|
|
.content {
|
height: 0;
|
flex: 1;
|
display: flex;
|
flex-direction: column;
|
|
&-item {
|
padding: 0px 16px 9px 32px;
|
position: relative;
|
height: 0;
|
flex: 1;
|
display: flex;
|
align-items: flex-end;
|
justify-content: space-between;
|
|
&::after {
|
content: '';
|
position: absolute;
|
top: 50%;
|
left: 14px;
|
width: 18px;
|
height: 18px;
|
transform: translate(0, -50%);
|
}
|
|
&.cg::after {
|
background: url('@/assets/images/historyMapPopup/1.png') no-repeat center / 100% 100%;
|
}
|
|
&.sc::after {
|
background: url('@/assets/images/historyMapPopup/2.png') no-repeat center / 100% 100%;
|
}
|
|
&.jl::after {
|
background: url('@/assets/images/historyMapPopup/3.png') no-repeat center / 100% 100%;
|
}
|
|
& * {
|
height: 100%;
|
display: flex;
|
align-items: flex-end;
|
}
|
|
&-title {
|
font-family: Source Han Sans CN-Regular;
|
font-size: 14px;
|
color: #dfe9fe;
|
}
|
|
::v-deep(.content-item-category) {
|
.content-item-category-num {
|
font-family: Source Han Sans CN-Bold;
|
font-weight: Bold;
|
color: #ffffff;
|
font-size: 14px;
|
}
|
|
.content-item-category-unit {
|
font-family: Source Han Sans CN-Regular;
|
font-size: 14px;
|
color: #dfe9fe;
|
}
|
}
|
}
|
}
|
}
|
}
|
</style>
|
