517 lines
14 KiB
Vue
517 lines
14 KiB
Vue
|
<template>
|
|||
|
<page-meta>
|
|||
|
<navigation-bar :title="$tt('cron.index.464657-11')" title-align="center" background-color="#F1F3F9"
|
|||
|
front-color="#000000">
|
|||
|
</navigation-bar>
|
|||
|
</page-meta>
|
|||
|
|
|||
|
<view class="scene-timing-wrap">
|
|||
|
<view class="container-wrap">
|
|||
|
<view class="form-wrap">
|
|||
|
<!-- <u-sticky bgColor="#FFF" customStyle="border-bottom:1px solid #eee;border-radius:20rpx"> -->
|
|||
|
<u-tabs :list="expressList" lineHeight="2" :duration="100" @click="tabClick"></u-tabs>
|
|||
|
<!-- </u-sticky> -->
|
|||
|
<view class="form-item-wrap" v-if="tabIndex==0">
|
|||
|
<CrontabSecond @update="updateCrontabValue" :check="checkNumber" :cron="crontabValueObj"
|
|||
|
ref="cronsecond" />
|
|||
|
</view>
|
|||
|
<view class="form-item-wrap" v-if="tabIndex==1">
|
|||
|
<CrontabMin @update="updateCrontabValue" :check="checkNumber" :cron="crontabValueObj"
|
|||
|
ref="cronsecond" />
|
|||
|
</view>
|
|||
|
<view class="form-item-wrap" v-if="tabIndex==2">
|
|||
|
<CrontabHour @update="updateCrontabValue" :check="checkNumber" :cron="crontabValueObj"
|
|||
|
ref="cronsecond" />
|
|||
|
</view>
|
|||
|
<view class="form-item-wrap" v-if="tabIndex==3">
|
|||
|
<CrontabDay @update="updateCrontabValue" :check="checkNumber" :cron="crontabValueObj"
|
|||
|
ref="cronsecond" />
|
|||
|
</view>
|
|||
|
<view class="form-item-wrap" v-if="tabIndex==4">
|
|||
|
<CrontabMonth @update="updateCrontabValue" :check="checkNumber" :cron="crontabValueObj"
|
|||
|
ref="cronsecond" />
|
|||
|
</view>
|
|||
|
<view class="form-item-wrap" v-if="tabIndex==5">
|
|||
|
<CrontabWeek @update="updateCrontabValue" :check="checkNumber" :cron="crontabValueObj"
|
|||
|
ref="cronsecond" />
|
|||
|
</view>
|
|||
|
<view class="form-item-wrap" v-if="tabIndex==6">
|
|||
|
<CrontabYear @update="updateCrontabValue" :check="checkNumber" :cron="crontabValueObj"
|
|||
|
ref="cronsecond" />
|
|||
|
</view>
|
|||
|
</view>
|
|||
|
<div class="popup-main">
|
|||
|
<div class="popup-result" style="border-top: 1px solid #ccc;">
|
|||
|
<p class="title">{{$tt('cron.index.464657-7')}}</p>
|
|||
|
<uni-table :border="true" stripe>
|
|||
|
<uni-tr>
|
|||
|
<!-- 表头 -->
|
|||
|
<uni-th v-for="(title, index) in tabTitles" :key="index" width="40">{{ title }}</uni-th>
|
|||
|
<uni-th>{{$tt('cron.index.464657-8')}}</uni-th>
|
|||
|
</uni-tr>
|
|||
|
<uni-tr>
|
|||
|
<!-- 数据行 -->
|
|||
|
<uni-td>
|
|||
|
<span>{{ crontabValueObj.second }}</span>
|
|||
|
</uni-td>
|
|||
|
<uni-td>
|
|||
|
<span>{{ crontabValueObj.min }}</span>
|
|||
|
</uni-td>
|
|||
|
<uni-td>
|
|||
|
<span>{{ crontabValueObj.hour }}</span>
|
|||
|
</uni-td>
|
|||
|
<uni-td>
|
|||
|
<span>{{ crontabValueObj.day }}</span>
|
|||
|
</uni-td>
|
|||
|
<uni-td>
|
|||
|
<span>{{ crontabValueObj.month }}</span>
|
|||
|
</uni-td>
|
|||
|
<uni-td>
|
|||
|
<span>{{ crontabValueObj.week }}</span>
|
|||
|
</uni-td>
|
|||
|
<uni-td>
|
|||
|
<span>{{ crontabValueObj.year }}</span>
|
|||
|
</uni-td>
|
|||
|
<uni-td>
|
|||
|
<span>{{ crontabValueString }}</span>
|
|||
|
</uni-td>
|
|||
|
</uni-tr>
|
|||
|
</uni-table>
|
|||
|
</div>
|
|||
|
</div>
|
|||
|
<div class="popup-main">
|
|||
|
<CrontabResult :ex="crontabValueString"></CrontabResult>
|
|||
|
</div>
|
|||
|
<view class="btn-wrap" style="margin-top:20rpx;display:flex;">
|
|||
|
<u-button :customStyle="{ height: '96rpx',marginLeft:'5rpx', color: '#3378FE', borderRadius: '10rpx' }"
|
|||
|
size="normal" :plain="true" :text="$tt('common.confirm')" @click="submitFill"></u-button>
|
|||
|
<u-button
|
|||
|
:customStyle="{ height: '96rpx',marginRight:'5rpx', color: '#000', borderRadius: '10rpx',marginLeft:'10rpx' }"
|
|||
|
size="normal" :plain="true" :text="$tt('cron.index.464657-10')" @click="clearCron"></u-button>
|
|||
|
</view>
|
|||
|
</view>
|
|||
|
</view>
|
|||
|
</template>
|
|||
|
|
|||
|
<script>
|
|||
|
import { navigateBackTo } from '@/utils/common.js';
|
|||
|
import CrontabSecond from './cron/second.vue';
|
|||
|
import CrontabMin from './cron/min.vue';
|
|||
|
import CrontabHour from './cron/hour.vue';
|
|||
|
import CrontabDay from './cron/day.vue';
|
|||
|
import CrontabMonth from './cron/month.vue';
|
|||
|
import CrontabWeek from './cron/week.vue';
|
|||
|
import CrontabYear from './cron/year.vue';
|
|||
|
import CrontabResult from './cron/result.vue';
|
|||
|
|
|||
|
export default {
|
|||
|
components: {
|
|||
|
CrontabSecond,
|
|||
|
CrontabMin,
|
|||
|
CrontabHour,
|
|||
|
CrontabDay,
|
|||
|
CrontabMonth,
|
|||
|
CrontabWeek,
|
|||
|
CrontabYear,
|
|||
|
CrontabResult,
|
|||
|
},
|
|||
|
data() {
|
|||
|
return {
|
|||
|
type: 'trigger',
|
|||
|
editIndex: null, // null 代表新增
|
|||
|
isTimer: false, // 时间
|
|||
|
isRepeat: false, // 星期
|
|||
|
tabIndex: 0,
|
|||
|
//秒
|
|||
|
radioValue: 1,
|
|||
|
workday: 1,
|
|||
|
cycle01: 1,
|
|||
|
cycle02: 2,
|
|||
|
average01: 1,
|
|||
|
average02: 1,
|
|||
|
radioValue1: 1,
|
|||
|
selectedValue: null, // 选中的值
|
|||
|
options: [], // 选择框的选项
|
|||
|
checkboxList: [],
|
|||
|
resultList: [],
|
|||
|
isScenePage: 1, //是否为场景页定时,1为场景,0为设备定时
|
|||
|
checkNum: this.$options.propsData.check,
|
|||
|
form: {
|
|||
|
time: uni.$u.timeFormat(new Date(), 'hh:MM'),
|
|||
|
repeat: this.$tt('sceneTiming.everyDay'),
|
|||
|
isAdvance: 0,
|
|||
|
cronExpression: `0 ${uni.$u.timeFormat(new Date(),'MM')} ${uni.$u.timeFormat(new Date(),'hh')} ? * 1,2,3,4,5,6,7`,
|
|||
|
},
|
|||
|
tabTitles: ['秒', '分钟', '小时', '日', '月', '周', '年'],
|
|||
|
tabActive: 0,
|
|||
|
myindex: 0,
|
|||
|
crontabValueObj: {
|
|||
|
second: '*',
|
|||
|
min: '*',
|
|||
|
hour: '*',
|
|||
|
day: '*',
|
|||
|
month: '*',
|
|||
|
week: '?',
|
|||
|
year: '',
|
|||
|
},
|
|||
|
expressList: [{
|
|||
|
id: '0',
|
|||
|
name: '秒',
|
|||
|
}, {
|
|||
|
id: '1',
|
|||
|
name: '分钟',
|
|||
|
}, {
|
|||
|
id: '2',
|
|||
|
name: '小时'
|
|||
|
}, {
|
|||
|
id: '3',
|
|||
|
name: '日'
|
|||
|
}, {
|
|||
|
id: '4',
|
|||
|
name: '月'
|
|||
|
}, {
|
|||
|
id: '5',
|
|||
|
name: '周'
|
|||
|
}, {
|
|||
|
id: '6',
|
|||
|
name: '年'
|
|||
|
}],
|
|||
|
rules: {
|
|||
|
time: {
|
|||
|
type: 'string',
|
|||
|
required: true,
|
|||
|
message: this.$tt('sceneTiming.selectTime'),
|
|||
|
trigger: ['blur', 'change']
|
|||
|
},
|
|||
|
repeat: {
|
|||
|
type: 'string',
|
|||
|
required: true,
|
|||
|
message: this.$tt('sceneTiming.selectWeek'),
|
|||
|
trigger: ['blur', 'change']
|
|||
|
},
|
|||
|
},
|
|||
|
repeatValue: [1, 2, 3, 4, 5, 6, 7],
|
|||
|
};
|
|||
|
|
|||
|
},
|
|||
|
mounted() {},
|
|||
|
|
|||
|
computed: {
|
|||
|
// 计算两个周期值
|
|||
|
cycleTotal: function() {
|
|||
|
const cycle01 = this.checkNum(this.cycle01, 1, 30)
|
|||
|
const cycle02 = this.checkNum(this.cycle02, cycle01 ? cycle01 + 1 : 2, 31, 31)
|
|||
|
return cycle01 + '-' + cycle02;
|
|||
|
},
|
|||
|
// 计算平均用到的值
|
|||
|
averageTotal: function() {
|
|||
|
const average01 = this.checkNum(this.average01, 1, 30)
|
|||
|
const average02 = this.checkNum(this.average02, 1, 31 - average01 || 0)
|
|||
|
return average01 + '/' + average02;
|
|||
|
},
|
|||
|
// 计算工作日格式
|
|||
|
workdayCheck: function() {
|
|||
|
const workday = this.checkNum(this.workday, 1, 31)
|
|||
|
return workday;
|
|||
|
},
|
|||
|
// 计算勾选的checkbox值合集
|
|||
|
checkboxString: function() {
|
|||
|
let str = this.checkboxList.join();
|
|||
|
return str == '' ? '*' : str;
|
|||
|
},
|
|||
|
crontabValueString: function() {
|
|||
|
let obj = this.crontabValueObj;
|
|||
|
let str = obj.second + ' ' + obj.min + ' ' + obj.hour + ' ' + obj.day + ' ' + obj.month + ' ' + obj
|
|||
|
.week + (obj.year == '' ? '' : ' ' + obj.year);
|
|||
|
return str;
|
|||
|
},
|
|||
|
},
|
|||
|
onLoad(options) {
|
|||
|
this.isScenePage = Number(options.isScenePage);
|
|||
|
console.log(options);
|
|||
|
},
|
|||
|
|
|||
|
methods: {
|
|||
|
// 单击选显卡
|
|||
|
tabClick(item) {
|
|||
|
this.tabIndex = item.index;
|
|||
|
},
|
|||
|
|
|||
|
updateCrontabValue(name, value, from) {
|
|||
|
'updateCrontabValue',
|
|||
|
name,
|
|||
|
value,
|
|||
|
from;
|
|||
|
this.crontabValueObj[name] = value;
|
|||
|
if (from && from !== name) {
|
|||
|
console.log(`来自组件 ${from} 改变了 ${name} ${value}`);
|
|||
|
this.changeRadio(name, value);
|
|||
|
}
|
|||
|
},
|
|||
|
// 赋值到组件
|
|||
|
changeRadio(name, value) {
|
|||
|
let arr = ['second', 'min', 'hour', 'month'],
|
|||
|
refName = 'cron' + name,
|
|||
|
insValue;
|
|||
|
|
|||
|
if (!this.$refs[refName]) return;
|
|||
|
|
|||
|
if (arr.includes(name)) {
|
|||
|
if (value === '*') {
|
|||
|
insValue = 1;
|
|||
|
} else if (value.indexOf('-') > -1) {
|
|||
|
let indexArr = value.split('-');
|
|||
|
isNaN(indexArr[0]) ? (this.$refs[refName].cycle01 = 0) : (this.$refs[refName].cycle01 = indexArr[
|
|||
|
0]);
|
|||
|
this.$refs[refName].cycle02 = indexArr[1];
|
|||
|
insValue = 2;
|
|||
|
} else if (value.indexOf('/') > -1) {
|
|||
|
let indexArr = value.split('/');
|
|||
|
isNaN(indexArr[0]) ? (this.$refs[refName].average01 = 0) : (this.$refs[refName].average01 =
|
|||
|
indexArr[0]);
|
|||
|
this.$refs[refName].average02 = indexArr[1];
|
|||
|
insValue = 3;
|
|||
|
} else {
|
|||
|
insValue = 4;
|
|||
|
this.$refs[refName].checkboxList = value.split(',');
|
|||
|
}
|
|||
|
} else if (name == 'day') {
|
|||
|
if (value === '*') {
|
|||
|
insValue = 1;
|
|||
|
} else if (value == '?') {
|
|||
|
insValue = 2;
|
|||
|
} else if (value.indexOf('-') > -1) {
|
|||
|
let indexArr = value.split('-');
|
|||
|
isNaN(indexArr[0]) ? (this.$refs[refName].cycle01 = 0) : (this.$refs[refName].cycle01 = indexArr[
|
|||
|
0]);
|
|||
|
this.$refs[refName].cycle02 = indexArr[1];
|
|||
|
insValue = 3;
|
|||
|
} else if (value.indexOf('/') > -1) {
|
|||
|
let indexArr = value.split('/');
|
|||
|
isNaN(indexArr[0]) ? (this.$refs[refName].average01 = 0) : (this.$refs[refName].average01 =
|
|||
|
indexArr[0]);
|
|||
|
this.$refs[refName].average02 = indexArr[1];
|
|||
|
insValue = 4;
|
|||
|
} else if (value.indexOf('W') > -1) {
|
|||
|
let indexArr = value.split('W');
|
|||
|
isNaN(indexArr[0]) ? (this.$refs[refName].workday = 0) : (this.$refs[refName].workday = indexArr[
|
|||
|
0]);
|
|||
|
insValue = 5;
|
|||
|
} else if (value === 'L') {
|
|||
|
insValue = 6;
|
|||
|
} else {
|
|||
|
this.$refs[refName].checkboxList = value.split(',');
|
|||
|
insValue = 7;
|
|||
|
}
|
|||
|
} else if (name == 'week') {
|
|||
|
if (value === '*') {
|
|||
|
insValue = 1;
|
|||
|
} else if (value == '?') {
|
|||
|
insValue = 2;
|
|||
|
} else if (value.indexOf('-') > -1) {
|
|||
|
let indexArr = value.split('-');
|
|||
|
isNaN(indexArr[0]) ? (this.$refs[refName].cycle01 = 0) : (this.$refs[refName].cycle01 = indexArr[
|
|||
|
0]);
|
|||
|
this.$refs[refName].cycle02 = indexArr[1];
|
|||
|
insValue = 3;
|
|||
|
} else if (value.indexOf('#') > -1) {
|
|||
|
let indexArr = value.split('#');
|
|||
|
isNaN(indexArr[0]) ? (this.$refs[refName].average01 = 1) : (this.$refs[refName].average01 =
|
|||
|
indexArr[0]);
|
|||
|
this.$refs[refName].average02 = indexArr[1];
|
|||
|
insValue = 4;
|
|||
|
} else if (value.indexOf('L') > -1) {
|
|||
|
let indexArr = value.split('L');
|
|||
|
isNaN(indexArr[0]) ? (this.$refs[refName].weekday = 1) : (this.$refs[refName].weekday = indexArr[
|
|||
|
0]);
|
|||
|
insValue = 5;
|
|||
|
} else {
|
|||
|
this.$refs[refName].checkboxList = value.split(',');
|
|||
|
insValue = 6;
|
|||
|
}
|
|||
|
} else if (name == 'year') {
|
|||
|
if (value == '') {
|
|||
|
insValue = 1;
|
|||
|
} else if (value == '*') {
|
|||
|
insValue = 2;
|
|||
|
} else if (value.indexOf('-') > -1) {
|
|||
|
insValue = 3;
|
|||
|
} else if (value.indexOf('/') > -1) {
|
|||
|
insValue = 4;
|
|||
|
} else {
|
|||
|
this.$refs[refName].checkboxList = value.split(',');
|
|||
|
insValue = 5;
|
|||
|
}
|
|||
|
}
|
|||
|
this.$refs[refName].radioValue = insValue;
|
|||
|
},
|
|||
|
// 表单选项的子组件校验数字格式(通过-props传递)
|
|||
|
checkNumber(value, minLimit, maxLimit) {
|
|||
|
// 检查必须为整数
|
|||
|
value = Math.floor(value);
|
|||
|
if (value < minLimit) {
|
|||
|
value = minLimit;
|
|||
|
} else if (value > maxLimit) {
|
|||
|
value = maxLimit;
|
|||
|
}
|
|||
|
return value;
|
|||
|
},
|
|||
|
// 填充表达式
|
|||
|
submitFill() {
|
|||
|
const crontabValueString = this.crontabValueString;
|
|||
|
const type = uni.getStorageSync('type');
|
|||
|
const editIndex = uni.getStorageSync('editIndex');
|
|||
|
const jobId = uni.getStorageSync('jobId');
|
|||
|
if (this.isScenePage == 0) {
|
|||
|
uni.$u.route('/pagesA/home/device/timing/detail', {
|
|||
|
jobId,
|
|||
|
crontabValueString
|
|||
|
});
|
|||
|
} else {
|
|||
|
uni.$u.route('/pagesA/scene/timing/index', {
|
|||
|
type,
|
|||
|
editIndex,
|
|||
|
crontabValueString
|
|||
|
});
|
|||
|
}
|
|||
|
|
|||
|
},
|
|||
|
clearCron() {
|
|||
|
// 还原选择项
|
|||
|
('准备还原');
|
|||
|
this.crontabValueObj = {
|
|||
|
second: '*',
|
|||
|
min: '*',
|
|||
|
hour: '*',
|
|||
|
day: '*',
|
|||
|
month: '*',
|
|||
|
week: '?',
|
|||
|
year: '',
|
|||
|
};
|
|||
|
for (let j in this.crontabValueObj) {
|
|||
|
this.changeRadio(j, this.crontabValueObj[j]);
|
|||
|
}
|
|||
|
},
|
|||
|
}
|
|||
|
};
|
|||
|
</script>
|
|||
|
|
|||
|
<style lang="scss">
|
|||
|
page {
|
|||
|
height: 100%;
|
|||
|
background: $uni-bg-color-grey;
|
|||
|
}
|
|||
|
</style>
|
|||
|
<style lang="scss" scoped>
|
|||
|
.scene-timing-wrap {
|
|||
|
padding-bottom: 10rpx;
|
|||
|
|
|||
|
.container-wrap {
|
|||
|
.form-wrap {
|
|||
|
background: #fff;
|
|||
|
margin: 30rpx;
|
|||
|
padding: 20rpx;
|
|||
|
border-radius: 20rpx;
|
|||
|
|
|||
|
.form-item-wrap {
|
|||
|
margin: 10px 20rpx;
|
|||
|
font-size: 14px;
|
|||
|
}
|
|||
|
}
|
|||
|
|
|||
|
.btn-wrap {
|
|||
|
margin: 30rpx 20rpx;
|
|||
|
}
|
|||
|
}
|
|||
|
|
|||
|
.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;
|
|||
|
}
|
|||
|
}
|
|||
|
}
|
|||
|
}
|
|||
|
}
|
|||
|
}
|
|||
|
|
|||
|
.popup-main {
|
|||
|
position: relative;
|
|||
|
margin: 30rpx;
|
|||
|
padding: 20rpx;
|
|||
|
background: #fff;
|
|||
|
border-radius: 20rpx;
|
|||
|
font-size: 12px;
|
|||
|
overflow: hidden;
|
|||
|
}
|
|||
|
|
|||
|
.popup-title {
|
|||
|
overflow: hidden;
|
|||
|
line-height: 34px;
|
|||
|
padding-top: 6px;
|
|||
|
background: #f2f2f2;
|
|||
|
}
|
|||
|
|
|||
|
.popup-result {
|
|||
|
box-sizing: border-box;
|
|||
|
line-height: 24px;
|
|||
|
margin: 25px auto;
|
|||
|
padding: 15px 10px 10px;
|
|||
|
// border-top: 1px solid #ccc;
|
|||
|
position: relative;
|
|||
|
}
|
|||
|
|
|||
|
.popup-result .title {
|
|||
|
position: absolute;
|
|||
|
top: -18px;
|
|||
|
left: 50%;
|
|||
|
width: 140px;
|
|||
|
font-size: 14px;
|
|||
|
margin-left: -70px;
|
|||
|
text-align: center;
|
|||
|
line-height: 30px;
|
|||
|
background: #fff;
|
|||
|
}
|
|||
|
|
|||
|
.popup-result table {
|
|||
|
text-align: center;
|
|||
|
width: 100%;
|
|||
|
margin: 0 auto;
|
|||
|
}
|
|||
|
|
|||
|
.popup-result table span {
|
|||
|
display: block;
|
|||
|
width: 100%;
|
|||
|
font-family: arial;
|
|||
|
line-height: 30px;
|
|||
|
height: 30px;
|
|||
|
white-space: nowrap;
|
|||
|
overflow: hidden;
|
|||
|
border: 1px solid #e8e8e8;
|
|||
|
}
|
|||
|
|
|||
|
.popup-result-scroll {
|
|||
|
font-size: 12px;
|
|||
|
line-height: 24px;
|
|||
|
height: 10em;
|
|||
|
overflow-y: auto;
|
|||
|
}
|
|||
|
</style>
|