<template>
    <div class="DPcomputer9Box">
        <!-- 实时报警 -->
        <div class="dataScrView_rightView_title">实时报警</div>
        <div class="dataScrView_rightView_content">
           <div class="realAlarmStyle">
               <div v-for="(item,index) in realAlarmStyleData.listData" :key="index">
                    <img v-if="index % 4 == 0" src="../../../../assets/images/cutGraph/jingshikaobei1.png">
                    <img v-else-if="index % 3 == 0" src="../../../../assets/images/cutGraph/jingshikaobei2.png">
                    <img v-else-if="index % 2 == 0" src="../../../../assets/images/cutGraph/jingshikaobei3.png">
                    <img v-else src="../../../../assets/images/cutGraph/jingshikaobei4.png">
                    <div style="color:#A6F6F9;margin-left:10px;">
                        <div>{{item.num + (item.type == 1 ? '驶入电子围栏' : item.type == 2 ? '驶出电子围栏' : item.type)}}报警</div>
                        <div>{{item.time}}</div>
                    </div>
               </div>
           </div>
        </div>
    </div>
</template>

<script>
import { Tools, HttpReq, CAMap} from '@/assets/js/common.js';


export default {
    data(){
        return {
            DPcomputer9BoxTimer:null,
            //实时报警
            realAlarmStyleData:{
                listData:[],
            }
        }
    },
    mounted(){
        this.loadData();
    },
    methods:{
        loadData(){
            //实时报警
            HttpReq.truckDispatching.apiAlarmBjQuery({size:9999}).then((res) => {
                this.realAlarmStyleData.listData = res.reverse();
            })
            this.DPcomputer9BoxTimer = setInterval(() => {
				HttpReq.truckDispatching.apiAlarmBjQuery({size:9999}).then((res) => {
                    this.realAlarmStyleData.listData = res.reverse();
                })
			},10000)
        },
    },
    beforeDestroy(){
        if(this.DPcomputer9BoxTimer) {
			clearInterval(this.DPcomputer9BoxTimer);
            this.DPcomputer9BoxTimer = null;
		}
    }
}
</script>

<style scoped>
*{
  margin: 0;
  padding: 0;
}
.DPcomputer9Box{
    width: 20vw;
    height: 23.5vh;
    background-color: rgba(32,42,67,0.95);
    padding: 5px 7px;
    box-sizing: border-box;
    overflow: hidden;
}
.DPcomputer9Box .dataScrView_rightView_title{
    margin-bottom: 5px;
    width: 100%;
    height: 3.5vh;
    background:no-repeat center center url('~@/assets/images/cutGraph/biaoti1.png');
	background-size:100% 100%;
    padding-left: 10px;
    box-sizing: border-box;
    font-size: 18px;
    line-height: 3.5vh;
    color: #FAFAFB;
    letter-spacing: 1px;
    text-shadow: 1px 1px 1px #92CBFF;
}
.DPcomputer9Box .dataScrView_rightView_content{
    width: 100%;
    height: 19vh;
}
.DPcomputer9Box .realAlarmStyle{
    width: 100%;
    height: 19vh;
    overflow-y:auto;
    scrollbar-width: none;
}
.DPcomputer9Box .realAlarmStyle::-webkit-scrollbar {
    display: none;
}
.DPcomputer9Box .realAlarmStyle>div{
    width: 100%;
    height: 5vh;
    border-bottom: 1px solid #03FEFE;
    display: flex;
    align-items: center;
}
</style>