<template>
    <div class="dataAnalysisScrView" v-if="whetherShow">
        <div class="dataAnalysisScrView_leftView">
            <!-- 采区产量统计 -->
            <div>
                <div class="dataAnalysisScrView_leftView_title">采区产量统计</div>
                <div class="dataAnalysisScrView_leftView_content" style="position: relative;">
                    <div id="echarts1View"></div>
                </div>
            </div>
            <!-- 各采区日产量排名 -->
            <div>
                <div class="dataAnalysisScrView_leftView_title">各采区日产量排名</div>
                <div class="dataAnalysisScrView_leftView_content">
                    <div class="outputRankView">
                        <div v-for="(item, index) in outputRankData" :key="index" style="display:flex;margin-bottom:15px;padding:0px 10px 0px 0px">
							<div class="l-left">{{item.name}}</div>
							<el-progress :stroke-width="10" :percentage="parseInt(item.output) / 10" :format="progressFormat" style="color:white;"></el-progress>
						</div>
                    </div>
                </div>
            </div>
            <!-- 各采区当月完成率-->
            <div>
                <div class="dataAnalysisScrView_leftView_title">各采区当月完成率</div> 
                <div class="dataAnalysisScrView_leftView_content" style="position: relative;">
                    <div id="echarts2View"></div>
                </div>
            </div>
            <!-- 月生产完成效率-->
            <div>
                <div class="dataAnalysisScrView_leftView_title">月生产完成效率</div> 
                <div class="dataAnalysisScrView_leftView_content" style="position: relative;">
                    <div id="echarts3View"></div>
                </div>
            </div>
        </div>
        <div class="dataAnalysisScrView_rightView">
            <!-- 装卸点平均时长  -->
            <div>
                <div class="dataAnalysisScrView_leftView_title truck_titleStyle">
                    <div>装卸点平均时长</div>
                    <div class="loadAndUnloadTitleDateStyle">
                        <div :class="loadAndUnloadListData.selectTimeText == 'day' ? 'loadAndUnloadDateStyle_son1' : 'loadAndUnloadDateStyle_son2' " @click="loadAndUnloadChangeTime('day')">日</div>
                        <div :class="loadAndUnloadListData.selectTimeText == 'month' ? 'loadAndUnloadDateStyle_son1' : 'loadAndUnloadDateStyle_son2' " @click="loadAndUnloadChangeTime('month')">月</div>
                        <div :class="loadAndUnloadListData.selectTimeText == 'year' ? 'loadAndUnloadDateStyle_son1' : 'loadAndUnloadDateStyle_son2' " @click="loadAndUnloadChangeTime('year')">年</div>
                    </div>
                </div>
                <div class="dataAnalysisScrView_rightView_content" style="position: relative;">
                    <div id="echarts4View"></div>
                </div>
            </div>
            <!-- 矿石产量比-->
            <div>
                <div class="dataAnalysisScrView_leftView_title truck_titleStyle">
                    <div>矿石产量比</div>
                    <div class="oreProportionTitleDateStyle">
                        <div :class="oreProportionListData.selectTimeText == 'day' ? 'oreProportionDateStyle_son1' : 'oreProportionDateStyle_son2' " @click="oreProportionChangeTime('day')">日</div>
                        <div :class="oreProportionListData.selectTimeText == 'month' ? 'oreProportionDateStyle_son1' : 'oreProportionDateStyle_son2' " @click="oreProportionChangeTime('month')">月</div>
                        <div :class="oreProportionListData.selectTimeText == 'year' ? 'oreProportionDateStyle_son1' : 'oreProportionDateStyle_son2' " @click="oreProportionChangeTime('year')">年</div>
                    </div>
                </div>
                <div class="dataAnalysisScrView_rightView_content" style="position: relative;">
                    <div id="echarts5View"></div>
                </div>
            </div>
            <!-- 报警路障申报统计 -->
            <div>
                <div class="dataAnalysisScrView_rightView_title">报警路障申报统计</div>
                <div class="dataAnalysisScrView_rightView_content" style="position: relative;">
                    <div id="echarts6View"></div>
                </div>
            </div>
            <!-- 卸货点卸货量统计 -->
            <div>
                <div class="dataAnalysisScrView_rightView_title">卸货点卸货量统计</div>
                <div class="dataAnalysisScrView_rightView_content" style="position: relative;">
                    <div id="echarts7View"></div>
                </div>
            </div>
        </div>
    </div>
</template>

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

export default {
    data() {
		return {
			whetherShow:false,
            //时间
            currentTime:{
                day:'',
                month:'',
                year:'',
            },
            //采取产量统计
            echarts1Data:[
                { value: 104, name: 'Ca2o' },
                { value: 735, name: 'Ca3o' },
                { value: 580, name: 'Ca4o' },
                { value: 484, name: 'Ca5o' },
                { value: 300, name: 'Ca6o' }
            ],
            //各采区日产量排名
            outputRankData:[],
            //各采区当月完成率
            echarts2Data:{
                caiquName:[],
                wanchengNum:[],
                jihuaNum:[],
                wanchengRate:[],
            },
            //月生产完成效率
            echarts3Data:{
                caiquName:['采区一', '采区二', '采区三', '采区四'],
                wanchengNum:[20,25,48,63],
                jihuaNum:[30,50,60,70],
            },
            //装卸点平均时长
            loadAndUnloadListData:{
                selectTimeText:'day',
                selectTimeDate:'',
                caiquName:[],
                timeData:[],
            },
            //矿石产量比
            oreProportionListData:{
                selectTimeText:'day',
                selectTimeDate:'',
                proportionData:[],
            },
            //报警路障申报统计
            echarts6Data:[],
            //卸货点卸货量统计
            echarts7Data:{
                xiedianName:[],
                outputNum:[],
            },

		}
	},
	mounted() { },
	methods: {
		loadData(text){
            if(text == true){
                this.whetherShow = true;
                this.dayCurrentTimeFn();
                this.monthCurrentTimeFn();
                this.yearCurrentTimeFn();
                
                this.$nextTick(()=>{
                    //采取产量统计图表
                    this.echarts1Fn();
                    //各采区日产量排名
                    HttpReq.truckDispatching.caiquAreaQueryDay({size:10,createTime:this.currentTime.day,sort:'output,desc',}).then((res) => {
                        if(res.code == 200){
                            this.outputRankData = res.data.content;
                        }
                    })
                    //各采区当月完成率
                    HttpReq.truckDispatching.caiquAreaQueryMonth({size:9999,createTime:this.currentTime.month,}).then((res) => {
                        if(res.code == 200){
                            let caiquName = [];
                            let wanchengNum = [];
                            let jihuaNum = [];
                            let wanchengRate = [];
                            res.data.content.forEach((item,index)=>{
                                caiquName.push(item.name);
                                wanchengNum.push(item.output);
                                jihuaNum.push(item.dayPlan);
                                wanchengRate.push(parseFloat(item.rate) * 100);
                            })
                            this.echarts2Data.caiquName = caiquName;
                            this.echarts2Data.wanchengNum = wanchengNum;
                            this.echarts2Data.jihuaNum = jihuaNum;
                            this.echarts2Data.wanchengRate = wanchengRate;
                            this.echarts2Fn();
                        }
                    })
                    //月生产完成效率
                    this.echarts3Fn();
                    //装卸点平均时长   卸货点卸货量统计
                    HttpReq.truckDispatching.xiequAreaQueryDay({size:9999,createTime:this.currentTime.day,}).then((res) => {
                        if(res.code == 200){
                            let caiquName = [];
                            let workTime = [];
                            let outputNum7 = [];
                            res.data.content.forEach((item,index)=>{
                                caiquName.push(item.name);
                                workTime.push(item.worktime);
                                outputNum7.push(item.output);
                            })
                            this.loadAndUnloadListData.caiquName = caiquName;
                            this.loadAndUnloadListData.timeData = workTime;
                            this.echarts4Fn();
                            //卸货点卸货量统计
                            this.echarts7Data.xiedianName = caiquName;
                            this.echarts7Data.outputNum = outputNum7;
                            this.echarts7Fn();
                        }
                    })
                    //矿石产量比
                    HttpReq.truckDispatching.screenOreProportionDayQuery({size:9999,createTime:this.currentTime.day,}).then((res) => {
                        if(res.code == 200){
                            let centerArray = [];
                            res.data.content.forEach((item,index)=>{
                                let a1 = {};
                                a1.value = item.num;
                                a1.name = item.name;
                                centerArray.push(a1);
                            })
                            this.oreProportionListData.proportionData = centerArray;
                            this.echarts5Fn();
                        }
                    })
                    //报警路障申报统计
                    HttpReq.truckDispatching.breakDownQueryDay({size:9999,createTime:this.currentTime.day,}).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();
                                    })
                                }
                            })
                        }
                    })
                    
                })
            }else{
                this.whetherShow = false;
            }  
        },
        //采取产量统计
        echarts1Fn(){
            var myChart = echarts.init(document.getElementById('echarts1View'));
            var option = {
                tooltip: {
                    trigger: 'item'
                },
                legend: {
                    orient: 'vertical',
                    top: 'center',
                    right: 'right',
                    textStyle:{
                        color:'white',
                        fontSize:16,
                    } 
                },
                color:['#1999D5', '#E68220','rgb(24,228,240)','#F3EF76','#F5335C'],
                series: [
                    {
                        name: '产量(吨)',
                        type: 'pie',
                        radius: ['40%', '85%'],
                        avoidLabelOverlap: false,
                        label: {
                            show: true,
                            position: 'inner',
                            formatter: '({d}%)'
                        },
                        labelLine: {
                            show: false
                        },
                        data: this.echarts1Data,
                    }
                ]
            };
            option && myChart.setOption(option);
        },
        //排行榜进度条文字转换
        progressFormat(number){
			let num = parseFloat(number) * 10
			return num;
		},
        //各采区当月完成率
        echarts2Fn(){
            var myChart = echarts.init(document.getElementById('echarts2View'));
            var option = {
                tooltip: {
                    trigger: 'axis',
                },
                legend: {
                    data: ['完成量', '计划量', '完成率'],
                    textStyle:{
                        color:'white',
                        fontSize:15,
                    }
                },
                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: 1000,
                        interval: 200,
                        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);
        },
        //月生产完成效率
        echarts3Fn(){
            var myChart = echarts.init(document.getElementById('echarts3View'));
            var option = {
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    data: ['目标完成', '计划完成'],
                    textStyle:{
                        color:'white',
                        fontSize:15,
                    }
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    data: this.echarts3Data.caiquName,
                    axisLabel: {
                        show: true,
                        textStyle: {
                            color: 'white'
                        }
                    },
                    axisLine: {
                        lineStyle: {
                            color: 'white',
                            width: 0
                        }   
                    }
                },
                yAxis: {
                    min: 0,
                    max: 100,
                    type: 'value',
                    name: '完成率(%)',
                    nameTextStyle: { fontSize: 14 },
                    axisLabel: {
                        show: true,
                        textStyle: {
                            color: 'white'
                        }
                    },
                    axisLine: {
                        lineStyle: {
                            color: 'white',
                            width: 0
                        }
                    }
                },
                series: [
                    {
                        name: '目标完成',
                        type: 'line',
                        data: this.echarts3Data.wanchengNum,
                        itemStyle: {
                            normal: {
                                lineStyle: { color: '#FFC200' } //设置线条颜色
                            }
                        }
                    },
                    {
                        name: '计划完成',
                        type: 'line',
                        data: this.echarts3Data.jihuaNum,
                        itemStyle: {
                            normal: {
                                lineStyle: { color: '#21DDF3' } //设置线条颜色
                            }
                        }
                    }
                ]
            };
            option && myChart.setOption(option);
        },
        //装卸点平均时长
        loadAndUnloadChangeTime(text){
            this.loadAndUnloadListData.selectTimeText = text;
            if(text == 'day'){
                this.loadAndUnloadListData.selectTimeDate = this.currentTime.day;
                HttpReq.truckDispatching.xiequAreaQueryDay({size:9999,createTime:this.loadAndUnloadListData.selectTimeDate,}).then((res) => {
					if(res.code == 200){
						console.log(res.data.content);
                        let caiquName = [];
                        let workTime = [];
                        res.data.content.forEach((item,index)=>{
                            caiquName.push(item.name);
                            workTime.push(item.worktime);
                        })
                        this.loadAndUnloadListData.caiquName = caiquName;
                        this.loadAndUnloadListData.timeData = workTime;
                        this.echarts4Fn();
					}
				})
            }
            if(text == 'month'){
                this.loadAndUnloadListData.selectTimeDate = this.currentTime.month;
                HttpReq.truckDispatching.xiequAreaQueryMonth({size:9999,createTime:this.loadAndUnloadListData.selectTimeDate,}).then((res) => {
					if(res.code == 200){
						console.log(res.data.content);
                        let caiquName = [];
                        let workTime = [];
                        res.data.content.forEach((item,index)=>{
                            caiquName.push(item.name);
                            workTime.push(item.worktime);
                        })
                        this.loadAndUnloadListData.caiquName = caiquName;
                        this.loadAndUnloadListData.timeData = workTime;
                        this.echarts4Fn();
					}
				})
            }
            if(text == 'year'){
                this.loadAndUnloadListData.selectTimeDate = this.currentTime.year;
                HttpReq.truckDispatching.xiequAreaQueryYear({size:9999,createTime:this.loadAndUnloadListData.selectTimeDate,}).then((res) => {
					if(res.code == 200){
						console.log(res.data.content);
                        let caiquName = [];
                        let workTime = [];
                        res.data.content.forEach((item,index)=>{
                            caiquName.push(item.name);
                            workTime.push(item.worktime);
                        })
                        this.loadAndUnloadListData.caiquName = caiquName;
                        this.loadAndUnloadListData.timeData = workTime;
                        this.echarts4Fn();
					}
				})
            }
        },
        echarts4Fn(){
            var myChart = echarts.init(document.getElementById('echarts4View'));
            var option = {
                tooltip: {
                    trigger: 'axis'
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    data: this.loadAndUnloadListData.caiquName,
                    axisLabel: {
                        show: true,
                        textStyle: {
                            color: 'white'
                        }
                    },
                    axisLine: {
                        lineStyle: {
                            color: 'white',
                            width: 0
                        }   
                    }
                },
                yAxis: {
                    type: 'value',
                    name: '平均时长',
                    nameTextStyle: { fontSize: 14 },
                    axisLabel: {
                        show: true,
                        textStyle: {
                            color: 'white'
                        }
                    },
                    axisLine: {
                        lineStyle: {
                            color: 'white',
                            width: 0
                        }
                    }
                },
                series: [
                    {
                        name: '时长(h)',
                        type: 'line',
                        data: this.loadAndUnloadListData.timeData,
                        itemStyle: {
                            normal: {
                                lineStyle: { color: '#FFC200' } //设置线条颜色
                            }
                        }
                    },
                ]
            };
            option && myChart.setOption(option);
        },
        //矿石产量比
        oreProportionChangeTime(text){
            this.oreProportionListData.selectTimeText = text;
            if(text == 'day'){
                this.oreProportionListData.selectTimeDate = this.currentTime.day;
                HttpReq.truckDispatching.screenOreProportionDayQuery({size:9999,createTime:this.oreProportionListData.selectTimeDate,}).then((res) => {
					if(res.code == 200){
                        let centerArray = [];
                        res.data.content.forEach((item,index)=>{
                            let a1 = {};
                            a1.value = item.num;
                            a1.name = item.name;
                            centerArray.push(a1);
                        })
                        this.oreProportionListData.proportionData = centerArray;
                        this.echarts5Fn();
					}
				})
            }
            if(text == 'month'){
                this.oreProportionListData.selectTimeDate = this.currentTime.month;
                HttpReq.truckDispatching.screenOreProportionMonthQuery({size:9999,createTime:this.oreProportionListData.selectTimeDate,}).then((res) => {
					if(res.code == 200){
                        let centerArray = [];
                        res.data.content.forEach((item,index)=>{
                            let a1 = {};
                            a1.value = item.num;
                            a1.name = item.name;
                            centerArray.push(a1);
                        })
                        this.oreProportionListData.proportionData = centerArray;
                        this.echarts5Fn();
					}
				})
            }
            if(text == 'year'){
                this.oreProportionListData.selectTimeDate = this.currentTime.year;
                HttpReq.truckDispatching.screenOreProportionYearQuery({size:9999,createTime:this.oreProportionListData.selectTimeDate,}).then((res) => {
					if(res.code == 200){
                        let centerArray = [];
                        res.data.content.forEach((item,index)=>{
                            let a1 = {};
                            a1.value = item.num;
                            a1.name = item.name;
                            centerArray.push(a1);
                        })
                        this.oreProportionListData.proportionData = centerArray;
                        this.echarts5Fn();
					}
				})
            }
        },
        echarts5Fn(){
            var myChart = echarts.init(document.getElementById('echarts5View'));
            var option = {
                tooltip: {
                    trigger: 'item'
                },
                color:['#1999D5', '#E68220','rgb(24,228,240)','#F3EF76','#F5335C'],
                series: [
                    {
                        name:'产量(吨)',
                        type: 'pie',
                        radius: '50%',
                        label: {
                            show: true,
                            formatter: '{b}({d}%)',
                            color:'white',
                            fontSize:'14',
                        },
                        labelLine: {
                            show: true
                        },
                        data: this.oreProportionListData.proportionData,
                    }
                ]
            };
            option && myChart.setOption(option);
        },
        //报警路障申报统计
        echarts6Fn(){
            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);
        },
        //卸货点卸货量统计
        echarts7Fn(){
            var myChart = echarts.init(document.getElementById('echarts7View'));
            var option = {
                tooltip: {
                    trigger: 'axis',
                },
                xAxis: [
                    {
                        type: 'category',
                        data: this.echarts7Data.xiedianName,
                        axisPointer: {
                            type: 'shadow'
                        },
                        axisLabel: {
                            show: true,
                            textStyle: {
                                color: 'white'
                            }
                        },
                        axisLine: {
                            lineStyle: {
                                color: 'white',
                                width: 1
                            }
                        }
                    }
                ],
                yAxis: [
                    {
                        type: 'value',
                        name: '产量(T)',
                        axisLabel: {
                            show: true,
                            textStyle: {
                                color: 'white'
                            }
                        },
                        axisLine: {
                            lineStyle: {
                                color: 'white',
                                width: 0
                            }
                        }
                    }
                ],
                series: [
                    {
                        type: 'bar',
                        data: this.echarts7Data.outputNum,
                        barWidth: 10,
                        itemStyle: {
                            normal: {
                                color: '#09EDFB'
                            }
                        }
                    }
                ]
            };
            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;
		},
        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;
		},
        yearCurrentTimeFn(){
			var date = new Date();
			var year = date.getFullYear();        //年 ,从 Date 对象以四位数字返回年份
			let currentFormatDate = year;
			this.currentTime.year = currentFormatDate;
		},
	},
}
</script>

<style scoped>
.dataAnalysisScrView{
    position: absolute;
    z-index: 1;
    width: 100%;
    height: 100%;
    overflow: hidden;
    display: flex;
    justify-content: space-between;
}
.dataAnalysisScrView_leftView{
    height: 100%;
    width: 20%;
}
.dataAnalysisScrView_centerView{
    height: 100%;
    width: 60%;
    position: relative;
}
.dataAnalysisScrView_rightView{
    height: 100%;
    width: 20%;
}
.dataAnalysisScrView_leftView>div{
    width: 100%;
    height: 23.5vh;
    background:no-repeat center center url('~@/assets/images/cutGraph/yuanjianjuxing1.png');
	background-size:100% 100%;
    padding: 5px 7px;
    box-sizing: border-box;
    overflow: hidden;
}
.dataAnalysisScrView_rightView>div{
    width: 100%;
    height: 23.5vh;
    background:no-repeat center center url('~@/assets/images/cutGraph/yuanjianjuxing1.png');
	background-size:100% 100%;
    padding: 5px 7px;
    box-sizing: border-box;
    overflow: hidden;
}
.dataAnalysisScrView_leftView_title,.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;
}
.dataAnalysisScrView_leftView_content,.dataAnalysisScrView_rightView_content{
    width: 100%;
    height: 19vh;
}
/* .table-box{
	margin-top: -10px;
} */
dl{
	display:table;
	width:100%;
}
dt{
	margin-top: 20px;
	display:table-row;
	background-color: #274088;
}
dt>div{
	display:table-cell;
	padding:5px 3px;
	font-size: 15px;
	font-weight: 500;
	color: rgb(24,228,240);
}
dd{
	display:table-row;
}
dd>div{
	display:table-cell;
	padding:5px 3px;
	font-size: 14px;
	color: rgb(24,228,240);
}
.truck_titleStyle{
    display: flex;
    justify-content: space-between;
    padding-right: 4vw;
}
.loadAndUnloadTitleDateStyle,.oreProportionTitleDateStyle{
    display: flex;
    color: #06EFFE;
    font-size: 16px;
    text-shadow: 0px 0px 0px;
    height: 3.5vh;
    align-items: center;
    z-index: 100;
}
.loadAndUnloadDateStyle_son1,.oreProportionDateStyle_son1{
    height: 2.5vh;
    line-height: 2.5vh;
    margin-right: 5px;
    padding:0px 5px;
    background-color: #2DB3BB;
    box-sizing: border-box;
    border-radius: 5px;
    cursor: pointer;
}
.loadAndUnloadDateStyle_son2,.oreProportionDateStyle_son2{
    height: 2.5vh;
    line-height: 2.5vh;
    margin-right: 5px;
    padding:0px 5px;
    box-sizing: border-box;
    border-radius: 5px;
    cursor: pointer;
}

#echarts1View{
    position: absolute;
    left: -5vh;
    width: 100%;
    height: 19vh;
}
.outputRankView{
    width: 100%;
    height: 18.5vh;
    overflow-y:auto;
    scrollbar-width: none;
}
.outputRankView::-webkit-scrollbar {
  display: none;
}
.l-left{
    font-size:16px;
    width:100px;
    text-align:center;
    color:#BFF7FF;
    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
    word-wrap:normal;
}
.el-progress{
    width: 70%;
}
.outputRankView >>> .el-progress__text{
	color:white;
}
#echarts2View{
    position: absolute;
    left: 0vh;
    width: 100%;
    height: 23vh;
}
#echarts3View{
    position: absolute;
    left: 0vh;
    width: 100%;
    height: 19vh;
}
#echarts4View{
    position: absolute;
    top: -2.5vh;
    width: 100%;
    height: 22vh;
}
#echarts5View{
    position: absolute;
    top: -4vh;
    width: 100%;
    height: 28vh;
}
#echarts6View{
    position: absolute;
    left: -6vw;
    width: 125%;
    height: 20vh;
}
#echarts7View{
    position: absolute;
    left: 0vw;
    top: -2.5vh;
    width: 105%;
    height: 25.5vh;
}
</style>