xytSk-App/pages/skDetail/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:10%;color:#3399ef">{{stm}}</text>
      </view>
      <view class="end-time">
        <text>结束时间</text>
        <text @click="showTime1=true" style="margin:0 10%;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 style="text-align: right; margin-bottom: -15px;">
      <text :class="{'active':selactOne == 0}" @click="selactOne = 0" style="display: inline-block; padding: 2px 20px; text-align: center; border: 1px solid #dfdfdf;">图</text>
      <text :class="{'active':selactOne == 1}" @click="selactOne = 1" style="display: inline-block; padding: 2px 20px; text-align: center; border: 1px solid #dfdfdf;">表</text>
    </view>
    <view class="jcsj-content">
    <view class="jcsj-charts" v-if="selactOne == 0">
      <qiun-data-charts  :chartData="chartData.chartData" :echartsApp="true" :eopts="chartData.eopts" />
    </view>
     <view style="margin-top: 20px;" v-if="selactOne == 1">
      <JcsjTable :tableData="tableData" />
    </view>
      <view style="height:300px" v-if="selactOne == 0"></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>
</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,
      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: {},
        rainChartData:[],
        selactOne:0
      }
    },
    components:{
      JcsjTable
    },
    watch:{
      rainChartData(newV, oldV){
        this.chartData = {...drpOption(newV,this.afsltdz,this.flLowLimLev,this.desFloodLev,this.calFloodLev)}
        this.tableData = [...newV]
      }
    },
    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/reservoir/water/monitor/data",
          {
            stcd:this.stcd,
            stm:moment(this.stm).format("YYYY-MM-DD HH:mm:ss"),
            etm:moment(this.etm).format("YYYY-MM-DD HH:mm:ss"),
            source:this.source
          })
          if(data.code == 200){
            this.rainChartData = [...data.data];
          }
        }catch(e){
         uni.$showMsg();
        }
      },
    // 搜索
      searchHandle(){
        this.getJcsjData();
      }
    },
    mounted() {
       this.getJcsjData();
    },
  }
</script>

<style lang="scss" scoped>
.jcsj-box{
   .jcsj-content{
    max-height:100vh;
    width: 100%;
    overflow-y:auto
  }
  .jcsj-charts{
    // width:103vw;
    height: 500px;
    overflow-y: auto;
    margin-top: 20px;
  }
  .active{
    border-color: #68bbff !important;
    color: #68bbff;
  }
}
</style>