项目初始化

src/components/on-map-view/ShipHoverView.vue

@@ -0,0 +1,52 @@
+<template>
+  <div id="showShipMessage"
+       class="showShipMessage"
+       style="min-width: 6.25rem">
+    <div>{{ $t('message.ShipHoverView.shipName') }}&nbsp;{{ shipFloatMes.shipnameEn }}</div>
+    <div>{{ $t('message.ShipHoverView.mmsi') }}&nbsp;{{ shipFloatMes.mmsi }}</div>
+    <div>{{ $t('message.ShipHoverView.lon') }}&nbsp;{{ shipFloatMes.lon }}</div>
+    <div>{{ $t('message.ShipHoverView.lat') }}&nbsp;{{ shipFloatMes.lat }}</div>
+    <div>{{ $t('message.ShipHoverView.time') }}&nbsp;{{ 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>