MingGaoApp_vue/MingGaoApp/pages/my/monitorlogdata.vue

<template>
	<view class="" style="background-color: #fff;">
		<view class="" style="width: 100%;height: 40rpx;background-color: #f7f7f7;">
			
		</view>
		<view class="wearthbox">
			<view class="wearthbox_item">
				<view class="wearthbox_item_l">
					温度
				</view>
				<view class="wearthbox_item_r">
					{{datainfo.temperature}}
				</view>
			</view>
			<view class="wearthbox_item">
				<view class="wearthbox_item_l">
					天气
				</view>
				<view class="wearthbox_item_r">
					{{datainfo.weather}}
				</view>
			</view>
			<view class="wearthbox_item">
				<view class="wearthbox_item_l">
					日期
				</view>
				<view class="wearthbox_item_r">
					{{datainfo.monitor_time}}
				</view>
			</view>
			<view class="wearthbox_item">
				<view class="wearthbox_item_l">
					地址
				</view>
				<view class="wearthbox_item_r">
					{{datainfo.address}}
				</view>
			</view>
			<view class="title_box">
				监测内容
			</view>
			<view class="task_box" v-for="item,index in baselist" :key="index" @click="examine(item.img_list)">
				<view class="task_box_left">
					<view class="task_box_left_f">
						{{item.title}}
					</view>
					<view class="task_box_left_t">
						{{item.img_list.length}}张图片
					</view>
				</view>
				<view class="task_box_con">
					<view class="task_box_con_f">
						{{item.create_time}}
					</view>
					<view class="task_box_con_t">
						{{item.message}}
					</view>
				</view>
			</view>
		</view>
		<u-loading-page loading-text="加载中..." :loading="loading" font-size="16"></u-loading-page>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				datainfo: {},
				baselist: [],
				loading:false
			}
		},
		methods: {
			async getdatalist(id) {
				this.loading = true
				const res = await this.$myRequest({
					url: '/api/api_gateway?method=control_center.task.monitor_log_info',
					data: {
						record_id: id
					}
				})
				console.log(res)
				this.datainfo = res.monitor_info
				this.baselist = res.page_list
				for(var i = 0; i < this.baselist.length; i++){
					this.baselist[i].img_list = JSON.parse(this.baselist[i].img_list) || []
				}
				this.loading = false
			},
			examine(item) {
				var imgarr = []
				for (var i = 0; i < item.length; i++) {
					imgarr.push(this.baseUrl + item[i])
				}
				if(imgarr.length!=0){
					uni.previewImage({
						urls: imgarr,
						current: 0
					});
				}else{
					uni.$u.toast('暂无图片!')
				}
				
			},
		},
		onLoad(option) {
			this.getdatalist(option.id)
		}
	}
</script>

<style lang="less" scoped>
	page{
		background-color: #f7f7f7;
	}
	
	.wearthbox {
		width: 90%;
		margin: 0 auto;
		padding-bottom: 40rpx;
		.wearthbox_item {
			display: flex;
			justify-content: space-between;
			border-bottom: 1px solid #F6F6F6;
			margin-bottom: 20rpx;
			padding: 20rpx 0;

			.wearthbox_item_r {
				color: #999999;
			}
		}

		.title_box {
			width: 100%;
			display: flex;
			justify-content: space-between;
			margin-top: 30rpx;
			margin-bottom: 30rpx;
			font-weight: 700;
		}

		.task_box {
			padding: 20rpx 10rpx;
			border-top: 1px solid #dadbde;
			border-bottom: 1px solid #dadbde;
			.task_box_left {
				display: flex;
				justify-content: space-between;
				margin-bottom: 20rpx;

				.task_box_left_f {
					font-weight: 700;
					font-size: 28rpx;
				}

				.task_box_left_t {
					color: #999999;
					font-size: 24rpx;
				}
			}

			.task_box_con {
				font-size: 28rpx;
				.task_box_con_f{
					margin-bottom: 10rpx;
				}
				.task_box_con_t{
					text-overflow: -o-ellipsis-lastline;
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-line-clamp: 2;
					line-clamp: 2;
					-webkit-box-orient: vertical;
				}
				
			}
		}
	}
</style>