326 lines
8.8 KiB
Vue
326 lines
8.8 KiB
Vue
<script setup>
|
|
//飞行前的检查面板
|
|
import {
|
|
ref,
|
|
h,
|
|
defineAsyncComponent,
|
|
onMounted,
|
|
onUnmounted,
|
|
watch,
|
|
toRaw,
|
|
defineProps,
|
|
reactive,
|
|
} from 'vue'
|
|
import { LoadingOutlined } from '@ant-design/icons-vue'
|
|
import { beforeCheckApi } from '@/apis/common'
|
|
|
|
const props = defineProps({
|
|
row: Object, //当前数据
|
|
})
|
|
let isChecked = ref(false)
|
|
let checkTime = null
|
|
let isFirstQuery = false //是否是第一次请求
|
|
let checkTimeNum = ref(0) //花费的检测时间
|
|
let checkTimeNum_timeout = null
|
|
let processInfoList = ref([]) //进度列表
|
|
let processTitle = ref('')
|
|
let processStatus = ref(null)
|
|
let precent = ref(0)
|
|
let progressStatus = ref('')
|
|
|
|
const indicator = h(LoadingOutlined, {
|
|
style: {
|
|
fontSize: '20px',
|
|
color: '#ffffff',
|
|
},
|
|
spin: true,
|
|
})
|
|
//开始计时
|
|
const startTimeFn = () => {
|
|
checkTimeNum.value++
|
|
checkTimeNum_timeout = setTimeout(() => {
|
|
startTimeFn()
|
|
}, 1000)
|
|
}
|
|
//自检请求
|
|
const checkFn = async (row) => {
|
|
if (row) {
|
|
let params = {
|
|
airportId: row.id,
|
|
taskId: row.task[0].taskId,
|
|
// taskId: 4454,
|
|
}
|
|
//先隐藏下面
|
|
let res = await beforeCheckApi(params)
|
|
|
|
if (res.code == 0) {
|
|
/*测试数据
|
|
res = {
|
|
code: 0,
|
|
msg: '操作成功',
|
|
data: {
|
|
description: '[地面站]无人机起飞成功',
|
|
progressPercentage: 100,
|
|
elapsedSeconds: 114,
|
|
taskStartTime: '2025-08-22 15:11:03',
|
|
taskStartTimestampMs: 1755846663000,
|
|
status: 'success',
|
|
steps: [
|
|
{
|
|
description: '[综管]航线飞行任务接收成功',
|
|
time: '15:11:03',
|
|
diffSeconds: '',
|
|
status: 'success',
|
|
},
|
|
{
|
|
description: '[机巢]机巢设备自检通过',
|
|
time: '15:11:12',
|
|
diffSeconds: '9s',
|
|
status: 'success',
|
|
},
|
|
{
|
|
description: '[机巢]机场气象环境检查通过',
|
|
time: '15:11:13',
|
|
diffSeconds: '1s',
|
|
status: 'success',
|
|
},
|
|
{
|
|
description: '[机巢]升平台成功',
|
|
time: '15:11:40',
|
|
diffSeconds: '27s',
|
|
status: 'success',
|
|
},
|
|
{
|
|
description: '[机巢]打开灯光成功',
|
|
time: '15:11:40',
|
|
diffSeconds: '0s',
|
|
status: 'success',
|
|
},
|
|
{
|
|
description: '[机巢]打开图传成功',
|
|
time: '15:11:41',
|
|
diffSeconds: '1s',
|
|
status: 'success',
|
|
},
|
|
{
|
|
description: '[机巢]无人机开机成功',
|
|
time: '15:11:43',
|
|
diffSeconds: '2s',
|
|
status: 'success',
|
|
},
|
|
{
|
|
description: '[机巢]出舱成功',
|
|
time: '15:11:56',
|
|
diffSeconds: '13s',
|
|
status: 'success',
|
|
},
|
|
{
|
|
description: '[地面站]无人机连接成功',
|
|
time: '15:11:56',
|
|
diffSeconds: '0s',
|
|
status: 'success',
|
|
},
|
|
{
|
|
description: '[地面站]获取无人机环境检查成功',
|
|
time: '15:12:45',
|
|
diffSeconds: '49s',
|
|
status: 'success',
|
|
},
|
|
{
|
|
description: '[地面站]无人机写入航线',
|
|
time: '15:12:48',
|
|
diffSeconds: '3s',
|
|
status: 'success',
|
|
},
|
|
{
|
|
description: '[综管]无人机起飞条件检查成功',
|
|
time: '15:12:53',
|
|
diffSeconds: '5s',
|
|
status: 'success',
|
|
},
|
|
{
|
|
description: '[地面站]无人机起飞成功',
|
|
time: '15:12:57',
|
|
diffSeconds: '',
|
|
status: 'success',
|
|
},
|
|
],
|
|
},
|
|
traceId: '',
|
|
}
|
|
*/
|
|
|
|
processInfoList = res.data.steps
|
|
|
|
//总共花费的时间
|
|
if (!isFirstQuery) {
|
|
checkTimeNum.value = Number(res.data.elapsedSeconds)
|
|
}
|
|
|
|
processTitle.value = res.data.description
|
|
processStatus.value = res.data.status
|
|
precent.value = res.data.progressPercentage
|
|
// console.log(processStatus.value)
|
|
// console.log(res.data)
|
|
|
|
if (precent.value == 100) {
|
|
clearTimeout(checkTime)
|
|
return
|
|
}
|
|
if (processStatus.value == 'error') {
|
|
progressStatus.value = 'exception' //进度条设置为红色
|
|
clearTimeout(checkTime)
|
|
return
|
|
}
|
|
if (!isFirstQuery) {
|
|
//第一次进入
|
|
isFirstQuery = true
|
|
if (processStatus.value != 'error' && precent.value != 100) {
|
|
startTimeFn()
|
|
}
|
|
}
|
|
|
|
checkTime = setTimeout(() => {
|
|
checkFn(row)
|
|
}, 1000)
|
|
}
|
|
}
|
|
}
|
|
|
|
//临时代码啊
|
|
// checkFn({
|
|
// id: 1,
|
|
// task: [
|
|
// {
|
|
// taskId: 2,
|
|
// },
|
|
// ],
|
|
// })
|
|
//临时代码啊
|
|
|
|
watch(
|
|
() => props.row,
|
|
(val) => {
|
|
if (val.task.length > 0 && !isChecked.value) {
|
|
if (val.task[0].id) {
|
|
//自检请求
|
|
checkFn(val)
|
|
//watch里面不再执行此操作
|
|
isChecked.value = true
|
|
}
|
|
}
|
|
},
|
|
{ deep: true },
|
|
)
|
|
|
|
onMounted(() => {})
|
|
onUnmounted(() => {
|
|
clearTimeout(checkTime)
|
|
clearTimeout(checkTimeNum_timeout)
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<div class="p-2.5">
|
|
<div class="flex flex-row items-center justify-between mt-4">
|
|
<span>
|
|
<span class="text-[18px] text-[#ffffff] font-medium text-xl">TAKEOFF PREPARING</span>
|
|
<span
|
|
v-if="processStatus == 'success' && precent == 100"
|
|
class="success_text text-xl text-[#50d890] ml-3"
|
|
>SUCCESS</span
|
|
>
|
|
<span v-if="processStatus == 'error'" class="fail_text text-xl text-[#F12626] ml-3"
|
|
>FAILED</span
|
|
>
|
|
</span>
|
|
|
|
<a-spin :indicator="indicator" v-if="precent != 100 && processStatus != 'error'" />
|
|
<span
|
|
class="iconfont icon-baocuo text-[#F12626] text-xl"
|
|
v-if="processStatus == 'error'"
|
|
></span>
|
|
<span
|
|
class="iconfont icon-duihao2 text-[#50d890] text-xl"
|
|
v-if="processStatus == 'success' && precent == 100"
|
|
></span>
|
|
</div>
|
|
<a-progress
|
|
:percent="precent"
|
|
:status="progressStatus"
|
|
:show-info="false"
|
|
trailColor="#ffffff"
|
|
/>
|
|
|
|
<div class="flex flex-row items-center justify-between text-sm">
|
|
<span>
|
|
<span class="text-[#ffffff] text-base">耗时:</span>
|
|
<span class="text-[#3BA3FB] ml-2 text-base">{{ checkTimeNum }}S</span>
|
|
</span>
|
|
|
|
<span>
|
|
<span class="text-[#ffffff] text-base">{{ processTitle }}</span>
|
|
<!-- <span class="text-[#FFA800] ml-2">50s</span> -->
|
|
</span>
|
|
</div>
|
|
|
|
<div
|
|
v-if="processInfoList.length > 0"
|
|
:class="
|
|
processStatus == 'error'
|
|
? 'errorBox w-full mt-6 py-3 px-2 border border-[#F12626] rounded-bl-md rounded-br-md'
|
|
: 'w-full mt-6 py-3 px-2 border border-[#394C73] rounded-bl-md rounded-br-md'
|
|
"
|
|
>
|
|
<div
|
|
class="w-full grid grid-cols-10 gap-0 py-2"
|
|
v-for="(item, index) in processInfoList"
|
|
:key="index"
|
|
>
|
|
<span
|
|
class="iconfont icon-duihao2 text-[#50d890] col-span-1 text-xl"
|
|
v-if="item.status == 'success'"
|
|
></span>
|
|
<span
|
|
class="iconfont icon-chahao text-[#F12626] col-span-1 text-xl"
|
|
v-else-if="item.status == 'error'"
|
|
></span>
|
|
<span class="iconfont icon-biaoqian text-[#ffffff] col-span-1 text-xl" v-else></span>
|
|
|
|
<span class="text-[#FFA800] text-base col-span-2">{{ item.time }}</span>
|
|
|
|
<span class="text-[#50d890] text-base col-span-5" v-if="item.status == 'success'">{{
|
|
item.description
|
|
}}</span>
|
|
<span class="text-[#F12626] text-base col-span-5" v-else-if="item.status == 'error'">{{
|
|
item.description
|
|
}}</span>
|
|
<span class="text-[#ffffff] text-base col-span-5" v-else>{{ item.description }}</span>
|
|
<span class="text-[#ffffff] text-base col-span-2 text-right" v-if="item.diffSeconds != ''"
|
|
>耗时{{ item.diffSeconds }}</span
|
|
>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style lang="less" scoped>
|
|
.success_text {
|
|
font-weight: 500;
|
|
color: #3ba3fb;
|
|
background: linear-gradient(0deg, #5d8ad2 0%, #50d890 0%, #70da78 56.0791015625%, #a4e567 100%);
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
}
|
|
.fail_text {
|
|
font-weight: 500;
|
|
//color: #ffffff;
|
|
//background: linear-gradient(0deg, #de4747 0%, #f12626 100%);
|
|
//-webkit-background-clip: text;
|
|
//-webkit-text-fill-color: transparent;
|
|
}
|
|
.errorBox {
|
|
box-shadow: inset 0 0 5px 5px rgba(255, 0, 0, 0.5);
|
|
}
|
|
</style>
|