FE-app-oam/pages/basicsModule/home.vue

<template>
	<view id="home">
		<view class="home-max-big-box">
			<!-- 物联设备信息 -->
			<view class="devices-info-max-big-box">
				<view class="devices-info-max-box">
					<view class="devices-info-big-box">
						<view class="devices-image-box">
							<image :src="hardwareImg"></image>
						</view>
						<view class="devices-info-box">
							<view>{{devicesData.hardwareCount?devicesData.hardwareCount:0}}</view>
							<view>硬件设备</view>
						</view>
					</view>
					<view class="devices-null-box"></view>
					<view class="devices-info-big-box">
						<view class="devices-image-box">
							<image :src="iotImg"></image>
						</view>
						<view class="devices-info-box">
							<view>{{devicesData.iotDeviceCount?devicesData.iotDeviceCount:0}}</view>
							<view>物联设备</view>
						</view>
					</view>
				</view>
				<view class="devices-info-max-box">
					<view class="devices-info-big-box">
						<view class="devices-image-box">
							<image :src="onlineImg"></image>
						</view>
						<view class="devices-info-box">
							<view>{{devicesData.onlineRate?devicesData.onlineRate:0}}%</view>
							<view>在线设备</view>
						</view>
					</view>
					<view class="devices-null-box"></view>
					<view class="devices-info-big-box">
						<view class="devices-image-box">
							<image :src="offlineImg"></image>
						</view>
						<view class="devices-info-box">
							<view>{{devicesData.offlineRate?devicesData.offlineRate:0}}%</view>
							<view>离线设备</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 物联功能模块 -->
			<view class="devices-button-max-big-box">
				<view class="devices-button-big-box" @click="buttonGoPath('iot:type:list')">
					<view class="devices-button-box button-one">
						<image :src="buttonTwoImg"></image>
					</view>
					<view class="devices-button-name">物联分类</view>
				</view>
				<view class="devices-button-big-box" @click="buttonGoPath('iot:device:list')">
					<view class="devices-button-box button-two">
						<image :src="buttonThreeImg"></image>
					</view>
					<view class="devices-button-name">物联设备</view>
				</view>
				<view class="devices-button-big-box" @click="buttonGoPath('iot:hardware:list')">
					<view class="devices-button-box button-three">
						<image :src="buttonFourImg"></image>
					</view>
					<view class="devices-button-name">硬件设备</view>
				</view>
				<view class="devices-button-big-box" @click="buttonGoPath('iot:network:list')">
					<view class="devices-button-box button-four">
						<image :src="buttonOneImg"></image>
					</view>
					<view class="devices-button-name">网络组件</view>
				</view>
			</view>
			<!-- 告警消息列表 -->
			<view class="devices-list-max-big-box">
				<view class="devices-list-title-box">
					<view>告警消息</view>
					<view @click="buttonGoPath('iot:alertLog:list')">更多>></view>
				</view>
				<view class="devices-list-max">
					<view class="devices-list-null" v-if="!logList[0]">暂无数据</view>
					<view class="devices-list-for" v-for="(item,index) in logList">
						<!-- 
						 
						           {name:"钉钉",id:1,},
						           {name:"微信",id:2,},
						           {name:"邮件",id:3,},
						           {name:"电话",id:4,},
						           {name:"短信",id:5,},
						 -->
						<view>
							{{item.alarmType == 1?'钉钉':(
							item.alarmType == 2?'微信':(
							item.alarmType == 3?'邮件':(
							item.alarmType == 4?'电话':(
							item.alarmType == 5?'短信':''))))}}
						</view>
						<view>{{item.content}}</view>
						<view>{{ parseTime(item.createTime,"{y}-{m}-{d} {h}:{i}") }}</view>
					</view>
					<view class="devices-list-null" v-if="!logList[0]">暂无数据</view>
				</view>
			</view>
		</view>
		<!-- 底部导航 -->
		<view class="tab-bottom-max-box">
			<view class="tab-null-view"></view>
			<view class="tab-button-box">
				<image :src="workbenchImg"></image>
				<view>工作台</view>
			</view>
			<view class="tab-null-view"></view>
		</view>
	</view>
</template>

<script>
	
import { iotStatisticsDevices,iotAlarmLogSelect } from '@/api/index.js'
export default {
  data() {
    return {
			//设备信息
			devicesData:{
				hardwareCount:null,
				iotDeviceCount:null,
				offlineRate:null,
				onlineRate:null
			},
			//按钮图片
			hardwareImg:require('@/images/home_hardware_icon.png'),
			iotImg:require('@/images/home_iot_icon.png'),
			offlineImg:require('@/images/home_offline_icon.png'),
			onlineImg:require('@/images/home_online_icon.png'),
			buttonOneImg:require('@/images/home_button_1.png'),
			buttonTwoImg:require('@/images/home_button_2.png'),
			buttonThreeImg:require('@/images/home_button_3.png'),
			buttonFourImg:require('@/images/home_button_4.png'),
			workbenchImg:require('@/images/tab_workbench_2.png'),
			//权限数据
			permissions:uni.getStorageSync('permissions'),
			//告警消息
			logList:[],
		}
	},
  onLoad(option) {
  },
  onShow(){
		this.iotStatisticsDevices();
		this.iotAlarmLogSelect();
  },
  methods: {
		//获取设备信息
		async iotStatisticsDevices(){
			const {data} = await iotStatisticsDevices();
			if(data.code==200){
				this.$set(this,'devicesData',data.data);
			}
		},
		//获取告警消息列表
		async iotAlarmLogSelect(){
			const {data} = await iotAlarmLogSelect();
			if(data.code==200){
				this.$set(this,'logList',data.data.records);
			}
		},
		//跳转业务页面
		buttonGoPath(text){
			let num = 0;
			this.permissions.forEach((item) => {
				if(item == text){
					num++
					return
				}
			})
			if(num == 0){
				uni.showToast({
						mask:true,
						icon:"none",
						position:"center",
						title: '没有相关权限,请联系管理员',
						duration: 2000
				});
			}else{
				if(text == 'iot:type:list'){
					//物联分类
					uni.navigateTo({
						url: '/pages/iotClassification/index',
					});
				}else if(text == 'iot:device:list'){
					//物联设备
					uni.navigateTo({
						url: '/pages/iotDevice/index',
					});
				}else if(text == 'iot:hardware:list'){
					//硬件设备
					uni.navigateTo({
						url: '/pages/hardware/index',
					});
				}else if(text == 'iot:network:list'){
					//网络组件
					uni.navigateTo({
						url: '/pages/networkComponent/index',
					});
				}else if(text == 'iot:alertLog:list'){
					//告警日志
					uni.navigateTo({
						url: '/pages/warningLog/index',
					});
				}
			}
		},
	},
}
</script>

<style lang="stylus" scoped>
	#home{
		flex:1;
		display: flex;
		flex-direction: column;
		overflow: hidden;
		.home-max-big-box{
			flex:1;
			flex-direction: column;
			overflow: hidden;
			padding:40rpx;
			overflow-x: hidden;
			overflow-y: scroll;
			.devices-info-max-big-box{
				height:200rpx;
				padding:20rpx 40rpx;
				background-color: #fff;
				box-shadow: 0 0 8px 1px rgba(0, 0, 0, 0.1);
				border-radius:12rpx;
				.devices-info-max-box{
					display: flex;
					.devices-info-big-box{
						flex:1;
						display: flex;
						.devices-image-box{
							height:100rpx;
							image{
								width:60rpx;
								height:60rpx;
								margin:20rpx;
							}
						}
						.devices-info-box{
							flex:1;
							view{
								text-align: center;
								color:#333;
							}
							view:nth-child(1){
								font-size:30rpx;
								margin-top:12rpx;
							}
							view:nth-child(2){
								font-size:28rpx;
								margin-top:6rpx;
							}
						}
					}
					.devices-null-box{
						width:60rpx;
					}
				}
			}
			.devices-button-max-big-box{
				height:240rpx;
				margin:40rpx 0;
				background-color: #fff;
				box-shadow: 0 0 8px 1px rgba(0, 0, 0, 0.1);
				border-radius:12rpx;
				display: flex;
				.devices-button-big-box{
					margin:40rpx 0 0 39rpx;
					.devices-button-box{
						width:120rpx;
						height:120rpx;
						border-radius:12rpx;
						image{
							width:80rpx;
							height:80rpx;
							margin:20rpx;
						}
					}
					.button-one{
						background-color: #4FA6ED;
					}
					.button-two{
						background-color: #30CAA1;
					}
					.button-three{
						background-color: #F17262;
					}
					.button-four{
						background-color: #33BCD5;
					}
					.devices-button-name{
						line-height:60rpx;
						font-size:26rpx;
						text-align: center;
					}
				}
			}
			.devices-list-max-big-box{
				flex:1;
				background-color: #fff;
				box-shadow: 0 0 8px 1px rgba(0, 0, 0, 0.1);
				border-radius:12rpx;
				display: flex;
				flex-direction: column;
				.devices-list-title-box{
					display: flex;
					border-bottom:1px solid #dedede;
					margin:0 20rpx;
					padding:0 20rpx;
					view:nth-child(1){
						flex:1;
						line-height:80rpx;
						font-size:28rpx;
						color:#333;
					}
					view:nth-child(2){
						width:120rpx;
						text-align: center;
						line-height:80rpx;
						font-size:28rpx;
						color:#0183FA;
					}
				}
				.devices-list-max{
					min-height:300rpx;
					padding:10rpx 0;
				}
				.devices-list-null{
					font-size:28rpx;
					text-align:center;
					line-height:100rpx;
					color:#999;
				}
				.devices-list-for{
					padding:10rpx 20rpx;
					display: flex;
					view{
						font-size:26rpx;
					}
					view:nth-child(1){
						width:80rpx;
					}
					view:nth-child(2){
						flex:1;
						/*单行省略号*/
						display:block;
						overflow:hidden;
						text-overflow:ellipsis;
						white-space:nowrap;
					}
					view:nth-child(3){
						width:240rpx;
						text-align: right;
					}
				}
				.devices-list-null{
					text-align: center;
					font-size:28rpx;
					line-height:200rpx;
					color:#999;
				}
			}
		}
		.tab-bottom-max-box{
			display: flex;
			height:120rpx;
			background-color: #fff;
			box-shadow: 0 0 8px 1px rgba(0, 0, 0, 0.1);
			.tab-null-view{
				flex:1;
			}
			.tab-button-box{
				image{
					display: block;
					width:40rpx;
					height:40rpx;
					margin:25rpx auto 10rpx;
				}
				view{
					text-align: center;
					font-size:26rpx;
					color:#0183FA;
				}
			}
		}
	}
</style>