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

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


export default {
    data(){
        return {
            DPcomputer4BoxTimer:null,
            //铲车排行榜
            forkLiftRankListData:{
                carclass:'铲车',
                selectTimeText:'day',
                selectFieldText:'time',
                listData:[],
            },
        }
    },
    mounted(){
        this.loadData();
    },
    methods:{
        loadData(){
            //获取铲车排行榜
            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;
                    })
                }
            })

            this.DPcomputer4BoxTimer = setInterval(() => {
                //获取铲车排行榜
                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;
                        })
                    }
                })
            },10000)
        },
        //铲车切换时间
        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;
                    })
                }
            })
        },

    },
    beforeDestroy(){
        if(this.DPcomputer4BoxTimer) {
			clearInterval(this.DPcomputer4BoxTimer);
            this.DPcomputer4BoxTimer = null;
		}
    }
}
</script>

<style scoped>
*{
  margin: 0;
  padding: 0;
}
.DPcomputer4Box{
    width: 20vw;
    height: 23.5vh;
    background-color: rgba(32,42,67,0.95);
    padding: 5px 7px;
    box-sizing: border-box;
    overflow: hidden;
}
.DPcomputer4Box .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;
}
.DPcomputer4Box .truck_titleStyle{
    display: flex;
    justify-content: space-between;
    padding-right: 4vw;
}
.DPcomputer4Box .driverTitleDateStyle{
    display: flex;
    color: #06EFFE;
    font-size: 16px;
    text-shadow: 0px 0px 0px;
    height: 3.5vh;
    align-items: center;
}
.DPcomputer4Box .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;
}
.DPcomputer4Box .driverTitleDateStyle_son2{
    height: 2.5vh;
    line-height: 2.5vh;
    margin-right: 5px;
    padding:0px 5px;
    box-sizing: border-box;
    border-radius: 5px;
    cursor: pointer;
}
.DPcomputer4Box .dataScrView_leftView_content{
    width: 100%;
    height: 19vh;
}
.DPcomputer4Box .dataScrView_leftView_content_views2{
    display: flex;
    justify-content: space-between;
}
.DPcomputer4Box .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;
}
.DPcomputer4Box .selectFieldStyle{
    opacity: 0.7;
}
.DPcomputer4Box .dataScrView_leftView_content_views3{
    width: 100%;
    height: 16vh;
    overflow-y:auto;
    scrollbar-width: none;
}
.DPcomputer4Box .dataScrView_leftView_content_views3::-webkit-scrollbar {
  display: none;
}
.DPcomputer4Box .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;
}
.DPcomputer4Box .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;
}
.DPcomputer4Box .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;
}
.DPcomputer4Box .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;
}
.DPcomputer4Box .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;
}
</style>