sx-project/src/views/tablePage2/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="search">
                <div class="date">类型:</div>
                <el-select class="inputs" clearable v-model="typeStatus" placeholder="请选择">
                    <el-option v-for="item in typeList" :key="item.name" :label="item.name" :value="item.value">
                    </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="windturbineid" label="风机" align="center"  width="220" sortable></el-table-column>
                <el-table-column label="停机时间" prop="stoptime" align="center" sortable>
                </el-table-column>
                <el-table-column label="恢复时间" prop="starttime" align="center" sortable>
                </el-table-column>
                <el-table-column label="停机小时" prop="stophours" align="center" sortable>
                </el-table-column>
                <el-table-column label="损失电量" prop="losspower" align="center" sortable>
                </el-table-column>
                <el-table-column label="停机类型" prop="stoptypeid" 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": "4ee7456f-50a1-4452-bf17-c17c899d4013",
                    "windpowerstationid": "GL_FDC",
                    "windturbineid": "广灵第012台风机",
                    "stoptime": "2022-08-03T01:23:55.000+0000",
                    "starttime": null,
                    "stophours": null,
                    "losspower": null,
                    "stoptypeid": "故障不明确",
                    "ishandle": null,
                    "warningid": null,
                    "projectid": "GL01_GC",
                    "handleway": null,
                    "faultview": null,
                    "statuscode": 2,
                    "mainid": null,
                    "resetrate": null,
                    "staterate": null,
                    "failrate": null,
                    "warningrecordsid": null
                },
                {
                    "id": "9459be59-5baf-4557-8696-3adb76a2f2e4",
                    "windpowerstationid": "GL_FDC",
                    "windturbineid": "广灵第023台风机",
                    "stoptime": "2022-08-03T01:23:04.000+0000",
                    "starttime": null,
                    "stophours": null,
                    "losspower": null,
                    "stoptypeid": "维护停机",
                    "ishandle": null,
                    "warningid": null,
                    "projectid": "GL01_GC",
                    "handleway": null,
                    "faultview": null,
                    "statuscode": 4,
                    "mainid": null,
                    "resetrate": null,
                    "staterate": null,
                    "failrate": null,
                    "warningrecordsid": 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
                }
            ],
            typeList:[
                {
                    value: 2,
                    name: '故障',
                },
                {
                    value: 4,
                    name: '维护',
                },
            ],
            typeStatus: '',
        };
    },
    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.getShutdownevent({
                wpid: this.selectValue,
                beginDate: dayjs(this.timeValue[0]).format("YYYY-MM-DD"),
                endDate: dayjs(this.timeValue[1]).format("YYYY-MM-DD"),
                type: this.typeStatus,
            }).then(res => {
                if (res.data) {
                    res.data.data.forEach(item => {
                        if (item.stoptime) {
                            item.stoptime = dayjs(item.stoptime).format("YYYY-MM-DD HH:mm:ss")
                        }
                        if (item.starttime) {
                            item.starttime = dayjs(item.starttime).format("YYYY-MM-DD HH:mm:ss")
                        }
                    });
                    this.tableList = res.data.data
                }
            })
        },
        exportExcel() {
            // 数据源
            let data = [];
            this.tableList.forEach((item) => {
                let values = {
                    风机: item.windturbineid,
                    停机时间: item.stoptime,
                    恢复时间: item.starttime,
                    停机小时: item.stophours,
                    损失电量: item.losspower,
                    停机类型: item.stoptypeid,
                };
                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: 25 }, { wch: 25 }, { wch: 10 }, { wch: 10 }, { wch: 25 }];
            // 生成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>