|
@@ -0,0 +1,208 @@
|
|
|
+<template>
|
|
|
+ <div class="newFlightView">
|
|
|
+ <div class="newFlightView-left">
|
|
|
+ <div class="newFlightView-left-top">
|
|
|
+ <div class="newFlightView-left-top-top">
|
|
|
+ <div class="newFlightView-left-top-top-title flex-wrap">
|
|
|
+ <div class="newFlightView-left-top-top-title-info">航班基本信息</div>
|
|
|
+ <div class="newFlightView-left-top-top-title-no">{{ flightObj.flightNo }}</div>
|
|
|
+ </div>
|
|
|
+ <div class="newFlightView-left-top-top-status">
|
|
|
+ PEK-<el-radio v-model="radio" label="1" />-NKG- <el-radio v-model="radio" label="1" />-STU- -HGH- -
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="newFlightView-left-top-list">
|
|
|
+ <el-descriptions :column="2">
|
|
|
+ <el-descriptions-item label="起飞机场简称">{{ infoObj.takeoff_airport_name }}</el-descriptions-item>
|
|
|
+ <el-descriptions-item label="起飞机场三字码">{{ infoObj.depStation_iataCd }}</el-descriptions-item>
|
|
|
+ <el-descriptions-item :span="2" label="日期">{{ formatTime(infoObj.actualTakeOffTime,infoObj.estimateTakeOffTime,infoObj.scheduleTakeOffTime) }}</el-descriptions-item>
|
|
|
+ <el-descriptions-item label="登机口">{{ infoObj.gateCd }}</el-descriptions-item>
|
|
|
+ <el-descriptions-item label="停机位"> {{ infoObj.depstandCd }}</el-descriptions-item>
|
|
|
+ </el-descriptions>
|
|
|
+ </div>
|
|
|
+ <div class="newFlightView-left-top-list">
|
|
|
+ <el-descriptions :column="2">
|
|
|
+ <el-descriptions-item label="降落机场简称">{{ infoObj.target_airport_name }}</el-descriptions-item>
|
|
|
+ <el-descriptions-item label="降落机场三字码">{{ infoObj.arrStation_iataCd }}</el-descriptions-item>
|
|
|
+ <el-descriptions-item :span="2" label="日期">{{ formatTime(infoObj.actualLandInTime,infoObj.estimateLandInTime,infoObj.scheduleLandInTime) }}</el-descriptions-item>
|
|
|
+ <el-descriptions-item label="提取转盘">{{infoObj.arrcarouselCd}}</el-descriptions-item>
|
|
|
+ <el-descriptions-item label="停机位"> {{ infoObj.arrstandCd }}</el-descriptions-item>
|
|
|
+ </el-descriptions>
|
|
|
+ </div>
|
|
|
+ <div class="newFlightView-left-top-list">
|
|
|
+ <el-descriptions :column="2">
|
|
|
+ <el-descriptions-item label="航班状态">{{ infoObj.normalState }}</el-descriptions-item>
|
|
|
+ <el-descriptions-item label="托运旅客数">{{ infoObj.checked_passengers_number }}</el-descriptions-item>
|
|
|
+ <el-descriptions-item label="中转行李数">{{ infoObj.transfer_baggage_number }}</el-descriptions-item>
|
|
|
+ <el-descriptions-item label="终点行李数">{{ infoObj.destination_bags_number }}</el-descriptions-item>
|
|
|
+ </el-descriptions>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="newFlightView-left-bottom">
|
|
|
+ <Table tableName="容器列表" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="newFlightView-right">
|
|
|
+ <div class="newFlightView-right-top flex">
|
|
|
+ <div class="newFlightView-right-top-left flex-wrap">
|
|
|
+ <div class="manageTitle">航班行李列表</div>
|
|
|
+ <div class="newFlightView-right-top-left-select">快捷筛选
|
|
|
+ <el-select style="margin-left: 8px;border-radius: 4px;" size="small" v-model="value" filterable placeholder="请选择">
|
|
|
+ <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
|
|
|
+ </el-option>
|
|
|
+ </el-select>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="newFlightView-right-top-right">
|
|
|
+ <TimeZoneSelector />
|
|
|
+ <img class="btn-img btn-shadow" src="@/assets/baggage/ic_export.png" title="导出" @click="exportHandler('table', '航班行李列表')" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="newFlightView-right-bottom">
|
|
|
+ <Table ref="table" :btnStyle="{top:'-52px'}" :istableCol="true" tableName="航班行李列表" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import Table from '@/views/newQuery/components/table.vue'
|
|
|
+import TimeZoneSelector from "@/components/TimeZoneSelector"
|
|
|
+import { throttledExportToExcel } from "@/utils/table"
|
|
|
+import pf from '@/layout/mixin/publicFunc'
|
|
|
+export default {
|
|
|
+ components: { Table, TimeZoneSelector },
|
|
|
+ mixins: [pf],
|
|
|
+ data () {
|
|
|
+ return {
|
|
|
+ radio: '1',
|
|
|
+ options: [{
|
|
|
+ value: '选项1',
|
|
|
+ label: '黄金糕'
|
|
|
+ }, {
|
|
|
+ value: '选项2',
|
|
|
+ label: '双皮奶'
|
|
|
+ }, {
|
|
|
+ value: '选项3',
|
|
|
+ label: '蚵仔煎'
|
|
|
+ }, {
|
|
|
+ value: '选项4',
|
|
|
+ label: '龙须面'
|
|
|
+ }, {
|
|
|
+ value: '选项5',
|
|
|
+ label: '北京烤鸭'
|
|
|
+ }],
|
|
|
+ value: '',
|
|
|
+ dataContent: {},
|
|
|
+ flightObj: {},
|
|
|
+ infoObj: {}
|
|
|
+ }
|
|
|
+ },
|
|
|
+ async created () {
|
|
|
+ const query = this.$route.query
|
|
|
+ const { flightNo, flightDate } = query
|
|
|
+ this.flightObj = query
|
|
|
+ this.dataContent = query
|
|
|
+ const res = await this.getViewInfo(query)
|
|
|
+ this.infoObj = res[0]
|
|
|
+ const sts = await this.getViewInfo({ flightNo, flightDate })
|
|
|
+ console.log(sts)
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ // 获取基本信息
|
|
|
+ async getViewInfo (dataContent = this.dataContent) {
|
|
|
+ const { code, returnData } = await this.getQueryList(SERVICE_ID.bagViewId, dataContent)
|
|
|
+ if (code == 0) {
|
|
|
+ return returnData
|
|
|
+ } else {
|
|
|
+ return []
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 显示日期
|
|
|
+ formatTime (t1, t2, t3) {
|
|
|
+ return t1 ? t1 : t2 ? t2 : t3 ? t3 : ''
|
|
|
+ },
|
|
|
+ // 导出
|
|
|
+ exportHandler (refName, tableName) {
|
|
|
+ const table = this.$refs[refName].$el.cloneNode(true);
|
|
|
+ const fileName = `${tableName}-${this.currentAirport}-${this.startDate}-${this.endDate}.xlsx`;
|
|
|
+ throttledExportToExcel(table, tableName, fileName);
|
|
|
+ },
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+.newFlightView {
|
|
|
+ height: calc(100vh - 80px);
|
|
|
+ padding: 8px;
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ &-left {
|
|
|
+ width: 408px;
|
|
|
+ margin-right: 8px;
|
|
|
+ &-top {
|
|
|
+ height: 505px;
|
|
|
+ background-color: #fff;
|
|
|
+ &-top {
|
|
|
+ padding: 25px 16px;
|
|
|
+ border-bottom: 1px solid #c8cfdb;
|
|
|
+ &-title {
|
|
|
+ line-height: 23px;
|
|
|
+ font-size: 20px;
|
|
|
+ font-family: Microsoft YaHei;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #101116;
|
|
|
+ margin-bottom: 25px;
|
|
|
+ &-info {
|
|
|
+ margin-right: 16px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ &-status {
|
|
|
+ font-size: 18px;
|
|
|
+ font-family: Microsoft YaHei;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #101116;
|
|
|
+ ::v-deep .el-radio {
|
|
|
+ margin-right: 0;
|
|
|
+ .el-radio__label {
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ &-list {
|
|
|
+ padding: 25px 16px 13px 16px;
|
|
|
+ border-bottom: 1px solid #c8cfdb;
|
|
|
+ &:last-child {
|
|
|
+ border-bottom: none;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ &-bottom {
|
|
|
+ height: calc(100% - 515px);
|
|
|
+ margin-top: 8px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ &-right {
|
|
|
+ flex: 1;
|
|
|
+ height: 100%;
|
|
|
+ width: calc(100% - 416px);
|
|
|
+ &-top {
|
|
|
+ padding: 18px 0;
|
|
|
+ &-left {
|
|
|
+ line-height: 30px;
|
|
|
+ }
|
|
|
+ &-right {
|
|
|
+ padding-right: 70px;
|
|
|
+ .btn-img {
|
|
|
+ margin-left: 10px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ &-bottom {
|
|
|
+ height: calc(100% - 68px);
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|