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-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 label="站点">
        <SelectStaion
          v-if="isComponentReady"
          ref="selectStaionRef"
          :startTime="this.formatDate(this.searchModel.startTime)"
          :endTime="this.formatDate(this.searchModel.endTime)"
          :type="this.type">
        </SelectStaion>
      </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-item>
        <el-button
          type="primary"
          @click="openSoft"
        >导入南方片格式文件
        </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="500"
        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>
    <!--     用户导入对话框 -->
    <el-dialog :title="upload.title" :visible.sync="upload.open" width="400px" append-to-body>
      <el-upload
        class="upload-demo"
        drag
        ref="uploadRef"
        :action="uploadUrl"
        :data="uploadData"
        :headers="uploadHeaders"
        :before-upload="beforeUpload"
        :on-success="handleSuccess"
        :on-error="handleError"
        accept=".zip"
        :limit="1"
      >
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">将 ZIP 文件拖到此处，或<em>点击上传</em></div>
        <div slot="tip" class="el-upload__tip">
          支持单个 ZIP 文件（最大 50MB）
        </div>
      </el-upload>
    </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";
import SelectStaion from "@/components/SelectStaion/index.vue";

export default {
  components: {SelectStaion},
  data() {
    return {
      tableData: [],
      uploadData: {},
      total: 0,
      searchModel: {
        startTime: '1950-01-01 00:00:00',
        endTime: '1951-01-01 00:00:00',
        stcd: '',
        stnm: '',
        pageNum: 1,
        pageSize: 15
      },
      upload: {
        title: '导入数据',
        open: false
      },
      uploadUrl: '/manages-api/basic/uploadSoftFile',
      uploadHeaders: {
        Authorization: 'Bearer ' + getToken() // 格式必须为 Bearer + Token
      },
      softOpen: false,
      title: '',
      form: {
        startTime: '',
        endTime: ''
      },
      // 表单校验
      rules: {
        startTime: [
          {required: true, message: '开始时间不能为空', trigger: 'blur'}
        ],
        endTime: [
          {required: true, message: '结束时间不能为空', trigger: 'blur'}
        ]
      },
      isComponentReady: false,
      type: "DayRain",
    }
  },
  created() {
    this.getList()
  },
  mounted() {
    this.$nextTick(() => {
      this.isComponentReady = true;
    });
    this.$nextTick(() => {
      if (this.$refs.selectStaionRef) {
        this.searchModel.stcd = this.$refs.selectStaionRef.stcds;
      }
    });
  },
  methods: {
    beforeUpload(file) {
      // 1. 校验文件类型
      const isZip = file.name.endsWith('.zip');
      if (!isZip) {
        this.$message.error('仅支持上传 ZIP 格式文件！');
        return false; // 阻止上传
      }

      // 2. 校验文件大小（示例限制为 50MB）
      const isSizeValid = file.size <= 50 * 1024 * 1024;
      if (!isSizeValid) {
        this.$message.error('文件大小不能超过 50MB！');
        return false;
      }
      return true; // 放行上传
    },
    handleSuccess(response) {
      if (response.code === 0) { // 根据后端返回结构判断
        this.$message.success('文件上传成功！');
        this.upload.open = false; // 关闭弹窗
        this.$refs.uploadRef?.clearFiles();
        // 可选：触发父组件刷新文件列表
        this.$emit('upload-success');
      } else {
        this.$message.error(response.msg || '上传失败');
      }
    },
    handleError(err) {
      this.$message.error(`上传失败: ${err.message}`);
    },
    openSoft() {
      this.upload.open = true
    },
    formatDate(date) {
      if (date == null) {
        return '';
      }
      const d = new Date(date);
      if (isNaN(d.getTime())) {
        return '';
      } else {
        return date
      }
    },

    async getList() {
      this.searchModel.stcd = this.$refs.selectStaionRef?.stcds || '';
      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>