Browse Source

SettingEdit.vue

master
sige 1 year ago
parent
commit
c36d53af95
  1. 286
      src/device/pipeline/SettingEdit.vue

286
src/device/pipeline/SettingEdit.vue

@ -0,0 +1,286 @@
<template>
<div class="device_container">
<div class="row_wrap">
<p class="title">注射蠕动泵速率(g/min)</p>
<p class="num">
<my-input type="number" class="field_font" theme="custom" close-text="配置"
v-model:value="options.injection_pump_speed"
:formatter="v => formatIntValue('injection_pump_speed', v)"
></my-input>
</p>
</div>
<div class="row_wrap">
<p class="title">消毒停止过氧化氢浓度(ppm)</p>
<p class="num">
<my-input type="number" class="field_font" theme="custom" close-text="配置"
v-model:value="options.stoped_gs"
:formatter="v => formatIntValue('stoped_gs', v)"
></my-input>
</p>
</div>
<div class="row_wrap">
<p class="title">消毒继续过氧化氢浓度(ppm)</p>
<p class="num">
<my-input type="number" class="field_font" theme="custom" close-text="配置"
v-model:value="options.continued_gs"
:formatter="v => formatIntValue('continued_gs', v)"
></my-input>
</p>
</div>
<div class="row_wrap">
<p class="title">消毒停止相对湿度(%RH)</p>
<p class="num">
<my-input type="number" class="field_font" theme="custom" close-text="配置"
v-model:value="options.stoped_humi"
:formatter="v => formatIntValue('stoped_humi', v)"
></my-input>
</p>
</div>
<div class="row_wrap">
<p class="title">消毒继续相对湿度(%RH)</p>
<p class="num">
<my-input type="number" class="field_font" theme="custom" close-text="配置"
v-model:value="options.continued_humi"
:formatter="v => formatIntValue('continued_humi', v)"
></my-input>
</p>
</div>
<div class="row_wrap">
<p class="title">消毒停止过氧化氢相对饱和度(%RS)</p>
<p class="num">
<my-input type="number" class="field_font" theme="custom" close-text="配置"
v-model:value="options.stoped_satur"
:formatter="v => formatIntValue('stoped_satur', v)"
></my-input>
</p>
</div>
<div class="row_wrap">
<p class="title">消毒继续过氧化氢相对饱和度(%RS)</p>
<p class="num">
<my-input type="number" class="field_font" theme="custom" close-text="配置"
v-model:value="options.continued_satur"
:formatter="v => formatIntValue('continued_satur', v)"
></my-input>
</p>
</div>
<div class="row_wrap">
<p class="title">Log等级</p>
<my-log-picker v-model:value="options.loglevel">
<div class="num">
<p class="log">{{ options.loglevel }}</p>
</div>
</my-log-picker>
</div>
<div class="row_wrap">
<p class="title">配方名称</p>
<div>
<my-input type="text" class="formula_input"
v-model:value="options.formula_id"
placeholder="请输入配方名称"
></my-input>
</div>
</div>
<div class="btns">
<div class="btn" @click="actionSave">保存</div>
<div class="btn ml" @click="actionCancel">返回</div>
</div>
</div>
</template>
<script setup>
import { ref, onMounted } from 'vue'
import { showFailToast } from 'vant'
import { useWebSocketStore } from '@/store'
import MyLogPicker from '../../components/dialogs/MyLogPicker.vue';
// websocket
const ws = useWebSocketStore();
// options
const options = ref({});
// settings
let settingRules = [];
// promise
let editPromise = null;
// on mounted
onMounted(mounted);
// expose methods
defineExpose({edit});
// on mounted
async function mounted() {
settingRules = await ws.call('getAllSetting');
settingRules = settingRules.dbval;
let defaultSettingKV = {};
settingRules.forEach(item => defaultSettingKV[item.name] = item.val);
options.value = {};
options.value.injection_pump_speed = defaultSettingKV['injection_pump_speed'] || 0;
options.value.stoped_gs = defaultSettingKV['stoped_gs'] || 0;
options.value.continued_gs = defaultSettingKV['continued_gs'] || 0;
options.value.stoped_humi = defaultSettingKV['stoped_humi'] || 0;
options.value.continued_humi = defaultSettingKV['continued_humi'] || 0;
options.value.stoped_satur = defaultSettingKV['stoped_satur'] || 0;
options.value.continued_satur = defaultSettingKV['continued_satur'] || 0;
options.value.loglevel = '6';
options.value.formula_id = '';
}
// edit
function edit() {
return new Promise((resolve) => {
editPromise = {resolve};
});
}
// action save
async function actionSave() {
if (options.value.formula_id == '') {
return showFailToast('配方名称不能为空');
}
let list = await ws.call('getAllFormula');
list = list.formula.formulas;
let existedSetting = list.find(i => i.formula_id === options.value.formula_id);
if ( undefined !== existedSetting ) {
return showFailToast('配方名称已存在')
}
await ws.call('addFormula', options.value);
editPromise.resolve();
}
// format int value
function formatIntValue( name, value ) {
value = value.replace(/^0+/gi, '');
if ( value == '' || parseInt(value) == 0 ) {
return '0'
}
let rule = settingRules.find(item => item.name == name);
if ( undefined !== rule ) {
let intValue = parseInt(value);
if (intValue > rule.val_upper_limit) {
return `${rule.val_upper_limit}`;
}
if (intValue < rule.val_lower_limit) {
return `${rule.val_lower_limit}`;
}
}
return value;
}
// cancel
function actionCancel() {
editPromise.resolve();
}
</script>
<style lang="scss" scoped>
.device_container {
box-sizing: border-box;
width: 100%;
height: 580px;
display: grid;
overflow: hidden;
grid-template-columns: repeat(2, 1fr);
row-gap: 20px;
column-gap: 20px;
padding: 20px;
padding-bottom: 180px;
position: relative;
.btns {
position: absolute;
right: 20px;
bottom: 20px;
width: 300px;
height: 68px;
display: flex;
align-items: center;
justify-content: flex-end;
.btn {
width: 111px;
height: 38px;
border-radius: 19px;
background: #06518b;
display: flex;
align-items: center;
justify-content: center;
font-family: Source Han Sans CN;
font-size: 14px;
font-weight: normal;
line-height: normal;
letter-spacing: 0.1em;
color: #ffffff;
}
.ml {
margin-left: 20px;
}
}
.row_wrap {
// width: 726px;
height: 80px;
border-radius: 14px;
background: #f6f6f6;
box-sizing: border-box;
padding: 0 18px 0 40px;
display: flex;
align-items: center;
justify-content: space-between;
.title {
font-family: Zona Pro;
white-space: nowrap;
font-size: 20px;
font-weight: normal;
letter-spacing: 0.06em;
color: #000000;
}
.num {
font-family: Source Han Sans CN;
font-size: 24px;
font-weight: 500;
letter-spacing: 0.1em;
color: #000000;
display: flex;
align-items: center;
.log {
width: 182px;
display: flex;
align-items: center;
justify-content: center;
}
:deep(.field_font) {
font-size: 26px;
width: 180px;
}
}
:deep(.formula_input) {
height: 38px;
font-size: 22px;
padding: 0 12px;
width: 220px;
background: white;
border: solid 1px #ededed;
}
.btn {
width: 87px;
height: 45px;
border-radius: 23px;
background: #06518b;
font-family: Source Han Sans CN;
font-size: 14px;
font-weight: normal;
letter-spacing: 0.1em;
color: #ffffff;
display: flex;
align-items: center;
justify-content: center;
}
}
}
</style>
Loading…
Cancel
Save