gphm/PHM-web/src/views/manage/sortie/sortieDetail.vue

<template>
  <div class="app-container">
    <el-button type="text" @click="back" class="backBtn">⇦返回</el-button>
    <el-descriptions title="用户信息" class="sortieDetail"  :contentStyle="{'font-weight': '700'}">
        <el-descriptions-item label="飞机编号">{{ sortieDetail.aircraftNumber }}</el-descriptions-item>
        <el-descriptions-item label="架次号">{{ sortieDetail.sortieNumber }}</el-descriptions-item>
        <el-descriptions-item label="日期">2023/05/19</el-descriptions-item>
        <el-descriptions-item label="任务类型">xx</el-descriptions-item>
        <el-descriptions-item label="起落次数">5</el-descriptions-item>
        <el-descriptions-item label="开始时间">{{ sortieDetail.startTime }}</el-descriptions-item>
        <el-descriptions-item label="结束时间">{{ sortieDetail.endTime }}</el-descriptions-item>
        <el-descriptions-item label="持续时间">{{ sortieDetail.duration }}</el-descriptions-item>
        <el-descriptions-item label="开车前油量">xxxxx</el-descriptions-item>
    </el-descriptions>
  </div>
</template>

<script>
import {
  getSortie,
} from '@/api/manage/sortie'
export default {
  name:'SortieDetail',
  data() {
    return {
      // 遮罩层
      loading: true,
      sortieId:null,
      sortieDetail:{}
    };
  },
  mounted(){
    this.init()
  },
  methods: {
    init(){
      this.sortieId=this.$route.params.id
      getSortie(this.sortieId).then(response => {
        this.sortieDetail=response.data
      })
    },
    back(){
      this.$router.push({
        name: 'Sortie'
      })
    }
}
}
</script>

<style scoped>
.sortieDetail{
  padding: 20px 70px 0px 70px;
}
.backBtn{
  position: absolute;
  top: 20px;
  left: 30px;
}
</style>