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

<script setup lang="ts">
import { onMounted, reactive, ref } from 'vue';
import { message } from 'ant-design-vue';

import { useRequest } from '@/hooks/request';
import { t } from '@/i18n';
import { gatewayLinkAdd, gatewayLinkDelete, gatewayLinkGetList, getGatewayModelInterfaces } from '@/api';

import deviceInterface from '@/assets/img/device-interface.png';

import type {
  GatewayInterface,
  InterfaceData,
  InterfaceList,
  RegisterGatewayForm,
  UseGuideStepItemProps,
} from '@/types';

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

let gatewayInterface: GatewayInterface[];
const interfaceList = reactive<InterfaceList[]>([]);

const { handleRequest } = useRequest();

interface InterfaceStyle {
  backgroundImage: string;
}

// 定义一个响应式变量来存储样式对象
const interfaceStyle = ref<InterfaceStyle>({
  backgroundImage: `url(${deviceInterface})`,
});

const interfaceData = ref<InterfaceData[]>([]);

const postGetList = () => {
  handleRequest(async () => {
    interfaceData.value = await gatewayLinkGetList(props.form.id);
  });
};

// 根据条件显示背景
const interfaceShow = (value: string) => {
  return value === 'LAN' ? 'background-color: rgba(54, 207, 201, 1);' : 'background-color: rgba(89, 126, 247, 1);';
};

// 添加接口列表
const addInterface = () => {
  if (props.form.linkType) {
    interfaceList.forEach((option) => {
      if (option.value === props.form.linkType) {
        handleRequest(async () => {
          await gatewayLinkAdd({
            linkTypeId: Number(option.value),
            linkName: option.label,
            gatewayId: props.form.id,
          });
          postGetList();
        });
      }
    });
  } else {
    message.warning(t('registerGateway.pleaseSelectInterface'));
  }
};

// 删除接口
const addDelete = (value: number) => {
  handleRequest(async () => {
    await gatewayLinkDelete(value);
    postGetList();
  });
};

onMounted(() => {
  handleRequest(async () => {
    gatewayInterface = await getGatewayModelInterfaces(props.form.modelId);
    gatewayInterface.forEach((item) => {
      interfaceList.push({
        value: String(item.id),
        label: item.dictValue,
      });
    });
  });
  postGetList();
});
</script>

<template>
  <div>
    <div class="use-guide-title">{{ $t('registerGateway.addInterface') }}</div>
    <div class="use-guide-description">文本描述！！！</div>

    <AFormItem :label="$t('registerGateway.selectInterface')" name="linkType">
      <ASelect
        size="large"
        ref="select"
        v-model:value="form.linkType"
        class="interface-select"
        :options="interfaceList"
      />
      <AButton class="dev-but" type="primary" @click="addInterface">{{ $t('common.add') }}</AButton>
    </AFormItem>

    <div :style="interfaceStyle" class="interface-img">
      <div class="interface-bgc"></div>
    </div>
    <div class="use-guide-title">{{ $t('registerGateway.interfaceList') }}</div>
    <div class="interface-container main-container">
      <AFlex v-for="item in interfaceData" :key="item.id" class="interface-div" justify="flex-start" align="center">
        <ARow style="width: 100%">
          <ACol :span="14">
            <AFlex justify="flex-start" align="center">
              <AFlex class="interface-div1" :style="interfaceShow(item.valueType)" justify="center" align="center">
                <span class="interface-div1-span">{{ item.valueType }}</span>
              </AFlex>
              <div class="interface-div2">{{ item.linkName }}</div>
            </AFlex>
          </ACol>
          <ACol :span="10">
            <AFlex justify="flex-end" align="center">
              <AButton class="interface-but" type="link" danger @click="addDelete(item.id)">{{
                $t('common.delete')
              }}</AButton>
            </AFlex>
          </ACol>
        </ARow>
      </AFlex>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.dev-but {
  width: 108px;
  height: 40px;
  margin-left: 30px;
  border-radius: 3px;
}

.interface-select {
  width: 240px;
  margin-left: 15px;
}

.interface-bgc {
  position: relative;
  top: 66px;
  left: 229px;
  width: 53px;
  height: 53px;
  background-color: rgb(82 196 26 / 35%);
  border-radius: 8px;
}

.interface-div {
  width: 457px;
  height: 67px;
  margin-top: 14px;
  background-color: rgb(240 240 240 / 100%);
  border-radius: 8px;
}

.interface-img {
  position: 'static';
  width: 608px;
  height: 178px;
  margin-top: 25px;
  margin-bottom: 20px;
  background-size: '100% 100%';
}

.interface-div1 {
  width: 48px;
  height: 48px;
  margin-left: 20px;
  border-radius: 4px;
}

.interface-div1-span {
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 18px;
  color: rgb(255 255 255 / 97%);
}

.interface-div2 {
  margin-left: 20px;
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 17px;
  color: var(--antd-color-text-secondary);
  text-align: left;
}

.interface-but {
  margin-top: 8px;
  margin-right: 10px;
}

.interface-container {
  width: 565px;
  height: 410px;
}
</style>