zhgdyun/src/views/projectFront/electricityManage/liveDataTable.vue

<template>
  <div class="content">
    <div class="search-box">
      <div class="search-item">
        <!-- 设备名称： -->
        <span>{{ $t('message.energyManage.devName') + ':' }}</span>
        <el-select
          style="margin-right: 20px"
          v-model="devSn"
          size="medium"
          :placeholder="$t('message.energyManage.material.pleaseChoose')"
        >
          <!-- 全部 -->
          <el-option :label="$t('message.energyManage.all')" value="">
          </el-option>
          <el-option
            v-for="item in devList"
            :key="item.id"
            :label="item.ammeterName"
            :value="item.ammeterNo"
          >
          </el-option>
        </el-select>
        <el-date-picker
          class="serarch_picker"
          size="medium"
          v-model="valueTime"
          type="daterange"
          range-separator="-"
          :start-placeholder="$t('message.energyManage.start')"
          :end-placeholder="$t('message.energyManage.end')"
        >
        </el-date-picker>
      </div>
      <!-- <div class="search-item">
                    <el-date-picker
                        size="medium"
                        v-model="timeList"
                        type="daterange"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期">
                    </el-date-picker>
                </div> -->
      <!-- 查询 -->
      <el-button size="medium" @click="quertData">{{
        $t('message.energyManage.waybill.query')
      }}</el-button>
      <el-button size="medium" @click="refresh">
        {{ $t('message.energyManage.waybill.fresh') }}
        <!-- 刷新 -->
      </el-button>
      <!-- <el-button size="medium" @click="exportExcel">导出</el-button> -->
    </div>
    <div class="table-box">
      <el-table
        :data="tableData"
        class="tables"
        height="700"
        style="width: 100%"
      >
        <!-- 设备名称 -->
        <el-table-column
          :label="$t('message.energyManage.devName')"
          prop="ammeterName"
        >
        </el-table-column>
        <!-- 电表号 -->
        <el-table-column
          :label="$t('message.energyManage.electricityNo')"
          prop="ammeterNo"
        >
        </el-table-column>
        <!-- 用电量(kwh) -->
        <el-table-column
          :label="$t('message.energyManage.useElectricity')"
          prop="degree"
        >
        </el-table-column>

        <!-- 抄表时间 -->
        <el-table-column :label="$t('message.energyManage.copyTime')">
          <template slot-scope="scope">
            {{ moment(scope.row.addTime).format('YYYY-MM-DD HH:mm:ss') }}
          </template>
        </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 moment from 'moment'
import {
  getwaterMeterListApi,
  selectAmmeterRecordDetailPageListApi
} from '@/assets/js/api/electricDevManage'
export default {
  data() {
    return {
      devSn: '',
      projectSn: '',
      devList: [],
      tableData: [],
      pageNo: 1,
      pageSize: 10,
      total: 0,
      timeList: '',
      startTime: '',
      endTime: '',
      valueTime: '',
      moment: ''
    }
  },
  created() {
    this.moment = moment
    this.projectSn = this.$store.state.projectSn
    this.startTime = this.endTime = moment(new Date()).format('YYYY-MM-DD')
    console.log(this.startTime, this.endTime)
    this.getDevice()
    this.selectNowDate()
    this.selectAmmeterRecordDetailPageList()
  },

  methods: {
    getDevice() {
      getwaterMeterListApi({ projectSn: this.$store.state.projectSn }).then(
        (result) => {
          if (result.success) {
            this.devList = result.result
            // if(this.devList.length>0){
            //     this.devSn = this.devList[0].ammeterNo
            // }
            console.log('get设备列表', this.devList)
          }
        }
      )
    },
    // 获取当前时间 返回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;
    },
    selectAmmeterRecordDetailPageList() {
      let data = {
        ammeterNo: this.devSn,
        projectSn: this.$store.state.projectSn,
        pageNo: this.pageNo,
        pageSize: this.pageSize,
        startTime: this.valueTime ? this.valueTime[0] : '',
        endTime: this.valueTime ? this.valueTime[1] : ''
      }
      selectAmmeterRecordDetailPageListApi(data).then((res) => {
        console.log(res)
        if (res.success) {
          this.tableData = res.result.records
          this.total = res.result.total
        }
      })
    },

    //刷新
    refresh() {
      this.pageNo = 1
      this.pageSize = 10
      this.selectNowDate()
      this.selectAmmeterRecordDetailPageList()
    },
    quertData() {
      this.pageNo = 1
      this.pageSize = 10
      console.log(this.devSn)
      this.selectAmmeterRecordDetailPageList()
    },

    handleSizeChange(value) {
      this.pageSize = value
      this.selectAmmeterRecordDetailPageList()
    },
    handleCurrentChange(value) {
      this.pageNo = value
      this.selectAmmeterRecordDetailPageList()
    },
    exportExcel() {
      if (this.valueTime) {
        window.location.href =
          this.$http.defaults.baseURL +
          'xmgl/download/exporExcelTowerAlarm?projectSn=' +
          this.projectSn +
          '&devSn=' +
          this.devSn +
          '&startTime=' +
          this.transformTimestamp2(this.valueTime[0]) +
          '&endTime=' +
          this.transformTimestamp2(this.valueTime[1])
      } else {
        window.location.href =
          this.$http.defaults.baseURL +
          'xmgl/download/exporExcelTowerAlarm?projectSn=' +
          this.projectSn +
          '&devSn=' +
          this.devSn
      }
    }
  }
}
</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: 30px;
      }
    }
    .f-2 {
      display: flex;
      flex-wrap: wrap;
      .table-item {
        width: 50%;
      }
    }
  }
}
</style>