<template>
    <div class="DPcomputer13Box">
        <!-- 卡车动态 -->
        <div class="carManScrView_rightView_title">卡车动态</div>
        <div class="carManScrView_rightView_content">
            <div class="carDynamicTitleStyle">
                <img src="../../../../assets/images/cutGraph/huoche11.png" height="28">
                <div>{{truckDynamicListData.number ? truckDynamicListData.number : '无'}}</div>
            </div>
            <div class="xuanzekuang1">
                <el-select v-model="xuanzekuangValue" placeholder="请选择" style="width:5vw;" @change="xuanzekuang1Fn()">
                    <el-option v-for="item in truckDynamicListData.data" :key="item.number" :label="item.number" :value="item.number"></el-option>
                </el-select>
            </div>
            <div class="truckDynamicContent1">
                <div id="kachedongtaiRateId" class="kachedongtaiRateClass"></div>
                <div style="text-align: center;">
                    <div style="font-size:14px;color:white;">今日运载量</div>
                    <div style="font-size:20px;color:#05F7FC;">{{truckDynamicListData.carry ? truckDynamicListData.carry : 0}}<span style="font-size:14px;">t</span></div>
                    <div style="font-size:14px;color:white;">今日工时</div>
                    <div style="font-size:20px;color:#05F7FC;">{{truckDynamicListData.workTime ? truckDynamicListData.workTime : 0}}<span style="font-size:14px;">h</span></div>
                </div>
                <div style="text-align: center;">
                    <div style="font-size:14px;color:white;">今日完成度</div>
                    <div style="font-size:20px;color:#05F7FC;">{{truckDynamicListData.rate ? truckDynamicListData.rate : 0}}<span style="font-size:14px;">%</span></div>
                    <div style="font-size:14px;color:white;">今日里程</div>
                    <div style="font-size:20px;color:#05F7FC;">{{truckDynamicListData.mil ? truckDynamicListData.mil : 0}}<span style="font-size:14px;">km</span></div>
                </div>
            </div>
            <div class="carDynamicContent1">
                <div>
                    <img src="../../../../assets/images/cutGraph/mokuaikaobei4.png">
                    <div>开始工作时间</div>
                    <div>{{truckDynamicListData.startTime ? truckDynamicListData.startTime : '无'}}</div>
                </div>
                <div>
                    <img src="../../../../assets/images/cutGraph/mokuaikaobei4.png">
                    <div>结束工作时间</div>
                    <div>{{truckDynamicListData.endTime ? truckDynamicListData.endTime : '无'}}</div>
                </div>
            </div>
            <div class="carDynamicContent2">
                <img src="../../../../assets/images/cutGraph/tuiyuan1.png">
                <div>
                    <div style="color:white;text-align: center;">{{truckDynamicListData.loadArea ? truckDynamicListData.loadArea : '无'}}</div>
                    <img src="../../../../assets/images/cutGraph/zu2603.png">
                    <div style="color:white;text-align: center;">{{truckDynamicListData.unloadArea ? truckDynamicListData.unloadArea : '无'}}</div>
                </div>
                <img src="../../../../assets/images/cutGraph/tuiyuan2.png">
            </div>
        </div>
    </div>
</template>

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


export default {
    data(){
        return {
            DPcomputer13BoxTimer:null,
            xuanzekuangValue:'',
            //卡车动态
            truckDynamicListData:{
                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 = [];
                if(res.code == 200){
                    res.data.content.forEach((item,index)=>{
                        if(item.carclass == '卡车'){
                            arr1.push(item);
                        }
                    })
                }
                this.truckDynamicListData.data = arr1;
                this.truckDynamicListData.num2 = 0;
                this.kachedongtai();
                this.DPcomputer13BoxTimer = setInterval(() => {
                    this.kachedongtai();
                },20000)
            })
        },
        //卡车动态
        kachedongtai(){
            let num1 =  parseInt(this.truckDynamicListData.data.length) - 1;
            //获取车辆实时数据
            if(this.truckDynamicListData.num2 <= num1){
                
            }else{
                this.truckDynamicListData.num2 = 0;
            }
            if(this.truckDynamicListData.data == 0){
                return
            }
            this.truckDynamicListData.number = this.truckDynamicListData.data[this.truckDynamicListData.num2].number;
            HttpReq.truckDispatching.apiManmadesRealQuery1({number:this.truckDynamicListData.number}).then((res) => {
                if(res.length != 0){
                    this.truckDynamicListData.rate = res[0].rate;
                    this.truckDynamicListData.carry = res[0].carry;
                    this.truckDynamicListData.workTime = res[0].workTime;
                    this.truckDynamicListData.mil = res[0].mil;
                    this.truckDynamicListData.startTime = res[0].startTime;
                    this.truckDynamicListData.endTime = res[0].endTime;
                    this.truckDynamicListData.loadArea = res[0].loadArea;
                    this.truckDynamicListData.unloadArea = res[0].unloadArea;
                }else{
                    this.truckDynamicListData.rate = 0;
                    this.truckDynamicListData.carry = 0;
                    this.truckDynamicListData.workTime = 0;
                    this.truckDynamicListData.mil = 0;
                    this.truckDynamicListData.startTime = '无';
                    this.truckDynamicListData.endTime = '无';
                    this.truckDynamicListData.loadArea = '无';
                    this.truckDynamicListData.unloadArea = '无';
                }
                this.kachedongtaiEcharts();
                this.truckDynamicListData.num2 = this.truckDynamicListData.num2 + 1;
            })
        },
        kachedongtaiEcharts(){
			var maxValue = 100;//进度条最大值
            echarts.init(document.getElementById('kachedongtaiRateId')).dispose();
			var pipe = echarts.init(document.getElementById('kachedongtaiRateId'));
			var option = {
				//环形中间文字
				graphic: [
					//第一行文字
					//内容 + 位置
					{
						type: 'text',
						left: 'center',
                        top: '30%',
						style: {
							//value当前进度
							text: this.truckDynamicListData.rate ? this.truckDynamicListData.rate + '%' : 0 + '%',
							textAlign: 'center',
							fill: 'white',
							fontSize: 18
						}
					},
					//第二行文字
					//内容 + 位置
					{
						type: 'text',
						left: 'center',
						top: '55%',
						style: {
							//maxValue进度条最大值
							text: '完成度',
							textAlign: 'center',
							fill: 'white',
							fontSize: 14
						}
					}
				],
				series: [{
					type: 'pie',
					radius: ['100%', '80%'],//['外圆大小', '内圆大小']
					center: ['50%', '50%'],//圆心位置['左右'， '上下']
					hoverAnimation: false,//取消鼠标悬停动画
					animationEasing: 'cubicOut',//设置动画缓动效果
					//取消显示饼图自带数据线条
					labelLine: {
						normal: {
							show: false
						}
					},
					//增加阴影效果
					itemStyle: {
						normal: {
							shadowBlur: 200,
							shadowColor: 'rgba(44, 196, 196, 0.8)'
						}
					},
					data: [
					    //value当前进度 + 颜色
					    {
					    	value: this.truckDynamicListData.rate ? (parseFloat(this.truckDynamicListData.rate) > 100 ?  100 : this.truckDynamicListData.rate) : 0, 
					    	itemStyle: {
					    		normal: {
					    			color: 'rgb(2,220,251)'
					    		}
					    	}
					    },
					    //(maxValue进度条最大值 - value当前进度) + 颜色
					    {
					    	value: maxValue - parseInt(this.truckDynamicListData.rate ? (parseFloat(this.truckDynamicListData.rate) > 100 ?  100 : this.truckDynamicListData.rate) : 0), 
					    	itemStyle: {
					    		normal: {
                                    color: 'rgb(0,34,125)'
					    		}
					    	}
					    }
					]
				}]
			};
			pipe.setOption(option);
        },
        //切换车牌号
        xuanzekuang1Fn(){
            this.truckDynamicListData.number = this.xuanzekuangValue;
            HttpReq.truckDispatching.apiManmadesRealQuery1({number:this.truckDynamicListData.number}).then((res) => {
                if(res.length != 0){
                    this.truckDynamicListData.rate = res[0].rate;
                    this.truckDynamicListData.carry = res[0].carry;
                    this.truckDynamicListData.workTime = res[0].workTime;
                    this.truckDynamicListData.mil = res[0].mil;
                    this.truckDynamicListData.startTime = res[0].startTime;
                    this.truckDynamicListData.endTime = res[0].endTime;
                    this.truckDynamicListData.loadArea = res[0].loadArea;
                    this.truckDynamicListData.unloadArea = res[0].unloadArea;
                }else{
                    this.truckDynamicListData.rate = 0;
                    this.truckDynamicListData.carry = 0;
                    this.truckDynamicListData.workTime = 0;
                    this.truckDynamicListData.mil = 0;
                    this.truckDynamicListData.startTime = '无';
                    this.truckDynamicListData.endTime = '无';
                    this.truckDynamicListData.loadArea = '无';
                    this.truckDynamicListData.unloadArea = '无';
                }
                this.kachedongtaiEcharts();
            })
        },
    },
    beforeDestroy(){
        if(this.DPcomputer13BoxTimer) {
			clearInterval(this.DPcomputer13BoxTimer);
            this.DPcomputer13BoxTimer = null;
		}
    }
}
</script>

<style scoped>
*{
  margin: 0;
  padding: 0;
}
.DPcomputer13Box{
    width: 20vw;
    height: 32vh;
    background-color: rgba(32,42,67,0.95);
    padding: 5px 7px;
    box-sizing: border-box;
    overflow: hidden;
}
.DPcomputer13Box .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;
}
.DPcomputer13Box .carManScrView_rightView_content{
    width: 100%;
    height: 27vh;
    position: relative;
}
.DPcomputer13Box .carDynamicTitleStyle{
    display: flex;
    width: 100%;
    height: 3.5vh;
    align-items: center;
}
.DPcomputer13Box .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;
}
.DPcomputer13Box .truckDynamicContent1{
    position: relative;
    margin-top: 1vh;
    display: flex;
    align-items: center;
    font-weight: 600;
    justify-content: space-evenly;
}
.DPcomputer13Box .kachedongtaiRateClass{
    height: 90px;
    width: 90px;
}
.DPcomputer13Box .carDynamicContent1{
    width: 100%;
    height: 7vh;
}
.DPcomputer13Box .carDynamicContent1>div{
    color: #06EFFE;
    margin-top: 5px;
    display: flex;
    justify-content: space-around;
    align-items: center;
}
.DPcomputer13Box .carDynamicContent2{
    width: 100%;
    height: 5vh;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0px 10px;
    box-sizing: border-box;
    color: #03BFFD;
}
.DPcomputer13Box .carDynamicContent2>span{
    transform: rotateZ(90deg);
    font-size: 30px;
}
.DPcomputer13Box .xuanzekuang1{
    position: absolute;
    top: 0.1vh;
    left: 3vw;
    opacity: 0;
}
</style>