bigDataApp/pages/cb/cbd/equip-set/photoResults.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>
    <u-calendar
      v-model="calendarShow"
      mode="range"
      @change="change"
      @maxDate="maxDate"
    ></u-calendar>
    <view class="img-result">
      <view class="tile-item">
        <view @click="calendarShow = true" class="calendar"
          >{{ start_time }} <span style="margin: 0 40rpx"> -</span>
          {{ end_time }}</view
        >
      </view>

      <view class="images_box">
        <view class="canvas-bg">
          <canvas-mark />
          <!-- <img v-if="photos.length>0" :src="photos[active].addr+'?x-oss-process=image/resize,w_130/quality,q_90'" alt=""  @click="examine()"/> -->
        </view>
        <view class="image-flex">
          <view v-for="(item, index) in photos" :key="index">
            <image
              class="my-img"
              :class="active == index ? 'active' : ''"
              :src="item.addr"
              @click="imgClick(item, index)"
              mode=""
            ></image>
          </view>
        </view>
      </view>
      <view class="information">
        <view class="btn">
          <p class="title">当前图片识别结果</p>
          <u-button
            size="mini"
            :loading="respetLoading"
            class="btn_box"
            throttle-time="500"
            @click="resetPest"
            :customStyle="customStyle"
            >重新识别</u-button
          >
        </view>
        <view class="notip" v-if="isObject(pestResult)"> 暂无识别结果 </view>
        <view
          v-else
          class="information_data"
          v-for="(value, key) in pestResult"
        >
          <p>
            <span>{{ key }}</span> <span>{{ value }}头</span>
          </p>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import jsencrypt from '@/components/jsencrypt/jsencrypt.vue';
import insect_dict from '../../../../static/data/cbd_pest_library.js';
import canvasMark from '@/components/Draw/index.vue';
export default {
  data() {
    return {
      maxDate: '2050-12-31',
      device_type: '',
      device_id: '',
      d_id: '',
      calendarShow: false,
      start_time: '',
      end_time: '',
      photos: [],

      active: 0,
      respetLoading: false,
    };
  },
  components: { canvasMark },
  computed: {
    customStyle() {
      return {
        background: '#018B3F',
        fontSize: '12px',
        border: 'none',
        color: '#fff',
      };
    },
    pestResult() {
      if (this.photos == 0) {
        return {};
      }
      let obj = {};
      let item = this.photos[this.active];
      console.log('选中', item);
      if (item.is_mark == 0) {
        // 机器识别
        let aiLabel = [];
        if (item.label) {
          aiLabel = JSON.parse(item.label.replace(/'/g, '"'));
          aiLabel.forEach((label) => {
            const text = Object.keys(label)[0];
            if (obj[insect_dict[text]]) {
              obj[insect_dict[text]]++;
            } else {
              obj[insect_dict[text]] = 1;
            }
          });
        }
      } else {
        item.mark.forEach((item) => {
          if (obj[item.text]) {
            obj[item.text]++;
          } else {
            obj[item.text] = 1;
          }
        });
      }
      return obj;
    },
    previewImages() {
      let list = [];
      if (this.photos.length > 0) {
        this.photos.forEach((photo) => {
          list.push(photo.addr);
        });
        return list;
      } else {
        return [];
      }
    },
  },
  methods: {
    clickLeft() {
      uni.navigateBack();
    },
    isObject(obj) {
      return Object.keys(obj).length == 0;
    },
    change(e) {
      this.start_time = e.startDate;
      this.end_time = e.endDate;
      this.page = 1;
      this.photos = [];
      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: 1,
          page_number: 99999,
          start: +new Date(this.start_time + ' 00:00:00') / 1000,
          end: +new Date(this.end_time + ' 23:59:59') / 1000,
        },
      });
      this.photos = this.photos.concat(res.data);
      console.log(this.photos, '---');
      // this.photos = res.data
    },
    async resetPest() {
      this.respetLoading = true;
      const res = await this.$myRequest({
        url: '/api/api_gateway?method=new_gateway.photo_info.identify_again',
        data: {
          id: this.photos[this.active].id,
          device_type_id: this.device_type,
        },
      });
      this.respetLoading = false;
      if (res.code == 2000) {
        uni.showToast({
          title: '操作成功',
          duration: 2000,
        });
      } else {
        uni.showToast({
          title: res.msg,
          duration: 2000,
        });
      }
    },
    examine() {
      uni.previewImage({
        urls: this.previewImages,
      });
    },
    imgClick(item, index) {
      this.active = index;
    },
  },
  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(option.time) / 1000 + 60 * 60 * 24;
    let startTime = +new Date(option.time) / 1000;

    this.end_time = this.formatTime(endTime * 1000, 'yyyy-MM-dd');
    this.start_time = this.formatTime(startTime * 1000, 'yyyy-MM-dd');
    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;
  }
}
page {
  background: #f7f7f7;
}
.img-result {
  padding: 0rpx 48rpx;
  background-color: #f7f7f7;
  // height: calc(100vh - 120rpx);
}
.tile-item {
  margin-top: 32rpx;
  // padding: 0rpx 32rpx;
  box-sizing: border-box;
  height: 92rpx;
  line-height: 92rpx;
  display: flex;
  justify-content: space-between;
  background: #f7f7f7;
  .calendar {
    width: 100%;
    background-color: #fff;
    border-radius: 24rpx;
    padding: 0 18rpx;
    color: #5c5c5c;
    text-align: center;
  }
  .camera {
  }
}
.images_box {
  width: 100%;
  height: 742rpx;
  padding: 32rpx;
  margin: 32rpx 0;
  box-sizing: border-box;
  background: #fff;
  border-radius: 24rpx;
  .canvas-bg {
    height: 558rpx;
    position: relative;
    margin-bottom: 16rpx;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .image-flex {
    width: 100%;
    overflow-x: scroll;
    display: flex;
    flex-wrap: nowrap;
    gap: 20rpx;
    padding: 10rpx 0;
    box-sizing: border-box;
    .my-img {
      width: 96rpx;
      height: 96rpx;
      border-radius: 4rpx;
      opacity: 0.5;
    }
    .active {
      border: 4px solid #ccc;
      animation: borderAnimation 1s;
      position: relative;
      top: -4px;
      opacity: 1;
    }
  }
}

.information {
  padding-bottom: 2rpx;
  .btn {
    overflow: hidden;
  }
  .title {
    float: left;
    color: #999999;
  }
  .notip {
    text-align: center;
    color: #999999;
    margin-top: 100rpx;
  }
  .btn_box {
    float: right;
    // border-radius: 8rpx;
    // background: #018B3F;
    // padding: 2rpx 10rpx;
    // color: #fff;
    // font-size: 24rpx;
  }
  .information_data {
    margin: 32rpx 0;
    display: flex;
    background-color: #fff;
    // padding: 20rpx 10rpx;
    height: 104rpx;
    line-height: 104rpx;
    border-radius: 24rpx;
    padding: 0 32rpx;
    p {
      // margin-right: 20rpx;
      font-size: 24rpx;
      color: #666666;
    }
  }
}

@keyframes borderAnimation {
  0% {
    opacity: 0.5;
  }
  100% {
    opacity: 1;
  }
}
</style>