bigDataApp/pages/cb/cbd/equip-set/imgpage.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="imglists.length == 0">暂无数据</p>
      <u-select
        v-model="modelPicker"
        mode="single-column"
        @confirm="confirmModel"
        v-if="device_type != 7"
        :default-value="[identify_model]"
        :list="modelList"
      ></u-select>
      <view
        class="schedule"
        @click="modelPicker = !modelPicker"
        v-if="device_type != 7"
      >
        <p class="schedule_value">{{ modelList[identify_model].label }}</p>
        <!-- {{titletext[indexone]}} -->
        <p class="schedule_icon">
          <u-icon name="arrow-down"></u-icon>
        </p>
      </view>
      <view
        :class="`selecttimes ${device_type == 7 ? 'bigSelect' : ''}`"
        @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"
        ></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.ids)">
              <p class="yficonfont icon-shanchu">删除</p>
            </view>
            <view
              class="icon_box"
              @click="shibie(item.ids, item.addr)"
              v-if="disable == 1 && device_type != 7"
            >
              <p class="yficonfont icon-shibie">识别</p>
            </view>
            <view class="icon_box" v-else-if="disable == 2 && device_type != 7">
              <p class="yficonfont icon-shibie">计数：{{ item.des_nums }}只</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 {
      modelPicker: false,
      identify_model: 1,
      modelList: [
        {
          value: 'A',
          label: '模型A',
        },
        {
          value: 'B',
          label: '模型B',
        },
      ],
      page: 1,
      imglists: [],
      tishi: true,
      d_id: '',
      timeend: null, //当前时间 也是搜索的结束时间
      timestate: null,
      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: '',
      loading: false,
    };
  },
  methods: {
    // 切换模型
    confirmModel(e) {
      this.modelList.forEach((item, index) => {
        if (e[0].value == item.value) {
          this.identify_model = index;
        }
      });
      this.page = 1;
      this.imglists = [];
      this.imglistdata(parseInt(this.timestate), parseInt(this.timeend));
      // console.log(e)
    },
    //forecast.forecast_system.equip_photofo
    async imglistdata(time_begin, time_end) {
      //获取图片列表
      this.loading = true;
      uni.showLoading({
        title: '加载中',
      });
      const res = await this.$myRequest({
        url: '/api/api_gateway?method=forecast.forecast_system.device_photo_list',
        data: {
          device_id: this.device_id,
          // device_id: '861551058865205',
          page: this.page,
          status: 'no',
          page_size: 12,
          identify_model: this.modelList[this.identify_model].value,
          time_begin: time_begin, //开始时间
          time_end: time_end, //结束时间
        },
      });
      uni.hideLoading();
      // this.loading = false
      this.imglists = this.imglists.concat(res.data);
      console.log(this.imglists);
    },
    // 孢子仪的图片列表
    async imglistdataBzy(time_begin, time_end) {
      //获取图片列表
      const res = await this.$myRequest({
        url: '/api/api_gateway?method=forecast.forecast_system.equip_photo',
        data: {
          device_id: this.device_id,
          page: this.page,
          ret: 'list',
          page_number: 12,
          // identify_model: this.modelList[this.identify_model].value,
          time_begin: time_begin, //开始时间
          time_end: time_end, //结束时间
        },
      });
      this.imglists = this.imglists.concat(res.data);
      console.log(this.imglists);
    },
    //forecast.forecast_system.equip_photo_del
    async del(id) {
      //删除图片
      var arr = [id];
      const res = await this.$myRequest({
        url: '/api/api_gateway?method=forecast.forecast_system.equip_photo_del',
        data: {
          device_id: this.device_id,
          addrlist: JSON.stringify(arr),
        },
      });
      if (res) {
        uni.showToast({
          title: '指令下发成功！',
          duration: 2000,
        });
        this.page = 1;
        this.imglists = [];
        if (this.device_type == 7) {
          this.imglistdataBzy(parseInt(this.timestate), parseInt(this.timeend));
        } else {
          this.imglistdata(parseInt(this.timestate), parseInt(this.timeend));
        }
        // this.imglistdata(parseInt(this.timestate), parseInt(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 拍照
    async takephoto() {
      //拍照
      const res = await this.$myRequest({
        url: '/api/api_gateway?method=forecast.send_control.admin_device_control',
        data: {
          device_type_id: 3,
          d_id: this.d_id,
          cmd: 'takephoto',
        },
      });
      console.log(res);
      if (res == true) {
        uni.showToast({
          title: '指令下发成功！',
          duration: 2000,
        });
        var that = this;
        setTimeout(() => {
          if (that.device_type == 7) {
            that.imglistdataBzy(
              parseInt(that.timestate),
              parseInt(that.timeend)
            );
          } else {
            that.imglistdata(parseInt(that.timestate), parseInt(that.timeend));
          }
          // that.imglistdata(parseInt(that.timestate), parseInt(that.timeend))
        }, 1000);
      } else {
        uni.showToast({
          title: '指令下发失败！',
          duration: 2000,
          icon: 'none',
        });
      }
    },
    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('用户点击取消');
          }
        },
      });
    },
    shibie(id, addr) {
      //识别
      // this.discern(id)
      uni.navigateTo({
        url:
          './results?id=' +
          id +
          '&addr=' +
          addr +
          '&identify_model=' +
          this.modelList[this.identify_model].value,
      });
    },
    tongji(item) {
      //统计
      // this.species(id)
      uni.navigateTo({
        url:
          './manualinput?id=' +
          item.ids +
          '&device_id=' +
          item.device_id +
          '&addtime=' +
          item.addtime,
      });
    },
    add(item) {
      uni.navigateTo({
        url:
          './addimg?id=' +
          item.ids +
          '&device_id=' +
          item.device_id +
          '&addtime=' +
          item.addtime,
      });
    },
    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,
      });
    },
    clickRight() {
      //下发拍照指令
      this.takephoto();
    },
    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;
      if (this.device_type == 7) {
        this.imglistdataBzy(parseInt(this.timestate), parseInt(this.timeend));
      } else {
        this.imglistdata(parseInt(this.timestate), parseInt(this.timeend));
      }
      // this.imglistdata(parseInt(this.timestate), parseInt(this.timeend))
    },
    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;
    },
  },
  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.device_id;
    this.d_id = option.d_id;
    this.imglists = [];
    this.disable = option.disable;
    this.device_type = option.device_type;
    console.log(this.timestate);
    if (this.device_type == 7) {
      this.imglistdataBzy(parseInt(this.timestate), parseInt(this.timeend));
    } else {
      this.imglistdata(parseInt(this.timestate), parseInt(this.timeend));
    }
  },
  onShow() {},
  onReachBottom() {
    this.page++;
    console.log(this.timestate);
    if (this.device_type == 7) {
      this.imglistdataBzy(parseInt(this.timestate), parseInt(this.timeend));
    } else {
      this.imglistdata(parseInt(this.timestate), parseInt(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: 114px;
  width: 95%;
  left: 2.5%;
  text-align: center;
  font-size: 40rpx;
}

.schedule {
  position: fixed;
  top: 85px;
  left: 10rpx;
  padding: 5rpx 0;
  // left: 50%;
  // transform: translateX(-50%);
  z-index: 100;
  display: flex;
  width: 220rpx;
  margin: 0 auto;
  height: 50rpx;
  // border: 2rpx solid #F0F0F0;
  background-color: #fff;
  // border-radius: 25px;
  box-shadow: 0 0 10rpx #bcb9ca;

  .schedule_value {
    width: 70%;
    text-align: center;
    line-height: 50rpx;
    font-size: 24rpx;
  }

  .schedule_icon {
    width: 30%;
    // background-color: #F2F2F2;
    text-align: center;
    line-height: 50rpx;

    ::v-deep .u-icon__icon {
      color: rgba(0, 0, 0, 0.3);
    }
  }
}
.selecttimes {
  width: 65%;
  position: fixed;
  top: 85px;
  right: 10rpx;
  z-index: 100;
  background-color: #fff;
  // padding-top: 30rpx;

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

.bigSelect {
  width: 100%;
}
.timeshow {
  width: 96%;
  height: 50rpx;
  background-color: #ffffff;
  position: fixed;
  top: 84px;
  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: 100px;
  width: 95%;
  left: 2.5%;

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