油烟-报警

zhanghua

2023-10-08 740f596cb7c5b5e3576ba8aab9c4cc5732b3ccf2

油烟-报警

 src/api/smoke/alarm.js

New file
@@ -0,0 +1,12 @@
import http from '@/http'

export default {
    // 查询实时数据
    findAlarmList: (params) => {
        return http.get('/sccg/smoke/Alarm/list', params);
    },
    // 导出实时数据
    exportAlarm: (params) => {
        return http.downloadFile('/sccg/smoke/Alarm/export', params);
    },
}

 src/views/smoke/alarm/header/index.vue

New file
@@ -0,0 +1,120 @@
<template>
    <div class="header">
        <el-form :inline="true" :model="seachData" class="demo-form-inline">
           
            <el-form-item label="">
                <el-select
                    style="width: 120px"
                    v-model="seachData.msgType"
                    placeholder="消息类型"
                >
                    <el-option
                        v-for="item in msgTypeOptions"
                        :key="item.label"
                        :label="item.label"
                        :value="item.value"
                    >
                    </el-option>
                </el-select>
            </el-form-item>
            
            <el-form-item label="">
                <el-date-picker
                    v-model="seachData.alarmTime"
                    type="daterange"
                    align="right"
                    unlink-panels
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    :picker-options="pickerOptions"
                >
                </el-date-picker>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="getList">刷新</el-button>
                <el-button type="primary" @click="resetAll">重置</el-button>

                <el-button type="primary" @click="exportTableData"
                    >导出</el-button
                >
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
import realTimeApi from "@/api/smoke/realTime";

export default {
    data() {
        return {
            msgTypeOptions: [
                {
                    label: "超标",
                    value: "ExceedStandard",
                },
                {
                    label: "异常离线",
                    value: "AbnormalOffline",
                }
            ],
            
            seachData: {},
            pickerOptions: {
                shortcuts: [
                    {
                        text: "最近一周",
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                            picker.$emit("pick", [start, end]);
                        },
                    },
                    {
                        text: "最近一个月",
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                            picker.$emit("pick", [start, end]);
                        },
                    },
                    {
                        text: "最近三个月",
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                            picker.$emit("pick", [start, end]);
                        },
                    },
                ],
            },
        };
    },
    created() { },
    mounted() {
    },
    methods: {
        
        resetAll() {
            this.seachData = {};
            this.$emit("getList", { seachData: this.seachData });
        },
        getList() {
            this.$emit("getList", { seachData: this.seachData });
        },
        exportTableData() {
            this.$emit("exportTable", { seachData: this.seachData });
        }
    },
};
</script>

<style lang="scss" scoped>
.header {
    line-height: normal;
}
</style>

 src/views/smoke/alarm/index.vue

@@ -1,13 +1,239 @@
<template>
  <div>报警消息</div>
  <div>
    <MyHeader @getList="getAlarmList" @exportTable="exportAlarm"></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="AcquitAtStr" label="时间" width="120px">
        </el-table-column>
        <el-table-column prop="MsgTypeStr" label="消息类型" width="180px">
        </el-table-column>
        <el-table-column prop="Content" label="消息内容" width="100px">
        </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)">在学习</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/alarm";
export default {

  data() {
    return {
      tableData: [],
      totalNum: 0,
      pageSize: 10,
      currentPage: 1,
    };
  },
  components: { MyHeader },
  created() {
    this.getAlarmList();
  },
  methods: {
    getAlarmList(seachData) {
      let params;
      if (seachData) {
        params = this.getParam(seachData);
      } else {
        params = {
          pageNum: this.currentPage,
          pageSize: this.pageSize,
        };
}

      realTimeApi
        .findAlarmList(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));
    },
    exportAlarm(seachData) {
      let params;
      if (seachData) {
        params = this.getParam(seachData);
      }
      realTimeApi
        .exportAlarm(params)
        .then((res) => {
          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;
    },

    MsgTypeStr(Status) {
      switch (Status) {
        case "ExceedStandard":
          return "超标";
        case "AbnormalOffline":
          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>