<template>
    <div class="dataScrView" v-if="whetherShow">
        <div class="dataScrView_leftView">
            <!-- 采区产量统计 -->
            <div>
                <div class="dataScrView_leftView_title">采区产量统计</div>
                <div class="dataScrView_leftView_content">
                    <div class="dataScrView_leftView_content_view1">
                        <div class="dataScrView_leftView_content_view1_son1">{{parseInt(outputMineData.day.eff)}}%</div>
                        <div style="color:white;margin-left:15px;font-size: 16px;">
                            <div>日产量</div>
                            <div class="outside-div1">
                                <div v-for="(item,index) in parseInt(parseInt(outputMineData.day.eff) / 10)" :key="index" class="inside-div1"></div>
                            </div>
                            当前日产量：
                            <span style="color:#02F7EF;">{{outputMineData.day.finish}}吨</span>
                        </div>
                    </div>
                    <div class="dataScrView_leftView_content_view1">
                        <div class="dataScrView_leftView_content_view1_son1">{{parseInt(outputMineData.month.eff)}}%</div>
                        <div style="color:white;margin-left:15px;font-size: 16px;">
                            <div>月产量</div>
                            <div class="outside-div1">
                                <div v-for="(item,index) in parseInt(parseInt(outputMineData.month.eff) / 10)" :key="index" class="inside-div1"></div>
                            </div>
                            当前月产量：
                            <span style="color:#02F7EF;">{{outputMineData.month.finish}}吨</span>
                        </div>
                    </div>
                    <div class="dataScrView_leftView_content_view1">
                        <div class="dataScrView_leftView_content_view1_son1">{{parseInt(outputMineData.year.eff)}}%</div>
                        <div style="color:white;margin-left:15px;font-size: 16px;">
                            <div>年产量</div>
                            <div class="outside-div1">
                                <div v-for="(item,index) in parseInt(parseInt(outputMineData.year.eff) / 10)" :key="index" class="inside-div1"></div>
                            </div>
                            当前年产量：
                            <span style="color:#02F7EF;">{{outputMineData.year.finish}}吨</span>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 司机信息 -->
            <div>
                <div class="dataScrView_leftView_title">司机信息</div>
                <div class="dataScrView_leftView_content">
                    <div class="driverInforViewsStyle">
                        <div class="driverTotalnumberStyle">
                            <img src="../../../../assets/images/cutGraph/siji11.png">
                            <div>
                                <div style="text-align: center;font-size:15px;">司机总人数</div>
                                <div style="text-align: center;font-size:18px;">{{driverData.totalNumber}}</div>
                            </div>
                        </div>
                        <div class="presentDrivernumberStyle">
                            <div style="color:#3DFBEB;">
                                <div style="text-align: center;font-size:15px;">当前工作人数</div>
                                <div style="text-align: center;font-size:18px;">{{driverData.workersNumber}}</div>
                            </div>
                            <div style="color:#F7E518;">
                                <div style="text-align: center;font-size:15px;">当前休息人数</div>
                                <div style="text-align: center;font-size:18px;">{{driverData.restNumber}}</div>
                            </div>
                        </div>
                    </div>
                    <div class="driverInforListStyle">
                        <div class="rolling">
                            <div class="table-box">
                                <dl>
                                    <dt>
                                        <div>司机姓名</div>
                                        <div>驾驶车辆</div>
                                        <div>驾驶时长</div>
                                        <div>计划结束时间</div>
                                    </dt>
                                    <dd v-for="(item,index) in driverData.driverTableData" :key="index">
                                        <div>{{item.name}}</div>
                                        <div>{{item.car}}</div>
                                        <div>{{item.time}}</div>
                                        <div>{{item.endTime}}</div>
                                    </dd>
                                </dl>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 卡车司机排行榜-->
            <div>
                <div class="dataScrView_leftView_title truck_titleStyle">
                    <div>卡车司机排行榜</div>
                    <div class="driverTitleDateStyle">
                        <div :class="truckRankListData.selectTimeText == 'day' ? 'driverTitleDateStyle_son1' : 'driverTitleDateStyle_son2' " @click="truckChangeTime('day')">日</div>
                        <div :class="truckRankListData.selectTimeText == 'week' ? 'driverTitleDateStyle_son1' : 'driverTitleDateStyle_son2' " @click="truckChangeTime('week')">周</div>
                        <div :class="truckRankListData.selectTimeText == 'month' ? 'driverTitleDateStyle_son1' : 'driverTitleDateStyle_son2' " @click="truckChangeTime('month')">月</div>
                    </div>
                </div>
                <div class="dataScrView_leftView_content">
                    <div class="dataScrView_leftView_content_views2">
                        <div :class="truckRankListData.selectFieldText == 'juli' ? '' : 'selectFieldStyle' "  @click="truckChangeField('juli')">运输距离</div>
                        <div :class="truckRankListData.selectFieldText == 'time' ? '' : 'selectFieldStyle' "  @click="truckChangeField('time')">工作时长</div>
                        <div :class="truckRankListData.selectFieldText == 'yunzai' ? '' : 'selectFieldStyle' "  @click="truckChangeField('yunzai')">运载量</div>
                        <div :class="truckRankListData.selectFieldText == 'jiedan' ? '' : 'selectFieldStyle' "  @click="truckChangeField('jiedan')">接单数</div>
                    </div>
                    <div class="dataScrView_leftView_content_views3" id="dataScrView_leftView_content_views3_1"></div>
                </div>
            </div>
            <!-- 铲车司机排行榜-->
            <div>
                <div class="dataScrView_leftView_title truck_titleStyle">
                    <div>铲车司机排行榜</div>
                    <div class="driverTitleDateStyle">
                        <div :class="forkLiftRankListData.selectTimeText == 'day' ? 'driverTitleDateStyle_son1' : 'driverTitleDateStyle_son2' " @click="forkLiftChangeTime('day')">日</div>
                        <div :class="forkLiftRankListData.selectTimeText == 'week' ? 'driverTitleDateStyle_son1' : 'driverTitleDateStyle_son2' " @click="forkLiftChangeTime('week')">周</div>
                        <div :class="forkLiftRankListData.selectTimeText == 'month' ? 'driverTitleDateStyle_son1' : 'driverTitleDateStyle_son2' " @click="forkLiftChangeTime('month')">月</div>
                    </div>
                </div>
                <div class="dataScrView_leftView_content">
                    <div class="dataScrView_leftView_content_views2">
                        <div :class="forkLiftRankListData.selectFieldText == 'time' ? '' : 'selectFieldStyle' "  @click="forkLiftChangeField('time')">工作时长</div>
                        <div :class="forkLiftRankListData.selectFieldText == 'average' ? '' : 'selectFieldStyle' "  @click="forkLiftChangeField('average')">平均时长</div>
                        <div :class="forkLiftRankListData.selectFieldText == 'yunzai' ? '' : 'selectFieldStyle' "  @click="forkLiftChangeField('yunzai')">装车量</div>
                        <div :class="forkLiftRankListData.selectFieldText == 'jiedan' ? '' : 'selectFieldStyle' "  @click="forkLiftChangeField('jiedan')">装车数</div>
                    </div>
                    <div class="dataScrView_leftView_content_views3" v-if="forkLiftRankListData.selectFieldText == 'time'">
                        <div v-for="(item,index) in forkLiftRankListData.listData" :key="index" :class="'forkliftRank' + (index + 1)">
                            <div style="color:#BCF0FE;">{{item.driver}}</div>
                            <div style="color:#1AC9FF;">{{item.time}}h</div>
                            <div style="color:#BCF0FE;">{{item.createTime}}</div>
                        </div>
                    </div>
                    <div class="dataScrView_leftView_content_views3" v-if="forkLiftRankListData.selectFieldText == 'average'">
                        <div v-for="(item,index) in forkLiftRankListData.listData" :key="index" :class="'forkliftRank' + (index + 1)">
                            <div style="color:#BCF0FE;">{{item.driver}}</div>
                            <div style="color:#1AC9FF;">{{item.average}}h</div>
                            <div style="color:#BCF0FE;">{{item.createTime}}</div>
                        </div>
                    </div>
                    <div class="dataScrView_leftView_content_views3" v-if="forkLiftRankListData.selectFieldText == 'yunzai'">
                        <div v-for="(item,index) in forkLiftRankListData.listData" :key="index" :class="'forkliftRank' + (index + 1)">
                            <div style="color:#BCF0FE;">{{item.driver}}</div>
                            <div style="color:#1AC9FF;">{{item.yunzai}}吨</div>
                            <div style="color:#BCF0FE;">{{item.createTime}}</div>
                        </div>
                    </div>
                    <div class="dataScrView_leftView_content_views3" v-if="forkLiftRankListData.selectFieldText == 'jiedan'">
                        <div v-for="(item,index) in forkLiftRankListData.listData" :key="index" :class="'forkliftRank' + (index + 1)">
                            <div style="color:#BCF0FE;">{{item.driver}}</div>
                            <div style="color:#1AC9FF;">{{item.jiedan}}辆</div>
                            <div style="color:#BCF0FE;">{{item.createTime}}</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="dataScrView_centerView">
            <div class="position: relative;">
                <div class="dataScrView_centerView_title">
                    <div :class="centerViewData.moduleText == 'centerModule1' ? 'centerModuleSelectStyle' : ''" @click="centerSelectFn('centerModule1')">产量数据</div>
                    <div :class="centerViewData.moduleText == 'centerModule2' ? 'centerModuleSelectStyle' : ''" @click="centerSelectFn('centerModule2')">运载数据</div>
                    <div :class="centerViewData.moduleText == 'centerModule3' ? 'centerModuleSelectStyle' : ''" @click="centerSelectFn('centerModule3')">装载数据</div>
                </div>
                <div class="dataScrView_centerView_planNum" v-if="centerViewData.moduleText == 'centerModule1'">
                    <div>
                        <div>
                            <div style="color:#FFFFFF;font-size:14px;">今日计划量</div>
                            <div style="color:#00E9FD;font-size:16px;font-weight:600;">{{outputMineData.day.plan}}吨</div>
                        </div>
                        <img src="../../../../assets/images/cutGraph/renwujihua1.png">
                    </div>
                    <div>
                        <div>
                            <div style="color:#FFFFFF;font-size:14px;">今日完成量</div>
                            <div style="color:#00E9FD;font-size:16px;font-weight:600;">{{outputMineData.day.finish}}吨</div>
                        </div>
                        <img src="../../../../assets/images/cutGraph/mubiaoguanli1.png">
                    </div>
                    <div>
                        <div>
                            <div style="color:#FFFFFF;font-size:14px;">今日完成率</div>
                            <div style="color:#00E9FD;font-size:16px;font-weight:600;">{{parseInt(outputMineData.day.eff)}}%</div>
                        </div>
                        <img src="../../../../assets/images/cutGraph/wancheng1.png">
                    </div>
                    <div>
                        <div>
                            <div style="color:#FFFFFF;font-size:14px;">当月计划量</div>
                            <div style="color:#00E9FD;font-size:16px;font-weight:600;">{{outputMineData.month.plan}}吨</div>
                        </div>
                        <img src="../../../../assets/images/cutGraph/jihuarenwu2.png">
                    </div>
                    <div>
                        <div>
                            <div style="color:#FFFFFF;font-size:14px;">当月累计完成量</div>
                            <div style="color:#00E9FD;font-size:16px;font-weight:600;">{{outputMineData.month.finish}}吨</div>
                        </div>
                        <img src="../../../../assets/images/cutGraph/zichantongji1.png">
                    </div>
                    <div>
                        <div>
                            <div style="color:#FFFFFF;font-size:14px;">当月完成率</div>
                            <div style="color:#00E9FD;font-size:16px;font-weight:600;">{{parseInt(outputMineData.month.eff)}}%</div>
                        </div>
                        <img src="../../../../assets/images/cutGraph/wanchenglv1.png">
                    </div>
                </div>
                <div class="dataScrView_centerView_planNum" v-if="centerViewData.moduleText == 'centerModule2'">
                    <div>
                        <div>
                            <div style="color:#FFFFFF;font-size:14px;">今日总运载量</div>
                            <div style="color:#00E9FD;font-size:16px;font-weight:600;">{{carryCenterData.dayAllCarry1}}吨</div>
                        </div>
                        <img src="../../../../assets/images/cutGraph/renwujihua1.png">
                    </div>
                    <div>
                        <div>
                            <div style="color:#FFFFFF;font-size:14px;">今日平均运载量</div>
                            <div style="color:#00E9FD;font-size:16px;font-weight:600;">{{carryCenterData.dayAverageCarry1}}吨/小时</div>
                        </div>
                        <img src="../../../../assets/images/cutGraph/mubiaoguanli1.png">
                    </div>
                    <div>
                        <div>
                            <div style="color:#FFFFFF;font-size:14px;">今日总里程数</div>
                            <div style="color:#00E9FD;font-size:16px;font-weight:600;">{{carryCenterData.dayAllMil1}}KM</div>
                        </div>
                        <img src="../../../../assets/images/cutGraph/wancheng1.png">
                    </div>
                    <div>
                        <div>
                            <div style="color:#FFFFFF;font-size:14px;">今日总车数</div>
                            <div style="color:#00E9FD;font-size:16px;font-weight:600;">{{carryCenterData.dayAllCarNum}}辆</div>
                        </div>
                        <img src="../../../../assets/images/cutGraph/jihuarenwu2.png">
                    </div>
                    <div>
                        <div>
                            <div style="color:#FFFFFF;font-size:14px;">单次运载平均时长</div>
                            <div style="color:#00E9FD;font-size:16px;font-weight:600;">{{carryCenterData.singleAverageTime}}H</div>
                        </div>
                        <img src="../../../../assets/images/cutGraph/zichantongji1.png">
                    </div>
                    <div>
                        <div>
                            <div style="color:#FFFFFF;font-size:14px;">单次运载平均里程</div>
                            <div style="color:#00E9FD;font-size:16px;font-weight:600;">{{carryCenterData.singleAverageMil}}KM</div>
                        </div>
                        <img src="../../../../assets/images/cutGraph/wanchenglv1.png">
                    </div>
                </div>
                <div class="dataScrView_centerView_planNum3" v-if="centerViewData.moduleText == 'centerModule3'">
                    <div>
                        <div>
                            <div style="color:#FFFFFF;font-size:14px;">今日装载量</div>
                            <div style="color:#00E9FD;font-size:16px;font-weight:600;">{{loadCenterData.dayAllLoad1}}吨</div>
                        </div>
                        <img src="../../../../assets/images/cutGraph/renwujihua1.png">
                    </div>
                    <div>
                        <div>
                            <div style="color:#FFFFFF;font-size:14px;">今日平均装载量</div>
                            <div style="color:#00E9FD;font-size:16px;font-weight:600;">{{loadCenterData.dayAverageLoad1}}吨/小时</div>
                        </div>
                        <img src="../../../../assets/images/cutGraph/mubiaoguanli1.png">
                    </div>
                    <div>
                        <div>
                            <div style="color:#FFFFFF;font-size:14px;">今日总工时</div>
                            <div style="color:#00E9FD;font-size:16px;font-weight:600;">{{loadCenterData.dayAllTime}}H</div>
                        </div>
                        <img src="../../../../assets/images/cutGraph/wancheng1.png">
                    </div>
                    <div>
                        <div>
                            <div style="color:#FFFFFF;font-size:14px;">今日装载车数</div>
                            <div style="color:#00E9FD;font-size:16px;font-weight:600;">{{loadCenterData.dayLoadCarNum}}辆</div>
                        </div>
                        <img src="../../../../assets/images/cutGraph/jihuarenwu2.png">
                    </div>
                </div>
                <div id="centerEchartsView"></div>
            </div>
        </div>
        <div class="dataScrView_rightView">
            <!-- 气象数据 -->
            <div>
                <div class="dataScrView_rightView_title">气象数据</div>
                <div class="dataScrView_rightView_content">
                    <div class="todayWeather1">
                        <div style="font-size:40px;margin-right:30px;">{{(parseInt(weatherData.today.high.slice(3,5)) +  parseInt(weatherData.today.low.slice(3,5))) / 2}}℃</div>
                        <img :src=" weatherData.today.type == '晴' ? weatherPic.sunnyPic : weatherData.today.type == '多云' ? weatherPic.cloudyPic : weatherPic.overcastPic " height="25">
                        <div style="font-size:18px;">{{weatherData.today.type}} / {{currentTime.day}}</div>
                    </div>
                    <div class="todayWeather2">
                        <div v-for="(item,index) in weatherData.forecastData" :key="index">
                            <div style="color:#D0DAFF;font-size:13px;margin-bottom:5px;">{{item.date}}</div>
                            <img :src="item.type == '晴' ? weatherPic.sunnyPic : item.type == '多云' ? weatherPic.cloudyPic : weatherPic.overcastPic " height="25">
                            <div style="color:#D0DAFF;font-size:15px;margin-top:5px;">{{(item.low.slice(3,6)) + '-' +(item.high.slice(3,6))}}</div>
                        </div>
                    </div>
                    <div class="todayWeather3">
                        <img src="../../../../assets/images/cutGraph/fengli1.png" height="45">
                        <div>风力：{{weatherData.today.fengli.slice(9,10)}}级</div>
                        <div>
                            <div>温度：{{(parseInt(weatherData.today.high.slice(3,5)) +  parseInt(weatherData.today.low.slice(3,5))) / 2}}℃</div>
                            <div>湿度：{{(parseInt(weatherData.today.high.slice(3,5)) +  parseInt(weatherData.today.low.slice(3,5))) / 2}}%</div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 车辆工时-->
            <div>
                <div class="dataScrView_rightView_title truck_titleStyle">
                    <div>车辆工时</div>
                    <div class="driverTitleDateStyle">
                        <div :class="carWorkTimeData.selectTimeText == 'day' ? 'driverTitleDateStyle_son1' : 'driverTitleDateStyle_son2' " @click="carWorkTimeChangeTime('day')">日</div>
                        <div :class="carWorkTimeData.selectTimeText == 'month' ? 'driverTitleDateStyle_son1' : 'driverTitleDateStyle_son2' " @click="carWorkTimeChangeTime('month')">月</div>
                        <div :class="carWorkTimeData.selectTimeText == 'year' ? 'driverTitleDateStyle_son1' : 'driverTitleDateStyle_son2' " @click="carWorkTimeChangeTime('year')">年</div>
                    </div>
                </div>
                <div class="dataScrView_rightView_content">
                    <div class="carWorkTimeStyle">
                        <div v-for="(item,index) in carWorkTimeData.listData" :key="index">
                            <div class="carPicStyle1">
                                <img src="../../../../assets/images/cutGraph/huoyunqiche1.png">
                            </div>
                            <div class="carPicStyle2">
                                <div style="margin-top:0.5vh;font-size:17px;">{{item.cartype}}</div>
                                <div style="font-size:14px;margin-top:1.5vh;">总工时：<b>{{item.gongshi}}</b>H</div>
                                <div style="font-size:14px;margin-top:1vh;">闲置率：<b>{{item.xianzhi}}</b>%</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 矿石开采效率 -->
            <div>
                <div class="dataScrView_rightView_title">矿石开采效率</div>
                <div class="dataScrView_rightView_content">
                    <div class="dataScrView_rightView_content_view1 guanhulanseditu">
                        <div id='liquidEchart1' class="dataScrView_rightView_content_view1_rate1"></div>
                        <div style="color:white;">
                            <div style="color:#A6F6F9;font-size:20px;"><span style="color:#06BEFA;">{{exploitationEfficiencyData.dayYield1}}</span> T</div>
                            <div>日总开采量</div>
                        </div>
                        <div style="color:white;">
                            <div style="color:#A6F6F9;font-size:20px;"><span style="color:#06BEFA;">{{exploitationEfficiencyData.dayMil1}}</span> KM</div>
                            <div>日总里程</div>
                        </div>
                    </div>
                    <div class="dataScrView_rightView_content_view1 guanhulvseditu">
                        <div style="color:white;">
                            <div style="color:#A6F6F9;font-size:20px;"><span style="color:#03FEFE;">{{exploitationEfficiencyData.dayWorkTime2}}</span> H</div>
                            <div>司机日总工作时长</div>
                        </div>
                        <div style="color:white;">
                            <div style="color:#A6F6F9;font-size:20px;"><span style="color:#03FEFE;">{{exploitationEfficiencyData.dayYield2}}</span> T</div>
                            <div>日总开采量</div> 
                        </div>
                        <div id='liquidEchart2' class="dataScrView_rightView_content_view1_rate2"></div>
                    </div>
                </div>
            </div>
            <!-- 实时报警 -->
            <div>
                <div class="dataScrView_rightView_title">实时报警</div>
                <div class="dataScrView_rightView_content">
                   <div class="realAlarmStyle">
                       <div v-for="(item,index) in realAlarmStyleData.listData" :key="index">
                            <img v-if="index % 4 == 0" src="../../../../assets/images/cutGraph/jingshikaobei1.png">
                            <img v-else-if="index % 3 == 0" src="../../../../assets/images/cutGraph/jingshikaobei2.png">
                            <img v-else-if="index % 2 == 0" src="../../../../assets/images/cutGraph/jingshikaobei3.png">
                            <img v-else src="../../../../assets/images/cutGraph/jingshikaobei4.png">
                            <div style="color:#A6F6F9;margin-left:10px;">
                                <div>{{item.alarmexplain ? item.alarmexplain : item.number + item.carbreak}}</div>
                                <div>{{item.createTime}}</div>
                            </div>
                       </div>
                   </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { Tools, HttpReq, Dates} from '@/assets/js/common.js';
import * as echarts from 'echarts';
import sunnyPic from '../../../../assets/images/cutGraph/sunny.png'
import cloudyPic from '../../../../assets/images/cutGraph/cloudy.png'
import overcastPic from '../../../../assets/images/cutGraph/overcast.png'
import 'echarts-liquidfill'; // 引入水球图的组件

export default {
    data() {
		return {
            //定时器
            dataScreeningTimer:null,
			whetherShow:false,
            //天气图片
            weatherPic:{
                sunnyPic:sunnyPic,
                cloudyPic:cloudyPic,
                overcastPic:overcastPic,
            },
            //时间
            currentTime:{
                day:'',
                month:'',
                year:'',
            },
            //产量数据以及中间图表数据
            outputMineData:{
                day:{finish:'0',eff:0,plan:'0',},
                month:{finish:'0',eff:0,plan:'0',},
                year:{finish:'0',eff:0,plan:'0',},
            },
            //运载数据以及中间图表数据
            carryCenterData:{
                dayAllCarry1:0,
                dayAverageCarry1:0,
                dayAllMil1:0,
                dayAllCarNum:0,
                singleAverageTime:0,
                singleAverageMil:0,
            },
            //装载数据据以及中间图表数据
            loadCenterData:{
                dayAllLoad1:0,
                dayAverageLoad1:0,
                dayAllTime:0,
                dayLoadCarNum:0,
            },
            //司机信息
            driverData:{
                totalNumber:0,
                workersNumber:0,
                restNumber:0,
                driverTableData:[],
            },
            //卡车排行榜
            truckRankListData:{
                echartsX:'Km',
                carclass:'卡车',
                selectTimeText:'day',
                selectFieldText:'juli',
                driverName:[],
                driverSeriesData:[],
            },
            //铲车排行榜
            forkLiftRankListData:{
                carclass:'铲车',
                selectTimeText:'day',
                selectFieldText:'time',
                listData:[],
            },
            //中间模块选择
            centerViewData:{
                moduleText:'centerModule1',
                xAxisData:['7:00', '8:00', '9:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '19:00'],
                seriesData:[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
            },
            //天气数据
            weatherData:{
                forecastData:[],
                today:{
                    high:'高温 20℃',
                    low:'高温 20℃',
                    type:'多云',
                    fengli:'<![CDATA[3级]]>',
                },
            },
            //车辆工时
            carWorkTimeData:{
                selectTimeText:'day',
                listData:[],
                selectTimeDate:'',
            },
            //矿石开采效率
            exploitationEfficiencyData:{
                rate1:[0.5],
                dayYield1:50,
                dayMil1:30,
                rate2:[0.5],
                dayWorkTime2:8,
                dayYield2:50,
            },
            //实时报警
            realAlarmStyleData:{
                listData:[],
            }
		}
	},
	methods: {
		loadData(text){
            if(text == true){
                this.whetherShow = true;
                this.dayCurrentTimeFn();
                this.monthCurrentTimeFn();
                this.yearCurrentTimeFn();

                this.$nextTick(()=>{
                    //获取采区当前日产量
                    HttpReq.truckDispatching.apiPlanDayQuery().then((res) => {
                        let undueArray = {};
                        if(res.length == 0 || JSON.stringify(res[0]) == '{}'){
                            undueArray.eff = 0;
                            undueArray.finish = 0;
                            undueArray.plan = 0;
                        }else{
                            if(res[0].eff == ''){
                                undueArray.eff = 0;
                                undueArray.finish = res[0].finish;
                                undueArray.plan = res[0].plan;
                            }else if(res[0].eff >= 1){
                                undueArray.eff = 100;
                                undueArray.finish = res[0].finish;
                                undueArray.plan = res[0].plan;
                            }else{
                                undueArray.eff = parseFloat(res[0].eff) * 100;
                                undueArray.finish = res[0].finish;
                                undueArray.plan = res[0].plan;
                            }
                        }
                        this.outputMineData.day = undueArray; 
                    })
                    //获取采区当前月产量
                    HttpReq.truckDispatching.apiPlanMonthQuery().then((res) => {
                        let undueArray = {};
                        if(res.length == 0 || JSON.stringify(res[0]) == '{}'){
                            undueArray.eff = 0;
                            undueArray.finish = 0;
                            undueArray.plan = 0;
                        }else{
                            if(res[0].eff == ''){
                                undueArray.eff = 0;
                                undueArray.finish = res[0].finish;
                                undueArray.plan = res[0].plan;
                            }else if(res[0].eff >= 1){
                                undueArray.eff = 100;
                                undueArray.finish = res[0].finish;
                                undueArray.plan = res[0].plan;
                            }else{
                                undueArray.eff = parseFloat(res[0].eff) * 100;
                                undueArray.finish = res[0].finish;
                                undueArray.plan = res[0].plan;
                            }
                        }
                        this.outputMineData.month = undueArray;
                    })
                    //获取采区当前年产量
                    HttpReq.truckDispatching.apiPlanYearQuery().then((res) => {
                        let undueArray = {};
                        if(res.length == 0 || JSON.stringify(res[0]) == '{}'){
                            undueArray.eff = 0;
                            undueArray.finish = 0;
                            undueArray.plan = 0;
                        }else{
                            if(res[0].eff == ''){
                                undueArray.eff = 0;
                                undueArray.finish = res[0].finish;
                                undueArray.plan = res[0].plan;
                            }else if(res[0].eff >= 1){
                                undueArray.eff = 100;
                                undueArray.finish = res[0].finish;
                                undueArray.plan = res[0].plan;
                            }else{
                                undueArray.eff = parseFloat(res[0].eff) * 100;
                                undueArray.finish = res[0].finish;
                                undueArray.plan = res[0].plan;
                            }
                        }
                        this.outputMineData.year = undueArray;
                    })
                    //获取司机信息
                    HttpReq.truckDispatching.screenDriverInformationQuery({size:9999}).then((res) => {
                        if(res.code == 200){
                            //司机信息处理
                            let workerTemporary = [];
                            let restTemporary = [];
                            res.data.content.forEach((item) => {
                                if(item.status == 1){
                                    workerTemporary.push(item);
                                }else{
                                    restTemporary.push(item);
                                }
                            });
                            this.driverData.totalNumber = res.data.totalElements;
                            this.driverData.driverTableData = workerTemporary;
                            this.driverData.workersNumber = workerTemporary.length;
                            this.driverData.restNumber = restTemporary.length;
                        }
                    })
                    //获取卡车排行榜
                    let truckQuery1 = {};
                    truckQuery1.size = 5;
                    truckQuery1.sort = this.truckRankListData.selectFieldText + ',desc';
                    truckQuery1.carclass = this.truckRankListData.carclass;
                    this.$nextTick(()=>{
                        if(this.truckRankListData.selectTimeText == 'day'){
                            HttpReq.truckDispatching.kaChanRankListDayQuery(truckQuery1).then((res) => {
                                let arr1 = [];
                                let arr2 = [];
                                res.forEach((item,index)=>{
                                    arr1.push(item.driver);
                                    arr2.push(item[this.truckRankListData.selectFieldText]);
                                })
                                this.truckRankListData.driverName = arr1.reverse();
                                this.truckRankListData.driverSeriesData = arr2.reverse();
                                this.truckChangeEcharts();
                            })
                        }else if(this.truckRankListData.selectTimeText == 'week'){
                            HttpReq.truckDispatching.kaChanRankListZhouQuery(truckQuery1).then((res) => {
                                let arr1 = [];
                                let arr2 = [];
                                res.forEach((item,index)=>{
                                    arr1.push(item.driver);
                                    arr2.push(item[this.truckRankListData.selectFieldText]);
                                })
                                this.truckRankListData.driverName = arr1.reverse();
                                this.truckRankListData.driverSeriesData = arr2.reverse();
                                this.truckChangeEcharts();
                            })
                        }else if(this.truckRankListData.selectTimeText == 'month'){
                            HttpReq.truckDispatching.kaChanRankListMouQuery(truckQuery1).then((res) => {
                                let arr1 = [];
                                let arr2 = [];
                                res.forEach((item,index)=>{
                                    arr1.push(item.driver);
                                    arr2.push(item[this.truckRankListData.selectFieldText]);
                                })
                                this.truckRankListData.driverName = arr1.reverse();
                                this.truckRankListData.driverSeriesData = arr2.reverse();
                                this.truckChangeEcharts();
                            })
                        }
                    })
                    //获取铲车排行榜
                    let forkLiftQuery1 = {};
                    forkLiftQuery1.size = 5;
                    forkLiftQuery1.sort = this.forkLiftRankListData.selectFieldText + ',desc';
                    forkLiftQuery1.carclass = this.forkLiftRankListData.carclass;
                    this.$nextTick(()=>{
                        if(this.forkLiftRankListData.selectTimeText == 'day'){
                            HttpReq.truckDispatching.kaChanRankListDayQuery(forkLiftQuery1).then((res) => {
                                this.forkLiftRankListData.listData = res;
                            })
                        }else if(this.forkLiftRankListData.selectTimeText == 'week'){
                            HttpReq.truckDispatching.kaChanRankListZhouQuery(forkLiftQuery1).then((res) => {
                                this.forkLiftRankListData.listData = res;
                            })
                        }else if(this.forkLiftRankListData.selectTimeText == 'month'){
                            HttpReq.truckDispatching.kaChanRankListMouQuery(forkLiftQuery1).then((res) => {
                                this.forkLiftRankListData.listData = res;
                            })
                        }
                    })
                    //中间echarts图表
                    HttpReq.truckDispatching.apiPlanTime1Query().then((res) => {
                        let arr3 = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0];
                        res.forEach((item,index)=>{
                            arr3.splice(parseInt(item.hour) - 7,1, parseFloat(item.finish));
                        })
                        this.centerViewData.seriesData = arr3;
                        this.centerEcharts();
                    })
                    //中间echarts运载数据
                    HttpReq.truckDispatching.apiPlanZDay1Query().then((res) => {
                        if(res.length != 0){
                            this.carryCenterData.dayAllCarry1 = res[0].finish;
                            this.carryCenterData.dayAverageCarry1 = parseFloat(res[0].pfin).toFixed(2);
                            this.carryCenterData.dayAllMil1 = 0;
                            this.carryCenterData.dayAllCarNum = res[0].num;
                            this.carryCenterData.singleAverageTime = parseFloat(res[0].time).toFixed(2);
                            this.carryCenterData.singleAverageMil = 0;
                        }
                    })
                    //中间echarts装载数据
                    HttpReq.truckDispatching.apiPlanZMonth1Query().then((res) => {
                        if(res.length != 0){
                            this.loadCenterData.dayAllLoad1 = res[0].finish;
                            this.loadCenterData.dayAverageLoad1 = parseFloat(res[0].pfin).toFixed(2);
                            this.loadCenterData.dayAllTime = res[0].time;
                            this.loadCenterData.dayLoadCarNum = res[0].num;
                        }
                    })
                    //获取天气
                    HttpReq.truckDispatching.getWeatherInforQuery({cityName:'济南'}).then((res) => {
                        if(res.code == 200){
                            let data1 = JSON.parse(res.msg).data.forecast;
                            this.weatherData.forecastData = data1;
                            this.weatherData.today = data1[0];
                        }
                    })
                    //车辆工时
                    HttpReq.truckDispatching.carWorkInforQuery({riqi:this.currentTime.day}).then((res) => {
                        if(res.code == 200){
                            if(res.data.totalElements == 0){
                                this.carWorkTimeData.listData = [
                                    {cartype:'卡车',gongshi:0,xianzhi:0},
                                    {cartype:'铲车',gongshi:0,xianzhi:0},
                                    {cartype:'其他车辆',gongshi:0,xianzhi:0},
                                ];
                            }else{
                                this.carWorkTimeData.listData = res.data.content;
                            }
                        }
                    })
                    //矿石开采效率
                    this.initLiquidEchart1();
                    this.initLiquidEchart2();
                    //实时报警
                    HttpReq.truckDispatching.callPoliceQuery({status:1,size:9999}).then((res) => {
                        if(res.code == 200){
                            HttpReq.truckDispatching.carFaultQuery({status:1,size:9999,sort:'createTime,desc'}).then((res1) => {
                                if(res1.code == 200){
                                    this.realAlarmStyleData.listData = res.data.content.concat(res1.data.content);
                                }
                            })
                        }
                    })

                    //定时刷新数据
                    this.dataScreeningTimer = setInterval(() => {
                        //获取采区当前日产量
                        HttpReq.truckDispatching.apiPlanDayQuery().then((res) => {
                            let undueArray = {};
                            if(res.length == 0 || JSON.stringify(res[0]) == '{}'){
                                undueArray.eff = 0;
                                undueArray.finish = 0;
                                undueArray.plan = 0;
                            }else{
                                if(res[0].eff == ''){
                                    undueArray.eff = 0;
                                    undueArray.finish = res[0].finish;
                                    undueArray.plan = res[0].plan;
                                }else if(res[0].eff >= 1){
                                    undueArray.eff = 100;
                                    undueArray.finish = res[0].finish;
                                    undueArray.plan = res[0].plan;
                                }else{
                                    undueArray.eff = parseFloat(res[0].eff) * 100;
                                    undueArray.finish = res[0].finish;
                                    undueArray.plan = res[0].plan;
                                }
                            }
                            this.outputMineData.day = undueArray; 
                        })
                        //获取采区当前月产量
                        HttpReq.truckDispatching.apiPlanMonthQuery().then((res) => {
                            let undueArray = {};
                            if(res.length == 0 || JSON.stringify(res[0]) == '{}'){
                                undueArray.eff = 0;
                                undueArray.finish = 0;
                                undueArray.plan = 0;
                            }else{
                                if(res[0].eff == ''){
                                    undueArray.eff = 0;
                                    undueArray.finish = res[0].finish;
                                    undueArray.plan = res[0].plan;
                                }else if(res[0].eff >= 1){
                                    undueArray.eff = 100;
                                    undueArray.finish = res[0].finish;
                                    undueArray.plan = res[0].plan;
                                }else{
                                    undueArray.eff = parseFloat(res[0].eff) * 100;
                                    undueArray.finish = res[0].finish;
                                    undueArray.plan = res[0].plan;
                                }
                            }
                            this.outputMineData.month = undueArray;
                        })
                        //获取采区当前年产量
                        HttpReq.truckDispatching.apiPlanYearQuery().then((res) => {
                            let undueArray = {};
                            if(res.length == 0 || JSON.stringify(res[0]) == '{}'){
                                undueArray.eff = 0;
                                undueArray.finish = 0;
                                undueArray.plan = 0;
                            }else{
                                if(res[0].eff == ''){
                                    undueArray.eff = 0;
                                    undueArray.finish = res[0].finish;
                                    undueArray.plan = res[0].plan;
                                }else if(res[0].eff >= 1){
                                    undueArray.eff = 100;
                                    undueArray.finish = res[0].finish;
                                    undueArray.plan = res[0].plan;
                                }else{
                                    undueArray.eff = parseFloat(res[0].eff) * 100;
                                    undueArray.finish = res[0].finish;
                                    undueArray.plan = res[0].plan;
                                }
                            }
                            this.outputMineData.year = undueArray;
                        })
                        //获取司机信息
                        HttpReq.truckDispatching.screenDriverInformationQuery({size:9999}).then((res) => {
                            if(res.code == 200){
                                //司机信息处理
                                let workerTemporary = [];
                                let restTemporary = [];
                                res.data.content.forEach((item) => {
                                    if(item.status == 1){
                                        workerTemporary.push(item);
                                    }else{
                                        restTemporary.push(item);
                                    }
                                });
                                this.driverData.totalNumber = res.data.totalElements;
                                this.driverData.driverTableData = workerTemporary;
                                this.driverData.workersNumber = workerTemporary.length;
                                this.driverData.restNumber = restTemporary.length;
                            }
                        })
                        //获取卡车排行榜
                        let truckQuery1 = {};
                        truckQuery1.size = 5;
                        truckQuery1.sort = this.truckRankListData.selectFieldText + ',desc';
                        truckQuery1.carclass = this.truckRankListData.carclass;
                        this.$nextTick(()=>{
                            if(this.truckRankListData.selectTimeText == 'day'){
                                HttpReq.truckDispatching.kaChanRankListDayQuery(truckQuery1).then((res) => {
                                    let arr1 = [];
                                    let arr2 = [];
                                    res.forEach((item,index)=>{
                                        arr1.push(item.driver);
                                        arr2.push(item[this.truckRankListData.selectFieldText]);
                                    })
                                    this.truckRankListData.driverName = arr1.reverse();
                                    this.truckRankListData.driverSeriesData = arr2.reverse();
                                    this.truckChangeEcharts();
                                })
                            }else if(this.truckRankListData.selectTimeText == 'week'){
                                HttpReq.truckDispatching.kaChanRankListZhouQuery(truckQuery1).then((res) => {
                                    let arr1 = [];
                                    let arr2 = [];
                                    res.forEach((item,index)=>{
                                        arr1.push(item.driver);
                                        arr2.push(item[this.truckRankListData.selectFieldText]);
                                    })
                                    this.truckRankListData.driverName = arr1.reverse();
                                    this.truckRankListData.driverSeriesData = arr2.reverse();
                                    this.truckChangeEcharts();
                                })
                            }else if(this.truckRankListData.selectTimeText == 'month'){
                                HttpReq.truckDispatching.kaChanRankListMouQuery(truckQuery1).then((res) => {
                                    let arr1 = [];
                                    let arr2 = [];
                                    res.forEach((item,index)=>{
                                        arr1.push(item.driver);
                                        arr2.push(item[this.truckRankListData.selectFieldText]);
                                    })
                                    this.truckRankListData.driverName = arr1.reverse();
                                    this.truckRankListData.driverSeriesData = arr2.reverse();
                                    this.truckChangeEcharts();
                                })
                            }
                        })
                        //获取铲车排行榜
                        let forkLiftQuery1 = {};
                        forkLiftQuery1.size = 5;
                        forkLiftQuery1.sort = this.forkLiftRankListData.selectFieldText + ',desc';
                        forkLiftQuery1.carclass = this.forkLiftRankListData.carclass;
                        this.$nextTick(()=>{
                            if(this.forkLiftRankListData.selectTimeText == 'day'){
                                HttpReq.truckDispatching.kaChanRankListDayQuery(forkLiftQuery1).then((res) => {
                                    this.forkLiftRankListData.listData = res;
                                })
                            }else if(this.forkLiftRankListData.selectTimeText == 'week'){
                                HttpReq.truckDispatching.kaChanRankListZhouQuery(forkLiftQuery1).then((res) => {
                                    this.forkLiftRankListData.listData = res;
                                })
                            }else if(this.forkLiftRankListData.selectTimeText == 'month'){
                                HttpReq.truckDispatching.kaChanRankListMouQuery(forkLiftQuery1).then((res) => {
                                    this.forkLiftRankListData.listData = res;
                                })
                            }
                        })
                        //中间echarts图表
                        HttpReq.truckDispatching.apiPlanTime1Query().then((res) => {
                            let arr3 = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0];
                            res.forEach((item,index)=>{
                                arr3.splice(parseInt(item.hour) - 7,1, parseFloat(item.finish));
                            })
                            this.centerViewData.seriesData = arr3;
                            this.centerEcharts();
                        })
                        //中间echarts运载数据
                        HttpReq.truckDispatching.apiPlanZDay1Query().then((res) => {
                            if(res.length != 0){
                                this.carryCenterData.dayAllCarry1 = res[0].finish;
                                this.carryCenterData.dayAverageCarry1 = parseFloat(res[0].pfin).toFixed(2);
                                this.carryCenterData.dayAllMil1 = 0;
                                this.carryCenterData.dayAllCarNum = res[0].num;
                                this.carryCenterData.singleAverageTime = parseFloat(res[0].time).toFixed(2);
                                this.carryCenterData.singleAverageMil = 0;
                            }
                        })
                        //中间echarts装载数据
                        HttpReq.truckDispatching.apiPlanZMonth1Query().then((res) => {
                            if(res.length != 0){
                                this.loadCenterData.dayAllLoad1 = res[0].finish;
                                this.loadCenterData.dayAverageLoad1 = parseFloat(res[0].pfin).toFixed(2);
                                this.loadCenterData.dayAllTime = res[0].time;
                                this.loadCenterData.dayLoadCarNum = res[0].num;
                            }
                        })
                        //获取天气
                        HttpReq.truckDispatching.getWeatherInforQuery({cityName:'济南'}).then((res) => {
                            if(res.code == 200){
                                let data1 = JSON.parse(res.msg).data.forecast;
                                this.weatherData.forecastData = data1;
                                this.weatherData.today = data1[0];
                            }
                        })
                        //车辆工时
                        HttpReq.truckDispatching.carWorkInforQuery({riqi:this.currentTime.day}).then((res) => {
                            if(res.code == 200){
                                if(res.data.totalElements == 0){
                                    this.carWorkTimeData.listData = [
                                        {cartype:'卡车',gongshi:0,xianzhi:0},
                                        {cartype:'铲车',gongshi:0,xianzhi:0},
                                        {cartype:'其他车辆',gongshi:0,xianzhi:0},
                                    ];
                                }else{
                                    this.carWorkTimeData.listData = res.data.content;
                                }
                            }
                        })
                        //矿石开采效率
                        this.initLiquidEchart1();
                        this.initLiquidEchart2();
                        //实时报警
                        HttpReq.truckDispatching.callPoliceQuery({status:1,size:9999}).then((res) => {
                            if(res.code == 200){
                                HttpReq.truckDispatching.carFaultQuery({status:1,size:9999,sort:'createTime,desc'}).then((res1) => {
                                    if(res1.code == 200){
                                        this.realAlarmStyleData.listData = res.data.content.concat(res1.data.content);
                                    }
                                })
                            }
                        })

                    }, 10000)
                    
                })
            }else{
                if(this.dataScreeningTimer) {
                    clearInterval(this.dataScreeningTimer);
                }
                this.whetherShow = false;
            }
            
        },
        //卡车切换时间
        truckChangeTime(text){
            this.truckRankListData.selectTimeText = text;
            let truckQuery1 = {};
            truckQuery1.size = 5;
            truckQuery1.sort = this.truckRankListData.selectFieldText + ',desc';
            truckQuery1.carclass = this.truckRankListData.carclass;
            if(text == 'day'){
                HttpReq.truckDispatching.kaChanRankListDayQuery(truckQuery1).then((res) => {
                    let arr1 = [];
                    let arr2 = [];
                    res.forEach((item,index)=>{
                        arr1.push(item.driver);
                        arr2.push(item[this.truckRankListData.selectFieldText]);
                    })
                    this.truckRankListData.driverName = arr1.reverse();
                    this.truckRankListData.driverSeriesData = arr2.reverse();
                    this.truckChangeEcharts();
                })
            }else if(text == 'week'){
                HttpReq.truckDispatching.kaChanRankListZhouQuery(truckQuery1).then((res) => {
                    let arr1 = [];
                    let arr2 = [];
                    res.forEach((item,index)=>{
                        arr1.push(item.driver);
                        arr2.push(item[this.truckRankListData.selectFieldText]);
                    })
                    this.truckRankListData.driverName = arr1.reverse();
                    this.truckRankListData.driverSeriesData = arr2.reverse();
                    this.truckChangeEcharts();
                })
            }else if(text == 'month'){
                HttpReq.truckDispatching.kaChanRankListMouQuery(truckQuery1).then((res) => {
                    let arr1 = [];
                    let arr2 = [];
                    res.forEach((item,index)=>{
                        arr1.push(item.driver);
                        arr2.push(item[this.truckRankListData.selectFieldText]);
                    })
                    this.truckRankListData.driverName = arr1.reverse();
                    this.truckRankListData.driverSeriesData = arr2.reverse();
                    this.truckChangeEcharts();
                })
            }
        },
        //卡车切换字段排序
        truckChangeField(text){
            this.truckRankListData.selectFieldText = text;
            let truckQuery1 = {};
            truckQuery1.size = 5;
            truckQuery1.sort = this.truckRankListData.selectFieldText + ',desc';
            truckQuery1.carclass = this.truckRankListData.carclass;
            if(text == 'juli'){
                this.truckRankListData.echartsX = 'km';
            }else if(text == 'time'){
                this.truckRankListData.echartsX = 'H';
            }else if(text == 'yunzai'){
                this.truckRankListData.echartsX = '吨';
            }else if(text == 'jiedan'){
                this.truckRankListData.echartsX = '次';
            }
            this.$nextTick(()=>{
                if(this.truckRankListData.selectTimeText == 'day'){
                    HttpReq.truckDispatching.kaChanRankListDayQuery(truckQuery1).then((res) => {
                        let arr1 = [];
                        let arr2 = [];
                        res.forEach((item,index)=>{
                            arr1.push(item.driver);
                            arr2.push(item[this.truckRankListData.selectFieldText]);
                        })
                        this.truckRankListData.driverName = arr1.reverse();
                        this.truckRankListData.driverSeriesData = arr2.reverse();
                        this.truckChangeEcharts();
                    })
                }else if(this.truckRankListData.selectTimeText == 'week'){
                    HttpReq.truckDispatching.kaChanRankListZhouQuery(truckQuery1).then((res) => {
                        let arr1 = [];
                        let arr2 = [];
                        res.forEach((item,index)=>{
                            arr1.push(item.driver);
                            arr2.push(item[this.truckRankListData.selectFieldText]);
                        })
                        this.truckRankListData.driverName = arr1.reverse();
                        this.truckRankListData.driverSeriesData = arr2.reverse();
                        this.truckChangeEcharts();
                    })
                }else if(this.truckRankListData.selectTimeText == 'month'){
                    HttpReq.truckDispatching.kaChanRankListMouQuery(truckQuery1).then((res) => {
                        let arr1 = [];
                        let arr2 = [];
                        res.forEach((item,index)=>{
                            arr1.push(item.driver);
                            arr2.push(item[this.truckRankListData.selectFieldText]);
                        })
                        this.truckRankListData.driverName = arr1.reverse();
                        this.truckRankListData.driverSeriesData = arr2.reverse();
                        this.truckChangeEcharts();
                    })
                }
            })
        },
        //卡车排行榜Echarts
        truckChangeEcharts(){
            echarts.init(document.getElementById('dataScrView_leftView_content_views3_1')).dispose();
            var myChart = echarts.init(document.getElementById('dataScrView_leftView_content_views3_1'));
            var option = {
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                grid: {
                    top:'22%',
                    left: '1%',
                    bottom: '-2%',
                    containLabel: true
                },
                xAxis: {
                    name:this.truckRankListData.echartsX,
                    type: 'value',
                    boundaryGap: [0, 0.01],
                    axisLabel: {
                        show: true,
                        textStyle: {
                            color: '#BFF7FF'
                        }
                    },
                    axisLine: {
                        lineStyle: {
                            color: '#BFF7FF',
                            width: 1
                        }
                    }
                },
                yAxis: {
                    name:'司机姓名',
                    type: 'category',
                    data: this.truckRankListData.driverName,
                    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.truckRankListData.driverSeriesData,
                    }
                ]
            };

            option && myChart.setOption(option);
        },
        //铲车切换时间
        forkLiftChangeTime(text){
            this.forkLiftRankListData.selectTimeText = text;
            let forkLiftQuery1 = {};
            forkLiftQuery1.size = 5;
            forkLiftQuery1.sort = this.forkLiftRankListData.selectFieldText + ',desc';
            forkLiftQuery1.carclass = this.forkLiftRankListData.carclass;
            if(text == 'day'){
                HttpReq.truckDispatching.kaChanRankListDayQuery(forkLiftQuery1).then((res) => {
                    this.forkLiftRankListData.listData = res;
                })
            }
            if(text == 'week'){
                HttpReq.truckDispatching.kaChanRankListZhouQuery(forkLiftQuery1).then((res) => {
                    this.forkLiftRankListData.listData = res;
                })
            }
            if(text == 'month'){
                HttpReq.truckDispatching.kaChanRankListMouQuery(forkLiftQuery1).then((res) => {
                    this.forkLiftRankListData.listData = res;
                })
            }
        },
        //铲车切换字段排序
        forkLiftChangeField(text){
            this.forkLiftRankListData.selectFieldText = text;
            let forkLiftQuery1 = {};
            forkLiftQuery1.size = 5;
            forkLiftQuery1.sort = this.forkLiftRankListData.selectFieldText + ',desc';
            forkLiftQuery1.carclass = this.forkLiftRankListData.carclass;
            this.$nextTick(()=>{
               if(this.forkLiftRankListData.selectTimeText == 'day'){
                    HttpReq.truckDispatching.kaChanRankListDayQuery(forkLiftQuery1).then((res) => {
                        this.forkLiftRankListData.listData = res;
                    })
                }else if(this.forkLiftRankListData.selectTimeText == 'week'){
                    HttpReq.truckDispatching.kaChanRankListZhouQuery(forkLiftQuery1).then((res) => {
                        this.forkLiftRankListData.listData = res;
                    })
                }else if(this.forkLiftRankListData.selectTimeText == 'month'){
                    HttpReq.truckDispatching.kaChanRankListMouQuery(forkLiftQuery1).then((res) => {
                        this.forkLiftRankListData.listData = res;
                    })
                }
            })
        },
        //中间模块选择
        centerSelectFn(text){
            this.centerViewData.moduleText = text;
        },
        //中间模块Echarts
        centerEcharts(){
            echarts.init(document.getElementById('centerEchartsView')).dispose();
            var myChart = echarts.init(document.getElementById('centerEchartsView'));
            var option = {
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                grid: {
                    top: '35%',
                    left: '1%',
                    right: '1%',
                    bottom: '2%',
                    containLabel: true
                },
                xAxis: [
                    {
                        type: 'category',
                        data: this.centerViewData.xAxisData,
                        axisTick: {
                            alignWithLabel: true
                        },
                        axisPointer: {
                            type: 'shadow'
                        },
                        axisLabel: {
                            show: true,
                            textStyle: {
                                color: 'white'
                            }
                        },
                        axisLine: {
                            lineStyle: {
                                color: 'white',
                                width: 1
                            }
                        }
                    }
                ],
                yAxis: [
                    {
                        type: 'value',
                        axisLabel: {
					        show: true,
					        textStyle: {
						        color: 'white'
					        }
					    },
                        splitLine: {
						    lineStyle: {
						        // 使用深浅的间隔色
						        color: ['rgba(255,255,255,0.3)']
						    }
						},
					    axisLine: {
					        lineStyle: {
						        color: 'white',
						        width: 0
					        }
					    }
                    } 
                ],
                series: [
                    {
                        name: '重量(吨)',
                        type: 'bar',
                        barWidth: 20,
                        data: this.centerViewData.seriesData,
                        itemStyle: {
							color: '#01CBF6'
						},
                    }
                ]
            };
            option && myChart.setOption(option);
        },
        //车辆工时切换时间
        carWorkTimeChangeTime(text){
            this.carWorkTimeData.selectTimeText = text;
            if(text == 'day'){
                this.carWorkTimeData.selectTimeDate = this.currentTime.day;
            }
            if(text == 'month'){
                this.carWorkTimeData.selectTimeDate = this.currentTime.month;
            }
            if(text == 'year'){
                this.carWorkTimeData.selectTimeDate = this.currentTime.year;
            }
            HttpReq.truckDispatching.carWorkInforQuery({riqi:this.carWorkTimeData.selectTimeDate}).then((res) => {
                if(res.code == 200){
                    if(res.data.totalElements == 0){
                        this.carWorkTimeData.listData = [
                            {cartype:'卡车',gongshi:0,xianzhi:0},
                            {cartype:'铲车',gongshi:0,xianzhi:0},
                            {cartype:'其他车辆',gongshi:0,xianzhi:0},
                        ];
                    }else{
                        this.carWorkTimeData.listData = res.data.content;
                    }
                }
            })
        },
        //矿石开采效率
        initLiquidEchart1(){
			echarts.init(document.getElementById('liquidEchart1')).dispose();
			setTimeout(() => {
				this.chartsLiquid = echarts.init(document.getElementById('liquidEchart1'));
				// 把配置和数据放这里
				this.chartsLiquid.setOption({
					series: [{
						type: 'liquidFill',
                        name: '比率\n' + this.exploitationEfficiencyData.rate1 * 100 + '%',
						radius: '70px',
						data: this.exploitationEfficiencyData.rate1,
						label: {
							normal: {
                                formatter: '{a}',
								color: '#05ADFB',
								insideColor: '#fff',
								textStyle: {
									fontSize: 18,
								}
							}
						},
						backgroundStyle: {
							color: '#012861',
							borderWidth: "1.5", // 内边框
							borderColor: "rgb(6, 190, 250)"
						},
						color: [{
							type: 'linear',
							x: 0,
							y: 1,
							x2: 0,
							y2: 0,
							colorStops: [{
								offset: 1,
								color: ["rgb(6, 190, 250)"], // 0% 处的颜色
							}, {
								offset: 0,
								color: ["rgb(6, 190, 250)"], // 100% 处的颜色
							}],
							global: false // 缺省为 false
						}],
						outline: {
							show: true,
							borderDistance: 0,
							itemStyle: {
								borderColor: '#012861',
								borderWidth: 5,
								shadowBlur: 5,
								shadowColor: 'rgb(6, 190, 250)'
							}, 
						}
					}]
				});
			}, 50)
		},
        initLiquidEchart2(){
			echarts.init(document.getElementById('liquidEchart2')).dispose();
			setTimeout(() => {
				this.chartsLiquid = echarts.init(document.getElementById('liquidEchart2'));
				// 把配置和数据放这里
				this.chartsLiquid.setOption({
					series: [{
						type: 'liquidFill',
                        name: '比率\n' + this.exploitationEfficiencyData.rate2 * 100 + '%',
						radius: '70px',
						data: this.exploitationEfficiencyData.rate2,
						label: {
							normal: {
                                formatter: '{a}',
								color: 'rgb(3, 254, 254)',
								insideColor: '#fff',
								textStyle: {
									fontSize: 18,
								}
							}
						},
						backgroundStyle: {
							color: '#012861',
							borderWidth: "1.5", // 内边框
							borderColor: "rgb(3, 254, 254)"
						},
						color: [{
							type: 'linear',
							x: 0,
							y: 1,
							x2: 0,
							y2: 0,
							colorStops: [{
								offset: 1,
								color: ["rgb(3, 254, 254)"], // 0% 处的颜色
							}, {
								offset: 0,
								color: ["rgb(3, 254, 254)"], // 100% 处的颜色
							}],
							global: false // 缺省为 false
						}],
						outline: {
							show: true,
							borderDistance: 0,
							itemStyle: {
								borderColor: '#012861',
								borderWidth: 5,
								shadowBlur: 5,
								shadowColor: 'rgb(3, 254, 254)'
							}, 
						}
					}]
				});
			}, 50)
		},

        //获取当前时间
		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.dataScreeningTimer) {
			clearInterval(this.dataScreeningTimer);
		}
    },
}
</script>

<style scoped>
/* 进度条样式 */
.outside-div1{
    width: 15vw;
    height: 20px;
    border: 1px solid #91A9FF;
    display: flex;
    align-items: center;
}
.inside-div1{
    margin-left: 0.13vw;
    width: 9%;
    height: 12px;
    background-color: #02EEF7;
}

.el-progress__text{
	color:white;
    font-weight: 600;
}
.dataScrView{
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: hidden;
    display: flex;
    justify-content: space-between;
}
.dataScrView_leftView{
    height: 100%;
    width: 20%;
    z-index: 3;
}
.dataScrView_centerView{
    height: 100%;
    width: 60%;
    position: relative;
}
.dataScrView_rightView{
    height: 100%;
    width: 20%;
    z-index: 3;
}
.dataScrView_leftView>div{
    width: 100%;
    height: 23.5vh;
    background-color: rgba(32,42,67,0.95);
    padding: 5px 7px;
    box-sizing: border-box;
    overflow: hidden;
}
.dataScrView_rightView>div{
    width: 100%;
    height: 23.5vh;
    background-color: rgba(32,42,67,0.95);
    padding: 5px 7px;
    box-sizing: border-box;
    overflow: hidden;
}
.dataScrView_leftView_title,.dataScrView_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;
}
.dataScrView_leftView_content,.dataScrView_rightView_content{
    width: 100%;
    height: 19vh;
}
.dataScrView_leftView_content_view1{
    margin-bottom: 7px;
    display: flex;
    align-items: center;
    font-size: 20px;
}
.dataScrView_leftView_content_view1_son1{
    width: 5.5vh;
    height: 5.5vh;
    background:no-repeat center center url('~@/assets/images/cutGraph/bilikuang.png');
	background-size:100% 100%;
    line-height: 5.5vh;
    text-align: center;
    color: white;
    font-size: 16px;
}
.driverInforViewsStyle{
    width: 100%;
    display: flex;
    justify-content: space-between;
}
.driverTotalnumberStyle{
    width: 40%;
    height: 5vh;
    background:no-repeat center center url('~@/assets/images/cutGraph/sijirenshu1.png');
	background-size:100% 100%;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    color: white;
}
.presentDrivernumberStyle{
    width: 59%;
    height: 5vh;
    background:no-repeat center center url('~@/assets/images/cutGraph/dangqianrenshu1.png');
	background-size:100% 100%;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
}
.driverInforListStyle{
    text-align: center;
}
/* .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);
}
.rolling{
	height: 13.5vh;
	overflow-y:auto;
    scrollbar-width: none;
}
.rolling::-webkit-scrollbar {
  display: none;
}
.truck_titleStyle{
    display: flex;
    justify-content: space-between;
    padding-right: 4vw;
}
.driverTitleDateStyle{
    display: flex;
    color: #06EFFE;
    font-size: 16px;
    text-shadow: 0px 0px 0px;
    height: 3.5vh;
    align-items: center;
}
.driverTitleDateStyle_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;
}
.driverTitleDateStyle_son2{
    height: 2.5vh;
    line-height: 2.5vh;
    margin-right: 5px;
    padding:0px 5px;
    box-sizing: border-box;
    border-radius: 5px;
    cursor: pointer;
}
.dataScrView_leftView_content_views2{
    display: flex;
    justify-content: space-between;
}
.dataScrView_leftView_content_views2>div{
    height: 2.5vh;
    width: 24%;
    font-size: 15px;
    border:2px solid #01A6FC;
    border-radius: 5px;
    color: #06EFFE;
    line-height: 2.2vh;
    text-align: center;
    cursor: pointer;
    font-weight: 600;
}
.selectFieldStyle{
    opacity: 0.7;
}
.dataScrView_leftView_content_views3{
    width: 100%;
    height: 16vh;
    overflow-y:auto;
    scrollbar-width: none;
}
.dataScrView_leftView_content_views3::-webkit-scrollbar {
  display: none;
}
.forkliftRank1{
    margin-top: 0.5vh;
    display: flex;
    justify-content: space-evenly;
    width: 100%;
    height: 2.5vh;
    line-height: 2.5vh;
    background:no-repeat center center url('~@/assets/images/cutGraph/list1.png');
	background-size:100% 100%;
    padding-left: 4vw;
    box-sizing: border-box;
}
.forkliftRank2{
    margin-top: 0.5vh;
    display: flex;
    justify-content: space-evenly;
    width: 100%;
    height: 2.5vh;
    line-height: 2.5vh;
    background:no-repeat center center url('~@/assets/images/cutGraph/list2.png');
	background-size:100% 100%;
    padding-left: 4vw;
    box-sizing: border-box;
}
.forkliftRank3{
    margin-top: 0.5vh;
    display: flex;
    justify-content: space-evenly;
    width: 100%;
    height: 2.5vh;
    line-height: 2.5vh;
    background:no-repeat center center url('~@/assets/images/cutGraph/list3.png');
	background-size:100% 100%;
    padding-left: 4vw;
    box-sizing: border-box;
}
.forkliftRank4{
    margin-top: 0.5vh;
    display: flex;
    justify-content: space-evenly;
    width: 100%;
    height: 2.5vh;
    line-height: 2.5vh;
    background:no-repeat center center url('~@/assets/images/cutGraph/list4.png');
	background-size:100% 100%;
    padding-left: 4vw;
    box-sizing: border-box;
}
.forkliftRank5{
    margin-top: 0.5vh;
    display: flex;
    justify-content: space-evenly;
    width: 100%;
    height: 2.5vh;
    line-height: 2.5vh;
    background:no-repeat center center url('~@/assets/images/cutGraph/list5.png');
	background-size:100% 100%;
    padding-left: 4vw;
    box-sizing: border-box;
}
.dataScrView_centerView>div{
    position: absolute;
    bottom: 0px;
    width: 100%;
    height: 23.5vh;
    background-color: rgba(32,42,67,0.95);
    padding: 5px 7px;
    box-sizing: border-box;
    overflow: hidden;
    z-index: 3;
}
.dataScrView_centerView_title{
    margin-bottom: 5px;
    width: 100%;
    height: 3.5vh;
    background:no-repeat center center url('~@/assets/images/cutGraph/changtianbiaoti2.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;
    display: flex;
}
.dataScrView_centerView_title>div{
    margin: 0px 20px;
    cursor: pointer;
}
.centerModuleSelectStyle{
    color: #1DF9FC;
    border-bottom: 3px solid #1DF9FC;
}
.dataScrView_centerView_planNum{
    width: 100%;
    height: 5vh;
    display: flex;
    justify-content: space-between;
}
.dataScrView_centerView_planNum>div{
    width: 16%;
    height: 100%;
    background-color: rgba(10,53,107,0.6);
    border-radius: 5px;
    display: flex;
    justify-content: space-around;
    align-items: center;
}
.dataScrView_centerView_planNum3{
    width: 100%;
    height: 5vh;
    display: flex;
}
.dataScrView_centerView_planNum3>div{
    width: 16%;
    height: 100%;
    background-color: rgba(10,53,107,0.6);
    border-radius: 5px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin-right: 0.5vw;
}
#centerEchartsView{
    overflow: hidden;
    top: 5vh;
    width: 100%;
    height: 18vh;
    position: absolute;
}
.todayWeather1{
    width: 100%;
    height: 4vh;
    display: flex;
    color: #03FEFE;
    align-items: center;
    padding: 0px 5px;
    box-sizing: border-box;
}
.todayWeather2{
    margin-top: 10px;
    width: 100%;
    height: 8vh;
    display: flex;
    justify-content: space-between;
    padding: 0px 5px;
    box-sizing: border-box;
    text-align: center;
}
.todayWeather3{
    margin-top: 5px;
    width: 100%;
    height: 5vh;
    display: flex;
    justify-content: space-between;
    padding: 0px 5px;
    box-sizing: border-box;
    align-items: center;
    color: #03FEFE;
}
.carWorkTimeStyle{
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-between;
}
.carWorkTimeStyle>div{
    width: 33%;
}
.carPicStyle1{
    width: 3.5vw;
    height: 3.5vw;
    margin: 0px auto;
    position: relative;
}
.carPicStyle1>img{
    height: 3.5vw;
    width: 3.5vw;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}
.carPicStyle2{
    width: 5vw;
    height: 10vh;
    margin: 10px auto;
    background:no-repeat center center url('~@/assets/images/cutGraph/zu2388.png');
	background-size:100% 100%;
    text-align: center;
    color: #03FEFE;
    overflow: hidden;
}
.dataScrView_rightView_content_view1{
    position: relative;
    margin-top: 1vh;
    display: flex;
    align-items: center;
    font-weight: 600;
    justify-content: space-evenly;
}
.dataScrView_rightView_content_view1_rate1{
    height: 80px;
    width: 80px;
}
.dataScrView_rightView_content_view1_rate2{
    height: 80px;
    width: 80px;
}
.guanhulanseditu{
    background:no-repeat center center url('~@/assets/images/cutGraph/juxinglanse.png');
	background-size:100% 85%;
    margin-right: 5%;
}
.guanhulvseditu{
    background:no-repeat center center url('~@/assets/images/cutGraph/juxinglvse.png');
	background-size:100% 90%;
    margin-left: 5%;
}
.realAlarmStyle{
    width: 100%;
    height: 19vh;
    overflow-y:auto;
    scrollbar-width: none;
}
.realAlarmStyle::-webkit-scrollbar {
    display: none;
}
.realAlarmStyle>div{
    width: 100%;
    height: 5vh;
    border-bottom: 1px solid #03FEFE;
    display: flex;
    align-items: center;
}
</style>