283 lines
7.7 KiB
Vue
283 lines
7.7 KiB
Vue
<template>
|
|
<view class="scene-timing-wrap">
|
|
<view class="container-wrap">
|
|
<view class="form-item-wrap">
|
|
<u-radio-group v-model='radioValue' placement="column">
|
|
<view style="padding:20rpx 0"><u-radio :name="1" :label="1" class="radio-style">
|
|
{{$tt('cron.second.452546-0')}}
|
|
</u-radio>
|
|
</view>
|
|
<view style="padding:20rpx 0">
|
|
<u-radio :name="2" :label="2">
|
|
{{$tt('cron.second.452546-1')}}
|
|
<u--input v-model='cycle01' :min="1" :max="30" type="number"
|
|
:customStyle="{ marginLeft: '15rpx',width:'100rpx;' }" :maxlength="2" @input="checkValueCycle01"/> -
|
|
<u--input v-model='cycle02' :min="cycle01 ? cycle01 + 1 : 2" :max="31"
|
|
:customStyle="{ marginRight: '15rpx',width:'100rpx;' }" type="number" :maxlength="2" @input="checkValueCycle02"/>
|
|
{{$tt('cron.second.452546-2')}}
|
|
</u-radio>
|
|
</view>
|
|
<view style="padding:20rpx 0"><u-radio :name="3" :label="3">
|
|
{{$tt('cron.second.452546-3')}}
|
|
<u--input v-model='average01' :min="1" :max="30" type="number"
|
|
:customStyle="{ marginLeft: '15rpx',width:'100rpx;' }" :maxlength="2" @input="checkValueAverage01"/>
|
|
{{$tt('cron.second.452546-4')}}
|
|
<u--input v-model='average02' :min="average01 ?average01 + 1 : 2" :max="31"
|
|
:customStyle="{ margin: '0 15rpx',width:'100rpx;' }" type="number" :maxlength="2" @input="checkValueAverage02"/>
|
|
{{$tt('cron.second.452546-5')}}
|
|
</u-radio>
|
|
</view>
|
|
<view style="padding:20rpx 0"><u-radio :name="4" :label="4">
|
|
{{$tt('cron.second.452546-6')}}
|
|
<view style="margin-right: 15rpx;"></view>
|
|
<!-- #ifndef APP-NVUE -->
|
|
<u-input v-model="selectValue" :placeholder="$tt('cron.day.304304-11')" inputAlign="right"
|
|
disabledColor="#fff" disabled :customStyle="{ marginRight: '15rpx' }">
|
|
<!-- #ifdef APP-NVUE -->
|
|
<u--input v-model="selectValue" :placeholder="$tt('cron.day.304304-11')"
|
|
inputAlign="right" disabledColor="#fff" disabled>
|
|
</u--input>
|
|
<!-- #endif -->
|
|
<!-- #endif -->
|
|
<template slot="suffix">
|
|
<u-icon name="arrow-down" @click="isRepeat = true"></u-icon>
|
|
</template>
|
|
<!-- #ifndef APP-NVUE -->
|
|
</u-input>
|
|
<!-- #endif -->
|
|
<!-- #ifdef APP-NVUE -->
|
|
</u--input>
|
|
<!-- #endif -->
|
|
</u-radio>
|
|
</view>
|
|
</u-radio-group>
|
|
</view>
|
|
</view>
|
|
<view class="other">
|
|
<u-popup :show="isRepeat" :round="5" mode="bottom" bgColor="#eef3f7" :closeOnClickOverlay="true"
|
|
@close="isRepeat = false">
|
|
<view class="repeat-popup-wrap">
|
|
<view class="nav">
|
|
<text @click="isRepeat = false">{{$tt('common.cancel')}}</text>
|
|
<text @click="handleRepeatConfirm">{{$tt('common.confirm')}}</text>
|
|
</view>
|
|
<view class="radio-group-wrap" style="height: 500rpx;overflow: auto;">
|
|
<u-checkbox-group v-model="checkboxList" :borderBottom="false" placement="column"
|
|
iconPlacement="right">
|
|
<view class="radio-wrap">
|
|
<view v-for="num in Array(60).fill(0).map((_, index) => index)" :key="num"
|
|
class="number-wrap" style="padding:15rpx 0">
|
|
<u-checkbox :label="num.toString()" :name="num" iconSize="16"></u-checkbox>
|
|
</view>
|
|
</view>
|
|
</u-checkbox-group>
|
|
</view>
|
|
</view>
|
|
</u-popup>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import { navigateBackTo } from '@/utils/common.js';
|
|
|
|
export default {
|
|
data() {
|
|
return {
|
|
radioValue: 1,
|
|
radioValue1: 1,
|
|
cycle01: 1,
|
|
cycle02: 2,
|
|
average01: 0,
|
|
average02: 1,
|
|
selectValue: '',
|
|
checkboxList: [],
|
|
isRepeat: false,
|
|
repeatValue: '',
|
|
checkNum: this.$options.propsData.check,
|
|
// 生成 0 到 60 的数组作为选项
|
|
options: Array.from({ length: 61 }, (_, i) => ({
|
|
value: i,
|
|
text: i.toString(),
|
|
})),
|
|
locationList: [{
|
|
value: 1,
|
|
text: this.$tt('deviceDetail.autoPosition')
|
|
}, {
|
|
value: 2,
|
|
text: this.$tt('deviceDetail.devicePosition')
|
|
}, {
|
|
value: 3,
|
|
text: this.$tt('deviceDetail.customLocation')
|
|
}],
|
|
}
|
|
},
|
|
name: 'crontab-second',
|
|
props: ['check', 'radioParent'],
|
|
methods: {
|
|
// 单选按钮值变化时
|
|
radioChange() {
|
|
switch (this.radioValue) {
|
|
case 1:
|
|
this.$emit('update', 'second', '*', 'second');
|
|
break;
|
|
case 2:
|
|
this.$emit('update', 'second', this.cycleTotal);
|
|
break;
|
|
case 3:
|
|
this.$emit('update', 'second', this.averageTotal);
|
|
break;
|
|
case 4:
|
|
this.$emit('update', 'second', this.checkboxString);
|
|
break;
|
|
}
|
|
},
|
|
// 周期两个值变化时
|
|
cycleChange() {
|
|
if (this.radioValue == '2') {
|
|
this.$emit('update', 'second', this.cycleTotal);
|
|
}
|
|
},
|
|
// 时间选择
|
|
handleRepeatConfirm() {
|
|
this.selectValue = this.checkboxList.join(', ');
|
|
this.isRepeat = false;
|
|
},
|
|
// 平均两个值变化时
|
|
averageChange() {
|
|
if (this.radioValue == '3') {
|
|
this.$emit('update', 'second', this.averageTotal);
|
|
}
|
|
},
|
|
// checkbox值变化时
|
|
checkboxChange() {
|
|
if (this.radioValue == '4') {
|
|
this.$emit('update', 'second', this.checkboxString);
|
|
}
|
|
},
|
|
handleSelectChange(selected) {
|
|
// 处理选中值变化
|
|
this.checkboxList = selected;
|
|
},
|
|
//检查输入cycle01
|
|
checkValueCycle01(event) {
|
|
if (event < 0) {
|
|
this.cycle01 = 0;
|
|
} else if (event > 58) {
|
|
this.cycle01 = 58;
|
|
} else {
|
|
this.cycle01 = event;
|
|
}
|
|
},
|
|
//检查输入cycle02
|
|
checkValueCycle02(event) {
|
|
if (event < this.cycle01) {
|
|
this.cycle02 = this.cycle01 + 1;
|
|
} else if (event > 59) {
|
|
this.cycle02 = 59;
|
|
} else {
|
|
this.cycle02 = event;
|
|
}
|
|
},
|
|
//检查输入average01
|
|
checkValueAverage01(event) {
|
|
if (event < 0) {
|
|
this.average01 = 0;
|
|
} else if (event > 58) {
|
|
this.average01 = 58;
|
|
} else {
|
|
this.average01 = event;
|
|
}
|
|
},
|
|
//检查输入average02
|
|
checkValueAverage02(event) {
|
|
if (event < 1) {
|
|
this.average02 = 1;
|
|
} else if (event > 59) {
|
|
this.average02 = 59;
|
|
} else {
|
|
this.average02 = event;
|
|
}
|
|
},
|
|
},
|
|
watch: {
|
|
'radioValue': 'radioChange',
|
|
'cycleTotal': 'cycleChange',
|
|
'averageTotal': 'averageChange',
|
|
'checkboxString': 'checkboxChange',
|
|
radioParent() {
|
|
this.radioValue = this.radioParent;
|
|
console.log(this.radioValue, 'this.radioValue');
|
|
}
|
|
},
|
|
computed: {
|
|
// 计算两个周期值
|
|
cycleTotal: function() {
|
|
const cycle01 = this.checkNum(this.cycle01, 0, 58)
|
|
const cycle02 = this.checkNum(this.cycle02, cycle01 ? cycle01 + 1 : 1, 59)
|
|
return cycle01 + '-' + cycle02;
|
|
},
|
|
// 计算平均用到的值
|
|
averageTotal: function() {
|
|
const average01 = this.checkNum(this.average01, 0, 58)
|
|
const average02 = this.checkNum(this.average02, 1, 59 - average01 || 0)
|
|
return average01 + '/' + average02;
|
|
},
|
|
// 计算勾选的checkbox值合集
|
|
checkboxString: function() {
|
|
let str = this.selectValue;
|
|
return str == '' ? '*' : str;
|
|
}
|
|
},
|
|
}
|
|
</script>
|
|
<style lang="scss">
|
|
page {
|
|
height: 100%;
|
|
background: $uni-bg-color-grey;
|
|
}
|
|
</style>
|
|
<style lang="scss" scoped>
|
|
.container-wrap {
|
|
.form-wrap {
|
|
background: #fff;
|
|
border-radius: 10rpx;
|
|
|
|
.form-item-wrap {
|
|
font-size: 14px;
|
|
}
|
|
}
|
|
|
|
.btn-wrap {
|
|
margin: 30rpx 26rpx;
|
|
}
|
|
}
|
|
|
|
.other {
|
|
.repeat-popup-wrap {
|
|
padding: 30rpx;
|
|
|
|
.nav {
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
font-size: 32rpx;
|
|
margin-bottom: 34rpx;
|
|
}
|
|
|
|
.radio-group-wrap {
|
|
background-color: #fff;
|
|
border-radius: 10rpx;
|
|
|
|
.radio-wrap {
|
|
padding: 32rpx;
|
|
|
|
&:not(:last-child) {
|
|
border-bottom: 1rpx solid #F1F2F5;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style> |