bigDataApp/pages/waterandfer/waterhis.vue

<template>
  <view>
    <view class="selecttimesbox">
      <view class="selecttimes" @click="tiemshow = !tiemshow">
        <view class="timesbox">
          <image
            :src="$imageURL+'/bigdata_app/image/prevention/1acfe2751c01d3786cdc49b83d7e505.png'"
            mode=""
          ></image>
          <p>{{ timetab(oldtime) }}</p>
          <p class="or">~</p>
          <p>{{ timetab(newtime) }}</p>
          <u-icon name="rili" custom-prefix="custom-icon" class="icon"></u-icon>
        </view>
        <u-calendar
          v-model="tiemshow"
          mode="range"
          @change="tiemchange"
          range-color="#999"
          btn-type="success"
          active-bg-color="#0BBC58"
          range-bg-color="rgba(11,188,88,0.13)"
        ></u-calendar>
      </view>
    </view>

    <view class="historicaldata">
      <view class="historicaldatanone" v-if="hisdatalist.length == 0">
        暂无数据
      </view>
      <view
        class="historicaldata_item"
        v-for="(item, index) in hisdatalist"
        :key="index"
      >
        <view class="item">
          <view class=""> 操作内容 </view>
          <view class="">
            {{ item.relayState }}
          </view>
        </view>
        <view class="item">
          <view class=""> 操作时间 </view>
          <view class="">
            {{ item.uptime }}
          </view>
        </view>
        <view class="item">
          <view class=""> 操作账号 </view>
          <view class="">
            {{ item.user }}
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      oldtime: '',
      newtime: '',
      tiemshow: false,
      page: 1,
      device_id: '',
      hisdatalist: [],
    };
  },
  onLoad(option) {
    this.newtime = +new Date() / 1000;
    this.oldtime = (+new Date() - 24 * 60 * 60 * 1000) / 1000;
    this.device_id = option.device_id;
    this.sf_control();
  },
  onReachBottom() {
    // console.log("触底")
    this.page++;
    this.sf_control();
  },
  methods: {
    timetab(e) {
      e = new Date(e * 1000);
      var year = e.getFullYear();
      var month =
        e.getMonth() + 1 < 10 ? '0' + (e.getMonth() + 1) : e.getMonth() + 1;
      var day = e.getDate() < 10 ? '0' + e.getDate() : e.getDate();
      var time = year + '/' + month + '/' + day;
      return time;
    },
    tiemchange(e) {
      console.log(e);
      this.oldtime = +new Date(e.startDate) / 1000;
      this.newtime = +new Date(e.endDate) / 1000 + 16 * 60 * 60;
      this.page = 1;
      this.hisdatalist = [];
      this.sf_control();
    },
    async sf_control() {
      const res = await this.$myRequest({
        url: '/api/api_gateway?method=weather.weather.sf_control_data',
        data: {
          begin: Math.floor(this.oldtime),
          device_id: this.device_id,
          end: Math.floor(this.newtime),
          page: this.page,
        },
      });
      this.hisdatalist = res.dat;
      // console.log(res.dat)
      // 	for(var i=0;i<res.dat.length;i++){
      // 		var name = res.dat[i].relayName.split("/")[Number(res.dat[i].relayNum)]
      // 		var state = res.dat[i].relayState == 1?"开启":"关闭"
      // 		var obj = {
      // 			txt:state + name,
      // 			uptime:res.dat[i].uptime,
      // 			user:res.dat[i].user
      // 		}
      // 		this.hisdatalist.push(obj)
      // 	}
    },
  },
};
</script>

<style lang="scss">
page {
  background: $uni-bg-color-grey;
}
.selecttimesbox {
  position: fixed;
  width: 100%;
  padding: 30rpx 0;
  background-color: #fff;
  z-index: 99;
}
.selecttimes {
  width: 90%;
  box-shadow: 0 0 10rpx #bcb9ca;
  padding: 10rpx 20rpx;
  margin: 0 auto;
  box-sizing: border-box;

  .timesbox {
    display: flex;
    justify-content: space-around;

    image {
      width: 30rpx;
      height: 30rpx;
      margin-top: 6rpx;
    }

    .icon {
      color: #949494;
      text-align: right;
      margin-left: 30rpx;
    }
  }
}
.historicaldata {
  position: absolute;
  top: 130rpx;
  width: 100%;
  .historicaldatanone {
    font-size: 32rpx;
    width: 100%;
    padding: 20rpx 0;
    text-align: center;
  }
  .historicaldata_item {
    width: 100%;
    margin: 20rpx auto;
    background-color: #fff;
    .item {
      width: 90%;
      margin: 0rpx auto;
      border-bottom: 1px solid #f6f6f6;
      font-size: 32rpx;
      display: flex;
      justify-content: space-between;
      padding: 20rpx 0;
    }
  }
}
::v-deep .u-calendar__action {
  display: flex;
  justify-content: space-around;

  .u-calendar__action__text {
    line-height: 25px;
  }
}
</style>