112 lines
2.8 KiB
Vue
112 lines
2.8 KiB
Vue
<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>
|