index.vue 4.99 KB
Newer Older
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151
<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryParams" :inline="true" v-show="showSearch" label-width="80px">
      <el-form-item label="设备编号" prop="detectorCode">
        <el-input
          v-model="queryParams.detectorCode"
          placeholder="请输入设备编号"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="状态" prop="isCancelAlarm">
        <el-select v-model="queryParams.isCancelAlarm" placeholder="请选择状态" clearable size="small">
          <el-option
            v-for="dict in typeOptions"
            :key="dict.dictValue"
            :label="dict.dictLabel"
            :value="dict.dictValue"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="预警时间" prop="createTime">
        <el-date-picker clearable size="small"
                        v-model="queryParams.createTimeStart"
                        type="datetime"
                        value-format="yyyy-MM-dd HH:mm:ss"
                        placeholder="请选择起始时间">
        </el-date-picker><span style="color: #bebfc3"> - </span>
        <el-date-picker clearable size="small"
                        v-model="queryParams.createTimeEnd"
                        type="datetime"
                        value-format="yyyy-MM-dd HH:mm:ss"
                        placeholder="请选择截止时间">
        </el-date-picker>
      </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-table v-loading="loading" :data="detectorReportDataList">
      <el-table-column label="所在单位" align="center" prop="unitName" />
      <el-table-column label="设备编号" align="center" prop="detectorCode" />
      <el-table-column label="设备类型" align="center" prop="detectorType">
        <template slot-scope="scope">
          <span v-if="scope.row.detectorType == '1'">家用探测器</span>
          <span v-if="scope.row.detectorType == '2'">工业探测器</span>
        </template>
      </el-table-column>
      <el-table-column label="预警信息" align="center" prop="statusName" />
      <el-table-column label="预警时间" align="center" prop="alarmTime">
        <template slot-scope="scope">
          <span>{{ scope.row.alarmTime }}</span>
        </template>
      </el-table-column>
      <el-table-column label="状态" align="center" prop="handledStatus">
        <template slot-scope="scope">
          <span v-if="scope.row.handledStatus == '0'">未销警</span>
          <span v-if="scope.row.handledStatus == '1'">自动消警</span>
          <span v-if="scope.row.handledStatus == '2'">手动消警</span>
        </template>
      </el-table-column>
      <el-table-column label="消警时间" align="center" prop="cancelTime">
        <template slot-scope="scope">
          <span>{{ scope.row.cancelTime }}</span>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />
  </div>
</template>

<script>
import { listDetectorReportData } from "@/api/detector/detectorReportData";

export default {
  name: "DetectorReportData",
  components: {
  },
  data() {
    return {
      // 遮罩层
      loading: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 燃气用户设备上报的数据表格数据
      detectorReportDataList: [],
      // 字典
      typeOptions: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        detectorCode: null,
        statusName: null,
        isCancelAlarm: null,
        createTimeStart: null,
        createTimeEnd: null
      },
    };
  },
  created() {
    this.getList();
    this.getDicts("t_detector_report_status").then(response => {
      this.typeOptions = response.data;
    });
  },
  methods: {
    /** 查询燃气用户设备上报的数据列表 */
    getList() {
      this.loading = true;
      listDetectorReportData(this.queryParams).then(response => {
        this.detectorReportDataList = response.rows;
        console.log(this.detectorReportDataList);
        this.total = response.total;
        this.loading = false;
      });
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.queryParams = {
        pageNum: 1,
        pageSize: 10,
        detectorCode: null,
        statusName: null,
        isCancelAlarm: null,
        createTimeStart: null,
        createTimeEnd: null
      }
      this.resetForm("queryParams");
      this.handleQuery();
    },
  }
};
</script>