bigdata_WX/pages/monitor/dgpImagelist.vue

<template>
  <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 style="position: fixed; z-index: 100;">
		
	
	  <view class="tab-box">
	  	<u-tabs :list="equipArr"  :current="active" active-color="#14A478" @change="tabClick"></u-tabs>
	  </view>
	  <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>
      <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.photo" mode="" @click="examine(item.photo)"></image>
          </view>
          <view class="imglist_right">
            <view class="icon_box" @click="delimg(item.photo_id)">
              <i class="yficonfont icon-shanchu"></i>
            </view>
			<p>设备名称：{{ item.device_name  }}</p>
			<p>所属场景：{{ item.index_name  }}</p>
			<p>类型：{{ item.index_type  }}</p>
			<p>指数：{{ item.index_value  }}</p>
            <p >{{ 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: '',
	  active:0,
	  equipArr:[
		          { name: '全部', value: '全部' },
		        { name: 'NDVI（归一化差值植被指数）', value: 'NDVI' },
		             { name: 'GNDVI（绿度归一化差值植被指数）', value: 'GNDVI' },
		             { name: 'OSAVI（优化土壤调节植被指数）', value: 'OSAVI' },
		             { name: 'LCI（叶叶绿素指数）', value: 'LCI' },
		             { name: 'NDRE（红边归一化差值植被指数）', value: 'NDRE' }
	  ],
	  device_type:''
    };
  },
  methods: {
	  examine(url) {
	  				var imgarr =[]
	  				imgarr.push(url)
	  				console.log(imgarr)
	  				uni.previewImage({
	  					urls: imgarr
	  				});
	  			},
    	tabClick(index) {
			this.page = 1
    				this.imglists = []
    				this.active = index;
    				this.device_type = this.equipArr[index].value

    				    if (this.timestate != '') {
    				      this.timestate = parseInt(this.timestate);
    				    }
    				    if (this.timeend != '') {
    				      this.timeend = parseInt(this.timeend);
    				    }
    				    this.imglistdata(this.timestate, this.timeend);
    			},
    async imglistdata(time_begin, time_end) {
      //获取图片列表
      const res = await this.$myRequest({
        url: '/api/api_gateway?method=camera.camera_manage.multi_camera_photo',
        data: {
          device_id: this.device_id,
          page: this.page,
          page_size: 8,
          start: time_begin, //开始时间
          end: time_end, //结束时间
		  index_type: this.device_type === '全部' ? '' : this.device_type
        },
      });
      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) {
      //删除图片
      const res = await this.$myRequest({
        url: '/api/api_gateway?method=camera.camera_manage.multi_camera_photo_delete',
        data: {
          // device_id: this.device_id,
          photo_id: id,
        },
      });
      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: 45%;
  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: 95px;
	width: 100%;
	padding: 0 20rpx;
	
	box-sizing: border-box;
  .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-top: 26rpx;
	position: relative;
	p{
		line-height: 24px;
	}
    .icon_box {
		position: absolute;
		top: -12rpx;
		right: -42rpx;
      // margin-bottom: 12rpx;
		font-size: 24rpx;

      .yficonfont {
        margin-right: 20rpx;
        color: #ff5951;
        font-size: 32rpx;
      }
    }

    p:last-child {
      margin-bottom: 0;
    }
  }
}

.top {
  position: fixed;
  right: 30px;
  bottom: 100px;
  z-index: 100;

  image {
    width: 100rpx;
    height: 100rpx;
  }
}
	.tab-box {
		font-size: 30rpx;
		line-height: 80rpx;
		background-color: #ffffff;
		width: 100vw;
		z-index: 2;
		margin-top: -10rpx;		
	}
</style>