hvac-web/src/views/algorithm-manage/AlgorithmManage.vue

<script setup lang="ts">
import { ref, useTemplateRef } from 'vue';

import DeviceGroupSelect from '@/components/DeviceGroupSelect.vue';
import { useRequest } from '@/hooks/request';
import { useUserInfoStore } from '@/stores/user-info';
import { t } from '@/i18n';
import { getAlgorithmConfigInfo } from '@/api';
import { OperatePermission } from '@/utils/permission-type';

import AlgorithmEditing from './AlgorithmEditing.vue';

import type { AlgorithmConfigInfo } from '@/types';

const { booleanPermission } = useUserInfoStore();
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 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 getAlgorithmConfig = (id: number) => {
  handleRequest(async () => {
    algorithmConfigInfo.value = await getAlgorithmConfigInfo(id);
    monthValue.value = algorithmConfigInfo.value.chilledWaterOutletTempSet.split(',');
    algorithmEditingRef.value?.editorAlgorithmChange(algorithmConfigInfo.value);
  });
};
const editorAlgorithm = () => {
  editorAlgorithmShow.value = true;
  if (algorithmConfigInfo.value) {
    algorithmEditingRef.value?.editorAlgorithmChange(algorithmConfigInfo.value);
  }
};
const confirmClick = (id: number) => {
  getAlgorithmConfig(id);
  editorAlgorithmShow.value = false;
};

const cancelClick = () => {
  editorAlgorithmShow.value = false;
};
</script>

<template>
  <div>
    <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" v-if="booleanPermission(OperatePermission.算法配置编辑)">
        <AFlex align="center">
          <SvgIcon style="margin-right: 4px" name="edit-o" />
          <span> {{ t('common.editor') }} </span>
        </AFlex>
      </AButton>
    </AFlex>
    <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>

              <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>
          <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.startTime }}</div>
                      <div>-</div>
                      <div>{{ item.endTime }}</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>
            </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>
            </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="algorithmConfigInfo?.chillers"
          :style="customStyle"
          v-for="item in algorithmConfigInfo?.chillers"
          :key="item.id"
        >
          <template #header>
            <AFlex align="center" class="header-heigth">
              <span class="header-text">{{ item.deviceName }}</span>
            </AFlex>
          </template>
          <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>
          <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>
          </AFlex>

          <AFlex class="intelligent-style">
            <div class="intelligent-width">{{ t('algorithmManage.copAlgorithm') }}</div>
            <AFlex align="center" class="adjustment-div">
              <AFlex v-for="item in algorithmConfigInfo?.deviceCOPList" :key="item.id" class="adjustment-right">
                <div>{{ item.deviceName }}:&nbsp;&nbsp;&nbsp;</div>
                <div>
                  {{ item.enableCopSet ? t('common.open') : t('common.turnOff') }}
                </div>
              </AFlex>
            </AFlex>
          </AFlex>
        </ACollapsePanel>
      </ACollapse>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.interval-width {
  width: 160px;
}

.adjustment-right {
  margin-right: 40px;
}

.adjustment-left {
  margin-left: 40px;
}

.adjustment-div {
  width: 100%;
  height: 72px;
  padding-left: 16px;
  background: #f5f7fa;
  border-radius: 4px;
}

.month-bottom {
  width: 90px;
  margin-bottom: 16px;
}

.set-style {
  width: 639px;
  padding: 16px 0 0 16px;
  background: #f5f7fa;
  border-radius: 4px;
}

.interval-style {
  width: 366px;
  padding: 16px;
  margin-bottom: 8px;
  background: #f5f7fa;
  border-radius: 4px;
}

.intelligent-width {
  width: 185px;
}

.intelligent-style {
  margin-bottom: 16px;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 22px;
  color: #666;
  text-align: left;
}

.open-div-color {
  background: #f6ffed;
  border: 1px solid #b7eb8f;
}

.open-text-color {
  color: #52c41a;
}

.off-div-color {
  background: #fff1f0;
  border: 1px solid #ffa39e;
}

.off-text-color {
  color: #f5222d;
}

.header-div-text {
  font-size: 12px;
  font-style: normal;
  line-height: 20px;
  text-align: left;
}

.header-div {
  width: 40px;
  height: 24px;
  border-radius: 4px;
}

.header-text {
  margin-right: 18px;
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 24px;
  color: #000;
  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-collapse .ant-collapse-content {
    border: 0;

    .ant-collapse-content-box {
      padding: 16px 0;
    }
  }
}

.algorithm-content {
  width: 100%;
  height: 100%;
  padding: 24px;
  margin-top: 16px;
  background: #fff;
  border-radius: 16px;
}

.title-text {
  margin-right: 32px;
  font-size: 20px;
  font-style: normal;
  font-weight: 500;
  line-height: 32px;
  color: rgb(0 0 0 / 85%);
  text-align: left;
}
</style>