gangkou/ruoyi-ui/src/views/history/bound/index.vue

<template>
  <div class="app-container">
    <el-form :inline="true" :model="queryParams" ref="form">
      <el-form-item label="选择部门1" prop="factoryId">
        <dept-tree @deptChange="handleDeptChange" style="width: 150px;" />
      </el-form-item>

      <el-form-item label="选择设备">
        <device-select v-model="queryParams.sn" :deptId="queryParams.deptId || ''" />
      </el-form-item>
      <el-form-item label="日期" prop="equipmentName">
        <el-date-picker v-model="dateList" type="daterange" range-separator="至" start-placeholder="开始日期"
          end-placeholder="结束日期" format="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss">
        </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="dataList" height="600px">
      <el-table-column prop="deptName" label="安装部门" header-align="center" align="center" />

      <el-table-column prop="sn" label="设备编号" header-align="center" align="center" />
      <el-table-column prop="reportTime" label="上报时间" header-align="center" align="center" />
      <!-- <el-table-column prop="wd" label="设备温度" header-align="center" align="center"/>-->

      <!-- <el-table-column prop="zl" label="传感器类型" header-align="center" align="center" /> -->
      <el-table-column prop="lc" label="量程" header-align="center" align="center" />
      <el-table-column prop="ds" label="传感器读数" header-align="center" align="center">
        <template slot-scope="scope">
          <span style="color: red;">
            {{ scope.row.ds }}
          </span>
          <span style="color: #000;">
            {{ scope.row.dw }}
          </span>
        </template>
      </el-table-column>

      <el-table-column prop="zt" label="报警状态" header-align="center" align="center">
        <template slot-scope="scope">
          <span v-if="scope.row.zt == '一级报警'" style="color: #c00808;">
            {{ scope.row.zt }}
          </span>
          <span v-else-if="scope.row.zt == '二级报警'" style="color: #e23434;">
            {{ scope.row.zt }}
          </span>
          <span v-else>
            {{ scope.row.zt }}
          </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 store from "@/store";
import DeptTree from "@/components/DeptTree/index.vue";
import { listAlarmHistory } from "@/api/demostrate/monitor";
import DeviceSelect from '@/components/DeviceSelect/index.vue';
export default {
  name: "alarm",
  components: { DeptTree, DeviceSelect },
  dicts: [],
  data() {
    return {
      factorys: [],
      loading: false,
      dateList: [],
      dataList: [],
      total: 0,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        sn: null,
        name: null,
        startTime: null,
        endTime: null,
        deptId: null,
      },

    };
  },
  created() {

  },
  mounted() {
    this.init();
  },
  methods: {
    async init() {
      this.emitChange();
      this.getList()
    },
    /**获取企业下拉框 */
    handleDeptChange(value) {
      this.queryParams.deptId = value.deptId;
      this.emitChange();
    },
    emitChange() {
      this.$nextTick(() => {
        this.$emit("queryChange", {
          deptId: this.queryParams.deptId,

        });
      });
    },
    //发送通知
    handleUpdate(row) {
      this.deviceInfo = row
      this.isOpenMsg = true
    },
    //处理报警
    handleAlarm(row) {
      this.deviceInfo = row
      this.isOpenAlarm = true
    },
    closeMsg() {
      this.isOpenMsg = false
      this.handleQuery()
    },
    closeAlarm() {
      this.isOpenAlarm = false
      this.handleQuery()
    },
    resetQuery() {
      this.queryParams.pageNum = 1
      this.queryParams.sn = null
      this.queryParams.name = null
      this.queryParams.startTime = null
      this.queryParams.endTime = null
    },
    getList() {
      if (this.dateList && this.dateList.length > 0) {
        this.queryParams.startTime = this.dateList[0]
        this.queryParams.endTime = this.dateList[1]
      } else {
        this.queryParams.startTime = null
        this.queryParams.endTime = null
      }
      this.loading = true;
      listAlarmHistory(this.queryParams).then(response => {
        this.dataList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    handleQuery() {
      this.queryParams.pageNum = 1
      this.getList()

    },
  }

};
</script>