Browse Source

添加配方

master
maochaoying 2 years ago
parent
commit
de7e8ed389
  1. 766
      src/components/AddPreSetting.vue
  2. 30
      src/components/Formula.vue
  3. 4
      src/components/UpdatePreSetting.vue
  4. 20
      src/mock/command.js

766
src/components/AddPreSetting.vue

@ -0,0 +1,766 @@
<template>
<div class="device_container">
<div class="row_wrap">
<p class="title">注射蠕动泵速率(g/min)</p>
<p class="num">
<van-field
type="number"
v-model="sprayLiquidConfigVal"
:clickable="true"
:formatter="formatter7"
readonly
@click.stop="hideClickKey(2)"
/>
</p>
</div>
<div class="row_wrap">
<p class="title">消毒停止过氧化氢浓度(ppm)</p>
<p class="num">
<van-field
type="number"
v-model="stoped_gs"
:clickable="true"
:formatter="formatter1"
readonly
@click.stop="hideClickKey(3)"
/>
</p>
</div>
<div class="row_wrap">
<p class="title">消毒继续过氧化氢浓度(ppm)</p>
<p class="num">
<van-field
type="number"
v-model="continued_gs"
:clickable="true"
:formatter="formatter2"
readonly
@click.stop="hideClickKey(4)"
/>
</p>
</div>
<div class="row_wrap">
<p class="title">消毒停止相对湿度(%RH)</p>
<p class="num">
<van-field
type="number"
v-model="stoped_humi"
:clickable="true"
:formatter="formatter9"
readonly
@click.stop="hideClickKey(9)"
/>
</p>
</div>
<div class="row_wrap">
<p class="title">消毒继续相对湿度(%RH)</p>
<p class="num">
<van-field
type="number"
v-model="continued_humi"
:clickable="true"
:formatter="formatter10"
readonly
@click.stop="hideClickKey(10)"
/>
</p>
</div>
<div class="row_wrap">
<p class="title">消毒停止过氧化氢相对饱和度(%RS)</p>
<p class="num">
<van-field
type="number"
:formatter="formatter3"
v-model="stoped_satur"
:clickable="true"
readonly
@click.stop="hideClickKey(5)"
/>
</p>
</div>
<div class="row_wrap">
<p class="title">消毒继续过氧化氢相对饱和度(%RS)</p>
<p class="num">
<van-field
type="number"
:formatter="formatter4"
v-model="continued_satur"
:clickable="true"
readonly
@click.stop="hideClickKey(6)"
/>
</p>
</div>
<div class="row_wrap" @click="showLogPicker">
<p class="title">Log等级</p>
<div class="num">
<p class="log">{{ logVal }}</p>
</div>
</div>
<div class="row_wrap">
<p class="title">配方名称</p>
<div>
<input
type="text"
v-model="formula_id"
class="formula_input"
placeholder="请输入配方名称"
/>
</div>
</div>
<van-number-keyboard
v-model="addLiquidConfigVal"
:title="addLiquidConfigVal"
:show="addLiquidConfigValShow"
@input="val => handleInput(val, 1)"
theme="custom"
close-button-text="配置"
@close="setAddliquidVal"
@blur="addLiquidConfigValShow = false"
/>
<van-number-keyboard
v-model="sprayLiquidConfigVal"
@input="val => handleInput(val, 2)"
:title="sprayLiquidConfigVal"
:show="sprayLiquidConfigValShow"
theme="custom"
@close="setSprayLiquidVal"
close-button-text="配置"
@blur="sprayLiquidConfigValShow = false"
/>
<van-number-keyboard
v-model="stoped_gs"
@input="val => handleInput(val, 3)"
:title="stoped_gs"
:show="stoped_gsShow"
theme="custom"
@close="setStopedGsVal"
close-button-text="配置"
@blur="stoped_gsShow = false"
/>
<van-number-keyboard
v-model="continued_gs"
@input="val => handleInput(val, 4)"
:title="continued_gs"
@close="setcontinuedGsVal"
:show="continued_gsShow"
theme="custom"
close-button-text="配置"
@blur="continued_gsShow = false"
/>
<van-number-keyboard
v-model="stoped_satur"
@input="val => handleInput(val, 5)"
:title="stoped_satur"
@close="setstopedSaturVal"
:show="stoped_saturShow"
theme="custom"
close-button-text="配置"
@blur="stoped_saturShow = false"
/>
<van-number-keyboard
v-model="continued_satur"
@input="val => handleInput(val, 6)"
:title="continued_satur"
@close="setContinuedSaturVal"
:show="continued_saturShow"
theme="custom"
close-button-text="配置"
@blur="continued_saturShow = false"
/>
<van-number-keyboard
v-model="max_humidity"
@input="val => handleInput(val, 7)"
:title="max_humidity"
@close="setMaxHumidityVal"
:show="max_humidityShow"
theme="custom"
close-button-text="配置"
@blur="max_humidityShow = false"
/>
<van-number-keyboard
theme="custom"
close-button-text="配置"
@input="val => handleInput(val, 8)"
@close="setHeat_timeVal"
v-model="pre_heat_time_s"
:title="pre_heat_time_s"
:show="pre_heat_time_sShow"
@blur="pre_heat_time_sShow = false"
/>
<van-number-keyboard
@input="val => handleInput(val, 9)"
theme="custom"
close-button-text="配置"
@close="setstoped_humiVal"
v-model="stoped_humi"
:title="stoped_humi"
:show="stoped_humiShow"
@blur="stoped_humiShow = false"
/>
<van-number-keyboard
theme="custom"
@input="val => handleInput(val, 10)"
close-button-text="配置"
@close="setcontinued_humiVal"
v-model="continued_humi"
:title="continued_humi"
:show="continued_humiShow"
@blur="continued_humiShow = false"
/>
<LogPicker
v-if="logVisible"
:hiddenLogVisible="hiddenLogVisible"
:changeLogVal="changeLogVal"
:logVal="logVal"
/>
<div class="btns">
<div class="btn" @click="save">保存</div>
<div class="btn ml" @click="hiddleSettingModal">返回</div>
</div>
</div>
</template>
<script setup>
import { ref } from 'vue'
import { showSuccessToast, showFailToast } from 'vant'
import { useSettingStore, useWebSocketStore, useOperatorStore } from '@/store'
import { storeToRefs } from 'pinia'
import {
setSettingValJSON,
addFormulaJSON,
getAllFormulaJSON,
} from '@/mock/command'
import LogPicker from 'cpns/dialogs/LogPicker'
const settingStore = useSettingStore()
const webSocketStore = useWebSocketStore()
const operatorStore = useOperatorStore()
const max_humidity = ref('0')
const continued_satur = ref('0')
const stoped_satur = ref('0')
const continued_gs = ref('0')
const stoped_gs = ref('0')
const addLiquidConfigVal = ref('0')
const sprayLiquidConfigVal = ref('0')
const stoped_humi = ref('0')
const continued_humi = ref('0')
const pre_heat_time_s = ref('0')
const pre_heat_time_sShow = ref(false)
const addLiquidConfigValShow = ref(false)
const sprayLiquidConfigValShow = ref(false)
const stoped_gsShow = ref(false)
const continued_gsShow = ref(false)
const stoped_saturShow = ref(false)
const continued_saturShow = ref(false)
const max_humidityShow = ref(false)
const stoped_humiShow = ref(false)
const continued_humiShow = ref(false)
const logVisible = ref(false)
const logVal = ref('6')
const formula_id = ref('')
const save = () => {
if (formula_id.value == '') {
showFailToast('配方名称不能为空')
return
}
const data = {
formula_id: formula_id.value,
loglevel: logVal.value,
injection_pump_speed: sprayLiquidConfigVal.value,
stoped_gs: stoped_gs.value,
continued_gs: continued_gs.value,
stoped_satur: stoped_satur.value,
continued_satur: continued_satur.value,
stoped_humi: stoped_humi.value,
continued_humi: continued_humi.value,
}
console.log(data)
webSocketStore.sendCommandMsg(addFormulaJSON(data))
webSocketStore.sendCommandMsg(getAllFormulaJSON)
props.hideSettingModal()
}
const changeLogVal = val => {
logVal.value = val
logVisible.value = false
}
const hiddenLogVisible = () => {
logVisible.value = false
}
const showLogPicker = () => {
logVisible.value = true
}
const isFirstClick = ref(true)
const props = defineProps({
hideSettingModal: {
type: Function,
},
})
const hiddleSettingModal = () => {
props.hideSettingModal()
}
const hideClickKey = flag => {
isFirstClick.value = true
stoped_humiShow.value = false
continued_humiShow.value = false
pre_heat_time_sShow.value = false
addLiquidConfigValShow.value = false
sprayLiquidConfigValShow.value = false
stoped_gsShow.value = false
continued_gsShow.value = false
stoped_saturShow.value = false
continued_saturShow.value = false
max_humidityShow.value = false
if (flag == 1) {
addLiquidConfigValShow.value = true
}
if (flag == 2) {
sprayLiquidConfigValShow.value = true
}
if (flag == 3) {
stoped_gsShow.value = true
}
if (flag == 4) {
continued_gsShow.value = true
}
if (flag == 5) {
stoped_saturShow.value = true
}
if (flag == 6) {
continued_saturShow.value = true
}
if (flag == 7) {
max_humidityShow.value = true
}
if (flag == 8) {
pre_heat_time_sShow.value = true
}
if (flag == 9) {
stoped_humiShow.value = true
}
if (flag == 10) {
continued_humiShow.value = true
}
}
const handleInput = (value, index) => {
if (isFirstClick.value) {
if (index == 1) {
setTimeout(() => {
addLiquidConfigVal.value = value + ''
})
}
if (index == 2) {
setTimeout(() => {
sprayLiquidConfigVal.value = value + ''
})
}
if (index == 3) {
setTimeout(() => {
stoped_gs.value = value + ''
})
}
if (index == 4) {
setTimeout(() => {
continued_gs.value = value + ''
})
}
if (index == 5) {
setTimeout(() => {
stoped_satur.value = value + ''
})
}
if (index == 6) {
setTimeout(() => {
continued_satur.value = value + ''
})
}
if (index == 7) {
setTimeout(() => {
max_humidity.value = value + ''
})
}
if (index == 8) {
setTimeout(() => {
pre_heat_time_s.value = value + ''
})
}
if (index == 9) {
setTimeout(() => {
stoped_humi.value = value + ''
})
}
if (index == 10) {
setTimeout(() => {
continued_humi.value = value + ''
})
}
isFirstClick.value = false
}
}
const formatter1 = value => {
if (parseInt(value) == 0) {
return '0'
}
let arr = settingStore.allSettingList.filter(item => item.name == 'stoped_gs')
if (arr && arr.length > 0) {
if (parseInt(value) > arr[0].val_upper_limit) {
return arr[0].val_upper_limit + ''
}
if (parseInt(value) < arr[0].val_lower_limit) {
return arr[0].val_lower_limit + ''
}
}
return value.replace(/^0+/gi, '')
}
const formatter2 = value => {
if (parseInt(value) == 0) {
return '0'
}
let arr = settingStore.allSettingList.filter(
item => item.name == 'continued_gs',
)
if (arr && arr.length > 0) {
if (parseInt(value) > arr[0].val_upper_limit) {
return arr[0].val_upper_limit + ''
}
if (parseInt(value) < arr[0].val_lower_limit) {
return arr[0].val_lower_limit + ''
}
}
return value.replace(/^0+/gi, '')
}
const formatter3 = value => {
if (parseInt(value) == 0) {
return '0'
}
let arr = settingStore.allSettingList.filter(
item => item.name == 'stoped_satur',
)
if (arr && arr.length > 0) {
if (parseInt(value) > arr[0].val_upper_limit) {
return arr[0].val_upper_limit + ''
}
if (parseInt(value) < arr[0].val_lower_limit) {
return arr[0].val_lower_limit + ''
}
}
return value.replace(/^0+/gi, '')
}
const formatter4 = value => {
if (parseInt(value) == 0) {
return '0'
}
let arr = settingStore.allSettingList.filter(
item => item.name == 'continued_satur',
)
if (arr && arr.length > 0) {
if (parseInt(value) > arr[0].val_upper_limit) {
return arr[0].val_upper_limit + ''
}
if (parseInt(value) < arr[0].val_lower_limit) {
return arr[0].val_lower_limit + ''
}
}
return value.replace(/^0+/gi, '')
}
const formatter5 = value => {
if (parseInt(value) == 0) {
return '0'
}
let arr = settingStore.allSettingList.filter(
item => item.name == 'max_humidity',
)
if (arr && arr.length > 0) {
if (parseInt(value) > arr[0].val_upper_limit) {
return arr[0].val_upper_limit + ''
}
if (parseInt(value) < arr[0].val_lower_limit) {
return arr[0].val_lower_limit + ''
}
}
return value.replace(/^0+/gi, '')
}
const formatter6 = value => {
if (parseInt(value) == 0) {
return '0'
}
let arr = settingStore.allSettingList.filter(
item => item.name == 'drainage_pump_speed',
)
if (arr && arr.length > 0) {
if (parseInt(value) > arr[0].val_upper_limit) {
return arr[0].val_upper_limit + ''
}
if (parseInt(value) < arr[0].val_lower_limit) {
return arr[0].val_lower_limit + ''
}
}
return value.replace(/^0+/gi, '')
}
const formatter7 = value => {
if (parseInt(value) == 0) {
return '0'
}
let arr = settingStore.allSettingList.filter(
item => item.name == 'injection_pump_speed',
)
if (arr && arr.length > 0) {
if (parseInt(value) > arr[0].val_upper_limit) {
return arr[0].val_upper_limit + ''
}
if (parseInt(value) < arr[0].val_lower_limit) {
return arr[0].val_lower_limit + ''
}
}
return value.replace(/^0+/gi, '')
}
const formatter8 = value => {
if (parseInt(value) == 0) {
return '0'
}
let arr = settingStore.allSettingList.filter(
item => item.name == 'pre_heat_time_s',
)
if (arr && arr.length > 0) {
if (parseInt(value) > arr[0].val_upper_limit) {
return arr[0].val_upper_limit + ''
}
if (parseInt(value) < arr[0].val_lower_limit) {
return arr[0].val_lower_limit + ''
}
}
return value.replace(/^0+/gi, '')
}
const formatter9 = value => {
if (parseInt(value) == 0) {
return '0'
}
let arr = settingStore.allSettingList.filter(
item => item.name == 'stoped_humi',
)
if (arr && arr.length > 0) {
if (parseInt(value) > arr[0].val_upper_limit) {
return arr[0].val_upper_limit + ''
}
if (parseInt(value) < arr[0].val_lower_limit) {
return arr[0].val_lower_limit + ''
}
}
return value.replace(/^0+/gi, '')
}
const formatter10 = value => {
if (parseInt(value) == 0) {
return '0'
}
let arr = settingStore.allSettingList.filter(
item => item.name == 'continued_humi',
)
if (arr && arr.length > 0) {
if (parseInt(value) > arr[0].val_upper_limit) {
return arr[0].val_upper_limit + ''
}
if (parseInt(value) < arr[0].val_lower_limit) {
return arr[0].val_lower_limit + ''
}
}
return value.replace(/^0+/gi, '')
}
const setAddliquidVal = () => {
const val = parseInt(addLiquidConfigVal.value)
if (isNaN(val)) {
showFailToast('设置失败,请填写正确参数')
return
}
}
const setStopedGsVal = () => {
const val = parseInt(stoped_gs.value)
if (isNaN(val)) {
showFailToast('设置失败,请填写正确参数')
return
}
}
const setcontinuedGsVal = () => {
const val = parseInt(continued_gs.value)
if (isNaN(val)) {
showFailToast('设置失败,请填写正确参数')
return
}
}
const setstopedSaturVal = () => {
const val = parseInt(stoped_satur.value)
if (isNaN(val)) {
showFailToast('设置失败,请填写正确参数')
return
}
}
const setContinuedSaturVal = () => {
const val = parseInt(continued_satur.value)
if (isNaN(val)) {
showFailToast('设置失败,请填写正确参数')
return
}
}
const setMaxHumidityVal = () => {
const val = parseInt(max_humidity.value)
if (isNaN(val)) {
showFailToast('设置失败,请填写正确参数')
return
}
}
const setHeat_timeVal = () => {
const val = parseInt(pre_heat_time_s.value)
if (isNaN(val)) {
showFailToast('设置失败,请填写正确参数')
return
}
}
const setstoped_humiVal = () => {
const val = parseInt(stoped_humi.value)
if (isNaN(val)) {
showFailToast('设置失败,请填写正确参数')
return
}
}
const setcontinued_humiVal = () => {
const val = parseInt(continued_humi.value)
if (isNaN(val)) {
showFailToast('设置失败,请填写正确参数')
return
}
}
const setSprayLiquidVal = () => {
const val = parseInt(sprayLiquidConfigVal.value)
if (isNaN(val)) {
showFailToast('设置失败,请填写正确参数')
return
}
}
</script>
<style lang="scss" scoped>
.device_container {
box-sizing: border-box;
width: 100%;
height: 580px;
display: grid;
overflow: scroll;
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: 14px;
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;
}
}
.formula_input {
border: none;
height: 38px;
padding: 0 12px;
width: 220px;
}
.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>

30
src/components/Formula.vue

@ -1,7 +1,10 @@
<template> <template>
<div class="formula_container"> <div class="formula_container">
<div v-if="isSettingVisible">
<PreSetting :hideSettingModal="hideSettingModal" />
<div v-if="isAddPreSettingVisible">
<AddPreSetting :hideSettingModal="hideAddSettingModal" />
</div>
<div v-else-if="isUpdatePreSettingVisible">
<UpdatePreSetting :hideSettingModal="hideUpdateSettingModal" />
</div> </div>
<div v-else> <div v-else>
<div class="header_wrap"> <div class="header_wrap">
@ -23,7 +26,7 @@
<div class="username">{{ item?.formula_id }}</div> <div class="username">{{ item?.formula_id }}</div>
<div class="btns"> <div class="btns">
<div class="btn" @click="delModalShow(item)">删除</div> <div class="btn" @click="delModalShow(item)">删除</div>
<div class="btn mg" @click="showSetting(item)">配置</div>
<div class="btn mg" @click="showUpdateSetting(item)">配置</div>
<div class="btn" @click="runConfig(item)">执行</div> <div class="btn" @click="runConfig(item)">执行</div>
</div> </div>
</div> </div>
@ -112,7 +115,8 @@
<script setup> <script setup>
import { ref, onMounted } from 'vue' import { ref, onMounted } from 'vue'
import DelPreModal from 'cpns/dialogs/DelPreModal' import DelPreModal from 'cpns/dialogs/DelPreModal'
import PreSetting from './PreSetting'
import AddPreSetting from './AddPreSetting'
import UpdatePreSetting from './UpdatePreSetting'
import { getAllFormulaJSON } from '@/mock/command' import { getAllFormulaJSON } from '@/mock/command'
import { useWebSocketStore, useFormulaStore } from '@/store' import { useWebSocketStore, useFormulaStore } from '@/store'
import { startFormulaJSON } from '@/mock/command' import { startFormulaJSON } from '@/mock/command'
@ -131,15 +135,19 @@ const hideDelModal = () => {
delPreModalVisible.value = false delPreModalVisible.value = false
} }
const isSettingVisible = ref(false)
const showSetting = item => {
const isAddPreSettingVisible = ref(false)
const isUpdatePreSettingVisible = ref(false)
const showUpdateSetting = item => {
formulaStore.updateCurrentFormula(item) formulaStore.updateCurrentFormula(item)
isSettingVisible.value = true
isUpdatePreSettingVisible.value = true
}
const hideUpdateSettingModal = () => {
isUpdatePreSettingVisible.value = false
} }
const hideSettingModal = () => {
isSettingVisible.value = false
const hideAddSettingModal = () => {
isAddPreSettingVisible.value = false
} }
// //
@ -151,7 +159,7 @@ const runConfig = item => {
const addNewPre = () => { const addNewPre = () => {
// //
isSettingVisible.value = true
isAddPreSettingVisible.value = true
} }
onMounted(() => { onMounted(() => {

4
src/components/PreSetting.vue → src/components/UpdatePreSetting.vue

@ -1,5 +1,5 @@
<template> <template>
<div class="device_container">
<div class="update_pre_device_container">
<div class="row_wrap"> <div class="row_wrap">
<p class="title">注射蠕动泵速率(g/min)</p> <p class="title">注射蠕动泵速率(g/min)</p>
<p class="num"> <p class="num">
@ -645,7 +645,7 @@ const setSprayLiquidVal = () => {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.device_container {
.update_pre_device_container {
box-sizing: border-box; box-sizing: border-box;
width: 100%; width: 100%;
height: 580px; height: 580px;

20
src/mock/command.js

@ -269,27 +269,11 @@ export const delFormulaJSON = id => {
} }
// 添加配方 是不是少了log // 添加配方 是不是少了log
export const addFormulaJSON = (
formula_id,
stoped_gs,
continued_gs,
stoped_satur,
continued_satur,
stoped_humi,
continued_humi,
injection_pump_speed,
) => {
export const addFormulaJSON = data => {
return { return {
command: 'addFormula', command: 'addFormula',
messageId: 'addFormula', messageId: 'addFormula',
formula_id,
stoped_gs,
continued_gs,
stoped_satur,
continued_satur,
stoped_humi,
continued_humi,
injection_pump_speed,
...data,
} }
} }

Loading…
Cancel
Save