hvac-web/src/views/create-device/DetailedInformation.vue

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

import { useDictData } from '@/hooks/dict-data';
import { useRequest } from '@/hooks/request';
import { t } from '@/i18n';
import { deviceAdd } from '@/api';
import { DictCode } from '@/constants';

import type { EquipmentInformationForm, UseGuideStepItemExpose, UseGuideStepItemProps } from '@/types';

const { dictData: dcCsDType, getDictData: getDcCsDType } = useDictData(DictCode.DcCsDType);
const { dictData: dcCsCasType, getDictData: getDcCsCasType } = useDictData(DictCode.DcCsCasType);
const { dictData: dcCsCoolingType, getDictData: getDcCsCoolingType } = useDictData(DictCode.DcCsCoolingType);
const { dictData: dcVfdType, getDictData: getDcVfdType } = useDictData(DictCode.DcVfdType);

const props = defineProps<UseGuideStepItemProps<EquipmentInformationForm>>();
const isLoading = ref<boolean>(false);
const { handleRequest } = useRequest();
const getDeviceDetail = () => {
  let data;
  const {
    chillerType,
    powerRating,
    refrigerantType,
    refrigerantDosage,
    nominalCoolingcapacity,
    nominalcalorificvalue,
    nominalCopRefrigeration,
    nominalCopHeating,
    chilledWaterRatedFlow,
    coolingWaterRatedFlow,
    motorCoolingMethod,
    copCorrectionFactor,
    numberUnitCircuits,
    singleLoopCompressor,
    frequencyConversion,
    ratedVoltage,
    inflowTemperature,
    waterOutletTemperature,
    relativeHumidityTemperature,
    fanNumber,
    waterFlowRate,
    coolingCapacity,
    inletPipeDiameter,
    outletPipeDiameter,
    ratedFlow,
    ratedHead,
    ratedCurrent,
    revolutions,
  } = props.form;
  if (props.form.deviceType === 2) {
    data = {
      chillerType,
      powerRating,
      refrigerantType,
      refrigerantDosage,
      nominalCoolingcapacity,
      nominalcalorificvalue,
      nominalCopRefrigeration,
      nominalCopHeating,
      chilledWaterRatedFlow,
      coolingWaterRatedFlow,
      motorCoolingMethod,
      copCorrectionFactor,
      numberUnitCircuits,
      singleLoopCompressor,
    };

    return JSON.stringify(data);
  } else if (props.form.deviceType === 9) {
    data = {
      frequencyConversion,
      powerRating,
      ratedVoltage,
      inflowTemperature,
      waterOutletTemperature,
      relativeHumidityTemperature,
      fanNumber,
      waterFlowRate,
      coolingCapacity,
      inletPipeDiameter,
      outletPipeDiameter,
      copCorrectionFactor,
      numberUnitCircuits,
      singleLoopCompressor,
    };
    return JSON.stringify(data);
  } else if (props.form.deviceType === 11 || props.form.deviceType === 12) {
    data = {
      frequencyConversion,
      powerRating,
      ratedFlow,
      ratedHead,
      ratedVoltage,
      ratedCurrent,
      revolutions,
    };
    return JSON.stringify(data);
  } else {
    return (data = '{}');
  }
};
const finish = async () => {
  try {
    isLoading.value = true;
    props.form.groupId = props.form.deviceData[1] ? props.form.deviceData[1] : props.form.deviceData[0];
    props.form.id = props.form.devId ? props.form.devId : undefined;
    props.form.devId = await deviceAdd({
      id: props.form.id,
      deviceName: props.form.deviceName,
      groupId: props.form.groupId,
      deviceType: props.form.deviceType,
      brand: props.form.brand,
      model: props.form.model,
      productionDate: dayjs(props.form.productionDate).format('YYYY-MM-DD'),
      deviceDetail: getDeviceDetail(),
    });
    // eslint-disable-next-line no-useless-catch
  } catch (err) {
    throw err;
  } finally {
    isLoading.value = false;
  }
};

defineExpose<UseGuideStepItemExpose>({
  finish,
});

onMounted(() => {
  handleRequest(async () => {
    await getDcCsDType();
    await getDcCsCasType();
    await getDcCsCoolingType();
    await getDcVfdType();
  });
});
</script>

<template>
  <ASpin :spinning="isLoading">
    <div>
      <AFlex class="equipment-information" wrap="wrap" :gap="96">
        <AFormItem :label="$t('createDevice.brand')" name="brand">
          <AInput :placeholder="$t('common.pleaseEnter')" v-model:value="form.brand" />
        </AFormItem>
        <AFormItem :label="$t('createDevice.modelNumber')" name="model">
          <AInput :placeholder="$t('common.pleaseEnter')" v-model:value="form.model" />
        </AFormItem>
        <AFormItem :label="$t('createDevice.manufacturingDate')" name="productionDate">
          <ADatePicker :placeholder="$t('common.pleaseEnter')" v-model:value="form.productionDate">
            <template #suffixIcon> </template>
          </ADatePicker>
        </AFormItem>
        <AFormItem
          v-if="props.form.deviceType === 9 || props.form.deviceType === 11 || props.form.deviceType === 12"
          :label="$t('createDevice.frequencyConversion')"
          name="frequencyConversion"
        >
          <ASelect
            v-model:value="form.frequencyConversion"
            :options="dcVfdType"
            :placeholder="$t('common.plzSelect')"
            :field-names="{ label: 'dictValue', value: 'dictValue' }"
          />
        </AFormItem>

        <AFormItem v-if="props.form.deviceType === 2" :label="t('createDevice.chillerType')" name="chillerType">
          <ASelect
            v-model:value="form.chillerType"
            :options="dcCsDType"
            :placeholder="$t('common.plzSelect')"
            :field-names="{ label: 'dictValue', value: 'dictValue' }"
          />
        </AFormItem>
        <AFormItem
          v-if="
            props.form.deviceType === 2 ||
            props.form.deviceType === 9 ||
            props.form.deviceType === 11 ||
            props.form.deviceType === 12
          "
          :label="$t('createDevice.ratedPower')"
          name="powerRating"
        >
          <AInputNumber :placeholder="$t('common.pleaseEnter')" v-model:value="form.powerRating" />
        </AFormItem>
        <AFormItem
          v-if="props.form.deviceType === 11 || props.form.deviceType === 12"
          :label="t('createDevice.ratedFlow')"
          name="ratedFlow"
        >
          <AInputNumber :placeholder="$t('common.pleaseEnter')" v-model:value="form.ratedFlow" />
        </AFormItem>
        <AFormItem
          v-if="props.form.deviceType === 11 || props.form.deviceType === 12"
          :label="t('createDevice.ratedHead')"
          name="ratedHead"
        >
          <AInputNumber :placeholder="$t('common.pleaseEnter')" v-model:value="form.ratedHead" />
        </AFormItem>
        <AFormItem
          v-if="props.form.deviceType === 9 || props.form.deviceType === 11 || props.form.deviceType === 12"
          :label="t('createDevice.ratedVoltage')"
          name="ratedVoltage"
        >
          <AInputNumber :placeholder="$t('common.pleaseEnter')" v-model:value="form.ratedVoltage" />
        </AFormItem>
        <AFormItem
          v-if="props.form.deviceType === 11 || props.form.deviceType === 12"
          :label="t('createDevice.ratedCurrent')"
          name="ratedCurrent"
        >
          <AInputNumber :placeholder="$t('common.pleaseEnter')" v-model:value="form.ratedCurrent" />
        </AFormItem>
        <AFormItem
          v-if="props.form.deviceType === 11 || props.form.deviceType === 12"
          :label="t('createDevice.revolutions')"
          name="revolutions"
        >
          <AInputNumber :placeholder="$t('common.pleaseEnter')" v-model:value="form.revolutions" />
        </AFormItem>

        <AFormItem
          v-if="props.form.deviceType === 9"
          :label="t('createDevice.inflowTemperature')"
          name="inflowTemperature"
        >
          <AInputNumber :placeholder="$t('common.pleaseEnter')" v-model:value="form.inflowTemperature" />
        </AFormItem>
        <AFormItem
          v-if="props.form.deviceType === 9"
          :label="t('createDevice.waterOutletTemperature')"
          name="waterOutletTemperature"
        >
          <AInputNumber :placeholder="$t('common.pleaseEnter')" v-model:value="form.waterOutletTemperature" />
        </AFormItem>
        <AFormItem
          v-if="props.form.deviceType === 9"
          :label="t('createDevice.relativeHumidityTemperature')"
          name="relativeHumidityTemperature"
        >
          <AInputNumber :placeholder="$t('common.pleaseEnter')" v-model:value="form.relativeHumidityTemperature" />
        </AFormItem>
        <AFormItem v-if="props.form.deviceType === 9" :label="t('createDevice.fanNumber')" name="fanNumber">
          <AInputNumber :placeholder="$t('common.pleaseEnter')" v-model:value="form.fanNumber" />
        </AFormItem>
        <AFormItem v-if="props.form.deviceType === 9" :label="t('createDevice.waterFlowRate')" name="waterFlowRate">
          <AInputNumber :placeholder="$t('common.pleaseEnter')" v-model:value="form.waterFlowRate" />
        </AFormItem>
        <AFormItem v-if="props.form.deviceType === 9" :label="t('createDevice.coolingCapacity')" name="coolingCapacity">
          <AInputNumber :placeholder="$t('common.pleaseEnter')" v-model:value="form.coolingCapacity" />
        </AFormItem>
        <AFormItem
          v-if="props.form.deviceType === 9"
          :label="t('createDevice.inletPipeDiameter')"
          name="inletPipeDiameter"
        >
          <AInputNumber :placeholder="$t('common.pleaseEnter')" v-model:value="form.inletPipeDiameter" />
        </AFormItem>
        <AFormItem
          v-if="props.form.deviceType === 9"
          :label="t('createDevice.outletPipeDiameter')"
          name="outletPipeDiameter"
        >
          <AInputNumber :placeholder="$t('common.pleaseEnter')" v-model:value="form.outletPipeDiameter" />
        </AFormItem>

        <AFormItem v-if="props.form.deviceType === 2" :label="t('createDevice.refrigerantType')" name="refrigerantType">
          <ASelect
            v-model:value="form.refrigerantType"
            :options="dcCsCasType"
            :placeholder="$t('common.plzSelect')"
            :field-names="{ label: 'dictValue', value: 'dictValue' }"
          />
        </AFormItem>
        <AFormItem v-if="props.form.deviceType === 2" :label="t('createDevice.refrigerantDosage')">
          <AInputNumber :placeholder="$t('common.pleaseEnter')" v-model:value="form.refrigerantDosage" />
        </AFormItem>
        <AFormItem
          v-if="props.form.deviceType === 2"
          :label="t('createDevice.nominalCoolingcapacity')"
          name="nominalCoolingcapacity"
        >
          <AInputNumber :placeholder="$t('common.pleaseEnter')" v-model:value="form.nominalCoolingcapacity" />
        </AFormItem>
        <AFormItem v-if="props.form.deviceType === 2" :label="t('createDevice.nominalcalorificvalue')">
          <AInputNumber :placeholder="$t('common.pleaseEnter')" v-model:value="form.nominalcalorificvalue" />
        </AFormItem>
        <AFormItem
          v-if="props.form.deviceType === 2"
          :label="t('createDevice.nominalCopRefrigeration')"
          name="nominalCopRefrigeration"
        >
          <AInputNumber :placeholder="$t('common.pleaseEnter')" v-model:value="form.nominalCopRefrigeration" />
        </AFormItem>
        <AFormItem v-if="props.form.deviceType === 2" :label="t('createDevice.nominalCopHeating')">
          <AInputNumber :placeholder="$t('common.pleaseEnter')" v-model:value="form.nominalCopHeating" />
        </AFormItem>
        <AFormItem v-if="props.form.deviceType === 2" :label="t('createDevice.chilledWaterRatedFlow')">
          <AInputNumber :placeholder="$t('common.pleaseEnter')" v-model:value="form.chilledWaterRatedFlow" />
        </AFormItem>
        <AFormItem v-if="props.form.deviceType === 2" :label="t('createDevice.coolingWaterRatedFlow')">
          <AInputNumber :placeholder="$t('common.pleaseEnter')" v-model:value="form.coolingWaterRatedFlow" />
        </AFormItem>
        <AFormItem
          v-if="props.form.deviceType === 2"
          :label="t('createDevice.motorCoolingMethod')"
          name="motorCoolingMethod"
        >
          <ASelect
            v-model:value="form.motorCoolingMethod"
            :options="dcCsCoolingType"
            :placeholder="$t('common.plzSelect')"
            :field-names="{ label: 'dictValue', value: 'dictValue' }"
          />
        </AFormItem>
        <AFormItem
          v-if="props.form.deviceType === 2 || props.form.deviceType === 9"
          :label="t('createDevice.copCorrectionFactor')"
        >
          <AInputNumber :placeholder="$t('common.pleaseEnter')" v-model:value="form.copCorrectionFactor" />
        </AFormItem>
        <AFormItem
          v-if="props.form.deviceType === 2 || props.form.deviceType === 9"
          :label="t('createDevice.numberUnitCircuits')"
          name="numberUnitCircuits"
        >
          <AInputNumber :placeholder="$t('common.pleaseEnter')" v-model:value="form.numberUnitCircuits" />
        </AFormItem>
        <AFormItem
          v-if="props.form.deviceType === 2 || props.form.deviceType === 9"
          :label="t('createDevice.singleLoopCompressor')"
          name="singleLoopCompressor"
        >
          <AInputNumber :placeholder="$t('common.pleaseEnter')" v-model:value="form.singleLoopCompressor" />
        </AFormItem>
      </AFlex>
    </div>
  </ASpin>
</template>

<style lang="scss" scoped>
.information-prompt {
  width: 14px;
  height: 14px;
  margin-left: 13px;
  cursor: pointer;
}

.equipment-information {
  row-gap: 0 !important;
  margin-top: 40px;
}

.equipment-information div {
  width: 270px;
}
</style>