蜂箱

common/http.interceptor.js

@@ -1,6 +1,6 @@
 const install = (Vue, vm) => {
 	Vue.prototype.$u.http.setConfig({
-			// baseUrl: 'http://192.168.2.27:3202',
+			// baseUrl: 'http://192.168.2.18:3202',
 			baseUrl: 'https://fen.ccttiot.com/prod-api',
 			loadingText: '努力加载中~',
 			loadingTime: 800,

page_Beehive/Beehive_woring.vue

@@ -668,7 +668,7 @@
 					margin-top: 20rpx;
 					padding: 20rpx 26rpx;
 					width: 462rpx;
-					height: 260rpx;
+					max-height: 600rpx;
 					background: #F6F6F6;
 					border-radius: 20rpx 20rpx 20rpx 20rpx;
 

pages/Beehive.vue

@@ -16,27 +16,45 @@
 					<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="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> -->
-		<view class="warp_box" v-else>
+		<view class="fd">
-			<swiper class="swiper" :style="{ height: swiperHeight + 'rpx' }" :current='curtitidx'
+			<!-- 刷新动画 -->
-				@change="swiperchange">
+			<!-- <view class="shuaxin">
-				<swiper-item >
+				<image src="https://api.ccttiot.com/smartmeter/img/static/uO9UFjzbzS9YlabzL4HV" mode="aspectFit"></image>
-					<scroll-view class="swiper-item" scroll-y="true" @scrolltolower="loadMore">
+			</view> -->
-						<view class="card_box" v-for="(item,index) in fxlist" :key="index" @click="todetail(item.beehiveId)">
+			
+			<view class="fd_top u-skeleton-fillet">
+				<view class="fd_da">
+					<view class="fd_lt"
+						:style="{ transform: `translateX(${-curtitidx * 100 > -300 ? 0 : -curtitidx * 120}rpx)`}">
+						<view class="fd_tit" v-for="(item,index) in miyuancolumns" :key="index"
+							:class="index == curtitidx ? 'act1' : ''" @click="btntab(index,item)">
+							{{item.name == null ? '--' : item.name}} <text v-if="item.count != '-1'">({{item.count == null ? '0' : item.count}})</text>
+							<view :class="index == curtitidx ? 'active' : ''"></view>
+						</view>
+					</view>
+				</view>
+			</view>
+		
+			<swiper class="swiper" style="height: 100%;" :current='curtitidx' @change="swiperchange"
+				@touchstart="touchStart" @touchend="touchEnd">
+				<swiper-item v-for="(items,index) in miyuancolumns" :key="index" class="">
+					<view class="" v-if="items && items.wateringList && items.wateringList.length == 0"
+						style="width: 100%;height: 200rpx;margin: auto;margin-top: 230rpx;text-align: center;">
+						<image style="width: 200rpx;height: 200rpx;"
+							src="https://api.ccttiot.com/smartmeter/img/static/uUZ3MF84e3bKgwAei8Rz" mode="aspectFit"></image>
+						<view class="" style="font-size: 28rpx;color: #808080;margin-top: 30rpx;">暂未添加蜂箱...</view>
+					</view>
+					<view class="swiper_item">
+						<view class="card_box" v-for="(item,indexs) in items.wateringList" :key="indexs" @click="todetail(item.beehiveId)">
 							<view class="card">
 								<view class="card_top">
 									<view class="name">
@@ -45,9 +63,6 @@
 									<view class="online" :id="item.onlineStatus == 0 ? 'status' : ''">
 										{{item.onlineStatus == 0 ? '离线' : '在线'}}
 									</view>
-									<!-- <view class="type">
-										已认养
-									</view> -->
 									<view class="ele">
 										<view class="type" @click.stop="btngengxin">
 											更新数据	
@@ -175,10 +190,12 @@
 								</view>
 							</view>
 						</view>
-					</scroll-view>
+					</view>
 				</swiper-item>
 			</swiper>
 		</view>
+		
+
 		<tab-bar :indexs='2' style=""></tab-bar>
         <u-toast ref="uToast" />
 	</view>
@@ -194,15 +211,20 @@
 				code: '',
 				swiperHeight:554,
 				curtitidx:0,
-				miyuancolumns: [{label:'全部',count:'0'}],
+				miyuancolumns: [{name:'全部',count:'0'}],
 				pagesum: 1,
 				pagesize: 99,
-				pagesizes: 5,
+				pagesizes: 10,
 				fxlist:[],
 				total: '',
 				apiaryId:'',
 				indextab:0,
 				logoflag:false,
+				wateringList:[],
+				touchStartX: 0, // 触屏起始点x
+				touchStartY: 0, // 触屏起始点y  
+				qingqiuflag:true,
+				shujuflag: false,
 			}
 		},
 		onLoad() {
@@ -211,34 +233,61 @@
 		onShow() {
 		   this.indextab = 0
 		   this.pagesum = 1
+		   this.miyuancolumns = []
            this.getmiyuancolumns()
+		},
+		onUnload() {
+			
 		},
 		methods: {
+			
+			touchStart(e) {
+				this.touchStartX = e.touches[0].clientX;
+				this.touchStartY = e.touches[0].clientY;
+			},
+			// 松开
+			touchEnd(e) {
+				let deltaX = e.changedTouches[0].clientX - this.touchStartX;
+				let deltaY = e.changedTouches[0].clientY - this.touchStartY;
+				if (Math.abs(deltaX) > 50 && Math.abs(deltaX) > Math.abs(deltaY)) {
+					if (deltaX >= 0) {
+						// console.log("左滑")  
+					} else {
+						// console.log("右滑")  
+					}
+				} else if (Math.abs(deltaY) > 50 && Math.abs(deltaX) < Math.abs(deltaY)) {
+					if (deltaY < 100) {
+						console.log("上滑")  
+						if(this.qingqiuflag == true){
+							if (this.miyuancolumns[0].wateringList.length  < this.total) {
+								this.qingqiuflag = false
+								this.getlist() 
+							}
+						}
+					} else {
+						console.log(deltaY)
+						if (deltaY > 250) {
+				
+						}
+					}
+				}
+			},
+			
+
 			// 刷新蜂箱最新数据
 			btngengxin(){
                 uni.showLoading({
                     title: '更新数据中...',
                     mask: true
                 })
-				this.indextab = 0
+				this.curtitidx = 0
 				this.pagesum = 1
 				this.getlist()
 			},
 			// 进行蜂箱搜索
 			changserch(){
-				let data = {
+				this.pagesum = 1
-					pageNum:this.pagesum,
+				this.getlist()
-					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){
@@ -248,9 +297,9 @@
 			},
 			// 点击tab请求tab中的蜂箱
 			btntab(index,item){
-				this.indextab = index
+				this.curtitidx = index
 				this.pagesum = 1
-				this.apiaryId = item.value
+				this.apiaryId = this.miyuancolumns[this.curtitidx].value
 				this.getlist()
 			},
 			// 请求蜂箱列表
@@ -259,40 +308,61 @@
 					pageNum:this.pagesum,
 					pageSize:this.pagesizes,
 					apiaryId:this.apiaryId,
-					refreshIot:true
+					refreshIot:true,
+					name:this.code,
 				}
 				this.$u.get('/farm/beehive/list', data).then(res => {
 					if(res.code == 200){
 						uni.hideLoading()
 						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)
+								this.wateringList = res.rows
+								this.qingqiuflag = true
+								this.miyuancolumns.forEach(groupItem => {
+								    groupItem.wateringList 
+								})
+								this.wateringList.forEach(wateringItem => {  
+								    this.miyuancolumns[0].wateringList.push(wateringItem)
+								})
+								this.wateringList.forEach(wateringItem => {  
+								    this.miyuancolumns.forEach(groupItem => {  
+								        if (groupItem.value !== null && wateringItem.apiaryId !== null && groupItem.value == wateringItem.apiaryId) {  
+								            if (!groupItem.wateringList.some(item => item.apiaryId === wateringItem.apiaryId)) {  
+								                groupItem.wateringList.push(wateringItem)
+								            }  
+								        }  
+								    })  
+								})
+								uni.hideLoading()
+								if(this.total > this.miyuancolumns.length){
+									this.pagesum++
+								}
 							}else{
-								this.fxlist  = res.rows
+								this.wateringList = res.rows  
+								this.qingqiuflag = true
+								this.miyuancolumns.forEach(groupItem => {  
+								    groupItem.wateringList = []
+								})
+								this.wateringList.forEach(wateringItem => {  
+								    this.miyuancolumns[0].wateringList.push(wateringItem);  
+								})
+								this.wateringList.forEach(wateringItem => {  
+								    this.miyuancolumns.forEach(groupItem => {  
+								       if (groupItem.value !== null && wateringItem.apiaryId !== null && groupItem.value == wateringItem.apiaryId) {  
+								           groupItem.wateringList.push(wateringItem)
+								       }
+								    })
+								})   
+								uni.hideLoading()
+								if(this.total > this.miyuancolumns.length){
+									this.pagesum++
+								}
 							}
-							this.pagesum++
-						}
 					}else{
 						uni.hideLoading()
 					}
 				})
 			},
-			// 请求更多蜂箱列表
-			loadMore() {
-				if (this.fxlist.length  < this.total) {
-					this.getlist()
-				} else {
-					this.$refs.uToast.show({
-						title: '没有更多蜂箱了',
-						type: 'default',
-					    position:'bottom'
-					})
-				}
-			},
 			// 请求蜂箱tab导航栏
 			getmiyuancolumns() {
 				let data = {
@@ -303,20 +373,23 @@
 					if (res.code === 200) {
 						this.miyuancolumns = res.rows.map(item => ({
 							value: item.apiaryId,
-							label: item.name,
+							name: item.name,
 							count:item.beehiveCount
 						}))
-						this.miyuancolumns.unshift({ label: '全部',value:'',count:'-1'})
+						this.miyuancolumns.unshift({ name: '全部',value:'',count:'-1'})
+						console.log(this.miyuancolumns);
 						this.apiaryId = this.miyuancolumns[0].value
-						this.logoflag = false
 						this.getlist()
 					} else {
-						this.logoflag = true
+				
 					}
 				})
 			},
 			swiperchange(e) {
 				this.curtitidx = e.detail.current
+				this.pagesum = 1
+				this.apiaryId = this.miyuancolumns[this.curtitidx].value
+				this.getlist()
 			},
 			// 点击跳转到添加蜂箱页面
 			addApiary(){
@@ -329,11 +402,20 @@
 </script>
 
 <style lang="scss">
-	#active{
+	.active{
 		border-bottom: 3px solid #FFC107;
 		font-weight: 600;
 		font-size: 40rpx;
 		display: block !important; 
+		width: 46rpx;
+		height: 46rpx;
+		background: #FFC107;
+		border-radius: 50%;
+		position: absolute;
+		top: 4rpx;
+		left: 0rpx;
+		opacity: .7;
+		z-index: -1;
 	}
 	#status{
 		background-color: #808080;
@@ -341,11 +423,112 @@
 	page {
 		background-color: #FAFDFD;
 	}
+	.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;
+			.type{
+				margin-left: 24rpx;
+				padding: 6rpx 10rpx;
+				background: #FFC107;
+				border-radius: 8rpx 8rpx 8rpx 8rpx;
+				font-weight: 500;
+				font-size: 24rpx;
+				color: #FFFFFF;
+				margin-right: 20rpx;
+			}
+			image{
+				margin-right: 12rpx;
+				width: 46rpx;
+				height: 46rpx;
+			}
+		}
+	}
+	.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;
+			}
+		}
+	} 
 	.page {
 		width: 750rpx;
 		.swiper {
-			height: 76vh !important;
+			height: 62vh !important;
-			padding-bottom: 230rpx;
+			// padding-bottom: 230rpx;
 			box-sizing: border-box;
 			.swiper-item {
 		        overflow: scroll;
@@ -359,107 +542,6 @@
 					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;
-							.type{
-								margin-left: 24rpx;
-								padding: 6rpx 10rpx;
-								background: #FFC107;
-								border-radius: 8rpx 8rpx 8rpx 8rpx;
-								font-weight: 500;
-								font-size: 24rpx;
-								color: #FFFFFF;
-								margin-right: 20rpx;
-							}
-							image{
-								margin-right: 12rpx;
-								width: 46rpx;
-								height: 46rpx;
-							}
-						}
-					}
 				}
 			}
 		}
@@ -556,4 +638,250 @@
 			}
 		}
 	}
+	.fd {
+		margin-top: 20rpx;
+		padding: 0 40rpx;
+		padding-bottom: 200rpx;
+		height: 100%;
+	
+		.fz {
+			margin: 0 -40rpx;
+			position: fixed;
+			bottom: 0;
+			width: 750rpx;
+			height: 830rpx;
+			background: #F7FAFE;
+			border-radius: 30rpx 30rpx 0 0;
+			z-index: 10071;
+			opacity: 0;
+			animation-name: fadeIn;
+			animation-duration: 1s;
+			animation-fill-mode: forwards;
+	
+			.fz_top {
+				margin: 18rpx 0 auto;
+				display: flex;
+				flex-wrap: nowrap;
+				justify-content: space-between;
+	
+				.icon-shanchu {
+					margin-left: 40rpx;
+					font-size: 50rpx;
+				}
+	
+				.tit {
+					font-size: 36rpx;
+					font-family: Source Han Sans, Source Han Sans;
+					font-weight: 400;
+					color: #000000;
+				}
+	
+				.txt {
+					margin-right: 40rpx;
+					font-size: 36rpx;
+					font-family: Source Han Sans, Source Han Sans;
+					font-weight: 400;
+					color: #2A82E4;
+	
+				}
+			}
+	
+			.card_cont {
+				width: 750rpx;
+				padding-left: 30rpx;
+				height: 100%;
+				overflow-y: auto;
+				overflow-x: hidden;
+	
+				.cards {
+					margin-top: 32rpx;
+					display: flex;
+					flex-wrap: nowrap;
+					align-items: center;
+					justify-content: space-between;
+					padding: 0 40rpx;
+					width: 682rpx;
+					border-radius: 30rpx;
+					height: 114rpx;
+					background: #FFFFFF;
+					box-shadow: 0rpx 16rpx 40rpx 0rpx rgba(42, 130, 228, 0.1);
+	
+					.txt {
+						font-size: 36rpx;
+						font-family: Source Han Sans, Source Han Sans;
+						font-weight: 400;
+						color: #000000;
+					}
+	
+					.num {
+						font-size: 36rpx;
+						font-family: Source Han Sans, Source Han Sans;
+						font-weight: 400;
+						color: #000000;
+					}
+				}
+			}
+		}
+	
+		.fd_top {
+			display: flex;
+			flex-wrap: nowrap;
+			align-items: center;
+	        margin-bottom: 20rpx;
+			.fd_da {
+				width: 664rpx;
+				overflow: hidden;
+				overflow-x: auto;
+				white-space: nowrap;
+				-ms-overflow-style: none;
+				/* 去除IE和Edge的默认滚动条 */
+				scrollbar-width: none;
+	
+				/* 去除Firefox的默认滚动条 */
+				&::-webkit-scrollbar {
+					display: none;
+				}
+	
+				.fd_lt {
+					display: flex;
+					transition: transform 0.3s ease;
+					padding-top: 10rpx;
+	
+					.fd_tit {
+						text-align: center;
+						padding: 0 15rpx;
+						box-sizing: border-box;
+						font-size: 34rpx;
+						font-weight: 400;
+						color: #666;
+	                    position: relative;
+					}
+				}
+			}
+	
+			.act1 {
+				font-size: 36rpx !important;
+				font-weight: 700 !important;
+				color: #000000 !important;
+			}
+	
+	
+	
+	
+			.right {
+				margin-left: auto;
+				display: flex;
+				flex-wrap: nowrap;
+				align-items: center;
+	
+				.fd_set {
+					font-size: 60rpx;
+				}
+	
+				.icon-liebiao {
+					margin-top: 10rpx;
+					margin-left: 20rpx;
+					font-size: 40rpx;
+				}
+			}
+	
+		}
+	
+		.shebei {
+			width: 750rpx;
+			height: 100vh;
+			position: fixed;
+			top: 0;
+			left: 0;
+			text-align: center;
+			padding-top: 300rpx;
+			font-size: 32rpx;
+			color: #ccc;
+		}
+	
+		.swiper {
+	
+			.swiper_item {
+				height: 100vh;
+				overflow-y: auto;
+				padding-bottom: 660rpx;
+	
+				.card_box {
+					margin-top: 34rpx;
+					display: flex;
+					flex-wrap: wrap;
+	
+					.card {
+						// display: flex;
+						// margin-top: 20rpx;
+						width: 680rpx;
+						max-height: 500rpx;
+						padding-bottom: 20rpx;
+						box-sizing: border-box;
+						background: #fff;
+						padding: 20rpx;
+						// box-shadow: 0rpx 16rpx 40rpx 0rpx rgba(255, 255, 255, 0);
+						 box-shadow: 0 4px 8px rgba(0,0,0,0.1); 
+						border-radius: 24rpx 24rpx 24rpx 24rpx;
+	
+						.card_left {
+							width: 100%;
+							margin-top: 20rpx;
+							margin-left: 50rpx;
+	
+							.card_left_tit {
+								font-size: 36rpx;
+								font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
+								font-weight: 600;
+								color: #8883F0;
+							}
+	
+							.card_left_sta {
+	
+								padding-top: 15rpx;
+								display: flex;
+								flex-wrap: nowrap;
+								align-items: center;
+	
+								image {
+									width: 23.32rpx;
+									height: 36.47rpx;
+	
+								}
+	
+								.sta_txt {
+									// margin-left: 15rpx;
+									color: #262B37;
+									font-size: 26rpx;
+									font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
+									font-weight: 400;
+								}
+							}
+	
+							.card_left_no {
+								padding-top: 15rpx;
+								font-size: 26rpx;
+								font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
+								font-weight: 400;
+								color: #95989D;
+							}
+						}
+	
+						.card_right {
+							margin-top: 30rpx;
+							margin-left: auto;
+							margin-right: 50rpx;
+	
+							image {
+								width: 180rpx;
+								height: 180rpx;
+								border-radius: 10rpx;
+							}
+						}
+					}
+				}
+			}
+		}
+	
+	}
 </style>