bigDataApp/pages/cb/cbd/equip-set/photo.vue

<template>
  <view
    style="
      background-color: #f7f7f7;
      padding-top: 88rpx;
      height: calc(100vh - 88rpx);
    "
  >
    <uni-nav-bar
      @clickLeft="clickLeft"
      left-icon="back"
      title="查看图片"
      backgroundColor="#F7F7F7"
    ></uni-nav-bar>
    <view class="search-item">
      <u-dropdown>
        <u-dropdown-item
          @change="dropDownChange"
          v-model="searchObj.is_pest"
          title="害虫筛选"
          :options="pestOptions"
        ></u-dropdown-item>
      </u-dropdown>
      <span v-if="!delShow" class="right" @click="imgOperate"> 管理 </span>
      <span v-else class="right" @click="delShow = false"> 完成 </span>
    </view>
    <view style="padding: 0 48rpx" v-if="searchObj.is_pest != '2'">
      <u-search
        bg-color="#fff"
        height="92"
        shape="square"
        placeholder="请输入害虫名称"
        v-model="searchObj.pest_name"
        @search="dropDownChange"
        :show-action="false"
      ></u-search>
    </view>
    <u-calendar
      v-model="calendarShow"
      mode="range"
      @maxDate="maxDate"
      @change="change"
    ></u-calendar>
    <view class="tile-item">
      <view @click="calendarShow = true" class="calendar"
        >{{ start_time }} <span style="margin: 0 40rpx"> -</span>
        {{ end_time }}</view
      >

      <u-icon
        name="camera"
        color="#018B3F"
        size="52"
        @click="takephoto"
      ></u-icon>
    </view>
    <view class="imglist" v-if="imglists.length > 0">
      <view class="imglist_box" v-for="(item, index) in imglists" :key="index">
        <view class="top"
          >识别:{{ item.indentify_count }}
          <span
            class="yficonfont icon-shanchu float-right"
            v-if="delShow"
            @click="delImage(item)"
          ></span>
          <!-- <u-icon v-if="delShow" @click="delImage(item)" class="float-right" name="trash-fill" color="#FF5951" size="28"></u-icon> -->
        </view>
        <!-- <image class="img-flex" v-if="showPlaceholder" src="/static/images/image.png"></image> -->
        <image
          class="img-flex"
          @error="handleImgErr($event, index)"
          :src="item.addr + '?x-oss-process=image/resize,w_130/quality,q_50'"
          mode=""
          @click="imageDetail(item)"
        ></image>
        <view class="bottom">{{ item.addtime }}</view>
      </view>
    </view>
    <view v-else class="notip"> 暂无数据 </view>
  </view>
</template>

<script>
import jsencrypt from '@/components/jsencrypt/jsencrypt.vue';
export default {
  data() {
    return {
      maxDate: '2050-12-31',
      value1: '',
      value2: '',
      searchObj: {
        is_pest: '',
        pest_name: '',
      },
      pestOptions: [
        { label: '全部', value: '' },
        { label: '有虫', value: '1' },
        { label: '无虫', value: '2' },
      ],
      timeend: '',
      timestart: '',
      imglists: [],
      page: 1,
      device_type: '',
      device_id: '',
      d_id: '',
      calendarShow: false,
      start_time: '',
      end_time: '',
      delShow: false,
      loadMore: true,
      noImage: '/static/images/image.png',
    };
  },
  methods: {
    handleImgErr(e, index) {
      console.log(e, '图片加载出错了');
      this.imglists[index].addr = this.noImage;
      // this.showPlaceholder = true
    },
    imageDetail(item) {
      console.log(item);
      if (this.delShow) {
        return;
      }
      uni.navigateTo({
        url:
          '/pages/cb/cbd/equip-set/photoResults' +
          '?d_id=' +
          this.d_id +
          '&device_id=' +
          this.device_id +
          '&device_type=' +
          this.device_type +
          '&time=' +
          item.addtime,
      });
    },
    imgOperate() {
      this.delShow = true;
    },
    clickLeft() {
      uni.navigateBack();
    },
    dropDownChange() {
      this.loadMore = true;
      this.page = 1;
      this.imglists = [];
      this.getImgData();
    },
    change(e) {
      this.loadMore = true;
      console.log(e);
      this.start_time = e.startDate;
      this.end_time = e.endDate;
      this.page = 1;
      this.imglists = [];
      this.getImgData();
    },
    async getImgData() {
      const res = await this.$myRequest({
        url: '/api/api_gateway?method=new_gateway.photo_info.photo_list',
        data: {
          id: this.d_id,
          device_type_id: this.device_type,
          page: this.page,
          page_size: 20,
          start: +new Date(this.start_time + ' 00:00:00') / 1000,
          end: +new Date(this.end_time + ' 23:59:59') / 1000,
          ...this.searchObj,
        },
      });
      if (res.data.length == 0) {
        // 加载完了
        this.loadMore = false;
        return;
      }
      this.imglists = this.imglists.concat(res.data);
    },
    // 删除
    delImage(item) {
      uni.showModal({
        title: '提示',
        content: '确认删除？',
        success: async (res) => {
          if (res.confirm) {
            const res = await this.$myRequest({
              url: '/api/api_gateway?method=new_gateway.photo_info.delete_photo',
              data: {
                device_type_id: this.device_type,
                ids: item.id,
              },
            });
            this.delShow = false;

            uni.showToast({
              title: res.msg,
              duration: 2000,
            });
            this.imglists = [];
            this.getImgData();
          } else if (res.cancel) {
          }
        },
      });
    },

    onReachBottom() {
      if (this.loadMore) {
        this.page++;
        this.getImgData();
      }
    },
    anew() {
      this.discern('again');
      this.imgbg = true;
    },
    examine(url) {
      console.log(url);
      var imgarr = [];
      imgarr.push(url.image);
      console.log(imgarr);
      uni.previewImage({
        urls: imgarr,
      });
    },
    async takephoto() {
      //拍照
      const res = await this.$myRequest({
        url: '/api/api_gateway?method=new_gateway.device_info.send_control',
        data: {
          device_type_id: this.device_type,
          id: this.device_id,
          COMMAND:this.device_type=='33'?'takephoto': '0004',
        },
      });
      console.log(res);

      if (res == true) {
        uni.showToast({
          title: '指令下发成功！',
          duration: 2000,
        });
      } else {
        uni.showToast({
          title: '指令下发失败！',
          duration: 2000,
          icon: 'none',
        });
      }
    },
  },
  onLoad(option) {
    console.log('图片详情', option);
    this.device_id = option.device_id;
    this.d_id = option.d_id;
    this.device_type = option.device_type;
    let endTime = +new Date() / 1000;
    let startTime = endTime - 60 * 60 * 24;

    this.end_time = this.formatTime(endTime * 1000, 'yyyy-MM-dd');
    this.start_time = this.formatTime(startTime * 1000, 'yyyy-MM-dd');
    // this.imglists = []

    this.getImgData();
  },
};
</script>

<style lang="scss" scoped>
::v-deep .u-calendar__action {
  display: flex;
  justify-content: space-around;

  .u-calendar__action__text {
    line-height: 25px;
  }
}
::v-deep .u-flex {
  display: flex;
}
page {
  background: #f7f7f7;
  .notip {
    text-align: center;
    color: #666666;
    margin-top: 100rpx;
  }
  .search-item {
    // padding: 0rpx 48rpx;
    box-sizing: border-box;
    background: #f7f7f7;
    line-height: 80rpx;
    color: #656c74;
    position: relative;
    .right {
      position: absolute;
      z-index: 11;
      right: 48rpx;
      top: 0;
    }
    .right::before {
      content: '|';
      color: #c3cbcf;
      padding-right: 10rpx;
    }
  }
  .tile-item {
    margin-top: 16rpx;
    padding: 0rpx 48rpx;
    box-sizing: border-box;
    height: 92rpx;
    line-height: 92rpx;
    display: flex;
    justify-content: space-between;
    background: #f7f7f7;
    .calendar {
      width: 83%;
      background-color: #fff;
      border-radius: 10rpx;
      padding: 0 18rpx;
      color: #5c5c5c;
      text-align: center;
    }
    .camera {
    }
  }
  .imglist {
    display: flex;
    flex-flow: row wrap;
    padding: 0rpx 48rpx;
    box-sizing: border-box;
    background: #f7f7f7;
    margin-top: 6rpx;
    // justify-content: space-around;
    // gap: 16rpx;
    .imglist_box {
      box-sizing: border-box;
      flex: 0 0 33.3333%;
      height: 224rpx;
      padding: 6rpx;
      border-radius: 4rpx;
      position: relative;
      .top {
        position: absolute;
        top: 6rpx;
        left: 6rpx;
        background: rgba(0, 0, 0, 0.6);
        color: #fff;
        border-top-left-radius: 4rpx;
        border-top-right-radius: 4rpx;
        padding: 0 20rpx;
        font-size: 10px;
        z-index: 1;
        width: 75.5%;
        .float-right {
          float: right;
          color: #ff5951;
          font-size: 36rpx;
        }
      }
      .bottom {
        position: absolute;
        bottom: 6rpx;
        left: 6rpx;
        background: rgba(0, 0, 0, 0.6);
        color: #fff;
        border-bottom-left-radius: 4rpx;
        border-bottom-right-radius: 4rpx;
        text-align: center;
        font-size: 10px;
        width: 94.5%;
        padding: 4rpx 0;
      }
      .img-flex {
        border-radius: 4rpx;
        width: 100%;
        height: 100%;
      }
    }
  }
}
</style>