zhgdyun/src/views/projectFront/rainfallMonitor/alarmWarning.vue

<template>
  <div class="fullHeight">
    <div class="searchBox whiteBlock">
      <!-- <el-select v-model="queryInfo.alarmTypeId" size="medium"
                       :placeholder="$t('message.alarmWarning.alarmTypeId')">
                <el-option
                        v-for="item in alarmTypeIdArr"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                </el-option>
            </el-select> -->
      <!-- <el-select v-model="queryInfo.type" size="medium"
                       :placeholder="$t('message.alarmWarning.alarmTypeId')">
                <el-option
                        v-for="(item,index) in $t('message.alarmWarning.typeArr')"
                        :key="index"
                        :label="item"
                        :value="index">
                </el-option>
            </el-select> -->
      <el-select
        v-model="queryInfo.deviceId"
        size="medium"
        :placeholder="$t('message.alarmWarning.deviceId')"
        clearable
      >
        <el-option
          v-for="item in deviceIdArr"
          :key="item.id"
          :label="item.devName"
          :value="item.devSn"
        >
        </el-option>
      </el-select>
      <el-date-picker
        v-model="time"
        size="medium"
        type="daterange"
        value-format="yyyy-MM-dd"
        :start-placeholder="$t('message.alarmWarning.startTime')"
        :end-placeholder="$t('message.alarmWarning.endTime')"
      >
      </el-date-picker>
      <el-button type="primary" plain size="medium" @click="query">{{
        $t("message.alarmWarning.query")
      }}</el-button>
      <el-button type="warning" plain size="medium" @click="refresh">{{
        $t("message.alarmWarning.refresh")
      }}</el-button>
      <!-- <el-button type="primary" size="medium">{{$t('message.alarmWarning.dc')}}</el-button> -->
    </div>
    <div class="table_wrap whiteBlock">
      <vue-scroll style="height: 88%">
        <el-table class="tables" :data="List">
          <!-- 报警名称 -->
          <el-table-column
            prop="alarmContent"
            label="报警内容"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="alarmVal"
            label="报警值"
            align="center"
          ></el-table-column>
          <el-table-column prop="alarmTime" label="报警时间" align="center">
          </el-table-column>
        </el-table>
      </vue-scroll>
      <el-pagination
        class="pagerBox"
        @size-change="SizeChange"
        @current-change="CurrentChange"
        :current-page="pagInfo.pageNo"
        :page-sizes="$store.state.PAGESIZRS"
        :page-size="pagInfo.pageSize"
        layout="total, sizes, prev, pager, next"
        :total="Number(pagInfo.total)"
        background
      ></el-pagination>
    </div>
  </div>
</template>
<script>
import {
  rainDevList,
  rainAlarmList,
} from "../../../assets/js/api/rainfallManage";

export default {
  mounted() {
    this.selectNowDate();
    this.getList();
    this.getDevice();
  },
  data() {
    return {
      time: [],
      alarmTypeIdArr: [
        {
          value: 0,
          label: "报警",
        },
        {
          value: 1,
          label: "预警",
        },
      ],
      deviceIdArr: [],
      queryInfo: {
        deviceId: "",
      },
      pagInfo: {
        pageNo: 1, //页数
        pageSize: 10, //条数
        total: 0, //总条数
      },
      List: [],
    };
  },
  methods: {
    // 获取当前时间 返回YYYY-MM-DD HH:mm:ss
    selectNowDate() {
      var date = new Date(),
        year = date.getFullYear(),
        month = date.getMonth() + 1,
        day = date.getDate(),
        hours = date.getHours(), //获取当前小时数(0-23)
        minutes = date.getMinutes(), //获取当前分钟数(0-59)
        seconds = date.getSeconds();
      month >= 1 && month <= 9 ? (month = "0" + month) : "";
      day >= 0 && day <= 9 ? (day = "0" + day) : "";
      hours >= 0 && hours <= 9 ? (hours = "0" + hours) : "";
      minutes >= 0 && minutes <= 9 ? (minutes = "0" + minutes) : "";
      seconds >= 0 && seconds <= 9 ? (seconds = "0" + seconds) : "";
      var timer =
        year +
        "-" +
        month +
        "-" +
        day +
        " " +
        hours +
        ":" +
        minutes +
        ":" +
        seconds;
      var timer = year + "-" + month + "-" + day;
      this.time = [timer, timer];
      console.log(timer);
      // return timer;
    },
    refresh() {
      this.queryInfo = {
        deviceId: "",
      };
      this.time = [];
      this.pagInfo.pageNo = 1; //页数
      this.pagInfo.pageSize = 10; //条数
      this.selectNowDate();
      this.getList();
    },
    query() {
      this.getList();
      this.queryInfo.startTime = this.time[0];
      this.queryInfo.endTime = this.time[1];
      this.pagInfo.pageNo = 1;
      console.log("query", this.queryInfo);
    },
    getDevice() {
      rainDevList({ projectSn: this.$store.state.projectSn }).then((result) => {
        if (result.success) {
          this.deviceIdArr = result.result;
          if (result.result.length > 0) {
            this.queryInfo.deviceId = result.result[0].devSn;
          }
          console.log("get设备列表", this.deviceIdArr);
        }
      });
    },
    getList() {
      let timeObj = {
        startTime: this.time ? this.time[0] : "",
        endTime: this.time ? this.time[1] : "",
      };
      rainAlarmList(
        Object.assign(
          this.queryInfo,
          this.pagInfo,
          { projectSn: this.$store.state.projectSn },
          timeObj
        )
      ).then((result) => {
        if (result.success) {
          this.List = result.result.records;
          this.pagInfo.total = result.result.total;
          console.log("列表", result);
        }
      });
    },
    SizeChange(val) {
      this.pagInfo.pageSize = val;
      this.getList();
    },
    CurrentChange(val) {
      this.pagInfo.pageNo = val;
      this.getList();
    },
  },
};
</script>
<style lang="less" scope>
.searchBox > div {
  margin-right: 15px;
}
.tables {
  min-height: 0;
  max-height: none;
  height: auto;
}
.pagerBox {
  margin-top: 21px;
}
</style>