bonus-ui/src/views/kitchen/environment/alarmRecord/index.vue

<template>
  <div class="app-container">
    <div style="width: 100%;">
      <el-tabs v-model="activeName" type="card" @tab-click="handleTabClick">
        <el-tab-pane label="环境报警记录" name="5"></el-tab-pane>
        <el-tab-pane label="门禁报警记录" name="1"></el-tab-pane>
        <el-tab-pane label="监控报警记录" name="6"></el-tab-pane>
      </el-tabs>
    </div> 
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
        <el-form-item label="关键字" prop="keyWord">
            <el-input v-model="queryParams.keyWord" placeholder="请输入设备名称，编号" maxlength="20" clearable style="width: 240px"/>
        </el-form-item>    
        <el-form-item label="设备类型" prop="deviceType5" v-if="activeName==5">
            <el-select v-model="queryParams.deviceType5" style="width: 240px" clearable> 
                <el-option label="传感器" value="2"></el-option>
                <!-- <el-option label="气体检测仪" value="13"></el-option>    -->
                <el-option label="温湿度传感器" value="14"></el-option>   
                <!-- <el-option label="烟雾检测传感器 " value="15"></el-option>    -->
                <!-- <el-option label="水浸检测传感器 " value="22"></el-option>    -->
            </el-select>   
        </el-form-item>
        <el-form-item label="设备类型" prop="deviceType6" v-if="activeName==6">
            <el-select v-model="queryParams.deviceType6" style="width: 240px" clearable> 
                <el-option label="摄像头" value="1"></el-option>
                <el-option label="硬盘录像机" value="9"></el-option>
            </el-select>   
        </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8"> 
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <el-table v-loading="loading" :data="tableListData" height="800">
      <el-table-column label="序号" align="center" width="80" type="index">
        <template slot-scope="scope">
          <span>{{(queryParams.pageNum - 1) * queryParams.pageSize + scope.$index + 1}}</span>
        </template>
      </el-table-column> 
      <el-table-column label="关联食堂" align="center" prop="canteenName" :show-overflow-tooltip="true"  />
      <el-table-column label="设备名称" align="center" prop="deviceName" :show-overflow-tooltip="true" />
      <el-table-column label="设备编号" align="center" prop="deviceNo" :show-overflow-tooltip="true" />
      <el-table-column label="位置" align="center" prop="subPlace" :show-overflow-tooltip="true"  />
      <el-table-column label="报警原因" align="center" prop="measureData" :show-overflow-tooltip="true" />
      <el-table-column label="报警时间" align="center" prop="createTime" :show-overflow-tooltip="true" />
    </el-table> 
    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    /> 
  </div>
</template>

<script> 
import { getKitchenDeviceSensorAlarmRecordListApi } from "@/api/kitchen/environment";

export default {
  name: "",
  dicts: [],
  data() {
    return {
      // 遮罩层
      loading: false,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      //表格数据
      tableListData: [],
      activeName:'5',
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        keyWord:undefined, 
        deviceType5:undefined, 
        deviceType6:undefined,
      }, 
    };
  },
  created() { 
    // this.getList();
  },
  mounted(){
    if(this.$route.query.activeName){
      this.activeName = this.$route.query.activeName
    } 
    this.getList();
  },
  methods: { 
      /** 搜索按钮操作 */
      handleQuery() {
          this.queryParams.pageNum = 1;
          this.getList();
      },
      /** 重置按钮操作 */
      resetQuery() { 
          this. queryParams = {
            pageNum: 1,
            pageSize: 10,
            keyWord:undefined, 
            deviceType5:undefined, 
            deviceType6:undefined,
          }
          this.resetForm("queryForm");
          this.handleQuery();
      },
      handleTabClick(tab, event) { 
            console.log(tab.name,tab.label)
            this.handleQuery()
      },
      /** 查询列表 */
      getList() {
          this.loading = true;
          let param = { 
            "deviceCategory": this.activeName, 
            "pageNum": this.queryParams.pageNum, 
            "pageSize": this.queryParams.pageSize,
            "keyWord": this.queryParams.keyWord,
            "deviceType": null,
            "onlyWarn":1
          }
          if(this.activeName==1){
            param.deviceType = null;
          }
          if(this.activeName==5&&this.queryParams.deviceType5){
            param.deviceType = this.queryParams.deviceType5;
          }
          if(this.activeName==6&&this.queryParams.deviceType6){
            param.deviceType = this.queryParams.deviceType6;
          }
          getKitchenDeviceSensorAlarmRecordListApi(param).then(response => {
              this.tableListData = response.rows;
              this.total = Number(response.total);
              this.loading = false;
          });
      }
  }
};
</script>