iot-ui-app/pages/index/home.vue

<template>
	<view id="home">
		<nav-bar title="海创微联" ></nav-bar>
		<!-- #ifdef MP-WEIXIN -->
		<official-account></official-account>
		<!-- #endif -->
		<view class="kanban"> 
			<view class="product-box">
				<view class="product-item" @click="goTypeUrl(1)">
					<text>总产品数量</text>
					<text>{{productCount}}</text>
				</view>
				<view style="width: 1px;height: 83rpx;background: #FFFFFF;opacity: 0.2;"></view>
				<view class="product-item" @click="goTypeUrl(2)">
					<text>总设备数量</text>
					<text>{{deviceCount}}</text>
				</view>
			</view>
			<view class="device-box">
				<view class="device-item" @click="goTypeUrl(2)">
					<text>激活设备数量</text>
					<text>{{activeCount}}</text>
				</view>
				<view class="device-item" @click="goTypeUrl(4)">
					<text>在线设备数量</text>
					<text>{{onlineCount}}</text>
				</view>
			</view>
		</view>
		<view class="gray-bars"></view>
		<view class="main-list">
			<view class="main-item" v-for="(item,index) in dataList" :key="index" @click="goTypeUrl(item.urlType)">
				<view class="item-img" :style="{'background':'url('+item.imgPath+') no-repeat','background-size': '100% 100%'}">
					<view class="iconfont" :class="item.iconfont"></view>
				</view>
				<text>{{item.txt}}</text>
			</view>
		</view>
		<!-- 更新组件 force 是否强制更新    tabbar：页面是否有原生tabbar组件-->
		<!-- <app-update ref="app_update"></app-update> -->
	</view>
</template>

<script>
	// import appUpdate from "@/common/components/content/update/app-update.vue"
	import list from '@/static/common/js/index/home-list.js'
	import NavBar from '../../common/components/navbar/NavBar.vue'
	export default {
		data() {
			return {
				dataList:list,
				productCount:0,
				deviceCount:0,
				activeCount:0,
				onlineCount:0,
			}
		},
		components:{
			NavBar,
			// appUpdate
		},
		onLoad() {
			this.getInfo();
			this.getDeviceData();
		},
		mounted() {
			// this.$refs.app_update.update();  //调用子组件 检查更新
		},
		onShow() {
			
		},
		methods:{
			// 获取用户信息
			getInfo(){
				let opt = {
					url: '/prod-api/system/user/getInfo',
					method: "GET",
				}
				this.$request.TokenRequest(opt,{}).then(res => {
					// console.log("info",res);
					if(res.code==200){
						this.$store.commit('setInfo', res.user);
						uni.setStorage({
							key: 'info',
							data: res.user,
							success() {
								console.log('用户信息缓存成功')
							},
							fail() {
								console.log('用户信息缓存失败')
							}
						});
					}else{
						this.$u.toast(res.msg);
					}
					
				}, error => {
					console.log(error);
				})
			},
			// 获取设备数据
			getDeviceData(){
				let opt = {
					url: '/prod-api/iot/device/all/count',
					method: "GET",
				}
				this.$request.TokenRequest(opt,{}).then(res => {
					// console.log("getDeviceData",res);
					if(res.code==200){
						this.productCount=res.data.productCount;
						this.deviceCount=res.data.deviceCount;
						this.activeCount=res.data.activeCount;
						this.onlineCount=res.data.onlineCount;
						
					}else{
						this.$u.toast(res.msg);
					}
					
				}, error => {
					this.$u.toast('服务器开小差了呢，请您稍后再试')
				})
			},
			goTypeUrl(type){
				if(type == 1){
					uni.switchTab({
						url:'./product'
					})
				}else if(type == 2){
					uni.navigateTo({
						url:'../device/list'
					})
				}else if(type == 3){
					uni.navigateTo({
						url:'../configuration/configuration-list'
					})
				}else if(type == 4){
					uni.navigateTo({
						url:'../video/video-list'
					})
				}
				
			},
		}
	}
</script>

<style scoped lang="less">
	.kanban{
		padding: 27rpx 27rpx 36rpx 23rpx;
		color: #fff;
		.product-box{
			width: 700rpx;
			height: 148rpx;
			background: #33ABFB;
			box-shadow: 0px 0px 10rpx 0px rgba(102, 102, 102, 0.3);
			border-radius: 24rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-bottom: 20rpx;
			.product-item{
				flex: 1;
				display: flex;
				flex-direction: column;
				align-items: center;
				text{
					&:first-of-type{
						font-size: 32rpx;
						font-weight: 500;
						margin-bottom: 16rpx;
					}
					&:last-of-type{
						font-size: 44rpx;
						font-weight: 500;
					}
				}
			}
		}
		.device-box{
			display: flex;
			justify-content: space-between;
			.device-item{
				&:first-of-type{
					background: url(https://am-img.gkiiot.com/iotos/app/img/home/device-pink.png) no-repeat;
					background-size: 100% 100%;
				}
				&:last-of-type{
					background: url(https://am-img.gkiiot.com/iotos/app/img/home/device-orange.png) no-repeat;
					background-size: 100% 100%;
				}
				width: 340rpx;
				height: 151rpx;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				text{
					&:first-of-type{
						font-size: 32rpx;
						font-weight: 500;
						margin-bottom: 8rpx;
					}
					&:last-of-type{
						font-size: 44rpx;
						font-weight: 500;
					}
				}
				
			}
		}
	}
	.gray-bars{
		height: 20rpx;
		background-color: #EBEEF5;
	}
	.main-list{
		display: flex;
		flex-wrap: wrap;
		padding-top: 42rpx;
		// padding: 42rpx 51rpx 0 43rpx;
		.main-item{
			display: flex;
			flex-direction: column;
			align-items: center;
			width: 187.5rpx;
			margin-bottom: 55rpx;
			.item-img{
				width: 110rpx;
				height: 110rpx;
				background-size: 100% 100%;
				display: flex;
				justify-content: center;
				align-items: center;
				.iconfont{
					font-size: 44rpx;
					color: #fff;
				}
			}
			>text{
				height: 30rpx;
				font-size: 32rpx;
				color: #131212;
				line-height: 59rpx;
			}
		}
	}
</style>