feat(views): 初步完成“网关列表”页面各步骤基本功能

src/views/gateway-list/GatewayList.vue

@@ -1,3 +1,139 @@
+<script setup lang="ts">
+import { onMounted, ref } from 'vue';
+
+import { useRequest } from '@/hooks/request';
+import { gatewayLinkGetList, gatewayLinkList, gatewayList } from '@/api';
+
+import type { GatewayListItem, InterfaceData, VerificationAgreement } from '@/types';
+
+const gatewayColumns = [
+  {
+    title: '序号',
+    dataIndex: 'index',
+    key: 'index',
+  },
+  {
+    title: '序列号',
+    dataIndex: 'snCode',
+    key: 'snCode',
+  },
+  {
+    title: '型号',
+    dataIndex: 'modelName',
+    key: 'modelName',
+  },
+  {
+    title: '在线状态',
+    dataIndex: 'state',
+    key: 'state',
+  },
+];
+
+const agreementColumns = [
+  {
+    title: '站号',
+    dataIndex: 'station',
+    key: 'station',
+  },
+  {
+    title: '协议',
+    dataIndex: 'protocolName',
+    key: 'protocolName',
+  },
+  {
+    title: '关联设备',
+    dataIndex: 'dev',
+    key: 'dev',
+  },
+];
+
+const gatewayData = ref<GatewayListItem[]>([]);
+
+const interfaceList = ref<InterfaceData[]>([]);
+
+const agreementList = ref<VerificationAgreement[]>([]);
+
+const activeKey = ref();
+
+const { handleRequest } = useRequest();
+const addGatewayList = () => {
+  handleRequest(async () => {
+    const { records } = await gatewayList({
+      pageIndex: 1,
+      pageSize: 10,
+      searchContent: '',
+      state: -1,
+    });
+    if (records.length) {
+      gatewayData.value = records;
+      postLinkGetList(gatewayData.value[0].id);
+    }
+  });
+};
+
+const rowClick = (record: GatewayListItem) => {
+  return {
+    onClick: () => {
+      console.log(record);
+      console.log(123);
+      postLinkGetList(record.id);
+    },
+  };
+};
+
+const postLinkGetList = (id: number) => {
+  handleRequest(async () => {
+    interfaceList.value = await gatewayLinkGetList(id);
+    if (interfaceList.value.length) {
+      agreementList.value = await gatewayLinkList(interfaceList.value[0].id);
+    }
+  });
+};
+onMounted(() => {
+  addGatewayList();
+});
+</script>
+
 <template>
-  <div>网关列表</div>
+  <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>
+            </template>
+            <ATable :columns="agreementColumns" :data-source="agreementList" :pagination="false" />
+          </ACollapsePanel>
+        </ACollapse>
+      </ACol>
+    </ARow>
+  </div>
 </template>
+
+<style lang="scss" scoped>
+.button {
+  margin: 30px 0;
+}
+</style>