<template>
    <div class="box">
        <div class="left">
            <img src="../../assets/img/标题/能效管理.png" class="title" />
            <div class="nylx">
                <div class="imgBox">
                    <img src="../../assets/img/小标题栏.png" class="img" />
                    <p>能源流向</p>
                </div>
                <div id="nylx"></div>
            </div>
            <div class="ffl">
                <div class="imgBox">
                    <img src="../../assets/img/小标题栏.png" class="img" />
                    <p>复费率</p>
                </div>
                <div id="ffl"></div>
            </div>
            <div class="nxdb">
                <div class="imgBox">
                    <img src="../../assets/img/小标题栏.png" class="img" />
                    <p>能效对标（定额管理）</p>
                </div>
                <div id="nxdb">
                    <div class="table">
                        <el-table :data="tableData" :row-class-name="tableRowClassName" style="width: 100%"
                            header-cell-style="background-color: #1969A8; color: white">
                            <el-table-column prop="date1" label="" align="center" width="480">
                            </el-table-column>
                            <el-table-column prop="date2" label="先进值" align="center">
                            </el-table-column>
                            <el-table-column prop="date3" label="企业" align="center">
                            </el-table-column>
                            <el-table-column prop="date4" label="同比" align="center">
                                <template scope="scope">
                                    <span style="color: #40FFF1;">{{ scope.row.date4 }}</span>
                                </template>
                            </el-table-column>
                        </el-table>
                    </div>
                </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">
                        <img src="../../assets/NXGL/r1.png" alt="" />
                        <div class="zx">
                            <span>节能量（节电率）:</span>
                        </div>
                        <div class="span_jnl">
                            <span style="color: #07CDFF; font-size: 40px">24.32tce(24%)</span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="dfdj">
                <div class="imgBox">
                    <img src="../../assets/img/小标题栏.png" class="img" />
                    <p>电费电价</p>
                </div>
                <div class="chartBox">
                    <div id="dfdj">

                    </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 {
            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: {
                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
                        },
                        rich: {
                            white: {
                                fontSize: 20,
                                padding: [10, 0, 0, 0],
                            },
                        },
                    },
                    nodeGap: 20,
                    layoutIterations: 1,
                    emphasis: {
                        // focus: "adjacency",
                    },
                    data: [
                        { name: "原始值折标煤", itemStyle: { color: "#5FE3D9" }, depth: 0 },
                        { name: "水", itemStyle: { color: "#55A9CE" }, depth: 1 },
                        { name: "电", itemStyle: { color: "#55A9CE" }, depth: 1 },
                        { name: "余热发电", itemStyle: { color: "#55A9CE" }, depth: 1 },
                        { name: "煤", itemStyle: { color: "#55A9CE" }, depth: 1 },
                        { name: "1号生产线", id: "1", itemStyle: { color: "#52DBF1" }, depth: 2 },
                        { name: "2号生产线", id: "2", itemStyle: { color: "#52DBF1" }, depth: 2 },
                        { name: "3号生产线", id: "3", itemStyle: { color: "#52DBF1" }, depth: 2 },
                        { name: "1号生产线", id: "11", itemStyle: { color: "#52DBF1" }, depth: 2 },
                        { name: "2号生产线", id: "22", itemStyle: { color: "#52DBF1" }, depth: 2 },
                        { name: "3号生产线", id: "33", itemStyle: { color: "#52DBF1" }, depth: 2 },
                    ],
                    links: [
                        // L1→L3	 4509
                        { source: "原始值折标煤", target: "水", value: 800 },
                        { source: "原始值折标煤", target: "电", value: 800 },
                        { source: "原始值折标煤", target: "余热发电", value: 800 },
                        { source: "原始值折标煤", target: "煤", value: 800 },
                        // L1→L2→L3	 2404
                        { source: "煤", target: "11", value: 200 },
                        { source: "煤", target: "22", value: 200 },
                        { source: "煤", target: "33", value: 200 },
                        { source: "余热发电", target: "1", value: 200 },
                        { source: "余热发电", target: "2", value: 200 },
                        { source: "余热发电", target: "3", value: 200 },
                    ],
                },
            },
        };
    },
    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 "";
        },
        dfdj() {
            const offsetX = 24; //bar宽
            const offsetY = 8; //倾斜角度
            // 绘制左侧面
            const CubeLeft = this.$echarts.graphic.extendShape({
                shape: {
                    x: 0,
                    y: 0,
                },
                buildPath: function (ctx, shape) {
                    // 会canvas的应该都能看得懂，shape是从custom传入的
                    const xAxisPoint = shape.xAxisPoint;
                    // console.log(shape);
                    const c0 = [shape.x, shape.y];
                    const c1 = [shape.x - offsetX, shape.y - offsetY];
                    const c2 = [xAxisPoint[0] - offsetX, xAxisPoint[1] - offsetY];
                    const c3 = [xAxisPoint[0], xAxisPoint[1]];
                    ctx
                        .moveTo(c0[0], c0[1])
                        .lineTo(c1[0], c1[1])
                        .lineTo(c2[0], c2[1])
                        .lineTo(c3[0], c3[1])
                        .closePath();
                },
            });
            // 绘制右侧面
            const CubeRight = this.$echarts.graphic.extendShape({
                shape: {
                    x: 0,
                    y: 0,
                },
                buildPath: function (ctx, shape) {
                    const xAxisPoint = shape.xAxisPoint;
                    const c1 = [shape.x, shape.y];
                    const c2 = [xAxisPoint[0], xAxisPoint[1]];
                    const c3 = [xAxisPoint[0] + offsetX, xAxisPoint[1] - offsetY];
                    const c4 = [shape.x + offsetX, shape.y - offsetY];
                    ctx
                        .moveTo(c1[0], c1[1])
                        .lineTo(c2[0], c2[1])
                        .lineTo(c3[0], c3[1])
                        .lineTo(c4[0], c4[1])
                        .closePath();
                },
            });
            // 绘制顶面
            const CubeTop = this.$echarts.graphic.extendShape({
                shape: {
                    x: 0,
                    y: 0,
                },
                buildPath: function (ctx, shape) {
                    const c1 = [shape.x, shape.y];
                    const c2 = [shape.x + offsetX, shape.y - offsetY]; //右点
                    // const c3 = [shape.x, shape.y - offsetX];
                    const c3 = [shape.x, shape.y - offsetY * 2];
                    const c4 = [shape.x - offsetX, shape.y - offsetY];
                    ctx
                        .moveTo(c1[0], c1[1])
                        .lineTo(c2[0], c2[1])
                        .lineTo(c3[0], c3[1])
                        .lineTo(c4[0], c4[1])
                        .closePath();
                },
            });
            // 注册三个面图形
            this.$echarts.graphic.registerShape("CubeLeft", CubeLeft);
            this.$echarts.graphic.registerShape("CubeRight", CubeRight);
            this.$echarts.graphic.registerShape("CubeTop", CubeTop);
            let xAxisData = ["1月", "2月", "3月", "4月", "5月"];
            let seriesData = [34, 36, 48, 13, 38];
            //拿到最大值
            const maxValue = Math.max(...seriesData);

            let colorArr = [
                ["#0A67FF"],
                ["#10C6FF", "rgba(60,113,255,1)"],
                ["#0774D6", "rgba(17,94,213,1)"],
            ];
            let option = {
                legend: {
                    data: [
                        {
                            icon: "rect",
                            name: "电费",
                        },
                    ],
                    textStyle: {
                        color: "#fff",
                        fontSize: "20px",
                    },
                },
                tooltip: {
                    trigger: "axis",
                    axisPointer: {
                        type: "shadow",
                    },
                    formatter: function (params, ticket, callback) {
                        const item = params[1];
                        return item.name + " : " + item.value;
                    },
                },
                grid: {
                    // 让图表占满容器
                    left: "5%",
                    right: "5%",
                    bottom: "0%",
                    containLabel: true,
                },
                xAxis: {
                    type: "category",
                    data: xAxisData,
                    axisLine: {
                        show: true,
                    },
                    axisTick: {
                        show: false,
                    },
                    axisLabel: {
                        fontSize: 20,
                        color: "#fff",
                        margin: 15,
                    },
                },
                yAxis: {
                    type: "value",
                    name: "单位:kWh",
                    nameTextStyle: {
                        color: "#fff",
                        fontSize: 20,
                        padding: 10,
                    },
                    splitLine: {
                        show: true,
                        lineStyle: {},
                    },
                    axisTick: {
                        show: false,
                    },
                    axisLabel: {
                        show: true,
                        textStyle: {
                            color: "#fff",
                            fontSize: 20,
                        },
                    },
                    // boundaryGap: ['20%', '20%'],
                },
                series: [
                    {
                        type: "custom",
                        name: "电费",
                        renderItem: (params, api) => {
                            const location = api.coord([api.value(0), api.value(1)]);
                            return {
                                type: "group",
                                children: [
                                    {
                                        type: "CubeLeft",
                                        shape: {
                                            api,
                                            xValue: api.value(0),
                                            yValue: api.value(1),
                                            x: location[0],
                                            y: location[1],
                                            xAxisPoint: api.coord([api.value(0), 0]),
                                        },
                                        style: {
                                            fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                                {
                                                    offset: 0,
                                                    color: colorArr[1][0],
                                                },
                                                {
                                                    offset: 1,
                                                    color: colorArr[1][1],
                                                },
                                            ]),
                                        },
                                    },
                                    {
                                        type: "CubeRight",
                                        shape: {
                                            api,
                                            xValue: api.value(0),
                                            yValue: api.value(1),
                                            x: location[0],
                                            y: location[1],
                                            xAxisPoint: api.coord([api.value(0), 0]),
                                        },
                                        style: {
                                            fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                                {
                                                    offset: 0,
                                                    color: colorArr[2][0],
                                                },
                                                {
                                                    offset: 1,
                                                    color: colorArr[2][1],
                                                },
                                            ]),
                                        },
                                    },
                                    {
                                        type: "CubeTop",
                                        shape: {
                                            api,
                                            xValue: api.value(0),
                                            yValue: api.value(1),
                                            x: location[0],
                                            y: location[1],
                                            xAxisPoint: api.coord([api.value(0), 0]),
                                        },
                                        style: {
                                            fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                                {
                                                    offset: 0,
                                                    color: colorArr[0][0],
                                                },
                                                {
                                                    offset: 1,
                                                    color: colorArr[0][0],
                                                },
                                            ]),
                                        },
                                    },
                                ],
                            };
                        },
                        data: seriesData,
                    },
                    {
                        type: "bar",
                        label: {
                            normal: {
                                show: true,
                                position: "top",
                                formatter: (e) => {
                                    return e.value === maxValue ? e.value : "";
                                },
                                fontSize: 20,
                                color: "#11C3FF",
                                offset: [0, -15],
                            },
                        },
                        itemStyle: {
                            color: "transparent",
                        },
                        tooltip: {},
                        data: seriesData,
                    },
                ],
            };
            this.defineEcharts("dfdj", option);
        },
    },
    mounted() {
        this.defineEcharts("nylx", 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;
        }

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

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

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

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

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

            #nxdb {
                width: 1155px;
                height: 500px;
                margin-top: 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;
                    }
                }
            }
        }
    }

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

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

            #dfdj {
                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>
  