TraceabilityAPP/pages/landDetail/index.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" style="position: relative;">
				<u--image :src="videoCover" width="100%" height="500rpx" @click="goLive" v-if="videoUrl"></u--image>
				<u--image :src="u('K')" v-else 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'></landInfo>




			<view class="add-thing" @click="addshowPicke">
				新增种植
			</view>


			<view class="">
				<view class="tit">
					种植信息
				</view>
				<view class="" v-if="dataList.length>0">

					<view class="thing-card" v-for="(item,index) in dataList" :key="index">
						<!-- <view class="head">
							<view class="">
								种植
							</view>
							<view class="" @click="navtoForm(item,i)">
								农事查看
							</view>
						</view> -->

						<view class="card_body">
							<view class="left" v-if='item.pic.length>0  && !item.showCode'>
								<u--image @click="perviewFn(item.pic)" radius='10' :src="item.pic[0]" width="200rpx"
									height="200rpx"></u--image>
							</view>
							<view class="left" v-else>
								<u--image @click="perviewFn1(item.qr_code)" radius='10' :src="item.qr_code"
									width="200rpx" height="200rpx"></u--image>
							</view>

							<u--image @click="navtoForm(item,i)" src="/static/main/index/xyj.png" class="next"
								width="38rpx" height="38rpx"></u--image>

							<view class="right" style="color: #7B7B7B;" @click="navtoForm(item,i)">
								<view class="">
									<text style="color: black;">种植种类:</text> {{item.kind}}
								</view>
								<!-- <view class="">
									种植品牌: {{item.breed}}
								</view> -->
								<view class="">
									<text style="color: black;">种植面积:</text> {{item.area}}亩
								</view>
								<view class="te">
									<text style="color: black;white-space: nowrap;">参与人员:</text> {{item.user}}
								</view>
								<view class="">
									<text style="color: black;">种植日期:</text> {{item.plant_date}}
								</view>
								<view class="" style="display: flex;justify-content: space-between;">
									<view class="te">
										<text style="color: black; white-space: nowrap; margin-top: 10rpx;">备注:</text>
										{{item.remark}}
									</view>
									<view class="" v-if="item.status==2">
										<view class="code-btn" @click.stop="showCodeFn(index)"
											:class="{actBtn:item.showCode}"> 溯源码</view>
										<!-- <u--image @click="perviewFn1(item.qr_code)" radius='10' :src="item.qr_code"
											width="200rpx" height="200rpx" style="margin-top: 10rpx;"></u--image> -->

									</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>
</template>

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

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

	import {
		onLoad,
		onShow
	} from "@dcloudio/uni-app"
	const videoUrl = ref('')

	const goLive = () => {
		uni.navigateTo({
			url: `/pages/live/live?url=${videoUrl.value }&user=${userInfo.value.master_phone}&device=${userInfo.value.device_id} `
		})
	}
	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 dataList = reactive([])
	const dataList1 = reactive([])
	const dataobj = reactive({})
	const typeID = ref('')

	const columns = reactive([
		[{
			label: '种植',
			route: "/pages/husbandryForm/sow"
		}, {
			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"
		}]
	]);
	const userInfo = ref("")
	const videoCover = ref("")
	onLoad((option) => {
		typeID.value = option.id;
		lindexist({
			land_id: option.id
		}).then(res => {
			userInfo.value = res.data
			videoUrl.value = res.data.video_url
			videoCover.value = userInfo.value.video_cover || "/static/main/index/videoCover.png"
			console.log(userInfo.value, 25545)
			// console.log(userInfo.value)
		})


	});

	// const goLive = () => {

	// }

	onShow(() => {

		getlist();
		getlist1();

	})

	const getlist1 = () => {
		landdetail({
			land_id: typeID.value
		}).then((res) => {

			if (res.code == 1) {
				if (res.data.user_id == 23) {
					// videoUrl.value =
					// 	'http://rtsp.lihaink.cn/live/lihai_lot_walnutpi_dev_4.live.mp4?secret=YwDtp2llj80HA19JhMXL4Po99nsMAyNT'
				}
				console.log(videoUrl.value)
				// videoUrl.value=res.data.
				Object.assign(dataobj, res.data);


			}
		});
	};


	const getlist = () => {
		plantlist({
			land_id: typeID.value
		}).then((res) => {

			if (res.code == 1) {
				dataList.splice(0, dataList.length, ...res.data);
				dataList.forEach(item => {
					item.showCode = false
				})
			}
		});
	};

	//新增种植
	const addshowPicke = () => {
		uni.navigateTo({
			url: '/pages/husbandryForm/sow?id=' + typeID.value
		})
	}

	//跳转

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

		uni.navigateTo({
			url: '/pages/landDetail/tudi?data=' + item.id
		})


		// }
	}


	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 perviewFn1 = (url) => {

		uni.previewImage({
			urls: [url]
		})
	}

	let img = ''
	let codeImg = ''
	const showCodeFn = (i) => {
		// dataList[i].showCode != dataList[i].showCode
		dataList[i].showCode = !dataList[i].showCode
		console.log(dataList[i].showCode)



	}
	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 {

			height: 90rpx;
			border-radius: 42.06rpx 42.06rpx 42.06rpx 42.06rpx;
			margin: 20rpx auto;
			line-height: 90rpx;
			text-align: center;
			color: white;
			background-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;
			position: relative;

			.next {
				position: absolute;
				top: 50%;
				transform: translateY(-50%);
				right: 20rpx;
			}

			// justify-content: space-between;

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

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


	.code-btn {
		border: 1px solid $theme-main-color;
		border-radius: 30rpx;
		padding: 3rpx 20rpx;
		color: $theme-main-color;
		position: absolute;
		right: 20rpx;
	}

	.actBtn {
		background: linear-gradient(to right, #FEFFFF 0%, #E8FAF2 100%);
	}
</style>