xytSk-App/pages/rain/rain.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 style="display:flex" v-show="limit == 1">
        <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>
          <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 style="display:flex" v-show="limit == 1">
          <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>
    <!-- 单纯下拉 -->
    <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"
  import {disType} from "../utils/dicType.js"
  const adcd = uni.getStorageSync('value').adcd
  const type = disType(adcd)
  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":adcd }],[]
  				],
          columnData: [[]],
          columns1:[[]],  //流域选择,
          formData:{ //表单数据
            timeType:24,
            orderType:1,
            basCode:'',
            source:["SH","SW","QX","SK"],
            stArg:'',
            adcd:type == 1 ? undefined :adcd,
            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")
         }
        },
        limit(){
          return disType(adcd)
        }
      },
      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>