style: 调整样式

src/views/inspection/cockpit/components/MapOverview.vue

@@ -71,9 +71,12 @@
             <!-- <div class="split-line"></div> -->
             <div class="alarm-container">
                 <div class="container-title">告警记录</div>
-                <div class="alarm-box" v-for="item, index in 2">
-                    <div class="title">#01 检测到异常噪声</div>
-                    <div class="alarm-info">14:28:33 — 厂区A 东侧走廊</div>
+                <div class="alarm-box" v-for="item, index in alarmRecord">
+                    <div class="alarm-title" :class="item.resultStatus">
+                        <div class="title">{{ item.resultName }}</div>
+                        <div class="status">{{ getOptionLabel(resultStatusOptions, item.resultStatus) }}</div>
+                    </div>
+                    <div class="alarm-info">{{ item.createTime }}</div>
                 </div>
             </div>
         </div>
@@ -86,8 +89,7 @@ import MapCanvas from "./MapCanvas.vue";
 import { onMounted, onUnmounted } from "vue";
 import { getRobotList } from '@/api/inspection/robot'
 import { getRunTaskList } from '@/api/inspection/runTask'
-
-console.log('sss', import.meta.env.VITE_INSPECTION_TYPE)
+import { getInspectionResultList } from '@/api/inspection/result'
 
 const robotList = ref([])
 const robotStatus = {
@@ -110,7 +112,7 @@ const getRobot = async () => {
 
     if (res.code === 200) {
         robotList.value = res.rows
-        // getRobot()
+        getRobot()
     }
 }
 
@@ -161,9 +163,31 @@ const centerCanvasView = () => {
     }
 }
 
+const alarmRecord = ref([])
+const resultStatusOptions = [
+  { label: '待处理', value: 'PENDING' },
+  { label: '正常', value: 'NORMAL' },
+  { label: '异常', value: 'ABNORMAL' },
+  { label: '识别失败', value: 'RECOGNIZE_FAILED' }
+]
+const getAlarmRecord = async () => { 
+    const res = await getInspectionResultList({
+        pageNum: 1,
+        pageSize: 10
+    })
+    if (res.code === 200) {
+        alarmRecord.value = res.rows
+    }
+}
+
+const getOptionLabel = (options, value) => {
+  return options.find(item => item.value === value)?.label || value || '-'
+}
+
 onMounted(() => {
     getRobot()
     getRunningTask()
+    getAlarmRecord()
 })
 </script>
 
@@ -387,13 +411,45 @@ onMounted(() => {
                 padding: 16px;
                 margin-bottom: 16px;
 
-                .title {
-                    color: #FF6B6B;
-                    font-size: 14px;
-                    font-family: Inter;
-                    font-weight: bold;
+                .alarm-title {
+                    display: flex;
+                    justify-content: space-between;
+
+                    .title {
+                        font-size: 14px;
+                        font-family: Inter;
+                        font-weight: bold;
+                    }
+
+                    .status {
+                        font-size: 12px;
+                        border-radius: 12px;
+                        padding: 0 8px;
+                        display: flex;
+                        align-items: center;
+                        justify-content: center;
+                    }
                 }
 
+                .NORMAL {
+                    color: #00D4FF;
+                }
+
+                .ABNORMAL {
+                    color: #FF6B6B;
+                }
+
+                .PENDING {
+                    color: #8899BB;
+                }
+
+                .RECOGNIZE_FAILED {
+                    color: #FF6B6B;
+                    font-size: 12px;
+                }
+
+                
+
                 .alarm-info {
                     margin: 10px 0;
                     font-size: 12px;