<template>
<!-- 蜂厂 -->
<view ref="pagebox" class=" page">
<!-- <view class="loading" v-show="showloading">
<view class="loading_box">
<u-loading-icon color='#fff'></u-loading-icon>
<text>loading...</text>
</view>
</view> -->
<view class="tip_box" v-if="show">
<div class="tip">
<div class="txt">请将该蜂场所有蜂箱移迁后再进行此操作！</div>
<div class="button" @click="show=false">返回</div>
</div>
</view>
<u-overlay :show="show" ></u-overlay>
<view class=" group_2 space-x-20 suosou-fc">
<!-- <view class="flex-auto section">
<view class="text_3">
<view class="inp-let-pa">
<image @click="aweepClick" class="image_6 inp-let-pa-zi" src="../../static/16994973961877418353.png" />
<input v-model="qrcode" @input="searchFn" placeholder="蜂箱（自定义）编号搜索" class="input-text" />
</view>
</view>
</view> -->
<!-- <image @click="xinzeng" class="image_5" src="../../static/b219311a779cd27f0f95a049dd683092.png" /> -->
</view>
<!-- 蜂场列表 -->
<view v-if="items.length>0" class=" list space-y-13">
<view class="section_2 space-y-16" v-for="(item, index) in items" :key="index">
<view class=" group_3 top-img">
<view class=" items-baseline space-x-6">
<text class="font_1">{{ item.name }}</text>
<text class="font_2">{{ item.create_date }}</text>
</view>
<view class="dianbox" ref="bubble" @click.stop="HiddenClick(item)">
<image class="image_7" src="/static/16994974061914098024.png"></image>
<!-- 气泡框 -->
<view v-if="item.ShowHidden">
<view class="arrivalNavigation">
<!-- <view class="d4"></view> -->
<view class="sideNavigation">
<view class="pop-text">
<view @click="editFengchang(item)">编辑蜂场</view>
<view @click="deleteFengchang(item)">删除蜂场</view>
</view>
</view>
</view>
<!-- 遮罩层 -->
<view class="mask-box"></view>
</view>
</view>
</view>
<!-- 列表 -->
<view class=" space-y-16">
<view class=" group_3 space-x-10">
<image class="image_8" src="../../static/16994974075140416617.png" />
<text class="font_3 font-ml">{{ item.address }}</text>
</view>
<view class="">
<!-- 温度 -->
<view class=" group_3 wendu-b" v-if="false">
<view class="">
<image class=" image_9" src="../../static/温度.png" />
<text class="font_3 font-ml">温度</text>
<text class="font_3">{{item.temperature}}</text>
</view>
<view class="">
<image class=" image_10" src="../../static/蜂箱-湿度.png" />
<text class="font_3 font-ml">湿度</text>
<text class="font_3">{{item.humidity}}</text>
</view>
<view class=" space-x-10">
<image class=" image_11" src="../../static/16994974076527700865.png" />
<text class="font_3 font-ml">风向</text>
<text class="font_3">{{item.wind_direction}}</text>
</view>
</view>
<!-- 品种 -->
<view class="top-img equal-division group_5">
<view class="tac-dainlaing group_6 equal-division-item space-y-8">
<image class="image_12" src="../../static/105e3b74b27e00556d9a51b77f90736d.png" />
<text class="font_4">{{item.bee_type_text}}</text>
</view>
<view class="tac-dainlaing group_7 equal-division-item space-y-8">
<image class="image_12" src="../../static/b98dbe4f082608897417a90315d1d9c2.png" />
<text class="font_4">{{item.honey_source_text}}</text>
</view>
<view class="tac-dainlaing group_7 equal-division-item space-y-8">
<image class="image_12" src="../../static/65743e63d23e304849b6fd0ca5f045c8.png" />
<text class="font_4">{{item.weight}}</text>
</view>
<view class="tac-dainlaing group_7 equal-division-item space-y-8">
<image class="image_12" src="../../static/e5e18447349367492c81f64ccec7ebcb.png" />
<text class="font_4 text_4">{{item.attendance}}</text>
</view>
<view class="tac-dainlaing group_7 equal-division-item space-y-8">
<image class="image_12" src="../../static/12193860188cd3652959a39cbca3cda4.png" />
<text class="font_4 text_4">{{item.warning}}</text>
</view>
</view>
<view class=" group_8 equal-division_2 button-box">
<view @click="todituFengchange(item)" class=" justify-start equal-division-item_3">
<text class="font_6">地 图</text>
</view>
<view class=" equal-division-item_3 space-x-8" @click="tofx(item.id)">
<text class="font_6">蜂 箱</text>
<text class="font_6">{{item.beehive_count}}</text>
</view>
</view>
</view>
</view>
</view>
<view class="addbutton">
<view class="addbutton-box" @click="xinzeng">添加蜂场
<image class="image_5" src="../../static/b219311a779cd27f0f95a049dd683092.png" />
</view>
</view>
</view>
<view v-else class="konghezi">
<u-empty mode="list" text="暂无蜂场">
<view class="tjbutton">
<u-button @click="xinzeng" size="large" shape="circle" text="添 加" color="#23693f"></u-button>
</view>
</u-empty>
</view>
</view>
</template>
<script>
import request from '../../utils/request'
export default {
components: {},
props: {},
data() {
return {
qrcode: '',
items: [],
page: 1,
ShowHidden: false,
showloading:false,
show: false,
tokenflag:false
};
},
onShow() {
// this.items=[]
uni.showLoading({
title: '加载中...',
mask: true,
success: function () {
// 显示成功的回调
},
});
this.listData(this.page)
setTimeout(()=>{
uni.hideLoading()
},1000)
},
methods: {
tofx(id){
uni.setStorageSync('targetId', id);
uni.switchTab({
url: '/pages/fengxiang/index'
});
},
searchFn() {
// 清除之前的定时器
clearTimeout(this.timer);
// 启动新的定时器，在5秒后触发 sendRequest 函数
this.timer = setTimeout(() => {
this.sendRequest();
}, 1000);
},
sendRequest() {
console.log(this.qrcode)
this.listData(this.page, this.qrcode)
// this.pageData('','',this.qrcode)
},
aweepClick() {
wx.scanCode({
onlyFromCamera: false, // 是否仅从相机启动，默认false
scanType: ['qrCode', 'barCode'], // 可以指定扫描的类型，比如二维码或者条形码，默认二者都有
success: res => { // 扫描成功后的回调
// console.log(res.result , '成功结果') // 打印扫描结果
this.qrcode = res.result
},
fail: res => { // 扫描失败后的回调
console.log(res, '失败结果') // 打印错误信息
}
})
},
todituFengchange(item) {
uni.navigateTo({
url: `/pagesFengChang/components/map?info=${JSON.stringify(item)}`
})
},
editFengchang(item) {
console.log("编辑蜂场");
console.log(item);
uni.navigateTo({
url: `/pagesFengChang/addfengchang/index?info=${JSON.stringify(item)}`
})
},
deleteFengchang(item) {
console.log(item,'itemitemitem');
if(item.beehive_count==0){
let that = this
uni.showModal({
title: "提示",
content: '确定要删除蜂场：' + item.name + "?",
success: function(res) {
if (res.confirm) {
// console.log('用户点击确定');
request.delete('/api/apiary/delete/' + item.id, {}).then(res => {
that.listData(that.page)
uni.showToast({
icon: "none",
title: "删除成功"
})
})
} else if (res.cancel) {
console.log('用户点击取消');
}
}
})
}else{
this.show=true
}
},
HiddenClick(item) {
this.items.forEach(e => {
// 后台数据有一个是false就进
if (item.ShowHidden == false) {
// 将这边存储的数据也修改为false
e.ShowHidden = false
}
})
item.ShowHidden = !item.ShowHidden
// this.ShowHidden = true
this.$forceUpdate()
},
listData(page, qrcode) {
this.showloading=true
console.log(page, qrcode, '5555555555555')
request.get('/api/apiary/index', {
page,
qrcode
}).then(res => {
if(res.code == 401){
this.tokenflag = false
uni.hideLoading()
}else {
this.tokenflag = true
this.items = [...res.data.data]
console.log(this.items)
this.showloading=false
uni.hideLoading()
}
})
// console.log(res.data.data)
},
// 跳转到新增的页面
xinzeng() {
if (this.tokenflag == true) {
uni.navigateTo({
url: '/pagesFengChang/addfengchang/index'
})
}else{
uni.navigateTo({
url:'/pages/login/index'
})
}
}
},
};
</script>
<style scoped lang="scss">
.loading {
z-index: 10074;
width: 224rpx;
height: 224rpx;
background-color: rgba(0, 0, 0, 0.5);
border-radius: 40rpx 40rpx 40rpx 40rpx;
position: fixed;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
.loading_box {
width: 100%;
height: 100%;
padding: 40rpx;
box-sizing: border-box;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
image {
width: 108rpx;
height: 108rpx;
display: block;
}
text {
margin-top: 12rpx;
width: 100%;
text-align: center;
display: block;
font-size: 24rpx;
font-family: Microsoft YaHei-Regular, Microsoft YaHei;
font-weight: 400;
color: #fff;
line-height: 24rpx;
}
}
}
.tip_box{
z-index: 10074;
width: 544rpx;
height: 238rpx;
opacity: 1;
border-radius: 30rpx;
background: rgba(255, 255, 255, 1);
position: fixed;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
.tip{
width: 100%;
height: 100%;
padding: 40rpx;
box-sizing: border-box;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
.txt{
width: 360rpx;
text-align: center;
font-size: 28rpx;
font-weight: 400;
color: rgba(68, 68, 68, 1);
}
.button{
display: flex;
justify-content: center;
align-items: center;
margin-top: 10rpx;
width: 222rpx;
height: 64rpx;
opacity: 1;
border-radius: 30rpx;
background: rgba(35, 105, 63, 1);
font-size: 28rpx;
font-weight: 400;
color: rgba(255, 255, 255, 1);
}
}
}
.addbutton-box {
padding: 10rpx 5rpx;
display: flex;
align-items: center;
justify-content: center;
background-color: #23693f;
width: 300rpx;
height: 60rpx;
border-radius: 40rpx;
}
.addbutton {
color: #fff;
display: flex;
justify-content: center;
align-items: center;
}
.fengchangbox {
width: 100vw;
height: 100vh;
}
.dianbox {
text-align: center;
width: 100rpx;
height: 50rpx;
}
// 气泡框的样式
.pop-text {
text-align: center;
font-size: 40rpx;
line-height: 100rpx;
padding: 30rpx 20rpx;
}
.mask-box {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background-color: rgba(0, 0, 0, 0.1);
z-index: 90;
}
.arrivalNavigation {
width: 250rpx;
position: absolute;
right: 55rpx;
z-index: 99;
.sideNavigation {
width: 248rpx;
background-color: #ffff;
box-shadow: 0px 0px 10px grey;
color: #000;
border-radius: 10rpx;
li {
height: 85rpx;
text-align: center;
line-height: 85rpx;
font-size: 25rpx;
}
}
.d4 {
// position: absolute;
// left: 140rpx;
width: 0;
height: 0;
margin-left: 150rpx;
margin-top: -20rpx;
border-width: 20rpx;
border-style: solid;
border-color: transparent #333 transparent transparent;
transform: rotate(90deg);
/*顺时针旋转90°*/
}
}
.tjbutton {
margin-top: 20rpx;
width: 230rpx;
}
.konghezi {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.flex-auto {
flex: 1
}
.button-box {
display: flex;
justify-content: space-around;
}
.wendu-b {
display: flex;
justify-content: space-between;
}
.top-img {
display: flex;
justify-content: space-between;
}
.tac-dainlaing {
display: flex;
flex-direction: column;
align-items: center;
}
.suosou-fc {
text-align: right;
// display: flex;
}
.font-ml {
margin-left: 10rpx;
}
.inp-let-pa {
// position: relative;
// text-align: center;
display: flex;
align-items: center;
}
.input-text {
font-weight: 500;
}
.inp-let-pa-zi {
margin-right: 10rpx;
// position: absolute;
// left: 100rpx;
// top: 100rpx;
}
.page {
width: 100%;
height: 100%;
position: absolute;
top: 0px;
bottom: 0px;
background-color: #f7f7f7;
// overflow-y: auto;
// overflow-x: hidden;
}
.group {
padding-left: 68rpx;
padding-right: 28rpx;
}
.text {
color: #7d7d7d;
font-size: 28rpx;
font-family: SourceHanSansCN;
font-weight: 700;
line-height: 22rpx;
}
.space-x-6>view:not(:first-child),
.space-x-6>text:not(:first-child),
.space-x-6>image:not(:first-child) {
margin-left: 12rpx;
}
// .image {
// width: 34rpx;
// height: 22rpx;
// }
// .image_2 {
// width: 30rpx;
// height: 22rpx;
// }
// .image_3 {
// width: 48rpx;
// height: 23rpx;
// }
.space-x-82-reverse>view:not(:last-child),
.space-x-82-reverse>text:not(:last-child),
.space-x-82-reverse>image:not(:last-child) {
margin-right: 164rpx;
}
.text_2 {
color: #000000;
font-size: 36rpx;
font-family: AlibabaPuHuiTi;
line-height: 33rpx;
}
.image_4 {
filter: drop-shadow(0px 4rpx 4rpx #00000040);
border-radius: 120rpx;
width: 158rpx;
height: 60rpx;
}
.group_2 {
margin-top: 50rpx;
padding: 0 48rpx;
}
.section {
/* padding: 8rpx 24rpx;
background-color: #ffffff;
height: 56rpx; */
padding: 8rpx 24rpx;
background-color: #ffffff;
// width: 558rpx;
border: solid 2rpx #ffffff;
border-radius: 120rpx;
}
.image_6 {
width: 40rpx;
height: 40rpx;
}
.text_3 {
// margin-right: 76rpx;
color: #888888;
font-size: 28rpx;
font-family: Nunito;
font-weight: 600;
// line-height: 27rpx;
}
.image_5 {
margin-left: 10rpx;
width: 53rpx;
height: 56rpx;
}
.list {
background-color: #f7f7f7;
margin-top: 36rpx;
padding: 0 22rpx 30rpx;
}
.space-y-13-color {
background-color: #f7f7f7;
}
.space-y-13>view:not(:first-child),
.space-y-13>text:not(:first-child),
.space-y-13>image:not(:first-child) {
margin-top: 26rpx;
}
.section_2 {
padding: 28rpx 0;
background-color: #ffffff;
border-radius: 20rpx;
}
.space-y-16>view:not(:first-child),
.space-y-16>text:not(:first-child),
.space-y-16>image:not(:first-child) {
margin-top: 32rpx;
}
.group_3 {
padding: 0 32rpx;
}
.font_1 {
font-size: 36rpx;
font-family: 微软雅黑;
line-height: 33rpx;
font-weight: 700;
color: #000000;
}
.font_2 {
font-size: 20rpx;
font-family: 微软雅黑;
line-height: 19rpx;
color: #888888;
}
.image_7 {
margin-top: 20rpx;
margin-right: 24rpx;
width: 45rpx;
height: 13rpx;
}
// .space-x-10>view:not(:first-child),
// .space-x-10>text:not(:first-child),
// .space-x-10>image:not(:first-child) {
// margin-left: 20rpx;
// }
.image_8 {
width: 22rpx;
height: 26rpx;
}
.font_3 {
font-size: 28rpx;
font-family: 微软雅黑;
line-height: 26rpx;
color: #444444;
}
.image_9 {
width: 18rpx;
height: 26rpx;
}
.group_4 {
margin-right: 28rpx;
}
.space-x-24>view:not(:first-child),
.space-x-24>text:not(:first-child),
.space-x-24>image:not(:first-child) {
margin-left: 48rpx;
}
.image_10 {
width: 20rpx;
height: 26rpx;
}
.image_11 {
width: 24rpx;
height: 26rpx;
}
.equal-division {
margin-top: 24rpx;
}
.group_5 {
padding: 0 36rpx;
}
.group_6 {
flex: 1 1 126rpx;
}
.image_12 {
width: 48rpx;
height: 48rpx;
}
.font_4 {
font-size: 24rpx;
// font-weight: 500;
font-family: 微软雅黑;
line-height: 25rpx;
color: #444444;
}
.group_7 {
flex: 1 1 126rpx;
margin-left: 20rpx;
}
.equal-division-item {
padding: 8rpx 0;
}
.space-y-8>view:not(:first-child),
.space-y-8>text:not(:first-child),
.space-y-8>image:not(:first-child) {
margin-top: 16rpx;
}
.font_5 {
font-size: 24rpx;
font-family: 微软雅黑;
line-height: 22rpx;
font-weight: 700;
color: #444444;
}
.text_4 {
text-transform: lowercase;
}
.group_8 {
align-self: center;
margin-top: 28rpx;
}
.equal-division-item_2 {
padding: 20rpx 0;
background-color: #23693f;
border-radius: 111rpx;
width: 222rpx;
height: 64rpx;
}
.font_6 {
font-size: 28rpx;
font-family: 微软雅黑;
line-height: 26rpx;
color: #ffffff;
}
.equal-division-item_3 {
padding: 20rpx 48rpx 20rpx 52rpx;
background-color: #23693f;
width: 150rpx;
text-align: center;
border-radius: 75rpx;
}
.space-x-8>view:not(:first-child),
.space-x-8>text:not(:first-child),
.space-x-8>image:not(:first-child) {
margin-left: 16rpx;
}
.space-x-20>view:not(:first-child),
.space-x-20>text:not(:first-child),
.space-x-20>image:not(:first-child) {
margin-left: 40rpx;
}
.equal-division_5 {
margin-top: 340rpx;
}
.section_5 {
background-color: #ffffff;
border-radius: 60rpx 60rpx 0 0;
border: solid 2rpx #f7f7f7;
}
.group_18 {
flex: 1 1 150rpx;
}
.equal-division-item_6 {
padding: 12rpx 0;
}
.space-y-6>view:not(:first-child),
.space-y-6>text:not(:first-child),
.space-y-6>image:not(:first-child) {
margin-top: 12rpx;
}
.font_8 {
font-size: 24rpx;
font-family: Poppins;
line-height: 22rpx;
color: #888888;
}
.text_8 {
color: #a6a6a6;
font-size: 22rpx;
line-height: 20rpx;
}
.text_9 {
color: #89c28c;
font-size: 22rpx;
line-height: 20rpx;
}
.space-y-4>view:not(:first-child),
.space-y-4>text:not(:first-child),
.space-y-4>image:not(:first-child) {
margin-top: 8rpx;
}
.text_10 {
font-size: 22rpx;
line-height: 20rpx;
}
.text_11 {
font-size: 22rpx;
line-height: 20rpx;
}
.image_14 {
filter: drop-shadow(0px 4rpx 4rpx #00000040);
width: 48rpx;
height: 48rpx;
}
.text_12 {
font-size: 22rpx;
line-height: 20rpx;
}
</style>