<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>