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

<template>
	<view>
		<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="imglist">
			<view class="imglist_box" v-for="(item,index) in imglists" :key="index">
				<view class="imglist_left">
					<image src="../../../../static/image/cb/jiazai.ui.gif" mode=""></image>
					<image :src="item.addr" mode=""></image>
				</view>
				<view class="imglist_right">
					<p @click="delimg(item.id)">
						<u-icon name="shanchuerp" custom-prefix="custom-icon" class="icon_left"></u-icon>删除
					</p>
					<p @click="shibie(item.id)">
						<u-icon name="eye-fill" custom-prefix="custom-icon" class="icon_left"></u-icon>识别
					</p>
					<p @click="tongji(item.id)">
						<u-icon name="mulu" custom-prefix="custom-icon" class="icon_left"></u-icon>手动统计
					</p>
					<p @click="add(item.id)">
						<u-icon name="xiezi" custom-prefix="custom-icon" class="icon_left"></u-icon>手动添加
					</p>
					<p>{{item.addtime|timeFormat()}}</p>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				page: 1,
				imglists: [],
				tishi:true
			}
		},
		methods: {
			//forecast.forecast_system.equip_photofo
			async imglistdata() { //获取图片列表
				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"
					}
				})
				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=forecast.forecast_system.equip_photo_del',
					data: {
						device_id: this.device_id,
						addrlist: id
					}
				})
			},
			//forecast.forecast_system.equip_photo_discern识别
			async discern(id) { //识别图片
				const res = await this.$myRequest({
					url: '/api/api_gateway?method=forecast.forecast_system.equip_photo_discern',
					data: {
						img_id: id,
						ret:"see"
					}
				})
			},
			//forecast.forecast_system.equip_photo_species  pest_list
			//forecast.forecast_system.equip_photo_species统计
			async species(id) { //统计
				const res = await this.$myRequest({
					url: '/api/api_gateway?method=forecast.forecast_system.equip_photo_species',
					data: {
						ret:"photo_desc",
						img_id: id
					}
				})
			},
			clickLeft() {
				uni.navigateBack({
					delta: 1
				})
			},
			delimg(id) { //删除图片
				uni.showModal({
					title: '提示',
					content: '是否删除此图片？',
					success: function(res) {
						if (res.confirm) {
							// this.del(id)
							console.log('用户点击确定');
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			shibie(id){//识别
				this.discern(id)
			},
			tongji(id){//统计
				this.species(id)
			},
			add(id){
				uni.navigateTo({
					url:"./addimg?id="+id+"&device_id"+this.device_id
				})
			}
		},
		onLoad(option) {
			this.device_id = option.device_id
			this.imglistdata()
		},
		onReachBottom(){
			this.page++
			this.imglistdata()
		}
	}
</script>

<style lang="scss">
	.tishi{
		position: absolute;
		top: 84px;
		width: 95%;
		left: 2.5%;
		text-align: center;
		font-size: 40rpx;
	}
	.imglist {
		position: absolute;
		top: 54px;
		width: 95%;
		left: 2.5%;

		.imglist_box {
			display: flex;
			box-shadow: 0 0 10rpx #bcb9ca;
			padding: 20rpx;
			margin-bottom: 20rpx;
		}

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

			p {
				margin-bottom: 24rpx;
				font-size: 24rpx;

				.icon_left {
					margin-right: 20rpx;
					color: #56C877;
					font-size: 32rpx;
				}
			}

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

		}
	}
</style>