油烟

zhanghua

2023-11-10 a1fb7d5473505c08cd0a20f68d3007c6efd383ff

 src/views/smoke/report/components/reduceEmissions.vue

@@ -1,13 +1,280 @@
<template>
  
    <div>
        <MyHeader
            @getList="getRealTimeList"
            @exportTable="exportInTime"
        ></MyHeader>
        <!-- 数据展示 -->
        <div style="width: 100%; overflow-x: scroll">
            <el-table
                border
                stripe
                ref="multipleTable"
                :header-cell-style="{
                    background: '#F5F5F5',
                    'font-weight': '650',
                    'line-height': '45px'
                }"
                :data="tableData"
                :row-class-name="tableRowClassName"
            >
                <el-table-column label="序号" type="index" width="60px">
                </el-table-column>
                <el-table-column prop="AcquitAtStr" label="监测点" min-width="10%">
                </el-table-column>
                <el-table-column prop="Addr" label="安装地址"  min-width="20%">
                </el-table-column>
                <el-table-column
                    prop="FanStatusStr"
                    label="设备编码"
                    min-width="15%"
                >
                </el-table-column>
                <el-table-column
                    prop="AAA"
                    label="PM2.5减排量（Kg）"
                    min-width="10%"
                >
                </el-table-column>
                <el-table-column
                    prop="EmissionsConc"
                    label="PM10减排量（Kg）"
                    min-width="10%"
                >
                </el-table-column>
                <el-table-column
                    prop="CEmissions"
                    label="油烟减排（Kg）"
                    min-width="10%"
                >
                </el-table-column>
                <el-table-column
                    prop="GranuleConc"
                    label="vocs减排量（Kg）"
                    min-width="10%"
                >
                </el-table-column>
            </el-table>
        </div>
        <div class="tools">
            <div class="pagination">
                <el-pagination
                    background
                    @prev-click="handlePrev"
                    @next-click="handleNext"
                    :current-page="currentPage"
                    layout="prev, pager, next"
                    :total="totalNum"
                    :page-size="pageSize"
                    @current-change="changeCurrentPage"
                >
                </el-pagination>
            </div>
        </div>
    </div>
</template>

<script>
import MyHeader from "./header/header1.vue";
import realTimeApi from "@/api/smoke/realTime";
export default {
    data() {
        return {
            tableData: [],
            totalNum: 0,
            pageSize: 10,
            currentPage: 1,
        };
    },
    components: { MyHeader },
    created() {
        this.getRealTimeList();
    },
    methods: {
        getRealTimeList(seachData) {
            let params;
            if (seachData) {
                params = this.getParam(seachData)
            } else {
                params = {
                    pageNum: this.currentPage,
                    pageSize: this.pageSize,
                };
            }

}
            realTimeApi
                .findInTimeList(params)
                .then(({ list, total }) => {
                    list.forEach(e => {
                        e.AcquitAtStr = this.dateFormat("YYYY-mm-dd HH:MM", new Date(e.AcquitAt));
                        e.FanStatusStr = this.FanStatusStr(e.FanStatus)
                        e.FilterStatusStr = this.FanStatusStr(e.FilterStatus)
                        e.OnlineStatusStr = this.OnlineStatusStr(e.OnlineStatus)
                        e.StatusStr = this.StatusStr(e.Status)
                    });
                    this.tableData = list;
                    this.totalNum = total;
                })
                .catch((err) => this.$message.error(err));
        },
        exportInTime(seachData) {
            let params;
            if (seachData) {
                params = this.getParam(seachData)
            }
            realTimeApi
                .exportInTime(params)
                .then((res) => {
                  debugger
                    let time = new Date();
                    let deathdate = time.toLocaleDateString();
                    const blob = new Blob([res.data], {
                        type: "application/vnd.ms-excel;charset=utf-8",
                    });
                    if (window.navigator.msSaveBlob) {
                        window.navigator.msSaveBlob(
                            blob,
                            deathdate + "监测总体情况报表" + ".xls"
                        );
                    } else {
                        const url = window.URL.createObjectURL(blob);
                        const link = document.createElement("a");
                        link.style.display = "none";
                        link.href = url;
                        link.download = deathdate + "监测总体情况报表" + ".xls";
                        document.body.appendChild(link);
                        link.click();
                        document.body.removeChild(link);
                    }
                    this.$message.success("操作成功");
                })
                .catch((err) => this.$message.error(err));
        },
        getParam(seachData) {
            let params;
            if (seachData) {
                const seachParams = seachData.seachData
                params = {
                    owner:
                        seachParams.owner == undefined
                            ? null
                            : seachParams.owner,
                    onlineStatus:
                        seachParams.onlineStatus == undefined
                            ? null
                            : seachParams.onlineStatus,
                    status: seachParams.status == undefined
                        ? null
                        : seachParams.status,
                    type:
                        seachParams.type == undefined
                            ? null
                            : seachParams.type,
                    startTime:
                        seachParams.alarmTime == undefined
                            ? null
                            : this.dateFormat("YYYY-mm-dd HH:MM:SS", seachParams.alarmTime[0]),
                    endTime:
                        seachParams.alarmTime == undefined
                            ? null
                            : this.dateFormat("YYYY-mm-dd HH:MM:SS", seachParams.alarmTime[1]),
                };
            }
            return params;
        },

        FanStatusStr(FanStatus) {
            switch (FanStatus) {
                case 1:
                    return "开"
                case 2:
                    return "关"
                default:
                    return "异常"
            }
        },
        OnlineStatusStr(Status) {
            switch (Status) {
                case 1:
                    return "在线"
                case 2:
                    return "离线"
                default:
                    return "异常离线"
            }
        },
        StatusStr(Status) {
            switch (Status) {
                case "NORMAL":
                    return "正常"
                case "ALARM":
                    return "预警"
                case "EXCESS":
                    return "超标"
                case "DOWN":
                    return "离线"
                default:
                    return "异常离线"
            }
        },
        // 设置表格斑马纹
        tableRowClassName({ row, rowIndex }) {
            if ((rowIndex + 1) % 2 === 0) {
                return 'warning-row';
            } else {
                return 'success-row';
            }
        },
        // 当前页改变触发事件
        changeCurrentPage(page) {
            this.currentPage = page;
            this.getRealTimeList();
        },
        // 上一页点击事件
        handlePrev(page) {
            this.currentPage = page;
            this.getRealTimeList();
        },
        // 下一页点击事件
        handleNext(page) {
            this.currentPage = page;
            this.getRealTimeList();
        },
        dateFormat(fmt, date) {
            let ret;
            const opt = {
                "Y+": date.getFullYear().toString(),        // 年
                "m+": (date.getMonth() + 1).toString(),     // 月
                "d+": date.getDate().toString(),            // 日
                "H+": date.getHours().toString(),           // 时
                "M+": date.getMinutes().toString(),         // 分
                "S+": date.getSeconds().toString()          // 秒
                // 有其他格式化字符需求可以继续添加，必须转化成字符串
            };
            for (let k in opt) {
                ret = new RegExp("(" + k + ")").exec(fmt);
                if (ret) {
                    fmt = fmt.replace(ret[1], (ret[1].length == 1) ? (opt[k]) : (opt[k].padStart(ret[1].length, "0")))
                };
            };
            return fmt;
        },
    }
};
</script>

<style>
<style lang="scss" scoped>
.el-table {
    .operation {
        display: flex;
        color: var(--operation-color);
        .line {
            padding: 0 5px;
        }

        span:hover {
            cursor: pointer;
        }
    }
}
</style>