bigDataApp/pages/cb/sy/imgList.vue

<template>
  <view>
    <view class="status_bar"></view>
    <view class="" style="position: relative; top: 44px">
      <view style="position: fixed; z-index: 100">
        <uni-nav-bar
          @clickLeft="clickLeft"
          left-icon="back"
          title="查看图片"
          rightIcon="camera"
          @clickRight="clickRight"
        ></uni-nav-bar>
      </view>
      <!-- <p class="tishi" v-if="tishi">暂无数据</p> -->
      <view class="selecttimes" @click="tiemshow = !tiemshow">
        <view class="timesbox">
          <image
            :src="
              $imageURL+'/bigdata_app'+
              '/image/prevention/1acfe2751c01d3786cdc49b83d7e505.png'
            "
            mode=""
          ></image>
          <p>{{ timetab(timestate) }}</p>
          <p class="or">~</p>
          <p>{{ timetab(timeend) }}</p>
          <u-icon name="rili" custom-prefix="custom-icon" class="icon"></u-icon>
        </view>
        <u-calendar
          v-model="tiemshow"
          mode="range"
          range-color="#999"
          btn-type="success"
          active-bg-color="#0BBC58"
          range-bg-color="rgba(11,188,88,0.13)"
          @change="tiemchange"
        ></u-calendar>
      </view>
      <view class="imglist">
        <view
          class="imglist_box"
          v-for="(item, index) in imglists"
          :key="index"
        >
          <view class="imglist_left">
            <image
              :src="$imageURL+'/bigdata_app/image/cb/jiazai.ui.gif'"
              mode=""
            >
            </image>
            <image :src="item.addr" mode="" @click="examine(index)"></image>
          </view>
          <view class="imglist_right">
            <view class="">
              {{ timetab(item.addtime) }}
            </view>
            <view class=""> 害虫数量:{{ item.pest_counts }} </view>
          </view>
        </view>
      </view>
    </view>
    <view class="top" v-if="isTop" @click="top">
      <image
        :src="
          $imageURL+ '/bigdata_app' +        '/image/6209a98f0cb3b5086f2ca36152c9269.png'
        "
        mode=""
      ></image>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      tiemshow: false,
      timestate: '',
      timeend: '',
      isTop: false,
      imglists: [],
      device_id: '',
      page: 1,
      d_id: '',
    };
  },
  methods: {
    clickLeft() {
      uni.navigateBack({
        delta: 1,
      });
    },
    clickRight() {
      this.takephoto();
    },
    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;
    },
    examine(index) {
      var imgarr = [];
      for (var i = 0; i < this.imglists.length; i++) {
        imgarr.push(this.imglists[i].addr);
      }
      uni.previewImage({
        urls: imgarr,
        current: index,
      });
    },
    async getimglist() {
      const res = await this.$myRequest({
        url: '/api/api_gateway?method=forecast.forecast_system.device_photo_list',
        data: {
          cmd: 'color',
          device_id: this.device_id,
          page: this.page,
          page_number: '12',
          time_begin: Math.floor(this.timestate),
          time_end: Math.floor(this.timeend),
        },
      });
      console.log(res);
      this.imglists = [...this.imglists, ...res.data];
      if (this.imglists.length == 0) {
        uni.showToast({
          title: '数据为空',
          duration: 2000,
          icon: 'none',
        });
      }
    },
    top() {
      uni.pageScrollTo({
        scrollTop: 0,
        duration: 500,
      });
    },
    tiemchange(e) {
      // console.log(e)
      this.imglists = [];
      this.page = 1;
      console.log(e);
      this.timestate = +new Date(e.startDate) / 1000 - 8 * 60 * 60;
      this.timeend = +new Date(e.endDate) / 1000 + 16 * 60 * 60;
      this.getimglist();
    },
    async takephoto() {
      //拍照
      const res = await this.$myRequest({
        url: '/api/api_gateway?method=forecast.send_control.admin_device_control',
        data: {
          device_type_id: 8,
          d_id: this.d_id,
          cmd: 'takephoto',
        },
      });
      console.log(res);
      if (res == true) {
        uni.showToast({
          title: '指令下发成功！',
          duration: 2000,
        });
        var that = this;
        setTimeout(() => {
          that.getimglist();
        }, 1000);
      } else {
        uni.showToast({
          title: '指令下发失败！',
          duration: 2000,
          icon: 'none',
        });
      }
    },
  },
  onLoad(option) {
    this.d_id = option.d_id;
    this.device_id = option.device_id;
    this.timeend = +new Date() / 1000;
    this.timestate = this.timeend - 60 * 60 * 24;
    this.getimglist();
  },
  onReachBottom() {
    this.page++;
    this.getimglist();
  },
  onPageScroll(e) {
    //nvue暂不支持滚动监听，可用bindingx代替
    if (e.scrollTop > 200) {
      //距离大于200时显示
      this.isTop = true;
    } else {
      //距离小于200时隐藏
      this.isTop = false;
    }
  },
};
</script>

<style lang="scss">
.tishi {
  position: absolute;
  top: 104px;
  width: 95%;
  left: 2.5%;
  text-align: center;
  font-size: 40rpx;
}

.selecttimes {
  width: 100%;
  position: fixed;
  top: 85px;
  left: 0;
  z-index: 100;
  background-color: #fff;
  padding-top: 30rpx;

  .timesbox {
    display: flex;
    width: 95%;
    margin: 0 auto;
    justify-content: space-around;
    box-shadow: 0 0 10rpx #bcb9ca;
    padding: 10rpx 20rpx;
    box-sizing: border-box;

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

    .icon {
      color: #949494;
      text-align: right;
      margin-left: 30rpx;
    }
  }

  ::v-deep .u-calendar__action {
    display: flex;
    justify-content: space-around;

    .u-calendar__action__text {
      line-height: 25px;
    }
  }
}
.imglist {
  position: absolute;
  top: 100px;
  width: 95%;
  left: 2.5%;

  .imglist_box {
    display: flex;
    box-shadow: 0 0 10rpx #bcb9ca;
    padding: 20rpx;
    margin-bottom: 20rpx;
    height: 155px;
  }

  .imglist_left {
    width: 50%;
    position: relative;

    image {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 280rpx;
    }
  }

  .imglist_right {
    margin-left: 40rpx;
    padding: 10rpx 0;

    .icon_box {
      margin-bottom: 12rpx;
      font-size: 24rpx;

      .iconfont {
        margin-right: 20rpx;
        color: #56c877;
        font-size: 32rpx;
      }
    }

    p:last-child {
      margin-bottom: 0;
    }
  }
}
.top {
  position: fixed;
  right: 30px;
  bottom: 100px;
  z-index: 100;

  image {
    width: 100rpx;
    height: 100rpx;
  }
}
</style>