<template>
    <div class="DPcomputer26Box">
        <!-- 矿石产量比-->
        <div class="dataAnalysisScrView_leftView_title truck_titleStyle">
            <div>矿石产量比</div>
            <div class="oreProportionTitleDateStyle">
                <div :class="oreProportionListData.selectTimeText == 'day' ? 'oreProportionDateStyle_son1' : 'oreProportionDateStyle_son2' " @click="oreProportionChangeTime('day')">日</div>
                <div :class="oreProportionListData.selectTimeText == 'week' ? 'oreProportionDateStyle_son1' : 'oreProportionDateStyle_son2' " @click="oreProportionChangeTime('week')">周</div>
                <div :class="oreProportionListData.selectTimeText == 'month' ? 'oreProportionDateStyle_son1' : 'oreProportionDateStyle_son2' " @click="oreProportionChangeTime('month')">月</div>
            </div>
        </div>
        <div class="dataAnalysisScrView_rightView_content" style="position: relative;">
            <div id="echarts5View" ref="chartPanel" style="width:100%;height: 18vh;margin-top: 4vh;"></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 {
            DPcomputer26BoxTimer:null,
            //矿石产量比
            oreProportionListData:{
                selectTimeText:'day',
                selectTimeDate:'',
                proportionData:[],
                optionData:[
                    {
                        name: "矿石",
                        value: 85,
                        num1:85,
                        itemStyle: {
                            opacity: 0.2,
                            color: "#8FDFFE",
                        },
                    },
                    {
                        name: "废石",
                        value: 15,
                        num1:15,
                        itemStyle: {
                            opacity: 0.2,
                            color: "#00A8FF",
                        },
                    }
                ]
            },
        }
    },
    mounted(){
        this.loadData();
    },
    methods:{
        loadData(){
            //矿石产量比
            if(this.oreProportionListData.selectTimeText == 'day'){
                HttpReq.truckDispatching.apiAreaNewBlQuery().then((res) => {
                    if(res.code == 200){
                        if(res.data.length == 0){
                            this.oreProportionListData.proportionData = this.oreProportionListData.optionData;
                        }else{
                            let colorARR = ['#00A8FF','#8FDFFE','#F4F03A','#F5335C','#E68220','#00A8FF','#8FDFFE','#F4F03A','#F5335C','#E68220'];
                            let centerArray = [];
                            //矿石配置
                            let a1 = {};
                            let a2 = {};
                            a1.name = "矿石";
                            a1.value = res.data[0].kl;
                            a1.num1 = res.data[0].ks;
                            a2.opacity = 0.2,
                            a2.color = colorARR[0],
                            a1.itemStyle = a2;
                            centerArray.push(a1);
                            //废石配置
                            let a3 = {};
                            let a4 = {};
                            a3.name = "废石";
                            a3.value = res.data[0].fl;
                            a3.num1 = res.data[0].fs;
                            a4.opacity = 0.2,
                            a4.color = colorARR[1],
                            a3.itemStyle = a4;
                            centerArray.push(a3);
                            this.oreProportionListData.proportionData = centerArray;
                        }
                        this.echarts5Fn();
                    }
                })
            }
            if(this.oreProportionListData.selectTimeText == 'week'){
                HttpReq.truckDispatching.apiAreaNewBlQuery().then((res) => {
                    if(res.code == 200){
                        if(res.data.length == 0){
                            this.oreProportionListData.proportionData = this.oreProportionListData.optionData;
                        }else{
                            let colorARR = ['#00A8FF','#8FDFFE','#F4F03A','#F5335C','#E68220','#00A8FF','#8FDFFE','#F4F03A','#F5335C','#E68220'];
                            let centerArray = [];
                            //矿石配置
                            let a1 = {};
                            let a2 = {};
                            a1.name = "矿石";
                            a1.value = res.data[1].kl;
                            a1.num1 = res.data[1].ks;
                            a2.opacity = 0.2,
                            a2.color = colorARR[0],
                            a1.itemStyle = a2;
                            centerArray.push(a1);
                            //废石配置
                            let a3 = {};
                            let a4 = {};
                            a3.name = "废石";
                            a3.value = res.data[1].fl;
                            a3.num1 = res.data[1].fs;
                            a4.opacity = 0.2,
                            a4.color = colorARR[1],
                            a3.itemStyle = a4;
                            centerArray.push(a3);
                            this.oreProportionListData.proportionData = centerArray;
                        }
                        this.echarts5Fn();
                    }
                })
            }
            if(this.oreProportionListData.selectTimeText == 'month'){
                HttpReq.truckDispatching.apiAreaNewBlQuery().then((res) => {
                    if(res.code == 200){
                        if(res.data.length == 0){
                            this.oreProportionListData.proportionData = this.oreProportionListData.optionData;
                        }else{
                            let colorARR = ['#00A8FF','#8FDFFE','#F4F03A','#F5335C','#E68220','#00A8FF','#8FDFFE','#F4F03A','#F5335C','#E68220'];
                            let centerArray = [];
                            //矿石配置
                            let a1 = {};
                            let a2 = {};
                            a1.name = "矿石";
                            a1.value = res.data[2].kl;
                            a1.num1 = res.data[2].ks;
                            a2.opacity = 0.2,
                            a2.color = colorARR[0],
                            a1.itemStyle = a2;
                            centerArray.push(a1);
                            //废石配置
                            let a3 = {};
                            let a4 = {};
                            a3.name = "废石";
                            a3.value = res.data[2].fl;
                            a3.num1 = res.data[2].fs;
                            a4.opacity = 0.2,
                            a4.color = colorARR[1],
                            a3.itemStyle = a4;
                            centerArray.push(a3);
                            this.oreProportionListData.proportionData = centerArray;
                        }
                        this.echarts5Fn();
                    }
                })
            }

            this.DPcomputer26BoxTimer = setInterval(() => {
                //矿石产量比
                if(this.oreProportionListData.selectTimeText == 'day'){
                    HttpReq.truckDispatching.apiAreaNewBlQuery().then((res) => {
                        if(res.code == 200){
                            if(res.data.length == 0){
                                this.oreProportionListData.proportionData = this.oreProportionListData.optionData;
                            }else{
                                let colorARR = ['#00A8FF','#8FDFFE','#F4F03A','#F5335C','#E68220','#00A8FF','#8FDFFE','#F4F03A','#F5335C','#E68220'];
                                let centerArray = [];
                                //矿石配置
                                let a1 = {};
                                let a2 = {};
                                a1.name = "矿石";
                                a1.value = res.data[0].kl;
                                a1.num1 = res.data[0].ks;
                                a2.opacity = 0.2,
                                a2.color = colorARR[0],
                                a1.itemStyle = a2;
                                centerArray.push(a1);
                                //废石配置
                                let a3 = {};
                                let a4 = {};
                                a3.name = "废石";
                                a3.value = res.data[0].fl;
                                a3.num1 = res.data[0].fs;
                                a4.opacity = 0.2,
                                a4.color = colorARR[1],
                                a3.itemStyle = a4;
                                centerArray.push(a3);
                                this.oreProportionListData.proportionData = centerArray;
                            }
                            this.echarts5Fn();
                        }
                    })
                }
                if(this.oreProportionListData.selectTimeText == 'week'){
                    HttpReq.truckDispatching.apiAreaNewBlQuery().then((res) => {
                        if(res.code == 200){
                            if(res.data.length == 0){
                                this.oreProportionListData.proportionData = this.oreProportionListData.optionData;
                            }else{
                                let colorARR = ['#00A8FF','#8FDFFE','#F4F03A','#F5335C','#E68220','#00A8FF','#8FDFFE','#F4F03A','#F5335C','#E68220'];
                                let centerArray = [];
                                //矿石配置
                                let a1 = {};
                                let a2 = {};
                                a1.name = "矿石";
                                a1.value = res.data[1].kl;
                                a1.num1 = res.data[1].ks;
                                a2.opacity = 0.2,
                                a2.color = colorARR[0],
                                a1.itemStyle = a2;
                                centerArray.push(a1);
                                //废石配置
                                let a3 = {};
                                let a4 = {};
                                a3.name = "废石";
                                a3.value = res.data[1].fl;
                                a3.num1 = res.data[1].fs;
                                a4.opacity = 0.2,
                                a4.color = colorARR[1],
                                a3.itemStyle = a4;
                                centerArray.push(a3);
                                this.oreProportionListData.proportionData = centerArray;
                            }
                            this.echarts5Fn();
                        }
                    })
                }
                if(this.oreProportionListData.selectTimeText == 'month'){
                    HttpReq.truckDispatching.apiAreaNewBlQuery().then((res) => {
                        if(res.code == 200){
                            if(res.data.length == 0){
                                this.oreProportionListData.proportionData = this.oreProportionListData.optionData;
                            }else{
                                let colorARR = ['#00A8FF','#8FDFFE','#F4F03A','#F5335C','#E68220','#00A8FF','#8FDFFE','#F4F03A','#F5335C','#E68220'];
                                let centerArray = [];
                                //矿石配置
                                let a1 = {};
                                let a2 = {};
                                a1.name = "矿石";
                                a1.value = res.data[2].kl;
                                a1.num1 = res.data[2].ks;
                                a2.opacity = 0.2,
                                a2.color = colorARR[0],
                                a1.itemStyle = a2;
                                centerArray.push(a1);
                                //废石配置
                                let a3 = {};
                                let a4 = {};
                                a3.name = "废石";
                                a3.value = res.data[2].fl;
                                a3.num1 = res.data[2].fs;
                                a4.opacity = 0.2,
                                a4.color = colorARR[1],
                                a3.itemStyle = a4;
                                centerArray.push(a3);
                                this.oreProportionListData.proportionData = centerArray;
                            }
                            this.echarts5Fn();
                        }
                    })
                }
            },60000)
            
        },
        //矿石产量比切换
        oreProportionChangeTime(text){
            this.oreProportionListData.selectTimeText = text;
            //矿石产量比
            if(this.oreProportionListData.selectTimeText == 'day'){
                HttpReq.truckDispatching.apiAreaNewBlQuery().then((res) => {
                    if(res.code == 200){
                        if(res.data.length == 0){
                            this.oreProportionListData.proportionData = this.oreProportionListData.optionData;
                        }else{
                            let colorARR = ['#00A8FF','#8FDFFE','#F4F03A','#F5335C','#E68220','#00A8FF','#8FDFFE','#F4F03A','#F5335C','#E68220'];
                            let centerArray = [];
                            //矿石配置
                            let a1 = {};
                            let a2 = {};
                            a1.name = "矿石";
                            a1.value = res.data[0].kl;
                            a1.num1 = res.data[0].ks;
                            a2.opacity = 0.2,
                            a2.color = colorARR[0],
                            a1.itemStyle = a2;
                            centerArray.push(a1);
                            //废石配置
                            let a3 = {};
                            let a4 = {};
                            a3.name = "废石";
                            a3.value = res.data[0].fl;
                            a3.num1 = res.data[0].fs;
                            a4.opacity = 0.2,
                            a4.color = colorARR[1],
                            a3.itemStyle = a4;
                            centerArray.push(a3);
                            this.oreProportionListData.proportionData = centerArray;
                        }
                        this.echarts5Fn();
                    }
                })
            }
            if(this.oreProportionListData.selectTimeText == 'week'){
                HttpReq.truckDispatching.apiAreaNewBlQuery().then((res) => {
                    if(res.code == 200){
                        if(res.data.length == 0){
                            this.oreProportionListData.proportionData = this.oreProportionListData.optionData;
                        }else{
                            let colorARR = ['#00A8FF','#8FDFFE','#F4F03A','#F5335C','#E68220','#00A8FF','#8FDFFE','#F4F03A','#F5335C','#E68220'];
                            let centerArray = [];
                            //矿石配置
                            let a1 = {};
                            let a2 = {};
                            a1.name = "矿石";
                            a1.value = res.data[1].kl;
                            a1.num1 = res.data[1].ks;
                            a2.opacity = 0.2,
                            a2.color = colorARR[0],
                            a1.itemStyle = a2;
                            centerArray.push(a1);
                            //废石配置
                            let a3 = {};
                            let a4 = {};
                            a3.name = "废石";
                            a3.value = res.data[1].fl;
                            a3.num1 = res.data[1].fs;
                            a4.opacity = 0.2,
                            a4.color = colorARR[1],
                            a3.itemStyle = a4;
                            centerArray.push(a3);
                            this.oreProportionListData.proportionData = centerArray;
                        }
                        this.echarts5Fn();
                    }
                })
            }
            if(this.oreProportionListData.selectTimeText == 'month'){
                HttpReq.truckDispatching.apiAreaNewBlQuery().then((res) => {
                    if(res.code == 200){
                        if(res.data.length == 0){
                            this.oreProportionListData.proportionData = this.oreProportionListData.optionData;
                        }else{
                            let colorARR = ['#00A8FF','#8FDFFE','#F4F03A','#F5335C','#E68220','#00A8FF','#8FDFFE','#F4F03A','#F5335C','#E68220'];
                            let centerArray = [];
                            //矿石配置
                            let a1 = {};
                            let a2 = {};
                            a1.name = "矿石";
                            a1.value = res.data[2].kl;
                            a1.num1 = res.data[2].ks;
                            a2.opacity = 0.2,
                            a2.color = colorARR[0],
                            a1.itemStyle = a2;
                            centerArray.push(a1);
                            //废石配置
                            let a3 = {};
                            let a4 = {};
                            a3.name = "废石";
                            a3.value = res.data[2].fl;
                            a3.num1 = res.data[2].fs;
                            a4.opacity = 0.2,
                            a4.color = colorARR[1],
                            a3.itemStyle = a4;
                            centerArray.push(a3);
                            this.oreProportionListData.proportionData = centerArray;
                        }
                        this.echarts5Fn();
                    }
                })
            }
        },
        echarts5Fn(){
            // 基于准备好的dom，初始化echarts实例
            echarts.init(document.getElementById('echarts5View')).dispose();
            let chartPanel = echarts.init(document.getElementById("echarts5View"));
            for (let i = 0; i < this.oreProportionListData.proportionData.length; i++) {
                delete this.oreProportionListData.proportionData[i].itemStyle.opacity;
            }
            // 传入数据生成 option
            let series = getPie3D(this.oreProportionListData.proportionData, 0);  
            let option = {
                tooltip: {
                formatter: (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: "-5%",
                left:"5%",
                // bottom: "80%",
                // environment: "#021041", //背景
                viewControl: {
                    //用于鼠标的旋转，缩放等视角控制
                    alpha: 25, //角度
                    distance: 210, //调整视角到主体的距离，类似调整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) => {
                    return item.data.name + ":" + item.data.num1 + "吨";
                },
                },
                labelLine: {
                length: 40,
                length2: 10,
                lineStyle: {
                    color: "#ffffff",
                    width: 1.5,
                },
                },
                startAngle: 350, //起始角度，支持范围[0, 360]。 //重要
                clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
                radius: ["25%", "50%"],
                center: ["50%", "60%"],
                data: this.oreProportionListData.proportionData,
                itemStyle: {
                opacity: 0,
                },
                top: "-5%",
                left:"5%",
                avoidLabelOverlap: true, //防止标签重叠
            });
            chartPanel.setOption(option);
        },
    },
    beforeDestroy(){
        if(this.DPcomputer26BoxTimer) {
			clearInterval(this.DPcomputer26BoxTimer);
            this.DPcomputer26BoxTimer = null;
		}
    }
}
</script>

<style scoped>
*{
  margin: 0;
  padding: 0;
}
.DPcomputer26Box{
    width: 20vw;
    height: 23.5vh;
    background-color: rgba(32,42,67,0.95);
    padding: 5px 7px;
    box-sizing: border-box;
    overflow: hidden;
}
.DPcomputer26Box .dataAnalysisScrView_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;
}
.DPcomputer26Box .truck_titleStyle{
    display: flex;
    justify-content: space-between;
    padding-right: 4vw;
}
.DPcomputer26Box .oreProportionTitleDateStyle{
    display: flex;
    color: #06EFFE;
    font-size: 16px;
    text-shadow: 0px 0px 0px;
    height: 3.5vh;
    align-items: center;
    z-index: 100;
}
.DPcomputer26Box .oreProportionDateStyle_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;
}
.DPcomputer26Box .oreProportionDateStyle_son2{
    height: 2.5vh;
    line-height: 2.5vh;
    margin-right: 5px;
    padding:0px 5px;
    box-sizing: border-box;
    border-radius: 5px;
    cursor: pointer;
}
.DPcomputer26Box .dataAnalysisScrView_rightView_content{
    width: 100%;
    height: 19vh;
}
.DPcomputer26Box #echarts5View{
    position: absolute;
    top: -4vh;
    width: 100%;
    height: 28vh;
}
</style>