diff --git a/mock/system/user.js b/mock/system/user.js
index abd593d..747ef61 100644
--- a/mock/system/user.js
+++ b/mock/system/user.js
@@ -195,6 +195,7 @@
     { 'code': 'well_bfcf', 'icon': '', 'id': '1138616121200189442', 'ismenu': '0', 'levels': 11, 'name': '布防撤防', 'num': 0, 'parentId': '1138377674778685442', 'resourceType': '04', 'url': '/well/bfcf' },
     { 'code': 'alarms_by_well', 'icon': '', 'id': '1138702100355313665', 'ismenu': '0', 'levels': 11, 'name': '获取某闸井告警信息', 'num': 0, 'parentId': '1138701347507105794', 'resourceType': '04', 'url': '/overview/alarmsByWell' },
     { 'code': 'alarm_statics', 'icon': '', 'id': '1138703677266817025', 'ismenu': '1', 'levels': 11, 'name': '报警统计', 'num': 0, 'parentId': '1138702379389775873', 'resourceType': '03', 'url': '/alarm/statics' },
+    { 'code': 'alarm_statics', 'icon': '', 'id': '1138703677266817005', 'ismenu': '1', 'levels': 11, 'name': '数据概览', 'num': 0, 'parentId': '1138702379389775873', 'resourceType': '03', 'url': '/dataView/statics' },
     { 'code': 'alarm_static_by_dept', 'icon': '', 'id': '1139376799592734721', 'ismenu': '0', 'levels': 11, 'name': '根据部门统计报警', 'num': 0, 'parentId': '1138702379389775873', 'resourceType': '04', 'url': '/statics/alarmsByDept' },
     { 'code': 'concentrator_add', 'icon': '', 'id': '1138693099123077122', 'ismenu': '0', 'levels': 11, 'name': '新增集中器', 'num': 0, 'parentId': '1138692702442582017', 'resourceType': '04', 'url': '/concentrator/add' },
     { 'code': 'job_export', 'icon': '', 'id': '1138699769542832130', 'ismenu': '0', 'levels': 11, 'name': '导出工单列表', 'num': 0, 'parentId': '1138699051712868353', 'resourceType': '04', 'url': '/job/export' },

diff --git a/mock/system/user.js b/mock/system/user.js
index abd593d..747ef61 100644
--- a/mock/system/user.js
+++ b/mock/system/user.js
@@ -195,6 +195,7 @@
     { 'code': 'well_bfcf', 'icon': '', 'id': '1138616121200189442', 'ismenu': '0', 'levels': 11, 'name': '布防撤防', 'num': 0, 'parentId': '1138377674778685442', 'resourceType': '04', 'url': '/well/bfcf' },
     { 'code': 'alarms_by_well', 'icon': '', 'id': '1138702100355313665', 'ismenu': '0', 'levels': 11, 'name': '获取某闸井告警信息', 'num': 0, 'parentId': '1138701347507105794', 'resourceType': '04', 'url': '/overview/alarmsByWell' },
     { 'code': 'alarm_statics', 'icon': '', 'id': '1138703677266817025', 'ismenu': '1', 'levels': 11, 'name': '报警统计', 'num': 0, 'parentId': '1138702379389775873', 'resourceType': '03', 'url': '/alarm/statics' },
+    { 'code': 'alarm_statics', 'icon': '', 'id': '1138703677266817005', 'ismenu': '1', 'levels': 11, 'name': '数据概览', 'num': 0, 'parentId': '1138702379389775873', 'resourceType': '03', 'url': '/dataView/statics' },
     { 'code': 'alarm_static_by_dept', 'icon': '', 'id': '1139376799592734721', 'ismenu': '0', 'levels': 11, 'name': '根据部门统计报警', 'num': 0, 'parentId': '1138702379389775873', 'resourceType': '04', 'url': '/statics/alarmsByDept' },
     { 'code': 'concentrator_add', 'icon': '', 'id': '1138693099123077122', 'ismenu': '0', 'levels': 11, 'name': '新增集中器', 'num': 0, 'parentId': '1138692702442582017', 'resourceType': '04', 'url': '/concentrator/add' },
     { 'code': 'job_export', 'icon': '', 'id': '1138699769542832130', 'ismenu': '0', 'levels': 11, 'name': '导出工单列表', 'num': 0, 'parentId': '1138699051712868353', 'resourceType': '04', 'url': '/job/export' },
diff --git a/src/components/BigData/Card/index.vue b/src/components/BigData/Card/index.vue
index 07ee165..b9e5ee6 100644
--- a/src/components/BigData/Card/index.vue
+++ b/src/components/BigData/Card/index.vue
@@ -8,8 +8,9 @@
         <div class="card-panel-text">
           {{ title }}
         </div>
-        <div class="card-panel-num" >
-          {{ context }}
+        <div class="card-panel-num">
+          <span>{{ context }}</span>
+          <span>{{ flags }}</span>
         </div>
       </div>
     </div>
@@ -24,6 +25,10 @@
       type: String,
       default: '标题'
     },
+    flags: {
+      type: String,
+      default: '单位'
+    },
     subtitle: {
       type: String,
       default: ''

diff --git a/mock/system/user.js b/mock/system/user.js
index abd593d..747ef61 100644
--- a/mock/system/user.js
+++ b/mock/system/user.js
@@ -195,6 +195,7 @@
     { 'code': 'well_bfcf', 'icon': '', 'id': '1138616121200189442', 'ismenu': '0', 'levels': 11, 'name': '布防撤防', 'num': 0, 'parentId': '1138377674778685442', 'resourceType': '04', 'url': '/well/bfcf' },
     { 'code': 'alarms_by_well', 'icon': '', 'id': '1138702100355313665', 'ismenu': '0', 'levels': 11, 'name': '获取某闸井告警信息', 'num': 0, 'parentId': '1138701347507105794', 'resourceType': '04', 'url': '/overview/alarmsByWell' },
     { 'code': 'alarm_statics', 'icon': '', 'id': '1138703677266817025', 'ismenu': '1', 'levels': 11, 'name': '报警统计', 'num': 0, 'parentId': '1138702379389775873', 'resourceType': '03', 'url': '/alarm/statics' },
+    { 'code': 'alarm_statics', 'icon': '', 'id': '1138703677266817005', 'ismenu': '1', 'levels': 11, 'name': '数据概览', 'num': 0, 'parentId': '1138702379389775873', 'resourceType': '03', 'url': '/dataView/statics' },
     { 'code': 'alarm_static_by_dept', 'icon': '', 'id': '1139376799592734721', 'ismenu': '0', 'levels': 11, 'name': '根据部门统计报警', 'num': 0, 'parentId': '1138702379389775873', 'resourceType': '04', 'url': '/statics/alarmsByDept' },
     { 'code': 'concentrator_add', 'icon': '', 'id': '1138693099123077122', 'ismenu': '0', 'levels': 11, 'name': '新增集中器', 'num': 0, 'parentId': '1138692702442582017', 'resourceType': '04', 'url': '/concentrator/add' },
     { 'code': 'job_export', 'icon': '', 'id': '1138699769542832130', 'ismenu': '0', 'levels': 11, 'name': '导出工单列表', 'num': 0, 'parentId': '1138699051712868353', 'resourceType': '04', 'url': '/job/export' },
diff --git a/src/components/BigData/Card/index.vue b/src/components/BigData/Card/index.vue
index 07ee165..b9e5ee6 100644
--- a/src/components/BigData/Card/index.vue
+++ b/src/components/BigData/Card/index.vue
@@ -8,8 +8,9 @@
         <div class="card-panel-text">
           {{ title }}
         </div>
-        <div class="card-panel-num" >
-          {{ context }}
+        <div class="card-panel-num">
+          <span>{{ context }}</span>
+          <span>{{ flags }}</span>
         </div>
       </div>
     </div>
@@ -24,6 +25,10 @@
       type: String,
       default: '标题'
     },
+    flags: {
+      type: String,
+      default: '单位'
+    },
     subtitle: {
       type: String,
       default: ''
diff --git a/src/components/Hamburger/index.vue b/src/components/Hamburger/index.vue
index 7c358e2..6a9236c 100644
--- a/src/components/Hamburger/index.vue
+++ b/src/components/Hamburger/index.vue
@@ -36,6 +36,7 @@
     vertical-align: middle;
     width: 20px;
     height: 20px;
+    cursor: pointer;
   }
 
   .hamburger.is-active {

diff --git a/mock/system/user.js b/mock/system/user.js
index abd593d..747ef61 100644
--- a/mock/system/user.js
+++ b/mock/system/user.js
@@ -195,6 +195,7 @@
     { 'code': 'well_bfcf', 'icon': '', 'id': '1138616121200189442', 'ismenu': '0', 'levels': 11, 'name': '布防撤防', 'num': 0, 'parentId': '1138377674778685442', 'resourceType': '04', 'url': '/well/bfcf' },
     { 'code': 'alarms_by_well', 'icon': '', 'id': '1138702100355313665', 'ismenu': '0', 'levels': 11, 'name': '获取某闸井告警信息', 'num': 0, 'parentId': '1138701347507105794', 'resourceType': '04', 'url': '/overview/alarmsByWell' },
     { 'code': 'alarm_statics', 'icon': '', 'id': '1138703677266817025', 'ismenu': '1', 'levels': 11, 'name': '报警统计', 'num': 0, 'parentId': '1138702379389775873', 'resourceType': '03', 'url': '/alarm/statics' },
+    { 'code': 'alarm_statics', 'icon': '', 'id': '1138703677266817005', 'ismenu': '1', 'levels': 11, 'name': '数据概览', 'num': 0, 'parentId': '1138702379389775873', 'resourceType': '03', 'url': '/dataView/statics' },
     { 'code': 'alarm_static_by_dept', 'icon': '', 'id': '1139376799592734721', 'ismenu': '0', 'levels': 11, 'name': '根据部门统计报警', 'num': 0, 'parentId': '1138702379389775873', 'resourceType': '04', 'url': '/statics/alarmsByDept' },
     { 'code': 'concentrator_add', 'icon': '', 'id': '1138693099123077122', 'ismenu': '0', 'levels': 11, 'name': '新增集中器', 'num': 0, 'parentId': '1138692702442582017', 'resourceType': '04', 'url': '/concentrator/add' },
     { 'code': 'job_export', 'icon': '', 'id': '1138699769542832130', 'ismenu': '0', 'levels': 11, 'name': '导出工单列表', 'num': 0, 'parentId': '1138699051712868353', 'resourceType': '04', 'url': '/job/export' },
diff --git a/src/components/BigData/Card/index.vue b/src/components/BigData/Card/index.vue
index 07ee165..b9e5ee6 100644
--- a/src/components/BigData/Card/index.vue
+++ b/src/components/BigData/Card/index.vue
@@ -8,8 +8,9 @@
         <div class="card-panel-text">
           {{ title }}
         </div>
-        <div class="card-panel-num" >
-          {{ context }}
+        <div class="card-panel-num">
+          <span>{{ context }}</span>
+          <span>{{ flags }}</span>
         </div>
       </div>
     </div>
@@ -24,6 +25,10 @@
       type: String,
       default: '标题'
     },
+    flags: {
+      type: String,
+      default: '单位'
+    },
     subtitle: {
       type: String,
       default: ''
diff --git a/src/components/Hamburger/index.vue b/src/components/Hamburger/index.vue
index 7c358e2..6a9236c 100644
--- a/src/components/Hamburger/index.vue
+++ b/src/components/Hamburger/index.vue
@@ -36,6 +36,7 @@
     vertical-align: middle;
     width: 20px;
     height: 20px;
+    cursor: pointer;
   }
 
   .hamburger.is-active {
diff --git a/src/router/modules/well.js b/src/router/modules/well.js
index b5b6e82..a92ff3c 100644
--- a/src/router/modules/well.js
+++ b/src/router/modules/well.js
@@ -179,16 +179,22 @@
     },
     children: [
       {
+        path: '/dataView',
+        name: 'DataView',
+        component: () => import('@/views/dataView/dataView'),
+        meta: { title: '数据概览', icon: 'icon-config', permission: ['/dataView/statics'] }
+      },
+      {
         path: '/dataManage',
         name: 'DataManage',
         component: () => import('@/views/dataManage/dataManage'),
-        meta: { title: '历史数据', icon: 'icon-config', permission: ['/datalist'] }
+        meta: { title: '数据列表', icon: 'icon-config', permission: ['/datalist'] }
       },
       {
         path: '/dataAnalyse',
         name: 'DataAnalyse',
         component: () => import('@/views/dataStatics/dataStatics'),
-        meta: { title: '数据分析', icon: 'icon-config', permission: ['/dataAnalyse'] }
+        meta: { title: '数据曲线', icon: 'icon-config', permission: ['/dataAnalyse'] }
       },
       {
         path: '/deviceStatics',

diff --git a/mock/system/user.js b/mock/system/user.js
index abd593d..747ef61 100644
--- a/mock/system/user.js
+++ b/mock/system/user.js
@@ -195,6 +195,7 @@
     { 'code': 'well_bfcf', 'icon': '', 'id': '1138616121200189442', 'ismenu': '0', 'levels': 11, 'name': '布防撤防', 'num': 0, 'parentId': '1138377674778685442', 'resourceType': '04', 'url': '/well/bfcf' },
     { 'code': 'alarms_by_well', 'icon': '', 'id': '1138702100355313665', 'ismenu': '0', 'levels': 11, 'name': '获取某闸井告警信息', 'num': 0, 'parentId': '1138701347507105794', 'resourceType': '04', 'url': '/overview/alarmsByWell' },
     { 'code': 'alarm_statics', 'icon': '', 'id': '1138703677266817025', 'ismenu': '1', 'levels': 11, 'name': '报警统计', 'num': 0, 'parentId': '1138702379389775873', 'resourceType': '03', 'url': '/alarm/statics' },
+    { 'code': 'alarm_statics', 'icon': '', 'id': '1138703677266817005', 'ismenu': '1', 'levels': 11, 'name': '数据概览', 'num': 0, 'parentId': '1138702379389775873', 'resourceType': '03', 'url': '/dataView/statics' },
     { 'code': 'alarm_static_by_dept', 'icon': '', 'id': '1139376799592734721', 'ismenu': '0', 'levels': 11, 'name': '根据部门统计报警', 'num': 0, 'parentId': '1138702379389775873', 'resourceType': '04', 'url': '/statics/alarmsByDept' },
     { 'code': 'concentrator_add', 'icon': '', 'id': '1138693099123077122', 'ismenu': '0', 'levels': 11, 'name': '新增集中器', 'num': 0, 'parentId': '1138692702442582017', 'resourceType': '04', 'url': '/concentrator/add' },
     { 'code': 'job_export', 'icon': '', 'id': '1138699769542832130', 'ismenu': '0', 'levels': 11, 'name': '导出工单列表', 'num': 0, 'parentId': '1138699051712868353', 'resourceType': '04', 'url': '/job/export' },
diff --git a/src/components/BigData/Card/index.vue b/src/components/BigData/Card/index.vue
index 07ee165..b9e5ee6 100644
--- a/src/components/BigData/Card/index.vue
+++ b/src/components/BigData/Card/index.vue
@@ -8,8 +8,9 @@
         <div class="card-panel-text">
           {{ title }}
         </div>
-        <div class="card-panel-num" >
-          {{ context }}
+        <div class="card-panel-num">
+          <span>{{ context }}</span>
+          <span>{{ flags }}</span>
         </div>
       </div>
     </div>
@@ -24,6 +25,10 @@
       type: String,
       default: '标题'
     },
+    flags: {
+      type: String,
+      default: '单位'
+    },
     subtitle: {
       type: String,
       default: ''
diff --git a/src/components/Hamburger/index.vue b/src/components/Hamburger/index.vue
index 7c358e2..6a9236c 100644
--- a/src/components/Hamburger/index.vue
+++ b/src/components/Hamburger/index.vue
@@ -36,6 +36,7 @@
     vertical-align: middle;
     width: 20px;
     height: 20px;
+    cursor: pointer;
   }
 
   .hamburger.is-active {
diff --git a/src/router/modules/well.js b/src/router/modules/well.js
index b5b6e82..a92ff3c 100644
--- a/src/router/modules/well.js
+++ b/src/router/modules/well.js
@@ -179,16 +179,22 @@
     },
     children: [
       {
+        path: '/dataView',
+        name: 'DataView',
+        component: () => import('@/views/dataView/dataView'),
+        meta: { title: '数据概览', icon: 'icon-config', permission: ['/dataView/statics'] }
+      },
+      {
         path: '/dataManage',
         name: 'DataManage',
         component: () => import('@/views/dataManage/dataManage'),
-        meta: { title: '历史数据', icon: 'icon-config', permission: ['/datalist'] }
+        meta: { title: '数据列表', icon: 'icon-config', permission: ['/datalist'] }
       },
       {
         path: '/dataAnalyse',
         name: 'DataAnalyse',
         component: () => import('@/views/dataStatics/dataStatics'),
-        meta: { title: '数据分析', icon: 'icon-config', permission: ['/dataAnalyse'] }
+        meta: { title: '数据曲线', icon: 'icon-config', permission: ['/dataAnalyse'] }
       },
       {
         path: '/deviceStatics',
diff --git a/src/store/modules/settings.js b/src/store/modules/settings.js
index 856b38a..421e31b 100644
--- a/src/store/modules/settings.js
+++ b/src/store/modules/settings.js
@@ -1,12 +1,13 @@
 import variables from '@/styles/element-variables.scss'
 import defaultSettings from '@/settings'
 
-const { showSettings, tagsView, breadcrumb, fixedHeader, sidebarLogo } = defaultSettings
+// const { showSettings, tagsView, breadcrumb, fixedHeader, sidebarLogo } = defaultSettings
+const { showSettings, tagsView, fixedHeader, sidebarLogo } = defaultSettings
 
 const state = {
   theme: variables.theme, // 主题
   showSettings: showSettings, // 是否显示设置按钮
-  breadcrumb: breadcrumb, // 是否显示面包屑
+  breadcrumb: true, // 是否显示面包屑
   tagsView: tagsView, // 是否显示tagsView
   fixedHeader: fixedHeader, // 是否固定面包屑
   sidebarLogo: sidebarLogo, // 是否显示logo

diff --git a/mock/system/user.js b/mock/system/user.js
index abd593d..747ef61 100644
--- a/mock/system/user.js
+++ b/mock/system/user.js
@@ -195,6 +195,7 @@
     { 'code': 'well_bfcf', 'icon': '', 'id': '1138616121200189442', 'ismenu': '0', 'levels': 11, 'name': '布防撤防', 'num': 0, 'parentId': '1138377674778685442', 'resourceType': '04', 'url': '/well/bfcf' },
     { 'code': 'alarms_by_well', 'icon': '', 'id': '1138702100355313665', 'ismenu': '0', 'levels': 11, 'name': '获取某闸井告警信息', 'num': 0, 'parentId': '1138701347507105794', 'resourceType': '04', 'url': '/overview/alarmsByWell' },
     { 'code': 'alarm_statics', 'icon': '', 'id': '1138703677266817025', 'ismenu': '1', 'levels': 11, 'name': '报警统计', 'num': 0, 'parentId': '1138702379389775873', 'resourceType': '03', 'url': '/alarm/statics' },
+    { 'code': 'alarm_statics', 'icon': '', 'id': '1138703677266817005', 'ismenu': '1', 'levels': 11, 'name': '数据概览', 'num': 0, 'parentId': '1138702379389775873', 'resourceType': '03', 'url': '/dataView/statics' },
     { 'code': 'alarm_static_by_dept', 'icon': '', 'id': '1139376799592734721', 'ismenu': '0', 'levels': 11, 'name': '根据部门统计报警', 'num': 0, 'parentId': '1138702379389775873', 'resourceType': '04', 'url': '/statics/alarmsByDept' },
     { 'code': 'concentrator_add', 'icon': '', 'id': '1138693099123077122', 'ismenu': '0', 'levels': 11, 'name': '新增集中器', 'num': 0, 'parentId': '1138692702442582017', 'resourceType': '04', 'url': '/concentrator/add' },
     { 'code': 'job_export', 'icon': '', 'id': '1138699769542832130', 'ismenu': '0', 'levels': 11, 'name': '导出工单列表', 'num': 0, 'parentId': '1138699051712868353', 'resourceType': '04', 'url': '/job/export' },
diff --git a/src/components/BigData/Card/index.vue b/src/components/BigData/Card/index.vue
index 07ee165..b9e5ee6 100644
--- a/src/components/BigData/Card/index.vue
+++ b/src/components/BigData/Card/index.vue
@@ -8,8 +8,9 @@
         <div class="card-panel-text">
           {{ title }}
         </div>
-        <div class="card-panel-num" >
-          {{ context }}
+        <div class="card-panel-num">
+          <span>{{ context }}</span>
+          <span>{{ flags }}</span>
         </div>
       </div>
     </div>
@@ -24,6 +25,10 @@
       type: String,
       default: '标题'
     },
+    flags: {
+      type: String,
+      default: '单位'
+    },
     subtitle: {
       type: String,
       default: ''
diff --git a/src/components/Hamburger/index.vue b/src/components/Hamburger/index.vue
index 7c358e2..6a9236c 100644
--- a/src/components/Hamburger/index.vue
+++ b/src/components/Hamburger/index.vue
@@ -36,6 +36,7 @@
     vertical-align: middle;
     width: 20px;
     height: 20px;
+    cursor: pointer;
   }
 
   .hamburger.is-active {
diff --git a/src/router/modules/well.js b/src/router/modules/well.js
index b5b6e82..a92ff3c 100644
--- a/src/router/modules/well.js
+++ b/src/router/modules/well.js
@@ -179,16 +179,22 @@
     },
     children: [
       {
+        path: '/dataView',
+        name: 'DataView',
+        component: () => import('@/views/dataView/dataView'),
+        meta: { title: '数据概览', icon: 'icon-config', permission: ['/dataView/statics'] }
+      },
+      {
         path: '/dataManage',
         name: 'DataManage',
         component: () => import('@/views/dataManage/dataManage'),
-        meta: { title: '历史数据', icon: 'icon-config', permission: ['/datalist'] }
+        meta: { title: '数据列表', icon: 'icon-config', permission: ['/datalist'] }
       },
       {
         path: '/dataAnalyse',
         name: 'DataAnalyse',
         component: () => import('@/views/dataStatics/dataStatics'),
-        meta: { title: '数据分析', icon: 'icon-config', permission: ['/dataAnalyse'] }
+        meta: { title: '数据曲线', icon: 'icon-config', permission: ['/dataAnalyse'] }
       },
       {
         path: '/deviceStatics',
diff --git a/src/store/modules/settings.js b/src/store/modules/settings.js
index 856b38a..421e31b 100644
--- a/src/store/modules/settings.js
+++ b/src/store/modules/settings.js
@@ -1,12 +1,13 @@
 import variables from '@/styles/element-variables.scss'
 import defaultSettings from '@/settings'
 
-const { showSettings, tagsView, breadcrumb, fixedHeader, sidebarLogo } = defaultSettings
+// const { showSettings, tagsView, breadcrumb, fixedHeader, sidebarLogo } = defaultSettings
+const { showSettings, tagsView, fixedHeader, sidebarLogo } = defaultSettings
 
 const state = {
   theme: variables.theme, // 主题
   showSettings: showSettings, // 是否显示设置按钮
-  breadcrumb: breadcrumb, // 是否显示面包屑
+  breadcrumb: true, // 是否显示面包屑
   tagsView: tagsView, // 是否显示tagsView
   fixedHeader: fixedHeader, // 是否固定面包屑
   sidebarLogo: sidebarLogo, // 是否显示logo
diff --git a/src/views/dataView/components/alarmStatus.vue b/src/views/dataView/components/alarmStatus.vue
new file mode 100644
index 0000000..94f7410
--- /dev/null
+++ b/src/views/dataView/components/alarmStatus.vue
@@ -0,0 +1,264 @@
+<template>
+  <el-row :gutter="40" class="panel-group">
+    <div>
+      <el-col>
+        <div class="flagBoxStyle">
+          <div class="flagStyle" />
+          <div>报警情况</div>
+        </div>
+      </el-col>
+    </div>
+    <div v-for="card in dataGroup" :key="card.title">
+      <el-col v-if="hasPerm(card.permission)" class="card-panel-col">
+        <card :title="card.title" :context="card.context" :flags="card.flags" :icon="card.icon" :color="card.color" @click.native="goPage(card.path)" />
+      </el-col>
+    </div>
+    <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-row>
+</template>
+
+<script>
+import Card from '@/components/BigData/Card'
+import { wellCountByBfzt } from '@/api/well/well'
+import { deviceStaticByStatus, alarmNowStatic } from '@/api/data/dataStatics'
+import { jobCountByStatus } from '@/api/alarm/job'
+export default {
+  name: 'AlarmStatus',
+  components: {
+    Card
+  },
+  data() {
+    return {
+      tableList: [],
+      dataGroup: [
+        {
+          title: '井',
+          context: '--',
+          flags: '条',
+          icon: 'icon-alarm',
+          color: '#40c9c6',
+          path: '/wellList',
+          permission: '/well/list'
+        }
+        // {
+        //   title: '设备',
+        //   context: '--',
+        //   flags: '个',
+        //   icon: 'icon-device',
+        //   color: '#36a3f7',
+        //   path: '/deviceList',
+        //   permission: '/device/list'
+        // },
+        // {
+        //   title: '今日数据',
+        //   context: '--',
+        //   flags: '条',
+        //   icon: 'icon-alarm',
+        //   color: '#f4516c',
+        //   path: '/alarmNow',
+        //   permission: '/alarm/now'
+        // },
+        // {
+        //   title: '离线设备',
+        //   context: '--',
+        //   flags: '个',
+        //   icon: 'icon-order',
+        //   color: '#f4516c',
+        //   path: '/listJob',
+        //   permission: '/job/list'
+        // }
+      ]
+    }
+  },
+  created() {
+    this.getWellCount()
+    this.getDeviceCount()
+    this.getAlarmCount()
+    this.getJobCount()
+  },
+  mounted() {
+    this.tableList = [
+      {
+        value: 'WELL-001',
+        name: '液位超限'
+      },
+      {
+        value: 'WELL-002',
+        name: '燃气浓度超限'
+      },
+      {
+        value: 'WELL-003',
+        name: '井盖开启'
+      },
+      {
+        value: 'WELL-004',
+        name: '井盖开启'
+      }
+    ]
+  },
+  methods: {
+    refresh() {
+      this.getAlarmCount()
+      this.getJobCount()
+    },
+    goPage(path) {
+      this.$router.push(path)
+    },
+    getWellCount() {
+      wellCountByBfzt().then(response => {
+        this.dataGroup[0].context = response.data.total
+      })
+    },
+    getDeviceCount() {
+      deviceStaticByStatus().then(response => {
+        this.dataGroup[1].context = response.data.total
+      })
+    },
+    getAlarmCount() {
+      alarmNowStatic().then(response => {
+        this.dataGroup[2].context = response.data.total
+      })
+    },
+    getJobCount() {
+      jobCountByStatus().then(response => {
+        const data = response.data
+        const total = data.beforeGet + data.beforeConfirm + data.inHandle
+        this.dataGroup[3].context = total
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.tableStyle{
+  padding: 20px;
+}
+.flagBoxStyle {
+  display: flex;
+  margin-bottom: 20px;
+  margin-top: -30px;
+}
+.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;
+  }
+
+  .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;
+      }
+    }
+  }
+}
+
+@media (max-width:550px) {
+  .card-panel-description {
+    display: none;
+  }
+
+  .card-panel-icon-wrapper {
+    float: none !important;
+    width: 100%;
+    height: 100%;
+    margin: 0 !important;
+
+    .svg-icon {
+      display: block;
+      margin: 14px auto !important;
+      float: none !important;
+    }
+  }
+}
+</style>

diff --git a/mock/system/user.js b/mock/system/user.js
index abd593d..747ef61 100644
--- a/mock/system/user.js
+++ b/mock/system/user.js
@@ -195,6 +195,7 @@
     { 'code': 'well_bfcf', 'icon': '', 'id': '1138616121200189442', 'ismenu': '0', 'levels': 11, 'name': '布防撤防', 'num': 0, 'parentId': '1138377674778685442', 'resourceType': '04', 'url': '/well/bfcf' },
     { 'code': 'alarms_by_well', 'icon': '', 'id': '1138702100355313665', 'ismenu': '0', 'levels': 11, 'name': '获取某闸井告警信息', 'num': 0, 'parentId': '1138701347507105794', 'resourceType': '04', 'url': '/overview/alarmsByWell' },
     { 'code': 'alarm_statics', 'icon': '', 'id': '1138703677266817025', 'ismenu': '1', 'levels': 11, 'name': '报警统计', 'num': 0, 'parentId': '1138702379389775873', 'resourceType': '03', 'url': '/alarm/statics' },
+    { 'code': 'alarm_statics', 'icon': '', 'id': '1138703677266817005', 'ismenu': '1', 'levels': 11, 'name': '数据概览', 'num': 0, 'parentId': '1138702379389775873', 'resourceType': '03', 'url': '/dataView/statics' },
     { 'code': 'alarm_static_by_dept', 'icon': '', 'id': '1139376799592734721', 'ismenu': '0', 'levels': 11, 'name': '根据部门统计报警', 'num': 0, 'parentId': '1138702379389775873', 'resourceType': '04', 'url': '/statics/alarmsByDept' },
     { 'code': 'concentrator_add', 'icon': '', 'id': '1138693099123077122', 'ismenu': '0', 'levels': 11, 'name': '新增集中器', 'num': 0, 'parentId': '1138692702442582017', 'resourceType': '04', 'url': '/concentrator/add' },
     { 'code': 'job_export', 'icon': '', 'id': '1138699769542832130', 'ismenu': '0', 'levels': 11, 'name': '导出工单列表', 'num': 0, 'parentId': '1138699051712868353', 'resourceType': '04', 'url': '/job/export' },
diff --git a/src/components/BigData/Card/index.vue b/src/components/BigData/Card/index.vue
index 07ee165..b9e5ee6 100644
--- a/src/components/BigData/Card/index.vue
+++ b/src/components/BigData/Card/index.vue
@@ -8,8 +8,9 @@
         <div class="card-panel-text">
           {{ title }}
         </div>
-        <div class="card-panel-num" >
-          {{ context }}
+        <div class="card-panel-num">
+          <span>{{ context }}</span>
+          <span>{{ flags }}</span>
         </div>
       </div>
     </div>
@@ -24,6 +25,10 @@
       type: String,
       default: '标题'
     },
+    flags: {
+      type: String,
+      default: '单位'
+    },
     subtitle: {
       type: String,
       default: ''
diff --git a/src/components/Hamburger/index.vue b/src/components/Hamburger/index.vue
index 7c358e2..6a9236c 100644
--- a/src/components/Hamburger/index.vue
+++ b/src/components/Hamburger/index.vue
@@ -36,6 +36,7 @@
     vertical-align: middle;
     width: 20px;
     height: 20px;
+    cursor: pointer;
   }
 
   .hamburger.is-active {
diff --git a/src/router/modules/well.js b/src/router/modules/well.js
index b5b6e82..a92ff3c 100644
--- a/src/router/modules/well.js
+++ b/src/router/modules/well.js
@@ -179,16 +179,22 @@
     },
     children: [
       {
+        path: '/dataView',
+        name: 'DataView',
+        component: () => import('@/views/dataView/dataView'),
+        meta: { title: '数据概览', icon: 'icon-config', permission: ['/dataView/statics'] }
+      },
+      {
         path: '/dataManage',
         name: 'DataManage',
         component: () => import('@/views/dataManage/dataManage'),
-        meta: { title: '历史数据', icon: 'icon-config', permission: ['/datalist'] }
+        meta: { title: '数据列表', icon: 'icon-config', permission: ['/datalist'] }
       },
       {
         path: '/dataAnalyse',
         name: 'DataAnalyse',
         component: () => import('@/views/dataStatics/dataStatics'),
-        meta: { title: '数据分析', icon: 'icon-config', permission: ['/dataAnalyse'] }
+        meta: { title: '数据曲线', icon: 'icon-config', permission: ['/dataAnalyse'] }
       },
       {
         path: '/deviceStatics',
diff --git a/src/store/modules/settings.js b/src/store/modules/settings.js
index 856b38a..421e31b 100644
--- a/src/store/modules/settings.js
+++ b/src/store/modules/settings.js
@@ -1,12 +1,13 @@
 import variables from '@/styles/element-variables.scss'
 import defaultSettings from '@/settings'
 
-const { showSettings, tagsView, breadcrumb, fixedHeader, sidebarLogo } = defaultSettings
+// const { showSettings, tagsView, breadcrumb, fixedHeader, sidebarLogo } = defaultSettings
+const { showSettings, tagsView, fixedHeader, sidebarLogo } = defaultSettings
 
 const state = {
   theme: variables.theme, // 主题
   showSettings: showSettings, // 是否显示设置按钮
-  breadcrumb: breadcrumb, // 是否显示面包屑
+  breadcrumb: true, // 是否显示面包屑
   tagsView: tagsView, // 是否显示tagsView
   fixedHeader: fixedHeader, // 是否固定面包屑
   sidebarLogo: sidebarLogo, // 是否显示logo
diff --git a/src/views/dataView/components/alarmStatus.vue b/src/views/dataView/components/alarmStatus.vue
new file mode 100644
index 0000000..94f7410
--- /dev/null
+++ b/src/views/dataView/components/alarmStatus.vue
@@ -0,0 +1,264 @@
+<template>
+  <el-row :gutter="40" class="panel-group">
+    <div>
+      <el-col>
+        <div class="flagBoxStyle">
+          <div class="flagStyle" />
+          <div>报警情况</div>
+        </div>
+      </el-col>
+    </div>
+    <div v-for="card in dataGroup" :key="card.title">
+      <el-col v-if="hasPerm(card.permission)" class="card-panel-col">
+        <card :title="card.title" :context="card.context" :flags="card.flags" :icon="card.icon" :color="card.color" @click.native="goPage(card.path)" />
+      </el-col>
+    </div>
+    <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-row>
+</template>
+
+<script>
+import Card from '@/components/BigData/Card'
+import { wellCountByBfzt } from '@/api/well/well'
+import { deviceStaticByStatus, alarmNowStatic } from '@/api/data/dataStatics'
+import { jobCountByStatus } from '@/api/alarm/job'
+export default {
+  name: 'AlarmStatus',
+  components: {
+    Card
+  },
+  data() {
+    return {
+      tableList: [],
+      dataGroup: [
+        {
+          title: '井',
+          context: '--',
+          flags: '条',
+          icon: 'icon-alarm',
+          color: '#40c9c6',
+          path: '/wellList',
+          permission: '/well/list'
+        }
+        // {
+        //   title: '设备',
+        //   context: '--',
+        //   flags: '个',
+        //   icon: 'icon-device',
+        //   color: '#36a3f7',
+        //   path: '/deviceList',
+        //   permission: '/device/list'
+        // },
+        // {
+        //   title: '今日数据',
+        //   context: '--',
+        //   flags: '条',
+        //   icon: 'icon-alarm',
+        //   color: '#f4516c',
+        //   path: '/alarmNow',
+        //   permission: '/alarm/now'
+        // },
+        // {
+        //   title: '离线设备',
+        //   context: '--',
+        //   flags: '个',
+        //   icon: 'icon-order',
+        //   color: '#f4516c',
+        //   path: '/listJob',
+        //   permission: '/job/list'
+        // }
+      ]
+    }
+  },
+  created() {
+    this.getWellCount()
+    this.getDeviceCount()
+    this.getAlarmCount()
+    this.getJobCount()
+  },
+  mounted() {
+    this.tableList = [
+      {
+        value: 'WELL-001',
+        name: '液位超限'
+      },
+      {
+        value: 'WELL-002',
+        name: '燃气浓度超限'
+      },
+      {
+        value: 'WELL-003',
+        name: '井盖开启'
+      },
+      {
+        value: 'WELL-004',
+        name: '井盖开启'
+      }
+    ]
+  },
+  methods: {
+    refresh() {
+      this.getAlarmCount()
+      this.getJobCount()
+    },
+    goPage(path) {
+      this.$router.push(path)
+    },
+    getWellCount() {
+      wellCountByBfzt().then(response => {
+        this.dataGroup[0].context = response.data.total
+      })
+    },
+    getDeviceCount() {
+      deviceStaticByStatus().then(response => {
+        this.dataGroup[1].context = response.data.total
+      })
+    },
+    getAlarmCount() {
+      alarmNowStatic().then(response => {
+        this.dataGroup[2].context = response.data.total
+      })
+    },
+    getJobCount() {
+      jobCountByStatus().then(response => {
+        const data = response.data
+        const total = data.beforeGet + data.beforeConfirm + data.inHandle
+        this.dataGroup[3].context = total
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.tableStyle{
+  padding: 20px;
+}
+.flagBoxStyle {
+  display: flex;
+  margin-bottom: 20px;
+  margin-top: -30px;
+}
+.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;
+  }
+
+  .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;
+      }
+    }
+  }
+}
+
+@media (max-width:550px) {
+  .card-panel-description {
+    display: none;
+  }
+
+  .card-panel-icon-wrapper {
+    float: none !important;
+    width: 100%;
+    height: 100%;
+    margin: 0 !important;
+
+    .svg-icon {
+      display: block;
+      margin: 14px auto !important;
+      float: none !important;
+    }
+  }
+}
+</style>
diff --git a/src/views/dataView/components/alarmView.vue b/src/views/dataView/components/alarmView.vue
new file mode 100644
index 0000000..60650e9
--- /dev/null
+++ b/src/views/dataView/components/alarmView.vue
@@ -0,0 +1,106 @@
+<template>
+  <div>
+    <div class="flagBoxStyle">
+      <div class="flagStyle" />
+      <div>报警分析</div>
+    </div>
+    <el-row>
+      <el-col>
+        <ve-line
+          :data="chartDataLine"
+          :settings="chartSettingsLine"
+        />
+      </el-col>
+      <el-col>
+        <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>
+
+<script>
+import { alarmStaticsByContent } from '@/api/alarm/deviceStatics'
+export default {
+  name: 'AlarmStaticsByType',
+  data() {
+    return {
+      tableList: [],
+      // 折线图
+      chartSettingsLine: {
+        labelMap: {
+          'alarmWellData': '井盖开盖报警',
+          'alarmLiquidData': '液位超限报警',
+          'alarmHarmfulData': '有害气体超标报警'
+        },
+        metrics: ['alarmWellData', 'alarmLiquidData', 'alarmHarmfulData'],
+        dimension: ['date']
+      },
+      chartDataLine: {
+        columns: ['date', 'alarmWellData', 'alarmLiquidData', 'alarmHarmfulData'],
+        rows: []
+      }
+    }
+  },
+  created() {
+    this.fetchDeviceTypeLine()
+  },
+  mounted() {
+    this.tableList = [
+      {
+        value: '224',
+        name: '井盖开启'
+      },
+      {
+        value: '22',
+        name: '燃气浓度超限'
+      },
+      {
+        value: '1',
+        name: '液位超限'
+      },
+      {
+        value: '4',
+        name: '有害气体超标'
+      }
+    ]
+  },
+  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
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.tableStyle{
+  padding: 100px 10px;
+}
+.flagBoxStyle {
+  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);
+}
+
+</style>

diff --git a/mock/system/user.js b/mock/system/user.js
index abd593d..747ef61 100644
--- a/mock/system/user.js
+++ b/mock/system/user.js
@@ -195,6 +195,7 @@
     { 'code': 'well_bfcf', 'icon': '', 'id': '1138616121200189442', 'ismenu': '0', 'levels': 11, 'name': '布防撤防', 'num': 0, 'parentId': '1138377674778685442', 'resourceType': '04', 'url': '/well/bfcf' },
     { 'code': 'alarms_by_well', 'icon': '', 'id': '1138702100355313665', 'ismenu': '0', 'levels': 11, 'name': '获取某闸井告警信息', 'num': 0, 'parentId': '1138701347507105794', 'resourceType': '04', 'url': '/overview/alarmsByWell' },
     { 'code': 'alarm_statics', 'icon': '', 'id': '1138703677266817025', 'ismenu': '1', 'levels': 11, 'name': '报警统计', 'num': 0, 'parentId': '1138702379389775873', 'resourceType': '03', 'url': '/alarm/statics' },
+    { 'code': 'alarm_statics', 'icon': '', 'id': '1138703677266817005', 'ismenu': '1', 'levels': 11, 'name': '数据概览', 'num': 0, 'parentId': '1138702379389775873', 'resourceType': '03', 'url': '/dataView/statics' },
     { 'code': 'alarm_static_by_dept', 'icon': '', 'id': '1139376799592734721', 'ismenu': '0', 'levels': 11, 'name': '根据部门统计报警', 'num': 0, 'parentId': '1138702379389775873', 'resourceType': '04', 'url': '/statics/alarmsByDept' },
     { 'code': 'concentrator_add', 'icon': '', 'id': '1138693099123077122', 'ismenu': '0', 'levels': 11, 'name': '新增集中器', 'num': 0, 'parentId': '1138692702442582017', 'resourceType': '04', 'url': '/concentrator/add' },
     { 'code': 'job_export', 'icon': '', 'id': '1138699769542832130', 'ismenu': '0', 'levels': 11, 'name': '导出工单列表', 'num': 0, 'parentId': '1138699051712868353', 'resourceType': '04', 'url': '/job/export' },
diff --git a/src/components/BigData/Card/index.vue b/src/components/BigData/Card/index.vue
index 07ee165..b9e5ee6 100644
--- a/src/components/BigData/Card/index.vue
+++ b/src/components/BigData/Card/index.vue
@@ -8,8 +8,9 @@
         <div class="card-panel-text">
           {{ title }}
         </div>
-        <div class="card-panel-num" >
-          {{ context }}
+        <div class="card-panel-num">
+          <span>{{ context }}</span>
+          <span>{{ flags }}</span>
         </div>
       </div>
     </div>
@@ -24,6 +25,10 @@
       type: String,
       default: '标题'
     },
+    flags: {
+      type: String,
+      default: '单位'
+    },
     subtitle: {
       type: String,
       default: ''
diff --git a/src/components/Hamburger/index.vue b/src/components/Hamburger/index.vue
index 7c358e2..6a9236c 100644
--- a/src/components/Hamburger/index.vue
+++ b/src/components/Hamburger/index.vue
@@ -36,6 +36,7 @@
     vertical-align: middle;
     width: 20px;
     height: 20px;
+    cursor: pointer;
   }
 
   .hamburger.is-active {
diff --git a/src/router/modules/well.js b/src/router/modules/well.js
index b5b6e82..a92ff3c 100644
--- a/src/router/modules/well.js
+++ b/src/router/modules/well.js
@@ -179,16 +179,22 @@
     },
     children: [
       {
+        path: '/dataView',
+        name: 'DataView',
+        component: () => import('@/views/dataView/dataView'),
+        meta: { title: '数据概览', icon: 'icon-config', permission: ['/dataView/statics'] }
+      },
+      {
         path: '/dataManage',
         name: 'DataManage',
         component: () => import('@/views/dataManage/dataManage'),
-        meta: { title: '历史数据', icon: 'icon-config', permission: ['/datalist'] }
+        meta: { title: '数据列表', icon: 'icon-config', permission: ['/datalist'] }
       },
       {
         path: '/dataAnalyse',
         name: 'DataAnalyse',
         component: () => import('@/views/dataStatics/dataStatics'),
-        meta: { title: '数据分析', icon: 'icon-config', permission: ['/dataAnalyse'] }
+        meta: { title: '数据曲线', icon: 'icon-config', permission: ['/dataAnalyse'] }
       },
       {
         path: '/deviceStatics',
diff --git a/src/store/modules/settings.js b/src/store/modules/settings.js
index 856b38a..421e31b 100644
--- a/src/store/modules/settings.js
+++ b/src/store/modules/settings.js
@@ -1,12 +1,13 @@
 import variables from '@/styles/element-variables.scss'
 import defaultSettings from '@/settings'
 
-const { showSettings, tagsView, breadcrumb, fixedHeader, sidebarLogo } = defaultSettings
+// const { showSettings, tagsView, breadcrumb, fixedHeader, sidebarLogo } = defaultSettings
+const { showSettings, tagsView, fixedHeader, sidebarLogo } = defaultSettings
 
 const state = {
   theme: variables.theme, // 主题
   showSettings: showSettings, // 是否显示设置按钮
-  breadcrumb: breadcrumb, // 是否显示面包屑
+  breadcrumb: true, // 是否显示面包屑
   tagsView: tagsView, // 是否显示tagsView
   fixedHeader: fixedHeader, // 是否固定面包屑
   sidebarLogo: sidebarLogo, // 是否显示logo
diff --git a/src/views/dataView/components/alarmStatus.vue b/src/views/dataView/components/alarmStatus.vue
new file mode 100644
index 0000000..94f7410
--- /dev/null
+++ b/src/views/dataView/components/alarmStatus.vue
@@ -0,0 +1,264 @@
+<template>
+  <el-row :gutter="40" class="panel-group">
+    <div>
+      <el-col>
+        <div class="flagBoxStyle">
+          <div class="flagStyle" />
+          <div>报警情况</div>
+        </div>
+      </el-col>
+    </div>
+    <div v-for="card in dataGroup" :key="card.title">
+      <el-col v-if="hasPerm(card.permission)" class="card-panel-col">
+        <card :title="card.title" :context="card.context" :flags="card.flags" :icon="card.icon" :color="card.color" @click.native="goPage(card.path)" />
+      </el-col>
+    </div>
+    <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-row>
+</template>
+
+<script>
+import Card from '@/components/BigData/Card'
+import { wellCountByBfzt } from '@/api/well/well'
+import { deviceStaticByStatus, alarmNowStatic } from '@/api/data/dataStatics'
+import { jobCountByStatus } from '@/api/alarm/job'
+export default {
+  name: 'AlarmStatus',
+  components: {
+    Card
+  },
+  data() {
+    return {
+      tableList: [],
+      dataGroup: [
+        {
+          title: '井',
+          context: '--',
+          flags: '条',
+          icon: 'icon-alarm',
+          color: '#40c9c6',
+          path: '/wellList',
+          permission: '/well/list'
+        }
+        // {
+        //   title: '设备',
+        //   context: '--',
+        //   flags: '个',
+        //   icon: 'icon-device',
+        //   color: '#36a3f7',
+        //   path: '/deviceList',
+        //   permission: '/device/list'
+        // },
+        // {
+        //   title: '今日数据',
+        //   context: '--',
+        //   flags: '条',
+        //   icon: 'icon-alarm',
+        //   color: '#f4516c',
+        //   path: '/alarmNow',
+        //   permission: '/alarm/now'
+        // },
+        // {
+        //   title: '离线设备',
+        //   context: '--',
+        //   flags: '个',
+        //   icon: 'icon-order',
+        //   color: '#f4516c',
+        //   path: '/listJob',
+        //   permission: '/job/list'
+        // }
+      ]
+    }
+  },
+  created() {
+    this.getWellCount()
+    this.getDeviceCount()
+    this.getAlarmCount()
+    this.getJobCount()
+  },
+  mounted() {
+    this.tableList = [
+      {
+        value: 'WELL-001',
+        name: '液位超限'
+      },
+      {
+        value: 'WELL-002',
+        name: '燃气浓度超限'
+      },
+      {
+        value: 'WELL-003',
+        name: '井盖开启'
+      },
+      {
+        value: 'WELL-004',
+        name: '井盖开启'
+      }
+    ]
+  },
+  methods: {
+    refresh() {
+      this.getAlarmCount()
+      this.getJobCount()
+    },
+    goPage(path) {
+      this.$router.push(path)
+    },
+    getWellCount() {
+      wellCountByBfzt().then(response => {
+        this.dataGroup[0].context = response.data.total
+      })
+    },
+    getDeviceCount() {
+      deviceStaticByStatus().then(response => {
+        this.dataGroup[1].context = response.data.total
+      })
+    },
+    getAlarmCount() {
+      alarmNowStatic().then(response => {
+        this.dataGroup[2].context = response.data.total
+      })
+    },
+    getJobCount() {
+      jobCountByStatus().then(response => {
+        const data = response.data
+        const total = data.beforeGet + data.beforeConfirm + data.inHandle
+        this.dataGroup[3].context = total
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.tableStyle{
+  padding: 20px;
+}
+.flagBoxStyle {
+  display: flex;
+  margin-bottom: 20px;
+  margin-top: -30px;
+}
+.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;
+  }
+
+  .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;
+      }
+    }
+  }
+}
+
+@media (max-width:550px) {
+  .card-panel-description {
+    display: none;
+  }
+
+  .card-panel-icon-wrapper {
+    float: none !important;
+    width: 100%;
+    height: 100%;
+    margin: 0 !important;
+
+    .svg-icon {
+      display: block;
+      margin: 14px auto !important;
+      float: none !important;
+    }
+  }
+}
+</style>
diff --git a/src/views/dataView/components/alarmView.vue b/src/views/dataView/components/alarmView.vue
new file mode 100644
index 0000000..60650e9
--- /dev/null
+++ b/src/views/dataView/components/alarmView.vue
@@ -0,0 +1,106 @@
+<template>
+  <div>
+    <div class="flagBoxStyle">
+      <div class="flagStyle" />
+      <div>报警分析</div>
+    </div>
+    <el-row>
+      <el-col>
+        <ve-line
+          :data="chartDataLine"
+          :settings="chartSettingsLine"
+        />
+      </el-col>
+      <el-col>
+        <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>
+
+<script>
+import { alarmStaticsByContent } from '@/api/alarm/deviceStatics'
+export default {
+  name: 'AlarmStaticsByType',
+  data() {
+    return {
+      tableList: [],
+      // 折线图
+      chartSettingsLine: {
+        labelMap: {
+          'alarmWellData': '井盖开盖报警',
+          'alarmLiquidData': '液位超限报警',
+          'alarmHarmfulData': '有害气体超标报警'
+        },
+        metrics: ['alarmWellData', 'alarmLiquidData', 'alarmHarmfulData'],
+        dimension: ['date']
+      },
+      chartDataLine: {
+        columns: ['date', 'alarmWellData', 'alarmLiquidData', 'alarmHarmfulData'],
+        rows: []
+      }
+    }
+  },
+  created() {
+    this.fetchDeviceTypeLine()
+  },
+  mounted() {
+    this.tableList = [
+      {
+        value: '224',
+        name: '井盖开启'
+      },
+      {
+        value: '22',
+        name: '燃气浓度超限'
+      },
+      {
+        value: '1',
+        name: '液位超限'
+      },
+      {
+        value: '4',
+        name: '有害气体超标'
+      }
+    ]
+  },
+  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
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.tableStyle{
+  padding: 100px 10px;
+}
+.flagBoxStyle {
+  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);
+}
+
+</style>
diff --git a/src/views/dataView/components/deviceCountView.vue b/src/views/dataView/components/deviceCountView.vue
new file mode 100644
index 0000000..b657e8d
--- /dev/null
+++ b/src/views/dataView/components/deviceCountView.vue
@@ -0,0 +1,119 @@
+<template>
+  <div>
+    <div class="flagBoxStyle">
+      <div class="flagStyle" />
+      <div>设备数量分析</div>
+    </div>
+    <el-row>
+      <el-col :span="16">
+        <ve-histogram
+          :data="chartData"
+          :grid="grid"
+          :extend="extend"
+          :settings="chartSettings"
+        />
+      </el-col>
+      <el-col :span="8">
+        <ve-pie
+          :data="chartDataPie"
+          :extend="extendPie"
+        />
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import { deviceStaticsByOnline } from '@/api/data/dataStatics'
+export default {
+  name: 'DeviceCountView',
+  data() {
+    return {
+      online: 0,
+      offline: 0,
+      // 饼状图
+      extendPie: {
+        series: {
+          label: { show: true, position: 'outside', formatter: '{b}:{c}' },
+          radius: '45%'
+        }
+      },
+      chartDataPie: {
+        columns: ['onlineStatus', 'deviceCount'],
+        rows: []
+      },
+      // 柱状图
+      extend: {
+        xAxis: {
+          axisLabel: {
+            rotate: 30,
+            margin: 30,
+            textStyle: {
+              align: 'center'
+            }
+          }
+        },
+        series: {
+          label: { show: true, position: 'top' },
+          barMaxWidth: 35 // 最大柱宽度
+        }
+      },
+      grid: {
+        right: 60
+      },
+      chartSettings: {
+        itemStyle: {
+          'barCategoryGap': 5
+        },
+        barWidth: 15,
+        labelMap: {
+          'deviceType': '权属单位',
+          'offline': '设备数量（个）'
+        },
+        dimension: ['deviceType'],
+        metrics: ['offline']
+      },
+      chartData: {
+        columns: ['deviceType', 'offline'],
+        rows: []
+      }
+    }
+  },
+  created() {
+    this.fetchDeviceType()
+  },
+  methods: {
+    fetchDeviceType() {
+      deviceStaticsByOnline().then(response => {
+        response.data.forEach((item) => {
+          this.online += item.online
+          this.offline += item.offline
+        })
+        this.chartData.rows = response.data
+        this.chartDataPie.rows = [
+          { 'onlineStatus': '在线', 'deviceCount': this.online },
+          { 'onlineStatus': '离线', 'deviceCount': this.offline }
+        ]
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.flagBoxStyle {
+  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);
+}
+
+</style>

diff --git a/mock/system/user.js b/mock/system/user.js
index abd593d..747ef61 100644
--- a/mock/system/user.js
+++ b/mock/system/user.js
@@ -195,6 +195,7 @@
     { 'code': 'well_bfcf', 'icon': '', 'id': '1138616121200189442', 'ismenu': '0', 'levels': 11, 'name': '布防撤防', 'num': 0, 'parentId': '1138377674778685442', 'resourceType': '04', 'url': '/well/bfcf' },
     { 'code': 'alarms_by_well', 'icon': '', 'id': '1138702100355313665', 'ismenu': '0', 'levels': 11, 'name': '获取某闸井告警信息', 'num': 0, 'parentId': '1138701347507105794', 'resourceType': '04', 'url': '/overview/alarmsByWell' },
     { 'code': 'alarm_statics', 'icon': '', 'id': '1138703677266817025', 'ismenu': '1', 'levels': 11, 'name': '报警统计', 'num': 0, 'parentId': '1138702379389775873', 'resourceType': '03', 'url': '/alarm/statics' },
+    { 'code': 'alarm_statics', 'icon': '', 'id': '1138703677266817005', 'ismenu': '1', 'levels': 11, 'name': '数据概览', 'num': 0, 'parentId': '1138702379389775873', 'resourceType': '03', 'url': '/dataView/statics' },
     { 'code': 'alarm_static_by_dept', 'icon': '', 'id': '1139376799592734721', 'ismenu': '0', 'levels': 11, 'name': '根据部门统计报警', 'num': 0, 'parentId': '1138702379389775873', 'resourceType': '04', 'url': '/statics/alarmsByDept' },
     { 'code': 'concentrator_add', 'icon': '', 'id': '1138693099123077122', 'ismenu': '0', 'levels': 11, 'name': '新增集中器', 'num': 0, 'parentId': '1138692702442582017', 'resourceType': '04', 'url': '/concentrator/add' },
     { 'code': 'job_export', 'icon': '', 'id': '1138699769542832130', 'ismenu': '0', 'levels': 11, 'name': '导出工单列表', 'num': 0, 'parentId': '1138699051712868353', 'resourceType': '04', 'url': '/job/export' },
diff --git a/src/components/BigData/Card/index.vue b/src/components/BigData/Card/index.vue
index 07ee165..b9e5ee6 100644
--- a/src/components/BigData/Card/index.vue
+++ b/src/components/BigData/Card/index.vue
@@ -8,8 +8,9 @@
         <div class="card-panel-text">
           {{ title }}
         </div>
-        <div class="card-panel-num" >
-          {{ context }}
+        <div class="card-panel-num">
+          <span>{{ context }}</span>
+          <span>{{ flags }}</span>
         </div>
       </div>
     </div>
@@ -24,6 +25,10 @@
       type: String,
       default: '标题'
     },
+    flags: {
+      type: String,
+      default: '单位'
+    },
     subtitle: {
       type: String,
       default: ''
diff --git a/src/components/Hamburger/index.vue b/src/components/Hamburger/index.vue
index 7c358e2..6a9236c 100644
--- a/src/components/Hamburger/index.vue
+++ b/src/components/Hamburger/index.vue
@@ -36,6 +36,7 @@
     vertical-align: middle;
     width: 20px;
     height: 20px;
+    cursor: pointer;
   }
 
   .hamburger.is-active {
diff --git a/src/router/modules/well.js b/src/router/modules/well.js
index b5b6e82..a92ff3c 100644
--- a/src/router/modules/well.js
+++ b/src/router/modules/well.js
@@ -179,16 +179,22 @@
     },
     children: [
       {
+        path: '/dataView',
+        name: 'DataView',
+        component: () => import('@/views/dataView/dataView'),
+        meta: { title: '数据概览', icon: 'icon-config', permission: ['/dataView/statics'] }
+      },
+      {
         path: '/dataManage',
         name: 'DataManage',
         component: () => import('@/views/dataManage/dataManage'),
-        meta: { title: '历史数据', icon: 'icon-config', permission: ['/datalist'] }
+        meta: { title: '数据列表', icon: 'icon-config', permission: ['/datalist'] }
       },
       {
         path: '/dataAnalyse',
         name: 'DataAnalyse',
         component: () => import('@/views/dataStatics/dataStatics'),
-        meta: { title: '数据分析', icon: 'icon-config', permission: ['/dataAnalyse'] }
+        meta: { title: '数据曲线', icon: 'icon-config', permission: ['/dataAnalyse'] }
       },
       {
         path: '/deviceStatics',
diff --git a/src/store/modules/settings.js b/src/store/modules/settings.js
index 856b38a..421e31b 100644
--- a/src/store/modules/settings.js
+++ b/src/store/modules/settings.js
@@ -1,12 +1,13 @@
 import variables from '@/styles/element-variables.scss'
 import defaultSettings from '@/settings'
 
-const { showSettings, tagsView, breadcrumb, fixedHeader, sidebarLogo } = defaultSettings
+// const { showSettings, tagsView, breadcrumb, fixedHeader, sidebarLogo } = defaultSettings
+const { showSettings, tagsView, fixedHeader, sidebarLogo } = defaultSettings
 
 const state = {
   theme: variables.theme, // 主题
   showSettings: showSettings, // 是否显示设置按钮
-  breadcrumb: breadcrumb, // 是否显示面包屑
+  breadcrumb: true, // 是否显示面包屑
   tagsView: tagsView, // 是否显示tagsView
   fixedHeader: fixedHeader, // 是否固定面包屑
   sidebarLogo: sidebarLogo, // 是否显示logo
diff --git a/src/views/dataView/components/alarmStatus.vue b/src/views/dataView/components/alarmStatus.vue
new file mode 100644
index 0000000..94f7410
--- /dev/null
+++ b/src/views/dataView/components/alarmStatus.vue
@@ -0,0 +1,264 @@
+<template>
+  <el-row :gutter="40" class="panel-group">
+    <div>
+      <el-col>
+        <div class="flagBoxStyle">
+          <div class="flagStyle" />
+          <div>报警情况</div>
+        </div>
+      </el-col>
+    </div>
+    <div v-for="card in dataGroup" :key="card.title">
+      <el-col v-if="hasPerm(card.permission)" class="card-panel-col">
+        <card :title="card.title" :context="card.context" :flags="card.flags" :icon="card.icon" :color="card.color" @click.native="goPage(card.path)" />
+      </el-col>
+    </div>
+    <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-row>
+</template>
+
+<script>
+import Card from '@/components/BigData/Card'
+import { wellCountByBfzt } from '@/api/well/well'
+import { deviceStaticByStatus, alarmNowStatic } from '@/api/data/dataStatics'
+import { jobCountByStatus } from '@/api/alarm/job'
+export default {
+  name: 'AlarmStatus',
+  components: {
+    Card
+  },
+  data() {
+    return {
+      tableList: [],
+      dataGroup: [
+        {
+          title: '井',
+          context: '--',
+          flags: '条',
+          icon: 'icon-alarm',
+          color: '#40c9c6',
+          path: '/wellList',
+          permission: '/well/list'
+        }
+        // {
+        //   title: '设备',
+        //   context: '--',
+        //   flags: '个',
+        //   icon: 'icon-device',
+        //   color: '#36a3f7',
+        //   path: '/deviceList',
+        //   permission: '/device/list'
+        // },
+        // {
+        //   title: '今日数据',
+        //   context: '--',
+        //   flags: '条',
+        //   icon: 'icon-alarm',
+        //   color: '#f4516c',
+        //   path: '/alarmNow',
+        //   permission: '/alarm/now'
+        // },
+        // {
+        //   title: '离线设备',
+        //   context: '--',
+        //   flags: '个',
+        //   icon: 'icon-order',
+        //   color: '#f4516c',
+        //   path: '/listJob',
+        //   permission: '/job/list'
+        // }
+      ]
+    }
+  },
+  created() {
+    this.getWellCount()
+    this.getDeviceCount()
+    this.getAlarmCount()
+    this.getJobCount()
+  },
+  mounted() {
+    this.tableList = [
+      {
+        value: 'WELL-001',
+        name: '液位超限'
+      },
+      {
+        value: 'WELL-002',
+        name: '燃气浓度超限'
+      },
+      {
+        value: 'WELL-003',
+        name: '井盖开启'
+      },
+      {
+        value: 'WELL-004',
+        name: '井盖开启'
+      }
+    ]
+  },
+  methods: {
+    refresh() {
+      this.getAlarmCount()
+      this.getJobCount()
+    },
+    goPage(path) {
+      this.$router.push(path)
+    },
+    getWellCount() {
+      wellCountByBfzt().then(response => {
+        this.dataGroup[0].context = response.data.total
+      })
+    },
+    getDeviceCount() {
+      deviceStaticByStatus().then(response => {
+        this.dataGroup[1].context = response.data.total
+      })
+    },
+    getAlarmCount() {
+      alarmNowStatic().then(response => {
+        this.dataGroup[2].context = response.data.total
+      })
+    },
+    getJobCount() {
+      jobCountByStatus().then(response => {
+        const data = response.data
+        const total = data.beforeGet + data.beforeConfirm + data.inHandle
+        this.dataGroup[3].context = total
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.tableStyle{
+  padding: 20px;
+}
+.flagBoxStyle {
+  display: flex;
+  margin-bottom: 20px;
+  margin-top: -30px;
+}
+.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;
+  }
+
+  .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;
+      }
+    }
+  }
+}
+
+@media (max-width:550px) {
+  .card-panel-description {
+    display: none;
+  }
+
+  .card-panel-icon-wrapper {
+    float: none !important;
+    width: 100%;
+    height: 100%;
+    margin: 0 !important;
+
+    .svg-icon {
+      display: block;
+      margin: 14px auto !important;
+      float: none !important;
+    }
+  }
+}
+</style>
diff --git a/src/views/dataView/components/alarmView.vue b/src/views/dataView/components/alarmView.vue
new file mode 100644
index 0000000..60650e9
--- /dev/null
+++ b/src/views/dataView/components/alarmView.vue
@@ -0,0 +1,106 @@
+<template>
+  <div>
+    <div class="flagBoxStyle">
+      <div class="flagStyle" />
+      <div>报警分析</div>
+    </div>
+    <el-row>
+      <el-col>
+        <ve-line
+          :data="chartDataLine"
+          :settings="chartSettingsLine"
+        />
+      </el-col>
+      <el-col>
+        <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>
+
+<script>
+import { alarmStaticsByContent } from '@/api/alarm/deviceStatics'
+export default {
+  name: 'AlarmStaticsByType',
+  data() {
+    return {
+      tableList: [],
+      // 折线图
+      chartSettingsLine: {
+        labelMap: {
+          'alarmWellData': '井盖开盖报警',
+          'alarmLiquidData': '液位超限报警',
+          'alarmHarmfulData': '有害气体超标报警'
+        },
+        metrics: ['alarmWellData', 'alarmLiquidData', 'alarmHarmfulData'],
+        dimension: ['date']
+      },
+      chartDataLine: {
+        columns: ['date', 'alarmWellData', 'alarmLiquidData', 'alarmHarmfulData'],
+        rows: []
+      }
+    }
+  },
+  created() {
+    this.fetchDeviceTypeLine()
+  },
+  mounted() {
+    this.tableList = [
+      {
+        value: '224',
+        name: '井盖开启'
+      },
+      {
+        value: '22',
+        name: '燃气浓度超限'
+      },
+      {
+        value: '1',
+        name: '液位超限'
+      },
+      {
+        value: '4',
+        name: '有害气体超标'
+      }
+    ]
+  },
+  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
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.tableStyle{
+  padding: 100px 10px;
+}
+.flagBoxStyle {
+  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);
+}
+
+</style>
diff --git a/src/views/dataView/components/deviceCountView.vue b/src/views/dataView/components/deviceCountView.vue
new file mode 100644
index 0000000..b657e8d
--- /dev/null
+++ b/src/views/dataView/components/deviceCountView.vue
@@ -0,0 +1,119 @@
+<template>
+  <div>
+    <div class="flagBoxStyle">
+      <div class="flagStyle" />
+      <div>设备数量分析</div>
+    </div>
+    <el-row>
+      <el-col :span="16">
+        <ve-histogram
+          :data="chartData"
+          :grid="grid"
+          :extend="extend"
+          :settings="chartSettings"
+        />
+      </el-col>
+      <el-col :span="8">
+        <ve-pie
+          :data="chartDataPie"
+          :extend="extendPie"
+        />
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import { deviceStaticsByOnline } from '@/api/data/dataStatics'
+export default {
+  name: 'DeviceCountView',
+  data() {
+    return {
+      online: 0,
+      offline: 0,
+      // 饼状图
+      extendPie: {
+        series: {
+          label: { show: true, position: 'outside', formatter: '{b}:{c}' },
+          radius: '45%'
+        }
+      },
+      chartDataPie: {
+        columns: ['onlineStatus', 'deviceCount'],
+        rows: []
+      },
+      // 柱状图
+      extend: {
+        xAxis: {
+          axisLabel: {
+            rotate: 30,
+            margin: 30,
+            textStyle: {
+              align: 'center'
+            }
+          }
+        },
+        series: {
+          label: { show: true, position: 'top' },
+          barMaxWidth: 35 // 最大柱宽度
+        }
+      },
+      grid: {
+        right: 60
+      },
+      chartSettings: {
+        itemStyle: {
+          'barCategoryGap': 5
+        },
+        barWidth: 15,
+        labelMap: {
+          'deviceType': '权属单位',
+          'offline': '设备数量（个）'
+        },
+        dimension: ['deviceType'],
+        metrics: ['offline']
+      },
+      chartData: {
+        columns: ['deviceType', 'offline'],
+        rows: []
+      }
+    }
+  },
+  created() {
+    this.fetchDeviceType()
+  },
+  methods: {
+    fetchDeviceType() {
+      deviceStaticsByOnline().then(response => {
+        response.data.forEach((item) => {
+          this.online += item.online
+          this.offline += item.offline
+        })
+        this.chartData.rows = response.data
+        this.chartDataPie.rows = [
+          { 'onlineStatus': '在线', 'deviceCount': this.online },
+          { 'onlineStatus': '离线', 'deviceCount': this.offline }
+        ]
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.flagBoxStyle {
+  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);
+}
+
+</style>
diff --git a/src/views/dataView/components/jobView.vue b/src/views/dataView/components/jobView.vue
new file mode 100644
index 0000000..d0be0dd
--- /dev/null
+++ b/src/views/dataView/components/jobView.vue
@@ -0,0 +1,92 @@
+<template>
+  <div>
+    <div class="flagBoxStyle">
+      <div class="flagStyle" />
+      <div>井数量分析</div>
+    </div>
+    <el-row>
+      <el-col>
+        <ve-bar
+          :data="chartData"
+          :grid="grid"
+          :extend="extend"
+          :settings="chartSettings"
+        />
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import { deviceStaticsByOnline } from '@/api/data/dataStatics'
+export default {
+  name: 'JobView',
+  data() {
+    return {
+      // 柱状图
+      extend: {
+        xAxis: {
+          axisLabel: {
+            rotate: 30,
+            margin: 30,
+            textStyle: {
+              align: 'center'
+            }
+          }
+        },
+        series: {
+          label: { show: true, position: 'top' },
+          barMaxWidth: 35 // 最大柱宽度
+        }
+      },
+      grid: {
+        right: 60
+      },
+      chartSettings: {
+        itemStyle: {
+          'barCategoryGap': 5
+        },
+        barWidth: 15,
+        labelMap: {
+          'deviceType': '权属单位',
+          'offline': '设备数量（个）'
+        },
+        dimension: ['deviceType'],
+        metrics: ['offline']
+      },
+      chartData: {
+        columns: ['deviceType', 'offline'],
+        rows: []
+      }
+    }
+  },
+  created() {
+    this.fetchDeviceType()
+  },
+  methods: {
+    fetchDeviceType() {
+      deviceStaticsByOnline().then(response => {
+        this.chartData.rows = response.data
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.flagBoxStyle {
+  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);
+}
+
+</style>

diff --git a/mock/system/user.js b/mock/system/user.js
index abd593d..747ef61 100644
--- a/mock/system/user.js
+++ b/mock/system/user.js
@@ -195,6 +195,7 @@
     { 'code': 'well_bfcf', 'icon': '', 'id': '1138616121200189442', 'ismenu': '0', 'levels': 11, 'name': '布防撤防', 'num': 0, 'parentId': '1138377674778685442', 'resourceType': '04', 'url': '/well/bfcf' },
     { 'code': 'alarms_by_well', 'icon': '', 'id': '1138702100355313665', 'ismenu': '0', 'levels': 11, 'name': '获取某闸井告警信息', 'num': 0, 'parentId': '1138701347507105794', 'resourceType': '04', 'url': '/overview/alarmsByWell' },
     { 'code': 'alarm_statics', 'icon': '', 'id': '1138703677266817025', 'ismenu': '1', 'levels': 11, 'name': '报警统计', 'num': 0, 'parentId': '1138702379389775873', 'resourceType': '03', 'url': '/alarm/statics' },
+    { 'code': 'alarm_statics', 'icon': '', 'id': '1138703677266817005', 'ismenu': '1', 'levels': 11, 'name': '数据概览', 'num': 0, 'parentId': '1138702379389775873', 'resourceType': '03', 'url': '/dataView/statics' },
     { 'code': 'alarm_static_by_dept', 'icon': '', 'id': '1139376799592734721', 'ismenu': '0', 'levels': 11, 'name': '根据部门统计报警', 'num': 0, 'parentId': '1138702379389775873', 'resourceType': '04', 'url': '/statics/alarmsByDept' },
     { 'code': 'concentrator_add', 'icon': '', 'id': '1138693099123077122', 'ismenu': '0', 'levels': 11, 'name': '新增集中器', 'num': 0, 'parentId': '1138692702442582017', 'resourceType': '04', 'url': '/concentrator/add' },
     { 'code': 'job_export', 'icon': '', 'id': '1138699769542832130', 'ismenu': '0', 'levels': 11, 'name': '导出工单列表', 'num': 0, 'parentId': '1138699051712868353', 'resourceType': '04', 'url': '/job/export' },
diff --git a/src/components/BigData/Card/index.vue b/src/components/BigData/Card/index.vue
index 07ee165..b9e5ee6 100644
--- a/src/components/BigData/Card/index.vue
+++ b/src/components/BigData/Card/index.vue
@@ -8,8 +8,9 @@
         <div class="card-panel-text">
           {{ title }}
         </div>
-        <div class="card-panel-num" >
-          {{ context }}
+        <div class="card-panel-num">
+          <span>{{ context }}</span>
+          <span>{{ flags }}</span>
         </div>
       </div>
     </div>
@@ -24,6 +25,10 @@
       type: String,
       default: '标题'
     },
+    flags: {
+      type: String,
+      default: '单位'
+    },
     subtitle: {
       type: String,
       default: ''
diff --git a/src/components/Hamburger/index.vue b/src/components/Hamburger/index.vue
index 7c358e2..6a9236c 100644
--- a/src/components/Hamburger/index.vue
+++ b/src/components/Hamburger/index.vue
@@ -36,6 +36,7 @@
     vertical-align: middle;
     width: 20px;
     height: 20px;
+    cursor: pointer;
   }
 
   .hamburger.is-active {
diff --git a/src/router/modules/well.js b/src/router/modules/well.js
index b5b6e82..a92ff3c 100644
--- a/src/router/modules/well.js
+++ b/src/router/modules/well.js
@@ -179,16 +179,22 @@
     },
     children: [
       {
+        path: '/dataView',
+        name: 'DataView',
+        component: () => import('@/views/dataView/dataView'),
+        meta: { title: '数据概览', icon: 'icon-config', permission: ['/dataView/statics'] }
+      },
+      {
         path: '/dataManage',
         name: 'DataManage',
         component: () => import('@/views/dataManage/dataManage'),
-        meta: { title: '历史数据', icon: 'icon-config', permission: ['/datalist'] }
+        meta: { title: '数据列表', icon: 'icon-config', permission: ['/datalist'] }
       },
       {
         path: '/dataAnalyse',
         name: 'DataAnalyse',
         component: () => import('@/views/dataStatics/dataStatics'),
-        meta: { title: '数据分析', icon: 'icon-config', permission: ['/dataAnalyse'] }
+        meta: { title: '数据曲线', icon: 'icon-config', permission: ['/dataAnalyse'] }
       },
       {
         path: '/deviceStatics',
diff --git a/src/store/modules/settings.js b/src/store/modules/settings.js
index 856b38a..421e31b 100644
--- a/src/store/modules/settings.js
+++ b/src/store/modules/settings.js
@@ -1,12 +1,13 @@
 import variables from '@/styles/element-variables.scss'
 import defaultSettings from '@/settings'
 
-const { showSettings, tagsView, breadcrumb, fixedHeader, sidebarLogo } = defaultSettings
+// const { showSettings, tagsView, breadcrumb, fixedHeader, sidebarLogo } = defaultSettings
+const { showSettings, tagsView, fixedHeader, sidebarLogo } = defaultSettings
 
 const state = {
   theme: variables.theme, // 主题
   showSettings: showSettings, // 是否显示设置按钮
-  breadcrumb: breadcrumb, // 是否显示面包屑
+  breadcrumb: true, // 是否显示面包屑
   tagsView: tagsView, // 是否显示tagsView
   fixedHeader: fixedHeader, // 是否固定面包屑
   sidebarLogo: sidebarLogo, // 是否显示logo
diff --git a/src/views/dataView/components/alarmStatus.vue b/src/views/dataView/components/alarmStatus.vue
new file mode 100644
index 0000000..94f7410
--- /dev/null
+++ b/src/views/dataView/components/alarmStatus.vue
@@ -0,0 +1,264 @@
+<template>
+  <el-row :gutter="40" class="panel-group">
+    <div>
+      <el-col>
+        <div class="flagBoxStyle">
+          <div class="flagStyle" />
+          <div>报警情况</div>
+        </div>
+      </el-col>
+    </div>
+    <div v-for="card in dataGroup" :key="card.title">
+      <el-col v-if="hasPerm(card.permission)" class="card-panel-col">
+        <card :title="card.title" :context="card.context" :flags="card.flags" :icon="card.icon" :color="card.color" @click.native="goPage(card.path)" />
+      </el-col>
+    </div>
+    <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-row>
+</template>
+
+<script>
+import Card from '@/components/BigData/Card'
+import { wellCountByBfzt } from '@/api/well/well'
+import { deviceStaticByStatus, alarmNowStatic } from '@/api/data/dataStatics'
+import { jobCountByStatus } from '@/api/alarm/job'
+export default {
+  name: 'AlarmStatus',
+  components: {
+    Card
+  },
+  data() {
+    return {
+      tableList: [],
+      dataGroup: [
+        {
+          title: '井',
+          context: '--',
+          flags: '条',
+          icon: 'icon-alarm',
+          color: '#40c9c6',
+          path: '/wellList',
+          permission: '/well/list'
+        }
+        // {
+        //   title: '设备',
+        //   context: '--',
+        //   flags: '个',
+        //   icon: 'icon-device',
+        //   color: '#36a3f7',
+        //   path: '/deviceList',
+        //   permission: '/device/list'
+        // },
+        // {
+        //   title: '今日数据',
+        //   context: '--',
+        //   flags: '条',
+        //   icon: 'icon-alarm',
+        //   color: '#f4516c',
+        //   path: '/alarmNow',
+        //   permission: '/alarm/now'
+        // },
+        // {
+        //   title: '离线设备',
+        //   context: '--',
+        //   flags: '个',
+        //   icon: 'icon-order',
+        //   color: '#f4516c',
+        //   path: '/listJob',
+        //   permission: '/job/list'
+        // }
+      ]
+    }
+  },
+  created() {
+    this.getWellCount()
+    this.getDeviceCount()
+    this.getAlarmCount()
+    this.getJobCount()
+  },
+  mounted() {
+    this.tableList = [
+      {
+        value: 'WELL-001',
+        name: '液位超限'
+      },
+      {
+        value: 'WELL-002',
+        name: '燃气浓度超限'
+      },
+      {
+        value: 'WELL-003',
+        name: '井盖开启'
+      },
+      {
+        value: 'WELL-004',
+        name: '井盖开启'
+      }
+    ]
+  },
+  methods: {
+    refresh() {
+      this.getAlarmCount()
+      this.getJobCount()
+    },
+    goPage(path) {
+      this.$router.push(path)
+    },
+    getWellCount() {
+      wellCountByBfzt().then(response => {
+        this.dataGroup[0].context = response.data.total
+      })
+    },
+    getDeviceCount() {
+      deviceStaticByStatus().then(response => {
+        this.dataGroup[1].context = response.data.total
+      })
+    },
+    getAlarmCount() {
+      alarmNowStatic().then(response => {
+        this.dataGroup[2].context = response.data.total
+      })
+    },
+    getJobCount() {
+      jobCountByStatus().then(response => {
+        const data = response.data
+        const total = data.beforeGet + data.beforeConfirm + data.inHandle
+        this.dataGroup[3].context = total
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.tableStyle{
+  padding: 20px;
+}
+.flagBoxStyle {
+  display: flex;
+  margin-bottom: 20px;
+  margin-top: -30px;
+}
+.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;
+  }
+
+  .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;
+      }
+    }
+  }
+}
+
+@media (max-width:550px) {
+  .card-panel-description {
+    display: none;
+  }
+
+  .card-panel-icon-wrapper {
+    float: none !important;
+    width: 100%;
+    height: 100%;
+    margin: 0 !important;
+
+    .svg-icon {
+      display: block;
+      margin: 14px auto !important;
+      float: none !important;
+    }
+  }
+}
+</style>
diff --git a/src/views/dataView/components/alarmView.vue b/src/views/dataView/components/alarmView.vue
new file mode 100644
index 0000000..60650e9
--- /dev/null
+++ b/src/views/dataView/components/alarmView.vue
@@ -0,0 +1,106 @@
+<template>
+  <div>
+    <div class="flagBoxStyle">
+      <div class="flagStyle" />
+      <div>报警分析</div>
+    </div>
+    <el-row>
+      <el-col>
+        <ve-line
+          :data="chartDataLine"
+          :settings="chartSettingsLine"
+        />
+      </el-col>
+      <el-col>
+        <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>
+
+<script>
+import { alarmStaticsByContent } from '@/api/alarm/deviceStatics'
+export default {
+  name: 'AlarmStaticsByType',
+  data() {
+    return {
+      tableList: [],
+      // 折线图
+      chartSettingsLine: {
+        labelMap: {
+          'alarmWellData': '井盖开盖报警',
+          'alarmLiquidData': '液位超限报警',
+          'alarmHarmfulData': '有害气体超标报警'
+        },
+        metrics: ['alarmWellData', 'alarmLiquidData', 'alarmHarmfulData'],
+        dimension: ['date']
+      },
+      chartDataLine: {
+        columns: ['date', 'alarmWellData', 'alarmLiquidData', 'alarmHarmfulData'],
+        rows: []
+      }
+    }
+  },
+  created() {
+    this.fetchDeviceTypeLine()
+  },
+  mounted() {
+    this.tableList = [
+      {
+        value: '224',
+        name: '井盖开启'
+      },
+      {
+        value: '22',
+        name: '燃气浓度超限'
+      },
+      {
+        value: '1',
+        name: '液位超限'
+      },
+      {
+        value: '4',
+        name: '有害气体超标'
+      }
+    ]
+  },
+  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
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.tableStyle{
+  padding: 100px 10px;
+}
+.flagBoxStyle {
+  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);
+}
+
+</style>
diff --git a/src/views/dataView/components/deviceCountView.vue b/src/views/dataView/components/deviceCountView.vue
new file mode 100644
index 0000000..b657e8d
--- /dev/null
+++ b/src/views/dataView/components/deviceCountView.vue
@@ -0,0 +1,119 @@
+<template>
+  <div>
+    <div class="flagBoxStyle">
+      <div class="flagStyle" />
+      <div>设备数量分析</div>
+    </div>
+    <el-row>
+      <el-col :span="16">
+        <ve-histogram
+          :data="chartData"
+          :grid="grid"
+          :extend="extend"
+          :settings="chartSettings"
+        />
+      </el-col>
+      <el-col :span="8">
+        <ve-pie
+          :data="chartDataPie"
+          :extend="extendPie"
+        />
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import { deviceStaticsByOnline } from '@/api/data/dataStatics'
+export default {
+  name: 'DeviceCountView',
+  data() {
+    return {
+      online: 0,
+      offline: 0,
+      // 饼状图
+      extendPie: {
+        series: {
+          label: { show: true, position: 'outside', formatter: '{b}:{c}' },
+          radius: '45%'
+        }
+      },
+      chartDataPie: {
+        columns: ['onlineStatus', 'deviceCount'],
+        rows: []
+      },
+      // 柱状图
+      extend: {
+        xAxis: {
+          axisLabel: {
+            rotate: 30,
+            margin: 30,
+            textStyle: {
+              align: 'center'
+            }
+          }
+        },
+        series: {
+          label: { show: true, position: 'top' },
+          barMaxWidth: 35 // 最大柱宽度
+        }
+      },
+      grid: {
+        right: 60
+      },
+      chartSettings: {
+        itemStyle: {
+          'barCategoryGap': 5
+        },
+        barWidth: 15,
+        labelMap: {
+          'deviceType': '权属单位',
+          'offline': '设备数量（个）'
+        },
+        dimension: ['deviceType'],
+        metrics: ['offline']
+      },
+      chartData: {
+        columns: ['deviceType', 'offline'],
+        rows: []
+      }
+    }
+  },
+  created() {
+    this.fetchDeviceType()
+  },
+  methods: {
+    fetchDeviceType() {
+      deviceStaticsByOnline().then(response => {
+        response.data.forEach((item) => {
+          this.online += item.online
+          this.offline += item.offline
+        })
+        this.chartData.rows = response.data
+        this.chartDataPie.rows = [
+          { 'onlineStatus': '在线', 'deviceCount': this.online },
+          { 'onlineStatus': '离线', 'deviceCount': this.offline }
+        ]
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.flagBoxStyle {
+  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);
+}
+
+</style>
diff --git a/src/views/dataView/components/jobView.vue b/src/views/dataView/components/jobView.vue
new file mode 100644
index 0000000..d0be0dd
--- /dev/null
+++ b/src/views/dataView/components/jobView.vue
@@ -0,0 +1,92 @@
+<template>
+  <div>
+    <div class="flagBoxStyle">
+      <div class="flagStyle" />
+      <div>井数量分析</div>
+    </div>
+    <el-row>
+      <el-col>
+        <ve-bar
+          :data="chartData"
+          :grid="grid"
+          :extend="extend"
+          :settings="chartSettings"
+        />
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import { deviceStaticsByOnline } from '@/api/data/dataStatics'
+export default {
+  name: 'JobView',
+  data() {
+    return {
+      // 柱状图
+      extend: {
+        xAxis: {
+          axisLabel: {
+            rotate: 30,
+            margin: 30,
+            textStyle: {
+              align: 'center'
+            }
+          }
+        },
+        series: {
+          label: { show: true, position: 'top' },
+          barMaxWidth: 35 // 最大柱宽度
+        }
+      },
+      grid: {
+        right: 60
+      },
+      chartSettings: {
+        itemStyle: {
+          'barCategoryGap': 5
+        },
+        barWidth: 15,
+        labelMap: {
+          'deviceType': '权属单位',
+          'offline': '设备数量（个）'
+        },
+        dimension: ['deviceType'],
+        metrics: ['offline']
+      },
+      chartData: {
+        columns: ['deviceType', 'offline'],
+        rows: []
+      }
+    }
+  },
+  created() {
+    this.fetchDeviceType()
+  },
+  methods: {
+    fetchDeviceType() {
+      deviceStaticsByOnline().then(response => {
+        this.chartData.rows = response.data
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.flagBoxStyle {
+  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);
+}
+
+</style>
diff --git a/src/views/dataView/components/panelGroup.vue b/src/views/dataView/components/panelGroup.vue
new file mode 100644
index 0000000..9172cc9
--- /dev/null
+++ b/src/views/dataView/components/panelGroup.vue
@@ -0,0 +1,250 @@
+<template>
+  <el-row :gutter="20" class="panel-group">
+    <div>
+      <el-col>
+        <div class="flagBoxStyle">
+          <div class="flagStyle" />
+          <div>数据总体情况</div>
+        </div>
+      </el-col>
+    </div>
+    <div v-for="card in dataGroup" :key="card.title">
+      <el-col v-if="hasPerm(card.permission)" :xs="12" :sm="12" :lg="6" 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 slot-scope="scope">
+            <span>{{ scope.row[column.value] }}</span>
+          </template>
+        </el-table-column>
+      </el-table>
+    </el-dialog>
+  </el-row>
+</template>
+
+<script>
+import Card from '@/components/BigData/Card'
+import { wellCountByBfzt } from '@/api/well/well'
+import { deviceStaticByStatus, alarmNowStatic } from '@/api/data/dataStatics'
+import { jobCountByStatus } from '@/api/alarm/job'
+export default {
+  name: 'PanelGroup',
+  components: { Card },
+  data() {
+    return {
+      dialogFormVisible: false,
+      listLoading: false,
+      dataGroup: [
+        {
+          title: '井',
+          context: '--',
+          flags: '条',
+          icon: 'icon-well',
+          color: '#40c9c6',
+          permission: '/well/list'
+        },
+        {
+          title: '设备',
+          context: '--',
+          flags: '个',
+          icon: 'icon-device',
+          color: '#36a3f7',
+          permission: '/device/list'
+        },
+        {
+          title: '今日数据',
+          context: '--',
+          flags: '条',
+          icon: 'icon-alarm',
+          color: '#f4516c',
+          permission: '/alarm/now'
+        },
+        {
+          title: '离线设备',
+          context: '--',
+          flags: '个',
+          icon: 'icon-order',
+          color: '#f4516c',
+          permission: '/job/list'
+        }
+      ]
+    }
+  },
+  created() {
+    this.getWellCount()
+    this.getDeviceCount()
+    this.getAlarmCount()
+    this.getJobCount()
+  },
+  methods: {
+    goPage(card) {
+      if (card.title === '离线设备') {
+        this.dialogFormVisible = true
+      }
+    },
+    getWellCount() {
+      wellCountByBfzt().then(response => {
+        this.dataGroup[0].context = response.data.total
+      })
+    },
+    getDeviceCount() {
+      deviceStaticByStatus().then(response => {
+        this.dataGroup[1].context = response.data.total
+      })
+    },
+    getAlarmCount() {
+      alarmNowStatic().then(response => {
+        this.dataGroup[2].context = response.data.total
+      })
+    },
+    getJobCount() {
+      jobCountByStatus().then(response => {
+        const data = response.data
+        const total = data.beforeGet + data.beforeConfirm + data.inHandle
+        this.dataGroup[3].context = total
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.flagBoxStyle {
+  display: flex;
+  margin-bottom: 20px;
+  margin-top: -30px;
+}
+.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;
+  }
+  .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;
+      }
+    }
+  }
+}
+
+@media (max-width:550px) {
+  .card-panel-description {
+    display: none;
+  }
+
+  .card-panel-icon-wrapper {
+    float: none !important;
+    width: 100%;
+    height: 100%;
+    margin: 0 !important;
+
+    .svg-icon {
+      display: block;
+      margin: 14px auto !important;
+      float: none !important;
+    }
+  }
+}
+</style>

diff --git a/mock/system/user.js b/mock/system/user.js
index abd593d..747ef61 100644
--- a/mock/system/user.js
+++ b/mock/system/user.js
@@ -195,6 +195,7 @@
     { 'code': 'well_bfcf', 'icon': '', 'id': '1138616121200189442', 'ismenu': '0', 'levels': 11, 'name': '布防撤防', 'num': 0, 'parentId': '1138377674778685442', 'resourceType': '04', 'url': '/well/bfcf' },
     { 'code': 'alarms_by_well', 'icon': '', 'id': '1138702100355313665', 'ismenu': '0', 'levels': 11, 'name': '获取某闸井告警信息', 'num': 0, 'parentId': '1138701347507105794', 'resourceType': '04', 'url': '/overview/alarmsByWell' },
     { 'code': 'alarm_statics', 'icon': '', 'id': '1138703677266817025', 'ismenu': '1', 'levels': 11, 'name': '报警统计', 'num': 0, 'parentId': '1138702379389775873', 'resourceType': '03', 'url': '/alarm/statics' },
+    { 'code': 'alarm_statics', 'icon': '', 'id': '1138703677266817005', 'ismenu': '1', 'levels': 11, 'name': '数据概览', 'num': 0, 'parentId': '1138702379389775873', 'resourceType': '03', 'url': '/dataView/statics' },
     { 'code': 'alarm_static_by_dept', 'icon': '', 'id': '1139376799592734721', 'ismenu': '0', 'levels': 11, 'name': '根据部门统计报警', 'num': 0, 'parentId': '1138702379389775873', 'resourceType': '04', 'url': '/statics/alarmsByDept' },
     { 'code': 'concentrator_add', 'icon': '', 'id': '1138693099123077122', 'ismenu': '0', 'levels': 11, 'name': '新增集中器', 'num': 0, 'parentId': '1138692702442582017', 'resourceType': '04', 'url': '/concentrator/add' },
     { 'code': 'job_export', 'icon': '', 'id': '1138699769542832130', 'ismenu': '0', 'levels': 11, 'name': '导出工单列表', 'num': 0, 'parentId': '1138699051712868353', 'resourceType': '04', 'url': '/job/export' },
diff --git a/src/components/BigData/Card/index.vue b/src/components/BigData/Card/index.vue
index 07ee165..b9e5ee6 100644
--- a/src/components/BigData/Card/index.vue
+++ b/src/components/BigData/Card/index.vue
@@ -8,8 +8,9 @@
         <div class="card-panel-text">
           {{ title }}
         </div>
-        <div class="card-panel-num" >
-          {{ context }}
+        <div class="card-panel-num">
+          <span>{{ context }}</span>
+          <span>{{ flags }}</span>
         </div>
       </div>
     </div>
@@ -24,6 +25,10 @@
       type: String,
       default: '标题'
     },
+    flags: {
+      type: String,
+      default: '单位'
+    },
     subtitle: {
       type: String,
       default: ''
diff --git a/src/components/Hamburger/index.vue b/src/components/Hamburger/index.vue
index 7c358e2..6a9236c 100644
--- a/src/components/Hamburger/index.vue
+++ b/src/components/Hamburger/index.vue
@@ -36,6 +36,7 @@
     vertical-align: middle;
     width: 20px;
     height: 20px;
+    cursor: pointer;
   }
 
   .hamburger.is-active {
diff --git a/src/router/modules/well.js b/src/router/modules/well.js
index b5b6e82..a92ff3c 100644
--- a/src/router/modules/well.js
+++ b/src/router/modules/well.js
@@ -179,16 +179,22 @@
     },
     children: [
       {
+        path: '/dataView',
+        name: 'DataView',
+        component: () => import('@/views/dataView/dataView'),
+        meta: { title: '数据概览', icon: 'icon-config', permission: ['/dataView/statics'] }
+      },
+      {
         path: '/dataManage',
         name: 'DataManage',
         component: () => import('@/views/dataManage/dataManage'),
-        meta: { title: '历史数据', icon: 'icon-config', permission: ['/datalist'] }
+        meta: { title: '数据列表', icon: 'icon-config', permission: ['/datalist'] }
       },
       {
         path: '/dataAnalyse',
         name: 'DataAnalyse',
         component: () => import('@/views/dataStatics/dataStatics'),
-        meta: { title: '数据分析', icon: 'icon-config', permission: ['/dataAnalyse'] }
+        meta: { title: '数据曲线', icon: 'icon-config', permission: ['/dataAnalyse'] }
       },
       {
         path: '/deviceStatics',
diff --git a/src/store/modules/settings.js b/src/store/modules/settings.js
index 856b38a..421e31b 100644
--- a/src/store/modules/settings.js
+++ b/src/store/modules/settings.js
@@ -1,12 +1,13 @@
 import variables from '@/styles/element-variables.scss'
 import defaultSettings from '@/settings'
 
-const { showSettings, tagsView, breadcrumb, fixedHeader, sidebarLogo } = defaultSettings
+// const { showSettings, tagsView, breadcrumb, fixedHeader, sidebarLogo } = defaultSettings
+const { showSettings, tagsView, fixedHeader, sidebarLogo } = defaultSettings
 
 const state = {
   theme: variables.theme, // 主题
   showSettings: showSettings, // 是否显示设置按钮
-  breadcrumb: breadcrumb, // 是否显示面包屑
+  breadcrumb: true, // 是否显示面包屑
   tagsView: tagsView, // 是否显示tagsView
   fixedHeader: fixedHeader, // 是否固定面包屑
   sidebarLogo: sidebarLogo, // 是否显示logo
diff --git a/src/views/dataView/components/alarmStatus.vue b/src/views/dataView/components/alarmStatus.vue
new file mode 100644
index 0000000..94f7410
--- /dev/null
+++ b/src/views/dataView/components/alarmStatus.vue
@@ -0,0 +1,264 @@
+<template>
+  <el-row :gutter="40" class="panel-group">
+    <div>
+      <el-col>
+        <div class="flagBoxStyle">
+          <div class="flagStyle" />
+          <div>报警情况</div>
+        </div>
+      </el-col>
+    </div>
+    <div v-for="card in dataGroup" :key="card.title">
+      <el-col v-if="hasPerm(card.permission)" class="card-panel-col">
+        <card :title="card.title" :context="card.context" :flags="card.flags" :icon="card.icon" :color="card.color" @click.native="goPage(card.path)" />
+      </el-col>
+    </div>
+    <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-row>
+</template>
+
+<script>
+import Card from '@/components/BigData/Card'
+import { wellCountByBfzt } from '@/api/well/well'
+import { deviceStaticByStatus, alarmNowStatic } from '@/api/data/dataStatics'
+import { jobCountByStatus } from '@/api/alarm/job'
+export default {
+  name: 'AlarmStatus',
+  components: {
+    Card
+  },
+  data() {
+    return {
+      tableList: [],
+      dataGroup: [
+        {
+          title: '井',
+          context: '--',
+          flags: '条',
+          icon: 'icon-alarm',
+          color: '#40c9c6',
+          path: '/wellList',
+          permission: '/well/list'
+        }
+        // {
+        //   title: '设备',
+        //   context: '--',
+        //   flags: '个',
+        //   icon: 'icon-device',
+        //   color: '#36a3f7',
+        //   path: '/deviceList',
+        //   permission: '/device/list'
+        // },
+        // {
+        //   title: '今日数据',
+        //   context: '--',
+        //   flags: '条',
+        //   icon: 'icon-alarm',
+        //   color: '#f4516c',
+        //   path: '/alarmNow',
+        //   permission: '/alarm/now'
+        // },
+        // {
+        //   title: '离线设备',
+        //   context: '--',
+        //   flags: '个',
+        //   icon: 'icon-order',
+        //   color: '#f4516c',
+        //   path: '/listJob',
+        //   permission: '/job/list'
+        // }
+      ]
+    }
+  },
+  created() {
+    this.getWellCount()
+    this.getDeviceCount()
+    this.getAlarmCount()
+    this.getJobCount()
+  },
+  mounted() {
+    this.tableList = [
+      {
+        value: 'WELL-001',
+        name: '液位超限'
+      },
+      {
+        value: 'WELL-002',
+        name: '燃气浓度超限'
+      },
+      {
+        value: 'WELL-003',
+        name: '井盖开启'
+      },
+      {
+        value: 'WELL-004',
+        name: '井盖开启'
+      }
+    ]
+  },
+  methods: {
+    refresh() {
+      this.getAlarmCount()
+      this.getJobCount()
+    },
+    goPage(path) {
+      this.$router.push(path)
+    },
+    getWellCount() {
+      wellCountByBfzt().then(response => {
+        this.dataGroup[0].context = response.data.total
+      })
+    },
+    getDeviceCount() {
+      deviceStaticByStatus().then(response => {
+        this.dataGroup[1].context = response.data.total
+      })
+    },
+    getAlarmCount() {
+      alarmNowStatic().then(response => {
+        this.dataGroup[2].context = response.data.total
+      })
+    },
+    getJobCount() {
+      jobCountByStatus().then(response => {
+        const data = response.data
+        const total = data.beforeGet + data.beforeConfirm + data.inHandle
+        this.dataGroup[3].context = total
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.tableStyle{
+  padding: 20px;
+}
+.flagBoxStyle {
+  display: flex;
+  margin-bottom: 20px;
+  margin-top: -30px;
+}
+.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;
+  }
+
+  .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;
+      }
+    }
+  }
+}
+
+@media (max-width:550px) {
+  .card-panel-description {
+    display: none;
+  }
+
+  .card-panel-icon-wrapper {
+    float: none !important;
+    width: 100%;
+    height: 100%;
+    margin: 0 !important;
+
+    .svg-icon {
+      display: block;
+      margin: 14px auto !important;
+      float: none !important;
+    }
+  }
+}
+</style>
diff --git a/src/views/dataView/components/alarmView.vue b/src/views/dataView/components/alarmView.vue
new file mode 100644
index 0000000..60650e9
--- /dev/null
+++ b/src/views/dataView/components/alarmView.vue
@@ -0,0 +1,106 @@
+<template>
+  <div>
+    <div class="flagBoxStyle">
+      <div class="flagStyle" />
+      <div>报警分析</div>
+    </div>
+    <el-row>
+      <el-col>
+        <ve-line
+          :data="chartDataLine"
+          :settings="chartSettingsLine"
+        />
+      </el-col>
+      <el-col>
+        <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>
+
+<script>
+import { alarmStaticsByContent } from '@/api/alarm/deviceStatics'
+export default {
+  name: 'AlarmStaticsByType',
+  data() {
+    return {
+      tableList: [],
+      // 折线图
+      chartSettingsLine: {
+        labelMap: {
+          'alarmWellData': '井盖开盖报警',
+          'alarmLiquidData': '液位超限报警',
+          'alarmHarmfulData': '有害气体超标报警'
+        },
+        metrics: ['alarmWellData', 'alarmLiquidData', 'alarmHarmfulData'],
+        dimension: ['date']
+      },
+      chartDataLine: {
+        columns: ['date', 'alarmWellData', 'alarmLiquidData', 'alarmHarmfulData'],
+        rows: []
+      }
+    }
+  },
+  created() {
+    this.fetchDeviceTypeLine()
+  },
+  mounted() {
+    this.tableList = [
+      {
+        value: '224',
+        name: '井盖开启'
+      },
+      {
+        value: '22',
+        name: '燃气浓度超限'
+      },
+      {
+        value: '1',
+        name: '液位超限'
+      },
+      {
+        value: '4',
+        name: '有害气体超标'
+      }
+    ]
+  },
+  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
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.tableStyle{
+  padding: 100px 10px;
+}
+.flagBoxStyle {
+  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);
+}
+
+</style>
diff --git a/src/views/dataView/components/deviceCountView.vue b/src/views/dataView/components/deviceCountView.vue
new file mode 100644
index 0000000..b657e8d
--- /dev/null
+++ b/src/views/dataView/components/deviceCountView.vue
@@ -0,0 +1,119 @@
+<template>
+  <div>
+    <div class="flagBoxStyle">
+      <div class="flagStyle" />
+      <div>设备数量分析</div>
+    </div>
+    <el-row>
+      <el-col :span="16">
+        <ve-histogram
+          :data="chartData"
+          :grid="grid"
+          :extend="extend"
+          :settings="chartSettings"
+        />
+      </el-col>
+      <el-col :span="8">
+        <ve-pie
+          :data="chartDataPie"
+          :extend="extendPie"
+        />
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import { deviceStaticsByOnline } from '@/api/data/dataStatics'
+export default {
+  name: 'DeviceCountView',
+  data() {
+    return {
+      online: 0,
+      offline: 0,
+      // 饼状图
+      extendPie: {
+        series: {
+          label: { show: true, position: 'outside', formatter: '{b}:{c}' },
+          radius: '45%'
+        }
+      },
+      chartDataPie: {
+        columns: ['onlineStatus', 'deviceCount'],
+        rows: []
+      },
+      // 柱状图
+      extend: {
+        xAxis: {
+          axisLabel: {
+            rotate: 30,
+            margin: 30,
+            textStyle: {
+              align: 'center'
+            }
+          }
+        },
+        series: {
+          label: { show: true, position: 'top' },
+          barMaxWidth: 35 // 最大柱宽度
+        }
+      },
+      grid: {
+        right: 60
+      },
+      chartSettings: {
+        itemStyle: {
+          'barCategoryGap': 5
+        },
+        barWidth: 15,
+        labelMap: {
+          'deviceType': '权属单位',
+          'offline': '设备数量（个）'
+        },
+        dimension: ['deviceType'],
+        metrics: ['offline']
+      },
+      chartData: {
+        columns: ['deviceType', 'offline'],
+        rows: []
+      }
+    }
+  },
+  created() {
+    this.fetchDeviceType()
+  },
+  methods: {
+    fetchDeviceType() {
+      deviceStaticsByOnline().then(response => {
+        response.data.forEach((item) => {
+          this.online += item.online
+          this.offline += item.offline
+        })
+        this.chartData.rows = response.data
+        this.chartDataPie.rows = [
+          { 'onlineStatus': '在线', 'deviceCount': this.online },
+          { 'onlineStatus': '离线', 'deviceCount': this.offline }
+        ]
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.flagBoxStyle {
+  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);
+}
+
+</style>
diff --git a/src/views/dataView/components/jobView.vue b/src/views/dataView/components/jobView.vue
new file mode 100644
index 0000000..d0be0dd
--- /dev/null
+++ b/src/views/dataView/components/jobView.vue
@@ -0,0 +1,92 @@
+<template>
+  <div>
+    <div class="flagBoxStyle">
+      <div class="flagStyle" />
+      <div>井数量分析</div>
+    </div>
+    <el-row>
+      <el-col>
+        <ve-bar
+          :data="chartData"
+          :grid="grid"
+          :extend="extend"
+          :settings="chartSettings"
+        />
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import { deviceStaticsByOnline } from '@/api/data/dataStatics'
+export default {
+  name: 'JobView',
+  data() {
+    return {
+      // 柱状图
+      extend: {
+        xAxis: {
+          axisLabel: {
+            rotate: 30,
+            margin: 30,
+            textStyle: {
+              align: 'center'
+            }
+          }
+        },
+        series: {
+          label: { show: true, position: 'top' },
+          barMaxWidth: 35 // 最大柱宽度
+        }
+      },
+      grid: {
+        right: 60
+      },
+      chartSettings: {
+        itemStyle: {
+          'barCategoryGap': 5
+        },
+        barWidth: 15,
+        labelMap: {
+          'deviceType': '权属单位',
+          'offline': '设备数量（个）'
+        },
+        dimension: ['deviceType'],
+        metrics: ['offline']
+      },
+      chartData: {
+        columns: ['deviceType', 'offline'],
+        rows: []
+      }
+    }
+  },
+  created() {
+    this.fetchDeviceType()
+  },
+  methods: {
+    fetchDeviceType() {
+      deviceStaticsByOnline().then(response => {
+        this.chartData.rows = response.data
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.flagBoxStyle {
+  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);
+}
+
+</style>
diff --git a/src/views/dataView/components/panelGroup.vue b/src/views/dataView/components/panelGroup.vue
new file mode 100644
index 0000000..9172cc9
--- /dev/null
+++ b/src/views/dataView/components/panelGroup.vue
@@ -0,0 +1,250 @@
+<template>
+  <el-row :gutter="20" class="panel-group">
+    <div>
+      <el-col>
+        <div class="flagBoxStyle">
+          <div class="flagStyle" />
+          <div>数据总体情况</div>
+        </div>
+      </el-col>
+    </div>
+    <div v-for="card in dataGroup" :key="card.title">
+      <el-col v-if="hasPerm(card.permission)" :xs="12" :sm="12" :lg="6" 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 slot-scope="scope">
+            <span>{{ scope.row[column.value] }}</span>
+          </template>
+        </el-table-column>
+      </el-table>
+    </el-dialog>
+  </el-row>
+</template>
+
+<script>
+import Card from '@/components/BigData/Card'
+import { wellCountByBfzt } from '@/api/well/well'
+import { deviceStaticByStatus, alarmNowStatic } from '@/api/data/dataStatics'
+import { jobCountByStatus } from '@/api/alarm/job'
+export default {
+  name: 'PanelGroup',
+  components: { Card },
+  data() {
+    return {
+      dialogFormVisible: false,
+      listLoading: false,
+      dataGroup: [
+        {
+          title: '井',
+          context: '--',
+          flags: '条',
+          icon: 'icon-well',
+          color: '#40c9c6',
+          permission: '/well/list'
+        },
+        {
+          title: '设备',
+          context: '--',
+          flags: '个',
+          icon: 'icon-device',
+          color: '#36a3f7',
+          permission: '/device/list'
+        },
+        {
+          title: '今日数据',
+          context: '--',
+          flags: '条',
+          icon: 'icon-alarm',
+          color: '#f4516c',
+          permission: '/alarm/now'
+        },
+        {
+          title: '离线设备',
+          context: '--',
+          flags: '个',
+          icon: 'icon-order',
+          color: '#f4516c',
+          permission: '/job/list'
+        }
+      ]
+    }
+  },
+  created() {
+    this.getWellCount()
+    this.getDeviceCount()
+    this.getAlarmCount()
+    this.getJobCount()
+  },
+  methods: {
+    goPage(card) {
+      if (card.title === '离线设备') {
+        this.dialogFormVisible = true
+      }
+    },
+    getWellCount() {
+      wellCountByBfzt().then(response => {
+        this.dataGroup[0].context = response.data.total
+      })
+    },
+    getDeviceCount() {
+      deviceStaticByStatus().then(response => {
+        this.dataGroup[1].context = response.data.total
+      })
+    },
+    getAlarmCount() {
+      alarmNowStatic().then(response => {
+        this.dataGroup[2].context = response.data.total
+      })
+    },
+    getJobCount() {
+      jobCountByStatus().then(response => {
+        const data = response.data
+        const total = data.beforeGet + data.beforeConfirm + data.inHandle
+        this.dataGroup[3].context = total
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.flagBoxStyle {
+  display: flex;
+  margin-bottom: 20px;
+  margin-top: -30px;
+}
+.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;
+  }
+  .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;
+      }
+    }
+  }
+}
+
+@media (max-width:550px) {
+  .card-panel-description {
+    display: none;
+  }
+
+  .card-panel-icon-wrapper {
+    float: none !important;
+    width: 100%;
+    height: 100%;
+    margin: 0 !important;
+
+    .svg-icon {
+      display: block;
+      margin: 14px auto !important;
+      float: none !important;
+    }
+  }
+}
+</style>
diff --git a/src/views/dataView/components/wellCountView.vue b/src/views/dataView/components/wellCountView.vue
new file mode 100644
index 0000000..5d87b28
--- /dev/null
+++ b/src/views/dataView/components/wellCountView.vue
@@ -0,0 +1,119 @@
+<template>
+  <div>
+    <div class="flagBoxStyle">
+      <div class="flagStyle" />
+      <div>井数量分析</div>
+    </div>
+    <el-row>
+      <el-col :span="8">
+        <ve-pie
+          :data="chartDataPie"
+          :extend="extendPie"
+        />
+      </el-col>
+      <el-col :span="16">
+        <ve-bar
+          :data="chartData"
+          :grid="grid"
+          :extend="extend"
+          :settings="chartSettings"
+        />
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import { deviceStaticsByOnline } from '@/api/data/dataStatics'
+export default {
+  name: 'WellCountView',
+  data() {
+    return {
+      online: 0,
+      offline: 0,
+      // 饼状图
+      extendPie: {
+        series: {
+          label: { show: true, position: 'outside', formatter: '{b}:{c}' },
+          radius: '45%'
+        }
+      },
+      chartDataPie: {
+        columns: ['onlineStatus', 'deviceCount'],
+        rows: []
+      },
+      // 柱状图
+      extend: {
+        xAxis: {
+          axisLabel: {
+            rotate: 30,
+            margin: 30,
+            textStyle: {
+              align: 'center'
+            }
+          }
+        },
+        series: {
+          label: { show: true, position: 'top' },
+          barMaxWidth: 35 // 最大柱宽度
+        }
+      },
+      grid: {
+        right: 60
+      },
+      chartSettings: {
+        itemStyle: {
+          'barCategoryGap': 5
+        },
+        barWidth: 15,
+        labelMap: {
+          'deviceType': '权属单位',
+          'offline': '设备数量（个）'
+        },
+        dimension: ['deviceType'],
+        metrics: ['offline']
+      },
+      chartData: {
+        columns: ['deviceType', 'offline'],
+        rows: []
+      }
+    }
+  },
+  created() {
+    this.fetchDeviceType()
+  },
+  methods: {
+    fetchDeviceType() {
+      deviceStaticsByOnline().then(response => {
+        response.data.forEach((item) => {
+          this.online += item.online
+          this.offline += item.offline
+        })
+        this.chartData.rows = response.data
+        this.chartDataPie.rows = [
+          { 'onlineStatus': '在线', 'deviceCount': this.online },
+          { 'onlineStatus': '离线', 'deviceCount': this.offline }
+        ]
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.flagBoxStyle {
+  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);
+}
+
+</style>

diff --git a/mock/system/user.js b/mock/system/user.js
index abd593d..747ef61 100644
--- a/mock/system/user.js
+++ b/mock/system/user.js
@@ -195,6 +195,7 @@
     { 'code': 'well_bfcf', 'icon': '', 'id': '1138616121200189442', 'ismenu': '0', 'levels': 11, 'name': '布防撤防', 'num': 0, 'parentId': '1138377674778685442', 'resourceType': '04', 'url': '/well/bfcf' },
     { 'code': 'alarms_by_well', 'icon': '', 'id': '1138702100355313665', 'ismenu': '0', 'levels': 11, 'name': '获取某闸井告警信息', 'num': 0, 'parentId': '1138701347507105794', 'resourceType': '04', 'url': '/overview/alarmsByWell' },
     { 'code': 'alarm_statics', 'icon': '', 'id': '1138703677266817025', 'ismenu': '1', 'levels': 11, 'name': '报警统计', 'num': 0, 'parentId': '1138702379389775873', 'resourceType': '03', 'url': '/alarm/statics' },
+    { 'code': 'alarm_statics', 'icon': '', 'id': '1138703677266817005', 'ismenu': '1', 'levels': 11, 'name': '数据概览', 'num': 0, 'parentId': '1138702379389775873', 'resourceType': '03', 'url': '/dataView/statics' },
     { 'code': 'alarm_static_by_dept', 'icon': '', 'id': '1139376799592734721', 'ismenu': '0', 'levels': 11, 'name': '根据部门统计报警', 'num': 0, 'parentId': '1138702379389775873', 'resourceType': '04', 'url': '/statics/alarmsByDept' },
     { 'code': 'concentrator_add', 'icon': '', 'id': '1138693099123077122', 'ismenu': '0', 'levels': 11, 'name': '新增集中器', 'num': 0, 'parentId': '1138692702442582017', 'resourceType': '04', 'url': '/concentrator/add' },
     { 'code': 'job_export', 'icon': '', 'id': '1138699769542832130', 'ismenu': '0', 'levels': 11, 'name': '导出工单列表', 'num': 0, 'parentId': '1138699051712868353', 'resourceType': '04', 'url': '/job/export' },
diff --git a/src/components/BigData/Card/index.vue b/src/components/BigData/Card/index.vue
index 07ee165..b9e5ee6 100644
--- a/src/components/BigData/Card/index.vue
+++ b/src/components/BigData/Card/index.vue
@@ -8,8 +8,9 @@
         <div class="card-panel-text">
           {{ title }}
         </div>
-        <div class="card-panel-num" >
-          {{ context }}
+        <div class="card-panel-num">
+          <span>{{ context }}</span>
+          <span>{{ flags }}</span>
         </div>
       </div>
     </div>
@@ -24,6 +25,10 @@
       type: String,
       default: '标题'
     },
+    flags: {
+      type: String,
+      default: '单位'
+    },
     subtitle: {
       type: String,
       default: ''
diff --git a/src/components/Hamburger/index.vue b/src/components/Hamburger/index.vue
index 7c358e2..6a9236c 100644
--- a/src/components/Hamburger/index.vue
+++ b/src/components/Hamburger/index.vue
@@ -36,6 +36,7 @@
     vertical-align: middle;
     width: 20px;
     height: 20px;
+    cursor: pointer;
   }
 
   .hamburger.is-active {
diff --git a/src/router/modules/well.js b/src/router/modules/well.js
index b5b6e82..a92ff3c 100644
--- a/src/router/modules/well.js
+++ b/src/router/modules/well.js
@@ -179,16 +179,22 @@
     },
     children: [
       {
+        path: '/dataView',
+        name: 'DataView',
+        component: () => import('@/views/dataView/dataView'),
+        meta: { title: '数据概览', icon: 'icon-config', permission: ['/dataView/statics'] }
+      },
+      {
         path: '/dataManage',
         name: 'DataManage',
         component: () => import('@/views/dataManage/dataManage'),
-        meta: { title: '历史数据', icon: 'icon-config', permission: ['/datalist'] }
+        meta: { title: '数据列表', icon: 'icon-config', permission: ['/datalist'] }
       },
       {
         path: '/dataAnalyse',
         name: 'DataAnalyse',
         component: () => import('@/views/dataStatics/dataStatics'),
-        meta: { title: '数据分析', icon: 'icon-config', permission: ['/dataAnalyse'] }
+        meta: { title: '数据曲线', icon: 'icon-config', permission: ['/dataAnalyse'] }
       },
       {
         path: '/deviceStatics',
diff --git a/src/store/modules/settings.js b/src/store/modules/settings.js
index 856b38a..421e31b 100644
--- a/src/store/modules/settings.js
+++ b/src/store/modules/settings.js
@@ -1,12 +1,13 @@
 import variables from '@/styles/element-variables.scss'
 import defaultSettings from '@/settings'
 
-const { showSettings, tagsView, breadcrumb, fixedHeader, sidebarLogo } = defaultSettings
+// const { showSettings, tagsView, breadcrumb, fixedHeader, sidebarLogo } = defaultSettings
+const { showSettings, tagsView, fixedHeader, sidebarLogo } = defaultSettings
 
 const state = {
   theme: variables.theme, // 主题
   showSettings: showSettings, // 是否显示设置按钮
-  breadcrumb: breadcrumb, // 是否显示面包屑
+  breadcrumb: true, // 是否显示面包屑
   tagsView: tagsView, // 是否显示tagsView
   fixedHeader: fixedHeader, // 是否固定面包屑
   sidebarLogo: sidebarLogo, // 是否显示logo
diff --git a/src/views/dataView/components/alarmStatus.vue b/src/views/dataView/components/alarmStatus.vue
new file mode 100644
index 0000000..94f7410
--- /dev/null
+++ b/src/views/dataView/components/alarmStatus.vue
@@ -0,0 +1,264 @@
+<template>
+  <el-row :gutter="40" class="panel-group">
+    <div>
+      <el-col>
+        <div class="flagBoxStyle">
+          <div class="flagStyle" />
+          <div>报警情况</div>
+        </div>
+      </el-col>
+    </div>
+    <div v-for="card in dataGroup" :key="card.title">
+      <el-col v-if="hasPerm(card.permission)" class="card-panel-col">
+        <card :title="card.title" :context="card.context" :flags="card.flags" :icon="card.icon" :color="card.color" @click.native="goPage(card.path)" />
+      </el-col>
+    </div>
+    <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-row>
+</template>
+
+<script>
+import Card from '@/components/BigData/Card'
+import { wellCountByBfzt } from '@/api/well/well'
+import { deviceStaticByStatus, alarmNowStatic } from '@/api/data/dataStatics'
+import { jobCountByStatus } from '@/api/alarm/job'
+export default {
+  name: 'AlarmStatus',
+  components: {
+    Card
+  },
+  data() {
+    return {
+      tableList: [],
+      dataGroup: [
+        {
+          title: '井',
+          context: '--',
+          flags: '条',
+          icon: 'icon-alarm',
+          color: '#40c9c6',
+          path: '/wellList',
+          permission: '/well/list'
+        }
+        // {
+        //   title: '设备',
+        //   context: '--',
+        //   flags: '个',
+        //   icon: 'icon-device',
+        //   color: '#36a3f7',
+        //   path: '/deviceList',
+        //   permission: '/device/list'
+        // },
+        // {
+        //   title: '今日数据',
+        //   context: '--',
+        //   flags: '条',
+        //   icon: 'icon-alarm',
+        //   color: '#f4516c',
+        //   path: '/alarmNow',
+        //   permission: '/alarm/now'
+        // },
+        // {
+        //   title: '离线设备',
+        //   context: '--',
+        //   flags: '个',
+        //   icon: 'icon-order',
+        //   color: '#f4516c',
+        //   path: '/listJob',
+        //   permission: '/job/list'
+        // }
+      ]
+    }
+  },
+  created() {
+    this.getWellCount()
+    this.getDeviceCount()
+    this.getAlarmCount()
+    this.getJobCount()
+  },
+  mounted() {
+    this.tableList = [
+      {
+        value: 'WELL-001',
+        name: '液位超限'
+      },
+      {
+        value: 'WELL-002',
+        name: '燃气浓度超限'
+      },
+      {
+        value: 'WELL-003',
+        name: '井盖开启'
+      },
+      {
+        value: 'WELL-004',
+        name: '井盖开启'
+      }
+    ]
+  },
+  methods: {
+    refresh() {
+      this.getAlarmCount()
+      this.getJobCount()
+    },
+    goPage(path) {
+      this.$router.push(path)
+    },
+    getWellCount() {
+      wellCountByBfzt().then(response => {
+        this.dataGroup[0].context = response.data.total
+      })
+    },
+    getDeviceCount() {
+      deviceStaticByStatus().then(response => {
+        this.dataGroup[1].context = response.data.total
+      })
+    },
+    getAlarmCount() {
+      alarmNowStatic().then(response => {
+        this.dataGroup[2].context = response.data.total
+      })
+    },
+    getJobCount() {
+      jobCountByStatus().then(response => {
+        const data = response.data
+        const total = data.beforeGet + data.beforeConfirm + data.inHandle
+        this.dataGroup[3].context = total
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.tableStyle{
+  padding: 20px;
+}
+.flagBoxStyle {
+  display: flex;
+  margin-bottom: 20px;
+  margin-top: -30px;
+}
+.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;
+  }
+
+  .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;
+      }
+    }
+  }
+}
+
+@media (max-width:550px) {
+  .card-panel-description {
+    display: none;
+  }
+
+  .card-panel-icon-wrapper {
+    float: none !important;
+    width: 100%;
+    height: 100%;
+    margin: 0 !important;
+
+    .svg-icon {
+      display: block;
+      margin: 14px auto !important;
+      float: none !important;
+    }
+  }
+}
+</style>
diff --git a/src/views/dataView/components/alarmView.vue b/src/views/dataView/components/alarmView.vue
new file mode 100644
index 0000000..60650e9
--- /dev/null
+++ b/src/views/dataView/components/alarmView.vue
@@ -0,0 +1,106 @@
+<template>
+  <div>
+    <div class="flagBoxStyle">
+      <div class="flagStyle" />
+      <div>报警分析</div>
+    </div>
+    <el-row>
+      <el-col>
+        <ve-line
+          :data="chartDataLine"
+          :settings="chartSettingsLine"
+        />
+      </el-col>
+      <el-col>
+        <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>
+
+<script>
+import { alarmStaticsByContent } from '@/api/alarm/deviceStatics'
+export default {
+  name: 'AlarmStaticsByType',
+  data() {
+    return {
+      tableList: [],
+      // 折线图
+      chartSettingsLine: {
+        labelMap: {
+          'alarmWellData': '井盖开盖报警',
+          'alarmLiquidData': '液位超限报警',
+          'alarmHarmfulData': '有害气体超标报警'
+        },
+        metrics: ['alarmWellData', 'alarmLiquidData', 'alarmHarmfulData'],
+        dimension: ['date']
+      },
+      chartDataLine: {
+        columns: ['date', 'alarmWellData', 'alarmLiquidData', 'alarmHarmfulData'],
+        rows: []
+      }
+    }
+  },
+  created() {
+    this.fetchDeviceTypeLine()
+  },
+  mounted() {
+    this.tableList = [
+      {
+        value: '224',
+        name: '井盖开启'
+      },
+      {
+        value: '22',
+        name: '燃气浓度超限'
+      },
+      {
+        value: '1',
+        name: '液位超限'
+      },
+      {
+        value: '4',
+        name: '有害气体超标'
+      }
+    ]
+  },
+  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
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.tableStyle{
+  padding: 100px 10px;
+}
+.flagBoxStyle {
+  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);
+}
+
+</style>
diff --git a/src/views/dataView/components/deviceCountView.vue b/src/views/dataView/components/deviceCountView.vue
new file mode 100644
index 0000000..b657e8d
--- /dev/null
+++ b/src/views/dataView/components/deviceCountView.vue
@@ -0,0 +1,119 @@
+<template>
+  <div>
+    <div class="flagBoxStyle">
+      <div class="flagStyle" />
+      <div>设备数量分析</div>
+    </div>
+    <el-row>
+      <el-col :span="16">
+        <ve-histogram
+          :data="chartData"
+          :grid="grid"
+          :extend="extend"
+          :settings="chartSettings"
+        />
+      </el-col>
+      <el-col :span="8">
+        <ve-pie
+          :data="chartDataPie"
+          :extend="extendPie"
+        />
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import { deviceStaticsByOnline } from '@/api/data/dataStatics'
+export default {
+  name: 'DeviceCountView',
+  data() {
+    return {
+      online: 0,
+      offline: 0,
+      // 饼状图
+      extendPie: {
+        series: {
+          label: { show: true, position: 'outside', formatter: '{b}:{c}' },
+          radius: '45%'
+        }
+      },
+      chartDataPie: {
+        columns: ['onlineStatus', 'deviceCount'],
+        rows: []
+      },
+      // 柱状图
+      extend: {
+        xAxis: {
+          axisLabel: {
+            rotate: 30,
+            margin: 30,
+            textStyle: {
+              align: 'center'
+            }
+          }
+        },
+        series: {
+          label: { show: true, position: 'top' },
+          barMaxWidth: 35 // 最大柱宽度
+        }
+      },
+      grid: {
+        right: 60
+      },
+      chartSettings: {
+        itemStyle: {
+          'barCategoryGap': 5
+        },
+        barWidth: 15,
+        labelMap: {
+          'deviceType': '权属单位',
+          'offline': '设备数量（个）'
+        },
+        dimension: ['deviceType'],
+        metrics: ['offline']
+      },
+      chartData: {
+        columns: ['deviceType', 'offline'],
+        rows: []
+      }
+    }
+  },
+  created() {
+    this.fetchDeviceType()
+  },
+  methods: {
+    fetchDeviceType() {
+      deviceStaticsByOnline().then(response => {
+        response.data.forEach((item) => {
+          this.online += item.online
+          this.offline += item.offline
+        })
+        this.chartData.rows = response.data
+        this.chartDataPie.rows = [
+          { 'onlineStatus': '在线', 'deviceCount': this.online },
+          { 'onlineStatus': '离线', 'deviceCount': this.offline }
+        ]
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.flagBoxStyle {
+  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);
+}
+
+</style>
diff --git a/src/views/dataView/components/jobView.vue b/src/views/dataView/components/jobView.vue
new file mode 100644
index 0000000..d0be0dd
--- /dev/null
+++ b/src/views/dataView/components/jobView.vue
@@ -0,0 +1,92 @@
+<template>
+  <div>
+    <div class="flagBoxStyle">
+      <div class="flagStyle" />
+      <div>井数量分析</div>
+    </div>
+    <el-row>
+      <el-col>
+        <ve-bar
+          :data="chartData"
+          :grid="grid"
+          :extend="extend"
+          :settings="chartSettings"
+        />
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import { deviceStaticsByOnline } from '@/api/data/dataStatics'
+export default {
+  name: 'JobView',
+  data() {
+    return {
+      // 柱状图
+      extend: {
+        xAxis: {
+          axisLabel: {
+            rotate: 30,
+            margin: 30,
+            textStyle: {
+              align: 'center'
+            }
+          }
+        },
+        series: {
+          label: { show: true, position: 'top' },
+          barMaxWidth: 35 // 最大柱宽度
+        }
+      },
+      grid: {
+        right: 60
+      },
+      chartSettings: {
+        itemStyle: {
+          'barCategoryGap': 5
+        },
+        barWidth: 15,
+        labelMap: {
+          'deviceType': '权属单位',
+          'offline': '设备数量（个）'
+        },
+        dimension: ['deviceType'],
+        metrics: ['offline']
+      },
+      chartData: {
+        columns: ['deviceType', 'offline'],
+        rows: []
+      }
+    }
+  },
+  created() {
+    this.fetchDeviceType()
+  },
+  methods: {
+    fetchDeviceType() {
+      deviceStaticsByOnline().then(response => {
+        this.chartData.rows = response.data
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.flagBoxStyle {
+  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);
+}
+
+</style>
diff --git a/src/views/dataView/components/panelGroup.vue b/src/views/dataView/components/panelGroup.vue
new file mode 100644
index 0000000..9172cc9
--- /dev/null
+++ b/src/views/dataView/components/panelGroup.vue
@@ -0,0 +1,250 @@
+<template>
+  <el-row :gutter="20" class="panel-group">
+    <div>
+      <el-col>
+        <div class="flagBoxStyle">
+          <div class="flagStyle" />
+          <div>数据总体情况</div>
+        </div>
+      </el-col>
+    </div>
+    <div v-for="card in dataGroup" :key="card.title">
+      <el-col v-if="hasPerm(card.permission)" :xs="12" :sm="12" :lg="6" 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 slot-scope="scope">
+            <span>{{ scope.row[column.value] }}</span>
+          </template>
+        </el-table-column>
+      </el-table>
+    </el-dialog>
+  </el-row>
+</template>
+
+<script>
+import Card from '@/components/BigData/Card'
+import { wellCountByBfzt } from '@/api/well/well'
+import { deviceStaticByStatus, alarmNowStatic } from '@/api/data/dataStatics'
+import { jobCountByStatus } from '@/api/alarm/job'
+export default {
+  name: 'PanelGroup',
+  components: { Card },
+  data() {
+    return {
+      dialogFormVisible: false,
+      listLoading: false,
+      dataGroup: [
+        {
+          title: '井',
+          context: '--',
+          flags: '条',
+          icon: 'icon-well',
+          color: '#40c9c6',
+          permission: '/well/list'
+        },
+        {
+          title: '设备',
+          context: '--',
+          flags: '个',
+          icon: 'icon-device',
+          color: '#36a3f7',
+          permission: '/device/list'
+        },
+        {
+          title: '今日数据',
+          context: '--',
+          flags: '条',
+          icon: 'icon-alarm',
+          color: '#f4516c',
+          permission: '/alarm/now'
+        },
+        {
+          title: '离线设备',
+          context: '--',
+          flags: '个',
+          icon: 'icon-order',
+          color: '#f4516c',
+          permission: '/job/list'
+        }
+      ]
+    }
+  },
+  created() {
+    this.getWellCount()
+    this.getDeviceCount()
+    this.getAlarmCount()
+    this.getJobCount()
+  },
+  methods: {
+    goPage(card) {
+      if (card.title === '离线设备') {
+        this.dialogFormVisible = true
+      }
+    },
+    getWellCount() {
+      wellCountByBfzt().then(response => {
+        this.dataGroup[0].context = response.data.total
+      })
+    },
+    getDeviceCount() {
+      deviceStaticByStatus().then(response => {
+        this.dataGroup[1].context = response.data.total
+      })
+    },
+    getAlarmCount() {
+      alarmNowStatic().then(response => {
+        this.dataGroup[2].context = response.data.total
+      })
+    },
+    getJobCount() {
+      jobCountByStatus().then(response => {
+        const data = response.data
+        const total = data.beforeGet + data.beforeConfirm + data.inHandle
+        this.dataGroup[3].context = total
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.flagBoxStyle {
+  display: flex;
+  margin-bottom: 20px;
+  margin-top: -30px;
+}
+.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;
+  }
+  .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;
+      }
+    }
+  }
+}
+
+@media (max-width:550px) {
+  .card-panel-description {
+    display: none;
+  }
+
+  .card-panel-icon-wrapper {
+    float: none !important;
+    width: 100%;
+    height: 100%;
+    margin: 0 !important;
+
+    .svg-icon {
+      display: block;
+      margin: 14px auto !important;
+      float: none !important;
+    }
+  }
+}
+</style>
diff --git a/src/views/dataView/components/wellCountView.vue b/src/views/dataView/components/wellCountView.vue
new file mode 100644
index 0000000..5d87b28
--- /dev/null
+++ b/src/views/dataView/components/wellCountView.vue
@@ -0,0 +1,119 @@
+<template>
+  <div>
+    <div class="flagBoxStyle">
+      <div class="flagStyle" />
+      <div>井数量分析</div>
+    </div>
+    <el-row>
+      <el-col :span="8">
+        <ve-pie
+          :data="chartDataPie"
+          :extend="extendPie"
+        />
+      </el-col>
+      <el-col :span="16">
+        <ve-bar
+          :data="chartData"
+          :grid="grid"
+          :extend="extend"
+          :settings="chartSettings"
+        />
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import { deviceStaticsByOnline } from '@/api/data/dataStatics'
+export default {
+  name: 'WellCountView',
+  data() {
+    return {
+      online: 0,
+      offline: 0,
+      // 饼状图
+      extendPie: {
+        series: {
+          label: { show: true, position: 'outside', formatter: '{b}:{c}' },
+          radius: '45%'
+        }
+      },
+      chartDataPie: {
+        columns: ['onlineStatus', 'deviceCount'],
+        rows: []
+      },
+      // 柱状图
+      extend: {
+        xAxis: {
+          axisLabel: {
+            rotate: 30,
+            margin: 30,
+            textStyle: {
+              align: 'center'
+            }
+          }
+        },
+        series: {
+          label: { show: true, position: 'top' },
+          barMaxWidth: 35 // 最大柱宽度
+        }
+      },
+      grid: {
+        right: 60
+      },
+      chartSettings: {
+        itemStyle: {
+          'barCategoryGap': 5
+        },
+        barWidth: 15,
+        labelMap: {
+          'deviceType': '权属单位',
+          'offline': '设备数量（个）'
+        },
+        dimension: ['deviceType'],
+        metrics: ['offline']
+      },
+      chartData: {
+        columns: ['deviceType', 'offline'],
+        rows: []
+      }
+    }
+  },
+  created() {
+    this.fetchDeviceType()
+  },
+  methods: {
+    fetchDeviceType() {
+      deviceStaticsByOnline().then(response => {
+        response.data.forEach((item) => {
+          this.online += item.online
+          this.offline += item.offline
+        })
+        this.chartData.rows = response.data
+        this.chartDataPie.rows = [
+          { 'onlineStatus': '在线', 'deviceCount': this.online },
+          { 'onlineStatus': '离线', 'deviceCount': this.offline }
+        ]
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.flagBoxStyle {
+  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);
+}
+
+</style>
diff --git a/src/views/dataView/dataView.vue b/src/views/dataView/dataView.vue
new file mode 100644
index 0000000..e1e9977
--- /dev/null
+++ b/src/views/dataView/dataView.vue
@@ -0,0 +1,70 @@
+<template>
+  <div class="dashboard-container">
+    <el-row :gutter="2">
+      <el-col :span="18">
+        <!-- 数总体情况 -->
+        <el-col>
+          <el-card>
+            <panel-group />
+          </el-card>
+        </el-col>
+        <el-col :span="16">
+          <!-- 井数量分析 -->
+          <el-col>
+            <el-card>
+              <well-count-view />
+            </el-card>
+          </el-col>
+          <!-- 设备数量分析 -->
+          <el-col>
+            <el-card>
+              <device-count-view />
+            </el-card>
+          </el-col>
+        </el-col>
+        <el-col :span="8">
+          <el-card>
+            <alarm-view />
+          </el-card>
+        </el-col>
+      </el-col>
+      <el-col :span="6">
+        <el-col>
+          <el-card>
+            <alarm-status />
+          </el-card>
+        </el-col>
+        <el-col>
+          <el-card>
+            <job-view />
+          </el-card>
+        </el-col>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import panelGroup from './components/panelGroup'
+import alarmStatus from './components/alarmStatus'
+import wellCountView from './components/wellCountView'
+import deviceCountView from './components/deviceCountView'
+import alarmView from './components/alarmView'
+import jobView from './components/jobView'
+export default {
+  name: 'DataView',
+  components: { panelGroup, alarmStatus, wellCountView, deviceCountView, alarmView, jobView }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+// .dashboard {
+//   &-container {
+//     margin: 30px;
+//   }
+//   &-text {
+//     font-size: 30px;
+//     line-height: 46px;
+//   }
+// }
+</style>

diff --git a/mock/system/user.js b/mock/system/user.js
index abd593d..747ef61 100644
--- a/mock/system/user.js
+++ b/mock/system/user.js
@@ -195,6 +195,7 @@
     { 'code': 'well_bfcf', 'icon': '', 'id': '1138616121200189442', 'ismenu': '0', 'levels': 11, 'name': '布防撤防', 'num': 0, 'parentId': '1138377674778685442', 'resourceType': '04', 'url': '/well/bfcf' },
     { 'code': 'alarms_by_well', 'icon': '', 'id': '1138702100355313665', 'ismenu': '0', 'levels': 11, 'name': '获取某闸井告警信息', 'num': 0, 'parentId': '1138701347507105794', 'resourceType': '04', 'url': '/overview/alarmsByWell' },
     { 'code': 'alarm_statics', 'icon': '', 'id': '1138703677266817025', 'ismenu': '1', 'levels': 11, 'name': '报警统计', 'num': 0, 'parentId': '1138702379389775873', 'resourceType': '03', 'url': '/alarm/statics' },
+    { 'code': 'alarm_statics', 'icon': '', 'id': '1138703677266817005', 'ismenu': '1', 'levels': 11, 'name': '数据概览', 'num': 0, 'parentId': '1138702379389775873', 'resourceType': '03', 'url': '/dataView/statics' },
     { 'code': 'alarm_static_by_dept', 'icon': '', 'id': '1139376799592734721', 'ismenu': '0', 'levels': 11, 'name': '根据部门统计报警', 'num': 0, 'parentId': '1138702379389775873', 'resourceType': '04', 'url': '/statics/alarmsByDept' },
     { 'code': 'concentrator_add', 'icon': '', 'id': '1138693099123077122', 'ismenu': '0', 'levels': 11, 'name': '新增集中器', 'num': 0, 'parentId': '1138692702442582017', 'resourceType': '04', 'url': '/concentrator/add' },
     { 'code': 'job_export', 'icon': '', 'id': '1138699769542832130', 'ismenu': '0', 'levels': 11, 'name': '导出工单列表', 'num': 0, 'parentId': '1138699051712868353', 'resourceType': '04', 'url': '/job/export' },
diff --git a/src/components/BigData/Card/index.vue b/src/components/BigData/Card/index.vue
index 07ee165..b9e5ee6 100644
--- a/src/components/BigData/Card/index.vue
+++ b/src/components/BigData/Card/index.vue
@@ -8,8 +8,9 @@
         <div class="card-panel-text">
           {{ title }}
         </div>
-        <div class="card-panel-num" >
-          {{ context }}
+        <div class="card-panel-num">
+          <span>{{ context }}</span>
+          <span>{{ flags }}</span>
         </div>
       </div>
     </div>
@@ -24,6 +25,10 @@
       type: String,
       default: '标题'
     },
+    flags: {
+      type: String,
+      default: '单位'
+    },
     subtitle: {
       type: String,
       default: ''
diff --git a/src/components/Hamburger/index.vue b/src/components/Hamburger/index.vue
index 7c358e2..6a9236c 100644
--- a/src/components/Hamburger/index.vue
+++ b/src/components/Hamburger/index.vue
@@ -36,6 +36,7 @@
     vertical-align: middle;
     width: 20px;
     height: 20px;
+    cursor: pointer;
   }
 
   .hamburger.is-active {
diff --git a/src/router/modules/well.js b/src/router/modules/well.js
index b5b6e82..a92ff3c 100644
--- a/src/router/modules/well.js
+++ b/src/router/modules/well.js
@@ -179,16 +179,22 @@
     },
     children: [
       {
+        path: '/dataView',
+        name: 'DataView',
+        component: () => import('@/views/dataView/dataView'),
+        meta: { title: '数据概览', icon: 'icon-config', permission: ['/dataView/statics'] }
+      },
+      {
         path: '/dataManage',
         name: 'DataManage',
         component: () => import('@/views/dataManage/dataManage'),
-        meta: { title: '历史数据', icon: 'icon-config', permission: ['/datalist'] }
+        meta: { title: '数据列表', icon: 'icon-config', permission: ['/datalist'] }
       },
       {
         path: '/dataAnalyse',
         name: 'DataAnalyse',
         component: () => import('@/views/dataStatics/dataStatics'),
-        meta: { title: '数据分析', icon: 'icon-config', permission: ['/dataAnalyse'] }
+        meta: { title: '数据曲线', icon: 'icon-config', permission: ['/dataAnalyse'] }
       },
       {
         path: '/deviceStatics',
diff --git a/src/store/modules/settings.js b/src/store/modules/settings.js
index 856b38a..421e31b 100644
--- a/src/store/modules/settings.js
+++ b/src/store/modules/settings.js
@@ -1,12 +1,13 @@
 import variables from '@/styles/element-variables.scss'
 import defaultSettings from '@/settings'
 
-const { showSettings, tagsView, breadcrumb, fixedHeader, sidebarLogo } = defaultSettings
+// const { showSettings, tagsView, breadcrumb, fixedHeader, sidebarLogo } = defaultSettings
+const { showSettings, tagsView, fixedHeader, sidebarLogo } = defaultSettings
 
 const state = {
   theme: variables.theme, // 主题
   showSettings: showSettings, // 是否显示设置按钮
-  breadcrumb: breadcrumb, // 是否显示面包屑
+  breadcrumb: true, // 是否显示面包屑
   tagsView: tagsView, // 是否显示tagsView
   fixedHeader: fixedHeader, // 是否固定面包屑
   sidebarLogo: sidebarLogo, // 是否显示logo
diff --git a/src/views/dataView/components/alarmStatus.vue b/src/views/dataView/components/alarmStatus.vue
new file mode 100644
index 0000000..94f7410
--- /dev/null
+++ b/src/views/dataView/components/alarmStatus.vue
@@ -0,0 +1,264 @@
+<template>
+  <el-row :gutter="40" class="panel-group">
+    <div>
+      <el-col>
+        <div class="flagBoxStyle">
+          <div class="flagStyle" />
+          <div>报警情况</div>
+        </div>
+      </el-col>
+    </div>
+    <div v-for="card in dataGroup" :key="card.title">
+      <el-col v-if="hasPerm(card.permission)" class="card-panel-col">
+        <card :title="card.title" :context="card.context" :flags="card.flags" :icon="card.icon" :color="card.color" @click.native="goPage(card.path)" />
+      </el-col>
+    </div>
+    <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-row>
+</template>
+
+<script>
+import Card from '@/components/BigData/Card'
+import { wellCountByBfzt } from '@/api/well/well'
+import { deviceStaticByStatus, alarmNowStatic } from '@/api/data/dataStatics'
+import { jobCountByStatus } from '@/api/alarm/job'
+export default {
+  name: 'AlarmStatus',
+  components: {
+    Card
+  },
+  data() {
+    return {
+      tableList: [],
+      dataGroup: [
+        {
+          title: '井',
+          context: '--',
+          flags: '条',
+          icon: 'icon-alarm',
+          color: '#40c9c6',
+          path: '/wellList',
+          permission: '/well/list'
+        }
+        // {
+        //   title: '设备',
+        //   context: '--',
+        //   flags: '个',
+        //   icon: 'icon-device',
+        //   color: '#36a3f7',
+        //   path: '/deviceList',
+        //   permission: '/device/list'
+        // },
+        // {
+        //   title: '今日数据',
+        //   context: '--',
+        //   flags: '条',
+        //   icon: 'icon-alarm',
+        //   color: '#f4516c',
+        //   path: '/alarmNow',
+        //   permission: '/alarm/now'
+        // },
+        // {
+        //   title: '离线设备',
+        //   context: '--',
+        //   flags: '个',
+        //   icon: 'icon-order',
+        //   color: '#f4516c',
+        //   path: '/listJob',
+        //   permission: '/job/list'
+        // }
+      ]
+    }
+  },
+  created() {
+    this.getWellCount()
+    this.getDeviceCount()
+    this.getAlarmCount()
+    this.getJobCount()
+  },
+  mounted() {
+    this.tableList = [
+      {
+        value: 'WELL-001',
+        name: '液位超限'
+      },
+      {
+        value: 'WELL-002',
+        name: '燃气浓度超限'
+      },
+      {
+        value: 'WELL-003',
+        name: '井盖开启'
+      },
+      {
+        value: 'WELL-004',
+        name: '井盖开启'
+      }
+    ]
+  },
+  methods: {
+    refresh() {
+      this.getAlarmCount()
+      this.getJobCount()
+    },
+    goPage(path) {
+      this.$router.push(path)
+    },
+    getWellCount() {
+      wellCountByBfzt().then(response => {
+        this.dataGroup[0].context = response.data.total
+      })
+    },
+    getDeviceCount() {
+      deviceStaticByStatus().then(response => {
+        this.dataGroup[1].context = response.data.total
+      })
+    },
+    getAlarmCount() {
+      alarmNowStatic().then(response => {
+        this.dataGroup[2].context = response.data.total
+      })
+    },
+    getJobCount() {
+      jobCountByStatus().then(response => {
+        const data = response.data
+        const total = data.beforeGet + data.beforeConfirm + data.inHandle
+        this.dataGroup[3].context = total
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.tableStyle{
+  padding: 20px;
+}
+.flagBoxStyle {
+  display: flex;
+  margin-bottom: 20px;
+  margin-top: -30px;
+}
+.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;
+  }
+
+  .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;
+      }
+    }
+  }
+}
+
+@media (max-width:550px) {
+  .card-panel-description {
+    display: none;
+  }
+
+  .card-panel-icon-wrapper {
+    float: none !important;
+    width: 100%;
+    height: 100%;
+    margin: 0 !important;
+
+    .svg-icon {
+      display: block;
+      margin: 14px auto !important;
+      float: none !important;
+    }
+  }
+}
+</style>
diff --git a/src/views/dataView/components/alarmView.vue b/src/views/dataView/components/alarmView.vue
new file mode 100644
index 0000000..60650e9
--- /dev/null
+++ b/src/views/dataView/components/alarmView.vue
@@ -0,0 +1,106 @@
+<template>
+  <div>
+    <div class="flagBoxStyle">
+      <div class="flagStyle" />
+      <div>报警分析</div>
+    </div>
+    <el-row>
+      <el-col>
+        <ve-line
+          :data="chartDataLine"
+          :settings="chartSettingsLine"
+        />
+      </el-col>
+      <el-col>
+        <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>
+
+<script>
+import { alarmStaticsByContent } from '@/api/alarm/deviceStatics'
+export default {
+  name: 'AlarmStaticsByType',
+  data() {
+    return {
+      tableList: [],
+      // 折线图
+      chartSettingsLine: {
+        labelMap: {
+          'alarmWellData': '井盖开盖报警',
+          'alarmLiquidData': '液位超限报警',
+          'alarmHarmfulData': '有害气体超标报警'
+        },
+        metrics: ['alarmWellData', 'alarmLiquidData', 'alarmHarmfulData'],
+        dimension: ['date']
+      },
+      chartDataLine: {
+        columns: ['date', 'alarmWellData', 'alarmLiquidData', 'alarmHarmfulData'],
+        rows: []
+      }
+    }
+  },
+  created() {
+    this.fetchDeviceTypeLine()
+  },
+  mounted() {
+    this.tableList = [
+      {
+        value: '224',
+        name: '井盖开启'
+      },
+      {
+        value: '22',
+        name: '燃气浓度超限'
+      },
+      {
+        value: '1',
+        name: '液位超限'
+      },
+      {
+        value: '4',
+        name: '有害气体超标'
+      }
+    ]
+  },
+  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
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.tableStyle{
+  padding: 100px 10px;
+}
+.flagBoxStyle {
+  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);
+}
+
+</style>
diff --git a/src/views/dataView/components/deviceCountView.vue b/src/views/dataView/components/deviceCountView.vue
new file mode 100644
index 0000000..b657e8d
--- /dev/null
+++ b/src/views/dataView/components/deviceCountView.vue
@@ -0,0 +1,119 @@
+<template>
+  <div>
+    <div class="flagBoxStyle">
+      <div class="flagStyle" />
+      <div>设备数量分析</div>
+    </div>
+    <el-row>
+      <el-col :span="16">
+        <ve-histogram
+          :data="chartData"
+          :grid="grid"
+          :extend="extend"
+          :settings="chartSettings"
+        />
+      </el-col>
+      <el-col :span="8">
+        <ve-pie
+          :data="chartDataPie"
+          :extend="extendPie"
+        />
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import { deviceStaticsByOnline } from '@/api/data/dataStatics'
+export default {
+  name: 'DeviceCountView',
+  data() {
+    return {
+      online: 0,
+      offline: 0,
+      // 饼状图
+      extendPie: {
+        series: {
+          label: { show: true, position: 'outside', formatter: '{b}:{c}' },
+          radius: '45%'
+        }
+      },
+      chartDataPie: {
+        columns: ['onlineStatus', 'deviceCount'],
+        rows: []
+      },
+      // 柱状图
+      extend: {
+        xAxis: {
+          axisLabel: {
+            rotate: 30,
+            margin: 30,
+            textStyle: {
+              align: 'center'
+            }
+          }
+        },
+        series: {
+          label: { show: true, position: 'top' },
+          barMaxWidth: 35 // 最大柱宽度
+        }
+      },
+      grid: {
+        right: 60
+      },
+      chartSettings: {
+        itemStyle: {
+          'barCategoryGap': 5
+        },
+        barWidth: 15,
+        labelMap: {
+          'deviceType': '权属单位',
+          'offline': '设备数量（个）'
+        },
+        dimension: ['deviceType'],
+        metrics: ['offline']
+      },
+      chartData: {
+        columns: ['deviceType', 'offline'],
+        rows: []
+      }
+    }
+  },
+  created() {
+    this.fetchDeviceType()
+  },
+  methods: {
+    fetchDeviceType() {
+      deviceStaticsByOnline().then(response => {
+        response.data.forEach((item) => {
+          this.online += item.online
+          this.offline += item.offline
+        })
+        this.chartData.rows = response.data
+        this.chartDataPie.rows = [
+          { 'onlineStatus': '在线', 'deviceCount': this.online },
+          { 'onlineStatus': '离线', 'deviceCount': this.offline }
+        ]
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.flagBoxStyle {
+  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);
+}
+
+</style>
diff --git a/src/views/dataView/components/jobView.vue b/src/views/dataView/components/jobView.vue
new file mode 100644
index 0000000..d0be0dd
--- /dev/null
+++ b/src/views/dataView/components/jobView.vue
@@ -0,0 +1,92 @@
+<template>
+  <div>
+    <div class="flagBoxStyle">
+      <div class="flagStyle" />
+      <div>井数量分析</div>
+    </div>
+    <el-row>
+      <el-col>
+        <ve-bar
+          :data="chartData"
+          :grid="grid"
+          :extend="extend"
+          :settings="chartSettings"
+        />
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import { deviceStaticsByOnline } from '@/api/data/dataStatics'
+export default {
+  name: 'JobView',
+  data() {
+    return {
+      // 柱状图
+      extend: {
+        xAxis: {
+          axisLabel: {
+            rotate: 30,
+            margin: 30,
+            textStyle: {
+              align: 'center'
+            }
+          }
+        },
+        series: {
+          label: { show: true, position: 'top' },
+          barMaxWidth: 35 // 最大柱宽度
+        }
+      },
+      grid: {
+        right: 60
+      },
+      chartSettings: {
+        itemStyle: {
+          'barCategoryGap': 5
+        },
+        barWidth: 15,
+        labelMap: {
+          'deviceType': '权属单位',
+          'offline': '设备数量（个）'
+        },
+        dimension: ['deviceType'],
+        metrics: ['offline']
+      },
+      chartData: {
+        columns: ['deviceType', 'offline'],
+        rows: []
+      }
+    }
+  },
+  created() {
+    this.fetchDeviceType()
+  },
+  methods: {
+    fetchDeviceType() {
+      deviceStaticsByOnline().then(response => {
+        this.chartData.rows = response.data
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.flagBoxStyle {
+  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);
+}
+
+</style>
diff --git a/src/views/dataView/components/panelGroup.vue b/src/views/dataView/components/panelGroup.vue
new file mode 100644
index 0000000..9172cc9
--- /dev/null
+++ b/src/views/dataView/components/panelGroup.vue
@@ -0,0 +1,250 @@
+<template>
+  <el-row :gutter="20" class="panel-group">
+    <div>
+      <el-col>
+        <div class="flagBoxStyle">
+          <div class="flagStyle" />
+          <div>数据总体情况</div>
+        </div>
+      </el-col>
+    </div>
+    <div v-for="card in dataGroup" :key="card.title">
+      <el-col v-if="hasPerm(card.permission)" :xs="12" :sm="12" :lg="6" 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 slot-scope="scope">
+            <span>{{ scope.row[column.value] }}</span>
+          </template>
+        </el-table-column>
+      </el-table>
+    </el-dialog>
+  </el-row>
+</template>
+
+<script>
+import Card from '@/components/BigData/Card'
+import { wellCountByBfzt } from '@/api/well/well'
+import { deviceStaticByStatus, alarmNowStatic } from '@/api/data/dataStatics'
+import { jobCountByStatus } from '@/api/alarm/job'
+export default {
+  name: 'PanelGroup',
+  components: { Card },
+  data() {
+    return {
+      dialogFormVisible: false,
+      listLoading: false,
+      dataGroup: [
+        {
+          title: '井',
+          context: '--',
+          flags: '条',
+          icon: 'icon-well',
+          color: '#40c9c6',
+          permission: '/well/list'
+        },
+        {
+          title: '设备',
+          context: '--',
+          flags: '个',
+          icon: 'icon-device',
+          color: '#36a3f7',
+          permission: '/device/list'
+        },
+        {
+          title: '今日数据',
+          context: '--',
+          flags: '条',
+          icon: 'icon-alarm',
+          color: '#f4516c',
+          permission: '/alarm/now'
+        },
+        {
+          title: '离线设备',
+          context: '--',
+          flags: '个',
+          icon: 'icon-order',
+          color: '#f4516c',
+          permission: '/job/list'
+        }
+      ]
+    }
+  },
+  created() {
+    this.getWellCount()
+    this.getDeviceCount()
+    this.getAlarmCount()
+    this.getJobCount()
+  },
+  methods: {
+    goPage(card) {
+      if (card.title === '离线设备') {
+        this.dialogFormVisible = true
+      }
+    },
+    getWellCount() {
+      wellCountByBfzt().then(response => {
+        this.dataGroup[0].context = response.data.total
+      })
+    },
+    getDeviceCount() {
+      deviceStaticByStatus().then(response => {
+        this.dataGroup[1].context = response.data.total
+      })
+    },
+    getAlarmCount() {
+      alarmNowStatic().then(response => {
+        this.dataGroup[2].context = response.data.total
+      })
+    },
+    getJobCount() {
+      jobCountByStatus().then(response => {
+        const data = response.data
+        const total = data.beforeGet + data.beforeConfirm + data.inHandle
+        this.dataGroup[3].context = total
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.flagBoxStyle {
+  display: flex;
+  margin-bottom: 20px;
+  margin-top: -30px;
+}
+.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;
+  }
+  .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;
+      }
+    }
+  }
+}
+
+@media (max-width:550px) {
+  .card-panel-description {
+    display: none;
+  }
+
+  .card-panel-icon-wrapper {
+    float: none !important;
+    width: 100%;
+    height: 100%;
+    margin: 0 !important;
+
+    .svg-icon {
+      display: block;
+      margin: 14px auto !important;
+      float: none !important;
+    }
+  }
+}
+</style>
diff --git a/src/views/dataView/components/wellCountView.vue b/src/views/dataView/components/wellCountView.vue
new file mode 100644
index 0000000..5d87b28
--- /dev/null
+++ b/src/views/dataView/components/wellCountView.vue
@@ -0,0 +1,119 @@
+<template>
+  <div>
+    <div class="flagBoxStyle">
+      <div class="flagStyle" />
+      <div>井数量分析</div>
+    </div>
+    <el-row>
+      <el-col :span="8">
+        <ve-pie
+          :data="chartDataPie"
+          :extend="extendPie"
+        />
+      </el-col>
+      <el-col :span="16">
+        <ve-bar
+          :data="chartData"
+          :grid="grid"
+          :extend="extend"
+          :settings="chartSettings"
+        />
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import { deviceStaticsByOnline } from '@/api/data/dataStatics'
+export default {
+  name: 'WellCountView',
+  data() {
+    return {
+      online: 0,
+      offline: 0,
+      // 饼状图
+      extendPie: {
+        series: {
+          label: { show: true, position: 'outside', formatter: '{b}:{c}' },
+          radius: '45%'
+        }
+      },
+      chartDataPie: {
+        columns: ['onlineStatus', 'deviceCount'],
+        rows: []
+      },
+      // 柱状图
+      extend: {
+        xAxis: {
+          axisLabel: {
+            rotate: 30,
+            margin: 30,
+            textStyle: {
+              align: 'center'
+            }
+          }
+        },
+        series: {
+          label: { show: true, position: 'top' },
+          barMaxWidth: 35 // 最大柱宽度
+        }
+      },
+      grid: {
+        right: 60
+      },
+      chartSettings: {
+        itemStyle: {
+          'barCategoryGap': 5
+        },
+        barWidth: 15,
+        labelMap: {
+          'deviceType': '权属单位',
+          'offline': '设备数量（个）'
+        },
+        dimension: ['deviceType'],
+        metrics: ['offline']
+      },
+      chartData: {
+        columns: ['deviceType', 'offline'],
+        rows: []
+      }
+    }
+  },
+  created() {
+    this.fetchDeviceType()
+  },
+  methods: {
+    fetchDeviceType() {
+      deviceStaticsByOnline().then(response => {
+        response.data.forEach((item) => {
+          this.online += item.online
+          this.offline += item.offline
+        })
+        this.chartData.rows = response.data
+        this.chartDataPie.rows = [
+          { 'onlineStatus': '在线', 'deviceCount': this.online },
+          { 'onlineStatus': '离线', 'deviceCount': this.offline }
+        ]
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.flagBoxStyle {
+  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);
+}
+
+</style>
diff --git a/src/views/dataView/dataView.vue b/src/views/dataView/dataView.vue
new file mode 100644
index 0000000..e1e9977
--- /dev/null
+++ b/src/views/dataView/dataView.vue
@@ -0,0 +1,70 @@
+<template>
+  <div class="dashboard-container">
+    <el-row :gutter="2">
+      <el-col :span="18">
+        <!-- 数总体情况 -->
+        <el-col>
+          <el-card>
+            <panel-group />
+          </el-card>
+        </el-col>
+        <el-col :span="16">
+          <!-- 井数量分析 -->
+          <el-col>
+            <el-card>
+              <well-count-view />
+            </el-card>
+          </el-col>
+          <!-- 设备数量分析 -->
+          <el-col>
+            <el-card>
+              <device-count-view />
+            </el-card>
+          </el-col>
+        </el-col>
+        <el-col :span="8">
+          <el-card>
+            <alarm-view />
+          </el-card>
+        </el-col>
+      </el-col>
+      <el-col :span="6">
+        <el-col>
+          <el-card>
+            <alarm-status />
+          </el-card>
+        </el-col>
+        <el-col>
+          <el-card>
+            <job-view />
+          </el-card>
+        </el-col>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import panelGroup from './components/panelGroup'
+import alarmStatus from './components/alarmStatus'
+import wellCountView from './components/wellCountView'
+import deviceCountView from './components/deviceCountView'
+import alarmView from './components/alarmView'
+import jobView from './components/jobView'
+export default {
+  name: 'DataView',
+  components: { panelGroup, alarmStatus, wellCountView, deviceCountView, alarmView, jobView }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+// .dashboard {
+//   &-container {
+//     margin: 30px;
+//   }
+//   &-text {
+//     font-size: 30px;
+//     line-height: 46px;
+//   }
+// }
+</style>
diff --git a/src/views/overview/overviewAmap.vue b/src/views/overview/overviewAmap.vue
index fa1f599..a2963a2 100644
--- a/src/views/overview/overviewAmap.vue
+++ b/src/views/overview/overviewAmap.vue
@@ -3,7 +3,7 @@
   <div>
     <div class="overview-map-container">
       <!--地图-->
-      <a-map-container ref="map" :center="center" :zoom="zoom" :base-layer="baseLayer" :style="{height:(bodyHeight-20)+'px'}" vid="overview" class="map-demo" @ready="mapReady">
+      <a-map-container ref="map" :center="center" :zoom="zoom" :base-layer="baseLayer" :style="{height:(bodyHeight-70)+'px'}" vid="overview" class="map-demo" @ready="mapReady">
         <!--报警点位-->
         <a-map-marker v-for="alarmWell of alarmWells" :visible="showAlarm && alarmWell.visible" :position="alarmWell.coordinates" :offset="alarmOffset">
           <el-image :src="alarmIcon" :style="{'width':alarmIconSize[0]+'px','height':alarmIconSize[1]+'px'}" fit="fill" @click="openAlarmWindow(alarmWell.wellId, alarmWell.coordinates)" />

diff --git a/mock/system/user.js b/mock/system/user.js
index abd593d..747ef61 100644
--- a/mock/system/user.js
+++ b/mock/system/user.js
@@ -195,6 +195,7 @@
     { 'code': 'well_bfcf', 'icon': '', 'id': '1138616121200189442', 'ismenu': '0', 'levels': 11, 'name': '布防撤防', 'num': 0, 'parentId': '1138377674778685442', 'resourceType': '04', 'url': '/well/bfcf' },
     { 'code': 'alarms_by_well', 'icon': '', 'id': '1138702100355313665', 'ismenu': '0', 'levels': 11, 'name': '获取某闸井告警信息', 'num': 0, 'parentId': '1138701347507105794', 'resourceType': '04', 'url': '/overview/alarmsByWell' },
     { 'code': 'alarm_statics', 'icon': '', 'id': '1138703677266817025', 'ismenu': '1', 'levels': 11, 'name': '报警统计', 'num': 0, 'parentId': '1138702379389775873', 'resourceType': '03', 'url': '/alarm/statics' },
+    { 'code': 'alarm_statics', 'icon': '', 'id': '1138703677266817005', 'ismenu': '1', 'levels': 11, 'name': '数据概览', 'num': 0, 'parentId': '1138702379389775873', 'resourceType': '03', 'url': '/dataView/statics' },
     { 'code': 'alarm_static_by_dept', 'icon': '', 'id': '1139376799592734721', 'ismenu': '0', 'levels': 11, 'name': '根据部门统计报警', 'num': 0, 'parentId': '1138702379389775873', 'resourceType': '04', 'url': '/statics/alarmsByDept' },
     { 'code': 'concentrator_add', 'icon': '', 'id': '1138693099123077122', 'ismenu': '0', 'levels': 11, 'name': '新增集中器', 'num': 0, 'parentId': '1138692702442582017', 'resourceType': '04', 'url': '/concentrator/add' },
     { 'code': 'job_export', 'icon': '', 'id': '1138699769542832130', 'ismenu': '0', 'levels': 11, 'name': '导出工单列表', 'num': 0, 'parentId': '1138699051712868353', 'resourceType': '04', 'url': '/job/export' },
diff --git a/src/components/BigData/Card/index.vue b/src/components/BigData/Card/index.vue
index 07ee165..b9e5ee6 100644
--- a/src/components/BigData/Card/index.vue
+++ b/src/components/BigData/Card/index.vue
@@ -8,8 +8,9 @@
         <div class="card-panel-text">
           {{ title }}
         </div>
-        <div class="card-panel-num" >
-          {{ context }}
+        <div class="card-panel-num">
+          <span>{{ context }}</span>
+          <span>{{ flags }}</span>
         </div>
       </div>
     </div>
@@ -24,6 +25,10 @@
       type: String,
       default: '标题'
     },
+    flags: {
+      type: String,
+      default: '单位'
+    },
     subtitle: {
       type: String,
       default: ''
diff --git a/src/components/Hamburger/index.vue b/src/components/Hamburger/index.vue
index 7c358e2..6a9236c 100644
--- a/src/components/Hamburger/index.vue
+++ b/src/components/Hamburger/index.vue
@@ -36,6 +36,7 @@
     vertical-align: middle;
     width: 20px;
     height: 20px;
+    cursor: pointer;
   }
 
   .hamburger.is-active {
diff --git a/src/router/modules/well.js b/src/router/modules/well.js
index b5b6e82..a92ff3c 100644
--- a/src/router/modules/well.js
+++ b/src/router/modules/well.js
@@ -179,16 +179,22 @@
     },
     children: [
       {
+        path: '/dataView',
+        name: 'DataView',
+        component: () => import('@/views/dataView/dataView'),
+        meta: { title: '数据概览', icon: 'icon-config', permission: ['/dataView/statics'] }
+      },
+      {
         path: '/dataManage',
         name: 'DataManage',
         component: () => import('@/views/dataManage/dataManage'),
-        meta: { title: '历史数据', icon: 'icon-config', permission: ['/datalist'] }
+        meta: { title: '数据列表', icon: 'icon-config', permission: ['/datalist'] }
       },
       {
         path: '/dataAnalyse',
         name: 'DataAnalyse',
         component: () => import('@/views/dataStatics/dataStatics'),
-        meta: { title: '数据分析', icon: 'icon-config', permission: ['/dataAnalyse'] }
+        meta: { title: '数据曲线', icon: 'icon-config', permission: ['/dataAnalyse'] }
       },
       {
         path: '/deviceStatics',
diff --git a/src/store/modules/settings.js b/src/store/modules/settings.js
index 856b38a..421e31b 100644
--- a/src/store/modules/settings.js
+++ b/src/store/modules/settings.js
@@ -1,12 +1,13 @@
 import variables from '@/styles/element-variables.scss'
 import defaultSettings from '@/settings'
 
-const { showSettings, tagsView, breadcrumb, fixedHeader, sidebarLogo } = defaultSettings
+// const { showSettings, tagsView, breadcrumb, fixedHeader, sidebarLogo } = defaultSettings
+const { showSettings, tagsView, fixedHeader, sidebarLogo } = defaultSettings
 
 const state = {
   theme: variables.theme, // 主题
   showSettings: showSettings, // 是否显示设置按钮
-  breadcrumb: breadcrumb, // 是否显示面包屑
+  breadcrumb: true, // 是否显示面包屑
   tagsView: tagsView, // 是否显示tagsView
   fixedHeader: fixedHeader, // 是否固定面包屑
   sidebarLogo: sidebarLogo, // 是否显示logo
diff --git a/src/views/dataView/components/alarmStatus.vue b/src/views/dataView/components/alarmStatus.vue
new file mode 100644
index 0000000..94f7410
--- /dev/null
+++ b/src/views/dataView/components/alarmStatus.vue
@@ -0,0 +1,264 @@
+<template>
+  <el-row :gutter="40" class="panel-group">
+    <div>
+      <el-col>
+        <div class="flagBoxStyle">
+          <div class="flagStyle" />
+          <div>报警情况</div>
+        </div>
+      </el-col>
+    </div>
+    <div v-for="card in dataGroup" :key="card.title">
+      <el-col v-if="hasPerm(card.permission)" class="card-panel-col">
+        <card :title="card.title" :context="card.context" :flags="card.flags" :icon="card.icon" :color="card.color" @click.native="goPage(card.path)" />
+      </el-col>
+    </div>
+    <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-row>
+</template>
+
+<script>
+import Card from '@/components/BigData/Card'
+import { wellCountByBfzt } from '@/api/well/well'
+import { deviceStaticByStatus, alarmNowStatic } from '@/api/data/dataStatics'
+import { jobCountByStatus } from '@/api/alarm/job'
+export default {
+  name: 'AlarmStatus',
+  components: {
+    Card
+  },
+  data() {
+    return {
+      tableList: [],
+      dataGroup: [
+        {
+          title: '井',
+          context: '--',
+          flags: '条',
+          icon: 'icon-alarm',
+          color: '#40c9c6',
+          path: '/wellList',
+          permission: '/well/list'
+        }
+        // {
+        //   title: '设备',
+        //   context: '--',
+        //   flags: '个',
+        //   icon: 'icon-device',
+        //   color: '#36a3f7',
+        //   path: '/deviceList',
+        //   permission: '/device/list'
+        // },
+        // {
+        //   title: '今日数据',
+        //   context: '--',
+        //   flags: '条',
+        //   icon: 'icon-alarm',
+        //   color: '#f4516c',
+        //   path: '/alarmNow',
+        //   permission: '/alarm/now'
+        // },
+        // {
+        //   title: '离线设备',
+        //   context: '--',
+        //   flags: '个',
+        //   icon: 'icon-order',
+        //   color: '#f4516c',
+        //   path: '/listJob',
+        //   permission: '/job/list'
+        // }
+      ]
+    }
+  },
+  created() {
+    this.getWellCount()
+    this.getDeviceCount()
+    this.getAlarmCount()
+    this.getJobCount()
+  },
+  mounted() {
+    this.tableList = [
+      {
+        value: 'WELL-001',
+        name: '液位超限'
+      },
+      {
+        value: 'WELL-002',
+        name: '燃气浓度超限'
+      },
+      {
+        value: 'WELL-003',
+        name: '井盖开启'
+      },
+      {
+        value: 'WELL-004',
+        name: '井盖开启'
+      }
+    ]
+  },
+  methods: {
+    refresh() {
+      this.getAlarmCount()
+      this.getJobCount()
+    },
+    goPage(path) {
+      this.$router.push(path)
+    },
+    getWellCount() {
+      wellCountByBfzt().then(response => {
+        this.dataGroup[0].context = response.data.total
+      })
+    },
+    getDeviceCount() {
+      deviceStaticByStatus().then(response => {
+        this.dataGroup[1].context = response.data.total
+      })
+    },
+    getAlarmCount() {
+      alarmNowStatic().then(response => {
+        this.dataGroup[2].context = response.data.total
+      })
+    },
+    getJobCount() {
+      jobCountByStatus().then(response => {
+        const data = response.data
+        const total = data.beforeGet + data.beforeConfirm + data.inHandle
+        this.dataGroup[3].context = total
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.tableStyle{
+  padding: 20px;
+}
+.flagBoxStyle {
+  display: flex;
+  margin-bottom: 20px;
+  margin-top: -30px;
+}
+.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;
+  }
+
+  .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;
+      }
+    }
+  }
+}
+
+@media (max-width:550px) {
+  .card-panel-description {
+    display: none;
+  }
+
+  .card-panel-icon-wrapper {
+    float: none !important;
+    width: 100%;
+    height: 100%;
+    margin: 0 !important;
+
+    .svg-icon {
+      display: block;
+      margin: 14px auto !important;
+      float: none !important;
+    }
+  }
+}
+</style>
diff --git a/src/views/dataView/components/alarmView.vue b/src/views/dataView/components/alarmView.vue
new file mode 100644
index 0000000..60650e9
--- /dev/null
+++ b/src/views/dataView/components/alarmView.vue
@@ -0,0 +1,106 @@
+<template>
+  <div>
+    <div class="flagBoxStyle">
+      <div class="flagStyle" />
+      <div>报警分析</div>
+    </div>
+    <el-row>
+      <el-col>
+        <ve-line
+          :data="chartDataLine"
+          :settings="chartSettingsLine"
+        />
+      </el-col>
+      <el-col>
+        <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>
+
+<script>
+import { alarmStaticsByContent } from '@/api/alarm/deviceStatics'
+export default {
+  name: 'AlarmStaticsByType',
+  data() {
+    return {
+      tableList: [],
+      // 折线图
+      chartSettingsLine: {
+        labelMap: {
+          'alarmWellData': '井盖开盖报警',
+          'alarmLiquidData': '液位超限报警',
+          'alarmHarmfulData': '有害气体超标报警'
+        },
+        metrics: ['alarmWellData', 'alarmLiquidData', 'alarmHarmfulData'],
+        dimension: ['date']
+      },
+      chartDataLine: {
+        columns: ['date', 'alarmWellData', 'alarmLiquidData', 'alarmHarmfulData'],
+        rows: []
+      }
+    }
+  },
+  created() {
+    this.fetchDeviceTypeLine()
+  },
+  mounted() {
+    this.tableList = [
+      {
+        value: '224',
+        name: '井盖开启'
+      },
+      {
+        value: '22',
+        name: '燃气浓度超限'
+      },
+      {
+        value: '1',
+        name: '液位超限'
+      },
+      {
+        value: '4',
+        name: '有害气体超标'
+      }
+    ]
+  },
+  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
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.tableStyle{
+  padding: 100px 10px;
+}
+.flagBoxStyle {
+  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);
+}
+
+</style>
diff --git a/src/views/dataView/components/deviceCountView.vue b/src/views/dataView/components/deviceCountView.vue
new file mode 100644
index 0000000..b657e8d
--- /dev/null
+++ b/src/views/dataView/components/deviceCountView.vue
@@ -0,0 +1,119 @@
+<template>
+  <div>
+    <div class="flagBoxStyle">
+      <div class="flagStyle" />
+      <div>设备数量分析</div>
+    </div>
+    <el-row>
+      <el-col :span="16">
+        <ve-histogram
+          :data="chartData"
+          :grid="grid"
+          :extend="extend"
+          :settings="chartSettings"
+        />
+      </el-col>
+      <el-col :span="8">
+        <ve-pie
+          :data="chartDataPie"
+          :extend="extendPie"
+        />
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import { deviceStaticsByOnline } from '@/api/data/dataStatics'
+export default {
+  name: 'DeviceCountView',
+  data() {
+    return {
+      online: 0,
+      offline: 0,
+      // 饼状图
+      extendPie: {
+        series: {
+          label: { show: true, position: 'outside', formatter: '{b}:{c}' },
+          radius: '45%'
+        }
+      },
+      chartDataPie: {
+        columns: ['onlineStatus', 'deviceCount'],
+        rows: []
+      },
+      // 柱状图
+      extend: {
+        xAxis: {
+          axisLabel: {
+            rotate: 30,
+            margin: 30,
+            textStyle: {
+              align: 'center'
+            }
+          }
+        },
+        series: {
+          label: { show: true, position: 'top' },
+          barMaxWidth: 35 // 最大柱宽度
+        }
+      },
+      grid: {
+        right: 60
+      },
+      chartSettings: {
+        itemStyle: {
+          'barCategoryGap': 5
+        },
+        barWidth: 15,
+        labelMap: {
+          'deviceType': '权属单位',
+          'offline': '设备数量（个）'
+        },
+        dimension: ['deviceType'],
+        metrics: ['offline']
+      },
+      chartData: {
+        columns: ['deviceType', 'offline'],
+        rows: []
+      }
+    }
+  },
+  created() {
+    this.fetchDeviceType()
+  },
+  methods: {
+    fetchDeviceType() {
+      deviceStaticsByOnline().then(response => {
+        response.data.forEach((item) => {
+          this.online += item.online
+          this.offline += item.offline
+        })
+        this.chartData.rows = response.data
+        this.chartDataPie.rows = [
+          { 'onlineStatus': '在线', 'deviceCount': this.online },
+          { 'onlineStatus': '离线', 'deviceCount': this.offline }
+        ]
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.flagBoxStyle {
+  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);
+}
+
+</style>
diff --git a/src/views/dataView/components/jobView.vue b/src/views/dataView/components/jobView.vue
new file mode 100644
index 0000000..d0be0dd
--- /dev/null
+++ b/src/views/dataView/components/jobView.vue
@@ -0,0 +1,92 @@
+<template>
+  <div>
+    <div class="flagBoxStyle">
+      <div class="flagStyle" />
+      <div>井数量分析</div>
+    </div>
+    <el-row>
+      <el-col>
+        <ve-bar
+          :data="chartData"
+          :grid="grid"
+          :extend="extend"
+          :settings="chartSettings"
+        />
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import { deviceStaticsByOnline } from '@/api/data/dataStatics'
+export default {
+  name: 'JobView',
+  data() {
+    return {
+      // 柱状图
+      extend: {
+        xAxis: {
+          axisLabel: {
+            rotate: 30,
+            margin: 30,
+            textStyle: {
+              align: 'center'
+            }
+          }
+        },
+        series: {
+          label: { show: true, position: 'top' },
+          barMaxWidth: 35 // 最大柱宽度
+        }
+      },
+      grid: {
+        right: 60
+      },
+      chartSettings: {
+        itemStyle: {
+          'barCategoryGap': 5
+        },
+        barWidth: 15,
+        labelMap: {
+          'deviceType': '权属单位',
+          'offline': '设备数量（个）'
+        },
+        dimension: ['deviceType'],
+        metrics: ['offline']
+      },
+      chartData: {
+        columns: ['deviceType', 'offline'],
+        rows: []
+      }
+    }
+  },
+  created() {
+    this.fetchDeviceType()
+  },
+  methods: {
+    fetchDeviceType() {
+      deviceStaticsByOnline().then(response => {
+        this.chartData.rows = response.data
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.flagBoxStyle {
+  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);
+}
+
+</style>
diff --git a/src/views/dataView/components/panelGroup.vue b/src/views/dataView/components/panelGroup.vue
new file mode 100644
index 0000000..9172cc9
--- /dev/null
+++ b/src/views/dataView/components/panelGroup.vue
@@ -0,0 +1,250 @@
+<template>
+  <el-row :gutter="20" class="panel-group">
+    <div>
+      <el-col>
+        <div class="flagBoxStyle">
+          <div class="flagStyle" />
+          <div>数据总体情况</div>
+        </div>
+      </el-col>
+    </div>
+    <div v-for="card in dataGroup" :key="card.title">
+      <el-col v-if="hasPerm(card.permission)" :xs="12" :sm="12" :lg="6" 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 slot-scope="scope">
+            <span>{{ scope.row[column.value] }}</span>
+          </template>
+        </el-table-column>
+      </el-table>
+    </el-dialog>
+  </el-row>
+</template>
+
+<script>
+import Card from '@/components/BigData/Card'
+import { wellCountByBfzt } from '@/api/well/well'
+import { deviceStaticByStatus, alarmNowStatic } from '@/api/data/dataStatics'
+import { jobCountByStatus } from '@/api/alarm/job'
+export default {
+  name: 'PanelGroup',
+  components: { Card },
+  data() {
+    return {
+      dialogFormVisible: false,
+      listLoading: false,
+      dataGroup: [
+        {
+          title: '井',
+          context: '--',
+          flags: '条',
+          icon: 'icon-well',
+          color: '#40c9c6',
+          permission: '/well/list'
+        },
+        {
+          title: '设备',
+          context: '--',
+          flags: '个',
+          icon: 'icon-device',
+          color: '#36a3f7',
+          permission: '/device/list'
+        },
+        {
+          title: '今日数据',
+          context: '--',
+          flags: '条',
+          icon: 'icon-alarm',
+          color: '#f4516c',
+          permission: '/alarm/now'
+        },
+        {
+          title: '离线设备',
+          context: '--',
+          flags: '个',
+          icon: 'icon-order',
+          color: '#f4516c',
+          permission: '/job/list'
+        }
+      ]
+    }
+  },
+  created() {
+    this.getWellCount()
+    this.getDeviceCount()
+    this.getAlarmCount()
+    this.getJobCount()
+  },
+  methods: {
+    goPage(card) {
+      if (card.title === '离线设备') {
+        this.dialogFormVisible = true
+      }
+    },
+    getWellCount() {
+      wellCountByBfzt().then(response => {
+        this.dataGroup[0].context = response.data.total
+      })
+    },
+    getDeviceCount() {
+      deviceStaticByStatus().then(response => {
+        this.dataGroup[1].context = response.data.total
+      })
+    },
+    getAlarmCount() {
+      alarmNowStatic().then(response => {
+        this.dataGroup[2].context = response.data.total
+      })
+    },
+    getJobCount() {
+      jobCountByStatus().then(response => {
+        const data = response.data
+        const total = data.beforeGet + data.beforeConfirm + data.inHandle
+        this.dataGroup[3].context = total
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.flagBoxStyle {
+  display: flex;
+  margin-bottom: 20px;
+  margin-top: -30px;
+}
+.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;
+  }
+  .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;
+      }
+    }
+  }
+}
+
+@media (max-width:550px) {
+  .card-panel-description {
+    display: none;
+  }
+
+  .card-panel-icon-wrapper {
+    float: none !important;
+    width: 100%;
+    height: 100%;
+    margin: 0 !important;
+
+    .svg-icon {
+      display: block;
+      margin: 14px auto !important;
+      float: none !important;
+    }
+  }
+}
+</style>
diff --git a/src/views/dataView/components/wellCountView.vue b/src/views/dataView/components/wellCountView.vue
new file mode 100644
index 0000000..5d87b28
--- /dev/null
+++ b/src/views/dataView/components/wellCountView.vue
@@ -0,0 +1,119 @@
+<template>
+  <div>
+    <div class="flagBoxStyle">
+      <div class="flagStyle" />
+      <div>井数量分析</div>
+    </div>
+    <el-row>
+      <el-col :span="8">
+        <ve-pie
+          :data="chartDataPie"
+          :extend="extendPie"
+        />
+      </el-col>
+      <el-col :span="16">
+        <ve-bar
+          :data="chartData"
+          :grid="grid"
+          :extend="extend"
+          :settings="chartSettings"
+        />
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import { deviceStaticsByOnline } from '@/api/data/dataStatics'
+export default {
+  name: 'WellCountView',
+  data() {
+    return {
+      online: 0,
+      offline: 0,
+      // 饼状图
+      extendPie: {
+        series: {
+          label: { show: true, position: 'outside', formatter: '{b}:{c}' },
+          radius: '45%'
+        }
+      },
+      chartDataPie: {
+        columns: ['onlineStatus', 'deviceCount'],
+        rows: []
+      },
+      // 柱状图
+      extend: {
+        xAxis: {
+          axisLabel: {
+            rotate: 30,
+            margin: 30,
+            textStyle: {
+              align: 'center'
+            }
+          }
+        },
+        series: {
+          label: { show: true, position: 'top' },
+          barMaxWidth: 35 // 最大柱宽度
+        }
+      },
+      grid: {
+        right: 60
+      },
+      chartSettings: {
+        itemStyle: {
+          'barCategoryGap': 5
+        },
+        barWidth: 15,
+        labelMap: {
+          'deviceType': '权属单位',
+          'offline': '设备数量（个）'
+        },
+        dimension: ['deviceType'],
+        metrics: ['offline']
+      },
+      chartData: {
+        columns: ['deviceType', 'offline'],
+        rows: []
+      }
+    }
+  },
+  created() {
+    this.fetchDeviceType()
+  },
+  methods: {
+    fetchDeviceType() {
+      deviceStaticsByOnline().then(response => {
+        response.data.forEach((item) => {
+          this.online += item.online
+          this.offline += item.offline
+        })
+        this.chartData.rows = response.data
+        this.chartDataPie.rows = [
+          { 'onlineStatus': '在线', 'deviceCount': this.online },
+          { 'onlineStatus': '离线', 'deviceCount': this.offline }
+        ]
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.flagBoxStyle {
+  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);
+}
+
+</style>
diff --git a/src/views/dataView/dataView.vue b/src/views/dataView/dataView.vue
new file mode 100644
index 0000000..e1e9977
--- /dev/null
+++ b/src/views/dataView/dataView.vue
@@ -0,0 +1,70 @@
+<template>
+  <div class="dashboard-container">
+    <el-row :gutter="2">
+      <el-col :span="18">
+        <!-- 数总体情况 -->
+        <el-col>
+          <el-card>
+            <panel-group />
+          </el-card>
+        </el-col>
+        <el-col :span="16">
+          <!-- 井数量分析 -->
+          <el-col>
+            <el-card>
+              <well-count-view />
+            </el-card>
+          </el-col>
+          <!-- 设备数量分析 -->
+          <el-col>
+            <el-card>
+              <device-count-view />
+            </el-card>
+          </el-col>
+        </el-col>
+        <el-col :span="8">
+          <el-card>
+            <alarm-view />
+          </el-card>
+        </el-col>
+      </el-col>
+      <el-col :span="6">
+        <el-col>
+          <el-card>
+            <alarm-status />
+          </el-card>
+        </el-col>
+        <el-col>
+          <el-card>
+            <job-view />
+          </el-card>
+        </el-col>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import panelGroup from './components/panelGroup'
+import alarmStatus from './components/alarmStatus'
+import wellCountView from './components/wellCountView'
+import deviceCountView from './components/deviceCountView'
+import alarmView from './components/alarmView'
+import jobView from './components/jobView'
+export default {
+  name: 'DataView',
+  components: { panelGroup, alarmStatus, wellCountView, deviceCountView, alarmView, jobView }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+// .dashboard {
+//   &-container {
+//     margin: 30px;
+//   }
+//   &-text {
+//     font-size: 30px;
+//     line-height: 46px;
+//   }
+// }
+</style>
diff --git a/src/views/overview/overviewAmap.vue b/src/views/overview/overviewAmap.vue
index fa1f599..a2963a2 100644
--- a/src/views/overview/overviewAmap.vue
+++ b/src/views/overview/overviewAmap.vue
@@ -3,7 +3,7 @@
   <div>
     <div class="overview-map-container">
       <!--地图-->
-      <a-map-container ref="map" :center="center" :zoom="zoom" :base-layer="baseLayer" :style="{height:(bodyHeight-20)+'px'}" vid="overview" class="map-demo" @ready="mapReady">
+      <a-map-container ref="map" :center="center" :zoom="zoom" :base-layer="baseLayer" :style="{height:(bodyHeight-70)+'px'}" vid="overview" class="map-demo" @ready="mapReady">
         <!--报警点位-->
         <a-map-marker v-for="alarmWell of alarmWells" :visible="showAlarm && alarmWell.visible" :position="alarmWell.coordinates" :offset="alarmOffset">
           <el-image :src="alarmIcon" :style="{'width':alarmIconSize[0]+'px','height':alarmIconSize[1]+'px'}" fit="fill" @click="openAlarmWindow(alarmWell.wellId, alarmWell.coordinates)" />
diff --git a/src/views/wellManage/postionCorrectWell.vue b/src/views/wellManage/postionCorrectWell.vue
index 7a0448b..154c63b 100644
--- a/src/views/wellManage/postionCorrectWell.vue
+++ b/src/views/wellManage/postionCorrectWell.vue
@@ -7,7 +7,7 @@
         :center="center"
         :zoom="zoom"
         :base-layer="baseLayer"
-        :style="{height:(bodyHeight-20)+'px'}"
+        :style="{height:(bodyHeight-70)+'px'}"
         vid="overview"
         class="map-demo"
         @ready="mapReady"
@@ -55,7 +55,6 @@
     <popupLocation
       ref="popupLocation"
       :lonlatpopup="lonLatPopup"
-      :sss="sssss"
       :show="locationWindowShow"
       @close="closePopupLocation"
     />
@@ -156,7 +155,7 @@
       this.layerWindowShow = false
       this.locationWindowShow = true
 
-      const { searchResultOffset, searchResultIcon, searchResultSize } = this
+      const { searchResultIcon, searchResultSize } = this
       const icon = new window.AMap.Icon({
         size: toSize(searchResultSize), // 图标尺寸
         image: searchResultIcon, // Icon的图像
@@ -165,7 +164,6 @@
       this.locationMarker = new window.AMap.Marker({
         icon: icon,
         position: this.locationCoordinates,
-        offset: toPixel(searchResultOffset),
         draggable: true,
         cursor: 'move'
       })
@@ -177,6 +175,8 @@
       })
     },
     closePopupLay() {
+      this.clearInfoWindow()
+      this.clearSearch()
       this.layerWindowShow = false
       this.fetchWellList()
     },
@@ -221,7 +221,6 @@
     // 过滤海量点，给markers赋visible值
     filterMassMarker(listQuery, showMessage = false) {
       const hideWellIds = []// 要隐藏的井编号
-      let center = [] // 待移动到的地图中心
       // 2. 整理查询条件
       const keywords = listQuery.keywords // 关键字
       const wellTypes = listQuery.wellTypes ? listQuery.wellTypes : listQuery.wellType ? [listQuery.wellType] : [] // 井类型
@@ -248,7 +247,7 @@
         if (show === false) {
           hideWellIds.push(marker.wellId)
         } else {
-          center = marker.lnglat
+          this.center = marker.lnglat
         }
         marker.visible = show
       }
@@ -268,7 +267,6 @@
     },
     // 加载聚合点
     mountClusters() {
-      const self = this
       // 聚合点数据应该是一组包含经纬度信息的数组。lnglat 为经纬度信息字段，weight 字段为可选数据，表示权重值，以权重高的点为中心进行聚合。
       var points = this.markers
       const markers = []
@@ -284,12 +282,6 @@
           offset: toPixel(-10, 0)
         }))
       }
-      // 添加聚合组件
-      const map = aMapManager.getMap()
-      const cluster = new window.AMap.MarkerClusterer(map, markers, {
-        gridSize: 80,
-        renderCluserMarker: self._renderCluserMarker,
-        maxZoom: 16 })
     },
     _renderCluserMarker(context) {
       console.log(context)