parking_inspection/pages/index/index.vue

<template>
	<view class="wrap">
		<view class="header-wrap">
			<view class="header f-padding">
				<view class="header-item header-title">
					欢迎登录 
					<view class="message" @click="openPage('pages/center/news/news')">
						<u-icon name="bell"></u-icon>
						<u-badge type="error" class="badge" :count="newsTotal" :offset='[-10,-10]'></u-badge>
					</view>
				</view>
				<view class="header-item header-con">{{vuex_user.officerName}}</view>
			</view>
		</view>
		<view class="statistics">
			<!-- 设备状态 1-已离线 2-运行中 4-保养中 -->
			<u-row justify="center">
				<u-col span="4" text-align="center" @click="openPage('pages/equipmentList/equipmentList','')">
					<view class="count" style="color: #0074DD;">{{deviceStatisData.totalNum||'0'}}</view>
					<view class="name">总设备数</view>
				</u-col>
				<u-col span="4" text-align="center" @click="openPage('pages/equipmentList/equipmentList','1')">
					<view class="count" style="color: #f00;">{{deviceStatisData.onlineNum||'0'}}</view>
					<view class="name">正常</view>
				</u-col>
				<u-col span="4" text-align="center" @click="openPage('pages/equipmentList/equipmentList','0')">
					<view class="count" style="color: #07A68D;">{{deviceStatisData.exceptionNum||'0'}}</view>
					<view class="name">异常</view>
				</u-col>
			</u-row>
		</view>
		<view class="list-block equipment">
			<view class="list-block-til u-font-18">设备信息</view>
			<!-- <view class="list-block-con u-flex u-flex-wrap u-row-left"  v-if="deviceTypeListData.length>0">
				<view class="list-block-item" 
				 @click="openPage('pages/deviceList/deviceList',item.id)"
				 v-for="item in deviceTypeListData" :key="item.id">
					<image class="img" :src="item.deviceTypeImgUrl||''" mode="widthFix"></image>
					<view class="txt">{{item.deviceTypeName}}</view>
				</view>
			</view>
			<u-empty text="暂无内容" mode="list" v-else></u-empty> -->
			<view class="list-block-con u-flex u-flex-wrap u-row-left">
				<view class="list-block-item" 
				 @click="openPage('pages/deviceList/deviceList','1')" >
					<image class="img" src="../../static/img/dici.png" mode="widthFix"></image>
					<view class="txt">地磁</view>
				</view>
				<view class="list-block-item"
				 @click="openPage('pages/deviceList/deviceList','2')" >
					<image class="img" src="../../static/img/cheweisuo.png" mode="widthFix"></image>
					<view class="txt">车位锁</view>
				</view>
				<view class="list-block-item"
				 @click="openPage('pages/deviceList/deviceList','3')" >
					<image class="img" src="../../static/img/daozha.png" mode="widthFix"></image>
					<view class="txt">道闸</view>
				</view>
			</view>
		</view>
		<view class="list-block">
			<view class="list-block-til  u-font-18">考勤管理</view>
			<view class="list-block-con u-flex u-flex-wrap u-row-left">
				<view class="list-block-item"
				 @click="openPage('pages/clockIn/clockIn')">
					<image class="img" src="../../static/img/daka.png" mode="widthFix"></image>
					<view class="txt">打卡</view>
				</view>
			</view>
		</view>
		<view class="list-block">
			<view class="list-block-til  u-font-18">问题上报</view>
			<view class="list-block-con u-flex u-flex-wrap u-row-left">
				<view class="list-block-item"
				 @click="openPage('pages/report/report')">
					<image class="img" src="../../static/img/report.png" mode="widthFix"></image>
					<view class="txt">问题上报</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				newsTotal:'',
				noticeList:[],
				devicemsg:[],
				deviceStatisData:[],
				deviceTypeListData:[],
			}
		},
		onLoad() {
			
		},
		onShow() {
			// this.deviceTypeList();
			this.deviceStatis();
			// this.getUnreadTotal();
		},
		methods: {
			openPage(path,param) {
			  this.$u.route({
			    url: path,
				params:{
					param:param
				}
			  })
			},
			deviceStatis(){
				this.$u.api.getDeviceStatis().then(res=>{
					if(res.code==200){
						this.deviceStatisData = res.data;
						// console.log('getDeviceStatis',res);
					}else{
						uni.showToast({
							icon:'none',
							title:res.msg
						})
					}
					console.log('res',res);
				}).catch(err=>{
					console.log('err',err);
				})
			},
			deviceTypeList(){
				this.$u.api.getDeviceTypeList().then(res=>{
					if(res.code==200){
						this.deviceTypeListData = res.data;
						// console.log('getDeviceStatis',res);
					}else{
						uni.showToast({
							icon:'none',
							title:res.msg
						})
					}
					console.log('res',res);
				}).catch(err=>{
					console.log('err',err);
				})
			},
			getUnreadTotal(){
				let that = this;
				this.$u.api.unreadTotal().then(res=>{
					if(res.code==200){
						this.newsTotal = res.data.noReadCount;
					}else{
						uni.showToast({
							icon:'none',
							title:res.msg
						})
					}
					console.log('res',res);
				}).catch(err=>{
					console.log('err',err);
				})
			},

		}
	}
</script>

<style lang="scss" scoped>
	page{background-color: #F6F6F6;}
	.header-wrap{
		overflow: hidden;
		.header{
			position: relative;
			box-sizing: border-box;
			height: 260rpx;
			padding: 48rpx 24rpx 98rpx;
			color: #fff;
			border-radius: 0 0 50% 50%;
			&::before{
				width: 140%; height: 100%; position: absolute; left: -20%; top: 0; content: ''; border-radius: 0 0 50% 50%; 
				background: linear-gradient(180deg, #4466D8 0%, #8274F8 100%);
				background: url(../../static/img/index-header-bg.png) no-repeat;
			}
			.header-title{
				font-size: 50rpx;
				font-weight: 400;
				color: #FFFFFF;
				line-height: 70rpx;
				letter-spacing: 2rpx;
				margin-bottom: 3rpx;
				.message{
					position: relative;
					float: right;
					cursor: pointer;
					.badge{
						
					}
				}
			}
			.header-con{
				font-size: 28rpx;
				font-weight: 400;
				color: #FFFFFF;
				line-height: 40rpx;
				letter-spacing: 1rpx;
			}
			.header-item{
				position: relative;
			}
		}
	}
	
	.statistics{
		position: relative;
		margin: -80rpx 24rpx 24rpx;
		padding: 43rpx 30rpx 43rpx;
		border-radius: 10rpx;
		background-color: #fff;
		.count{
			font-size: 86rpx;
			font-weight: 400;
			color: #3171CF;
			line-height: 100rpx;
			letter-spacing: 3rpx;
		}
		.name{
			font-size: 26rpx;
			font-weight: 400;
			color: #7D7D7D;
			line-height: 37rpx;
			letter-spacing: 1px;
		}
	}
	.notice{
		margin: 20rpx 0;
		padding: 0 30rpx;
		background-color: #fff;
	}
</style>