sx-project/src/views/entry/maintain.vue

<template>
    <div>
        <div class="title-list">
            <div class="search">
                <div class="date">风场:</div>
                <el-select class="inputs" v-model="selectValue" placeholder="请选择" @change="handleChange()">
                    <el-option v-for="item in stationList" :key="item.aname" :label="item.aname" :value="item.id">
                    </el-option>
                </el-select>
            </div>
            <div class="search">
                <div class="date">机组:</div>
                <el-select class="inputs" clearable v-model="groupId" placeholder="请选择">
                    <el-option v-for="item in groupList" :key="item.code" :label="item.code" :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="datetimerange" range-separator="至"
                        start-placeholder="开始日期" end-placeholder="结束日期">
                    </el-date-picker>
                </div>
            </div>
            <div class="query-actions">
                <button class="button" @click="getDatas">查询</button>
                <button class="button" @click="add">新增</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="projectname" label="期次" align="center" width="220" sortable></el-table-column>
                <el-table-column label="场站名称" prop="wpname" align="center" sortable>
                </el-table-column>
                <el-table-column label="风机名称" prop="wtname" align="center" sortable>
                </el-table-column>
                <el-table-column label="开始时间" prop="showbegindate" align="center" sortable>
                </el-table-column>
                <el-table-column label="结束时间" prop="showenddate" align="center" sortable>
                </el-table-column>
                <el-table-column label="维护内容" prop="defecteliminating" align="center" sortable>
                </el-table-column>
                <el-table-column label="损失电量" prop="powerloss" align="center" sortable>
                </el-table-column>
                <el-table-column label="故障时长" prop="faultduration" align="center" sortable>
                </el-table-column>
                <el-table-column label="时长影响容量" prop="impactcapacity" align="center" sortable>
                </el-table-column>
                <el-table-column label="内报/外报" prop="type" align="center" sortable>
                </el-table-column>
                <el-table-column label="操作" align="center">
                    <template #default="scope">
                        <el-button type="text" style="color: #597ef7" @click="handleEdit(scope.row)">编辑</el-button>
                        <el-button type="text" style="color: #b3bdc0" @click="handleDelete(scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>

        <el-dialog v-model="dialogVisible" title="逆变器详情" width="45%" top="10vh" :show-close="true">
            <div class="table-list">
                <div class="lists">
                    <div class="rows">
                        <div class="rows-name">开始时间:</div>
                        <el-date-picker v-model="sendData.begindate" type="datetime" placeholder="选择开始时间">
                        </el-date-picker>
                    </div>
                    <div class="rows">
                        <div class="rows-name">结束时间:</div>
                        <el-date-picker v-model="sendData.enddate" type="datetime" placeholder="选择结束时间">
                        </el-date-picker>
                    </div>
                </div>
                <div class="lists">
                    <div class="rows">
                        <div class="rows-name">维护内容:</div>
                        <el-input type="textarea" class="rows-input" v-model="sendData.defecteliminating"
                            placeholder="请输入维护内容"></el-input>
                    </div>
                </div>
                <div class="lists" style="margin-bottom: 40px">
                    <div class="rows">
                        <div class="rows-name">损失电量:</div>
                        <el-input class="rows-inputs" v-model="sendData.powerloss" placeholder="请输入损失电量"></el-input>
                    </div>
                    <div class="rows">
                        <div class="rows-name">内报/外报:</div>
                        <el-select class="inputs" clearable v-model="sendData.type" placeholder="请选择">
                            <el-option v-for="item in typesList" :key="item.name" :label="item.name" :value="item.name">
                            </el-option>
                        </el-select>
                    </div>
                </div>
            </div>
            <div class="submit">
                <el-button type="primary" plain @click="sunmit">提交</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
import api from "api/index";
import dayjs from "dayjs";
import XLSX from "xlsx";
export default {
    data() {
        return {
            timeValue: [],
            groupId: '',
            groupList: [
            ],
            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
        },
            ],
            defaultProps: {
                children: "data",
                label: 'code',
                value: 'id',
            },
            selectValue: '',
            typeList: [
                {
                    name: '变频器',
                },
                {
                    name: '发电机',
                },
                {
                    name: '齿轮箱',
                },
                {
                    name: '箱变',
                },
                {
                    name: '偏航系统',
                },
                {
                    name: '液压站',
                },
                {
                    name: '电网',
                },
                {
                    name: '风速风向',
                },
                {
                    name: '主轴',
                },
                {
                    name: '变桨系统',
                },
                {
                    name: '安全链',
                },
                {
                    name: '机舱柜',
                },
                {
                    name: '塔底柜',
                },
                {
                    name: '塔筒',
                },
                {
                    name: '机舱',
                },
                {
                    name: '其他',
                },
            ],
            tableList: [
            ],
            resultsList: [
                {
                    name: '已处理'
                },
                {
                    name: '未处理'
                }
            ],
            typesList: [
                {
                    name: '内报'
                },
                {
                    name: '外报'
                }
            ],
            dialogVisible: false,
            sendData: {
                begindate: '',
                enddate: '',
                faultphenomenon: '',
                defecteliminating: '',
                processingresults: '',
                powerloss: '',
                type: '',
            },
            isEdit: false,
        };
    },
    created() {
        let date = new Date();
        this.timeValue[0] = new Date(new Date(new Date().toLocaleDateString()).getTime());
        this.timeValue[1] = date.getTime();
        this.getStation()
    },
    methods: {
        getStation() {
            api.getStation().then(res => {
                if (res.data) {
                    let arr = [
                        {
                            id: "",
                            aname: '全部',
                            code: "",
                        }
                    ]
                    this.stationList = [ ...arr , ...res.data.data]
                    console.log(this.stationList);
                    this.getGroupList(this.stationList[0].code)
                    this.selectValue = this.stationList[0].id
                    this.getDatas()
                }
            })
        },
        getGroupList(groupId) {
            api.getGroupList({
                wpid: groupId
            }).then(res => {
                this.groupList = res.data.data
            })
        },

        handleChange() {
            this.getGroupList(this.selectValue)
        },
        getDatas() {
            api.mainrecord({
                wpid: this.selectValue,
                wtid: this.groupId,
                begin: new Date(this.timeValue[0]).getTime(),
                end: new Date(this.timeValue[1]).getTime(),
            }).then(res => {
                if (res.data) {
                    res.data.data.forEach(item => {
                        item.showbegindate = dayjs(item.begindate).format("YYYY-MM-DD HH:mm:ss")
                        item.showenddate = dayjs(item.enddate).format("YYYY-MM-DD HH:mm:ss")
                    })
                    this.tableList = res.data.data
                }
            })
        },
        add() {
            if (this.groupId) {
                this.sendData = {
                    begindate: '',
                    enddate: '',
                    defecteliminating: '',
                    powerloss: '',
                    type: '',
                }
                this.dialogVisible = true
                this.isEdit = false
            } else {
                this.$message({
                    message: '请选择风机',
                    type: 'warning'
                });
            }
        },
        sunmit() {
            if (this.isEdit) {
                this.sendData.begindate = new Date(this.sendData.begindate).getTime()
                this.sendData.enddate = new Date(this.sendData.enddate).getTime()
                let pairs = this.sendData
                api.mainrecordEdit(pairs).then(res => {
                    if (res.data) {
                        this.$message({
                            type: 'success',
                            message: '修改成功!'
                        });
                        this.dialogVisible = false
                        this.getDatas()
                    }
                })
            } else {
                this.sendData.wtid = this.groupId
                this.sendData.begindate = new Date(this.sendData.begindate).getTime()
                this.sendData.enddate = new Date(this.sendData.enddate).getTime()
                let pairs = this.sendData
                api.mainrecordAdd(pairs).then(res => {
                    if (res.data) {
                        this.$message({
                            type: 'success',
                            message: '添加成功!'
                        });
                        this.dialogVisible = false
                        this.getDatas()
                    }
                })
            }
        },
        handleEdit(val) {
            this.isEdit = true
                this.sendData = val
                this.dialogVisible = true
        },
        handleDelete(val) {
            this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                api.mainrecordDel({
                    id: val.id
                }).then(res => {
                    if (res.data) {
                        this.$message({
                            type: 'success',
                            message: '删除成功!'
                        });
                        this.getDatas()
                    }
                })

            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },
        exportExcel() {
            // 数据源
            let data = [];
            this.tableList.forEach((item) => {
                let values = {
                    期次: item.projectname,
                    场站名称: item.wpname,
                    风机名称: item.wtname,
                    开始时间: item.showbegindate,
                    结束时间: item.showenddate,
                    维护内容: item.defecteliminating,
                    损失电量: item.powerloss,
                    故障时长: item.faultduration,
                    时长影响容量: item.impactcapacity,
                    内报外报: item.type,
                };
                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: 10 }, { wch: 10 }, { wch: 10 }, { wch: 25 }, { 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;
    }
}

.table-list {
    min-height: 40vh;
}

.lists {
    width: 90%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    margin: 0 5% 20px 5%;
}

.rows {
    display: flex;
    flex-direction: row;
    align-items: center;

    .rows-name {
        width: 100px;
    }

    .rows-input {
        width: 400px;
    }

    .rows-inputs {
        width: 220px;
    }
}

.submit {
    position: absolute;
    right: 20px;
    bottom: 20px;
}
</style>