diff --git a/src/api/data/data.js b/src/api/data/data.js
index 7dcc6c7..9d23a3e 100644
--- a/src/api/data/data.js
+++ b/src/api/data/data.js
@@ -13,7 +13,7 @@
 // 井盖数据查询
 export function getWellData(params) {
   return request({
-    url: 'welldata/list',
+    url: 'welldata/list-page',
     method: 'get',
     params
   })
@@ -40,6 +40,15 @@
 // 液位数据查询
 export function getLiquidData(params) {
   return request({
+    url: 'liquiddata/list-page',
+    method: 'get',
+    params
+  })
+}
+
+// 液位数据查询-不分页
+export function getLiquidDataSingle(params) {
+  return request({
     url: 'liquiddata/list',
     method: 'get',
     params
@@ -60,6 +69,14 @@
 // 燃气数据查询
 export function getGasData(params) {
   return request({
+    url: 'gasdata/list-page',
+    method: 'get',
+    params
+  })
+}
+// 燃气数据查询-不分页
+export function getGasDataSingle(params) {
+  return request({
     url: 'gasdata/list',
     method: 'get',
     params
@@ -85,6 +102,16 @@
     params
   })
 }
+
+// 管盯数据查询-不分页
+export function getTubeDataSingle(params) {
+  return request({
+    url: 'tubedata/list',
+    method: 'get',
+    params
+  })
+}
+
 // 批量导出管盯数据
 export function batchExportTubeData(params) {
   return request({
@@ -98,11 +125,21 @@
 // 开挖数据查询
 export function getDigData(params) {
   return request({
+    url: 'digdata/list-page',
+    method: 'get',
+    params
+  })
+}
+
+// 开挖数据查询,不分页
+export function getDigDataSingle(params) {
+  return request({
     url: 'digdata/list',
     method: 'get',
     params
   })
 }
+
 // 批量导出开挖数据
 export function batchExportDigData(params) {
   return request({
@@ -116,11 +153,20 @@
 // 有害气体数据查询
 export function getHarmfulData(params) {
   return request({
+    url: 'harmfuldata/list-page',
+    method: 'get',
+    params
+  })
+}
+// 有害气体数据查询,不分页
+export function getHarmfulDataSingle(params) {
+  return request({
     url: 'harmfuldata/list',
     method: 'get',
     params
   })
 }
+
 // 批量导出有害气体数据
 export function batchExportHarmfulData(params) {
   return request({
@@ -134,6 +180,14 @@
 // 温湿度数据查询
 export function getTempData(params) {
   return request({
+    url: 'tempdata/list-page',
+    method: 'get',
+    params
+  })
+}
+// 温湿度数据查询,不分页
+export function getTempDataSimple(params) {
+  return request({
     url: 'tempdata/list',
     method: 'get',
     params
@@ -153,6 +207,14 @@
 // 井盖定位监测仪数据查询
 export function getWellLocaData(params) {
   return request({
+    url: 'welllocadata/list-page',
+    method: 'get',
+    params
+  })
+}
+// 井盖定位监测仪数据查询,不分页
+export function getWellLocaDataSingle(params) {
+  return request({
     url: 'welllocadata/list',
     method: 'get',
     params
@@ -172,6 +234,14 @@
 // 噪声记录仪数据查询
 export function getNoiseData(params) {
   return request({
+    url: 'noisedata/list-page',
+    method: 'get',
+    params
+  })
+}
+// 噪声记录仪数据查询,不分页
+export function getNoiseDataSingle(params) {
+  return request({
     url: 'noisedata/list',
     method: 'get',
     params
@@ -190,6 +260,14 @@
 // 液位燃气一体化设备数据查询
 export function getLiquidGasData(params) {
   return request({
+    url: 'liquidGasData/list-page',
+    method: 'get',
+    params
+  })
+}
+// 液位燃气一体化设备数据查询,不分页
+export function getLiquidGasDataSingle(params) {
+  return request({
     url: 'liquidGasData/list',
     method: 'get',
     params
@@ -209,7 +287,15 @@
 // 可燃气体外协数据查询
 export function getGasdectorData(params) {
   return request({
-    url: '/gasdector/listpage',
+    url: '/gasdector/list-page',
+    method: 'get',
+    params
+  })
+}
+// 可燃气体外协数据查询,不分页
+export function getGasdectorDataSingle(params) {
+  return request({
+    url: '/gasdector/list',
     method: 'get',
     params
   })
@@ -228,7 +314,15 @@
 // 激甲云台数据查询-章丘
 export function getPantiltData(params) {
   return request({
-    url: '/pantilt/listpage',
+    url: '/pantilt/list-page',
+    method: 'get',
+    params
+  })
+}
+// 激甲云台数据查询-章丘
+export function getPantiltDataSingle(params) {
+  return request({
+    url: '/pantilt/list',
     method: 'get',
     params
   })
@@ -248,6 +342,14 @@
 // 消防栓数据查询
 export function getHydrantData(params) {
   return request({
+    url: 'hydrant/list-page',
+    method: 'get',
+    params
+  })
+}
+// 消防栓数据查询,不分页
+export function getHydrantDataSingle(params) {
+  return request({
     url: 'hydrant/list',
     method: 'get',
     params

diff --git a/src/api/data/data.js b/src/api/data/data.js
index 7dcc6c7..9d23a3e 100644
--- a/src/api/data/data.js
+++ b/src/api/data/data.js
@@ -13,7 +13,7 @@
 // 井盖数据查询
 export function getWellData(params) {
   return request({
-    url: 'welldata/list',
+    url: 'welldata/list-page',
     method: 'get',
     params
   })
@@ -40,6 +40,15 @@
 // 液位数据查询
 export function getLiquidData(params) {
   return request({
+    url: 'liquiddata/list-page',
+    method: 'get',
+    params
+  })
+}
+
+// 液位数据查询-不分页
+export function getLiquidDataSingle(params) {
+  return request({
     url: 'liquiddata/list',
     method: 'get',
     params
@@ -60,6 +69,14 @@
 // 燃气数据查询
 export function getGasData(params) {
   return request({
+    url: 'gasdata/list-page',
+    method: 'get',
+    params
+  })
+}
+// 燃气数据查询-不分页
+export function getGasDataSingle(params) {
+  return request({
     url: 'gasdata/list',
     method: 'get',
     params
@@ -85,6 +102,16 @@
     params
   })
 }
+
+// 管盯数据查询-不分页
+export function getTubeDataSingle(params) {
+  return request({
+    url: 'tubedata/list',
+    method: 'get',
+    params
+  })
+}
+
 // 批量导出管盯数据
 export function batchExportTubeData(params) {
   return request({
@@ -98,11 +125,21 @@
 // 开挖数据查询
 export function getDigData(params) {
   return request({
+    url: 'digdata/list-page',
+    method: 'get',
+    params
+  })
+}
+
+// 开挖数据查询,不分页
+export function getDigDataSingle(params) {
+  return request({
     url: 'digdata/list',
     method: 'get',
     params
   })
 }
+
 // 批量导出开挖数据
 export function batchExportDigData(params) {
   return request({
@@ -116,11 +153,20 @@
 // 有害气体数据查询
 export function getHarmfulData(params) {
   return request({
+    url: 'harmfuldata/list-page',
+    method: 'get',
+    params
+  })
+}
+// 有害气体数据查询,不分页
+export function getHarmfulDataSingle(params) {
+  return request({
     url: 'harmfuldata/list',
     method: 'get',
     params
   })
 }
+
 // 批量导出有害气体数据
 export function batchExportHarmfulData(params) {
   return request({
@@ -134,6 +180,14 @@
 // 温湿度数据查询
 export function getTempData(params) {
   return request({
+    url: 'tempdata/list-page',
+    method: 'get',
+    params
+  })
+}
+// 温湿度数据查询,不分页
+export function getTempDataSimple(params) {
+  return request({
     url: 'tempdata/list',
     method: 'get',
     params
@@ -153,6 +207,14 @@
 // 井盖定位监测仪数据查询
 export function getWellLocaData(params) {
   return request({
+    url: 'welllocadata/list-page',
+    method: 'get',
+    params
+  })
+}
+// 井盖定位监测仪数据查询,不分页
+export function getWellLocaDataSingle(params) {
+  return request({
     url: 'welllocadata/list',
     method: 'get',
     params
@@ -172,6 +234,14 @@
 // 噪声记录仪数据查询
 export function getNoiseData(params) {
   return request({
+    url: 'noisedata/list-page',
+    method: 'get',
+    params
+  })
+}
+// 噪声记录仪数据查询,不分页
+export function getNoiseDataSingle(params) {
+  return request({
     url: 'noisedata/list',
     method: 'get',
     params
@@ -190,6 +260,14 @@
 // 液位燃气一体化设备数据查询
 export function getLiquidGasData(params) {
   return request({
+    url: 'liquidGasData/list-page',
+    method: 'get',
+    params
+  })
+}
+// 液位燃气一体化设备数据查询,不分页
+export function getLiquidGasDataSingle(params) {
+  return request({
     url: 'liquidGasData/list',
     method: 'get',
     params
@@ -209,7 +287,15 @@
 // 可燃气体外协数据查询
 export function getGasdectorData(params) {
   return request({
-    url: '/gasdector/listpage',
+    url: '/gasdector/list-page',
+    method: 'get',
+    params
+  })
+}
+// 可燃气体外协数据查询,不分页
+export function getGasdectorDataSingle(params) {
+  return request({
+    url: '/gasdector/list',
     method: 'get',
     params
   })
@@ -228,7 +314,15 @@
 // 激甲云台数据查询-章丘
 export function getPantiltData(params) {
   return request({
-    url: '/pantilt/listpage',
+    url: '/pantilt/list-page',
+    method: 'get',
+    params
+  })
+}
+// 激甲云台数据查询-章丘
+export function getPantiltDataSingle(params) {
+  return request({
+    url: '/pantilt/list',
     method: 'get',
     params
   })
@@ -248,6 +342,14 @@
 // 消防栓数据查询
 export function getHydrantData(params) {
   return request({
+    url: 'hydrant/list-page',
+    method: 'get',
+    params
+  })
+}
+// 消防栓数据查询,不分页
+export function getHydrantDataSingle(params) {
+  return request({
     url: 'hydrant/list',
     method: 'get',
     params
diff --git a/src/api/data/dataStatics.js b/src/api/data/dataStatics.js
index e79dea3..fdbc34f 100644
--- a/src/api/data/dataStatics.js
+++ b/src/api/data/dataStatics.js
@@ -90,6 +90,15 @@
   })
 }
 
+// 统计某段时间每种类型的报警数
+export function alarmStaticByContent(params) {
+  return request({
+    url: 'statics/alarmStaticsByContent',
+    method: 'get',
+    params
+  })
+}
+
 // 根据权属单位进行报警统计查询
 export function alarmStaticByDept(params) {
   return request({

diff --git a/src/api/data/data.js b/src/api/data/data.js
index 7dcc6c7..9d23a3e 100644
--- a/src/api/data/data.js
+++ b/src/api/data/data.js
@@ -13,7 +13,7 @@
 // 井盖数据查询
 export function getWellData(params) {
   return request({
-    url: 'welldata/list',
+    url: 'welldata/list-page',
     method: 'get',
     params
   })
@@ -40,6 +40,15 @@
 // 液位数据查询
 export function getLiquidData(params) {
   return request({
+    url: 'liquiddata/list-page',
+    method: 'get',
+    params
+  })
+}
+
+// 液位数据查询-不分页
+export function getLiquidDataSingle(params) {
+  return request({
     url: 'liquiddata/list',
     method: 'get',
     params
@@ -60,6 +69,14 @@
 // 燃气数据查询
 export function getGasData(params) {
   return request({
+    url: 'gasdata/list-page',
+    method: 'get',
+    params
+  })
+}
+// 燃气数据查询-不分页
+export function getGasDataSingle(params) {
+  return request({
     url: 'gasdata/list',
     method: 'get',
     params
@@ -85,6 +102,16 @@
     params
   })
 }
+
+// 管盯数据查询-不分页
+export function getTubeDataSingle(params) {
+  return request({
+    url: 'tubedata/list',
+    method: 'get',
+    params
+  })
+}
+
 // 批量导出管盯数据
 export function batchExportTubeData(params) {
   return request({
@@ -98,11 +125,21 @@
 // 开挖数据查询
 export function getDigData(params) {
   return request({
+    url: 'digdata/list-page',
+    method: 'get',
+    params
+  })
+}
+
+// 开挖数据查询,不分页
+export function getDigDataSingle(params) {
+  return request({
     url: 'digdata/list',
     method: 'get',
     params
   })
 }
+
 // 批量导出开挖数据
 export function batchExportDigData(params) {
   return request({
@@ -116,11 +153,20 @@
 // 有害气体数据查询
 export function getHarmfulData(params) {
   return request({
+    url: 'harmfuldata/list-page',
+    method: 'get',
+    params
+  })
+}
+// 有害气体数据查询,不分页
+export function getHarmfulDataSingle(params) {
+  return request({
     url: 'harmfuldata/list',
     method: 'get',
     params
   })
 }
+
 // 批量导出有害气体数据
 export function batchExportHarmfulData(params) {
   return request({
@@ -134,6 +180,14 @@
 // 温湿度数据查询
 export function getTempData(params) {
   return request({
+    url: 'tempdata/list-page',
+    method: 'get',
+    params
+  })
+}
+// 温湿度数据查询,不分页
+export function getTempDataSimple(params) {
+  return request({
     url: 'tempdata/list',
     method: 'get',
     params
@@ -153,6 +207,14 @@
 // 井盖定位监测仪数据查询
 export function getWellLocaData(params) {
   return request({
+    url: 'welllocadata/list-page',
+    method: 'get',
+    params
+  })
+}
+// 井盖定位监测仪数据查询,不分页
+export function getWellLocaDataSingle(params) {
+  return request({
     url: 'welllocadata/list',
     method: 'get',
     params
@@ -172,6 +234,14 @@
 // 噪声记录仪数据查询
 export function getNoiseData(params) {
   return request({
+    url: 'noisedata/list-page',
+    method: 'get',
+    params
+  })
+}
+// 噪声记录仪数据查询,不分页
+export function getNoiseDataSingle(params) {
+  return request({
     url: 'noisedata/list',
     method: 'get',
     params
@@ -190,6 +260,14 @@
 // 液位燃气一体化设备数据查询
 export function getLiquidGasData(params) {
   return request({
+    url: 'liquidGasData/list-page',
+    method: 'get',
+    params
+  })
+}
+// 液位燃气一体化设备数据查询,不分页
+export function getLiquidGasDataSingle(params) {
+  return request({
     url: 'liquidGasData/list',
     method: 'get',
     params
@@ -209,7 +287,15 @@
 // 可燃气体外协数据查询
 export function getGasdectorData(params) {
   return request({
-    url: '/gasdector/listpage',
+    url: '/gasdector/list-page',
+    method: 'get',
+    params
+  })
+}
+// 可燃气体外协数据查询,不分页
+export function getGasdectorDataSingle(params) {
+  return request({
+    url: '/gasdector/list',
     method: 'get',
     params
   })
@@ -228,7 +314,15 @@
 // 激甲云台数据查询-章丘
 export function getPantiltData(params) {
   return request({
-    url: '/pantilt/listpage',
+    url: '/pantilt/list-page',
+    method: 'get',
+    params
+  })
+}
+// 激甲云台数据查询-章丘
+export function getPantiltDataSingle(params) {
+  return request({
+    url: '/pantilt/list',
     method: 'get',
     params
   })
@@ -248,6 +342,14 @@
 // 消防栓数据查询
 export function getHydrantData(params) {
   return request({
+    url: 'hydrant/list-page',
+    method: 'get',
+    params
+  })
+}
+// 消防栓数据查询,不分页
+export function getHydrantDataSingle(params) {
+  return request({
     url: 'hydrant/list',
     method: 'get',
     params
diff --git a/src/api/data/dataStatics.js b/src/api/data/dataStatics.js
index e79dea3..fdbc34f 100644
--- a/src/api/data/dataStatics.js
+++ b/src/api/data/dataStatics.js
@@ -90,6 +90,15 @@
   })
 }
 
+// 统计某段时间每种类型的报警数
+export function alarmStaticByContent(params) {
+  return request({
+    url: 'statics/alarmStaticsByContent',
+    method: 'get',
+    params
+  })
+}
+
 // 根据权属单位进行报警统计查询
 export function alarmStaticByDept(params) {
   return request({
diff --git a/src/components/BigData/Card/index.vue b/src/components/BigData/Card/index.vue
index b9e5ee6..09fb191 100644
--- a/src/components/BigData/Card/index.vue
+++ b/src/components/BigData/Card/index.vue
@@ -1,6 +1,6 @@
 <template>
-  <el-card :body-style="{ padding: '0px' }" shadow="always">
-    <div class="card-panel" >
+  <el-card :body-style="{ padding: '0px' }" :shadow="shadow">
+    <div class="card-panel">
       <div :style="backgroundColor" class="card-panel-icon-wrapper">
         <svg-icon :icon-class="icon" class-name="card-panel-icon" />
       </div>
@@ -24,27 +24,31 @@
     title: {
       type: String,
       default: '标题'
-    },
+    }, // 标题
     flags: {
       type: String,
       default: '单位'
-    },
+    }, // 单位
     subtitle: {
       type: String,
       default: ''
-    },
+    }, // 小标题
     icon: {
       type: String,
       default: ''
-    },
+    }, // 图标
     context: {
       type: [String, Number],
       default: ''
-    },
+    }, // 内容
     color: {
       type: String,
       default: '#40c9c6'
-    }
+    }, // 图标颜色
+    shadow: {
+      type: String,
+      default: 'always'
+    } // 卡片阴影
   },
   computed: {
     backgroundColor() {

diff --git a/src/api/data/data.js b/src/api/data/data.js
index 7dcc6c7..9d23a3e 100644
--- a/src/api/data/data.js
+++ b/src/api/data/data.js
@@ -13,7 +13,7 @@
 // 井盖数据查询
 export function getWellData(params) {
   return request({
-    url: 'welldata/list',
+    url: 'welldata/list-page',
     method: 'get',
     params
   })
@@ -40,6 +40,15 @@
 // 液位数据查询
 export function getLiquidData(params) {
   return request({
+    url: 'liquiddata/list-page',
+    method: 'get',
+    params
+  })
+}
+
+// 液位数据查询-不分页
+export function getLiquidDataSingle(params) {
+  return request({
     url: 'liquiddata/list',
     method: 'get',
     params
@@ -60,6 +69,14 @@
 // 燃气数据查询
 export function getGasData(params) {
   return request({
+    url: 'gasdata/list-page',
+    method: 'get',
+    params
+  })
+}
+// 燃气数据查询-不分页
+export function getGasDataSingle(params) {
+  return request({
     url: 'gasdata/list',
     method: 'get',
     params
@@ -85,6 +102,16 @@
     params
   })
 }
+
+// 管盯数据查询-不分页
+export function getTubeDataSingle(params) {
+  return request({
+    url: 'tubedata/list',
+    method: 'get',
+    params
+  })
+}
+
 // 批量导出管盯数据
 export function batchExportTubeData(params) {
   return request({
@@ -98,11 +125,21 @@
 // 开挖数据查询
 export function getDigData(params) {
   return request({
+    url: 'digdata/list-page',
+    method: 'get',
+    params
+  })
+}
+
+// 开挖数据查询,不分页
+export function getDigDataSingle(params) {
+  return request({
     url: 'digdata/list',
     method: 'get',
     params
   })
 }
+
 // 批量导出开挖数据
 export function batchExportDigData(params) {
   return request({
@@ -116,11 +153,20 @@
 // 有害气体数据查询
 export function getHarmfulData(params) {
   return request({
+    url: 'harmfuldata/list-page',
+    method: 'get',
+    params
+  })
+}
+// 有害气体数据查询,不分页
+export function getHarmfulDataSingle(params) {
+  return request({
     url: 'harmfuldata/list',
     method: 'get',
     params
   })
 }
+
 // 批量导出有害气体数据
 export function batchExportHarmfulData(params) {
   return request({
@@ -134,6 +180,14 @@
 // 温湿度数据查询
 export function getTempData(params) {
   return request({
+    url: 'tempdata/list-page',
+    method: 'get',
+    params
+  })
+}
+// 温湿度数据查询,不分页
+export function getTempDataSimple(params) {
+  return request({
     url: 'tempdata/list',
     method: 'get',
     params
@@ -153,6 +207,14 @@
 // 井盖定位监测仪数据查询
 export function getWellLocaData(params) {
   return request({
+    url: 'welllocadata/list-page',
+    method: 'get',
+    params
+  })
+}
+// 井盖定位监测仪数据查询,不分页
+export function getWellLocaDataSingle(params) {
+  return request({
     url: 'welllocadata/list',
     method: 'get',
     params
@@ -172,6 +234,14 @@
 // 噪声记录仪数据查询
 export function getNoiseData(params) {
   return request({
+    url: 'noisedata/list-page',
+    method: 'get',
+    params
+  })
+}
+// 噪声记录仪数据查询,不分页
+export function getNoiseDataSingle(params) {
+  return request({
     url: 'noisedata/list',
     method: 'get',
     params
@@ -190,6 +260,14 @@
 // 液位燃气一体化设备数据查询
 export function getLiquidGasData(params) {
   return request({
+    url: 'liquidGasData/list-page',
+    method: 'get',
+    params
+  })
+}
+// 液位燃气一体化设备数据查询,不分页
+export function getLiquidGasDataSingle(params) {
+  return request({
     url: 'liquidGasData/list',
     method: 'get',
     params
@@ -209,7 +287,15 @@
 // 可燃气体外协数据查询
 export function getGasdectorData(params) {
   return request({
-    url: '/gasdector/listpage',
+    url: '/gasdector/list-page',
+    method: 'get',
+    params
+  })
+}
+// 可燃气体外协数据查询,不分页
+export function getGasdectorDataSingle(params) {
+  return request({
+    url: '/gasdector/list',
     method: 'get',
     params
   })
@@ -228,7 +314,15 @@
 // 激甲云台数据查询-章丘
 export function getPantiltData(params) {
   return request({
-    url: '/pantilt/listpage',
+    url: '/pantilt/list-page',
+    method: 'get',
+    params
+  })
+}
+// 激甲云台数据查询-章丘
+export function getPantiltDataSingle(params) {
+  return request({
+    url: '/pantilt/list',
     method: 'get',
     params
   })
@@ -248,6 +342,14 @@
 // 消防栓数据查询
 export function getHydrantData(params) {
   return request({
+    url: 'hydrant/list-page',
+    method: 'get',
+    params
+  })
+}
+// 消防栓数据查询,不分页
+export function getHydrantDataSingle(params) {
+  return request({
     url: 'hydrant/list',
     method: 'get',
     params
diff --git a/src/api/data/dataStatics.js b/src/api/data/dataStatics.js
index e79dea3..fdbc34f 100644
--- a/src/api/data/dataStatics.js
+++ b/src/api/data/dataStatics.js
@@ -90,6 +90,15 @@
   })
 }
 
+// 统计某段时间每种类型的报警数
+export function alarmStaticByContent(params) {
+  return request({
+    url: 'statics/alarmStaticsByContent',
+    method: 'get',
+    params
+  })
+}
+
 // 根据权属单位进行报警统计查询
 export function alarmStaticByDept(params) {
   return request({
diff --git a/src/components/BigData/Card/index.vue b/src/components/BigData/Card/index.vue
index b9e5ee6..09fb191 100644
--- a/src/components/BigData/Card/index.vue
+++ b/src/components/BigData/Card/index.vue
@@ -1,6 +1,6 @@
 <template>
-  <el-card :body-style="{ padding: '0px' }" shadow="always">
-    <div class="card-panel" >
+  <el-card :body-style="{ padding: '0px' }" :shadow="shadow">
+    <div class="card-panel">
       <div :style="backgroundColor" class="card-panel-icon-wrapper">
         <svg-icon :icon-class="icon" class-name="card-panel-icon" />
       </div>
@@ -24,27 +24,31 @@
     title: {
       type: String,
       default: '标题'
-    },
+    }, // 标题
     flags: {
       type: String,
       default: '单位'
-    },
+    }, // 单位
     subtitle: {
       type: String,
       default: ''
-    },
+    }, // 小标题
     icon: {
       type: String,
       default: ''
-    },
+    }, // 图标
     context: {
       type: [String, Number],
       default: ''
-    },
+    }, // 内容
     color: {
       type: String,
       default: '#40c9c6'
-    }
+    }, // 图标颜色
+    shadow: {
+      type: String,
+      default: 'always'
+    } // 卡片阴影
   },
   computed: {
     backgroundColor() {
diff --git a/src/components/BigData/Card/panelCard.vue b/src/components/BigData/Card/panelCard.vue
new file mode 100644
index 0000000..d6a7b89
--- /dev/null
+++ b/src/components/BigData/Card/panelCard.vue
@@ -0,0 +1,51 @@
+<template>
+  <div class="panel-container">
+    <div class="panel-title">
+      {{ title }}
+      <div class="title-right">
+        <slot name="func" />
+      </div>
+    </div>
+    <div class="panel-body">
+      <slot />
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  name: 'PanelCard',
+  props: {
+    // 标题
+    title: {
+      type: String,
+      default: ''
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.panel-container{
+  width: 100%;
+  padding: 10px;
+  border: 1px solid #EBEEF5 ;
+  .panel-title{
+    width: 100%;
+    line-height: 2;
+    font-size: 16px;
+    font-weight: bold;
+    padding: 0px 10px;
+    border-left: 5px solid #66b1ff;
+    position: relative;
+    .title-right{
+      display: inline-block;
+      position: absolute;
+      right: 10px;
+    }
+  }
+  .panel-body{
+    padding: 5px 0px;
+    height:auto;
+  }
+}
+</style>

diff --git a/src/api/data/data.js b/src/api/data/data.js
index 7dcc6c7..9d23a3e 100644
--- a/src/api/data/data.js
+++ b/src/api/data/data.js
@@ -13,7 +13,7 @@
 // 井盖数据查询
 export function getWellData(params) {
   return request({
-    url: 'welldata/list',
+    url: 'welldata/list-page',
     method: 'get',
     params
   })
@@ -40,6 +40,15 @@
 // 液位数据查询
 export function getLiquidData(params) {
   return request({
+    url: 'liquiddata/list-page',
+    method: 'get',
+    params
+  })
+}
+
+// 液位数据查询-不分页
+export function getLiquidDataSingle(params) {
+  return request({
     url: 'liquiddata/list',
     method: 'get',
     params
@@ -60,6 +69,14 @@
 // 燃气数据查询
 export function getGasData(params) {
   return request({
+    url: 'gasdata/list-page',
+    method: 'get',
+    params
+  })
+}
+// 燃气数据查询-不分页
+export function getGasDataSingle(params) {
+  return request({
     url: 'gasdata/list',
     method: 'get',
     params
@@ -85,6 +102,16 @@
     params
   })
 }
+
+// 管盯数据查询-不分页
+export function getTubeDataSingle(params) {
+  return request({
+    url: 'tubedata/list',
+    method: 'get',
+    params
+  })
+}
+
 // 批量导出管盯数据
 export function batchExportTubeData(params) {
   return request({
@@ -98,11 +125,21 @@
 // 开挖数据查询
 export function getDigData(params) {
   return request({
+    url: 'digdata/list-page',
+    method: 'get',
+    params
+  })
+}
+
+// 开挖数据查询,不分页
+export function getDigDataSingle(params) {
+  return request({
     url: 'digdata/list',
     method: 'get',
     params
   })
 }
+
 // 批量导出开挖数据
 export function batchExportDigData(params) {
   return request({
@@ -116,11 +153,20 @@
 // 有害气体数据查询
 export function getHarmfulData(params) {
   return request({
+    url: 'harmfuldata/list-page',
+    method: 'get',
+    params
+  })
+}
+// 有害气体数据查询,不分页
+export function getHarmfulDataSingle(params) {
+  return request({
     url: 'harmfuldata/list',
     method: 'get',
     params
   })
 }
+
 // 批量导出有害气体数据
 export function batchExportHarmfulData(params) {
   return request({
@@ -134,6 +180,14 @@
 // 温湿度数据查询
 export function getTempData(params) {
   return request({
+    url: 'tempdata/list-page',
+    method: 'get',
+    params
+  })
+}
+// 温湿度数据查询,不分页
+export function getTempDataSimple(params) {
+  return request({
     url: 'tempdata/list',
     method: 'get',
     params
@@ -153,6 +207,14 @@
 // 井盖定位监测仪数据查询
 export function getWellLocaData(params) {
   return request({
+    url: 'welllocadata/list-page',
+    method: 'get',
+    params
+  })
+}
+// 井盖定位监测仪数据查询,不分页
+export function getWellLocaDataSingle(params) {
+  return request({
     url: 'welllocadata/list',
     method: 'get',
     params
@@ -172,6 +234,14 @@
 // 噪声记录仪数据查询
 export function getNoiseData(params) {
   return request({
+    url: 'noisedata/list-page',
+    method: 'get',
+    params
+  })
+}
+// 噪声记录仪数据查询,不分页
+export function getNoiseDataSingle(params) {
+  return request({
     url: 'noisedata/list',
     method: 'get',
     params
@@ -190,6 +260,14 @@
 // 液位燃气一体化设备数据查询
 export function getLiquidGasData(params) {
   return request({
+    url: 'liquidGasData/list-page',
+    method: 'get',
+    params
+  })
+}
+// 液位燃气一体化设备数据查询,不分页
+export function getLiquidGasDataSingle(params) {
+  return request({
     url: 'liquidGasData/list',
     method: 'get',
     params
@@ -209,7 +287,15 @@
 // 可燃气体外协数据查询
 export function getGasdectorData(params) {
   return request({
-    url: '/gasdector/listpage',
+    url: '/gasdector/list-page',
+    method: 'get',
+    params
+  })
+}
+// 可燃气体外协数据查询,不分页
+export function getGasdectorDataSingle(params) {
+  return request({
+    url: '/gasdector/list',
     method: 'get',
     params
   })
@@ -228,7 +314,15 @@
 // 激甲云台数据查询-章丘
 export function getPantiltData(params) {
   return request({
-    url: '/pantilt/listpage',
+    url: '/pantilt/list-page',
+    method: 'get',
+    params
+  })
+}
+// 激甲云台数据查询-章丘
+export function getPantiltDataSingle(params) {
+  return request({
+    url: '/pantilt/list',
     method: 'get',
     params
   })
@@ -248,6 +342,14 @@
 // 消防栓数据查询
 export function getHydrantData(params) {
   return request({
+    url: 'hydrant/list-page',
+    method: 'get',
+    params
+  })
+}
+// 消防栓数据查询,不分页
+export function getHydrantDataSingle(params) {
+  return request({
     url: 'hydrant/list',
     method: 'get',
     params
diff --git a/src/api/data/dataStatics.js b/src/api/data/dataStatics.js
index e79dea3..fdbc34f 100644
--- a/src/api/data/dataStatics.js
+++ b/src/api/data/dataStatics.js
@@ -90,6 +90,15 @@
   })
 }
 
+// 统计某段时间每种类型的报警数
+export function alarmStaticByContent(params) {
+  return request({
+    url: 'statics/alarmStaticsByContent',
+    method: 'get',
+    params
+  })
+}
+
 // 根据权属单位进行报警统计查询
 export function alarmStaticByDept(params) {
   return request({
diff --git a/src/components/BigData/Card/index.vue b/src/components/BigData/Card/index.vue
index b9e5ee6..09fb191 100644
--- a/src/components/BigData/Card/index.vue
+++ b/src/components/BigData/Card/index.vue
@@ -1,6 +1,6 @@
 <template>
-  <el-card :body-style="{ padding: '0px' }" shadow="always">
-    <div class="card-panel" >
+  <el-card :body-style="{ padding: '0px' }" :shadow="shadow">
+    <div class="card-panel">
       <div :style="backgroundColor" class="card-panel-icon-wrapper">
         <svg-icon :icon-class="icon" class-name="card-panel-icon" />
       </div>
@@ -24,27 +24,31 @@
     title: {
       type: String,
       default: '标题'
-    },
+    }, // 标题
     flags: {
       type: String,
       default: '单位'
-    },
+    }, // 单位
     subtitle: {
       type: String,
       default: ''
-    },
+    }, // 小标题
     icon: {
       type: String,
       default: ''
-    },
+    }, // 图标
     context: {
       type: [String, Number],
       default: ''
-    },
+    }, // 内容
     color: {
       type: String,
       default: '#40c9c6'
-    }
+    }, // 图标颜色
+    shadow: {
+      type: String,
+      default: 'always'
+    } // 卡片阴影
   },
   computed: {
     backgroundColor() {
diff --git a/src/components/BigData/Card/panelCard.vue b/src/components/BigData/Card/panelCard.vue
new file mode 100644
index 0000000..d6a7b89
--- /dev/null
+++ b/src/components/BigData/Card/panelCard.vue
@@ -0,0 +1,51 @@
+<template>
+  <div class="panel-container">
+    <div class="panel-title">
+      {{ title }}
+      <div class="title-right">
+        <slot name="func" />
+      </div>
+    </div>
+    <div class="panel-body">
+      <slot />
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  name: 'PanelCard',
+  props: {
+    // 标题
+    title: {
+      type: String,
+      default: ''
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.panel-container{
+  width: 100%;
+  padding: 10px;
+  border: 1px solid #EBEEF5 ;
+  .panel-title{
+    width: 100%;
+    line-height: 2;
+    font-size: 16px;
+    font-weight: bold;
+    padding: 0px 10px;
+    border-left: 5px solid #66b1ff;
+    position: relative;
+    .title-right{
+      display: inline-block;
+      position: absolute;
+      right: 10px;
+    }
+  }
+  .panel-body{
+    padding: 5px 0px;
+    height:auto;
+  }
+}
+</style>
diff --git a/src/views/dataManage/dataManage.vue b/src/views/dataManage/dataManage.vue
index 71be03f..0564cdd 100644
--- a/src/views/dataManage/dataManage.vue
+++ b/src/views/dataManage/dataManage.vue
@@ -31,19 +31,19 @@
     return {
       activeName: 'wellcover',
       tabList: [
-        { permission: '/welldata/list', label: '井盖状态监测仪', name: 'wellcover', type: '1', comp: 'list-well-cover-data' },
-        { permission: '/liquiddata/list', label: '液位监测仪', name: 'liquid', type: '2', comp: 'list-liquid-data' },
-        { permission: '/gasdata/list', label: '燃气智能监测终端', name: 'gas', type: '4', comp: 'list-gas-data' },
-        { permission: '/digdata/list', label: '开挖监测仪', name: 'dig', type: '6', comp: 'list-dig-data' },
-        { permission: '/noisedata/list', label: '噪声记录仪', name: 'noise', type: '8', comp: 'list-noise-data' },
-        { permission: '/harmfuldata/list', label: '有害气体监测仪', name: 'harmful', type: '3', comp: 'list-harmful-data' },
-        { permission: '/tempdata/list', label: '温湿度监测仪', name: 'temp', type: '5', comp: 'list-temp-data' },
-        { permission: '/welllocadata/list', label: '井盖定位监测仪', name: 'wellloca', type: '7', comp: 'list-well-loca-data' },
-        { permission: '/liquidGasData/list', label: '燃气智能终端(一体化)', name: 'liquidgas', type: '10', comp: 'list-liquid-gas-data' },
-        { permission: '/tubedata/list', label: '管盯', name: 'tube', type: '12', comp: 'list-tube-data' },
-        { permission: '/gasdector/listPage', label: '可燃气体智能监测终端', name: 'gasdector', type: '1', comp: 'list-gasdector-data' },
-        { permission: '/pantilt/listPage', label: '激光甲烷遥测云台', name: 'pantilt', type: '1', comp: 'list-pantilt-data' },
-        { permission: '/hydrantdata/list', label: '消防栓数据列表', name: 'hydrant', type: '11', comp: 'list-hydrant-data' }
+        { permission: '/welldata/list-page', label: '井盖状态监测仪', name: 'wellcover', type: '1', comp: 'list-well-cover-data' },
+        { permission: '/liquiddata/list-page', label: '液位监测仪', name: 'liquid', type: '2', comp: 'list-liquid-data' },
+        { permission: '/gasdata/list-page', label: '燃气智能监测终端', name: 'gas', type: '4', comp: 'list-gas-data' },
+        { permission: '/digdata/list-page', label: '开挖监测仪', name: 'dig', type: '6', comp: 'list-dig-data' },
+        { permission: '/noisedata/list-page', label: '噪声记录仪', name: 'noise', type: '8', comp: 'list-noise-data' },
+        { permission: '/harmfuldata/list-page', label: '有害气体监测仪', name: 'harmful', type: '3', comp: 'list-harmful-data' },
+        { permission: '/tempdata/list-page', label: '温湿度监测仪', name: 'temp', type: '5', comp: 'list-temp-data' },
+        { permission: '/welllocadata/list-page', label: '井盖定位监测仪', name: 'wellloca', type: '7', comp: 'list-well-loca-data' },
+        { permission: '/liquidGasData/list-page', label: '燃气智能终端(一体化)', name: 'liquidgas', type: '10', comp: 'list-liquid-gas-data' },
+        { permission: '/tubedata/list-page', label: '管盯', name: 'tube', type: '12', comp: 'list-tube-data' },
+        { permission: '/gasdector/list-page', label: '可燃气体智能监测终端', name: 'gasdector', type: '1', comp: 'list-gasdector-data' },
+        { permission: '/pantilt/list-page', label: '激光甲烷遥测云台', name: 'pantilt', type: '1', comp: 'list-pantilt-data' },
+        { permission: '/hydrantdata/list-page', label: '消防栓防盗水监测仪', name: 'hydrant', type: '11', comp: 'list-hydrant-data' }
       ] // 所有tab列表
     }
   },

diff --git a/src/api/data/data.js b/src/api/data/data.js
index 7dcc6c7..9d23a3e 100644
--- a/src/api/data/data.js
+++ b/src/api/data/data.js
@@ -13,7 +13,7 @@
 // 井盖数据查询
 export function getWellData(params) {
   return request({
-    url: 'welldata/list',
+    url: 'welldata/list-page',
     method: 'get',
     params
   })
@@ -40,6 +40,15 @@
 // 液位数据查询
 export function getLiquidData(params) {
   return request({
+    url: 'liquiddata/list-page',
+    method: 'get',
+    params
+  })
+}
+
+// 液位数据查询-不分页
+export function getLiquidDataSingle(params) {
+  return request({
     url: 'liquiddata/list',
     method: 'get',
     params
@@ -60,6 +69,14 @@
 // 燃气数据查询
 export function getGasData(params) {
   return request({
+    url: 'gasdata/list-page',
+    method: 'get',
+    params
+  })
+}
+// 燃气数据查询-不分页
+export function getGasDataSingle(params) {
+  return request({
     url: 'gasdata/list',
     method: 'get',
     params
@@ -85,6 +102,16 @@
     params
   })
 }
+
+// 管盯数据查询-不分页
+export function getTubeDataSingle(params) {
+  return request({
+    url: 'tubedata/list',
+    method: 'get',
+    params
+  })
+}
+
 // 批量导出管盯数据
 export function batchExportTubeData(params) {
   return request({
@@ -98,11 +125,21 @@
 // 开挖数据查询
 export function getDigData(params) {
   return request({
+    url: 'digdata/list-page',
+    method: 'get',
+    params
+  })
+}
+
+// 开挖数据查询,不分页
+export function getDigDataSingle(params) {
+  return request({
     url: 'digdata/list',
     method: 'get',
     params
   })
 }
+
 // 批量导出开挖数据
 export function batchExportDigData(params) {
   return request({
@@ -116,11 +153,20 @@
 // 有害气体数据查询
 export function getHarmfulData(params) {
   return request({
+    url: 'harmfuldata/list-page',
+    method: 'get',
+    params
+  })
+}
+// 有害气体数据查询,不分页
+export function getHarmfulDataSingle(params) {
+  return request({
     url: 'harmfuldata/list',
     method: 'get',
     params
   })
 }
+
 // 批量导出有害气体数据
 export function batchExportHarmfulData(params) {
   return request({
@@ -134,6 +180,14 @@
 // 温湿度数据查询
 export function getTempData(params) {
   return request({
+    url: 'tempdata/list-page',
+    method: 'get',
+    params
+  })
+}
+// 温湿度数据查询,不分页
+export function getTempDataSimple(params) {
+  return request({
     url: 'tempdata/list',
     method: 'get',
     params
@@ -153,6 +207,14 @@
 // 井盖定位监测仪数据查询
 export function getWellLocaData(params) {
   return request({
+    url: 'welllocadata/list-page',
+    method: 'get',
+    params
+  })
+}
+// 井盖定位监测仪数据查询,不分页
+export function getWellLocaDataSingle(params) {
+  return request({
     url: 'welllocadata/list',
     method: 'get',
     params
@@ -172,6 +234,14 @@
 // 噪声记录仪数据查询
 export function getNoiseData(params) {
   return request({
+    url: 'noisedata/list-page',
+    method: 'get',
+    params
+  })
+}
+// 噪声记录仪数据查询,不分页
+export function getNoiseDataSingle(params) {
+  return request({
     url: 'noisedata/list',
     method: 'get',
     params
@@ -190,6 +260,14 @@
 // 液位燃气一体化设备数据查询
 export function getLiquidGasData(params) {
   return request({
+    url: 'liquidGasData/list-page',
+    method: 'get',
+    params
+  })
+}
+// 液位燃气一体化设备数据查询,不分页
+export function getLiquidGasDataSingle(params) {
+  return request({
     url: 'liquidGasData/list',
     method: 'get',
     params
@@ -209,7 +287,15 @@
 // 可燃气体外协数据查询
 export function getGasdectorData(params) {
   return request({
-    url: '/gasdector/listpage',
+    url: '/gasdector/list-page',
+    method: 'get',
+    params
+  })
+}
+// 可燃气体外协数据查询,不分页
+export function getGasdectorDataSingle(params) {
+  return request({
+    url: '/gasdector/list',
     method: 'get',
     params
   })
@@ -228,7 +314,15 @@
 // 激甲云台数据查询-章丘
 export function getPantiltData(params) {
   return request({
-    url: '/pantilt/listpage',
+    url: '/pantilt/list-page',
+    method: 'get',
+    params
+  })
+}
+// 激甲云台数据查询-章丘
+export function getPantiltDataSingle(params) {
+  return request({
+    url: '/pantilt/list',
     method: 'get',
     params
   })
@@ -248,6 +342,14 @@
 // 消防栓数据查询
 export function getHydrantData(params) {
   return request({
+    url: 'hydrant/list-page',
+    method: 'get',
+    params
+  })
+}
+// 消防栓数据查询,不分页
+export function getHydrantDataSingle(params) {
+  return request({
     url: 'hydrant/list',
     method: 'get',
     params
diff --git a/src/api/data/dataStatics.js b/src/api/data/dataStatics.js
index e79dea3..fdbc34f 100644
--- a/src/api/data/dataStatics.js
+++ b/src/api/data/dataStatics.js
@@ -90,6 +90,15 @@
   })
 }
 
+// 统计某段时间每种类型的报警数
+export function alarmStaticByContent(params) {
+  return request({
+    url: 'statics/alarmStaticsByContent',
+    method: 'get',
+    params
+  })
+}
+
 // 根据权属单位进行报警统计查询
 export function alarmStaticByDept(params) {
   return request({
diff --git a/src/components/BigData/Card/index.vue b/src/components/BigData/Card/index.vue
index b9e5ee6..09fb191 100644
--- a/src/components/BigData/Card/index.vue
+++ b/src/components/BigData/Card/index.vue
@@ -1,6 +1,6 @@
 <template>
-  <el-card :body-style="{ padding: '0px' }" shadow="always">
-    <div class="card-panel" >
+  <el-card :body-style="{ padding: '0px' }" :shadow="shadow">
+    <div class="card-panel">
       <div :style="backgroundColor" class="card-panel-icon-wrapper">
         <svg-icon :icon-class="icon" class-name="card-panel-icon" />
       </div>
@@ -24,27 +24,31 @@
     title: {
       type: String,
       default: '标题'
-    },
+    }, // 标题
     flags: {
       type: String,
       default: '单位'
-    },
+    }, // 单位
     subtitle: {
       type: String,
       default: ''
-    },
+    }, // 小标题
     icon: {
       type: String,
       default: ''
-    },
+    }, // 图标
     context: {
       type: [String, Number],
       default: ''
-    },
+    }, // 内容
     color: {
       type: String,
       default: '#40c9c6'
-    }
+    }, // 图标颜色
+    shadow: {
+      type: String,
+      default: 'always'
+    } // 卡片阴影
   },
   computed: {
     backgroundColor() {
diff --git a/src/components/BigData/Card/panelCard.vue b/src/components/BigData/Card/panelCard.vue
new file mode 100644
index 0000000..d6a7b89
--- /dev/null
+++ b/src/components/BigData/Card/panelCard.vue
@@ -0,0 +1,51 @@
+<template>
+  <div class="panel-container">
+    <div class="panel-title">
+      {{ title }}
+      <div class="title-right">
+        <slot name="func" />
+      </div>
+    </div>
+    <div class="panel-body">
+      <slot />
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  name: 'PanelCard',
+  props: {
+    // 标题
+    title: {
+      type: String,
+      default: ''
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.panel-container{
+  width: 100%;
+  padding: 10px;
+  border: 1px solid #EBEEF5 ;
+  .panel-title{
+    width: 100%;
+    line-height: 2;
+    font-size: 16px;
+    font-weight: bold;
+    padding: 0px 10px;
+    border-left: 5px solid #66b1ff;
+    position: relative;
+    .title-right{
+      display: inline-block;
+      position: absolute;
+      right: 10px;
+    }
+  }
+  .panel-body{
+    padding: 5px 0px;
+    height:auto;
+  }
+}
+</style>
diff --git a/src/views/dataManage/dataManage.vue b/src/views/dataManage/dataManage.vue
index 71be03f..0564cdd 100644
--- a/src/views/dataManage/dataManage.vue
+++ b/src/views/dataManage/dataManage.vue
@@ -31,19 +31,19 @@
     return {
       activeName: 'wellcover',
       tabList: [
-        { permission: '/welldata/list', label: '井盖状态监测仪', name: 'wellcover', type: '1', comp: 'list-well-cover-data' },
-        { permission: '/liquiddata/list', label: '液位监测仪', name: 'liquid', type: '2', comp: 'list-liquid-data' },
-        { permission: '/gasdata/list', label: '燃气智能监测终端', name: 'gas', type: '4', comp: 'list-gas-data' },
-        { permission: '/digdata/list', label: '开挖监测仪', name: 'dig', type: '6', comp: 'list-dig-data' },
-        { permission: '/noisedata/list', label: '噪声记录仪', name: 'noise', type: '8', comp: 'list-noise-data' },
-        { permission: '/harmfuldata/list', label: '有害气体监测仪', name: 'harmful', type: '3', comp: 'list-harmful-data' },
-        { permission: '/tempdata/list', label: '温湿度监测仪', name: 'temp', type: '5', comp: 'list-temp-data' },
-        { permission: '/welllocadata/list', label: '井盖定位监测仪', name: 'wellloca', type: '7', comp: 'list-well-loca-data' },
-        { permission: '/liquidGasData/list', label: '燃气智能终端(一体化)', name: 'liquidgas', type: '10', comp: 'list-liquid-gas-data' },
-        { permission: '/tubedata/list', label: '管盯', name: 'tube', type: '12', comp: 'list-tube-data' },
-        { permission: '/gasdector/listPage', label: '可燃气体智能监测终端', name: 'gasdector', type: '1', comp: 'list-gasdector-data' },
-        { permission: '/pantilt/listPage', label: '激光甲烷遥测云台', name: 'pantilt', type: '1', comp: 'list-pantilt-data' },
-        { permission: '/hydrantdata/list', label: '消防栓数据列表', name: 'hydrant', type: '11', comp: 'list-hydrant-data' }
+        { permission: '/welldata/list-page', label: '井盖状态监测仪', name: 'wellcover', type: '1', comp: 'list-well-cover-data' },
+        { permission: '/liquiddata/list-page', label: '液位监测仪', name: 'liquid', type: '2', comp: 'list-liquid-data' },
+        { permission: '/gasdata/list-page', label: '燃气智能监测终端', name: 'gas', type: '4', comp: 'list-gas-data' },
+        { permission: '/digdata/list-page', label: '开挖监测仪', name: 'dig', type: '6', comp: 'list-dig-data' },
+        { permission: '/noisedata/list-page', label: '噪声记录仪', name: 'noise', type: '8', comp: 'list-noise-data' },
+        { permission: '/harmfuldata/list-page', label: '有害气体监测仪', name: 'harmful', type: '3', comp: 'list-harmful-data' },
+        { permission: '/tempdata/list-page', label: '温湿度监测仪', name: 'temp', type: '5', comp: 'list-temp-data' },
+        { permission: '/welllocadata/list-page', label: '井盖定位监测仪', name: 'wellloca', type: '7', comp: 'list-well-loca-data' },
+        { permission: '/liquidGasData/list-page', label: '燃气智能终端(一体化)', name: 'liquidgas', type: '10', comp: 'list-liquid-gas-data' },
+        { permission: '/tubedata/list-page', label: '管盯', name: 'tube', type: '12', comp: 'list-tube-data' },
+        { permission: '/gasdector/list-page', label: '可燃气体智能监测终端', name: 'gasdector', type: '1', comp: 'list-gasdector-data' },
+        { permission: '/pantilt/list-page', label: '激光甲烷遥测云台', name: 'pantilt', type: '1', comp: 'list-pantilt-data' },
+        { permission: '/hydrantdata/list-page', label: '消防栓防盗水监测仪', name: 'hydrant', type: '11', comp: 'list-hydrant-data' }
       ] // 所有tab列表
     }
   },
diff --git a/src/views/dataView/components/alarmView.vue b/src/views/dataView/components/alarmView.vue
index 5c02f41..32a12e5 100644
--- a/src/views/dataView/components/alarmView.vue
+++ b/src/views/dataView/components/alarmView.vue
@@ -1,106 +1,120 @@
 <template>
-  <div>
-    <div class="flagBoxStyle">
-      <div class="flagStyle" />
-      <div>报警分析</div>
-    </div>
-    <el-row>
-      <el-col :span="12">
-        <ve-line
-          :data="chartDataLine"
-          :settings="chartSettingsLine"
+  <panel-card title="报警分析">
+    <template slot="func">
+      <el-col :span="16">
+        <el-date-picker
+          v-model="timeRange"
+          type="datetimerange"
+          range-separator="至"
+          size="small"
+          :picker-options="pickerOptions"
+          value-format="yyyy-MM-dd HH:mm:ss"
+          start-placeholder="开始时间"
+          end-placeholder="结束时间"
+          @change="fetchDeviceTypeBar"
         />
       </el-col>
-      <el-col :span="12">
-        <div class="tableStyle">
-          <el-table border :data="tableList" stripe>
-            <el-table-column prop="name" label="报警类型" />
-            <el-table-column prop="value" label="设备名称" />
-          </el-table>
-        </div>
-      </el-col>
-    </el-row>
-  </div>
+    </template>
+    <div class="flex-container">
+      <div class="flex-left">
+        <ve-line
+          :data="chartData"
+          :settings="chartSettingsLine"
+        />
+      </div>
+      <div class="flex-right">
+        <el-table border :data="tableList" stripe empty-text="无报警" height="340">
+          <el-table-column prop="name" label="报警类型" align="center" />
+          <el-table-column prop="value" label="报警数量" align="center" />
+        </el-table>
+      </div>
+    </div>
+  </panel-card>
 </template>
 
 <script>
-import { alarmStaticsByContent } from '@/api/alarm/deviceStatics'
+import { alarmStaticByDay, alarmStaticsByContent } from '@/api/data/dataStatics'
+import PanelCard from '@/components/BigData/Card/panelCard'
+import { getSearchLastWeekTime } from '@/utils/dateutils'
+
 export default {
   name: 'AlarmStaticsByType',
+  components: { PanelCard },
   data() {
     return {
-      tableList: [],
+      listQuery: {
+        deviceType: '',
+        beginTime: '',
+        endTime: ''
+      }, // 查询条件
+      timeRange: [], // 时间范围
+      tableList: [], // 列表
       // 折线图
       chartSettingsLine: {
         labelMap: {
-          'alarmWellData': '井盖开盖报警',
-          'alarmLiquidData': '液位超限报警',
-          'alarmHarmfulData': '有害气体超标报警'
+          'date': '日期',
+          'alarmTimes': '报警次数'
         },
-        metrics: ['alarmWellData', 'alarmLiquidData', 'alarmHarmfulData'],
         dimension: ['date']
-      },
-      chartDataLine: {
-        columns: ['date', 'alarmWellData', 'alarmLiquidData', 'alarmHarmfulData'],
+      }, // 配置
+      chartData: {
+        columns: ['date', 'alarmTimes'],
         rows: []
-      }
+      } // 折线图数据
     }
   },
   created() {
-    this.fetchDeviceTypeLine()
-  },
-  mounted() {
-    this.tableList = [
-      {
-        value: '224',
-        name: '井盖开启'
-      },
-      {
-        value: '22',
-        name: '燃气浓度超限'
-      },
-      {
-        value: '1',
-        name: '液位超限'
-      },
-      {
-        value: '4',
-        name: '有害气体超标'
-      }
-    ]
+    this.timeRange = getSearchLastWeekTime()
+    this.handleDateTime()
+    this.fetchAlarmByDay()
+    this.fetchAlarmByContent()
   },
   methods: {
-    fetchDeviceTypeLine(val) {
-      if (val !== undefined) {
-        this.listQuery.startTime = val[0]
-        this.listQuery.endTime = val[1]
-      }
-      alarmStaticsByContent(this.listStatue).then(response => {
-        console.log(response.data, '===123')
-        this.chartDataLine.rows = response.data
+    // 获取各类报警的列表
+    fetchAlarmByContent() {
+      alarmStaticsByContent(this.listQuery).then(response => {
+        this.tableList = response.data
       })
+    },
+    // 获取每日报警数
+    fetchAlarmByDay() {
+      // 模拟数据
+      // this.chartData.rows = [
+      //   { 'date': '9月20日', 'alarmTimes': 153, 'alarmWells': 43 },
+      //   { 'date': '9月21日', 'alarmTimes': 150, 'alarmWells': 30 },
+      //   { 'date': '9月22日', 'alarmTimes': 143, 'alarmWells': 23 },
+      //   { 'date': '9月23日', 'alarmTimes': 173, 'alarmWells': 23 },
+      //   { 'date': '9月24日', 'alarmTimes': 272, 'alarmWells': 52 },
+      //   { 'date': '9月25日', 'alarmTimes': 253, 'alarmWells': 53 }
+      // ]
+      alarmStaticByDay(this.listQuery).then(response => {
+        this.chartData.rows = response.data
+      })
+    },
+    // 处理时间
+    handleDateTime() {
+      if (this.timeRange && this.timeRange.length > 0) {
+        this.listQuery.beginTime = this.timeRange[0]
+        this.listQuery.endTime = this.timeRange[1]
+      } else {
+        this.listQuery.beginTime = ''
+        this.listQuery.endTime = ''
+      }
     }
   }
 }
 </script>
 
 <style lang="scss" scoped>
-.tableStyle{
-  // padding: 100px 10px;
-}
-.flagBoxStyle {
+.flex-container{
   display: flex;
-  margin-bottom: 20px;
-}
-.flagBoxStyle div:nth-child(2){
-  line-height: 30px;
-  font-weight: 600;
-}
-.flagStyle {
-  width: 4px;
-  height: 30px;
-  margin-right: 6px;
-  background: rgb(64 121 242);
+  .flex-left{
+    flex:1;
+  }
+  .flex-right{
+    width: 260px;
+    padding: 10px 20px;
+  }
 }
 
 </style>

diff --git a/src/api/data/data.js b/src/api/data/data.js
index 7dcc6c7..9d23a3e 100644
--- a/src/api/data/data.js
+++ b/src/api/data/data.js
@@ -13,7 +13,7 @@
 // 井盖数据查询
 export function getWellData(params) {
   return request({
-    url: 'welldata/list',
+    url: 'welldata/list-page',
     method: 'get',
     params
   })
@@ -40,6 +40,15 @@
 // 液位数据查询
 export function getLiquidData(params) {
   return request({
+    url: 'liquiddata/list-page',
+    method: 'get',
+    params
+  })
+}
+
+// 液位数据查询-不分页
+export function getLiquidDataSingle(params) {
+  return request({
     url: 'liquiddata/list',
     method: 'get',
     params
@@ -60,6 +69,14 @@
 // 燃气数据查询
 export function getGasData(params) {
   return request({
+    url: 'gasdata/list-page',
+    method: 'get',
+    params
+  })
+}
+// 燃气数据查询-不分页
+export function getGasDataSingle(params) {
+  return request({
     url: 'gasdata/list',
     method: 'get',
     params
@@ -85,6 +102,16 @@
     params
   })
 }
+
+// 管盯数据查询-不分页
+export function getTubeDataSingle(params) {
+  return request({
+    url: 'tubedata/list',
+    method: 'get',
+    params
+  })
+}
+
 // 批量导出管盯数据
 export function batchExportTubeData(params) {
   return request({
@@ -98,11 +125,21 @@
 // 开挖数据查询
 export function getDigData(params) {
   return request({
+    url: 'digdata/list-page',
+    method: 'get',
+    params
+  })
+}
+
+// 开挖数据查询,不分页
+export function getDigDataSingle(params) {
+  return request({
     url: 'digdata/list',
     method: 'get',
     params
   })
 }
+
 // 批量导出开挖数据
 export function batchExportDigData(params) {
   return request({
@@ -116,11 +153,20 @@
 // 有害气体数据查询
 export function getHarmfulData(params) {
   return request({
+    url: 'harmfuldata/list-page',
+    method: 'get',
+    params
+  })
+}
+// 有害气体数据查询,不分页
+export function getHarmfulDataSingle(params) {
+  return request({
     url: 'harmfuldata/list',
     method: 'get',
     params
   })
 }
+
 // 批量导出有害气体数据
 export function batchExportHarmfulData(params) {
   return request({
@@ -134,6 +180,14 @@
 // 温湿度数据查询
 export function getTempData(params) {
   return request({
+    url: 'tempdata/list-page',
+    method: 'get',
+    params
+  })
+}
+// 温湿度数据查询,不分页
+export function getTempDataSimple(params) {
+  return request({
     url: 'tempdata/list',
     method: 'get',
     params
@@ -153,6 +207,14 @@
 // 井盖定位监测仪数据查询
 export function getWellLocaData(params) {
   return request({
+    url: 'welllocadata/list-page',
+    method: 'get',
+    params
+  })
+}
+// 井盖定位监测仪数据查询,不分页
+export function getWellLocaDataSingle(params) {
+  return request({
     url: 'welllocadata/list',
     method: 'get',
     params
@@ -172,6 +234,14 @@
 // 噪声记录仪数据查询
 export function getNoiseData(params) {
   return request({
+    url: 'noisedata/list-page',
+    method: 'get',
+    params
+  })
+}
+// 噪声记录仪数据查询,不分页
+export function getNoiseDataSingle(params) {
+  return request({
     url: 'noisedata/list',
     method: 'get',
     params
@@ -190,6 +260,14 @@
 // 液位燃气一体化设备数据查询
 export function getLiquidGasData(params) {
   return request({
+    url: 'liquidGasData/list-page',
+    method: 'get',
+    params
+  })
+}
+// 液位燃气一体化设备数据查询,不分页
+export function getLiquidGasDataSingle(params) {
+  return request({
     url: 'liquidGasData/list',
     method: 'get',
     params
@@ -209,7 +287,15 @@
 // 可燃气体外协数据查询
 export function getGasdectorData(params) {
   return request({
-    url: '/gasdector/listpage',
+    url: '/gasdector/list-page',
+    method: 'get',
+    params
+  })
+}
+// 可燃气体外协数据查询,不分页
+export function getGasdectorDataSingle(params) {
+  return request({
+    url: '/gasdector/list',
     method: 'get',
     params
   })
@@ -228,7 +314,15 @@
 // 激甲云台数据查询-章丘
 export function getPantiltData(params) {
   return request({
-    url: '/pantilt/listpage',
+    url: '/pantilt/list-page',
+    method: 'get',
+    params
+  })
+}
+// 激甲云台数据查询-章丘
+export function getPantiltDataSingle(params) {
+  return request({
+    url: '/pantilt/list',
     method: 'get',
     params
   })
@@ -248,6 +342,14 @@
 // 消防栓数据查询
 export function getHydrantData(params) {
   return request({
+    url: 'hydrant/list-page',
+    method: 'get',
+    params
+  })
+}
+// 消防栓数据查询,不分页
+export function getHydrantDataSingle(params) {
+  return request({
     url: 'hydrant/list',
     method: 'get',
     params
diff --git a/src/api/data/dataStatics.js b/src/api/data/dataStatics.js
index e79dea3..fdbc34f 100644
--- a/src/api/data/dataStatics.js
+++ b/src/api/data/dataStatics.js
@@ -90,6 +90,15 @@
   })
 }
 
+// 统计某段时间每种类型的报警数
+export function alarmStaticByContent(params) {
+  return request({
+    url: 'statics/alarmStaticsByContent',
+    method: 'get',
+    params
+  })
+}
+
 // 根据权属单位进行报警统计查询
 export function alarmStaticByDept(params) {
   return request({
diff --git a/src/components/BigData/Card/index.vue b/src/components/BigData/Card/index.vue
index b9e5ee6..09fb191 100644
--- a/src/components/BigData/Card/index.vue
+++ b/src/components/BigData/Card/index.vue
@@ -1,6 +1,6 @@
 <template>
-  <el-card :body-style="{ padding: '0px' }" shadow="always">
-    <div class="card-panel" >
+  <el-card :body-style="{ padding: '0px' }" :shadow="shadow">
+    <div class="card-panel">
       <div :style="backgroundColor" class="card-panel-icon-wrapper">
         <svg-icon :icon-class="icon" class-name="card-panel-icon" />
       </div>
@@ -24,27 +24,31 @@
     title: {
       type: String,
       default: '标题'
-    },
+    }, // 标题
     flags: {
       type: String,
       default: '单位'
-    },
+    }, // 单位
     subtitle: {
       type: String,
       default: ''
-    },
+    }, // 小标题
     icon: {
       type: String,
       default: ''
-    },
+    }, // 图标
     context: {
       type: [String, Number],
       default: ''
-    },
+    }, // 内容
     color: {
       type: String,
       default: '#40c9c6'
-    }
+    }, // 图标颜色
+    shadow: {
+      type: String,
+      default: 'always'
+    } // 卡片阴影
   },
   computed: {
     backgroundColor() {
diff --git a/src/components/BigData/Card/panelCard.vue b/src/components/BigData/Card/panelCard.vue
new file mode 100644
index 0000000..d6a7b89
--- /dev/null
+++ b/src/components/BigData/Card/panelCard.vue
@@ -0,0 +1,51 @@
+<template>
+  <div class="panel-container">
+    <div class="panel-title">
+      {{ title }}
+      <div class="title-right">
+        <slot name="func" />
+      </div>
+    </div>
+    <div class="panel-body">
+      <slot />
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  name: 'PanelCard',
+  props: {
+    // 标题
+    title: {
+      type: String,
+      default: ''
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.panel-container{
+  width: 100%;
+  padding: 10px;
+  border: 1px solid #EBEEF5 ;
+  .panel-title{
+    width: 100%;
+    line-height: 2;
+    font-size: 16px;
+    font-weight: bold;
+    padding: 0px 10px;
+    border-left: 5px solid #66b1ff;
+    position: relative;
+    .title-right{
+      display: inline-block;
+      position: absolute;
+      right: 10px;
+    }
+  }
+  .panel-body{
+    padding: 5px 0px;
+    height:auto;
+  }
+}
+</style>
diff --git a/src/views/dataManage/dataManage.vue b/src/views/dataManage/dataManage.vue
index 71be03f..0564cdd 100644
--- a/src/views/dataManage/dataManage.vue
+++ b/src/views/dataManage/dataManage.vue
@@ -31,19 +31,19 @@
     return {
       activeName: 'wellcover',
       tabList: [
-        { permission: '/welldata/list', label: '井盖状态监测仪', name: 'wellcover', type: '1', comp: 'list-well-cover-data' },
-        { permission: '/liquiddata/list', label: '液位监测仪', name: 'liquid', type: '2', comp: 'list-liquid-data' },
-        { permission: '/gasdata/list', label: '燃气智能监测终端', name: 'gas', type: '4', comp: 'list-gas-data' },
-        { permission: '/digdata/list', label: '开挖监测仪', name: 'dig', type: '6', comp: 'list-dig-data' },
-        { permission: '/noisedata/list', label: '噪声记录仪', name: 'noise', type: '8', comp: 'list-noise-data' },
-        { permission: '/harmfuldata/list', label: '有害气体监测仪', name: 'harmful', type: '3', comp: 'list-harmful-data' },
-        { permission: '/tempdata/list', label: '温湿度监测仪', name: 'temp', type: '5', comp: 'list-temp-data' },
-        { permission: '/welllocadata/list', label: '井盖定位监测仪', name: 'wellloca', type: '7', comp: 'list-well-loca-data' },
-        { permission: '/liquidGasData/list', label: '燃气智能终端(一体化)', name: 'liquidgas', type: '10', comp: 'list-liquid-gas-data' },
-        { permission: '/tubedata/list', label: '管盯', name: 'tube', type: '12', comp: 'list-tube-data' },
-        { permission: '/gasdector/listPage', label: '可燃气体智能监测终端', name: 'gasdector', type: '1', comp: 'list-gasdector-data' },
-        { permission: '/pantilt/listPage', label: '激光甲烷遥测云台', name: 'pantilt', type: '1', comp: 'list-pantilt-data' },
-        { permission: '/hydrantdata/list', label: '消防栓数据列表', name: 'hydrant', type: '11', comp: 'list-hydrant-data' }
+        { permission: '/welldata/list-page', label: '井盖状态监测仪', name: 'wellcover', type: '1', comp: 'list-well-cover-data' },
+        { permission: '/liquiddata/list-page', label: '液位监测仪', name: 'liquid', type: '2', comp: 'list-liquid-data' },
+        { permission: '/gasdata/list-page', label: '燃气智能监测终端', name: 'gas', type: '4', comp: 'list-gas-data' },
+        { permission: '/digdata/list-page', label: '开挖监测仪', name: 'dig', type: '6', comp: 'list-dig-data' },
+        { permission: '/noisedata/list-page', label: '噪声记录仪', name: 'noise', type: '8', comp: 'list-noise-data' },
+        { permission: '/harmfuldata/list-page', label: '有害气体监测仪', name: 'harmful', type: '3', comp: 'list-harmful-data' },
+        { permission: '/tempdata/list-page', label: '温湿度监测仪', name: 'temp', type: '5', comp: 'list-temp-data' },
+        { permission: '/welllocadata/list-page', label: '井盖定位监测仪', name: 'wellloca', type: '7', comp: 'list-well-loca-data' },
+        { permission: '/liquidGasData/list-page', label: '燃气智能终端(一体化)', name: 'liquidgas', type: '10', comp: 'list-liquid-gas-data' },
+        { permission: '/tubedata/list-page', label: '管盯', name: 'tube', type: '12', comp: 'list-tube-data' },
+        { permission: '/gasdector/list-page', label: '可燃气体智能监测终端', name: 'gasdector', type: '1', comp: 'list-gasdector-data' },
+        { permission: '/pantilt/list-page', label: '激光甲烷遥测云台', name: 'pantilt', type: '1', comp: 'list-pantilt-data' },
+        { permission: '/hydrantdata/list-page', label: '消防栓防盗水监测仪', name: 'hydrant', type: '11', comp: 'list-hydrant-data' }
       ] // 所有tab列表
     }
   },
diff --git a/src/views/dataView/components/alarmView.vue b/src/views/dataView/components/alarmView.vue
index 5c02f41..32a12e5 100644
--- a/src/views/dataView/components/alarmView.vue
+++ b/src/views/dataView/components/alarmView.vue
@@ -1,106 +1,120 @@
 <template>
-  <div>
-    <div class="flagBoxStyle">
-      <div class="flagStyle" />
-      <div>报警分析</div>
-    </div>
-    <el-row>
-      <el-col :span="12">
-        <ve-line
-          :data="chartDataLine"
-          :settings="chartSettingsLine"
+  <panel-card title="报警分析">
+    <template slot="func">
+      <el-col :span="16">
+        <el-date-picker
+          v-model="timeRange"
+          type="datetimerange"
+          range-separator="至"
+          size="small"
+          :picker-options="pickerOptions"
+          value-format="yyyy-MM-dd HH:mm:ss"
+          start-placeholder="开始时间"
+          end-placeholder="结束时间"
+          @change="fetchDeviceTypeBar"
         />
       </el-col>
-      <el-col :span="12">
-        <div class="tableStyle">
-          <el-table border :data="tableList" stripe>
-            <el-table-column prop="name" label="报警类型" />
-            <el-table-column prop="value" label="设备名称" />
-          </el-table>
-        </div>
-      </el-col>
-    </el-row>
-  </div>
+    </template>
+    <div class="flex-container">
+      <div class="flex-left">
+        <ve-line
+          :data="chartData"
+          :settings="chartSettingsLine"
+        />
+      </div>
+      <div class="flex-right">
+        <el-table border :data="tableList" stripe empty-text="无报警" height="340">
+          <el-table-column prop="name" label="报警类型" align="center" />
+          <el-table-column prop="value" label="报警数量" align="center" />
+        </el-table>
+      </div>
+    </div>
+  </panel-card>
 </template>
 
 <script>
-import { alarmStaticsByContent } from '@/api/alarm/deviceStatics'
+import { alarmStaticByDay, alarmStaticsByContent } from '@/api/data/dataStatics'
+import PanelCard from '@/components/BigData/Card/panelCard'
+import { getSearchLastWeekTime } from '@/utils/dateutils'
+
 export default {
   name: 'AlarmStaticsByType',
+  components: { PanelCard },
   data() {
     return {
-      tableList: [],
+      listQuery: {
+        deviceType: '',
+        beginTime: '',
+        endTime: ''
+      }, // 查询条件
+      timeRange: [], // 时间范围
+      tableList: [], // 列表
       // 折线图
       chartSettingsLine: {
         labelMap: {
-          'alarmWellData': '井盖开盖报警',
-          'alarmLiquidData': '液位超限报警',
-          'alarmHarmfulData': '有害气体超标报警'
+          'date': '日期',
+          'alarmTimes': '报警次数'
         },
-        metrics: ['alarmWellData', 'alarmLiquidData', 'alarmHarmfulData'],
         dimension: ['date']
-      },
-      chartDataLine: {
-        columns: ['date', 'alarmWellData', 'alarmLiquidData', 'alarmHarmfulData'],
+      }, // 配置
+      chartData: {
+        columns: ['date', 'alarmTimes'],
         rows: []
-      }
+      } // 折线图数据
     }
   },
   created() {
-    this.fetchDeviceTypeLine()
-  },
-  mounted() {
-    this.tableList = [
-      {
-        value: '224',
-        name: '井盖开启'
-      },
-      {
-        value: '22',
-        name: '燃气浓度超限'
-      },
-      {
-        value: '1',
-        name: '液位超限'
-      },
-      {
-        value: '4',
-        name: '有害气体超标'
-      }
-    ]
+    this.timeRange = getSearchLastWeekTime()
+    this.handleDateTime()
+    this.fetchAlarmByDay()
+    this.fetchAlarmByContent()
   },
   methods: {
-    fetchDeviceTypeLine(val) {
-      if (val !== undefined) {
-        this.listQuery.startTime = val[0]
-        this.listQuery.endTime = val[1]
-      }
-      alarmStaticsByContent(this.listStatue).then(response => {
-        console.log(response.data, '===123')
-        this.chartDataLine.rows = response.data
+    // 获取各类报警的列表
+    fetchAlarmByContent() {
+      alarmStaticsByContent(this.listQuery).then(response => {
+        this.tableList = response.data
       })
+    },
+    // 获取每日报警数
+    fetchAlarmByDay() {
+      // 模拟数据
+      // this.chartData.rows = [
+      //   { 'date': '9月20日', 'alarmTimes': 153, 'alarmWells': 43 },
+      //   { 'date': '9月21日', 'alarmTimes': 150, 'alarmWells': 30 },
+      //   { 'date': '9月22日', 'alarmTimes': 143, 'alarmWells': 23 },
+      //   { 'date': '9月23日', 'alarmTimes': 173, 'alarmWells': 23 },
+      //   { 'date': '9月24日', 'alarmTimes': 272, 'alarmWells': 52 },
+      //   { 'date': '9月25日', 'alarmTimes': 253, 'alarmWells': 53 }
+      // ]
+      alarmStaticByDay(this.listQuery).then(response => {
+        this.chartData.rows = response.data
+      })
+    },
+    // 处理时间
+    handleDateTime() {
+      if (this.timeRange && this.timeRange.length > 0) {
+        this.listQuery.beginTime = this.timeRange[0]
+        this.listQuery.endTime = this.timeRange[1]
+      } else {
+        this.listQuery.beginTime = ''
+        this.listQuery.endTime = ''
+      }
     }
   }
 }
 </script>
 
 <style lang="scss" scoped>
-.tableStyle{
-  // padding: 100px 10px;
-}
-.flagBoxStyle {
+.flex-container{
   display: flex;
-  margin-bottom: 20px;
-}
-.flagBoxStyle div:nth-child(2){
-  line-height: 30px;
-  font-weight: 600;
-}
-.flagStyle {
-  width: 4px;
-  height: 30px;
-  margin-right: 6px;
-  background: rgb(64 121 242);
+  .flex-left{
+    flex:1;
+  }
+  .flex-right{
+    width: 260px;
+    padding: 10px 20px;
+  }
 }
 
 </style>
diff --git a/src/views/dataView/components/panelGroup.vue b/src/views/dataView/components/panelGroup.vue
index cdb9180..1acd118 100644
--- a/src/views/dataView/components/panelGroup.vue
+++ b/src/views/dataView/components/panelGroup.vue
@@ -1,35 +1,29 @@
 <template>
-  <el-row :gutter="20" class="panel-group">
-    <div>
-      <el-col>
-        <div class="flagBoxStyle">
-          <div class="flagStyle" />
-          <div>数据总体情况</div>
-        </div>
-      </el-col>
+  <panel-card title="数据总体情况">
+    <div class="panel-group">
+      <div v-for="card in dataGroup" :key="card.title" class="card-panel">
+        <card :title="card.title" :context="card.context" :flags="card.flags" :icon="card.icon" :color="card.color" shadow="never" @click.native="goPage(card)" />
+      </div>
     </div>
-    <div v-for="card in dataGroup" :key="card.title">
-      <el-col v-if="hasPerm(card.permission)" :lg="{span:'4-8'}" :md="8" :sm="12" :xs="24" class="card-panel-col">
-        <card :title="card.title" :context="card.context" :flags="card.flags" :icon="card.icon" :color="card.color" @click.native="goPage(card)" />
-      </el-col>
-    </div>
-    <el-dialog append-to-body :visible.sync="dialogFormVisible">
-      <el-table v-loading="listLoading" :data="list" class="table" border>
-        <el-table-column
-          v-for="column in columns"
-          :key="column.value"
-          :label="column.text"
-          :width="column.width"
-          :align="column.align"
-          show-overflow-tooltip
-        >
-          <template v-slot="scope">
-            <span>{{ scope.row[column.value] }}</span>
-          </template>
-        </el-table-column>
-      </el-table>
-    </el-dialog>
-  </el-row>
+  </panel-card>
+<!--  <el-row :gutter="20" class="panel-group">-->
+<!--    &lt;!&ndash;    <el-dialog append-to-body :visible.sync="dialogFormVisible">&ndash;&gt;-->
+<!--    &lt;!&ndash;      <el-table v-loading="listLoading" :data="list" class="table" border>&ndash;&gt;-->
+<!--    &lt;!&ndash;        <el-table-column&ndash;&gt;-->
+<!--    &lt;!&ndash;          v-for="column in columns"&ndash;&gt;-->
+<!--    &lt;!&ndash;          :key="column.value"&ndash;&gt;-->
+<!--    &lt;!&ndash;          :label="column.text"&ndash;&gt;-->
+<!--    &lt;!&ndash;          :width="column.width"&ndash;&gt;-->
+<!--    &lt;!&ndash;          :align="column.align"&ndash;&gt;-->
+<!--    &lt;!&ndash;          show-overflow-tooltip&ndash;&gt;-->
+<!--    &lt;!&ndash;        >&ndash;&gt;-->
+<!--    &lt;!&ndash;          <template v-slot="scope">&ndash;&gt;-->
+<!--    &lt;!&ndash;            <span>{{ scope.row[column.value] }}</span>&ndash;&gt;-->
+<!--    &lt;!&ndash;          </template>&ndash;&gt;-->
+<!--    &lt;!&ndash;        </el-table-column>&ndash;&gt;-->
+<!--    &lt;!&ndash;      </el-table>&ndash;&gt;-->
+<!--    &lt;!&ndash;    </el-dialog>&ndash;&gt;-->
+<!--  </el-row>-->
 </template>
 
 <script>
@@ -37,9 +31,10 @@
 import { wellCountByBfzt } from '@/api/well/well'
 import { deviceStaticByStatus, alarmNowStatic } from '@/api/data/dataStatics'
 import { jobCountByStatus } from '@/api/alarm/job'
+import PanelCard from '@/components/BigData/Card/panelCard'
 export default {
   name: 'PanelGroup',
-  components: { Card },
+  components: { PanelCard, Card },
   data() {
     return {
       dialogFormVisible: false,
@@ -74,9 +69,9 @@
       ], // 显示列
       dataGroup: [
         {
-          title: '井',
+          title: '安装点位',
           context: '--',
-          flags: '条',
+          flags: '个',
           icon: 'icon-well',
           color: '#40c9c6',
           permission: '/well/list'
@@ -155,174 +150,16 @@
 </script>
 
 <style lang="scss" scoped>
-.flagBoxStyle {
-  display: flex;
-  margin-bottom: 20px;
-  margin-top: -20px;
-}
-.flagBoxStyle div:nth-child(2){
-  line-height: 30px;
-  font-weight: 600;
-}
-.flagStyle {
-  width: 4px;
-  height: 30px;
-  margin-right: 6px;
-  background: rgb(64 121 242);
-}
 .panel-group {
-  margin-top: 18px;
-  .card-panel-col {
-    margin-bottom: 32px;
-  }
+  display: flex;
+  margin: 10px;
+  justify-content: space-between;
   .card-panel {
-    height: 108px;
-    cursor: pointer;
-    font-size: 12px;
-    position: relative;
-    overflow: hidden;
-    color: #666;
-    background: #fff;
-    box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
-    border-color: rgba(0, 0, 0, .05);
-
-    &:hover {
-      .card-panel-icon-wrapper {
-        color: #fff;
-      }
-
-      .icon-people {
-        background: #40c9c6;
-      }
-
-      .icon-message {
-        background: #36a3f7;
-      }
-
-      .icon-money {
-        background: #f4516c;
-      }
-
-      .icon-shopping {
-        background: #34bfa3
-      }
-    }
-
-    .icon-people {
-      color: #40c9c6;
-    }
-
-    .icon-message {
-      color: #36a3f7;
-    }
-
-    .icon-money {
-      color: #f4516c;
-    }
-
-    .icon-shopping {
-      color: #34bfa3
-    }
-
-    .card-panel-icon-wrapper {
-      float: left;
-      margin: 14px 0 0 14px;
-      padding: 16px;
-      transition: all 0.38s ease-out;
-      border-radius: 6px;
-    }
-
-    .card-panel-icon {
-      float: left;
-      font-size: 48px;
-    }
-
-    .card-panel-description {
-      float: right;
-      font-weight: bold;
-      margin: 26px;
-      margin-left: 0px;
-
-      .card-panel-text {
-        line-height: 18px;
-        color: rgba(0, 0, 0, 0.45);
-        font-size: 16px;
-        margin-bottom: 12px;
-      }
-
-      .card-panel-num {
-        font-size: 20px;
-      }
-    }
+    flex: 1;
+  }
+  .card-panel + .card-panel  {
+    margin-left: 20px;
   }
 }
 
-  @media only screen and (min-width: 768px) {
-    .el-col-sm-4-8 {
-      width: 20%;
-    }
-    .el-col-sm-offset-4-8 {
-      margin-left: 20%;
-    }
-    .el-col-sm-pull-4-8 {
-      position: relative;
-      right: 20%;
-    }
-    .el-col-sm-push-4-8 {
-      position: relative;
-      left: 20%;
-    }
-  }
-
-  @media only screen and (min-width: 992px) {
-    .el-col-md-4-8 {
-      width: 20%;
-    }
-    .el-col-md-offset-4-8 {
-      margin-left: 20%;
-    }
-    .el-col-md-pull-4-8 {
-      position: relative;
-      right: 20%;
-    }
-    .el-col-md-push-4-8 {
-      position: relative;
-      left: 20%;
-    }
-  }
-
-  @media only screen and (min-width: 1200px) {
-    .el-col-lg-4-8 {
-      width: 20%;
-    }
-    .el-col-lg-offset-4-8 {
-      margin-left: 20%;
-    }
-    .el-col-lg-pull-4-8 {
-      position: relative;
-      right: 20%;
-    }
-    .el-col-lg-push-4-8 {
-      position: relative;
-      left: 20%;
-    }
-  }
-
-  @media only screen and (min-width: 1920px) {
-    .el-col-xl-4-8 {
-      width: 20%;
-    }
-    .el-col-xl-offset-4-8 {
-      margin-left: 20%;
-    }
-    .el-col-xl-pull-4-8 {
-      position: relative;
-      right: 20%;
-    }
-    .el-col-xl-push-4-8 {
-      position: relative;
-      left: 20%;
-    }
-  }
-
 </style>

diff --git a/src/api/data/data.js b/src/api/data/data.js
index 7dcc6c7..9d23a3e 100644
--- a/src/api/data/data.js
+++ b/src/api/data/data.js
@@ -13,7 +13,7 @@
 // 井盖数据查询
 export function getWellData(params) {
   return request({
-    url: 'welldata/list',
+    url: 'welldata/list-page',
     method: 'get',
     params
   })
@@ -40,6 +40,15 @@
 // 液位数据查询
 export function getLiquidData(params) {
   return request({
+    url: 'liquiddata/list-page',
+    method: 'get',
+    params
+  })
+}
+
+// 液位数据查询-不分页
+export function getLiquidDataSingle(params) {
+  return request({
     url: 'liquiddata/list',
     method: 'get',
     params
@@ -60,6 +69,14 @@
 // 燃气数据查询
 export function getGasData(params) {
   return request({
+    url: 'gasdata/list-page',
+    method: 'get',
+    params
+  })
+}
+// 燃气数据查询-不分页
+export function getGasDataSingle(params) {
+  return request({
     url: 'gasdata/list',
     method: 'get',
     params
@@ -85,6 +102,16 @@
     params
   })
 }
+
+// 管盯数据查询-不分页
+export function getTubeDataSingle(params) {
+  return request({
+    url: 'tubedata/list',
+    method: 'get',
+    params
+  })
+}
+
 // 批量导出管盯数据
 export function batchExportTubeData(params) {
   return request({
@@ -98,11 +125,21 @@
 // 开挖数据查询
 export function getDigData(params) {
   return request({
+    url: 'digdata/list-page',
+    method: 'get',
+    params
+  })
+}
+
+// 开挖数据查询,不分页
+export function getDigDataSingle(params) {
+  return request({
     url: 'digdata/list',
     method: 'get',
     params
   })
 }
+
 // 批量导出开挖数据
 export function batchExportDigData(params) {
   return request({
@@ -116,11 +153,20 @@
 // 有害气体数据查询
 export function getHarmfulData(params) {
   return request({
+    url: 'harmfuldata/list-page',
+    method: 'get',
+    params
+  })
+}
+// 有害气体数据查询,不分页
+export function getHarmfulDataSingle(params) {
+  return request({
     url: 'harmfuldata/list',
     method: 'get',
     params
   })
 }
+
 // 批量导出有害气体数据
 export function batchExportHarmfulData(params) {
   return request({
@@ -134,6 +180,14 @@
 // 温湿度数据查询
 export function getTempData(params) {
   return request({
+    url: 'tempdata/list-page',
+    method: 'get',
+    params
+  })
+}
+// 温湿度数据查询,不分页
+export function getTempDataSimple(params) {
+  return request({
     url: 'tempdata/list',
     method: 'get',
     params
@@ -153,6 +207,14 @@
 // 井盖定位监测仪数据查询
 export function getWellLocaData(params) {
   return request({
+    url: 'welllocadata/list-page',
+    method: 'get',
+    params
+  })
+}
+// 井盖定位监测仪数据查询,不分页
+export function getWellLocaDataSingle(params) {
+  return request({
     url: 'welllocadata/list',
     method: 'get',
     params
@@ -172,6 +234,14 @@
 // 噪声记录仪数据查询
 export function getNoiseData(params) {
   return request({
+    url: 'noisedata/list-page',
+    method: 'get',
+    params
+  })
+}
+// 噪声记录仪数据查询,不分页
+export function getNoiseDataSingle(params) {
+  return request({
     url: 'noisedata/list',
     method: 'get',
     params
@@ -190,6 +260,14 @@
 // 液位燃气一体化设备数据查询
 export function getLiquidGasData(params) {
   return request({
+    url: 'liquidGasData/list-page',
+    method: 'get',
+    params
+  })
+}
+// 液位燃气一体化设备数据查询,不分页
+export function getLiquidGasDataSingle(params) {
+  return request({
     url: 'liquidGasData/list',
     method: 'get',
     params
@@ -209,7 +287,15 @@
 // 可燃气体外协数据查询
 export function getGasdectorData(params) {
   return request({
-    url: '/gasdector/listpage',
+    url: '/gasdector/list-page',
+    method: 'get',
+    params
+  })
+}
+// 可燃气体外协数据查询,不分页
+export function getGasdectorDataSingle(params) {
+  return request({
+    url: '/gasdector/list',
     method: 'get',
     params
   })
@@ -228,7 +314,15 @@
 // 激甲云台数据查询-章丘
 export function getPantiltData(params) {
   return request({
-    url: '/pantilt/listpage',
+    url: '/pantilt/list-page',
+    method: 'get',
+    params
+  })
+}
+// 激甲云台数据查询-章丘
+export function getPantiltDataSingle(params) {
+  return request({
+    url: '/pantilt/list',
     method: 'get',
     params
   })
@@ -248,6 +342,14 @@
 // 消防栓数据查询
 export function getHydrantData(params) {
   return request({
+    url: 'hydrant/list-page',
+    method: 'get',
+    params
+  })
+}
+// 消防栓数据查询,不分页
+export function getHydrantDataSingle(params) {
+  return request({
     url: 'hydrant/list',
     method: 'get',
     params
diff --git a/src/api/data/dataStatics.js b/src/api/data/dataStatics.js
index e79dea3..fdbc34f 100644
--- a/src/api/data/dataStatics.js
+++ b/src/api/data/dataStatics.js
@@ -90,6 +90,15 @@
   })
 }
 
+// 统计某段时间每种类型的报警数
+export function alarmStaticByContent(params) {
+  return request({
+    url: 'statics/alarmStaticsByContent',
+    method: 'get',
+    params
+  })
+}
+
 // 根据权属单位进行报警统计查询
 export function alarmStaticByDept(params) {
   return request({
diff --git a/src/components/BigData/Card/index.vue b/src/components/BigData/Card/index.vue
index b9e5ee6..09fb191 100644
--- a/src/components/BigData/Card/index.vue
+++ b/src/components/BigData/Card/index.vue
@@ -1,6 +1,6 @@
 <template>
-  <el-card :body-style="{ padding: '0px' }" shadow="always">
-    <div class="card-panel" >
+  <el-card :body-style="{ padding: '0px' }" :shadow="shadow">
+    <div class="card-panel">
       <div :style="backgroundColor" class="card-panel-icon-wrapper">
         <svg-icon :icon-class="icon" class-name="card-panel-icon" />
       </div>
@@ -24,27 +24,31 @@
     title: {
       type: String,
       default: '标题'
-    },
+    }, // 标题
     flags: {
       type: String,
       default: '单位'
-    },
+    }, // 单位
     subtitle: {
       type: String,
       default: ''
-    },
+    }, // 小标题
     icon: {
       type: String,
       default: ''
-    },
+    }, // 图标
     context: {
       type: [String, Number],
       default: ''
-    },
+    }, // 内容
     color: {
       type: String,
       default: '#40c9c6'
-    }
+    }, // 图标颜色
+    shadow: {
+      type: String,
+      default: 'always'
+    } // 卡片阴影
   },
   computed: {
     backgroundColor() {
diff --git a/src/components/BigData/Card/panelCard.vue b/src/components/BigData/Card/panelCard.vue
new file mode 100644
index 0000000..d6a7b89
--- /dev/null
+++ b/src/components/BigData/Card/panelCard.vue
@@ -0,0 +1,51 @@
+<template>
+  <div class="panel-container">
+    <div class="panel-title">
+      {{ title }}
+      <div class="title-right">
+        <slot name="func" />
+      </div>
+    </div>
+    <div class="panel-body">
+      <slot />
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  name: 'PanelCard',
+  props: {
+    // 标题
+    title: {
+      type: String,
+      default: ''
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.panel-container{
+  width: 100%;
+  padding: 10px;
+  border: 1px solid #EBEEF5 ;
+  .panel-title{
+    width: 100%;
+    line-height: 2;
+    font-size: 16px;
+    font-weight: bold;
+    padding: 0px 10px;
+    border-left: 5px solid #66b1ff;
+    position: relative;
+    .title-right{
+      display: inline-block;
+      position: absolute;
+      right: 10px;
+    }
+  }
+  .panel-body{
+    padding: 5px 0px;
+    height:auto;
+  }
+}
+</style>
diff --git a/src/views/dataManage/dataManage.vue b/src/views/dataManage/dataManage.vue
index 71be03f..0564cdd 100644
--- a/src/views/dataManage/dataManage.vue
+++ b/src/views/dataManage/dataManage.vue
@@ -31,19 +31,19 @@
     return {
       activeName: 'wellcover',
       tabList: [
-        { permission: '/welldata/list', label: '井盖状态监测仪', name: 'wellcover', type: '1', comp: 'list-well-cover-data' },
-        { permission: '/liquiddata/list', label: '液位监测仪', name: 'liquid', type: '2', comp: 'list-liquid-data' },
-        { permission: '/gasdata/list', label: '燃气智能监测终端', name: 'gas', type: '4', comp: 'list-gas-data' },
-        { permission: '/digdata/list', label: '开挖监测仪', name: 'dig', type: '6', comp: 'list-dig-data' },
-        { permission: '/noisedata/list', label: '噪声记录仪', name: 'noise', type: '8', comp: 'list-noise-data' },
-        { permission: '/harmfuldata/list', label: '有害气体监测仪', name: 'harmful', type: '3', comp: 'list-harmful-data' },
-        { permission: '/tempdata/list', label: '温湿度监测仪', name: 'temp', type: '5', comp: 'list-temp-data' },
-        { permission: '/welllocadata/list', label: '井盖定位监测仪', name: 'wellloca', type: '7', comp: 'list-well-loca-data' },
-        { permission: '/liquidGasData/list', label: '燃气智能终端(一体化)', name: 'liquidgas', type: '10', comp: 'list-liquid-gas-data' },
-        { permission: '/tubedata/list', label: '管盯', name: 'tube', type: '12', comp: 'list-tube-data' },
-        { permission: '/gasdector/listPage', label: '可燃气体智能监测终端', name: 'gasdector', type: '1', comp: 'list-gasdector-data' },
-        { permission: '/pantilt/listPage', label: '激光甲烷遥测云台', name: 'pantilt', type: '1', comp: 'list-pantilt-data' },
-        { permission: '/hydrantdata/list', label: '消防栓数据列表', name: 'hydrant', type: '11', comp: 'list-hydrant-data' }
+        { permission: '/welldata/list-page', label: '井盖状态监测仪', name: 'wellcover', type: '1', comp: 'list-well-cover-data' },
+        { permission: '/liquiddata/list-page', label: '液位监测仪', name: 'liquid', type: '2', comp: 'list-liquid-data' },
+        { permission: '/gasdata/list-page', label: '燃气智能监测终端', name: 'gas', type: '4', comp: 'list-gas-data' },
+        { permission: '/digdata/list-page', label: '开挖监测仪', name: 'dig', type: '6', comp: 'list-dig-data' },
+        { permission: '/noisedata/list-page', label: '噪声记录仪', name: 'noise', type: '8', comp: 'list-noise-data' },
+        { permission: '/harmfuldata/list-page', label: '有害气体监测仪', name: 'harmful', type: '3', comp: 'list-harmful-data' },
+        { permission: '/tempdata/list-page', label: '温湿度监测仪', name: 'temp', type: '5', comp: 'list-temp-data' },
+        { permission: '/welllocadata/list-page', label: '井盖定位监测仪', name: 'wellloca', type: '7', comp: 'list-well-loca-data' },
+        { permission: '/liquidGasData/list-page', label: '燃气智能终端(一体化)', name: 'liquidgas', type: '10', comp: 'list-liquid-gas-data' },
+        { permission: '/tubedata/list-page', label: '管盯', name: 'tube', type: '12', comp: 'list-tube-data' },
+        { permission: '/gasdector/list-page', label: '可燃气体智能监测终端', name: 'gasdector', type: '1', comp: 'list-gasdector-data' },
+        { permission: '/pantilt/list-page', label: '激光甲烷遥测云台', name: 'pantilt', type: '1', comp: 'list-pantilt-data' },
+        { permission: '/hydrantdata/list-page', label: '消防栓防盗水监测仪', name: 'hydrant', type: '11', comp: 'list-hydrant-data' }
       ] // 所有tab列表
     }
   },
diff --git a/src/views/dataView/components/alarmView.vue b/src/views/dataView/components/alarmView.vue
index 5c02f41..32a12e5 100644
--- a/src/views/dataView/components/alarmView.vue
+++ b/src/views/dataView/components/alarmView.vue
@@ -1,106 +1,120 @@
 <template>
-  <div>
-    <div class="flagBoxStyle">
-      <div class="flagStyle" />
-      <div>报警分析</div>
-    </div>
-    <el-row>
-      <el-col :span="12">
-        <ve-line
-          :data="chartDataLine"
-          :settings="chartSettingsLine"
+  <panel-card title="报警分析">
+    <template slot="func">
+      <el-col :span="16">
+        <el-date-picker
+          v-model="timeRange"
+          type="datetimerange"
+          range-separator="至"
+          size="small"
+          :picker-options="pickerOptions"
+          value-format="yyyy-MM-dd HH:mm:ss"
+          start-placeholder="开始时间"
+          end-placeholder="结束时间"
+          @change="fetchDeviceTypeBar"
         />
       </el-col>
-      <el-col :span="12">
-        <div class="tableStyle">
-          <el-table border :data="tableList" stripe>
-            <el-table-column prop="name" label="报警类型" />
-            <el-table-column prop="value" label="设备名称" />
-          </el-table>
-        </div>
-      </el-col>
-    </el-row>
-  </div>
+    </template>
+    <div class="flex-container">
+      <div class="flex-left">
+        <ve-line
+          :data="chartData"
+          :settings="chartSettingsLine"
+        />
+      </div>
+      <div class="flex-right">
+        <el-table border :data="tableList" stripe empty-text="无报警" height="340">
+          <el-table-column prop="name" label="报警类型" align="center" />
+          <el-table-column prop="value" label="报警数量" align="center" />
+        </el-table>
+      </div>
+    </div>
+  </panel-card>
 </template>
 
 <script>
-import { alarmStaticsByContent } from '@/api/alarm/deviceStatics'
+import { alarmStaticByDay, alarmStaticsByContent } from '@/api/data/dataStatics'
+import PanelCard from '@/components/BigData/Card/panelCard'
+import { getSearchLastWeekTime } from '@/utils/dateutils'
+
 export default {
   name: 'AlarmStaticsByType',
+  components: { PanelCard },
   data() {
     return {
-      tableList: [],
+      listQuery: {
+        deviceType: '',
+        beginTime: '',
+        endTime: ''
+      }, // 查询条件
+      timeRange: [], // 时间范围
+      tableList: [], // 列表
       // 折线图
       chartSettingsLine: {
         labelMap: {
-          'alarmWellData': '井盖开盖报警',
-          'alarmLiquidData': '液位超限报警',
-          'alarmHarmfulData': '有害气体超标报警'
+          'date': '日期',
+          'alarmTimes': '报警次数'
         },
-        metrics: ['alarmWellData', 'alarmLiquidData', 'alarmHarmfulData'],
         dimension: ['date']
-      },
-      chartDataLine: {
-        columns: ['date', 'alarmWellData', 'alarmLiquidData', 'alarmHarmfulData'],
+      }, // 配置
+      chartData: {
+        columns: ['date', 'alarmTimes'],
         rows: []
-      }
+      } // 折线图数据
     }
   },
   created() {
-    this.fetchDeviceTypeLine()
-  },
-  mounted() {
-    this.tableList = [
-      {
-        value: '224',
-        name: '井盖开启'
-      },
-      {
-        value: '22',
-        name: '燃气浓度超限'
-      },
-      {
-        value: '1',
-        name: '液位超限'
-      },
-      {
-        value: '4',
-        name: '有害气体超标'
-      }
-    ]
+    this.timeRange = getSearchLastWeekTime()
+    this.handleDateTime()
+    this.fetchAlarmByDay()
+    this.fetchAlarmByContent()
   },
   methods: {
-    fetchDeviceTypeLine(val) {
-      if (val !== undefined) {
-        this.listQuery.startTime = val[0]
-        this.listQuery.endTime = val[1]
-      }
-      alarmStaticsByContent(this.listStatue).then(response => {
-        console.log(response.data, '===123')
-        this.chartDataLine.rows = response.data
+    // 获取各类报警的列表
+    fetchAlarmByContent() {
+      alarmStaticsByContent(this.listQuery).then(response => {
+        this.tableList = response.data
       })
+    },
+    // 获取每日报警数
+    fetchAlarmByDay() {
+      // 模拟数据
+      // this.chartData.rows = [
+      //   { 'date': '9月20日', 'alarmTimes': 153, 'alarmWells': 43 },
+      //   { 'date': '9月21日', 'alarmTimes': 150, 'alarmWells': 30 },
+      //   { 'date': '9月22日', 'alarmTimes': 143, 'alarmWells': 23 },
+      //   { 'date': '9月23日', 'alarmTimes': 173, 'alarmWells': 23 },
+      //   { 'date': '9月24日', 'alarmTimes': 272, 'alarmWells': 52 },
+      //   { 'date': '9月25日', 'alarmTimes': 253, 'alarmWells': 53 }
+      // ]
+      alarmStaticByDay(this.listQuery).then(response => {
+        this.chartData.rows = response.data
+      })
+    },
+    // 处理时间
+    handleDateTime() {
+      if (this.timeRange && this.timeRange.length > 0) {
+        this.listQuery.beginTime = this.timeRange[0]
+        this.listQuery.endTime = this.timeRange[1]
+      } else {
+        this.listQuery.beginTime = ''
+        this.listQuery.endTime = ''
+      }
     }
   }
 }
 </script>
 
 <style lang="scss" scoped>
-.tableStyle{
-  // padding: 100px 10px;
-}
-.flagBoxStyle {
+.flex-container{
   display: flex;
-  margin-bottom: 20px;
-}
-.flagBoxStyle div:nth-child(2){
-  line-height: 30px;
-  font-weight: 600;
-}
-.flagStyle {
-  width: 4px;
-  height: 30px;
-  margin-right: 6px;
-  background: rgb(64 121 242);
+  .flex-left{
+    flex:1;
+  }
+  .flex-right{
+    width: 260px;
+    padding: 10px 20px;
+  }
 }
 
 </style>
diff --git a/src/views/dataView/components/panelGroup.vue b/src/views/dataView/components/panelGroup.vue
index cdb9180..1acd118 100644
--- a/src/views/dataView/components/panelGroup.vue
+++ b/src/views/dataView/components/panelGroup.vue
@@ -1,35 +1,29 @@
 <template>
-  <el-row :gutter="20" class="panel-group">
-    <div>
-      <el-col>
-        <div class="flagBoxStyle">
-          <div class="flagStyle" />
-          <div>数据总体情况</div>
-        </div>
-      </el-col>
+  <panel-card title="数据总体情况">
+    <div class="panel-group">
+      <div v-for="card in dataGroup" :key="card.title" class="card-panel">
+        <card :title="card.title" :context="card.context" :flags="card.flags" :icon="card.icon" :color="card.color" shadow="never" @click.native="goPage(card)" />
+      </div>
     </div>
-    <div v-for="card in dataGroup" :key="card.title">
-      <el-col v-if="hasPerm(card.permission)" :lg="{span:'4-8'}" :md="8" :sm="12" :xs="24" class="card-panel-col">
-        <card :title="card.title" :context="card.context" :flags="card.flags" :icon="card.icon" :color="card.color" @click.native="goPage(card)" />
-      </el-col>
-    </div>
-    <el-dialog append-to-body :visible.sync="dialogFormVisible">
-      <el-table v-loading="listLoading" :data="list" class="table" border>
-        <el-table-column
-          v-for="column in columns"
-          :key="column.value"
-          :label="column.text"
-          :width="column.width"
-          :align="column.align"
-          show-overflow-tooltip
-        >
-          <template v-slot="scope">
-            <span>{{ scope.row[column.value] }}</span>
-          </template>
-        </el-table-column>
-      </el-table>
-    </el-dialog>
-  </el-row>
+  </panel-card>
+<!--  <el-row :gutter="20" class="panel-group">-->
+<!--    &lt;!&ndash;    <el-dialog append-to-body :visible.sync="dialogFormVisible">&ndash;&gt;-->
+<!--    &lt;!&ndash;      <el-table v-loading="listLoading" :data="list" class="table" border>&ndash;&gt;-->
+<!--    &lt;!&ndash;        <el-table-column&ndash;&gt;-->
+<!--    &lt;!&ndash;          v-for="column in columns"&ndash;&gt;-->
+<!--    &lt;!&ndash;          :key="column.value"&ndash;&gt;-->
+<!--    &lt;!&ndash;          :label="column.text"&ndash;&gt;-->
+<!--    &lt;!&ndash;          :width="column.width"&ndash;&gt;-->
+<!--    &lt;!&ndash;          :align="column.align"&ndash;&gt;-->
+<!--    &lt;!&ndash;          show-overflow-tooltip&ndash;&gt;-->
+<!--    &lt;!&ndash;        >&ndash;&gt;-->
+<!--    &lt;!&ndash;          <template v-slot="scope">&ndash;&gt;-->
+<!--    &lt;!&ndash;            <span>{{ scope.row[column.value] }}</span>&ndash;&gt;-->
+<!--    &lt;!&ndash;          </template>&ndash;&gt;-->
+<!--    &lt;!&ndash;        </el-table-column>&ndash;&gt;-->
+<!--    &lt;!&ndash;      </el-table>&ndash;&gt;-->
+<!--    &lt;!&ndash;    </el-dialog>&ndash;&gt;-->
+<!--  </el-row>-->
 </template>
 
 <script>
@@ -37,9 +31,10 @@
 import { wellCountByBfzt } from '@/api/well/well'
 import { deviceStaticByStatus, alarmNowStatic } from '@/api/data/dataStatics'
 import { jobCountByStatus } from '@/api/alarm/job'
+import PanelCard from '@/components/BigData/Card/panelCard'
 export default {
   name: 'PanelGroup',
-  components: { Card },
+  components: { PanelCard, Card },
   data() {
     return {
       dialogFormVisible: false,
@@ -74,9 +69,9 @@
       ], // 显示列
       dataGroup: [
         {
-          title: '井',
+          title: '安装点位',
           context: '--',
-          flags: '条',
+          flags: '个',
           icon: 'icon-well',
           color: '#40c9c6',
           permission: '/well/list'
@@ -155,174 +150,16 @@
 </script>
 
 <style lang="scss" scoped>
-.flagBoxStyle {
-  display: flex;
-  margin-bottom: 20px;
-  margin-top: -20px;
-}
-.flagBoxStyle div:nth-child(2){
-  line-height: 30px;
-  font-weight: 600;
-}
-.flagStyle {
-  width: 4px;
-  height: 30px;
-  margin-right: 6px;
-  background: rgb(64 121 242);
-}
 .panel-group {
-  margin-top: 18px;
-  .card-panel-col {
-    margin-bottom: 32px;
-  }
+  display: flex;
+  margin: 10px;
+  justify-content: space-between;
   .card-panel {
-    height: 108px;
-    cursor: pointer;
-    font-size: 12px;
-    position: relative;
-    overflow: hidden;
-    color: #666;
-    background: #fff;
-    box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
-    border-color: rgba(0, 0, 0, .05);
-
-    &:hover {
-      .card-panel-icon-wrapper {
-        color: #fff;
-      }
-
-      .icon-people {
-        background: #40c9c6;
-      }
-
-      .icon-message {
-        background: #36a3f7;
-      }
-
-      .icon-money {
-        background: #f4516c;
-      }
-
-      .icon-shopping {
-        background: #34bfa3
-      }
-    }
-
-    .icon-people {
-      color: #40c9c6;
-    }
-
-    .icon-message {
-      color: #36a3f7;
-    }
-
-    .icon-money {
-      color: #f4516c;
-    }
-
-    .icon-shopping {
-      color: #34bfa3
-    }
-
-    .card-panel-icon-wrapper {
-      float: left;
-      margin: 14px 0 0 14px;
-      padding: 16px;
-      transition: all 0.38s ease-out;
-      border-radius: 6px;
-    }
-
-    .card-panel-icon {
-      float: left;
-      font-size: 48px;
-    }
-
-    .card-panel-description {
-      float: right;
-      font-weight: bold;
-      margin: 26px;
-      margin-left: 0px;
-
-      .card-panel-text {
-        line-height: 18px;
-        color: rgba(0, 0, 0, 0.45);
-        font-size: 16px;
-        margin-bottom: 12px;
-      }
-
-      .card-panel-num {
-        font-size: 20px;
-      }
-    }
+    flex: 1;
+  }
+  .card-panel + .card-panel  {
+    margin-left: 20px;
   }
 }
 
-  @media only screen and (min-width: 768px) {
-    .el-col-sm-4-8 {
-      width: 20%;
-    }
-    .el-col-sm-offset-4-8 {
-      margin-left: 20%;
-    }
-    .el-col-sm-pull-4-8 {
-      position: relative;
-      right: 20%;
-    }
-    .el-col-sm-push-4-8 {
-      position: relative;
-      left: 20%;
-    }
-  }
-
-  @media only screen and (min-width: 992px) {
-    .el-col-md-4-8 {
-      width: 20%;
-    }
-    .el-col-md-offset-4-8 {
-      margin-left: 20%;
-    }
-    .el-col-md-pull-4-8 {
-      position: relative;
-      right: 20%;
-    }
-    .el-col-md-push-4-8 {
-      position: relative;
-      left: 20%;
-    }
-  }
-
-  @media only screen and (min-width: 1200px) {
-    .el-col-lg-4-8 {
-      width: 20%;
-    }
-    .el-col-lg-offset-4-8 {
-      margin-left: 20%;
-    }
-    .el-col-lg-pull-4-8 {
-      position: relative;
-      right: 20%;
-    }
-    .el-col-lg-push-4-8 {
-      position: relative;
-      left: 20%;
-    }
-  }
-
-  @media only screen and (min-width: 1920px) {
-    .el-col-xl-4-8 {
-      width: 20%;
-    }
-    .el-col-xl-offset-4-8 {
-      margin-left: 20%;
-    }
-    .el-col-xl-pull-4-8 {
-      position: relative;
-      right: 20%;
-    }
-    .el-col-xl-push-4-8 {
-      position: relative;
-      left: 20%;
-    }
-  }
-
 </style>
diff --git a/src/views/dataView/dataView.vue b/src/views/dataView/dataView.vue
index 4920908..cc24c1a 100644
--- a/src/views/dataView/dataView.vue
+++ b/src/views/dataView/dataView.vue
@@ -1,38 +1,34 @@
+<!--数据概览页面-->
 <template>
   <div class="dashboard-container">
     <el-row>
-      <!-- 数总体情况 -->
+      <!--数据总体情况 -->
       <el-col :span="24">
+        <panel-group />
+      </el-col>
+    </el-row>
+    <el-row style="margin-top:10px" gutter="10">
+      <el-col :span="12">
+        <alarm-view />
+      </el-col>
+      <el-col :span="12">
+        <alarm-status />
+      </el-col>
+    </el-row>
+    <el-col :span="24">
+      <!-- 井数量分析 -->
+      <el-col :span="12">
         <el-card>
-          <panel-group />
+          <well-count-view />
         </el-card>
       </el-col>
-      <el-col :span="24">
-        <el-col :span="12">
-          <el-card>
-            <alarm-view />
-          </el-card>
-        </el-col>
-        <el-col :span="12">
-          <el-card>
-            <alarm-status />
-          </el-card>
-        </el-col>
+      <!-- 设备数量分析 -->
+      <el-col :span="12">
+        <el-card>
+          <device-count-view />
+        </el-card>
       </el-col>
-      <el-col :span="24">
-        <!-- 井数量分析 -->
-        <el-col :span="12">
-          <el-card>
-            <well-count-view />
-          </el-card>
-        </el-col>
-        <!-- 设备数量分析 -->
-        <el-col :span="12">
-          <el-card>
-            <device-count-view />
-          </el-card>
-        </el-col>
-      </el-col>
+    </el-col>
     </el-row>
   </div>
 </template>
@@ -43,9 +39,10 @@
 import wellCountView from './components/wellCountView'
 import deviceCountView from './components/deviceCountView'
 import alarmView from './components/alarmView'
+import PanelCard from '@/components/BigData/Card/panelCard'
 export default {
   name: 'DataView',
-  components: { panelGroup, alarmStatus, wellCountView, deviceCountView, alarmView }
+  components: { PanelCard, panelGroup, alarmStatus, wellCountView, deviceCountView, alarmView }
 }
 </script>
 

diff --git a/src/api/data/data.js b/src/api/data/data.js
index 7dcc6c7..9d23a3e 100644
--- a/src/api/data/data.js
+++ b/src/api/data/data.js
@@ -13,7 +13,7 @@
 // 井盖数据查询
 export function getWellData(params) {
   return request({
-    url: 'welldata/list',
+    url: 'welldata/list-page',
     method: 'get',
     params
   })
@@ -40,6 +40,15 @@
 // 液位数据查询
 export function getLiquidData(params) {
   return request({
+    url: 'liquiddata/list-page',
+    method: 'get',
+    params
+  })
+}
+
+// 液位数据查询-不分页
+export function getLiquidDataSingle(params) {
+  return request({
     url: 'liquiddata/list',
     method: 'get',
     params
@@ -60,6 +69,14 @@
 // 燃气数据查询
 export function getGasData(params) {
   return request({
+    url: 'gasdata/list-page',
+    method: 'get',
+    params
+  })
+}
+// 燃气数据查询-不分页
+export function getGasDataSingle(params) {
+  return request({
     url: 'gasdata/list',
     method: 'get',
     params
@@ -85,6 +102,16 @@
     params
   })
 }
+
+// 管盯数据查询-不分页
+export function getTubeDataSingle(params) {
+  return request({
+    url: 'tubedata/list',
+    method: 'get',
+    params
+  })
+}
+
 // 批量导出管盯数据
 export function batchExportTubeData(params) {
   return request({
@@ -98,11 +125,21 @@
 // 开挖数据查询
 export function getDigData(params) {
   return request({
+    url: 'digdata/list-page',
+    method: 'get',
+    params
+  })
+}
+
+// 开挖数据查询,不分页
+export function getDigDataSingle(params) {
+  return request({
     url: 'digdata/list',
     method: 'get',
     params
   })
 }
+
 // 批量导出开挖数据
 export function batchExportDigData(params) {
   return request({
@@ -116,11 +153,20 @@
 // 有害气体数据查询
 export function getHarmfulData(params) {
   return request({
+    url: 'harmfuldata/list-page',
+    method: 'get',
+    params
+  })
+}
+// 有害气体数据查询,不分页
+export function getHarmfulDataSingle(params) {
+  return request({
     url: 'harmfuldata/list',
     method: 'get',
     params
   })
 }
+
 // 批量导出有害气体数据
 export function batchExportHarmfulData(params) {
   return request({
@@ -134,6 +180,14 @@
 // 温湿度数据查询
 export function getTempData(params) {
   return request({
+    url: 'tempdata/list-page',
+    method: 'get',
+    params
+  })
+}
+// 温湿度数据查询,不分页
+export function getTempDataSimple(params) {
+  return request({
     url: 'tempdata/list',
     method: 'get',
     params
@@ -153,6 +207,14 @@
 // 井盖定位监测仪数据查询
 export function getWellLocaData(params) {
   return request({
+    url: 'welllocadata/list-page',
+    method: 'get',
+    params
+  })
+}
+// 井盖定位监测仪数据查询,不分页
+export function getWellLocaDataSingle(params) {
+  return request({
     url: 'welllocadata/list',
     method: 'get',
     params
@@ -172,6 +234,14 @@
 // 噪声记录仪数据查询
 export function getNoiseData(params) {
   return request({
+    url: 'noisedata/list-page',
+    method: 'get',
+    params
+  })
+}
+// 噪声记录仪数据查询,不分页
+export function getNoiseDataSingle(params) {
+  return request({
     url: 'noisedata/list',
     method: 'get',
     params
@@ -190,6 +260,14 @@
 // 液位燃气一体化设备数据查询
 export function getLiquidGasData(params) {
   return request({
+    url: 'liquidGasData/list-page',
+    method: 'get',
+    params
+  })
+}
+// 液位燃气一体化设备数据查询,不分页
+export function getLiquidGasDataSingle(params) {
+  return request({
     url: 'liquidGasData/list',
     method: 'get',
     params
@@ -209,7 +287,15 @@
 // 可燃气体外协数据查询
 export function getGasdectorData(params) {
   return request({
-    url: '/gasdector/listpage',
+    url: '/gasdector/list-page',
+    method: 'get',
+    params
+  })
+}
+// 可燃气体外协数据查询,不分页
+export function getGasdectorDataSingle(params) {
+  return request({
+    url: '/gasdector/list',
     method: 'get',
     params
   })
@@ -228,7 +314,15 @@
 // 激甲云台数据查询-章丘
 export function getPantiltData(params) {
   return request({
-    url: '/pantilt/listpage',
+    url: '/pantilt/list-page',
+    method: 'get',
+    params
+  })
+}
+// 激甲云台数据查询-章丘
+export function getPantiltDataSingle(params) {
+  return request({
+    url: '/pantilt/list',
     method: 'get',
     params
   })
@@ -248,6 +342,14 @@
 // 消防栓数据查询
 export function getHydrantData(params) {
   return request({
+    url: 'hydrant/list-page',
+    method: 'get',
+    params
+  })
+}
+// 消防栓数据查询,不分页
+export function getHydrantDataSingle(params) {
+  return request({
     url: 'hydrant/list',
     method: 'get',
     params
diff --git a/src/api/data/dataStatics.js b/src/api/data/dataStatics.js
index e79dea3..fdbc34f 100644
--- a/src/api/data/dataStatics.js
+++ b/src/api/data/dataStatics.js
@@ -90,6 +90,15 @@
   })
 }
 
+// 统计某段时间每种类型的报警数
+export function alarmStaticByContent(params) {
+  return request({
+    url: 'statics/alarmStaticsByContent',
+    method: 'get',
+    params
+  })
+}
+
 // 根据权属单位进行报警统计查询
 export function alarmStaticByDept(params) {
   return request({
diff --git a/src/components/BigData/Card/index.vue b/src/components/BigData/Card/index.vue
index b9e5ee6..09fb191 100644
--- a/src/components/BigData/Card/index.vue
+++ b/src/components/BigData/Card/index.vue
@@ -1,6 +1,6 @@
 <template>
-  <el-card :body-style="{ padding: '0px' }" shadow="always">
-    <div class="card-panel" >
+  <el-card :body-style="{ padding: '0px' }" :shadow="shadow">
+    <div class="card-panel">
       <div :style="backgroundColor" class="card-panel-icon-wrapper">
         <svg-icon :icon-class="icon" class-name="card-panel-icon" />
       </div>
@@ -24,27 +24,31 @@
     title: {
       type: String,
       default: '标题'
-    },
+    }, // 标题
     flags: {
       type: String,
       default: '单位'
-    },
+    }, // 单位
     subtitle: {
       type: String,
       default: ''
-    },
+    }, // 小标题
     icon: {
       type: String,
       default: ''
-    },
+    }, // 图标
     context: {
       type: [String, Number],
       default: ''
-    },
+    }, // 内容
     color: {
       type: String,
       default: '#40c9c6'
-    }
+    }, // 图标颜色
+    shadow: {
+      type: String,
+      default: 'always'
+    } // 卡片阴影
   },
   computed: {
     backgroundColor() {
diff --git a/src/components/BigData/Card/panelCard.vue b/src/components/BigData/Card/panelCard.vue
new file mode 100644
index 0000000..d6a7b89
--- /dev/null
+++ b/src/components/BigData/Card/panelCard.vue
@@ -0,0 +1,51 @@
+<template>
+  <div class="panel-container">
+    <div class="panel-title">
+      {{ title }}
+      <div class="title-right">
+        <slot name="func" />
+      </div>
+    </div>
+    <div class="panel-body">
+      <slot />
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  name: 'PanelCard',
+  props: {
+    // 标题
+    title: {
+      type: String,
+      default: ''
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.panel-container{
+  width: 100%;
+  padding: 10px;
+  border: 1px solid #EBEEF5 ;
+  .panel-title{
+    width: 100%;
+    line-height: 2;
+    font-size: 16px;
+    font-weight: bold;
+    padding: 0px 10px;
+    border-left: 5px solid #66b1ff;
+    position: relative;
+    .title-right{
+      display: inline-block;
+      position: absolute;
+      right: 10px;
+    }
+  }
+  .panel-body{
+    padding: 5px 0px;
+    height:auto;
+  }
+}
+</style>
diff --git a/src/views/dataManage/dataManage.vue b/src/views/dataManage/dataManage.vue
index 71be03f..0564cdd 100644
--- a/src/views/dataManage/dataManage.vue
+++ b/src/views/dataManage/dataManage.vue
@@ -31,19 +31,19 @@
     return {
       activeName: 'wellcover',
       tabList: [
-        { permission: '/welldata/list', label: '井盖状态监测仪', name: 'wellcover', type: '1', comp: 'list-well-cover-data' },
-        { permission: '/liquiddata/list', label: '液位监测仪', name: 'liquid', type: '2', comp: 'list-liquid-data' },
-        { permission: '/gasdata/list', label: '燃气智能监测终端', name: 'gas', type: '4', comp: 'list-gas-data' },
-        { permission: '/digdata/list', label: '开挖监测仪', name: 'dig', type: '6', comp: 'list-dig-data' },
-        { permission: '/noisedata/list', label: '噪声记录仪', name: 'noise', type: '8', comp: 'list-noise-data' },
-        { permission: '/harmfuldata/list', label: '有害气体监测仪', name: 'harmful', type: '3', comp: 'list-harmful-data' },
-        { permission: '/tempdata/list', label: '温湿度监测仪', name: 'temp', type: '5', comp: 'list-temp-data' },
-        { permission: '/welllocadata/list', label: '井盖定位监测仪', name: 'wellloca', type: '7', comp: 'list-well-loca-data' },
-        { permission: '/liquidGasData/list', label: '燃气智能终端(一体化)', name: 'liquidgas', type: '10', comp: 'list-liquid-gas-data' },
-        { permission: '/tubedata/list', label: '管盯', name: 'tube', type: '12', comp: 'list-tube-data' },
-        { permission: '/gasdector/listPage', label: '可燃气体智能监测终端', name: 'gasdector', type: '1', comp: 'list-gasdector-data' },
-        { permission: '/pantilt/listPage', label: '激光甲烷遥测云台', name: 'pantilt', type: '1', comp: 'list-pantilt-data' },
-        { permission: '/hydrantdata/list', label: '消防栓数据列表', name: 'hydrant', type: '11', comp: 'list-hydrant-data' }
+        { permission: '/welldata/list-page', label: '井盖状态监测仪', name: 'wellcover', type: '1', comp: 'list-well-cover-data' },
+        { permission: '/liquiddata/list-page', label: '液位监测仪', name: 'liquid', type: '2', comp: 'list-liquid-data' },
+        { permission: '/gasdata/list-page', label: '燃气智能监测终端', name: 'gas', type: '4', comp: 'list-gas-data' },
+        { permission: '/digdata/list-page', label: '开挖监测仪', name: 'dig', type: '6', comp: 'list-dig-data' },
+        { permission: '/noisedata/list-page', label: '噪声记录仪', name: 'noise', type: '8', comp: 'list-noise-data' },
+        { permission: '/harmfuldata/list-page', label: '有害气体监测仪', name: 'harmful', type: '3', comp: 'list-harmful-data' },
+        { permission: '/tempdata/list-page', label: '温湿度监测仪', name: 'temp', type: '5', comp: 'list-temp-data' },
+        { permission: '/welllocadata/list-page', label: '井盖定位监测仪', name: 'wellloca', type: '7', comp: 'list-well-loca-data' },
+        { permission: '/liquidGasData/list-page', label: '燃气智能终端(一体化)', name: 'liquidgas', type: '10', comp: 'list-liquid-gas-data' },
+        { permission: '/tubedata/list-page', label: '管盯', name: 'tube', type: '12', comp: 'list-tube-data' },
+        { permission: '/gasdector/list-page', label: '可燃气体智能监测终端', name: 'gasdector', type: '1', comp: 'list-gasdector-data' },
+        { permission: '/pantilt/list-page', label: '激光甲烷遥测云台', name: 'pantilt', type: '1', comp: 'list-pantilt-data' },
+        { permission: '/hydrantdata/list-page', label: '消防栓防盗水监测仪', name: 'hydrant', type: '11', comp: 'list-hydrant-data' }
       ] // 所有tab列表
     }
   },
diff --git a/src/views/dataView/components/alarmView.vue b/src/views/dataView/components/alarmView.vue
index 5c02f41..32a12e5 100644
--- a/src/views/dataView/components/alarmView.vue
+++ b/src/views/dataView/components/alarmView.vue
@@ -1,106 +1,120 @@
 <template>
-  <div>
-    <div class="flagBoxStyle">
-      <div class="flagStyle" />
-      <div>报警分析</div>
-    </div>
-    <el-row>
-      <el-col :span="12">
-        <ve-line
-          :data="chartDataLine"
-          :settings="chartSettingsLine"
+  <panel-card title="报警分析">
+    <template slot="func">
+      <el-col :span="16">
+        <el-date-picker
+          v-model="timeRange"
+          type="datetimerange"
+          range-separator="至"
+          size="small"
+          :picker-options="pickerOptions"
+          value-format="yyyy-MM-dd HH:mm:ss"
+          start-placeholder="开始时间"
+          end-placeholder="结束时间"
+          @change="fetchDeviceTypeBar"
         />
       </el-col>
-      <el-col :span="12">
-        <div class="tableStyle">
-          <el-table border :data="tableList" stripe>
-            <el-table-column prop="name" label="报警类型" />
-            <el-table-column prop="value" label="设备名称" />
-          </el-table>
-        </div>
-      </el-col>
-    </el-row>
-  </div>
+    </template>
+    <div class="flex-container">
+      <div class="flex-left">
+        <ve-line
+          :data="chartData"
+          :settings="chartSettingsLine"
+        />
+      </div>
+      <div class="flex-right">
+        <el-table border :data="tableList" stripe empty-text="无报警" height="340">
+          <el-table-column prop="name" label="报警类型" align="center" />
+          <el-table-column prop="value" label="报警数量" align="center" />
+        </el-table>
+      </div>
+    </div>
+  </panel-card>
 </template>
 
 <script>
-import { alarmStaticsByContent } from '@/api/alarm/deviceStatics'
+import { alarmStaticByDay, alarmStaticsByContent } from '@/api/data/dataStatics'
+import PanelCard from '@/components/BigData/Card/panelCard'
+import { getSearchLastWeekTime } from '@/utils/dateutils'
+
 export default {
   name: 'AlarmStaticsByType',
+  components: { PanelCard },
   data() {
     return {
-      tableList: [],
+      listQuery: {
+        deviceType: '',
+        beginTime: '',
+        endTime: ''
+      }, // 查询条件
+      timeRange: [], // 时间范围
+      tableList: [], // 列表
       // 折线图
       chartSettingsLine: {
         labelMap: {
-          'alarmWellData': '井盖开盖报警',
-          'alarmLiquidData': '液位超限报警',
-          'alarmHarmfulData': '有害气体超标报警'
+          'date': '日期',
+          'alarmTimes': '报警次数'
         },
-        metrics: ['alarmWellData', 'alarmLiquidData', 'alarmHarmfulData'],
         dimension: ['date']
-      },
-      chartDataLine: {
-        columns: ['date', 'alarmWellData', 'alarmLiquidData', 'alarmHarmfulData'],
+      }, // 配置
+      chartData: {
+        columns: ['date', 'alarmTimes'],
         rows: []
-      }
+      } // 折线图数据
     }
   },
   created() {
-    this.fetchDeviceTypeLine()
-  },
-  mounted() {
-    this.tableList = [
-      {
-        value: '224',
-        name: '井盖开启'
-      },
-      {
-        value: '22',
-        name: '燃气浓度超限'
-      },
-      {
-        value: '1',
-        name: '液位超限'
-      },
-      {
-        value: '4',
-        name: '有害气体超标'
-      }
-    ]
+    this.timeRange = getSearchLastWeekTime()
+    this.handleDateTime()
+    this.fetchAlarmByDay()
+    this.fetchAlarmByContent()
   },
   methods: {
-    fetchDeviceTypeLine(val) {
-      if (val !== undefined) {
-        this.listQuery.startTime = val[0]
-        this.listQuery.endTime = val[1]
-      }
-      alarmStaticsByContent(this.listStatue).then(response => {
-        console.log(response.data, '===123')
-        this.chartDataLine.rows = response.data
+    // 获取各类报警的列表
+    fetchAlarmByContent() {
+      alarmStaticsByContent(this.listQuery).then(response => {
+        this.tableList = response.data
       })
+    },
+    // 获取每日报警数
+    fetchAlarmByDay() {
+      // 模拟数据
+      // this.chartData.rows = [
+      //   { 'date': '9月20日', 'alarmTimes': 153, 'alarmWells': 43 },
+      //   { 'date': '9月21日', 'alarmTimes': 150, 'alarmWells': 30 },
+      //   { 'date': '9月22日', 'alarmTimes': 143, 'alarmWells': 23 },
+      //   { 'date': '9月23日', 'alarmTimes': 173, 'alarmWells': 23 },
+      //   { 'date': '9月24日', 'alarmTimes': 272, 'alarmWells': 52 },
+      //   { 'date': '9月25日', 'alarmTimes': 253, 'alarmWells': 53 }
+      // ]
+      alarmStaticByDay(this.listQuery).then(response => {
+        this.chartData.rows = response.data
+      })
+    },
+    // 处理时间
+    handleDateTime() {
+      if (this.timeRange && this.timeRange.length > 0) {
+        this.listQuery.beginTime = this.timeRange[0]
+        this.listQuery.endTime = this.timeRange[1]
+      } else {
+        this.listQuery.beginTime = ''
+        this.listQuery.endTime = ''
+      }
     }
   }
 }
 </script>
 
 <style lang="scss" scoped>
-.tableStyle{
-  // padding: 100px 10px;
-}
-.flagBoxStyle {
+.flex-container{
   display: flex;
-  margin-bottom: 20px;
-}
-.flagBoxStyle div:nth-child(2){
-  line-height: 30px;
-  font-weight: 600;
-}
-.flagStyle {
-  width: 4px;
-  height: 30px;
-  margin-right: 6px;
-  background: rgb(64 121 242);
+  .flex-left{
+    flex:1;
+  }
+  .flex-right{
+    width: 260px;
+    padding: 10px 20px;
+  }
 }
 
 </style>
diff --git a/src/views/dataView/components/panelGroup.vue b/src/views/dataView/components/panelGroup.vue
index cdb9180..1acd118 100644
--- a/src/views/dataView/components/panelGroup.vue
+++ b/src/views/dataView/components/panelGroup.vue
@@ -1,35 +1,29 @@
 <template>
-  <el-row :gutter="20" class="panel-group">
-    <div>
-      <el-col>
-        <div class="flagBoxStyle">
-          <div class="flagStyle" />
-          <div>数据总体情况</div>
-        </div>
-      </el-col>
+  <panel-card title="数据总体情况">
+    <div class="panel-group">
+      <div v-for="card in dataGroup" :key="card.title" class="card-panel">
+        <card :title="card.title" :context="card.context" :flags="card.flags" :icon="card.icon" :color="card.color" shadow="never" @click.native="goPage(card)" />
+      </div>
     </div>
-    <div v-for="card in dataGroup" :key="card.title">
-      <el-col v-if="hasPerm(card.permission)" :lg="{span:'4-8'}" :md="8" :sm="12" :xs="24" class="card-panel-col">
-        <card :title="card.title" :context="card.context" :flags="card.flags" :icon="card.icon" :color="card.color" @click.native="goPage(card)" />
-      </el-col>
-    </div>
-    <el-dialog append-to-body :visible.sync="dialogFormVisible">
-      <el-table v-loading="listLoading" :data="list" class="table" border>
-        <el-table-column
-          v-for="column in columns"
-          :key="column.value"
-          :label="column.text"
-          :width="column.width"
-          :align="column.align"
-          show-overflow-tooltip
-        >
-          <template v-slot="scope">
-            <span>{{ scope.row[column.value] }}</span>
-          </template>
-        </el-table-column>
-      </el-table>
-    </el-dialog>
-  </el-row>
+  </panel-card>
+<!--  <el-row :gutter="20" class="panel-group">-->
+<!--    &lt;!&ndash;    <el-dialog append-to-body :visible.sync="dialogFormVisible">&ndash;&gt;-->
+<!--    &lt;!&ndash;      <el-table v-loading="listLoading" :data="list" class="table" border>&ndash;&gt;-->
+<!--    &lt;!&ndash;        <el-table-column&ndash;&gt;-->
+<!--    &lt;!&ndash;          v-for="column in columns"&ndash;&gt;-->
+<!--    &lt;!&ndash;          :key="column.value"&ndash;&gt;-->
+<!--    &lt;!&ndash;          :label="column.text"&ndash;&gt;-->
+<!--    &lt;!&ndash;          :width="column.width"&ndash;&gt;-->
+<!--    &lt;!&ndash;          :align="column.align"&ndash;&gt;-->
+<!--    &lt;!&ndash;          show-overflow-tooltip&ndash;&gt;-->
+<!--    &lt;!&ndash;        >&ndash;&gt;-->
+<!--    &lt;!&ndash;          <template v-slot="scope">&ndash;&gt;-->
+<!--    &lt;!&ndash;            <span>{{ scope.row[column.value] }}</span>&ndash;&gt;-->
+<!--    &lt;!&ndash;          </template>&ndash;&gt;-->
+<!--    &lt;!&ndash;        </el-table-column>&ndash;&gt;-->
+<!--    &lt;!&ndash;      </el-table>&ndash;&gt;-->
+<!--    &lt;!&ndash;    </el-dialog>&ndash;&gt;-->
+<!--  </el-row>-->
 </template>
 
 <script>
@@ -37,9 +31,10 @@
 import { wellCountByBfzt } from '@/api/well/well'
 import { deviceStaticByStatus, alarmNowStatic } from '@/api/data/dataStatics'
 import { jobCountByStatus } from '@/api/alarm/job'
+import PanelCard from '@/components/BigData/Card/panelCard'
 export default {
   name: 'PanelGroup',
-  components: { Card },
+  components: { PanelCard, Card },
   data() {
     return {
       dialogFormVisible: false,
@@ -74,9 +69,9 @@
       ], // 显示列
       dataGroup: [
         {
-          title: '井',
+          title: '安装点位',
           context: '--',
-          flags: '条',
+          flags: '个',
           icon: 'icon-well',
           color: '#40c9c6',
           permission: '/well/list'
@@ -155,174 +150,16 @@
 </script>
 
 <style lang="scss" scoped>
-.flagBoxStyle {
-  display: flex;
-  margin-bottom: 20px;
-  margin-top: -20px;
-}
-.flagBoxStyle div:nth-child(2){
-  line-height: 30px;
-  font-weight: 600;
-}
-.flagStyle {
-  width: 4px;
-  height: 30px;
-  margin-right: 6px;
-  background: rgb(64 121 242);
-}
 .panel-group {
-  margin-top: 18px;
-  .card-panel-col {
-    margin-bottom: 32px;
-  }
+  display: flex;
+  margin: 10px;
+  justify-content: space-between;
   .card-panel {
-    height: 108px;
-    cursor: pointer;
-    font-size: 12px;
-    position: relative;
-    overflow: hidden;
-    color: #666;
-    background: #fff;
-    box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
-    border-color: rgba(0, 0, 0, .05);
-
-    &:hover {
-      .card-panel-icon-wrapper {
-        color: #fff;
-      }
-
-      .icon-people {
-        background: #40c9c6;
-      }
-
-      .icon-message {
-        background: #36a3f7;
-      }
-
-      .icon-money {
-        background: #f4516c;
-      }
-
-      .icon-shopping {
-        background: #34bfa3
-      }
-    }
-
-    .icon-people {
-      color: #40c9c6;
-    }
-
-    .icon-message {
-      color: #36a3f7;
-    }
-
-    .icon-money {
-      color: #f4516c;
-    }
-
-    .icon-shopping {
-      color: #34bfa3
-    }
-
-    .card-panel-icon-wrapper {
-      float: left;
-      margin: 14px 0 0 14px;
-      padding: 16px;
-      transition: all 0.38s ease-out;
-      border-radius: 6px;
-    }
-
-    .card-panel-icon {
-      float: left;
-      font-size: 48px;
-    }
-
-    .card-panel-description {
-      float: right;
-      font-weight: bold;
-      margin: 26px;
-      margin-left: 0px;
-
-      .card-panel-text {
-        line-height: 18px;
-        color: rgba(0, 0, 0, 0.45);
-        font-size: 16px;
-        margin-bottom: 12px;
-      }
-
-      .card-panel-num {
-        font-size: 20px;
-      }
-    }
+    flex: 1;
+  }
+  .card-panel + .card-panel  {
+    margin-left: 20px;
   }
 }
 
-  @media only screen and (min-width: 768px) {
-    .el-col-sm-4-8 {
-      width: 20%;
-    }
-    .el-col-sm-offset-4-8 {
-      margin-left: 20%;
-    }
-    .el-col-sm-pull-4-8 {
-      position: relative;
-      right: 20%;
-    }
-    .el-col-sm-push-4-8 {
-      position: relative;
-      left: 20%;
-    }
-  }
-
-  @media only screen and (min-width: 992px) {
-    .el-col-md-4-8 {
-      width: 20%;
-    }
-    .el-col-md-offset-4-8 {
-      margin-left: 20%;
-    }
-    .el-col-md-pull-4-8 {
-      position: relative;
-      right: 20%;
-    }
-    .el-col-md-push-4-8 {
-      position: relative;
-      left: 20%;
-    }
-  }
-
-  @media only screen and (min-width: 1200px) {
-    .el-col-lg-4-8 {
-      width: 20%;
-    }
-    .el-col-lg-offset-4-8 {
-      margin-left: 20%;
-    }
-    .el-col-lg-pull-4-8 {
-      position: relative;
-      right: 20%;
-    }
-    .el-col-lg-push-4-8 {
-      position: relative;
-      left: 20%;
-    }
-  }
-
-  @media only screen and (min-width: 1920px) {
-    .el-col-xl-4-8 {
-      width: 20%;
-    }
-    .el-col-xl-offset-4-8 {
-      margin-left: 20%;
-    }
-    .el-col-xl-pull-4-8 {
-      position: relative;
-      right: 20%;
-    }
-    .el-col-xl-push-4-8 {
-      position: relative;
-      left: 20%;
-    }
-  }
-
 </style>
diff --git a/src/views/dataView/dataView.vue b/src/views/dataView/dataView.vue
index 4920908..cc24c1a 100644
--- a/src/views/dataView/dataView.vue
+++ b/src/views/dataView/dataView.vue
@@ -1,38 +1,34 @@
+<!--数据概览页面-->
 <template>
   <div class="dashboard-container">
     <el-row>
-      <!-- 数总体情况 -->
+      <!--数据总体情况 -->
       <el-col :span="24">
+        <panel-group />
+      </el-col>
+    </el-row>
+    <el-row style="margin-top:10px" gutter="10">
+      <el-col :span="12">
+        <alarm-view />
+      </el-col>
+      <el-col :span="12">
+        <alarm-status />
+      </el-col>
+    </el-row>
+    <el-col :span="24">
+      <!-- 井数量分析 -->
+      <el-col :span="12">
         <el-card>
-          <panel-group />
+          <well-count-view />
         </el-card>
       </el-col>
-      <el-col :span="24">
-        <el-col :span="12">
-          <el-card>
-            <alarm-view />
-          </el-card>
-        </el-col>
-        <el-col :span="12">
-          <el-card>
-            <alarm-status />
-          </el-card>
-        </el-col>
+      <!-- 设备数量分析 -->
+      <el-col :span="12">
+        <el-card>
+          <device-count-view />
+        </el-card>
       </el-col>
-      <el-col :span="24">
-        <!-- 井数量分析 -->
-        <el-col :span="12">
-          <el-card>
-            <well-count-view />
-          </el-card>
-        </el-col>
-        <!-- 设备数量分析 -->
-        <el-col :span="12">
-          <el-card>
-            <device-count-view />
-          </el-card>
-        </el-col>
-      </el-col>
+    </el-col>
     </el-row>
   </div>
 </template>
@@ -43,9 +39,10 @@
 import wellCountView from './components/wellCountView'
 import deviceCountView from './components/deviceCountView'
 import alarmView from './components/alarmView'
+import PanelCard from '@/components/BigData/Card/panelCard'
 export default {
   name: 'DataView',
-  components: { panelGroup, alarmStatus, wellCountView, deviceCountView, alarmView }
+  components: { PanelCard, panelGroup, alarmStatus, wellCountView, deviceCountView, alarmView }
 }
 </script>
 
diff --git a/src/views/system/resource/editResource.vue b/src/views/system/resource/editResource.vue
index 5f88a36..74e6363 100644
--- a/src/views/system/resource/editResource.vue
+++ b/src/views/system/resource/editResource.vue
@@ -27,7 +27,7 @@
         </el-col>
         <el-col :span="12">
           <el-form-item label="父资源" prop="pid">
-            <select-tree v-model="resourceForm.pid" :options="resourceTreeList" :props="defaultProps" />
+            <select-tree v-model="resourceForm.pid" :options="resourceTreeList" :props="defaultProps" :default-expanded-keys="[resourceForm.pid]" />
           </el-form-item>
         </el-col>
       </el-row>