1038 lines
24 KiB
Vue
1038 lines
24 KiB
Vue
|
<template>
|
||
|
|
<view class="fertilizer_machine">
|
||
|
|
<u-navbar :background="background" :is-back='true' back-icon-color='#FFFFFF' :border-bottom="false" title="施肥机"
|
||
|
|
title-color='#FFFFFF' :title-bold='true' title-size='32'></u-navbar>
|
||
|
|
|
||
|
|
<view class="content">
|
||
|
|
<view class="output_valve">
|
||
|
|
<view class="title">
|
||
|
|
<image src="../../static/output_valve.png" mode=""></image>
|
||
|
|
<text>输出电磁阀</text>
|
||
|
|
</view>
|
||
|
|
<view class="detail">
|
||
|
|
<template v-for="(item,index) in 64">
|
||
|
|
<view class="item" v-if="centerBottom.indexOf(index) != -1">
|
||
|
|
{{ index + 1 }}#
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
|
||
|
|
<view class="dataInfo1">
|
||
|
|
<view class="item">
|
||
|
|
<view class="img">
|
||
|
|
<image src="../../static/PH1.png" mode=""></image>
|
||
|
|
</view>
|
||
|
|
<text>目标PH</text>
|
||
|
|
<text>{{ countData100(inputData['6']) }}</text>
|
||
|
|
</view>
|
||
|
|
<view class="item">
|
||
|
|
<view class="img">
|
||
|
|
<image src="../../static/PH1.png" mode=""></image>
|
||
|
|
</view>
|
||
|
|
<text>实测PH</text>
|
||
|
|
<text>{{ countData100(inputData['8']) }}</text>
|
||
|
|
</view>
|
||
|
|
<view class="item1">
|
||
|
|
<view class="img">
|
||
|
|
<image src="../../static/EC.png" mode=""></image>
|
||
|
|
</view>
|
||
|
|
<text>目标EC</text>
|
||
|
|
<text>{{ countData100(inputData['7']) }}</text>
|
||
|
|
</view>
|
||
|
|
<view class="item1">
|
||
|
|
<view class="img">
|
||
|
|
<image src="../../static/EC.png" mode=""></image>
|
||
|
|
</view>
|
||
|
|
<text>实测EC</text>
|
||
|
|
<text>{{ countData100(inputData['9']) }}</text>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
|
||
|
|
<view class="dataInfo2">
|
||
|
|
<view class="top">
|
||
|
|
<view class="item" v-for="(item,index) in dataInfo2_list" :key="index">
|
||
|
|
<image :src="item.image" mode=""></image>
|
||
|
|
<text>{{ item.title }}</text>
|
||
|
|
<text>{{ item.timer }}</text>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<view class="bottom">
|
||
|
|
<view class="btn-1" :class="left1Act == 0 ? 'in' : 'out'">
|
||
|
|
<image v-if="left1Act == 0" src="../../static/in-sel.png" mode=""></image>
|
||
|
|
<image v-else src="../../static/in.png" mode=""></image>
|
||
|
|
<text>进水泵</text>
|
||
|
|
</view>
|
||
|
|
<view class="btn-2" :class="left1Act == 1 ? 'in' : 'out'">
|
||
|
|
<image v-if="left1Act == 1" src="../../static/out-sel.png" mode=""></image>
|
||
|
|
<image v-else src="../../static/out.png" mode=""></image>
|
||
|
|
<text>配肥泵</text>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
|
||
|
|
<view class="signal">
|
||
|
|
<view :class="right2Index.indexOf(index) != -1?'item_act':'item'" v-for="(item,index) in rightList2"
|
||
|
|
:key="index">
|
||
|
|
{{item}}
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
|
||
|
|
<view class="set">
|
||
|
|
<view class="item" v-for="(item,index) in 16" :key="index" @click="showPop(index+1)">
|
||
|
|
<view class="left">
|
||
|
|
{{index+1}}#灌溉组
|
||
|
|
</view>
|
||
|
|
<view class="right">
|
||
|
|
<text>设置</text>
|
||
|
|
<image src="../../static/downArrow.png" mode=""></image>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
|
||
|
|
<u-popup v-model="show" mode="center" width="640rpx" height="860rpx" :closeable='false'>
|
||
|
|
<view class="contentPop">
|
||
|
|
<view class="contentPop_box">
|
||
|
|
<view class="title">
|
||
|
|
灌溉组#{{indexs+1}}
|
||
|
|
</view>
|
||
|
|
<view class="control_model">
|
||
|
|
<view class="control">
|
||
|
|
控制模式:
|
||
|
|
</view>
|
||
|
|
<view class="model">
|
||
|
|
<text @click="change00(1)" :class="topActive==1?'stop_act':'stop'"
|
||
|
|
class="stop">停止</text>
|
||
|
|
<text @click="change00(2)" :class="topActive==2?'hand_act':'hand'" class="hand"
|
||
|
|
style="width: 140rpx;">手动启动</text>
|
||
|
|
<text @click="change00(3)" :class="topActive==3?'auto_act':'auto'">自动</text>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<view class="irrigate_time1">
|
||
|
|
手动启动时间
|
||
|
|
<view class="irrigate_input">
|
||
|
|
<input v-model="inputData1[10 + (indexs - 1) + '01']"
|
||
|
|
@input="changeData10(10 + (indexs - 1) + '01', $event)" type="number" placeholder="0" />
|
||
|
|
<!-- <u-input v-model="inputData[10 + (indexs - 1) + '01']" type="text" :border="false" input-align='center'
|
||
|
|
height='66' :clearable='false' /> -->
|
||
|
|
</view>
|
||
|
|
min
|
||
|
|
</view>
|
||
|
|
<view class="irrigate_time1">
|
||
|
|
灌溉
|
||
|
|
<view class="irrigate_input">
|
||
|
|
<input v-model="inputData1[10 + (indexs - 1) + '51']"
|
||
|
|
@input="change(10 + (indexs - 1) + '51', $event)" type="number" placeholder="0" />
|
||
|
|
<!-- <u-input v-model="inputData[10 + (indexs - 1) + '51']" type="text" :border="false" input-align='center'
|
||
|
|
height='66' :clearable='false' /> -->
|
||
|
|
</view>
|
||
|
|
次清水
|
||
|
|
</view>
|
||
|
|
<view class="irrigate_time2">
|
||
|
|
间隔灌溉
|
||
|
|
<view class="irrigate_input">
|
||
|
|
<input v-model="inputData1[10 + (indexs - 1) + '52']"
|
||
|
|
@input="change(10 + (indexs - 1) + '52', $event)" type="number" placeholder="0" />
|
||
|
|
<!-- <u-input v-model="inputData[10 + (indexs - 1) + '52']" type="text" input-align='center' height='66'
|
||
|
|
:clearable='false' /> -->
|
||
|
|
</view>
|
||
|
|
次施肥
|
||
|
|
</view>
|
||
|
|
<!-- <view class="changeMoreBtn">
|
||
|
|
<image src="../../static/changeMore.png" mode=""></image>
|
||
|
|
<text>修改更多参数</text>
|
||
|
|
</view> -->
|
||
|
|
</view>
|
||
|
|
|
||
|
|
<image src="../../static/closed.png" mode="" @click="closePop"></image>
|
||
|
|
</view>
|
||
|
|
</u-popup>
|
||
|
|
</view>
|
||
|
|
<u-toast ref="uToast" />
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
export default {
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
// 头部导航背景
|
||
|
|
background: {
|
||
|
|
backgroundColor: '#24B383',
|
||
|
|
},
|
||
|
|
// 输出电磁阀
|
||
|
|
|
||
|
|
dataInfo2_list: [{
|
||
|
|
image: '../../static/icon_1.png',
|
||
|
|
title: '灌溉剩余时长',
|
||
|
|
timer: '0min'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
image: '../../static/icon_2.png',
|
||
|
|
title: '灌溉瞬时流量',
|
||
|
|
timer: '0L/h'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
image: '../../static/icon_3.png',
|
||
|
|
title: '本次灌溉量',
|
||
|
|
timer: '0L'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
image: '../../static/icon_4.png',
|
||
|
|
title: '启动方式',
|
||
|
|
timer: '无'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
image: '../../static/icon_5.png',
|
||
|
|
title: '使用灌溉配方号',
|
||
|
|
timer: '0'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
image: '../../static/icon_6.png',
|
||
|
|
title: '执行灌溉组号',
|
||
|
|
timer: '0'
|
||
|
|
},
|
||
|
|
],
|
||
|
|
|
||
|
|
signalCurrent: 0,
|
||
|
|
|
||
|
|
show: false,
|
||
|
|
rightList2: ['外控信号2#',
|
||
|
|
'外控信号1#',
|
||
|
|
'外控信号3#',
|
||
|
|
'外控信号4#',
|
||
|
|
'高液位信号',
|
||
|
|
'中液位信号',
|
||
|
|
'低液位信号',
|
||
|
|
'电机信号',
|
||
|
|
],
|
||
|
|
irrigate_value1: 0,
|
||
|
|
irrigate_value2: 0,
|
||
|
|
irrigate_value3: 0,
|
||
|
|
deviceId: 0,
|
||
|
|
inputData: [],
|
||
|
|
centerBottom: [],
|
||
|
|
right2Index: [],
|
||
|
|
openType: '',
|
||
|
|
left1Act: -1,
|
||
|
|
|
||
|
|
topActive: 0,
|
||
|
|
indexs: 1,
|
||
|
|
inputData1: []
|
||
|
|
};
|
||
|
|
},
|
||
|
|
watch: {
|
||
|
|
|
||
|
|
},
|
||
|
|
onLoad(option) {
|
||
|
|
this.deviceId = option.id
|
||
|
|
this.dataInit()
|
||
|
|
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
countData10(data){
|
||
|
|
if(data){
|
||
|
|
return data/10
|
||
|
|
}else{
|
||
|
|
return 0
|
||
|
|
}
|
||
|
|
},
|
||
|
|
dataInit() {
|
||
|
|
const that= this
|
||
|
|
var deviceId = this.deviceId
|
||
|
|
var data = {
|
||
|
|
"equipmentId": deviceId,
|
||
|
|
"pattern": 0, //需要根据文档填写 //6目标ph-数值
|
||
|
|
"regNum": 71
|
||
|
|
}
|
||
|
|
this.$http({
|
||
|
|
url: this.api.readFs_state,
|
||
|
|
data: data
|
||
|
|
}).then(res => {
|
||
|
|
if (res.code == 200) {
|
||
|
|
this.inputData = res.data;
|
||
|
|
this.getData30() //数据30/进水出水泵
|
||
|
|
this.getData29() //数据29 启动方式/信号
|
||
|
|
this.getDataInfo2()
|
||
|
|
this.getcenterBottom() //获取电磁阀
|
||
|
|
} else {
|
||
|
|
that.$refs.uToast.show({
|
||
|
|
title: res.msg,
|
||
|
|
type: 'error',
|
||
|
|
})
|
||
|
|
}
|
||
|
|
})
|
||
|
|
|
||
|
|
|
||
|
|
},
|
||
|
|
getReg() {
|
||
|
|
const that= this
|
||
|
|
var data = {
|
||
|
|
equipmentId: this.deviceId,
|
||
|
|
pattern: 10 + (this.indexs - 1) + "00", //需要根据文档填写 //6目标ph-数值
|
||
|
|
regNum: 61,
|
||
|
|
};
|
||
|
|
|
||
|
|
this.$http({
|
||
|
|
url: this.api.readFs_reg,
|
||
|
|
data: data
|
||
|
|
}).then((res) => {
|
||
|
|
console.log(res, 11);
|
||
|
|
if (res.code == 200) {
|
||
|
|
this.inputData1 = res.data;
|
||
|
|
this.getType00();
|
||
|
|
this.inputData1[10 + (this.indexs - 1) + '01']=this.countData10(this.inputData1[10 + (this.indexs - 1) + '01'])
|
||
|
|
console.log(this.inputData1[10 + (this.indexs - 1) + '01'],111);
|
||
|
|
} else {
|
||
|
|
that.$refs.uToast.show({
|
||
|
|
title: res.msg,
|
||
|
|
type: 'error',
|
||
|
|
})
|
||
|
|
}
|
||
|
|
})
|
||
|
|
},
|
||
|
|
padString(str, length) {
|
||
|
|
return str.padStart(length, '0');
|
||
|
|
},
|
||
|
|
getType00() {
|
||
|
|
var number = this.padString(this.inputData1[10 + (this.indexs - 1) + "00"].toString(2), 3)
|
||
|
|
console.log(number);
|
||
|
|
if (Number(number[0])) {
|
||
|
|
this.topActive = 1
|
||
|
|
} else if (Number(number[1])) {
|
||
|
|
this.topActive = 2
|
||
|
|
} else if (Number(number[2])) {
|
||
|
|
this.topActive = 3
|
||
|
|
} else {
|
||
|
|
this.topActive = 0
|
||
|
|
}
|
||
|
|
},
|
||
|
|
change00(index) {
|
||
|
|
this.topActive = index
|
||
|
|
var list = ["0", "0", "0"];
|
||
|
|
if (index == 1) {
|
||
|
|
list[0] = "1";
|
||
|
|
} else {
|
||
|
|
list[0] = "0";
|
||
|
|
}
|
||
|
|
if (index == 2) {
|
||
|
|
list[1] = "1";
|
||
|
|
} else {
|
||
|
|
list[1] = "0";
|
||
|
|
}
|
||
|
|
if (index == 3) {
|
||
|
|
list[2] = "1";
|
||
|
|
} else {
|
||
|
|
list[2] = "0";
|
||
|
|
}
|
||
|
|
var num = list.join("");
|
||
|
|
var dataNum = {
|
||
|
|
target: {
|
||
|
|
value: parseInt(num, 2),
|
||
|
|
},
|
||
|
|
};
|
||
|
|
this.change(10 + (this.indexs - 1) + "00", dataNum);
|
||
|
|
},
|
||
|
|
getDataInfo2() {
|
||
|
|
var inputData = this.inputData
|
||
|
|
this.dataInfo2_list[0].timer = this.countData(inputData['36']) + 'min'
|
||
|
|
this.dataInfo2_list[1].timer = this.countData(inputData['28']) + 'L/h'
|
||
|
|
this.dataInfo2_list[2].timer = this.countData(inputData['37']) + 'L'
|
||
|
|
// this.dataInfo2_list[3].timer=this.countData(inputData['28'])
|
||
|
|
this.dataInfo2_list[4].timer = this.countData(inputData['31'])
|
||
|
|
this.dataInfo2_list[5].timer = this.countData(inputData['38'])
|
||
|
|
},
|
||
|
|
//什么方式启动的灌溉
|
||
|
|
getData29() {
|
||
|
|
var number = this.padString(this.inputData['29'].toString(2), 14)
|
||
|
|
var index = 6
|
||
|
|
var typeNumber = -1
|
||
|
|
for (var i = 0; i < index; i++) {
|
||
|
|
if (Number(number[i])) {
|
||
|
|
typeNumber = i
|
||
|
|
}
|
||
|
|
}
|
||
|
|
this.openType = this.getType29(typeNumber)
|
||
|
|
this.dataInfo2_list[3].timer = this.getType29(typeNumber)
|
||
|
|
var statusIndex = 8
|
||
|
|
for (var j = 0; j < statusIndex; j++) {
|
||
|
|
if (Number(number[number.length - j])) {
|
||
|
|
this.right2Index.push(j)
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
//进水泵和出水泵状态
|
||
|
|
getData30() {
|
||
|
|
|
||
|
|
var number = this.padString(this.inputData['30'].toString(2), 2)
|
||
|
|
if (Number(number[0])) {
|
||
|
|
this.left1Act = 1
|
||
|
|
} else if (Number(number[1])) {
|
||
|
|
this.left1Act = 0
|
||
|
|
} else {
|
||
|
|
this.left1Act = -1
|
||
|
|
}
|
||
|
|
},
|
||
|
|
changeData10(code,el){
|
||
|
|
var data=el.target.value*10
|
||
|
|
var sendData={
|
||
|
|
target:{
|
||
|
|
value:data
|
||
|
|
}
|
||
|
|
}
|
||
|
|
this.change(code,sendData)
|
||
|
|
},
|
||
|
|
//间隔灌溉天数
|
||
|
|
change(code, el) {
|
||
|
|
var data = {
|
||
|
|
equipmentId: this.deviceId,
|
||
|
|
regAddress: code,
|
||
|
|
num: el.target.value,
|
||
|
|
};
|
||
|
|
this.delayTimer(0, data);
|
||
|
|
},
|
||
|
|
//限制 写入停止后j*100毫秒调取函数
|
||
|
|
delayTimer(i, data) {
|
||
|
|
const that = this;
|
||
|
|
//整体接口
|
||
|
|
let j = 5;
|
||
|
|
//避免开启多个计时器
|
||
|
|
this.timer && clearInterval(this.timer);
|
||
|
|
|
||
|
|
this.timer = setInterval(() => {
|
||
|
|
++i;
|
||
|
|
if (i == j) {
|
||
|
|
that.changeData(data);
|
||
|
|
clearInterval(this.timer);
|
||
|
|
}
|
||
|
|
}, 100);
|
||
|
|
},
|
||
|
|
changeData(data) {
|
||
|
|
const that= this
|
||
|
|
this.$http({
|
||
|
|
url: this.api.writeFs,
|
||
|
|
data: data
|
||
|
|
}).then((res) => {
|
||
|
|
if (res.code == 200) {
|
||
|
|
|
||
|
|
this.getReg()
|
||
|
|
|
||
|
|
that.$refs.uToast.show({
|
||
|
|
title: res.msg,
|
||
|
|
type: 'success',
|
||
|
|
})
|
||
|
|
} else {
|
||
|
|
that.$refs.uToast.show({
|
||
|
|
title: res.msg,
|
||
|
|
type: 'error',
|
||
|
|
})
|
||
|
|
}
|
||
|
|
});
|
||
|
|
},
|
||
|
|
getcenterBottom() {
|
||
|
|
this.centerBottom = []
|
||
|
|
var inputData = this.inputData
|
||
|
|
var list1 = this.padString(inputData['32'].toString(2), 16)
|
||
|
|
var list2 = this.padString(inputData['33'].toString(2), 16)
|
||
|
|
var list3 = this.padString(inputData['34'].toString(2), 16)
|
||
|
|
var list4 = this.padString(inputData['35'].toString(2), 16)
|
||
|
|
var number = 16
|
||
|
|
for (var i = 0; i < number; i++) {
|
||
|
|
if (Number(list1[list1.length - 1 - i])) {
|
||
|
|
this.centerBottom.push(i)
|
||
|
|
}
|
||
|
|
}
|
||
|
|
for (var j = 0; j < number; j++) {
|
||
|
|
if (Number(list2[list2.length - 1 - j])) {
|
||
|
|
this.centerBottom.push(j + 16)
|
||
|
|
}
|
||
|
|
}
|
||
|
|
for (var k = 0; k < number; k++) {
|
||
|
|
if (Number(list3[list3.length - 1 - k])) {
|
||
|
|
this.centerBottom.push(k + 32)
|
||
|
|
}
|
||
|
|
}
|
||
|
|
for (var l = 0; l < number; l++) {
|
||
|
|
if (Number(list4[list4.length - 1 - l])) {
|
||
|
|
this.centerBottom.push(l + 48)
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
countData(data) {
|
||
|
|
if (data) {
|
||
|
|
return data
|
||
|
|
} else {
|
||
|
|
return 0
|
||
|
|
}
|
||
|
|
},
|
||
|
|
padString(str, length) {
|
||
|
|
return str.padStart(length, '0');
|
||
|
|
},
|
||
|
|
countData100(data) {
|
||
|
|
if (data) {
|
||
|
|
return data / 100
|
||
|
|
} else {
|
||
|
|
return 0
|
||
|
|
}
|
||
|
|
},
|
||
|
|
getType29(index) {
|
||
|
|
if (index == 0) {
|
||
|
|
return '手动开启动'
|
||
|
|
} else if (index == 1) {
|
||
|
|
return '外控模式启动'
|
||
|
|
} else if (index == 2) {
|
||
|
|
return '光照积累启动'
|
||
|
|
} else if (index == 3) {
|
||
|
|
return '土壤湿度控制'
|
||
|
|
} else if (index == 4) {
|
||
|
|
return '间隔启动'
|
||
|
|
} else if (index == 5) {
|
||
|
|
return '定时启动'
|
||
|
|
} else {
|
||
|
|
return '无'
|
||
|
|
}
|
||
|
|
},
|
||
|
|
//countType计算类型
|
||
|
|
//0是原数据
|
||
|
|
//1是原数据-400
|
||
|
|
//2是原数据/10
|
||
|
|
//3是(原数据-400) / 10
|
||
|
|
countType1(data) {
|
||
|
|
return data - 400
|
||
|
|
},
|
||
|
|
countType2(data) {
|
||
|
|
return data / 10
|
||
|
|
},
|
||
|
|
countType3(data) {
|
||
|
|
|
||
|
|
return (data - 400) / 10
|
||
|
|
},
|
||
|
|
getTypeData(dataCode, typeCode) {
|
||
|
|
var typeList = this.$store.state.typeList
|
||
|
|
|
||
|
|
var countType = 0
|
||
|
|
typeList.forEach((el, index) => {
|
||
|
|
|
||
|
|
if (el.value == this.inputData1[typeCode]) {
|
||
|
|
console.log(this.inputData1[typeCode], 111, el.countType);
|
||
|
|
countType = el.countType
|
||
|
|
}
|
||
|
|
})
|
||
|
|
|
||
|
|
|
||
|
|
if (countType == 0) {
|
||
|
|
return this.inputData[dataCode]
|
||
|
|
} else if (countType == 1) {
|
||
|
|
return this.countType1(this.inputData[dataCode])
|
||
|
|
} else if (countType == 2) {
|
||
|
|
return this.countType2(this.inputData[dataCode])
|
||
|
|
} else if (countType == 3) {
|
||
|
|
return this.countType3(this.inputData[dataCode])
|
||
|
|
}
|
||
|
|
},
|
||
|
|
signalHandler(index) {
|
||
|
|
this.signalCurrent = index
|
||
|
|
},
|
||
|
|
|
||
|
|
showPop(index) {
|
||
|
|
this.show = true
|
||
|
|
this.indexs = index
|
||
|
|
this.getReg()
|
||
|
|
},
|
||
|
|
|
||
|
|
closePop() {
|
||
|
|
this.show = false
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="scss" scoped>
|
||
|
|
.fertilizer_machine {
|
||
|
|
width: 100%;
|
||
|
|
min-height: 100vh;
|
||
|
|
background-color: #F5F6FA;
|
||
|
|
|
||
|
|
.content {
|
||
|
|
box-sizing: border-box;
|
||
|
|
padding: 20rpx 30rpx;
|
||
|
|
|
||
|
|
.output_valve {
|
||
|
|
width: 690rpx;
|
||
|
|
// height: 160rpx;
|
||
|
|
background: #FFFFFF;
|
||
|
|
box-shadow: 0rpx 4rpx 20rpx 0rpx rgba(153, 153, 153, 0.1);
|
||
|
|
border-radius: 20rpx;
|
||
|
|
box-sizing: border-box;
|
||
|
|
padding: 20rpx;
|
||
|
|
|
||
|
|
.title {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
|
||
|
|
>image {
|
||
|
|
width: 50rpx;
|
||
|
|
height: 50rpx;
|
||
|
|
margin-right: 16rpx;
|
||
|
|
}
|
||
|
|
|
||
|
|
>text {
|
||
|
|
font-size: 30rpx;
|
||
|
|
font-family: PingFang-SC-Bold;
|
||
|
|
font-weight: bold;
|
||
|
|
color: #333333;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.detail {
|
||
|
|
margin-top: 16rpx;
|
||
|
|
display: flex;
|
||
|
|
flex-wrap: wrap;
|
||
|
|
|
||
|
|
.item {
|
||
|
|
flex-shrink: 0;
|
||
|
|
width: 90rpx;
|
||
|
|
height: 54rpx;
|
||
|
|
background: #EFFCF7;
|
||
|
|
border: 2px solid rgba(58, 187, 144, 0.25);
|
||
|
|
border-radius: 10rpx;
|
||
|
|
font-size: 28rpx;
|
||
|
|
font-family: PingFang-SC-Bold;
|
||
|
|
font-weight: bold;
|
||
|
|
color: #24B383;
|
||
|
|
display: flex;
|
||
|
|
justify-content: center;
|
||
|
|
align-items: center;
|
||
|
|
margin: 5rpx 8rpx;
|
||
|
|
flex-shrink: 0;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.dataInfo1 {
|
||
|
|
width: 690rpx;
|
||
|
|
height: 180rpx;
|
||
|
|
background: #FFFFFF;
|
||
|
|
box-shadow: 0rpx 4rpx 20rpx 0rpx rgba(153, 153, 153, 0.1);
|
||
|
|
border-radius: 20rpx;
|
||
|
|
margin-top: 15rpx;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: space-around;
|
||
|
|
|
||
|
|
.item,
|
||
|
|
.item1 {
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
|
||
|
|
|
||
|
|
>text:nth-child(2) {
|
||
|
|
font-size: 24rpx;
|
||
|
|
font-family: PingFang-SC-Bold;
|
||
|
|
font-weight: bold;
|
||
|
|
color: #333333;
|
||
|
|
margin: 6rpx 0 8rpx 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
>text:nth-child(3) {
|
||
|
|
font-size: 38rpx;
|
||
|
|
font-family: PingFang-SC-Bold;
|
||
|
|
font-weight: bold;
|
||
|
|
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.item {
|
||
|
|
.img {
|
||
|
|
height: 59rpx;
|
||
|
|
|
||
|
|
>image {
|
||
|
|
width: 45rpx;
|
||
|
|
height: 59rpx;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
>text:nth-child(3) {
|
||
|
|
color: #1EA6F5;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.item1 {
|
||
|
|
.img {
|
||
|
|
height: 59rpx;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
|
||
|
|
>image {
|
||
|
|
width: 52rpx;
|
||
|
|
height: 42rpx;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
>text:nth-child(3) {
|
||
|
|
color: #3EC195;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.dataInfo2 {
|
||
|
|
width: 690rpx;
|
||
|
|
height: 480rpx;
|
||
|
|
background: #FFFFFF;
|
||
|
|
box-shadow: 0rpx 4rpx 20rpx 0rpx rgba(153, 153, 153, 0.1);
|
||
|
|
border-radius: 20rpx;
|
||
|
|
margin-top: 15rpx;
|
||
|
|
box-sizing: border-box;
|
||
|
|
padding: 9rpx 0rpx 19rpx;
|
||
|
|
|
||
|
|
.top {
|
||
|
|
width: 100%;
|
||
|
|
display: flex;
|
||
|
|
flex-wrap: wrap;
|
||
|
|
justify-content: space-evenly;
|
||
|
|
|
||
|
|
.item {
|
||
|
|
width: 33%;
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
justify-content: center;
|
||
|
|
align-items: center;
|
||
|
|
|
||
|
|
>image {
|
||
|
|
width: 108rpx;
|
||
|
|
height: 108rpx;
|
||
|
|
}
|
||
|
|
|
||
|
|
>text:nth-child(2) {
|
||
|
|
font-size: 24rpx;
|
||
|
|
font-family: PingFang SC;
|
||
|
|
font-weight: bold;
|
||
|
|
color: #333333;
|
||
|
|
}
|
||
|
|
|
||
|
|
>text:nth-child(3) {
|
||
|
|
font-size: 30rpx;
|
||
|
|
font-family: PingFang SC;
|
||
|
|
font-weight: bold;
|
||
|
|
color: #1EA6F5;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.bottom {
|
||
|
|
box-sizing: border-box;
|
||
|
|
padding: 8rpx 30rpx;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: space-between;
|
||
|
|
|
||
|
|
.btn-1 {
|
||
|
|
>image {
|
||
|
|
width: 39rpx;
|
||
|
|
height: 28rpx;
|
||
|
|
margin-right: 10rpx;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.btn-2 {
|
||
|
|
>image {
|
||
|
|
width: 27rpx;
|
||
|
|
height: 33rpx;
|
||
|
|
margin-right: 10rpx;
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
.in {
|
||
|
|
width: 300rpx;
|
||
|
|
height: 80rpx;
|
||
|
|
background: linear-gradient(0deg, #54CDA4, #27B584);
|
||
|
|
border-radius: 10rpx;
|
||
|
|
display: flex;
|
||
|
|
justify-content: center;
|
||
|
|
align-items: center;
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
text {
|
||
|
|
font-size: 30rpx;
|
||
|
|
font-family: PingFang-SC-Bold;
|
||
|
|
font-weight: bold;
|
||
|
|
color: #FFFFFF;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.out {
|
||
|
|
width: 300rpx;
|
||
|
|
height: 80rpx;
|
||
|
|
background: #EFFCF7;
|
||
|
|
border: 2px solid rgba(58, 187, 144, 0.25);
|
||
|
|
border-radius: 10rpx;
|
||
|
|
display: flex;
|
||
|
|
justify-content: center;
|
||
|
|
align-items: center;
|
||
|
|
|
||
|
|
text {
|
||
|
|
font-size: 30rpx;
|
||
|
|
font-family: PingFang-SC-Bold;
|
||
|
|
font-weight: bold;
|
||
|
|
color: #24B383;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.signal {
|
||
|
|
width: 690rpx;
|
||
|
|
height: 180rpx;
|
||
|
|
background: #FFFFFF;
|
||
|
|
box-shadow: 0rpx 4rpx 20rpx 0rpx rgba(153, 153, 153, 0.1);
|
||
|
|
border-radius: 20rpx;
|
||
|
|
margin-top: 15rpx;
|
||
|
|
display: flex;
|
||
|
|
flex-wrap: wrap;
|
||
|
|
align-content: space-between;
|
||
|
|
justify-content: space-between;
|
||
|
|
box-sizing: border-box;
|
||
|
|
padding: 20rpx 30rpx;
|
||
|
|
|
||
|
|
.item {
|
||
|
|
width: 140rpx;
|
||
|
|
height: 60rpx;
|
||
|
|
background: #EFFCF7;
|
||
|
|
border: 2px solid rgba(58, 187, 144, 0.25);
|
||
|
|
border-radius: 10rpx;
|
||
|
|
display: flex;
|
||
|
|
justify-content: center;
|
||
|
|
align-items: center;
|
||
|
|
font-size: 24rpx;
|
||
|
|
font-family: PingFang-SC-Bold;
|
||
|
|
font-weight: bold;
|
||
|
|
color: #24B383;
|
||
|
|
}
|
||
|
|
|
||
|
|
.item_act {
|
||
|
|
width: 140rpx;
|
||
|
|
height: 60rpx;
|
||
|
|
background: linear-gradient(0deg, #54CDA4, #27B584);
|
||
|
|
border-radius: 10rpx;
|
||
|
|
display: flex;
|
||
|
|
justify-content: center;
|
||
|
|
align-items: center;
|
||
|
|
font-size: 24rpx;
|
||
|
|
font-family: PingFang-SC-Bold;
|
||
|
|
font-weight: bold;
|
||
|
|
color: #FFFFFF;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.set {
|
||
|
|
width: 690rpx;
|
||
|
|
background-color: #F5F6FA;
|
||
|
|
margin-top: 15rpx;
|
||
|
|
|
||
|
|
.item {
|
||
|
|
height: 80rpx;
|
||
|
|
background: #FFFFFF;
|
||
|
|
box-shadow: 0rpx 4rpx 20rpx 0rpx rgba(153, 153, 153, 0.1);
|
||
|
|
border-radius: 15rpx;
|
||
|
|
display: flex;
|
||
|
|
justify-content: space-between;
|
||
|
|
align-items: center;
|
||
|
|
box-sizing: border-box;
|
||
|
|
padding: 0 30rpx 0 33rpx;
|
||
|
|
margin-bottom: 15rpx;
|
||
|
|
|
||
|
|
.left {
|
||
|
|
font-size: 30rpx;
|
||
|
|
font-family: PingFang-SC-Bold;
|
||
|
|
font-weight: bold;
|
||
|
|
color: #333333;
|
||
|
|
}
|
||
|
|
|
||
|
|
.right {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
|
||
|
|
>text {
|
||
|
|
font-size: 30rpx;
|
||
|
|
font-family: PingFang-SC-Bold;
|
||
|
|
font-weight: bold;
|
||
|
|
color: #999999;
|
||
|
|
margin-right: 20rpx;
|
||
|
|
}
|
||
|
|
|
||
|
|
>image {
|
||
|
|
width: 16rpx;
|
||
|
|
height: 8rpx;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
/deep/.u-mode-center-box {
|
||
|
|
background-color: transparent;
|
||
|
|
}
|
||
|
|
|
||
|
|
.contentPop {
|
||
|
|
width: 100%;
|
||
|
|
min-height: calc(100% - 70rpx);
|
||
|
|
position: relative;
|
||
|
|
|
||
|
|
.contentPop_box {
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
background-color: #fff;
|
||
|
|
border-radius: 20rpx;
|
||
|
|
padding-bottom: 30rpx;
|
||
|
|
|
||
|
|
.title {
|
||
|
|
width: 100%;
|
||
|
|
height: 91rpx;
|
||
|
|
font-size: 34rpx;
|
||
|
|
font-family: PingFang SC;
|
||
|
|
font-weight: bold;
|
||
|
|
color: #333333;
|
||
|
|
border-bottom: 1rpx solid #DDDDDD;
|
||
|
|
text-align: center;
|
||
|
|
line-height: 91rpx;
|
||
|
|
}
|
||
|
|
|
||
|
|
.control_model {
|
||
|
|
height: 172rpx;
|
||
|
|
border-bottom: 1rpx solid #DDDDDD;
|
||
|
|
box-sizing: border-box;
|
||
|
|
padding: 30rpx;
|
||
|
|
|
||
|
|
.control {
|
||
|
|
font-size: 28rpx;
|
||
|
|
font-family: PingFang SC;
|
||
|
|
font-weight: bold;
|
||
|
|
color: #333333;
|
||
|
|
}
|
||
|
|
|
||
|
|
.model {
|
||
|
|
width: 100%;
|
||
|
|
margin-top: 12rpx;
|
||
|
|
display: flex;
|
||
|
|
|
||
|
|
.auto,
|
||
|
|
.stop,
|
||
|
|
.hand {
|
||
|
|
width: 120rpx;
|
||
|
|
height: 66rpx;
|
||
|
|
background: #EFFCF7;
|
||
|
|
border: 2px solid rgba(58, 187, 144, 0.25);
|
||
|
|
border-radius: 10rpx;
|
||
|
|
font-size: 28rpx;
|
||
|
|
font-family: PingFang-SC-Bold;
|
||
|
|
font-weight: bold;
|
||
|
|
color: #24B383;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
margin-right: 20rpx;
|
||
|
|
}
|
||
|
|
|
||
|
|
.auto_act,
|
||
|
|
.stop_act,
|
||
|
|
.hand_act {
|
||
|
|
width: 120rpx;
|
||
|
|
height: 66rpx;
|
||
|
|
background: linear-gradient(0deg, #54CDA4, #27B584);
|
||
|
|
border-radius: 10rpx;
|
||
|
|
font-size: 28rpx;
|
||
|
|
font-family: PingFang-SC-Bold;
|
||
|
|
font-weight: bold;
|
||
|
|
color: #EFFCF7;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
margin-right: 20rpx;
|
||
|
|
}
|
||
|
|
|
||
|
|
.two_min {
|
||
|
|
width: 140rpx;
|
||
|
|
height: 66rpx;
|
||
|
|
background: #F5F6FA;
|
||
|
|
border: 2px solid #E1E2E6;
|
||
|
|
border-radius: 10rpx;
|
||
|
|
font-size: 34rpx;
|
||
|
|
font-family: PingFang-SC-Bold;
|
||
|
|
font-weight: bold;
|
||
|
|
color: #333333;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.irrigate_time1,
|
||
|
|
.irrigate_time2 {
|
||
|
|
height: 126rpx;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
border-bottom: 1rpx solid #DDDDDD;
|
||
|
|
font-size: 30rpx;
|
||
|
|
font-family: PingFang-SC-Bold;
|
||
|
|
font-weight: bold;
|
||
|
|
color: #333333;
|
||
|
|
box-sizing: border-box;
|
||
|
|
padding-left: 30rpx;
|
||
|
|
|
||
|
|
.irrigate_input {
|
||
|
|
width: 90rpx;
|
||
|
|
height: 66rpx;
|
||
|
|
background: #F5F6FA;
|
||
|
|
border: 2px solid #E1E2E6;
|
||
|
|
border-radius: 10rpx;
|
||
|
|
margin: 0 15rpx;
|
||
|
|
>input{
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
text-align: center;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.changeMoreBtn {
|
||
|
|
width: 340rpx;
|
||
|
|
height: 80rpx;
|
||
|
|
background: linear-gradient(0deg, #57CFA6, #25B383);
|
||
|
|
box-shadow: 0rpx 3rpx 15rpx 0rpx rgba(36, 179, 131, 0.35);
|
||
|
|
border-radius: 15rpx;
|
||
|
|
display: flex;
|
||
|
|
justify-content: center;
|
||
|
|
align-items: center;
|
||
|
|
margin: 30rpx auto;
|
||
|
|
|
||
|
|
>image {
|
||
|
|
width: 30rpx;
|
||
|
|
height: 30rpx;
|
||
|
|
margin-right: 16rpx;
|
||
|
|
}
|
||
|
|
|
||
|
|
>text {
|
||
|
|
font-size: 30rpx;
|
||
|
|
font-family: PingFang-SC-Bold;
|
||
|
|
font-weight: bold;
|
||
|
|
color: #FFFFFF;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
>image {
|
||
|
|
width: 50rpx;
|
||
|
|
height: 50rpx;
|
||
|
|
position: absolute;
|
||
|
|
bottom: -70rpx;
|
||
|
|
left: 50%;
|
||
|
|
transform: translate(-50%);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|