2024-05-30 13:53:09 +08:00
|
|
|
|
<template>
|
2024-05-31 09:31:56 +08:00
|
|
|
|
<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>
|
2024-05-30 13:53:09 +08:00
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
|
|
<script>
|
2024-05-31 09:31:56 +08:00
|
|
|
|
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);
|
|
|
|
|
|
},
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
2024-05-30 13:53:09 +08:00
|
|
|
|
</script>
|
|
|
|
|
|
|
2024-05-31 09:31:56 +08:00
|
|
|
|
<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;
|
|
|
|
|
|
}
|
2024-05-30 13:53:09 +08:00
|
|
|
|
</style>
|
