feat: 碳源投加左侧部分

src/views/control/MedicinalView.vue

@@ -1,9 +1,10 @@
 <script setup>
 import { ref, onMounted, watch } from 'vue';
-import { NScrollbar, useMessage } from 'naive-ui';
+import { NScrollbar, useMessage, NTabs, NTabPane } from 'naive-ui';
 import { objectCopy } from '@/utils/tools';
 import { TheChatView } from '@/components';
 
+
 import { controlApi } from "@/api/control";
 
 import BaseButton from './components/BaseButton.vue';
@@ -13,6 +14,7 @@ import BaseCard from './components/BaseCard.vue';
 import BaseRadioGroup from './components/BaseRadioGroup.vue';
 import BaseChooseItem from './components/BaseChooseItem.vue';
 import BaseInput from './components/BaseInput.vue';
+import { BaseNumberInput } from '@/components';
 
 import TheResultPanel from './components/TheResultPanel.vue';
 import TheEchartPanel from './components/TheEchartPanel.vue';
@@ -22,25 +24,32 @@ const isVisibleBtn = ref(true);
 const dataSource = ref({});
 const chooseItemRef = ref([]);
 
+const tabList = ref([
+  { label: '自动', key: 'auto' },
+  { label: '1号池', key: 'onePool' },
+  { label: '2号池', key: 'twoPool' },
+  { label: '人工投放', key: 'worker' },
+])
+
 const columnData = [
-  { label: '后反馈设定',    key: 'hfksd' },
-  { label: '基准系数',      key: 'jzxs' },
-  { label: '修正系数',      key: 'xzxs' },
-  { label: '控制系数',      key: 'kzxs' },
-  { label: '水量分配系数',  key: 'sffpxs' },
-  { label: '碳源当量',      key: 'tydl' },
-  { label: '转换系数',      key: 'zhxs' },
-  { label: '稀释配属',      key: 'xsbs' },
-  { label: '药剂密度',      key: 'yjmd' },
-  { label: '最小启动流量',   key: 'zxqdll' },
-  { label: '碳氮比',        key: 'tdb' }
+  { label: '后反馈设定', key: 'hfksd' },
+  { label: '基准系数', key: 'jzxs' },
+  { label: '修正系数', key: 'xzxs' },
+  { label: '控制系数', key: 'kzxs' },
+  { label: '水量分配系数', key: 'sffpxs' },
+  { label: '碳源当量', key: 'tydl' },
+  { label: '转换系数', key: 'zhxs' },
+  { label: '稀释配属', key: 'xsbs' },
+  { label: '药剂密度', key: 'yjmd' },
+  { label: '最小启动流量', key: 'zxqdll' },
+  { label: '碳氮比', key: 'tdb' }
 ]
 
 // 基础参数 - 按钮选择
 const paramData = ref({
   pump: 0,           // 加药泵
   running: 0,        // 运行方式
-  pond:0,            // 池组手自动方式
+  pond: 0,            // 池组手自动方式
   setting: 0,        // 智适应碳源设置 1# 2#
   jslYB: null,        // 进水流量
   jscod: null,       // 进水COD
@@ -80,13 +89,13 @@ watch(() => paramData.value.setting, () => {
 // 重置
 const handelReset = () => {
 
-  if ( !isVisibleBtn.value ) {
+  if (!isVisibleBtn.value) {
     return message.warning("设定参数系数的值未保存")
   }
 
-  chooseItemRef.value.forEach(item => item.resetInpVal() );
+  chooseItemRef.value.forEach(item => item.resetInpVal());
 
-  paramData.value = objectCopy({...originParamData, setting: paramData.value.setting});
+  paramData.value = objectCopy({ ...originParamData, setting: paramData.value.setting });
   factorData.value = objectCopy(originFactorData);
   factorInpData.value = objectCopy(originFactorData);
 
@@ -97,7 +106,7 @@ const handelReset = () => {
 // 计算最终结果
 const handleResult = () => {
 
-  if ( !isVisibleBtn.value ) {
+  if (!isVisibleBtn.value) {
     return message.warning("设定参数系数的值未保存")
   }
 
@@ -121,7 +130,7 @@ const handleResult = () => {
     zxqdll: '最小启动流量',
     tdb: '碳氮比'
   }
-  const whitelist = [ 'pump', 'running', 'pond', 'setting' ];
+  const whitelist = ['pump', 'running', 'pond', 'setting'];
   const mergeData = { ...paramData.value, ...factorData.value };
   const keyList = Object.keys(mergeData);
   let isErrorItem = null;
@@ -129,20 +138,20 @@ const handleResult = () => {
   for (let i = 0; i < keyList.length; i++) {
     const key = keyList[i];
     const val = mergeData[key]
-    
+
     if (!val && !whitelist.includes(key)) {
-      isErrorItem = { key, val, label: codeSetEnum[key]  }
+      isErrorItem = { key, val, label: codeSetEnum[key] }
       break
     }
   }
 
-  if ( isErrorItem ) {
+  if (isErrorItem) {
     return message.warning(`${isErrorItem.label}未填写`)
   }
 
-  const stepOne = ((( 2 * paramData.value.hycxsy - factorData.value.hfksd)+((paramData.value.qycad + paramData.value.qycxsy) * factorData.value.xzxs - factorData.value.hfksd)) * (factorData.value.jzxs - 1)) * (paramData.value.jslYB * factorData.value.sffpxs) / 1000
+  const stepOne = (((2 * paramData.value.hycxsy - factorData.value.hfksd) + ((paramData.value.qycad + paramData.value.qycxsy) * factorData.value.xzxs - factorData.value.hfksd)) * (factorData.value.jzxs - 1)) * (paramData.value.jslYB * factorData.value.sffpxs) / 1000
 
-  const setpTwo = ( stepOne * factorData.value.kzxs - ( paramData.value.jslYB * factorData.value.sffpxs * paramData.value.jscod * factorData.value.zhxs / 1000)) / factorData.value.tydl
+  const setpTwo = (stepOne * factorData.value.kzxs - (paramData.value.jslYB * factorData.value.sffpxs * paramData.value.jscod * factorData.value.zhxs / 1000)) / factorData.value.tydl
 
   const setpThree = setpTwo / factorData.value.yjmd / 1000 * factorData.value.xsbs
 
@@ -157,14 +166,14 @@ const onEditConfirm = () => {
   for (let i = 0; i < keys.length; i++) {
     const key = keys[i];
     const val = factorInpData.value[key];
-    if ( !val || val === Infinity) {
+    if (!val || val === Infinity) {
       message.warning("数据来源填写有误，请检查")
       isError = true;
       break;
     }
   }
 
-  if ( isError ) return;
+  if (isError) return;
 
   isVisibleBtn.value = true;
   factorData.value = JSON.parse(JSON.stringify(factorInpData.value));
@@ -176,7 +185,7 @@ const onEditCancel = () => {
 }
 
 const onFinalResult = () => {
-  if ( !flowNum.value ) {
+  if (!flowNum.value) {
     return message.warning('您还未完成投加计算，请完成后再试');
   }
   message.warning('您还未接入组态系统，请接入后再试');
@@ -191,6 +200,19 @@ onMounted(async () => {
   dataSource.value = result;
 })
 
+const datas = ref({
+  auto: {
+  },
+  onePool: {
+
+  },
+  twoPool: {
+
+  },
+  worker: {
+  }
+})
+
 </script>
 
 <template>
@@ -201,10 +223,10 @@ onMounted(async () => {
           <div class="left-section">
 
             <BaseTitle title="智能投加计算">
-              <template #right>
+              <!-- <template #right>
                 <BaseButton @click="handelReset">重置</BaseButton>
                 <BaseButton type="gradual" @on-click="handleResult">投加计算</BaseButton>
-              </template>
+              </template> -->
             </BaseTitle>
 
             <n-scrollbar class="scrollbar" style="height: 100%;">
@@ -213,102 +235,268 @@ onMounted(async () => {
                   <BaseRadioCard v-model="paramData.pump"></BaseRadioCard>
                 </BaseCard>
 
-                <BaseCard title="选择运行方式">
-                  <BaseRadioGroup :data="['自动', '手动']" v-model="paramData.running"></BaseRadioGroup>
+                <BaseCard title="投加运行方式">
+                  <span class="status-bar">
+                    <i>启用智适应碳源投加</i>
+                  </span>
                 </BaseCard>
 
                 <BaseCard title="选择池组手自动方式">
-                  <BaseRadioGroup :data="['自动', '手动']" v-model="paramData.pond"></BaseRadioGroup>
-                </BaseCard>
-
-                <BaseCard title="确定智适应碳源设置">
-                  <BaseRadioGroup :data="['1号池', '2号池']" v-model="paramData.setting"></BaseRadioGroup>
-                </BaseCard>
-                
-                <BaseCard :title="paramData.setting == 0  ? '1号池设定数据来源' : '2号池设定数据来源'">
-                  <div class="space-y-[12px]">
-                    <BaseChooseItem
-                      title="进水流量"
-                      v-model="paramData.jslYB"
-                      :btn-group="[
-                        { label: '手动', key: 'hand', value: '' },
-                        { label: '仪表', key: 'laboratory', value: dataSource.jslYB },
-                      ]"
-                      unit="m³"
-                      :ref="el=> chooseItemRef[0] = el"
-                    ></BaseChooseItem>
-
-                    <BaseChooseItem
-                      title="进水COD"
-                      v-model="paramData.jscod"
-                      :btn-group="[
-                        { label: '手动', key: 'hand' },
-                        { label: '仪表', key: 'laboratory', value: dataSource.jsCodYB },
-                        { label: '化验', key: 'assay', value: dataSource.jsCodHY },
-                      ]"
-                      unit="mg/L"
-                      :ref="el=> chooseItemRef[1] = el"
-                    ></BaseChooseItem>
-  
-                    <BaseChooseItem
-                      title="好氧池硝酸盐"
-                      v-model="paramData.hycxsy"
-                      :btn-group="[
-                        { label: '手动', key: 'hand', value: '' },
-                        { label: '化验', key: 'forecast', value: dataSource[paramData.setting === 0 ? 'hyXsyHYOne' : 'hyXsyHYTwo'] },
-                        { label: '预测', key: 'forecast', value: dataSource[paramData.setting === 0 ? 'hyXsyYCOne' : 'hyXsyYCTwo'] },
-                      ]"
-                      unit="mg/L"
-                      :ref="el=> chooseItemRef[2] = el"
-                    ></BaseChooseItem>
-  
-                    <BaseChooseItem
-                      title="缺氧池硝酸盐"
-                      v-model="paramData.qycxsy"
-                      :btn-group="[
-                        { label: '手动', key: 'hand', value: ''},
-                        { label: '化验', key: 'forecast', value: dataSource[paramData.setting === 0 ? 'qyXsyHYOne' : 'qyXsyHYTwo'] },
-                      ]"
-                      unit="mg/L"
-                      :ref="el=> chooseItemRef[3] = el"
-                    ></BaseChooseItem>
-  
-                    <BaseChooseItem
-                      title="缺氧池氨氮"
-                      v-model="paramData.qycad"
-                      :btn-group="[
-                        { label: '手动', key: 'hand', value:'' },
-                        { label: '化验', key: 'forecast', value: dataSource[paramData.setting === 0 ? 'qyAdHYOne' : 'qyAdHYTwo'] },
-                      ]"
-                      unit="mg/L"
-                      :ref="el=> chooseItemRef[4] = el"
-                    ></BaseChooseItem>
-  
-                    <BaseChooseItem
-                      title="进水总氮"
-                      v-model="paramData.jszd"
-                      :btn-group="[
-                        { label: '手动', key: 'hand', value: '' },
-                        { label: '仪表', key: 'laboratory', value: dataSource.jsTnYB}
-                      ]"
-                      unit="mg/L"
-                      :ref="el=> chooseItemRef[5] = el"
-                    ></BaseChooseItem>
-                  </div>
+                  <n-tabs justify-content="space-between" v-model:value="name" type="line" :bar-width="40"
+                    tab-style="min-width: 89px;" tab-class="custom-tab_item" animated>
+                    <n-tab-pane name="自动">
+                      <div class="panel-header_main">
+                        <p>设置数据来源</p>
+                        <p class="space-x-[20px] text-center">
+                          <span>1号池</span>
+                          <span>2号池</span>
+                        </p>
+                      </div>
+                      <div class="space-y-[12px]">
+                        <BaseChooseItem
+                          title="进水流量"
+                          unit="m³"
+                          isDouble
+                          v-model:type="datas.auto.jsLlType"
+                          v-model:value1="datas.auto.jsLlOne"
+                          v-model:value2="datas.auto.jsLlTwo"
+                          :btn-group="[
+                            { label: '手动', value1: '', value2: '' },
+                            { label: '仪表', value1: 3344, value2: dataSource.jslYB }
+                          ]"
+                        ></BaseChooseItem>
+                        <BaseChooseItem
+                          title="进水COD"
+                          unit="mg/L"
+                          v-model:type="datas.auto.jsCodType"
+                          v-model:value1="datas.auto.jsCodOne"
+                          v-model:value2="datas.auto.jsCodTwo"
+                          :btn-group="[
+                            { label: '手动', value1: '', value2: '' },
+                            { label: '仪表', value1: 3344, value2: dataSource.jslYB },
+                            { label: '化验', value1: 3344, value2: 22222 }
+                          ]"
+                        ></BaseChooseItem>
+                        <BaseChooseItem
+                          title="好氧池硝酸盐"
+                          unit="mg/L"
+                          v-model:type="datas.auto.hycXsyType"
+                          v-model:value1="datas.auto.hycXsyOne"
+                          v-model:value2="datas.auto.hycXsyTwo"
+                          :btn-group="[
+                            { label: '手动', value1: '', value2: '' },
+                            { label: '化验', value1: 3344, value2: dataSource.jslYB },
+                            { label: '预测', value1: 3344, value2: 22222 }
+                          ]"
+                        ></BaseChooseItem>
+                        <BaseChooseItem
+                          title="缺氧池硝酸盐"
+                          unit="mg/L"
+                          v-model:type="datas.auto.qycYxyType"
+                          v-model:value1="datas.auto.qycYxyOne"
+                          v-model:value2="datas.auto.qycYxyTwo"
+                          :btn-group="[
+                            { label: '手动', value1: '', value2: '' },
+                            { label: '化验', value1: 3344, value2: dataSource.jslYB }
+                          ]"
+                        ></BaseChooseItem>
+                        <BaseChooseItem
+                          title="缺氧池氨氮"
+                          unit="mg/L"
+                          v-model:type="datas.auto.qycAdType"
+                          v-model:value1="datas.auto.qycAdOne"
+                          v-model:value2="datas.auto.qycAdTwo"
+                          :btn-group="[
+                            { label: '手动', value1: '', value2: '' },
+                            { label: '化验', value1: 3344, value2: dataSource.jslYB }
+                          ]"
+                        ></BaseChooseItem>
+                        <BaseChooseItem
+                          title="进水总氮"
+                          unit="mg/L"
+                          v-model:type="datas.auto.jsTnType"
+                          v-model:value1="datas.auto.jsTnOne"
+                          v-model:value2="datas.auto.jsTnTwo"
+                          :btn-group="[
+                            { label: '手动', value1: '', value2: '' },
+                            { label: '仪表', value1: 3344, value2: dataSource.jslYB }
+                          ]"
+                        ></BaseChooseItem>
+                      </div>
+                    </n-tab-pane>
+                    <n-tab-pane name="1号池">
+                      <div class="panel-header_main">
+                        <p>设置数据来源</p>
+                        <p class="space-x-[20px] text-center">
+                          <span>1号池</span>
+                        </p>
+                      </div>
+                      <div class="space-y-[12px]">
+                        <BaseChooseItem
+                          title="进水流量"
+                          unit="m³"
+                          v-model:type="datas.onePool.jsLlType"
+                          v-model:value1="datas.onePool.jsLlOne"
+                          :btn-group="[
+                            { label: '手动', value1: '', value2: '' },
+                            { label: '仪表', value1: 3344, value2: dataSource.jslYB }
+                          ]"
+                        ></BaseChooseItem>
+                        <BaseChooseItem
+                          title="进水COD"
+                          unit="mg/L"
+                          v-model:type="datas.onePool.jsCodType"
+                          v-model:value1="datas.onePool.jsCodOne"
+                          :btn-group="[
+                            { label: '手动', value1: '', value2: '' },
+                            { label: '仪表', value1: 3344, value2: dataSource.jslYB },
+                            { label: '化验', value1: 3344, value2: 22222 }
+                          ]"
+                        ></BaseChooseItem>
+                        <BaseChooseItem
+                          title="好氧池硝酸盐"
+                          unit="mg/L"
+                          v-model:type="datas.onePool.hycXsyType"
+                          v-model:value1="datas.onePool.hycXsyOne"
+                          :btn-group="[
+                            { label: '手动', value1: '', value2: '' },
+                            { label: '化验', value1: 3344, value2: dataSource.jslYB },
+                            { label: '预测', value1: 3344, value2: 22222 }
+                          ]"
+                        ></BaseChooseItem>
+                        <BaseChooseItem
+                          title="缺氧池硝酸盐"
+                          unit="mg/L"
+                          v-model:type="datas.onePool.qycYxyType"
+                          v-model:value1="datas.onePool.qycYxyOne"
+                          v-model:value2="datas.onePool.qycYxyTwo"
+                          :btn-group="[
+                            { label: '手动', value1: '', value2: '' },
+                            { label: '化验', value1: 3344, value2: dataSource.jslYB }
+                          ]"
+                        ></BaseChooseItem>
+                        <BaseChooseItem
+                          title="缺氧池氨氮"
+                          unit="mg/L"
+                          v-model:type="datas.onePool.qycAdType"
+                          v-model:value1="datas.onePool.qycAdOne"
+                          :btn-group="[
+                            { label: '手动', value1: '', value2: '' },
+                            { label: '化验', value1: 3344, value2: dataSource.jslYB }
+                          ]"
+                        ></BaseChooseItem>
+                        <BaseChooseItem
+                          title="进水总氮"
+                          unit="mg/L"
+                          v-model:type="datas.onePool.jsTnType"
+                          v-model:value1="datas.onePool.jsTnOne"
+                          :btn-group="[
+                            { label: '手动', value1: '', value2: '' },
+                            { label: '仪表', value1: 3344, value2: dataSource.jslYB }
+                          ]"
+                        ></BaseChooseItem>
+                      </div>
+                    </n-tab-pane>
+                    <n-tab-pane name="2号池">
+                      <div class="panel-header_main">
+                        <p>设置数据来源</p>
+                        <p class="space-x-[20px] text-center">
+                          <span>2号池</span>
+                        </p>
+                      </div>
+                      <div class="space-y-[12px]">
+                        <BaseChooseItem
+                          title="进水流量"
+                          unit="m³"
+                          v-model:type="datas.twoPool.jsLlType"
+                          v-model:value1="datas.twoPool.jsLlOne"
+                          :btn-group="[
+                            { label: '手动', value1: '', value2: '' },
+                            { label: '仪表', value1: 3344, value2: dataSource.jslYB }
+                          ]"
+                        ></BaseChooseItem>
+                        <BaseChooseItem
+                          title="进水COD"
+                          unit="mg/L"
+                          v-model:type="datas.twoPool.jsCodType"
+                          v-model:value1="datas.twoPool.jsCodOne"
+                          :btn-group="[
+                            { label: '手动', value1: '', value2: '' },
+                            { label: '仪表', value1: 3344, value2: dataSource.jslYB },
+                            { label: '化验', value1: 3344, value2: 22222 }
+                          ]"
+                        ></BaseChooseItem>
+                        <BaseChooseItem
+                          title="好氧池硝酸盐"
+                          unit="mg/L"
+                          v-model:type="datas.twoPool.hycXsyType"
+                          v-model:value1="datas.twoPool.hycXsyOne"
+                          :btn-group="[
+                            { label: '手动', value1: '', value2: '' },
+                            { label: '化验', value1: 3344, value2: dataSource.jslYB },
+                            { label: '预测', value1: 3344, value2: 22222 }
+                          ]"
+                        ></BaseChooseItem>
+                        <BaseChooseItem
+                          title="缺氧池硝酸盐"
+                          unit="mg/L"
+                          v-model:type="datas.twoPool.qycYxyType"
+                          v-model:value1="datas.twoPool.qycYxyOne"
+                          v-model:value2="datas.twoPool.qycYxyTwo"
+                          :btn-group="[
+                            { label: '手动', value1: '', value2: '' },
+                            { label: '化验', value1: 3344, value2: dataSource.jslYB }
+                          ]"
+                        ></BaseChooseItem>
+                        <BaseChooseItem
+                          title="缺氧池氨氮"
+                          unit="mg/L"
+                          v-model:type="datas.twoPool.qycAdType"
+                          v-model:value1="datas.twoPool.qycAdOne"
+                          :btn-group="[
+                            { label: '手动', value1: '', value2: '' },
+                            { label: '化验', value1: 3344, value2: dataSource.jslYB }
+                          ]"
+                        ></BaseChooseItem>
+                        <BaseChooseItem
+                          title="进水总氮"
+                          unit="mg/L"
+                          v-model:type="datas.twoPool.jsTnType"
+                          v-model:value1="datas.twoPool.jsTnOne"
+                          :btn-group="[
+                            { label: '手动', value1: '', value2: '' },
+                            { label: '仪表', value1: 3344, value2: dataSource.jslYB }
+                          ]"
+                        ></BaseChooseItem>
+                      </div>
+                    </n-tab-pane>
+                    <n-tab-pane name="人工投放">
+                      <div class="panel-header_main">
+                        <p>设置数据来源</p>
+                        <p class="space-x-[20px] text-center">
+                          <span>人工投放</span>
+                        </p>
+                      </div>
+                      <div class="w-full flex items-center justify-between">
+                        <span>人工投放:</span>
+                        <div class="w-[200px]">
+                          <BaseInput :isCloseIcon="false"></BaseInput>
+                        </div>
+                      </div>
+                    </n-tab-pane>
+                  </n-tabs>
                 </BaseCard>
-
                 <BaseCard title="设定参数系数" style="margin: 0" tips="建议使用默认值，非必要不修改">
                   <template #titleRight>
                     <div>
-                      <div
-                        class="flex items-center space-x-[4px] cursor-pointer text-[#2454FF] text-[13px]"
-                        v-show="isVisibleBtn"
-                        @click="isVisibleBtn = false
-                      ">
+                      <div class="flex items-center space-x-[4px] cursor-pointer text-[#2454FF] text-[13px]"
+                        v-show="isVisibleBtn" @click="isVisibleBtn = false
+                          ">
                         <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-                          <path d="M2.33337 14H14.3334" stroke="#2454FF" stroke-linecap="round" stroke-linejoin="round" />
-                          <path d="M3.66663 8.90663V11.3333H6.10569L13 4.43603L10.565 2L3.66663 8.90663Z" stroke="#2454FF"
+                          <path d="M2.33337 14H14.3334" stroke="#2454FF" stroke-linecap="round"
                             stroke-linejoin="round" />
+                          <path d="M3.66663 8.90663V11.3333H6.10569L13 4.43603L10.565 2L3.66663 8.90663Z"
+                            stroke="#2454FF" stroke-linejoin="round" />
                         </svg>
                         <span>编辑</span>
                       </div>
@@ -326,7 +514,8 @@ onMounted(async () => {
                         {{ index === 0 ? 'mg/L' : '' }}
                       </span>
                       <div style="width: 140px;" v-show="!isVisibleBtn">
-                        <BaseInput :unit="index === 0 ? 'mg/L' : '' " size='small' :isNeedFlotBtn="false"  v-model="factorInpData[item.key]" isCenter placeholder=""></BaseInput>
+                        <BaseInput :unit="index === 0 ? 'mg/L' : ''" size='small' :isNeedFlotBtn="false"
+                          v-model="factorInpData[item.key]" isCenter placeholder=""></BaseInput>
                       </div>
                     </li>
                   </ul>
@@ -352,11 +541,30 @@ onMounted(async () => {
   .left-section {
     display: flex;
     flex-flow: column;
-    width: 400px;
+    flex-shrink: 0;
+    width: 440px;
     height: 100%;
     border-radius: 10px;
     background: #fff;
 
+    .status-bar {
+      display: inline-block;
+      padding: 4px 14px;
+      margin-left: 20px;
+      border-top: 0.5px solid rgba(212, 241, 255, 0.00);
+      border-bottom: 0.5px solid rgba(212, 241, 255, 0.00);
+      background: linear-gradient(90deg, rgba(240, 250, 255, 0.00) 0%, #E9F8FF 27.27%, rgba(240, 250, 255, 0.00) 100%);
+
+      i {
+        line-height: 24px;
+        background: linear-gradient(92deg, #5ABBF2 12.24%, #2454FF 63.2%);
+        background-clip: text;
+        -webkit-background-clip: text;
+        -webkit-text-fill-color: transparent;
+        font-weight: bold;
+      }
+    }
+
     .scrollbar {
       height: 100%;
     }
@@ -364,14 +572,27 @@ onMounted(async () => {
     .form-content {
       padding: 24px 16px;
     }
+
+    .panel-header_main {
+      @include flex(x, center, between);
+      margin-bottom: 12px;
+      color: #86909C;
+      span {
+        display: inline-block;
+        width: 60px;
+      }
+    }
+
   }
 
   .data-source-list {
     .data-soruce-item {
       @include flex(x, center, between);
+
       .inp-inner {
         width: 112px;
       }
+
       .unit {
         font-family: "D-DIN-PRO-700-Bold";
         font-weight: bold;
@@ -405,7 +626,6 @@ onMounted(async () => {
 
 
 // 通用区域的样式
-
 .btn {
   width: 80px;
   height: 32px;
@@ -465,4 +685,28 @@ onMounted(async () => {
 .radio_big.radio-active {
   border: 4px solid #2454FF;
 }
+</style>
+
+<style lang="scss">
+.custom-tab_item {
+  @include flex (x, center, center);
+  height: 35px;
+  border-top-left-radius: 4px;
+  border-top-right-radius: 4px;
+  background: #F3F5FA;
+
+  &.n-tabs-tab--active {
+    transition: none !important;
+    border-radius: 4px;
+    transition: none !important;
+    background: url('https://static.fuxicarbon.com/bigModel/pc/tab-border-item-2x.png') -3px 0px no-repeat, linear-gradient(180deg, #F1F3FE 0%, #FFF 100%);
+    background-size: 107% 100%;
+  }
+}
+
+.control-container .left-section {
+  .n-tabs-nav-scroll-content {
+    padding-bottom: 10px;
+  }
+}
 </style>

src/views/control/components/BaseCard.vue

@@ -44,10 +44,8 @@ defineProps({
     .title {
       @include flex(x, center, start);
       height: 30px;
-      padding-left: 9px;
       line-height: 30px;
       border-radius: 4px;
-      background: linear-gradient(90deg, #F6F7F9 0%, #FFF 100%);
       font-size: 14px;
       font-weight: bold;
       color: #1A2029;

src/views/control/components/BaseChooseItem.vue

@@ -1,6 +1,7 @@
 <script setup>
 import { ref, computed, unref } from 'vue';
 import { useMessage } from 'naive-ui';
+import { BaseNumberInput } from '@/components';
 
 import BaseButton from './BaseButton.vue';
 import BaseInput from './BaseInput.vue';
@@ -11,6 +12,10 @@ const activeIndex = ref(-1);
 const inpVal = ref();
 const modelValue = defineModel();
 
+const modelType = defineModel('type');
+const modelValue1 = defineModel('value1');
+const modelValue2 = defineModel('value2');
+
 const props = defineProps({
   title: {
     type: String,
@@ -23,9 +28,15 @@ const props = defineProps({
   unit: {
     type: String,
     default: ''
+  },
+  isDouble: {
+    type: Boolean,
+    default: false
   }
 })
 
+const data = ref(props.btnGroup);
+
 const currentNumValue = computed(() => {
   const curIndex = props.btnGroup.length === 1 ? 0 : unref(activeIndex.value);
   return curIndex < 0
@@ -46,7 +57,9 @@ const onInpConfirm = (num) => {
 }
 
 const onInput = (val) => {
-  inpVal.value = val
+  modelValue1.value = val;
+  modelValue2.value = val;
+  // inpVal.value = val
 }
 
 const onBlur = () => {
@@ -58,8 +71,11 @@ const onBlur = () => {
 }
 
 const changeActive = (item, index) => {
-  activeIndex.value = index;
-  modelValue.value = index != 0 ? item.value : (inpVal.value || null);
+  modelType.value = index;
+  modelValue1.value = index != 0 ? item.value1 : modelValue.value;
+  if (props.isDouble) {
+    modelValue2.value = index != 0 ? item.value2 : modelValue.value;
+  }
 }
 
 const resetInpVal = () => {
@@ -78,15 +94,24 @@ defineExpose({
     <div class="choose-inner">
       <div class="top-box">
         <ul class="btn-group space-x-[4px]">
-          <BaseButton type="info" :key="item.key" :isActive="activeIndex === index || btnGroup.length === 1" v-for="item, index in btnGroup"
-            @click="changeActive(item, index)">
+          <BaseButton
+            v-for="item, index in btnGroup"
+            type="info"
+            :key="index"
+            :isActive="modelType === index || btnGroup.length === 1"
+            @click="changeActive(item, index)"
+          >
             {{ item.label }}
           </BaseButton>
         </ul>
-        <span class="unit">{{ currentNumValue }} {{ unit }}</span>
+        <ul class="flex space-x-[20px] text-center">
+          <li class="w-[60px]">{{ modelValue1 }}</li>
+          <li class="w-[60px]" v-if="isDouble">{{ modelValue2 }}</li>
+        </ul>
       </div>
+
       <BaseInput
-        v-show="!activeIndex || btnGroup.length === 1"
+        v-show="(modelType !== undefined && !modelType) || btnGroup.length === 1"
         default-value=""
         :placeholder="'请输入' + props.title"
         :unit="unit"
@@ -123,7 +148,7 @@ defineExpose({
       .unit {
         font-family: "D-DIN-PRO-700-Bold";
         font-weight: bold;
-        font-size: 14px;
+        font-size: 12px;
         color: #333;
       }
     }

src/views/control/components/BaseInput.vue

@@ -31,6 +31,10 @@ const props = defineProps({
   isCenter: {
     type: Boolean,
     default: false
+  },
+  isCloseIcon: {
+    type: Boolean,
+    default: true
   }
 })
 
@@ -73,6 +77,18 @@ const handleInpValue = (event, type) => {
   }
 }
 
+const inputThemeOverrides = {
+  peers: {
+    Input: {
+      text: '#333',
+      border: '1px solid #d7d9e5',
+      borderRadius: '4px',
+      borderHover: '1px solid #2454FF',
+      borderFocus: '1px solid #2454FF',
+      boxShadowFocus: '0 0 0 2px rgba(36, 84, 255, 0.2)'
+    }
+  }
+}
 </script>
 
 <template>
@@ -88,6 +104,7 @@ const handleInpValue = (event, type) => {
       :show-button="false"
       :value="modelValue"
     >
+
       <template #suffix>
         <div class="unit" v-if="unit">{{ unit }}</div>
       </template>
@@ -96,7 +113,7 @@ const handleInpValue = (event, type) => {
       <!-- <li>
         <SvgIcon name="control-icon-confirm" size="16" @mousedown="handleInpValue($event, 'confirm')"></SvgIcon>
       </li> -->
-      <li>
+      <li v-if="isCloseIcon">
         <SvgIcon name="control-icon-cancel" size="16" @mousedown="handleInpValue($event, 'cancel')"></SvgIcon>
       </li>
     </ul>

src/views/control/components/BaseRadioCard.vue

@@ -10,8 +10,6 @@ const defaultData = [
   { label: '3号加药泵', key: 'third' },
 ]
 
-const activeIndex = ref(0);
-
 const chageActive = (index) => modelValue.value = index;
 </script>
 
@@ -20,7 +18,7 @@ const chageActive = (index) => modelValue.value = index;
     <li :class="['radio-card_item', { 'card_item_active': index === modelValue }]" v-for="item, index in defaultData"
       :key="item.key" @click="chageActive(index)">
       <div class="radio-wrapper">
-        <SvgIcon name="control-icon-pump" size="16" fillColor="#2454FF" />
+        <SvgIcon :name="index === modelValue ? 'control-icon-pump-active' : 'control-icon-pump'" size="16" fillColor="#2454FF" />
         <span class="radio radio-active"></span>
       </div>
       <p class="text">{{ item.label }}</p>

src/views/control/components/BaseTitle.vue

@@ -14,12 +14,11 @@ defineProps({
 </script>
 
 <template>
-  <div class="header" :style="[{ 'border-bottom': type === 'first' ? '1px solid #eee' : 'none' }]">
+  <div class="header">
     <div class="title">
       <svg xmlns="http://www.w3.org/2000/svg" width="8" height="24" viewBox="0 0 8 24" fill="none" v-if="type === 'first'">
         <path d="M0 6.86197V3.24507L4.21274 0H7.11111L4.45741 24H1.35684L4.01053 3.85352L0 6.86197Z" fill="#2454FF" />
       </svg>
-
       <svg xmlns="http://www.w3.org/2000/svg" width="12" height="24" viewBox="0 0 12 24" fill="none" v-else>
         <path d="M7.74366 10.4333C8.43696 9.03333 8.78361 7.76667 8.78361 6.6V6.1C8.78361 5.06667 8.58552 4.26667 8.16459 3.7C7.74366 3.13333 7.19892 2.83333 6.48086 2.83333C5.7628 2.83333 5.21807 3.1 4.8219 3.66667C4.42573 4.23333 4.22764 5.1 4.22764 6.23333V7.16667H1.94966V6.1C1.94966 4.26667 2.37059 2.8 3.18769 1.66667C4.02956 0.566667 5.14379 0 6.53039 0C7.42177 0 8.23887 0.266667 8.93217 0.8C9.62547 1.3 10.1702 2.03333 10.5416 2.96667C10.9378 3.9 11.1111 4.93333 11.1111 6.03333V6.6C11.1111 7.6 10.9873 8.5 10.7149 9.4C10.4673 10.2667 10.0959 11.1667 9.57595 12.1L2.94652 21.1667H9.16145V24H0V21.6L7.74366 10.4333Z" fill="#2454FF"/>
       </svg>
@@ -37,7 +36,6 @@ defineProps({
   height: 75px;
   flex-shrink: 1;
   padding: 24px 16px 18px 16px;
-  border-bottom: 1px solid #EEE;
   color: #1A2029;
 
   .title {
@@ -52,6 +50,7 @@ defineProps({
       background: linear-gradient(90deg, rgba(36, 84, 255, 0.10) -0.94%, rgba(36, 84, 255, 0.00) 95.3%);
       font-size: 15px;
       font-weight: bold;
+      line-height: 24px
     }
   }