sx-project/src/views/tablePage/index.vue

<template>
    <div>
        <div class="title-list">
            <div class="search">
                <div class="date">风场:</div>
                <el-select class="inputs" v-model="selectValue" placeholder="请选择">
                    <el-option v-for="item in stationList" :key="item.name" :label="item.name" :value="item.id">
                    </el-option>
                </el-select>
            </div>
            <div class="query-item">
                <div class="lable">开始日期：</div>
                <div class="search-input">
                    <el-date-picker v-model="timeValue" type="daterange" range-separator="至" start-placeholder="开始日期"
                        end-placeholder="结束日期">
                    </el-date-picker>
                </div>
            </div>
            <div class="query-actions">
                <button class="button" @click="getTableData">查询</button>
                <button class="button" @click="exportExcel">导出</button>
            </div>
        </div>
        <div>
            <el-table height="90vh" ref="multipleTable" empty-text="暂无数据" :data="tableList" stripe
                style="width: 100%; margin-bottom: 10px">
                <el-table-column prop="windturbinename" label="风机" align="center"  width="220"  sortable></el-table-column>
                <el-table-column label="发电量" align="center" prop="generatingcapacity" sortable>
                </el-table-column>
                <el-table-column label="理论发电量" prop="theoreticalcapacity" align="center" sortable>
                </el-table-column>
                <el-table-column label="故障损失电量" prop="daynhgzssdl" align="center" sortable>
                </el-table-column>
                <el-table-column label="维护损失电量" prop="daynhwhssdl" align="center" sortable>
                </el-table-column>
                <el-table-column label="限电损失电量" prop="daynhxdssdl" align="center" sortable>
                </el-table-column>
                <el-table-column label="性能损失电量" prop="daynhqfdl" align="center" sortable>
                </el-table-column>
                <el-table-column label="受累损失电量" prop="daynhcfdl" align="center" sortable>
                </el-table-column>
                <el-table-column label="设备可利用率" prop="availability" align="center" sortable>
                </el-table-column>
                <el-table-column label="并网时间" prop="runtime" align="center" sortable>
                </el-table-column>
                <el-table-column label="维护时间" prop="maintime" align="center" sortable>
                </el-table-column>
                <el-table-column label="故障时间" prop="faulttime" align="center" sortable>
                </el-table-column>
                <el-table-column label="停机时间" prop="stoptime" align="center" sortable>
                </el-table-column>
                <el-table-column label="风暴时间" prop="stormtime" align="center" sortable>
                </el-table-column>
                <el-table-column label="离线时间" prop="offtime" align="center" sortable>
                </el-table-column>
            </el-table>
        </div>
    </div>
</template>
<script>
import api from "api/index";
import dayjs from "dayjs";
import XLSX from "xlsx";
export default {
    data() {
        return {
            timeValue: [],
            selectValue: "WNS_FDC",
            tableList: [
                {
                    "id": null,
                    "windturbineid": "GL01_005",
                    "windturbinename": "广灵第005台风机",
                    "windpowerstationid": null,
                    "generatingcapacity": 9472,
                    "theoreticalcapacity": 13079.75,
                    "daynhgzssdl": 0,
                    "daynhwhssdl": 0,
                    "daynhxdssdl": 0,
                    "daynhqfdl": 3607.75,
                    "daynhcfdl": 0,
                    "availability": 100,
                    "powerfactor": null,
                    "runtime": 14.47,
                    "maintime": 0,
                    "faulttime": 0,
                    "stoptime": 9.53,
                    "stormtime": 0,
                    "offtime": 0,
                    "recorddate": null
                },
                {
                    "id": null,
                    "windturbineid": "GL01_013",
                    "windturbinename": "广灵第013台风机",
                    "windpowerstationid": null,
                    "generatingcapacity": 2600,
                    "theoreticalcapacity": 9691.89,
                    "daynhgzssdl": 0,
                    "daynhwhssdl": 0,
                    "daynhxdssdl": 0,
                    "daynhqfdl": 7091.89,
                    "daynhcfdl": 0,
                    "availability": 100,
                    "powerfactor": null,
                    "runtime": 11.67,
                    "maintime": 0,
                    "faulttime": 0,
                    "stoptime": 12.33,
                    "stormtime": 0,
                    "offtime": 0,
                    "recorddate": null
                },
                {
                    "id": null,
                    "windturbineid": "GL01_015",
                    "windturbinename": "广灵第015台风机",
                    "windpowerstationid": null,
                    "generatingcapacity": 6268,
                    "theoreticalcapacity": 10649.49,
                    "daynhgzssdl": 0,
                    "daynhwhssdl": 0,
                    "daynhxdssdl": 0,
                    "daynhqfdl": 4381.49,
                    "daynhcfdl": 0,
                    "availability": 100,
                    "powerfactor": null,
                    "runtime": 13.83,
                    "maintime": 0,
                    "faulttime": 0,
                    "stoptime": 10.17,
                    "stormtime": 0,
                    "offtime": 0,
                    "recorddate": null
                },
            ],
            stationList: [
                {
                    "id": "WNS_FDC",
                    "code": "WNS_FDC",
                    "name": "太旗卧牛山风电场",
                    "address": "太旗卧牛山风电场",
                    "telephone": null,
                    "capacity": 148.5,
                    "capacityunit": "MW",
                    "quantity": 99,
                    "aname": "卧牛山风电场",
                    "longitude": 1000,
                    "latitude": 1000,
                    "photo": null,
                    "companyid": "1",
                    "systemmanufact": null,
                    "headfarm": null,
                    "headfarmphone": null,
                    "model": "UP77-1500/UP77-1500-1/UP77-1500-2",
                    "ordernum": 1,
                    "altitude": 1000,
                    "height": null
                },
                {
                    "id": "YY_FDC",
                    "code": "YY_FDC",
                    "name": "右玉高家堡风电场  ",
                    "address": "右玉高家堡风电场  ",
                    "telephone": null,
                    "capacity": 198,
                    "capacityunit": "MW",
                    "quantity": 132,
                    "aname": "高家堡风电场  ",
                    "longitude": 1000,
                    "latitude": 1000,
                    "photo": null,
                    "companyid": "1",
                    "systemmanufact": null,
                    "headfarm": null,
                    "headfarmphone": null,
                    "model": "UP82-1500/UP82-1500-1/UP86-1500/UP86-1500-1/UP86-1500-2/UP86-1500-3/UP86-1500-4/MY-1.5se",
                    "ordernum": 2,
                    "altitude": 1000,
                    "height": null
                },
                {
                    "id": "PL_FDC",
                    "code": "PL_FDC",
                    "name": "平鲁虎头山风电场  ",
                    "address": "平鲁虎头山风电场  ",
                    "telephone": null,
                    "capacity": 223.5,
                    "capacityunit": "MW",
                    "quantity": 110,
                    "aname": "虎头山风电场  ",
                    "longitude": 1000,
                    "latitude": 1000,
                    "photo": null,
                    "companyid": "1",
                    "systemmanufact": null,
                    "headfarm": null,
                    "headfarmphone": null,
                    "model": "GW77-1500/GW82-1500/UP3000-120/GW109-2500",
                    "ordernum": 3,
                    "altitude": 1000,
                    "height": null
                },
                {
                    "id": "GL_FDC",
                    "code": "GL_FDC",
                    "name": "广灵劲风风电场  ",
                    "address": "广灵劲风风电场  ",
                    "telephone": null,
                    "capacity": 48,
                    "capacityunit": "MW",
                    "quantity": 24,
                    "aname": "劲风风电场  ",
                    "longitude": 1000,
                    "latitude": 1000,
                    "photo": null,
                    "companyid": "1",
                    "systemmanufact": null,
                    "headfarm": null,
                    "headfarmphone": null,
                    "model": "UP2000-105s",
                    "ordernum": 4,
                    "altitude": 1000,
                    "height": null
                },
                {
                    "id": "HY_FDC",
                    "code": "HY_FDC",
                    "name": "浑源峰岳风电场 ",
                    "address": "浑源峰岳风电场 ",
                    "telephone": null,
                    "capacity": 149.5,
                    "capacityunit": "MW",
                    "quantity": 80,
                    "aname": "峰岳风电场 ",
                    "longitude": 1000,
                    "latitude": 1000,
                    "photo": null,
                    "companyid": "1",
                    "systemmanufact": null,
                    "headfarm": null,
                    "headfarmphone": null,
                    "model": "UP82-1500-2/UP86-1500-2/UP2000-96/UP2000-105s",
                    "ordernum": 5,
                    "altitude": 1000,
                    "height": null
                },
                {
                    "id": "FS_FDC",
                    "code": "FS_FDC",
                    "name": "方山宝塔山风电场 ",
                    "address": "方山宝塔山风电场 ",
                    "telephone": null,
                    "capacity": 96,
                    "capacityunit": "MW",
                    "quantity": 48,
                    "aname": "宝塔山风电场 ",
                    "longitude": 1000,
                    "latitude": 1000,
                    "photo": null,
                    "companyid": "1",
                    "systemmanufact": null,
                    "headfarm": null,
                    "headfarmphone": null,
                    "model": "UP2000-105s/UP2000-96",
                    "ordernum": 6,
                    "altitude": 1000,
                    "height": null
                },
                {
                    "id": "YG_FDC",
                    "code": "YG_FDC",
                    "name": "阳高采凉山风电场",
                    "address": "阳高采凉山风电场",
                    "telephone": null,
                    "capacity": 90,
                    "capacityunit": "MW",
                    "quantity": 45,
                    "aname": "采凉山风电场",
                    "longitude": 1000,
                    "latitude": 1000,
                    "photo": null,
                    "companyid": "1",
                    "systemmanufact": null,
                    "headfarm": null,
                    "headfarmphone": null,
                    "model": "UP2000-115s",
                    "ordernum": 7,
                    "altitude": 1000,
                    "height": null
                }
            ],
        };
    },
    created() {
        let date = new Date();
        this.timeValue[0] = date.getTime() - 86400000;
        this.timeValue[1] = date.getTime() - 86400000;
        this.getStation()
    },
    methods: {
        getStation() {
            api.getStation().then(res => {
                if (res.data) {
                    this.stationList = res.data.data
                    this.getTableData()
                }
            })
        },
        getTableData() {
            api.getTableData({
                wpid: this.selectValue,
                beginDate: dayjs(this.timeValue[0]).format("YYYY-MM-DD"),
                endDate: dayjs(this.timeValue[1]).format("YYYY-MM-DD"),
            }).then(res => {
                if (res.data) {
                    this.tableList = res.data.data
                }
            })
        },
        exportExcel() {
            // 数据源
            let data = [];
            this.tableList.forEach((item) => {
                let values = {
                    风机: item.windturbinename,
                    发电量: item.generatingcapacity,
                    理论发电量: item.theoreticalcapacity,
                    故障损失电量: item.daynhgzssdl,
                    维护损失电量: item.daynhwhssdl,
                    限电损失电量: item.daynhxdssdl,
                    性能损失电量: item.daynhqfdl,
                    受累损失电量: item.daynhcfdl,
                    设备可利用率: item.availability,
                    并网时间: item.runtime,
                    维护时间: item.maintime,
                    故障时间: item.faulttime,
                    停机时间: item.stoptime,
                    风暴时间: item.stormtime,
                    离线时间: item.offtime,
                };
                data.push(values);
            });
            // 下载的路径
            let fileName = `风机运行分析.xlsx`;
            let filePath = fileName;
            // 新建workbook
            const wb = XLSX.utils.book_new();
            // 新建worksheet，并载入数据
            const ws = XLSX.utils.json_to_sheet(data);
            // 设置每列的列宽，10代表10个字符，注意中文占2个字符
            ws["!cols"] = [{ wch: 20 }, { wch: 10 }, { wch: 10 }, { wch: 10 }, { wch: 10 }, { wch: 10 }, { wch: 10 }, { wch: 10 }, { wch: 10 }, { wch: 10 }, { wch: 10 }, { wch: 10 }, { wch: 10 }, { wch: 10 }, { wch: 10 }];
            // 生成xlsx文件(workbook，worksheet数据，sheet命名)
            XLSX.utils.book_append_sheet(wb, ws, "Sheet1");

            // 写文件(workbook，xlsx文件路径+文件名)
            XLSX.writeFile(wb, filePath);
        },
    },
}
</script>
<style lang="less" scoped>
.title-list {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-top: 10px;

    .search {
        display: flex;
        flex-direction: row;
        align-items: center;
        margin-left: 30px;

        .date {
            margin-right: 20px;
            font-size: 18px;
        }
    }

    .query-item {
        display: flex;
        flex-direction: row;
        align-items: center;
        margin-left: 30px;

        .lable {
            margin-right: 20px;
            font-size: 18px;
        }
    }

    .button {
        width: 80px;
        height: 40px;
        margin-left: 30px;
    }
}
</style>