iot-platform-app/pages/equipment/equipmentDemo.vue

<template>
	<view class="equipment">
		<commons-header></commons-header>
		<view  v-if="!isJinbian" class="search-warp">
			<view class="left-select" @click="openSelectQd(2)">
				<span class="icon">&#xe6c4;</span>
				<span style="margin:0 10rpx">1号生产线</span>
				<span class="icon">&#xe6b9;</span>
			</view>
			<view class="right-select" @click="openSelectQd(1)">
				<span class="icon">&#xe6c3;</span>
				<span style="margin: 0 10rpx;">状态</span>
				<span class="icon">&#xe6b9;</span>
			</view>
		</view>
		<view  class="content">
			<ul>
				<li>
					<view class="list-warp"  @click="toDtl">
						<view class="list-main-info">
							<view class="img">
								<image src="../../static/images/icon_bzj@2x.png" mode=""></image>
							</view>
							<view class="text">
								<view class="list-main-title">
									注塑机
									<span>运行中</span>
								</view>
								<view class="list-main-model">
									产品型号：SMT-1029
								</view>
							</view>
							<view class="more">
								<span class="iconfont">&#xe6bb;</span>
							</view>
						</view>
						<view class="tag">
							<view class="tag-box">
								自动模式
							</view>
							<!-- <view class="tag-box">
								检测系统
							</view> -->
						</view>
						<view class="list-title">
							辅助机器
						</view>
						<view class="auxiliary-warp">
							<view class="auxiliary-list-box">
								<view class="auxiliary-img">
									<image src="../../static/images/icon_xlj@2x.png" mode=""></image>
								</view>
								<view class="auxiliary-text">
									<view class="auxiliary-text-title">
										下料机
									</view>
									<view class="model">
										产品型号：SMT-2071
									</view>
								</view>
								<view class="auxiliary-before commons-normal">
									运行中
								</view>
							</view>
						</view>
					</view>
					<view class="list-warp"  @click="toDtl3">
						<view class="list-main-info">
							<view class="img">
								<image src="../../static/images/icon_bzj@2x.png" mode=""></image>
							</view>
							<view class="text">
								<view class="list-main-title">
									注塑机
									<span class="standby">待机</span>
								</view>
								<view class="list-main-model">
									产品型号：SMT-1029
								</view>
							</view>
							<view class="more">
								<span class="iconfont">&#xe6bb;</span>
							</view>
						</view>
						<!-- <view class="tag">
							<view class="tag-box">
								自动模式
							</view>
							<view class="tag-box">
								检测系统
							</view>
						</view> -->
						<view class="list-title">
							辅助机器
						</view>
						<view class="auxiliary-warp">
							
							<view class="auxiliary-list-box">
								<view class="auxiliary-img">
									<image src="../../static/images/icon_xlj@2x.png" mode=""></image>
								</view>
								<view class="auxiliary-text">
									<view class="auxiliary-text-title">
										下料机
									</view>
									<view class="model">
										产品型号：SMT-2071
									</view>
								</view>
								<view class="auxiliary-before commons-close">
									离线
								</view>
							</view>
							
						</view>
					</view>
				</li>
				<li  @click="toDtl2">
					<view class="list-warp">
						<view class="list-main-info">
							<view class="img">
								<image src="~@/static/images/icon_mjg@2x.png" mode=""></image>
							</view>
							<view class="text">
								<view class="list-main-title">
									灭菌柜
									<span>运行中</span>
								</view>
								<view class="list-main-model">
									产品型号：SMT-5010
								</view>
							</view>
							<view class="more">
								<span class="iconfont">&#xe6bb;</span>
							</view>
						</view>
						<view class="tag">
							<view class="tag-box">
								平均温度:67.5℃
							</view>
							<view class="tag-box">
								平均湿度:67.5%RH
							</view>
						</view>
					</view>
				</li>
				<li  @click="toDtlUrl('rollPrinter')">
					<view class="list-warp">
						<view class="list-main-info">
							<view class="img">
								<image src="~@/static/images/icon_mjg@2x.png" mode=""></image>
							</view>
							<view class="text">
								<view class="list-main-title">
									滚印机
									<span>运行中</span>
								</view>
								<view class="list-main-model">
									产品型号：SMT-5010
								</view>
							</view>
							<view class="more">
								<span class="iconfont">&#xe6bb;</span>
							</view>
						</view>
						
					</view>
				</li>
			</ul>
		</view>
		<uni-popup v-if="!isJinbian" ref="popup2" type="bottom">
			<view class="search-box">
				
				<ul>
					<li @click="selectMaterialList()">
						一号生产线
					</li>
				</ul>
			</view>
		</uni-popup>
		<uni-popup v-if="!isJinbian" ref="popup1" type="bottom">
			<view class="search-box">
				
				<ul>
					<li @click="selectMaterialList()">
						运行中
					</li>
					<li @click="selectMaterialList()">
						待机
					</li>
					<li @click="selectMaterialList()">
						离线
					</li>
				</ul>
			</view>
		</uni-popup>
		
		
	</view>
</template>

<script>
	import {
		getInfo
	} from "@/util/api.js";
	import Vue from 'vue'
	import commonsHeader from '../../components/commons-header/index.vue'
	export default {
		components:{
			commonsHeader
		},
		data() {
			return {
				userInfoData: [],
				notificationData:[],
				isJinbian:true,//控制是否是经编
			}
		},
		onLoad() {
			const v = this
			// v.$post('/wx/login/getUserInfo').then(res => {
			// 	v.userInfoData = res.data
			// 	Vue.prototype.$userInfo = res.data
			// 	uni.setStorage({
			// 		key: "userInfo",
			// 		data: res.data,
			// 		success(res) {

			// 		},
			// 		fail(res) {}
			// 	})
			// })
			// v.$post('/wx/message/notification',{}).then(res=>{
			// 	v.notificationData = res.data
			// })
		},
		methods: {
			selectMaterialList(){
				this.$refs.popup1.close()
				this.$refs.popup2.close()
			},
			openSelectQd(_type){
				if(_type == 1){
					this.$refs.popup1.open('top')
				}else{
					this.$refs.popup2.open('top')
				}
			},
			toDtlUrl(_url){
				console.log(_url)
				uni.navigateTo({
					url: '/pages/equipment/' + _url
				})
			},
			toDtl3(){
				uni.showToast({
					icon:"none",
					title: '该设备待机中，暂无数据！'
				})
			},
			toDtl4(){
				uni.navigateTo({
					url: '/pages/equipment/warpKnitting'
				})
			},
			toDtl2(){
				uni.navigateTo({
					url: '/pages/equipment/sterilization'
				})
			},
			toDtl(){
				uni.navigateTo({
					url: '/pages/equipment/injectionMolding'
				})
			},
			toRouter(j) {
				console.log(j)
				uni.navigateTo({
					url: '/pages/' + j.menuKey + '/' + j.menuKey
				})
			},
		},
	}
</script>
 
<style lang="less">
	.jinbian-list{
		padding-top:156rpx;
		.jinbian-list-box{
			margin-bottom: 24rpx;
			background-color: #fff;
			.list-title{
				height: 100rpx;
				line-height: 100rpx;
				display: flex;
				justify-content: space-between;
				padding: 0 24rpx;
				border-bottom: 2rpx solid #DDDDDD;
				span{
					color: #999; 
					line-height: 100rpx;
				}
			}
			.list-content{
				padding: 16rpx 24rpx 40rpx;
				.equ-list{
					margin-top: 24rpx;
					background-color: #F1F1F1;
					border-radius: 10rpx;
					padding: 40rpx 24rpx;
					position: relative;
					.state{
						position: absolute;
						top: 0;
						right: 0;
						width: 120rpx;
						height: 40rpx;
						color: #fff; 
						background: #FF655B;
						font-size: 24rpx;
						border-top-right-radius: 10rpx;
						border-bottom-left-radius: 10rpx;
						text-align: center;
					}
					
					.tags{
						display: flex;
						margin-top: 20rpx;
						.tag-box{
							background-color: #fff;
							height: 64rpx;
							width: 31%;
							margin: 1.1%;
							color: #333333;
							line-height: 64rpx;
							text-align: center;
							font-size: 24rpx;
							border-radius: 8rpx;
							display:flex;
							justify-content: center;
							.tag-icon-box{
								height: 40rpx;
								width: 40rpx;
								background-color: #84C418;
								line-height: 40rpx;
								text-align: center;
								margin-top: 12rpx;
								margin-right: 16rpx;
								border-radius: 8rpx;
								span{
									line-height: 40rpx;
									font-size: 22rpx;
									color: #fff;
								}
							}
							
						}
					}
					.img-or-text{
						display: flex;
						
						line-height: 40rpx;
						.text{
							padding: 10rpx 24rpx;
						}
						h3{
							color: #333333;
							font-size: 32rpx;
						}
						p{
							color: #666;
							font-size: 24rpx;
							span{
								margin-left: 40rpx;
							}
						}
						image{
							width: 100rpx;
							height: 100rpx;
						}
					}
				}
			}
		}
	}
	.search-box{
		background-color: #fff;
		padding-top: 100rpx;
		ul{
			li{
				padding: 25rpx 30rpx;
				border-bottom: 1rpx solid #dcdcdc;
			}
		}
	}
	.equipment{
		background-color: #f0f0f0;
		min-height: 100vh;
		.search-warp{
			height: 90rpx;
			line-height: 90rpx;
			background-color: #fff;
			display: flex;
			justify-content: space-between;
			padding: 0 24rpx;
			margin-bottom: 24rpx;
			margin-top: 128rpx;
		}
		.content{
			ul{
				li{
					box-shadow: 0px 3rpx 20rpx 0px rgba(0,0,0,0.10); 
					background-color: #ffffff;
					margin-bottom:24rpx;
					padding: 0rpx 24rpx;
					.list-warp{
						padding: 24rpx 0;
						border-bottom: 14rpx solid #f0f0f0;
					}
					.list-warp:last-child{
						border:none;
					}
					.auxiliary-warp{
						display: flex;
						justify-content: space-between;
						flex-wrap: wrap;
						.auxiliary-list-box{
							width: 342rpx;
							padding: 24rpx 20rpx;
							border-radius: 10rpx;
							border: 1rpx solid #ddd;
							background-color: #fff;
							display: flex;
							position: relative;
							box-sizing: border-box;
							font-size: 24rpx;
							margin-top: 24rpx;
							.auxiliary-before{
								position: absolute;
								right: 0;
								top: 0;
								width: 120rpx;
								height: 40rpx;
								line-height: 40rpx;
								text-align: center;
								border-radius: 2px 2px 2px 10px;
							}
							.auxiliary-img{
								width: 60rpx;
								height: 60rpx;
								margin-right: 10rpx;
								image{
									width: 100%;
									height: 100%;
								}
							}
						}
						
					}
					.list-title{
						margin-top: 30rpx;
						color: #333;
						font-size: 28rpx;
					}
					.tag{
						margin-top: 32rpx;
						.tag-box{
							height: 48rpx;
							line-height: 48rpx;
							text-align: center;
							padding: 0 22rpx;
							display: inline-block;
							background-color: #F1F1F1;
							font-size: 24rpx;
							color: #666666;
							margin-left: 20rpx;
							
						}
					}
					.list-main-info{
						display: flex;
						justify-content: space-between;
						
						.img{
							width: 100rpx;
							height: 100rpx;
							image{
								width: 100rpx;
								height: 100rpx;
							}
						}
						.text{
							width: calc(~ '100% - 140rpx');
							margin-top: 10rpx;
							padding: 0 24rpx;
							.list-main-title{
								font-size: 28rpx;
								color: #333333;
								span{
									background: rgba(63,191,49,0.20);
									padding: 3rpx 24rpx;
									color: #34C724;
									border-radius: 40rpx;
									margin-left: 24rpx;
								}
								.standby{
									background-color: rgba(153, 153, 153, 0.20);
									color:#FF8800;
								}
							}
							.list-main-model{
								margin-top: 10rpx;
								font-size: 24rpx;
								color: #333333;
							}
						}
					}
				}
			}
		}
	}
</style>