页面优化

zhanghua

2023-11-13 4c6f2df21a29048440a85e34dadcd4f1c75c179c

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

@@ -1,13 +1,90 @@
<template>
  
    <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="hour_str" label="时间" min-width="150px">
            </el-table-column>
            <el-table-column
                prop="emissions_conc"
                label="油烟折算浓度"
                min-width="120px"
            >
            </el-table-column>
            <el-table-column
                prop="granule_conc"
                label="颗粒物折算浓度"
                min-width="120px"
            >
            </el-table-column>
            <el-table-column
                prop="hydrocarbon_conc"
                label="非甲烷折算浓度"
                min-width="95px"
            >
            </el-table-column>
            <el-table-column
                prop="status_str"
                label="排放状态"
                min-width="180px"
            >
            </el-table-column>
        </el-table>
    </div>
</template>

<script>
import statisticsApi from "@/api/smoke/statistics";
export default {
    data() {
        return {
            tableData: []
        }
    },

    created() {
        this.getData();
    },
    methods: {
        getData() {
            let param = {
                field: "tenHourData",
                localeId: this.inTimeData.Lid
            }
            statisticsApi.getDocument(param).then(jsonStr => {
                const res = JSON.parse(jsonStr)
                let list = res.Data.list
                list.forEach(o => {
                    o.hour_str = o.hour + '-' + (o.hour + 1) + '点'
                    o.status_str = o.status == '0' ? '达标' : '超标'
                    o.status = '达标'
                });
                this.tableData = list
            })

        },
        // 设置表格斑马纹
        tableRowClassName({ row, rowIndex }) {
            if ((rowIndex + 1) % 2 === 0) {
                return "warning-row";
            } else {
                return "success-row";
            }
        },
    },
    props: ['inTimeData']
}
</script>

<style>

</style>