diff --git a/.env.development b/.env.development
index 27b9b6a..1ff3f96 100644
--- a/.env.development
+++ b/.env.development
@@ -5,8 +5,8 @@ VITE_APP_TITLE = 云平台管理系统
 VITE_APP_ENV = 'development'
 
 # 开发环境
- VITE_APP_BASE_API = 'https://fuyuanshen.com/backend'
- #VITE_APP_BASE_API = 'http://192.168.2.23:8000'
+ #VITE_APP_BASE_API = 'https://fuyuanshen.com/backend'
+ VITE_APP_BASE_API = 'http://192.168.2.23:8000'
 
 #代永飞接口
 #VITE_APP_BASE_API = 'http://457102h2d6.qicp.vip:24689'   
diff --git a/src/api/homeIndex/index.ts b/src/api/homeIndex/index.ts
new file mode 100644
index 0000000..9b94d16
--- /dev/null
+++ b/src/api/homeIndex/index.ts
@@ -0,0 +1,59 @@
+import request from '@/utils/request';
+// 获取设备总览 DataOverview
+export const getDeviceOverview = (params) => {
+  return request({
+    url: '/api/largeScreen/getDeviceOverview',
+    method: 'get',
+    params: params
+  });
+};
+
+
+// 报警事件，报警总数统计
+export const getAlarmStatistics = (params) => {
+  return request({
+    url: '/api/largeScreen/getAlarmStatistics',
+    method: 'get',
+    params: params
+  });
+}
+
+
+// 报警次数
+export const getMonthlyAlarmStatistics = (params) => {
+  return request({
+    url: '/api/largeScreen/getMonthlyAlarmStatistics',
+    method: 'get',
+    params: params
+  });
+}
+
+// 设备类别
+export const getDeviceCommunicationModeStatistics = (params = {}) => {
+  return request({
+    url: '/api/largeScreen/getDeviceCommunicationModeStatistics',
+    method: 'get',
+    params: params
+  });
+}
+
+// 设备使用频次
+export const getDeviceUsageFrequency = (params = {}) => {
+  return request({
+    url: '/api/largeScreen/getDeviceUsageFrequency',
+    method: 'get',
+    params: params
+  });
+}
+
+// 实时报警
+export const getRealtimeAlarm = (params = {}) => {
+  return request({
+    url: '/api/largeScreen/getRealtimeAlarm',
+    method: 'get',
+    params: params
+  });
+}
+
+
+
diff --git a/src/api/homeIndex/types.ts b/src/api/homeIndex/types.ts
new file mode 100644
index 0000000..e69de29
diff --git a/src/assets/homeIndex/btn.png b/src/assets/homeIndex/btn.png
new file mode 100644
index 0000000..44aa41d
Binary files /dev/null and b/src/assets/homeIndex/btn.png differ
diff --git a/src/assets/homeIndex/btn_cur.png b/src/assets/homeIndex/btn_cur.png
new file mode 100644
index 0000000..3e2baaa
Binary files /dev/null and b/src/assets/homeIndex/btn_cur.png differ
diff --git a/src/assets/homeIndex/card.png b/src/assets/homeIndex/card.png
index c73def8..9f445f7 100644
Binary files a/src/assets/homeIndex/card.png and b/src/assets/homeIndex/card.png differ
diff --git a/src/assets/homeIndex/deviceIMG.png b/src/assets/homeIndex/deviceIMG.png
new file mode 100644
index 0000000..276fb7d
Binary files /dev/null and b/src/assets/homeIndex/deviceIMG.png differ
diff --git a/src/views/homeIndex/components/AlarmCount.vue b/src/views/homeIndex/components/AlarmCount.vue
index 222094f..066d876 100644
--- a/src/views/homeIndex/components/AlarmCount.vue
+++ b/src/views/homeIndex/components/AlarmCount.vue
@@ -1,6 +1,139 @@
 <template>
-    <div></div>
+    <div class="vchartPage">
+        <div ref="chartRef" class="chartRef"></div>
+    </div>
 </template>
-<script setup lang="ts"> 
+<script setup lang="ts">
+import * as echarts from 'echarts'
+import { getMonthlyAlarmStatistics } from '@/api/homeIndex';
+const chartRef = ref<HTMLDivElement | null>(null);
+onMounted(() => {
+    if (chartRef.value) {
+        const myChart = echarts.init(chartRef.value);
+        getMonthlyAlarmStatistics({}).then((res) => {
+            const monthlyData = res.data.monthlyStatistics || {};
+            // 提取1-12月数据并转为数字
+            const alarmData = [
+                monthlyData.m1,
+                monthlyData.m2,
+                monthlyData.m3,
+                monthlyData.m4,
+                monthlyData.m5,
+                monthlyData.m6,
+                monthlyData.m7,
+                monthlyData.m8,
+                monthlyData.m9,
+                monthlyData.m10,
+                monthlyData.m11,
+                monthlyData.m12
+            ].map(Number);
+
+            const maxValue = Math.max(...alarmData);
+            const maxIndex = alarmData.indexOf(maxValue);
+            const months = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'];
+
+            const option = {
+                tooltip: {
+                    trigger: 'axis',
+                },
+                grid: {
+                    left: '5%',
+                    right: '5%',
+                    bottom: '10%',
+                    top: '15%',
+                    containLabel: true
+                },
+                xAxis: {
+                    type: 'category',
+                    data: months,
+                    axisLine: {
+                        lineStyle: {
+                            color: 'rgba(255, 255, 255, 0.2)'
+                        }
+                    },
+                    axisLabel: {
+                        color: '#DEEFFF',
+                        fontSize: 12
+                    },
+                    splitLine: {
+                        show: false
+                    }
+                },
+                yAxis: {
+                    type: 'value',
+                    axisLine: {
+                        show: false
+                    },
+                    axisLabel: {
+                        color: '#DEEFFF',
+                        fontSize: 12,
+                        formatter: '{value}'
+                    },
+                    splitLine: {
+                        lineStyle: {
+                            color: 'rgba(255, 255, 255, 0.1)',
+                            type: 'dashed'
+                        }
+                    },
+                    boundaryGap: [0, '30%']
+                },
+                series: [
+                    {
+                        type: 'line',
+                        data: alarmData,
+                        smooth: true,
+                        symbol: 'circle',
+                        symbolSize: 6,
+                        emphasis: {
+                            showSymbol: true,
+                            symbolSize: 8
+                        },
+                        lineStyle: {
+                            color: '#22E1DB',
+                            width: 2
+                        },
+                        areaStyle: {
+                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                                { offset: 0, color: 'rgba(34,225,219, 0.6)' },
+                                { offset: 1, color: 'rgba(34,225,219, 0)' }
+                            ])
+                        },
+                        itemStyle: {
+                            color: (params) => {
+                               if (params.dataIndex === maxIndex) {
+                                    return '#fff'; // 最大值的点标为白色
+                                }
+                                return '#22E1DB';
+                            }
+                        },
+                        label: {
+                            show: (params) => params.dataIndex === maxIndex,
+                            position: 'top',
+                            color: '#22E1DB',
+                            formatter: '{c}', // 显示当前数据值
+                            fontSize: 12,
+                        }
+                    }
+                ],
+            };
+
+            myChart.setOption(option);
+        }).catch(err => {
+        });
+
+        window.addEventListener('resize', () => {
+            myChart.resize();
+        });
+    }
+});
 </script>
-<style scoped lang="scss"></style>
\ No newline at end of file
+<style scoped lang="scss">
+.vchartPage {
+    margin-top: 7.4vh;
+}
+
+.chartRef {
+    width: 100%;
+    height: 24vh;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/homeIndex/components/AlarmEvent.vue b/src/views/homeIndex/components/AlarmEvent.vue
index 222094f..01a30f7 100644
--- a/src/views/homeIndex/components/AlarmEvent.vue
+++ b/src/views/homeIndex/components/AlarmEvent.vue
@@ -1,6 +1,140 @@
 <template>
-    <div></div>
+
+    <!-- 图表容器，设置宽高 -->
+    <div class="vchartPage">
+        <div ref="chartRef" class="chartRef"></div>
+    </div>
+
 </template>
-<script setup lang="ts"> 
+
+<script setup lang="ts">
+import * as echarts from 'echarts'; // 引入 ECharts
+const chartRef = ref<HTMLDivElement | null>(null); // 图表容器的 ref
+const echartData = ref<any>({});
+const props = defineProps({
+    alarmOverview: {
+        type: Object,
+        required: true,
+    },
+});
+
+watch(() => props.alarmOverview, (newVal) => {
+    echartData.value = newVal;
+    console.log('newVal:', newVal);
+}, { immediate: true, deep: true });
+
+onMounted(() => {
+    setTimeout(() => {
+        if (chartRef.value) {
+            const {
+                forcedAlarms,
+                intrusionImpactAlarms,
+                autoAlarms,
+                geoFenceAlarms
+            } = echartData.value;
+            // 初始化 ECharts 实例
+            const myChart = echarts.init(chartRef.value);
+            // 配置图表参数
+            const option = {
+                tooltip: {
+                    trigger: 'axis', // 触发方式：坐标轴触发
+                },
+                grid: {
+                    left: '5%',
+                    right: '5%',
+                    bottom: '3%',
+                    top: '15%',
+                    containLabel: true, // 网格包含坐标轴标签
+                },
+                xAxis: {
+                    type: 'category',
+                    data: ['强制报警', '撞击闯入', '自动报警', '电子围栏告警'], // X 轴类目
+                    axisLine: {
+                        lineStyle: {
+                            color: 'rgba(255, 255, 255, 0.1)', // X 轴线颜色
+                        },
+                    },
+                    axisLabel: {
+                        color: '#DEEFFF', // X 轴文字颜色
+                    },
+                },
+                yAxis: {
+                    type: 'value',
+                    axisLine: {
+                        lineStyle: {
+                            color: '#1e3a8a', // Y 轴线颜色
+                        },
+                    },
+                    axisLabel: {
+                        color: '#DEEFFF', // Y 轴标签文字颜色
+                    },
+                    splitLine: {
+                        lineStyle: {
+                            color: 'rgba(255, 255, 255, 0.1)', // Y 轴分割
+                            type: 'dashed', // 分割线为虚线
+                        },
+                    },
+                },
+                series: [
+                    {
+                        name: '报警次数',
+                        type: 'bar',
+                        data: [forcedAlarms, intrusionImpactAlarms, autoAlarms, geoFenceAlarms],
+                        barWidth: '20px', // 柱子宽度
+                        // 为不同柱子设置渐变色
+                        itemStyle: {
+                            color: function (params: any) {
+                                const colorList = [
+                                    // 强制报警：蓝色渐变
+                                    new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                                        { offset: 0, color: '#0F3352' },
+                                        { offset: 1, color: '#00A8FF' },
+                                    ]),
+                                    // 撞击闯入：黄色渐变
+                                    new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                                        { offset: 0, color: '#0F3352' },
+                                        { offset: 1, color: '#E4B90C' },
+                                    ]),
+                                    // 自动报警：青蓝渐变
+                                    new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                                        { offset: 0, color: '#0F3352' },
+                                        { offset: 1, color: '#15DBCB' },
+                                    ]),
+                                    // 电子围栏告警：红色渐变
+                                    new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                                        { offset: 0, color: '#0F3352' },
+                                        { offset: 1, color: '#F00C0C' },
+                                    ]),
+                                ];
+                                return colorList[params.dataIndex];
+                            },
+                            borderRadius: 4
+                        },
+                    },
+                ],
+            };
+
+            // 将配置项设置到图表实例
+            myChart.setOption(option);
+
+            // 窗口resize时，图表自适应
+            window.addEventListener('resize', () => {
+                myChart.resize();
+            });
+        }
+    }, 200)
+
+
+});
+
 </script>
-<style scoped lang="scss"></style>
\ No newline at end of file
+<style scoped lang="scss">
+.vchartPage {
+    margin-top: 7.2vh;
+}
+
+.chartRef {
+    width: 100%;
+    height: 23vh;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/homeIndex/components/AlarmOverview.vue b/src/views/homeIndex/components/AlarmOverview.vue
index 82a5f0e..35b2fc5 100644
--- a/src/views/homeIndex/components/AlarmOverview.vue
+++ b/src/views/homeIndex/components/AlarmOverview.vue
@@ -3,20 +3,20 @@
         <div class="alarmOvery">
             <div class="alarm">
                 <div class="alarmIMG">
-                    <div class="alarmNum">1000 <span>个</span></div>
+                    <div class="alarmNum">{{ alarmOverview.activeAlarms || '0' }} <span>个</span></div>
                 </div>
                 <div class="alarmText">正在报警</div>
             </div>
 
             <div class="alarm">
                 <div class="alarmIMG">
-                    <div class="alarmNum">1000 <span>个</span></div>
+                    <div class="alarmNum">{{ alarmOverview.totalAlarms || '0' }} <span>个</span></div>
                 </div>
                 <div class="alarmText">报警总数</div>
             </div>
             <div class="alarm">
                 <div class="alarmIMG">
-                    <div class="alarmNum">1000 <span>个</span></div>
+                    <div class="alarmNum">{{ alarmOverview.processedAlarms || '0' }} <span>个</span></div>
                 </div>
                 <div class="alarmText">已处理</div>
             </div>
@@ -24,6 +24,14 @@
     </div>
 </template>
 <script setup lang="ts">
+const props = defineProps({
+    alarmOverview: {
+        type: Object,
+        required: false,
+        default: () => ({}),
+    },
+});
+
 
 </script>
 <style scoped lang="scss">
@@ -34,7 +42,7 @@
     align-items: center;
     margin-top: 7.5vh;
     text-align: center;
-    font-size:0.8vw;
+    font-size: 0.7vw;
     color: #DEEFFF;
     padding: 1.5vw;
 }
@@ -47,11 +55,27 @@
     position: relative;
 
 }
-.alarmText{
+
+.alarmText {
     padding-top: 1.5vh;
 }
-.alarmNum{
+
+.alarmNum {
     line-height: 12vh;
-    color: radial-gradient(0deg, #F63838 0%, #FFFFFF 100%);
+    display: inline-block;
+    position: relative;
+    background: radial-gradient(circle at center, #F63838 0%, #FFFFFF 49%);
+    /* 兼容写法 */
+    -webkit-background-clip: text;
+    background-clip: text;
+    color: transparent;
+    z-index: 1;
+    overflow: visible;
+    font-size: 1.3vw;
+    font-weight: 600;
+}
+
+.alarmNum span {
+    font-size: 0.6vw;
 }
 </style>
\ No newline at end of file
diff --git a/src/views/homeIndex/components/DeviceCategory.vue b/src/views/homeIndex/components/DeviceCategory.vue
index 222094f..ae52341 100644
--- a/src/views/homeIndex/components/DeviceCategory.vue
+++ b/src/views/homeIndex/components/DeviceCategory.vue
@@ -1,6 +1,120 @@
 <template>
-    <div></div>
+    <div class="vchartPage">
+        <div ref="chartRef" class="chartRef"></div>
+    </div>
 </template>
-<script setup lang="ts"> 
+<script setup lang="ts">
+import { getDeviceCommunicationModeStatistics } from '@/api/homeIndex/index';
+import * as echarts from 'echarts';
+const chartRef = ref<HTMLDivElement | null>(null);
+onMounted(() => {
+    if (chartRef.value) {
+        const myChart = echarts.init(chartRef.value);
+    
+        getDeviceCommunicationModeStatistics().then((res) => {
+            console.log(res, '接口数据');
+            const dataList = res.data || [];
+            // 1.（通信方式名称）
+            const xAxisData = dataList.map(item => item.communicationModeName);
+            // 2. 总数数据
+            const totalData = dataList.map(item => item.totalDevices);
+            // 3. 异常数数据
+            const abnormalData = dataList.map(item => item.abnormalDevices);
+            // 图表配置）
+            const option = {
+                tooltip: {
+                    trigger: 'axis',
+                    axisPointer: { type: 'shadow' }
+                },
+                legend: {
+                    data: ['总数', '异常'],
+                    right: '20px',
+                    textStyle: { color: '#DEEFFF' },
+                    itemWidth: 12,
+                    itemHeight: 12
+                },
+                grid: {
+                    left: '3%',
+                    right: '4%',
+                    bottom: '3%',
+                    top: '15%',
+                    containLabel: true
+                },
+                xAxis: {
+                    type: 'category',
+                    data: xAxisData, 
+                    axisLine: {
+                        lineStyle: { color: 'rgba(255,255,255,0.1)' }
+                    },
+                    axisLabel: {
+                        color: '#DEEFFF' 
+                    }
+                },
+                yAxis: {
+                    type: 'value',
+                    axisLine: { show: false }, 
+                    axisLabel: { color: '#fff' },
+                    splitLine: {
+                        lineStyle: {
+                            color: 'rgba(255, 255, 255, 0.1)',
+                            type: 'dashed'
+                        }
+                    }
+                },
+                series: [
+                    {
+                        name: '总数',
+                        type: 'bar',
+                        data: totalData,
+                        itemStyle: {
+                            color: new echarts.graphic.LinearGradient(
+                                0, 0, 0, 1,
+                                [
+                                    { offset: 0, color: 'rgba(0,166,255,1)' },
+                                    { offset: 1, color: 'rgba(0,125,221, 0.6)' }
+                                ]
+                            ),
+                            borderRadius: 4
+                        },
+                        barWidth: '20px'
+                    },
+                    {
+                        name: '异常',
+                        type: 'bar',
+                        data: abnormalData,
+                        itemStyle: {
+                            color: new echarts.graphic.LinearGradient(
+                                0, 0, 0, 1,
+                                [
+                                    { offset: 0, color: 'rgba(232,69,37,1)' },
+                                    { offset: 1, color: 'rgba(240,12,12, 0.6)' }
+                                ]
+                            ),
+                            borderRadius: 4
+                        },
+                        barWidth: '20px'
+                    }
+                ]
+            };
+
+            myChart.setOption(option);
+        }).catch(err => {
+            console.log('获取数据失败', err);
+        });
+        // 窗口 resize 时自适应
+        window.addEventListener('resize', () => {
+            myChart.resize();
+        });
+    }
+});
 </script>
-<style scoped lang="scss"></style>
\ No newline at end of file
+<style scoped lang="scss">
+.vchartPage {
+    margin-top: 7.8vh;
+}
+
+.chartRef {
+    width: 100%;
+    height: 22vh;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/homeIndex/components/DeviceOverview.vue b/src/views/homeIndex/components/DeviceOverview.vue
index 222094f..f596d45 100644
--- a/src/views/homeIndex/components/DeviceOverview.vue
+++ b/src/views/homeIndex/components/DeviceOverview.vue
@@ -1,6 +1,81 @@
 <template>
-    <div></div>
+    <div>
+        <div class="deviceOvery">
+            <div class="alarm">
+                <div class="deviceIMG">
+                    <div class="deviceNum">{{DataOverview.totalDevices || '0'}} <span>个</span></div>
+                </div>
+                <div class="deviceText">设备总数</div>
+            </div>
+
+            <div class="alarm">
+                <div class="deviceIMG">
+                    <div class="deviceNum">{{DataOverview.onlineDevices || '0'}} <span>个</span></div>
+                </div>
+                <div class="deviceText">在线数量</div>
+            </div>
+            <div class="alarm">
+                <div class="deviceIMG">
+                    <div class="deviceNum">{{DataOverview.deviceTypes || '0'}} <span>种</span></div>
+                </div>
+                <div class="deviceText">设备型号</div>
+            </div>
+        </div>
+    </div>
 </template>
-<script setup lang="ts"> 
+<script setup lang="ts">
+import { getDeviceOverview } from '@/api/homeIndex'
+const DataOverview = ref<any>({})
+onMounted(() => {
+  getDeviceOverview({}).then((res) => {
+    if (res.code==200) {
+         DataOverview.value = res.data
+    }
+   
+  })
+})
+
 </script>
-<style scoped lang="scss"></style>
\ No newline at end of file
+<style scoped lang="scss">
+.deviceOvery {
+    display: flex;
+    justify-content: space-between;
+    width: 100%;
+    align-items: center;
+    margin-top: 7.5vh;
+    text-align: center;
+    font-size:0.7vw;
+    color: #DEEFFF;
+    padding: 1.5vw;
+}
+
+.deviceIMG {
+    width: 12vh;
+    height: 12vh;
+    background: url(@/assets/homeIndex/deviceIMG.png) no-repeat;
+    background-size: 100% 100%;
+    position: relative;
+
+}
+.deviceText{
+    padding-top: 1.5vh;
+}
+
+.deviceNum{
+    line-height: 12vh;
+    display: inline-block;
+    position: relative; 
+    background: radial-gradient(circle at center, #00FCFF 0%, #FFFFFF 49%);
+    /* 兼容写法 */
+    -webkit-background-clip: text;
+    background-clip: text;
+    color: transparent;
+    z-index: 1;
+    overflow: visible;
+    font-size: 1.3vw;
+    font-weight: 600;
+}
+.deviceNum span{
+    font-size: 0.6vw;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/homeIndex/components/DeviceUsage.vue b/src/views/homeIndex/components/DeviceUsage.vue
index 222094f..bbb964a 100644
--- a/src/views/homeIndex/components/DeviceUsage.vue
+++ b/src/views/homeIndex/components/DeviceUsage.vue
@@ -1,6 +1,158 @@
 <template>
-    <div></div>
+    <div class="vchartPage">
+        <div class="btn_mounth_box">
+            <div class="btn_mounth" :class="{ cur: activeTab == 'month' }" @click="switchTab('month')">近一月</div>
+            <div class="btn_mounth" :class="{ cur: activeTab === 'halfYear' }" @click="switchTab('halfYear')">近半年</div>
+        </div>
+
+        <div ref="chartRef" class="chartRef"></div>
+    </div>
 </template>
-<script setup lang="ts"> 
+
+<script setup lang="ts">
+import * as echarts from 'echarts';
+import { getDeviceUsageFrequency } from '@/api/homeIndex/index';
+const chartRef = ref<HTMLDivElement | null>(null);
+const activeTab = ref('month');
+let myChart: echarts.ECharts | null = null; // 保存图表实例
+
+// 根据天数获取数据并更新图表
+const fetchDataAndUpdate = (days: number) => {
+    getDeviceUsageFrequency({ days }).then((res) => {
+        if (res.code === 200 && res.data && myChart) {
+            // 处理接口返回的真实数据（转换为图表所需格式）
+            const chartData = res.data.map(item => ({
+                name: item.deviceName,
+                value: item.frequency
+            }));
+            // 更新图表
+            myChart.setOption({
+                yAxis: {
+                    data: chartData.map(item => item.name)
+                },
+                series: [{
+                    data: chartData.map(item => item.value)
+                }]
+            });
+        }
+    }).catch(err => {
+        console.error('获取数据失败', err);
+    });
+};
+
+// 切换标签逻辑
+const switchTab = (tab: string) => {
+    activeTab.value = tab;
+    // 根据标签切换天数（近半月=15天，近半年=180天，按实际需求调整）
+    const days = tab === 'month' ? 30 : 180;
+    fetchDataAndUpdate(days);
+};
+
+onMounted(() => {
+    if (chartRef.value) {
+        // 初始化图表实例
+        myChart = echarts.init(chartRef.value);
+        
+        // 初始图表配置（空数据占位）
+        const option = {
+            tooltip: {
+                trigger: 'axis',
+                axisPointer: { type: 'shadow' } // 柱状图建议使用阴影指示器
+            },
+            grid: {
+                left: '5%',
+                right: '10%',
+                bottom: '3%',
+                top: '20%',
+                containLabel: true
+            },
+            yAxis: {
+                type: 'category',
+                data: [], // 初始空数据
+                axisLine: {
+                    lineStyle: {
+                        color: '#1e3a8a',
+                        show: false
+                    }
+                },
+                axisLabel: {
+                    color: '#DEEFFF'
+                }
+            },
+            xAxis: {
+                type: 'value',
+                axisLine: { show: false },
+                axisLabel: { show: false },
+                splitLine: { show: false }
+            },
+            series: [{
+                name: '使用频次',
+                type: 'bar',
+                data: [], // 初始空数据
+                barWidth: '14px',
+                stack: 'total',
+                label: {
+                    show: true,
+                    position: 'right',
+                    valueAnimation: true,
+                    color: '#DEEFFF'
+                },
+                itemStyle: {
+                    color: new echarts.graphic.LinearGradient(
+                        0, 0, 1, 0,
+                        [
+                            { offset: 0, color: '#0768D4' },
+                            { offset: 1, color: '#0EC4DF' }
+                        ]
+                    ),
+                    borderRadius: 4
+                }
+            }]
+        };
+        myChart.setOption(option);
+        fetchDataAndUpdate(30);
+        // 窗口resize自适应
+        window.addEventListener('resize', () => {
+            myChart?.resize();
+        });
+    }
+});
 </script>
-<style scoped lang="scss"></style>
\ No newline at end of file
+
+<style scoped lang="scss">
+.vchartPage {
+    margin-top: 7.8vh;
+    position: relative; // 新增：确保按钮定位正确
+}
+
+.btn_mounth_box {
+    display: flex;
+    position: absolute;
+    right: 1vh;
+    top: 0vh;
+    z-index: 1;
+}
+
+.btn_mounth {
+    width:4.5vw;
+    height:4.5vh;
+    background: url(@/assets/homeIndex/btn.png) no-repeat;
+    background-size: 100% 100%;
+    text-align: center;
+    line-height: 4.4vh;
+    color: #fff;
+    font-size: 0.8vw;
+    cursor: pointer;
+    margin-left: 0.5vw; // 新增：按钮间距
+}
+
+.cur {
+    background: url(@/assets/homeIndex/btn_cur.png) no-repeat;
+    background-size: 100% 100%;
+}
+
+.chartRef {
+    width: 100%;
+    height: 22vh;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/homeIndex/components/RealTimeAlarm.vue b/src/views/homeIndex/components/RealTimeAlarm.vue
index 3614f4e..5ebb21d 100644
--- a/src/views/homeIndex/components/RealTimeAlarm.vue
+++ b/src/views/homeIndex/components/RealTimeAlarm.vue
@@ -10,54 +10,39 @@
         <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 class="item-cell">{{ item.startTime }}</div>
+                <div class="item-cell">{{ item.deviceTypeName }}</div>
+                <div class="item-cell">{{ item.deviceImei }}</div>
+                <div class="item-cell alarm-event">
+                    {{ {
+                        0: '强制报警',
+                        1: '撞击闯入',
+                        2: '自动报警',
+                    3: '电子围栏告警'
+                    }[item.deviceAction]}}
+                  
+                </div>
+                <div class="item-cell">{{ item.location }}</div>
             </div>
         </div>
     </div>
 </template>
 <script setup>
-import { ref, onMounted } from 'vue';
+import { getRealtimeAlarm } from '@/api/homeIndex/index';
 
 // 模拟报警数据
 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 getRealtimeAlarmData = () => {
+    getRealtimeAlarm().then((res) => {
+        alarmData.value = res.data;
+    });
+}
 
 const tableBody = ref(null);
 
 onMounted(() => {
+    getRealtimeAlarmData()
     // 启动滚动动画
     if (tableBody.value) {
         tableBody.value.style.animationName = 'scroll';
@@ -76,9 +61,9 @@ onMounted(() => {
 
 .alarm-table-header {
     display: flex;
-    color: #267AD0;
+    color: #00C0FF;
     border-bottom: 1px dashed rgba(100, 150, 200, 0.3);
-    font-size: 1vw;
+    font-size: 0.8vw;
 }
 
 .header-item {
diff --git a/src/views/homeIndex/index.vue b/src/views/homeIndex/index.vue
index ea9b9a9..50adb9f 100644
--- a/src/views/homeIndex/index.vue
+++ b/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>