<template>
    <div class="energy-dashboard" style="padding-top: 1px !important">
        <el-card class="board-view" body-style="padding:0 0 20px;background: none;" style="margin-bottom: 0">
            <div class="board-top flex-between">
                <el-card class="top-card" body-style="padding:32px 30px 0 40px">
                    <div class="top-show">
                        <div class="card-icon">
                            <img src="@/assets/images/energy/card-icon01.png" alt="" class="img-inner" />
                        </div>
                        <div>
                            <div class="card-name">电单价</div>
                            <div class="card-change">
                                <div>较昨日</div>
                                <div class="card-rate down">+9.2%</div>
                                <div class="flex-center" style="width: 14px; height: 20px">
                                    <svg t="1726125569679" v-if="false" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5101" width="14" height="14">
                                        <path d="M51.2 438.477h307.2c0 304.435-74.342 432.333-307.2 584.499 332.698-60.723 614.195-158.31 614.195-584.5h307.2L511.795 0 51.2 438.477z" fill="#FF6666" p-id="5102"></path>
                                    </svg>
                                    <svg t="1726125658034" v-else viewBox="0 0 1109 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8648" width="16" height="16">
                                        <path
                                            d="M556.032 998.4l398.250667-514.048-261.376 58.453333-4.266667-1.706666-3.242667-24.064C647.850667 276.224 491.690667 84.138667 290.816 27.392c63.914667 91.733333 88.917333 116.053333 112.128 246.357333 15.445333 86.869333 22.528 176.042667 21.162667 267.605334h7.082666l-3.242666 1.450666-270.08-58.453333L556.032 998.4z"
                                            fill="#35C585"
                                            p-id="8649"
                                        ></path>
                                    </svg>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="top-info flex-between">
                        <div class="card-value">
                            2.75
                            <span class="card-unit">元/千瓦时</span>
                        </div>
                        <div class="card-chart" ref="card-chart1" style="width: 120px; height: 80px"></div>
                    </div>
                </el-card>
                <el-card class="top-card" body-style="padding:32px 30px 0 40px">
                    <div class="top-show">
                        <div class="card-icon">
                            <img src="@/assets/images/energy/card-icon02.png" alt="" class="img-inner" />
                        </div>
                        <div>
                            <div class="card-name">水单价</div>
                            <div class="card-change">
                                <div>较昨日</div>
                                <div class="card-rate down">+9.2%</div>
                                <div class="flex-center" style="width: 14px; height: 20px">
                                    <svg t="1726125569679" v-if="false" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5101" width="14" height="14">
                                        <path d="M51.2 438.477h307.2c0 304.435-74.342 432.333-307.2 584.499 332.698-60.723 614.195-158.31 614.195-584.5h307.2L511.795 0 51.2 438.477z" fill="#FF6666" p-id="5102"></path>
                                    </svg>
                                    <svg t="1726125658034" v-else viewBox="0 0 1109 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8648" width="16" height="16">
                                        <path
                                            d="M556.032 998.4l398.250667-514.048-261.376 58.453333-4.266667-1.706666-3.242667-24.064C647.850667 276.224 491.690667 84.138667 290.816 27.392c63.914667 91.733333 88.917333 116.053333 112.128 246.357333 15.445333 86.869333 22.528 176.042667 21.162667 267.605334h7.082666l-3.242666 1.450666-270.08-58.453333L556.032 998.4z"
                                            fill="#35C585"
                                            p-id="8649"
                                        ></path>
                                    </svg>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="top-info flex-between">
                        <div class="card-value">
                            2.75
                            <span class="card-unit">元/千瓦时</span>
                        </div>
                        <div class="card-chart" ref="card-chart2" style="width: 120px; height: 80px"></div>
                    </div>
                </el-card>
                <el-card class="top-card" body-style="padding:32px 30px 0 40px">
                    <div class="top-show">
                        <div class="card-icon">
                            <img src="@/assets/images/energy/card-icon03.png" alt="" class="img-inner" />
                        </div>
                        <div>
                            <div class="card-name">气单价</div>
                            <div class="card-change">
                                <div>较昨日</div>
                                <div class="card-rate down">+9.2%</div>
                                <div class="flex-center" style="width: 14px; height: 20px">
                                    <svg t="1726125569679" v-if="false" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5101" width="14" height="14">
                                        <path d="M51.2 438.477h307.2c0 304.435-74.342 432.333-307.2 584.499 332.698-60.723 614.195-158.31 614.195-584.5h307.2L511.795 0 51.2 438.477z" fill="#FF6666" p-id="5102"></path>
                                    </svg>
                                    <svg t="1726125658034" v-else viewBox="0 0 1109 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8648" width="16" height="16">
                                        <path
                                            d="M556.032 998.4l398.250667-514.048-261.376 58.453333-4.266667-1.706666-3.242667-24.064C647.850667 276.224 491.690667 84.138667 290.816 27.392c63.914667 91.733333 88.917333 116.053333 112.128 246.357333 15.445333 86.869333 22.528 176.042667 21.162667 267.605334h7.082666l-3.242666 1.450666-270.08-58.453333L556.032 998.4z"
                                            fill="#35C585"
                                            p-id="8649"
                                        ></path>
                                    </svg>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="top-info flex-between">
                        <div class="card-value">
                            2.75
                            <span class="card-unit">元/千瓦时</span>
                        </div>
                        <div class="card-chart" ref="card-chart3" style="width: 120px; height: 80px"></div>
                    </div>
                </el-card>
                <el-card class="top-card" body-style="padding:32px 30px 0 40px">
                    <div class="top-show">
                        <div class="card-icon">
                            <img src="@/assets/images/energy/card-icon04.png" alt="" class="img-inner" />
                        </div>
                        <div>
                            <div class="card-name">特点能量价</div>
                            <div class="card-change">
                                <div>较昨日</div>
                                <div class="card-rate up">+9.2%</div>
                                <div class="flex-center" style="width: 14px; height: 20px">
                                    <svg t="1726125569679" v-if="true" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5101" width="14" height="14">
                                        <path d="M51.2 438.477h307.2c0 304.435-74.342 432.333-307.2 584.499 332.698-60.723 614.195-158.31 614.195-584.5h307.2L511.795 0 51.2 438.477z" fill="#FF6666" p-id="5102"></path>
                                    </svg>
                                    <svg t="1726125658034" v-else viewBox="0 0 1109 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8648" width="16" height="16">
                                        <path
                                            d="M556.032 998.4l398.250667-514.048-261.376 58.453333-4.266667-1.706666-3.242667-24.064C647.850667 276.224 491.690667 84.138667 290.816 27.392c63.914667 91.733333 88.917333 116.053333 112.128 246.357333 15.445333 86.869333 22.528 176.042667 21.162667 267.605334h7.082666l-3.242666 1.450666-270.08-58.453333L556.032 998.4z"
                                            fill="#35C585"
                                            p-id="8649"
                                        ></path>
                                    </svg>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="top-info flex-between">
                        <div class="card-value">
                            2.75
                            <span class="card-unit">元/千瓦时</span>
                        </div>
                        <div class="card-chart" ref="card-chart4" style="width: 120px; height: 80px"></div>
                    </div>
                </el-card>
            </div>
            <div class="board-center flex-between">
                <el-card class="center-pie" body-style="padding:0;height: 100%">
                    <div ref="card-pie" style="width: 100%; height: 100%"></div>
                </el-card>
                <el-card class="center-tree" body-style="padding:0;height: 100%">
                    <div ref="links_chart_equipment" style="width: 100%; height: 680px" />
                </el-card>
            </div>
            <div class="main-card board-bottom">
                <el-card class="board-table" body-style="padding:33px;height: 100%">
                    <el-table class="base-table" v-loading="loading" :data="tableData" :border="false" size="mini">
                        <el-table-column label="设备名称" align="center" prop="deviceName" />
                        <el-table-column label="总费用 " align="center" prop="equipmentConPrice" />
                        <el-table-column label="电量（kwh） " align="center" prop="powerConsumption" />
                        <el-table-column label="水量（m³） " align="center" prop="waterConsumption" />
                        <el-table-column label="气量（m³） " align="center" prop="gasConsumption" />
                        <el-table-column label="热量（GJ） " align="center" prop="hotType" />
                        <el-table-column label="时间 " align="center" prop="createdDate" />
                    </el-table>
                    <div class="flex-center" style="margin: 50px auto">
                        <div style="margin-left: 320px">
                            <pagination v-show="total > 0" :limit.sync="queryParams.pageSize" :page.sync="queryParams.pageNum" :total="total" @pagination="getList" />
                        </div>
                    </div>
                </el-card>
            </div>
        </el-card>
    </div>
</template>
<script>
import * as echarts from 'echarts';
import { getEnergyynlx } from '@/views/energy/api/energy/energyProcureManage';
import { getbuildingListid, getcompanList } from '@/views/energy/api/energy/equipmentEnergy';
import {buildEnergyList} from '@/views/energy/api/energy/energyMonitoring';
export default {
    name: 'Zhsf',
    data() {
        return {
            card_chart1: null,
            card_chart2: null,
            card_chart3: null,
            card_chart4: null,
            card_pie: null,
            searchData: {
                buildingId: '',
                workshopId: null,
                deviceId: null,
                classifyId: '',
                deviceName: '',
                date: [],
                dateType: 1,
                type: 1,
                pageSize: 10,
                pageNum: 1,
                companId: null
            },
            companList: [],
            buildList: [],
            loading: false,
            DataList: [],
            linksList: [],
            total: '',
            queryParams: {
                page: 1,
                pageSize: 10,
            },

            tableData: [],
        };
    },

    created() {},
    methods: {
        energyData(){
            var now = new Date(); // 获取当前日期时间
            var monthStart = new Date(now.getFullYear(), now.getMonth(), 1); // 获取本月第一天的日期时间
            var monthEnd = new Date(now.getFullYear(), now.getMonth() + 1, 0, 23, 59, 59); // 获取本月最后一天的日期时间（时间为23:59:59）
            const objs = {
                buildingId: this.searchData.buildingId,
                workshopIds: this.searchData.workshopId,
                deviceId: this.searchData.deviceId,
                classifyId: this.searchData.classifyId,
                deviceName: this.searchData.deviceName,
                begin: '',
                end: '',
                timeType: this.searchData.type,
                dateType: this.searchData.dateType,
                pageSize: this.searchData.pageSize,
                pageNum: this.searchData.pageNum,
            };
            objs.begin = monthStart;
            objs.end = monthEnd;
            buildEnergyList(objs).then((res) => {
                this.tableData = res.data.list;
                this.total = res.data.total || 0;
            });
        },
        drawCardChart1() {
            // 基于准备好的dom，初始化echarts实例
            this.card_chart1 = echarts.init(this.$refs['card-chart1']);
            var option;
            let xAxis = [];
            option = {
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
                    show: false,
                },
                yAxis: {
                    type: 'value',
                    show: false,
                },
                series: [
                    {
                        data: [1107, 1352, 1740, 1968, 1647, 1570, 1343, 1757, 2547, 2762, 2762, 2600],
                        type: 'line',
                        smooth: true,
                        showSymbol: false,
                        color: 'rgba(0, 122, 255, 0.21)',
                        areaStyle: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                {
                                    offset: 0,
                                    color: 'rgba(0, 122, 255, 0.21)', // 渐变色的起始颜色
                                },
                                {
                                    offset: 1,
                                    color: 'rgba(0, 122, 255, 0)', // 渐变色的结束颜色
                                },
                            ]),
                        },
                    },
                ],
            };
            this.card_chart1.setOption(option);
        },
        drawCardChart2() {
            // 基于准备好的dom，初始化echarts实例
            this.card_chart2 = echarts.init(this.$refs['card-chart2']);
            var option;
            let xAxis = [];
            option = {
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
                    show: false,
                },
                yAxis: {
                    type: 'value',
                    show: false,
                },
                series: [
                    {
                        data: [1107, 1352, 1740, 1968, 1647, 1570, 1343, 1757, 2547, 2762, 2762, 2600],
                        type: 'line',
                        smooth: true,
                        showSymbol: false,
                        color: 'rgba(1, 71, 235, 0.1)',
                        areaStyle: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                {
                                    offset: 0,
                                    color: 'rgba(1, 71, 235, 0.1)', // 渐变色的起始颜色
                                },
                                {
                                    offset: 1,
                                    color: 'rgba(1, 71, 235, 0)', // 渐变色的结束颜色
                                },
                            ]),
                        },
                    },
                ],
            };
            this.card_chart2.setOption(option);
        },
        drawCardChart3() {
            // 基于准备好的dom，初始化echarts实例
            this.card_chart3 = echarts.init(this.$refs['card-chart3']);
            var option;
            let xAxis = [];
            option = {
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
                    show: false,
                },
                yAxis: {
                    type: 'value',
                    show: false,
                },
                series: [
                    {
                        data: [1107, 1352, 1740, 1968, 1647, 1570, 1343, 1757, 2547, 2762, 2762, 2600],
                        type: 'line',
                        smooth: true,
                        showSymbol: false,
                        color: 'rgba(1, 71, 235, 0.1)',
                        areaStyle: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                {
                                    offset: 0,
                                    color: 'rgba(1, 71, 235, 0.1)', // 渐变色的起始颜色
                                },
                                {
                                    offset: 1,
                                    color: 'rgba(1, 71, 235, 0)', // 渐变色的结束颜色
                                },
                            ]),
                        },
                    },
                ],
            };
            this.card_chart3.setOption(option);
        },
        drawCardChart4() {
            // 基于准备好的dom，初始化echarts实例
            this.card_chart4 = echarts.init(this.$refs['card-chart4']);
            var option;
            let xAxis = [];
            option = {
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
                    show: false,
                },
                yAxis: {
                    type: 'value',
                    show: false,
                },
                series: [
                    {
                        data: [1107, 1352, 1740, 1968, 1647, 1570, 1343, 1757, 2547, 2762, 2762, 2600],
                        type: 'line',
                        smooth: true,
                        showSymbol: false,
                        color: 'rgba(255, 121, 125, 0.51)',
                        areaStyle: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                {
                                    offset: 0,
                                    color: 'rgba(255, 121, 125, 0.51)', // 渐变色的起始颜色
                                },
                                {
                                    offset: 1,
                                    color: 'rgba(224, 155, 157, 0)', // 渐变色的结束颜色
                                },
                            ]),
                        },
                    },
                ],
            };
            this.card_chart4.setOption(option);
        },
        drawCardPie() {
            this.card_pie = new echarts.init(this.$refs['card-pie']);
            let option = {
                tooltip: {
                    trigger: 'item',
                },
                legend: {
                    orient: 'vertical',
                    right: '0',
                    icon: 'circle',
                },
                series: [
                    {
                        name: 'Access From',
                        type: 'pie',
                        radius: ['40%', '70%'],
                        itemStyle: {
                            borderColor: '#fff',
                            borderWidth: 2,
                        },
                        data: [
                            { value: 1048, name: 'Search Engine' },
                            { value: 735, name: 'Direct' },
                            { value: 580, name: 'Email' },
                            { value: 484, name: 'Union Ads' },
                            { value: 300, name: 'Video Ads' },
                        ],
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)',
                            },
                        },
                    },
                ],
            };
            this.card_pie.setOption(option);
        },
        search() {
            this.getList();
        },
        // 重置
        resetFields() {
            this.searchData = {
                buildingId: '',
                companId: '',
            };
            this.getCompanList();
            this.buildList = [];
            this.companList = [];
        },
        // 更改选择
        companChange(val) {
            this.searchData.buildingId = '';
            this.buildList = [];
            if (val) {
                // console.log(val, '选择的')
                this.getBuildingList(val);
            }
        },
        //获取公司列表
        getCompanyList() {
            getcompanList().then((res) => {
                this.companList = res.data || [];
                // 设置默认值
                if (this.companList.length > 0) {
                    this.searchData.companId = res.data[0].id;
                }
                this.getBuildingList(this.searchData.companId);
                this.getList();
            });
        },
        //获取楼栋列表
        getBuildingList(val) {
            const obj = {
                companId: val,
            };
            getbuildingListid(obj).then((res) => {
                console.log(res, '楼栋列表');
                this.buildList = res.data || [];
            });
        },
        // 获取图表数据
        getList() {
            getEnergyynlx(this.searchData).then((rp) => {
                this.getlinks(rp.data);
            });
        },
        getlinks(data) {
            console.log(data, '数据');
            let links = [];
            let datas = [];
            let entityMap = new Map();
            let value = 1; // 初始化value

            // 创建实体映射
            data.forEach((entity) => {
                datas.push({
                    name: entity.name,
                });
                entityMap.set(entity.id, entity);
            });

            // 构建links
            data.forEach((entity) => {
                if (entity.fjid !== null) {
                    let parent = entityMap.get(entity.fjid);
                    if (parent) {
                        links.push({
                            source: parent.name,
                            target: entity.name,
                            value: value++, // 假设值
                            lineStyle: {
                                color: 'source',
                                opacity: 0.6,
                            },
                        });
                    }
                }
            });
            this.DataList = datas;
            console.log(this.DataList, '数据列表');
            this.linksList = links;
            console.log(this.linksList, 'links列表');
            this.initLineAndBarEquipment();
        },

        //折线图和柱状图结合
        initLineAndBarEquipment() {
            const myEcharts = new echarts.init(this.$refs['links_chart_equipment']);
            let option = {
                series: {
                    type: 'sankey',
                    layout: 'none',
                    emphasis: {
                        focus: 'adjacency',
                    },
                    data: this.DataList,
                    links: this.linksList,
                },
            };
            console.log(option);
            myEcharts.setOption(option, true);
        },
    },
    mounted() {
        this.drawCardChart1();
        this.drawCardChart2();
        this.drawCardChart3();
        this.drawCardChart4();
        this.drawCardPie();
        this.getCompanyList();
        this.energyData();
    },
};
</script>
<style>
@import './energy.scss';
</style>
