<template>
    <div class="DPcomputer27Box">
        <!-- 报警路障申报统计 -->
        <div class="dataAnalysisScrView_rightView_title">报警路障申报统计</div>
        <div class="dataAnalysisScrView_rightView_content" style="position: relative;">
            <div id="echarts6View"></div>
        </div>
    </div>
</template>

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


export default {
    data(){
        return {
            DPcomputer27BoxTimer:null,
            //报警路障申报统计
            echarts6Data:[],
        }
    },
    mounted(){
        this.loadData();
    },
    methods:{
        loadData(){
            //报警路障申报统计
            HttpReq.truckDispatching.breakDownQueryDay({size:9999}).then((res) => {
                let that = this;
                if(res.code == 200){
                    //报警路障申报统计过度数组
                    let alarmBreakArray = [];
                    let breakObj1 = {};
                    breakObj1.name = '车辆故障';
                    breakObj1.value = res.data.totalElements;
                    alarmBreakArray.push(breakObj1);

                    //获取报警信息
                    HttpReq.truckDispatching.callPoliceQuery({size:9999,}).then((res) => {
                        if(res.code == 200){
                            let alarmObj1 = {};
                            let alarmArray1 = [];
                            let alarmObj2 = {};
                            let alarmArray2 = [];
                            let alarmObj3 = {};
                            let alarmArray3 = [];
                            let alarmObj4 = {};
                            let alarmArray4 = [];
                            res.data.content.forEach((item,index)=>{
                                if(item.alarmclass == '超速'){
                                    alarmArray1.push(item);
                                }else if(item.alarmclass == '无故停车'){
                                    alarmArray2.push(item);
                                }else if(item.alarmclass == '驾离电子围栏'){
                                    alarmArray3.push(item);
                                }else if(item.alarmclass == '驶入电子围栏'){
                                    alarmArray4.push(item);
                                }
                            })
                            alarmObj1.name = '超速';
                            alarmObj1.value = alarmArray1.length;
                            alarmObj2.name = '无故停车';
                            alarmObj2.value = alarmArray2.length;
                            alarmObj3.name = '驾离电子围栏';
                            alarmObj3.value = alarmArray3.length;
                            alarmObj4.name = '驶入电子围栏';
                            alarmObj4.value = alarmArray4.length;
                            alarmBreakArray.push(alarmObj1);
                            alarmBreakArray.push(alarmObj2);
                            alarmBreakArray.push(alarmObj3);
                            alarmBreakArray.push(alarmObj4);
                            that.echarts6Data = alarmBreakArray;
                            this.$nextTick(()=>{
                                that.echarts6Fn();
                            })
                        }
                    })
                }
            })

            this.DPcomputer27BoxTimer = setInterval(() => {
                //报警路障申报统计
                HttpReq.truckDispatching.breakDownQueryDay({size:9999}).then((res) => {
                    let that = this;
                    if(res.code == 200){
                        //报警路障申报统计过度数组
                        let alarmBreakArray = [];
                        let breakObj1 = {};
                        breakObj1.name = '车辆故障';
                        breakObj1.value = res.data.totalElements;
                        alarmBreakArray.push(breakObj1);

                        //获取报警信息
                        HttpReq.truckDispatching.callPoliceQuery({size:9999,}).then((res) => {
                            if(res.code == 200){
                                let alarmObj1 = {};
                                let alarmArray1 = [];
                                let alarmObj2 = {};
                                let alarmArray2 = [];
                                let alarmObj3 = {};
                                let alarmArray3 = [];
                                let alarmObj4 = {};
                                let alarmArray4 = [];
                                res.data.content.forEach((item,index)=>{
                                    if(item.alarmclass == '超速'){
                                        alarmArray1.push(item);
                                    }else if(item.alarmclass == '无故停车'){
                                        alarmArray2.push(item);
                                    }else if(item.alarmclass == '驾离电子围栏'){
                                        alarmArray3.push(item);
                                    }else if(item.alarmclass == '驶入电子围栏'){
                                        alarmArray4.push(item);
                                    }
                                })
                                alarmObj1.name = '超速';
                                alarmObj1.value = alarmArray1.length;
                                alarmObj2.name = '无故停车';
                                alarmObj2.value = alarmArray2.length;
                                alarmObj3.name = '驾离电子围栏';
                                alarmObj3.value = alarmArray3.length;
                                alarmObj4.name = '驶入电子围栏';
                                alarmObj4.value = alarmArray4.length;
                                alarmBreakArray.push(alarmObj1);
                                alarmBreakArray.push(alarmObj2);
                                alarmBreakArray.push(alarmObj3);
                                alarmBreakArray.push(alarmObj4);
                                that.echarts6Data = alarmBreakArray;
                                this.$nextTick(()=>{
                                    that.echarts6Fn();
                                })
                            }
                        })
                    }
                })
            },20000)

        },
        //报警路障申报统计
        echarts6Fn(){
            echarts.init(document.getElementById('echarts6View')).dispose();
            var myChart = echarts.init(document.getElementById('echarts6View'));
            var option = {
                tooltip: {
                    trigger: 'item'
                },
                legend: {
                    top: 'center',
                    right: 'right',
                    textStyle:{
                        color:'white',
                        fontSize:14,
                    } 
                },
                color:['#1DF9FC', '#1E67F2','#6E69F9','#00B7EE','#CAC9C9'],
                series: [
                    {
                        name: '次数',
                        type: 'pie',
                        radius: ['40%', '85%'],
                        avoidLabelOverlap: false,
                        label: {
                            show: true,
                            position: 'inner',
                            formatter: '({d}%)'
                        },
                        labelLine: {
                            show: false
                        },
                        data: this.echarts6Data,
                    }
                ]
            };
            option && myChart.setOption(option);
        },
    },
    beforeDestroy(){
        if(this.DPcomputer27BoxTimer) {
			clearInterval(this.DPcomputer27BoxTimer);
            this.DPcomputer27BoxTimer = null;
		}
    }
}
</script>

<style scoped>
*{
  margin: 0;
  padding: 0;
}
.DPcomputer27Box{
    width: 20vw;
    height: 23.5vh;
    background-color: rgba(32,42,67,0.95);
    padding: 5px 7px;
    box-sizing: border-box;
    overflow: hidden;
}
.DPcomputer27Box .dataAnalysisScrView_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;
}
.DPcomputer27Box .dataAnalysisScrView_rightView_content{
    width: 100%;
    height: 19vh;
}
.DPcomputer27Box #echarts6View{
    position: absolute;
    left: -6vw;
    width: 125%;
    height: 20vh;
}
</style>