<template>
    <div class="DPcomputer18Box">
        <!-- 智能调度信息 -->
        <div class="intelligentSchScrView_rightView_title">智能调度信息</div>
        <div class="intelligentSchScrView_rightView_content">
            <div class="intelligentSchScrView_rightView_content_1_top">
                <div>
                    <img src="../../../../assets/images/cutGraph/zhengzaijinxing1.png">
                    <div style="color:#F8D909;text-align: center;">
                        <div style="font-size:16px;">正在派送中</div>
                        <div style="font-size:22px;">{{dispatchLoadingNum}}</div>
                    </div>
                </div>
                <div>
                    <img src="../../../../assets/images/cutGraph/wanchengle1.png">
                    <div style="color:#01EDF7;text-align: center;">
                        <div style="font-size:16px;">已经完成的</div>
                        <div style="font-size:22px;">{{dispatchFinishNum}}</div>
                    </div>
                </div>
            </div>
            <div class="intelligentSchScrView_rightView_content_1_bottom">
                <div class="intelligentSchScrView_rightView_content_1_bottom_rolling">
                    <div class="table-box">
                        <dl>
                            <dt>
                                <div>车牌号</div>
                                <div>起点</div>
                                <div>调度时间</div>
                                <div>状态</div>
                                <div>目的地</div>
                            </dt>
                            <dd v-for="(item,index) in dispatchDetailsList" :key="index">
                                <div>{{item.carNo}}</div>
                                <div>{{item.startAdr}}</div>
                                <div>{{item.createTime}}</div>
                                <div>{{item.status == 0 ? '接单中' : item.status == 1 ? '已完成' : '未完成'}}</div>
                                <div>{{item.destination}}</div>
                            </dd>
                        </dl>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

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


export default {
    data(){
        return {
            DPcomputer18BoxTimer:null,
            dispatchLoadingNum:0, //智能调度进行中
            dispatchFinishNum:0, //智能调度已完成
            dispatchDetailsList:[], //智能调度情况表
        }
    },
    mounted(){
        this.loadData();
    },
    methods:{
        loadData(){
            //智能调度情况
            HttpReq.truckDispatching.getLargeScreen1({size:100,sort:'createTime,desc'}).then((res) => {
                this.dispatchDetailsList = res;
            })
            //获取智能调度情况中的进行中数量
            HttpReq.truckDispatching.getLargeScreenUnder1({size:9999}).then((res) => {
                if(res.length == 0){
                    this.dispatchLoadingNum = 0;
                }else{
                    this.dispatchLoadingNum = res[0].under;
                }
            })
            //获取智能调度情况中的已完成数量
            HttpReq.truckDispatching.getLargeScreenRound1({size:9999}).then((res) => {
                if(res.length == 0){
                    this.dispatchFinishNum = 0;
                }else{
                    this.dispatchFinishNum = res[0].round;
                }
            })

            this.DPcomputer18BoxTimer = setInterval(() => {
                //智能调度情况
                HttpReq.truckDispatching.getLargeScreen1({size:100,sort:'createTime,desc'}).then((res) => {
                    this.dispatchDetailsList = res;
                })
                //获取智能调度情况中的进行中数量
                HttpReq.truckDispatching.getLargeScreenUnder1({size:9999}).then((res) => {
                    if(res.length == 0){
                        this.dispatchLoadingNum = 0;
                    }else{
                        this.dispatchLoadingNum = res[0].under;
                    }
                })
                //获取智能调度情况中的已完成数量
                HttpReq.truckDispatching.getLargeScreenRound1({size:9999}).then((res) => {
                    if(res.length == 0){
                        this.dispatchFinishNum = 0;
                    }else{
                        this.dispatchFinishNum = res[0].round;
                    }
                })
            }, 10000)

        },
    },
    beforeDestroy(){
        if(this.DPcomputer18BoxTimer) {
			clearInterval(this.DPcomputer18BoxTimer);
            this.DPcomputer18BoxTimer = null;
		}
    }
}
</script>

<style scoped>
*{
  margin: 0;
  padding: 0;
}
.DPcomputer18Box{
    width: 20vw;
    height: 32vh;
    background-color: rgba(32,42,67,0.95);
    padding: 5px 7px;
    box-sizing: border-box;
    overflow: hidden;
}
.DPcomputer18Box .intelligentSchScrView_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;
}
.DPcomputer18Box .intelligentSchScrView_rightView_content{
    width: 100%;
}
.DPcomputer18Box .intelligentSchScrView_rightView_content_1_top{
    width: 100%;
    display: flex;
    justify-content: space-between;
}
.DPcomputer18Box .intelligentSchScrView_rightView_content_1_top>div{
    width: 49%;
    height: 6vh;
    background:no-repeat center center url('~@/assets/images/cutGraph/sijirenshu1.png');
	background-size:100% 100%;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
}
.DPcomputer18Box .intelligentSchScrView_rightView_content_1_bottom{
    width: 100%;
    height: 21.5vh;
}
.DPcomputer18Box .intelligentSchScrView_rightView_content_1_bottom_rolling{
    text-align: center;
	height: 21.5vh;
	overflow-y:auto;
    scrollbar-width: none;
}
.DPcomputer18Box .intelligentSchScrView_rightView_content_1_bottom_rolling::-webkit-scrollbar {
    display: none;
}
.DPcomputer18Box dl{
	display:table;
	width:100%;
}
.DPcomputer18Box dt{
	margin-top: 20px;
	display:table-row;
	background-color: #274088;
}
.DPcomputer18Box dt>div{
	display:table-cell;
	padding:5px 3px;
	font-size: 16px;
	font-weight: 500;
	color: rgb(24,228,240);
}
.DPcomputer18Box dd{
	display:table-row;
}
.DPcomputer18Box dd>div{
	display:table-cell;
    vertical-align: middle;
	padding:5px 1px;
	font-size: 13px;
	color: #A6F6F9;
}
</style>