perf(views): 优化“网关列表” UI

src/views/gateway-list/GatewayList.vue

@@ -4,7 +4,7 @@ import { onMounted, ref } from 'vue';
 import { useRequest } from '@/hooks/request';
 import { gatewayLinkGetList, gatewayLinkList, gatewayList } from '@/api';
 
-import type { GatewayListItem, InterfaceData, VerificationAgreement } from '@/types';
+import type { GatewayListItem, GatewayQuery, InterfaceData, VerificationAgreement } from '@/types';
 
 const gatewayColumns = [
   {
@@ -16,16 +16,19 @@ const gatewayColumns = [
     title: '序列号',
     dataIndex: 'snCode',
     key: 'snCode',
+    ellipsis: true,
   },
   {
     title: '型号',
     dataIndex: 'modelName',
     key: 'modelName',
+    ellipsis: true,
   },
   {
     title: '在线状态',
     dataIndex: 'state',
     key: 'state',
+    ellipsis: true,
   },
 ];
 
@@ -48,24 +51,24 @@ const agreementColumns = [
 ];
 
 const gatewayData = ref<GatewayListItem[]>([]);
-
 const interfaceList = ref<InterfaceData[]>([]);
-
 const agreementList = ref<VerificationAgreement[]>([]);
-
 const activeKey = ref();
+const gatewayQuery = ref<GatewayQuery>({
+  pageIndex: 1,
+  pageSize: 10,
+  searchContent: '',
+  state: -1,
+  total: 0,
+});
 
 const { handleRequest } = useRequest();
 const addGatewayList = () => {
   handleRequest(async () => {
-    const { records } = await gatewayList({
-      pageIndex: 1,
-      pageSize: 10,
-      searchContent: '',
-      state: -1,
-    });
+    const { records, total } = await gatewayList(gatewayQuery.value);
     if (records.length) {
       gatewayData.value = records;
+      gatewayQuery.value.total = total;
       postLinkGetList(gatewayData.value[0].id);
     }
   });
@@ -85,10 +88,16 @@ const postLinkGetList = (id: number) => {
   handleRequest(async () => {
     interfaceList.value = await gatewayLinkGetList(id);
     if (interfaceList.value.length) {
+      activeKey.value = interfaceList.value[0].id;
       agreementList.value = await gatewayLinkList(interfaceList.value[0].id);
     }
   });
 };
+
+const switchPages = () => {
+  addGatewayList();
+};
+
 onMounted(() => {
   addGatewayList();
 });
@@ -96,44 +105,203 @@ onMounted(() => {
 
 <template>
   <div>
-    网关列表
-
-    <AButton class="button" type="primary" @click="addGatewayList">查询</AButton>
-
-    <ARow>
-      <ACol :span="12">
-        <ATable
-          :columns="gatewayColumns"
-          :data-source="gatewayData"
-          :row-key="(record) => record.id"
-          :custom-row="rowClick"
-        >
-          <template #bodyCell="{ column, record, index }">
-            <template v-if="column.key === 'index'">
-              {{ index + 1 }}
-            </template>
-            <template v-else-if="column.key === 'state'">
-              {{ record.state === 0 ? '离线' : '在线' }}
-            </template>
-          </template>
-        </ATable>
-      </ACol>
-      <ACol :span="12">
-        <ACollapse v-model:active-key="activeKey" accordion>
-          <ACollapsePanel v-for="item in interfaceList" :key="item.id">
-            <template #header>
-              <span>物理接口 {{ item.linkName }}</span>
+    <AFlex justify="space-between">
+      <div class="text-top">设备管理</div>
+      <div>
+        <AButton class="deletion-button icon-button default-button">
+          <AFlex align="center">
+            <SvgIcon name="delete" />
+
+            <span> 删除 </span>
+          </AFlex>
+        </AButton>
+        <AButton type="primary" class="icon-button">
+          <AFlex align="center">
+            <SvgIcon name="plus" />
+            <span> 添加 </span>
+          </AFlex>
+        </AButton>
+      </div>
+    </AFlex>
+
+    <div class="gateway-content">
+      <ARow>
+        <ACol :span="12" class="gateway-left">
+          <AFlex justify="space-between" align="center" class="gateway-left-top">
+            <div class="gateway-left-top-text">网关列表</div>
+            <AButton type="text" class="icon-button gateway-left-top-icon">
+              <AFlex align="center">
+                <SvgIcon name="refresh-o" />
+                <span> 刷新数据 </span>
+              </AFlex>
+            </AButton>
+          </AFlex>
+
+          <AFlex justify="space-between" align="center" class="input-bottom">
+            <div>
+              <span class="gateway-left-text">搜索</span>
+              <AInput v-model:value="gatewayQuery.searchContent" placeholder="请输入序列号、型号" class="input-width" />
+            </div>
+            <div>
+              <span class="gateway-left-text">状态</span>
+              <ASelect placeholder="请选择" class="select-width" />
+            </div>
+          </AFlex>
+
+          <AFlex justify="flex-end">
+            <AButton type="primary" class="query-button" @click="addGatewayList">查询</AButton>
+            <AButton class="default-button">重置</AButton>
+          </AFlex>
+
+          <ATable
+            :columns="gatewayColumns"
+            :data-source="gatewayData"
+            :row-key="(record) => record.id"
+            :custom-row="rowClick"
+            :pagination="false"
+          >
+            <template #bodyCell="{ column, record, index }">
+              <template v-if="column.key === 'index'">
+                {{ index + 1 }}
+              </template>
+              <template v-else-if="column.key === 'state'">
+                {{ record.state === 0 ? '离线' : '在线' }}
+              </template>
             </template>
-            <ATable :columns="agreementColumns" :data-source="agreementList" :pagination="false" />
-          </ACollapsePanel>
-        </ACollapse>
-      </ACol>
-    </ARow>
+          </ATable>
+
+          <AFlex justify="flex-end" class="gateway-left-footer">
+            <APagination
+              v-model:current="gatewayQuery.pageIndex"
+              v-model:page-size="gatewayQuery.pageSize"
+              :total="gatewayQuery.total"
+              :show-size-changer="true"
+              @change="switchPages"
+              show-quick-jumper
+              :show-total="(total) => `共有${total}条`"
+            />
+          </AFlex>
+        </ACol>
+        <ACol :span="12" class="gateway-right">
+          <AFlex justify="space-between" align="center" class="gateway-right-top">
+            <div class="gateway-left-top-text">网关配置</div>
+            <AButton type="text" class="icon-button gateway-left-top-icon">
+              <AFlex align="center">
+                <SvgIcon name="edit-o" />
+                <span> 编辑 </span>
+              </AFlex>
+            </AButton>
+          </AFlex>
+          <ACollapse v-model:active-key="activeKey" accordion v-if="interfaceList.length">
+            <ACollapsePanel v-for="item in interfaceList" :key="item.id">
+              <template #header>
+                <span>物理接口 {{ item.linkName }}</span>
+              </template>
+              <div class="gateway-right-text">协议类型: {{ item.protocolType }}</div>
+              <ATable :columns="agreementColumns" :data-source="agreementList" :pagination="false" />
+            </ACollapsePanel>
+          </ACollapse>
+        </ACol>
+      </ARow>
+    </div>
   </div>
 </template>
 
 <style lang="scss" scoped>
-.button {
-  margin: 30px 0;
+.gateway-left-footer {
+  margin-top: 24px;
+}
+
+.gateway-right-text {
+  margin-bottom: 16px;
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: 24px;
+  color: rgb(0 0 0 / 85%);
+  text-align: left;
+}
+
+.gateway-right-top {
+  margin-bottom: 16px;
+}
+
+.query-button {
+  margin-right: 12px;
+  margin-bottom: 16px;
+}
+
+.input-bottom {
+  margin-bottom: 16px;
+}
+
+.select-width {
+  width: 192px;
+}
+
+.input-width {
+  width: 192px;
+}
+
+.gateway-left-text {
+  margin-right: 12px;
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 22px;
+  color: rgb(0 0 0 / 85%);
+  text-align: right;
+}
+
+.gateway-left-top-icon {
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 24px;
+  color: #666;
+  text-align: left;
+}
+
+.gateway-left-top-text {
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 600;
+  line-height: 24px;
+  color: #333;
+  text-align: left;
+}
+
+.gateway-left-top {
+  margin-bottom: 24px;
+}
+
+.gateway-left {
+  padding: 24px;
+}
+
+.gateway-right {
+  padding: 24px;
+  border-left: 1px solid #e4e7ed;
+}
+
+.gateway-content {
+  margin-top: 24px;
+  background: #fff;
+  border-radius: 16px;
+}
+
+.text-top {
+  font-size: 20px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: 28px;
+  color: rgb(0 0 0 / 85%);
+  text-align: left;
+}
+
+.deletion-button {
+  width: 84px;
+  height: 32px;
+  margin-right: 16px;
 }
 </style>