401 lines
10 KiB
Vue
401 lines
10 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">
|
|
蜂箱温度预警
|
|
<u-switch v-model="form.enableTemperature" active-color="#FFC107" @change="chang"></u-switch>
|
|
</view>
|
|
<view class="iptbox" @click="btnfx(1)">
|
|
<input type="text" class="ips" v-model="form.address"
|
|
:placeholder="'低于' + form.minTemperature + '℃或高于' + form.maxTemperature + '℃时'"
|
|
placeholder-class="my-placeholder" disabled />
|
|
<image src="https://api.ccttiot.com/smartmeter/img/static/ugAdKZm5ZHZ4to1cDsNI" mode=""></image>
|
|
</view>
|
|
<view class="tit">
|
|
蜂箱湿度预警
|
|
<u-switch v-model="form.enableHumidity" active-color="#FFC107" @change="chang"></u-switch>
|
|
</view>
|
|
<view class="iptbox" @click="btnfx(2)">
|
|
<input type="text" class="ips" v-model="form.address"
|
|
:placeholder="'低于' + form.minHumidity + '%或高于' + form.maxHumidity + '%时'"
|
|
placeholder-class="my-placeholder" disabled />
|
|
<image src="https://api.ccttiot.com/smartmeter/img/static/ugAdKZm5ZHZ4to1cDsNI" mode=""></image>
|
|
</view>
|
|
<view class="tit">
|
|
蜂箱重量预警
|
|
<u-switch v-model="form.enableWeight" active-color="#FFC107" @change="chang"></u-switch>
|
|
</view>
|
|
<view class="iptbox" @click="btnfx(3)">
|
|
<input type="text" class="ips" v-model="form.address"
|
|
:placeholder="'低于' + form.minWeight + 'g或高于' + form.maxWeight + 'g时'" placeholder-class="my-placeholder"
|
|
disabled />
|
|
<image src="https://api.ccttiot.com/smartmeter/img/static/ugAdKZm5ZHZ4to1cDsNI" mode=""></image>
|
|
</view>
|
|
<view class="tit">
|
|
蜂箱进出量预警
|
|
<u-switch v-model="form.enableIo" active-color="#FFC107" @change="chang"></u-switch>
|
|
</view>
|
|
<view class="iptbox" @click="btnfx(4)">
|
|
<input type="text" class="ips" v-model="form.address"
|
|
:placeholder="'低于' + form.minIo + '只或高于' + form.maxIo + '只时'" placeholder-class="my-placeholder"
|
|
disabled />
|
|
<image src="https://api.ccttiot.com/smartmeter/img/static/ugAdKZm5ZHZ4to1cDsNI" mode=""></image>
|
|
</view>
|
|
<view class="tit">
|
|
蜂箱电量预警
|
|
<u-switch v-model="form.enablePower" active-color="#FFC107" @change="chang"></u-switch>
|
|
</view>
|
|
<view class="iptbox" @click="btnfx(5)">
|
|
<input type="text" class="ips" v-model="form.address" :placeholder="'低于' + form.minPower + '%时'"
|
|
placeholder-class="my-placeholder" disabled />
|
|
<image src="https://api.ccttiot.com/smartmeter/img/static/ugAdKZm5ZHZ4to1cDsNI" mode=""></image>
|
|
</view>
|
|
<view class="tit">
|
|
蜂箱频率预警
|
|
<u-switch v-model="form.enableHz" active-color="#FFC107" @change="chang"></u-switch>
|
|
</view>
|
|
<view class="iptbox" @click="btnfx(6)">
|
|
<input type="text" class="ips" v-model="form.address"
|
|
:placeholder="'低于' + form.minHz + '或高于' + form.maxHz + '时'" placeholder-class="my-placeholder"
|
|
disabled />
|
|
<image src="https://api.ccttiot.com/smartmeter/img/static/ugAdKZm5ZHZ4to1cDsNI" mode=""></image>
|
|
</view>
|
|
<view class="tit">
|
|
电子围栏范围预警
|
|
<u-switch v-model="form.enableFence" active-color="#FFC107" @change="chang"></u-switch>
|
|
</view>
|
|
<view class="iptbox" @click="btnfx(7)">
|
|
<input type="text" class="ips" v-model="form.address" :placeholder="'低于' + form.minFence + 'Km时'"
|
|
placeholder-class="my-placeholder" disabled />
|
|
<image src="https://api.ccttiot.com/smartmeter/img/static/ugAdKZm5ZHZ4to1cDsNI" mode=""></image>
|
|
</view>
|
|
|
|
<!-- 弹窗 -->
|
|
<view class="tanc" v-if="maskflag">
|
|
<image src="https://api.ccttiot.com/smartmeter/img/static/uvvzP7sIDIFpA8ErtRaL" mode=""></image>
|
|
<view class="top">
|
|
蜂箱{{fxtxt}}预警范围
|
|
</view>
|
|
<view class="shuzhi" v-if="dange">
|
|
低于<input type="text" v-model="di" /> {{danwei}}或高于 <input type="text" v-model="gao" /> {{danwei}}时
|
|
</view>
|
|
<view class="shuzhi" v-if="fxtxt == '电量'">
|
|
低于<input type="text" v-model="zhong" /> {{danwei}}时
|
|
</view>
|
|
<view class="shuzhi" v-if="fxtxt == '范围'">
|
|
超过<input type="text" v-model="zhong" /> {{danwei}}时
|
|
</view>
|
|
<view class="anniu">
|
|
<view class="qux" @click="btnqx">
|
|
取消
|
|
</view>
|
|
<view class="qd" @click="btnqd">
|
|
确定
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="mask" v-if="maskflag"></view>
|
|
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
bgc: {
|
|
backgroundColor: " #F4FAF8",
|
|
},
|
|
title: "预警设置",
|
|
apiaryId: '',
|
|
fxtxt: '',
|
|
danwei: '',
|
|
di: '',
|
|
zhong: '',
|
|
gao: '',
|
|
dange: true,
|
|
form: {
|
|
id:'',
|
|
enableTemperature: false,
|
|
enableHumidity: false,
|
|
enableWeight: false,
|
|
enableIo: false,
|
|
enablePower: false,
|
|
enableHz: false,
|
|
enableFence: false,
|
|
minTemperature: '',
|
|
maxTemperature: '',
|
|
minHumidity: '',
|
|
maxHumidity: '',
|
|
minWeight: '',
|
|
maxWeight: '',
|
|
minIo: '',
|
|
maxIo: '',
|
|
minPower: '',
|
|
minHz: '',
|
|
maxHz: '',
|
|
minFence: '',
|
|
zhong: ''
|
|
},
|
|
maskflag: false,
|
|
}
|
|
},
|
|
onLoad(option) {
|
|
this.apiaryId = option.apiaryId
|
|
this.getlist()
|
|
},
|
|
onShow() {
|
|
|
|
},
|
|
methods: {
|
|
chang(e){
|
|
this.btnqd()
|
|
},
|
|
btnqd() {
|
|
if(this.fxtxt == '温度'){
|
|
this.form.minTemperature = this.di
|
|
this.form.maxTemperature = this.gao
|
|
}else if(this.fxtxt == '湿度'){
|
|
this.form.minHumidity = this.di
|
|
this.form.maxHumidity = this.gao
|
|
}else if(this.fxtxt == '重量'){
|
|
this.form.minWeight = this.di
|
|
this.form.maxWeight = this.gao
|
|
}else if(this.fxtxt == '进出量'){
|
|
this.form.minIo = this.di
|
|
this.form.maxIo = this.gao
|
|
}else if(this.fxtxt == '电量'){
|
|
this.form.minPower = this.zhong
|
|
}else if(this.fxtxt == '频率'){
|
|
this.form.minHz = this.di
|
|
this.form.maxHz = this.gao
|
|
}else if(this.fxtxt == '范围'){
|
|
this.form.minFence = this.zhong
|
|
}
|
|
let data = this.form
|
|
this.$u.put(`/farm/warnSetting`,data).then(res => {
|
|
if (res.code == 200) {
|
|
uni.showToast({
|
|
title: '操作成功',
|
|
icon: 'success',
|
|
duration: 1000
|
|
})
|
|
this.getlist()
|
|
this.maskflag = false
|
|
this.dange = true
|
|
}else{
|
|
uni.showToast({
|
|
title: res.msg,
|
|
icon: 'none',
|
|
duration: 2000
|
|
})
|
|
}
|
|
})
|
|
},
|
|
btnqx() {
|
|
this.maskflag = false
|
|
this.dange = true
|
|
},
|
|
btnfx(num) {
|
|
this.maskflag = true
|
|
if (num == 1) {
|
|
this.danwei = '℃'
|
|
this.fxtxt = '温度'
|
|
this.di = this.form.minTemperature
|
|
this.gao = this.form.maxTemperature
|
|
} else if (num == 2) {
|
|
this.danwei = '%'
|
|
this.fxtxt = '湿度'
|
|
this.di = this.form.minHumidity
|
|
this.gao = this.form.maxHumidity
|
|
} else if (num == 5) {
|
|
this.danwei = '%'
|
|
this.fxtxt = '电量'
|
|
this.zhong = this.form.minPower
|
|
this.dange = false
|
|
} else if (num == 3) {
|
|
this.danwei = 'g'
|
|
this.fxtxt = '重量'
|
|
this.di = this.form.minWeight
|
|
this.gao = this.form.maxWeight
|
|
} else if (num == 4) {
|
|
this.danwei = '只'
|
|
this.fxtxt = '进出量'
|
|
this.di = this.form.minIo
|
|
this.gao = this.form.maxIo
|
|
} else if (num == 6) {
|
|
this.danwei = ''
|
|
this.fxtxt = '频率'
|
|
this.di = this.form.minHz
|
|
this.gao = this.form.maxHz
|
|
} else if (num == 7) {
|
|
this.danwei = 'Km'
|
|
this.fxtxt = '范围'
|
|
this.zhong = this.form.minFence
|
|
this.dange = false
|
|
}
|
|
},
|
|
getlist() {
|
|
this.$u.get(`/farm/warnSetting/apiary/${this.apiaryId}`).then(res => {
|
|
if (res.code == 200) {
|
|
this.form = res.data
|
|
console.log(this.form);
|
|
}
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
page {
|
|
background-color: #F4FAF8;
|
|
}
|
|
|
|
.page {
|
|
// position: relative;
|
|
padding-bottom: 200rpx;
|
|
width: 750rpx;
|
|
|
|
.mask {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
z-index: 97;
|
|
width: 100%;
|
|
height: 100vh;
|
|
background: rgba(61, 61, 61, 0.2);
|
|
}
|
|
|
|
.tanc {
|
|
width: 594rpx;
|
|
height: 420rpx;
|
|
background: #FFFFFF;
|
|
border-radius: 30rpx 30rpx 30rpx 30rpx;
|
|
position: fixed;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
top: 506rpx;
|
|
z-index: 98;
|
|
|
|
.anniu {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
padding: 0 44rpx;
|
|
box-sizing: border-box;
|
|
margin-top: 64rpx;
|
|
width: 100%;
|
|
|
|
.qux {
|
|
width: 234rpx;
|
|
height: 80rpx;
|
|
border-radius: 40rpx 40rpx 40rpx 40rpx;
|
|
border: 2rpx solid #FFC107;
|
|
font-size: 36rpx;
|
|
color: #FFC107;
|
|
text-align: center;
|
|
line-height: 80rpx;
|
|
}
|
|
|
|
.qd {
|
|
width: 234rpx;
|
|
height: 80rpx;
|
|
background: #FFC107;
|
|
border-radius: 40rpx 40rpx 40rpx 40rpx;
|
|
font-size: 36rpx;
|
|
color: #FFFFFF;
|
|
text-align: center;
|
|
line-height: 80rpx;
|
|
}
|
|
}
|
|
|
|
.shuzhi {
|
|
display: flex;
|
|
align-items: center;
|
|
// justify-content: space-between;
|
|
justify-content: center;
|
|
// padding: 0 60rpx;
|
|
margin-top: 50rpx;
|
|
box-sizing: border-box;
|
|
|
|
input {
|
|
width: 96rpx;
|
|
height: 76rpx;
|
|
border-radius: 10rpx 10rpx 10rpx 10rpx;
|
|
border: 2rpx solid #808080;
|
|
padding-left: 10rpx;
|
|
box-sizing: border-box;
|
|
margin: 0 10rpx;
|
|
}
|
|
}
|
|
|
|
.top {
|
|
font-weight: 600;
|
|
font-size: 36rpx;
|
|
color: #3D3D3D;
|
|
width: 100%;
|
|
text-align: center;
|
|
padding-top: 40rpx;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
image {
|
|
width: 198rpx;
|
|
height: 172rpx;
|
|
position: absolute;
|
|
top: 12rpx;
|
|
right: 20rpx;
|
|
opacity: .5;
|
|
}
|
|
}
|
|
|
|
.tit {
|
|
margin-right: 49rpx;
|
|
display: flex;
|
|
flex-wrap: nowrap;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
margin-top: 40rpx;
|
|
margin-left: 50rpx;
|
|
font-weight: 600;
|
|
font-size: 32rpx;
|
|
color: #3D3D3D;
|
|
}
|
|
|
|
.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;
|
|
|
|
.ips {
|
|
width: 630rpx;
|
|
|
|
}
|
|
|
|
image {
|
|
width: 18rpx;
|
|
height: 32rpx;
|
|
}
|
|
|
|
.my-placeholder {
|
|
font-weight: 400;
|
|
font-size: 32rpx;
|
|
color: #808080;
|
|
}
|
|
}
|
|
|
|
|
|
|
|
}
|
|
</style> |