添加时间筛选

zhanghua

2025-07-16 7c20fd15b7fbc2bd5756b39d5ab655cc849ffcc3

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

@@ -1,13 +1,235 @@
<template>
  
  <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="80">
        </el-table-column>
        <el-table-column
          prop="Name"
          label="监测点"          
          min-width="20%"
        >
        </el-table-column>
        <el-table-column
          prop="ExcessNum"
          label="超标天数"          
          min-width="10%"
        >
        </el-table-column>
        <el-table-column
          prop="FilterAbnormallyUsedDays"
          label="净化器不正常使用天数"          
          min-width="20%"
        >
        </el-table-column>
        <el-table-column
          prop="AbnormalOfflineDays"
          label="异常使用天数"          
          min-width="10%"
        >
        </el-table-column>
        <el-table-column
          prop="FilterWashTimes"
          label="清洗记录（次）"          
          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/header2.vue";
import statisticsApi from "@/api/smoke/statistics";
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,
        };
      }

}
      statisticsApi
        .findCurAlarmList(params)
        .then((list) => {
          this.tableData = list;
          this.totalNum = list.length;
        })
        .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>