feat: history diag card (basically)

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

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