<template>
	<view class="content">
		<view style="height: var(--status-bar-height)"></view>

		<view class="" style="display: flex;align-items: center;font-size: 33.29rpx;margin-bottom: 20rpx;">
			<u--image @tap="backFn" src="/static/img/FH.png" width="50.82rpx" height="50.82rpx" alt=""></u--image>
			<text>生态概况</text>
		</view>
		<view class="head-img">
			<view class="">
				<u--image src="/static/img/YX.jpg" width="693.93rpx" height=" 394.28rpx" alt=""></u--image>
			</view>
			<!-- <u--image :showLoading="true" :src="src" width="80px" height="80px" @click="click"></u--image> -->
			<view class="poisition">
				<view style="display: flex;">
					<u--image src="/static/img/dw.png" style="margin: 0 5rpx;" width="35.05rpx"
						height="35.05rpx"></u--image>
					牟咀村西南294米
				</view>
			</view>
		</view>
		<view class="bad-info">
			<view class="tit" @tap="test">
				异常信息 （1）
			</view>
			<view class="bad-info-cont">
				<!-- <img :src="urlFn('badinfo')" :style="img(80,80,21)" alt=""> -->
				<u--image :src="urlFn('GG')" style="margin: 0 21rpx;" width="80rpx" height="80rpx"></u--image>
				<view class="">
					<view class="">
						池内溶氧量过高
					</view>
					<view class="" style="color: #FF473E;font-size: 22.78rpx;margin-top: 5rpx;">
						高于预警值1mg/l
					</view>
				</view>
			</view>
		</view>

		<view class="data">
			<view class="tit">
				<view class="data-alanys" @tap="navto">
					<!-- <img :src="urlFn('sjfx')" :style="img(191,63,0)" alt=""> -->
					<u--image :src="urlFn('sjfx')" style="margin: 0 5rpx;" width="191rpx" height="63rpx"></u--image>
				</view>
				<view class="">
					环境数据
				</view>
				<view class="tit-b">
					<!-- <img :src="urlFn('sj')" :style="img(28.04,28.04,5)" alt=""> -->
					<u--image :src="urlFn('sj')" style="margin: 0 5rpx;" width="28.04rpx" height="28.04rpx"></u--image>
					<text>刷新时间:2023-10-15</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?'#FF473E':''}">
								<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('SG')" style="margin: 0 5rpx;" width="31.54rpx" height="31.54rpx">
								</u--image>
								<text style="color: #FF473E;">1</text>
							</view>
						</view>
					</view>

				</view>
			</view>

		</view>

		<view class="data">
			<view class="tit">
				<view class="">
					设备状态
				</view>
			</view>
			<view class="data-cont">
				<view class="data-cont-li center" v-for="item in data2">
					<view style="margin:0 20rpx">
						<view class="center">
							{{item.cont}}
						</view>
						<view class="">
							<text style="font-size: 70.09rpx;color: #4CC593;">开</text>
							<text style="margin-left: 20rpx;font-size: 26.29rpx;">({{item.cont2}})</text>
						</view>
					</view>

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

	</view>
</template>

<script>
	import {
		companyMine
	} from "@/api/test.js"
	export default {
		data() {
			return {
				data: [{
						tit: "池塘温度",
						icon: 'CTWD',
						dw: "℃",
						cont: "pond_temperature",
						// flag: true
					}, {
						tit: "池塘PH",
						icon: 'CTPH',
						dw: "",
						cont: "pond_ph_value",
					}, {
						tit: "溶氧量",
						icon: 'RYL',
						dw: "mg/L",
						cont: "dissolved_oxygen",
						flag: true
					}, {
						tit: "氨氮量",
						icon: 'ADL',
						dw: "mg/L",
						cont: "ammonia_nitrogen_content",
					}, {
						tit: "亚硝酸盐",
						icon: 'YXSY',
						dw: "mg/L",
						cont: "nitrite_content",
					}

				],
				baseData: {},
				data2: [{
					cont: "溶氧仪设备",
					cont2: "3个小时/次",
				}, {
					cont: "水质检测仪",
					cont2: "1天/次",
				}, ]
			}
		},
		onLoad() {
			companyMine({
				id: 4,
				flag: 1
			}).then(res => {
				this.baseData = res.data
				// console.log(res)
			})
		},
		methods: {
			backFn() {
				uni.navigateBack()
			},
			test() {
				companyMine()
			},
			urlFn(name) {
				return `/static/img/${name}.png`
			},
			img(w, h, m) {
				return `width:${w}rpx;height:${h};margin:0 ${m}rpx `
			},
			navto() {
				uni.navigateTo({
					url: '/pages/index2/yx'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		padding: 30rpx;
		// background-color: grey;
		background-image: url("/static/img/bgc.png");
		background-size: cover;
	}

	.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 {
		margin: 20rpx 0;
		width: 693.93rpx;

		.tit {
			margin: 20rpx 0;


		}



		.bad-info-cont {
			background-color: white;
			display: flex;
			// padding: 20rpx;
			height: 140.19rpx;
			border-radius: 21.03rpx 21.03rpx 21.03rpx 21.03rpx;
			align-items: 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;
	}
</style>