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.
348 lines
9.1 KiB
348 lines
9.1 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> |
|
|
|
<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="tm" |
|
label="时间"> |
|
</el-table-column> |
|
|
|
<el-table-column |
|
align="center" |
|
prop="z" |
|
label="水位"> |
|
</el-table-column> |
|
|
|
<el-table-column |
|
align="center" |
|
prop="zrcd" |
|
label="水位注解码"> |
|
</el-table-column> |
|
|
|
<el-table-column |
|
align="center" |
|
prop="q" |
|
label="流量"> |
|
</el-table-column> |
|
|
|
<el-table-column |
|
align="center" |
|
prop="s" |
|
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 floodExcerptApi from "@/api/excerpt/floodExcerpt"; |
|
import dayRainApi from "@/api/day/dayRain"; |
|
import SelectStaion from "@/components/SelectStaion/index.vue"; |
|
|
|
export default { |
|
components: {SelectStaion}, |
|
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' } |
|
] |
|
}, |
|
isComponentReady: false, |
|
type:"DpFdheex", |
|
} |
|
}, |
|
created() { |
|
this.getList() |
|
}, |
|
mounted() { |
|
this.$nextTick(() => { |
|
this.isComponentReady = true; |
|
}); |
|
this.$nextTick(() => { |
|
if (this.$refs.selectStaionRef) { |
|
this.searchModel.stcd = this.$refs.selectStaionRef.stcds; |
|
} |
|
}); |
|
}, |
|
methods: { |
|
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: this.formatDate(startYear), |
|
endTime: this.formatDate(endYear), |
|
stcd: this.searchModel.stcd, |
|
stnm: this.searchModel.stnm |
|
} |
|
const res = await floodExcerptApi.getTableList(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 || ''; // 处理undefined |
|
const res = await this.$axiosPost('/report/floodExcerpt?startTime=' + |
|
this.formatDate(startYear) + '&endTime=' + this.formatDate(endYear) + |
|
'&stcd=' + stcd + '&stnm=' + stnm); |
|
if (res.code === 0) { |
|
this.$modal.msgSuccess(res.msg) |
|
} |
|
// this.download('/report/floodExcerpt?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) { |
|
floodExcerptApi.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>
|
|
|