history-ui/src/views/day/dayRain/index.vue

<template>
  <div class="app-container">
    <el-form :inline="true" class="demo-form-inline">
      <el-form-item label="站码">
        <el-input v-model="searchModel.stcd" placeholder="站码" clearable></el-input>
      </el-form-item>
      <el-form-item label="站名">
        <el-input v-model="searchModel.stnm" placeholder="站名" clearable></el-input>
      </el-form-item>
      <el-form-item label="起始日期">
        <el-date-picker
          v-model="searchModel.startTime"
          type="datetime"
          placeholder="选择日期">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="截止日期">
        <el-date-picker
          v-model="searchModel.endTime"
          type="datetime"
          placeholder="选择日期">
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="getList">查询</el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="exportDate">导出</el-button>
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          @click="importSoft"
        >导入南方片
        </el-button>
      </el-form-item>
    </el-form>

    <div class="main-content">
      <div class="main-title">
        <div class="table-title">日降雨量表</div>
        <div class="table-header">
          <div class="table-time" style="float: right">(单位降水量: mm)</div>
        </div>
      </div>
      <el-table
        :data="tableData"
        height="730"
        border
        style="width: 100%">
        <el-table-column label="序号" align="center">
          <template slot-scope="scope">
            {{ scope.$index + 1 }}
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          prop="stcd"
          label="站码"
        >
        </el-table-column>
        <el-table-column
          align="center"
          prop="stnm"
          label="站名"
        >
        </el-table-column>
        <el-table-column
          align="center"
          prop="dt"
          label="日期">
        </el-table-column>

        <el-table-column
          align="center"
          prop="p"
          label="降水量">
        </el-table-column>

        <el-table-column
          align="center"
          prop="prcd"
          label="降水量注解码">
        </el-table-column>

      </el-table>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="searchModel.pageNum"
        :page-sizes="[15, 30, 50,100]"
        :page-size="searchModel.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        style="padding: 30px 0; text-align: center;"
        :total="total"
      >
      </el-pagination>
    </div>
    <el-dialog :title="title" :visible.sync="softOpen" width="400px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="100px">
        <el-form-item label="起年">
          <el-date-picker
            v-model="form.startTime"
            type="datetime"
            placeholder="选择日期"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="截止年">
          <el-date-picker
            v-model="form.endTime"
            type="datetime"
            placeholder="选择日期"
          >
          </el-date-picker>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>


<script>
import {getToken} from '@/utils/auth'
import request from '@/utils/request';
import dayRainApi from "@/api/day/dayRain";
import monthRainApi from "@/api/month/monthRain";

export default {
  data() {
    return {
      tableData: [],
      total: 0,
      searchModel: {
        startTime: '1950-01-01 00:00:00',
        endTime: '1955-01-01 00:00:00',
        stcd: '',
        stnm: '',
        pageNum: 1,
        pageSize: 15
      },
      upload: {
        title: '导入数据',
        open: false
      },

      softOpen:false,
      title:'',
      form:{
        startTime:'',
        endTime:''
      },
      // 表单校验
      rules: {
        startTime: [
          { required: true, message: '开始时间不能为空', trigger: 'blur' }
        ],
        endTime: [
          { required: true, message: '结束时间不能为空', trigger: 'blur' }
        ]
      }
    }
  },
  created() {
    this.getList()
  },
  methods: {
    formatDate(date) {
      if (date == null){
        return '';
      }
      const d = new Date(date);
      if (isNaN(d.getTime())) {
        return '';
      }else {
        return date
      }
    },

    async getList() {
      const startYear= this.$common.formatDate(this.searchModel.startTime)
      const endYear= this.$common.formatDate(this.searchModel.endTime)
      const param = {
        pageNum: this.searchModel.pageNum,
        pageSize: this.searchModel.pageSize,
        startTime: startYear,
        endTime: endYear,
        stcd: this.searchModel.stcd,
        stnm: this.searchModel.stnm
      }
      const res = await dayRainApi.getRainTableList(param)
      this.tableData = res.data;
      this.total = res.count;
    },
    handleSizeChange(pageSize) {
      this.searchModel.pageSize = pageSize
      this.getList()
    },
    handleCurrentChange(pageNum) {
      this.searchModel.pageNum = pageNum
      this.getList()
    },
    async exportDate() {
      const startYear= this.$common.formatDate(this.searchModel.startTime)
      const endYear= this.$common.formatDate(this.searchModel.endTime)
      const stcd = this.searchModel.stcd || '';  // 处理undefined
      const stnm = this.searchModel.stnm || '';
      const res = await this.$axiosPost('/report/dayRain?startTime=' +
        this.formatDate(startYear) + '&endTime=' + this.formatDate(endYear) +
        '&stcd=' + stcd + '&stnm=' + stnm);
      if (res.code === 0) {
        this.$modal.msgSuccess(res.msg)
      }
      //
      // this.download('/report/dayRain?startTime='+
      //   startYear+'&endTime='+endYear+
      //   '&stcd='+this.searchModel.stcd+'&stnm='+this.searchModel.stnm, {}, '日降水表.xls')
    },
    importSoft(){
      this.reset();
      this.softOpen = true;
      this.title = "导入数据到南方片";
    },
    reset(){
      this.form={
        startTime: '',
        endTime: ''
      }
      this.resetForm("form");
    },
    /** 提交按钮 */
    submitForm() {
      const startYear= this.$common.formatDate(this.form.startTime)
      const endYear= this.$common.formatDate(this.form.endTime)
      const param={
        startTime: this.formatDate(startYear),
        endTime: this.formatDate(endYear),
      }
      this.$refs["form"].validate(valid => {
        if (valid) {
          dayRainApi.importDateToSoft(param).then(res => {
            if (res.code === 0) {
              this.$modal.msgSuccess(res.msg)
              this.softOpen = false;
            }
          })
        }
      });
    },
    cancel() {
      this.softOpen = false;
      this.reset();
    },
  },
}
</script>
<style scoped lang="scss">
.app-container {
  padding: 20px;
  background: #F2F2F2;
  height: calc(100vh - 100px);

  .el-form {
    background: #fff;
    padding: 10px;
    height: 6vh;
    border-radius: 4px;
    box-shadow: 0 0 10px 1px rgba(123, 123, 123, 0.4);
  }

  .main-content {
    height: calc(100vh - 150px);
    background: #fff;
    margin-top: 20px;
    padding: 5px;
    border-radius: 4px;
    box-shadow: 0 0 10px 1px rgba(123, 123, 123, 0.4);

    .main-title {
      height: 90px;

      .table-title {
        font-size: 25px;
        font-weight: bold;
        width: 100%;
        height: 60px;
        text-align: center;
      }

      .table-header {
        width: 100%;
        height: 30px;
        line-height: 30px;
        display: inline;
        padding: 0 20px;
        font-size: 14px;

        .table-time {
          display: inline;
          float: left;
          margin-left: 20px;
          font-size: 14px;
          color: #606266;
          font-weight: 700;
        }
      }
    }
  }

  :hover::-webkit-scrollbar {
    width: 0; /* 鼠标 hover 时显示滚动条 */
  }
}
</style>