perf(views): 编写"算法管理"模块“算法查询”组件

src/views/algorithm-manage/AlgorithmManage.vue

@@ -1,445 +1,197 @@
 <script setup lang="ts">
-import { onMounted, ref, useTemplateRef } from 'vue';
-import dayjs, { Dayjs } from 'dayjs';
+import { ref, useTemplateRef } from 'vue';
 
 import DeviceGroupSelect from '@/components/DeviceGroupSelect.vue';
-import SvgIcon from '@/components/SvgIcon.vue';
-import { useDictData } from '@/hooks/dict-data';
 import { useRequest } from '@/hooks/request';
 import { t } from '@/i18n';
-import { addAlgorithmConfigUpdate, getAlgorithmConfigInfo } from '@/api';
-import { DictCode } from '@/constants';
+import { getAlgorithmConfigInfo } from '@/api';
 
-import EquipmentControl from './EquipmentControl.vue';
-import MonthSetting from './MonthSetting.vue';
-import SetInterval from './SetInterval.vue';
+import AlgorithmEditing from './AlgorithmEditing.vue';
 
-import type { FormInstance, Rule } from 'ant-design-vue/es/form';
-import type { AlgorithmForm, ChillersItem, TemperatureRange, TemperatureRangeItem } from '@/types';
+import type { AlgorithmConfigInfo } from '@/types';
 
-const { dictData: algTempCtrlMinStep, getDictData: getAlgTempCtrlMinStep } = useDictData(DictCode.AlgTempCtrlMinStep);
-const { dictData: algTempHumCollectPeriod, getDictData: getAlgTempHumCollectPeriod } = useDictData(
-  DictCode.AlgTempHumCollectPeriod,
-);
-const { dictData: algWtTempCtrlMode, getDictData: getAlgWtTempCtrlMode } = useDictData(DictCode.AlgWtTempCtrlMode);
-const { dictData: algAlways, getDictData: getAlgAlways } = useDictData(DictCode.AlgAlways);
-const { dictData: algWtTempSetStep, getDictData: getAlgWtTempSetStep } = useDictData(DictCode.AlgWtTempSetStep);
-
-const formRef = ref<FormInstance>();
-const monthSettingRefs = useTemplateRef('monthSetting');
-const setIntervalRefs = ref<InstanceType<typeof SetInterval>[]>([]);
-const equipmentControlRefs = ref<InstanceType<typeof EquipmentControl>[]>([]);
-
-const { handleRequest } = useRequest();
+const algorithmConfigInfo = ref<AlgorithmConfigInfo>();
+const algorithmEditingRef = useTemplateRef('algorithmEditing');
 const activeKey = ref<string[]>(['intelligentControl', 'functionSettings']);
 const customStyle = 'border-radius: 4px;;border: 0;background: #F5F6F7;margin-bottom: 4px';
-const analysisOpen = ref<boolean>(false);
-const setOpen = ref<boolean>(false);
-const temperatureSettingValue = ref<string>('');
-const analysisTypeDisplay = ref<number>(0);
-const coolingPipeDynamicOffsetDisplay = ref<number>(0);
-const coolingPipeDynamicSetDisplay = ref<number>(0);
-const coolingPipeDynamicDeadZoneDisplay = ref<number>(0);
-const coolingPipeDynamicLowerDisplay = ref<number>(0);
-const coolingPipeDynamicUpperDisplay = ref<number>(0);
-const temperatureRangeList = ref<TemperatureRange[]>([]);
-const chillersList = ref<ChillersItem[]>([]);
-const algorithmId = ref<number>();
-const algorithmForm = ref<AlgorithmForm>({
-  enabled: false,
-  sendCtrlCmd: true,
-  msgBox: true,
-  tempRiseCtrlPeriod: 10,
-  tempReductionCtrlPeriod: 3,
-  minCtrlStep: '',
-  intelligentMode: 0,
-  controlBasis: 0,
-  period: 0,
-  tempSafetyMargin: 0,
-  humiditySafetyMargin: 0,
-  tempHumidityCollectPeriod: '',
-  waterSupplyTempSource: 0,
-  analysis: true,
-  analysisType: 0,
-  enableRefrigerationPipeDynamicSet: true,
-  enableCoolingPipeDynamicSet: false,
-  coolingPipeDynamicOffset: 0,
-  coolingPipeDynamicSet: 0,
-  coolingPipeDynamicDeadZone: 0,
-  coolingPipeDynamicLower: 0,
-  coolingPipeDynamicUpper: 0,
-});
-const addClick = () => {
-  temperatureRangeList.value.push({
-    time: undefined,
-    lower: 0,
-    upper: 0,
-  });
-};
-const deleteClick = (index: number) => {
-  temperatureRangeList.value.splice(index, 1);
-};
-const rules: Record<string, Rule[]> = {
-  sendCtrlCmd: [{ required: true, message: t('common.cannotEmpty'), trigger: 'change' }],
-  msgBox: [{ required: true, message: t('common.cannotEmpty'), trigger: 'change' }],
-  tempRiseCtrlPeriod: [{ required: true, message: t('common.cannotEmpty'), trigger: 'change' }],
-  tempReductionCtrlPeriod: [{ required: true, message: t('common.cannotEmpty'), trigger: 'change' }],
-  minCtrlStep: [{ required: true, message: t('common.cannotEmpty'), trigger: 'change' }],
-  intelligentMode: [{ required: true, message: t('common.cannotEmpty'), trigger: 'change' }],
-  controlBasis: [{ required: true, message: t('common.cannotEmpty'), trigger: 'change' }],
-  period: [{ required: true, message: t('common.cannotEmpty'), trigger: 'change' }],
-  tempSafetyMargin: [{ required: true, message: t('common.cannotEmpty'), trigger: 'change' }],
-  humiditySafetyMargin: [{ required: true, message: t('common.cannotEmpty'), trigger: 'change' }],
-  tempHumidityCollectPeriod: [{ required: true, message: t('common.cannotEmpty'), trigger: 'change' }],
-  waterSupplyTempSource: [{ required: true, message: t('common.cannotEmpty'), trigger: 'change' }],
+const editorAlgorithmShow = ref<boolean>(false);
+const monthList: string[] = ['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12'];
+const monthValue = ref<string[]>([]);
+const { handleRequest } = useRequest();
+const handleDevGroupChange = (id: number) => {
+  getAlgorithmConfig(id);
 };
-const handleDevGroupChange = (groupingId: number) => {
-  temperatureRangeList.value = [];
-  chillersList.value = [];
+const getAlgorithmConfig = (id: number) => {
   handleRequest(async () => {
-    const {
-      id: algId,
-      enabled,
-      sendCtrlCmd,
-      msgBox,
-      tempRiseCtrlPeriod,
-      minCtrlStep,
-      intelligentMode,
-      controlBasis,
-      period,
-      tempSafetyMargin,
-      humiditySafetyMargin,
-      tempHumidityCollectPeriod,
-      waterSupplyTempSource,
-      tempReductionCtrlPeriod,
-      analysis,
-      analysisType,
-      enableRefrigerationPipeDynamicSet,
-      enableCoolingPipeDynamicSet,
-      coolingPipeDynamicOffset,
-      coolingPipeDynamicSet,
-      coolingPipeDynamicDeadZone,
-      coolingPipeDynamicLower,
-      coolingPipeDynamicUpper,
-      chillers,
-      chilledWaterOutletTempRangeList,
-      chilledWaterOutletTempSet,
-    } = await getAlgorithmConfigInfo(groupingId);
-    algorithmId.value = algId;
-    Object.assign(algorithmForm.value, {
-      enabled,
-      sendCtrlCmd,
-      msgBox,
-      tempRiseCtrlPeriod,
-      tempReductionCtrlPeriod,
-      minCtrlStep: String(minCtrlStep),
-      intelligentMode,
-      controlBasis,
-      period,
-      tempSafetyMargin,
-      humiditySafetyMargin,
-      tempHumidityCollectPeriod: String(tempHumidityCollectPeriod),
-      waterSupplyTempSource,
-      analysis,
-      analysisType,
-      enableRefrigerationPipeDynamicSet,
-      enableCoolingPipeDynamicSet,
-      coolingPipeDynamicOffset,
-      coolingPipeDynamicSet,
-      coolingPipeDynamicDeadZone,
-      coolingPipeDynamicLower,
-      coolingPipeDynamicUpper,
-    });
-
-    analysisTypeDisplay.value = analysisType;
-    coolingPipeDynamicOffsetDisplay.value = coolingPipeDynamicOffset;
-    coolingPipeDynamicSetDisplay.value = coolingPipeDynamicSet;
-    coolingPipeDynamicDeadZoneDisplay.value = coolingPipeDynamicDeadZone;
-    coolingPipeDynamicLowerDisplay.value = coolingPipeDynamicLower;
-    coolingPipeDynamicUpperDisplay.value = coolingPipeDynamicUpper;
-    temperatureSettingValue.value = chilledWaterOutletTempSet;
-    chilledWaterOutletTempRangeList.forEach((item) => {
-      const { startTime, endTime, lower, upper } = item;
-      temperatureRangeList.value.push({
-        time: [dayjs(startTime, 'HH:mm'), dayjs(endTime, 'HH:mm')],
-        lower,
-        upper,
-      });
-    });
-    chillers.forEach((item) => {
-      const {
-        id,
-        devId,
-        waterTempControlMode,
-        continuous,
-        stopCompensate,
-        restartCompensate,
-        safeDiffPressureLower,
-        safeLoadLower,
-        waterTempStep,
-        deviceName,
-      } = item;
-      chillersList.value.push({
-        id,
-        algId,
-        devId,
-        waterTempControlMode: String(waterTempControlMode),
-        continuous: String(continuous),
-        stopCompensate,
-        restartCompensate,
-        safeDiffPressureLower,
-        safeLoadLower,
-        waterTempStep: String(waterTempStep),
-        deviceName,
-      });
-    });
+    algorithmConfigInfo.value = await getAlgorithmConfigInfo(id);
+    monthValue.value = algorithmConfigInfo.value.chilledWaterOutletTempSet.split(',');
+    algorithmEditingRef.value?.editorAlgorithmChange(algorithmConfigInfo.value);
   });
 };
-const analysisEditor = () => {
-  analysisTypeDisplay.value = algorithmForm.value.analysisType;
-  analysisOpen.value = true;
-};
-const setEditor = () => {
-  const {
-    coolingPipeDynamicOffset,
-    coolingPipeDynamicSet,
-    coolingPipeDynamicDeadZone,
-    coolingPipeDynamicLower,
-    coolingPipeDynamicUpper,
-  } = algorithmForm.value;
-  coolingPipeDynamicOffsetDisplay.value = coolingPipeDynamicOffset;
-  coolingPipeDynamicSetDisplay.value = coolingPipeDynamicSet;
-  coolingPipeDynamicDeadZoneDisplay.value = coolingPipeDynamicDeadZone;
-  coolingPipeDynamicLowerDisplay.value = coolingPipeDynamicLower;
-  coolingPipeDynamicUpperDisplay.value = coolingPipeDynamicUpper;
-  setOpen.value = true;
-};
-const okConfirm = () => {
-  algorithmForm.value.analysisType = analysisTypeDisplay.value;
-  analysisOpen.value = false;
+const editorAlgorithm = () => {
+  editorAlgorithmShow.value = true;
+  if (algorithmConfigInfo.value) {
+    algorithmEditingRef.value?.editorAlgorithmChange(algorithmConfigInfo.value);
+  }
 };
-const okSetConfirm = () => {
-  algorithmForm.value.coolingPipeDynamicOffset = coolingPipeDynamicOffsetDisplay.value;
-  algorithmForm.value.coolingPipeDynamicSet = coolingPipeDynamicSetDisplay.value;
-  algorithmForm.value.coolingPipeDynamicDeadZone = coolingPipeDynamicDeadZoneDisplay.value;
-  algorithmForm.value.coolingPipeDynamicLower = coolingPipeDynamicLowerDisplay.value;
-  algorithmForm.value.coolingPipeDynamicUpper = coolingPipeDynamicUpperDisplay.value;
-  setOpen.value = false;
+const confirmClick = (id: number) => {
+  getAlgorithmConfig(id);
+  editorAlgorithmShow.value = false;
 };
 
-// 添加格式转换
-const formatDate = (date: Dayjs) => date.format('HH:mm');
-
-const addAlgorithm = async () => {
-  try {
-    // 创建校验任务队列（包含所有子组件+父组件自身）
-    const allTasks = [
-      ...setIntervalRefs.value.map((c) => c.formRefSubmit()),
-      ...equipmentControlRefs.value.map((c) => c.formRefSubmit()),
-      formRef.value?.validate() || Promise.resolve(),
-      monthSettingRefs.value?.formRefSubmit(),
-    ];
-    // 并行执行所有校验（父+子）
-    await Promise.all(allTasks);
-    handleRequest(async () => {
-      const timeList: TemperatureRangeItem[] = [];
-      temperatureRangeList.value.forEach((item) => {
-        const { time, lower, upper } = item;
-
-        const data = time?.map(formatDate) || [];
-
-        timeList.push({
-          startTime: data[0],
-          endTime: data[1],
-          lower,
-          upper,
-        });
-      });
-
-      await addAlgorithmConfigUpdate({
-        ...algorithmForm.value,
-        id: algorithmId.value,
-        chillers: chillersList.value,
-        chilledWaterOutletTempRangeList: timeList,
-        chilledWaterOutletTempSet: monthSettingRefs.value ? monthSettingRefs.value.stringConversion() : '',
-      });
-    });
-  } catch {
-    console.log('存在验证未通过的表单');
-  }
+const cancelClick = () => {
+  editorAlgorithmShow.value = false;
 };
-
-onMounted(() => {
-  handleRequest(async () => {
-    await getAlgTempCtrlMinStep();
-    algorithmForm.value.minCtrlStep = algTempCtrlMinStep.value[0].dictEngValue;
-    await getAlgTempHumCollectPeriod();
-    algorithmForm.value.tempHumidityCollectPeriod = algTempHumCollectPeriod.value[0].dictEngValue;
-    await getAlgWtTempCtrlMode();
-    await getAlgAlways();
-    await getAlgWtTempSetStep();
-  });
-});
 </script>
 
 <template>
   <div>
-    <AFlex justify="space-between">
-      <div class="title-text">{{ $t('algorithmManage.algorithmConfiguration') }}</div>
-      <DeviceGroupSelect @change="handleDevGroupChange" />
+    <AFlex v-show="!editorAlgorithmShow" justify="space-between">
+      <AFlex align="center">
+        <div class="title-text">{{ $t('algorithmManage.algorithmConfiguration') }}</div>
+        <DeviceGroupSelect @change="handleDevGroupChange" />
+      </AFlex>
+      <AButton type="primary" @click="editorAlgorithm">
+        <AFlex align="center">
+          <SvgIcon style="margin-right: 4px" name="edit-o" />
+          <span> {{ t('common.editor') }} </span>
+        </AFlex>
+      </AButton>
     </AFlex>
-    <div class="algorithm-content">
+    <AlgorithmEditing
+      ref="algorithmEditing"
+      v-show="editorAlgorithmShow"
+      @confirmClick="confirmClick"
+      @cancelClick="cancelClick"
+    />
+    <div v-show="!editorAlgorithmShow" class="algorithm-content">
       <ACollapse v-model:active-key="activeKey" style="border: 0" collapsible="icon">
         <ACollapsePanel key="intelligentControl" :style="customStyle">
           <template #header>
             <AFlex align="center" class="header-heigth">
               <span class="header-text">{{ $t('algorithmManage.intelligentControlChilledWater') }}</span>
-              <ASwitch v-model:checked="algorithmForm.enabled" />
+
+              <AFlex
+                v-if="algorithmConfigInfo?.enabled === true"
+                justify="center"
+                align="center"
+                class="header-div open-div-color"
+              >
+                <div class="header-div-text open-text-color">{{ t('common.open') }}</div>
+              </AFlex>
+              <AFlex v-else ustify="center" justify="center" align="center" class="header-div off-div-color">
+                <div class="header-div-text off-text-color">{{ t('common.turnOff') }}</div>
+              </AFlex>
             </AFlex>
           </template>
-          <div>
-            <AForm
-              ref="formRef"
-              class="algorithm-form"
-              :model="algorithmForm"
-              label-align="left"
-              layout="vertical"
-              :rules="rules"
-            >
-              <AFlex class="flex-bottom" :gap="40">
-                <AFormItem :label="t('algorithmManage.controlInstruction')" name="sendCtrlCmd">
-                  <ARadioGroup v-model:value="algorithmForm.sendCtrlCmd">
-                    <ARadio class="radio-right" :value="true">{{ $t('common.yes') }}</ARadio>
-                    <ARadio :value="false">{{ $t('common.no') }}</ARadio>
-                  </ARadioGroup>
-                </AFormItem>
-                <AFormItem :label="$t('algorithmManage.popupReminder')" name="msgBox">
-                  <ARadioGroup v-model:value="algorithmForm.msgBox">
-                    <ARadio class="radio-right" :value="true">{{ $t('common.yes') }}</ARadio>
-                    <ARadio :value="false">{{ $t('common.no') }}</ARadio>
-                  </ARadioGroup>
-                </AFormItem>
-                <AFormItem :label="t('algorithmManage.regulationCycle')" name="tempRiseCtrlPeriod">
-                  <AInputNumber
-                    v-model:value="algorithmForm.tempRiseCtrlPeriod"
-                    class="input-width"
-                    addon-after="min"
-                    :min="1"
-                    :max="99999"
-                    :placeholder="t('common.pleaseEnter')"
-                  />
-                </AFormItem>
-                <AFormItem :label="t('algorithmManage.coolingOffPeriod')" name="tempReductionCtrlPeriod">
-                  <AInputNumber
-                    v-model:value="algorithmForm.tempReductionCtrlPeriod"
-                    class="input-width"
-                    addon-after="min"
-                    :min="1"
-                    :max="99999"
-                    :placeholder="t('common.pleaseEnter')"
-                  />
-                </AFormItem>
-                <AFormItem class="input-width" :label="t('algorithmManage.controlStepSize')" name="minCtrlStep">
-                  <ASelect
-                    v-model:value="algorithmForm.minCtrlStep"
-                    :options="algTempCtrlMinStep"
-                    :field-names="{ label: 'dictValue', value: 'dictEngValue' }"
-                    :placeholder="$t('common.plzSelect')"
-                  />
-                </AFormItem>
-              </AFlex>
-              <div class="analysis-style interval-style">
-                <span>* </span>{{ $t('algorithmManage.effluentInterval') }}
+          <AFlex class="intelligent-style">
+            <div class="intelligent-width">{{ t('algorithmManage.controlInstruction') }}</div>
+            <div v-if="algorithmConfigInfo?.sendCtrlCmd === true">{{ t('common.yes') }}</div>
+            <div v-else>{{ t('common.no') }}</div>
+          </AFlex>
+          <AFlex class="intelligent-style">
+            <div class="intelligent-width">{{ t('algorithmManage.popupReminder') }}</div>
+            <div v-if="algorithmConfigInfo?.msgBox === true">{{ t('common.yes') }}</div>
+            <div v-else>{{ t('common.no') }}</div>
+          </AFlex>
+          <AFlex class="intelligent-style">
+            <div class="intelligent-width">{{ t('algorithmManage.regulationCycle') }}</div>
+            <div>{{ algorithmConfigInfo?.tempRiseCtrlPeriod }}min</div>
+          </AFlex>
+          <AFlex class="intelligent-style">
+            <div class="intelligent-width">{{ t('algorithmManage.coolingOffPeriod') }}</div>
+            <div>{{ algorithmConfigInfo?.tempReductionCtrlPeriod }}min</div>
+          </AFlex>
+          <AFlex class="intelligent-style">
+            <div class="intelligent-width">{{ t('algorithmManage.controlStepSize') }}</div>
+            <div>{{ algorithmConfigInfo?.minCtrlStep }}℃</div>
+          </AFlex>
+          <AFlex class="intelligent-style">
+            <div class="intelligent-width">{{ t('algorithmManage.effluentInterval') }}</div>
+            <AFlex :vertical="true">
+              <div
+                class="interval-style"
+                v-for="(item, index) in algorithmConfigInfo?.chilledWaterOutletTempRangeList"
+                :key="index"
+              >
+                <AFlex justify="space-between" align="center">
+                  <AFlex align="center" class="interval-width">
+                    <div>{{ t('algorithmManage.periodTime') }}：</div>
+                    <AFlex align="center">
+                      <div>{{ item.endTime }}</div>
+                      <div>-</div>
+                      <div>{{ item.startTime }}</div>
+                    </AFlex>
+                  </AFlex>
+                  <AFlex align="center" class="interval-width">
+                    <div>{{ t('algorithmManage.temperatureRange') }}：</div>
+                    <div>{{ item.lower }}</div>
+                    <div>℃-</div>
+                    <div>{{ item.upper }}</div>
+                    ℃
+                  </AFlex>
+                </AFlex>
               </div>
-
-              <div v-for="(item, index) in temperatureRangeList" :key="index">
-                <SetInterval
-                  ref="setIntervalRefs"
-                  :index="index"
-                  :form="item"
-                  @addClick="addClick"
-                  @deleteClick="deleteClick"
-                />
-              </div>
-
-              <div class="analysis-style"><span>* </span>{{ $t('algorithmManage.waterOutletSetting') }}</div>
-              <MonthSetting ref="monthSetting" :temperature-setting-value="temperatureSettingValue" />
-              <AFlex class="flex-bottom" wrap="wrap" :gap="40">
-                <AFormItem :label="t('algorithmManage.intelligentMode')" name="intelligentMode">
-                  <ARadioGroup v-model:value="algorithmForm.intelligentMode">
-                    <ARadio class="radio-right" :value="0">
-                      <AFlex align="center">
-                        <div>{{ $t('algorithmManage.intelligentEnergyConservation') }}</div>
-                        <SvgIcon class="icon-style" name="question-circle-o" />
-                      </AFlex>
-                    </ARadio>
-                    <ARadio :value="1">
-                      <AFlex align="center">
-                        <div>{{ $t('algorithmManage.prioritizeRequirements') }}</div>
-                        <SvgIcon class="icon-style" name="question-circle-o" />
-                      </AFlex>
-                    </ARadio>
-                  </ARadioGroup>
-                </AFormItem>
-                <AFormItem :label="t('algorithmManage.controlBasis')" name="controlBasis">
-                  <ARadioGroup v-model:value="algorithmForm.controlBasis">
-                    <ARadio class="radio-right" :value="0">{{ $t('envMonitor.temperature') }}</ARadio>
-                    <ARadio class="radio-right" :value="1">{{ $t('envMonitor.humidity') }}</ARadio>
-                    <ARadio :value="2">{{ $t('algorithmManage.temperatureHumidity') }}</ARadio>
-                  </ARadioGroup>
-                </AFormItem>
-                <AFormItem :label="t('algorithmManage.computingCycle')" name="period">
-                  <AInputNumber
-                    :placeholder="t('common.pleaseEnter')"
-                    v-model:value="algorithmForm.period"
-                    class="input-width"
-                    addon-after="min"
-                  />
-                </AFormItem>
-                <AFormItem :label="t('algorithmManage.temperatureSafetyMargin')" name="tempSafetyMargin">
-                  <AInputNumber
-                    :placeholder="t('common.pleaseEnter')"
-                    v-model:value="algorithmForm.tempSafetyMargin"
-                    class="input-width"
-                    addon-after="℃"
-                  />
-                </AFormItem>
-
-                <AFormItem :label="t('algorithmManage.humiditySafetyMargin')" name="humiditySafetyMargin">
-                  <AInputNumber
-                    v-model:value="algorithmForm.humiditySafetyMargin"
-                    class="input-width"
-                    addon-after="%"
-                    :placeholder="t('common.pleaseEnter')"
-                  />
-                </AFormItem>
-                <AFormItem
-                  :label="t('algorithmManage.temperatureHumidityAcquisitionCycle')"
-                  name="tempHumidityCollectPeriod"
-                >
-                  <ASelect
-                    class="input-width"
-                    v-model:value="algorithmForm.tempHumidityCollectPeriod"
-                    :options="algTempHumCollectPeriod"
-                    :field-names="{ label: 'dictValue', value: 'dictEngValue' }"
-                    :placeholder="$t('common.plzSelect')"
-                  />
-                </AFormItem>
-                <AFormItem :label="t('algorithmManage.sourceTemperature')" name="waterSupplyTempSource">
-                  <ARadioGroup v-model:value="algorithmForm.waterSupplyTempSource">
-                    <ARadio class="radio-right" :value="0">{{ $t('algorithmManage.weighted') }} </ARadio>
-                    <ARadio :value="1"> {{ $t('algorithmManage.read') }} </ARadio>
-                  </ARadioGroup>
-                </AFormItem>
+            </AFlex>
+          </AFlex>
+          <AFlex class="intelligent-style">
+            <div class="intelligent-width">{{ t('algorithmManage.waterOutletSetting') }}</div>
+            <AFlex class="set-style" justify="space-between" wrap="wrap">
+              <AFlex align="center" v-for="(item, index) in monthList" :key="index" class="month-bottom">
+                <div>{{ item }}{{ t('common.month') }}:&nbsp;&nbsp;</div>
+                <div>{{ monthValue[index] }}℃</div>
               </AFlex>
-            </AForm>
-          </div>
+            </AFlex>
+          </AFlex>
+          <AFlex class="intelligent-style">
+            <div class="intelligent-width">{{ t('algorithmManage.intelligentMode') }}</div>
+            <div>
+              {{
+                algorithmConfigInfo?.intelligentMode === 1
+                  ? $t('algorithmManage.prioritizeRequirements')
+                  : $t('algorithmManage.intelligentEnergyConservation')
+              }}
+            </div>
+          </AFlex>
+          <AFlex class="intelligent-style">
+            <div class="intelligent-width">{{ t('algorithmManage.controlBasis') }}</div>
+            <div>
+              {{
+                algorithmConfigInfo?.intelligentMode === 1 ? $t('envMonitor.humidity') : $t('envMonitor.temperature')
+              }}
+            </div>
+          </AFlex>
+          <AFlex class="intelligent-style">
+            <div class="intelligent-width">{{ t('algorithmManage.computingCycle') }}</div>
+            <div>{{ algorithmConfigInfo?.period }}min</div>
+          </AFlex>
+          <AFlex class="intelligent-style">
+            <div class="intelligent-width">{{ t('algorithmManage.temperatureSafetyMargin') }}</div>
+            <div>{{ algorithmConfigInfo?.tempSafetyMargin }}℃</div>
+          </AFlex>
+          <AFlex class="intelligent-style">
+            <div class="intelligent-width">{{ t('algorithmManage.humiditySafetyMargin') }}</div>
+            <div>{{ algorithmConfigInfo?.humiditySafetyMargin }}%</div>
+          </AFlex>
+          <AFlex class="intelligent-style">
+            <div class="intelligent-width">{{ t('algorithmManage.temperatureHumidityAcquisitionCycle') }}</div>
+            <div>{{ algorithmConfigInfo?.tempHumidityCollectPeriod }}min</div>
+          </AFlex>
+          <AFlex class="intelligent-style">
+            <div class="intelligent-width">{{ t('algorithmManage.sourceTemperature') }}</div>
+            <div>
+              {{
+                algorithmConfigInfo?.waterSupplyTempSource === 1
+                  ? t('algorithmManage.read')
+                  : t('algorithmManage.weighted')
+              }}
+            </div>
+          </AFlex>
         </ACollapsePanel>
-
         <ACollapsePanel
-          v-show="chillersList.length > 0"
+          v-show="algorithmConfigInfo?.chillers"
           :style="customStyle"
-          v-for="item in chillersList"
+          v-for="item in algorithmConfigInfo?.chillers"
           :key="item.id"
         >
           <template #header>
@@ -447,171 +199,114 @@ onMounted(() => {
               <span class="header-text">{{ item.deviceName }}</span>
             </AFlex>
           </template>
-          <EquipmentControl
-            ref="equipmentControlRefs"
-            :alg-wt-temp-ctrl-mode="algWtTempCtrlMode"
-            :alg-always="algAlways"
-            :alg-wt-temp-set-step="algWtTempSetStep"
-            :form="item"
-          />
+          <AFlex class="intelligent-style">
+            <div class="intelligent-width">{{ t('algorithmManage.waterTemperatureControlMode') }}</div>
+            <div>
+              {{ item.waterTempControlMode === 1 ? t('algorithmManage.backwater') : t('algorithmManage.waterSupply') }}
+            </div>
+          </AFlex>
+          <AFlex class="intelligent-style">
+            <div class="intelligent-width">{{ t('algorithmManage.continuousOperation') }}</div>
+            <div>
+              {{ item.continuous === 1 ? t('common.yes') : t('common.no') }}
+            </div>
+          </AFlex>
+          <AFlex class="intelligent-style">
+            <div class="intelligent-width">{{ t('algorithmManage.shutdownCompensationValue') }}</div>
+            <div>{{ item.stopCompensate }}℃</div>
+          </AFlex>
+          <AFlex class="intelligent-style">
+            <div class="intelligent-width">{{ t('algorithmManage.reEnableCompensationValue') }}</div>
+            <div>{{ item.restartCompensate }}℃</div>
+          </AFlex>
+          <AFlex class="intelligent-style">
+            <div class="intelligent-width">{{ t('algorithmManage.lowerLimitSafeDifferentialPressure') }}</div>
+            <div>{{ item.safeDiffPressureLower }}kpa</div>
+          </AFlex>
+          <AFlex class="intelligent-style">
+            <div class="intelligent-width">{{ t('algorithmManage.lowerLimitSafeLoad') }}</div>
+            <div>{{ item.safeLoadLower }}%</div>
+          </AFlex>
+          <AFlex class="intelligent-style">
+            <div class="intelligent-width">{{ t('algorithmManage.stepSizeForWaterTemperatureSetting') }}</div>
+            <div>{{ item.waterTempStep }}℃</div>
+          </AFlex>
         </ACollapsePanel>
-
         <ACollapsePanel key="functionSettings" :style="customStyle">
           <template #header>
             <AFlex align="center" class="header-heigth">
               <span class="header-text">{{ $t('algorithmManage.systemFunctionSettings') }}</span>
             </AFlex>
           </template>
-          <div>
-            <AFlex align="center" class="analysis-bottom">
-              <div class="text">{{ $t('energyAnalysis.energyEfficiencyAnalysis') }}</div>
-              <ASwitch class="analysis-margin" v-model:checked="algorithmForm.analysis" />
-              <div @click="analysisEditor" class="editor-style">{{ $t('common.editor') }}</div>
-            </AFlex>
-            <AFlex align="center">
-              <div class="div-width">{{ $t('algorithmManage.dynamicAdjustment') }}</div>
-              <AFlex align="center" class="adjustment-div">
-                <div class="adjustment-text">{{ $t('algorithmManage.freezingSetValue') }}</div>
-                <ASwitch v-model:checked="algorithmForm.enableRefrigerationPipeDynamicSet" />
-                <div class="adjustment-text adjustment-left">{{ $t('algorithmManage.coolingSetValue') }}</div>
-                <ASwitch v-model:checked="algorithmForm.enableCoolingPipeDynamicSet" />
-                <div @click="setEditor" class="editor-style editor-left">{{ $t('common.editor') }}</div>
-              </AFlex>
+          <AFlex class="intelligent-style">
+            <div class="intelligent-width">{{ t('energyAnalysis.energyEfficiencyAnalysis') }}</div>
+            <div>
+              {{ algorithmConfigInfo?.analysis ? t('common.open') : t('common.turnOff') }}
+            </div>
+          </AFlex>
+          <AFlex class="intelligent-style">
+            <div class="intelligent-width">{{ t('algorithmManage.dynamicAdjustment') }}</div>
+            <AFlex align="center" class="adjustment-div">
+              <div>{{ $t('algorithmManage.freezingSetValue') }}:&nbsp;&nbsp;&nbsp;</div>
+              <div>
+                {{ algorithmConfigInfo?.enableRefrigerationPipeDynamicSet ? t('common.open') : t('common.turnOff') }}
+              </div>
+
+              <div class="adjustment-left">{{ $t('algorithmManage.coolingSetValue') }}:&nbsp;&nbsp;&nbsp;</div>
+              <div>
+                {{ algorithmConfigInfo?.enableCoolingPipeDynamicSet ? t('common.open') : t('common.turnOff') }}
+              </div>
             </AFlex>
-          </div>
+          </AFlex>
         </ACollapsePanel>
       </ACollapse>
-      <AFlex justify="space-between" class="bottom-style">
-        <AButton type="text">{{ $t('common.cancel') }}</AButton>
-        <AButton type="primary" class="button-width" @click="addAlgorithm">{{ $t('common.certain') }}</AButton>
-      </AFlex>
     </div>
-    <AModal
-      v-model:open="analysisOpen"
-      :title="t('algorithmManage.energyEfficiencyAnalysisSettings')"
-      width="460px"
-      :mask-closable="false"
-      @ok="okConfirm"
-    >
-      <div class="analysis-style">
-        <span>* </span>{{ $t('algorithmManage.energyEfficiencyAnalysisCalculationMethod') }}
-      </div>
-      <ARadioGroup v-model:value="analysisTypeDisplay">
-        <ARadio class="radio-right" :value="0">{{ $t('algorithmManage.thermometer') }}</ARadio>
-        <ARadio class="radio-right" :value="1">{{ $t('algorithmManage.flowChart') }}</ARadio>
-        <ARadio :value="2">{{ $t('algorithmManage.copAlgorithm') }}</ARadio>
-      </ARadioGroup>
-    </AModal>
-    <AModal
-      v-model:open="setOpen"
-      :title="t('common.settings')"
-      width="460px"
-      :mask-closable="false"
-      @ok="okSetConfirm"
-    >
-      <AFlex align="center" class="set-top set-bottom">
-        <div class="text">
-          {{ $t('algorithmManage.backwaterTemperatureSettingValue') }} &nbsp;=&nbsp;
-          {{ $t('algorithmManage.outdoorWetBulbTemperature') }} +
-        </div>
-        &nbsp;&nbsp;
-        <AInputNumber v-model:value="coolingPipeDynamicOffsetDisplay" :min="-99999.99999" :max="99999" />
-      </AFlex>
-      <AFlex align="center" class="set-bottom">
-        <div class="text set-text">{{ $t('algorithmManage.initialValue') }}（℃)</div>
-        <AInputNumber
-          class="set-input-width set-input-right"
-          v-model:value="coolingPipeDynamicSetDisplay"
-          :min="-99999.99999"
-          :max="99999"
-        />
-        <div class="set-text text">{{ $t('algorithmManage.deadZone') }}（℃)</div>
-        <AInputNumber
-          class="set-input-width"
-          v-model:value="coolingPipeDynamicDeadZoneDisplay"
-          :min="-99999.99999"
-          :max="99999"
-        />
-      </AFlex>
-
-      <AFlex align="center" class="set-bottom">
-        <div class="text lower-limit">{{ $t('algorithmManage.lowerLimit') }}（℃)</div>
-        <AInputNumber
-          class="set-input-width set-input-right"
-          v-model:value="coolingPipeDynamicLowerDisplay"
-          :min="-99999.99999"
-          :max="99999"
-        />
-        <div class="set-text text">{{ $t('algorithmManage.upperLimit') }}（℃)</div>
-        <AInputNumber
-          class="set-input-width"
-          v-model:value="coolingPipeDynamicUpperDisplay"
-          :min="-99999.99999"
-          :max="99999"
-        />
-      </AFlex>
-    </AModal>
   </div>
 </template>
 
 <style lang="scss" scoped>
-.button-width {
-  width: 128px;
-  height: 40px;
-}
-
-.bottom-style {
-  width: 55%;
-  padding-left: 28px;
-  margin-top: 8px;
-}
-
-.set-top {
-  margin-top: 20px;
-}
-
-.set-bottom {
-  margin-bottom: 24px;
+.interval-width {
+  width: 160px;
 }
 
-.lower-limit {
-  margin-right: 26px;
-}
-
-.set-input-right {
-  margin-right: 40px;
-}
-
-.algorithm-form :deep(.ant-form-item-label > label) {
-  color: #666;
+.adjustment-left {
+  margin-left: 40px;
 }
 
-.set-text {
-  margin-right: 12px;
+.adjustment-div {
+  width: 100%;
+  height: 72px;
+  padding-left: 16px;
+  background: #f5f7fa;
+  border-radius: 4px;
 }
 
-.text {
-  font-size: 14px;
-  font-style: normal;
-  font-weight: 400;
-  line-height: 22px;
-  color: #666;
+.month-bottom {
+  width: 90px;
+  margin-bottom: 16px;
 }
 
-.set-input-width {
-  width: 96px;
+.set-style {
+  width: 639px;
+  padding: 16px 0 0 16px;
+  background: #f5f7fa;
+  border-radius: 4px;
 }
 
-.editor-left {
-  margin-left: 16px;
+.interval-style {
+  width: 366px;
+  padding: 16px;
+  margin-bottom: 8px;
+  background: #f5f7fa;
+  border-radius: 4px;
 }
 
-.adjustment-left {
-  margin-left: 82px;
+.intelligent-width {
+  width: 185px;
 }
 
-.adjustment-text {
-  margin-right: 16px;
+.intelligent-style {
+  margin-bottom: 16px;
   font-size: 14px;
   font-style: normal;
   font-weight: 400;
@@ -620,65 +315,35 @@ onMounted(() => {
   text-align: left;
 }
 
-.analysis-style {
-  margin-top: 16px;
-  margin-bottom: 13px;
-  color: #666;
-}
-
-.analysis-style span {
-  color: red;
-}
-
-.analysis-bottom {
-  margin-bottom: 24px;
-}
-
-.div-width {
-  width: 72px;
-  color: #666;
-}
-
-.adjustment-div {
-  width: 100%;
-  height: 72px;
-  padding-left: 16px;
-  background: #f5f7fa;
-  border-radius: 4px;
-}
-
-.editor-style {
-  color: #32bac0;
-  text-decoration: underline;
-  cursor: pointer;
+.open-div-color {
+  background: #f6ffed;
+  border: 1px solid #b7eb8f;
 }
 
-.analysis-margin {
-  margin: 0 18px 0 17px;
+.open-text-color {
+  color: #52c41a;
 }
 
-.header-heigth {
-  height: 32px;
+.off-div-color {
+  background: #fff1f0;
+  border: 1px solid #ffa39e;
 }
 
-.icon-style {
-  margin-left: 4px;
+.off-text-color {
+  color: #f5222d;
 }
 
-.flex-margin {
-  margin: 16px 0;
-}
-
-.radio-right {
-  margin-right: 16px;
-}
-
-.flex-bottom {
-  row-gap: 0 !important;
+.header-div-text {
+  font-size: 12px;
+  font-style: normal;
+  line-height: 20px;
+  text-align: left;
 }
 
-.input-width {
-  width: 192px;
+.header-div {
+  width: 40px;
+  height: 24px;
+  border-radius: 4px;
 }
 
 .header-text {
@@ -691,15 +356,15 @@ onMounted(() => {
   text-align: left;
 }
 
+.header-heigth {
+  height: 32px;
+}
+
 :deep(.algorithm-content) {
   .ant-collapse > .ant-collapse-item > .ant-collapse-header .ant-collapse-expand-icon {
     margin-top: 6px;
   }
 
-  .ant-input-number-group .ant-input-number-group-addon {
-    background-color: #fff;
-  }
-
   .ant-collapse .ant-collapse-content {
     border: 0;
 
@@ -719,6 +384,7 @@ onMounted(() => {
 }
 
 .title-text {
+  margin-right: 32px;
   font-size: 20px;
   font-style: normal;
   font-weight: 500;
@@ -726,8 +392,4 @@ onMounted(() => {
   color: rgb(0 0 0 / 85%);
   text-align: left;
 }
-
-.interval-style {
-  margin-top: 0;
-}
 </style>