<template>
    <div class="DPcomputer23Box">
        <!-- 各采区当月完成率-->
        <div class="dataAnalysisScrView_leftView_title">各采区当月完成率</div> 
        <div class="dataAnalysisScrView_leftView_content" style="position: relative;">
            <div id="echarts2View"></div>
        </div>
    </div>
</template>

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


export default {
    data(){
        return {
            DPcomputer23BoxTimer:null,
            //时间
            currentTime:{
                month:'',
            },
            //各采区当月完成率
            echarts2Data:{
                caiquName:[],
                wanchengNum:[],
                jihuaNum:[],
                wanchengRate:[],
            },
        }
    },
    mounted(){
        this.loadData();
    },
    methods:{
        loadData(){
            this.monthCurrentTimeFn();
            //各采区当月完成率 和 月生产完成效率
            HttpReq.truckDispatching.caiquAreaQueryMonth({size:9999,createTime:this.currentTime.month}).then((res) => {
                let eh2_1_arr1 = [];
                let eh2_1_arr2 = [];
                let eh2_1_arr3 = [];
                let eh2_1_arr4 = [];
                res.forEach((item)=>{
                    eh2_1_arr1.push(item.name);
                    eh2_1_arr2.push(item.total);
                    eh2_1_arr3.push(item.nowPlan);
                    eh2_1_arr4.push(item.ratio);
                })
                this.echarts2Data.caiquName = eh2_1_arr1;
                this.echarts2Data.wanchengNum = eh2_1_arr2;
                this.echarts2Data.jihuaNum = eh2_1_arr3;
                this.echarts2Data.wanchengRate = eh2_1_arr4;
                this.echarts2Fn();
            })

            this.DPcomputer23BoxTimer = setInterval(() => {
                //各采区当月完成率 和 月生产完成效率
                HttpReq.truckDispatching.caiquAreaQueryMonth({size:9999,createTime:this.currentTime.month}).then((res) => {
                    let eh2_1_arr1 = [];
                    let eh2_1_arr2 = [];
                    let eh2_1_arr3 = [];
                    let eh2_1_arr4 = [];
                    res.forEach((item)=>{
                        eh2_1_arr1.push(item.name);
                        eh2_1_arr2.push(item.total);
                        eh2_1_arr3.push(item.nowPlan);
                        eh2_1_arr4.push(item.ratio);
                    })
                    this.echarts2Data.caiquName = eh2_1_arr1;
                    this.echarts2Data.wanchengNum = eh2_1_arr2;
                    this.echarts2Data.jihuaNum = eh2_1_arr3;
                    this.echarts2Data.wanchengRate = eh2_1_arr4;
                    this.echarts2Fn();
                })
            },20000)

        },
        //各采区当月完成率
        echarts2Fn(){
            echarts.init(document.getElementById('echarts2View')).dispose();
            var myChart = echarts.init(document.getElementById('echarts2View'));
            var option = {
                tooltip: {
                    trigger: 'axis',
                },
                legend: {
                    data: ['完成量', '计划量', '完成率'],
                    textStyle:{
                        color:'white',
                        fontSize:15,
                    }
                },
                grid: {
                    left: '1%',
                    right: '2%',
                    bottom: '20%',
                    containLabel: true
                },
                xAxis: [
                    {
                        type: 'category',
                        data: this.echarts2Data.caiquName,
                        axisPointer: {
                            type: 'shadow'
                        },
                        axisLabel: {
                            show: true,
                            textStyle: {
                                color: 'white'
                            }
                        },
                        axisLine: {
                            lineStyle: {
                                color: 'white',
                                width: 1
                            }
                        }
                    }
                ],
                yAxis: [
                    {
                        type: 'value',
                        name: '产量(T)',
                        min: 0,
                        max: 10000,
                        interval: 2000,
                        axisLabel: {
                            formatter: '{value}',
                            show: true,
                            textStyle: {
                                color: 'white'
                            }
                        },
                        axisLine: {
                            lineStyle: {
                                color: 'white',
                                width: 0
                            }
                        }
                    },
                    {
                        type: 'value',
                        name: '完成率(%)',
                        min: 0,
                        max: 100,
                        interval: 20,
                        axisLabel: {
                            formatter: '{value}',
                            show: true,
                            textStyle: {
                                color: 'white'
                            }
                        },
                        axisLine: {
                            lineStyle: {
                                color: 'white',
                                width: 0
                            }
                        }
                    }
                ],
                series: [
                    {
                        name: '完成量',
                        type: 'bar',
                        tooltip: {
                            valueFormatter: function (value) {
                                return value + 'T';
                            }
                        },
                        data: this.echarts2Data.wanchengNum,
                        barWidth: 10,
                        itemStyle: {
                            normal: {
                                color: '#09EDFB'
                            }
                        }
                    },
                    {
                        name: '计划量',
                        type: 'bar',
                        tooltip: {
                            valueFormatter: function (value) {
                                return value + 'T';
                            }
                        },
                        data: this.echarts2Data.jihuaNum,
                        barWidth: 10,
                        itemStyle: {
                            normal: {
                                color: '#00ACE9'
                            }
                        }
                    },
                    {
                        name: '完成率',
                        type: 'line',
                        yAxisIndex: 1,
                        tooltip: {
                            valueFormatter: function (value) {
                                return value + '%';
                            }
                        },
                        data: this.echarts2Data.wanchengRate,
                        itemStyle: {
                            normal: {
                                lineStyle: { color: '#FFC200' } //设置线条颜色
                            }
                        }
                    }
                ]
            };
            option && myChart.setOption(option);
        },
        monthCurrentTimeFn(){
			var date = new Date();
			var year = date.getFullYear();        //年 ,从 Date 对象以四位数字返回年份
			var month = date.getMonth() + 1;      //月 ,从 Date 对象返回月份 (0 ~ 11) ,date.getMonth()比实际月份少 1 个月
			//修改月份格式
			if (month >= 1 && month <= 9) {
				month = "0" + month;
			}
			let currentFormatDate = year + "-" + month;
			this.currentTime.month = currentFormatDate;
		},
    },
    beforeDestroy(){
        if(this.DPcomputer23BoxTimer) {
			clearInterval(this.DPcomputer23BoxTimer);
            this.DPcomputer23BoxTimer = null;
		}
    }
}
</script>

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