SmartBeehive/pages/Beehive.vue

<template>
	<view class="page">
		<u-navbar :is-back="false" title="蜂箱" :border-bottom="false" :background="bgc" title-color='#3D3D3D '
			title-size='36' height='45' id="navbar">
		</u-navbar>
		<view class="top_cont">
			<view class="top_box">
				<view class="search">
					<image src="https://api.ccttiot.com/smartmeter/img/static/um5GxgXufKY8IK2qkaWR" mode=""></image>
					<view class="search_center">
						<input type="text" class="ips" @confirm="changserch" v-model="code" placeholder="请输入蜂箱编号"
							placeholder-class="my-placeholder" />
					</view>
				</view>
				<view class="add" @click="addApiary()">
					<image src="https://api.ccttiot.com/smartmeter/img/static/uR30yYn3IsHDu5qWV0ML" mode=""></image>
				</view>
			</view>
			<view class="tabbar">
				<view class="cont"  v-for="(item,index) in miyuancolumns" :key="index"  @click="btntab(index,item)">
					{{item.label == null ? '--' : item.label}} <text v-if="item.count != '-1'">({{item.count == null ? '0' : item.count}})</text>
					<view class="gl" :id="indextab == index ? 'active' : ''"></view>
				</view>
			</view>
		</view>
		<view class="no_cont" v-if="logoflag">
			<view class="img">
				<image src="https://api.ccttiot.com/smartmeter/img/static/uUZ3MF84e3bKgwAei8Rz" mode=""></image>
			</view>
			<view class="txt">
				当前还没有添加蜂箱哦
			</view>
		</view>
		<view class="warp_box" v-else>
			<swiper class="swiper" :style="{ height: swiperHeight + 'rpx' }" :current='curtitidx'
				@change="swiperchange">
				<swiper-item >
					<scroll-view class="swiper-item" scroll-y="true" @scrolltolower="loadMore">
						<!-- <view v-if="total == 0" style="width: 100%;margin: auto;margin-top: 200rpx;text-align: center;color: #ccc;">该蜂场没有蜂箱...</view> -->
						<view class="card_box" v-for="(item,index) in fxlist" :key="index" @click="todetail(item.beehiveId)">
							<view class="card">
								<view class="card_top">
									<view class="name">
										{{item.name == null ? '--' : item.name}}
									</view>
									<view class="online" :id="item.onlineStatus == 0 ? 'status' : ''">
										{{item.onlineStatus == 0 ? '离线' : '在线'}}
									</view>
									<!-- <view class="type">
										已认养
									</view> -->
									<view class="ele">
										<image style="height: 25rpx;" v-if="item.surplusPowerPoint <= 100 && item.surplusPowerPoint >= 80" src="https://api.ccttiot.com/smartmeter/img/static/uWbKPMvIuFZjzviEJjmP" mode=""></image> 
										<image style="height: 25rpx;" v-if="item.surplusPowerPoint < 80 && item.surplusPowerPoint >= 50" src="https://api.ccttiot.com/smartmeter/img/static/u0mCXpSrvcROLCMsahNh" mode=""></image>
										<image style="height: 25rpx;" v-if="item.surplusPowerPoint < 50 && item.surplusPowerPoint >= 20" src="https://api.ccttiot.com/smartmeter/img/static/uGGgEPbe8ryHspQPL2o8" mode=""></image> 
										<image style="height: 25rpx;" v-if="item.surplusPowerPoint < 20" src="https://api.ccttiot.com/smartmeter/img/static/uIRhPmP5WUJaIg0nft9E" mode=""></image> 
										{{item.surplusPowerPoint == null ? '--' : item.surplusPowerPoint}}%
									</view>
								</view>
								<view class="card_top" style="margin-top: 20rpx;">
									<view class="txt">
										{{item.sn == null ? '--' : item.sn}}
									</view>
									<view class="line"></view>
									<view class="txt">
										{{item.apiaryName == null ? '--' : item.apiaryName}}
									</view>
									<view class="line"></view>
									<view class="txt">
										{{item.lastOnlineTime == null ? '--' : item.lastOnlineTime}}
									</view>
								</view>
								<view class="info_cont">
									<view class="info_li" v-for="(val,index) in item.modelTags" :key="index" v-if="val == 1">
										<view class="li_top">
											<image src="https://api.ccttiot.com/smartmeter/img/static/uk7CvwzeU0ukxvS9cBtD" mode=""></image>
											<view class="li_txt">
												{{item.totalWeight == 999999 ? '--' : (item.totalWeight / 1000).toFixed(1)}}
												<span>kg</span>
											</view>
										</view>
										<view class="li_bot">
										重量
										</view>
									</view>
									<view class="info_li" v-for="(val,index) in item.modelTags" :key="index" v-if="val == 3">
										<view class="li_top">
											<image src="https://api.ccttiot.com/smartmeter/img/static/una6Kbd2gdBZ9gG6lg44 " mode=""></image>
											<view class="li_txt">
												{{item.innerTemperature < -40 || item.innerTemperature > 100  ? '--' : item.innerHumidity}}
												<span>%</span>
											</view>
										</view>
										<view class="li_bot">
										箱内湿度
										</view>
									</view>
									<view class="info_li" v-for="(val,index) in item.modelTags" :key="index" v-if="val == 3">
										<view class="li_top">
											<image src="https://api.ccttiot.com/smartmeter/img/static/uWjV9HEHrP5g0B5AHD1j" mode=""></image>
											<view class="li_txt">
												{{item.innerTemperature  < -40 || item.innerTemperature > 100 ? '--' : item.innerTemperature}}
												<span>℃</span>
											</view>
										</view>
										<view class="li_bot">
										箱内温度
										</view>
									</view>
									<view class="info_li" v-for="(val,index) in item.modelTags" :key="index" v-if="val == 2">
										<view class="li_top">
											<image src="https://api.ccttiot.com/smartmeter/img/static/uhsU6Y1K35jxA4aRauzy" mode=""></image>
											<view class="li_txt">
												{{item.ioCountDay == null ? '--' : item.ioCountDay}}
												<span>次</span>
											</view>
										</view>
										<view class="li_bot">
										出勤
										</view>
									</view>
									<view class="info_li" v-for="(val,index) in item.modelTags" :key="index" v-if="val == 4">
										<view class="li_top">
											<image src="https://api.ccttiot.com/smartmeter/img/static/una6Kbd2gdBZ9gG6lg44" mode=""></image>
											<view class="li_txt">
												{{ item.outerHumidity < -40 || item.outerHumidity > 100 || item.outerTemperature < -40 || item.outerTemperature > 100 ? '--' : item.outerHumidity}}
												<span>%</span>
											</view>
										</view>
										<view class="li_bot">
										箱外湿度 
										</view>
									</view>
									<view class="info_li" v-for="(val,index) in item.modelTags" :key="index" v-if="val == 4">
										<view class="li_top">
											<image src="https://api.ccttiot.com/smartmeter/img/static/uWjV9HEHrP5g0B5AHD1j" mode=""></image>
											<view class="li_txt">
												{{item.outerTemperature  < -40 || item.outerTemperature > 100 || item.outerHumidity < -40 || item.outerHumidity > 100 ? '--' : item.outerTemperature}}
												<span>℃</span>
											</view>
										</view>
										<view class="li_bot">
										箱外温度
										</view>
									</view>
									<view class="info_li" v-for="(val,index) in item.modelTags" :key="index" v-if="val == 9">
										<view class="li_top">
											<image src="https://api.ccttiot.com/smartmeter/img/static/um4lfl5q2O7FNM1EQc2L" mode=""></image>
											<view class="li_txt">
												{{item.innerCo2 == 0 ? '--' : item.innerCo2}}
												<span>ppm</span>
											</view>
										</view>
										<view class="li_bot">
										二氧化碳
										</view>
									</view>

									<view class="info_li" v-for="(val,index) in item.modelTags" :key="index" v-if="val == 10">
										<view class="li_top">
											<image src="https://api.ccttiot.com/smartmeter/img/static/up9IaGzSg1RKhIZz3V7a" mode=""></image>
											<view class="li_txt">
												{{item.volume / 1000 == 0 ? '--' : (item.volume / 1000).toFixed(1)}}
												<span>khz</span>
											</view>
										</view>
										<view class="li_bot">
										频率
										</view>
									</view>

								</view>
								
							</view>
						</view>
					</scroll-view>
				</swiper-item>
			</swiper>
		</view>
		<tab-bar :indexs='2' style=""></tab-bar>
        <u-toast ref="uToast" />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				bgc: {
					backgroundColor: " #FAFDFD",
				},
				code: '',
				swiperHeight:554,
				curtitidx:0,
				miyuancolumns: [{label:'全部',count:'0'}],
				pagesum: 1,
				pagesize: 99,
				pagesizes: 5,
				fxlist:[],
				total: '',
				apiaryId:'',
				indextab:0,
				logoflag:false
			}
		},
		onLoad() {
			
		},
		onShow() {
		   this.indextab = 0
		   this.pagesum = 1
		   // this.fxlist = []
           this.getmiyuancolumns()
		},
		methods: {
			changserch(){
				let data = {
					pageNum:this.pagesum,
					pageSize:this.pagesizes,
					name:this.code,
					sn:this.code
				}
				this.$u.get('/farm/beehive/list', data).then(res => {
					if(res.code == 200){
						this.fxlist = []
						this.total = res.total
						this.fxlist = res.rows
					}
				})
			},
			todetail(beehiveId){
				uni.navigateTo({
					url:'/page_Beehive/Beehive_detail?beehiveId=' + beehiveId
				})
			},
			btntab(index,item){
				this.indextab = index
				this.pagesum = 1
				this.apiaryId = item.value
				this.getlist()
			},
			getlist(){
				let data = {
					pageNum:this.pagesum,
					pageSize:this.pagesizes,
					apiaryId:this.apiaryId
				}
				this.$u.get('/farm/beehive/list', data).then(res => {
					if(res.code == 200){
						this.total = res.total
						if(this.total < 1){
							this.logoflag = true
						}else{
							this.logoflag = false
							if(this.pagesum > 1){
								this.fxlist  = this.fxlist .concat(res.rows)
							}else{
								this.fxlist  = res.rows
							}
							// let oldSnSet = new Set(this.fxlist.map(item => item.sn));  
							// let result = this.fxlist  
							 
							// res.rows.forEach(row => {  
							//     if (oldSnSet.has(row.sn)) {  
							//         result.push(row) 
							//         oldSnSet.delete(row.sn)
							//     } else {  
							//         result.push(row)
							//     }  
							// });  
							// result.sort((a, b) => b.onlineStatus - a.onlineStatus) // 1 在前，0 在后  
							// this.fxlist = result.filter(row => oldSnSet.has(row.sn))
							// this.fxlist = result
							this.pagesum++
						}
					}
				})
			},
			loadMore() {
				if (this.fxlist.length  < this.total) {
					this.getlist()
				} else {
					this.$refs.uToast.show({
						title: '没有更多蜂箱了',
						type: 'default',
					    position:'bottom'
					})
				}
			},
			getmiyuancolumns() {
				let data = {
					pageNum: this.pagesum,
					pageSize: this.pagesize
				};
				this.$u.get('/farm/apiary/list', data).then((res) => {
					if (res.code === 200) {
						this.miyuancolumns = res.rows.map(item => ({
							value: item.apiaryId,
							label: item.name,
							count:item.beehiveCount
						}))
						this.miyuancolumns.unshift({ label: '全部',value:'',count:'-1'})
						this.apiaryId = this.miyuancolumns[0].value
						this.logoflag = false
						this.getlist()
					} else {
						this.logoflag = true
					}
				})
			},
			swiperchange(e) {
				this.curtitidx = e.detail.current
			},
			addApiary(){
				uni.navigateTo({
					url:'/page_Beehive/add_Beehive'
				})
			}
		}
	}
</script>

<style lang="scss">
	#active{
		border-bottom: 3px solid #FFC107;
		font-weight: 600;
		font-size: 40rpx;
		display: block !important; 
	}
	#status{
		background-color: #808080;
	}
	page {
		background-color: #FAFDFD;
	}
	.page {
		width: 750rpx;
		.swiper {
			height: 76vh !important;
			padding-bottom: 230rpx;
			box-sizing: border-box;
			.swiper-item {
		        overflow: scroll;
				height: 100%;
				.card_box {
					margin: 0 auto;
					padding: 20rpx 24rpx;
					margin-top: 24rpx;
					width: 674rpx;
					max-height: 100%;
					background: #FFFFFF;
					box-shadow: 0rpx 0rpx 8rpx 0rpx rgba(0,0,0,0.15);
					border-radius: 20rpx 20rpx 20rpx 20rpx;
					.info_cont{
						display: flex;
						flex-wrap: wrap;
						.info_li:nth-child(3n){
							margin-right: 0;
						}
						.info_li{
							margin-top: 28rpx;
							width: 33%;
							.li_top{
								display: flex;
								flex-wrap: nowrap;
								image{
									width: 36rpx;
									height: 36rpx;
								}
								.li_txt{
									margin-left: 12rpx;
									display: flex;
									align-items: flex-start;
									font-weight: 600;
									font-size: 30rpx;
									color: #3D3D3D;
									span{
										font-size: 20rpx;
									}
								}
							}
							.li_bot{
								margin-left: 4rpx;
								margin-top: 14rpx;
								font-weight: 400;
								font-size: 24rpx;
								color: #3D3D3D;
							}
						}
					}
					.card_top{
						display: flex;
						flex-wrap: nowrap;
						align-items: center;
						.txt{
							font-weight: 500;
							font-size: 24rpx;
							color: #808080;
						}
						.line{
							margin-left: 18rpx;
							margin-right: 18rpx;
							width: 0rpx;
							height: 30rpx;
							border: 2rpx solid #808080;
						}
						.name{
							font-weight: 600;
							font-size: 36rpx;
							color: #3D3D3D;
						}
						.online{
							margin-left: 26rpx;
							padding: 6rpx 10rpx;
							background: #4CD964;
							border-radius: 8rpx 8rpx 8rpx 8rpx;
							font-weight: 500;
							font-size: 24rpx;
							color: #FFFFFF;
						}
						.type{
							margin-left: 24rpx;
							padding: 6rpx 10rpx;
							background: #FFC107;
							border-radius: 8rpx 8rpx 8rpx 8rpx;
							font-weight: 500;
							font-size: 24rpx;
							color: #FFFFFF;
						}
						.ele{
							margin-left: auto;
							display: flex;
							align-items: center;
							flex-wrap: nowrap;
							font-weight: 400;
							font-size: 28rpx;
							color: #808080;
							image{
								margin-right: 12rpx;
								width: 46rpx;
								height: 46rpx;
							}
						}
					}
				}
			}
		}
		.top_cont {
			padding: 0 38rpx;
			.tabbar::-webkit-scrollbar {
				width: 0 !important;
			}
			.tabbar {
				display: flex;
				overflow-y: hidden;
				overflow-x: auto;
				white-space: nowrap;
				/* 防止换行 */
				-webkit-overflow-scrolling: touch;
				/* 优化触摸滚动 */
				.cont {
					margin-right: 30rpx;
					font-weight: 400;
					font-size: 36rpx;
					color: #3D3D3D;
					position: relative;
					.gl{
						width: 46rpx;
						height: 46rpx;
						background: #FFC107;
						border-radius: 50%;
						position: absolute;
						top: 4rpx;
						left: 0rpx;
						opacity: .7;
						z-index: -1;
						display: none;
					}
				}
			}
			.top_box {
				margin: 42rpx auto;
				display: flex;
				flex-wrap: nowrap;
				width: 664rpx;
                align-items: center;
				.search {
					display: flex;
					flex-wrap: nowrap;
					align-items: center;
					padding: 20rpx 26rpx;
					width: 566rpx;
					height: 82rpx;
					background: #FFFFFF;
					box-shadow: 0rpx 0rpx 8rpx 0rpx rgba(0, 0, 0, 0.15);
					border-radius: 20rpx 20rpx 20rpx 20rpx;
					image {
						width: 35.97rpx;
						height: 35.97rpx;
					}
					.search_center {
						margin-left: 34rpx;
						width: 480rpx;
						.ips {
							// 基本样式设置
							width: 100%; // 根据需要调整
						}
						.my-placeholder {
							font-weight: 400;
							font-size: 32rpx;
							color: #808080;
						}
					}
				}
				.add {
					margin-left: 30rpx;
					width: 66rpx;
					height: 66rpx;
				}
			}
		}
		.no_cont {
			margin: 152rpx auto 0;
			width: 432rpx;
			.img {
				image {
					width: 432rpx;
					height: 432rpx;
				}
			}
			.txt {
				margin-top: 50rpx;
				width: 100%;
				text-align: center;
				font-weight: 500;
				font-size: 32rpx;
				color: #808080;
			}
		}
	}
</style>