xytSk-App/pages/ylzList/detail/index.vue

<template>
   	<view :style="{height:'100vh',overflow:'auto'}">
		<u-navbar :title="123" :autoBack="true" :titleStyle="{
				fontSize:'18px'
			}" :height='40' :safeAreaInsetTop=true leftIconSize='20' leftIconColor='rgb(153, 153, 153)'>
		</u-navbar>
               <view class="tab-bar" style="margin-top:70px">
     <view class="jcsj" @click="activeOne = 0" :class="{'active':activeOne == 0}">
       监测数据
     </view>
     <view class="tjsj" @click="activeOne = 1" :class="{'active':activeOne == 1}">
       统计数据
     </view>
   </view>
	       <view style="padding:10px" v-if="activeOne == 0">
              <view class="time-ranger" >
    		    <view class="start-time">
    		    <text>开始时间</text>
    		    <text @click="showTime=true" style="margin-left:15%;color:#3399ef">{{stm}}</text>
    		  </view>
    		  <view class="end-time">
    		    <text>结束时间</text>
    		    <text @click="showTime1=true" style="margin:0 15%;color:#3399ef">{{etm}}</text>
    		     <view class="search-btn" @click="searchHandle">
    		      搜索
    		    </view>
    		  </view>

              </view>
              <view class="ylz-chart-area">
                 <qiun-data-charts  :chartData="chartData.chartData" :echartsApp="true" :eopts="chartData.eopts" />
              </view>
              <view class="ylz-table-area">
                <YlzTable :tableData="ylzData"></YlzTable>
              </view>
            </view>
             <view v-if="activeOne == 1" style="padding:10px">
                <Table></Table>
                </view>   
                  <u-datetime-picker
                :show="showTime"
                v-model="startTime"
                mode="datetime"
                @confirm="handleStartTime"
                @cancel="showTime=false"
        ></u-datetime-picker>
         <u-datetime-picker
                :show="showTime1"
                v-model="endTime"
                mode="datetime"
                @confirm="handleEndTime"
                @cancel="showTime1=false"
        ></u-datetime-picker>
	</view>
</template>
<script>
    import moment from'moment';
    import Table from "./tjsjTable.vue"
    import YlzTable from "./jcTable.vue"
    import drpOptions from './jcOptions'
    const stm = moment().subtract(7, 'days').set({minute: 0, second: 0}).format("YYYY-MM-DD HH:mm");
    const etm =  moment().set({minute: 0, second: 0}).format("YYYY-MM-DD HH:mm");
export default {
    components:{
        Table,
        YlzTable
    },
    data() {
        return {
             startTime:stm,
            endTime:etm,
            stm,
            etm,
            showTime:false,
            showTime1:false,
            activeOne:0,
            ylzData:[],
            chartData1:{},
            chartData:{}
        }
    },
    methods: {

            // 获取雨量信息
        async getrainInfo(){
            try {
                 const {data} = await uni.$http.post(
                  "/gunshiApp/xyt/attResBase/rainBasinDivision/queryStStbprpPerHour/StcdAndStartTimeAndEndTime",{
                    stcd:"716164061",
                    startTime:moment(this.stm).format("YYYY-MM-DD HH:mm:ss"),
                    endTime:moment(this.etm).format("YYYY-MM-DD HH:mm:ss")
                  })
                  if(data.code == 200){
                    this.ylzData = data.data;
                  }
            } catch (error) {
                 uni.$showMsg();
            }
        },

           // 获取雨量图表信息
        async getrainChartInfo(){
            try {
                 const {data} = await uni.$http.post(
                  "/gunshiApp/xyt/attResBase/rainBasinDivision/queryStStbprpPerHourChart/StcdAndStartTimeAndEndTime",{
                    stcd:"716164061",
                    startTime:moment(this.stm).format("YYYY-MM-DD HH:mm:ss"),
                    endTime:moment(this.etm).format("YYYY-MM-DD HH:mm:ss")
                  })
                  
                  if(data.code == 200){
                        this.chartData1 = {...data.data}
                  }
            } catch (error) {
                 uni.$showMsg();
            }
        },
             handleStartTime(e){
    				    let time = moment(e.value).format("YYYY-MM-DD HH:mm")
    				    this.stm = time
    				    this.showTime = false
    				  }, 
    				  handleEndTime(e){
    				     let time = moment(e.value).format("YYYY-MM-DD HH:mm")
    				     this.etm = time;
    				    this.showTime1 = false
    				  },  
                      
            searchHandle(){
                this.getrainInfo();
                this.getrainChartInfo();
            }          
    },
    watch:{
        chartData1(n,o){
            this.chartData = {...drpOptions(n)} 
        }
    },
    mounted() {
        this.getrainInfo();
        this.getrainChartInfo();
    }
}
</script>

<style lang="scss" scoped>
           .time-ranger{
    margin-bottom: 10px;
     .start-time, .end-time{
      display: flex;
      align-items: center;
      padding: 10px 0;
      border-bottom: 1px solid #dfdfdf;
    }
    }
    .tab-bar{
      display: flex;
      justify-content: space-around;
      padding: 10px 40px;
      border-bottom: 1px solid #dfdfdf;
    }
     .active{
      color: #39a6ff;
    }
    .ylz-chart-area{
        width: 100%;
        height: 230px;
    }
    .ylz-chart-table{

    }
</style>