Sprinkler-app/pages/index/index.vue

1331 lines
33 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<template>
<view class="page">
<u-navbar :is-back="false" :border-bottom="false" :background="bgc" title-color='#2E4975' title-size='36'
height='8'></u-navbar>
<view class="title">
<image src="https://api.ccttiot.com/smartmeter/img/static/uhRjXxrVaNwOCld2fYUl" mode=""></image>
</view>
<!-- 背景图 -->
<!-- 没设备时展示 -->
<image class="bjimg" v-if="false" src="https://api.ccttiot.com/smartmeter/img/static/uz8MR6BuZW2qRANnYgLu"
mode=""></image>
<!-- 有设备时展示 -->
<image class="bjimg" v-else src="https://api.ccttiot.com/smartmeter/img/static/uXBpJuaUs0XUNb8HTahh" mode="">
</image>
<view class="wusb" v-if="false">
<text>暂无设备,请先绑定设备</text>
<view class="bang">
绑定
</view>
</view>
<view class="" v-else>
<!-- 选择设备 -->
<view class="selectbox">
<view class="selectname" @click="btnksxz">
小发财树1号 <image src="https://api.ccttiot.com/smartmeter/img/static/uwHOBxvbJjkhx1uDiQHI" mode="">
</image>
</view>
<view class="selectshezhi" @click="btnsz">
<image src="https://api.ccttiot.com/smartmeter/img/static/uvCJ8ro0MpfGZd53vypJ" mode=""></image>
</view>
</view>
<view class="selectbox">
<view class="shebeiname" @click="btnlj">
丁丁浇花器 <text></text>
</view>
<view class="shebeiadd" @click="btnaddsb">
<image src="https://api.ccttiot.com/smartmeter/img/static/udlX67UXzuRUZCuEtWDH" mode=""></image>
</view>
</view>
<!-- 设备信息 -->
<view class="devicebox">
<view class="devicetop">
<view class="devicelt">
<image src="https://api.ccttiot.com/smartmeter/img/static/uVKucPVDjxjaCDCpFKvw" mode=""></image>
<view class="xinghao">
<view class="one">型号G-145255445</view>
<view class="">SNG-145255445</view>
</view>
</view>
<view class="devicert">
<view class="shoudong">
<image @click="btnkq" v-if="kgflag"
src="https://api.ccttiot.com/smartmeter/img/static/uIiHf1LAHhLyVZODV9Pc" mode="">
</image>
<image @click="btngb" v-else
src="https://api.ccttiot.com/smartmeter/img/static/upKZD5SgfKHZDCxcPSCl" mode="">
</image> 手动浇水
</view>
<view class="shengyu">
剩余:{{ sdminutes ? sdminutes + ':' : '' }}{{ sdseconds ? sdseconds : '--' }}
</view>
</view>
</view>
<view class="deviceweek">
<view class="weeklist">
<view class="kg" v-if="ver_data.p_set0[3] == 0">
OFF
</view>
<view class="kg" style="color: #48893B;" v-else>
NO
</view>
<view class="weekday">
P1
</view>
<view class="img">
<image v-if="formattedTime(ver_data.p_set0[0],ver_data.p_set0[1])== xctimesj" src="https://api.ccttiot.com/smartmeter/img/static/u9iZpd6bW6bUsUay4uvH" mode="">
</image>
</view>
</view>
<view class="weeklist">
<view class="kg" v-if="ver_data.p_set1[3] == 0">
OFF
</view>
<view class="kg" style="color: #48893B;" v-else>
NO
</view>
<view class="weekday">
P2
</view>
<view class="img">
<image v-if="formattedTime(ver_data.p_set1[0],ver_data.p_set1[1]) == xctimesj" src="https://api.ccttiot.com/smartmeter/img/static/u9iZpd6bW6bUsUay4uvH" mode="">
</image>
</view>
</view>
<view class="weeklist">
<view class="kg" v-if="ver_data.p_set2[3] == 0">
OFF
</view>
<view class="kg" style="color: #48893B;" v-else>
NO
</view>
<view class="weekday">
P3
</view>
<view class="img">
<image v-if="formattedTime(ver_data.p_set2[0],ver_data.p_set2[1]) == xctimesj" src="https://api.ccttiot.com/smartmeter/img/static/u9iZpd6bW6bUsUay4uvH" mode="">
</image>
</view>
</view>
<view class="weeklist">
<view class="kg" v-if="ver_data.p_set3[3] == 0">
OFF
</view>
<view class="kg" style="color: #48893B;" v-else>
NO
</view>
<view class="weekday">
P4
</view>
<view class="img">
<image v-if="formattedTime(ver_data.p_set3[0],ver_data.p_set3[1]) == xctimesj" src="https://api.ccttiot.com/smartmeter/img/static/u9iZpd6bW6bUsUay4uvH" mode="">
</image>
</view>
</view>
<view class="weeklist">
<view class="kg" v-if="ver_data.p_set4[3] == 0">
OFF
</view>
<view class="kg" style="color: #48893B;" v-else>
NO
</view>
<view class="weekday">
P5
</view>
<view class="img">
<image v-if="formattedTime(ver_data.p_set4[0],ver_data.p_set4[1]) == xctimesj" src="https://api.ccttiot.com/smartmeter/img/static/u9iZpd6bW6bUsUay4uvH" mode="">
</image>
</view>
</view>
<view class="weeklist">
<view class="kg" v-if="ver_data.p_set5[3] == 0">
OFF
</view>
<view class="kg" style="color: #48893B;" v-else>
NO
</view>
<view class="weekday">
P6
</view>
<view class="img">
<image v-if="formattedTime(ver_data.p_set5[0],ver_data.p_set5[1]) == xctimesj" src="https://api.ccttiot.com/smartmeter/img/static/u9iZpd6bW6bUsUay4uvH" mode="">
</image>
</view>
</view>
</view>
</view>
<!-- <button @click="kq">开启</button><button @click="gb">关闭</button><button @click="hq">获取</button> -->
<!-- 开关选择 -->
<view class="switchbox">
<view class="switch_he">
<image src="https://api.ccttiot.com/smartmeter/img/static/u7NwkNOoQYYsvHVMkDlu" mode=""></image>
<view class="yushui">
雨水感应
<u-switch v-if="yschecked" v-model="one" @change="btnyushui" inactive-color="#eee" active-color="#eee" size="40"></u-switch>
<u-switch v-else v-model="ones" @change="btnyushuis" active-color="#7FAD76" inactive-color="#7FAD76" size="40"></u-switch>
</view>
</view>
<view class="switch_he">
<image src="https://api.ccttiot.com/smartmeter/img/static/u7kd92ocUgDN052nhp4R" mode=""></image>
<view class="yushui">
儿童锁 <u-switch v-if="etchecked" v-model="two" @change="btnertong" inactive-color="#eee" active-color="#eee" size="40"></u-switch>
<u-switch v-else v-model="twos" @change="btnertongs" active-color="#7FAD76" inactive-color="#7FAD76" size="40"></u-switch>
</view>
</view>
</view>
<!-- 定时 -->
<view class="dingshi_he" @click="btntime">
<view class="naoz">
<image src="https://api.ccttiot.com/smartmeter/img/static/uJPgzMejk9gaogWnCO9M" mode=""></image> 6组
</view>
<view class="dstime">
定时管理 <image src="https://api.ccttiot.com/smartmeter/img/static/uagx3wGa7RYvqKqoSymy" mode="">
</image>
</view>
</view>
<!-- 浇水日志 -->
<view class="wateringlogbox" @click="btnjs">
<view class="wateringlogtop">
<image src="https://api.ccttiot.com/smartmeter/img/static/uGh3pRM7mMRSHdmvtzv3" mode=""></image>
浇水日志
</view>
<view class="wateringlogbd">
<view class="lt">
<view class="">距离下次:{{xctime}}</view>
<view class="">下次浇水时长:{{xctimesc}}</view>
<view class="">上次浇水:{{sctimejs}}</view>
</view>
<view class="rt">
<image src="https://api.ccttiot.com/smartmeter/img/static/uagx3wGa7RYvqKqoSymy" mode=""></image>
</view>
</view>
</view>
</view>
<!-- 切换设备 -->
<view class="tabsb" v-if="xuanzeflag">
<view class="sblist">
<view class="sbist_val" v-for="(item,index) in 2" :key="index"
:id="activeshu == index ? 'activebor' : ''" @click="btnactive(index)">
<view class="lt">
<view class="">小发财树1号</view>
<view class="" style="margin-top: 14rpx;">型号:12354121</view>
</view>
<view class="rt">
<image src="https://api.ccttiot.com/smartmeter/img/static/uVKucPVDjxjaCDCpFKvw" mode=""></image>
</view>
</view>
</view>
<view class="qdan" @click="btnxuanze">
确定
</view>
</view>
<!-- 手动浇水 -->
<view class="manualjs" v-if="sdjsflag">
<view class="toptit">
选择浇水时长
</view>
<view class="container" @click="btnshowjs">
<view class="">{{minute}}分</view>
<text>:</text>
<view class="">{{second}}秒</view>
</view>
<view class="anniu">
<view class="qx" @click="btnqx">
取消
</view>
<view class="qd" @click="btnqd">
确定
</view>
</view>
</view>
<view class="manualmask" v-if="sdjsflag"></view>
<!-- 选择浇水时间-->
<u-picker v-model="showjs" mode="time" :params="params" @confirm="confirm"></u-picker>
<tab-bar :indexs='0'></tab-bar>
</view>
</template>
<script>
var xBlufi = require("@/components/blufi/xBlufi.js")
export default {
data() {
return {
one:false,
ones:true,
two:false,
twos:true,
yschecked: true,
etchecked:true,
kgflag: false,
activeshu: 0,
xuanzeflag: false,
selectedMinute: '1',
selectedSecond: '1',
sdjsflag:false ,
showjs: false,
params: {
year: false,
month: false,
day: false,
hour: false,
minute: true,
second: true
},
minute:'--',
second:'--',
devicesList:[],
deviceId:'',
name:'',
mac:'2952BB7A4EE0',
jstime:'',
ver_data:{},
showobj:{},
xctime:'--',
sctimejs:'--',
xctimesc:'--',
xctimesj:'',
sdminutes:'',
sdseconds:''
}
},
// 分享到好友(会话)
onShareAppMessage: function() {
return {
title: '绿小能',
path: '/pages/index/index'
}
},
// 分享到朋友圈
onShareTimeline: function() {
return {
title: '绿小能',
query: '',
path: '/pages/index/index'
}
},
onLoad() {
let that = this
xBlufi.initXBlufi(1)
xBlufi.listenDeviceMsgEvent(true, that.funListenDeviceMsgEvent)
xBlufi.notifyStartDiscoverBle({
'isStart': true
})
setTimeout(() => {
xBlufi.notifyStartDiscoverBle({
'isStart': false
})
if (that.devicesList.length > 0) {
xBlufi.notifyConnectBle({
isStart: true,
deviceId: that.deviceId,
name: that.name
})
}
}, 2000)
},
onShow() {
this.getinfo()
this.getshuju()
},
methods: {
// 点击选择时间
btnshowjs(){
this.showjs = true
},
formattedTime(minutes, seconds) {
// 将数字转换为字符串并补零
const formattedMinutes = String(minutes).padStart(2, '0');
const formattedSeconds = String(seconds).padStart(2, '0');
// 返回格式化后的时间字符串
return `${formattedMinutes}:${formattedSeconds}`;
},
// 点击连接
btnlj(){
let that = this
xBlufi.initXBlufi(1)
xBlufi.listenDeviceMsgEvent(true, that.funListenDeviceMsgEvent)
xBlufi.notifyStartDiscoverBle({
'isStart': true
})
setTimeout(() => {
xBlufi.notifyStartDiscoverBle({
'isStart': false
})
if (that.devicesList.length > 0) {
xBlufi.notifyConnectBle({
isStart: true,
deviceId: that.deviceId,
name: that.name
})
}
}, 2000)
},
// 获取用户信息
getinfo() {
this.$u.get(`/appVerify/profile`).then((res) => {
if (res.code == 200) {
this.userobj = res.data
// 根据用户id获取当前用户
this.$u.get(`/app/getDeviceInfoByUser?userId=${this.userobj.userId}`).then((res) => {
if (res.code == 200) {
}
})
}
})
},
// 雨水感应开启
btnyushui(){
let that = this
uni.getNetworkType({
success(res) {
if (res.networkType !== 'none') {
uni.getConnectedBluetoothDevices({
success(res) {
setTimeout(()=> {
that.yschecked = false
xBlufi.notifySendCustomData({
customData:'11yudi'
})
},1500)
},
fail(err) {
console.error('获取已连接蓝牙设备信息失败:',err)
}
})
} else {
console.log('手机未连接网络')
}
}
})
},
// 雨水感应关闭
btnyushuis(){
let that = this
uni.getNetworkType({
success(res) {
if (res.networkType !== 'none') {
uni.getConnectedBluetoothDevices({
success(res) {
setTimeout(()=> {
that.yschecked = true
xBlufi.notifySendCustomData({
customData:'11unyudi'
})
},1500)
},
fail(err) {
console.error('获取已连接蓝牙设备信息失败:',err)
}
})
} else {
console.log('手机未连接网络')
}
}
})
},
// 点击儿童锁开启
btnertong(){
let that = this
uni.getNetworkType({
success(res) {
if (res.networkType !== 'none') {
uni.getConnectedBluetoothDevices({
success(res) {
setTimeout(()=> {
that.etchecked = false
xBlufi.notifySendCustomData({
customData:'11lock'
})
},1500)
},
fail(err) {
console.error('获取已连接蓝牙设备信息失败:',err)
}
})
} else {
console.log('手机未连接网络')
}
}
})
},
// 点击儿童锁关闭
btnertongs(){
let that = this
uni.getNetworkType({
success(res) {
if (res.networkType !== 'none') {
uni.getConnectedBluetoothDevices({
success(res) {
setTimeout(()=> {
that.etchecked = true
xBlufi.notifySendCustomData({
customData:'11unlock'
})
},1500)
},
fail(err) {
console.error('获取已连接蓝牙设备信息失败:',err)
}
})
} else {
console.log('手机未连接网络')
}
}
})
},
// 点击添加设备
btnaddsb(){
uni.navigateTo({
url:'/page_user/lanya'
})
},
// 点击选择浇水时间
confirm(e){
this.minute = e.minute
this.second = e.second
this.jstime = Number(e.second) + Number(e.minute * 60)
},
// 点击跳转到定时页面
btntime(){
uni.navigateTo({
url:'/page_user/dingshi?list=' + JSON.stringify(this.ver_data)
})
},
// 点击取消手动浇水
btnqx(){
this.sdjsflag = false
},
// 确定选择时间
btnqd(){
if(this.minute == '--' || this.second == '--'){
uni.showToast({
title: '请选择浇水时长',
icon: 'none',
duration: 3000
})
}else{
let that = this
uni.getNetworkType({
success(res) {
if (res.networkType !== 'none') {
uni.getConnectedBluetoothDevices({
success(res) {
setTimeout(()=> {
xBlufi.notifySendCustomData({
customData: "11time@" + that.jstime + '@'
})
that.startTimer(that.jstime)
that.sdjsflag = false
that.kgflag = true
},1500)
},
fail(err) {
console.error('获取已连接蓝牙设备信息失败:',err)
}
})
} else {
console.log('手机未连接网络')
}
}
})
}
},
// 手动浇水定时器
startTimer(totalSeconds) {
let remainingSeconds = totalSeconds
console.log(remainingSeconds,'000');
const timer = setInterval(() => {
// 计算分钟和秒
const minutes = Math.floor(remainingSeconds / 60).toString()
const secs = (remainingSeconds % 60).toString()
// 格式化秒,确保是两位数
this.sdseconds = secs.padStart(2, '0')
// 如果分钟大于0则显示分钟否则不显示只显示秒
this.sdminutes = minutes.padStart(2, '0')
// 更新剩余秒数
remainingSeconds--;
// 如果剩余秒数为0则停止定时器
if (remainingSeconds <= 0) {
clearInterval(timer)
this.btnkq()
this.sdminutes = ''
this.sdseconds = ''
}
}, 1000)
},
// 关闭手动浇水
btnkq() {
let that = this
uni.getNetworkType({
success(res) {
if (res.networkType !== 'none') {
uni.getConnectedBluetoothDevices({
success(res) {
setTimeout(()=> {
xBlufi.notifySendCustomData({
customData: "11close"
})
that.kgflag = false
},1500)
},
fail(err) {
console.error('获取已连接蓝牙设备信息失败:',err)
}
})
}
}
})
},
// 开启
btngb() {
this.sdjsflag = true
},
// 跳转到设置
btnsz() {
uni.navigateTo({
url: '/page_user/upload'
})
},
// 选择设备
btnactive(index) {
this.activeshu = index
},
// 选择确定设备
btnxuanze() {
this.xuanzeflag = false
},
btnksxz() {
if (this.xuanzeflag == true) {
this.xuanzeflag = false
} else {
this.xuanzeflag = true
}
},
//跳转到浇水日志页
btnjs() {
uni.navigateTo({
url: '/page_user/jiaoshui'
})
},
// 获取附近蓝牙设备列表
funListenDeviceMsgEvent: function(options) {
switch (options.type) {
case xBlufi.XBLUFI_TYPE.TYPE_STATUS_CONNECTED:
if (!options.result) {
uni.showModal({
title: '很抱歉提醒你!',
content: '小程序与设备异常断开',
showCancel: false,
//是否显示取消按钮
success: function(res) {
uni.hideLoading()
uni.removeStorage({key:'device_key'})
}
})
}
break;
case xBlufi.XBLUFI_TYPE.TYPE_GET_DEVICE_LISTS:
if (options.result) {
let devicesarr = options.data
// console.log(devicesarr,'111')
devicesarr.forEach(device => {
const mac = device.name.substring(4)
if (device.name.slice(5, 17) == this.mac) {
this.deviceId = device.deviceId
this.name = device.name
// console.log(device.name,this.mac,'222');
this.devicesList.push(device)
let uniqueDevicesList = Array.from(new Set(this.devicesList))
this.devicesList = uniqueDevicesList;
}
})
}
break;
case xBlufi.XBLUFI_TYPE.TYPE_CONNECTED:
console.log("连接回调:" + JSON.stringify(options))
uni.getNetworkType({
success(res) {
if (res.networkType !== 'none') {
uni.getConnectedBluetoothDevices({
success(res) {
setTimeout(()=> {
xBlufi.notifySendCustomData({
customData: "11get"
})
},3000)
},
fail(err) {
console.error('获取已连接蓝牙设备信息失败:',err)
}
})
}
}
})
uni.setStorageSync('device_key', 'true')
if (options.result) {
{
xBlufi.notifyInitBleEsp32({
deviceId: this.deviceId
})
this.deviceIds = options.data.deviceId
this.name = this.name
}
}else{
}
break;
case xBlufi.XBLUFI_TYPE.TYPE_RECIEVE_CUSTON_DATA:
console.log("1收到设备发来的自定义数据结果", options.data)
const inputString = options.data
const pairs = inputString.split(';')
const showObject = {}
const pSetObjects = {}
pairs.forEach(pair => {
const [key, value] = pair.split(':');
if (key === 'show') {
showObject.showArray = value.split(',').map(Number);
} else if (key.startsWith('p_set')) {
const numbers = value.split(',').map(Number);
pSetObjects[key] = numbers
}
})
this.ver_data = pSetObjects //六个浇水时间段
console.log(this.ver_data,'002002002')
this.showobj = showObject //雨滴,锁,等是否开启
if(this.showobj.showArray[1] == 1){
this.yschecked = false
}else{
this.yschecked = true
}
if(this.showobj.showArray[0] == 1){
this.etchecked = false
}else{
this.etchecked = true
}
// 计算浇水时间
const ver_Data = this.ver_data
function secondsToMinutesAndSeconds(seconds) {
const minutes = Math.floor(seconds / 60);
const remainingSeconds = seconds % 60;
return `${minutes}分${remainingSeconds}秒`;
}
// 获取当前时间
const now = new Date();
// 辅助函数:将时间数组转换为 Date 对象
function timeArrayToDate(timeArray) {
const [hour, minute, second] = timeArray.slice(0, 3);
const date = new Date();
date.setHours(hour, minute, second, 0); // 毫秒设为0
return date;
}
// 辅助函数:计算两个时间之间的差值(以小时和分钟表示)
function timeDifference(date1, date2) {
const diffMs = Math.abs(date1 - date2);
const diffSeconds = Math.floor(diffMs / 1000);
const diffMinutes = Math.floor(diffSeconds / 60);
const diffHours = Math.floor(diffMinutes / 60);
const remainingMinutes = diffMinutes % 60;
return { hours: diffHours, minutes: remainingMinutes };
}
// 遍历 ver_Data 对象
let nextTimeDiff = null;
let nextTime = null;
let prevTimeDiff = null;
let prevTime = null;
let nextWaterDuration = null; // 用于存储下次浇水时长
for (const key in ver_Data) {
if (ver_Data.hasOwnProperty(key) && ver_Data[key][3] === 1) {
const timeArray = ver_Data[key];
const timeDate = timeArrayToDate(timeArray);
// 计算与当前时间的差值
const diff = timeDifference(timeDate, now);
// 判断是下一次时间还是上一次时间
if (timeDate > now) {
if (!nextTime || diff.hours * 60 + diff.minutes < nextTimeDiff.hours * 60 + nextTimeDiff.minutes) {
nextTimeDiff = diff;
nextTime = timeDate;
nextWaterDuration = secondsToMinutesAndSeconds(timeArray[2]); // 获取并转换浇水时长
}
} else {
if (!prevTime || (now.getTime() - timeDate.getTime()) < (now.getTime() - prevTime.getTime())) {
prevTimeDiff = timeDifference(now, timeDate); // 注意这里要反过来算
prevTime = timeDate;
}
}
}
}
// 输出结果
this.xctime = `${nextTimeDiff.hours}时${nextTimeDiff.minutes}分`
this.xctimesc = nextWaterDuration
let timesc = prevTime.toTimeString().split(' ')[0]
this.sctimejs = timesc.slice(0,-3)
let xcjs = nextTime.toTimeString().split(' ')[0]
this.xctimesj = xcjs.slice(0,-3)
console.log(xcjs,'121212',this.formattedTime(this.ver_data.p_set5[0],this.ver_data.p_set5[1]))
// console.log('距离下次最近的时间差:', nextTimeDiff ? `${nextTimeDiff.hours}时${nextTimeDiff.minutes}分` : '无');
// console.log('下次时间:', nextTime ? nextTime.toTimeString().split(' ')[0] : '无');
// console.log('下次浇水时长:', nextWaterDuration || '无');
// console.log('距离上次最近的时间差:', prevTimeDiff ? `${prevTimeDiff.hours}时${prevTimeDiff.minutes}分` : '无');
// console.log('上次时间:', prevTime ? prevTime.toTimeString().split(' ')[0] : '无')
break
case xBlufi.XBLUFI_TYPE.TYPE_GET_DEVICE_LISTS_STOP:
if (options.result) {
let uniqueDevicesList = Array.from(new Set(this.devicesList))
let filteredDevices = uniqueDevicesList.filter(device => device.name.substring(0, 5) === "WATER")
// 将过滤后的数组重新赋值给 this.devicesList
this.devicesList = filteredDevices
}
break;
case xBlufi.XBLUFI_TYPE.TYPE_GET_DEVICE_LISTS_START:
if (!options.result) {
uni.showToast({
title: '蓝牙未开启',
icon: 'none',
duration: 3000
})
return
}
break
}
},
// 每隔一分钟发送一次获取数据
getshuju(){
const intervalId = setInterval(() => {
uni.getNetworkType({
success(res) {
if (res.networkType !== 'none') {
uni.getConnectedBluetoothDevices({
success(res) {
setTimeout(()=> {
xBlufi.notifySendCustomData({
customData: "11get"
})
},1000)
},
fail(err) {
console.error('获取已连接蓝牙设备信息失败:',err)
}
})
}
}
})
console.log("定时器每分钟执行一次");
}, 60000)
}
}
}
</script>
<style lang="scss">
.container {
display: flex;
align-items: center;
justify-content: center;
margin-top: 22rpx;
view{
width: 242rpx;
height: 208rpx;
background: #F0F0F0;
border-radius: 24rpx 24rpx 24rpx 24rpx;
text-align: center;
line-height: 208rpx;
font-weight: 600;
font-size: 44rpx;
color: #3D3D3D;
}
text{
font-size: 80rpx;
margin-left: 46rpx;
margin-right: 46rpx;
}
}
.anniu{
display: flex;
justify-content: space-between;
margin-top: 58rpx;
.qx{
width: 278rpx;
height: 80rpx;
border-radius: 10rpx 10rpx 10rpx 10rpx;
border: 2rpx solid #7FAD76;
font-size: 36rpx;
color: #7FAD76;
font-weight: 600;
line-height: 80rpx;
text-align: center;
}
.qd{
width: 278rpx;
height: 80rpx;
background: #7FAD76;
border-radius: 10rpx 10rpx 10rpx 10rpx;
font-size: 36rpx;
color: #fff;
font-weight: 600;
line-height: 80rpx;
text-align: center;
}
}
.selected-time {
margin-top: 20px;
font-size: 20px;
}
#activebor {
border: 1px solid #48893B;
}
@keyframes fadeInDown {
from {
opacity: 0;
transform: translateY(-20px);
/* 初始位置稍微在上方 */
}
to {
opacity: 1;
transform: translateY(0);
/* 最终位置 */
}
}
.manualmask {
width: 100%;
height: 100vh;
background: #3D3D3D;
opacity: 0.2;
position: fixed;
top: 0;
left: 0;
z-index: 99;
}
.manualjs {
width: 678rpx;
max-height: 610rpx;
background: #fff;
border-radius: 24rpx 24rpx 24rpx 24rpx;
position: fixed;
top: 538rpx;
left: 50%;
transform: translateX(-50%);
z-index: 100;
padding: 42rpx 44rpx;
box-sizing: border-box;
.toptit {
font-size: 36rpx;
color: #3D3D3D;
font-weight: 600;
display: flex;
justify-content: space-between;
align-items: center;
}
}
.page {
padding: 0 40rpx;
box-sizing: border-box;
background-color: #FFFFFF;
.tabsb {
width: 750rpx;
height: 90vh;
background: #FFFFFF;
position: fixed;
top: 270rpx;
left: 0;
padding: 0 40rpx;
padding-bottom: 60rpx !important;
box-sizing: border-box;
border-radius: 0rpx 0rpx 50rpx 50rpx;
z-index: 1;
padding-top: 48rpx;
box-sizing: border-box;
animation: fadeInDown .5s ease-out forwards;
.qdan {
width: 100%;
height: 102rpx;
font-size: 48rpx;
color: #FFFFFF;
font-weight: 600;
line-height: 102rpx;
text-align: center;
background-color: #48893B;
border-radius: 20rpx;
margin-top: 40rpx;
}
.sblist {
width: 100%;
height: 68vh;
overflow: scroll;
.sbist_val {
display: flex;
justify-content: space-between;
align-items: center;
padding: 40rpx 34rpx;
margin-bottom: 28rpx;
box-sizing: border-box;
background: #F7F7F7;
border-radius: 20rpx 20rpx 20rpx 20rpx;
border: 1px solid transparent;
.lt {
font-size: 36rpx;
color: #3D3D3D;
font-weight: 600;
}
.rt {
image {
width: 124rpx;
height: 124rpx;
}
}
}
}
}
.sbmask {
width: 100%;
height: 100vh;
background-color: rgb(238, 238, 238);
position: fixed;
top: 400rpx;
left: 0;
opacity: .5;
}
.wusb {
margin-top: 514rpx;
text-align: center;
text {
font-size: 28rpx;
color: #737B80;
}
view {
width: 212rpx;
height: 76rpx;
background: #48893B;
border-radius: 38rpx 38rpx 38rpx 38rpx;
border-radius: 50rpx;
font-size: 28rpx;
color: #FFFFFF;
text-align: center;
line-height: 76rpx;
margin: auto;
margin-top: 50rpx;
}
}
.wateringlogbox {
width: 100%;
height: 244rpx;
background: #FFFFFF;
box-shadow: 0rpx 0rpx 38rpx 0rpx rgba(128, 128, 128, 0.3);
filter: blur(0px);
border-radius: 20rpx;
margin-top: 20rpx;
padding: 30rpx;
box-sizing: border-box;
.wateringlogbd {
display: flex;
justify-content: space-between;
.lt {
view {
font-size: 28rpx;
color: #50565A;
margin-top: 10rpx;
}
}
.rt {
image {
width: 114rpx;
height: 114rpx;
}
}
}
.wateringlogtop {
display: flex;
align-items: center;
font-size: 32rpx;
color: #3D3D3D;
font-weight: 600;
image {
width: 40rpx;
height: 40rpx;
margin-right: 14rpx;
}
}
}
.dingshi_he {
margin-top: 24rpx;
width: 304rpx;
height: 194rpx;
background: #FFFFFF;
box-shadow: 0rpx 0rpx 38rpx 0rpx rgba(128, 128, 128, 0.3);
filter: blur(0px);
border-radius: 20rpx;
padding: 26rpx;
box-sizing: border-box;
.naoz {
font-size: 40rpx;
color: #3D3D3D;
font-weight: 600;
display: flex;
justify-content: space-between;
image {
width: 78rpx;
height: 78rpx;
}
}
.dstime {
margin-top: 14rpx;
display: flex;
align-items: center;
width: 100%;
justify-content: space-between;
image {
width: 52rpx;
height: 52rpx;
}
}
}
.switchbox {
margin-top: 24rpx;
display: flex;
justify-content: space-between;
.switch_he {
width: 304rpx;
height: 194rpx;
background: #FFFFFF;
box-shadow: 0rpx 0rpx 38rpx 0rpx rgba(128, 128, 128, 0.3);
filter: blur(0px);
border-radius: 20rpx;
padding: 26rpx;
box-sizing: border-box;
.yushui {
width: 100%;
font-size: 28rpx;
color: #3D3D3D;
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 20rpx;
}
image {
width: 78rpx;
height: 78rpx;
}
}
}
.devicebox {
width: 100%;
height: 290rpx;
background: #FFFFFF;
box-shadow: 0rpx 0rpx 38rpx 0rpx rgba(128, 128, 128, 0.3);
filter: blur(0px);
margin-top: 22rpx;
border-radius: 20rpx;
padding: 30rpx;
box-sizing: border-box;
.deviceweek {
display: flex;
justify-content: space-between;
margin-top: 34rpx;
// align-items: center;
.weeklist {
.kg {
font-size: 24rpx;
color: #999999;
font-weight: 600;
}
.weekday {
font-size: 36rpx;
color: #3D3D3D;
font-weight: 600;
margin-top: 4rpx;
}
.img {
text-align: center;
image {
width: 12rpx;
height: 12rpx;
}
}
}
}
.devicetop {
display: flex;
justify-content: space-between;
align-items: center;
.devicert {
text-align: right;
.shoudong {
display: flex;
image {
width: 64rpx;
height: 32rpx;
margin-right: 8rpx;
}
font-size: 24rpx;
color: #3D3D3D;
}
.shengyu {
font-size: 24rpx;
color: #3D3D3D;
margin-top: 6rpx;
}
}
.devicelt {
display: flex;
.xinghao {
font-size: 24rpx;
color: #3D3D3D;
.one {
font-size: 28rpx !important;
color: #3D3D3D;
font-weight: 600 !important;
margin-top: 6rpx;
}
}
image {
width: 74rpx;
height: 80rpx;
margin-right: 32rpx;
}
}
}
}
.selectbox {
width: 100%;
margin-top: 22rpx;
display: flex;
justify-content: space-between;
align-items: center;
.shebeiname {
font-size: 36rpx;
color: #73787B;
font-weight: 600;
display: flex;
align-items: center;
text {
display: inline-block;
width: 14rpx;
height: 14rpx;
background: #15C55D;
border-radius: 50%;
box-shadow: 0rpx 0rpx 10rpx 0rpx rgba(0, 255, 102, 0.9), 0rpx 0rpx 30rpx 0rpx rgba(69, 255, 143, 0.9);
margin-left: 22rpx;
}
}
.shebeiadd {
image {
width: 214rpx;
height: 64rpx;
}
}
.selectname {
font-size: 48rpx;
color: #3D3D3D;
font-weight: 600;
image {
width: 32rpx;
height: 26rpx;
margin-left: 14rpx;
}
}
.selectshezhi {
image {
width: 60rpx;
height: 66rpx;
}
}
}
.bjimg {
width: 100%;
height: 100vh;
position: fixed;
top: 0;
left: 0;
z-index: -1;
}
.title {
box-sizing: border-box;
image {
width: 260rpx;
height: 60rpx;
}
}
}
</style>