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

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

import { useRequest } from '@/hooks/request';
import { postParameterVerification } from '@/api';

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

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

const parameterVerificationList = ref<ParameterVerification[]>([]);

const { handleRequest } = useRequest();

const colorShow = (value: number | string) => {
  if (value) {
    return 'color:#666666';
  } else {
    return 'color:#F56C6C';
  }
};

onMounted(() => {
  handleRequest(async () => {
    parameterVerificationList.value = await postParameterVerification(props.form.devId);
  });
});
</script>

<template>
  <div>
    <div v-for="item in parameterVerificationList" :key="item.id" class="margin-bottom">
      <AFlex align="center" class="host-parameters-header">
        <div class="host-parameters-header-left"></div>
        <div class="host-parameters-header-right">{{ item.deviceParamGroupName }}</div>
      </AFlex>
      <AFlex class="host-parameters" wrap="wrap">
        <div v-for="ite in item.valueVos" :key="ite.valueId" class="host-parameters-div">
          <span :style="colorShow(ite.value)">{{ ite.paramName }}:</span>
          <span style="margin-left: 10px">{{ ite.value }}</span>
          <span v-if="ite.value">{{ ite.unit }}</span>
        </div>
      </AFlex>
    </div>
  </div>
</template>

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

.host-parameters-header {
  height: 56px;
  background: #f5f6f7;
  border: 1px solid #e4e7ed;
  border-radius: 8px 8px 0 0;
}

.host-parameters {
  padding: 24px;
  padding-bottom: 8px;
  border: 1px solid #e4e7ed;
  border-top: none;
  border-radius: 0 0 8px 8px;
}

.host-parameters-header-left {
  width: 2px;
  height: 16px;
  margin-right: 10px;
  margin-left: 24px;
  background: #32bac0;
}

.host-parameters-header-right {
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 24px;
  color: #000;
  text-align: left;
}

.host-parameters-div {
  width: 347px;
  margin-bottom: 16px;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px;
  color: #333;
  text-align: left;
}
</style>