mes_mobile/pages/index/index.vue

<template>
	
	<view class="container home">
		<view class="home_head">
			<view class="iconfont icon-chaojiguanliyuan accounticon"></view>
			<view class="name" v-if="userName==''" @click="toLogin()">未登录</view>
			<view class="name" v-else>{{userName}} </view>
			<view class="iconfont icon-xiaoxitongzhi notifyicon" @click="toMessage()"></view>
			<view class="iconfont icon-shezhi setupicon"></view>
		</view>
		<view class="home_content">
			<view class="content_box">
				<view class="content_title">设备信息</view>
				<view class="device_data">
					<view class="device_module">
						<view class="module_left">
							<view class="icon_background">
								<view class="iconfont icon-WIFI_on contenticon"></view>
							</view>
							<view class="font13">
								在线设备
							</view>
						</view>
						<view class="module_right">
							<view class="top">
								▴2.89%
							</view>
							<view class="num font22">
								1,567
							</view>
						</view>
					</view>
					<view class="device_module">
						<view class="module_left">
							<view class="icon_background">
								<view class="iconfont icon-WIFI_off contenticon"></view>
							</view>
							<view class="font13">
								离线设备
							</view>
						</view>
						<view class="module_right">
							<view class="top">
								▴2.89%
							</view>
							<view class="num font22">
								1,567
							</view>
						</view>
					</view>
					<view class="device_module">
						<view class="module_left">
							<view class="icon_background">
								<view class="iconfont icon-setting contenticon"></view>
							</view>
							<view class="font13">
								维修保养
							</view>
						</view>
						<view class="module_right">
							<view class="top">
								▴2.89%
							</view>
							<view class="num font22">
								1,567
							</view>
						</view>
					</view>
					<view class="device_module">
						<view class="module_left">
							<view class="icon_background">
								<view class="iconfont icon-broken contenticon"></view>
							</view>
							<view class="font13">
								故障频次
							</view>
						</view>
						<view class="module_right">
							<view class="top">
								▴2.89%
							</view>
							<view class="num font22">
								1,567
							</view>
						</view>
					</view>
					<view class="device_module">
						<view class="module_left">
							<view class="icon_background">
								<view class="iconfont icon-brokenrate contenticon"></view>
							</view>
							<view class="font13">
								设备故障率
							</view>
						</view>
						<view class="module_right">
							<view class="top">
								▴2.89%
							</view>
							<view class="num font22">
								1,567
							</view>
						</view>
					</view>
					<view class="device_module">
						<view class="module_left">
							<view class="icon_background">
								<view class="iconfont icon-weixiubaoyangpinshuai contenticon"></view>
							</view>
							<view class="font13">
								维修保养频率
							</view>
						</view>
						<view class="module_right">
							<view class="top">
								▴2.89%
							</view>
							<view class="num font22">
								1,567
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="content_box">
				<view class="content_title">能耗信息</view>
				<view class="energy_data">
					<view class="iconfont icon-dianliang energy_icon"></view>
					<view class="energy_name">
						<view class="font13">
							用电量
						</view>
						<view class="font14">
							345.00
						</view>
					</view>
					<view class="energy_image">
						<image src="http://dm-auto.oss-cn-shanghai.aliyuncs.com/mes_wechat/yongdian.png" alt="" />
					</view>
					<view class="energy_number font20">
						41.443
					</view>
				</view>
				<view class="energy_data mar_top12">
					<view class="iconfont icon-yasuokongqi energy_icon"></view>
					<view class="energy_name">
						<view class="font13">
							用气量
						</view>
						<view class="font14">
							345.00
						</view>
					</view>
					<view class="energy_image">
						<image src="http://dm-auto.oss-cn-shanghai.aliyuncs.com/mes_wechat/yongqi.png" alt="" />
					</view>
					<view class="energy_number font20">
						41.443
					</view>
				</view>
			</view>
			<view class="content_box">
				<view class="content_title">工单管理</view>
				<view class="content_data">
					<view class="content_module" @click="toProductionOrder()">
						<view class="t-icon t-icon-shengchangongdan contenticon"></view>
						<view class="contentname">生产工单</view>
					</view>
					<view class="content_module">
						<view class="t-icon t-icon-shengchanbaobiao contenticon"></view>
						<view class="contentname">生产报表</view>
					</view>
				</view>
				
			</view>
			<view class="content_box">
				<view class="content_title">生产排程</view>
				<view class="content_data">
					<view class="content_module" @click="toSchedul()">
						<view class="t-icon t-icon-paichengguanli contenticon"></view>
						<view class="contentname">排程管理</view>
					</view>
					<view class="content_module" @click="toSchedule()">
						<view class="t-icon t-icon-gongdanjindu contenticon"></view>
						<view class="contentname">工单进度</view>
					</view>
					<view class="content_module" @click="toMaterialYield()">
						<view class="t-icon t-icon-gongdanchucaishuai contenticon"></view>
						<view class="contentname">工单出材率</view>
					</view>
					<!-- <view class="content_module">
						<view class="t-icon t-icon-paichengshichang contenticon"></view>
						<view class="contentname">排程时长</view>
					</view> -->
				</view>
			</view>
			<view class="content_box">
				<view class="content_title">设备管理</view>
				<view class="content_data">
					<view class="content_module" @click="toEquipmentManage()">
						<view class="t-icon t-icon-shebeiguanli contenticon"></view>
						<view class="contentname">设备管理</view>
					</view>
					<view class="content_module" @click="toDeviceStatus()">
						<view class="t-icon t-icon-shebeizhuangtai contenticon"></view>
						<view class="contentname">设备状态</view>
					</view>
					<view class="content_module" @click="toDeviceRepair()">
						<view class="t-icon t-icon-shebeibaoxiu contenticon"></view>
						<view class="contentname">设备报修</view>
					</view>
				</view>
			</view>
		</view>
		
		<tab-bar :current-page="0"></tab-bar>
	</view>
</template>

<script>
	import tabBar from "@/components/customTabBar/index"
	export default {
		components:{
			tabBar
		},
		data() {
			return {
				userName: '',
			}
		},
		// onLoad() {
		// 	this.userName = uni.getStorageSync('demu_mes_user_name')
		// },
		onShow(){
			this.userName = uni.getStorageSync('demu_mes_user_name')
		},
		// created() {
		// },
		mounted() {
			this.userName = uni.getStorageSync('demu_mes_user_name')
			
		},
		methods: {
			//
			toLogin(){
				uni.navigateTo({
					url:'/pages/login/login'
				})
			},
			//跳转消息页
			toMessage(){
				uni.navigateTo({
					url: '/pages/index/message'
				})
			},
			//跳转生产工单页
			toProductionOrder(){
				uni.navigateTo({
					url:'/pages/production/productionOrder'
				})
			},
			// 工单排程
			toSchedul(){
				uni.navigateTo({
					url:'/pages/schedul/list'
				})
			},
			//跳转工单进度页
			toSchedule(){
				uni.navigateTo({
					url:'/pages/index/schedule'
				})
			},
			//跳转工单出材率页
			toMaterialYield(){
				uni.navigateTo({
					url:'/pages/index/materialYield'
				})
			},
			//跳转设备管理页面
			toEquipmentManage(){
				uni.navigateTo({
					url:'/pages/equipmentManage/equipmentManage'
				})
			},
			//跳转设备报修页
			toDeviceRepair(){
				uni.navigateTo({
					url:'/pages/deviceRepair/deviceRepair'
				})
			},
			//跳转设备状态
			toDeviceStatus(){
				uni.navigateTo({
					url:'/pages/deviceStatus/deviceStatus'
				})
			},
		}
	}
</script>

<style lang="scss">
	
	.home {padding: 0 10px;font-size: 14px;
		.home_head{height: 40px;display: flex;position: relative;align-items: center;padding-bottom: 5px;
			.name{flex:1;}
			.accounticon{
				margin-right: 5px;
				color: $uni-text-color-inverse;
				font-size: 20px;
			}
			.notifyicon{font-size: 20px;padding-right: 20px;}
			.setupicon{font-size: 20px;}
		}
	}

	.home_content{padding-bottom: 100px;
		.content_title{line-height: 25px;font-size: 16px;padding: 15px 0;}
		.device_data{display: flex;flex-wrap: wrap;
			.device_module{
				width: calc(50% - 6px); /* 计算每个块的宽度（根据需要调整）*/
				// background-color: #ccc; /* 设置背景色（根据需要调整）*/
				background: $uni-bg-color-primary;
				margin:6px;
				padding: 10px 14px; 
				border-radius: 8px;
				display: flex;
				.module_left{width: 60%;
					.icon_background{width: 32px;height: 32px;background: $uni-bg-color-info;border-radius: 8px;    display: flex;align-items: center;justify-content: center;margin-bottom: 4px;}
				}
				.module_right{width: 40%;
					.top{
						display: flex;flex-direction: column; font-size: 10px;padding: 2px 4px;background: rgba(103,194,58,0.3);border-radius: 4px;color: $uni-text-color-success;
					}
					.num{
						margin-top: 6px;
					}
				}
			}
			.device_module:nth-child(even){
				margin-right: 0;
			}
			.device_module:nth-child(odd){
				margin-left: 0;
			}
		}
		.energy_data{padding: 12px; height: 64px; display: flex;align-items: center;background: $uni-bg-color-primary;border-radius: 8px;
			.energy_icon{color: $uni-text-color-primary;font-size: 24px;margin-right: 8px;}
			.energy_image{flex: 1;text-align: center;
				image{width: 86px;height: 32px;}
			}
			.energy_number{color: $uni-text-color-danger;}
		}
		.content_data{
			padding: 10px 0;display: flex;position: relative;align-items: center;justify-content:flex-start;height: 98px;
			.content_module{
				width: calc(25% - 7px);margin: 10px 4px;height: 98px;display: flex;align-items: center;justify-content: center;flex-direction: column;background-color: $uni-color-primary;border-radius: 8px;
				.contenticon{font-size: 24px;width: 32px;height: 32px;background-repeat: no-repeat;}
				.contentname{padding-top: 2px;font-size: 12px;}
			}
		}
	}
</style>