361 lines
7.8 KiB
Vue
361 lines
7.8 KiB
Vue
<template>
|
|
<view class="page">
|
|
<u-navbar :title="title" :border-bottom="false" :background="bgc" title-color='#000' title-size='36'
|
|
:title-bold='true' height='45' id="navbar">
|
|
</u-navbar>
|
|
<view class="tit">
|
|
扫描二维码
|
|
</view>
|
|
<view class="iptbox">
|
|
<view v-if="title == '添加蜂箱'" class="qrcode" @click="btnqrcode">
|
|
<image src="https://api.ccttiot.com/smartmeter/img/static/uy7BNwAMIKwvstqFnRhs" mode=""></image>
|
|
</view>
|
|
<view v-else class="qrcode">
|
|
<image src="https://api.ccttiot.com/smartmeter/img/static/uy7BNwAMIKwvstqFnRhs" mode=""></image>
|
|
</view>
|
|
<input v-if="title == '添加蜂箱'" type="text" class="ips" v-model="sn" placeholder="请扫描蜂箱上的二维码" style="margin-left: 32rpx;"
|
|
placeholder-class="my-placeholder" />
|
|
<input v-else type="text" class="ips" v-model="sn" disabled="true" placeholder="请扫描蜂箱上的二维码" style="margin-left: 32rpx;"
|
|
placeholder-class="my-placeholder" />
|
|
|
|
</view>
|
|
<view class="tit">
|
|
自定义蜂箱名称
|
|
</view>
|
|
<view class="iptbox">
|
|
<input type="text" class="ips" v-model="name" placeholder="请输入蜂箱的自定义名称"
|
|
placeholder-class="my-placeholder" />
|
|
|
|
</view>
|
|
<view class="tit">
|
|
所属蜂场
|
|
</view>
|
|
<view class="iptbox" @click="showmiyuan = true">
|
|
<input type="text" class="ips" v-model="fc" placeholder="请选择所属蜂场" placeholder-class="my-placeholder"
|
|
disabled />
|
|
<image src="https://api.ccttiot.com/smartmeter/img/static/ugAdKZm5ZHZ4to1cDsNI" mode=""></image>
|
|
</view>
|
|
<view class="tit">
|
|
设备ID或视频流地址
|
|
</view>
|
|
<view class="iptbox">
|
|
<input type="text" class="ips" v-model="videoStream" placeholder="请输入设备ID或视频流地址"
|
|
placeholder-class="my-placeholder"/>
|
|
|
|
</view>
|
|
<view class="btn" @click="btnadd" v-if="title == '添加蜂箱'">
|
|
确认添加
|
|
</view>
|
|
<view class="btn" @click="btnedit" v-else>
|
|
确认修改
|
|
</view>
|
|
<view class="btns" @click="btndel" v-if="title != '添加蜂箱'">
|
|
删除蜂场
|
|
</view>
|
|
<!-- 选择蜂场 -->
|
|
<u-select v-model="showmiyuan" :list="miyuancolumns" title='选择蜂场' @confirm="confirmmy"></u-select>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
bgc: {
|
|
backgroundColor: " #F4FAF8",
|
|
},
|
|
title: "添加蜂箱",
|
|
sn: '',
|
|
name: '',
|
|
videoStream: '',
|
|
fc: '',
|
|
fcid:'',
|
|
showmiyuan: false,
|
|
miyuancolumns: [],
|
|
pagesum: 1,
|
|
pagesize: 99,
|
|
beehiveId:'',
|
|
code:''
|
|
}
|
|
},
|
|
onLoad(option) {
|
|
if(option.tit){
|
|
this.title = option.tit
|
|
this.beehiveId = option.beehiveId
|
|
this.geteditxq()
|
|
}else{
|
|
this.title = '添加蜂箱'
|
|
}
|
|
this.getmiyuancolumns()
|
|
},
|
|
onShow() {
|
|
|
|
},
|
|
methods: {
|
|
btndel() {
|
|
let that = this;
|
|
uni.showModal({
|
|
title: "提示",
|
|
content: '确定要删除此蜂箱?请谨慎操作',
|
|
success: function(res) {
|
|
if (res.confirm) {
|
|
that.$u.delete(`/farm/beehive/${that.beehiveId}`).then(res => {
|
|
if (res.code == 200) {
|
|
uni.showToast({
|
|
title: '删除蜂箱成功',
|
|
icon: 'success',
|
|
duration: 1000
|
|
});
|
|
setTimeout(() => {
|
|
uni.navigateBack({
|
|
delta:2
|
|
});
|
|
}, 1500);
|
|
} else {
|
|
uni.showToast({
|
|
title: res.msg,
|
|
icon: 'none',
|
|
duration: 2000
|
|
});
|
|
}
|
|
})
|
|
.catch(error => {
|
|
console.error('删除蜂场失败:', error);
|
|
uni.showToast({
|
|
title: '删除蜂场失败，请稍后再试',
|
|
icon: 'none',
|
|
duration: 2000
|
|
});
|
|
});
|
|
}
|
|
}
|
|
});
|
|
},
|
|
|
|
// 修改部分
|
|
geteditxq(){
|
|
this.$u.get(`/farm/beehive/${this.beehiveId}`).then(res => {
|
|
if (res.code == 200) {
|
|
this.sn = res.data.sn
|
|
this.name = res.data.name
|
|
this.fc = res.data.apiaryName
|
|
this.videoStream = res.data.videoStream
|
|
this.fcid = res.data.apiaryId
|
|
}
|
|
})
|
|
},
|
|
btnedit(){
|
|
let data = {
|
|
beehiveId:this.beehiveId,
|
|
apiaryId:this.fcid,
|
|
name:this.name,
|
|
videoStream:this.videoStream
|
|
}
|
|
this.$u.put(`/farm/beehive`,data).then(res => {
|
|
if (res.code == 200) {
|
|
uni.showToast({
|
|
title: '修改成功',
|
|
icon: 'success',
|
|
duration:1000
|
|
})
|
|
setTimeout(()=>{
|
|
uni.navigateBack()
|
|
},1500)
|
|
}else{
|
|
uni.showToast({
|
|
title: res.msg,
|
|
icon: 'none',
|
|
duration: 2000
|
|
})
|
|
}
|
|
})
|
|
},
|
|
|
|
|
|
|
|
|
|
|
|
// 修改结束// 修改结束// 修改结束// 修改结束// 修改结束
|
|
btnqrcode(){
|
|
uni.scanCode({
|
|
onlyFromCamera: true,
|
|
scanType: ['qrCode'],
|
|
success: res => {
|
|
this.sn = res.result
|
|
},
|
|
fail: err => {
|
|
console.error('扫描失败：', err)
|
|
uni.showToast({
|
|
title: '扫描失败',
|
|
icon: 'none'
|
|
})
|
|
}
|
|
})
|
|
},
|
|
confirmmy(e){
|
|
this.fc = e[0].label
|
|
this.fcid = e[0].value
|
|
},
|
|
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
|
|
}))
|
|
} else {
|
|
// uni.showToast({
|
|
// title: res.msg,
|
|
// icon: 'none',
|
|
// duration: 2000
|
|
// })
|
|
}
|
|
})
|
|
},
|
|
btnadd() {
|
|
let data = {
|
|
sn:this.sn,
|
|
name:this.name,
|
|
apiaryId:this.fcid,
|
|
videoStream:this.videoStream
|
|
}
|
|
this.$u.put('farm/beehive/bind', data).then(res => {
|
|
if (res.code == 200) {
|
|
uni.showToast({
|
|
title: res.msg,
|
|
icon: 'success',
|
|
duration: 1000
|
|
})
|
|
setTimeout(()=>{
|
|
uni.navigateBack()
|
|
},1500)
|
|
}else if(res.code == 401){
|
|
uni.navigateTo({
|
|
url:'/pages/login/login'
|
|
})
|
|
} else {
|
|
uni.showToast({
|
|
title: res.msg,
|
|
icon: 'none',
|
|
duration: 2000
|
|
})
|
|
}
|
|
})
|
|
}
|
|
// addApiary(){
|
|
// uni.navigateTo({
|
|
// url:'/pages/Apiary/AddApiary'
|
|
// })
|
|
// }
|
|
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
page {
|
|
background-color: #F4FAF8;
|
|
}
|
|
|
|
.page {
|
|
// position: relative;
|
|
width: 750rpx;
|
|
|
|
.tit {
|
|
margin-top: 40rpx;
|
|
margin-left: 50rpx;
|
|
font-weight: 600;
|
|
font-size: 32rpx;
|
|
color: #3D3D3D;
|
|
}
|
|
|
|
.imgbox {
|
|
margin-top: 28rpx;
|
|
margin-left: 46rpx;
|
|
|
|
image {
|
|
width: 412rpx;
|
|
height: 222rpx;
|
|
}
|
|
}
|
|
.btns {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin: auto;
|
|
margin-top: 50rpx;
|
|
width: 658rpx;
|
|
height: 88rpx;
|
|
background: #D8D8D8;
|
|
border-radius: 20rpx 20rpx 20rpx 20rpx;
|
|
font-weight: 500;
|
|
font-size: 32rpx;
|
|
color: #808080;
|
|
}
|
|
|
|
.btn {
|
|
margin: 160rpx auto;
|
|
margin-bottom: 0;
|
|
// position: fixed;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
// bottom: 100rpx;
|
|
// left: 46rpx;
|
|
width: 658rpx;
|
|
height: 88rpx;
|
|
background: #FFCC25;
|
|
border-radius: 20rpx 20rpx 20rpx 20rpx;
|
|
|
|
font-weight: 500;
|
|
font-size: 32rpx;
|
|
color: #FFFFFF;
|
|
}
|
|
|
|
.iptbox {
|
|
display: flex;
|
|
align-items: center;
|
|
flex-wrap: nowrap;
|
|
padding: 22rpx;
|
|
margin: 28rpx auto 0;
|
|
width: 658rpx;
|
|
height: 88rpx;
|
|
background: #FFFFFF;
|
|
box-shadow: 0rpx 0rpx 8rpx 0rpx rgba(0, 0, 0, 0.15);
|
|
border-radius: 20rpx 20rpx 20rpx 20rpx;
|
|
|
|
.qrcode {
|
|
padding-right: 20rpx;
|
|
border-right: 2rpx solid #D8D8D8;
|
|
|
|
image {
|
|
width: 54rpx;
|
|
height: 54rpx;
|
|
}
|
|
}
|
|
|
|
.ips {
|
|
width: 630rpx;
|
|
|
|
}
|
|
|
|
image {
|
|
width: 18rpx;
|
|
height: 32rpx;
|
|
}
|
|
|
|
.my-placeholder {
|
|
font-weight: 400;
|
|
font-size: 32rpx;
|
|
color: #808080;
|
|
}
|
|
}
|
|
|
|
|
|
|
|
}
|
|
</style> |