<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:13px;margin-top:1vh;">总工时：<b>{{item.gongshi}}</b>H</div>
                        <div style="font-size:13px;margin-top:1vh;">闲置率：<b>{{(item.xianzhi > 0) ? item.xianzhi : 0}}</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:100},
                    {cartype:'铲车',gongshi:0,xianzhi:100},
                    {cartype:'其他车辆',gongshi:0,xianzhi:100}
                ],
                selectTimeDate:'',
            },
        }
    },
    mounted(){
        this.loadData();
    },
    methods:{
        loadData(){
            this.dayCurrentTimeFn();
            this.monthCurrentTimeFn();
            this.yearCurrentTimeFn();

            //车辆工时
            if(this.carWorkTimeData.selectTimeText == 'day'){
                this.carWorkTimeData.selectTimeDate = this.currentTime.day;
                HttpReq.truckDispatching.apiManmadesCheDayQueryDay({createTime:this.carWorkTimeData.selectTimeDate,size:9999,page:0}).then((res) => {
					if(res.code == 200){
                        let allTime1 = 0;
                        let allEffic1 = 0;
                        let num1 = 0;
                        let allTime2 = 0;
                        let allEffic2 = 0;
                        let num2 = 0;
                        let allTime3 = 0;
                        let allEffic3 = 0;
                        let num3 = 0;
						res.data.forEach((item1,index1)=>{
                            if(item1.carclass == '卡车'){
                                allTime1 = allTime1 +  parseFloat(item1.time);
                                allEffic1 = allEffic1 + (item1.effic ? parseFloat(item1.effic) : 0);
                                num1++;
                            }else if(item1.carclass == '铲车'){
                                allTime2 = allTime2 +  parseFloat(item1.time);
                                allEffic2 = allEffic2 + (item1.effic ? parseFloat(item1.effic) : 0);
                                num2++;
                            }else{
                                allTime3 = allTime3 +  parseFloat(item1.time);
                                allEffic3 = allEffic3 + (item1.effic ? parseFloat(item1.effic) : 0);
                                num3++;
                            }
                        });
                        this.carWorkTimeData.listData[0].gongshi = allTime1;
                        this.carWorkTimeData.listData[0].xianzhi = allEffic1 ? (100 - parseFloat(allEffic1 / num1)).toFixed(2) : 100;
                        this.carWorkTimeData.listData[1].gongshi = allTime2;
                        this.carWorkTimeData.listData[1].xianzhi = allEffic2 ? (100 - parseFloat(allEffic2 / num2)).toFixed(2) : 100;
                        this.carWorkTimeData.listData[2].gongshi = allTime3;
                        this.carWorkTimeData.listData[2].xianzhi = allEffic3 ? (100 - parseFloat(allEffic3 / num3)).toFixed(2) : 100;
					}
				})
            }
            if(this.carWorkTimeData.selectTimeText == 'month'){
                this.carWorkTimeData.selectTimeDate = this.currentTime.month;
                HttpReq.truckDispatching.apiManmadesCheMonthQueryMonth({createTime:this.carWorkTimeData.selectTimeDate,size:9999,page:0}).then((res) => {
					if(res.code == 200){
                        let allTime1 = 0;
                        let allEffic1 = 0;
                        let num1 = 0;
                        let allTime2 = 0;
                        let allEffic2 = 0;
                        let num2 = 0;
                        let allTime3 = 0;
                        let allEffic3 = 0;
                        let num3 = 0;
						res.data.forEach((item1,index1)=>{
                            if(item1.carclass == '卡车'){
                                allTime1 = allTime1 +  parseFloat(item1.time);
                                allEffic1 = allEffic1 + (item1.effic ? parseFloat(item1.effic) : 0);
                                num1++;
                            }else if(item1.carclass == '铲车'){
                                allTime2 = allTime2 +  parseFloat(item1.time);
                                allEffic2 = allEffic2 + (item1.effic ? parseFloat(item1.effic) : 0);
                                num2++;
                            }else{
                                allTime3 = allTime3 +  parseFloat(item1.time);
                                allEffic3 = allEffic3 + (item1.effic ? parseFloat(item1.effic) : 0);
                                num3++;
                            }
                        });
                        this.carWorkTimeData.listData[0].gongshi = allTime1;
                        this.carWorkTimeData.listData[0].xianzhi = allEffic1 ? (100 - parseFloat(allEffic1 / num1)).toFixed(2) : 100;
                        this.carWorkTimeData.listData[1].gongshi = allTime2;
                        this.carWorkTimeData.listData[1].xianzhi = allEffic2 ? (100 - parseFloat(allEffic2 / num2)).toFixed(2) : 100;
                        this.carWorkTimeData.listData[2].gongshi = allTime3;
                        this.carWorkTimeData.listData[2].xianzhi = allEffic3 ? (100 - parseFloat(allEffic3 / num3)).toFixed(2) : 100;
					}
				})
            }
            if(this.carWorkTimeData.selectTimeText == 'year'){
                this.carWorkTimeData.selectTimeDate = this.currentTime.year;
                HttpReq.truckDispatching.apiManmadesCheYearQueryYear({createTime:this.carWorkTimeData.selectTimeDate,size:9999,page:0}).then((res) => {
					if(res.code == 200){
                        let allTime1 = 0;
                        let allEffic1 = 0;
                        let num1 = 0;
                        let allTime2 = 0;
                        let allEffic2 = 0;
                        let num2 = 0;
                        let allTime3 = 0;
                        let allEffic3 = 0;
                        let num3 = 0;
						res.data.forEach((item1,index1)=>{
                            if(item1.carclass == '卡车'){
                                allTime1 = allTime1 +  parseFloat(item1.time);
                                allEffic1 = allEffic1 + (item1.effic ? parseFloat(item1.effic) : 0);
                                num1++;
                            }else if(item1.carclass == '铲车'){
                                allTime2 = allTime2 +  parseFloat(item1.time);
                                allEffic2 = allEffic2 + (item1.effic ? parseFloat(item1.effic) : 0);
                                num2++;
                            }else{
                                allTime3 = allTime3 +  parseFloat(item1.time);
                                allEffic3 = allEffic3 + (item1.effic ? parseFloat(item1.effic) : 0);
                                num3++;
                            }
                        });
                        this.carWorkTimeData.listData[0].gongshi = allTime1;
                        this.carWorkTimeData.listData[0].xianzhi = allEffic1 ? (100 - parseFloat(allEffic1 / num1)).toFixed(2) : 100;
                        this.carWorkTimeData.listData[1].gongshi = allTime2;
                        this.carWorkTimeData.listData[1].xianzhi = allEffic2 ? (100 - parseFloat(allEffic2 / num2)).toFixed(2) : 100;
                        this.carWorkTimeData.listData[2].gongshi = allTime3;
                        this.carWorkTimeData.listData[2].xianzhi = allEffic3 ? (100 - parseFloat(allEffic3 / num3)).toFixed(2) : 100;
					}
				})
            }

            this.DPcomputer7BoxTimer = setInterval(() => {
                //车辆工时
                if(this.carWorkTimeData.selectTimeText == 'day'){
                    this.carWorkTimeData.selectTimeDate = this.currentTime.day;
                    HttpReq.truckDispatching.apiManmadesCheDayQueryDay({createTime:this.carWorkTimeData.selectTimeDate,size:9999,page:0}).then((res) => {
                        if(res.code == 200){
                            let allTime1 = 0;
                            let allEffic1 = 0;
                            let num1 = 0;
                            let allTime2 = 0;
                            let allEffic2 = 0;
                            let num2 = 0;
                            let allTime3 = 0;
                            let allEffic3 = 0;
                            let num3 = 0;
                            res.data.forEach((item1,index1)=>{
                                if(item1.carclass == '卡车'){
                                    allTime1 = allTime1 +  parseFloat(item1.time);
                                    allEffic1 = allEffic1 + (item1.effic ? parseFloat(item1.effic) : 0);
                                    num1++;
                                }else if(item1.carclass == '铲车'){
                                    allTime2 = allTime2 +  parseFloat(item1.time);
                                    allEffic2 = allEffic2 + (item1.effic ? parseFloat(item1.effic) : 0);
                                    num2++;
                                }else{
                                    allTime3 = allTime3 +  parseFloat(item1.time);
                                    allEffic3 = allEffic3 + (item1.effic ? parseFloat(item1.effic) : 0);
                                    num3++;
                                }
                            });
                            this.carWorkTimeData.listData[0].gongshi = allTime1;
                            this.carWorkTimeData.listData[0].xianzhi = allEffic1 ? (100 - parseFloat(allEffic1 / num1)).toFixed(2) : 100;
                            this.carWorkTimeData.listData[1].gongshi = allTime2;
                            this.carWorkTimeData.listData[1].xianzhi = allEffic2 ? (100 - parseFloat(allEffic2 / num2)).toFixed(2) : 100;
                            this.carWorkTimeData.listData[2].gongshi = allTime3;
                            this.carWorkTimeData.listData[2].xianzhi = allEffic3 ? (100 - parseFloat(allEffic3 / num3)).toFixed(2) : 100;
                        }
                    })
                }
                if(this.carWorkTimeData.selectTimeText == 'month'){
                    this.carWorkTimeData.selectTimeDate = this.currentTime.month;
                    HttpReq.truckDispatching.apiManmadesCheMonthQueryMonth({createTime:this.carWorkTimeData.selectTimeDate,size:9999,page:0}).then((res) => {
                        if(res.code == 200){
                            let allTime1 = 0;
                            let allEffic1 = 0;
                            let num1 = 0;
                            let allTime2 = 0;
                            let allEffic2 = 0;
                            let num2 = 0;
                            let allTime3 = 0;
                            let allEffic3 = 0;
                            let num3 = 0;
                            res.data.forEach((item1,index1)=>{
                                if(item1.carclass == '卡车'){
                                    allTime1 = allTime1 +  parseFloat(item1.time);
                                    allEffic1 = allEffic1 + (item1.effic ? parseFloat(item1.effic) : 0);
                                    num1++;
                                }else if(item1.carclass == '铲车'){
                                    allTime2 = allTime2 +  parseFloat(item1.time);
                                    allEffic2 = allEffic2 + (item1.effic ? parseFloat(item1.effic) : 0);
                                    num2++;
                                }else{
                                    allTime3 = allTime3 +  parseFloat(item1.time);
                                    allEffic3 = allEffic3 + (item1.effic ? parseFloat(item1.effic) : 0);
                                    num3++;
                                }
                            });
                            this.carWorkTimeData.listData[0].gongshi = allTime1;
                            this.carWorkTimeData.listData[0].xianzhi = allEffic1 ? (100 - parseFloat(allEffic1 / num1)).toFixed(2) : 100;
                            this.carWorkTimeData.listData[1].gongshi = allTime2;
                            this.carWorkTimeData.listData[1].xianzhi = allEffic2 ? (100 - parseFloat(allEffic2 / num2)).toFixed(2) : 100;
                            this.carWorkTimeData.listData[2].gongshi = allTime3;
                            this.carWorkTimeData.listData[2].xianzhi = allEffic3 ? (100 - parseFloat(allEffic3 / num3)).toFixed(2) : 100;
                        }
                    })
                }
                if(this.carWorkTimeData.selectTimeText == 'year'){
                    this.carWorkTimeData.selectTimeDate = this.currentTime.year;
                    HttpReq.truckDispatching.apiManmadesCheYearQueryYear({createTime:this.carWorkTimeData.selectTimeDate,size:9999,page:0}).then((res) => {
                        if(res.code == 200){
                            let allTime1 = 0;
                            let allEffic1 = 0;
                            let num1 = 0;
                            let allTime2 = 0;
                            let allEffic2 = 0;
                            let num2 = 0;
                            let allTime3 = 0;
                            let allEffic3 = 0;
                            let num3 = 0;
                            res.data.forEach((item1,index1)=>{
                                if(item1.carclass == '卡车'){
                                    allTime1 = allTime1 +  parseFloat(item1.time);
                                    allEffic1 = allEffic1 + (item1.effic ? parseFloat(item1.effic) : 0);
                                    num1++;
                                }else if(item1.carclass == '铲车'){
                                    allTime2 = allTime2 +  parseFloat(item1.time);
                                    allEffic2 = allEffic2 + (item1.effic ? parseFloat(item1.effic) : 0);
                                    num2++;
                                }else{
                                    allTime3 = allTime3 +  parseFloat(item1.time);
                                    allEffic3 = allEffic3 + (item1.effic ? parseFloat(item1.effic) : 0);
                                    num3++;
                                }
                            });
                            this.carWorkTimeData.listData[0].gongshi = allTime1;
                            this.carWorkTimeData.listData[0].xianzhi = allEffic1 ? (100 - parseFloat(allEffic1 / num1)).toFixed(2) : 100;
                            this.carWorkTimeData.listData[1].gongshi = allTime2;
                            this.carWorkTimeData.listData[1].xianzhi = allEffic2 ? (100 - parseFloat(allEffic2 / num2)).toFixed(2) : 100;
                            this.carWorkTimeData.listData[2].gongshi = allTime3;
                            this.carWorkTimeData.listData[2].xianzhi = allEffic3 ? (100 - parseFloat(allEffic3 / num3)).toFixed(2) : 100;
                        }
                    })
                }
            },10000)

        },
        //车辆工时切换时间
        carWorkTimeChangeTime(text){
            this.carWorkTimeData.selectTimeText = text;
            //车辆工时
            if(this.carWorkTimeData.selectTimeText == 'day'){
                this.carWorkTimeData.selectTimeDate = this.currentTime.day;
                HttpReq.truckDispatching.apiManmadesCheDayQueryDay({createTime:this.carWorkTimeData.selectTimeDate,size:9999,page:0}).then((res) => {
					if(res.code == 200){
                        let allTime1 = 0;
                        let allEffic1 = 0;
                        let num1 = 0;
                        let allTime2 = 0;
                        let allEffic2 = 0;
                        let num2 = 0;
                        let allTime3 = 0;
                        let allEffic3 = 0;
                        let num3 = 0;
						res.data.forEach((item1,index1)=>{
                            if(item1.carclass == '卡车'){
                                allTime1 = allTime1 +  parseFloat(item1.time);
                                allEffic1 = allEffic1 + (item1.effic ? parseFloat(item1.effic) : 0);
                                num1++;
                            }else if(item1.carclass == '铲车'){
                                allTime2 = allTime2 +  parseFloat(item1.time);
                                allEffic2 = allEffic2 + (item1.effic ? parseFloat(item1.effic) : 0);
                                num2++;
                            }else{
                                allTime3 = allTime3 +  parseFloat(item1.time);
                                allEffic3 = allEffic3 + (item1.effic ? parseFloat(item1.effic) : 0);
                                num3++;
                            }
                        });
                        this.carWorkTimeData.listData[0].gongshi = allTime1;
                        this.carWorkTimeData.listData[0].xianzhi = allEffic1 ? (100 - parseFloat(allEffic1 / num1)).toFixed(2) : 100;
                        this.carWorkTimeData.listData[1].gongshi = allTime2;
                        this.carWorkTimeData.listData[1].xianzhi = allEffic2 ? (100 - parseFloat(allEffic2 / num2)).toFixed(2) : 100;
                        this.carWorkTimeData.listData[2].gongshi = allTime3;
                        this.carWorkTimeData.listData[2].xianzhi = allEffic3 ? (100 - parseFloat(allEffic3 / num3)).toFixed(2) : 100;
					}
				})
            }
            if(this.carWorkTimeData.selectTimeText == 'month'){
                this.carWorkTimeData.selectTimeDate = this.currentTime.month;
                HttpReq.truckDispatching.apiManmadesCheMonthQueryMonth({createTime:this.carWorkTimeData.selectTimeDate,size:9999,page:0}).then((res) => {
					if(res.code == 200){
                        let allTime1 = 0;
                        let allEffic1 = 0;
                        let num1 = 0;
                        let allTime2 = 0;
                        let allEffic2 = 0;
                        let num2 = 0;
                        let allTime3 = 0;
                        let allEffic3 = 0;
                        let num3 = 0;
						res.data.forEach((item1,index1)=>{
                            if(item1.carclass == '卡车'){
                                allTime1 = allTime1 +  parseFloat(item1.time);
                                allEffic1 = allEffic1 + (item1.effic ? parseFloat(item1.effic) : 0);
                                num1++;
                            }else if(item1.carclass == '铲车'){
                                allTime2 = allTime2 +  parseFloat(item1.time);
                                allEffic2 = allEffic2 + (item1.effic ? parseFloat(item1.effic) : 0);
                                num2++;
                            }else{
                                allTime3 = allTime3 +  parseFloat(item1.time);
                                allEffic3 = allEffic3 + (item1.effic ? parseFloat(item1.effic) : 0);
                                num3++;
                            }
                        });
                        this.carWorkTimeData.listData[0].gongshi = allTime1;
                        this.carWorkTimeData.listData[0].xianzhi = allEffic1 ? (100 - parseFloat(allEffic1 / num1)).toFixed(2) : 100;
                        this.carWorkTimeData.listData[1].gongshi = allTime2;
                        this.carWorkTimeData.listData[1].xianzhi = allEffic2 ? (100 - parseFloat(allEffic2 / num2)).toFixed(2) : 100;
                        this.carWorkTimeData.listData[2].gongshi = allTime3;
                        this.carWorkTimeData.listData[2].xianzhi = allEffic3 ? (100 - parseFloat(allEffic3 / num3)).toFixed(2) : 100;
					}
				})
            }
            if(this.carWorkTimeData.selectTimeText == 'year'){
                this.carWorkTimeData.selectTimeDate = this.currentTime.year;
                HttpReq.truckDispatching.apiManmadesCheYearQueryYear({createTime:this.carWorkTimeData.selectTimeDate,size:9999,page:0}).then((res) => {
					if(res.code == 200){
                        let allTime1 = 0;
                        let allEffic1 = 0;
                        let num1 = 0;
                        let allTime2 = 0;
                        let allEffic2 = 0;
                        let num2 = 0;
                        let allTime3 = 0;
                        let allEffic3 = 0;
                        let num3 = 0;
						res.data.forEach((item1,index1)=>{
                            if(item1.carclass == '卡车'){
                                allTime1 = allTime1 +  parseFloat(item1.time);
                                allEffic1 = allEffic1 + (item1.effic ? parseFloat(item1.effic) : 0);
                                num1++;
                            }else if(item1.carclass == '铲车'){
                                allTime2 = allTime2 +  parseFloat(item1.time);
                                allEffic2 = allEffic2 + (item1.effic ? parseFloat(item1.effic) : 0);
                                num2++;
                            }else{
                                allTime3 = allTime3 +  parseFloat(item1.time);
                                allEffic3 = allEffic3 + (item1.effic ? parseFloat(item1.effic) : 0);
                                num3++;
                            }
                        });
                        this.carWorkTimeData.listData[0].gongshi = allTime1;
                        this.carWorkTimeData.listData[0].xianzhi = allEffic1 ? (100 - parseFloat(allEffic1 / num1)).toFixed(2) : 100;
                        this.carWorkTimeData.listData[1].gongshi = allTime2;
                        this.carWorkTimeData.listData[1].xianzhi = allEffic2 ? (100 - parseFloat(allEffic2 / num2)).toFixed(2) : 100;
                        this.carWorkTimeData.listData[2].gongshi = allTime3;
                        this.carWorkTimeData.listData[2].xianzhi = allEffic3 ? (100 - parseFloat(allEffic3 / num3)).toFixed(2) : 100;
					}
				})
            }
        },
        //获取当前时间
		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>