1

src/views/homeIndex/components/AlarmOverview.vue

@@ -32,10 +32,11 @@
     justify-content: space-between;
     width: 100%;
     align-items: center;
-    padding-top: 7.5vh;
+    margin-top: 7.5vh;
     text-align: center;
     font-size:0.8vw;
     color: #DEEFFF;
+    padding: 1.5vw;
 }
 
 .alarmIMG {

src/views/homeIndex/components/RealTimeAlarm.vue

@@ -1,6 +1,125 @@
 <template>
-    <div></div>
+    <div class="alarm-table-container">
+        <div class="alarm-table-header">
+            <div class="header-item">报警时间</div>
+            <div class="header-item">设备类型</div>
+            <div class="header-item">设备IMEI</div>
+            <div class="header-item">报警事件</div>
+            <div class="header-item">报警位置</div>
+        </div>
+        <div class="alarm-table-body" ref="tableBody"
+            :style="{ animationDuration: `${alarmData.length * 2}s`, animationTimingFunction: 'linear' }">
+            <div v-for="(item, index) in alarmData" :key="index" class="alarm-item">
+                <div class="item-cell">{{ item.alarmTime }}</div>
+                <div class="item-cell">{{ item.deviceType }}</div>
+                <div class="item-cell">{{ item.deviceIMEI }}</div>
+                <div class="item-cell alarm-event">{{ item.alarmEvent }}</div>
+                <div class="item-cell">{{ item.alarmLocation }}</div>
+            </div>
+            <!-- 复制一份数据，实现无缝滚动 -->
+            <div v-for="(item, index) in alarmData" :key="index + 'copy'" class="alarm-item">
+                <div class="item-cell">{{ item.alarmTime }}</div>
+                <div class="item-cell">{{ item.deviceType }}</div>
+                <div class="item-cell">{{ item.deviceIMEI }}</div>
+                <div class="item-cell alarm-event">{{ item.alarmEvent }}</div>
+                <div class="item-cell">{{ item.alarmLocation }}</div>
+            </div>
+        </div>
+    </div>
 </template>
-<script setup lang="ts"> 
+<script setup>
+import { ref, onMounted } from 'vue';
+
+// 模拟报警数据
+const alarmData = ref([
+    {
+        alarmTime: '2025-09-01 20:16:54',
+        deviceType: 'BJQ6170',
+        deviceIMEI: '123456789123456',
+        alarmEvent: '强制报警',
+        alarmLocation: '湖北省武汉市国际企业中心聚星楼'
+    },
+    {
+        alarmTime: '2025-09-01 20:16:54',
+        deviceType: 'BJQ6170',
+        deviceIMEI: '123456789123456',
+        alarmEvent: '强制报警',
+        alarmLocation: '湖北省武汉市国际企业中心聚星楼'
+    },
+    {
+        alarmTime: '2025-09-01 20:16:54',
+        deviceType: 'BJQ6170',
+        deviceIMEI: '123456789123456',
+        alarmEvent: '强制报警',
+        alarmLocation: '湖北省武汉市国际企业中心聚星楼'
+    }
+]);
+
+const tableBody = ref(null);
+
+onMounted(() => {
+    // 启动滚动动画
+    if (tableBody.value) {
+        tableBody.value.style.animationName = 'scroll';
+        tableBody.value.style.animationIterationCount = 'infinite';
+    }
+});
 </script>
-<style scoped lang="scss"></style>
+<style scoped lang="scss">
+.alarm-table-container {
+    width: 100%;
+    border-radius: 4px;
+    overflow: hidden;
+    margin-top: 4vh;
+    padding: 1.5vw;
+}
+
+.alarm-table-header {
+    display: flex;
+    color: #267AD0;
+    border-bottom: 1px dashed rgba(100, 150, 200, 0.3);
+    font-size: 1vw;
+}
+
+.header-item {
+    flex: 1;
+    padding: 8px;
+    text-align: center;
+}
+
+.alarm-table-body {
+    height: 18vh;
+    /* 可根据需求调整高度 */
+    overflow: auto;
+    color: #fff;
+}
+
+.alarm-item {
+    display: flex;
+    border-bottom: 1px dashed rgba(100, 150, 200, 0.3);
+    font-size: 0.6vw;
+    align-items: center;
+    padding: 0.5vw;
+}
+
+.item-cell {
+    flex: 1;
+    text-align: center;
+}
+
+.alarm-event {
+    color: #ff5252;
+    /* 报警事件红色显示 */
+}
+
+/* 滚动动画 */
+@keyframes scroll {
+    0% {
+        transform: translateY(0);
+    }
+
+    100% {
+        transform: translateY(-50%);
+    }
+}
+</style>

src/views/homeIndex/index.vue

@@ -65,7 +65,7 @@
       <!-- 底部中间模块 -->
       <div class="bottom-middle-module">
         <div class="module-card realtime-card">
-          <div class="module-header">实时报警信息</div>
+          <div class="module-header realtime-header">实时报警信息</div>
           <div class="module-content">
             <RealTimeAlarm />
           </div>
@@ -126,9 +126,9 @@ const currentTime = computed(() => {
 .header-info {
   position: absolute;
   right: 6vh;
-  top:3.8vh;
+  top: 3.8vh;
   color: #fff;
-  font-size:1.8vh;
+  font-size: 1.8vh;
 }
 
 /* 全屏地图 */
@@ -188,8 +188,7 @@ const currentTime = computed(() => {
   left: 50%;
   transform: translateX(-50%);
   width: 44vw;
-  height: 31vh;
+  height: calc(39vh - 9vh);
-  min-height: 180px;
   pointer-events: auto;
 }
 
@@ -219,10 +218,13 @@ const currentTime = computed(() => {
 
 }
 
-/* 模块内容 */
+.realtime-header {
-.module-content {
+  left: 8vh;
-  padding: 1.5vw;
+  top: 3.4vh;
-  position: relative;
 }
 
+/* 模块内容 */
+.module-content {
+  position: relative;
+}
 </style>