MingGaoApp_vue/MingGaoApp/pages/my/monitorlog.vue

<template>
	<view style="background-color: #fff;">
		<view class="screen" v-if="current==1" @click="opencale">
			<u-icon name="calendar" color="#2979ff" size="24"></u-icon>
		</view>
		<view class="subsection">
			<u-subsection :list="list" :current="current" @change="sectionChange"></u-subsection>
		</view>
		<view class="weatherbox" v-if="current == 0">
			<u--form labelPosition="left" :model="weatherdatas" :rules="rules" ref="uForm">
				<u-form-item label="温度" prop="temp" ref="item1">
					<u--input v-model="weatherdatas.temp" placeholder="请填写温度" border="none"></u--input>
					℃
				</u-form-item>
				<u-form-item label="天气" prop="weather" ref="item1">
					<u--input v-model="weatherdatas.weather" placeholder="请填写天气" border="none"></u--input>
				</u-form-item>
				<u-form-item label="日期" prop="date" ref="item1" @click="caleshow">
					<u--input v-model="weatherdatas.date" disabled disabledColor="#ffffff" placeholder="请选择日期"
						border="none"></u--input>
					<u-icon slot="right" name="arrow-right"></u-icon>
				</u-form-item>
				<u-form-item label="地址" prop="city" ref="item1">
					<u--input v-model="weatherdatas.city" placeholder="请填写地址" border="none"></u--input>
				</u-form-item>
				<!-- <u-calendar v-model="tiemshow" mode="range" @change="tiemchange"></u-calendar> -->
			</u--form>
			<view class="title_box">
				<view class="">
					监测内容
				</view>
				<u-icon size="20" name="plus-circle" color="#409eff" @click="add"></u-icon>
			</view>
			<view class="task_box" v-for="item,index in tasklist" :key="index">
				<u-swipe-action>
					<u-swipe-action-item :options="options1" @click="delect(index)">
						<view class="swipe-action u-border-top u-border-bottom">
							<view class="swipe-action__content" @click="examine(item.imglist)">
								<view class="swipe-action__content__text">
									<view class="task_box_left">
										<view class="task_box_left_f">
											{{item.name}}
										</view>
										<view class="task_box_left_t">
											{{item.imglist.length}}张图片
										</view>
									</view>
									<view class="task_box_con">
										{{item.text}}
									</view>
								</view>
							</view>
						</view>
					</u-swipe-action-item>
				</u-swipe-action>
			</view>
			<u-button type="primary" text="提交" @click="submit" style="margin-top: 30rpx;" :loading="passload" shape="circle"></u-button>
		</view>
		<view class="hisbox" v-else>
			<view class="hisbox_hint" v-if="hislist.length==0">
				暂无数据
			</view>
			<view class="hisbox_item" v-for="item,index in hislist" :key="index" @click="todata(item.id)">
				<view class="task_box_left">
					<view class="task_box_left_f">
						{{item.monitor_time}}
					</view>
					<view class="task_box_left_t">
						{{item.weather}}
					</view>
				</view>
				<view class="task_box_con">
					{{item.owner_user}}
				</view>
			</view>
		</view>
		<!-- <u-calendar :show="caleshow" mode="range" @confirm="confirm"></u-calendar> -->
		<uni-calendar :insert="false" ref="calendar" @confirm="confirm" />
		<uni-calendar :insert="false" ref="calendars" :range="true" @confirm="confirms" />
		<u-loading-page loading-text="加载中..." :loading="loading" font-size="16"></u-loading-page>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: ['填写监测日志', '历史记录'],
				current: 0,
				weatherdatas: {
					temp: "",
					weather: "",
					date: "",
					city: ""
				},
				options1: [{
					text: '删除'
				}],
				rules: {
					'temp': {
						type: 'number',
						required: true,
						message: '请填写温度(数字)',
						trigger: ['blur', 'change']
					},
					'weather': {
						type: 'string',
						required: true,
						message: '请填写天气',
						trigger: ['blur', 'change']
					},
					'date': {
						type: 'string',
						required: true,
						message: '请填写日期',
						trigger: ['blur', 'change']
					},
					'city': {
						type: 'string',
						required: true,
						message: '请填写地址',
						trigger: ['blur', 'change']
					},
				},
				kpsurlL: "",
				tasklist: [],
				hislist:[],
				start_time:"",//开始时间
				end_time:"",//结束时间
				page:1,
				passload:false,
				loading:false,
			}
		},
		methods: {
			sectionChange(e) {
				this.current = e
				if (e == 1) {
					this.page = 1
					this.hislist = []
					this.gethis()
				}
			},
			add() {
				uni.navigateTo({
					url: "./addcont"
				})
			},
			delect(index) {
				// console.log(index)
				this.tasklist.splice(index, 1)
			},
			submit() {
				this.$refs.uForm.validate().then(res => {
					// console.log(this.tasklist)
					if (this.tasklist.length == 0) {
						uni.$u.toast('请添加监测内容！')
					} else {
						this.setcont()
					}
				}).catch(errors => {
					uni.$u.toast('请将信息填写完整！')
				})
			},
			confirm(e) {
				console.log(e)
				// this.caleshow = false
				this.weatherdatas.date = e.fulldate
			},
			async setcont() {
				var list = []
				for (var i = 0; i < this.tasklist.length; i++) {
					var obj = {
						title: this.tasklist[i].name, //                     监督事项
						message: this.tasklist[i].text, //                 监督日期
						img_list: this.tasklist[i].imglist, //       监督图片
					}
					list.push(obj)
				}
				this.passload = true
				const res = await this.$myRequest({
					url: '/api/api_gateway?method=app.my.app_monitor_log_add',
					data: {
						weather: this.weatherdatas.weather, //              必填                   天气
						temperature: this.weatherdatas.temp, //           必填                   温度
						address: this.weatherdatas.city, //              必填                    检测地点
						record_list: JSON.stringify(list), //          必填 
						monitor_time: this.weatherdatas
						.date, //         必填                     监督日期   2021-01-03
					}
				})
				this.passload = false
				if (res) {
					uni.$u.toast('提交成功!')
					for (var key in this.weatherdatas) {
						this.weatherdatas[key] = []
						this.tasklist = []
						uni.removeStorage({
							key: "addobj",
						})
					}
				}
			},
			examine(item) {
				var imgarr = []
				for (var i = 0; i < item.length; i++) {
					imgarr.push(this.baseUrl + item[i])
				}
				uni.previewImage({
					urls: imgarr,
					current: 0
				});
			},
			async gethis() {
				this.loading = true
				const res = await this.$myRequest({
					url: '/api/api_gateway?method=control_center.task.monitor_log_list',
					data: {
						page: this.page,
						start_time:this.start_time,
						end_time: this.end_time
					}
				})
				console.log(res.page_list)
				for(var i =0;i<res.page_list.length;i++){
					this.hislist.push(res.page_list[i])
				}
				this.loading = false
			},
			caleshow() {
				this.$refs.calendar.open();
			},
			opencale() {
				this.$refs.calendars.open();
			},
			confirms(e){
				console.log(e.range)
				this.start_time = e.range.before
				this.end_time = e.range.after
				this.hislist = []
				this.gethis()
			},
			todata(id){
				uni.navigateTo({
					url: './monitorlogdata?id='+id,
				});
			}
		},
		onLoad() {

		},
		onShow() {
			var that = this
			uni.getStorage({
				key: "addobj",
				success(res) {
					console.log(that.tasklist)
					that.tasklist.push(JSON.parse(res.data))
				}
			})
		},
		onHide() {
			uni.removeStorage({
				key: "addobj",
			})
		},
		onReachBottom() {
			this.page++
			this.gethis()
		},
		onPullDownRefresh(){
			this.hislist = []
			this.page = 1
			this.start_time="",
			this.end_time=""
			this.gethis()
			setTimeout(() => {
				uni.stopPullDownRefresh()
			}, 1000)
		},
	}
</script>

<style lang="less" scoped>
	page{
		background-color: #f7f7f7;
	}
	.screen {
		position: fixed;
		top: 20rpx;
		right: 20rpx;
		z-index: 9999;
	}
	.subsection{
		width: 100%;
		position: fixed;
		top: 88rpx;
		height: 70rpx;
		z-index: 9999;
	}
	/deep/.u-subsection {
		background-color: #f7f7f7 !important;
		// margin: 20rpx 0;
		.u-subsection__bar {
			background-color: #fff;
		}
	}

	.weatherbox {
		width: 90%;
		margin: 0 auto 0;
		padding-top: 80rpx;
		padding-bottom: 40rpx;
		/deep/.u-form-item__body {
			border-bottom: 1px solid #F6F6F6;
			margin-bottom: 20rpx;
		}

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

		.task_box {
			/deep/.swipe-action__content__text {
				padding: 20rpx 0;
			}

			/deep/.u-swipe-action-item__right__button__wrapper {
				background-color: red !important;
			}

			.task_box_left {
				display: flex;
				justify-content: space-between;
				margin-bottom: 20rpx;

				.task_box_left_f {
					font-weight: 700;
				}

				.task_box_left_t {
					color: #999999;
					font-size: 24rpx;
				}
			}
			.task_box_con{
				text-overflow: -o-ellipsis-lastline;
				 overflow: hidden;
				 text-overflow: ellipsis;
				 display: -webkit-box;
				 -webkit-line-clamp: 2;
				 line-clamp: 2;
				 -webkit-box-orient: vertical;
			}
		}
	}
	.hisbox{
		width: 90%;
		margin: 70rpx auto 0;
		.hisbox_hint{
			width: 100%;
			text-align: center;
			font-size: 28rpx;
			height: 100rpx;
			line-height: 100rpx;
			color: #999999;
		}
		.hisbox_item{
			box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.08);
			padding: 20rpx;
			margin-bottom: 30rpx;
			font-size: 28rpx;
			.task_box_left{
				display: flex;
				margin-bottom: 20rpx;
				justify-content: space-between;
			}
			.task_box_con{
				color: #999999;
			}
		}
		
	}
</style>