perf(views): 优化“协议验证”步骤 UI

src/views/register-gateway/VerifyProtocol.vue

@@ -1,14 +1,15 @@
 <script setup lang="ts">
 import { onMounted, ref } from 'vue';
 
+import SvgIcon from '@/components/SvgIcon.vue';
 import { useRequest } from '@/hooks/request';
 import { t } from '@/i18n';
-import { gatewayLinkGetList, gatewayLinkList, gatewayLinkProtocolList } from '@/api';
+import { gatewayLinkGetList, gatewayLinkList, gatewayParameterList } from '@/api';
 
+import type { Key } from 'ant-design-vue/es/table/interface';
 import type {
+  GatewayParameterItem,
   InterfaceData,
-  ProtocolListPageItem,
-  ProtocolListPageItemData,
   RegisterGatewayForm,
   UseGuideStepItemProps,
   VerificationAgreement,
@@ -46,7 +47,7 @@ const interfaceData = ref<ItemList[]>([]);
 const interfaceItem = ref<InterfaceItem>();
 const verificationAgreement = ref<VerificationAgreement[]>([]);
 
-const protocolList = ref<ProtocolListPageItem[]>([]);
+const protocolList = ref<GatewayParameterItem[]>([]);
 
 const props = defineProps<UseGuideStepItemProps<RegisterGatewayForm>>();
 
@@ -55,21 +56,25 @@ const protocolColumns = [
     title: t('setupProtocol.protocolParamFields.paramName'),
     dataIndex: 'paramName',
     key: 'paramName',
+    ellipsis: true,
   },
   {
     title: t('setupProtocol.protocolParamFields.paramCode'),
     dataIndex: 'paramCode',
     key: 'paramCode',
+    ellipsis: true,
   },
   {
     title: t('registerGateway.monitoringResults'),
-    dataIndex: 'deviceType',
-    key: 'deviceType',
+    dataIndex: 'monitorStatus',
+    key: 'monitorStatus',
+    ellipsis: true,
   },
   {
     title: t('registerGateway.resultData'),
-    dataIndex: 'deviceType',
-    key: 'deviceType',
+    dataIndex: 'value',
+    key: 'value',
+    ellipsis: true,
   },
 ];
 
@@ -92,18 +97,20 @@ const interfaceAdd = (value: number | string) => {
   }
 };
 
-const addList = () => {
-  postGatewayLinkProtocolList(Number(activeKey.value));
+const addList = (key: Key | Key[]) => {
+  if (key) {
+    postGatewayLinkProtocolList(Number(activeKey.value));
+  }
 };
 
 const postGatewayLinkProtocolList = (value: number) => {
   handleRequest(async () => {
-    const { records } = await gatewayLinkProtocolList<ProtocolListPageItemData>({
+    const { records } = await gatewayParameterList({
       pageIndex: 1,
       pageSize: 10,
-      id: value,
+      gatewayLinkProtocolId: value,
+      gatewayId: props.form.id,
     });
-
     protocolList.value = records;
   });
 };
@@ -118,6 +125,12 @@ const postVerificationAgreement = (id: number) => {
   });
 };
 
+const addRefresh = (id: number) => {
+  if (id) {
+    postGatewayLinkProtocolList(id);
+  }
+};
+
 onMounted(() => {
   handleRequest(async () => {
     interfaceList = await gatewayLinkGetList(props.form.id);
@@ -153,12 +166,7 @@ onMounted(() => {
 </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>
+  <div class="verification-agreement">
     <ARow>
       <ACol :span="12">
         <ASegmented
@@ -166,21 +174,15 @@ onMounted(() => {
           v-model:value="interfaceValue"
           :options="interfaceData"
           @change="interfaceAdd"
+          size="large"
         >
           <template #label="{ payload }">
-            <div style="padding: 4px">
+            <div class="agreement-padding">
               <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">
@@ -194,14 +196,20 @@ onMounted(() => {
       <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>
+    <ACollapse
+      v-model:active-key="activeKey"
+      class="protocol-collapse"
+      @change="addList"
+      accordion
+      collapsible="header"
+    >
       <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>
+          <AFlex align="center">
             <span class="header-text2">
               <span>{{ $t('registerGateway.regularReportingFrequency') }}: </span>
               <span>{{ item.dataSendInterval }}s</span>
@@ -210,19 +218,24 @@ onMounted(() => {
               <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
-          >
+            <AButton class="icon-button but-text" type="text" @click="addRefresh(item.id)">
+              <SvgIcon name="refresh-o" />
+              {{ $t('registerGateway.refreshData') }}
+            </AButton>
+          </AFlex>
         </template>
         <AFlex>
-          <ATable
-            style="width: 100%"
-            row-key="id"
-            :columns="protocolColumns"
-            :data-source="protocolList"
-            :pagination="false"
-          />
+          <ATable row-key="id" :columns="protocolColumns" :data-source="protocolList" :pagination="false">
+            <template #bodyCell="{ column, record }">
+              <template v-if="column.key === 'monitorStatus'">
+                <AFlex align="center">
+                  <div v-if="record.monitorStatus === 1" class="monitor-status-div monitor-status-success"></div>
+                  <div v-else class="monitor-status-div monitor-status-failure"></div>
+                  {{ record.monitorStatus === 1 ? $t('common.success') : $t('common.failure') }}
+                </AFlex>
+              </template>
+            </template>
+          </ATable>
         </AFlex>
       </ACollapsePanel>
     </ACollapse>
@@ -230,8 +243,36 @@ onMounted(() => {
 </template>
 
 <style lang="scss" scoped>
-:deep(.agreement-segmented .ant-segmented-item-selected) {
-  border-radius: 8px;
+:deep(.ant-segmented .ant-segmented-group) {
+  padding: 4px;
+}
+
+.monitor-status-failure {
+  background: #f56c6c;
+}
+
+.monitor-status-success {
+  background: #67c23a;
+}
+
+.monitor-status-div {
+  width: 6px;
+  height: 6px;
+  margin-right: 8px;
+  border-radius: 50%;
+}
+
+.agreement-segmented {
+  color: var(--antd-color-primary-hover);
+  background-color: #e1f5f6;
+}
+
+:deep(.agreement-segmented) {
+  .ant-segmented-item-selected {
+    color: #fff;
+    background-color: var(--antd-color-primary-hover);
+    border-radius: 8px;
+  }
 }
 
 .agreement-content-left {
@@ -240,7 +281,7 @@ onMounted(() => {
 }
 
 .gateway-log {
-  color: #32bac0;
+  color: var(--antd-color-primary-hover);
 }
 
 .remote-debugging {
@@ -301,7 +342,7 @@ onMounted(() => {
   font-style: normal;
   font-weight: 400;
   line-height: 24px;
-  color: #32bac0;
+  color: var(--antd-color-primary-hover);
   text-align: left;
   cursor: pointer;
 }