<template>
    <div class="carManScrView" v-if="whetherShow">

        <div class="carManScrView_leftView">
            <!-- 车辆运行状况 -->
            <div>
                <div class="carManScrView_leftView_title">车辆运行状况</div>
                <div class="carManScrView_leftView_content" style="position: relative;">
                    <div style="width:100%;height: 1.5vh;display: flex;font-size: 15px;justify-content: right;align-items: center;">
                        <div style="width:1.5vh;height: 1.5vh;background-color: #14F3C5;margin-right: 10px;border-radius: 2px;"></div>
                        <div style="color:#A6F6F9;margin-right: 10px;">车辆离线</div>
                        <div style="width:1.5vh;height: 1.5vh;background-color: #2195FD;margin-right: 10px;border-radius: 2px;"></div>
                        <div style="color:#A6F6F9;margin-right: 10px;">车辆在线</div>
                    </div>
                    <div>
                        <div style="margin-top:5px;">
                            <span style="color:#02F7EF;margin-left: 4vw;">{{carWorkingStateData.kacheonline}}</span>
                            <span style="color:#2195FD;margin-left: 13vw;">{{carWorkingStateData.kacheoffline}}</span>
                        </div>
                        <div style="display: flex;">
                            <div style="color:#A6F6F9;font-size: 15px;">卡车状态</div>
                            <div style="display: flex;width: 80%;margin-left: 0.5vw;border: #02F7EF 0.5px solid;border-radius: 3px;">
                                <div :style="'height:1.7vh;border-top-left-radius: 3px;border-bottom-left-radius: 3px;background-color: #14F3C5;width:' + (carWorkingStateData.kacheonline/(carWorkingStateData.kacheonline + carWorkingStateData.kacheoffline)) * 100  + '%;'"></div>
                                <div :style="'height:1.7vh;border-top-right-radius: 3px;border-bottom-right-radius: 3px;background-color: #2195FD;width:' + (carWorkingStateData.kacheoffline/(carWorkingStateData.kacheonline + carWorkingStateData.kacheoffline)) * 100  + '%;'"></div>
                            </div>
                        </div>
                    </div>
                    <div>
                        <div style="margin-top:5px;">
                            <span style="color:#02F7EF;margin-left: 4vw;">{{carWorkingStateData.chancheonline}}</span>
                            <span style="color:#2195FD;margin-left: 13vw;">{{carWorkingStateData.chancheoffline}}</span>
                        </div>
                        <div style="display: flex;">
                            <div style="color:#A6F6F9;font-size: 15px;">铲车状态</div>
                            <div style="display: flex;width: 80%;margin-left: 0.5vw;border: #02F7EF 0.5px solid;border-radius: 3px;">
                                <div :style="'height:1.7vh;border-top-left-radius: 3px;border-bottom-left-radius: 3px;background-color: #14F3C5;width:' + (carWorkingStateData.chancheonline/(carWorkingStateData.chancheonline + carWorkingStateData.chancheoffline)) * 100  + '%;'"></div>
                                <div :style="'height:1.7vh;border-top-right-radius: 3px;border-bottom-right-radius: 3px;background-color: #2195FD;width:' + (carWorkingStateData.chancheoffline/(carWorkingStateData.chancheonline + carWorkingStateData.chancheoffline)) * 100  + '%;'"></div>
                            </div>
                        </div>
                    </div>
                    <div>
                        <div style="margin-top:5px;">
                            <span style="color:#02F7EF;margin-left: 4vw;">{{carWorkingStateData.qitacheonline}}</span>
                            <span style="color:#2195FD;margin-left: 13vw;">{{carWorkingStateData.qitacheoffline}}</span>
                        </div>
                        <div style="display: flex;">
                            <div style="color:#A6F6F9;font-size: 15px;">其他车辆</div>
                            <div style="display: flex;width: 80%;margin-left: 0.5vw;border: #02F7EF 0.5px solid;border-radius: 3px;">
                                <div :style="'height:1.7vh;border-top-left-radius: 3px;border-bottom-left-radius: 3px;background-color: #14F3C5;width:' + (carWorkingStateData.qitacheonline/(carWorkingStateData.qitacheonline + carWorkingStateData.qitacheoffline)) * 100  + '%;'"></div>
                                <div :style="'height:1.7vh;border-top-right-radius: 3px;border-bottom-right-radius: 3px;background-color: #2195FD;width:' + (carWorkingStateData.qitacheoffline/(carWorkingStateData.qitacheonline + carWorkingStateData.qitacheoffline)) * 100  + '%;'"></div>
                            </div>
                        </div>
                    </div>
                    <div ref="chartPanel" id="chart-panel" style="width:100%;height: 12vh;"></div>
                </div>
            </div>
            <!-- 卡车排行榜-->
            <div>
                <div class="carManScrView_leftView_title truck_titleStyle">
                    <div>卡车排行榜</div>
                    <div class="driverTitleDateStyle">
                        <div :class="truckRankListData.selectTimeText == 'day' ? 'driverTitleDateStyle_son1' : 'driverTitleDateStyle_son2' " @click="truckChangeTime('day')">日</div>
                        <div :class="truckRankListData.selectTimeText == 'week' ? 'driverTitleDateStyle_son1' : 'driverTitleDateStyle_son2' " @click="truckChangeTime('week')">周</div>
                        <div :class="truckRankListData.selectTimeText == 'month' ? 'driverTitleDateStyle_son1' : 'driverTitleDateStyle_son2' " @click="truckChangeTime('month')">月</div>
                    </div>
                </div>
                <div class="carManScrView_leftView_content">
                    <div class="carManScrView_leftView_content_views2">
                        <div :class="truckRankListData.selectFieldText == 'juli' ? '' : 'selectFieldStyle' "  @click="truckChangeField('juli')">运输距离</div>
                        <div :class="truckRankListData.selectFieldText == 'time' ? '' : 'selectFieldStyle' "  @click="truckChangeField('time')">工作时长</div>
                        <div :class="truckRankListData.selectFieldText == 'zcar' ? '' : 'selectFieldStyle' "  @click="truckChangeField('zcar')">运载量</div>
                        <div :class="truckRankListData.selectFieldText == 'waiting' ? '' : 'selectFieldStyle' "  @click="truckChangeField('waiting')">接单数</div>
                    </div>
                    <div class="carManScrView_leftView_content_views3" id="carManScrView_leftView_content_views3_1"></div>
                </div>
            </div>
            <!-- 铲车排行榜-->
            <div>
                <div class="carManScrView_leftView_title truck_titleStyle">
                    <div>铲车排行榜</div>
                    <div class="driverTitleDateStyle">
                        <div :class="forkLiftRankListData.selectTimeText == 'day' ? 'driverTitleDateStyle_son1' : 'driverTitleDateStyle_son2' " @click="forkLiftChangeTime('day')">日</div>
                        <div :class="forkLiftRankListData.selectTimeText == 'week' ? 'driverTitleDateStyle_son1' : 'driverTitleDateStyle_son2' " @click="forkLiftChangeTime('week')">周</div>
                        <div :class="forkLiftRankListData.selectTimeText == 'month' ? 'driverTitleDateStyle_son1' : 'driverTitleDateStyle_son2' " @click="forkLiftChangeTime('month')">月</div>
                    </div>
                </div>
                <div class="carManScrView_leftView_content">
                    <div class="carManScrView_leftView_content_views2">
                        <div :class="forkLiftRankListData.selectFieldText == 'time' ? '' : 'selectFieldStyle' "  @click="forkLiftChangeField('time')">工作时长</div>
                        <div :class="forkLiftRankListData.selectFieldText == 'average' ? '' : 'selectFieldStyle' "  @click="forkLiftChangeField('average')">平均时长</div>
                        <div :class="forkLiftRankListData.selectFieldText == 'zcar' ? '' : 'selectFieldStyle' "  @click="forkLiftChangeField('zcar')">装车量</div>
                        <div :class="forkLiftRankListData.selectFieldText == 'waiting' ? '' : 'selectFieldStyle' "  @click="forkLiftChangeField('waiting')">装车数</div>
                    </div>
                    <div class="carManScrView_leftView_content_views3" v-if="forkLiftRankListData.selectFieldText == 'time'">
                        <div v-for="(item,index) in forkLiftRankListData.listData" :key="index" :class="'forkliftRankTwo' + (index + 1)">
                            <div style="color:#BCF0FE;">{{item.number}}</div>
                            <div style="color:#1AC9FF;">{{item.time}}H</div>
                            <div style="color:#BCF0FE;">{{item.createTime}}</div>
                        </div>
                    </div>
                    <div class="carManScrView_leftView_content_views3" v-if="forkLiftRankListData.selectFieldText == 'average'">
                        <div v-for="(item,index) in forkLiftRankListData.listData" :key="index" :class="'forkliftRankTwo' + (index + 1)">
                            <div style="color:#BCF0FE;">{{item.number}}</div>
                            <div style="color:#1AC9FF;">{{item.average}}H</div>
                            <div style="color:#BCF0FE;">{{item.createTime}}</div>
                        </div>
                    </div>
                    <div class="carManScrView_leftView_content_views3" v-if="forkLiftRankListData.selectFieldText == 'zcar'">
                        <div v-for="(item,index) in forkLiftRankListData.listData" :key="index" :class="'forkliftRankTwo' + (index + 1)">
                            <div style="color:#BCF0FE;">{{item.number}}</div>
                            <div style="color:#1AC9FF;">{{item.zcar}}吨</div>
                            <div style="color:#BCF0FE;">{{item.createTime}}</div>
                        </div>
                    </div>
                    <div class="carManScrView_leftView_content_views3" v-if="forkLiftRankListData.selectFieldText == 'waiting'">
                        <div v-for="(item,index) in forkLiftRankListData.listData" :key="index" :class="'forkliftRankTwo' + (index + 1)">
                            <div style="color:#BCF0FE;">{{item.number}}</div>
                            <div style="color:#1AC9FF;">{{item.waiting}}辆</div>
                            <div style="color:#BCF0FE;">{{item.createTime}}</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="carManScrView_rightView">
            <!-- 卡车动态 -->
            <div>
                <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="truckDynamicContent1">
                        <div class="truckDynamicRateStyle">
                            <div style="color:white;font-size:19px;">{{truckDynamicListData.rate ? truckDynamicListData.rate : 0}}%</div>
                            <div style="color:white;font-size:15px;">完成度</div>
                        </div>
                        <el-progress type="circle" :percentage="parseInt(truckDynamicListData.rate ? truckDynamicListData.rate : 0)" :color="'#2B91E2'" :stroke-width="10" :width="90" :height="90" :show-text='false'></el-progress>
                        <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.mileage ? truckDynamicListData.mileage : 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>
            <!-- 铲车动态-->
            <div>
                <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="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.mileage ? forkliftkDynamicListData.mileage : 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>
            <!-- 其他车动态 -->
            <div>
                <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="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.mileage ? otherCarDynamicListData.mileage : 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>
        </div>

    </div>
</template>

<script>
import { Tools, HttpReq, Dates} from '@/assets/js/common.js';
import * as echarts from 'echarts';
import "echarts-gl";
import { getPie3D } from "../../../components/echarts/bingtu3d";

export default {
    data() {
		return {
			whetherShow:false,
            carDongTaiQieHuanTimer:null,
            //时间
            currentTime:{
                day:'',
                month:'',
                year:'',
            },
            //车辆运行状况
            carWorkingStateData:{
                kacheonline:0,
                kacheoffline:0,
                chancheonline:0,
                chancheoffline:0,
                qitacheonline:0,
                qitacheoffline:0,
                optionData: [
                    {
                        name: "卡车",
                        value: 0,
                        itemStyle: {
                            opacity: 0.2,
                            color: "#8FDFFE",
                        },
                    },
                    {
                        name: "铲车",
                        value: 0,
                        itemStyle: {
                            opacity: 0.2,
                            color: "#00A8FF",
                        },
                    }
                ],
            },
            //卡车排行榜
            truckRankListData:{
                echartsX:'Km',
                carclass:'卡车',
                selectTimeText:'day',
                selectFieldText:'juli',
                driverName:[],
                driverSeriesData:[],
                driverName1:['kfdfdf','dsdsd1','dsdsd55'],
                driverSeriesData1:[20,50,10],
            },
            //铲车排行榜
            forkLiftRankListData:{
                carclass:'铲车',
                selectTimeText:'day',
                selectFieldText:'time',
                listData:[],
            },
            //卡车动态
            truckDynamicListData:{
                data:[],
                num2:0,
                number:'无',
                rate:0,
                carry:0,
                workTime:0,
                mileage:0,
                startTime:'无',
                endTime:'无',
                loadArea:'无',
                unloadArea:'无',
            },
            //铲车动态
            forkliftkDynamicListData:{
                data:[],
                num2:0,
                number:'无',
                rate:0,
                workTime:0,
                mileage:0,
                startTime:'无',
                endTime:'无',
                loadArea:'无',
                unloadArea:'无',
            },
            //其他车动态
            otherCarDynamicListData:{
                data:[],
                num2:0,
                number:'无',
                rate:0,
                workTime:0,
                mileage:0,
                startTime:'无',
                endTime:'无',
                loadArea:'无',
                unloadArea:'无',
            },
		}
	},
	methods: {
		loadData(text){
            if(text == true){
                this.whetherShow = true;
                this.dayCurrentTimeFn();
                this.monthCurrentTimeFn();
                this.yearCurrentTimeFn();

                this.$nextTick(()=>{
                    //获取车辆运行状况
                    HttpReq.truckDispatching.carInformationQuery({size:9999}).then((res) => {
                        let kache1 = [];
                        let kachezaixian = [];
                        let kachelixian = [];
                        let dianchan1 = [];
                        let dianchanzaixian = [];
                        let dianchanlixian = [];
                        let qitache1 = [];
                        let qitachezaixian = [];
                        let qitachelixian = [];
                        if(res.code == 200){
                            res.data.content.forEach((item)=>{
                                if(item.carclass == '卡车'){
                                    kache1.push(item);
                                }else if(item.carclass == '铲车'){
                                    dianchan1.push(item);
                                }else{
                                    qitache1.push(item);
                                }
                            })
                            this.carWorkingStateData.optionData[0].value = kache1.length;
                            this.carWorkingStateData.optionData[1].value = dianchan1.length;
                            kache1.forEach((item)=>{
                                if(item.status == 1){
                                    kachezaixian.push(item);
                                }else{
                                    kachelixian.push(item);
                                }
                            })
                            dianchan1.forEach((item)=>{
                                if(item.status == 1){
                                    dianchanzaixian.push(item);
                                }else{
                                    dianchanlixian.push(item);
                                }
                            })
                            qitache1.forEach((item)=>{
                                if(item.status == 1){
                                    qitachezaixian.push(item);
                                }else{
                                    qitachelixian.push(item);
                                }
                            })
                            this.carWorkingStateData.kacheonline = kachezaixian.length;
                            this.carWorkingStateData.chancheonline = dianchanzaixian.length;
                            this.carWorkingStateData.qitacheonline = qitachezaixian.length;
                            this.carWorkingStateData.kacheoffline = kachelixian.length;
                            this.carWorkingStateData.chancheoffline = dianchanlixian.length;
                            this.carWorkingStateData.qitacheoffline = qitachelixian.length;
                            this.draw3d();
                            this.$nextTick(() => {
                                let parent = document.getElementById("chart-panel"); // 获取父元素
                                let canvas = parent.getElementsByTagName("canvas"); // 获取父元素下面的所有canvas元素
                                canvas[1].style.transform = "rotateX(30deg)";
                            });
                        }
                    })
                    //获取卡车排行榜
                    let truckQuery1 = {};
                    truckQuery1.size = 7;
                    truckQuery1.sort = this.truckRankListData.selectFieldText + ',desc';
                    truckQuery1.carclass = this.truckRankListData.carclass;
                    this.$nextTick(()=>{
                        if(this.truckRankListData.selectTimeText == 'day'){
                            HttpReq.truckDispatching.apiManmadesDay1Query(truckQuery1).then((res) => {
                                let arr1 = [];
                                let arr2 = [];
                                res.forEach((item,index)=>{
                                    arr1.push(item.number);
                                    arr2.push(item[this.truckRankListData.selectFieldText]);
                                })
                                this.truckRankListData.driverName = arr1.reverse();
                                this.truckRankListData.driverSeriesData = arr2.reverse();
                                this.truckChangeEcharts();
                            })
                        }else if(this.truckRankListData.selectTimeText == 'week'){
                            HttpReq.truckDispatching.apiManmadesZhou1Query(truckQuery1).then((res) => {
                                let arr1 = [];
                                let arr2 = [];
                                res.forEach((item,index)=>{
                                    arr1.push(item.number);
                                    arr2.push(item[this.truckRankListData.selectFieldText]);
                                })
                                this.truckRankListData.driverName = arr1.reverse();
                                this.truckRankListData.driverSeriesData = arr2.reverse();
                                this.truckChangeEcharts();
                            })
                        }else if(this.truckRankListData.selectTimeText == 'month'){
                            HttpReq.truckDispatching.apiManmadesMou1Query(truckQuery1).then((res) => {
                                let arr1 = [];
                                let arr2 = [];
                                res.forEach((item,index)=>{
                                    arr1.push(item.number);
                                    arr2.push(item[this.truckRankListData.selectFieldText]);
                                })
                                this.truckRankListData.driverName = arr1.reverse();
                                this.truckRankListData.driverSeriesData = arr2.reverse();
                                this.truckChangeEcharts();
                            })
                        }
                    })
                    //获取铲车排行榜
                    let forkLiftQuery1 = {};
                    forkLiftQuery1.size = 5;
                    forkLiftQuery1.sort = this.forkLiftRankListData.selectFieldText + ',desc';
                    forkLiftQuery1.carclass = this.forkLiftRankListData.carclass;
                    this.$nextTick(()=>{
                        if(this.forkLiftRankListData.selectTimeText == 'day'){
                            HttpReq.truckDispatching.apiManmadesDay1Query(forkLiftQuery1).then((res) => {
                                this.forkLiftRankListData.listData = res;
                            })
                        }else if(this.forkLiftRankListData.selectTimeText == 'week'){
                            HttpReq.truckDispatching.apiManmadesZhou1Query(forkLiftQuery1).then((res) => {
                                this.forkLiftRankListData.listData = res;
                            })
                        }else if(this.forkLiftRankListData.selectTimeText == 'month'){
                            HttpReq.truckDispatching.apiManmadesMou1Query(forkLiftQuery1).then((res) => {
                                this.forkLiftRankListData.listData = res;
                            })
                        }
                    })
                    //获取车辆信息
                    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.truckDynamicListData.data = arr1;
                        this.truckDynamicListData.num2 = 0;
                        this.forkliftkDynamicListData.data = arr2;
                        this.forkliftkDynamicListData.num2 = 0;
                        this.otherCarDynamicListData.data = arr3;
                        this.otherCarDynamicListData.num2 = 0;
                        this.kachedongtai();
                        this.dianchandongtai();
                        this.qitachedongtai();
                        this.carDongTaiQieHuanTimer = setInterval(() => {
                            this.kachedongtai();
                            this.dianchandongtai();
                            this.qitachedongtai();
                            //获取车辆运行状况
                            HttpReq.truckDispatching.carInformationQuery({size:9999}).then((res) => {
                                let kache1 = [];
                                let kachezaixian = [];
                                let kachelixian = [];
                                let dianchan1 = [];
                                let dianchanzaixian = [];
                                let dianchanlixian = [];
                                let qitache1 = [];
                                let qitachezaixian = [];
                                let qitachelixian = [];
                                if(res.code == 200){
                                    res.data.content.forEach((item)=>{
                                        if(item.carclass == '卡车'){
                                            kache1.push(item);
                                        }else if(item.carclass == '铲车'){
                                            dianchan1.push(item);
                                        }else{
                                            qitache1.push(item);
                                        }
                                    })
                                    this.carWorkingStateData.optionData[0].value = kache1.length;
                                    this.carWorkingStateData.optionData[1].value = dianchan1.length;
                                    kache1.forEach((item)=>{
                                        if(item.status == 1){
                                            kachezaixian.push(item);
                                        }else{
                                            kachelixian.push(item);
                                        }
                                    })
                                    dianchan1.forEach((item)=>{
                                        if(item.status == 1){
                                            dianchanzaixian.push(item);
                                        }else{
                                            dianchanlixian.push(item);
                                        }
                                    })
                                    qitache1.forEach((item)=>{
                                        if(item.status == 1){
                                            qitachezaixian.push(item);
                                        }else{
                                            qitachelixian.push(item);
                                        }
                                    })
                                    this.carWorkingStateData.kacheonline = kachezaixian.length;
                                    this.carWorkingStateData.chancheonline = dianchanzaixian.length;
                                    this.carWorkingStateData.qitacheonline = qitachezaixian.length;
                                    this.carWorkingStateData.kacheoffline = kachelixian.length;
                                    this.carWorkingStateData.chancheoffline = dianchanlixian.length;
                                    this.carWorkingStateData.qitacheoffline = qitachelixian.length;
                                    this.draw3d();
                                    this.$nextTick(() => {
                                        let parent = document.getElementById("chart-panel"); // 获取父元素
                                        let canvas = parent.getElementsByTagName("canvas"); // 获取父元素下面的所有canvas元素
                                        canvas[1].style.transform = "rotateX(30deg)";
                                    });
                                }
                            })
                            //获取卡车排行榜
                            let truckQuery1 = {};
                            truckQuery1.size = 7;
                            truckQuery1.sort = this.truckRankListData.selectFieldText + ',desc';
                            truckQuery1.carclass = this.truckRankListData.carclass;
                            this.$nextTick(()=>{
                                if(this.truckRankListData.selectTimeText == 'day'){
                                    HttpReq.truckDispatching.apiManmadesDay1Query(truckQuery1).then((res) => {
                                        let arr1 = [];
                                        let arr2 = [];
                                        res.forEach((item,index)=>{
                                            arr1.push(item.number);
                                            arr2.push(item[this.truckRankListData.selectFieldText]);
                                        })
                                        this.truckRankListData.driverName = arr1.reverse();
                                        this.truckRankListData.driverSeriesData = arr2.reverse();
                                        this.truckChangeEcharts();
                                    })
                                }else if(this.truckRankListData.selectTimeText == 'week'){
                                    HttpReq.truckDispatching.apiManmadesZhou1Query(truckQuery1).then((res) => {
                                        let arr1 = [];
                                        let arr2 = [];
                                        res.forEach((item,index)=>{
                                            arr1.push(item.number);
                                            arr2.push(item[this.truckRankListData.selectFieldText]);
                                        })
                                        this.truckRankListData.driverName = arr1.reverse();
                                        this.truckRankListData.driverSeriesData = arr2.reverse();
                                        this.truckChangeEcharts();
                                    })
                                }else if(this.truckRankListData.selectTimeText == 'month'){
                                    HttpReq.truckDispatching.apiManmadesMou1Query(truckQuery1).then((res) => {
                                        let arr1 = [];
                                        let arr2 = [];
                                        res.forEach((item,index)=>{
                                            arr1.push(item.number);
                                            arr2.push(item[this.truckRankListData.selectFieldText]);
                                        })
                                        this.truckRankListData.driverName = arr1.reverse();
                                        this.truckRankListData.driverSeriesData = arr2.reverse();
                                        this.truckChangeEcharts();
                                    })
                                }
                            })
                            //获取铲车排行榜
                            let forkLiftQuery1 = {};
                            forkLiftQuery1.size = 5;
                            forkLiftQuery1.sort = this.forkLiftRankListData.selectFieldText + ',desc';
                            forkLiftQuery1.carclass = this.forkLiftRankListData.carclass;
                            this.$nextTick(()=>{
                                if(this.forkLiftRankListData.selectTimeText == 'day'){
                                    HttpReq.truckDispatching.apiManmadesDay1Query(forkLiftQuery1).then((res) => {
                                        this.forkLiftRankListData.listData = res;
                                    })
                                }else if(this.forkLiftRankListData.selectTimeText == 'week'){
                                    HttpReq.truckDispatching.apiManmadesZhou1Query(forkLiftQuery1).then((res) => {
                                        this.forkLiftRankListData.listData = res;
                                    })
                                }else if(this.forkLiftRankListData.selectTimeText == 'month'){
                                    HttpReq.truckDispatching.apiManmadesMou1Query(forkLiftQuery1).then((res) => {
                                        this.forkLiftRankListData.listData = res;
                                    })
                                }
                            })

                        }, 20000)
                    }) 
                })
            }else{
                if(this.carDongTaiQieHuanTimer) {
                    clearInterval(this.carDongTaiQieHuanTimer);
                }
                this.whetherShow = false;
            }
            
        },
        //车辆运行状况
        draw3d() {
            // 基于准备好的dom，初始化echarts实例
            echarts.init(document.getElementById('chart-panel')).dispose();
            let chartPanel = echarts.init(document.getElementById("chart-panel"));
            for (let i = 0; i < this.carWorkingStateData.optionData.length; i++) {
                delete this.carWorkingStateData.optionData[i].itemStyle.opacity;
            }
            // 传入数据生成 option
            let series = getPie3D(this.carWorkingStateData.optionData, 0);  
            let option = {
                tooltip: {
                formatter: (params) => {
                    // console.log(params)
                    if (
                    params.seriesName !== "mouseoutSeries" &&
                    params.seriesName !== "pie2d"
                    ) {
                    return `<div style="padding:0 0px">${params.seriesName}：${(
                        option.series[params.seriesIndex].pieData.proportion * 100
                    ).toFixed(2)}%</div>`;
                    }
                },
                },
                xAxis3D: {
                min: -1,
                max: 1,
                },
                yAxis3D: {
                min: -1,
                max: 1,
                },
                zAxis3D: {
                min: -1,
                max: 1,
                },
                grid3D: {
                show: false, //是否显示三维笛卡尔坐标系。
                boxHeight: 20, //三维笛卡尔坐标系在三维场景中的高度
                top: "1%",
                // bottom: "80%",
                // environment: "#021041", //背景
                viewControl: {
                    //用于鼠标的旋转，缩放等视角控制
                    alpha: 25, //角度
                    distance: 200, //调整视角到主体的距离，类似调整zoom 重要
                    rotateSensitivity: 0, //设置为0无法旋转
                    zoomSensitivity: 0, //设置为0无法缩放
                    panSensitivity: 0, //设置为0无法平移
                    autoRotate: false, //自动旋转
                },
                },
                series: series,
            };
            chartPanel.setOption(option);

            //是否需要label指引线，如果要就添加一个透明的2d饼状图并调整角度使得labelLine和3d的饼状图对齐，并再次setOption
            option.series.push({
                name: "pie2d",
                type: "pie",
                label: {
                color: "#00D7E9",
                fontSize: 16,
                //  position: 'inner',
                // formatter: "{b}\n\n",
                // padding: [0, -40],
                formatter: (item) => {
                    //  console.log(item)
                    return item.data.name + ":" + item.data.value + "辆" + "";
                },
                },
                labelLine: {
                length: 50,
                length2: 30,
                lineStyle: {
                    color: "#ffffff",
                    width: 1.5,
                },
                },
                startAngle: 10, //起始角度，支持范围[0, 360]。 //重要
                clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
                radius: ["50%", "50%"],
                center: ["50%", "50%"],
                data: this.carWorkingStateData.optionData,
                itemStyle: {
                opacity: 0,
                },
                top: "15%",
                avoidLabelOverlap: true, //防止标签重叠
            });
            chartPanel.setOption(option);
        },
        //卡车切换时间
        truckChangeTime(text){
            this.truckRankListData.selectTimeText = text;
            let truckQuery1 = {};
            truckQuery1.size = 7;
            truckQuery1.sort = this.truckRankListData.selectFieldText + ',desc';
            truckQuery1.carclass = this.truckRankListData.carclass;
            if(text == 'day'){
                HttpReq.truckDispatching.apiManmadesDay1Query(truckQuery1).then((res) => {
                    let arr1 = [];
                    let arr2 = [];
                    res.forEach((item,index)=>{
                        arr1.push(item.number);
                        arr2.push(item[this.truckRankListData.selectFieldText]);
                    })
                    this.truckRankListData.driverName = arr1.reverse();
                    this.truckRankListData.driverSeriesData = arr2.reverse();
                    this.truckChangeEcharts();
                })
            }else if(text == 'week'){
                HttpReq.truckDispatching.apiManmadesZhou1Query(truckQuery1).then((res) => {
                    let arr1 = [];
                    let arr2 = [];
                    res.forEach((item,index)=>{
                        arr1.push(item.number);
                        arr2.push(item[this.truckRankListData.selectFieldText]);
                    })
                    this.truckRankListData.driverName = arr1.reverse();
                    this.truckRankListData.driverSeriesData = arr2.reverse();
                    this.truckChangeEcharts();
                })
            }else if(text == 'month'){
                HttpReq.truckDispatching.apiManmadesMou1Query(truckQuery1).then((res) => {
                    let arr1 = [];
                    let arr2 = [];
                    res.forEach((item,index)=>{
                        arr1.push(item.number);
                        arr2.push(item[this.truckRankListData.selectFieldText]);
                    })
                    this.truckRankListData.driverName = arr1.reverse();
                    this.truckRankListData.driverSeriesData = arr2.reverse();
                    this.truckChangeEcharts();
                })
            }
        },
        //卡车切换字段排序
        truckChangeField(text){
            this.truckRankListData.selectFieldText = text;
            let truckQuery1 = {};
            truckQuery1.size = 7;
            truckQuery1.sort = this.truckRankListData.selectFieldText + ',desc';
            truckQuery1.carclass = this.truckRankListData.carclass;
            if(text == 'juli'){
                this.truckRankListData.echartsX = 'km';
            }else if(text == 'time'){
                this.truckRankListData.echartsX = 'H';
            }else if(text == 'zcar'){
                this.truckRankListData.echartsX = '吨';
            }else if(text == 'waiting'){
                this.truckRankListData.echartsX = '次';
            }
            this.$nextTick(()=>{
                if(this.truckRankListData.selectTimeText == 'day'){
                    HttpReq.truckDispatching.apiManmadesDay1Query(truckQuery1).then((res) => {
                        let arr1 = [];
                        let arr2 = [];
                        res.forEach((item,index)=>{
                            arr1.push(item.number);
                            arr2.push(item[this.truckRankListData.selectFieldText]);
                        })
                        this.truckRankListData.driverName = arr1.reverse();
                        this.truckRankListData.driverSeriesData = arr2.reverse();
                        this.truckChangeEcharts();
                    })
                }else if(this.truckRankListData.selectTimeText == 'week'){
                    HttpReq.truckDispatching.apiManmadesZhou1Query(truckQuery1).then((res) => {
                        let arr1 = [];
                        let arr2 = [];
                        res.forEach((item,index)=>{
                            arr1.push(item.number);
                            arr2.push(item[this.truckRankListData.selectFieldText]);
                        })
                        this.truckRankListData.driverName = arr1.reverse();
                        this.truckRankListData.driverSeriesData = arr2.reverse();
                        this.truckChangeEcharts();
                    })
                }else if(this.truckRankListData.selectTimeText == 'month'){
                    HttpReq.truckDispatching.apiManmadesMou1Query(truckQuery1).then((res) => {
                        let arr1 = [];
                        let arr2 = [];
                        res.forEach((item,index)=>{
                            arr1.push(item.number);
                            arr2.push(item[this.truckRankListData.selectFieldText]);
                        })
                        this.truckRankListData.driverName = arr1.reverse();
                        this.truckRankListData.driverSeriesData = arr2.reverse();
                        this.truckChangeEcharts();
                    })
                }
            })
        },
        //卡车排行榜Echarts
        truckChangeEcharts(){
            echarts.init(document.getElementById('carManScrView_leftView_content_views3_1')).dispose();
            var myChart = echarts.init(document.getElementById('carManScrView_leftView_content_views3_1'));
            var option = {
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                grid: {
                    top:'18%',
                    left: '1%',
                    bottom: '0%',
                    containLabel: true
                },
                xAxis: {
                    name:this.truckRankListData.echartsX,
                    type: 'value',
                    boundaryGap: [0, 0.01],
                    axisLabel: {
                        show: true,
                        textStyle: {
                            color: '#BFF7FF'
                        }
                    },
                    axisLine: {
                        lineStyle: {
                            color: '#BFF7FF',
                            width: 1
                        }
                    }
                },
                yAxis: {
                    name:'车牌号',
                    type: 'category',
                    data: this.truckRankListData.driverName,
                    axisLabel: {
					    show: true,
					    textStyle: {
					        color: '#BFF7FF'
					    }
					},
					axisLine: {
					    lineStyle: {
					        color: '#BFF7FF',
					        width: 0
					    }
					}
                },
                series: [
                    {
                        type: 'bar',
                        barWidth: 12,
                        itemStyle: {
                            color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                                { offset: 0, color: '#23FFE2' },
                                { offset: 1, color: '#0F86EB' }
                            ])
                            
                        },
                        data: this.truckRankListData.driverSeriesData,
                    }
                ]
            };

            option && myChart.setOption(option);
        },
        //铲车切换时间
        forkLiftChangeTime(text){
            this.forkLiftRankListData.selectTimeText = text;
            let forkLiftQuery1 = {};
            forkLiftQuery1.size = 5;
            forkLiftQuery1.sort = this.forkLiftRankListData.selectFieldText + ',desc';
            forkLiftQuery1.carclass = this.forkLiftRankListData.carclass;
            if(text == 'day'){
                HttpReq.truckDispatching.apiManmadesDay1Query(forkLiftQuery1).then((res) => {
                    this.forkLiftRankListData.listData = res;
                })
            }
            if(text == 'week'){
                HttpReq.truckDispatching.apiManmadesZhou1Query(forkLiftQuery1).then((res) => {
                    this.forkLiftRankListData.listData = res;
                })
            }
            if(text == 'month'){
                HttpReq.truckDispatching.apiManmadesMou1Query(forkLiftQuery1).then((res) => {
                    this.forkLiftRankListData.listData = res;
                })
            }
        },
        //铲车切换字段排序
        forkLiftChangeField(text){
            this.forkLiftRankListData.selectFieldText = text;
            let forkLiftQuery1 = {};
            forkLiftQuery1.size = 5;
            forkLiftQuery1.sort = this.forkLiftRankListData.selectFieldText + ',desc';
            forkLiftQuery1.carclass = this.forkLiftRankListData.carclass;
            this.$nextTick(()=>{
                if(this.forkLiftRankListData.selectTimeText == 'day'){
                    HttpReq.truckDispatching.apiManmadesDay1Query(forkLiftQuery1).then((res) => {
                        this.forkLiftRankListData.listData = res;
                    })
                }else if(this.forkLiftRankListData.selectTimeText == 'week'){
                    HttpReq.truckDispatching.apiManmadesZhou1Query(forkLiftQuery1).then((res) => {
                        this.forkLiftRankListData.listData = res;
                    })
                }else if(this.forkLiftRankListData.selectTimeText == 'month'){
                    HttpReq.truckDispatching.apiManmadesMou1Query(forkLiftQuery1).then((res) => {
                        this.forkLiftRankListData.listData = res;
                    })
                }
            })
        },
        //卡车动态
        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.screenCarInforCarRealQuery2({number:this.truckDynamicListData.number}).then((res) => {
                if(res.code == 200){
                    this.truckDynamicListData.rate = res.data.rate;
                    this.truckDynamicListData.carry = res.data.carry;
                    this.truckDynamicListData.workTime = res.data.workTime;
                    this.truckDynamicListData.mileage = res.data.mileage;
                    this.truckDynamicListData.startTime = res.data.startTime;
                    this.truckDynamicListData.endTime = res.data.endTime;
                    this.truckDynamicListData.loadArea = res.data.loadArea;
                    this.truckDynamicListData.unloadArea = res.data.unloadArea;
                }
                this.truckDynamicListData.num2 = this.truckDynamicListData.num2 + 1;
            })
        },
        //铲车动态
        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.screenCarInforCarRealQuery2({number:this.forkliftkDynamicListData.number}).then((res) => {
                if(res.code == 200){
                    this.forkliftkDynamicListData.rate = res.data.rate;
                    this.forkliftkDynamicListData.carry = res.data.carry;
                    this.forkliftkDynamicListData.workTime = res.data.workTime;
                    this.forkliftkDynamicListData.mileage = res.data.mileage;
                    this.forkliftkDynamicListData.startTime = res.data.startTime;
                    this.forkliftkDynamicListData.endTime = res.data.endTime;
                    this.forkliftkDynamicListData.loadArea = res.data.loadArea;
                    this.forkliftkDynamicListData.unloadArea = res.data.unloadArea;
                }
                this.forkliftkDynamicListData.num2 = this.forkliftkDynamicListData.num2 + 1;
            })
        },
        //其他车动态
        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.screenCarInforCarRealQuery2({number:this.otherCarDynamicListData.number}).then((res) => {
                if(res.code == 200){
                    this.otherCarDynamicListData.rate = res.data.rate;
                    this.otherCarDynamicListData.carry = res.data.carry;
                    this.otherCarDynamicListData.workTime = res.data.workTime;
                    this.otherCarDynamicListData.mileage = res.data.mileage;
                    this.otherCarDynamicListData.startTime = res.data.startTime;
                    this.otherCarDynamicListData.endTime = res.data.endTime;
                    this.otherCarDynamicListData.loadArea = res.data.loadArea;
                    this.otherCarDynamicListData.unloadArea = res.data.unloadArea;
                }
                this.otherCarDynamicListData.num2 = this.otherCarDynamicListData.num2 + 1;
            })
        },

        //获取当前时间
		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;
		},
        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.carDongTaiQieHuanTimer) {
			clearInterval(this.carDongTaiQieHuanTimer);
		}
    }
}
</script>

<style scoped>
.carManScrView{
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: absolute;
    display: flex;
    justify-content: space-between;
}
.carManScrView_leftView{
    height: 100%;
    width: 20%;
    z-index: 3;
}
.carManScrView_rightView{
    height: 100%;
    width: 20%;
    z-index: 3;
}
.carManScrView_leftView>div{
    width: 100%;
    height: 32vh;
    /* background:no-repeat center center url('~@/assets/images/cutGraph/yuanjianjuxing1.png');
	background-size:100% 100%; */
    background-color: rgba(32,42,67,0.8);
    padding: 5px 7px;
    box-sizing: border-box;
    overflow: hidden;
}
.carManScrView_rightView>div{
    width: 100%;
    height: 31.8vh;
    /* background:no-repeat center center url('~@/assets/images/cutGraph/yuanjianjuxing1.png');
	background-size:100% 100%; */
    background-color: rgba(32,42,67,0.8);
    padding: 5px 7px;
    box-sizing: border-box;
    overflow: hidden;
}
.carManScrView_leftView_title,.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;
}
.carManScrView_leftView_content,.carManScrView_rightView_content{
    width: 100%;
    height: 27vh;
}
.rolling{
	height: 13.5vh;
	overflow-y:auto;
    scrollbar-width: none;
}
.rolling::-webkit-scrollbar {
  display: none;
}

.truck_titleStyle{
    display: flex;
    justify-content: space-between;
    padding-right: 4vw;
}
.driverTitleDateStyle{
    display: flex;
    color: #06EFFE;
    font-size: 16px;
    text-shadow: 0px 0px 0px;
    height: 3.5vh;
    align-items: center;
}
.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;
}
.driverTitleDateStyle_son2{
    height: 2.5vh;
    line-height: 2.5vh;
    margin-right: 5px;
    padding:0px 5px;
    box-sizing: border-box;
    border-radius: 5px;
    cursor: pointer;
}
.carManScrView_leftView_content_views2{
    display: flex;
    justify-content: space-between;
}
.carManScrView_leftView_content_views2>div{
    height: 2.5vh;
    width: 24%;
    font-size: 15px;
    border:2px solid #01A6FC;
    border-radius: 5px;
    color: #06EFFE;
    line-height: 2.2vh;
    text-align: center;
    cursor: pointer;
    font-weight: 600;
}
.selectFieldStyle{
    opacity: 0.7;
}
.carManScrView_leftView_content_views3{
    width: 100%;
    height: 24vh;
    overflow-y:auto;
    scrollbar-width: none;
}
.carManScrView_leftView_content_views3::-webkit-scrollbar {
  display: none;
}
.forkliftRankTwo1{
    margin-top: 1vh;
    margin-bottom: 1.5vh;
    display: flex;
    justify-content: space-evenly;
    width: 100%;
    height: 3vh;
    line-height: 3vh;
    background:no-repeat center center url('~@/assets/images/cutGraph/list1.png');
	background-size:100% 100%;
    padding-left: 4vw;
    box-sizing: border-box;
}
.forkliftRankTwo2{
    margin-bottom: 1.5vh;
    display: flex;
    justify-content: space-evenly;
    width: 100%;
    height: 3vh;
    line-height: 3vh;
    background:no-repeat center center url('~@/assets/images/cutGraph/list2.png');
	background-size:100% 100%;
    padding-left: 4vw;
    box-sizing: border-box;
}
.forkliftRankTwo3{
    margin-bottom: 1.5vh;
    display: flex;
    justify-content: space-evenly;
    width: 100%;
    height: 3vh;
    line-height: 3vh;
    background:no-repeat center center url('~@/assets/images/cutGraph/list3.png');
	background-size:100% 100%;
    padding-left: 4vw;
    box-sizing: border-box;
}
.forkliftRankTwo4{
    margin-bottom: 1.5vh;
    display: flex;
    justify-content: space-evenly;
    width: 100%;
    height: 3vh;
    line-height: 3vh;
    background:no-repeat center center url('~@/assets/images/cutGraph/list4.png');
	background-size:100% 100%;
    padding-left: 4vw;
    box-sizing: border-box;
}
.forkliftRankTwo5{
    display: flex;
    justify-content: space-evenly;
    width: 100%;
    height: 3vh;
    line-height: 3vh;
    background:no-repeat center center url('~@/assets/images/cutGraph/list5.png');
	background-size:100% 100%;
    padding-left: 4vw;
    box-sizing: border-box;
}
.carDynamicTitleStyle{
    display: flex;
    width: 100%;
    height: 3.5vh;
    align-items: center;
}
.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;
}
.truckDynamicContent1{
    position: relative;
    margin-top: 1vh;
    display: flex;
    align-items: center;
    font-weight: 600;
    justify-content: space-evenly;
}
.truckDynamicRateStyle{
    position: absolute;
    left: 3vw;
    top: 2.5vh;
    text-align: center;
}
.carDynamicContent1{
    width: 100%;
    height: 7vh;
}
.carDynamicContent1>div{
    color: #06EFFE;
    margin-top: 5px;
    display: flex;
    justify-content: space-around;
    align-items: center;
}
.carDynamicContent2{
    width: 100%;
    height: 5vh;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0px 10px;
    box-sizing: border-box;
    color: #03BFFD;
}
.carDynamicContent2>span{
    transform: rotateZ(90deg);
    font-size: 30px;
}
.ForkliftDynamicContent1{
    margin-top: 0.3vh;
    display: flex;
    justify-content: space-between;
    width: 100%;
    height: 10vh;
    font-size: 15px;
}
.ForkliftDynamicContent1>div{
    width: 33%;
    text-align: center;
    color: white;
}
.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%;
}
.otherCarDynamicContent1{
    margin-top: 0.3vh;
    display: flex;
    justify-content: space-between;
    width: 100%;
    height: 9vh;
    font-size: 15px;
}
.otherCarDynamicContent1>div{
    width: 33%;
    text-align: center;
    color: white;
}
.otherCarDynamicContent1_son1{
    margin: 0px auto;
    width: 4vw;
    height: 4vw;
    line-height: 4vw;
    font-size: 24px;
    background:no-repeat center center url('~@/assets/images/cutGraph/bilikuang.png');
	background-size:100% 100%;
}
</style>