diff --git a/src/api/home/alarm/count.ts b/src/api/home/alarm/count.ts
index 1f4b59a..d5d9244 100644
--- a/src/api/home/alarm/count.ts
+++ b/src/api/home/alarm/count.ts
@@ -34,3 +34,11 @@
     data,
   })
 }
+// 报警趋势分析
+export function getAlarmTrend(data: any) {
+  return request({
+    url: '/statics/alarmRecords/alarmTrend',
+    method: 'post',
+    data,
+  })
+}

diff --git a/src/api/home/alarm/count.ts b/src/api/home/alarm/count.ts
index 1f4b59a..d5d9244 100644
--- a/src/api/home/alarm/count.ts
+++ b/src/api/home/alarm/count.ts
@@ -34,3 +34,11 @@
     data,
   })
 }
+// 报警趋势分析
+export function getAlarmTrend(data: any) {
+  return request({
+    url: '/statics/alarmRecords/alarmTrend',
+    method: 'post',
+    data,
+  })
+}
diff --git a/src/api/home/alarm/current.ts b/src/api/home/alarm/current.ts
index ec20f64..ac3387f 100644
--- a/src/api/home/alarm/current.ts
+++ b/src/api/home/alarm/current.ts
@@ -57,3 +57,13 @@
     },
   })
 }
+// 批量删除
+export function batchDelete(ids: any) {
+  return request({
+    url: '/system/alarmRecords/batchDelete',
+    method: 'post',
+    data: {
+      ids,
+    },
+  })
+}

diff --git a/src/api/home/alarm/count.ts b/src/api/home/alarm/count.ts
index 1f4b59a..d5d9244 100644
--- a/src/api/home/alarm/count.ts
+++ b/src/api/home/alarm/count.ts
@@ -34,3 +34,11 @@
     data,
   })
 }
+// 报警趋势分析
+export function getAlarmTrend(data: any) {
+  return request({
+    url: '/statics/alarmRecords/alarmTrend',
+    method: 'post',
+    data,
+  })
+}
diff --git a/src/api/home/alarm/current.ts b/src/api/home/alarm/current.ts
index ec20f64..ac3387f 100644
--- a/src/api/home/alarm/current.ts
+++ b/src/api/home/alarm/current.ts
@@ -57,3 +57,13 @@
     },
   })
 }
+// 批量删除
+export function batchDelete(ids: any) {
+  return request({
+    url: '/system/alarmRecords/batchDelete',
+    method: 'post',
+    data: {
+      ids,
+    },
+  })
+}
diff --git a/src/api/home/alarm/history.ts b/src/api/home/alarm/history.ts
index 5f55e82..44cf851 100644
--- a/src/api/home/alarm/history.ts
+++ b/src/api/home/alarm/history.ts
@@ -11,3 +11,13 @@
     data,
   })
 }
+// 详情
+export function getAlarmDetail(id: any) {
+  return request({
+    url: '/system/alarmRecords/historyAlarmDetail',
+    method: 'post',
+    data: {
+      id,
+    },
+  })
+}

diff --git a/src/api/home/alarm/count.ts b/src/api/home/alarm/count.ts
index 1f4b59a..d5d9244 100644
--- a/src/api/home/alarm/count.ts
+++ b/src/api/home/alarm/count.ts
@@ -34,3 +34,11 @@
     data,
   })
 }
+// 报警趋势分析
+export function getAlarmTrend(data: any) {
+  return request({
+    url: '/statics/alarmRecords/alarmTrend',
+    method: 'post',
+    data,
+  })
+}
diff --git a/src/api/home/alarm/current.ts b/src/api/home/alarm/current.ts
index ec20f64..ac3387f 100644
--- a/src/api/home/alarm/current.ts
+++ b/src/api/home/alarm/current.ts
@@ -57,3 +57,13 @@
     },
   })
 }
+// 批量删除
+export function batchDelete(ids: any) {
+  return request({
+    url: '/system/alarmRecords/batchDelete',
+    method: 'post',
+    data: {
+      ids,
+    },
+  })
+}
diff --git a/src/api/home/alarm/history.ts b/src/api/home/alarm/history.ts
index 5f55e82..44cf851 100644
--- a/src/api/home/alarm/history.ts
+++ b/src/api/home/alarm/history.ts
@@ -11,3 +11,13 @@
     data,
   })
 }
+// 详情
+export function getAlarmDetail(id: any) {
+  return request({
+    url: '/system/alarmRecords/historyAlarmDetail',
+    method: 'post',
+    data: {
+      id,
+    },
+  })
+}
diff --git a/src/components/Echart/LineChart.vue b/src/components/Echart/LineChart.vue
index 2733161..b811f29 100644
--- a/src/components/Echart/LineChart.vue
+++ b/src/components/Echart/LineChart.vue
@@ -207,7 +207,7 @@
         },
       },
       valueFormatter: (value: string | number) => {
-        return value ? value + props.unit : ''
+        return value ? value + props.unit : value === 0 ? '0' : ''
       },
     }, // 提示框
     xAxis: [

diff --git a/src/api/home/alarm/count.ts b/src/api/home/alarm/count.ts
index 1f4b59a..d5d9244 100644
--- a/src/api/home/alarm/count.ts
+++ b/src/api/home/alarm/count.ts
@@ -34,3 +34,11 @@
     data,
   })
 }
+// 报警趋势分析
+export function getAlarmTrend(data: any) {
+  return request({
+    url: '/statics/alarmRecords/alarmTrend',
+    method: 'post',
+    data,
+  })
+}
diff --git a/src/api/home/alarm/current.ts b/src/api/home/alarm/current.ts
index ec20f64..ac3387f 100644
--- a/src/api/home/alarm/current.ts
+++ b/src/api/home/alarm/current.ts
@@ -57,3 +57,13 @@
     },
   })
 }
+// 批量删除
+export function batchDelete(ids: any) {
+  return request({
+    url: '/system/alarmRecords/batchDelete',
+    method: 'post',
+    data: {
+      ids,
+    },
+  })
+}
diff --git a/src/api/home/alarm/history.ts b/src/api/home/alarm/history.ts
index 5f55e82..44cf851 100644
--- a/src/api/home/alarm/history.ts
+++ b/src/api/home/alarm/history.ts
@@ -11,3 +11,13 @@
     data,
   })
 }
+// 详情
+export function getAlarmDetail(id: any) {
+  return request({
+    url: '/system/alarmRecords/historyAlarmDetail',
+    method: 'post',
+    data: {
+      id,
+    },
+  })
+}
diff --git a/src/components/Echart/LineChart.vue b/src/components/Echart/LineChart.vue
index 2733161..b811f29 100644
--- a/src/components/Echart/LineChart.vue
+++ b/src/components/Echart/LineChart.vue
@@ -207,7 +207,7 @@
         },
       },
       valueFormatter: (value: string | number) => {
-        return value ? value + props.unit : ''
+        return value ? value + props.unit : value === 0 ? '0' : ''
       },
     }, // 提示框
     xAxis: [
diff --git a/src/router/modules/pc.ts b/src/router/modules/pc.ts
index 9b058fa..f3edac9 100644
--- a/src/router/modules/pc.ts
+++ b/src/router/modules/pc.ts
@@ -94,6 +94,19 @@
         },
       },
       {
+        path: '/history/detail',
+        component: () => import('@/views/home/alarm/current/components/detail.vue'),
+        name: 'AlarmHistoryDetail',
+        meta: {
+          title: '报警详情',
+          icon: 'ep:key',
+          sidebar: false,
+          breadcrumb: true,
+          activeMenu: '/alarm/history',
+          auth: '/alarm/history',
+        },
+      },
+      {
         path: 'count',
         component: () => import('@/views/home/alarm/count/index.vue'),
         name: 'AlarmCount',

diff --git a/src/api/home/alarm/count.ts b/src/api/home/alarm/count.ts
index 1f4b59a..d5d9244 100644
--- a/src/api/home/alarm/count.ts
+++ b/src/api/home/alarm/count.ts
@@ -34,3 +34,11 @@
     data,
   })
 }
+// 报警趋势分析
+export function getAlarmTrend(data: any) {
+  return request({
+    url: '/statics/alarmRecords/alarmTrend',
+    method: 'post',
+    data,
+  })
+}
diff --git a/src/api/home/alarm/current.ts b/src/api/home/alarm/current.ts
index ec20f64..ac3387f 100644
--- a/src/api/home/alarm/current.ts
+++ b/src/api/home/alarm/current.ts
@@ -57,3 +57,13 @@
     },
   })
 }
+// 批量删除
+export function batchDelete(ids: any) {
+  return request({
+    url: '/system/alarmRecords/batchDelete',
+    method: 'post',
+    data: {
+      ids,
+    },
+  })
+}
diff --git a/src/api/home/alarm/history.ts b/src/api/home/alarm/history.ts
index 5f55e82..44cf851 100644
--- a/src/api/home/alarm/history.ts
+++ b/src/api/home/alarm/history.ts
@@ -11,3 +11,13 @@
     data,
   })
 }
+// 详情
+export function getAlarmDetail(id: any) {
+  return request({
+    url: '/system/alarmRecords/historyAlarmDetail',
+    method: 'post',
+    data: {
+      id,
+    },
+  })
+}
diff --git a/src/components/Echart/LineChart.vue b/src/components/Echart/LineChart.vue
index 2733161..b811f29 100644
--- a/src/components/Echart/LineChart.vue
+++ b/src/components/Echart/LineChart.vue
@@ -207,7 +207,7 @@
         },
       },
       valueFormatter: (value: string | number) => {
-        return value ? value + props.unit : ''
+        return value ? value + props.unit : value === 0 ? '0' : ''
       },
     }, // 提示框
     xAxis: [
diff --git a/src/router/modules/pc.ts b/src/router/modules/pc.ts
index 9b058fa..f3edac9 100644
--- a/src/router/modules/pc.ts
+++ b/src/router/modules/pc.ts
@@ -94,6 +94,19 @@
         },
       },
       {
+        path: '/history/detail',
+        component: () => import('@/views/home/alarm/current/components/detail.vue'),
+        name: 'AlarmHistoryDetail',
+        meta: {
+          title: '报警详情',
+          icon: 'ep:key',
+          sidebar: false,
+          breadcrumb: true,
+          activeMenu: '/alarm/history',
+          auth: '/alarm/history',
+        },
+      },
+      {
         path: 'count',
         component: () => import('@/views/home/alarm/count/index.vue'),
         name: 'AlarmCount',
diff --git a/src/views/home/alarm/count/components/alarmStatistics.vue b/src/views/home/alarm/count/components/alarmStatistics.vue
index b088de2..7aa930f 100644
--- a/src/views/home/alarm/count/components/alarmStatistics.vue
+++ b/src/views/home/alarm/count/components/alarmStatistics.vue
@@ -34,13 +34,12 @@
     value: '3',
   },
 ])
-const xAxisData = ref([])
-const data = ref([])
+const xAxisData = ref<string[]>([])
+const data = ref<any[]>([])
 const list = ref([])
 const loading = ref(true)
 // 开始结束时间
 const datetimerange = ref()
-// 默认当天
 watch(() => datetimerange.value, (newVal) => {
   listQuery.value.begTime = ''
   listQuery.value.endTime = ''
@@ -51,6 +50,35 @@
     }
   }
 })
+const shortcuts = [
+  {
+    text: '近一周',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setDate(start.getDate() - 7)
+      return [start, end]
+    },
+  },
+  {
+    text: '近一个月',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setMonth(start.getMonth() - 1)
+      return [start, end]
+    },
+  },
+  {
+    text: '近三个月',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setMonth(start.getMonth() - 3)
+      return [start, end]
+    },
+  },
+]
 // setTimeout(() => {
 //   xAxisData.value = [
 //     '闸井浓度超限', '场站浓度超限', '场站火焰报警', '疑似第三方破坏', '场站烟雾报警',
@@ -66,10 +94,25 @@
 //     value: data.value[0].data[index],
 //   }))
 // }, 1000)
+const resizePage = () => {
+  setTimeout(() => {
+    const resize = new Event('resize')
+    window.dispatchEvent(resize)
+  }, 500)
+}
 const fetchData = () => {
   loading.value = true
   getAlarmType(listQuery.value).then((res) => {
-    console.log(res.data, '各类报警统计')
+    // console.log(res.data, '各类报警统计')
+    xAxisData.value = res.data.map((item: any) => item.name)
+    data.value = [
+      {
+        name: '报警数量',
+        data: res.data.map((item: any) => item.value),
+      },
+    ]
+    list.value = res.data
+    resizePage
     loading.value = false
   }).catch(() => {
     loading.value = false
@@ -105,8 +148,8 @@
           style="width: 220px;margin: 0 5px;"
         />
         <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="至"
+          v-model="datetimerange" type="datetimerange" format="YYYY-MM-DD HH:mm:ss" :shortcuts="shortcuts"
+          style="width: 380px;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;" @click="fetchData">
@@ -118,8 +161,8 @@
       <div v-loading="loading" class="alarm-count">
         <div class="bar">
           <bar-chart-vertical
-            v-show="xAxisData.length"
-            :x-axis-data="xAxisData" :bar-coner="0" :data="data" :colors="[]" :bar-width="15"
+            v-show="xAxisData.length" :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' }"
             :grid="{
               top: 50,
@@ -133,7 +176,7 @@
         </div>
         <div class="table">
           <el-table border :data="list" stripe style="width: 100%;" :height="440">
-            <el-table-column label="报警类型" prop="alarmType" align="center" />
+            <el-table-column label="报警类型" prop="name" align="center" />
             <el-table-column label="报警数量" prop="value" align="center" />
           </el-table>
         </div>

diff --git a/src/api/home/alarm/count.ts b/src/api/home/alarm/count.ts
index 1f4b59a..d5d9244 100644
--- a/src/api/home/alarm/count.ts
+++ b/src/api/home/alarm/count.ts
@@ -34,3 +34,11 @@
     data,
   })
 }
+// 报警趋势分析
+export function getAlarmTrend(data: any) {
+  return request({
+    url: '/statics/alarmRecords/alarmTrend',
+    method: 'post',
+    data,
+  })
+}
diff --git a/src/api/home/alarm/current.ts b/src/api/home/alarm/current.ts
index ec20f64..ac3387f 100644
--- a/src/api/home/alarm/current.ts
+++ b/src/api/home/alarm/current.ts
@@ -57,3 +57,13 @@
     },
   })
 }
+// 批量删除
+export function batchDelete(ids: any) {
+  return request({
+    url: '/system/alarmRecords/batchDelete',
+    method: 'post',
+    data: {
+      ids,
+    },
+  })
+}
diff --git a/src/api/home/alarm/history.ts b/src/api/home/alarm/history.ts
index 5f55e82..44cf851 100644
--- a/src/api/home/alarm/history.ts
+++ b/src/api/home/alarm/history.ts
@@ -11,3 +11,13 @@
     data,
   })
 }
+// 详情
+export function getAlarmDetail(id: any) {
+  return request({
+    url: '/system/alarmRecords/historyAlarmDetail',
+    method: 'post',
+    data: {
+      id,
+    },
+  })
+}
diff --git a/src/components/Echart/LineChart.vue b/src/components/Echart/LineChart.vue
index 2733161..b811f29 100644
--- a/src/components/Echart/LineChart.vue
+++ b/src/components/Echart/LineChart.vue
@@ -207,7 +207,7 @@
         },
       },
       valueFormatter: (value: string | number) => {
-        return value ? value + props.unit : ''
+        return value ? value + props.unit : value === 0 ? '0' : ''
       },
     }, // 提示框
     xAxis: [
diff --git a/src/router/modules/pc.ts b/src/router/modules/pc.ts
index 9b058fa..f3edac9 100644
--- a/src/router/modules/pc.ts
+++ b/src/router/modules/pc.ts
@@ -94,6 +94,19 @@
         },
       },
       {
+        path: '/history/detail',
+        component: () => import('@/views/home/alarm/current/components/detail.vue'),
+        name: 'AlarmHistoryDetail',
+        meta: {
+          title: '报警详情',
+          icon: 'ep:key',
+          sidebar: false,
+          breadcrumb: true,
+          activeMenu: '/alarm/history',
+          auth: '/alarm/history',
+        },
+      },
+      {
         path: 'count',
         component: () => import('@/views/home/alarm/count/index.vue'),
         name: 'AlarmCount',
diff --git a/src/views/home/alarm/count/components/alarmStatistics.vue b/src/views/home/alarm/count/components/alarmStatistics.vue
index b088de2..7aa930f 100644
--- a/src/views/home/alarm/count/components/alarmStatistics.vue
+++ b/src/views/home/alarm/count/components/alarmStatistics.vue
@@ -34,13 +34,12 @@
     value: '3',
   },
 ])
-const xAxisData = ref([])
-const data = ref([])
+const xAxisData = ref<string[]>([])
+const data = ref<any[]>([])
 const list = ref([])
 const loading = ref(true)
 // 开始结束时间
 const datetimerange = ref()
-// 默认当天
 watch(() => datetimerange.value, (newVal) => {
   listQuery.value.begTime = ''
   listQuery.value.endTime = ''
@@ -51,6 +50,35 @@
     }
   }
 })
+const shortcuts = [
+  {
+    text: '近一周',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setDate(start.getDate() - 7)
+      return [start, end]
+    },
+  },
+  {
+    text: '近一个月',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setMonth(start.getMonth() - 1)
+      return [start, end]
+    },
+  },
+  {
+    text: '近三个月',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setMonth(start.getMonth() - 3)
+      return [start, end]
+    },
+  },
+]
 // setTimeout(() => {
 //   xAxisData.value = [
 //     '闸井浓度超限', '场站浓度超限', '场站火焰报警', '疑似第三方破坏', '场站烟雾报警',
@@ -66,10 +94,25 @@
 //     value: data.value[0].data[index],
 //   }))
 // }, 1000)
+const resizePage = () => {
+  setTimeout(() => {
+    const resize = new Event('resize')
+    window.dispatchEvent(resize)
+  }, 500)
+}
 const fetchData = () => {
   loading.value = true
   getAlarmType(listQuery.value).then((res) => {
-    console.log(res.data, '各类报警统计')
+    // console.log(res.data, '各类报警统计')
+    xAxisData.value = res.data.map((item: any) => item.name)
+    data.value = [
+      {
+        name: '报警数量',
+        data: res.data.map((item: any) => item.value),
+      },
+    ]
+    list.value = res.data
+    resizePage
     loading.value = false
   }).catch(() => {
     loading.value = false
@@ -105,8 +148,8 @@
           style="width: 220px;margin: 0 5px;"
         />
         <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="至"
+          v-model="datetimerange" type="datetimerange" format="YYYY-MM-DD HH:mm:ss" :shortcuts="shortcuts"
+          style="width: 380px;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;" @click="fetchData">
@@ -118,8 +161,8 @@
       <div v-loading="loading" class="alarm-count">
         <div class="bar">
           <bar-chart-vertical
-            v-show="xAxisData.length"
-            :x-axis-data="xAxisData" :bar-coner="0" :data="data" :colors="[]" :bar-width="15"
+            v-show="xAxisData.length" :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' }"
             :grid="{
               top: 50,
@@ -133,7 +176,7 @@
         </div>
         <div class="table">
           <el-table border :data="list" stripe style="width: 100%;" :height="440">
-            <el-table-column label="报警类型" prop="alarmType" align="center" />
+            <el-table-column label="报警类型" prop="name" align="center" />
             <el-table-column label="报警数量" prop="value" align="center" />
           </el-table>
         </div>
diff --git a/src/views/home/alarm/count/components/deptCount.vue b/src/views/home/alarm/count/components/deptCount.vue
index 1ca5482..798bfd2 100644
--- a/src/views/home/alarm/count/components/deptCount.vue
+++ b/src/views/home/alarm/count/components/deptCount.vue
@@ -5,40 +5,123 @@
  -->
 <script lang="ts" setup name="AlarmCount">
 import layout from './layout.vue'
+import { getAlarmCompany } from '@/api/home/alarm/count'
 const listQuery = ref({
-  type: 'day',
+  begTime: '',
+  endTime: '',
+  ledgerType: '',
+  timeType: '1',
 })
 const selectTimeType = (type: string) => {
-  listQuery.value.type = type
+  listQuery.value.timeType = type
 }
+// 开始结束时间
+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 shortcuts = [
+  {
+    text: '近一周',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setDate(start.getDate() - 7)
+      return [start, end]
+    },
+  },
+  {
+    text: '近一个月',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setMonth(start.getMonth() - 1)
+      return [start, end]
+    },
+  },
+  {
+    text: '近三个月',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setMonth(start.getMonth() - 3)
+      return [start, end]
+    },
+  },
+]
+// 类别
+const ledgerTypeList = ref<{ id: string; name: string; value: string }[]>([
+  {
+    name: '闸井',
+    id: '1',
+    value: '1',
+  },
+  {
+    name: '场站',
+    id: '2',
+    value: '2',
+  },
+  {
+    name: '管线',
+    id: '3',
+    value: '3',
+  },
+])
 const xAxisData = ref([])
 const data = ref([])
 const list = ref([])
-setTimeout(() => {
-  xAxisData.value = [
-    '第一分公司', '第二分公司', '第三分公司', '第四分公司', '第五分公司',
-  ]
-  data.value = [
-    {
-      name: '闸井浓度超限',
-      data: [1, 8, 5, 8, 4],
-    },
-    {
-      name: '场站浓度超限',
-      data: [8, 3, 6, 1, 7],
-    },
-    {
-      name: '疑似第三方破坏',
-      data: [4, 7, 5, 9, 4],
-    },
-  ]
-  list.value = xAxisData.value.map((item, index) => ({
-    dept: item,
-    wellOver: data.value[0].data[index],
-    senceOver: data.value[1].data[index],
-    thirdParty: data.value[2].data[index],
-  }))
-}, 1000)
+const loading = ref(true)
+// setTimeout(() => {
+//   xAxisData.value = [
+//     '第一分公司', '第二分公司', '第三分公司', '第四分公司', '第五分公司',
+//   ]
+//   data.value = [
+//     {
+//       name: '闸井浓度超限',
+//       data: [1, 8, 5, 8, 4],
+//     },
+//     {
+//       name: '场站浓度超限',
+//       data: [8, 3, 6, 1, 7],
+//     },
+//     {
+//       name: '疑似第三方破坏',
+//       data: [4, 7, 5, 9, 4],
+//     },
+//   ]
+//   list.value = xAxisData.value.map((item, index) => ({
+//     dept: item,
+//     wellOver: data.value[0].data[index],
+//     senceOver: data.value[1].data[index],
+//     thirdParty: data.value[2].data[index],
+//   }))
+// }, 1000)
+const resizePage = () => {
+  setTimeout(() => {
+    const resize = new Event('resize')
+    window.dispatchEvent(resize)
+  }, 500)
+}
+const fetchData = () => {
+  loading.value = true
+  getAlarmCompany(listQuery.value).then((res) => {
+    console.log(res.data, '各单位报警统计')
+    resizePage()
+    loading.value = false
+  }).catch(() => {
+    loading.value = false
+  })
+}
+onMounted(() => {
+  fetchData()
+})
 </script>
 
 <template>
@@ -47,49 +130,59 @@
     <template #search>
       <div class="search">
         <el-button
-          :class="listQuery.type === 'day' ? 'active' : ''" round size="small"
-          @click="selectTimeType('day')"
+          :class="listQuery.timeType === '1' ? 'active' : ''" round size="small"
+          style="margin: 0 5px;"
+          @click="selectTimeType('1')"
         >
           今日
         </el-button>
         <el-button
-          :class="listQuery.type === 'week' ? 'active' : ''" round size="small"
-          @click="selectTimeType('week')"
+          :class="listQuery.timeType === '2' ? 'active' : ''" round size="small"
+          style="margin: 0 5px;"
+          @click="selectTimeType('2')"
         >
           本周
         </el-button>
         <el-button
-          :class="listQuery.type === 'month' ? 'active' : ''" round size="small"
-          @click="selectTimeType('month')"
+          :class="listQuery.timeType === '3' ? 'active' : ''" round size="small"
+          style="margin: 0 5px;"
+          @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 v-for="item in ledgerTypeList" :key="item.id" :label="item.name" :value="item.id" />
+        </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
+          style="width: 380px;margin: 0 5px;" value-format="YYYY-MM-DD HH:mm:ss" range-separator="至"
+          start-placeholder="报警开始时间" end-placeholder="报警结束时间" clearable :shortcuts="shortcuts"
         />
-        <el-button type="primary" style="margin: 0 5px;">
+        <el-button type="primary" style="margin: 0 5px;" @click="fetchData">
           搜索
         </el-button>
       </div>
     </template>
     <template #content>
-      <div class="alarm-count">
+      <div v-loading="loading" class="alarm-count">
         <div class="bar">
           <bar-chart-vertical
+            v-show="xAxisData.length"
             :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' }"
+            :grid="{
+              top: 50,
+              left: 30,
+              right: 30,
+              bottom: 20,
+              containLabel: true, // 是否包含坐标轴的刻度标签
+            }"
           />
+          <el-empty v-show="!xAxisData.length" description="暂无数据" />
         </div>
         <div class="table">
           <el-table border :data="list" stripe style="width: 100%;" :height="440">
-            <el-table-column label="管理单位" prop="dept" align="center" />
+            <el-table-column label="管理单位" prop="dept" align="center" width="200" />
             <el-table-column label="闸井浓度超限" prop="wellOver" align="center" />
             <el-table-column label="场站浓度超限" prop="senceOver" align="center" />
             <el-table-column label="疑似第三方破坏" prop="thirdParty" align="center" />

diff --git a/src/api/home/alarm/count.ts b/src/api/home/alarm/count.ts
index 1f4b59a..d5d9244 100644
--- a/src/api/home/alarm/count.ts
+++ b/src/api/home/alarm/count.ts
@@ -34,3 +34,11 @@
     data,
   })
 }
+// 报警趋势分析
+export function getAlarmTrend(data: any) {
+  return request({
+    url: '/statics/alarmRecords/alarmTrend',
+    method: 'post',
+    data,
+  })
+}
diff --git a/src/api/home/alarm/current.ts b/src/api/home/alarm/current.ts
index ec20f64..ac3387f 100644
--- a/src/api/home/alarm/current.ts
+++ b/src/api/home/alarm/current.ts
@@ -57,3 +57,13 @@
     },
   })
 }
+// 批量删除
+export function batchDelete(ids: any) {
+  return request({
+    url: '/system/alarmRecords/batchDelete',
+    method: 'post',
+    data: {
+      ids,
+    },
+  })
+}
diff --git a/src/api/home/alarm/history.ts b/src/api/home/alarm/history.ts
index 5f55e82..44cf851 100644
--- a/src/api/home/alarm/history.ts
+++ b/src/api/home/alarm/history.ts
@@ -11,3 +11,13 @@
     data,
   })
 }
+// 详情
+export function getAlarmDetail(id: any) {
+  return request({
+    url: '/system/alarmRecords/historyAlarmDetail',
+    method: 'post',
+    data: {
+      id,
+    },
+  })
+}
diff --git a/src/components/Echart/LineChart.vue b/src/components/Echart/LineChart.vue
index 2733161..b811f29 100644
--- a/src/components/Echart/LineChart.vue
+++ b/src/components/Echart/LineChart.vue
@@ -207,7 +207,7 @@
         },
       },
       valueFormatter: (value: string | number) => {
-        return value ? value + props.unit : ''
+        return value ? value + props.unit : value === 0 ? '0' : ''
       },
     }, // 提示框
     xAxis: [
diff --git a/src/router/modules/pc.ts b/src/router/modules/pc.ts
index 9b058fa..f3edac9 100644
--- a/src/router/modules/pc.ts
+++ b/src/router/modules/pc.ts
@@ -94,6 +94,19 @@
         },
       },
       {
+        path: '/history/detail',
+        component: () => import('@/views/home/alarm/current/components/detail.vue'),
+        name: 'AlarmHistoryDetail',
+        meta: {
+          title: '报警详情',
+          icon: 'ep:key',
+          sidebar: false,
+          breadcrumb: true,
+          activeMenu: '/alarm/history',
+          auth: '/alarm/history',
+        },
+      },
+      {
         path: 'count',
         component: () => import('@/views/home/alarm/count/index.vue'),
         name: 'AlarmCount',
diff --git a/src/views/home/alarm/count/components/alarmStatistics.vue b/src/views/home/alarm/count/components/alarmStatistics.vue
index b088de2..7aa930f 100644
--- a/src/views/home/alarm/count/components/alarmStatistics.vue
+++ b/src/views/home/alarm/count/components/alarmStatistics.vue
@@ -34,13 +34,12 @@
     value: '3',
   },
 ])
-const xAxisData = ref([])
-const data = ref([])
+const xAxisData = ref<string[]>([])
+const data = ref<any[]>([])
 const list = ref([])
 const loading = ref(true)
 // 开始结束时间
 const datetimerange = ref()
-// 默认当天
 watch(() => datetimerange.value, (newVal) => {
   listQuery.value.begTime = ''
   listQuery.value.endTime = ''
@@ -51,6 +50,35 @@
     }
   }
 })
+const shortcuts = [
+  {
+    text: '近一周',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setDate(start.getDate() - 7)
+      return [start, end]
+    },
+  },
+  {
+    text: '近一个月',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setMonth(start.getMonth() - 1)
+      return [start, end]
+    },
+  },
+  {
+    text: '近三个月',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setMonth(start.getMonth() - 3)
+      return [start, end]
+    },
+  },
+]
 // setTimeout(() => {
 //   xAxisData.value = [
 //     '闸井浓度超限', '场站浓度超限', '场站火焰报警', '疑似第三方破坏', '场站烟雾报警',
@@ -66,10 +94,25 @@
 //     value: data.value[0].data[index],
 //   }))
 // }, 1000)
+const resizePage = () => {
+  setTimeout(() => {
+    const resize = new Event('resize')
+    window.dispatchEvent(resize)
+  }, 500)
+}
 const fetchData = () => {
   loading.value = true
   getAlarmType(listQuery.value).then((res) => {
-    console.log(res.data, '各类报警统计')
+    // console.log(res.data, '各类报警统计')
+    xAxisData.value = res.data.map((item: any) => item.name)
+    data.value = [
+      {
+        name: '报警数量',
+        data: res.data.map((item: any) => item.value),
+      },
+    ]
+    list.value = res.data
+    resizePage
     loading.value = false
   }).catch(() => {
     loading.value = false
@@ -105,8 +148,8 @@
           style="width: 220px;margin: 0 5px;"
         />
         <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="至"
+          v-model="datetimerange" type="datetimerange" format="YYYY-MM-DD HH:mm:ss" :shortcuts="shortcuts"
+          style="width: 380px;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;" @click="fetchData">
@@ -118,8 +161,8 @@
       <div v-loading="loading" class="alarm-count">
         <div class="bar">
           <bar-chart-vertical
-            v-show="xAxisData.length"
-            :x-axis-data="xAxisData" :bar-coner="0" :data="data" :colors="[]" :bar-width="15"
+            v-show="xAxisData.length" :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' }"
             :grid="{
               top: 50,
@@ -133,7 +176,7 @@
         </div>
         <div class="table">
           <el-table border :data="list" stripe style="width: 100%;" :height="440">
-            <el-table-column label="报警类型" prop="alarmType" align="center" />
+            <el-table-column label="报警类型" prop="name" align="center" />
             <el-table-column label="报警数量" prop="value" align="center" />
           </el-table>
         </div>
diff --git a/src/views/home/alarm/count/components/deptCount.vue b/src/views/home/alarm/count/components/deptCount.vue
index 1ca5482..798bfd2 100644
--- a/src/views/home/alarm/count/components/deptCount.vue
+++ b/src/views/home/alarm/count/components/deptCount.vue
@@ -5,40 +5,123 @@
  -->
 <script lang="ts" setup name="AlarmCount">
 import layout from './layout.vue'
+import { getAlarmCompany } from '@/api/home/alarm/count'
 const listQuery = ref({
-  type: 'day',
+  begTime: '',
+  endTime: '',
+  ledgerType: '',
+  timeType: '1',
 })
 const selectTimeType = (type: string) => {
-  listQuery.value.type = type
+  listQuery.value.timeType = type
 }
+// 开始结束时间
+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 shortcuts = [
+  {
+    text: '近一周',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setDate(start.getDate() - 7)
+      return [start, end]
+    },
+  },
+  {
+    text: '近一个月',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setMonth(start.getMonth() - 1)
+      return [start, end]
+    },
+  },
+  {
+    text: '近三个月',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setMonth(start.getMonth() - 3)
+      return [start, end]
+    },
+  },
+]
+// 类别
+const ledgerTypeList = ref<{ id: string; name: string; value: string }[]>([
+  {
+    name: '闸井',
+    id: '1',
+    value: '1',
+  },
+  {
+    name: '场站',
+    id: '2',
+    value: '2',
+  },
+  {
+    name: '管线',
+    id: '3',
+    value: '3',
+  },
+])
 const xAxisData = ref([])
 const data = ref([])
 const list = ref([])
-setTimeout(() => {
-  xAxisData.value = [
-    '第一分公司', '第二分公司', '第三分公司', '第四分公司', '第五分公司',
-  ]
-  data.value = [
-    {
-      name: '闸井浓度超限',
-      data: [1, 8, 5, 8, 4],
-    },
-    {
-      name: '场站浓度超限',
-      data: [8, 3, 6, 1, 7],
-    },
-    {
-      name: '疑似第三方破坏',
-      data: [4, 7, 5, 9, 4],
-    },
-  ]
-  list.value = xAxisData.value.map((item, index) => ({
-    dept: item,
-    wellOver: data.value[0].data[index],
-    senceOver: data.value[1].data[index],
-    thirdParty: data.value[2].data[index],
-  }))
-}, 1000)
+const loading = ref(true)
+// setTimeout(() => {
+//   xAxisData.value = [
+//     '第一分公司', '第二分公司', '第三分公司', '第四分公司', '第五分公司',
+//   ]
+//   data.value = [
+//     {
+//       name: '闸井浓度超限',
+//       data: [1, 8, 5, 8, 4],
+//     },
+//     {
+//       name: '场站浓度超限',
+//       data: [8, 3, 6, 1, 7],
+//     },
+//     {
+//       name: '疑似第三方破坏',
+//       data: [4, 7, 5, 9, 4],
+//     },
+//   ]
+//   list.value = xAxisData.value.map((item, index) => ({
+//     dept: item,
+//     wellOver: data.value[0].data[index],
+//     senceOver: data.value[1].data[index],
+//     thirdParty: data.value[2].data[index],
+//   }))
+// }, 1000)
+const resizePage = () => {
+  setTimeout(() => {
+    const resize = new Event('resize')
+    window.dispatchEvent(resize)
+  }, 500)
+}
+const fetchData = () => {
+  loading.value = true
+  getAlarmCompany(listQuery.value).then((res) => {
+    console.log(res.data, '各单位报警统计')
+    resizePage()
+    loading.value = false
+  }).catch(() => {
+    loading.value = false
+  })
+}
+onMounted(() => {
+  fetchData()
+})
 </script>
 
 <template>
@@ -47,49 +130,59 @@
     <template #search>
       <div class="search">
         <el-button
-          :class="listQuery.type === 'day' ? 'active' : ''" round size="small"
-          @click="selectTimeType('day')"
+          :class="listQuery.timeType === '1' ? 'active' : ''" round size="small"
+          style="margin: 0 5px;"
+          @click="selectTimeType('1')"
         >
           今日
         </el-button>
         <el-button
-          :class="listQuery.type === 'week' ? 'active' : ''" round size="small"
-          @click="selectTimeType('week')"
+          :class="listQuery.timeType === '2' ? 'active' : ''" round size="small"
+          style="margin: 0 5px;"
+          @click="selectTimeType('2')"
         >
           本周
         </el-button>
         <el-button
-          :class="listQuery.type === 'month' ? 'active' : ''" round size="small"
-          @click="selectTimeType('month')"
+          :class="listQuery.timeType === '3' ? 'active' : ''" round size="small"
+          style="margin: 0 5px;"
+          @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 v-for="item in ledgerTypeList" :key="item.id" :label="item.name" :value="item.id" />
+        </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
+          style="width: 380px;margin: 0 5px;" value-format="YYYY-MM-DD HH:mm:ss" range-separator="至"
+          start-placeholder="报警开始时间" end-placeholder="报警结束时间" clearable :shortcuts="shortcuts"
         />
-        <el-button type="primary" style="margin: 0 5px;">
+        <el-button type="primary" style="margin: 0 5px;" @click="fetchData">
           搜索
         </el-button>
       </div>
     </template>
     <template #content>
-      <div class="alarm-count">
+      <div v-loading="loading" class="alarm-count">
         <div class="bar">
           <bar-chart-vertical
+            v-show="xAxisData.length"
             :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' }"
+            :grid="{
+              top: 50,
+              left: 30,
+              right: 30,
+              bottom: 20,
+              containLabel: true, // 是否包含坐标轴的刻度标签
+            }"
           />
+          <el-empty v-show="!xAxisData.length" description="暂无数据" />
         </div>
         <div class="table">
           <el-table border :data="list" stripe style="width: 100%;" :height="440">
-            <el-table-column label="管理单位" prop="dept" align="center" />
+            <el-table-column label="管理单位" prop="dept" align="center" width="200" />
             <el-table-column label="闸井浓度超限" prop="wellOver" align="center" />
             <el-table-column label="场站浓度超限" prop="senceOver" align="center" />
             <el-table-column label="疑似第三方破坏" prop="thirdParty" align="center" />
diff --git a/src/views/home/alarm/count/components/locationAnalysis.vue b/src/views/home/alarm/count/components/locationAnalysis.vue
index 4265aaf..4cd5921 100644
--- a/src/views/home/alarm/count/components/locationAnalysis.vue
+++ b/src/views/home/alarm/count/components/locationAnalysis.vue
@@ -18,7 +18,7 @@
 // 开始结束时间
 const datetimerange = ref()
 // 默认当天
-datetimerange.value = [`${dayjs().format('YYYY-MM-DD')} 00:00:00`, dayjs().format('YYYY-MM-DD HH:mm:ss')]
+// datetimerange.value = [`${dayjs().format('YYYY-MM-DD')} 00:00:00`, dayjs().format('YYYY-MM-DD HH:mm:ss')]
 watch(() => datetimerange.value, (newVal) => {
   listQuery.value.begTime = ''
   listQuery.value.endTime = ''
@@ -29,6 +29,35 @@
     }
   }
 })
+const shortcuts = [
+  {
+    text: '近一周',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setDate(start.getDate() - 7)
+      return [start, end]
+    },
+  },
+  {
+    text: '近一个月',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setMonth(start.getMonth() - 1)
+      return [start, end]
+    },
+  },
+  {
+    text: '近三个月',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setMonth(start.getMonth() - 3)
+      return [start, end]
+    },
+  },
+]
 const selectTimeType = (type: string) => {
   listQuery.value.timeType = type
 }
@@ -52,13 +81,13 @@
     <!-- 查询条件 -->
     <template #search>
       <div class="search">
-        <el-button :class="listQuery.timeType === '1' ? 'active' : ''" round size="small" @click="selectTimeType('1')">
+        <el-button :class="listQuery.timeType === '1' ? 'active' : ''" round size="small" style="margin: 0 5px;" @click="selectTimeType('1')">
           今日
         </el-button>
-        <el-button :class="listQuery.timeType === '2' ? 'active' : ''" round size="small" @click="selectTimeType('2')">
+        <el-button :class="listQuery.timeType === '2' ? 'active' : ''" round size="small" style="margin: 0 5px;" @click="selectTimeType('2')">
           本周
         </el-button>
-        <el-button :class="listQuery.timeType === '3' ? 'active' : ''" round size="small" @click="selectTimeType('3')">
+        <el-button :class="listQuery.timeType === '3' ? 'active' : ''" round size="small" style="margin: 0 5px;" @click="selectTimeType('3')">
           本月
         </el-button>
         <el-select v-model="listQuery.ledgerType" placeholder="全部类别" clearable style="width: 180px;margin: 0 5px;">
@@ -68,8 +97,8 @@
         </el-select>
         <el-date-picker
           v-model="datetimerange" type="datetimerange" format="YYYY-MM-DD HH:mm:ss"
-          style="width: 360px;margin: 0 5px;" value-format="YYYY-MM-DD HH:mm:ss" range-separator="至"
-          start-placeholder="报警开始时间" end-placeholder="报警结束时间" clearable
+          style="width: 380px;margin: 0 5px;" value-format="YYYY-MM-DD HH:mm:ss" range-separator="至"
+          start-placeholder="报警开始时间" end-placeholder="报警结束时间" clearable :shortcuts="shortcuts"
         />
         <el-button type="primary" style="margin: 0 5px;" @click="fetchData">
           搜索
@@ -80,13 +109,13 @@
       <div class="alarm-count">
         <div class="table">
           <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="type" align="center" width="140" />
+            <el-table-column label="位号" prop="tagNumber" align="center" width="160" />
             <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-column label="标签" prop="marker" align="center" width="140" />
+            <el-table-column label="报警次数" prop="alarmSum" align="center" width="120" />
           </el-table>
         </div>
       </div>

diff --git a/src/api/home/alarm/count.ts b/src/api/home/alarm/count.ts
index 1f4b59a..d5d9244 100644
--- a/src/api/home/alarm/count.ts
+++ b/src/api/home/alarm/count.ts
@@ -34,3 +34,11 @@
     data,
   })
 }
+// 报警趋势分析
+export function getAlarmTrend(data: any) {
+  return request({
+    url: '/statics/alarmRecords/alarmTrend',
+    method: 'post',
+    data,
+  })
+}
diff --git a/src/api/home/alarm/current.ts b/src/api/home/alarm/current.ts
index ec20f64..ac3387f 100644
--- a/src/api/home/alarm/current.ts
+++ b/src/api/home/alarm/current.ts
@@ -57,3 +57,13 @@
     },
   })
 }
+// 批量删除
+export function batchDelete(ids: any) {
+  return request({
+    url: '/system/alarmRecords/batchDelete',
+    method: 'post',
+    data: {
+      ids,
+    },
+  })
+}
diff --git a/src/api/home/alarm/history.ts b/src/api/home/alarm/history.ts
index 5f55e82..44cf851 100644
--- a/src/api/home/alarm/history.ts
+++ b/src/api/home/alarm/history.ts
@@ -11,3 +11,13 @@
     data,
   })
 }
+// 详情
+export function getAlarmDetail(id: any) {
+  return request({
+    url: '/system/alarmRecords/historyAlarmDetail',
+    method: 'post',
+    data: {
+      id,
+    },
+  })
+}
diff --git a/src/components/Echart/LineChart.vue b/src/components/Echart/LineChart.vue
index 2733161..b811f29 100644
--- a/src/components/Echart/LineChart.vue
+++ b/src/components/Echart/LineChart.vue
@@ -207,7 +207,7 @@
         },
       },
       valueFormatter: (value: string | number) => {
-        return value ? value + props.unit : ''
+        return value ? value + props.unit : value === 0 ? '0' : ''
       },
     }, // 提示框
     xAxis: [
diff --git a/src/router/modules/pc.ts b/src/router/modules/pc.ts
index 9b058fa..f3edac9 100644
--- a/src/router/modules/pc.ts
+++ b/src/router/modules/pc.ts
@@ -94,6 +94,19 @@
         },
       },
       {
+        path: '/history/detail',
+        component: () => import('@/views/home/alarm/current/components/detail.vue'),
+        name: 'AlarmHistoryDetail',
+        meta: {
+          title: '报警详情',
+          icon: 'ep:key',
+          sidebar: false,
+          breadcrumb: true,
+          activeMenu: '/alarm/history',
+          auth: '/alarm/history',
+        },
+      },
+      {
         path: 'count',
         component: () => import('@/views/home/alarm/count/index.vue'),
         name: 'AlarmCount',
diff --git a/src/views/home/alarm/count/components/alarmStatistics.vue b/src/views/home/alarm/count/components/alarmStatistics.vue
index b088de2..7aa930f 100644
--- a/src/views/home/alarm/count/components/alarmStatistics.vue
+++ b/src/views/home/alarm/count/components/alarmStatistics.vue
@@ -34,13 +34,12 @@
     value: '3',
   },
 ])
-const xAxisData = ref([])
-const data = ref([])
+const xAxisData = ref<string[]>([])
+const data = ref<any[]>([])
 const list = ref([])
 const loading = ref(true)
 // 开始结束时间
 const datetimerange = ref()
-// 默认当天
 watch(() => datetimerange.value, (newVal) => {
   listQuery.value.begTime = ''
   listQuery.value.endTime = ''
@@ -51,6 +50,35 @@
     }
   }
 })
+const shortcuts = [
+  {
+    text: '近一周',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setDate(start.getDate() - 7)
+      return [start, end]
+    },
+  },
+  {
+    text: '近一个月',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setMonth(start.getMonth() - 1)
+      return [start, end]
+    },
+  },
+  {
+    text: '近三个月',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setMonth(start.getMonth() - 3)
+      return [start, end]
+    },
+  },
+]
 // setTimeout(() => {
 //   xAxisData.value = [
 //     '闸井浓度超限', '场站浓度超限', '场站火焰报警', '疑似第三方破坏', '场站烟雾报警',
@@ -66,10 +94,25 @@
 //     value: data.value[0].data[index],
 //   }))
 // }, 1000)
+const resizePage = () => {
+  setTimeout(() => {
+    const resize = new Event('resize')
+    window.dispatchEvent(resize)
+  }, 500)
+}
 const fetchData = () => {
   loading.value = true
   getAlarmType(listQuery.value).then((res) => {
-    console.log(res.data, '各类报警统计')
+    // console.log(res.data, '各类报警统计')
+    xAxisData.value = res.data.map((item: any) => item.name)
+    data.value = [
+      {
+        name: '报警数量',
+        data: res.data.map((item: any) => item.value),
+      },
+    ]
+    list.value = res.data
+    resizePage
     loading.value = false
   }).catch(() => {
     loading.value = false
@@ -105,8 +148,8 @@
           style="width: 220px;margin: 0 5px;"
         />
         <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="至"
+          v-model="datetimerange" type="datetimerange" format="YYYY-MM-DD HH:mm:ss" :shortcuts="shortcuts"
+          style="width: 380px;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;" @click="fetchData">
@@ -118,8 +161,8 @@
       <div v-loading="loading" class="alarm-count">
         <div class="bar">
           <bar-chart-vertical
-            v-show="xAxisData.length"
-            :x-axis-data="xAxisData" :bar-coner="0" :data="data" :colors="[]" :bar-width="15"
+            v-show="xAxisData.length" :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' }"
             :grid="{
               top: 50,
@@ -133,7 +176,7 @@
         </div>
         <div class="table">
           <el-table border :data="list" stripe style="width: 100%;" :height="440">
-            <el-table-column label="报警类型" prop="alarmType" align="center" />
+            <el-table-column label="报警类型" prop="name" align="center" />
             <el-table-column label="报警数量" prop="value" align="center" />
           </el-table>
         </div>
diff --git a/src/views/home/alarm/count/components/deptCount.vue b/src/views/home/alarm/count/components/deptCount.vue
index 1ca5482..798bfd2 100644
--- a/src/views/home/alarm/count/components/deptCount.vue
+++ b/src/views/home/alarm/count/components/deptCount.vue
@@ -5,40 +5,123 @@
  -->
 <script lang="ts" setup name="AlarmCount">
 import layout from './layout.vue'
+import { getAlarmCompany } from '@/api/home/alarm/count'
 const listQuery = ref({
-  type: 'day',
+  begTime: '',
+  endTime: '',
+  ledgerType: '',
+  timeType: '1',
 })
 const selectTimeType = (type: string) => {
-  listQuery.value.type = type
+  listQuery.value.timeType = type
 }
+// 开始结束时间
+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 shortcuts = [
+  {
+    text: '近一周',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setDate(start.getDate() - 7)
+      return [start, end]
+    },
+  },
+  {
+    text: '近一个月',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setMonth(start.getMonth() - 1)
+      return [start, end]
+    },
+  },
+  {
+    text: '近三个月',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setMonth(start.getMonth() - 3)
+      return [start, end]
+    },
+  },
+]
+// 类别
+const ledgerTypeList = ref<{ id: string; name: string; value: string }[]>([
+  {
+    name: '闸井',
+    id: '1',
+    value: '1',
+  },
+  {
+    name: '场站',
+    id: '2',
+    value: '2',
+  },
+  {
+    name: '管线',
+    id: '3',
+    value: '3',
+  },
+])
 const xAxisData = ref([])
 const data = ref([])
 const list = ref([])
-setTimeout(() => {
-  xAxisData.value = [
-    '第一分公司', '第二分公司', '第三分公司', '第四分公司', '第五分公司',
-  ]
-  data.value = [
-    {
-      name: '闸井浓度超限',
-      data: [1, 8, 5, 8, 4],
-    },
-    {
-      name: '场站浓度超限',
-      data: [8, 3, 6, 1, 7],
-    },
-    {
-      name: '疑似第三方破坏',
-      data: [4, 7, 5, 9, 4],
-    },
-  ]
-  list.value = xAxisData.value.map((item, index) => ({
-    dept: item,
-    wellOver: data.value[0].data[index],
-    senceOver: data.value[1].data[index],
-    thirdParty: data.value[2].data[index],
-  }))
-}, 1000)
+const loading = ref(true)
+// setTimeout(() => {
+//   xAxisData.value = [
+//     '第一分公司', '第二分公司', '第三分公司', '第四分公司', '第五分公司',
+//   ]
+//   data.value = [
+//     {
+//       name: '闸井浓度超限',
+//       data: [1, 8, 5, 8, 4],
+//     },
+//     {
+//       name: '场站浓度超限',
+//       data: [8, 3, 6, 1, 7],
+//     },
+//     {
+//       name: '疑似第三方破坏',
+//       data: [4, 7, 5, 9, 4],
+//     },
+//   ]
+//   list.value = xAxisData.value.map((item, index) => ({
+//     dept: item,
+//     wellOver: data.value[0].data[index],
+//     senceOver: data.value[1].data[index],
+//     thirdParty: data.value[2].data[index],
+//   }))
+// }, 1000)
+const resizePage = () => {
+  setTimeout(() => {
+    const resize = new Event('resize')
+    window.dispatchEvent(resize)
+  }, 500)
+}
+const fetchData = () => {
+  loading.value = true
+  getAlarmCompany(listQuery.value).then((res) => {
+    console.log(res.data, '各单位报警统计')
+    resizePage()
+    loading.value = false
+  }).catch(() => {
+    loading.value = false
+  })
+}
+onMounted(() => {
+  fetchData()
+})
 </script>
 
 <template>
@@ -47,49 +130,59 @@
     <template #search>
       <div class="search">
         <el-button
-          :class="listQuery.type === 'day' ? 'active' : ''" round size="small"
-          @click="selectTimeType('day')"
+          :class="listQuery.timeType === '1' ? 'active' : ''" round size="small"
+          style="margin: 0 5px;"
+          @click="selectTimeType('1')"
         >
           今日
         </el-button>
         <el-button
-          :class="listQuery.type === 'week' ? 'active' : ''" round size="small"
-          @click="selectTimeType('week')"
+          :class="listQuery.timeType === '2' ? 'active' : ''" round size="small"
+          style="margin: 0 5px;"
+          @click="selectTimeType('2')"
         >
           本周
         </el-button>
         <el-button
-          :class="listQuery.type === 'month' ? 'active' : ''" round size="small"
-          @click="selectTimeType('month')"
+          :class="listQuery.timeType === '3' ? 'active' : ''" round size="small"
+          style="margin: 0 5px;"
+          @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 v-for="item in ledgerTypeList" :key="item.id" :label="item.name" :value="item.id" />
+        </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
+          style="width: 380px;margin: 0 5px;" value-format="YYYY-MM-DD HH:mm:ss" range-separator="至"
+          start-placeholder="报警开始时间" end-placeholder="报警结束时间" clearable :shortcuts="shortcuts"
         />
-        <el-button type="primary" style="margin: 0 5px;">
+        <el-button type="primary" style="margin: 0 5px;" @click="fetchData">
           搜索
         </el-button>
       </div>
     </template>
     <template #content>
-      <div class="alarm-count">
+      <div v-loading="loading" class="alarm-count">
         <div class="bar">
           <bar-chart-vertical
+            v-show="xAxisData.length"
             :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' }"
+            :grid="{
+              top: 50,
+              left: 30,
+              right: 30,
+              bottom: 20,
+              containLabel: true, // 是否包含坐标轴的刻度标签
+            }"
           />
+          <el-empty v-show="!xAxisData.length" description="暂无数据" />
         </div>
         <div class="table">
           <el-table border :data="list" stripe style="width: 100%;" :height="440">
-            <el-table-column label="管理单位" prop="dept" align="center" />
+            <el-table-column label="管理单位" prop="dept" align="center" width="200" />
             <el-table-column label="闸井浓度超限" prop="wellOver" align="center" />
             <el-table-column label="场站浓度超限" prop="senceOver" align="center" />
             <el-table-column label="疑似第三方破坏" prop="thirdParty" align="center" />
diff --git a/src/views/home/alarm/count/components/locationAnalysis.vue b/src/views/home/alarm/count/components/locationAnalysis.vue
index 4265aaf..4cd5921 100644
--- a/src/views/home/alarm/count/components/locationAnalysis.vue
+++ b/src/views/home/alarm/count/components/locationAnalysis.vue
@@ -18,7 +18,7 @@
 // 开始结束时间
 const datetimerange = ref()
 // 默认当天
-datetimerange.value = [`${dayjs().format('YYYY-MM-DD')} 00:00:00`, dayjs().format('YYYY-MM-DD HH:mm:ss')]
+// datetimerange.value = [`${dayjs().format('YYYY-MM-DD')} 00:00:00`, dayjs().format('YYYY-MM-DD HH:mm:ss')]
 watch(() => datetimerange.value, (newVal) => {
   listQuery.value.begTime = ''
   listQuery.value.endTime = ''
@@ -29,6 +29,35 @@
     }
   }
 })
+const shortcuts = [
+  {
+    text: '近一周',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setDate(start.getDate() - 7)
+      return [start, end]
+    },
+  },
+  {
+    text: '近一个月',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setMonth(start.getMonth() - 1)
+      return [start, end]
+    },
+  },
+  {
+    text: '近三个月',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setMonth(start.getMonth() - 3)
+      return [start, end]
+    },
+  },
+]
 const selectTimeType = (type: string) => {
   listQuery.value.timeType = type
 }
@@ -52,13 +81,13 @@
     <!-- 查询条件 -->
     <template #search>
       <div class="search">
-        <el-button :class="listQuery.timeType === '1' ? 'active' : ''" round size="small" @click="selectTimeType('1')">
+        <el-button :class="listQuery.timeType === '1' ? 'active' : ''" round size="small" style="margin: 0 5px;" @click="selectTimeType('1')">
           今日
         </el-button>
-        <el-button :class="listQuery.timeType === '2' ? 'active' : ''" round size="small" @click="selectTimeType('2')">
+        <el-button :class="listQuery.timeType === '2' ? 'active' : ''" round size="small" style="margin: 0 5px;" @click="selectTimeType('2')">
           本周
         </el-button>
-        <el-button :class="listQuery.timeType === '3' ? 'active' : ''" round size="small" @click="selectTimeType('3')">
+        <el-button :class="listQuery.timeType === '3' ? 'active' : ''" round size="small" style="margin: 0 5px;" @click="selectTimeType('3')">
           本月
         </el-button>
         <el-select v-model="listQuery.ledgerType" placeholder="全部类别" clearable style="width: 180px;margin: 0 5px;">
@@ -68,8 +97,8 @@
         </el-select>
         <el-date-picker
           v-model="datetimerange" type="datetimerange" format="YYYY-MM-DD HH:mm:ss"
-          style="width: 360px;margin: 0 5px;" value-format="YYYY-MM-DD HH:mm:ss" range-separator="至"
-          start-placeholder="报警开始时间" end-placeholder="报警结束时间" clearable
+          style="width: 380px;margin: 0 5px;" value-format="YYYY-MM-DD HH:mm:ss" range-separator="至"
+          start-placeholder="报警开始时间" end-placeholder="报警结束时间" clearable :shortcuts="shortcuts"
         />
         <el-button type="primary" style="margin: 0 5px;" @click="fetchData">
           搜索
@@ -80,13 +109,13 @@
       <div class="alarm-count">
         <div class="table">
           <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="type" align="center" width="140" />
+            <el-table-column label="位号" prop="tagNumber" align="center" width="160" />
             <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-column label="标签" prop="marker" align="center" width="140" />
+            <el-table-column label="报警次数" prop="alarmSum" align="center" width="120" />
           </el-table>
         </div>
       </div>
diff --git a/src/views/home/alarm/count/components/trendAnalysis.vue b/src/views/home/alarm/count/components/trendAnalysis.vue
index 73e18b0..18cfb4c 100644
--- a/src/views/home/alarm/count/components/trendAnalysis.vue
+++ b/src/views/home/alarm/count/components/trendAnalysis.vue
@@ -5,49 +5,203 @@
  -->
 <script lang="ts" setup name="TrendAnalysis">
 import layout from './layout.vue'
+import { getAlarmTrend } from '@/api/home/alarm/count'
 const listQuery = ref({
-  type: 'day',
+  timeType: '2',
+  ledgerType: '',
+  endTime: '',
+  begTime: '',
+  deptid: '',
 })
+// 开始结束时间
+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 shortcuts = [
+  {
+    text: '近一周',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setDate(start.getDate() - 7)
+      return [start, end]
+    },
+  },
+  {
+    text: '近一个月',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setMonth(start.getMonth() - 1)
+      return [start, end]
+    },
+  },
+  {
+    text: '近三个月',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setMonth(start.getMonth() - 3)
+      return [start, end]
+    },
+  },
+]
 const selectTimeType = (type: string) => {
-  listQuery.value.type = type
+  listQuery.value.timeType = type
 }
-const xAxisData = ref([])
-const data = ref([])
+const columns = ref<any[]>([
+  {
+    text: '闸井浓度超限',
+    value: 'well',
+  },
+  {
+    text: '场站浓度超限',
+    value: 'station',
+  },
+  {
+    text: '管线浓度超限',
+    value: 'pipeline',
+  },
+])
+// 类别
+const ledgerTypeList = ref<{ id: string; name: string; value: string }[]>([
+  {
+    name: '闸井',
+    id: '1',
+    value: '1',
+  },
+  {
+    name: '场站',
+    id: '2',
+    value: '2',
+  },
+  {
+    name: '管线',
+    id: '3',
+    value: '3',
+  },
+])
+const xAxisData = ref<string[]>([])
+const data = ref<any[]>([])
 const list = ref([])
-setTimeout(() => {
-  xAxisData.value = [
-    '2024-07-01 12:11:12',
-    '2024-07-02 12:11:12',
-    '2024-07-03 12:11:12',
-    '2024-07-04 12:11:12',
-    '2024-07-05 12:11:12',
-    '2024-07-06 12:11:12',
-    '2024-07-07 12:11:12',
-  ]
-  data.value = [
-    {
-      name: '闸井浓度超限',
-      data: [1, 3, 5, 1, 4, 2, 7],
-      symbol: 'emptyCircle',
-    },
-    {
-      name: '场站浓度超限',
-      data: [2, 1, 4, 1, 5, 2, 9],
-      symbol: 'emptyCircle',
-    },
-    {
-      name: '闸井浓度超限',
-      data: [4, 3, 2, 4, 7, 9, 1],
-      symbol: 'emptyCircle',
-    },
-  ]
-  list.value = xAxisData.value.map((item, index) => ({
-    alarmTime: item,
-    wellOver: data.value[0].data[index],
-    senceOver: data.value[1].data[index],
-    thirdParty: data.value[2].data[index],
-  }))
-}, 1000)
+const loading = ref(true)
+// setTimeout(() => {
+//   xAxisData.value = [
+//     '2024-07-01 12:11:12',
+//     '2024-07-02 12:11:12',
+//     '2024-07-03 12:11:12',
+//     '2024-07-04 12:11:12',
+//     '2024-07-05 12:11:12',
+//     '2024-07-06 12:11:12',
+//     '2024-07-07 12:11:12',
+//   ]
+//   data.value = [
+//     {
+//       name: '闸井浓度超限',
+//       data: [1, 3, 5, 1, 4, 2, 7],
+//       symbol: 'emptyCircle',
+//     },
+//     {
+//       name: '场站浓度超限',
+//       data: [2, 1, 4, 1, 5, 2, 9],
+//       symbol: 'emptyCircle',
+//     },
+//     {
+//       name: '闸井浓度超限',
+//       data: [4, 3, 2, 4, 7, 9, 1],
+//       symbol: 'emptyCircle',
+//     },
+//   ]
+//   list.value = xAxisData.value.map((item, index) => ({
+//     alarmTime: item,
+//     wellOver: data.value[0].data[index],
+//     senceOver: data.value[1].data[index],
+//     thirdParty: data.value[2].data[index],
+//   }))
+// }, 1000)
+const resizePage = () => {
+  setTimeout(() => {
+    const resize = new Event('resize')
+    window.dispatchEvent(resize)
+  }, 500)
+}
+const fetchData = () => {
+  loading.value = true
+  const columnsDict = {
+    闸井浓度超限: 'well',
+    场站浓度超限: 'station',
+    管线浓度超限: 'pipeline',
+  } as { [key: string]: string }
+  getAlarmTrend(listQuery.value).then((res) => {
+    console.log(res.data, '报警趋势分析')
+    xAxisData.value = res.data.map((item: any) => item.date)
+    if (!listQuery.value.ledgerType) {
+      data.value = [
+        {
+          name: '闸井浓度超限',
+          data: res.data.map((item: any) => item['闸井浓度超限']),
+        },
+        {
+          name: '场站浓度超限',
+          data: res.data.map((item: any) => item['场站浓度超限']),
+        },
+        {
+          name: '管线浓度超限',
+          data: res.data.map((item: any) => item['管线浓度超限']),
+        },
+      ]
+    }
+    else if (listQuery.value.ledgerType === '1') {
+      data.value = [
+        {
+          name: '闸井浓度超限',
+          data: res.data.map((item: any) => item['闸井浓度超限']),
+        },
+      ]
+    }
+    else if (listQuery.value.ledgerType === '2') {
+      data.value = [
+        {
+          name: '场站浓度超限',
+          data: res.data.map((item: any) => item['场站浓度超限']),
+        },
+      ]
+    }
+    else if (listQuery.value.ledgerType === '3') {
+      data.value = [
+        {
+          name: '管线浓度超限',
+          data: res.data.map((item: any) => item['管线浓度超限']),
+        },
+      ]
+    }
+    list.value = res.data.map((item: any) => ({
+      date: item.date,
+      well: item['闸井浓度超限'],
+      station: item['场站浓度超限'],
+      pipeline: item['管线浓度超限'],
+    }))
+    columns.value = data.value.map((item: any) => ({
+      text: item.name,
+      value: columnsDict[item.name],
+    }))
+    resizePage()
+    loading.value = false
+  }).catch(() => {
+    loading.value = false
+  })
+}
+onMounted(() => {
+  fetchData()
+})
 </script>
 
 <template>
@@ -56,34 +210,30 @@
     <template #search>
       <div class="search">
         <el-button
-          :class="listQuery.type === 'day' ? 'active' : ''" round size="small"
-          @click="selectTimeType('day')"
-        >
-          今日
-        </el-button>
-        <el-button
-          :class="listQuery.type === 'week' ? 'active' : ''" round size="small"
-          @click="selectTimeType('week')"
+          :class="listQuery.timeType === '2' ? 'active' : ''" round size="small" style="margin: 0 5px;"
+          @click="selectTimeType('2')"
         >
           本周
         </el-button>
         <el-button
-          :class="listQuery.type === 'month' ? 'active' : ''" round size="small"
-          @click="selectTimeType('month')"
+          :class="listQuery.timeType === '3' ? 'active' : ''" round size="small" style="margin: 0 5px;"
+          @click="selectTimeType('3')"
         >
           本月
         </el-button>
-        <el-select v-model="listQuery.keywords" placeholder="全部类别" clearable style="width: 180px;margin: 0 5px;" />
+        <el-select v-model="listQuery.ledgerType" placeholder="全部类别" clearable style="width: 180px;margin: 0 5px;">
+          <el-option v-for="item in ledgerTypeList" :key="item.id" :label="item.name" :value="item.id" />
+        </el-select>
         <dept-select
-          v-model="listQuery.keywords" placeholder="管理单位" :clearable="true"
+          v-model="listQuery.deptid" placeholder="管理单位" :clearable="true"
           style="width: 220px;margin: 0 5px;"
         />
         <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
+          style="width: 380px;margin: 0 5px;" value-format="YYYY-MM-DD HH:mm:ss" range-separator="至"
+          start-placeholder="报警开始时间" end-placeholder="报警结束时间" clearable :shortcuts="shortcuts"
         />
-        <el-button type="primary" style="margin: 0 5px;">
+        <el-button type="primary" style="margin: 0 5px;" @click="fetchData">
           搜索
         </el-button>
       </div>
@@ -94,14 +244,22 @@
           <line-chart
             :x-axis-data="xAxisData" :data="data" :gradient="false"
             :legend="{ itemWidth: 8, itemHeight: 8, type: 'scroll', orient: 'horizontal', icon: 'roundRect', right: '0', top: '10' }"
+            :grid="{
+              top: 50,
+              left: 30,
+              right: 30,
+              bottom: 20,
+              containLabel: true, // 是否包含坐标轴的刻度标签
+            }"
           />
         </div>
         <div class="table">
           <el-table border :data="list" stripe style="width: 100%;" :height="440">
-            <el-table-column label="日期" prop="alarmTime" align="center" />
-            <el-table-column label="闸井浓度超限" prop="wellOver" align="center" />
-            <el-table-column label="场站浓度超限" prop="senceOver" align="center" />
-            <el-table-column label="疑似第三方破坏" prop="thirdParty" align="center" />
+            <el-table-column label="日期" prop="date" align="center" width="190" />
+            <el-table-column
+              v-for="item in columns" :key="item.text" :label="item.text" :prop="item.value"
+              align="center"
+            />
           </el-table>
         </div>
       </div>

diff --git a/src/api/home/alarm/count.ts b/src/api/home/alarm/count.ts
index 1f4b59a..d5d9244 100644
--- a/src/api/home/alarm/count.ts
+++ b/src/api/home/alarm/count.ts
@@ -34,3 +34,11 @@
     data,
   })
 }
+// 报警趋势分析
+export function getAlarmTrend(data: any) {
+  return request({
+    url: '/statics/alarmRecords/alarmTrend',
+    method: 'post',
+    data,
+  })
+}
diff --git a/src/api/home/alarm/current.ts b/src/api/home/alarm/current.ts
index ec20f64..ac3387f 100644
--- a/src/api/home/alarm/current.ts
+++ b/src/api/home/alarm/current.ts
@@ -57,3 +57,13 @@
     },
   })
 }
+// 批量删除
+export function batchDelete(ids: any) {
+  return request({
+    url: '/system/alarmRecords/batchDelete',
+    method: 'post',
+    data: {
+      ids,
+    },
+  })
+}
diff --git a/src/api/home/alarm/history.ts b/src/api/home/alarm/history.ts
index 5f55e82..44cf851 100644
--- a/src/api/home/alarm/history.ts
+++ b/src/api/home/alarm/history.ts
@@ -11,3 +11,13 @@
     data,
   })
 }
+// 详情
+export function getAlarmDetail(id: any) {
+  return request({
+    url: '/system/alarmRecords/historyAlarmDetail',
+    method: 'post',
+    data: {
+      id,
+    },
+  })
+}
diff --git a/src/components/Echart/LineChart.vue b/src/components/Echart/LineChart.vue
index 2733161..b811f29 100644
--- a/src/components/Echart/LineChart.vue
+++ b/src/components/Echart/LineChart.vue
@@ -207,7 +207,7 @@
         },
       },
       valueFormatter: (value: string | number) => {
-        return value ? value + props.unit : ''
+        return value ? value + props.unit : value === 0 ? '0' : ''
       },
     }, // 提示框
     xAxis: [
diff --git a/src/router/modules/pc.ts b/src/router/modules/pc.ts
index 9b058fa..f3edac9 100644
--- a/src/router/modules/pc.ts
+++ b/src/router/modules/pc.ts
@@ -94,6 +94,19 @@
         },
       },
       {
+        path: '/history/detail',
+        component: () => import('@/views/home/alarm/current/components/detail.vue'),
+        name: 'AlarmHistoryDetail',
+        meta: {
+          title: '报警详情',
+          icon: 'ep:key',
+          sidebar: false,
+          breadcrumb: true,
+          activeMenu: '/alarm/history',
+          auth: '/alarm/history',
+        },
+      },
+      {
         path: 'count',
         component: () => import('@/views/home/alarm/count/index.vue'),
         name: 'AlarmCount',
diff --git a/src/views/home/alarm/count/components/alarmStatistics.vue b/src/views/home/alarm/count/components/alarmStatistics.vue
index b088de2..7aa930f 100644
--- a/src/views/home/alarm/count/components/alarmStatistics.vue
+++ b/src/views/home/alarm/count/components/alarmStatistics.vue
@@ -34,13 +34,12 @@
     value: '3',
   },
 ])
-const xAxisData = ref([])
-const data = ref([])
+const xAxisData = ref<string[]>([])
+const data = ref<any[]>([])
 const list = ref([])
 const loading = ref(true)
 // 开始结束时间
 const datetimerange = ref()
-// 默认当天
 watch(() => datetimerange.value, (newVal) => {
   listQuery.value.begTime = ''
   listQuery.value.endTime = ''
@@ -51,6 +50,35 @@
     }
   }
 })
+const shortcuts = [
+  {
+    text: '近一周',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setDate(start.getDate() - 7)
+      return [start, end]
+    },
+  },
+  {
+    text: '近一个月',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setMonth(start.getMonth() - 1)
+      return [start, end]
+    },
+  },
+  {
+    text: '近三个月',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setMonth(start.getMonth() - 3)
+      return [start, end]
+    },
+  },
+]
 // setTimeout(() => {
 //   xAxisData.value = [
 //     '闸井浓度超限', '场站浓度超限', '场站火焰报警', '疑似第三方破坏', '场站烟雾报警',
@@ -66,10 +94,25 @@
 //     value: data.value[0].data[index],
 //   }))
 // }, 1000)
+const resizePage = () => {
+  setTimeout(() => {
+    const resize = new Event('resize')
+    window.dispatchEvent(resize)
+  }, 500)
+}
 const fetchData = () => {
   loading.value = true
   getAlarmType(listQuery.value).then((res) => {
-    console.log(res.data, '各类报警统计')
+    // console.log(res.data, '各类报警统计')
+    xAxisData.value = res.data.map((item: any) => item.name)
+    data.value = [
+      {
+        name: '报警数量',
+        data: res.data.map((item: any) => item.value),
+      },
+    ]
+    list.value = res.data
+    resizePage
     loading.value = false
   }).catch(() => {
     loading.value = false
@@ -105,8 +148,8 @@
           style="width: 220px;margin: 0 5px;"
         />
         <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="至"
+          v-model="datetimerange" type="datetimerange" format="YYYY-MM-DD HH:mm:ss" :shortcuts="shortcuts"
+          style="width: 380px;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;" @click="fetchData">
@@ -118,8 +161,8 @@
       <div v-loading="loading" class="alarm-count">
         <div class="bar">
           <bar-chart-vertical
-            v-show="xAxisData.length"
-            :x-axis-data="xAxisData" :bar-coner="0" :data="data" :colors="[]" :bar-width="15"
+            v-show="xAxisData.length" :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' }"
             :grid="{
               top: 50,
@@ -133,7 +176,7 @@
         </div>
         <div class="table">
           <el-table border :data="list" stripe style="width: 100%;" :height="440">
-            <el-table-column label="报警类型" prop="alarmType" align="center" />
+            <el-table-column label="报警类型" prop="name" align="center" />
             <el-table-column label="报警数量" prop="value" align="center" />
           </el-table>
         </div>
diff --git a/src/views/home/alarm/count/components/deptCount.vue b/src/views/home/alarm/count/components/deptCount.vue
index 1ca5482..798bfd2 100644
--- a/src/views/home/alarm/count/components/deptCount.vue
+++ b/src/views/home/alarm/count/components/deptCount.vue
@@ -5,40 +5,123 @@
  -->
 <script lang="ts" setup name="AlarmCount">
 import layout from './layout.vue'
+import { getAlarmCompany } from '@/api/home/alarm/count'
 const listQuery = ref({
-  type: 'day',
+  begTime: '',
+  endTime: '',
+  ledgerType: '',
+  timeType: '1',
 })
 const selectTimeType = (type: string) => {
-  listQuery.value.type = type
+  listQuery.value.timeType = type
 }
+// 开始结束时间
+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 shortcuts = [
+  {
+    text: '近一周',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setDate(start.getDate() - 7)
+      return [start, end]
+    },
+  },
+  {
+    text: '近一个月',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setMonth(start.getMonth() - 1)
+      return [start, end]
+    },
+  },
+  {
+    text: '近三个月',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setMonth(start.getMonth() - 3)
+      return [start, end]
+    },
+  },
+]
+// 类别
+const ledgerTypeList = ref<{ id: string; name: string; value: string }[]>([
+  {
+    name: '闸井',
+    id: '1',
+    value: '1',
+  },
+  {
+    name: '场站',
+    id: '2',
+    value: '2',
+  },
+  {
+    name: '管线',
+    id: '3',
+    value: '3',
+  },
+])
 const xAxisData = ref([])
 const data = ref([])
 const list = ref([])
-setTimeout(() => {
-  xAxisData.value = [
-    '第一分公司', '第二分公司', '第三分公司', '第四分公司', '第五分公司',
-  ]
-  data.value = [
-    {
-      name: '闸井浓度超限',
-      data: [1, 8, 5, 8, 4],
-    },
-    {
-      name: '场站浓度超限',
-      data: [8, 3, 6, 1, 7],
-    },
-    {
-      name: '疑似第三方破坏',
-      data: [4, 7, 5, 9, 4],
-    },
-  ]
-  list.value = xAxisData.value.map((item, index) => ({
-    dept: item,
-    wellOver: data.value[0].data[index],
-    senceOver: data.value[1].data[index],
-    thirdParty: data.value[2].data[index],
-  }))
-}, 1000)
+const loading = ref(true)
+// setTimeout(() => {
+//   xAxisData.value = [
+//     '第一分公司', '第二分公司', '第三分公司', '第四分公司', '第五分公司',
+//   ]
+//   data.value = [
+//     {
+//       name: '闸井浓度超限',
+//       data: [1, 8, 5, 8, 4],
+//     },
+//     {
+//       name: '场站浓度超限',
+//       data: [8, 3, 6, 1, 7],
+//     },
+//     {
+//       name: '疑似第三方破坏',
+//       data: [4, 7, 5, 9, 4],
+//     },
+//   ]
+//   list.value = xAxisData.value.map((item, index) => ({
+//     dept: item,
+//     wellOver: data.value[0].data[index],
+//     senceOver: data.value[1].data[index],
+//     thirdParty: data.value[2].data[index],
+//   }))
+// }, 1000)
+const resizePage = () => {
+  setTimeout(() => {
+    const resize = new Event('resize')
+    window.dispatchEvent(resize)
+  }, 500)
+}
+const fetchData = () => {
+  loading.value = true
+  getAlarmCompany(listQuery.value).then((res) => {
+    console.log(res.data, '各单位报警统计')
+    resizePage()
+    loading.value = false
+  }).catch(() => {
+    loading.value = false
+  })
+}
+onMounted(() => {
+  fetchData()
+})
 </script>
 
 <template>
@@ -47,49 +130,59 @@
     <template #search>
       <div class="search">
         <el-button
-          :class="listQuery.type === 'day' ? 'active' : ''" round size="small"
-          @click="selectTimeType('day')"
+          :class="listQuery.timeType === '1' ? 'active' : ''" round size="small"
+          style="margin: 0 5px;"
+          @click="selectTimeType('1')"
         >
           今日
         </el-button>
         <el-button
-          :class="listQuery.type === 'week' ? 'active' : ''" round size="small"
-          @click="selectTimeType('week')"
+          :class="listQuery.timeType === '2' ? 'active' : ''" round size="small"
+          style="margin: 0 5px;"
+          @click="selectTimeType('2')"
         >
           本周
         </el-button>
         <el-button
-          :class="listQuery.type === 'month' ? 'active' : ''" round size="small"
-          @click="selectTimeType('month')"
+          :class="listQuery.timeType === '3' ? 'active' : ''" round size="small"
+          style="margin: 0 5px;"
+          @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 v-for="item in ledgerTypeList" :key="item.id" :label="item.name" :value="item.id" />
+        </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
+          style="width: 380px;margin: 0 5px;" value-format="YYYY-MM-DD HH:mm:ss" range-separator="至"
+          start-placeholder="报警开始时间" end-placeholder="报警结束时间" clearable :shortcuts="shortcuts"
         />
-        <el-button type="primary" style="margin: 0 5px;">
+        <el-button type="primary" style="margin: 0 5px;" @click="fetchData">
           搜索
         </el-button>
       </div>
     </template>
     <template #content>
-      <div class="alarm-count">
+      <div v-loading="loading" class="alarm-count">
         <div class="bar">
           <bar-chart-vertical
+            v-show="xAxisData.length"
             :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' }"
+            :grid="{
+              top: 50,
+              left: 30,
+              right: 30,
+              bottom: 20,
+              containLabel: true, // 是否包含坐标轴的刻度标签
+            }"
           />
+          <el-empty v-show="!xAxisData.length" description="暂无数据" />
         </div>
         <div class="table">
           <el-table border :data="list" stripe style="width: 100%;" :height="440">
-            <el-table-column label="管理单位" prop="dept" align="center" />
+            <el-table-column label="管理单位" prop="dept" align="center" width="200" />
             <el-table-column label="闸井浓度超限" prop="wellOver" align="center" />
             <el-table-column label="场站浓度超限" prop="senceOver" align="center" />
             <el-table-column label="疑似第三方破坏" prop="thirdParty" align="center" />
diff --git a/src/views/home/alarm/count/components/locationAnalysis.vue b/src/views/home/alarm/count/components/locationAnalysis.vue
index 4265aaf..4cd5921 100644
--- a/src/views/home/alarm/count/components/locationAnalysis.vue
+++ b/src/views/home/alarm/count/components/locationAnalysis.vue
@@ -18,7 +18,7 @@
 // 开始结束时间
 const datetimerange = ref()
 // 默认当天
-datetimerange.value = [`${dayjs().format('YYYY-MM-DD')} 00:00:00`, dayjs().format('YYYY-MM-DD HH:mm:ss')]
+// datetimerange.value = [`${dayjs().format('YYYY-MM-DD')} 00:00:00`, dayjs().format('YYYY-MM-DD HH:mm:ss')]
 watch(() => datetimerange.value, (newVal) => {
   listQuery.value.begTime = ''
   listQuery.value.endTime = ''
@@ -29,6 +29,35 @@
     }
   }
 })
+const shortcuts = [
+  {
+    text: '近一周',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setDate(start.getDate() - 7)
+      return [start, end]
+    },
+  },
+  {
+    text: '近一个月',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setMonth(start.getMonth() - 1)
+      return [start, end]
+    },
+  },
+  {
+    text: '近三个月',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setMonth(start.getMonth() - 3)
+      return [start, end]
+    },
+  },
+]
 const selectTimeType = (type: string) => {
   listQuery.value.timeType = type
 }
@@ -52,13 +81,13 @@
     <!-- 查询条件 -->
     <template #search>
       <div class="search">
-        <el-button :class="listQuery.timeType === '1' ? 'active' : ''" round size="small" @click="selectTimeType('1')">
+        <el-button :class="listQuery.timeType === '1' ? 'active' : ''" round size="small" style="margin: 0 5px;" @click="selectTimeType('1')">
           今日
         </el-button>
-        <el-button :class="listQuery.timeType === '2' ? 'active' : ''" round size="small" @click="selectTimeType('2')">
+        <el-button :class="listQuery.timeType === '2' ? 'active' : ''" round size="small" style="margin: 0 5px;" @click="selectTimeType('2')">
           本周
         </el-button>
-        <el-button :class="listQuery.timeType === '3' ? 'active' : ''" round size="small" @click="selectTimeType('3')">
+        <el-button :class="listQuery.timeType === '3' ? 'active' : ''" round size="small" style="margin: 0 5px;" @click="selectTimeType('3')">
           本月
         </el-button>
         <el-select v-model="listQuery.ledgerType" placeholder="全部类别" clearable style="width: 180px;margin: 0 5px;">
@@ -68,8 +97,8 @@
         </el-select>
         <el-date-picker
           v-model="datetimerange" type="datetimerange" format="YYYY-MM-DD HH:mm:ss"
-          style="width: 360px;margin: 0 5px;" value-format="YYYY-MM-DD HH:mm:ss" range-separator="至"
-          start-placeholder="报警开始时间" end-placeholder="报警结束时间" clearable
+          style="width: 380px;margin: 0 5px;" value-format="YYYY-MM-DD HH:mm:ss" range-separator="至"
+          start-placeholder="报警开始时间" end-placeholder="报警结束时间" clearable :shortcuts="shortcuts"
         />
         <el-button type="primary" style="margin: 0 5px;" @click="fetchData">
           搜索
@@ -80,13 +109,13 @@
       <div class="alarm-count">
         <div class="table">
           <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="type" align="center" width="140" />
+            <el-table-column label="位号" prop="tagNumber" align="center" width="160" />
             <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-column label="标签" prop="marker" align="center" width="140" />
+            <el-table-column label="报警次数" prop="alarmSum" align="center" width="120" />
           </el-table>
         </div>
       </div>
diff --git a/src/views/home/alarm/count/components/trendAnalysis.vue b/src/views/home/alarm/count/components/trendAnalysis.vue
index 73e18b0..18cfb4c 100644
--- a/src/views/home/alarm/count/components/trendAnalysis.vue
+++ b/src/views/home/alarm/count/components/trendAnalysis.vue
@@ -5,49 +5,203 @@
  -->
 <script lang="ts" setup name="TrendAnalysis">
 import layout from './layout.vue'
+import { getAlarmTrend } from '@/api/home/alarm/count'
 const listQuery = ref({
-  type: 'day',
+  timeType: '2',
+  ledgerType: '',
+  endTime: '',
+  begTime: '',
+  deptid: '',
 })
+// 开始结束时间
+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 shortcuts = [
+  {
+    text: '近一周',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setDate(start.getDate() - 7)
+      return [start, end]
+    },
+  },
+  {
+    text: '近一个月',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setMonth(start.getMonth() - 1)
+      return [start, end]
+    },
+  },
+  {
+    text: '近三个月',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setMonth(start.getMonth() - 3)
+      return [start, end]
+    },
+  },
+]
 const selectTimeType = (type: string) => {
-  listQuery.value.type = type
+  listQuery.value.timeType = type
 }
-const xAxisData = ref([])
-const data = ref([])
+const columns = ref<any[]>([
+  {
+    text: '闸井浓度超限',
+    value: 'well',
+  },
+  {
+    text: '场站浓度超限',
+    value: 'station',
+  },
+  {
+    text: '管线浓度超限',
+    value: 'pipeline',
+  },
+])
+// 类别
+const ledgerTypeList = ref<{ id: string; name: string; value: string }[]>([
+  {
+    name: '闸井',
+    id: '1',
+    value: '1',
+  },
+  {
+    name: '场站',
+    id: '2',
+    value: '2',
+  },
+  {
+    name: '管线',
+    id: '3',
+    value: '3',
+  },
+])
+const xAxisData = ref<string[]>([])
+const data = ref<any[]>([])
 const list = ref([])
-setTimeout(() => {
-  xAxisData.value = [
-    '2024-07-01 12:11:12',
-    '2024-07-02 12:11:12',
-    '2024-07-03 12:11:12',
-    '2024-07-04 12:11:12',
-    '2024-07-05 12:11:12',
-    '2024-07-06 12:11:12',
-    '2024-07-07 12:11:12',
-  ]
-  data.value = [
-    {
-      name: '闸井浓度超限',
-      data: [1, 3, 5, 1, 4, 2, 7],
-      symbol: 'emptyCircle',
-    },
-    {
-      name: '场站浓度超限',
-      data: [2, 1, 4, 1, 5, 2, 9],
-      symbol: 'emptyCircle',
-    },
-    {
-      name: '闸井浓度超限',
-      data: [4, 3, 2, 4, 7, 9, 1],
-      symbol: 'emptyCircle',
-    },
-  ]
-  list.value = xAxisData.value.map((item, index) => ({
-    alarmTime: item,
-    wellOver: data.value[0].data[index],
-    senceOver: data.value[1].data[index],
-    thirdParty: data.value[2].data[index],
-  }))
-}, 1000)
+const loading = ref(true)
+// setTimeout(() => {
+//   xAxisData.value = [
+//     '2024-07-01 12:11:12',
+//     '2024-07-02 12:11:12',
+//     '2024-07-03 12:11:12',
+//     '2024-07-04 12:11:12',
+//     '2024-07-05 12:11:12',
+//     '2024-07-06 12:11:12',
+//     '2024-07-07 12:11:12',
+//   ]
+//   data.value = [
+//     {
+//       name: '闸井浓度超限',
+//       data: [1, 3, 5, 1, 4, 2, 7],
+//       symbol: 'emptyCircle',
+//     },
+//     {
+//       name: '场站浓度超限',
+//       data: [2, 1, 4, 1, 5, 2, 9],
+//       symbol: 'emptyCircle',
+//     },
+//     {
+//       name: '闸井浓度超限',
+//       data: [4, 3, 2, 4, 7, 9, 1],
+//       symbol: 'emptyCircle',
+//     },
+//   ]
+//   list.value = xAxisData.value.map((item, index) => ({
+//     alarmTime: item,
+//     wellOver: data.value[0].data[index],
+//     senceOver: data.value[1].data[index],
+//     thirdParty: data.value[2].data[index],
+//   }))
+// }, 1000)
+const resizePage = () => {
+  setTimeout(() => {
+    const resize = new Event('resize')
+    window.dispatchEvent(resize)
+  }, 500)
+}
+const fetchData = () => {
+  loading.value = true
+  const columnsDict = {
+    闸井浓度超限: 'well',
+    场站浓度超限: 'station',
+    管线浓度超限: 'pipeline',
+  } as { [key: string]: string }
+  getAlarmTrend(listQuery.value).then((res) => {
+    console.log(res.data, '报警趋势分析')
+    xAxisData.value = res.data.map((item: any) => item.date)
+    if (!listQuery.value.ledgerType) {
+      data.value = [
+        {
+          name: '闸井浓度超限',
+          data: res.data.map((item: any) => item['闸井浓度超限']),
+        },
+        {
+          name: '场站浓度超限',
+          data: res.data.map((item: any) => item['场站浓度超限']),
+        },
+        {
+          name: '管线浓度超限',
+          data: res.data.map((item: any) => item['管线浓度超限']),
+        },
+      ]
+    }
+    else if (listQuery.value.ledgerType === '1') {
+      data.value = [
+        {
+          name: '闸井浓度超限',
+          data: res.data.map((item: any) => item['闸井浓度超限']),
+        },
+      ]
+    }
+    else if (listQuery.value.ledgerType === '2') {
+      data.value = [
+        {
+          name: '场站浓度超限',
+          data: res.data.map((item: any) => item['场站浓度超限']),
+        },
+      ]
+    }
+    else if (listQuery.value.ledgerType === '3') {
+      data.value = [
+        {
+          name: '管线浓度超限',
+          data: res.data.map((item: any) => item['管线浓度超限']),
+        },
+      ]
+    }
+    list.value = res.data.map((item: any) => ({
+      date: item.date,
+      well: item['闸井浓度超限'],
+      station: item['场站浓度超限'],
+      pipeline: item['管线浓度超限'],
+    }))
+    columns.value = data.value.map((item: any) => ({
+      text: item.name,
+      value: columnsDict[item.name],
+    }))
+    resizePage()
+    loading.value = false
+  }).catch(() => {
+    loading.value = false
+  })
+}
+onMounted(() => {
+  fetchData()
+})
 </script>
 
 <template>
@@ -56,34 +210,30 @@
     <template #search>
       <div class="search">
         <el-button
-          :class="listQuery.type === 'day' ? 'active' : ''" round size="small"
-          @click="selectTimeType('day')"
-        >
-          今日
-        </el-button>
-        <el-button
-          :class="listQuery.type === 'week' ? 'active' : ''" round size="small"
-          @click="selectTimeType('week')"
+          :class="listQuery.timeType === '2' ? 'active' : ''" round size="small" style="margin: 0 5px;"
+          @click="selectTimeType('2')"
         >
           本周
         </el-button>
         <el-button
-          :class="listQuery.type === 'month' ? 'active' : ''" round size="small"
-          @click="selectTimeType('month')"
+          :class="listQuery.timeType === '3' ? 'active' : ''" round size="small" style="margin: 0 5px;"
+          @click="selectTimeType('3')"
         >
           本月
         </el-button>
-        <el-select v-model="listQuery.keywords" placeholder="全部类别" clearable style="width: 180px;margin: 0 5px;" />
+        <el-select v-model="listQuery.ledgerType" placeholder="全部类别" clearable style="width: 180px;margin: 0 5px;">
+          <el-option v-for="item in ledgerTypeList" :key="item.id" :label="item.name" :value="item.id" />
+        </el-select>
         <dept-select
-          v-model="listQuery.keywords" placeholder="管理单位" :clearable="true"
+          v-model="listQuery.deptid" placeholder="管理单位" :clearable="true"
           style="width: 220px;margin: 0 5px;"
         />
         <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
+          style="width: 380px;margin: 0 5px;" value-format="YYYY-MM-DD HH:mm:ss" range-separator="至"
+          start-placeholder="报警开始时间" end-placeholder="报警结束时间" clearable :shortcuts="shortcuts"
         />
-        <el-button type="primary" style="margin: 0 5px;">
+        <el-button type="primary" style="margin: 0 5px;" @click="fetchData">
           搜索
         </el-button>
       </div>
@@ -94,14 +244,22 @@
           <line-chart
             :x-axis-data="xAxisData" :data="data" :gradient="false"
             :legend="{ itemWidth: 8, itemHeight: 8, type: 'scroll', orient: 'horizontal', icon: 'roundRect', right: '0', top: '10' }"
+            :grid="{
+              top: 50,
+              left: 30,
+              right: 30,
+              bottom: 20,
+              containLabel: true, // 是否包含坐标轴的刻度标签
+            }"
           />
         </div>
         <div class="table">
           <el-table border :data="list" stripe style="width: 100%;" :height="440">
-            <el-table-column label="日期" prop="alarmTime" align="center" />
-            <el-table-column label="闸井浓度超限" prop="wellOver" align="center" />
-            <el-table-column label="场站浓度超限" prop="senceOver" align="center" />
-            <el-table-column label="疑似第三方破坏" prop="thirdParty" align="center" />
+            <el-table-column label="日期" prop="date" align="center" width="190" />
+            <el-table-column
+              v-for="item in columns" :key="item.text" :label="item.text" :prop="item.value"
+              align="center"
+            />
           </el-table>
         </div>
       </div>
diff --git a/src/views/home/alarm/current/components/detail.vue b/src/views/home/alarm/current/components/detail.vue
index 4fb61d3..e200fe3 100644
--- a/src/views/home/alarm/current/components/detail.vue
+++ b/src/views/home/alarm/current/components/detail.vue
@@ -7,6 +7,7 @@
 import dayjs from 'dayjs'
 import { ElMessage } from 'element-plus'
 import { alarmProcessNode, detailAlarm } from '@/api/home/alarm/current'
+import { getAlarmDetail } from '@/api/home/alarm/history'
 import { toHumpObject } from '@/utils/String'
 import { getAlarmLevelListPage, getAlarmTypeListPage } from '@/api/home/rule/alarm'
 import { getDateDiff } from '@/utils/dayjs'
@@ -44,7 +45,7 @@
   },
   {
     text: '报警时间',
-    value: 'ts',
+    value: $route.query.type === 'history' ? 'alarmTime' : 'ts',
     align: 'center',
   },
   {
@@ -89,7 +90,7 @@
   },
   {
     text: '处置时长',
-    value: 'duration',
+    value: $route.query.type === 'history' ? 'cancelDuration' : 'duration',
     align: 'center',
   },
   {
@@ -107,8 +108,8 @@
 const fetchDetail = async () => {
   loading.value = true
   const res1 = await getAlarmLevelListPage({ offset: 1, limit: 9999 })
-  const res2 = await getAlarmTypeListPage({ offset: 1, limit: 9999 })
-  detailAlarm($route.query.id as string).then((res) => {
+  const res2 = await getAlarmTypeListPage({ offset: 1, limit: 9999 });
+  ($route.query.type === 'history' ? getAlarmDetail : detailAlarm)($route.query.id as string).then((res) => {
     detailInfo.value = toHumpObject(res.data)
     detailInfo.value.realAlarmName = detailInfo.value.realAlarm === '1' ? '报警' : '误报'
     detailInfo.value.alarmTypeName = res2.data.rows.filter((item: any) => item.id === detailInfo.value.alarmTypeId)[0]?.alarmType || ''
@@ -183,8 +184,12 @@
           </template>
           <div style="padding: 25px;">
             <el-timeline>
-              <el-timeline-item v-for="(item, index) in alarmDynamics" :key="index" :timestamp="item.approvalTime" type="primary">
-                {{ `${item.approvalPerson}${item.dept_name ? '(' : ''}${item.dept_name}${item.dept_name ? ')' : ''}${item.process_name}` }}
+              <el-timeline-item
+                v-for="(item, index) in alarmDynamics" :key="index" :timestamp="item.approvalTime"
+                type="primary"
+              >
+                {{ `${item.approvalPerson}${item.dept_name ? '(' : ''}${item.dept_name}${item.dept_name ? ')'
+                  : ''}${item.process_name}` }}
               </el-timeline-item>
             </el-timeline>
           </div>

diff --git a/src/api/home/alarm/count.ts b/src/api/home/alarm/count.ts
index 1f4b59a..d5d9244 100644
--- a/src/api/home/alarm/count.ts
+++ b/src/api/home/alarm/count.ts
@@ -34,3 +34,11 @@
     data,
   })
 }
+// 报警趋势分析
+export function getAlarmTrend(data: any) {
+  return request({
+    url: '/statics/alarmRecords/alarmTrend',
+    method: 'post',
+    data,
+  })
+}
diff --git a/src/api/home/alarm/current.ts b/src/api/home/alarm/current.ts
index ec20f64..ac3387f 100644
--- a/src/api/home/alarm/current.ts
+++ b/src/api/home/alarm/current.ts
@@ -57,3 +57,13 @@
     },
   })
 }
+// 批量删除
+export function batchDelete(ids: any) {
+  return request({
+    url: '/system/alarmRecords/batchDelete',
+    method: 'post',
+    data: {
+      ids,
+    },
+  })
+}
diff --git a/src/api/home/alarm/history.ts b/src/api/home/alarm/history.ts
index 5f55e82..44cf851 100644
--- a/src/api/home/alarm/history.ts
+++ b/src/api/home/alarm/history.ts
@@ -11,3 +11,13 @@
     data,
   })
 }
+// 详情
+export function getAlarmDetail(id: any) {
+  return request({
+    url: '/system/alarmRecords/historyAlarmDetail',
+    method: 'post',
+    data: {
+      id,
+    },
+  })
+}
diff --git a/src/components/Echart/LineChart.vue b/src/components/Echart/LineChart.vue
index 2733161..b811f29 100644
--- a/src/components/Echart/LineChart.vue
+++ b/src/components/Echart/LineChart.vue
@@ -207,7 +207,7 @@
         },
       },
       valueFormatter: (value: string | number) => {
-        return value ? value + props.unit : ''
+        return value ? value + props.unit : value === 0 ? '0' : ''
       },
     }, // 提示框
     xAxis: [
diff --git a/src/router/modules/pc.ts b/src/router/modules/pc.ts
index 9b058fa..f3edac9 100644
--- a/src/router/modules/pc.ts
+++ b/src/router/modules/pc.ts
@@ -94,6 +94,19 @@
         },
       },
       {
+        path: '/history/detail',
+        component: () => import('@/views/home/alarm/current/components/detail.vue'),
+        name: 'AlarmHistoryDetail',
+        meta: {
+          title: '报警详情',
+          icon: 'ep:key',
+          sidebar: false,
+          breadcrumb: true,
+          activeMenu: '/alarm/history',
+          auth: '/alarm/history',
+        },
+      },
+      {
         path: 'count',
         component: () => import('@/views/home/alarm/count/index.vue'),
         name: 'AlarmCount',
diff --git a/src/views/home/alarm/count/components/alarmStatistics.vue b/src/views/home/alarm/count/components/alarmStatistics.vue
index b088de2..7aa930f 100644
--- a/src/views/home/alarm/count/components/alarmStatistics.vue
+++ b/src/views/home/alarm/count/components/alarmStatistics.vue
@@ -34,13 +34,12 @@
     value: '3',
   },
 ])
-const xAxisData = ref([])
-const data = ref([])
+const xAxisData = ref<string[]>([])
+const data = ref<any[]>([])
 const list = ref([])
 const loading = ref(true)
 // 开始结束时间
 const datetimerange = ref()
-// 默认当天
 watch(() => datetimerange.value, (newVal) => {
   listQuery.value.begTime = ''
   listQuery.value.endTime = ''
@@ -51,6 +50,35 @@
     }
   }
 })
+const shortcuts = [
+  {
+    text: '近一周',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setDate(start.getDate() - 7)
+      return [start, end]
+    },
+  },
+  {
+    text: '近一个月',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setMonth(start.getMonth() - 1)
+      return [start, end]
+    },
+  },
+  {
+    text: '近三个月',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setMonth(start.getMonth() - 3)
+      return [start, end]
+    },
+  },
+]
 // setTimeout(() => {
 //   xAxisData.value = [
 //     '闸井浓度超限', '场站浓度超限', '场站火焰报警', '疑似第三方破坏', '场站烟雾报警',
@@ -66,10 +94,25 @@
 //     value: data.value[0].data[index],
 //   }))
 // }, 1000)
+const resizePage = () => {
+  setTimeout(() => {
+    const resize = new Event('resize')
+    window.dispatchEvent(resize)
+  }, 500)
+}
 const fetchData = () => {
   loading.value = true
   getAlarmType(listQuery.value).then((res) => {
-    console.log(res.data, '各类报警统计')
+    // console.log(res.data, '各类报警统计')
+    xAxisData.value = res.data.map((item: any) => item.name)
+    data.value = [
+      {
+        name: '报警数量',
+        data: res.data.map((item: any) => item.value),
+      },
+    ]
+    list.value = res.data
+    resizePage
     loading.value = false
   }).catch(() => {
     loading.value = false
@@ -105,8 +148,8 @@
           style="width: 220px;margin: 0 5px;"
         />
         <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="至"
+          v-model="datetimerange" type="datetimerange" format="YYYY-MM-DD HH:mm:ss" :shortcuts="shortcuts"
+          style="width: 380px;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;" @click="fetchData">
@@ -118,8 +161,8 @@
       <div v-loading="loading" class="alarm-count">
         <div class="bar">
           <bar-chart-vertical
-            v-show="xAxisData.length"
-            :x-axis-data="xAxisData" :bar-coner="0" :data="data" :colors="[]" :bar-width="15"
+            v-show="xAxisData.length" :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' }"
             :grid="{
               top: 50,
@@ -133,7 +176,7 @@
         </div>
         <div class="table">
           <el-table border :data="list" stripe style="width: 100%;" :height="440">
-            <el-table-column label="报警类型" prop="alarmType" align="center" />
+            <el-table-column label="报警类型" prop="name" align="center" />
             <el-table-column label="报警数量" prop="value" align="center" />
           </el-table>
         </div>
diff --git a/src/views/home/alarm/count/components/deptCount.vue b/src/views/home/alarm/count/components/deptCount.vue
index 1ca5482..798bfd2 100644
--- a/src/views/home/alarm/count/components/deptCount.vue
+++ b/src/views/home/alarm/count/components/deptCount.vue
@@ -5,40 +5,123 @@
  -->
 <script lang="ts" setup name="AlarmCount">
 import layout from './layout.vue'
+import { getAlarmCompany } from '@/api/home/alarm/count'
 const listQuery = ref({
-  type: 'day',
+  begTime: '',
+  endTime: '',
+  ledgerType: '',
+  timeType: '1',
 })
 const selectTimeType = (type: string) => {
-  listQuery.value.type = type
+  listQuery.value.timeType = type
 }
+// 开始结束时间
+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 shortcuts = [
+  {
+    text: '近一周',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setDate(start.getDate() - 7)
+      return [start, end]
+    },
+  },
+  {
+    text: '近一个月',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setMonth(start.getMonth() - 1)
+      return [start, end]
+    },
+  },
+  {
+    text: '近三个月',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setMonth(start.getMonth() - 3)
+      return [start, end]
+    },
+  },
+]
+// 类别
+const ledgerTypeList = ref<{ id: string; name: string; value: string }[]>([
+  {
+    name: '闸井',
+    id: '1',
+    value: '1',
+  },
+  {
+    name: '场站',
+    id: '2',
+    value: '2',
+  },
+  {
+    name: '管线',
+    id: '3',
+    value: '3',
+  },
+])
 const xAxisData = ref([])
 const data = ref([])
 const list = ref([])
-setTimeout(() => {
-  xAxisData.value = [
-    '第一分公司', '第二分公司', '第三分公司', '第四分公司', '第五分公司',
-  ]
-  data.value = [
-    {
-      name: '闸井浓度超限',
-      data: [1, 8, 5, 8, 4],
-    },
-    {
-      name: '场站浓度超限',
-      data: [8, 3, 6, 1, 7],
-    },
-    {
-      name: '疑似第三方破坏',
-      data: [4, 7, 5, 9, 4],
-    },
-  ]
-  list.value = xAxisData.value.map((item, index) => ({
-    dept: item,
-    wellOver: data.value[0].data[index],
-    senceOver: data.value[1].data[index],
-    thirdParty: data.value[2].data[index],
-  }))
-}, 1000)
+const loading = ref(true)
+// setTimeout(() => {
+//   xAxisData.value = [
+//     '第一分公司', '第二分公司', '第三分公司', '第四分公司', '第五分公司',
+//   ]
+//   data.value = [
+//     {
+//       name: '闸井浓度超限',
+//       data: [1, 8, 5, 8, 4],
+//     },
+//     {
+//       name: '场站浓度超限',
+//       data: [8, 3, 6, 1, 7],
+//     },
+//     {
+//       name: '疑似第三方破坏',
+//       data: [4, 7, 5, 9, 4],
+//     },
+//   ]
+//   list.value = xAxisData.value.map((item, index) => ({
+//     dept: item,
+//     wellOver: data.value[0].data[index],
+//     senceOver: data.value[1].data[index],
+//     thirdParty: data.value[2].data[index],
+//   }))
+// }, 1000)
+const resizePage = () => {
+  setTimeout(() => {
+    const resize = new Event('resize')
+    window.dispatchEvent(resize)
+  }, 500)
+}
+const fetchData = () => {
+  loading.value = true
+  getAlarmCompany(listQuery.value).then((res) => {
+    console.log(res.data, '各单位报警统计')
+    resizePage()
+    loading.value = false
+  }).catch(() => {
+    loading.value = false
+  })
+}
+onMounted(() => {
+  fetchData()
+})
 </script>
 
 <template>
@@ -47,49 +130,59 @@
     <template #search>
       <div class="search">
         <el-button
-          :class="listQuery.type === 'day' ? 'active' : ''" round size="small"
-          @click="selectTimeType('day')"
+          :class="listQuery.timeType === '1' ? 'active' : ''" round size="small"
+          style="margin: 0 5px;"
+          @click="selectTimeType('1')"
         >
           今日
         </el-button>
         <el-button
-          :class="listQuery.type === 'week' ? 'active' : ''" round size="small"
-          @click="selectTimeType('week')"
+          :class="listQuery.timeType === '2' ? 'active' : ''" round size="small"
+          style="margin: 0 5px;"
+          @click="selectTimeType('2')"
         >
           本周
         </el-button>
         <el-button
-          :class="listQuery.type === 'month' ? 'active' : ''" round size="small"
-          @click="selectTimeType('month')"
+          :class="listQuery.timeType === '3' ? 'active' : ''" round size="small"
+          style="margin: 0 5px;"
+          @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 v-for="item in ledgerTypeList" :key="item.id" :label="item.name" :value="item.id" />
+        </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
+          style="width: 380px;margin: 0 5px;" value-format="YYYY-MM-DD HH:mm:ss" range-separator="至"
+          start-placeholder="报警开始时间" end-placeholder="报警结束时间" clearable :shortcuts="shortcuts"
         />
-        <el-button type="primary" style="margin: 0 5px;">
+        <el-button type="primary" style="margin: 0 5px;" @click="fetchData">
           搜索
         </el-button>
       </div>
     </template>
     <template #content>
-      <div class="alarm-count">
+      <div v-loading="loading" class="alarm-count">
         <div class="bar">
           <bar-chart-vertical
+            v-show="xAxisData.length"
             :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' }"
+            :grid="{
+              top: 50,
+              left: 30,
+              right: 30,
+              bottom: 20,
+              containLabel: true, // 是否包含坐标轴的刻度标签
+            }"
           />
+          <el-empty v-show="!xAxisData.length" description="暂无数据" />
         </div>
         <div class="table">
           <el-table border :data="list" stripe style="width: 100%;" :height="440">
-            <el-table-column label="管理单位" prop="dept" align="center" />
+            <el-table-column label="管理单位" prop="dept" align="center" width="200" />
             <el-table-column label="闸井浓度超限" prop="wellOver" align="center" />
             <el-table-column label="场站浓度超限" prop="senceOver" align="center" />
             <el-table-column label="疑似第三方破坏" prop="thirdParty" align="center" />
diff --git a/src/views/home/alarm/count/components/locationAnalysis.vue b/src/views/home/alarm/count/components/locationAnalysis.vue
index 4265aaf..4cd5921 100644
--- a/src/views/home/alarm/count/components/locationAnalysis.vue
+++ b/src/views/home/alarm/count/components/locationAnalysis.vue
@@ -18,7 +18,7 @@
 // 开始结束时间
 const datetimerange = ref()
 // 默认当天
-datetimerange.value = [`${dayjs().format('YYYY-MM-DD')} 00:00:00`, dayjs().format('YYYY-MM-DD HH:mm:ss')]
+// datetimerange.value = [`${dayjs().format('YYYY-MM-DD')} 00:00:00`, dayjs().format('YYYY-MM-DD HH:mm:ss')]
 watch(() => datetimerange.value, (newVal) => {
   listQuery.value.begTime = ''
   listQuery.value.endTime = ''
@@ -29,6 +29,35 @@
     }
   }
 })
+const shortcuts = [
+  {
+    text: '近一周',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setDate(start.getDate() - 7)
+      return [start, end]
+    },
+  },
+  {
+    text: '近一个月',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setMonth(start.getMonth() - 1)
+      return [start, end]
+    },
+  },
+  {
+    text: '近三个月',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setMonth(start.getMonth() - 3)
+      return [start, end]
+    },
+  },
+]
 const selectTimeType = (type: string) => {
   listQuery.value.timeType = type
 }
@@ -52,13 +81,13 @@
     <!-- 查询条件 -->
     <template #search>
       <div class="search">
-        <el-button :class="listQuery.timeType === '1' ? 'active' : ''" round size="small" @click="selectTimeType('1')">
+        <el-button :class="listQuery.timeType === '1' ? 'active' : ''" round size="small" style="margin: 0 5px;" @click="selectTimeType('1')">
           今日
         </el-button>
-        <el-button :class="listQuery.timeType === '2' ? 'active' : ''" round size="small" @click="selectTimeType('2')">
+        <el-button :class="listQuery.timeType === '2' ? 'active' : ''" round size="small" style="margin: 0 5px;" @click="selectTimeType('2')">
           本周
         </el-button>
-        <el-button :class="listQuery.timeType === '3' ? 'active' : ''" round size="small" @click="selectTimeType('3')">
+        <el-button :class="listQuery.timeType === '3' ? 'active' : ''" round size="small" style="margin: 0 5px;" @click="selectTimeType('3')">
           本月
         </el-button>
         <el-select v-model="listQuery.ledgerType" placeholder="全部类别" clearable style="width: 180px;margin: 0 5px;">
@@ -68,8 +97,8 @@
         </el-select>
         <el-date-picker
           v-model="datetimerange" type="datetimerange" format="YYYY-MM-DD HH:mm:ss"
-          style="width: 360px;margin: 0 5px;" value-format="YYYY-MM-DD HH:mm:ss" range-separator="至"
-          start-placeholder="报警开始时间" end-placeholder="报警结束时间" clearable
+          style="width: 380px;margin: 0 5px;" value-format="YYYY-MM-DD HH:mm:ss" range-separator="至"
+          start-placeholder="报警开始时间" end-placeholder="报警结束时间" clearable :shortcuts="shortcuts"
         />
         <el-button type="primary" style="margin: 0 5px;" @click="fetchData">
           搜索
@@ -80,13 +109,13 @@
       <div class="alarm-count">
         <div class="table">
           <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="type" align="center" width="140" />
+            <el-table-column label="位号" prop="tagNumber" align="center" width="160" />
             <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-column label="标签" prop="marker" align="center" width="140" />
+            <el-table-column label="报警次数" prop="alarmSum" align="center" width="120" />
           </el-table>
         </div>
       </div>
diff --git a/src/views/home/alarm/count/components/trendAnalysis.vue b/src/views/home/alarm/count/components/trendAnalysis.vue
index 73e18b0..18cfb4c 100644
--- a/src/views/home/alarm/count/components/trendAnalysis.vue
+++ b/src/views/home/alarm/count/components/trendAnalysis.vue
@@ -5,49 +5,203 @@
  -->
 <script lang="ts" setup name="TrendAnalysis">
 import layout from './layout.vue'
+import { getAlarmTrend } from '@/api/home/alarm/count'
 const listQuery = ref({
-  type: 'day',
+  timeType: '2',
+  ledgerType: '',
+  endTime: '',
+  begTime: '',
+  deptid: '',
 })
+// 开始结束时间
+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 shortcuts = [
+  {
+    text: '近一周',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setDate(start.getDate() - 7)
+      return [start, end]
+    },
+  },
+  {
+    text: '近一个月',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setMonth(start.getMonth() - 1)
+      return [start, end]
+    },
+  },
+  {
+    text: '近三个月',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setMonth(start.getMonth() - 3)
+      return [start, end]
+    },
+  },
+]
 const selectTimeType = (type: string) => {
-  listQuery.value.type = type
+  listQuery.value.timeType = type
 }
-const xAxisData = ref([])
-const data = ref([])
+const columns = ref<any[]>([
+  {
+    text: '闸井浓度超限',
+    value: 'well',
+  },
+  {
+    text: '场站浓度超限',
+    value: 'station',
+  },
+  {
+    text: '管线浓度超限',
+    value: 'pipeline',
+  },
+])
+// 类别
+const ledgerTypeList = ref<{ id: string; name: string; value: string }[]>([
+  {
+    name: '闸井',
+    id: '1',
+    value: '1',
+  },
+  {
+    name: '场站',
+    id: '2',
+    value: '2',
+  },
+  {
+    name: '管线',
+    id: '3',
+    value: '3',
+  },
+])
+const xAxisData = ref<string[]>([])
+const data = ref<any[]>([])
 const list = ref([])
-setTimeout(() => {
-  xAxisData.value = [
-    '2024-07-01 12:11:12',
-    '2024-07-02 12:11:12',
-    '2024-07-03 12:11:12',
-    '2024-07-04 12:11:12',
-    '2024-07-05 12:11:12',
-    '2024-07-06 12:11:12',
-    '2024-07-07 12:11:12',
-  ]
-  data.value = [
-    {
-      name: '闸井浓度超限',
-      data: [1, 3, 5, 1, 4, 2, 7],
-      symbol: 'emptyCircle',
-    },
-    {
-      name: '场站浓度超限',
-      data: [2, 1, 4, 1, 5, 2, 9],
-      symbol: 'emptyCircle',
-    },
-    {
-      name: '闸井浓度超限',
-      data: [4, 3, 2, 4, 7, 9, 1],
-      symbol: 'emptyCircle',
-    },
-  ]
-  list.value = xAxisData.value.map((item, index) => ({
-    alarmTime: item,
-    wellOver: data.value[0].data[index],
-    senceOver: data.value[1].data[index],
-    thirdParty: data.value[2].data[index],
-  }))
-}, 1000)
+const loading = ref(true)
+// setTimeout(() => {
+//   xAxisData.value = [
+//     '2024-07-01 12:11:12',
+//     '2024-07-02 12:11:12',
+//     '2024-07-03 12:11:12',
+//     '2024-07-04 12:11:12',
+//     '2024-07-05 12:11:12',
+//     '2024-07-06 12:11:12',
+//     '2024-07-07 12:11:12',
+//   ]
+//   data.value = [
+//     {
+//       name: '闸井浓度超限',
+//       data: [1, 3, 5, 1, 4, 2, 7],
+//       symbol: 'emptyCircle',
+//     },
+//     {
+//       name: '场站浓度超限',
+//       data: [2, 1, 4, 1, 5, 2, 9],
+//       symbol: 'emptyCircle',
+//     },
+//     {
+//       name: '闸井浓度超限',
+//       data: [4, 3, 2, 4, 7, 9, 1],
+//       symbol: 'emptyCircle',
+//     },
+//   ]
+//   list.value = xAxisData.value.map((item, index) => ({
+//     alarmTime: item,
+//     wellOver: data.value[0].data[index],
+//     senceOver: data.value[1].data[index],
+//     thirdParty: data.value[2].data[index],
+//   }))
+// }, 1000)
+const resizePage = () => {
+  setTimeout(() => {
+    const resize = new Event('resize')
+    window.dispatchEvent(resize)
+  }, 500)
+}
+const fetchData = () => {
+  loading.value = true
+  const columnsDict = {
+    闸井浓度超限: 'well',
+    场站浓度超限: 'station',
+    管线浓度超限: 'pipeline',
+  } as { [key: string]: string }
+  getAlarmTrend(listQuery.value).then((res) => {
+    console.log(res.data, '报警趋势分析')
+    xAxisData.value = res.data.map((item: any) => item.date)
+    if (!listQuery.value.ledgerType) {
+      data.value = [
+        {
+          name: '闸井浓度超限',
+          data: res.data.map((item: any) => item['闸井浓度超限']),
+        },
+        {
+          name: '场站浓度超限',
+          data: res.data.map((item: any) => item['场站浓度超限']),
+        },
+        {
+          name: '管线浓度超限',
+          data: res.data.map((item: any) => item['管线浓度超限']),
+        },
+      ]
+    }
+    else if (listQuery.value.ledgerType === '1') {
+      data.value = [
+        {
+          name: '闸井浓度超限',
+          data: res.data.map((item: any) => item['闸井浓度超限']),
+        },
+      ]
+    }
+    else if (listQuery.value.ledgerType === '2') {
+      data.value = [
+        {
+          name: '场站浓度超限',
+          data: res.data.map((item: any) => item['场站浓度超限']),
+        },
+      ]
+    }
+    else if (listQuery.value.ledgerType === '3') {
+      data.value = [
+        {
+          name: '管线浓度超限',
+          data: res.data.map((item: any) => item['管线浓度超限']),
+        },
+      ]
+    }
+    list.value = res.data.map((item: any) => ({
+      date: item.date,
+      well: item['闸井浓度超限'],
+      station: item['场站浓度超限'],
+      pipeline: item['管线浓度超限'],
+    }))
+    columns.value = data.value.map((item: any) => ({
+      text: item.name,
+      value: columnsDict[item.name],
+    }))
+    resizePage()
+    loading.value = false
+  }).catch(() => {
+    loading.value = false
+  })
+}
+onMounted(() => {
+  fetchData()
+})
 </script>
 
 <template>
@@ -56,34 +210,30 @@
     <template #search>
       <div class="search">
         <el-button
-          :class="listQuery.type === 'day' ? 'active' : ''" round size="small"
-          @click="selectTimeType('day')"
-        >
-          今日
-        </el-button>
-        <el-button
-          :class="listQuery.type === 'week' ? 'active' : ''" round size="small"
-          @click="selectTimeType('week')"
+          :class="listQuery.timeType === '2' ? 'active' : ''" round size="small" style="margin: 0 5px;"
+          @click="selectTimeType('2')"
         >
           本周
         </el-button>
         <el-button
-          :class="listQuery.type === 'month' ? 'active' : ''" round size="small"
-          @click="selectTimeType('month')"
+          :class="listQuery.timeType === '3' ? 'active' : ''" round size="small" style="margin: 0 5px;"
+          @click="selectTimeType('3')"
         >
           本月
         </el-button>
-        <el-select v-model="listQuery.keywords" placeholder="全部类别" clearable style="width: 180px;margin: 0 5px;" />
+        <el-select v-model="listQuery.ledgerType" placeholder="全部类别" clearable style="width: 180px;margin: 0 5px;">
+          <el-option v-for="item in ledgerTypeList" :key="item.id" :label="item.name" :value="item.id" />
+        </el-select>
         <dept-select
-          v-model="listQuery.keywords" placeholder="管理单位" :clearable="true"
+          v-model="listQuery.deptid" placeholder="管理单位" :clearable="true"
           style="width: 220px;margin: 0 5px;"
         />
         <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
+          style="width: 380px;margin: 0 5px;" value-format="YYYY-MM-DD HH:mm:ss" range-separator="至"
+          start-placeholder="报警开始时间" end-placeholder="报警结束时间" clearable :shortcuts="shortcuts"
         />
-        <el-button type="primary" style="margin: 0 5px;">
+        <el-button type="primary" style="margin: 0 5px;" @click="fetchData">
           搜索
         </el-button>
       </div>
@@ -94,14 +244,22 @@
           <line-chart
             :x-axis-data="xAxisData" :data="data" :gradient="false"
             :legend="{ itemWidth: 8, itemHeight: 8, type: 'scroll', orient: 'horizontal', icon: 'roundRect', right: '0', top: '10' }"
+            :grid="{
+              top: 50,
+              left: 30,
+              right: 30,
+              bottom: 20,
+              containLabel: true, // 是否包含坐标轴的刻度标签
+            }"
           />
         </div>
         <div class="table">
           <el-table border :data="list" stripe style="width: 100%;" :height="440">
-            <el-table-column label="日期" prop="alarmTime" align="center" />
-            <el-table-column label="闸井浓度超限" prop="wellOver" align="center" />
-            <el-table-column label="场站浓度超限" prop="senceOver" align="center" />
-            <el-table-column label="疑似第三方破坏" prop="thirdParty" align="center" />
+            <el-table-column label="日期" prop="date" align="center" width="190" />
+            <el-table-column
+              v-for="item in columns" :key="item.text" :label="item.text" :prop="item.value"
+              align="center"
+            />
           </el-table>
         </div>
       </div>
diff --git a/src/views/home/alarm/current/components/detail.vue b/src/views/home/alarm/current/components/detail.vue
index 4fb61d3..e200fe3 100644
--- a/src/views/home/alarm/current/components/detail.vue
+++ b/src/views/home/alarm/current/components/detail.vue
@@ -7,6 +7,7 @@
 import dayjs from 'dayjs'
 import { ElMessage } from 'element-plus'
 import { alarmProcessNode, detailAlarm } from '@/api/home/alarm/current'
+import { getAlarmDetail } from '@/api/home/alarm/history'
 import { toHumpObject } from '@/utils/String'
 import { getAlarmLevelListPage, getAlarmTypeListPage } from '@/api/home/rule/alarm'
 import { getDateDiff } from '@/utils/dayjs'
@@ -44,7 +45,7 @@
   },
   {
     text: '报警时间',
-    value: 'ts',
+    value: $route.query.type === 'history' ? 'alarmTime' : 'ts',
     align: 'center',
   },
   {
@@ -89,7 +90,7 @@
   },
   {
     text: '处置时长',
-    value: 'duration',
+    value: $route.query.type === 'history' ? 'cancelDuration' : 'duration',
     align: 'center',
   },
   {
@@ -107,8 +108,8 @@
 const fetchDetail = async () => {
   loading.value = true
   const res1 = await getAlarmLevelListPage({ offset: 1, limit: 9999 })
-  const res2 = await getAlarmTypeListPage({ offset: 1, limit: 9999 })
-  detailAlarm($route.query.id as string).then((res) => {
+  const res2 = await getAlarmTypeListPage({ offset: 1, limit: 9999 });
+  ($route.query.type === 'history' ? getAlarmDetail : detailAlarm)($route.query.id as string).then((res) => {
     detailInfo.value = toHumpObject(res.data)
     detailInfo.value.realAlarmName = detailInfo.value.realAlarm === '1' ? '报警' : '误报'
     detailInfo.value.alarmTypeName = res2.data.rows.filter((item: any) => item.id === detailInfo.value.alarmTypeId)[0]?.alarmType || ''
@@ -183,8 +184,12 @@
           </template>
           <div style="padding: 25px;">
             <el-timeline>
-              <el-timeline-item v-for="(item, index) in alarmDynamics" :key="index" :timestamp="item.approvalTime" type="primary">
-                {{ `${item.approvalPerson}${item.dept_name ? '(' : ''}${item.dept_name}${item.dept_name ? ')' : ''}${item.process_name}` }}
+              <el-timeline-item
+                v-for="(item, index) in alarmDynamics" :key="index" :timestamp="item.approvalTime"
+                type="primary"
+              >
+                {{ `${item.approvalPerson}${item.dept_name ? '(' : ''}${item.dept_name}${item.dept_name ? ')'
+                  : ''}${item.process_name}` }}
               </el-timeline-item>
             </el-timeline>
           </div>
diff --git a/src/views/home/alarm/current/index.vue b/src/views/home/alarm/current/index.vue
index 52b2be1..8b36a01 100644
--- a/src/views/home/alarm/current/index.vue
+++ b/src/views/home/alarm/current/index.vue
@@ -4,10 +4,10 @@
   Date: 2023-06-28
  -->
 <script lang="ts" setup name="CurrentAlarm">
-import { ElMessage } from 'element-plus'
+import { ElMessage, ElMessageBox } from 'element-plus'
 import { ArrowLeftBold, ArrowRightBold } from '@element-plus/icons-vue'
 import MapCom from './components/map.vue'
-import { getCurrentAlarmListPage, viewAlarm } from '@/api/home/alarm/current'
+import { batchDelete, getCurrentAlarmListPage, viewAlarm } from '@/api/home/alarm/current'
 import { getDictByCode } from '@/api/system/dict'
 import { getAlarmLevelListPage, getAlarmTypeListPage } from '@/api/home/rule/alarm'
 import { getDeviceTypeListPage } from '@/api/home/device/type'
@@ -66,6 +66,35 @@
     }
   }
 })
+const shortcuts = [
+  {
+    text: '近一周',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setDate(start.getDate() - 7)
+      return [start, end]
+    },
+  },
+  {
+    text: '近一个月',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setMonth(start.getMonth() - 1)
+      return [start, end]
+    },
+  },
+  {
+    text: '近三个月',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setMonth(start.getMonth() - 3)
+      return [start, end]
+    },
+  },
+]
 // 查询数据
 const fetchData = () => {
   loadingTable.value = true
@@ -140,8 +169,8 @@
 const detail = (row: any) => {
   mapData.value = row
   switchMode('map')
-  row.lngGaode = '116.398043'
-  row.latGaode = '39.901552'
+  // row.lngGaode = '116.398043'
+  // row.latGaode = '39.901552'
   // 绘制点
   const draw = () => {
     mapRef.value.mapRef.removeMarker()
@@ -209,6 +238,35 @@
   })
 }
 fetchDict()
+const { proxy } = getCurrentInstance() as any
+// 多选
+const multipleTable = ref([])
+const handleSelectionChange = (val: any) => {
+  console.log(val, '多选数据')
+  multipleTable.value = val
+}
+// 批量删除
+const batchDeleteRow = () => {
+  if (!multipleTable.value.length) {
+    ElMessage.warning('请先选中数据')
+    return
+  }
+  ElMessageBox.confirm(
+    '确定要删除选中的数据吗？',
+    '确认操作',
+    {
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+      type: 'warning',
+    },
+  ).then(() => {
+    batchDelete(multipleTable.value.map((item: any) => item.id)).then(() => {
+      ElMessage.success('操作成功')
+      multipleTable.value = []
+      fetchData()
+    })
+  })
+}
 </script>
 
 <template>
@@ -255,7 +313,7 @@
       </search-item>
       <search-item>
         <el-date-picker
-          v-model="datetimerange" type="datetimerange" format="YYYY-MM-DD HH:mm:ss"
+          v-model="datetimerange" type="datetimerange" format="YYYY-MM-DD HH:mm:ss" :shortcuts="shortcuts"
           value-format="YYYY-MM-DD HH:mm:ss" range-separator="至" start-placeholder="报警开始时间" end-placeholder="报警结束时间"
           clearable
         />
@@ -274,6 +332,9 @@
           <template #btns-right>
             <!-- 操作 -->
             <div>
+              <el-button v-if="proxy.hasPerm('/alarm/current/delete')" type="primary" @click="batchDeleteRow">
+                批量删除
+              </el-button>
               <el-button type="primary">
                 导出
               </el-button>
@@ -282,7 +343,10 @@
           <!-- 查询结果Table显示 -->
           <normal-table
             :data="list1" :total="total" :columns="columnsConfig" :query="listQuery"
-            :list-loading="loadingTable" :height="tableHeight - 50 - 70" @change="changePage"
+            :list-loading="loadingTable" :height="tableHeight - 50 - 70"
+            :is-multi="proxy.hasPerm('/alarm/current/delete')"
+            :is-showmulti-select="proxy.hasPerm('/alarm/current/delete')" @change="changePage"
+            @multiSelect="handleSelectionChange"
           >
             <template #preColumns>
               <el-table-column label="序号" width="55" align="center">

diff --git a/src/api/home/alarm/count.ts b/src/api/home/alarm/count.ts
index 1f4b59a..d5d9244 100644
--- a/src/api/home/alarm/count.ts
+++ b/src/api/home/alarm/count.ts
@@ -34,3 +34,11 @@
     data,
   })
 }
+// 报警趋势分析
+export function getAlarmTrend(data: any) {
+  return request({
+    url: '/statics/alarmRecords/alarmTrend',
+    method: 'post',
+    data,
+  })
+}
diff --git a/src/api/home/alarm/current.ts b/src/api/home/alarm/current.ts
index ec20f64..ac3387f 100644
--- a/src/api/home/alarm/current.ts
+++ b/src/api/home/alarm/current.ts
@@ -57,3 +57,13 @@
     },
   })
 }
+// 批量删除
+export function batchDelete(ids: any) {
+  return request({
+    url: '/system/alarmRecords/batchDelete',
+    method: 'post',
+    data: {
+      ids,
+    },
+  })
+}
diff --git a/src/api/home/alarm/history.ts b/src/api/home/alarm/history.ts
index 5f55e82..44cf851 100644
--- a/src/api/home/alarm/history.ts
+++ b/src/api/home/alarm/history.ts
@@ -11,3 +11,13 @@
     data,
   })
 }
+// 详情
+export function getAlarmDetail(id: any) {
+  return request({
+    url: '/system/alarmRecords/historyAlarmDetail',
+    method: 'post',
+    data: {
+      id,
+    },
+  })
+}
diff --git a/src/components/Echart/LineChart.vue b/src/components/Echart/LineChart.vue
index 2733161..b811f29 100644
--- a/src/components/Echart/LineChart.vue
+++ b/src/components/Echart/LineChart.vue
@@ -207,7 +207,7 @@
         },
       },
       valueFormatter: (value: string | number) => {
-        return value ? value + props.unit : ''
+        return value ? value + props.unit : value === 0 ? '0' : ''
       },
     }, // 提示框
     xAxis: [
diff --git a/src/router/modules/pc.ts b/src/router/modules/pc.ts
index 9b058fa..f3edac9 100644
--- a/src/router/modules/pc.ts
+++ b/src/router/modules/pc.ts
@@ -94,6 +94,19 @@
         },
       },
       {
+        path: '/history/detail',
+        component: () => import('@/views/home/alarm/current/components/detail.vue'),
+        name: 'AlarmHistoryDetail',
+        meta: {
+          title: '报警详情',
+          icon: 'ep:key',
+          sidebar: false,
+          breadcrumb: true,
+          activeMenu: '/alarm/history',
+          auth: '/alarm/history',
+        },
+      },
+      {
         path: 'count',
         component: () => import('@/views/home/alarm/count/index.vue'),
         name: 'AlarmCount',
diff --git a/src/views/home/alarm/count/components/alarmStatistics.vue b/src/views/home/alarm/count/components/alarmStatistics.vue
index b088de2..7aa930f 100644
--- a/src/views/home/alarm/count/components/alarmStatistics.vue
+++ b/src/views/home/alarm/count/components/alarmStatistics.vue
@@ -34,13 +34,12 @@
     value: '3',
   },
 ])
-const xAxisData = ref([])
-const data = ref([])
+const xAxisData = ref<string[]>([])
+const data = ref<any[]>([])
 const list = ref([])
 const loading = ref(true)
 // 开始结束时间
 const datetimerange = ref()
-// 默认当天
 watch(() => datetimerange.value, (newVal) => {
   listQuery.value.begTime = ''
   listQuery.value.endTime = ''
@@ -51,6 +50,35 @@
     }
   }
 })
+const shortcuts = [
+  {
+    text: '近一周',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setDate(start.getDate() - 7)
+      return [start, end]
+    },
+  },
+  {
+    text: '近一个月',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setMonth(start.getMonth() - 1)
+      return [start, end]
+    },
+  },
+  {
+    text: '近三个月',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setMonth(start.getMonth() - 3)
+      return [start, end]
+    },
+  },
+]
 // setTimeout(() => {
 //   xAxisData.value = [
 //     '闸井浓度超限', '场站浓度超限', '场站火焰报警', '疑似第三方破坏', '场站烟雾报警',
@@ -66,10 +94,25 @@
 //     value: data.value[0].data[index],
 //   }))
 // }, 1000)
+const resizePage = () => {
+  setTimeout(() => {
+    const resize = new Event('resize')
+    window.dispatchEvent(resize)
+  }, 500)
+}
 const fetchData = () => {
   loading.value = true
   getAlarmType(listQuery.value).then((res) => {
-    console.log(res.data, '各类报警统计')
+    // console.log(res.data, '各类报警统计')
+    xAxisData.value = res.data.map((item: any) => item.name)
+    data.value = [
+      {
+        name: '报警数量',
+        data: res.data.map((item: any) => item.value),
+      },
+    ]
+    list.value = res.data
+    resizePage
     loading.value = false
   }).catch(() => {
     loading.value = false
@@ -105,8 +148,8 @@
           style="width: 220px;margin: 0 5px;"
         />
         <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="至"
+          v-model="datetimerange" type="datetimerange" format="YYYY-MM-DD HH:mm:ss" :shortcuts="shortcuts"
+          style="width: 380px;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;" @click="fetchData">
@@ -118,8 +161,8 @@
       <div v-loading="loading" class="alarm-count">
         <div class="bar">
           <bar-chart-vertical
-            v-show="xAxisData.length"
-            :x-axis-data="xAxisData" :bar-coner="0" :data="data" :colors="[]" :bar-width="15"
+            v-show="xAxisData.length" :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' }"
             :grid="{
               top: 50,
@@ -133,7 +176,7 @@
         </div>
         <div class="table">
           <el-table border :data="list" stripe style="width: 100%;" :height="440">
-            <el-table-column label="报警类型" prop="alarmType" align="center" />
+            <el-table-column label="报警类型" prop="name" align="center" />
             <el-table-column label="报警数量" prop="value" align="center" />
           </el-table>
         </div>
diff --git a/src/views/home/alarm/count/components/deptCount.vue b/src/views/home/alarm/count/components/deptCount.vue
index 1ca5482..798bfd2 100644
--- a/src/views/home/alarm/count/components/deptCount.vue
+++ b/src/views/home/alarm/count/components/deptCount.vue
@@ -5,40 +5,123 @@
  -->
 <script lang="ts" setup name="AlarmCount">
 import layout from './layout.vue'
+import { getAlarmCompany } from '@/api/home/alarm/count'
 const listQuery = ref({
-  type: 'day',
+  begTime: '',
+  endTime: '',
+  ledgerType: '',
+  timeType: '1',
 })
 const selectTimeType = (type: string) => {
-  listQuery.value.type = type
+  listQuery.value.timeType = type
 }
+// 开始结束时间
+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 shortcuts = [
+  {
+    text: '近一周',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setDate(start.getDate() - 7)
+      return [start, end]
+    },
+  },
+  {
+    text: '近一个月',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setMonth(start.getMonth() - 1)
+      return [start, end]
+    },
+  },
+  {
+    text: '近三个月',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setMonth(start.getMonth() - 3)
+      return [start, end]
+    },
+  },
+]
+// 类别
+const ledgerTypeList = ref<{ id: string; name: string; value: string }[]>([
+  {
+    name: '闸井',
+    id: '1',
+    value: '1',
+  },
+  {
+    name: '场站',
+    id: '2',
+    value: '2',
+  },
+  {
+    name: '管线',
+    id: '3',
+    value: '3',
+  },
+])
 const xAxisData = ref([])
 const data = ref([])
 const list = ref([])
-setTimeout(() => {
-  xAxisData.value = [
-    '第一分公司', '第二分公司', '第三分公司', '第四分公司', '第五分公司',
-  ]
-  data.value = [
-    {
-      name: '闸井浓度超限',
-      data: [1, 8, 5, 8, 4],
-    },
-    {
-      name: '场站浓度超限',
-      data: [8, 3, 6, 1, 7],
-    },
-    {
-      name: '疑似第三方破坏',
-      data: [4, 7, 5, 9, 4],
-    },
-  ]
-  list.value = xAxisData.value.map((item, index) => ({
-    dept: item,
-    wellOver: data.value[0].data[index],
-    senceOver: data.value[1].data[index],
-    thirdParty: data.value[2].data[index],
-  }))
-}, 1000)
+const loading = ref(true)
+// setTimeout(() => {
+//   xAxisData.value = [
+//     '第一分公司', '第二分公司', '第三分公司', '第四分公司', '第五分公司',
+//   ]
+//   data.value = [
+//     {
+//       name: '闸井浓度超限',
+//       data: [1, 8, 5, 8, 4],
+//     },
+//     {
+//       name: '场站浓度超限',
+//       data: [8, 3, 6, 1, 7],
+//     },
+//     {
+//       name: '疑似第三方破坏',
+//       data: [4, 7, 5, 9, 4],
+//     },
+//   ]
+//   list.value = xAxisData.value.map((item, index) => ({
+//     dept: item,
+//     wellOver: data.value[0].data[index],
+//     senceOver: data.value[1].data[index],
+//     thirdParty: data.value[2].data[index],
+//   }))
+// }, 1000)
+const resizePage = () => {
+  setTimeout(() => {
+    const resize = new Event('resize')
+    window.dispatchEvent(resize)
+  }, 500)
+}
+const fetchData = () => {
+  loading.value = true
+  getAlarmCompany(listQuery.value).then((res) => {
+    console.log(res.data, '各单位报警统计')
+    resizePage()
+    loading.value = false
+  }).catch(() => {
+    loading.value = false
+  })
+}
+onMounted(() => {
+  fetchData()
+})
 </script>
 
 <template>
@@ -47,49 +130,59 @@
     <template #search>
       <div class="search">
         <el-button
-          :class="listQuery.type === 'day' ? 'active' : ''" round size="small"
-          @click="selectTimeType('day')"
+          :class="listQuery.timeType === '1' ? 'active' : ''" round size="small"
+          style="margin: 0 5px;"
+          @click="selectTimeType('1')"
         >
           今日
         </el-button>
         <el-button
-          :class="listQuery.type === 'week' ? 'active' : ''" round size="small"
-          @click="selectTimeType('week')"
+          :class="listQuery.timeType === '2' ? 'active' : ''" round size="small"
+          style="margin: 0 5px;"
+          @click="selectTimeType('2')"
         >
           本周
         </el-button>
         <el-button
-          :class="listQuery.type === 'month' ? 'active' : ''" round size="small"
-          @click="selectTimeType('month')"
+          :class="listQuery.timeType === '3' ? 'active' : ''" round size="small"
+          style="margin: 0 5px;"
+          @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 v-for="item in ledgerTypeList" :key="item.id" :label="item.name" :value="item.id" />
+        </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
+          style="width: 380px;margin: 0 5px;" value-format="YYYY-MM-DD HH:mm:ss" range-separator="至"
+          start-placeholder="报警开始时间" end-placeholder="报警结束时间" clearable :shortcuts="shortcuts"
         />
-        <el-button type="primary" style="margin: 0 5px;">
+        <el-button type="primary" style="margin: 0 5px;" @click="fetchData">
           搜索
         </el-button>
       </div>
     </template>
     <template #content>
-      <div class="alarm-count">
+      <div v-loading="loading" class="alarm-count">
         <div class="bar">
           <bar-chart-vertical
+            v-show="xAxisData.length"
             :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' }"
+            :grid="{
+              top: 50,
+              left: 30,
+              right: 30,
+              bottom: 20,
+              containLabel: true, // 是否包含坐标轴的刻度标签
+            }"
           />
+          <el-empty v-show="!xAxisData.length" description="暂无数据" />
         </div>
         <div class="table">
           <el-table border :data="list" stripe style="width: 100%;" :height="440">
-            <el-table-column label="管理单位" prop="dept" align="center" />
+            <el-table-column label="管理单位" prop="dept" align="center" width="200" />
             <el-table-column label="闸井浓度超限" prop="wellOver" align="center" />
             <el-table-column label="场站浓度超限" prop="senceOver" align="center" />
             <el-table-column label="疑似第三方破坏" prop="thirdParty" align="center" />
diff --git a/src/views/home/alarm/count/components/locationAnalysis.vue b/src/views/home/alarm/count/components/locationAnalysis.vue
index 4265aaf..4cd5921 100644
--- a/src/views/home/alarm/count/components/locationAnalysis.vue
+++ b/src/views/home/alarm/count/components/locationAnalysis.vue
@@ -18,7 +18,7 @@
 // 开始结束时间
 const datetimerange = ref()
 // 默认当天
-datetimerange.value = [`${dayjs().format('YYYY-MM-DD')} 00:00:00`, dayjs().format('YYYY-MM-DD HH:mm:ss')]
+// datetimerange.value = [`${dayjs().format('YYYY-MM-DD')} 00:00:00`, dayjs().format('YYYY-MM-DD HH:mm:ss')]
 watch(() => datetimerange.value, (newVal) => {
   listQuery.value.begTime = ''
   listQuery.value.endTime = ''
@@ -29,6 +29,35 @@
     }
   }
 })
+const shortcuts = [
+  {
+    text: '近一周',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setDate(start.getDate() - 7)
+      return [start, end]
+    },
+  },
+  {
+    text: '近一个月',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setMonth(start.getMonth() - 1)
+      return [start, end]
+    },
+  },
+  {
+    text: '近三个月',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setMonth(start.getMonth() - 3)
+      return [start, end]
+    },
+  },
+]
 const selectTimeType = (type: string) => {
   listQuery.value.timeType = type
 }
@@ -52,13 +81,13 @@
     <!-- 查询条件 -->
     <template #search>
       <div class="search">
-        <el-button :class="listQuery.timeType === '1' ? 'active' : ''" round size="small" @click="selectTimeType('1')">
+        <el-button :class="listQuery.timeType === '1' ? 'active' : ''" round size="small" style="margin: 0 5px;" @click="selectTimeType('1')">
           今日
         </el-button>
-        <el-button :class="listQuery.timeType === '2' ? 'active' : ''" round size="small" @click="selectTimeType('2')">
+        <el-button :class="listQuery.timeType === '2' ? 'active' : ''" round size="small" style="margin: 0 5px;" @click="selectTimeType('2')">
           本周
         </el-button>
-        <el-button :class="listQuery.timeType === '3' ? 'active' : ''" round size="small" @click="selectTimeType('3')">
+        <el-button :class="listQuery.timeType === '3' ? 'active' : ''" round size="small" style="margin: 0 5px;" @click="selectTimeType('3')">
           本月
         </el-button>
         <el-select v-model="listQuery.ledgerType" placeholder="全部类别" clearable style="width: 180px;margin: 0 5px;">
@@ -68,8 +97,8 @@
         </el-select>
         <el-date-picker
           v-model="datetimerange" type="datetimerange" format="YYYY-MM-DD HH:mm:ss"
-          style="width: 360px;margin: 0 5px;" value-format="YYYY-MM-DD HH:mm:ss" range-separator="至"
-          start-placeholder="报警开始时间" end-placeholder="报警结束时间" clearable
+          style="width: 380px;margin: 0 5px;" value-format="YYYY-MM-DD HH:mm:ss" range-separator="至"
+          start-placeholder="报警开始时间" end-placeholder="报警结束时间" clearable :shortcuts="shortcuts"
         />
         <el-button type="primary" style="margin: 0 5px;" @click="fetchData">
           搜索
@@ -80,13 +109,13 @@
       <div class="alarm-count">
         <div class="table">
           <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="type" align="center" width="140" />
+            <el-table-column label="位号" prop="tagNumber" align="center" width="160" />
             <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-column label="标签" prop="marker" align="center" width="140" />
+            <el-table-column label="报警次数" prop="alarmSum" align="center" width="120" />
           </el-table>
         </div>
       </div>
diff --git a/src/views/home/alarm/count/components/trendAnalysis.vue b/src/views/home/alarm/count/components/trendAnalysis.vue
index 73e18b0..18cfb4c 100644
--- a/src/views/home/alarm/count/components/trendAnalysis.vue
+++ b/src/views/home/alarm/count/components/trendAnalysis.vue
@@ -5,49 +5,203 @@
  -->
 <script lang="ts" setup name="TrendAnalysis">
 import layout from './layout.vue'
+import { getAlarmTrend } from '@/api/home/alarm/count'
 const listQuery = ref({
-  type: 'day',
+  timeType: '2',
+  ledgerType: '',
+  endTime: '',
+  begTime: '',
+  deptid: '',
 })
+// 开始结束时间
+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 shortcuts = [
+  {
+    text: '近一周',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setDate(start.getDate() - 7)
+      return [start, end]
+    },
+  },
+  {
+    text: '近一个月',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setMonth(start.getMonth() - 1)
+      return [start, end]
+    },
+  },
+  {
+    text: '近三个月',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setMonth(start.getMonth() - 3)
+      return [start, end]
+    },
+  },
+]
 const selectTimeType = (type: string) => {
-  listQuery.value.type = type
+  listQuery.value.timeType = type
 }
-const xAxisData = ref([])
-const data = ref([])
+const columns = ref<any[]>([
+  {
+    text: '闸井浓度超限',
+    value: 'well',
+  },
+  {
+    text: '场站浓度超限',
+    value: 'station',
+  },
+  {
+    text: '管线浓度超限',
+    value: 'pipeline',
+  },
+])
+// 类别
+const ledgerTypeList = ref<{ id: string; name: string; value: string }[]>([
+  {
+    name: '闸井',
+    id: '1',
+    value: '1',
+  },
+  {
+    name: '场站',
+    id: '2',
+    value: '2',
+  },
+  {
+    name: '管线',
+    id: '3',
+    value: '3',
+  },
+])
+const xAxisData = ref<string[]>([])
+const data = ref<any[]>([])
 const list = ref([])
-setTimeout(() => {
-  xAxisData.value = [
-    '2024-07-01 12:11:12',
-    '2024-07-02 12:11:12',
-    '2024-07-03 12:11:12',
-    '2024-07-04 12:11:12',
-    '2024-07-05 12:11:12',
-    '2024-07-06 12:11:12',
-    '2024-07-07 12:11:12',
-  ]
-  data.value = [
-    {
-      name: '闸井浓度超限',
-      data: [1, 3, 5, 1, 4, 2, 7],
-      symbol: 'emptyCircle',
-    },
-    {
-      name: '场站浓度超限',
-      data: [2, 1, 4, 1, 5, 2, 9],
-      symbol: 'emptyCircle',
-    },
-    {
-      name: '闸井浓度超限',
-      data: [4, 3, 2, 4, 7, 9, 1],
-      symbol: 'emptyCircle',
-    },
-  ]
-  list.value = xAxisData.value.map((item, index) => ({
-    alarmTime: item,
-    wellOver: data.value[0].data[index],
-    senceOver: data.value[1].data[index],
-    thirdParty: data.value[2].data[index],
-  }))
-}, 1000)
+const loading = ref(true)
+// setTimeout(() => {
+//   xAxisData.value = [
+//     '2024-07-01 12:11:12',
+//     '2024-07-02 12:11:12',
+//     '2024-07-03 12:11:12',
+//     '2024-07-04 12:11:12',
+//     '2024-07-05 12:11:12',
+//     '2024-07-06 12:11:12',
+//     '2024-07-07 12:11:12',
+//   ]
+//   data.value = [
+//     {
+//       name: '闸井浓度超限',
+//       data: [1, 3, 5, 1, 4, 2, 7],
+//       symbol: 'emptyCircle',
+//     },
+//     {
+//       name: '场站浓度超限',
+//       data: [2, 1, 4, 1, 5, 2, 9],
+//       symbol: 'emptyCircle',
+//     },
+//     {
+//       name: '闸井浓度超限',
+//       data: [4, 3, 2, 4, 7, 9, 1],
+//       symbol: 'emptyCircle',
+//     },
+//   ]
+//   list.value = xAxisData.value.map((item, index) => ({
+//     alarmTime: item,
+//     wellOver: data.value[0].data[index],
+//     senceOver: data.value[1].data[index],
+//     thirdParty: data.value[2].data[index],
+//   }))
+// }, 1000)
+const resizePage = () => {
+  setTimeout(() => {
+    const resize = new Event('resize')
+    window.dispatchEvent(resize)
+  }, 500)
+}
+const fetchData = () => {
+  loading.value = true
+  const columnsDict = {
+    闸井浓度超限: 'well',
+    场站浓度超限: 'station',
+    管线浓度超限: 'pipeline',
+  } as { [key: string]: string }
+  getAlarmTrend(listQuery.value).then((res) => {
+    console.log(res.data, '报警趋势分析')
+    xAxisData.value = res.data.map((item: any) => item.date)
+    if (!listQuery.value.ledgerType) {
+      data.value = [
+        {
+          name: '闸井浓度超限',
+          data: res.data.map((item: any) => item['闸井浓度超限']),
+        },
+        {
+          name: '场站浓度超限',
+          data: res.data.map((item: any) => item['场站浓度超限']),
+        },
+        {
+          name: '管线浓度超限',
+          data: res.data.map((item: any) => item['管线浓度超限']),
+        },
+      ]
+    }
+    else if (listQuery.value.ledgerType === '1') {
+      data.value = [
+        {
+          name: '闸井浓度超限',
+          data: res.data.map((item: any) => item['闸井浓度超限']),
+        },
+      ]
+    }
+    else if (listQuery.value.ledgerType === '2') {
+      data.value = [
+        {
+          name: '场站浓度超限',
+          data: res.data.map((item: any) => item['场站浓度超限']),
+        },
+      ]
+    }
+    else if (listQuery.value.ledgerType === '3') {
+      data.value = [
+        {
+          name: '管线浓度超限',
+          data: res.data.map((item: any) => item['管线浓度超限']),
+        },
+      ]
+    }
+    list.value = res.data.map((item: any) => ({
+      date: item.date,
+      well: item['闸井浓度超限'],
+      station: item['场站浓度超限'],
+      pipeline: item['管线浓度超限'],
+    }))
+    columns.value = data.value.map((item: any) => ({
+      text: item.name,
+      value: columnsDict[item.name],
+    }))
+    resizePage()
+    loading.value = false
+  }).catch(() => {
+    loading.value = false
+  })
+}
+onMounted(() => {
+  fetchData()
+})
 </script>
 
 <template>
@@ -56,34 +210,30 @@
     <template #search>
       <div class="search">
         <el-button
-          :class="listQuery.type === 'day' ? 'active' : ''" round size="small"
-          @click="selectTimeType('day')"
-        >
-          今日
-        </el-button>
-        <el-button
-          :class="listQuery.type === 'week' ? 'active' : ''" round size="small"
-          @click="selectTimeType('week')"
+          :class="listQuery.timeType === '2' ? 'active' : ''" round size="small" style="margin: 0 5px;"
+          @click="selectTimeType('2')"
         >
           本周
         </el-button>
         <el-button
-          :class="listQuery.type === 'month' ? 'active' : ''" round size="small"
-          @click="selectTimeType('month')"
+          :class="listQuery.timeType === '3' ? 'active' : ''" round size="small" style="margin: 0 5px;"
+          @click="selectTimeType('3')"
         >
           本月
         </el-button>
-        <el-select v-model="listQuery.keywords" placeholder="全部类别" clearable style="width: 180px;margin: 0 5px;" />
+        <el-select v-model="listQuery.ledgerType" placeholder="全部类别" clearable style="width: 180px;margin: 0 5px;">
+          <el-option v-for="item in ledgerTypeList" :key="item.id" :label="item.name" :value="item.id" />
+        </el-select>
         <dept-select
-          v-model="listQuery.keywords" placeholder="管理单位" :clearable="true"
+          v-model="listQuery.deptid" placeholder="管理单位" :clearable="true"
           style="width: 220px;margin: 0 5px;"
         />
         <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
+          style="width: 380px;margin: 0 5px;" value-format="YYYY-MM-DD HH:mm:ss" range-separator="至"
+          start-placeholder="报警开始时间" end-placeholder="报警结束时间" clearable :shortcuts="shortcuts"
         />
-        <el-button type="primary" style="margin: 0 5px;">
+        <el-button type="primary" style="margin: 0 5px;" @click="fetchData">
           搜索
         </el-button>
       </div>
@@ -94,14 +244,22 @@
           <line-chart
             :x-axis-data="xAxisData" :data="data" :gradient="false"
             :legend="{ itemWidth: 8, itemHeight: 8, type: 'scroll', orient: 'horizontal', icon: 'roundRect', right: '0', top: '10' }"
+            :grid="{
+              top: 50,
+              left: 30,
+              right: 30,
+              bottom: 20,
+              containLabel: true, // 是否包含坐标轴的刻度标签
+            }"
           />
         </div>
         <div class="table">
           <el-table border :data="list" stripe style="width: 100%;" :height="440">
-            <el-table-column label="日期" prop="alarmTime" align="center" />
-            <el-table-column label="闸井浓度超限" prop="wellOver" align="center" />
-            <el-table-column label="场站浓度超限" prop="senceOver" align="center" />
-            <el-table-column label="疑似第三方破坏" prop="thirdParty" align="center" />
+            <el-table-column label="日期" prop="date" align="center" width="190" />
+            <el-table-column
+              v-for="item in columns" :key="item.text" :label="item.text" :prop="item.value"
+              align="center"
+            />
           </el-table>
         </div>
       </div>
diff --git a/src/views/home/alarm/current/components/detail.vue b/src/views/home/alarm/current/components/detail.vue
index 4fb61d3..e200fe3 100644
--- a/src/views/home/alarm/current/components/detail.vue
+++ b/src/views/home/alarm/current/components/detail.vue
@@ -7,6 +7,7 @@
 import dayjs from 'dayjs'
 import { ElMessage } from 'element-plus'
 import { alarmProcessNode, detailAlarm } from '@/api/home/alarm/current'
+import { getAlarmDetail } from '@/api/home/alarm/history'
 import { toHumpObject } from '@/utils/String'
 import { getAlarmLevelListPage, getAlarmTypeListPage } from '@/api/home/rule/alarm'
 import { getDateDiff } from '@/utils/dayjs'
@@ -44,7 +45,7 @@
   },
   {
     text: '报警时间',
-    value: 'ts',
+    value: $route.query.type === 'history' ? 'alarmTime' : 'ts',
     align: 'center',
   },
   {
@@ -89,7 +90,7 @@
   },
   {
     text: '处置时长',
-    value: 'duration',
+    value: $route.query.type === 'history' ? 'cancelDuration' : 'duration',
     align: 'center',
   },
   {
@@ -107,8 +108,8 @@
 const fetchDetail = async () => {
   loading.value = true
   const res1 = await getAlarmLevelListPage({ offset: 1, limit: 9999 })
-  const res2 = await getAlarmTypeListPage({ offset: 1, limit: 9999 })
-  detailAlarm($route.query.id as string).then((res) => {
+  const res2 = await getAlarmTypeListPage({ offset: 1, limit: 9999 });
+  ($route.query.type === 'history' ? getAlarmDetail : detailAlarm)($route.query.id as string).then((res) => {
     detailInfo.value = toHumpObject(res.data)
     detailInfo.value.realAlarmName = detailInfo.value.realAlarm === '1' ? '报警' : '误报'
     detailInfo.value.alarmTypeName = res2.data.rows.filter((item: any) => item.id === detailInfo.value.alarmTypeId)[0]?.alarmType || ''
@@ -183,8 +184,12 @@
           </template>
           <div style="padding: 25px;">
             <el-timeline>
-              <el-timeline-item v-for="(item, index) in alarmDynamics" :key="index" :timestamp="item.approvalTime" type="primary">
-                {{ `${item.approvalPerson}${item.dept_name ? '(' : ''}${item.dept_name}${item.dept_name ? ')' : ''}${item.process_name}` }}
+              <el-timeline-item
+                v-for="(item, index) in alarmDynamics" :key="index" :timestamp="item.approvalTime"
+                type="primary"
+              >
+                {{ `${item.approvalPerson}${item.dept_name ? '(' : ''}${item.dept_name}${item.dept_name ? ')'
+                  : ''}${item.process_name}` }}
               </el-timeline-item>
             </el-timeline>
           </div>
diff --git a/src/views/home/alarm/current/index.vue b/src/views/home/alarm/current/index.vue
index 52b2be1..8b36a01 100644
--- a/src/views/home/alarm/current/index.vue
+++ b/src/views/home/alarm/current/index.vue
@@ -4,10 +4,10 @@
   Date: 2023-06-28
  -->
 <script lang="ts" setup name="CurrentAlarm">
-import { ElMessage } from 'element-plus'
+import { ElMessage, ElMessageBox } from 'element-plus'
 import { ArrowLeftBold, ArrowRightBold } from '@element-plus/icons-vue'
 import MapCom from './components/map.vue'
-import { getCurrentAlarmListPage, viewAlarm } from '@/api/home/alarm/current'
+import { batchDelete, getCurrentAlarmListPage, viewAlarm } from '@/api/home/alarm/current'
 import { getDictByCode } from '@/api/system/dict'
 import { getAlarmLevelListPage, getAlarmTypeListPage } from '@/api/home/rule/alarm'
 import { getDeviceTypeListPage } from '@/api/home/device/type'
@@ -66,6 +66,35 @@
     }
   }
 })
+const shortcuts = [
+  {
+    text: '近一周',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setDate(start.getDate() - 7)
+      return [start, end]
+    },
+  },
+  {
+    text: '近一个月',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setMonth(start.getMonth() - 1)
+      return [start, end]
+    },
+  },
+  {
+    text: '近三个月',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setMonth(start.getMonth() - 3)
+      return [start, end]
+    },
+  },
+]
 // 查询数据
 const fetchData = () => {
   loadingTable.value = true
@@ -140,8 +169,8 @@
 const detail = (row: any) => {
   mapData.value = row
   switchMode('map')
-  row.lngGaode = '116.398043'
-  row.latGaode = '39.901552'
+  // row.lngGaode = '116.398043'
+  // row.latGaode = '39.901552'
   // 绘制点
   const draw = () => {
     mapRef.value.mapRef.removeMarker()
@@ -209,6 +238,35 @@
   })
 }
 fetchDict()
+const { proxy } = getCurrentInstance() as any
+// 多选
+const multipleTable = ref([])
+const handleSelectionChange = (val: any) => {
+  console.log(val, '多选数据')
+  multipleTable.value = val
+}
+// 批量删除
+const batchDeleteRow = () => {
+  if (!multipleTable.value.length) {
+    ElMessage.warning('请先选中数据')
+    return
+  }
+  ElMessageBox.confirm(
+    '确定要删除选中的数据吗？',
+    '确认操作',
+    {
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+      type: 'warning',
+    },
+  ).then(() => {
+    batchDelete(multipleTable.value.map((item: any) => item.id)).then(() => {
+      ElMessage.success('操作成功')
+      multipleTable.value = []
+      fetchData()
+    })
+  })
+}
 </script>
 
 <template>
@@ -255,7 +313,7 @@
       </search-item>
       <search-item>
         <el-date-picker
-          v-model="datetimerange" type="datetimerange" format="YYYY-MM-DD HH:mm:ss"
+          v-model="datetimerange" type="datetimerange" format="YYYY-MM-DD HH:mm:ss" :shortcuts="shortcuts"
           value-format="YYYY-MM-DD HH:mm:ss" range-separator="至" start-placeholder="报警开始时间" end-placeholder="报警结束时间"
           clearable
         />
@@ -274,6 +332,9 @@
           <template #btns-right>
             <!-- 操作 -->
             <div>
+              <el-button v-if="proxy.hasPerm('/alarm/current/delete')" type="primary" @click="batchDeleteRow">
+                批量删除
+              </el-button>
               <el-button type="primary">
                 导出
               </el-button>
@@ -282,7 +343,10 @@
           <!-- 查询结果Table显示 -->
           <normal-table
             :data="list1" :total="total" :columns="columnsConfig" :query="listQuery"
-            :list-loading="loadingTable" :height="tableHeight - 50 - 70" @change="changePage"
+            :list-loading="loadingTable" :height="tableHeight - 50 - 70"
+            :is-multi="proxy.hasPerm('/alarm/current/delete')"
+            :is-showmulti-select="proxy.hasPerm('/alarm/current/delete')" @change="changePage"
+            @multiSelect="handleSelectionChange"
           >
             <template #preColumns>
               <el-table-column label="序号" width="55" align="center">
diff --git a/src/views/home/alarm/history/index.vue b/src/views/home/alarm/history/index.vue
index 87bb167..74ca152 100644
--- a/src/views/home/alarm/history/index.vue
+++ b/src/views/home/alarm/history/index.vue
@@ -80,6 +80,35 @@
     }
   }
 })
+const shortcuts = [
+  {
+    text: '近一周',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setDate(start.getDate() - 7)
+      return [start, end]
+    },
+  },
+  {
+    text: '近一个月',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setMonth(start.getMonth() - 1)
+      return [start, end]
+    },
+  },
+  {
+    text: '近三个月',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setMonth(start.getMonth() - 3)
+      return [start, end]
+    },
+  },
+]
 // 查询数据
 const fetchData = () => {
   loadingTable.value = true
@@ -127,10 +156,11 @@
 const $router = useRouter()
 const moreData = (row: any) => {
   $router.push({
-    name: 'AlarmCurrentDetail',
+    name: 'AlarmHistoryDetail',
     query: {
       id: row.id,
       row: JSON.stringify(row),
+      type: 'history',
     },
   })
 }
@@ -218,7 +248,7 @@
       </search-item>
       <search-item>
         <el-date-picker
-          v-model="datetimerange" type="datetimerange" format="YYYY-MM-DD HH:mm:ss"
+          v-model="datetimerange" type="datetimerange" format="YYYY-MM-DD HH:mm:ss" :shortcuts="shortcuts"
           value-format="YYYY-MM-DD HH:mm:ss" range-separator="至" start-placeholder="报警开始时间" end-placeholder="报警结束时间"
           clearable
         />

diff --git a/src/api/home/alarm/count.ts b/src/api/home/alarm/count.ts
index 1f4b59a..d5d9244 100644
--- a/src/api/home/alarm/count.ts
+++ b/src/api/home/alarm/count.ts
@@ -34,3 +34,11 @@
     data,
   })
 }
+// 报警趋势分析
+export function getAlarmTrend(data: any) {
+  return request({
+    url: '/statics/alarmRecords/alarmTrend',
+    method: 'post',
+    data,
+  })
+}
diff --git a/src/api/home/alarm/current.ts b/src/api/home/alarm/current.ts
index ec20f64..ac3387f 100644
--- a/src/api/home/alarm/current.ts
+++ b/src/api/home/alarm/current.ts
@@ -57,3 +57,13 @@
     },
   })
 }
+// 批量删除
+export function batchDelete(ids: any) {
+  return request({
+    url: '/system/alarmRecords/batchDelete',
+    method: 'post',
+    data: {
+      ids,
+    },
+  })
+}
diff --git a/src/api/home/alarm/history.ts b/src/api/home/alarm/history.ts
index 5f55e82..44cf851 100644
--- a/src/api/home/alarm/history.ts
+++ b/src/api/home/alarm/history.ts
@@ -11,3 +11,13 @@
     data,
   })
 }
+// 详情
+export function getAlarmDetail(id: any) {
+  return request({
+    url: '/system/alarmRecords/historyAlarmDetail',
+    method: 'post',
+    data: {
+      id,
+    },
+  })
+}
diff --git a/src/components/Echart/LineChart.vue b/src/components/Echart/LineChart.vue
index 2733161..b811f29 100644
--- a/src/components/Echart/LineChart.vue
+++ b/src/components/Echart/LineChart.vue
@@ -207,7 +207,7 @@
         },
       },
       valueFormatter: (value: string | number) => {
-        return value ? value + props.unit : ''
+        return value ? value + props.unit : value === 0 ? '0' : ''
       },
     }, // 提示框
     xAxis: [
diff --git a/src/router/modules/pc.ts b/src/router/modules/pc.ts
index 9b058fa..f3edac9 100644
--- a/src/router/modules/pc.ts
+++ b/src/router/modules/pc.ts
@@ -94,6 +94,19 @@
         },
       },
       {
+        path: '/history/detail',
+        component: () => import('@/views/home/alarm/current/components/detail.vue'),
+        name: 'AlarmHistoryDetail',
+        meta: {
+          title: '报警详情',
+          icon: 'ep:key',
+          sidebar: false,
+          breadcrumb: true,
+          activeMenu: '/alarm/history',
+          auth: '/alarm/history',
+        },
+      },
+      {
         path: 'count',
         component: () => import('@/views/home/alarm/count/index.vue'),
         name: 'AlarmCount',
diff --git a/src/views/home/alarm/count/components/alarmStatistics.vue b/src/views/home/alarm/count/components/alarmStatistics.vue
index b088de2..7aa930f 100644
--- a/src/views/home/alarm/count/components/alarmStatistics.vue
+++ b/src/views/home/alarm/count/components/alarmStatistics.vue
@@ -34,13 +34,12 @@
     value: '3',
   },
 ])
-const xAxisData = ref([])
-const data = ref([])
+const xAxisData = ref<string[]>([])
+const data = ref<any[]>([])
 const list = ref([])
 const loading = ref(true)
 // 开始结束时间
 const datetimerange = ref()
-// 默认当天
 watch(() => datetimerange.value, (newVal) => {
   listQuery.value.begTime = ''
   listQuery.value.endTime = ''
@@ -51,6 +50,35 @@
     }
   }
 })
+const shortcuts = [
+  {
+    text: '近一周',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setDate(start.getDate() - 7)
+      return [start, end]
+    },
+  },
+  {
+    text: '近一个月',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setMonth(start.getMonth() - 1)
+      return [start, end]
+    },
+  },
+  {
+    text: '近三个月',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setMonth(start.getMonth() - 3)
+      return [start, end]
+    },
+  },
+]
 // setTimeout(() => {
 //   xAxisData.value = [
 //     '闸井浓度超限', '场站浓度超限', '场站火焰报警', '疑似第三方破坏', '场站烟雾报警',
@@ -66,10 +94,25 @@
 //     value: data.value[0].data[index],
 //   }))
 // }, 1000)
+const resizePage = () => {
+  setTimeout(() => {
+    const resize = new Event('resize')
+    window.dispatchEvent(resize)
+  }, 500)
+}
 const fetchData = () => {
   loading.value = true
   getAlarmType(listQuery.value).then((res) => {
-    console.log(res.data, '各类报警统计')
+    // console.log(res.data, '各类报警统计')
+    xAxisData.value = res.data.map((item: any) => item.name)
+    data.value = [
+      {
+        name: '报警数量',
+        data: res.data.map((item: any) => item.value),
+      },
+    ]
+    list.value = res.data
+    resizePage
     loading.value = false
   }).catch(() => {
     loading.value = false
@@ -105,8 +148,8 @@
           style="width: 220px;margin: 0 5px;"
         />
         <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="至"
+          v-model="datetimerange" type="datetimerange" format="YYYY-MM-DD HH:mm:ss" :shortcuts="shortcuts"
+          style="width: 380px;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;" @click="fetchData">
@@ -118,8 +161,8 @@
       <div v-loading="loading" class="alarm-count">
         <div class="bar">
           <bar-chart-vertical
-            v-show="xAxisData.length"
-            :x-axis-data="xAxisData" :bar-coner="0" :data="data" :colors="[]" :bar-width="15"
+            v-show="xAxisData.length" :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' }"
             :grid="{
               top: 50,
@@ -133,7 +176,7 @@
         </div>
         <div class="table">
           <el-table border :data="list" stripe style="width: 100%;" :height="440">
-            <el-table-column label="报警类型" prop="alarmType" align="center" />
+            <el-table-column label="报警类型" prop="name" align="center" />
             <el-table-column label="报警数量" prop="value" align="center" />
           </el-table>
         </div>
diff --git a/src/views/home/alarm/count/components/deptCount.vue b/src/views/home/alarm/count/components/deptCount.vue
index 1ca5482..798bfd2 100644
--- a/src/views/home/alarm/count/components/deptCount.vue
+++ b/src/views/home/alarm/count/components/deptCount.vue
@@ -5,40 +5,123 @@
  -->
 <script lang="ts" setup name="AlarmCount">
 import layout from './layout.vue'
+import { getAlarmCompany } from '@/api/home/alarm/count'
 const listQuery = ref({
-  type: 'day',
+  begTime: '',
+  endTime: '',
+  ledgerType: '',
+  timeType: '1',
 })
 const selectTimeType = (type: string) => {
-  listQuery.value.type = type
+  listQuery.value.timeType = type
 }
+// 开始结束时间
+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 shortcuts = [
+  {
+    text: '近一周',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setDate(start.getDate() - 7)
+      return [start, end]
+    },
+  },
+  {
+    text: '近一个月',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setMonth(start.getMonth() - 1)
+      return [start, end]
+    },
+  },
+  {
+    text: '近三个月',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setMonth(start.getMonth() - 3)
+      return [start, end]
+    },
+  },
+]
+// 类别
+const ledgerTypeList = ref<{ id: string; name: string; value: string }[]>([
+  {
+    name: '闸井',
+    id: '1',
+    value: '1',
+  },
+  {
+    name: '场站',
+    id: '2',
+    value: '2',
+  },
+  {
+    name: '管线',
+    id: '3',
+    value: '3',
+  },
+])
 const xAxisData = ref([])
 const data = ref([])
 const list = ref([])
-setTimeout(() => {
-  xAxisData.value = [
-    '第一分公司', '第二分公司', '第三分公司', '第四分公司', '第五分公司',
-  ]
-  data.value = [
-    {
-      name: '闸井浓度超限',
-      data: [1, 8, 5, 8, 4],
-    },
-    {
-      name: '场站浓度超限',
-      data: [8, 3, 6, 1, 7],
-    },
-    {
-      name: '疑似第三方破坏',
-      data: [4, 7, 5, 9, 4],
-    },
-  ]
-  list.value = xAxisData.value.map((item, index) => ({
-    dept: item,
-    wellOver: data.value[0].data[index],
-    senceOver: data.value[1].data[index],
-    thirdParty: data.value[2].data[index],
-  }))
-}, 1000)
+const loading = ref(true)
+// setTimeout(() => {
+//   xAxisData.value = [
+//     '第一分公司', '第二分公司', '第三分公司', '第四分公司', '第五分公司',
+//   ]
+//   data.value = [
+//     {
+//       name: '闸井浓度超限',
+//       data: [1, 8, 5, 8, 4],
+//     },
+//     {
+//       name: '场站浓度超限',
+//       data: [8, 3, 6, 1, 7],
+//     },
+//     {
+//       name: '疑似第三方破坏',
+//       data: [4, 7, 5, 9, 4],
+//     },
+//   ]
+//   list.value = xAxisData.value.map((item, index) => ({
+//     dept: item,
+//     wellOver: data.value[0].data[index],
+//     senceOver: data.value[1].data[index],
+//     thirdParty: data.value[2].data[index],
+//   }))
+// }, 1000)
+const resizePage = () => {
+  setTimeout(() => {
+    const resize = new Event('resize')
+    window.dispatchEvent(resize)
+  }, 500)
+}
+const fetchData = () => {
+  loading.value = true
+  getAlarmCompany(listQuery.value).then((res) => {
+    console.log(res.data, '各单位报警统计')
+    resizePage()
+    loading.value = false
+  }).catch(() => {
+    loading.value = false
+  })
+}
+onMounted(() => {
+  fetchData()
+})
 </script>
 
 <template>
@@ -47,49 +130,59 @@
     <template #search>
       <div class="search">
         <el-button
-          :class="listQuery.type === 'day' ? 'active' : ''" round size="small"
-          @click="selectTimeType('day')"
+          :class="listQuery.timeType === '1' ? 'active' : ''" round size="small"
+          style="margin: 0 5px;"
+          @click="selectTimeType('1')"
         >
           今日
         </el-button>
         <el-button
-          :class="listQuery.type === 'week' ? 'active' : ''" round size="small"
-          @click="selectTimeType('week')"
+          :class="listQuery.timeType === '2' ? 'active' : ''" round size="small"
+          style="margin: 0 5px;"
+          @click="selectTimeType('2')"
         >
           本周
         </el-button>
         <el-button
-          :class="listQuery.type === 'month' ? 'active' : ''" round size="small"
-          @click="selectTimeType('month')"
+          :class="listQuery.timeType === '3' ? 'active' : ''" round size="small"
+          style="margin: 0 5px;"
+          @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 v-for="item in ledgerTypeList" :key="item.id" :label="item.name" :value="item.id" />
+        </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
+          style="width: 380px;margin: 0 5px;" value-format="YYYY-MM-DD HH:mm:ss" range-separator="至"
+          start-placeholder="报警开始时间" end-placeholder="报警结束时间" clearable :shortcuts="shortcuts"
         />
-        <el-button type="primary" style="margin: 0 5px;">
+        <el-button type="primary" style="margin: 0 5px;" @click="fetchData">
           搜索
         </el-button>
       </div>
     </template>
     <template #content>
-      <div class="alarm-count">
+      <div v-loading="loading" class="alarm-count">
         <div class="bar">
           <bar-chart-vertical
+            v-show="xAxisData.length"
             :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' }"
+            :grid="{
+              top: 50,
+              left: 30,
+              right: 30,
+              bottom: 20,
+              containLabel: true, // 是否包含坐标轴的刻度标签
+            }"
           />
+          <el-empty v-show="!xAxisData.length" description="暂无数据" />
         </div>
         <div class="table">
           <el-table border :data="list" stripe style="width: 100%;" :height="440">
-            <el-table-column label="管理单位" prop="dept" align="center" />
+            <el-table-column label="管理单位" prop="dept" align="center" width="200" />
             <el-table-column label="闸井浓度超限" prop="wellOver" align="center" />
             <el-table-column label="场站浓度超限" prop="senceOver" align="center" />
             <el-table-column label="疑似第三方破坏" prop="thirdParty" align="center" />
diff --git a/src/views/home/alarm/count/components/locationAnalysis.vue b/src/views/home/alarm/count/components/locationAnalysis.vue
index 4265aaf..4cd5921 100644
--- a/src/views/home/alarm/count/components/locationAnalysis.vue
+++ b/src/views/home/alarm/count/components/locationAnalysis.vue
@@ -18,7 +18,7 @@
 // 开始结束时间
 const datetimerange = ref()
 // 默认当天
-datetimerange.value = [`${dayjs().format('YYYY-MM-DD')} 00:00:00`, dayjs().format('YYYY-MM-DD HH:mm:ss')]
+// datetimerange.value = [`${dayjs().format('YYYY-MM-DD')} 00:00:00`, dayjs().format('YYYY-MM-DD HH:mm:ss')]
 watch(() => datetimerange.value, (newVal) => {
   listQuery.value.begTime = ''
   listQuery.value.endTime = ''
@@ -29,6 +29,35 @@
     }
   }
 })
+const shortcuts = [
+  {
+    text: '近一周',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setDate(start.getDate() - 7)
+      return [start, end]
+    },
+  },
+  {
+    text: '近一个月',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setMonth(start.getMonth() - 1)
+      return [start, end]
+    },
+  },
+  {
+    text: '近三个月',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setMonth(start.getMonth() - 3)
+      return [start, end]
+    },
+  },
+]
 const selectTimeType = (type: string) => {
   listQuery.value.timeType = type
 }
@@ -52,13 +81,13 @@
     <!-- 查询条件 -->
     <template #search>
       <div class="search">
-        <el-button :class="listQuery.timeType === '1' ? 'active' : ''" round size="small" @click="selectTimeType('1')">
+        <el-button :class="listQuery.timeType === '1' ? 'active' : ''" round size="small" style="margin: 0 5px;" @click="selectTimeType('1')">
           今日
         </el-button>
-        <el-button :class="listQuery.timeType === '2' ? 'active' : ''" round size="small" @click="selectTimeType('2')">
+        <el-button :class="listQuery.timeType === '2' ? 'active' : ''" round size="small" style="margin: 0 5px;" @click="selectTimeType('2')">
           本周
         </el-button>
-        <el-button :class="listQuery.timeType === '3' ? 'active' : ''" round size="small" @click="selectTimeType('3')">
+        <el-button :class="listQuery.timeType === '3' ? 'active' : ''" round size="small" style="margin: 0 5px;" @click="selectTimeType('3')">
           本月
         </el-button>
         <el-select v-model="listQuery.ledgerType" placeholder="全部类别" clearable style="width: 180px;margin: 0 5px;">
@@ -68,8 +97,8 @@
         </el-select>
         <el-date-picker
           v-model="datetimerange" type="datetimerange" format="YYYY-MM-DD HH:mm:ss"
-          style="width: 360px;margin: 0 5px;" value-format="YYYY-MM-DD HH:mm:ss" range-separator="至"
-          start-placeholder="报警开始时间" end-placeholder="报警结束时间" clearable
+          style="width: 380px;margin: 0 5px;" value-format="YYYY-MM-DD HH:mm:ss" range-separator="至"
+          start-placeholder="报警开始时间" end-placeholder="报警结束时间" clearable :shortcuts="shortcuts"
         />
         <el-button type="primary" style="margin: 0 5px;" @click="fetchData">
           搜索
@@ -80,13 +109,13 @@
       <div class="alarm-count">
         <div class="table">
           <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="type" align="center" width="140" />
+            <el-table-column label="位号" prop="tagNumber" align="center" width="160" />
             <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-column label="标签" prop="marker" align="center" width="140" />
+            <el-table-column label="报警次数" prop="alarmSum" align="center" width="120" />
           </el-table>
         </div>
       </div>
diff --git a/src/views/home/alarm/count/components/trendAnalysis.vue b/src/views/home/alarm/count/components/trendAnalysis.vue
index 73e18b0..18cfb4c 100644
--- a/src/views/home/alarm/count/components/trendAnalysis.vue
+++ b/src/views/home/alarm/count/components/trendAnalysis.vue
@@ -5,49 +5,203 @@
  -->
 <script lang="ts" setup name="TrendAnalysis">
 import layout from './layout.vue'
+import { getAlarmTrend } from '@/api/home/alarm/count'
 const listQuery = ref({
-  type: 'day',
+  timeType: '2',
+  ledgerType: '',
+  endTime: '',
+  begTime: '',
+  deptid: '',
 })
+// 开始结束时间
+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 shortcuts = [
+  {
+    text: '近一周',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setDate(start.getDate() - 7)
+      return [start, end]
+    },
+  },
+  {
+    text: '近一个月',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setMonth(start.getMonth() - 1)
+      return [start, end]
+    },
+  },
+  {
+    text: '近三个月',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setMonth(start.getMonth() - 3)
+      return [start, end]
+    },
+  },
+]
 const selectTimeType = (type: string) => {
-  listQuery.value.type = type
+  listQuery.value.timeType = type
 }
-const xAxisData = ref([])
-const data = ref([])
+const columns = ref<any[]>([
+  {
+    text: '闸井浓度超限',
+    value: 'well',
+  },
+  {
+    text: '场站浓度超限',
+    value: 'station',
+  },
+  {
+    text: '管线浓度超限',
+    value: 'pipeline',
+  },
+])
+// 类别
+const ledgerTypeList = ref<{ id: string; name: string; value: string }[]>([
+  {
+    name: '闸井',
+    id: '1',
+    value: '1',
+  },
+  {
+    name: '场站',
+    id: '2',
+    value: '2',
+  },
+  {
+    name: '管线',
+    id: '3',
+    value: '3',
+  },
+])
+const xAxisData = ref<string[]>([])
+const data = ref<any[]>([])
 const list = ref([])
-setTimeout(() => {
-  xAxisData.value = [
-    '2024-07-01 12:11:12',
-    '2024-07-02 12:11:12',
-    '2024-07-03 12:11:12',
-    '2024-07-04 12:11:12',
-    '2024-07-05 12:11:12',
-    '2024-07-06 12:11:12',
-    '2024-07-07 12:11:12',
-  ]
-  data.value = [
-    {
-      name: '闸井浓度超限',
-      data: [1, 3, 5, 1, 4, 2, 7],
-      symbol: 'emptyCircle',
-    },
-    {
-      name: '场站浓度超限',
-      data: [2, 1, 4, 1, 5, 2, 9],
-      symbol: 'emptyCircle',
-    },
-    {
-      name: '闸井浓度超限',
-      data: [4, 3, 2, 4, 7, 9, 1],
-      symbol: 'emptyCircle',
-    },
-  ]
-  list.value = xAxisData.value.map((item, index) => ({
-    alarmTime: item,
-    wellOver: data.value[0].data[index],
-    senceOver: data.value[1].data[index],
-    thirdParty: data.value[2].data[index],
-  }))
-}, 1000)
+const loading = ref(true)
+// setTimeout(() => {
+//   xAxisData.value = [
+//     '2024-07-01 12:11:12',
+//     '2024-07-02 12:11:12',
+//     '2024-07-03 12:11:12',
+//     '2024-07-04 12:11:12',
+//     '2024-07-05 12:11:12',
+//     '2024-07-06 12:11:12',
+//     '2024-07-07 12:11:12',
+//   ]
+//   data.value = [
+//     {
+//       name: '闸井浓度超限',
+//       data: [1, 3, 5, 1, 4, 2, 7],
+//       symbol: 'emptyCircle',
+//     },
+//     {
+//       name: '场站浓度超限',
+//       data: [2, 1, 4, 1, 5, 2, 9],
+//       symbol: 'emptyCircle',
+//     },
+//     {
+//       name: '闸井浓度超限',
+//       data: [4, 3, 2, 4, 7, 9, 1],
+//       symbol: 'emptyCircle',
+//     },
+//   ]
+//   list.value = xAxisData.value.map((item, index) => ({
+//     alarmTime: item,
+//     wellOver: data.value[0].data[index],
+//     senceOver: data.value[1].data[index],
+//     thirdParty: data.value[2].data[index],
+//   }))
+// }, 1000)
+const resizePage = () => {
+  setTimeout(() => {
+    const resize = new Event('resize')
+    window.dispatchEvent(resize)
+  }, 500)
+}
+const fetchData = () => {
+  loading.value = true
+  const columnsDict = {
+    闸井浓度超限: 'well',
+    场站浓度超限: 'station',
+    管线浓度超限: 'pipeline',
+  } as { [key: string]: string }
+  getAlarmTrend(listQuery.value).then((res) => {
+    console.log(res.data, '报警趋势分析')
+    xAxisData.value = res.data.map((item: any) => item.date)
+    if (!listQuery.value.ledgerType) {
+      data.value = [
+        {
+          name: '闸井浓度超限',
+          data: res.data.map((item: any) => item['闸井浓度超限']),
+        },
+        {
+          name: '场站浓度超限',
+          data: res.data.map((item: any) => item['场站浓度超限']),
+        },
+        {
+          name: '管线浓度超限',
+          data: res.data.map((item: any) => item['管线浓度超限']),
+        },
+      ]
+    }
+    else if (listQuery.value.ledgerType === '1') {
+      data.value = [
+        {
+          name: '闸井浓度超限',
+          data: res.data.map((item: any) => item['闸井浓度超限']),
+        },
+      ]
+    }
+    else if (listQuery.value.ledgerType === '2') {
+      data.value = [
+        {
+          name: '场站浓度超限',
+          data: res.data.map((item: any) => item['场站浓度超限']),
+        },
+      ]
+    }
+    else if (listQuery.value.ledgerType === '3') {
+      data.value = [
+        {
+          name: '管线浓度超限',
+          data: res.data.map((item: any) => item['管线浓度超限']),
+        },
+      ]
+    }
+    list.value = res.data.map((item: any) => ({
+      date: item.date,
+      well: item['闸井浓度超限'],
+      station: item['场站浓度超限'],
+      pipeline: item['管线浓度超限'],
+    }))
+    columns.value = data.value.map((item: any) => ({
+      text: item.name,
+      value: columnsDict[item.name],
+    }))
+    resizePage()
+    loading.value = false
+  }).catch(() => {
+    loading.value = false
+  })
+}
+onMounted(() => {
+  fetchData()
+})
 </script>
 
 <template>
@@ -56,34 +210,30 @@
     <template #search>
       <div class="search">
         <el-button
-          :class="listQuery.type === 'day' ? 'active' : ''" round size="small"
-          @click="selectTimeType('day')"
-        >
-          今日
-        </el-button>
-        <el-button
-          :class="listQuery.type === 'week' ? 'active' : ''" round size="small"
-          @click="selectTimeType('week')"
+          :class="listQuery.timeType === '2' ? 'active' : ''" round size="small" style="margin: 0 5px;"
+          @click="selectTimeType('2')"
         >
           本周
         </el-button>
         <el-button
-          :class="listQuery.type === 'month' ? 'active' : ''" round size="small"
-          @click="selectTimeType('month')"
+          :class="listQuery.timeType === '3' ? 'active' : ''" round size="small" style="margin: 0 5px;"
+          @click="selectTimeType('3')"
         >
           本月
         </el-button>
-        <el-select v-model="listQuery.keywords" placeholder="全部类别" clearable style="width: 180px;margin: 0 5px;" />
+        <el-select v-model="listQuery.ledgerType" placeholder="全部类别" clearable style="width: 180px;margin: 0 5px;">
+          <el-option v-for="item in ledgerTypeList" :key="item.id" :label="item.name" :value="item.id" />
+        </el-select>
         <dept-select
-          v-model="listQuery.keywords" placeholder="管理单位" :clearable="true"
+          v-model="listQuery.deptid" placeholder="管理单位" :clearable="true"
           style="width: 220px;margin: 0 5px;"
         />
         <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
+          style="width: 380px;margin: 0 5px;" value-format="YYYY-MM-DD HH:mm:ss" range-separator="至"
+          start-placeholder="报警开始时间" end-placeholder="报警结束时间" clearable :shortcuts="shortcuts"
         />
-        <el-button type="primary" style="margin: 0 5px;">
+        <el-button type="primary" style="margin: 0 5px;" @click="fetchData">
           搜索
         </el-button>
       </div>
@@ -94,14 +244,22 @@
           <line-chart
             :x-axis-data="xAxisData" :data="data" :gradient="false"
             :legend="{ itemWidth: 8, itemHeight: 8, type: 'scroll', orient: 'horizontal', icon: 'roundRect', right: '0', top: '10' }"
+            :grid="{
+              top: 50,
+              left: 30,
+              right: 30,
+              bottom: 20,
+              containLabel: true, // 是否包含坐标轴的刻度标签
+            }"
           />
         </div>
         <div class="table">
           <el-table border :data="list" stripe style="width: 100%;" :height="440">
-            <el-table-column label="日期" prop="alarmTime" align="center" />
-            <el-table-column label="闸井浓度超限" prop="wellOver" align="center" />
-            <el-table-column label="场站浓度超限" prop="senceOver" align="center" />
-            <el-table-column label="疑似第三方破坏" prop="thirdParty" align="center" />
+            <el-table-column label="日期" prop="date" align="center" width="190" />
+            <el-table-column
+              v-for="item in columns" :key="item.text" :label="item.text" :prop="item.value"
+              align="center"
+            />
           </el-table>
         </div>
       </div>
diff --git a/src/views/home/alarm/current/components/detail.vue b/src/views/home/alarm/current/components/detail.vue
index 4fb61d3..e200fe3 100644
--- a/src/views/home/alarm/current/components/detail.vue
+++ b/src/views/home/alarm/current/components/detail.vue
@@ -7,6 +7,7 @@
 import dayjs from 'dayjs'
 import { ElMessage } from 'element-plus'
 import { alarmProcessNode, detailAlarm } from '@/api/home/alarm/current'
+import { getAlarmDetail } from '@/api/home/alarm/history'
 import { toHumpObject } from '@/utils/String'
 import { getAlarmLevelListPage, getAlarmTypeListPage } from '@/api/home/rule/alarm'
 import { getDateDiff } from '@/utils/dayjs'
@@ -44,7 +45,7 @@
   },
   {
     text: '报警时间',
-    value: 'ts',
+    value: $route.query.type === 'history' ? 'alarmTime' : 'ts',
     align: 'center',
   },
   {
@@ -89,7 +90,7 @@
   },
   {
     text: '处置时长',
-    value: 'duration',
+    value: $route.query.type === 'history' ? 'cancelDuration' : 'duration',
     align: 'center',
   },
   {
@@ -107,8 +108,8 @@
 const fetchDetail = async () => {
   loading.value = true
   const res1 = await getAlarmLevelListPage({ offset: 1, limit: 9999 })
-  const res2 = await getAlarmTypeListPage({ offset: 1, limit: 9999 })
-  detailAlarm($route.query.id as string).then((res) => {
+  const res2 = await getAlarmTypeListPage({ offset: 1, limit: 9999 });
+  ($route.query.type === 'history' ? getAlarmDetail : detailAlarm)($route.query.id as string).then((res) => {
     detailInfo.value = toHumpObject(res.data)
     detailInfo.value.realAlarmName = detailInfo.value.realAlarm === '1' ? '报警' : '误报'
     detailInfo.value.alarmTypeName = res2.data.rows.filter((item: any) => item.id === detailInfo.value.alarmTypeId)[0]?.alarmType || ''
@@ -183,8 +184,12 @@
           </template>
           <div style="padding: 25px;">
             <el-timeline>
-              <el-timeline-item v-for="(item, index) in alarmDynamics" :key="index" :timestamp="item.approvalTime" type="primary">
-                {{ `${item.approvalPerson}${item.dept_name ? '(' : ''}${item.dept_name}${item.dept_name ? ')' : ''}${item.process_name}` }}
+              <el-timeline-item
+                v-for="(item, index) in alarmDynamics" :key="index" :timestamp="item.approvalTime"
+                type="primary"
+              >
+                {{ `${item.approvalPerson}${item.dept_name ? '(' : ''}${item.dept_name}${item.dept_name ? ')'
+                  : ''}${item.process_name}` }}
               </el-timeline-item>
             </el-timeline>
           </div>
diff --git a/src/views/home/alarm/current/index.vue b/src/views/home/alarm/current/index.vue
index 52b2be1..8b36a01 100644
--- a/src/views/home/alarm/current/index.vue
+++ b/src/views/home/alarm/current/index.vue
@@ -4,10 +4,10 @@
   Date: 2023-06-28
  -->
 <script lang="ts" setup name="CurrentAlarm">
-import { ElMessage } from 'element-plus'
+import { ElMessage, ElMessageBox } from 'element-plus'
 import { ArrowLeftBold, ArrowRightBold } from '@element-plus/icons-vue'
 import MapCom from './components/map.vue'
-import { getCurrentAlarmListPage, viewAlarm } from '@/api/home/alarm/current'
+import { batchDelete, getCurrentAlarmListPage, viewAlarm } from '@/api/home/alarm/current'
 import { getDictByCode } from '@/api/system/dict'
 import { getAlarmLevelListPage, getAlarmTypeListPage } from '@/api/home/rule/alarm'
 import { getDeviceTypeListPage } from '@/api/home/device/type'
@@ -66,6 +66,35 @@
     }
   }
 })
+const shortcuts = [
+  {
+    text: '近一周',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setDate(start.getDate() - 7)
+      return [start, end]
+    },
+  },
+  {
+    text: '近一个月',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setMonth(start.getMonth() - 1)
+      return [start, end]
+    },
+  },
+  {
+    text: '近三个月',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setMonth(start.getMonth() - 3)
+      return [start, end]
+    },
+  },
+]
 // 查询数据
 const fetchData = () => {
   loadingTable.value = true
@@ -140,8 +169,8 @@
 const detail = (row: any) => {
   mapData.value = row
   switchMode('map')
-  row.lngGaode = '116.398043'
-  row.latGaode = '39.901552'
+  // row.lngGaode = '116.398043'
+  // row.latGaode = '39.901552'
   // 绘制点
   const draw = () => {
     mapRef.value.mapRef.removeMarker()
@@ -209,6 +238,35 @@
   })
 }
 fetchDict()
+const { proxy } = getCurrentInstance() as any
+// 多选
+const multipleTable = ref([])
+const handleSelectionChange = (val: any) => {
+  console.log(val, '多选数据')
+  multipleTable.value = val
+}
+// 批量删除
+const batchDeleteRow = () => {
+  if (!multipleTable.value.length) {
+    ElMessage.warning('请先选中数据')
+    return
+  }
+  ElMessageBox.confirm(
+    '确定要删除选中的数据吗？',
+    '确认操作',
+    {
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+      type: 'warning',
+    },
+  ).then(() => {
+    batchDelete(multipleTable.value.map((item: any) => item.id)).then(() => {
+      ElMessage.success('操作成功')
+      multipleTable.value = []
+      fetchData()
+    })
+  })
+}
 </script>
 
 <template>
@@ -255,7 +313,7 @@
       </search-item>
       <search-item>
         <el-date-picker
-          v-model="datetimerange" type="datetimerange" format="YYYY-MM-DD HH:mm:ss"
+          v-model="datetimerange" type="datetimerange" format="YYYY-MM-DD HH:mm:ss" :shortcuts="shortcuts"
           value-format="YYYY-MM-DD HH:mm:ss" range-separator="至" start-placeholder="报警开始时间" end-placeholder="报警结束时间"
           clearable
         />
@@ -274,6 +332,9 @@
           <template #btns-right>
             <!-- 操作 -->
             <div>
+              <el-button v-if="proxy.hasPerm('/alarm/current/delete')" type="primary" @click="batchDeleteRow">
+                批量删除
+              </el-button>
               <el-button type="primary">
                 导出
               </el-button>
@@ -282,7 +343,10 @@
           <!-- 查询结果Table显示 -->
           <normal-table
             :data="list1" :total="total" :columns="columnsConfig" :query="listQuery"
-            :list-loading="loadingTable" :height="tableHeight - 50 - 70" @change="changePage"
+            :list-loading="loadingTable" :height="tableHeight - 50 - 70"
+            :is-multi="proxy.hasPerm('/alarm/current/delete')"
+            :is-showmulti-select="proxy.hasPerm('/alarm/current/delete')" @change="changePage"
+            @multiSelect="handleSelectionChange"
           >
             <template #preColumns>
               <el-table-column label="序号" width="55" align="center">
diff --git a/src/views/home/alarm/history/index.vue b/src/views/home/alarm/history/index.vue
index 87bb167..74ca152 100644
--- a/src/views/home/alarm/history/index.vue
+++ b/src/views/home/alarm/history/index.vue
@@ -80,6 +80,35 @@
     }
   }
 })
+const shortcuts = [
+  {
+    text: '近一周',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setDate(start.getDate() - 7)
+      return [start, end]
+    },
+  },
+  {
+    text: '近一个月',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setMonth(start.getMonth() - 1)
+      return [start, end]
+    },
+  },
+  {
+    text: '近三个月',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setMonth(start.getMonth() - 3)
+      return [start, end]
+    },
+  },
+]
 // 查询数据
 const fetchData = () => {
   loadingTable.value = true
@@ -127,10 +156,11 @@
 const $router = useRouter()
 const moreData = (row: any) => {
   $router.push({
-    name: 'AlarmCurrentDetail',
+    name: 'AlarmHistoryDetail',
     query: {
       id: row.id,
       row: JSON.stringify(row),
+      type: 'history',
     },
   })
 }
@@ -218,7 +248,7 @@
       </search-item>
       <search-item>
         <el-date-picker
-          v-model="datetimerange" type="datetimerange" format="YYYY-MM-DD HH:mm:ss"
+          v-model="datetimerange" type="datetimerange" format="YYYY-MM-DD HH:mm:ss" :shortcuts="shortcuts"
           value-format="YYYY-MM-DD HH:mm:ss" range-separator="至" start-placeholder="报警开始时间" end-placeholder="报警结束时间"
           clearable
         />
diff --git a/src/views/home/device/product/index.vue b/src/views/home/device/product/index.vue
index 1bb3d99..2300270 100644
--- a/src/views/home/device/product/index.vue
+++ b/src/views/home/device/product/index.vue
@@ -21,8 +21,8 @@
   { text: '设备型号', value: 'deviceModel', align: 'center' },
   { text: '厂商', value: 'manufacturerName', align: 'center' },
   { text: '通讯协议', value: 'protocolName', align: 'center' },
-  { text: '接入方式', value: 'accessMethodName', align: 'center' },
-  { text: '创建时间', value: 'ts', align: 'center' },
+  { text: '接入方式', value: 'accessMethodName', align: 'center', width: '140' },
+  { text: '创建时间', value: 'ts', align: 'center', width: '200' },
 ])
 // 最终展示列
 const columnsConfig = ref([])

diff --git a/src/api/home/alarm/count.ts b/src/api/home/alarm/count.ts
index 1f4b59a..d5d9244 100644
--- a/src/api/home/alarm/count.ts
+++ b/src/api/home/alarm/count.ts
@@ -34,3 +34,11 @@
     data,
   })
 }
+// 报警趋势分析
+export function getAlarmTrend(data: any) {
+  return request({
+    url: '/statics/alarmRecords/alarmTrend',
+    method: 'post',
+    data,
+  })
+}
diff --git a/src/api/home/alarm/current.ts b/src/api/home/alarm/current.ts
index ec20f64..ac3387f 100644
--- a/src/api/home/alarm/current.ts
+++ b/src/api/home/alarm/current.ts
@@ -57,3 +57,13 @@
     },
   })
 }
+// 批量删除
+export function batchDelete(ids: any) {
+  return request({
+    url: '/system/alarmRecords/batchDelete',
+    method: 'post',
+    data: {
+      ids,
+    },
+  })
+}
diff --git a/src/api/home/alarm/history.ts b/src/api/home/alarm/history.ts
index 5f55e82..44cf851 100644
--- a/src/api/home/alarm/history.ts
+++ b/src/api/home/alarm/history.ts
@@ -11,3 +11,13 @@
     data,
   })
 }
+// 详情
+export function getAlarmDetail(id: any) {
+  return request({
+    url: '/system/alarmRecords/historyAlarmDetail',
+    method: 'post',
+    data: {
+      id,
+    },
+  })
+}
diff --git a/src/components/Echart/LineChart.vue b/src/components/Echart/LineChart.vue
index 2733161..b811f29 100644
--- a/src/components/Echart/LineChart.vue
+++ b/src/components/Echart/LineChart.vue
@@ -207,7 +207,7 @@
         },
       },
       valueFormatter: (value: string | number) => {
-        return value ? value + props.unit : ''
+        return value ? value + props.unit : value === 0 ? '0' : ''
       },
     }, // 提示框
     xAxis: [
diff --git a/src/router/modules/pc.ts b/src/router/modules/pc.ts
index 9b058fa..f3edac9 100644
--- a/src/router/modules/pc.ts
+++ b/src/router/modules/pc.ts
@@ -94,6 +94,19 @@
         },
       },
       {
+        path: '/history/detail',
+        component: () => import('@/views/home/alarm/current/components/detail.vue'),
+        name: 'AlarmHistoryDetail',
+        meta: {
+          title: '报警详情',
+          icon: 'ep:key',
+          sidebar: false,
+          breadcrumb: true,
+          activeMenu: '/alarm/history',
+          auth: '/alarm/history',
+        },
+      },
+      {
         path: 'count',
         component: () => import('@/views/home/alarm/count/index.vue'),
         name: 'AlarmCount',
diff --git a/src/views/home/alarm/count/components/alarmStatistics.vue b/src/views/home/alarm/count/components/alarmStatistics.vue
index b088de2..7aa930f 100644
--- a/src/views/home/alarm/count/components/alarmStatistics.vue
+++ b/src/views/home/alarm/count/components/alarmStatistics.vue
@@ -34,13 +34,12 @@
     value: '3',
   },
 ])
-const xAxisData = ref([])
-const data = ref([])
+const xAxisData = ref<string[]>([])
+const data = ref<any[]>([])
 const list = ref([])
 const loading = ref(true)
 // 开始结束时间
 const datetimerange = ref()
-// 默认当天
 watch(() => datetimerange.value, (newVal) => {
   listQuery.value.begTime = ''
   listQuery.value.endTime = ''
@@ -51,6 +50,35 @@
     }
   }
 })
+const shortcuts = [
+  {
+    text: '近一周',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setDate(start.getDate() - 7)
+      return [start, end]
+    },
+  },
+  {
+    text: '近一个月',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setMonth(start.getMonth() - 1)
+      return [start, end]
+    },
+  },
+  {
+    text: '近三个月',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setMonth(start.getMonth() - 3)
+      return [start, end]
+    },
+  },
+]
 // setTimeout(() => {
 //   xAxisData.value = [
 //     '闸井浓度超限', '场站浓度超限', '场站火焰报警', '疑似第三方破坏', '场站烟雾报警',
@@ -66,10 +94,25 @@
 //     value: data.value[0].data[index],
 //   }))
 // }, 1000)
+const resizePage = () => {
+  setTimeout(() => {
+    const resize = new Event('resize')
+    window.dispatchEvent(resize)
+  }, 500)
+}
 const fetchData = () => {
   loading.value = true
   getAlarmType(listQuery.value).then((res) => {
-    console.log(res.data, '各类报警统计')
+    // console.log(res.data, '各类报警统计')
+    xAxisData.value = res.data.map((item: any) => item.name)
+    data.value = [
+      {
+        name: '报警数量',
+        data: res.data.map((item: any) => item.value),
+      },
+    ]
+    list.value = res.data
+    resizePage
     loading.value = false
   }).catch(() => {
     loading.value = false
@@ -105,8 +148,8 @@
           style="width: 220px;margin: 0 5px;"
         />
         <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="至"
+          v-model="datetimerange" type="datetimerange" format="YYYY-MM-DD HH:mm:ss" :shortcuts="shortcuts"
+          style="width: 380px;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;" @click="fetchData">
@@ -118,8 +161,8 @@
       <div v-loading="loading" class="alarm-count">
         <div class="bar">
           <bar-chart-vertical
-            v-show="xAxisData.length"
-            :x-axis-data="xAxisData" :bar-coner="0" :data="data" :colors="[]" :bar-width="15"
+            v-show="xAxisData.length" :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' }"
             :grid="{
               top: 50,
@@ -133,7 +176,7 @@
         </div>
         <div class="table">
           <el-table border :data="list" stripe style="width: 100%;" :height="440">
-            <el-table-column label="报警类型" prop="alarmType" align="center" />
+            <el-table-column label="报警类型" prop="name" align="center" />
             <el-table-column label="报警数量" prop="value" align="center" />
           </el-table>
         </div>
diff --git a/src/views/home/alarm/count/components/deptCount.vue b/src/views/home/alarm/count/components/deptCount.vue
index 1ca5482..798bfd2 100644
--- a/src/views/home/alarm/count/components/deptCount.vue
+++ b/src/views/home/alarm/count/components/deptCount.vue
@@ -5,40 +5,123 @@
  -->
 <script lang="ts" setup name="AlarmCount">
 import layout from './layout.vue'
+import { getAlarmCompany } from '@/api/home/alarm/count'
 const listQuery = ref({
-  type: 'day',
+  begTime: '',
+  endTime: '',
+  ledgerType: '',
+  timeType: '1',
 })
 const selectTimeType = (type: string) => {
-  listQuery.value.type = type
+  listQuery.value.timeType = type
 }
+// 开始结束时间
+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 shortcuts = [
+  {
+    text: '近一周',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setDate(start.getDate() - 7)
+      return [start, end]
+    },
+  },
+  {
+    text: '近一个月',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setMonth(start.getMonth() - 1)
+      return [start, end]
+    },
+  },
+  {
+    text: '近三个月',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setMonth(start.getMonth() - 3)
+      return [start, end]
+    },
+  },
+]
+// 类别
+const ledgerTypeList = ref<{ id: string; name: string; value: string }[]>([
+  {
+    name: '闸井',
+    id: '1',
+    value: '1',
+  },
+  {
+    name: '场站',
+    id: '2',
+    value: '2',
+  },
+  {
+    name: '管线',
+    id: '3',
+    value: '3',
+  },
+])
 const xAxisData = ref([])
 const data = ref([])
 const list = ref([])
-setTimeout(() => {
-  xAxisData.value = [
-    '第一分公司', '第二分公司', '第三分公司', '第四分公司', '第五分公司',
-  ]
-  data.value = [
-    {
-      name: '闸井浓度超限',
-      data: [1, 8, 5, 8, 4],
-    },
-    {
-      name: '场站浓度超限',
-      data: [8, 3, 6, 1, 7],
-    },
-    {
-      name: '疑似第三方破坏',
-      data: [4, 7, 5, 9, 4],
-    },
-  ]
-  list.value = xAxisData.value.map((item, index) => ({
-    dept: item,
-    wellOver: data.value[0].data[index],
-    senceOver: data.value[1].data[index],
-    thirdParty: data.value[2].data[index],
-  }))
-}, 1000)
+const loading = ref(true)
+// setTimeout(() => {
+//   xAxisData.value = [
+//     '第一分公司', '第二分公司', '第三分公司', '第四分公司', '第五分公司',
+//   ]
+//   data.value = [
+//     {
+//       name: '闸井浓度超限',
+//       data: [1, 8, 5, 8, 4],
+//     },
+//     {
+//       name: '场站浓度超限',
+//       data: [8, 3, 6, 1, 7],
+//     },
+//     {
+//       name: '疑似第三方破坏',
+//       data: [4, 7, 5, 9, 4],
+//     },
+//   ]
+//   list.value = xAxisData.value.map((item, index) => ({
+//     dept: item,
+//     wellOver: data.value[0].data[index],
+//     senceOver: data.value[1].data[index],
+//     thirdParty: data.value[2].data[index],
+//   }))
+// }, 1000)
+const resizePage = () => {
+  setTimeout(() => {
+    const resize = new Event('resize')
+    window.dispatchEvent(resize)
+  }, 500)
+}
+const fetchData = () => {
+  loading.value = true
+  getAlarmCompany(listQuery.value).then((res) => {
+    console.log(res.data, '各单位报警统计')
+    resizePage()
+    loading.value = false
+  }).catch(() => {
+    loading.value = false
+  })
+}
+onMounted(() => {
+  fetchData()
+})
 </script>
 
 <template>
@@ -47,49 +130,59 @@
     <template #search>
       <div class="search">
         <el-button
-          :class="listQuery.type === 'day' ? 'active' : ''" round size="small"
-          @click="selectTimeType('day')"
+          :class="listQuery.timeType === '1' ? 'active' : ''" round size="small"
+          style="margin: 0 5px;"
+          @click="selectTimeType('1')"
         >
           今日
         </el-button>
         <el-button
-          :class="listQuery.type === 'week' ? 'active' : ''" round size="small"
-          @click="selectTimeType('week')"
+          :class="listQuery.timeType === '2' ? 'active' : ''" round size="small"
+          style="margin: 0 5px;"
+          @click="selectTimeType('2')"
         >
           本周
         </el-button>
         <el-button
-          :class="listQuery.type === 'month' ? 'active' : ''" round size="small"
-          @click="selectTimeType('month')"
+          :class="listQuery.timeType === '3' ? 'active' : ''" round size="small"
+          style="margin: 0 5px;"
+          @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 v-for="item in ledgerTypeList" :key="item.id" :label="item.name" :value="item.id" />
+        </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
+          style="width: 380px;margin: 0 5px;" value-format="YYYY-MM-DD HH:mm:ss" range-separator="至"
+          start-placeholder="报警开始时间" end-placeholder="报警结束时间" clearable :shortcuts="shortcuts"
         />
-        <el-button type="primary" style="margin: 0 5px;">
+        <el-button type="primary" style="margin: 0 5px;" @click="fetchData">
           搜索
         </el-button>
       </div>
     </template>
     <template #content>
-      <div class="alarm-count">
+      <div v-loading="loading" class="alarm-count">
         <div class="bar">
           <bar-chart-vertical
+            v-show="xAxisData.length"
             :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' }"
+            :grid="{
+              top: 50,
+              left: 30,
+              right: 30,
+              bottom: 20,
+              containLabel: true, // 是否包含坐标轴的刻度标签
+            }"
           />
+          <el-empty v-show="!xAxisData.length" description="暂无数据" />
         </div>
         <div class="table">
           <el-table border :data="list" stripe style="width: 100%;" :height="440">
-            <el-table-column label="管理单位" prop="dept" align="center" />
+            <el-table-column label="管理单位" prop="dept" align="center" width="200" />
             <el-table-column label="闸井浓度超限" prop="wellOver" align="center" />
             <el-table-column label="场站浓度超限" prop="senceOver" align="center" />
             <el-table-column label="疑似第三方破坏" prop="thirdParty" align="center" />
diff --git a/src/views/home/alarm/count/components/locationAnalysis.vue b/src/views/home/alarm/count/components/locationAnalysis.vue
index 4265aaf..4cd5921 100644
--- a/src/views/home/alarm/count/components/locationAnalysis.vue
+++ b/src/views/home/alarm/count/components/locationAnalysis.vue
@@ -18,7 +18,7 @@
 // 开始结束时间
 const datetimerange = ref()
 // 默认当天
-datetimerange.value = [`${dayjs().format('YYYY-MM-DD')} 00:00:00`, dayjs().format('YYYY-MM-DD HH:mm:ss')]
+// datetimerange.value = [`${dayjs().format('YYYY-MM-DD')} 00:00:00`, dayjs().format('YYYY-MM-DD HH:mm:ss')]
 watch(() => datetimerange.value, (newVal) => {
   listQuery.value.begTime = ''
   listQuery.value.endTime = ''
@@ -29,6 +29,35 @@
     }
   }
 })
+const shortcuts = [
+  {
+    text: '近一周',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setDate(start.getDate() - 7)
+      return [start, end]
+    },
+  },
+  {
+    text: '近一个月',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setMonth(start.getMonth() - 1)
+      return [start, end]
+    },
+  },
+  {
+    text: '近三个月',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setMonth(start.getMonth() - 3)
+      return [start, end]
+    },
+  },
+]
 const selectTimeType = (type: string) => {
   listQuery.value.timeType = type
 }
@@ -52,13 +81,13 @@
     <!-- 查询条件 -->
     <template #search>
       <div class="search">
-        <el-button :class="listQuery.timeType === '1' ? 'active' : ''" round size="small" @click="selectTimeType('1')">
+        <el-button :class="listQuery.timeType === '1' ? 'active' : ''" round size="small" style="margin: 0 5px;" @click="selectTimeType('1')">
           今日
         </el-button>
-        <el-button :class="listQuery.timeType === '2' ? 'active' : ''" round size="small" @click="selectTimeType('2')">
+        <el-button :class="listQuery.timeType === '2' ? 'active' : ''" round size="small" style="margin: 0 5px;" @click="selectTimeType('2')">
           本周
         </el-button>
-        <el-button :class="listQuery.timeType === '3' ? 'active' : ''" round size="small" @click="selectTimeType('3')">
+        <el-button :class="listQuery.timeType === '3' ? 'active' : ''" round size="small" style="margin: 0 5px;" @click="selectTimeType('3')">
           本月
         </el-button>
         <el-select v-model="listQuery.ledgerType" placeholder="全部类别" clearable style="width: 180px;margin: 0 5px;">
@@ -68,8 +97,8 @@
         </el-select>
         <el-date-picker
           v-model="datetimerange" type="datetimerange" format="YYYY-MM-DD HH:mm:ss"
-          style="width: 360px;margin: 0 5px;" value-format="YYYY-MM-DD HH:mm:ss" range-separator="至"
-          start-placeholder="报警开始时间" end-placeholder="报警结束时间" clearable
+          style="width: 380px;margin: 0 5px;" value-format="YYYY-MM-DD HH:mm:ss" range-separator="至"
+          start-placeholder="报警开始时间" end-placeholder="报警结束时间" clearable :shortcuts="shortcuts"
         />
         <el-button type="primary" style="margin: 0 5px;" @click="fetchData">
           搜索
@@ -80,13 +109,13 @@
       <div class="alarm-count">
         <div class="table">
           <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="type" align="center" width="140" />
+            <el-table-column label="位号" prop="tagNumber" align="center" width="160" />
             <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-column label="标签" prop="marker" align="center" width="140" />
+            <el-table-column label="报警次数" prop="alarmSum" align="center" width="120" />
           </el-table>
         </div>
       </div>
diff --git a/src/views/home/alarm/count/components/trendAnalysis.vue b/src/views/home/alarm/count/components/trendAnalysis.vue
index 73e18b0..18cfb4c 100644
--- a/src/views/home/alarm/count/components/trendAnalysis.vue
+++ b/src/views/home/alarm/count/components/trendAnalysis.vue
@@ -5,49 +5,203 @@
  -->
 <script lang="ts" setup name="TrendAnalysis">
 import layout from './layout.vue'
+import { getAlarmTrend } from '@/api/home/alarm/count'
 const listQuery = ref({
-  type: 'day',
+  timeType: '2',
+  ledgerType: '',
+  endTime: '',
+  begTime: '',
+  deptid: '',
 })
+// 开始结束时间
+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 shortcuts = [
+  {
+    text: '近一周',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setDate(start.getDate() - 7)
+      return [start, end]
+    },
+  },
+  {
+    text: '近一个月',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setMonth(start.getMonth() - 1)
+      return [start, end]
+    },
+  },
+  {
+    text: '近三个月',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setMonth(start.getMonth() - 3)
+      return [start, end]
+    },
+  },
+]
 const selectTimeType = (type: string) => {
-  listQuery.value.type = type
+  listQuery.value.timeType = type
 }
-const xAxisData = ref([])
-const data = ref([])
+const columns = ref<any[]>([
+  {
+    text: '闸井浓度超限',
+    value: 'well',
+  },
+  {
+    text: '场站浓度超限',
+    value: 'station',
+  },
+  {
+    text: '管线浓度超限',
+    value: 'pipeline',
+  },
+])
+// 类别
+const ledgerTypeList = ref<{ id: string; name: string; value: string }[]>([
+  {
+    name: '闸井',
+    id: '1',
+    value: '1',
+  },
+  {
+    name: '场站',
+    id: '2',
+    value: '2',
+  },
+  {
+    name: '管线',
+    id: '3',
+    value: '3',
+  },
+])
+const xAxisData = ref<string[]>([])
+const data = ref<any[]>([])
 const list = ref([])
-setTimeout(() => {
-  xAxisData.value = [
-    '2024-07-01 12:11:12',
-    '2024-07-02 12:11:12',
-    '2024-07-03 12:11:12',
-    '2024-07-04 12:11:12',
-    '2024-07-05 12:11:12',
-    '2024-07-06 12:11:12',
-    '2024-07-07 12:11:12',
-  ]
-  data.value = [
-    {
-      name: '闸井浓度超限',
-      data: [1, 3, 5, 1, 4, 2, 7],
-      symbol: 'emptyCircle',
-    },
-    {
-      name: '场站浓度超限',
-      data: [2, 1, 4, 1, 5, 2, 9],
-      symbol: 'emptyCircle',
-    },
-    {
-      name: '闸井浓度超限',
-      data: [4, 3, 2, 4, 7, 9, 1],
-      symbol: 'emptyCircle',
-    },
-  ]
-  list.value = xAxisData.value.map((item, index) => ({
-    alarmTime: item,
-    wellOver: data.value[0].data[index],
-    senceOver: data.value[1].data[index],
-    thirdParty: data.value[2].data[index],
-  }))
-}, 1000)
+const loading = ref(true)
+// setTimeout(() => {
+//   xAxisData.value = [
+//     '2024-07-01 12:11:12',
+//     '2024-07-02 12:11:12',
+//     '2024-07-03 12:11:12',
+//     '2024-07-04 12:11:12',
+//     '2024-07-05 12:11:12',
+//     '2024-07-06 12:11:12',
+//     '2024-07-07 12:11:12',
+//   ]
+//   data.value = [
+//     {
+//       name: '闸井浓度超限',
+//       data: [1, 3, 5, 1, 4, 2, 7],
+//       symbol: 'emptyCircle',
+//     },
+//     {
+//       name: '场站浓度超限',
+//       data: [2, 1, 4, 1, 5, 2, 9],
+//       symbol: 'emptyCircle',
+//     },
+//     {
+//       name: '闸井浓度超限',
+//       data: [4, 3, 2, 4, 7, 9, 1],
+//       symbol: 'emptyCircle',
+//     },
+//   ]
+//   list.value = xAxisData.value.map((item, index) => ({
+//     alarmTime: item,
+//     wellOver: data.value[0].data[index],
+//     senceOver: data.value[1].data[index],
+//     thirdParty: data.value[2].data[index],
+//   }))
+// }, 1000)
+const resizePage = () => {
+  setTimeout(() => {
+    const resize = new Event('resize')
+    window.dispatchEvent(resize)
+  }, 500)
+}
+const fetchData = () => {
+  loading.value = true
+  const columnsDict = {
+    闸井浓度超限: 'well',
+    场站浓度超限: 'station',
+    管线浓度超限: 'pipeline',
+  } as { [key: string]: string }
+  getAlarmTrend(listQuery.value).then((res) => {
+    console.log(res.data, '报警趋势分析')
+    xAxisData.value = res.data.map((item: any) => item.date)
+    if (!listQuery.value.ledgerType) {
+      data.value = [
+        {
+          name: '闸井浓度超限',
+          data: res.data.map((item: any) => item['闸井浓度超限']),
+        },
+        {
+          name: '场站浓度超限',
+          data: res.data.map((item: any) => item['场站浓度超限']),
+        },
+        {
+          name: '管线浓度超限',
+          data: res.data.map((item: any) => item['管线浓度超限']),
+        },
+      ]
+    }
+    else if (listQuery.value.ledgerType === '1') {
+      data.value = [
+        {
+          name: '闸井浓度超限',
+          data: res.data.map((item: any) => item['闸井浓度超限']),
+        },
+      ]
+    }
+    else if (listQuery.value.ledgerType === '2') {
+      data.value = [
+        {
+          name: '场站浓度超限',
+          data: res.data.map((item: any) => item['场站浓度超限']),
+        },
+      ]
+    }
+    else if (listQuery.value.ledgerType === '3') {
+      data.value = [
+        {
+          name: '管线浓度超限',
+          data: res.data.map((item: any) => item['管线浓度超限']),
+        },
+      ]
+    }
+    list.value = res.data.map((item: any) => ({
+      date: item.date,
+      well: item['闸井浓度超限'],
+      station: item['场站浓度超限'],
+      pipeline: item['管线浓度超限'],
+    }))
+    columns.value = data.value.map((item: any) => ({
+      text: item.name,
+      value: columnsDict[item.name],
+    }))
+    resizePage()
+    loading.value = false
+  }).catch(() => {
+    loading.value = false
+  })
+}
+onMounted(() => {
+  fetchData()
+})
 </script>
 
 <template>
@@ -56,34 +210,30 @@
     <template #search>
       <div class="search">
         <el-button
-          :class="listQuery.type === 'day' ? 'active' : ''" round size="small"
-          @click="selectTimeType('day')"
-        >
-          今日
-        </el-button>
-        <el-button
-          :class="listQuery.type === 'week' ? 'active' : ''" round size="small"
-          @click="selectTimeType('week')"
+          :class="listQuery.timeType === '2' ? 'active' : ''" round size="small" style="margin: 0 5px;"
+          @click="selectTimeType('2')"
         >
           本周
         </el-button>
         <el-button
-          :class="listQuery.type === 'month' ? 'active' : ''" round size="small"
-          @click="selectTimeType('month')"
+          :class="listQuery.timeType === '3' ? 'active' : ''" round size="small" style="margin: 0 5px;"
+          @click="selectTimeType('3')"
         >
           本月
         </el-button>
-        <el-select v-model="listQuery.keywords" placeholder="全部类别" clearable style="width: 180px;margin: 0 5px;" />
+        <el-select v-model="listQuery.ledgerType" placeholder="全部类别" clearable style="width: 180px;margin: 0 5px;">
+          <el-option v-for="item in ledgerTypeList" :key="item.id" :label="item.name" :value="item.id" />
+        </el-select>
         <dept-select
-          v-model="listQuery.keywords" placeholder="管理单位" :clearable="true"
+          v-model="listQuery.deptid" placeholder="管理单位" :clearable="true"
           style="width: 220px;margin: 0 5px;"
         />
         <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
+          style="width: 380px;margin: 0 5px;" value-format="YYYY-MM-DD HH:mm:ss" range-separator="至"
+          start-placeholder="报警开始时间" end-placeholder="报警结束时间" clearable :shortcuts="shortcuts"
         />
-        <el-button type="primary" style="margin: 0 5px;">
+        <el-button type="primary" style="margin: 0 5px;" @click="fetchData">
           搜索
         </el-button>
       </div>
@@ -94,14 +244,22 @@
           <line-chart
             :x-axis-data="xAxisData" :data="data" :gradient="false"
             :legend="{ itemWidth: 8, itemHeight: 8, type: 'scroll', orient: 'horizontal', icon: 'roundRect', right: '0', top: '10' }"
+            :grid="{
+              top: 50,
+              left: 30,
+              right: 30,
+              bottom: 20,
+              containLabel: true, // 是否包含坐标轴的刻度标签
+            }"
           />
         </div>
         <div class="table">
           <el-table border :data="list" stripe style="width: 100%;" :height="440">
-            <el-table-column label="日期" prop="alarmTime" align="center" />
-            <el-table-column label="闸井浓度超限" prop="wellOver" align="center" />
-            <el-table-column label="场站浓度超限" prop="senceOver" align="center" />
-            <el-table-column label="疑似第三方破坏" prop="thirdParty" align="center" />
+            <el-table-column label="日期" prop="date" align="center" width="190" />
+            <el-table-column
+              v-for="item in columns" :key="item.text" :label="item.text" :prop="item.value"
+              align="center"
+            />
           </el-table>
         </div>
       </div>
diff --git a/src/views/home/alarm/current/components/detail.vue b/src/views/home/alarm/current/components/detail.vue
index 4fb61d3..e200fe3 100644
--- a/src/views/home/alarm/current/components/detail.vue
+++ b/src/views/home/alarm/current/components/detail.vue
@@ -7,6 +7,7 @@
 import dayjs from 'dayjs'
 import { ElMessage } from 'element-plus'
 import { alarmProcessNode, detailAlarm } from '@/api/home/alarm/current'
+import { getAlarmDetail } from '@/api/home/alarm/history'
 import { toHumpObject } from '@/utils/String'
 import { getAlarmLevelListPage, getAlarmTypeListPage } from '@/api/home/rule/alarm'
 import { getDateDiff } from '@/utils/dayjs'
@@ -44,7 +45,7 @@
   },
   {
     text: '报警时间',
-    value: 'ts',
+    value: $route.query.type === 'history' ? 'alarmTime' : 'ts',
     align: 'center',
   },
   {
@@ -89,7 +90,7 @@
   },
   {
     text: '处置时长',
-    value: 'duration',
+    value: $route.query.type === 'history' ? 'cancelDuration' : 'duration',
     align: 'center',
   },
   {
@@ -107,8 +108,8 @@
 const fetchDetail = async () => {
   loading.value = true
   const res1 = await getAlarmLevelListPage({ offset: 1, limit: 9999 })
-  const res2 = await getAlarmTypeListPage({ offset: 1, limit: 9999 })
-  detailAlarm($route.query.id as string).then((res) => {
+  const res2 = await getAlarmTypeListPage({ offset: 1, limit: 9999 });
+  ($route.query.type === 'history' ? getAlarmDetail : detailAlarm)($route.query.id as string).then((res) => {
     detailInfo.value = toHumpObject(res.data)
     detailInfo.value.realAlarmName = detailInfo.value.realAlarm === '1' ? '报警' : '误报'
     detailInfo.value.alarmTypeName = res2.data.rows.filter((item: any) => item.id === detailInfo.value.alarmTypeId)[0]?.alarmType || ''
@@ -183,8 +184,12 @@
           </template>
           <div style="padding: 25px;">
             <el-timeline>
-              <el-timeline-item v-for="(item, index) in alarmDynamics" :key="index" :timestamp="item.approvalTime" type="primary">
-                {{ `${item.approvalPerson}${item.dept_name ? '(' : ''}${item.dept_name}${item.dept_name ? ')' : ''}${item.process_name}` }}
+              <el-timeline-item
+                v-for="(item, index) in alarmDynamics" :key="index" :timestamp="item.approvalTime"
+                type="primary"
+              >
+                {{ `${item.approvalPerson}${item.dept_name ? '(' : ''}${item.dept_name}${item.dept_name ? ')'
+                  : ''}${item.process_name}` }}
               </el-timeline-item>
             </el-timeline>
           </div>
diff --git a/src/views/home/alarm/current/index.vue b/src/views/home/alarm/current/index.vue
index 52b2be1..8b36a01 100644
--- a/src/views/home/alarm/current/index.vue
+++ b/src/views/home/alarm/current/index.vue
@@ -4,10 +4,10 @@
   Date: 2023-06-28
  -->
 <script lang="ts" setup name="CurrentAlarm">
-import { ElMessage } from 'element-plus'
+import { ElMessage, ElMessageBox } from 'element-plus'
 import { ArrowLeftBold, ArrowRightBold } from '@element-plus/icons-vue'
 import MapCom from './components/map.vue'
-import { getCurrentAlarmListPage, viewAlarm } from '@/api/home/alarm/current'
+import { batchDelete, getCurrentAlarmListPage, viewAlarm } from '@/api/home/alarm/current'
 import { getDictByCode } from '@/api/system/dict'
 import { getAlarmLevelListPage, getAlarmTypeListPage } from '@/api/home/rule/alarm'
 import { getDeviceTypeListPage } from '@/api/home/device/type'
@@ -66,6 +66,35 @@
     }
   }
 })
+const shortcuts = [
+  {
+    text: '近一周',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setDate(start.getDate() - 7)
+      return [start, end]
+    },
+  },
+  {
+    text: '近一个月',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setMonth(start.getMonth() - 1)
+      return [start, end]
+    },
+  },
+  {
+    text: '近三个月',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setMonth(start.getMonth() - 3)
+      return [start, end]
+    },
+  },
+]
 // 查询数据
 const fetchData = () => {
   loadingTable.value = true
@@ -140,8 +169,8 @@
 const detail = (row: any) => {
   mapData.value = row
   switchMode('map')
-  row.lngGaode = '116.398043'
-  row.latGaode = '39.901552'
+  // row.lngGaode = '116.398043'
+  // row.latGaode = '39.901552'
   // 绘制点
   const draw = () => {
     mapRef.value.mapRef.removeMarker()
@@ -209,6 +238,35 @@
   })
 }
 fetchDict()
+const { proxy } = getCurrentInstance() as any
+// 多选
+const multipleTable = ref([])
+const handleSelectionChange = (val: any) => {
+  console.log(val, '多选数据')
+  multipleTable.value = val
+}
+// 批量删除
+const batchDeleteRow = () => {
+  if (!multipleTable.value.length) {
+    ElMessage.warning('请先选中数据')
+    return
+  }
+  ElMessageBox.confirm(
+    '确定要删除选中的数据吗？',
+    '确认操作',
+    {
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+      type: 'warning',
+    },
+  ).then(() => {
+    batchDelete(multipleTable.value.map((item: any) => item.id)).then(() => {
+      ElMessage.success('操作成功')
+      multipleTable.value = []
+      fetchData()
+    })
+  })
+}
 </script>
 
 <template>
@@ -255,7 +313,7 @@
       </search-item>
       <search-item>
         <el-date-picker
-          v-model="datetimerange" type="datetimerange" format="YYYY-MM-DD HH:mm:ss"
+          v-model="datetimerange" type="datetimerange" format="YYYY-MM-DD HH:mm:ss" :shortcuts="shortcuts"
           value-format="YYYY-MM-DD HH:mm:ss" range-separator="至" start-placeholder="报警开始时间" end-placeholder="报警结束时间"
           clearable
         />
@@ -274,6 +332,9 @@
           <template #btns-right>
             <!-- 操作 -->
             <div>
+              <el-button v-if="proxy.hasPerm('/alarm/current/delete')" type="primary" @click="batchDeleteRow">
+                批量删除
+              </el-button>
               <el-button type="primary">
                 导出
               </el-button>
@@ -282,7 +343,10 @@
           <!-- 查询结果Table显示 -->
           <normal-table
             :data="list1" :total="total" :columns="columnsConfig" :query="listQuery"
-            :list-loading="loadingTable" :height="tableHeight - 50 - 70" @change="changePage"
+            :list-loading="loadingTable" :height="tableHeight - 50 - 70"
+            :is-multi="proxy.hasPerm('/alarm/current/delete')"
+            :is-showmulti-select="proxy.hasPerm('/alarm/current/delete')" @change="changePage"
+            @multiSelect="handleSelectionChange"
           >
             <template #preColumns>
               <el-table-column label="序号" width="55" align="center">
diff --git a/src/views/home/alarm/history/index.vue b/src/views/home/alarm/history/index.vue
index 87bb167..74ca152 100644
--- a/src/views/home/alarm/history/index.vue
+++ b/src/views/home/alarm/history/index.vue
@@ -80,6 +80,35 @@
     }
   }
 })
+const shortcuts = [
+  {
+    text: '近一周',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setDate(start.getDate() - 7)
+      return [start, end]
+    },
+  },
+  {
+    text: '近一个月',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setMonth(start.getMonth() - 1)
+      return [start, end]
+    },
+  },
+  {
+    text: '近三个月',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setMonth(start.getMonth() - 3)
+      return [start, end]
+    },
+  },
+]
 // 查询数据
 const fetchData = () => {
   loadingTable.value = true
@@ -127,10 +156,11 @@
 const $router = useRouter()
 const moreData = (row: any) => {
   $router.push({
-    name: 'AlarmCurrentDetail',
+    name: 'AlarmHistoryDetail',
     query: {
       id: row.id,
       row: JSON.stringify(row),
+      type: 'history',
     },
   })
 }
@@ -218,7 +248,7 @@
       </search-item>
       <search-item>
         <el-date-picker
-          v-model="datetimerange" type="datetimerange" format="YYYY-MM-DD HH:mm:ss"
+          v-model="datetimerange" type="datetimerange" format="YYYY-MM-DD HH:mm:ss" :shortcuts="shortcuts"
           value-format="YYYY-MM-DD HH:mm:ss" range-separator="至" start-placeholder="报警开始时间" end-placeholder="报警结束时间"
           clearable
         />
diff --git a/src/views/home/device/product/index.vue b/src/views/home/device/product/index.vue
index 1bb3d99..2300270 100644
--- a/src/views/home/device/product/index.vue
+++ b/src/views/home/device/product/index.vue
@@ -21,8 +21,8 @@
   { text: '设备型号', value: 'deviceModel', align: 'center' },
   { text: '厂商', value: 'manufacturerName', align: 'center' },
   { text: '通讯协议', value: 'protocolName', align: 'center' },
-  { text: '接入方式', value: 'accessMethodName', align: 'center' },
-  { text: '创建时间', value: 'ts', align: 'center' },
+  { text: '接入方式', value: 'accessMethodName', align: 'center', width: '140' },
+  { text: '创建时间', value: 'ts', align: 'center', width: '200' },
 ])
 // 最终展示列
 const columnsConfig = ref([])
diff --git a/src/views/home/device/type/index.vue b/src/views/home/device/type/index.vue
index 56d7f65..7df5933 100644
--- a/src/views/home/device/type/index.vue
+++ b/src/views/home/device/type/index.vue
@@ -14,12 +14,12 @@
 const total = ref(0)
 // 初始展示列
 const columns = ref<any>([
-  { text: '设备类型代号', value: 'typeCode', align: 'center' },
+  { text: '设备类型代号', value: 'typeCode', align: 'center', width: '110' },
   { text: '设备类型', value: 'typeName', align: 'center' },
   { text: '描述', value: 'typeDescription', align: 'center' },
   { text: '监测对象', value: 'watchObjectName', align: 'center' },
-  { text: '是否启用', value: 'isUsedName', align: 'center' },
-  { text: '操作时间', value: 'ts', align: 'center' },
+  { text: '是否启用', value: 'isUsedName', align: 'center', width: '110' },
+  { text: '操作时间', value: 'ts', align: 'center', width: '200' },
 ])
 // 最终展示列
 const columnsConfig = ref([])

diff --git a/src/api/home/alarm/count.ts b/src/api/home/alarm/count.ts
index 1f4b59a..d5d9244 100644
--- a/src/api/home/alarm/count.ts
+++ b/src/api/home/alarm/count.ts
@@ -34,3 +34,11 @@
     data,
   })
 }
+// 报警趋势分析
+export function getAlarmTrend(data: any) {
+  return request({
+    url: '/statics/alarmRecords/alarmTrend',
+    method: 'post',
+    data,
+  })
+}
diff --git a/src/api/home/alarm/current.ts b/src/api/home/alarm/current.ts
index ec20f64..ac3387f 100644
--- a/src/api/home/alarm/current.ts
+++ b/src/api/home/alarm/current.ts
@@ -57,3 +57,13 @@
     },
   })
 }
+// 批量删除
+export function batchDelete(ids: any) {
+  return request({
+    url: '/system/alarmRecords/batchDelete',
+    method: 'post',
+    data: {
+      ids,
+    },
+  })
+}
diff --git a/src/api/home/alarm/history.ts b/src/api/home/alarm/history.ts
index 5f55e82..44cf851 100644
--- a/src/api/home/alarm/history.ts
+++ b/src/api/home/alarm/history.ts
@@ -11,3 +11,13 @@
     data,
   })
 }
+// 详情
+export function getAlarmDetail(id: any) {
+  return request({
+    url: '/system/alarmRecords/historyAlarmDetail',
+    method: 'post',
+    data: {
+      id,
+    },
+  })
+}
diff --git a/src/components/Echart/LineChart.vue b/src/components/Echart/LineChart.vue
index 2733161..b811f29 100644
--- a/src/components/Echart/LineChart.vue
+++ b/src/components/Echart/LineChart.vue
@@ -207,7 +207,7 @@
         },
       },
       valueFormatter: (value: string | number) => {
-        return value ? value + props.unit : ''
+        return value ? value + props.unit : value === 0 ? '0' : ''
       },
     }, // 提示框
     xAxis: [
diff --git a/src/router/modules/pc.ts b/src/router/modules/pc.ts
index 9b058fa..f3edac9 100644
--- a/src/router/modules/pc.ts
+++ b/src/router/modules/pc.ts
@@ -94,6 +94,19 @@
         },
       },
       {
+        path: '/history/detail',
+        component: () => import('@/views/home/alarm/current/components/detail.vue'),
+        name: 'AlarmHistoryDetail',
+        meta: {
+          title: '报警详情',
+          icon: 'ep:key',
+          sidebar: false,
+          breadcrumb: true,
+          activeMenu: '/alarm/history',
+          auth: '/alarm/history',
+        },
+      },
+      {
         path: 'count',
         component: () => import('@/views/home/alarm/count/index.vue'),
         name: 'AlarmCount',
diff --git a/src/views/home/alarm/count/components/alarmStatistics.vue b/src/views/home/alarm/count/components/alarmStatistics.vue
index b088de2..7aa930f 100644
--- a/src/views/home/alarm/count/components/alarmStatistics.vue
+++ b/src/views/home/alarm/count/components/alarmStatistics.vue
@@ -34,13 +34,12 @@
     value: '3',
   },
 ])
-const xAxisData = ref([])
-const data = ref([])
+const xAxisData = ref<string[]>([])
+const data = ref<any[]>([])
 const list = ref([])
 const loading = ref(true)
 // 开始结束时间
 const datetimerange = ref()
-// 默认当天
 watch(() => datetimerange.value, (newVal) => {
   listQuery.value.begTime = ''
   listQuery.value.endTime = ''
@@ -51,6 +50,35 @@
     }
   }
 })
+const shortcuts = [
+  {
+    text: '近一周',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setDate(start.getDate() - 7)
+      return [start, end]
+    },
+  },
+  {
+    text: '近一个月',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setMonth(start.getMonth() - 1)
+      return [start, end]
+    },
+  },
+  {
+    text: '近三个月',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setMonth(start.getMonth() - 3)
+      return [start, end]
+    },
+  },
+]
 // setTimeout(() => {
 //   xAxisData.value = [
 //     '闸井浓度超限', '场站浓度超限', '场站火焰报警', '疑似第三方破坏', '场站烟雾报警',
@@ -66,10 +94,25 @@
 //     value: data.value[0].data[index],
 //   }))
 // }, 1000)
+const resizePage = () => {
+  setTimeout(() => {
+    const resize = new Event('resize')
+    window.dispatchEvent(resize)
+  }, 500)
+}
 const fetchData = () => {
   loading.value = true
   getAlarmType(listQuery.value).then((res) => {
-    console.log(res.data, '各类报警统计')
+    // console.log(res.data, '各类报警统计')
+    xAxisData.value = res.data.map((item: any) => item.name)
+    data.value = [
+      {
+        name: '报警数量',
+        data: res.data.map((item: any) => item.value),
+      },
+    ]
+    list.value = res.data
+    resizePage
     loading.value = false
   }).catch(() => {
     loading.value = false
@@ -105,8 +148,8 @@
           style="width: 220px;margin: 0 5px;"
         />
         <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="至"
+          v-model="datetimerange" type="datetimerange" format="YYYY-MM-DD HH:mm:ss" :shortcuts="shortcuts"
+          style="width: 380px;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;" @click="fetchData">
@@ -118,8 +161,8 @@
       <div v-loading="loading" class="alarm-count">
         <div class="bar">
           <bar-chart-vertical
-            v-show="xAxisData.length"
-            :x-axis-data="xAxisData" :bar-coner="0" :data="data" :colors="[]" :bar-width="15"
+            v-show="xAxisData.length" :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' }"
             :grid="{
               top: 50,
@@ -133,7 +176,7 @@
         </div>
         <div class="table">
           <el-table border :data="list" stripe style="width: 100%;" :height="440">
-            <el-table-column label="报警类型" prop="alarmType" align="center" />
+            <el-table-column label="报警类型" prop="name" align="center" />
             <el-table-column label="报警数量" prop="value" align="center" />
           </el-table>
         </div>
diff --git a/src/views/home/alarm/count/components/deptCount.vue b/src/views/home/alarm/count/components/deptCount.vue
index 1ca5482..798bfd2 100644
--- a/src/views/home/alarm/count/components/deptCount.vue
+++ b/src/views/home/alarm/count/components/deptCount.vue
@@ -5,40 +5,123 @@
  -->
 <script lang="ts" setup name="AlarmCount">
 import layout from './layout.vue'
+import { getAlarmCompany } from '@/api/home/alarm/count'
 const listQuery = ref({
-  type: 'day',
+  begTime: '',
+  endTime: '',
+  ledgerType: '',
+  timeType: '1',
 })
 const selectTimeType = (type: string) => {
-  listQuery.value.type = type
+  listQuery.value.timeType = type
 }
+// 开始结束时间
+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 shortcuts = [
+  {
+    text: '近一周',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setDate(start.getDate() - 7)
+      return [start, end]
+    },
+  },
+  {
+    text: '近一个月',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setMonth(start.getMonth() - 1)
+      return [start, end]
+    },
+  },
+  {
+    text: '近三个月',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setMonth(start.getMonth() - 3)
+      return [start, end]
+    },
+  },
+]
+// 类别
+const ledgerTypeList = ref<{ id: string; name: string; value: string }[]>([
+  {
+    name: '闸井',
+    id: '1',
+    value: '1',
+  },
+  {
+    name: '场站',
+    id: '2',
+    value: '2',
+  },
+  {
+    name: '管线',
+    id: '3',
+    value: '3',
+  },
+])
 const xAxisData = ref([])
 const data = ref([])
 const list = ref([])
-setTimeout(() => {
-  xAxisData.value = [
-    '第一分公司', '第二分公司', '第三分公司', '第四分公司', '第五分公司',
-  ]
-  data.value = [
-    {
-      name: '闸井浓度超限',
-      data: [1, 8, 5, 8, 4],
-    },
-    {
-      name: '场站浓度超限',
-      data: [8, 3, 6, 1, 7],
-    },
-    {
-      name: '疑似第三方破坏',
-      data: [4, 7, 5, 9, 4],
-    },
-  ]
-  list.value = xAxisData.value.map((item, index) => ({
-    dept: item,
-    wellOver: data.value[0].data[index],
-    senceOver: data.value[1].data[index],
-    thirdParty: data.value[2].data[index],
-  }))
-}, 1000)
+const loading = ref(true)
+// setTimeout(() => {
+//   xAxisData.value = [
+//     '第一分公司', '第二分公司', '第三分公司', '第四分公司', '第五分公司',
+//   ]
+//   data.value = [
+//     {
+//       name: '闸井浓度超限',
+//       data: [1, 8, 5, 8, 4],
+//     },
+//     {
+//       name: '场站浓度超限',
+//       data: [8, 3, 6, 1, 7],
+//     },
+//     {
+//       name: '疑似第三方破坏',
+//       data: [4, 7, 5, 9, 4],
+//     },
+//   ]
+//   list.value = xAxisData.value.map((item, index) => ({
+//     dept: item,
+//     wellOver: data.value[0].data[index],
+//     senceOver: data.value[1].data[index],
+//     thirdParty: data.value[2].data[index],
+//   }))
+// }, 1000)
+const resizePage = () => {
+  setTimeout(() => {
+    const resize = new Event('resize')
+    window.dispatchEvent(resize)
+  }, 500)
+}
+const fetchData = () => {
+  loading.value = true
+  getAlarmCompany(listQuery.value).then((res) => {
+    console.log(res.data, '各单位报警统计')
+    resizePage()
+    loading.value = false
+  }).catch(() => {
+    loading.value = false
+  })
+}
+onMounted(() => {
+  fetchData()
+})
 </script>
 
 <template>
@@ -47,49 +130,59 @@
     <template #search>
       <div class="search">
         <el-button
-          :class="listQuery.type === 'day' ? 'active' : ''" round size="small"
-          @click="selectTimeType('day')"
+          :class="listQuery.timeType === '1' ? 'active' : ''" round size="small"
+          style="margin: 0 5px;"
+          @click="selectTimeType('1')"
         >
           今日
         </el-button>
         <el-button
-          :class="listQuery.type === 'week' ? 'active' : ''" round size="small"
-          @click="selectTimeType('week')"
+          :class="listQuery.timeType === '2' ? 'active' : ''" round size="small"
+          style="margin: 0 5px;"
+          @click="selectTimeType('2')"
         >
           本周
         </el-button>
         <el-button
-          :class="listQuery.type === 'month' ? 'active' : ''" round size="small"
-          @click="selectTimeType('month')"
+          :class="listQuery.timeType === '3' ? 'active' : ''" round size="small"
+          style="margin: 0 5px;"
+          @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 v-for="item in ledgerTypeList" :key="item.id" :label="item.name" :value="item.id" />
+        </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
+          style="width: 380px;margin: 0 5px;" value-format="YYYY-MM-DD HH:mm:ss" range-separator="至"
+          start-placeholder="报警开始时间" end-placeholder="报警结束时间" clearable :shortcuts="shortcuts"
         />
-        <el-button type="primary" style="margin: 0 5px;">
+        <el-button type="primary" style="margin: 0 5px;" @click="fetchData">
           搜索
         </el-button>
       </div>
     </template>
     <template #content>
-      <div class="alarm-count">
+      <div v-loading="loading" class="alarm-count">
         <div class="bar">
           <bar-chart-vertical
+            v-show="xAxisData.length"
             :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' }"
+            :grid="{
+              top: 50,
+              left: 30,
+              right: 30,
+              bottom: 20,
+              containLabel: true, // 是否包含坐标轴的刻度标签
+            }"
           />
+          <el-empty v-show="!xAxisData.length" description="暂无数据" />
         </div>
         <div class="table">
           <el-table border :data="list" stripe style="width: 100%;" :height="440">
-            <el-table-column label="管理单位" prop="dept" align="center" />
+            <el-table-column label="管理单位" prop="dept" align="center" width="200" />
             <el-table-column label="闸井浓度超限" prop="wellOver" align="center" />
             <el-table-column label="场站浓度超限" prop="senceOver" align="center" />
             <el-table-column label="疑似第三方破坏" prop="thirdParty" align="center" />
diff --git a/src/views/home/alarm/count/components/locationAnalysis.vue b/src/views/home/alarm/count/components/locationAnalysis.vue
index 4265aaf..4cd5921 100644
--- a/src/views/home/alarm/count/components/locationAnalysis.vue
+++ b/src/views/home/alarm/count/components/locationAnalysis.vue
@@ -18,7 +18,7 @@
 // 开始结束时间
 const datetimerange = ref()
 // 默认当天
-datetimerange.value = [`${dayjs().format('YYYY-MM-DD')} 00:00:00`, dayjs().format('YYYY-MM-DD HH:mm:ss')]
+// datetimerange.value = [`${dayjs().format('YYYY-MM-DD')} 00:00:00`, dayjs().format('YYYY-MM-DD HH:mm:ss')]
 watch(() => datetimerange.value, (newVal) => {
   listQuery.value.begTime = ''
   listQuery.value.endTime = ''
@@ -29,6 +29,35 @@
     }
   }
 })
+const shortcuts = [
+  {
+    text: '近一周',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setDate(start.getDate() - 7)
+      return [start, end]
+    },
+  },
+  {
+    text: '近一个月',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setMonth(start.getMonth() - 1)
+      return [start, end]
+    },
+  },
+  {
+    text: '近三个月',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setMonth(start.getMonth() - 3)
+      return [start, end]
+    },
+  },
+]
 const selectTimeType = (type: string) => {
   listQuery.value.timeType = type
 }
@@ -52,13 +81,13 @@
     <!-- 查询条件 -->
     <template #search>
       <div class="search">
-        <el-button :class="listQuery.timeType === '1' ? 'active' : ''" round size="small" @click="selectTimeType('1')">
+        <el-button :class="listQuery.timeType === '1' ? 'active' : ''" round size="small" style="margin: 0 5px;" @click="selectTimeType('1')">
           今日
         </el-button>
-        <el-button :class="listQuery.timeType === '2' ? 'active' : ''" round size="small" @click="selectTimeType('2')">
+        <el-button :class="listQuery.timeType === '2' ? 'active' : ''" round size="small" style="margin: 0 5px;" @click="selectTimeType('2')">
           本周
         </el-button>
-        <el-button :class="listQuery.timeType === '3' ? 'active' : ''" round size="small" @click="selectTimeType('3')">
+        <el-button :class="listQuery.timeType === '3' ? 'active' : ''" round size="small" style="margin: 0 5px;" @click="selectTimeType('3')">
           本月
         </el-button>
         <el-select v-model="listQuery.ledgerType" placeholder="全部类别" clearable style="width: 180px;margin: 0 5px;">
@@ -68,8 +97,8 @@
         </el-select>
         <el-date-picker
           v-model="datetimerange" type="datetimerange" format="YYYY-MM-DD HH:mm:ss"
-          style="width: 360px;margin: 0 5px;" value-format="YYYY-MM-DD HH:mm:ss" range-separator="至"
-          start-placeholder="报警开始时间" end-placeholder="报警结束时间" clearable
+          style="width: 380px;margin: 0 5px;" value-format="YYYY-MM-DD HH:mm:ss" range-separator="至"
+          start-placeholder="报警开始时间" end-placeholder="报警结束时间" clearable :shortcuts="shortcuts"
         />
         <el-button type="primary" style="margin: 0 5px;" @click="fetchData">
           搜索
@@ -80,13 +109,13 @@
       <div class="alarm-count">
         <div class="table">
           <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="type" align="center" width="140" />
+            <el-table-column label="位号" prop="tagNumber" align="center" width="160" />
             <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-column label="标签" prop="marker" align="center" width="140" />
+            <el-table-column label="报警次数" prop="alarmSum" align="center" width="120" />
           </el-table>
         </div>
       </div>
diff --git a/src/views/home/alarm/count/components/trendAnalysis.vue b/src/views/home/alarm/count/components/trendAnalysis.vue
index 73e18b0..18cfb4c 100644
--- a/src/views/home/alarm/count/components/trendAnalysis.vue
+++ b/src/views/home/alarm/count/components/trendAnalysis.vue
@@ -5,49 +5,203 @@
  -->
 <script lang="ts" setup name="TrendAnalysis">
 import layout from './layout.vue'
+import { getAlarmTrend } from '@/api/home/alarm/count'
 const listQuery = ref({
-  type: 'day',
+  timeType: '2',
+  ledgerType: '',
+  endTime: '',
+  begTime: '',
+  deptid: '',
 })
+// 开始结束时间
+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 shortcuts = [
+  {
+    text: '近一周',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setDate(start.getDate() - 7)
+      return [start, end]
+    },
+  },
+  {
+    text: '近一个月',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setMonth(start.getMonth() - 1)
+      return [start, end]
+    },
+  },
+  {
+    text: '近三个月',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setMonth(start.getMonth() - 3)
+      return [start, end]
+    },
+  },
+]
 const selectTimeType = (type: string) => {
-  listQuery.value.type = type
+  listQuery.value.timeType = type
 }
-const xAxisData = ref([])
-const data = ref([])
+const columns = ref<any[]>([
+  {
+    text: '闸井浓度超限',
+    value: 'well',
+  },
+  {
+    text: '场站浓度超限',
+    value: 'station',
+  },
+  {
+    text: '管线浓度超限',
+    value: 'pipeline',
+  },
+])
+// 类别
+const ledgerTypeList = ref<{ id: string; name: string; value: string }[]>([
+  {
+    name: '闸井',
+    id: '1',
+    value: '1',
+  },
+  {
+    name: '场站',
+    id: '2',
+    value: '2',
+  },
+  {
+    name: '管线',
+    id: '3',
+    value: '3',
+  },
+])
+const xAxisData = ref<string[]>([])
+const data = ref<any[]>([])
 const list = ref([])
-setTimeout(() => {
-  xAxisData.value = [
-    '2024-07-01 12:11:12',
-    '2024-07-02 12:11:12',
-    '2024-07-03 12:11:12',
-    '2024-07-04 12:11:12',
-    '2024-07-05 12:11:12',
-    '2024-07-06 12:11:12',
-    '2024-07-07 12:11:12',
-  ]
-  data.value = [
-    {
-      name: '闸井浓度超限',
-      data: [1, 3, 5, 1, 4, 2, 7],
-      symbol: 'emptyCircle',
-    },
-    {
-      name: '场站浓度超限',
-      data: [2, 1, 4, 1, 5, 2, 9],
-      symbol: 'emptyCircle',
-    },
-    {
-      name: '闸井浓度超限',
-      data: [4, 3, 2, 4, 7, 9, 1],
-      symbol: 'emptyCircle',
-    },
-  ]
-  list.value = xAxisData.value.map((item, index) => ({
-    alarmTime: item,
-    wellOver: data.value[0].data[index],
-    senceOver: data.value[1].data[index],
-    thirdParty: data.value[2].data[index],
-  }))
-}, 1000)
+const loading = ref(true)
+// setTimeout(() => {
+//   xAxisData.value = [
+//     '2024-07-01 12:11:12',
+//     '2024-07-02 12:11:12',
+//     '2024-07-03 12:11:12',
+//     '2024-07-04 12:11:12',
+//     '2024-07-05 12:11:12',
+//     '2024-07-06 12:11:12',
+//     '2024-07-07 12:11:12',
+//   ]
+//   data.value = [
+//     {
+//       name: '闸井浓度超限',
+//       data: [1, 3, 5, 1, 4, 2, 7],
+//       symbol: 'emptyCircle',
+//     },
+//     {
+//       name: '场站浓度超限',
+//       data: [2, 1, 4, 1, 5, 2, 9],
+//       symbol: 'emptyCircle',
+//     },
+//     {
+//       name: '闸井浓度超限',
+//       data: [4, 3, 2, 4, 7, 9, 1],
+//       symbol: 'emptyCircle',
+//     },
+//   ]
+//   list.value = xAxisData.value.map((item, index) => ({
+//     alarmTime: item,
+//     wellOver: data.value[0].data[index],
+//     senceOver: data.value[1].data[index],
+//     thirdParty: data.value[2].data[index],
+//   }))
+// }, 1000)
+const resizePage = () => {
+  setTimeout(() => {
+    const resize = new Event('resize')
+    window.dispatchEvent(resize)
+  }, 500)
+}
+const fetchData = () => {
+  loading.value = true
+  const columnsDict = {
+    闸井浓度超限: 'well',
+    场站浓度超限: 'station',
+    管线浓度超限: 'pipeline',
+  } as { [key: string]: string }
+  getAlarmTrend(listQuery.value).then((res) => {
+    console.log(res.data, '报警趋势分析')
+    xAxisData.value = res.data.map((item: any) => item.date)
+    if (!listQuery.value.ledgerType) {
+      data.value = [
+        {
+          name: '闸井浓度超限',
+          data: res.data.map((item: any) => item['闸井浓度超限']),
+        },
+        {
+          name: '场站浓度超限',
+          data: res.data.map((item: any) => item['场站浓度超限']),
+        },
+        {
+          name: '管线浓度超限',
+          data: res.data.map((item: any) => item['管线浓度超限']),
+        },
+      ]
+    }
+    else if (listQuery.value.ledgerType === '1') {
+      data.value = [
+        {
+          name: '闸井浓度超限',
+          data: res.data.map((item: any) => item['闸井浓度超限']),
+        },
+      ]
+    }
+    else if (listQuery.value.ledgerType === '2') {
+      data.value = [
+        {
+          name: '场站浓度超限',
+          data: res.data.map((item: any) => item['场站浓度超限']),
+        },
+      ]
+    }
+    else if (listQuery.value.ledgerType === '3') {
+      data.value = [
+        {
+          name: '管线浓度超限',
+          data: res.data.map((item: any) => item['管线浓度超限']),
+        },
+      ]
+    }
+    list.value = res.data.map((item: any) => ({
+      date: item.date,
+      well: item['闸井浓度超限'],
+      station: item['场站浓度超限'],
+      pipeline: item['管线浓度超限'],
+    }))
+    columns.value = data.value.map((item: any) => ({
+      text: item.name,
+      value: columnsDict[item.name],
+    }))
+    resizePage()
+    loading.value = false
+  }).catch(() => {
+    loading.value = false
+  })
+}
+onMounted(() => {
+  fetchData()
+})
 </script>
 
 <template>
@@ -56,34 +210,30 @@
     <template #search>
       <div class="search">
         <el-button
-          :class="listQuery.type === 'day' ? 'active' : ''" round size="small"
-          @click="selectTimeType('day')"
-        >
-          今日
-        </el-button>
-        <el-button
-          :class="listQuery.type === 'week' ? 'active' : ''" round size="small"
-          @click="selectTimeType('week')"
+          :class="listQuery.timeType === '2' ? 'active' : ''" round size="small" style="margin: 0 5px;"
+          @click="selectTimeType('2')"
         >
           本周
         </el-button>
         <el-button
-          :class="listQuery.type === 'month' ? 'active' : ''" round size="small"
-          @click="selectTimeType('month')"
+          :class="listQuery.timeType === '3' ? 'active' : ''" round size="small" style="margin: 0 5px;"
+          @click="selectTimeType('3')"
         >
           本月
         </el-button>
-        <el-select v-model="listQuery.keywords" placeholder="全部类别" clearable style="width: 180px;margin: 0 5px;" />
+        <el-select v-model="listQuery.ledgerType" placeholder="全部类别" clearable style="width: 180px;margin: 0 5px;">
+          <el-option v-for="item in ledgerTypeList" :key="item.id" :label="item.name" :value="item.id" />
+        </el-select>
         <dept-select
-          v-model="listQuery.keywords" placeholder="管理单位" :clearable="true"
+          v-model="listQuery.deptid" placeholder="管理单位" :clearable="true"
           style="width: 220px;margin: 0 5px;"
         />
         <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
+          style="width: 380px;margin: 0 5px;" value-format="YYYY-MM-DD HH:mm:ss" range-separator="至"
+          start-placeholder="报警开始时间" end-placeholder="报警结束时间" clearable :shortcuts="shortcuts"
         />
-        <el-button type="primary" style="margin: 0 5px;">
+        <el-button type="primary" style="margin: 0 5px;" @click="fetchData">
           搜索
         </el-button>
       </div>
@@ -94,14 +244,22 @@
           <line-chart
             :x-axis-data="xAxisData" :data="data" :gradient="false"
             :legend="{ itemWidth: 8, itemHeight: 8, type: 'scroll', orient: 'horizontal', icon: 'roundRect', right: '0', top: '10' }"
+            :grid="{
+              top: 50,
+              left: 30,
+              right: 30,
+              bottom: 20,
+              containLabel: true, // 是否包含坐标轴的刻度标签
+            }"
           />
         </div>
         <div class="table">
           <el-table border :data="list" stripe style="width: 100%;" :height="440">
-            <el-table-column label="日期" prop="alarmTime" align="center" />
-            <el-table-column label="闸井浓度超限" prop="wellOver" align="center" />
-            <el-table-column label="场站浓度超限" prop="senceOver" align="center" />
-            <el-table-column label="疑似第三方破坏" prop="thirdParty" align="center" />
+            <el-table-column label="日期" prop="date" align="center" width="190" />
+            <el-table-column
+              v-for="item in columns" :key="item.text" :label="item.text" :prop="item.value"
+              align="center"
+            />
           </el-table>
         </div>
       </div>
diff --git a/src/views/home/alarm/current/components/detail.vue b/src/views/home/alarm/current/components/detail.vue
index 4fb61d3..e200fe3 100644
--- a/src/views/home/alarm/current/components/detail.vue
+++ b/src/views/home/alarm/current/components/detail.vue
@@ -7,6 +7,7 @@
 import dayjs from 'dayjs'
 import { ElMessage } from 'element-plus'
 import { alarmProcessNode, detailAlarm } from '@/api/home/alarm/current'
+import { getAlarmDetail } from '@/api/home/alarm/history'
 import { toHumpObject } from '@/utils/String'
 import { getAlarmLevelListPage, getAlarmTypeListPage } from '@/api/home/rule/alarm'
 import { getDateDiff } from '@/utils/dayjs'
@@ -44,7 +45,7 @@
   },
   {
     text: '报警时间',
-    value: 'ts',
+    value: $route.query.type === 'history' ? 'alarmTime' : 'ts',
     align: 'center',
   },
   {
@@ -89,7 +90,7 @@
   },
   {
     text: '处置时长',
-    value: 'duration',
+    value: $route.query.type === 'history' ? 'cancelDuration' : 'duration',
     align: 'center',
   },
   {
@@ -107,8 +108,8 @@
 const fetchDetail = async () => {
   loading.value = true
   const res1 = await getAlarmLevelListPage({ offset: 1, limit: 9999 })
-  const res2 = await getAlarmTypeListPage({ offset: 1, limit: 9999 })
-  detailAlarm($route.query.id as string).then((res) => {
+  const res2 = await getAlarmTypeListPage({ offset: 1, limit: 9999 });
+  ($route.query.type === 'history' ? getAlarmDetail : detailAlarm)($route.query.id as string).then((res) => {
     detailInfo.value = toHumpObject(res.data)
     detailInfo.value.realAlarmName = detailInfo.value.realAlarm === '1' ? '报警' : '误报'
     detailInfo.value.alarmTypeName = res2.data.rows.filter((item: any) => item.id === detailInfo.value.alarmTypeId)[0]?.alarmType || ''
@@ -183,8 +184,12 @@
           </template>
           <div style="padding: 25px;">
             <el-timeline>
-              <el-timeline-item v-for="(item, index) in alarmDynamics" :key="index" :timestamp="item.approvalTime" type="primary">
-                {{ `${item.approvalPerson}${item.dept_name ? '(' : ''}${item.dept_name}${item.dept_name ? ')' : ''}${item.process_name}` }}
+              <el-timeline-item
+                v-for="(item, index) in alarmDynamics" :key="index" :timestamp="item.approvalTime"
+                type="primary"
+              >
+                {{ `${item.approvalPerson}${item.dept_name ? '(' : ''}${item.dept_name}${item.dept_name ? ')'
+                  : ''}${item.process_name}` }}
               </el-timeline-item>
             </el-timeline>
           </div>
diff --git a/src/views/home/alarm/current/index.vue b/src/views/home/alarm/current/index.vue
index 52b2be1..8b36a01 100644
--- a/src/views/home/alarm/current/index.vue
+++ b/src/views/home/alarm/current/index.vue
@@ -4,10 +4,10 @@
   Date: 2023-06-28
  -->
 <script lang="ts" setup name="CurrentAlarm">
-import { ElMessage } from 'element-plus'
+import { ElMessage, ElMessageBox } from 'element-plus'
 import { ArrowLeftBold, ArrowRightBold } from '@element-plus/icons-vue'
 import MapCom from './components/map.vue'
-import { getCurrentAlarmListPage, viewAlarm } from '@/api/home/alarm/current'
+import { batchDelete, getCurrentAlarmListPage, viewAlarm } from '@/api/home/alarm/current'
 import { getDictByCode } from '@/api/system/dict'
 import { getAlarmLevelListPage, getAlarmTypeListPage } from '@/api/home/rule/alarm'
 import { getDeviceTypeListPage } from '@/api/home/device/type'
@@ -66,6 +66,35 @@
     }
   }
 })
+const shortcuts = [
+  {
+    text: '近一周',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setDate(start.getDate() - 7)
+      return [start, end]
+    },
+  },
+  {
+    text: '近一个月',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setMonth(start.getMonth() - 1)
+      return [start, end]
+    },
+  },
+  {
+    text: '近三个月',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setMonth(start.getMonth() - 3)
+      return [start, end]
+    },
+  },
+]
 // 查询数据
 const fetchData = () => {
   loadingTable.value = true
@@ -140,8 +169,8 @@
 const detail = (row: any) => {
   mapData.value = row
   switchMode('map')
-  row.lngGaode = '116.398043'
-  row.latGaode = '39.901552'
+  // row.lngGaode = '116.398043'
+  // row.latGaode = '39.901552'
   // 绘制点
   const draw = () => {
     mapRef.value.mapRef.removeMarker()
@@ -209,6 +238,35 @@
   })
 }
 fetchDict()
+const { proxy } = getCurrentInstance() as any
+// 多选
+const multipleTable = ref([])
+const handleSelectionChange = (val: any) => {
+  console.log(val, '多选数据')
+  multipleTable.value = val
+}
+// 批量删除
+const batchDeleteRow = () => {
+  if (!multipleTable.value.length) {
+    ElMessage.warning('请先选中数据')
+    return
+  }
+  ElMessageBox.confirm(
+    '确定要删除选中的数据吗？',
+    '确认操作',
+    {
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+      type: 'warning',
+    },
+  ).then(() => {
+    batchDelete(multipleTable.value.map((item: any) => item.id)).then(() => {
+      ElMessage.success('操作成功')
+      multipleTable.value = []
+      fetchData()
+    })
+  })
+}
 </script>
 
 <template>
@@ -255,7 +313,7 @@
       </search-item>
       <search-item>
         <el-date-picker
-          v-model="datetimerange" type="datetimerange" format="YYYY-MM-DD HH:mm:ss"
+          v-model="datetimerange" type="datetimerange" format="YYYY-MM-DD HH:mm:ss" :shortcuts="shortcuts"
           value-format="YYYY-MM-DD HH:mm:ss" range-separator="至" start-placeholder="报警开始时间" end-placeholder="报警结束时间"
           clearable
         />
@@ -274,6 +332,9 @@
           <template #btns-right>
             <!-- 操作 -->
             <div>
+              <el-button v-if="proxy.hasPerm('/alarm/current/delete')" type="primary" @click="batchDeleteRow">
+                批量删除
+              </el-button>
               <el-button type="primary">
                 导出
               </el-button>
@@ -282,7 +343,10 @@
           <!-- 查询结果Table显示 -->
           <normal-table
             :data="list1" :total="total" :columns="columnsConfig" :query="listQuery"
-            :list-loading="loadingTable" :height="tableHeight - 50 - 70" @change="changePage"
+            :list-loading="loadingTable" :height="tableHeight - 50 - 70"
+            :is-multi="proxy.hasPerm('/alarm/current/delete')"
+            :is-showmulti-select="proxy.hasPerm('/alarm/current/delete')" @change="changePage"
+            @multiSelect="handleSelectionChange"
           >
             <template #preColumns>
               <el-table-column label="序号" width="55" align="center">
diff --git a/src/views/home/alarm/history/index.vue b/src/views/home/alarm/history/index.vue
index 87bb167..74ca152 100644
--- a/src/views/home/alarm/history/index.vue
+++ b/src/views/home/alarm/history/index.vue
@@ -80,6 +80,35 @@
     }
   }
 })
+const shortcuts = [
+  {
+    text: '近一周',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setDate(start.getDate() - 7)
+      return [start, end]
+    },
+  },
+  {
+    text: '近一个月',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setMonth(start.getMonth() - 1)
+      return [start, end]
+    },
+  },
+  {
+    text: '近三个月',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setMonth(start.getMonth() - 3)
+      return [start, end]
+    },
+  },
+]
 // 查询数据
 const fetchData = () => {
   loadingTable.value = true
@@ -127,10 +156,11 @@
 const $router = useRouter()
 const moreData = (row: any) => {
   $router.push({
-    name: 'AlarmCurrentDetail',
+    name: 'AlarmHistoryDetail',
     query: {
       id: row.id,
       row: JSON.stringify(row),
+      type: 'history',
     },
   })
 }
@@ -218,7 +248,7 @@
       </search-item>
       <search-item>
         <el-date-picker
-          v-model="datetimerange" type="datetimerange" format="YYYY-MM-DD HH:mm:ss"
+          v-model="datetimerange" type="datetimerange" format="YYYY-MM-DD HH:mm:ss" :shortcuts="shortcuts"
           value-format="YYYY-MM-DD HH:mm:ss" range-separator="至" start-placeholder="报警开始时间" end-placeholder="报警结束时间"
           clearable
         />
diff --git a/src/views/home/device/product/index.vue b/src/views/home/device/product/index.vue
index 1bb3d99..2300270 100644
--- a/src/views/home/device/product/index.vue
+++ b/src/views/home/device/product/index.vue
@@ -21,8 +21,8 @@
   { text: '设备型号', value: 'deviceModel', align: 'center' },
   { text: '厂商', value: 'manufacturerName', align: 'center' },
   { text: '通讯协议', value: 'protocolName', align: 'center' },
-  { text: '接入方式', value: 'accessMethodName', align: 'center' },
-  { text: '创建时间', value: 'ts', align: 'center' },
+  { text: '接入方式', value: 'accessMethodName', align: 'center', width: '140' },
+  { text: '创建时间', value: 'ts', align: 'center', width: '200' },
 ])
 // 最终展示列
 const columnsConfig = ref([])
diff --git a/src/views/home/device/type/index.vue b/src/views/home/device/type/index.vue
index 56d7f65..7df5933 100644
--- a/src/views/home/device/type/index.vue
+++ b/src/views/home/device/type/index.vue
@@ -14,12 +14,12 @@
 const total = ref(0)
 // 初始展示列
 const columns = ref<any>([
-  { text: '设备类型代号', value: 'typeCode', align: 'center' },
+  { text: '设备类型代号', value: 'typeCode', align: 'center', width: '110' },
   { text: '设备类型', value: 'typeName', align: 'center' },
   { text: '描述', value: 'typeDescription', align: 'center' },
   { text: '监测对象', value: 'watchObjectName', align: 'center' },
-  { text: '是否启用', value: 'isUsedName', align: 'center' },
-  { text: '操作时间', value: 'ts', align: 'center' },
+  { text: '是否启用', value: 'isUsedName', align: 'center', width: '110' },
+  { text: '操作时间', value: 'ts', align: 'center', width: '200' },
 ])
 // 最终展示列
 const columnsConfig = ref([])
diff --git a/src/views/home/ledger/ledger/components/wellList.vue b/src/views/home/ledger/ledger/components/wellList.vue
index 61eca63..6e40ede 100644
--- a/src/views/home/ledger/ledger/components/wellList.vue
+++ b/src/views/home/ledger/ledger/components/wellList.vue
@@ -22,12 +22,12 @@
   { text: '位号', value: 'tagNumber', align: 'center', isRequired: true, width: '110' },
   { text: '编号', value: 'ledgerCode', align: 'center', isRequired: true, width: '150' },
   { text: '名称', value: 'ledgerName', align: 'center', isRequired: true },
-  { text: '管理单位', value: 'responsibleDept', align: 'center' },
+  { text: '管理单位', value: 'deptName', align: 'center', width: '160' },
   { text: '详细位置', value: 'position', align: 'center' },
-  { text: '产权单位', value: 'deptName', align: 'center', isRequired: true },
-  { text: '管理方式', value: 'manageTypeName', align: 'center', isRequired: true },
-  { text: '使用状态', value: 'onStateName', align: 'center', isRequired: true },
-  { text: '位置状态', value: 'locationStateName', align: 'center', isRequired: true },
+  { text: '产权单位', value: 'responsibleDeptName', align: 'center', isRequired: true },
+  { text: '管理方式', value: 'manageTypeName', align: 'center', isRequired: true, width: '110' },
+  { text: '使用状态', value: 'onStateName', align: 'center', isRequired: true, width: '110' },
+  { text: '位置状态', value: 'locationStateName', align: 'center', isRequired: true, width: '110' },
 ])
 // 最终展示列
 const columnsConfig = ref([])

diff --git a/src/api/home/alarm/count.ts b/src/api/home/alarm/count.ts
index 1f4b59a..d5d9244 100644
--- a/src/api/home/alarm/count.ts
+++ b/src/api/home/alarm/count.ts
@@ -34,3 +34,11 @@
     data,
   })
 }
+// 报警趋势分析
+export function getAlarmTrend(data: any) {
+  return request({
+    url: '/statics/alarmRecords/alarmTrend',
+    method: 'post',
+    data,
+  })
+}
diff --git a/src/api/home/alarm/current.ts b/src/api/home/alarm/current.ts
index ec20f64..ac3387f 100644
--- a/src/api/home/alarm/current.ts
+++ b/src/api/home/alarm/current.ts
@@ -57,3 +57,13 @@
     },
   })
 }
+// 批量删除
+export function batchDelete(ids: any) {
+  return request({
+    url: '/system/alarmRecords/batchDelete',
+    method: 'post',
+    data: {
+      ids,
+    },
+  })
+}
diff --git a/src/api/home/alarm/history.ts b/src/api/home/alarm/history.ts
index 5f55e82..44cf851 100644
--- a/src/api/home/alarm/history.ts
+++ b/src/api/home/alarm/history.ts
@@ -11,3 +11,13 @@
     data,
   })
 }
+// 详情
+export function getAlarmDetail(id: any) {
+  return request({
+    url: '/system/alarmRecords/historyAlarmDetail',
+    method: 'post',
+    data: {
+      id,
+    },
+  })
+}
diff --git a/src/components/Echart/LineChart.vue b/src/components/Echart/LineChart.vue
index 2733161..b811f29 100644
--- a/src/components/Echart/LineChart.vue
+++ b/src/components/Echart/LineChart.vue
@@ -207,7 +207,7 @@
         },
       },
       valueFormatter: (value: string | number) => {
-        return value ? value + props.unit : ''
+        return value ? value + props.unit : value === 0 ? '0' : ''
       },
     }, // 提示框
     xAxis: [
diff --git a/src/router/modules/pc.ts b/src/router/modules/pc.ts
index 9b058fa..f3edac9 100644
--- a/src/router/modules/pc.ts
+++ b/src/router/modules/pc.ts
@@ -94,6 +94,19 @@
         },
       },
       {
+        path: '/history/detail',
+        component: () => import('@/views/home/alarm/current/components/detail.vue'),
+        name: 'AlarmHistoryDetail',
+        meta: {
+          title: '报警详情',
+          icon: 'ep:key',
+          sidebar: false,
+          breadcrumb: true,
+          activeMenu: '/alarm/history',
+          auth: '/alarm/history',
+        },
+      },
+      {
         path: 'count',
         component: () => import('@/views/home/alarm/count/index.vue'),
         name: 'AlarmCount',
diff --git a/src/views/home/alarm/count/components/alarmStatistics.vue b/src/views/home/alarm/count/components/alarmStatistics.vue
index b088de2..7aa930f 100644
--- a/src/views/home/alarm/count/components/alarmStatistics.vue
+++ b/src/views/home/alarm/count/components/alarmStatistics.vue
@@ -34,13 +34,12 @@
     value: '3',
   },
 ])
-const xAxisData = ref([])
-const data = ref([])
+const xAxisData = ref<string[]>([])
+const data = ref<any[]>([])
 const list = ref([])
 const loading = ref(true)
 // 开始结束时间
 const datetimerange = ref()
-// 默认当天
 watch(() => datetimerange.value, (newVal) => {
   listQuery.value.begTime = ''
   listQuery.value.endTime = ''
@@ -51,6 +50,35 @@
     }
   }
 })
+const shortcuts = [
+  {
+    text: '近一周',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setDate(start.getDate() - 7)
+      return [start, end]
+    },
+  },
+  {
+    text: '近一个月',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setMonth(start.getMonth() - 1)
+      return [start, end]
+    },
+  },
+  {
+    text: '近三个月',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setMonth(start.getMonth() - 3)
+      return [start, end]
+    },
+  },
+]
 // setTimeout(() => {
 //   xAxisData.value = [
 //     '闸井浓度超限', '场站浓度超限', '场站火焰报警', '疑似第三方破坏', '场站烟雾报警',
@@ -66,10 +94,25 @@
 //     value: data.value[0].data[index],
 //   }))
 // }, 1000)
+const resizePage = () => {
+  setTimeout(() => {
+    const resize = new Event('resize')
+    window.dispatchEvent(resize)
+  }, 500)
+}
 const fetchData = () => {
   loading.value = true
   getAlarmType(listQuery.value).then((res) => {
-    console.log(res.data, '各类报警统计')
+    // console.log(res.data, '各类报警统计')
+    xAxisData.value = res.data.map((item: any) => item.name)
+    data.value = [
+      {
+        name: '报警数量',
+        data: res.data.map((item: any) => item.value),
+      },
+    ]
+    list.value = res.data
+    resizePage
     loading.value = false
   }).catch(() => {
     loading.value = false
@@ -105,8 +148,8 @@
           style="width: 220px;margin: 0 5px;"
         />
         <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="至"
+          v-model="datetimerange" type="datetimerange" format="YYYY-MM-DD HH:mm:ss" :shortcuts="shortcuts"
+          style="width: 380px;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;" @click="fetchData">
@@ -118,8 +161,8 @@
       <div v-loading="loading" class="alarm-count">
         <div class="bar">
           <bar-chart-vertical
-            v-show="xAxisData.length"
-            :x-axis-data="xAxisData" :bar-coner="0" :data="data" :colors="[]" :bar-width="15"
+            v-show="xAxisData.length" :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' }"
             :grid="{
               top: 50,
@@ -133,7 +176,7 @@
         </div>
         <div class="table">
           <el-table border :data="list" stripe style="width: 100%;" :height="440">
-            <el-table-column label="报警类型" prop="alarmType" align="center" />
+            <el-table-column label="报警类型" prop="name" align="center" />
             <el-table-column label="报警数量" prop="value" align="center" />
           </el-table>
         </div>
diff --git a/src/views/home/alarm/count/components/deptCount.vue b/src/views/home/alarm/count/components/deptCount.vue
index 1ca5482..798bfd2 100644
--- a/src/views/home/alarm/count/components/deptCount.vue
+++ b/src/views/home/alarm/count/components/deptCount.vue
@@ -5,40 +5,123 @@
  -->
 <script lang="ts" setup name="AlarmCount">
 import layout from './layout.vue'
+import { getAlarmCompany } from '@/api/home/alarm/count'
 const listQuery = ref({
-  type: 'day',
+  begTime: '',
+  endTime: '',
+  ledgerType: '',
+  timeType: '1',
 })
 const selectTimeType = (type: string) => {
-  listQuery.value.type = type
+  listQuery.value.timeType = type
 }
+// 开始结束时间
+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 shortcuts = [
+  {
+    text: '近一周',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setDate(start.getDate() - 7)
+      return [start, end]
+    },
+  },
+  {
+    text: '近一个月',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setMonth(start.getMonth() - 1)
+      return [start, end]
+    },
+  },
+  {
+    text: '近三个月',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setMonth(start.getMonth() - 3)
+      return [start, end]
+    },
+  },
+]
+// 类别
+const ledgerTypeList = ref<{ id: string; name: string; value: string }[]>([
+  {
+    name: '闸井',
+    id: '1',
+    value: '1',
+  },
+  {
+    name: '场站',
+    id: '2',
+    value: '2',
+  },
+  {
+    name: '管线',
+    id: '3',
+    value: '3',
+  },
+])
 const xAxisData = ref([])
 const data = ref([])
 const list = ref([])
-setTimeout(() => {
-  xAxisData.value = [
-    '第一分公司', '第二分公司', '第三分公司', '第四分公司', '第五分公司',
-  ]
-  data.value = [
-    {
-      name: '闸井浓度超限',
-      data: [1, 8, 5, 8, 4],
-    },
-    {
-      name: '场站浓度超限',
-      data: [8, 3, 6, 1, 7],
-    },
-    {
-      name: '疑似第三方破坏',
-      data: [4, 7, 5, 9, 4],
-    },
-  ]
-  list.value = xAxisData.value.map((item, index) => ({
-    dept: item,
-    wellOver: data.value[0].data[index],
-    senceOver: data.value[1].data[index],
-    thirdParty: data.value[2].data[index],
-  }))
-}, 1000)
+const loading = ref(true)
+// setTimeout(() => {
+//   xAxisData.value = [
+//     '第一分公司', '第二分公司', '第三分公司', '第四分公司', '第五分公司',
+//   ]
+//   data.value = [
+//     {
+//       name: '闸井浓度超限',
+//       data: [1, 8, 5, 8, 4],
+//     },
+//     {
+//       name: '场站浓度超限',
+//       data: [8, 3, 6, 1, 7],
+//     },
+//     {
+//       name: '疑似第三方破坏',
+//       data: [4, 7, 5, 9, 4],
+//     },
+//   ]
+//   list.value = xAxisData.value.map((item, index) => ({
+//     dept: item,
+//     wellOver: data.value[0].data[index],
+//     senceOver: data.value[1].data[index],
+//     thirdParty: data.value[2].data[index],
+//   }))
+// }, 1000)
+const resizePage = () => {
+  setTimeout(() => {
+    const resize = new Event('resize')
+    window.dispatchEvent(resize)
+  }, 500)
+}
+const fetchData = () => {
+  loading.value = true
+  getAlarmCompany(listQuery.value).then((res) => {
+    console.log(res.data, '各单位报警统计')
+    resizePage()
+    loading.value = false
+  }).catch(() => {
+    loading.value = false
+  })
+}
+onMounted(() => {
+  fetchData()
+})
 </script>
 
 <template>
@@ -47,49 +130,59 @@
     <template #search>
       <div class="search">
         <el-button
-          :class="listQuery.type === 'day' ? 'active' : ''" round size="small"
-          @click="selectTimeType('day')"
+          :class="listQuery.timeType === '1' ? 'active' : ''" round size="small"
+          style="margin: 0 5px;"
+          @click="selectTimeType('1')"
         >
           今日
         </el-button>
         <el-button
-          :class="listQuery.type === 'week' ? 'active' : ''" round size="small"
-          @click="selectTimeType('week')"
+          :class="listQuery.timeType === '2' ? 'active' : ''" round size="small"
+          style="margin: 0 5px;"
+          @click="selectTimeType('2')"
         >
           本周
         </el-button>
         <el-button
-          :class="listQuery.type === 'month' ? 'active' : ''" round size="small"
-          @click="selectTimeType('month')"
+          :class="listQuery.timeType === '3' ? 'active' : ''" round size="small"
+          style="margin: 0 5px;"
+          @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 v-for="item in ledgerTypeList" :key="item.id" :label="item.name" :value="item.id" />
+        </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
+          style="width: 380px;margin: 0 5px;" value-format="YYYY-MM-DD HH:mm:ss" range-separator="至"
+          start-placeholder="报警开始时间" end-placeholder="报警结束时间" clearable :shortcuts="shortcuts"
         />
-        <el-button type="primary" style="margin: 0 5px;">
+        <el-button type="primary" style="margin: 0 5px;" @click="fetchData">
           搜索
         </el-button>
       </div>
     </template>
     <template #content>
-      <div class="alarm-count">
+      <div v-loading="loading" class="alarm-count">
         <div class="bar">
           <bar-chart-vertical
+            v-show="xAxisData.length"
             :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' }"
+            :grid="{
+              top: 50,
+              left: 30,
+              right: 30,
+              bottom: 20,
+              containLabel: true, // 是否包含坐标轴的刻度标签
+            }"
           />
+          <el-empty v-show="!xAxisData.length" description="暂无数据" />
         </div>
         <div class="table">
           <el-table border :data="list" stripe style="width: 100%;" :height="440">
-            <el-table-column label="管理单位" prop="dept" align="center" />
+            <el-table-column label="管理单位" prop="dept" align="center" width="200" />
             <el-table-column label="闸井浓度超限" prop="wellOver" align="center" />
             <el-table-column label="场站浓度超限" prop="senceOver" align="center" />
             <el-table-column label="疑似第三方破坏" prop="thirdParty" align="center" />
diff --git a/src/views/home/alarm/count/components/locationAnalysis.vue b/src/views/home/alarm/count/components/locationAnalysis.vue
index 4265aaf..4cd5921 100644
--- a/src/views/home/alarm/count/components/locationAnalysis.vue
+++ b/src/views/home/alarm/count/components/locationAnalysis.vue
@@ -18,7 +18,7 @@
 // 开始结束时间
 const datetimerange = ref()
 // 默认当天
-datetimerange.value = [`${dayjs().format('YYYY-MM-DD')} 00:00:00`, dayjs().format('YYYY-MM-DD HH:mm:ss')]
+// datetimerange.value = [`${dayjs().format('YYYY-MM-DD')} 00:00:00`, dayjs().format('YYYY-MM-DD HH:mm:ss')]
 watch(() => datetimerange.value, (newVal) => {
   listQuery.value.begTime = ''
   listQuery.value.endTime = ''
@@ -29,6 +29,35 @@
     }
   }
 })
+const shortcuts = [
+  {
+    text: '近一周',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setDate(start.getDate() - 7)
+      return [start, end]
+    },
+  },
+  {
+    text: '近一个月',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setMonth(start.getMonth() - 1)
+      return [start, end]
+    },
+  },
+  {
+    text: '近三个月',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setMonth(start.getMonth() - 3)
+      return [start, end]
+    },
+  },
+]
 const selectTimeType = (type: string) => {
   listQuery.value.timeType = type
 }
@@ -52,13 +81,13 @@
     <!-- 查询条件 -->
     <template #search>
       <div class="search">
-        <el-button :class="listQuery.timeType === '1' ? 'active' : ''" round size="small" @click="selectTimeType('1')">
+        <el-button :class="listQuery.timeType === '1' ? 'active' : ''" round size="small" style="margin: 0 5px;" @click="selectTimeType('1')">
           今日
         </el-button>
-        <el-button :class="listQuery.timeType === '2' ? 'active' : ''" round size="small" @click="selectTimeType('2')">
+        <el-button :class="listQuery.timeType === '2' ? 'active' : ''" round size="small" style="margin: 0 5px;" @click="selectTimeType('2')">
           本周
         </el-button>
-        <el-button :class="listQuery.timeType === '3' ? 'active' : ''" round size="small" @click="selectTimeType('3')">
+        <el-button :class="listQuery.timeType === '3' ? 'active' : ''" round size="small" style="margin: 0 5px;" @click="selectTimeType('3')">
           本月
         </el-button>
         <el-select v-model="listQuery.ledgerType" placeholder="全部类别" clearable style="width: 180px;margin: 0 5px;">
@@ -68,8 +97,8 @@
         </el-select>
         <el-date-picker
           v-model="datetimerange" type="datetimerange" format="YYYY-MM-DD HH:mm:ss"
-          style="width: 360px;margin: 0 5px;" value-format="YYYY-MM-DD HH:mm:ss" range-separator="至"
-          start-placeholder="报警开始时间" end-placeholder="报警结束时间" clearable
+          style="width: 380px;margin: 0 5px;" value-format="YYYY-MM-DD HH:mm:ss" range-separator="至"
+          start-placeholder="报警开始时间" end-placeholder="报警结束时间" clearable :shortcuts="shortcuts"
         />
         <el-button type="primary" style="margin: 0 5px;" @click="fetchData">
           搜索
@@ -80,13 +109,13 @@
       <div class="alarm-count">
         <div class="table">
           <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="type" align="center" width="140" />
+            <el-table-column label="位号" prop="tagNumber" align="center" width="160" />
             <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-column label="标签" prop="marker" align="center" width="140" />
+            <el-table-column label="报警次数" prop="alarmSum" align="center" width="120" />
           </el-table>
         </div>
       </div>
diff --git a/src/views/home/alarm/count/components/trendAnalysis.vue b/src/views/home/alarm/count/components/trendAnalysis.vue
index 73e18b0..18cfb4c 100644
--- a/src/views/home/alarm/count/components/trendAnalysis.vue
+++ b/src/views/home/alarm/count/components/trendAnalysis.vue
@@ -5,49 +5,203 @@
  -->
 <script lang="ts" setup name="TrendAnalysis">
 import layout from './layout.vue'
+import { getAlarmTrend } from '@/api/home/alarm/count'
 const listQuery = ref({
-  type: 'day',
+  timeType: '2',
+  ledgerType: '',
+  endTime: '',
+  begTime: '',
+  deptid: '',
 })
+// 开始结束时间
+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 shortcuts = [
+  {
+    text: '近一周',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setDate(start.getDate() - 7)
+      return [start, end]
+    },
+  },
+  {
+    text: '近一个月',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setMonth(start.getMonth() - 1)
+      return [start, end]
+    },
+  },
+  {
+    text: '近三个月',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setMonth(start.getMonth() - 3)
+      return [start, end]
+    },
+  },
+]
 const selectTimeType = (type: string) => {
-  listQuery.value.type = type
+  listQuery.value.timeType = type
 }
-const xAxisData = ref([])
-const data = ref([])
+const columns = ref<any[]>([
+  {
+    text: '闸井浓度超限',
+    value: 'well',
+  },
+  {
+    text: '场站浓度超限',
+    value: 'station',
+  },
+  {
+    text: '管线浓度超限',
+    value: 'pipeline',
+  },
+])
+// 类别
+const ledgerTypeList = ref<{ id: string; name: string; value: string }[]>([
+  {
+    name: '闸井',
+    id: '1',
+    value: '1',
+  },
+  {
+    name: '场站',
+    id: '2',
+    value: '2',
+  },
+  {
+    name: '管线',
+    id: '3',
+    value: '3',
+  },
+])
+const xAxisData = ref<string[]>([])
+const data = ref<any[]>([])
 const list = ref([])
-setTimeout(() => {
-  xAxisData.value = [
-    '2024-07-01 12:11:12',
-    '2024-07-02 12:11:12',
-    '2024-07-03 12:11:12',
-    '2024-07-04 12:11:12',
-    '2024-07-05 12:11:12',
-    '2024-07-06 12:11:12',
-    '2024-07-07 12:11:12',
-  ]
-  data.value = [
-    {
-      name: '闸井浓度超限',
-      data: [1, 3, 5, 1, 4, 2, 7],
-      symbol: 'emptyCircle',
-    },
-    {
-      name: '场站浓度超限',
-      data: [2, 1, 4, 1, 5, 2, 9],
-      symbol: 'emptyCircle',
-    },
-    {
-      name: '闸井浓度超限',
-      data: [4, 3, 2, 4, 7, 9, 1],
-      symbol: 'emptyCircle',
-    },
-  ]
-  list.value = xAxisData.value.map((item, index) => ({
-    alarmTime: item,
-    wellOver: data.value[0].data[index],
-    senceOver: data.value[1].data[index],
-    thirdParty: data.value[2].data[index],
-  }))
-}, 1000)
+const loading = ref(true)
+// setTimeout(() => {
+//   xAxisData.value = [
+//     '2024-07-01 12:11:12',
+//     '2024-07-02 12:11:12',
+//     '2024-07-03 12:11:12',
+//     '2024-07-04 12:11:12',
+//     '2024-07-05 12:11:12',
+//     '2024-07-06 12:11:12',
+//     '2024-07-07 12:11:12',
+//   ]
+//   data.value = [
+//     {
+//       name: '闸井浓度超限',
+//       data: [1, 3, 5, 1, 4, 2, 7],
+//       symbol: 'emptyCircle',
+//     },
+//     {
+//       name: '场站浓度超限',
+//       data: [2, 1, 4, 1, 5, 2, 9],
+//       symbol: 'emptyCircle',
+//     },
+//     {
+//       name: '闸井浓度超限',
+//       data: [4, 3, 2, 4, 7, 9, 1],
+//       symbol: 'emptyCircle',
+//     },
+//   ]
+//   list.value = xAxisData.value.map((item, index) => ({
+//     alarmTime: item,
+//     wellOver: data.value[0].data[index],
+//     senceOver: data.value[1].data[index],
+//     thirdParty: data.value[2].data[index],
+//   }))
+// }, 1000)
+const resizePage = () => {
+  setTimeout(() => {
+    const resize = new Event('resize')
+    window.dispatchEvent(resize)
+  }, 500)
+}
+const fetchData = () => {
+  loading.value = true
+  const columnsDict = {
+    闸井浓度超限: 'well',
+    场站浓度超限: 'station',
+    管线浓度超限: 'pipeline',
+  } as { [key: string]: string }
+  getAlarmTrend(listQuery.value).then((res) => {
+    console.log(res.data, '报警趋势分析')
+    xAxisData.value = res.data.map((item: any) => item.date)
+    if (!listQuery.value.ledgerType) {
+      data.value = [
+        {
+          name: '闸井浓度超限',
+          data: res.data.map((item: any) => item['闸井浓度超限']),
+        },
+        {
+          name: '场站浓度超限',
+          data: res.data.map((item: any) => item['场站浓度超限']),
+        },
+        {
+          name: '管线浓度超限',
+          data: res.data.map((item: any) => item['管线浓度超限']),
+        },
+      ]
+    }
+    else if (listQuery.value.ledgerType === '1') {
+      data.value = [
+        {
+          name: '闸井浓度超限',
+          data: res.data.map((item: any) => item['闸井浓度超限']),
+        },
+      ]
+    }
+    else if (listQuery.value.ledgerType === '2') {
+      data.value = [
+        {
+          name: '场站浓度超限',
+          data: res.data.map((item: any) => item['场站浓度超限']),
+        },
+      ]
+    }
+    else if (listQuery.value.ledgerType === '3') {
+      data.value = [
+        {
+          name: '管线浓度超限',
+          data: res.data.map((item: any) => item['管线浓度超限']),
+        },
+      ]
+    }
+    list.value = res.data.map((item: any) => ({
+      date: item.date,
+      well: item['闸井浓度超限'],
+      station: item['场站浓度超限'],
+      pipeline: item['管线浓度超限'],
+    }))
+    columns.value = data.value.map((item: any) => ({
+      text: item.name,
+      value: columnsDict[item.name],
+    }))
+    resizePage()
+    loading.value = false
+  }).catch(() => {
+    loading.value = false
+  })
+}
+onMounted(() => {
+  fetchData()
+})
 </script>
 
 <template>
@@ -56,34 +210,30 @@
     <template #search>
       <div class="search">
         <el-button
-          :class="listQuery.type === 'day' ? 'active' : ''" round size="small"
-          @click="selectTimeType('day')"
-        >
-          今日
-        </el-button>
-        <el-button
-          :class="listQuery.type === 'week' ? 'active' : ''" round size="small"
-          @click="selectTimeType('week')"
+          :class="listQuery.timeType === '2' ? 'active' : ''" round size="small" style="margin: 0 5px;"
+          @click="selectTimeType('2')"
         >
           本周
         </el-button>
         <el-button
-          :class="listQuery.type === 'month' ? 'active' : ''" round size="small"
-          @click="selectTimeType('month')"
+          :class="listQuery.timeType === '3' ? 'active' : ''" round size="small" style="margin: 0 5px;"
+          @click="selectTimeType('3')"
         >
           本月
         </el-button>
-        <el-select v-model="listQuery.keywords" placeholder="全部类别" clearable style="width: 180px;margin: 0 5px;" />
+        <el-select v-model="listQuery.ledgerType" placeholder="全部类别" clearable style="width: 180px;margin: 0 5px;">
+          <el-option v-for="item in ledgerTypeList" :key="item.id" :label="item.name" :value="item.id" />
+        </el-select>
         <dept-select
-          v-model="listQuery.keywords" placeholder="管理单位" :clearable="true"
+          v-model="listQuery.deptid" placeholder="管理单位" :clearable="true"
           style="width: 220px;margin: 0 5px;"
         />
         <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
+          style="width: 380px;margin: 0 5px;" value-format="YYYY-MM-DD HH:mm:ss" range-separator="至"
+          start-placeholder="报警开始时间" end-placeholder="报警结束时间" clearable :shortcuts="shortcuts"
         />
-        <el-button type="primary" style="margin: 0 5px;">
+        <el-button type="primary" style="margin: 0 5px;" @click="fetchData">
           搜索
         </el-button>
       </div>
@@ -94,14 +244,22 @@
           <line-chart
             :x-axis-data="xAxisData" :data="data" :gradient="false"
             :legend="{ itemWidth: 8, itemHeight: 8, type: 'scroll', orient: 'horizontal', icon: 'roundRect', right: '0', top: '10' }"
+            :grid="{
+              top: 50,
+              left: 30,
+              right: 30,
+              bottom: 20,
+              containLabel: true, // 是否包含坐标轴的刻度标签
+            }"
           />
         </div>
         <div class="table">
           <el-table border :data="list" stripe style="width: 100%;" :height="440">
-            <el-table-column label="日期" prop="alarmTime" align="center" />
-            <el-table-column label="闸井浓度超限" prop="wellOver" align="center" />
-            <el-table-column label="场站浓度超限" prop="senceOver" align="center" />
-            <el-table-column label="疑似第三方破坏" prop="thirdParty" align="center" />
+            <el-table-column label="日期" prop="date" align="center" width="190" />
+            <el-table-column
+              v-for="item in columns" :key="item.text" :label="item.text" :prop="item.value"
+              align="center"
+            />
           </el-table>
         </div>
       </div>
diff --git a/src/views/home/alarm/current/components/detail.vue b/src/views/home/alarm/current/components/detail.vue
index 4fb61d3..e200fe3 100644
--- a/src/views/home/alarm/current/components/detail.vue
+++ b/src/views/home/alarm/current/components/detail.vue
@@ -7,6 +7,7 @@
 import dayjs from 'dayjs'
 import { ElMessage } from 'element-plus'
 import { alarmProcessNode, detailAlarm } from '@/api/home/alarm/current'
+import { getAlarmDetail } from '@/api/home/alarm/history'
 import { toHumpObject } from '@/utils/String'
 import { getAlarmLevelListPage, getAlarmTypeListPage } from '@/api/home/rule/alarm'
 import { getDateDiff } from '@/utils/dayjs'
@@ -44,7 +45,7 @@
   },
   {
     text: '报警时间',
-    value: 'ts',
+    value: $route.query.type === 'history' ? 'alarmTime' : 'ts',
     align: 'center',
   },
   {
@@ -89,7 +90,7 @@
   },
   {
     text: '处置时长',
-    value: 'duration',
+    value: $route.query.type === 'history' ? 'cancelDuration' : 'duration',
     align: 'center',
   },
   {
@@ -107,8 +108,8 @@
 const fetchDetail = async () => {
   loading.value = true
   const res1 = await getAlarmLevelListPage({ offset: 1, limit: 9999 })
-  const res2 = await getAlarmTypeListPage({ offset: 1, limit: 9999 })
-  detailAlarm($route.query.id as string).then((res) => {
+  const res2 = await getAlarmTypeListPage({ offset: 1, limit: 9999 });
+  ($route.query.type === 'history' ? getAlarmDetail : detailAlarm)($route.query.id as string).then((res) => {
     detailInfo.value = toHumpObject(res.data)
     detailInfo.value.realAlarmName = detailInfo.value.realAlarm === '1' ? '报警' : '误报'
     detailInfo.value.alarmTypeName = res2.data.rows.filter((item: any) => item.id === detailInfo.value.alarmTypeId)[0]?.alarmType || ''
@@ -183,8 +184,12 @@
           </template>
           <div style="padding: 25px;">
             <el-timeline>
-              <el-timeline-item v-for="(item, index) in alarmDynamics" :key="index" :timestamp="item.approvalTime" type="primary">
-                {{ `${item.approvalPerson}${item.dept_name ? '(' : ''}${item.dept_name}${item.dept_name ? ')' : ''}${item.process_name}` }}
+              <el-timeline-item
+                v-for="(item, index) in alarmDynamics" :key="index" :timestamp="item.approvalTime"
+                type="primary"
+              >
+                {{ `${item.approvalPerson}${item.dept_name ? '(' : ''}${item.dept_name}${item.dept_name ? ')'
+                  : ''}${item.process_name}` }}
               </el-timeline-item>
             </el-timeline>
           </div>
diff --git a/src/views/home/alarm/current/index.vue b/src/views/home/alarm/current/index.vue
index 52b2be1..8b36a01 100644
--- a/src/views/home/alarm/current/index.vue
+++ b/src/views/home/alarm/current/index.vue
@@ -4,10 +4,10 @@
   Date: 2023-06-28
  -->
 <script lang="ts" setup name="CurrentAlarm">
-import { ElMessage } from 'element-plus'
+import { ElMessage, ElMessageBox } from 'element-plus'
 import { ArrowLeftBold, ArrowRightBold } from '@element-plus/icons-vue'
 import MapCom from './components/map.vue'
-import { getCurrentAlarmListPage, viewAlarm } from '@/api/home/alarm/current'
+import { batchDelete, getCurrentAlarmListPage, viewAlarm } from '@/api/home/alarm/current'
 import { getDictByCode } from '@/api/system/dict'
 import { getAlarmLevelListPage, getAlarmTypeListPage } from '@/api/home/rule/alarm'
 import { getDeviceTypeListPage } from '@/api/home/device/type'
@@ -66,6 +66,35 @@
     }
   }
 })
+const shortcuts = [
+  {
+    text: '近一周',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setDate(start.getDate() - 7)
+      return [start, end]
+    },
+  },
+  {
+    text: '近一个月',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setMonth(start.getMonth() - 1)
+      return [start, end]
+    },
+  },
+  {
+    text: '近三个月',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setMonth(start.getMonth() - 3)
+      return [start, end]
+    },
+  },
+]
 // 查询数据
 const fetchData = () => {
   loadingTable.value = true
@@ -140,8 +169,8 @@
 const detail = (row: any) => {
   mapData.value = row
   switchMode('map')
-  row.lngGaode = '116.398043'
-  row.latGaode = '39.901552'
+  // row.lngGaode = '116.398043'
+  // row.latGaode = '39.901552'
   // 绘制点
   const draw = () => {
     mapRef.value.mapRef.removeMarker()
@@ -209,6 +238,35 @@
   })
 }
 fetchDict()
+const { proxy } = getCurrentInstance() as any
+// 多选
+const multipleTable = ref([])
+const handleSelectionChange = (val: any) => {
+  console.log(val, '多选数据')
+  multipleTable.value = val
+}
+// 批量删除
+const batchDeleteRow = () => {
+  if (!multipleTable.value.length) {
+    ElMessage.warning('请先选中数据')
+    return
+  }
+  ElMessageBox.confirm(
+    '确定要删除选中的数据吗？',
+    '确认操作',
+    {
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+      type: 'warning',
+    },
+  ).then(() => {
+    batchDelete(multipleTable.value.map((item: any) => item.id)).then(() => {
+      ElMessage.success('操作成功')
+      multipleTable.value = []
+      fetchData()
+    })
+  })
+}
 </script>
 
 <template>
@@ -255,7 +313,7 @@
       </search-item>
       <search-item>
         <el-date-picker
-          v-model="datetimerange" type="datetimerange" format="YYYY-MM-DD HH:mm:ss"
+          v-model="datetimerange" type="datetimerange" format="YYYY-MM-DD HH:mm:ss" :shortcuts="shortcuts"
           value-format="YYYY-MM-DD HH:mm:ss" range-separator="至" start-placeholder="报警开始时间" end-placeholder="报警结束时间"
           clearable
         />
@@ -274,6 +332,9 @@
           <template #btns-right>
             <!-- 操作 -->
             <div>
+              <el-button v-if="proxy.hasPerm('/alarm/current/delete')" type="primary" @click="batchDeleteRow">
+                批量删除
+              </el-button>
               <el-button type="primary">
                 导出
               </el-button>
@@ -282,7 +343,10 @@
           <!-- 查询结果Table显示 -->
           <normal-table
             :data="list1" :total="total" :columns="columnsConfig" :query="listQuery"
-            :list-loading="loadingTable" :height="tableHeight - 50 - 70" @change="changePage"
+            :list-loading="loadingTable" :height="tableHeight - 50 - 70"
+            :is-multi="proxy.hasPerm('/alarm/current/delete')"
+            :is-showmulti-select="proxy.hasPerm('/alarm/current/delete')" @change="changePage"
+            @multiSelect="handleSelectionChange"
           >
             <template #preColumns>
               <el-table-column label="序号" width="55" align="center">
diff --git a/src/views/home/alarm/history/index.vue b/src/views/home/alarm/history/index.vue
index 87bb167..74ca152 100644
--- a/src/views/home/alarm/history/index.vue
+++ b/src/views/home/alarm/history/index.vue
@@ -80,6 +80,35 @@
     }
   }
 })
+const shortcuts = [
+  {
+    text: '近一周',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setDate(start.getDate() - 7)
+      return [start, end]
+    },
+  },
+  {
+    text: '近一个月',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setMonth(start.getMonth() - 1)
+      return [start, end]
+    },
+  },
+  {
+    text: '近三个月',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setMonth(start.getMonth() - 3)
+      return [start, end]
+    },
+  },
+]
 // 查询数据
 const fetchData = () => {
   loadingTable.value = true
@@ -127,10 +156,11 @@
 const $router = useRouter()
 const moreData = (row: any) => {
   $router.push({
-    name: 'AlarmCurrentDetail',
+    name: 'AlarmHistoryDetail',
     query: {
       id: row.id,
       row: JSON.stringify(row),
+      type: 'history',
     },
   })
 }
@@ -218,7 +248,7 @@
       </search-item>
       <search-item>
         <el-date-picker
-          v-model="datetimerange" type="datetimerange" format="YYYY-MM-DD HH:mm:ss"
+          v-model="datetimerange" type="datetimerange" format="YYYY-MM-DD HH:mm:ss" :shortcuts="shortcuts"
           value-format="YYYY-MM-DD HH:mm:ss" range-separator="至" start-placeholder="报警开始时间" end-placeholder="报警结束时间"
           clearable
         />
diff --git a/src/views/home/device/product/index.vue b/src/views/home/device/product/index.vue
index 1bb3d99..2300270 100644
--- a/src/views/home/device/product/index.vue
+++ b/src/views/home/device/product/index.vue
@@ -21,8 +21,8 @@
   { text: '设备型号', value: 'deviceModel', align: 'center' },
   { text: '厂商', value: 'manufacturerName', align: 'center' },
   { text: '通讯协议', value: 'protocolName', align: 'center' },
-  { text: '接入方式', value: 'accessMethodName', align: 'center' },
-  { text: '创建时间', value: 'ts', align: 'center' },
+  { text: '接入方式', value: 'accessMethodName', align: 'center', width: '140' },
+  { text: '创建时间', value: 'ts', align: 'center', width: '200' },
 ])
 // 最终展示列
 const columnsConfig = ref([])
diff --git a/src/views/home/device/type/index.vue b/src/views/home/device/type/index.vue
index 56d7f65..7df5933 100644
--- a/src/views/home/device/type/index.vue
+++ b/src/views/home/device/type/index.vue
@@ -14,12 +14,12 @@
 const total = ref(0)
 // 初始展示列
 const columns = ref<any>([
-  { text: '设备类型代号', value: 'typeCode', align: 'center' },
+  { text: '设备类型代号', value: 'typeCode', align: 'center', width: '110' },
   { text: '设备类型', value: 'typeName', align: 'center' },
   { text: '描述', value: 'typeDescription', align: 'center' },
   { text: '监测对象', value: 'watchObjectName', align: 'center' },
-  { text: '是否启用', value: 'isUsedName', align: 'center' },
-  { text: '操作时间', value: 'ts', align: 'center' },
+  { text: '是否启用', value: 'isUsedName', align: 'center', width: '110' },
+  { text: '操作时间', value: 'ts', align: 'center', width: '200' },
 ])
 // 最终展示列
 const columnsConfig = ref([])
diff --git a/src/views/home/ledger/ledger/components/wellList.vue b/src/views/home/ledger/ledger/components/wellList.vue
index 61eca63..6e40ede 100644
--- a/src/views/home/ledger/ledger/components/wellList.vue
+++ b/src/views/home/ledger/ledger/components/wellList.vue
@@ -22,12 +22,12 @@
   { text: '位号', value: 'tagNumber', align: 'center', isRequired: true, width: '110' },
   { text: '编号', value: 'ledgerCode', align: 'center', isRequired: true, width: '150' },
   { text: '名称', value: 'ledgerName', align: 'center', isRequired: true },
-  { text: '管理单位', value: 'responsibleDept', align: 'center' },
+  { text: '管理单位', value: 'deptName', align: 'center', width: '160' },
   { text: '详细位置', value: 'position', align: 'center' },
-  { text: '产权单位', value: 'deptName', align: 'center', isRequired: true },
-  { text: '管理方式', value: 'manageTypeName', align: 'center', isRequired: true },
-  { text: '使用状态', value: 'onStateName', align: 'center', isRequired: true },
-  { text: '位置状态', value: 'locationStateName', align: 'center', isRequired: true },
+  { text: '产权单位', value: 'responsibleDeptName', align: 'center', isRequired: true },
+  { text: '管理方式', value: 'manageTypeName', align: 'center', isRequired: true, width: '110' },
+  { text: '使用状态', value: 'onStateName', align: 'center', isRequired: true, width: '110' },
+  { text: '位置状态', value: 'locationStateName', align: 'center', isRequired: true, width: '110' },
 ])
 // 最终展示列
 const columnsConfig = ref([])
diff --git a/src/views/home/ledger/pipeline/index.vue b/src/views/home/ledger/pipeline/index.vue
index 0b1dc59..d56a41c 100644
--- a/src/views/home/ledger/pipeline/index.vue
+++ b/src/views/home/ledger/pipeline/index.vue
@@ -16,13 +16,13 @@
 const columns = ref<any>([
   { text: '管线编号', value: 'pipeCode', align: 'center', isRequired: true },
   { text: '管线位置', value: 'position', align: 'center', isRequired: true },
-  { text: '压力级制', value: 'pressTypeName', align: 'center', isRequired: true },
-  { text: '材质', value: 'material', align: 'center' },
-  { text: '管径(mm)', value: 'pipeDiameter', align: 'center' },
-  { text: '建设年代', value: 'constructEra', align: 'center' },
+  { text: '压力级制', value: 'pressTypeName', align: 'center', isRequired: true, width: '110' },
+  { text: '材质', value: 'material', align: 'center', width: '110' },
+  { text: '管径(mm)', value: 'pipeDiameter', align: 'center', width: '110' },
+  { text: '建设年代', value: 'constructEra', align: 'center', width: '110' },
   { text: '管理单位', value: 'deptName', align: 'center', isRequired: true },
   { text: '产权单位', value: 'propertyOwner', align: 'center', isRequired: true },
-  { text: '管理方式', value: 'manageTypeName', align: 'center', isRequired: true },
+  { text: '管理方式', value: 'manageTypeName', align: 'center', isRequired: true, width: '110' },
 ])
 // 最终展示列
 const columnsConfig = ref([])

diff --git a/src/api/home/alarm/count.ts b/src/api/home/alarm/count.ts
index 1f4b59a..d5d9244 100644
--- a/src/api/home/alarm/count.ts
+++ b/src/api/home/alarm/count.ts
@@ -34,3 +34,11 @@
     data,
   })
 }
+// 报警趋势分析
+export function getAlarmTrend(data: any) {
+  return request({
+    url: '/statics/alarmRecords/alarmTrend',
+    method: 'post',
+    data,
+  })
+}
diff --git a/src/api/home/alarm/current.ts b/src/api/home/alarm/current.ts
index ec20f64..ac3387f 100644
--- a/src/api/home/alarm/current.ts
+++ b/src/api/home/alarm/current.ts
@@ -57,3 +57,13 @@
     },
   })
 }
+// 批量删除
+export function batchDelete(ids: any) {
+  return request({
+    url: '/system/alarmRecords/batchDelete',
+    method: 'post',
+    data: {
+      ids,
+    },
+  })
+}
diff --git a/src/api/home/alarm/history.ts b/src/api/home/alarm/history.ts
index 5f55e82..44cf851 100644
--- a/src/api/home/alarm/history.ts
+++ b/src/api/home/alarm/history.ts
@@ -11,3 +11,13 @@
     data,
   })
 }
+// 详情
+export function getAlarmDetail(id: any) {
+  return request({
+    url: '/system/alarmRecords/historyAlarmDetail',
+    method: 'post',
+    data: {
+      id,
+    },
+  })
+}
diff --git a/src/components/Echart/LineChart.vue b/src/components/Echart/LineChart.vue
index 2733161..b811f29 100644
--- a/src/components/Echart/LineChart.vue
+++ b/src/components/Echart/LineChart.vue
@@ -207,7 +207,7 @@
         },
       },
       valueFormatter: (value: string | number) => {
-        return value ? value + props.unit : ''
+        return value ? value + props.unit : value === 0 ? '0' : ''
       },
     }, // 提示框
     xAxis: [
diff --git a/src/router/modules/pc.ts b/src/router/modules/pc.ts
index 9b058fa..f3edac9 100644
--- a/src/router/modules/pc.ts
+++ b/src/router/modules/pc.ts
@@ -94,6 +94,19 @@
         },
       },
       {
+        path: '/history/detail',
+        component: () => import('@/views/home/alarm/current/components/detail.vue'),
+        name: 'AlarmHistoryDetail',
+        meta: {
+          title: '报警详情',
+          icon: 'ep:key',
+          sidebar: false,
+          breadcrumb: true,
+          activeMenu: '/alarm/history',
+          auth: '/alarm/history',
+        },
+      },
+      {
         path: 'count',
         component: () => import('@/views/home/alarm/count/index.vue'),
         name: 'AlarmCount',
diff --git a/src/views/home/alarm/count/components/alarmStatistics.vue b/src/views/home/alarm/count/components/alarmStatistics.vue
index b088de2..7aa930f 100644
--- a/src/views/home/alarm/count/components/alarmStatistics.vue
+++ b/src/views/home/alarm/count/components/alarmStatistics.vue
@@ -34,13 +34,12 @@
     value: '3',
   },
 ])
-const xAxisData = ref([])
-const data = ref([])
+const xAxisData = ref<string[]>([])
+const data = ref<any[]>([])
 const list = ref([])
 const loading = ref(true)
 // 开始结束时间
 const datetimerange = ref()
-// 默认当天
 watch(() => datetimerange.value, (newVal) => {
   listQuery.value.begTime = ''
   listQuery.value.endTime = ''
@@ -51,6 +50,35 @@
     }
   }
 })
+const shortcuts = [
+  {
+    text: '近一周',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setDate(start.getDate() - 7)
+      return [start, end]
+    },
+  },
+  {
+    text: '近一个月',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setMonth(start.getMonth() - 1)
+      return [start, end]
+    },
+  },
+  {
+    text: '近三个月',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setMonth(start.getMonth() - 3)
+      return [start, end]
+    },
+  },
+]
 // setTimeout(() => {
 //   xAxisData.value = [
 //     '闸井浓度超限', '场站浓度超限', '场站火焰报警', '疑似第三方破坏', '场站烟雾报警',
@@ -66,10 +94,25 @@
 //     value: data.value[0].data[index],
 //   }))
 // }, 1000)
+const resizePage = () => {
+  setTimeout(() => {
+    const resize = new Event('resize')
+    window.dispatchEvent(resize)
+  }, 500)
+}
 const fetchData = () => {
   loading.value = true
   getAlarmType(listQuery.value).then((res) => {
-    console.log(res.data, '各类报警统计')
+    // console.log(res.data, '各类报警统计')
+    xAxisData.value = res.data.map((item: any) => item.name)
+    data.value = [
+      {
+        name: '报警数量',
+        data: res.data.map((item: any) => item.value),
+      },
+    ]
+    list.value = res.data
+    resizePage
     loading.value = false
   }).catch(() => {
     loading.value = false
@@ -105,8 +148,8 @@
           style="width: 220px;margin: 0 5px;"
         />
         <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="至"
+          v-model="datetimerange" type="datetimerange" format="YYYY-MM-DD HH:mm:ss" :shortcuts="shortcuts"
+          style="width: 380px;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;" @click="fetchData">
@@ -118,8 +161,8 @@
       <div v-loading="loading" class="alarm-count">
         <div class="bar">
           <bar-chart-vertical
-            v-show="xAxisData.length"
-            :x-axis-data="xAxisData" :bar-coner="0" :data="data" :colors="[]" :bar-width="15"
+            v-show="xAxisData.length" :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' }"
             :grid="{
               top: 50,
@@ -133,7 +176,7 @@
         </div>
         <div class="table">
           <el-table border :data="list" stripe style="width: 100%;" :height="440">
-            <el-table-column label="报警类型" prop="alarmType" align="center" />
+            <el-table-column label="报警类型" prop="name" align="center" />
             <el-table-column label="报警数量" prop="value" align="center" />
           </el-table>
         </div>
diff --git a/src/views/home/alarm/count/components/deptCount.vue b/src/views/home/alarm/count/components/deptCount.vue
index 1ca5482..798bfd2 100644
--- a/src/views/home/alarm/count/components/deptCount.vue
+++ b/src/views/home/alarm/count/components/deptCount.vue
@@ -5,40 +5,123 @@
  -->
 <script lang="ts" setup name="AlarmCount">
 import layout from './layout.vue'
+import { getAlarmCompany } from '@/api/home/alarm/count'
 const listQuery = ref({
-  type: 'day',
+  begTime: '',
+  endTime: '',
+  ledgerType: '',
+  timeType: '1',
 })
 const selectTimeType = (type: string) => {
-  listQuery.value.type = type
+  listQuery.value.timeType = type
 }
+// 开始结束时间
+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 shortcuts = [
+  {
+    text: '近一周',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setDate(start.getDate() - 7)
+      return [start, end]
+    },
+  },
+  {
+    text: '近一个月',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setMonth(start.getMonth() - 1)
+      return [start, end]
+    },
+  },
+  {
+    text: '近三个月',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setMonth(start.getMonth() - 3)
+      return [start, end]
+    },
+  },
+]
+// 类别
+const ledgerTypeList = ref<{ id: string; name: string; value: string }[]>([
+  {
+    name: '闸井',
+    id: '1',
+    value: '1',
+  },
+  {
+    name: '场站',
+    id: '2',
+    value: '2',
+  },
+  {
+    name: '管线',
+    id: '3',
+    value: '3',
+  },
+])
 const xAxisData = ref([])
 const data = ref([])
 const list = ref([])
-setTimeout(() => {
-  xAxisData.value = [
-    '第一分公司', '第二分公司', '第三分公司', '第四分公司', '第五分公司',
-  ]
-  data.value = [
-    {
-      name: '闸井浓度超限',
-      data: [1, 8, 5, 8, 4],
-    },
-    {
-      name: '场站浓度超限',
-      data: [8, 3, 6, 1, 7],
-    },
-    {
-      name: '疑似第三方破坏',
-      data: [4, 7, 5, 9, 4],
-    },
-  ]
-  list.value = xAxisData.value.map((item, index) => ({
-    dept: item,
-    wellOver: data.value[0].data[index],
-    senceOver: data.value[1].data[index],
-    thirdParty: data.value[2].data[index],
-  }))
-}, 1000)
+const loading = ref(true)
+// setTimeout(() => {
+//   xAxisData.value = [
+//     '第一分公司', '第二分公司', '第三分公司', '第四分公司', '第五分公司',
+//   ]
+//   data.value = [
+//     {
+//       name: '闸井浓度超限',
+//       data: [1, 8, 5, 8, 4],
+//     },
+//     {
+//       name: '场站浓度超限',
+//       data: [8, 3, 6, 1, 7],
+//     },
+//     {
+//       name: '疑似第三方破坏',
+//       data: [4, 7, 5, 9, 4],
+//     },
+//   ]
+//   list.value = xAxisData.value.map((item, index) => ({
+//     dept: item,
+//     wellOver: data.value[0].data[index],
+//     senceOver: data.value[1].data[index],
+//     thirdParty: data.value[2].data[index],
+//   }))
+// }, 1000)
+const resizePage = () => {
+  setTimeout(() => {
+    const resize = new Event('resize')
+    window.dispatchEvent(resize)
+  }, 500)
+}
+const fetchData = () => {
+  loading.value = true
+  getAlarmCompany(listQuery.value).then((res) => {
+    console.log(res.data, '各单位报警统计')
+    resizePage()
+    loading.value = false
+  }).catch(() => {
+    loading.value = false
+  })
+}
+onMounted(() => {
+  fetchData()
+})
 </script>
 
 <template>
@@ -47,49 +130,59 @@
     <template #search>
       <div class="search">
         <el-button
-          :class="listQuery.type === 'day' ? 'active' : ''" round size="small"
-          @click="selectTimeType('day')"
+          :class="listQuery.timeType === '1' ? 'active' : ''" round size="small"
+          style="margin: 0 5px;"
+          @click="selectTimeType('1')"
         >
           今日
         </el-button>
         <el-button
-          :class="listQuery.type === 'week' ? 'active' : ''" round size="small"
-          @click="selectTimeType('week')"
+          :class="listQuery.timeType === '2' ? 'active' : ''" round size="small"
+          style="margin: 0 5px;"
+          @click="selectTimeType('2')"
         >
           本周
         </el-button>
         <el-button
-          :class="listQuery.type === 'month' ? 'active' : ''" round size="small"
-          @click="selectTimeType('month')"
+          :class="listQuery.timeType === '3' ? 'active' : ''" round size="small"
+          style="margin: 0 5px;"
+          @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 v-for="item in ledgerTypeList" :key="item.id" :label="item.name" :value="item.id" />
+        </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
+          style="width: 380px;margin: 0 5px;" value-format="YYYY-MM-DD HH:mm:ss" range-separator="至"
+          start-placeholder="报警开始时间" end-placeholder="报警结束时间" clearable :shortcuts="shortcuts"
         />
-        <el-button type="primary" style="margin: 0 5px;">
+        <el-button type="primary" style="margin: 0 5px;" @click="fetchData">
           搜索
         </el-button>
       </div>
     </template>
     <template #content>
-      <div class="alarm-count">
+      <div v-loading="loading" class="alarm-count">
         <div class="bar">
           <bar-chart-vertical
+            v-show="xAxisData.length"
             :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' }"
+            :grid="{
+              top: 50,
+              left: 30,
+              right: 30,
+              bottom: 20,
+              containLabel: true, // 是否包含坐标轴的刻度标签
+            }"
           />
+          <el-empty v-show="!xAxisData.length" description="暂无数据" />
         </div>
         <div class="table">
           <el-table border :data="list" stripe style="width: 100%;" :height="440">
-            <el-table-column label="管理单位" prop="dept" align="center" />
+            <el-table-column label="管理单位" prop="dept" align="center" width="200" />
             <el-table-column label="闸井浓度超限" prop="wellOver" align="center" />
             <el-table-column label="场站浓度超限" prop="senceOver" align="center" />
             <el-table-column label="疑似第三方破坏" prop="thirdParty" align="center" />
diff --git a/src/views/home/alarm/count/components/locationAnalysis.vue b/src/views/home/alarm/count/components/locationAnalysis.vue
index 4265aaf..4cd5921 100644
--- a/src/views/home/alarm/count/components/locationAnalysis.vue
+++ b/src/views/home/alarm/count/components/locationAnalysis.vue
@@ -18,7 +18,7 @@
 // 开始结束时间
 const datetimerange = ref()
 // 默认当天
-datetimerange.value = [`${dayjs().format('YYYY-MM-DD')} 00:00:00`, dayjs().format('YYYY-MM-DD HH:mm:ss')]
+// datetimerange.value = [`${dayjs().format('YYYY-MM-DD')} 00:00:00`, dayjs().format('YYYY-MM-DD HH:mm:ss')]
 watch(() => datetimerange.value, (newVal) => {
   listQuery.value.begTime = ''
   listQuery.value.endTime = ''
@@ -29,6 +29,35 @@
     }
   }
 })
+const shortcuts = [
+  {
+    text: '近一周',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setDate(start.getDate() - 7)
+      return [start, end]
+    },
+  },
+  {
+    text: '近一个月',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setMonth(start.getMonth() - 1)
+      return [start, end]
+    },
+  },
+  {
+    text: '近三个月',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setMonth(start.getMonth() - 3)
+      return [start, end]
+    },
+  },
+]
 const selectTimeType = (type: string) => {
   listQuery.value.timeType = type
 }
@@ -52,13 +81,13 @@
     <!-- 查询条件 -->
     <template #search>
       <div class="search">
-        <el-button :class="listQuery.timeType === '1' ? 'active' : ''" round size="small" @click="selectTimeType('1')">
+        <el-button :class="listQuery.timeType === '1' ? 'active' : ''" round size="small" style="margin: 0 5px;" @click="selectTimeType('1')">
           今日
         </el-button>
-        <el-button :class="listQuery.timeType === '2' ? 'active' : ''" round size="small" @click="selectTimeType('2')">
+        <el-button :class="listQuery.timeType === '2' ? 'active' : ''" round size="small" style="margin: 0 5px;" @click="selectTimeType('2')">
           本周
         </el-button>
-        <el-button :class="listQuery.timeType === '3' ? 'active' : ''" round size="small" @click="selectTimeType('3')">
+        <el-button :class="listQuery.timeType === '3' ? 'active' : ''" round size="small" style="margin: 0 5px;" @click="selectTimeType('3')">
           本月
         </el-button>
         <el-select v-model="listQuery.ledgerType" placeholder="全部类别" clearable style="width: 180px;margin: 0 5px;">
@@ -68,8 +97,8 @@
         </el-select>
         <el-date-picker
           v-model="datetimerange" type="datetimerange" format="YYYY-MM-DD HH:mm:ss"
-          style="width: 360px;margin: 0 5px;" value-format="YYYY-MM-DD HH:mm:ss" range-separator="至"
-          start-placeholder="报警开始时间" end-placeholder="报警结束时间" clearable
+          style="width: 380px;margin: 0 5px;" value-format="YYYY-MM-DD HH:mm:ss" range-separator="至"
+          start-placeholder="报警开始时间" end-placeholder="报警结束时间" clearable :shortcuts="shortcuts"
         />
         <el-button type="primary" style="margin: 0 5px;" @click="fetchData">
           搜索
@@ -80,13 +109,13 @@
       <div class="alarm-count">
         <div class="table">
           <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="type" align="center" width="140" />
+            <el-table-column label="位号" prop="tagNumber" align="center" width="160" />
             <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-column label="标签" prop="marker" align="center" width="140" />
+            <el-table-column label="报警次数" prop="alarmSum" align="center" width="120" />
           </el-table>
         </div>
       </div>
diff --git a/src/views/home/alarm/count/components/trendAnalysis.vue b/src/views/home/alarm/count/components/trendAnalysis.vue
index 73e18b0..18cfb4c 100644
--- a/src/views/home/alarm/count/components/trendAnalysis.vue
+++ b/src/views/home/alarm/count/components/trendAnalysis.vue
@@ -5,49 +5,203 @@
  -->
 <script lang="ts" setup name="TrendAnalysis">
 import layout from './layout.vue'
+import { getAlarmTrend } from '@/api/home/alarm/count'
 const listQuery = ref({
-  type: 'day',
+  timeType: '2',
+  ledgerType: '',
+  endTime: '',
+  begTime: '',
+  deptid: '',
 })
+// 开始结束时间
+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 shortcuts = [
+  {
+    text: '近一周',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setDate(start.getDate() - 7)
+      return [start, end]
+    },
+  },
+  {
+    text: '近一个月',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setMonth(start.getMonth() - 1)
+      return [start, end]
+    },
+  },
+  {
+    text: '近三个月',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setMonth(start.getMonth() - 3)
+      return [start, end]
+    },
+  },
+]
 const selectTimeType = (type: string) => {
-  listQuery.value.type = type
+  listQuery.value.timeType = type
 }
-const xAxisData = ref([])
-const data = ref([])
+const columns = ref<any[]>([
+  {
+    text: '闸井浓度超限',
+    value: 'well',
+  },
+  {
+    text: '场站浓度超限',
+    value: 'station',
+  },
+  {
+    text: '管线浓度超限',
+    value: 'pipeline',
+  },
+])
+// 类别
+const ledgerTypeList = ref<{ id: string; name: string; value: string }[]>([
+  {
+    name: '闸井',
+    id: '1',
+    value: '1',
+  },
+  {
+    name: '场站',
+    id: '2',
+    value: '2',
+  },
+  {
+    name: '管线',
+    id: '3',
+    value: '3',
+  },
+])
+const xAxisData = ref<string[]>([])
+const data = ref<any[]>([])
 const list = ref([])
-setTimeout(() => {
-  xAxisData.value = [
-    '2024-07-01 12:11:12',
-    '2024-07-02 12:11:12',
-    '2024-07-03 12:11:12',
-    '2024-07-04 12:11:12',
-    '2024-07-05 12:11:12',
-    '2024-07-06 12:11:12',
-    '2024-07-07 12:11:12',
-  ]
-  data.value = [
-    {
-      name: '闸井浓度超限',
-      data: [1, 3, 5, 1, 4, 2, 7],
-      symbol: 'emptyCircle',
-    },
-    {
-      name: '场站浓度超限',
-      data: [2, 1, 4, 1, 5, 2, 9],
-      symbol: 'emptyCircle',
-    },
-    {
-      name: '闸井浓度超限',
-      data: [4, 3, 2, 4, 7, 9, 1],
-      symbol: 'emptyCircle',
-    },
-  ]
-  list.value = xAxisData.value.map((item, index) => ({
-    alarmTime: item,
-    wellOver: data.value[0].data[index],
-    senceOver: data.value[1].data[index],
-    thirdParty: data.value[2].data[index],
-  }))
-}, 1000)
+const loading = ref(true)
+// setTimeout(() => {
+//   xAxisData.value = [
+//     '2024-07-01 12:11:12',
+//     '2024-07-02 12:11:12',
+//     '2024-07-03 12:11:12',
+//     '2024-07-04 12:11:12',
+//     '2024-07-05 12:11:12',
+//     '2024-07-06 12:11:12',
+//     '2024-07-07 12:11:12',
+//   ]
+//   data.value = [
+//     {
+//       name: '闸井浓度超限',
+//       data: [1, 3, 5, 1, 4, 2, 7],
+//       symbol: 'emptyCircle',
+//     },
+//     {
+//       name: '场站浓度超限',
+//       data: [2, 1, 4, 1, 5, 2, 9],
+//       symbol: 'emptyCircle',
+//     },
+//     {
+//       name: '闸井浓度超限',
+//       data: [4, 3, 2, 4, 7, 9, 1],
+//       symbol: 'emptyCircle',
+//     },
+//   ]
+//   list.value = xAxisData.value.map((item, index) => ({
+//     alarmTime: item,
+//     wellOver: data.value[0].data[index],
+//     senceOver: data.value[1].data[index],
+//     thirdParty: data.value[2].data[index],
+//   }))
+// }, 1000)
+const resizePage = () => {
+  setTimeout(() => {
+    const resize = new Event('resize')
+    window.dispatchEvent(resize)
+  }, 500)
+}
+const fetchData = () => {
+  loading.value = true
+  const columnsDict = {
+    闸井浓度超限: 'well',
+    场站浓度超限: 'station',
+    管线浓度超限: 'pipeline',
+  } as { [key: string]: string }
+  getAlarmTrend(listQuery.value).then((res) => {
+    console.log(res.data, '报警趋势分析')
+    xAxisData.value = res.data.map((item: any) => item.date)
+    if (!listQuery.value.ledgerType) {
+      data.value = [
+        {
+          name: '闸井浓度超限',
+          data: res.data.map((item: any) => item['闸井浓度超限']),
+        },
+        {
+          name: '场站浓度超限',
+          data: res.data.map((item: any) => item['场站浓度超限']),
+        },
+        {
+          name: '管线浓度超限',
+          data: res.data.map((item: any) => item['管线浓度超限']),
+        },
+      ]
+    }
+    else if (listQuery.value.ledgerType === '1') {
+      data.value = [
+        {
+          name: '闸井浓度超限',
+          data: res.data.map((item: any) => item['闸井浓度超限']),
+        },
+      ]
+    }
+    else if (listQuery.value.ledgerType === '2') {
+      data.value = [
+        {
+          name: '场站浓度超限',
+          data: res.data.map((item: any) => item['场站浓度超限']),
+        },
+      ]
+    }
+    else if (listQuery.value.ledgerType === '3') {
+      data.value = [
+        {
+          name: '管线浓度超限',
+          data: res.data.map((item: any) => item['管线浓度超限']),
+        },
+      ]
+    }
+    list.value = res.data.map((item: any) => ({
+      date: item.date,
+      well: item['闸井浓度超限'],
+      station: item['场站浓度超限'],
+      pipeline: item['管线浓度超限'],
+    }))
+    columns.value = data.value.map((item: any) => ({
+      text: item.name,
+      value: columnsDict[item.name],
+    }))
+    resizePage()
+    loading.value = false
+  }).catch(() => {
+    loading.value = false
+  })
+}
+onMounted(() => {
+  fetchData()
+})
 </script>
 
 <template>
@@ -56,34 +210,30 @@
     <template #search>
       <div class="search">
         <el-button
-          :class="listQuery.type === 'day' ? 'active' : ''" round size="small"
-          @click="selectTimeType('day')"
-        >
-          今日
-        </el-button>
-        <el-button
-          :class="listQuery.type === 'week' ? 'active' : ''" round size="small"
-          @click="selectTimeType('week')"
+          :class="listQuery.timeType === '2' ? 'active' : ''" round size="small" style="margin: 0 5px;"
+          @click="selectTimeType('2')"
         >
           本周
         </el-button>
         <el-button
-          :class="listQuery.type === 'month' ? 'active' : ''" round size="small"
-          @click="selectTimeType('month')"
+          :class="listQuery.timeType === '3' ? 'active' : ''" round size="small" style="margin: 0 5px;"
+          @click="selectTimeType('3')"
         >
           本月
         </el-button>
-        <el-select v-model="listQuery.keywords" placeholder="全部类别" clearable style="width: 180px;margin: 0 5px;" />
+        <el-select v-model="listQuery.ledgerType" placeholder="全部类别" clearable style="width: 180px;margin: 0 5px;">
+          <el-option v-for="item in ledgerTypeList" :key="item.id" :label="item.name" :value="item.id" />
+        </el-select>
         <dept-select
-          v-model="listQuery.keywords" placeholder="管理单位" :clearable="true"
+          v-model="listQuery.deptid" placeholder="管理单位" :clearable="true"
           style="width: 220px;margin: 0 5px;"
         />
         <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
+          style="width: 380px;margin: 0 5px;" value-format="YYYY-MM-DD HH:mm:ss" range-separator="至"
+          start-placeholder="报警开始时间" end-placeholder="报警结束时间" clearable :shortcuts="shortcuts"
         />
-        <el-button type="primary" style="margin: 0 5px;">
+        <el-button type="primary" style="margin: 0 5px;" @click="fetchData">
           搜索
         </el-button>
       </div>
@@ -94,14 +244,22 @@
           <line-chart
             :x-axis-data="xAxisData" :data="data" :gradient="false"
             :legend="{ itemWidth: 8, itemHeight: 8, type: 'scroll', orient: 'horizontal', icon: 'roundRect', right: '0', top: '10' }"
+            :grid="{
+              top: 50,
+              left: 30,
+              right: 30,
+              bottom: 20,
+              containLabel: true, // 是否包含坐标轴的刻度标签
+            }"
           />
         </div>
         <div class="table">
           <el-table border :data="list" stripe style="width: 100%;" :height="440">
-            <el-table-column label="日期" prop="alarmTime" align="center" />
-            <el-table-column label="闸井浓度超限" prop="wellOver" align="center" />
-            <el-table-column label="场站浓度超限" prop="senceOver" align="center" />
-            <el-table-column label="疑似第三方破坏" prop="thirdParty" align="center" />
+            <el-table-column label="日期" prop="date" align="center" width="190" />
+            <el-table-column
+              v-for="item in columns" :key="item.text" :label="item.text" :prop="item.value"
+              align="center"
+            />
           </el-table>
         </div>
       </div>
diff --git a/src/views/home/alarm/current/components/detail.vue b/src/views/home/alarm/current/components/detail.vue
index 4fb61d3..e200fe3 100644
--- a/src/views/home/alarm/current/components/detail.vue
+++ b/src/views/home/alarm/current/components/detail.vue
@@ -7,6 +7,7 @@
 import dayjs from 'dayjs'
 import { ElMessage } from 'element-plus'
 import { alarmProcessNode, detailAlarm } from '@/api/home/alarm/current'
+import { getAlarmDetail } from '@/api/home/alarm/history'
 import { toHumpObject } from '@/utils/String'
 import { getAlarmLevelListPage, getAlarmTypeListPage } from '@/api/home/rule/alarm'
 import { getDateDiff } from '@/utils/dayjs'
@@ -44,7 +45,7 @@
   },
   {
     text: '报警时间',
-    value: 'ts',
+    value: $route.query.type === 'history' ? 'alarmTime' : 'ts',
     align: 'center',
   },
   {
@@ -89,7 +90,7 @@
   },
   {
     text: '处置时长',
-    value: 'duration',
+    value: $route.query.type === 'history' ? 'cancelDuration' : 'duration',
     align: 'center',
   },
   {
@@ -107,8 +108,8 @@
 const fetchDetail = async () => {
   loading.value = true
   const res1 = await getAlarmLevelListPage({ offset: 1, limit: 9999 })
-  const res2 = await getAlarmTypeListPage({ offset: 1, limit: 9999 })
-  detailAlarm($route.query.id as string).then((res) => {
+  const res2 = await getAlarmTypeListPage({ offset: 1, limit: 9999 });
+  ($route.query.type === 'history' ? getAlarmDetail : detailAlarm)($route.query.id as string).then((res) => {
     detailInfo.value = toHumpObject(res.data)
     detailInfo.value.realAlarmName = detailInfo.value.realAlarm === '1' ? '报警' : '误报'
     detailInfo.value.alarmTypeName = res2.data.rows.filter((item: any) => item.id === detailInfo.value.alarmTypeId)[0]?.alarmType || ''
@@ -183,8 +184,12 @@
           </template>
           <div style="padding: 25px;">
             <el-timeline>
-              <el-timeline-item v-for="(item, index) in alarmDynamics" :key="index" :timestamp="item.approvalTime" type="primary">
-                {{ `${item.approvalPerson}${item.dept_name ? '(' : ''}${item.dept_name}${item.dept_name ? ')' : ''}${item.process_name}` }}
+              <el-timeline-item
+                v-for="(item, index) in alarmDynamics" :key="index" :timestamp="item.approvalTime"
+                type="primary"
+              >
+                {{ `${item.approvalPerson}${item.dept_name ? '(' : ''}${item.dept_name}${item.dept_name ? ')'
+                  : ''}${item.process_name}` }}
               </el-timeline-item>
             </el-timeline>
           </div>
diff --git a/src/views/home/alarm/current/index.vue b/src/views/home/alarm/current/index.vue
index 52b2be1..8b36a01 100644
--- a/src/views/home/alarm/current/index.vue
+++ b/src/views/home/alarm/current/index.vue
@@ -4,10 +4,10 @@
   Date: 2023-06-28
  -->
 <script lang="ts" setup name="CurrentAlarm">
-import { ElMessage } from 'element-plus'
+import { ElMessage, ElMessageBox } from 'element-plus'
 import { ArrowLeftBold, ArrowRightBold } from '@element-plus/icons-vue'
 import MapCom from './components/map.vue'
-import { getCurrentAlarmListPage, viewAlarm } from '@/api/home/alarm/current'
+import { batchDelete, getCurrentAlarmListPage, viewAlarm } from '@/api/home/alarm/current'
 import { getDictByCode } from '@/api/system/dict'
 import { getAlarmLevelListPage, getAlarmTypeListPage } from '@/api/home/rule/alarm'
 import { getDeviceTypeListPage } from '@/api/home/device/type'
@@ -66,6 +66,35 @@
     }
   }
 })
+const shortcuts = [
+  {
+    text: '近一周',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setDate(start.getDate() - 7)
+      return [start, end]
+    },
+  },
+  {
+    text: '近一个月',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setMonth(start.getMonth() - 1)
+      return [start, end]
+    },
+  },
+  {
+    text: '近三个月',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setMonth(start.getMonth() - 3)
+      return [start, end]
+    },
+  },
+]
 // 查询数据
 const fetchData = () => {
   loadingTable.value = true
@@ -140,8 +169,8 @@
 const detail = (row: any) => {
   mapData.value = row
   switchMode('map')
-  row.lngGaode = '116.398043'
-  row.latGaode = '39.901552'
+  // row.lngGaode = '116.398043'
+  // row.latGaode = '39.901552'
   // 绘制点
   const draw = () => {
     mapRef.value.mapRef.removeMarker()
@@ -209,6 +238,35 @@
   })
 }
 fetchDict()
+const { proxy } = getCurrentInstance() as any
+// 多选
+const multipleTable = ref([])
+const handleSelectionChange = (val: any) => {
+  console.log(val, '多选数据')
+  multipleTable.value = val
+}
+// 批量删除
+const batchDeleteRow = () => {
+  if (!multipleTable.value.length) {
+    ElMessage.warning('请先选中数据')
+    return
+  }
+  ElMessageBox.confirm(
+    '确定要删除选中的数据吗？',
+    '确认操作',
+    {
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+      type: 'warning',
+    },
+  ).then(() => {
+    batchDelete(multipleTable.value.map((item: any) => item.id)).then(() => {
+      ElMessage.success('操作成功')
+      multipleTable.value = []
+      fetchData()
+    })
+  })
+}
 </script>
 
 <template>
@@ -255,7 +313,7 @@
       </search-item>
       <search-item>
         <el-date-picker
-          v-model="datetimerange" type="datetimerange" format="YYYY-MM-DD HH:mm:ss"
+          v-model="datetimerange" type="datetimerange" format="YYYY-MM-DD HH:mm:ss" :shortcuts="shortcuts"
           value-format="YYYY-MM-DD HH:mm:ss" range-separator="至" start-placeholder="报警开始时间" end-placeholder="报警结束时间"
           clearable
         />
@@ -274,6 +332,9 @@
           <template #btns-right>
             <!-- 操作 -->
             <div>
+              <el-button v-if="proxy.hasPerm('/alarm/current/delete')" type="primary" @click="batchDeleteRow">
+                批量删除
+              </el-button>
               <el-button type="primary">
                 导出
               </el-button>
@@ -282,7 +343,10 @@
           <!-- 查询结果Table显示 -->
           <normal-table
             :data="list1" :total="total" :columns="columnsConfig" :query="listQuery"
-            :list-loading="loadingTable" :height="tableHeight - 50 - 70" @change="changePage"
+            :list-loading="loadingTable" :height="tableHeight - 50 - 70"
+            :is-multi="proxy.hasPerm('/alarm/current/delete')"
+            :is-showmulti-select="proxy.hasPerm('/alarm/current/delete')" @change="changePage"
+            @multiSelect="handleSelectionChange"
           >
             <template #preColumns>
               <el-table-column label="序号" width="55" align="center">
diff --git a/src/views/home/alarm/history/index.vue b/src/views/home/alarm/history/index.vue
index 87bb167..74ca152 100644
--- a/src/views/home/alarm/history/index.vue
+++ b/src/views/home/alarm/history/index.vue
@@ -80,6 +80,35 @@
     }
   }
 })
+const shortcuts = [
+  {
+    text: '近一周',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setDate(start.getDate() - 7)
+      return [start, end]
+    },
+  },
+  {
+    text: '近一个月',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setMonth(start.getMonth() - 1)
+      return [start, end]
+    },
+  },
+  {
+    text: '近三个月',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setMonth(start.getMonth() - 3)
+      return [start, end]
+    },
+  },
+]
 // 查询数据
 const fetchData = () => {
   loadingTable.value = true
@@ -127,10 +156,11 @@
 const $router = useRouter()
 const moreData = (row: any) => {
   $router.push({
-    name: 'AlarmCurrentDetail',
+    name: 'AlarmHistoryDetail',
     query: {
       id: row.id,
       row: JSON.stringify(row),
+      type: 'history',
     },
   })
 }
@@ -218,7 +248,7 @@
       </search-item>
       <search-item>
         <el-date-picker
-          v-model="datetimerange" type="datetimerange" format="YYYY-MM-DD HH:mm:ss"
+          v-model="datetimerange" type="datetimerange" format="YYYY-MM-DD HH:mm:ss" :shortcuts="shortcuts"
           value-format="YYYY-MM-DD HH:mm:ss" range-separator="至" start-placeholder="报警开始时间" end-placeholder="报警结束时间"
           clearable
         />
diff --git a/src/views/home/device/product/index.vue b/src/views/home/device/product/index.vue
index 1bb3d99..2300270 100644
--- a/src/views/home/device/product/index.vue
+++ b/src/views/home/device/product/index.vue
@@ -21,8 +21,8 @@
   { text: '设备型号', value: 'deviceModel', align: 'center' },
   { text: '厂商', value: 'manufacturerName', align: 'center' },
   { text: '通讯协议', value: 'protocolName', align: 'center' },
-  { text: '接入方式', value: 'accessMethodName', align: 'center' },
-  { text: '创建时间', value: 'ts', align: 'center' },
+  { text: '接入方式', value: 'accessMethodName', align: 'center', width: '140' },
+  { text: '创建时间', value: 'ts', align: 'center', width: '200' },
 ])
 // 最终展示列
 const columnsConfig = ref([])
diff --git a/src/views/home/device/type/index.vue b/src/views/home/device/type/index.vue
index 56d7f65..7df5933 100644
--- a/src/views/home/device/type/index.vue
+++ b/src/views/home/device/type/index.vue
@@ -14,12 +14,12 @@
 const total = ref(0)
 // 初始展示列
 const columns = ref<any>([
-  { text: '设备类型代号', value: 'typeCode', align: 'center' },
+  { text: '设备类型代号', value: 'typeCode', align: 'center', width: '110' },
   { text: '设备类型', value: 'typeName', align: 'center' },
   { text: '描述', value: 'typeDescription', align: 'center' },
   { text: '监测对象', value: 'watchObjectName', align: 'center' },
-  { text: '是否启用', value: 'isUsedName', align: 'center' },
-  { text: '操作时间', value: 'ts', align: 'center' },
+  { text: '是否启用', value: 'isUsedName', align: 'center', width: '110' },
+  { text: '操作时间', value: 'ts', align: 'center', width: '200' },
 ])
 // 最终展示列
 const columnsConfig = ref([])
diff --git a/src/views/home/ledger/ledger/components/wellList.vue b/src/views/home/ledger/ledger/components/wellList.vue
index 61eca63..6e40ede 100644
--- a/src/views/home/ledger/ledger/components/wellList.vue
+++ b/src/views/home/ledger/ledger/components/wellList.vue
@@ -22,12 +22,12 @@
   { text: '位号', value: 'tagNumber', align: 'center', isRequired: true, width: '110' },
   { text: '编号', value: 'ledgerCode', align: 'center', isRequired: true, width: '150' },
   { text: '名称', value: 'ledgerName', align: 'center', isRequired: true },
-  { text: '管理单位', value: 'responsibleDept', align: 'center' },
+  { text: '管理单位', value: 'deptName', align: 'center', width: '160' },
   { text: '详细位置', value: 'position', align: 'center' },
-  { text: '产权单位', value: 'deptName', align: 'center', isRequired: true },
-  { text: '管理方式', value: 'manageTypeName', align: 'center', isRequired: true },
-  { text: '使用状态', value: 'onStateName', align: 'center', isRequired: true },
-  { text: '位置状态', value: 'locationStateName', align: 'center', isRequired: true },
+  { text: '产权单位', value: 'responsibleDeptName', align: 'center', isRequired: true },
+  { text: '管理方式', value: 'manageTypeName', align: 'center', isRequired: true, width: '110' },
+  { text: '使用状态', value: 'onStateName', align: 'center', isRequired: true, width: '110' },
+  { text: '位置状态', value: 'locationStateName', align: 'center', isRequired: true, width: '110' },
 ])
 // 最终展示列
 const columnsConfig = ref([])
diff --git a/src/views/home/ledger/pipeline/index.vue b/src/views/home/ledger/pipeline/index.vue
index 0b1dc59..d56a41c 100644
--- a/src/views/home/ledger/pipeline/index.vue
+++ b/src/views/home/ledger/pipeline/index.vue
@@ -16,13 +16,13 @@
 const columns = ref<any>([
   { text: '管线编号', value: 'pipeCode', align: 'center', isRequired: true },
   { text: '管线位置', value: 'position', align: 'center', isRequired: true },
-  { text: '压力级制', value: 'pressTypeName', align: 'center', isRequired: true },
-  { text: '材质', value: 'material', align: 'center' },
-  { text: '管径(mm)', value: 'pipeDiameter', align: 'center' },
-  { text: '建设年代', value: 'constructEra', align: 'center' },
+  { text: '压力级制', value: 'pressTypeName', align: 'center', isRequired: true, width: '110' },
+  { text: '材质', value: 'material', align: 'center', width: '110' },
+  { text: '管径(mm)', value: 'pipeDiameter', align: 'center', width: '110' },
+  { text: '建设年代', value: 'constructEra', align: 'center', width: '110' },
   { text: '管理单位', value: 'deptName', align: 'center', isRequired: true },
   { text: '产权单位', value: 'propertyOwner', align: 'center', isRequired: true },
-  { text: '管理方式', value: 'manageTypeName', align: 'center', isRequired: true },
+  { text: '管理方式', value: 'manageTypeName', align: 'center', isRequired: true, width: '110' },
 ])
 // 最终展示列
 const columnsConfig = ref([])
diff --git a/src/views/home/ledger/sync/index.vue b/src/views/home/ledger/sync/index.vue
index dee1350..6607896 100644
--- a/src/views/home/ledger/sync/index.vue
+++ b/src/views/home/ledger/sync/index.vue
@@ -13,8 +13,8 @@
 const total = ref(0)
 // 初始展示列
 const columns = ref<any>([
-  { text: '开始时间', value: 'tagNumber', align: 'center', isRequired: true },
-  { text: '结束时间', value: 'ledgerCode', align: 'center', isRequired: true },
+  { text: '开始时间', value: 'tagNumber', align: 'center', isRequired: true, width: '190' },
+  { text: '结束时间', value: 'ledgerCode', align: 'center', isRequired: true, width: '190' },
   { text: '操作人', value: 'ledgerName', align: 'center', isRequired: true },
   { text: '同步类型', value: 'responsibleDept', align: 'center' },
   { text: '同步结果', value: 'position', align: 'center' },

diff --git a/src/api/home/alarm/count.ts b/src/api/home/alarm/count.ts
index 1f4b59a..d5d9244 100644
--- a/src/api/home/alarm/count.ts
+++ b/src/api/home/alarm/count.ts
@@ -34,3 +34,11 @@
     data,
   })
 }
+// 报警趋势分析
+export function getAlarmTrend(data: any) {
+  return request({
+    url: '/statics/alarmRecords/alarmTrend',
+    method: 'post',
+    data,
+  })
+}
diff --git a/src/api/home/alarm/current.ts b/src/api/home/alarm/current.ts
index ec20f64..ac3387f 100644
--- a/src/api/home/alarm/current.ts
+++ b/src/api/home/alarm/current.ts
@@ -57,3 +57,13 @@
     },
   })
 }
+// 批量删除
+export function batchDelete(ids: any) {
+  return request({
+    url: '/system/alarmRecords/batchDelete',
+    method: 'post',
+    data: {
+      ids,
+    },
+  })
+}
diff --git a/src/api/home/alarm/history.ts b/src/api/home/alarm/history.ts
index 5f55e82..44cf851 100644
--- a/src/api/home/alarm/history.ts
+++ b/src/api/home/alarm/history.ts
@@ -11,3 +11,13 @@
     data,
   })
 }
+// 详情
+export function getAlarmDetail(id: any) {
+  return request({
+    url: '/system/alarmRecords/historyAlarmDetail',
+    method: 'post',
+    data: {
+      id,
+    },
+  })
+}
diff --git a/src/components/Echart/LineChart.vue b/src/components/Echart/LineChart.vue
index 2733161..b811f29 100644
--- a/src/components/Echart/LineChart.vue
+++ b/src/components/Echart/LineChart.vue
@@ -207,7 +207,7 @@
         },
       },
       valueFormatter: (value: string | number) => {
-        return value ? value + props.unit : ''
+        return value ? value + props.unit : value === 0 ? '0' : ''
       },
     }, // 提示框
     xAxis: [
diff --git a/src/router/modules/pc.ts b/src/router/modules/pc.ts
index 9b058fa..f3edac9 100644
--- a/src/router/modules/pc.ts
+++ b/src/router/modules/pc.ts
@@ -94,6 +94,19 @@
         },
       },
       {
+        path: '/history/detail',
+        component: () => import('@/views/home/alarm/current/components/detail.vue'),
+        name: 'AlarmHistoryDetail',
+        meta: {
+          title: '报警详情',
+          icon: 'ep:key',
+          sidebar: false,
+          breadcrumb: true,
+          activeMenu: '/alarm/history',
+          auth: '/alarm/history',
+        },
+      },
+      {
         path: 'count',
         component: () => import('@/views/home/alarm/count/index.vue'),
         name: 'AlarmCount',
diff --git a/src/views/home/alarm/count/components/alarmStatistics.vue b/src/views/home/alarm/count/components/alarmStatistics.vue
index b088de2..7aa930f 100644
--- a/src/views/home/alarm/count/components/alarmStatistics.vue
+++ b/src/views/home/alarm/count/components/alarmStatistics.vue
@@ -34,13 +34,12 @@
     value: '3',
   },
 ])
-const xAxisData = ref([])
-const data = ref([])
+const xAxisData = ref<string[]>([])
+const data = ref<any[]>([])
 const list = ref([])
 const loading = ref(true)
 // 开始结束时间
 const datetimerange = ref()
-// 默认当天
 watch(() => datetimerange.value, (newVal) => {
   listQuery.value.begTime = ''
   listQuery.value.endTime = ''
@@ -51,6 +50,35 @@
     }
   }
 })
+const shortcuts = [
+  {
+    text: '近一周',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setDate(start.getDate() - 7)
+      return [start, end]
+    },
+  },
+  {
+    text: '近一个月',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setMonth(start.getMonth() - 1)
+      return [start, end]
+    },
+  },
+  {
+    text: '近三个月',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setMonth(start.getMonth() - 3)
+      return [start, end]
+    },
+  },
+]
 // setTimeout(() => {
 //   xAxisData.value = [
 //     '闸井浓度超限', '场站浓度超限', '场站火焰报警', '疑似第三方破坏', '场站烟雾报警',
@@ -66,10 +94,25 @@
 //     value: data.value[0].data[index],
 //   }))
 // }, 1000)
+const resizePage = () => {
+  setTimeout(() => {
+    const resize = new Event('resize')
+    window.dispatchEvent(resize)
+  }, 500)
+}
 const fetchData = () => {
   loading.value = true
   getAlarmType(listQuery.value).then((res) => {
-    console.log(res.data, '各类报警统计')
+    // console.log(res.data, '各类报警统计')
+    xAxisData.value = res.data.map((item: any) => item.name)
+    data.value = [
+      {
+        name: '报警数量',
+        data: res.data.map((item: any) => item.value),
+      },
+    ]
+    list.value = res.data
+    resizePage
     loading.value = false
   }).catch(() => {
     loading.value = false
@@ -105,8 +148,8 @@
           style="width: 220px;margin: 0 5px;"
         />
         <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="至"
+          v-model="datetimerange" type="datetimerange" format="YYYY-MM-DD HH:mm:ss" :shortcuts="shortcuts"
+          style="width: 380px;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;" @click="fetchData">
@@ -118,8 +161,8 @@
       <div v-loading="loading" class="alarm-count">
         <div class="bar">
           <bar-chart-vertical
-            v-show="xAxisData.length"
-            :x-axis-data="xAxisData" :bar-coner="0" :data="data" :colors="[]" :bar-width="15"
+            v-show="xAxisData.length" :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' }"
             :grid="{
               top: 50,
@@ -133,7 +176,7 @@
         </div>
         <div class="table">
           <el-table border :data="list" stripe style="width: 100%;" :height="440">
-            <el-table-column label="报警类型" prop="alarmType" align="center" />
+            <el-table-column label="报警类型" prop="name" align="center" />
             <el-table-column label="报警数量" prop="value" align="center" />
           </el-table>
         </div>
diff --git a/src/views/home/alarm/count/components/deptCount.vue b/src/views/home/alarm/count/components/deptCount.vue
index 1ca5482..798bfd2 100644
--- a/src/views/home/alarm/count/components/deptCount.vue
+++ b/src/views/home/alarm/count/components/deptCount.vue
@@ -5,40 +5,123 @@
  -->
 <script lang="ts" setup name="AlarmCount">
 import layout from './layout.vue'
+import { getAlarmCompany } from '@/api/home/alarm/count'
 const listQuery = ref({
-  type: 'day',
+  begTime: '',
+  endTime: '',
+  ledgerType: '',
+  timeType: '1',
 })
 const selectTimeType = (type: string) => {
-  listQuery.value.type = type
+  listQuery.value.timeType = type
 }
+// 开始结束时间
+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 shortcuts = [
+  {
+    text: '近一周',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setDate(start.getDate() - 7)
+      return [start, end]
+    },
+  },
+  {
+    text: '近一个月',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setMonth(start.getMonth() - 1)
+      return [start, end]
+    },
+  },
+  {
+    text: '近三个月',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setMonth(start.getMonth() - 3)
+      return [start, end]
+    },
+  },
+]
+// 类别
+const ledgerTypeList = ref<{ id: string; name: string; value: string }[]>([
+  {
+    name: '闸井',
+    id: '1',
+    value: '1',
+  },
+  {
+    name: '场站',
+    id: '2',
+    value: '2',
+  },
+  {
+    name: '管线',
+    id: '3',
+    value: '3',
+  },
+])
 const xAxisData = ref([])
 const data = ref([])
 const list = ref([])
-setTimeout(() => {
-  xAxisData.value = [
-    '第一分公司', '第二分公司', '第三分公司', '第四分公司', '第五分公司',
-  ]
-  data.value = [
-    {
-      name: '闸井浓度超限',
-      data: [1, 8, 5, 8, 4],
-    },
-    {
-      name: '场站浓度超限',
-      data: [8, 3, 6, 1, 7],
-    },
-    {
-      name: '疑似第三方破坏',
-      data: [4, 7, 5, 9, 4],
-    },
-  ]
-  list.value = xAxisData.value.map((item, index) => ({
-    dept: item,
-    wellOver: data.value[0].data[index],
-    senceOver: data.value[1].data[index],
-    thirdParty: data.value[2].data[index],
-  }))
-}, 1000)
+const loading = ref(true)
+// setTimeout(() => {
+//   xAxisData.value = [
+//     '第一分公司', '第二分公司', '第三分公司', '第四分公司', '第五分公司',
+//   ]
+//   data.value = [
+//     {
+//       name: '闸井浓度超限',
+//       data: [1, 8, 5, 8, 4],
+//     },
+//     {
+//       name: '场站浓度超限',
+//       data: [8, 3, 6, 1, 7],
+//     },
+//     {
+//       name: '疑似第三方破坏',
+//       data: [4, 7, 5, 9, 4],
+//     },
+//   ]
+//   list.value = xAxisData.value.map((item, index) => ({
+//     dept: item,
+//     wellOver: data.value[0].data[index],
+//     senceOver: data.value[1].data[index],
+//     thirdParty: data.value[2].data[index],
+//   }))
+// }, 1000)
+const resizePage = () => {
+  setTimeout(() => {
+    const resize = new Event('resize')
+    window.dispatchEvent(resize)
+  }, 500)
+}
+const fetchData = () => {
+  loading.value = true
+  getAlarmCompany(listQuery.value).then((res) => {
+    console.log(res.data, '各单位报警统计')
+    resizePage()
+    loading.value = false
+  }).catch(() => {
+    loading.value = false
+  })
+}
+onMounted(() => {
+  fetchData()
+})
 </script>
 
 <template>
@@ -47,49 +130,59 @@
     <template #search>
       <div class="search">
         <el-button
-          :class="listQuery.type === 'day' ? 'active' : ''" round size="small"
-          @click="selectTimeType('day')"
+          :class="listQuery.timeType === '1' ? 'active' : ''" round size="small"
+          style="margin: 0 5px;"
+          @click="selectTimeType('1')"
         >
           今日
         </el-button>
         <el-button
-          :class="listQuery.type === 'week' ? 'active' : ''" round size="small"
-          @click="selectTimeType('week')"
+          :class="listQuery.timeType === '2' ? 'active' : ''" round size="small"
+          style="margin: 0 5px;"
+          @click="selectTimeType('2')"
         >
           本周
         </el-button>
         <el-button
-          :class="listQuery.type === 'month' ? 'active' : ''" round size="small"
-          @click="selectTimeType('month')"
+          :class="listQuery.timeType === '3' ? 'active' : ''" round size="small"
+          style="margin: 0 5px;"
+          @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 v-for="item in ledgerTypeList" :key="item.id" :label="item.name" :value="item.id" />
+        </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
+          style="width: 380px;margin: 0 5px;" value-format="YYYY-MM-DD HH:mm:ss" range-separator="至"
+          start-placeholder="报警开始时间" end-placeholder="报警结束时间" clearable :shortcuts="shortcuts"
         />
-        <el-button type="primary" style="margin: 0 5px;">
+        <el-button type="primary" style="margin: 0 5px;" @click="fetchData">
           搜索
         </el-button>
       </div>
     </template>
     <template #content>
-      <div class="alarm-count">
+      <div v-loading="loading" class="alarm-count">
         <div class="bar">
           <bar-chart-vertical
+            v-show="xAxisData.length"
             :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' }"
+            :grid="{
+              top: 50,
+              left: 30,
+              right: 30,
+              bottom: 20,
+              containLabel: true, // 是否包含坐标轴的刻度标签
+            }"
           />
+          <el-empty v-show="!xAxisData.length" description="暂无数据" />
         </div>
         <div class="table">
           <el-table border :data="list" stripe style="width: 100%;" :height="440">
-            <el-table-column label="管理单位" prop="dept" align="center" />
+            <el-table-column label="管理单位" prop="dept" align="center" width="200" />
             <el-table-column label="闸井浓度超限" prop="wellOver" align="center" />
             <el-table-column label="场站浓度超限" prop="senceOver" align="center" />
             <el-table-column label="疑似第三方破坏" prop="thirdParty" align="center" />
diff --git a/src/views/home/alarm/count/components/locationAnalysis.vue b/src/views/home/alarm/count/components/locationAnalysis.vue
index 4265aaf..4cd5921 100644
--- a/src/views/home/alarm/count/components/locationAnalysis.vue
+++ b/src/views/home/alarm/count/components/locationAnalysis.vue
@@ -18,7 +18,7 @@
 // 开始结束时间
 const datetimerange = ref()
 // 默认当天
-datetimerange.value = [`${dayjs().format('YYYY-MM-DD')} 00:00:00`, dayjs().format('YYYY-MM-DD HH:mm:ss')]
+// datetimerange.value = [`${dayjs().format('YYYY-MM-DD')} 00:00:00`, dayjs().format('YYYY-MM-DD HH:mm:ss')]
 watch(() => datetimerange.value, (newVal) => {
   listQuery.value.begTime = ''
   listQuery.value.endTime = ''
@@ -29,6 +29,35 @@
     }
   }
 })
+const shortcuts = [
+  {
+    text: '近一周',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setDate(start.getDate() - 7)
+      return [start, end]
+    },
+  },
+  {
+    text: '近一个月',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setMonth(start.getMonth() - 1)
+      return [start, end]
+    },
+  },
+  {
+    text: '近三个月',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setMonth(start.getMonth() - 3)
+      return [start, end]
+    },
+  },
+]
 const selectTimeType = (type: string) => {
   listQuery.value.timeType = type
 }
@@ -52,13 +81,13 @@
     <!-- 查询条件 -->
     <template #search>
       <div class="search">
-        <el-button :class="listQuery.timeType === '1' ? 'active' : ''" round size="small" @click="selectTimeType('1')">
+        <el-button :class="listQuery.timeType === '1' ? 'active' : ''" round size="small" style="margin: 0 5px;" @click="selectTimeType('1')">
           今日
         </el-button>
-        <el-button :class="listQuery.timeType === '2' ? 'active' : ''" round size="small" @click="selectTimeType('2')">
+        <el-button :class="listQuery.timeType === '2' ? 'active' : ''" round size="small" style="margin: 0 5px;" @click="selectTimeType('2')">
           本周
         </el-button>
-        <el-button :class="listQuery.timeType === '3' ? 'active' : ''" round size="small" @click="selectTimeType('3')">
+        <el-button :class="listQuery.timeType === '3' ? 'active' : ''" round size="small" style="margin: 0 5px;" @click="selectTimeType('3')">
           本月
         </el-button>
         <el-select v-model="listQuery.ledgerType" placeholder="全部类别" clearable style="width: 180px;margin: 0 5px;">
@@ -68,8 +97,8 @@
         </el-select>
         <el-date-picker
           v-model="datetimerange" type="datetimerange" format="YYYY-MM-DD HH:mm:ss"
-          style="width: 360px;margin: 0 5px;" value-format="YYYY-MM-DD HH:mm:ss" range-separator="至"
-          start-placeholder="报警开始时间" end-placeholder="报警结束时间" clearable
+          style="width: 380px;margin: 0 5px;" value-format="YYYY-MM-DD HH:mm:ss" range-separator="至"
+          start-placeholder="报警开始时间" end-placeholder="报警结束时间" clearable :shortcuts="shortcuts"
         />
         <el-button type="primary" style="margin: 0 5px;" @click="fetchData">
           搜索
@@ -80,13 +109,13 @@
       <div class="alarm-count">
         <div class="table">
           <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="type" align="center" width="140" />
+            <el-table-column label="位号" prop="tagNumber" align="center" width="160" />
             <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-column label="标签" prop="marker" align="center" width="140" />
+            <el-table-column label="报警次数" prop="alarmSum" align="center" width="120" />
           </el-table>
         </div>
       </div>
diff --git a/src/views/home/alarm/count/components/trendAnalysis.vue b/src/views/home/alarm/count/components/trendAnalysis.vue
index 73e18b0..18cfb4c 100644
--- a/src/views/home/alarm/count/components/trendAnalysis.vue
+++ b/src/views/home/alarm/count/components/trendAnalysis.vue
@@ -5,49 +5,203 @@
  -->
 <script lang="ts" setup name="TrendAnalysis">
 import layout from './layout.vue'
+import { getAlarmTrend } from '@/api/home/alarm/count'
 const listQuery = ref({
-  type: 'day',
+  timeType: '2',
+  ledgerType: '',
+  endTime: '',
+  begTime: '',
+  deptid: '',
 })
+// 开始结束时间
+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 shortcuts = [
+  {
+    text: '近一周',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setDate(start.getDate() - 7)
+      return [start, end]
+    },
+  },
+  {
+    text: '近一个月',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setMonth(start.getMonth() - 1)
+      return [start, end]
+    },
+  },
+  {
+    text: '近三个月',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setMonth(start.getMonth() - 3)
+      return [start, end]
+    },
+  },
+]
 const selectTimeType = (type: string) => {
-  listQuery.value.type = type
+  listQuery.value.timeType = type
 }
-const xAxisData = ref([])
-const data = ref([])
+const columns = ref<any[]>([
+  {
+    text: '闸井浓度超限',
+    value: 'well',
+  },
+  {
+    text: '场站浓度超限',
+    value: 'station',
+  },
+  {
+    text: '管线浓度超限',
+    value: 'pipeline',
+  },
+])
+// 类别
+const ledgerTypeList = ref<{ id: string; name: string; value: string }[]>([
+  {
+    name: '闸井',
+    id: '1',
+    value: '1',
+  },
+  {
+    name: '场站',
+    id: '2',
+    value: '2',
+  },
+  {
+    name: '管线',
+    id: '3',
+    value: '3',
+  },
+])
+const xAxisData = ref<string[]>([])
+const data = ref<any[]>([])
 const list = ref([])
-setTimeout(() => {
-  xAxisData.value = [
-    '2024-07-01 12:11:12',
-    '2024-07-02 12:11:12',
-    '2024-07-03 12:11:12',
-    '2024-07-04 12:11:12',
-    '2024-07-05 12:11:12',
-    '2024-07-06 12:11:12',
-    '2024-07-07 12:11:12',
-  ]
-  data.value = [
-    {
-      name: '闸井浓度超限',
-      data: [1, 3, 5, 1, 4, 2, 7],
-      symbol: 'emptyCircle',
-    },
-    {
-      name: '场站浓度超限',
-      data: [2, 1, 4, 1, 5, 2, 9],
-      symbol: 'emptyCircle',
-    },
-    {
-      name: '闸井浓度超限',
-      data: [4, 3, 2, 4, 7, 9, 1],
-      symbol: 'emptyCircle',
-    },
-  ]
-  list.value = xAxisData.value.map((item, index) => ({
-    alarmTime: item,
-    wellOver: data.value[0].data[index],
-    senceOver: data.value[1].data[index],
-    thirdParty: data.value[2].data[index],
-  }))
-}, 1000)
+const loading = ref(true)
+// setTimeout(() => {
+//   xAxisData.value = [
+//     '2024-07-01 12:11:12',
+//     '2024-07-02 12:11:12',
+//     '2024-07-03 12:11:12',
+//     '2024-07-04 12:11:12',
+//     '2024-07-05 12:11:12',
+//     '2024-07-06 12:11:12',
+//     '2024-07-07 12:11:12',
+//   ]
+//   data.value = [
+//     {
+//       name: '闸井浓度超限',
+//       data: [1, 3, 5, 1, 4, 2, 7],
+//       symbol: 'emptyCircle',
+//     },
+//     {
+//       name: '场站浓度超限',
+//       data: [2, 1, 4, 1, 5, 2, 9],
+//       symbol: 'emptyCircle',
+//     },
+//     {
+//       name: '闸井浓度超限',
+//       data: [4, 3, 2, 4, 7, 9, 1],
+//       symbol: 'emptyCircle',
+//     },
+//   ]
+//   list.value = xAxisData.value.map((item, index) => ({
+//     alarmTime: item,
+//     wellOver: data.value[0].data[index],
+//     senceOver: data.value[1].data[index],
+//     thirdParty: data.value[2].data[index],
+//   }))
+// }, 1000)
+const resizePage = () => {
+  setTimeout(() => {
+    const resize = new Event('resize')
+    window.dispatchEvent(resize)
+  }, 500)
+}
+const fetchData = () => {
+  loading.value = true
+  const columnsDict = {
+    闸井浓度超限: 'well',
+    场站浓度超限: 'station',
+    管线浓度超限: 'pipeline',
+  } as { [key: string]: string }
+  getAlarmTrend(listQuery.value).then((res) => {
+    console.log(res.data, '报警趋势分析')
+    xAxisData.value = res.data.map((item: any) => item.date)
+    if (!listQuery.value.ledgerType) {
+      data.value = [
+        {
+          name: '闸井浓度超限',
+          data: res.data.map((item: any) => item['闸井浓度超限']),
+        },
+        {
+          name: '场站浓度超限',
+          data: res.data.map((item: any) => item['场站浓度超限']),
+        },
+        {
+          name: '管线浓度超限',
+          data: res.data.map((item: any) => item['管线浓度超限']),
+        },
+      ]
+    }
+    else if (listQuery.value.ledgerType === '1') {
+      data.value = [
+        {
+          name: '闸井浓度超限',
+          data: res.data.map((item: any) => item['闸井浓度超限']),
+        },
+      ]
+    }
+    else if (listQuery.value.ledgerType === '2') {
+      data.value = [
+        {
+          name: '场站浓度超限',
+          data: res.data.map((item: any) => item['场站浓度超限']),
+        },
+      ]
+    }
+    else if (listQuery.value.ledgerType === '3') {
+      data.value = [
+        {
+          name: '管线浓度超限',
+          data: res.data.map((item: any) => item['管线浓度超限']),
+        },
+      ]
+    }
+    list.value = res.data.map((item: any) => ({
+      date: item.date,
+      well: item['闸井浓度超限'],
+      station: item['场站浓度超限'],
+      pipeline: item['管线浓度超限'],
+    }))
+    columns.value = data.value.map((item: any) => ({
+      text: item.name,
+      value: columnsDict[item.name],
+    }))
+    resizePage()
+    loading.value = false
+  }).catch(() => {
+    loading.value = false
+  })
+}
+onMounted(() => {
+  fetchData()
+})
 </script>
 
 <template>
@@ -56,34 +210,30 @@
     <template #search>
       <div class="search">
         <el-button
-          :class="listQuery.type === 'day' ? 'active' : ''" round size="small"
-          @click="selectTimeType('day')"
-        >
-          今日
-        </el-button>
-        <el-button
-          :class="listQuery.type === 'week' ? 'active' : ''" round size="small"
-          @click="selectTimeType('week')"
+          :class="listQuery.timeType === '2' ? 'active' : ''" round size="small" style="margin: 0 5px;"
+          @click="selectTimeType('2')"
         >
           本周
         </el-button>
         <el-button
-          :class="listQuery.type === 'month' ? 'active' : ''" round size="small"
-          @click="selectTimeType('month')"
+          :class="listQuery.timeType === '3' ? 'active' : ''" round size="small" style="margin: 0 5px;"
+          @click="selectTimeType('3')"
         >
           本月
         </el-button>
-        <el-select v-model="listQuery.keywords" placeholder="全部类别" clearable style="width: 180px;margin: 0 5px;" />
+        <el-select v-model="listQuery.ledgerType" placeholder="全部类别" clearable style="width: 180px;margin: 0 5px;">
+          <el-option v-for="item in ledgerTypeList" :key="item.id" :label="item.name" :value="item.id" />
+        </el-select>
         <dept-select
-          v-model="listQuery.keywords" placeholder="管理单位" :clearable="true"
+          v-model="listQuery.deptid" placeholder="管理单位" :clearable="true"
           style="width: 220px;margin: 0 5px;"
         />
         <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
+          style="width: 380px;margin: 0 5px;" value-format="YYYY-MM-DD HH:mm:ss" range-separator="至"
+          start-placeholder="报警开始时间" end-placeholder="报警结束时间" clearable :shortcuts="shortcuts"
         />
-        <el-button type="primary" style="margin: 0 5px;">
+        <el-button type="primary" style="margin: 0 5px;" @click="fetchData">
           搜索
         </el-button>
       </div>
@@ -94,14 +244,22 @@
           <line-chart
             :x-axis-data="xAxisData" :data="data" :gradient="false"
             :legend="{ itemWidth: 8, itemHeight: 8, type: 'scroll', orient: 'horizontal', icon: 'roundRect', right: '0', top: '10' }"
+            :grid="{
+              top: 50,
+              left: 30,
+              right: 30,
+              bottom: 20,
+              containLabel: true, // 是否包含坐标轴的刻度标签
+            }"
           />
         </div>
         <div class="table">
           <el-table border :data="list" stripe style="width: 100%;" :height="440">
-            <el-table-column label="日期" prop="alarmTime" align="center" />
-            <el-table-column label="闸井浓度超限" prop="wellOver" align="center" />
-            <el-table-column label="场站浓度超限" prop="senceOver" align="center" />
-            <el-table-column label="疑似第三方破坏" prop="thirdParty" align="center" />
+            <el-table-column label="日期" prop="date" align="center" width="190" />
+            <el-table-column
+              v-for="item in columns" :key="item.text" :label="item.text" :prop="item.value"
+              align="center"
+            />
           </el-table>
         </div>
       </div>
diff --git a/src/views/home/alarm/current/components/detail.vue b/src/views/home/alarm/current/components/detail.vue
index 4fb61d3..e200fe3 100644
--- a/src/views/home/alarm/current/components/detail.vue
+++ b/src/views/home/alarm/current/components/detail.vue
@@ -7,6 +7,7 @@
 import dayjs from 'dayjs'
 import { ElMessage } from 'element-plus'
 import { alarmProcessNode, detailAlarm } from '@/api/home/alarm/current'
+import { getAlarmDetail } from '@/api/home/alarm/history'
 import { toHumpObject } from '@/utils/String'
 import { getAlarmLevelListPage, getAlarmTypeListPage } from '@/api/home/rule/alarm'
 import { getDateDiff } from '@/utils/dayjs'
@@ -44,7 +45,7 @@
   },
   {
     text: '报警时间',
-    value: 'ts',
+    value: $route.query.type === 'history' ? 'alarmTime' : 'ts',
     align: 'center',
   },
   {
@@ -89,7 +90,7 @@
   },
   {
     text: '处置时长',
-    value: 'duration',
+    value: $route.query.type === 'history' ? 'cancelDuration' : 'duration',
     align: 'center',
   },
   {
@@ -107,8 +108,8 @@
 const fetchDetail = async () => {
   loading.value = true
   const res1 = await getAlarmLevelListPage({ offset: 1, limit: 9999 })
-  const res2 = await getAlarmTypeListPage({ offset: 1, limit: 9999 })
-  detailAlarm($route.query.id as string).then((res) => {
+  const res2 = await getAlarmTypeListPage({ offset: 1, limit: 9999 });
+  ($route.query.type === 'history' ? getAlarmDetail : detailAlarm)($route.query.id as string).then((res) => {
     detailInfo.value = toHumpObject(res.data)
     detailInfo.value.realAlarmName = detailInfo.value.realAlarm === '1' ? '报警' : '误报'
     detailInfo.value.alarmTypeName = res2.data.rows.filter((item: any) => item.id === detailInfo.value.alarmTypeId)[0]?.alarmType || ''
@@ -183,8 +184,12 @@
           </template>
           <div style="padding: 25px;">
             <el-timeline>
-              <el-timeline-item v-for="(item, index) in alarmDynamics" :key="index" :timestamp="item.approvalTime" type="primary">
-                {{ `${item.approvalPerson}${item.dept_name ? '(' : ''}${item.dept_name}${item.dept_name ? ')' : ''}${item.process_name}` }}
+              <el-timeline-item
+                v-for="(item, index) in alarmDynamics" :key="index" :timestamp="item.approvalTime"
+                type="primary"
+              >
+                {{ `${item.approvalPerson}${item.dept_name ? '(' : ''}${item.dept_name}${item.dept_name ? ')'
+                  : ''}${item.process_name}` }}
               </el-timeline-item>
             </el-timeline>
           </div>
diff --git a/src/views/home/alarm/current/index.vue b/src/views/home/alarm/current/index.vue
index 52b2be1..8b36a01 100644
--- a/src/views/home/alarm/current/index.vue
+++ b/src/views/home/alarm/current/index.vue
@@ -4,10 +4,10 @@
   Date: 2023-06-28
  -->
 <script lang="ts" setup name="CurrentAlarm">
-import { ElMessage } from 'element-plus'
+import { ElMessage, ElMessageBox } from 'element-plus'
 import { ArrowLeftBold, ArrowRightBold } from '@element-plus/icons-vue'
 import MapCom from './components/map.vue'
-import { getCurrentAlarmListPage, viewAlarm } from '@/api/home/alarm/current'
+import { batchDelete, getCurrentAlarmListPage, viewAlarm } from '@/api/home/alarm/current'
 import { getDictByCode } from '@/api/system/dict'
 import { getAlarmLevelListPage, getAlarmTypeListPage } from '@/api/home/rule/alarm'
 import { getDeviceTypeListPage } from '@/api/home/device/type'
@@ -66,6 +66,35 @@
     }
   }
 })
+const shortcuts = [
+  {
+    text: '近一周',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setDate(start.getDate() - 7)
+      return [start, end]
+    },
+  },
+  {
+    text: '近一个月',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setMonth(start.getMonth() - 1)
+      return [start, end]
+    },
+  },
+  {
+    text: '近三个月',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setMonth(start.getMonth() - 3)
+      return [start, end]
+    },
+  },
+]
 // 查询数据
 const fetchData = () => {
   loadingTable.value = true
@@ -140,8 +169,8 @@
 const detail = (row: any) => {
   mapData.value = row
   switchMode('map')
-  row.lngGaode = '116.398043'
-  row.latGaode = '39.901552'
+  // row.lngGaode = '116.398043'
+  // row.latGaode = '39.901552'
   // 绘制点
   const draw = () => {
     mapRef.value.mapRef.removeMarker()
@@ -209,6 +238,35 @@
   })
 }
 fetchDict()
+const { proxy } = getCurrentInstance() as any
+// 多选
+const multipleTable = ref([])
+const handleSelectionChange = (val: any) => {
+  console.log(val, '多选数据')
+  multipleTable.value = val
+}
+// 批量删除
+const batchDeleteRow = () => {
+  if (!multipleTable.value.length) {
+    ElMessage.warning('请先选中数据')
+    return
+  }
+  ElMessageBox.confirm(
+    '确定要删除选中的数据吗？',
+    '确认操作',
+    {
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+      type: 'warning',
+    },
+  ).then(() => {
+    batchDelete(multipleTable.value.map((item: any) => item.id)).then(() => {
+      ElMessage.success('操作成功')
+      multipleTable.value = []
+      fetchData()
+    })
+  })
+}
 </script>
 
 <template>
@@ -255,7 +313,7 @@
       </search-item>
       <search-item>
         <el-date-picker
-          v-model="datetimerange" type="datetimerange" format="YYYY-MM-DD HH:mm:ss"
+          v-model="datetimerange" type="datetimerange" format="YYYY-MM-DD HH:mm:ss" :shortcuts="shortcuts"
           value-format="YYYY-MM-DD HH:mm:ss" range-separator="至" start-placeholder="报警开始时间" end-placeholder="报警结束时间"
           clearable
         />
@@ -274,6 +332,9 @@
           <template #btns-right>
             <!-- 操作 -->
             <div>
+              <el-button v-if="proxy.hasPerm('/alarm/current/delete')" type="primary" @click="batchDeleteRow">
+                批量删除
+              </el-button>
               <el-button type="primary">
                 导出
               </el-button>
@@ -282,7 +343,10 @@
           <!-- 查询结果Table显示 -->
           <normal-table
             :data="list1" :total="total" :columns="columnsConfig" :query="listQuery"
-            :list-loading="loadingTable" :height="tableHeight - 50 - 70" @change="changePage"
+            :list-loading="loadingTable" :height="tableHeight - 50 - 70"
+            :is-multi="proxy.hasPerm('/alarm/current/delete')"
+            :is-showmulti-select="proxy.hasPerm('/alarm/current/delete')" @change="changePage"
+            @multiSelect="handleSelectionChange"
           >
             <template #preColumns>
               <el-table-column label="序号" width="55" align="center">
diff --git a/src/views/home/alarm/history/index.vue b/src/views/home/alarm/history/index.vue
index 87bb167..74ca152 100644
--- a/src/views/home/alarm/history/index.vue
+++ b/src/views/home/alarm/history/index.vue
@@ -80,6 +80,35 @@
     }
   }
 })
+const shortcuts = [
+  {
+    text: '近一周',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setDate(start.getDate() - 7)
+      return [start, end]
+    },
+  },
+  {
+    text: '近一个月',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setMonth(start.getMonth() - 1)
+      return [start, end]
+    },
+  },
+  {
+    text: '近三个月',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setMonth(start.getMonth() - 3)
+      return [start, end]
+    },
+  },
+]
 // 查询数据
 const fetchData = () => {
   loadingTable.value = true
@@ -127,10 +156,11 @@
 const $router = useRouter()
 const moreData = (row: any) => {
   $router.push({
-    name: 'AlarmCurrentDetail',
+    name: 'AlarmHistoryDetail',
     query: {
       id: row.id,
       row: JSON.stringify(row),
+      type: 'history',
     },
   })
 }
@@ -218,7 +248,7 @@
       </search-item>
       <search-item>
         <el-date-picker
-          v-model="datetimerange" type="datetimerange" format="YYYY-MM-DD HH:mm:ss"
+          v-model="datetimerange" type="datetimerange" format="YYYY-MM-DD HH:mm:ss" :shortcuts="shortcuts"
           value-format="YYYY-MM-DD HH:mm:ss" range-separator="至" start-placeholder="报警开始时间" end-placeholder="报警结束时间"
           clearable
         />
diff --git a/src/views/home/device/product/index.vue b/src/views/home/device/product/index.vue
index 1bb3d99..2300270 100644
--- a/src/views/home/device/product/index.vue
+++ b/src/views/home/device/product/index.vue
@@ -21,8 +21,8 @@
   { text: '设备型号', value: 'deviceModel', align: 'center' },
   { text: '厂商', value: 'manufacturerName', align: 'center' },
   { text: '通讯协议', value: 'protocolName', align: 'center' },
-  { text: '接入方式', value: 'accessMethodName', align: 'center' },
-  { text: '创建时间', value: 'ts', align: 'center' },
+  { text: '接入方式', value: 'accessMethodName', align: 'center', width: '140' },
+  { text: '创建时间', value: 'ts', align: 'center', width: '200' },
 ])
 // 最终展示列
 const columnsConfig = ref([])
diff --git a/src/views/home/device/type/index.vue b/src/views/home/device/type/index.vue
index 56d7f65..7df5933 100644
--- a/src/views/home/device/type/index.vue
+++ b/src/views/home/device/type/index.vue
@@ -14,12 +14,12 @@
 const total = ref(0)
 // 初始展示列
 const columns = ref<any>([
-  { text: '设备类型代号', value: 'typeCode', align: 'center' },
+  { text: '设备类型代号', value: 'typeCode', align: 'center', width: '110' },
   { text: '设备类型', value: 'typeName', align: 'center' },
   { text: '描述', value: 'typeDescription', align: 'center' },
   { text: '监测对象', value: 'watchObjectName', align: 'center' },
-  { text: '是否启用', value: 'isUsedName', align: 'center' },
-  { text: '操作时间', value: 'ts', align: 'center' },
+  { text: '是否启用', value: 'isUsedName', align: 'center', width: '110' },
+  { text: '操作时间', value: 'ts', align: 'center', width: '200' },
 ])
 // 最终展示列
 const columnsConfig = ref([])
diff --git a/src/views/home/ledger/ledger/components/wellList.vue b/src/views/home/ledger/ledger/components/wellList.vue
index 61eca63..6e40ede 100644
--- a/src/views/home/ledger/ledger/components/wellList.vue
+++ b/src/views/home/ledger/ledger/components/wellList.vue
@@ -22,12 +22,12 @@
   { text: '位号', value: 'tagNumber', align: 'center', isRequired: true, width: '110' },
   { text: '编号', value: 'ledgerCode', align: 'center', isRequired: true, width: '150' },
   { text: '名称', value: 'ledgerName', align: 'center', isRequired: true },
-  { text: '管理单位', value: 'responsibleDept', align: 'center' },
+  { text: '管理单位', value: 'deptName', align: 'center', width: '160' },
   { text: '详细位置', value: 'position', align: 'center' },
-  { text: '产权单位', value: 'deptName', align: 'center', isRequired: true },
-  { text: '管理方式', value: 'manageTypeName', align: 'center', isRequired: true },
-  { text: '使用状态', value: 'onStateName', align: 'center', isRequired: true },
-  { text: '位置状态', value: 'locationStateName', align: 'center', isRequired: true },
+  { text: '产权单位', value: 'responsibleDeptName', align: 'center', isRequired: true },
+  { text: '管理方式', value: 'manageTypeName', align: 'center', isRequired: true, width: '110' },
+  { text: '使用状态', value: 'onStateName', align: 'center', isRequired: true, width: '110' },
+  { text: '位置状态', value: 'locationStateName', align: 'center', isRequired: true, width: '110' },
 ])
 // 最终展示列
 const columnsConfig = ref([])
diff --git a/src/views/home/ledger/pipeline/index.vue b/src/views/home/ledger/pipeline/index.vue
index 0b1dc59..d56a41c 100644
--- a/src/views/home/ledger/pipeline/index.vue
+++ b/src/views/home/ledger/pipeline/index.vue
@@ -16,13 +16,13 @@
 const columns = ref<any>([
   { text: '管线编号', value: 'pipeCode', align: 'center', isRequired: true },
   { text: '管线位置', value: 'position', align: 'center', isRequired: true },
-  { text: '压力级制', value: 'pressTypeName', align: 'center', isRequired: true },
-  { text: '材质', value: 'material', align: 'center' },
-  { text: '管径(mm)', value: 'pipeDiameter', align: 'center' },
-  { text: '建设年代', value: 'constructEra', align: 'center' },
+  { text: '压力级制', value: 'pressTypeName', align: 'center', isRequired: true, width: '110' },
+  { text: '材质', value: 'material', align: 'center', width: '110' },
+  { text: '管径(mm)', value: 'pipeDiameter', align: 'center', width: '110' },
+  { text: '建设年代', value: 'constructEra', align: 'center', width: '110' },
   { text: '管理单位', value: 'deptName', align: 'center', isRequired: true },
   { text: '产权单位', value: 'propertyOwner', align: 'center', isRequired: true },
-  { text: '管理方式', value: 'manageTypeName', align: 'center', isRequired: true },
+  { text: '管理方式', value: 'manageTypeName', align: 'center', isRequired: true, width: '110' },
 ])
 // 最终展示列
 const columnsConfig = ref([])
diff --git a/src/views/home/ledger/sync/index.vue b/src/views/home/ledger/sync/index.vue
index dee1350..6607896 100644
--- a/src/views/home/ledger/sync/index.vue
+++ b/src/views/home/ledger/sync/index.vue
@@ -13,8 +13,8 @@
 const total = ref(0)
 // 初始展示列
 const columns = ref<any>([
-  { text: '开始时间', value: 'tagNumber', align: 'center', isRequired: true },
-  { text: '结束时间', value: 'ledgerCode', align: 'center', isRequired: true },
+  { text: '开始时间', value: 'tagNumber', align: 'center', isRequired: true, width: '190' },
+  { text: '结束时间', value: 'ledgerCode', align: 'center', isRequired: true, width: '190' },
   { text: '操作人', value: 'ledgerName', align: 'center', isRequired: true },
   { text: '同步类型', value: 'responsibleDept', align: 'center' },
   { text: '同步结果', value: 'position', align: 'center' },
diff --git a/src/views/home/operation/alarm/index.vue b/src/views/home/operation/alarm/index.vue
index ef04fd4..dc0f53c 100644
--- a/src/views/home/operation/alarm/index.vue
+++ b/src/views/home/operation/alarm/index.vue
@@ -17,8 +17,8 @@
   { text: '报警类型', value: 'alarmTypeName', align: 'center' },
   { text: '报警原因', value: 'alarmReason', align: 'center' },
   { text: '管理单位', value: 'deptName', align: 'center' },
-  { text: '状态', value: 'status', align: 'center' },
-  { text: '报警时间', value: 'alarmTime', align: 'center' },
+  { text: '状态', value: 'status', align: 'center', width: '110' },
+  { text: '报警时间', value: 'alarmTime', align: 'center', width: '200' },
 ])
 // 最终展示列
 const columnsConfig = ref([])

diff --git a/src/api/home/alarm/count.ts b/src/api/home/alarm/count.ts
index 1f4b59a..d5d9244 100644
--- a/src/api/home/alarm/count.ts
+++ b/src/api/home/alarm/count.ts
@@ -34,3 +34,11 @@
     data,
   })
 }
+// 报警趋势分析
+export function getAlarmTrend(data: any) {
+  return request({
+    url: '/statics/alarmRecords/alarmTrend',
+    method: 'post',
+    data,
+  })
+}
diff --git a/src/api/home/alarm/current.ts b/src/api/home/alarm/current.ts
index ec20f64..ac3387f 100644
--- a/src/api/home/alarm/current.ts
+++ b/src/api/home/alarm/current.ts
@@ -57,3 +57,13 @@
     },
   })
 }
+// 批量删除
+export function batchDelete(ids: any) {
+  return request({
+    url: '/system/alarmRecords/batchDelete',
+    method: 'post',
+    data: {
+      ids,
+    },
+  })
+}
diff --git a/src/api/home/alarm/history.ts b/src/api/home/alarm/history.ts
index 5f55e82..44cf851 100644
--- a/src/api/home/alarm/history.ts
+++ b/src/api/home/alarm/history.ts
@@ -11,3 +11,13 @@
     data,
   })
 }
+// 详情
+export function getAlarmDetail(id: any) {
+  return request({
+    url: '/system/alarmRecords/historyAlarmDetail',
+    method: 'post',
+    data: {
+      id,
+    },
+  })
+}
diff --git a/src/components/Echart/LineChart.vue b/src/components/Echart/LineChart.vue
index 2733161..b811f29 100644
--- a/src/components/Echart/LineChart.vue
+++ b/src/components/Echart/LineChart.vue
@@ -207,7 +207,7 @@
         },
       },
       valueFormatter: (value: string | number) => {
-        return value ? value + props.unit : ''
+        return value ? value + props.unit : value === 0 ? '0' : ''
       },
     }, // 提示框
     xAxis: [
diff --git a/src/router/modules/pc.ts b/src/router/modules/pc.ts
index 9b058fa..f3edac9 100644
--- a/src/router/modules/pc.ts
+++ b/src/router/modules/pc.ts
@@ -94,6 +94,19 @@
         },
       },
       {
+        path: '/history/detail',
+        component: () => import('@/views/home/alarm/current/components/detail.vue'),
+        name: 'AlarmHistoryDetail',
+        meta: {
+          title: '报警详情',
+          icon: 'ep:key',
+          sidebar: false,
+          breadcrumb: true,
+          activeMenu: '/alarm/history',
+          auth: '/alarm/history',
+        },
+      },
+      {
         path: 'count',
         component: () => import('@/views/home/alarm/count/index.vue'),
         name: 'AlarmCount',
diff --git a/src/views/home/alarm/count/components/alarmStatistics.vue b/src/views/home/alarm/count/components/alarmStatistics.vue
index b088de2..7aa930f 100644
--- a/src/views/home/alarm/count/components/alarmStatistics.vue
+++ b/src/views/home/alarm/count/components/alarmStatistics.vue
@@ -34,13 +34,12 @@
     value: '3',
   },
 ])
-const xAxisData = ref([])
-const data = ref([])
+const xAxisData = ref<string[]>([])
+const data = ref<any[]>([])
 const list = ref([])
 const loading = ref(true)
 // 开始结束时间
 const datetimerange = ref()
-// 默认当天
 watch(() => datetimerange.value, (newVal) => {
   listQuery.value.begTime = ''
   listQuery.value.endTime = ''
@@ -51,6 +50,35 @@
     }
   }
 })
+const shortcuts = [
+  {
+    text: '近一周',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setDate(start.getDate() - 7)
+      return [start, end]
+    },
+  },
+  {
+    text: '近一个月',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setMonth(start.getMonth() - 1)
+      return [start, end]
+    },
+  },
+  {
+    text: '近三个月',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setMonth(start.getMonth() - 3)
+      return [start, end]
+    },
+  },
+]
 // setTimeout(() => {
 //   xAxisData.value = [
 //     '闸井浓度超限', '场站浓度超限', '场站火焰报警', '疑似第三方破坏', '场站烟雾报警',
@@ -66,10 +94,25 @@
 //     value: data.value[0].data[index],
 //   }))
 // }, 1000)
+const resizePage = () => {
+  setTimeout(() => {
+    const resize = new Event('resize')
+    window.dispatchEvent(resize)
+  }, 500)
+}
 const fetchData = () => {
   loading.value = true
   getAlarmType(listQuery.value).then((res) => {
-    console.log(res.data, '各类报警统计')
+    // console.log(res.data, '各类报警统计')
+    xAxisData.value = res.data.map((item: any) => item.name)
+    data.value = [
+      {
+        name: '报警数量',
+        data: res.data.map((item: any) => item.value),
+      },
+    ]
+    list.value = res.data
+    resizePage
     loading.value = false
   }).catch(() => {
     loading.value = false
@@ -105,8 +148,8 @@
           style="width: 220px;margin: 0 5px;"
         />
         <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="至"
+          v-model="datetimerange" type="datetimerange" format="YYYY-MM-DD HH:mm:ss" :shortcuts="shortcuts"
+          style="width: 380px;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;" @click="fetchData">
@@ -118,8 +161,8 @@
       <div v-loading="loading" class="alarm-count">
         <div class="bar">
           <bar-chart-vertical
-            v-show="xAxisData.length"
-            :x-axis-data="xAxisData" :bar-coner="0" :data="data" :colors="[]" :bar-width="15"
+            v-show="xAxisData.length" :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' }"
             :grid="{
               top: 50,
@@ -133,7 +176,7 @@
         </div>
         <div class="table">
           <el-table border :data="list" stripe style="width: 100%;" :height="440">
-            <el-table-column label="报警类型" prop="alarmType" align="center" />
+            <el-table-column label="报警类型" prop="name" align="center" />
             <el-table-column label="报警数量" prop="value" align="center" />
           </el-table>
         </div>
diff --git a/src/views/home/alarm/count/components/deptCount.vue b/src/views/home/alarm/count/components/deptCount.vue
index 1ca5482..798bfd2 100644
--- a/src/views/home/alarm/count/components/deptCount.vue
+++ b/src/views/home/alarm/count/components/deptCount.vue
@@ -5,40 +5,123 @@
  -->
 <script lang="ts" setup name="AlarmCount">
 import layout from './layout.vue'
+import { getAlarmCompany } from '@/api/home/alarm/count'
 const listQuery = ref({
-  type: 'day',
+  begTime: '',
+  endTime: '',
+  ledgerType: '',
+  timeType: '1',
 })
 const selectTimeType = (type: string) => {
-  listQuery.value.type = type
+  listQuery.value.timeType = type
 }
+// 开始结束时间
+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 shortcuts = [
+  {
+    text: '近一周',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setDate(start.getDate() - 7)
+      return [start, end]
+    },
+  },
+  {
+    text: '近一个月',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setMonth(start.getMonth() - 1)
+      return [start, end]
+    },
+  },
+  {
+    text: '近三个月',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setMonth(start.getMonth() - 3)
+      return [start, end]
+    },
+  },
+]
+// 类别
+const ledgerTypeList = ref<{ id: string; name: string; value: string }[]>([
+  {
+    name: '闸井',
+    id: '1',
+    value: '1',
+  },
+  {
+    name: '场站',
+    id: '2',
+    value: '2',
+  },
+  {
+    name: '管线',
+    id: '3',
+    value: '3',
+  },
+])
 const xAxisData = ref([])
 const data = ref([])
 const list = ref([])
-setTimeout(() => {
-  xAxisData.value = [
-    '第一分公司', '第二分公司', '第三分公司', '第四分公司', '第五分公司',
-  ]
-  data.value = [
-    {
-      name: '闸井浓度超限',
-      data: [1, 8, 5, 8, 4],
-    },
-    {
-      name: '场站浓度超限',
-      data: [8, 3, 6, 1, 7],
-    },
-    {
-      name: '疑似第三方破坏',
-      data: [4, 7, 5, 9, 4],
-    },
-  ]
-  list.value = xAxisData.value.map((item, index) => ({
-    dept: item,
-    wellOver: data.value[0].data[index],
-    senceOver: data.value[1].data[index],
-    thirdParty: data.value[2].data[index],
-  }))
-}, 1000)
+const loading = ref(true)
+// setTimeout(() => {
+//   xAxisData.value = [
+//     '第一分公司', '第二分公司', '第三分公司', '第四分公司', '第五分公司',
+//   ]
+//   data.value = [
+//     {
+//       name: '闸井浓度超限',
+//       data: [1, 8, 5, 8, 4],
+//     },
+//     {
+//       name: '场站浓度超限',
+//       data: [8, 3, 6, 1, 7],
+//     },
+//     {
+//       name: '疑似第三方破坏',
+//       data: [4, 7, 5, 9, 4],
+//     },
+//   ]
+//   list.value = xAxisData.value.map((item, index) => ({
+//     dept: item,
+//     wellOver: data.value[0].data[index],
+//     senceOver: data.value[1].data[index],
+//     thirdParty: data.value[2].data[index],
+//   }))
+// }, 1000)
+const resizePage = () => {
+  setTimeout(() => {
+    const resize = new Event('resize')
+    window.dispatchEvent(resize)
+  }, 500)
+}
+const fetchData = () => {
+  loading.value = true
+  getAlarmCompany(listQuery.value).then((res) => {
+    console.log(res.data, '各单位报警统计')
+    resizePage()
+    loading.value = false
+  }).catch(() => {
+    loading.value = false
+  })
+}
+onMounted(() => {
+  fetchData()
+})
 </script>
 
 <template>
@@ -47,49 +130,59 @@
     <template #search>
       <div class="search">
         <el-button
-          :class="listQuery.type === 'day' ? 'active' : ''" round size="small"
-          @click="selectTimeType('day')"
+          :class="listQuery.timeType === '1' ? 'active' : ''" round size="small"
+          style="margin: 0 5px;"
+          @click="selectTimeType('1')"
         >
           今日
         </el-button>
         <el-button
-          :class="listQuery.type === 'week' ? 'active' : ''" round size="small"
-          @click="selectTimeType('week')"
+          :class="listQuery.timeType === '2' ? 'active' : ''" round size="small"
+          style="margin: 0 5px;"
+          @click="selectTimeType('2')"
         >
           本周
         </el-button>
         <el-button
-          :class="listQuery.type === 'month' ? 'active' : ''" round size="small"
-          @click="selectTimeType('month')"
+          :class="listQuery.timeType === '3' ? 'active' : ''" round size="small"
+          style="margin: 0 5px;"
+          @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 v-for="item in ledgerTypeList" :key="item.id" :label="item.name" :value="item.id" />
+        </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
+          style="width: 380px;margin: 0 5px;" value-format="YYYY-MM-DD HH:mm:ss" range-separator="至"
+          start-placeholder="报警开始时间" end-placeholder="报警结束时间" clearable :shortcuts="shortcuts"
         />
-        <el-button type="primary" style="margin: 0 5px;">
+        <el-button type="primary" style="margin: 0 5px;" @click="fetchData">
           搜索
         </el-button>
       </div>
     </template>
     <template #content>
-      <div class="alarm-count">
+      <div v-loading="loading" class="alarm-count">
         <div class="bar">
           <bar-chart-vertical
+            v-show="xAxisData.length"
             :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' }"
+            :grid="{
+              top: 50,
+              left: 30,
+              right: 30,
+              bottom: 20,
+              containLabel: true, // 是否包含坐标轴的刻度标签
+            }"
           />
+          <el-empty v-show="!xAxisData.length" description="暂无数据" />
         </div>
         <div class="table">
           <el-table border :data="list" stripe style="width: 100%;" :height="440">
-            <el-table-column label="管理单位" prop="dept" align="center" />
+            <el-table-column label="管理单位" prop="dept" align="center" width="200" />
             <el-table-column label="闸井浓度超限" prop="wellOver" align="center" />
             <el-table-column label="场站浓度超限" prop="senceOver" align="center" />
             <el-table-column label="疑似第三方破坏" prop="thirdParty" align="center" />
diff --git a/src/views/home/alarm/count/components/locationAnalysis.vue b/src/views/home/alarm/count/components/locationAnalysis.vue
index 4265aaf..4cd5921 100644
--- a/src/views/home/alarm/count/components/locationAnalysis.vue
+++ b/src/views/home/alarm/count/components/locationAnalysis.vue
@@ -18,7 +18,7 @@
 // 开始结束时间
 const datetimerange = ref()
 // 默认当天
-datetimerange.value = [`${dayjs().format('YYYY-MM-DD')} 00:00:00`, dayjs().format('YYYY-MM-DD HH:mm:ss')]
+// datetimerange.value = [`${dayjs().format('YYYY-MM-DD')} 00:00:00`, dayjs().format('YYYY-MM-DD HH:mm:ss')]
 watch(() => datetimerange.value, (newVal) => {
   listQuery.value.begTime = ''
   listQuery.value.endTime = ''
@@ -29,6 +29,35 @@
     }
   }
 })
+const shortcuts = [
+  {
+    text: '近一周',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setDate(start.getDate() - 7)
+      return [start, end]
+    },
+  },
+  {
+    text: '近一个月',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setMonth(start.getMonth() - 1)
+      return [start, end]
+    },
+  },
+  {
+    text: '近三个月',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setMonth(start.getMonth() - 3)
+      return [start, end]
+    },
+  },
+]
 const selectTimeType = (type: string) => {
   listQuery.value.timeType = type
 }
@@ -52,13 +81,13 @@
     <!-- 查询条件 -->
     <template #search>
       <div class="search">
-        <el-button :class="listQuery.timeType === '1' ? 'active' : ''" round size="small" @click="selectTimeType('1')">
+        <el-button :class="listQuery.timeType === '1' ? 'active' : ''" round size="small" style="margin: 0 5px;" @click="selectTimeType('1')">
           今日
         </el-button>
-        <el-button :class="listQuery.timeType === '2' ? 'active' : ''" round size="small" @click="selectTimeType('2')">
+        <el-button :class="listQuery.timeType === '2' ? 'active' : ''" round size="small" style="margin: 0 5px;" @click="selectTimeType('2')">
           本周
         </el-button>
-        <el-button :class="listQuery.timeType === '3' ? 'active' : ''" round size="small" @click="selectTimeType('3')">
+        <el-button :class="listQuery.timeType === '3' ? 'active' : ''" round size="small" style="margin: 0 5px;" @click="selectTimeType('3')">
           本月
         </el-button>
         <el-select v-model="listQuery.ledgerType" placeholder="全部类别" clearable style="width: 180px;margin: 0 5px;">
@@ -68,8 +97,8 @@
         </el-select>
         <el-date-picker
           v-model="datetimerange" type="datetimerange" format="YYYY-MM-DD HH:mm:ss"
-          style="width: 360px;margin: 0 5px;" value-format="YYYY-MM-DD HH:mm:ss" range-separator="至"
-          start-placeholder="报警开始时间" end-placeholder="报警结束时间" clearable
+          style="width: 380px;margin: 0 5px;" value-format="YYYY-MM-DD HH:mm:ss" range-separator="至"
+          start-placeholder="报警开始时间" end-placeholder="报警结束时间" clearable :shortcuts="shortcuts"
         />
         <el-button type="primary" style="margin: 0 5px;" @click="fetchData">
           搜索
@@ -80,13 +109,13 @@
       <div class="alarm-count">
         <div class="table">
           <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="type" align="center" width="140" />
+            <el-table-column label="位号" prop="tagNumber" align="center" width="160" />
             <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-column label="标签" prop="marker" align="center" width="140" />
+            <el-table-column label="报警次数" prop="alarmSum" align="center" width="120" />
           </el-table>
         </div>
       </div>
diff --git a/src/views/home/alarm/count/components/trendAnalysis.vue b/src/views/home/alarm/count/components/trendAnalysis.vue
index 73e18b0..18cfb4c 100644
--- a/src/views/home/alarm/count/components/trendAnalysis.vue
+++ b/src/views/home/alarm/count/components/trendAnalysis.vue
@@ -5,49 +5,203 @@
  -->
 <script lang="ts" setup name="TrendAnalysis">
 import layout from './layout.vue'
+import { getAlarmTrend } from '@/api/home/alarm/count'
 const listQuery = ref({
-  type: 'day',
+  timeType: '2',
+  ledgerType: '',
+  endTime: '',
+  begTime: '',
+  deptid: '',
 })
+// 开始结束时间
+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 shortcuts = [
+  {
+    text: '近一周',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setDate(start.getDate() - 7)
+      return [start, end]
+    },
+  },
+  {
+    text: '近一个月',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setMonth(start.getMonth() - 1)
+      return [start, end]
+    },
+  },
+  {
+    text: '近三个月',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setMonth(start.getMonth() - 3)
+      return [start, end]
+    },
+  },
+]
 const selectTimeType = (type: string) => {
-  listQuery.value.type = type
+  listQuery.value.timeType = type
 }
-const xAxisData = ref([])
-const data = ref([])
+const columns = ref<any[]>([
+  {
+    text: '闸井浓度超限',
+    value: 'well',
+  },
+  {
+    text: '场站浓度超限',
+    value: 'station',
+  },
+  {
+    text: '管线浓度超限',
+    value: 'pipeline',
+  },
+])
+// 类别
+const ledgerTypeList = ref<{ id: string; name: string; value: string }[]>([
+  {
+    name: '闸井',
+    id: '1',
+    value: '1',
+  },
+  {
+    name: '场站',
+    id: '2',
+    value: '2',
+  },
+  {
+    name: '管线',
+    id: '3',
+    value: '3',
+  },
+])
+const xAxisData = ref<string[]>([])
+const data = ref<any[]>([])
 const list = ref([])
-setTimeout(() => {
-  xAxisData.value = [
-    '2024-07-01 12:11:12',
-    '2024-07-02 12:11:12',
-    '2024-07-03 12:11:12',
-    '2024-07-04 12:11:12',
-    '2024-07-05 12:11:12',
-    '2024-07-06 12:11:12',
-    '2024-07-07 12:11:12',
-  ]
-  data.value = [
-    {
-      name: '闸井浓度超限',
-      data: [1, 3, 5, 1, 4, 2, 7],
-      symbol: 'emptyCircle',
-    },
-    {
-      name: '场站浓度超限',
-      data: [2, 1, 4, 1, 5, 2, 9],
-      symbol: 'emptyCircle',
-    },
-    {
-      name: '闸井浓度超限',
-      data: [4, 3, 2, 4, 7, 9, 1],
-      symbol: 'emptyCircle',
-    },
-  ]
-  list.value = xAxisData.value.map((item, index) => ({
-    alarmTime: item,
-    wellOver: data.value[0].data[index],
-    senceOver: data.value[1].data[index],
-    thirdParty: data.value[2].data[index],
-  }))
-}, 1000)
+const loading = ref(true)
+// setTimeout(() => {
+//   xAxisData.value = [
+//     '2024-07-01 12:11:12',
+//     '2024-07-02 12:11:12',
+//     '2024-07-03 12:11:12',
+//     '2024-07-04 12:11:12',
+//     '2024-07-05 12:11:12',
+//     '2024-07-06 12:11:12',
+//     '2024-07-07 12:11:12',
+//   ]
+//   data.value = [
+//     {
+//       name: '闸井浓度超限',
+//       data: [1, 3, 5, 1, 4, 2, 7],
+//       symbol: 'emptyCircle',
+//     },
+//     {
+//       name: '场站浓度超限',
+//       data: [2, 1, 4, 1, 5, 2, 9],
+//       symbol: 'emptyCircle',
+//     },
+//     {
+//       name: '闸井浓度超限',
+//       data: [4, 3, 2, 4, 7, 9, 1],
+//       symbol: 'emptyCircle',
+//     },
+//   ]
+//   list.value = xAxisData.value.map((item, index) => ({
+//     alarmTime: item,
+//     wellOver: data.value[0].data[index],
+//     senceOver: data.value[1].data[index],
+//     thirdParty: data.value[2].data[index],
+//   }))
+// }, 1000)
+const resizePage = () => {
+  setTimeout(() => {
+    const resize = new Event('resize')
+    window.dispatchEvent(resize)
+  }, 500)
+}
+const fetchData = () => {
+  loading.value = true
+  const columnsDict = {
+    闸井浓度超限: 'well',
+    场站浓度超限: 'station',
+    管线浓度超限: 'pipeline',
+  } as { [key: string]: string }
+  getAlarmTrend(listQuery.value).then((res) => {
+    console.log(res.data, '报警趋势分析')
+    xAxisData.value = res.data.map((item: any) => item.date)
+    if (!listQuery.value.ledgerType) {
+      data.value = [
+        {
+          name: '闸井浓度超限',
+          data: res.data.map((item: any) => item['闸井浓度超限']),
+        },
+        {
+          name: '场站浓度超限',
+          data: res.data.map((item: any) => item['场站浓度超限']),
+        },
+        {
+          name: '管线浓度超限',
+          data: res.data.map((item: any) => item['管线浓度超限']),
+        },
+      ]
+    }
+    else if (listQuery.value.ledgerType === '1') {
+      data.value = [
+        {
+          name: '闸井浓度超限',
+          data: res.data.map((item: any) => item['闸井浓度超限']),
+        },
+      ]
+    }
+    else if (listQuery.value.ledgerType === '2') {
+      data.value = [
+        {
+          name: '场站浓度超限',
+          data: res.data.map((item: any) => item['场站浓度超限']),
+        },
+      ]
+    }
+    else if (listQuery.value.ledgerType === '3') {
+      data.value = [
+        {
+          name: '管线浓度超限',
+          data: res.data.map((item: any) => item['管线浓度超限']),
+        },
+      ]
+    }
+    list.value = res.data.map((item: any) => ({
+      date: item.date,
+      well: item['闸井浓度超限'],
+      station: item['场站浓度超限'],
+      pipeline: item['管线浓度超限'],
+    }))
+    columns.value = data.value.map((item: any) => ({
+      text: item.name,
+      value: columnsDict[item.name],
+    }))
+    resizePage()
+    loading.value = false
+  }).catch(() => {
+    loading.value = false
+  })
+}
+onMounted(() => {
+  fetchData()
+})
 </script>
 
 <template>
@@ -56,34 +210,30 @@
     <template #search>
       <div class="search">
         <el-button
-          :class="listQuery.type === 'day' ? 'active' : ''" round size="small"
-          @click="selectTimeType('day')"
-        >
-          今日
-        </el-button>
-        <el-button
-          :class="listQuery.type === 'week' ? 'active' : ''" round size="small"
-          @click="selectTimeType('week')"
+          :class="listQuery.timeType === '2' ? 'active' : ''" round size="small" style="margin: 0 5px;"
+          @click="selectTimeType('2')"
         >
           本周
         </el-button>
         <el-button
-          :class="listQuery.type === 'month' ? 'active' : ''" round size="small"
-          @click="selectTimeType('month')"
+          :class="listQuery.timeType === '3' ? 'active' : ''" round size="small" style="margin: 0 5px;"
+          @click="selectTimeType('3')"
         >
           本月
         </el-button>
-        <el-select v-model="listQuery.keywords" placeholder="全部类别" clearable style="width: 180px;margin: 0 5px;" />
+        <el-select v-model="listQuery.ledgerType" placeholder="全部类别" clearable style="width: 180px;margin: 0 5px;">
+          <el-option v-for="item in ledgerTypeList" :key="item.id" :label="item.name" :value="item.id" />
+        </el-select>
         <dept-select
-          v-model="listQuery.keywords" placeholder="管理单位" :clearable="true"
+          v-model="listQuery.deptid" placeholder="管理单位" :clearable="true"
           style="width: 220px;margin: 0 5px;"
         />
         <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
+          style="width: 380px;margin: 0 5px;" value-format="YYYY-MM-DD HH:mm:ss" range-separator="至"
+          start-placeholder="报警开始时间" end-placeholder="报警结束时间" clearable :shortcuts="shortcuts"
         />
-        <el-button type="primary" style="margin: 0 5px;">
+        <el-button type="primary" style="margin: 0 5px;" @click="fetchData">
           搜索
         </el-button>
       </div>
@@ -94,14 +244,22 @@
           <line-chart
             :x-axis-data="xAxisData" :data="data" :gradient="false"
             :legend="{ itemWidth: 8, itemHeight: 8, type: 'scroll', orient: 'horizontal', icon: 'roundRect', right: '0', top: '10' }"
+            :grid="{
+              top: 50,
+              left: 30,
+              right: 30,
+              bottom: 20,
+              containLabel: true, // 是否包含坐标轴的刻度标签
+            }"
           />
         </div>
         <div class="table">
           <el-table border :data="list" stripe style="width: 100%;" :height="440">
-            <el-table-column label="日期" prop="alarmTime" align="center" />
-            <el-table-column label="闸井浓度超限" prop="wellOver" align="center" />
-            <el-table-column label="场站浓度超限" prop="senceOver" align="center" />
-            <el-table-column label="疑似第三方破坏" prop="thirdParty" align="center" />
+            <el-table-column label="日期" prop="date" align="center" width="190" />
+            <el-table-column
+              v-for="item in columns" :key="item.text" :label="item.text" :prop="item.value"
+              align="center"
+            />
           </el-table>
         </div>
       </div>
diff --git a/src/views/home/alarm/current/components/detail.vue b/src/views/home/alarm/current/components/detail.vue
index 4fb61d3..e200fe3 100644
--- a/src/views/home/alarm/current/components/detail.vue
+++ b/src/views/home/alarm/current/components/detail.vue
@@ -7,6 +7,7 @@
 import dayjs from 'dayjs'
 import { ElMessage } from 'element-plus'
 import { alarmProcessNode, detailAlarm } from '@/api/home/alarm/current'
+import { getAlarmDetail } from '@/api/home/alarm/history'
 import { toHumpObject } from '@/utils/String'
 import { getAlarmLevelListPage, getAlarmTypeListPage } from '@/api/home/rule/alarm'
 import { getDateDiff } from '@/utils/dayjs'
@@ -44,7 +45,7 @@
   },
   {
     text: '报警时间',
-    value: 'ts',
+    value: $route.query.type === 'history' ? 'alarmTime' : 'ts',
     align: 'center',
   },
   {
@@ -89,7 +90,7 @@
   },
   {
     text: '处置时长',
-    value: 'duration',
+    value: $route.query.type === 'history' ? 'cancelDuration' : 'duration',
     align: 'center',
   },
   {
@@ -107,8 +108,8 @@
 const fetchDetail = async () => {
   loading.value = true
   const res1 = await getAlarmLevelListPage({ offset: 1, limit: 9999 })
-  const res2 = await getAlarmTypeListPage({ offset: 1, limit: 9999 })
-  detailAlarm($route.query.id as string).then((res) => {
+  const res2 = await getAlarmTypeListPage({ offset: 1, limit: 9999 });
+  ($route.query.type === 'history' ? getAlarmDetail : detailAlarm)($route.query.id as string).then((res) => {
     detailInfo.value = toHumpObject(res.data)
     detailInfo.value.realAlarmName = detailInfo.value.realAlarm === '1' ? '报警' : '误报'
     detailInfo.value.alarmTypeName = res2.data.rows.filter((item: any) => item.id === detailInfo.value.alarmTypeId)[0]?.alarmType || ''
@@ -183,8 +184,12 @@
           </template>
           <div style="padding: 25px;">
             <el-timeline>
-              <el-timeline-item v-for="(item, index) in alarmDynamics" :key="index" :timestamp="item.approvalTime" type="primary">
-                {{ `${item.approvalPerson}${item.dept_name ? '(' : ''}${item.dept_name}${item.dept_name ? ')' : ''}${item.process_name}` }}
+              <el-timeline-item
+                v-for="(item, index) in alarmDynamics" :key="index" :timestamp="item.approvalTime"
+                type="primary"
+              >
+                {{ `${item.approvalPerson}${item.dept_name ? '(' : ''}${item.dept_name}${item.dept_name ? ')'
+                  : ''}${item.process_name}` }}
               </el-timeline-item>
             </el-timeline>
           </div>
diff --git a/src/views/home/alarm/current/index.vue b/src/views/home/alarm/current/index.vue
index 52b2be1..8b36a01 100644
--- a/src/views/home/alarm/current/index.vue
+++ b/src/views/home/alarm/current/index.vue
@@ -4,10 +4,10 @@
   Date: 2023-06-28
  -->
 <script lang="ts" setup name="CurrentAlarm">
-import { ElMessage } from 'element-plus'
+import { ElMessage, ElMessageBox } from 'element-plus'
 import { ArrowLeftBold, ArrowRightBold } from '@element-plus/icons-vue'
 import MapCom from './components/map.vue'
-import { getCurrentAlarmListPage, viewAlarm } from '@/api/home/alarm/current'
+import { batchDelete, getCurrentAlarmListPage, viewAlarm } from '@/api/home/alarm/current'
 import { getDictByCode } from '@/api/system/dict'
 import { getAlarmLevelListPage, getAlarmTypeListPage } from '@/api/home/rule/alarm'
 import { getDeviceTypeListPage } from '@/api/home/device/type'
@@ -66,6 +66,35 @@
     }
   }
 })
+const shortcuts = [
+  {
+    text: '近一周',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setDate(start.getDate() - 7)
+      return [start, end]
+    },
+  },
+  {
+    text: '近一个月',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setMonth(start.getMonth() - 1)
+      return [start, end]
+    },
+  },
+  {
+    text: '近三个月',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setMonth(start.getMonth() - 3)
+      return [start, end]
+    },
+  },
+]
 // 查询数据
 const fetchData = () => {
   loadingTable.value = true
@@ -140,8 +169,8 @@
 const detail = (row: any) => {
   mapData.value = row
   switchMode('map')
-  row.lngGaode = '116.398043'
-  row.latGaode = '39.901552'
+  // row.lngGaode = '116.398043'
+  // row.latGaode = '39.901552'
   // 绘制点
   const draw = () => {
     mapRef.value.mapRef.removeMarker()
@@ -209,6 +238,35 @@
   })
 }
 fetchDict()
+const { proxy } = getCurrentInstance() as any
+// 多选
+const multipleTable = ref([])
+const handleSelectionChange = (val: any) => {
+  console.log(val, '多选数据')
+  multipleTable.value = val
+}
+// 批量删除
+const batchDeleteRow = () => {
+  if (!multipleTable.value.length) {
+    ElMessage.warning('请先选中数据')
+    return
+  }
+  ElMessageBox.confirm(
+    '确定要删除选中的数据吗？',
+    '确认操作',
+    {
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+      type: 'warning',
+    },
+  ).then(() => {
+    batchDelete(multipleTable.value.map((item: any) => item.id)).then(() => {
+      ElMessage.success('操作成功')
+      multipleTable.value = []
+      fetchData()
+    })
+  })
+}
 </script>
 
 <template>
@@ -255,7 +313,7 @@
       </search-item>
       <search-item>
         <el-date-picker
-          v-model="datetimerange" type="datetimerange" format="YYYY-MM-DD HH:mm:ss"
+          v-model="datetimerange" type="datetimerange" format="YYYY-MM-DD HH:mm:ss" :shortcuts="shortcuts"
           value-format="YYYY-MM-DD HH:mm:ss" range-separator="至" start-placeholder="报警开始时间" end-placeholder="报警结束时间"
           clearable
         />
@@ -274,6 +332,9 @@
           <template #btns-right>
             <!-- 操作 -->
             <div>
+              <el-button v-if="proxy.hasPerm('/alarm/current/delete')" type="primary" @click="batchDeleteRow">
+                批量删除
+              </el-button>
               <el-button type="primary">
                 导出
               </el-button>
@@ -282,7 +343,10 @@
           <!-- 查询结果Table显示 -->
           <normal-table
             :data="list1" :total="total" :columns="columnsConfig" :query="listQuery"
-            :list-loading="loadingTable" :height="tableHeight - 50 - 70" @change="changePage"
+            :list-loading="loadingTable" :height="tableHeight - 50 - 70"
+            :is-multi="proxy.hasPerm('/alarm/current/delete')"
+            :is-showmulti-select="proxy.hasPerm('/alarm/current/delete')" @change="changePage"
+            @multiSelect="handleSelectionChange"
           >
             <template #preColumns>
               <el-table-column label="序号" width="55" align="center">
diff --git a/src/views/home/alarm/history/index.vue b/src/views/home/alarm/history/index.vue
index 87bb167..74ca152 100644
--- a/src/views/home/alarm/history/index.vue
+++ b/src/views/home/alarm/history/index.vue
@@ -80,6 +80,35 @@
     }
   }
 })
+const shortcuts = [
+  {
+    text: '近一周',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setDate(start.getDate() - 7)
+      return [start, end]
+    },
+  },
+  {
+    text: '近一个月',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setMonth(start.getMonth() - 1)
+      return [start, end]
+    },
+  },
+  {
+    text: '近三个月',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setMonth(start.getMonth() - 3)
+      return [start, end]
+    },
+  },
+]
 // 查询数据
 const fetchData = () => {
   loadingTable.value = true
@@ -127,10 +156,11 @@
 const $router = useRouter()
 const moreData = (row: any) => {
   $router.push({
-    name: 'AlarmCurrentDetail',
+    name: 'AlarmHistoryDetail',
     query: {
       id: row.id,
       row: JSON.stringify(row),
+      type: 'history',
     },
   })
 }
@@ -218,7 +248,7 @@
       </search-item>
       <search-item>
         <el-date-picker
-          v-model="datetimerange" type="datetimerange" format="YYYY-MM-DD HH:mm:ss"
+          v-model="datetimerange" type="datetimerange" format="YYYY-MM-DD HH:mm:ss" :shortcuts="shortcuts"
           value-format="YYYY-MM-DD HH:mm:ss" range-separator="至" start-placeholder="报警开始时间" end-placeholder="报警结束时间"
           clearable
         />
diff --git a/src/views/home/device/product/index.vue b/src/views/home/device/product/index.vue
index 1bb3d99..2300270 100644
--- a/src/views/home/device/product/index.vue
+++ b/src/views/home/device/product/index.vue
@@ -21,8 +21,8 @@
   { text: '设备型号', value: 'deviceModel', align: 'center' },
   { text: '厂商', value: 'manufacturerName', align: 'center' },
   { text: '通讯协议', value: 'protocolName', align: 'center' },
-  { text: '接入方式', value: 'accessMethodName', align: 'center' },
-  { text: '创建时间', value: 'ts', align: 'center' },
+  { text: '接入方式', value: 'accessMethodName', align: 'center', width: '140' },
+  { text: '创建时间', value: 'ts', align: 'center', width: '200' },
 ])
 // 最终展示列
 const columnsConfig = ref([])
diff --git a/src/views/home/device/type/index.vue b/src/views/home/device/type/index.vue
index 56d7f65..7df5933 100644
--- a/src/views/home/device/type/index.vue
+++ b/src/views/home/device/type/index.vue
@@ -14,12 +14,12 @@
 const total = ref(0)
 // 初始展示列
 const columns = ref<any>([
-  { text: '设备类型代号', value: 'typeCode', align: 'center' },
+  { text: '设备类型代号', value: 'typeCode', align: 'center', width: '110' },
   { text: '设备类型', value: 'typeName', align: 'center' },
   { text: '描述', value: 'typeDescription', align: 'center' },
   { text: '监测对象', value: 'watchObjectName', align: 'center' },
-  { text: '是否启用', value: 'isUsedName', align: 'center' },
-  { text: '操作时间', value: 'ts', align: 'center' },
+  { text: '是否启用', value: 'isUsedName', align: 'center', width: '110' },
+  { text: '操作时间', value: 'ts', align: 'center', width: '200' },
 ])
 // 最终展示列
 const columnsConfig = ref([])
diff --git a/src/views/home/ledger/ledger/components/wellList.vue b/src/views/home/ledger/ledger/components/wellList.vue
index 61eca63..6e40ede 100644
--- a/src/views/home/ledger/ledger/components/wellList.vue
+++ b/src/views/home/ledger/ledger/components/wellList.vue
@@ -22,12 +22,12 @@
   { text: '位号', value: 'tagNumber', align: 'center', isRequired: true, width: '110' },
   { text: '编号', value: 'ledgerCode', align: 'center', isRequired: true, width: '150' },
   { text: '名称', value: 'ledgerName', align: 'center', isRequired: true },
-  { text: '管理单位', value: 'responsibleDept', align: 'center' },
+  { text: '管理单位', value: 'deptName', align: 'center', width: '160' },
   { text: '详细位置', value: 'position', align: 'center' },
-  { text: '产权单位', value: 'deptName', align: 'center', isRequired: true },
-  { text: '管理方式', value: 'manageTypeName', align: 'center', isRequired: true },
-  { text: '使用状态', value: 'onStateName', align: 'center', isRequired: true },
-  { text: '位置状态', value: 'locationStateName', align: 'center', isRequired: true },
+  { text: '产权单位', value: 'responsibleDeptName', align: 'center', isRequired: true },
+  { text: '管理方式', value: 'manageTypeName', align: 'center', isRequired: true, width: '110' },
+  { text: '使用状态', value: 'onStateName', align: 'center', isRequired: true, width: '110' },
+  { text: '位置状态', value: 'locationStateName', align: 'center', isRequired: true, width: '110' },
 ])
 // 最终展示列
 const columnsConfig = ref([])
diff --git a/src/views/home/ledger/pipeline/index.vue b/src/views/home/ledger/pipeline/index.vue
index 0b1dc59..d56a41c 100644
--- a/src/views/home/ledger/pipeline/index.vue
+++ b/src/views/home/ledger/pipeline/index.vue
@@ -16,13 +16,13 @@
 const columns = ref<any>([
   { text: '管线编号', value: 'pipeCode', align: 'center', isRequired: true },
   { text: '管线位置', value: 'position', align: 'center', isRequired: true },
-  { text: '压力级制', value: 'pressTypeName', align: 'center', isRequired: true },
-  { text: '材质', value: 'material', align: 'center' },
-  { text: '管径(mm)', value: 'pipeDiameter', align: 'center' },
-  { text: '建设年代', value: 'constructEra', align: 'center' },
+  { text: '压力级制', value: 'pressTypeName', align: 'center', isRequired: true, width: '110' },
+  { text: '材质', value: 'material', align: 'center', width: '110' },
+  { text: '管径(mm)', value: 'pipeDiameter', align: 'center', width: '110' },
+  { text: '建设年代', value: 'constructEra', align: 'center', width: '110' },
   { text: '管理单位', value: 'deptName', align: 'center', isRequired: true },
   { text: '产权单位', value: 'propertyOwner', align: 'center', isRequired: true },
-  { text: '管理方式', value: 'manageTypeName', align: 'center', isRequired: true },
+  { text: '管理方式', value: 'manageTypeName', align: 'center', isRequired: true, width: '110' },
 ])
 // 最终展示列
 const columnsConfig = ref([])
diff --git a/src/views/home/ledger/sync/index.vue b/src/views/home/ledger/sync/index.vue
index dee1350..6607896 100644
--- a/src/views/home/ledger/sync/index.vue
+++ b/src/views/home/ledger/sync/index.vue
@@ -13,8 +13,8 @@
 const total = ref(0)
 // 初始展示列
 const columns = ref<any>([
-  { text: '开始时间', value: 'tagNumber', align: 'center', isRequired: true },
-  { text: '结束时间', value: 'ledgerCode', align: 'center', isRequired: true },
+  { text: '开始时间', value: 'tagNumber', align: 'center', isRequired: true, width: '190' },
+  { text: '结束时间', value: 'ledgerCode', align: 'center', isRequired: true, width: '190' },
   { text: '操作人', value: 'ledgerName', align: 'center', isRequired: true },
   { text: '同步类型', value: 'responsibleDept', align: 'center' },
   { text: '同步结果', value: 'position', align: 'center' },
diff --git a/src/views/home/operation/alarm/index.vue b/src/views/home/operation/alarm/index.vue
index ef04fd4..dc0f53c 100644
--- a/src/views/home/operation/alarm/index.vue
+++ b/src/views/home/operation/alarm/index.vue
@@ -17,8 +17,8 @@
   { text: '报警类型', value: 'alarmTypeName', align: 'center' },
   { text: '报警原因', value: 'alarmReason', align: 'center' },
   { text: '管理单位', value: 'deptName', align: 'center' },
-  { text: '状态', value: 'status', align: 'center' },
-  { text: '报警时间', value: 'alarmTime', align: 'center' },
+  { text: '状态', value: 'status', align: 'center', width: '110' },
+  { text: '报警时间', value: 'alarmTime', align: 'center', width: '200' },
 ])
 // 最终展示列
 const columnsConfig = ref([])
diff --git a/src/views/home/operation/manufacturer/index.vue b/src/views/home/operation/manufacturer/index.vue
index f439521..76ce423 100644
--- a/src/views/home/operation/manufacturer/index.vue
+++ b/src/views/home/operation/manufacturer/index.vue
@@ -18,13 +18,13 @@
 const columns = ref<any>([
   { text: '设备编号', value: 'devcode', align: 'center' },
   { text: '设备类型', value: 'deviceTypeName', align: 'center' },
-  { text: '运维类型', value: 'repairTypeName', align: 'center' },
+  { text: '运维类型', value: 'repairTypeName', align: 'center', width: '110' },
   { text: '安装位置', value: 'ledgerNumber', align: 'center' },
   { text: '详细位置', value: 'position', align: 'center' },
   { text: '管理单位', value: '', align: 'center' },
   { text: '运维内容', value: 'repairContent', align: 'center' },
-  { text: '运维人员', value: 'repairPerson', align: 'center' },
-  { text: '维护时间', value: 'finishTime', align: 'center' },
+  { text: '运维人员', value: 'repairPerson', align: 'center', width: '120' },
+  { text: '维护时间', value: 'finishTime', align: 'center', width: '200' },
 ])
 // 最终展示列
 const columnsConfig = ref([])

diff --git a/src/api/home/alarm/count.ts b/src/api/home/alarm/count.ts
index 1f4b59a..d5d9244 100644
--- a/src/api/home/alarm/count.ts
+++ b/src/api/home/alarm/count.ts
@@ -34,3 +34,11 @@
     data,
   })
 }
+// 报警趋势分析
+export function getAlarmTrend(data: any) {
+  return request({
+    url: '/statics/alarmRecords/alarmTrend',
+    method: 'post',
+    data,
+  })
+}
diff --git a/src/api/home/alarm/current.ts b/src/api/home/alarm/current.ts
index ec20f64..ac3387f 100644
--- a/src/api/home/alarm/current.ts
+++ b/src/api/home/alarm/current.ts
@@ -57,3 +57,13 @@
     },
   })
 }
+// 批量删除
+export function batchDelete(ids: any) {
+  return request({
+    url: '/system/alarmRecords/batchDelete',
+    method: 'post',
+    data: {
+      ids,
+    },
+  })
+}
diff --git a/src/api/home/alarm/history.ts b/src/api/home/alarm/history.ts
index 5f55e82..44cf851 100644
--- a/src/api/home/alarm/history.ts
+++ b/src/api/home/alarm/history.ts
@@ -11,3 +11,13 @@
     data,
   })
 }
+// 详情
+export function getAlarmDetail(id: any) {
+  return request({
+    url: '/system/alarmRecords/historyAlarmDetail',
+    method: 'post',
+    data: {
+      id,
+    },
+  })
+}
diff --git a/src/components/Echart/LineChart.vue b/src/components/Echart/LineChart.vue
index 2733161..b811f29 100644
--- a/src/components/Echart/LineChart.vue
+++ b/src/components/Echart/LineChart.vue
@@ -207,7 +207,7 @@
         },
       },
       valueFormatter: (value: string | number) => {
-        return value ? value + props.unit : ''
+        return value ? value + props.unit : value === 0 ? '0' : ''
       },
     }, // 提示框
     xAxis: [
diff --git a/src/router/modules/pc.ts b/src/router/modules/pc.ts
index 9b058fa..f3edac9 100644
--- a/src/router/modules/pc.ts
+++ b/src/router/modules/pc.ts
@@ -94,6 +94,19 @@
         },
       },
       {
+        path: '/history/detail',
+        component: () => import('@/views/home/alarm/current/components/detail.vue'),
+        name: 'AlarmHistoryDetail',
+        meta: {
+          title: '报警详情',
+          icon: 'ep:key',
+          sidebar: false,
+          breadcrumb: true,
+          activeMenu: '/alarm/history',
+          auth: '/alarm/history',
+        },
+      },
+      {
         path: 'count',
         component: () => import('@/views/home/alarm/count/index.vue'),
         name: 'AlarmCount',
diff --git a/src/views/home/alarm/count/components/alarmStatistics.vue b/src/views/home/alarm/count/components/alarmStatistics.vue
index b088de2..7aa930f 100644
--- a/src/views/home/alarm/count/components/alarmStatistics.vue
+++ b/src/views/home/alarm/count/components/alarmStatistics.vue
@@ -34,13 +34,12 @@
     value: '3',
   },
 ])
-const xAxisData = ref([])
-const data = ref([])
+const xAxisData = ref<string[]>([])
+const data = ref<any[]>([])
 const list = ref([])
 const loading = ref(true)
 // 开始结束时间
 const datetimerange = ref()
-// 默认当天
 watch(() => datetimerange.value, (newVal) => {
   listQuery.value.begTime = ''
   listQuery.value.endTime = ''
@@ -51,6 +50,35 @@
     }
   }
 })
+const shortcuts = [
+  {
+    text: '近一周',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setDate(start.getDate() - 7)
+      return [start, end]
+    },
+  },
+  {
+    text: '近一个月',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setMonth(start.getMonth() - 1)
+      return [start, end]
+    },
+  },
+  {
+    text: '近三个月',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setMonth(start.getMonth() - 3)
+      return [start, end]
+    },
+  },
+]
 // setTimeout(() => {
 //   xAxisData.value = [
 //     '闸井浓度超限', '场站浓度超限', '场站火焰报警', '疑似第三方破坏', '场站烟雾报警',
@@ -66,10 +94,25 @@
 //     value: data.value[0].data[index],
 //   }))
 // }, 1000)
+const resizePage = () => {
+  setTimeout(() => {
+    const resize = new Event('resize')
+    window.dispatchEvent(resize)
+  }, 500)
+}
 const fetchData = () => {
   loading.value = true
   getAlarmType(listQuery.value).then((res) => {
-    console.log(res.data, '各类报警统计')
+    // console.log(res.data, '各类报警统计')
+    xAxisData.value = res.data.map((item: any) => item.name)
+    data.value = [
+      {
+        name: '报警数量',
+        data: res.data.map((item: any) => item.value),
+      },
+    ]
+    list.value = res.data
+    resizePage
     loading.value = false
   }).catch(() => {
     loading.value = false
@@ -105,8 +148,8 @@
           style="width: 220px;margin: 0 5px;"
         />
         <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="至"
+          v-model="datetimerange" type="datetimerange" format="YYYY-MM-DD HH:mm:ss" :shortcuts="shortcuts"
+          style="width: 380px;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;" @click="fetchData">
@@ -118,8 +161,8 @@
       <div v-loading="loading" class="alarm-count">
         <div class="bar">
           <bar-chart-vertical
-            v-show="xAxisData.length"
-            :x-axis-data="xAxisData" :bar-coner="0" :data="data" :colors="[]" :bar-width="15"
+            v-show="xAxisData.length" :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' }"
             :grid="{
               top: 50,
@@ -133,7 +176,7 @@
         </div>
         <div class="table">
           <el-table border :data="list" stripe style="width: 100%;" :height="440">
-            <el-table-column label="报警类型" prop="alarmType" align="center" />
+            <el-table-column label="报警类型" prop="name" align="center" />
             <el-table-column label="报警数量" prop="value" align="center" />
           </el-table>
         </div>
diff --git a/src/views/home/alarm/count/components/deptCount.vue b/src/views/home/alarm/count/components/deptCount.vue
index 1ca5482..798bfd2 100644
--- a/src/views/home/alarm/count/components/deptCount.vue
+++ b/src/views/home/alarm/count/components/deptCount.vue
@@ -5,40 +5,123 @@
  -->
 <script lang="ts" setup name="AlarmCount">
 import layout from './layout.vue'
+import { getAlarmCompany } from '@/api/home/alarm/count'
 const listQuery = ref({
-  type: 'day',
+  begTime: '',
+  endTime: '',
+  ledgerType: '',
+  timeType: '1',
 })
 const selectTimeType = (type: string) => {
-  listQuery.value.type = type
+  listQuery.value.timeType = type
 }
+// 开始结束时间
+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 shortcuts = [
+  {
+    text: '近一周',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setDate(start.getDate() - 7)
+      return [start, end]
+    },
+  },
+  {
+    text: '近一个月',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setMonth(start.getMonth() - 1)
+      return [start, end]
+    },
+  },
+  {
+    text: '近三个月',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setMonth(start.getMonth() - 3)
+      return [start, end]
+    },
+  },
+]
+// 类别
+const ledgerTypeList = ref<{ id: string; name: string; value: string }[]>([
+  {
+    name: '闸井',
+    id: '1',
+    value: '1',
+  },
+  {
+    name: '场站',
+    id: '2',
+    value: '2',
+  },
+  {
+    name: '管线',
+    id: '3',
+    value: '3',
+  },
+])
 const xAxisData = ref([])
 const data = ref([])
 const list = ref([])
-setTimeout(() => {
-  xAxisData.value = [
-    '第一分公司', '第二分公司', '第三分公司', '第四分公司', '第五分公司',
-  ]
-  data.value = [
-    {
-      name: '闸井浓度超限',
-      data: [1, 8, 5, 8, 4],
-    },
-    {
-      name: '场站浓度超限',
-      data: [8, 3, 6, 1, 7],
-    },
-    {
-      name: '疑似第三方破坏',
-      data: [4, 7, 5, 9, 4],
-    },
-  ]
-  list.value = xAxisData.value.map((item, index) => ({
-    dept: item,
-    wellOver: data.value[0].data[index],
-    senceOver: data.value[1].data[index],
-    thirdParty: data.value[2].data[index],
-  }))
-}, 1000)
+const loading = ref(true)
+// setTimeout(() => {
+//   xAxisData.value = [
+//     '第一分公司', '第二分公司', '第三分公司', '第四分公司', '第五分公司',
+//   ]
+//   data.value = [
+//     {
+//       name: '闸井浓度超限',
+//       data: [1, 8, 5, 8, 4],
+//     },
+//     {
+//       name: '场站浓度超限',
+//       data: [8, 3, 6, 1, 7],
+//     },
+//     {
+//       name: '疑似第三方破坏',
+//       data: [4, 7, 5, 9, 4],
+//     },
+//   ]
+//   list.value = xAxisData.value.map((item, index) => ({
+//     dept: item,
+//     wellOver: data.value[0].data[index],
+//     senceOver: data.value[1].data[index],
+//     thirdParty: data.value[2].data[index],
+//   }))
+// }, 1000)
+const resizePage = () => {
+  setTimeout(() => {
+    const resize = new Event('resize')
+    window.dispatchEvent(resize)
+  }, 500)
+}
+const fetchData = () => {
+  loading.value = true
+  getAlarmCompany(listQuery.value).then((res) => {
+    console.log(res.data, '各单位报警统计')
+    resizePage()
+    loading.value = false
+  }).catch(() => {
+    loading.value = false
+  })
+}
+onMounted(() => {
+  fetchData()
+})
 </script>
 
 <template>
@@ -47,49 +130,59 @@
     <template #search>
       <div class="search">
         <el-button
-          :class="listQuery.type === 'day' ? 'active' : ''" round size="small"
-          @click="selectTimeType('day')"
+          :class="listQuery.timeType === '1' ? 'active' : ''" round size="small"
+          style="margin: 0 5px;"
+          @click="selectTimeType('1')"
         >
           今日
         </el-button>
         <el-button
-          :class="listQuery.type === 'week' ? 'active' : ''" round size="small"
-          @click="selectTimeType('week')"
+          :class="listQuery.timeType === '2' ? 'active' : ''" round size="small"
+          style="margin: 0 5px;"
+          @click="selectTimeType('2')"
         >
           本周
         </el-button>
         <el-button
-          :class="listQuery.type === 'month' ? 'active' : ''" round size="small"
-          @click="selectTimeType('month')"
+          :class="listQuery.timeType === '3' ? 'active' : ''" round size="small"
+          style="margin: 0 5px;"
+          @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 v-for="item in ledgerTypeList" :key="item.id" :label="item.name" :value="item.id" />
+        </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
+          style="width: 380px;margin: 0 5px;" value-format="YYYY-MM-DD HH:mm:ss" range-separator="至"
+          start-placeholder="报警开始时间" end-placeholder="报警结束时间" clearable :shortcuts="shortcuts"
         />
-        <el-button type="primary" style="margin: 0 5px;">
+        <el-button type="primary" style="margin: 0 5px;" @click="fetchData">
           搜索
         </el-button>
       </div>
     </template>
     <template #content>
-      <div class="alarm-count">
+      <div v-loading="loading" class="alarm-count">
         <div class="bar">
           <bar-chart-vertical
+            v-show="xAxisData.length"
             :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' }"
+            :grid="{
+              top: 50,
+              left: 30,
+              right: 30,
+              bottom: 20,
+              containLabel: true, // 是否包含坐标轴的刻度标签
+            }"
           />
+          <el-empty v-show="!xAxisData.length" description="暂无数据" />
         </div>
         <div class="table">
           <el-table border :data="list" stripe style="width: 100%;" :height="440">
-            <el-table-column label="管理单位" prop="dept" align="center" />
+            <el-table-column label="管理单位" prop="dept" align="center" width="200" />
             <el-table-column label="闸井浓度超限" prop="wellOver" align="center" />
             <el-table-column label="场站浓度超限" prop="senceOver" align="center" />
             <el-table-column label="疑似第三方破坏" prop="thirdParty" align="center" />
diff --git a/src/views/home/alarm/count/components/locationAnalysis.vue b/src/views/home/alarm/count/components/locationAnalysis.vue
index 4265aaf..4cd5921 100644
--- a/src/views/home/alarm/count/components/locationAnalysis.vue
+++ b/src/views/home/alarm/count/components/locationAnalysis.vue
@@ -18,7 +18,7 @@
 // 开始结束时间
 const datetimerange = ref()
 // 默认当天
-datetimerange.value = [`${dayjs().format('YYYY-MM-DD')} 00:00:00`, dayjs().format('YYYY-MM-DD HH:mm:ss')]
+// datetimerange.value = [`${dayjs().format('YYYY-MM-DD')} 00:00:00`, dayjs().format('YYYY-MM-DD HH:mm:ss')]
 watch(() => datetimerange.value, (newVal) => {
   listQuery.value.begTime = ''
   listQuery.value.endTime = ''
@@ -29,6 +29,35 @@
     }
   }
 })
+const shortcuts = [
+  {
+    text: '近一周',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setDate(start.getDate() - 7)
+      return [start, end]
+    },
+  },
+  {
+    text: '近一个月',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setMonth(start.getMonth() - 1)
+      return [start, end]
+    },
+  },
+  {
+    text: '近三个月',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setMonth(start.getMonth() - 3)
+      return [start, end]
+    },
+  },
+]
 const selectTimeType = (type: string) => {
   listQuery.value.timeType = type
 }
@@ -52,13 +81,13 @@
     <!-- 查询条件 -->
     <template #search>
       <div class="search">
-        <el-button :class="listQuery.timeType === '1' ? 'active' : ''" round size="small" @click="selectTimeType('1')">
+        <el-button :class="listQuery.timeType === '1' ? 'active' : ''" round size="small" style="margin: 0 5px;" @click="selectTimeType('1')">
           今日
         </el-button>
-        <el-button :class="listQuery.timeType === '2' ? 'active' : ''" round size="small" @click="selectTimeType('2')">
+        <el-button :class="listQuery.timeType === '2' ? 'active' : ''" round size="small" style="margin: 0 5px;" @click="selectTimeType('2')">
           本周
         </el-button>
-        <el-button :class="listQuery.timeType === '3' ? 'active' : ''" round size="small" @click="selectTimeType('3')">
+        <el-button :class="listQuery.timeType === '3' ? 'active' : ''" round size="small" style="margin: 0 5px;" @click="selectTimeType('3')">
           本月
         </el-button>
         <el-select v-model="listQuery.ledgerType" placeholder="全部类别" clearable style="width: 180px;margin: 0 5px;">
@@ -68,8 +97,8 @@
         </el-select>
         <el-date-picker
           v-model="datetimerange" type="datetimerange" format="YYYY-MM-DD HH:mm:ss"
-          style="width: 360px;margin: 0 5px;" value-format="YYYY-MM-DD HH:mm:ss" range-separator="至"
-          start-placeholder="报警开始时间" end-placeholder="报警结束时间" clearable
+          style="width: 380px;margin: 0 5px;" value-format="YYYY-MM-DD HH:mm:ss" range-separator="至"
+          start-placeholder="报警开始时间" end-placeholder="报警结束时间" clearable :shortcuts="shortcuts"
         />
         <el-button type="primary" style="margin: 0 5px;" @click="fetchData">
           搜索
@@ -80,13 +109,13 @@
       <div class="alarm-count">
         <div class="table">
           <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="type" align="center" width="140" />
+            <el-table-column label="位号" prop="tagNumber" align="center" width="160" />
             <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-column label="标签" prop="marker" align="center" width="140" />
+            <el-table-column label="报警次数" prop="alarmSum" align="center" width="120" />
           </el-table>
         </div>
       </div>
diff --git a/src/views/home/alarm/count/components/trendAnalysis.vue b/src/views/home/alarm/count/components/trendAnalysis.vue
index 73e18b0..18cfb4c 100644
--- a/src/views/home/alarm/count/components/trendAnalysis.vue
+++ b/src/views/home/alarm/count/components/trendAnalysis.vue
@@ -5,49 +5,203 @@
  -->
 <script lang="ts" setup name="TrendAnalysis">
 import layout from './layout.vue'
+import { getAlarmTrend } from '@/api/home/alarm/count'
 const listQuery = ref({
-  type: 'day',
+  timeType: '2',
+  ledgerType: '',
+  endTime: '',
+  begTime: '',
+  deptid: '',
 })
+// 开始结束时间
+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 shortcuts = [
+  {
+    text: '近一周',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setDate(start.getDate() - 7)
+      return [start, end]
+    },
+  },
+  {
+    text: '近一个月',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setMonth(start.getMonth() - 1)
+      return [start, end]
+    },
+  },
+  {
+    text: '近三个月',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setMonth(start.getMonth() - 3)
+      return [start, end]
+    },
+  },
+]
 const selectTimeType = (type: string) => {
-  listQuery.value.type = type
+  listQuery.value.timeType = type
 }
-const xAxisData = ref([])
-const data = ref([])
+const columns = ref<any[]>([
+  {
+    text: '闸井浓度超限',
+    value: 'well',
+  },
+  {
+    text: '场站浓度超限',
+    value: 'station',
+  },
+  {
+    text: '管线浓度超限',
+    value: 'pipeline',
+  },
+])
+// 类别
+const ledgerTypeList = ref<{ id: string; name: string; value: string }[]>([
+  {
+    name: '闸井',
+    id: '1',
+    value: '1',
+  },
+  {
+    name: '场站',
+    id: '2',
+    value: '2',
+  },
+  {
+    name: '管线',
+    id: '3',
+    value: '3',
+  },
+])
+const xAxisData = ref<string[]>([])
+const data = ref<any[]>([])
 const list = ref([])
-setTimeout(() => {
-  xAxisData.value = [
-    '2024-07-01 12:11:12',
-    '2024-07-02 12:11:12',
-    '2024-07-03 12:11:12',
-    '2024-07-04 12:11:12',
-    '2024-07-05 12:11:12',
-    '2024-07-06 12:11:12',
-    '2024-07-07 12:11:12',
-  ]
-  data.value = [
-    {
-      name: '闸井浓度超限',
-      data: [1, 3, 5, 1, 4, 2, 7],
-      symbol: 'emptyCircle',
-    },
-    {
-      name: '场站浓度超限',
-      data: [2, 1, 4, 1, 5, 2, 9],
-      symbol: 'emptyCircle',
-    },
-    {
-      name: '闸井浓度超限',
-      data: [4, 3, 2, 4, 7, 9, 1],
-      symbol: 'emptyCircle',
-    },
-  ]
-  list.value = xAxisData.value.map((item, index) => ({
-    alarmTime: item,
-    wellOver: data.value[0].data[index],
-    senceOver: data.value[1].data[index],
-    thirdParty: data.value[2].data[index],
-  }))
-}, 1000)
+const loading = ref(true)
+// setTimeout(() => {
+//   xAxisData.value = [
+//     '2024-07-01 12:11:12',
+//     '2024-07-02 12:11:12',
+//     '2024-07-03 12:11:12',
+//     '2024-07-04 12:11:12',
+//     '2024-07-05 12:11:12',
+//     '2024-07-06 12:11:12',
+//     '2024-07-07 12:11:12',
+//   ]
+//   data.value = [
+//     {
+//       name: '闸井浓度超限',
+//       data: [1, 3, 5, 1, 4, 2, 7],
+//       symbol: 'emptyCircle',
+//     },
+//     {
+//       name: '场站浓度超限',
+//       data: [2, 1, 4, 1, 5, 2, 9],
+//       symbol: 'emptyCircle',
+//     },
+//     {
+//       name: '闸井浓度超限',
+//       data: [4, 3, 2, 4, 7, 9, 1],
+//       symbol: 'emptyCircle',
+//     },
+//   ]
+//   list.value = xAxisData.value.map((item, index) => ({
+//     alarmTime: item,
+//     wellOver: data.value[0].data[index],
+//     senceOver: data.value[1].data[index],
+//     thirdParty: data.value[2].data[index],
+//   }))
+// }, 1000)
+const resizePage = () => {
+  setTimeout(() => {
+    const resize = new Event('resize')
+    window.dispatchEvent(resize)
+  }, 500)
+}
+const fetchData = () => {
+  loading.value = true
+  const columnsDict = {
+    闸井浓度超限: 'well',
+    场站浓度超限: 'station',
+    管线浓度超限: 'pipeline',
+  } as { [key: string]: string }
+  getAlarmTrend(listQuery.value).then((res) => {
+    console.log(res.data, '报警趋势分析')
+    xAxisData.value = res.data.map((item: any) => item.date)
+    if (!listQuery.value.ledgerType) {
+      data.value = [
+        {
+          name: '闸井浓度超限',
+          data: res.data.map((item: any) => item['闸井浓度超限']),
+        },
+        {
+          name: '场站浓度超限',
+          data: res.data.map((item: any) => item['场站浓度超限']),
+        },
+        {
+          name: '管线浓度超限',
+          data: res.data.map((item: any) => item['管线浓度超限']),
+        },
+      ]
+    }
+    else if (listQuery.value.ledgerType === '1') {
+      data.value = [
+        {
+          name: '闸井浓度超限',
+          data: res.data.map((item: any) => item['闸井浓度超限']),
+        },
+      ]
+    }
+    else if (listQuery.value.ledgerType === '2') {
+      data.value = [
+        {
+          name: '场站浓度超限',
+          data: res.data.map((item: any) => item['场站浓度超限']),
+        },
+      ]
+    }
+    else if (listQuery.value.ledgerType === '3') {
+      data.value = [
+        {
+          name: '管线浓度超限',
+          data: res.data.map((item: any) => item['管线浓度超限']),
+        },
+      ]
+    }
+    list.value = res.data.map((item: any) => ({
+      date: item.date,
+      well: item['闸井浓度超限'],
+      station: item['场站浓度超限'],
+      pipeline: item['管线浓度超限'],
+    }))
+    columns.value = data.value.map((item: any) => ({
+      text: item.name,
+      value: columnsDict[item.name],
+    }))
+    resizePage()
+    loading.value = false
+  }).catch(() => {
+    loading.value = false
+  })
+}
+onMounted(() => {
+  fetchData()
+})
 </script>
 
 <template>
@@ -56,34 +210,30 @@
     <template #search>
       <div class="search">
         <el-button
-          :class="listQuery.type === 'day' ? 'active' : ''" round size="small"
-          @click="selectTimeType('day')"
-        >
-          今日
-        </el-button>
-        <el-button
-          :class="listQuery.type === 'week' ? 'active' : ''" round size="small"
-          @click="selectTimeType('week')"
+          :class="listQuery.timeType === '2' ? 'active' : ''" round size="small" style="margin: 0 5px;"
+          @click="selectTimeType('2')"
         >
           本周
         </el-button>
         <el-button
-          :class="listQuery.type === 'month' ? 'active' : ''" round size="small"
-          @click="selectTimeType('month')"
+          :class="listQuery.timeType === '3' ? 'active' : ''" round size="small" style="margin: 0 5px;"
+          @click="selectTimeType('3')"
         >
           本月
         </el-button>
-        <el-select v-model="listQuery.keywords" placeholder="全部类别" clearable style="width: 180px;margin: 0 5px;" />
+        <el-select v-model="listQuery.ledgerType" placeholder="全部类别" clearable style="width: 180px;margin: 0 5px;">
+          <el-option v-for="item in ledgerTypeList" :key="item.id" :label="item.name" :value="item.id" />
+        </el-select>
         <dept-select
-          v-model="listQuery.keywords" placeholder="管理单位" :clearable="true"
+          v-model="listQuery.deptid" placeholder="管理单位" :clearable="true"
           style="width: 220px;margin: 0 5px;"
         />
         <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
+          style="width: 380px;margin: 0 5px;" value-format="YYYY-MM-DD HH:mm:ss" range-separator="至"
+          start-placeholder="报警开始时间" end-placeholder="报警结束时间" clearable :shortcuts="shortcuts"
         />
-        <el-button type="primary" style="margin: 0 5px;">
+        <el-button type="primary" style="margin: 0 5px;" @click="fetchData">
           搜索
         </el-button>
       </div>
@@ -94,14 +244,22 @@
           <line-chart
             :x-axis-data="xAxisData" :data="data" :gradient="false"
             :legend="{ itemWidth: 8, itemHeight: 8, type: 'scroll', orient: 'horizontal', icon: 'roundRect', right: '0', top: '10' }"
+            :grid="{
+              top: 50,
+              left: 30,
+              right: 30,
+              bottom: 20,
+              containLabel: true, // 是否包含坐标轴的刻度标签
+            }"
           />
         </div>
         <div class="table">
           <el-table border :data="list" stripe style="width: 100%;" :height="440">
-            <el-table-column label="日期" prop="alarmTime" align="center" />
-            <el-table-column label="闸井浓度超限" prop="wellOver" align="center" />
-            <el-table-column label="场站浓度超限" prop="senceOver" align="center" />
-            <el-table-column label="疑似第三方破坏" prop="thirdParty" align="center" />
+            <el-table-column label="日期" prop="date" align="center" width="190" />
+            <el-table-column
+              v-for="item in columns" :key="item.text" :label="item.text" :prop="item.value"
+              align="center"
+            />
           </el-table>
         </div>
       </div>
diff --git a/src/views/home/alarm/current/components/detail.vue b/src/views/home/alarm/current/components/detail.vue
index 4fb61d3..e200fe3 100644
--- a/src/views/home/alarm/current/components/detail.vue
+++ b/src/views/home/alarm/current/components/detail.vue
@@ -7,6 +7,7 @@
 import dayjs from 'dayjs'
 import { ElMessage } from 'element-plus'
 import { alarmProcessNode, detailAlarm } from '@/api/home/alarm/current'
+import { getAlarmDetail } from '@/api/home/alarm/history'
 import { toHumpObject } from '@/utils/String'
 import { getAlarmLevelListPage, getAlarmTypeListPage } from '@/api/home/rule/alarm'
 import { getDateDiff } from '@/utils/dayjs'
@@ -44,7 +45,7 @@
   },
   {
     text: '报警时间',
-    value: 'ts',
+    value: $route.query.type === 'history' ? 'alarmTime' : 'ts',
     align: 'center',
   },
   {
@@ -89,7 +90,7 @@
   },
   {
     text: '处置时长',
-    value: 'duration',
+    value: $route.query.type === 'history' ? 'cancelDuration' : 'duration',
     align: 'center',
   },
   {
@@ -107,8 +108,8 @@
 const fetchDetail = async () => {
   loading.value = true
   const res1 = await getAlarmLevelListPage({ offset: 1, limit: 9999 })
-  const res2 = await getAlarmTypeListPage({ offset: 1, limit: 9999 })
-  detailAlarm($route.query.id as string).then((res) => {
+  const res2 = await getAlarmTypeListPage({ offset: 1, limit: 9999 });
+  ($route.query.type === 'history' ? getAlarmDetail : detailAlarm)($route.query.id as string).then((res) => {
     detailInfo.value = toHumpObject(res.data)
     detailInfo.value.realAlarmName = detailInfo.value.realAlarm === '1' ? '报警' : '误报'
     detailInfo.value.alarmTypeName = res2.data.rows.filter((item: any) => item.id === detailInfo.value.alarmTypeId)[0]?.alarmType || ''
@@ -183,8 +184,12 @@
           </template>
           <div style="padding: 25px;">
             <el-timeline>
-              <el-timeline-item v-for="(item, index) in alarmDynamics" :key="index" :timestamp="item.approvalTime" type="primary">
-                {{ `${item.approvalPerson}${item.dept_name ? '(' : ''}${item.dept_name}${item.dept_name ? ')' : ''}${item.process_name}` }}
+              <el-timeline-item
+                v-for="(item, index) in alarmDynamics" :key="index" :timestamp="item.approvalTime"
+                type="primary"
+              >
+                {{ `${item.approvalPerson}${item.dept_name ? '(' : ''}${item.dept_name}${item.dept_name ? ')'
+                  : ''}${item.process_name}` }}
               </el-timeline-item>
             </el-timeline>
           </div>
diff --git a/src/views/home/alarm/current/index.vue b/src/views/home/alarm/current/index.vue
index 52b2be1..8b36a01 100644
--- a/src/views/home/alarm/current/index.vue
+++ b/src/views/home/alarm/current/index.vue
@@ -4,10 +4,10 @@
   Date: 2023-06-28
  -->
 <script lang="ts" setup name="CurrentAlarm">
-import { ElMessage } from 'element-plus'
+import { ElMessage, ElMessageBox } from 'element-plus'
 import { ArrowLeftBold, ArrowRightBold } from '@element-plus/icons-vue'
 import MapCom from './components/map.vue'
-import { getCurrentAlarmListPage, viewAlarm } from '@/api/home/alarm/current'
+import { batchDelete, getCurrentAlarmListPage, viewAlarm } from '@/api/home/alarm/current'
 import { getDictByCode } from '@/api/system/dict'
 import { getAlarmLevelListPage, getAlarmTypeListPage } from '@/api/home/rule/alarm'
 import { getDeviceTypeListPage } from '@/api/home/device/type'
@@ -66,6 +66,35 @@
     }
   }
 })
+const shortcuts = [
+  {
+    text: '近一周',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setDate(start.getDate() - 7)
+      return [start, end]
+    },
+  },
+  {
+    text: '近一个月',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setMonth(start.getMonth() - 1)
+      return [start, end]
+    },
+  },
+  {
+    text: '近三个月',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setMonth(start.getMonth() - 3)
+      return [start, end]
+    },
+  },
+]
 // 查询数据
 const fetchData = () => {
   loadingTable.value = true
@@ -140,8 +169,8 @@
 const detail = (row: any) => {
   mapData.value = row
   switchMode('map')
-  row.lngGaode = '116.398043'
-  row.latGaode = '39.901552'
+  // row.lngGaode = '116.398043'
+  // row.latGaode = '39.901552'
   // 绘制点
   const draw = () => {
     mapRef.value.mapRef.removeMarker()
@@ -209,6 +238,35 @@
   })
 }
 fetchDict()
+const { proxy } = getCurrentInstance() as any
+// 多选
+const multipleTable = ref([])
+const handleSelectionChange = (val: any) => {
+  console.log(val, '多选数据')
+  multipleTable.value = val
+}
+// 批量删除
+const batchDeleteRow = () => {
+  if (!multipleTable.value.length) {
+    ElMessage.warning('请先选中数据')
+    return
+  }
+  ElMessageBox.confirm(
+    '确定要删除选中的数据吗？',
+    '确认操作',
+    {
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+      type: 'warning',
+    },
+  ).then(() => {
+    batchDelete(multipleTable.value.map((item: any) => item.id)).then(() => {
+      ElMessage.success('操作成功')
+      multipleTable.value = []
+      fetchData()
+    })
+  })
+}
 </script>
 
 <template>
@@ -255,7 +313,7 @@
       </search-item>
       <search-item>
         <el-date-picker
-          v-model="datetimerange" type="datetimerange" format="YYYY-MM-DD HH:mm:ss"
+          v-model="datetimerange" type="datetimerange" format="YYYY-MM-DD HH:mm:ss" :shortcuts="shortcuts"
           value-format="YYYY-MM-DD HH:mm:ss" range-separator="至" start-placeholder="报警开始时间" end-placeholder="报警结束时间"
           clearable
         />
@@ -274,6 +332,9 @@
           <template #btns-right>
             <!-- 操作 -->
             <div>
+              <el-button v-if="proxy.hasPerm('/alarm/current/delete')" type="primary" @click="batchDeleteRow">
+                批量删除
+              </el-button>
               <el-button type="primary">
                 导出
               </el-button>
@@ -282,7 +343,10 @@
           <!-- 查询结果Table显示 -->
           <normal-table
             :data="list1" :total="total" :columns="columnsConfig" :query="listQuery"
-            :list-loading="loadingTable" :height="tableHeight - 50 - 70" @change="changePage"
+            :list-loading="loadingTable" :height="tableHeight - 50 - 70"
+            :is-multi="proxy.hasPerm('/alarm/current/delete')"
+            :is-showmulti-select="proxy.hasPerm('/alarm/current/delete')" @change="changePage"
+            @multiSelect="handleSelectionChange"
           >
             <template #preColumns>
               <el-table-column label="序号" width="55" align="center">
diff --git a/src/views/home/alarm/history/index.vue b/src/views/home/alarm/history/index.vue
index 87bb167..74ca152 100644
--- a/src/views/home/alarm/history/index.vue
+++ b/src/views/home/alarm/history/index.vue
@@ -80,6 +80,35 @@
     }
   }
 })
+const shortcuts = [
+  {
+    text: '近一周',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setDate(start.getDate() - 7)
+      return [start, end]
+    },
+  },
+  {
+    text: '近一个月',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setMonth(start.getMonth() - 1)
+      return [start, end]
+    },
+  },
+  {
+    text: '近三个月',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setMonth(start.getMonth() - 3)
+      return [start, end]
+    },
+  },
+]
 // 查询数据
 const fetchData = () => {
   loadingTable.value = true
@@ -127,10 +156,11 @@
 const $router = useRouter()
 const moreData = (row: any) => {
   $router.push({
-    name: 'AlarmCurrentDetail',
+    name: 'AlarmHistoryDetail',
     query: {
       id: row.id,
       row: JSON.stringify(row),
+      type: 'history',
     },
   })
 }
@@ -218,7 +248,7 @@
       </search-item>
       <search-item>
         <el-date-picker
-          v-model="datetimerange" type="datetimerange" format="YYYY-MM-DD HH:mm:ss"
+          v-model="datetimerange" type="datetimerange" format="YYYY-MM-DD HH:mm:ss" :shortcuts="shortcuts"
           value-format="YYYY-MM-DD HH:mm:ss" range-separator="至" start-placeholder="报警开始时间" end-placeholder="报警结束时间"
           clearable
         />
diff --git a/src/views/home/device/product/index.vue b/src/views/home/device/product/index.vue
index 1bb3d99..2300270 100644
--- a/src/views/home/device/product/index.vue
+++ b/src/views/home/device/product/index.vue
@@ -21,8 +21,8 @@
   { text: '设备型号', value: 'deviceModel', align: 'center' },
   { text: '厂商', value: 'manufacturerName', align: 'center' },
   { text: '通讯协议', value: 'protocolName', align: 'center' },
-  { text: '接入方式', value: 'accessMethodName', align: 'center' },
-  { text: '创建时间', value: 'ts', align: 'center' },
+  { text: '接入方式', value: 'accessMethodName', align: 'center', width: '140' },
+  { text: '创建时间', value: 'ts', align: 'center', width: '200' },
 ])
 // 最终展示列
 const columnsConfig = ref([])
diff --git a/src/views/home/device/type/index.vue b/src/views/home/device/type/index.vue
index 56d7f65..7df5933 100644
--- a/src/views/home/device/type/index.vue
+++ b/src/views/home/device/type/index.vue
@@ -14,12 +14,12 @@
 const total = ref(0)
 // 初始展示列
 const columns = ref<any>([
-  { text: '设备类型代号', value: 'typeCode', align: 'center' },
+  { text: '设备类型代号', value: 'typeCode', align: 'center', width: '110' },
   { text: '设备类型', value: 'typeName', align: 'center' },
   { text: '描述', value: 'typeDescription', align: 'center' },
   { text: '监测对象', value: 'watchObjectName', align: 'center' },
-  { text: '是否启用', value: 'isUsedName', align: 'center' },
-  { text: '操作时间', value: 'ts', align: 'center' },
+  { text: '是否启用', value: 'isUsedName', align: 'center', width: '110' },
+  { text: '操作时间', value: 'ts', align: 'center', width: '200' },
 ])
 // 最终展示列
 const columnsConfig = ref([])
diff --git a/src/views/home/ledger/ledger/components/wellList.vue b/src/views/home/ledger/ledger/components/wellList.vue
index 61eca63..6e40ede 100644
--- a/src/views/home/ledger/ledger/components/wellList.vue
+++ b/src/views/home/ledger/ledger/components/wellList.vue
@@ -22,12 +22,12 @@
   { text: '位号', value: 'tagNumber', align: 'center', isRequired: true, width: '110' },
   { text: '编号', value: 'ledgerCode', align: 'center', isRequired: true, width: '150' },
   { text: '名称', value: 'ledgerName', align: 'center', isRequired: true },
-  { text: '管理单位', value: 'responsibleDept', align: 'center' },
+  { text: '管理单位', value: 'deptName', align: 'center', width: '160' },
   { text: '详细位置', value: 'position', align: 'center' },
-  { text: '产权单位', value: 'deptName', align: 'center', isRequired: true },
-  { text: '管理方式', value: 'manageTypeName', align: 'center', isRequired: true },
-  { text: '使用状态', value: 'onStateName', align: 'center', isRequired: true },
-  { text: '位置状态', value: 'locationStateName', align: 'center', isRequired: true },
+  { text: '产权单位', value: 'responsibleDeptName', align: 'center', isRequired: true },
+  { text: '管理方式', value: 'manageTypeName', align: 'center', isRequired: true, width: '110' },
+  { text: '使用状态', value: 'onStateName', align: 'center', isRequired: true, width: '110' },
+  { text: '位置状态', value: 'locationStateName', align: 'center', isRequired: true, width: '110' },
 ])
 // 最终展示列
 const columnsConfig = ref([])
diff --git a/src/views/home/ledger/pipeline/index.vue b/src/views/home/ledger/pipeline/index.vue
index 0b1dc59..d56a41c 100644
--- a/src/views/home/ledger/pipeline/index.vue
+++ b/src/views/home/ledger/pipeline/index.vue
@@ -16,13 +16,13 @@
 const columns = ref<any>([
   { text: '管线编号', value: 'pipeCode', align: 'center', isRequired: true },
   { text: '管线位置', value: 'position', align: 'center', isRequired: true },
-  { text: '压力级制', value: 'pressTypeName', align: 'center', isRequired: true },
-  { text: '材质', value: 'material', align: 'center' },
-  { text: '管径(mm)', value: 'pipeDiameter', align: 'center' },
-  { text: '建设年代', value: 'constructEra', align: 'center' },
+  { text: '压力级制', value: 'pressTypeName', align: 'center', isRequired: true, width: '110' },
+  { text: '材质', value: 'material', align: 'center', width: '110' },
+  { text: '管径(mm)', value: 'pipeDiameter', align: 'center', width: '110' },
+  { text: '建设年代', value: 'constructEra', align: 'center', width: '110' },
   { text: '管理单位', value: 'deptName', align: 'center', isRequired: true },
   { text: '产权单位', value: 'propertyOwner', align: 'center', isRequired: true },
-  { text: '管理方式', value: 'manageTypeName', align: 'center', isRequired: true },
+  { text: '管理方式', value: 'manageTypeName', align: 'center', isRequired: true, width: '110' },
 ])
 // 最终展示列
 const columnsConfig = ref([])
diff --git a/src/views/home/ledger/sync/index.vue b/src/views/home/ledger/sync/index.vue
index dee1350..6607896 100644
--- a/src/views/home/ledger/sync/index.vue
+++ b/src/views/home/ledger/sync/index.vue
@@ -13,8 +13,8 @@
 const total = ref(0)
 // 初始展示列
 const columns = ref<any>([
-  { text: '开始时间', value: 'tagNumber', align: 'center', isRequired: true },
-  { text: '结束时间', value: 'ledgerCode', align: 'center', isRequired: true },
+  { text: '开始时间', value: 'tagNumber', align: 'center', isRequired: true, width: '190' },
+  { text: '结束时间', value: 'ledgerCode', align: 'center', isRequired: true, width: '190' },
   { text: '操作人', value: 'ledgerName', align: 'center', isRequired: true },
   { text: '同步类型', value: 'responsibleDept', align: 'center' },
   { text: '同步结果', value: 'position', align: 'center' },
diff --git a/src/views/home/operation/alarm/index.vue b/src/views/home/operation/alarm/index.vue
index ef04fd4..dc0f53c 100644
--- a/src/views/home/operation/alarm/index.vue
+++ b/src/views/home/operation/alarm/index.vue
@@ -17,8 +17,8 @@
   { text: '报警类型', value: 'alarmTypeName', align: 'center' },
   { text: '报警原因', value: 'alarmReason', align: 'center' },
   { text: '管理单位', value: 'deptName', align: 'center' },
-  { text: '状态', value: 'status', align: 'center' },
-  { text: '报警时间', value: 'alarmTime', align: 'center' },
+  { text: '状态', value: 'status', align: 'center', width: '110' },
+  { text: '报警时间', value: 'alarmTime', align: 'center', width: '200' },
 ])
 // 最终展示列
 const columnsConfig = ref([])
diff --git a/src/views/home/operation/manufacturer/index.vue b/src/views/home/operation/manufacturer/index.vue
index f439521..76ce423 100644
--- a/src/views/home/operation/manufacturer/index.vue
+++ b/src/views/home/operation/manufacturer/index.vue
@@ -18,13 +18,13 @@
 const columns = ref<any>([
   { text: '设备编号', value: 'devcode', align: 'center' },
   { text: '设备类型', value: 'deviceTypeName', align: 'center' },
-  { text: '运维类型', value: 'repairTypeName', align: 'center' },
+  { text: '运维类型', value: 'repairTypeName', align: 'center', width: '110' },
   { text: '安装位置', value: 'ledgerNumber', align: 'center' },
   { text: '详细位置', value: 'position', align: 'center' },
   { text: '管理单位', value: '', align: 'center' },
   { text: '运维内容', value: 'repairContent', align: 'center' },
-  { text: '运维人员', value: 'repairPerson', align: 'center' },
-  { text: '维护时间', value: 'finishTime', align: 'center' },
+  { text: '运维人员', value: 'repairPerson', align: 'center', width: '120' },
+  { text: '维护时间', value: 'finishTime', align: 'center', width: '200' },
 ])
 // 最终展示列
 const columnsConfig = ref([])
diff --git a/src/views/home/pipeline/components/detailInfoDialog.vue b/src/views/home/pipeline/components/detailInfoDialog.vue
index 1662e6e..76380ed 100644
--- a/src/views/home/pipeline/components/detailInfoDialog.vue
+++ b/src/views/home/pipeline/components/detailInfoDialog.vue
@@ -153,7 +153,7 @@
     width: 100%;
     display: flex;
     justify-content: space-between;
-    padding: 2px 10px;
+    padding: 8px 10px;
     align-items: center;
     color: #fff;
 

diff --git a/src/api/home/alarm/count.ts b/src/api/home/alarm/count.ts
index 1f4b59a..d5d9244 100644
--- a/src/api/home/alarm/count.ts
+++ b/src/api/home/alarm/count.ts
@@ -34,3 +34,11 @@
     data,
   })
 }
+// 报警趋势分析
+export function getAlarmTrend(data: any) {
+  return request({
+    url: '/statics/alarmRecords/alarmTrend',
+    method: 'post',
+    data,
+  })
+}
diff --git a/src/api/home/alarm/current.ts b/src/api/home/alarm/current.ts
index ec20f64..ac3387f 100644
--- a/src/api/home/alarm/current.ts
+++ b/src/api/home/alarm/current.ts
@@ -57,3 +57,13 @@
     },
   })
 }
+// 批量删除
+export function batchDelete(ids: any) {
+  return request({
+    url: '/system/alarmRecords/batchDelete',
+    method: 'post',
+    data: {
+      ids,
+    },
+  })
+}
diff --git a/src/api/home/alarm/history.ts b/src/api/home/alarm/history.ts
index 5f55e82..44cf851 100644
--- a/src/api/home/alarm/history.ts
+++ b/src/api/home/alarm/history.ts
@@ -11,3 +11,13 @@
     data,
   })
 }
+// 详情
+export function getAlarmDetail(id: any) {
+  return request({
+    url: '/system/alarmRecords/historyAlarmDetail',
+    method: 'post',
+    data: {
+      id,
+    },
+  })
+}
diff --git a/src/components/Echart/LineChart.vue b/src/components/Echart/LineChart.vue
index 2733161..b811f29 100644
--- a/src/components/Echart/LineChart.vue
+++ b/src/components/Echart/LineChart.vue
@@ -207,7 +207,7 @@
         },
       },
       valueFormatter: (value: string | number) => {
-        return value ? value + props.unit : ''
+        return value ? value + props.unit : value === 0 ? '0' : ''
       },
     }, // 提示框
     xAxis: [
diff --git a/src/router/modules/pc.ts b/src/router/modules/pc.ts
index 9b058fa..f3edac9 100644
--- a/src/router/modules/pc.ts
+++ b/src/router/modules/pc.ts
@@ -94,6 +94,19 @@
         },
       },
       {
+        path: '/history/detail',
+        component: () => import('@/views/home/alarm/current/components/detail.vue'),
+        name: 'AlarmHistoryDetail',
+        meta: {
+          title: '报警详情',
+          icon: 'ep:key',
+          sidebar: false,
+          breadcrumb: true,
+          activeMenu: '/alarm/history',
+          auth: '/alarm/history',
+        },
+      },
+      {
         path: 'count',
         component: () => import('@/views/home/alarm/count/index.vue'),
         name: 'AlarmCount',
diff --git a/src/views/home/alarm/count/components/alarmStatistics.vue b/src/views/home/alarm/count/components/alarmStatistics.vue
index b088de2..7aa930f 100644
--- a/src/views/home/alarm/count/components/alarmStatistics.vue
+++ b/src/views/home/alarm/count/components/alarmStatistics.vue
@@ -34,13 +34,12 @@
     value: '3',
   },
 ])
-const xAxisData = ref([])
-const data = ref([])
+const xAxisData = ref<string[]>([])
+const data = ref<any[]>([])
 const list = ref([])
 const loading = ref(true)
 // 开始结束时间
 const datetimerange = ref()
-// 默认当天
 watch(() => datetimerange.value, (newVal) => {
   listQuery.value.begTime = ''
   listQuery.value.endTime = ''
@@ -51,6 +50,35 @@
     }
   }
 })
+const shortcuts = [
+  {
+    text: '近一周',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setDate(start.getDate() - 7)
+      return [start, end]
+    },
+  },
+  {
+    text: '近一个月',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setMonth(start.getMonth() - 1)
+      return [start, end]
+    },
+  },
+  {
+    text: '近三个月',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setMonth(start.getMonth() - 3)
+      return [start, end]
+    },
+  },
+]
 // setTimeout(() => {
 //   xAxisData.value = [
 //     '闸井浓度超限', '场站浓度超限', '场站火焰报警', '疑似第三方破坏', '场站烟雾报警',
@@ -66,10 +94,25 @@
 //     value: data.value[0].data[index],
 //   }))
 // }, 1000)
+const resizePage = () => {
+  setTimeout(() => {
+    const resize = new Event('resize')
+    window.dispatchEvent(resize)
+  }, 500)
+}
 const fetchData = () => {
   loading.value = true
   getAlarmType(listQuery.value).then((res) => {
-    console.log(res.data, '各类报警统计')
+    // console.log(res.data, '各类报警统计')
+    xAxisData.value = res.data.map((item: any) => item.name)
+    data.value = [
+      {
+        name: '报警数量',
+        data: res.data.map((item: any) => item.value),
+      },
+    ]
+    list.value = res.data
+    resizePage
     loading.value = false
   }).catch(() => {
     loading.value = false
@@ -105,8 +148,8 @@
           style="width: 220px;margin: 0 5px;"
         />
         <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="至"
+          v-model="datetimerange" type="datetimerange" format="YYYY-MM-DD HH:mm:ss" :shortcuts="shortcuts"
+          style="width: 380px;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;" @click="fetchData">
@@ -118,8 +161,8 @@
       <div v-loading="loading" class="alarm-count">
         <div class="bar">
           <bar-chart-vertical
-            v-show="xAxisData.length"
-            :x-axis-data="xAxisData" :bar-coner="0" :data="data" :colors="[]" :bar-width="15"
+            v-show="xAxisData.length" :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' }"
             :grid="{
               top: 50,
@@ -133,7 +176,7 @@
         </div>
         <div class="table">
           <el-table border :data="list" stripe style="width: 100%;" :height="440">
-            <el-table-column label="报警类型" prop="alarmType" align="center" />
+            <el-table-column label="报警类型" prop="name" align="center" />
             <el-table-column label="报警数量" prop="value" align="center" />
           </el-table>
         </div>
diff --git a/src/views/home/alarm/count/components/deptCount.vue b/src/views/home/alarm/count/components/deptCount.vue
index 1ca5482..798bfd2 100644
--- a/src/views/home/alarm/count/components/deptCount.vue
+++ b/src/views/home/alarm/count/components/deptCount.vue
@@ -5,40 +5,123 @@
  -->
 <script lang="ts" setup name="AlarmCount">
 import layout from './layout.vue'
+import { getAlarmCompany } from '@/api/home/alarm/count'
 const listQuery = ref({
-  type: 'day',
+  begTime: '',
+  endTime: '',
+  ledgerType: '',
+  timeType: '1',
 })
 const selectTimeType = (type: string) => {
-  listQuery.value.type = type
+  listQuery.value.timeType = type
 }
+// 开始结束时间
+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 shortcuts = [
+  {
+    text: '近一周',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setDate(start.getDate() - 7)
+      return [start, end]
+    },
+  },
+  {
+    text: '近一个月',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setMonth(start.getMonth() - 1)
+      return [start, end]
+    },
+  },
+  {
+    text: '近三个月',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setMonth(start.getMonth() - 3)
+      return [start, end]
+    },
+  },
+]
+// 类别
+const ledgerTypeList = ref<{ id: string; name: string; value: string }[]>([
+  {
+    name: '闸井',
+    id: '1',
+    value: '1',
+  },
+  {
+    name: '场站',
+    id: '2',
+    value: '2',
+  },
+  {
+    name: '管线',
+    id: '3',
+    value: '3',
+  },
+])
 const xAxisData = ref([])
 const data = ref([])
 const list = ref([])
-setTimeout(() => {
-  xAxisData.value = [
-    '第一分公司', '第二分公司', '第三分公司', '第四分公司', '第五分公司',
-  ]
-  data.value = [
-    {
-      name: '闸井浓度超限',
-      data: [1, 8, 5, 8, 4],
-    },
-    {
-      name: '场站浓度超限',
-      data: [8, 3, 6, 1, 7],
-    },
-    {
-      name: '疑似第三方破坏',
-      data: [4, 7, 5, 9, 4],
-    },
-  ]
-  list.value = xAxisData.value.map((item, index) => ({
-    dept: item,
-    wellOver: data.value[0].data[index],
-    senceOver: data.value[1].data[index],
-    thirdParty: data.value[2].data[index],
-  }))
-}, 1000)
+const loading = ref(true)
+// setTimeout(() => {
+//   xAxisData.value = [
+//     '第一分公司', '第二分公司', '第三分公司', '第四分公司', '第五分公司',
+//   ]
+//   data.value = [
+//     {
+//       name: '闸井浓度超限',
+//       data: [1, 8, 5, 8, 4],
+//     },
+//     {
+//       name: '场站浓度超限',
+//       data: [8, 3, 6, 1, 7],
+//     },
+//     {
+//       name: '疑似第三方破坏',
+//       data: [4, 7, 5, 9, 4],
+//     },
+//   ]
+//   list.value = xAxisData.value.map((item, index) => ({
+//     dept: item,
+//     wellOver: data.value[0].data[index],
+//     senceOver: data.value[1].data[index],
+//     thirdParty: data.value[2].data[index],
+//   }))
+// }, 1000)
+const resizePage = () => {
+  setTimeout(() => {
+    const resize = new Event('resize')
+    window.dispatchEvent(resize)
+  }, 500)
+}
+const fetchData = () => {
+  loading.value = true
+  getAlarmCompany(listQuery.value).then((res) => {
+    console.log(res.data, '各单位报警统计')
+    resizePage()
+    loading.value = false
+  }).catch(() => {
+    loading.value = false
+  })
+}
+onMounted(() => {
+  fetchData()
+})
 </script>
 
 <template>
@@ -47,49 +130,59 @@
     <template #search>
       <div class="search">
         <el-button
-          :class="listQuery.type === 'day' ? 'active' : ''" round size="small"
-          @click="selectTimeType('day')"
+          :class="listQuery.timeType === '1' ? 'active' : ''" round size="small"
+          style="margin: 0 5px;"
+          @click="selectTimeType('1')"
         >
           今日
         </el-button>
         <el-button
-          :class="listQuery.type === 'week' ? 'active' : ''" round size="small"
-          @click="selectTimeType('week')"
+          :class="listQuery.timeType === '2' ? 'active' : ''" round size="small"
+          style="margin: 0 5px;"
+          @click="selectTimeType('2')"
         >
           本周
         </el-button>
         <el-button
-          :class="listQuery.type === 'month' ? 'active' : ''" round size="small"
-          @click="selectTimeType('month')"
+          :class="listQuery.timeType === '3' ? 'active' : ''" round size="small"
+          style="margin: 0 5px;"
+          @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 v-for="item in ledgerTypeList" :key="item.id" :label="item.name" :value="item.id" />
+        </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
+          style="width: 380px;margin: 0 5px;" value-format="YYYY-MM-DD HH:mm:ss" range-separator="至"
+          start-placeholder="报警开始时间" end-placeholder="报警结束时间" clearable :shortcuts="shortcuts"
         />
-        <el-button type="primary" style="margin: 0 5px;">
+        <el-button type="primary" style="margin: 0 5px;" @click="fetchData">
           搜索
         </el-button>
       </div>
     </template>
     <template #content>
-      <div class="alarm-count">
+      <div v-loading="loading" class="alarm-count">
         <div class="bar">
           <bar-chart-vertical
+            v-show="xAxisData.length"
             :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' }"
+            :grid="{
+              top: 50,
+              left: 30,
+              right: 30,
+              bottom: 20,
+              containLabel: true, // 是否包含坐标轴的刻度标签
+            }"
           />
+          <el-empty v-show="!xAxisData.length" description="暂无数据" />
         </div>
         <div class="table">
           <el-table border :data="list" stripe style="width: 100%;" :height="440">
-            <el-table-column label="管理单位" prop="dept" align="center" />
+            <el-table-column label="管理单位" prop="dept" align="center" width="200" />
             <el-table-column label="闸井浓度超限" prop="wellOver" align="center" />
             <el-table-column label="场站浓度超限" prop="senceOver" align="center" />
             <el-table-column label="疑似第三方破坏" prop="thirdParty" align="center" />
diff --git a/src/views/home/alarm/count/components/locationAnalysis.vue b/src/views/home/alarm/count/components/locationAnalysis.vue
index 4265aaf..4cd5921 100644
--- a/src/views/home/alarm/count/components/locationAnalysis.vue
+++ b/src/views/home/alarm/count/components/locationAnalysis.vue
@@ -18,7 +18,7 @@
 // 开始结束时间
 const datetimerange = ref()
 // 默认当天
-datetimerange.value = [`${dayjs().format('YYYY-MM-DD')} 00:00:00`, dayjs().format('YYYY-MM-DD HH:mm:ss')]
+// datetimerange.value = [`${dayjs().format('YYYY-MM-DD')} 00:00:00`, dayjs().format('YYYY-MM-DD HH:mm:ss')]
 watch(() => datetimerange.value, (newVal) => {
   listQuery.value.begTime = ''
   listQuery.value.endTime = ''
@@ -29,6 +29,35 @@
     }
   }
 })
+const shortcuts = [
+  {
+    text: '近一周',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setDate(start.getDate() - 7)
+      return [start, end]
+    },
+  },
+  {
+    text: '近一个月',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setMonth(start.getMonth() - 1)
+      return [start, end]
+    },
+  },
+  {
+    text: '近三个月',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setMonth(start.getMonth() - 3)
+      return [start, end]
+    },
+  },
+]
 const selectTimeType = (type: string) => {
   listQuery.value.timeType = type
 }
@@ -52,13 +81,13 @@
     <!-- 查询条件 -->
     <template #search>
       <div class="search">
-        <el-button :class="listQuery.timeType === '1' ? 'active' : ''" round size="small" @click="selectTimeType('1')">
+        <el-button :class="listQuery.timeType === '1' ? 'active' : ''" round size="small" style="margin: 0 5px;" @click="selectTimeType('1')">
           今日
         </el-button>
-        <el-button :class="listQuery.timeType === '2' ? 'active' : ''" round size="small" @click="selectTimeType('2')">
+        <el-button :class="listQuery.timeType === '2' ? 'active' : ''" round size="small" style="margin: 0 5px;" @click="selectTimeType('2')">
           本周
         </el-button>
-        <el-button :class="listQuery.timeType === '3' ? 'active' : ''" round size="small" @click="selectTimeType('3')">
+        <el-button :class="listQuery.timeType === '3' ? 'active' : ''" round size="small" style="margin: 0 5px;" @click="selectTimeType('3')">
           本月
         </el-button>
         <el-select v-model="listQuery.ledgerType" placeholder="全部类别" clearable style="width: 180px;margin: 0 5px;">
@@ -68,8 +97,8 @@
         </el-select>
         <el-date-picker
           v-model="datetimerange" type="datetimerange" format="YYYY-MM-DD HH:mm:ss"
-          style="width: 360px;margin: 0 5px;" value-format="YYYY-MM-DD HH:mm:ss" range-separator="至"
-          start-placeholder="报警开始时间" end-placeholder="报警结束时间" clearable
+          style="width: 380px;margin: 0 5px;" value-format="YYYY-MM-DD HH:mm:ss" range-separator="至"
+          start-placeholder="报警开始时间" end-placeholder="报警结束时间" clearable :shortcuts="shortcuts"
         />
         <el-button type="primary" style="margin: 0 5px;" @click="fetchData">
           搜索
@@ -80,13 +109,13 @@
       <div class="alarm-count">
         <div class="table">
           <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="type" align="center" width="140" />
+            <el-table-column label="位号" prop="tagNumber" align="center" width="160" />
             <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-column label="标签" prop="marker" align="center" width="140" />
+            <el-table-column label="报警次数" prop="alarmSum" align="center" width="120" />
           </el-table>
         </div>
       </div>
diff --git a/src/views/home/alarm/count/components/trendAnalysis.vue b/src/views/home/alarm/count/components/trendAnalysis.vue
index 73e18b0..18cfb4c 100644
--- a/src/views/home/alarm/count/components/trendAnalysis.vue
+++ b/src/views/home/alarm/count/components/trendAnalysis.vue
@@ -5,49 +5,203 @@
  -->
 <script lang="ts" setup name="TrendAnalysis">
 import layout from './layout.vue'
+import { getAlarmTrend } from '@/api/home/alarm/count'
 const listQuery = ref({
-  type: 'day',
+  timeType: '2',
+  ledgerType: '',
+  endTime: '',
+  begTime: '',
+  deptid: '',
 })
+// 开始结束时间
+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 shortcuts = [
+  {
+    text: '近一周',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setDate(start.getDate() - 7)
+      return [start, end]
+    },
+  },
+  {
+    text: '近一个月',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setMonth(start.getMonth() - 1)
+      return [start, end]
+    },
+  },
+  {
+    text: '近三个月',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setMonth(start.getMonth() - 3)
+      return [start, end]
+    },
+  },
+]
 const selectTimeType = (type: string) => {
-  listQuery.value.type = type
+  listQuery.value.timeType = type
 }
-const xAxisData = ref([])
-const data = ref([])
+const columns = ref<any[]>([
+  {
+    text: '闸井浓度超限',
+    value: 'well',
+  },
+  {
+    text: '场站浓度超限',
+    value: 'station',
+  },
+  {
+    text: '管线浓度超限',
+    value: 'pipeline',
+  },
+])
+// 类别
+const ledgerTypeList = ref<{ id: string; name: string; value: string }[]>([
+  {
+    name: '闸井',
+    id: '1',
+    value: '1',
+  },
+  {
+    name: '场站',
+    id: '2',
+    value: '2',
+  },
+  {
+    name: '管线',
+    id: '3',
+    value: '3',
+  },
+])
+const xAxisData = ref<string[]>([])
+const data = ref<any[]>([])
 const list = ref([])
-setTimeout(() => {
-  xAxisData.value = [
-    '2024-07-01 12:11:12',
-    '2024-07-02 12:11:12',
-    '2024-07-03 12:11:12',
-    '2024-07-04 12:11:12',
-    '2024-07-05 12:11:12',
-    '2024-07-06 12:11:12',
-    '2024-07-07 12:11:12',
-  ]
-  data.value = [
-    {
-      name: '闸井浓度超限',
-      data: [1, 3, 5, 1, 4, 2, 7],
-      symbol: 'emptyCircle',
-    },
-    {
-      name: '场站浓度超限',
-      data: [2, 1, 4, 1, 5, 2, 9],
-      symbol: 'emptyCircle',
-    },
-    {
-      name: '闸井浓度超限',
-      data: [4, 3, 2, 4, 7, 9, 1],
-      symbol: 'emptyCircle',
-    },
-  ]
-  list.value = xAxisData.value.map((item, index) => ({
-    alarmTime: item,
-    wellOver: data.value[0].data[index],
-    senceOver: data.value[1].data[index],
-    thirdParty: data.value[2].data[index],
-  }))
-}, 1000)
+const loading = ref(true)
+// setTimeout(() => {
+//   xAxisData.value = [
+//     '2024-07-01 12:11:12',
+//     '2024-07-02 12:11:12',
+//     '2024-07-03 12:11:12',
+//     '2024-07-04 12:11:12',
+//     '2024-07-05 12:11:12',
+//     '2024-07-06 12:11:12',
+//     '2024-07-07 12:11:12',
+//   ]
+//   data.value = [
+//     {
+//       name: '闸井浓度超限',
+//       data: [1, 3, 5, 1, 4, 2, 7],
+//       symbol: 'emptyCircle',
+//     },
+//     {
+//       name: '场站浓度超限',
+//       data: [2, 1, 4, 1, 5, 2, 9],
+//       symbol: 'emptyCircle',
+//     },
+//     {
+//       name: '闸井浓度超限',
+//       data: [4, 3, 2, 4, 7, 9, 1],
+//       symbol: 'emptyCircle',
+//     },
+//   ]
+//   list.value = xAxisData.value.map((item, index) => ({
+//     alarmTime: item,
+//     wellOver: data.value[0].data[index],
+//     senceOver: data.value[1].data[index],
+//     thirdParty: data.value[2].data[index],
+//   }))
+// }, 1000)
+const resizePage = () => {
+  setTimeout(() => {
+    const resize = new Event('resize')
+    window.dispatchEvent(resize)
+  }, 500)
+}
+const fetchData = () => {
+  loading.value = true
+  const columnsDict = {
+    闸井浓度超限: 'well',
+    场站浓度超限: 'station',
+    管线浓度超限: 'pipeline',
+  } as { [key: string]: string }
+  getAlarmTrend(listQuery.value).then((res) => {
+    console.log(res.data, '报警趋势分析')
+    xAxisData.value = res.data.map((item: any) => item.date)
+    if (!listQuery.value.ledgerType) {
+      data.value = [
+        {
+          name: '闸井浓度超限',
+          data: res.data.map((item: any) => item['闸井浓度超限']),
+        },
+        {
+          name: '场站浓度超限',
+          data: res.data.map((item: any) => item['场站浓度超限']),
+        },
+        {
+          name: '管线浓度超限',
+          data: res.data.map((item: any) => item['管线浓度超限']),
+        },
+      ]
+    }
+    else if (listQuery.value.ledgerType === '1') {
+      data.value = [
+        {
+          name: '闸井浓度超限',
+          data: res.data.map((item: any) => item['闸井浓度超限']),
+        },
+      ]
+    }
+    else if (listQuery.value.ledgerType === '2') {
+      data.value = [
+        {
+          name: '场站浓度超限',
+          data: res.data.map((item: any) => item['场站浓度超限']),
+        },
+      ]
+    }
+    else if (listQuery.value.ledgerType === '3') {
+      data.value = [
+        {
+          name: '管线浓度超限',
+          data: res.data.map((item: any) => item['管线浓度超限']),
+        },
+      ]
+    }
+    list.value = res.data.map((item: any) => ({
+      date: item.date,
+      well: item['闸井浓度超限'],
+      station: item['场站浓度超限'],
+      pipeline: item['管线浓度超限'],
+    }))
+    columns.value = data.value.map((item: any) => ({
+      text: item.name,
+      value: columnsDict[item.name],
+    }))
+    resizePage()
+    loading.value = false
+  }).catch(() => {
+    loading.value = false
+  })
+}
+onMounted(() => {
+  fetchData()
+})
 </script>
 
 <template>
@@ -56,34 +210,30 @@
     <template #search>
       <div class="search">
         <el-button
-          :class="listQuery.type === 'day' ? 'active' : ''" round size="small"
-          @click="selectTimeType('day')"
-        >
-          今日
-        </el-button>
-        <el-button
-          :class="listQuery.type === 'week' ? 'active' : ''" round size="small"
-          @click="selectTimeType('week')"
+          :class="listQuery.timeType === '2' ? 'active' : ''" round size="small" style="margin: 0 5px;"
+          @click="selectTimeType('2')"
         >
           本周
         </el-button>
         <el-button
-          :class="listQuery.type === 'month' ? 'active' : ''" round size="small"
-          @click="selectTimeType('month')"
+          :class="listQuery.timeType === '3' ? 'active' : ''" round size="small" style="margin: 0 5px;"
+          @click="selectTimeType('3')"
         >
           本月
         </el-button>
-        <el-select v-model="listQuery.keywords" placeholder="全部类别" clearable style="width: 180px;margin: 0 5px;" />
+        <el-select v-model="listQuery.ledgerType" placeholder="全部类别" clearable style="width: 180px;margin: 0 5px;">
+          <el-option v-for="item in ledgerTypeList" :key="item.id" :label="item.name" :value="item.id" />
+        </el-select>
         <dept-select
-          v-model="listQuery.keywords" placeholder="管理单位" :clearable="true"
+          v-model="listQuery.deptid" placeholder="管理单位" :clearable="true"
           style="width: 220px;margin: 0 5px;"
         />
         <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
+          style="width: 380px;margin: 0 5px;" value-format="YYYY-MM-DD HH:mm:ss" range-separator="至"
+          start-placeholder="报警开始时间" end-placeholder="报警结束时间" clearable :shortcuts="shortcuts"
         />
-        <el-button type="primary" style="margin: 0 5px;">
+        <el-button type="primary" style="margin: 0 5px;" @click="fetchData">
           搜索
         </el-button>
       </div>
@@ -94,14 +244,22 @@
           <line-chart
             :x-axis-data="xAxisData" :data="data" :gradient="false"
             :legend="{ itemWidth: 8, itemHeight: 8, type: 'scroll', orient: 'horizontal', icon: 'roundRect', right: '0', top: '10' }"
+            :grid="{
+              top: 50,
+              left: 30,
+              right: 30,
+              bottom: 20,
+              containLabel: true, // 是否包含坐标轴的刻度标签
+            }"
           />
         </div>
         <div class="table">
           <el-table border :data="list" stripe style="width: 100%;" :height="440">
-            <el-table-column label="日期" prop="alarmTime" align="center" />
-            <el-table-column label="闸井浓度超限" prop="wellOver" align="center" />
-            <el-table-column label="场站浓度超限" prop="senceOver" align="center" />
-            <el-table-column label="疑似第三方破坏" prop="thirdParty" align="center" />
+            <el-table-column label="日期" prop="date" align="center" width="190" />
+            <el-table-column
+              v-for="item in columns" :key="item.text" :label="item.text" :prop="item.value"
+              align="center"
+            />
           </el-table>
         </div>
       </div>
diff --git a/src/views/home/alarm/current/components/detail.vue b/src/views/home/alarm/current/components/detail.vue
index 4fb61d3..e200fe3 100644
--- a/src/views/home/alarm/current/components/detail.vue
+++ b/src/views/home/alarm/current/components/detail.vue
@@ -7,6 +7,7 @@
 import dayjs from 'dayjs'
 import { ElMessage } from 'element-plus'
 import { alarmProcessNode, detailAlarm } from '@/api/home/alarm/current'
+import { getAlarmDetail } from '@/api/home/alarm/history'
 import { toHumpObject } from '@/utils/String'
 import { getAlarmLevelListPage, getAlarmTypeListPage } from '@/api/home/rule/alarm'
 import { getDateDiff } from '@/utils/dayjs'
@@ -44,7 +45,7 @@
   },
   {
     text: '报警时间',
-    value: 'ts',
+    value: $route.query.type === 'history' ? 'alarmTime' : 'ts',
     align: 'center',
   },
   {
@@ -89,7 +90,7 @@
   },
   {
     text: '处置时长',
-    value: 'duration',
+    value: $route.query.type === 'history' ? 'cancelDuration' : 'duration',
     align: 'center',
   },
   {
@@ -107,8 +108,8 @@
 const fetchDetail = async () => {
   loading.value = true
   const res1 = await getAlarmLevelListPage({ offset: 1, limit: 9999 })
-  const res2 = await getAlarmTypeListPage({ offset: 1, limit: 9999 })
-  detailAlarm($route.query.id as string).then((res) => {
+  const res2 = await getAlarmTypeListPage({ offset: 1, limit: 9999 });
+  ($route.query.type === 'history' ? getAlarmDetail : detailAlarm)($route.query.id as string).then((res) => {
     detailInfo.value = toHumpObject(res.data)
     detailInfo.value.realAlarmName = detailInfo.value.realAlarm === '1' ? '报警' : '误报'
     detailInfo.value.alarmTypeName = res2.data.rows.filter((item: any) => item.id === detailInfo.value.alarmTypeId)[0]?.alarmType || ''
@@ -183,8 +184,12 @@
           </template>
           <div style="padding: 25px;">
             <el-timeline>
-              <el-timeline-item v-for="(item, index) in alarmDynamics" :key="index" :timestamp="item.approvalTime" type="primary">
-                {{ `${item.approvalPerson}${item.dept_name ? '(' : ''}${item.dept_name}${item.dept_name ? ')' : ''}${item.process_name}` }}
+              <el-timeline-item
+                v-for="(item, index) in alarmDynamics" :key="index" :timestamp="item.approvalTime"
+                type="primary"
+              >
+                {{ `${item.approvalPerson}${item.dept_name ? '(' : ''}${item.dept_name}${item.dept_name ? ')'
+                  : ''}${item.process_name}` }}
               </el-timeline-item>
             </el-timeline>
           </div>
diff --git a/src/views/home/alarm/current/index.vue b/src/views/home/alarm/current/index.vue
index 52b2be1..8b36a01 100644
--- a/src/views/home/alarm/current/index.vue
+++ b/src/views/home/alarm/current/index.vue
@@ -4,10 +4,10 @@
   Date: 2023-06-28
  -->
 <script lang="ts" setup name="CurrentAlarm">
-import { ElMessage } from 'element-plus'
+import { ElMessage, ElMessageBox } from 'element-plus'
 import { ArrowLeftBold, ArrowRightBold } from '@element-plus/icons-vue'
 import MapCom from './components/map.vue'
-import { getCurrentAlarmListPage, viewAlarm } from '@/api/home/alarm/current'
+import { batchDelete, getCurrentAlarmListPage, viewAlarm } from '@/api/home/alarm/current'
 import { getDictByCode } from '@/api/system/dict'
 import { getAlarmLevelListPage, getAlarmTypeListPage } from '@/api/home/rule/alarm'
 import { getDeviceTypeListPage } from '@/api/home/device/type'
@@ -66,6 +66,35 @@
     }
   }
 })
+const shortcuts = [
+  {
+    text: '近一周',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setDate(start.getDate() - 7)
+      return [start, end]
+    },
+  },
+  {
+    text: '近一个月',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setMonth(start.getMonth() - 1)
+      return [start, end]
+    },
+  },
+  {
+    text: '近三个月',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setMonth(start.getMonth() - 3)
+      return [start, end]
+    },
+  },
+]
 // 查询数据
 const fetchData = () => {
   loadingTable.value = true
@@ -140,8 +169,8 @@
 const detail = (row: any) => {
   mapData.value = row
   switchMode('map')
-  row.lngGaode = '116.398043'
-  row.latGaode = '39.901552'
+  // row.lngGaode = '116.398043'
+  // row.latGaode = '39.901552'
   // 绘制点
   const draw = () => {
     mapRef.value.mapRef.removeMarker()
@@ -209,6 +238,35 @@
   })
 }
 fetchDict()
+const { proxy } = getCurrentInstance() as any
+// 多选
+const multipleTable = ref([])
+const handleSelectionChange = (val: any) => {
+  console.log(val, '多选数据')
+  multipleTable.value = val
+}
+// 批量删除
+const batchDeleteRow = () => {
+  if (!multipleTable.value.length) {
+    ElMessage.warning('请先选中数据')
+    return
+  }
+  ElMessageBox.confirm(
+    '确定要删除选中的数据吗？',
+    '确认操作',
+    {
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+      type: 'warning',
+    },
+  ).then(() => {
+    batchDelete(multipleTable.value.map((item: any) => item.id)).then(() => {
+      ElMessage.success('操作成功')
+      multipleTable.value = []
+      fetchData()
+    })
+  })
+}
 </script>
 
 <template>
@@ -255,7 +313,7 @@
       </search-item>
       <search-item>
         <el-date-picker
-          v-model="datetimerange" type="datetimerange" format="YYYY-MM-DD HH:mm:ss"
+          v-model="datetimerange" type="datetimerange" format="YYYY-MM-DD HH:mm:ss" :shortcuts="shortcuts"
           value-format="YYYY-MM-DD HH:mm:ss" range-separator="至" start-placeholder="报警开始时间" end-placeholder="报警结束时间"
           clearable
         />
@@ -274,6 +332,9 @@
           <template #btns-right>
             <!-- 操作 -->
             <div>
+              <el-button v-if="proxy.hasPerm('/alarm/current/delete')" type="primary" @click="batchDeleteRow">
+                批量删除
+              </el-button>
               <el-button type="primary">
                 导出
               </el-button>
@@ -282,7 +343,10 @@
           <!-- 查询结果Table显示 -->
           <normal-table
             :data="list1" :total="total" :columns="columnsConfig" :query="listQuery"
-            :list-loading="loadingTable" :height="tableHeight - 50 - 70" @change="changePage"
+            :list-loading="loadingTable" :height="tableHeight - 50 - 70"
+            :is-multi="proxy.hasPerm('/alarm/current/delete')"
+            :is-showmulti-select="proxy.hasPerm('/alarm/current/delete')" @change="changePage"
+            @multiSelect="handleSelectionChange"
           >
             <template #preColumns>
               <el-table-column label="序号" width="55" align="center">
diff --git a/src/views/home/alarm/history/index.vue b/src/views/home/alarm/history/index.vue
index 87bb167..74ca152 100644
--- a/src/views/home/alarm/history/index.vue
+++ b/src/views/home/alarm/history/index.vue
@@ -80,6 +80,35 @@
     }
   }
 })
+const shortcuts = [
+  {
+    text: '近一周',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setDate(start.getDate() - 7)
+      return [start, end]
+    },
+  },
+  {
+    text: '近一个月',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setMonth(start.getMonth() - 1)
+      return [start, end]
+    },
+  },
+  {
+    text: '近三个月',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setMonth(start.getMonth() - 3)
+      return [start, end]
+    },
+  },
+]
 // 查询数据
 const fetchData = () => {
   loadingTable.value = true
@@ -127,10 +156,11 @@
 const $router = useRouter()
 const moreData = (row: any) => {
   $router.push({
-    name: 'AlarmCurrentDetail',
+    name: 'AlarmHistoryDetail',
     query: {
       id: row.id,
       row: JSON.stringify(row),
+      type: 'history',
     },
   })
 }
@@ -218,7 +248,7 @@
       </search-item>
       <search-item>
         <el-date-picker
-          v-model="datetimerange" type="datetimerange" format="YYYY-MM-DD HH:mm:ss"
+          v-model="datetimerange" type="datetimerange" format="YYYY-MM-DD HH:mm:ss" :shortcuts="shortcuts"
           value-format="YYYY-MM-DD HH:mm:ss" range-separator="至" start-placeholder="报警开始时间" end-placeholder="报警结束时间"
           clearable
         />
diff --git a/src/views/home/device/product/index.vue b/src/views/home/device/product/index.vue
index 1bb3d99..2300270 100644
--- a/src/views/home/device/product/index.vue
+++ b/src/views/home/device/product/index.vue
@@ -21,8 +21,8 @@
   { text: '设备型号', value: 'deviceModel', align: 'center' },
   { text: '厂商', value: 'manufacturerName', align: 'center' },
   { text: '通讯协议', value: 'protocolName', align: 'center' },
-  { text: '接入方式', value: 'accessMethodName', align: 'center' },
-  { text: '创建时间', value: 'ts', align: 'center' },
+  { text: '接入方式', value: 'accessMethodName', align: 'center', width: '140' },
+  { text: '创建时间', value: 'ts', align: 'center', width: '200' },
 ])
 // 最终展示列
 const columnsConfig = ref([])
diff --git a/src/views/home/device/type/index.vue b/src/views/home/device/type/index.vue
index 56d7f65..7df5933 100644
--- a/src/views/home/device/type/index.vue
+++ b/src/views/home/device/type/index.vue
@@ -14,12 +14,12 @@
 const total = ref(0)
 // 初始展示列
 const columns = ref<any>([
-  { text: '设备类型代号', value: 'typeCode', align: 'center' },
+  { text: '设备类型代号', value: 'typeCode', align: 'center', width: '110' },
   { text: '设备类型', value: 'typeName', align: 'center' },
   { text: '描述', value: 'typeDescription', align: 'center' },
   { text: '监测对象', value: 'watchObjectName', align: 'center' },
-  { text: '是否启用', value: 'isUsedName', align: 'center' },
-  { text: '操作时间', value: 'ts', align: 'center' },
+  { text: '是否启用', value: 'isUsedName', align: 'center', width: '110' },
+  { text: '操作时间', value: 'ts', align: 'center', width: '200' },
 ])
 // 最终展示列
 const columnsConfig = ref([])
diff --git a/src/views/home/ledger/ledger/components/wellList.vue b/src/views/home/ledger/ledger/components/wellList.vue
index 61eca63..6e40ede 100644
--- a/src/views/home/ledger/ledger/components/wellList.vue
+++ b/src/views/home/ledger/ledger/components/wellList.vue
@@ -22,12 +22,12 @@
   { text: '位号', value: 'tagNumber', align: 'center', isRequired: true, width: '110' },
   { text: '编号', value: 'ledgerCode', align: 'center', isRequired: true, width: '150' },
   { text: '名称', value: 'ledgerName', align: 'center', isRequired: true },
-  { text: '管理单位', value: 'responsibleDept', align: 'center' },
+  { text: '管理单位', value: 'deptName', align: 'center', width: '160' },
   { text: '详细位置', value: 'position', align: 'center' },
-  { text: '产权单位', value: 'deptName', align: 'center', isRequired: true },
-  { text: '管理方式', value: 'manageTypeName', align: 'center', isRequired: true },
-  { text: '使用状态', value: 'onStateName', align: 'center', isRequired: true },
-  { text: '位置状态', value: 'locationStateName', align: 'center', isRequired: true },
+  { text: '产权单位', value: 'responsibleDeptName', align: 'center', isRequired: true },
+  { text: '管理方式', value: 'manageTypeName', align: 'center', isRequired: true, width: '110' },
+  { text: '使用状态', value: 'onStateName', align: 'center', isRequired: true, width: '110' },
+  { text: '位置状态', value: 'locationStateName', align: 'center', isRequired: true, width: '110' },
 ])
 // 最终展示列
 const columnsConfig = ref([])
diff --git a/src/views/home/ledger/pipeline/index.vue b/src/views/home/ledger/pipeline/index.vue
index 0b1dc59..d56a41c 100644
--- a/src/views/home/ledger/pipeline/index.vue
+++ b/src/views/home/ledger/pipeline/index.vue
@@ -16,13 +16,13 @@
 const columns = ref<any>([
   { text: '管线编号', value: 'pipeCode', align: 'center', isRequired: true },
   { text: '管线位置', value: 'position', align: 'center', isRequired: true },
-  { text: '压力级制', value: 'pressTypeName', align: 'center', isRequired: true },
-  { text: '材质', value: 'material', align: 'center' },
-  { text: '管径(mm)', value: 'pipeDiameter', align: 'center' },
-  { text: '建设年代', value: 'constructEra', align: 'center' },
+  { text: '压力级制', value: 'pressTypeName', align: 'center', isRequired: true, width: '110' },
+  { text: '材质', value: 'material', align: 'center', width: '110' },
+  { text: '管径(mm)', value: 'pipeDiameter', align: 'center', width: '110' },
+  { text: '建设年代', value: 'constructEra', align: 'center', width: '110' },
   { text: '管理单位', value: 'deptName', align: 'center', isRequired: true },
   { text: '产权单位', value: 'propertyOwner', align: 'center', isRequired: true },
-  { text: '管理方式', value: 'manageTypeName', align: 'center', isRequired: true },
+  { text: '管理方式', value: 'manageTypeName', align: 'center', isRequired: true, width: '110' },
 ])
 // 最终展示列
 const columnsConfig = ref([])
diff --git a/src/views/home/ledger/sync/index.vue b/src/views/home/ledger/sync/index.vue
index dee1350..6607896 100644
--- a/src/views/home/ledger/sync/index.vue
+++ b/src/views/home/ledger/sync/index.vue
@@ -13,8 +13,8 @@
 const total = ref(0)
 // 初始展示列
 const columns = ref<any>([
-  { text: '开始时间', value: 'tagNumber', align: 'center', isRequired: true },
-  { text: '结束时间', value: 'ledgerCode', align: 'center', isRequired: true },
+  { text: '开始时间', value: 'tagNumber', align: 'center', isRequired: true, width: '190' },
+  { text: '结束时间', value: 'ledgerCode', align: 'center', isRequired: true, width: '190' },
   { text: '操作人', value: 'ledgerName', align: 'center', isRequired: true },
   { text: '同步类型', value: 'responsibleDept', align: 'center' },
   { text: '同步结果', value: 'position', align: 'center' },
diff --git a/src/views/home/operation/alarm/index.vue b/src/views/home/operation/alarm/index.vue
index ef04fd4..dc0f53c 100644
--- a/src/views/home/operation/alarm/index.vue
+++ b/src/views/home/operation/alarm/index.vue
@@ -17,8 +17,8 @@
   { text: '报警类型', value: 'alarmTypeName', align: 'center' },
   { text: '报警原因', value: 'alarmReason', align: 'center' },
   { text: '管理单位', value: 'deptName', align: 'center' },
-  { text: '状态', value: 'status', align: 'center' },
-  { text: '报警时间', value: 'alarmTime', align: 'center' },
+  { text: '状态', value: 'status', align: 'center', width: '110' },
+  { text: '报警时间', value: 'alarmTime', align: 'center', width: '200' },
 ])
 // 最终展示列
 const columnsConfig = ref([])
diff --git a/src/views/home/operation/manufacturer/index.vue b/src/views/home/operation/manufacturer/index.vue
index f439521..76ce423 100644
--- a/src/views/home/operation/manufacturer/index.vue
+++ b/src/views/home/operation/manufacturer/index.vue
@@ -18,13 +18,13 @@
 const columns = ref<any>([
   { text: '设备编号', value: 'devcode', align: 'center' },
   { text: '设备类型', value: 'deviceTypeName', align: 'center' },
-  { text: '运维类型', value: 'repairTypeName', align: 'center' },
+  { text: '运维类型', value: 'repairTypeName', align: 'center', width: '110' },
   { text: '安装位置', value: 'ledgerNumber', align: 'center' },
   { text: '详细位置', value: 'position', align: 'center' },
   { text: '管理单位', value: '', align: 'center' },
   { text: '运维内容', value: 'repairContent', align: 'center' },
-  { text: '运维人员', value: 'repairPerson', align: 'center' },
-  { text: '维护时间', value: 'finishTime', align: 'center' },
+  { text: '运维人员', value: 'repairPerson', align: 'center', width: '120' },
+  { text: '维护时间', value: 'finishTime', align: 'center', width: '200' },
 ])
 // 最终展示列
 const columnsConfig = ref([])
diff --git a/src/views/home/pipeline/components/detailInfoDialog.vue b/src/views/home/pipeline/components/detailInfoDialog.vue
index 1662e6e..76380ed 100644
--- a/src/views/home/pipeline/components/detailInfoDialog.vue
+++ b/src/views/home/pipeline/components/detailInfoDialog.vue
@@ -153,7 +153,7 @@
     width: 100%;
     display: flex;
     justify-content: space-between;
-    padding: 2px 10px;
+    padding: 8px 10px;
     align-items: center;
     color: #fff;
 
diff --git a/src/views/home/rule/agreement/index.vue b/src/views/home/rule/agreement/index.vue
index 6f2695a..2e6c2a5 100644
--- a/src/views/home/rule/agreement/index.vue
+++ b/src/views/home/rule/agreement/index.vue
@@ -15,10 +15,10 @@
 const columns = ref<any>([
   { text: '协议名称', value: 'protocolName', align: 'center' },
   { text: '协议编码', value: 'protocolCode', align: 'center' },
-  { text: '协议版本', value: 'version', align: 'center' },
+  { text: '协议版本', value: 'version', align: 'center', width: '130' },
   { text: '备注', value: 'description', align: 'center' },
-  { text: '上传地址', value: 'ip', align: 'center' },
-  { text: '创建时间', value: 'ts', align: 'center' },
+  { text: '上传地址', value: 'ip', align: 'center', width: '200' },
+  { text: '创建时间', value: 'ts', align: 'center', width: '200' },
 ])
 // 最终展示列
 const columnsConfig = ref([])

diff --git a/src/api/home/alarm/count.ts b/src/api/home/alarm/count.ts
index 1f4b59a..d5d9244 100644
--- a/src/api/home/alarm/count.ts
+++ b/src/api/home/alarm/count.ts
@@ -34,3 +34,11 @@
     data,
   })
 }
+// 报警趋势分析
+export function getAlarmTrend(data: any) {
+  return request({
+    url: '/statics/alarmRecords/alarmTrend',
+    method: 'post',
+    data,
+  })
+}
diff --git a/src/api/home/alarm/current.ts b/src/api/home/alarm/current.ts
index ec20f64..ac3387f 100644
--- a/src/api/home/alarm/current.ts
+++ b/src/api/home/alarm/current.ts
@@ -57,3 +57,13 @@
     },
   })
 }
+// 批量删除
+export function batchDelete(ids: any) {
+  return request({
+    url: '/system/alarmRecords/batchDelete',
+    method: 'post',
+    data: {
+      ids,
+    },
+  })
+}
diff --git a/src/api/home/alarm/history.ts b/src/api/home/alarm/history.ts
index 5f55e82..44cf851 100644
--- a/src/api/home/alarm/history.ts
+++ b/src/api/home/alarm/history.ts
@@ -11,3 +11,13 @@
     data,
   })
 }
+// 详情
+export function getAlarmDetail(id: any) {
+  return request({
+    url: '/system/alarmRecords/historyAlarmDetail',
+    method: 'post',
+    data: {
+      id,
+    },
+  })
+}
diff --git a/src/components/Echart/LineChart.vue b/src/components/Echart/LineChart.vue
index 2733161..b811f29 100644
--- a/src/components/Echart/LineChart.vue
+++ b/src/components/Echart/LineChart.vue
@@ -207,7 +207,7 @@
         },
       },
       valueFormatter: (value: string | number) => {
-        return value ? value + props.unit : ''
+        return value ? value + props.unit : value === 0 ? '0' : ''
       },
     }, // 提示框
     xAxis: [
diff --git a/src/router/modules/pc.ts b/src/router/modules/pc.ts
index 9b058fa..f3edac9 100644
--- a/src/router/modules/pc.ts
+++ b/src/router/modules/pc.ts
@@ -94,6 +94,19 @@
         },
       },
       {
+        path: '/history/detail',
+        component: () => import('@/views/home/alarm/current/components/detail.vue'),
+        name: 'AlarmHistoryDetail',
+        meta: {
+          title: '报警详情',
+          icon: 'ep:key',
+          sidebar: false,
+          breadcrumb: true,
+          activeMenu: '/alarm/history',
+          auth: '/alarm/history',
+        },
+      },
+      {
         path: 'count',
         component: () => import('@/views/home/alarm/count/index.vue'),
         name: 'AlarmCount',
diff --git a/src/views/home/alarm/count/components/alarmStatistics.vue b/src/views/home/alarm/count/components/alarmStatistics.vue
index b088de2..7aa930f 100644
--- a/src/views/home/alarm/count/components/alarmStatistics.vue
+++ b/src/views/home/alarm/count/components/alarmStatistics.vue
@@ -34,13 +34,12 @@
     value: '3',
   },
 ])
-const xAxisData = ref([])
-const data = ref([])
+const xAxisData = ref<string[]>([])
+const data = ref<any[]>([])
 const list = ref([])
 const loading = ref(true)
 // 开始结束时间
 const datetimerange = ref()
-// 默认当天
 watch(() => datetimerange.value, (newVal) => {
   listQuery.value.begTime = ''
   listQuery.value.endTime = ''
@@ -51,6 +50,35 @@
     }
   }
 })
+const shortcuts = [
+  {
+    text: '近一周',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setDate(start.getDate() - 7)
+      return [start, end]
+    },
+  },
+  {
+    text: '近一个月',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setMonth(start.getMonth() - 1)
+      return [start, end]
+    },
+  },
+  {
+    text: '近三个月',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setMonth(start.getMonth() - 3)
+      return [start, end]
+    },
+  },
+]
 // setTimeout(() => {
 //   xAxisData.value = [
 //     '闸井浓度超限', '场站浓度超限', '场站火焰报警', '疑似第三方破坏', '场站烟雾报警',
@@ -66,10 +94,25 @@
 //     value: data.value[0].data[index],
 //   }))
 // }, 1000)
+const resizePage = () => {
+  setTimeout(() => {
+    const resize = new Event('resize')
+    window.dispatchEvent(resize)
+  }, 500)
+}
 const fetchData = () => {
   loading.value = true
   getAlarmType(listQuery.value).then((res) => {
-    console.log(res.data, '各类报警统计')
+    // console.log(res.data, '各类报警统计')
+    xAxisData.value = res.data.map((item: any) => item.name)
+    data.value = [
+      {
+        name: '报警数量',
+        data: res.data.map((item: any) => item.value),
+      },
+    ]
+    list.value = res.data
+    resizePage
     loading.value = false
   }).catch(() => {
     loading.value = false
@@ -105,8 +148,8 @@
           style="width: 220px;margin: 0 5px;"
         />
         <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="至"
+          v-model="datetimerange" type="datetimerange" format="YYYY-MM-DD HH:mm:ss" :shortcuts="shortcuts"
+          style="width: 380px;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;" @click="fetchData">
@@ -118,8 +161,8 @@
       <div v-loading="loading" class="alarm-count">
         <div class="bar">
           <bar-chart-vertical
-            v-show="xAxisData.length"
-            :x-axis-data="xAxisData" :bar-coner="0" :data="data" :colors="[]" :bar-width="15"
+            v-show="xAxisData.length" :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' }"
             :grid="{
               top: 50,
@@ -133,7 +176,7 @@
         </div>
         <div class="table">
           <el-table border :data="list" stripe style="width: 100%;" :height="440">
-            <el-table-column label="报警类型" prop="alarmType" align="center" />
+            <el-table-column label="报警类型" prop="name" align="center" />
             <el-table-column label="报警数量" prop="value" align="center" />
           </el-table>
         </div>
diff --git a/src/views/home/alarm/count/components/deptCount.vue b/src/views/home/alarm/count/components/deptCount.vue
index 1ca5482..798bfd2 100644
--- a/src/views/home/alarm/count/components/deptCount.vue
+++ b/src/views/home/alarm/count/components/deptCount.vue
@@ -5,40 +5,123 @@
  -->
 <script lang="ts" setup name="AlarmCount">
 import layout from './layout.vue'
+import { getAlarmCompany } from '@/api/home/alarm/count'
 const listQuery = ref({
-  type: 'day',
+  begTime: '',
+  endTime: '',
+  ledgerType: '',
+  timeType: '1',
 })
 const selectTimeType = (type: string) => {
-  listQuery.value.type = type
+  listQuery.value.timeType = type
 }
+// 开始结束时间
+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 shortcuts = [
+  {
+    text: '近一周',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setDate(start.getDate() - 7)
+      return [start, end]
+    },
+  },
+  {
+    text: '近一个月',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setMonth(start.getMonth() - 1)
+      return [start, end]
+    },
+  },
+  {
+    text: '近三个月',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setMonth(start.getMonth() - 3)
+      return [start, end]
+    },
+  },
+]
+// 类别
+const ledgerTypeList = ref<{ id: string; name: string; value: string }[]>([
+  {
+    name: '闸井',
+    id: '1',
+    value: '1',
+  },
+  {
+    name: '场站',
+    id: '2',
+    value: '2',
+  },
+  {
+    name: '管线',
+    id: '3',
+    value: '3',
+  },
+])
 const xAxisData = ref([])
 const data = ref([])
 const list = ref([])
-setTimeout(() => {
-  xAxisData.value = [
-    '第一分公司', '第二分公司', '第三分公司', '第四分公司', '第五分公司',
-  ]
-  data.value = [
-    {
-      name: '闸井浓度超限',
-      data: [1, 8, 5, 8, 4],
-    },
-    {
-      name: '场站浓度超限',
-      data: [8, 3, 6, 1, 7],
-    },
-    {
-      name: '疑似第三方破坏',
-      data: [4, 7, 5, 9, 4],
-    },
-  ]
-  list.value = xAxisData.value.map((item, index) => ({
-    dept: item,
-    wellOver: data.value[0].data[index],
-    senceOver: data.value[1].data[index],
-    thirdParty: data.value[2].data[index],
-  }))
-}, 1000)
+const loading = ref(true)
+// setTimeout(() => {
+//   xAxisData.value = [
+//     '第一分公司', '第二分公司', '第三分公司', '第四分公司', '第五分公司',
+//   ]
+//   data.value = [
+//     {
+//       name: '闸井浓度超限',
+//       data: [1, 8, 5, 8, 4],
+//     },
+//     {
+//       name: '场站浓度超限',
+//       data: [8, 3, 6, 1, 7],
+//     },
+//     {
+//       name: '疑似第三方破坏',
+//       data: [4, 7, 5, 9, 4],
+//     },
+//   ]
+//   list.value = xAxisData.value.map((item, index) => ({
+//     dept: item,
+//     wellOver: data.value[0].data[index],
+//     senceOver: data.value[1].data[index],
+//     thirdParty: data.value[2].data[index],
+//   }))
+// }, 1000)
+const resizePage = () => {
+  setTimeout(() => {
+    const resize = new Event('resize')
+    window.dispatchEvent(resize)
+  }, 500)
+}
+const fetchData = () => {
+  loading.value = true
+  getAlarmCompany(listQuery.value).then((res) => {
+    console.log(res.data, '各单位报警统计')
+    resizePage()
+    loading.value = false
+  }).catch(() => {
+    loading.value = false
+  })
+}
+onMounted(() => {
+  fetchData()
+})
 </script>
 
 <template>
@@ -47,49 +130,59 @@
     <template #search>
       <div class="search">
         <el-button
-          :class="listQuery.type === 'day' ? 'active' : ''" round size="small"
-          @click="selectTimeType('day')"
+          :class="listQuery.timeType === '1' ? 'active' : ''" round size="small"
+          style="margin: 0 5px;"
+          @click="selectTimeType('1')"
         >
           今日
         </el-button>
         <el-button
-          :class="listQuery.type === 'week' ? 'active' : ''" round size="small"
-          @click="selectTimeType('week')"
+          :class="listQuery.timeType === '2' ? 'active' : ''" round size="small"
+          style="margin: 0 5px;"
+          @click="selectTimeType('2')"
         >
           本周
         </el-button>
         <el-button
-          :class="listQuery.type === 'month' ? 'active' : ''" round size="small"
-          @click="selectTimeType('month')"
+          :class="listQuery.timeType === '3' ? 'active' : ''" round size="small"
+          style="margin: 0 5px;"
+          @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 v-for="item in ledgerTypeList" :key="item.id" :label="item.name" :value="item.id" />
+        </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
+          style="width: 380px;margin: 0 5px;" value-format="YYYY-MM-DD HH:mm:ss" range-separator="至"
+          start-placeholder="报警开始时间" end-placeholder="报警结束时间" clearable :shortcuts="shortcuts"
         />
-        <el-button type="primary" style="margin: 0 5px;">
+        <el-button type="primary" style="margin: 0 5px;" @click="fetchData">
           搜索
         </el-button>
       </div>
     </template>
     <template #content>
-      <div class="alarm-count">
+      <div v-loading="loading" class="alarm-count">
         <div class="bar">
           <bar-chart-vertical
+            v-show="xAxisData.length"
             :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' }"
+            :grid="{
+              top: 50,
+              left: 30,
+              right: 30,
+              bottom: 20,
+              containLabel: true, // 是否包含坐标轴的刻度标签
+            }"
           />
+          <el-empty v-show="!xAxisData.length" description="暂无数据" />
         </div>
         <div class="table">
           <el-table border :data="list" stripe style="width: 100%;" :height="440">
-            <el-table-column label="管理单位" prop="dept" align="center" />
+            <el-table-column label="管理单位" prop="dept" align="center" width="200" />
             <el-table-column label="闸井浓度超限" prop="wellOver" align="center" />
             <el-table-column label="场站浓度超限" prop="senceOver" align="center" />
             <el-table-column label="疑似第三方破坏" prop="thirdParty" align="center" />
diff --git a/src/views/home/alarm/count/components/locationAnalysis.vue b/src/views/home/alarm/count/components/locationAnalysis.vue
index 4265aaf..4cd5921 100644
--- a/src/views/home/alarm/count/components/locationAnalysis.vue
+++ b/src/views/home/alarm/count/components/locationAnalysis.vue
@@ -18,7 +18,7 @@
 // 开始结束时间
 const datetimerange = ref()
 // 默认当天
-datetimerange.value = [`${dayjs().format('YYYY-MM-DD')} 00:00:00`, dayjs().format('YYYY-MM-DD HH:mm:ss')]
+// datetimerange.value = [`${dayjs().format('YYYY-MM-DD')} 00:00:00`, dayjs().format('YYYY-MM-DD HH:mm:ss')]
 watch(() => datetimerange.value, (newVal) => {
   listQuery.value.begTime = ''
   listQuery.value.endTime = ''
@@ -29,6 +29,35 @@
     }
   }
 })
+const shortcuts = [
+  {
+    text: '近一周',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setDate(start.getDate() - 7)
+      return [start, end]
+    },
+  },
+  {
+    text: '近一个月',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setMonth(start.getMonth() - 1)
+      return [start, end]
+    },
+  },
+  {
+    text: '近三个月',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setMonth(start.getMonth() - 3)
+      return [start, end]
+    },
+  },
+]
 const selectTimeType = (type: string) => {
   listQuery.value.timeType = type
 }
@@ -52,13 +81,13 @@
     <!-- 查询条件 -->
     <template #search>
       <div class="search">
-        <el-button :class="listQuery.timeType === '1' ? 'active' : ''" round size="small" @click="selectTimeType('1')">
+        <el-button :class="listQuery.timeType === '1' ? 'active' : ''" round size="small" style="margin: 0 5px;" @click="selectTimeType('1')">
           今日
         </el-button>
-        <el-button :class="listQuery.timeType === '2' ? 'active' : ''" round size="small" @click="selectTimeType('2')">
+        <el-button :class="listQuery.timeType === '2' ? 'active' : ''" round size="small" style="margin: 0 5px;" @click="selectTimeType('2')">
           本周
         </el-button>
-        <el-button :class="listQuery.timeType === '3' ? 'active' : ''" round size="small" @click="selectTimeType('3')">
+        <el-button :class="listQuery.timeType === '3' ? 'active' : ''" round size="small" style="margin: 0 5px;" @click="selectTimeType('3')">
           本月
         </el-button>
         <el-select v-model="listQuery.ledgerType" placeholder="全部类别" clearable style="width: 180px;margin: 0 5px;">
@@ -68,8 +97,8 @@
         </el-select>
         <el-date-picker
           v-model="datetimerange" type="datetimerange" format="YYYY-MM-DD HH:mm:ss"
-          style="width: 360px;margin: 0 5px;" value-format="YYYY-MM-DD HH:mm:ss" range-separator="至"
-          start-placeholder="报警开始时间" end-placeholder="报警结束时间" clearable
+          style="width: 380px;margin: 0 5px;" value-format="YYYY-MM-DD HH:mm:ss" range-separator="至"
+          start-placeholder="报警开始时间" end-placeholder="报警结束时间" clearable :shortcuts="shortcuts"
         />
         <el-button type="primary" style="margin: 0 5px;" @click="fetchData">
           搜索
@@ -80,13 +109,13 @@
       <div class="alarm-count">
         <div class="table">
           <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="type" align="center" width="140" />
+            <el-table-column label="位号" prop="tagNumber" align="center" width="160" />
             <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-column label="标签" prop="marker" align="center" width="140" />
+            <el-table-column label="报警次数" prop="alarmSum" align="center" width="120" />
           </el-table>
         </div>
       </div>
diff --git a/src/views/home/alarm/count/components/trendAnalysis.vue b/src/views/home/alarm/count/components/trendAnalysis.vue
index 73e18b0..18cfb4c 100644
--- a/src/views/home/alarm/count/components/trendAnalysis.vue
+++ b/src/views/home/alarm/count/components/trendAnalysis.vue
@@ -5,49 +5,203 @@
  -->
 <script lang="ts" setup name="TrendAnalysis">
 import layout from './layout.vue'
+import { getAlarmTrend } from '@/api/home/alarm/count'
 const listQuery = ref({
-  type: 'day',
+  timeType: '2',
+  ledgerType: '',
+  endTime: '',
+  begTime: '',
+  deptid: '',
 })
+// 开始结束时间
+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 shortcuts = [
+  {
+    text: '近一周',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setDate(start.getDate() - 7)
+      return [start, end]
+    },
+  },
+  {
+    text: '近一个月',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setMonth(start.getMonth() - 1)
+      return [start, end]
+    },
+  },
+  {
+    text: '近三个月',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setMonth(start.getMonth() - 3)
+      return [start, end]
+    },
+  },
+]
 const selectTimeType = (type: string) => {
-  listQuery.value.type = type
+  listQuery.value.timeType = type
 }
-const xAxisData = ref([])
-const data = ref([])
+const columns = ref<any[]>([
+  {
+    text: '闸井浓度超限',
+    value: 'well',
+  },
+  {
+    text: '场站浓度超限',
+    value: 'station',
+  },
+  {
+    text: '管线浓度超限',
+    value: 'pipeline',
+  },
+])
+// 类别
+const ledgerTypeList = ref<{ id: string; name: string; value: string }[]>([
+  {
+    name: '闸井',
+    id: '1',
+    value: '1',
+  },
+  {
+    name: '场站',
+    id: '2',
+    value: '2',
+  },
+  {
+    name: '管线',
+    id: '3',
+    value: '3',
+  },
+])
+const xAxisData = ref<string[]>([])
+const data = ref<any[]>([])
 const list = ref([])
-setTimeout(() => {
-  xAxisData.value = [
-    '2024-07-01 12:11:12',
-    '2024-07-02 12:11:12',
-    '2024-07-03 12:11:12',
-    '2024-07-04 12:11:12',
-    '2024-07-05 12:11:12',
-    '2024-07-06 12:11:12',
-    '2024-07-07 12:11:12',
-  ]
-  data.value = [
-    {
-      name: '闸井浓度超限',
-      data: [1, 3, 5, 1, 4, 2, 7],
-      symbol: 'emptyCircle',
-    },
-    {
-      name: '场站浓度超限',
-      data: [2, 1, 4, 1, 5, 2, 9],
-      symbol: 'emptyCircle',
-    },
-    {
-      name: '闸井浓度超限',
-      data: [4, 3, 2, 4, 7, 9, 1],
-      symbol: 'emptyCircle',
-    },
-  ]
-  list.value = xAxisData.value.map((item, index) => ({
-    alarmTime: item,
-    wellOver: data.value[0].data[index],
-    senceOver: data.value[1].data[index],
-    thirdParty: data.value[2].data[index],
-  }))
-}, 1000)
+const loading = ref(true)
+// setTimeout(() => {
+//   xAxisData.value = [
+//     '2024-07-01 12:11:12',
+//     '2024-07-02 12:11:12',
+//     '2024-07-03 12:11:12',
+//     '2024-07-04 12:11:12',
+//     '2024-07-05 12:11:12',
+//     '2024-07-06 12:11:12',
+//     '2024-07-07 12:11:12',
+//   ]
+//   data.value = [
+//     {
+//       name: '闸井浓度超限',
+//       data: [1, 3, 5, 1, 4, 2, 7],
+//       symbol: 'emptyCircle',
+//     },
+//     {
+//       name: '场站浓度超限',
+//       data: [2, 1, 4, 1, 5, 2, 9],
+//       symbol: 'emptyCircle',
+//     },
+//     {
+//       name: '闸井浓度超限',
+//       data: [4, 3, 2, 4, 7, 9, 1],
+//       symbol: 'emptyCircle',
+//     },
+//   ]
+//   list.value = xAxisData.value.map((item, index) => ({
+//     alarmTime: item,
+//     wellOver: data.value[0].data[index],
+//     senceOver: data.value[1].data[index],
+//     thirdParty: data.value[2].data[index],
+//   }))
+// }, 1000)
+const resizePage = () => {
+  setTimeout(() => {
+    const resize = new Event('resize')
+    window.dispatchEvent(resize)
+  }, 500)
+}
+const fetchData = () => {
+  loading.value = true
+  const columnsDict = {
+    闸井浓度超限: 'well',
+    场站浓度超限: 'station',
+    管线浓度超限: 'pipeline',
+  } as { [key: string]: string }
+  getAlarmTrend(listQuery.value).then((res) => {
+    console.log(res.data, '报警趋势分析')
+    xAxisData.value = res.data.map((item: any) => item.date)
+    if (!listQuery.value.ledgerType) {
+      data.value = [
+        {
+          name: '闸井浓度超限',
+          data: res.data.map((item: any) => item['闸井浓度超限']),
+        },
+        {
+          name: '场站浓度超限',
+          data: res.data.map((item: any) => item['场站浓度超限']),
+        },
+        {
+          name: '管线浓度超限',
+          data: res.data.map((item: any) => item['管线浓度超限']),
+        },
+      ]
+    }
+    else if (listQuery.value.ledgerType === '1') {
+      data.value = [
+        {
+          name: '闸井浓度超限',
+          data: res.data.map((item: any) => item['闸井浓度超限']),
+        },
+      ]
+    }
+    else if (listQuery.value.ledgerType === '2') {
+      data.value = [
+        {
+          name: '场站浓度超限',
+          data: res.data.map((item: any) => item['场站浓度超限']),
+        },
+      ]
+    }
+    else if (listQuery.value.ledgerType === '3') {
+      data.value = [
+        {
+          name: '管线浓度超限',
+          data: res.data.map((item: any) => item['管线浓度超限']),
+        },
+      ]
+    }
+    list.value = res.data.map((item: any) => ({
+      date: item.date,
+      well: item['闸井浓度超限'],
+      station: item['场站浓度超限'],
+      pipeline: item['管线浓度超限'],
+    }))
+    columns.value = data.value.map((item: any) => ({
+      text: item.name,
+      value: columnsDict[item.name],
+    }))
+    resizePage()
+    loading.value = false
+  }).catch(() => {
+    loading.value = false
+  })
+}
+onMounted(() => {
+  fetchData()
+})
 </script>
 
 <template>
@@ -56,34 +210,30 @@
     <template #search>
       <div class="search">
         <el-button
-          :class="listQuery.type === 'day' ? 'active' : ''" round size="small"
-          @click="selectTimeType('day')"
-        >
-          今日
-        </el-button>
-        <el-button
-          :class="listQuery.type === 'week' ? 'active' : ''" round size="small"
-          @click="selectTimeType('week')"
+          :class="listQuery.timeType === '2' ? 'active' : ''" round size="small" style="margin: 0 5px;"
+          @click="selectTimeType('2')"
         >
           本周
         </el-button>
         <el-button
-          :class="listQuery.type === 'month' ? 'active' : ''" round size="small"
-          @click="selectTimeType('month')"
+          :class="listQuery.timeType === '3' ? 'active' : ''" round size="small" style="margin: 0 5px;"
+          @click="selectTimeType('3')"
         >
           本月
         </el-button>
-        <el-select v-model="listQuery.keywords" placeholder="全部类别" clearable style="width: 180px;margin: 0 5px;" />
+        <el-select v-model="listQuery.ledgerType" placeholder="全部类别" clearable style="width: 180px;margin: 0 5px;">
+          <el-option v-for="item in ledgerTypeList" :key="item.id" :label="item.name" :value="item.id" />
+        </el-select>
         <dept-select
-          v-model="listQuery.keywords" placeholder="管理单位" :clearable="true"
+          v-model="listQuery.deptid" placeholder="管理单位" :clearable="true"
           style="width: 220px;margin: 0 5px;"
         />
         <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
+          style="width: 380px;margin: 0 5px;" value-format="YYYY-MM-DD HH:mm:ss" range-separator="至"
+          start-placeholder="报警开始时间" end-placeholder="报警结束时间" clearable :shortcuts="shortcuts"
         />
-        <el-button type="primary" style="margin: 0 5px;">
+        <el-button type="primary" style="margin: 0 5px;" @click="fetchData">
           搜索
         </el-button>
       </div>
@@ -94,14 +244,22 @@
           <line-chart
             :x-axis-data="xAxisData" :data="data" :gradient="false"
             :legend="{ itemWidth: 8, itemHeight: 8, type: 'scroll', orient: 'horizontal', icon: 'roundRect', right: '0', top: '10' }"
+            :grid="{
+              top: 50,
+              left: 30,
+              right: 30,
+              bottom: 20,
+              containLabel: true, // 是否包含坐标轴的刻度标签
+            }"
           />
         </div>
         <div class="table">
           <el-table border :data="list" stripe style="width: 100%;" :height="440">
-            <el-table-column label="日期" prop="alarmTime" align="center" />
-            <el-table-column label="闸井浓度超限" prop="wellOver" align="center" />
-            <el-table-column label="场站浓度超限" prop="senceOver" align="center" />
-            <el-table-column label="疑似第三方破坏" prop="thirdParty" align="center" />
+            <el-table-column label="日期" prop="date" align="center" width="190" />
+            <el-table-column
+              v-for="item in columns" :key="item.text" :label="item.text" :prop="item.value"
+              align="center"
+            />
           </el-table>
         </div>
       </div>
diff --git a/src/views/home/alarm/current/components/detail.vue b/src/views/home/alarm/current/components/detail.vue
index 4fb61d3..e200fe3 100644
--- a/src/views/home/alarm/current/components/detail.vue
+++ b/src/views/home/alarm/current/components/detail.vue
@@ -7,6 +7,7 @@
 import dayjs from 'dayjs'
 import { ElMessage } from 'element-plus'
 import { alarmProcessNode, detailAlarm } from '@/api/home/alarm/current'
+import { getAlarmDetail } from '@/api/home/alarm/history'
 import { toHumpObject } from '@/utils/String'
 import { getAlarmLevelListPage, getAlarmTypeListPage } from '@/api/home/rule/alarm'
 import { getDateDiff } from '@/utils/dayjs'
@@ -44,7 +45,7 @@
   },
   {
     text: '报警时间',
-    value: 'ts',
+    value: $route.query.type === 'history' ? 'alarmTime' : 'ts',
     align: 'center',
   },
   {
@@ -89,7 +90,7 @@
   },
   {
     text: '处置时长',
-    value: 'duration',
+    value: $route.query.type === 'history' ? 'cancelDuration' : 'duration',
     align: 'center',
   },
   {
@@ -107,8 +108,8 @@
 const fetchDetail = async () => {
   loading.value = true
   const res1 = await getAlarmLevelListPage({ offset: 1, limit: 9999 })
-  const res2 = await getAlarmTypeListPage({ offset: 1, limit: 9999 })
-  detailAlarm($route.query.id as string).then((res) => {
+  const res2 = await getAlarmTypeListPage({ offset: 1, limit: 9999 });
+  ($route.query.type === 'history' ? getAlarmDetail : detailAlarm)($route.query.id as string).then((res) => {
     detailInfo.value = toHumpObject(res.data)
     detailInfo.value.realAlarmName = detailInfo.value.realAlarm === '1' ? '报警' : '误报'
     detailInfo.value.alarmTypeName = res2.data.rows.filter((item: any) => item.id === detailInfo.value.alarmTypeId)[0]?.alarmType || ''
@@ -183,8 +184,12 @@
           </template>
           <div style="padding: 25px;">
             <el-timeline>
-              <el-timeline-item v-for="(item, index) in alarmDynamics" :key="index" :timestamp="item.approvalTime" type="primary">
-                {{ `${item.approvalPerson}${item.dept_name ? '(' : ''}${item.dept_name}${item.dept_name ? ')' : ''}${item.process_name}` }}
+              <el-timeline-item
+                v-for="(item, index) in alarmDynamics" :key="index" :timestamp="item.approvalTime"
+                type="primary"
+              >
+                {{ `${item.approvalPerson}${item.dept_name ? '(' : ''}${item.dept_name}${item.dept_name ? ')'
+                  : ''}${item.process_name}` }}
               </el-timeline-item>
             </el-timeline>
           </div>
diff --git a/src/views/home/alarm/current/index.vue b/src/views/home/alarm/current/index.vue
index 52b2be1..8b36a01 100644
--- a/src/views/home/alarm/current/index.vue
+++ b/src/views/home/alarm/current/index.vue
@@ -4,10 +4,10 @@
   Date: 2023-06-28
  -->
 <script lang="ts" setup name="CurrentAlarm">
-import { ElMessage } from 'element-plus'
+import { ElMessage, ElMessageBox } from 'element-plus'
 import { ArrowLeftBold, ArrowRightBold } from '@element-plus/icons-vue'
 import MapCom from './components/map.vue'
-import { getCurrentAlarmListPage, viewAlarm } from '@/api/home/alarm/current'
+import { batchDelete, getCurrentAlarmListPage, viewAlarm } from '@/api/home/alarm/current'
 import { getDictByCode } from '@/api/system/dict'
 import { getAlarmLevelListPage, getAlarmTypeListPage } from '@/api/home/rule/alarm'
 import { getDeviceTypeListPage } from '@/api/home/device/type'
@@ -66,6 +66,35 @@
     }
   }
 })
+const shortcuts = [
+  {
+    text: '近一周',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setDate(start.getDate() - 7)
+      return [start, end]
+    },
+  },
+  {
+    text: '近一个月',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setMonth(start.getMonth() - 1)
+      return [start, end]
+    },
+  },
+  {
+    text: '近三个月',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setMonth(start.getMonth() - 3)
+      return [start, end]
+    },
+  },
+]
 // 查询数据
 const fetchData = () => {
   loadingTable.value = true
@@ -140,8 +169,8 @@
 const detail = (row: any) => {
   mapData.value = row
   switchMode('map')
-  row.lngGaode = '116.398043'
-  row.latGaode = '39.901552'
+  // row.lngGaode = '116.398043'
+  // row.latGaode = '39.901552'
   // 绘制点
   const draw = () => {
     mapRef.value.mapRef.removeMarker()
@@ -209,6 +238,35 @@
   })
 }
 fetchDict()
+const { proxy } = getCurrentInstance() as any
+// 多选
+const multipleTable = ref([])
+const handleSelectionChange = (val: any) => {
+  console.log(val, '多选数据')
+  multipleTable.value = val
+}
+// 批量删除
+const batchDeleteRow = () => {
+  if (!multipleTable.value.length) {
+    ElMessage.warning('请先选中数据')
+    return
+  }
+  ElMessageBox.confirm(
+    '确定要删除选中的数据吗？',
+    '确认操作',
+    {
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+      type: 'warning',
+    },
+  ).then(() => {
+    batchDelete(multipleTable.value.map((item: any) => item.id)).then(() => {
+      ElMessage.success('操作成功')
+      multipleTable.value = []
+      fetchData()
+    })
+  })
+}
 </script>
 
 <template>
@@ -255,7 +313,7 @@
       </search-item>
       <search-item>
         <el-date-picker
-          v-model="datetimerange" type="datetimerange" format="YYYY-MM-DD HH:mm:ss"
+          v-model="datetimerange" type="datetimerange" format="YYYY-MM-DD HH:mm:ss" :shortcuts="shortcuts"
           value-format="YYYY-MM-DD HH:mm:ss" range-separator="至" start-placeholder="报警开始时间" end-placeholder="报警结束时间"
           clearable
         />
@@ -274,6 +332,9 @@
           <template #btns-right>
             <!-- 操作 -->
             <div>
+              <el-button v-if="proxy.hasPerm('/alarm/current/delete')" type="primary" @click="batchDeleteRow">
+                批量删除
+              </el-button>
               <el-button type="primary">
                 导出
               </el-button>
@@ -282,7 +343,10 @@
           <!-- 查询结果Table显示 -->
           <normal-table
             :data="list1" :total="total" :columns="columnsConfig" :query="listQuery"
-            :list-loading="loadingTable" :height="tableHeight - 50 - 70" @change="changePage"
+            :list-loading="loadingTable" :height="tableHeight - 50 - 70"
+            :is-multi="proxy.hasPerm('/alarm/current/delete')"
+            :is-showmulti-select="proxy.hasPerm('/alarm/current/delete')" @change="changePage"
+            @multiSelect="handleSelectionChange"
           >
             <template #preColumns>
               <el-table-column label="序号" width="55" align="center">
diff --git a/src/views/home/alarm/history/index.vue b/src/views/home/alarm/history/index.vue
index 87bb167..74ca152 100644
--- a/src/views/home/alarm/history/index.vue
+++ b/src/views/home/alarm/history/index.vue
@@ -80,6 +80,35 @@
     }
   }
 })
+const shortcuts = [
+  {
+    text: '近一周',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setDate(start.getDate() - 7)
+      return [start, end]
+    },
+  },
+  {
+    text: '近一个月',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setMonth(start.getMonth() - 1)
+      return [start, end]
+    },
+  },
+  {
+    text: '近三个月',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setMonth(start.getMonth() - 3)
+      return [start, end]
+    },
+  },
+]
 // 查询数据
 const fetchData = () => {
   loadingTable.value = true
@@ -127,10 +156,11 @@
 const $router = useRouter()
 const moreData = (row: any) => {
   $router.push({
-    name: 'AlarmCurrentDetail',
+    name: 'AlarmHistoryDetail',
     query: {
       id: row.id,
       row: JSON.stringify(row),
+      type: 'history',
     },
   })
 }
@@ -218,7 +248,7 @@
       </search-item>
       <search-item>
         <el-date-picker
-          v-model="datetimerange" type="datetimerange" format="YYYY-MM-DD HH:mm:ss"
+          v-model="datetimerange" type="datetimerange" format="YYYY-MM-DD HH:mm:ss" :shortcuts="shortcuts"
           value-format="YYYY-MM-DD HH:mm:ss" range-separator="至" start-placeholder="报警开始时间" end-placeholder="报警结束时间"
           clearable
         />
diff --git a/src/views/home/device/product/index.vue b/src/views/home/device/product/index.vue
index 1bb3d99..2300270 100644
--- a/src/views/home/device/product/index.vue
+++ b/src/views/home/device/product/index.vue
@@ -21,8 +21,8 @@
   { text: '设备型号', value: 'deviceModel', align: 'center' },
   { text: '厂商', value: 'manufacturerName', align: 'center' },
   { text: '通讯协议', value: 'protocolName', align: 'center' },
-  { text: '接入方式', value: 'accessMethodName', align: 'center' },
-  { text: '创建时间', value: 'ts', align: 'center' },
+  { text: '接入方式', value: 'accessMethodName', align: 'center', width: '140' },
+  { text: '创建时间', value: 'ts', align: 'center', width: '200' },
 ])
 // 最终展示列
 const columnsConfig = ref([])
diff --git a/src/views/home/device/type/index.vue b/src/views/home/device/type/index.vue
index 56d7f65..7df5933 100644
--- a/src/views/home/device/type/index.vue
+++ b/src/views/home/device/type/index.vue
@@ -14,12 +14,12 @@
 const total = ref(0)
 // 初始展示列
 const columns = ref<any>([
-  { text: '设备类型代号', value: 'typeCode', align: 'center' },
+  { text: '设备类型代号', value: 'typeCode', align: 'center', width: '110' },
   { text: '设备类型', value: 'typeName', align: 'center' },
   { text: '描述', value: 'typeDescription', align: 'center' },
   { text: '监测对象', value: 'watchObjectName', align: 'center' },
-  { text: '是否启用', value: 'isUsedName', align: 'center' },
-  { text: '操作时间', value: 'ts', align: 'center' },
+  { text: '是否启用', value: 'isUsedName', align: 'center', width: '110' },
+  { text: '操作时间', value: 'ts', align: 'center', width: '200' },
 ])
 // 最终展示列
 const columnsConfig = ref([])
diff --git a/src/views/home/ledger/ledger/components/wellList.vue b/src/views/home/ledger/ledger/components/wellList.vue
index 61eca63..6e40ede 100644
--- a/src/views/home/ledger/ledger/components/wellList.vue
+++ b/src/views/home/ledger/ledger/components/wellList.vue
@@ -22,12 +22,12 @@
   { text: '位号', value: 'tagNumber', align: 'center', isRequired: true, width: '110' },
   { text: '编号', value: 'ledgerCode', align: 'center', isRequired: true, width: '150' },
   { text: '名称', value: 'ledgerName', align: 'center', isRequired: true },
-  { text: '管理单位', value: 'responsibleDept', align: 'center' },
+  { text: '管理单位', value: 'deptName', align: 'center', width: '160' },
   { text: '详细位置', value: 'position', align: 'center' },
-  { text: '产权单位', value: 'deptName', align: 'center', isRequired: true },
-  { text: '管理方式', value: 'manageTypeName', align: 'center', isRequired: true },
-  { text: '使用状态', value: 'onStateName', align: 'center', isRequired: true },
-  { text: '位置状态', value: 'locationStateName', align: 'center', isRequired: true },
+  { text: '产权单位', value: 'responsibleDeptName', align: 'center', isRequired: true },
+  { text: '管理方式', value: 'manageTypeName', align: 'center', isRequired: true, width: '110' },
+  { text: '使用状态', value: 'onStateName', align: 'center', isRequired: true, width: '110' },
+  { text: '位置状态', value: 'locationStateName', align: 'center', isRequired: true, width: '110' },
 ])
 // 最终展示列
 const columnsConfig = ref([])
diff --git a/src/views/home/ledger/pipeline/index.vue b/src/views/home/ledger/pipeline/index.vue
index 0b1dc59..d56a41c 100644
--- a/src/views/home/ledger/pipeline/index.vue
+++ b/src/views/home/ledger/pipeline/index.vue
@@ -16,13 +16,13 @@
 const columns = ref<any>([
   { text: '管线编号', value: 'pipeCode', align: 'center', isRequired: true },
   { text: '管线位置', value: 'position', align: 'center', isRequired: true },
-  { text: '压力级制', value: 'pressTypeName', align: 'center', isRequired: true },
-  { text: '材质', value: 'material', align: 'center' },
-  { text: '管径(mm)', value: 'pipeDiameter', align: 'center' },
-  { text: '建设年代', value: 'constructEra', align: 'center' },
+  { text: '压力级制', value: 'pressTypeName', align: 'center', isRequired: true, width: '110' },
+  { text: '材质', value: 'material', align: 'center', width: '110' },
+  { text: '管径(mm)', value: 'pipeDiameter', align: 'center', width: '110' },
+  { text: '建设年代', value: 'constructEra', align: 'center', width: '110' },
   { text: '管理单位', value: 'deptName', align: 'center', isRequired: true },
   { text: '产权单位', value: 'propertyOwner', align: 'center', isRequired: true },
-  { text: '管理方式', value: 'manageTypeName', align: 'center', isRequired: true },
+  { text: '管理方式', value: 'manageTypeName', align: 'center', isRequired: true, width: '110' },
 ])
 // 最终展示列
 const columnsConfig = ref([])
diff --git a/src/views/home/ledger/sync/index.vue b/src/views/home/ledger/sync/index.vue
index dee1350..6607896 100644
--- a/src/views/home/ledger/sync/index.vue
+++ b/src/views/home/ledger/sync/index.vue
@@ -13,8 +13,8 @@
 const total = ref(0)
 // 初始展示列
 const columns = ref<any>([
-  { text: '开始时间', value: 'tagNumber', align: 'center', isRequired: true },
-  { text: '结束时间', value: 'ledgerCode', align: 'center', isRequired: true },
+  { text: '开始时间', value: 'tagNumber', align: 'center', isRequired: true, width: '190' },
+  { text: '结束时间', value: 'ledgerCode', align: 'center', isRequired: true, width: '190' },
   { text: '操作人', value: 'ledgerName', align: 'center', isRequired: true },
   { text: '同步类型', value: 'responsibleDept', align: 'center' },
   { text: '同步结果', value: 'position', align: 'center' },
diff --git a/src/views/home/operation/alarm/index.vue b/src/views/home/operation/alarm/index.vue
index ef04fd4..dc0f53c 100644
--- a/src/views/home/operation/alarm/index.vue
+++ b/src/views/home/operation/alarm/index.vue
@@ -17,8 +17,8 @@
   { text: '报警类型', value: 'alarmTypeName', align: 'center' },
   { text: '报警原因', value: 'alarmReason', align: 'center' },
   { text: '管理单位', value: 'deptName', align: 'center' },
-  { text: '状态', value: 'status', align: 'center' },
-  { text: '报警时间', value: 'alarmTime', align: 'center' },
+  { text: '状态', value: 'status', align: 'center', width: '110' },
+  { text: '报警时间', value: 'alarmTime', align: 'center', width: '200' },
 ])
 // 最终展示列
 const columnsConfig = ref([])
diff --git a/src/views/home/operation/manufacturer/index.vue b/src/views/home/operation/manufacturer/index.vue
index f439521..76ce423 100644
--- a/src/views/home/operation/manufacturer/index.vue
+++ b/src/views/home/operation/manufacturer/index.vue
@@ -18,13 +18,13 @@
 const columns = ref<any>([
   { text: '设备编号', value: 'devcode', align: 'center' },
   { text: '设备类型', value: 'deviceTypeName', align: 'center' },
-  { text: '运维类型', value: 'repairTypeName', align: 'center' },
+  { text: '运维类型', value: 'repairTypeName', align: 'center', width: '110' },
   { text: '安装位置', value: 'ledgerNumber', align: 'center' },
   { text: '详细位置', value: 'position', align: 'center' },
   { text: '管理单位', value: '', align: 'center' },
   { text: '运维内容', value: 'repairContent', align: 'center' },
-  { text: '运维人员', value: 'repairPerson', align: 'center' },
-  { text: '维护时间', value: 'finishTime', align: 'center' },
+  { text: '运维人员', value: 'repairPerson', align: 'center', width: '120' },
+  { text: '维护时间', value: 'finishTime', align: 'center', width: '200' },
 ])
 // 最终展示列
 const columnsConfig = ref([])
diff --git a/src/views/home/pipeline/components/detailInfoDialog.vue b/src/views/home/pipeline/components/detailInfoDialog.vue
index 1662e6e..76380ed 100644
--- a/src/views/home/pipeline/components/detailInfoDialog.vue
+++ b/src/views/home/pipeline/components/detailInfoDialog.vue
@@ -153,7 +153,7 @@
     width: 100%;
     display: flex;
     justify-content: space-between;
-    padding: 2px 10px;
+    padding: 8px 10px;
     align-items: center;
     color: #fff;
 
diff --git a/src/views/home/rule/agreement/index.vue b/src/views/home/rule/agreement/index.vue
index 6f2695a..2e6c2a5 100644
--- a/src/views/home/rule/agreement/index.vue
+++ b/src/views/home/rule/agreement/index.vue
@@ -15,10 +15,10 @@
 const columns = ref<any>([
   { text: '协议名称', value: 'protocolName', align: 'center' },
   { text: '协议编码', value: 'protocolCode', align: 'center' },
-  { text: '协议版本', value: 'version', align: 'center' },
+  { text: '协议版本', value: 'version', align: 'center', width: '130' },
   { text: '备注', value: 'description', align: 'center' },
-  { text: '上传地址', value: 'ip', align: 'center' },
-  { text: '创建时间', value: 'ts', align: 'center' },
+  { text: '上传地址', value: 'ip', align: 'center', width: '200' },
+  { text: '创建时间', value: 'ts', align: 'center', width: '200' },
 ])
 // 最终展示列
 const columnsConfig = ref([])
diff --git a/src/views/home/rule/alarm/components/alarmLevelList.vue b/src/views/home/rule/alarm/components/alarmLevelList.vue
index 40c1e43..c8ffb7d 100644
--- a/src/views/home/rule/alarm/components/alarmLevelList.vue
+++ b/src/views/home/rule/alarm/components/alarmLevelList.vue
@@ -29,6 +29,7 @@
 const fetchData = () => {
   loadingTable.value = true
   getAlarmLevelListPage(listQuery.value).then((res) => {
+    list.value = []
     list.value = res.data.rows.map((item: any) => ({
       ...item,
       isSendName: item.isSend === '0' ? '关' : '开',

diff --git a/src/api/home/alarm/count.ts b/src/api/home/alarm/count.ts
index 1f4b59a..d5d9244 100644
--- a/src/api/home/alarm/count.ts
+++ b/src/api/home/alarm/count.ts
@@ -34,3 +34,11 @@
     data,
   })
 }
+// 报警趋势分析
+export function getAlarmTrend(data: any) {
+  return request({
+    url: '/statics/alarmRecords/alarmTrend',
+    method: 'post',
+    data,
+  })
+}
diff --git a/src/api/home/alarm/current.ts b/src/api/home/alarm/current.ts
index ec20f64..ac3387f 100644
--- a/src/api/home/alarm/current.ts
+++ b/src/api/home/alarm/current.ts
@@ -57,3 +57,13 @@
     },
   })
 }
+// 批量删除
+export function batchDelete(ids: any) {
+  return request({
+    url: '/system/alarmRecords/batchDelete',
+    method: 'post',
+    data: {
+      ids,
+    },
+  })
+}
diff --git a/src/api/home/alarm/history.ts b/src/api/home/alarm/history.ts
index 5f55e82..44cf851 100644
--- a/src/api/home/alarm/history.ts
+++ b/src/api/home/alarm/history.ts
@@ -11,3 +11,13 @@
     data,
   })
 }
+// 详情
+export function getAlarmDetail(id: any) {
+  return request({
+    url: '/system/alarmRecords/historyAlarmDetail',
+    method: 'post',
+    data: {
+      id,
+    },
+  })
+}
diff --git a/src/components/Echart/LineChart.vue b/src/components/Echart/LineChart.vue
index 2733161..b811f29 100644
--- a/src/components/Echart/LineChart.vue
+++ b/src/components/Echart/LineChart.vue
@@ -207,7 +207,7 @@
         },
       },
       valueFormatter: (value: string | number) => {
-        return value ? value + props.unit : ''
+        return value ? value + props.unit : value === 0 ? '0' : ''
       },
     }, // 提示框
     xAxis: [
diff --git a/src/router/modules/pc.ts b/src/router/modules/pc.ts
index 9b058fa..f3edac9 100644
--- a/src/router/modules/pc.ts
+++ b/src/router/modules/pc.ts
@@ -94,6 +94,19 @@
         },
       },
       {
+        path: '/history/detail',
+        component: () => import('@/views/home/alarm/current/components/detail.vue'),
+        name: 'AlarmHistoryDetail',
+        meta: {
+          title: '报警详情',
+          icon: 'ep:key',
+          sidebar: false,
+          breadcrumb: true,
+          activeMenu: '/alarm/history',
+          auth: '/alarm/history',
+        },
+      },
+      {
         path: 'count',
         component: () => import('@/views/home/alarm/count/index.vue'),
         name: 'AlarmCount',
diff --git a/src/views/home/alarm/count/components/alarmStatistics.vue b/src/views/home/alarm/count/components/alarmStatistics.vue
index b088de2..7aa930f 100644
--- a/src/views/home/alarm/count/components/alarmStatistics.vue
+++ b/src/views/home/alarm/count/components/alarmStatistics.vue
@@ -34,13 +34,12 @@
     value: '3',
   },
 ])
-const xAxisData = ref([])
-const data = ref([])
+const xAxisData = ref<string[]>([])
+const data = ref<any[]>([])
 const list = ref([])
 const loading = ref(true)
 // 开始结束时间
 const datetimerange = ref()
-// 默认当天
 watch(() => datetimerange.value, (newVal) => {
   listQuery.value.begTime = ''
   listQuery.value.endTime = ''
@@ -51,6 +50,35 @@
     }
   }
 })
+const shortcuts = [
+  {
+    text: '近一周',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setDate(start.getDate() - 7)
+      return [start, end]
+    },
+  },
+  {
+    text: '近一个月',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setMonth(start.getMonth() - 1)
+      return [start, end]
+    },
+  },
+  {
+    text: '近三个月',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setMonth(start.getMonth() - 3)
+      return [start, end]
+    },
+  },
+]
 // setTimeout(() => {
 //   xAxisData.value = [
 //     '闸井浓度超限', '场站浓度超限', '场站火焰报警', '疑似第三方破坏', '场站烟雾报警',
@@ -66,10 +94,25 @@
 //     value: data.value[0].data[index],
 //   }))
 // }, 1000)
+const resizePage = () => {
+  setTimeout(() => {
+    const resize = new Event('resize')
+    window.dispatchEvent(resize)
+  }, 500)
+}
 const fetchData = () => {
   loading.value = true
   getAlarmType(listQuery.value).then((res) => {
-    console.log(res.data, '各类报警统计')
+    // console.log(res.data, '各类报警统计')
+    xAxisData.value = res.data.map((item: any) => item.name)
+    data.value = [
+      {
+        name: '报警数量',
+        data: res.data.map((item: any) => item.value),
+      },
+    ]
+    list.value = res.data
+    resizePage
     loading.value = false
   }).catch(() => {
     loading.value = false
@@ -105,8 +148,8 @@
           style="width: 220px;margin: 0 5px;"
         />
         <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="至"
+          v-model="datetimerange" type="datetimerange" format="YYYY-MM-DD HH:mm:ss" :shortcuts="shortcuts"
+          style="width: 380px;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;" @click="fetchData">
@@ -118,8 +161,8 @@
       <div v-loading="loading" class="alarm-count">
         <div class="bar">
           <bar-chart-vertical
-            v-show="xAxisData.length"
-            :x-axis-data="xAxisData" :bar-coner="0" :data="data" :colors="[]" :bar-width="15"
+            v-show="xAxisData.length" :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' }"
             :grid="{
               top: 50,
@@ -133,7 +176,7 @@
         </div>
         <div class="table">
           <el-table border :data="list" stripe style="width: 100%;" :height="440">
-            <el-table-column label="报警类型" prop="alarmType" align="center" />
+            <el-table-column label="报警类型" prop="name" align="center" />
             <el-table-column label="报警数量" prop="value" align="center" />
           </el-table>
         </div>
diff --git a/src/views/home/alarm/count/components/deptCount.vue b/src/views/home/alarm/count/components/deptCount.vue
index 1ca5482..798bfd2 100644
--- a/src/views/home/alarm/count/components/deptCount.vue
+++ b/src/views/home/alarm/count/components/deptCount.vue
@@ -5,40 +5,123 @@
  -->
 <script lang="ts" setup name="AlarmCount">
 import layout from './layout.vue'
+import { getAlarmCompany } from '@/api/home/alarm/count'
 const listQuery = ref({
-  type: 'day',
+  begTime: '',
+  endTime: '',
+  ledgerType: '',
+  timeType: '1',
 })
 const selectTimeType = (type: string) => {
-  listQuery.value.type = type
+  listQuery.value.timeType = type
 }
+// 开始结束时间
+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 shortcuts = [
+  {
+    text: '近一周',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setDate(start.getDate() - 7)
+      return [start, end]
+    },
+  },
+  {
+    text: '近一个月',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setMonth(start.getMonth() - 1)
+      return [start, end]
+    },
+  },
+  {
+    text: '近三个月',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setMonth(start.getMonth() - 3)
+      return [start, end]
+    },
+  },
+]
+// 类别
+const ledgerTypeList = ref<{ id: string; name: string; value: string }[]>([
+  {
+    name: '闸井',
+    id: '1',
+    value: '1',
+  },
+  {
+    name: '场站',
+    id: '2',
+    value: '2',
+  },
+  {
+    name: '管线',
+    id: '3',
+    value: '3',
+  },
+])
 const xAxisData = ref([])
 const data = ref([])
 const list = ref([])
-setTimeout(() => {
-  xAxisData.value = [
-    '第一分公司', '第二分公司', '第三分公司', '第四分公司', '第五分公司',
-  ]
-  data.value = [
-    {
-      name: '闸井浓度超限',
-      data: [1, 8, 5, 8, 4],
-    },
-    {
-      name: '场站浓度超限',
-      data: [8, 3, 6, 1, 7],
-    },
-    {
-      name: '疑似第三方破坏',
-      data: [4, 7, 5, 9, 4],
-    },
-  ]
-  list.value = xAxisData.value.map((item, index) => ({
-    dept: item,
-    wellOver: data.value[0].data[index],
-    senceOver: data.value[1].data[index],
-    thirdParty: data.value[2].data[index],
-  }))
-}, 1000)
+const loading = ref(true)
+// setTimeout(() => {
+//   xAxisData.value = [
+//     '第一分公司', '第二分公司', '第三分公司', '第四分公司', '第五分公司',
+//   ]
+//   data.value = [
+//     {
+//       name: '闸井浓度超限',
+//       data: [1, 8, 5, 8, 4],
+//     },
+//     {
+//       name: '场站浓度超限',
+//       data: [8, 3, 6, 1, 7],
+//     },
+//     {
+//       name: '疑似第三方破坏',
+//       data: [4, 7, 5, 9, 4],
+//     },
+//   ]
+//   list.value = xAxisData.value.map((item, index) => ({
+//     dept: item,
+//     wellOver: data.value[0].data[index],
+//     senceOver: data.value[1].data[index],
+//     thirdParty: data.value[2].data[index],
+//   }))
+// }, 1000)
+const resizePage = () => {
+  setTimeout(() => {
+    const resize = new Event('resize')
+    window.dispatchEvent(resize)
+  }, 500)
+}
+const fetchData = () => {
+  loading.value = true
+  getAlarmCompany(listQuery.value).then((res) => {
+    console.log(res.data, '各单位报警统计')
+    resizePage()
+    loading.value = false
+  }).catch(() => {
+    loading.value = false
+  })
+}
+onMounted(() => {
+  fetchData()
+})
 </script>
 
 <template>
@@ -47,49 +130,59 @@
     <template #search>
       <div class="search">
         <el-button
-          :class="listQuery.type === 'day' ? 'active' : ''" round size="small"
-          @click="selectTimeType('day')"
+          :class="listQuery.timeType === '1' ? 'active' : ''" round size="small"
+          style="margin: 0 5px;"
+          @click="selectTimeType('1')"
         >
           今日
         </el-button>
         <el-button
-          :class="listQuery.type === 'week' ? 'active' : ''" round size="small"
-          @click="selectTimeType('week')"
+          :class="listQuery.timeType === '2' ? 'active' : ''" round size="small"
+          style="margin: 0 5px;"
+          @click="selectTimeType('2')"
         >
           本周
         </el-button>
         <el-button
-          :class="listQuery.type === 'month' ? 'active' : ''" round size="small"
-          @click="selectTimeType('month')"
+          :class="listQuery.timeType === '3' ? 'active' : ''" round size="small"
+          style="margin: 0 5px;"
+          @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 v-for="item in ledgerTypeList" :key="item.id" :label="item.name" :value="item.id" />
+        </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
+          style="width: 380px;margin: 0 5px;" value-format="YYYY-MM-DD HH:mm:ss" range-separator="至"
+          start-placeholder="报警开始时间" end-placeholder="报警结束时间" clearable :shortcuts="shortcuts"
         />
-        <el-button type="primary" style="margin: 0 5px;">
+        <el-button type="primary" style="margin: 0 5px;" @click="fetchData">
           搜索
         </el-button>
       </div>
     </template>
     <template #content>
-      <div class="alarm-count">
+      <div v-loading="loading" class="alarm-count">
         <div class="bar">
           <bar-chart-vertical
+            v-show="xAxisData.length"
             :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' }"
+            :grid="{
+              top: 50,
+              left: 30,
+              right: 30,
+              bottom: 20,
+              containLabel: true, // 是否包含坐标轴的刻度标签
+            }"
           />
+          <el-empty v-show="!xAxisData.length" description="暂无数据" />
         </div>
         <div class="table">
           <el-table border :data="list" stripe style="width: 100%;" :height="440">
-            <el-table-column label="管理单位" prop="dept" align="center" />
+            <el-table-column label="管理单位" prop="dept" align="center" width="200" />
             <el-table-column label="闸井浓度超限" prop="wellOver" align="center" />
             <el-table-column label="场站浓度超限" prop="senceOver" align="center" />
             <el-table-column label="疑似第三方破坏" prop="thirdParty" align="center" />
diff --git a/src/views/home/alarm/count/components/locationAnalysis.vue b/src/views/home/alarm/count/components/locationAnalysis.vue
index 4265aaf..4cd5921 100644
--- a/src/views/home/alarm/count/components/locationAnalysis.vue
+++ b/src/views/home/alarm/count/components/locationAnalysis.vue
@@ -18,7 +18,7 @@
 // 开始结束时间
 const datetimerange = ref()
 // 默认当天
-datetimerange.value = [`${dayjs().format('YYYY-MM-DD')} 00:00:00`, dayjs().format('YYYY-MM-DD HH:mm:ss')]
+// datetimerange.value = [`${dayjs().format('YYYY-MM-DD')} 00:00:00`, dayjs().format('YYYY-MM-DD HH:mm:ss')]
 watch(() => datetimerange.value, (newVal) => {
   listQuery.value.begTime = ''
   listQuery.value.endTime = ''
@@ -29,6 +29,35 @@
     }
   }
 })
+const shortcuts = [
+  {
+    text: '近一周',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setDate(start.getDate() - 7)
+      return [start, end]
+    },
+  },
+  {
+    text: '近一个月',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setMonth(start.getMonth() - 1)
+      return [start, end]
+    },
+  },
+  {
+    text: '近三个月',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setMonth(start.getMonth() - 3)
+      return [start, end]
+    },
+  },
+]
 const selectTimeType = (type: string) => {
   listQuery.value.timeType = type
 }
@@ -52,13 +81,13 @@
     <!-- 查询条件 -->
     <template #search>
       <div class="search">
-        <el-button :class="listQuery.timeType === '1' ? 'active' : ''" round size="small" @click="selectTimeType('1')">
+        <el-button :class="listQuery.timeType === '1' ? 'active' : ''" round size="small" style="margin: 0 5px;" @click="selectTimeType('1')">
           今日
         </el-button>
-        <el-button :class="listQuery.timeType === '2' ? 'active' : ''" round size="small" @click="selectTimeType('2')">
+        <el-button :class="listQuery.timeType === '2' ? 'active' : ''" round size="small" style="margin: 0 5px;" @click="selectTimeType('2')">
           本周
         </el-button>
-        <el-button :class="listQuery.timeType === '3' ? 'active' : ''" round size="small" @click="selectTimeType('3')">
+        <el-button :class="listQuery.timeType === '3' ? 'active' : ''" round size="small" style="margin: 0 5px;" @click="selectTimeType('3')">
           本月
         </el-button>
         <el-select v-model="listQuery.ledgerType" placeholder="全部类别" clearable style="width: 180px;margin: 0 5px;">
@@ -68,8 +97,8 @@
         </el-select>
         <el-date-picker
           v-model="datetimerange" type="datetimerange" format="YYYY-MM-DD HH:mm:ss"
-          style="width: 360px;margin: 0 5px;" value-format="YYYY-MM-DD HH:mm:ss" range-separator="至"
-          start-placeholder="报警开始时间" end-placeholder="报警结束时间" clearable
+          style="width: 380px;margin: 0 5px;" value-format="YYYY-MM-DD HH:mm:ss" range-separator="至"
+          start-placeholder="报警开始时间" end-placeholder="报警结束时间" clearable :shortcuts="shortcuts"
         />
         <el-button type="primary" style="margin: 0 5px;" @click="fetchData">
           搜索
@@ -80,13 +109,13 @@
       <div class="alarm-count">
         <div class="table">
           <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="type" align="center" width="140" />
+            <el-table-column label="位号" prop="tagNumber" align="center" width="160" />
             <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-column label="标签" prop="marker" align="center" width="140" />
+            <el-table-column label="报警次数" prop="alarmSum" align="center" width="120" />
           </el-table>
         </div>
       </div>
diff --git a/src/views/home/alarm/count/components/trendAnalysis.vue b/src/views/home/alarm/count/components/trendAnalysis.vue
index 73e18b0..18cfb4c 100644
--- a/src/views/home/alarm/count/components/trendAnalysis.vue
+++ b/src/views/home/alarm/count/components/trendAnalysis.vue
@@ -5,49 +5,203 @@
  -->
 <script lang="ts" setup name="TrendAnalysis">
 import layout from './layout.vue'
+import { getAlarmTrend } from '@/api/home/alarm/count'
 const listQuery = ref({
-  type: 'day',
+  timeType: '2',
+  ledgerType: '',
+  endTime: '',
+  begTime: '',
+  deptid: '',
 })
+// 开始结束时间
+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 shortcuts = [
+  {
+    text: '近一周',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setDate(start.getDate() - 7)
+      return [start, end]
+    },
+  },
+  {
+    text: '近一个月',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setMonth(start.getMonth() - 1)
+      return [start, end]
+    },
+  },
+  {
+    text: '近三个月',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setMonth(start.getMonth() - 3)
+      return [start, end]
+    },
+  },
+]
 const selectTimeType = (type: string) => {
-  listQuery.value.type = type
+  listQuery.value.timeType = type
 }
-const xAxisData = ref([])
-const data = ref([])
+const columns = ref<any[]>([
+  {
+    text: '闸井浓度超限',
+    value: 'well',
+  },
+  {
+    text: '场站浓度超限',
+    value: 'station',
+  },
+  {
+    text: '管线浓度超限',
+    value: 'pipeline',
+  },
+])
+// 类别
+const ledgerTypeList = ref<{ id: string; name: string; value: string }[]>([
+  {
+    name: '闸井',
+    id: '1',
+    value: '1',
+  },
+  {
+    name: '场站',
+    id: '2',
+    value: '2',
+  },
+  {
+    name: '管线',
+    id: '3',
+    value: '3',
+  },
+])
+const xAxisData = ref<string[]>([])
+const data = ref<any[]>([])
 const list = ref([])
-setTimeout(() => {
-  xAxisData.value = [
-    '2024-07-01 12:11:12',
-    '2024-07-02 12:11:12',
-    '2024-07-03 12:11:12',
-    '2024-07-04 12:11:12',
-    '2024-07-05 12:11:12',
-    '2024-07-06 12:11:12',
-    '2024-07-07 12:11:12',
-  ]
-  data.value = [
-    {
-      name: '闸井浓度超限',
-      data: [1, 3, 5, 1, 4, 2, 7],
-      symbol: 'emptyCircle',
-    },
-    {
-      name: '场站浓度超限',
-      data: [2, 1, 4, 1, 5, 2, 9],
-      symbol: 'emptyCircle',
-    },
-    {
-      name: '闸井浓度超限',
-      data: [4, 3, 2, 4, 7, 9, 1],
-      symbol: 'emptyCircle',
-    },
-  ]
-  list.value = xAxisData.value.map((item, index) => ({
-    alarmTime: item,
-    wellOver: data.value[0].data[index],
-    senceOver: data.value[1].data[index],
-    thirdParty: data.value[2].data[index],
-  }))
-}, 1000)
+const loading = ref(true)
+// setTimeout(() => {
+//   xAxisData.value = [
+//     '2024-07-01 12:11:12',
+//     '2024-07-02 12:11:12',
+//     '2024-07-03 12:11:12',
+//     '2024-07-04 12:11:12',
+//     '2024-07-05 12:11:12',
+//     '2024-07-06 12:11:12',
+//     '2024-07-07 12:11:12',
+//   ]
+//   data.value = [
+//     {
+//       name: '闸井浓度超限',
+//       data: [1, 3, 5, 1, 4, 2, 7],
+//       symbol: 'emptyCircle',
+//     },
+//     {
+//       name: '场站浓度超限',
+//       data: [2, 1, 4, 1, 5, 2, 9],
+//       symbol: 'emptyCircle',
+//     },
+//     {
+//       name: '闸井浓度超限',
+//       data: [4, 3, 2, 4, 7, 9, 1],
+//       symbol: 'emptyCircle',
+//     },
+//   ]
+//   list.value = xAxisData.value.map((item, index) => ({
+//     alarmTime: item,
+//     wellOver: data.value[0].data[index],
+//     senceOver: data.value[1].data[index],
+//     thirdParty: data.value[2].data[index],
+//   }))
+// }, 1000)
+const resizePage = () => {
+  setTimeout(() => {
+    const resize = new Event('resize')
+    window.dispatchEvent(resize)
+  }, 500)
+}
+const fetchData = () => {
+  loading.value = true
+  const columnsDict = {
+    闸井浓度超限: 'well',
+    场站浓度超限: 'station',
+    管线浓度超限: 'pipeline',
+  } as { [key: string]: string }
+  getAlarmTrend(listQuery.value).then((res) => {
+    console.log(res.data, '报警趋势分析')
+    xAxisData.value = res.data.map((item: any) => item.date)
+    if (!listQuery.value.ledgerType) {
+      data.value = [
+        {
+          name: '闸井浓度超限',
+          data: res.data.map((item: any) => item['闸井浓度超限']),
+        },
+        {
+          name: '场站浓度超限',
+          data: res.data.map((item: any) => item['场站浓度超限']),
+        },
+        {
+          name: '管线浓度超限',
+          data: res.data.map((item: any) => item['管线浓度超限']),
+        },
+      ]
+    }
+    else if (listQuery.value.ledgerType === '1') {
+      data.value = [
+        {
+          name: '闸井浓度超限',
+          data: res.data.map((item: any) => item['闸井浓度超限']),
+        },
+      ]
+    }
+    else if (listQuery.value.ledgerType === '2') {
+      data.value = [
+        {
+          name: '场站浓度超限',
+          data: res.data.map((item: any) => item['场站浓度超限']),
+        },
+      ]
+    }
+    else if (listQuery.value.ledgerType === '3') {
+      data.value = [
+        {
+          name: '管线浓度超限',
+          data: res.data.map((item: any) => item['管线浓度超限']),
+        },
+      ]
+    }
+    list.value = res.data.map((item: any) => ({
+      date: item.date,
+      well: item['闸井浓度超限'],
+      station: item['场站浓度超限'],
+      pipeline: item['管线浓度超限'],
+    }))
+    columns.value = data.value.map((item: any) => ({
+      text: item.name,
+      value: columnsDict[item.name],
+    }))
+    resizePage()
+    loading.value = false
+  }).catch(() => {
+    loading.value = false
+  })
+}
+onMounted(() => {
+  fetchData()
+})
 </script>
 
 <template>
@@ -56,34 +210,30 @@
     <template #search>
       <div class="search">
         <el-button
-          :class="listQuery.type === 'day' ? 'active' : ''" round size="small"
-          @click="selectTimeType('day')"
-        >
-          今日
-        </el-button>
-        <el-button
-          :class="listQuery.type === 'week' ? 'active' : ''" round size="small"
-          @click="selectTimeType('week')"
+          :class="listQuery.timeType === '2' ? 'active' : ''" round size="small" style="margin: 0 5px;"
+          @click="selectTimeType('2')"
         >
           本周
         </el-button>
         <el-button
-          :class="listQuery.type === 'month' ? 'active' : ''" round size="small"
-          @click="selectTimeType('month')"
+          :class="listQuery.timeType === '3' ? 'active' : ''" round size="small" style="margin: 0 5px;"
+          @click="selectTimeType('3')"
         >
           本月
         </el-button>
-        <el-select v-model="listQuery.keywords" placeholder="全部类别" clearable style="width: 180px;margin: 0 5px;" />
+        <el-select v-model="listQuery.ledgerType" placeholder="全部类别" clearable style="width: 180px;margin: 0 5px;">
+          <el-option v-for="item in ledgerTypeList" :key="item.id" :label="item.name" :value="item.id" />
+        </el-select>
         <dept-select
-          v-model="listQuery.keywords" placeholder="管理单位" :clearable="true"
+          v-model="listQuery.deptid" placeholder="管理单位" :clearable="true"
           style="width: 220px;margin: 0 5px;"
         />
         <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
+          style="width: 380px;margin: 0 5px;" value-format="YYYY-MM-DD HH:mm:ss" range-separator="至"
+          start-placeholder="报警开始时间" end-placeholder="报警结束时间" clearable :shortcuts="shortcuts"
         />
-        <el-button type="primary" style="margin: 0 5px;">
+        <el-button type="primary" style="margin: 0 5px;" @click="fetchData">
           搜索
         </el-button>
       </div>
@@ -94,14 +244,22 @@
           <line-chart
             :x-axis-data="xAxisData" :data="data" :gradient="false"
             :legend="{ itemWidth: 8, itemHeight: 8, type: 'scroll', orient: 'horizontal', icon: 'roundRect', right: '0', top: '10' }"
+            :grid="{
+              top: 50,
+              left: 30,
+              right: 30,
+              bottom: 20,
+              containLabel: true, // 是否包含坐标轴的刻度标签
+            }"
           />
         </div>
         <div class="table">
           <el-table border :data="list" stripe style="width: 100%;" :height="440">
-            <el-table-column label="日期" prop="alarmTime" align="center" />
-            <el-table-column label="闸井浓度超限" prop="wellOver" align="center" />
-            <el-table-column label="场站浓度超限" prop="senceOver" align="center" />
-            <el-table-column label="疑似第三方破坏" prop="thirdParty" align="center" />
+            <el-table-column label="日期" prop="date" align="center" width="190" />
+            <el-table-column
+              v-for="item in columns" :key="item.text" :label="item.text" :prop="item.value"
+              align="center"
+            />
           </el-table>
         </div>
       </div>
diff --git a/src/views/home/alarm/current/components/detail.vue b/src/views/home/alarm/current/components/detail.vue
index 4fb61d3..e200fe3 100644
--- a/src/views/home/alarm/current/components/detail.vue
+++ b/src/views/home/alarm/current/components/detail.vue
@@ -7,6 +7,7 @@
 import dayjs from 'dayjs'
 import { ElMessage } from 'element-plus'
 import { alarmProcessNode, detailAlarm } from '@/api/home/alarm/current'
+import { getAlarmDetail } from '@/api/home/alarm/history'
 import { toHumpObject } from '@/utils/String'
 import { getAlarmLevelListPage, getAlarmTypeListPage } from '@/api/home/rule/alarm'
 import { getDateDiff } from '@/utils/dayjs'
@@ -44,7 +45,7 @@
   },
   {
     text: '报警时间',
-    value: 'ts',
+    value: $route.query.type === 'history' ? 'alarmTime' : 'ts',
     align: 'center',
   },
   {
@@ -89,7 +90,7 @@
   },
   {
     text: '处置时长',
-    value: 'duration',
+    value: $route.query.type === 'history' ? 'cancelDuration' : 'duration',
     align: 'center',
   },
   {
@@ -107,8 +108,8 @@
 const fetchDetail = async () => {
   loading.value = true
   const res1 = await getAlarmLevelListPage({ offset: 1, limit: 9999 })
-  const res2 = await getAlarmTypeListPage({ offset: 1, limit: 9999 })
-  detailAlarm($route.query.id as string).then((res) => {
+  const res2 = await getAlarmTypeListPage({ offset: 1, limit: 9999 });
+  ($route.query.type === 'history' ? getAlarmDetail : detailAlarm)($route.query.id as string).then((res) => {
     detailInfo.value = toHumpObject(res.data)
     detailInfo.value.realAlarmName = detailInfo.value.realAlarm === '1' ? '报警' : '误报'
     detailInfo.value.alarmTypeName = res2.data.rows.filter((item: any) => item.id === detailInfo.value.alarmTypeId)[0]?.alarmType || ''
@@ -183,8 +184,12 @@
           </template>
           <div style="padding: 25px;">
             <el-timeline>
-              <el-timeline-item v-for="(item, index) in alarmDynamics" :key="index" :timestamp="item.approvalTime" type="primary">
-                {{ `${item.approvalPerson}${item.dept_name ? '(' : ''}${item.dept_name}${item.dept_name ? ')' : ''}${item.process_name}` }}
+              <el-timeline-item
+                v-for="(item, index) in alarmDynamics" :key="index" :timestamp="item.approvalTime"
+                type="primary"
+              >
+                {{ `${item.approvalPerson}${item.dept_name ? '(' : ''}${item.dept_name}${item.dept_name ? ')'
+                  : ''}${item.process_name}` }}
               </el-timeline-item>
             </el-timeline>
           </div>
diff --git a/src/views/home/alarm/current/index.vue b/src/views/home/alarm/current/index.vue
index 52b2be1..8b36a01 100644
--- a/src/views/home/alarm/current/index.vue
+++ b/src/views/home/alarm/current/index.vue
@@ -4,10 +4,10 @@
   Date: 2023-06-28
  -->
 <script lang="ts" setup name="CurrentAlarm">
-import { ElMessage } from 'element-plus'
+import { ElMessage, ElMessageBox } from 'element-plus'
 import { ArrowLeftBold, ArrowRightBold } from '@element-plus/icons-vue'
 import MapCom from './components/map.vue'
-import { getCurrentAlarmListPage, viewAlarm } from '@/api/home/alarm/current'
+import { batchDelete, getCurrentAlarmListPage, viewAlarm } from '@/api/home/alarm/current'
 import { getDictByCode } from '@/api/system/dict'
 import { getAlarmLevelListPage, getAlarmTypeListPage } from '@/api/home/rule/alarm'
 import { getDeviceTypeListPage } from '@/api/home/device/type'
@@ -66,6 +66,35 @@
     }
   }
 })
+const shortcuts = [
+  {
+    text: '近一周',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setDate(start.getDate() - 7)
+      return [start, end]
+    },
+  },
+  {
+    text: '近一个月',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setMonth(start.getMonth() - 1)
+      return [start, end]
+    },
+  },
+  {
+    text: '近三个月',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setMonth(start.getMonth() - 3)
+      return [start, end]
+    },
+  },
+]
 // 查询数据
 const fetchData = () => {
   loadingTable.value = true
@@ -140,8 +169,8 @@
 const detail = (row: any) => {
   mapData.value = row
   switchMode('map')
-  row.lngGaode = '116.398043'
-  row.latGaode = '39.901552'
+  // row.lngGaode = '116.398043'
+  // row.latGaode = '39.901552'
   // 绘制点
   const draw = () => {
     mapRef.value.mapRef.removeMarker()
@@ -209,6 +238,35 @@
   })
 }
 fetchDict()
+const { proxy } = getCurrentInstance() as any
+// 多选
+const multipleTable = ref([])
+const handleSelectionChange = (val: any) => {
+  console.log(val, '多选数据')
+  multipleTable.value = val
+}
+// 批量删除
+const batchDeleteRow = () => {
+  if (!multipleTable.value.length) {
+    ElMessage.warning('请先选中数据')
+    return
+  }
+  ElMessageBox.confirm(
+    '确定要删除选中的数据吗？',
+    '确认操作',
+    {
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+      type: 'warning',
+    },
+  ).then(() => {
+    batchDelete(multipleTable.value.map((item: any) => item.id)).then(() => {
+      ElMessage.success('操作成功')
+      multipleTable.value = []
+      fetchData()
+    })
+  })
+}
 </script>
 
 <template>
@@ -255,7 +313,7 @@
       </search-item>
       <search-item>
         <el-date-picker
-          v-model="datetimerange" type="datetimerange" format="YYYY-MM-DD HH:mm:ss"
+          v-model="datetimerange" type="datetimerange" format="YYYY-MM-DD HH:mm:ss" :shortcuts="shortcuts"
           value-format="YYYY-MM-DD HH:mm:ss" range-separator="至" start-placeholder="报警开始时间" end-placeholder="报警结束时间"
           clearable
         />
@@ -274,6 +332,9 @@
           <template #btns-right>
             <!-- 操作 -->
             <div>
+              <el-button v-if="proxy.hasPerm('/alarm/current/delete')" type="primary" @click="batchDeleteRow">
+                批量删除
+              </el-button>
               <el-button type="primary">
                 导出
               </el-button>
@@ -282,7 +343,10 @@
           <!-- 查询结果Table显示 -->
           <normal-table
             :data="list1" :total="total" :columns="columnsConfig" :query="listQuery"
-            :list-loading="loadingTable" :height="tableHeight - 50 - 70" @change="changePage"
+            :list-loading="loadingTable" :height="tableHeight - 50 - 70"
+            :is-multi="proxy.hasPerm('/alarm/current/delete')"
+            :is-showmulti-select="proxy.hasPerm('/alarm/current/delete')" @change="changePage"
+            @multiSelect="handleSelectionChange"
           >
             <template #preColumns>
               <el-table-column label="序号" width="55" align="center">
diff --git a/src/views/home/alarm/history/index.vue b/src/views/home/alarm/history/index.vue
index 87bb167..74ca152 100644
--- a/src/views/home/alarm/history/index.vue
+++ b/src/views/home/alarm/history/index.vue
@@ -80,6 +80,35 @@
     }
   }
 })
+const shortcuts = [
+  {
+    text: '近一周',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setDate(start.getDate() - 7)
+      return [start, end]
+    },
+  },
+  {
+    text: '近一个月',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setMonth(start.getMonth() - 1)
+      return [start, end]
+    },
+  },
+  {
+    text: '近三个月',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setMonth(start.getMonth() - 3)
+      return [start, end]
+    },
+  },
+]
 // 查询数据
 const fetchData = () => {
   loadingTable.value = true
@@ -127,10 +156,11 @@
 const $router = useRouter()
 const moreData = (row: any) => {
   $router.push({
-    name: 'AlarmCurrentDetail',
+    name: 'AlarmHistoryDetail',
     query: {
       id: row.id,
       row: JSON.stringify(row),
+      type: 'history',
     },
   })
 }
@@ -218,7 +248,7 @@
       </search-item>
       <search-item>
         <el-date-picker
-          v-model="datetimerange" type="datetimerange" format="YYYY-MM-DD HH:mm:ss"
+          v-model="datetimerange" type="datetimerange" format="YYYY-MM-DD HH:mm:ss" :shortcuts="shortcuts"
           value-format="YYYY-MM-DD HH:mm:ss" range-separator="至" start-placeholder="报警开始时间" end-placeholder="报警结束时间"
           clearable
         />
diff --git a/src/views/home/device/product/index.vue b/src/views/home/device/product/index.vue
index 1bb3d99..2300270 100644
--- a/src/views/home/device/product/index.vue
+++ b/src/views/home/device/product/index.vue
@@ -21,8 +21,8 @@
   { text: '设备型号', value: 'deviceModel', align: 'center' },
   { text: '厂商', value: 'manufacturerName', align: 'center' },
   { text: '通讯协议', value: 'protocolName', align: 'center' },
-  { text: '接入方式', value: 'accessMethodName', align: 'center' },
-  { text: '创建时间', value: 'ts', align: 'center' },
+  { text: '接入方式', value: 'accessMethodName', align: 'center', width: '140' },
+  { text: '创建时间', value: 'ts', align: 'center', width: '200' },
 ])
 // 最终展示列
 const columnsConfig = ref([])
diff --git a/src/views/home/device/type/index.vue b/src/views/home/device/type/index.vue
index 56d7f65..7df5933 100644
--- a/src/views/home/device/type/index.vue
+++ b/src/views/home/device/type/index.vue
@@ -14,12 +14,12 @@
 const total = ref(0)
 // 初始展示列
 const columns = ref<any>([
-  { text: '设备类型代号', value: 'typeCode', align: 'center' },
+  { text: '设备类型代号', value: 'typeCode', align: 'center', width: '110' },
   { text: '设备类型', value: 'typeName', align: 'center' },
   { text: '描述', value: 'typeDescription', align: 'center' },
   { text: '监测对象', value: 'watchObjectName', align: 'center' },
-  { text: '是否启用', value: 'isUsedName', align: 'center' },
-  { text: '操作时间', value: 'ts', align: 'center' },
+  { text: '是否启用', value: 'isUsedName', align: 'center', width: '110' },
+  { text: '操作时间', value: 'ts', align: 'center', width: '200' },
 ])
 // 最终展示列
 const columnsConfig = ref([])
diff --git a/src/views/home/ledger/ledger/components/wellList.vue b/src/views/home/ledger/ledger/components/wellList.vue
index 61eca63..6e40ede 100644
--- a/src/views/home/ledger/ledger/components/wellList.vue
+++ b/src/views/home/ledger/ledger/components/wellList.vue
@@ -22,12 +22,12 @@
   { text: '位号', value: 'tagNumber', align: 'center', isRequired: true, width: '110' },
   { text: '编号', value: 'ledgerCode', align: 'center', isRequired: true, width: '150' },
   { text: '名称', value: 'ledgerName', align: 'center', isRequired: true },
-  { text: '管理单位', value: 'responsibleDept', align: 'center' },
+  { text: '管理单位', value: 'deptName', align: 'center', width: '160' },
   { text: '详细位置', value: 'position', align: 'center' },
-  { text: '产权单位', value: 'deptName', align: 'center', isRequired: true },
-  { text: '管理方式', value: 'manageTypeName', align: 'center', isRequired: true },
-  { text: '使用状态', value: 'onStateName', align: 'center', isRequired: true },
-  { text: '位置状态', value: 'locationStateName', align: 'center', isRequired: true },
+  { text: '产权单位', value: 'responsibleDeptName', align: 'center', isRequired: true },
+  { text: '管理方式', value: 'manageTypeName', align: 'center', isRequired: true, width: '110' },
+  { text: '使用状态', value: 'onStateName', align: 'center', isRequired: true, width: '110' },
+  { text: '位置状态', value: 'locationStateName', align: 'center', isRequired: true, width: '110' },
 ])
 // 最终展示列
 const columnsConfig = ref([])
diff --git a/src/views/home/ledger/pipeline/index.vue b/src/views/home/ledger/pipeline/index.vue
index 0b1dc59..d56a41c 100644
--- a/src/views/home/ledger/pipeline/index.vue
+++ b/src/views/home/ledger/pipeline/index.vue
@@ -16,13 +16,13 @@
 const columns = ref<any>([
   { text: '管线编号', value: 'pipeCode', align: 'center', isRequired: true },
   { text: '管线位置', value: 'position', align: 'center', isRequired: true },
-  { text: '压力级制', value: 'pressTypeName', align: 'center', isRequired: true },
-  { text: '材质', value: 'material', align: 'center' },
-  { text: '管径(mm)', value: 'pipeDiameter', align: 'center' },
-  { text: '建设年代', value: 'constructEra', align: 'center' },
+  { text: '压力级制', value: 'pressTypeName', align: 'center', isRequired: true, width: '110' },
+  { text: '材质', value: 'material', align: 'center', width: '110' },
+  { text: '管径(mm)', value: 'pipeDiameter', align: 'center', width: '110' },
+  { text: '建设年代', value: 'constructEra', align: 'center', width: '110' },
   { text: '管理单位', value: 'deptName', align: 'center', isRequired: true },
   { text: '产权单位', value: 'propertyOwner', align: 'center', isRequired: true },
-  { text: '管理方式', value: 'manageTypeName', align: 'center', isRequired: true },
+  { text: '管理方式', value: 'manageTypeName', align: 'center', isRequired: true, width: '110' },
 ])
 // 最终展示列
 const columnsConfig = ref([])
diff --git a/src/views/home/ledger/sync/index.vue b/src/views/home/ledger/sync/index.vue
index dee1350..6607896 100644
--- a/src/views/home/ledger/sync/index.vue
+++ b/src/views/home/ledger/sync/index.vue
@@ -13,8 +13,8 @@
 const total = ref(0)
 // 初始展示列
 const columns = ref<any>([
-  { text: '开始时间', value: 'tagNumber', align: 'center', isRequired: true },
-  { text: '结束时间', value: 'ledgerCode', align: 'center', isRequired: true },
+  { text: '开始时间', value: 'tagNumber', align: 'center', isRequired: true, width: '190' },
+  { text: '结束时间', value: 'ledgerCode', align: 'center', isRequired: true, width: '190' },
   { text: '操作人', value: 'ledgerName', align: 'center', isRequired: true },
   { text: '同步类型', value: 'responsibleDept', align: 'center' },
   { text: '同步结果', value: 'position', align: 'center' },
diff --git a/src/views/home/operation/alarm/index.vue b/src/views/home/operation/alarm/index.vue
index ef04fd4..dc0f53c 100644
--- a/src/views/home/operation/alarm/index.vue
+++ b/src/views/home/operation/alarm/index.vue
@@ -17,8 +17,8 @@
   { text: '报警类型', value: 'alarmTypeName', align: 'center' },
   { text: '报警原因', value: 'alarmReason', align: 'center' },
   { text: '管理单位', value: 'deptName', align: 'center' },
-  { text: '状态', value: 'status', align: 'center' },
-  { text: '报警时间', value: 'alarmTime', align: 'center' },
+  { text: '状态', value: 'status', align: 'center', width: '110' },
+  { text: '报警时间', value: 'alarmTime', align: 'center', width: '200' },
 ])
 // 最终展示列
 const columnsConfig = ref([])
diff --git a/src/views/home/operation/manufacturer/index.vue b/src/views/home/operation/manufacturer/index.vue
index f439521..76ce423 100644
--- a/src/views/home/operation/manufacturer/index.vue
+++ b/src/views/home/operation/manufacturer/index.vue
@@ -18,13 +18,13 @@
 const columns = ref<any>([
   { text: '设备编号', value: 'devcode', align: 'center' },
   { text: '设备类型', value: 'deviceTypeName', align: 'center' },
-  { text: '运维类型', value: 'repairTypeName', align: 'center' },
+  { text: '运维类型', value: 'repairTypeName', align: 'center', width: '110' },
   { text: '安装位置', value: 'ledgerNumber', align: 'center' },
   { text: '详细位置', value: 'position', align: 'center' },
   { text: '管理单位', value: '', align: 'center' },
   { text: '运维内容', value: 'repairContent', align: 'center' },
-  { text: '运维人员', value: 'repairPerson', align: 'center' },
-  { text: '维护时间', value: 'finishTime', align: 'center' },
+  { text: '运维人员', value: 'repairPerson', align: 'center', width: '120' },
+  { text: '维护时间', value: 'finishTime', align: 'center', width: '200' },
 ])
 // 最终展示列
 const columnsConfig = ref([])
diff --git a/src/views/home/pipeline/components/detailInfoDialog.vue b/src/views/home/pipeline/components/detailInfoDialog.vue
index 1662e6e..76380ed 100644
--- a/src/views/home/pipeline/components/detailInfoDialog.vue
+++ b/src/views/home/pipeline/components/detailInfoDialog.vue
@@ -153,7 +153,7 @@
     width: 100%;
     display: flex;
     justify-content: space-between;
-    padding: 2px 10px;
+    padding: 8px 10px;
     align-items: center;
     color: #fff;
 
diff --git a/src/views/home/rule/agreement/index.vue b/src/views/home/rule/agreement/index.vue
index 6f2695a..2e6c2a5 100644
--- a/src/views/home/rule/agreement/index.vue
+++ b/src/views/home/rule/agreement/index.vue
@@ -15,10 +15,10 @@
 const columns = ref<any>([
   { text: '协议名称', value: 'protocolName', align: 'center' },
   { text: '协议编码', value: 'protocolCode', align: 'center' },
-  { text: '协议版本', value: 'version', align: 'center' },
+  { text: '协议版本', value: 'version', align: 'center', width: '130' },
   { text: '备注', value: 'description', align: 'center' },
-  { text: '上传地址', value: 'ip', align: 'center' },
-  { text: '创建时间', value: 'ts', align: 'center' },
+  { text: '上传地址', value: 'ip', align: 'center', width: '200' },
+  { text: '创建时间', value: 'ts', align: 'center', width: '200' },
 ])
 // 最终展示列
 const columnsConfig = ref([])
diff --git a/src/views/home/rule/alarm/components/alarmLevelList.vue b/src/views/home/rule/alarm/components/alarmLevelList.vue
index 40c1e43..c8ffb7d 100644
--- a/src/views/home/rule/alarm/components/alarmLevelList.vue
+++ b/src/views/home/rule/alarm/components/alarmLevelList.vue
@@ -29,6 +29,7 @@
 const fetchData = () => {
   loadingTable.value = true
   getAlarmLevelListPage(listQuery.value).then((res) => {
+    list.value = []
     list.value = res.data.rows.map((item: any) => ({
       ...item,
       isSendName: item.isSend === '0' ? '关' : '开',
diff --git a/src/views/home/rule/alarm/components/alarmTypeList.vue b/src/views/home/rule/alarm/components/alarmTypeList.vue
index f3bc573..2cbf110 100644
--- a/src/views/home/rule/alarm/components/alarmTypeList.vue
+++ b/src/views/home/rule/alarm/components/alarmTypeList.vue
@@ -27,7 +27,9 @@
 const fetchData = () => {
   loadingTable.value = true
   getAlarmTypeListPage(listQuery.value).then((res) => {
+    list.value = []
     list.value = res.data.rows
+    console.log(res.data.rows, 'res.data.rows')
     total.value = res.data.total
     loadingTable.value = false
   }).catch(() => {

diff --git a/src/api/home/alarm/count.ts b/src/api/home/alarm/count.ts
index 1f4b59a..d5d9244 100644
--- a/src/api/home/alarm/count.ts
+++ b/src/api/home/alarm/count.ts
@@ -34,3 +34,11 @@
     data,
   })
 }
+// 报警趋势分析
+export function getAlarmTrend(data: any) {
+  return request({
+    url: '/statics/alarmRecords/alarmTrend',
+    method: 'post',
+    data,
+  })
+}
diff --git a/src/api/home/alarm/current.ts b/src/api/home/alarm/current.ts
index ec20f64..ac3387f 100644
--- a/src/api/home/alarm/current.ts
+++ b/src/api/home/alarm/current.ts
@@ -57,3 +57,13 @@
     },
   })
 }
+// 批量删除
+export function batchDelete(ids: any) {
+  return request({
+    url: '/system/alarmRecords/batchDelete',
+    method: 'post',
+    data: {
+      ids,
+    },
+  })
+}
diff --git a/src/api/home/alarm/history.ts b/src/api/home/alarm/history.ts
index 5f55e82..44cf851 100644
--- a/src/api/home/alarm/history.ts
+++ b/src/api/home/alarm/history.ts
@@ -11,3 +11,13 @@
     data,
   })
 }
+// 详情
+export function getAlarmDetail(id: any) {
+  return request({
+    url: '/system/alarmRecords/historyAlarmDetail',
+    method: 'post',
+    data: {
+      id,
+    },
+  })
+}
diff --git a/src/components/Echart/LineChart.vue b/src/components/Echart/LineChart.vue
index 2733161..b811f29 100644
--- a/src/components/Echart/LineChart.vue
+++ b/src/components/Echart/LineChart.vue
@@ -207,7 +207,7 @@
         },
       },
       valueFormatter: (value: string | number) => {
-        return value ? value + props.unit : ''
+        return value ? value + props.unit : value === 0 ? '0' : ''
       },
     }, // 提示框
     xAxis: [
diff --git a/src/router/modules/pc.ts b/src/router/modules/pc.ts
index 9b058fa..f3edac9 100644
--- a/src/router/modules/pc.ts
+++ b/src/router/modules/pc.ts
@@ -94,6 +94,19 @@
         },
       },
       {
+        path: '/history/detail',
+        component: () => import('@/views/home/alarm/current/components/detail.vue'),
+        name: 'AlarmHistoryDetail',
+        meta: {
+          title: '报警详情',
+          icon: 'ep:key',
+          sidebar: false,
+          breadcrumb: true,
+          activeMenu: '/alarm/history',
+          auth: '/alarm/history',
+        },
+      },
+      {
         path: 'count',
         component: () => import('@/views/home/alarm/count/index.vue'),
         name: 'AlarmCount',
diff --git a/src/views/home/alarm/count/components/alarmStatistics.vue b/src/views/home/alarm/count/components/alarmStatistics.vue
index b088de2..7aa930f 100644
--- a/src/views/home/alarm/count/components/alarmStatistics.vue
+++ b/src/views/home/alarm/count/components/alarmStatistics.vue
@@ -34,13 +34,12 @@
     value: '3',
   },
 ])
-const xAxisData = ref([])
-const data = ref([])
+const xAxisData = ref<string[]>([])
+const data = ref<any[]>([])
 const list = ref([])
 const loading = ref(true)
 // 开始结束时间
 const datetimerange = ref()
-// 默认当天
 watch(() => datetimerange.value, (newVal) => {
   listQuery.value.begTime = ''
   listQuery.value.endTime = ''
@@ -51,6 +50,35 @@
     }
   }
 })
+const shortcuts = [
+  {
+    text: '近一周',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setDate(start.getDate() - 7)
+      return [start, end]
+    },
+  },
+  {
+    text: '近一个月',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setMonth(start.getMonth() - 1)
+      return [start, end]
+    },
+  },
+  {
+    text: '近三个月',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setMonth(start.getMonth() - 3)
+      return [start, end]
+    },
+  },
+]
 // setTimeout(() => {
 //   xAxisData.value = [
 //     '闸井浓度超限', '场站浓度超限', '场站火焰报警', '疑似第三方破坏', '场站烟雾报警',
@@ -66,10 +94,25 @@
 //     value: data.value[0].data[index],
 //   }))
 // }, 1000)
+const resizePage = () => {
+  setTimeout(() => {
+    const resize = new Event('resize')
+    window.dispatchEvent(resize)
+  }, 500)
+}
 const fetchData = () => {
   loading.value = true
   getAlarmType(listQuery.value).then((res) => {
-    console.log(res.data, '各类报警统计')
+    // console.log(res.data, '各类报警统计')
+    xAxisData.value = res.data.map((item: any) => item.name)
+    data.value = [
+      {
+        name: '报警数量',
+        data: res.data.map((item: any) => item.value),
+      },
+    ]
+    list.value = res.data
+    resizePage
     loading.value = false
   }).catch(() => {
     loading.value = false
@@ -105,8 +148,8 @@
           style="width: 220px;margin: 0 5px;"
         />
         <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="至"
+          v-model="datetimerange" type="datetimerange" format="YYYY-MM-DD HH:mm:ss" :shortcuts="shortcuts"
+          style="width: 380px;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;" @click="fetchData">
@@ -118,8 +161,8 @@
       <div v-loading="loading" class="alarm-count">
         <div class="bar">
           <bar-chart-vertical
-            v-show="xAxisData.length"
-            :x-axis-data="xAxisData" :bar-coner="0" :data="data" :colors="[]" :bar-width="15"
+            v-show="xAxisData.length" :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' }"
             :grid="{
               top: 50,
@@ -133,7 +176,7 @@
         </div>
         <div class="table">
           <el-table border :data="list" stripe style="width: 100%;" :height="440">
-            <el-table-column label="报警类型" prop="alarmType" align="center" />
+            <el-table-column label="报警类型" prop="name" align="center" />
             <el-table-column label="报警数量" prop="value" align="center" />
           </el-table>
         </div>
diff --git a/src/views/home/alarm/count/components/deptCount.vue b/src/views/home/alarm/count/components/deptCount.vue
index 1ca5482..798bfd2 100644
--- a/src/views/home/alarm/count/components/deptCount.vue
+++ b/src/views/home/alarm/count/components/deptCount.vue
@@ -5,40 +5,123 @@
  -->
 <script lang="ts" setup name="AlarmCount">
 import layout from './layout.vue'
+import { getAlarmCompany } from '@/api/home/alarm/count'
 const listQuery = ref({
-  type: 'day',
+  begTime: '',
+  endTime: '',
+  ledgerType: '',
+  timeType: '1',
 })
 const selectTimeType = (type: string) => {
-  listQuery.value.type = type
+  listQuery.value.timeType = type
 }
+// 开始结束时间
+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 shortcuts = [
+  {
+    text: '近一周',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setDate(start.getDate() - 7)
+      return [start, end]
+    },
+  },
+  {
+    text: '近一个月',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setMonth(start.getMonth() - 1)
+      return [start, end]
+    },
+  },
+  {
+    text: '近三个月',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setMonth(start.getMonth() - 3)
+      return [start, end]
+    },
+  },
+]
+// 类别
+const ledgerTypeList = ref<{ id: string; name: string; value: string }[]>([
+  {
+    name: '闸井',
+    id: '1',
+    value: '1',
+  },
+  {
+    name: '场站',
+    id: '2',
+    value: '2',
+  },
+  {
+    name: '管线',
+    id: '3',
+    value: '3',
+  },
+])
 const xAxisData = ref([])
 const data = ref([])
 const list = ref([])
-setTimeout(() => {
-  xAxisData.value = [
-    '第一分公司', '第二分公司', '第三分公司', '第四分公司', '第五分公司',
-  ]
-  data.value = [
-    {
-      name: '闸井浓度超限',
-      data: [1, 8, 5, 8, 4],
-    },
-    {
-      name: '场站浓度超限',
-      data: [8, 3, 6, 1, 7],
-    },
-    {
-      name: '疑似第三方破坏',
-      data: [4, 7, 5, 9, 4],
-    },
-  ]
-  list.value = xAxisData.value.map((item, index) => ({
-    dept: item,
-    wellOver: data.value[0].data[index],
-    senceOver: data.value[1].data[index],
-    thirdParty: data.value[2].data[index],
-  }))
-}, 1000)
+const loading = ref(true)
+// setTimeout(() => {
+//   xAxisData.value = [
+//     '第一分公司', '第二分公司', '第三分公司', '第四分公司', '第五分公司',
+//   ]
+//   data.value = [
+//     {
+//       name: '闸井浓度超限',
+//       data: [1, 8, 5, 8, 4],
+//     },
+//     {
+//       name: '场站浓度超限',
+//       data: [8, 3, 6, 1, 7],
+//     },
+//     {
+//       name: '疑似第三方破坏',
+//       data: [4, 7, 5, 9, 4],
+//     },
+//   ]
+//   list.value = xAxisData.value.map((item, index) => ({
+//     dept: item,
+//     wellOver: data.value[0].data[index],
+//     senceOver: data.value[1].data[index],
+//     thirdParty: data.value[2].data[index],
+//   }))
+// }, 1000)
+const resizePage = () => {
+  setTimeout(() => {
+    const resize = new Event('resize')
+    window.dispatchEvent(resize)
+  }, 500)
+}
+const fetchData = () => {
+  loading.value = true
+  getAlarmCompany(listQuery.value).then((res) => {
+    console.log(res.data, '各单位报警统计')
+    resizePage()
+    loading.value = false
+  }).catch(() => {
+    loading.value = false
+  })
+}
+onMounted(() => {
+  fetchData()
+})
 </script>
 
 <template>
@@ -47,49 +130,59 @@
     <template #search>
       <div class="search">
         <el-button
-          :class="listQuery.type === 'day' ? 'active' : ''" round size="small"
-          @click="selectTimeType('day')"
+          :class="listQuery.timeType === '1' ? 'active' : ''" round size="small"
+          style="margin: 0 5px;"
+          @click="selectTimeType('1')"
         >
           今日
         </el-button>
         <el-button
-          :class="listQuery.type === 'week' ? 'active' : ''" round size="small"
-          @click="selectTimeType('week')"
+          :class="listQuery.timeType === '2' ? 'active' : ''" round size="small"
+          style="margin: 0 5px;"
+          @click="selectTimeType('2')"
         >
           本周
         </el-button>
         <el-button
-          :class="listQuery.type === 'month' ? 'active' : ''" round size="small"
-          @click="selectTimeType('month')"
+          :class="listQuery.timeType === '3' ? 'active' : ''" round size="small"
+          style="margin: 0 5px;"
+          @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 v-for="item in ledgerTypeList" :key="item.id" :label="item.name" :value="item.id" />
+        </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
+          style="width: 380px;margin: 0 5px;" value-format="YYYY-MM-DD HH:mm:ss" range-separator="至"
+          start-placeholder="报警开始时间" end-placeholder="报警结束时间" clearable :shortcuts="shortcuts"
         />
-        <el-button type="primary" style="margin: 0 5px;">
+        <el-button type="primary" style="margin: 0 5px;" @click="fetchData">
           搜索
         </el-button>
       </div>
     </template>
     <template #content>
-      <div class="alarm-count">
+      <div v-loading="loading" class="alarm-count">
         <div class="bar">
           <bar-chart-vertical
+            v-show="xAxisData.length"
             :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' }"
+            :grid="{
+              top: 50,
+              left: 30,
+              right: 30,
+              bottom: 20,
+              containLabel: true, // 是否包含坐标轴的刻度标签
+            }"
           />
+          <el-empty v-show="!xAxisData.length" description="暂无数据" />
         </div>
         <div class="table">
           <el-table border :data="list" stripe style="width: 100%;" :height="440">
-            <el-table-column label="管理单位" prop="dept" align="center" />
+            <el-table-column label="管理单位" prop="dept" align="center" width="200" />
             <el-table-column label="闸井浓度超限" prop="wellOver" align="center" />
             <el-table-column label="场站浓度超限" prop="senceOver" align="center" />
             <el-table-column label="疑似第三方破坏" prop="thirdParty" align="center" />
diff --git a/src/views/home/alarm/count/components/locationAnalysis.vue b/src/views/home/alarm/count/components/locationAnalysis.vue
index 4265aaf..4cd5921 100644
--- a/src/views/home/alarm/count/components/locationAnalysis.vue
+++ b/src/views/home/alarm/count/components/locationAnalysis.vue
@@ -18,7 +18,7 @@
 // 开始结束时间
 const datetimerange = ref()
 // 默认当天
-datetimerange.value = [`${dayjs().format('YYYY-MM-DD')} 00:00:00`, dayjs().format('YYYY-MM-DD HH:mm:ss')]
+// datetimerange.value = [`${dayjs().format('YYYY-MM-DD')} 00:00:00`, dayjs().format('YYYY-MM-DD HH:mm:ss')]
 watch(() => datetimerange.value, (newVal) => {
   listQuery.value.begTime = ''
   listQuery.value.endTime = ''
@@ -29,6 +29,35 @@
     }
   }
 })
+const shortcuts = [
+  {
+    text: '近一周',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setDate(start.getDate() - 7)
+      return [start, end]
+    },
+  },
+  {
+    text: '近一个月',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setMonth(start.getMonth() - 1)
+      return [start, end]
+    },
+  },
+  {
+    text: '近三个月',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setMonth(start.getMonth() - 3)
+      return [start, end]
+    },
+  },
+]
 const selectTimeType = (type: string) => {
   listQuery.value.timeType = type
 }
@@ -52,13 +81,13 @@
     <!-- 查询条件 -->
     <template #search>
       <div class="search">
-        <el-button :class="listQuery.timeType === '1' ? 'active' : ''" round size="small" @click="selectTimeType('1')">
+        <el-button :class="listQuery.timeType === '1' ? 'active' : ''" round size="small" style="margin: 0 5px;" @click="selectTimeType('1')">
           今日
         </el-button>
-        <el-button :class="listQuery.timeType === '2' ? 'active' : ''" round size="small" @click="selectTimeType('2')">
+        <el-button :class="listQuery.timeType === '2' ? 'active' : ''" round size="small" style="margin: 0 5px;" @click="selectTimeType('2')">
           本周
         </el-button>
-        <el-button :class="listQuery.timeType === '3' ? 'active' : ''" round size="small" @click="selectTimeType('3')">
+        <el-button :class="listQuery.timeType === '3' ? 'active' : ''" round size="small" style="margin: 0 5px;" @click="selectTimeType('3')">
           本月
         </el-button>
         <el-select v-model="listQuery.ledgerType" placeholder="全部类别" clearable style="width: 180px;margin: 0 5px;">
@@ -68,8 +97,8 @@
         </el-select>
         <el-date-picker
           v-model="datetimerange" type="datetimerange" format="YYYY-MM-DD HH:mm:ss"
-          style="width: 360px;margin: 0 5px;" value-format="YYYY-MM-DD HH:mm:ss" range-separator="至"
-          start-placeholder="报警开始时间" end-placeholder="报警结束时间" clearable
+          style="width: 380px;margin: 0 5px;" value-format="YYYY-MM-DD HH:mm:ss" range-separator="至"
+          start-placeholder="报警开始时间" end-placeholder="报警结束时间" clearable :shortcuts="shortcuts"
         />
         <el-button type="primary" style="margin: 0 5px;" @click="fetchData">
           搜索
@@ -80,13 +109,13 @@
       <div class="alarm-count">
         <div class="table">
           <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="type" align="center" width="140" />
+            <el-table-column label="位号" prop="tagNumber" align="center" width="160" />
             <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-column label="标签" prop="marker" align="center" width="140" />
+            <el-table-column label="报警次数" prop="alarmSum" align="center" width="120" />
           </el-table>
         </div>
       </div>
diff --git a/src/views/home/alarm/count/components/trendAnalysis.vue b/src/views/home/alarm/count/components/trendAnalysis.vue
index 73e18b0..18cfb4c 100644
--- a/src/views/home/alarm/count/components/trendAnalysis.vue
+++ b/src/views/home/alarm/count/components/trendAnalysis.vue
@@ -5,49 +5,203 @@
  -->
 <script lang="ts" setup name="TrendAnalysis">
 import layout from './layout.vue'
+import { getAlarmTrend } from '@/api/home/alarm/count'
 const listQuery = ref({
-  type: 'day',
+  timeType: '2',
+  ledgerType: '',
+  endTime: '',
+  begTime: '',
+  deptid: '',
 })
+// 开始结束时间
+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 shortcuts = [
+  {
+    text: '近一周',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setDate(start.getDate() - 7)
+      return [start, end]
+    },
+  },
+  {
+    text: '近一个月',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setMonth(start.getMonth() - 1)
+      return [start, end]
+    },
+  },
+  {
+    text: '近三个月',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setMonth(start.getMonth() - 3)
+      return [start, end]
+    },
+  },
+]
 const selectTimeType = (type: string) => {
-  listQuery.value.type = type
+  listQuery.value.timeType = type
 }
-const xAxisData = ref([])
-const data = ref([])
+const columns = ref<any[]>([
+  {
+    text: '闸井浓度超限',
+    value: 'well',
+  },
+  {
+    text: '场站浓度超限',
+    value: 'station',
+  },
+  {
+    text: '管线浓度超限',
+    value: 'pipeline',
+  },
+])
+// 类别
+const ledgerTypeList = ref<{ id: string; name: string; value: string }[]>([
+  {
+    name: '闸井',
+    id: '1',
+    value: '1',
+  },
+  {
+    name: '场站',
+    id: '2',
+    value: '2',
+  },
+  {
+    name: '管线',
+    id: '3',
+    value: '3',
+  },
+])
+const xAxisData = ref<string[]>([])
+const data = ref<any[]>([])
 const list = ref([])
-setTimeout(() => {
-  xAxisData.value = [
-    '2024-07-01 12:11:12',
-    '2024-07-02 12:11:12',
-    '2024-07-03 12:11:12',
-    '2024-07-04 12:11:12',
-    '2024-07-05 12:11:12',
-    '2024-07-06 12:11:12',
-    '2024-07-07 12:11:12',
-  ]
-  data.value = [
-    {
-      name: '闸井浓度超限',
-      data: [1, 3, 5, 1, 4, 2, 7],
-      symbol: 'emptyCircle',
-    },
-    {
-      name: '场站浓度超限',
-      data: [2, 1, 4, 1, 5, 2, 9],
-      symbol: 'emptyCircle',
-    },
-    {
-      name: '闸井浓度超限',
-      data: [4, 3, 2, 4, 7, 9, 1],
-      symbol: 'emptyCircle',
-    },
-  ]
-  list.value = xAxisData.value.map((item, index) => ({
-    alarmTime: item,
-    wellOver: data.value[0].data[index],
-    senceOver: data.value[1].data[index],
-    thirdParty: data.value[2].data[index],
-  }))
-}, 1000)
+const loading = ref(true)
+// setTimeout(() => {
+//   xAxisData.value = [
+//     '2024-07-01 12:11:12',
+//     '2024-07-02 12:11:12',
+//     '2024-07-03 12:11:12',
+//     '2024-07-04 12:11:12',
+//     '2024-07-05 12:11:12',
+//     '2024-07-06 12:11:12',
+//     '2024-07-07 12:11:12',
+//   ]
+//   data.value = [
+//     {
+//       name: '闸井浓度超限',
+//       data: [1, 3, 5, 1, 4, 2, 7],
+//       symbol: 'emptyCircle',
+//     },
+//     {
+//       name: '场站浓度超限',
+//       data: [2, 1, 4, 1, 5, 2, 9],
+//       symbol: 'emptyCircle',
+//     },
+//     {
+//       name: '闸井浓度超限',
+//       data: [4, 3, 2, 4, 7, 9, 1],
+//       symbol: 'emptyCircle',
+//     },
+//   ]
+//   list.value = xAxisData.value.map((item, index) => ({
+//     alarmTime: item,
+//     wellOver: data.value[0].data[index],
+//     senceOver: data.value[1].data[index],
+//     thirdParty: data.value[2].data[index],
+//   }))
+// }, 1000)
+const resizePage = () => {
+  setTimeout(() => {
+    const resize = new Event('resize')
+    window.dispatchEvent(resize)
+  }, 500)
+}
+const fetchData = () => {
+  loading.value = true
+  const columnsDict = {
+    闸井浓度超限: 'well',
+    场站浓度超限: 'station',
+    管线浓度超限: 'pipeline',
+  } as { [key: string]: string }
+  getAlarmTrend(listQuery.value).then((res) => {
+    console.log(res.data, '报警趋势分析')
+    xAxisData.value = res.data.map((item: any) => item.date)
+    if (!listQuery.value.ledgerType) {
+      data.value = [
+        {
+          name: '闸井浓度超限',
+          data: res.data.map((item: any) => item['闸井浓度超限']),
+        },
+        {
+          name: '场站浓度超限',
+          data: res.data.map((item: any) => item['场站浓度超限']),
+        },
+        {
+          name: '管线浓度超限',
+          data: res.data.map((item: any) => item['管线浓度超限']),
+        },
+      ]
+    }
+    else if (listQuery.value.ledgerType === '1') {
+      data.value = [
+        {
+          name: '闸井浓度超限',
+          data: res.data.map((item: any) => item['闸井浓度超限']),
+        },
+      ]
+    }
+    else if (listQuery.value.ledgerType === '2') {
+      data.value = [
+        {
+          name: '场站浓度超限',
+          data: res.data.map((item: any) => item['场站浓度超限']),
+        },
+      ]
+    }
+    else if (listQuery.value.ledgerType === '3') {
+      data.value = [
+        {
+          name: '管线浓度超限',
+          data: res.data.map((item: any) => item['管线浓度超限']),
+        },
+      ]
+    }
+    list.value = res.data.map((item: any) => ({
+      date: item.date,
+      well: item['闸井浓度超限'],
+      station: item['场站浓度超限'],
+      pipeline: item['管线浓度超限'],
+    }))
+    columns.value = data.value.map((item: any) => ({
+      text: item.name,
+      value: columnsDict[item.name],
+    }))
+    resizePage()
+    loading.value = false
+  }).catch(() => {
+    loading.value = false
+  })
+}
+onMounted(() => {
+  fetchData()
+})
 </script>
 
 <template>
@@ -56,34 +210,30 @@
     <template #search>
       <div class="search">
         <el-button
-          :class="listQuery.type === 'day' ? 'active' : ''" round size="small"
-          @click="selectTimeType('day')"
-        >
-          今日
-        </el-button>
-        <el-button
-          :class="listQuery.type === 'week' ? 'active' : ''" round size="small"
-          @click="selectTimeType('week')"
+          :class="listQuery.timeType === '2' ? 'active' : ''" round size="small" style="margin: 0 5px;"
+          @click="selectTimeType('2')"
         >
           本周
         </el-button>
         <el-button
-          :class="listQuery.type === 'month' ? 'active' : ''" round size="small"
-          @click="selectTimeType('month')"
+          :class="listQuery.timeType === '3' ? 'active' : ''" round size="small" style="margin: 0 5px;"
+          @click="selectTimeType('3')"
         >
           本月
         </el-button>
-        <el-select v-model="listQuery.keywords" placeholder="全部类别" clearable style="width: 180px;margin: 0 5px;" />
+        <el-select v-model="listQuery.ledgerType" placeholder="全部类别" clearable style="width: 180px;margin: 0 5px;">
+          <el-option v-for="item in ledgerTypeList" :key="item.id" :label="item.name" :value="item.id" />
+        </el-select>
         <dept-select
-          v-model="listQuery.keywords" placeholder="管理单位" :clearable="true"
+          v-model="listQuery.deptid" placeholder="管理单位" :clearable="true"
           style="width: 220px;margin: 0 5px;"
         />
         <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
+          style="width: 380px;margin: 0 5px;" value-format="YYYY-MM-DD HH:mm:ss" range-separator="至"
+          start-placeholder="报警开始时间" end-placeholder="报警结束时间" clearable :shortcuts="shortcuts"
         />
-        <el-button type="primary" style="margin: 0 5px;">
+        <el-button type="primary" style="margin: 0 5px;" @click="fetchData">
           搜索
         </el-button>
       </div>
@@ -94,14 +244,22 @@
           <line-chart
             :x-axis-data="xAxisData" :data="data" :gradient="false"
             :legend="{ itemWidth: 8, itemHeight: 8, type: 'scroll', orient: 'horizontal', icon: 'roundRect', right: '0', top: '10' }"
+            :grid="{
+              top: 50,
+              left: 30,
+              right: 30,
+              bottom: 20,
+              containLabel: true, // 是否包含坐标轴的刻度标签
+            }"
           />
         </div>
         <div class="table">
           <el-table border :data="list" stripe style="width: 100%;" :height="440">
-            <el-table-column label="日期" prop="alarmTime" align="center" />
-            <el-table-column label="闸井浓度超限" prop="wellOver" align="center" />
-            <el-table-column label="场站浓度超限" prop="senceOver" align="center" />
-            <el-table-column label="疑似第三方破坏" prop="thirdParty" align="center" />
+            <el-table-column label="日期" prop="date" align="center" width="190" />
+            <el-table-column
+              v-for="item in columns" :key="item.text" :label="item.text" :prop="item.value"
+              align="center"
+            />
           </el-table>
         </div>
       </div>
diff --git a/src/views/home/alarm/current/components/detail.vue b/src/views/home/alarm/current/components/detail.vue
index 4fb61d3..e200fe3 100644
--- a/src/views/home/alarm/current/components/detail.vue
+++ b/src/views/home/alarm/current/components/detail.vue
@@ -7,6 +7,7 @@
 import dayjs from 'dayjs'
 import { ElMessage } from 'element-plus'
 import { alarmProcessNode, detailAlarm } from '@/api/home/alarm/current'
+import { getAlarmDetail } from '@/api/home/alarm/history'
 import { toHumpObject } from '@/utils/String'
 import { getAlarmLevelListPage, getAlarmTypeListPage } from '@/api/home/rule/alarm'
 import { getDateDiff } from '@/utils/dayjs'
@@ -44,7 +45,7 @@
   },
   {
     text: '报警时间',
-    value: 'ts',
+    value: $route.query.type === 'history' ? 'alarmTime' : 'ts',
     align: 'center',
   },
   {
@@ -89,7 +90,7 @@
   },
   {
     text: '处置时长',
-    value: 'duration',
+    value: $route.query.type === 'history' ? 'cancelDuration' : 'duration',
     align: 'center',
   },
   {
@@ -107,8 +108,8 @@
 const fetchDetail = async () => {
   loading.value = true
   const res1 = await getAlarmLevelListPage({ offset: 1, limit: 9999 })
-  const res2 = await getAlarmTypeListPage({ offset: 1, limit: 9999 })
-  detailAlarm($route.query.id as string).then((res) => {
+  const res2 = await getAlarmTypeListPage({ offset: 1, limit: 9999 });
+  ($route.query.type === 'history' ? getAlarmDetail : detailAlarm)($route.query.id as string).then((res) => {
     detailInfo.value = toHumpObject(res.data)
     detailInfo.value.realAlarmName = detailInfo.value.realAlarm === '1' ? '报警' : '误报'
     detailInfo.value.alarmTypeName = res2.data.rows.filter((item: any) => item.id === detailInfo.value.alarmTypeId)[0]?.alarmType || ''
@@ -183,8 +184,12 @@
           </template>
           <div style="padding: 25px;">
             <el-timeline>
-              <el-timeline-item v-for="(item, index) in alarmDynamics" :key="index" :timestamp="item.approvalTime" type="primary">
-                {{ `${item.approvalPerson}${item.dept_name ? '(' : ''}${item.dept_name}${item.dept_name ? ')' : ''}${item.process_name}` }}
+              <el-timeline-item
+                v-for="(item, index) in alarmDynamics" :key="index" :timestamp="item.approvalTime"
+                type="primary"
+              >
+                {{ `${item.approvalPerson}${item.dept_name ? '(' : ''}${item.dept_name}${item.dept_name ? ')'
+                  : ''}${item.process_name}` }}
               </el-timeline-item>
             </el-timeline>
           </div>
diff --git a/src/views/home/alarm/current/index.vue b/src/views/home/alarm/current/index.vue
index 52b2be1..8b36a01 100644
--- a/src/views/home/alarm/current/index.vue
+++ b/src/views/home/alarm/current/index.vue
@@ -4,10 +4,10 @@
   Date: 2023-06-28
  -->
 <script lang="ts" setup name="CurrentAlarm">
-import { ElMessage } from 'element-plus'
+import { ElMessage, ElMessageBox } from 'element-plus'
 import { ArrowLeftBold, ArrowRightBold } from '@element-plus/icons-vue'
 import MapCom from './components/map.vue'
-import { getCurrentAlarmListPage, viewAlarm } from '@/api/home/alarm/current'
+import { batchDelete, getCurrentAlarmListPage, viewAlarm } from '@/api/home/alarm/current'
 import { getDictByCode } from '@/api/system/dict'
 import { getAlarmLevelListPage, getAlarmTypeListPage } from '@/api/home/rule/alarm'
 import { getDeviceTypeListPage } from '@/api/home/device/type'
@@ -66,6 +66,35 @@
     }
   }
 })
+const shortcuts = [
+  {
+    text: '近一周',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setDate(start.getDate() - 7)
+      return [start, end]
+    },
+  },
+  {
+    text: '近一个月',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setMonth(start.getMonth() - 1)
+      return [start, end]
+    },
+  },
+  {
+    text: '近三个月',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setMonth(start.getMonth() - 3)
+      return [start, end]
+    },
+  },
+]
 // 查询数据
 const fetchData = () => {
   loadingTable.value = true
@@ -140,8 +169,8 @@
 const detail = (row: any) => {
   mapData.value = row
   switchMode('map')
-  row.lngGaode = '116.398043'
-  row.latGaode = '39.901552'
+  // row.lngGaode = '116.398043'
+  // row.latGaode = '39.901552'
   // 绘制点
   const draw = () => {
     mapRef.value.mapRef.removeMarker()
@@ -209,6 +238,35 @@
   })
 }
 fetchDict()
+const { proxy } = getCurrentInstance() as any
+// 多选
+const multipleTable = ref([])
+const handleSelectionChange = (val: any) => {
+  console.log(val, '多选数据')
+  multipleTable.value = val
+}
+// 批量删除
+const batchDeleteRow = () => {
+  if (!multipleTable.value.length) {
+    ElMessage.warning('请先选中数据')
+    return
+  }
+  ElMessageBox.confirm(
+    '确定要删除选中的数据吗？',
+    '确认操作',
+    {
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+      type: 'warning',
+    },
+  ).then(() => {
+    batchDelete(multipleTable.value.map((item: any) => item.id)).then(() => {
+      ElMessage.success('操作成功')
+      multipleTable.value = []
+      fetchData()
+    })
+  })
+}
 </script>
 
 <template>
@@ -255,7 +313,7 @@
       </search-item>
       <search-item>
         <el-date-picker
-          v-model="datetimerange" type="datetimerange" format="YYYY-MM-DD HH:mm:ss"
+          v-model="datetimerange" type="datetimerange" format="YYYY-MM-DD HH:mm:ss" :shortcuts="shortcuts"
           value-format="YYYY-MM-DD HH:mm:ss" range-separator="至" start-placeholder="报警开始时间" end-placeholder="报警结束时间"
           clearable
         />
@@ -274,6 +332,9 @@
           <template #btns-right>
             <!-- 操作 -->
             <div>
+              <el-button v-if="proxy.hasPerm('/alarm/current/delete')" type="primary" @click="batchDeleteRow">
+                批量删除
+              </el-button>
               <el-button type="primary">
                 导出
               </el-button>
@@ -282,7 +343,10 @@
           <!-- 查询结果Table显示 -->
           <normal-table
             :data="list1" :total="total" :columns="columnsConfig" :query="listQuery"
-            :list-loading="loadingTable" :height="tableHeight - 50 - 70" @change="changePage"
+            :list-loading="loadingTable" :height="tableHeight - 50 - 70"
+            :is-multi="proxy.hasPerm('/alarm/current/delete')"
+            :is-showmulti-select="proxy.hasPerm('/alarm/current/delete')" @change="changePage"
+            @multiSelect="handleSelectionChange"
           >
             <template #preColumns>
               <el-table-column label="序号" width="55" align="center">
diff --git a/src/views/home/alarm/history/index.vue b/src/views/home/alarm/history/index.vue
index 87bb167..74ca152 100644
--- a/src/views/home/alarm/history/index.vue
+++ b/src/views/home/alarm/history/index.vue
@@ -80,6 +80,35 @@
     }
   }
 })
+const shortcuts = [
+  {
+    text: '近一周',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setDate(start.getDate() - 7)
+      return [start, end]
+    },
+  },
+  {
+    text: '近一个月',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setMonth(start.getMonth() - 1)
+      return [start, end]
+    },
+  },
+  {
+    text: '近三个月',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setMonth(start.getMonth() - 3)
+      return [start, end]
+    },
+  },
+]
 // 查询数据
 const fetchData = () => {
   loadingTable.value = true
@@ -127,10 +156,11 @@
 const $router = useRouter()
 const moreData = (row: any) => {
   $router.push({
-    name: 'AlarmCurrentDetail',
+    name: 'AlarmHistoryDetail',
     query: {
       id: row.id,
       row: JSON.stringify(row),
+      type: 'history',
     },
   })
 }
@@ -218,7 +248,7 @@
       </search-item>
       <search-item>
         <el-date-picker
-          v-model="datetimerange" type="datetimerange" format="YYYY-MM-DD HH:mm:ss"
+          v-model="datetimerange" type="datetimerange" format="YYYY-MM-DD HH:mm:ss" :shortcuts="shortcuts"
           value-format="YYYY-MM-DD HH:mm:ss" range-separator="至" start-placeholder="报警开始时间" end-placeholder="报警结束时间"
           clearable
         />
diff --git a/src/views/home/device/product/index.vue b/src/views/home/device/product/index.vue
index 1bb3d99..2300270 100644
--- a/src/views/home/device/product/index.vue
+++ b/src/views/home/device/product/index.vue
@@ -21,8 +21,8 @@
   { text: '设备型号', value: 'deviceModel', align: 'center' },
   { text: '厂商', value: 'manufacturerName', align: 'center' },
   { text: '通讯协议', value: 'protocolName', align: 'center' },
-  { text: '接入方式', value: 'accessMethodName', align: 'center' },
-  { text: '创建时间', value: 'ts', align: 'center' },
+  { text: '接入方式', value: 'accessMethodName', align: 'center', width: '140' },
+  { text: '创建时间', value: 'ts', align: 'center', width: '200' },
 ])
 // 最终展示列
 const columnsConfig = ref([])
diff --git a/src/views/home/device/type/index.vue b/src/views/home/device/type/index.vue
index 56d7f65..7df5933 100644
--- a/src/views/home/device/type/index.vue
+++ b/src/views/home/device/type/index.vue
@@ -14,12 +14,12 @@
 const total = ref(0)
 // 初始展示列
 const columns = ref<any>([
-  { text: '设备类型代号', value: 'typeCode', align: 'center' },
+  { text: '设备类型代号', value: 'typeCode', align: 'center', width: '110' },
   { text: '设备类型', value: 'typeName', align: 'center' },
   { text: '描述', value: 'typeDescription', align: 'center' },
   { text: '监测对象', value: 'watchObjectName', align: 'center' },
-  { text: '是否启用', value: 'isUsedName', align: 'center' },
-  { text: '操作时间', value: 'ts', align: 'center' },
+  { text: '是否启用', value: 'isUsedName', align: 'center', width: '110' },
+  { text: '操作时间', value: 'ts', align: 'center', width: '200' },
 ])
 // 最终展示列
 const columnsConfig = ref([])
diff --git a/src/views/home/ledger/ledger/components/wellList.vue b/src/views/home/ledger/ledger/components/wellList.vue
index 61eca63..6e40ede 100644
--- a/src/views/home/ledger/ledger/components/wellList.vue
+++ b/src/views/home/ledger/ledger/components/wellList.vue
@@ -22,12 +22,12 @@
   { text: '位号', value: 'tagNumber', align: 'center', isRequired: true, width: '110' },
   { text: '编号', value: 'ledgerCode', align: 'center', isRequired: true, width: '150' },
   { text: '名称', value: 'ledgerName', align: 'center', isRequired: true },
-  { text: '管理单位', value: 'responsibleDept', align: 'center' },
+  { text: '管理单位', value: 'deptName', align: 'center', width: '160' },
   { text: '详细位置', value: 'position', align: 'center' },
-  { text: '产权单位', value: 'deptName', align: 'center', isRequired: true },
-  { text: '管理方式', value: 'manageTypeName', align: 'center', isRequired: true },
-  { text: '使用状态', value: 'onStateName', align: 'center', isRequired: true },
-  { text: '位置状态', value: 'locationStateName', align: 'center', isRequired: true },
+  { text: '产权单位', value: 'responsibleDeptName', align: 'center', isRequired: true },
+  { text: '管理方式', value: 'manageTypeName', align: 'center', isRequired: true, width: '110' },
+  { text: '使用状态', value: 'onStateName', align: 'center', isRequired: true, width: '110' },
+  { text: '位置状态', value: 'locationStateName', align: 'center', isRequired: true, width: '110' },
 ])
 // 最终展示列
 const columnsConfig = ref([])
diff --git a/src/views/home/ledger/pipeline/index.vue b/src/views/home/ledger/pipeline/index.vue
index 0b1dc59..d56a41c 100644
--- a/src/views/home/ledger/pipeline/index.vue
+++ b/src/views/home/ledger/pipeline/index.vue
@@ -16,13 +16,13 @@
 const columns = ref<any>([
   { text: '管线编号', value: 'pipeCode', align: 'center', isRequired: true },
   { text: '管线位置', value: 'position', align: 'center', isRequired: true },
-  { text: '压力级制', value: 'pressTypeName', align: 'center', isRequired: true },
-  { text: '材质', value: 'material', align: 'center' },
-  { text: '管径(mm)', value: 'pipeDiameter', align: 'center' },
-  { text: '建设年代', value: 'constructEra', align: 'center' },
+  { text: '压力级制', value: 'pressTypeName', align: 'center', isRequired: true, width: '110' },
+  { text: '材质', value: 'material', align: 'center', width: '110' },
+  { text: '管径(mm)', value: 'pipeDiameter', align: 'center', width: '110' },
+  { text: '建设年代', value: 'constructEra', align: 'center', width: '110' },
   { text: '管理单位', value: 'deptName', align: 'center', isRequired: true },
   { text: '产权单位', value: 'propertyOwner', align: 'center', isRequired: true },
-  { text: '管理方式', value: 'manageTypeName', align: 'center', isRequired: true },
+  { text: '管理方式', value: 'manageTypeName', align: 'center', isRequired: true, width: '110' },
 ])
 // 最终展示列
 const columnsConfig = ref([])
diff --git a/src/views/home/ledger/sync/index.vue b/src/views/home/ledger/sync/index.vue
index dee1350..6607896 100644
--- a/src/views/home/ledger/sync/index.vue
+++ b/src/views/home/ledger/sync/index.vue
@@ -13,8 +13,8 @@
 const total = ref(0)
 // 初始展示列
 const columns = ref<any>([
-  { text: '开始时间', value: 'tagNumber', align: 'center', isRequired: true },
-  { text: '结束时间', value: 'ledgerCode', align: 'center', isRequired: true },
+  { text: '开始时间', value: 'tagNumber', align: 'center', isRequired: true, width: '190' },
+  { text: '结束时间', value: 'ledgerCode', align: 'center', isRequired: true, width: '190' },
   { text: '操作人', value: 'ledgerName', align: 'center', isRequired: true },
   { text: '同步类型', value: 'responsibleDept', align: 'center' },
   { text: '同步结果', value: 'position', align: 'center' },
diff --git a/src/views/home/operation/alarm/index.vue b/src/views/home/operation/alarm/index.vue
index ef04fd4..dc0f53c 100644
--- a/src/views/home/operation/alarm/index.vue
+++ b/src/views/home/operation/alarm/index.vue
@@ -17,8 +17,8 @@
   { text: '报警类型', value: 'alarmTypeName', align: 'center' },
   { text: '报警原因', value: 'alarmReason', align: 'center' },
   { text: '管理单位', value: 'deptName', align: 'center' },
-  { text: '状态', value: 'status', align: 'center' },
-  { text: '报警时间', value: 'alarmTime', align: 'center' },
+  { text: '状态', value: 'status', align: 'center', width: '110' },
+  { text: '报警时间', value: 'alarmTime', align: 'center', width: '200' },
 ])
 // 最终展示列
 const columnsConfig = ref([])
diff --git a/src/views/home/operation/manufacturer/index.vue b/src/views/home/operation/manufacturer/index.vue
index f439521..76ce423 100644
--- a/src/views/home/operation/manufacturer/index.vue
+++ b/src/views/home/operation/manufacturer/index.vue
@@ -18,13 +18,13 @@
 const columns = ref<any>([
   { text: '设备编号', value: 'devcode', align: 'center' },
   { text: '设备类型', value: 'deviceTypeName', align: 'center' },
-  { text: '运维类型', value: 'repairTypeName', align: 'center' },
+  { text: '运维类型', value: 'repairTypeName', align: 'center', width: '110' },
   { text: '安装位置', value: 'ledgerNumber', align: 'center' },
   { text: '详细位置', value: 'position', align: 'center' },
   { text: '管理单位', value: '', align: 'center' },
   { text: '运维内容', value: 'repairContent', align: 'center' },
-  { text: '运维人员', value: 'repairPerson', align: 'center' },
-  { text: '维护时间', value: 'finishTime', align: 'center' },
+  { text: '运维人员', value: 'repairPerson', align: 'center', width: '120' },
+  { text: '维护时间', value: 'finishTime', align: 'center', width: '200' },
 ])
 // 最终展示列
 const columnsConfig = ref([])
diff --git a/src/views/home/pipeline/components/detailInfoDialog.vue b/src/views/home/pipeline/components/detailInfoDialog.vue
index 1662e6e..76380ed 100644
--- a/src/views/home/pipeline/components/detailInfoDialog.vue
+++ b/src/views/home/pipeline/components/detailInfoDialog.vue
@@ -153,7 +153,7 @@
     width: 100%;
     display: flex;
     justify-content: space-between;
-    padding: 2px 10px;
+    padding: 8px 10px;
     align-items: center;
     color: #fff;
 
diff --git a/src/views/home/rule/agreement/index.vue b/src/views/home/rule/agreement/index.vue
index 6f2695a..2e6c2a5 100644
--- a/src/views/home/rule/agreement/index.vue
+++ b/src/views/home/rule/agreement/index.vue
@@ -15,10 +15,10 @@
 const columns = ref<any>([
   { text: '协议名称', value: 'protocolName', align: 'center' },
   { text: '协议编码', value: 'protocolCode', align: 'center' },
-  { text: '协议版本', value: 'version', align: 'center' },
+  { text: '协议版本', value: 'version', align: 'center', width: '130' },
   { text: '备注', value: 'description', align: 'center' },
-  { text: '上传地址', value: 'ip', align: 'center' },
-  { text: '创建时间', value: 'ts', align: 'center' },
+  { text: '上传地址', value: 'ip', align: 'center', width: '200' },
+  { text: '创建时间', value: 'ts', align: 'center', width: '200' },
 ])
 // 最终展示列
 const columnsConfig = ref([])
diff --git a/src/views/home/rule/alarm/components/alarmLevelList.vue b/src/views/home/rule/alarm/components/alarmLevelList.vue
index 40c1e43..c8ffb7d 100644
--- a/src/views/home/rule/alarm/components/alarmLevelList.vue
+++ b/src/views/home/rule/alarm/components/alarmLevelList.vue
@@ -29,6 +29,7 @@
 const fetchData = () => {
   loadingTable.value = true
   getAlarmLevelListPage(listQuery.value).then((res) => {
+    list.value = []
     list.value = res.data.rows.map((item: any) => ({
       ...item,
       isSendName: item.isSend === '0' ? '关' : '开',
diff --git a/src/views/home/rule/alarm/components/alarmTypeList.vue b/src/views/home/rule/alarm/components/alarmTypeList.vue
index f3bc573..2cbf110 100644
--- a/src/views/home/rule/alarm/components/alarmTypeList.vue
+++ b/src/views/home/rule/alarm/components/alarmTypeList.vue
@@ -27,7 +27,9 @@
 const fetchData = () => {
   loadingTable.value = true
   getAlarmTypeListPage(listQuery.value).then((res) => {
+    list.value = []
     list.value = res.data.rows
+    console.log(res.data.rows, 'res.data.rows')
     total.value = res.data.total
     loadingTable.value = false
   }).catch(() => {
diff --git a/src/views/home/rule/alarm/components/editAlarmTypeDialog.vue b/src/views/home/rule/alarm/components/editAlarmTypeDialog.vue
index 59c523f..fc50080 100644
--- a/src/views/home/rule/alarm/components/editAlarmTypeDialog.vue
+++ b/src/views/home/rule/alarm/components/editAlarmTypeDialog.vue
@@ -19,6 +19,7 @@
   alarmCategory: '', // 报警类别
   alarmType: '', // 报警类型
   deviceTypeIds: [] as any, // 设备类型ids
+  deviceTypeIdStrs: '',
   id: '',
 }) // 表单
 const textMap: { [key: string]: string } = {
@@ -37,6 +38,7 @@
     alarmCategory: '', // 报警类别
     alarmType: '', // 报警类型
     deviceTypeIds: [] as any, // 设备类型ids
+    deviceTypeIdStrs: '',
     id: '',
   }
 }
@@ -56,7 +58,8 @@
     dataForm.value = {
       ...JSON.parse(JSON.stringify(row)),
     }
-    dataForm.value.deviceTypeIds = deviceTypeList.value.length ? deviceTypeList.value.filter((item: any) => item.name === dataForm.value.deviceTypeName)[0].id : ''
+    dataForm.value.deviceTypeIds = dataForm.value.deviceTypeIdStrs.split(',')
+    // dataForm.value.deviceTypeIds = deviceTypeList.value.length ? deviceTypeList.value.filter((item: any) => item.name === dataForm.value.deviceTypeName)[0].id : ''
     // dataForm.value.deviceTypeIds ? dataForm.value.deviceTypeIds : []
   }
 }
@@ -68,6 +71,7 @@
 const createData = () => {
   dataFormRef.value.validate((valid: any) => {
     if (valid) {
+      dataForm.value.deviceTypeIdStrs = dataForm.value.deviceTypeIds.join()
       addAlarmType(dataForm.value).then((response) => {
         if (response.code === 200) {
           ElMessage({
@@ -158,8 +162,8 @@
         <el-col :span="24">
           <el-form-item label="设备类型" prop="deviceTypeIds">
             <el-select
-              v-model.trim="dataForm.deviceTypeIds" placeholder="设备类型" style="width: 100%;" clearable :multiple="dialogStatus === 'edit' ? false : true"
-              filterable :disabled="dialogStatus === 'create' ? false : true"
+              v-model.trim="dataForm.deviceTypeIds" placeholder="设备类型" style="width: 100%;" clearable
+              multiple filterable
             >
               <el-option v-for="item in deviceTypeList" :key="item.id" :label="item.name" :value="item.value" />
             </el-select>

diff --git a/src/api/home/alarm/count.ts b/src/api/home/alarm/count.ts
index 1f4b59a..d5d9244 100644
--- a/src/api/home/alarm/count.ts
+++ b/src/api/home/alarm/count.ts
@@ -34,3 +34,11 @@
     data,
   })
 }
+// 报警趋势分析
+export function getAlarmTrend(data: any) {
+  return request({
+    url: '/statics/alarmRecords/alarmTrend',
+    method: 'post',
+    data,
+  })
+}
diff --git a/src/api/home/alarm/current.ts b/src/api/home/alarm/current.ts
index ec20f64..ac3387f 100644
--- a/src/api/home/alarm/current.ts
+++ b/src/api/home/alarm/current.ts
@@ -57,3 +57,13 @@
     },
   })
 }
+// 批量删除
+export function batchDelete(ids: any) {
+  return request({
+    url: '/system/alarmRecords/batchDelete',
+    method: 'post',
+    data: {
+      ids,
+    },
+  })
+}
diff --git a/src/api/home/alarm/history.ts b/src/api/home/alarm/history.ts
index 5f55e82..44cf851 100644
--- a/src/api/home/alarm/history.ts
+++ b/src/api/home/alarm/history.ts
@@ -11,3 +11,13 @@
     data,
   })
 }
+// 详情
+export function getAlarmDetail(id: any) {
+  return request({
+    url: '/system/alarmRecords/historyAlarmDetail',
+    method: 'post',
+    data: {
+      id,
+    },
+  })
+}
diff --git a/src/components/Echart/LineChart.vue b/src/components/Echart/LineChart.vue
index 2733161..b811f29 100644
--- a/src/components/Echart/LineChart.vue
+++ b/src/components/Echart/LineChart.vue
@@ -207,7 +207,7 @@
         },
       },
       valueFormatter: (value: string | number) => {
-        return value ? value + props.unit : ''
+        return value ? value + props.unit : value === 0 ? '0' : ''
       },
     }, // 提示框
     xAxis: [
diff --git a/src/router/modules/pc.ts b/src/router/modules/pc.ts
index 9b058fa..f3edac9 100644
--- a/src/router/modules/pc.ts
+++ b/src/router/modules/pc.ts
@@ -94,6 +94,19 @@
         },
       },
       {
+        path: '/history/detail',
+        component: () => import('@/views/home/alarm/current/components/detail.vue'),
+        name: 'AlarmHistoryDetail',
+        meta: {
+          title: '报警详情',
+          icon: 'ep:key',
+          sidebar: false,
+          breadcrumb: true,
+          activeMenu: '/alarm/history',
+          auth: '/alarm/history',
+        },
+      },
+      {
         path: 'count',
         component: () => import('@/views/home/alarm/count/index.vue'),
         name: 'AlarmCount',
diff --git a/src/views/home/alarm/count/components/alarmStatistics.vue b/src/views/home/alarm/count/components/alarmStatistics.vue
index b088de2..7aa930f 100644
--- a/src/views/home/alarm/count/components/alarmStatistics.vue
+++ b/src/views/home/alarm/count/components/alarmStatistics.vue
@@ -34,13 +34,12 @@
     value: '3',
   },
 ])
-const xAxisData = ref([])
-const data = ref([])
+const xAxisData = ref<string[]>([])
+const data = ref<any[]>([])
 const list = ref([])
 const loading = ref(true)
 // 开始结束时间
 const datetimerange = ref()
-// 默认当天
 watch(() => datetimerange.value, (newVal) => {
   listQuery.value.begTime = ''
   listQuery.value.endTime = ''
@@ -51,6 +50,35 @@
     }
   }
 })
+const shortcuts = [
+  {
+    text: '近一周',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setDate(start.getDate() - 7)
+      return [start, end]
+    },
+  },
+  {
+    text: '近一个月',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setMonth(start.getMonth() - 1)
+      return [start, end]
+    },
+  },
+  {
+    text: '近三个月',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setMonth(start.getMonth() - 3)
+      return [start, end]
+    },
+  },
+]
 // setTimeout(() => {
 //   xAxisData.value = [
 //     '闸井浓度超限', '场站浓度超限', '场站火焰报警', '疑似第三方破坏', '场站烟雾报警',
@@ -66,10 +94,25 @@
 //     value: data.value[0].data[index],
 //   }))
 // }, 1000)
+const resizePage = () => {
+  setTimeout(() => {
+    const resize = new Event('resize')
+    window.dispatchEvent(resize)
+  }, 500)
+}
 const fetchData = () => {
   loading.value = true
   getAlarmType(listQuery.value).then((res) => {
-    console.log(res.data, '各类报警统计')
+    // console.log(res.data, '各类报警统计')
+    xAxisData.value = res.data.map((item: any) => item.name)
+    data.value = [
+      {
+        name: '报警数量',
+        data: res.data.map((item: any) => item.value),
+      },
+    ]
+    list.value = res.data
+    resizePage
     loading.value = false
   }).catch(() => {
     loading.value = false
@@ -105,8 +148,8 @@
           style="width: 220px;margin: 0 5px;"
         />
         <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="至"
+          v-model="datetimerange" type="datetimerange" format="YYYY-MM-DD HH:mm:ss" :shortcuts="shortcuts"
+          style="width: 380px;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;" @click="fetchData">
@@ -118,8 +161,8 @@
       <div v-loading="loading" class="alarm-count">
         <div class="bar">
           <bar-chart-vertical
-            v-show="xAxisData.length"
-            :x-axis-data="xAxisData" :bar-coner="0" :data="data" :colors="[]" :bar-width="15"
+            v-show="xAxisData.length" :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' }"
             :grid="{
               top: 50,
@@ -133,7 +176,7 @@
         </div>
         <div class="table">
           <el-table border :data="list" stripe style="width: 100%;" :height="440">
-            <el-table-column label="报警类型" prop="alarmType" align="center" />
+            <el-table-column label="报警类型" prop="name" align="center" />
             <el-table-column label="报警数量" prop="value" align="center" />
           </el-table>
         </div>
diff --git a/src/views/home/alarm/count/components/deptCount.vue b/src/views/home/alarm/count/components/deptCount.vue
index 1ca5482..798bfd2 100644
--- a/src/views/home/alarm/count/components/deptCount.vue
+++ b/src/views/home/alarm/count/components/deptCount.vue
@@ -5,40 +5,123 @@
  -->
 <script lang="ts" setup name="AlarmCount">
 import layout from './layout.vue'
+import { getAlarmCompany } from '@/api/home/alarm/count'
 const listQuery = ref({
-  type: 'day',
+  begTime: '',
+  endTime: '',
+  ledgerType: '',
+  timeType: '1',
 })
 const selectTimeType = (type: string) => {
-  listQuery.value.type = type
+  listQuery.value.timeType = type
 }
+// 开始结束时间
+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 shortcuts = [
+  {
+    text: '近一周',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setDate(start.getDate() - 7)
+      return [start, end]
+    },
+  },
+  {
+    text: '近一个月',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setMonth(start.getMonth() - 1)
+      return [start, end]
+    },
+  },
+  {
+    text: '近三个月',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setMonth(start.getMonth() - 3)
+      return [start, end]
+    },
+  },
+]
+// 类别
+const ledgerTypeList = ref<{ id: string; name: string; value: string }[]>([
+  {
+    name: '闸井',
+    id: '1',
+    value: '1',
+  },
+  {
+    name: '场站',
+    id: '2',
+    value: '2',
+  },
+  {
+    name: '管线',
+    id: '3',
+    value: '3',
+  },
+])
 const xAxisData = ref([])
 const data = ref([])
 const list = ref([])
-setTimeout(() => {
-  xAxisData.value = [
-    '第一分公司', '第二分公司', '第三分公司', '第四分公司', '第五分公司',
-  ]
-  data.value = [
-    {
-      name: '闸井浓度超限',
-      data: [1, 8, 5, 8, 4],
-    },
-    {
-      name: '场站浓度超限',
-      data: [8, 3, 6, 1, 7],
-    },
-    {
-      name: '疑似第三方破坏',
-      data: [4, 7, 5, 9, 4],
-    },
-  ]
-  list.value = xAxisData.value.map((item, index) => ({
-    dept: item,
-    wellOver: data.value[0].data[index],
-    senceOver: data.value[1].data[index],
-    thirdParty: data.value[2].data[index],
-  }))
-}, 1000)
+const loading = ref(true)
+// setTimeout(() => {
+//   xAxisData.value = [
+//     '第一分公司', '第二分公司', '第三分公司', '第四分公司', '第五分公司',
+//   ]
+//   data.value = [
+//     {
+//       name: '闸井浓度超限',
+//       data: [1, 8, 5, 8, 4],
+//     },
+//     {
+//       name: '场站浓度超限',
+//       data: [8, 3, 6, 1, 7],
+//     },
+//     {
+//       name: '疑似第三方破坏',
+//       data: [4, 7, 5, 9, 4],
+//     },
+//   ]
+//   list.value = xAxisData.value.map((item, index) => ({
+//     dept: item,
+//     wellOver: data.value[0].data[index],
+//     senceOver: data.value[1].data[index],
+//     thirdParty: data.value[2].data[index],
+//   }))
+// }, 1000)
+const resizePage = () => {
+  setTimeout(() => {
+    const resize = new Event('resize')
+    window.dispatchEvent(resize)
+  }, 500)
+}
+const fetchData = () => {
+  loading.value = true
+  getAlarmCompany(listQuery.value).then((res) => {
+    console.log(res.data, '各单位报警统计')
+    resizePage()
+    loading.value = false
+  }).catch(() => {
+    loading.value = false
+  })
+}
+onMounted(() => {
+  fetchData()
+})
 </script>
 
 <template>
@@ -47,49 +130,59 @@
     <template #search>
       <div class="search">
         <el-button
-          :class="listQuery.type === 'day' ? 'active' : ''" round size="small"
-          @click="selectTimeType('day')"
+          :class="listQuery.timeType === '1' ? 'active' : ''" round size="small"
+          style="margin: 0 5px;"
+          @click="selectTimeType('1')"
         >
           今日
         </el-button>
         <el-button
-          :class="listQuery.type === 'week' ? 'active' : ''" round size="small"
-          @click="selectTimeType('week')"
+          :class="listQuery.timeType === '2' ? 'active' : ''" round size="small"
+          style="margin: 0 5px;"
+          @click="selectTimeType('2')"
         >
           本周
         </el-button>
         <el-button
-          :class="listQuery.type === 'month' ? 'active' : ''" round size="small"
-          @click="selectTimeType('month')"
+          :class="listQuery.timeType === '3' ? 'active' : ''" round size="small"
+          style="margin: 0 5px;"
+          @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 v-for="item in ledgerTypeList" :key="item.id" :label="item.name" :value="item.id" />
+        </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
+          style="width: 380px;margin: 0 5px;" value-format="YYYY-MM-DD HH:mm:ss" range-separator="至"
+          start-placeholder="报警开始时间" end-placeholder="报警结束时间" clearable :shortcuts="shortcuts"
         />
-        <el-button type="primary" style="margin: 0 5px;">
+        <el-button type="primary" style="margin: 0 5px;" @click="fetchData">
           搜索
         </el-button>
       </div>
     </template>
     <template #content>
-      <div class="alarm-count">
+      <div v-loading="loading" class="alarm-count">
         <div class="bar">
           <bar-chart-vertical
+            v-show="xAxisData.length"
             :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' }"
+            :grid="{
+              top: 50,
+              left: 30,
+              right: 30,
+              bottom: 20,
+              containLabel: true, // 是否包含坐标轴的刻度标签
+            }"
           />
+          <el-empty v-show="!xAxisData.length" description="暂无数据" />
         </div>
         <div class="table">
           <el-table border :data="list" stripe style="width: 100%;" :height="440">
-            <el-table-column label="管理单位" prop="dept" align="center" />
+            <el-table-column label="管理单位" prop="dept" align="center" width="200" />
             <el-table-column label="闸井浓度超限" prop="wellOver" align="center" />
             <el-table-column label="场站浓度超限" prop="senceOver" align="center" />
             <el-table-column label="疑似第三方破坏" prop="thirdParty" align="center" />
diff --git a/src/views/home/alarm/count/components/locationAnalysis.vue b/src/views/home/alarm/count/components/locationAnalysis.vue
index 4265aaf..4cd5921 100644
--- a/src/views/home/alarm/count/components/locationAnalysis.vue
+++ b/src/views/home/alarm/count/components/locationAnalysis.vue
@@ -18,7 +18,7 @@
 // 开始结束时间
 const datetimerange = ref()
 // 默认当天
-datetimerange.value = [`${dayjs().format('YYYY-MM-DD')} 00:00:00`, dayjs().format('YYYY-MM-DD HH:mm:ss')]
+// datetimerange.value = [`${dayjs().format('YYYY-MM-DD')} 00:00:00`, dayjs().format('YYYY-MM-DD HH:mm:ss')]
 watch(() => datetimerange.value, (newVal) => {
   listQuery.value.begTime = ''
   listQuery.value.endTime = ''
@@ -29,6 +29,35 @@
     }
   }
 })
+const shortcuts = [
+  {
+    text: '近一周',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setDate(start.getDate() - 7)
+      return [start, end]
+    },
+  },
+  {
+    text: '近一个月',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setMonth(start.getMonth() - 1)
+      return [start, end]
+    },
+  },
+  {
+    text: '近三个月',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setMonth(start.getMonth() - 3)
+      return [start, end]
+    },
+  },
+]
 const selectTimeType = (type: string) => {
   listQuery.value.timeType = type
 }
@@ -52,13 +81,13 @@
     <!-- 查询条件 -->
     <template #search>
       <div class="search">
-        <el-button :class="listQuery.timeType === '1' ? 'active' : ''" round size="small" @click="selectTimeType('1')">
+        <el-button :class="listQuery.timeType === '1' ? 'active' : ''" round size="small" style="margin: 0 5px;" @click="selectTimeType('1')">
           今日
         </el-button>
-        <el-button :class="listQuery.timeType === '2' ? 'active' : ''" round size="small" @click="selectTimeType('2')">
+        <el-button :class="listQuery.timeType === '2' ? 'active' : ''" round size="small" style="margin: 0 5px;" @click="selectTimeType('2')">
           本周
         </el-button>
-        <el-button :class="listQuery.timeType === '3' ? 'active' : ''" round size="small" @click="selectTimeType('3')">
+        <el-button :class="listQuery.timeType === '3' ? 'active' : ''" round size="small" style="margin: 0 5px;" @click="selectTimeType('3')">
           本月
         </el-button>
         <el-select v-model="listQuery.ledgerType" placeholder="全部类别" clearable style="width: 180px;margin: 0 5px;">
@@ -68,8 +97,8 @@
         </el-select>
         <el-date-picker
           v-model="datetimerange" type="datetimerange" format="YYYY-MM-DD HH:mm:ss"
-          style="width: 360px;margin: 0 5px;" value-format="YYYY-MM-DD HH:mm:ss" range-separator="至"
-          start-placeholder="报警开始时间" end-placeholder="报警结束时间" clearable
+          style="width: 380px;margin: 0 5px;" value-format="YYYY-MM-DD HH:mm:ss" range-separator="至"
+          start-placeholder="报警开始时间" end-placeholder="报警结束时间" clearable :shortcuts="shortcuts"
         />
         <el-button type="primary" style="margin: 0 5px;" @click="fetchData">
           搜索
@@ -80,13 +109,13 @@
       <div class="alarm-count">
         <div class="table">
           <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="type" align="center" width="140" />
+            <el-table-column label="位号" prop="tagNumber" align="center" width="160" />
             <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-column label="标签" prop="marker" align="center" width="140" />
+            <el-table-column label="报警次数" prop="alarmSum" align="center" width="120" />
           </el-table>
         </div>
       </div>
diff --git a/src/views/home/alarm/count/components/trendAnalysis.vue b/src/views/home/alarm/count/components/trendAnalysis.vue
index 73e18b0..18cfb4c 100644
--- a/src/views/home/alarm/count/components/trendAnalysis.vue
+++ b/src/views/home/alarm/count/components/trendAnalysis.vue
@@ -5,49 +5,203 @@
  -->
 <script lang="ts" setup name="TrendAnalysis">
 import layout from './layout.vue'
+import { getAlarmTrend } from '@/api/home/alarm/count'
 const listQuery = ref({
-  type: 'day',
+  timeType: '2',
+  ledgerType: '',
+  endTime: '',
+  begTime: '',
+  deptid: '',
 })
+// 开始结束时间
+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 shortcuts = [
+  {
+    text: '近一周',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setDate(start.getDate() - 7)
+      return [start, end]
+    },
+  },
+  {
+    text: '近一个月',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setMonth(start.getMonth() - 1)
+      return [start, end]
+    },
+  },
+  {
+    text: '近三个月',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setMonth(start.getMonth() - 3)
+      return [start, end]
+    },
+  },
+]
 const selectTimeType = (type: string) => {
-  listQuery.value.type = type
+  listQuery.value.timeType = type
 }
-const xAxisData = ref([])
-const data = ref([])
+const columns = ref<any[]>([
+  {
+    text: '闸井浓度超限',
+    value: 'well',
+  },
+  {
+    text: '场站浓度超限',
+    value: 'station',
+  },
+  {
+    text: '管线浓度超限',
+    value: 'pipeline',
+  },
+])
+// 类别
+const ledgerTypeList = ref<{ id: string; name: string; value: string }[]>([
+  {
+    name: '闸井',
+    id: '1',
+    value: '1',
+  },
+  {
+    name: '场站',
+    id: '2',
+    value: '2',
+  },
+  {
+    name: '管线',
+    id: '3',
+    value: '3',
+  },
+])
+const xAxisData = ref<string[]>([])
+const data = ref<any[]>([])
 const list = ref([])
-setTimeout(() => {
-  xAxisData.value = [
-    '2024-07-01 12:11:12',
-    '2024-07-02 12:11:12',
-    '2024-07-03 12:11:12',
-    '2024-07-04 12:11:12',
-    '2024-07-05 12:11:12',
-    '2024-07-06 12:11:12',
-    '2024-07-07 12:11:12',
-  ]
-  data.value = [
-    {
-      name: '闸井浓度超限',
-      data: [1, 3, 5, 1, 4, 2, 7],
-      symbol: 'emptyCircle',
-    },
-    {
-      name: '场站浓度超限',
-      data: [2, 1, 4, 1, 5, 2, 9],
-      symbol: 'emptyCircle',
-    },
-    {
-      name: '闸井浓度超限',
-      data: [4, 3, 2, 4, 7, 9, 1],
-      symbol: 'emptyCircle',
-    },
-  ]
-  list.value = xAxisData.value.map((item, index) => ({
-    alarmTime: item,
-    wellOver: data.value[0].data[index],
-    senceOver: data.value[1].data[index],
-    thirdParty: data.value[2].data[index],
-  }))
-}, 1000)
+const loading = ref(true)
+// setTimeout(() => {
+//   xAxisData.value = [
+//     '2024-07-01 12:11:12',
+//     '2024-07-02 12:11:12',
+//     '2024-07-03 12:11:12',
+//     '2024-07-04 12:11:12',
+//     '2024-07-05 12:11:12',
+//     '2024-07-06 12:11:12',
+//     '2024-07-07 12:11:12',
+//   ]
+//   data.value = [
+//     {
+//       name: '闸井浓度超限',
+//       data: [1, 3, 5, 1, 4, 2, 7],
+//       symbol: 'emptyCircle',
+//     },
+//     {
+//       name: '场站浓度超限',
+//       data: [2, 1, 4, 1, 5, 2, 9],
+//       symbol: 'emptyCircle',
+//     },
+//     {
+//       name: '闸井浓度超限',
+//       data: [4, 3, 2, 4, 7, 9, 1],
+//       symbol: 'emptyCircle',
+//     },
+//   ]
+//   list.value = xAxisData.value.map((item, index) => ({
+//     alarmTime: item,
+//     wellOver: data.value[0].data[index],
+//     senceOver: data.value[1].data[index],
+//     thirdParty: data.value[2].data[index],
+//   }))
+// }, 1000)
+const resizePage = () => {
+  setTimeout(() => {
+    const resize = new Event('resize')
+    window.dispatchEvent(resize)
+  }, 500)
+}
+const fetchData = () => {
+  loading.value = true
+  const columnsDict = {
+    闸井浓度超限: 'well',
+    场站浓度超限: 'station',
+    管线浓度超限: 'pipeline',
+  } as { [key: string]: string }
+  getAlarmTrend(listQuery.value).then((res) => {
+    console.log(res.data, '报警趋势分析')
+    xAxisData.value = res.data.map((item: any) => item.date)
+    if (!listQuery.value.ledgerType) {
+      data.value = [
+        {
+          name: '闸井浓度超限',
+          data: res.data.map((item: any) => item['闸井浓度超限']),
+        },
+        {
+          name: '场站浓度超限',
+          data: res.data.map((item: any) => item['场站浓度超限']),
+        },
+        {
+          name: '管线浓度超限',
+          data: res.data.map((item: any) => item['管线浓度超限']),
+        },
+      ]
+    }
+    else if (listQuery.value.ledgerType === '1') {
+      data.value = [
+        {
+          name: '闸井浓度超限',
+          data: res.data.map((item: any) => item['闸井浓度超限']),
+        },
+      ]
+    }
+    else if (listQuery.value.ledgerType === '2') {
+      data.value = [
+        {
+          name: '场站浓度超限',
+          data: res.data.map((item: any) => item['场站浓度超限']),
+        },
+      ]
+    }
+    else if (listQuery.value.ledgerType === '3') {
+      data.value = [
+        {
+          name: '管线浓度超限',
+          data: res.data.map((item: any) => item['管线浓度超限']),
+        },
+      ]
+    }
+    list.value = res.data.map((item: any) => ({
+      date: item.date,
+      well: item['闸井浓度超限'],
+      station: item['场站浓度超限'],
+      pipeline: item['管线浓度超限'],
+    }))
+    columns.value = data.value.map((item: any) => ({
+      text: item.name,
+      value: columnsDict[item.name],
+    }))
+    resizePage()
+    loading.value = false
+  }).catch(() => {
+    loading.value = false
+  })
+}
+onMounted(() => {
+  fetchData()
+})
 </script>
 
 <template>
@@ -56,34 +210,30 @@
     <template #search>
       <div class="search">
         <el-button
-          :class="listQuery.type === 'day' ? 'active' : ''" round size="small"
-          @click="selectTimeType('day')"
-        >
-          今日
-        </el-button>
-        <el-button
-          :class="listQuery.type === 'week' ? 'active' : ''" round size="small"
-          @click="selectTimeType('week')"
+          :class="listQuery.timeType === '2' ? 'active' : ''" round size="small" style="margin: 0 5px;"
+          @click="selectTimeType('2')"
         >
           本周
         </el-button>
         <el-button
-          :class="listQuery.type === 'month' ? 'active' : ''" round size="small"
-          @click="selectTimeType('month')"
+          :class="listQuery.timeType === '3' ? 'active' : ''" round size="small" style="margin: 0 5px;"
+          @click="selectTimeType('3')"
         >
           本月
         </el-button>
-        <el-select v-model="listQuery.keywords" placeholder="全部类别" clearable style="width: 180px;margin: 0 5px;" />
+        <el-select v-model="listQuery.ledgerType" placeholder="全部类别" clearable style="width: 180px;margin: 0 5px;">
+          <el-option v-for="item in ledgerTypeList" :key="item.id" :label="item.name" :value="item.id" />
+        </el-select>
         <dept-select
-          v-model="listQuery.keywords" placeholder="管理单位" :clearable="true"
+          v-model="listQuery.deptid" placeholder="管理单位" :clearable="true"
           style="width: 220px;margin: 0 5px;"
         />
         <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
+          style="width: 380px;margin: 0 5px;" value-format="YYYY-MM-DD HH:mm:ss" range-separator="至"
+          start-placeholder="报警开始时间" end-placeholder="报警结束时间" clearable :shortcuts="shortcuts"
         />
-        <el-button type="primary" style="margin: 0 5px;">
+        <el-button type="primary" style="margin: 0 5px;" @click="fetchData">
           搜索
         </el-button>
       </div>
@@ -94,14 +244,22 @@
           <line-chart
             :x-axis-data="xAxisData" :data="data" :gradient="false"
             :legend="{ itemWidth: 8, itemHeight: 8, type: 'scroll', orient: 'horizontal', icon: 'roundRect', right: '0', top: '10' }"
+            :grid="{
+              top: 50,
+              left: 30,
+              right: 30,
+              bottom: 20,
+              containLabel: true, // 是否包含坐标轴的刻度标签
+            }"
           />
         </div>
         <div class="table">
           <el-table border :data="list" stripe style="width: 100%;" :height="440">
-            <el-table-column label="日期" prop="alarmTime" align="center" />
-            <el-table-column label="闸井浓度超限" prop="wellOver" align="center" />
-            <el-table-column label="场站浓度超限" prop="senceOver" align="center" />
-            <el-table-column label="疑似第三方破坏" prop="thirdParty" align="center" />
+            <el-table-column label="日期" prop="date" align="center" width="190" />
+            <el-table-column
+              v-for="item in columns" :key="item.text" :label="item.text" :prop="item.value"
+              align="center"
+            />
           </el-table>
         </div>
       </div>
diff --git a/src/views/home/alarm/current/components/detail.vue b/src/views/home/alarm/current/components/detail.vue
index 4fb61d3..e200fe3 100644
--- a/src/views/home/alarm/current/components/detail.vue
+++ b/src/views/home/alarm/current/components/detail.vue
@@ -7,6 +7,7 @@
 import dayjs from 'dayjs'
 import { ElMessage } from 'element-plus'
 import { alarmProcessNode, detailAlarm } from '@/api/home/alarm/current'
+import { getAlarmDetail } from '@/api/home/alarm/history'
 import { toHumpObject } from '@/utils/String'
 import { getAlarmLevelListPage, getAlarmTypeListPage } from '@/api/home/rule/alarm'
 import { getDateDiff } from '@/utils/dayjs'
@@ -44,7 +45,7 @@
   },
   {
     text: '报警时间',
-    value: 'ts',
+    value: $route.query.type === 'history' ? 'alarmTime' : 'ts',
     align: 'center',
   },
   {
@@ -89,7 +90,7 @@
   },
   {
     text: '处置时长',
-    value: 'duration',
+    value: $route.query.type === 'history' ? 'cancelDuration' : 'duration',
     align: 'center',
   },
   {
@@ -107,8 +108,8 @@
 const fetchDetail = async () => {
   loading.value = true
   const res1 = await getAlarmLevelListPage({ offset: 1, limit: 9999 })
-  const res2 = await getAlarmTypeListPage({ offset: 1, limit: 9999 })
-  detailAlarm($route.query.id as string).then((res) => {
+  const res2 = await getAlarmTypeListPage({ offset: 1, limit: 9999 });
+  ($route.query.type === 'history' ? getAlarmDetail : detailAlarm)($route.query.id as string).then((res) => {
     detailInfo.value = toHumpObject(res.data)
     detailInfo.value.realAlarmName = detailInfo.value.realAlarm === '1' ? '报警' : '误报'
     detailInfo.value.alarmTypeName = res2.data.rows.filter((item: any) => item.id === detailInfo.value.alarmTypeId)[0]?.alarmType || ''
@@ -183,8 +184,12 @@
           </template>
           <div style="padding: 25px;">
             <el-timeline>
-              <el-timeline-item v-for="(item, index) in alarmDynamics" :key="index" :timestamp="item.approvalTime" type="primary">
-                {{ `${item.approvalPerson}${item.dept_name ? '(' : ''}${item.dept_name}${item.dept_name ? ')' : ''}${item.process_name}` }}
+              <el-timeline-item
+                v-for="(item, index) in alarmDynamics" :key="index" :timestamp="item.approvalTime"
+                type="primary"
+              >
+                {{ `${item.approvalPerson}${item.dept_name ? '(' : ''}${item.dept_name}${item.dept_name ? ')'
+                  : ''}${item.process_name}` }}
               </el-timeline-item>
             </el-timeline>
           </div>
diff --git a/src/views/home/alarm/current/index.vue b/src/views/home/alarm/current/index.vue
index 52b2be1..8b36a01 100644
--- a/src/views/home/alarm/current/index.vue
+++ b/src/views/home/alarm/current/index.vue
@@ -4,10 +4,10 @@
   Date: 2023-06-28
  -->
 <script lang="ts" setup name="CurrentAlarm">
-import { ElMessage } from 'element-plus'
+import { ElMessage, ElMessageBox } from 'element-plus'
 import { ArrowLeftBold, ArrowRightBold } from '@element-plus/icons-vue'
 import MapCom from './components/map.vue'
-import { getCurrentAlarmListPage, viewAlarm } from '@/api/home/alarm/current'
+import { batchDelete, getCurrentAlarmListPage, viewAlarm } from '@/api/home/alarm/current'
 import { getDictByCode } from '@/api/system/dict'
 import { getAlarmLevelListPage, getAlarmTypeListPage } from '@/api/home/rule/alarm'
 import { getDeviceTypeListPage } from '@/api/home/device/type'
@@ -66,6 +66,35 @@
     }
   }
 })
+const shortcuts = [
+  {
+    text: '近一周',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setDate(start.getDate() - 7)
+      return [start, end]
+    },
+  },
+  {
+    text: '近一个月',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setMonth(start.getMonth() - 1)
+      return [start, end]
+    },
+  },
+  {
+    text: '近三个月',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setMonth(start.getMonth() - 3)
+      return [start, end]
+    },
+  },
+]
 // 查询数据
 const fetchData = () => {
   loadingTable.value = true
@@ -140,8 +169,8 @@
 const detail = (row: any) => {
   mapData.value = row
   switchMode('map')
-  row.lngGaode = '116.398043'
-  row.latGaode = '39.901552'
+  // row.lngGaode = '116.398043'
+  // row.latGaode = '39.901552'
   // 绘制点
   const draw = () => {
     mapRef.value.mapRef.removeMarker()
@@ -209,6 +238,35 @@
   })
 }
 fetchDict()
+const { proxy } = getCurrentInstance() as any
+// 多选
+const multipleTable = ref([])
+const handleSelectionChange = (val: any) => {
+  console.log(val, '多选数据')
+  multipleTable.value = val
+}
+// 批量删除
+const batchDeleteRow = () => {
+  if (!multipleTable.value.length) {
+    ElMessage.warning('请先选中数据')
+    return
+  }
+  ElMessageBox.confirm(
+    '确定要删除选中的数据吗？',
+    '确认操作',
+    {
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+      type: 'warning',
+    },
+  ).then(() => {
+    batchDelete(multipleTable.value.map((item: any) => item.id)).then(() => {
+      ElMessage.success('操作成功')
+      multipleTable.value = []
+      fetchData()
+    })
+  })
+}
 </script>
 
 <template>
@@ -255,7 +313,7 @@
       </search-item>
       <search-item>
         <el-date-picker
-          v-model="datetimerange" type="datetimerange" format="YYYY-MM-DD HH:mm:ss"
+          v-model="datetimerange" type="datetimerange" format="YYYY-MM-DD HH:mm:ss" :shortcuts="shortcuts"
           value-format="YYYY-MM-DD HH:mm:ss" range-separator="至" start-placeholder="报警开始时间" end-placeholder="报警结束时间"
           clearable
         />
@@ -274,6 +332,9 @@
           <template #btns-right>
             <!-- 操作 -->
             <div>
+              <el-button v-if="proxy.hasPerm('/alarm/current/delete')" type="primary" @click="batchDeleteRow">
+                批量删除
+              </el-button>
               <el-button type="primary">
                 导出
               </el-button>
@@ -282,7 +343,10 @@
           <!-- 查询结果Table显示 -->
           <normal-table
             :data="list1" :total="total" :columns="columnsConfig" :query="listQuery"
-            :list-loading="loadingTable" :height="tableHeight - 50 - 70" @change="changePage"
+            :list-loading="loadingTable" :height="tableHeight - 50 - 70"
+            :is-multi="proxy.hasPerm('/alarm/current/delete')"
+            :is-showmulti-select="proxy.hasPerm('/alarm/current/delete')" @change="changePage"
+            @multiSelect="handleSelectionChange"
           >
             <template #preColumns>
               <el-table-column label="序号" width="55" align="center">
diff --git a/src/views/home/alarm/history/index.vue b/src/views/home/alarm/history/index.vue
index 87bb167..74ca152 100644
--- a/src/views/home/alarm/history/index.vue
+++ b/src/views/home/alarm/history/index.vue
@@ -80,6 +80,35 @@
     }
   }
 })
+const shortcuts = [
+  {
+    text: '近一周',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setDate(start.getDate() - 7)
+      return [start, end]
+    },
+  },
+  {
+    text: '近一个月',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setMonth(start.getMonth() - 1)
+      return [start, end]
+    },
+  },
+  {
+    text: '近三个月',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setMonth(start.getMonth() - 3)
+      return [start, end]
+    },
+  },
+]
 // 查询数据
 const fetchData = () => {
   loadingTable.value = true
@@ -127,10 +156,11 @@
 const $router = useRouter()
 const moreData = (row: any) => {
   $router.push({
-    name: 'AlarmCurrentDetail',
+    name: 'AlarmHistoryDetail',
     query: {
       id: row.id,
       row: JSON.stringify(row),
+      type: 'history',
     },
   })
 }
@@ -218,7 +248,7 @@
       </search-item>
       <search-item>
         <el-date-picker
-          v-model="datetimerange" type="datetimerange" format="YYYY-MM-DD HH:mm:ss"
+          v-model="datetimerange" type="datetimerange" format="YYYY-MM-DD HH:mm:ss" :shortcuts="shortcuts"
           value-format="YYYY-MM-DD HH:mm:ss" range-separator="至" start-placeholder="报警开始时间" end-placeholder="报警结束时间"
           clearable
         />
diff --git a/src/views/home/device/product/index.vue b/src/views/home/device/product/index.vue
index 1bb3d99..2300270 100644
--- a/src/views/home/device/product/index.vue
+++ b/src/views/home/device/product/index.vue
@@ -21,8 +21,8 @@
   { text: '设备型号', value: 'deviceModel', align: 'center' },
   { text: '厂商', value: 'manufacturerName', align: 'center' },
   { text: '通讯协议', value: 'protocolName', align: 'center' },
-  { text: '接入方式', value: 'accessMethodName', align: 'center' },
-  { text: '创建时间', value: 'ts', align: 'center' },
+  { text: '接入方式', value: 'accessMethodName', align: 'center', width: '140' },
+  { text: '创建时间', value: 'ts', align: 'center', width: '200' },
 ])
 // 最终展示列
 const columnsConfig = ref([])
diff --git a/src/views/home/device/type/index.vue b/src/views/home/device/type/index.vue
index 56d7f65..7df5933 100644
--- a/src/views/home/device/type/index.vue
+++ b/src/views/home/device/type/index.vue
@@ -14,12 +14,12 @@
 const total = ref(0)
 // 初始展示列
 const columns = ref<any>([
-  { text: '设备类型代号', value: 'typeCode', align: 'center' },
+  { text: '设备类型代号', value: 'typeCode', align: 'center', width: '110' },
   { text: '设备类型', value: 'typeName', align: 'center' },
   { text: '描述', value: 'typeDescription', align: 'center' },
   { text: '监测对象', value: 'watchObjectName', align: 'center' },
-  { text: '是否启用', value: 'isUsedName', align: 'center' },
-  { text: '操作时间', value: 'ts', align: 'center' },
+  { text: '是否启用', value: 'isUsedName', align: 'center', width: '110' },
+  { text: '操作时间', value: 'ts', align: 'center', width: '200' },
 ])
 // 最终展示列
 const columnsConfig = ref([])
diff --git a/src/views/home/ledger/ledger/components/wellList.vue b/src/views/home/ledger/ledger/components/wellList.vue
index 61eca63..6e40ede 100644
--- a/src/views/home/ledger/ledger/components/wellList.vue
+++ b/src/views/home/ledger/ledger/components/wellList.vue
@@ -22,12 +22,12 @@
   { text: '位号', value: 'tagNumber', align: 'center', isRequired: true, width: '110' },
   { text: '编号', value: 'ledgerCode', align: 'center', isRequired: true, width: '150' },
   { text: '名称', value: 'ledgerName', align: 'center', isRequired: true },
-  { text: '管理单位', value: 'responsibleDept', align: 'center' },
+  { text: '管理单位', value: 'deptName', align: 'center', width: '160' },
   { text: '详细位置', value: 'position', align: 'center' },
-  { text: '产权单位', value: 'deptName', align: 'center', isRequired: true },
-  { text: '管理方式', value: 'manageTypeName', align: 'center', isRequired: true },
-  { text: '使用状态', value: 'onStateName', align: 'center', isRequired: true },
-  { text: '位置状态', value: 'locationStateName', align: 'center', isRequired: true },
+  { text: '产权单位', value: 'responsibleDeptName', align: 'center', isRequired: true },
+  { text: '管理方式', value: 'manageTypeName', align: 'center', isRequired: true, width: '110' },
+  { text: '使用状态', value: 'onStateName', align: 'center', isRequired: true, width: '110' },
+  { text: '位置状态', value: 'locationStateName', align: 'center', isRequired: true, width: '110' },
 ])
 // 最终展示列
 const columnsConfig = ref([])
diff --git a/src/views/home/ledger/pipeline/index.vue b/src/views/home/ledger/pipeline/index.vue
index 0b1dc59..d56a41c 100644
--- a/src/views/home/ledger/pipeline/index.vue
+++ b/src/views/home/ledger/pipeline/index.vue
@@ -16,13 +16,13 @@
 const columns = ref<any>([
   { text: '管线编号', value: 'pipeCode', align: 'center', isRequired: true },
   { text: '管线位置', value: 'position', align: 'center', isRequired: true },
-  { text: '压力级制', value: 'pressTypeName', align: 'center', isRequired: true },
-  { text: '材质', value: 'material', align: 'center' },
-  { text: '管径(mm)', value: 'pipeDiameter', align: 'center' },
-  { text: '建设年代', value: 'constructEra', align: 'center' },
+  { text: '压力级制', value: 'pressTypeName', align: 'center', isRequired: true, width: '110' },
+  { text: '材质', value: 'material', align: 'center', width: '110' },
+  { text: '管径(mm)', value: 'pipeDiameter', align: 'center', width: '110' },
+  { text: '建设年代', value: 'constructEra', align: 'center', width: '110' },
   { text: '管理单位', value: 'deptName', align: 'center', isRequired: true },
   { text: '产权单位', value: 'propertyOwner', align: 'center', isRequired: true },
-  { text: '管理方式', value: 'manageTypeName', align: 'center', isRequired: true },
+  { text: '管理方式', value: 'manageTypeName', align: 'center', isRequired: true, width: '110' },
 ])
 // 最终展示列
 const columnsConfig = ref([])
diff --git a/src/views/home/ledger/sync/index.vue b/src/views/home/ledger/sync/index.vue
index dee1350..6607896 100644
--- a/src/views/home/ledger/sync/index.vue
+++ b/src/views/home/ledger/sync/index.vue
@@ -13,8 +13,8 @@
 const total = ref(0)
 // 初始展示列
 const columns = ref<any>([
-  { text: '开始时间', value: 'tagNumber', align: 'center', isRequired: true },
-  { text: '结束时间', value: 'ledgerCode', align: 'center', isRequired: true },
+  { text: '开始时间', value: 'tagNumber', align: 'center', isRequired: true, width: '190' },
+  { text: '结束时间', value: 'ledgerCode', align: 'center', isRequired: true, width: '190' },
   { text: '操作人', value: 'ledgerName', align: 'center', isRequired: true },
   { text: '同步类型', value: 'responsibleDept', align: 'center' },
   { text: '同步结果', value: 'position', align: 'center' },
diff --git a/src/views/home/operation/alarm/index.vue b/src/views/home/operation/alarm/index.vue
index ef04fd4..dc0f53c 100644
--- a/src/views/home/operation/alarm/index.vue
+++ b/src/views/home/operation/alarm/index.vue
@@ -17,8 +17,8 @@
   { text: '报警类型', value: 'alarmTypeName', align: 'center' },
   { text: '报警原因', value: 'alarmReason', align: 'center' },
   { text: '管理单位', value: 'deptName', align: 'center' },
-  { text: '状态', value: 'status', align: 'center' },
-  { text: '报警时间', value: 'alarmTime', align: 'center' },
+  { text: '状态', value: 'status', align: 'center', width: '110' },
+  { text: '报警时间', value: 'alarmTime', align: 'center', width: '200' },
 ])
 // 最终展示列
 const columnsConfig = ref([])
diff --git a/src/views/home/operation/manufacturer/index.vue b/src/views/home/operation/manufacturer/index.vue
index f439521..76ce423 100644
--- a/src/views/home/operation/manufacturer/index.vue
+++ b/src/views/home/operation/manufacturer/index.vue
@@ -18,13 +18,13 @@
 const columns = ref<any>([
   { text: '设备编号', value: 'devcode', align: 'center' },
   { text: '设备类型', value: 'deviceTypeName', align: 'center' },
-  { text: '运维类型', value: 'repairTypeName', align: 'center' },
+  { text: '运维类型', value: 'repairTypeName', align: 'center', width: '110' },
   { text: '安装位置', value: 'ledgerNumber', align: 'center' },
   { text: '详细位置', value: 'position', align: 'center' },
   { text: '管理单位', value: '', align: 'center' },
   { text: '运维内容', value: 'repairContent', align: 'center' },
-  { text: '运维人员', value: 'repairPerson', align: 'center' },
-  { text: '维护时间', value: 'finishTime', align: 'center' },
+  { text: '运维人员', value: 'repairPerson', align: 'center', width: '120' },
+  { text: '维护时间', value: 'finishTime', align: 'center', width: '200' },
 ])
 // 最终展示列
 const columnsConfig = ref([])
diff --git a/src/views/home/pipeline/components/detailInfoDialog.vue b/src/views/home/pipeline/components/detailInfoDialog.vue
index 1662e6e..76380ed 100644
--- a/src/views/home/pipeline/components/detailInfoDialog.vue
+++ b/src/views/home/pipeline/components/detailInfoDialog.vue
@@ -153,7 +153,7 @@
     width: 100%;
     display: flex;
     justify-content: space-between;
-    padding: 2px 10px;
+    padding: 8px 10px;
     align-items: center;
     color: #fff;
 
diff --git a/src/views/home/rule/agreement/index.vue b/src/views/home/rule/agreement/index.vue
index 6f2695a..2e6c2a5 100644
--- a/src/views/home/rule/agreement/index.vue
+++ b/src/views/home/rule/agreement/index.vue
@@ -15,10 +15,10 @@
 const columns = ref<any>([
   { text: '协议名称', value: 'protocolName', align: 'center' },
   { text: '协议编码', value: 'protocolCode', align: 'center' },
-  { text: '协议版本', value: 'version', align: 'center' },
+  { text: '协议版本', value: 'version', align: 'center', width: '130' },
   { text: '备注', value: 'description', align: 'center' },
-  { text: '上传地址', value: 'ip', align: 'center' },
-  { text: '创建时间', value: 'ts', align: 'center' },
+  { text: '上传地址', value: 'ip', align: 'center', width: '200' },
+  { text: '创建时间', value: 'ts', align: 'center', width: '200' },
 ])
 // 最终展示列
 const columnsConfig = ref([])
diff --git a/src/views/home/rule/alarm/components/alarmLevelList.vue b/src/views/home/rule/alarm/components/alarmLevelList.vue
index 40c1e43..c8ffb7d 100644
--- a/src/views/home/rule/alarm/components/alarmLevelList.vue
+++ b/src/views/home/rule/alarm/components/alarmLevelList.vue
@@ -29,6 +29,7 @@
 const fetchData = () => {
   loadingTable.value = true
   getAlarmLevelListPage(listQuery.value).then((res) => {
+    list.value = []
     list.value = res.data.rows.map((item: any) => ({
       ...item,
       isSendName: item.isSend === '0' ? '关' : '开',
diff --git a/src/views/home/rule/alarm/components/alarmTypeList.vue b/src/views/home/rule/alarm/components/alarmTypeList.vue
index f3bc573..2cbf110 100644
--- a/src/views/home/rule/alarm/components/alarmTypeList.vue
+++ b/src/views/home/rule/alarm/components/alarmTypeList.vue
@@ -27,7 +27,9 @@
 const fetchData = () => {
   loadingTable.value = true
   getAlarmTypeListPage(listQuery.value).then((res) => {
+    list.value = []
     list.value = res.data.rows
+    console.log(res.data.rows, 'res.data.rows')
     total.value = res.data.total
     loadingTable.value = false
   }).catch(() => {
diff --git a/src/views/home/rule/alarm/components/editAlarmTypeDialog.vue b/src/views/home/rule/alarm/components/editAlarmTypeDialog.vue
index 59c523f..fc50080 100644
--- a/src/views/home/rule/alarm/components/editAlarmTypeDialog.vue
+++ b/src/views/home/rule/alarm/components/editAlarmTypeDialog.vue
@@ -19,6 +19,7 @@
   alarmCategory: '', // 报警类别
   alarmType: '', // 报警类型
   deviceTypeIds: [] as any, // 设备类型ids
+  deviceTypeIdStrs: '',
   id: '',
 }) // 表单
 const textMap: { [key: string]: string } = {
@@ -37,6 +38,7 @@
     alarmCategory: '', // 报警类别
     alarmType: '', // 报警类型
     deviceTypeIds: [] as any, // 设备类型ids
+    deviceTypeIdStrs: '',
     id: '',
   }
 }
@@ -56,7 +58,8 @@
     dataForm.value = {
       ...JSON.parse(JSON.stringify(row)),
     }
-    dataForm.value.deviceTypeIds = deviceTypeList.value.length ? deviceTypeList.value.filter((item: any) => item.name === dataForm.value.deviceTypeName)[0].id : ''
+    dataForm.value.deviceTypeIds = dataForm.value.deviceTypeIdStrs.split(',')
+    // dataForm.value.deviceTypeIds = deviceTypeList.value.length ? deviceTypeList.value.filter((item: any) => item.name === dataForm.value.deviceTypeName)[0].id : ''
     // dataForm.value.deviceTypeIds ? dataForm.value.deviceTypeIds : []
   }
 }
@@ -68,6 +71,7 @@
 const createData = () => {
   dataFormRef.value.validate((valid: any) => {
     if (valid) {
+      dataForm.value.deviceTypeIdStrs = dataForm.value.deviceTypeIds.join()
       addAlarmType(dataForm.value).then((response) => {
         if (response.code === 200) {
           ElMessage({
@@ -158,8 +162,8 @@
         <el-col :span="24">
           <el-form-item label="设备类型" prop="deviceTypeIds">
             <el-select
-              v-model.trim="dataForm.deviceTypeIds" placeholder="设备类型" style="width: 100%;" clearable :multiple="dialogStatus === 'edit' ? false : true"
-              filterable :disabled="dialogStatus === 'create' ? false : true"
+              v-model.trim="dataForm.deviceTypeIds" placeholder="设备类型" style="width: 100%;" clearable
+              multiple filterable
             >
               <el-option v-for="item in deviceTypeList" :key="item.id" :label="item.name" :value="item.value" />
             </el-select>
diff --git a/src/views/home/rule/alarm/index.vue b/src/views/home/rule/alarm/index.vue
index 99084a0..110030c 100644
--- a/src/views/home/rule/alarm/index.vue
+++ b/src/views/home/rule/alarm/index.vue
@@ -23,7 +23,7 @@
   { text: '报警名称', value: 'alarmName', align: 'center' },
   { text: '报警等级', value: 'alarmLevelName', align: 'center' },
   { text: '报警提示方式', value: 'alarmNoteMethodName', align: 'center' },
-  { text: '状态', value: 'stateName', align: 'center' },
+  { text: '状态', value: 'stateName', align: 'center', width: '130' },
   { text: '创建时间', value: 'ts', align: 'center' },
 ])
 // 最终展示列

diff --git a/src/api/home/alarm/count.ts b/src/api/home/alarm/count.ts
index 1f4b59a..d5d9244 100644
--- a/src/api/home/alarm/count.ts
+++ b/src/api/home/alarm/count.ts
@@ -34,3 +34,11 @@
     data,
   })
 }
+// 报警趋势分析
+export function getAlarmTrend(data: any) {
+  return request({
+    url: '/statics/alarmRecords/alarmTrend',
+    method: 'post',
+    data,
+  })
+}
diff --git a/src/api/home/alarm/current.ts b/src/api/home/alarm/current.ts
index ec20f64..ac3387f 100644
--- a/src/api/home/alarm/current.ts
+++ b/src/api/home/alarm/current.ts
@@ -57,3 +57,13 @@
     },
   })
 }
+// 批量删除
+export function batchDelete(ids: any) {
+  return request({
+    url: '/system/alarmRecords/batchDelete',
+    method: 'post',
+    data: {
+      ids,
+    },
+  })
+}
diff --git a/src/api/home/alarm/history.ts b/src/api/home/alarm/history.ts
index 5f55e82..44cf851 100644
--- a/src/api/home/alarm/history.ts
+++ b/src/api/home/alarm/history.ts
@@ -11,3 +11,13 @@
     data,
   })
 }
+// 详情
+export function getAlarmDetail(id: any) {
+  return request({
+    url: '/system/alarmRecords/historyAlarmDetail',
+    method: 'post',
+    data: {
+      id,
+    },
+  })
+}
diff --git a/src/components/Echart/LineChart.vue b/src/components/Echart/LineChart.vue
index 2733161..b811f29 100644
--- a/src/components/Echart/LineChart.vue
+++ b/src/components/Echart/LineChart.vue
@@ -207,7 +207,7 @@
         },
       },
       valueFormatter: (value: string | number) => {
-        return value ? value + props.unit : ''
+        return value ? value + props.unit : value === 0 ? '0' : ''
       },
     }, // 提示框
     xAxis: [
diff --git a/src/router/modules/pc.ts b/src/router/modules/pc.ts
index 9b058fa..f3edac9 100644
--- a/src/router/modules/pc.ts
+++ b/src/router/modules/pc.ts
@@ -94,6 +94,19 @@
         },
       },
       {
+        path: '/history/detail',
+        component: () => import('@/views/home/alarm/current/components/detail.vue'),
+        name: 'AlarmHistoryDetail',
+        meta: {
+          title: '报警详情',
+          icon: 'ep:key',
+          sidebar: false,
+          breadcrumb: true,
+          activeMenu: '/alarm/history',
+          auth: '/alarm/history',
+        },
+      },
+      {
         path: 'count',
         component: () => import('@/views/home/alarm/count/index.vue'),
         name: 'AlarmCount',
diff --git a/src/views/home/alarm/count/components/alarmStatistics.vue b/src/views/home/alarm/count/components/alarmStatistics.vue
index b088de2..7aa930f 100644
--- a/src/views/home/alarm/count/components/alarmStatistics.vue
+++ b/src/views/home/alarm/count/components/alarmStatistics.vue
@@ -34,13 +34,12 @@
     value: '3',
   },
 ])
-const xAxisData = ref([])
-const data = ref([])
+const xAxisData = ref<string[]>([])
+const data = ref<any[]>([])
 const list = ref([])
 const loading = ref(true)
 // 开始结束时间
 const datetimerange = ref()
-// 默认当天
 watch(() => datetimerange.value, (newVal) => {
   listQuery.value.begTime = ''
   listQuery.value.endTime = ''
@@ -51,6 +50,35 @@
     }
   }
 })
+const shortcuts = [
+  {
+    text: '近一周',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setDate(start.getDate() - 7)
+      return [start, end]
+    },
+  },
+  {
+    text: '近一个月',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setMonth(start.getMonth() - 1)
+      return [start, end]
+    },
+  },
+  {
+    text: '近三个月',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setMonth(start.getMonth() - 3)
+      return [start, end]
+    },
+  },
+]
 // setTimeout(() => {
 //   xAxisData.value = [
 //     '闸井浓度超限', '场站浓度超限', '场站火焰报警', '疑似第三方破坏', '场站烟雾报警',
@@ -66,10 +94,25 @@
 //     value: data.value[0].data[index],
 //   }))
 // }, 1000)
+const resizePage = () => {
+  setTimeout(() => {
+    const resize = new Event('resize')
+    window.dispatchEvent(resize)
+  }, 500)
+}
 const fetchData = () => {
   loading.value = true
   getAlarmType(listQuery.value).then((res) => {
-    console.log(res.data, '各类报警统计')
+    // console.log(res.data, '各类报警统计')
+    xAxisData.value = res.data.map((item: any) => item.name)
+    data.value = [
+      {
+        name: '报警数量',
+        data: res.data.map((item: any) => item.value),
+      },
+    ]
+    list.value = res.data
+    resizePage
     loading.value = false
   }).catch(() => {
     loading.value = false
@@ -105,8 +148,8 @@
           style="width: 220px;margin: 0 5px;"
         />
         <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="至"
+          v-model="datetimerange" type="datetimerange" format="YYYY-MM-DD HH:mm:ss" :shortcuts="shortcuts"
+          style="width: 380px;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;" @click="fetchData">
@@ -118,8 +161,8 @@
       <div v-loading="loading" class="alarm-count">
         <div class="bar">
           <bar-chart-vertical
-            v-show="xAxisData.length"
-            :x-axis-data="xAxisData" :bar-coner="0" :data="data" :colors="[]" :bar-width="15"
+            v-show="xAxisData.length" :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' }"
             :grid="{
               top: 50,
@@ -133,7 +176,7 @@
         </div>
         <div class="table">
           <el-table border :data="list" stripe style="width: 100%;" :height="440">
-            <el-table-column label="报警类型" prop="alarmType" align="center" />
+            <el-table-column label="报警类型" prop="name" align="center" />
             <el-table-column label="报警数量" prop="value" align="center" />
           </el-table>
         </div>
diff --git a/src/views/home/alarm/count/components/deptCount.vue b/src/views/home/alarm/count/components/deptCount.vue
index 1ca5482..798bfd2 100644
--- a/src/views/home/alarm/count/components/deptCount.vue
+++ b/src/views/home/alarm/count/components/deptCount.vue
@@ -5,40 +5,123 @@
  -->
 <script lang="ts" setup name="AlarmCount">
 import layout from './layout.vue'
+import { getAlarmCompany } from '@/api/home/alarm/count'
 const listQuery = ref({
-  type: 'day',
+  begTime: '',
+  endTime: '',
+  ledgerType: '',
+  timeType: '1',
 })
 const selectTimeType = (type: string) => {
-  listQuery.value.type = type
+  listQuery.value.timeType = type
 }
+// 开始结束时间
+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 shortcuts = [
+  {
+    text: '近一周',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setDate(start.getDate() - 7)
+      return [start, end]
+    },
+  },
+  {
+    text: '近一个月',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setMonth(start.getMonth() - 1)
+      return [start, end]
+    },
+  },
+  {
+    text: '近三个月',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setMonth(start.getMonth() - 3)
+      return [start, end]
+    },
+  },
+]
+// 类别
+const ledgerTypeList = ref<{ id: string; name: string; value: string }[]>([
+  {
+    name: '闸井',
+    id: '1',
+    value: '1',
+  },
+  {
+    name: '场站',
+    id: '2',
+    value: '2',
+  },
+  {
+    name: '管线',
+    id: '3',
+    value: '3',
+  },
+])
 const xAxisData = ref([])
 const data = ref([])
 const list = ref([])
-setTimeout(() => {
-  xAxisData.value = [
-    '第一分公司', '第二分公司', '第三分公司', '第四分公司', '第五分公司',
-  ]
-  data.value = [
-    {
-      name: '闸井浓度超限',
-      data: [1, 8, 5, 8, 4],
-    },
-    {
-      name: '场站浓度超限',
-      data: [8, 3, 6, 1, 7],
-    },
-    {
-      name: '疑似第三方破坏',
-      data: [4, 7, 5, 9, 4],
-    },
-  ]
-  list.value = xAxisData.value.map((item, index) => ({
-    dept: item,
-    wellOver: data.value[0].data[index],
-    senceOver: data.value[1].data[index],
-    thirdParty: data.value[2].data[index],
-  }))
-}, 1000)
+const loading = ref(true)
+// setTimeout(() => {
+//   xAxisData.value = [
+//     '第一分公司', '第二分公司', '第三分公司', '第四分公司', '第五分公司',
+//   ]
+//   data.value = [
+//     {
+//       name: '闸井浓度超限',
+//       data: [1, 8, 5, 8, 4],
+//     },
+//     {
+//       name: '场站浓度超限',
+//       data: [8, 3, 6, 1, 7],
+//     },
+//     {
+//       name: '疑似第三方破坏',
+//       data: [4, 7, 5, 9, 4],
+//     },
+//   ]
+//   list.value = xAxisData.value.map((item, index) => ({
+//     dept: item,
+//     wellOver: data.value[0].data[index],
+//     senceOver: data.value[1].data[index],
+//     thirdParty: data.value[2].data[index],
+//   }))
+// }, 1000)
+const resizePage = () => {
+  setTimeout(() => {
+    const resize = new Event('resize')
+    window.dispatchEvent(resize)
+  }, 500)
+}
+const fetchData = () => {
+  loading.value = true
+  getAlarmCompany(listQuery.value).then((res) => {
+    console.log(res.data, '各单位报警统计')
+    resizePage()
+    loading.value = false
+  }).catch(() => {
+    loading.value = false
+  })
+}
+onMounted(() => {
+  fetchData()
+})
 </script>
 
 <template>
@@ -47,49 +130,59 @@
     <template #search>
       <div class="search">
         <el-button
-          :class="listQuery.type === 'day' ? 'active' : ''" round size="small"
-          @click="selectTimeType('day')"
+          :class="listQuery.timeType === '1' ? 'active' : ''" round size="small"
+          style="margin: 0 5px;"
+          @click="selectTimeType('1')"
         >
           今日
         </el-button>
         <el-button
-          :class="listQuery.type === 'week' ? 'active' : ''" round size="small"
-          @click="selectTimeType('week')"
+          :class="listQuery.timeType === '2' ? 'active' : ''" round size="small"
+          style="margin: 0 5px;"
+          @click="selectTimeType('2')"
         >
           本周
         </el-button>
         <el-button
-          :class="listQuery.type === 'month' ? 'active' : ''" round size="small"
-          @click="selectTimeType('month')"
+          :class="listQuery.timeType === '3' ? 'active' : ''" round size="small"
+          style="margin: 0 5px;"
+          @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 v-for="item in ledgerTypeList" :key="item.id" :label="item.name" :value="item.id" />
+        </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
+          style="width: 380px;margin: 0 5px;" value-format="YYYY-MM-DD HH:mm:ss" range-separator="至"
+          start-placeholder="报警开始时间" end-placeholder="报警结束时间" clearable :shortcuts="shortcuts"
         />
-        <el-button type="primary" style="margin: 0 5px;">
+        <el-button type="primary" style="margin: 0 5px;" @click="fetchData">
           搜索
         </el-button>
       </div>
     </template>
     <template #content>
-      <div class="alarm-count">
+      <div v-loading="loading" class="alarm-count">
         <div class="bar">
           <bar-chart-vertical
+            v-show="xAxisData.length"
             :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' }"
+            :grid="{
+              top: 50,
+              left: 30,
+              right: 30,
+              bottom: 20,
+              containLabel: true, // 是否包含坐标轴的刻度标签
+            }"
           />
+          <el-empty v-show="!xAxisData.length" description="暂无数据" />
         </div>
         <div class="table">
           <el-table border :data="list" stripe style="width: 100%;" :height="440">
-            <el-table-column label="管理单位" prop="dept" align="center" />
+            <el-table-column label="管理单位" prop="dept" align="center" width="200" />
             <el-table-column label="闸井浓度超限" prop="wellOver" align="center" />
             <el-table-column label="场站浓度超限" prop="senceOver" align="center" />
             <el-table-column label="疑似第三方破坏" prop="thirdParty" align="center" />
diff --git a/src/views/home/alarm/count/components/locationAnalysis.vue b/src/views/home/alarm/count/components/locationAnalysis.vue
index 4265aaf..4cd5921 100644
--- a/src/views/home/alarm/count/components/locationAnalysis.vue
+++ b/src/views/home/alarm/count/components/locationAnalysis.vue
@@ -18,7 +18,7 @@
 // 开始结束时间
 const datetimerange = ref()
 // 默认当天
-datetimerange.value = [`${dayjs().format('YYYY-MM-DD')} 00:00:00`, dayjs().format('YYYY-MM-DD HH:mm:ss')]
+// datetimerange.value = [`${dayjs().format('YYYY-MM-DD')} 00:00:00`, dayjs().format('YYYY-MM-DD HH:mm:ss')]
 watch(() => datetimerange.value, (newVal) => {
   listQuery.value.begTime = ''
   listQuery.value.endTime = ''
@@ -29,6 +29,35 @@
     }
   }
 })
+const shortcuts = [
+  {
+    text: '近一周',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setDate(start.getDate() - 7)
+      return [start, end]
+    },
+  },
+  {
+    text: '近一个月',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setMonth(start.getMonth() - 1)
+      return [start, end]
+    },
+  },
+  {
+    text: '近三个月',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setMonth(start.getMonth() - 3)
+      return [start, end]
+    },
+  },
+]
 const selectTimeType = (type: string) => {
   listQuery.value.timeType = type
 }
@@ -52,13 +81,13 @@
     <!-- 查询条件 -->
     <template #search>
       <div class="search">
-        <el-button :class="listQuery.timeType === '1' ? 'active' : ''" round size="small" @click="selectTimeType('1')">
+        <el-button :class="listQuery.timeType === '1' ? 'active' : ''" round size="small" style="margin: 0 5px;" @click="selectTimeType('1')">
           今日
         </el-button>
-        <el-button :class="listQuery.timeType === '2' ? 'active' : ''" round size="small" @click="selectTimeType('2')">
+        <el-button :class="listQuery.timeType === '2' ? 'active' : ''" round size="small" style="margin: 0 5px;" @click="selectTimeType('2')">
           本周
         </el-button>
-        <el-button :class="listQuery.timeType === '3' ? 'active' : ''" round size="small" @click="selectTimeType('3')">
+        <el-button :class="listQuery.timeType === '3' ? 'active' : ''" round size="small" style="margin: 0 5px;" @click="selectTimeType('3')">
           本月
         </el-button>
         <el-select v-model="listQuery.ledgerType" placeholder="全部类别" clearable style="width: 180px;margin: 0 5px;">
@@ -68,8 +97,8 @@
         </el-select>
         <el-date-picker
           v-model="datetimerange" type="datetimerange" format="YYYY-MM-DD HH:mm:ss"
-          style="width: 360px;margin: 0 5px;" value-format="YYYY-MM-DD HH:mm:ss" range-separator="至"
-          start-placeholder="报警开始时间" end-placeholder="报警结束时间" clearable
+          style="width: 380px;margin: 0 5px;" value-format="YYYY-MM-DD HH:mm:ss" range-separator="至"
+          start-placeholder="报警开始时间" end-placeholder="报警结束时间" clearable :shortcuts="shortcuts"
         />
         <el-button type="primary" style="margin: 0 5px;" @click="fetchData">
           搜索
@@ -80,13 +109,13 @@
       <div class="alarm-count">
         <div class="table">
           <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="type" align="center" width="140" />
+            <el-table-column label="位号" prop="tagNumber" align="center" width="160" />
             <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-column label="标签" prop="marker" align="center" width="140" />
+            <el-table-column label="报警次数" prop="alarmSum" align="center" width="120" />
           </el-table>
         </div>
       </div>
diff --git a/src/views/home/alarm/count/components/trendAnalysis.vue b/src/views/home/alarm/count/components/trendAnalysis.vue
index 73e18b0..18cfb4c 100644
--- a/src/views/home/alarm/count/components/trendAnalysis.vue
+++ b/src/views/home/alarm/count/components/trendAnalysis.vue
@@ -5,49 +5,203 @@
  -->
 <script lang="ts" setup name="TrendAnalysis">
 import layout from './layout.vue'
+import { getAlarmTrend } from '@/api/home/alarm/count'
 const listQuery = ref({
-  type: 'day',
+  timeType: '2',
+  ledgerType: '',
+  endTime: '',
+  begTime: '',
+  deptid: '',
 })
+// 开始结束时间
+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 shortcuts = [
+  {
+    text: '近一周',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setDate(start.getDate() - 7)
+      return [start, end]
+    },
+  },
+  {
+    text: '近一个月',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setMonth(start.getMonth() - 1)
+      return [start, end]
+    },
+  },
+  {
+    text: '近三个月',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setMonth(start.getMonth() - 3)
+      return [start, end]
+    },
+  },
+]
 const selectTimeType = (type: string) => {
-  listQuery.value.type = type
+  listQuery.value.timeType = type
 }
-const xAxisData = ref([])
-const data = ref([])
+const columns = ref<any[]>([
+  {
+    text: '闸井浓度超限',
+    value: 'well',
+  },
+  {
+    text: '场站浓度超限',
+    value: 'station',
+  },
+  {
+    text: '管线浓度超限',
+    value: 'pipeline',
+  },
+])
+// 类别
+const ledgerTypeList = ref<{ id: string; name: string; value: string }[]>([
+  {
+    name: '闸井',
+    id: '1',
+    value: '1',
+  },
+  {
+    name: '场站',
+    id: '2',
+    value: '2',
+  },
+  {
+    name: '管线',
+    id: '3',
+    value: '3',
+  },
+])
+const xAxisData = ref<string[]>([])
+const data = ref<any[]>([])
 const list = ref([])
-setTimeout(() => {
-  xAxisData.value = [
-    '2024-07-01 12:11:12',
-    '2024-07-02 12:11:12',
-    '2024-07-03 12:11:12',
-    '2024-07-04 12:11:12',
-    '2024-07-05 12:11:12',
-    '2024-07-06 12:11:12',
-    '2024-07-07 12:11:12',
-  ]
-  data.value = [
-    {
-      name: '闸井浓度超限',
-      data: [1, 3, 5, 1, 4, 2, 7],
-      symbol: 'emptyCircle',
-    },
-    {
-      name: '场站浓度超限',
-      data: [2, 1, 4, 1, 5, 2, 9],
-      symbol: 'emptyCircle',
-    },
-    {
-      name: '闸井浓度超限',
-      data: [4, 3, 2, 4, 7, 9, 1],
-      symbol: 'emptyCircle',
-    },
-  ]
-  list.value = xAxisData.value.map((item, index) => ({
-    alarmTime: item,
-    wellOver: data.value[0].data[index],
-    senceOver: data.value[1].data[index],
-    thirdParty: data.value[2].data[index],
-  }))
-}, 1000)
+const loading = ref(true)
+// setTimeout(() => {
+//   xAxisData.value = [
+//     '2024-07-01 12:11:12',
+//     '2024-07-02 12:11:12',
+//     '2024-07-03 12:11:12',
+//     '2024-07-04 12:11:12',
+//     '2024-07-05 12:11:12',
+//     '2024-07-06 12:11:12',
+//     '2024-07-07 12:11:12',
+//   ]
+//   data.value = [
+//     {
+//       name: '闸井浓度超限',
+//       data: [1, 3, 5, 1, 4, 2, 7],
+//       symbol: 'emptyCircle',
+//     },
+//     {
+//       name: '场站浓度超限',
+//       data: [2, 1, 4, 1, 5, 2, 9],
+//       symbol: 'emptyCircle',
+//     },
+//     {
+//       name: '闸井浓度超限',
+//       data: [4, 3, 2, 4, 7, 9, 1],
+//       symbol: 'emptyCircle',
+//     },
+//   ]
+//   list.value = xAxisData.value.map((item, index) => ({
+//     alarmTime: item,
+//     wellOver: data.value[0].data[index],
+//     senceOver: data.value[1].data[index],
+//     thirdParty: data.value[2].data[index],
+//   }))
+// }, 1000)
+const resizePage = () => {
+  setTimeout(() => {
+    const resize = new Event('resize')
+    window.dispatchEvent(resize)
+  }, 500)
+}
+const fetchData = () => {
+  loading.value = true
+  const columnsDict = {
+    闸井浓度超限: 'well',
+    场站浓度超限: 'station',
+    管线浓度超限: 'pipeline',
+  } as { [key: string]: string }
+  getAlarmTrend(listQuery.value).then((res) => {
+    console.log(res.data, '报警趋势分析')
+    xAxisData.value = res.data.map((item: any) => item.date)
+    if (!listQuery.value.ledgerType) {
+      data.value = [
+        {
+          name: '闸井浓度超限',
+          data: res.data.map((item: any) => item['闸井浓度超限']),
+        },
+        {
+          name: '场站浓度超限',
+          data: res.data.map((item: any) => item['场站浓度超限']),
+        },
+        {
+          name: '管线浓度超限',
+          data: res.data.map((item: any) => item['管线浓度超限']),
+        },
+      ]
+    }
+    else if (listQuery.value.ledgerType === '1') {
+      data.value = [
+        {
+          name: '闸井浓度超限',
+          data: res.data.map((item: any) => item['闸井浓度超限']),
+        },
+      ]
+    }
+    else if (listQuery.value.ledgerType === '2') {
+      data.value = [
+        {
+          name: '场站浓度超限',
+          data: res.data.map((item: any) => item['场站浓度超限']),
+        },
+      ]
+    }
+    else if (listQuery.value.ledgerType === '3') {
+      data.value = [
+        {
+          name: '管线浓度超限',
+          data: res.data.map((item: any) => item['管线浓度超限']),
+        },
+      ]
+    }
+    list.value = res.data.map((item: any) => ({
+      date: item.date,
+      well: item['闸井浓度超限'],
+      station: item['场站浓度超限'],
+      pipeline: item['管线浓度超限'],
+    }))
+    columns.value = data.value.map((item: any) => ({
+      text: item.name,
+      value: columnsDict[item.name],
+    }))
+    resizePage()
+    loading.value = false
+  }).catch(() => {
+    loading.value = false
+  })
+}
+onMounted(() => {
+  fetchData()
+})
 </script>
 
 <template>
@@ -56,34 +210,30 @@
     <template #search>
       <div class="search">
         <el-button
-          :class="listQuery.type === 'day' ? 'active' : ''" round size="small"
-          @click="selectTimeType('day')"
-        >
-          今日
-        </el-button>
-        <el-button
-          :class="listQuery.type === 'week' ? 'active' : ''" round size="small"
-          @click="selectTimeType('week')"
+          :class="listQuery.timeType === '2' ? 'active' : ''" round size="small" style="margin: 0 5px;"
+          @click="selectTimeType('2')"
         >
           本周
         </el-button>
         <el-button
-          :class="listQuery.type === 'month' ? 'active' : ''" round size="small"
-          @click="selectTimeType('month')"
+          :class="listQuery.timeType === '3' ? 'active' : ''" round size="small" style="margin: 0 5px;"
+          @click="selectTimeType('3')"
         >
           本月
         </el-button>
-        <el-select v-model="listQuery.keywords" placeholder="全部类别" clearable style="width: 180px;margin: 0 5px;" />
+        <el-select v-model="listQuery.ledgerType" placeholder="全部类别" clearable style="width: 180px;margin: 0 5px;">
+          <el-option v-for="item in ledgerTypeList" :key="item.id" :label="item.name" :value="item.id" />
+        </el-select>
         <dept-select
-          v-model="listQuery.keywords" placeholder="管理单位" :clearable="true"
+          v-model="listQuery.deptid" placeholder="管理单位" :clearable="true"
           style="width: 220px;margin: 0 5px;"
         />
         <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
+          style="width: 380px;margin: 0 5px;" value-format="YYYY-MM-DD HH:mm:ss" range-separator="至"
+          start-placeholder="报警开始时间" end-placeholder="报警结束时间" clearable :shortcuts="shortcuts"
         />
-        <el-button type="primary" style="margin: 0 5px;">
+        <el-button type="primary" style="margin: 0 5px;" @click="fetchData">
           搜索
         </el-button>
       </div>
@@ -94,14 +244,22 @@
           <line-chart
             :x-axis-data="xAxisData" :data="data" :gradient="false"
             :legend="{ itemWidth: 8, itemHeight: 8, type: 'scroll', orient: 'horizontal', icon: 'roundRect', right: '0', top: '10' }"
+            :grid="{
+              top: 50,
+              left: 30,
+              right: 30,
+              bottom: 20,
+              containLabel: true, // 是否包含坐标轴的刻度标签
+            }"
           />
         </div>
         <div class="table">
           <el-table border :data="list" stripe style="width: 100%;" :height="440">
-            <el-table-column label="日期" prop="alarmTime" align="center" />
-            <el-table-column label="闸井浓度超限" prop="wellOver" align="center" />
-            <el-table-column label="场站浓度超限" prop="senceOver" align="center" />
-            <el-table-column label="疑似第三方破坏" prop="thirdParty" align="center" />
+            <el-table-column label="日期" prop="date" align="center" width="190" />
+            <el-table-column
+              v-for="item in columns" :key="item.text" :label="item.text" :prop="item.value"
+              align="center"
+            />
           </el-table>
         </div>
       </div>
diff --git a/src/views/home/alarm/current/components/detail.vue b/src/views/home/alarm/current/components/detail.vue
index 4fb61d3..e200fe3 100644
--- a/src/views/home/alarm/current/components/detail.vue
+++ b/src/views/home/alarm/current/components/detail.vue
@@ -7,6 +7,7 @@
 import dayjs from 'dayjs'
 import { ElMessage } from 'element-plus'
 import { alarmProcessNode, detailAlarm } from '@/api/home/alarm/current'
+import { getAlarmDetail } from '@/api/home/alarm/history'
 import { toHumpObject } from '@/utils/String'
 import { getAlarmLevelListPage, getAlarmTypeListPage } from '@/api/home/rule/alarm'
 import { getDateDiff } from '@/utils/dayjs'
@@ -44,7 +45,7 @@
   },
   {
     text: '报警时间',
-    value: 'ts',
+    value: $route.query.type === 'history' ? 'alarmTime' : 'ts',
     align: 'center',
   },
   {
@@ -89,7 +90,7 @@
   },
   {
     text: '处置时长',
-    value: 'duration',
+    value: $route.query.type === 'history' ? 'cancelDuration' : 'duration',
     align: 'center',
   },
   {
@@ -107,8 +108,8 @@
 const fetchDetail = async () => {
   loading.value = true
   const res1 = await getAlarmLevelListPage({ offset: 1, limit: 9999 })
-  const res2 = await getAlarmTypeListPage({ offset: 1, limit: 9999 })
-  detailAlarm($route.query.id as string).then((res) => {
+  const res2 = await getAlarmTypeListPage({ offset: 1, limit: 9999 });
+  ($route.query.type === 'history' ? getAlarmDetail : detailAlarm)($route.query.id as string).then((res) => {
     detailInfo.value = toHumpObject(res.data)
     detailInfo.value.realAlarmName = detailInfo.value.realAlarm === '1' ? '报警' : '误报'
     detailInfo.value.alarmTypeName = res2.data.rows.filter((item: any) => item.id === detailInfo.value.alarmTypeId)[0]?.alarmType || ''
@@ -183,8 +184,12 @@
           </template>
           <div style="padding: 25px;">
             <el-timeline>
-              <el-timeline-item v-for="(item, index) in alarmDynamics" :key="index" :timestamp="item.approvalTime" type="primary">
-                {{ `${item.approvalPerson}${item.dept_name ? '(' : ''}${item.dept_name}${item.dept_name ? ')' : ''}${item.process_name}` }}
+              <el-timeline-item
+                v-for="(item, index) in alarmDynamics" :key="index" :timestamp="item.approvalTime"
+                type="primary"
+              >
+                {{ `${item.approvalPerson}${item.dept_name ? '(' : ''}${item.dept_name}${item.dept_name ? ')'
+                  : ''}${item.process_name}` }}
               </el-timeline-item>
             </el-timeline>
           </div>
diff --git a/src/views/home/alarm/current/index.vue b/src/views/home/alarm/current/index.vue
index 52b2be1..8b36a01 100644
--- a/src/views/home/alarm/current/index.vue
+++ b/src/views/home/alarm/current/index.vue
@@ -4,10 +4,10 @@
   Date: 2023-06-28
  -->
 <script lang="ts" setup name="CurrentAlarm">
-import { ElMessage } from 'element-plus'
+import { ElMessage, ElMessageBox } from 'element-plus'
 import { ArrowLeftBold, ArrowRightBold } from '@element-plus/icons-vue'
 import MapCom from './components/map.vue'
-import { getCurrentAlarmListPage, viewAlarm } from '@/api/home/alarm/current'
+import { batchDelete, getCurrentAlarmListPage, viewAlarm } from '@/api/home/alarm/current'
 import { getDictByCode } from '@/api/system/dict'
 import { getAlarmLevelListPage, getAlarmTypeListPage } from '@/api/home/rule/alarm'
 import { getDeviceTypeListPage } from '@/api/home/device/type'
@@ -66,6 +66,35 @@
     }
   }
 })
+const shortcuts = [
+  {
+    text: '近一周',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setDate(start.getDate() - 7)
+      return [start, end]
+    },
+  },
+  {
+    text: '近一个月',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setMonth(start.getMonth() - 1)
+      return [start, end]
+    },
+  },
+  {
+    text: '近三个月',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setMonth(start.getMonth() - 3)
+      return [start, end]
+    },
+  },
+]
 // 查询数据
 const fetchData = () => {
   loadingTable.value = true
@@ -140,8 +169,8 @@
 const detail = (row: any) => {
   mapData.value = row
   switchMode('map')
-  row.lngGaode = '116.398043'
-  row.latGaode = '39.901552'
+  // row.lngGaode = '116.398043'
+  // row.latGaode = '39.901552'
   // 绘制点
   const draw = () => {
     mapRef.value.mapRef.removeMarker()
@@ -209,6 +238,35 @@
   })
 }
 fetchDict()
+const { proxy } = getCurrentInstance() as any
+// 多选
+const multipleTable = ref([])
+const handleSelectionChange = (val: any) => {
+  console.log(val, '多选数据')
+  multipleTable.value = val
+}
+// 批量删除
+const batchDeleteRow = () => {
+  if (!multipleTable.value.length) {
+    ElMessage.warning('请先选中数据')
+    return
+  }
+  ElMessageBox.confirm(
+    '确定要删除选中的数据吗？',
+    '确认操作',
+    {
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+      type: 'warning',
+    },
+  ).then(() => {
+    batchDelete(multipleTable.value.map((item: any) => item.id)).then(() => {
+      ElMessage.success('操作成功')
+      multipleTable.value = []
+      fetchData()
+    })
+  })
+}
 </script>
 
 <template>
@@ -255,7 +313,7 @@
       </search-item>
       <search-item>
         <el-date-picker
-          v-model="datetimerange" type="datetimerange" format="YYYY-MM-DD HH:mm:ss"
+          v-model="datetimerange" type="datetimerange" format="YYYY-MM-DD HH:mm:ss" :shortcuts="shortcuts"
           value-format="YYYY-MM-DD HH:mm:ss" range-separator="至" start-placeholder="报警开始时间" end-placeholder="报警结束时间"
           clearable
         />
@@ -274,6 +332,9 @@
           <template #btns-right>
             <!-- 操作 -->
             <div>
+              <el-button v-if="proxy.hasPerm('/alarm/current/delete')" type="primary" @click="batchDeleteRow">
+                批量删除
+              </el-button>
               <el-button type="primary">
                 导出
               </el-button>
@@ -282,7 +343,10 @@
           <!-- 查询结果Table显示 -->
           <normal-table
             :data="list1" :total="total" :columns="columnsConfig" :query="listQuery"
-            :list-loading="loadingTable" :height="tableHeight - 50 - 70" @change="changePage"
+            :list-loading="loadingTable" :height="tableHeight - 50 - 70"
+            :is-multi="proxy.hasPerm('/alarm/current/delete')"
+            :is-showmulti-select="proxy.hasPerm('/alarm/current/delete')" @change="changePage"
+            @multiSelect="handleSelectionChange"
           >
             <template #preColumns>
               <el-table-column label="序号" width="55" align="center">
diff --git a/src/views/home/alarm/history/index.vue b/src/views/home/alarm/history/index.vue
index 87bb167..74ca152 100644
--- a/src/views/home/alarm/history/index.vue
+++ b/src/views/home/alarm/history/index.vue
@@ -80,6 +80,35 @@
     }
   }
 })
+const shortcuts = [
+  {
+    text: '近一周',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setDate(start.getDate() - 7)
+      return [start, end]
+    },
+  },
+  {
+    text: '近一个月',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setMonth(start.getMonth() - 1)
+      return [start, end]
+    },
+  },
+  {
+    text: '近三个月',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setMonth(start.getMonth() - 3)
+      return [start, end]
+    },
+  },
+]
 // 查询数据
 const fetchData = () => {
   loadingTable.value = true
@@ -127,10 +156,11 @@
 const $router = useRouter()
 const moreData = (row: any) => {
   $router.push({
-    name: 'AlarmCurrentDetail',
+    name: 'AlarmHistoryDetail',
     query: {
       id: row.id,
       row: JSON.stringify(row),
+      type: 'history',
     },
   })
 }
@@ -218,7 +248,7 @@
       </search-item>
       <search-item>
         <el-date-picker
-          v-model="datetimerange" type="datetimerange" format="YYYY-MM-DD HH:mm:ss"
+          v-model="datetimerange" type="datetimerange" format="YYYY-MM-DD HH:mm:ss" :shortcuts="shortcuts"
           value-format="YYYY-MM-DD HH:mm:ss" range-separator="至" start-placeholder="报警开始时间" end-placeholder="报警结束时间"
           clearable
         />
diff --git a/src/views/home/device/product/index.vue b/src/views/home/device/product/index.vue
index 1bb3d99..2300270 100644
--- a/src/views/home/device/product/index.vue
+++ b/src/views/home/device/product/index.vue
@@ -21,8 +21,8 @@
   { text: '设备型号', value: 'deviceModel', align: 'center' },
   { text: '厂商', value: 'manufacturerName', align: 'center' },
   { text: '通讯协议', value: 'protocolName', align: 'center' },
-  { text: '接入方式', value: 'accessMethodName', align: 'center' },
-  { text: '创建时间', value: 'ts', align: 'center' },
+  { text: '接入方式', value: 'accessMethodName', align: 'center', width: '140' },
+  { text: '创建时间', value: 'ts', align: 'center', width: '200' },
 ])
 // 最终展示列
 const columnsConfig = ref([])
diff --git a/src/views/home/device/type/index.vue b/src/views/home/device/type/index.vue
index 56d7f65..7df5933 100644
--- a/src/views/home/device/type/index.vue
+++ b/src/views/home/device/type/index.vue
@@ -14,12 +14,12 @@
 const total = ref(0)
 // 初始展示列
 const columns = ref<any>([
-  { text: '设备类型代号', value: 'typeCode', align: 'center' },
+  { text: '设备类型代号', value: 'typeCode', align: 'center', width: '110' },
   { text: '设备类型', value: 'typeName', align: 'center' },
   { text: '描述', value: 'typeDescription', align: 'center' },
   { text: '监测对象', value: 'watchObjectName', align: 'center' },
-  { text: '是否启用', value: 'isUsedName', align: 'center' },
-  { text: '操作时间', value: 'ts', align: 'center' },
+  { text: '是否启用', value: 'isUsedName', align: 'center', width: '110' },
+  { text: '操作时间', value: 'ts', align: 'center', width: '200' },
 ])
 // 最终展示列
 const columnsConfig = ref([])
diff --git a/src/views/home/ledger/ledger/components/wellList.vue b/src/views/home/ledger/ledger/components/wellList.vue
index 61eca63..6e40ede 100644
--- a/src/views/home/ledger/ledger/components/wellList.vue
+++ b/src/views/home/ledger/ledger/components/wellList.vue
@@ -22,12 +22,12 @@
   { text: '位号', value: 'tagNumber', align: 'center', isRequired: true, width: '110' },
   { text: '编号', value: 'ledgerCode', align: 'center', isRequired: true, width: '150' },
   { text: '名称', value: 'ledgerName', align: 'center', isRequired: true },
-  { text: '管理单位', value: 'responsibleDept', align: 'center' },
+  { text: '管理单位', value: 'deptName', align: 'center', width: '160' },
   { text: '详细位置', value: 'position', align: 'center' },
-  { text: '产权单位', value: 'deptName', align: 'center', isRequired: true },
-  { text: '管理方式', value: 'manageTypeName', align: 'center', isRequired: true },
-  { text: '使用状态', value: 'onStateName', align: 'center', isRequired: true },
-  { text: '位置状态', value: 'locationStateName', align: 'center', isRequired: true },
+  { text: '产权单位', value: 'responsibleDeptName', align: 'center', isRequired: true },
+  { text: '管理方式', value: 'manageTypeName', align: 'center', isRequired: true, width: '110' },
+  { text: '使用状态', value: 'onStateName', align: 'center', isRequired: true, width: '110' },
+  { text: '位置状态', value: 'locationStateName', align: 'center', isRequired: true, width: '110' },
 ])
 // 最终展示列
 const columnsConfig = ref([])
diff --git a/src/views/home/ledger/pipeline/index.vue b/src/views/home/ledger/pipeline/index.vue
index 0b1dc59..d56a41c 100644
--- a/src/views/home/ledger/pipeline/index.vue
+++ b/src/views/home/ledger/pipeline/index.vue
@@ -16,13 +16,13 @@
 const columns = ref<any>([
   { text: '管线编号', value: 'pipeCode', align: 'center', isRequired: true },
   { text: '管线位置', value: 'position', align: 'center', isRequired: true },
-  { text: '压力级制', value: 'pressTypeName', align: 'center', isRequired: true },
-  { text: '材质', value: 'material', align: 'center' },
-  { text: '管径(mm)', value: 'pipeDiameter', align: 'center' },
-  { text: '建设年代', value: 'constructEra', align: 'center' },
+  { text: '压力级制', value: 'pressTypeName', align: 'center', isRequired: true, width: '110' },
+  { text: '材质', value: 'material', align: 'center', width: '110' },
+  { text: '管径(mm)', value: 'pipeDiameter', align: 'center', width: '110' },
+  { text: '建设年代', value: 'constructEra', align: 'center', width: '110' },
   { text: '管理单位', value: 'deptName', align: 'center', isRequired: true },
   { text: '产权单位', value: 'propertyOwner', align: 'center', isRequired: true },
-  { text: '管理方式', value: 'manageTypeName', align: 'center', isRequired: true },
+  { text: '管理方式', value: 'manageTypeName', align: 'center', isRequired: true, width: '110' },
 ])
 // 最终展示列
 const columnsConfig = ref([])
diff --git a/src/views/home/ledger/sync/index.vue b/src/views/home/ledger/sync/index.vue
index dee1350..6607896 100644
--- a/src/views/home/ledger/sync/index.vue
+++ b/src/views/home/ledger/sync/index.vue
@@ -13,8 +13,8 @@
 const total = ref(0)
 // 初始展示列
 const columns = ref<any>([
-  { text: '开始时间', value: 'tagNumber', align: 'center', isRequired: true },
-  { text: '结束时间', value: 'ledgerCode', align: 'center', isRequired: true },
+  { text: '开始时间', value: 'tagNumber', align: 'center', isRequired: true, width: '190' },
+  { text: '结束时间', value: 'ledgerCode', align: 'center', isRequired: true, width: '190' },
   { text: '操作人', value: 'ledgerName', align: 'center', isRequired: true },
   { text: '同步类型', value: 'responsibleDept', align: 'center' },
   { text: '同步结果', value: 'position', align: 'center' },
diff --git a/src/views/home/operation/alarm/index.vue b/src/views/home/operation/alarm/index.vue
index ef04fd4..dc0f53c 100644
--- a/src/views/home/operation/alarm/index.vue
+++ b/src/views/home/operation/alarm/index.vue
@@ -17,8 +17,8 @@
   { text: '报警类型', value: 'alarmTypeName', align: 'center' },
   { text: '报警原因', value: 'alarmReason', align: 'center' },
   { text: '管理单位', value: 'deptName', align: 'center' },
-  { text: '状态', value: 'status', align: 'center' },
-  { text: '报警时间', value: 'alarmTime', align: 'center' },
+  { text: '状态', value: 'status', align: 'center', width: '110' },
+  { text: '报警时间', value: 'alarmTime', align: 'center', width: '200' },
 ])
 // 最终展示列
 const columnsConfig = ref([])
diff --git a/src/views/home/operation/manufacturer/index.vue b/src/views/home/operation/manufacturer/index.vue
index f439521..76ce423 100644
--- a/src/views/home/operation/manufacturer/index.vue
+++ b/src/views/home/operation/manufacturer/index.vue
@@ -18,13 +18,13 @@
 const columns = ref<any>([
   { text: '设备编号', value: 'devcode', align: 'center' },
   { text: '设备类型', value: 'deviceTypeName', align: 'center' },
-  { text: '运维类型', value: 'repairTypeName', align: 'center' },
+  { text: '运维类型', value: 'repairTypeName', align: 'center', width: '110' },
   { text: '安装位置', value: 'ledgerNumber', align: 'center' },
   { text: '详细位置', value: 'position', align: 'center' },
   { text: '管理单位', value: '', align: 'center' },
   { text: '运维内容', value: 'repairContent', align: 'center' },
-  { text: '运维人员', value: 'repairPerson', align: 'center' },
-  { text: '维护时间', value: 'finishTime', align: 'center' },
+  { text: '运维人员', value: 'repairPerson', align: 'center', width: '120' },
+  { text: '维护时间', value: 'finishTime', align: 'center', width: '200' },
 ])
 // 最终展示列
 const columnsConfig = ref([])
diff --git a/src/views/home/pipeline/components/detailInfoDialog.vue b/src/views/home/pipeline/components/detailInfoDialog.vue
index 1662e6e..76380ed 100644
--- a/src/views/home/pipeline/components/detailInfoDialog.vue
+++ b/src/views/home/pipeline/components/detailInfoDialog.vue
@@ -153,7 +153,7 @@
     width: 100%;
     display: flex;
     justify-content: space-between;
-    padding: 2px 10px;
+    padding: 8px 10px;
     align-items: center;
     color: #fff;
 
diff --git a/src/views/home/rule/agreement/index.vue b/src/views/home/rule/agreement/index.vue
index 6f2695a..2e6c2a5 100644
--- a/src/views/home/rule/agreement/index.vue
+++ b/src/views/home/rule/agreement/index.vue
@@ -15,10 +15,10 @@
 const columns = ref<any>([
   { text: '协议名称', value: 'protocolName', align: 'center' },
   { text: '协议编码', value: 'protocolCode', align: 'center' },
-  { text: '协议版本', value: 'version', align: 'center' },
+  { text: '协议版本', value: 'version', align: 'center', width: '130' },
   { text: '备注', value: 'description', align: 'center' },
-  { text: '上传地址', value: 'ip', align: 'center' },
-  { text: '创建时间', value: 'ts', align: 'center' },
+  { text: '上传地址', value: 'ip', align: 'center', width: '200' },
+  { text: '创建时间', value: 'ts', align: 'center', width: '200' },
 ])
 // 最终展示列
 const columnsConfig = ref([])
diff --git a/src/views/home/rule/alarm/components/alarmLevelList.vue b/src/views/home/rule/alarm/components/alarmLevelList.vue
index 40c1e43..c8ffb7d 100644
--- a/src/views/home/rule/alarm/components/alarmLevelList.vue
+++ b/src/views/home/rule/alarm/components/alarmLevelList.vue
@@ -29,6 +29,7 @@
 const fetchData = () => {
   loadingTable.value = true
   getAlarmLevelListPage(listQuery.value).then((res) => {
+    list.value = []
     list.value = res.data.rows.map((item: any) => ({
       ...item,
       isSendName: item.isSend === '0' ? '关' : '开',
diff --git a/src/views/home/rule/alarm/components/alarmTypeList.vue b/src/views/home/rule/alarm/components/alarmTypeList.vue
index f3bc573..2cbf110 100644
--- a/src/views/home/rule/alarm/components/alarmTypeList.vue
+++ b/src/views/home/rule/alarm/components/alarmTypeList.vue
@@ -27,7 +27,9 @@
 const fetchData = () => {
   loadingTable.value = true
   getAlarmTypeListPage(listQuery.value).then((res) => {
+    list.value = []
     list.value = res.data.rows
+    console.log(res.data.rows, 'res.data.rows')
     total.value = res.data.total
     loadingTable.value = false
   }).catch(() => {
diff --git a/src/views/home/rule/alarm/components/editAlarmTypeDialog.vue b/src/views/home/rule/alarm/components/editAlarmTypeDialog.vue
index 59c523f..fc50080 100644
--- a/src/views/home/rule/alarm/components/editAlarmTypeDialog.vue
+++ b/src/views/home/rule/alarm/components/editAlarmTypeDialog.vue
@@ -19,6 +19,7 @@
   alarmCategory: '', // 报警类别
   alarmType: '', // 报警类型
   deviceTypeIds: [] as any, // 设备类型ids
+  deviceTypeIdStrs: '',
   id: '',
 }) // 表单
 const textMap: { [key: string]: string } = {
@@ -37,6 +38,7 @@
     alarmCategory: '', // 报警类别
     alarmType: '', // 报警类型
     deviceTypeIds: [] as any, // 设备类型ids
+    deviceTypeIdStrs: '',
     id: '',
   }
 }
@@ -56,7 +58,8 @@
     dataForm.value = {
       ...JSON.parse(JSON.stringify(row)),
     }
-    dataForm.value.deviceTypeIds = deviceTypeList.value.length ? deviceTypeList.value.filter((item: any) => item.name === dataForm.value.deviceTypeName)[0].id : ''
+    dataForm.value.deviceTypeIds = dataForm.value.deviceTypeIdStrs.split(',')
+    // dataForm.value.deviceTypeIds = deviceTypeList.value.length ? deviceTypeList.value.filter((item: any) => item.name === dataForm.value.deviceTypeName)[0].id : ''
     // dataForm.value.deviceTypeIds ? dataForm.value.deviceTypeIds : []
   }
 }
@@ -68,6 +71,7 @@
 const createData = () => {
   dataFormRef.value.validate((valid: any) => {
     if (valid) {
+      dataForm.value.deviceTypeIdStrs = dataForm.value.deviceTypeIds.join()
       addAlarmType(dataForm.value).then((response) => {
         if (response.code === 200) {
           ElMessage({
@@ -158,8 +162,8 @@
         <el-col :span="24">
           <el-form-item label="设备类型" prop="deviceTypeIds">
             <el-select
-              v-model.trim="dataForm.deviceTypeIds" placeholder="设备类型" style="width: 100%;" clearable :multiple="dialogStatus === 'edit' ? false : true"
-              filterable :disabled="dialogStatus === 'create' ? false : true"
+              v-model.trim="dataForm.deviceTypeIds" placeholder="设备类型" style="width: 100%;" clearable
+              multiple filterable
             >
               <el-option v-for="item in deviceTypeList" :key="item.id" :label="item.name" :value="item.value" />
             </el-select>
diff --git a/src/views/home/rule/alarm/index.vue b/src/views/home/rule/alarm/index.vue
index 99084a0..110030c 100644
--- a/src/views/home/rule/alarm/index.vue
+++ b/src/views/home/rule/alarm/index.vue
@@ -23,7 +23,7 @@
   { text: '报警名称', value: 'alarmName', align: 'center' },
   { text: '报警等级', value: 'alarmLevelName', align: 'center' },
   { text: '报警提示方式', value: 'alarmNoteMethodName', align: 'center' },
-  { text: '状态', value: 'stateName', align: 'center' },
+  { text: '状态', value: 'stateName', align: 'center', width: '130' },
   { text: '创建时间', value: 'ts', align: 'center' },
 ])
 // 最终展示列
diff --git a/src/views/home/station/operation/index.vue b/src/views/home/station/operation/index.vue
index 4b2810e..50ed2ab 100644
--- a/src/views/home/station/operation/index.vue
+++ b/src/views/home/station/operation/index.vue
@@ -17,10 +17,10 @@
   { text: '场站名称', value: 'devcode', align: 'center' },
   { text: '管理单位', value: 'deviceTypeName', align: 'center' },
   { text: '详细位置', value: 'repairTypeName', align: 'center' },
-  { text: '维护类型', value: 'ledgerNumber', align: 'center' },
+  { text: '维护类型', value: 'ledgerNumber', align: 'center', width: '160' },
   { text: '维护内容', value: 'position', align: 'center' },
-  { text: '维护人员', value: '', align: 'center' },
-  { text: '维护时间', value: 'repairContent', align: 'center' },
+  { text: '维护人员', value: '', align: 'center', width: '130' },
+  { text: '维护时间', value: 'repairContent', align: 'center', width: '210' },
 ])
 // 最终展示列
 const columnsConfig = ref([])

diff --git a/src/api/home/alarm/count.ts b/src/api/home/alarm/count.ts
index 1f4b59a..d5d9244 100644
--- a/src/api/home/alarm/count.ts
+++ b/src/api/home/alarm/count.ts
@@ -34,3 +34,11 @@
     data,
   })
 }
+// 报警趋势分析
+export function getAlarmTrend(data: any) {
+  return request({
+    url: '/statics/alarmRecords/alarmTrend',
+    method: 'post',
+    data,
+  })
+}
diff --git a/src/api/home/alarm/current.ts b/src/api/home/alarm/current.ts
index ec20f64..ac3387f 100644
--- a/src/api/home/alarm/current.ts
+++ b/src/api/home/alarm/current.ts
@@ -57,3 +57,13 @@
     },
   })
 }
+// 批量删除
+export function batchDelete(ids: any) {
+  return request({
+    url: '/system/alarmRecords/batchDelete',
+    method: 'post',
+    data: {
+      ids,
+    },
+  })
+}
diff --git a/src/api/home/alarm/history.ts b/src/api/home/alarm/history.ts
index 5f55e82..44cf851 100644
--- a/src/api/home/alarm/history.ts
+++ b/src/api/home/alarm/history.ts
@@ -11,3 +11,13 @@
     data,
   })
 }
+// 详情
+export function getAlarmDetail(id: any) {
+  return request({
+    url: '/system/alarmRecords/historyAlarmDetail',
+    method: 'post',
+    data: {
+      id,
+    },
+  })
+}
diff --git a/src/components/Echart/LineChart.vue b/src/components/Echart/LineChart.vue
index 2733161..b811f29 100644
--- a/src/components/Echart/LineChart.vue
+++ b/src/components/Echart/LineChart.vue
@@ -207,7 +207,7 @@
         },
       },
       valueFormatter: (value: string | number) => {
-        return value ? value + props.unit : ''
+        return value ? value + props.unit : value === 0 ? '0' : ''
       },
     }, // 提示框
     xAxis: [
diff --git a/src/router/modules/pc.ts b/src/router/modules/pc.ts
index 9b058fa..f3edac9 100644
--- a/src/router/modules/pc.ts
+++ b/src/router/modules/pc.ts
@@ -94,6 +94,19 @@
         },
       },
       {
+        path: '/history/detail',
+        component: () => import('@/views/home/alarm/current/components/detail.vue'),
+        name: 'AlarmHistoryDetail',
+        meta: {
+          title: '报警详情',
+          icon: 'ep:key',
+          sidebar: false,
+          breadcrumb: true,
+          activeMenu: '/alarm/history',
+          auth: '/alarm/history',
+        },
+      },
+      {
         path: 'count',
         component: () => import('@/views/home/alarm/count/index.vue'),
         name: 'AlarmCount',
diff --git a/src/views/home/alarm/count/components/alarmStatistics.vue b/src/views/home/alarm/count/components/alarmStatistics.vue
index b088de2..7aa930f 100644
--- a/src/views/home/alarm/count/components/alarmStatistics.vue
+++ b/src/views/home/alarm/count/components/alarmStatistics.vue
@@ -34,13 +34,12 @@
     value: '3',
   },
 ])
-const xAxisData = ref([])
-const data = ref([])
+const xAxisData = ref<string[]>([])
+const data = ref<any[]>([])
 const list = ref([])
 const loading = ref(true)
 // 开始结束时间
 const datetimerange = ref()
-// 默认当天
 watch(() => datetimerange.value, (newVal) => {
   listQuery.value.begTime = ''
   listQuery.value.endTime = ''
@@ -51,6 +50,35 @@
     }
   }
 })
+const shortcuts = [
+  {
+    text: '近一周',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setDate(start.getDate() - 7)
+      return [start, end]
+    },
+  },
+  {
+    text: '近一个月',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setMonth(start.getMonth() - 1)
+      return [start, end]
+    },
+  },
+  {
+    text: '近三个月',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setMonth(start.getMonth() - 3)
+      return [start, end]
+    },
+  },
+]
 // setTimeout(() => {
 //   xAxisData.value = [
 //     '闸井浓度超限', '场站浓度超限', '场站火焰报警', '疑似第三方破坏', '场站烟雾报警',
@@ -66,10 +94,25 @@
 //     value: data.value[0].data[index],
 //   }))
 // }, 1000)
+const resizePage = () => {
+  setTimeout(() => {
+    const resize = new Event('resize')
+    window.dispatchEvent(resize)
+  }, 500)
+}
 const fetchData = () => {
   loading.value = true
   getAlarmType(listQuery.value).then((res) => {
-    console.log(res.data, '各类报警统计')
+    // console.log(res.data, '各类报警统计')
+    xAxisData.value = res.data.map((item: any) => item.name)
+    data.value = [
+      {
+        name: '报警数量',
+        data: res.data.map((item: any) => item.value),
+      },
+    ]
+    list.value = res.data
+    resizePage
     loading.value = false
   }).catch(() => {
     loading.value = false
@@ -105,8 +148,8 @@
           style="width: 220px;margin: 0 5px;"
         />
         <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="至"
+          v-model="datetimerange" type="datetimerange" format="YYYY-MM-DD HH:mm:ss" :shortcuts="shortcuts"
+          style="width: 380px;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;" @click="fetchData">
@@ -118,8 +161,8 @@
       <div v-loading="loading" class="alarm-count">
         <div class="bar">
           <bar-chart-vertical
-            v-show="xAxisData.length"
-            :x-axis-data="xAxisData" :bar-coner="0" :data="data" :colors="[]" :bar-width="15"
+            v-show="xAxisData.length" :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' }"
             :grid="{
               top: 50,
@@ -133,7 +176,7 @@
         </div>
         <div class="table">
           <el-table border :data="list" stripe style="width: 100%;" :height="440">
-            <el-table-column label="报警类型" prop="alarmType" align="center" />
+            <el-table-column label="报警类型" prop="name" align="center" />
             <el-table-column label="报警数量" prop="value" align="center" />
           </el-table>
         </div>
diff --git a/src/views/home/alarm/count/components/deptCount.vue b/src/views/home/alarm/count/components/deptCount.vue
index 1ca5482..798bfd2 100644
--- a/src/views/home/alarm/count/components/deptCount.vue
+++ b/src/views/home/alarm/count/components/deptCount.vue
@@ -5,40 +5,123 @@
  -->
 <script lang="ts" setup name="AlarmCount">
 import layout from './layout.vue'
+import { getAlarmCompany } from '@/api/home/alarm/count'
 const listQuery = ref({
-  type: 'day',
+  begTime: '',
+  endTime: '',
+  ledgerType: '',
+  timeType: '1',
 })
 const selectTimeType = (type: string) => {
-  listQuery.value.type = type
+  listQuery.value.timeType = type
 }
+// 开始结束时间
+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 shortcuts = [
+  {
+    text: '近一周',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setDate(start.getDate() - 7)
+      return [start, end]
+    },
+  },
+  {
+    text: '近一个月',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setMonth(start.getMonth() - 1)
+      return [start, end]
+    },
+  },
+  {
+    text: '近三个月',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setMonth(start.getMonth() - 3)
+      return [start, end]
+    },
+  },
+]
+// 类别
+const ledgerTypeList = ref<{ id: string; name: string; value: string }[]>([
+  {
+    name: '闸井',
+    id: '1',
+    value: '1',
+  },
+  {
+    name: '场站',
+    id: '2',
+    value: '2',
+  },
+  {
+    name: '管线',
+    id: '3',
+    value: '3',
+  },
+])
 const xAxisData = ref([])
 const data = ref([])
 const list = ref([])
-setTimeout(() => {
-  xAxisData.value = [
-    '第一分公司', '第二分公司', '第三分公司', '第四分公司', '第五分公司',
-  ]
-  data.value = [
-    {
-      name: '闸井浓度超限',
-      data: [1, 8, 5, 8, 4],
-    },
-    {
-      name: '场站浓度超限',
-      data: [8, 3, 6, 1, 7],
-    },
-    {
-      name: '疑似第三方破坏',
-      data: [4, 7, 5, 9, 4],
-    },
-  ]
-  list.value = xAxisData.value.map((item, index) => ({
-    dept: item,
-    wellOver: data.value[0].data[index],
-    senceOver: data.value[1].data[index],
-    thirdParty: data.value[2].data[index],
-  }))
-}, 1000)
+const loading = ref(true)
+// setTimeout(() => {
+//   xAxisData.value = [
+//     '第一分公司', '第二分公司', '第三分公司', '第四分公司', '第五分公司',
+//   ]
+//   data.value = [
+//     {
+//       name: '闸井浓度超限',
+//       data: [1, 8, 5, 8, 4],
+//     },
+//     {
+//       name: '场站浓度超限',
+//       data: [8, 3, 6, 1, 7],
+//     },
+//     {
+//       name: '疑似第三方破坏',
+//       data: [4, 7, 5, 9, 4],
+//     },
+//   ]
+//   list.value = xAxisData.value.map((item, index) => ({
+//     dept: item,
+//     wellOver: data.value[0].data[index],
+//     senceOver: data.value[1].data[index],
+//     thirdParty: data.value[2].data[index],
+//   }))
+// }, 1000)
+const resizePage = () => {
+  setTimeout(() => {
+    const resize = new Event('resize')
+    window.dispatchEvent(resize)
+  }, 500)
+}
+const fetchData = () => {
+  loading.value = true
+  getAlarmCompany(listQuery.value).then((res) => {
+    console.log(res.data, '各单位报警统计')
+    resizePage()
+    loading.value = false
+  }).catch(() => {
+    loading.value = false
+  })
+}
+onMounted(() => {
+  fetchData()
+})
 </script>
 
 <template>
@@ -47,49 +130,59 @@
     <template #search>
       <div class="search">
         <el-button
-          :class="listQuery.type === 'day' ? 'active' : ''" round size="small"
-          @click="selectTimeType('day')"
+          :class="listQuery.timeType === '1' ? 'active' : ''" round size="small"
+          style="margin: 0 5px;"
+          @click="selectTimeType('1')"
         >
           今日
         </el-button>
         <el-button
-          :class="listQuery.type === 'week' ? 'active' : ''" round size="small"
-          @click="selectTimeType('week')"
+          :class="listQuery.timeType === '2' ? 'active' : ''" round size="small"
+          style="margin: 0 5px;"
+          @click="selectTimeType('2')"
         >
           本周
         </el-button>
         <el-button
-          :class="listQuery.type === 'month' ? 'active' : ''" round size="small"
-          @click="selectTimeType('month')"
+          :class="listQuery.timeType === '3' ? 'active' : ''" round size="small"
+          style="margin: 0 5px;"
+          @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 v-for="item in ledgerTypeList" :key="item.id" :label="item.name" :value="item.id" />
+        </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
+          style="width: 380px;margin: 0 5px;" value-format="YYYY-MM-DD HH:mm:ss" range-separator="至"
+          start-placeholder="报警开始时间" end-placeholder="报警结束时间" clearable :shortcuts="shortcuts"
         />
-        <el-button type="primary" style="margin: 0 5px;">
+        <el-button type="primary" style="margin: 0 5px;" @click="fetchData">
           搜索
         </el-button>
       </div>
     </template>
     <template #content>
-      <div class="alarm-count">
+      <div v-loading="loading" class="alarm-count">
         <div class="bar">
           <bar-chart-vertical
+            v-show="xAxisData.length"
             :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' }"
+            :grid="{
+              top: 50,
+              left: 30,
+              right: 30,
+              bottom: 20,
+              containLabel: true, // 是否包含坐标轴的刻度标签
+            }"
           />
+          <el-empty v-show="!xAxisData.length" description="暂无数据" />
         </div>
         <div class="table">
           <el-table border :data="list" stripe style="width: 100%;" :height="440">
-            <el-table-column label="管理单位" prop="dept" align="center" />
+            <el-table-column label="管理单位" prop="dept" align="center" width="200" />
             <el-table-column label="闸井浓度超限" prop="wellOver" align="center" />
             <el-table-column label="场站浓度超限" prop="senceOver" align="center" />
             <el-table-column label="疑似第三方破坏" prop="thirdParty" align="center" />
diff --git a/src/views/home/alarm/count/components/locationAnalysis.vue b/src/views/home/alarm/count/components/locationAnalysis.vue
index 4265aaf..4cd5921 100644
--- a/src/views/home/alarm/count/components/locationAnalysis.vue
+++ b/src/views/home/alarm/count/components/locationAnalysis.vue
@@ -18,7 +18,7 @@
 // 开始结束时间
 const datetimerange = ref()
 // 默认当天
-datetimerange.value = [`${dayjs().format('YYYY-MM-DD')} 00:00:00`, dayjs().format('YYYY-MM-DD HH:mm:ss')]
+// datetimerange.value = [`${dayjs().format('YYYY-MM-DD')} 00:00:00`, dayjs().format('YYYY-MM-DD HH:mm:ss')]
 watch(() => datetimerange.value, (newVal) => {
   listQuery.value.begTime = ''
   listQuery.value.endTime = ''
@@ -29,6 +29,35 @@
     }
   }
 })
+const shortcuts = [
+  {
+    text: '近一周',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setDate(start.getDate() - 7)
+      return [start, end]
+    },
+  },
+  {
+    text: '近一个月',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setMonth(start.getMonth() - 1)
+      return [start, end]
+    },
+  },
+  {
+    text: '近三个月',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setMonth(start.getMonth() - 3)
+      return [start, end]
+    },
+  },
+]
 const selectTimeType = (type: string) => {
   listQuery.value.timeType = type
 }
@@ -52,13 +81,13 @@
     <!-- 查询条件 -->
     <template #search>
       <div class="search">
-        <el-button :class="listQuery.timeType === '1' ? 'active' : ''" round size="small" @click="selectTimeType('1')">
+        <el-button :class="listQuery.timeType === '1' ? 'active' : ''" round size="small" style="margin: 0 5px;" @click="selectTimeType('1')">
           今日
         </el-button>
-        <el-button :class="listQuery.timeType === '2' ? 'active' : ''" round size="small" @click="selectTimeType('2')">
+        <el-button :class="listQuery.timeType === '2' ? 'active' : ''" round size="small" style="margin: 0 5px;" @click="selectTimeType('2')">
           本周
         </el-button>
-        <el-button :class="listQuery.timeType === '3' ? 'active' : ''" round size="small" @click="selectTimeType('3')">
+        <el-button :class="listQuery.timeType === '3' ? 'active' : ''" round size="small" style="margin: 0 5px;" @click="selectTimeType('3')">
           本月
         </el-button>
         <el-select v-model="listQuery.ledgerType" placeholder="全部类别" clearable style="width: 180px;margin: 0 5px;">
@@ -68,8 +97,8 @@
         </el-select>
         <el-date-picker
           v-model="datetimerange" type="datetimerange" format="YYYY-MM-DD HH:mm:ss"
-          style="width: 360px;margin: 0 5px;" value-format="YYYY-MM-DD HH:mm:ss" range-separator="至"
-          start-placeholder="报警开始时间" end-placeholder="报警结束时间" clearable
+          style="width: 380px;margin: 0 5px;" value-format="YYYY-MM-DD HH:mm:ss" range-separator="至"
+          start-placeholder="报警开始时间" end-placeholder="报警结束时间" clearable :shortcuts="shortcuts"
         />
         <el-button type="primary" style="margin: 0 5px;" @click="fetchData">
           搜索
@@ -80,13 +109,13 @@
       <div class="alarm-count">
         <div class="table">
           <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="type" align="center" width="140" />
+            <el-table-column label="位号" prop="tagNumber" align="center" width="160" />
             <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-column label="标签" prop="marker" align="center" width="140" />
+            <el-table-column label="报警次数" prop="alarmSum" align="center" width="120" />
           </el-table>
         </div>
       </div>
diff --git a/src/views/home/alarm/count/components/trendAnalysis.vue b/src/views/home/alarm/count/components/trendAnalysis.vue
index 73e18b0..18cfb4c 100644
--- a/src/views/home/alarm/count/components/trendAnalysis.vue
+++ b/src/views/home/alarm/count/components/trendAnalysis.vue
@@ -5,49 +5,203 @@
  -->
 <script lang="ts" setup name="TrendAnalysis">
 import layout from './layout.vue'
+import { getAlarmTrend } from '@/api/home/alarm/count'
 const listQuery = ref({
-  type: 'day',
+  timeType: '2',
+  ledgerType: '',
+  endTime: '',
+  begTime: '',
+  deptid: '',
 })
+// 开始结束时间
+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 shortcuts = [
+  {
+    text: '近一周',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setDate(start.getDate() - 7)
+      return [start, end]
+    },
+  },
+  {
+    text: '近一个月',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setMonth(start.getMonth() - 1)
+      return [start, end]
+    },
+  },
+  {
+    text: '近三个月',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setMonth(start.getMonth() - 3)
+      return [start, end]
+    },
+  },
+]
 const selectTimeType = (type: string) => {
-  listQuery.value.type = type
+  listQuery.value.timeType = type
 }
-const xAxisData = ref([])
-const data = ref([])
+const columns = ref<any[]>([
+  {
+    text: '闸井浓度超限',
+    value: 'well',
+  },
+  {
+    text: '场站浓度超限',
+    value: 'station',
+  },
+  {
+    text: '管线浓度超限',
+    value: 'pipeline',
+  },
+])
+// 类别
+const ledgerTypeList = ref<{ id: string; name: string; value: string }[]>([
+  {
+    name: '闸井',
+    id: '1',
+    value: '1',
+  },
+  {
+    name: '场站',
+    id: '2',
+    value: '2',
+  },
+  {
+    name: '管线',
+    id: '3',
+    value: '3',
+  },
+])
+const xAxisData = ref<string[]>([])
+const data = ref<any[]>([])
 const list = ref([])
-setTimeout(() => {
-  xAxisData.value = [
-    '2024-07-01 12:11:12',
-    '2024-07-02 12:11:12',
-    '2024-07-03 12:11:12',
-    '2024-07-04 12:11:12',
-    '2024-07-05 12:11:12',
-    '2024-07-06 12:11:12',
-    '2024-07-07 12:11:12',
-  ]
-  data.value = [
-    {
-      name: '闸井浓度超限',
-      data: [1, 3, 5, 1, 4, 2, 7],
-      symbol: 'emptyCircle',
-    },
-    {
-      name: '场站浓度超限',
-      data: [2, 1, 4, 1, 5, 2, 9],
-      symbol: 'emptyCircle',
-    },
-    {
-      name: '闸井浓度超限',
-      data: [4, 3, 2, 4, 7, 9, 1],
-      symbol: 'emptyCircle',
-    },
-  ]
-  list.value = xAxisData.value.map((item, index) => ({
-    alarmTime: item,
-    wellOver: data.value[0].data[index],
-    senceOver: data.value[1].data[index],
-    thirdParty: data.value[2].data[index],
-  }))
-}, 1000)
+const loading = ref(true)
+// setTimeout(() => {
+//   xAxisData.value = [
+//     '2024-07-01 12:11:12',
+//     '2024-07-02 12:11:12',
+//     '2024-07-03 12:11:12',
+//     '2024-07-04 12:11:12',
+//     '2024-07-05 12:11:12',
+//     '2024-07-06 12:11:12',
+//     '2024-07-07 12:11:12',
+//   ]
+//   data.value = [
+//     {
+//       name: '闸井浓度超限',
+//       data: [1, 3, 5, 1, 4, 2, 7],
+//       symbol: 'emptyCircle',
+//     },
+//     {
+//       name: '场站浓度超限',
+//       data: [2, 1, 4, 1, 5, 2, 9],
+//       symbol: 'emptyCircle',
+//     },
+//     {
+//       name: '闸井浓度超限',
+//       data: [4, 3, 2, 4, 7, 9, 1],
+//       symbol: 'emptyCircle',
+//     },
+//   ]
+//   list.value = xAxisData.value.map((item, index) => ({
+//     alarmTime: item,
+//     wellOver: data.value[0].data[index],
+//     senceOver: data.value[1].data[index],
+//     thirdParty: data.value[2].data[index],
+//   }))
+// }, 1000)
+const resizePage = () => {
+  setTimeout(() => {
+    const resize = new Event('resize')
+    window.dispatchEvent(resize)
+  }, 500)
+}
+const fetchData = () => {
+  loading.value = true
+  const columnsDict = {
+    闸井浓度超限: 'well',
+    场站浓度超限: 'station',
+    管线浓度超限: 'pipeline',
+  } as { [key: string]: string }
+  getAlarmTrend(listQuery.value).then((res) => {
+    console.log(res.data, '报警趋势分析')
+    xAxisData.value = res.data.map((item: any) => item.date)
+    if (!listQuery.value.ledgerType) {
+      data.value = [
+        {
+          name: '闸井浓度超限',
+          data: res.data.map((item: any) => item['闸井浓度超限']),
+        },
+        {
+          name: '场站浓度超限',
+          data: res.data.map((item: any) => item['场站浓度超限']),
+        },
+        {
+          name: '管线浓度超限',
+          data: res.data.map((item: any) => item['管线浓度超限']),
+        },
+      ]
+    }
+    else if (listQuery.value.ledgerType === '1') {
+      data.value = [
+        {
+          name: '闸井浓度超限',
+          data: res.data.map((item: any) => item['闸井浓度超限']),
+        },
+      ]
+    }
+    else if (listQuery.value.ledgerType === '2') {
+      data.value = [
+        {
+          name: '场站浓度超限',
+          data: res.data.map((item: any) => item['场站浓度超限']),
+        },
+      ]
+    }
+    else if (listQuery.value.ledgerType === '3') {
+      data.value = [
+        {
+          name: '管线浓度超限',
+          data: res.data.map((item: any) => item['管线浓度超限']),
+        },
+      ]
+    }
+    list.value = res.data.map((item: any) => ({
+      date: item.date,
+      well: item['闸井浓度超限'],
+      station: item['场站浓度超限'],
+      pipeline: item['管线浓度超限'],
+    }))
+    columns.value = data.value.map((item: any) => ({
+      text: item.name,
+      value: columnsDict[item.name],
+    }))
+    resizePage()
+    loading.value = false
+  }).catch(() => {
+    loading.value = false
+  })
+}
+onMounted(() => {
+  fetchData()
+})
 </script>
 
 <template>
@@ -56,34 +210,30 @@
     <template #search>
       <div class="search">
         <el-button
-          :class="listQuery.type === 'day' ? 'active' : ''" round size="small"
-          @click="selectTimeType('day')"
-        >
-          今日
-        </el-button>
-        <el-button
-          :class="listQuery.type === 'week' ? 'active' : ''" round size="small"
-          @click="selectTimeType('week')"
+          :class="listQuery.timeType === '2' ? 'active' : ''" round size="small" style="margin: 0 5px;"
+          @click="selectTimeType('2')"
         >
           本周
         </el-button>
         <el-button
-          :class="listQuery.type === 'month' ? 'active' : ''" round size="small"
-          @click="selectTimeType('month')"
+          :class="listQuery.timeType === '3' ? 'active' : ''" round size="small" style="margin: 0 5px;"
+          @click="selectTimeType('3')"
         >
           本月
         </el-button>
-        <el-select v-model="listQuery.keywords" placeholder="全部类别" clearable style="width: 180px;margin: 0 5px;" />
+        <el-select v-model="listQuery.ledgerType" placeholder="全部类别" clearable style="width: 180px;margin: 0 5px;">
+          <el-option v-for="item in ledgerTypeList" :key="item.id" :label="item.name" :value="item.id" />
+        </el-select>
         <dept-select
-          v-model="listQuery.keywords" placeholder="管理单位" :clearable="true"
+          v-model="listQuery.deptid" placeholder="管理单位" :clearable="true"
           style="width: 220px;margin: 0 5px;"
         />
         <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
+          style="width: 380px;margin: 0 5px;" value-format="YYYY-MM-DD HH:mm:ss" range-separator="至"
+          start-placeholder="报警开始时间" end-placeholder="报警结束时间" clearable :shortcuts="shortcuts"
         />
-        <el-button type="primary" style="margin: 0 5px;">
+        <el-button type="primary" style="margin: 0 5px;" @click="fetchData">
           搜索
         </el-button>
       </div>
@@ -94,14 +244,22 @@
           <line-chart
             :x-axis-data="xAxisData" :data="data" :gradient="false"
             :legend="{ itemWidth: 8, itemHeight: 8, type: 'scroll', orient: 'horizontal', icon: 'roundRect', right: '0', top: '10' }"
+            :grid="{
+              top: 50,
+              left: 30,
+              right: 30,
+              bottom: 20,
+              containLabel: true, // 是否包含坐标轴的刻度标签
+            }"
           />
         </div>
         <div class="table">
           <el-table border :data="list" stripe style="width: 100%;" :height="440">
-            <el-table-column label="日期" prop="alarmTime" align="center" />
-            <el-table-column label="闸井浓度超限" prop="wellOver" align="center" />
-            <el-table-column label="场站浓度超限" prop="senceOver" align="center" />
-            <el-table-column label="疑似第三方破坏" prop="thirdParty" align="center" />
+            <el-table-column label="日期" prop="date" align="center" width="190" />
+            <el-table-column
+              v-for="item in columns" :key="item.text" :label="item.text" :prop="item.value"
+              align="center"
+            />
           </el-table>
         </div>
       </div>
diff --git a/src/views/home/alarm/current/components/detail.vue b/src/views/home/alarm/current/components/detail.vue
index 4fb61d3..e200fe3 100644
--- a/src/views/home/alarm/current/components/detail.vue
+++ b/src/views/home/alarm/current/components/detail.vue
@@ -7,6 +7,7 @@
 import dayjs from 'dayjs'
 import { ElMessage } from 'element-plus'
 import { alarmProcessNode, detailAlarm } from '@/api/home/alarm/current'
+import { getAlarmDetail } from '@/api/home/alarm/history'
 import { toHumpObject } from '@/utils/String'
 import { getAlarmLevelListPage, getAlarmTypeListPage } from '@/api/home/rule/alarm'
 import { getDateDiff } from '@/utils/dayjs'
@@ -44,7 +45,7 @@
   },
   {
     text: '报警时间',
-    value: 'ts',
+    value: $route.query.type === 'history' ? 'alarmTime' : 'ts',
     align: 'center',
   },
   {
@@ -89,7 +90,7 @@
   },
   {
     text: '处置时长',
-    value: 'duration',
+    value: $route.query.type === 'history' ? 'cancelDuration' : 'duration',
     align: 'center',
   },
   {
@@ -107,8 +108,8 @@
 const fetchDetail = async () => {
   loading.value = true
   const res1 = await getAlarmLevelListPage({ offset: 1, limit: 9999 })
-  const res2 = await getAlarmTypeListPage({ offset: 1, limit: 9999 })
-  detailAlarm($route.query.id as string).then((res) => {
+  const res2 = await getAlarmTypeListPage({ offset: 1, limit: 9999 });
+  ($route.query.type === 'history' ? getAlarmDetail : detailAlarm)($route.query.id as string).then((res) => {
     detailInfo.value = toHumpObject(res.data)
     detailInfo.value.realAlarmName = detailInfo.value.realAlarm === '1' ? '报警' : '误报'
     detailInfo.value.alarmTypeName = res2.data.rows.filter((item: any) => item.id === detailInfo.value.alarmTypeId)[0]?.alarmType || ''
@@ -183,8 +184,12 @@
           </template>
           <div style="padding: 25px;">
             <el-timeline>
-              <el-timeline-item v-for="(item, index) in alarmDynamics" :key="index" :timestamp="item.approvalTime" type="primary">
-                {{ `${item.approvalPerson}${item.dept_name ? '(' : ''}${item.dept_name}${item.dept_name ? ')' : ''}${item.process_name}` }}
+              <el-timeline-item
+                v-for="(item, index) in alarmDynamics" :key="index" :timestamp="item.approvalTime"
+                type="primary"
+              >
+                {{ `${item.approvalPerson}${item.dept_name ? '(' : ''}${item.dept_name}${item.dept_name ? ')'
+                  : ''}${item.process_name}` }}
               </el-timeline-item>
             </el-timeline>
           </div>
diff --git a/src/views/home/alarm/current/index.vue b/src/views/home/alarm/current/index.vue
index 52b2be1..8b36a01 100644
--- a/src/views/home/alarm/current/index.vue
+++ b/src/views/home/alarm/current/index.vue
@@ -4,10 +4,10 @@
   Date: 2023-06-28
  -->
 <script lang="ts" setup name="CurrentAlarm">
-import { ElMessage } from 'element-plus'
+import { ElMessage, ElMessageBox } from 'element-plus'
 import { ArrowLeftBold, ArrowRightBold } from '@element-plus/icons-vue'
 import MapCom from './components/map.vue'
-import { getCurrentAlarmListPage, viewAlarm } from '@/api/home/alarm/current'
+import { batchDelete, getCurrentAlarmListPage, viewAlarm } from '@/api/home/alarm/current'
 import { getDictByCode } from '@/api/system/dict'
 import { getAlarmLevelListPage, getAlarmTypeListPage } from '@/api/home/rule/alarm'
 import { getDeviceTypeListPage } from '@/api/home/device/type'
@@ -66,6 +66,35 @@
     }
   }
 })
+const shortcuts = [
+  {
+    text: '近一周',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setDate(start.getDate() - 7)
+      return [start, end]
+    },
+  },
+  {
+    text: '近一个月',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setMonth(start.getMonth() - 1)
+      return [start, end]
+    },
+  },
+  {
+    text: '近三个月',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setMonth(start.getMonth() - 3)
+      return [start, end]
+    },
+  },
+]
 // 查询数据
 const fetchData = () => {
   loadingTable.value = true
@@ -140,8 +169,8 @@
 const detail = (row: any) => {
   mapData.value = row
   switchMode('map')
-  row.lngGaode = '116.398043'
-  row.latGaode = '39.901552'
+  // row.lngGaode = '116.398043'
+  // row.latGaode = '39.901552'
   // 绘制点
   const draw = () => {
     mapRef.value.mapRef.removeMarker()
@@ -209,6 +238,35 @@
   })
 }
 fetchDict()
+const { proxy } = getCurrentInstance() as any
+// 多选
+const multipleTable = ref([])
+const handleSelectionChange = (val: any) => {
+  console.log(val, '多选数据')
+  multipleTable.value = val
+}
+// 批量删除
+const batchDeleteRow = () => {
+  if (!multipleTable.value.length) {
+    ElMessage.warning('请先选中数据')
+    return
+  }
+  ElMessageBox.confirm(
+    '确定要删除选中的数据吗？',
+    '确认操作',
+    {
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+      type: 'warning',
+    },
+  ).then(() => {
+    batchDelete(multipleTable.value.map((item: any) => item.id)).then(() => {
+      ElMessage.success('操作成功')
+      multipleTable.value = []
+      fetchData()
+    })
+  })
+}
 </script>
 
 <template>
@@ -255,7 +313,7 @@
       </search-item>
       <search-item>
         <el-date-picker
-          v-model="datetimerange" type="datetimerange" format="YYYY-MM-DD HH:mm:ss"
+          v-model="datetimerange" type="datetimerange" format="YYYY-MM-DD HH:mm:ss" :shortcuts="shortcuts"
           value-format="YYYY-MM-DD HH:mm:ss" range-separator="至" start-placeholder="报警开始时间" end-placeholder="报警结束时间"
           clearable
         />
@@ -274,6 +332,9 @@
           <template #btns-right>
             <!-- 操作 -->
             <div>
+              <el-button v-if="proxy.hasPerm('/alarm/current/delete')" type="primary" @click="batchDeleteRow">
+                批量删除
+              </el-button>
               <el-button type="primary">
                 导出
               </el-button>
@@ -282,7 +343,10 @@
           <!-- 查询结果Table显示 -->
           <normal-table
             :data="list1" :total="total" :columns="columnsConfig" :query="listQuery"
-            :list-loading="loadingTable" :height="tableHeight - 50 - 70" @change="changePage"
+            :list-loading="loadingTable" :height="tableHeight - 50 - 70"
+            :is-multi="proxy.hasPerm('/alarm/current/delete')"
+            :is-showmulti-select="proxy.hasPerm('/alarm/current/delete')" @change="changePage"
+            @multiSelect="handleSelectionChange"
           >
             <template #preColumns>
               <el-table-column label="序号" width="55" align="center">
diff --git a/src/views/home/alarm/history/index.vue b/src/views/home/alarm/history/index.vue
index 87bb167..74ca152 100644
--- a/src/views/home/alarm/history/index.vue
+++ b/src/views/home/alarm/history/index.vue
@@ -80,6 +80,35 @@
     }
   }
 })
+const shortcuts = [
+  {
+    text: '近一周',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setDate(start.getDate() - 7)
+      return [start, end]
+    },
+  },
+  {
+    text: '近一个月',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setMonth(start.getMonth() - 1)
+      return [start, end]
+    },
+  },
+  {
+    text: '近三个月',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setMonth(start.getMonth() - 3)
+      return [start, end]
+    },
+  },
+]
 // 查询数据
 const fetchData = () => {
   loadingTable.value = true
@@ -127,10 +156,11 @@
 const $router = useRouter()
 const moreData = (row: any) => {
   $router.push({
-    name: 'AlarmCurrentDetail',
+    name: 'AlarmHistoryDetail',
     query: {
       id: row.id,
       row: JSON.stringify(row),
+      type: 'history',
     },
   })
 }
@@ -218,7 +248,7 @@
       </search-item>
       <search-item>
         <el-date-picker
-          v-model="datetimerange" type="datetimerange" format="YYYY-MM-DD HH:mm:ss"
+          v-model="datetimerange" type="datetimerange" format="YYYY-MM-DD HH:mm:ss" :shortcuts="shortcuts"
           value-format="YYYY-MM-DD HH:mm:ss" range-separator="至" start-placeholder="报警开始时间" end-placeholder="报警结束时间"
           clearable
         />
diff --git a/src/views/home/device/product/index.vue b/src/views/home/device/product/index.vue
index 1bb3d99..2300270 100644
--- a/src/views/home/device/product/index.vue
+++ b/src/views/home/device/product/index.vue
@@ -21,8 +21,8 @@
   { text: '设备型号', value: 'deviceModel', align: 'center' },
   { text: '厂商', value: 'manufacturerName', align: 'center' },
   { text: '通讯协议', value: 'protocolName', align: 'center' },
-  { text: '接入方式', value: 'accessMethodName', align: 'center' },
-  { text: '创建时间', value: 'ts', align: 'center' },
+  { text: '接入方式', value: 'accessMethodName', align: 'center', width: '140' },
+  { text: '创建时间', value: 'ts', align: 'center', width: '200' },
 ])
 // 最终展示列
 const columnsConfig = ref([])
diff --git a/src/views/home/device/type/index.vue b/src/views/home/device/type/index.vue
index 56d7f65..7df5933 100644
--- a/src/views/home/device/type/index.vue
+++ b/src/views/home/device/type/index.vue
@@ -14,12 +14,12 @@
 const total = ref(0)
 // 初始展示列
 const columns = ref<any>([
-  { text: '设备类型代号', value: 'typeCode', align: 'center' },
+  { text: '设备类型代号', value: 'typeCode', align: 'center', width: '110' },
   { text: '设备类型', value: 'typeName', align: 'center' },
   { text: '描述', value: 'typeDescription', align: 'center' },
   { text: '监测对象', value: 'watchObjectName', align: 'center' },
-  { text: '是否启用', value: 'isUsedName', align: 'center' },
-  { text: '操作时间', value: 'ts', align: 'center' },
+  { text: '是否启用', value: 'isUsedName', align: 'center', width: '110' },
+  { text: '操作时间', value: 'ts', align: 'center', width: '200' },
 ])
 // 最终展示列
 const columnsConfig = ref([])
diff --git a/src/views/home/ledger/ledger/components/wellList.vue b/src/views/home/ledger/ledger/components/wellList.vue
index 61eca63..6e40ede 100644
--- a/src/views/home/ledger/ledger/components/wellList.vue
+++ b/src/views/home/ledger/ledger/components/wellList.vue
@@ -22,12 +22,12 @@
   { text: '位号', value: 'tagNumber', align: 'center', isRequired: true, width: '110' },
   { text: '编号', value: 'ledgerCode', align: 'center', isRequired: true, width: '150' },
   { text: '名称', value: 'ledgerName', align: 'center', isRequired: true },
-  { text: '管理单位', value: 'responsibleDept', align: 'center' },
+  { text: '管理单位', value: 'deptName', align: 'center', width: '160' },
   { text: '详细位置', value: 'position', align: 'center' },
-  { text: '产权单位', value: 'deptName', align: 'center', isRequired: true },
-  { text: '管理方式', value: 'manageTypeName', align: 'center', isRequired: true },
-  { text: '使用状态', value: 'onStateName', align: 'center', isRequired: true },
-  { text: '位置状态', value: 'locationStateName', align: 'center', isRequired: true },
+  { text: '产权单位', value: 'responsibleDeptName', align: 'center', isRequired: true },
+  { text: '管理方式', value: 'manageTypeName', align: 'center', isRequired: true, width: '110' },
+  { text: '使用状态', value: 'onStateName', align: 'center', isRequired: true, width: '110' },
+  { text: '位置状态', value: 'locationStateName', align: 'center', isRequired: true, width: '110' },
 ])
 // 最终展示列
 const columnsConfig = ref([])
diff --git a/src/views/home/ledger/pipeline/index.vue b/src/views/home/ledger/pipeline/index.vue
index 0b1dc59..d56a41c 100644
--- a/src/views/home/ledger/pipeline/index.vue
+++ b/src/views/home/ledger/pipeline/index.vue
@@ -16,13 +16,13 @@
 const columns = ref<any>([
   { text: '管线编号', value: 'pipeCode', align: 'center', isRequired: true },
   { text: '管线位置', value: 'position', align: 'center', isRequired: true },
-  { text: '压力级制', value: 'pressTypeName', align: 'center', isRequired: true },
-  { text: '材质', value: 'material', align: 'center' },
-  { text: '管径(mm)', value: 'pipeDiameter', align: 'center' },
-  { text: '建设年代', value: 'constructEra', align: 'center' },
+  { text: '压力级制', value: 'pressTypeName', align: 'center', isRequired: true, width: '110' },
+  { text: '材质', value: 'material', align: 'center', width: '110' },
+  { text: '管径(mm)', value: 'pipeDiameter', align: 'center', width: '110' },
+  { text: '建设年代', value: 'constructEra', align: 'center', width: '110' },
   { text: '管理单位', value: 'deptName', align: 'center', isRequired: true },
   { text: '产权单位', value: 'propertyOwner', align: 'center', isRequired: true },
-  { text: '管理方式', value: 'manageTypeName', align: 'center', isRequired: true },
+  { text: '管理方式', value: 'manageTypeName', align: 'center', isRequired: true, width: '110' },
 ])
 // 最终展示列
 const columnsConfig = ref([])
diff --git a/src/views/home/ledger/sync/index.vue b/src/views/home/ledger/sync/index.vue
index dee1350..6607896 100644
--- a/src/views/home/ledger/sync/index.vue
+++ b/src/views/home/ledger/sync/index.vue
@@ -13,8 +13,8 @@
 const total = ref(0)
 // 初始展示列
 const columns = ref<any>([
-  { text: '开始时间', value: 'tagNumber', align: 'center', isRequired: true },
-  { text: '结束时间', value: 'ledgerCode', align: 'center', isRequired: true },
+  { text: '开始时间', value: 'tagNumber', align: 'center', isRequired: true, width: '190' },
+  { text: '结束时间', value: 'ledgerCode', align: 'center', isRequired: true, width: '190' },
   { text: '操作人', value: 'ledgerName', align: 'center', isRequired: true },
   { text: '同步类型', value: 'responsibleDept', align: 'center' },
   { text: '同步结果', value: 'position', align: 'center' },
diff --git a/src/views/home/operation/alarm/index.vue b/src/views/home/operation/alarm/index.vue
index ef04fd4..dc0f53c 100644
--- a/src/views/home/operation/alarm/index.vue
+++ b/src/views/home/operation/alarm/index.vue
@@ -17,8 +17,8 @@
   { text: '报警类型', value: 'alarmTypeName', align: 'center' },
   { text: '报警原因', value: 'alarmReason', align: 'center' },
   { text: '管理单位', value: 'deptName', align: 'center' },
-  { text: '状态', value: 'status', align: 'center' },
-  { text: '报警时间', value: 'alarmTime', align: 'center' },
+  { text: '状态', value: 'status', align: 'center', width: '110' },
+  { text: '报警时间', value: 'alarmTime', align: 'center', width: '200' },
 ])
 // 最终展示列
 const columnsConfig = ref([])
diff --git a/src/views/home/operation/manufacturer/index.vue b/src/views/home/operation/manufacturer/index.vue
index f439521..76ce423 100644
--- a/src/views/home/operation/manufacturer/index.vue
+++ b/src/views/home/operation/manufacturer/index.vue
@@ -18,13 +18,13 @@
 const columns = ref<any>([
   { text: '设备编号', value: 'devcode', align: 'center' },
   { text: '设备类型', value: 'deviceTypeName', align: 'center' },
-  { text: '运维类型', value: 'repairTypeName', align: 'center' },
+  { text: '运维类型', value: 'repairTypeName', align: 'center', width: '110' },
   { text: '安装位置', value: 'ledgerNumber', align: 'center' },
   { text: '详细位置', value: 'position', align: 'center' },
   { text: '管理单位', value: '', align: 'center' },
   { text: '运维内容', value: 'repairContent', align: 'center' },
-  { text: '运维人员', value: 'repairPerson', align: 'center' },
-  { text: '维护时间', value: 'finishTime', align: 'center' },
+  { text: '运维人员', value: 'repairPerson', align: 'center', width: '120' },
+  { text: '维护时间', value: 'finishTime', align: 'center', width: '200' },
 ])
 // 最终展示列
 const columnsConfig = ref([])
diff --git a/src/views/home/pipeline/components/detailInfoDialog.vue b/src/views/home/pipeline/components/detailInfoDialog.vue
index 1662e6e..76380ed 100644
--- a/src/views/home/pipeline/components/detailInfoDialog.vue
+++ b/src/views/home/pipeline/components/detailInfoDialog.vue
@@ -153,7 +153,7 @@
     width: 100%;
     display: flex;
     justify-content: space-between;
-    padding: 2px 10px;
+    padding: 8px 10px;
     align-items: center;
     color: #fff;
 
diff --git a/src/views/home/rule/agreement/index.vue b/src/views/home/rule/agreement/index.vue
index 6f2695a..2e6c2a5 100644
--- a/src/views/home/rule/agreement/index.vue
+++ b/src/views/home/rule/agreement/index.vue
@@ -15,10 +15,10 @@
 const columns = ref<any>([
   { text: '协议名称', value: 'protocolName', align: 'center' },
   { text: '协议编码', value: 'protocolCode', align: 'center' },
-  { text: '协议版本', value: 'version', align: 'center' },
+  { text: '协议版本', value: 'version', align: 'center', width: '130' },
   { text: '备注', value: 'description', align: 'center' },
-  { text: '上传地址', value: 'ip', align: 'center' },
-  { text: '创建时间', value: 'ts', align: 'center' },
+  { text: '上传地址', value: 'ip', align: 'center', width: '200' },
+  { text: '创建时间', value: 'ts', align: 'center', width: '200' },
 ])
 // 最终展示列
 const columnsConfig = ref([])
diff --git a/src/views/home/rule/alarm/components/alarmLevelList.vue b/src/views/home/rule/alarm/components/alarmLevelList.vue
index 40c1e43..c8ffb7d 100644
--- a/src/views/home/rule/alarm/components/alarmLevelList.vue
+++ b/src/views/home/rule/alarm/components/alarmLevelList.vue
@@ -29,6 +29,7 @@
 const fetchData = () => {
   loadingTable.value = true
   getAlarmLevelListPage(listQuery.value).then((res) => {
+    list.value = []
     list.value = res.data.rows.map((item: any) => ({
       ...item,
       isSendName: item.isSend === '0' ? '关' : '开',
diff --git a/src/views/home/rule/alarm/components/alarmTypeList.vue b/src/views/home/rule/alarm/components/alarmTypeList.vue
index f3bc573..2cbf110 100644
--- a/src/views/home/rule/alarm/components/alarmTypeList.vue
+++ b/src/views/home/rule/alarm/components/alarmTypeList.vue
@@ -27,7 +27,9 @@
 const fetchData = () => {
   loadingTable.value = true
   getAlarmTypeListPage(listQuery.value).then((res) => {
+    list.value = []
     list.value = res.data.rows
+    console.log(res.data.rows, 'res.data.rows')
     total.value = res.data.total
     loadingTable.value = false
   }).catch(() => {
diff --git a/src/views/home/rule/alarm/components/editAlarmTypeDialog.vue b/src/views/home/rule/alarm/components/editAlarmTypeDialog.vue
index 59c523f..fc50080 100644
--- a/src/views/home/rule/alarm/components/editAlarmTypeDialog.vue
+++ b/src/views/home/rule/alarm/components/editAlarmTypeDialog.vue
@@ -19,6 +19,7 @@
   alarmCategory: '', // 报警类别
   alarmType: '', // 报警类型
   deviceTypeIds: [] as any, // 设备类型ids
+  deviceTypeIdStrs: '',
   id: '',
 }) // 表单
 const textMap: { [key: string]: string } = {
@@ -37,6 +38,7 @@
     alarmCategory: '', // 报警类别
     alarmType: '', // 报警类型
     deviceTypeIds: [] as any, // 设备类型ids
+    deviceTypeIdStrs: '',
     id: '',
   }
 }
@@ -56,7 +58,8 @@
     dataForm.value = {
       ...JSON.parse(JSON.stringify(row)),
     }
-    dataForm.value.deviceTypeIds = deviceTypeList.value.length ? deviceTypeList.value.filter((item: any) => item.name === dataForm.value.deviceTypeName)[0].id : ''
+    dataForm.value.deviceTypeIds = dataForm.value.deviceTypeIdStrs.split(',')
+    // dataForm.value.deviceTypeIds = deviceTypeList.value.length ? deviceTypeList.value.filter((item: any) => item.name === dataForm.value.deviceTypeName)[0].id : ''
     // dataForm.value.deviceTypeIds ? dataForm.value.deviceTypeIds : []
   }
 }
@@ -68,6 +71,7 @@
 const createData = () => {
   dataFormRef.value.validate((valid: any) => {
     if (valid) {
+      dataForm.value.deviceTypeIdStrs = dataForm.value.deviceTypeIds.join()
       addAlarmType(dataForm.value).then((response) => {
         if (response.code === 200) {
           ElMessage({
@@ -158,8 +162,8 @@
         <el-col :span="24">
           <el-form-item label="设备类型" prop="deviceTypeIds">
             <el-select
-              v-model.trim="dataForm.deviceTypeIds" placeholder="设备类型" style="width: 100%;" clearable :multiple="dialogStatus === 'edit' ? false : true"
-              filterable :disabled="dialogStatus === 'create' ? false : true"
+              v-model.trim="dataForm.deviceTypeIds" placeholder="设备类型" style="width: 100%;" clearable
+              multiple filterable
             >
               <el-option v-for="item in deviceTypeList" :key="item.id" :label="item.name" :value="item.value" />
             </el-select>
diff --git a/src/views/home/rule/alarm/index.vue b/src/views/home/rule/alarm/index.vue
index 99084a0..110030c 100644
--- a/src/views/home/rule/alarm/index.vue
+++ b/src/views/home/rule/alarm/index.vue
@@ -23,7 +23,7 @@
   { text: '报警名称', value: 'alarmName', align: 'center' },
   { text: '报警等级', value: 'alarmLevelName', align: 'center' },
   { text: '报警提示方式', value: 'alarmNoteMethodName', align: 'center' },
-  { text: '状态', value: 'stateName', align: 'center' },
+  { text: '状态', value: 'stateName', align: 'center', width: '130' },
   { text: '创建时间', value: 'ts', align: 'center' },
 ])
 // 最终展示列
diff --git a/src/views/home/station/operation/index.vue b/src/views/home/station/operation/index.vue
index 4b2810e..50ed2ab 100644
--- a/src/views/home/station/operation/index.vue
+++ b/src/views/home/station/operation/index.vue
@@ -17,10 +17,10 @@
   { text: '场站名称', value: 'devcode', align: 'center' },
   { text: '管理单位', value: 'deviceTypeName', align: 'center' },
   { text: '详细位置', value: 'repairTypeName', align: 'center' },
-  { text: '维护类型', value: 'ledgerNumber', align: 'center' },
+  { text: '维护类型', value: 'ledgerNumber', align: 'center', width: '160' },
   { text: '维护内容', value: 'position', align: 'center' },
-  { text: '维护人员', value: '', align: 'center' },
-  { text: '维护时间', value: 'repairContent', align: 'center' },
+  { text: '维护人员', value: '', align: 'center', width: '130' },
+  { text: '维护时间', value: 'repairContent', align: 'center', width: '210' },
 ])
 // 最终展示列
 const columnsConfig = ref([])
diff --git a/src/views/home/station/station/components/detailInfoDialog.vue b/src/views/home/station/station/components/detailInfoDialog.vue
index 53bf430..05ac22b 100644
--- a/src/views/home/station/station/components/detailInfoDialog.vue
+++ b/src/views/home/station/station/components/detailInfoDialog.vue
@@ -132,7 +132,7 @@
           <div class="label">
             {{ item.text }}
           </div>
-          <div class="value">
+          <div class="value" :title="detailInfo[item.value] || '' ">
             {{ detailInfo[item.value] || '' }}
           </div>
         </div>
@@ -157,7 +157,7 @@
     width: 100%;
     display: flex;
     justify-content: space-between;
-    padding: 2px 10px;
+    padding: 8px 10px;
     align-items: center;
     color: #fff;
 

diff --git a/src/api/home/alarm/count.ts b/src/api/home/alarm/count.ts
index 1f4b59a..d5d9244 100644
--- a/src/api/home/alarm/count.ts
+++ b/src/api/home/alarm/count.ts
@@ -34,3 +34,11 @@
     data,
   })
 }
+// 报警趋势分析
+export function getAlarmTrend(data: any) {
+  return request({
+    url: '/statics/alarmRecords/alarmTrend',
+    method: 'post',
+    data,
+  })
+}
diff --git a/src/api/home/alarm/current.ts b/src/api/home/alarm/current.ts
index ec20f64..ac3387f 100644
--- a/src/api/home/alarm/current.ts
+++ b/src/api/home/alarm/current.ts
@@ -57,3 +57,13 @@
     },
   })
 }
+// 批量删除
+export function batchDelete(ids: any) {
+  return request({
+    url: '/system/alarmRecords/batchDelete',
+    method: 'post',
+    data: {
+      ids,
+    },
+  })
+}
diff --git a/src/api/home/alarm/history.ts b/src/api/home/alarm/history.ts
index 5f55e82..44cf851 100644
--- a/src/api/home/alarm/history.ts
+++ b/src/api/home/alarm/history.ts
@@ -11,3 +11,13 @@
     data,
   })
 }
+// 详情
+export function getAlarmDetail(id: any) {
+  return request({
+    url: '/system/alarmRecords/historyAlarmDetail',
+    method: 'post',
+    data: {
+      id,
+    },
+  })
+}
diff --git a/src/components/Echart/LineChart.vue b/src/components/Echart/LineChart.vue
index 2733161..b811f29 100644
--- a/src/components/Echart/LineChart.vue
+++ b/src/components/Echart/LineChart.vue
@@ -207,7 +207,7 @@
         },
       },
       valueFormatter: (value: string | number) => {
-        return value ? value + props.unit : ''
+        return value ? value + props.unit : value === 0 ? '0' : ''
       },
     }, // 提示框
     xAxis: [
diff --git a/src/router/modules/pc.ts b/src/router/modules/pc.ts
index 9b058fa..f3edac9 100644
--- a/src/router/modules/pc.ts
+++ b/src/router/modules/pc.ts
@@ -94,6 +94,19 @@
         },
       },
       {
+        path: '/history/detail',
+        component: () => import('@/views/home/alarm/current/components/detail.vue'),
+        name: 'AlarmHistoryDetail',
+        meta: {
+          title: '报警详情',
+          icon: 'ep:key',
+          sidebar: false,
+          breadcrumb: true,
+          activeMenu: '/alarm/history',
+          auth: '/alarm/history',
+        },
+      },
+      {
         path: 'count',
         component: () => import('@/views/home/alarm/count/index.vue'),
         name: 'AlarmCount',
diff --git a/src/views/home/alarm/count/components/alarmStatistics.vue b/src/views/home/alarm/count/components/alarmStatistics.vue
index b088de2..7aa930f 100644
--- a/src/views/home/alarm/count/components/alarmStatistics.vue
+++ b/src/views/home/alarm/count/components/alarmStatistics.vue
@@ -34,13 +34,12 @@
     value: '3',
   },
 ])
-const xAxisData = ref([])
-const data = ref([])
+const xAxisData = ref<string[]>([])
+const data = ref<any[]>([])
 const list = ref([])
 const loading = ref(true)
 // 开始结束时间
 const datetimerange = ref()
-// 默认当天
 watch(() => datetimerange.value, (newVal) => {
   listQuery.value.begTime = ''
   listQuery.value.endTime = ''
@@ -51,6 +50,35 @@
     }
   }
 })
+const shortcuts = [
+  {
+    text: '近一周',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setDate(start.getDate() - 7)
+      return [start, end]
+    },
+  },
+  {
+    text: '近一个月',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setMonth(start.getMonth() - 1)
+      return [start, end]
+    },
+  },
+  {
+    text: '近三个月',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setMonth(start.getMonth() - 3)
+      return [start, end]
+    },
+  },
+]
 // setTimeout(() => {
 //   xAxisData.value = [
 //     '闸井浓度超限', '场站浓度超限', '场站火焰报警', '疑似第三方破坏', '场站烟雾报警',
@@ -66,10 +94,25 @@
 //     value: data.value[0].data[index],
 //   }))
 // }, 1000)
+const resizePage = () => {
+  setTimeout(() => {
+    const resize = new Event('resize')
+    window.dispatchEvent(resize)
+  }, 500)
+}
 const fetchData = () => {
   loading.value = true
   getAlarmType(listQuery.value).then((res) => {
-    console.log(res.data, '各类报警统计')
+    // console.log(res.data, '各类报警统计')
+    xAxisData.value = res.data.map((item: any) => item.name)
+    data.value = [
+      {
+        name: '报警数量',
+        data: res.data.map((item: any) => item.value),
+      },
+    ]
+    list.value = res.data
+    resizePage
     loading.value = false
   }).catch(() => {
     loading.value = false
@@ -105,8 +148,8 @@
           style="width: 220px;margin: 0 5px;"
         />
         <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="至"
+          v-model="datetimerange" type="datetimerange" format="YYYY-MM-DD HH:mm:ss" :shortcuts="shortcuts"
+          style="width: 380px;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;" @click="fetchData">
@@ -118,8 +161,8 @@
       <div v-loading="loading" class="alarm-count">
         <div class="bar">
           <bar-chart-vertical
-            v-show="xAxisData.length"
-            :x-axis-data="xAxisData" :bar-coner="0" :data="data" :colors="[]" :bar-width="15"
+            v-show="xAxisData.length" :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' }"
             :grid="{
               top: 50,
@@ -133,7 +176,7 @@
         </div>
         <div class="table">
           <el-table border :data="list" stripe style="width: 100%;" :height="440">
-            <el-table-column label="报警类型" prop="alarmType" align="center" />
+            <el-table-column label="报警类型" prop="name" align="center" />
             <el-table-column label="报警数量" prop="value" align="center" />
           </el-table>
         </div>
diff --git a/src/views/home/alarm/count/components/deptCount.vue b/src/views/home/alarm/count/components/deptCount.vue
index 1ca5482..798bfd2 100644
--- a/src/views/home/alarm/count/components/deptCount.vue
+++ b/src/views/home/alarm/count/components/deptCount.vue
@@ -5,40 +5,123 @@
  -->
 <script lang="ts" setup name="AlarmCount">
 import layout from './layout.vue'
+import { getAlarmCompany } from '@/api/home/alarm/count'
 const listQuery = ref({
-  type: 'day',
+  begTime: '',
+  endTime: '',
+  ledgerType: '',
+  timeType: '1',
 })
 const selectTimeType = (type: string) => {
-  listQuery.value.type = type
+  listQuery.value.timeType = type
 }
+// 开始结束时间
+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 shortcuts = [
+  {
+    text: '近一周',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setDate(start.getDate() - 7)
+      return [start, end]
+    },
+  },
+  {
+    text: '近一个月',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setMonth(start.getMonth() - 1)
+      return [start, end]
+    },
+  },
+  {
+    text: '近三个月',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setMonth(start.getMonth() - 3)
+      return [start, end]
+    },
+  },
+]
+// 类别
+const ledgerTypeList = ref<{ id: string; name: string; value: string }[]>([
+  {
+    name: '闸井',
+    id: '1',
+    value: '1',
+  },
+  {
+    name: '场站',
+    id: '2',
+    value: '2',
+  },
+  {
+    name: '管线',
+    id: '3',
+    value: '3',
+  },
+])
 const xAxisData = ref([])
 const data = ref([])
 const list = ref([])
-setTimeout(() => {
-  xAxisData.value = [
-    '第一分公司', '第二分公司', '第三分公司', '第四分公司', '第五分公司',
-  ]
-  data.value = [
-    {
-      name: '闸井浓度超限',
-      data: [1, 8, 5, 8, 4],
-    },
-    {
-      name: '场站浓度超限',
-      data: [8, 3, 6, 1, 7],
-    },
-    {
-      name: '疑似第三方破坏',
-      data: [4, 7, 5, 9, 4],
-    },
-  ]
-  list.value = xAxisData.value.map((item, index) => ({
-    dept: item,
-    wellOver: data.value[0].data[index],
-    senceOver: data.value[1].data[index],
-    thirdParty: data.value[2].data[index],
-  }))
-}, 1000)
+const loading = ref(true)
+// setTimeout(() => {
+//   xAxisData.value = [
+//     '第一分公司', '第二分公司', '第三分公司', '第四分公司', '第五分公司',
+//   ]
+//   data.value = [
+//     {
+//       name: '闸井浓度超限',
+//       data: [1, 8, 5, 8, 4],
+//     },
+//     {
+//       name: '场站浓度超限',
+//       data: [8, 3, 6, 1, 7],
+//     },
+//     {
+//       name: '疑似第三方破坏',
+//       data: [4, 7, 5, 9, 4],
+//     },
+//   ]
+//   list.value = xAxisData.value.map((item, index) => ({
+//     dept: item,
+//     wellOver: data.value[0].data[index],
+//     senceOver: data.value[1].data[index],
+//     thirdParty: data.value[2].data[index],
+//   }))
+// }, 1000)
+const resizePage = () => {
+  setTimeout(() => {
+    const resize = new Event('resize')
+    window.dispatchEvent(resize)
+  }, 500)
+}
+const fetchData = () => {
+  loading.value = true
+  getAlarmCompany(listQuery.value).then((res) => {
+    console.log(res.data, '各单位报警统计')
+    resizePage()
+    loading.value = false
+  }).catch(() => {
+    loading.value = false
+  })
+}
+onMounted(() => {
+  fetchData()
+})
 </script>
 
 <template>
@@ -47,49 +130,59 @@
     <template #search>
       <div class="search">
         <el-button
-          :class="listQuery.type === 'day' ? 'active' : ''" round size="small"
-          @click="selectTimeType('day')"
+          :class="listQuery.timeType === '1' ? 'active' : ''" round size="small"
+          style="margin: 0 5px;"
+          @click="selectTimeType('1')"
         >
           今日
         </el-button>
         <el-button
-          :class="listQuery.type === 'week' ? 'active' : ''" round size="small"
-          @click="selectTimeType('week')"
+          :class="listQuery.timeType === '2' ? 'active' : ''" round size="small"
+          style="margin: 0 5px;"
+          @click="selectTimeType('2')"
         >
           本周
         </el-button>
         <el-button
-          :class="listQuery.type === 'month' ? 'active' : ''" round size="small"
-          @click="selectTimeType('month')"
+          :class="listQuery.timeType === '3' ? 'active' : ''" round size="small"
+          style="margin: 0 5px;"
+          @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 v-for="item in ledgerTypeList" :key="item.id" :label="item.name" :value="item.id" />
+        </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
+          style="width: 380px;margin: 0 5px;" value-format="YYYY-MM-DD HH:mm:ss" range-separator="至"
+          start-placeholder="报警开始时间" end-placeholder="报警结束时间" clearable :shortcuts="shortcuts"
         />
-        <el-button type="primary" style="margin: 0 5px;">
+        <el-button type="primary" style="margin: 0 5px;" @click="fetchData">
           搜索
         </el-button>
       </div>
     </template>
     <template #content>
-      <div class="alarm-count">
+      <div v-loading="loading" class="alarm-count">
         <div class="bar">
           <bar-chart-vertical
+            v-show="xAxisData.length"
             :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' }"
+            :grid="{
+              top: 50,
+              left: 30,
+              right: 30,
+              bottom: 20,
+              containLabel: true, // 是否包含坐标轴的刻度标签
+            }"
           />
+          <el-empty v-show="!xAxisData.length" description="暂无数据" />
         </div>
         <div class="table">
           <el-table border :data="list" stripe style="width: 100%;" :height="440">
-            <el-table-column label="管理单位" prop="dept" align="center" />
+            <el-table-column label="管理单位" prop="dept" align="center" width="200" />
             <el-table-column label="闸井浓度超限" prop="wellOver" align="center" />
             <el-table-column label="场站浓度超限" prop="senceOver" align="center" />
             <el-table-column label="疑似第三方破坏" prop="thirdParty" align="center" />
diff --git a/src/views/home/alarm/count/components/locationAnalysis.vue b/src/views/home/alarm/count/components/locationAnalysis.vue
index 4265aaf..4cd5921 100644
--- a/src/views/home/alarm/count/components/locationAnalysis.vue
+++ b/src/views/home/alarm/count/components/locationAnalysis.vue
@@ -18,7 +18,7 @@
 // 开始结束时间
 const datetimerange = ref()
 // 默认当天
-datetimerange.value = [`${dayjs().format('YYYY-MM-DD')} 00:00:00`, dayjs().format('YYYY-MM-DD HH:mm:ss')]
+// datetimerange.value = [`${dayjs().format('YYYY-MM-DD')} 00:00:00`, dayjs().format('YYYY-MM-DD HH:mm:ss')]
 watch(() => datetimerange.value, (newVal) => {
   listQuery.value.begTime = ''
   listQuery.value.endTime = ''
@@ -29,6 +29,35 @@
     }
   }
 })
+const shortcuts = [
+  {
+    text: '近一周',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setDate(start.getDate() - 7)
+      return [start, end]
+    },
+  },
+  {
+    text: '近一个月',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setMonth(start.getMonth() - 1)
+      return [start, end]
+    },
+  },
+  {
+    text: '近三个月',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setMonth(start.getMonth() - 3)
+      return [start, end]
+    },
+  },
+]
 const selectTimeType = (type: string) => {
   listQuery.value.timeType = type
 }
@@ -52,13 +81,13 @@
     <!-- 查询条件 -->
     <template #search>
       <div class="search">
-        <el-button :class="listQuery.timeType === '1' ? 'active' : ''" round size="small" @click="selectTimeType('1')">
+        <el-button :class="listQuery.timeType === '1' ? 'active' : ''" round size="small" style="margin: 0 5px;" @click="selectTimeType('1')">
           今日
         </el-button>
-        <el-button :class="listQuery.timeType === '2' ? 'active' : ''" round size="small" @click="selectTimeType('2')">
+        <el-button :class="listQuery.timeType === '2' ? 'active' : ''" round size="small" style="margin: 0 5px;" @click="selectTimeType('2')">
           本周
         </el-button>
-        <el-button :class="listQuery.timeType === '3' ? 'active' : ''" round size="small" @click="selectTimeType('3')">
+        <el-button :class="listQuery.timeType === '3' ? 'active' : ''" round size="small" style="margin: 0 5px;" @click="selectTimeType('3')">
           本月
         </el-button>
         <el-select v-model="listQuery.ledgerType" placeholder="全部类别" clearable style="width: 180px;margin: 0 5px;">
@@ -68,8 +97,8 @@
         </el-select>
         <el-date-picker
           v-model="datetimerange" type="datetimerange" format="YYYY-MM-DD HH:mm:ss"
-          style="width: 360px;margin: 0 5px;" value-format="YYYY-MM-DD HH:mm:ss" range-separator="至"
-          start-placeholder="报警开始时间" end-placeholder="报警结束时间" clearable
+          style="width: 380px;margin: 0 5px;" value-format="YYYY-MM-DD HH:mm:ss" range-separator="至"
+          start-placeholder="报警开始时间" end-placeholder="报警结束时间" clearable :shortcuts="shortcuts"
         />
         <el-button type="primary" style="margin: 0 5px;" @click="fetchData">
           搜索
@@ -80,13 +109,13 @@
       <div class="alarm-count">
         <div class="table">
           <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="type" align="center" width="140" />
+            <el-table-column label="位号" prop="tagNumber" align="center" width="160" />
             <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-column label="标签" prop="marker" align="center" width="140" />
+            <el-table-column label="报警次数" prop="alarmSum" align="center" width="120" />
           </el-table>
         </div>
       </div>
diff --git a/src/views/home/alarm/count/components/trendAnalysis.vue b/src/views/home/alarm/count/components/trendAnalysis.vue
index 73e18b0..18cfb4c 100644
--- a/src/views/home/alarm/count/components/trendAnalysis.vue
+++ b/src/views/home/alarm/count/components/trendAnalysis.vue
@@ -5,49 +5,203 @@
  -->
 <script lang="ts" setup name="TrendAnalysis">
 import layout from './layout.vue'
+import { getAlarmTrend } from '@/api/home/alarm/count'
 const listQuery = ref({
-  type: 'day',
+  timeType: '2',
+  ledgerType: '',
+  endTime: '',
+  begTime: '',
+  deptid: '',
 })
+// 开始结束时间
+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 shortcuts = [
+  {
+    text: '近一周',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setDate(start.getDate() - 7)
+      return [start, end]
+    },
+  },
+  {
+    text: '近一个月',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setMonth(start.getMonth() - 1)
+      return [start, end]
+    },
+  },
+  {
+    text: '近三个月',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setMonth(start.getMonth() - 3)
+      return [start, end]
+    },
+  },
+]
 const selectTimeType = (type: string) => {
-  listQuery.value.type = type
+  listQuery.value.timeType = type
 }
-const xAxisData = ref([])
-const data = ref([])
+const columns = ref<any[]>([
+  {
+    text: '闸井浓度超限',
+    value: 'well',
+  },
+  {
+    text: '场站浓度超限',
+    value: 'station',
+  },
+  {
+    text: '管线浓度超限',
+    value: 'pipeline',
+  },
+])
+// 类别
+const ledgerTypeList = ref<{ id: string; name: string; value: string }[]>([
+  {
+    name: '闸井',
+    id: '1',
+    value: '1',
+  },
+  {
+    name: '场站',
+    id: '2',
+    value: '2',
+  },
+  {
+    name: '管线',
+    id: '3',
+    value: '3',
+  },
+])
+const xAxisData = ref<string[]>([])
+const data = ref<any[]>([])
 const list = ref([])
-setTimeout(() => {
-  xAxisData.value = [
-    '2024-07-01 12:11:12',
-    '2024-07-02 12:11:12',
-    '2024-07-03 12:11:12',
-    '2024-07-04 12:11:12',
-    '2024-07-05 12:11:12',
-    '2024-07-06 12:11:12',
-    '2024-07-07 12:11:12',
-  ]
-  data.value = [
-    {
-      name: '闸井浓度超限',
-      data: [1, 3, 5, 1, 4, 2, 7],
-      symbol: 'emptyCircle',
-    },
-    {
-      name: '场站浓度超限',
-      data: [2, 1, 4, 1, 5, 2, 9],
-      symbol: 'emptyCircle',
-    },
-    {
-      name: '闸井浓度超限',
-      data: [4, 3, 2, 4, 7, 9, 1],
-      symbol: 'emptyCircle',
-    },
-  ]
-  list.value = xAxisData.value.map((item, index) => ({
-    alarmTime: item,
-    wellOver: data.value[0].data[index],
-    senceOver: data.value[1].data[index],
-    thirdParty: data.value[2].data[index],
-  }))
-}, 1000)
+const loading = ref(true)
+// setTimeout(() => {
+//   xAxisData.value = [
+//     '2024-07-01 12:11:12',
+//     '2024-07-02 12:11:12',
+//     '2024-07-03 12:11:12',
+//     '2024-07-04 12:11:12',
+//     '2024-07-05 12:11:12',
+//     '2024-07-06 12:11:12',
+//     '2024-07-07 12:11:12',
+//   ]
+//   data.value = [
+//     {
+//       name: '闸井浓度超限',
+//       data: [1, 3, 5, 1, 4, 2, 7],
+//       symbol: 'emptyCircle',
+//     },
+//     {
+//       name: '场站浓度超限',
+//       data: [2, 1, 4, 1, 5, 2, 9],
+//       symbol: 'emptyCircle',
+//     },
+//     {
+//       name: '闸井浓度超限',
+//       data: [4, 3, 2, 4, 7, 9, 1],
+//       symbol: 'emptyCircle',
+//     },
+//   ]
+//   list.value = xAxisData.value.map((item, index) => ({
+//     alarmTime: item,
+//     wellOver: data.value[0].data[index],
+//     senceOver: data.value[1].data[index],
+//     thirdParty: data.value[2].data[index],
+//   }))
+// }, 1000)
+const resizePage = () => {
+  setTimeout(() => {
+    const resize = new Event('resize')
+    window.dispatchEvent(resize)
+  }, 500)
+}
+const fetchData = () => {
+  loading.value = true
+  const columnsDict = {
+    闸井浓度超限: 'well',
+    场站浓度超限: 'station',
+    管线浓度超限: 'pipeline',
+  } as { [key: string]: string }
+  getAlarmTrend(listQuery.value).then((res) => {
+    console.log(res.data, '报警趋势分析')
+    xAxisData.value = res.data.map((item: any) => item.date)
+    if (!listQuery.value.ledgerType) {
+      data.value = [
+        {
+          name: '闸井浓度超限',
+          data: res.data.map((item: any) => item['闸井浓度超限']),
+        },
+        {
+          name: '场站浓度超限',
+          data: res.data.map((item: any) => item['场站浓度超限']),
+        },
+        {
+          name: '管线浓度超限',
+          data: res.data.map((item: any) => item['管线浓度超限']),
+        },
+      ]
+    }
+    else if (listQuery.value.ledgerType === '1') {
+      data.value = [
+        {
+          name: '闸井浓度超限',
+          data: res.data.map((item: any) => item['闸井浓度超限']),
+        },
+      ]
+    }
+    else if (listQuery.value.ledgerType === '2') {
+      data.value = [
+        {
+          name: '场站浓度超限',
+          data: res.data.map((item: any) => item['场站浓度超限']),
+        },
+      ]
+    }
+    else if (listQuery.value.ledgerType === '3') {
+      data.value = [
+        {
+          name: '管线浓度超限',
+          data: res.data.map((item: any) => item['管线浓度超限']),
+        },
+      ]
+    }
+    list.value = res.data.map((item: any) => ({
+      date: item.date,
+      well: item['闸井浓度超限'],
+      station: item['场站浓度超限'],
+      pipeline: item['管线浓度超限'],
+    }))
+    columns.value = data.value.map((item: any) => ({
+      text: item.name,
+      value: columnsDict[item.name],
+    }))
+    resizePage()
+    loading.value = false
+  }).catch(() => {
+    loading.value = false
+  })
+}
+onMounted(() => {
+  fetchData()
+})
 </script>
 
 <template>
@@ -56,34 +210,30 @@
     <template #search>
       <div class="search">
         <el-button
-          :class="listQuery.type === 'day' ? 'active' : ''" round size="small"
-          @click="selectTimeType('day')"
-        >
-          今日
-        </el-button>
-        <el-button
-          :class="listQuery.type === 'week' ? 'active' : ''" round size="small"
-          @click="selectTimeType('week')"
+          :class="listQuery.timeType === '2' ? 'active' : ''" round size="small" style="margin: 0 5px;"
+          @click="selectTimeType('2')"
         >
           本周
         </el-button>
         <el-button
-          :class="listQuery.type === 'month' ? 'active' : ''" round size="small"
-          @click="selectTimeType('month')"
+          :class="listQuery.timeType === '3' ? 'active' : ''" round size="small" style="margin: 0 5px;"
+          @click="selectTimeType('3')"
         >
           本月
         </el-button>
-        <el-select v-model="listQuery.keywords" placeholder="全部类别" clearable style="width: 180px;margin: 0 5px;" />
+        <el-select v-model="listQuery.ledgerType" placeholder="全部类别" clearable style="width: 180px;margin: 0 5px;">
+          <el-option v-for="item in ledgerTypeList" :key="item.id" :label="item.name" :value="item.id" />
+        </el-select>
         <dept-select
-          v-model="listQuery.keywords" placeholder="管理单位" :clearable="true"
+          v-model="listQuery.deptid" placeholder="管理单位" :clearable="true"
           style="width: 220px;margin: 0 5px;"
         />
         <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
+          style="width: 380px;margin: 0 5px;" value-format="YYYY-MM-DD HH:mm:ss" range-separator="至"
+          start-placeholder="报警开始时间" end-placeholder="报警结束时间" clearable :shortcuts="shortcuts"
         />
-        <el-button type="primary" style="margin: 0 5px;">
+        <el-button type="primary" style="margin: 0 5px;" @click="fetchData">
           搜索
         </el-button>
       </div>
@@ -94,14 +244,22 @@
           <line-chart
             :x-axis-data="xAxisData" :data="data" :gradient="false"
             :legend="{ itemWidth: 8, itemHeight: 8, type: 'scroll', orient: 'horizontal', icon: 'roundRect', right: '0', top: '10' }"
+            :grid="{
+              top: 50,
+              left: 30,
+              right: 30,
+              bottom: 20,
+              containLabel: true, // 是否包含坐标轴的刻度标签
+            }"
           />
         </div>
         <div class="table">
           <el-table border :data="list" stripe style="width: 100%;" :height="440">
-            <el-table-column label="日期" prop="alarmTime" align="center" />
-            <el-table-column label="闸井浓度超限" prop="wellOver" align="center" />
-            <el-table-column label="场站浓度超限" prop="senceOver" align="center" />
-            <el-table-column label="疑似第三方破坏" prop="thirdParty" align="center" />
+            <el-table-column label="日期" prop="date" align="center" width="190" />
+            <el-table-column
+              v-for="item in columns" :key="item.text" :label="item.text" :prop="item.value"
+              align="center"
+            />
           </el-table>
         </div>
       </div>
diff --git a/src/views/home/alarm/current/components/detail.vue b/src/views/home/alarm/current/components/detail.vue
index 4fb61d3..e200fe3 100644
--- a/src/views/home/alarm/current/components/detail.vue
+++ b/src/views/home/alarm/current/components/detail.vue
@@ -7,6 +7,7 @@
 import dayjs from 'dayjs'
 import { ElMessage } from 'element-plus'
 import { alarmProcessNode, detailAlarm } from '@/api/home/alarm/current'
+import { getAlarmDetail } from '@/api/home/alarm/history'
 import { toHumpObject } from '@/utils/String'
 import { getAlarmLevelListPage, getAlarmTypeListPage } from '@/api/home/rule/alarm'
 import { getDateDiff } from '@/utils/dayjs'
@@ -44,7 +45,7 @@
   },
   {
     text: '报警时间',
-    value: 'ts',
+    value: $route.query.type === 'history' ? 'alarmTime' : 'ts',
     align: 'center',
   },
   {
@@ -89,7 +90,7 @@
   },
   {
     text: '处置时长',
-    value: 'duration',
+    value: $route.query.type === 'history' ? 'cancelDuration' : 'duration',
     align: 'center',
   },
   {
@@ -107,8 +108,8 @@
 const fetchDetail = async () => {
   loading.value = true
   const res1 = await getAlarmLevelListPage({ offset: 1, limit: 9999 })
-  const res2 = await getAlarmTypeListPage({ offset: 1, limit: 9999 })
-  detailAlarm($route.query.id as string).then((res) => {
+  const res2 = await getAlarmTypeListPage({ offset: 1, limit: 9999 });
+  ($route.query.type === 'history' ? getAlarmDetail : detailAlarm)($route.query.id as string).then((res) => {
     detailInfo.value = toHumpObject(res.data)
     detailInfo.value.realAlarmName = detailInfo.value.realAlarm === '1' ? '报警' : '误报'
     detailInfo.value.alarmTypeName = res2.data.rows.filter((item: any) => item.id === detailInfo.value.alarmTypeId)[0]?.alarmType || ''
@@ -183,8 +184,12 @@
           </template>
           <div style="padding: 25px;">
             <el-timeline>
-              <el-timeline-item v-for="(item, index) in alarmDynamics" :key="index" :timestamp="item.approvalTime" type="primary">
-                {{ `${item.approvalPerson}${item.dept_name ? '(' : ''}${item.dept_name}${item.dept_name ? ')' : ''}${item.process_name}` }}
+              <el-timeline-item
+                v-for="(item, index) in alarmDynamics" :key="index" :timestamp="item.approvalTime"
+                type="primary"
+              >
+                {{ `${item.approvalPerson}${item.dept_name ? '(' : ''}${item.dept_name}${item.dept_name ? ')'
+                  : ''}${item.process_name}` }}
               </el-timeline-item>
             </el-timeline>
           </div>
diff --git a/src/views/home/alarm/current/index.vue b/src/views/home/alarm/current/index.vue
index 52b2be1..8b36a01 100644
--- a/src/views/home/alarm/current/index.vue
+++ b/src/views/home/alarm/current/index.vue
@@ -4,10 +4,10 @@
   Date: 2023-06-28
  -->
 <script lang="ts" setup name="CurrentAlarm">
-import { ElMessage } from 'element-plus'
+import { ElMessage, ElMessageBox } from 'element-plus'
 import { ArrowLeftBold, ArrowRightBold } from '@element-plus/icons-vue'
 import MapCom from './components/map.vue'
-import { getCurrentAlarmListPage, viewAlarm } from '@/api/home/alarm/current'
+import { batchDelete, getCurrentAlarmListPage, viewAlarm } from '@/api/home/alarm/current'
 import { getDictByCode } from '@/api/system/dict'
 import { getAlarmLevelListPage, getAlarmTypeListPage } from '@/api/home/rule/alarm'
 import { getDeviceTypeListPage } from '@/api/home/device/type'
@@ -66,6 +66,35 @@
     }
   }
 })
+const shortcuts = [
+  {
+    text: '近一周',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setDate(start.getDate() - 7)
+      return [start, end]
+    },
+  },
+  {
+    text: '近一个月',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setMonth(start.getMonth() - 1)
+      return [start, end]
+    },
+  },
+  {
+    text: '近三个月',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setMonth(start.getMonth() - 3)
+      return [start, end]
+    },
+  },
+]
 // 查询数据
 const fetchData = () => {
   loadingTable.value = true
@@ -140,8 +169,8 @@
 const detail = (row: any) => {
   mapData.value = row
   switchMode('map')
-  row.lngGaode = '116.398043'
-  row.latGaode = '39.901552'
+  // row.lngGaode = '116.398043'
+  // row.latGaode = '39.901552'
   // 绘制点
   const draw = () => {
     mapRef.value.mapRef.removeMarker()
@@ -209,6 +238,35 @@
   })
 }
 fetchDict()
+const { proxy } = getCurrentInstance() as any
+// 多选
+const multipleTable = ref([])
+const handleSelectionChange = (val: any) => {
+  console.log(val, '多选数据')
+  multipleTable.value = val
+}
+// 批量删除
+const batchDeleteRow = () => {
+  if (!multipleTable.value.length) {
+    ElMessage.warning('请先选中数据')
+    return
+  }
+  ElMessageBox.confirm(
+    '确定要删除选中的数据吗？',
+    '确认操作',
+    {
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+      type: 'warning',
+    },
+  ).then(() => {
+    batchDelete(multipleTable.value.map((item: any) => item.id)).then(() => {
+      ElMessage.success('操作成功')
+      multipleTable.value = []
+      fetchData()
+    })
+  })
+}
 </script>
 
 <template>
@@ -255,7 +313,7 @@
       </search-item>
       <search-item>
         <el-date-picker
-          v-model="datetimerange" type="datetimerange" format="YYYY-MM-DD HH:mm:ss"
+          v-model="datetimerange" type="datetimerange" format="YYYY-MM-DD HH:mm:ss" :shortcuts="shortcuts"
           value-format="YYYY-MM-DD HH:mm:ss" range-separator="至" start-placeholder="报警开始时间" end-placeholder="报警结束时间"
           clearable
         />
@@ -274,6 +332,9 @@
           <template #btns-right>
             <!-- 操作 -->
             <div>
+              <el-button v-if="proxy.hasPerm('/alarm/current/delete')" type="primary" @click="batchDeleteRow">
+                批量删除
+              </el-button>
               <el-button type="primary">
                 导出
               </el-button>
@@ -282,7 +343,10 @@
           <!-- 查询结果Table显示 -->
           <normal-table
             :data="list1" :total="total" :columns="columnsConfig" :query="listQuery"
-            :list-loading="loadingTable" :height="tableHeight - 50 - 70" @change="changePage"
+            :list-loading="loadingTable" :height="tableHeight - 50 - 70"
+            :is-multi="proxy.hasPerm('/alarm/current/delete')"
+            :is-showmulti-select="proxy.hasPerm('/alarm/current/delete')" @change="changePage"
+            @multiSelect="handleSelectionChange"
           >
             <template #preColumns>
               <el-table-column label="序号" width="55" align="center">
diff --git a/src/views/home/alarm/history/index.vue b/src/views/home/alarm/history/index.vue
index 87bb167..74ca152 100644
--- a/src/views/home/alarm/history/index.vue
+++ b/src/views/home/alarm/history/index.vue
@@ -80,6 +80,35 @@
     }
   }
 })
+const shortcuts = [
+  {
+    text: '近一周',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setDate(start.getDate() - 7)
+      return [start, end]
+    },
+  },
+  {
+    text: '近一个月',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setMonth(start.getMonth() - 1)
+      return [start, end]
+    },
+  },
+  {
+    text: '近三个月',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setMonth(start.getMonth() - 3)
+      return [start, end]
+    },
+  },
+]
 // 查询数据
 const fetchData = () => {
   loadingTable.value = true
@@ -127,10 +156,11 @@
 const $router = useRouter()
 const moreData = (row: any) => {
   $router.push({
-    name: 'AlarmCurrentDetail',
+    name: 'AlarmHistoryDetail',
     query: {
       id: row.id,
       row: JSON.stringify(row),
+      type: 'history',
     },
   })
 }
@@ -218,7 +248,7 @@
       </search-item>
       <search-item>
         <el-date-picker
-          v-model="datetimerange" type="datetimerange" format="YYYY-MM-DD HH:mm:ss"
+          v-model="datetimerange" type="datetimerange" format="YYYY-MM-DD HH:mm:ss" :shortcuts="shortcuts"
           value-format="YYYY-MM-DD HH:mm:ss" range-separator="至" start-placeholder="报警开始时间" end-placeholder="报警结束时间"
           clearable
         />
diff --git a/src/views/home/device/product/index.vue b/src/views/home/device/product/index.vue
index 1bb3d99..2300270 100644
--- a/src/views/home/device/product/index.vue
+++ b/src/views/home/device/product/index.vue
@@ -21,8 +21,8 @@
   { text: '设备型号', value: 'deviceModel', align: 'center' },
   { text: '厂商', value: 'manufacturerName', align: 'center' },
   { text: '通讯协议', value: 'protocolName', align: 'center' },
-  { text: '接入方式', value: 'accessMethodName', align: 'center' },
-  { text: '创建时间', value: 'ts', align: 'center' },
+  { text: '接入方式', value: 'accessMethodName', align: 'center', width: '140' },
+  { text: '创建时间', value: 'ts', align: 'center', width: '200' },
 ])
 // 最终展示列
 const columnsConfig = ref([])
diff --git a/src/views/home/device/type/index.vue b/src/views/home/device/type/index.vue
index 56d7f65..7df5933 100644
--- a/src/views/home/device/type/index.vue
+++ b/src/views/home/device/type/index.vue
@@ -14,12 +14,12 @@
 const total = ref(0)
 // 初始展示列
 const columns = ref<any>([
-  { text: '设备类型代号', value: 'typeCode', align: 'center' },
+  { text: '设备类型代号', value: 'typeCode', align: 'center', width: '110' },
   { text: '设备类型', value: 'typeName', align: 'center' },
   { text: '描述', value: 'typeDescription', align: 'center' },
   { text: '监测对象', value: 'watchObjectName', align: 'center' },
-  { text: '是否启用', value: 'isUsedName', align: 'center' },
-  { text: '操作时间', value: 'ts', align: 'center' },
+  { text: '是否启用', value: 'isUsedName', align: 'center', width: '110' },
+  { text: '操作时间', value: 'ts', align: 'center', width: '200' },
 ])
 // 最终展示列
 const columnsConfig = ref([])
diff --git a/src/views/home/ledger/ledger/components/wellList.vue b/src/views/home/ledger/ledger/components/wellList.vue
index 61eca63..6e40ede 100644
--- a/src/views/home/ledger/ledger/components/wellList.vue
+++ b/src/views/home/ledger/ledger/components/wellList.vue
@@ -22,12 +22,12 @@
   { text: '位号', value: 'tagNumber', align: 'center', isRequired: true, width: '110' },
   { text: '编号', value: 'ledgerCode', align: 'center', isRequired: true, width: '150' },
   { text: '名称', value: 'ledgerName', align: 'center', isRequired: true },
-  { text: '管理单位', value: 'responsibleDept', align: 'center' },
+  { text: '管理单位', value: 'deptName', align: 'center', width: '160' },
   { text: '详细位置', value: 'position', align: 'center' },
-  { text: '产权单位', value: 'deptName', align: 'center', isRequired: true },
-  { text: '管理方式', value: 'manageTypeName', align: 'center', isRequired: true },
-  { text: '使用状态', value: 'onStateName', align: 'center', isRequired: true },
-  { text: '位置状态', value: 'locationStateName', align: 'center', isRequired: true },
+  { text: '产权单位', value: 'responsibleDeptName', align: 'center', isRequired: true },
+  { text: '管理方式', value: 'manageTypeName', align: 'center', isRequired: true, width: '110' },
+  { text: '使用状态', value: 'onStateName', align: 'center', isRequired: true, width: '110' },
+  { text: '位置状态', value: 'locationStateName', align: 'center', isRequired: true, width: '110' },
 ])
 // 最终展示列
 const columnsConfig = ref([])
diff --git a/src/views/home/ledger/pipeline/index.vue b/src/views/home/ledger/pipeline/index.vue
index 0b1dc59..d56a41c 100644
--- a/src/views/home/ledger/pipeline/index.vue
+++ b/src/views/home/ledger/pipeline/index.vue
@@ -16,13 +16,13 @@
 const columns = ref<any>([
   { text: '管线编号', value: 'pipeCode', align: 'center', isRequired: true },
   { text: '管线位置', value: 'position', align: 'center', isRequired: true },
-  { text: '压力级制', value: 'pressTypeName', align: 'center', isRequired: true },
-  { text: '材质', value: 'material', align: 'center' },
-  { text: '管径(mm)', value: 'pipeDiameter', align: 'center' },
-  { text: '建设年代', value: 'constructEra', align: 'center' },
+  { text: '压力级制', value: 'pressTypeName', align: 'center', isRequired: true, width: '110' },
+  { text: '材质', value: 'material', align: 'center', width: '110' },
+  { text: '管径(mm)', value: 'pipeDiameter', align: 'center', width: '110' },
+  { text: '建设年代', value: 'constructEra', align: 'center', width: '110' },
   { text: '管理单位', value: 'deptName', align: 'center', isRequired: true },
   { text: '产权单位', value: 'propertyOwner', align: 'center', isRequired: true },
-  { text: '管理方式', value: 'manageTypeName', align: 'center', isRequired: true },
+  { text: '管理方式', value: 'manageTypeName', align: 'center', isRequired: true, width: '110' },
 ])
 // 最终展示列
 const columnsConfig = ref([])
diff --git a/src/views/home/ledger/sync/index.vue b/src/views/home/ledger/sync/index.vue
index dee1350..6607896 100644
--- a/src/views/home/ledger/sync/index.vue
+++ b/src/views/home/ledger/sync/index.vue
@@ -13,8 +13,8 @@
 const total = ref(0)
 // 初始展示列
 const columns = ref<any>([
-  { text: '开始时间', value: 'tagNumber', align: 'center', isRequired: true },
-  { text: '结束时间', value: 'ledgerCode', align: 'center', isRequired: true },
+  { text: '开始时间', value: 'tagNumber', align: 'center', isRequired: true, width: '190' },
+  { text: '结束时间', value: 'ledgerCode', align: 'center', isRequired: true, width: '190' },
   { text: '操作人', value: 'ledgerName', align: 'center', isRequired: true },
   { text: '同步类型', value: 'responsibleDept', align: 'center' },
   { text: '同步结果', value: 'position', align: 'center' },
diff --git a/src/views/home/operation/alarm/index.vue b/src/views/home/operation/alarm/index.vue
index ef04fd4..dc0f53c 100644
--- a/src/views/home/operation/alarm/index.vue
+++ b/src/views/home/operation/alarm/index.vue
@@ -17,8 +17,8 @@
   { text: '报警类型', value: 'alarmTypeName', align: 'center' },
   { text: '报警原因', value: 'alarmReason', align: 'center' },
   { text: '管理单位', value: 'deptName', align: 'center' },
-  { text: '状态', value: 'status', align: 'center' },
-  { text: '报警时间', value: 'alarmTime', align: 'center' },
+  { text: '状态', value: 'status', align: 'center', width: '110' },
+  { text: '报警时间', value: 'alarmTime', align: 'center', width: '200' },
 ])
 // 最终展示列
 const columnsConfig = ref([])
diff --git a/src/views/home/operation/manufacturer/index.vue b/src/views/home/operation/manufacturer/index.vue
index f439521..76ce423 100644
--- a/src/views/home/operation/manufacturer/index.vue
+++ b/src/views/home/operation/manufacturer/index.vue
@@ -18,13 +18,13 @@
 const columns = ref<any>([
   { text: '设备编号', value: 'devcode', align: 'center' },
   { text: '设备类型', value: 'deviceTypeName', align: 'center' },
-  { text: '运维类型', value: 'repairTypeName', align: 'center' },
+  { text: '运维类型', value: 'repairTypeName', align: 'center', width: '110' },
   { text: '安装位置', value: 'ledgerNumber', align: 'center' },
   { text: '详细位置', value: 'position', align: 'center' },
   { text: '管理单位', value: '', align: 'center' },
   { text: '运维内容', value: 'repairContent', align: 'center' },
-  { text: '运维人员', value: 'repairPerson', align: 'center' },
-  { text: '维护时间', value: 'finishTime', align: 'center' },
+  { text: '运维人员', value: 'repairPerson', align: 'center', width: '120' },
+  { text: '维护时间', value: 'finishTime', align: 'center', width: '200' },
 ])
 // 最终展示列
 const columnsConfig = ref([])
diff --git a/src/views/home/pipeline/components/detailInfoDialog.vue b/src/views/home/pipeline/components/detailInfoDialog.vue
index 1662e6e..76380ed 100644
--- a/src/views/home/pipeline/components/detailInfoDialog.vue
+++ b/src/views/home/pipeline/components/detailInfoDialog.vue
@@ -153,7 +153,7 @@
     width: 100%;
     display: flex;
     justify-content: space-between;
-    padding: 2px 10px;
+    padding: 8px 10px;
     align-items: center;
     color: #fff;
 
diff --git a/src/views/home/rule/agreement/index.vue b/src/views/home/rule/agreement/index.vue
index 6f2695a..2e6c2a5 100644
--- a/src/views/home/rule/agreement/index.vue
+++ b/src/views/home/rule/agreement/index.vue
@@ -15,10 +15,10 @@
 const columns = ref<any>([
   { text: '协议名称', value: 'protocolName', align: 'center' },
   { text: '协议编码', value: 'protocolCode', align: 'center' },
-  { text: '协议版本', value: 'version', align: 'center' },
+  { text: '协议版本', value: 'version', align: 'center', width: '130' },
   { text: '备注', value: 'description', align: 'center' },
-  { text: '上传地址', value: 'ip', align: 'center' },
-  { text: '创建时间', value: 'ts', align: 'center' },
+  { text: '上传地址', value: 'ip', align: 'center', width: '200' },
+  { text: '创建时间', value: 'ts', align: 'center', width: '200' },
 ])
 // 最终展示列
 const columnsConfig = ref([])
diff --git a/src/views/home/rule/alarm/components/alarmLevelList.vue b/src/views/home/rule/alarm/components/alarmLevelList.vue
index 40c1e43..c8ffb7d 100644
--- a/src/views/home/rule/alarm/components/alarmLevelList.vue
+++ b/src/views/home/rule/alarm/components/alarmLevelList.vue
@@ -29,6 +29,7 @@
 const fetchData = () => {
   loadingTable.value = true
   getAlarmLevelListPage(listQuery.value).then((res) => {
+    list.value = []
     list.value = res.data.rows.map((item: any) => ({
       ...item,
       isSendName: item.isSend === '0' ? '关' : '开',
diff --git a/src/views/home/rule/alarm/components/alarmTypeList.vue b/src/views/home/rule/alarm/components/alarmTypeList.vue
index f3bc573..2cbf110 100644
--- a/src/views/home/rule/alarm/components/alarmTypeList.vue
+++ b/src/views/home/rule/alarm/components/alarmTypeList.vue
@@ -27,7 +27,9 @@
 const fetchData = () => {
   loadingTable.value = true
   getAlarmTypeListPage(listQuery.value).then((res) => {
+    list.value = []
     list.value = res.data.rows
+    console.log(res.data.rows, 'res.data.rows')
     total.value = res.data.total
     loadingTable.value = false
   }).catch(() => {
diff --git a/src/views/home/rule/alarm/components/editAlarmTypeDialog.vue b/src/views/home/rule/alarm/components/editAlarmTypeDialog.vue
index 59c523f..fc50080 100644
--- a/src/views/home/rule/alarm/components/editAlarmTypeDialog.vue
+++ b/src/views/home/rule/alarm/components/editAlarmTypeDialog.vue
@@ -19,6 +19,7 @@
   alarmCategory: '', // 报警类别
   alarmType: '', // 报警类型
   deviceTypeIds: [] as any, // 设备类型ids
+  deviceTypeIdStrs: '',
   id: '',
 }) // 表单
 const textMap: { [key: string]: string } = {
@@ -37,6 +38,7 @@
     alarmCategory: '', // 报警类别
     alarmType: '', // 报警类型
     deviceTypeIds: [] as any, // 设备类型ids
+    deviceTypeIdStrs: '',
     id: '',
   }
 }
@@ -56,7 +58,8 @@
     dataForm.value = {
       ...JSON.parse(JSON.stringify(row)),
     }
-    dataForm.value.deviceTypeIds = deviceTypeList.value.length ? deviceTypeList.value.filter((item: any) => item.name === dataForm.value.deviceTypeName)[0].id : ''
+    dataForm.value.deviceTypeIds = dataForm.value.deviceTypeIdStrs.split(',')
+    // dataForm.value.deviceTypeIds = deviceTypeList.value.length ? deviceTypeList.value.filter((item: any) => item.name === dataForm.value.deviceTypeName)[0].id : ''
     // dataForm.value.deviceTypeIds ? dataForm.value.deviceTypeIds : []
   }
 }
@@ -68,6 +71,7 @@
 const createData = () => {
   dataFormRef.value.validate((valid: any) => {
     if (valid) {
+      dataForm.value.deviceTypeIdStrs = dataForm.value.deviceTypeIds.join()
       addAlarmType(dataForm.value).then((response) => {
         if (response.code === 200) {
           ElMessage({
@@ -158,8 +162,8 @@
         <el-col :span="24">
           <el-form-item label="设备类型" prop="deviceTypeIds">
             <el-select
-              v-model.trim="dataForm.deviceTypeIds" placeholder="设备类型" style="width: 100%;" clearable :multiple="dialogStatus === 'edit' ? false : true"
-              filterable :disabled="dialogStatus === 'create' ? false : true"
+              v-model.trim="dataForm.deviceTypeIds" placeholder="设备类型" style="width: 100%;" clearable
+              multiple filterable
             >
               <el-option v-for="item in deviceTypeList" :key="item.id" :label="item.name" :value="item.value" />
             </el-select>
diff --git a/src/views/home/rule/alarm/index.vue b/src/views/home/rule/alarm/index.vue
index 99084a0..110030c 100644
--- a/src/views/home/rule/alarm/index.vue
+++ b/src/views/home/rule/alarm/index.vue
@@ -23,7 +23,7 @@
   { text: '报警名称', value: 'alarmName', align: 'center' },
   { text: '报警等级', value: 'alarmLevelName', align: 'center' },
   { text: '报警提示方式', value: 'alarmNoteMethodName', align: 'center' },
-  { text: '状态', value: 'stateName', align: 'center' },
+  { text: '状态', value: 'stateName', align: 'center', width: '130' },
   { text: '创建时间', value: 'ts', align: 'center' },
 ])
 // 最终展示列
diff --git a/src/views/home/station/operation/index.vue b/src/views/home/station/operation/index.vue
index 4b2810e..50ed2ab 100644
--- a/src/views/home/station/operation/index.vue
+++ b/src/views/home/station/operation/index.vue
@@ -17,10 +17,10 @@
   { text: '场站名称', value: 'devcode', align: 'center' },
   { text: '管理单位', value: 'deviceTypeName', align: 'center' },
   { text: '详细位置', value: 'repairTypeName', align: 'center' },
-  { text: '维护类型', value: 'ledgerNumber', align: 'center' },
+  { text: '维护类型', value: 'ledgerNumber', align: 'center', width: '160' },
   { text: '维护内容', value: 'position', align: 'center' },
-  { text: '维护人员', value: '', align: 'center' },
-  { text: '维护时间', value: 'repairContent', align: 'center' },
+  { text: '维护人员', value: '', align: 'center', width: '130' },
+  { text: '维护时间', value: 'repairContent', align: 'center', width: '210' },
 ])
 // 最终展示列
 const columnsConfig = ref([])
diff --git a/src/views/home/station/station/components/detailInfoDialog.vue b/src/views/home/station/station/components/detailInfoDialog.vue
index 53bf430..05ac22b 100644
--- a/src/views/home/station/station/components/detailInfoDialog.vue
+++ b/src/views/home/station/station/components/detailInfoDialog.vue
@@ -132,7 +132,7 @@
           <div class="label">
             {{ item.text }}
           </div>
-          <div class="value">
+          <div class="value" :title="detailInfo[item.value] || '' ">
             {{ detailInfo[item.value] || '' }}
           </div>
         </div>
@@ -157,7 +157,7 @@
     width: 100%;
     display: flex;
     justify-content: space-between;
-    padding: 2px 10px;
+    padding: 8px 10px;
     align-items: center;
     color: #fff;
 
diff --git a/src/views/home/well/components/detailInfoDialog.vue b/src/views/home/well/components/detailInfoDialog.vue
index d0d4242..7cbab4a 100644
--- a/src/views/home/well/components/detailInfoDialog.vue
+++ b/src/views/home/well/components/detailInfoDialog.vue
@@ -133,7 +133,7 @@
           <div class="label">
             {{ item.text }}
           </div>
-          <div class="value">
+          <div class="value" :title="detailInfo[item.value] || '' ">
             {{ detailInfo[item.value] || '' }}
           </div>
         </div>
@@ -158,7 +158,7 @@
     width: 100%;
     display: flex;
     justify-content: space-between;
-    padding: 2px 10px;
+    padding: 8px 10px;
     align-items: center;
     color: #fff;