<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.apiAlarmBlQuery({size:9999}).then((res) => {
                let that = this;
                let arr1 = [];
                let obj1 = {};
                obj1.name = '超速';
                obj1.value = res[0].cs;
                let obj2 = {};
                obj2.name = '车辆故障';
                obj2.value = res[0].gz;
                let obj3 = {};
                obj3.name = '路障申报';
                obj3.value = res[0].lz;
                let obj4 = {};
                obj4.name = '无故停车';
                obj4.value = res[0].wg;
                let obj5 = {};
                obj5.name = '驶入电子围栏';
                obj5.value = res[0].xr;
                let obj6 = {};
                obj6.name = '驶离电子围栏';
                obj6.value = res[0].xc;
                arr1.push(obj1);
                arr1.push(obj2);
                arr1.push(obj3);
                arr1.push(obj4);
                arr1.push(obj5);
                arr1.push(obj6);
                that.echarts6Data = arr1;
                this.$nextTick(()=>{
                    that.echarts6Fn();
                })
            })

            this.DPcomputer27BoxTimer = setInterval(() => {
                //报警路障申报统计
                HttpReq.truckDispatching.apiAlarmBlQuery({size:9999}).then((res) => {
                    let that = this;
                    let arr1 = [];
                    let obj1 = {};
                    obj1.name = '超速';
                    obj1.value = res[0].cs;
                    let obj2 = {};
                    obj2.name = '车辆故障';
                    obj2.value = res[0].gz;
                    let obj3 = {};
                    obj3.name = '路障申报';
                    obj3.value = res[0].lz;
                    let obj4 = {};
                    obj4.name = '无故停车';
                    obj4.value = res[0].wg;
                    let obj5 = {};
                    obj5.name = '驶入电子围栏';
                    obj5.value = res[0].xr;
                    let obj6 = {};
                    obj6.name = '驶离电子围栏';
                    obj6.value = res[0].xc;
                    arr1.push(obj1);
                    arr1.push(obj2);
                    arr1.push(obj3);
                    arr1.push(obj4);
                    arr1.push(obj5);
                    arr1.push(obj6);
                    that.echarts6Data = arr1;
                    this.$nextTick(()=>{
                        that.echarts6Fn();
                    })
                })
            },60000)

        },
        //报警路障申报统计
        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%', '80%'],
                        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;
    top: -1vh;
    width: 125%;
    height: 20vh;
}
</style>