<template>
    <div class="DPcomputer15Box">
        <!-- 其他车动态 -->
        <div class="carManScrView_rightView_title">其他车动态</div>
        <div class="carManScrView_rightView_content">
            <div class="carDynamicTitleStyle">
                <img src="../../../../assets/images/cutGraph/huoche11.png" height="28">
                <div>{{otherCarDynamicListData.number ? otherCarDynamicListData.number : '无'}}</div>
            </div>
            <div class="xuanzekuang1">
                <el-select v-model="xuanzekuangValue" placeholder="请选择" style="width:5vw;" @change="xuanzekuang1Fn()">
                    <el-option v-for="item in otherCarDynamicListData.data" :key="item.number" :label="item.number" :value="item.number"></el-option>
                </el-select>
            </div>
            <div class="otherCarDynamicContent1">
                <div>
                    <div>今日完成量</div>
                    <div class="otherCarDynamicContent1_son1">{{otherCarDynamicListData.rate ? otherCarDynamicListData.rate : 0}}</div>
                </div>
                <div>
                    <div>今日工时/H</div>
                    <div class="otherCarDynamicContent1_son1">{{otherCarDynamicListData.workTime ? otherCarDynamicListData.workTime : 0}}</div>
                </div>
                <div>
                    <div>今日里程/Km</div>
                    <div class="otherCarDynamicContent1_son1">{{otherCarDynamicListData.mil ? otherCarDynamicListData.mil : 0}}</div>
                </div>
            </div>
            <div class="carDynamicContent1">
                <div>
                    <img src="../../../../assets/images/cutGraph/mokuaikaobei4.png">
                    <div>开始工作时间</div>
                    <div>{{otherCarDynamicListData.startTime ? otherCarDynamicListData.startTime : '无'}}</div>
                </div>
                <div>
                    <img src="../../../../assets/images/cutGraph/mokuaikaobei4.png">
                    <div>结束工作时间</div>
                    <div>{{otherCarDynamicListData.endTime ? otherCarDynamicListData.endTime : '无'}}</div>
                </div>
            </div>
            <div class="carDynamicContent2">
                <img src="../../../../assets/images/cutGraph/tuiyuan1.png">
                <div>
                    <div style="color:white;text-align: center;">{{otherCarDynamicListData.loadArea ? otherCarDynamicListData.loadArea : '无'}}</div>
                    <img src="../../../../assets/images/cutGraph/zu2603.png">
                    <div style="color:white;text-align: center;">{{otherCarDynamicListData.unloadArea ? otherCarDynamicListData.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 {
            DPcomputer15BoxTimer:null,
            xuanzekuangValue:'',
            //其他车动态
            otherCarDynamicListData:{
                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 arr1 = [];
                let arr2 = [];
                let arr3 = [];
                if(res.code == 200){
                    res.data.content.forEach((item,index)=>{
                        if(item.carclass == '卡车'){
                            arr1.push(item);
                        }else if(item.carclass == '铲车'){
                            arr2.push(item);
                        }else{
                            arr3.push(item);
                        }
                    })
                }
                this.otherCarDynamicListData.data = arr3;
                this.otherCarDynamicListData.num2 = 0;
                this.qitachedongtai();
                this.DPcomputer15BoxTimer = setInterval(() => {
                    this.qitachedongtai();
                },20000)
            })
        },
        //其他车动态
        qitachedongtai(){
            let num1 =  parseInt(this.otherCarDynamicListData.data.length) - 1;
            //获取车辆实时数据
            if(this.otherCarDynamicListData.num2 <= num1){
                
            }else{
                this.otherCarDynamicListData.num2 = 0;
            }
            if(this.otherCarDynamicListData.data == 0){
                return
            }
            this.otherCarDynamicListData.number = this.otherCarDynamicListData.data[this.otherCarDynamicListData.num2].number;
            HttpReq.truckDispatching.apiManmadesRealQuery1({number:this.otherCarDynamicListData.number}).then((res) => {
                if(res.length != 0){
                    this.otherCarDynamicListData.rate = res[0].carry;
                    this.otherCarDynamicListData.carry = res[0].carry;
                    this.otherCarDynamicListData.workTime = res[0].workTime;
                    this.otherCarDynamicListData.mil = res[0].mil;
                    this.otherCarDynamicListData.startTime = res[0].startTime;
                    this.otherCarDynamicListData.endTime = res[0].endTime;
                    this.otherCarDynamicListData.loadArea = res[0].loadArea;
                    this.otherCarDynamicListData.unloadArea = res[0].unloadArea;
                }else{
                    this.otherCarDynamicListData.rate = 0;
                    this.otherCarDynamicListData.carry = 0;
                    this.otherCarDynamicListData.workTime = 0;
                    this.otherCarDynamicListData.mil = 0;
                    this.otherCarDynamicListData.startTime = '无';
                    this.otherCarDynamicListData.endTime = '无';
                    this.otherCarDynamicListData.loadArea = '无';
                    this.otherCarDynamicListData.unloadArea = '无';
                }
                this.otherCarDynamicListData.num2 = this.otherCarDynamicListData.num2 + 1;
            })
        },
        //切换车牌号
        xuanzekuang1Fn(){
            this.otherCarDynamicListData.number = this.xuanzekuangValue;
            HttpReq.truckDispatching.apiManmadesRealQuery1({number:this.otherCarDynamicListData.number}).then((res) => {
                if(res.length != 0){
                    this.otherCarDynamicListData.rate = res[0].rate;
                    this.otherCarDynamicListData.carry = res[0].carry;
                    this.otherCarDynamicListData.workTime = res[0].workTime;
                    this.otherCarDynamicListData.mil = res[0].mil;
                    this.otherCarDynamicListData.startTime = res[0].startTime;
                    this.otherCarDynamicListData.endTime = res[0].endTime;
                    this.otherCarDynamicListData.loadArea = res[0].loadArea;
                    this.otherCarDynamicListData.unloadArea = res[0].unloadArea;
                }else{
                    this.otherCarDynamicListData.rate = 0;
                    this.otherCarDynamicListData.carry = 0;
                    this.otherCarDynamicListData.workTime = 0;
                    this.otherCarDynamicListData.mil = 0;
                    this.otherCarDynamicListData.startTime = '无';
                    this.otherCarDynamicListData.endTime = '无';
                    this.otherCarDynamicListData.loadArea = '无';
                    this.otherCarDynamicListData.unloadArea = '无';
                }
            })
        },
    },
    beforeDestroy(){
        if(this.DPcomputer15BoxTimer) {
			clearInterval(this.DPcomputer15BoxTimer);
            this.DPcomputer15BoxTimer = null;
		}
    }
}
</script>

<style scoped>
*{
  margin: 0;
  padding: 0;
}
.DPcomputer15Box{
    width: 20vw;
    height: 32vh;
    background-color: rgba(32,42,67,0.95);
    padding: 5px 7px;
    box-sizing: border-box;
    overflow: hidden;
}
.DPcomputer15Box .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;
}
.DPcomputer15Box .carManScrView_rightView_content{
    width: 100%;
    height: 27vh;
    position: relative;
}
.DPcomputer15Box .carDynamicTitleStyle{
    display: flex;
    width: 100%;
    height: 3.5vh;
    align-items: center;
}
.DPcomputer15Box .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;
}
.DPcomputer15Box .otherCarDynamicContent1{
    margin-top: 0.3vh;
    display: flex;
    justify-content: space-between;
    width: 100%;
    height: 9vh;
    font-size: 15px;
}
.DPcomputer15Box .otherCarDynamicContent1>div{
    width: 33%;
    text-align: center;
    color: white;
}
.DPcomputer15Box .otherCarDynamicContent1_son1{
    margin: 0px auto;
    width: 4vw;
    height: 4vw;
    line-height: 4vw;
    font-size: 24px;
    background:no-repeat center center url('~@/assets/images/cutGraph/bilikuang1.png');
	background-size:100% 100%;
}
.DPcomputer15Box .carDynamicContent1{
    width: 100%;
    height: 7vh;
}
.DPcomputer15Box .carDynamicContent1>div{
    color: #06EFFE;
    margin-top: 5px;
    display: flex;
    justify-content: space-around;
    align-items: center;
}
.DPcomputer15Box .carDynamicContent2{
    width: 100%;
    height: 5vh;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0px 10px;
    box-sizing: border-box;
    color: #03BFFD;
}
.DPcomputer15Box .carDynamicContent2>span{
    transform: rotateZ(90deg);
    font-size: 30px;
}
.DPcomputer15Box .xuanzekuang1{
    position: absolute;
    top: 0.1vh;
    left: 3vw;
    opacity: 0;
}
</style>