项目初始化

src/components/real-time-info/realTimeInfo.vue

@@ -0,0 +1,111 @@
+<template>
+  <div class="real-time-info" v-if="realInfoShow && funSwitch">
+    <el-carousel height="2.5rem"
+                 direction="vertical"
+                 indicator-position="none"
+                 :loop="false"
+                 :interval="5000">
+      <el-carousel-item v-for="(item, index) in carouselList" :key="index">
+        <div class="out-box" style="display: flex; float: left;height: 100%;align-items: center">
+          <div class="img_postionb">
+            <img :src="projectName + '/real-info-icon/horn.svg'" alt="">
+          </div>
+          <div class="words_class">
+            <span>{{ item.shipName }} {{ status(item.eventType) }}{{ item.areaName }}</span>
+          </div>
+        </div>
+      </el-carousel-item>
+    </el-carousel>
+  </div>
+</template>
+
+<script lang="ts">
+import {Component, Vue} from 'vue-property-decorator'
+import HttpApi from '@/api'
+import {getLongByTime, getNowTime} from "@/util/date";
+import {messageRoll} from "@/util/fun-switch";
+
+@Component({})
+export default class realTimeInfo extends Vue {
+  private funSwitch = messageRoll
+  private carouselList: any[] = []
+  private realInfoShow = false
+  private projectName = '/' + window.localStorage.getItem('pgName')
+
+  public mounted() {
+    if (this.funSwitch) {
+      // this.getShipDataMinute()
+      setInterval(() => {
+        this.getShipDataMinute()
+      }, 60000)
+    }
+  }
+
+  private getShipDataMinute() {
+    const endTime = getLongByTime(getNowTime());
+    const startTime = endTime - (60 * 60 * 6);
+    HttpApi.getLastRemindInfo({startTime: startTime, endTime: endTime}).then((res: any) => {
+      if (res.code === '0') {
+        this.carouselList = res.data
+        if (this.carouselList.length > 0) {
+          this.realInfoShow = true
+        }
+      }
+    })
+  }
+
+  private status(val: number) {
+    return val === 1 ? '到达' : '离开'
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.real-time-info {
+  width: 25rem;
+  height: 2.5rem;
+  margin-top: 0.625rem;
+  position: absolute;
+  right: 1.25rem;
+  z-index: 3;
+  background-color: #FFFFFF;
+  display: flex;
+  align-items: center;
+
+  ::v-deep.el-carousel {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+
+    .el-carousel__container {
+      width: 100%;
+      height: 100%;
+      display: flex;
+      align-items: center;
+
+      .el-carousel__item {
+        display: flex !important;
+        align-items: center !important;
+        font-size: 0.875rem !important;
+
+        .out-box {
+          width: 100%;
+          height: 100%;
+
+          .img_postionb {
+            margin: 0 1.25rem 0 1.25rem;
+            display: flex;
+            align-items: center;
+            width: 1.875rem;
+            height: 1.875rem;
+            background-color: rgba(214, 24, 25, 0.08);
+            border-radius: 100%;
+            justify-content: center;
+          }
+        }
+      }
+    }
+  }
+}
+</style>