<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()">
                    <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>今日里程/Km</div>
                    <div class="ForkliftDynamicContent1_son1">{{forkliftkDynamicListData.mil ? forkliftkDynamicListData.mil : 0}}</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();
                },60000)
            })
        },
        //铲车动态
        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;
            HttpReq.truckDispatching.apiManmadesChancheRealQuery1({number:this.forkliftkDynamicListData.number}).then((res) => {
                if(res.data.length != 0){
                    this.forkliftkDynamicListData.rate = res.data[0].carry;
                    this.forkliftkDynamicListData.carry = res.data[0].carry;
                    this.forkliftkDynamicListData.workTime = res.data[0].workTime;
                    this.forkliftkDynamicListData.mil = res.data[0].mil;
                    this.forkliftkDynamicListData.startTime = res.data[0].startTime;
                    this.forkliftkDynamicListData.endTime = res.data[0].endTime;
                    this.forkliftkDynamicListData.loadArea = res.data[0].loadArea;
                    this.forkliftkDynamicListData.unloadArea = res.data[0].unloadArea;
                }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;
            HttpReq.truckDispatching.apiManmadesChancheRealQuery1({number:this.forkliftkDynamicListData.number}).then((res) => {
                if(res.data.length != 0){
                    this.forkliftkDynamicListData.rate = res.data[0].carry;
                    this.forkliftkDynamicListData.carry = res.data[0].carry;
                    this.forkliftkDynamicListData.workTime = res.data[0].workTime;
                    this.forkliftkDynamicListData.mil = res.data[0].mil;
                    this.forkliftkDynamicListData.startTime = res.data[0].startTime;
                    this.forkliftkDynamicListData.endTime = res.data[0].endTime;
                    this.forkliftkDynamicListData.loadArea = res.data[0].loadArea;
                    this.forkliftkDynamicListData.unloadArea = res.data[0].unloadArea;
                }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 = '无';
                }
            })
        },
    },
    beforeDestroy(){
        if(this.DPcomputer14BoxTimer) {
			clearInterval(this.DPcomputer14BoxTimer);
            this.DPcomputer14BoxTimer = null;
		}
    }
}
</script>

<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: 24px;
    background:no-repeat center center url('~@/assets/images/cutGraph/bilikuang.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>