<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> <!-- <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="fd"> <!-- 刷新动画 --> <!-- <view class="shuaxin"> <image src="https://api.ccttiot.com/smartmeter/img/static/uO9UFjzbzS9YlabzL4HV" mode="aspectFit"></image> </view> --> <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"> {{item.name == null ? '--' : item.name}} </view> <view class="online" :id="item.onlineStatus == 0 ? 'status' : ''"> {{item.onlineStatus == 0 ? '离线' : '在线'}} </view> <view class="ele"> <view class="type" @click.stop="btngengxin(item,index)"> 更新数据 </view> <view class="one"> <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> <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> </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: [{name:'全部',count:'0'}], pagesum: 1, pagesize: 99, pagesizes: 10, fxlist:[], total: '', apiaryId:'', indextab:0, logoflag:false, wateringList:[], touchStartX: 0, // 触屏起始点x touchStartY: 0, // 触屏起始点y qingqiuflag:true, shujuflag: false, } }, onLoad() { }, onShow() { this.indextab = 0 this.pagesum = 1 this.curtitidx = 0 this.apiaryId = '' 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(item, index) { uni.showLoading({ title: '数据更新中...', mask: true }); this.$u.put(`app/beehive/iot/${item.beehiveId}/upload`).then(res => { if(res.code == 200){ setTimeout(()=>{ this.$u.get(`app/beehive/${item.beehiveId}?refreshIot=true`).then(res => { if (res.code === 200) { uni.showToast({ title: res.msg, icon: 'success', duration: 2000 }) const wateringList = this.miyuancolumns[index].wateringList; const matchingIndex = wateringList.findIndex(val => val.beehiveId === item.beehiveId); if (matchingIndex !== -1) { console.log('Before update:', wateringList[matchingIndex]); // 检查更新前的对象 Object.assign(wateringList[matchingIndex], res.data); console.log('After update:', wateringList[matchingIndex]); // 检查更新后的对象 } } else { uni.showToast({ title: res.msg, icon: 'none', duration: 2000 }) } }).catch(error => { uni.showToast({ title: '请求失败,请稍后再试', icon: 'none', duration: 2000 }) }) },2000) } }) }, // 进行蜂箱搜索 changserch(){ this.pagesum = 1 this.getlist() }, // 点击蜂箱详情进行页面跳转 todetail(beehiveId){ uni.navigateTo({ url:'/page_Beehive/Beehive_detail?beehiveId=' + beehiveId }) }, // 点击tab请求tab中的蜂箱 btntab(index,item){ this.curtitidx = index this.pagesum = 1 this.apiaryId = this.miyuancolumns[this.curtitidx].value this.getlist() }, // 请求蜂箱列表 getlist(){ let data = { pageNum:this.pagesum, pageSize:this.pagesizes, apiaryId:this.apiaryId, 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.pagesum > 1){ 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.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++ } } }else{ uni.hideLoading() } }) }, // 请求蜂箱tab导航栏 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, name: item.name, count:item.beehiveCount })) this.miyuancolumns.unshift({ name: '全部',value:'',count:'-1'}) console.log(this.miyuancolumns); this.apiaryId = this.miyuancolumns[0].value this.getlist() } else { } }) }, swiperchange(e) { this.curtitidx = e.detail.current this.pagesum = 1 this.apiaryId = this.miyuancolumns[this.curtitidx].value this.getlist() }, // 点击跳转到添加蜂箱页面 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; width: 46rpx; height: 46rpx; background: #FFC107; border-radius: 50%; position: absolute; top: 4rpx; left: 0rpx; opacity: .7; z-index: -1; } #status{ background-color: #808080; } 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: 62vh !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; } } } .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; } } } .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>