feat: history diag card (basically)

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

@@ -8,6 +8,7 @@ import { computed, ref, toRefs } from 'vue';
 import DeviceHeaderCard from './current-diag-card/device-header-card.vue';
 import DeviceHardwareCard from './current-diag-card/device-hardware-card.vue';
 import SwitchPortCard from './current-diag-card/switch-port-card.vue';
+import SwitchHistoryDiagCard from './history-diag-card/switch-history-diag-card.vue';
 
 const props = defineProps<{
   stationCode: string;
@@ -41,11 +42,14 @@ const selectedTab = ref('设备状态');
           <SwitchPortCard :port-info-list="portInfoList" />
         </NFlex>
       </NTabPane>
-      <NTabPane name="历史诊断" tab="历史诊断"></NTabPane>
+      <NTabPane name="历史诊断" tab="历史诊断">
+        <!-- 历史诊断组件中包含请求逻辑，当改变选择的设备时需要重新发起请求，因此添加显式的key触发组件的更新 -->
+        <SwitchHistoryDiagCard :station-code="stationCode" :ndm-switch="ndmSwitch" :key="ndmSwitch.id" />
+      </NTabPane>
       <!-- <NTabPane name="设备配置" tab="设备配置"></NTabPane> -->
-      <!-- <NTabPane name="原始数据" tab="原始数据">
+      <NTabPane name="原始数据" tab="原始数据">
         <pre>{{ { ...ndmSwitch, lastDiagInfo } }}</pre>
-      </NTabPane> -->
+      </NTabPane>
     </NTabs>
   </NCard>
 </template>