<template>
    <div class="DPcomputer19Box">
        <!-- 车辆区域分布-->
        <div class="intelligentSchScrView_rightView_title">车辆区域分布</div>
        <div class="intelligentSchScrView_rightView_content">
            <div id="carsAreaDistributionView"></div>
        </div>
    </div>
</template>

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


export default {
    data(){
        return {
            DPcomputer19BoxTimer:null,
            //车辆区域分布Echarts
            carsAreaDistributionData:{
                name:[],
                kache:[],
                chanche:[],
                qitache:[],
            },
        }
    },
    mounted(){
        this.loadData();
    },
    methods:{
        loadData(){
            //车辆区域分布Echarts
            HttpReq.truckDispatching.getLargeScreenfenbu1({size:9999}).then((res) => {
                if(res.code == 200){
                    let name = [];
                    let kache = [];
                    let chanche = [];
                    let qitache = [];
                    res.data.forEach((item,index)=>{
                        name.push(item.name);
                        kache.push(item.truck);
                        chanche.push(item.shovel);
                        qitache.push(item.other);
                    })
                    this.carsAreaDistributionData.name = name;
                    this.carsAreaDistributionData.kache = kache;
                    this.carsAreaDistributionData.chanche = chanche;
                    this.carsAreaDistributionData.qitache = qitache;
                    this.carsAreaDistributionEcharts();
                }
            })

            this.DPcomputer19BoxTimer = setInterval(() => {
                //车辆区域分布Echarts
                HttpReq.truckDispatching.getLargeScreenfenbu1({size:9999}).then((res) => {
                    if(res.code == 200){
                        let name = [];
                        let kache = [];
                        let chanche = [];
                        let qitache = [];
                        res.data.forEach((item,index)=>{
                            name.push(item.name);
                            kache.push(item.truck);
                            chanche.push(item.shovel);
                            qitache.push(item.other);
                        })
                        this.carsAreaDistributionData.name = name;
                        this.carsAreaDistributionData.kache = kache;
                        this.carsAreaDistributionData.chanche = chanche;
                        this.carsAreaDistributionData.qitache = qitache;
                        this.carsAreaDistributionEcharts();
                    }
                })
            },10000)

        },
        //车辆区域分布Echarts
        carsAreaDistributionEcharts(){
            echarts.init(document.getElementById('carsAreaDistributionView')).dispose();
            var myChart = echarts.init(document.getElementById('carsAreaDistributionView'));
            var option = {
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow' 
                    }
                },
                legend: {
                    textStyle:{
                        color: 'white',
                        fontSize:16,
                    }
                },
                grid: {
                    top: '13%',
                    left: '1%',
                    right: '1%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    data: this.carsAreaDistributionData.name,
                    axisLabel: {
                        show: true,
                        textStyle: {
                            color: '#A6F6F9',
                            fontSize:14,
                        }
                    },
                    axisLine: {
                        lineStyle: {
                            color: '#A6F6F9',
                            width: 1
                        }
                    },
                },
                yAxis: {
                    type: 'value',
                    axisLabel: {
                        show: true,
                        textStyle: {
                            color: '#A6F6F9',
                            fontSize:14,
                        }
                    },
                    axisLine: {
                        lineStyle: {
                            color: '#A6F6F9',
                            width: 0
                        }
                    },
                },
                series: [
                    {
                        name: '卡车',
                        type: 'bar',
                        stack: 'total',
                        label: {
                            show: true
                        },
                        data: this.carsAreaDistributionData.kache,
                        barWidth: 30,
                        itemStyle: {
							color: '#2BBFA8'
						},
                    },
                    {
                        name: '铲车',
                        type: 'bar',
                        stack: 'total',
                        label: {
                            show: true
                        },
                        data: this.carsAreaDistributionData.chanche,
                        barWidth: 35,
                        itemStyle: {
							color: '#DB972D'
						},
                    },
                    {
                        name: '其他车辆',
                        type: 'bar',
                        stack: 'total',
                        label: {
                            show: true
                        },
                        data: this.carsAreaDistributionData.qitache,
                        barWidth: 35,
                        itemStyle: {
							color: '#158DFD'
						},
                    }
                ]
            };
            option && myChart.setOption(option);
        },

    },
    beforeDestroy(){
        if(this.DPcomputer19BoxTimer) {
			clearInterval(this.DPcomputer19BoxTimer);
            this.DPcomputer19BoxTimer = null;
		}
    }
}
</script>

<style scoped>
*{
  margin: 0;
  padding: 0;
}
.DPcomputer19Box{
    width: 20vw;
    height: 32vh;
    background-color: rgba(32,42,67,0.95);
    padding: 5px 7px;
    box-sizing: border-box;
    overflow: hidden;
}
.DPcomputer19Box .intelligentSchScrView_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;
}
.DPcomputer19Box .intelligentSchScrView_rightView_content{
    width: 100%;
}
.DPcomputer19Box #carsAreaDistributionView{
    width: 19vw;
    height: 27.5vh;
}
</style>