From c36d53af9576ee8ea5ca0ba12f2d5629de0da908 Mon Sep 17 00:00:00 2001
From: sige <sige@sige.com>
Date: Wed, 7 Aug 2024 09:09:12 +0800
Subject: [PATCH] SettingEdit.vue

---
 src/device/pipeline/SettingEdit.vue | 286 ++++++++++++++++++++++++++++++++++++
 1 file changed, 286 insertions(+)
 create mode 100644 src/device/pipeline/SettingEdit.vue

diff --git a/src/device/pipeline/SettingEdit.vue b/src/device/pipeline/SettingEdit.vue
new file mode 100644
index 0000000..cfd29d7
--- /dev/null
+++ b/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>