windLifecontrol_product/src/components/powerPredictionComponent/batteryDivinerDialog/monthAndYearBatterDialog.vue

<template>
    <el-dialog custom-class="windLifeDialog" :title="title" v-model="dialogVisible" :fullscreen="true"
        :close-on-click-modal="false" @close="closeDialog">
        <div class="globalDiaMain" v-loading="loading" :class="!theme ? 'themeDa' : 'themeLi'">
            <div class="main_top">
                <div class="main_top_left">
                    <div class="exceed">
                        <span style="margin-top: 3px;">时间：</span>
                        <el-date-picker v-model="monthVal" v-if="isMonth" type="daterange" value-format="YYYY-MM-DD"
                            :clearable='false' range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
                        </el-date-picker>
                        <el-date-picker v-model="yearVal" v-else type="monthrange" value-format="YYYY-MM"
                            range-separator="至" start-placeholder="开始月份" end-placeholder="结束月份">
                        </el-date-picker>
                    </div>
                    <div class="exceed">
                        <span style="margin-top: 3px;">超前：</span>
                        <el-select class="exTime" v-model="chooseExceedTimeFv" placeholder="请选择">
                            <el-option v-for="item in ExceedTimeList" :key="item.value" :label="item.label"
                                :disabled="item.disabled" :value="item.value">
                            </el-option>
                        </el-select>
                    </div>
                    <el-button type="primary" @click="seachData">查 询</el-button>
                    <el-button @click="exportExcel">导出查询结果</el-button>
                </div>
            </div>
            <div class="main_charts">
                <div id="centersCharts" class="chartsStyle"></div>
            </div>
            <div class="main_table warn-table" style="margin-top: 20px">
                <el-table :data="tableData" ref="report-table" border max-height="50vh" style="width: 100%">
                    <el-table-column prop="dataTime" label="时间" align="center" width="160"></el-table-column>
                    <el-table-column label="当期数据" align="center">
                        <el-table-column prop="veryShortTermForecastDq" label="计划发电" align="center"></el-table-column>
                        <el-table-column prop="actualPowerDq" label="实际发电" align="center"></el-table-column>
                        <el-table-column prop="shortTermForecastDq" label="预测发电" align="center"></el-table-column>
                    </el-table-column>
                    <el-table-column label="同期数据" align="center">
                        <el-table-column prop="veryShortTermForecastTq" label="计划发电" align="center"></el-table-column>
                        <el-table-column prop="actualPowerTq" label="实际发电" align="center"></el-table-column>
                        <el-table-column prop="shortTermForecastTq" label="预测发电" align="center"></el-table-column>
                    </el-table-column>
                    <el-table-column label="同期比率" align="center">
                        <el-table-column prop="tqActualRatio" label="计划发电" align="center"></el-table-column>
                        <el-table-column prop="tqUltraRatio" label="实际发电" align="center"></el-table-column>
                        <el-table-column prop="tqShortRatio" label="预测发电" align="center"></el-table-column>
                    </el-table-column>
                    <el-table-column label="环比数据" align="center">
                        <el-table-column prop="veryShortTermForecastSy" label="计划发电" align="center"></el-table-column>
                        <el-table-column prop="actualPowerSy" label="实际发电" align="center"></el-table-column>
                        <el-table-column prop="shortTermForecastSy" label="预测发电" align="center"></el-table-column>
                    </el-table-column>
                    <el-table-column label="环比比率" align="center">
                        <el-table-column prop="hbActualRatio" label="计划发电" align="center"></el-table-column>
                        <el-table-column prop="hbUltraRatio" label="实际发电" align="center"></el-table-column>
                        <el-table-column prop="hbShortRatio" label="预测发电" align="center"></el-table-column>
                    </el-table-column>
                </el-table>
            </div>
        </div>
    </el-dialog>
</template>

<script>
    import * as XLSX from 'xlsx'
    import {
        saveAs
    } from 'file-saver'
    import * as XLSXD from 'xlsx-js-style'
    import {
        apiGetmonthlyDailyPowerComparisonChartData,
        apiGetyearlyDailyPowerComparisonChartData,
        apiGetmonthlyDailyPowerComparisonTableData,
        apiGetyearlyDailyPowerComparisonTableData
    } from '../../../api/api'
    export default {
        props: {
            from: {
                type: String,
                default: () => {
                    return '';
                },
            },
            ExceedTimeList: {
                type: Array,
                default: () => {
                    return [];
                },
            },
            stationData: {
                type: Array,
                default: () => {
                    return [];
                },
            },
            echartsTheme: {
                type: String,
                default: () => {
                    return '';
                },
            },
            theme: {
                type: Boolean,
                default: () => {
                    return false;
                },
            },
        },
        data() {
            return {
                title: '',
                dialogVisible: false,
                windTurbines: null,
                windTurbinesVal: null,
                tableData: [],
                chooseExceedTimeFv: 0,
                pickerTime: [],
                monthVal: [],
                yearVal: [],
                loading: false,
                isMonth: false
            }
        },
        created() {},
        methods: {
            closeDialog() {
                this.dialogVisible = false
            },
            seachData() {
                this.loading = true
                this.getChartsData()
                this.getTableData()

            },
            chooseVal(val) {
                this.stationData.forEach(item => {
                    if (item.no === val) {
                        this.windTurbinesVal = item.itemVal
                    }
                })
            },
            // 全域功率预测echarts
            getChartsData() {
                let that = this
                let params = {
                    leadTime: that.chooseExceedTimeFv,
                    stationNumber: that.windTurbines,
                    itemVal: that.windTurbinesVal
                }
                if (that.isMonth) {
                    params.beginDataTime = that.monthVal[0]
                    params.endDataTime = that.monthVal[1]
                    apiGetmonthlyDailyPowerComparisonChartData(params).then(datas => {
                        that.changeChartsData(datas)
                    })
                } else {
                    params.beginDataTime = that.yearVal[0]
                    params.endDataTime = that.yearVal[1]
                    delete params.leadTime
                    apiGetyearlyDailyPowerComparisonChartData(params).then(datas => {
                        that.changeChartsData(datas)
                    })
                }
            },
            //数据处理
            changeChartsData(datas) {
                if (datas && datas.data) {
                    let xAxis = []
                    let series = []
                    let legend = []
                    if (datas.data.dateList.length > 0) {
                        datas.data.dateList.forEach(item => {
                            if (this.isMonth) {
                                xAxis.push(item.substring(0, item.indexOf(' ')))
                            } else {
                                xAxis.push(item.substring(0, item.indexOf(' ') - 3))
                            }
                        })
                    }
                    if (datas.data.dataFormatList.length > 0) {
                        datas.data.dataFormatList.forEach(iten => {
                            legend.push(iten.name)
                            let seriesObj = {
                                name: iten.name,
                                type: 'line',
                                data: iten.data.map(it => {
                                    return this.$utils.isHasNum(it)
                                }),
                                symbol: 'none'
                            }
                            series.push(seriesObj)
                        })
                    }
                    this.getglobalLine('centersCharts', xAxis, legend, series)
                }
            },
            getglobalLine(name, xAxis, legend, series) {
                let option = {
                    title: {
                        text: '电量'
                    },
                    tooltip: {
                        trigger: 'axis'
                    },
                    legend: {
                        right: '20',
                        data: legend
                    },
                    grid: {
                        left: '5%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        data: xAxis
                    },
                    yAxis: {
                        type: 'value',
                        name: '万千瓦时(Wkw/h)'
                    },
                    series: series
                };
                if (this.from === 'index') {
                    option.backgroundColor = ''
                }
                if (!this.theme) {
                    option.backgroundColor = ''
                }
                // 基于准备好的dom，初始化echarts实例
                let dom = document.getElementById(name);
                dom.removeAttribute("_echarts_instance_") ? dom.removeAttribute("_echarts_instance_") : ''
                let myChart = this.$echarts.init(dom, this.echartsTheme);
                myChart.setOption(option);
                window.addEventListener("resize", function () {
                    myChart.resize()
                })
            },
            // 全域功率预测table
            getTableData() {
                let that = this
                let params = {
                    leadTime: that.chooseExceedTimeFv,
                    stationNumber: that.windTurbines,
                    itemVal: that.windTurbinesVal
                }
                if (that.isMonth) {
                    params.beginDataTime = that.monthVal[0]
                    params.endDataTime = that.monthVal[1]
                    apiGetmonthlyDailyPowerComparisonTableData(params).then(datas => {
                        that.changeTableData(datas)
                    })
                } else {
                    params.beginDataTime = that.yearVal[0]
                    params.endDataTime = that.yearVal[1]
                    delete params.leadTime
                    apiGetyearlyDailyPowerComparisonTableData(params).then(datas => {
                        that.changeTableData(datas)
                    })
                }
            },
            changeTableData(datas) {
                if (datas && datas.data) {
                    this.loading = false
                    if (datas.data.dataFormatList) {
                        datas.data.dataFormatList.forEach(item => {
                            for (let i in item) {
                                if (i !== 'dataTime') {
                                    item[i] = this.$utils.isHasNum(item[i])
                                } else {
                                    if (!this.isMonth) {
                                        item[i] = item[i].substring(0, item[i].lastIndexOf('-'))
                                    }
                                }
                            }
                            //同期计划发电
                            item.tqActualRatio = this.$utils.ratioCalculation(item.veryShortTermForecastDq, item
                                .veryShortTermForecastTq)
                            //同期实际发电
                            item.tqUltraRatio = this.$utils.ratioCalculation(item.actualPowerDq, item
                                .actualPowerTq)
                            //同期预测发电
                            item.tqShortRatio = this.$utils.ratioCalculation(item.shortTermForecastDq, item
                                .shortTermForecastTq)
                            //环比计划发电
                            item.hbActualRatio = this.$utils.ratioCalculation(item.veryShortTermForecastDq, item
                                .veryShortTermForecastSy)
                            //环比实际发电
                            item.hbUltraRatio = this.$utils.ratioCalculation(item.actualPowerDq, item
                                .actualPowerSy)
                            //环比预测发电
                            item.hbShortRatio = this.$utils.ratioCalculation(item.shortTermForecastDq, item
                                .shortTermForecastSy)
                        })
                        this.tableData = datas.data.dataFormatList
                    }
                }
            },
            exportExcel() {
                let $e = this.$refs['report-table'].$el
                try {
                    let $table = $e.querySelector('.el-table__fixed')
                    if (!$table) {
                        $table = $e
                    }
                    const wb = XLSX.utils.table_to_book($table, {
                        raw: true
                    })
                    if (wb && wb.Sheets.Sheet1) {
                        let as = ['!cols', '!fullref', '!merges', '!ref', '!rows']
                        let bs = ['时间', '当期数据', '实际发电', '预测发电', '同期数据', '同期比率', '环比数据', '环比比率']
                        for (let i in wb.Sheets.Sheet1) {
                            if (as.indexOf(i) < 0) {
                                if (bs.indexOf(wb.Sheets.Sheet1[i].v) >= 0) {
                                    wb.Sheets.Sheet1[i].s = {
                                        font: {
                                            name: '微软雅黑',
                                            sz: 11,
                                            bold: true,
                                            color: {
                                                rgb: 'ffffff'
                                            }
                                        },
                                        alignment: {
                                            horizontal: 'center',
                                            vertical: 'center'
                                        },
                                        fill: {
                                            fgColor: {
                                                rgb: '4f81bd'
                                            }
                                        }
                                    }
                                    if (i === 'A1') {
                                        wb.Sheets.Sheet1['!cols'].push({
                                            wch: 30
                                        })
                                    } else if (i === 'B1') {
                                        wb.Sheets.Sheet1['!cols'].push({
                                            wch: 20
                                        })
                                    } else {
                                        wb.Sheets.Sheet1['!cols'].push({
                                            wch: 15
                                        })
                                    }
                                } else {
                                    wb.Sheets.Sheet1[i].s = {
                                        font: {
                                            name: '微软雅黑',
                                            sz: 10,
                                            bold: false,
                                            color: {
                                                rgb: '000000'
                                            }
                                        },
                                        alignment: {
                                            horizontal: 'center',
                                            vertical: 'center'
                                        },
                                        // fill:{fgColor: {rgb: '4f81bd'}}
                                    }
                                }
                            }
                        }
                    }

                    const wbout = XLSXD.write(wb, {
                        bookType: 'xlsx',
                        bookSST: true,
                        type: 'array'
                    })
                    saveAs(
                        new Blob([wbout], {
                            type: 'application/octet-stream'
                        }),
                        `${this.title}.xlsx`,
                    )
                } catch (e) {
                    if (typeof console !== 'undefined') console.error(e)
                }
            }
        }
    }
</script>

<style lang="less">
    @import '../SecondaryPageStyle/globalblackStyle.less';
    @import '../SecondaryPageStyle/globalwhiteStyle.less';
</style>
<style lang="less">
    .globalDiaMain {
        .main_top {
            .main_top_left {
                .exceed {
                    .el-date-editor {
                        .el-input__prefix {
                            margin-left: 5px !important;
                        }
                    }
                }
            }
        }
    }

    .themeDa {

        .main_top {
            .main_top_left {
                .exceed {
                    color: #fff;
                }
            }
        }
    }

    .themeLi {
        .main_top {
            .main_top_left {
                .exceed {
                    color: #000;
                }
            }
        }
    }
</style>