<template>
    <div class="DPcomputer22Box">
        <!-- 各采区日产量排名 -->
        <div class="dataAnalysisScrView_leftView_title">各采区日产量排名</div>
        <div class="dataAnalysisScrView_leftView_content">
            <div class="outputRankView" id="outputRankView"></div>
        </div>
    </div>
</template>

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


export default {
    data(){
        return {
            DPcomputer22BoxTimer:null,
            //时间
            currentTime:{
                day:'',
            },
            //各采区日产量排名
            outputRankData:{
                caiquName:[],
                caiquSeriesData:[],
            },
        }
    },
    mounted(){
        this.loadData();
    },
    methods:{
        loadData(){
            this.dayCurrentTimeFn();
            //各采区日产量排名
            HttpReq.truckDispatching.caiquAreaQueryDay({size:6,page:0,sort:'total,desc',createTime:this.currentTime.day}).then((res) => {
                let eh2_arr1 = [];
                let eh2_arr2 = [];
                res.forEach((item)=>{
                    eh2_arr1.push(item.name);
                    eh2_arr2.push(item.total);
                })
                this.outputRankData.caiquName = eh2_arr1;
                this.outputRankData.caiquSeriesData = eh2_arr2;
                this.echarts2_1Fn();
            })

            this.DPcomputer22BoxTimer = setInterval(() => {
                //各采区日产量排名
                HttpReq.truckDispatching.caiquAreaQueryDay({size:6,page:0,sort:'total,desc',createTime:this.currentTime.day}).then((res) => {
                    let eh2_arr1 = [];
                    let eh2_arr2 = [];
                    res.forEach((item)=>{
                        eh2_arr1.push(item.name);
                        eh2_arr2.push(item.total);
                    })
                    this.outputRankData.caiquName = eh2_arr1;
                    this.outputRankData.caiquSeriesData = eh2_arr2;
                    this.echarts2_1Fn();
                })
            },20000)

        },
        //各采区日产量排名
        echarts2_1Fn(){
            echarts.init(document.getElementById('outputRankView')).dispose();
            var myChart = echarts.init(document.getElementById('outputRankView'));
            var option = {
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                grid: {
                    top:'5%',
                    left: '1%',
                    bottom: '0%',
                    containLabel: true
                },
                xAxis: {
                    name:'吨',
                    type: 'value',
                    boundaryGap: [0, 0.01],
                    axisLabel: {
                        show: true,
                        textStyle: {
                            color: '#BFF7FF'
                        }
                    },
                    axisLine: {
                        lineStyle: {
                            color: '#BFF7FF',
                            width: 1
                        }
                    }
                },
                yAxis: {
                    type: 'category',
                    data: this.outputRankData.caiquName,
                    axisLabel: {
					    show: true,
					    textStyle: {
					        color: '#BFF7FF'
					    }
					},
					axisLine: {
					    lineStyle: {
					        color: '#BFF7FF',
					        width: 0
					    }
					}
                },
                series: [
                    {
                        type: 'bar',
                        barWidth: 12,
                        itemStyle: {
                            color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                                { offset: 0, color: '#23FFE2' },
                                { offset: 1, color: '#0F86EB' }
                            ])
                            
                        },
                        data: this.outputRankData.caiquSeriesData,
                    }
                ]
            };

            option && myChart.setOption(option);
        },
        //获取当前时间
		dayCurrentTimeFn(){
			var date = new Date();
			var year = date.getFullYear();        //年 ,从 Date 对象以四位数字返回年份
			var month = date.getMonth() + 1;      //月 ,从 Date 对象返回月份 (0 ~ 11) ,date.getMonth()比实际月份少 1 个月
			var day = date.getDate();             //日 ,从 Date 对象返回一个月中的某一天 (1 ~ 31)
			//修改月份格式
			if (month >= 1 && month <= 9) {
				month = "0" + month;
			}
			//修改日期格式
			if (day >= 0 && day <= 9) {
				day = "0" + day;
			}
			let currentFormatDate = year + "-" + month + "-" + day;
			this.currentTime.day = currentFormatDate;
		},
    },
    beforeDestroy(){
        if(this.DPcomputer22BoxTimer) {
			clearInterval(this.DPcomputer22BoxTimer);
            this.DPcomputer22BoxTimer = null;
		}
    }
}
</script>

<style scoped>
*{
  margin: 0;
  padding: 0;
}
.DPcomputer22Box{
    width: 20vw;
    height: 23.5vh;
    background-color: rgba(32,42,67,0.95);
    padding: 5px 7px;
    box-sizing: border-box;
    overflow: hidden;
}
.DPcomputer22Box .dataAnalysisScrView_leftView_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;
}
.DPcomputer22Box .dataAnalysisScrView_leftView_content{
    width: 100%;
    height: 19vh;
}
.DPcomputer22Box .outputRankView{
    width: 100%;
    height: 18.5vh;
}
</style>