<style lang='scss' scoped>
.waterLevel{
	width: 100%;
	&-header{
		width: 100%;
		/* height: 400rpx; */
		background-color: #1C9AFF;
		&-total{
			width: 270rpx;
			height: 270rpx;
			margin: 0 auto;
			position: relative;
			&-img{
				position: absolute;
				left: 0;
				top: 0;
				width: 100%;
				height: 100%;
				z-index: 1;
			}
			&-text{
				position: absolute;
				left: 0;
				top: 50%;
				width: 100%;
				transform: translateY(-50%);
				z-index: 99;
				text-align: center;
				color: #fff;
				&-number{
					font-size: 56rpx;
					font-weight: bold;
					padding-bottom: 10rpx;
				}
			}
		}
		&-info{
			padding: 30rpx $paddingLR;
			&-content{
				width: 100%;
				display: flex;
				justify-content: space-between;
				background-color: #fff;
				border-radius: 12rpx;
				padding: 20rpx 0;
			}
			&-box{
				width: 32%;
				text-align: center;
				&-info{
					width: 2rpx;
					height: 50rpx;
					background-color: #eee;
				}
			}
		}
	}
	&-nav{
		width: 100%;
		padding: $paddingTB $paddingLR;
		&-box-icon{
			width: 90rpx;
			height: 90rpx;	
			border-radius: 16rpx;
			margin-bottom: 12rpx;
		}
	}
}
</style>
<template>
	<view class="waterLevel">
		<view class="waterLevel-header">
			<view class="waterLevel-header-total">
				<u-image width="100%" height="100%" class="waterLevel-header-total-img" src="http://static.drgyen.com/app/hc-app-power/images/home/waterLevel/header-bg.png"></u-image>
				<view class="waterLevel-header-total-text">
					<view class="waterLevel-header-total-text-number">30</view>
					<view class="">水表总数</view>
				</view>
				
			</view>
			<view class="waterLevel-header-info">
				<view class="waterLevel-header-info-content">
					<view class="waterLevel-header-info-box">
						<view class="text--base--grey">设备在线</view>
						<view class="text--base--main">48</view>
					</view>
					<view class="waterLevel-header-info-box-line"></view>
					<view class="waterLevel-header-info-box">
						<view class="text--base--grey">设备离线</view>
						<view class="text--base--grey">20</view>
					</view>
					<view class="waterLevel-header-info-box-line"></view>
					<view class="waterLevel-header-info-box">
						<view class="text--base--grey">今日报警数</view>
						<view class="text--base--alarm">0</view>
					</view>
				</view>
			</view>
		</view>
		<view class="waterLevel-nav">
			<u-grid :col="4" :border="false">
				<u-grid-item v-for="(item,index) in navList" :key="index" @click="goNavBoxFn(item.url)">
					<view class="waterLevel-nav-box-icon flex-center" :style="{backgroundColor:item.bgColor}">
						<tuiIcon :name="item.icon" size="62" color="#fff"></tuiIcon>
					</view>
					<view class="grid-text">{{item.name}}</view>
				</u-grid-item>
			</u-grid>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				navList:[{
					icon:"shuibiao",
					name:"设备",
					bgColor:"#7AC2FE",
					url:"./device"
				},{
					icon:"changsuoguanli",
					name:"场所管理",
					bgColor:"#28C4B9",
					url:"./placeManage"
				},{
					icon:"jingbao",
					name:"告警中心",
					bgColor:"#FE5E5F",
					url:"./alarmCenter"
				},{
					icon:"chaoqishuibiao",
					name:"实时数据",
					bgColor:"#7284DE",
					url:"./realTime"
				}]
			}
		},
		onLoad() {},
		methods: {
			goNavBoxFn(url){
				uni.navigateTo({
					url:url
				})
			}
		}
	}
</script>
