wps/wps-ui/src/views/dataQuery/WeatherStationStatusData/index.vue

<template>
  <div class="app-container">
    <el-card class="box-card">
      <div class="block">
        <div class="conOne">
          <span class="demonstration">时间：</span>
          <el-date-picker
            v-model="dataTime"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :default-time="['00:00:00', '23:59:59']">
          </el-date-picker>
        </div>
        <div class="conOne">
          <span>设备：</span>
          <el-select v-model="eqNo" placeholder="请选择">
            <el-option
              v-for="item in equipmentAllInfo"
              :key="item.no"
              :label="item.name"
              :value="item.no">
            </el-option>
          </el-select>
        </div>
        <el-button :loading="btuLoading" class="myButton" type="primary" icon="el-icon-search" @click="getData">搜索</el-button>
        <el-button :loading="dbtuLoading" class="myButton" type="primary" icon="el-icon-download" @click="download">导出</el-button>
      </div>
      <div class="tableBox">
        <el-table v-loading="loading" border
                  :data="tableAllData.slice((page.currentPage-1)*page.pageSize,page.currentPage*page.pageSize)">
          <el-table-column type="index" label="序号" width="55" align="center"/>
          <el-table-column label="时间" align="center" prop="ts" :formatter="formatDate"/>
          <el-table-column label="风速" align="center" prop="ws"/>
          <el-table-column label="风向" align="center" prop="wd"/>
          <el-table-column label="温度" align="center" prop="t"/>
          <el-table-column label="气压" align="center" prop="pa"/>
          <el-table-column label="湿度" align="center" prop="rh"/>

        </el-table>
      </div>
      <div class="block" style="float: right">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page=page.currentPage
          :page-sizes="[10, 15, 30, 50]"
          :page-size=page.pageSize
          layout="total, sizes, prev, pager, next, jumper"
          :total=page.total>
        </el-pagination>
      </div>
    </el-card>
  </div>
</template>

<script>
import {infoList} from "@/api/biz/dataQuery/weatherLook";
import {list} from "@/api/biz/dataQuery/environmentalData";
import download from '@/plugins/download'
export default {
  name: "index",
  data() {
    return {
      loading: false,
      btuLoading: true,
      dbtuLoading: false,
      tableAllData: [],
      //时间控件 当天的零点到23:59:59
      dataTime: [new Date(new Date().toLocaleDateString()).getTime(), new Date(new Date().toLocaleDateString()).getTime() + 24 * 60 * 60 * 1000 -1000],
      page: {
        total: 0, // 总页数
        currentPage: 1, // 当前页数
        pageSize: 10 // 每页显示多少条
      },
      eqNo: '',
      equipmentAllInfo: []
    }
  },
  mounted() {
    this.getWeatherLook()
  },
  methods: {
    getWeatherLook() {
      infoList().then(res => {
        this.equipmentAllInfo = res.data
        this.eqNo = this.equipmentAllInfo[0].no
        this.getData()
      }).catch(err => {
        console.log('获取环境检测仪异常' + err)
      })
    },
    getData(){
      this.btuLoading = true
      this.loading = true
      let param = {
        startTime: new Date(this.dataTime[0]).getTime(),
        endTime: new Date(this.dataTime[1]).getTime(),
        weatherLookNo: this.eqNo,
      }
      list(param).then(res=>{
        this.tableAllData = res.data
        this.page.total = this.tableAllData.length
        this.btuLoading = false
        this.loading = false
      }).catch(err=>{
        this.btuLoading = false
        this.loading = false
        console.log('获取环境监测仪数据异常：'+err)
      })
    },
    download(){
      this.dbtuLoading = true
      download.weatherStationData("/environmentalData/exportAll",new Date(this.dataTime[0]).getTime(), new Date(this.dataTime[1]).getTime(), this.eqNo)
      const _self =this
      setTimeout(function (){
        _self.dbtuLoading = false
      },5000)
    },
    formatDate(row){
      var date = new Date(row.ts)
      let format = 'yyyy-MM-dd hh:mm:ss';
      if (date != 'Invalid Date') {
        var o = {
          "M+": date.getMonth() + 1, //month
          "d+": date.getDate(), //day
          "h+": date.getHours(), //hour
          "m+": date.getMinutes(), //minute
          "s+": date.getSeconds(), //second
          "q+": Math.floor((date.getMonth() + 3) / 3), //quarter
          "S": date.getMilliseconds() //millisecond
        }
        if (/(y+)/.test(format)) format = format.replace(RegExp.$1,
          (date.getFullYear() + "").substr(4 - RegExp.$1.length));
        for (var k in o)
          if (new RegExp("(" + k + ")").test(format))
            format = format.replace(RegExp.$1,
              RegExp.$1.length == 1 ? o[k] :
                ("00" + o[k]).substr(("" + o[k]).length));
        return format;
      }
      return date;
    },

    /*pageSize改变*/
    handleSizeChange(val) {
      this.page.pageSize = val
      this.page.currentPage = 1
    },
    /*currentPage改变*/
    handleCurrentChange(val) {
      this.page.currentPage = val
    },

  }
}
</script>

<style scoped>
.block {
  display: flex;
}

.conOne, .myButton {
  margin-left: .5%;
}

.tableBox {
  margin-top: 1%;
}

</style>