feat: history diag card (basically)

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

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