<template>
  <div class="DPcomputer14Box">
    <!-- 铲车动态-->
    <div class="carManScrView_rightView_title">铲车动态</div>
    <div class="carManScrView_rightView_content">
      <div class="carDynamicTitleStyle">
        <img src="../../../../assets/images/cutGraph/huoche11.png" height="28">
        <div>{{ forkliftkDynamicListData.number ? forkliftkDynamicListData.number : '无' }}</div>
      </div>
      <div class="xuanzekuang1">
        <el-select v-model="xuanzekuangValue" placeholder="请选择" style="width:5vw;" @change="xuanzekuang1Fn()"
                   :popper-append-to-body="false">
          <el-option v-for="item in forkliftkDynamicListData.data" :key="item.number" :label="item.number"
                     :value="item.number"></el-option>
        </el-select>
      </div>
      <div class="ForkliftDynamicContent1">
        <div>
          <div>今日完成量</div>
          <div class="ForkliftDynamicContent1_son1">
            {{ forkliftkDynamicListData.rate ? forkliftkDynamicListData.rate : 0 }}
          </div>
        </div>
        <div>
          <div>今日工时/H</div>
          <div class="ForkliftDynamicContent1_son1">
            {{ forkliftkDynamicListData.workTime ? forkliftkDynamicListData.workTime : 0 }}
          </div>
        </div>
        <div>
          <div>今日效率T/H</div>
          <div class="ForkliftDynamicContent1_son1">
            {{
              forkliftkDynamicListData.workTime != 0 ?
                (forkliftkDynamicListData.rate ?
                  (parseFloat(forkliftkDynamicListData.rate) / parseFloat(forkliftkDynamicListData.workTime)).toFixed(0)
                  : 0)
                : (forkliftkDynamicListData.rate == 0) ? 0 : 100
            }}
          </div>
        </div>
      </div>
      <div class="carDynamicContent1">
        <div>
          <img src="../../../../assets/images/cutGraph/mokuaikaobei4.png">
          <div>开始装车时间</div>
          <div>{{ forkliftkDynamicListData.startTime ? forkliftkDynamicListData.startTime : '无' }}</div>
        </div>
        <div>
          <img src="../../../../assets/images/cutGraph/mokuaikaobei4.png">
          <div>预计完成时间</div>
          <div>{{ forkliftkDynamicListData.endTime ? forkliftkDynamicListData.endTime : '无' }}</div>
        </div>
      </div>
      <div class="carDynamicContent2">
        <img src="../../../../assets/images/cutGraph/tuiyuan1.png">
        <div>
          <div style="color:white;text-align: center;">
            {{ forkliftkDynamicListData.loadArea ? forkliftkDynamicListData.loadArea : '' }}
          </div>
          <img src="../../../../assets/images/cutGraph/zu2603.png">
          <div style="color:white;text-align: center;">
            {{ forkliftkDynamicListData.unloadArea ? forkliftkDynamicListData.unloadArea : '' }}
          </div>
        </div>
        <img src="../../../../assets/images/cutGraph/tuiyuan2.png">
      </div>
    </div>
  </div>
</template>

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


export default {
  data() {
    return {
      DPcomputer14BoxTimer: null,
      xuanzekuangValue: '',
      //铲车动态
      forkliftkDynamicListData: {
        data: [],
        num2: 0,
        number: '无',
        rate: 0,
        carry: 0,
        workTime: 0,
        mil: 0,
        startTime: '无',
        endTime: '无',
        loadArea: '',
        unloadArea: '',
      },
    }
  },
  mounted() {
    this.loadData();
  },
  methods: {
    loadData() {
      //获取车辆信息
      HttpReq.truckDispatching.carInformationQuery({size: 9999}).then((res) => {
        let arr2 = [];
        if (res.code == 200) {
          res.data.content.forEach((item, index) => {
            if (item.carclass == '铲车') {
              arr2.push(item);
            }
          })
        }
        this.forkliftkDynamicListData.data = arr2;
        this.forkliftkDynamicListData.num2 = 0;
        this.dianchandongtai();
        this.DPcomputer14BoxTimer = setInterval(() => {
          this.dianchandongtai();
        }, 20000)
      })
    },
    //铲车动态
    dianchandongtai() {
      let num1 = parseInt(this.forkliftkDynamicListData.data.length) - 1;
      //获取车辆实时数据
      if (this.forkliftkDynamicListData.num2 <= num1) {

      } else {
        this.forkliftkDynamicListData.num2 = 0;
      }
      if (this.forkliftkDynamicListData.data == 0) {
        return
      }
      this.forkliftkDynamicListData.number = this.forkliftkDynamicListData.data[this.forkliftkDynamicListData.num2].number;
      this.initData();

    },
    initData(){
      HttpReq.truckDispatching.dpCcDynamics({carNumber: this.forkliftkDynamicListData.number}).then((res) => {
        if (res.data) {
          let d=res.data;
          this.forkliftkDynamicListData.rate = d.todayEfficiency;
          this.forkliftkDynamicListData.carry = d.todayWeight;
          this.forkliftkDynamicListData.workTime = d.todayWorkingHours;
          this.forkliftkDynamicListData.startTime = d.zcStartTime;
          this.forkliftkDynamicListData.endTime = d.zcExpectedCompletionTime;
          this.forkliftkDynamicListData.loadArea = d.cPoint;
        } else {
          this.forkliftkDynamicListData.rate = 0;
          this.forkliftkDynamicListData.carry = 0;
          this.forkliftkDynamicListData.workTime = 0;
          this.forkliftkDynamicListData.mil = 0;
          this.forkliftkDynamicListData.startTime = '无';
          this.forkliftkDynamicListData.endTime = '无';
          this.forkliftkDynamicListData.loadArea = '';
          this.forkliftkDynamicListData.unloadArea = '';
        }
        this.forkliftkDynamicListData.num2 = this.forkliftkDynamicListData.num2 + 1;
      })
    },
    //切换车牌号
    xuanzekuang1Fn() {
      this.forkliftkDynamicListData.number = this.xuanzekuangValue;
      this.initData();
    },
  },
  beforeDestroy() {
    if (this.DPcomputer14BoxTimer) {
      clearInterval(this.DPcomputer14BoxTimer);
      this.DPcomputer14BoxTimer = null;
    }
  }
}
</script>
<style scoped>

/deep/ .el-input--small {
  opacity: 0;
}

/deep/ .el-select-dropdown__list {
  padding: 0;
  max-height: 180px;
  overflow-y: auto;
}

/deep/ .el-select-dropdown__list::-webkit-scrollbar {
  display: none;
}

.el-select-dropdown__item.hover, .el-select-dropdown__item:hover {
  background-color: #021445 !important;
  color: #31E5F5;
}

.el-select-dropdown__item.selected {
  background-color: #021445 !important;
  color: #31E5F5;
  font-weight: 800;
}

.el-select-dropdown__item {
  padding: 0px 20px;
  box-sizing: border-box;
  background-color: #021445 !important;
  color: #31E5F5;
  font-size: 16px;
}
</style>
<style scoped>
* {
  margin: 0;
  padding: 0;
}

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

.DPcomputer14Box .carManScrView_rightView_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;
}

.DPcomputer14Box .carManScrView_rightView_content {
  width: 100%;
  height: 27vh;
  position: relative;
}

.DPcomputer14Box .carDynamicTitleStyle {
  display: flex;
  width: 100%;
  height: 3.5vh;
  align-items: center;
}

.DPcomputer14Box .carDynamicTitleStyle > div {
  margin-left: 10px;
  height: 3.5vh;
  width: 6vw;
  background: no-repeat center center url('~@/assets/images/cutGraph/xingzhuang9kaobei2.png');
  background-size: 100% 100%;
  line-height: 3.5vh;
  text-align: center;
  color: #06EFFE;
  font-weight: 600;
  font-size: 17px;
}

.DPcomputer14Box .ForkliftDynamicContent1 {
  margin-top: 0.3vh;
  display: flex;
  justify-content: space-between;
  width: 100%;
  height: 10vh;
  font-size: 15px;
}

.DPcomputer14Box .ForkliftDynamicContent1 > div {
  width: 33%;
  text-align: center;
  color: white;
}

.DPcomputer14Box .ForkliftDynamicContent1_son1 {
  margin: 0px auto;
  width: 4.3vw;
  height: 4.3vw;
  line-height: 4.3vw;
  font-size: 20px;
  background: no-repeat center center url('~@/assets/images/cutGraph/bilikuang1.png');
  background-size: 100% 100%;
}

.DPcomputer14Box .carDynamicContent1 {
  width: 100%;
  height: 7vh;
}

.DPcomputer14Box .carDynamicContent1 > div {
  color: #06EFFE;
  margin-top: 5px;
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.DPcomputer14Box .carDynamicContent2 {
  width: 100%;
  height: 5vh;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0px 10px;
  box-sizing: border-box;
  color: #03BFFD;
}

.DPcomputer14Box .carDynamicContent2 > span {
  transform: rotateZ(90deg);
  font-size: 30px;
}

.DPcomputer14Box .xuanzekuang1 {
  position: absolute;
  top: 0.1vh;
  left: 3vw;
  /*opacity: 0;*/
}
</style>
