基本完成v1.0

pc-cattle-transportation/src/views/earlywarning/list.vue

@@ -61,18 +61,29 @@
                     </template>
                 </el-table-column>
                 <el-table-column prop="warningTime" label="预警时间" />
+                <el-table-column label="操作" width="120" fixed="right">
+                    <template #default="scope">
+                        <el-button type="primary" link @click="viewDetail(scope.row)">查看详情</el-button>
+                    </template>
+                </el-table-column>
             </el-table>
             <pagination v-model:limit="form.pageSize" v-model:page="form.pageNum" :total="form1.total" @pagination="getList" />
         </div>
+        
+        <!-- 预警详情对话框 -->
+        <warning-detail-dialog ref="detailDialogRef" />
     </div>
 </template>
 <script setup>
 import { onMounted, reactive, ref } from 'vue';
+import { ElMessage } from 'element-plus';
 import baseSearch from '@/components/common/searchCustom/index.vue';
-import { warningLogList } from '~/api/hardware.js';
+import warningDetailDialog from './warningDetailDialog.vue';
+import { warningLogList, warningDetail } from '~/api/hardware.js';
 
 const dataListLoading = ref(false);
 const baseSearchRef = ref();
+const detailDialogRef = ref();
 const form = reactive({
     pageSize: 10,
     pageNum: 1,
@@ -92,7 +103,7 @@ const searchFrom = () => {
 };
 
 const searchChange = (val) => {
-    console.log('Search change:', val);
+
     // 在这里可以处理搜索条件变化的逻辑
 };
 
@@ -160,6 +171,50 @@ const getList = () => {
             dataListLoading.value = false;
         });
 };
+
+// 查看预警详情
+const viewDetail = async (row) => {
+
+    try {
+        // ✅ 调用后端接口获取完整的预警详情（包括设备位置信息）
+        const res = await warningDetail(row.id);
+        
+        if (res.code === 200 && res.data) {
+            const detailData = res.data;
+            
+            // ✅ 修复：使用列表中的预警类型，而不是后端API返回的类型
+            // 因为后端API可能返回的是旧数据，列表中的类型才是用户看到的
+            if (row.warningType && row.warningType !== detailData.warningType) {
+                console.warn('[WARNING-LIST] ⚠️ 预警类型不一致！列表中:', row.warningType, '后端返回:', detailData.warningType);
+                console.warn('[WARNING-LIST] 使用列表中的预警类型:', row.warningType);
+                detailData.warningType = row.warningType;
+            }
+            
+            // 补充预警类型描述
+            const warningTypeMap = {
+                2: '数量盘单预警',
+                3: '运输距离预警',
+                4: '设备停留预警',
+                5: '高温预警',
+                6: '低温预警',
+                7: '位置偏离预警',
+                8: '延误预警',
+                9: '超前到达预警'
+            };
+            detailData.warningTypeDesc = warningTypeMap[detailData.warningType] || detailData.warningReason || '未知预警';
+            
+
+            // 打开详情对话框
+            detailDialogRef.value.open(detailData);
+        } else {
+            ElMessage.error(res.msg || '获取预警详情失败');
+        }
+    } catch (error) {
+        console.error('[WARNING-LIST] 获取预警详情失败:', error);
+        ElMessage.error('获取预警详情失败，请稍后重试');
+    }
+};
+
 onMounted(() => {
     getList();
 });