313 lines
7.9 KiB
Vue
313 lines
7.9 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"></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"></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"></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"></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"></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"></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"></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">
|
|
低于<input type="text" v-model="di"/> {{danwei}}或高于 <input type="text" v-model="gao"/> {{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:'',
|
|
gao:'',
|
|
form:{
|
|
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:'',
|
|
},
|
|
maskflag:false
|
|
}
|
|
},
|
|
onLoad(option) {
|
|
this.apiaryId = option.apiaryId
|
|
this.getlist()
|
|
},
|
|
onShow() {
|
|
|
|
},
|
|
methods: {
|
|
btnqx(){
|
|
this.maskflag = false
|
|
},
|
|
btnfx(num){
|
|
this.maskflag = true
|
|
if(num == 1){
|
|
this.danwei = '℃'
|
|
this.fxtxt = '温度'
|
|
}else if(num == 2){
|
|
this.danwei = '℃'
|
|
this.fxtxt = '湿度'
|
|
}else if(num == 5){
|
|
this.danwei = '℃'
|
|
this.fxtxt = '电量'
|
|
} else if(num == 3){
|
|
this.danwei = 'g'
|
|
this.fxtxt = '重量'
|
|
}else if(num == 4){
|
|
this.danwei = '只'
|
|
this.fxtxt = '进出量'
|
|
}else if(num == 6){
|
|
this.danwei = ''
|
|
this.fxtxt = '频率'
|
|
}else if(num == 7){
|
|
this.danwei = 'Km'
|
|
this.fxtxt = '范围'
|
|
}
|
|
},
|
|
getlist(){
|
|
this.$u.get(`/farm/warnSetting/apiary/${this.apiaryId}`).then(res => {
|
|
if(res.code == 200){
|
|
this.form = res.data
|
|
}
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</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;
|
|
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: 30rpx;
|
|
box-sizing: border-box;
|
|
}
|
|
}
|
|
.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> |