浇花器
This commit is contained in:
parent
a07ba2b839
commit
70148e4def
|
|
@ -6,7 +6,7 @@
|
|||
<image class="bj" src="https://api.ccttiot.com/smartmeter/img/static/urqUoIyCCEBykZ2oG8eO" mode=""></image>
|
||||
<view class="list">
|
||||
<view class="list_val" v-for="(item,index) in 6" :key="index">
|
||||
<view class="lt">
|
||||
<view class="lt" @click="btnitem">
|
||||
<view class="one">07:00</view>
|
||||
<view class="two"> P{{index + 1}} <text></text> 5分15秒 </view>
|
||||
</view>
|
||||
|
|
@ -16,6 +16,37 @@
|
|||
</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>
|
||||
|
|
@ -29,13 +60,59 @@
|
|||
},
|
||||
active:1,
|
||||
flag:false,
|
||||
checked: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:'--'
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
|
||||
},
|
||||
methods:{
|
||||
// 点击定时
|
||||
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
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
|
@ -48,6 +125,97 @@
|
|||
/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;
|
||||
|
|
@ -63,6 +231,7 @@
|
|||
justify-content: space-between;
|
||||
margin-top: 30rpx;
|
||||
.lt{
|
||||
width: 100%;
|
||||
.one{
|
||||
font-size: 72rpx;
|
||||
color: #50565A;
|
||||
|
|
|
|||
|
|
@ -162,6 +162,13 @@
|
|||
"enablePullDownRefresh": false,
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
},{
|
||||
"path": "lanya",
|
||||
"style": {
|
||||
"navigationBarTitleText": "上传",
|
||||
"enablePullDownRefresh": false,
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -33,7 +33,7 @@
|
|||
<view class="shebeiname">
|
||||
丁丁浇花器 <text></text>
|
||||
</view>
|
||||
<view class="shebeiadd">
|
||||
<view class="shebeiadd" @click="btnaddsb">
|
||||
<image src="https://api.ccttiot.com/smartmeter/img/static/udlX67UXzuRUZCuEtWDH" mode=""></image>
|
||||
</view>
|
||||
</view>
|
||||
|
|
@ -141,10 +141,12 @@
|
|||
<!-- 手动浇水 -->
|
||||
<view class="manualjs" v-if="sdjsflag">
|
||||
<view class="toptit">
|
||||
选择浇水时长 <text>{{formatTime(selectedMinute + '分' , selectedSecond + '秒')}}</text>
|
||||
选择浇水时长
|
||||
</view>
|
||||
<view class="container">
|
||||
<TimePicker @change-minute="onMinuteChange" @change-second="onSecondChange" />
|
||||
<view class="container" @click="show = true">
|
||||
<view class="">{{minute}}分</view>
|
||||
<text>:</text>
|
||||
<view class="">{{second}}秒</view>
|
||||
</view>
|
||||
<view class="anniu">
|
||||
<view class="qx" @click="btnqx">
|
||||
|
|
@ -156,6 +158,8 @@
|
|||
</view>
|
||||
</view>
|
||||
<view class="manualmask" v-if="sdjsflag"></view>
|
||||
<!-- 选择浇水时间-->
|
||||
<u-picker v-model="show" mode="time" :params="params" @confirm="confirm"></u-picker>
|
||||
|
||||
<tab-bar :indexs='0'></tab-bar>
|
||||
|
||||
|
|
@ -163,6 +167,7 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
var xBlufi = require("@/components/blufi/xBlufi.js")
|
||||
import TimePicker from '@/components/TimePicker/index.vue'
|
||||
export default {
|
||||
components: {
|
||||
|
|
@ -177,13 +182,41 @@
|
|||
xuanzeflag: false,
|
||||
selectedMinute: '1',
|
||||
selectedSecond: '1',
|
||||
sdjsflag:false
|
||||
sdjsflag:false ,
|
||||
show: false,
|
||||
params: {
|
||||
year: false,
|
||||
month: false,
|
||||
day: false,
|
||||
hour: false,
|
||||
minute: true,
|
||||
second: true
|
||||
},
|
||||
minute:'--',
|
||||
second:'--'
|
||||
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
|
||||
},
|
||||
mounted() {
|
||||
|
||||
},
|
||||
methods: {
|
||||
// 点击添加设备
|
||||
btnaddsb(){
|
||||
uni.navigateTo({
|
||||
url:'/page_user/lanya'
|
||||
})
|
||||
},
|
||||
|
||||
// 点击选择浇水时间
|
||||
confirm(e){
|
||||
this.minute = e.minute
|
||||
this.second = e.second
|
||||
},
|
||||
|
||||
// 点击跳转到定时页面
|
||||
btntime(){
|
||||
uni.navigateTo({
|
||||
|
|
@ -194,29 +227,11 @@
|
|||
// 点击取消手动浇水
|
||||
btnqx(){
|
||||
this.sdjsflag = false
|
||||
this.selectedMinute = '1'
|
||||
this.selectedSecond = '1'
|
||||
},
|
||||
btnqd(){
|
||||
this.sdjsflag = false
|
||||
this.kgflag = true
|
||||
},
|
||||
|
||||
// 点击选择手动浇水时间
|
||||
onMinuteChange(minute) {
|
||||
this.selectedMinute = minute + 1
|
||||
},
|
||||
onSecondChange(second) {
|
||||
this.selectedSecond = second + 1
|
||||
},
|
||||
formatTime(minute, second) {
|
||||
const formattedMinute = this.formatNumber(minute)
|
||||
const formattedSecond = this.formatNumber(second)
|
||||
return `${formattedMinute}${formattedSecond}`
|
||||
},
|
||||
formatNumber(num) {
|
||||
return num < 10 ? '0' + num : num;
|
||||
},
|
||||
|
||||
// 开启和关闭
|
||||
btnkq() {
|
||||
|
|
@ -258,37 +273,53 @@
|
|||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
|
||||
.container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
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: 36rpx;
|
||||
margin-top: 58rpx;
|
||||
.qx{
|
||||
width: 278rpx;
|
||||
height: 70rpx;
|
||||
height: 80rpx;
|
||||
border-radius: 10rpx 10rpx 10rpx 10rpx;
|
||||
border: 2rpx solid #7FAD76;
|
||||
font-size: 36rpx;
|
||||
color: #7FAD76;
|
||||
font-weight: 600;
|
||||
line-height: 70rpx;
|
||||
line-height: 80rpx;
|
||||
text-align: center;
|
||||
}
|
||||
.qd{
|
||||
width: 278rpx;
|
||||
height: 70rpx;
|
||||
height: 80rpx;
|
||||
background: #7FAD76;
|
||||
border-radius: 10rpx 10rpx 10rpx 10rpx;
|
||||
font-size: 36rpx;
|
||||
color: #fff;
|
||||
font-weight: 600;
|
||||
line-height: 70rpx;
|
||||
line-height: 80rpx;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
|
@ -329,8 +360,8 @@
|
|||
|
||||
.manualjs {
|
||||
width: 678rpx;
|
||||
height: 610rpx;
|
||||
background: #F0F0F0;
|
||||
max-height: 610rpx;
|
||||
background: #fff;
|
||||
border-radius: 24rpx 24rpx 24rpx 24rpx;
|
||||
position: fixed;
|
||||
top: 538rpx;
|
||||
|
|
@ -572,7 +603,7 @@
|
|||
background: #FFFFFF;
|
||||
box-shadow: 0rpx 0rpx 38rpx 0rpx rgba(128, 128, 128, 0.3);
|
||||
filter: blur(0px);
|
||||
margin-top: 42rpx;
|
||||
margin-top: 22rpx;
|
||||
border-radius: 20rpx;
|
||||
padding: 30rpx;
|
||||
box-sizing: border-box;
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user