318 lines
11 KiB
Vue
318 lines
11 KiB
Vue
<template>
|
||
<view class="ant-layout page">
|
||
<page-header></page-header>
|
||
<head-title title="运行参数"></head-title>
|
||
<view class="ant-layout-content content">
|
||
|
||
<uni-section title="存储超时设置" titleColor="#fff" titleFontSize="18px"></uni-section>
|
||
<uni-row>
|
||
<uni-col :span="12">
|
||
<view class="ant-flex">
|
||
<view class="ant-form-item-label before">临期：</view>
|
||
<view class="value">
|
||
<input type="number" class="ant-input" v-model="endoNear"/>
|
||
</view>
|
||
<view class="ant-form-item-label after">小时</view>
|
||
</view>
|
||
</uni-col>
|
||
<uni-col :span="12">
|
||
<view class="ant-flex">
|
||
<view class="ant-form-item-label before">超期：</view>
|
||
<view class="value">
|
||
<input type="number" class="ant-input" v-model="endoOver"/>
|
||
</view>
|
||
<view class="ant-form-item-label after">小时</view>
|
||
</view>
|
||
</uni-col>
|
||
</uni-row>
|
||
<uni-section title="传感器设置" titleColor="#fff" titleFontSize="18px"></uni-section>
|
||
<uni-row>
|
||
<uni-col :span="12">
|
||
<view class="ant-flex">
|
||
<view class="ant-form-item-label before">温度：</view>
|
||
<view class="value">
|
||
<input type="number" class="ant-input" v-model="temp"/>
|
||
</view>
|
||
<view class="ant-form-item-label after">℃</view>
|
||
</view>
|
||
</uni-col>
|
||
<uni-col :span="12">
|
||
<view class="ant-flex">
|
||
<view class="ant-form-item-label before">湿度：</view>
|
||
<view class="value">
|
||
<input type="number" class="ant-input" v-model="humi"/>
|
||
</view>
|
||
<view class="ant-form-item-label after">%RH</view>
|
||
</view>
|
||
</uni-col>
|
||
</uni-row>
|
||
<uni-row>
|
||
<uni-col :span="12">
|
||
<view class="ant-flex">
|
||
<view class="ant-form-item-label before">压差：</view>
|
||
<view class="value">
|
||
<input type="number" class="ant-input" v-model="pressure"/>
|
||
</view>
|
||
<view class="ant-form-item-label after">Pa</view>
|
||
</view>
|
||
</uni-col>
|
||
<uni-col :span="12">
|
||
<view class="ant-flex">
|
||
<view class="ant-form-item-label before">压差补偿：</view>
|
||
<view class="value">
|
||
<input class="ant-input" v-model="pressureCom"/>
|
||
</view>
|
||
<view class="ant-form-item-label after">Pa</view>
|
||
</view>
|
||
</uni-col>
|
||
</uni-row>
|
||
<uni-section title="自动消毒设置" titleColor="#fff" titleFontSize="18px"></uni-section>
|
||
<view class="ant-flex group-set" v-for="(i, k) in group" :key="k">
|
||
<view class="ant-form-item-label">组{{k+1}}：</view>
|
||
<view class="input">
|
||
<input type="number" class="ant-input" v-model="group[k].start.h" />
|
||
<text class="form-text"> : </text>
|
||
<input type="number" class="ant-input" v-model="group[k].start.m" />
|
||
</view>
|
||
<view class="form-text">~</view>
|
||
<view class="input">
|
||
<input type="number" class="ant-input" v-model="group[k].end.h" />
|
||
<text class="form-text"> : </text>
|
||
<input type="number" class="ant-input" v-model="group[k].end.m" />
|
||
</view>
|
||
<view class="form-text" style="width: 120px;margin-left: 10px;">
|
||
<select-switch :defaultSwitch="group[k].status" @change="groupStatusChange(k)" checked_bj_color="#777D90" :switchList="['ON', 'OFF']"></select-switch>
|
||
</view>
|
||
</view>
|
||
<uni-section title="手动消毒时长设置" titleColor="#fff" titleFontSize="18px"></uni-section>
|
||
<uni-row class="ant-flex" style="justify-content: left;">
|
||
<view class="ant-form-item-label">时长：</view>
|
||
<view class="input" style="width: 100px;">
|
||
<input type="number" class="ant-input" v-model="disinfectTime"/>
|
||
</view>
|
||
<view class="ant-form-item-label">
|
||
<text class="form-text">分钟</text>
|
||
<text style="font-size: 16px;margin-left:10px;">(单次开启持续时长1-59分钟)</text>
|
||
</view>
|
||
</uni-row>
|
||
<uni-section title="真空泵运行参数设置" titleColor="#fff" titleFontSize="18px"></uni-section>
|
||
<uni-row>
|
||
<uni-col :span="12">
|
||
<view class="ant-flex">
|
||
<view class="ant-form-item-label">每隔：</view>
|
||
<view class="input" style="width: 100px;">
|
||
<input type="number" class="ant-input" v-model="vacuumPerHour"/>
|
||
</view>
|
||
<view class="ant-form-item-label">小时</view>
|
||
</view>
|
||
</uni-col>
|
||
<uni-col :span="12">
|
||
<view class="ant-flex">
|
||
<view class="ant-form-item-label">启动：</view>
|
||
<view class="input" style="width: 100px;">
|
||
<input type="number" min="1" max="59" class="ant-input" v-model="vacuumRunTime"/>
|
||
</view>
|
||
<view class="ant-form-item-label">分钟</view>
|
||
</view>
|
||
</uni-col>
|
||
</uni-row>
|
||
<uni-row style="margin-top: 40px;">
|
||
<uni-col :span="24">
|
||
<view class="ant-btn" @click="submit">保存</view>
|
||
<view class="ant-btn" style="margin-left: 20px;" @click="asyncSet">同步</view>
|
||
</uni-col>
|
||
</uni-row>
|
||
</view>
|
||
|
||
<notice ref="notice"/>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import PageHeader from '@/components/PageHeader.vue'
|
||
import HeadTitle from '@/components/HeadTitle.vue'
|
||
import Notice from '@/components/Notice.vue';
|
||
import selectSwitch from "@/components/xuan-switch/xuan-switch.vue";
|
||
import storage from '@/utils/storage.js';
|
||
import { compareTimes } from '@/utils/common.js';
|
||
export default {
|
||
components: {
|
||
PageHeader,Notice,HeadTitle, selectSwitch
|
||
},
|
||
data() {
|
||
return {
|
||
endoNear: '72',
|
||
endoOver: '96',
|
||
temp: '16',
|
||
humi: '30',
|
||
pressure: '5',
|
||
pressureCom: '+5',
|
||
|
||
group: [],
|
||
disinfectTime: '10',
|
||
vacuumPerHour: '1',
|
||
vacuumRunTime: '10',
|
||
}
|
||
},
|
||
onLoad() {
|
||
let runStorage = this.$store.getters.run
|
||
if (runStorage) {
|
||
// 本地存储
|
||
for (let k in runStorage) {
|
||
this[k] = runStorage[k]
|
||
}
|
||
}
|
||
|
||
},
|
||
methods: {
|
||
groupStatusChange(key) {
|
||
this.group[key].status = !this.group[key].status
|
||
},
|
||
submit() {
|
||
if (this.checkeForm()) {
|
||
storage.set('run', { ...this.$data })
|
||
this.$store.commit('SET_RUN', { ...this.$data })
|
||
this.$refs.notice.open({
|
||
title: '保存成功'
|
||
})
|
||
}
|
||
},
|
||
checkeForm() {
|
||
if (this.endoNear < 1 || this.endoNear > this.endoOver) {
|
||
uni.showToast({
|
||
title: '请检查超时设置填写是否正确',
|
||
icon: 'none'
|
||
})
|
||
return false
|
||
}
|
||
for (let i of this.group) {
|
||
if (i.start.h > 23 || i.start.m > 59 || i.end.h > 23 || i.end.m > 59) {
|
||
uni.showToast({
|
||
title: '时间格式超限',
|
||
icon: 'none'
|
||
})
|
||
return false
|
||
}
|
||
i.start.h = i.start.h.toString().padStart(2, '0');
|
||
i.start.m = i.start.m.toString().padStart(2, '0');
|
||
i.end.h = i.end.h.toString().padStart(2, '0');
|
||
i.end.m = i.end.m.toString().padStart(2, '0');
|
||
let start = i.start.h + ':' + i.start.m
|
||
let end = i.end.h + ':' + i.end.m
|
||
if (i.status == false) {
|
||
continue;
|
||
}
|
||
if (compareTimes(start, end) != 1) {
|
||
uni.showToast({
|
||
title: '请检查消毒设置填写是否正确',
|
||
icon: 'none'
|
||
})
|
||
return false
|
||
}
|
||
}
|
||
for (let i in this.$data) {
|
||
|
||
if (this.$data[i] == 'group') {
|
||
continue;
|
||
}
|
||
if (this.$data[i] == '' || this.$data[i] == null || this.$data[i] == 0) {
|
||
uni.showToast({
|
||
title: '请检查信息填写是否完整',
|
||
icon: 'none'
|
||
})
|
||
return false
|
||
}
|
||
}
|
||
return true
|
||
|
||
},
|
||
asyncSet() {
|
||
// const res = await this.$api.asyncSet()
|
||
// if (res.code === 200) {
|
||
// this.$refs.notice.show({
|
||
// title: '同步成功',
|
||
// type: 'success'
|
||
// })
|
||
// } else {
|
||
// this.$refs.notice.show({
|
||
// title: '同步失败',
|
||
// type: 'error'
|
||
// })
|
||
// }
|
||
}
|
||
},
|
||
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
.page{
|
||
background: transparent;
|
||
height: 100%;
|
||
}
|
||
.content{
|
||
height: 100%;
|
||
padding: 20px;
|
||
}
|
||
.uni-section{
|
||
background-color: transparent;
|
||
text-align: left;
|
||
}
|
||
.uni-row{
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
.ant-form-item-label{
|
||
color: #747A8D;
|
||
line-height: 40px;
|
||
padding: 0 10px;
|
||
font-size: 18px;
|
||
}
|
||
.ant-form-item-label.before{
|
||
width: 160px;
|
||
text-align: right;
|
||
}
|
||
.value{
|
||
width: 140px;
|
||
}
|
||
.ant-form-item-label.after{
|
||
width: 80px;
|
||
text-align: left;
|
||
}
|
||
|
||
.ant-input{
|
||
height: 40px;
|
||
font-size: 18px;
|
||
}
|
||
.form-text{
|
||
color: #747A8D;
|
||
line-height: 40px;
|
||
text-align: left;
|
||
font-size: 18px;
|
||
}
|
||
|
||
.ant-btn{
|
||
line-height: 38px;
|
||
background: #2F3242;
|
||
border-color: #2F3242;
|
||
height: 46px;
|
||
width: 128px;
|
||
border-radius: 50px;
|
||
color: #fff;
|
||
font-size: 16px;
|
||
}
|
||
|
||
.group-set{
|
||
margin-bottom: 10px;
|
||
}
|
||
.group-set .ant-input{
|
||
width: 65px;
|
||
}
|
||
|
||
|
||
.form-text :deep(.switch-container){
|
||
width: 100%;
|
||
height: 40px;
|
||
border-radius: 0;
|
||
}
|
||
</style> |