386 lines
14 KiB
Vue
386 lines
14 KiB
Vue
<template>
|
||
<view class="rain-box">
|
||
<view class="nav-bar">
|
||
<u-icon name="arrow-left" color="#000" size="28"></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="()=>this.popupOpen = true"
|
||
v-show="!this.popupOpen"
|
||
>
|
||
</cover-image>
|
||
</view>
|
||
<!-- 搜索以及多级下拉 -->
|
||
<view class="search-box">
|
||
<view class="search-item">
|
||
<view class="" @click="handleClick" >
|
||
{{selecetItem[1] || columns[0][0]}}
|
||
</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">
|
||
<u--input
|
||
placeholder="请输入站点"
|
||
prefixIcon="search"
|
||
prefixIconStyle="font-size: 22px;color: #909399"
|
||
></u--input>
|
||
</view>
|
||
<view class="" @click="handleClick1" >
|
||
{{selecetItem1[1] || columns[0][0]}}
|
||
</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':this.rainTime}" @click="(e)=>{
|
||
if(this.rainTime){
|
||
e.stopPropagation();
|
||
return
|
||
}
|
||
this.jiangyu = !this.jiangyu}" >
|
||
<text>{{selectJyOne ? "按昨日降雨排序" :"按时段降雨排序"}}</text>
|
||
<u-icon name="arrow-down-fill" color="#000" size="20" v-show="!this.jiangyu"></u-icon>
|
||
<u-icon name="arrow-up-fill" color="#000" size="20" v-show="this.jiangyu"></u-icon>
|
||
<view class="jiangyu-dropdown" v-show="this.jiangyu">
|
||
<view :class="{'active': this.selectJyOne == 0}" @click="()=>this.selectJyOne = 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="this.selectJyOne == 0"></u-icon>
|
||
</view>
|
||
<view :class="{'active': this.selectJyOne == 1}" @click="()=>this.selectJyOne = 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="this.selectJyOne == 1"></u-icon>
|
||
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="rain-time" @click="(e)=>{
|
||
if(this.jiangyu){
|
||
e.stopPropagation();
|
||
return
|
||
}
|
||
this.rainTime = !this.rainTime}">
|
||
<text>{{selectTimeOne == 0 ? "1h" :
|
||
selectTimeOne == 1 ? "3h" :
|
||
selectTimeOne == 2 ? "6h" :
|
||
selectTimeOne == 3 ? "12h" :
|
||
selectTimeOne == 4 ? "24h" : ''
|
||
|
||
}}</text>
|
||
<u-icon name="arrow-down-fill" color="#000" size="20" v-show="!this.rainTime"></u-icon>
|
||
<u-icon name="arrow-up-fill" color="#000" size="20" v-show="this.rainTime"></u-icon>
|
||
<view class="rain-time-dropdown" v-show="rainTime">
|
||
<view class="" :class="{'active': this.selectTimeOne == 0}" @click="()=>this.selectTimeOne = 0" 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="this.selectTimeOne == 0"></u-icon>
|
||
</view>
|
||
<view class="" :class="{'active': this.selectTimeOne == 1}" @click="()=>this.selectTimeOne = 1" 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="this.selectTimeOne == 1"></u-icon>
|
||
</view>
|
||
<view class="" :class="{'active': this.selectTimeOne == 2}" @click="()=>this.selectTimeOne = 2" 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="this.selectTimeOne == 2"></u-icon>
|
||
</view>
|
||
<view class="" :class="{'active': this.selectTimeOne == 3}" @click="()=>this.selectTimeOne = 3" 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="this.selectTimeOne == 3"></u-icon>
|
||
</view>
|
||
<view class="" :class="{'active': this.selectTimeOne == 4}" @click="()=>this.selectTimeOne = 4" 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="this.selectTimeOne == 4"></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;">
|
||
统计时段：2024-04-25 10:00至2024-04-26 10:00
|
||
</view>
|
||
<view style="margin: 0 10px;">
|
||
<Table />
|
||
</view>
|
||
<u-picker
|
||
:show="show"
|
||
ref="uPicker"
|
||
:columns="columns"
|
||
@confirm="confirm"
|
||
@change="changeHandler"
|
||
@cancel="cancel"
|
||
>
|
||
</u-picker>
|
||
<u-picker
|
||
:show="show1"
|
||
ref="uPicker1"
|
||
:columns="columns"
|
||
@confirm="confirm1"
|
||
@change="changeHandler1"
|
||
@cancel="cancel1"
|
||
>
|
||
</u-picker>
|
||
<u-popup :show="popupOpen" mode="right" @close="()=>this.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="checkboxValue1"
|
||
@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="startTm" @change="(e) => this.startTm = e" />
|
||
<text style="margin-left: 10px;">至</text>
|
||
</view>
|
||
<view class="example-body" style="width: 92%;">
|
||
<uni-datetime-picker type="datetime" v-model="endTm" @change="(e) => this.EndTm = 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: 140%;">
|
||
<u-button text="重置" class="bottom-btn1"></u-button>
|
||
<u-button text="确认" color="#d9001b" class="bottom-btn2"></u-button>
|
||
</view>
|
||
</view>
|
||
</u-popup>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import Table from "./Table"
|
||
import filter from "../../static/images/filter.png"
|
||
export default {
|
||
data() {
|
||
return {
|
||
show: false,
|
||
show1:false,
|
||
switchIcon:true,
|
||
switchIcon1:true,
|
||
selecetItem:[],
|
||
selecetItem1:[],
|
||
jiangyu:false, //显示下拉
|
||
rainTime:false, //显示下拉，
|
||
selectJyOne:1,//选中降雨最后一个元素，
|
||
selectTimeOne:4, //选中时间的最有一个元素
|
||
popupOpen:false, //抽屉打开
|
||
checkboxValue1:["SH","SW","QX","SK"],
|
||
// 基本案列数据
|
||
checkboxList1: [{
|
||
name: '山洪',
|
||
value: "SH"
|
||
},
|
||
{
|
||
name: '水文',
|
||
value: "SW"
|
||
},
|
||
{
|
||
name: '气象',
|
||
value: "QX"
|
||
},
|
||
{
|
||
name: '水库',
|
||
value: "SK"
|
||
}
|
||
],
|
||
startTm: '', //开始时间，
|
||
endTm:"",//结束时间
|
||
columns: [
|
||
['中国', '美国'],
|
||
['深圳', '厦门', '上海', '拉萨']
|
||
],
|
||
columnData: [
|
||
['深圳', '厦门', '上海', '拉萨'],
|
||
['得州', '华盛顿', '纽约', '阿拉斯加']
|
||
]
|
||
}
|
||
},
|
||
components:{
|
||
Table
|
||
},
|
||
methods: {
|
||
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=!this.switchIcon;
|
||
this.selecetItem = [...e.value]
|
||
},
|
||
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.switchIcon=!this.switchIcon;
|
||
this.selecetItem1 = [...e.value]
|
||
},
|
||
cancel1(e) {
|
||
this.show1 = false
|
||
},
|
||
handleClick(){
|
||
this.show = true;
|
||
this.switchIcon = !this.switchIcon
|
||
},
|
||
handleClick1(){
|
||
this.show1 = true;
|
||
this.switchIcon1 = !this.switchIcon1
|
||
},
|
||
checkboxChange(n) {
|
||
console.log('change', n);
|
||
},
|
||
changeLog(e) {
|
||
console.log('change事件:', e);
|
||
},
|
||
}
|
||
}
|
||
</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;
|
||
}
|
||
.rain-input{
|
||
// width: 30%;
|
||
}
|
||
}
|
||
.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> |