Merge branch 'main' of http://47.107.152.87:3000/liubiao/dyf-vue-ui

.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 = 'https://fuyuanshen.com/backend'
- #VITE_APP_BASE_API = 'http://192.168.2.23:8000'
+ VITE_APP_BASE_API = 'http://192.168.2.23:8000'
 
 #代永飞接口
 #VITE_APP_BASE_API = 'http://457102h2d6.qicp.vip:24689'   

dyf-vue-ui/src/views/homeIndex/index.vue

@@ -0,0 +1,174 @@
+
+<style scoped>
+.dashboard-container {
+  width: 100vw;
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  overflow: hidden;
+  background: radial-gradient( 0% 0% at 0% 0%, #091B2D 0%, #0C2644 100%), #267AD0;
+}
+
+/* 全屏地图 - 背景图层 */
+.fullscreen-map {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 1;
+  pointer-events: none;
+}
+
+/* 顶部栏 */
+.top-bar {
+  position: relative;
+  z-index: 10;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 12px 20px;
+  background-color: rgba(74, 85, 104, 0.9);
+  color: #fff;
+  font-size: 14px;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.top-bar h1 {
+  font-size: 18px;
+  margin: 0;
+  font-weight: 600;
+}
+
+.header-info {
+  display: flex;
+  gap: 16px;
+  align-items: center;
+}
+
+.header-info span {
+  font-size: 12px;
+}
+
+/* 悬浮模块容器 */
+.floating-modules {
+  display: flex;
+  flex-direction: column;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: calc(100% - 60px); /* 减去顶部栏高度 */
+  z-index: 5;
+  padding: 20px;
+  box-sizing: border-box;
+  pointer-events: none;
+}
+
+.left-modules,
+.right-modules {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  width: 100%;
+  flex: 1;
+  pointer-events: auto;
+}
+
+.bottom-middle-module {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  max-width: 800px;
+  pointer-events: auto;
+}
+
+.module-card {
+  background-color: rgba(107, 114, 128, 0.9);
+  border-radius: 6px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  width: 100%;
+  box-sizing: border-box;
+  overflow: hidden;
+}
+
+.module-card:hover {
+  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
+}
+
+.module-header {
+  padding: 10px 14px;
+  font-size: 14px;
+  font-weight: 600;
+  color: #fff;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
+  display: flex;
+  align-items: center;
+  background: linear-gradient(90deg, #3b82f6, #60a5fa);
+}
+
+.module-header::before {
+  content: '';
+  display: inline-block;
+  width: 8px;
+  height: 16px;
+  margin-right: 8px;
+  border-radius: 2px;
+  background-color: inherit;
+}
+
+.module-content {
+  padding: 14px;
+  color: #e5e7eb;
+  font-size: 13px;
+  height: calc(100% - 36px);
+  box-sizing: border-box;
+  overflow: auto;
+}
+
+.overview-card .module-header::before { background-color: #3b82f6; }
+.alarm-card .module-header::before { background-color: #ef4444; }
+.realtime-card .module-header::before { background-color: #f97316; }
+.module-card:nth-child(2) .module-header::before { background-color: #8b5cf6; }
+.module-card:nth-child(3) .module-header::before { background-color: #06b6d4; }
+
+@media (max-width: 1400px) {
+  .left-modules,
+  .right-modules {
+    width: 100%;
+  }
+}
+
+@media (max-width: 1200px) {
+  .left-modules,
+  .right-modules {
+    width: 100%;
+  }
+  .bottom-middle-module {
+    max-width: 600px;
+  }
+}
+
+@media (max-width: 900px) {
+  .left-modules,
+  .right-modules {
+    width: 100%;
+  }
+  .bottom-middle-module {
+    max-width: 500px;
+  }
+}
+
+@media (max-width: 768px) {
+  .left-modules,
+  .right-modules {
+    width: 100%;
+  }
+  .bottom-middle-module {
+    max-width: 100%;
+  }
+}
+</style>

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
+  });
+}
+
+
+

src/router/index.ts

@@ -39,6 +39,12 @@ export const constantRoutes: RouteRecordRaw[] = [
     component: () => import('@/views/error/401.vue'),
     hidden: true
   },
+  {
+    path: "/homeIndex",
+    name: "HomeIndex",
+    component: () => import("@/views/homeIndex/index.vue"),
+    meta: {title: '数据大屏', icon: 'dashboard', preload: true,  keepAlive: true },
+  },
   {
     path: '',
     component: Layout,
@@ -48,10 +54,11 @@ export const constantRoutes: RouteRecordRaw[] = [
         path: '/index',
         component: () => import('@/views/index.vue'),
         name: 'Index',
-        meta: { title: '首页', icon: 'dashboard', affix: true,keepAlive: false }
+        meta: { title: '首页', icon: 'dashboard', affix: true, keepAlive: false }
       }
     ]
   },
+
   {
     path: '/user',
     component: Layout,

src/views/equipmentManagement/devices/index.vue

@@ -56,8 +56,8 @@
             </el-col>
 
             <el-col :span="1.5">
-              <el-button v-hasPermi="['equipment:devices:export']" type="warning"  plain
+              <el-button v-hasPermi="['equipment:devices:export']" type="warning" plain icon="Download"
-                icon="Download" @click="handleExport">导出</el-button>
+                @click="handleExport">导出</el-button>
             </el-col>
             <el-col :span="1.5">
               <el-button v-hasPermi="['equipment:devices:remove']" type="danger" plain :disabled="multiple"
@@ -517,7 +517,7 @@ const handleExport = () => {
     {
       ...queryParams.value
     },
-    `${new Date().getTime()}.xlsx`,
+    `设备列表${new Date().getTime()}.xlsx`,
     'get'
   );
 };
@@ -913,12 +913,19 @@ const beforeImportUpload = (file: any) => {
 const head_upload = () => getBearerToken();
 const handleImportSuccess = (response: any) => {
   if (response.code == 200) {
+    console.log('导入成功了么');
     importResult.value.isShow = true;
+  
     if (response.data) {
-      importResult.value.succeed = response.data.successCount || 0;
+      console.log(response.data,'response.data');
-      importResult.value.errorSun = response.data.failureCount || 0;
+      
+      importResult.value.succeed = response.data.successCount;
+      importResult.value.errorSun = response.data.failureCount;
       importResult.value.total = importResult.value.succeed + importResult.value.errorSun;
-      importResult.value.link = response.data.errorExcelUrl || '';
+      importResult.value.link = response.data.errorExcelUrl;
+    }
+      if (importUpload.value) {
+      importUpload.value.clearFiles();
     }
     getList(); // 初始化列表数据
   } else {

src/views/homeIndex/components/AlarmCount.vue

@@ -0,0 +1,139 @@
+<template>
+    <div class="vchartPage">
+        <div ref="chartRef" class="chartRef"></div>
+    </div>
+</template>
+<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">
+.vchartPage {
+    margin-top: 7.4vh;
+}
+
+.chartRef {
+    width: 100%;
+    height: 24vh;
+}
+</style>

src/views/homeIndex/components/AlarmEvent.vue

@@ -0,0 +1,140 @@
+<template>
+
+    <!-- 图表容器，设置宽高 -->
+    <div class="vchartPage">
+        <div ref="chartRef" class="chartRef"></div>
+    </div>
+
+</template>
+
+<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">
+.vchartPage {
+    margin-top: 7.2vh;
+}
+
+.chartRef {
+    width: 100%;
+    height: 23vh;
+}
+</style>

src/views/homeIndex/components/AlarmOverview.vue

@@ -0,0 +1,81 @@
+<template>
+    <div>
+        <div class="alarmOvery">
+            <div class="alarm">
+                <div class="alarmIMG">
+                    <div class="alarmNum">{{ alarmOverview.activeAlarms || '0' }} <span>个</span></div>
+                </div>
+                <div class="alarmText">正在报警</div>
+            </div>
+
+            <div class="alarm">
+                <div class="alarmIMG">
+                    <div class="alarmNum">{{ alarmOverview.totalAlarms || '0' }} <span>个</span></div>
+                </div>
+                <div class="alarmText">报警总数</div>
+            </div>
+            <div class="alarm">
+                <div class="alarmIMG">
+                    <div class="alarmNum">{{ alarmOverview.processedAlarms || '0' }} <span>个</span></div>
+                </div>
+                <div class="alarmText">已处理</div>
+            </div>
+        </div>
+    </div>
+</template>
+<script setup lang="ts">
+const props = defineProps({
+    alarmOverview: {
+        type: Object,
+        required: false,
+        default: () => ({}),
+    },
+});
+
+
+</script>
+<style scoped lang="scss">
+.alarmOvery {
+    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;
+}
+
+.alarmIMG {
+    width: 12vh;
+    height: 12vh;
+    background: url(@/assets/homeIndex/alarmIMG.png) no-repeat;
+    background-size: 100% 100%;
+    position: relative;
+
+}
+
+.alarmText {
+    padding-top: 1.5vh;
+}
+
+.alarmNum {
+    line-height: 12vh;
+    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>

src/views/homeIndex/components/DeviceCategory.vue

@@ -0,0 +1,120 @@
+<template>
+    <div class="vchartPage">
+        <div ref="chartRef" class="chartRef"></div>
+    </div>
+</template>
+<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">
+.vchartPage {
+    margin-top: 7.8vh;
+}
+
+.chartRef {
+    width: 100%;
+    height: 22vh;
+}
+</style>

src/views/homeIndex/components/DeviceOverview.vue

@@ -0,0 +1,81 @@
+<template>
+    <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">
+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">
+.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>

src/views/homeIndex/components/DeviceUsage.vue

@@ -0,0 +1,158 @@
+<template>
+    <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">
+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">
+.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>

src/views/homeIndex/components/MapComponent.vue

@@ -0,0 +1,8 @@
+<template>
+    <div class="map-component">地图模块</div>
+</template>
+<script setup lang="ts"> 
+</script>
+<style scoped lang="scss">
+
+</style>

src/views/homeIndex/components/RealTimeAlarm.vue

@@ -0,0 +1,110 @@
+<template>
+    <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.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 { getRealtimeAlarm } from '@/api/homeIndex/index';
+
+// 模拟报警数据
+const alarmData = ref([
+]);
+const getRealtimeAlarmData = () => {
+    getRealtimeAlarm().then((res) => {
+        alarmData.value = res.data;
+    });
+}
+
+const tableBody = ref(null);
+
+onMounted(() => {
+    getRealtimeAlarmData()
+    // 启动滚动动画
+    if (tableBody.value) {
+        tableBody.value.style.animationName = 'scroll';
+        tableBody.value.style.animationIterationCount = 'infinite';
+    }
+});
+</script>
+<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: #00C0FF;
+    border-bottom: 1px dashed rgba(100, 150, 200, 0.3);
+    font-size: 0.8vw;
+}
+
+.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

@@ -0,0 +1,245 @@
+<template>
+  <div class="dashboard-container">
+    <!-- 顶部固定区域 -->
+    <div class="top-bar">
+      <div class="header-info">
+        <div>{{ currentTime }}</div>
+      </div>
+    </div>
+
+    <!-- 全屏地图区域（背景） -->
+    <div class="fullscreen-map">
+      <MapComponent></MapComponent>
+    </div>
+
+    <!-- 悬浮模块容器 -->
+    <div class="floating-modules">
+      <!-- 左侧模块组 -->
+      <div class="left-modules">
+        <div class="module-card overview-card">
+          <div class="module-header">设备总览</div>
+          <div class="module-content">
+            <DeviceOverview />
+          </div>
+        </div>
+
+        <div class="module-card">
+          <div class="module-header">设备类别</div>
+          <div class="module-content">
+            <DeviceCategory />
+          </div>
+        </div>
+
+        <div class="module-card">
+          <div class="module-header">设备使用频次</div>
+          <div class="module-content">
+            <DeviceUsage />
+          </div>
+        </div>
+      </div>
+
+      <!-- 右侧模块组 -->
+      <div class="right-modules">
+        <div class="module-card alarm-card">
+          <div class="module-header">报警数据</div>
+          <div class="module-content">
+            <AlarmOverview :alarmOverview="alarmOverview" />
+          </div>
+        </div>
+
+        <div class="module-card">
+          <div class="module-header">报警事件</div>
+          <div class="module-content">
+            <AlarmEvent :alarmOverview="alarmOverview" />
+          </div>
+        </div>
+
+        <div class="module-card">
+          <div class="module-header">报警次数</div>
+          <div class="module-content">
+            <AlarmCount />
+          </div>
+        </div>
+      </div>
+
+      <!-- 底部中间模块 -->
+      <div class="bottom-middle-module">
+        <div class="module-card realtime-card">
+          <div class="module-header realtime-header">实时报警信息</div>
+          <div class="module-content">
+            <RealTimeAlarm />
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</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';
+import DeviceUsage from './components/DeviceUsage.vue';
+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());
+// 每秒更新时间
+const timer = setInterval(() => {
+  currentDate.value = new Date();
+}, 1000);
+// 组件卸载时清除定时器
+onUnmounted(() => {
+  clearInterval(timer);
+});
+
+// 格式化时间
+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>
+.dashboard-container {
+  width: 100vw;
+  height: 100vh;
+  position: relative;
+  overflow: hidden;
+}
+
+/* 顶部栏 */
+.top-bar {
+  position: relative;
+  z-index: 10;
+  height: 13vh;
+  background: url(@/assets/homeIndex/nav.png) no-repeat;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  background-size: 100% 100%;
+
+}
+
+.header-info {
+  position: absolute;
+  right: 6vh;
+  top: 3.8vh;
+  color: #fff;
+  font-size: 1.8vh;
+}
+
+/* 全屏地图 */
+.fullscreen-map {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: radial-gradient(0% 0% at 0% 0%, #091B2D 0%, #0C2644 100%);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+/* 悬浮模块容器 */
+.floating-modules {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  z-index: 5;
+  padding: 1.5vw;
+  box-sizing: border-box;
+  pointer-events: none;
+}
+
+/* 左侧模块组 */
+.left-modules {
+  position: absolute;
+  top: 8vh;
+  left: 0.5vw;
+  display: flex;
+  flex-direction: column;
+  width: 27vw;
+  height: calc(100vh - 9vh);
+  pointer-events: auto;
+}
+
+/* 右侧模块组 */
+.right-modules {
+  position: absolute;
+  top: 8vh;
+  right: 0.5vw;
+  display: flex;
+  flex-direction: column;
+  width: 27vw;
+  height: calc(100vh - 9vh);
+  pointer-events: auto;
+}
+
+/* 底部中间模块 */
+.bottom-middle-module {
+  position: absolute;
+  bottom: 0.4vw;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 44vw;
+  height: calc(39vh - 9vh);
+  pointer-events: auto;
+}
+
+/* 模块卡片样式 */
+.module-card {
+  background: url(@/assets/homeIndex/card.png) no-repeat;
+  position: relative;
+  background-size: 100% 100%;
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+}
+
+/* 模块标题 */
+.module-header {
+  position: absolute;
+  font-size: 1.6vh;
+  color: #fff;
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+  left: 5vh;
+  top: 3.2vh;
+
+}
+
+.realtime-header {
+  left: 8vh;
+  top: 3.4vh;
+}
+
+/* 模块内容 */
+.module-content {
+  position: relative;
+}
+</style>