fd_dwgz_zhyw_nx/src/views/economicsOperation/weatherMachine/weatherMachine.vue

<template>
    <div class="stationPowerContro" :class="!theme ? 'themeDark' : ''">
        <div class="main_top">
            <div class="search-item" style="margin-left: 16px">
                <span class="label">场站：</span>
                <div class="search-content">
                    <el-select v-model="stationId" style="width: 120px" clearable size="mini" placeholder="全部"
                        popper-class="select" @change="getWindturbineList">
                        <el-option v-for="item in stationList" :key="item.id" :value="item.id" :label="item.name">
                        </el-option>
                    </el-select>
                </div>
            </div>
            <div class="search-item" style="margin-left: 16px">
                <span class="label">年份：</span>
                <div class="search-content">
                    <el-date-picker
                    size="mini"
                    type="year"
                    v-model="year"
                    value-format="YYYY"
                    placeholder="请选择"
                    popper-class="date-select"
                    >
                    </el-date-picker>
                </div>
            </div>
            <el-button class="buttons" round size="mini" @click="getStationData">查询</el-button>
        </div>
        <div class="stationPowerControTable">
            <h2 class="tableTitle">{{ stationName }}气象单机偏差分析</h2>
            <span class="tableUnit">单位:风速m/s,风向°</span>
            <div :style="tableHeight">
                <div class="tablestyle warn-table" style="margin-top: 5px">
                    <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', 'font-size': '12px' }" :cell-style="{
              'font-size': '12px',
            }" :row-style="{ height: '23px' }">
                        <el-table-column :prop="item.value" :label="item.name" align="center"
                            v-for="(item, index) in tableColumn" :key="index">
                            <template #default="scope">
                                <span>{{scope.row[item.value]}}</span>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import {
        getWpList,
        apiGetweatherMachine
    } from "@/api/zhbj";
    import dataJson from './dataJson.json'
    import dayjs from "dayjs";
    import * as XLSX from "xlsx";
    import {
        saveAs
    } from "file-saver";
    import * as XLSXD from "xlsx-js-style";
    import {
        forIn
    } from '@antv/x6/lib/util/object/object';
    export default {
        data() {
            return {
                year: "",
                stationId: "",
                stationName: "",
                stationList: [],
                loading: false,
                tableData: [],
                tableColumn: [{
                        value: "name",
                        name: "名称",
                    },
                    {
                        value: "january",
                        name: "一月",
                    },
                    {
                        value: "february",
                        name: "二月",
                    },
                    {
                        value: "march",
                        name: "三月",
                    },
                    {
                        value: "april",
                        name: "四月",
                    },
                    {
                        value: "may",
                        name: "五月",
                    },
                    {
                        value: "june",
                        name: "六月",
                    },
                    {
                        value: "july",
                        name: "七月",
                    },
                    {
                        value: "august",
                        name: "八月",
                    },
                    {
                        value: "september",
                        name: "九月",
                    },
                    {
                        value: "october",
                        name: "十月",
                    },
                    {
                        value: "november",
                        name: "十一月",
                    },
                    {
                        value: "december",
                        name: "十二月",
                    }
                ]
            };
        },
        created() {
            this.changeData(dataJson)
            this.funGetStation();
            this.year = dayjs().format("YYYY")
        },
        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: {
            /**场站 */
            funGetStation() {
                let that = this;
                that.stationList = [];
                that.windStation = ""
                getWpList().then((res) => {
                    if (res) {
                        that.stationList = res.data;
                        if (that.stationList.length) {
                            that.stationId = that.stationList[0].id;
                            that.stationName = that.stationList[0].name;
                            that.getStationData()
                        }
                    }
                });
            },
            getStationData() {
                let that = this;
                let params = {
                    wpid: that.stationId,
                    year: that.year
                }
                apiGetweatherMachine(params).then(res => {
                    that.changeData(res)
                })
            },
            changeData(res) {
                if (res && res.data) {
                    for (const key in res.data) {
                        const element = res.data[key];
                        let obj = {
                            name: key,
                            january: element[0],
                            february: element[1],
                            march: element[2],
                            april: element[3],
                            may: element[4],
                            june: element[5],
                            july: element[6],
                            august: element[7],
                            september: element[8],
                            october: element[9],
                            november: element[10],
                            december: element[11],
                        }
                        this.tableData.push(obj)
                    }
                }
            },
            seachData() {
                this.funGetStation();
            },
        },
    };
</script>

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

        .main_top {
            height: 40px;
            display: flex;
            align-items: center;

            .search-item {
                display: flex;
                margin-right: 10px;
                max-width: 450px;
                align-items: center;

                .label {
                    margin-right: 10px;
                    text-align: right;
                    white-space: nowrap;
                    // width: 60px;
                }

                .search-content {
                    flex: 1;
                }
            }
        }

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