feat: SwitchPortHistoryDiagCard

src/components/device-page/device-card/history-diag-card/switch-history-diag-card.vue

@@ -7,6 +7,7 @@ import { computed, onMounted, reactive, toRefs, useTemplateRef } from 'vue';
 import DeviceStatusHistoryDiagCard from './device-status-history-diag-card.vue';
 import DeviceAlarmHistoryDiagCard from './device-alarm-history-diag-card.vue';
 import DeviceUsageHistoryDiagCard from './device-usage-history-diag-card.vue';
+import SwitchPortHistoryDiagCard from './switch-port-history-diag-card.vue';
 
 const props = defineProps<{
   stationCode: string;
@@ -22,18 +23,23 @@ const searchFields = reactive({
 type DeviceStatusHistoryDiagCardInst = InstanceType<typeof DeviceStatusHistoryDiagCard> | null;
 type DeviceAlarmHistoryDiagCardInst = InstanceType<typeof DeviceAlarmHistoryDiagCard> | null;
 type DeviceUsageHistoryDiagCardInst = InstanceType<typeof DeviceUsageHistoryDiagCard> | null;
+type SwitchPortHistoryDiagCardInst = InstanceType<typeof SwitchPortHistoryDiagCard> | null;
 const deviceStatusHistoryDiagCardRef = useTemplateRef<DeviceStatusHistoryDiagCardInst>('deviceStatusHistoryDiagCardRef');
 const deviceAlarmHistoryDiagCardRef = useTemplateRef<DeviceAlarmHistoryDiagCardInst>('deviceAlarmHistoryDiagCardRef');
 const deviceUsageHistoryDiagCardRef = useTemplateRef<DeviceUsageHistoryDiagCardInst>('deviceUsageHistoryDiagCardRef');
+const switchPortHistoryDiagCardRef = useTemplateRef<SwitchPortHistoryDiagCardInst>('switchPortHistoryDiagCardRef');
 
 function refreshData() {
   deviceStatusHistoryDiagCardRef.value?.refresh();
   deviceAlarmHistoryDiagCardRef.value?.refresh();
   deviceUsageHistoryDiagCardRef.value?.refresh();
+  switchPortHistoryDiagCardRef.value?.refresh();
 }
 
 const loading = computed(() => {
-  return deviceStatusHistoryDiagCardRef.value?.isPending || deviceAlarmHistoryDiagCardRef.value?.isPending || deviceUsageHistoryDiagCardRef.value?.isPending;
+  return (
+    deviceStatusHistoryDiagCardRef.value?.isPending || deviceAlarmHistoryDiagCardRef.value?.isPending || deviceUsageHistoryDiagCardRef.value?.isPending || switchPortHistoryDiagCardRef.value?.isPending
+  );
 });
 
 onMounted(() => {
@@ -72,6 +78,7 @@ onMounted(() => {
         :cpu-usage-field="'cpuRatio'"
         :mem-usage-field="'memoryRatio'"
       />
+      <SwitchPortHistoryDiagCard :ref="'switchPortHistoryDiagCardRef'" :station-code="stationCode" :ndm-switch="ndmSwitch" :date-time-range="searchFields.dateTimeRange" />
     </NFlex>
   </NCard>
 </template>

src/components/device-page/device-card/history-diag-card/switch-port-history-diag-card.vue

@@ -0,0 +1,188 @@
+<script setup lang="ts">
+import type { NdmSwitchDiagInfo, NdmSwitchPortInfo } from '@/apis/domains';
+import type { NdmSwitchResultVO, PageParams } from '@/apis/models';
+import { postSnmpLogPage } from '@/apis/requests';
+import { useMutation } from '@tanstack/vue-query';
+import dayjs from 'dayjs';
+import destr from 'destr';
+import { NButton, NCard, NDataTable, NModal, type DataTableColumns, type DataTableRowData, type DatePickerProps, type PaginationProps } from 'naive-ui';
+import { h, reactive, ref, toRefs } from 'vue';
+import { getPortStatusVal, transformPortSpeed } from '../../helper';
+
+const props = defineProps<{
+  stationCode: string;
+  ndmSwitch: NdmSwitchResultVO;
+  dateTimeRange: DatePickerProps['value'];
+}>();
+
+const { stationCode, ndmSwitch, dateTimeRange } = toRefs(props);
+
+const modalShow = ref(false);
+
+const modalTableColumns: DataTableColumns<NdmSwitchPortInfo> = [
+  { title: '端口名称', key: 'portName' },
+  {
+    title: '状态',
+    key: 'upDown',
+    render(rowData) {
+      return getPortStatusVal(rowData);
+    },
+  },
+  {
+    title: '上行速率',
+    key: 'inFlow',
+    render(rowData) {
+      return transformPortSpeed(rowData, 'in');
+    },
+  },
+  {
+    title: '下行速率',
+    key: 'outFlow',
+    render(rowData) {
+      return transformPortSpeed(rowData, 'out');
+    },
+  },
+  {
+    title: '总速率',
+    key: 'totalFlow',
+    render(rowData) {
+      return transformPortSpeed(rowData, 'total');
+    },
+  },
+];
+
+const modalTableData = ref<DataTableRowData[]>([]);
+
+type SwitchPortRowData = {
+  createdTime: string;
+  diagInfo: NdmSwitchDiagInfo;
+};
+
+const tableColumns: DataTableColumns<SwitchPortRowData> = [
+  { title: '诊断时间', key: 'createdTime' },
+  {
+    title: '超载端口',
+    key: 'overFlowPorts',
+    render(rowData) {
+      const { diagInfo } = rowData;
+      const { info } = diagInfo;
+      const { overFlowPorts } = info;
+      return `${overFlowPorts.join(', ')}`;
+    },
+  },
+  {
+    title: '操作',
+    key: 'action',
+    render(rowData) {
+      return h(
+        NButton,
+        {
+          text: true,
+          type: 'info',
+          onClick: () => {
+            const { diagInfo } = rowData;
+            if (!diagInfo) return;
+            modalShow.value = true;
+            console.log('查看', diagInfo);
+            modalTableData.value = diagInfo.info.portInfoList;
+          },
+        },
+        { default: () => '查看' },
+      );
+    },
+  },
+  //
+];
+
+const tableData = ref<DataTableRowData[]>([]);
+const DEFAULT_PAGE_SIZE = 10;
+const pagination = reactive<PaginationProps>({
+  size: 'small',
+  showSizePicker: true,
+  page: 1,
+  pageSize: DEFAULT_PAGE_SIZE,
+  pageSizes: [5, 10, 20, 50, 80, 100],
+  itemCount: 0,
+  prefix: ({ itemCount }) => {
+    return h('div', {}, { default: () => `共${itemCount}条` });
+  },
+  onUpdatePage: (page) => {
+    pagination.page = page;
+    getDeviceSnmpLogList();
+  },
+  onUpdatePageSize: (pageSize) => {
+    pagination.pageSize = pageSize;
+    pagination.page = 1;
+    getDeviceSnmpLogList();
+  },
+});
+
+const { mutate: getDeviceSnmpLogList, isPending } = useMutation({
+  mutationFn: async () => {
+    if (!dateTimeRange.value) throw new Error('请选择时间范围');
+    const range = dateTimeRange.value as [number, number];
+    const deviceId = ndmSwitch.value.id;
+    const createdTime_precisest = dayjs(range[0]).format('YYYY-MM-DD HH:mm:ss');
+    const createdTime_preciseed = dayjs(range[1]).format('YYYY-MM-DD HH:mm:ss');
+    const restParams: Omit<PageParams<{ id: string }>, 'model' | 'extra'> = {
+      current: pagination.page ?? 1,
+      size: pagination.pageSize ?? DEFAULT_PAGE_SIZE,
+      sort: 'id',
+      order: 'descending',
+    };
+    const respData = await postSnmpLogPage(stationCode.value, {
+      model: { deviceId },
+      extra: { createdTime_precisest, createdTime_preciseed },
+      ...restParams,
+    });
+    return respData;
+  },
+  onSuccess: ({ records, size, total }) => {
+    pagination.pageSize = parseInt(size);
+    pagination.itemCount = parseInt(total);
+    tableData.value = records.map((record) => {
+      const diagInfoJsonString = record.diagInfo;
+      const diagInfo = destr<NdmSwitchDiagInfo>(diagInfoJsonString);
+      if (!diagInfo) return {};
+      if (typeof diagInfo !== 'object') return {};
+      return {
+        createdTime: record.createdTime,
+        diagInfo,
+      };
+    });
+  },
+  onError: (error) => {
+    console.error(error);
+    window.$message.error(error.message);
+  },
+});
+
+defineExpose({
+  isPending,
+  refresh: () => {
+    pagination.page = 1;
+    pagination.pageSize = DEFAULT_PAGE_SIZE;
+    getDeviceSnmpLogList();
+  },
+});
+</script>
+
+<template>
+  <NCard size="small" title="端口历史记录">
+    <NDataTable size="small" :loading="isPending" :columns="tableColumns" :data="tableData" :pagination="pagination" :single-line="false" remote flex-height style="height: 500px" />
+  </NCard>
+  <NModal
+    v-model:show="modalShow"
+    :preset="'card'"
+    :auto-focus="false"
+    :transform-origin="'center'"
+    :content-style="{
+      height: '100%',
+    }"
+    style="min-width: 1400px; height: 100vh"
+  >
+    <NDataTable size="small" :columns="modalTableColumns" :data="modalTableData" :single-line="false" :remote="false" flex-height style="height: 100%" />
+  </NModal>
+</template>
+
+<style scoped></style>