页面优化

zhanghua

2023-11-13 4c6f2df21a29048440a85e34dadcd4f1c75c179c

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

@@ -1,13 +1,166 @@
<template>
  
    <div>
        <div class="title">设备信息</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 prop="MN" label="设备编码" min-width="120px">
                </el-table-column>
                <el-table-column
                    prop="Locale.Name"
                    label="监测点"
                    min-width="150px"
                >
                </el-table-column>
                <el-table-column
                    prop="LocaleNameStr"
                    label="所属单位"
                    min-width="120px"
                >
                </el-table-column>
                <el-table-column
                    prop="SubtypeStr"
                    label="设备类型"
                    min-width="120px"
                >
                </el-table-column>
                <el-table-column prop="ModelStr" label="型号" min-width="95px">
                </el-table-column>
                <el-table-column prop="Brand" label="品牌" min-width="95px">
                </el-table-column>
                <el-table-column prop="Sim" label="SIM卡" min-width="95px">
                </el-table-column>
            </el-table>
        </div>

        <div class="title">监测点运维情况</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="tableData2"
                :row-class-name="tableRowClassName"
            >
                <el-table-column prop="hour_str" label="监测点" width="100px">
                </el-table-column>
                <el-table-column
                    prop="hour_str"
                    label="监测点地址"
                    min-width="150px"
                >
                </el-table-column>
                <el-table-column
                    prop="hour_str"
                    label="维护类型"
                    min-width="150px"
                >
                </el-table-column>
                <el-table-column
                    prop="hour_str"
                    label="设备编号"
                    min-width="150px"
                >
                </el-table-column>
                <el-table-column
                    prop="hour_str"
                    label="派单日期"
                    min-width="150px"
                >
                </el-table-column>
                <el-table-column
                    prop="hour_str"
                    label="处理日期"
                    min-width="150px"
                >
                </el-table-column>
                <el-table-column
                    prop="hour_str"
                    label="运维人员"
                    min-width="150px"
                >
                </el-table-column>
                <el-table-column
                    prop="hour_str"
                    label="操作状态"
                    min-width="150px"
                >
                </el-table-column>
                <el-table-column
                    prop="hour_str"
                    label="查看详情"
                    min-width="150px"
                >
                </el-table-column>
            </el-table>
        </div>
    </div>
</template>

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

    created() {
        this.getData();
    },
    methods: {
        getData() {
            let param = {
                field: "devices",
                localeId: this.inTimeData.Lid
            }
            statisticsApi.getDocument(param).then(jsonStr => {
                const res = JSON.parse(jsonStr)
                let list = res.Data
                list.forEach(o => {
                    o.LocaleNameStr = o.Locale.Name.substring(0, o.Locale.Name.length - 3)
                    o.SubtypeStr = o.Subtype == 3 ? '检测仪设备' : '-'
                    o.ModelStr = o.Model == 2 ? 'MRJC-YY-A01' : '-'
                });
                this.tableData = list
            })

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

<style>

.title {
    line-height: 1;
    text-align: left;
    font-size: 20px;
    margin: 5px 0px;
}
</style>