<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" id="outputRankView"></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 == 'week' ? 'loadAndUnloadDateStyle_son1' : 'loadAndUnloadDateStyle_son2' " @click="loadAndUnloadChangeTime('week')">周</div>
                        <div :class="loadAndUnloadListData.selectTimeText == 'month' ? 'loadAndUnloadDateStyle_son1' : 'loadAndUnloadDateStyle_son2' " @click="loadAndUnloadChangeTime('month')">月</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 == 'week' ? 'oreProportionDateStyle_son1' : 'oreProportionDateStyle_son2' " @click="oreProportionChangeTime('week')">周</div>
                        <div :class="oreProportionListData.selectTimeText == 'month' ? 'oreProportionDateStyle_son1' : 'oreProportionDateStyle_son2' " @click="oreProportionChangeTime('month')">月</div>
                    </div>
                </div>
                <div class="dataAnalysisScrView_rightView_content" style="position: relative;">
                    <div id="echarts5View" ref="chartPanel" style="width:100%;height: 18vh;margin-top: 4vh;"></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';
import "echarts-gl";
import { getPie3D } from "../../../components/echarts/bingtu3d";

export default {
    data() {
		return {
			whetherShow:false,
            dataAnalysisTimer:null,
            //时间
            currentTime:{
                day:'',
                month:'',
                year:'',
            },
            //采取产量统计
            echarts1Data:[],
            //各采区日产量排名
            outputRankData:{
                caiquName:[],
                caiquSeriesData:[],
            },
            //各采区当月完成率
            echarts2Data:{
                caiquName:[],
                wanchengNum:[],
                jihuaNum:[],
                wanchengRate:[],
            },
            //月生产完成效率
            echarts3Data:{
                caiquName:[],
                wanchengNum:[],
                jihuaNum:[],
            },
            //装卸点平均时长
            loadAndUnloadListData:{
                selectTimeText:'day',
                selectTimeDate:'',
                caiquName:[],
                timeData:[],
            },
            //矿石产量比
            oreProportionListData:{
                selectTimeText:'day',
                selectTimeDate:'',
                proportionData:[],
                optionData:[
                    {
                        name: "矿石",
                        value: 85,
                        itemStyle: {
                            opacity: 0.2,
                            color: "#8FDFFE",
                        },
                    },
                    {
                        name: "挖石",
                        value: 15,
                        itemStyle: {
                            opacity: 0.2,
                            color: "#00A8FF",
                        },
                    }
                ]
            },
            //报警路障申报统计
            echarts6Data:[],
            //卸货点卸货量统计
            echarts7Data:{
                xiedianName:[],
                outputNum:[],
            },
		}
	},
	methods: {
		loadData(text){
            if(text == true){
                this.whetherShow = true;
                this.dayCurrentTimeFn();
                this.monthCurrentTimeFn();
                this.yearCurrentTimeFn();
                
                this.$nextTick(()=>{
                    //采取产量统计图表
                    HttpReq.truckDispatching.getApiHl1().then((res) => {
                        if(res.code == 200){
                            let colorARR = ['#00A8FF','#8FDFFE','#F4F03A','#F5335C','#E68220','#00A8FF','#8FDFFE','#F4F03A','#F5335C','#E68220'];
                            let centerArray = [];
                            res.data.content.forEach((item,index)=>{
                                let a1 = {};
                                let a2 = {};
                                a1.name = item.name;
                                a1.value = item.num;
                                a2.opacity = 0.2,
                                a2.color = colorARR[index],
                                a1.itemStyle = a2;
                                centerArray.push(a1);
                            })
                            this.echarts1Data = centerArray;
                        }
                        this.echarts1_1Fn();
                    })
                    //各采区日产量排名
                    HttpReq.truckDispatching.caiquAreaQueryDay({size:6,sort:'total,desc'}).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.reverse();
                        this.outputRankData.caiquSeriesData = eh2_arr2.reverse();
                        this.echarts2_1Fn();
                    })
                    //各采区当月完成率 和 月生产完成效率
                    HttpReq.truckDispatching.caiquAreaQueryMonth().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.echarts3Data.caiquName = eh2_1_arr1;
                        this.echarts3Data.wanchengNum = eh2_1_arr2;
                        this.echarts3Data.jihuaNum = eh2_1_arr3;
                        this.echarts2Fn();
                        this.echarts3Fn();
                    })
                    //装卸点平均时长
                    if(this.loadAndUnloadListData.selectTimeText == 'day'){
                        HttpReq.truckDispatching.xiequAreaQueryDay({createTime:this.currentTime.day}).then((res) => {
                            if(res.code == 200){
                                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(this.loadAndUnloadListData.selectTimeText == 'week'){
                        HttpReq.truckDispatching.xiequAreaQueryMonth({createTime:this.currentTime.month}).then((res) => {
                            if(res.code == 200){
                                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(this.loadAndUnloadListData.selectTimeText == 'month'){
                        HttpReq.truckDispatching.xiequAreaQueryYear({createTime:this.currentTime.year}).then((res) => {
                            if(res.code == 200){
                                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(this.oreProportionListData.selectTimeText == 'day'){
                        HttpReq.truckDispatching.screenOreProportionDayQuery().then((res) => {
                            if(res.code == 200){
                                if(res.data.totalElements == 0){
                                    this.oreProportionListData.proportionData = this.oreProportionListData.optionData;
                                }else{
                                    let colorARR = ['#00A8FF','#8FDFFE','#F4F03A','#F5335C','#E68220','#00A8FF','#8FDFFE','#F4F03A','#F5335C','#E68220'];
                                    let centerArray = [];
                                    res.data.content.forEach((item,index)=>{
                                        let a1 = {};
                                        let a2 = {};
                                        a1.name = item.name;
                                        a1.value = item.num;
                                        a2.opacity = 0.2,
                                        a2.color = colorARR[index],
                                        a1.itemStyle = a2;
                                        centerArray.push(a1);
                                    })
                                    this.oreProportionListData.proportionData = centerArray;
                                }
                                this.echarts5Fn();
                            }
                        })
                    }
                    if(this.oreProportionListData.selectTimeText == 'week'){
                        HttpReq.truckDispatching.screenOreProportionMonthQuery().then((res) => {
                            if(res.code == 200){
                                if(res.data.totalElements == 0){
                                    this.oreProportionListData.proportionData = this.oreProportionListData.optionData;
                                }else{
                                    let colorARR = ['#00A8FF','#8FDFFE','#F4F03A','#F5335C','#E68220','#00A8FF','#8FDFFE','#F4F03A','#F5335C','#E68220'];
                                    let centerArray = [];
                                    res.data.content.forEach((item,index)=>{
                                        let a1 = {};
                                        let a2 = {};
                                        a1.name = item.name;
                                        a1.value = item.num;
                                        a2.opacity = 0.2,
                                        a2.color = colorARR[index],
                                        a1.itemStyle = a2;
                                        centerArray.push(a1);
                                    })
                                    this.oreProportionListData.proportionData = centerArray;
                                }
                                this.echarts5Fn();
                            }
                        })
                    }
                    if(this.oreProportionListData.selectTimeText == 'month'){
                        HttpReq.truckDispatching.screenOreProportionYearQuery().then((res) => {
                            if(res.code == 200){
                                if(res.data.totalElements == 0){
                                    this.oreProportionListData.proportionData = this.oreProportionListData.optionData;
                                }else{
                                    let colorARR = ['#00A8FF','#8FDFFE','#F4F03A','#F5335C','#E68220','#00A8FF','#8FDFFE','#F4F03A','#F5335C','#E68220'];
                                    let centerArray = [];
                                    res.data.content.forEach((item,index)=>{
                                        let a1 = {};
                                        let a2 = {};
                                        a1.name = item.name;
                                        a1.value = item.num;
                                        a2.opacity = 0.2,
                                        a2.color = colorARR[index],
                                        a1.itemStyle = a2;
                                        centerArray.push(a1);
                                    })
                                    this.oreProportionListData.proportionData = centerArray;
                                }
                                this.echarts5Fn();
                            }
                        })
                    }
                    //报警路障申报统计
                    HttpReq.truckDispatching.breakDownQueryDay({size:9999}).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();
                                    })
                                }
                            })
                        }
                    })
                    //卸货点卸货量统计
                    HttpReq.truckDispatching.xiequAreaQueryDay({createTime:this.currentTime.month}).then((res) => {
                        if(res.code == 200){
                            let xiedianName = [];
                            let outputNum = [];
                            res.data.content.forEach((item,index)=>{
                                xiedianName.push(item.name);
                                outputNum.push(item.outputNum);
                            })
                            this.echarts7Data.xiedianName = xiedianName;
                            this.echarts7Data.outputNum = outputNum;
                            this.echarts7Fn();
                        }
                    })

                    //定时器
                    this.dataAnalysisTimer = setInterval(() => {
                        //采取产量统计图表
                        HttpReq.truckDispatching.getApiHl1().then((res) => {
                            if(res.code == 200){
                                let colorARR = ['#00A8FF','#8FDFFE','#F4F03A','#F5335C','#E68220','#00A8FF','#8FDFFE','#F4F03A','#F5335C','#E68220'];
                                let centerArray = [];
                                res.data.content.forEach((item,index)=>{
                                    let a1 = {};
                                    let a2 = {};
                                    a1.name = item.name;
                                    a1.value = item.num;
                                    a2.opacity = 0.2,
                                    a2.color = colorARR[index],
                                    a1.itemStyle = a2;
                                    centerArray.push(a1);
                                })
                                this.echarts1Data = centerArray;
                            }
                            this.echarts1_1Fn();
                        })
                        //各采区日产量排名
                        HttpReq.truckDispatching.caiquAreaQueryDay({size:6,sort:'total,desc'}).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.reverse();
                            this.outputRankData.caiquSeriesData = eh2_arr2.reverse();
                            this.echarts2_1Fn();
                        })
                        //各采区当月完成率 和 月生产完成效率
                        HttpReq.truckDispatching.caiquAreaQueryMonth().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.echarts3Data.caiquName = eh2_1_arr1;
                            this.echarts3Data.wanchengNum = eh2_1_arr2;
                            this.echarts3Data.jihuaNum = eh2_1_arr3;
                            this.echarts2Fn();
                            this.echarts3Fn();
                        })
                        //装卸点平均时长
                        if(this.loadAndUnloadListData.selectTimeText == 'day'){
                            HttpReq.truckDispatching.xiequAreaQueryDay({createTime:this.currentTime.day}).then((res) => {
                                if(res.code == 200){
                                    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(this.loadAndUnloadListData.selectTimeText == 'week'){
                            HttpReq.truckDispatching.xiequAreaQueryMonth({createTime:this.currentTime.month}).then((res) => {
                                if(res.code == 200){
                                    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(this.loadAndUnloadListData.selectTimeText == 'month'){
                            HttpReq.truckDispatching.xiequAreaQueryYear({createTime:this.currentTime.year}).then((res) => {
                                if(res.code == 200){
                                    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(this.oreProportionListData.selectTimeText == 'day'){
                            HttpReq.truckDispatching.screenOreProportionDayQuery().then((res) => {
                                if(res.code == 200){
                                    if(res.data.totalElements == 0){
                                        this.oreProportionListData.proportionData = this.oreProportionListData.optionData;
                                    }else{
                                        let colorARR = ['#00A8FF','#8FDFFE','#F4F03A','#F5335C','#E68220','#00A8FF','#8FDFFE','#F4F03A','#F5335C','#E68220'];
                                        let centerArray = [];
                                        res.data.content.forEach((item,index)=>{
                                            let a1 = {};
                                            let a2 = {};
                                            a1.name = item.name;
                                            a1.value = item.num;
                                            a2.opacity = 0.2,
                                            a2.color = colorARR[index],
                                            a1.itemStyle = a2;
                                            centerArray.push(a1);
                                        })
                                        this.oreProportionListData.proportionData = centerArray;
                                    }
                                    this.echarts5Fn();
                                }
                            })
                        }
                        if(this.oreProportionListData.selectTimeText == 'week'){
                            HttpReq.truckDispatching.screenOreProportionMonthQuery().then((res) => {
                                if(res.code == 200){
                                    if(res.data.totalElements == 0){
                                        this.oreProportionListData.proportionData = this.oreProportionListData.optionData;
                                    }else{
                                        let colorARR = ['#00A8FF','#8FDFFE','#F4F03A','#F5335C','#E68220','#00A8FF','#8FDFFE','#F4F03A','#F5335C','#E68220'];
                                        let centerArray = [];
                                        res.data.content.forEach((item,index)=>{
                                            let a1 = {};
                                            let a2 = {};
                                            a1.name = item.name;
                                            a1.value = item.num;
                                            a2.opacity = 0.2,
                                            a2.color = colorARR[index],
                                            a1.itemStyle = a2;
                                            centerArray.push(a1);
                                        })
                                        this.oreProportionListData.proportionData = centerArray;
                                    }
                                    this.echarts5Fn();
                                }
                            })
                        }
                        if(this.oreProportionListData.selectTimeText == 'month'){
                            HttpReq.truckDispatching.screenOreProportionYearQuery().then((res) => {
                                if(res.code == 200){
                                    if(res.data.totalElements == 0){
                                        this.oreProportionListData.proportionData = this.oreProportionListData.optionData;
                                    }else{
                                        let colorARR = ['#00A8FF','#8FDFFE','#F4F03A','#F5335C','#E68220','#00A8FF','#8FDFFE','#F4F03A','#F5335C','#E68220'];
                                        let centerArray = [];
                                        res.data.content.forEach((item,index)=>{
                                            let a1 = {};
                                            let a2 = {};
                                            a1.name = item.name;
                                            a1.value = item.num;
                                            a2.opacity = 0.2,
                                            a2.color = colorARR[index],
                                            a1.itemStyle = a2;
                                            centerArray.push(a1);
                                        })
                                        this.oreProportionListData.proportionData = centerArray;
                                    }
                                    this.echarts5Fn();
                                }
                            })
                        }
                        //报警路障申报统计
                        HttpReq.truckDispatching.breakDownQueryDay({size:9999}).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();
                                        })
                                    }
                                })
                            }
                        })
                        //卸货点卸货量统计
                        HttpReq.truckDispatching.xiequAreaQueryDay({createTime:this.currentTime.month}).then((res) => {
                            if(res.code == 200){
                                let xiedianName = [];
                                let outputNum = [];
                                res.data.content.forEach((item,index)=>{
                                    xiedianName.push(item.name);
                                    outputNum.push(item.outputNum);
                                })
                                this.echarts7Data.xiedianName = xiedianName;
                                this.echarts7Data.outputNum = outputNum;
                                this.echarts7Fn();
                            }
                        })

                    },10000)
                    
                })
            }else{
                if(this.dataAnalysisTimer) {
                    clearInterval(this.dataAnalysisTimer);
                }
                this.whetherShow = false;
            }
        },
        //采取产量统计
        echarts1_1Fn(){
            // 基于准备好的dom，初始化echarts实例
            echarts.init(document.getElementById('echarts1View')).dispose();
            let chartPanel = echarts.init(document.getElementById("echarts1View"));
            for (let i = 0; i < this.echarts1Data.length; i++) {
                delete this.echarts1Data[i].itemStyle.opacity;
            }
            // 传入数据生成 option
            let series = getPie3D(this.echarts1Data, 2);  
            let option = {
                tooltip: {
                    formatter: (params) => {
                        if (
                        params.seriesName !== "mouseoutSeries" &&
                        params.seriesName !== "pie2d"
                        ) {
                        return `<div style="padding:0 0px">${params.seriesName}：${(
                            option.series[params.seriesIndex].pieData.proportion * 100
                        ).toFixed(2)}%</div>`;
                        }
                    },
                },
                legend: {
                    data: this.echarts1Data,
                    top:'center',
                    orient: 'vertical',
                    right: '7%',
                    textStyle: {
                        color: "#fff",
                        fontSize: 14,
                    },
                },
                xAxis3D: {
                min: -1,
                max: 1,
                },
                yAxis3D: {
                min: -1,
                max: 1,
                },
                zAxis3D: {
                min: -1,
                max: 1,
                },
                grid3D: {
                show: false, //是否显示三维笛卡尔坐标系。
                boxHeight: 15, //三维笛卡尔坐标系在三维场景中的高度
                top: "1%",
                // bottom: "80%",
                // environment: "#021041", //背景
                viewControl: {
                    //用于鼠标的旋转，缩放等视角控制
                    alpha: 40, //角度
                    distance: 210, //调整视角到主体的距离，类似调整zoom 重要
                    rotateSensitivity: 0, //设置为0无法旋转
                    zoomSensitivity: 0, //设置为0无法缩放
                    panSensitivity: 0, //设置为0无法平移
                    autoRotate: false, //自动旋转
                },
                },
                series: series,
            };
            chartPanel.setOption(option);
        },
        //各采区日产量排名
        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);
        },
        //各采区当月完成率
        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);
        },
        //月生产完成效率
        echarts3Fn(){
            echarts.init(document.getElementById('echarts3View')).dispose();
            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: {
                    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'){
                HttpReq.truckDispatching.xiequAreaQueryDay({createTime:this.currentTime.day}).then((res) => {
					if(res.code == 200){
                        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 == 'week'){
                HttpReq.truckDispatching.xiequAreaQueryMonth({createTime:this.currentTime.month}).then((res) => {
					if(res.code == 200){
                        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'){
                HttpReq.truckDispatching.xiequAreaQueryYear({createTime:this.currentTime.year}).then((res) => {
					if(res.code == 200){
                        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(){
            echarts.init(document.getElementById('echarts4View')).dispose();
            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'){
                HttpReq.truckDispatching.screenOreProportionDayQuery().then((res) => {
                    if(res.code == 200){
                        if(res.data.totalElements == 0){
                            this.oreProportionListData.proportionData = this.oreProportionListData.optionData;
                        }else{
                            let colorARR = ['#00A8FF','#8FDFFE','#F4F03A','#F5335C','#E68220','#00A8FF','#8FDFFE','#F4F03A','#F5335C','#E68220'];
                            let centerArray = [];
                            res.data.content.forEach((item,index)=>{
                                let a1 = {};
                                let a2 = {};
                                a1.name = item.name;
                                a1.value = item.num;
                                a2.opacity = 0.2,
                                a2.color = colorARR[index],
                                a1.itemStyle = a2;
                                centerArray.push(a1);
                            })
                            this.oreProportionListData.proportionData = centerArray;
                        }
                        this.echarts5Fn();
                    }
                })
            }
            if(text == 'week'){
                HttpReq.truckDispatching.screenOreProportionMonthQuery().then((res) => {
					if(res.code == 200){
                        if(res.data.totalElements == 0){
                            this.oreProportionListData.proportionData = this.oreProportionListData.optionData;
                        }else{
                            let colorARR = ['#00A8FF','#8FDFFE','#F4F03A','#F5335C','#E68220','#00A8FF','#8FDFFE','#F4F03A','#F5335C','#E68220'];
                            let centerArray = [];
                            res.data.content.forEach((item,index)=>{
                                let a1 = {};
                                let a2 = {};
                                a1.name = item.name;
                                a1.value = item.num;
                                a2.opacity = 0.2,
                                a2.color = colorARR[index],
                                a1.itemStyle = a2;
                                centerArray.push(a1);
                            })
                            this.oreProportionListData.proportionData = centerArray;
                        }
                        this.echarts5Fn();
                    }
				})
            }
            if(text == 'month'){
                HttpReq.truckDispatching.screenOreProportionYearQuery().then((res) => {
					if(res.code == 200){
                        if(res.data.totalElements == 0){
                            this.oreProportionListData.proportionData = this.oreProportionListData.optionData;
                        }else{
                            let colorARR = ['#00A8FF','#8FDFFE','#F4F03A','#F5335C','#E68220','#00A8FF','#8FDFFE','#F4F03A','#F5335C','#E68220'];
                            let centerArray = [];
                            res.data.content.forEach((item,index)=>{
                                let a1 = {};
                                let a2 = {};
                                a1.name = item.name;
                                a1.value = item.num;
                                a2.opacity = 0.2,
                                a2.color = colorARR[index],
                                a1.itemStyle = a2;
                                centerArray.push(a1);
                            })
                            this.oreProportionListData.proportionData = centerArray;
                        }
                        this.echarts5Fn();
                    }
				})
            }
        },
        echarts5Fn(){
            // 基于准备好的dom，初始化echarts实例
            echarts.init(document.getElementById('echarts5View')).dispose();
            let chartPanel = echarts.init(document.getElementById("echarts5View"));
            for (let i = 0; i < this.oreProportionListData.proportionData.length; i++) {
                delete this.oreProportionListData.proportionData[i].itemStyle.opacity;
            }
            // 传入数据生成 option
            let series = getPie3D(this.oreProportionListData.proportionData, 0);  
            let option = {
                tooltip: {
                formatter: (params) => {
                    if (
                    params.seriesName !== "mouseoutSeries" &&
                    params.seriesName !== "pie2d"
                    ) {
                    return `<div style="padding:0 0px">${params.seriesName}：${(
                        option.series[params.seriesIndex].pieData.proportion * 100
                    ).toFixed(2)}%</div>`;
                    }
                },
                },
                xAxis3D: {
                min: -1,
                max: 1,
                },
                yAxis3D: {
                min: -1,
                max: 1,
                },
                zAxis3D: {
                min: -1,
                max: 1,
                },
                grid3D: {
                show: false, //是否显示三维笛卡尔坐标系。
                boxHeight: 20, //三维笛卡尔坐标系在三维场景中的高度
                top: "1%",
                // bottom: "80%",
                // environment: "#021041", //背景
                viewControl: {
                    //用于鼠标的旋转，缩放等视角控制
                    alpha: 25, //角度
                    distance: 210, //调整视角到主体的距离，类似调整zoom 重要
                    rotateSensitivity: 0, //设置为0无法旋转
                    zoomSensitivity: 0, //设置为0无法缩放
                    panSensitivity: 0, //设置为0无法平移
                    autoRotate: false, //自动旋转
                },
                },
                series: series,
            };
            chartPanel.setOption(option);

            //是否需要label指引线，如果要就添加一个透明的2d饼状图并调整角度使得labelLine和3d的饼状图对齐，并再次setOption
            option.series.push({
                name: "pie2d",
                type: "pie",
                label: {
                color: "#00D7E9",
                fontSize: 16,
                //  position: 'inner',
                // formatter: "{b}\n\n",
                // padding: [0, -40],
                formatter: (item) => {
                    return item.data.name + ":" + item.data.value + "%" + "";
                },
                },
                labelLine: {
                length: 50,
                length2: 30,
                lineStyle: {
                    color: "#ffffff",
                    width: 1.5,
                },
                },
                startAngle: 350, //起始角度，支持范围[0, 360]。 //重要
                clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
                radius: ["25%", "50%"],
                center: ["50%", "50%"],
                data: this.oreProportionListData.proportionData,
                itemStyle: {
                opacity: 0,
                },
                top: "10%",
                avoidLabelOverlap: true, //防止标签重叠
            });
            chartPanel.setOption(option);
        },
        //报警路障申报统计
        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%', '85%'],
                        avoidLabelOverlap: false,
                        label: {
                            show: true,
                            position: 'inner',
                            formatter: '({d}%)'
                        },
                        labelLine: {
                            show: false
                        },
                        data: this.echarts6Data,
                    }
                ]
            };
            option && myChart.setOption(option);
        },
        //卸货点卸货量统计
        echarts7Fn(){
            echarts.init(document.getElementById('echarts7View')).dispose();
            var myChart = echarts.init(document.getElementById('echarts7View'));
            var option = {
                tooltip: {
                    trigger: 'axis',
                },
                grid: {
                    left: '3%',
                    right: '8%',
                    bottom: '20%',
                    containLabel: true
                },
                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: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                { offset: 0, color: '#00B7FF' },
                                { offset: 1, color: '#2244AC' }
                            ])
                            
                        },
                    }
                ]
            };
            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;
		},
	},
    beforeDestroy() {
        if(this.dataAnalysisTimer) {
            clearInterval(this.dataAnalysisTimer);
        }
    },
}
</script>

<style scoped>
.dataAnalysisScrView{
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: hidden;
    display: flex;
    justify-content: space-between;
}
.dataAnalysisScrView_leftView{
    height: 100%;
    width: 20%;
    z-index: 3;
}
.dataAnalysisScrView_rightView{
    height: 100%;
    width: 20%;
    z-index: 3;
}
.dataAnalysisScrView_leftView>div{
    width: 100%;
    height: 23.5vh;
    /* background:no-repeat center center url('~@/assets/images/cutGraph/yuanjianjuxing1.png');
	background-size:100% 100%; */
    background-color: rgba(32,42,67,0.95);
    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%; */
    background-color: rgba(32,42,67,0.95);
    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: -10vh;
    top: -7vh;
    width: 120%;
    height: 27vh;
}
.outputRankView{
    width: 100%;
    height: 18.5vh;
}
.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%;
}
#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>