<template>
  <div class="DPcomputer12Box">
    <!-- 铲车排行榜-->
    <div class="carManScrView_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="carManScrView_leftView_content">
      <div class="carManScrView_leftView_content_views2">
        <div :class="forkLiftRankListData.selectFieldText == 'workTime' ? '' : 'selectFieldStyle' "
             @click="forkLiftChangeField('workTime')">工作时长
        </div>
        <div :class="forkLiftRankListData.selectFieldText == 'aveTime' ? '' : 'selectFieldStyle' "
             @click="forkLiftChangeField('aveTime')">平均时长
        </div>
        <div :class="forkLiftRankListData.selectFieldText == 'loadingCapacity' ? '' : 'selectFieldStyle' "
             @click="forkLiftChangeField('loadingCapacity')">装车量
        </div>
        <div :class="forkLiftRankListData.selectFieldText == 'loadingTimes' ? '' : 'selectFieldStyle' "
             @click="forkLiftChangeField('loadingTimes')">装车数
        </div>
      </div>
      <div class="carManScrView_leftView_content_views3" v-if="forkLiftRankListData.selectFieldText == 'workTime'">
        <div v-for="(item,index) in forkLiftRankListData.listData" :key="index"
             :class="'forkliftRankTwo' + (index + 1)">
          <div style="color:#BCF0FE;width: 45%;">{{ item.carNumber }}</div>
          <div style="color:#1AC9FF;width: 39%;">{{ item.data }}min</div>
          <!-- <div style="color:#BCF0FE;">{{item.createTime}}</div> -->
        </div>
      </div>
      <div class="carManScrView_leftView_content_views3" v-if="forkLiftRankListData.selectFieldText == 'aveTime'">
        <div v-for="(item,index) in forkLiftRankListData.listData" :key="index"
             :class="'forkliftRankTwo' + (index + 1)">
          <div style="color:#BCF0FE;width: 45%;">{{ item.carNumber }}</div>
          <div style="color:#1AC9FF;width: 39%;">{{ item.data }}min</div>
          <!-- <div style="color:#BCF0FE;">{{item.createTime}}</div> -->
        </div>
      </div>
      <div class="carManScrView_leftView_content_views3" v-if="forkLiftRankListData.selectFieldText == 'loadingCapacity'">
        <div v-for="(item,index) in forkLiftRankListData.listData" :key="index"
             :class="'forkliftRankTwo' + (index + 1)">
          <div style="color:#BCF0FE;width: 45%;">{{ item.carNumber }}</div>
          <div style="color:#1AC9FF;width: 39%;">{{ item.data }}吨</div>
          <!-- <div style="color:#BCF0FE;">{{item.createTime}}</div> -->
        </div>
      </div>
      <div class="carManScrView_leftView_content_views3" v-if="forkLiftRankListData.selectFieldText == 'loadingTimes'">
        <div v-for="(item,index) in forkLiftRankListData.listData" :key="index"
             :class="'forkliftRankTwo' + (index + 1)">
          <div style="color:#BCF0FE;width: 45%;">{{ item.carNumber }}</div>
          <div style="color:#1AC9FF;width: 39%;">{{ item.data }}辆</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 {
      DPcomputer12BoxTimer: null,
      //铲车排行榜
      forkLiftRankListData: {
        carclass: '铲车',
        selectTimeText: 'day',
        selectFieldText: 'workTime',
        listData: [
          {carNumber:'',data:0},
          {carNumber:'',data:0},
          {carNumber:'',data:0},
          {carNumber:'',data:0},
          {carNumber:'',data:0}
        ],
      },
    }
  },
  mounted() {
    this.loadData();
    this.DPcomputer12BoxTimer = setInterval(() => {
      this.loadData();
    }, 20000)
  },
  methods: {
    loadData() {
      //获取铲车排行榜
      let forkLiftQuery1 = {};
      forkLiftQuery1.size = 5;
      forkLiftQuery1.sort = this.forkLiftRankListData.selectFieldText;
      forkLiftQuery1.carclass = this.forkLiftRankListData.carclass;
      forkLiftQuery1.duration = this.forkLiftRankListData.selectTimeText;
      this.$nextTick(() => {
        HttpReq.truckDispatching.apiManmadeschanjiedanDayQuery(forkLiftQuery1).then((res) => {
          if(res.data && res.data.length){
            this.forkLiftRankListData.listData = res.data;
          }else{
            this.forkLiftRankListData.listData = [{carNumber:'',data:0},{carNumber:'',data:0},{carNumber:'',data:0},{carNumber:'',data:0},{carNumber:'',data:0}];
          }
        })
      })
    },
    //铲车切换时间
    forkLiftChangeTime(text) {
      this.forkLiftRankListData.selectTimeText = text;
      this.loadData();
    },
    //铲车切换字段排序
    forkLiftChangeField(text) {
      this.forkLiftRankListData.selectFieldText = text;
      this.loadData();
    },
  },
  beforeDestroy() {
    if (this.DPcomputer12BoxTimer) {
      clearInterval(this.DPcomputer12BoxTimer);
      this.DPcomputer12BoxTimer = null;
    }
  }
}
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
}

.DPcomputer12Box {
  width: 20vw;
  height: 32vh;
  background-color: rgba(32, 42, 67, 0.95);
  padding: 5px 7px;
  box-sizing: border-box;
  overflow: hidden;
}

.DPcomputer12Box .carManScrView_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;
}

.DPcomputer12Box .truck_titleStyle {
  display: flex;
  justify-content: space-between;
  padding-right: 4vw;
}

.DPcomputer12Box .driverTitleDateStyle {
  display: flex;
  color: #06EFFE;
  font-size: 16px;
  text-shadow: 0px 0px 0px;
  height: 3.5vh;
  align-items: center;
}

.DPcomputer12Box .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;
}

.DPcomputer12Box .driverTitleDateStyle_son2 {
  height: 2.5vh;
  line-height: 2.5vh;
  margin-right: 5px;
  padding: 0px 5px;
  box-sizing: border-box;
  border-radius: 5px;
  cursor: pointer;
}

.DPcomputer12Box .carManScrView_leftView_content {
  width: 100%;
  height: 27vh;
}

.DPcomputer12Box .carManScrView_leftView_content_views2 {
  display: flex;
  justify-content: space-between;
}

.DPcomputer12Box .carManScrView_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;
}

.DPcomputer12Box .selectFieldStyle {
  opacity: 0.7;
}

.DPcomputer12Box .carManScrView_leftView_content_views3 {
  width: 100%;
  height: 24vh;
  overflow-y: auto;
  scrollbar-width: none;
}

.DPcomputer12Box .carManScrView_leftView_content_views3::-webkit-scrollbar {
  display: none;
}

.DPcomputer12Box .forkliftRankTwo1 {
  margin-top: 1vh;
  margin-bottom: 1.5vh;
  display: flex;
  justify-content: space-evenly;
  width: 100%;
  height: 3vh;
  line-height: 3vh;
  background: no-repeat center center url('~@/assets/images/cutGraph/list1.png');
  background-size: 100% 100%;
  padding-left: 4vw;
  box-sizing: border-box;
  text-align: center;
}

.DPcomputer12Box .forkliftRankTwo2 {
  margin-bottom: 1.5vh;
  display: flex;
  justify-content: space-evenly;
  width: 100%;
  height: 3vh;
  line-height: 3vh;
  background: no-repeat center center url('~@/assets/images/cutGraph/list2.png');
  background-size: 100% 100%;
  padding-left: 4vw;
  box-sizing: border-box;
  text-align: center;
}

.DPcomputer12Box .forkliftRankTwo3 {
  margin-bottom: 1.5vh;
  display: flex;
  justify-content: space-evenly;
  width: 100%;
  height: 3vh;
  line-height: 3vh;
  background: no-repeat center center url('~@/assets/images/cutGraph/list3.png');
  background-size: 100% 100%;
  padding-left: 4vw;
  box-sizing: border-box;
  text-align: center;
}

.DPcomputer12Box .forkliftRankTwo4 {
  margin-bottom: 1.5vh;
  display: flex;
  justify-content: space-evenly;
  width: 100%;
  height: 3vh;
  line-height: 3vh;
  background: no-repeat center center url('~@/assets/images/cutGraph/list4.png');
  background-size: 100% 100%;
  padding-left: 4vw;
  box-sizing: border-box;
  text-align: center;
}

.DPcomputer12Box .forkliftRankTwo5 {
  display: flex;
  justify-content: space-evenly;
  width: 100%;
  height: 3vh;
  line-height: 3vh;
  background: no-repeat center center url('~@/assets/images/cutGraph/list5.png');
  background-size: 100% 100%;
  padding-left: 4vw;
  box-sizing: border-box;
  text-align: center;
}
</style>
