<template>
    <div class="box">
        <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 id="tlt"></div>
            </div>
            <div class="tpfl">
                <div class="imgBox">
                    <img src="../../assets/img/小标题栏.png" class="img" />
                    <p>碳排放量</p>
                </div>
                <div id="tpfl">
                </div>
            </div>
        </div>
        <div class="right">
            <div class="jnl">
                <div class="imgBox">
                    <img src="../../assets/img/小标题栏.png" class="img" />
                    <p></p>
                </div>
                <div class="chartBox">
                    <div id="jnl">
                    </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="sbyxqk">
                <div class="imgBox">
                    <img src="../../assets/img/小标题栏.png" class="img" />
                    <p>设备运行情况</p>
                </div>
                <div id="sbyxqk">
                    <div class="table">
                        <el-table :data="devices" style="width: 100%" :row-class-name="tableRowClassName">
                            <el-table-column prop="date1" label="设备名称" align="center">
                            </el-table-column>
                            <el-table-column prop="date2" label="开关状态" align="center">
                                <template scope="scope">
                                    <img src="../../assets/KDFH/tongguo.png" v-if="scope.row.date2 == true" />
                                    <img src="../../assets/KDFH/jinggao.png" v-else />
                                </template>
                            </el-table-column>
                            <el-table-column prop="date3" label="实时负荷" align="center">
                                <template scope="scope">
                                    <span class="count">{{ scope.row.date3 }}</span>
                                    <span class="danwei">kW</span>
                                </template>
                            </el-table-column>
                        </el-table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>

export default {
    data() {
        return {
            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: {
                legend: {
                    data: [{ icon: "rect", name: "碳排放量" }],
                    textStyle: {
                        color: "#fff",
                        fontSize: "20px",
                    },
                },
                xAxis: {
                    type: "category",
                    boundaryGap: false,
                    data: ["12:20", "13:20", "14:20", "15:20"],
                    axisLabel: {
                        show: true,
                        interval: 0,
                        textStyle: {
                            color: "#fff",
                            fontSize: 20,
                        },
                        interval: 0, //代表显示所有x轴标签显示
                    },
                },
                yAxis: {
                    type: "value",
                    name: "单位:tCO2",
                    nameTextStyle: {
                        color: "#fff",
                        fontSize: 20,
                        padding: 10,
                    },
                    min: 0,
                    max: 40,
                    interval: 10, // 指定刻度间隔
                    axisLabel: {
                        show: true,
                        textStyle: {
                            color: "#fff",
                            fontSize: 20,
                        },
                    },
                },
                grid: {
                    // 让图表占满容器
                    //   top: "5%",
                    left: "8%",
                    right: "5%",
                    bottom: "8%",
                },
                series: [
                    {
                        type: "line",
                        name: "碳排放量",
                        data: [15, 30, 25, 20, 30, 20, 25, 23, 21, 19, 32, 29, 19, 20, 18, 20, 9],
                        // smooth: true,
                        itemStyle: {
                            normal: {
                                color: "#21EF06",
                                lineStyle: {
                                    width: 5, //折线宽度
                                    color: "#21EF06", //折线颜色
                                },
                                areaStyle: {
                                    color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                        { offset: 1, color: "#0C3431" },
                                        { offset: 0.5, color: "#198522" },
                                        { offset: 0, color: "#18881C" },
                                    ]),
                                },
                            },
                        },
                        markPoint: {
                            data: [{ type: "max", name: "Max" }],
                            label: {
                                textStyle: {
                                    color: "#fff",
                                    fontSize: 15,
                                },
                            },
                        },
                    },
                ],
            },
        };
    },
    methods: {
        defineEcharts(dom, option) {
            var chartDom = document.getElementById(dom);
            var myChart = this.$echarts.init(chartDom);
            myChart.setOption(option);
        },
        tableRowClassName({ row, rowIndex }) {
            if ((rowIndex + 1) % 2 === 0) {
                return "success-row";
            }
            return "";
        },
    },
    mounted() {
        this.defineEcharts("sstpf", this.option1);
        // this.defineEcharts("yysl", this.option2);
        // 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;
    padding-top: 400px;
    justify-content: space-between;
    position: relative;

    .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: 50px;
                width: 1151px;
                height: 511px;
                background: #37433F;
                opacity: 0.6;
                padding-top: 27px;
                box-sizing: border-box;

                .first_one {
                    display: flex;
                    margin-top: 20px;
                    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: 40px;
                            text-align: center;
                        }

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

                    .two {
                        width: 190px;
                        height: 190px;
                        color: #4AB0DD;
                        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: 40px;
                            text-align: center;
                        }
                        font-size: 28px;
                        background: url(../../assets/TZCGL/组\ 1186.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;
                            font-size: 22px;
                            margin-left: 40px;
                            text-align: center;
                        }
                        font-size: 28px;
                        background: url(../../assets/TZCGL/组\ 1185.png);
                    }
                    .four {
                        width: 190px;
                        height: 190px;
                        color: #39D7EE;
                        text-align: center;

                        p:nth-child(1) {
                            margin-top: 60px;
                            height: 30px;
                            line-height: 30px;
                        }
                        p:nth-child(2) {
                            width: 120px;
                            margin-left: 40px;
                            font-size: 22px;
                            text-align: center;
                        }
                        font-size: 28px;
                        background: url(../../assets/TZCGL/组\ 1187.png);
                    }
                }
            }
        }

        .tlt {
            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";
                }
            }

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

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

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

        .jnl {
            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;

                #jnl {
                    width: 1156px;
                    font-size: 20px;
                    color: #fff;
                    position: relative;

                    img {
                        width: 320px;
                        height: auto;
                        margin-left: 80px;
                    }

                    .zx {
                        font-size: 30px;
                        position: absolute;
                        top: 100px;
                        left: 700px;
                    }

                    .span_jnl {
                        position: absolute;
                        top: 150px;
                        left: 700px;
                    }
                }
            }
        }

        .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: 630px;
                margin-top: 50px;
            }
        }

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

            // margin-bottom: 50px;
            /deep/ .table {
                margin-top: 50px;

                .time {
                    font-size: 20px;
                }

                .count {
                    color: #05F0FF;
                    font-size: 28px;
                }

                //表体颜色
                .el-table tr {
                    background: #16253b;
                    color: #fff;
                    font-size: 30px;
                    height: 40px;

                    .cell {
                        line-height: 40px;
                    }
                }

                // 去掉eltable的hover效果
                .el-table tbody tr:hover>td {
                    background-color: #0b679e !important;
                }

                //修改表头颜色
                .has-gutter {
                    background-color: #1969a8;

                    th {
                        background-color: #1969a8;
                    }
                }

                //奇偶行颜色
                .el-table .success-row {
                    background: #184167;
                }

                //去掉边框白线
                .el-table__row>td {
                    border: none;
                }

                .el-table::before {
                    height: 0px;
                }

                /* 移除表头的下边框 */
                .el-table__header th {
                    border-bottom: none;
                }
            }

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

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

            #sbyxqk {
                width: 1155px;
                height: 400px;
                margin-top: 50px;
            }
        }
    }
}
</style>
  