<template>
    <div class="green-carbon  main-page">
        <el-col :span="6" class="h100">
            <module-one-1-1 label="建材统计">
                <my-chart :key="chartKey" id="green-carbon-building" width="100%" height="100%"
                    :render="renderChart1"></my-chart>
            </module-one-1-1>
            <module-one-1-1 label="用油统计" class="left-oil">
                <div style="height: 50%;">
                    <div class="survey_content">
                        <div class="survey_content_img">
                            <div class="oil-data">
                                <div class="led-number an1">2222L</div>
                                <div class="oil-title">施工用油</div>
                            </div>

                        </div>
                    </div>
                </div>
                <div style="height: 50%;">
                    <el-col :span="12" style="height: 100%;">
                        <my-chart :key="chartKey" id="green-carbon-oil1" width="100%" height="100%"
                            :render="renderChart2"></my-chart>
                    </el-col>
                    <el-col :span="12" style="height: 100%;">
                        <my-chart :key="chartKey" id="green-carbon-oil2" width="100%" height="100%"
                            :render="renderChart3"></my-chart>
                    </el-col>
                </div>
            </module-one-1-1>
            <module-one-1-1 label="用电统计">
            </module-one-1-1>
        </el-col>

        <el-col :span="12" class="h100">
            <module-one-2-2 label="" class="no-title no-border">
            </module-one-2-2>
            <module-one-1-2 label="节能减排趋势" class="energy-tendency">
            </module-one-1-2>
        </el-col>
        <el-col :span="6" class="h100">
            <module-one-1-1 label="建材排放趋势">
            </module-one-1-1>
            <module-one-1-1 label="用油排放趋势">
            </module-one-1-1>
            <module-one-1-1 label="用电排放趋势">
            </module-one-1-1>
        </el-col>
    </div>
</template>

<script>
export default {
    data() {
        return {
            dpi: '',
            chartKey: 0,
        }
    },
    mounted() {
        this.dpi = this.$dpi();
        window.addEventListener("resize", () => {
            if (this.dpi != this.$dpi()) {
                this.dpi = this.$dpi();
                this.chartKey++;
            }
        });
    },
    methods: {
        renderChart1() {
            let is1K = this.$dpi() == "1K";
            let is2K = this.$dpi() == "2K";
            let option = {
                color: ['#ff9f1a', '#00a4e6'],
                legend: {
                    bottom: is1K ? '0%' : is2K ? '10%' : '10%',
                    left: 'center',
                    itemWidth: is1K ? 25 : is2K ? 30 : 40,
                    itemHeight: is1K ? 14 : is2K ? 20 : 20,
                    itemGap: is1K ? 20 : is2K ? 30 : 40,
                    textStyle: {
                        color: "#fff",
                        fontSize: is1K ? 14 : is2K ? 20 : 30,
                    }
                },
                series: [
                    {
                        type: 'pie',
                        radius: "70%",
                        avoidLabelOverlap: false,
                        bottom: is1K ? '5%' : is2K ? '15%' : '10%',
                        top: "-10%",
                        itemStyle: {
                            borderRadius: is1K ? 4 : is2K ? 8 : 10,
                            borderColor: '#fff',
                            borderWidth: 2
                        },
                        label: {
                            formatter: ["{b|{b}}", "{c|{c}T CO2}"].join("\n"),//"{b|b}\n{c|c T CO2}",
                            rich: {
                                b: {
                                    color: '#fff',
                                    height: 50,
                                    fontSize: is1K ? 14 : is2K ? 20 : 30,
                                },
                                c: {
                                    color: '#fff',
                                    fontSize: is1K ? 14 : is2K ? 20 : 30,
                                }
                            },
                            show: true,
                            fontSize: is1K ? 14 : is2K ? 20 : 30,
                        },

                        labelLine: {
                            show: true
                        },
                        data: [
                            { value: 1048, name: '碳排放' },
                            { value: 735, name: '碳减排' },

                        ]
                    }
                ]
            };
            return option;
        },
        renderChart2() {
            let is1K = this.$dpi() == "1K";
            let is2K = this.$dpi() == "2K";
            let option = {
                series: [
                    {
                        type: 'gauge',
                        startAngle: 180,
                        endAngle: 0,
                        max: 6000,
                        center: ['50%', '90%'],
                        radius: '120%',
                        itemStyle: {
                            color: '#e76e50',
                            shadowColor: 'rgba(0,138,255,0.45)',
                            shadowBlur: 10,
                            shadowOffsetX: 2,
                            shadowOffsetY: 2
                        },
                        progress: {
                            show: true,
                            width: is1K ? 12 : is2K ? 20 : 30,

                        },
                        axisLine: {
                            lineStyle: {
                                width: is1K ? 12 : is2K ? 20 : 30,
                                color: [[1, '#4f504e']] // 圆环底
                            }
                        },
                        axisTick: {
                            show: true,
                            distance: is1K ? -16 : is2K ? -30 : -40,
                            length: is1K ? 4 : is2K ? 8 : 10,
                        },
                        splitLine: {
                            length: 10,
                            distance: -20,
                            lineStyle: {
                                width: 1,
                                color: '#8e9aaf'
                            }
                        },
                        axisLabel: {
                            color: '#999',
                            distance: is1K ? -15 : is2K ? -20 : -30,
                            fontSize: is1K ? 12 : is2K ? 14 : 20,
                        },
                        pointer: {
                            show: false,
                        },
                        anchor: {
                            show: false,
                        },
                        title: {
                            offsetCenter: is1K ? [0, '-5%'] : is2K ? [0, '-5%'] : [0, '-5%'],
                            fontSize: is1K ? 12 : is2K ? 20 : 30,
                            color: '#fff'
                        },
                        detail: {
                            valueAnimation: true,
                            fontSize: is1K ? 20 : is2K ? 30 : 40,
                            offsetCenter: [0, '-40%'],
                            color: '#4ccdc4'
                        },
                        data: [
                            {
                                value: 4000,
                                name: '碳排放(T CO₂)'
                            }
                        ]
                    }
                ]
            };
            return option;
        },
        renderChart3() {
            let is1K = this.$dpi() == "1K";
            let is2K = this.$dpi() == "2K";
            let option = {
                series: [
                    {
                        type: 'gauge',
                        startAngle: 180,
                        endAngle: 0,
                        max: 6000,
                        center: ['50%', '90%'],
                        radius: '120%',
                        itemStyle: {
                            color: '#05d69e',
                            shadowColor: 'rgba(0,138,255,0.45)',
                            shadowBlur: 10,
                            shadowOffsetX: 2,
                            shadowOffsetY: 2
                        },
                        progress: {
                            show: true,
                            width: is1K ? 12 : is2K ? 20 : 30,

                        },
                        axisLine: {
                            lineStyle: {
                                width: is1K ? 12 : is2K ? 20 : 30,
                                color: [[1, '#4f504e']] // 圆环底
                            }
                        },
                        axisTick: {
                            show: true,
                            distance: is1K ? -16 : is2K ? -30 : -40,
                            length: is1K ? 4 : is2K ? 8 : 10,
                        },
                        splitLine: {
                            length: 10,
                            distance: -20,
                            lineStyle: {
                                width: 1,
                                color: '#8e9aaf'
                            }
                        },
                        axisLabel: {
                            color: '#999',
                            distance: is1K ? -15 : is2K ? -20 : -30,
                            fontSize: is1K ? 12 : is2K ? 14 : 20,
                        },
                        pointer: {
                            show: false,
                        },
                        anchor: {
                            show: false,
                        },
                        title: {
                            offsetCenter: is1K ? [0, '-5%'] : is2K ? [0, '-5%'] : [0, '-5%'],
                            fontSize: is1K ? 12 : is2K ? 20 : 30,
                            color: '#fff'
                        },
                        detail: {
                            valueAnimation: true,
                            fontSize: is1K ? 20 : is2K ? 30 : 40,
                            offsetCenter: [0, '-40%'],
                            color: '#4ccdc4'
                        },
                        data: [
                            {
                                value: 4000,
                                name: '碳减排(T CO₂)'
                            }
                        ]
                    }
                ]
            };
            return option;
        }
    }
}
</script>

<style lang="less">
.green-carbon {
    .left-oil {
        @keyframes bounce {

            0%,
            100% {
                transform: translateY(0);
            }

            50% {
                transform: translateY(-10px);
            }
        }

        .an1 {
            animation: bounce 1s infinite;
        }

        .survey_content {
            height: 100%;

            .survey_content_img {
                width: 100%;
                height: 100%;
                line-height: 100%;
                

                .oil-data {
                    height: 100%;
                    position: relative;

                    .an1 {
                        position: relative;
                       
                    }

                    .oil-title {
                        position: absolute;
                        width: 100%;
                       
                    }
                }
            }
        }
    }
}
@media (max-width: 1920px) {
    .left-oil {
        @keyframes bounce {

            0%,
            100% {
                transform: translateY(0);
            }

            50% {
                transform: translateY(-30px) ;
            }
        }
        .survey_content {

            .survey_content_img {
                background-size: 120px 120px;
                .oil-data {
                    .an1 {
                        top: 20px;
                        font-size: 30px;
                    }

                    .oil-title {                        
                        bottom: 50px;
                        font-size: 14px;
                    }
                }
            }
        }
    }
}
@media (min-width: 1921px) and (max-width: 2560px) {
    .left-oil {
        @keyframes bounce {

            0%,
            100% {
                transform: translateY(0);
            }

            50% {
                transform: translateY(-30px) ;
            }
        }
        .survey_content {

            .survey_content_img {
                background-size: 160px 160px !important;
                .oil-data {
                    .an1 {
                        top: 50px !important;
                        font-size: 40px !important;
                    }

                    .oil-title {                        
                        bottom:60px !important;
                        font-size: 20px !important;
                    }
                }
            }
        }
    }
}
@media (min-width: 2561px) {
    .left-oil {
        @keyframes bounce {

            0%,
            100% {
                transform: translateY(0);
            }

            50% {
                transform: translateY(-30px) ;
            }
        }
        .survey_content {

            .survey_content_img {
                background-size: 200px 200px !important;
                .oil-data {
                    .an1 {
                        top: 90px !important;
                        font-size: 60px !important;
                    }

                    .oil-title {                        
                        bottom:80px !important;
                        font-size: 30px !important;
                    }
                }
            }
        }
    }
}
</style>