<template>
    <div class="box">
        <div class="left">
            <img src="../../assets/img/标题/碳资产管理.png" class="title" />
            <div class="qybjzl">
                <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="qybjzl">
                    <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>257.1</p>
                            <p>熟料</p>
                        </div>
                    </div>
                    <div class="second_one">
                        <div class="one">
                            <p>2641.76</p>
                            <p>粉磨</p>
                        </div>
                        <div class="two">
                            <p>0</p>
                            <p>辅助生产系统</p>
                        </div>
                        <div class="three">
                            <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="pfzb">
                <div class="imgBox">
                    <img src="../../assets/img/小标题栏.png" class="img" />
                    <p>各类排放占比</p>
                </div>
                <div class="chartBox">
                    <div id="pfzb">
                    </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,
                                },
                            },
                        },
                    },
                ],
            },
            option2: {
                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: 20,
                    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: {
        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 "";
        },
        getbing() {
            var trafficWay = [{
                name: '原煤',
                value: 73.02
            }, {
                name: '原材料',
                value: 12.6
            }, {
                name: '电',
                value: 171.49
            }];
            var data = [];
            var color = ['#00ffff', '#00cfff', '#006ced', '#ffe000', '#ffa800', '#ff5b00', '#ff3000']
            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: 2,
                    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: [105, 109],
                hoverAnimation: false,
                itemStyle: {
                    normal: {
                        label: {
                            show: true,
                            position: 'outside',
                            color: '#ddd',
                            formatter: function (params) {
                                var percent = 0;
                                var total = 0;
                                for (var i = 0; i < trafficWay.length; i++) {
                                    total += trafficWay[i].value;
                                }
                                percent = ((params.value / total) * 100).toFixed(0);
                                if (params.name !== '') {
                                    return params.name + '\n' + '\n' + percent + '%';
                                } else {
                                    return '';
                                }
                            },
                        },
                        labelLine: {
                            length: 40,
                            length2: 120,
                            show: true,
                            color: '#00ffff'
                        }
                    }
                },
                data: data
            }];
            let option = {
                backgroundColor: '#0A2E5D',
                color: color,
                title: {
                    text: '257.1t',
                    top: '48%',
                    textAlign: "center",
                    left: "49%",
                    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: {
                    icon: "rect",
                    orient: '',
                    x: 'right',
                    data: [
                        {
                            name: '原煤',
                            value: "13.68"
                        },
                        {
                            name: '原材料',
                            value: "13.68"
                        },
                        {
                            name: '电',
                            value: "13.68"
                        }],
                    left: 900,
                    bottom: 240,
                    align: 'left',
                    textStyle: {
                        color: "#fff"
                    },
                    itemGap: 20
                },
                toolbox: {
                    show: false
                },
                series: seriesOption
            }
            let chartDom = document.getElementById("pfzb");
            let myChart = this.$echarts.init(chartDom);
            myChart.setOption(option);
        }
    },
    mounted() {
        this.defineEcharts("sstpf", this.option1);
        this.defineEcharts("tlt", this.option2);
        this.$nextTick(() => {
            this.getbing();
        })
    },
};
</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;
        }

        .qybjzl {
            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%);
                    }
                }
            }

            #qybjzl {
                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;
                        }

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

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

                    .three {
                        width: 190px;
                        height: 190px;
                        color: #39D7EE;
                        text-align: center;

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

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

                .second_one {
                    display: flex;
                    margin-top: 27px;
                    justify-content: space-around;

                    // align-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;
                        }

                        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: 120px;
                            margin-left: 30px;
                            text-align: center;
                        }

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

                    .three {
                        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: 80px;
                            margin-left: 50px;
                            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;

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

                #pfzb {
                    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: 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>
  