xytSk-App/pages/rainDetail/jcsj/jcsj.vue

<template>
  <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>
      <!-- <uni-datetime-picker  type="datetimerange" v-model="tm" @change="handleRanger"></uni-datetime-picker>
      <view class="search-btn" @click="searchHandle">
        搜索
      </view> -->
    </view>
<!--    <view class="" style="width: 100%; height: 3px; background-color: #dfdfdf; margin-bottom: 2px;">
      
    </view> -->
    <view class="jcsj-charts">
      <qiun-data-charts  :chartData="chartData.chartData" :echartsApp="true" :eopts="chartData.eopts" /> 
    </view>
    <view class="jcsj-table">
      <JcsjTable :tableData="tableData" />
    </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 JcsjTable from "./jcsjTable"
  import drpOption from "./chartOption.js"  
  const stm = moment().subtract(7, 'days').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,
      default:''
    },
    data() {
      return {
        startTime:stm,
        endTime:etm,
        stm,
        etm,
        tableData:[],
        chartData: {chartData:{},eopts:{}},
        rainChartData:{},
        showTime:false,
        showTime1:false
      }
    },
    components:{
      JcsjTable
    },
    watch:{
      rainChartData:{
        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 getJcsjData(){
        try{ 
          const {data} = await uni.$http.post(
          "/gunshiApp/xfflood/attResBase/rainBasinDivision/queryStStbprpPerHour/StcdAndStartTimeAndEndTime",
          {
            stcd:this.stcd,
            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.tableData = [...data.data]
          }
        }catch(e){
         uni.$showMsg()
        }
      },
          // 获取图表数据
      async getRainChartData(){
            try{
              const {data} = await uni.$http.post(
              "/gunshiApp/xfflood/attResBase/rainBasinDivision/queryStStbprpPerHourChart/StcdAndStartTimeAndEndTime",
              {
                stcd:this.stcd,
                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.rainChartData = {...data.data}
              }
            }catch(e){
              uni.$showMsg()
            }
          },
    // 搜索
      searchHandle(){
        this.getJcsjData();
        this.getRainChartData()
      }
    },
    mounted() {
       this.getJcsjData()
       this.getRainChartData()
    },
  }
</script>

<style lang="scss" scoped>
.jcsj-box{
  .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-charts{
    width:100%;
    height: 300px;
  }
}
</style>