<template>
  <div class="DPcomputer11Box">
    <!-- 卡车排行榜-->
    <div class="carManScrView_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="carManScrView_leftView_content">
      <div class="carManScrView_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 == 'yunZaiNumber' ? '' : 'selectFieldStyle' "
             @click="truckChangeField('yunZaiNumber')">运载量
        </div>
        <div :class="truckRankListData.selectFieldText == 'jieDanNumber' ? '' : 'selectFieldStyle' "
             @click="truckChangeField('jieDanNumber')">接单数
        </div>
      </div>
      <div class="carManScrView_leftView_content_views3" id="carManScrView_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 {
      DPcomputer11BoxTimer: null,
      //卡车排行榜
      truckRankListData: {
        echartsX: 'Km',
        carclass: '卡车',
        selectTimeText: 'day',
        selectFieldText: 'juli',
        driverName: [],
        driverSeriesData: [],
        driverName1: ['kfdfdf', 'dsdsd1', 'dsdsd55'],
        driverSeriesData1: [20, 50, 10],
      },
    }
  },
  mounted() {
    this.DPcomputer11BoxTimer = setInterval(() => {
      this.loadData();
    }, 10000)
    this.loadData();
  },
  methods: {
    loadData() {
      let that = this;
      let truckQuery1 = {};
      truckQuery1.size = 7;
      truckQuery1.sort = this.truckRankListData.selectFieldText;
      truckQuery1.carclass = this.truckRankListData.carclass;
      truckQuery1.duration = this.truckRankListData.selectTimeText;

      this.$nextTick(() => {
        HttpReq.truckDispatching.apiManmadesDay1Query(truckQuery1).then((res) => {
          let arr1 = [];
          let arr2 = [];
          if(res.data && res.data.length){
            res.data.reverse().forEach((item, index) => {
              arr1.push(item.carNumber);
              arr2.push(item.data);
            })
          }else{
            arr1.push('暂无数据');
            arr2.push(0);
          }
          this.truckRankListData.driverName = arr1;
          this.truckRankListData.driverSeriesData = arr2;
          this.truckChangeEcharts();
        })
      })
    },
    //卡车切换时间
    truckChangeTime(text) {
      this.truckRankListData.selectTimeText = text;
      this.loadData();
    },
    //卡车切换字段排序
    truckChangeField(text) {
      let that = this;
      this.truckRankListData.selectFieldText = text;
      let truckQuery1 = {};
      truckQuery1.size = 7;
      truckQuery1.sort = this.truckRankListData.selectFieldText;
      truckQuery1.carclass = this.truckRankListData.carclass;
      if (text == 'juli') {
        this.truckRankListData.echartsX = 'km';
      } else if (text == 'time') {
        this.truckRankListData.echartsX = 'min';
      } else if (text == 'yunZaiNumber') {
        this.truckRankListData.echartsX = '吨';
      } else if (text == 'jieDanNumber') {
        this.truckRankListData.echartsX = '次';
      }
      this.loadData();
    },
    //卡车排行榜Echarts
    truckChangeEcharts() {
      echarts.init(document.getElementById('carManScrView_leftView_content_views3_1')).dispose();
      var myChart = echarts.init(document.getElementById('carManScrView_leftView_content_views3_1'));
      var option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        grid: {
          top: '18%',
          left: '1%',
          bottom: '0%',
          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.DPcomputer11BoxTimer) {
      clearInterval(this.DPcomputer11BoxTimer);
      this.DPcomputer11BoxTimer = null;
    }
  }
}
</script>

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

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

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

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

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

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

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

.DPcomputer11Box .carManScrView_rightView_content {
  width: 100%;
  height: 27vh;
}

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

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

.DPcomputer11Box .selectFieldStyle {
  opacity: 0.7;
}

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

.DPcomputer11Box .carManScrView_leftView_content_views3::-webkit-scrollbar {
  display: none;
}
</style>
