历史记录查看详情实现

src/components/setting/History.vue

@@ -12,7 +12,7 @@ import HistoryDetail from './HistoryDetail.vue'
 const tableData = ref<string[]>([])
 const selectedRecords = ref<Setting.History[]>([])
 const visible = ref(false)
-
+const detailData = ref()
 onMounted(() => {
   getRecord()
 })
@@ -42,7 +42,9 @@ const showDetail = (historyItem: Setting.History) => {
       logName: historyItem.name,
     },
   }
-  syncSendCmd(detailParams).then(() => {
+  syncSendCmd(detailParams).then((res) => {
+    // 把值附给详情的列表
+    detailData.value = res.rely
     visible.value = true
   })
 }
@@ -141,7 +143,7 @@ const deleteBtnVisible = computed(() => {
     </div>
     <ft-dialog v-model="visible" title="消毒详情" width="80vw" @cancel="onClose">
       <div>
-        <HistoryDetail />
+        <HistoryDetail :data="detailData" />
       </div>
     </ft-dialog>
   </div>

src/components/setting/HistoryDetail.vue

@@ -1,14 +1,17 @@
 <script lang="ts" setup>
 import { computed, ref } from 'vue'
 
+// 定义 props 接收数据
+const props = defineProps({
+  data: {
+    type: Array,
+    required: true,
+    default: () => [] as string[], // Proper default value with type
+  },
+})
 // 原始数据列表
-const rawData = ref<string[]>([
-  '时间,设备状态,HO2O2-0,T-0,RH-0,RS-0,D值,当前LOG,目标LOG,注液速率,消毒剂剩余量(g),预计剩余时间,',
-  '2023-03-28 12:57:54,预热,N/A,N/A,N/A,N/A,0,\"0.00\",1,10,1000,N/A,',
-  '2023-03-28 12:57:58,预热,N/A,N/A,N/A,N/A,0,\"0.00\",1,10,1000,00:01:58,',
-  '2023-03-28 12:57:59,消毒结束,N/A,N/A,N/A,N/A,0,\"0.00\",1,10,1000,00:00:00,',
-])
-
+const rawData = ref<string[]>([])
+rawData.value = [...props.data]
 // 解析表头
 const tableHeaders = computed(() => {
   if (rawData.value.length === 0) {