<template>
    <div class="box">
        <div class="left">
            <img src="../../assets/img/标题/智能运维-监控.png" class="title" />
            <div class="dqsxtxx">
                <div class="imgBox">
                    <img src="../../assets/img/小标题栏.png" class="img" />
                    <p>当前摄像头信息</p>
                </div>
                <div id="dqsxtxx">
                    <div class="headers"></div>
                    <h2>摄像头信息</h2>
                    <div class="footers">

                    </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",
                }
            ],
        };
    },
    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;

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

            #dqsxtxx {
                margin-top: 50px;
                width: 1151px;
                height: 611px;

                .headers {
                    width: 1041px;
                    height: 586px;
                    opacity: 1;
                }
                .footers{

                }
            }
        }

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