<template>
    <div class="DPcomputer10Box">
        <!-- 车辆运行状况 -->
        <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>
</template>

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


export default {
    data(){
        return {
            DPcomputer10BoxTimer:null,
            //车辆运行状况
            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",
                        },
                    }
                ],
            },
        }
    },
    mounted(){
        this.loadData();
    },
    methods:{
        loadData(){
            //获取车辆运行状况
            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)";
                    });
                }
            })
            
            this.DPcomputer10BoxTimer = setInterval(() => {
                //获取车辆运行状况
                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)";
                        });
                    }
                })
            },10000)
            
        },
        //车辆运行状况
        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: 30, //起始角度，支持范围[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);
        },
    },
    beforeDestroy(){
        if(this.DPcomputer10BoxTimer) {
			clearInterval(this.DPcomputer10BoxTimer);
            this.DPcomputer10BoxTimer = null;
		}
    }
}
</script>

<style scoped>
*{
  margin: 0;
  padding: 0;
}
.DPcomputer10Box{
    width: 20vw;
    height: 32vh;
    background-color: rgba(32,42,67,0.95);
    padding: 5px 7px;
    box-sizing: border-box;
    overflow: hidden;
}
.DPcomputer10Box .carManScrView_leftView_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;
}
.DPcomputer10Box .carManScrView_leftView_content{
    width: 100%;
    height: 27vh;
}
</style>