<script setup>
|
import { onLoad } from '@dcloudio/uni-app'
|
import { getFacilityApi,getParameter1Api,editParameter1Api } from '../../api/index.js'
|
import { ref,onMounted } from 'vue';
|
|
let facilityId
|
let onLineState
|
let facilityCode
|
onLoad(async(option) =>{
|
console.log(14,option)
|
facilityId = option.id
|
await getFacilityById()
|
})
|
onMounted(async() =>{
|
await handleSetting()
|
})
|
//获取水控机设备详情
|
async function getFacilityById(){
|
await getFacilityApi(facilityId).then((res) =>{
|
onLineState = res.data.onLineState
|
facilityCode = res.data.facilityCode
|
})
|
}
|
//表单相关
|
const formRef = ref()
|
const formData = ref({})
|
function initData(){
|
formData.value = {
|
sn: '',
|
type:'',
|
rateAmount: 100,
|
waterYield: 100,
|
pulse: 450,
|
fetchWaterTime: 45,
|
billingModel: 1,
|
isStartKey: 1,
|
}
|
}
|
//表单校验
|
const rulesData = ref({
|
rateAmount: {
|
rules:[
|
{required: true, errorMessage:'请输入参数值', trigger: "blur"},
|
{pattern:/^([1-9]\d{1,2}|[1-5]\d{3}|6000)$/, errorMessage:'超出范围，请重新输入', trigger: "blur"},
|
],
|
},
|
waterYield: {
|
rules:[
|
{required: true, errorMessage:'请输入参数值', trigger: "blur"},
|
{pattern:/^([1-9]\d{1,3}|[1-5]\d{4}|6[0-4]\d{3}|65000)$/, errorMessage:'超出范围，请重新输入', trigger: "blur"},
|
],
|
},
|
pulse: {
|
rules:[
|
{required: true, errorMessage:'请输入参数值', trigger: "blur"},
|
{pattern:/^([1-9]\d{0,2})$/, errorMessage:'超出范围，请重新输入', trigger: "blur"},
|
],
|
},
|
fetchWaterTime: {
|
rules:[
|
{required: true, errorMessage:'请输入参数值', trigger: "blur"},
|
{pattern:/^([1-9]\d{0,2}|1000)$/, errorMessage:'超出范围，请重新输入', trigger: "blur"},
|
],
|
},
|
billingModel: {
|
rules:[
|
{required: true, errorMessage:'请输入参数值', trigger: "blur"},
|
{pattern:/^(1|2)$/, errorMessage:'超出范围，请重新输入', trigger: "blur"},
|
],
|
},
|
isStartKey: {
|
rules:[
|
{required: true, errorMessage:'请输入参数值', trigger: "blur"},
|
{pattern:/^(1|2)$/, errorMessage:'超出范围，请重新输入', trigger: "blur"},
|
],
|
},
|
});
|
|
//参数设置按钮,请求设备参数
|
async function handleSetting(){
|
await getParameter1Api(facilityCode).then((res) =>{
|
//参数不为空
|
if(res.data != null){
|
formData.value = res.data
|
}else{
|
//参数为空置为默认
|
initData()
|
formData.value.sn = facilityCode
|
}
|
})
|
}
|
//type:1:修改参数，0：恢复出厂设置
|
//恢复出厂设置
|
async function restore(){
|
if(onLineState == 1){
|
let sn = formData.value.sn
|
initData()
|
formData.value.type = 0
|
formData.value.sn = sn
|
await setParams(formData.value)
|
}else{
|
uni.showToast({
|
title:'离线，无法操作',
|
icon:'none'
|
})
|
}
|
}
|
//修改参数
|
function save(){
|
if(onLineState.value == 1){
|
formData.value.type = 1
|
formRef.value.validate().then(async() =>{
|
await setParams(formData.value)
|
}).catch((e) =>{
|
console.log('e',e)
|
})
|
}else{
|
uni.showToast({
|
title:'离线，无法操作',
|
icon:'none'
|
})
|
}
|
}
|
|
async function setParams(formParams){
|
await editParameter1Api(formParams).then((res) =>{
|
if(res.code == 200){
|
uni.showToast({
|
title:'成功！三秒刷新'
|
})
|
setTimeout(async() =>{
|
await handleSetting()
|
},4000)
|
}else{
|
uni.showToast({
|
title:'网络错误',
|
icon:'none'
|
})
|
}
|
})
|
}
|
</script>
|
<template>
|
<view>
|
<view class="container">
|
<navbar title = '参数设置'></navbar>
|
<view class="content">
|
<view class="head">
|
<text>设备参数设置</text>
|
</view>
|
<view class="main">
|
<view class="form-box">
|
<uni-forms ref="formRef" :modelValue="formData" :rules="rulesData">
|
<view class="devide-name">水价设置：</view>
|
<uni-group>
|
<uni-forms-item class="form-item" name="rateAmount">
|
<text style="color:#4784c7">费率：(范围：10-6000分)</text>
|
<uni-easyinput type="text" v-model="formData.rateAmount" placeholder="请输入参数" />
|
</uni-forms-item>
|
<uni-forms-item class="form-item" name="waterYield">
|
<text style="color:#4784c7">水量：(范围：10-65000)</text>
|
<uni-easyinput type="text" v-model="formData.waterYield" placeholder="请输入参数" />
|
</uni-forms-item>
|
<uni-forms-item class="form-item" name="pulse">
|
<text style="color:#4784c7">脉冲：(范围：1-999分)</text>
|
<uni-easyinput type="text" v-model="formData.pulse" placeholder="请输入参数" />
|
</uni-forms-item>
|
<uni-forms-item class="form-item" name="fetchWaterTime">
|
<text style="color:#4784c7">打水时间：(范围：1-1000分)</text>
|
<uni-easyinput type="text" v-model="formData.fetchWaterTime" placeholder="请输入参数" />
|
</uni-forms-item>
|
</uni-group>
|
|
<view class="devide-name">系统参数：</view>
|
<uni-group>
|
<uni-forms-item class="form-item" name="billingModel">
|
<text style="color:#4784c7">计费模式：(范围：1时间,2流量)</text>
|
<uni-easyinput type="text" v-model="formData.billingModel" placeholder="请输入参数" />
|
</uni-forms-item>
|
<uni-forms-item class="form-item" name="isStartKey">
|
<text style="color:#4784c7">是否启用按键：(范围:1启用，2禁用)</text>
|
<uni-easyinput type="text" v-model="formData.isStartKey" placeholder="请输入参数" />
|
</uni-forms-item>
|
</uni-group>
|
</uni-forms>
|
</view>
|
<view class="handle-btn">
|
<view class="left" @click="restore">恢复出厂设置</view>
|
<view class="right" @click="save">保存设置</view>
|
</view>
|
</view>
|
</view>
|
</view>
|
</view>
|
</template>
|
<style lang="scss" scoped>
|
.container{
|
width:100%;
|
box-sizing: border-box;
|
.content{
|
height:calc(100vh - 176rpx);
|
background: linear-gradient(to bottom,#8BC1FC 0%,#D2F2FE 30%,#D2F2FE 100%);
|
padding:30rpx 40rpx 100rpx;
|
box-sizing: border-box;
|
.head{
|
width:100%;
|
height: 100rpx;
|
background-color: rgba(255,255,255,0.6);
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
font-size: 38rpx;
|
color: #4784c7;
|
letter-spacing: 2rpx;
|
box-shadow: 0 4rpx 4rpx 1rpx rgba(71,132,199,0.6);
|
}
|
.main{
|
width:100%;
|
height:calc(100% - 100rpx);
|
background-color: rgba(255,255,255,0.6);
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
justify-content: center;
|
margin-top:30rpx;
|
padding:30rpx 40rpx;
|
box-sizing:border-box;
|
.handle-btn{
|
height:60rpx;
|
width:100%;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
text-align: center;
|
margin-top:50rpx;
|
.left{
|
border: 1rpx solid #99b7f0;
|
color: #409EFF;
|
background-color:#fff;
|
border-radius:15rpx;
|
line-height:60rpx;
|
margin-right:60rpx;
|
width: 215rpx;
|
font-size: 30rpx;
|
}
|
.left:hover{
|
opacity: 0.8;
|
}
|
.right{
|
background-color:#409EFF;
|
color: #fff;
|
border-radius:15rpx;
|
line-height:60rpx;
|
width: 215rpx;
|
font-size: 30rpx;
|
}
|
.right:hover{
|
opacity:0.8;
|
}
|
}
|
.form-box{
|
width: 580rpx;
|
height:90%;
|
overflow: scroll;
|
.devide-name{
|
width:100%;
|
color: #30b351;
|
margin:20rpx 0;
|
}
|
.form-item{
|
width:100%;
|
}
|
}
|
}
|
}
|
}
|
|
</style>
|
