diff --git a/src/api/home/dashboard/index.ts b/src/api/home/dashboard/index.ts
new file mode 100644
index 0000000..25e1e4a
--- /dev/null
+++ b/src/api/home/dashboard/index.ts
@@ -0,0 +1,35 @@
+/**
+ * 首页接口
+ */
+import request from '@/api/index'
+
+// 基本概况
+export function getBase() {
+  return request({
+    url: '/homePage/apis/overall',
+    method: 'post',
+  })
+}
+
+// 设备运行情况
+export function getDeviceStatus() {
+  return request({
+    url: '/homePage/apis/deviceStatus',
+    method: 'post',
+  })
+}
+// 消息通知
+export function getMessage() {
+  return request({
+    url: '/homePage/apis/note',
+    method: 'post',
+  })
+}
+// 异常位置分析
+export function getErrorAnalyse(data: any) {
+  return request({
+    url: '/homePage/apis/alarmPosition',
+    method: 'post',
+    data,
+  })
+}

diff --git a/src/api/home/dashboard/index.ts b/src/api/home/dashboard/index.ts
new file mode 100644
index 0000000..25e1e4a
--- /dev/null
+++ b/src/api/home/dashboard/index.ts
@@ -0,0 +1,35 @@
+/**
+ * 首页接口
+ */
+import request from '@/api/index'
+
+// 基本概况
+export function getBase() {
+  return request({
+    url: '/homePage/apis/overall',
+    method: 'post',
+  })
+}
+
+// 设备运行情况
+export function getDeviceStatus() {
+  return request({
+    url: '/homePage/apis/deviceStatus',
+    method: 'post',
+  })
+}
+// 消息通知
+export function getMessage() {
+  return request({
+    url: '/homePage/apis/note',
+    method: 'post',
+  })
+}
+// 异常位置分析
+export function getErrorAnalyse(data: any) {
+  return request({
+    url: '/homePage/apis/alarmPosition',
+    method: 'post',
+    data,
+  })
+}
diff --git a/src/views/home/alarm/count/components/locationAnalysis.vue b/src/views/home/alarm/count/components/locationAnalysis.vue
index a4c32cf..b7da9cc 100644
--- a/src/views/home/alarm/count/components/locationAnalysis.vue
+++ b/src/views/home/alarm/count/components/locationAnalysis.vue
@@ -5,19 +5,41 @@
  -->
 <script lang="ts" setup name="AlarmCount">
 import layout from './layout.vue'
+import { getErrorAnalyse } from '@/api/home/dashboard/index'
 const listQuery = ref({
-  type: 'day',
+  begTime: '',
+  endTime: '',
+  ledgerType: '',
+  timeType: '1',
+})
+// 开始结束时间
+const datetimerange = ref()
+watch(() => datetimerange.value, (newVal) => {
+  listQuery.value.begTime = ''
+  listQuery.value.endTime = ''
+  if (Array.isArray(newVal)) {
+    if (newVal.length) {
+      listQuery.value.begTime = `${newVal[0]}`
+      listQuery.value.endTime = `${newVal[1]}`
+    }
+  }
 })
 const selectTimeType = (type: string) => {
-  listQuery.value.type = type
+  listQuery.value.timeType = type
 }
-const list = ref([])
-setTimeout(() => {
-  list.value = xAxisData.value.map((item, index) => ({
-    alarmType: item,
-    value: data.value[0].data[index],
-  }))
-}, 1000)
+const list = ref<any[]>([])
+const loadingTable = ref(true)
+// 获取数据
+const fetchData = () => {
+  loadingTable.value = true
+  getErrorAnalyse(listQuery.value).then((res) => {
+    list.value = res.data
+    loadingTable.value = false
+  }).catch(() => {
+    loadingTable.value = false
+  })
+}
+fetchData()
 </script>
 
 <template>
@@ -25,35 +47,26 @@
     <!-- 查询条件 -->
     <template #search>
       <div class="search">
-        <el-button
-          :class="listQuery.type === 'day' ? 'active' : ''" round size="small"
-          @click="selectTimeType('day')"
-        >
+        <el-button :class="listQuery.timeType === '1' ? 'active' : ''" round size="small" @click="selectTimeType('1')">
           今日
         </el-button>
-        <el-button
-          :class="listQuery.type === 'week' ? 'active' : ''" round size="small"
-          @click="selectTimeType('week')"
-        >
+        <el-button :class="listQuery.timeType === '2' ? 'active' : ''" round size="small" @click="selectTimeType('2')">
           本周
         </el-button>
-        <el-button
-          :class="listQuery.type === 'month' ? 'active' : ''" round size="small"
-          @click="selectTimeType('month')"
-        >
+        <el-button :class="listQuery.timeType === '3' ? 'active' : ''" round size="small" @click="selectTimeType('3')">
           本月
         </el-button>
-        <el-select v-model="listQuery.keywords" placeholder="全部类别" clearable style="width: 180px;margin: 0 5px;" />
-        <dept-select
-          v-model="listQuery.keywords" placeholder="管理单位" :clearable="true"
-          style="width: 220px;margin: 0 5px;"
-        />
+        <el-select v-model="listQuery.ledgerType" placeholder="全部类别" clearable style="width: 180px;margin: 0 5px;">
+          <el-option label="闸井" value="1" />
+          <el-option label="场站" value="2" />
+          <el-option label="管线" value="3" />
+        </el-select>
         <el-date-picker
           v-model="datetimerange" type="datetimerange" format="YYYY-MM-DD HH:mm:ss"
           style="width: 340px;margin: 0 5px;" value-format="YYYY-MM-DD HH:mm:ss" range-separator="至"
           start-placeholder="报警开始时间" end-placeholder="报警结束时间" clearable
         />
-        <el-button type="primary" style="margin: 0 5px;">
+        <el-button type="primary" style="margin: 0 5px;" @click="fetchData">
           搜索
         </el-button>
       </div>
@@ -61,14 +74,14 @@
     <template #content>
       <div class="alarm-count">
         <div class="table">
-          <el-table border :data="list" stripe style="width: 100%;" :height="340">
-            <el-table-column label="位置类型" prop="alarmType" align="center" />
-            <el-table-column label="位号" prop="value" align="center" />
-            <el-table-column label="名称" prop="value" align="center" />
-            <el-table-column label="位置" prop="value" align="center" />
-            <el-table-column label="管理单位" prop="value" align="center" />
-            <el-table-column label="标签" prop="value" align="center" />
-            <el-table-column label="报警次数" prop="value" align="center" />
+          <el-table v-loading="loadingTable" border :data="list" stripe style="width: 100%;" :height="340">
+            <el-table-column label="位置类型" prop="type" align="center" />
+            <el-table-column label="位号" prop="tagNumber" align="center" />
+            <el-table-column label="名称" prop="ledgerName" align="center" />
+            <el-table-column label="位置" prop="place" align="center" />
+            <el-table-column label="管理单位" prop="deptName" align="center" />
+            <el-table-column label="标签" prop="marker" align="center" />
+            <el-table-column label="报警次数" prop="alarmSum" align="center" />
           </el-table>
         </div>
       </div>

diff --git a/src/api/home/dashboard/index.ts b/src/api/home/dashboard/index.ts
new file mode 100644
index 0000000..25e1e4a
--- /dev/null
+++ b/src/api/home/dashboard/index.ts
@@ -0,0 +1,35 @@
+/**
+ * 首页接口
+ */
+import request from '@/api/index'
+
+// 基本概况
+export function getBase() {
+  return request({
+    url: '/homePage/apis/overall',
+    method: 'post',
+  })
+}
+
+// 设备运行情况
+export function getDeviceStatus() {
+  return request({
+    url: '/homePage/apis/deviceStatus',
+    method: 'post',
+  })
+}
+// 消息通知
+export function getMessage() {
+  return request({
+    url: '/homePage/apis/note',
+    method: 'post',
+  })
+}
+// 异常位置分析
+export function getErrorAnalyse(data: any) {
+  return request({
+    url: '/homePage/apis/alarmPosition',
+    method: 'post',
+    data,
+  })
+}
diff --git a/src/views/home/alarm/count/components/locationAnalysis.vue b/src/views/home/alarm/count/components/locationAnalysis.vue
index a4c32cf..b7da9cc 100644
--- a/src/views/home/alarm/count/components/locationAnalysis.vue
+++ b/src/views/home/alarm/count/components/locationAnalysis.vue
@@ -5,19 +5,41 @@
  -->
 <script lang="ts" setup name="AlarmCount">
 import layout from './layout.vue'
+import { getErrorAnalyse } from '@/api/home/dashboard/index'
 const listQuery = ref({
-  type: 'day',
+  begTime: '',
+  endTime: '',
+  ledgerType: '',
+  timeType: '1',
+})
+// 开始结束时间
+const datetimerange = ref()
+watch(() => datetimerange.value, (newVal) => {
+  listQuery.value.begTime = ''
+  listQuery.value.endTime = ''
+  if (Array.isArray(newVal)) {
+    if (newVal.length) {
+      listQuery.value.begTime = `${newVal[0]}`
+      listQuery.value.endTime = `${newVal[1]}`
+    }
+  }
 })
 const selectTimeType = (type: string) => {
-  listQuery.value.type = type
+  listQuery.value.timeType = type
 }
-const list = ref([])
-setTimeout(() => {
-  list.value = xAxisData.value.map((item, index) => ({
-    alarmType: item,
-    value: data.value[0].data[index],
-  }))
-}, 1000)
+const list = ref<any[]>([])
+const loadingTable = ref(true)
+// 获取数据
+const fetchData = () => {
+  loadingTable.value = true
+  getErrorAnalyse(listQuery.value).then((res) => {
+    list.value = res.data
+    loadingTable.value = false
+  }).catch(() => {
+    loadingTable.value = false
+  })
+}
+fetchData()
 </script>
 
 <template>
@@ -25,35 +47,26 @@
     <!-- 查询条件 -->
     <template #search>
       <div class="search">
-        <el-button
-          :class="listQuery.type === 'day' ? 'active' : ''" round size="small"
-          @click="selectTimeType('day')"
-        >
+        <el-button :class="listQuery.timeType === '1' ? 'active' : ''" round size="small" @click="selectTimeType('1')">
           今日
         </el-button>
-        <el-button
-          :class="listQuery.type === 'week' ? 'active' : ''" round size="small"
-          @click="selectTimeType('week')"
-        >
+        <el-button :class="listQuery.timeType === '2' ? 'active' : ''" round size="small" @click="selectTimeType('2')">
           本周
         </el-button>
-        <el-button
-          :class="listQuery.type === 'month' ? 'active' : ''" round size="small"
-          @click="selectTimeType('month')"
-        >
+        <el-button :class="listQuery.timeType === '3' ? 'active' : ''" round size="small" @click="selectTimeType('3')">
           本月
         </el-button>
-        <el-select v-model="listQuery.keywords" placeholder="全部类别" clearable style="width: 180px;margin: 0 5px;" />
-        <dept-select
-          v-model="listQuery.keywords" placeholder="管理单位" :clearable="true"
-          style="width: 220px;margin: 0 5px;"
-        />
+        <el-select v-model="listQuery.ledgerType" placeholder="全部类别" clearable style="width: 180px;margin: 0 5px;">
+          <el-option label="闸井" value="1" />
+          <el-option label="场站" value="2" />
+          <el-option label="管线" value="3" />
+        </el-select>
         <el-date-picker
           v-model="datetimerange" type="datetimerange" format="YYYY-MM-DD HH:mm:ss"
           style="width: 340px;margin: 0 5px;" value-format="YYYY-MM-DD HH:mm:ss" range-separator="至"
           start-placeholder="报警开始时间" end-placeholder="报警结束时间" clearable
         />
-        <el-button type="primary" style="margin: 0 5px;">
+        <el-button type="primary" style="margin: 0 5px;" @click="fetchData">
           搜索
         </el-button>
       </div>
@@ -61,14 +74,14 @@
     <template #content>
       <div class="alarm-count">
         <div class="table">
-          <el-table border :data="list" stripe style="width: 100%;" :height="340">
-            <el-table-column label="位置类型" prop="alarmType" align="center" />
-            <el-table-column label="位号" prop="value" align="center" />
-            <el-table-column label="名称" prop="value" align="center" />
-            <el-table-column label="位置" prop="value" align="center" />
-            <el-table-column label="管理单位" prop="value" align="center" />
-            <el-table-column label="标签" prop="value" align="center" />
-            <el-table-column label="报警次数" prop="value" align="center" />
+          <el-table v-loading="loadingTable" border :data="list" stripe style="width: 100%;" :height="340">
+            <el-table-column label="位置类型" prop="type" align="center" />
+            <el-table-column label="位号" prop="tagNumber" align="center" />
+            <el-table-column label="名称" prop="ledgerName" align="center" />
+            <el-table-column label="位置" prop="place" align="center" />
+            <el-table-column label="管理单位" prop="deptName" align="center" />
+            <el-table-column label="标签" prop="marker" align="center" />
+            <el-table-column label="报警次数" prop="alarmSum" align="center" />
           </el-table>
         </div>
       </div>
diff --git a/src/views/home/dashboard/index.vue b/src/views/home/dashboard/index.vue
index a4b5f57..3d371ae 100644
--- a/src/views/home/dashboard/index.vue
+++ b/src/views/home/dashboard/index.vue
@@ -6,50 +6,60 @@
 <script lang="ts" setup name="Dashboard">
 import card from './components/showCard.vue'
 import { img } from './components/imgData'
+import { getBase, getDeviceStatus, getMessage } from '@/api/home/dashboard/index'
+import locationAnalysis from '@/views/home/alarm/count/components/locationAnalysis.vue'
 // 基本概况数据
-const basicProfileData = ref([
+const basicProfileLoading = ref(true)
+const basicProfileData = ref<any[]>([
   {
     img: img.tiaoya,
-    value: '25',
+    value: '0',
     name: '调压站',
     unit: '座',
+    id: 'tyz',
   },
   {
     img: img.well,
-    value: '5231',
+    value: '0',
     name: '闸井',
     unit: '个',
+    id: 'zj',
   },
   {
     img: img.guanxian,
-    value: '3421',
+    value: '0',
     name: '管线',
     unit: 'KM',
+    id: 'gx',
   },
 ])
 // 设备运行情况数据
-const deviceOperationData = ref([
+const deviceOperationLoading = ref(true)
+const deviceOperationData = ref<any[]>([
   {
     img: img.zaixian,
-    value: '4571',
+    value: '0',
     name: '在线',
     unit: '个',
+    id: '1',
   },
   {
     img: img.lixian,
-    value: '31',
+    value: '0',
     name: '离线',
     unit: '个',
+    id: '0',
   },
   {
     img: img.tingyong,
-    value: '21',
+    value: '0',
     name: '停用',
     unit: '个',
+    id: '2',
   },
 ])
 // 工作台数据
-const benchData = ref([
+const benchData = ref<any[]>([
   {
     name: '当前报警',
     img: img.dqbj,
@@ -88,52 +98,51 @@
   },
 ])
 // 消息通知数据
-const messageData = ref([
-  {
-    alarmTypeName: '闸井浓度超限报警',
-    alarmContent: '永定路中压闸1A',
-    alarmTime: '2024-12-30 12:00',
-  },
-  {
-    alarmTypeName: '闸井浓度超限报警',
-    alarmContent: '永定路中压闸1A',
-    alarmTime: '2024-12-30 12:00',
-  },
-  {
-    alarmTypeName: '闸井浓度超限报警',
-    alarmContent: '永定路中压闸1A',
-    alarmTime: '2024-12-30 12:00',
-  },
-  {
-    alarmTypeName: '闸井浓度超限报警',
-    alarmContent: '永定路中压闸1A',
-    alarmTime: '2024-12-30 12:00',
-  },
-  {
-    alarmTypeName: '闸井浓度超限报警',
-    alarmContent: '永定路中压闸1A',
-    alarmTime: '2024-12-30 12:00',
-  },
-  {
-    alarmTypeName: '闸井浓度超限报警',
-    alarmContent: '永定路中压闸1A',
-    alarmTime: '2024-12-30 12:00',
-  },
-  {
-    alarmTypeName: '闸井浓度超限报警',
-    alarmContent: '永定路中压闸1A',
-    alarmTime: '2024-12-30 12:00',
-  },
-  {
-    alarmTypeName: '闸井浓度超限报警',
-    alarmContent: '永定路中压闸1A',
-    alarmTime: '2024-12-30 12:00',
-  },
-])
+const messageLoading = ref(true)
+const messageData = ref<any[]>([])
 // 更多跳转
 const more = (type: string) => {
 
 }
+
+// 获取数据
+const fetchData = () => {
+  // 基本概况
+  basicProfileLoading.value = true
+  getBase().then((res) => {
+    res.data.forEach((element: any) => {
+      const index = basicProfileData.value.findIndex((item: any) => item.id === element.name)
+      if (index !== -1) {
+        basicProfileData.value[index].value = element.value
+      }
+    })
+    basicProfileLoading.value = false
+  }).catch(() => {
+    basicProfileLoading.value = false
+  })
+  // 设备运行情况
+  deviceOperationLoading.value = true
+  getDeviceStatus().then((res) => {
+    res.data.forEach((element: any) => {
+      const index = deviceOperationData.value.findIndex((item: any) => item.id === element.name)
+      if (index !== -1) {
+        deviceOperationData.value[index].value = element.value
+      }
+    })
+    deviceOperationLoading.value = false
+  }).catch(() => {
+    deviceOperationLoading.value = false
+  })
+  // 消息通知
+  messageLoading.value = true
+  getMessage().then((res) => {
+    messageData.value = res.data.rows
+    messageLoading.value = false
+  }).catch(() => {
+    messageLoading.value = false
+  })
+}
+fetchData()
 </script>
 
 <template>
@@ -143,7 +152,7 @@
     <div class="top-container">
       <div class="top-left-container">
         <!-- 基本概况 -->
-        <card class="base" title="基本概况" :show-more="false">
+        <card v-loading="basicProfileLoading" class="base" title="基本概况" :show-more="false">
           <template #content>
             <div class="base-container">
               <div v-for="item in basicProfileData" :key="item" class="base-item">
@@ -164,7 +173,7 @@
           </template>
         </card>
         <!-- 设备运行情况 -->
-        <card class="base top" title="设备运行情况" :show-more="false">
+        <card v-loading="deviceOperationLoading" class="base" title="设备运行情况" :show-more="false">
           <template #content>
             <div class="base-container">
               <div v-for="item in deviceOperationData" :key="item" class="base-item">
@@ -185,6 +194,9 @@
           </template>
         </card>
       </div>
+    </div>
+    <!-- 中部 -->
+    <div class="middle-container top">
       <!-- 工作台 -->
       <card class="bench" title="工作台" :show-more="false">
         <template #content>
@@ -204,48 +216,23 @@
       <card class="message" title="消息通知" :show-more="true" @more="more('message')">
         <template #content>
           <el-scrollbar height="200px">
-            <div class="message-container">
+            <div v-loading="messageLoading" class="message-container">
               <div v-for="item in messageData" :key="item" class="message-item">
                 <div class="left">
-                  <span class="type">【{{ item.alarmTypeName }}】</span>
-                  <span class="content">{{ item.alarmContent }}</span>
+                  <span class="type">【{{ item.messageTypeDetail }}】</span>
+                  <span class="content">{{ item.messageContent }}</span>
                 </div>
-                <span class="time">{{ item.alarmTime }}</span>
+                <span class="time">{{ item.ts }}</span>
               </div>
             </div>
           </el-scrollbar>
         </template>
       </card>
     </div>
-    <!-- 中部 -->
-    <div class="middle-container top">
-      <!-- 设备分类统计 -->
-      <card class="type-count" title="设备分类统计" :show-more="true" @more="more('type')">
-        <template #content>
-          内容1111111111111
-        </template>
-      </card>
-      <!-- 管理单位设备统计 -->
-      <card class="dept-count" title="管理单位设备统计" :show-more="true" @more="more('dept')">
-        <template #content>
-          内容1111111111111
-        </template>
-      </card>
-    </div>
     <!-- 底部 -->
     <div class="bottom-container top">
-      <!-- 7日报警趋势分析 -->
-      <card class="week-alarm" title="7日报警趋势分析" :show-more="true" @more="more('anaylse')">
-        <template #content>
-          内容1111111111111
-        </template>
-      </card>
-      <!-- 各管理单位报警统计 -->
-      <card class="dept-alarm" title="各管理单位报警统计" :show-more="true" @more="more('alarm')">
-        <template #content>
-          内容1111111111111
-        </template>
-      </card>
+      <!-- 异常位置分析 -->
+      <location-analysis class="error" />
     </div>
   </app-container>
 </template>
@@ -257,10 +244,12 @@
   justify-content: space-around;
 
   .top-left-container {
-    width: 36%;
+    width: 100%;
+    display: flex;
+    justify-content: space-around;
 
     .base {
-      width: 100%;
+      width: 49.5%;
       height: 120px;
 
       .base-container {
@@ -384,6 +373,89 @@
     width: 49.4%;
     height: 255px;
   }
+
+  .bench {
+    width: 22%;
+    height: 250px;
+
+    .bench-container {
+      display: flex;
+      justify-content: space-around;
+      flex-wrap: wrap;
+      align-items: center;
+
+      .bench-item {
+        width: 40%;
+        display: flex;
+        height: 40px;
+        margin-top: 15px;
+
+        &:hover {
+          border: 1px solid #ccc;
+          cursor: pointer;
+          box-shadow: 0 0 12px rgb(0 0 0 / 12%);
+          border-radius: 4px;
+        }
+
+        .img {
+          display: flex;
+          justify-content: center;
+          flex-direction: column;
+        }
+
+        .value {
+          display: flex;
+          justify-content: center;
+          flex-direction: column;
+          text-align: center;
+          width: 60%;
+          overflow: hidden;
+          white-space: nowrap;
+          text-overflow: ellipsis;
+        }
+      }
+    }
+  }
+
+  .message {
+    width: 77%;
+    height: 250px;
+
+    .message-container {
+      .message-item {
+        height: 33px;
+        line-height: 33px;
+        display: flex;
+        justify-content: space-between;
+        padding: 0 10px;
+        width: 100%;
+
+        .left {
+          width: 75%;
+          display: flex;
+          align-items: center;
+          overflow: hidden;
+          white-space: nowrap;
+          text-overflow: ellipsis;
+        }
+
+        .content {
+          display: inline-block;
+          padding-left: 10px;
+          width: 65%;
+          overflow: hidden;
+          white-space: nowrap;
+          text-overflow: ellipsis;
+        }
+
+        .time {
+          font-size: 16px;
+          color: #7c7777;
+          white-space: nowrap;
+        }
+      }
+    }
+  }
 }
 
 .bottom-container {
@@ -396,6 +468,10 @@
     width: 49.4%;
     height: 255px;
   }
+
+  .error {
+    width: 99.5%;
+  }
 }
 
 .top {

diff --git a/src/api/home/dashboard/index.ts b/src/api/home/dashboard/index.ts
new file mode 100644
index 0000000..25e1e4a
--- /dev/null
+++ b/src/api/home/dashboard/index.ts
@@ -0,0 +1,35 @@
+/**
+ * 首页接口
+ */
+import request from '@/api/index'
+
+// 基本概况
+export function getBase() {
+  return request({
+    url: '/homePage/apis/overall',
+    method: 'post',
+  })
+}
+
+// 设备运行情况
+export function getDeviceStatus() {
+  return request({
+    url: '/homePage/apis/deviceStatus',
+    method: 'post',
+  })
+}
+// 消息通知
+export function getMessage() {
+  return request({
+    url: '/homePage/apis/note',
+    method: 'post',
+  })
+}
+// 异常位置分析
+export function getErrorAnalyse(data: any) {
+  return request({
+    url: '/homePage/apis/alarmPosition',
+    method: 'post',
+    data,
+  })
+}
diff --git a/src/views/home/alarm/count/components/locationAnalysis.vue b/src/views/home/alarm/count/components/locationAnalysis.vue
index a4c32cf..b7da9cc 100644
--- a/src/views/home/alarm/count/components/locationAnalysis.vue
+++ b/src/views/home/alarm/count/components/locationAnalysis.vue
@@ -5,19 +5,41 @@
  -->
 <script lang="ts" setup name="AlarmCount">
 import layout from './layout.vue'
+import { getErrorAnalyse } from '@/api/home/dashboard/index'
 const listQuery = ref({
-  type: 'day',
+  begTime: '',
+  endTime: '',
+  ledgerType: '',
+  timeType: '1',
+})
+// 开始结束时间
+const datetimerange = ref()
+watch(() => datetimerange.value, (newVal) => {
+  listQuery.value.begTime = ''
+  listQuery.value.endTime = ''
+  if (Array.isArray(newVal)) {
+    if (newVal.length) {
+      listQuery.value.begTime = `${newVal[0]}`
+      listQuery.value.endTime = `${newVal[1]}`
+    }
+  }
 })
 const selectTimeType = (type: string) => {
-  listQuery.value.type = type
+  listQuery.value.timeType = type
 }
-const list = ref([])
-setTimeout(() => {
-  list.value = xAxisData.value.map((item, index) => ({
-    alarmType: item,
-    value: data.value[0].data[index],
-  }))
-}, 1000)
+const list = ref<any[]>([])
+const loadingTable = ref(true)
+// 获取数据
+const fetchData = () => {
+  loadingTable.value = true
+  getErrorAnalyse(listQuery.value).then((res) => {
+    list.value = res.data
+    loadingTable.value = false
+  }).catch(() => {
+    loadingTable.value = false
+  })
+}
+fetchData()
 </script>
 
 <template>
@@ -25,35 +47,26 @@
     <!-- 查询条件 -->
     <template #search>
       <div class="search">
-        <el-button
-          :class="listQuery.type === 'day' ? 'active' : ''" round size="small"
-          @click="selectTimeType('day')"
-        >
+        <el-button :class="listQuery.timeType === '1' ? 'active' : ''" round size="small" @click="selectTimeType('1')">
           今日
         </el-button>
-        <el-button
-          :class="listQuery.type === 'week' ? 'active' : ''" round size="small"
-          @click="selectTimeType('week')"
-        >
+        <el-button :class="listQuery.timeType === '2' ? 'active' : ''" round size="small" @click="selectTimeType('2')">
           本周
         </el-button>
-        <el-button
-          :class="listQuery.type === 'month' ? 'active' : ''" round size="small"
-          @click="selectTimeType('month')"
-        >
+        <el-button :class="listQuery.timeType === '3' ? 'active' : ''" round size="small" @click="selectTimeType('3')">
           本月
         </el-button>
-        <el-select v-model="listQuery.keywords" placeholder="全部类别" clearable style="width: 180px;margin: 0 5px;" />
-        <dept-select
-          v-model="listQuery.keywords" placeholder="管理单位" :clearable="true"
-          style="width: 220px;margin: 0 5px;"
-        />
+        <el-select v-model="listQuery.ledgerType" placeholder="全部类别" clearable style="width: 180px;margin: 0 5px;">
+          <el-option label="闸井" value="1" />
+          <el-option label="场站" value="2" />
+          <el-option label="管线" value="3" />
+        </el-select>
         <el-date-picker
           v-model="datetimerange" type="datetimerange" format="YYYY-MM-DD HH:mm:ss"
           style="width: 340px;margin: 0 5px;" value-format="YYYY-MM-DD HH:mm:ss" range-separator="至"
           start-placeholder="报警开始时间" end-placeholder="报警结束时间" clearable
         />
-        <el-button type="primary" style="margin: 0 5px;">
+        <el-button type="primary" style="margin: 0 5px;" @click="fetchData">
           搜索
         </el-button>
       </div>
@@ -61,14 +74,14 @@
     <template #content>
       <div class="alarm-count">
         <div class="table">
-          <el-table border :data="list" stripe style="width: 100%;" :height="340">
-            <el-table-column label="位置类型" prop="alarmType" align="center" />
-            <el-table-column label="位号" prop="value" align="center" />
-            <el-table-column label="名称" prop="value" align="center" />
-            <el-table-column label="位置" prop="value" align="center" />
-            <el-table-column label="管理单位" prop="value" align="center" />
-            <el-table-column label="标签" prop="value" align="center" />
-            <el-table-column label="报警次数" prop="value" align="center" />
+          <el-table v-loading="loadingTable" border :data="list" stripe style="width: 100%;" :height="340">
+            <el-table-column label="位置类型" prop="type" align="center" />
+            <el-table-column label="位号" prop="tagNumber" align="center" />
+            <el-table-column label="名称" prop="ledgerName" align="center" />
+            <el-table-column label="位置" prop="place" align="center" />
+            <el-table-column label="管理单位" prop="deptName" align="center" />
+            <el-table-column label="标签" prop="marker" align="center" />
+            <el-table-column label="报警次数" prop="alarmSum" align="center" />
           </el-table>
         </div>
       </div>
diff --git a/src/views/home/dashboard/index.vue b/src/views/home/dashboard/index.vue
index a4b5f57..3d371ae 100644
--- a/src/views/home/dashboard/index.vue
+++ b/src/views/home/dashboard/index.vue
@@ -6,50 +6,60 @@
 <script lang="ts" setup name="Dashboard">
 import card from './components/showCard.vue'
 import { img } from './components/imgData'
+import { getBase, getDeviceStatus, getMessage } from '@/api/home/dashboard/index'
+import locationAnalysis from '@/views/home/alarm/count/components/locationAnalysis.vue'
 // 基本概况数据
-const basicProfileData = ref([
+const basicProfileLoading = ref(true)
+const basicProfileData = ref<any[]>([
   {
     img: img.tiaoya,
-    value: '25',
+    value: '0',
     name: '调压站',
     unit: '座',
+    id: 'tyz',
   },
   {
     img: img.well,
-    value: '5231',
+    value: '0',
     name: '闸井',
     unit: '个',
+    id: 'zj',
   },
   {
     img: img.guanxian,
-    value: '3421',
+    value: '0',
     name: '管线',
     unit: 'KM',
+    id: 'gx',
   },
 ])
 // 设备运行情况数据
-const deviceOperationData = ref([
+const deviceOperationLoading = ref(true)
+const deviceOperationData = ref<any[]>([
   {
     img: img.zaixian,
-    value: '4571',
+    value: '0',
     name: '在线',
     unit: '个',
+    id: '1',
   },
   {
     img: img.lixian,
-    value: '31',
+    value: '0',
     name: '离线',
     unit: '个',
+    id: '0',
   },
   {
     img: img.tingyong,
-    value: '21',
+    value: '0',
     name: '停用',
     unit: '个',
+    id: '2',
   },
 ])
 // 工作台数据
-const benchData = ref([
+const benchData = ref<any[]>([
   {
     name: '当前报警',
     img: img.dqbj,
@@ -88,52 +98,51 @@
   },
 ])
 // 消息通知数据
-const messageData = ref([
-  {
-    alarmTypeName: '闸井浓度超限报警',
-    alarmContent: '永定路中压闸1A',
-    alarmTime: '2024-12-30 12:00',
-  },
-  {
-    alarmTypeName: '闸井浓度超限报警',
-    alarmContent: '永定路中压闸1A',
-    alarmTime: '2024-12-30 12:00',
-  },
-  {
-    alarmTypeName: '闸井浓度超限报警',
-    alarmContent: '永定路中压闸1A',
-    alarmTime: '2024-12-30 12:00',
-  },
-  {
-    alarmTypeName: '闸井浓度超限报警',
-    alarmContent: '永定路中压闸1A',
-    alarmTime: '2024-12-30 12:00',
-  },
-  {
-    alarmTypeName: '闸井浓度超限报警',
-    alarmContent: '永定路中压闸1A',
-    alarmTime: '2024-12-30 12:00',
-  },
-  {
-    alarmTypeName: '闸井浓度超限报警',
-    alarmContent: '永定路中压闸1A',
-    alarmTime: '2024-12-30 12:00',
-  },
-  {
-    alarmTypeName: '闸井浓度超限报警',
-    alarmContent: '永定路中压闸1A',
-    alarmTime: '2024-12-30 12:00',
-  },
-  {
-    alarmTypeName: '闸井浓度超限报警',
-    alarmContent: '永定路中压闸1A',
-    alarmTime: '2024-12-30 12:00',
-  },
-])
+const messageLoading = ref(true)
+const messageData = ref<any[]>([])
 // 更多跳转
 const more = (type: string) => {
 
 }
+
+// 获取数据
+const fetchData = () => {
+  // 基本概况
+  basicProfileLoading.value = true
+  getBase().then((res) => {
+    res.data.forEach((element: any) => {
+      const index = basicProfileData.value.findIndex((item: any) => item.id === element.name)
+      if (index !== -1) {
+        basicProfileData.value[index].value = element.value
+      }
+    })
+    basicProfileLoading.value = false
+  }).catch(() => {
+    basicProfileLoading.value = false
+  })
+  // 设备运行情况
+  deviceOperationLoading.value = true
+  getDeviceStatus().then((res) => {
+    res.data.forEach((element: any) => {
+      const index = deviceOperationData.value.findIndex((item: any) => item.id === element.name)
+      if (index !== -1) {
+        deviceOperationData.value[index].value = element.value
+      }
+    })
+    deviceOperationLoading.value = false
+  }).catch(() => {
+    deviceOperationLoading.value = false
+  })
+  // 消息通知
+  messageLoading.value = true
+  getMessage().then((res) => {
+    messageData.value = res.data.rows
+    messageLoading.value = false
+  }).catch(() => {
+    messageLoading.value = false
+  })
+}
+fetchData()
 </script>
 
 <template>
@@ -143,7 +152,7 @@
     <div class="top-container">
       <div class="top-left-container">
         <!-- 基本概况 -->
-        <card class="base" title="基本概况" :show-more="false">
+        <card v-loading="basicProfileLoading" class="base" title="基本概况" :show-more="false">
           <template #content>
             <div class="base-container">
               <div v-for="item in basicProfileData" :key="item" class="base-item">
@@ -164,7 +173,7 @@
           </template>
         </card>
         <!-- 设备运行情况 -->
-        <card class="base top" title="设备运行情况" :show-more="false">
+        <card v-loading="deviceOperationLoading" class="base" title="设备运行情况" :show-more="false">
           <template #content>
             <div class="base-container">
               <div v-for="item in deviceOperationData" :key="item" class="base-item">
@@ -185,6 +194,9 @@
           </template>
         </card>
       </div>
+    </div>
+    <!-- 中部 -->
+    <div class="middle-container top">
       <!-- 工作台 -->
       <card class="bench" title="工作台" :show-more="false">
         <template #content>
@@ -204,48 +216,23 @@
       <card class="message" title="消息通知" :show-more="true" @more="more('message')">
         <template #content>
           <el-scrollbar height="200px">
-            <div class="message-container">
+            <div v-loading="messageLoading" class="message-container">
               <div v-for="item in messageData" :key="item" class="message-item">
                 <div class="left">
-                  <span class="type">【{{ item.alarmTypeName }}】</span>
-                  <span class="content">{{ item.alarmContent }}</span>
+                  <span class="type">【{{ item.messageTypeDetail }}】</span>
+                  <span class="content">{{ item.messageContent }}</span>
                 </div>
-                <span class="time">{{ item.alarmTime }}</span>
+                <span class="time">{{ item.ts }}</span>
               </div>
             </div>
           </el-scrollbar>
         </template>
       </card>
     </div>
-    <!-- 中部 -->
-    <div class="middle-container top">
-      <!-- 设备分类统计 -->
-      <card class="type-count" title="设备分类统计" :show-more="true" @more="more('type')">
-        <template #content>
-          内容1111111111111
-        </template>
-      </card>
-      <!-- 管理单位设备统计 -->
-      <card class="dept-count" title="管理单位设备统计" :show-more="true" @more="more('dept')">
-        <template #content>
-          内容1111111111111
-        </template>
-      </card>
-    </div>
     <!-- 底部 -->
     <div class="bottom-container top">
-      <!-- 7日报警趋势分析 -->
-      <card class="week-alarm" title="7日报警趋势分析" :show-more="true" @more="more('anaylse')">
-        <template #content>
-          内容1111111111111
-        </template>
-      </card>
-      <!-- 各管理单位报警统计 -->
-      <card class="dept-alarm" title="各管理单位报警统计" :show-more="true" @more="more('alarm')">
-        <template #content>
-          内容1111111111111
-        </template>
-      </card>
+      <!-- 异常位置分析 -->
+      <location-analysis class="error" />
     </div>
   </app-container>
 </template>
@@ -257,10 +244,12 @@
   justify-content: space-around;
 
   .top-left-container {
-    width: 36%;
+    width: 100%;
+    display: flex;
+    justify-content: space-around;
 
     .base {
-      width: 100%;
+      width: 49.5%;
       height: 120px;
 
       .base-container {
@@ -384,6 +373,89 @@
     width: 49.4%;
     height: 255px;
   }
+
+  .bench {
+    width: 22%;
+    height: 250px;
+
+    .bench-container {
+      display: flex;
+      justify-content: space-around;
+      flex-wrap: wrap;
+      align-items: center;
+
+      .bench-item {
+        width: 40%;
+        display: flex;
+        height: 40px;
+        margin-top: 15px;
+
+        &:hover {
+          border: 1px solid #ccc;
+          cursor: pointer;
+          box-shadow: 0 0 12px rgb(0 0 0 / 12%);
+          border-radius: 4px;
+        }
+
+        .img {
+          display: flex;
+          justify-content: center;
+          flex-direction: column;
+        }
+
+        .value {
+          display: flex;
+          justify-content: center;
+          flex-direction: column;
+          text-align: center;
+          width: 60%;
+          overflow: hidden;
+          white-space: nowrap;
+          text-overflow: ellipsis;
+        }
+      }
+    }
+  }
+
+  .message {
+    width: 77%;
+    height: 250px;
+
+    .message-container {
+      .message-item {
+        height: 33px;
+        line-height: 33px;
+        display: flex;
+        justify-content: space-between;
+        padding: 0 10px;
+        width: 100%;
+
+        .left {
+          width: 75%;
+          display: flex;
+          align-items: center;
+          overflow: hidden;
+          white-space: nowrap;
+          text-overflow: ellipsis;
+        }
+
+        .content {
+          display: inline-block;
+          padding-left: 10px;
+          width: 65%;
+          overflow: hidden;
+          white-space: nowrap;
+          text-overflow: ellipsis;
+        }
+
+        .time {
+          font-size: 16px;
+          color: #7c7777;
+          white-space: nowrap;
+        }
+      }
+    }
+  }
 }
 
 .bottom-container {
@@ -396,6 +468,10 @@
     width: 49.4%;
     height: 255px;
   }
+
+  .error {
+    width: 99.5%;
+  }
 }
 
 .top {
diff --git a/src/views/home/device/count/components/bottom.vue b/src/views/home/device/count/components/bottom.vue
index 4b16e06..abdf488 100644
--- a/src/views/home/device/count/components/bottom.vue
+++ b/src/views/home/device/count/components/bottom.vue
@@ -7,7 +7,8 @@
 import { getDeviceTypeListPage } from '@/api/home/device/type'
 import { getDictByCode } from '@/api/system/dict'
 import { getDeptDevice, getOfflineDevice } from '@/api/home/device/count'
-// 设备分类统计数据
+// 管理单位设备统计
+const deptLoading = ref(true)
 const xAxisData = ref([])
 const data = ref<any[]>([])
 setTimeout(() => {
@@ -27,10 +28,14 @@
 }, 1000)
 // 获取数据
 const fetchData = () => {
+  deptLoading.value = true
   getDeptDevice().then((res) => {
+    deptLoading.value = false
     //   xAxisData.value = res.data.map((item: any) => item.name)
     //   data
     //  console.log(res.data, '222222222222222')
+  }).catch(() => {
+    deptLoading.value = false
   })
 }
 fetchData()
@@ -61,6 +66,8 @@
     total.value = res.data.total
     list.value = res.data.rows
     loadingTable.value = false
+  }).catch(() => {
+    loadingTable.value = false
   })
 }
 fetchListData()
@@ -107,7 +114,7 @@
       <div class="title">
         管理单位设备统计
       </div>
-      <div class="content">
+      <div v-loading="deptLoading" class="content">
         <bar-chart-vertical
           :x-axis-data="xAxisData" :bar-coner="0" :data="data" :colors="[]" :bar-width="15"
           :legend="{ itemWidth: 8, itemHeight: 8, type: 'scroll', orient: 'horizontal', icon: 'roundRect', right: '0', top: '10' }"

diff --git a/src/api/home/dashboard/index.ts b/src/api/home/dashboard/index.ts
new file mode 100644
index 0000000..25e1e4a
--- /dev/null
+++ b/src/api/home/dashboard/index.ts
@@ -0,0 +1,35 @@
+/**
+ * 首页接口
+ */
+import request from '@/api/index'
+
+// 基本概况
+export function getBase() {
+  return request({
+    url: '/homePage/apis/overall',
+    method: 'post',
+  })
+}
+
+// 设备运行情况
+export function getDeviceStatus() {
+  return request({
+    url: '/homePage/apis/deviceStatus',
+    method: 'post',
+  })
+}
+// 消息通知
+export function getMessage() {
+  return request({
+    url: '/homePage/apis/note',
+    method: 'post',
+  })
+}
+// 异常位置分析
+export function getErrorAnalyse(data: any) {
+  return request({
+    url: '/homePage/apis/alarmPosition',
+    method: 'post',
+    data,
+  })
+}
diff --git a/src/views/home/alarm/count/components/locationAnalysis.vue b/src/views/home/alarm/count/components/locationAnalysis.vue
index a4c32cf..b7da9cc 100644
--- a/src/views/home/alarm/count/components/locationAnalysis.vue
+++ b/src/views/home/alarm/count/components/locationAnalysis.vue
@@ -5,19 +5,41 @@
  -->
 <script lang="ts" setup name="AlarmCount">
 import layout from './layout.vue'
+import { getErrorAnalyse } from '@/api/home/dashboard/index'
 const listQuery = ref({
-  type: 'day',
+  begTime: '',
+  endTime: '',
+  ledgerType: '',
+  timeType: '1',
+})
+// 开始结束时间
+const datetimerange = ref()
+watch(() => datetimerange.value, (newVal) => {
+  listQuery.value.begTime = ''
+  listQuery.value.endTime = ''
+  if (Array.isArray(newVal)) {
+    if (newVal.length) {
+      listQuery.value.begTime = `${newVal[0]}`
+      listQuery.value.endTime = `${newVal[1]}`
+    }
+  }
 })
 const selectTimeType = (type: string) => {
-  listQuery.value.type = type
+  listQuery.value.timeType = type
 }
-const list = ref([])
-setTimeout(() => {
-  list.value = xAxisData.value.map((item, index) => ({
-    alarmType: item,
-    value: data.value[0].data[index],
-  }))
-}, 1000)
+const list = ref<any[]>([])
+const loadingTable = ref(true)
+// 获取数据
+const fetchData = () => {
+  loadingTable.value = true
+  getErrorAnalyse(listQuery.value).then((res) => {
+    list.value = res.data
+    loadingTable.value = false
+  }).catch(() => {
+    loadingTable.value = false
+  })
+}
+fetchData()
 </script>
 
 <template>
@@ -25,35 +47,26 @@
     <!-- 查询条件 -->
     <template #search>
       <div class="search">
-        <el-button
-          :class="listQuery.type === 'day' ? 'active' : ''" round size="small"
-          @click="selectTimeType('day')"
-        >
+        <el-button :class="listQuery.timeType === '1' ? 'active' : ''" round size="small" @click="selectTimeType('1')">
           今日
         </el-button>
-        <el-button
-          :class="listQuery.type === 'week' ? 'active' : ''" round size="small"
-          @click="selectTimeType('week')"
-        >
+        <el-button :class="listQuery.timeType === '2' ? 'active' : ''" round size="small" @click="selectTimeType('2')">
           本周
         </el-button>
-        <el-button
-          :class="listQuery.type === 'month' ? 'active' : ''" round size="small"
-          @click="selectTimeType('month')"
-        >
+        <el-button :class="listQuery.timeType === '3' ? 'active' : ''" round size="small" @click="selectTimeType('3')">
           本月
         </el-button>
-        <el-select v-model="listQuery.keywords" placeholder="全部类别" clearable style="width: 180px;margin: 0 5px;" />
-        <dept-select
-          v-model="listQuery.keywords" placeholder="管理单位" :clearable="true"
-          style="width: 220px;margin: 0 5px;"
-        />
+        <el-select v-model="listQuery.ledgerType" placeholder="全部类别" clearable style="width: 180px;margin: 0 5px;">
+          <el-option label="闸井" value="1" />
+          <el-option label="场站" value="2" />
+          <el-option label="管线" value="3" />
+        </el-select>
         <el-date-picker
           v-model="datetimerange" type="datetimerange" format="YYYY-MM-DD HH:mm:ss"
           style="width: 340px;margin: 0 5px;" value-format="YYYY-MM-DD HH:mm:ss" range-separator="至"
           start-placeholder="报警开始时间" end-placeholder="报警结束时间" clearable
         />
-        <el-button type="primary" style="margin: 0 5px;">
+        <el-button type="primary" style="margin: 0 5px;" @click="fetchData">
           搜索
         </el-button>
       </div>
@@ -61,14 +74,14 @@
     <template #content>
       <div class="alarm-count">
         <div class="table">
-          <el-table border :data="list" stripe style="width: 100%;" :height="340">
-            <el-table-column label="位置类型" prop="alarmType" align="center" />
-            <el-table-column label="位号" prop="value" align="center" />
-            <el-table-column label="名称" prop="value" align="center" />
-            <el-table-column label="位置" prop="value" align="center" />
-            <el-table-column label="管理单位" prop="value" align="center" />
-            <el-table-column label="标签" prop="value" align="center" />
-            <el-table-column label="报警次数" prop="value" align="center" />
+          <el-table v-loading="loadingTable" border :data="list" stripe style="width: 100%;" :height="340">
+            <el-table-column label="位置类型" prop="type" align="center" />
+            <el-table-column label="位号" prop="tagNumber" align="center" />
+            <el-table-column label="名称" prop="ledgerName" align="center" />
+            <el-table-column label="位置" prop="place" align="center" />
+            <el-table-column label="管理单位" prop="deptName" align="center" />
+            <el-table-column label="标签" prop="marker" align="center" />
+            <el-table-column label="报警次数" prop="alarmSum" align="center" />
           </el-table>
         </div>
       </div>
diff --git a/src/views/home/dashboard/index.vue b/src/views/home/dashboard/index.vue
index a4b5f57..3d371ae 100644
--- a/src/views/home/dashboard/index.vue
+++ b/src/views/home/dashboard/index.vue
@@ -6,50 +6,60 @@
 <script lang="ts" setup name="Dashboard">
 import card from './components/showCard.vue'
 import { img } from './components/imgData'
+import { getBase, getDeviceStatus, getMessage } from '@/api/home/dashboard/index'
+import locationAnalysis from '@/views/home/alarm/count/components/locationAnalysis.vue'
 // 基本概况数据
-const basicProfileData = ref([
+const basicProfileLoading = ref(true)
+const basicProfileData = ref<any[]>([
   {
     img: img.tiaoya,
-    value: '25',
+    value: '0',
     name: '调压站',
     unit: '座',
+    id: 'tyz',
   },
   {
     img: img.well,
-    value: '5231',
+    value: '0',
     name: '闸井',
     unit: '个',
+    id: 'zj',
   },
   {
     img: img.guanxian,
-    value: '3421',
+    value: '0',
     name: '管线',
     unit: 'KM',
+    id: 'gx',
   },
 ])
 // 设备运行情况数据
-const deviceOperationData = ref([
+const deviceOperationLoading = ref(true)
+const deviceOperationData = ref<any[]>([
   {
     img: img.zaixian,
-    value: '4571',
+    value: '0',
     name: '在线',
     unit: '个',
+    id: '1',
   },
   {
     img: img.lixian,
-    value: '31',
+    value: '0',
     name: '离线',
     unit: '个',
+    id: '0',
   },
   {
     img: img.tingyong,
-    value: '21',
+    value: '0',
     name: '停用',
     unit: '个',
+    id: '2',
   },
 ])
 // 工作台数据
-const benchData = ref([
+const benchData = ref<any[]>([
   {
     name: '当前报警',
     img: img.dqbj,
@@ -88,52 +98,51 @@
   },
 ])
 // 消息通知数据
-const messageData = ref([
-  {
-    alarmTypeName: '闸井浓度超限报警',
-    alarmContent: '永定路中压闸1A',
-    alarmTime: '2024-12-30 12:00',
-  },
-  {
-    alarmTypeName: '闸井浓度超限报警',
-    alarmContent: '永定路中压闸1A',
-    alarmTime: '2024-12-30 12:00',
-  },
-  {
-    alarmTypeName: '闸井浓度超限报警',
-    alarmContent: '永定路中压闸1A',
-    alarmTime: '2024-12-30 12:00',
-  },
-  {
-    alarmTypeName: '闸井浓度超限报警',
-    alarmContent: '永定路中压闸1A',
-    alarmTime: '2024-12-30 12:00',
-  },
-  {
-    alarmTypeName: '闸井浓度超限报警',
-    alarmContent: '永定路中压闸1A',
-    alarmTime: '2024-12-30 12:00',
-  },
-  {
-    alarmTypeName: '闸井浓度超限报警',
-    alarmContent: '永定路中压闸1A',
-    alarmTime: '2024-12-30 12:00',
-  },
-  {
-    alarmTypeName: '闸井浓度超限报警',
-    alarmContent: '永定路中压闸1A',
-    alarmTime: '2024-12-30 12:00',
-  },
-  {
-    alarmTypeName: '闸井浓度超限报警',
-    alarmContent: '永定路中压闸1A',
-    alarmTime: '2024-12-30 12:00',
-  },
-])
+const messageLoading = ref(true)
+const messageData = ref<any[]>([])
 // 更多跳转
 const more = (type: string) => {
 
 }
+
+// 获取数据
+const fetchData = () => {
+  // 基本概况
+  basicProfileLoading.value = true
+  getBase().then((res) => {
+    res.data.forEach((element: any) => {
+      const index = basicProfileData.value.findIndex((item: any) => item.id === element.name)
+      if (index !== -1) {
+        basicProfileData.value[index].value = element.value
+      }
+    })
+    basicProfileLoading.value = false
+  }).catch(() => {
+    basicProfileLoading.value = false
+  })
+  // 设备运行情况
+  deviceOperationLoading.value = true
+  getDeviceStatus().then((res) => {
+    res.data.forEach((element: any) => {
+      const index = deviceOperationData.value.findIndex((item: any) => item.id === element.name)
+      if (index !== -1) {
+        deviceOperationData.value[index].value = element.value
+      }
+    })
+    deviceOperationLoading.value = false
+  }).catch(() => {
+    deviceOperationLoading.value = false
+  })
+  // 消息通知
+  messageLoading.value = true
+  getMessage().then((res) => {
+    messageData.value = res.data.rows
+    messageLoading.value = false
+  }).catch(() => {
+    messageLoading.value = false
+  })
+}
+fetchData()
 </script>
 
 <template>
@@ -143,7 +152,7 @@
     <div class="top-container">
       <div class="top-left-container">
         <!-- 基本概况 -->
-        <card class="base" title="基本概况" :show-more="false">
+        <card v-loading="basicProfileLoading" class="base" title="基本概况" :show-more="false">
           <template #content>
             <div class="base-container">
               <div v-for="item in basicProfileData" :key="item" class="base-item">
@@ -164,7 +173,7 @@
           </template>
         </card>
         <!-- 设备运行情况 -->
-        <card class="base top" title="设备运行情况" :show-more="false">
+        <card v-loading="deviceOperationLoading" class="base" title="设备运行情况" :show-more="false">
           <template #content>
             <div class="base-container">
               <div v-for="item in deviceOperationData" :key="item" class="base-item">
@@ -185,6 +194,9 @@
           </template>
         </card>
       </div>
+    </div>
+    <!-- 中部 -->
+    <div class="middle-container top">
       <!-- 工作台 -->
       <card class="bench" title="工作台" :show-more="false">
         <template #content>
@@ -204,48 +216,23 @@
       <card class="message" title="消息通知" :show-more="true" @more="more('message')">
         <template #content>
           <el-scrollbar height="200px">
-            <div class="message-container">
+            <div v-loading="messageLoading" class="message-container">
               <div v-for="item in messageData" :key="item" class="message-item">
                 <div class="left">
-                  <span class="type">【{{ item.alarmTypeName }}】</span>
-                  <span class="content">{{ item.alarmContent }}</span>
+                  <span class="type">【{{ item.messageTypeDetail }}】</span>
+                  <span class="content">{{ item.messageContent }}</span>
                 </div>
-                <span class="time">{{ item.alarmTime }}</span>
+                <span class="time">{{ item.ts }}</span>
               </div>
             </div>
           </el-scrollbar>
         </template>
       </card>
     </div>
-    <!-- 中部 -->
-    <div class="middle-container top">
-      <!-- 设备分类统计 -->
-      <card class="type-count" title="设备分类统计" :show-more="true" @more="more('type')">
-        <template #content>
-          内容1111111111111
-        </template>
-      </card>
-      <!-- 管理单位设备统计 -->
-      <card class="dept-count" title="管理单位设备统计" :show-more="true" @more="more('dept')">
-        <template #content>
-          内容1111111111111
-        </template>
-      </card>
-    </div>
     <!-- 底部 -->
     <div class="bottom-container top">
-      <!-- 7日报警趋势分析 -->
-      <card class="week-alarm" title="7日报警趋势分析" :show-more="true" @more="more('anaylse')">
-        <template #content>
-          内容1111111111111
-        </template>
-      </card>
-      <!-- 各管理单位报警统计 -->
-      <card class="dept-alarm" title="各管理单位报警统计" :show-more="true" @more="more('alarm')">
-        <template #content>
-          内容1111111111111
-        </template>
-      </card>
+      <!-- 异常位置分析 -->
+      <location-analysis class="error" />
     </div>
   </app-container>
 </template>
@@ -257,10 +244,12 @@
   justify-content: space-around;
 
   .top-left-container {
-    width: 36%;
+    width: 100%;
+    display: flex;
+    justify-content: space-around;
 
     .base {
-      width: 100%;
+      width: 49.5%;
       height: 120px;
 
       .base-container {
@@ -384,6 +373,89 @@
     width: 49.4%;
     height: 255px;
   }
+
+  .bench {
+    width: 22%;
+    height: 250px;
+
+    .bench-container {
+      display: flex;
+      justify-content: space-around;
+      flex-wrap: wrap;
+      align-items: center;
+
+      .bench-item {
+        width: 40%;
+        display: flex;
+        height: 40px;
+        margin-top: 15px;
+
+        &:hover {
+          border: 1px solid #ccc;
+          cursor: pointer;
+          box-shadow: 0 0 12px rgb(0 0 0 / 12%);
+          border-radius: 4px;
+        }
+
+        .img {
+          display: flex;
+          justify-content: center;
+          flex-direction: column;
+        }
+
+        .value {
+          display: flex;
+          justify-content: center;
+          flex-direction: column;
+          text-align: center;
+          width: 60%;
+          overflow: hidden;
+          white-space: nowrap;
+          text-overflow: ellipsis;
+        }
+      }
+    }
+  }
+
+  .message {
+    width: 77%;
+    height: 250px;
+
+    .message-container {
+      .message-item {
+        height: 33px;
+        line-height: 33px;
+        display: flex;
+        justify-content: space-between;
+        padding: 0 10px;
+        width: 100%;
+
+        .left {
+          width: 75%;
+          display: flex;
+          align-items: center;
+          overflow: hidden;
+          white-space: nowrap;
+          text-overflow: ellipsis;
+        }
+
+        .content {
+          display: inline-block;
+          padding-left: 10px;
+          width: 65%;
+          overflow: hidden;
+          white-space: nowrap;
+          text-overflow: ellipsis;
+        }
+
+        .time {
+          font-size: 16px;
+          color: #7c7777;
+          white-space: nowrap;
+        }
+      }
+    }
+  }
 }
 
 .bottom-container {
@@ -396,6 +468,10 @@
     width: 49.4%;
     height: 255px;
   }
+
+  .error {
+    width: 99.5%;
+  }
 }
 
 .top {
diff --git a/src/views/home/device/count/components/bottom.vue b/src/views/home/device/count/components/bottom.vue
index 4b16e06..abdf488 100644
--- a/src/views/home/device/count/components/bottom.vue
+++ b/src/views/home/device/count/components/bottom.vue
@@ -7,7 +7,8 @@
 import { getDeviceTypeListPage } from '@/api/home/device/type'
 import { getDictByCode } from '@/api/system/dict'
 import { getDeptDevice, getOfflineDevice } from '@/api/home/device/count'
-// 设备分类统计数据
+// 管理单位设备统计
+const deptLoading = ref(true)
 const xAxisData = ref([])
 const data = ref<any[]>([])
 setTimeout(() => {
@@ -27,10 +28,14 @@
 }, 1000)
 // 获取数据
 const fetchData = () => {
+  deptLoading.value = true
   getDeptDevice().then((res) => {
+    deptLoading.value = false
     //   xAxisData.value = res.data.map((item: any) => item.name)
     //   data
     //  console.log(res.data, '222222222222222')
+  }).catch(() => {
+    deptLoading.value = false
   })
 }
 fetchData()
@@ -61,6 +66,8 @@
     total.value = res.data.total
     list.value = res.data.rows
     loadingTable.value = false
+  }).catch(() => {
+    loadingTable.value = false
   })
 }
 fetchListData()
@@ -107,7 +114,7 @@
       <div class="title">
         管理单位设备统计
       </div>
-      <div class="content">
+      <div v-loading="deptLoading" class="content">
         <bar-chart-vertical
           :x-axis-data="xAxisData" :bar-coner="0" :data="data" :colors="[]" :bar-width="15"
           :legend="{ itemWidth: 8, itemHeight: 8, type: 'scroll', orient: 'horizontal', icon: 'roundRect', right: '0', top: '10' }"
diff --git a/src/views/home/device/count/components/header.vue b/src/views/home/device/count/components/header.vue
index e732ea6..45abbdc 100644
--- a/src/views/home/device/count/components/header.vue
+++ b/src/views/home/device/count/components/header.vue
@@ -7,6 +7,7 @@
 import { img } from './imgData'
 import { getDeviceReport, getDeviceRun } from '@/api/home/device/count'
 // 设备运行情况数据
+const runLoading = ref(true)
 const runData = ref([
   {
     name: '在线',
@@ -40,6 +41,7 @@
 ])
 
 // 设备上报情况数据
+const reportLoading = ref(true)
 const reportData = ref([
   {
     name: '日上报量',
@@ -57,6 +59,7 @@
 
 // 获取设备运行状况数据和设备上报情况数据
 const fetchData = () => {
+  runLoading.value = true
   getDeviceRun().then((res) => {
     res.data.forEach((element: any) => {
       const index = runData.value.findIndex((item: any) => item.id === element.name)
@@ -64,7 +67,11 @@
         runData.value[index].value = element.value
       }
     })
+    runLoading.value = false
+  }).catch(() => {
+    runLoading.value = false
   })
+  reportLoading.value = true
   getDeviceReport().then((res) => {
     res.data.forEach((element: any) => {
       const index = reportData.value.findIndex((item: any) => item.id === element.name)
@@ -72,6 +79,9 @@
         reportData.value[index].value = element.value
       }
     })
+    reportLoading.value = false
+  }).catch(() => {
+    reportLoading.value = false
   })
 }
 fetchData()
@@ -84,7 +94,7 @@
       <div class="title">
         设备运行情况
       </div>
-      <div class="content">
+      <div v-loading="runLoading" class="content">
         <div v-for="item in runData" :key="item.name" class="item">
           <div class="img">
             <img :src="item.img">
@@ -106,7 +116,7 @@
       <div class="title">
         数据上报情况
       </div>
-      <div class="content">
+      <div v-loading="reportLoading" class="content">
         <div v-for="item in reportData" :key="item.name" class="item">
           <div class="name">
             {{ item.name }}

diff --git a/src/api/home/dashboard/index.ts b/src/api/home/dashboard/index.ts
new file mode 100644
index 0000000..25e1e4a
--- /dev/null
+++ b/src/api/home/dashboard/index.ts
@@ -0,0 +1,35 @@
+/**
+ * 首页接口
+ */
+import request from '@/api/index'
+
+// 基本概况
+export function getBase() {
+  return request({
+    url: '/homePage/apis/overall',
+    method: 'post',
+  })
+}
+
+// 设备运行情况
+export function getDeviceStatus() {
+  return request({
+    url: '/homePage/apis/deviceStatus',
+    method: 'post',
+  })
+}
+// 消息通知
+export function getMessage() {
+  return request({
+    url: '/homePage/apis/note',
+    method: 'post',
+  })
+}
+// 异常位置分析
+export function getErrorAnalyse(data: any) {
+  return request({
+    url: '/homePage/apis/alarmPosition',
+    method: 'post',
+    data,
+  })
+}
diff --git a/src/views/home/alarm/count/components/locationAnalysis.vue b/src/views/home/alarm/count/components/locationAnalysis.vue
index a4c32cf..b7da9cc 100644
--- a/src/views/home/alarm/count/components/locationAnalysis.vue
+++ b/src/views/home/alarm/count/components/locationAnalysis.vue
@@ -5,19 +5,41 @@
  -->
 <script lang="ts" setup name="AlarmCount">
 import layout from './layout.vue'
+import { getErrorAnalyse } from '@/api/home/dashboard/index'
 const listQuery = ref({
-  type: 'day',
+  begTime: '',
+  endTime: '',
+  ledgerType: '',
+  timeType: '1',
+})
+// 开始结束时间
+const datetimerange = ref()
+watch(() => datetimerange.value, (newVal) => {
+  listQuery.value.begTime = ''
+  listQuery.value.endTime = ''
+  if (Array.isArray(newVal)) {
+    if (newVal.length) {
+      listQuery.value.begTime = `${newVal[0]}`
+      listQuery.value.endTime = `${newVal[1]}`
+    }
+  }
 })
 const selectTimeType = (type: string) => {
-  listQuery.value.type = type
+  listQuery.value.timeType = type
 }
-const list = ref([])
-setTimeout(() => {
-  list.value = xAxisData.value.map((item, index) => ({
-    alarmType: item,
-    value: data.value[0].data[index],
-  }))
-}, 1000)
+const list = ref<any[]>([])
+const loadingTable = ref(true)
+// 获取数据
+const fetchData = () => {
+  loadingTable.value = true
+  getErrorAnalyse(listQuery.value).then((res) => {
+    list.value = res.data
+    loadingTable.value = false
+  }).catch(() => {
+    loadingTable.value = false
+  })
+}
+fetchData()
 </script>
 
 <template>
@@ -25,35 +47,26 @@
     <!-- 查询条件 -->
     <template #search>
       <div class="search">
-        <el-button
-          :class="listQuery.type === 'day' ? 'active' : ''" round size="small"
-          @click="selectTimeType('day')"
-        >
+        <el-button :class="listQuery.timeType === '1' ? 'active' : ''" round size="small" @click="selectTimeType('1')">
           今日
         </el-button>
-        <el-button
-          :class="listQuery.type === 'week' ? 'active' : ''" round size="small"
-          @click="selectTimeType('week')"
-        >
+        <el-button :class="listQuery.timeType === '2' ? 'active' : ''" round size="small" @click="selectTimeType('2')">
           本周
         </el-button>
-        <el-button
-          :class="listQuery.type === 'month' ? 'active' : ''" round size="small"
-          @click="selectTimeType('month')"
-        >
+        <el-button :class="listQuery.timeType === '3' ? 'active' : ''" round size="small" @click="selectTimeType('3')">
           本月
         </el-button>
-        <el-select v-model="listQuery.keywords" placeholder="全部类别" clearable style="width: 180px;margin: 0 5px;" />
-        <dept-select
-          v-model="listQuery.keywords" placeholder="管理单位" :clearable="true"
-          style="width: 220px;margin: 0 5px;"
-        />
+        <el-select v-model="listQuery.ledgerType" placeholder="全部类别" clearable style="width: 180px;margin: 0 5px;">
+          <el-option label="闸井" value="1" />
+          <el-option label="场站" value="2" />
+          <el-option label="管线" value="3" />
+        </el-select>
         <el-date-picker
           v-model="datetimerange" type="datetimerange" format="YYYY-MM-DD HH:mm:ss"
           style="width: 340px;margin: 0 5px;" value-format="YYYY-MM-DD HH:mm:ss" range-separator="至"
           start-placeholder="报警开始时间" end-placeholder="报警结束时间" clearable
         />
-        <el-button type="primary" style="margin: 0 5px;">
+        <el-button type="primary" style="margin: 0 5px;" @click="fetchData">
           搜索
         </el-button>
       </div>
@@ -61,14 +74,14 @@
     <template #content>
       <div class="alarm-count">
         <div class="table">
-          <el-table border :data="list" stripe style="width: 100%;" :height="340">
-            <el-table-column label="位置类型" prop="alarmType" align="center" />
-            <el-table-column label="位号" prop="value" align="center" />
-            <el-table-column label="名称" prop="value" align="center" />
-            <el-table-column label="位置" prop="value" align="center" />
-            <el-table-column label="管理单位" prop="value" align="center" />
-            <el-table-column label="标签" prop="value" align="center" />
-            <el-table-column label="报警次数" prop="value" align="center" />
+          <el-table v-loading="loadingTable" border :data="list" stripe style="width: 100%;" :height="340">
+            <el-table-column label="位置类型" prop="type" align="center" />
+            <el-table-column label="位号" prop="tagNumber" align="center" />
+            <el-table-column label="名称" prop="ledgerName" align="center" />
+            <el-table-column label="位置" prop="place" align="center" />
+            <el-table-column label="管理单位" prop="deptName" align="center" />
+            <el-table-column label="标签" prop="marker" align="center" />
+            <el-table-column label="报警次数" prop="alarmSum" align="center" />
           </el-table>
         </div>
       </div>
diff --git a/src/views/home/dashboard/index.vue b/src/views/home/dashboard/index.vue
index a4b5f57..3d371ae 100644
--- a/src/views/home/dashboard/index.vue
+++ b/src/views/home/dashboard/index.vue
@@ -6,50 +6,60 @@
 <script lang="ts" setup name="Dashboard">
 import card from './components/showCard.vue'
 import { img } from './components/imgData'
+import { getBase, getDeviceStatus, getMessage } from '@/api/home/dashboard/index'
+import locationAnalysis from '@/views/home/alarm/count/components/locationAnalysis.vue'
 // 基本概况数据
-const basicProfileData = ref([
+const basicProfileLoading = ref(true)
+const basicProfileData = ref<any[]>([
   {
     img: img.tiaoya,
-    value: '25',
+    value: '0',
     name: '调压站',
     unit: '座',
+    id: 'tyz',
   },
   {
     img: img.well,
-    value: '5231',
+    value: '0',
     name: '闸井',
     unit: '个',
+    id: 'zj',
   },
   {
     img: img.guanxian,
-    value: '3421',
+    value: '0',
     name: '管线',
     unit: 'KM',
+    id: 'gx',
   },
 ])
 // 设备运行情况数据
-const deviceOperationData = ref([
+const deviceOperationLoading = ref(true)
+const deviceOperationData = ref<any[]>([
   {
     img: img.zaixian,
-    value: '4571',
+    value: '0',
     name: '在线',
     unit: '个',
+    id: '1',
   },
   {
     img: img.lixian,
-    value: '31',
+    value: '0',
     name: '离线',
     unit: '个',
+    id: '0',
   },
   {
     img: img.tingyong,
-    value: '21',
+    value: '0',
     name: '停用',
     unit: '个',
+    id: '2',
   },
 ])
 // 工作台数据
-const benchData = ref([
+const benchData = ref<any[]>([
   {
     name: '当前报警',
     img: img.dqbj,
@@ -88,52 +98,51 @@
   },
 ])
 // 消息通知数据
-const messageData = ref([
-  {
-    alarmTypeName: '闸井浓度超限报警',
-    alarmContent: '永定路中压闸1A',
-    alarmTime: '2024-12-30 12:00',
-  },
-  {
-    alarmTypeName: '闸井浓度超限报警',
-    alarmContent: '永定路中压闸1A',
-    alarmTime: '2024-12-30 12:00',
-  },
-  {
-    alarmTypeName: '闸井浓度超限报警',
-    alarmContent: '永定路中压闸1A',
-    alarmTime: '2024-12-30 12:00',
-  },
-  {
-    alarmTypeName: '闸井浓度超限报警',
-    alarmContent: '永定路中压闸1A',
-    alarmTime: '2024-12-30 12:00',
-  },
-  {
-    alarmTypeName: '闸井浓度超限报警',
-    alarmContent: '永定路中压闸1A',
-    alarmTime: '2024-12-30 12:00',
-  },
-  {
-    alarmTypeName: '闸井浓度超限报警',
-    alarmContent: '永定路中压闸1A',
-    alarmTime: '2024-12-30 12:00',
-  },
-  {
-    alarmTypeName: '闸井浓度超限报警',
-    alarmContent: '永定路中压闸1A',
-    alarmTime: '2024-12-30 12:00',
-  },
-  {
-    alarmTypeName: '闸井浓度超限报警',
-    alarmContent: '永定路中压闸1A',
-    alarmTime: '2024-12-30 12:00',
-  },
-])
+const messageLoading = ref(true)
+const messageData = ref<any[]>([])
 // 更多跳转
 const more = (type: string) => {
 
 }
+
+// 获取数据
+const fetchData = () => {
+  // 基本概况
+  basicProfileLoading.value = true
+  getBase().then((res) => {
+    res.data.forEach((element: any) => {
+      const index = basicProfileData.value.findIndex((item: any) => item.id === element.name)
+      if (index !== -1) {
+        basicProfileData.value[index].value = element.value
+      }
+    })
+    basicProfileLoading.value = false
+  }).catch(() => {
+    basicProfileLoading.value = false
+  })
+  // 设备运行情况
+  deviceOperationLoading.value = true
+  getDeviceStatus().then((res) => {
+    res.data.forEach((element: any) => {
+      const index = deviceOperationData.value.findIndex((item: any) => item.id === element.name)
+      if (index !== -1) {
+        deviceOperationData.value[index].value = element.value
+      }
+    })
+    deviceOperationLoading.value = false
+  }).catch(() => {
+    deviceOperationLoading.value = false
+  })
+  // 消息通知
+  messageLoading.value = true
+  getMessage().then((res) => {
+    messageData.value = res.data.rows
+    messageLoading.value = false
+  }).catch(() => {
+    messageLoading.value = false
+  })
+}
+fetchData()
 </script>
 
 <template>
@@ -143,7 +152,7 @@
     <div class="top-container">
       <div class="top-left-container">
         <!-- 基本概况 -->
-        <card class="base" title="基本概况" :show-more="false">
+        <card v-loading="basicProfileLoading" class="base" title="基本概况" :show-more="false">
           <template #content>
             <div class="base-container">
               <div v-for="item in basicProfileData" :key="item" class="base-item">
@@ -164,7 +173,7 @@
           </template>
         </card>
         <!-- 设备运行情况 -->
-        <card class="base top" title="设备运行情况" :show-more="false">
+        <card v-loading="deviceOperationLoading" class="base" title="设备运行情况" :show-more="false">
           <template #content>
             <div class="base-container">
               <div v-for="item in deviceOperationData" :key="item" class="base-item">
@@ -185,6 +194,9 @@
           </template>
         </card>
       </div>
+    </div>
+    <!-- 中部 -->
+    <div class="middle-container top">
       <!-- 工作台 -->
       <card class="bench" title="工作台" :show-more="false">
         <template #content>
@@ -204,48 +216,23 @@
       <card class="message" title="消息通知" :show-more="true" @more="more('message')">
         <template #content>
           <el-scrollbar height="200px">
-            <div class="message-container">
+            <div v-loading="messageLoading" class="message-container">
               <div v-for="item in messageData" :key="item" class="message-item">
                 <div class="left">
-                  <span class="type">【{{ item.alarmTypeName }}】</span>
-                  <span class="content">{{ item.alarmContent }}</span>
+                  <span class="type">【{{ item.messageTypeDetail }}】</span>
+                  <span class="content">{{ item.messageContent }}</span>
                 </div>
-                <span class="time">{{ item.alarmTime }}</span>
+                <span class="time">{{ item.ts }}</span>
               </div>
             </div>
           </el-scrollbar>
         </template>
       </card>
     </div>
-    <!-- 中部 -->
-    <div class="middle-container top">
-      <!-- 设备分类统计 -->
-      <card class="type-count" title="设备分类统计" :show-more="true" @more="more('type')">
-        <template #content>
-          内容1111111111111
-        </template>
-      </card>
-      <!-- 管理单位设备统计 -->
-      <card class="dept-count" title="管理单位设备统计" :show-more="true" @more="more('dept')">
-        <template #content>
-          内容1111111111111
-        </template>
-      </card>
-    </div>
     <!-- 底部 -->
     <div class="bottom-container top">
-      <!-- 7日报警趋势分析 -->
-      <card class="week-alarm" title="7日报警趋势分析" :show-more="true" @more="more('anaylse')">
-        <template #content>
-          内容1111111111111
-        </template>
-      </card>
-      <!-- 各管理单位报警统计 -->
-      <card class="dept-alarm" title="各管理单位报警统计" :show-more="true" @more="more('alarm')">
-        <template #content>
-          内容1111111111111
-        </template>
-      </card>
+      <!-- 异常位置分析 -->
+      <location-analysis class="error" />
     </div>
   </app-container>
 </template>
@@ -257,10 +244,12 @@
   justify-content: space-around;
 
   .top-left-container {
-    width: 36%;
+    width: 100%;
+    display: flex;
+    justify-content: space-around;
 
     .base {
-      width: 100%;
+      width: 49.5%;
       height: 120px;
 
       .base-container {
@@ -384,6 +373,89 @@
     width: 49.4%;
     height: 255px;
   }
+
+  .bench {
+    width: 22%;
+    height: 250px;
+
+    .bench-container {
+      display: flex;
+      justify-content: space-around;
+      flex-wrap: wrap;
+      align-items: center;
+
+      .bench-item {
+        width: 40%;
+        display: flex;
+        height: 40px;
+        margin-top: 15px;
+
+        &:hover {
+          border: 1px solid #ccc;
+          cursor: pointer;
+          box-shadow: 0 0 12px rgb(0 0 0 / 12%);
+          border-radius: 4px;
+        }
+
+        .img {
+          display: flex;
+          justify-content: center;
+          flex-direction: column;
+        }
+
+        .value {
+          display: flex;
+          justify-content: center;
+          flex-direction: column;
+          text-align: center;
+          width: 60%;
+          overflow: hidden;
+          white-space: nowrap;
+          text-overflow: ellipsis;
+        }
+      }
+    }
+  }
+
+  .message {
+    width: 77%;
+    height: 250px;
+
+    .message-container {
+      .message-item {
+        height: 33px;
+        line-height: 33px;
+        display: flex;
+        justify-content: space-between;
+        padding: 0 10px;
+        width: 100%;
+
+        .left {
+          width: 75%;
+          display: flex;
+          align-items: center;
+          overflow: hidden;
+          white-space: nowrap;
+          text-overflow: ellipsis;
+        }
+
+        .content {
+          display: inline-block;
+          padding-left: 10px;
+          width: 65%;
+          overflow: hidden;
+          white-space: nowrap;
+          text-overflow: ellipsis;
+        }
+
+        .time {
+          font-size: 16px;
+          color: #7c7777;
+          white-space: nowrap;
+        }
+      }
+    }
+  }
 }
 
 .bottom-container {
@@ -396,6 +468,10 @@
     width: 49.4%;
     height: 255px;
   }
+
+  .error {
+    width: 99.5%;
+  }
 }
 
 .top {
diff --git a/src/views/home/device/count/components/bottom.vue b/src/views/home/device/count/components/bottom.vue
index 4b16e06..abdf488 100644
--- a/src/views/home/device/count/components/bottom.vue
+++ b/src/views/home/device/count/components/bottom.vue
@@ -7,7 +7,8 @@
 import { getDeviceTypeListPage } from '@/api/home/device/type'
 import { getDictByCode } from '@/api/system/dict'
 import { getDeptDevice, getOfflineDevice } from '@/api/home/device/count'
-// 设备分类统计数据
+// 管理单位设备统计
+const deptLoading = ref(true)
 const xAxisData = ref([])
 const data = ref<any[]>([])
 setTimeout(() => {
@@ -27,10 +28,14 @@
 }, 1000)
 // 获取数据
 const fetchData = () => {
+  deptLoading.value = true
   getDeptDevice().then((res) => {
+    deptLoading.value = false
     //   xAxisData.value = res.data.map((item: any) => item.name)
     //   data
     //  console.log(res.data, '222222222222222')
+  }).catch(() => {
+    deptLoading.value = false
   })
 }
 fetchData()
@@ -61,6 +66,8 @@
     total.value = res.data.total
     list.value = res.data.rows
     loadingTable.value = false
+  }).catch(() => {
+    loadingTable.value = false
   })
 }
 fetchListData()
@@ -107,7 +114,7 @@
       <div class="title">
         管理单位设备统计
       </div>
-      <div class="content">
+      <div v-loading="deptLoading" class="content">
         <bar-chart-vertical
           :x-axis-data="xAxisData" :bar-coner="0" :data="data" :colors="[]" :bar-width="15"
           :legend="{ itemWidth: 8, itemHeight: 8, type: 'scroll', orient: 'horizontal', icon: 'roundRect', right: '0', top: '10' }"
diff --git a/src/views/home/device/count/components/header.vue b/src/views/home/device/count/components/header.vue
index e732ea6..45abbdc 100644
--- a/src/views/home/device/count/components/header.vue
+++ b/src/views/home/device/count/components/header.vue
@@ -7,6 +7,7 @@
 import { img } from './imgData'
 import { getDeviceReport, getDeviceRun } from '@/api/home/device/count'
 // 设备运行情况数据
+const runLoading = ref(true)
 const runData = ref([
   {
     name: '在线',
@@ -40,6 +41,7 @@
 ])
 
 // 设备上报情况数据
+const reportLoading = ref(true)
 const reportData = ref([
   {
     name: '日上报量',
@@ -57,6 +59,7 @@
 
 // 获取设备运行状况数据和设备上报情况数据
 const fetchData = () => {
+  runLoading.value = true
   getDeviceRun().then((res) => {
     res.data.forEach((element: any) => {
       const index = runData.value.findIndex((item: any) => item.id === element.name)
@@ -64,7 +67,11 @@
         runData.value[index].value = element.value
       }
     })
+    runLoading.value = false
+  }).catch(() => {
+    runLoading.value = false
   })
+  reportLoading.value = true
   getDeviceReport().then((res) => {
     res.data.forEach((element: any) => {
       const index = reportData.value.findIndex((item: any) => item.id === element.name)
@@ -72,6 +79,9 @@
         reportData.value[index].value = element.value
       }
     })
+    reportLoading.value = false
+  }).catch(() => {
+    reportLoading.value = false
   })
 }
 fetchData()
@@ -84,7 +94,7 @@
       <div class="title">
         设备运行情况
       </div>
-      <div class="content">
+      <div v-loading="runLoading" class="content">
         <div v-for="item in runData" :key="item.name" class="item">
           <div class="img">
             <img :src="item.img">
@@ -106,7 +116,7 @@
       <div class="title">
         数据上报情况
       </div>
-      <div class="content">
+      <div v-loading="reportLoading" class="content">
         <div v-for="item in reportData" :key="item.name" class="item">
           <div class="name">
             {{ item.name }}
diff --git a/src/views/home/device/count/components/middle.vue b/src/views/home/device/count/components/middle.vue
index f45a3a3..8967b40 100644
--- a/src/views/home/device/count/components/middle.vue
+++ b/src/views/home/device/count/components/middle.vue
@@ -6,9 +6,11 @@
 <script lang="ts" setup name="DeviceTypeCount">
 import { getDeviceType, getOffline } from '@/api/home/device/count'
 // 设备分类统计数据
+const deviceTypeLoading = ref(true)
 const xAxisData = ref([])
 const data = ref<any[]>([])
 // 设备离线数据
+const offLoading = ref(true)
 const pieData = ref<any[]>([])
 const xAxisDataOff = ref([])
 const dataOff = ref<any[]>([])
@@ -26,6 +28,7 @@
 
 // 获取数据
 const fetchData = () => {
+  deviceTypeLoading.value = true
   getDeviceType().then((res) => {
     xAxisData.value = res.data.map((item: any) => item.name)
     data.value = [
@@ -34,7 +37,11 @@
         data: res.data.map((item: any) => item.value),
       },
     ]
+    deviceTypeLoading.value = false
+  }).catch(() => {
+    deviceTypeLoading.value = false
   })
+  offLoading.value = true
   getOffline().then((res) => {
     pieData.value = res.data
     xAxisDataOff.value = res.data.map((item: any) => item.name)
@@ -45,6 +52,9 @@
         color: '#ccc',
       },
     ]
+    offLoading.value = false
+  }).catch(() => {
+    offLoading.value = false
   })
 }
 fetchData()
@@ -59,7 +69,7 @@
       </div>
       <div class="content">
         <!-- 垂直柱状图 -->
-        <div class="bar">
+        <div v-loading="deviceTypeLoading" class="bar">
           <bar-chart-horizontal
             :x-axis-data="xAxisData" :bar-coner="0" :data="data" :colors="[]" :bar-width="15"
             :legend="{ itemWidth: 8, itemHeight: 8, type: 'scroll', orient: 'horizontal', icon: 'roundRect', right: '0', top: '10' }"
@@ -72,7 +82,7 @@
       <div class="title">
         离线统计
       </div>
-      <div class="content">
+      <div v-loading="offLoading" class="content">
         <!-- 柱状图 -->
         <div class="bar">
           <bar-chart-vertical