TraceabilityAPP/pages/detail/plant.vue

<template>
	<view class="content">
		<imgCard :imgUrl='landDeatil.pic' text='地址'></imgCard>
		<view class="bad-info">
			<view class="" style="display: flex;align-items: center;">
				<u--image :src="urlFn('sj')" style="margin: 0 5rpx;" width="28.04rpx" height="28.04rpx"></u--image>
				<text>刷新时间:{{dateFn()}}</text>
			</view>
			<view style="display: flex;"
				@click="navgo(`/pages/allPlant/index?crop_id=${landDeatil.crop_id}&land_id=${landDeatil.land_id}`)">
				查看历史记录 <u--image src="/static/img/CKGD.png" style="margin-left: 5rpx;" width="31.54rpx"
					height="31.54rpx"></u--image>
			</view>
		</view>
		<view class="up-plant-btn" @click="updateImgFn">
			上传新的种植情况
			<!-- {{crop_id}} -->
		</view>
		<landInfo :land_id='landDeatil.land_id' @getcropid='getcropidFn'></landInfo>
		<view class="circumstance" v-for="(item,index) in tableDate" :key="index">
			<!-- {{index}} -->
			<!-- {{tableDate}}
			dsfdsf -->
			<view class="card-tit">
				<view class="">
					{{index}}
				</view>
				<view class="updata-btn"
					@click="navgo(`/pages/growRecord/index?type=1&crop_id=${crop_id}&land_id=${landDeatil.land_id}&title=${index}`)">
					更新{{index.slice(0,-2)}}
				</view>
			</view>
			<!-- {{item.action_record}} -->
			<myTable :tit='`查看${index.slice(0,-2)}`' :dataList="item.action_record"
				:route='`/pages/records/index?land_id=${landDeatil.land_id}&crop_id=${crop_id}&index=${index}`'>
			</myTable>
		</view>

		<view class="data">
			<view class="tit">
				<view class="" style="display: flex;justify-content: space-between;font-size: 29.79rpx;">
					<view class="">
						土地监测数据
					</view>
					<view style="display: flex;align-items: center;" @click="navgo('/pages/profile/index')">
						查看全部检测记录 <u--image src="/static/img/CKGD.png" style="margin-left: 5rpx;" width="31.54rpx"
							height="31.54rpx"></u--image>
					</view>
				</view>
				<view class="tit-b">
					<u--image :src="urlFn('sj')" style="margin: 0 5rpx;" width="28.04rpx" height="28.04rpx"></u--image>
					<text>刷新时间:{{dateFn()}}</text>
				</view>
			</view>

			<view class="data-cont">
				<view class="data-cont-li center" v-for="(item,index) in data " :key="index">
					<view style="margin:0 20rpx">
						<view class="center">
							<!-- <img :src="urlFn('B')" :style="img(38.55,38.55,5)" alt=""> -->
							<u--image :src="urlFn(item.icon)" style="margin: 0 5rpx;" width="38.55rpx"
								height="38.54rpx"></u--image>
							{{item.tit}}
						</view>
						<view class="b-cls">
							<view class="" :style="{color:item.flag?'#0095FF':''}">
								<text style=" font-size: 70.09rpx;">
									{{baseData[item.cont]}}
								</text>{{item.dw}}
							</view>
							<view class="" style="display: flex;align-items: center;" v-if="item.flag">
								<u--image :src="urlFn('D')" style="margin: 0 5rpx;" width="31.54rpx" height="31.54rpx">
								</u--image>
								<text style="color: #0095FF;">5</text>
							</view>
						</view>
					</view>

				</view>
			</view>

		</view>


		<!-- {{landDeatil.ripe_time}} -->
		<view class="ripe-btn" v-if="landDeatil.ripe_time" @click="allripeFn">
			标记为全部收获
		</view>
		<view class="ripe-btn" v-else @click="showPop=true">
			标记为成熟
		</view>
		<!-- 组件 -->
		<!-- navgo('/pages/index/index' -->
		<u-popup :show="showPop" :round="20" mode="bottom" @close="showPop=false" @open="showPop=true">
			<view class="mark">
				<view class="head">
					<view class="">
						农作物成熟标记
					</view>
					<view class="" @tap="showPop=false">
						<u--image :src="urlFn('GBAN')" style="margin: 0 5rpx;" width="49.07rpx" height="49.07rpx">
						</u--image>
					</view>
				</view>
				<view class="mark-li">
					<view class="">
						种植类型:
					</view>
					<view class="">
						{{landDeatil.crop_name}}
					</view>
				</view>
				<view class="mark-li">
					<view class="">
						种植品牌:
					</view>
					<view class="">
						{{landDeatil.crop_brand}}
					</view>
				</view>
				<view class="mark-li">
					<view class="">
						本期溯源码:
					</view>
					<view class="">
						{{landDeatil.source_code}}
					</view>
				</view>
				<view class="mark-li">
					<view class="">
						成熟日期:
					</view>
					<view class="">
						{{dateFn()}}
					</view>
				</view>
				<view class="mark-li" style="display: block;border: 0;">
					<view class="">
						预计产量:
					</view>
					<view class="" style="margin-top: 20rpx;">
						<up-input placeholder="请输入内容" border="surround" v-model="crop_yield"></up-input>
					</view>
				</view>
				<view class="ripe-btn" @tap="markFn">
					确认
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script setup>
	import {
		landInfoAPI,
		addLandCropPicAPI,
		landCropRecordListAPI,
		landEnvDataCurrAPI,
		setLandCropRipeAPI,
		ediLandCropRecordAPI,
		landCropAllRipeAPI
	} from "@/api/plant.js"
	import myTable from "@/components/myTable/index.vue"
	import imgCard from "@/components/imgCard.vue"
	import uplodeImg from "@/utils/uplodeImg.js"
	import landInfo from "@/components/plant/landInfo.vue"
	import {
		actionsAPI
	} from "@/api/animal.js"
	import {
		ref,
		reactive
	} from "vue"
	import {
		onLoad,
		onShow
	} from "@dcloudio/uni-app"
	const crop_yield = ref("")
	const showPop = ref(false)
	const tableDate = reactive({})
	const landDeatil = reactive({})
	const data = reactive([{
			tit: "土壤温度",
			icon: 'TRWD',
			dw: "℃",
			cont: 'soil_temp',
			flag: false,

		}, {
			tit: "土壤湿度",
			icon: 'TRSD',
			dw: "%RH",
			cont: 'soil_mois',
		}, {
			tit: "磷含量",
			icon: 'FX',
			cont: 'k_content',
			dw: "%",
		}, {
			tit: "氮含量",
			icon: 'FS',
			dw: "mg/l",
			cont: 'n_content',
		}, {
			tit: "钾含量",
			icon: 'JYL',
			dw: "%",
			cont: 'p_content',
		},

	], )

	const baseData = reactive({})
	const crop_id = ref(0)
	const getcropidFn = (e) => {
		crop_id.value = e.cropid
	}
	onShow(async () => {
		let res = await landInfoAPI({
			user_id: 307,
			land_id: land_id.value
		})
		objFn(res.data, landDeatil)
	})
	const land_id = ref(0)
	onLoad(async (options) => {
		land_id.value = options.land_id
		let res = await landInfoAPI({
			user_id: 307,
			land_id: options.land_id
		})
		objFn(res.data, landDeatil)
		// let res2 = await landCropRecordListAPI({
		// 	crop_id: landDeatil.crop_id
		// })
		let res2 = await actionsAPI({
			type: 1,
			crop_id: landDeatil.crop_id

		})
		objFn(res2.data, tableDate)
		let res3 = await landEnvDataCurrAPI({
			user_id: 307,
		})
		objFn(res3.data, baseData)
	}, )


	const updateImgFn = () => {
		let image = ""
		uplodeImg().then(res => {
			image = res.data.image
			landDeatil.pic = image
			addLandCropPicAPI({
				crop_id: landDeatil.crop_id,
				pic: image
			}).then(res2 => {
				console.log(res2)
			})
		})
	}
	const navgo = (url) => {
		uni.navigateTo({
			url
		})
	}
	const dateFn = () => {
		var today = new Date();

		// 获取年、月、日
		var year = today.getFullYear();
		var month = today.getMonth() + 1; // 月份从0开始，需要加1
		var day = today.getDate();

		// 构建日期字符串
		var dateStr = year + '-' + month + '-' + day;
		return dateStr
		// 输出日期字符串

	}
	const backFn = () => {
		uni.navigateBack()
	}

	const urlFn = (name) => {
		return `/static/img/${name}.png`
	}
	const img = (w, h, m) => {
		return `width:${w}rpx;height:${h};margin:0 ${m}rpx `
	}

	const markFn = () => {
		setLandCropRipeAPI({
			crop_id: landDeatil.crop_id,
			crop_yield: Number(crop_yield.value)
		}).then(res => {
			showPop.value = false
		})
	}

	const objFn = (res, data) => {
		for (let key in res) {
			data[key] = res[key]
		}

	}
	const allripeFn = () => {
		landCropAllRipeAPI({
			crop_id: crop_id.value
		})
		uni.navigateTo({
			url: '/pages/index/index'
		})
	}
	// actionsAPI({
	// 	type: 1
	// }).then(res => {
	// 	for (let key in res.data) {
	// 		actionList[key] = (res.data)[key]
	// 	}
	// })
</script>

<style lang="scss" scoped>
	.content {
		padding: 30rpx;
		// background-color: grey;
		background-color: #EBF1EF;
	}

	.head-img {
		border-radius: 21.03rpx 21.03rpx 21.03rpx 21.03rpx;
		margin: 0 auto;
		position: relative;

		.poisition {
			opacity: 0.7;
			position: absolute;
			width: 380.26rpx;
			height: 71rpx;
			background-color: #FFFFFF;
			left: 43rpx;
			bottom: 36rpx;
			border-radius: 21.03rpx 21.03rpx 21.03rpx 21.03rpx;
			display: flex;
			align-items: center;
			font-size: 29.79rpx;

			.dw-cls {

				margin: 0 5rpx;
			}
		}
	}

	.bad-info {
		display: flex;
		// background-color: red;
		justify-content: space-between;
		align-items: center;
		margin: 20rpx 0;
		color: #737373;
		width: 693.93rpx;
		font-size: 26.29rpx;

		.tit-b {
			color: red;
		}


	}

	.up-plant-btn {
		width: 371.5rpx;
		height: 66.59rpx;
		color: #00A15E;
		margin: 40rpx auto;
		border: 1px solid #00A15E;
		font-weight: bold;
		border-radius: 42.06rpx 42.06rpx 42.06rpx 42.06rpx;
		display: flex;
		align-items: center;
		justify-content: center;

	}

	.data {
		.tit {
			.tit-b {
				color: #B3B3B3;
				font-size: 26.29rpx;
				display: flex;
				align-items: center;
			}
		}

		.data-alanys {
			// background-color: blue;
			float: right;
			color: white;
		}

		.data-cont {
			// margin: 20rpx;
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			margin-top: 30rpx;
			box-sizing: border-box;
			// padding: 70rpx;

			.data-cont-li {
				border-radius: 21.03rpx 21.03rpx 21.03rpx 21.03rpx;
				width: 310.94rpx;
				height: 212.03rpx;
				background-color: white;
				margin-bottom: 20rpx;
			}
		}
	}

	.center {
		display: flex;
		align-items: center;
	}

	.b-cls {
		display: flex;
		align-items: flex-end;
		width: 250rpx;
		justify-content: space-between;
		color: #4CC593;
	}

	.card {
		.tit {
			display: flex;
			justify-content: space-between;
			padding-bottom: 20rpx;
			border-bottom: 1px solid #EBF1EF;
		}

		.card-li {
			margin-top: 20rpx;
			display: flex;
			justify-content: space-between;
		}
	}


	.grow-record-tit {
		display: flex;
		justify-content: space-between;
		margin-bottom: 20rpx;
		align-items: center;
		font-size: 26.29rpx;

		.updata-btn {
			width: 192.76rpx;
			height: 57.83rpx;
			border: 1px solid #00A15E;
			color: #00A15E;
			display: flex;
			justify-content: center;
			align-items: center;
			border-radius: 31.54rpx 31.54rpx 31.54rpx 31.54rpx;
		}
	}





	.ripe-btn {
		width: 588.79rpx;
		height: 84.11rpx;
		background-color: #00A15E;
		color: white;
		display: flex;
		justify-content: center;
		align-items: center;
		margin: 0 auto;
		border-radius: 42.06rpx 42.06rpx 42.06rpx 42.06rpx;
		background: linear-gradient(to right, #00A15E, #4CC593);
	}

	.mark {
		// padding: 30rpx;
		padding: 30rpx;

		.head {
			display: flex;
			justify-content: space-between;
			align-items: center;

		}

		.mark-li {
			display: flex;
			justify-content: space-between;
			margin: 40rpx;
			border-bottom: 1px solid #EBF1EF;
			padding-bottom: 20rpx;
		}

	}

	.circumstance {
		width: 693.93rpx;
		margin: 0 auto;
		margin-bottom: 43rpx;

		.card-tit {
			display: flex;
			justify-content: space-between;
			margin-bottom: 28rpx;
		}

		.updata-btn {
			font-size: 26.29rpx;
			width: 192.76rpx;
			height: 57.83rpx;
			border: 1px solid #00A15E;
			color: #00A15E;
			display: flex;
			justify-content: center;
			align-items: center;
			border-radius: 31.54rpx 31.54rpx 31.54rpx 31.54rpx;
		}

		.check {
			font-size: 29.79rpx;
			text-align: center;
			display: flex;
			justify-content: center;
			align-items: center;
		}

		.tab {

			height: 500rpx;
			background-color: red;
		}
	}
</style>