insu/in-client-qn-ui/src/views/data/usfpcorrect/index.vue

<template>
  <div class="table-container">
    <vab-query-form>

      <vab-query-form-left-panel>
        <el-form
          ref="searchForm"
          :inline="true"
          @submit.native.prevent
        >
          <el-form-item>
            标记时间：
            <el-date-picker
              v-model="searchForm.signTime"
              type="datetime"
              format="yyyy-MM-dd HH:mm:ss"
              value-format="yyyy-MM-dd HH:mm:ss"
              placeholder="选择日期">
            </el-date-picker>
          </el-form-item>

          <el-form-item>
            <el-button
              icon="el-icon-search"
              type="primary"
              native-type="submit"
              @click="handleQuery"
            >
              查询
            </el-button>
          </el-form-item>

        </el-form>

      </vab-query-form-left-panel>


      <vab-query-form-right-panel :span="1">

      </vab-query-form-right-panel>


    </vab-query-form>

    <el-table
      ref="table"
      v-loading="listLoading"
      :data="tableData"
      :element-loading-text="elementLoadingText"
      :height="height"
      :header-cell-style="{ 'text-align': 'center' }"
      :cell-style="{ 'text-align': 'center' }"
    >
      <el-table-column show-overflow-tooltip label="序号" width="95">
        <template #default="scope">
          {{ scope.$index + 1 }}
        </template>
      </el-table-column>

      <el-table-column show-overflow-tooltip label="标记时间" prop="signTime" />
      <el-table-column show-overflow-tooltip label="场站编码" prop="stationCode" />
      <el-table-column show-overflow-tooltip label="请求时间" prop="requestTime" />
      <el-table-column show-overflow-tooltip label="传输时间" prop="passTime"/>
      <el-table-column show-overflow-tooltip label="预测时间" prop="forecastTime" />
      <el-table-column show-overflow-tooltip label="预测系数" prop="ratio" />


    </el-table>
    <el-pagination
      :background="background"
      :current-page="page.currentPage"
      :layout="layout"
      :page-size="page.pageSize"
      :total="page.total"
      @current-change="handleCurrentChange"
      @size-change="handleSizeChange"
    ></el-pagination>
  </div>
</template>

<script>
import { fetchList } from '@/api/usfpcorrect'

export default {
  name: 'Record',

  data() {
    return {
      tableData: [],
      searchForm: {signTime:this.dateFormat("yyyy-MM-dd HH:mm:ss",this.dateFor15(new Date())),},
      listLoading: true,
      layout: 'total, sizes, prev, pager, next, jumper',
      total: 0,
      background: true,
      elementLoadingText: '正在加载...',
      page: {
        total: 0, // 总页数
        currentPage: 1, // 当前页数
        pageSize: 20, // 每页显示多少条
      },
    }
  },
  computed: {
    height() {
      return this.$baseTableHeight()
    },
  },
  created() {
    this.fetchData()
  },
  methods: {
    async fetchData() {
      this.listLoading = true
      fetchList(
        Object.assign(
          {
            current: this.page.currentPage,
            size: this.page.pageSize,
          },
          this.searchForm
        )
      )
        .then((response) => {
          this.tableData = response.data.records
          this.page.total = response.data.total
          this.listLoading = false
        })
        .catch(() => {
          this.listLoading = false
        })
    },

    handleSizeChange(val) {
      this.page.pageSize = val
      this.page.currentPage = 1
      this.fetchData()
    },
    handleCurrentChange(val) {
      this.page.currentPage = val
      this.fetchData()
    },
    handleQuery() {
      for (var v in this.searchForm) {
        if (this.searchForm[v] == '') {
          delete this.searchForm[v]
        }
      }

      this.page.currentPage = 1
      this.fetchData()
    },

    dateFor15(date){
      return  new Date(Math.floor(date.getTime()/900000) *900000)
    },

    dateFormat(fmt, date) {
      let ret
      const opt = {
        'y+': date.getFullYear().toString(), // 年
        'M+': (date.getMonth() + 1).toString(), // 月
        'd+': date.getDate().toString(), // 日
        'H+': date.getHours().toString(), // 时
        'm+': date.getMinutes().toString(), // 分
        's+': date.getSeconds().toString(), // 秒
        // 有其他格式化字符需求可以继续添加，必须转化成字符串
      }
      for (let k in opt) {
        ret = new RegExp('(' + k + ')').exec(fmt)
        if (ret) {
          fmt = fmt.replace(
            ret[1],
            ret[1].length == 1 ? opt[k] : opt[k].padStart(ret[1].length, '0')
          )
        }
      }
      return fmt
    },
  },
}
</script>

<style>
.demo-table-expand {
  font-size: 0;
}
.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}
</style>