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

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

import { useRequest } from '@/hooks/request';
import { t } from '@/i18n';
import { gatewayLinkGetList, gatewayLinkList, gatewayLinkProtocolList } from '@/api';

import type {
  InterfaceData,
  ProtocolListPageItem,
  ProtocolListPageItemData,
  RegisterGatewayForm,
  UseGuideStepItemProps,
  VerificationAgreement,
} from '@/types';

const activeKey = ref();

const interfaceValue = ref<number>(0);

const { handleRequest } = useRequest();

let interfaceList: InterfaceData[];

interface InterfaceItem {
  id: number;
  baudRate: number;
  dataBit: number;
  stopBit: string;
  parityBit: string;
  protocolType: string;
}

interface ItemList {
  value: number;
  payload: string;
  id: number;
  baudRate: number;
  dataBit: number;
  stopBit: string;
  parityBit: string;
  protocolType: string;
}

const interfaceData = ref<ItemList[]>([]);
const interfaceItem = ref<InterfaceItem>();
const verificationAgreement = ref<VerificationAgreement[]>([]);

const protocolList = ref<ProtocolListPageItem[]>([]);

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

const protocolColumns = [
  {
    title: t('setupProtocol.protocolParamFields.paramName'),
    dataIndex: 'paramName',
    key: 'paramName',
  },
  {
    title: t('setupProtocol.protocolParamFields.paramCode'),
    dataIndex: 'paramCode',
    key: 'paramCode',
  },
  {
    title: t('registerGateway.monitoringResults'),
    dataIndex: 'deviceType',
    key: 'deviceType',
  },
  {
    title: t('registerGateway.resultData'),
    dataIndex: 'deviceType',
    key: 'deviceType',
  },
];

const interfaceAdd = (value: number | string) => {
  interfaceList.forEach((item) => {
    if (item.id === value) {
      const { baudRate, dataBit, stopBit, parityBit, id, protocolType } = item;
      interfaceItem.value = {
        baudRate,
        dataBit,
        stopBit,
        parityBit,
        id,
        protocolType,
      };
    }
  });
  if (interfaceItem.value) {
    postVerificationAgreement(interfaceItem.value.id);
  }
};

const addList = () => {
  postGatewayLinkProtocolList(Number(activeKey.value));
};

const postGatewayLinkProtocolList = (value: number) => {
  handleRequest(async () => {
    const { records } = await gatewayLinkProtocolList<ProtocolListPageItemData>({
      pageIndex: 1,
      pageSize: 10,
      id: value,
    });

    protocolList.value = records;
  });
};

const postVerificationAgreement = (id: number) => {
  handleRequest(async () => {
    verificationAgreement.value = await gatewayLinkList(id);
    if (verificationAgreement.value.length) {
      activeKey.value = verificationAgreement.value[0].id;
      postGatewayLinkProtocolList(activeKey.value);
    }
  });
};

onMounted(() => {
  handleRequest(async () => {
    interfaceList = await gatewayLinkGetList(props.form.id);
    if (interfaceList.length) {
      const { baudRate, dataBit, stopBit, parityBit, id, protocolType } = interfaceList[0];
      interfaceItem.value = {
        baudRate,
        dataBit,
        stopBit,
        parityBit,
        id,
        protocolType,
      };
      interfaceValue.value = id;
      interfaceList.forEach((item) => {
        const { baudRate, dataBit, stopBit, parityBit, id, protocolType, linkName } = item;
        interfaceData.value.push({
          value: id,
          payload: linkName,
          baudRate,
          dataBit,
          stopBit,
          parityBit,
          id,
          protocolType,
        });
      });

      postVerificationAgreement(id);
    }
  });
});
</script>

<template>
  <div style="width: 1092px; padding-right: 40px">
    <div>
      <div class="use-guide-title">{{ $t('registerGateway.verificationAgreement') }}</div>
      <div class="use-guide-description" style="margin-bottom: 40px">文字描述</div>
      <ADivider />
    </div>
    <ARow>
      <ACol :span="12">
        <ASegmented
          class="agreement-segmented"
          v-model:value="interfaceValue"
          :options="interfaceData"
          @change="interfaceAdd"
        >
          <template #label="{ payload }">
            <div style="padding: 4px">
              <div>{{ payload }}</div>
            </div>
          </template>
        </ASegmented>
      </ACol>
      <ACol :span="12">
        <AFlex justify="flex-end">
          <span class="but-text">{{ $t('registerGateway.gatewayLog') }}</span>
          <AButton class="remote-debugging" type="primary" ghost>{{ $t('registerGateway.remoteDebugging') }}</AButton>
          <AButton type="primary" ghost>{{ $t('registerGateway.gatewayConfiguration') }}</AButton>
        </AFlex>
      </ACol>
    </ARow>

    <div class="agreement-text">
      <span>{{ $t('setupProtocol.protocolType') }}：</span> <span>{{ interfaceItem?.protocolType }}</span>
      <span class="agreement-text1">{{ $t('setupProtocol.baudRate') }}：</span>
      <span>{{ interfaceItem?.baudRate }}</span>
      <span class="agreement-text1">{{ $t('setupProtocol.dataBit') }}：</span>
      <span>{{ interfaceItem?.dataBit }}</span>
      <span class="agreement-text1">{{ $t('setupProtocol.stopBit') }}：</span>
      <span>{{ interfaceItem?.stopBit }}</span>
      <span class="agreement-text1">{{ $t('setupProtocol.parityBit') }}：</span>
      <span>{{ interfaceItem?.parityBit }}</span>
    </div>
    <ACollapse v-model:active-key="activeKey" class="protocol-collapse" @change="addList" accordion>
      <ACollapsePanel v-for="item in verificationAgreement" :key="item.id">
        <template #header>
          <span class="header-text">{{ $t('registerGateway.station') }}{{ item.station }}</span>
          <span class="header-text1">{{ $t('registerGateway.communicationProtocol') }}:{{ item.protocolName }}</span>
        </template>
        <template #extra>
          <AFlex>
            <span class="header-text2">
              <span>{{ $t('registerGateway.regularReportingFrequency') }}: </span>
              <span>{{ item.dataSendInterval }}s</span>
            </span>
            <span class="header-text2">
              <span>{{ $t('registerGateway.highFrequencyReportingFrequency') }}: </span>
              <span>{{ item.highFreqSendInterval }}s</span>
            </span>
            <span class="but-text" style="width: 75px; height: 24px">{{
              $t('registerGateway.refreshData')
            }}</span></AFlex
          >
        </template>
        <AFlex>
          <ATable
            style="width: 100%"
            row-key="id"
            :columns="protocolColumns"
            :data-source="protocolList"
            :pagination="false"
          />
        </AFlex>
      </ACollapsePanel>
    </ACollapse>
  </div>
</template>

<style lang="scss" scoped>
:deep(.agreement-segmented .ant-segmented-item-selected) {
  border-radius: 8px;
}

.agreement-content-left {
  width: 240px;
  border-right: 2px solid #e4e7ed; /* 只设置右边框 */
}

.gateway-log {
  color: #32bac0;
}

.remote-debugging {
  margin-right: 16px;
}

.agreement-text {
  margin-top: 20px;
  margin-bottom: 15px;
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 24px;
  color: #333;
  text-align: left;
}

.agreement-text1 {
  margin-left: 40px;
}

.header-text {
  margin-right: 15px;
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 24px;
  color: #333;
  text-align: left;
}

.header-text1 {
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 24px;
  color: #666;
  text-align: left;
}

.header-text2 {
  margin-right: 32px;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px;
  color: #666;
  text-align: left;
}

.but-text {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 108px;
  height: 32px;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px;
  color: #32bac0;
  text-align: left;
  cursor: pointer;
}
</style>