<template>
  <div class="DPcomputer2Box">
    <!-- 司机信息 -->
    <div class="dataScrView_leftView_title">司机信息</div>
    <div class="dataScrView_leftView_content">
      <div class="driverInforViewsStyle">
        <div class="driverTotalnumberStyle">
          <img src="../../../../assets/images/cutGraph/siji11.png">
          <div>
            <div style="text-align: center;font-size:15px;">司机总人数</div>
            <div style="text-align: center;font-size:18px;">{{ zr }}</div>
          </div>
        </div>
        <div class="presentDrivernumberStyle">
          <div style="color:#3DFBEB;">
            <div style="text-align: center;font-size:15px;">当前工作人数</div>
            <div style="text-align: center;font-size:18px;">{{ zx }}</div>
          </div>
          <div style="color:#F7E518;">
            <div style="text-align: center;font-size:15px;">当前休息人数</div>
            <div style="text-align: center;font-size:18px;">{{ lx }}</div>
          </div>
        </div>
      </div>
      <div class="driverInforListStyle">
        <div class="rolling">
          <div class="table-box">
            <dl>
              <dt>
                <div>司机姓名</div>
                <div>驾驶车辆</div>
                <div>驾驶时长(H)</div>
                <div>计划结束时间</div>
              </dt>
              <dd v-for="(item,index) in driverData.driverTableData" :key="index">
                <div>{{ item.name }}</div>
                <div>{{ item.car }}</div>
                <div>{{ item.time }}</div>
                <div>{{ item.endTime }}</div>
              </dd>
            </dl>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

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


export default {
  data() {
    return {
      DPcomputer2BoxTimer: null,
      //司机信息
      driverData: {
        totalNumber: 0,
        workersNumber: 0,
        restNumber: 0,
        driverTableData: [],
      },
      zr: 0,
      zx: 0,
      lx: 0,
    }
  },
  mounted() {
    this.loadData();
  },
  methods: {
    loadData() {
      //获取司机信息
      HttpReq.truckDispatching.apiManmadesRenQuery({size: 9999}).then((res) => {
        if (res.code == 200) {
          //司机信息处理
          let workerTemporary = [];
          let restTemporary = [];
          res.data.forEach((item) => {
            if (item.odo != 0) {
              workerTemporary.push(item);
            } else {
              restTemporary.push(item);
            }
          });
          this.driverData.totalNumber = res.data.length;
          this.driverData.driverTableData = workerTemporary;
          this.driverData.workersNumber = workerTemporary.length;
          this.driverData.restNumber = restTemporary.length;
        }
      })

      this.DPcomputer2BoxTimer = setInterval(() => {
        //获取工作人员统计
        HttpReq.truckDispatching.apiManmadesTjQuery().then(res => {
          this.zr = res.data[0].zr
          this.zx = res.data[0].zx
          this.lx = res.data[0].lx
        })
        //获取司机信息
        HttpReq.truckDispatching.apiManmadesRenQuery({size: 9999}).then((res) => {
          if (res.code == 200) {
            //司机信息处理
            let workerTemporary = [];
            let restTemporary = [];
            res.data.forEach((item) => {
              if (item.odo != 0) {
                workerTemporary.push(item);
              } else {
                restTemporary.push(item);
              }
            });
            this.driverData.totalNumber = res.data.length;
            this.driverData.driverTableData = workerTemporary;
            this.driverData.workersNumber = workerTemporary.length;
            this.driverData.restNumber = restTemporary.length;
          }
        })

      }, 10000)

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

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

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

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

.DPcomputer2Box .dataScrView_leftView_content {
  width: 100%;
  height: 19vh;
}

.DPcomputer2Box .driverInforViewsStyle {
  width: 100%;
  display: flex;
  justify-content: space-between;
}

.DPcomputer2Box .driverTotalnumberStyle {
  width: 40%;
  height: 5vh;
  background: no-repeat center center url('~@/assets/images/cutGraph/sijirenshu1.png');
  background-size: 100% 100%;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  color: white;
}

.DPcomputer2Box .presentDrivernumberStyle {
  width: 59%;
  height: 5vh;
  background: no-repeat center center url('~@/assets/images/cutGraph/dangqianrenshu1.png');
  background-size: 100% 100%;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
}

.DPcomputer2Box .driverInforListStyle {
  text-align: center;
}

.DPcomputer2Box .rolling {
  height: 13.5vh;
  overflow-y: auto;
  scrollbar-width: none;
}

.DPcomputer2Box .rolling::-webkit-scrollbar {
  display: none;
}

/* .DPcomputer2Box .table-box{
	margin-top: -10px;
} */
.DPcomputer2Box dl {
  display: table;
  width: 100%;
}

.DPcomputer2Box dt {
  margin-top: 20px;
  display: table-row;
  background-color: #274088;
}

.DPcomputer2Box dt > div {
  display: table-cell;
  padding: 5px 3px;
  font-size: 15px;
  font-weight: 500;
  color: rgb(24, 228, 240);
}

.DPcomputer2Box dd {
  display: table-row;
}

.DPcomputer2Box dd > div {
  display: table-cell;
  padding: 5px 3px;
  font-size: 14px;
  color: rgb(24, 228, 240);
}
</style>
