YZProjectCloud/yanzhu-bigscreen/src/views/greenCarbon.vue

<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="用电统计" class="left-power">
                <div style="height: 50%;">
                    <div class="survey_content">
                        <div class="survey_content_img">
                            <svg-icon icon-class="power" class="an2"></svg-icon>
                        </div>
                    </div>
                </div>
                <div style="height: 50%;" class="power-chart">
                    <el-col :span="8">
                        <div class="chart-bg power-chart1">
                            <div class="chart-proc"></div>
                            <div class="data-top">
                                <div class="chart-data led-number">2999339</div>
                                <div class="chart-unit">kW</div>
                            </div>
                            <div class="data-bottom">
                                施工用电
                            </div>
                        </div>
                    </el-col>
                    <el-col :span="8">
                        <div class="chart-bg power-chart2">
                            <div class="chart-proc" style="height:60%;"></div>
                            <div class="data-top">
                                <div class="chart-data led-number">2999339</div>
                                <div class="chart-unit">(T CO₂)</div>
                            </div>
                            <div class="data-bottom">
                                碳排放
                            </div>
                        </div>
                    </el-col>
                    <el-col :span="8">
                        <div class="chart-bg power-chart3">
                            <div class="chart-proc" style="height:40%;"></div>
                            <div class="data-top">
                                <div class="chart-data led-number">2999339</div>
                                <div class="chart-unit">(T CO₂)</div>
                            </div>
                            <div class="data-bottom">
                                碳减排
                            </div>
                        </div>
                    </el-col>
                </div>
            </module-one-1-1>
        </el-col>

        <el-col :span="12" class="h100">
            <module-one-2-2 label="" class="no-title no-border center-top">
                <div class="top-total-data">
                    <el-col :span="8">
                        <div class="data-item">
                            <div class="td-title">
                                <svg-icon icon-class="money"></svg-icon>
                                碳排放预估总量(T CO₂)
                            </div>
                            <div class="td-number">
                                <people-number :number="225566.1" unit=""></people-number>
                            </div>
                        </div>
                    </el-col>
                    <el-col :span="8">
                        <div class="data-item">
                            <div class="td-title">
                                <svg-icon icon-class="money"></svg-icon>
                                碳排放监测累计总量(T CO₂)
                            </div>
                            <div class="td-number">
                                <people-number :number="225566.9" unit=""></people-number>
                            </div>
                        </div>
                    </el-col>
                    <el-col :span="8">
                        <div class="data-item">
                            <div class="td-title">
                                <svg-icon icon-class="money"></svg-icon>
                                当月碳排放监测量(T CO₂)
                            </div>
                            <div class="td-number">
                                <people-number :number="225566.9" unit=""></people-number>
                            </div>
                        </div>
                    </el-col>
                </div>
                <div class="prj-img-list">
                    <el-carousel height="100%" :autoplay="false">
                        <el-carousel-item v-for="(it, idx) in prjImgs" :key="idx">
                            <el-image style="width: 100%; height: 100%" :src="it" fit="contain" />
                        </el-carousel-item>
                    </el-carousel>
                </div>
            </module-one-2-2>
            <module-one-1-2 label="节能减排趋势" class="energy-tendency">
                <el-col :span="8" class="et-chart1">
                    <img src="images/security1.gif" class="time-img" />
                    <my-chart :key="chartKey" id="energy-tendency-total" width="100%" height="100%"
                        :render="renderChart4"></my-chart>
                </el-col>
                <el-col :span="16">
                    <my-chart :key="chartKey" id="energy-tendency-line" width="100%" height="100%"
                        :render="renderChart5"></my-chart>
                </el-col>
            </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>
import debounce from 'lodash.debounce'
import SvgIcon from '@/components/SvgIcon.vue';
export default {
    components: { SvgIcon },
    data() {
        return {
            dpi: '',
            chartKey: 0,
            prjImgs: [],
            selProject: null,
            prjInfo: {},
        }
    },
    mounted() {
        this.$store.dispatch('ChangeNav', 6);
        this.dpi = this.$dpi();
        window.addEventListener("resize", () => {
            if (this.dpi != this.$dpi()) {
                this.dpi = this.$dpi();
                this.chartKey++;
            }
        });
        this.$bus.$on('projectChange', debounce(prj => {
            this.selProject = prj;
            this.init();
        }));
        this.selProject = this.$store.getters.selProject;
        this.init();
    },
    methods: {
        init() {
            if (!this.selProject) {
                return;
            }
            this.$api.project.getProjectInfo(this.selProject.id).then(d => {
                this.prjInfo = d.data || {};
                this.prjImgs = (this.prjInfo?.setting?.orgImage || '').split(",").filter(d => d);
            });
        },
        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}\nT CO₂}"].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;
        },
        renderChart4() {
            let is1K = this.$dpi() == "1K";
            let is2K = this.$dpi() == "2K";
            let option = {
                legend: {

                    bottom: is1K ? '0%' : is2K ? '10%' : '5%',
                    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,
                    }
                },
                color: ['#C060F6', '#5087EC', '#FFBB3A'],
                series: [
                    {
                        type: 'pie',
                        radius: is1K ? [40, 66] : is2K ? [60, 100] : [140, 190],
                        center: is1K ? ['50%', '40%'] : is2K ? ['50%', '40%'] : ['50%', '40%'],
                        roseType: 'area',
                        itemStyle: {
                            borderRadius: is1K ? 4 : is2K ? 8 : 10,
                            borderColor: '#fff',
                            borderWidth: 2
                        },
                        data: [
                            { value: 40000, name: '电力' },
                            { value: 38888, name: '建材' },
                            { value: 32222, name: '油耗' },
                        ],
                        label: {
                            overflow: 'none',
                            formatter: ["{b|{b}}", "{c|{c}\nT CO₂}"].join("\n"),
                            rich: {
                                b: {
                                    color: '#01e5ff',
                                    height: is1K ? 20 : is2K ? 30 : 50,
                                    fontSize: is1K ? 12 : is2K ? 16 : 30,
                                },
                                c: {
                                    color: '#01e5ff',
                                    fontSize: is1K ? 12 : is2K ? 16 : 30,
                                }
                            },
                            show: true,
                            fontSize: is1K ? 12 : is2K ? 16 : 30,
                        },
                        labelLayout: {

                        }
                    }
                ]
            };
            return option;
        },
        renderChart5() {
            let is1K = this.$dpi() == "1K";
            let is2K = this.$dpi() == "2K";
            let option = {

            };
            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 {
            .survey_content_img {
                .oil-data {
                    height: 100%;
                    position: relative;

                    .an1 {
                        position: relative;

                    }

                    .oil-title {
                        position: absolute;
                        width: 100%;

                    }
                }
            }
        }
    }

    .survey_content {
        height: 100%;

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

            .an2 {
                position: relative;
            }
        }
    }

    .left-power {
        .svg-icon {
            fill: #63c8ff;
        }

        .power-chart {
            .el-col {
                height: 100%;
                padding: 10px;

                .chart-bg {
                    position: relative;
                    border-radius: 5px 5px 0px 0px;
                    height: 100%;

                    &.power-chart1 {
                        background-color: #0c142d;

                    }

                    &.power-chart2 {
                        background-color: #FFBB3A;
                    }

                    &.power-chart3 {
                        background-color: #17AD55;
                    }

                    .chart-proc {
                        height: 50%;
                        position: absolute;
                        bottom: 0px;
                        width: 100%;
                        background-color: #05275aad;
                        z-index: 1;
                    }

                    .data-top {
                        position: relative;
                        z-index: 10;
                        height: 50%;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        flex-flow: column;

                        .chart-data {
                            color: #01e5ff;
                            text-shadow: 2px 2px 2px black;
                        }
                    }

                    .data-bottom {
                        position: relative;
                        z-index: 10;
                        height: 50%;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                    }
                }
            }
        }
    }

    .center-top {
        .top-total-data {
            height: 110px;
            margin-bottom: 20px;
            overflow: hidden;
            width: 100%;

            .el-col {
                padding: 10px 10px;

                &:first-child {
                    padding: 10px 10px 10px 0px;
                }

                &:last-child {
                    padding: 10px 0px 10px 10px;
                }

                .data-item {
                    background-image: linear-gradient(89deg, #192c6447 0%, #192c648a 100%);

                    .td-title {
                        height: 40px;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        color: #01e5ff;

                        .svg-icon {
                            margin-right: 8px;
                        }
                    }

                    .td-number {
                        height: 70px;
                        display: flex;
                        position: relative;
                        top: -10px;
                        justify-content: center;

                        .people-number-con {
                            padding: 0px;

                            div {
                                margin-right: 2px;
                                width: 25px;
                                color: #01e5ff;
                                text-shadow: 2px 2px 2px black;
                            }
                        }
                    }
                }
            }
        }

        .prj-img-list {
            height: calc(100% - 130px);

            .el-carousel {
                height: 100%;

                .el-carousel__arrow {
                    width: 50px;
                    height: 50px;
                    background-color: #192c648a;

                    i {
                        font-size: 20px;
                    }
                }
            }
        }
    }

    .energy-tendency {
        .el-col {
            height: 100%;

            &.et-chart1 {
                position: relative;
            }
        }
    }
}

@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;
                    }
                }
            }
        }
    }

    .left-power {
        @keyframes bounce2 {
            from {
                width: 10px;
                height: 10px;
            }

            to {
                width: 60px;
                height: 60px;
            }
        }

        .an2 {
            animation: bounce2 1s infinite;
        }

        .survey_content {
            .survey_content_img {
                background-size: 120px 120px;
            }
        }

        .chart-bg {
            .data-top {
                .chart-data {
                    font-size: 30px;
                }

                .chart-unit {
                    font-size: 12px;
                }
            }

            .data-bottom {
                font-size: 20px;
            }
        }
    }

    .energy-tendency {
        .el-col {
            &.et-chart1 {
                position: relative;

                .time-img {
                    position: absolute;
                    width: 110px;
                    height: 110px;
                    top: 50%;
                    left: 50%;
                    margin-top: -79px;
                    margin-left: -56px;
                }
            }
        }
    }
}

@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;
                    }
                }
            }
        }
    }

    .left-power {
        @keyframes bounce2 {
            from {
                width: 10px;
                height: 10px;
            }

            to {
                width: 80px;
                height: 80px;
            }
        }

        .an2 {
            animation: bounce2 1s infinite;
            top: 40px;
        }

        .survey_content {
            .survey_content_img {
                background-size: 160px 160px !important;
            }
        }

        .chart-bg {
            .data-top {
                .chart-data {
                    font-size: 40px;
                }

                .chart-unit {
                    font-size: 20px;
                }
            }

            .data-bottom {
                font-size: 30px;
            }
        }
    }

    .center-top {
        .top-total-data {
            height: 150px !important;

            .el-col {
                .data-item {
                    .td-title {
                        height: 60px !important;
                        font-size: 20px !important;
                    }

                    .td-number {
                        height: 90px !important;
                        top: -15px !important;

                        .people-number-con {
                            div {
                                width: 35px !important;
                                height: 60px !important;
                                font-size: 50px;
                                margin-right: 4px !important;
                                line-height: 60px !important;
                            }
                        }
                    }
                }
            }
        }

        .prj-img-list {
            height: calc(100% - 170px) !important;

            .el-carousel {
                height: 100%;

                .el-carousel__arrow {
                    width: 80px !important;
                    height: 80px !important;

                    i {
                        font-size: 30px !important;
                    }
                }
            }
        }
    }

    .energy-tendency {
        .el-col {
            &.et-chart1 {
                position: relative;

                .time-img {
                    position: absolute;
                    width: 180px;
                    height: 180px;
                    top: 50%;
                    left: 50%;
                    margin-top: -126px;
                    margin-left: -89px;
                }
            }
        }
    }
}

@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;
                    }
                }
            }
        }
    }

    .left-power {
        @keyframes bounce2 {
            from {
                width: 20px;
                height: 20px;
            }

            to {
                width: 120px;
                height: 120px;
            }
        }

        .an2 {
            animation: bounce2 1s infinite;
            top: 60px;
        }

        .survey_content {
            .survey_content_img {
                background-size: 200px 200px !important;
            }
        }

        .chart-bg {
            .data-top {
                .chart-data {
                    font-size: 60px;
                }

                .chart-unit {
                    font-size: 30px;
                }
            }

            .data-bottom {
                font-size: 40px;
            }
        }
    }

    .center-top {
        .top-total-data {
            height: 180px !important;

            .el-col {
                .data-item {
                    .td-title {
                        height: 70px !important;
                        font-size: 24px !important;
                    }

                    .td-number {
                        height: 110px !important;
                        top: -15px !important;

                        .people-number-con {
                            div {
                                width: 45px !important;
                                height: 80px !important;
                                font-size: 64px;
                                margin-right: 4px !important;
                                line-height: 80px !important;
                            }
                        }
                    }
                }
            }
        }

        .prj-img-list {
            height: calc(100% - 200px) !important;

            .el-carousel {
                height: 100%;

                .el-carousel__arrow {
                    width: 120px !important;
                    height: 120px !important;

                    i {
                        font-size: 40px !important;
                    }
                }
            }
        }
    }

    .energy-tendency {
        .el-col {
            &.et-chart1 {
                position: relative;
                .time-img {
                    position: absolute;
                    width: 400px;
                    height: 400px;
                    top: 50%;
                    left: 50%;
                    margin-top: -261px;
                    margin-left: -199px;
                }
            }
        }
    }
}
</style>