bigDataApp/pages/monitor/imagelist.vue

<template>
  <view>
    <!-- <view class="status_bar"></view> -->
    <view class="" style="position: relative; top: 5px">
      <!-- <view style="position: fixed;z-index: 100;">
				<uni-nav-bar @clickLeft="clickLeft" left-icon="back" title="查看图片"></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"
          @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 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="icon_box" @click="delimg(item.photo_id)">
              <p class="yficonfont icon-shanchu">删除</p>
            </view>
            <p style="color: #06b535">{{ item.addtime | timeFormat() }}</p>
          </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 {
      page: 1,
      imglists: [],
      tishi: true,
      d_id: '',
      timeend: '', //当前时间 也是搜索的结束时间
      timestate: '',
      timeshow: false,
      params: {
        year: true,
        month: true,
        day: true,
        hour: true,
        minute: true,
        second: false,
      },
      flag: 1,
      self: true,
      isTop: false,
      resultdata: {},
      titletext: ['24小时', '近一个月', '近半年', '近一年'],
      titleidnex: 0,
      tiemshow: false, //时间选择器
      disable: '',
      device_type: '',
      myuid: '',
    };
  },
  methods: {
    //forecast.forecast_system.equip_photofo
    async imglistdata(time_begin, time_end) {
      //获取图片列表
      const res = await this.$myRequest({
        url: '/api/api_gateway?method=camera.camera_manage.camera_photo',
        data: {
          device_id: this.device_id,
          page: this.page,
          page_size: 8,
          start_time: time_begin, //开始时间
          end_time: time_end, //结束时间
        },
      });
      this.imglists = this.imglists.concat(res.data);
      console.log(this.imglists);
      if (this.imglists.length == 0) {
        this.tishi = true;
      } else {
        this.tishi = false;
      }
    },
    //forecast.forecast_system.equip_photo_del
    async del(id) {
      //删除图片
      var arr = id;
      const res = await this.$myRequest({
        url: '/api/api_gateway?method=camera.camera_manage.del_camera_photo',
        data: {
          // device_id: this.device_id,
          photo_id_list: JSON.stringify(arr),
        },
      });
      if (res) {
        uni.showToast({
          title: '删除成功！',
          duration: 2000,
        });
        this.page = 1;
        this.imglists = [];
        if (this.timestate != '') {
          this.timestate = parseInt(this.timestate);
        }
        if (this.timeend != '') {
          this.timeend = parseInt(this.timeend);
        }
        this.imglistdata(this.timestate, this.timeend);
      } else {
        uni.showToast({
          title: '删除失败！',
          duration: 2000,
          icon: 'none',
        });
      }
    },
    //forecast.forecast_system.equip_photo_species  pest_list
    //forecast.forecast_system.equip_photo_species统计

    //forecast.send_control.admin_device_control 拍照
    clickLeft() {
      uni.navigateBack({
        delta: 1,
      });
    },
    delimg(id) {
      //删除图片
      uni.showModal({
        title: '提示',
        content: '是否删除此图片？',
        success: (res) => {
          if (res.confirm) {
            this.del(id);
            console.log('用户点击确定');
          } else if (res.cancel) {
            console.log('用户点击取消');
          }
        },
      });
    },
    top() {
      uni.pageScrollTo({
        scrollTop: 0,
        duration: 500,
      });
    },
    tiemchange(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.imglistdata(parseInt(this.timestate), parseInt(this.timeend));
    },
    timetab(e) {
      if (!e) return '请选择';
      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;
    },
  },
  onLoad(option) {
    uni.getStorage({
      key: 'myuid',
      success: (res) => {
        this.myuid = res.data;
        console.log(this.myuid);
      },
    });
    // this.timeend = +new Date() / 1000
    // this.timestate = this.timeend - 60 * 60 * 24
    console.log(option);
    this.device_id = option.id;
    console.log(this.timestate);
    this.imglistdata('', '');
  },
  onShow() {},
  onReachBottom() {
    this.page++;
    console.log(this.timestate);
    if (this.timestate != '') {
      this.timestate = parseInt(this.timestate);
    }
    if (this.timeend != '') {
      this.timeend = parseInt(this.timeend);
    }
    this.imglistdata(this.timestate, this.timeend);
  },
  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: 40px;
  width: 95%;
  left: 2.5%;
  text-align: center;
  font-size: 40rpx;
}

.selecttimes {
  width: 100%;
  // position: fixed;
  // top: 0;
  // left: 0;
  z-index: 100;
  background-color: #fff;
  padding: 10rpx 20rpx;
 box-sizing: border-box;
  .timesbox {
    display: flex;
    width:100%;
    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;
    }
  }
}

.timeshow {
  width: 96%;
  height: 50rpx;
  background-color: #ffffff;
  position: fixed;
  top: 10px;
  left: 2.5%;
  display: flex;
  z-index: 100;
  padding-top: 10px;

  .shuju_one_title {
    width: 70%;
    margin: 0 auto;
    display: flex;

    .tltle_text {
      width: 25%;
      border: 2rpx solid #b2b2b2;
      color: #b2b2b2;
      text-align: center;
      font-size: 24rpx;
      height: 50rpx;
      line-height: 50rpx;
    }

    .title_text_color {
      width: 25%;
      border: 2rpx solid #28ae4f;
      color: #28ae4f;
      text-align: center;
      font-size: 24rpx;
      height: 50rpx;
      line-height: 50rpx;
    }
  }

  .timeshow_tate,
  .timeshow_end {
    height: 50rpx;
    width: 45%;
    line-height: 50rpx;
    text-align: center;
    margin-right: 10rpx;
    background-color: #56c877;
    color: #ffffff;
  }
}

.imglist {
  // position: absolute;
  // top: 0;
  // width: 95%;
  // left: 2.5%;
	padding: 0 20rpx;
	margin-top: 10rpx;
  .imglist_box {
    display: flex;
    box-shadow: 0 0 10rpx #bcb9ca;
    padding: 20rpx;
    margin-bottom: 20rpx;
    height: 140px;
  }

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

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

  .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>