slibra-module-web/src/views/control/MedicinalView.vue

<script setup>
import { ref, onMounted, computed, unref } 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]);

// 编辑系数 - 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;
  }
  handleMedicateAmount();
}

const 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 ];
}

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);

  if ( tabActiveKey.value === 'worker' ) {
    const medicineNum = dataSourceParams.value.worker.medicineAmount;
    if ( medicineNum || medicineNum == 0 ) {
      updateNum.value = medicineNum;
      isVisibleUpdateInfo.value = true;
      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;
    message.warning("有新的投放方案, 请查看");
  }

  if ( type === 'onePool' && r1 != lastNum ) {
    updateNum.value = r1;
    isVisibleUpdateInfo.value = true;
    message.warning("有新的投放方案, 请查看");
  }

  if ( type === 'twoPool' && r2 != lastNum ) {
    updateNum.value = r2;
    isVisibleUpdateInfo.value = true;
    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, tdb,
      medicineAmount,
      addType,
      tytjTransientLL
    } = data;
 
    baseSourceParams.value = { 
      ...baseSourceParams.value,
      numberBeng, type,
      htfksd, jzxs, xzxs, kzxs, slfpxs, tydl, zhxs, sxps, yymd, zxqdll, tdb,
      addType
    };

    updateNum.value = medicineAmount;

    doseNum.value = medicineAmount;

    flowNum.value = tytjTransientLL;

    dataSourceParams.value[tabActiveKey.value] = data;
    
    columnData.value = columnData.value.map(item => {
      item.value = data[item.key];
      return item;
    })
  })

  // 获取实时数据
  controlApi.getNumValue().then(({ data }) => {

    Object.entries(data).forEach(([key, val]) => {
      data[key] = val;
    });
    // water实时数据
    waterConfigParams.value = data;

    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.hyXsyHYOne, value2: waterConfigParams.hyXsyHYTwo },
                            { label: '预测', value1: waterConfigParams.hyXsyYCOne, value2: 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.qyXsyHYOne, value2: 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.qyAdHYOne, value2: 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, value2: 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="建议使用默认值，非必要不修改">
                  <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>