You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
402 lines
11 KiB
402 lines
11 KiB
<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>
|
|
|