windLifecontrolPro/src/views/powerPrediction/stationPowerContro.vue

<template>
    <div class="stationPowerContro" :class="!theme ? 'themeDark' : 'themeLight'">
        <div class="stationPowerControSeach">
            <div class="seach_top">
                <div class="exceed">
                    <span class="exceedName">时间：</span>
                    <el-date-picker v-model="pickerTime" @change="changeTime" format="YYYY-MM-DD" type="date"
                        placeholder="选择时间" />
                </div>
                <el-button type="primary" @click="seachData">计 算</el-button>
                <el-button @click="exportExcel">导 出</el-button>
            </div>
        </div>
        <div class="stationPowerControTable">
            <p class="tableTitle">{{titelMonth}}场站中长期电量未来40天预测</p>
            <span class="tableUnit">单位:m/s,万kwh</span>
            <div :style="tableHeight">
                <div class="tablestyle warn-table" style="margin-top: 10px">
                    <!-- :span-method="mergeSameCells" -->
                    <el-table :data="tableData" v-loading="loading" border style="width: 100%"
                        :max-height="tableMainHeight" ref="stationPowerTable"
                        element-loading-background="rgba(0,0,0,.5)" :header-cell-style="{ 'text-align': 'center' }">
                        <el-table-column prop="name" label="名称" width="200" align="center" fixed>
                        </el-table-column>
                        <el-table-column prop="time" label="周期" width="73" align="center" fixed>
                        </el-table-column>
                        <el-table-column label="日期" align="center">
                            <el-table-column :prop="item.value" :label="item.label" align="center"
                                v-for="(item, index) in tableColumn" :key="index">
                                <template #default="scope">
                                    {{scope.row[scope.row.nameEn+(index+1)]}}
                                </template>
                            </el-table-column>
                        </el-table-column>
                    </el-table>
                </div>
            </div>
        </div>

    </div>
</template>

<script>
    import {
        apiGetallStationPower
    } from "../../api/api";

    import jsonData from "./component/stationPowerControl.json";
    import dayjs from "dayjs";
    import * as XLSX from 'xlsx'
    import {
        saveAs
    } from 'file-saver'
    import * as XLSXD from 'xlsx-js-style'
    export default {
        data() {
            return {
                loading: false,
                pickerTime: "",
                titelMonth: "",
                tableData: [],
                tableColumn: [],
                echartsTheme: "",
                theme: null,
            };
        },
        watch: {
            "$store.state.theme": {
                handler: function (newVal, oldVal) {
                    this.theme = newVal;
                    this.echartsTheme = !newVal ? "dark" : "";
                    // this.getStationData();
                },
                immediate: true,
            },
        },
        created() {
            this.pickerTime = dayjs(new Date()).format("YYYY-MM-DD")
            this.titelMonth = this.pickerTime.split("-")[0] + "年" + this.pickerTime.split("-")[1] + "月" + this
                .pickerTime.split("-")[2] + "日"
            this.getStationData();
        },
        computed: {
            tableHeight() {
                let height = (document.documentElement.clientHeight - 190) / 2 + "px";
                return {
                    width: "100%",
                    height: height,
                };
            },
            tableMainHeight() {
                let height = (document.documentElement.clientHeight - 180) + "px";
                return height
            },
        },
        methods: {
            getStationData() {
                let that = this;
                that.loading = true
                let params = {
                    date: that.pickerTime
                }
                apiGetallStationPower(params).then(res => {
                    that.loading = false
                    if (res && res.data) {
                        // that.tableData = res.data.power
                        res.data.power.forEach(iv => {
                            let obj = {
                                name: iv.name,
                                nameEn: iv.nameEn,
                                time: iv.time
                            }
                            iv.power.forEach((ic, idx) => {
                                (obj[obj.nameEn + (idx + 1)]) = ic.toFixed(2)
                            })
                            that.tableData.push(obj)
                        })
                        console.log("table=====>>>>", that.tableData)
                        res.data.title.forEach((it, index) => {
                            let obj = {
                                label: it,
                                value: index
                            }
                            that.tableColumn.push(obj)
                        })
                    }
                }).catch(e => {
                    that.loading = false
                    let tableColumn = [...Array(40).keys()].map(i => i + 1)
                    tableColumn.forEach((it, index) => {
                        let obj = {
                            label: it,
                            value: index
                        }
                        that.tableColumn.push(obj)
                    })
                    that.tableData = jsonData.data
                })
            },
            changeTime(val) {

            },
            seachData() {
                let str = dayjs(this.pickerTime).format("YYYY-MM")
                this.titelMonth = str.split("-")[0] + "年" + str.split("-")[1] + "月"
                this.getStationData()
            },
            exportExcel() {
                let $e = this.$refs.stationPowerTable.$el
                try {
                    let $table = $e.querySelector('.el-table__fixed')
                    if (!$table) {
                        $table = $e
                    }
                    const wb = XLSX.utils.table_to_book($table, {
                        raw: true
                    })

                    const wbout = XLSXD.write(wb, {
                        bookType: 'xlsx',
                        bookSST: true,
                        type: 'array'
                    })
                    saveAs(
                        new Blob([wbout], {
                            type: 'application/octet-stream'
                        }),
                        `场站中长期电量预测数据导出.xlsx`,
                    )
                } catch (e) {
                    if (typeof console !== 'undefined') console.error(e)
                }
            },
            mergeSameCells({
                row,
                column,
                rowIndex,
                columnIndex
            }) {
                if (columnIndex === 0) {
                    const prevRow = this.tableData[rowIndex];
                    if (prevRow && this.tableData[rowIndex + 1] && this.tableData[rowIndex + 1].name === prevRow.name) {
                        if (row.name.indexOf('风速') !== -1) {
                            return {
                                rowspan: 2,
                                colspan: 1,
                            }
                        } else {
                            return {
                                rowspan: 3,
                                colspan: 1,
                            }
                        }
                    }
                }
                // if (columnIndex === 0) {
                //     if (rowIndex % 2 === 0) {
                //         return {
                //             rowspan: 2,
                //             colspan: 1,
                //         }
                //     } else {
                //         return {
                //             rowspan: 0,
                //             colspan: 0,
                //         }
                //     }
                // }
            }
        },
    };
</script>

<style lang="less">
    .stationPowerContro {
        padding: 0 20px 0 20px;

        .stationPowerControSeach {
            margin-top: 20px;

            .seach_top {
                display: flex;

                .exceed {
                    .exceedName {
                        margin-top: 7px;
                        font-size: 14px;
                        margin-left: 10px;
                    }

                    display: flex;
                    margin-right: 20px;

                    .el-select,
                    .el-select__wrapper {
                        height: 32px;
                    }

                    .el-date-editor {
                        height: 32px;

                        .el-input__icon,
                        .el-range-separator {
                            line-height: 30px;
                        }
                    }

                    .select-trigger {
                        .el-input {
                            .el-input__wrapper {
                                height: 30px;
                            }
                        }

                        .el-input__suffix {
                            .el-input__icon {
                                line-height: 30px;
                            }
                        }
                    }
                }

                .el-button {
                    height: 30px;
                    padding: 0 20px;
                    line-height: 5px;
                }
            }
        }

        .stationPowerControTable {
            .tableTitle {
                display: flex;
                justify-content: center;
                font-size: 18px;
                font-weight: 600;
            }

            .tableUnit {
                font-size: 14px;
            }
        }
    }

    .themeDark {
        background-image: none;

        .stationPowerControSeach {
            .exceedName {
                color: #fff;
            }
        }

        .stationPowerControTable {

            .tableTitle,
            .tableUnit {
                color: #fff;
            }
        }

    }

    .themeLight {
        .stationPowerControSeach {
            .exceedName {
                color: #000;
            }
        }

        .stationPowerControTable {

            .tableTitle,
            .tableUnit {
                color: #000;
            }
        }

    }
</style>