<template>
    <div class="DPcomputer3Box">
        <!-- 卡车司机排行榜-->
        <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>
</template>

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


export default {
    data(){
        return {
            DPcomputer3BoxTimer:null,
            //卡车排行榜
            truckRankListData:{
                echartsX:'Km',
                carclass:'卡车',
                selectTimeText:'day',
                selectFieldText:'juli',
                driverName:[],
                driverSeriesData:[],
            },
        }
    },
    mounted(){
        this.loadData();
    },
    methods:{
        loadData(){
            //获取卡车排行榜
            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();
                    })
                }
            })

            this.DPcomputer3BoxTimer = setInterval(() => {
                //获取卡车排行榜
                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();
                        })
                    }
                })

            },10000)
            
        },
        //卡车切换时间
        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);
        },
    },
    beforeDestroy(){
        if(this.DPcomputer3BoxTimer) {
			clearInterval(this.DPcomputer3BoxTimer);
            this.DPcomputer3BoxTimer = null;
		}
    }
}
</script>

<style scoped>
*{
  margin: 0;
  padding: 0;
}
.DPcomputer3Box{
    width: 20vw;
    height: 23.5vh;
    background-color: rgba(32,42,67,0.95);
    padding: 5px 7px;
    box-sizing: border-box;
    overflow: hidden;
}
.DPcomputer3Box .dataScrView_leftView_title{
    margin-bottom: 5px;
    width: 100%;
    height: 3.5vh;
    background:no-repeat center center url('~@/assets/images/cutGraph/biaoti1.png');
	background-size:100% 100%;
    padding-left: 10px;
    box-sizing: border-box;
    font-size: 18px;
    line-height: 3.5vh;
    color: #FAFAFB;
    letter-spacing: 1px;
    text-shadow: 1px 1px 1px #92CBFF;
}
.DPcomputer3Box .truck_titleStyle{
    display: flex;
    justify-content: space-between;
    padding-right: 4vw;
}
.DPcomputer3Box .driverTitleDateStyle{
    display: flex;
    color: #06EFFE;
    font-size: 16px;
    text-shadow: 0px 0px 0px;
    height: 3.5vh;
    align-items: center;
}
.DPcomputer3Box .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;
}
.DPcomputer3Box .driverTitleDateStyle_son2{
    height: 2.5vh;
    line-height: 2.5vh;
    margin-right: 5px;
    padding:0px 5px;
    box-sizing: border-box;
    border-radius: 5px;
    cursor: pointer;
}
.DPcomputer3Box .dataScrView_leftView_content{
    width: 100%;
    height: 19vh;
}
.DPcomputer3Box .dataScrView_leftView_content_views2{
    display: flex;
    justify-content: space-between;
}
.DPcomputer3Box .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;
}
.DPcomputer3Box .selectFieldStyle{
    opacity: 0.7;
}
.DPcomputer3Box .dataScrView_leftView_content_views3{
    width: 100%;
    height: 16vh;
    overflow-y:auto;
    scrollbar-width: none;
}
.DPcomputer3Box .dataScrView_leftView_content_views3::-webkit-scrollbar {
  display: none;
}
</style>