zhgdyun/src/views/projectFront/tunnelPositioning/turnnelAlarm.vue

<template>
  <div class="content">
    <div class="search-box">
      <div class="search-item">
        <span style="margin-right: 10px">时间段</span>
        <el-date-picker
          size="medium"
          v-model="valueTime"
          type="daterange"
          range-separator="-"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          value-format="yyyy-MM-dd"
        ></el-date-picker>
      </div>
      <el-button type="primary" plain size="medium" @click="quertData"
        >查询</el-button
      >
      <el-button type="warning" plain size="medium" @click="refresh"
        >刷新</el-button
      >
    </div>
    <div class="table-box">
      <el-table
        :data="tableData"
        class="tables"
        height="560"
        style="width: 100%"
      >
        <el-table-column align="center" label="报警编号" prop="alarmId">
        </el-table-column>
        <el-table-column align="center" label="报警类型" prop="alarmType">
          <template slot-scope="scoped">{{ '低电量报警' }}</template>
        </el-table-column>
        <el-table-column
          align="center"
          label="报警内容"
          prop="personName"
          width="600"
        >
          <template slot-scope="scope">
            【{{ scope.row.personName }}({{
              scope.row.cardno
            }})】目前电量仅剩【{{
              scope.row.voltage
            }}%】，请及时充电，以免影响正常使用
          </template>
        </el-table-column>
        <el-table-column align="center" label="上传时间" prop="createTime">
        </el-table-column>
      </el-table>
      <el-pagination
        class="pagerBox"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageNo"
        :page-sizes="$store.state.PAGESIZRS"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next"
        :total="Number(total)"
        background
      ></el-pagination>
    </div>
  </div>
</template>

<script>
import {
  getLowVoltageAlarmPageApi
} from "@/assets/js/api/tunnelPositioning";
export default {
  data() {
    return {
      projectSn: '',
      tableData: [],
      pageNo: 1,
      pageSize: 10,
      total: 0,
      valueTime: ''
    }
  },
  created() {
    this.projectSn = this.$store.state.projectSn
    // this.selectNowDate()
    this.getTunnrlData()
  },

  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.valueTime = [timer, timer]
      console.log(timer)
      // return timer;
    },

    quertData() {
      this.pageNo = 1
      this.pageSize = 10
      this.getTunnrlData()
    },
    refresh() {
      this.pageNo = 1
      this.pageSize = 10
      this.total = 0
      this.personName = ''
      this.valueTime = ''
      this.getTunnrlData()
    },
    getTunnrlData() {
      let data = {
        pageNo: this.pageNo,
        pageSize: this.pageSize,
        projectSn: this.projectSn,
        createTime_begin: this.valueTime ? this.valueTime[0] : '',
        createTime_end: this.valueTime ? this.valueTime[1] : ''
      }
      getLowVoltageAlarmPageApi(data).then((res) => {
        console.log(res)
        if (res.code == 200 && res.result) {
          this.tableData = res.result.records
          console.log(this.tableData)
          this.total = res.result.total
        }
      })
    },
    handleSizeChange(value) {
      this.pageSize = value
      this.getTunnrlData()
    },
    handleCurrentChange(value) {
      this.pageNo = value
      this.getTunnrlData()
    },
  }
}
</script>

<style lang="less" scoped>
.content {
  display: flex;
  flex-direction: column;
  height: 100%;

  .search-box {
    background: #fff;
    padding: 25px;
    margin-bottom: 14px;

    .search-item {
      display: inline-block;
      margin-right: 26px;
    }
  }

  .table-box {
    flex: 1;
    background: #fff;

    /deep/.el-table {
      td {
        vertical-align: top;
      }

      .cell {
        padding-left: 44px;
      }
    }

    .f-2 {
      display: flex;
      flex-wrap: wrap;

      .table-item {
        width: 50%;
      }
    }
  }
}
</style>