数据大屏图表接口对接

src/views/homeIndex/index.vue

@@ -17,7 +17,7 @@
       <!-- 左侧模块组 -->
       <div class="left-modules">
         <div class="module-card overview-card">
-          <div class="module-header">设备概览</div>
+          <div class="module-header">设备总览</div>
           <div class="module-content">
             <DeviceOverview />
           </div>
@@ -43,14 +43,14 @@
         <div class="module-card alarm-card">
           <div class="module-header">报警数据</div>
           <div class="module-content">
-            <AlarmOverview />
+            <AlarmOverview :alarmOverview="alarmOverview" />
           </div>
         </div>
 
         <div class="module-card">
           <div class="module-header">报警事件</div>
           <div class="module-content">
-            <AlarmEvent />
+            <AlarmEvent :alarmOverview="alarmOverview" />
           </div>
         </div>
 
@@ -76,6 +76,7 @@
 </template>
 
 <script setup lang="ts">
+import { getAlarmStatistics } from '@/api/homeIndex'
 import DeviceOverview from './components/DeviceOverview.vue';
 import AlarmOverview from './components/AlarmOverview.vue';
 import DeviceCategory from './components/DeviceCategory.vue';
@@ -84,6 +85,7 @@ import AlarmEvent from './components/AlarmEvent.vue';
 import AlarmCount from './components/AlarmCount.vue';
 import RealTimeAlarm from './components/RealTimeAlarm.vue';
 import MapComponent from './components/MapComponent.vue';
+const alarmOverview = ref<any>({})
 // 实时时间实现
 const currentDate = ref(new Date());
 // 每秒更新时间
@@ -100,6 +102,19 @@ const currentTime = computed(() => {
   const now = currentDate.value;
   return `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, '0')}-${String(now.getDate()).padStart(2, '0')} ${String(now.getHours()).padStart(2, '0')}:${String(now.getMinutes()).padStart(2, '0')}:${String(now.getSeconds()).padStart(2, '0')}`;
 });
+// 报警事件是同一个接口，在这里调用，两个子组件直接引入
+const getData = async () => {
+  const res = await getAlarmStatistics({})
+  if (res.code == 200) {
+    alarmOverview.value = res.data
+  }
+}
+getData()
+onMounted(() => {
+  
+})
+
+
 </script>
 
 <style scoped>