hvac-web/src/views/register-gateway/VerifyDevice.vue

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

import SvgIcon from '@/components/SvgIcon.vue';
import { useRequest } from '@/hooks/request';
import { t } from '@/i18n';
import { getGatewayModelInfo, orgGatewayRegister, validateGatewayInfo } from '@/api';

import deviceCard1 from '@/assets/img/device-card1.png';
import deviceCard2 from '@/assets/img/device-card2.png';
import deviceCard3 from '@/assets/img/device-card3.png';
import deviceCard4 from '@/assets/img/device-card4.png';
import deviceLabel from '@/assets/img/device-label.png';
import deviceManual from '@/assets/img/device-manual.png';

import type { FormInstance, Rule } from 'ant-design-vue/es/form';
import type { InterfaceNum, RegisterGatewayForm, UseGuideStepItemExpose, UseGuideStepItemProps } from '@/types';

const props = defineProps<UseGuideStepItemProps<RegisterGatewayForm>>();

const currentStep = props.steps[props.stepIndex];
const formRef = ref<FormInstance>();
const rules: Record<string, Rule[]> = {
  snCode: [
    {
      required: true,
      message: t('registerGateway.pleaseSnCode'),
      trigger: 'change',
    },
  ],
  password: [
    {
      required: true,
      message: t('registerGateway.pleasePassword'),
      trigger: 'change',
    },
  ],
};

const { handleRequest } = useRequest();

const interfaceNum = computed<InterfaceNum | undefined>(() => {
  const { interfaceNum } = props.form;

  return interfaceNum === '' ? undefined : JSON.parse(interfaceNum);
});

const verificationGateway = () => {
  formRef.value
    ?.validate()
    .then(() => {
      handleRequest(async () => {
        const { modelId, state, id } = await validateGatewayInfo({
          snCode: props.form.snCode,
          password: props.form.password,
        });

        props.form.modelId = modelId;
        props.form.id = id;

        Object.assign(props.form, {
          modelId,
          state,
          id,
        });

        props.form.show = true;
        currentStep.nextStepButtonDisabled = false;

        if (props.form.modelId) {
          const { docUrl, iconUrl, interfaceNum, modelName, surfMode, surfModeEn } = await getGatewayModelInfo(
            props.form.modelId,
          );

          Object.assign(props.form, {
            docUrl,
            iconUrl,
            interfaceNum,
            modelName,
            surfMode: JSON.parse(surfMode),
            surfModeEn,
          });
        }
      });
      props.form.show = false;
    })
    .catch(() => {});
};

const productManual = () => {
  const fileUrl = import.meta.env.VITE_IMG_API + props.form.docUrl; // 替换为你的文件URL
  window.open(fileUrl, '_blank');
};

const ternaryExpression = (value: boolean) => {
  if (value) {
    return props.form.state === 1 ? t('common.online') : t('common.offline');
  } else {
    return props.form.state === 1 ? 'background-color: #52C41A;' : 'background-color: #666666;';
  }
};

const finish = () => {
  if (!props.form.judgmentRegistration) {
    handleRequest(async () => {
      await orgGatewayRegister(props.form.id);
      props.form.judgmentRegistration = true;
    });
  }
};

defineExpose<UseGuideStepItemExpose>({
  finish,
});

watch(
  () => props.form.snCode,
  (count) => {
    if (count) {
      if (props.form.show) {
        currentStep.nextStepButtonDisabled = true;
        props.form.show = false;
      }
    }
  },
);

watch(
  () => props.form.password,
  (count) => {
    if (count) {
      if (props.form.show) {
        currentStep.nextStepButtonDisabled = true;
        props.form.show = false;
      }
    }
  },
);

const imgUrl = computed(() => {
  return import.meta.env.VITE_IMG_API + props.form.iconUrl;
});
</script>

<template>
  <div>
    <ARow>
      <ACol :span="5">
        <AForm ref="formRef" :model="form" label-align="left" :rules="rules" :label-col="{ span: 6 }">
          <AFormItem :label="$t('registerGateway.snCode')" name="snCode">
            <AInput :placeholder="$t('common.pleaseEnter')" v-model:value="form.snCode" />
          </AFormItem>
          <AFormItem :label="$t('registerGateway.devicePassword')" name="password">
            <AInput v-model:value="form.password" :placeholder="$t('common.pleaseEnter')" />
          </AFormItem>
          <AFormItem>
            <AButton class="dev-but icon-button" type="primary" @click="verificationGateway">
              <SvgIcon v-if="form.show" name="check-circle-o" />
              <SvgIcon v-else name="shield-o" />
              {{ form.show ? $t('registerGateway.verificationSuccessful') : $t('common.verification') }}
            </AButton>
          </AFormItem>
        </AForm>
      </ACol>
      <ACol :span="17">
        <div>
          <img class="register-img" :src="deviceLabel" alt="" />
        </div>
      </ACol>
    </ARow>

    <div v-if="form.show" class="dev-card">
      <div class="dev-title">
        <AFlex :vertical="false">
          <div class="dev-title-signal" :style="ternaryExpression(false)"></div>
          <div class="dev-card-left-text">{{ ternaryExpression(true) }}</div>
        </AFlex>
      </div>
      <ARow style="padding: 0 30px 20px">
        <ACol :span="10">
          <AFlex justify="center" style="width: 100%" :vertical="true" align="center">
            <img class="dev-card-left-img" :src="imgUrl" alt="" />
            <div class="dev-card-left-text1">{{ props.form.modelName }}</div>
            <div class="dev-card-left-text2">
              {{ props.form.surfMode[0] }}｜{{ props.form.surfMode[1] }}｜{{ props.form.surfMode[2] }}
            </div>
          </AFlex>
        </ACol>
        <ACol :span="14">
          <div style="height: 140px">
            <ARow>
              <ACol :span="12">
                <AFlex justify="center" style="width: 100%" :vertical="true" align="center">
                  <div style="height: 70px">
                    <img class="dev-card-right-img" referrerpolicy="no-referrer" :src="deviceCard1" />
                    <div class="dev-card-right-text">{{ interfaceNum?.COM }}*COM</div>
                  </div>
                  <div style="height: 70px">
                    <img class="dev-card-right-img" referrerpolicy="no-referrer" :src="deviceCard2" />
                    <div class="dev-card-right-text">{{ interfaceNum?.WAN }}*WAN</div>
                  </div>
                </AFlex>
              </ACol>
              <ACol :span="12">
                <AFlex justify="center" style="width: 80%" :vertical="true" align="center">
                  <div style="height: 70px">
                    <img class="dev-card-right-img" referrerpolicy="no-referrer" :src="deviceCard3" />
                    <div class="dev-card-right-text">{{ interfaceNum?.LAN }}*LAN</div>
                  </div>
                  <div style="height: 70px">
                    <img
                      class="dev-card-right-img"
                      style="margin-top: -10px; margin-bottom: 0"
                      referrerpolicy="no-referrer"
                      :src="deviceCard4"
                    />
                    <div class="dev-card-right-text" style="margin-top: -5px">
                      {{ interfaceNum?.DI }}*DI<br />{{ interfaceNum?.DO }}*DO
                    </div>
                  </div>
                </AFlex>
              </ACol>
            </ARow>
          </div>
          <div>
            <AButton class="dev-card-right-but" @click="productManual">
              <template #icon>
                <img class="dev-card-right-but-img" referrerpolicy="no-referrer" :src="deviceManual" /></template
              >{{ $t('registerGateway.productManual') }}</AButton
            >
          </div>
        </ACol>
      </ARow>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.ant-form-item {
  margin-bottom: 24px;
}

.dev-but {
  width: 130px;
  height: 40px;
  margin-top: 16px;
}

.dev-input {
  width: 256px;
  margin-left: 29px;
}

.dev-input1 {
  width: 256px;
  margin-left: 5px;
}

.register-img {
  width: 194px;
  height: 120px;
  margin-left: 24px;
}

.dev-card {
  width: 410px;
  height: 223px;
  padding-top: 10px;
  border-radius: 6px;
  box-shadow: 0 1px 3px 0 rgb(0 0 0 / 15%);
}

.dev-title {
  margin-left: 10px;
}

.dev-title-signal {
  width: 6px;
  height: 6px;
  margin-top: 6px;
  margin-right: 10px;
  border-radius: 50%;
}

.dev-card-left-text {
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 17px;
  color: var(--antd-color-text-secondary);
  text-align: left;
}

.dev-card-left-img {
  width: 70px;
  height: 110px;
}

.dev-card-left-text1 {
  margin-top: 25px;
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 18px;
  color: var(--antd-color-bg-spotlight);
  text-align: left;
}

.dev-card-left-text2 {
  margin-top: 5px;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 17px;
  color: var(--antd-color-text-secondary);
  text-align: center;
}

.dev-card-right-img {
  margin-bottom: 10px;
  margin-left: 30%;
}

.dev-card-right-text {
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 22px;
  color: var(--antd-color-text-secondary);
  text-align: center;
}

.dev-card-right-but {
  width: 97px;
  height: 32px;
  padding: 0;
  margin-top: 10px;
  margin-left: 15%;
  border-radius: 4px;
}

.dev-card-right-but-img {
  margin-right: 8px;
  margin-bottom: 3px;
}
</style>