|
@@ -1,6 +1,7 @@
|
|
|
<script setup lang="ts">
|
|
<script setup lang="ts">
|
|
|
import { transportationMode } from '@/components/transportationMode'
|
|
import { transportationMode } from '@/components/transportationMode'
|
|
|
import { useRouter } from 'vue-router'
|
|
import { useRouter } from 'vue-router'
|
|
|
|
|
+import { getTimezone } from '@/utils/tools'
|
|
|
|
|
|
|
|
const router = useRouter()
|
|
const router = useRouter()
|
|
|
|
|
|
|
@@ -15,14 +16,15 @@ interface EventCardPropsData {
|
|
|
location: string
|
|
location: string
|
|
|
timezone?: string // 时区
|
|
timezone?: string // 时区
|
|
|
time: string
|
|
time: string
|
|
|
- previous?: string
|
|
|
|
|
|
|
+ timeLabel: string
|
|
|
|
|
+ previous?: Array<string>
|
|
|
info?: {
|
|
info?: {
|
|
|
route?: []
|
|
route?: []
|
|
|
- etdChangeNum?: number
|
|
|
|
|
- etaChangeNum?: number
|
|
|
|
|
|
|
+ etdOrdeparturNum?: number
|
|
|
|
|
+ etaOrarrivalNum?: number
|
|
|
time: string
|
|
time: string
|
|
|
- departureDelayNum?: number
|
|
|
|
|
- arrivalDelayNum?: number
|
|
|
|
|
|
|
+ timeLabel: string
|
|
|
|
|
+ delayTimeTip: string
|
|
|
timezone?: string // 时区
|
|
timezone?: string // 时区
|
|
|
leg?: []
|
|
leg?: []
|
|
|
}
|
|
}
|
|
@@ -61,17 +63,17 @@ const handleSeeAll = (data: any) => {
|
|
|
</div>
|
|
</div>
|
|
|
<div
|
|
<div
|
|
|
class="more-tips"
|
|
class="more-tips"
|
|
|
- v-if="data.type === 'delay' && (data.info.departureDelayNum || data.info.arrivalDelayNum)"
|
|
|
|
|
|
|
+ v-if="data.type === 'delay' && (data.info.etdOrdeparturNum || data.info.etaOrarrivalNum)"
|
|
|
>
|
|
>
|
|
|
<div>
|
|
<div>
|
|
|
- <span v-if="data.info.departureDelayNum"
|
|
|
|
|
- >Departure Delay ({{ data.info.departureDelayNum }})</span
|
|
|
|
|
|
|
+ <span v-if="data.info.etdOrdeparturNum"
|
|
|
|
|
+ >Departure Delay ({{ data.info.etdOrdeparturNum }})</span
|
|
|
>
|
|
>
|
|
|
- <span v-if="data.info.departureDelayNum && data.info.arrivalDelayNum">
|
|
|
|
|
|
|
+ <span v-if="data.info.etdOrdeparturNum && data.info.etaOrarrivalNum">
|
|
|
| </span
|
|
| </span
|
|
|
>
|
|
>
|
|
|
- <span v-if="data.info.arrivalDelayNum">
|
|
|
|
|
- Arrival Delay ({{ data.info.arrivalDelayNum }})
|
|
|
|
|
|
|
+ <span v-if="data.info.etaOrarrivalNum">
|
|
|
|
|
+ Arrival Delay ({{ data.info.etaOrarrivalNum }})
|
|
|
</span>
|
|
</span>
|
|
|
</div>
|
|
</div>
|
|
|
<el-button @click="handleSeeAll(data)" class="see-all-icon el-button--text">
|
|
<el-button @click="handleSeeAll(data)" class="see-all-icon el-button--text">
|
|
@@ -82,14 +84,18 @@ const handleSeeAll = (data: any) => {
|
|
|
|
|
|
|
|
<div
|
|
<div
|
|
|
class="more-tips"
|
|
class="more-tips"
|
|
|
- v-if="data.type === 'change' && (data.info.etdChangeNum || data.info.etaChangeNum)"
|
|
|
|
|
|
|
+ v-if="data.type === 'change' && (data.info.etdOrdeparturNum || data.info.etaOrarrivalNum)"
|
|
|
>
|
|
>
|
|
|
<div>
|
|
<div>
|
|
|
- <span v-if="data.info.etdChangeNum">ETD Change ({{ data.info.etdChangeNum }})</span>
|
|
|
|
|
- <span v-if="data.info.etdChangeNum && data.info.etaChangeNum">
|
|
|
|
|
|
|
+ <span v-if="data.info.etdOrdeparturNum"
|
|
|
|
|
+ >ETD Change ({{ data.info.etdOrdeparturNum }})</span
|
|
|
|
|
+ >
|
|
|
|
|
+ <span v-if="data.info.etdOrdeparturNum && data.info.etaOrarrivalNum">
|
|
|
| </span
|
|
| </span
|
|
|
>
|
|
>
|
|
|
- <span v-if="data.info.etaChangeNum"> ETA Change ({{ data.info.etaChangeNum }}) </span>
|
|
|
|
|
|
|
+ <span v-if="data.info.etaOrarrivalNum">
|
|
|
|
|
+ ETA Change ({{ data.info.etaOrarrivalNum }})
|
|
|
|
|
+ </span>
|
|
|
</div>
|
|
</div>
|
|
|
<el-button @click="handleSeeAll(data)" class="see-all-icon el-button--text">
|
|
<el-button @click="handleSeeAll(data)" class="see-all-icon el-button--text">
|
|
|
See All
|
|
See All
|
|
@@ -115,19 +121,30 @@ const handleSeeAll = (data: any) => {
|
|
|
</div>
|
|
</div>
|
|
|
<div class="route" v-if="data?.info?.route?.length > 0">
|
|
<div class="route" v-if="data?.info?.route?.length > 0">
|
|
|
<span class="font_family icon-icon_route_b"></span>
|
|
<span class="font_family icon-icon_route_b"></span>
|
|
|
- <span></span>
|
|
|
|
|
|
|
+ <span>Route: </span>
|
|
|
<template v-for="(item, index) in data.info.route" :key="index">
|
|
<template v-for="(item, index) in data.info.route" :key="index">
|
|
|
<span>{{ item }}</span
|
|
<span>{{ item }}</span
|
|
|
><span style="margin: 0 3px" v-if="index !== data.info.route.length - 1">→</span>
|
|
><span style="margin: 0 3px" v-if="index !== data.info.route.length - 1">→</span>
|
|
|
</template>
|
|
</template>
|
|
|
</div>
|
|
</div>
|
|
|
|
|
+ <!-- change多程情况中的Leg-->
|
|
|
|
|
+ <div class="location" v-if="data?.info?.leg?.length > 0">
|
|
|
|
|
+ <span class="font_family icon-icon_location_b"></span>
|
|
|
|
|
+ <span>Current Leg: </span>
|
|
|
|
|
+ <template v-for="(item, index) in data.info.leg" :key="index">
|
|
|
|
|
+ <span>{{ item }}</span
|
|
|
|
|
+ ><span style="margin: 0 3px" v-if="index !== data.info.leg.length - 1">→</span>
|
|
|
|
|
+ </template>
|
|
|
|
|
+ </div>
|
|
|
<div class="location" v-if="data.location">
|
|
<div class="location" v-if="data.location">
|
|
|
<span class="font_family icon-icon_location_b"></span>
|
|
<span class="font_family icon-icon_location_b"></span>
|
|
|
<span>{{ data.location }}</span>
|
|
<span>{{ data.location }}</span>
|
|
|
</div>
|
|
</div>
|
|
|
<div class="delay-time" v-if="data.type === 'delay' && data.info?.time">
|
|
<div class="delay-time" v-if="data.type === 'delay' && data.info?.time">
|
|
|
<span class="font_family icon-icon_delay_b"></span>
|
|
<span class="font_family icon-icon_delay_b"></span>
|
|
|
|
|
+ <span>{{ data.info.timeLabel }}</span>
|
|
|
<span>{{ data.info.time }}</span>
|
|
<span>{{ data.info.time }}</span>
|
|
|
|
|
+ <span>{{ getTimezone(data.info.timezone) }}</span>
|
|
|
</div>
|
|
</div>
|
|
|
<div class="change-time" v-if="data.type === 'change' && data.info?.time">
|
|
<div class="change-time" v-if="data.type === 'change' && data.info?.time">
|
|
|
<span style="margin-left: 1px" class="font_family icon-icon_time_b"></span>
|
|
<span style="margin-left: 1px" class="font_family icon-icon_time_b"></span>
|