319 lines
6.9 KiB
Vue
319 lines
6.9 KiB
Vue
<template>
|
|
<view>
|
|
<u-navbar :is-back="true" title='定时管理' title-color="#000" :border-bottom="false" :background="bgc"
|
|
id="navbar">
|
|
</u-navbar>
|
|
<image class="bj" src="https://api.ccttiot.com/smartmeter/img/static/urqUoIyCCEBykZ2oG8eO" mode=""></image>
|
|
<view class="list">
|
|
<view class="list_val" v-for="(values, key, index) in list" :key="key">
|
|
<view class="lt" @click="btnitem(key)">
|
|
<view class="one">{{ formattedTime(values[0], values[1]) }}</view>
|
|
<view class="two">P{{ index + 1 }} <text></text> {{ formatTime(values[2]) }}</view>
|
|
</view>
|
|
<view class="rt">
|
|
<u-switch v-model="values[3]" active-color="#48893B" inactive-color="#BDBCBC"></u-switch>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 设置浇水时间弹窗 -->
|
|
<view class="jiaoshui" v-if="timeflag">
|
|
<view class="top">
|
|
设置浇水
|
|
</view>
|
|
<view class="ts">
|
|
距离下次浇水时间还有20小时41分
|
|
</view>
|
|
<view class="shifen" @click="show = true">
|
|
<text>{{hour}}时</text> <text>{{minutekq}}分</text>
|
|
</view>
|
|
<view class="jssc">
|
|
浇水时长
|
|
</view>
|
|
<view class="shifen" @click="shows = true">
|
|
<text>{{minute}}分</text> <text>{{second}}秒</text>
|
|
</view>
|
|
<view class="anniu">
|
|
<view class="qx" @click="btnqx">
|
|
取消
|
|
</view>
|
|
<view class="qd" @click="btnqd">
|
|
确定
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="mask" v-if="timeflag"></view>
|
|
<!-- 定时时间 -->
|
|
<u-picker v-model="show" mode="time" :params="paramss" @confirm="confirm"></u-picker>
|
|
<!-- 定时时长 -->
|
|
<u-picker v-model="shows" mode="time" :params="params" @confirm="confirms"></u-picker>
|
|
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
bgc: {
|
|
backgroundColor: "#fff",
|
|
},
|
|
active:1,
|
|
flag:false,
|
|
checked:false,
|
|
timeflag:false,
|
|
|
|
show: false,
|
|
params: {
|
|
year: false,
|
|
month: false,
|
|
day: false,
|
|
hour: false,
|
|
minute: true,
|
|
second: true,
|
|
},
|
|
shows: false,
|
|
paramss: {
|
|
year: false,
|
|
month: false,
|
|
day: false,
|
|
hour: true,
|
|
minute: true,
|
|
second: false,
|
|
},
|
|
minute:'--',
|
|
second:'--',
|
|
hour:'--',
|
|
minutekq:'--',
|
|
list:{},
|
|
checkedStatus: {}
|
|
}
|
|
},
|
|
// 分享到好友（会话）
|
|
onShareAppMessage: function() {
|
|
return {
|
|
title: '绿小能',
|
|
path: '/pages/index/index'
|
|
}
|
|
},
|
|
// 分享到朋友圈
|
|
onShareTimeline: function() {
|
|
return {
|
|
title: '绿小能',
|
|
query: '',
|
|
path: '/pages/index/index'
|
|
}
|
|
},
|
|
onLoad(option) {
|
|
this.list = JSON.parse(option.list)
|
|
for (let key in this.list) {
|
|
if (this.list.hasOwnProperty(key)) {
|
|
// 获取当前数组
|
|
let arr = this.list[key];
|
|
// 判断数组的最后一个元素，并进行替换
|
|
if (arr[arr.length - 1] === 0) {
|
|
arr[arr.length - 1] = false;
|
|
} else if (arr[arr.length - 1] === 1) {
|
|
arr[arr.length - 1] = true;
|
|
}
|
|
}
|
|
}
|
|
console.log(this.list);
|
|
},
|
|
methods:{
|
|
formattedTime(minutes, seconds) {
|
|
// 将数字转换为字符串并补零
|
|
const formattedMinutes = String(minutes).padStart(2, '0');
|
|
const formattedSeconds = String(seconds).padStart(2, '0');
|
|
// 返回格式化后的时间字符串
|
|
return `${formattedMinutes}:${formattedSeconds}`;
|
|
},
|
|
|
|
formatTime(seconds) {
|
|
const minutes = Math.floor(seconds / 60);
|
|
const remainingSeconds = seconds % 60;
|
|
return `${minutes}分${remainingSeconds < 10 ? '0' : ''}${remainingSeconds}秒`;
|
|
},
|
|
|
|
// 点击定时
|
|
btnitem(){
|
|
this.timeflag = true
|
|
},
|
|
// 取消选择定时
|
|
btnqx(){
|
|
this.timeflag = false
|
|
},
|
|
// 确定选择定时
|
|
btnqd(){
|
|
this.timeflag = false
|
|
},
|
|
// 定时浇水时间
|
|
confirm(e){
|
|
this.hour = e.hour
|
|
this.minutekq = e.minute
|
|
},
|
|
// 定时浇水时长
|
|
confirms(e){
|
|
this.minute = e.minute
|
|
this.second = e.second
|
|
}
|
|
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="less">
|
|
/deep/ .u-title{
|
|
margin-bottom: 22rpx;
|
|
}
|
|
/deep/ .uicon-nav-back{
|
|
margin-bottom: 22rpx;
|
|
}
|
|
.jiaoshui{
|
|
position: fixed;
|
|
top: 366rpx;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
width: 678rpx;
|
|
height: 800rpx;
|
|
background: #FFFFFF;
|
|
border-radius: 24rpx 24rpx 24rpx 24rpx;
|
|
z-index: 99;
|
|
.top{
|
|
margin-top: 42rpx;
|
|
width: 100%;
|
|
text-align: center;
|
|
font-size: 44rpx;
|
|
color: #3D3D3D;
|
|
font-weight: 600;
|
|
}
|
|
.ts{
|
|
margin-top: 30rpx;
|
|
width: 100%;
|
|
text-align: center;
|
|
font-size: 32rpx;
|
|
color: #808080;
|
|
font-weight: 600;
|
|
}
|
|
.shifen{
|
|
width: 512rpx;
|
|
height: 128rpx;
|
|
background: #F0F0F0;
|
|
border-radius: 16rpx 16rpx 16rpx 16rpx;
|
|
margin: auto;
|
|
margin-top: 30rpx;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
line-height: 128rpx;
|
|
padding: 0 102rpx;
|
|
box-sizing: border-box;
|
|
text{
|
|
font-size: 44rpx;
|
|
color: #3D3D3D;
|
|
font-weight: 600;
|
|
}
|
|
}
|
|
.jssc{
|
|
font-size: 32rpx;
|
|
color: #808080;
|
|
font-weight: 600;
|
|
margin-top: 58rpx;
|
|
margin-left: 96rpx;
|
|
}
|
|
.anniu{
|
|
display: flex;
|
|
justify-content: space-between;
|
|
margin-top: 58rpx;
|
|
padding: 0 44rpx;
|
|
box-sizing: border-box;
|
|
.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;
|
|
}
|
|
}
|
|
}
|
|
.mask{
|
|
width: 100%;
|
|
height: 100vh;
|
|
background-color: #000;
|
|
opacity: .6;
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
z-index: 98;
|
|
}
|
|
.list{
|
|
.list_val{
|
|
width: 678rpx;
|
|
height: 208rpx;
|
|
background: #FFFFFF;
|
|
box-shadow: 0rpx 10rpx 64rpx 0rpx rgba(0,0,0,0.08);
|
|
border-radius: 20rpx;
|
|
padding-top: 16rpx;
|
|
padding-left: 42rpx;
|
|
padding-right: 42rpx;
|
|
box-sizing: border-box;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
margin-top: 30rpx;
|
|
.lt{
|
|
width: 100%;
|
|
.one{
|
|
font-size: 72rpx;
|
|
color: #50565A;
|
|
font-weight: 600;
|
|
}
|
|
.two{
|
|
font-size: 32rpx;
|
|
color: #50565A;
|
|
margin-top: 12rpx;
|
|
text{
|
|
display: inline-block;
|
|
width: 1rpx;
|
|
height: 28rpx;
|
|
background: #3D3D3D;
|
|
margin-left: 26rpx;
|
|
margin-right: 26rpx;
|
|
}
|
|
}
|
|
}
|
|
.rt{
|
|
padding-top: 70rpx;
|
|
box-sizing: border-box;
|
|
}
|
|
}
|
|
}
|
|
page{
|
|
width: 100%;
|
|
padding: 20rpx 30rpx;
|
|
box-sizing: border-box;
|
|
background-color: #fff;
|
|
}
|
|
.bj{
|
|
width: 100%;
|
|
height: 100vh;
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
z-index: -1;
|
|
}
|
|
|
|
</style> |