<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 that = this;
      //获取卡车排行榜
      let truckQuery1 = {};
      truckQuery1.size = 5;
      truckQuery1.sort = this.truckRankListData.selectFieldText;
      truckQuery1.carclass = this.truckRankListData.carclass;
      this.$nextTick(() => {
        if (this.truckRankListData.selectTimeText == 'day') {
          HttpReq.truckDispatching.kaChanRankListDayQuery(truckQuery1).then((res) => {
            let arr1 = [];
            let arr2 = [];
            let transitionRes = res.sort(function (a, b) {
              return b[that.truckRankListData.selectFieldText] - a[that.truckRankListData.selectFieldText];
            })
            transitionRes.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 = [];
            let transitionRes = res.sort(function (a, b) {
              return b[that.truckRankListData.selectFieldText] - a[that.truckRankListData.selectFieldText];
            })
            transitionRes.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 = [];
            let transitionRes = res.sort(function (a, b) {
              return b[that.truckRankListData.selectFieldText] - a[that.truckRankListData.selectFieldText];
            })
            transitionRes.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;
        truckQuery1.carclass = this.truckRankListData.carclass;
        this.$nextTick(() => {
          if (this.truckRankListData.selectTimeText == 'day') {
            HttpReq.truckDispatching.kaChanRankListDayQuery(truckQuery1).then((res) => {
              let arr1 = [];
              let arr2 = [];
              let transitionRes = res.sort(function (a, b) {
                return b[that.truckRankListData.selectFieldText] - a[that.truckRankListData.selectFieldText];
              })
              transitionRes.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 = [];
              let transitionRes = res.sort(function (a, b) {
                return b[that.truckRankListData.selectFieldText] - a[that.truckRankListData.selectFieldText];
              })
              transitionRes.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 = [];
              let transitionRes = res.sort(function (a, b) {
                return b[that.truckRankListData.selectFieldText] - a[that.truckRankListData.selectFieldText];
              })
              transitionRes.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) {
      let that = this;
      this.truckRankListData.selectTimeText = text;
      let truckQuery1 = {};
      truckQuery1.size = 5;
      truckQuery1.sort = this.truckRankListData.selectFieldText;
      truckQuery1.carclass = this.truckRankListData.carclass;
      if (text == 'day') {
        HttpReq.truckDispatching.kaChanRankListDayQuery(truckQuery1).then((res) => {
          let arr1 = [];
          let arr2 = [];
          let transitionRes = res.sort(function (a, b) {
            return b[that.truckRankListData.selectFieldText] - a[that.truckRankListData.selectFieldText];
          })
          transitionRes.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 = [];
          let transitionRes = res.sort(function (a, b) {
            return b[that.truckRankListData.selectFieldText] - a[that.truckRankListData.selectFieldText];
          })
          transitionRes.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 = [];
          let transitionRes = res.sort(function (a, b) {
            return b[that.truckRankListData.selectFieldText] - a[that.truckRankListData.selectFieldText];
          })
          transitionRes.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) {
      let that = this;
      this.truckRankListData.selectFieldText = text;
      let truckQuery1 = {};
      truckQuery1.size = 5;
      truckQuery1.sort = this.truckRankListData.selectFieldText;
      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 = [];
            let transitionRes = res.sort(function (a, b) {
              return b[that.truckRankListData.selectFieldText] - a[that.truckRankListData.selectFieldText];
            })
            transitionRes.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 = [];
            let transitionRes = res.sort(function (a, b) {
              return b[that.truckRankListData.selectFieldText] - a[that.truckRankListData.selectFieldText];
            })
            transitionRes.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 = [];
            let transitionRes = res.sort(function (a, b) {
              return b[that.truckRankListData.selectFieldText] - a[that.truckRankListData.selectFieldText];
            })
            transitionRes.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>
