<template>
    <div class="box">
        <div class="a">
            <img src="../../assets/img/可调负荷/可调图标--未选中.png" alt="" @click="sendMessageToCSharp" />
        </div>
        <div class="left">
            <img src="../../assets/img/标题/碳资产管理-熟料生产核算边界.png" class="title" />
            <div class="slbjzl">
                <div class="imgBox">
                    <img src="../../assets/img/小标题栏.png" class="img" />
                    <p>熟料边界总览</p>
                </div>
                <div class="top">
                    <p>单位：tCO2</p>
                    <div class="data">
                        <span :class="res == '年' ? 'active' : ''" @click="res = '年'">年</span>
                        <span :class="res == '月' ? 'active' : ''" @click="res = '月'">月</span>
                    </div>
                </div>
                <div id="slbjzl">
                    <div class="first_one">
                        <div class="one">
                            <p>2641.76</p>
                            <p>熟料工段排放量</p>
                        </div>
                        <div class="two">
                            <p>0</p>
                            <p>化石燃料燃烧排放</p>
                        </div>
                        <div class="three">
                            <p>2641.76</p>
                            <p>消耗电力产生的排放</p>
                        </div>
                        <div class="four">
                            <p>257.1</p>
                            <p>过程排放核算</p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="tlt">
                <div class="imgBox">
                    <img src="../../assets/img/小标题栏.png" class="img" />
                    <p>碳流图</p>
                </div>
                <div class="top">
                    <p>单位：tCO2</p>
                </div>
                <div id="tlt">
          <div class="zong">
            <p>总量</p>
            <p class="count">2641.76</p>
          </div>
          <div class="mei">
            <p>煤</p>
            <p class="count">28.51</p>
          </div>
          <div class="dian">
            <p>电</p>
            <p class="count">871</p>
          </div>
          <div class="chaiyou">
            <p>柴油</p>
            <p class="count">329</p>
          </div>
          <div class="ycl">
            <p>原材料</p>
            <p class="count">255</p>
          </div>
          <div class="m_one">1号生产线<span class="count">747.24</span></div>
          <div class="m_two">2号生产线<span class="count">128.53</span></div>
          <div class="m_three">3号生产线<span class="count">114.19</span></div>
          <div class="d_one">1号生产线<span class="count">747.24</span></div>
          <div class="d_two">2号生产线<span class="count">128.53</span></div>
          <div class="d_three">3号生产线<span class="count">114.19</span></div>
          <div class="chai_one">1号生产线<span class="count">747.24</span></div>
          <div class="chai_two">2号生产线<span class="count">128.53</span></div>
          <div class="chai_three">
            3号生产线<span class="count">114.19</span>
          </div>
          <div class="ycl_one">1号生产线<span class="count">747.24</span></div>
          <div class="ycl_two">2号生产线<span class="count">128.53</span></div>
          <div class="ycl_three">
            3号生产线<span class="count">114.19</span>
          </div>
        </div>
            </div>
            <div class="tpfl">
                <div class="imgBox">
                    <img src="../../assets/img/小标题栏.png" class="img" />
                    <p>碳排放量</p>
                </div>
                <div id="tpfl">
                    <div class="data">
                        <img src="../../assets/TZCGL/edit.png" alt="" class="img">
                    </div>
                    <div class="calendars">
                        <div class="title_rl">
                            <img src="../../assets/TZCGL/左.png" alt="" @click="getcalendar('prev-month')" />
                            <!-- <span @click="getcalendar('prev-month')">上</span> -->
                            <span>{{ ddd.getFullYear() }}年 {{ ddd.getMonth()+1 }}月</span>
                            <img src="../../assets/TZCGL/右.png" alt="" @click="getcalendar('next-month')" />
                            <!-- <span @click="getcalendar('next-month')">下</span> -->
                        </div>
                        <el-calendar v-model="ddd" ref="getcalendar">
                            <!-- 这里使用的是 2.5 slot 语法，对于新项目请使用 2.6 slot 语法-->
                            <template slot="dateCell" slot-scope="{date, data}">
                                <p :class="data.isSelected ? 'is-selected' : ''">
                                    <span>{{ data.day.split('-')[2] }}</span>
                                    <!-- {{ date }} -->
                                <p style="color: #31D3D1" v-if="data.type == 'current-month'" class="lan">{{ "12.45" }}</p>
                                <p style="color: #31D3D1" v-if="data.type == 'prev-month'" class="lan">0</p>
                                <p style="color: #31D3D1" v-if="data.type == 'next-month'" class="lan">0</p>
                                <!-- {{  data.type}} -->
                                </p>
                            </template>
                        </el-calendar>
                    </div>
                </div>
            </div>
        </div>
        <div class="right">
            <div class="tpfqd">
                <div class="imgBox">
                    <img src="../../assets/img/小标题栏.png" class="img" />
                    <p>碳排放强度</p>
                </div>
                <div class="chartBox">
                    <div id="tpfqd">
                    </div>
                </div>
            </div>
            <div class="sstpf">
                <div class="imgBox">
                    <img src="../../assets/img/小标题栏.png" class="img" />
                    <p>实时碳排放</p>
                </div>
                <div class="chartBox">
                    <div id="sstpf"></div>
                </div>
            </div>
            <div class="pfzb">
                <div class="imgBox">
                    <img src="../../assets/img/小标题栏.png" class="img" />
                    <p>排放占比</p>
                </div>
                <div id="pfzb">
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import "../../assets/CSS/tzcglsl.css";
export default {
    data() {
        return {
            ddd: new Date(),
            res: "年",
            tableData: [
                {
                    date1: "水泥单位产品综合能耗",
                    date2: "80kgce/t",
                    date3: "84kgce/t",
                    date4: "5%",
                },
                {
                    date1: "水泥大内产品综合电耗",
                    date2: "40kWh/t",
                    date3: "53kWh/t",
                    date4: "32.5%",
                },
                {
                    date1: "熟料单位产品综合能耗",
                    date2: "100kgce/t",
                    date3: "114kgce/t",
                    date4: "14%",
                },
                {
                    date1: "熟料单位产品综合电耗",
                    date2: "48kWh/t",
                    date3: "55kWh/t",
                    date4: "14.58%",
                },
                {
                    date1: "熟料单位产品综合煤耗",
                    date2: "94kgce/",
                    date3: "108kgce/",
                    date4: "14.89%",
                },
            ],
            devices: [
                {
                    date1: "回转窑",
                    date2: true,
                    date3: "102.00",
                },
                {
                    date1: "熟料收尘",
                    date2: true,
                    date3: "29.00",
                },
                {
                    date1: "篦冷机",
                    date2: true,
                    date3: "45.00",
                },
                {
                    date1: "生料收尘",
                    date2: false,
                    date3: "102.00",
                },
                {
                    date1: "回转窑",
                    date2: true,
                    date3: "29.00",
                },
                {
                    date1: "熟料收尘",
                    date2: false,
                    date3: "45.00",
                }
            ],
            option1: {
                // title: {
                //     text: "单位:tCO2",

                // },
                // tooltip: {
                //     trigger: 'axis',
                // },
                grid: {
                    left: "5%",
                    right: "4%",
                    bottom: "5%",
                    // containLabel: true
                },
                // toolbox: {
                //     feature: {
                //         saveAsImage: {}
                //     }
                // },
                xAxis: {
                    type: "category",
                    // boundaryGap: false,
                    data: ["","","12.20","","","12.21","","","12.22","","", "12.23"],
                    axisLabel: {
                        show: true,
                        interval: 0,
                        textStyle: {
                            color: "#fff",
                            fontSize: 20,
                        },
                    },
                    axisTick: {
            show:false,
            interval: true, // 设置刻度点连续显示
          },
                },
                yAxis: {
                    type: "value",
                    // boundaryGap: true,
                    name: "单位:tCO2",
                    nameTextStyle: {
                        color: "#fff",
                        fontSize: 20,
                        padding: 10,
                    },
                    data: ["0", "10", "20", "30", "40"],
                    axisLabel: {
                        show: true,
                        textStyle: {
                            color: "#fff",
                            fontSize: 20,
                        },
                    }
                },
                legend: {
                    data: [
                        {
                            icon: "rect",
                            name: "1号线",
                        },
                        {
                            icon: "rect",
                            name: "2号线",
                        },
                        {
                            icon: "rect",
                            name: "3号线",
                        }
                    ],
                    x: "center",
                    y: "top",
                    itemGap: 200,
                    textStyle: {
                        color: "#fff",
                        fontSize: "28px",
                    },
                    fontSize: "28px",
                },
                series: [
                    {
                        name: "1号线",
                        type: "line",
                        data: [5, 18, 31, 18, 21, 20, 30, 20, 23, 19, 30, 20, 28, 8],
                        lineStyle: {
                            width: 5,
                            color: "#09E83E",
                        },
                        // itemStyle: {
                        //     color: "#3FFF5A",
                        // },
                    },
                    {
                        name: "2号线",
                        type: "line",
                        // stack: 'Total',
                        symbol: "circle",
                        symbolSize: 1,
                        data: [18, 8, 11, 5, 10, 11, 10, 12, 4, 7, 13, 20,12,23,15],
                        lineStyle: {
                            width: 5,
                            color: "#00B0FF",
                        },
                        itemStyle: {
                            color: "#00B0FF",
                        },
                    },
                    {
                        name: "3号线",
                        type: "line",
                        // stack: 'Total',
                        symbol: "circle",
                        symbolSize: 1,
                        data: [21, 30, 36, 28, 38, 28, 25, 21,23,15,26,32,24,12],
                        lineStyle: {
                            width: 5,
                            color: "#18FCFF",
                        },
                        itemStyle: {
                            color: "#18FCFF",
                        },
                    },
                ],
            },
            option2: {
                // title: {
                //     text: "单位:tCO2",

                // },
                // tooltip: {
                //     trigger: 'axis',
                // },
                grid: {
                    left: "5%",
                    right: "4%",
                    bottom: "5%",
                    // containLabel: true
                },
                // toolbox: {
                //     feature: {
                //         saveAsImage: {}
                //     }
                // },
                xAxis: {
                    type: "category",
                    // boundaryGap: false,
                    data: ["","","12.20","","","12.21","","","12.22","","", "12.23"],
                    axisLabel: {
                        show: true,
                        interval: 0,
                        textStyle: {
                            color: "#fff",
                            fontSize: 20,
                        },
                    },
                    axisTick: {
            // show:false,
            interval: true, // 设置刻度点连续显示
          },
                },
                yAxis: {
                    type: "value",
                    // boundaryGap: true,
                    name: "单位:tCO2",
                    nameTextStyle: {
                        color: "#fff",
                        fontSize: 20,
                        padding: 10,
                    },
                    data: ["0", "10", "20", "30", "40"],
                    axisLabel: {
                        show: true,
                        textStyle: {
                            color: "#fff",
                            fontSize: 20,
                        },
                    }
                },
                legend: {
                    data: [
                        {
                            icon: "rect",
                            name: "1号线",
                        },
                        {
                            icon: "rect",
                            name: "2号线",
                        },
                        {
                            icon: "rect",
                            name: "3号线",
                        }
                    ],
                    x: "center",
                    y: "top",
                    itemGap: 200,

                    textStyle: {
                        color: "#fff",
                        fontSize: "28px",
                    },
                    fontSize: "28px",
                },
                series: [
                    {
                        name: "1号线",
                        type: "line",
                        symbol: "circle",
                        symbolSize: 1,
                        data: [5, 18, 31, 18, 21, 20, 30, 20, 23, 19, 30, 20, 28, 8],
                        lineStyle: {
                            width: 5,
                            color: "#09E83E",
                        },
                        itemStyle: {
                            color: "#09E83E",
                        },
                    },
                    {
                        name: "2号线",
                        type: "line",
                        // stack: 'Total',
                        symbol: "circle",
                        symbolSize: 1,
                        data: [18, 8, 11, 5, 10, 11, 10, 12, 4, 7, 13, 20,12,23,15],
                        lineStyle: {
                            width: 5,
                            color: "#00B0FF",
                        },
                        itemStyle: {
                            color: "#00B0FF",
                        },
                    },
                    {
                        name: "3号线",
                        type: "line",
                        // stack: 'Total',
                        symbol: "circle",
                        symbolSize: 1,
                        data: [21, 30, 36, 28, 38, 28, 25, 21,23,15,26,32,24,12],
                        lineStyle: {
                            width: 5,
                            color: "#18FCFF",
                        },
                        itemStyle: {
                            color: "#18FCFF",
                        },
                    },
                ],
            },
            //桑基图。目前不需要
            // option3: {
            //     tooltip: {
            //         trigger: "item",
            //         triggerOn: "mousemove",
            //     },
            //     grid: {
            //         top: "25px",
            //         left: "10px",
            //         right: "10px",
            //         bottom: "6%",
            //         containLabel: true,
            //     },
            //     series: {
            //         type: "sankey",
            //         layout: "none",
            //         top: "2%",
            //         bottom: "5%",
            //         left: "5%",
            //         right: "13%",
            //         lineStyle: {
            //             opacity: 0.3,
            //             color: "gradient",
            //             curveness: 0.7,
            //         },
            //         label: {
            //             color: "#fff",
            //             fontSize: 16,
            //             formatter: function (params) {
            //                 return params.name + params.value
            //             },
            //             rich: {
            //                 white: {
            //                     fontSize: 20,
            //                     padding: [10, 0, 0, 0],
            //                 },
            //             },
            //         },
            //         nodeGap: 10,
            //         layoutIterations: 1,
            //         emphasis: {
            //             // focus: "adjacency",
            //         },
            //         data: [
            //             { name: "总量", value: "2641.76", itemStyle: { color: "#5FE3D9" }, depth: 0 },
            //             { name: "原材料", value: "461.71", itemStyle: { color: "#55A9CE" }, depth: 1 },
            //             { name: "电", value: "871", itemStyle: { color: "#55A9CE" }, depth: 1 },
            //             { name: "柴油", value: "290.76", itemStyle: { color: "#55A9CE" }, depth: 1 },
            //             { name: "煤", value: "28.51", itemStyle: { color: "#55A9CE" }, depth: 1 },
            //             { name: "1号生产线", value: "28.51", id: "1", itemStyle: { color: "#52DBF1" }, depth: 2 },
            //             { name: "2号生产线", value: "28.51", id: "2", itemStyle: { color: "#52DBF1" }, depth: 2 },
            //             { name: "3号生产线", value: "28.51", id: "3", itemStyle: { color: "#52DBF1" }, depth: 2 },
            //             { name: "1号生产线", value: "28.51", id: "11", itemStyle: { color: "#52DBF1" }, depth: 2 },
            //             { name: "2号生产线", value: "28.51", id: "22", itemStyle: { color: "#52DBF1" }, depth: 2 },
            //             { name: "3号生产线", value: "28.51", id: "33", itemStyle: { color: "#52DBF1" }, depth: 2 },
            //             { name: "1号生产线", value: "28.51", id: "111", itemStyle: { color: "#52DBF1" }, depth: 2 },
            //             { name: "2号生产线", value: "28.51", id: "222", itemStyle: { color: "#52DBF1" }, depth: 2 },
            //             { name: "3号生产线", value: "28.51", id: "333", itemStyle: { color: "#52DBF1" }, depth: 2 },
            //             { name: "1号生产线", value: "28.51", id: "1111", itemStyle: { color: "#52DBF1" }, depth: 2 },
            //             { name: "2号生产线", value: "28.51", id: "2222", itemStyle: { color: "#52DBF1" }, depth: 2 },
            //             { name: "3号生产线", value: "28.51", id: "3333", itemStyle: { color: "#52DBF1" }, depth: 2 },
            //         ],
            //         links: [
            //             // L1→L3	 4509
            //             { source: "总量", target: "柴油", value: 1200 },
            //             { source: "总量", target: "电", value: 1200 },
            //             { source: "总量", target: "原材料", value: 1200 },
            //             { source: "总量", target: "煤", value: 1200 },
            //             // L1→L2→L3	 2404
            //             { source: "电", target: "1", value: 300 },
            //             { source: "电", target: "2", value: 300 },
            //             { source: "电", target: "3", value: 300 },
            //             { source: "煤", target: "11", value: 300 },
            //             { source: "煤", target: "22", value: 300 },
            //             { source: "煤", target: "33", value: 300 },
            //             { source: "柴油", target: "111", value: 300 },
            //             { source: "柴油", target: "222", value: 300 },
            //             { source: "柴油", target: "333", value: 300 },
            //             { source: "原材料", target: "1111", value: 300 },
            //             { source: "原材料", target: "2222", value: 300 },
            //             { source: "原材料", target: "3333", value: 300 },
            //         ],
            //     },
            // },
        };
    },
    methods: {
        //U3D交互的绑定
        sendMessageToCSharp() {
            // window.vuplex.postMessage({
            //     type: "Tog",
            //     message: "碳资产管理_true",
            // });
            window.vuplex.postMessage("碳资产管理-熟料生产核算边界");
            this.$router.push('/tzcgl');
        },
        defineEcharts(dom, option) {
            var chartDom = document.getElementById(dom);
            var myChart = this.$echarts.init(chartDom);
            option && myChart.setOption(option);
        },
        tableRowClassName({ row, rowIndex }) {
            if ((rowIndex + 1) % 2 === 0) {
                return "success-row";
            }
            return "";
        },
        getbing() {
            var trafficWay = [{
                name: '1号生产线',
                value: 73.02
            }, {
                name: '2号生产线',
                value: 12.6
            }, {
                name: '3号生产线',
                value: 171.49
            }];
            var data = [];
            var color = ['#7EFAB7', '#55A9CE', '#53DCF1']
            for (var i = 0; i < trafficWay.length; i++) {
                data.push({
                    value: trafficWay[i].value,
                    name: trafficWay[i].name,
                    itemStyle: {
                        normal: {
                            borderWidth: 5,
                            shadowBlur: 20,
                            borderColor: color[i],
                            shadowColor: color[i]
                        }
                    }
                }, {
                    value: 6,
                    name: '',
                    itemStyle: {
                        normal: {
                            label: {
                                show: false
                            },
                            labelLine: {
                                show: false
                            },
                            color: 'rgba(0, 0, 0, 0)',
                            borderColor: 'rgba(0, 0, 0, 0)',
                            borderWidth: 0
                        }
                    }
                });
            }
            var seriesOption = [{
                name: '',
                type: 'pie',
                clockWise: false,
                radius: [115, 119],
                center:["36%","56%"],
                hoverAnimation: false,
                itemStyle: {
                    normal: {
                        label: {
                            show: true,
                            position: 'outside',
                            color: '#ddd',
                            formatter: function (params) {
                                var percent = 0;
                                var total = 0;
                                for (var k = 0; k < trafficWay.length; k++) {
                                    total += trafficWay[k].value;
                                }
                                percent = ((params.value / total) * 100).toFixed(0);
                                if (params.name !== '') {
                                    if(params.name=="1号生产线"){
                                    return "{colors1|" + percent + "%" + "}" + '\n' + '\n' + "{names|" + params.name + "}";
                                }else if(params.name == "2号生产线"){
                                    return "{colors2|" + percent + "%" + "}" + '\n' + '\n' + "{names|" + params.name + "}";
                                }else{
                                    return "{colors3|" + percent + "%" + "}" + '\n' + '\n' + "{names|" + params.name + "}";
                                }
                            } else {
                                    return '';
                                }
                            },
                            rich: {
                                colors1: {
                                    color: color[0],
                                    fontSize: 40,
                                    align: "left",
                                },
                                colors2: {
                                    color: color[2],
                                    fontSize: 40,
                                    align: "left",
                                },
                                colors3: {
                                    color: color[1],
                                    fontSize: 40,
                                    align: "left",
                                },
                                names: {
                                    color: "#fff",
                                    fontSize: 30,
                                }
                            },
                        },
                        labelLine: {
                            length: 30,
                            length2: 60,
                            show: true,
                            color: '#00ffff'
                        }
                    }
                },
                data: data
            }];
            let option = {
                // backgroundColor: '#0A2E5D',
                color: color,
                title: {
                    text: '257.1t',
                    top: '52%',
                    textAlign: "center",
                    left: "36%",
                    textStyle: {
                        color: '#fff',
                        fontSize: 32,
                        fontWeight: '400'
                    }
                },
                graphic: {
                    elements: [{
                        type: "image",
                        z: 3,
                        style: {
                            // image: "transparent",
                            width: 178,
                            height: 178
                        },
                        left: 'center',
                        top: 'center',
                        position: [100, 100]
                    }]
                },
                tooltip: {
                    show: false
                },
                legend: {
                    itemWidth:16,
                    itemHeight:16,
                    icon: "rect",
                    orient: '',
                    x: 'right',
                    // selectedMode: 'single',
                    data: [
                        {
                            name: '1号生产线',
                            value: "13.68"
                        },
                        {
                            name: '2号生产线',
                            value: "13.68"
                        },
                        {
                            name: '3号生产线',
                            value: "13.68"
                        }],
                    left: 760,
                    bottom: 120,
                    align: 'left',
                    formatter: ((name) => {
                        const item = trafficWay.filter((item) => item.name === name)[0];
                        if(name=="1号生产线"){
                            return "\t\t\t\t"+`{name|${name}}`+"\t\t\t\t" + `{num1|${item.value}}\t\t{name|tCO2}`;
                        }else if(name=="2号生产线"){
                            return "\t\t\t\t"+`{name|${name}}`+"\t\t\t\t" + `{num2|${item.value}}\t\t{name|tCO2}`;
                        }else{
                            return "\t\t\t\t"+`{name|${name}}`+"\t\t\t\t" + `{num3|${item.value}}\t\t{name|tCO2}`;
                        }
                    }),
                    textStyle: {
                        color: "#fff",
                        rich: {
                            name: {
                                fontSize: 28,
                                // color: "#fff",
                            },
                            num1: {
                                fontSize: 32,
                                color: color[0],
                            },
                            num2: {
                                fontSize: 32,
                                color: color[2],
                            },
                            num3: {
                                fontSize: 32,
                                color: color[1],
                            }
                        },
                    },
                    itemGap: 20
                },
                toolbox: {
                    show: false
                },
                series: seriesOption
            }
            let chartDom = document.getElementById("pfzb");
            let myChart = this.$echarts.init(chartDom);
            myChart.setOption(option);
        },
        getcalendar() {
            if(message=="prev-month"){
            this.$refs.getcalendar.selectDate("prev-month")
            }else if(message=="next-month"){
                this.$refs.getcalendar.selectDate("next-month")
            }else{
            this.$refs.getcalendar.selectDate("today")
            }
            console.log(this.$refs.getcalendar)
        }
    },
    created() {
    // if (window.vuplex) {
    //   addMessageListener();
    // } else {
    //   window.addEventListener("vuplexready", addEventListener);
    // } function addEventListener() {
    //   window.vuplex.addEventListener("message", function (event) {
    //     let json = event.data;
    //     console.log("JSON received" + json);
    //   })
    // }
  },
    mounted() {
        this.defineEcharts("tpfqd", this.option1);
        this.defineEcharts("sstpf", this.option2);
       // this.defineEcharts("tlt", this.option3);
        this.$nextTick(() => {
            this.getbing();
        })
        // this.defineEcharts("nysl", this.option3);
        // this.defineEcharts("nhfx", this.option4);
    },
};
</script>
<style scoped lang="less">
.box {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    background-color: transparent;
    display: flex;
    background-image: url(../../assets/img/左遮罩.png), url(../../assets/img/右遮罩.png);
    padding-top: 400px;
    justify-content: space-between;
    position: relative;

    .a {
        position: absolute;
        width: 1300px;
        z-index: 2;
        top: 420px;
        right: 480px;
        z-index: 100;

        img {
            margin-right: 102px;
            pointer-events: all;
            cursor: pointer;
        }
    }

    .left {
        width: 1237px;
        height: 2500px;
        margin-left: 61px;
        background-image: url("../../assets/img/侧边.png");
        padding-left: 59px;
        padding-right: 45px;
        box-sizing: border-box;

        .title {
            margin-top: 15px;
            margin-left: 60px;
        }

        .slbjzl {
            position: relative;
            margin-top: 56px;

            .imgBox {
                height: 93px;
                width: 1156px;

                p {
                    position: absolute;
                    color: #fff;
                    top: 20px;
                    left: 50px;
                    font-size: 30px;
                    font-family: "MicrosoftYaHei";
                }
            }

            .top {
                display: flex;
                justify-content: space-between;
                margin-top: 30px;

                p {
                    font-size: 24px;
                    color: #fff;
                }

                .data {
                    // position: absolute;
                    font-size: 20px;
                    font-family: "DOUYU";
                    color: #ffffff;
                    line-height: 18px;
                    display: flex;
                    // right: 0;
                    // top: 120px;
                    z-index: 1;

                    span {
                        width: 122px;
                        height: 38px;
                        margin: 10px;
                        display: block;
                        line-height: 38px;
                        text-align: center;
                        cursor: pointer;
                    }

                    .active {
                        background: linear-gradient(to right,
                                rgba(33, 76, 124, 0.3) 20%,
                                rgba(152, 207, 230, 0.3) 100%,
                                rgba(33, 76, 124, 0.3) 20%);
                    }
                }
            }

            #slbjzl {
                margin-top: 20px;
                width: 1151px;
                height: 342px;
                // background: #37433F;
                background: url(../../assets/TZCGL/背景框4.png);
                background-size: cover;
                opacity: 0.6;
                padding-top: 27px;
                box-sizing: border-box;

                .first_one {
                    display: flex;
                    margin-top: 52px;
                    justify-content: space-around;

                    .one {
                        width: 190px;
                        height: 190px;
                        color: #3CFF1C;
                        text-align: center;

                        p:nth-child(1) {
                            margin-top: 60px;
                            height: 30px;
                            line-height: 30px;
                        }

                        p:nth-child(2) {
                            width: 100px;
                            margin-top: 10px;
                            font-size: 22px;
                            margin-left: 42px;
                            text-align: center;
                        }

                        font-size: 28px;
                        background: url(../../assets/TZCGL/组\ 1185.png);
                    }

                    .two {
                        width: 190px;
                        height: 190px;
                        color: #29D7EA;
                        text-align: center;

                        p:nth-child(1) {
                            margin-top: 60px;
                            height: 30px;
                            line-height: 30px;
                        }

                        p:nth-child(2) {
                            width: 100px;
                            margin-top: 10px;
                            font-size: 22px;
                            margin-left: 42px;
                            text-align: center;
                        }

                        font-size: 28px;
                        background: url(../../assets/TZCGL/组\ 1187.png);
                    }

                    .three {
                        width: 190px;
                        height: 190px;
                        color: #3CFF1C;
                        text-align: center;

                        p:nth-child(1) {
                            margin-top: 60px;
                            height: 30px;
                            line-height: 30px;
                        }

                        p:nth-child(2) {
                            width: 120px;
                            margin-top: 10px;
                            font-size: 22px;
                            margin-left: 42px;
                            text-align: center;
                        }

                        font-size: 28px;
                        background: url(../../assets/TZCGL/组\ 1185.png);
                    }

                    .four {
                        width: 190px;
                        height: 190px;
                        color: #29D7EA;
                        text-align: center;

                        p:nth-child(1) {
                            margin-top: 60px;
                            height: 30px;
                            line-height: 30px;
                        }

                        p:nth-child(2) {
                            width: 100px;
                            margin-top: 10px;
                            font-size: 22px;
                            margin-left: 42px;
                            text-align: center;
                        }

                        font-size: 28px;
                        background: url(../../assets/TZCGL/组\ 1187.png);
                    }
                }
            }
        }

        .tlt {
            position: relative;
            margin-top: 50px;

            .imgBox {
                height: 93px;
                width: 1156px;

                p {
                    position: absolute;
                    color: #fff;
                    top: 20px;
                    left: 50px;
                    font-size: 30px;
                    font-family: "MicrosoftYaHei";
                }
            }
            .top{
        position: absolute;
        top: 102px;
        left: 20px;
        color: #fff;
        font-size: 20px;
        font-family: MicrosoftYaHei;
      }
            #tlt {
                width: 1155px;
                height: 720px;
                margin-top: 50px;
                background: url(../../assets/liutu/碳2.png);
                background-size: cover;
                position: relative;
        font-size: 24px;
        color: #ffffff;
        font-family: MicrosoftYaHei;
            }
        }

        .tpfl {
            position: relative;
            margin-top: 56px;

            .imgBox {
                height: 93px;
                width: 1156px;

                p {
                    position: absolute;
                    color: #fff;
                    top: 20px;
                    left: 50px;
                    font-size: 30px;
                    font-family: "MicrosoftYaHei";
                }
            }

            #tpfl {
                width: 1155px;
                height: 500px;
                margin-top: 50px;

                .data {
                    position: absolute;
                    width: 123px;
                    text-align: center;
height: 38px;
background: linear-gradient(to right,
                                rgba(33, 76, 124, 0.3) 20%,
                                rgba(37, 138, 210, 1) 100%,
                                rgba(33, 76, 124, 0.3) 20%);
opacity: 1;
                    right: 0;
                    top: 120px;
                    z-index: 1;

                    .img {
                        width: 29px;
height: 31px;
opacity: 1
                    }
                }
            }
        }
    }

    .right {
        width: 1237px;
        height: 2500px;
        margin-right: 61px;
        background-image: url("../../assets/img/侧边.png");
        padding-left: 59px;
        padding-right: 45px;
        box-sizing: border-box;

        .tpfqd {
            position: relative;
            margin-top: 130px;

            .imgBox {
                height: 93px;
                width: 1156px;

                p {
                    position: absolute;
                    color: #fff;
                    top: 20px;
                    left: 50px;
                    font-size: 30px;
                    font-family: "MicrosoftYaHei";
                }
            }

            .chartBox {
                margin-top: 50px;

                #tpfqd {
                    width: 1156px;
                    height: 600px;
                    font-size: 20px;
                    color: #fff;
                    position: relative;
                }
            }
        }

        .sstpf {
            position: relative;
            margin-top: 56px;

            .imgBox {
                height: 93px;
                width: 1156px;

                p {
                    position: absolute;
                    color: #fff;
                    top: 20px;
                    left: 50px;
                    font-size: 30px;
                    font-family: "MicrosoftYaHei";
                }
            }

            #sstpf {
                width: 1155px;
                height: 600px;
                margin-top: 50px;
            }
        }

        .pfzb {
            position: relative;
            margin-top: 56px;


            .imgBox {
                height: 93px;
                width: 1156px;

                p {
                    position: absolute;
                    color: #fff;
                    top: 20px;
                    left: 50px;
                    font-size: 30px;
                    font-family: "MicrosoftYaHei";
                }
            }

            #pfzb {
                width: 1155px;
                height: 400px;
                margin-top: 50px;
            }
        }
    }
}

/deep/ .calendars {
    .title_rl {
        margin: 0 auto;
        text-align: center;
        width: 300px;
        height: 40px;
        display: flex;
        justify-content: space-around;
        align-items: center;
        color: #fff;
        font-size: 30px;
        cursor: pointer;
    }

    p.lan {
        font-size: 27px;
        color: #31D3D1 !important;
    }

    .el-calendar {
        background: transparent;
    }

    .el-calendar__header {
        display: none !important;
    }

    .el-calendar__body {
        padding: 0px;
        font-size: 27px;
        background: transparent;
    }

    .el-calendar-table .el-calendar-day {
        height: 50px !important;
    }

    .el-calendar__body .el-calendar-table__row .current {
        width: 151px;
        height: 90px;
        text-align: center;
        background: linear-gradient(NaNdeg, #35403F 0%, #0E86D9 100%) !important;
        border-radius: 4px 4px 4px 4px;
        opacity: 1;
        border: 1px solid #0E86D9;
        margin: 20px;
    }

    .el-calendar__body .el-calendar-table__row .prev,
    .el-calendar__body .el-calendar-table__row .next {
        width: 151px;
        height: 90px;
        text-align: center;
        background: linear-gradient(NaNdeg, #35403F 0%, #445050 100%);
        border-radius: 4px 4px 4px 4px;
        opacity: 1;
        border: 1px solid #445050;
    }

    .is-selected {
        color: #fff;
    }

    /* 本月的样式 */
    .current,
    .prev,
    .next {
        color: #fff;
        margin: 5px;
        background: linear-gradient(NaNdeg, #35403F 0%, #0E86D9 100%) !important;
    }

    /* 上月和下月*/


    .el-calendar-table .el-calendar-day:hover {
        // background: linear-gradient(#22702B 0%, #57FF5B 100%);
        background: transparent !important;
        height: 113px; //要去掉2px边框
    }

    .el-calendar-table__row {
        .current {
            width: 195px;
            height: 115px;
        }
    }

    .el-calendar-table td:hover {
        background: linear-gradient(#22702B 0%, #57FF5B 100%) !important;
    }

    .el-calendar-table td.is-selected {
        background: linear-gradient(#22702B 0%, #57FF5B 100%) !important;
    }
}
</style>
  