53 lines
1.4 KiB
Vue
53 lines
1.4 KiB
Vue
<template>
|
|
<div id="showShipMessage"
|
|
class="showShipMessage"
|
|
style="min-width: 6.25rem">
|
|
<div>{{ $t('message.ShipHoverView.shipName') }} {{ shipFloatMes.shipnameEn }}</div>
|
|
<div>{{ $t('message.ShipHoverView.mmsi') }} {{ shipFloatMes.mmsi }}</div>
|
|
<div>{{ $t('message.ShipHoverView.lon') }} {{ shipFloatMes.lon }}</div>
|
|
<div>{{ $t('message.ShipHoverView.lat') }} {{ shipFloatMes.lat }}</div>
|
|
<div>{{ $t('message.ShipHoverView.time') }} {{ formatDate(shipFloatMes.time) }}
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import {Component, Vue} from 'vue-property-decorator'
|
|
import {getTimeForLong} from "@/util/date";
|
|
import store from "@/util/store";
|
|
|
|
@Component({})
|
|
export default class ShipHoverView extends Vue {
|
|
private shipFloatMes: any = {}
|
|
|
|
private formatDate(time: any) {
|
|
return getTimeForLong(time * 1000, 'YYYY-MM-DD hh:mm:ss')
|
|
}
|
|
|
|
public mounted() {
|
|
this.$nextTick(() => {
|
|
(store.getMapFun() as any).showShipPathMessage(store.getMapInstance(), this)
|
|
})
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.showShipMessage {
|
|
position: absolute;
|
|
padding: 0.625rem;
|
|
background-color: white;
|
|
font-size: 0.75rem;
|
|
border-radius: 0.625rem;
|
|
text-align: left;
|
|
top: 0.625rem;
|
|
left: 0.625rem;
|
|
white-space: nowrap;
|
|
|
|
div {
|
|
height: 1.25rem;
|
|
line-height: 1.25rem;
|
|
}
|
|
}
|
|
</style>
|