feat: 更新界面

src/views/control-Old/MedicinalView-Old.vue

@@ -1,863 +0,0 @@
-<script setup>
-import { ref, onMounted, computed, unref, watch } from 'vue';
-import { NScrollbar, useMessage, NTabs, NTabPane, c } from 'naive-ui';
-import { TheChatView } from '@/components';
-import { controlApi } from "@/api/control";
-import BaseTitle from './components/BaseTitle.vue';
-import BaseRadioCard from './components/BaseRadioCard.vue';
-import BaseCard from './components/BaseCard.vue';
-import BaseChooseItem from './components/BaseChooseItem.vue';
-import BaseInput from './components/BaseInput.vue';
-import TheResultPanel from './components/TheResultPanel.vue';
-import TheEchartPanel from './components/TheEchartPanel.vue';
-
-const message = useMessage();
-const isVisibleBtn = ref(true);
-const isVisibleUpdateInfo = ref(false);
-const systemStatus = ref(0);
-
-const columnData = ref([
-  { label: '后反馈设定', key: 'htfksd', value: '' },
-  { label: '基准系数', key: 'jzxs', value: '' },
-  { label: '修正系数', key: 'xzxs', value: '' },
-  { label: '控制系数', key: 'kzxs', value: '' },
-  { label: '水量分配系数', key: 'slfpxs', value: '' },
-  { label: '碳源当量', key: 'tydl', value: '' },
-  { label: '转换系数', key: 'zhxs', value: '' },
-  { label: '稀释倍数', key: 'sxps', value: '' },
-  { label: '药剂密度', key: 'yymd', value: '' },
-  { label: '最小启动流量', key: 'zxqdll', value: '' },
-  { label: '碳氮比', key: 'tdb', value: '' }
-])
-
-const doseNum = ref(null);
-const flowNum = ref(null);
-const updateNum = ref(null);
-
-const tabKeyEnum = {
-  0: 'auto',
-  1: 'onePool',
-  2: 'twoPool',
-  3: 'worker'
-}
-
-// water实时数据
-const waterConfigParams = ref({});
-
-// 基础数据
-const dataSourceParams = ref({
-  auto: {},
-  onePool: {},
-  twoPool: {},
-  worker: {
-    medicineAmount: null
-  }
-})
-
-// 系数
-const baseSourceParams = ref({
-  numberBeng: 0,
-  type: 0
-})
-
-// 当前Tab选中的key
-const tabActiveKey = computed(() => tabKeyEnum[baseSourceParams.value.type]);
-// 计算碳氮比
-const tdbNum = computed(() => {
-  const type = tabActiveKey.value;
-
-  const [ r1, r2, rOne, rTwo] = getTotalNum();
- 
-  const { 
-    jsLlOne, jsLlTwo,
-    jsCodOne, jsCodTwo,
-    jsTnOne, jsTnTwo
-  } = dataSourceParams.value[type];
-
-  const {
-    tydl, zhxs
-  } = baseSourceParams.value
- 
-  if ( type === 'auto' || type === 'worker' ) {
-    const rNum = Math.max( r1, r2 );
-    const jsll = rNum == r1 ? jsLlOne: jsLlTwo;
-    const cod = rNum == r1 ? jsCodOne: jsCodTwo;
-    const jsTn = rNum == r1 ? jsTnOne: jsTnTwo;
-    const n = rNum == r1 ? rOne : rOne
-    return Number(((n*1000/jsll*tydl+cod*zhxs*tydl)/jsTn).toFixed(2));
-  }
-  if ( type === 'onePool' ) {
-    return Number(((rOne*1000/jsLlOne*tydl+jsCodOne*zhxs*tydl)/jsTnOne).toFixed(2));
-  }
-  if ( type === 'twoPool' ) {
-    return Number(((rTwo*1000/jsLlTwo*tydl+jsCodTwo*zhxs*tydl)/jsTnTwo).toFixed(2));
-  }
-})
-watch(() => tdbNum.value , tdb => {
-  columnData.value[columnData.value.length - 1].value = tdb;
-})
-
-// 编辑系数 - confirm
-const onEditConfirm = () => {
-  isVisibleBtn.value = true;
-  columnData.value = columnData.value.map(item => {
-    Object.entries(baseSourceParams.value).forEach(([key, value]) => {
-      if (key === item.key) {
-        item.value = value;
-      }
-    })
-    return item;
-  })
-
-  handleMedicateAmount();
-}
-
-// 编辑系数 - 取消
-const onEditCancel = () => {
-  isVisibleBtn.value = true;
-
-  columnData.value.map(({ key, value }) => {
-    baseSourceParams.value[key] = value;
-  })
-}
-
-const onFinalResult = () => {
-  const addStatus = systemStatus.value === 0 ? 1 : 0;
-
-  controlApi.putSystemStatus({ addStatus });
-
-  systemStatus.value = addStatus;
-
-  message.warning(addStatus === 0 ? '当前投药状态：已停用' : '当前投药状态：投放中');
-
-}
-
-const onUpdateTab = (index) => {
-  const currentData = dataSourceParams.value[tabKeyEnum[index]];
-  baseSourceParams.value.type = index;
-  if ( !Object.keys(currentData).length ) {
-    isVisibleUpdateInfo.value = false;
-    return;
-  }
-  isVisibleBtn.value = true;
-  handleMedicateAmount();
-}
-
-function getTotalNum() {
-  const {
-    hycXsyOne = 0, hycXsyTwo = 0,
-    qycAdOne = 0, qycAdTwo = 0,
-    qycYxyOne = 0, qycYxyTwo = 0,
-    jsLlOne = 0, jsLlTwo = 0,
-    jsCodOne = 0, jsCodTwo = 0
-  } = dataSourceParams.value[tabActiveKey.value];
-
-  const {
-    htfksd, xzxs, kzxs, slfpxs, zhxs, tydl, jzxs, yymd, sxps
-  } = baseSourceParams.value;
-
-  const rOne1 = (((2*hycXsyOne-htfksd)+((qycAdOne+qycYxyOne)*xzxs-htfksd))*(jzxs-1))*(jsLlOne*slfpxs)/1000;
-  const rOne2 = (rOne1*kzxs-(jsLlOne*slfpxs*jsCodOne*zhxs/1000))/tydl;
-  const rOne3 = rOne2/yymd/1000*sxps
-
-  const rTwo1 = (((2*hycXsyTwo-htfksd)+((qycAdTwo+qycYxyTwo)*xzxs-htfksd))*(jzxs-1))*(jsLlTwo*slfpxs)/1000;
-  const rTwo2 = (rTwo1*kzxs-(jsLlTwo*slfpxs*jsCodTwo*zhxs/1000))/tydl;
-  const rTwo3 = rTwo2/yymd/1000*sxps
-
-  const r1 = Number((rOne3 < 0 || !rOne3) ? 0 : rOne3.toFixed(3)) || 0;
-  const r2 = Number((rTwo3 < 0 || !rTwo3) ? 0 : rTwo3.toFixed(3)) || 0;
-
-  return [ r1, r2, rOne2, rTwo2 ];
-}
-
-const onConfirmUpdate = async () => {
-  await controlApi.postAddRecord({
-    ...dataSourceParams.value[tabKeyEnum[baseSourceParams.value.type]],
-    ...baseSourceParams.value,
-  });
-
-  isVisibleUpdateInfo.value = false;
-
-  message.success("系统加药量，更新成功");
-
-  doseNum.value = updateNum.value;
-}
-
-// 更新投药结果
-const handleMedicateAmount = () => {
-  const type = tabActiveKey.value;
-  const lastNum = unref(updateNum);
-  const tdb = tdbNum.value;
-
-  if ( type === 'worker' ) {
-    const medicineNum = dataSourceParams.value.worker.medicineAmount;
-    if ( medicineNum || medicineNum == 0 ) {
-      updateNum.value = medicineNum;
-      isVisibleUpdateInfo.value = true;
-      baseSourceParams.value.tdb = tdb;
-      message.warning("有新投放方案, 请查看")
-    } else {
-      updateNum.value = null;
-      isVisibleUpdateInfo.value = false;
-    }
-    return;
-  }
-
-  const [r1, r2] = getTotalNum();
-  const maxR = Math.max( r1, r2 );
-
-  if ( type === 'auto' && maxR !== lastNum) {
-    updateNum.value = maxR;
-    isVisibleUpdateInfo.value = true;
-    baseSourceParams.value.tdb = tdb;
-    message.warning("有新的投放方案, 请查看");
-  }
-
-  if ( type === 'onePool' && r1 != lastNum) {
-    updateNum.value = r1;
-    isVisibleUpdateInfo.value = true;
-    baseSourceParams.value.tdb = tdb;
-    message.warning("有新的投放方案, 请查看");
-  }
-
-  if ( type === 'twoPool' && r2 != lastNum ) {
-    updateNum.value = r2;
-    isVisibleUpdateInfo.value = true;
-    baseSourceParams.value.tdb = tdb;
-    message.warning("有新的投放方案, 请查看");
-  }
-
-}
-
-onMounted(async () => {
-  // 获取最后一条记录  getSystemStatus
-  await controlApi.getBaseData().then(({ data }) => {
-    const {
-      numberBeng = 0, type = 0,
-      htfksd, jzxs, xzxs, kzxs, slfpxs, tydl, zhxs, sxps, yymd, zxqdll,
-      medicineAmount,
-      addType,
-      tytjTransientLL
-    } = data;
- 
-    baseSourceParams.value = { 
-      ...baseSourceParams.value,
-      numberBeng, type,
-      htfksd, jzxs, xzxs, kzxs, slfpxs, tydl, zhxs, sxps, yymd, zxqdll,
-      addType
-    };
-    
-    updateNum.value = medicineAmount;
-
-    doseNum.value = medicineAmount;
-
-    flowNum.value = tytjTransientLL;
-
-    dataSourceParams.value[tabActiveKey.value] = data;
-
-  })
-
- 
-  // 获取实时数据
-  controlApi.getNumValue().then(({ data }) => {
-
-    Object.entries(data).forEach(([key, val]) => {
-      data[key] = val;
-    });
-
-    // water实时数据
-    waterConfigParams.value = data;
-
-    // 重新计算碳氮比
-    const tdb = tdbNum.value;
-    baseSourceParams.value.tdb = tdb;
- 
-    columnData.value = columnData.value.map(item => {
-      item.value = item.key === 'tdb' ? tdb : dataSourceParams.value[tabActiveKey.value][item.key];
-      return item;
-    })
-
-    const params = {
-      jsLlType: 1,
-      jsLlOne: data.jslYB,
-      jsLlTwo: data.jslYB,
-      jsCodType: 1,
-      jsCodOne: data.jsCodYB,
-      jsCodTwo: data.jsCodYB,
-      hycXsyType: 1,
-      hycXsyOne: data.hyXsyHYOne,
-      hycXsyTwo: data.hyXsyHYTwo,
-      qycYxyType: 1,
-      qycYxyOne: data.qyXsyHYOne,
-      qycYxyTwo: data.qyXsyHYTwo,
-      qycAdType: 1,
-      qycAdOne: data.qyAdHYOne,
-      qycAdTwo: data.qyAdHYTwo,
-      jsTnType: 1,
-      jsTnOne: data.jsTnYB,
-      jsTnTwo: data.jsTnYB
-    }
-
-    Object.keys(dataSourceParams.value).forEach(key => {
-      const item = dataSourceParams.value[key];
-      if ( !Object.keys(item).length ) {
-        dataSourceParams.value[key] = { ...params };
-      }
-    })
-  })
-
-  // 获取是否允许投药开关
-  controlApi.getSystemStatus().then(({ data }) => {
-    // 0不允许  1允许
-    systemStatus.value = data;
-  });
-})
-
-</script>
-
-<template>
-  <section class="flex items-start h-full">
-    <TheChatView leftTitle="智适应投药" :isChatSlot="false" :isFooter="false">
-      <template #control>
-        <div class="control-container space-x-[12px]">
-          <div class="left-section">
-            <BaseTitle title="智能投加计算"></BaseTitle>
-            <n-scrollbar class="scrollbar" style="height: 100%;">
-              <div class="form-content">
-
-                <BaseCard title="选择加药泵">
-                  <BaseRadioCard v-model="baseSourceParams.numberBeng"></BaseRadioCard>
-                </BaseCard>
-
-                <BaseCard title="投加运行方式">
-                  <span class="status-bar">
-                    <i>{{ baseSourceParams.addType === 0 ? '启用智适应碳源投加' : '手动碳源投加' }}</i>
-                  </span>
-                </BaseCard>
-
-                <BaseCard title="选择池组手自动方式">
-                  <n-tabs justify-content="space-between" type="line" :bar-width="40"
-                    tab-style="min-width: 89px;" tab-class="custom-tab_item" animated :on-update:value="onUpdateTab" :value="baseSourceParams.type">
-                    <n-tab-pane :name="0" tab="自动">
-                      <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
-                          tab-key="auto"
-                          title="进水流量"
-                          unit="m³"
-                          isDouble
-                          @on-update="handleMedicateAmount"
-                          v-model:type="dataSourceParams.auto.jsLlType"
-                          v-model:value1="dataSourceParams.auto.jsLlOne"
-                          v-model:value2="dataSourceParams.auto.jsLlTwo"
-                          :btn-group="[
-                            { label: '手动', value1: '', value2: '' },
-                            { label: '仪表', value1: waterConfigParams.jslYB, value2: waterConfigParams.jslYB }
-                          ]"
-                        ></BaseChooseItem>
-                        <BaseChooseItem
-                          tab-key="auto"
-                          title="进水COD"
-                          unit="mg/L"
-                          isDouble
-                          @on-update="handleMedicateAmount"
-                          v-model:type="dataSourceParams.auto.jsCodType"
-                          v-model:value1="dataSourceParams.auto.jsCodOne"
-                          v-model:value2="dataSourceParams.auto.jsCodTwo"
-                          :btn-group="[
-                            { label: '手动', value1: '', value2: '' },
-                            { label: '仪表', value1: waterConfigParams.jsCodYB, value2: waterConfigParams.jsCodYB },
-                            { label: '化验', value1: waterConfigParams.jsCodHY, value2: waterConfigParams.jsCodHY }
-                          ]"
-                        ></BaseChooseItem>
-                        
-                        <BaseChooseItem
-                          tab-key="auto"
-                          title="好氧池硝酸盐"
-                          unit="mg/L"
-                          isDouble
-                          @on-update="handleMedicateAmount"
-                          v-model:type="dataSourceParams.auto.hycXsyType"
-                          v-model:value1="dataSourceParams.auto.hycXsyOne"
-                          v-model:value2="dataSourceParams.auto.hycXsyTwo"
-                          :btn-group="[
-                            { label: '手动', value1: '', value2: '' },
-                            { label: '化验', value1: waterConfigParams.hyXsyHYOne, value2: waterConfigParams.hyXsyHYTwo },
-                            { label: '预测', value1: waterConfigParams.hyXsyYCOne, value2: waterConfigParams.hyXsyYCTwo }
-                          ]"
-                        ></BaseChooseItem>
-                        <BaseChooseItem
-                          tab-key="auto"
-                          title="缺氧池硝酸盐"
-                          unit="mg/L"
-                          isDouble
-                          @on-update="handleMedicateAmount"
-                          v-model:type="dataSourceParams.auto.qycYxyType"
-                          v-model:value1="dataSourceParams.auto.qycYxyOne"
-                          v-model:value2="dataSourceParams.auto.qycYxyTwo"
-                          :btn-group="[
-                            { label: '手动', value1: '', value2: '' },
-                            { label: '化验', value1: waterConfigParams.qyXsyHYOne, value2: waterConfigParams.qyXsyHYTwo }
-                          ]"
-                        ></BaseChooseItem>
-                        <BaseChooseItem
-                          tab-key="auto"
-                          title="缺氧池氨氮"
-                          unit="mg/L"
-                          isDouble
-                          @on-update="handleMedicateAmount"
-                          v-model:type="dataSourceParams.auto.qycAdType"
-                          v-model:value1="dataSourceParams.auto.qycAdOne"
-                          v-model:value2="dataSourceParams.auto.qycAdTwo"
-                          :btn-group="[
-                            { label: '手动', value1: '', value2: '' },
-                            { label: '化验', value1: waterConfigParams.qyAdHYOne, value2: waterConfigParams.qyAdHYTwo }
-                          ]"
-                        ></BaseChooseItem>
-                        <BaseChooseItem
-                          tab-key="auto"
-                          title="进水总氮"
-                          unit="mg/L"
-                          isDouble
-                          @on-update="handleMedicateAmount"
-                          v-model:type="dataSourceParams.auto.jsTnType"
-                          v-model:value1="dataSourceParams.auto.jsTnOne"
-                          v-model:value2="dataSourceParams.auto.jsTnTwo"
-                          :btn-group="[
-                            { label: '手动', value1: '', value2: '' },
-                            { label: '仪表', value1: waterConfigParams.jsTnYB, value2: waterConfigParams.jsTnYB }
-                          ]"
-                        ></BaseChooseItem>
-                      </div>
-                    </n-tab-pane>
-
-                    <n-tab-pane :name="1" tab="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
-                          tab-key="onePool"
-                          title="进水流量"
-                          unit="m³"
-                          @on-update="handleMedicateAmount"
-                          v-model:type="dataSourceParams.onePool.jsLlType"
-                          v-model:value1="dataSourceParams.onePool.jsLlOne"
-                          :btn-group="[
-                            { label: '手动', value1: '', value2: '' },
-                            { label: '仪表', value1: waterConfigParams.jslYB, value2: waterConfigParams.jslYB }
-                          ]"
-                        ></BaseChooseItem>
-                        <BaseChooseItem
-                          tab-key="onePool"
-                          title="进水COD"
-                          unit="mg/L"
-                          @on-update="handleMedicateAmount"
-                          v-model:type="dataSourceParams.onePool.jsCodType"
-                          v-model:value1="dataSourceParams.onePool.jsCodOne"
-                          :btn-group="[
-                            { label: '手动', value1: '', value2: '' },
-                            { label: '仪表', value1: waterConfigParams.jsCodYB, value2: waterConfigParams.jsCodYB },
-                            { label: '化验', value1: waterConfigParams.jsCodHY, value2: waterConfigParams.jsCodHY }
-                          ]"
-                        ></BaseChooseItem>
-                        <BaseChooseItem
-                          tab-key="onePool"
-                          title="好氧池硝酸盐"
-                          unit="mg/L"
-                          @on-update="handleMedicateAmount"
-                          v-model:type="dataSourceParams.onePool.hycXsyType"
-                          v-model:value1="dataSourceParams.onePool.hycXsyOne"
-                          :btn-group="[
-                            { label: '手动', value1: '', value2: '' },
-                            { label: '化验', value1: waterConfigParams.hyXsyHYOne, value2: waterConfigParams.hyXsyHYTwo },
-                            { label: '预测', value1: waterConfigParams.hyXsyYCOne, value2: waterConfigParams.hyXsyYCTwo }
-                          ]"
-                        ></BaseChooseItem>
-                        <BaseChooseItem
-                          tab-key="onePool"
-                          title="缺氧池硝酸盐"
-                          unit="mg/L"
-                          @on-update="handleMedicateAmount"
-                          v-model:type="dataSourceParams.onePool.qycYxyType"
-                          v-model:value1="dataSourceParams.onePool.qycYxyOne"
-                          v-model:value2="dataSourceParams.onePool.qycYxyTwo"
-                          :btn-group="[
-                            { label: '手动', value1: '', value2: '' },
-                            { label: '化验', value1: waterConfigParams.qyXsyHYOne, value2: waterConfigParams.qyXsyHYTwo }
-                          ]"
-                        ></BaseChooseItem>
-                        <BaseChooseItem
-                          tab-key="onePool"
-                          title="缺氧池氨氮"
-                          unit="mg/L"
-                          @on-update="handleMedicateAmount"
-                          v-model:type="dataSourceParams.onePool.qycAdType"
-                          v-model:value1="dataSourceParams.onePool.qycAdOne"
-                          :btn-group="[
-                            { label: '手动', value1: '', value2: '' },
-                            { label: '化验', value1: waterConfigParams.qyAdHYOne, value2: waterConfigParams.qyAdHYTwo }
-                          ]"
-                        ></BaseChooseItem>
-                        <BaseChooseItem
-                          tab-key="onePool"
-                          title="进水总氮"
-                          unit="mg/L"
-                          @on-update="handleMedicateAmount"
-                          v-model:type="dataSourceParams.onePool.jsTnType"
-                          v-model:value1="dataSourceParams.onePool.jsTnOne"
-                          :btn-group="[
-                            { label: '手动', value1: '', value2: '' },
-                            { label: '仪表', value1: waterConfigParams.jsTnYB, value2: waterConfigParams.jsTnYB }
-                          ]"
-                        ></BaseChooseItem>
-                      </div>
-                    </n-tab-pane>
-
-                    <n-tab-pane :name="2" tab="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
-                          tab-key="twoPool"
-                          title="进水流量"
-                          unit="m³"
-                          @on-update="handleMedicateAmount"
-                          v-model:type="dataSourceParams.twoPool.jsLlType"
-                          v-model:value1="dataSourceParams.twoPool.jsLlTwo"
-                          :btn-group="[
-                            { label: '手动', value1: '', value2: '' },
-                            { label: '仪表', value1: waterConfigParams.jslYB, value2: waterConfigParams.jslYB }
-                          ]"
-                        ></BaseChooseItem>
-                        <BaseChooseItem
-                          tab-key="twoPool"
-                          title="进水COD"
-                          unit="mg/L"
-                          @on-update="handleMedicateAmount"
-                          v-model:type="dataSourceParams.twoPool.jsCodType"
-                          v-model:value1="dataSourceParams.twoPool.jsCodTwo"
-                          :btn-group="[
-                            { label: '手动', value1: '', value2: '' },
-                            { label: '仪表', value1: waterConfigParams.jsCodYB, value2: waterConfigParams.jsCodYB },
-                            { label: '化验', value1: waterConfigParams.jsCodHY, value2: waterConfigParams.jsCodHY }
-                          ]"
-                        ></BaseChooseItem>
-                        <BaseChooseItem
-                          tab-key="twoPool"
-                          title="好氧池硝酸盐"
-                          unit="mg/L"
-                          @on-update="handleMedicateAmount"
-                          v-model:type="dataSourceParams.twoPool.hycXsyType"
-                          v-model:value1="dataSourceParams.twoPool.hycXsyTwo"
-                          :btn-group="[
-                            { label: '手动', value1: '', value2: '' },
-                            { label: '化验', value1: waterConfigParams.hyXsyHYTwo },
-                            { label: '预测', value1: waterConfigParams.hyXsyYCTwo }
-                          ]"
-                        ></BaseChooseItem>
-                        <BaseChooseItem
-                          tab-key="twoPool"
-                          title="缺氧池硝酸盐"
-                          unit="mg/L"
-                          @on-update="handleMedicateAmount"
-                          v-model:type="dataSourceParams.twoPool.qycYxyType"
-                          v-model:value1="dataSourceParams.twoPool.qycYxyTwo"
-                          :btn-group="[
-                            { label: '手动', value1: '', value2: '' },
-                            { label: '化验', value1: waterConfigParams.qyXsyHYTwo }
-                          ]"
-                        ></BaseChooseItem>
-                        <BaseChooseItem
-                          tab-key="twoPool"
-                          title="缺氧池氨氮"
-                          unit="mg/L"
-                          @on-update="handleMedicateAmount"
-                          v-model:type="dataSourceParams.twoPool.qycAdType"
-                          v-model:value1="dataSourceParams.twoPool.qycAdTwo"
-                          :btn-group="[
-                            { label: '手动', value1: '', value2: '' },
-                            { label: '化验', value1: waterConfigParams.qyAdHYTwo }
-                          ]"
-                        ></BaseChooseItem>
-                        <BaseChooseItem
-                          tab-key="twoPool"
-                          title="进水总氮"
-                          unit="mg/L"
-                          @on-update="handleMedicateAmount"
-                          v-model:type="dataSourceParams.twoPool.jsTnType"
-                          v-model:value1="dataSourceParams.twoPool.jsTnTwo"
-                          :btn-group="[
-                            { label: '手动', value1: '', value2: '' },
-                            { label: '仪表', value1: waterConfigParams.jsTnYB }
-                          ]"
-                        ></BaseChooseItem>
-                      </div>
-                    </n-tab-pane>
-
-                    <n-tab-pane :name="3" tab="人工投放">
-                      <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"
-                            v-model="dataSourceParams.worker.medicineAmount"
-                            @on-blur="handleMedicateAmount"
-                          ></BaseInput>
-                        </div>
-                      </div>
-                    </n-tab-pane>
-                  </n-tabs>
-                </BaseCard>
-                <BaseCard title="设定参数系数" style="margin: 0" tips="建议使用默认值，非必要不修改" v-show="tabActiveKey !== 'worker'">
-                  <template #titleRight>
-                    <div>
-                      <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" stroke-linejoin="round" />
-                        </svg>
-                        <span>编辑</span>
-                      </div>
-                      <ul class="flex items-center text-[13px] space-x-[8px] cursor-pointer" v-show="!isVisibleBtn">
-                        <li class="cursor-pointer" @click="onEditConfirm" style="color: #2454FF">确定</li>
-                        <li class="cursor-pointer text-[#B0B7C0]" @click="onEditCancel">取消</li>
-                      </ul>
-                    </div>
-                  </template>
-               
-                  <ul class="data-source-list space-y-[12px]">
-                    <li class="data-soruce-item" v-for="item, index in columnData">
-                      <span>{{ item.label }}:</span>
-                      <span class="unit" v-show="isVisibleBtn">
-                        {{ item.value }}
-                        {{ index === 0 ? 'mg/L' : '' }}
-                      </span>
-                      <div style="width: 140px;" v-show="!isVisibleBtn">
-                        <BaseInput :unit="index === 0 ? 'mg/L' : ''" size='small' :isNeedFlotBtn="false"
-                          v-model="baseSourceParams[item.key]" isCenter placeholder="" :readonly="index === columnData.length - 1"></BaseInput>
-                      </div>
-                    </li>
-                  </ul>
-                </BaseCard>
-              </div>
-            </n-scrollbar>
-          </div>
-          <div class="right-section">
-            <TheResultPanel
-              :updateNum="updateNum"
-              :flowNum="flowNum"
-              :doseNum="doseNum"
-              :configuration-status="baseSourceParams.addType"
-              v-model:system="systemStatus"
-              v-model="isVisibleUpdateInfo"
-              @on-click="onFinalResult"
-              @on-update="onConfirmUpdate"
-            ></TheResultPanel>
-            <TheEchartPanel></TheEchartPanel> 
-          </div>
-        </div>
-      </template>
-    </TheChatView>
-  </section>
-</template>
-
-<style lang="scss" scoped>
-.control-container {
-  @include flex(x, start, start);
-  height: 100%;
-
-  .left-section {
-    display: flex;
-    flex-flow: column;
-    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%;
-    }
-
-    .form-content {
-      padding: 0 16px 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;
-        font-size: 12px;
-        color: #333;
-      }
-    }
-  }
-}
-
-.right-section {
-  width: 100%;
-  height: 100%;
-  border-radius: 8px;
-  background: #fff;
-  overflow: hidden;
-
-  // .top {
-  //   flex-shrink: 1;
-  //   height: 214px;
-  //   border-radius: 8px;
-  //   border: 0.5px solid #FFF;
-  //   background: linear-gradient(90deg, #E0E8FC 0%, #F2F4FF 100%);
-  // }
-
-  // .bottom {
-  //   height: 100%;
-  //   background: pink;
-  // }
-
-}
-
-
-// 通用区域的样式
-.btn {
-  width: 80px;
-  height: 32px;
-  border-radius: 4px;
-  border: 1px solid #D3D7DD;
-  text-align: center;
-  font-size: 14px;
-  line-height: 32px;
-  color: #1A2029;
-}
-
-.btn-primary {
-  border: 0;
-  background: var(--Linear, linear-gradient(270deg, #3BD6E3 0%, #019AFE 100%));
-  font-weight: bold;
-  color: #fff;
-}
-
-.btn-info {
-  width: 44px;
-  height: 28px;
-  border-radius: 4px;
-  border: 1px solid #D3D7DD;
-  background: #fff;
-  font-size: 12px;
-  text-align: center;
-  line-height: 28px;
-  color: #1A2029;
-  cursor: pointer;
-}
-
-.btn-info_active {
-  color: #2454FF;
-  border: 1px solid #2454FF;
-  background: #EBF0FF;
-}
-
-.radio {
-  display: block;
-  width: 12px;
-  height: 12px;
-  border-radius: 100%;
-  border: 1px solid #ccc;
-  cursor: pointer;
-}
-
-.radio_big {
-  width: 16px;
-  height: 16px;
-}
-
-.radio-active {
-  transition: all .1s;
-  border: 3px solid #2454FF;
-}
-
-.radio_big.radio-active {
-  border: 4px solid #2454FF;
-}
-</style>
-
-<style lang="scss">
-.custom-tab_item {
-  @include flex (x, center, center);
-  height: 35px;
-  border-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-Old/MedicinalView.vue

@@ -317,16 +317,367 @@ onMounted(async () => {
 
 <template>
   <section class="flex items-start h-full">
-    <TheChatView leftTitle="智适应碳源投加" :isChatSlot="false" :isFooter="false">
+    <TheChatView leftTitle="智适应投药" :isChatSlot="false" :isFooter="false">
       <template #control>
-        <div class="control-container space-y-[16px]">
-          <div class="arg-section">
+        <div class="control-container space-x-[12px]">
+          <div class="left-section">
             <BaseTitle title="智能投加计算"></BaseTitle>
-            <div class="content">
-              <div class="left-paramter"></div>
-            </div>
+            <n-scrollbar class="scrollbar" style="height: 100%;">
+              <div class="form-content">
+
+                <BaseCard title="选择加药泵">
+                  <BaseRadioCard v-model="baseSourceParams.numberBeng"></BaseRadioCard>
+                </BaseCard>
+
+                <BaseCard title="投加运行方式">
+                  <span class="status-bar">
+                    <i>{{ baseSourceParams.addType === 0 ? '启用智适应碳源投加' : '手动碳源投加' }}</i>
+                  </span>
+                </BaseCard>
+
+                <BaseCard title="选择池组手自动方式">
+                  <n-tabs justify-content="space-between" type="line" :bar-width="40"
+                    tab-style="min-width: 89px;" tab-class="custom-tab_item" animated :on-update:value="onUpdateTab" :value="baseSourceParams.type">
+                    <n-tab-pane :name="0" tab="自动">
+                      <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
+                          tab-key="auto"
+                          title="进水流量"
+                          unit="m³"
+                          isDouble
+                          @on-update="handleMedicateAmount"
+                          v-model:type="dataSourceParams.auto.jsLlType"
+                          v-model:value1="dataSourceParams.auto.jsLlOne"
+                          v-model:value2="dataSourceParams.auto.jsLlTwo"
+                          :btn-group="[
+                            { label: '手动', value1: '', value2: '' },
+                            { label: '仪表', value1: waterConfigParams.jslYB, value2: waterConfigParams.jslYB }
+                          ]"
+                        ></BaseChooseItem>
+                        <BaseChooseItem
+                          tab-key="auto"
+                          title="进水COD"
+                          unit="mg/L"
+                          isDouble
+                          @on-update="handleMedicateAmount"
+                          v-model:type="dataSourceParams.auto.jsCodType"
+                          v-model:value1="dataSourceParams.auto.jsCodOne"
+                          v-model:value2="dataSourceParams.auto.jsCodTwo"
+                          :btn-group="[
+                            { label: '手动', value1: '', value2: '' },
+                            { label: '仪表', value1: waterConfigParams.jsCodYB, value2: waterConfigParams.jsCodYB },
+                            { label: '化验', value1: waterConfigParams.jsCodHY, value2: waterConfigParams.jsCodHY }
+                          ]"
+                        ></BaseChooseItem>
+                        
+                        <BaseChooseItem
+                          tab-key="auto"
+                          title="好氧池硝酸盐"
+                          unit="mg/L"
+                          isDouble
+                          @on-update="handleMedicateAmount"
+                          v-model:type="dataSourceParams.auto.hycXsyType"
+                          v-model:value1="dataSourceParams.auto.hycXsyOne"
+                          v-model:value2="dataSourceParams.auto.hycXsyTwo"
+                          :btn-group="[
+                            { label: '手动', value1: '', value2: '' },
+                            { label: '化验', value1: waterConfigParams.hyXsyHYOne, value2: waterConfigParams.hyXsyHYTwo },
+                            { label: '预测', value1: waterConfigParams.hyXsyYCOne, value2: waterConfigParams.hyXsyYCTwo }
+                          ]"
+                        ></BaseChooseItem>
+                        <BaseChooseItem
+                          tab-key="auto"
+                          title="缺氧池硝酸盐"
+                          unit="mg/L"
+                          isDouble
+                          @on-update="handleMedicateAmount"
+                          v-model:type="dataSourceParams.auto.qycYxyType"
+                          v-model:value1="dataSourceParams.auto.qycYxyOne"
+                          v-model:value2="dataSourceParams.auto.qycYxyTwo"
+                          :btn-group="[
+                            { label: '手动', value1: '', value2: '' },
+                            { label: '化验', value1: waterConfigParams.qyXsyHYOne, value2: waterConfigParams.qyXsyHYTwo }
+                          ]"
+                        ></BaseChooseItem>
+                        <BaseChooseItem
+                          tab-key="auto"
+                          title="缺氧池氨氮"
+                          unit="mg/L"
+                          isDouble
+                          @on-update="handleMedicateAmount"
+                          v-model:type="dataSourceParams.auto.qycAdType"
+                          v-model:value1="dataSourceParams.auto.qycAdOne"
+                          v-model:value2="dataSourceParams.auto.qycAdTwo"
+                          :btn-group="[
+                            { label: '手动', value1: '', value2: '' },
+                            { label: '化验', value1: waterConfigParams.qyAdHYOne, value2: waterConfigParams.qyAdHYTwo }
+                          ]"
+                        ></BaseChooseItem>
+                        <BaseChooseItem
+                          tab-key="auto"
+                          title="进水总氮"
+                          unit="mg/L"
+                          isDouble
+                          @on-update="handleMedicateAmount"
+                          v-model:type="dataSourceParams.auto.jsTnType"
+                          v-model:value1="dataSourceParams.auto.jsTnOne"
+                          v-model:value2="dataSourceParams.auto.jsTnTwo"
+                          :btn-group="[
+                            { label: '手动', value1: '', value2: '' },
+                            { label: '仪表', value1: waterConfigParams.jsTnYB, value2: waterConfigParams.jsTnYB }
+                          ]"
+                        ></BaseChooseItem>
+                      </div>
+                    </n-tab-pane>
+
+                    <n-tab-pane :name="1" tab="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
+                          tab-key="onePool"
+                          title="进水流量"
+                          unit="m³"
+                          @on-update="handleMedicateAmount"
+                          v-model:type="dataSourceParams.onePool.jsLlType"
+                          v-model:value1="dataSourceParams.onePool.jsLlOne"
+                          :btn-group="[
+                            { label: '手动', value1: '', value2: '' },
+                            { label: '仪表', value1: waterConfigParams.jslYB, value2: waterConfigParams.jslYB }
+                          ]"
+                        ></BaseChooseItem>
+                        <BaseChooseItem
+                          tab-key="onePool"
+                          title="进水COD"
+                          unit="mg/L"
+                          @on-update="handleMedicateAmount"
+                          v-model:type="dataSourceParams.onePool.jsCodType"
+                          v-model:value1="dataSourceParams.onePool.jsCodOne"
+                          :btn-group="[
+                            { label: '手动', value1: '', value2: '' },
+                            { label: '仪表', value1: waterConfigParams.jsCodYB, value2: waterConfigParams.jsCodYB },
+                            { label: '化验', value1: waterConfigParams.jsCodHY, value2: waterConfigParams.jsCodHY }
+                          ]"
+                        ></BaseChooseItem>
+                        <BaseChooseItem
+                          tab-key="onePool"
+                          title="好氧池硝酸盐"
+                          unit="mg/L"
+                          @on-update="handleMedicateAmount"
+                          v-model:type="dataSourceParams.onePool.hycXsyType"
+                          v-model:value1="dataSourceParams.onePool.hycXsyOne"
+                          :btn-group="[
+                            { label: '手动', value1: '', value2: '' },
+                            { label: '化验', value1: waterConfigParams.hyXsyHYOne, value2: waterConfigParams.hyXsyHYTwo },
+                            { label: '预测', value1: waterConfigParams.hyXsyYCOne, value2: waterConfigParams.hyXsyYCTwo }
+                          ]"
+                        ></BaseChooseItem>
+                        <BaseChooseItem
+                          tab-key="onePool"
+                          title="缺氧池硝酸盐"
+                          unit="mg/L"
+                          @on-update="handleMedicateAmount"
+                          v-model:type="dataSourceParams.onePool.qycYxyType"
+                          v-model:value1="dataSourceParams.onePool.qycYxyOne"
+                          v-model:value2="dataSourceParams.onePool.qycYxyTwo"
+                          :btn-group="[
+                            { label: '手动', value1: '', value2: '' },
+                            { label: '化验', value1: waterConfigParams.qyXsyHYOne, value2: waterConfigParams.qyXsyHYTwo }
+                          ]"
+                        ></BaseChooseItem>
+                        <BaseChooseItem
+                          tab-key="onePool"
+                          title="缺氧池氨氮"
+                          unit="mg/L"
+                          @on-update="handleMedicateAmount"
+                          v-model:type="dataSourceParams.onePool.qycAdType"
+                          v-model:value1="dataSourceParams.onePool.qycAdOne"
+                          :btn-group="[
+                            { label: '手动', value1: '', value2: '' },
+                            { label: '化验', value1: waterConfigParams.qyAdHYOne, value2: waterConfigParams.qyAdHYTwo }
+                          ]"
+                        ></BaseChooseItem>
+                        <BaseChooseItem
+                          tab-key="onePool"
+                          title="进水总氮"
+                          unit="mg/L"
+                          @on-update="handleMedicateAmount"
+                          v-model:type="dataSourceParams.onePool.jsTnType"
+                          v-model:value1="dataSourceParams.onePool.jsTnOne"
+                          :btn-group="[
+                            { label: '手动', value1: '', value2: '' },
+                            { label: '仪表', value1: waterConfigParams.jsTnYB, value2: waterConfigParams.jsTnYB }
+                          ]"
+                        ></BaseChooseItem>
+                      </div>
+                    </n-tab-pane>
+
+                    <n-tab-pane :name="2" tab="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
+                          tab-key="twoPool"
+                          title="进水流量"
+                          unit="m³"
+                          @on-update="handleMedicateAmount"
+                          v-model:type="dataSourceParams.twoPool.jsLlType"
+                          v-model:value1="dataSourceParams.twoPool.jsLlTwo"
+                          :btn-group="[
+                            { label: '手动', value1: '', value2: '' },
+                            { label: '仪表', value1: waterConfigParams.jslYB, value2: waterConfigParams.jslYB }
+                          ]"
+                        ></BaseChooseItem>
+                        <BaseChooseItem
+                          tab-key="twoPool"
+                          title="进水COD"
+                          unit="mg/L"
+                          @on-update="handleMedicateAmount"
+                          v-model:type="dataSourceParams.twoPool.jsCodType"
+                          v-model:value1="dataSourceParams.twoPool.jsCodTwo"
+                          :btn-group="[
+                            { label: '手动', value1: '', value2: '' },
+                            { label: '仪表', value1: waterConfigParams.jsCodYB, value2: waterConfigParams.jsCodYB },
+                            { label: '化验', value1: waterConfigParams.jsCodHY, value2: waterConfigParams.jsCodHY }
+                          ]"
+                        ></BaseChooseItem>
+                        <BaseChooseItem
+                          tab-key="twoPool"
+                          title="好氧池硝酸盐"
+                          unit="mg/L"
+                          @on-update="handleMedicateAmount"
+                          v-model:type="dataSourceParams.twoPool.hycXsyType"
+                          v-model:value1="dataSourceParams.twoPool.hycXsyTwo"
+                          :btn-group="[
+                            { label: '手动', value1: '', value2: '' },
+                            { label: '化验', value1: waterConfigParams.hyXsyHYTwo },
+                            { label: '预测', value1: waterConfigParams.hyXsyYCTwo }
+                          ]"
+                        ></BaseChooseItem>
+                        <BaseChooseItem
+                          tab-key="twoPool"
+                          title="缺氧池硝酸盐"
+                          unit="mg/L"
+                          @on-update="handleMedicateAmount"
+                          v-model:type="dataSourceParams.twoPool.qycYxyType"
+                          v-model:value1="dataSourceParams.twoPool.qycYxyTwo"
+                          :btn-group="[
+                            { label: '手动', value1: '', value2: '' },
+                            { label: '化验', value1: waterConfigParams.qyXsyHYTwo }
+                          ]"
+                        ></BaseChooseItem>
+                        <BaseChooseItem
+                          tab-key="twoPool"
+                          title="缺氧池氨氮"
+                          unit="mg/L"
+                          @on-update="handleMedicateAmount"
+                          v-model:type="dataSourceParams.twoPool.qycAdType"
+                          v-model:value1="dataSourceParams.twoPool.qycAdTwo"
+                          :btn-group="[
+                            { label: '手动', value1: '', value2: '' },
+                            { label: '化验', value1: waterConfigParams.qyAdHYTwo }
+                          ]"
+                        ></BaseChooseItem>
+                        <BaseChooseItem
+                          tab-key="twoPool"
+                          title="进水总氮"
+                          unit="mg/L"
+                          @on-update="handleMedicateAmount"
+                          v-model:type="dataSourceParams.twoPool.jsTnType"
+                          v-model:value1="dataSourceParams.twoPool.jsTnTwo"
+                          :btn-group="[
+                            { label: '手动', value1: '', value2: '' },
+                            { label: '仪表', value1: waterConfigParams.jsTnYB }
+                          ]"
+                        ></BaseChooseItem>
+                      </div>
+                    </n-tab-pane>
+
+                    <n-tab-pane :name="3" tab="人工投放">
+                      <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"
+                            v-model="dataSourceParams.worker.medicineAmount"
+                            @on-blur="handleMedicateAmount"
+                          ></BaseInput>
+                        </div>
+                      </div>
+                    </n-tab-pane>
+                  </n-tabs>
+                </BaseCard>
+                <BaseCard title="设定参数系数" style="margin: 0" tips="建议使用默认值，非必要不修改" v-show="tabActiveKey !== 'worker'">
+                  <template #titleRight>
+                    <div>
+                      <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" stroke-linejoin="round" />
+                        </svg>
+                        <span>编辑</span>
+                      </div>
+                      <ul class="flex items-center text-[13px] space-x-[8px] cursor-pointer" v-show="!isVisibleBtn">
+                        <li class="cursor-pointer" @click="onEditConfirm" style="color: #2454FF">确定</li>
+                        <li class="cursor-pointer text-[#B0B7C0]" @click="onEditCancel">取消</li>
+                      </ul>
+                    </div>
+                  </template>
+               
+                  <ul class="data-source-list space-y-[12px]">
+                    <li class="data-soruce-item" v-for="item, index in columnData">
+                      <span>{{ item.label }}:</span>
+                      <span class="unit" v-show="isVisibleBtn">
+                        {{ item.value }}
+                        {{ index === 0 ? 'mg/L' : '' }}
+                      </span>
+                      <div style="width: 140px;" v-show="!isVisibleBtn">
+                        <BaseInput :unit="index === 0 ? 'mg/L' : ''" size='small' :isNeedFlotBtn="false"
+                          v-model="baseSourceParams[item.key]" isCenter placeholder="" :readonly="index === columnData.length - 1"></BaseInput>
+                      </div>
+                    </li>
+                  </ul>
+                </BaseCard>
+              </div>
+            </n-scrollbar>
+          </div>
+          <div class="right-section">
+            <TheResultPanel
+              :updateNum="updateNum"
+              :flowNum="flowNum"
+              :doseNum="doseNum"
+              :configuration-status="baseSourceParams.addType"
+              v-model:system="systemStatus"
+              v-model="isVisibleUpdateInfo"
+              @on-click="onFinalResult"
+              @on-update="onConfirmUpdate"
+            ></TheResultPanel>
+            <TheEchartPanel></TheEchartPanel> 
           </div>
-          <div class="echart-section"></div>
         </div>
       </template>
     </TheChatView>
@@ -335,38 +686,9 @@ onMounted(async () => {
 
 <style lang="scss" scoped>
 .control-container {
-  // @include flex(x, start, start);
+  @include flex(x, start, start);
   height: 100%;
 
-  .arg-section {
-    height: 57%;
-    padding: 16px 14px;
-    border: 1px solid #fff;
-    border-radius: 10px;
-    background: url(@/assets/images/control/bg-top.png) left center no-repeat;
-    background-size: 878px 100% ;
-    display: flex;
-    flex-flow: column;
-
-    .content {
-      height: 100%;
-      padding-top: 16px;
-      .left-paramter {
-        width: 338px;
-        height: 100%;
-        border: 1px solid #fff;
-        border-radius: 10px;
-        background: rgba(255, 255, 255, 0.20);
-        backdrop-filter: blur(5px);
-      }
-    }
-  }
-
-  .echart-section {
-    height: 43%;
-    background: red;
-  }
-
   .left-section {
     display: flex;
     flex-flow: column;

src/views/control/MedicinalView.vue

@@ -385,7 +385,7 @@ onMounted(async () => {
               </div>
               <div class="result-content">
                 <div class="number_card space-x-[72px]">
-                  <NumberPanel></NumberPanel>
+                  <NumberPanel direction="left"></NumberPanel>
                   <!-- <div class="left">
                     <div class="animate-card left-animate">
                       <span class="number">5.9</span>

src/views/control/NumberPanel.vue

@@ -1,11 +1,15 @@
 <script setup>
-
+const props = defineProps({
+  direction: {
+    type: String,
+  },
+})
 </script>
 
 <template>
   <div class="number-panel-container space-y-[6px]">
-    <div class="number-panel-inner direction-left"></div>
-    <div>
+    <div :class="['number-panel-inner', 'direction-' + direction ]"></div>
+    <div class="sub-title">
       <span>智能控制系数</span>
     </div>
   </div>
@@ -22,11 +26,17 @@
     height: 164px;
   }
 
+  .sub-title {
+    width: 100%;
+    padding-right: 20px;
+    text-align: center;
+  }
+
   .direction-left {
     background: url("@/assets/images/control/line-left-1.svg") left center no-repeat,
     url("@/assets/images/control/line-left-2.svg") right bottom no-repeat,
     url("@/assets/images/control/line-left-3.svg") right bottom no-repeat;
-    background: red;
+    // background: red;
   }
 }
 </style>