500 lines
18 KiB
Vue
500 lines
18 KiB
Vue
<template>
|
||
<view class="rain-box">
|
||
<view class="nav-bar">
|
||
<u-icon name="arrow-left" color="#000" size="28" @click="backTo"></u-icon>
|
||
<view class="">
|
||
雨情
|
||
</view>
|
||
<!-- <u-icon name="arrow-right" color="#000" size="28"></u-icon> -->
|
||
<cover-image
|
||
src="../../static/images/filter.png"
|
||
style="width: 20px; height: 20px; margin-right: 10px;"
|
||
@click="popupOpen = true"
|
||
v-show="!popupOpen"
|
||
>
|
||
</cover-image>
|
||
</view>
|
||
<!-- 搜索以及多级下拉 -->
|
||
<view class="search-box">
|
||
<view class="search-item">
|
||
<view class="" @click="handleClick" >
|
||
{{selecetItem.adnm == "全部" ? "咸丰县" : selecetItem.adnm || columns[0][0].adnm}}
|
||
</view>
|
||
<u-icon name="arrow-down-fill" color="#000" size="20" v-show="switchIcon"></u-icon>
|
||
<u-icon name="arrow-up-fill" color="#000" size="20" v-show="!switchIcon"></u-icon>
|
||
|
||
<view class="rain-input" style="width: 50%;">
|
||
<u--input
|
||
placeholder="请输入站点"
|
||
prefixIcon="search"
|
||
prefixIconStyle="font-size: 22px;color: #909399"
|
||
@change="formData = {...formData,stArg:e}"
|
||
:value="formData.stArg"
|
||
></u--input>
|
||
</view>
|
||
<view class="" @click="handleClick1" >
|
||
{{selecetItem1.basName == "全部" ? "流域" : selecetItem1.basName || "流域"}}
|
||
</view>
|
||
<u-icon name="arrow-down-fill" color="#000" size="20" v-show="switchIcon1"></u-icon>
|
||
<u-icon name="arrow-up-fill" color="#000" size="20" v-show="!switchIcon1"></u-icon>
|
||
</view>
|
||
</view>
|
||
<!-- 单纯下拉 -->
|
||
<view class="time-select">
|
||
<view :class="{'jiangyu':true,'noClick':rainTime}" @click="handleJiangyu" >
|
||
<text>{{formData.orderType ? "按昨日降雨降序" :"按时段降雨降序"}}</text>
|
||
<u-icon name="arrow-down-fill" color="#000" size="20" v-show="!jiangyu"></u-icon>
|
||
<u-icon name="arrow-up-fill" color="#000" size="20" v-show="jiangyu"></u-icon>
|
||
<view class="jiangyu-dropdown" v-show="this.jiangyu">
|
||
<view :class="{'active': formData.orderType == 0}" @click="rainsort(0)" style="border-bottom: 1px solid #dfdfdf; border-top: 1px solid #dfdfdf; padding: 10px 0; display: flex; align-items: center;">
|
||
<text style="margin-right: 220px;">按时段降雨降序</text>
|
||
<u-icon name="checkmark" color="#02a7f0" size="20" v-show="formData.orderType == 0"></u-icon>
|
||
</view>
|
||
<view :class="{'active':formData.orderType == 1}" @click="rainsort(1)" style="border-bottom: 1px solid #dfdfdf; padding-bottom: 10px; display: flex; align-items: center;">
|
||
<text style="margin-right: 220px;">按昨日降雨降序</text>
|
||
<u-icon name="checkmark" color="#02a7f0" size="20" v-show="formData.orderType == 1"></u-icon>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="rain-time" @click="handleTime">
|
||
<text>{{formData.timeType == 1 ? "1h" :
|
||
formData.timeType == 3 ? "3h" :
|
||
formData.timeType == 6 ? "6h" :
|
||
formData.timeType == 12 ? "12h" :
|
||
formData.timeType == 24 ? "24h" : ''
|
||
|
||
}}</text>
|
||
<u-icon name="arrow-down-fill" color="#000" size="20" v-show="!rainTime"></u-icon>
|
||
<u-icon name="arrow-up-fill" color="#000" size="20" v-show="rainTime"></u-icon>
|
||
<view class="rain-time-dropdown" v-show="rainTime">
|
||
<view class="" :class="{'active': formData.timeType == 1}" @click="timesort(1)" style="border-bottom: 1px solid #dfdfdf; border-top: 1px solid #dfdfdf; padding: 10px 0; display: flex; align-items: center;">
|
||
<text style="margin-right: 300px;">1h</text>
|
||
<u-icon name="checkmark" color="#02a7f0" size="20" v-show="formData.timeType == 1"></u-icon>
|
||
</view>
|
||
<view class="" :class="{'active': formData.timeType == 3}" @click="timesort(3)" style="border-bottom: 1px solid #dfdfdf; padding-bottom: 10px; display: flex; align-items: center;">
|
||
<text style="margin-right: 300px;">3h</text>
|
||
<u-icon name="checkmark" color="#02a7f0" size="20" v-show="formData.timeType == 3"></u-icon>
|
||
</view>
|
||
<view class="" :class="{'active': formData.timeType == 6}" @click="timesort(6)" style="border-bottom: 1px solid #dfdfdf; padding-bottom: 10px; display: flex; align-items: center;">
|
||
<text style="margin-right: 300px;">6h</text>
|
||
<u-icon name="checkmark" color="#02a7f0" size="20" v-show="formData.timeType == 6"></u-icon>
|
||
</view>
|
||
<view class="" :class="{'active': formData.timeType == 12}" @click="timesort(12)" style="border-bottom: 1px solid #dfdfdf; padding-bottom: 10px; display: flex; align-items: center;">
|
||
<text style="margin-right: 300px;">12h</text>
|
||
<u-icon name="checkmark" color="#02a7f0" size="20" v-show="formData.timeType == 12"></u-icon>
|
||
</view>
|
||
<view class="" :class="{'active': formData.timeType == 24}" @click="timesort(24)" style="border-bottom: 1px solid #dfdfdf; padding-bottom: 10px; display: flex; align-items: center;">
|
||
<text style="margin-right: 300px;">24h</text>
|
||
<u-icon name="checkmark" color="#02a7f0" size="20" v-show="formData.timeType == 24"></u-icon>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
</view>
|
||
<!-- 内容部分 -->
|
||
<view style="width: 100%; height: 10px; background-color: #f7f7f7;">
|
||
|
||
</view>
|
||
<!-- 时间段 -->
|
||
<view style="padding: 5px 10px; text-align: center; color: #f7b156;">
|
||
统计时段：{{tm.stm}}至{{tm.etm}}
|
||
</view>
|
||
<view style="margin: 0 10px;">
|
||
<Table :list="rainList"/>
|
||
</view>
|
||
<u-picker
|
||
:show="show"
|
||
ref="uPicker"
|
||
:columns="columns"
|
||
@confirm="confirm"
|
||
@change="changeHandler"
|
||
@cancel="cancel"
|
||
keyName="adnm"
|
||
>
|
||
</u-picker>
|
||
<u-picker
|
||
:show="show1"
|
||
ref="uPicker1"
|
||
:columns="columns1"
|
||
@confirm="confirm1"
|
||
@cancel="cancel1"
|
||
keyName="basName"
|
||
>
|
||
</u-picker>
|
||
<u-popup :show="popupOpen" mode="right" @close="popupOpen=false" >
|
||
<view style="padding: 30px 20px;">
|
||
<text style="font-weight: bold;">按类型</text>
|
||
<view style="margin-bottom: 10px; margin-left: -5px;">
|
||
<u-checkbox-group
|
||
v-model="formData.source"
|
||
@change="checkboxChange"
|
||
>
|
||
<u-checkbox
|
||
:customStyle="{margin: '7px'}"
|
||
v-for="(item, index) in checkboxList1"
|
||
:key="index"
|
||
:label="item.name"
|
||
:name="item.value"
|
||
>
|
||
</u-checkbox>
|
||
</u-checkbox-group>
|
||
</view>
|
||
|
||
|
||
<!-- <text style="font-weight: bold;">按时间</text>
|
||
<view class="example-body" style="display: flex; align-items: center; margin-bottom: 10px; margin-top: 10px;">
|
||
<uni-datetime-picker type="datetime" v-model="stm" @change="(e) => this.stm = e" />
|
||
<text style="margin-left: 10px;">至</text>
|
||
</view>
|
||
<view class="example-body" style="width: 92%;">
|
||
<uni-datetime-picker type="datetime" v-model="etm" @change="(e) => this.etm = e" />
|
||
</view>
|
||
<view style="display: flex; margin-top: 10px;">
|
||
<u-button class="first-btn" text="昨日08:00~当前时间"></u-button>
|
||
<u-button class="second-btn" text="今天08:00~当前时间"></u-button>
|
||
</view> -->
|
||
<view style="display: flex; margin-top: 240%;">
|
||
<u-button text="重置" class="bottom-btn1"
|
||
@click="formData = {...formData,source}"></u-button>
|
||
<u-button text="确认" color="#d9001b" class="bottom-btn2" @click="popupOpen = false"></u-button>
|
||
</view>
|
||
</view>
|
||
</u-popup>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import Table from "./Table"
|
||
import filter from "../../static/images/filter.png"
|
||
import moment from "moment"
|
||
export default {
|
||
data() {
|
||
return {
|
||
show: false,
|
||
show1:false,
|
||
switchIcon:true,
|
||
switchIcon1:true,
|
||
rainList:[],//雨情数据
|
||
selecetItem:{},
|
||
selecetItem1:{},
|
||
jiangyu:false, //显示下拉
|
||
rainTime:false, //显示下拉，
|
||
selectJyOne:1,//选中降雨最后一个元素，
|
||
selectTimeOne:4, //选中时间的最有一个元素
|
||
popupOpen:false, //抽屉打开
|
||
source:["SH","SW","QX","SK"],
|
||
// checkboxValue1:["SH","SW","QX","SK"],
|
||
// 基本案列数据
|
||
checkboxList1: [{
|
||
name: '山洪',
|
||
value: "SH"
|
||
},
|
||
{
|
||
name: '水文',
|
||
value: "SW"
|
||
},
|
||
{
|
||
name: '气象',
|
||
value: "QX"
|
||
},
|
||
{
|
||
name: '水库',
|
||
value: "SK"
|
||
}
|
||
],
|
||
stm: '', //开始时间，
|
||
etm:"",//结束时间
|
||
columns: //政区下拉
|
||
[
|
||
[{"adnm": "咸丰县", "adcd": "422826100000000"}],[]
|
||
],
|
||
columnData: [[]],
|
||
columns1:[[]], //流域选择,
|
||
formData:{ //表单数据
|
||
timeType:24,
|
||
orderType:1,
|
||
basCode:'',
|
||
source:["SH","SW","QX","SK"],
|
||
stArg:'',
|
||
etm:moment().set({ hour: 8, minute: 0, second: 0, millisecond: 0 }).format("YYYY-MM-DD HH:mm"),
|
||
stm:moment().subtract(1, 'day').set({ hour: 8, minute: 0, second: 0, millisecond: 0 }).format("YYYY-MM-DD HH:mm")
|
||
}
|
||
}
|
||
},
|
||
components:{
|
||
Table
|
||
},
|
||
computed:{
|
||
tm(){
|
||
return {
|
||
stm:moment().subtract(this.formData.timeType, 'hours').format("YYYY-MM-DD HH:mm"),
|
||
etm:moment().format("YYYY-MM-DD HH:mm")
|
||
}
|
||
}
|
||
},
|
||
watch:{
|
||
formData(newV, oldV){
|
||
console.log("www",newV)
|
||
this.getRainList()
|
||
}
|
||
},
|
||
methods: {
|
||
handleJiangyu(e){
|
||
if(this.rainTime){
|
||
e.stopPropagation();
|
||
return
|
||
}
|
||
this.jiangyu = !this.jiangyu
|
||
},
|
||
handleTime(e){
|
||
if(this.jiangyu){
|
||
e.stopPropagation();
|
||
return
|
||
}
|
||
this.rainTime = !this.rainTime
|
||
},
|
||
//按昨日降雨排序
|
||
rainsort(e){
|
||
this.formData = {...this.formData,orderType: e ? 1 : 0}
|
||
},
|
||
// 按小时排序
|
||
timesort(e){
|
||
this.formData = {
|
||
...this.formData,
|
||
stm:moment().subtract(e, 'hours').format("YYYY-MM-DD HH:mm"),
|
||
etm:moment().format("YYYY-MM-DD HH:mm"),
|
||
timeType:e
|
||
}
|
||
},
|
||
changeHandler(e) {
|
||
const {
|
||
columnIndex,
|
||
value,
|
||
values, // values为当前变化列的数组内容
|
||
index,
|
||
// 微信小程序无法将picker实例传出来，只能通过ref操作
|
||
picker = this.$refs.uPicker
|
||
} = e
|
||
// 当第一列值发生变化时，变化第二列(后一列)对应的选项
|
||
if (columnIndex === 0) {
|
||
// picker为选择器this实例，变化第二列对应的选项
|
||
picker.setColumnValues(1, this.columnData[index])
|
||
}
|
||
},
|
||
// 回调参数为包含columnIndex、value、values
|
||
confirm(e) {
|
||
console.log('confirm', e)
|
||
this.show = false
|
||
this.switchIcon=true;
|
||
this.selecetItem = e.value[1];
|
||
// this.formData.adcd = e.value[1].adcd;
|
||
this.formData = {...this.formData,adcd:e.value[1].adcd}
|
||
},
|
||
cancel(e) {
|
||
this.show = false
|
||
},
|
||
changeHandler1(e) {
|
||
const {
|
||
columnIndex,
|
||
value,
|
||
values, // values为当前变化列的数组内容
|
||
index,
|
||
// 微信小程序无法将picker实例传出来，只能通过ref操作
|
||
picker = this.$refs.uPicker1
|
||
} = e
|
||
// 当第一列值发生变化时，变化第二列(后一列)对应的选项
|
||
if (columnIndex === 0) {
|
||
// picker为选择器this实例，变化第二列对应的选项
|
||
picker.setColumnValues(1, this.columnData[index])
|
||
}
|
||
},
|
||
// 回调参数为包含columnIndex、value、values
|
||
confirm1(e) {
|
||
console.log('confirm', e)
|
||
this.show1 = false
|
||
this.switchIcon1=true;
|
||
this.selecetItem1 = e.value[0];
|
||
this.formData = {...this.formData,basCode:e.value[0].basCode};
|
||
},
|
||
cancel1(e) {
|
||
this.show1 = false
|
||
},
|
||
handleClick(e){
|
||
if(this.selecetItem1.basName && this.selecetItem1.basName != "全部"){
|
||
e.stopPropagation();
|
||
return
|
||
}
|
||
this.show = true;
|
||
this.switchIcon = !this.switchIcon
|
||
},
|
||
handleClick1(e){
|
||
if(this.selecetItem.adnm&&this.selecetItem.adnm != "全部"){
|
||
e.stopPropagation();
|
||
return
|
||
}
|
||
this.show1 = true;
|
||
this.switchIcon1 = !this.switchIcon1
|
||
},
|
||
checkboxChange(n) {
|
||
console.log('change', n);
|
||
this.formData = {...this.formData,source:n};
|
||
},
|
||
changeLog(e) {
|
||
console.log('change事件:', e);
|
||
},
|
||
// 获取行政区域选择
|
||
async adnmList(){
|
||
try{
|
||
const {data} = await uni.$http.get(
|
||
"/gunshiApp/xfflood/real/rain/adnmList"
|
||
)
|
||
if(data.code == 200){
|
||
|
||
const all = {
|
||
adnm:'全部',
|
||
adcd:''
|
||
}
|
||
this.columns = [[...this.columns[0]],[all,...data.data]];
|
||
this.columnData = [[all,...data.data]];
|
||
}
|
||
|
||
}catch(e){
|
||
uni.$showMsg()
|
||
}
|
||
},
|
||
// 获取流域
|
||
async basNameList(){
|
||
try{
|
||
const {data} = await uni.$http.get(
|
||
"/gunshiApp/xfflood/real/rain/basNameList"
|
||
)
|
||
if(data.code == 200){
|
||
const all = {
|
||
basName:'全部',
|
||
basCode:''
|
||
}
|
||
this.columns1 = [[all,...data.data]];
|
||
}
|
||
}catch(e){
|
||
uni.$showMsg()
|
||
}
|
||
},
|
||
// 获取雨情列表
|
||
async getRainList(){
|
||
try{
|
||
const {data} = await uni.$http.post(
|
||
"/gunshiApp/xfflood/real/rain/list",{...this.formData,timeType:undefined}
|
||
)
|
||
if(data.code == 200){
|
||
this.rainList = [...data.data];
|
||
}
|
||
}catch(e){
|
||
uni.$showMsg()
|
||
}
|
||
},
|
||
backTo(){
|
||
uni.navigateBack({delta:1})
|
||
}
|
||
},
|
||
onLoad() {
|
||
this.adnmList();
|
||
this.basNameList()
|
||
this.getRainList()
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.nav-bar{
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
width: 100%;
|
||
margin-top: 30px;
|
||
padding-top: 20px;
|
||
padding-bottom: 10px;
|
||
border-bottom: 1px solid #dfdfdf;
|
||
box-shadow: 0 5px 10px -8px #dfdfdf inset;
|
||
}
|
||
.search-box{
|
||
width: 100%;
|
||
display: flex;
|
||
justify-content: center;
|
||
.search-item{
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
margin-top: 20px;
|
||
width: 90%;
|
||
padding: 5px;
|
||
height: 30px;
|
||
background-color: #dddddd;
|
||
border-radius: 5px;
|
||
}
|
||
|
||
}
|
||
.time-select{
|
||
position: relative;
|
||
display: flex;
|
||
justify-content: center;
|
||
margin-top: 20px;
|
||
margin-bottom: 20px;
|
||
.noClick{
|
||
pointer-events: initial;
|
||
}
|
||
.jiangyu,.rain-time{
|
||
display: flex;
|
||
column-gap: 5px;
|
||
margin-right: 20px;
|
||
|
||
}
|
||
.jiangyu{
|
||
position: relative;
|
||
.jiangyu-dropdown{
|
||
position: absolute;
|
||
background-color: #fff;
|
||
width: 100vw;
|
||
left: -72px;
|
||
top: 35px;
|
||
.active{
|
||
color:#02a7f0
|
||
}
|
||
view{
|
||
margin-top: 10px;
|
||
}
|
||
}
|
||
}
|
||
.rain-time{
|
||
position: relative;
|
||
.rain-time-dropdown{
|
||
position: absolute;
|
||
background-color: #fff;
|
||
width: 100vw;
|
||
left: -230px;
|
||
top: 35px;
|
||
.active{
|
||
color:#02a7f0
|
||
}
|
||
view{
|
||
margin-top: 10px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.first-btn{
|
||
margin-right: 5px;
|
||
background-color: #f2f2f2;
|
||
}
|
||
.second-btn{
|
||
background-color: #f2f2f2;
|
||
}
|
||
.bottom-btn1,.bottom-btn2{
|
||
width: 30%;
|
||
}
|
||
.bottom-btn1{
|
||
margin-left: 130px;
|
||
}
|
||
.bottom-btn2{
|
||
margin-right: -12px;
|
||
}
|
||
</style> |