<template>
    <div class="DPcomputer7Box">
        <!-- 车辆工时-->
        <div class="dataScrView_rightView_title truck_titleStyle">
            <div>车辆工时</div>
            <div class="driverTitleDateStyle">
                <div :class="carWorkTimeData.selectTimeText == 'day' ? 'driverTitleDateStyle_son1' : 'driverTitleDateStyle_son2' " @click="carWorkTimeChangeTime('day')">日</div>
                <div :class="carWorkTimeData.selectTimeText == 'month' ? 'driverTitleDateStyle_son1' : 'driverTitleDateStyle_son2' " @click="carWorkTimeChangeTime('month')">月</div>
                <div :class="carWorkTimeData.selectTimeText == 'year' ? 'driverTitleDateStyle_son1' : 'driverTitleDateStyle_son2' " @click="carWorkTimeChangeTime('year')">年</div>
            </div>
        </div>
        <div class="dataScrView_rightView_content">
            <div class="carWorkTimeStyle">
                <div v-for="(item,index) in carWorkTimeData.listData" :key="index">
                    <div class="carPicStyle1">
                        <img src="../../../../assets/images/cutGraph/huoyunqiche1.png">
                    </div>
                    <div class="carPicStyle2">
                        <div style="margin-top:0.5vh;font-size:17px;">{{item.cartype}}</div>
                        <div style="font-size:14px;margin-top:1.5vh;">总工时：<b>{{item.gongshi}}</b>H</div>
                        <div style="font-size:14px;margin-top:1vh;">闲置率：<b>{{item.xianzhi}}</b>%</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

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


export default {
    data(){
        return {
            DPcomputer7BoxTimer:null,
            //时间
            currentTime:{
                day:'',
                month:'',
                year:'',
            },
            //车辆工时
            carWorkTimeData:{
                selectTimeText:'day',
                listData:[
                    {cartype:'卡车',gongshi:0,xianzhi:0},
                    {cartype:'铲车',gongshi:0,xianzhi:0},
                    {cartype:'其他车辆',gongshi:0,xianzhi:0}
                ],
                selectTimeDate:'',
            },
        }
    },
    mounted(){
        this.loadData();
    },
    methods:{
        loadData(){
            this.dayCurrentTimeFn();
            this.monthCurrentTimeFn();
            this.yearCurrentTimeFn();

            //车辆工时
            HttpReq.truckDispatching.carWorkInforQuery({riqi:this.carWorkTimeData.selectTimeDate}).then((res) => {
                if(res.code == 200){
                    if(res.data.totalElements == 0){
                        this.carWorkTimeData.listData = [
                            {cartype:'卡车',gongshi:0,xianzhi:0},
                            {cartype:'铲车',gongshi:0,xianzhi:0},
                            {cartype:'其他车辆',gongshi:0,xianzhi:0},
                        ];
                    }else{
                        this.carWorkTimeData.listData = res.data.content;
                    }
                }
            })

            this.DPcomputer7BoxTimer = setInterval(() => {
                //车辆工时
                HttpReq.truckDispatching.carWorkInforQuery({riqi:this.carWorkTimeData.selectTimeDate}).then((res) => {
                    if(res.code == 200){
                        if(res.data.totalElements == 0){
                            this.carWorkTimeData.listData = [
                                {cartype:'卡车',gongshi:0,xianzhi:0},
                                {cartype:'铲车',gongshi:0,xianzhi:0},
                                {cartype:'其他车辆',gongshi:0,xianzhi:0},
                            ];
                        }else{
                            this.carWorkTimeData.listData = res.data.content;
                        }
                    }
                })
            },10000)

        },
        //车辆工时切换时间
        carWorkTimeChangeTime(text){
            this.carWorkTimeData.selectTimeText = text;
            if(text == 'day'){
                this.carWorkTimeData.selectTimeDate = this.currentTime.day;
            }
            if(text == 'month'){
                this.carWorkTimeData.selectTimeDate = this.currentTime.month;
            }
            if(text == 'year'){
                this.carWorkTimeData.selectTimeDate = this.currentTime.year;
            }
            HttpReq.truckDispatching.carWorkInforQuery({riqi:this.carWorkTimeData.selectTimeDate}).then((res) => {
                if(res.code == 200){
                    if(res.data.totalElements == 0){
                        this.carWorkTimeData.listData = [
                            {cartype:'卡车',gongshi:0,xianzhi:0},
                            {cartype:'铲车',gongshi:0,xianzhi:0},
                            {cartype:'其他车辆',gongshi:0,xianzhi:0},
                        ];
                    }else{
                        this.carWorkTimeData.listData = res.data.content;
                    }
                }
            })
        },
        //获取当前时间
		dayCurrentTimeFn(){
			var date = new Date();
			var year = date.getFullYear();        //年 ,从 Date 对象以四位数字返回年份
			var month = date.getMonth() + 1;      //月 ,从 Date 对象返回月份 (0 ~ 11) ,date.getMonth()比实际月份少 1 个月
			var day = date.getDate();             //日 ,从 Date 对象返回一个月中的某一天 (1 ~ 31)
			//修改月份格式
			if (month >= 1 && month <= 9) {
				month = "0" + month;
			}
			//修改日期格式
			if (day >= 0 && day <= 9) {
				day = "0" + day;
			}
			let currentFormatDate = year + "-" + month + "-" + day;
			this.currentTime.day = currentFormatDate;
            this.carWorkTimeData.selectTimeDate = currentFormatDate;
		},
        monthCurrentTimeFn(){
			var date = new Date();
			var year = date.getFullYear();        //年 ,从 Date 对象以四位数字返回年份
			var month = date.getMonth() + 1;      //月 ,从 Date 对象返回月份 (0 ~ 11) ,date.getMonth()比实际月份少 1 个月
			//修改月份格式
			if (month >= 1 && month <= 9) {
				month = "0" + month;
			}
			let currentFormatDate = year + "-" + month;
			this.currentTime.month = currentFormatDate;
		},
        yearCurrentTimeFn(){
			var date = new Date();
			var year = date.getFullYear();        //年 ,从 Date 对象以四位数字返回年份
			let currentFormatDate = year;
			this.currentTime.year = currentFormatDate;
		},
    },
    beforeDestroy(){
        if(this.DPcomputer7BoxTimer) {
			clearInterval(this.DPcomputer7BoxTimer);
            this.DPcomputer7BoxTimer = null;
		}
    }
}
</script>

<style scoped>
*{
  margin: 0;
  padding: 0;
}
.DPcomputer7Box{
    width: 20vw;
    height: 23.5vh;
    background-color: rgba(32,42,67,0.95);
    padding: 5px 7px;
    box-sizing: border-box;
    overflow: hidden;
}
.DPcomputer7Box .dataScrView_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;
}
.DPcomputer7Box .truck_titleStyle{
    display: flex;
    justify-content: space-between;
    padding-right: 4vw;
}
.DPcomputer7Box .driverTitleDateStyle{
    display: flex;
    color: #06EFFE;
    font-size: 16px;
    text-shadow: 0px 0px 0px;
    height: 3.5vh;
    align-items: center;
}
.DPcomputer7Box .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;
}
.DPcomputer7Box .driverTitleDateStyle_son2{
    height: 2.5vh;
    line-height: 2.5vh;
    margin-right: 5px;
    padding:0px 5px;
    box-sizing: border-box;
    border-radius: 5px;
    cursor: pointer;
}
.DPcomputer7Box .dataScrView_rightView_content{
    width: 100%;
    height: 19vh;
}
.DPcomputer7Box .carWorkTimeStyle{
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-between;
}
.DPcomputer7Box .carWorkTimeStyle>div{
    width: 33%;
}
.DPcomputer7Box .carPicStyle1{
    width: 3.5vw;
    height: 3.5vw;
    margin: 0px auto;
    position: relative;
}
.DPcomputer7Box .carPicStyle1>img{
    height: 3.5vw;
    width: 3.5vw;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}
.DPcomputer7Box .carPicStyle2{
    width: 5vw;
    height: 10vh;
    margin: 10px auto;
    background:no-repeat center center url('~@/assets/images/cutGraph/zu2388.png');
	background-size:100% 100%;
    text-align: center;
    color: #03FEFE;
    overflow: hidden;
}
</style>