TraceabilityAPP/components/index/chick.vue

<template>
	<view class="content">
		<view class="card">
			<view class="tit">
				<view class="">
					农户名称: 1号土地
				</view>
			</view>
			<view class="card-li">
				<view class="">
					种养殖类型: 土豆
				</view>
				<view class="">
					养殖头数: 的划分等级
				</view>
			</view>
			<view class="card-li">
				<view class="">
					土地面积: 20亩
				</view>
				<view class="">
					公鸡: 的划分等级
				</view>
			</view>
			<view class="card-li">
				<view class="">
					养殖种类: 20亩
				</view>
				<view class="">
					母鸡: 的划分等级
				</view>
			</view>
			<view class="card-li">
				<view class="">
					具体种类: 20亩
				</view>
				<view class="">
					幼崽: 的划分等级
				</view>
			</view>
		</view>
		<view class="circumstance">
			<view class="card-tit">
				<view class="">
					养殖情况
				</view>
				<view class="updata-btn">
					更新养殖情况
				</view>

			</view>
			<view class="card" v-for="item in [1,1,1,]">
				<view class="tit">
					<view class="">
						编号: 56565
					</view>
					<view class="" style="color: #00A15E;">
						健康
					</view>
				</view>
				<view class="card-li">
					<view class="">
						养殖类型: 土豆
					</view>
					<view class="">
						年龄: 2年
					</view>
					<view class="">
						体重: 100kg
					</view>
				</view>



			</view>
			<view class="check" @click="navgo('/pages/feedIng/feedList')">
				查看全部养殖动物<u--image src="/static/img/CKGD.png" style="margin-left: 5rpx;" width="31.54rpx"
					height="31.54rpx"></u--image>
			</view>
		</view>
		<view class="circumstance">
			<view class="card-tit">
				<view class="">
					饲养记录
				</view>
				<view class="updata-btn">
					更新饲养记录
				</view>
			</view>

			<myTable tit='查看历史清点记录'></myTable>

		</view>
		<view class="circumstance">
			<view class="card-tit">
				<view class="">
					副产品记录
				</view>
				<view class="updata-btn" style="width: 300rpx;">
					更新副产品记录
				</view>
			</view>
			<myTable tit='查看历史消毒记录'></myTable>

		</view>
		<view class="circumstance">
			<view class="card-tit">
				<view class="">
					消毒情况
				</view>
				<view class="updata-btn">
					更新消毒情况
				</view>
			</view>
			<myTable tit='查看历史消毒记录'></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>
				<view class="tit-b">
					<u--image :src="urlFn('sj')" style="margin: 0 5rpx;" width="28.04rpx" height="28.04rpx"></u--image>
					<text>刷新时间: 2022-3-3</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">
							<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>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive
	} from "vue"
	import myTable from "@/components/myTable/index.vue"
	const data = reactive([{
			tit: "环境温度",
			icon: 'TRWD',
			dw: "℃",
			cont: 'soil_temperature',
			flag: false,

		}, {
			tit: "环境湿度",
			icon: 'TRSD',
			dw: "%RH",
			cont: 'soil_moisture',
		}, {
			tit: "氧气浓度",
			icon: 'FX',
			cont: 'wind_direction',
		}, {
			tit: "二氧化碳含量",
			icon: 'FS',
			dw: "m/s",
			cont: 'wind_speed',
		}, {
			tit: "光照强度",
			icon: 'JYL',
			dw: "mm",
			cont: 'rainfall',
		}, {
			tit: "大气压强",
			icon: 'GZ',
			dw: "Wlux",
			cont: 'illumination',
		}, {
			tit: "有害气体",
			icon: 'EYHT',
			dw: "ppm",
			cont: 'carbon_dioxide_content',
		},

	])

	const data2 = reactive([{
		cont: "气象多要素百叶箱",
		cont2: "1天/1次",
	}, {
		cont: "多功能控制器",
		cont2: "3个小时/次",
	}, ])
	const baseData = reactive({
		"id": 27,
		"production_base_id": 1,
		"soil_temperature": 20,
		"soil_moisture": 50,
		"room_temperature": 0,
		"air_humidity": 0,
		"air_quality_index": 0,
		"pond_temperature": 0,
		"pond_ph_value": 0,
		"wind_direction": "北",
		"wind_speed": 3.4,
		"illumination": 2,
		"rainfall": 20,
		"carbon_dioxide_content": 450,
		"nitrogen_content": 0,
		"methane_content": 0,
		"ammonia_nitrogen_content": 0,
		"nitrite_content": 0,
		"dissolved_oxygen": 0,
		"temperature_threshold": 0,
		"humidity_threshold": 0,
		"flag": 1
	})
	const urlFn = (name) => {
		return `/static/img/${name}.png`
	}
	const img = (w, h, m) => {
		return `width:${w}rpx;height:${h};margin:0 ${m}rpx `
	}
	const navgo = (url) => {
		uni.navigateTo({
			url
		})
	}
</script>

<style lang="scss" scoped>
	.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;
		}
	}

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

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