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

<template>
	<view class="equipment">
		<commons-header :isBack="false"></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;">{{$t('equipment.stat')}}</span>
				<span class="icon">&#xe6b9;</span>
			</view>
		</view> -->
		<view  class="content" style="margin-top:128rpx">
			<ul>
				<li v-for="i in listData" :key="i.id">
					<view class="list-warp"  @click="toDtl" v-if="i.type == 1">
						<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="commons-close">{{offLine}}</span>
								</view>
								<view class="list-main-model">
									{{$t('equipment.model')}}：{{i.equipmentNo}}
								</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>
					<!-- <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 commons-close">{{offLine}}</span>
								</view>
								<view class="list-main-model">
									{{$t('equipment.model')}}：SMT-1029
								</view>
							</view>
							<view class="more">
								<i class="iconfont">&#xe6bb;</i>
							</view>
						</view>
						<view class="list-title">
							{{$t('equipment.auxiliaryMachine')}}
						</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">
										{{$t('equipment.model')}}：SMT-2071
									</view>
								</view>
								<view class="auxiliary-before commons-close">
									{{offLine}}
								</view>
							</view>
							
						</view>
					</view> -->
				</li>
				<li @click="toDtl5"  v-for="i in listData" :key="i.id" v-if="i.type === 8">
					<view class="list-warp">
						<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="commons-close">{{offLine}}</span>
								</view>
								<view class="list-main-model">
									{{$t('equipment.model')}}：{{i.equipmentNo}}
									<span style="margin-left: 30rpx;">{{$t('equipment.yield')}}：200 pcs/min</span>
								</view>
							</view>
							<view class="more">
								<span class="iconfont">&#xe6bb;</span>
							</view>
						</view>
					</view>
					
				</li>
				<li  @click="toDtl2"  v-for="i in listData" :key="i.id" v-if="i.type == 9">
					<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>{{running}}</span>
								</view>
								<view class="list-main-model">
									{{$t('equipment.model')}}：{{i.equipmentNo}}
								</view>
							</view>
							<view class="more">
								<span class="iconfont">&#xe6bb;</span>
							</view>
						</view>
						<view class="tag">
							<view class="tag-box">
								{{$t('equipment.temperature')}}:67.5℃
							</view>
							<view class="tag-box">
								{{$t('equipment.humidity')}}:67.5%RH
							</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()">
						{{running}}
					</li>
					<li @click="selectMaterialList()">
						{{standby}}
					</li>
					<li @click="selectMaterialList()">
						{{offLine}}
					</li>
				</ul>
			</view>
		</uni-popup> 
		<ul  class="jinbian-list"> 
			<li class="jinbian-list-box"   v-for="i in listData" :key="i.id" v-if="i.type == 6">
				<!-- <view class="list-title">
					分组1 <i class="iconfont">&#xe71b;</i>
				</view> -->
				<view class="list-content">
					<view class="equ-list" @click="toDtl4()">
						<view class="state" style="background:#999">
							{{offLine}}
						</view>
						<view class="img-or-text">
							<image src="../../static/jinbian/icon_jbj.png" mode=""></image>
							<view class="text">
								<h3>设备1</h3>
								<p>{{$t('equipment.model')}}：{{i.equipmentNo}} <span>{{$t('equipment.yield')}}：200</span></p>
							</view>
						</view>
						<view class="tags">
							<view class="tag-box">
								<view class="tag-icon-box">
									<i class="iconfont">&#xe735;</i>
								</view>
								EBC
							</view>
							<view class="tag-box">
								<view class="tag-icon-box">
									<i class="iconfont">&#xe733;</i>
								</view>
								
								贾卡
							</view>
							<view class="tag-box">
								<view class="tag-icon-box">
									<i class="iconfont">&#xe734;</i>
								</view>
								
								横移
							</view>
						</view>
					</view>
				</view>
			</li>
		</ul>
		
	</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 {
				offLine:this.$t('equipment.offLine'),
				standby:this.$t('equipment.standby'),
				running:this.$t('equipment.running'),
				userInfoData: [],
				notificationData:[],
				isJinbian:false,//控制是否是经编
				listData:[],
			}
		},
		onLoad() {
			const v = this
			v.$post('/api/syringe-production/factoryProduct/list',{}).then(res => {
				
				v.listData = res.data
				console.log(v.listData )
			})
			
		},
		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')
				}
			},
			toDtl3(){
				uni.showToast({
					icon:"none",
					title: '该设备待机中，暂无数据！'
				})
			},
			toDtl5(){
				uni.navigateTo({
					url: '/pages/equipment/packingMachine'
				})
			},
			toDtl4(){
				console.log(123123)
				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{  
		
		.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;
								i{
									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>