xytSk-App/pages/stlljk/index.vue

<template>
  <view style="height:100vh; overflow:hidden;background-color:#fff">
      <u-status-bar></u-status-bar>
		<u-navbar
			title="生态流量监控" 
			:autoBack="true" 
			:titleStyle="{
				fontSize:'18px'
			}" 
			:height='44'
			:safeAreaInsetTop=true
			leftIconSize='20'
			leftIconColor='rgb(153, 153, 153)'
		>
		</u-navbar>
  <view class="jcsj-box">
  
    <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="jcsj-content">
    <view class="jcsj-charts" >
      <qiun-data-charts  :chartData="chartData.chartData" :echartsApp="true" :eopts="chartData.eopts" />
    </view>
     <view style="margin-top: 20px;">
      <JcsjTable :tableData="tableData" />
    </view>
    </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>
  </view>
</template>

<script>
  import moment from "moment"
  import JcsjTable from "./jcsjTable"
  import drpOption from "./chartOption.js"  
  const stm = moment().subtract(7, 'months').add(1, 'hour').set({minute: 0, second: 0}).format("YYYY-MM-DD HH:mm");
  const etm =  moment().add(1, 'hour').set({minute: 0, second: 0}).format("YYYY-MM-DD HH:mm");
  export default {
    props:{
      stcd:String,
      source:String,
      wrz:String,
      grz:String,
      afsltdz:String,
      flLowLimLev:String,
      desFloodLev:String,
      calFloodLev:String,

      default:''
    },
    data() {
      return {
        startTime:stm,
        endTime:etm,
        stm,
        etm,
        showTime:false,
        showTime1:false,
        tableData:[],
        chartData: {chartData:{},eopts:{}},
        stData:{}
      }
    },
    components:{
      JcsjTable
    },
    watch:{
      stData:{
        handler(newV){
          this.chartData = {...drpOption(newV)}
        },
        deep:true
      }
    },
    methods: {
          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
      },
      handleRanger(e){
        console.log(e);
        this.tm = [...e]
      },

    //  获取月份数据
     async getMonthData(){
      const startTime = moment(this.stm).format("YYYY-MM-DD HH:mm:ss");
      const endTime = moment(this.etm).format("YYYY-MM-DD HH:mm:ss");
        try{ 
          const {data} = await uni.$http.get(
          `/gunshiApp/xyt/stWaterR/getResMonthEcoFlow?startTime=${startTime}&endTime=${endTime}`,)
          if(data.code == 200){
            this.stData = {
              ...this.stData,
              chart:data.data
            }
          }
        }catch(e){
         uni.$showMsg();
        }
      },

      // 获取生态流量数据
      async getJcsjData(){
        try{ 
          const {data} = await uni.$http.post(
          "/gunshiApp/xyt/stWaterR/ecologyFlowList",
          {
            startTime:moment(this.stm).format("YYYY-MM-DD HH:mm:ss"),
            endTime:moment(this.etm).format("YYYY-MM-DD HH:mm:ss"),
            isAsc:false,
            orderField:"tm"
          })
          if(data.code == 200){
            this.stData = {
              ...this.stData,
              list:data.data
            }
            this.tableData = data.data;
          }
        }catch(e){
         uni.$showMsg();
        }
      },
    // 搜索
      searchHandle(){
         this.getJcsjData()
        this.getMonthData()
      }
    },
    mounted() {
       this.getJcsjData();
        this.getMonthData()

    },
  }
</script>


<style lang="scss" scoped>
.jcsj-box{
  padding: 0 10px;
  margin-top: 50px;
  .time-ranger{
    // display: flex;
    // align-items: center;
    margin-bottom: 10px;
     .start-time, .end-time{
      display: flex;
      align-items: center;
      padding: 10px 0;
      border-bottom: 1px solid #dfdfdf;
    }
    .search-btn{
      margin: 3px 0 0 5px;
      // color: #3399ef;
    }
  }
   .jcsj-content{
    max-height:100vh;
    width: 100%;
    overflow-y:auto
  }
  .jcsj-charts{
    // width:103vw;
    height: 300px;
    overflow-y: auto;
    margin-top: 20px;
  }
  .active{
    border-color: #68bbff !important;
    color: #68bbff;
  }
}
</style>