油烟

zhanghua

2023-11-10 a1fb7d5473505c08cd0a20f68d3007c6efd383ff

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

@@ -1,13 +1,301 @@
<template>
    <div>
      <MyHeader @getList="getRealTimeList" @exportTable="exportInTime"></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="AcquitAtStr"
            label="监测点"          
            min-width="15%"
          >
          </el-table-column>
          <el-table-column
            prop="Addr"
            label="设备编号"          
            min-width="10%"
          >
          </el-table-column>
          <el-table-column
            prop="FanStatusStr"
            label="异常离线天数"          
            min-width="10%"
          >
          </el-table-column>
          <el-table-column
            prop="AA"
            label="异常离线待处理天数"          
            min-width="10%"
          >
          </el-table-column>
          <el-table-column
            prop="EmissionsConc"
            label="歇业天数"          
            min-width="10%"
          >
          </el-table-column>
          <el-table-column
            prop="EmissionsConc"
            label="净化器不正常使用天数"          
            min-width="10%"
          >
          </el-table-column>
          <el-table-column
            prop="EmissionsConc"
            label="监测仪故障天数"          
            min-width="10%"
          >
          </el-table-column>
          <el-table-column
            prop="EmissionsConc"
            label="店家原因导致离线天数"          
            min-width="10%"
          >
          </el-table-column>
          <el-table-column
            prop="EmissionsConc"
            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>
  
</template>

<script>
export default {

}
</script>

<style>

</style>
  <script>
  import MyHeader from "./header/header2.vue";
  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 = this.getParam(seachData);
        } else {
          params = {
            pageNum: this.currentPage,
            pageSize: this.pageSize,
          };
        }
  
        realTimeApi
          .findInTimeList(params)
          .then(({ list, total }) => {
            list.forEach((e) => {
              e.AcquitAtStr = this.dateFormat(
                "YYYY-mm-dd HH:MM",
                new Date(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));
      },
      exportInTime(seachData) {
        let params;
        if (seachData) {
          params = this.getParam(seachData);
        }
        realTimeApi
          .exportInTime(params)
          .then((res) => {
            debugger;
            let time = new Date();
            let deathdate = time.toLocaleDateString();
            const blob = new Blob([res.data], {
              type: "application/vnd.ms-excel;charset=utf-8",
            });
            if (window.navigator.msSaveBlob) {
              window.navigator.msSaveBlob(
                blob,
                deathdate + "监测总体情况报表" + ".xls"
              );
            } else {
              const url = window.URL.createObjectURL(blob);
              const link = document.createElement("a");
              link.style.display = "none";
              link.href = url;
              link.download = deathdate + "监测总体情况报表" + ".xls";
              document.body.appendChild(link);
              link.click();
              document.body.removeChild(link);
            }
            this.$message.success("操作成功");
          })
          .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 lang="scss" scoped>
  .el-table {
    .operation {
      display: flex;
      color: var(--operation-color);
      .line {
        padding: 0 5px;
      }
  
      span:hover {
        cursor: pointer;
      }
    }
  }
  </style>