tuoheng_virtualAirPlan_web/src/views/carbin/components/beforeCheck.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 checkTimeNum = ref(0) //花费的检测时间
let checkTimeNum_timeout = null
let processInfoList = ref([]) //进度列表
let processTitle = ref('')
let processStatus = ref(null)
let precent = ref(0)

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) {
    // console.log(row)
    // console.log(row.id)
    let params = {
      airportId: row.id,
      taskId: row.task[0].id,
      // taskId: 4454,
    }
    let res = await beforeCheckApi(params)
    if (res.code == 0) {
      processInfoList = res.data.steps

      //总共花费的时间
      checkTimeNum.value = res.data.elapsedTime
      processTitle.value = res.data.description
      processStatus.value = res.data.status
      precent.value = res.data.progressPercentage
      // console.log(processStatus.value)
      // console.log(res.data)

      if (processStatus.value != null) {
        clearTimeout(checkTime)
        return
      }
      checkTime = setTimeout(() => {
        checkFn(row)
      }, 1000)
    }
  }
}

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 class="text-[18px] text-[#ffffff] font-medium">TAKEOFF PREPARING</span>
      <span v-if="processStatus == 'success'" class="success_text">SUCCESS</span>
      <span v-if="processStatus == 'error'" class="fail_text">FAILED</span>

      <a-spin :indicator="indicator" v-if="processStatus == null" />
    </div>
    <a-progress :percent="precent" :show-info="false" trailColor="#ffffff" />

    <div class="flex flex-row items-center justify-between text-sm">
      <span>
        <span class="text-[#ffffff]">耗时:</span>
        <span class="text-[#3BA3FB] ml-2">{{ checkTimeNum }}</span>
      </span>

      <span>
        <span class="text-[#ffffff]">{{ processTitle }}</span>
        <!-- <span class="text-[#FFA800] ml-2">50s</span> -->
      </span>
    </div>

    <div
      v-if="processInfoList.length > 0"
      class="w-full mt-6 py-3 px-1 border border-[#394C73] rounded-bl-md rounded-br-md"
    >
      <div
        class="w-full grid grid-cols-10 gap-0"
        v-for="(item, index) in processInfoList"
        :key="index"
      >
        <span class="iconfont icon-biaoqian text-[#ffffff] opacity-50 col-span-1 leading-5"></span>
        <span class="text-[#FFA800] text-xs col-span-2">{{ item.time }}</span>
        <span class="text-[#ffffff] text-xs col-span-5">{{ item.description }}</span>
        <span class="text-[#ffffff] text-xs 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;
}
</style>