table

zhanghua

2023-10-05 5178799b28cc30037f3991aecf83811e92cba296

table

 src/views/smoke/realTime/components/header/index.vue

@@ -67,7 +67,7 @@
      <el-form-item>
        <el-button type="primary" @click="getUserList">刷新</el-button>

        <el-button type="primary" @click="resetAll">导出</el-button>
        <el-button type="primary" @click="exportTableData">导出</el-button>
      </el-form-item>
    </el-form>
  </div>
@@ -169,9 +169,11 @@
    getUserList() {
      const ownerItem = this.ownerOptions[this.seachData.ownerIndex];
      this.seachData.owner = ownerItem.Pid + ownerItem.Id;
      console.log(this.seachData);
      this.$emit("getList", { seachData: this.seachData });
    },
    exportTableData(){

    }
  },
};
</script>

 src/views/smoke/realTime/index.vue

@@ -1,83 +1,306 @@
<template>
  <MyHeader @getList="getRealTimeList"></MyHeader>
    <div>
        <MyHeader @getList="getRealTimeList"></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="Locale" label="监测点" width="120px">
                </el-table-column>
                <el-table-column prop="Addr" label="安装地址" width="180px">
                </el-table-column>
                <el-table-column
                    prop="AcquitAtStr"
                    label="采集时间"
                    width="100px"
                >
                </el-table-column>
                <el-table-column
                    prop="FanStatusStr"
                    label="风机状态"
                    width="80px"
                >
                </el-table-column>
                <el-table-column
                    prop="FilterStatusStr"
                    label="净化器状态"
                    width="95px"
                >
                </el-table-column>
                <el-table-column
                    prop="EmissionsConc"
                    label="油烟实时浓度（mg/m3）"
                    width="110px"
                >
                </el-table-column>
                <el-table-column
                    prop="CEmissions"
                    label="油烟折算浓度（mg/m3）"
                    width="110px"
                >
                </el-table-column>
                <el-table-column
                    prop="GranuleConc"
                    label="颗粒物实时浓度（mg/m3）"
                    width="120px"
                >
                </el-table-column>
                <el-table-column
                    prop="CGranule"
                    label="颗粒物折算浓度（mg/m3）"
                    width="120px"
                >
                </el-table-column>
                <el-table-column
                    prop="HydrocarbonConc"
                    label="非甲烷总烃实时浓度（mg/m3）"
                    width="160px"
                >
                </el-table-column>
                <el-table-column
                    prop="CHydrocarbon"
                    label="非甲烷总烃折算浓度（mg/m3）"
                    width="160px"
                >
                </el-table-column>
                <el-table-column prop="StatusStr" label="排放状态" width="80px">
                </el-table-column>
                <el-table-column
                    prop="OnlineStatusStr"
                    label="整体状态"
                    width="80px"
                >
                </el-table-column>
                <el-table-column prop="operation" label="操作" width="550px">
                    <template slot-scope="scope">
                        <div class="operation">
                            <span @click="handleUpload(scope.row)"
                                >一点一档</span
                            >
                            <span class="line">|</span>
                            <span @click="handleDispatch(scope.row)"
                                >查看每分钟数据</span
                            >
                            <span class="line">|</span>
                            <span @click="handleLearn(scope.row)"
                                >查看10min浓度</span
                            >
                            <span class="line">|</span>
                            <span @click="handleNotDeal(scope.row)"
                                >查看小时折算浓度</span
                            >
                            <span class="line">|</span>
                            <span @click="handleNotDeal(scope.row)"
                                >监测点设备管理</span
                            >
                        </div>
                    </template>
                </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 "./components/header";
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 = {
          pageNum: this.currentPage,
          pageSize: this.pageSize,
          resource:
            seachData.seachData.resource == undefined
              ? null
              : seachData.seachData.resource,
          region:
            seachData.seachData.region == undefined
              ? null
              : seachData.seachData.region,
          type: this.statusArr[1] ?? null,
          code:
            seachData.seachData.code == undefined
              ? null
              : seachData.seachData.code,
          categoryBig:
            seachData.seachData.categoryBig == undefined
              ? null
              : seachData.seachData.categoryBig,
          categorySmall:
            seachData.seachData.categorySmall == undefined
              ? null
              : seachData.seachData.categorySmall,
          site:
            seachData.seachData.site == undefined
              ? null
              : seachData.seachData.site,
          street:
            seachData.seachData.street == undefined
              ? null
              : seachData.seachData.street,
          alarmTime:
            seachData.seachData.alarmTime == undefined
              ? null
              : seachData.seachData.alarmTime,
    data() {
        return {
            tableData: [],
            totalNum: 0,
            pageSize: 10,
            currentPage: 1,
        };
      } else {
        params = {
          pageNum: this.currentPage,
          pageSize: this.pageSize,
        };
      }

      realTimeApi
        .findInTimeList(params)
        .then(({ records, total }) => {
          debugger;
          this.tableData = records;
          this.totalNum = total;
        })
        .catch((err) => this.$message.error(err));
    },
  },
    components: { MyHeader },
    created() {
        this.getRealTimeList();
    },
    methods: {
        getRealTimeList(seachData) {
            let params;
            if (seachData) {
                params = {
                    pageNum: this.currentPage,
                    pageSize: this.pageSize,
                    resource:
                        seachData.seachData.resource == undefined
                            ? null
                            : seachData.seachData.resource,
                    region:
                        seachData.seachData.region == undefined
                            ? null
                            : seachData.seachData.region,
                    type: this.statusArr[1] ?? null,
                    code:
                        seachData.seachData.code == undefined
                            ? null
                            : seachData.seachData.code,
                    categoryBig:
                        seachData.seachData.categoryBig == undefined
                            ? null
                            : seachData.seachData.categoryBig,
                    categorySmall:
                        seachData.seachData.categorySmall == undefined
                            ? null
                            : seachData.seachData.categorySmall,
                    site:
                        seachData.seachData.site == undefined
                            ? null
                            : seachData.seachData.site,
                    street:
                        seachData.seachData.street == undefined
                            ? null
                            : seachData.seachData.street,
                    alarmTime:
                        seachData.seachData.alarmTime == undefined
                            ? null
                            : seachData.seachData.alarmTime,
                };
            } else {
                params = {
                    pageNum: this.currentPage,
                    pageSize: this.pageSize,
                };
            }

            realTimeApi
                .findInTimeList(params)
                .then(({ list, total }) => {
                    list.forEach(e => {
                        e.AcquitAtStr = this.Dateformat(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));
        },
        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) {
            var fmtdate = new Date(fmt)
            var o = {
                "M+": fmtdate.getMonth() + 1,                 //月份 
                "d+": fmtdate.getDate(),                    //日 
                "h+": fmtdate.getHours(),                   //小时 
                "m+": fmtdate.getMinutes(),                 //分 
                "s+": fmtdate.getSeconds(),                 //秒 
                "q+": Math.floor((fmtdate.getMonth() + 3) / 3), //季度 
                "S": fmtdate.getMilliseconds()             //毫秒 
            };
            if (/(y+)/.test(fmt)) {
                fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
            }
            for (var k in o) {
                if (new RegExp("(" + k + ")").test(fmt)) {
                    fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
                }
            }
            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>