页面优化

zhanghua

2023-11-13 4c6f2df21a29048440a85e34dadcd4f1c75c179c

 src/views/smoke/realTime/components/intimeData.vue

@@ -1,13 +1,169 @@
<template>
  
    <div>
        <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="acquit_at_str"
                    label="采集时间"
                    min-width="150px"
                >
                </el-table-column>
                <el-table-column
                    prop="fan_status_str"
                    label="风机状态"
                    min-width="120px"
                >
                </el-table-column>
                <el-table-column
                    prop="hydrocarbon_conc"
                    label="风机电流（A）"
                    min-width="120px"
                >
                </el-table-column>
                <el-table-column
                    prop="filter_status"
                    label="净化器状态"
                    min-width="95px"
                >
                </el-table-column>
                <el-table-column
                    prop="emissions_conc"
                    label="油烟浓度(mg/m³)"
                    min-width="180px"
                >
                </el-table-column>
                <el-table-column
                    prop="granule_conc"
                    label="颗粒物浓度(mg/m³)"
                    min-width="180px"
                >
                </el-table-column>
                <el-table-column
                    prop="hydrocarbon_conc"
                    label="非甲烷总烃浓度(mg/m³)"
                    min-width="190px"
                >
                </el-table-column>
                <el-table-column prop="status" label="设备状态" width="120px">
                </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 statisticsApi from "@/api/smoke/statistics";
export default {
    data() {
        return {
            currentPage: 1,
            pageSize: 20,
            totalNum: 0,
            tableData: []
        }
    },
    created() {
        this.getRealTimeList();
    },
    methods: {
        getRealTimeList() {
            let param = {
                field: "intimeData",
                localeId: this.inTimeData.Lid
            }
            statisticsApi.getDocument(param).then(jsonStr => {
                const res = JSON.parse(jsonStr)
                let list = res.Data.content
                list.forEach(o => {
                    o.acquit_at_str = this.dateFormat(
                        "YYYY-mm-dd HH:MM:SS",
                        new Date(o.acquit_at * 1000)
                    );
                    o.fan_status_str = o.fan_status == '1' ? '开' : '关'
                    o.status = '达标'
                });
                this.tableData = list
                this.totalNum = res.Data.total
            })

        },
        // 设置表格斑马纹
        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;
        },
    },
    props: ['inTimeData']
}
</script>

<style>

</style>