<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">{{ leftOilData[0] }}L</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">{{ leftPowerData[0] }}</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:' + leftPowerData[3] + '%'"></div>
                            <div class="data-top">
                                <div class="chart-data led-number">{{ (leftPowerData[1] / 1000.0).toFixed(1) }}</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:' + leftPowerData[4] + '%;'"></div>
                            <div class="data-top">
                                <div class="chart-data led-number">{{ (leftPowerData[2] / 1000.0).toFixed(1) }}</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="(totalData[0] / 1000.0).toFixed(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="(totalData[1] / 1000.0).toFixed(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="(totalData[2] / 1000.0).toFixed(1)" 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="建材排放趋势">
                <my-chart :key="chartKey" id="right-build-chart" width="100%" height="100%" :render="renderChart6"></my-chart>
            </module-one-1-1>
            <module-one-1-1 label="用油排放趋势">
                <my-chart :key="chartKey" id="right-oil-chart" width="100%" height="100%" :render="renderChart7"></my-chart>
            </module-one-1-1>
            <module-one-1-1 label="用电排放趋势">
                <my-chart :key="chartKey" id="right-power-chart" width="100%" height="100%" :render="renderChart8"></my-chart>
            </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: {},
            allData: [],
            curMonthData: [],
            yearMonthData: {},
            leftOilData: [0, 0, 0, 0],
            leftPowerData: [0, 0, 0, 40, 60],
            totalData: [0, 0, 0],
        }
    },
    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)
            })
            this.loadData()
        },
        loadData() {
            let projectId = this.selProject.id
            let comId = this.selProject.comId
            let ajax = [
                this.$api.greenCarbon.groupByAll({
                    projectId: projectId,
                    comId: comId,
                }),
                this.$api.greenCarbon.groupCurrentMonth({
                    projectId: projectId,
                    comId: comId,
                    createTime: this.$dt(new Date()).format('YYYY-MM-01'),
                    updateTime: this.$dt(new Date()).endOf('month').format('YYYY-MM-DD'),
                }),
                this.$api.greenCarbon.groupByYearMonth({
                    projectId: projectId,
                    comId: comId,
                    createTime: this.$dt(new Date()).add(-11, 'month').format('YYYY-MM-01'),
                    updateTime: this.$dt(new Date()).endOf('month').format('YYYY-MM-DD'),
                }),
            ]
            this.$api.http.all(ajax).then((res) => {
                this.allData = res[0]
                this.curMonthData = res[1]
                this.yearMonthData = res[2]
                let tmps = this.allData.filter((it) => it.factorType == 2)
                this.leftOilData =
                    tmps.length > 0
                        ? [
                              tmps[0].practicalValue,
                              tmps[0].sumPracticalValue,
                              tmps[0].sumEmissionReduction,
                              (Math.round(tmps[0].sumEstimateValue / 10000) + 1) * 10,
                          ]
                        : [0, 0, 0, 0]
                tmps = this.allData.filter((it) => it.factorType == 3)
                this.leftPowerData =
                    tmps.length > 0
                        ? [
                              tmps[0].practicalValue,
                              tmps[0].sumPracticalValue,
                              tmps[0].sumEmissionReduction,
                              tmps[0].sumEstimateValue == 0 ? 0 : (tmps[0].sumPracticalValue * 100) / tmps[0].sumEstimateValue,
                              tmps[0].sumEstimateValue == 0 ? 0 : (tmps[0].sumEmissionReduction * 100) / tmps[0].sumEstimateValue,
                          ]
                        : [0, 0, 0, 0, 0]
                tmps = this.allData.filter((it) => it.factorType == 0)
                this.totalData[0] = tmps.length > 0 ? tmps[0].sumEstimateValue : 0
                this.totalData[1] = tmps.length > 0 ? tmps[0].sumPracticalValue : 0
                tmps = this.curMonthData.filter((it) => it.factorType == 0)
                this.totalData[2] = tmps.length > 0 ? tmps[0].emissionReduction : 0
                this.chartKey++
                setTimeout(this.loadData,60*1000);
            })
        },
        renderChart1() {
            let tmps = this.allData.filter((it) => it.factorType == 1)
            let datas = tmps.length > 0 ? [tmps[0].sumPracticalValue, tmps[0].sumEmissionReduction] : [0, 0]
            let is1K = this.$dpi() == '1K'
            let is2K = this.$dpi() == '2K'
            let option = {
                color: ['#ff9f1a', '#00a4e6'],
                tooltip: {
                    trigger: 'item',
                    valueFormatter: (v) => {
                        return v + 'T CO₂'
                    },
                    textStyle: {
                        fontSize: is1K ? 12 : is2K ? 14 : 24,
                    },
                },
                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: '50%',
                        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'),
                            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: (datas[0] / 1000.0).toFixed(1), name: '碳排放' },
                            { value: (datas[1] / 1000.0).toFixed(1), name: '碳减排' },
                        ],
                    },
                ],
            }
            return option
        },
        renderChart2() {
            let is1K = this.$dpi() == '1K'
            let is2K = this.$dpi() == '2K'
            let option = {
                series: [
                    {
                        type: 'gauge',
                        startAngle: 180,
                        endAngle: 0,
                        max: this.leftOilData[3],
                        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: (this.leftOilData[1] / 1000.0).toFixed(1),
                                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: this.leftOilData[3],
                        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: (this.leftOilData[2] / 1000.0).toFixed(1),
                                name: '碳减排(T CO₂)',
                            },
                        ],
                    },
                ],
            }
            return option
        },
        renderChart4() {
            let sum = (objs) => {
                let res = 0
                objs.forEach((it) => {
                    res += it || 0
                })
                return res
            }
            let is1K = this.$dpi() == '1K'
            let is2K = this.$dpi() == '2K'
            let datas = [0, 0, 0]
            datas[0] = this.yearMonthData.buildData ? sum(this.yearMonthData.buildData.emissionReduction.datas) : 0
            datas[1] = this.yearMonthData.oilData ? sum(this.yearMonthData.oilData.emissionReduction.datas) : 0
            datas[2] = this.yearMonthData.powerData ? sum(this.yearMonthData.powerData.emissionReduction.datas) : 0
            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,
                    },
                },
                tooltip: {
                    trigger: 'item',
                    valueFormatter: (v) => {
                        return v + 'T CO₂'
                    },
                    textStyle: {
                        fontSize: is1K ? 12 : is2K ? 14 : 24,
                    },
                },
                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: datas[2].toFixed(1), name: '电力' },
                            { value: datas[0].toFixed(1), name: '建材' },
                            { value: datas[1].toFixed(1), 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 = {
                grid: {
                    left: '5%',
                    right: '5%',
                    bottom: '0%',
                    top: '5%',
                    containLabel: true,
                },
                tooltip: {
                    trigger: 'axis',
                    valueFormatter: (v) => {
                        return v ? v : '- ' + 'T CO₂'
                    },
                    textStyle: {
                        fontSize: is1K ? 12 : is2K ? 14 : 24,
                    },
                },
                legend: {
                    top: is1K ? '0%' : is2K ? '0%' : '0%',
                    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,
                    },
                },
                calculable: true,
                xAxis: [
                    {
                        type: 'category',
                        boundaryGap: false,
                        data: this.yearMonthData?.totalData?.emissionReduction?.titles || [],
                        axisLabel: {
                            fontSize: is1K ? 12 : is2K ? 14 : 24,
                            color: '#a2c8f9',
                        },
                        splitLine: {
                            lineStyle: {
                                opacity: 0.1,
                            },
                        },
                    },
                ],
                yAxis: [
                    {
                        type: 'value',
                        axisLabel: {
                            formatter: '{value}T CO₂',
                            color: '#2ec2b3',
                            fontSize: is1K ? 12 : is2K ? 14 : 24,
                        },
                        splitLine: {
                            lineStyle: {
                                opacity: 0.1,
                            },
                        },
                    },
                ],
                series: [
                    {
                        name: '碳预估',
                        type: 'line',
                        smooth: true,
                        label: {
                            show: true,
                            color: '#4DAAFC',
                            fontSize: is1K ? 12 : is2K ? 14 : 24,
                        },
                        lineStyle: {
                            color: '#7ddff2',
                        },
                        itemStyle: {
                            normal: { areaStyle: { type: 'default', color: '#7ddff2', opacity: 0.1 } },
                        },
                        data: (this.yearMonthData?.totalData?.estimate?.datas || []).map((d) => (d || 0).toFixed(2)),
                    },
                    {
                        name: '碳排放',
                        type: 'line',
                        smooth: true,
                        label: {
                            show: true,
                            color: '#4DAAFC',
                            fontSize: is1K ? 12 : is2K ? 14 : 24,
                        },
                        lineStyle: {
                            color: '#006594',
                        },
                        itemStyle: {
                            normal: { areaStyle: { type: 'default', color: '#006594', opacity: 0.1 } },
                        },
                        data: (this.yearMonthData?.totalData?.practical?.datas || []).map((d) => (d || 0).toFixed(2)),
                    },
                    {
                        name: '碳减排',
                        type: 'line',
                        smooth: true,
                        label: {
                            show: true,
                            color: '#4DAAFC',
                            fontSize: is1K ? 12 : is2K ? 14 : 24,
                        },
                        lineStyle: {
                            color: '#7db800',
                        },
                        itemStyle: {
                            normal: { areaStyle: { type: 'default', color: '#7db800', opacity: 0.1 } },
                        },
                        data: (this.yearMonthData?.totalData?.emissionReduction?.datas || []).map((d) => (d || 0).toFixed(2)),
                    },
                ],
            }
            return option
        },
        renderChart6() {
            let is1K = this.$dpi() == '1K'
            let is2K = this.$dpi() == '2K'
            let option = {
                grid: {
                    left: '5%',
                    right: '5%',
                    bottom: '0%',
                    top: '15%',
                    containLabel: true,
                },
                tooltip: {
                    trigger: 'axis',
                    valueFormatter: (v) => {
                        return v ? v : ' - ' + 'T CO₂'
                    },
                    textStyle: {
                        fontSize: is1K ? 12 : is2K ? 14 : 24,
                    },
                },
                legend: {
                    top: is1K ? '0%' : is2K ? '0%' : '0%',
                    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,
                    },
                },
                calculable: true,
                xAxis: [
                    {
                        type: 'category',
                        boundaryGap: false,
                        data: this.yearMonthData?.buildData?.emissionReduction?.titles || [],
                        axisLabel: {
                            fontSize: is1K ? 12 : is2K ? 14 : 24,
                            color: '#a2c8f9',
                        },
                        splitLine: {
                            lineStyle: {
                                opacity: 0.1,
                            },
                        },
                    },
                ],
                yAxis: [
                    {
                        type: 'value',
                        axisLabel: {
                            formatter: '{value}T CO₂',
                            color: '#2ec2b3',
                            fontSize: is1K ? 12 : is2K ? 14 : 24,
                        },
                        splitLine: {
                            lineStyle: {
                                opacity: 0.1,
                            },
                        },
                    },
                ],
                series: [
                    {
                        name: '碳预估',
                        type: 'bar',
                        smooth: true,
                        label: {
                            show: false,
                            color: '#4DAAFC',
                            fontSize: is1K ? 12 : is2K ? 14 : 24,
                        },
                        lineStyle: {
                            color: '#7ddff2',
                        },
                        itemStyle: {
                            normal: { areaStyle: { type: 'default', color: '#7ddff2', opacity: 0.1 } },
                        },
                        data: (this.yearMonthData?.buildData?.estimate?.datas || []).map((d) => (d || 0).toFixed(2)),
                    },
                    {
                        name: '碳排放',
                        type: 'bar',
                        smooth: true,
                        label: {
                            show: false,
                            color: '#4DAAFC',
                            fontSize: is1K ? 12 : is2K ? 14 : 24,
                        },
                        lineStyle: {
                            color: '#006594',
                        },
                        itemStyle: {
                            normal: { areaStyle: { type: 'default', color: '#006594', opacity: 0.1 } },
                        },
                        data: (this.yearMonthData?.buildData?.practical?.datas || []).map((d) => (d || 0).toFixed(2)),
                    },
                    {
                        name: '碳减排',
                        type: 'bar',
                        smooth: true,
                        label: {
                            show: false,
                            color: '#4DAAFC',
                            fontSize: is1K ? 12 : is2K ? 14 : 24,
                        },
                        lineStyle: {
                            color: '#7db800',
                        },
                        itemStyle: {
                            normal: { areaStyle: { type: 'default', color: '#7db800', opacity: 0.1 } },
                        },
                        data: (this.yearMonthData?.buildData?.emissionReduction?.datas || []).map((d) => (d || 0).toFixed(2)),
                    },
                ],
            }
            console.log(option)
            return option
        },
        renderChart7() {
            let is1K = this.$dpi() == '1K'
            let is2K = this.$dpi() == '2K'
            let option = {
                grid: {
                    left: '5%',
                    right: '5%',
                    bottom: '0%',
                    top: '15%',
                    containLabel: true,
                },
                tooltip: {
                    trigger: 'axis',
                    valueFormatter: (v) => {
                        return v ? v : ' - ' + 'T CO₂'
                    },
                    textStyle: {
                        fontSize: is1K ? 12 : is2K ? 14 : 24,
                    },
                },
                legend: {
                    top: is1K ? '0%' : is2K ? '0%' : '0%',
                    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,
                    },
                },
                calculable: true,
                xAxis: [
                    {
                        type: 'category',
                        boundaryGap: false,
                        data: this.yearMonthData?.oilData?.emissionReduction?.titles || [],
                        axisLabel: {
                            fontSize: is1K ? 12 : is2K ? 14 : 24,
                            color: '#a2c8f9',
                        },
                        splitLine: {
                            lineStyle: {
                                opacity: 0.1,
                            },
                        },
                    },
                ],
                yAxis: [
                    {
                        type: 'value',
                        axisLabel: {
                            formatter: '{value}T CO₂',
                            color: '#2ec2b3',
                            fontSize: is1K ? 12 : is2K ? 14 : 24,
                        },
                        splitLine: {
                            lineStyle: {
                                opacity: 0.1,
                            },
                        },
                    },
                ],
                series: [
                    {
                        name: '碳预估',
                        type: 'line',
                        smooth: true,
                        label: {
                            show: true,
                            color: '#4DAAFC',
                            fontSize: is1K ? 12 : is2K ? 14 : 24,
                        },
                        lineStyle: {
                            color: '#7ddff2',
                        },
                        itemStyle: {
                            normal: { areaStyle: { type: 'default', color: '#7ddff2', opacity: 0.1 } },
                        },
                        data: (this.yearMonthData?.oilData?.estimate?.datas || []).map((d) => (d || 0).toFixed(2)),
                    },
                    {
                        name: '碳排放',
                        type: 'line',
                        smooth: true,
                        label: {
                            show: true,
                            color: '#4DAAFC',
                            fontSize: is1K ? 12 : is2K ? 14 : 24,
                        },
                        lineStyle: {
                            color: '#006594',
                        },
                        itemStyle: {
                            normal: { areaStyle: { type: 'default', color: '#006594', opacity: 0.1 } },
                        },
                        data: (this.yearMonthData?.oilData?.practical?.datas || []).map((d) => (d || 0).toFixed(2)),
                    },
                    {
                        name: '碳减排',
                        type: 'line',
                        smooth: true,
                        label: {
                            show: true,
                            color: '#4DAAFC',
                            fontSize: is1K ? 12 : is2K ? 14 : 24,
                        },
                        lineStyle: {
                            color: '#7db800',
                        },
                        itemStyle: {
                            normal: { areaStyle: { type: 'default', color: '#7db800', opacity: 0.1 } },
                        },
                        data: (this.yearMonthData?.oilData?.emissionReduction?.datas || []).map((d) => (d || 0).toFixed(2)),
                    },
                ],
            }
            return option
        },
        renderChart8() {
            let is1K = this.$dpi() == '1K'
            let is2K = this.$dpi() == '2K'
            let option = {
                grid: {
                    left: '5%',
                    right: '5%',
                    bottom: '0%',
                    top: '15%',
                    containLabel: true,
                },
                tooltip: {
                    trigger: 'axis',
                    valueFormatter: (v) => {
                        return v ? v : ' - ' + 'T CO₂'
                    },
                    textStyle: {
                        fontSize: is1K ? 12 : is2K ? 14 : 24,
                    },
                },
                legend: {
                    top: is1K ? '0%' : is2K ? '0%' : '0%',
                    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,
                    },
                },
                calculable: true,
                xAxis: [
                    {
                        type: 'category',
                        boundaryGap: false,
                        data: this.yearMonthData?.powerData?.emissionReduction?.titles || [],
                        axisLabel: {
                            fontSize: is1K ? 12 : is2K ? 14 : 24,
                            color: '#a2c8f9',
                        },
                        splitLine: {
                            lineStyle: {
                                opacity: 0.1,
                            },
                        },
                    },
                ],
                yAxis: [
                    {
                        type: 'value',
                        axisLabel: {
                            formatter: '{value}T CO₂',
                            color: '#2ec2b3',
                            fontSize: is1K ? 12 : is2K ? 14 : 24,
                        },
                        splitLine: {
                            lineStyle: {
                                opacity: 0.1,
                            },
                        },
                    },
                ],
                series: [
                    {
                        name: '碳预估',
                        type: 'bar',
                        smooth: true,
                        label: {
                            show: false,
                            color: '#4DAAFC',
                            fontSize: is1K ? 12 : is2K ? 14 : 24,
                        },
                        lineStyle: {
                            color: '#7ddff2',
                        },
                        itemStyle: {
                            normal: { areaStyle: { type: 'default', color: '#7ddff2', opacity: 0.1 } },
                        },
                        data: (this.yearMonthData?.powerData?.estimate?.datas || []).map((d) => (d || 0).toFixed(2)),
                    },
                    {
                        name: '碳排放',
                        type: 'bar',
                        smooth: true,
                        label: {
                            show: false,
                            color: '#4DAAFC',
                            fontSize: is1K ? 12 : is2K ? 14 : 24,
                        },
                        lineStyle: {
                            color: '#006594',
                        },
                        itemStyle: {
                            normal: { areaStyle: { type: 'default', color: '#006594', opacity: 0.1 } },
                        },
                        data: (this.yearMonthData?.powerData?.practical?.datas || []).map((d) => (d || 0).toFixed(2)),
                    },
                    {
                        name: '碳减排',
                        type: 'bar',
                        smooth: true,
                        label: {
                            show: false,
                            color: '#4DAAFC',
                            fontSize: is1K ? 12 : is2K ? 14 : 24,
                        },
                        lineStyle: {
                            color: '#7db800',
                        },
                        itemStyle: {
                            normal: { areaStyle: { type: 'default', color: '#7db800', opacity: 0.1 } },
                        },
                        data: (this.yearMonthData?.powerData?.emissionReduction?.datas || []).map((d) => (d || 0).toFixed(2)),
                    },
                ],
            }
            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>