TraceabilityAPP/pages/landDetail/tudi.vue

<template>
	<view class="box">
		<view class="content">
			<view class="" style="display: flex;justify-content: space-between;">
				<view class="tit">
					苗情监测数据
				</view>
				<view class="" style="display: flex;align-items: center;">
					<u-icon name="clock" style="margin-right: 10rpx;"></u-icon>
					<text style="color: #ACACAC;font-size: 20rpx;">刷新时间: {{getNowTimeFn()}} </text>
				</view>
			</view>
			<view class="video" @click="navto('/pages/live/live')">
				<!-- <u--image src="https://ceshi-worker-task.lihaink.cn/uploads/images/20231223/20231223092144475437017.png"
					width="100%" height="300rpx" @click="goLive" v-if="videoUrl"></u--image> -->
				<!-- <u--image src="/static/main/index/k.png" width="100%" height="510rpx"></u--image> -->
				<u--image :src="u('K')" width="100%" height="510rpx"></u--image>
				<!-- <view class=""
					style="width: 100%;height: 100%;background-color: rgba(0, 0, 0, .5);position: absolute;top: 1px;"
					@click="goLive" v-if="videoUrl">
					<u-icon name="play-circle" size="40" color="white" v-if="videoUrl"
						style="position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);"></u-icon>
				</view> -->
			</view>
			<landInfo :info='dataobj' :isDetail='true'></landInfo>


			<view class="">
				<view class="tit">
					操作信息
				</view>
				<view class="" v-if="dataList1.length>0">
					<view class="thing-card" v-for="(item,index) in dataList1" :key="index"
						@click="navtoForm(item,item.type)">
						<!-- <view class="head">
							<view class="">
								{{item.type_text}}
							</view>
							<view class="" @click="navtoForm(item,item.type)">
								农事查看
							
							</view>
						</view> -->

						<view class="card_body">
							<view class="left" style="position: relative;">
								<u--image @click="perviewFn(item.detail.pic)" radius='10' :src="item.detail.pic[0]"
									width="200rpx" height="200rpx"></u--image>



								<view class="stick-img" style="background-color: red;">
									<!-- dsf -->
									<u--image :src="stickImgFn(item.type)" class="stick-img" width="100rpx"
										height="100rpx"></u--image>

								</view>




							</view>
							<view class="right" style="color:#7B7B7B ;">
								<view class="" v-if="item.type !=5">
									<text style="color: black;">{{actionTypeFn(item.type)}}: </text>
									<text
										v-if="item.type==3">{{item.detail.type==1?"喷灌":item.detail.type==2?"滴灌":"沟灌"}}</text>
									<text v-else>{{item.detail.kind}}</text>
								</view>
								<view class="">
									<text style="color: black;">参与人员</text>：{{item.detail.user}}
									<view class="" v-if='item.type==5'>
										<text style="color: black;">收获日期:</text> {{item.update_time.slice(0,10)}}
									</view>
								</view>
								<view class="" v-if="item.type !=5">
									<view class="">
										<text style="color: black;">开始日期</text>：{{item.detail.start_date}}
									</view>
									<view class="">
										<text style="color: black;">结束日期</text>：{{item.detail.end_date}}
									</view>
								</view>
								<view class="te">
									<text style="color: black;white-space: nowrap;">备注</text>：{{item.detail.remark}}
								</view>






								<!-- <view class="" v-if="item.type==5">
									<view class="">
										参与人: {{item.detail.user}}
									</view>
									<view class="">
										参与人: {{item.detail.user}}
									</view>
									<view class="">
										备注: {{item.detail.remark}}
									</view>
								</view>
								<view class="" v-else>
									<view class="" v-if="!item.detail.type">
										<view class="">
											{{item.type_text.slice(0, -2)}}<text class=""
												v-if="item.type==2||item.type==4">剂</text>种类: {{item.detail.kind}}
										</view>

										<view class="">
											{{item.type_text.slice(0, -2)}}<text class=""
												v-if="item.type==2||item.type==4">剂</text>品牌: {{item.detail.breed}}
										</view>


										<view class="" v-if='item.detail.dosage'>
											{{item.type_text.slice(0, -2)}}<text class=""
												v-if="item.type==2||item.type==4">剂</text>用量: {{item.detail.dosage}}

											<text v-if='item.type==4'>升</text>
											<text v-if='item.type!=4&&item.type!=5'>斤</text>
										</view>
										<view class="">
											{{item.type_text.slice(0, -2)}}面积: {{item.detail.area}}亩
										</view>
									</view>

									<view class="" v-if="item.type==3">

										{{item.type_text.slice(0, -2)}}方式:
										{{item.detail.type==1?"喷灌":item.detail.type==2?"滴灌":"沟灌"}}
									</view>
									<view class="">
										参与人: {{item.detail.user}}
									</view>

									<view class="" v-if="item.detail.start_date">
										开始日期: {{item.detail.start_date}}
									</view>
									<view class="" v-if="item.detail.end_date">
										结束日期: {{item.detail.end_date}}
									</view>
									<view class="" v-if="item.detail.remark">
										备注: {{item.detail.remark}}
									</view>
								</view> -->




							</view>
						</view>
					</view>


				</view>
				<view class="coneng-detail" v-else>
					<view class="">
						<image src="@/static/img/zw.png" mode="aspectFit"></image>
						<view class="">
							暂无数据
						</view>
					</view>
				</view>


			</view>


		</view>
		<!-- 组件 -->
		<view class="">
			<u-picker keyName="label" :show="showPicker" @cancel="showPicker=false" @confirm="confirm"
				:columns="columns"></u-picker>
		</view>

	</view>
</template>

<script setup>
	import landInfo from "@/components/plant/landInfo.vue"
	import {
		ref,
		reactive
	} from "vue"

	import {
		plantlist,
		plantdetail,
		actionlist,
		landdetail
	} from '@/api/api.js'

	import {
		onLoad,
		onShow
	} from "@dcloudio/uni-app"
	const list = reactive([{

			id: 1,
			url: 'https://ceshi-worker-task.lihaink.cn//uploads//images//20231121//202311211336582b7920656.jpg',


		},
		{

			id: 1,
			url: 'https://ceshi-worker-task.lihaink.cn//uploads//images//20231121//202311211336582b7920656.jpg',


		},
		{

			id: 1,
			url: 'https://ceshi-worker-task.lihaink.cn//uploads//images//20231121//202311211336582b7920656.jpg',


		},
		{

			id: 1,
			url: 'https://ceshi-worker-task.lihaink.cn//uploads//images//20231121//202311211336582b7920656.jpg',


		},
	])

	const dataList1 = reactive([])
	const dataobj = reactive({})
	const typeID = ref('')
	const showPicker = ref(false)
	const palnttype = ref(true)
	const columns = reactive([
		[{
			label: '施肥',
			route: "/pages/husbandryForm/fertilize"
		}, {
			label: '除草',
			route: "/pages/husbandryForm/weeding"
		}, {
			label: '灌溉',
			route: "/pages/husbandryForm/irrigate"
		}, {
			label: '除虫',
			route: "/pages/husbandryForm/Pest"
		}, {
			label: '收获',
			route: "/pages/husbandryForm/harvest"
		}]
	]);

	onLoad((query) => {
		let data = query.data
		// console.log(data); // 输出：{ name: 'John', age: 25 }
		// Object.assign(dataobj, data);
		typeID.value = query.data;
		// getlist1()
		// getlist2();
	});
	onShow(() => {

		getlist3();
		getlist2();

	})
	const getlist1 = (id, a, b, c, e) => {
		landdetail({
			land_id: id
		}).then((res) => {

			if (res.code == 1) {
				res.data.kind = a
				res.data.datapic = b
				res.data.kindarea = c
				res.data.breed = e
				Object.assign(dataobj, res.data);


			}
		});
	};
	const getlist3 = () => {
		plantdetail({
			plant_id: typeID.value
		}).then((res) => {
			if (res.code == 1) {
				if (res.data.status == 2) {
					palnttype.value = false
				}
				getlist1(res.data.land_id, res.data.kind, res.data.pic, res.data.area, res.data.breed)
			}
		});
	};

	const getlist2 = () => {
		actionlist({
			plant_id: typeID.value
		}).then((res) => {
			if (res.code == 1) {
				dataList1.splice(0, dataList1.length, ...res.data);
			}
		});
	};

	const navto = (url) => {
		uni.navigateTo({
			url
		})
	}
	const navtoForm = (item, type) => {

		uni.navigateTo({
			url: '/pages/husbandryForm/detail?land_id=' + dataobj.id + "&plant_id=" + typeID.value + "&type=" +
				type
		})
		// console.log(item, type)
		// switch (type) {

		// 	// 施肥
		// 	case 1:

		// 		uni.navigateTo({
		// 			url: '/pages/husbandryForm/fertilize?task=' + encodeURIComponent(JSON.stringify(item))
		// 		})
		// 		break;
		// 		// 除草
		// 	case 2:
		// 		uni.navigateTo({
		// 			url: '/pages/husbandryForm/weeding?task=' + encodeURIComponent(JSON.stringify(item))
		// 		})
		// 		break;

		// 		// 灌溉
		// 	case 3:
		// 		uni.navigateTo({
		// 			url: '/pages/husbandryForm/irrigate?task=' + encodeURIComponent(JSON.stringify(item))
		// 		})

		// 		break;
		// 		// 除虫
		// 	case 4:
		// 		uni.navigateTo({
		// 			url: '/pages/husbandryForm/Pest?task=' + encodeURIComponent(JSON.stringify(item))
		// 		})

		// 		break;
		// 		// 收获
		// 	case 5:
		// 		uni.navigateTo({
		// 			url: '/pages/husbandryForm/harvest?task=' + encodeURIComponent(JSON.stringify(item))
		// 		})

		// 		break;
		// }
	}
	const confirm = (e) => {
		showPicker.value = false


		uni.navigateTo({
			url: e.value[0].route + '?id=' + typeID.value
		})
	}

	const getNowTimeFn = () => {
		const now = new Date();
		const hour = now.getHours();
		const minute = now.getMinutes();
		const formattedHour = hour < 10 ? '0' + hour : hour;
		const formattedMinute = minute < 10 ? '0' + minute : minute;
		const currentTime = formattedHour + ':' + formattedMinute;
		return currentTime
	}
	const perviewFn = (url) => {

		uni.previewImage({
			urls: url
		})
	}
	const actionTypeFn = (type) => {
		if (type == 3) return "喷灌方式"
		if (type == 4) return "除虫剂种类"
		if (type == 2) return "除草剂种类"
		if (type == 1) return "肥料种类"
		if (type == 5) return "收获"

	}
	const stickImgFn = (type) => {
		if (type == 3) return "/static/main/index/guan_gai.png"
		if (type == 4) return "/static/main/index/chu_chong.png"
		if (type == 2) return "/static/main/index/chu_cao.png"
		if (type == 1) return "/static/main/index/shi_fei.png"
		if (type == 5) return "/static/main/index/shou_huo.png"
	}
	const u = (name) => {
		return `/static/main/index/${name}.png`
	}
</script>

<style lang="scss" scoped>
	.box {
		width: 750rpx;
		min-height: 100vh;
		background-color: $theme-bg-color;
		padding: 0;

		.content {
			width: 693.93rpx;
			margin: auto;
			padding-top: 20rpx;
		}

		// padding: 20rpx;
		.time {
			display: flex;
			font-size: 26.29rpx;
			color: #737373;
			margin-top: 10rpx;
		}

		.video {
			width: 690rpx;
			height: 510rpx;
			box-shadow: 1rpx 1rpx 10rpx 1rpx rgba(0, 0, 0, 0.1);
			border-radius: 10rpx;
			overflow: hidden;

		}

		.add-thing {
			width: 266.36rpx;
			height: 66.59rpx;
			border-radius: 42.06rpx 42.06rpx 42.06rpx 42.06rpx;
			border: 1px solid $theme-main-color;
			margin: 20rpx auto;
			line-height: 66rpx;
			text-align: center;
			color: $theme-main-color;
		}
	}

	.coneng-detail {
		width: 478rpx;
		height: 341rpx;
		background: #FFFFFF;
		border-radius: 6px 6px 6px 6px;
		opacity: 1;
		font-size: 25rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		color: #737373;
		display: flex;
		justify-content: center;
		align-items: center;
		text-align: center;
		margin: 70rpx auto;

		image {
			width: 280rpx;
			height: 142rpx;
			margin-bottom: 20rpx;


		}
	}

	.thing-card {
		width: 693.93rpx;
		box-sizing: border-box;
		background-color: #fff;
		border-radius: 20rpx;
		overflow: hidden;
		margin-bottom: 30rpx;
		box-shadow: 1rpx 1rpx 10rpx 1rpx rgba(0, 0, 0, 0.1);

		.head {
			height: 90rpx;
			border-radius: 20rpx 20rpx 0 0;
			background-color: $theme-main-color;
			display: flex;
			justify-content: space-between;
			line-height: 90rpx;
			color: white;
			padding: 0 30rpx;
		}

		.card_body {
			padding: 20rpx;
			display: flex;

			.right {
				display: flex;
				justify-content: space-between;
				flex-direction: column;
				margin-left: 20rpx;
				font-size: 26rpx;
			}

			.stick-img {
				position: absolute;
				z-index: 9999;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
			}
		}
	}

	.tit {
		position: relative;
		padding-left: 20rpx;
		font-weight: bold;
		font-size: 28rpx;
		margin-bottom: 20rpx;
		color: #1A1A1A;
	}

	.tit::before {
		content: "";
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		left: 0;
		width: 6rpx;
		/* 左边框的宽度 */
		height: 25rpx;
		border-radius: 20rpx;
		background-color: #34D08D;
	}
</style>