diff --git a/src/api/dashboard.js b/src/api/dashboard.js
index e69de29..0a4ddfc 100644
--- a/src/api/dashboard.js
+++ b/src/api/dashboard.js
@@ -0,0 +1,73 @@
+/**
+ * 井总览模块接口
+ */
+import request from '@/utils/request'
+
+// 用水量、噪声统计数据
+export function getWatchStatistic() {
+  return request({
+    url: 'waterStatistic/overview',
+    method: 'get'
+  })
+}
+// 水表数量
+export function waterMeterCount() {
+  return request({
+    url: 'waterMeterData/count',
+    method: 'get'
+  })
+}
+// 阀门数量
+export function valveCount() {
+  return request({
+    url: 'waterMeterData/count',
+    method: 'get'
+  })
+}
+
+// 查询一级分区各区用水量
+export function countByFirstArea(params) {
+  return request({
+    url: 'waterStatistic/countByFirstArea',
+    method: 'get',
+    params
+  })
+}
+
+// 查询一级分区7日用水量
+export function countByDayFirst(params) {
+  return request({
+    url: 'waterStatistic/countByDayFirst',
+    method: 'get',
+    params
+  })
+}
+
+// 查询二级分区各区用水量
+export function countBySecondArea(params) {
+  return request({
+    url: 'waterStatistic/countBySecondArea',
+    method: 'get',
+    params
+  })
+}
+
+// 查询二级分区水表告警
+export function alarmBySecondArea(params) {
+  return request({
+    url: 'waterStatistic/alarmBySecondArea',
+    method: 'get',
+    params
+  })
+}
+
+// 设备7日报警趋势
+export function alarmCountByDay(params) {
+  return request({
+    url: 'waterStatistic/alarmCountByDay',
+    method: 'get',
+    params
+  })
+}
+
+

diff --git a/src/api/dashboard.js b/src/api/dashboard.js
index e69de29..0a4ddfc 100644
--- a/src/api/dashboard.js
+++ b/src/api/dashboard.js
@@ -0,0 +1,73 @@
+/**
+ * 井总览模块接口
+ */
+import request from '@/utils/request'
+
+// 用水量、噪声统计数据
+export function getWatchStatistic() {
+  return request({
+    url: 'waterStatistic/overview',
+    method: 'get'
+  })
+}
+// 水表数量
+export function waterMeterCount() {
+  return request({
+    url: 'waterMeterData/count',
+    method: 'get'
+  })
+}
+// 阀门数量
+export function valveCount() {
+  return request({
+    url: 'waterMeterData/count',
+    method: 'get'
+  })
+}
+
+// 查询一级分区各区用水量
+export function countByFirstArea(params) {
+  return request({
+    url: 'waterStatistic/countByFirstArea',
+    method: 'get',
+    params
+  })
+}
+
+// 查询一级分区7日用水量
+export function countByDayFirst(params) {
+  return request({
+    url: 'waterStatistic/countByDayFirst',
+    method: 'get',
+    params
+  })
+}
+
+// 查询二级分区各区用水量
+export function countBySecondArea(params) {
+  return request({
+    url: 'waterStatistic/countBySecondArea',
+    method: 'get',
+    params
+  })
+}
+
+// 查询二级分区水表告警
+export function alarmBySecondArea(params) {
+  return request({
+    url: 'waterStatistic/alarmBySecondArea',
+    method: 'get',
+    params
+  })
+}
+
+// 设备7日报警趋势
+export function alarmCountByDay(params) {
+  return request({
+    url: 'waterStatistic/alarmCountByDay',
+    method: 'get',
+    params
+  })
+}
+
+
diff --git a/src/components/BigData/Card/index.vue b/src/components/BigData/Card/index.vue
index d71e609..45359c9 100644
--- a/src/components/BigData/Card/index.vue
+++ b/src/components/BigData/Card/index.vue
@@ -10,6 +10,7 @@
         </div>
         <div class="card-panel-num" >
           {{ context }}
+          <span style="font-size: 10px;color:#888">{{unit}}</span>
         </div>
       </div>
     </div>
@@ -39,6 +40,10 @@
     color: {
       type: String,
       default: '#40c9c6'
+    },
+    unit:{
+      type: String,
+      default:''
     }
   },
   computed: {

diff --git a/src/api/dashboard.js b/src/api/dashboard.js
index e69de29..0a4ddfc 100644
--- a/src/api/dashboard.js
+++ b/src/api/dashboard.js
@@ -0,0 +1,73 @@
+/**
+ * 井总览模块接口
+ */
+import request from '@/utils/request'
+
+// 用水量、噪声统计数据
+export function getWatchStatistic() {
+  return request({
+    url: 'waterStatistic/overview',
+    method: 'get'
+  })
+}
+// 水表数量
+export function waterMeterCount() {
+  return request({
+    url: 'waterMeterData/count',
+    method: 'get'
+  })
+}
+// 阀门数量
+export function valveCount() {
+  return request({
+    url: 'waterMeterData/count',
+    method: 'get'
+  })
+}
+
+// 查询一级分区各区用水量
+export function countByFirstArea(params) {
+  return request({
+    url: 'waterStatistic/countByFirstArea',
+    method: 'get',
+    params
+  })
+}
+
+// 查询一级分区7日用水量
+export function countByDayFirst(params) {
+  return request({
+    url: 'waterStatistic/countByDayFirst',
+    method: 'get',
+    params
+  })
+}
+
+// 查询二级分区各区用水量
+export function countBySecondArea(params) {
+  return request({
+    url: 'waterStatistic/countBySecondArea',
+    method: 'get',
+    params
+  })
+}
+
+// 查询二级分区水表告警
+export function alarmBySecondArea(params) {
+  return request({
+    url: 'waterStatistic/alarmBySecondArea',
+    method: 'get',
+    params
+  })
+}
+
+// 设备7日报警趋势
+export function alarmCountByDay(params) {
+  return request({
+    url: 'waterStatistic/alarmCountByDay',
+    method: 'get',
+    params
+  })
+}
+
+
diff --git a/src/components/BigData/Card/index.vue b/src/components/BigData/Card/index.vue
index d71e609..45359c9 100644
--- a/src/components/BigData/Card/index.vue
+++ b/src/components/BigData/Card/index.vue
@@ -10,6 +10,7 @@
         </div>
         <div class="card-panel-num" >
           {{ context }}
+          <span style="font-size: 10px;color:#888">{{unit}}</span>
         </div>
       </div>
     </div>
@@ -39,6 +40,10 @@
     color: {
       type: String,
       default: '#40c9c6'
+    },
+    unit:{
+      type: String,
+      default:''
     }
   },
   computed: {
diff --git a/src/components/BigData/Card1/index.vue b/src/components/BigData/Card1/index.vue
index 030b2dc..aa46454 100644
--- a/src/components/BigData/Card1/index.vue
+++ b/src/components/BigData/Card1/index.vue
@@ -1,10 +1,11 @@
 <template>
   <el-card :body-style="{ padding: '0px' }" shadow="always">
-    <div class="card-panel" >
-      <div :style="backgroundColor" class="card-panel-icon-wrapper">
-        <svg-icon :icon-class="icon" class-name="card-panel-icon" />
+    <div class="card-panel">
+      <div v-if="icon" :style="backgroundColor" class="card-panel-icon-wrapper">
+        <svg-icon :icon-class="icon" class-name="card-panel-icon"/>
       </div>
-      <div  class="card-panel-description">
+      <div v-else style="float:left; width: 20px;height: 100%;"></div>
+      <div class="card-panel-description">
         <!-- <div class="card-panel-text">
           {{ title[0] }} <span class="card-panel-num">{{ context[0] }}</span>
         </div>
@@ -13,18 +14,20 @@
         </div> -->
         <div class="two" v-if="title.length===2">
           <div class="card-panel-text">
-            {{ title[0] }} <span class="card-panel-num">{{ context[0] }}</span>
+            {{ title[0] }} <span class="card-panel-num">{{ context[0] }}<span
+            style="font-size: 10px;color:#888;margin-left: 5px">{{unit}}</span></span>
           </div>
-          <div class="card-panel-text" >
-            {{ title[1] }} <span class="card-panel-num">{{ context[1] }}</span>
+          <div class="card-panel-text">
+            {{ title[1] }} <span class="card-panel-num">{{ context[1] }}<span
+            style="font-size: 10px;color:#888;margin-left: 5px">{{unit}}</span></span>
           </div>
         </div>
         <div class="only" v-else>
           <div class="card-panel-text">
             {{ title[0] }}
           </div>
-          <div class="card-panel-num" >
-            {{ context[0] }}
+          <div class="card-panel-num">
+            {{ context[0] }}<span style="font-size: 10px;color:#888">{{unit}}</span>
           </div>
         </div>
       </div>
@@ -33,42 +36,46 @@
 </template>
 
 <script>
-export default {
-  name: 'Card1',
-  props: {
-    title: {
-      type: Array,
-      default: function() {
-        return ['标题', '标题']
+  export default {
+    name: 'Card1',
+    props: {
+      title: {
+        type: Array,
+        default: function () {
+          return ['标题', '标题']
+        }
+      },
+      subtitle: {
+        type: String,
+        default: ''
+      },
+      icon: {
+        type: String,
+        default: ''
+      },
+      context: {
+        type: Array,
+        default: function () {
+          return ['--', '--']
+        }
+      },
+      color: {
+        type: String,
+        default: '#40c9c6'
+      },
+      unit: {
+        type: String,
+        default: ''
       }
     },
-    subtitle: {
-      type: String,
-      default: ''
-    },
-    icon: {
-      type: String,
-      default: ''
-    },
-    context: {
-      type: Array,
-      default: function() {
-        return ['--', '--']
-      }
-    },
-    color: {
-      type: String,
-      default: '#40c9c6'
-    }
-  },
-  computed: {
-    backgroundColor() {
-      return {
-        color: this.color
+    computed: {
+      backgroundColor() {
+        return {
+          color: this.color
+        }
       }
     }
   }
-}
 </script>
 
 <style lang="scss" scoped>
@@ -108,7 +115,7 @@
       overflow: auto;
       margin-left: 5px;
 
-      .two{
+      .two {
         .card-panel-text {
           line-height: 18px;
           color: rgba(0, 0, 0, 0.45);
@@ -123,7 +130,7 @@
           float: right;
         }
       }
-      .only{
+      .only {
         .card-panel-text {
           line-height: 18px;
           color: rgba(0, 0, 0, 0.45);

diff --git a/src/api/dashboard.js b/src/api/dashboard.js
index e69de29..0a4ddfc 100644
--- a/src/api/dashboard.js
+++ b/src/api/dashboard.js
@@ -0,0 +1,73 @@
+/**
+ * 井总览模块接口
+ */
+import request from '@/utils/request'
+
+// 用水量、噪声统计数据
+export function getWatchStatistic() {
+  return request({
+    url: 'waterStatistic/overview',
+    method: 'get'
+  })
+}
+// 水表数量
+export function waterMeterCount() {
+  return request({
+    url: 'waterMeterData/count',
+    method: 'get'
+  })
+}
+// 阀门数量
+export function valveCount() {
+  return request({
+    url: 'waterMeterData/count',
+    method: 'get'
+  })
+}
+
+// 查询一级分区各区用水量
+export function countByFirstArea(params) {
+  return request({
+    url: 'waterStatistic/countByFirstArea',
+    method: 'get',
+    params
+  })
+}
+
+// 查询一级分区7日用水量
+export function countByDayFirst(params) {
+  return request({
+    url: 'waterStatistic/countByDayFirst',
+    method: 'get',
+    params
+  })
+}
+
+// 查询二级分区各区用水量
+export function countBySecondArea(params) {
+  return request({
+    url: 'waterStatistic/countBySecondArea',
+    method: 'get',
+    params
+  })
+}
+
+// 查询二级分区水表告警
+export function alarmBySecondArea(params) {
+  return request({
+    url: 'waterStatistic/alarmBySecondArea',
+    method: 'get',
+    params
+  })
+}
+
+// 设备7日报警趋势
+export function alarmCountByDay(params) {
+  return request({
+    url: 'waterStatistic/alarmCountByDay',
+    method: 'get',
+    params
+  })
+}
+
+
diff --git a/src/components/BigData/Card/index.vue b/src/components/BigData/Card/index.vue
index d71e609..45359c9 100644
--- a/src/components/BigData/Card/index.vue
+++ b/src/components/BigData/Card/index.vue
@@ -10,6 +10,7 @@
         </div>
         <div class="card-panel-num" >
           {{ context }}
+          <span style="font-size: 10px;color:#888">{{unit}}</span>
         </div>
       </div>
     </div>
@@ -39,6 +40,10 @@
     color: {
       type: String,
       default: '#40c9c6'
+    },
+    unit:{
+      type: String,
+      default:''
     }
   },
   computed: {
diff --git a/src/components/BigData/Card1/index.vue b/src/components/BigData/Card1/index.vue
index 030b2dc..aa46454 100644
--- a/src/components/BigData/Card1/index.vue
+++ b/src/components/BigData/Card1/index.vue
@@ -1,10 +1,11 @@
 <template>
   <el-card :body-style="{ padding: '0px' }" shadow="always">
-    <div class="card-panel" >
-      <div :style="backgroundColor" class="card-panel-icon-wrapper">
-        <svg-icon :icon-class="icon" class-name="card-panel-icon" />
+    <div class="card-panel">
+      <div v-if="icon" :style="backgroundColor" class="card-panel-icon-wrapper">
+        <svg-icon :icon-class="icon" class-name="card-panel-icon"/>
       </div>
-      <div  class="card-panel-description">
+      <div v-else style="float:left; width: 20px;height: 100%;"></div>
+      <div class="card-panel-description">
         <!-- <div class="card-panel-text">
           {{ title[0] }} <span class="card-panel-num">{{ context[0] }}</span>
         </div>
@@ -13,18 +14,20 @@
         </div> -->
         <div class="two" v-if="title.length===2">
           <div class="card-panel-text">
-            {{ title[0] }} <span class="card-panel-num">{{ context[0] }}</span>
+            {{ title[0] }} <span class="card-panel-num">{{ context[0] }}<span
+            style="font-size: 10px;color:#888;margin-left: 5px">{{unit}}</span></span>
           </div>
-          <div class="card-panel-text" >
-            {{ title[1] }} <span class="card-panel-num">{{ context[1] }}</span>
+          <div class="card-panel-text">
+            {{ title[1] }} <span class="card-panel-num">{{ context[1] }}<span
+            style="font-size: 10px;color:#888;margin-left: 5px">{{unit}}</span></span>
           </div>
         </div>
         <div class="only" v-else>
           <div class="card-panel-text">
             {{ title[0] }}
           </div>
-          <div class="card-panel-num" >
-            {{ context[0] }}
+          <div class="card-panel-num">
+            {{ context[0] }}<span style="font-size: 10px;color:#888">{{unit}}</span>
           </div>
         </div>
       </div>
@@ -33,42 +36,46 @@
 </template>
 
 <script>
-export default {
-  name: 'Card1',
-  props: {
-    title: {
-      type: Array,
-      default: function() {
-        return ['标题', '标题']
+  export default {
+    name: 'Card1',
+    props: {
+      title: {
+        type: Array,
+        default: function () {
+          return ['标题', '标题']
+        }
+      },
+      subtitle: {
+        type: String,
+        default: ''
+      },
+      icon: {
+        type: String,
+        default: ''
+      },
+      context: {
+        type: Array,
+        default: function () {
+          return ['--', '--']
+        }
+      },
+      color: {
+        type: String,
+        default: '#40c9c6'
+      },
+      unit: {
+        type: String,
+        default: ''
       }
     },
-    subtitle: {
-      type: String,
-      default: ''
-    },
-    icon: {
-      type: String,
-      default: ''
-    },
-    context: {
-      type: Array,
-      default: function() {
-        return ['--', '--']
-      }
-    },
-    color: {
-      type: String,
-      default: '#40c9c6'
-    }
-  },
-  computed: {
-    backgroundColor() {
-      return {
-        color: this.color
+    computed: {
+      backgroundColor() {
+        return {
+          color: this.color
+        }
       }
     }
   }
-}
 </script>
 
 <style lang="scss" scoped>
@@ -108,7 +115,7 @@
       overflow: auto;
       margin-left: 5px;
 
-      .two{
+      .two {
         .card-panel-text {
           line-height: 18px;
           color: rgba(0, 0, 0, 0.45);
@@ -123,7 +130,7 @@
           float: right;
         }
       }
-      .only{
+      .only {
         .card-panel-text {
           line-height: 18px;
           color: rgba(0, 0, 0, 0.45);
diff --git a/src/icons/svg/icon-noise.svg b/src/icons/svg/icon-noise.svg
new file mode 100644
index 0000000..00bef71
--- /dev/null
+++ b/src/icons/svg/icon-noise.svg
@@ -0,0 +1,2 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1648634383080" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2093" xmlns:xlink="http://www.w3.org/1999/xlink" width="128" height="128"><defs><style type="text/css">@font-face { font-family: feedback-iconfont; src: url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.woff2?t=1630033759944") format("woff2"), url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.woff?t=1630033759944") format("woff"), url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.ttf?t=1630033759944") format("truetype"); }
+</style></defs><path d="M875.039 549.868c-25.436 0-47.411 13.91-59.3 34.4h-125.9l-99.564-199.177-76.703 281.23-51.528-566.757-67.461-5.735-130.8 490.44H49.397v68.802h267.259l94.464-354.268 51.235 563.733 67.451 5.913 79.432-291.445 38.077 76.057h168.428c11.91 20.419 33.864 34.391 59.3 34.391 37.98 0 68.792-30.879 68.792-68.797-0.005-38.062-30.817-68.787-68.797-68.787z" p-id="2094"></path></svg>
\ No newline at end of file

diff --git a/src/api/dashboard.js b/src/api/dashboard.js
index e69de29..0a4ddfc 100644
--- a/src/api/dashboard.js
+++ b/src/api/dashboard.js
@@ -0,0 +1,73 @@
+/**
+ * 井总览模块接口
+ */
+import request from '@/utils/request'
+
+// 用水量、噪声统计数据
+export function getWatchStatistic() {
+  return request({
+    url: 'waterStatistic/overview',
+    method: 'get'
+  })
+}
+// 水表数量
+export function waterMeterCount() {
+  return request({
+    url: 'waterMeterData/count',
+    method: 'get'
+  })
+}
+// 阀门数量
+export function valveCount() {
+  return request({
+    url: 'waterMeterData/count',
+    method: 'get'
+  })
+}
+
+// 查询一级分区各区用水量
+export function countByFirstArea(params) {
+  return request({
+    url: 'waterStatistic/countByFirstArea',
+    method: 'get',
+    params
+  })
+}
+
+// 查询一级分区7日用水量
+export function countByDayFirst(params) {
+  return request({
+    url: 'waterStatistic/countByDayFirst',
+    method: 'get',
+    params
+  })
+}
+
+// 查询二级分区各区用水量
+export function countBySecondArea(params) {
+  return request({
+    url: 'waterStatistic/countBySecondArea',
+    method: 'get',
+    params
+  })
+}
+
+// 查询二级分区水表告警
+export function alarmBySecondArea(params) {
+  return request({
+    url: 'waterStatistic/alarmBySecondArea',
+    method: 'get',
+    params
+  })
+}
+
+// 设备7日报警趋势
+export function alarmCountByDay(params) {
+  return request({
+    url: 'waterStatistic/alarmCountByDay',
+    method: 'get',
+    params
+  })
+}
+
+
diff --git a/src/components/BigData/Card/index.vue b/src/components/BigData/Card/index.vue
index d71e609..45359c9 100644
--- a/src/components/BigData/Card/index.vue
+++ b/src/components/BigData/Card/index.vue
@@ -10,6 +10,7 @@
         </div>
         <div class="card-panel-num" >
           {{ context }}
+          <span style="font-size: 10px;color:#888">{{unit}}</span>
         </div>
       </div>
     </div>
@@ -39,6 +40,10 @@
     color: {
       type: String,
       default: '#40c9c6'
+    },
+    unit:{
+      type: String,
+      default:''
     }
   },
   computed: {
diff --git a/src/components/BigData/Card1/index.vue b/src/components/BigData/Card1/index.vue
index 030b2dc..aa46454 100644
--- a/src/components/BigData/Card1/index.vue
+++ b/src/components/BigData/Card1/index.vue
@@ -1,10 +1,11 @@
 <template>
   <el-card :body-style="{ padding: '0px' }" shadow="always">
-    <div class="card-panel" >
-      <div :style="backgroundColor" class="card-panel-icon-wrapper">
-        <svg-icon :icon-class="icon" class-name="card-panel-icon" />
+    <div class="card-panel">
+      <div v-if="icon" :style="backgroundColor" class="card-panel-icon-wrapper">
+        <svg-icon :icon-class="icon" class-name="card-panel-icon"/>
       </div>
-      <div  class="card-panel-description">
+      <div v-else style="float:left; width: 20px;height: 100%;"></div>
+      <div class="card-panel-description">
         <!-- <div class="card-panel-text">
           {{ title[0] }} <span class="card-panel-num">{{ context[0] }}</span>
         </div>
@@ -13,18 +14,20 @@
         </div> -->
         <div class="two" v-if="title.length===2">
           <div class="card-panel-text">
-            {{ title[0] }} <span class="card-panel-num">{{ context[0] }}</span>
+            {{ title[0] }} <span class="card-panel-num">{{ context[0] }}<span
+            style="font-size: 10px;color:#888;margin-left: 5px">{{unit}}</span></span>
           </div>
-          <div class="card-panel-text" >
-            {{ title[1] }} <span class="card-panel-num">{{ context[1] }}</span>
+          <div class="card-panel-text">
+            {{ title[1] }} <span class="card-panel-num">{{ context[1] }}<span
+            style="font-size: 10px;color:#888;margin-left: 5px">{{unit}}</span></span>
           </div>
         </div>
         <div class="only" v-else>
           <div class="card-panel-text">
             {{ title[0] }}
           </div>
-          <div class="card-panel-num" >
-            {{ context[0] }}
+          <div class="card-panel-num">
+            {{ context[0] }}<span style="font-size: 10px;color:#888">{{unit}}</span>
           </div>
         </div>
       </div>
@@ -33,42 +36,46 @@
 </template>
 
 <script>
-export default {
-  name: 'Card1',
-  props: {
-    title: {
-      type: Array,
-      default: function() {
-        return ['标题', '标题']
+  export default {
+    name: 'Card1',
+    props: {
+      title: {
+        type: Array,
+        default: function () {
+          return ['标题', '标题']
+        }
+      },
+      subtitle: {
+        type: String,
+        default: ''
+      },
+      icon: {
+        type: String,
+        default: ''
+      },
+      context: {
+        type: Array,
+        default: function () {
+          return ['--', '--']
+        }
+      },
+      color: {
+        type: String,
+        default: '#40c9c6'
+      },
+      unit: {
+        type: String,
+        default: ''
       }
     },
-    subtitle: {
-      type: String,
-      default: ''
-    },
-    icon: {
-      type: String,
-      default: ''
-    },
-    context: {
-      type: Array,
-      default: function() {
-        return ['--', '--']
-      }
-    },
-    color: {
-      type: String,
-      default: '#40c9c6'
-    }
-  },
-  computed: {
-    backgroundColor() {
-      return {
-        color: this.color
+    computed: {
+      backgroundColor() {
+        return {
+          color: this.color
+        }
       }
     }
   }
-}
 </script>
 
 <style lang="scss" scoped>
@@ -108,7 +115,7 @@
       overflow: auto;
       margin-left: 5px;
 
-      .two{
+      .two {
         .card-panel-text {
           line-height: 18px;
           color: rgba(0, 0, 0, 0.45);
@@ -123,7 +130,7 @@
           float: right;
         }
       }
-      .only{
+      .only {
         .card-panel-text {
           line-height: 18px;
           color: rgba(0, 0, 0, 0.45);
diff --git a/src/icons/svg/icon-noise.svg b/src/icons/svg/icon-noise.svg
new file mode 100644
index 0000000..00bef71
--- /dev/null
+++ b/src/icons/svg/icon-noise.svg
@@ -0,0 +1,2 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1648634383080" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2093" xmlns:xlink="http://www.w3.org/1999/xlink" width="128" height="128"><defs><style type="text/css">@font-face { font-family: feedback-iconfont; src: url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.woff2?t=1630033759944") format("woff2"), url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.woff?t=1630033759944") format("woff"), url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.ttf?t=1630033759944") format("truetype"); }
+</style></defs><path d="M875.039 549.868c-25.436 0-47.411 13.91-59.3 34.4h-125.9l-99.564-199.177-76.703 281.23-51.528-566.757-67.461-5.735-130.8 490.44H49.397v68.802h267.259l94.464-354.268 51.235 563.733 67.451 5.913 79.432-291.445 38.077 76.057h168.428c11.91 20.419 33.864 34.391 59.3 34.391 37.98 0 68.792-30.879 68.792-68.797-0.005-38.062-30.817-68.787-68.797-68.787z" p-id="2094"></path></svg>
\ No newline at end of file
diff --git a/src/icons/svg/icon-valve.svg b/src/icons/svg/icon-valve.svg
new file mode 100644
index 0000000..f5d96e2
--- /dev/null
+++ b/src/icons/svg/icon-valve.svg
@@ -0,0 +1,2 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1648634707805" class="icon" viewBox="0 0 1090 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3809" xmlns:xlink="http://www.w3.org/1999/xlink" width="136.25" height="128"><defs><style type="text/css">@font-face { font-family: feedback-iconfont; src: url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.woff2?t=1630033759944") format("woff2"), url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.woff?t=1630033759944") format("woff"), url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.ttf?t=1630033759944") format("truetype"); }
+</style></defs><path d="M502.944 296.975V143.052h-231.98c-31.587 0-57.321-24.93-57.321-55.526 0-30.598 25.75-55.526 57.321-55.526H833.06c31.571 0 57.306 24.93 57.306 55.525 0 30.922-25.735 55.526-57.29 55.526h-231.64v153.924h18.179c21.615 0 39.112 16.955 39.112 37.904v90.565l-213.105-0.34v-90.225c0-20.95 17.497-37.904 39.128-37.904h18.194z m-381.74 590.293v63.84c0 9.306-7.834 16.955-17.698 16.955H58.231c-9.862-0.001-17.698-7.65-17.698-17.296V542.472c0-9.63 7.835-17.28 17.698-17.28h45.274c9.863 0 17.698 7.65 17.698 17.28v83.133h150.55c6.272-85.518 79.247-152.95 168.387-152.95h207.98c89.14 0 162.116 67.432 168.403 152.95h150.873v-83.798c0-9.29 7.495-16.615 17.033-16.615h46.297c9.523 0 17.001 7.308 17.001 16.615v409.625c0.341 9.321-7.478 16.63-17.016 16.63h-46.297c-9.523 0-17.018-7.309-17.018-16.63v-64.165H805.36C780.755 948.583 719.655 992 648.119 992H440.142c-71.52 0-132.635-43.402-157.239-104.733H121.204z" p-id="3810"></path></svg>
\ No newline at end of file

diff --git a/src/api/dashboard.js b/src/api/dashboard.js
index e69de29..0a4ddfc 100644
--- a/src/api/dashboard.js
+++ b/src/api/dashboard.js
@@ -0,0 +1,73 @@
+/**
+ * 井总览模块接口
+ */
+import request from '@/utils/request'
+
+// 用水量、噪声统计数据
+export function getWatchStatistic() {
+  return request({
+    url: 'waterStatistic/overview',
+    method: 'get'
+  })
+}
+// 水表数量
+export function waterMeterCount() {
+  return request({
+    url: 'waterMeterData/count',
+    method: 'get'
+  })
+}
+// 阀门数量
+export function valveCount() {
+  return request({
+    url: 'waterMeterData/count',
+    method: 'get'
+  })
+}
+
+// 查询一级分区各区用水量
+export function countByFirstArea(params) {
+  return request({
+    url: 'waterStatistic/countByFirstArea',
+    method: 'get',
+    params
+  })
+}
+
+// 查询一级分区7日用水量
+export function countByDayFirst(params) {
+  return request({
+    url: 'waterStatistic/countByDayFirst',
+    method: 'get',
+    params
+  })
+}
+
+// 查询二级分区各区用水量
+export function countBySecondArea(params) {
+  return request({
+    url: 'waterStatistic/countBySecondArea',
+    method: 'get',
+    params
+  })
+}
+
+// 查询二级分区水表告警
+export function alarmBySecondArea(params) {
+  return request({
+    url: 'waterStatistic/alarmBySecondArea',
+    method: 'get',
+    params
+  })
+}
+
+// 设备7日报警趋势
+export function alarmCountByDay(params) {
+  return request({
+    url: 'waterStatistic/alarmCountByDay',
+    method: 'get',
+    params
+  })
+}
+
+
diff --git a/src/components/BigData/Card/index.vue b/src/components/BigData/Card/index.vue
index d71e609..45359c9 100644
--- a/src/components/BigData/Card/index.vue
+++ b/src/components/BigData/Card/index.vue
@@ -10,6 +10,7 @@
         </div>
         <div class="card-panel-num" >
           {{ context }}
+          <span style="font-size: 10px;color:#888">{{unit}}</span>
         </div>
       </div>
     </div>
@@ -39,6 +40,10 @@
     color: {
       type: String,
       default: '#40c9c6'
+    },
+    unit:{
+      type: String,
+      default:''
     }
   },
   computed: {
diff --git a/src/components/BigData/Card1/index.vue b/src/components/BigData/Card1/index.vue
index 030b2dc..aa46454 100644
--- a/src/components/BigData/Card1/index.vue
+++ b/src/components/BigData/Card1/index.vue
@@ -1,10 +1,11 @@
 <template>
   <el-card :body-style="{ padding: '0px' }" shadow="always">
-    <div class="card-panel" >
-      <div :style="backgroundColor" class="card-panel-icon-wrapper">
-        <svg-icon :icon-class="icon" class-name="card-panel-icon" />
+    <div class="card-panel">
+      <div v-if="icon" :style="backgroundColor" class="card-panel-icon-wrapper">
+        <svg-icon :icon-class="icon" class-name="card-panel-icon"/>
       </div>
-      <div  class="card-panel-description">
+      <div v-else style="float:left; width: 20px;height: 100%;"></div>
+      <div class="card-panel-description">
         <!-- <div class="card-panel-text">
           {{ title[0] }} <span class="card-panel-num">{{ context[0] }}</span>
         </div>
@@ -13,18 +14,20 @@
         </div> -->
         <div class="two" v-if="title.length===2">
           <div class="card-panel-text">
-            {{ title[0] }} <span class="card-panel-num">{{ context[0] }}</span>
+            {{ title[0] }} <span class="card-panel-num">{{ context[0] }}<span
+            style="font-size: 10px;color:#888;margin-left: 5px">{{unit}}</span></span>
           </div>
-          <div class="card-panel-text" >
-            {{ title[1] }} <span class="card-panel-num">{{ context[1] }}</span>
+          <div class="card-panel-text">
+            {{ title[1] }} <span class="card-panel-num">{{ context[1] }}<span
+            style="font-size: 10px;color:#888;margin-left: 5px">{{unit}}</span></span>
           </div>
         </div>
         <div class="only" v-else>
           <div class="card-panel-text">
             {{ title[0] }}
           </div>
-          <div class="card-panel-num" >
-            {{ context[0] }}
+          <div class="card-panel-num">
+            {{ context[0] }}<span style="font-size: 10px;color:#888">{{unit}}</span>
           </div>
         </div>
       </div>
@@ -33,42 +36,46 @@
 </template>
 
 <script>
-export default {
-  name: 'Card1',
-  props: {
-    title: {
-      type: Array,
-      default: function() {
-        return ['标题', '标题']
+  export default {
+    name: 'Card1',
+    props: {
+      title: {
+        type: Array,
+        default: function () {
+          return ['标题', '标题']
+        }
+      },
+      subtitle: {
+        type: String,
+        default: ''
+      },
+      icon: {
+        type: String,
+        default: ''
+      },
+      context: {
+        type: Array,
+        default: function () {
+          return ['--', '--']
+        }
+      },
+      color: {
+        type: String,
+        default: '#40c9c6'
+      },
+      unit: {
+        type: String,
+        default: ''
       }
     },
-    subtitle: {
-      type: String,
-      default: ''
-    },
-    icon: {
-      type: String,
-      default: ''
-    },
-    context: {
-      type: Array,
-      default: function() {
-        return ['--', '--']
-      }
-    },
-    color: {
-      type: String,
-      default: '#40c9c6'
-    }
-  },
-  computed: {
-    backgroundColor() {
-      return {
-        color: this.color
+    computed: {
+      backgroundColor() {
+        return {
+          color: this.color
+        }
       }
     }
   }
-}
 </script>
 
 <style lang="scss" scoped>
@@ -108,7 +115,7 @@
       overflow: auto;
       margin-left: 5px;
 
-      .two{
+      .two {
         .card-panel-text {
           line-height: 18px;
           color: rgba(0, 0, 0, 0.45);
@@ -123,7 +130,7 @@
           float: right;
         }
       }
-      .only{
+      .only {
         .card-panel-text {
           line-height: 18px;
           color: rgba(0, 0, 0, 0.45);
diff --git a/src/icons/svg/icon-noise.svg b/src/icons/svg/icon-noise.svg
new file mode 100644
index 0000000..00bef71
--- /dev/null
+++ b/src/icons/svg/icon-noise.svg
@@ -0,0 +1,2 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1648634383080" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2093" xmlns:xlink="http://www.w3.org/1999/xlink" width="128" height="128"><defs><style type="text/css">@font-face { font-family: feedback-iconfont; src: url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.woff2?t=1630033759944") format("woff2"), url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.woff?t=1630033759944") format("woff"), url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.ttf?t=1630033759944") format("truetype"); }
+</style></defs><path d="M875.039 549.868c-25.436 0-47.411 13.91-59.3 34.4h-125.9l-99.564-199.177-76.703 281.23-51.528-566.757-67.461-5.735-130.8 490.44H49.397v68.802h267.259l94.464-354.268 51.235 563.733 67.451 5.913 79.432-291.445 38.077 76.057h168.428c11.91 20.419 33.864 34.391 59.3 34.391 37.98 0 68.792-30.879 68.792-68.797-0.005-38.062-30.817-68.787-68.797-68.787z" p-id="2094"></path></svg>
\ No newline at end of file
diff --git a/src/icons/svg/icon-valve.svg b/src/icons/svg/icon-valve.svg
new file mode 100644
index 0000000..f5d96e2
--- /dev/null
+++ b/src/icons/svg/icon-valve.svg
@@ -0,0 +1,2 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1648634707805" class="icon" viewBox="0 0 1090 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3809" xmlns:xlink="http://www.w3.org/1999/xlink" width="136.25" height="128"><defs><style type="text/css">@font-face { font-family: feedback-iconfont; src: url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.woff2?t=1630033759944") format("woff2"), url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.woff?t=1630033759944") format("woff"), url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.ttf?t=1630033759944") format("truetype"); }
+</style></defs><path d="M502.944 296.975V143.052h-231.98c-31.587 0-57.321-24.93-57.321-55.526 0-30.598 25.75-55.526 57.321-55.526H833.06c31.571 0 57.306 24.93 57.306 55.525 0 30.922-25.735 55.526-57.29 55.526h-231.64v153.924h18.179c21.615 0 39.112 16.955 39.112 37.904v90.565l-213.105-0.34v-90.225c0-20.95 17.497-37.904 39.128-37.904h18.194z m-381.74 590.293v63.84c0 9.306-7.834 16.955-17.698 16.955H58.231c-9.862-0.001-17.698-7.65-17.698-17.296V542.472c0-9.63 7.835-17.28 17.698-17.28h45.274c9.863 0 17.698 7.65 17.698 17.28v83.133h150.55c6.272-85.518 79.247-152.95 168.387-152.95h207.98c89.14 0 162.116 67.432 168.403 152.95h150.873v-83.798c0-9.29 7.495-16.615 17.033-16.615h46.297c9.523 0 17.001 7.308 17.001 16.615v409.625c0.341 9.321-7.478 16.63-17.016 16.63h-46.297c-9.523 0-17.018-7.309-17.018-16.63v-64.165H805.36C780.755 948.583 719.655 992 648.119 992H440.142c-71.52 0-132.635-43.402-157.239-104.733H121.204z" p-id="3810"></path></svg>
\ No newline at end of file
diff --git a/src/views/dashboard/components/PanelGroup.vue b/src/views/dashboard/components/PanelGroup.vue
index b72d289..332cbf9 100644
--- a/src/views/dashboard/components/PanelGroup.vue
+++ b/src/views/dashboard/components/PanelGroup.vue
@@ -1,12 +1,12 @@
 <template>
   <el-row class="panel-group">
     <div v-for="card in dataGroup1" :key="card.index" class="card-panel-col">
-      <card1 :title="card.title" :context="card.context" :icon="card.icon" :color="card.color"/>
+      <card1 :title="card.title" :context="card.context" :icon="card.icon" :color="card.color" :unit="card.unit"/>
     </div>
 
     <div v-for="card in dataGroup" :key="card.title" class="card-panel-col">
       <div v-if="hasPerm(card.permission)">
-        <card :title="card.title" :context="card.context" :icon="card.icon" :color="card.color" @click.native="goPage(card.path)"/>
+        <card :title="card.title" :context="card.context" :icon="card.icon" :unit="card.unit" :color="card.color" @click.native="goPage(card.path)"/>
       </div>
     </div>
   </el-row>
@@ -16,7 +16,7 @@
 import Card1 from '@/components/BigData/Card1'
 import Card from '@/components/BigData/Card'
 // 首页
-import { getWatchStatistic , waterMeterCount } from '@/api/overview'
+import { getWatchStatistic , waterMeterCount, valveCount } from '@/api/dashboard'
 // 根据布防数量统计井数量
 import { wellCountByBfzt } from '@/api/well'
 // 当前报警数
@@ -36,30 +36,33 @@
           context: ['--', '--'],
           icon: 'icon-water',
           color: '#40c9c6',
+          unit: '吨',
           index: 0
         },
         {
-          title: ['今日用水量', '昨日用水量'],
+          title: ['今日用水量', '生产厂区用水量'],
           context: ['--', '--'],
-          icon: 'icon-water',
+          icon: '',
           color: '#36a3f7',
+          unit: '吨',
           index: 1
         },
         {
-          title: ['实时噪声'],
+          title: ['滑道实时噪声'],
           context: ['--'],
-          icon: 'icon-device',
+          icon: 'icon-noise',
           color: '#f1c353',
+          unit: 'db',
           index: 2
         }
       ],
       dataGroup: [
         {
-          title: '设备总数',
+          title: '阀门数量',
           context: '--',
-          icon: 'icon-device',
+          icon: 'icon-valve',
           color: '#40c9c6',
-          path: '/deviceList',
+          path: '/deviceList?deviceType=20',
           permission: '/device/list'
         },
         {
@@ -67,11 +70,11 @@
           context: '--',
           icon: 'icon-watch',
           color: '#9694f7',
-          path: '/deviceList',
+          path: '/deviceList?deviceType=13',
           permission: '/device/list'
         },
         {
-          title: '当前报警数',
+          title: '报警信息',
           context: '--',
           icon: 'icon-alarm',
           color: '#f4516c',
@@ -83,10 +86,10 @@
   },
   mounted() {
     this.getWater()
-    this.getWellCount()
+    // this.getWellCount()
     this.getDeviceCount()
     this.getAlarmCount()
-    this.getJobCount()
+    // this.getJobCount()
   },
   methods: {
     refresh() {
@@ -97,24 +100,31 @@
       this.$router.push(path)
     },
     getWater() {
+      // 用水量
       getWatchStatistic().then(response => {
-        this.dataGroup1[0].context = [response.data.total, response.data.month]
-        this.dataGroup1[1].context = [response.data.today, response.data.yesterday]
-        this.dataGroup1[2].context = [Number(response.data.sound).toFixed(2)]
+        this.dataGroup1[0].context = [response.data.total?parseFloat(response.data.total).toFixed(0):'--', response.data.month?parseFloat(response.data.month).toFixed(0):'--']
+        this.dataGroup1[1].context = [response.data.today?parseFloat(response.data.today).toFixed(0):'--', response.data.yesterday?parseFloat(response.data.yesterday).toFixed(0):'--']
+        this.dataGroup1[2].context = [response.data.sound?Number(response.data.sound).toFixed(2):'--']
       })
-      waterMeterCount().then(response => {
-        this.dataGroup[1].context = response.data
-      })
+
     },
-    getWellCount() {
-      wellCountByBfzt().then(response => {
-        this.dataGroup[0].context = response.data.total
-      })
-    },
+    // getWellCount() {
+    //   wellCountByBfzt().then(response => {
+    //     this.dataGroup[0].context = response.data.total
+    //   })
+    // },
     getDeviceCount() {
       // deviceStaticByStatus().then(response => {
       //   this.dataGroup[1].context = response.data.total
       // })
+      // 阀门数量
+      valveCount().then(response => {
+        this.dataGroup[0].context = response.data
+      })
+      // 水表数量
+      waterMeterCount().then(response => {
+        this.dataGroup[1].context = response.data
+      })
     },
     getAlarmCount() {
       alarmNowStatic().then(response => {
@@ -159,7 +169,7 @@
   //   &:hover {
   //     .card-panel-icon-wrapper {
   //       color: #fff;
-        
+
   //     }
 
   //     .icon-people {

diff --git a/src/api/dashboard.js b/src/api/dashboard.js
index e69de29..0a4ddfc 100644
--- a/src/api/dashboard.js
+++ b/src/api/dashboard.js
@@ -0,0 +1,73 @@
+/**
+ * 井总览模块接口
+ */
+import request from '@/utils/request'
+
+// 用水量、噪声统计数据
+export function getWatchStatistic() {
+  return request({
+    url: 'waterStatistic/overview',
+    method: 'get'
+  })
+}
+// 水表数量
+export function waterMeterCount() {
+  return request({
+    url: 'waterMeterData/count',
+    method: 'get'
+  })
+}
+// 阀门数量
+export function valveCount() {
+  return request({
+    url: 'waterMeterData/count',
+    method: 'get'
+  })
+}
+
+// 查询一级分区各区用水量
+export function countByFirstArea(params) {
+  return request({
+    url: 'waterStatistic/countByFirstArea',
+    method: 'get',
+    params
+  })
+}
+
+// 查询一级分区7日用水量
+export function countByDayFirst(params) {
+  return request({
+    url: 'waterStatistic/countByDayFirst',
+    method: 'get',
+    params
+  })
+}
+
+// 查询二级分区各区用水量
+export function countBySecondArea(params) {
+  return request({
+    url: 'waterStatistic/countBySecondArea',
+    method: 'get',
+    params
+  })
+}
+
+// 查询二级分区水表告警
+export function alarmBySecondArea(params) {
+  return request({
+    url: 'waterStatistic/alarmBySecondArea',
+    method: 'get',
+    params
+  })
+}
+
+// 设备7日报警趋势
+export function alarmCountByDay(params) {
+  return request({
+    url: 'waterStatistic/alarmCountByDay',
+    method: 'get',
+    params
+  })
+}
+
+
diff --git a/src/components/BigData/Card/index.vue b/src/components/BigData/Card/index.vue
index d71e609..45359c9 100644
--- a/src/components/BigData/Card/index.vue
+++ b/src/components/BigData/Card/index.vue
@@ -10,6 +10,7 @@
         </div>
         <div class="card-panel-num" >
           {{ context }}
+          <span style="font-size: 10px;color:#888">{{unit}}</span>
         </div>
       </div>
     </div>
@@ -39,6 +40,10 @@
     color: {
       type: String,
       default: '#40c9c6'
+    },
+    unit:{
+      type: String,
+      default:''
     }
   },
   computed: {
diff --git a/src/components/BigData/Card1/index.vue b/src/components/BigData/Card1/index.vue
index 030b2dc..aa46454 100644
--- a/src/components/BigData/Card1/index.vue
+++ b/src/components/BigData/Card1/index.vue
@@ -1,10 +1,11 @@
 <template>
   <el-card :body-style="{ padding: '0px' }" shadow="always">
-    <div class="card-panel" >
-      <div :style="backgroundColor" class="card-panel-icon-wrapper">
-        <svg-icon :icon-class="icon" class-name="card-panel-icon" />
+    <div class="card-panel">
+      <div v-if="icon" :style="backgroundColor" class="card-panel-icon-wrapper">
+        <svg-icon :icon-class="icon" class-name="card-panel-icon"/>
       </div>
-      <div  class="card-panel-description">
+      <div v-else style="float:left; width: 20px;height: 100%;"></div>
+      <div class="card-panel-description">
         <!-- <div class="card-panel-text">
           {{ title[0] }} <span class="card-panel-num">{{ context[0] }}</span>
         </div>
@@ -13,18 +14,20 @@
         </div> -->
         <div class="two" v-if="title.length===2">
           <div class="card-panel-text">
-            {{ title[0] }} <span class="card-panel-num">{{ context[0] }}</span>
+            {{ title[0] }} <span class="card-panel-num">{{ context[0] }}<span
+            style="font-size: 10px;color:#888;margin-left: 5px">{{unit}}</span></span>
           </div>
-          <div class="card-panel-text" >
-            {{ title[1] }} <span class="card-panel-num">{{ context[1] }}</span>
+          <div class="card-panel-text">
+            {{ title[1] }} <span class="card-panel-num">{{ context[1] }}<span
+            style="font-size: 10px;color:#888;margin-left: 5px">{{unit}}</span></span>
           </div>
         </div>
         <div class="only" v-else>
           <div class="card-panel-text">
             {{ title[0] }}
           </div>
-          <div class="card-panel-num" >
-            {{ context[0] }}
+          <div class="card-panel-num">
+            {{ context[0] }}<span style="font-size: 10px;color:#888">{{unit}}</span>
           </div>
         </div>
       </div>
@@ -33,42 +36,46 @@
 </template>
 
 <script>
-export default {
-  name: 'Card1',
-  props: {
-    title: {
-      type: Array,
-      default: function() {
-        return ['标题', '标题']
+  export default {
+    name: 'Card1',
+    props: {
+      title: {
+        type: Array,
+        default: function () {
+          return ['标题', '标题']
+        }
+      },
+      subtitle: {
+        type: String,
+        default: ''
+      },
+      icon: {
+        type: String,
+        default: ''
+      },
+      context: {
+        type: Array,
+        default: function () {
+          return ['--', '--']
+        }
+      },
+      color: {
+        type: String,
+        default: '#40c9c6'
+      },
+      unit: {
+        type: String,
+        default: ''
       }
     },
-    subtitle: {
-      type: String,
-      default: ''
-    },
-    icon: {
-      type: String,
-      default: ''
-    },
-    context: {
-      type: Array,
-      default: function() {
-        return ['--', '--']
-      }
-    },
-    color: {
-      type: String,
-      default: '#40c9c6'
-    }
-  },
-  computed: {
-    backgroundColor() {
-      return {
-        color: this.color
+    computed: {
+      backgroundColor() {
+        return {
+          color: this.color
+        }
       }
     }
   }
-}
 </script>
 
 <style lang="scss" scoped>
@@ -108,7 +115,7 @@
       overflow: auto;
       margin-left: 5px;
 
-      .two{
+      .two {
         .card-panel-text {
           line-height: 18px;
           color: rgba(0, 0, 0, 0.45);
@@ -123,7 +130,7 @@
           float: right;
         }
       }
-      .only{
+      .only {
         .card-panel-text {
           line-height: 18px;
           color: rgba(0, 0, 0, 0.45);
diff --git a/src/icons/svg/icon-noise.svg b/src/icons/svg/icon-noise.svg
new file mode 100644
index 0000000..00bef71
--- /dev/null
+++ b/src/icons/svg/icon-noise.svg
@@ -0,0 +1,2 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1648634383080" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2093" xmlns:xlink="http://www.w3.org/1999/xlink" width="128" height="128"><defs><style type="text/css">@font-face { font-family: feedback-iconfont; src: url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.woff2?t=1630033759944") format("woff2"), url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.woff?t=1630033759944") format("woff"), url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.ttf?t=1630033759944") format("truetype"); }
+</style></defs><path d="M875.039 549.868c-25.436 0-47.411 13.91-59.3 34.4h-125.9l-99.564-199.177-76.703 281.23-51.528-566.757-67.461-5.735-130.8 490.44H49.397v68.802h267.259l94.464-354.268 51.235 563.733 67.451 5.913 79.432-291.445 38.077 76.057h168.428c11.91 20.419 33.864 34.391 59.3 34.391 37.98 0 68.792-30.879 68.792-68.797-0.005-38.062-30.817-68.787-68.797-68.787z" p-id="2094"></path></svg>
\ No newline at end of file
diff --git a/src/icons/svg/icon-valve.svg b/src/icons/svg/icon-valve.svg
new file mode 100644
index 0000000..f5d96e2
--- /dev/null
+++ b/src/icons/svg/icon-valve.svg
@@ -0,0 +1,2 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1648634707805" class="icon" viewBox="0 0 1090 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3809" xmlns:xlink="http://www.w3.org/1999/xlink" width="136.25" height="128"><defs><style type="text/css">@font-face { font-family: feedback-iconfont; src: url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.woff2?t=1630033759944") format("woff2"), url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.woff?t=1630033759944") format("woff"), url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.ttf?t=1630033759944") format("truetype"); }
+</style></defs><path d="M502.944 296.975V143.052h-231.98c-31.587 0-57.321-24.93-57.321-55.526 0-30.598 25.75-55.526 57.321-55.526H833.06c31.571 0 57.306 24.93 57.306 55.525 0 30.922-25.735 55.526-57.29 55.526h-231.64v153.924h18.179c21.615 0 39.112 16.955 39.112 37.904v90.565l-213.105-0.34v-90.225c0-20.95 17.497-37.904 39.128-37.904h18.194z m-381.74 590.293v63.84c0 9.306-7.834 16.955-17.698 16.955H58.231c-9.862-0.001-17.698-7.65-17.698-17.296V542.472c0-9.63 7.835-17.28 17.698-17.28h45.274c9.863 0 17.698 7.65 17.698 17.28v83.133h150.55c6.272-85.518 79.247-152.95 168.387-152.95h207.98c89.14 0 162.116 67.432 168.403 152.95h150.873v-83.798c0-9.29 7.495-16.615 17.033-16.615h46.297c9.523 0 17.001 7.308 17.001 16.615v409.625c0.341 9.321-7.478 16.63-17.016 16.63h-46.297c-9.523 0-17.018-7.309-17.018-16.63v-64.165H805.36C780.755 948.583 719.655 992 648.119 992H440.142c-71.52 0-132.635-43.402-157.239-104.733H121.204z" p-id="3810"></path></svg>
\ No newline at end of file
diff --git a/src/views/dashboard/components/PanelGroup.vue b/src/views/dashboard/components/PanelGroup.vue
index b72d289..332cbf9 100644
--- a/src/views/dashboard/components/PanelGroup.vue
+++ b/src/views/dashboard/components/PanelGroup.vue
@@ -1,12 +1,12 @@
 <template>
   <el-row class="panel-group">
     <div v-for="card in dataGroup1" :key="card.index" class="card-panel-col">
-      <card1 :title="card.title" :context="card.context" :icon="card.icon" :color="card.color"/>
+      <card1 :title="card.title" :context="card.context" :icon="card.icon" :color="card.color" :unit="card.unit"/>
     </div>
 
     <div v-for="card in dataGroup" :key="card.title" class="card-panel-col">
       <div v-if="hasPerm(card.permission)">
-        <card :title="card.title" :context="card.context" :icon="card.icon" :color="card.color" @click.native="goPage(card.path)"/>
+        <card :title="card.title" :context="card.context" :icon="card.icon" :unit="card.unit" :color="card.color" @click.native="goPage(card.path)"/>
       </div>
     </div>
   </el-row>
@@ -16,7 +16,7 @@
 import Card1 from '@/components/BigData/Card1'
 import Card from '@/components/BigData/Card'
 // 首页
-import { getWatchStatistic , waterMeterCount } from '@/api/overview'
+import { getWatchStatistic , waterMeterCount, valveCount } from '@/api/dashboard'
 // 根据布防数量统计井数量
 import { wellCountByBfzt } from '@/api/well'
 // 当前报警数
@@ -36,30 +36,33 @@
           context: ['--', '--'],
           icon: 'icon-water',
           color: '#40c9c6',
+          unit: '吨',
           index: 0
         },
         {
-          title: ['今日用水量', '昨日用水量'],
+          title: ['今日用水量', '生产厂区用水量'],
           context: ['--', '--'],
-          icon: 'icon-water',
+          icon: '',
           color: '#36a3f7',
+          unit: '吨',
           index: 1
         },
         {
-          title: ['实时噪声'],
+          title: ['滑道实时噪声'],
           context: ['--'],
-          icon: 'icon-device',
+          icon: 'icon-noise',
           color: '#f1c353',
+          unit: 'db',
           index: 2
         }
       ],
       dataGroup: [
         {
-          title: '设备总数',
+          title: '阀门数量',
           context: '--',
-          icon: 'icon-device',
+          icon: 'icon-valve',
           color: '#40c9c6',
-          path: '/deviceList',
+          path: '/deviceList?deviceType=20',
           permission: '/device/list'
         },
         {
@@ -67,11 +70,11 @@
           context: '--',
           icon: 'icon-watch',
           color: '#9694f7',
-          path: '/deviceList',
+          path: '/deviceList?deviceType=13',
           permission: '/device/list'
         },
         {
-          title: '当前报警数',
+          title: '报警信息',
           context: '--',
           icon: 'icon-alarm',
           color: '#f4516c',
@@ -83,10 +86,10 @@
   },
   mounted() {
     this.getWater()
-    this.getWellCount()
+    // this.getWellCount()
     this.getDeviceCount()
     this.getAlarmCount()
-    this.getJobCount()
+    // this.getJobCount()
   },
   methods: {
     refresh() {
@@ -97,24 +100,31 @@
       this.$router.push(path)
     },
     getWater() {
+      // 用水量
       getWatchStatistic().then(response => {
-        this.dataGroup1[0].context = [response.data.total, response.data.month]
-        this.dataGroup1[1].context = [response.data.today, response.data.yesterday]
-        this.dataGroup1[2].context = [Number(response.data.sound).toFixed(2)]
+        this.dataGroup1[0].context = [response.data.total?parseFloat(response.data.total).toFixed(0):'--', response.data.month?parseFloat(response.data.month).toFixed(0):'--']
+        this.dataGroup1[1].context = [response.data.today?parseFloat(response.data.today).toFixed(0):'--', response.data.yesterday?parseFloat(response.data.yesterday).toFixed(0):'--']
+        this.dataGroup1[2].context = [response.data.sound?Number(response.data.sound).toFixed(2):'--']
       })
-      waterMeterCount().then(response => {
-        this.dataGroup[1].context = response.data
-      })
+
     },
-    getWellCount() {
-      wellCountByBfzt().then(response => {
-        this.dataGroup[0].context = response.data.total
-      })
-    },
+    // getWellCount() {
+    //   wellCountByBfzt().then(response => {
+    //     this.dataGroup[0].context = response.data.total
+    //   })
+    // },
     getDeviceCount() {
       // deviceStaticByStatus().then(response => {
       //   this.dataGroup[1].context = response.data.total
       // })
+      // 阀门数量
+      valveCount().then(response => {
+        this.dataGroup[0].context = response.data
+      })
+      // 水表数量
+      waterMeterCount().then(response => {
+        this.dataGroup[1].context = response.data
+      })
     },
     getAlarmCount() {
       alarmNowStatic().then(response => {
@@ -159,7 +169,7 @@
   //   &:hover {
   //     .card-panel-icon-wrapper {
   //       color: #fff;
-        
+
   //     }
 
   //     .icon-people {
diff --git a/src/views/dashboard/components/waterCountByAreaBar.vue b/src/views/dashboard/components/waterCountByAreaBar.vue
index 1bdac48..c488923 100644
--- a/src/views/dashboard/components/waterCountByAreaBar.vue
+++ b/src/views/dashboard/components/waterCountByAreaBar.vue
@@ -1,9 +1,10 @@
 <template>
   <div class="container">
     <div class="statistic-container">
+      <el-button round size="mini" @click="setDefaultTime('year')">本年</el-button>
+      <el-button round size="mini" @click="setDefaultTime('season')">本季</el-button>
       <el-button round size="mini" @click="setDefaultTime('month')">本月</el-button>
-      <el-button round size="mini" @click="setDefaultTime('week')">近7日</el-button>
-      <el-button round size="mini" @click="setDefaultTime('yesterday')">昨日</el-button>
+      <el-button round size="mini" @click="setDefaultTime('week')">本周</el-button>
       <el-button round size="mini" @click="setDefaultTime('today')">今日</el-button>
       <el-date-picker
         v-model="timeRange"
@@ -107,7 +108,7 @@
   },
   mounted() {
     this.setDefaultTime('today')
-    this.fetchArea()
+    // this.fetchArea()
   },
   methods: {
     fetchArea() {
@@ -130,10 +131,11 @@
     },
     fetchData() {
       const params = {
-        areaId: this.areaId,
+        areaId: '110000',
         startTime: this.timeRange[0],
         endTime: this.timeRange[1]
       }
+      this.$emit('change', params)
       countBySecondArea(params).then(response => {
         this.isShow = false
         this.chartData.rows = response.data
@@ -153,7 +155,21 @@
       })
     },
     setDefaultTime(val) {
-      if (val === 'month') {
+      if (val === 'year') {
+        var today = new Date()
+        var tYear = today.getFullYear()
+        const beginTime = tYear + '-01-01'
+        const endTime = getDayTime(new Date().getTime())
+        this.timeRange = [beginTime, endTime.Format('yyyy-MM-dd')]
+      }if (val === 'season') {
+        var today = new Date()
+        var tYear = today.getFullYear()
+        var tMonth = today.getMonth() + 1
+        const oldMonth = tMonth<4?'01':(tMonth<7?'04':(tMonth<10?'07':'10'))
+        const beginTime = tYear + '-' + oldMonth + '-01'
+        const endTime = getDayTime(new Date().getTime())
+        this.timeRange = [beginTime, endTime.Format('yyyy-MM-dd')]
+      }else if (val === 'month') {
         var today = new Date()
         var tYear = today.getFullYear()
         var tMonth = today.getMonth() + 1
@@ -164,7 +180,8 @@
         const endTime = getDayTime(new Date().getTime())
         this.timeRange = [beginTime, endTime.Format('yyyy-MM-dd')]
       } else if (val === 'week') {
-        this.timeRange = [getDayTime(new Date().getTime() - 24 * 6 * 60 * 60 * 1000).Format('yyyy-MM-dd'), getDayTime(new Date().getTime()).Format('yyyy-MM-dd')]
+        const nowDayOfWeek =  new Date().getDay()-1
+        this.timeRange = [getDayTime(new Date().getTime() - 24 * nowDayOfWeek * 60 * 60 * 1000).Format('yyyy-MM-dd'), getDayTime(new Date().getTime()).Format('yyyy-MM-dd')]
       } else if (val === 'yesterday') {
         this.timeRange = [getDayTime(new Date().getTime() - 24 * 60 * 60 * 1000).Format('yyyy-MM-dd'), getDayTime(new Date().getTime() - 24 * 60 * 60 * 1000).Format('yyyy-MM-dd')]
       } else if (val === 'today') {

diff --git a/src/api/dashboard.js b/src/api/dashboard.js
index e69de29..0a4ddfc 100644
--- a/src/api/dashboard.js
+++ b/src/api/dashboard.js
@@ -0,0 +1,73 @@
+/**
+ * 井总览模块接口
+ */
+import request from '@/utils/request'
+
+// 用水量、噪声统计数据
+export function getWatchStatistic() {
+  return request({
+    url: 'waterStatistic/overview',
+    method: 'get'
+  })
+}
+// 水表数量
+export function waterMeterCount() {
+  return request({
+    url: 'waterMeterData/count',
+    method: 'get'
+  })
+}
+// 阀门数量
+export function valveCount() {
+  return request({
+    url: 'waterMeterData/count',
+    method: 'get'
+  })
+}
+
+// 查询一级分区各区用水量
+export function countByFirstArea(params) {
+  return request({
+    url: 'waterStatistic/countByFirstArea',
+    method: 'get',
+    params
+  })
+}
+
+// 查询一级分区7日用水量
+export function countByDayFirst(params) {
+  return request({
+    url: 'waterStatistic/countByDayFirst',
+    method: 'get',
+    params
+  })
+}
+
+// 查询二级分区各区用水量
+export function countBySecondArea(params) {
+  return request({
+    url: 'waterStatistic/countBySecondArea',
+    method: 'get',
+    params
+  })
+}
+
+// 查询二级分区水表告警
+export function alarmBySecondArea(params) {
+  return request({
+    url: 'waterStatistic/alarmBySecondArea',
+    method: 'get',
+    params
+  })
+}
+
+// 设备7日报警趋势
+export function alarmCountByDay(params) {
+  return request({
+    url: 'waterStatistic/alarmCountByDay',
+    method: 'get',
+    params
+  })
+}
+
+
diff --git a/src/components/BigData/Card/index.vue b/src/components/BigData/Card/index.vue
index d71e609..45359c9 100644
--- a/src/components/BigData/Card/index.vue
+++ b/src/components/BigData/Card/index.vue
@@ -10,6 +10,7 @@
         </div>
         <div class="card-panel-num" >
           {{ context }}
+          <span style="font-size: 10px;color:#888">{{unit}}</span>
         </div>
       </div>
     </div>
@@ -39,6 +40,10 @@
     color: {
       type: String,
       default: '#40c9c6'
+    },
+    unit:{
+      type: String,
+      default:''
     }
   },
   computed: {
diff --git a/src/components/BigData/Card1/index.vue b/src/components/BigData/Card1/index.vue
index 030b2dc..aa46454 100644
--- a/src/components/BigData/Card1/index.vue
+++ b/src/components/BigData/Card1/index.vue
@@ -1,10 +1,11 @@
 <template>
   <el-card :body-style="{ padding: '0px' }" shadow="always">
-    <div class="card-panel" >
-      <div :style="backgroundColor" class="card-panel-icon-wrapper">
-        <svg-icon :icon-class="icon" class-name="card-panel-icon" />
+    <div class="card-panel">
+      <div v-if="icon" :style="backgroundColor" class="card-panel-icon-wrapper">
+        <svg-icon :icon-class="icon" class-name="card-panel-icon"/>
       </div>
-      <div  class="card-panel-description">
+      <div v-else style="float:left; width: 20px;height: 100%;"></div>
+      <div class="card-panel-description">
         <!-- <div class="card-panel-text">
           {{ title[0] }} <span class="card-panel-num">{{ context[0] }}</span>
         </div>
@@ -13,18 +14,20 @@
         </div> -->
         <div class="two" v-if="title.length===2">
           <div class="card-panel-text">
-            {{ title[0] }} <span class="card-panel-num">{{ context[0] }}</span>
+            {{ title[0] }} <span class="card-panel-num">{{ context[0] }}<span
+            style="font-size: 10px;color:#888;margin-left: 5px">{{unit}}</span></span>
           </div>
-          <div class="card-panel-text" >
-            {{ title[1] }} <span class="card-panel-num">{{ context[1] }}</span>
+          <div class="card-panel-text">
+            {{ title[1] }} <span class="card-panel-num">{{ context[1] }}<span
+            style="font-size: 10px;color:#888;margin-left: 5px">{{unit}}</span></span>
           </div>
         </div>
         <div class="only" v-else>
           <div class="card-panel-text">
             {{ title[0] }}
           </div>
-          <div class="card-panel-num" >
-            {{ context[0] }}
+          <div class="card-panel-num">
+            {{ context[0] }}<span style="font-size: 10px;color:#888">{{unit}}</span>
           </div>
         </div>
       </div>
@@ -33,42 +36,46 @@
 </template>
 
 <script>
-export default {
-  name: 'Card1',
-  props: {
-    title: {
-      type: Array,
-      default: function() {
-        return ['标题', '标题']
+  export default {
+    name: 'Card1',
+    props: {
+      title: {
+        type: Array,
+        default: function () {
+          return ['标题', '标题']
+        }
+      },
+      subtitle: {
+        type: String,
+        default: ''
+      },
+      icon: {
+        type: String,
+        default: ''
+      },
+      context: {
+        type: Array,
+        default: function () {
+          return ['--', '--']
+        }
+      },
+      color: {
+        type: String,
+        default: '#40c9c6'
+      },
+      unit: {
+        type: String,
+        default: ''
       }
     },
-    subtitle: {
-      type: String,
-      default: ''
-    },
-    icon: {
-      type: String,
-      default: ''
-    },
-    context: {
-      type: Array,
-      default: function() {
-        return ['--', '--']
-      }
-    },
-    color: {
-      type: String,
-      default: '#40c9c6'
-    }
-  },
-  computed: {
-    backgroundColor() {
-      return {
-        color: this.color
+    computed: {
+      backgroundColor() {
+        return {
+          color: this.color
+        }
       }
     }
   }
-}
 </script>
 
 <style lang="scss" scoped>
@@ -108,7 +115,7 @@
       overflow: auto;
       margin-left: 5px;
 
-      .two{
+      .two {
         .card-panel-text {
           line-height: 18px;
           color: rgba(0, 0, 0, 0.45);
@@ -123,7 +130,7 @@
           float: right;
         }
       }
-      .only{
+      .only {
         .card-panel-text {
           line-height: 18px;
           color: rgba(0, 0, 0, 0.45);
diff --git a/src/icons/svg/icon-noise.svg b/src/icons/svg/icon-noise.svg
new file mode 100644
index 0000000..00bef71
--- /dev/null
+++ b/src/icons/svg/icon-noise.svg
@@ -0,0 +1,2 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1648634383080" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2093" xmlns:xlink="http://www.w3.org/1999/xlink" width="128" height="128"><defs><style type="text/css">@font-face { font-family: feedback-iconfont; src: url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.woff2?t=1630033759944") format("woff2"), url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.woff?t=1630033759944") format("woff"), url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.ttf?t=1630033759944") format("truetype"); }
+</style></defs><path d="M875.039 549.868c-25.436 0-47.411 13.91-59.3 34.4h-125.9l-99.564-199.177-76.703 281.23-51.528-566.757-67.461-5.735-130.8 490.44H49.397v68.802h267.259l94.464-354.268 51.235 563.733 67.451 5.913 79.432-291.445 38.077 76.057h168.428c11.91 20.419 33.864 34.391 59.3 34.391 37.98 0 68.792-30.879 68.792-68.797-0.005-38.062-30.817-68.787-68.797-68.787z" p-id="2094"></path></svg>
\ No newline at end of file
diff --git a/src/icons/svg/icon-valve.svg b/src/icons/svg/icon-valve.svg
new file mode 100644
index 0000000..f5d96e2
--- /dev/null
+++ b/src/icons/svg/icon-valve.svg
@@ -0,0 +1,2 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1648634707805" class="icon" viewBox="0 0 1090 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3809" xmlns:xlink="http://www.w3.org/1999/xlink" width="136.25" height="128"><defs><style type="text/css">@font-face { font-family: feedback-iconfont; src: url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.woff2?t=1630033759944") format("woff2"), url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.woff?t=1630033759944") format("woff"), url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.ttf?t=1630033759944") format("truetype"); }
+</style></defs><path d="M502.944 296.975V143.052h-231.98c-31.587 0-57.321-24.93-57.321-55.526 0-30.598 25.75-55.526 57.321-55.526H833.06c31.571 0 57.306 24.93 57.306 55.525 0 30.922-25.735 55.526-57.29 55.526h-231.64v153.924h18.179c21.615 0 39.112 16.955 39.112 37.904v90.565l-213.105-0.34v-90.225c0-20.95 17.497-37.904 39.128-37.904h18.194z m-381.74 590.293v63.84c0 9.306-7.834 16.955-17.698 16.955H58.231c-9.862-0.001-17.698-7.65-17.698-17.296V542.472c0-9.63 7.835-17.28 17.698-17.28h45.274c9.863 0 17.698 7.65 17.698 17.28v83.133h150.55c6.272-85.518 79.247-152.95 168.387-152.95h207.98c89.14 0 162.116 67.432 168.403 152.95h150.873v-83.798c0-9.29 7.495-16.615 17.033-16.615h46.297c9.523 0 17.001 7.308 17.001 16.615v409.625c0.341 9.321-7.478 16.63-17.016 16.63h-46.297c-9.523 0-17.018-7.309-17.018-16.63v-64.165H805.36C780.755 948.583 719.655 992 648.119 992H440.142c-71.52 0-132.635-43.402-157.239-104.733H121.204z" p-id="3810"></path></svg>
\ No newline at end of file
diff --git a/src/views/dashboard/components/PanelGroup.vue b/src/views/dashboard/components/PanelGroup.vue
index b72d289..332cbf9 100644
--- a/src/views/dashboard/components/PanelGroup.vue
+++ b/src/views/dashboard/components/PanelGroup.vue
@@ -1,12 +1,12 @@
 <template>
   <el-row class="panel-group">
     <div v-for="card in dataGroup1" :key="card.index" class="card-panel-col">
-      <card1 :title="card.title" :context="card.context" :icon="card.icon" :color="card.color"/>
+      <card1 :title="card.title" :context="card.context" :icon="card.icon" :color="card.color" :unit="card.unit"/>
     </div>
 
     <div v-for="card in dataGroup" :key="card.title" class="card-panel-col">
       <div v-if="hasPerm(card.permission)">
-        <card :title="card.title" :context="card.context" :icon="card.icon" :color="card.color" @click.native="goPage(card.path)"/>
+        <card :title="card.title" :context="card.context" :icon="card.icon" :unit="card.unit" :color="card.color" @click.native="goPage(card.path)"/>
       </div>
     </div>
   </el-row>
@@ -16,7 +16,7 @@
 import Card1 from '@/components/BigData/Card1'
 import Card from '@/components/BigData/Card'
 // 首页
-import { getWatchStatistic , waterMeterCount } from '@/api/overview'
+import { getWatchStatistic , waterMeterCount, valveCount } from '@/api/dashboard'
 // 根据布防数量统计井数量
 import { wellCountByBfzt } from '@/api/well'
 // 当前报警数
@@ -36,30 +36,33 @@
           context: ['--', '--'],
           icon: 'icon-water',
           color: '#40c9c6',
+          unit: '吨',
           index: 0
         },
         {
-          title: ['今日用水量', '昨日用水量'],
+          title: ['今日用水量', '生产厂区用水量'],
           context: ['--', '--'],
-          icon: 'icon-water',
+          icon: '',
           color: '#36a3f7',
+          unit: '吨',
           index: 1
         },
         {
-          title: ['实时噪声'],
+          title: ['滑道实时噪声'],
           context: ['--'],
-          icon: 'icon-device',
+          icon: 'icon-noise',
           color: '#f1c353',
+          unit: 'db',
           index: 2
         }
       ],
       dataGroup: [
         {
-          title: '设备总数',
+          title: '阀门数量',
           context: '--',
-          icon: 'icon-device',
+          icon: 'icon-valve',
           color: '#40c9c6',
-          path: '/deviceList',
+          path: '/deviceList?deviceType=20',
           permission: '/device/list'
         },
         {
@@ -67,11 +70,11 @@
           context: '--',
           icon: 'icon-watch',
           color: '#9694f7',
-          path: '/deviceList',
+          path: '/deviceList?deviceType=13',
           permission: '/device/list'
         },
         {
-          title: '当前报警数',
+          title: '报警信息',
           context: '--',
           icon: 'icon-alarm',
           color: '#f4516c',
@@ -83,10 +86,10 @@
   },
   mounted() {
     this.getWater()
-    this.getWellCount()
+    // this.getWellCount()
     this.getDeviceCount()
     this.getAlarmCount()
-    this.getJobCount()
+    // this.getJobCount()
   },
   methods: {
     refresh() {
@@ -97,24 +100,31 @@
       this.$router.push(path)
     },
     getWater() {
+      // 用水量
       getWatchStatistic().then(response => {
-        this.dataGroup1[0].context = [response.data.total, response.data.month]
-        this.dataGroup1[1].context = [response.data.today, response.data.yesterday]
-        this.dataGroup1[2].context = [Number(response.data.sound).toFixed(2)]
+        this.dataGroup1[0].context = [response.data.total?parseFloat(response.data.total).toFixed(0):'--', response.data.month?parseFloat(response.data.month).toFixed(0):'--']
+        this.dataGroup1[1].context = [response.data.today?parseFloat(response.data.today).toFixed(0):'--', response.data.yesterday?parseFloat(response.data.yesterday).toFixed(0):'--']
+        this.dataGroup1[2].context = [response.data.sound?Number(response.data.sound).toFixed(2):'--']
       })
-      waterMeterCount().then(response => {
-        this.dataGroup[1].context = response.data
-      })
+
     },
-    getWellCount() {
-      wellCountByBfzt().then(response => {
-        this.dataGroup[0].context = response.data.total
-      })
-    },
+    // getWellCount() {
+    //   wellCountByBfzt().then(response => {
+    //     this.dataGroup[0].context = response.data.total
+    //   })
+    // },
     getDeviceCount() {
       // deviceStaticByStatus().then(response => {
       //   this.dataGroup[1].context = response.data.total
       // })
+      // 阀门数量
+      valveCount().then(response => {
+        this.dataGroup[0].context = response.data
+      })
+      // 水表数量
+      waterMeterCount().then(response => {
+        this.dataGroup[1].context = response.data
+      })
     },
     getAlarmCount() {
       alarmNowStatic().then(response => {
@@ -159,7 +169,7 @@
   //   &:hover {
   //     .card-panel-icon-wrapper {
   //       color: #fff;
-        
+
   //     }
 
   //     .icon-people {
diff --git a/src/views/dashboard/components/waterCountByAreaBar.vue b/src/views/dashboard/components/waterCountByAreaBar.vue
index 1bdac48..c488923 100644
--- a/src/views/dashboard/components/waterCountByAreaBar.vue
+++ b/src/views/dashboard/components/waterCountByAreaBar.vue
@@ -1,9 +1,10 @@
 <template>
   <div class="container">
     <div class="statistic-container">
+      <el-button round size="mini" @click="setDefaultTime('year')">本年</el-button>
+      <el-button round size="mini" @click="setDefaultTime('season')">本季</el-button>
       <el-button round size="mini" @click="setDefaultTime('month')">本月</el-button>
-      <el-button round size="mini" @click="setDefaultTime('week')">近7日</el-button>
-      <el-button round size="mini" @click="setDefaultTime('yesterday')">昨日</el-button>
+      <el-button round size="mini" @click="setDefaultTime('week')">本周</el-button>
       <el-button round size="mini" @click="setDefaultTime('today')">今日</el-button>
       <el-date-picker
         v-model="timeRange"
@@ -107,7 +108,7 @@
   },
   mounted() {
     this.setDefaultTime('today')
-    this.fetchArea()
+    // this.fetchArea()
   },
   methods: {
     fetchArea() {
@@ -130,10 +131,11 @@
     },
     fetchData() {
       const params = {
-        areaId: this.areaId,
+        areaId: '110000',
         startTime: this.timeRange[0],
         endTime: this.timeRange[1]
       }
+      this.$emit('change', params)
       countBySecondArea(params).then(response => {
         this.isShow = false
         this.chartData.rows = response.data
@@ -153,7 +155,21 @@
       })
     },
     setDefaultTime(val) {
-      if (val === 'month') {
+      if (val === 'year') {
+        var today = new Date()
+        var tYear = today.getFullYear()
+        const beginTime = tYear + '-01-01'
+        const endTime = getDayTime(new Date().getTime())
+        this.timeRange = [beginTime, endTime.Format('yyyy-MM-dd')]
+      }if (val === 'season') {
+        var today = new Date()
+        var tYear = today.getFullYear()
+        var tMonth = today.getMonth() + 1
+        const oldMonth = tMonth<4?'01':(tMonth<7?'04':(tMonth<10?'07':'10'))
+        const beginTime = tYear + '-' + oldMonth + '-01'
+        const endTime = getDayTime(new Date().getTime())
+        this.timeRange = [beginTime, endTime.Format('yyyy-MM-dd')]
+      }else if (val === 'month') {
         var today = new Date()
         var tYear = today.getFullYear()
         var tMonth = today.getMonth() + 1
@@ -164,7 +180,8 @@
         const endTime = getDayTime(new Date().getTime())
         this.timeRange = [beginTime, endTime.Format('yyyy-MM-dd')]
       } else if (val === 'week') {
-        this.timeRange = [getDayTime(new Date().getTime() - 24 * 6 * 60 * 60 * 1000).Format('yyyy-MM-dd'), getDayTime(new Date().getTime()).Format('yyyy-MM-dd')]
+        const nowDayOfWeek =  new Date().getDay()-1
+        this.timeRange = [getDayTime(new Date().getTime() - 24 * nowDayOfWeek * 60 * 60 * 1000).Format('yyyy-MM-dd'), getDayTime(new Date().getTime()).Format('yyyy-MM-dd')]
       } else if (val === 'yesterday') {
         this.timeRange = [getDayTime(new Date().getTime() - 24 * 60 * 60 * 1000).Format('yyyy-MM-dd'), getDayTime(new Date().getTime() - 24 * 60 * 60 * 1000).Format('yyyy-MM-dd')]
       } else if (val === 'today') {
diff --git a/src/views/dashboard/components/waterCountByDay.vue b/src/views/dashboard/components/waterCountByDay.vue
index 8e12f02..78d1f7c 100644
--- a/src/views/dashboard/components/waterCountByDay.vue
+++ b/src/views/dashboard/components/waterCountByDay.vue
@@ -1,12 +1,12 @@
 <template>
   <div class="container">
-    <div class="function">
-      <el-button round size="mini" @click="changeTime('year')">近1年</el-button>
-      <el-button round size="mini" @click="changeTime('halfyear')">近6月</el-button>
-      <el-button round size="mini" @click="changeTime('3month')">近3月</el-button>
-      <el-button round size="mini" @click="changeTime('month')">近1月</el-button>
-      <el-button round size="mini" @click="changeTime('week')">近1周</el-button>
-    </div>
+    <!--<div class="function">-->
+      <!--<el-button round size="mini" @click="changeTime('year')">近1年</el-button>-->
+      <!--<el-button round size="mini" @click="changeTime('halfyear')">近6月</el-button>-->
+      <!--<el-button round size="mini" @click="changeTime('3month')">近3月</el-button>-->
+      <!--<el-button round size="mini" @click="changeTime('month')">近1月</el-button>-->
+      <!--<el-button round size="mini" @click="changeTime('week')">近1周</el-button>-->
+    <!--</div>-->
     <ve-line :data="chartData" :title="title" :extend="extend" :settings="chartSettings"/>
   </div>
 </template>
@@ -17,6 +17,18 @@
 import { getDoorAreaTree } from '@/api/system/area'
 export default {
   name: 'WaterCountByDay',
+  props:{
+    query: {
+      type: Object,
+      default:()=>{
+        return {
+          areaId: '',
+          startTime: '',
+          endTime: ''
+        }
+      }
+    }
+  },
   data() {
     return {
       listQuery: {
@@ -52,8 +64,13 @@
     }
   },
   mounted() {
-    this.changeTime('month')
-    this.fetchArea()
+    // this.changeTime('month')
+    // this.fetchArea()
+  },
+  watch:{
+    query(val){
+      this.fetchData()
+    }
   },
   methods: {
     fetchArea() {
@@ -73,7 +90,7 @@
       })
     },
     fetchData() {
-      countByDayFirst(this.listQuery).then(response => {
+      countByDayFirst(this.query).then(response => {
         const arr = response.data.map(function(item) {
           for (let i = 0; i < item.data.length; i++) {
             item[item.data[i].areaName] = item.data[i].count

diff --git a/src/api/dashboard.js b/src/api/dashboard.js
index e69de29..0a4ddfc 100644
--- a/src/api/dashboard.js
+++ b/src/api/dashboard.js
@@ -0,0 +1,73 @@
+/**
+ * 井总览模块接口
+ */
+import request from '@/utils/request'
+
+// 用水量、噪声统计数据
+export function getWatchStatistic() {
+  return request({
+    url: 'waterStatistic/overview',
+    method: 'get'
+  })
+}
+// 水表数量
+export function waterMeterCount() {
+  return request({
+    url: 'waterMeterData/count',
+    method: 'get'
+  })
+}
+// 阀门数量
+export function valveCount() {
+  return request({
+    url: 'waterMeterData/count',
+    method: 'get'
+  })
+}
+
+// 查询一级分区各区用水量
+export function countByFirstArea(params) {
+  return request({
+    url: 'waterStatistic/countByFirstArea',
+    method: 'get',
+    params
+  })
+}
+
+// 查询一级分区7日用水量
+export function countByDayFirst(params) {
+  return request({
+    url: 'waterStatistic/countByDayFirst',
+    method: 'get',
+    params
+  })
+}
+
+// 查询二级分区各区用水量
+export function countBySecondArea(params) {
+  return request({
+    url: 'waterStatistic/countBySecondArea',
+    method: 'get',
+    params
+  })
+}
+
+// 查询二级分区水表告警
+export function alarmBySecondArea(params) {
+  return request({
+    url: 'waterStatistic/alarmBySecondArea',
+    method: 'get',
+    params
+  })
+}
+
+// 设备7日报警趋势
+export function alarmCountByDay(params) {
+  return request({
+    url: 'waterStatistic/alarmCountByDay',
+    method: 'get',
+    params
+  })
+}
+
+
diff --git a/src/components/BigData/Card/index.vue b/src/components/BigData/Card/index.vue
index d71e609..45359c9 100644
--- a/src/components/BigData/Card/index.vue
+++ b/src/components/BigData/Card/index.vue
@@ -10,6 +10,7 @@
         </div>
         <div class="card-panel-num" >
           {{ context }}
+          <span style="font-size: 10px;color:#888">{{unit}}</span>
         </div>
       </div>
     </div>
@@ -39,6 +40,10 @@
     color: {
       type: String,
       default: '#40c9c6'
+    },
+    unit:{
+      type: String,
+      default:''
     }
   },
   computed: {
diff --git a/src/components/BigData/Card1/index.vue b/src/components/BigData/Card1/index.vue
index 030b2dc..aa46454 100644
--- a/src/components/BigData/Card1/index.vue
+++ b/src/components/BigData/Card1/index.vue
@@ -1,10 +1,11 @@
 <template>
   <el-card :body-style="{ padding: '0px' }" shadow="always">
-    <div class="card-panel" >
-      <div :style="backgroundColor" class="card-panel-icon-wrapper">
-        <svg-icon :icon-class="icon" class-name="card-panel-icon" />
+    <div class="card-panel">
+      <div v-if="icon" :style="backgroundColor" class="card-panel-icon-wrapper">
+        <svg-icon :icon-class="icon" class-name="card-panel-icon"/>
       </div>
-      <div  class="card-panel-description">
+      <div v-else style="float:left; width: 20px;height: 100%;"></div>
+      <div class="card-panel-description">
         <!-- <div class="card-panel-text">
           {{ title[0] }} <span class="card-panel-num">{{ context[0] }}</span>
         </div>
@@ -13,18 +14,20 @@
         </div> -->
         <div class="two" v-if="title.length===2">
           <div class="card-panel-text">
-            {{ title[0] }} <span class="card-panel-num">{{ context[0] }}</span>
+            {{ title[0] }} <span class="card-panel-num">{{ context[0] }}<span
+            style="font-size: 10px;color:#888;margin-left: 5px">{{unit}}</span></span>
           </div>
-          <div class="card-panel-text" >
-            {{ title[1] }} <span class="card-panel-num">{{ context[1] }}</span>
+          <div class="card-panel-text">
+            {{ title[1] }} <span class="card-panel-num">{{ context[1] }}<span
+            style="font-size: 10px;color:#888;margin-left: 5px">{{unit}}</span></span>
           </div>
         </div>
         <div class="only" v-else>
           <div class="card-panel-text">
             {{ title[0] }}
           </div>
-          <div class="card-panel-num" >
-            {{ context[0] }}
+          <div class="card-panel-num">
+            {{ context[0] }}<span style="font-size: 10px;color:#888">{{unit}}</span>
           </div>
         </div>
       </div>
@@ -33,42 +36,46 @@
 </template>
 
 <script>
-export default {
-  name: 'Card1',
-  props: {
-    title: {
-      type: Array,
-      default: function() {
-        return ['标题', '标题']
+  export default {
+    name: 'Card1',
+    props: {
+      title: {
+        type: Array,
+        default: function () {
+          return ['标题', '标题']
+        }
+      },
+      subtitle: {
+        type: String,
+        default: ''
+      },
+      icon: {
+        type: String,
+        default: ''
+      },
+      context: {
+        type: Array,
+        default: function () {
+          return ['--', '--']
+        }
+      },
+      color: {
+        type: String,
+        default: '#40c9c6'
+      },
+      unit: {
+        type: String,
+        default: ''
       }
     },
-    subtitle: {
-      type: String,
-      default: ''
-    },
-    icon: {
-      type: String,
-      default: ''
-    },
-    context: {
-      type: Array,
-      default: function() {
-        return ['--', '--']
-      }
-    },
-    color: {
-      type: String,
-      default: '#40c9c6'
-    }
-  },
-  computed: {
-    backgroundColor() {
-      return {
-        color: this.color
+    computed: {
+      backgroundColor() {
+        return {
+          color: this.color
+        }
       }
     }
   }
-}
 </script>
 
 <style lang="scss" scoped>
@@ -108,7 +115,7 @@
       overflow: auto;
       margin-left: 5px;
 
-      .two{
+      .two {
         .card-panel-text {
           line-height: 18px;
           color: rgba(0, 0, 0, 0.45);
@@ -123,7 +130,7 @@
           float: right;
         }
       }
-      .only{
+      .only {
         .card-panel-text {
           line-height: 18px;
           color: rgba(0, 0, 0, 0.45);
diff --git a/src/icons/svg/icon-noise.svg b/src/icons/svg/icon-noise.svg
new file mode 100644
index 0000000..00bef71
--- /dev/null
+++ b/src/icons/svg/icon-noise.svg
@@ -0,0 +1,2 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1648634383080" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2093" xmlns:xlink="http://www.w3.org/1999/xlink" width="128" height="128"><defs><style type="text/css">@font-face { font-family: feedback-iconfont; src: url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.woff2?t=1630033759944") format("woff2"), url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.woff?t=1630033759944") format("woff"), url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.ttf?t=1630033759944") format("truetype"); }
+</style></defs><path d="M875.039 549.868c-25.436 0-47.411 13.91-59.3 34.4h-125.9l-99.564-199.177-76.703 281.23-51.528-566.757-67.461-5.735-130.8 490.44H49.397v68.802h267.259l94.464-354.268 51.235 563.733 67.451 5.913 79.432-291.445 38.077 76.057h168.428c11.91 20.419 33.864 34.391 59.3 34.391 37.98 0 68.792-30.879 68.792-68.797-0.005-38.062-30.817-68.787-68.797-68.787z" p-id="2094"></path></svg>
\ No newline at end of file
diff --git a/src/icons/svg/icon-valve.svg b/src/icons/svg/icon-valve.svg
new file mode 100644
index 0000000..f5d96e2
--- /dev/null
+++ b/src/icons/svg/icon-valve.svg
@@ -0,0 +1,2 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1648634707805" class="icon" viewBox="0 0 1090 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3809" xmlns:xlink="http://www.w3.org/1999/xlink" width="136.25" height="128"><defs><style type="text/css">@font-face { font-family: feedback-iconfont; src: url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.woff2?t=1630033759944") format("woff2"), url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.woff?t=1630033759944") format("woff"), url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.ttf?t=1630033759944") format("truetype"); }
+</style></defs><path d="M502.944 296.975V143.052h-231.98c-31.587 0-57.321-24.93-57.321-55.526 0-30.598 25.75-55.526 57.321-55.526H833.06c31.571 0 57.306 24.93 57.306 55.525 0 30.922-25.735 55.526-57.29 55.526h-231.64v153.924h18.179c21.615 0 39.112 16.955 39.112 37.904v90.565l-213.105-0.34v-90.225c0-20.95 17.497-37.904 39.128-37.904h18.194z m-381.74 590.293v63.84c0 9.306-7.834 16.955-17.698 16.955H58.231c-9.862-0.001-17.698-7.65-17.698-17.296V542.472c0-9.63 7.835-17.28 17.698-17.28h45.274c9.863 0 17.698 7.65 17.698 17.28v83.133h150.55c6.272-85.518 79.247-152.95 168.387-152.95h207.98c89.14 0 162.116 67.432 168.403 152.95h150.873v-83.798c0-9.29 7.495-16.615 17.033-16.615h46.297c9.523 0 17.001 7.308 17.001 16.615v409.625c0.341 9.321-7.478 16.63-17.016 16.63h-46.297c-9.523 0-17.018-7.309-17.018-16.63v-64.165H805.36C780.755 948.583 719.655 992 648.119 992H440.142c-71.52 0-132.635-43.402-157.239-104.733H121.204z" p-id="3810"></path></svg>
\ No newline at end of file
diff --git a/src/views/dashboard/components/PanelGroup.vue b/src/views/dashboard/components/PanelGroup.vue
index b72d289..332cbf9 100644
--- a/src/views/dashboard/components/PanelGroup.vue
+++ b/src/views/dashboard/components/PanelGroup.vue
@@ -1,12 +1,12 @@
 <template>
   <el-row class="panel-group">
     <div v-for="card in dataGroup1" :key="card.index" class="card-panel-col">
-      <card1 :title="card.title" :context="card.context" :icon="card.icon" :color="card.color"/>
+      <card1 :title="card.title" :context="card.context" :icon="card.icon" :color="card.color" :unit="card.unit"/>
     </div>
 
     <div v-for="card in dataGroup" :key="card.title" class="card-panel-col">
       <div v-if="hasPerm(card.permission)">
-        <card :title="card.title" :context="card.context" :icon="card.icon" :color="card.color" @click.native="goPage(card.path)"/>
+        <card :title="card.title" :context="card.context" :icon="card.icon" :unit="card.unit" :color="card.color" @click.native="goPage(card.path)"/>
       </div>
     </div>
   </el-row>
@@ -16,7 +16,7 @@
 import Card1 from '@/components/BigData/Card1'
 import Card from '@/components/BigData/Card'
 // 首页
-import { getWatchStatistic , waterMeterCount } from '@/api/overview'
+import { getWatchStatistic , waterMeterCount, valveCount } from '@/api/dashboard'
 // 根据布防数量统计井数量
 import { wellCountByBfzt } from '@/api/well'
 // 当前报警数
@@ -36,30 +36,33 @@
           context: ['--', '--'],
           icon: 'icon-water',
           color: '#40c9c6',
+          unit: '吨',
           index: 0
         },
         {
-          title: ['今日用水量', '昨日用水量'],
+          title: ['今日用水量', '生产厂区用水量'],
           context: ['--', '--'],
-          icon: 'icon-water',
+          icon: '',
           color: '#36a3f7',
+          unit: '吨',
           index: 1
         },
         {
-          title: ['实时噪声'],
+          title: ['滑道实时噪声'],
           context: ['--'],
-          icon: 'icon-device',
+          icon: 'icon-noise',
           color: '#f1c353',
+          unit: 'db',
           index: 2
         }
       ],
       dataGroup: [
         {
-          title: '设备总数',
+          title: '阀门数量',
           context: '--',
-          icon: 'icon-device',
+          icon: 'icon-valve',
           color: '#40c9c6',
-          path: '/deviceList',
+          path: '/deviceList?deviceType=20',
           permission: '/device/list'
         },
         {
@@ -67,11 +70,11 @@
           context: '--',
           icon: 'icon-watch',
           color: '#9694f7',
-          path: '/deviceList',
+          path: '/deviceList?deviceType=13',
           permission: '/device/list'
         },
         {
-          title: '当前报警数',
+          title: '报警信息',
           context: '--',
           icon: 'icon-alarm',
           color: '#f4516c',
@@ -83,10 +86,10 @@
   },
   mounted() {
     this.getWater()
-    this.getWellCount()
+    // this.getWellCount()
     this.getDeviceCount()
     this.getAlarmCount()
-    this.getJobCount()
+    // this.getJobCount()
   },
   methods: {
     refresh() {
@@ -97,24 +100,31 @@
       this.$router.push(path)
     },
     getWater() {
+      // 用水量
       getWatchStatistic().then(response => {
-        this.dataGroup1[0].context = [response.data.total, response.data.month]
-        this.dataGroup1[1].context = [response.data.today, response.data.yesterday]
-        this.dataGroup1[2].context = [Number(response.data.sound).toFixed(2)]
+        this.dataGroup1[0].context = [response.data.total?parseFloat(response.data.total).toFixed(0):'--', response.data.month?parseFloat(response.data.month).toFixed(0):'--']
+        this.dataGroup1[1].context = [response.data.today?parseFloat(response.data.today).toFixed(0):'--', response.data.yesterday?parseFloat(response.data.yesterday).toFixed(0):'--']
+        this.dataGroup1[2].context = [response.data.sound?Number(response.data.sound).toFixed(2):'--']
       })
-      waterMeterCount().then(response => {
-        this.dataGroup[1].context = response.data
-      })
+
     },
-    getWellCount() {
-      wellCountByBfzt().then(response => {
-        this.dataGroup[0].context = response.data.total
-      })
-    },
+    // getWellCount() {
+    //   wellCountByBfzt().then(response => {
+    //     this.dataGroup[0].context = response.data.total
+    //   })
+    // },
     getDeviceCount() {
       // deviceStaticByStatus().then(response => {
       //   this.dataGroup[1].context = response.data.total
       // })
+      // 阀门数量
+      valveCount().then(response => {
+        this.dataGroup[0].context = response.data
+      })
+      // 水表数量
+      waterMeterCount().then(response => {
+        this.dataGroup[1].context = response.data
+      })
     },
     getAlarmCount() {
       alarmNowStatic().then(response => {
@@ -159,7 +169,7 @@
   //   &:hover {
   //     .card-panel-icon-wrapper {
   //       color: #fff;
-        
+
   //     }
 
   //     .icon-people {
diff --git a/src/views/dashboard/components/waterCountByAreaBar.vue b/src/views/dashboard/components/waterCountByAreaBar.vue
index 1bdac48..c488923 100644
--- a/src/views/dashboard/components/waterCountByAreaBar.vue
+++ b/src/views/dashboard/components/waterCountByAreaBar.vue
@@ -1,9 +1,10 @@
 <template>
   <div class="container">
     <div class="statistic-container">
+      <el-button round size="mini" @click="setDefaultTime('year')">本年</el-button>
+      <el-button round size="mini" @click="setDefaultTime('season')">本季</el-button>
       <el-button round size="mini" @click="setDefaultTime('month')">本月</el-button>
-      <el-button round size="mini" @click="setDefaultTime('week')">近7日</el-button>
-      <el-button round size="mini" @click="setDefaultTime('yesterday')">昨日</el-button>
+      <el-button round size="mini" @click="setDefaultTime('week')">本周</el-button>
       <el-button round size="mini" @click="setDefaultTime('today')">今日</el-button>
       <el-date-picker
         v-model="timeRange"
@@ -107,7 +108,7 @@
   },
   mounted() {
     this.setDefaultTime('today')
-    this.fetchArea()
+    // this.fetchArea()
   },
   methods: {
     fetchArea() {
@@ -130,10 +131,11 @@
     },
     fetchData() {
       const params = {
-        areaId: this.areaId,
+        areaId: '110000',
         startTime: this.timeRange[0],
         endTime: this.timeRange[1]
       }
+      this.$emit('change', params)
       countBySecondArea(params).then(response => {
         this.isShow = false
         this.chartData.rows = response.data
@@ -153,7 +155,21 @@
       })
     },
     setDefaultTime(val) {
-      if (val === 'month') {
+      if (val === 'year') {
+        var today = new Date()
+        var tYear = today.getFullYear()
+        const beginTime = tYear + '-01-01'
+        const endTime = getDayTime(new Date().getTime())
+        this.timeRange = [beginTime, endTime.Format('yyyy-MM-dd')]
+      }if (val === 'season') {
+        var today = new Date()
+        var tYear = today.getFullYear()
+        var tMonth = today.getMonth() + 1
+        const oldMonth = tMonth<4?'01':(tMonth<7?'04':(tMonth<10?'07':'10'))
+        const beginTime = tYear + '-' + oldMonth + '-01'
+        const endTime = getDayTime(new Date().getTime())
+        this.timeRange = [beginTime, endTime.Format('yyyy-MM-dd')]
+      }else if (val === 'month') {
         var today = new Date()
         var tYear = today.getFullYear()
         var tMonth = today.getMonth() + 1
@@ -164,7 +180,8 @@
         const endTime = getDayTime(new Date().getTime())
         this.timeRange = [beginTime, endTime.Format('yyyy-MM-dd')]
       } else if (val === 'week') {
-        this.timeRange = [getDayTime(new Date().getTime() - 24 * 6 * 60 * 60 * 1000).Format('yyyy-MM-dd'), getDayTime(new Date().getTime()).Format('yyyy-MM-dd')]
+        const nowDayOfWeek =  new Date().getDay()-1
+        this.timeRange = [getDayTime(new Date().getTime() - 24 * nowDayOfWeek * 60 * 60 * 1000).Format('yyyy-MM-dd'), getDayTime(new Date().getTime()).Format('yyyy-MM-dd')]
       } else if (val === 'yesterday') {
         this.timeRange = [getDayTime(new Date().getTime() - 24 * 60 * 60 * 1000).Format('yyyy-MM-dd'), getDayTime(new Date().getTime() - 24 * 60 * 60 * 1000).Format('yyyy-MM-dd')]
       } else if (val === 'today') {
diff --git a/src/views/dashboard/components/waterCountByDay.vue b/src/views/dashboard/components/waterCountByDay.vue
index 8e12f02..78d1f7c 100644
--- a/src/views/dashboard/components/waterCountByDay.vue
+++ b/src/views/dashboard/components/waterCountByDay.vue
@@ -1,12 +1,12 @@
 <template>
   <div class="container">
-    <div class="function">
-      <el-button round size="mini" @click="changeTime('year')">近1年</el-button>
-      <el-button round size="mini" @click="changeTime('halfyear')">近6月</el-button>
-      <el-button round size="mini" @click="changeTime('3month')">近3月</el-button>
-      <el-button round size="mini" @click="changeTime('month')">近1月</el-button>
-      <el-button round size="mini" @click="changeTime('week')">近1周</el-button>
-    </div>
+    <!--<div class="function">-->
+      <!--<el-button round size="mini" @click="changeTime('year')">近1年</el-button>-->
+      <!--<el-button round size="mini" @click="changeTime('halfyear')">近6月</el-button>-->
+      <!--<el-button round size="mini" @click="changeTime('3month')">近3月</el-button>-->
+      <!--<el-button round size="mini" @click="changeTime('month')">近1月</el-button>-->
+      <!--<el-button round size="mini" @click="changeTime('week')">近1周</el-button>-->
+    <!--</div>-->
     <ve-line :data="chartData" :title="title" :extend="extend" :settings="chartSettings"/>
   </div>
 </template>
@@ -17,6 +17,18 @@
 import { getDoorAreaTree } from '@/api/system/area'
 export default {
   name: 'WaterCountByDay',
+  props:{
+    query: {
+      type: Object,
+      default:()=>{
+        return {
+          areaId: '',
+          startTime: '',
+          endTime: ''
+        }
+      }
+    }
+  },
   data() {
     return {
       listQuery: {
@@ -52,8 +64,13 @@
     }
   },
   mounted() {
-    this.changeTime('month')
-    this.fetchArea()
+    // this.changeTime('month')
+    // this.fetchArea()
+  },
+  watch:{
+    query(val){
+      this.fetchData()
+    }
   },
   methods: {
     fetchArea() {
@@ -73,7 +90,7 @@
       })
     },
     fetchData() {
-      countByDayFirst(this.listQuery).then(response => {
+      countByDayFirst(this.query).then(response => {
         const arr = response.data.map(function(item) {
           for (let i = 0; i < item.data.length; i++) {
             item[item.data[i].areaName] = item.data[i].count
diff --git a/src/views/dashboard/components/waterCountByDept.vue b/src/views/dashboard/components/waterCountByDept.vue
index a0c82cf..02e27cd 100644
--- a/src/views/dashboard/components/waterCountByDept.vue
+++ b/src/views/dashboard/components/waterCountByDept.vue
@@ -1,22 +1,22 @@
 <!--suppress ALL -->
 <template>
   <div class="container">
-    <div class="function">
-      <el-button round size="mini" @click="changeTime('year')">近1年</el-button>
-      <el-button round size="mini" @click="changeTime('halfyear')">近6月</el-button>
-      <el-button round size="mini" @click="changeTime('3month')">近3月</el-button>
-      <el-button round size="mini" @click="changeTime('month')">近1月</el-button>
-      <el-button round size="mini" @click="changeTime('week')">近1周</el-button>
-    </div>
+    <!--<div class="function">-->
+      <!--<el-button round size="mini" @click="changeTime('year')">近1年</el-button>-->
+      <!--<el-button round size="mini" @click="changeTime('halfyear')">近6月</el-button>-->
+      <!--<el-button round size="mini" @click="changeTime('3month')">近3月</el-button>-->
+      <!--<el-button round size="mini" @click="changeTime('month')">近1月</el-button>-->
+      <!--<el-button round size="mini" @click="changeTime('week')">近1周</el-button>-->
+    <!--</div>-->
     <ve-pie :data="chartData" :extend="extend" :title="title"/>
-    <div class="function">
-      <el-button
-        v-for="item in areaList"
-        :key="item.id"
-        round
-        @click="areaChange(item.id)"
-        size="mini">{{item.name}}</el-button>
-    </div>
+    <!--<div class="function">-->
+      <!--<el-button-->
+        <!--v-for="item in areaList"-->
+        <!--:key="item.id"-->
+        <!--round-->
+        <!--@click="areaChange(item.id)"-->
+        <!--size="mini">{{item.name}}</el-button>-->
+    <!--</div>-->
   </div>
 </template>
 
@@ -25,6 +25,18 @@
 import { getDoorAreaTree } from '@/api/system/area'
 export default {
   name: 'WaterCountByDepy',
+  props:{
+    query: {
+      type: Object,
+      default:()=>{
+        return {
+          areaId: '',
+          startTime: '',
+          endTime: ''
+        }
+      }
+    }
+  },
   data() {
     return {
       listQuery: {
@@ -69,7 +81,12 @@
   },
   mounted() {
     // TODO:待调试真接口
-    this.fetchArea()
+    // this.fetchArea()
+  },
+  watch:{
+    query(val){
+      this.fetchData()
+    }
   },
   methods: {
     fetchArea() {
@@ -104,8 +121,7 @@
       //   { 'areaName': '码头作业区', 'count': 78 },
       //   { 'areaName': '车间生产区', 'count': 78 }
       // ]
-      this.listQuery.areaId = this.areaId
-      countBySecondArea(this.listQuery).then(response => {
+      countBySecondArea(this.query).then(response => {
         this.chartData.rows = response.data
       })
     },

diff --git a/src/api/dashboard.js b/src/api/dashboard.js
index e69de29..0a4ddfc 100644
--- a/src/api/dashboard.js
+++ b/src/api/dashboard.js
@@ -0,0 +1,73 @@
+/**
+ * 井总览模块接口
+ */
+import request from '@/utils/request'
+
+// 用水量、噪声统计数据
+export function getWatchStatistic() {
+  return request({
+    url: 'waterStatistic/overview',
+    method: 'get'
+  })
+}
+// 水表数量
+export function waterMeterCount() {
+  return request({
+    url: 'waterMeterData/count',
+    method: 'get'
+  })
+}
+// 阀门数量
+export function valveCount() {
+  return request({
+    url: 'waterMeterData/count',
+    method: 'get'
+  })
+}
+
+// 查询一级分区各区用水量
+export function countByFirstArea(params) {
+  return request({
+    url: 'waterStatistic/countByFirstArea',
+    method: 'get',
+    params
+  })
+}
+
+// 查询一级分区7日用水量
+export function countByDayFirst(params) {
+  return request({
+    url: 'waterStatistic/countByDayFirst',
+    method: 'get',
+    params
+  })
+}
+
+// 查询二级分区各区用水量
+export function countBySecondArea(params) {
+  return request({
+    url: 'waterStatistic/countBySecondArea',
+    method: 'get',
+    params
+  })
+}
+
+// 查询二级分区水表告警
+export function alarmBySecondArea(params) {
+  return request({
+    url: 'waterStatistic/alarmBySecondArea',
+    method: 'get',
+    params
+  })
+}
+
+// 设备7日报警趋势
+export function alarmCountByDay(params) {
+  return request({
+    url: 'waterStatistic/alarmCountByDay',
+    method: 'get',
+    params
+  })
+}
+
+
diff --git a/src/components/BigData/Card/index.vue b/src/components/BigData/Card/index.vue
index d71e609..45359c9 100644
--- a/src/components/BigData/Card/index.vue
+++ b/src/components/BigData/Card/index.vue
@@ -10,6 +10,7 @@
         </div>
         <div class="card-panel-num" >
           {{ context }}
+          <span style="font-size: 10px;color:#888">{{unit}}</span>
         </div>
       </div>
     </div>
@@ -39,6 +40,10 @@
     color: {
       type: String,
       default: '#40c9c6'
+    },
+    unit:{
+      type: String,
+      default:''
     }
   },
   computed: {
diff --git a/src/components/BigData/Card1/index.vue b/src/components/BigData/Card1/index.vue
index 030b2dc..aa46454 100644
--- a/src/components/BigData/Card1/index.vue
+++ b/src/components/BigData/Card1/index.vue
@@ -1,10 +1,11 @@
 <template>
   <el-card :body-style="{ padding: '0px' }" shadow="always">
-    <div class="card-panel" >
-      <div :style="backgroundColor" class="card-panel-icon-wrapper">
-        <svg-icon :icon-class="icon" class-name="card-panel-icon" />
+    <div class="card-panel">
+      <div v-if="icon" :style="backgroundColor" class="card-panel-icon-wrapper">
+        <svg-icon :icon-class="icon" class-name="card-panel-icon"/>
       </div>
-      <div  class="card-panel-description">
+      <div v-else style="float:left; width: 20px;height: 100%;"></div>
+      <div class="card-panel-description">
         <!-- <div class="card-panel-text">
           {{ title[0] }} <span class="card-panel-num">{{ context[0] }}</span>
         </div>
@@ -13,18 +14,20 @@
         </div> -->
         <div class="two" v-if="title.length===2">
           <div class="card-panel-text">
-            {{ title[0] }} <span class="card-panel-num">{{ context[0] }}</span>
+            {{ title[0] }} <span class="card-panel-num">{{ context[0] }}<span
+            style="font-size: 10px;color:#888;margin-left: 5px">{{unit}}</span></span>
           </div>
-          <div class="card-panel-text" >
-            {{ title[1] }} <span class="card-panel-num">{{ context[1] }}</span>
+          <div class="card-panel-text">
+            {{ title[1] }} <span class="card-panel-num">{{ context[1] }}<span
+            style="font-size: 10px;color:#888;margin-left: 5px">{{unit}}</span></span>
           </div>
         </div>
         <div class="only" v-else>
           <div class="card-panel-text">
             {{ title[0] }}
           </div>
-          <div class="card-panel-num" >
-            {{ context[0] }}
+          <div class="card-panel-num">
+            {{ context[0] }}<span style="font-size: 10px;color:#888">{{unit}}</span>
           </div>
         </div>
       </div>
@@ -33,42 +36,46 @@
 </template>
 
 <script>
-export default {
-  name: 'Card1',
-  props: {
-    title: {
-      type: Array,
-      default: function() {
-        return ['标题', '标题']
+  export default {
+    name: 'Card1',
+    props: {
+      title: {
+        type: Array,
+        default: function () {
+          return ['标题', '标题']
+        }
+      },
+      subtitle: {
+        type: String,
+        default: ''
+      },
+      icon: {
+        type: String,
+        default: ''
+      },
+      context: {
+        type: Array,
+        default: function () {
+          return ['--', '--']
+        }
+      },
+      color: {
+        type: String,
+        default: '#40c9c6'
+      },
+      unit: {
+        type: String,
+        default: ''
       }
     },
-    subtitle: {
-      type: String,
-      default: ''
-    },
-    icon: {
-      type: String,
-      default: ''
-    },
-    context: {
-      type: Array,
-      default: function() {
-        return ['--', '--']
-      }
-    },
-    color: {
-      type: String,
-      default: '#40c9c6'
-    }
-  },
-  computed: {
-    backgroundColor() {
-      return {
-        color: this.color
+    computed: {
+      backgroundColor() {
+        return {
+          color: this.color
+        }
       }
     }
   }
-}
 </script>
 
 <style lang="scss" scoped>
@@ -108,7 +115,7 @@
       overflow: auto;
       margin-left: 5px;
 
-      .two{
+      .two {
         .card-panel-text {
           line-height: 18px;
           color: rgba(0, 0, 0, 0.45);
@@ -123,7 +130,7 @@
           float: right;
         }
       }
-      .only{
+      .only {
         .card-panel-text {
           line-height: 18px;
           color: rgba(0, 0, 0, 0.45);
diff --git a/src/icons/svg/icon-noise.svg b/src/icons/svg/icon-noise.svg
new file mode 100644
index 0000000..00bef71
--- /dev/null
+++ b/src/icons/svg/icon-noise.svg
@@ -0,0 +1,2 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1648634383080" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2093" xmlns:xlink="http://www.w3.org/1999/xlink" width="128" height="128"><defs><style type="text/css">@font-face { font-family: feedback-iconfont; src: url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.woff2?t=1630033759944") format("woff2"), url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.woff?t=1630033759944") format("woff"), url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.ttf?t=1630033759944") format("truetype"); }
+</style></defs><path d="M875.039 549.868c-25.436 0-47.411 13.91-59.3 34.4h-125.9l-99.564-199.177-76.703 281.23-51.528-566.757-67.461-5.735-130.8 490.44H49.397v68.802h267.259l94.464-354.268 51.235 563.733 67.451 5.913 79.432-291.445 38.077 76.057h168.428c11.91 20.419 33.864 34.391 59.3 34.391 37.98 0 68.792-30.879 68.792-68.797-0.005-38.062-30.817-68.787-68.797-68.787z" p-id="2094"></path></svg>
\ No newline at end of file
diff --git a/src/icons/svg/icon-valve.svg b/src/icons/svg/icon-valve.svg
new file mode 100644
index 0000000..f5d96e2
--- /dev/null
+++ b/src/icons/svg/icon-valve.svg
@@ -0,0 +1,2 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1648634707805" class="icon" viewBox="0 0 1090 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3809" xmlns:xlink="http://www.w3.org/1999/xlink" width="136.25" height="128"><defs><style type="text/css">@font-face { font-family: feedback-iconfont; src: url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.woff2?t=1630033759944") format("woff2"), url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.woff?t=1630033759944") format("woff"), url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.ttf?t=1630033759944") format("truetype"); }
+</style></defs><path d="M502.944 296.975V143.052h-231.98c-31.587 0-57.321-24.93-57.321-55.526 0-30.598 25.75-55.526 57.321-55.526H833.06c31.571 0 57.306 24.93 57.306 55.525 0 30.922-25.735 55.526-57.29 55.526h-231.64v153.924h18.179c21.615 0 39.112 16.955 39.112 37.904v90.565l-213.105-0.34v-90.225c0-20.95 17.497-37.904 39.128-37.904h18.194z m-381.74 590.293v63.84c0 9.306-7.834 16.955-17.698 16.955H58.231c-9.862-0.001-17.698-7.65-17.698-17.296V542.472c0-9.63 7.835-17.28 17.698-17.28h45.274c9.863 0 17.698 7.65 17.698 17.28v83.133h150.55c6.272-85.518 79.247-152.95 168.387-152.95h207.98c89.14 0 162.116 67.432 168.403 152.95h150.873v-83.798c0-9.29 7.495-16.615 17.033-16.615h46.297c9.523 0 17.001 7.308 17.001 16.615v409.625c0.341 9.321-7.478 16.63-17.016 16.63h-46.297c-9.523 0-17.018-7.309-17.018-16.63v-64.165H805.36C780.755 948.583 719.655 992 648.119 992H440.142c-71.52 0-132.635-43.402-157.239-104.733H121.204z" p-id="3810"></path></svg>
\ No newline at end of file
diff --git a/src/views/dashboard/components/PanelGroup.vue b/src/views/dashboard/components/PanelGroup.vue
index b72d289..332cbf9 100644
--- a/src/views/dashboard/components/PanelGroup.vue
+++ b/src/views/dashboard/components/PanelGroup.vue
@@ -1,12 +1,12 @@
 <template>
   <el-row class="panel-group">
     <div v-for="card in dataGroup1" :key="card.index" class="card-panel-col">
-      <card1 :title="card.title" :context="card.context" :icon="card.icon" :color="card.color"/>
+      <card1 :title="card.title" :context="card.context" :icon="card.icon" :color="card.color" :unit="card.unit"/>
     </div>
 
     <div v-for="card in dataGroup" :key="card.title" class="card-panel-col">
       <div v-if="hasPerm(card.permission)">
-        <card :title="card.title" :context="card.context" :icon="card.icon" :color="card.color" @click.native="goPage(card.path)"/>
+        <card :title="card.title" :context="card.context" :icon="card.icon" :unit="card.unit" :color="card.color" @click.native="goPage(card.path)"/>
       </div>
     </div>
   </el-row>
@@ -16,7 +16,7 @@
 import Card1 from '@/components/BigData/Card1'
 import Card from '@/components/BigData/Card'
 // 首页
-import { getWatchStatistic , waterMeterCount } from '@/api/overview'
+import { getWatchStatistic , waterMeterCount, valveCount } from '@/api/dashboard'
 // 根据布防数量统计井数量
 import { wellCountByBfzt } from '@/api/well'
 // 当前报警数
@@ -36,30 +36,33 @@
           context: ['--', '--'],
           icon: 'icon-water',
           color: '#40c9c6',
+          unit: '吨',
           index: 0
         },
         {
-          title: ['今日用水量', '昨日用水量'],
+          title: ['今日用水量', '生产厂区用水量'],
           context: ['--', '--'],
-          icon: 'icon-water',
+          icon: '',
           color: '#36a3f7',
+          unit: '吨',
           index: 1
         },
         {
-          title: ['实时噪声'],
+          title: ['滑道实时噪声'],
           context: ['--'],
-          icon: 'icon-device',
+          icon: 'icon-noise',
           color: '#f1c353',
+          unit: 'db',
           index: 2
         }
       ],
       dataGroup: [
         {
-          title: '设备总数',
+          title: '阀门数量',
           context: '--',
-          icon: 'icon-device',
+          icon: 'icon-valve',
           color: '#40c9c6',
-          path: '/deviceList',
+          path: '/deviceList?deviceType=20',
           permission: '/device/list'
         },
         {
@@ -67,11 +70,11 @@
           context: '--',
           icon: 'icon-watch',
           color: '#9694f7',
-          path: '/deviceList',
+          path: '/deviceList?deviceType=13',
           permission: '/device/list'
         },
         {
-          title: '当前报警数',
+          title: '报警信息',
           context: '--',
           icon: 'icon-alarm',
           color: '#f4516c',
@@ -83,10 +86,10 @@
   },
   mounted() {
     this.getWater()
-    this.getWellCount()
+    // this.getWellCount()
     this.getDeviceCount()
     this.getAlarmCount()
-    this.getJobCount()
+    // this.getJobCount()
   },
   methods: {
     refresh() {
@@ -97,24 +100,31 @@
       this.$router.push(path)
     },
     getWater() {
+      // 用水量
       getWatchStatistic().then(response => {
-        this.dataGroup1[0].context = [response.data.total, response.data.month]
-        this.dataGroup1[1].context = [response.data.today, response.data.yesterday]
-        this.dataGroup1[2].context = [Number(response.data.sound).toFixed(2)]
+        this.dataGroup1[0].context = [response.data.total?parseFloat(response.data.total).toFixed(0):'--', response.data.month?parseFloat(response.data.month).toFixed(0):'--']
+        this.dataGroup1[1].context = [response.data.today?parseFloat(response.data.today).toFixed(0):'--', response.data.yesterday?parseFloat(response.data.yesterday).toFixed(0):'--']
+        this.dataGroup1[2].context = [response.data.sound?Number(response.data.sound).toFixed(2):'--']
       })
-      waterMeterCount().then(response => {
-        this.dataGroup[1].context = response.data
-      })
+
     },
-    getWellCount() {
-      wellCountByBfzt().then(response => {
-        this.dataGroup[0].context = response.data.total
-      })
-    },
+    // getWellCount() {
+    //   wellCountByBfzt().then(response => {
+    //     this.dataGroup[0].context = response.data.total
+    //   })
+    // },
     getDeviceCount() {
       // deviceStaticByStatus().then(response => {
       //   this.dataGroup[1].context = response.data.total
       // })
+      // 阀门数量
+      valveCount().then(response => {
+        this.dataGroup[0].context = response.data
+      })
+      // 水表数量
+      waterMeterCount().then(response => {
+        this.dataGroup[1].context = response.data
+      })
     },
     getAlarmCount() {
       alarmNowStatic().then(response => {
@@ -159,7 +169,7 @@
   //   &:hover {
   //     .card-panel-icon-wrapper {
   //       color: #fff;
-        
+
   //     }
 
   //     .icon-people {
diff --git a/src/views/dashboard/components/waterCountByAreaBar.vue b/src/views/dashboard/components/waterCountByAreaBar.vue
index 1bdac48..c488923 100644
--- a/src/views/dashboard/components/waterCountByAreaBar.vue
+++ b/src/views/dashboard/components/waterCountByAreaBar.vue
@@ -1,9 +1,10 @@
 <template>
   <div class="container">
     <div class="statistic-container">
+      <el-button round size="mini" @click="setDefaultTime('year')">本年</el-button>
+      <el-button round size="mini" @click="setDefaultTime('season')">本季</el-button>
       <el-button round size="mini" @click="setDefaultTime('month')">本月</el-button>
-      <el-button round size="mini" @click="setDefaultTime('week')">近7日</el-button>
-      <el-button round size="mini" @click="setDefaultTime('yesterday')">昨日</el-button>
+      <el-button round size="mini" @click="setDefaultTime('week')">本周</el-button>
       <el-button round size="mini" @click="setDefaultTime('today')">今日</el-button>
       <el-date-picker
         v-model="timeRange"
@@ -107,7 +108,7 @@
   },
   mounted() {
     this.setDefaultTime('today')
-    this.fetchArea()
+    // this.fetchArea()
   },
   methods: {
     fetchArea() {
@@ -130,10 +131,11 @@
     },
     fetchData() {
       const params = {
-        areaId: this.areaId,
+        areaId: '110000',
         startTime: this.timeRange[0],
         endTime: this.timeRange[1]
       }
+      this.$emit('change', params)
       countBySecondArea(params).then(response => {
         this.isShow = false
         this.chartData.rows = response.data
@@ -153,7 +155,21 @@
       })
     },
     setDefaultTime(val) {
-      if (val === 'month') {
+      if (val === 'year') {
+        var today = new Date()
+        var tYear = today.getFullYear()
+        const beginTime = tYear + '-01-01'
+        const endTime = getDayTime(new Date().getTime())
+        this.timeRange = [beginTime, endTime.Format('yyyy-MM-dd')]
+      }if (val === 'season') {
+        var today = new Date()
+        var tYear = today.getFullYear()
+        var tMonth = today.getMonth() + 1
+        const oldMonth = tMonth<4?'01':(tMonth<7?'04':(tMonth<10?'07':'10'))
+        const beginTime = tYear + '-' + oldMonth + '-01'
+        const endTime = getDayTime(new Date().getTime())
+        this.timeRange = [beginTime, endTime.Format('yyyy-MM-dd')]
+      }else if (val === 'month') {
         var today = new Date()
         var tYear = today.getFullYear()
         var tMonth = today.getMonth() + 1
@@ -164,7 +180,8 @@
         const endTime = getDayTime(new Date().getTime())
         this.timeRange = [beginTime, endTime.Format('yyyy-MM-dd')]
       } else if (val === 'week') {
-        this.timeRange = [getDayTime(new Date().getTime() - 24 * 6 * 60 * 60 * 1000).Format('yyyy-MM-dd'), getDayTime(new Date().getTime()).Format('yyyy-MM-dd')]
+        const nowDayOfWeek =  new Date().getDay()-1
+        this.timeRange = [getDayTime(new Date().getTime() - 24 * nowDayOfWeek * 60 * 60 * 1000).Format('yyyy-MM-dd'), getDayTime(new Date().getTime()).Format('yyyy-MM-dd')]
       } else if (val === 'yesterday') {
         this.timeRange = [getDayTime(new Date().getTime() - 24 * 60 * 60 * 1000).Format('yyyy-MM-dd'), getDayTime(new Date().getTime() - 24 * 60 * 60 * 1000).Format('yyyy-MM-dd')]
       } else if (val === 'today') {
diff --git a/src/views/dashboard/components/waterCountByDay.vue b/src/views/dashboard/components/waterCountByDay.vue
index 8e12f02..78d1f7c 100644
--- a/src/views/dashboard/components/waterCountByDay.vue
+++ b/src/views/dashboard/components/waterCountByDay.vue
@@ -1,12 +1,12 @@
 <template>
   <div class="container">
-    <div class="function">
-      <el-button round size="mini" @click="changeTime('year')">近1年</el-button>
-      <el-button round size="mini" @click="changeTime('halfyear')">近6月</el-button>
-      <el-button round size="mini" @click="changeTime('3month')">近3月</el-button>
-      <el-button round size="mini" @click="changeTime('month')">近1月</el-button>
-      <el-button round size="mini" @click="changeTime('week')">近1周</el-button>
-    </div>
+    <!--<div class="function">-->
+      <!--<el-button round size="mini" @click="changeTime('year')">近1年</el-button>-->
+      <!--<el-button round size="mini" @click="changeTime('halfyear')">近6月</el-button>-->
+      <!--<el-button round size="mini" @click="changeTime('3month')">近3月</el-button>-->
+      <!--<el-button round size="mini" @click="changeTime('month')">近1月</el-button>-->
+      <!--<el-button round size="mini" @click="changeTime('week')">近1周</el-button>-->
+    <!--</div>-->
     <ve-line :data="chartData" :title="title" :extend="extend" :settings="chartSettings"/>
   </div>
 </template>
@@ -17,6 +17,18 @@
 import { getDoorAreaTree } from '@/api/system/area'
 export default {
   name: 'WaterCountByDay',
+  props:{
+    query: {
+      type: Object,
+      default:()=>{
+        return {
+          areaId: '',
+          startTime: '',
+          endTime: ''
+        }
+      }
+    }
+  },
   data() {
     return {
       listQuery: {
@@ -52,8 +64,13 @@
     }
   },
   mounted() {
-    this.changeTime('month')
-    this.fetchArea()
+    // this.changeTime('month')
+    // this.fetchArea()
+  },
+  watch:{
+    query(val){
+      this.fetchData()
+    }
   },
   methods: {
     fetchArea() {
@@ -73,7 +90,7 @@
       })
     },
     fetchData() {
-      countByDayFirst(this.listQuery).then(response => {
+      countByDayFirst(this.query).then(response => {
         const arr = response.data.map(function(item) {
           for (let i = 0; i < item.data.length; i++) {
             item[item.data[i].areaName] = item.data[i].count
diff --git a/src/views/dashboard/components/waterCountByDept.vue b/src/views/dashboard/components/waterCountByDept.vue
index a0c82cf..02e27cd 100644
--- a/src/views/dashboard/components/waterCountByDept.vue
+++ b/src/views/dashboard/components/waterCountByDept.vue
@@ -1,22 +1,22 @@
 <!--suppress ALL -->
 <template>
   <div class="container">
-    <div class="function">
-      <el-button round size="mini" @click="changeTime('year')">近1年</el-button>
-      <el-button round size="mini" @click="changeTime('halfyear')">近6月</el-button>
-      <el-button round size="mini" @click="changeTime('3month')">近3月</el-button>
-      <el-button round size="mini" @click="changeTime('month')">近1月</el-button>
-      <el-button round size="mini" @click="changeTime('week')">近1周</el-button>
-    </div>
+    <!--<div class="function">-->
+      <!--<el-button round size="mini" @click="changeTime('year')">近1年</el-button>-->
+      <!--<el-button round size="mini" @click="changeTime('halfyear')">近6月</el-button>-->
+      <!--<el-button round size="mini" @click="changeTime('3month')">近3月</el-button>-->
+      <!--<el-button round size="mini" @click="changeTime('month')">近1月</el-button>-->
+      <!--<el-button round size="mini" @click="changeTime('week')">近1周</el-button>-->
+    <!--</div>-->
     <ve-pie :data="chartData" :extend="extend" :title="title"/>
-    <div class="function">
-      <el-button
-        v-for="item in areaList"
-        :key="item.id"
-        round
-        @click="areaChange(item.id)"
-        size="mini">{{item.name}}</el-button>
-    </div>
+    <!--<div class="function">-->
+      <!--<el-button-->
+        <!--v-for="item in areaList"-->
+        <!--:key="item.id"-->
+        <!--round-->
+        <!--@click="areaChange(item.id)"-->
+        <!--size="mini">{{item.name}}</el-button>-->
+    <!--</div>-->
   </div>
 </template>
 
@@ -25,6 +25,18 @@
 import { getDoorAreaTree } from '@/api/system/area'
 export default {
   name: 'WaterCountByDepy',
+  props:{
+    query: {
+      type: Object,
+      default:()=>{
+        return {
+          areaId: '',
+          startTime: '',
+          endTime: ''
+        }
+      }
+    }
+  },
   data() {
     return {
       listQuery: {
@@ -69,7 +81,12 @@
   },
   mounted() {
     // TODO:待调试真接口
-    this.fetchArea()
+    // this.fetchArea()
+  },
+  watch:{
+    query(val){
+      this.fetchData()
+    }
   },
   methods: {
     fetchArea() {
@@ -104,8 +121,7 @@
       //   { 'areaName': '码头作业区', 'count': 78 },
       //   { 'areaName': '车间生产区', 'count': 78 }
       // ]
-      this.listQuery.areaId = this.areaId
-      countBySecondArea(this.listQuery).then(response => {
+      countBySecondArea(this.query).then(response => {
         this.chartData.rows = response.data
       })
     },
diff --git a/src/views/dashboard/components/waterNote.vue b/src/views/dashboard/components/waterNote.vue
new file mode 100644
index 0000000..aa0f448
--- /dev/null
+++ b/src/views/dashboard/components/waterNote.vue
@@ -0,0 +1,152 @@
+<!--suppress ALL -->
+<template>
+  <div class="container">
+    <div>
+      用水事记
+    </div>
+
+  </div>
+</template>
+
+<script>
+import { countBySecondArea } from '@/api/overview'
+import { getDoorAreaTree } from '@/api/system/area'
+export default {
+  name: 'WaterNote',
+  props:{
+    query: {
+      type: Object,
+      default:()=>{
+        return {
+          areaId: '',
+          startTime: '',
+          endTime: ''
+        }
+      }
+    }
+  },
+  data() {
+    return {
+      listQuery: {
+        areaId: '',
+        startTime: '',
+        endTime: ''
+      },
+      areaId:'',
+      areaList: [],
+      chartData: {
+        columns: ['areaName', 'count'],
+        rows: []
+      },
+      extend: {
+        grid: {
+          right: '30%'
+        },
+        legend: {
+          type: 'scroll',
+          top: '60px',
+          right: '0px',
+          orient: 'vertical'
+        },
+        series: {
+          label: { show: true, position: 'outside', formatter: '{b}' },
+          right: 120
+        },
+        tooltip: { trigger: 'item', formatter: '{b}<br/>用水量：{c}吨<br/>占比：{d}%' }
+      },
+      title: {
+        text: '分区用水占比图'
+      },
+      chartSettings: {
+        labelMap: {
+          'areaName': '分区',
+          'count': '用水量'
+        },
+        dimension: 'areaName',
+        metrics: 'count'
+      }
+    }
+  },
+  mounted() {
+    // TODO:待调试真接口
+    // this.fetchArea()
+  },
+  watch:{
+    query(val){
+      this.fetchData()
+    }
+  },
+  methods: {
+    fetchArea() {
+      getDoorAreaTree().then(response => {
+        if (response.code === 200) {
+          this.areaList = response.data.filter(item => {
+            return item.pid === '1'
+          }).map(function(item) {
+            return {
+              id: item.id, name: item.name
+            }
+          })
+          if (this.areaList.length !== 0) { this.areaChange(this.areaList[0].id) }
+        }
+      })
+    },
+    areaChange(val){
+      this.areaId = val
+      this.fetchData()
+    },
+    // 获取统计数据
+    fetchData() {
+      // this.chartData.rows = [
+      //   { 'areaName': '科技楼及食堂', 'count': 53 },
+      //   { 'areaName': 'A\\B\\C\\D\\E座', 'count': 78 },
+      //   { 'areaName': '厂区', 'count': 78 },
+      //   { 'areaName': '分段分区', 'count': 78 },
+      //   { 'areaName': '船坞分区', 'count': 78 },
+      //   { 'areaName': '刀把码头', 'count': 78 },
+      //   { 'areaName': '制管作业区', 'count': 78 },
+      //   { 'areaName': '滑道作业区', 'count': 78 },
+      //   { 'areaName': '码头作业区', 'count': 78 },
+      //   { 'areaName': '车间生产区', 'count': 78 }
+      // ]
+      countBySecondArea(this.query).then(response => {
+        this.chartData.rows = response.data
+      })
+    },
+    changeTime(timeType) {
+      let startTime
+      switch (timeType) {
+        case 'year':
+          startTime = getDayTime(new Date().getTime() - 24 * 365 * 60 * 60 * 1000)
+          this.listQuery.startTime = startTime.Format('yyyy-MM-dd')
+          break
+        case 'halfyear':
+          startTime = getDayTime(new Date().getTime() - 24 * 182 * 60 * 60 * 1000)
+          this.listQuery.startTime = startTime.Format('yyyy-MM-dd')
+          break
+        case '3month':
+          startTime = getDayTime(new Date().getTime() - 24 * 90 * 60 * 60 * 1000)
+          this.listQuery.startTime = startTime.Format('yyyy-MM-dd')
+          break
+        case 'month':
+          startTime = getDayTime(new Date().getTime() - 24 * 30 * 60 * 60 * 1000)
+          this.listQuery.startTime = startTime.Format('yyyy-MM-dd')
+          break
+        case 'week':
+          startTime = getDayTime(new Date().getTime() - 24 * 7 * 60 * 60 * 1000)
+          this.listQuery.startTime = startTime.Format('yyyy-MM-dd')
+          break
+      }
+      const endTime = new Date()
+      this.listQuery.endTime = endTime.Format('yyyy-MM-dd')
+      this.fetchData()
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+  .container{
+    position:relative;
+    height: 455px;
+  }
+</style>

diff --git a/src/api/dashboard.js b/src/api/dashboard.js
index e69de29..0a4ddfc 100644
--- a/src/api/dashboard.js
+++ b/src/api/dashboard.js
@@ -0,0 +1,73 @@
+/**
+ * 井总览模块接口
+ */
+import request from '@/utils/request'
+
+// 用水量、噪声统计数据
+export function getWatchStatistic() {
+  return request({
+    url: 'waterStatistic/overview',
+    method: 'get'
+  })
+}
+// 水表数量
+export function waterMeterCount() {
+  return request({
+    url: 'waterMeterData/count',
+    method: 'get'
+  })
+}
+// 阀门数量
+export function valveCount() {
+  return request({
+    url: 'waterMeterData/count',
+    method: 'get'
+  })
+}
+
+// 查询一级分区各区用水量
+export function countByFirstArea(params) {
+  return request({
+    url: 'waterStatistic/countByFirstArea',
+    method: 'get',
+    params
+  })
+}
+
+// 查询一级分区7日用水量
+export function countByDayFirst(params) {
+  return request({
+    url: 'waterStatistic/countByDayFirst',
+    method: 'get',
+    params
+  })
+}
+
+// 查询二级分区各区用水量
+export function countBySecondArea(params) {
+  return request({
+    url: 'waterStatistic/countBySecondArea',
+    method: 'get',
+    params
+  })
+}
+
+// 查询二级分区水表告警
+export function alarmBySecondArea(params) {
+  return request({
+    url: 'waterStatistic/alarmBySecondArea',
+    method: 'get',
+    params
+  })
+}
+
+// 设备7日报警趋势
+export function alarmCountByDay(params) {
+  return request({
+    url: 'waterStatistic/alarmCountByDay',
+    method: 'get',
+    params
+  })
+}
+
+
diff --git a/src/components/BigData/Card/index.vue b/src/components/BigData/Card/index.vue
index d71e609..45359c9 100644
--- a/src/components/BigData/Card/index.vue
+++ b/src/components/BigData/Card/index.vue
@@ -10,6 +10,7 @@
         </div>
         <div class="card-panel-num" >
           {{ context }}
+          <span style="font-size: 10px;color:#888">{{unit}}</span>
         </div>
       </div>
     </div>
@@ -39,6 +40,10 @@
     color: {
       type: String,
       default: '#40c9c6'
+    },
+    unit:{
+      type: String,
+      default:''
     }
   },
   computed: {
diff --git a/src/components/BigData/Card1/index.vue b/src/components/BigData/Card1/index.vue
index 030b2dc..aa46454 100644
--- a/src/components/BigData/Card1/index.vue
+++ b/src/components/BigData/Card1/index.vue
@@ -1,10 +1,11 @@
 <template>
   <el-card :body-style="{ padding: '0px' }" shadow="always">
-    <div class="card-panel" >
-      <div :style="backgroundColor" class="card-panel-icon-wrapper">
-        <svg-icon :icon-class="icon" class-name="card-panel-icon" />
+    <div class="card-panel">
+      <div v-if="icon" :style="backgroundColor" class="card-panel-icon-wrapper">
+        <svg-icon :icon-class="icon" class-name="card-panel-icon"/>
       </div>
-      <div  class="card-panel-description">
+      <div v-else style="float:left; width: 20px;height: 100%;"></div>
+      <div class="card-panel-description">
         <!-- <div class="card-panel-text">
           {{ title[0] }} <span class="card-panel-num">{{ context[0] }}</span>
         </div>
@@ -13,18 +14,20 @@
         </div> -->
         <div class="two" v-if="title.length===2">
           <div class="card-panel-text">
-            {{ title[0] }} <span class="card-panel-num">{{ context[0] }}</span>
+            {{ title[0] }} <span class="card-panel-num">{{ context[0] }}<span
+            style="font-size: 10px;color:#888;margin-left: 5px">{{unit}}</span></span>
           </div>
-          <div class="card-panel-text" >
-            {{ title[1] }} <span class="card-panel-num">{{ context[1] }}</span>
+          <div class="card-panel-text">
+            {{ title[1] }} <span class="card-panel-num">{{ context[1] }}<span
+            style="font-size: 10px;color:#888;margin-left: 5px">{{unit}}</span></span>
           </div>
         </div>
         <div class="only" v-else>
           <div class="card-panel-text">
             {{ title[0] }}
           </div>
-          <div class="card-panel-num" >
-            {{ context[0] }}
+          <div class="card-panel-num">
+            {{ context[0] }}<span style="font-size: 10px;color:#888">{{unit}}</span>
           </div>
         </div>
       </div>
@@ -33,42 +36,46 @@
 </template>
 
 <script>
-export default {
-  name: 'Card1',
-  props: {
-    title: {
-      type: Array,
-      default: function() {
-        return ['标题', '标题']
+  export default {
+    name: 'Card1',
+    props: {
+      title: {
+        type: Array,
+        default: function () {
+          return ['标题', '标题']
+        }
+      },
+      subtitle: {
+        type: String,
+        default: ''
+      },
+      icon: {
+        type: String,
+        default: ''
+      },
+      context: {
+        type: Array,
+        default: function () {
+          return ['--', '--']
+        }
+      },
+      color: {
+        type: String,
+        default: '#40c9c6'
+      },
+      unit: {
+        type: String,
+        default: ''
       }
     },
-    subtitle: {
-      type: String,
-      default: ''
-    },
-    icon: {
-      type: String,
-      default: ''
-    },
-    context: {
-      type: Array,
-      default: function() {
-        return ['--', '--']
-      }
-    },
-    color: {
-      type: String,
-      default: '#40c9c6'
-    }
-  },
-  computed: {
-    backgroundColor() {
-      return {
-        color: this.color
+    computed: {
+      backgroundColor() {
+        return {
+          color: this.color
+        }
       }
     }
   }
-}
 </script>
 
 <style lang="scss" scoped>
@@ -108,7 +115,7 @@
       overflow: auto;
       margin-left: 5px;
 
-      .two{
+      .two {
         .card-panel-text {
           line-height: 18px;
           color: rgba(0, 0, 0, 0.45);
@@ -123,7 +130,7 @@
           float: right;
         }
       }
-      .only{
+      .only {
         .card-panel-text {
           line-height: 18px;
           color: rgba(0, 0, 0, 0.45);
diff --git a/src/icons/svg/icon-noise.svg b/src/icons/svg/icon-noise.svg
new file mode 100644
index 0000000..00bef71
--- /dev/null
+++ b/src/icons/svg/icon-noise.svg
@@ -0,0 +1,2 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1648634383080" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2093" xmlns:xlink="http://www.w3.org/1999/xlink" width="128" height="128"><defs><style type="text/css">@font-face { font-family: feedback-iconfont; src: url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.woff2?t=1630033759944") format("woff2"), url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.woff?t=1630033759944") format("woff"), url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.ttf?t=1630033759944") format("truetype"); }
+</style></defs><path d="M875.039 549.868c-25.436 0-47.411 13.91-59.3 34.4h-125.9l-99.564-199.177-76.703 281.23-51.528-566.757-67.461-5.735-130.8 490.44H49.397v68.802h267.259l94.464-354.268 51.235 563.733 67.451 5.913 79.432-291.445 38.077 76.057h168.428c11.91 20.419 33.864 34.391 59.3 34.391 37.98 0 68.792-30.879 68.792-68.797-0.005-38.062-30.817-68.787-68.797-68.787z" p-id="2094"></path></svg>
\ No newline at end of file
diff --git a/src/icons/svg/icon-valve.svg b/src/icons/svg/icon-valve.svg
new file mode 100644
index 0000000..f5d96e2
--- /dev/null
+++ b/src/icons/svg/icon-valve.svg
@@ -0,0 +1,2 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1648634707805" class="icon" viewBox="0 0 1090 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3809" xmlns:xlink="http://www.w3.org/1999/xlink" width="136.25" height="128"><defs><style type="text/css">@font-face { font-family: feedback-iconfont; src: url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.woff2?t=1630033759944") format("woff2"), url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.woff?t=1630033759944") format("woff"), url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.ttf?t=1630033759944") format("truetype"); }
+</style></defs><path d="M502.944 296.975V143.052h-231.98c-31.587 0-57.321-24.93-57.321-55.526 0-30.598 25.75-55.526 57.321-55.526H833.06c31.571 0 57.306 24.93 57.306 55.525 0 30.922-25.735 55.526-57.29 55.526h-231.64v153.924h18.179c21.615 0 39.112 16.955 39.112 37.904v90.565l-213.105-0.34v-90.225c0-20.95 17.497-37.904 39.128-37.904h18.194z m-381.74 590.293v63.84c0 9.306-7.834 16.955-17.698 16.955H58.231c-9.862-0.001-17.698-7.65-17.698-17.296V542.472c0-9.63 7.835-17.28 17.698-17.28h45.274c9.863 0 17.698 7.65 17.698 17.28v83.133h150.55c6.272-85.518 79.247-152.95 168.387-152.95h207.98c89.14 0 162.116 67.432 168.403 152.95h150.873v-83.798c0-9.29 7.495-16.615 17.033-16.615h46.297c9.523 0 17.001 7.308 17.001 16.615v409.625c0.341 9.321-7.478 16.63-17.016 16.63h-46.297c-9.523 0-17.018-7.309-17.018-16.63v-64.165H805.36C780.755 948.583 719.655 992 648.119 992H440.142c-71.52 0-132.635-43.402-157.239-104.733H121.204z" p-id="3810"></path></svg>
\ No newline at end of file
diff --git a/src/views/dashboard/components/PanelGroup.vue b/src/views/dashboard/components/PanelGroup.vue
index b72d289..332cbf9 100644
--- a/src/views/dashboard/components/PanelGroup.vue
+++ b/src/views/dashboard/components/PanelGroup.vue
@@ -1,12 +1,12 @@
 <template>
   <el-row class="panel-group">
     <div v-for="card in dataGroup1" :key="card.index" class="card-panel-col">
-      <card1 :title="card.title" :context="card.context" :icon="card.icon" :color="card.color"/>
+      <card1 :title="card.title" :context="card.context" :icon="card.icon" :color="card.color" :unit="card.unit"/>
     </div>
 
     <div v-for="card in dataGroup" :key="card.title" class="card-panel-col">
       <div v-if="hasPerm(card.permission)">
-        <card :title="card.title" :context="card.context" :icon="card.icon" :color="card.color" @click.native="goPage(card.path)"/>
+        <card :title="card.title" :context="card.context" :icon="card.icon" :unit="card.unit" :color="card.color" @click.native="goPage(card.path)"/>
       </div>
     </div>
   </el-row>
@@ -16,7 +16,7 @@
 import Card1 from '@/components/BigData/Card1'
 import Card from '@/components/BigData/Card'
 // 首页
-import { getWatchStatistic , waterMeterCount } from '@/api/overview'
+import { getWatchStatistic , waterMeterCount, valveCount } from '@/api/dashboard'
 // 根据布防数量统计井数量
 import { wellCountByBfzt } from '@/api/well'
 // 当前报警数
@@ -36,30 +36,33 @@
           context: ['--', '--'],
           icon: 'icon-water',
           color: '#40c9c6',
+          unit: '吨',
           index: 0
         },
         {
-          title: ['今日用水量', '昨日用水量'],
+          title: ['今日用水量', '生产厂区用水量'],
           context: ['--', '--'],
-          icon: 'icon-water',
+          icon: '',
           color: '#36a3f7',
+          unit: '吨',
           index: 1
         },
         {
-          title: ['实时噪声'],
+          title: ['滑道实时噪声'],
           context: ['--'],
-          icon: 'icon-device',
+          icon: 'icon-noise',
           color: '#f1c353',
+          unit: 'db',
           index: 2
         }
       ],
       dataGroup: [
         {
-          title: '设备总数',
+          title: '阀门数量',
           context: '--',
-          icon: 'icon-device',
+          icon: 'icon-valve',
           color: '#40c9c6',
-          path: '/deviceList',
+          path: '/deviceList?deviceType=20',
           permission: '/device/list'
         },
         {
@@ -67,11 +70,11 @@
           context: '--',
           icon: 'icon-watch',
           color: '#9694f7',
-          path: '/deviceList',
+          path: '/deviceList?deviceType=13',
           permission: '/device/list'
         },
         {
-          title: '当前报警数',
+          title: '报警信息',
           context: '--',
           icon: 'icon-alarm',
           color: '#f4516c',
@@ -83,10 +86,10 @@
   },
   mounted() {
     this.getWater()
-    this.getWellCount()
+    // this.getWellCount()
     this.getDeviceCount()
     this.getAlarmCount()
-    this.getJobCount()
+    // this.getJobCount()
   },
   methods: {
     refresh() {
@@ -97,24 +100,31 @@
       this.$router.push(path)
     },
     getWater() {
+      // 用水量
       getWatchStatistic().then(response => {
-        this.dataGroup1[0].context = [response.data.total, response.data.month]
-        this.dataGroup1[1].context = [response.data.today, response.data.yesterday]
-        this.dataGroup1[2].context = [Number(response.data.sound).toFixed(2)]
+        this.dataGroup1[0].context = [response.data.total?parseFloat(response.data.total).toFixed(0):'--', response.data.month?parseFloat(response.data.month).toFixed(0):'--']
+        this.dataGroup1[1].context = [response.data.today?parseFloat(response.data.today).toFixed(0):'--', response.data.yesterday?parseFloat(response.data.yesterday).toFixed(0):'--']
+        this.dataGroup1[2].context = [response.data.sound?Number(response.data.sound).toFixed(2):'--']
       })
-      waterMeterCount().then(response => {
-        this.dataGroup[1].context = response.data
-      })
+
     },
-    getWellCount() {
-      wellCountByBfzt().then(response => {
-        this.dataGroup[0].context = response.data.total
-      })
-    },
+    // getWellCount() {
+    //   wellCountByBfzt().then(response => {
+    //     this.dataGroup[0].context = response.data.total
+    //   })
+    // },
     getDeviceCount() {
       // deviceStaticByStatus().then(response => {
       //   this.dataGroup[1].context = response.data.total
       // })
+      // 阀门数量
+      valveCount().then(response => {
+        this.dataGroup[0].context = response.data
+      })
+      // 水表数量
+      waterMeterCount().then(response => {
+        this.dataGroup[1].context = response.data
+      })
     },
     getAlarmCount() {
       alarmNowStatic().then(response => {
@@ -159,7 +169,7 @@
   //   &:hover {
   //     .card-panel-icon-wrapper {
   //       color: #fff;
-        
+
   //     }
 
   //     .icon-people {
diff --git a/src/views/dashboard/components/waterCountByAreaBar.vue b/src/views/dashboard/components/waterCountByAreaBar.vue
index 1bdac48..c488923 100644
--- a/src/views/dashboard/components/waterCountByAreaBar.vue
+++ b/src/views/dashboard/components/waterCountByAreaBar.vue
@@ -1,9 +1,10 @@
 <template>
   <div class="container">
     <div class="statistic-container">
+      <el-button round size="mini" @click="setDefaultTime('year')">本年</el-button>
+      <el-button round size="mini" @click="setDefaultTime('season')">本季</el-button>
       <el-button round size="mini" @click="setDefaultTime('month')">本月</el-button>
-      <el-button round size="mini" @click="setDefaultTime('week')">近7日</el-button>
-      <el-button round size="mini" @click="setDefaultTime('yesterday')">昨日</el-button>
+      <el-button round size="mini" @click="setDefaultTime('week')">本周</el-button>
       <el-button round size="mini" @click="setDefaultTime('today')">今日</el-button>
       <el-date-picker
         v-model="timeRange"
@@ -107,7 +108,7 @@
   },
   mounted() {
     this.setDefaultTime('today')
-    this.fetchArea()
+    // this.fetchArea()
   },
   methods: {
     fetchArea() {
@@ -130,10 +131,11 @@
     },
     fetchData() {
       const params = {
-        areaId: this.areaId,
+        areaId: '110000',
         startTime: this.timeRange[0],
         endTime: this.timeRange[1]
       }
+      this.$emit('change', params)
       countBySecondArea(params).then(response => {
         this.isShow = false
         this.chartData.rows = response.data
@@ -153,7 +155,21 @@
       })
     },
     setDefaultTime(val) {
-      if (val === 'month') {
+      if (val === 'year') {
+        var today = new Date()
+        var tYear = today.getFullYear()
+        const beginTime = tYear + '-01-01'
+        const endTime = getDayTime(new Date().getTime())
+        this.timeRange = [beginTime, endTime.Format('yyyy-MM-dd')]
+      }if (val === 'season') {
+        var today = new Date()
+        var tYear = today.getFullYear()
+        var tMonth = today.getMonth() + 1
+        const oldMonth = tMonth<4?'01':(tMonth<7?'04':(tMonth<10?'07':'10'))
+        const beginTime = tYear + '-' + oldMonth + '-01'
+        const endTime = getDayTime(new Date().getTime())
+        this.timeRange = [beginTime, endTime.Format('yyyy-MM-dd')]
+      }else if (val === 'month') {
         var today = new Date()
         var tYear = today.getFullYear()
         var tMonth = today.getMonth() + 1
@@ -164,7 +180,8 @@
         const endTime = getDayTime(new Date().getTime())
         this.timeRange = [beginTime, endTime.Format('yyyy-MM-dd')]
       } else if (val === 'week') {
-        this.timeRange = [getDayTime(new Date().getTime() - 24 * 6 * 60 * 60 * 1000).Format('yyyy-MM-dd'), getDayTime(new Date().getTime()).Format('yyyy-MM-dd')]
+        const nowDayOfWeek =  new Date().getDay()-1
+        this.timeRange = [getDayTime(new Date().getTime() - 24 * nowDayOfWeek * 60 * 60 * 1000).Format('yyyy-MM-dd'), getDayTime(new Date().getTime()).Format('yyyy-MM-dd')]
       } else if (val === 'yesterday') {
         this.timeRange = [getDayTime(new Date().getTime() - 24 * 60 * 60 * 1000).Format('yyyy-MM-dd'), getDayTime(new Date().getTime() - 24 * 60 * 60 * 1000).Format('yyyy-MM-dd')]
       } else if (val === 'today') {
diff --git a/src/views/dashboard/components/waterCountByDay.vue b/src/views/dashboard/components/waterCountByDay.vue
index 8e12f02..78d1f7c 100644
--- a/src/views/dashboard/components/waterCountByDay.vue
+++ b/src/views/dashboard/components/waterCountByDay.vue
@@ -1,12 +1,12 @@
 <template>
   <div class="container">
-    <div class="function">
-      <el-button round size="mini" @click="changeTime('year')">近1年</el-button>
-      <el-button round size="mini" @click="changeTime('halfyear')">近6月</el-button>
-      <el-button round size="mini" @click="changeTime('3month')">近3月</el-button>
-      <el-button round size="mini" @click="changeTime('month')">近1月</el-button>
-      <el-button round size="mini" @click="changeTime('week')">近1周</el-button>
-    </div>
+    <!--<div class="function">-->
+      <!--<el-button round size="mini" @click="changeTime('year')">近1年</el-button>-->
+      <!--<el-button round size="mini" @click="changeTime('halfyear')">近6月</el-button>-->
+      <!--<el-button round size="mini" @click="changeTime('3month')">近3月</el-button>-->
+      <!--<el-button round size="mini" @click="changeTime('month')">近1月</el-button>-->
+      <!--<el-button round size="mini" @click="changeTime('week')">近1周</el-button>-->
+    <!--</div>-->
     <ve-line :data="chartData" :title="title" :extend="extend" :settings="chartSettings"/>
   </div>
 </template>
@@ -17,6 +17,18 @@
 import { getDoorAreaTree } from '@/api/system/area'
 export default {
   name: 'WaterCountByDay',
+  props:{
+    query: {
+      type: Object,
+      default:()=>{
+        return {
+          areaId: '',
+          startTime: '',
+          endTime: ''
+        }
+      }
+    }
+  },
   data() {
     return {
       listQuery: {
@@ -52,8 +64,13 @@
     }
   },
   mounted() {
-    this.changeTime('month')
-    this.fetchArea()
+    // this.changeTime('month')
+    // this.fetchArea()
+  },
+  watch:{
+    query(val){
+      this.fetchData()
+    }
   },
   methods: {
     fetchArea() {
@@ -73,7 +90,7 @@
       })
     },
     fetchData() {
-      countByDayFirst(this.listQuery).then(response => {
+      countByDayFirst(this.query).then(response => {
         const arr = response.data.map(function(item) {
           for (let i = 0; i < item.data.length; i++) {
             item[item.data[i].areaName] = item.data[i].count
diff --git a/src/views/dashboard/components/waterCountByDept.vue b/src/views/dashboard/components/waterCountByDept.vue
index a0c82cf..02e27cd 100644
--- a/src/views/dashboard/components/waterCountByDept.vue
+++ b/src/views/dashboard/components/waterCountByDept.vue
@@ -1,22 +1,22 @@
 <!--suppress ALL -->
 <template>
   <div class="container">
-    <div class="function">
-      <el-button round size="mini" @click="changeTime('year')">近1年</el-button>
-      <el-button round size="mini" @click="changeTime('halfyear')">近6月</el-button>
-      <el-button round size="mini" @click="changeTime('3month')">近3月</el-button>
-      <el-button round size="mini" @click="changeTime('month')">近1月</el-button>
-      <el-button round size="mini" @click="changeTime('week')">近1周</el-button>
-    </div>
+    <!--<div class="function">-->
+      <!--<el-button round size="mini" @click="changeTime('year')">近1年</el-button>-->
+      <!--<el-button round size="mini" @click="changeTime('halfyear')">近6月</el-button>-->
+      <!--<el-button round size="mini" @click="changeTime('3month')">近3月</el-button>-->
+      <!--<el-button round size="mini" @click="changeTime('month')">近1月</el-button>-->
+      <!--<el-button round size="mini" @click="changeTime('week')">近1周</el-button>-->
+    <!--</div>-->
     <ve-pie :data="chartData" :extend="extend" :title="title"/>
-    <div class="function">
-      <el-button
-        v-for="item in areaList"
-        :key="item.id"
-        round
-        @click="areaChange(item.id)"
-        size="mini">{{item.name}}</el-button>
-    </div>
+    <!--<div class="function">-->
+      <!--<el-button-->
+        <!--v-for="item in areaList"-->
+        <!--:key="item.id"-->
+        <!--round-->
+        <!--@click="areaChange(item.id)"-->
+        <!--size="mini">{{item.name}}</el-button>-->
+    <!--</div>-->
   </div>
 </template>
 
@@ -25,6 +25,18 @@
 import { getDoorAreaTree } from '@/api/system/area'
 export default {
   name: 'WaterCountByDepy',
+  props:{
+    query: {
+      type: Object,
+      default:()=>{
+        return {
+          areaId: '',
+          startTime: '',
+          endTime: ''
+        }
+      }
+    }
+  },
   data() {
     return {
       listQuery: {
@@ -69,7 +81,12 @@
   },
   mounted() {
     // TODO:待调试真接口
-    this.fetchArea()
+    // this.fetchArea()
+  },
+  watch:{
+    query(val){
+      this.fetchData()
+    }
   },
   methods: {
     fetchArea() {
@@ -104,8 +121,7 @@
       //   { 'areaName': '码头作业区', 'count': 78 },
       //   { 'areaName': '车间生产区', 'count': 78 }
       // ]
-      this.listQuery.areaId = this.areaId
-      countBySecondArea(this.listQuery).then(response => {
+      countBySecondArea(this.query).then(response => {
         this.chartData.rows = response.data
       })
     },
diff --git a/src/views/dashboard/components/waterNote.vue b/src/views/dashboard/components/waterNote.vue
new file mode 100644
index 0000000..aa0f448
--- /dev/null
+++ b/src/views/dashboard/components/waterNote.vue
@@ -0,0 +1,152 @@
+<!--suppress ALL -->
+<template>
+  <div class="container">
+    <div>
+      用水事记
+    </div>
+
+  </div>
+</template>
+
+<script>
+import { countBySecondArea } from '@/api/overview'
+import { getDoorAreaTree } from '@/api/system/area'
+export default {
+  name: 'WaterNote',
+  props:{
+    query: {
+      type: Object,
+      default:()=>{
+        return {
+          areaId: '',
+          startTime: '',
+          endTime: ''
+        }
+      }
+    }
+  },
+  data() {
+    return {
+      listQuery: {
+        areaId: '',
+        startTime: '',
+        endTime: ''
+      },
+      areaId:'',
+      areaList: [],
+      chartData: {
+        columns: ['areaName', 'count'],
+        rows: []
+      },
+      extend: {
+        grid: {
+          right: '30%'
+        },
+        legend: {
+          type: 'scroll',
+          top: '60px',
+          right: '0px',
+          orient: 'vertical'
+        },
+        series: {
+          label: { show: true, position: 'outside', formatter: '{b}' },
+          right: 120
+        },
+        tooltip: { trigger: 'item', formatter: '{b}<br/>用水量：{c}吨<br/>占比：{d}%' }
+      },
+      title: {
+        text: '分区用水占比图'
+      },
+      chartSettings: {
+        labelMap: {
+          'areaName': '分区',
+          'count': '用水量'
+        },
+        dimension: 'areaName',
+        metrics: 'count'
+      }
+    }
+  },
+  mounted() {
+    // TODO:待调试真接口
+    // this.fetchArea()
+  },
+  watch:{
+    query(val){
+      this.fetchData()
+    }
+  },
+  methods: {
+    fetchArea() {
+      getDoorAreaTree().then(response => {
+        if (response.code === 200) {
+          this.areaList = response.data.filter(item => {
+            return item.pid === '1'
+          }).map(function(item) {
+            return {
+              id: item.id, name: item.name
+            }
+          })
+          if (this.areaList.length !== 0) { this.areaChange(this.areaList[0].id) }
+        }
+      })
+    },
+    areaChange(val){
+      this.areaId = val
+      this.fetchData()
+    },
+    // 获取统计数据
+    fetchData() {
+      // this.chartData.rows = [
+      //   { 'areaName': '科技楼及食堂', 'count': 53 },
+      //   { 'areaName': 'A\\B\\C\\D\\E座', 'count': 78 },
+      //   { 'areaName': '厂区', 'count': 78 },
+      //   { 'areaName': '分段分区', 'count': 78 },
+      //   { 'areaName': '船坞分区', 'count': 78 },
+      //   { 'areaName': '刀把码头', 'count': 78 },
+      //   { 'areaName': '制管作业区', 'count': 78 },
+      //   { 'areaName': '滑道作业区', 'count': 78 },
+      //   { 'areaName': '码头作业区', 'count': 78 },
+      //   { 'areaName': '车间生产区', 'count': 78 }
+      // ]
+      countBySecondArea(this.query).then(response => {
+        this.chartData.rows = response.data
+      })
+    },
+    changeTime(timeType) {
+      let startTime
+      switch (timeType) {
+        case 'year':
+          startTime = getDayTime(new Date().getTime() - 24 * 365 * 60 * 60 * 1000)
+          this.listQuery.startTime = startTime.Format('yyyy-MM-dd')
+          break
+        case 'halfyear':
+          startTime = getDayTime(new Date().getTime() - 24 * 182 * 60 * 60 * 1000)
+          this.listQuery.startTime = startTime.Format('yyyy-MM-dd')
+          break
+        case '3month':
+          startTime = getDayTime(new Date().getTime() - 24 * 90 * 60 * 60 * 1000)
+          this.listQuery.startTime = startTime.Format('yyyy-MM-dd')
+          break
+        case 'month':
+          startTime = getDayTime(new Date().getTime() - 24 * 30 * 60 * 60 * 1000)
+          this.listQuery.startTime = startTime.Format('yyyy-MM-dd')
+          break
+        case 'week':
+          startTime = getDayTime(new Date().getTime() - 24 * 7 * 60 * 60 * 1000)
+          this.listQuery.startTime = startTime.Format('yyyy-MM-dd')
+          break
+      }
+      const endTime = new Date()
+      this.listQuery.endTime = endTime.Format('yyyy-MM-dd')
+      this.fetchData()
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+  .container{
+    position:relative;
+    height: 455px;
+  }
+</style>
diff --git a/src/views/dashboard/index.vue b/src/views/dashboard/index.vue
index fdbc38a..831dbc3 100644
--- a/src/views/dashboard/index.vue
+++ b/src/views/dashboard/index.vue
@@ -1,31 +1,33 @@
 <template>
   <div class="dashboard-container" style="background-color: white">
     <panel-group ref="panelgroup"/>
-    <el-row :gutter="10">
+    <el-row>
       <!-- 用水统计图 -->
+      <el-col :span="18">
+        <el-card shadow="never">
+          <water-count-by-area-bar @change="changeWaterQuery"/>
+        </el-card>
+      </el-col>
+      <el-col :span="6">
+        <el-card shadow="never">
+          <water-note/>
+        </el-card>
+      </el-col>
+    </el-row>
+    <el-row>
+      <!-- 分区用水占比图 -->
       <el-col :span="12">
         <el-card shadow="never">
-          <water-count-by-dept-bar/>
+          <water-count-by-dept :query="listQuery1" ref="waterCountPie"/>
         </el-card>
       </el-col>
       <!-- 用水走势图 -->
       <el-col :span="12">
         <el-card shadow="never">
-          <water-count-by-day/>
+          <water-count-by-day :query="listQuery1" ref="waterCountDay"/>
         </el-card>
       </el-col>
-      <!-- 分区用水统计图 -->
-      <el-col :span="12">
-        <el-card shadow="never">
-          <water-count-by-area-bar/>
-        </el-card>
-      </el-col>
-      <!-- 分区用水占比图 -->
-      <el-col :span="12">
-        <el-card shadow="never">
-          <water-count-by-depy/>
-        </el-card>
-      </el-col>
+
       <!--水表报警次数统计-->
       <el-col v-if="hasPerm('/statics/alarmsByDay')" :span="12">
         <el-card shadow="never">
@@ -64,20 +66,22 @@
 import DeviceCountByOnline from './components/DeviceCountByOnline'
 import AlarmByDays from './components/AlarmByDays'
 import JobByStatus from './components/JobByStatus'
-import WaterCountByDepy from './components/waterCountByDept'
+import WaterCountByDept from './components/waterCountByDept'
 import WaterCountByDeptBar from './components/waterCountByDeptBar'
 import WaterCountByDay from './components/waterCountByDay'
 import WaterCountByAreaBar from "./components/waterCountByAreaBar";
 import WatchAlarmBar from "./components/watchAlarmBar";
+import WaterNote from "./components/waterNote";
 
 export default {
   name: 'Dashboard',
   components: {
+    WaterNote,
     WatchAlarmBar,
     WaterCountByAreaBar,
     WaterCountByDay,
     WaterCountByDeptBar,
-    WaterCountByDepy,
+    WaterCountByDept,
     JobByStatus,
     AlarmByDays,
     PanelGroup,
@@ -108,12 +112,25 @@
       state.needRefresh = needRefresh
     }
   },
+  data(){
+    return {
+      listQuery1:{
+        areaId:'110000',
+        startTime:new Date().Format('yyyy-MM-dd'),
+        endTime:new Date().Format('yyyy-MM-dd')
+      },// 分区用水量查询条件
+      listQuery2:{
+        areaId:'',
+        startTime:'',
+        endTime:''
+      } // 分区报警查询条件
+    }
+  },
   watch: {
     needRefresh(val) {
       // 需要刷新
       if (val) {
         console.log('refresh dashboard')
-        debugger
         this.$refs.panelgroup.refresh()
       }
     }
@@ -124,6 +141,10 @@
   methods: {
     webSocket() {
       this.$store.dispatch('initWebSocket')
+    },
+    // 切换分区查询条件
+    changeWaterQuery(listQuery1){
+      this.listQuery1 = listQuery1
     }
   }
 }

diff --git a/src/api/dashboard.js b/src/api/dashboard.js
index e69de29..0a4ddfc 100644
--- a/src/api/dashboard.js
+++ b/src/api/dashboard.js
@@ -0,0 +1,73 @@
+/**
+ * 井总览模块接口
+ */
+import request from '@/utils/request'
+
+// 用水量、噪声统计数据
+export function getWatchStatistic() {
+  return request({
+    url: 'waterStatistic/overview',
+    method: 'get'
+  })
+}
+// 水表数量
+export function waterMeterCount() {
+  return request({
+    url: 'waterMeterData/count',
+    method: 'get'
+  })
+}
+// 阀门数量
+export function valveCount() {
+  return request({
+    url: 'waterMeterData/count',
+    method: 'get'
+  })
+}
+
+// 查询一级分区各区用水量
+export function countByFirstArea(params) {
+  return request({
+    url: 'waterStatistic/countByFirstArea',
+    method: 'get',
+    params
+  })
+}
+
+// 查询一级分区7日用水量
+export function countByDayFirst(params) {
+  return request({
+    url: 'waterStatistic/countByDayFirst',
+    method: 'get',
+    params
+  })
+}
+
+// 查询二级分区各区用水量
+export function countBySecondArea(params) {
+  return request({
+    url: 'waterStatistic/countBySecondArea',
+    method: 'get',
+    params
+  })
+}
+
+// 查询二级分区水表告警
+export function alarmBySecondArea(params) {
+  return request({
+    url: 'waterStatistic/alarmBySecondArea',
+    method: 'get',
+    params
+  })
+}
+
+// 设备7日报警趋势
+export function alarmCountByDay(params) {
+  return request({
+    url: 'waterStatistic/alarmCountByDay',
+    method: 'get',
+    params
+  })
+}
+
+
diff --git a/src/components/BigData/Card/index.vue b/src/components/BigData/Card/index.vue
index d71e609..45359c9 100644
--- a/src/components/BigData/Card/index.vue
+++ b/src/components/BigData/Card/index.vue
@@ -10,6 +10,7 @@
         </div>
         <div class="card-panel-num" >
           {{ context }}
+          <span style="font-size: 10px;color:#888">{{unit}}</span>
         </div>
       </div>
     </div>
@@ -39,6 +40,10 @@
     color: {
       type: String,
       default: '#40c9c6'
+    },
+    unit:{
+      type: String,
+      default:''
     }
   },
   computed: {
diff --git a/src/components/BigData/Card1/index.vue b/src/components/BigData/Card1/index.vue
index 030b2dc..aa46454 100644
--- a/src/components/BigData/Card1/index.vue
+++ b/src/components/BigData/Card1/index.vue
@@ -1,10 +1,11 @@
 <template>
   <el-card :body-style="{ padding: '0px' }" shadow="always">
-    <div class="card-panel" >
-      <div :style="backgroundColor" class="card-panel-icon-wrapper">
-        <svg-icon :icon-class="icon" class-name="card-panel-icon" />
+    <div class="card-panel">
+      <div v-if="icon" :style="backgroundColor" class="card-panel-icon-wrapper">
+        <svg-icon :icon-class="icon" class-name="card-panel-icon"/>
       </div>
-      <div  class="card-panel-description">
+      <div v-else style="float:left; width: 20px;height: 100%;"></div>
+      <div class="card-panel-description">
         <!-- <div class="card-panel-text">
           {{ title[0] }} <span class="card-panel-num">{{ context[0] }}</span>
         </div>
@@ -13,18 +14,20 @@
         </div> -->
         <div class="two" v-if="title.length===2">
           <div class="card-panel-text">
-            {{ title[0] }} <span class="card-panel-num">{{ context[0] }}</span>
+            {{ title[0] }} <span class="card-panel-num">{{ context[0] }}<span
+            style="font-size: 10px;color:#888;margin-left: 5px">{{unit}}</span></span>
           </div>
-          <div class="card-panel-text" >
-            {{ title[1] }} <span class="card-panel-num">{{ context[1] }}</span>
+          <div class="card-panel-text">
+            {{ title[1] }} <span class="card-panel-num">{{ context[1] }}<span
+            style="font-size: 10px;color:#888;margin-left: 5px">{{unit}}</span></span>
           </div>
         </div>
         <div class="only" v-else>
           <div class="card-panel-text">
             {{ title[0] }}
           </div>
-          <div class="card-panel-num" >
-            {{ context[0] }}
+          <div class="card-panel-num">
+            {{ context[0] }}<span style="font-size: 10px;color:#888">{{unit}}</span>
           </div>
         </div>
       </div>
@@ -33,42 +36,46 @@
 </template>
 
 <script>
-export default {
-  name: 'Card1',
-  props: {
-    title: {
-      type: Array,
-      default: function() {
-        return ['标题', '标题']
+  export default {
+    name: 'Card1',
+    props: {
+      title: {
+        type: Array,
+        default: function () {
+          return ['标题', '标题']
+        }
+      },
+      subtitle: {
+        type: String,
+        default: ''
+      },
+      icon: {
+        type: String,
+        default: ''
+      },
+      context: {
+        type: Array,
+        default: function () {
+          return ['--', '--']
+        }
+      },
+      color: {
+        type: String,
+        default: '#40c9c6'
+      },
+      unit: {
+        type: String,
+        default: ''
       }
     },
-    subtitle: {
-      type: String,
-      default: ''
-    },
-    icon: {
-      type: String,
-      default: ''
-    },
-    context: {
-      type: Array,
-      default: function() {
-        return ['--', '--']
-      }
-    },
-    color: {
-      type: String,
-      default: '#40c9c6'
-    }
-  },
-  computed: {
-    backgroundColor() {
-      return {
-        color: this.color
+    computed: {
+      backgroundColor() {
+        return {
+          color: this.color
+        }
       }
     }
   }
-}
 </script>
 
 <style lang="scss" scoped>
@@ -108,7 +115,7 @@
       overflow: auto;
       margin-left: 5px;
 
-      .two{
+      .two {
         .card-panel-text {
           line-height: 18px;
           color: rgba(0, 0, 0, 0.45);
@@ -123,7 +130,7 @@
           float: right;
         }
       }
-      .only{
+      .only {
         .card-panel-text {
           line-height: 18px;
           color: rgba(0, 0, 0, 0.45);
diff --git a/src/icons/svg/icon-noise.svg b/src/icons/svg/icon-noise.svg
new file mode 100644
index 0000000..00bef71
--- /dev/null
+++ b/src/icons/svg/icon-noise.svg
@@ -0,0 +1,2 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1648634383080" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2093" xmlns:xlink="http://www.w3.org/1999/xlink" width="128" height="128"><defs><style type="text/css">@font-face { font-family: feedback-iconfont; src: url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.woff2?t=1630033759944") format("woff2"), url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.woff?t=1630033759944") format("woff"), url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.ttf?t=1630033759944") format("truetype"); }
+</style></defs><path d="M875.039 549.868c-25.436 0-47.411 13.91-59.3 34.4h-125.9l-99.564-199.177-76.703 281.23-51.528-566.757-67.461-5.735-130.8 490.44H49.397v68.802h267.259l94.464-354.268 51.235 563.733 67.451 5.913 79.432-291.445 38.077 76.057h168.428c11.91 20.419 33.864 34.391 59.3 34.391 37.98 0 68.792-30.879 68.792-68.797-0.005-38.062-30.817-68.787-68.797-68.787z" p-id="2094"></path></svg>
\ No newline at end of file
diff --git a/src/icons/svg/icon-valve.svg b/src/icons/svg/icon-valve.svg
new file mode 100644
index 0000000..f5d96e2
--- /dev/null
+++ b/src/icons/svg/icon-valve.svg
@@ -0,0 +1,2 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1648634707805" class="icon" viewBox="0 0 1090 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3809" xmlns:xlink="http://www.w3.org/1999/xlink" width="136.25" height="128"><defs><style type="text/css">@font-face { font-family: feedback-iconfont; src: url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.woff2?t=1630033759944") format("woff2"), url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.woff?t=1630033759944") format("woff"), url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.ttf?t=1630033759944") format("truetype"); }
+</style></defs><path d="M502.944 296.975V143.052h-231.98c-31.587 0-57.321-24.93-57.321-55.526 0-30.598 25.75-55.526 57.321-55.526H833.06c31.571 0 57.306 24.93 57.306 55.525 0 30.922-25.735 55.526-57.29 55.526h-231.64v153.924h18.179c21.615 0 39.112 16.955 39.112 37.904v90.565l-213.105-0.34v-90.225c0-20.95 17.497-37.904 39.128-37.904h18.194z m-381.74 590.293v63.84c0 9.306-7.834 16.955-17.698 16.955H58.231c-9.862-0.001-17.698-7.65-17.698-17.296V542.472c0-9.63 7.835-17.28 17.698-17.28h45.274c9.863 0 17.698 7.65 17.698 17.28v83.133h150.55c6.272-85.518 79.247-152.95 168.387-152.95h207.98c89.14 0 162.116 67.432 168.403 152.95h150.873v-83.798c0-9.29 7.495-16.615 17.033-16.615h46.297c9.523 0 17.001 7.308 17.001 16.615v409.625c0.341 9.321-7.478 16.63-17.016 16.63h-46.297c-9.523 0-17.018-7.309-17.018-16.63v-64.165H805.36C780.755 948.583 719.655 992 648.119 992H440.142c-71.52 0-132.635-43.402-157.239-104.733H121.204z" p-id="3810"></path></svg>
\ No newline at end of file
diff --git a/src/views/dashboard/components/PanelGroup.vue b/src/views/dashboard/components/PanelGroup.vue
index b72d289..332cbf9 100644
--- a/src/views/dashboard/components/PanelGroup.vue
+++ b/src/views/dashboard/components/PanelGroup.vue
@@ -1,12 +1,12 @@
 <template>
   <el-row class="panel-group">
     <div v-for="card in dataGroup1" :key="card.index" class="card-panel-col">
-      <card1 :title="card.title" :context="card.context" :icon="card.icon" :color="card.color"/>
+      <card1 :title="card.title" :context="card.context" :icon="card.icon" :color="card.color" :unit="card.unit"/>
     </div>
 
     <div v-for="card in dataGroup" :key="card.title" class="card-panel-col">
       <div v-if="hasPerm(card.permission)">
-        <card :title="card.title" :context="card.context" :icon="card.icon" :color="card.color" @click.native="goPage(card.path)"/>
+        <card :title="card.title" :context="card.context" :icon="card.icon" :unit="card.unit" :color="card.color" @click.native="goPage(card.path)"/>
       </div>
     </div>
   </el-row>
@@ -16,7 +16,7 @@
 import Card1 from '@/components/BigData/Card1'
 import Card from '@/components/BigData/Card'
 // 首页
-import { getWatchStatistic , waterMeterCount } from '@/api/overview'
+import { getWatchStatistic , waterMeterCount, valveCount } from '@/api/dashboard'
 // 根据布防数量统计井数量
 import { wellCountByBfzt } from '@/api/well'
 // 当前报警数
@@ -36,30 +36,33 @@
           context: ['--', '--'],
           icon: 'icon-water',
           color: '#40c9c6',
+          unit: '吨',
           index: 0
         },
         {
-          title: ['今日用水量', '昨日用水量'],
+          title: ['今日用水量', '生产厂区用水量'],
           context: ['--', '--'],
-          icon: 'icon-water',
+          icon: '',
           color: '#36a3f7',
+          unit: '吨',
           index: 1
         },
         {
-          title: ['实时噪声'],
+          title: ['滑道实时噪声'],
           context: ['--'],
-          icon: 'icon-device',
+          icon: 'icon-noise',
           color: '#f1c353',
+          unit: 'db',
           index: 2
         }
       ],
       dataGroup: [
         {
-          title: '设备总数',
+          title: '阀门数量',
           context: '--',
-          icon: 'icon-device',
+          icon: 'icon-valve',
           color: '#40c9c6',
-          path: '/deviceList',
+          path: '/deviceList?deviceType=20',
           permission: '/device/list'
         },
         {
@@ -67,11 +70,11 @@
           context: '--',
           icon: 'icon-watch',
           color: '#9694f7',
-          path: '/deviceList',
+          path: '/deviceList?deviceType=13',
           permission: '/device/list'
         },
         {
-          title: '当前报警数',
+          title: '报警信息',
           context: '--',
           icon: 'icon-alarm',
           color: '#f4516c',
@@ -83,10 +86,10 @@
   },
   mounted() {
     this.getWater()
-    this.getWellCount()
+    // this.getWellCount()
     this.getDeviceCount()
     this.getAlarmCount()
-    this.getJobCount()
+    // this.getJobCount()
   },
   methods: {
     refresh() {
@@ -97,24 +100,31 @@
       this.$router.push(path)
     },
     getWater() {
+      // 用水量
       getWatchStatistic().then(response => {
-        this.dataGroup1[0].context = [response.data.total, response.data.month]
-        this.dataGroup1[1].context = [response.data.today, response.data.yesterday]
-        this.dataGroup1[2].context = [Number(response.data.sound).toFixed(2)]
+        this.dataGroup1[0].context = [response.data.total?parseFloat(response.data.total).toFixed(0):'--', response.data.month?parseFloat(response.data.month).toFixed(0):'--']
+        this.dataGroup1[1].context = [response.data.today?parseFloat(response.data.today).toFixed(0):'--', response.data.yesterday?parseFloat(response.data.yesterday).toFixed(0):'--']
+        this.dataGroup1[2].context = [response.data.sound?Number(response.data.sound).toFixed(2):'--']
       })
-      waterMeterCount().then(response => {
-        this.dataGroup[1].context = response.data
-      })
+
     },
-    getWellCount() {
-      wellCountByBfzt().then(response => {
-        this.dataGroup[0].context = response.data.total
-      })
-    },
+    // getWellCount() {
+    //   wellCountByBfzt().then(response => {
+    //     this.dataGroup[0].context = response.data.total
+    //   })
+    // },
     getDeviceCount() {
       // deviceStaticByStatus().then(response => {
       //   this.dataGroup[1].context = response.data.total
       // })
+      // 阀门数量
+      valveCount().then(response => {
+        this.dataGroup[0].context = response.data
+      })
+      // 水表数量
+      waterMeterCount().then(response => {
+        this.dataGroup[1].context = response.data
+      })
     },
     getAlarmCount() {
       alarmNowStatic().then(response => {
@@ -159,7 +169,7 @@
   //   &:hover {
   //     .card-panel-icon-wrapper {
   //       color: #fff;
-        
+
   //     }
 
   //     .icon-people {
diff --git a/src/views/dashboard/components/waterCountByAreaBar.vue b/src/views/dashboard/components/waterCountByAreaBar.vue
index 1bdac48..c488923 100644
--- a/src/views/dashboard/components/waterCountByAreaBar.vue
+++ b/src/views/dashboard/components/waterCountByAreaBar.vue
@@ -1,9 +1,10 @@
 <template>
   <div class="container">
     <div class="statistic-container">
+      <el-button round size="mini" @click="setDefaultTime('year')">本年</el-button>
+      <el-button round size="mini" @click="setDefaultTime('season')">本季</el-button>
       <el-button round size="mini" @click="setDefaultTime('month')">本月</el-button>
-      <el-button round size="mini" @click="setDefaultTime('week')">近7日</el-button>
-      <el-button round size="mini" @click="setDefaultTime('yesterday')">昨日</el-button>
+      <el-button round size="mini" @click="setDefaultTime('week')">本周</el-button>
       <el-button round size="mini" @click="setDefaultTime('today')">今日</el-button>
       <el-date-picker
         v-model="timeRange"
@@ -107,7 +108,7 @@
   },
   mounted() {
     this.setDefaultTime('today')
-    this.fetchArea()
+    // this.fetchArea()
   },
   methods: {
     fetchArea() {
@@ -130,10 +131,11 @@
     },
     fetchData() {
       const params = {
-        areaId: this.areaId,
+        areaId: '110000',
         startTime: this.timeRange[0],
         endTime: this.timeRange[1]
       }
+      this.$emit('change', params)
       countBySecondArea(params).then(response => {
         this.isShow = false
         this.chartData.rows = response.data
@@ -153,7 +155,21 @@
       })
     },
     setDefaultTime(val) {
-      if (val === 'month') {
+      if (val === 'year') {
+        var today = new Date()
+        var tYear = today.getFullYear()
+        const beginTime = tYear + '-01-01'
+        const endTime = getDayTime(new Date().getTime())
+        this.timeRange = [beginTime, endTime.Format('yyyy-MM-dd')]
+      }if (val === 'season') {
+        var today = new Date()
+        var tYear = today.getFullYear()
+        var tMonth = today.getMonth() + 1
+        const oldMonth = tMonth<4?'01':(tMonth<7?'04':(tMonth<10?'07':'10'))
+        const beginTime = tYear + '-' + oldMonth + '-01'
+        const endTime = getDayTime(new Date().getTime())
+        this.timeRange = [beginTime, endTime.Format('yyyy-MM-dd')]
+      }else if (val === 'month') {
         var today = new Date()
         var tYear = today.getFullYear()
         var tMonth = today.getMonth() + 1
@@ -164,7 +180,8 @@
         const endTime = getDayTime(new Date().getTime())
         this.timeRange = [beginTime, endTime.Format('yyyy-MM-dd')]
       } else if (val === 'week') {
-        this.timeRange = [getDayTime(new Date().getTime() - 24 * 6 * 60 * 60 * 1000).Format('yyyy-MM-dd'), getDayTime(new Date().getTime()).Format('yyyy-MM-dd')]
+        const nowDayOfWeek =  new Date().getDay()-1
+        this.timeRange = [getDayTime(new Date().getTime() - 24 * nowDayOfWeek * 60 * 60 * 1000).Format('yyyy-MM-dd'), getDayTime(new Date().getTime()).Format('yyyy-MM-dd')]
       } else if (val === 'yesterday') {
         this.timeRange = [getDayTime(new Date().getTime() - 24 * 60 * 60 * 1000).Format('yyyy-MM-dd'), getDayTime(new Date().getTime() - 24 * 60 * 60 * 1000).Format('yyyy-MM-dd')]
       } else if (val === 'today') {
diff --git a/src/views/dashboard/components/waterCountByDay.vue b/src/views/dashboard/components/waterCountByDay.vue
index 8e12f02..78d1f7c 100644
--- a/src/views/dashboard/components/waterCountByDay.vue
+++ b/src/views/dashboard/components/waterCountByDay.vue
@@ -1,12 +1,12 @@
 <template>
   <div class="container">
-    <div class="function">
-      <el-button round size="mini" @click="changeTime('year')">近1年</el-button>
-      <el-button round size="mini" @click="changeTime('halfyear')">近6月</el-button>
-      <el-button round size="mini" @click="changeTime('3month')">近3月</el-button>
-      <el-button round size="mini" @click="changeTime('month')">近1月</el-button>
-      <el-button round size="mini" @click="changeTime('week')">近1周</el-button>
-    </div>
+    <!--<div class="function">-->
+      <!--<el-button round size="mini" @click="changeTime('year')">近1年</el-button>-->
+      <!--<el-button round size="mini" @click="changeTime('halfyear')">近6月</el-button>-->
+      <!--<el-button round size="mini" @click="changeTime('3month')">近3月</el-button>-->
+      <!--<el-button round size="mini" @click="changeTime('month')">近1月</el-button>-->
+      <!--<el-button round size="mini" @click="changeTime('week')">近1周</el-button>-->
+    <!--</div>-->
     <ve-line :data="chartData" :title="title" :extend="extend" :settings="chartSettings"/>
   </div>
 </template>
@@ -17,6 +17,18 @@
 import { getDoorAreaTree } from '@/api/system/area'
 export default {
   name: 'WaterCountByDay',
+  props:{
+    query: {
+      type: Object,
+      default:()=>{
+        return {
+          areaId: '',
+          startTime: '',
+          endTime: ''
+        }
+      }
+    }
+  },
   data() {
     return {
       listQuery: {
@@ -52,8 +64,13 @@
     }
   },
   mounted() {
-    this.changeTime('month')
-    this.fetchArea()
+    // this.changeTime('month')
+    // this.fetchArea()
+  },
+  watch:{
+    query(val){
+      this.fetchData()
+    }
   },
   methods: {
     fetchArea() {
@@ -73,7 +90,7 @@
       })
     },
     fetchData() {
-      countByDayFirst(this.listQuery).then(response => {
+      countByDayFirst(this.query).then(response => {
         const arr = response.data.map(function(item) {
           for (let i = 0; i < item.data.length; i++) {
             item[item.data[i].areaName] = item.data[i].count
diff --git a/src/views/dashboard/components/waterCountByDept.vue b/src/views/dashboard/components/waterCountByDept.vue
index a0c82cf..02e27cd 100644
--- a/src/views/dashboard/components/waterCountByDept.vue
+++ b/src/views/dashboard/components/waterCountByDept.vue
@@ -1,22 +1,22 @@
 <!--suppress ALL -->
 <template>
   <div class="container">
-    <div class="function">
-      <el-button round size="mini" @click="changeTime('year')">近1年</el-button>
-      <el-button round size="mini" @click="changeTime('halfyear')">近6月</el-button>
-      <el-button round size="mini" @click="changeTime('3month')">近3月</el-button>
-      <el-button round size="mini" @click="changeTime('month')">近1月</el-button>
-      <el-button round size="mini" @click="changeTime('week')">近1周</el-button>
-    </div>
+    <!--<div class="function">-->
+      <!--<el-button round size="mini" @click="changeTime('year')">近1年</el-button>-->
+      <!--<el-button round size="mini" @click="changeTime('halfyear')">近6月</el-button>-->
+      <!--<el-button round size="mini" @click="changeTime('3month')">近3月</el-button>-->
+      <!--<el-button round size="mini" @click="changeTime('month')">近1月</el-button>-->
+      <!--<el-button round size="mini" @click="changeTime('week')">近1周</el-button>-->
+    <!--</div>-->
     <ve-pie :data="chartData" :extend="extend" :title="title"/>
-    <div class="function">
-      <el-button
-        v-for="item in areaList"
-        :key="item.id"
-        round
-        @click="areaChange(item.id)"
-        size="mini">{{item.name}}</el-button>
-    </div>
+    <!--<div class="function">-->
+      <!--<el-button-->
+        <!--v-for="item in areaList"-->
+        <!--:key="item.id"-->
+        <!--round-->
+        <!--@click="areaChange(item.id)"-->
+        <!--size="mini">{{item.name}}</el-button>-->
+    <!--</div>-->
   </div>
 </template>
 
@@ -25,6 +25,18 @@
 import { getDoorAreaTree } from '@/api/system/area'
 export default {
   name: 'WaterCountByDepy',
+  props:{
+    query: {
+      type: Object,
+      default:()=>{
+        return {
+          areaId: '',
+          startTime: '',
+          endTime: ''
+        }
+      }
+    }
+  },
   data() {
     return {
       listQuery: {
@@ -69,7 +81,12 @@
   },
   mounted() {
     // TODO:待调试真接口
-    this.fetchArea()
+    // this.fetchArea()
+  },
+  watch:{
+    query(val){
+      this.fetchData()
+    }
   },
   methods: {
     fetchArea() {
@@ -104,8 +121,7 @@
       //   { 'areaName': '码头作业区', 'count': 78 },
       //   { 'areaName': '车间生产区', 'count': 78 }
       // ]
-      this.listQuery.areaId = this.areaId
-      countBySecondArea(this.listQuery).then(response => {
+      countBySecondArea(this.query).then(response => {
         this.chartData.rows = response.data
       })
     },
diff --git a/src/views/dashboard/components/waterNote.vue b/src/views/dashboard/components/waterNote.vue
new file mode 100644
index 0000000..aa0f448
--- /dev/null
+++ b/src/views/dashboard/components/waterNote.vue
@@ -0,0 +1,152 @@
+<!--suppress ALL -->
+<template>
+  <div class="container">
+    <div>
+      用水事记
+    </div>
+
+  </div>
+</template>
+
+<script>
+import { countBySecondArea } from '@/api/overview'
+import { getDoorAreaTree } from '@/api/system/area'
+export default {
+  name: 'WaterNote',
+  props:{
+    query: {
+      type: Object,
+      default:()=>{
+        return {
+          areaId: '',
+          startTime: '',
+          endTime: ''
+        }
+      }
+    }
+  },
+  data() {
+    return {
+      listQuery: {
+        areaId: '',
+        startTime: '',
+        endTime: ''
+      },
+      areaId:'',
+      areaList: [],
+      chartData: {
+        columns: ['areaName', 'count'],
+        rows: []
+      },
+      extend: {
+        grid: {
+          right: '30%'
+        },
+        legend: {
+          type: 'scroll',
+          top: '60px',
+          right: '0px',
+          orient: 'vertical'
+        },
+        series: {
+          label: { show: true, position: 'outside', formatter: '{b}' },
+          right: 120
+        },
+        tooltip: { trigger: 'item', formatter: '{b}<br/>用水量：{c}吨<br/>占比：{d}%' }
+      },
+      title: {
+        text: '分区用水占比图'
+      },
+      chartSettings: {
+        labelMap: {
+          'areaName': '分区',
+          'count': '用水量'
+        },
+        dimension: 'areaName',
+        metrics: 'count'
+      }
+    }
+  },
+  mounted() {
+    // TODO:待调试真接口
+    // this.fetchArea()
+  },
+  watch:{
+    query(val){
+      this.fetchData()
+    }
+  },
+  methods: {
+    fetchArea() {
+      getDoorAreaTree().then(response => {
+        if (response.code === 200) {
+          this.areaList = response.data.filter(item => {
+            return item.pid === '1'
+          }).map(function(item) {
+            return {
+              id: item.id, name: item.name
+            }
+          })
+          if (this.areaList.length !== 0) { this.areaChange(this.areaList[0].id) }
+        }
+      })
+    },
+    areaChange(val){
+      this.areaId = val
+      this.fetchData()
+    },
+    // 获取统计数据
+    fetchData() {
+      // this.chartData.rows = [
+      //   { 'areaName': '科技楼及食堂', 'count': 53 },
+      //   { 'areaName': 'A\\B\\C\\D\\E座', 'count': 78 },
+      //   { 'areaName': '厂区', 'count': 78 },
+      //   { 'areaName': '分段分区', 'count': 78 },
+      //   { 'areaName': '船坞分区', 'count': 78 },
+      //   { 'areaName': '刀把码头', 'count': 78 },
+      //   { 'areaName': '制管作业区', 'count': 78 },
+      //   { 'areaName': '滑道作业区', 'count': 78 },
+      //   { 'areaName': '码头作业区', 'count': 78 },
+      //   { 'areaName': '车间生产区', 'count': 78 }
+      // ]
+      countBySecondArea(this.query).then(response => {
+        this.chartData.rows = response.data
+      })
+    },
+    changeTime(timeType) {
+      let startTime
+      switch (timeType) {
+        case 'year':
+          startTime = getDayTime(new Date().getTime() - 24 * 365 * 60 * 60 * 1000)
+          this.listQuery.startTime = startTime.Format('yyyy-MM-dd')
+          break
+        case 'halfyear':
+          startTime = getDayTime(new Date().getTime() - 24 * 182 * 60 * 60 * 1000)
+          this.listQuery.startTime = startTime.Format('yyyy-MM-dd')
+          break
+        case '3month':
+          startTime = getDayTime(new Date().getTime() - 24 * 90 * 60 * 60 * 1000)
+          this.listQuery.startTime = startTime.Format('yyyy-MM-dd')
+          break
+        case 'month':
+          startTime = getDayTime(new Date().getTime() - 24 * 30 * 60 * 60 * 1000)
+          this.listQuery.startTime = startTime.Format('yyyy-MM-dd')
+          break
+        case 'week':
+          startTime = getDayTime(new Date().getTime() - 24 * 7 * 60 * 60 * 1000)
+          this.listQuery.startTime = startTime.Format('yyyy-MM-dd')
+          break
+      }
+      const endTime = new Date()
+      this.listQuery.endTime = endTime.Format('yyyy-MM-dd')
+      this.fetchData()
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+  .container{
+    position:relative;
+    height: 455px;
+  }
+</style>
diff --git a/src/views/dashboard/index.vue b/src/views/dashboard/index.vue
index fdbc38a..831dbc3 100644
--- a/src/views/dashboard/index.vue
+++ b/src/views/dashboard/index.vue
@@ -1,31 +1,33 @@
 <template>
   <div class="dashboard-container" style="background-color: white">
     <panel-group ref="panelgroup"/>
-    <el-row :gutter="10">
+    <el-row>
       <!-- 用水统计图 -->
+      <el-col :span="18">
+        <el-card shadow="never">
+          <water-count-by-area-bar @change="changeWaterQuery"/>
+        </el-card>
+      </el-col>
+      <el-col :span="6">
+        <el-card shadow="never">
+          <water-note/>
+        </el-card>
+      </el-col>
+    </el-row>
+    <el-row>
+      <!-- 分区用水占比图 -->
       <el-col :span="12">
         <el-card shadow="never">
-          <water-count-by-dept-bar/>
+          <water-count-by-dept :query="listQuery1" ref="waterCountPie"/>
         </el-card>
       </el-col>
       <!-- 用水走势图 -->
       <el-col :span="12">
         <el-card shadow="never">
-          <water-count-by-day/>
+          <water-count-by-day :query="listQuery1" ref="waterCountDay"/>
         </el-card>
       </el-col>
-      <!-- 分区用水统计图 -->
-      <el-col :span="12">
-        <el-card shadow="never">
-          <water-count-by-area-bar/>
-        </el-card>
-      </el-col>
-      <!-- 分区用水占比图 -->
-      <el-col :span="12">
-        <el-card shadow="never">
-          <water-count-by-depy/>
-        </el-card>
-      </el-col>
+
       <!--水表报警次数统计-->
       <el-col v-if="hasPerm('/statics/alarmsByDay')" :span="12">
         <el-card shadow="never">
@@ -64,20 +66,22 @@
 import DeviceCountByOnline from './components/DeviceCountByOnline'
 import AlarmByDays from './components/AlarmByDays'
 import JobByStatus from './components/JobByStatus'
-import WaterCountByDepy from './components/waterCountByDept'
+import WaterCountByDept from './components/waterCountByDept'
 import WaterCountByDeptBar from './components/waterCountByDeptBar'
 import WaterCountByDay from './components/waterCountByDay'
 import WaterCountByAreaBar from "./components/waterCountByAreaBar";
 import WatchAlarmBar from "./components/watchAlarmBar";
+import WaterNote from "./components/waterNote";
 
 export default {
   name: 'Dashboard',
   components: {
+    WaterNote,
     WatchAlarmBar,
     WaterCountByAreaBar,
     WaterCountByDay,
     WaterCountByDeptBar,
-    WaterCountByDepy,
+    WaterCountByDept,
     JobByStatus,
     AlarmByDays,
     PanelGroup,
@@ -108,12 +112,25 @@
       state.needRefresh = needRefresh
     }
   },
+  data(){
+    return {
+      listQuery1:{
+        areaId:'110000',
+        startTime:new Date().Format('yyyy-MM-dd'),
+        endTime:new Date().Format('yyyy-MM-dd')
+      },// 分区用水量查询条件
+      listQuery2:{
+        areaId:'',
+        startTime:'',
+        endTime:''
+      } // 分区报警查询条件
+    }
+  },
   watch: {
     needRefresh(val) {
       // 需要刷新
       if (val) {
         console.log('refresh dashboard')
-        debugger
         this.$refs.panelgroup.refresh()
       }
     }
@@ -124,6 +141,10 @@
   methods: {
     webSocket() {
       this.$store.dispatch('initWebSocket')
+    },
+    // 切换分区查询条件
+    changeWaterQuery(listQuery1){
+      this.listQuery1 = listQuery1
     }
   }
 }
diff --git a/src/views/dashboard/index_bak.vue b/src/views/dashboard/index_bak.vue
new file mode 100644
index 0000000..fdbc38a
--- /dev/null
+++ b/src/views/dashboard/index_bak.vue
@@ -0,0 +1,149 @@
+<template>
+  <div class="dashboard-container" style="background-color: white">
+    <panel-group ref="panelgroup"/>
+    <el-row :gutter="10">
+      <!-- 用水统计图 -->
+      <el-col :span="12">
+        <el-card shadow="never">
+          <water-count-by-dept-bar/>
+        </el-card>
+      </el-col>
+      <!-- 用水走势图 -->
+      <el-col :span="12">
+        <el-card shadow="never">
+          <water-count-by-day/>
+        </el-card>
+      </el-col>
+      <!-- 分区用水统计图 -->
+      <el-col :span="12">
+        <el-card shadow="never">
+          <water-count-by-area-bar/>
+        </el-card>
+      </el-col>
+      <!-- 分区用水占比图 -->
+      <el-col :span="12">
+        <el-card shadow="never">
+          <water-count-by-depy/>
+        </el-card>
+      </el-col>
+      <!--水表报警次数统计-->
+      <el-col v-if="hasPerm('/statics/alarmsByDay')" :span="12">
+        <el-card shadow="never">
+          <watch-alarm-bar/>
+        </el-card>
+      </el-col>
+      <!--报警次数统计-->
+      <el-col v-if="hasPerm('/statics/alarmsByDay')" :span="12">
+        <el-card shadow="never">
+          <alarm-by-days/>
+        </el-card>
+      </el-col>
+      <!--设备在线数量统计-->
+      <el-col v-if="hasPerm('/statics/deviceStaticsByType')" :span="12">
+        <el-card shadow="never">
+          <device-count-by-online/>
+        </el-card>
+      </el-col>
+
+      <!--设备数量统计-->
+      <el-col v-if="hasPerm('/statics/deviceStaticsByType')" :span="12">
+        <el-card shadow="never">
+          <device-count/>
+        </el-card>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+import PanelGroup from './components/PanelGroup'
+import WellCountByBfzt from './components/WellCountByBfzt'
+import WellCountByType from './components/WellCountByType'
+import DeviceCount from './components/DeviceCount'
+import DeviceCountByOnline from './components/DeviceCountByOnline'
+import AlarmByDays from './components/AlarmByDays'
+import JobByStatus from './components/JobByStatus'
+import WaterCountByDepy from './components/waterCountByDept'
+import WaterCountByDeptBar from './components/waterCountByDeptBar'
+import WaterCountByDay from './components/waterCountByDay'
+import WaterCountByAreaBar from "./components/waterCountByAreaBar";
+import WatchAlarmBar from "./components/watchAlarmBar";
+
+export default {
+  name: 'Dashboard',
+  components: {
+    WatchAlarmBar,
+    WaterCountByAreaBar,
+    WaterCountByDay,
+    WaterCountByDeptBar,
+    WaterCountByDepy,
+    JobByStatus,
+    AlarmByDays,
+    PanelGroup,
+    WellCountByBfzt,
+    WellCountByType,
+    DeviceCount,
+    DeviceCountByOnline
+  },
+  computed: {
+    ...mapGetters([
+      'name',
+      'roleNames',
+      'roleTips',
+      'wellTypes',
+      'deviceTypes',
+      'communications',
+      'area'
+    ])
+  },
+  mutations: {
+    SET_WEBSOCKET: (state, websocket) => {
+      state.websocket = websocket
+    },
+    SET_WS_STATUS: (state, wsStatus) => {
+      state.wsStatus = wsStatus
+    },
+    SET_NEED_REFRESH: (state, needRefresh) => {
+      state.needRefresh = needRefresh
+    }
+  },
+  watch: {
+    needRefresh(val) {
+      // 需要刷新
+      if (val) {
+        console.log('refresh dashboard')
+        debugger
+        this.$refs.panelgroup.refresh()
+      }
+    }
+  },
+  mounted() {
+    // this.webSocket()
+  },
+  methods: {
+    webSocket() {
+      this.$store.dispatch('initWebSocket')
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.dashboard-container{
+  .el-row{
+    .el-col{
+      margin-bottom: 10px;
+    }
+  }
+}
+.dashboard {
+  &-container {
+    padding: 10px 20px;
+  }
+  &-text {
+    font-size: 30px;
+    line-height: 46px;
+  }
+}
+</style>

diff --git a/src/api/dashboard.js b/src/api/dashboard.js
index e69de29..0a4ddfc 100644
--- a/src/api/dashboard.js
+++ b/src/api/dashboard.js
@@ -0,0 +1,73 @@
+/**
+ * 井总览模块接口
+ */
+import request from '@/utils/request'
+
+// 用水量、噪声统计数据
+export function getWatchStatistic() {
+  return request({
+    url: 'waterStatistic/overview',
+    method: 'get'
+  })
+}
+// 水表数量
+export function waterMeterCount() {
+  return request({
+    url: 'waterMeterData/count',
+    method: 'get'
+  })
+}
+// 阀门数量
+export function valveCount() {
+  return request({
+    url: 'waterMeterData/count',
+    method: 'get'
+  })
+}
+
+// 查询一级分区各区用水量
+export function countByFirstArea(params) {
+  return request({
+    url: 'waterStatistic/countByFirstArea',
+    method: 'get',
+    params
+  })
+}
+
+// 查询一级分区7日用水量
+export function countByDayFirst(params) {
+  return request({
+    url: 'waterStatistic/countByDayFirst',
+    method: 'get',
+    params
+  })
+}
+
+// 查询二级分区各区用水量
+export function countBySecondArea(params) {
+  return request({
+    url: 'waterStatistic/countBySecondArea',
+    method: 'get',
+    params
+  })
+}
+
+// 查询二级分区水表告警
+export function alarmBySecondArea(params) {
+  return request({
+    url: 'waterStatistic/alarmBySecondArea',
+    method: 'get',
+    params
+  })
+}
+
+// 设备7日报警趋势
+export function alarmCountByDay(params) {
+  return request({
+    url: 'waterStatistic/alarmCountByDay',
+    method: 'get',
+    params
+  })
+}
+
+
diff --git a/src/components/BigData/Card/index.vue b/src/components/BigData/Card/index.vue
index d71e609..45359c9 100644
--- a/src/components/BigData/Card/index.vue
+++ b/src/components/BigData/Card/index.vue
@@ -10,6 +10,7 @@
         </div>
         <div class="card-panel-num" >
           {{ context }}
+          <span style="font-size: 10px;color:#888">{{unit}}</span>
         </div>
       </div>
     </div>
@@ -39,6 +40,10 @@
     color: {
       type: String,
       default: '#40c9c6'
+    },
+    unit:{
+      type: String,
+      default:''
     }
   },
   computed: {
diff --git a/src/components/BigData/Card1/index.vue b/src/components/BigData/Card1/index.vue
index 030b2dc..aa46454 100644
--- a/src/components/BigData/Card1/index.vue
+++ b/src/components/BigData/Card1/index.vue
@@ -1,10 +1,11 @@
 <template>
   <el-card :body-style="{ padding: '0px' }" shadow="always">
-    <div class="card-panel" >
-      <div :style="backgroundColor" class="card-panel-icon-wrapper">
-        <svg-icon :icon-class="icon" class-name="card-panel-icon" />
+    <div class="card-panel">
+      <div v-if="icon" :style="backgroundColor" class="card-panel-icon-wrapper">
+        <svg-icon :icon-class="icon" class-name="card-panel-icon"/>
       </div>
-      <div  class="card-panel-description">
+      <div v-else style="float:left; width: 20px;height: 100%;"></div>
+      <div class="card-panel-description">
         <!-- <div class="card-panel-text">
           {{ title[0] }} <span class="card-panel-num">{{ context[0] }}</span>
         </div>
@@ -13,18 +14,20 @@
         </div> -->
         <div class="two" v-if="title.length===2">
           <div class="card-panel-text">
-            {{ title[0] }} <span class="card-panel-num">{{ context[0] }}</span>
+            {{ title[0] }} <span class="card-panel-num">{{ context[0] }}<span
+            style="font-size: 10px;color:#888;margin-left: 5px">{{unit}}</span></span>
           </div>
-          <div class="card-panel-text" >
-            {{ title[1] }} <span class="card-panel-num">{{ context[1] }}</span>
+          <div class="card-panel-text">
+            {{ title[1] }} <span class="card-panel-num">{{ context[1] }}<span
+            style="font-size: 10px;color:#888;margin-left: 5px">{{unit}}</span></span>
           </div>
         </div>
         <div class="only" v-else>
           <div class="card-panel-text">
             {{ title[0] }}
           </div>
-          <div class="card-panel-num" >
-            {{ context[0] }}
+          <div class="card-panel-num">
+            {{ context[0] }}<span style="font-size: 10px;color:#888">{{unit}}</span>
           </div>
         </div>
       </div>
@@ -33,42 +36,46 @@
 </template>
 
 <script>
-export default {
-  name: 'Card1',
-  props: {
-    title: {
-      type: Array,
-      default: function() {
-        return ['标题', '标题']
+  export default {
+    name: 'Card1',
+    props: {
+      title: {
+        type: Array,
+        default: function () {
+          return ['标题', '标题']
+        }
+      },
+      subtitle: {
+        type: String,
+        default: ''
+      },
+      icon: {
+        type: String,
+        default: ''
+      },
+      context: {
+        type: Array,
+        default: function () {
+          return ['--', '--']
+        }
+      },
+      color: {
+        type: String,
+        default: '#40c9c6'
+      },
+      unit: {
+        type: String,
+        default: ''
       }
     },
-    subtitle: {
-      type: String,
-      default: ''
-    },
-    icon: {
-      type: String,
-      default: ''
-    },
-    context: {
-      type: Array,
-      default: function() {
-        return ['--', '--']
-      }
-    },
-    color: {
-      type: String,
-      default: '#40c9c6'
-    }
-  },
-  computed: {
-    backgroundColor() {
-      return {
-        color: this.color
+    computed: {
+      backgroundColor() {
+        return {
+          color: this.color
+        }
       }
     }
   }
-}
 </script>
 
 <style lang="scss" scoped>
@@ -108,7 +115,7 @@
       overflow: auto;
       margin-left: 5px;
 
-      .two{
+      .two {
         .card-panel-text {
           line-height: 18px;
           color: rgba(0, 0, 0, 0.45);
@@ -123,7 +130,7 @@
           float: right;
         }
       }
-      .only{
+      .only {
         .card-panel-text {
           line-height: 18px;
           color: rgba(0, 0, 0, 0.45);
diff --git a/src/icons/svg/icon-noise.svg b/src/icons/svg/icon-noise.svg
new file mode 100644
index 0000000..00bef71
--- /dev/null
+++ b/src/icons/svg/icon-noise.svg
@@ -0,0 +1,2 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1648634383080" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2093" xmlns:xlink="http://www.w3.org/1999/xlink" width="128" height="128"><defs><style type="text/css">@font-face { font-family: feedback-iconfont; src: url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.woff2?t=1630033759944") format("woff2"), url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.woff?t=1630033759944") format("woff"), url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.ttf?t=1630033759944") format("truetype"); }
+</style></defs><path d="M875.039 549.868c-25.436 0-47.411 13.91-59.3 34.4h-125.9l-99.564-199.177-76.703 281.23-51.528-566.757-67.461-5.735-130.8 490.44H49.397v68.802h267.259l94.464-354.268 51.235 563.733 67.451 5.913 79.432-291.445 38.077 76.057h168.428c11.91 20.419 33.864 34.391 59.3 34.391 37.98 0 68.792-30.879 68.792-68.797-0.005-38.062-30.817-68.787-68.797-68.787z" p-id="2094"></path></svg>
\ No newline at end of file
diff --git a/src/icons/svg/icon-valve.svg b/src/icons/svg/icon-valve.svg
new file mode 100644
index 0000000..f5d96e2
--- /dev/null
+++ b/src/icons/svg/icon-valve.svg
@@ -0,0 +1,2 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1648634707805" class="icon" viewBox="0 0 1090 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3809" xmlns:xlink="http://www.w3.org/1999/xlink" width="136.25" height="128"><defs><style type="text/css">@font-face { font-family: feedback-iconfont; src: url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.woff2?t=1630033759944") format("woff2"), url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.woff?t=1630033759944") format("woff"), url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.ttf?t=1630033759944") format("truetype"); }
+</style></defs><path d="M502.944 296.975V143.052h-231.98c-31.587 0-57.321-24.93-57.321-55.526 0-30.598 25.75-55.526 57.321-55.526H833.06c31.571 0 57.306 24.93 57.306 55.525 0 30.922-25.735 55.526-57.29 55.526h-231.64v153.924h18.179c21.615 0 39.112 16.955 39.112 37.904v90.565l-213.105-0.34v-90.225c0-20.95 17.497-37.904 39.128-37.904h18.194z m-381.74 590.293v63.84c0 9.306-7.834 16.955-17.698 16.955H58.231c-9.862-0.001-17.698-7.65-17.698-17.296V542.472c0-9.63 7.835-17.28 17.698-17.28h45.274c9.863 0 17.698 7.65 17.698 17.28v83.133h150.55c6.272-85.518 79.247-152.95 168.387-152.95h207.98c89.14 0 162.116 67.432 168.403 152.95h150.873v-83.798c0-9.29 7.495-16.615 17.033-16.615h46.297c9.523 0 17.001 7.308 17.001 16.615v409.625c0.341 9.321-7.478 16.63-17.016 16.63h-46.297c-9.523 0-17.018-7.309-17.018-16.63v-64.165H805.36C780.755 948.583 719.655 992 648.119 992H440.142c-71.52 0-132.635-43.402-157.239-104.733H121.204z" p-id="3810"></path></svg>
\ No newline at end of file
diff --git a/src/views/dashboard/components/PanelGroup.vue b/src/views/dashboard/components/PanelGroup.vue
index b72d289..332cbf9 100644
--- a/src/views/dashboard/components/PanelGroup.vue
+++ b/src/views/dashboard/components/PanelGroup.vue
@@ -1,12 +1,12 @@
 <template>
   <el-row class="panel-group">
     <div v-for="card in dataGroup1" :key="card.index" class="card-panel-col">
-      <card1 :title="card.title" :context="card.context" :icon="card.icon" :color="card.color"/>
+      <card1 :title="card.title" :context="card.context" :icon="card.icon" :color="card.color" :unit="card.unit"/>
     </div>
 
     <div v-for="card in dataGroup" :key="card.title" class="card-panel-col">
       <div v-if="hasPerm(card.permission)">
-        <card :title="card.title" :context="card.context" :icon="card.icon" :color="card.color" @click.native="goPage(card.path)"/>
+        <card :title="card.title" :context="card.context" :icon="card.icon" :unit="card.unit" :color="card.color" @click.native="goPage(card.path)"/>
       </div>
     </div>
   </el-row>
@@ -16,7 +16,7 @@
 import Card1 from '@/components/BigData/Card1'
 import Card from '@/components/BigData/Card'
 // 首页
-import { getWatchStatistic , waterMeterCount } from '@/api/overview'
+import { getWatchStatistic , waterMeterCount, valveCount } from '@/api/dashboard'
 // 根据布防数量统计井数量
 import { wellCountByBfzt } from '@/api/well'
 // 当前报警数
@@ -36,30 +36,33 @@
           context: ['--', '--'],
           icon: 'icon-water',
           color: '#40c9c6',
+          unit: '吨',
           index: 0
         },
         {
-          title: ['今日用水量', '昨日用水量'],
+          title: ['今日用水量', '生产厂区用水量'],
           context: ['--', '--'],
-          icon: 'icon-water',
+          icon: '',
           color: '#36a3f7',
+          unit: '吨',
           index: 1
         },
         {
-          title: ['实时噪声'],
+          title: ['滑道实时噪声'],
           context: ['--'],
-          icon: 'icon-device',
+          icon: 'icon-noise',
           color: '#f1c353',
+          unit: 'db',
           index: 2
         }
       ],
       dataGroup: [
         {
-          title: '设备总数',
+          title: '阀门数量',
           context: '--',
-          icon: 'icon-device',
+          icon: 'icon-valve',
           color: '#40c9c6',
-          path: '/deviceList',
+          path: '/deviceList?deviceType=20',
           permission: '/device/list'
         },
         {
@@ -67,11 +70,11 @@
           context: '--',
           icon: 'icon-watch',
           color: '#9694f7',
-          path: '/deviceList',
+          path: '/deviceList?deviceType=13',
           permission: '/device/list'
         },
         {
-          title: '当前报警数',
+          title: '报警信息',
           context: '--',
           icon: 'icon-alarm',
           color: '#f4516c',
@@ -83,10 +86,10 @@
   },
   mounted() {
     this.getWater()
-    this.getWellCount()
+    // this.getWellCount()
     this.getDeviceCount()
     this.getAlarmCount()
-    this.getJobCount()
+    // this.getJobCount()
   },
   methods: {
     refresh() {
@@ -97,24 +100,31 @@
       this.$router.push(path)
     },
     getWater() {
+      // 用水量
       getWatchStatistic().then(response => {
-        this.dataGroup1[0].context = [response.data.total, response.data.month]
-        this.dataGroup1[1].context = [response.data.today, response.data.yesterday]
-        this.dataGroup1[2].context = [Number(response.data.sound).toFixed(2)]
+        this.dataGroup1[0].context = [response.data.total?parseFloat(response.data.total).toFixed(0):'--', response.data.month?parseFloat(response.data.month).toFixed(0):'--']
+        this.dataGroup1[1].context = [response.data.today?parseFloat(response.data.today).toFixed(0):'--', response.data.yesterday?parseFloat(response.data.yesterday).toFixed(0):'--']
+        this.dataGroup1[2].context = [response.data.sound?Number(response.data.sound).toFixed(2):'--']
       })
-      waterMeterCount().then(response => {
-        this.dataGroup[1].context = response.data
-      })
+
     },
-    getWellCount() {
-      wellCountByBfzt().then(response => {
-        this.dataGroup[0].context = response.data.total
-      })
-    },
+    // getWellCount() {
+    //   wellCountByBfzt().then(response => {
+    //     this.dataGroup[0].context = response.data.total
+    //   })
+    // },
     getDeviceCount() {
       // deviceStaticByStatus().then(response => {
       //   this.dataGroup[1].context = response.data.total
       // })
+      // 阀门数量
+      valveCount().then(response => {
+        this.dataGroup[0].context = response.data
+      })
+      // 水表数量
+      waterMeterCount().then(response => {
+        this.dataGroup[1].context = response.data
+      })
     },
     getAlarmCount() {
       alarmNowStatic().then(response => {
@@ -159,7 +169,7 @@
   //   &:hover {
   //     .card-panel-icon-wrapper {
   //       color: #fff;
-        
+
   //     }
 
   //     .icon-people {
diff --git a/src/views/dashboard/components/waterCountByAreaBar.vue b/src/views/dashboard/components/waterCountByAreaBar.vue
index 1bdac48..c488923 100644
--- a/src/views/dashboard/components/waterCountByAreaBar.vue
+++ b/src/views/dashboard/components/waterCountByAreaBar.vue
@@ -1,9 +1,10 @@
 <template>
   <div class="container">
     <div class="statistic-container">
+      <el-button round size="mini" @click="setDefaultTime('year')">本年</el-button>
+      <el-button round size="mini" @click="setDefaultTime('season')">本季</el-button>
       <el-button round size="mini" @click="setDefaultTime('month')">本月</el-button>
-      <el-button round size="mini" @click="setDefaultTime('week')">近7日</el-button>
-      <el-button round size="mini" @click="setDefaultTime('yesterday')">昨日</el-button>
+      <el-button round size="mini" @click="setDefaultTime('week')">本周</el-button>
       <el-button round size="mini" @click="setDefaultTime('today')">今日</el-button>
       <el-date-picker
         v-model="timeRange"
@@ -107,7 +108,7 @@
   },
   mounted() {
     this.setDefaultTime('today')
-    this.fetchArea()
+    // this.fetchArea()
   },
   methods: {
     fetchArea() {
@@ -130,10 +131,11 @@
     },
     fetchData() {
       const params = {
-        areaId: this.areaId,
+        areaId: '110000',
         startTime: this.timeRange[0],
         endTime: this.timeRange[1]
       }
+      this.$emit('change', params)
       countBySecondArea(params).then(response => {
         this.isShow = false
         this.chartData.rows = response.data
@@ -153,7 +155,21 @@
       })
     },
     setDefaultTime(val) {
-      if (val === 'month') {
+      if (val === 'year') {
+        var today = new Date()
+        var tYear = today.getFullYear()
+        const beginTime = tYear + '-01-01'
+        const endTime = getDayTime(new Date().getTime())
+        this.timeRange = [beginTime, endTime.Format('yyyy-MM-dd')]
+      }if (val === 'season') {
+        var today = new Date()
+        var tYear = today.getFullYear()
+        var tMonth = today.getMonth() + 1
+        const oldMonth = tMonth<4?'01':(tMonth<7?'04':(tMonth<10?'07':'10'))
+        const beginTime = tYear + '-' + oldMonth + '-01'
+        const endTime = getDayTime(new Date().getTime())
+        this.timeRange = [beginTime, endTime.Format('yyyy-MM-dd')]
+      }else if (val === 'month') {
         var today = new Date()
         var tYear = today.getFullYear()
         var tMonth = today.getMonth() + 1
@@ -164,7 +180,8 @@
         const endTime = getDayTime(new Date().getTime())
         this.timeRange = [beginTime, endTime.Format('yyyy-MM-dd')]
       } else if (val === 'week') {
-        this.timeRange = [getDayTime(new Date().getTime() - 24 * 6 * 60 * 60 * 1000).Format('yyyy-MM-dd'), getDayTime(new Date().getTime()).Format('yyyy-MM-dd')]
+        const nowDayOfWeek =  new Date().getDay()-1
+        this.timeRange = [getDayTime(new Date().getTime() - 24 * nowDayOfWeek * 60 * 60 * 1000).Format('yyyy-MM-dd'), getDayTime(new Date().getTime()).Format('yyyy-MM-dd')]
       } else if (val === 'yesterday') {
         this.timeRange = [getDayTime(new Date().getTime() - 24 * 60 * 60 * 1000).Format('yyyy-MM-dd'), getDayTime(new Date().getTime() - 24 * 60 * 60 * 1000).Format('yyyy-MM-dd')]
       } else if (val === 'today') {
diff --git a/src/views/dashboard/components/waterCountByDay.vue b/src/views/dashboard/components/waterCountByDay.vue
index 8e12f02..78d1f7c 100644
--- a/src/views/dashboard/components/waterCountByDay.vue
+++ b/src/views/dashboard/components/waterCountByDay.vue
@@ -1,12 +1,12 @@
 <template>
   <div class="container">
-    <div class="function">
-      <el-button round size="mini" @click="changeTime('year')">近1年</el-button>
-      <el-button round size="mini" @click="changeTime('halfyear')">近6月</el-button>
-      <el-button round size="mini" @click="changeTime('3month')">近3月</el-button>
-      <el-button round size="mini" @click="changeTime('month')">近1月</el-button>
-      <el-button round size="mini" @click="changeTime('week')">近1周</el-button>
-    </div>
+    <!--<div class="function">-->
+      <!--<el-button round size="mini" @click="changeTime('year')">近1年</el-button>-->
+      <!--<el-button round size="mini" @click="changeTime('halfyear')">近6月</el-button>-->
+      <!--<el-button round size="mini" @click="changeTime('3month')">近3月</el-button>-->
+      <!--<el-button round size="mini" @click="changeTime('month')">近1月</el-button>-->
+      <!--<el-button round size="mini" @click="changeTime('week')">近1周</el-button>-->
+    <!--</div>-->
     <ve-line :data="chartData" :title="title" :extend="extend" :settings="chartSettings"/>
   </div>
 </template>
@@ -17,6 +17,18 @@
 import { getDoorAreaTree } from '@/api/system/area'
 export default {
   name: 'WaterCountByDay',
+  props:{
+    query: {
+      type: Object,
+      default:()=>{
+        return {
+          areaId: '',
+          startTime: '',
+          endTime: ''
+        }
+      }
+    }
+  },
   data() {
     return {
       listQuery: {
@@ -52,8 +64,13 @@
     }
   },
   mounted() {
-    this.changeTime('month')
-    this.fetchArea()
+    // this.changeTime('month')
+    // this.fetchArea()
+  },
+  watch:{
+    query(val){
+      this.fetchData()
+    }
   },
   methods: {
     fetchArea() {
@@ -73,7 +90,7 @@
       })
     },
     fetchData() {
-      countByDayFirst(this.listQuery).then(response => {
+      countByDayFirst(this.query).then(response => {
         const arr = response.data.map(function(item) {
           for (let i = 0; i < item.data.length; i++) {
             item[item.data[i].areaName] = item.data[i].count
diff --git a/src/views/dashboard/components/waterCountByDept.vue b/src/views/dashboard/components/waterCountByDept.vue
index a0c82cf..02e27cd 100644
--- a/src/views/dashboard/components/waterCountByDept.vue
+++ b/src/views/dashboard/components/waterCountByDept.vue
@@ -1,22 +1,22 @@
 <!--suppress ALL -->
 <template>
   <div class="container">
-    <div class="function">
-      <el-button round size="mini" @click="changeTime('year')">近1年</el-button>
-      <el-button round size="mini" @click="changeTime('halfyear')">近6月</el-button>
-      <el-button round size="mini" @click="changeTime('3month')">近3月</el-button>
-      <el-button round size="mini" @click="changeTime('month')">近1月</el-button>
-      <el-button round size="mini" @click="changeTime('week')">近1周</el-button>
-    </div>
+    <!--<div class="function">-->
+      <!--<el-button round size="mini" @click="changeTime('year')">近1年</el-button>-->
+      <!--<el-button round size="mini" @click="changeTime('halfyear')">近6月</el-button>-->
+      <!--<el-button round size="mini" @click="changeTime('3month')">近3月</el-button>-->
+      <!--<el-button round size="mini" @click="changeTime('month')">近1月</el-button>-->
+      <!--<el-button round size="mini" @click="changeTime('week')">近1周</el-button>-->
+    <!--</div>-->
     <ve-pie :data="chartData" :extend="extend" :title="title"/>
-    <div class="function">
-      <el-button
-        v-for="item in areaList"
-        :key="item.id"
-        round
-        @click="areaChange(item.id)"
-        size="mini">{{item.name}}</el-button>
-    </div>
+    <!--<div class="function">-->
+      <!--<el-button-->
+        <!--v-for="item in areaList"-->
+        <!--:key="item.id"-->
+        <!--round-->
+        <!--@click="areaChange(item.id)"-->
+        <!--size="mini">{{item.name}}</el-button>-->
+    <!--</div>-->
   </div>
 </template>
 
@@ -25,6 +25,18 @@
 import { getDoorAreaTree } from '@/api/system/area'
 export default {
   name: 'WaterCountByDepy',
+  props:{
+    query: {
+      type: Object,
+      default:()=>{
+        return {
+          areaId: '',
+          startTime: '',
+          endTime: ''
+        }
+      }
+    }
+  },
   data() {
     return {
       listQuery: {
@@ -69,7 +81,12 @@
   },
   mounted() {
     // TODO:待调试真接口
-    this.fetchArea()
+    // this.fetchArea()
+  },
+  watch:{
+    query(val){
+      this.fetchData()
+    }
   },
   methods: {
     fetchArea() {
@@ -104,8 +121,7 @@
       //   { 'areaName': '码头作业区', 'count': 78 },
       //   { 'areaName': '车间生产区', 'count': 78 }
       // ]
-      this.listQuery.areaId = this.areaId
-      countBySecondArea(this.listQuery).then(response => {
+      countBySecondArea(this.query).then(response => {
         this.chartData.rows = response.data
       })
     },
diff --git a/src/views/dashboard/components/waterNote.vue b/src/views/dashboard/components/waterNote.vue
new file mode 100644
index 0000000..aa0f448
--- /dev/null
+++ b/src/views/dashboard/components/waterNote.vue
@@ -0,0 +1,152 @@
+<!--suppress ALL -->
+<template>
+  <div class="container">
+    <div>
+      用水事记
+    </div>
+
+  </div>
+</template>
+
+<script>
+import { countBySecondArea } from '@/api/overview'
+import { getDoorAreaTree } from '@/api/system/area'
+export default {
+  name: 'WaterNote',
+  props:{
+    query: {
+      type: Object,
+      default:()=>{
+        return {
+          areaId: '',
+          startTime: '',
+          endTime: ''
+        }
+      }
+    }
+  },
+  data() {
+    return {
+      listQuery: {
+        areaId: '',
+        startTime: '',
+        endTime: ''
+      },
+      areaId:'',
+      areaList: [],
+      chartData: {
+        columns: ['areaName', 'count'],
+        rows: []
+      },
+      extend: {
+        grid: {
+          right: '30%'
+        },
+        legend: {
+          type: 'scroll',
+          top: '60px',
+          right: '0px',
+          orient: 'vertical'
+        },
+        series: {
+          label: { show: true, position: 'outside', formatter: '{b}' },
+          right: 120
+        },
+        tooltip: { trigger: 'item', formatter: '{b}<br/>用水量：{c}吨<br/>占比：{d}%' }
+      },
+      title: {
+        text: '分区用水占比图'
+      },
+      chartSettings: {
+        labelMap: {
+          'areaName': '分区',
+          'count': '用水量'
+        },
+        dimension: 'areaName',
+        metrics: 'count'
+      }
+    }
+  },
+  mounted() {
+    // TODO:待调试真接口
+    // this.fetchArea()
+  },
+  watch:{
+    query(val){
+      this.fetchData()
+    }
+  },
+  methods: {
+    fetchArea() {
+      getDoorAreaTree().then(response => {
+        if (response.code === 200) {
+          this.areaList = response.data.filter(item => {
+            return item.pid === '1'
+          }).map(function(item) {
+            return {
+              id: item.id, name: item.name
+            }
+          })
+          if (this.areaList.length !== 0) { this.areaChange(this.areaList[0].id) }
+        }
+      })
+    },
+    areaChange(val){
+      this.areaId = val
+      this.fetchData()
+    },
+    // 获取统计数据
+    fetchData() {
+      // this.chartData.rows = [
+      //   { 'areaName': '科技楼及食堂', 'count': 53 },
+      //   { 'areaName': 'A\\B\\C\\D\\E座', 'count': 78 },
+      //   { 'areaName': '厂区', 'count': 78 },
+      //   { 'areaName': '分段分区', 'count': 78 },
+      //   { 'areaName': '船坞分区', 'count': 78 },
+      //   { 'areaName': '刀把码头', 'count': 78 },
+      //   { 'areaName': '制管作业区', 'count': 78 },
+      //   { 'areaName': '滑道作业区', 'count': 78 },
+      //   { 'areaName': '码头作业区', 'count': 78 },
+      //   { 'areaName': '车间生产区', 'count': 78 }
+      // ]
+      countBySecondArea(this.query).then(response => {
+        this.chartData.rows = response.data
+      })
+    },
+    changeTime(timeType) {
+      let startTime
+      switch (timeType) {
+        case 'year':
+          startTime = getDayTime(new Date().getTime() - 24 * 365 * 60 * 60 * 1000)
+          this.listQuery.startTime = startTime.Format('yyyy-MM-dd')
+          break
+        case 'halfyear':
+          startTime = getDayTime(new Date().getTime() - 24 * 182 * 60 * 60 * 1000)
+          this.listQuery.startTime = startTime.Format('yyyy-MM-dd')
+          break
+        case '3month':
+          startTime = getDayTime(new Date().getTime() - 24 * 90 * 60 * 60 * 1000)
+          this.listQuery.startTime = startTime.Format('yyyy-MM-dd')
+          break
+        case 'month':
+          startTime = getDayTime(new Date().getTime() - 24 * 30 * 60 * 60 * 1000)
+          this.listQuery.startTime = startTime.Format('yyyy-MM-dd')
+          break
+        case 'week':
+          startTime = getDayTime(new Date().getTime() - 24 * 7 * 60 * 60 * 1000)
+          this.listQuery.startTime = startTime.Format('yyyy-MM-dd')
+          break
+      }
+      const endTime = new Date()
+      this.listQuery.endTime = endTime.Format('yyyy-MM-dd')
+      this.fetchData()
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+  .container{
+    position:relative;
+    height: 455px;
+  }
+</style>
diff --git a/src/views/dashboard/index.vue b/src/views/dashboard/index.vue
index fdbc38a..831dbc3 100644
--- a/src/views/dashboard/index.vue
+++ b/src/views/dashboard/index.vue
@@ -1,31 +1,33 @@
 <template>
   <div class="dashboard-container" style="background-color: white">
     <panel-group ref="panelgroup"/>
-    <el-row :gutter="10">
+    <el-row>
       <!-- 用水统计图 -->
+      <el-col :span="18">
+        <el-card shadow="never">
+          <water-count-by-area-bar @change="changeWaterQuery"/>
+        </el-card>
+      </el-col>
+      <el-col :span="6">
+        <el-card shadow="never">
+          <water-note/>
+        </el-card>
+      </el-col>
+    </el-row>
+    <el-row>
+      <!-- 分区用水占比图 -->
       <el-col :span="12">
         <el-card shadow="never">
-          <water-count-by-dept-bar/>
+          <water-count-by-dept :query="listQuery1" ref="waterCountPie"/>
         </el-card>
       </el-col>
       <!-- 用水走势图 -->
       <el-col :span="12">
         <el-card shadow="never">
-          <water-count-by-day/>
+          <water-count-by-day :query="listQuery1" ref="waterCountDay"/>
         </el-card>
       </el-col>
-      <!-- 分区用水统计图 -->
-      <el-col :span="12">
-        <el-card shadow="never">
-          <water-count-by-area-bar/>
-        </el-card>
-      </el-col>
-      <!-- 分区用水占比图 -->
-      <el-col :span="12">
-        <el-card shadow="never">
-          <water-count-by-depy/>
-        </el-card>
-      </el-col>
+
       <!--水表报警次数统计-->
       <el-col v-if="hasPerm('/statics/alarmsByDay')" :span="12">
         <el-card shadow="never">
@@ -64,20 +66,22 @@
 import DeviceCountByOnline from './components/DeviceCountByOnline'
 import AlarmByDays from './components/AlarmByDays'
 import JobByStatus from './components/JobByStatus'
-import WaterCountByDepy from './components/waterCountByDept'
+import WaterCountByDept from './components/waterCountByDept'
 import WaterCountByDeptBar from './components/waterCountByDeptBar'
 import WaterCountByDay from './components/waterCountByDay'
 import WaterCountByAreaBar from "./components/waterCountByAreaBar";
 import WatchAlarmBar from "./components/watchAlarmBar";
+import WaterNote from "./components/waterNote";
 
 export default {
   name: 'Dashboard',
   components: {
+    WaterNote,
     WatchAlarmBar,
     WaterCountByAreaBar,
     WaterCountByDay,
     WaterCountByDeptBar,
-    WaterCountByDepy,
+    WaterCountByDept,
     JobByStatus,
     AlarmByDays,
     PanelGroup,
@@ -108,12 +112,25 @@
       state.needRefresh = needRefresh
     }
   },
+  data(){
+    return {
+      listQuery1:{
+        areaId:'110000',
+        startTime:new Date().Format('yyyy-MM-dd'),
+        endTime:new Date().Format('yyyy-MM-dd')
+      },// 分区用水量查询条件
+      listQuery2:{
+        areaId:'',
+        startTime:'',
+        endTime:''
+      } // 分区报警查询条件
+    }
+  },
   watch: {
     needRefresh(val) {
       // 需要刷新
       if (val) {
         console.log('refresh dashboard')
-        debugger
         this.$refs.panelgroup.refresh()
       }
     }
@@ -124,6 +141,10 @@
   methods: {
     webSocket() {
       this.$store.dispatch('initWebSocket')
+    },
+    // 切换分区查询条件
+    changeWaterQuery(listQuery1){
+      this.listQuery1 = listQuery1
     }
   }
 }
diff --git a/src/views/dashboard/index_bak.vue b/src/views/dashboard/index_bak.vue
new file mode 100644
index 0000000..fdbc38a
--- /dev/null
+++ b/src/views/dashboard/index_bak.vue
@@ -0,0 +1,149 @@
+<template>
+  <div class="dashboard-container" style="background-color: white">
+    <panel-group ref="panelgroup"/>
+    <el-row :gutter="10">
+      <!-- 用水统计图 -->
+      <el-col :span="12">
+        <el-card shadow="never">
+          <water-count-by-dept-bar/>
+        </el-card>
+      </el-col>
+      <!-- 用水走势图 -->
+      <el-col :span="12">
+        <el-card shadow="never">
+          <water-count-by-day/>
+        </el-card>
+      </el-col>
+      <!-- 分区用水统计图 -->
+      <el-col :span="12">
+        <el-card shadow="never">
+          <water-count-by-area-bar/>
+        </el-card>
+      </el-col>
+      <!-- 分区用水占比图 -->
+      <el-col :span="12">
+        <el-card shadow="never">
+          <water-count-by-depy/>
+        </el-card>
+      </el-col>
+      <!--水表报警次数统计-->
+      <el-col v-if="hasPerm('/statics/alarmsByDay')" :span="12">
+        <el-card shadow="never">
+          <watch-alarm-bar/>
+        </el-card>
+      </el-col>
+      <!--报警次数统计-->
+      <el-col v-if="hasPerm('/statics/alarmsByDay')" :span="12">
+        <el-card shadow="never">
+          <alarm-by-days/>
+        </el-card>
+      </el-col>
+      <!--设备在线数量统计-->
+      <el-col v-if="hasPerm('/statics/deviceStaticsByType')" :span="12">
+        <el-card shadow="never">
+          <device-count-by-online/>
+        </el-card>
+      </el-col>
+
+      <!--设备数量统计-->
+      <el-col v-if="hasPerm('/statics/deviceStaticsByType')" :span="12">
+        <el-card shadow="never">
+          <device-count/>
+        </el-card>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+import PanelGroup from './components/PanelGroup'
+import WellCountByBfzt from './components/WellCountByBfzt'
+import WellCountByType from './components/WellCountByType'
+import DeviceCount from './components/DeviceCount'
+import DeviceCountByOnline from './components/DeviceCountByOnline'
+import AlarmByDays from './components/AlarmByDays'
+import JobByStatus from './components/JobByStatus'
+import WaterCountByDepy from './components/waterCountByDept'
+import WaterCountByDeptBar from './components/waterCountByDeptBar'
+import WaterCountByDay from './components/waterCountByDay'
+import WaterCountByAreaBar from "./components/waterCountByAreaBar";
+import WatchAlarmBar from "./components/watchAlarmBar";
+
+export default {
+  name: 'Dashboard',
+  components: {
+    WatchAlarmBar,
+    WaterCountByAreaBar,
+    WaterCountByDay,
+    WaterCountByDeptBar,
+    WaterCountByDepy,
+    JobByStatus,
+    AlarmByDays,
+    PanelGroup,
+    WellCountByBfzt,
+    WellCountByType,
+    DeviceCount,
+    DeviceCountByOnline
+  },
+  computed: {
+    ...mapGetters([
+      'name',
+      'roleNames',
+      'roleTips',
+      'wellTypes',
+      'deviceTypes',
+      'communications',
+      'area'
+    ])
+  },
+  mutations: {
+    SET_WEBSOCKET: (state, websocket) => {
+      state.websocket = websocket
+    },
+    SET_WS_STATUS: (state, wsStatus) => {
+      state.wsStatus = wsStatus
+    },
+    SET_NEED_REFRESH: (state, needRefresh) => {
+      state.needRefresh = needRefresh
+    }
+  },
+  watch: {
+    needRefresh(val) {
+      // 需要刷新
+      if (val) {
+        console.log('refresh dashboard')
+        debugger
+        this.$refs.panelgroup.refresh()
+      }
+    }
+  },
+  mounted() {
+    // this.webSocket()
+  },
+  methods: {
+    webSocket() {
+      this.$store.dispatch('initWebSocket')
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.dashboard-container{
+  .el-row{
+    .el-col{
+      margin-bottom: 10px;
+    }
+  }
+}
+.dashboard {
+  &-container {
+    padding: 10px 20px;
+  }
+  &-text {
+    font-size: 30px;
+    line-height: 46px;
+  }
+}
+</style>
diff --git a/src/views/layout/Layout.vue b/src/views/layout/Layout.vue
deleted file mode 100644
index 7c3d46d..0000000
--- a/src/views/layout/Layout.vue
+++ /dev/null
@@ -1,111 +0,0 @@
-<template>
-  <el-container :class="classObj" class="app-wrapper">
-    <div v-if="device==='mobile'&&sidebar.opened" class="drawer-bg" @click="handleClickOutside"/>
-    <app-header class="app-header"/>
-    <el-main class="app-body">
-      <!--侧边栏-->
-      <sidebar class="sidebar-container"/>
-      <!--右半部分-->
-      <div :class="{hasTagsView:needTagsView}" class="main-container">
-        <!--开启固定头部设置-->
-        <div v-if="fixedHeader">
-          <!--导航(面包屑)-->
-          <navbar/>
-          <!--标签栏-->
-          <tags-view v-if="needTagsView" />
-          <!--主内容包裹在el-scrollbar中-->
-          <el-scrollbar class="no-head-scrollbar">
-            <app-main/>
-          </el-scrollbar>
-        </div>
-        <!--为开始固定头部设置-->
-        <div v-else>
-          <!--导航，tagsView都包裹在el-scrollbar中-->
-          <el-scrollbar class="has-head-scrollbar">
-            <navbar/>
-            <tags-view v-if="needTagsView" />
-            <app-main/>
-          </el-scrollbar>
-        </div>
-        <!--悬浮框-->
-        <right-panel v-if="false">
-          <settings />
-        </right-panel>
-      </div>
-    </el-main>
-  </el-container>
-</template>
-
-<script>
-import RightPanel from '@/components/RightPanel'
-import { AppHeader, Navbar, Sidebar, AppMain } from './components'
-import ResizeMixin from './mixin/ResizeHandler'
-import TagsView from './components/TagsView/index'
-import { mapState } from 'vuex'
-import Settings from './components/Settings/index'
-
-export default {
-  name: 'Layout',
-  components: {
-    Settings,
-    TagsView,
-    AppHeader,
-    Navbar,
-    Sidebar,
-    AppMain,
-    RightPanel
-  },
-  mixins: [ResizeMixin],
-  computed: {
-    ...mapState({
-      sidebar: state => state.app.sidebar,
-      device: state => state.app.device,
-      showSettings: state => state.settings.showSettings,
-      needTagsView: state => state.settings.tagsView,
-      fixedHeader: state => state.settings.fixedHeader
-    }),
-    classObj() {
-      return {
-        hideSidebar: !this.sidebar.opened,
-        openSidebar: this.sidebar.opened,
-        withoutAnimation: this.sidebar.withoutAnimation,
-        mobile: this.device === 'mobile'
-      }
-    }
-  },
-  methods: {
-    handleClickOutside() {
-      this.$store.dispatch('CloseSideBar', { withoutAnimation: false })
-    }
-  }
-}
-</script>
-
-<style rel="stylesheet/scss" lang="scss" scoped>
-  @import "src/styles/mixin.scss";
-  .app-wrapper {
-    @include clearfix;
-    position: relative;
-    height: 100%;
-    width: 100%;
-    &.mobile.openSidebar{
-      position: fixed;
-      top: 0;
-    }
-  }
-  .drawer-bg {
-    background: #000;
-    opacity: 0.3;
-    width: 100%;
-    top: 0;
-    height: 100%;
-    position: absolute;
-    z-index: 999;
-  }
-  /*.el-scrollbar{*/
-    /*height: calc(100vh - 50px);*/
-  /*}*/
-  .has-head-scrollbar{
-    height: 100vh;
-  }
-</style>

diff --git a/src/api/dashboard.js b/src/api/dashboard.js
index e69de29..0a4ddfc 100644
--- a/src/api/dashboard.js
+++ b/src/api/dashboard.js
@@ -0,0 +1,73 @@
+/**
+ * 井总览模块接口
+ */
+import request from '@/utils/request'
+
+// 用水量、噪声统计数据
+export function getWatchStatistic() {
+  return request({
+    url: 'waterStatistic/overview',
+    method: 'get'
+  })
+}
+// 水表数量
+export function waterMeterCount() {
+  return request({
+    url: 'waterMeterData/count',
+    method: 'get'
+  })
+}
+// 阀门数量
+export function valveCount() {
+  return request({
+    url: 'waterMeterData/count',
+    method: 'get'
+  })
+}
+
+// 查询一级分区各区用水量
+export function countByFirstArea(params) {
+  return request({
+    url: 'waterStatistic/countByFirstArea',
+    method: 'get',
+    params
+  })
+}
+
+// 查询一级分区7日用水量
+export function countByDayFirst(params) {
+  return request({
+    url: 'waterStatistic/countByDayFirst',
+    method: 'get',
+    params
+  })
+}
+
+// 查询二级分区各区用水量
+export function countBySecondArea(params) {
+  return request({
+    url: 'waterStatistic/countBySecondArea',
+    method: 'get',
+    params
+  })
+}
+
+// 查询二级分区水表告警
+export function alarmBySecondArea(params) {
+  return request({
+    url: 'waterStatistic/alarmBySecondArea',
+    method: 'get',
+    params
+  })
+}
+
+// 设备7日报警趋势
+export function alarmCountByDay(params) {
+  return request({
+    url: 'waterStatistic/alarmCountByDay',
+    method: 'get',
+    params
+  })
+}
+
+
diff --git a/src/components/BigData/Card/index.vue b/src/components/BigData/Card/index.vue
index d71e609..45359c9 100644
--- a/src/components/BigData/Card/index.vue
+++ b/src/components/BigData/Card/index.vue
@@ -10,6 +10,7 @@
         </div>
         <div class="card-panel-num" >
           {{ context }}
+          <span style="font-size: 10px;color:#888">{{unit}}</span>
         </div>
       </div>
     </div>
@@ -39,6 +40,10 @@
     color: {
       type: String,
       default: '#40c9c6'
+    },
+    unit:{
+      type: String,
+      default:''
     }
   },
   computed: {
diff --git a/src/components/BigData/Card1/index.vue b/src/components/BigData/Card1/index.vue
index 030b2dc..aa46454 100644
--- a/src/components/BigData/Card1/index.vue
+++ b/src/components/BigData/Card1/index.vue
@@ -1,10 +1,11 @@
 <template>
   <el-card :body-style="{ padding: '0px' }" shadow="always">
-    <div class="card-panel" >
-      <div :style="backgroundColor" class="card-panel-icon-wrapper">
-        <svg-icon :icon-class="icon" class-name="card-panel-icon" />
+    <div class="card-panel">
+      <div v-if="icon" :style="backgroundColor" class="card-panel-icon-wrapper">
+        <svg-icon :icon-class="icon" class-name="card-panel-icon"/>
       </div>
-      <div  class="card-panel-description">
+      <div v-else style="float:left; width: 20px;height: 100%;"></div>
+      <div class="card-panel-description">
         <!-- <div class="card-panel-text">
           {{ title[0] }} <span class="card-panel-num">{{ context[0] }}</span>
         </div>
@@ -13,18 +14,20 @@
         </div> -->
         <div class="two" v-if="title.length===2">
           <div class="card-panel-text">
-            {{ title[0] }} <span class="card-panel-num">{{ context[0] }}</span>
+            {{ title[0] }} <span class="card-panel-num">{{ context[0] }}<span
+            style="font-size: 10px;color:#888;margin-left: 5px">{{unit}}</span></span>
           </div>
-          <div class="card-panel-text" >
-            {{ title[1] }} <span class="card-panel-num">{{ context[1] }}</span>
+          <div class="card-panel-text">
+            {{ title[1] }} <span class="card-panel-num">{{ context[1] }}<span
+            style="font-size: 10px;color:#888;margin-left: 5px">{{unit}}</span></span>
           </div>
         </div>
         <div class="only" v-else>
           <div class="card-panel-text">
             {{ title[0] }}
           </div>
-          <div class="card-panel-num" >
-            {{ context[0] }}
+          <div class="card-panel-num">
+            {{ context[0] }}<span style="font-size: 10px;color:#888">{{unit}}</span>
           </div>
         </div>
       </div>
@@ -33,42 +36,46 @@
 </template>
 
 <script>
-export default {
-  name: 'Card1',
-  props: {
-    title: {
-      type: Array,
-      default: function() {
-        return ['标题', '标题']
+  export default {
+    name: 'Card1',
+    props: {
+      title: {
+        type: Array,
+        default: function () {
+          return ['标题', '标题']
+        }
+      },
+      subtitle: {
+        type: String,
+        default: ''
+      },
+      icon: {
+        type: String,
+        default: ''
+      },
+      context: {
+        type: Array,
+        default: function () {
+          return ['--', '--']
+        }
+      },
+      color: {
+        type: String,
+        default: '#40c9c6'
+      },
+      unit: {
+        type: String,
+        default: ''
       }
     },
-    subtitle: {
-      type: String,
-      default: ''
-    },
-    icon: {
-      type: String,
-      default: ''
-    },
-    context: {
-      type: Array,
-      default: function() {
-        return ['--', '--']
-      }
-    },
-    color: {
-      type: String,
-      default: '#40c9c6'
-    }
-  },
-  computed: {
-    backgroundColor() {
-      return {
-        color: this.color
+    computed: {
+      backgroundColor() {
+        return {
+          color: this.color
+        }
       }
     }
   }
-}
 </script>
 
 <style lang="scss" scoped>
@@ -108,7 +115,7 @@
       overflow: auto;
       margin-left: 5px;
 
-      .two{
+      .two {
         .card-panel-text {
           line-height: 18px;
           color: rgba(0, 0, 0, 0.45);
@@ -123,7 +130,7 @@
           float: right;
         }
       }
-      .only{
+      .only {
         .card-panel-text {
           line-height: 18px;
           color: rgba(0, 0, 0, 0.45);
diff --git a/src/icons/svg/icon-noise.svg b/src/icons/svg/icon-noise.svg
new file mode 100644
index 0000000..00bef71
--- /dev/null
+++ b/src/icons/svg/icon-noise.svg
@@ -0,0 +1,2 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1648634383080" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2093" xmlns:xlink="http://www.w3.org/1999/xlink" width="128" height="128"><defs><style type="text/css">@font-face { font-family: feedback-iconfont; src: url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.woff2?t=1630033759944") format("woff2"), url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.woff?t=1630033759944") format("woff"), url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.ttf?t=1630033759944") format("truetype"); }
+</style></defs><path d="M875.039 549.868c-25.436 0-47.411 13.91-59.3 34.4h-125.9l-99.564-199.177-76.703 281.23-51.528-566.757-67.461-5.735-130.8 490.44H49.397v68.802h267.259l94.464-354.268 51.235 563.733 67.451 5.913 79.432-291.445 38.077 76.057h168.428c11.91 20.419 33.864 34.391 59.3 34.391 37.98 0 68.792-30.879 68.792-68.797-0.005-38.062-30.817-68.787-68.797-68.787z" p-id="2094"></path></svg>
\ No newline at end of file
diff --git a/src/icons/svg/icon-valve.svg b/src/icons/svg/icon-valve.svg
new file mode 100644
index 0000000..f5d96e2
--- /dev/null
+++ b/src/icons/svg/icon-valve.svg
@@ -0,0 +1,2 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1648634707805" class="icon" viewBox="0 0 1090 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3809" xmlns:xlink="http://www.w3.org/1999/xlink" width="136.25" height="128"><defs><style type="text/css">@font-face { font-family: feedback-iconfont; src: url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.woff2?t=1630033759944") format("woff2"), url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.woff?t=1630033759944") format("woff"), url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.ttf?t=1630033759944") format("truetype"); }
+</style></defs><path d="M502.944 296.975V143.052h-231.98c-31.587 0-57.321-24.93-57.321-55.526 0-30.598 25.75-55.526 57.321-55.526H833.06c31.571 0 57.306 24.93 57.306 55.525 0 30.922-25.735 55.526-57.29 55.526h-231.64v153.924h18.179c21.615 0 39.112 16.955 39.112 37.904v90.565l-213.105-0.34v-90.225c0-20.95 17.497-37.904 39.128-37.904h18.194z m-381.74 590.293v63.84c0 9.306-7.834 16.955-17.698 16.955H58.231c-9.862-0.001-17.698-7.65-17.698-17.296V542.472c0-9.63 7.835-17.28 17.698-17.28h45.274c9.863 0 17.698 7.65 17.698 17.28v83.133h150.55c6.272-85.518 79.247-152.95 168.387-152.95h207.98c89.14 0 162.116 67.432 168.403 152.95h150.873v-83.798c0-9.29 7.495-16.615 17.033-16.615h46.297c9.523 0 17.001 7.308 17.001 16.615v409.625c0.341 9.321-7.478 16.63-17.016 16.63h-46.297c-9.523 0-17.018-7.309-17.018-16.63v-64.165H805.36C780.755 948.583 719.655 992 648.119 992H440.142c-71.52 0-132.635-43.402-157.239-104.733H121.204z" p-id="3810"></path></svg>
\ No newline at end of file
diff --git a/src/views/dashboard/components/PanelGroup.vue b/src/views/dashboard/components/PanelGroup.vue
index b72d289..332cbf9 100644
--- a/src/views/dashboard/components/PanelGroup.vue
+++ b/src/views/dashboard/components/PanelGroup.vue
@@ -1,12 +1,12 @@
 <template>
   <el-row class="panel-group">
     <div v-for="card in dataGroup1" :key="card.index" class="card-panel-col">
-      <card1 :title="card.title" :context="card.context" :icon="card.icon" :color="card.color"/>
+      <card1 :title="card.title" :context="card.context" :icon="card.icon" :color="card.color" :unit="card.unit"/>
     </div>
 
     <div v-for="card in dataGroup" :key="card.title" class="card-panel-col">
       <div v-if="hasPerm(card.permission)">
-        <card :title="card.title" :context="card.context" :icon="card.icon" :color="card.color" @click.native="goPage(card.path)"/>
+        <card :title="card.title" :context="card.context" :icon="card.icon" :unit="card.unit" :color="card.color" @click.native="goPage(card.path)"/>
       </div>
     </div>
   </el-row>
@@ -16,7 +16,7 @@
 import Card1 from '@/components/BigData/Card1'
 import Card from '@/components/BigData/Card'
 // 首页
-import { getWatchStatistic , waterMeterCount } from '@/api/overview'
+import { getWatchStatistic , waterMeterCount, valveCount } from '@/api/dashboard'
 // 根据布防数量统计井数量
 import { wellCountByBfzt } from '@/api/well'
 // 当前报警数
@@ -36,30 +36,33 @@
           context: ['--', '--'],
           icon: 'icon-water',
           color: '#40c9c6',
+          unit: '吨',
           index: 0
         },
         {
-          title: ['今日用水量', '昨日用水量'],
+          title: ['今日用水量', '生产厂区用水量'],
           context: ['--', '--'],
-          icon: 'icon-water',
+          icon: '',
           color: '#36a3f7',
+          unit: '吨',
           index: 1
         },
         {
-          title: ['实时噪声'],
+          title: ['滑道实时噪声'],
           context: ['--'],
-          icon: 'icon-device',
+          icon: 'icon-noise',
           color: '#f1c353',
+          unit: 'db',
           index: 2
         }
       ],
       dataGroup: [
         {
-          title: '设备总数',
+          title: '阀门数量',
           context: '--',
-          icon: 'icon-device',
+          icon: 'icon-valve',
           color: '#40c9c6',
-          path: '/deviceList',
+          path: '/deviceList?deviceType=20',
           permission: '/device/list'
         },
         {
@@ -67,11 +70,11 @@
           context: '--',
           icon: 'icon-watch',
           color: '#9694f7',
-          path: '/deviceList',
+          path: '/deviceList?deviceType=13',
           permission: '/device/list'
         },
         {
-          title: '当前报警数',
+          title: '报警信息',
           context: '--',
           icon: 'icon-alarm',
           color: '#f4516c',
@@ -83,10 +86,10 @@
   },
   mounted() {
     this.getWater()
-    this.getWellCount()
+    // this.getWellCount()
     this.getDeviceCount()
     this.getAlarmCount()
-    this.getJobCount()
+    // this.getJobCount()
   },
   methods: {
     refresh() {
@@ -97,24 +100,31 @@
       this.$router.push(path)
     },
     getWater() {
+      // 用水量
       getWatchStatistic().then(response => {
-        this.dataGroup1[0].context = [response.data.total, response.data.month]
-        this.dataGroup1[1].context = [response.data.today, response.data.yesterday]
-        this.dataGroup1[2].context = [Number(response.data.sound).toFixed(2)]
+        this.dataGroup1[0].context = [response.data.total?parseFloat(response.data.total).toFixed(0):'--', response.data.month?parseFloat(response.data.month).toFixed(0):'--']
+        this.dataGroup1[1].context = [response.data.today?parseFloat(response.data.today).toFixed(0):'--', response.data.yesterday?parseFloat(response.data.yesterday).toFixed(0):'--']
+        this.dataGroup1[2].context = [response.data.sound?Number(response.data.sound).toFixed(2):'--']
       })
-      waterMeterCount().then(response => {
-        this.dataGroup[1].context = response.data
-      })
+
     },
-    getWellCount() {
-      wellCountByBfzt().then(response => {
-        this.dataGroup[0].context = response.data.total
-      })
-    },
+    // getWellCount() {
+    //   wellCountByBfzt().then(response => {
+    //     this.dataGroup[0].context = response.data.total
+    //   })
+    // },
     getDeviceCount() {
       // deviceStaticByStatus().then(response => {
       //   this.dataGroup[1].context = response.data.total
       // })
+      // 阀门数量
+      valveCount().then(response => {
+        this.dataGroup[0].context = response.data
+      })
+      // 水表数量
+      waterMeterCount().then(response => {
+        this.dataGroup[1].context = response.data
+      })
     },
     getAlarmCount() {
       alarmNowStatic().then(response => {
@@ -159,7 +169,7 @@
   //   &:hover {
   //     .card-panel-icon-wrapper {
   //       color: #fff;
-        
+
   //     }
 
   //     .icon-people {
diff --git a/src/views/dashboard/components/waterCountByAreaBar.vue b/src/views/dashboard/components/waterCountByAreaBar.vue
index 1bdac48..c488923 100644
--- a/src/views/dashboard/components/waterCountByAreaBar.vue
+++ b/src/views/dashboard/components/waterCountByAreaBar.vue
@@ -1,9 +1,10 @@
 <template>
   <div class="container">
     <div class="statistic-container">
+      <el-button round size="mini" @click="setDefaultTime('year')">本年</el-button>
+      <el-button round size="mini" @click="setDefaultTime('season')">本季</el-button>
       <el-button round size="mini" @click="setDefaultTime('month')">本月</el-button>
-      <el-button round size="mini" @click="setDefaultTime('week')">近7日</el-button>
-      <el-button round size="mini" @click="setDefaultTime('yesterday')">昨日</el-button>
+      <el-button round size="mini" @click="setDefaultTime('week')">本周</el-button>
       <el-button round size="mini" @click="setDefaultTime('today')">今日</el-button>
       <el-date-picker
         v-model="timeRange"
@@ -107,7 +108,7 @@
   },
   mounted() {
     this.setDefaultTime('today')
-    this.fetchArea()
+    // this.fetchArea()
   },
   methods: {
     fetchArea() {
@@ -130,10 +131,11 @@
     },
     fetchData() {
       const params = {
-        areaId: this.areaId,
+        areaId: '110000',
         startTime: this.timeRange[0],
         endTime: this.timeRange[1]
       }
+      this.$emit('change', params)
       countBySecondArea(params).then(response => {
         this.isShow = false
         this.chartData.rows = response.data
@@ -153,7 +155,21 @@
       })
     },
     setDefaultTime(val) {
-      if (val === 'month') {
+      if (val === 'year') {
+        var today = new Date()
+        var tYear = today.getFullYear()
+        const beginTime = tYear + '-01-01'
+        const endTime = getDayTime(new Date().getTime())
+        this.timeRange = [beginTime, endTime.Format('yyyy-MM-dd')]
+      }if (val === 'season') {
+        var today = new Date()
+        var tYear = today.getFullYear()
+        var tMonth = today.getMonth() + 1
+        const oldMonth = tMonth<4?'01':(tMonth<7?'04':(tMonth<10?'07':'10'))
+        const beginTime = tYear + '-' + oldMonth + '-01'
+        const endTime = getDayTime(new Date().getTime())
+        this.timeRange = [beginTime, endTime.Format('yyyy-MM-dd')]
+      }else if (val === 'month') {
         var today = new Date()
         var tYear = today.getFullYear()
         var tMonth = today.getMonth() + 1
@@ -164,7 +180,8 @@
         const endTime = getDayTime(new Date().getTime())
         this.timeRange = [beginTime, endTime.Format('yyyy-MM-dd')]
       } else if (val === 'week') {
-        this.timeRange = [getDayTime(new Date().getTime() - 24 * 6 * 60 * 60 * 1000).Format('yyyy-MM-dd'), getDayTime(new Date().getTime()).Format('yyyy-MM-dd')]
+        const nowDayOfWeek =  new Date().getDay()-1
+        this.timeRange = [getDayTime(new Date().getTime() - 24 * nowDayOfWeek * 60 * 60 * 1000).Format('yyyy-MM-dd'), getDayTime(new Date().getTime()).Format('yyyy-MM-dd')]
       } else if (val === 'yesterday') {
         this.timeRange = [getDayTime(new Date().getTime() - 24 * 60 * 60 * 1000).Format('yyyy-MM-dd'), getDayTime(new Date().getTime() - 24 * 60 * 60 * 1000).Format('yyyy-MM-dd')]
       } else if (val === 'today') {
diff --git a/src/views/dashboard/components/waterCountByDay.vue b/src/views/dashboard/components/waterCountByDay.vue
index 8e12f02..78d1f7c 100644
--- a/src/views/dashboard/components/waterCountByDay.vue
+++ b/src/views/dashboard/components/waterCountByDay.vue
@@ -1,12 +1,12 @@
 <template>
   <div class="container">
-    <div class="function">
-      <el-button round size="mini" @click="changeTime('year')">近1年</el-button>
-      <el-button round size="mini" @click="changeTime('halfyear')">近6月</el-button>
-      <el-button round size="mini" @click="changeTime('3month')">近3月</el-button>
-      <el-button round size="mini" @click="changeTime('month')">近1月</el-button>
-      <el-button round size="mini" @click="changeTime('week')">近1周</el-button>
-    </div>
+    <!--<div class="function">-->
+      <!--<el-button round size="mini" @click="changeTime('year')">近1年</el-button>-->
+      <!--<el-button round size="mini" @click="changeTime('halfyear')">近6月</el-button>-->
+      <!--<el-button round size="mini" @click="changeTime('3month')">近3月</el-button>-->
+      <!--<el-button round size="mini" @click="changeTime('month')">近1月</el-button>-->
+      <!--<el-button round size="mini" @click="changeTime('week')">近1周</el-button>-->
+    <!--</div>-->
     <ve-line :data="chartData" :title="title" :extend="extend" :settings="chartSettings"/>
   </div>
 </template>
@@ -17,6 +17,18 @@
 import { getDoorAreaTree } from '@/api/system/area'
 export default {
   name: 'WaterCountByDay',
+  props:{
+    query: {
+      type: Object,
+      default:()=>{
+        return {
+          areaId: '',
+          startTime: '',
+          endTime: ''
+        }
+      }
+    }
+  },
   data() {
     return {
       listQuery: {
@@ -52,8 +64,13 @@
     }
   },
   mounted() {
-    this.changeTime('month')
-    this.fetchArea()
+    // this.changeTime('month')
+    // this.fetchArea()
+  },
+  watch:{
+    query(val){
+      this.fetchData()
+    }
   },
   methods: {
     fetchArea() {
@@ -73,7 +90,7 @@
       })
     },
     fetchData() {
-      countByDayFirst(this.listQuery).then(response => {
+      countByDayFirst(this.query).then(response => {
         const arr = response.data.map(function(item) {
           for (let i = 0; i < item.data.length; i++) {
             item[item.data[i].areaName] = item.data[i].count
diff --git a/src/views/dashboard/components/waterCountByDept.vue b/src/views/dashboard/components/waterCountByDept.vue
index a0c82cf..02e27cd 100644
--- a/src/views/dashboard/components/waterCountByDept.vue
+++ b/src/views/dashboard/components/waterCountByDept.vue
@@ -1,22 +1,22 @@
 <!--suppress ALL -->
 <template>
   <div class="container">
-    <div class="function">
-      <el-button round size="mini" @click="changeTime('year')">近1年</el-button>
-      <el-button round size="mini" @click="changeTime('halfyear')">近6月</el-button>
-      <el-button round size="mini" @click="changeTime('3month')">近3月</el-button>
-      <el-button round size="mini" @click="changeTime('month')">近1月</el-button>
-      <el-button round size="mini" @click="changeTime('week')">近1周</el-button>
-    </div>
+    <!--<div class="function">-->
+      <!--<el-button round size="mini" @click="changeTime('year')">近1年</el-button>-->
+      <!--<el-button round size="mini" @click="changeTime('halfyear')">近6月</el-button>-->
+      <!--<el-button round size="mini" @click="changeTime('3month')">近3月</el-button>-->
+      <!--<el-button round size="mini" @click="changeTime('month')">近1月</el-button>-->
+      <!--<el-button round size="mini" @click="changeTime('week')">近1周</el-button>-->
+    <!--</div>-->
     <ve-pie :data="chartData" :extend="extend" :title="title"/>
-    <div class="function">
-      <el-button
-        v-for="item in areaList"
-        :key="item.id"
-        round
-        @click="areaChange(item.id)"
-        size="mini">{{item.name}}</el-button>
-    </div>
+    <!--<div class="function">-->
+      <!--<el-button-->
+        <!--v-for="item in areaList"-->
+        <!--:key="item.id"-->
+        <!--round-->
+        <!--@click="areaChange(item.id)"-->
+        <!--size="mini">{{item.name}}</el-button>-->
+    <!--</div>-->
   </div>
 </template>
 
@@ -25,6 +25,18 @@
 import { getDoorAreaTree } from '@/api/system/area'
 export default {
   name: 'WaterCountByDepy',
+  props:{
+    query: {
+      type: Object,
+      default:()=>{
+        return {
+          areaId: '',
+          startTime: '',
+          endTime: ''
+        }
+      }
+    }
+  },
   data() {
     return {
       listQuery: {
@@ -69,7 +81,12 @@
   },
   mounted() {
     // TODO:待调试真接口
-    this.fetchArea()
+    // this.fetchArea()
+  },
+  watch:{
+    query(val){
+      this.fetchData()
+    }
   },
   methods: {
     fetchArea() {
@@ -104,8 +121,7 @@
       //   { 'areaName': '码头作业区', 'count': 78 },
       //   { 'areaName': '车间生产区', 'count': 78 }
       // ]
-      this.listQuery.areaId = this.areaId
-      countBySecondArea(this.listQuery).then(response => {
+      countBySecondArea(this.query).then(response => {
         this.chartData.rows = response.data
       })
     },
diff --git a/src/views/dashboard/components/waterNote.vue b/src/views/dashboard/components/waterNote.vue
new file mode 100644
index 0000000..aa0f448
--- /dev/null
+++ b/src/views/dashboard/components/waterNote.vue
@@ -0,0 +1,152 @@
+<!--suppress ALL -->
+<template>
+  <div class="container">
+    <div>
+      用水事记
+    </div>
+
+  </div>
+</template>
+
+<script>
+import { countBySecondArea } from '@/api/overview'
+import { getDoorAreaTree } from '@/api/system/area'
+export default {
+  name: 'WaterNote',
+  props:{
+    query: {
+      type: Object,
+      default:()=>{
+        return {
+          areaId: '',
+          startTime: '',
+          endTime: ''
+        }
+      }
+    }
+  },
+  data() {
+    return {
+      listQuery: {
+        areaId: '',
+        startTime: '',
+        endTime: ''
+      },
+      areaId:'',
+      areaList: [],
+      chartData: {
+        columns: ['areaName', 'count'],
+        rows: []
+      },
+      extend: {
+        grid: {
+          right: '30%'
+        },
+        legend: {
+          type: 'scroll',
+          top: '60px',
+          right: '0px',
+          orient: 'vertical'
+        },
+        series: {
+          label: { show: true, position: 'outside', formatter: '{b}' },
+          right: 120
+        },
+        tooltip: { trigger: 'item', formatter: '{b}<br/>用水量：{c}吨<br/>占比：{d}%' }
+      },
+      title: {
+        text: '分区用水占比图'
+      },
+      chartSettings: {
+        labelMap: {
+          'areaName': '分区',
+          'count': '用水量'
+        },
+        dimension: 'areaName',
+        metrics: 'count'
+      }
+    }
+  },
+  mounted() {
+    // TODO:待调试真接口
+    // this.fetchArea()
+  },
+  watch:{
+    query(val){
+      this.fetchData()
+    }
+  },
+  methods: {
+    fetchArea() {
+      getDoorAreaTree().then(response => {
+        if (response.code === 200) {
+          this.areaList = response.data.filter(item => {
+            return item.pid === '1'
+          }).map(function(item) {
+            return {
+              id: item.id, name: item.name
+            }
+          })
+          if (this.areaList.length !== 0) { this.areaChange(this.areaList[0].id) }
+        }
+      })
+    },
+    areaChange(val){
+      this.areaId = val
+      this.fetchData()
+    },
+    // 获取统计数据
+    fetchData() {
+      // this.chartData.rows = [
+      //   { 'areaName': '科技楼及食堂', 'count': 53 },
+      //   { 'areaName': 'A\\B\\C\\D\\E座', 'count': 78 },
+      //   { 'areaName': '厂区', 'count': 78 },
+      //   { 'areaName': '分段分区', 'count': 78 },
+      //   { 'areaName': '船坞分区', 'count': 78 },
+      //   { 'areaName': '刀把码头', 'count': 78 },
+      //   { 'areaName': '制管作业区', 'count': 78 },
+      //   { 'areaName': '滑道作业区', 'count': 78 },
+      //   { 'areaName': '码头作业区', 'count': 78 },
+      //   { 'areaName': '车间生产区', 'count': 78 }
+      // ]
+      countBySecondArea(this.query).then(response => {
+        this.chartData.rows = response.data
+      })
+    },
+    changeTime(timeType) {
+      let startTime
+      switch (timeType) {
+        case 'year':
+          startTime = getDayTime(new Date().getTime() - 24 * 365 * 60 * 60 * 1000)
+          this.listQuery.startTime = startTime.Format('yyyy-MM-dd')
+          break
+        case 'halfyear':
+          startTime = getDayTime(new Date().getTime() - 24 * 182 * 60 * 60 * 1000)
+          this.listQuery.startTime = startTime.Format('yyyy-MM-dd')
+          break
+        case '3month':
+          startTime = getDayTime(new Date().getTime() - 24 * 90 * 60 * 60 * 1000)
+          this.listQuery.startTime = startTime.Format('yyyy-MM-dd')
+          break
+        case 'month':
+          startTime = getDayTime(new Date().getTime() - 24 * 30 * 60 * 60 * 1000)
+          this.listQuery.startTime = startTime.Format('yyyy-MM-dd')
+          break
+        case 'week':
+          startTime = getDayTime(new Date().getTime() - 24 * 7 * 60 * 60 * 1000)
+          this.listQuery.startTime = startTime.Format('yyyy-MM-dd')
+          break
+      }
+      const endTime = new Date()
+      this.listQuery.endTime = endTime.Format('yyyy-MM-dd')
+      this.fetchData()
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+  .container{
+    position:relative;
+    height: 455px;
+  }
+</style>
diff --git a/src/views/dashboard/index.vue b/src/views/dashboard/index.vue
index fdbc38a..831dbc3 100644
--- a/src/views/dashboard/index.vue
+++ b/src/views/dashboard/index.vue
@@ -1,31 +1,33 @@
 <template>
   <div class="dashboard-container" style="background-color: white">
     <panel-group ref="panelgroup"/>
-    <el-row :gutter="10">
+    <el-row>
       <!-- 用水统计图 -->
+      <el-col :span="18">
+        <el-card shadow="never">
+          <water-count-by-area-bar @change="changeWaterQuery"/>
+        </el-card>
+      </el-col>
+      <el-col :span="6">
+        <el-card shadow="never">
+          <water-note/>
+        </el-card>
+      </el-col>
+    </el-row>
+    <el-row>
+      <!-- 分区用水占比图 -->
       <el-col :span="12">
         <el-card shadow="never">
-          <water-count-by-dept-bar/>
+          <water-count-by-dept :query="listQuery1" ref="waterCountPie"/>
         </el-card>
       </el-col>
       <!-- 用水走势图 -->
       <el-col :span="12">
         <el-card shadow="never">
-          <water-count-by-day/>
+          <water-count-by-day :query="listQuery1" ref="waterCountDay"/>
         </el-card>
       </el-col>
-      <!-- 分区用水统计图 -->
-      <el-col :span="12">
-        <el-card shadow="never">
-          <water-count-by-area-bar/>
-        </el-card>
-      </el-col>
-      <!-- 分区用水占比图 -->
-      <el-col :span="12">
-        <el-card shadow="never">
-          <water-count-by-depy/>
-        </el-card>
-      </el-col>
+
       <!--水表报警次数统计-->
       <el-col v-if="hasPerm('/statics/alarmsByDay')" :span="12">
         <el-card shadow="never">
@@ -64,20 +66,22 @@
 import DeviceCountByOnline from './components/DeviceCountByOnline'
 import AlarmByDays from './components/AlarmByDays'
 import JobByStatus from './components/JobByStatus'
-import WaterCountByDepy from './components/waterCountByDept'
+import WaterCountByDept from './components/waterCountByDept'
 import WaterCountByDeptBar from './components/waterCountByDeptBar'
 import WaterCountByDay from './components/waterCountByDay'
 import WaterCountByAreaBar from "./components/waterCountByAreaBar";
 import WatchAlarmBar from "./components/watchAlarmBar";
+import WaterNote from "./components/waterNote";
 
 export default {
   name: 'Dashboard',
   components: {
+    WaterNote,
     WatchAlarmBar,
     WaterCountByAreaBar,
     WaterCountByDay,
     WaterCountByDeptBar,
-    WaterCountByDepy,
+    WaterCountByDept,
     JobByStatus,
     AlarmByDays,
     PanelGroup,
@@ -108,12 +112,25 @@
       state.needRefresh = needRefresh
     }
   },
+  data(){
+    return {
+      listQuery1:{
+        areaId:'110000',
+        startTime:new Date().Format('yyyy-MM-dd'),
+        endTime:new Date().Format('yyyy-MM-dd')
+      },// 分区用水量查询条件
+      listQuery2:{
+        areaId:'',
+        startTime:'',
+        endTime:''
+      } // 分区报警查询条件
+    }
+  },
   watch: {
     needRefresh(val) {
       // 需要刷新
       if (val) {
         console.log('refresh dashboard')
-        debugger
         this.$refs.panelgroup.refresh()
       }
     }
@@ -124,6 +141,10 @@
   methods: {
     webSocket() {
       this.$store.dispatch('initWebSocket')
+    },
+    // 切换分区查询条件
+    changeWaterQuery(listQuery1){
+      this.listQuery1 = listQuery1
     }
   }
 }
diff --git a/src/views/dashboard/index_bak.vue b/src/views/dashboard/index_bak.vue
new file mode 100644
index 0000000..fdbc38a
--- /dev/null
+++ b/src/views/dashboard/index_bak.vue
@@ -0,0 +1,149 @@
+<template>
+  <div class="dashboard-container" style="background-color: white">
+    <panel-group ref="panelgroup"/>
+    <el-row :gutter="10">
+      <!-- 用水统计图 -->
+      <el-col :span="12">
+        <el-card shadow="never">
+          <water-count-by-dept-bar/>
+        </el-card>
+      </el-col>
+      <!-- 用水走势图 -->
+      <el-col :span="12">
+        <el-card shadow="never">
+          <water-count-by-day/>
+        </el-card>
+      </el-col>
+      <!-- 分区用水统计图 -->
+      <el-col :span="12">
+        <el-card shadow="never">
+          <water-count-by-area-bar/>
+        </el-card>
+      </el-col>
+      <!-- 分区用水占比图 -->
+      <el-col :span="12">
+        <el-card shadow="never">
+          <water-count-by-depy/>
+        </el-card>
+      </el-col>
+      <!--水表报警次数统计-->
+      <el-col v-if="hasPerm('/statics/alarmsByDay')" :span="12">
+        <el-card shadow="never">
+          <watch-alarm-bar/>
+        </el-card>
+      </el-col>
+      <!--报警次数统计-->
+      <el-col v-if="hasPerm('/statics/alarmsByDay')" :span="12">
+        <el-card shadow="never">
+          <alarm-by-days/>
+        </el-card>
+      </el-col>
+      <!--设备在线数量统计-->
+      <el-col v-if="hasPerm('/statics/deviceStaticsByType')" :span="12">
+        <el-card shadow="never">
+          <device-count-by-online/>
+        </el-card>
+      </el-col>
+
+      <!--设备数量统计-->
+      <el-col v-if="hasPerm('/statics/deviceStaticsByType')" :span="12">
+        <el-card shadow="never">
+          <device-count/>
+        </el-card>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+import PanelGroup from './components/PanelGroup'
+import WellCountByBfzt from './components/WellCountByBfzt'
+import WellCountByType from './components/WellCountByType'
+import DeviceCount from './components/DeviceCount'
+import DeviceCountByOnline from './components/DeviceCountByOnline'
+import AlarmByDays from './components/AlarmByDays'
+import JobByStatus from './components/JobByStatus'
+import WaterCountByDepy from './components/waterCountByDept'
+import WaterCountByDeptBar from './components/waterCountByDeptBar'
+import WaterCountByDay from './components/waterCountByDay'
+import WaterCountByAreaBar from "./components/waterCountByAreaBar";
+import WatchAlarmBar from "./components/watchAlarmBar";
+
+export default {
+  name: 'Dashboard',
+  components: {
+    WatchAlarmBar,
+    WaterCountByAreaBar,
+    WaterCountByDay,
+    WaterCountByDeptBar,
+    WaterCountByDepy,
+    JobByStatus,
+    AlarmByDays,
+    PanelGroup,
+    WellCountByBfzt,
+    WellCountByType,
+    DeviceCount,
+    DeviceCountByOnline
+  },
+  computed: {
+    ...mapGetters([
+      'name',
+      'roleNames',
+      'roleTips',
+      'wellTypes',
+      'deviceTypes',
+      'communications',
+      'area'
+    ])
+  },
+  mutations: {
+    SET_WEBSOCKET: (state, websocket) => {
+      state.websocket = websocket
+    },
+    SET_WS_STATUS: (state, wsStatus) => {
+      state.wsStatus = wsStatus
+    },
+    SET_NEED_REFRESH: (state, needRefresh) => {
+      state.needRefresh = needRefresh
+    }
+  },
+  watch: {
+    needRefresh(val) {
+      // 需要刷新
+      if (val) {
+        console.log('refresh dashboard')
+        debugger
+        this.$refs.panelgroup.refresh()
+      }
+    }
+  },
+  mounted() {
+    // this.webSocket()
+  },
+  methods: {
+    webSocket() {
+      this.$store.dispatch('initWebSocket')
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.dashboard-container{
+  .el-row{
+    .el-col{
+      margin-bottom: 10px;
+    }
+  }
+}
+.dashboard {
+  &-container {
+    padding: 10px 20px;
+  }
+  &-text {
+    font-size: 30px;
+    line-height: 46px;
+  }
+}
+</style>
diff --git a/src/views/layout/Layout.vue b/src/views/layout/Layout.vue
deleted file mode 100644
index 7c3d46d..0000000
--- a/src/views/layout/Layout.vue
+++ /dev/null
@@ -1,111 +0,0 @@
-<template>
-  <el-container :class="classObj" class="app-wrapper">
-    <div v-if="device==='mobile'&&sidebar.opened" class="drawer-bg" @click="handleClickOutside"/>
-    <app-header class="app-header"/>
-    <el-main class="app-body">
-      <!--侧边栏-->
-      <sidebar class="sidebar-container"/>
-      <!--右半部分-->
-      <div :class="{hasTagsView:needTagsView}" class="main-container">
-        <!--开启固定头部设置-->
-        <div v-if="fixedHeader">
-          <!--导航(面包屑)-->
-          <navbar/>
-          <!--标签栏-->
-          <tags-view v-if="needTagsView" />
-          <!--主内容包裹在el-scrollbar中-->
-          <el-scrollbar class="no-head-scrollbar">
-            <app-main/>
-          </el-scrollbar>
-        </div>
-        <!--为开始固定头部设置-->
-        <div v-else>
-          <!--导航，tagsView都包裹在el-scrollbar中-->
-          <el-scrollbar class="has-head-scrollbar">
-            <navbar/>
-            <tags-view v-if="needTagsView" />
-            <app-main/>
-          </el-scrollbar>
-        </div>
-        <!--悬浮框-->
-        <right-panel v-if="false">
-          <settings />
-        </right-panel>
-      </div>
-    </el-main>
-  </el-container>
-</template>
-
-<script>
-import RightPanel from '@/components/RightPanel'
-import { AppHeader, Navbar, Sidebar, AppMain } from './components'
-import ResizeMixin from './mixin/ResizeHandler'
-import TagsView from './components/TagsView/index'
-import { mapState } from 'vuex'
-import Settings from './components/Settings/index'
-
-export default {
-  name: 'Layout',
-  components: {
-    Settings,
-    TagsView,
-    AppHeader,
-    Navbar,
-    Sidebar,
-    AppMain,
-    RightPanel
-  },
-  mixins: [ResizeMixin],
-  computed: {
-    ...mapState({
-      sidebar: state => state.app.sidebar,
-      device: state => state.app.device,
-      showSettings: state => state.settings.showSettings,
-      needTagsView: state => state.settings.tagsView,
-      fixedHeader: state => state.settings.fixedHeader
-    }),
-    classObj() {
-      return {
-        hideSidebar: !this.sidebar.opened,
-        openSidebar: this.sidebar.opened,
-        withoutAnimation: this.sidebar.withoutAnimation,
-        mobile: this.device === 'mobile'
-      }
-    }
-  },
-  methods: {
-    handleClickOutside() {
-      this.$store.dispatch('CloseSideBar', { withoutAnimation: false })
-    }
-  }
-}
-</script>
-
-<style rel="stylesheet/scss" lang="scss" scoped>
-  @import "src/styles/mixin.scss";
-  .app-wrapper {
-    @include clearfix;
-    position: relative;
-    height: 100%;
-    width: 100%;
-    &.mobile.openSidebar{
-      position: fixed;
-      top: 0;
-    }
-  }
-  .drawer-bg {
-    background: #000;
-    opacity: 0.3;
-    width: 100%;
-    top: 0;
-    height: 100%;
-    position: absolute;
-    z-index: 999;
-  }
-  /*.el-scrollbar{*/
-    /*height: calc(100vh - 50px);*/
-  /*}*/
-  .has-head-scrollbar{
-    height: 100vh;
-  }
-</style>
diff --git a/src/views/layout/components/AppHeader.vue b/src/views/layout/components/AppHeader.vue
deleted file mode 100644
index 8d8912e..0000000
--- a/src/views/layout/components/AppHeader.vue
+++ /dev/null
@@ -1,151 +0,0 @@
-<template>
-  <el-header class="app-header">
-    <h3>{{ title }}</h3>
-    <!--子系统选项-->
-    <el-dropdown v-if="showChangeSys" class="systemSelect" size="medium" @command="handleCommand">
-      <span class="el-dropdown-link">{{ currentSystem.name }}<i class="el-icon-arrow-down el-icon--right"/>
-      </span>
-      <el-dropdown-menu slot="dropdown">
-        <el-dropdown-item v-for="system in systems" :command="system" :key="system.id">{{ system.name }}</el-dropdown-item>
-      </el-dropdown-menu>
-    </el-dropdown>
-    <el-dropdown class="dropdown-container" trigger="click">
-      <div class="dropdown-wrapper">
-        <span style="line-height:50px;">欢迎您，{{ name }}</span>
-        <!--<img :src="avatar+'?imageView2/1/w/80/h/80'" class="user-avatar">-->
-        <i class="el-icon-arrow-down"/>
-      </div>
-      <el-dropdown-menu slot="dropdown" class="user-dropdown">
-        <el-dropdown-item v-if="!baseConfig.singleSys">
-          <span style="display:block;" @click="backToIndex">回首页</span>
-        </el-dropdown-item>
-        <el-dropdown-item :divided="!baseConfig.singleSys">
-          <span style="display:block;" @click="resetPwd">修改密码</span>
-        </el-dropdown-item>
-        <el-dropdown-item divided>
-          <span style="display:block;" @click="logout">注销</span>
-        </el-dropdown-item>
-      </el-dropdown-menu>
-    </el-dropdown>
-    <reset-pwd v-show="showSetPwd" ref="retPwd"/>
-  </el-header>
-</template>
-
-<script>
-import { mapGetters } from 'vuex'
-import ResetPwd from '@/views/system/user/resetPwd'
-
-export default {
-  name: 'AppHeader',
-  components: { ResetPwd },
-  data() {
-    return {
-      title: this.baseConfig.title, // 标题
-      showChangeSys: !this.baseConfig.singleSys, // 是否显示切换系统菜单
-      name: this.$store.getters.name, // 用户姓名
-      showSetPwd: false // 是否显示修改密码按钮
-    }
-  },
-  computed: {
-    ...mapGetters([
-      'sidebar',
-      'avatar',
-      'currentSystem',
-      'systems'
-    ])
-  },
-  created() {
-    if (!this.baseConfig.singleSys) {
-      this.getSystems()
-    }
-  },
-  methods: {
-    toggleSideBar() {
-      this.$store.dispatch('ToggleSideBar')
-    },
-    logout() {
-      this.$store.dispatch('LogOut').then(() => {
-        location.reload() // 为了重新实例化vue-router对象 避免bug
-      })
-    },
-    resetPwd() {
-      this.showSetPwd = true
-      this.$refs.retPwd.initDialog(true)
-    },
-    backToIndex() {
-      const url = this.baseConfig.mainPage
-      window.location.href = url
-    },
-    // 切换子系统
-    handleCommand(command) {
-      console.log('切换子系统:' + command.name)
-      const params1 = `?token=${this.$store.getters.token}`
-      const params = `?sys=${command.name}&url=${command.url}&code=${command.code}&token=${this.$store.getters.token}`
-      // 判断系统是不是http的，如果是则打开新窗口
-      if (command.url.indexOf('http') > -1) {
-      // 取token
-        if (this.baseConfig.sameWindow) {
-          window.location.href = command.url + params1
-        } else {
-          window.open(command.url + params1, '_blank')
-        }
-      } else {
-      // 取token
-        if (this.baseConfig.sameWindow) {
-          window.location.href = this.baseConfig.mainPage + command.url + params
-        } else {
-          window.open(this.baseConfig.mainPage + command.url + params, '_blank')
-        }
-      }
-    },
-    // 获取子系统
-    getSystems() {
-      this.$store.dispatch('GetSystems').then(() => {
-        console.log('获取子系统列表成功-appHeader')
-      })
-    }
-  }
-}
-</script>
-
-<style rel="stylesheet/scss" lang="scss" scoped>
-  h3{
-    margin-left:24px;
-    display: inline-block;
-    float:left;
-  }
-  .dropdown-container {
-    /*height: 50px;*/
-    display: inline-block;
-    float: right;
-    z-index:500;
-    position: fixed;
-    top:0px;
-    right: 35px;
-    .dropdown-wrapper {
-      cursor: pointer;
-      margin-top: 5px;
-      position: relative;
-      line-height: initial;
-      .user-avatar {
-        width: 40px;
-        height: 40px;
-        border-radius: 10px;
-      }
-      .el-icon-caret-bottom {
-        font-size: 12px;
-      }
-    }
-  }
-  .systemSelect{
-    height: 56px;
-    display: inline-block;
-    float: left;
-    z-index:500;
-    position: fixed;
-    margin-left:60px;
-    top:5px;
-    color:#fff;
-    line-height: 56px;
-  }
-</style>

diff --git a/src/api/dashboard.js b/src/api/dashboard.js
index e69de29..0a4ddfc 100644
--- a/src/api/dashboard.js
+++ b/src/api/dashboard.js
@@ -0,0 +1,73 @@
+/**
+ * 井总览模块接口
+ */
+import request from '@/utils/request'
+
+// 用水量、噪声统计数据
+export function getWatchStatistic() {
+  return request({
+    url: 'waterStatistic/overview',
+    method: 'get'
+  })
+}
+// 水表数量
+export function waterMeterCount() {
+  return request({
+    url: 'waterMeterData/count',
+    method: 'get'
+  })
+}
+// 阀门数量
+export function valveCount() {
+  return request({
+    url: 'waterMeterData/count',
+    method: 'get'
+  })
+}
+
+// 查询一级分区各区用水量
+export function countByFirstArea(params) {
+  return request({
+    url: 'waterStatistic/countByFirstArea',
+    method: 'get',
+    params
+  })
+}
+
+// 查询一级分区7日用水量
+export function countByDayFirst(params) {
+  return request({
+    url: 'waterStatistic/countByDayFirst',
+    method: 'get',
+    params
+  })
+}
+
+// 查询二级分区各区用水量
+export function countBySecondArea(params) {
+  return request({
+    url: 'waterStatistic/countBySecondArea',
+    method: 'get',
+    params
+  })
+}
+
+// 查询二级分区水表告警
+export function alarmBySecondArea(params) {
+  return request({
+    url: 'waterStatistic/alarmBySecondArea',
+    method: 'get',
+    params
+  })
+}
+
+// 设备7日报警趋势
+export function alarmCountByDay(params) {
+  return request({
+    url: 'waterStatistic/alarmCountByDay',
+    method: 'get',
+    params
+  })
+}
+
+
diff --git a/src/components/BigData/Card/index.vue b/src/components/BigData/Card/index.vue
index d71e609..45359c9 100644
--- a/src/components/BigData/Card/index.vue
+++ b/src/components/BigData/Card/index.vue
@@ -10,6 +10,7 @@
         </div>
         <div class="card-panel-num" >
           {{ context }}
+          <span style="font-size: 10px;color:#888">{{unit}}</span>
         </div>
       </div>
     </div>
@@ -39,6 +40,10 @@
     color: {
       type: String,
       default: '#40c9c6'
+    },
+    unit:{
+      type: String,
+      default:''
     }
   },
   computed: {
diff --git a/src/components/BigData/Card1/index.vue b/src/components/BigData/Card1/index.vue
index 030b2dc..aa46454 100644
--- a/src/components/BigData/Card1/index.vue
+++ b/src/components/BigData/Card1/index.vue
@@ -1,10 +1,11 @@
 <template>
   <el-card :body-style="{ padding: '0px' }" shadow="always">
-    <div class="card-panel" >
-      <div :style="backgroundColor" class="card-panel-icon-wrapper">
-        <svg-icon :icon-class="icon" class-name="card-panel-icon" />
+    <div class="card-panel">
+      <div v-if="icon" :style="backgroundColor" class="card-panel-icon-wrapper">
+        <svg-icon :icon-class="icon" class-name="card-panel-icon"/>
       </div>
-      <div  class="card-panel-description">
+      <div v-else style="float:left; width: 20px;height: 100%;"></div>
+      <div class="card-panel-description">
         <!-- <div class="card-panel-text">
           {{ title[0] }} <span class="card-panel-num">{{ context[0] }}</span>
         </div>
@@ -13,18 +14,20 @@
         </div> -->
         <div class="two" v-if="title.length===2">
           <div class="card-panel-text">
-            {{ title[0] }} <span class="card-panel-num">{{ context[0] }}</span>
+            {{ title[0] }} <span class="card-panel-num">{{ context[0] }}<span
+            style="font-size: 10px;color:#888;margin-left: 5px">{{unit}}</span></span>
           </div>
-          <div class="card-panel-text" >
-            {{ title[1] }} <span class="card-panel-num">{{ context[1] }}</span>
+          <div class="card-panel-text">
+            {{ title[1] }} <span class="card-panel-num">{{ context[1] }}<span
+            style="font-size: 10px;color:#888;margin-left: 5px">{{unit}}</span></span>
           </div>
         </div>
         <div class="only" v-else>
           <div class="card-panel-text">
             {{ title[0] }}
           </div>
-          <div class="card-panel-num" >
-            {{ context[0] }}
+          <div class="card-panel-num">
+            {{ context[0] }}<span style="font-size: 10px;color:#888">{{unit}}</span>
           </div>
         </div>
       </div>
@@ -33,42 +36,46 @@
 </template>
 
 <script>
-export default {
-  name: 'Card1',
-  props: {
-    title: {
-      type: Array,
-      default: function() {
-        return ['标题', '标题']
+  export default {
+    name: 'Card1',
+    props: {
+      title: {
+        type: Array,
+        default: function () {
+          return ['标题', '标题']
+        }
+      },
+      subtitle: {
+        type: String,
+        default: ''
+      },
+      icon: {
+        type: String,
+        default: ''
+      },
+      context: {
+        type: Array,
+        default: function () {
+          return ['--', '--']
+        }
+      },
+      color: {
+        type: String,
+        default: '#40c9c6'
+      },
+      unit: {
+        type: String,
+        default: ''
       }
     },
-    subtitle: {
-      type: String,
-      default: ''
-    },
-    icon: {
-      type: String,
-      default: ''
-    },
-    context: {
-      type: Array,
-      default: function() {
-        return ['--', '--']
-      }
-    },
-    color: {
-      type: String,
-      default: '#40c9c6'
-    }
-  },
-  computed: {
-    backgroundColor() {
-      return {
-        color: this.color
+    computed: {
+      backgroundColor() {
+        return {
+          color: this.color
+        }
       }
     }
   }
-}
 </script>
 
 <style lang="scss" scoped>
@@ -108,7 +115,7 @@
       overflow: auto;
       margin-left: 5px;
 
-      .two{
+      .two {
         .card-panel-text {
           line-height: 18px;
           color: rgba(0, 0, 0, 0.45);
@@ -123,7 +130,7 @@
           float: right;
         }
       }
-      .only{
+      .only {
         .card-panel-text {
           line-height: 18px;
           color: rgba(0, 0, 0, 0.45);
diff --git a/src/icons/svg/icon-noise.svg b/src/icons/svg/icon-noise.svg
new file mode 100644
index 0000000..00bef71
--- /dev/null
+++ b/src/icons/svg/icon-noise.svg
@@ -0,0 +1,2 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1648634383080" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2093" xmlns:xlink="http://www.w3.org/1999/xlink" width="128" height="128"><defs><style type="text/css">@font-face { font-family: feedback-iconfont; src: url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.woff2?t=1630033759944") format("woff2"), url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.woff?t=1630033759944") format("woff"), url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.ttf?t=1630033759944") format("truetype"); }
+</style></defs><path d="M875.039 549.868c-25.436 0-47.411 13.91-59.3 34.4h-125.9l-99.564-199.177-76.703 281.23-51.528-566.757-67.461-5.735-130.8 490.44H49.397v68.802h267.259l94.464-354.268 51.235 563.733 67.451 5.913 79.432-291.445 38.077 76.057h168.428c11.91 20.419 33.864 34.391 59.3 34.391 37.98 0 68.792-30.879 68.792-68.797-0.005-38.062-30.817-68.787-68.797-68.787z" p-id="2094"></path></svg>
\ No newline at end of file
diff --git a/src/icons/svg/icon-valve.svg b/src/icons/svg/icon-valve.svg
new file mode 100644
index 0000000..f5d96e2
--- /dev/null
+++ b/src/icons/svg/icon-valve.svg
@@ -0,0 +1,2 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1648634707805" class="icon" viewBox="0 0 1090 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3809" xmlns:xlink="http://www.w3.org/1999/xlink" width="136.25" height="128"><defs><style type="text/css">@font-face { font-family: feedback-iconfont; src: url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.woff2?t=1630033759944") format("woff2"), url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.woff?t=1630033759944") format("woff"), url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.ttf?t=1630033759944") format("truetype"); }
+</style></defs><path d="M502.944 296.975V143.052h-231.98c-31.587 0-57.321-24.93-57.321-55.526 0-30.598 25.75-55.526 57.321-55.526H833.06c31.571 0 57.306 24.93 57.306 55.525 0 30.922-25.735 55.526-57.29 55.526h-231.64v153.924h18.179c21.615 0 39.112 16.955 39.112 37.904v90.565l-213.105-0.34v-90.225c0-20.95 17.497-37.904 39.128-37.904h18.194z m-381.74 590.293v63.84c0 9.306-7.834 16.955-17.698 16.955H58.231c-9.862-0.001-17.698-7.65-17.698-17.296V542.472c0-9.63 7.835-17.28 17.698-17.28h45.274c9.863 0 17.698 7.65 17.698 17.28v83.133h150.55c6.272-85.518 79.247-152.95 168.387-152.95h207.98c89.14 0 162.116 67.432 168.403 152.95h150.873v-83.798c0-9.29 7.495-16.615 17.033-16.615h46.297c9.523 0 17.001 7.308 17.001 16.615v409.625c0.341 9.321-7.478 16.63-17.016 16.63h-46.297c-9.523 0-17.018-7.309-17.018-16.63v-64.165H805.36C780.755 948.583 719.655 992 648.119 992H440.142c-71.52 0-132.635-43.402-157.239-104.733H121.204z" p-id="3810"></path></svg>
\ No newline at end of file
diff --git a/src/views/dashboard/components/PanelGroup.vue b/src/views/dashboard/components/PanelGroup.vue
index b72d289..332cbf9 100644
--- a/src/views/dashboard/components/PanelGroup.vue
+++ b/src/views/dashboard/components/PanelGroup.vue
@@ -1,12 +1,12 @@
 <template>
   <el-row class="panel-group">
     <div v-for="card in dataGroup1" :key="card.index" class="card-panel-col">
-      <card1 :title="card.title" :context="card.context" :icon="card.icon" :color="card.color"/>
+      <card1 :title="card.title" :context="card.context" :icon="card.icon" :color="card.color" :unit="card.unit"/>
     </div>
 
     <div v-for="card in dataGroup" :key="card.title" class="card-panel-col">
       <div v-if="hasPerm(card.permission)">
-        <card :title="card.title" :context="card.context" :icon="card.icon" :color="card.color" @click.native="goPage(card.path)"/>
+        <card :title="card.title" :context="card.context" :icon="card.icon" :unit="card.unit" :color="card.color" @click.native="goPage(card.path)"/>
       </div>
     </div>
   </el-row>
@@ -16,7 +16,7 @@
 import Card1 from '@/components/BigData/Card1'
 import Card from '@/components/BigData/Card'
 // 首页
-import { getWatchStatistic , waterMeterCount } from '@/api/overview'
+import { getWatchStatistic , waterMeterCount, valveCount } from '@/api/dashboard'
 // 根据布防数量统计井数量
 import { wellCountByBfzt } from '@/api/well'
 // 当前报警数
@@ -36,30 +36,33 @@
           context: ['--', '--'],
           icon: 'icon-water',
           color: '#40c9c6',
+          unit: '吨',
           index: 0
         },
         {
-          title: ['今日用水量', '昨日用水量'],
+          title: ['今日用水量', '生产厂区用水量'],
           context: ['--', '--'],
-          icon: 'icon-water',
+          icon: '',
           color: '#36a3f7',
+          unit: '吨',
           index: 1
         },
         {
-          title: ['实时噪声'],
+          title: ['滑道实时噪声'],
           context: ['--'],
-          icon: 'icon-device',
+          icon: 'icon-noise',
           color: '#f1c353',
+          unit: 'db',
           index: 2
         }
       ],
       dataGroup: [
         {
-          title: '设备总数',
+          title: '阀门数量',
           context: '--',
-          icon: 'icon-device',
+          icon: 'icon-valve',
           color: '#40c9c6',
-          path: '/deviceList',
+          path: '/deviceList?deviceType=20',
           permission: '/device/list'
         },
         {
@@ -67,11 +70,11 @@
           context: '--',
           icon: 'icon-watch',
           color: '#9694f7',
-          path: '/deviceList',
+          path: '/deviceList?deviceType=13',
           permission: '/device/list'
         },
         {
-          title: '当前报警数',
+          title: '报警信息',
           context: '--',
           icon: 'icon-alarm',
           color: '#f4516c',
@@ -83,10 +86,10 @@
   },
   mounted() {
     this.getWater()
-    this.getWellCount()
+    // this.getWellCount()
     this.getDeviceCount()
     this.getAlarmCount()
-    this.getJobCount()
+    // this.getJobCount()
   },
   methods: {
     refresh() {
@@ -97,24 +100,31 @@
       this.$router.push(path)
     },
     getWater() {
+      // 用水量
       getWatchStatistic().then(response => {
-        this.dataGroup1[0].context = [response.data.total, response.data.month]
-        this.dataGroup1[1].context = [response.data.today, response.data.yesterday]
-        this.dataGroup1[2].context = [Number(response.data.sound).toFixed(2)]
+        this.dataGroup1[0].context = [response.data.total?parseFloat(response.data.total).toFixed(0):'--', response.data.month?parseFloat(response.data.month).toFixed(0):'--']
+        this.dataGroup1[1].context = [response.data.today?parseFloat(response.data.today).toFixed(0):'--', response.data.yesterday?parseFloat(response.data.yesterday).toFixed(0):'--']
+        this.dataGroup1[2].context = [response.data.sound?Number(response.data.sound).toFixed(2):'--']
       })
-      waterMeterCount().then(response => {
-        this.dataGroup[1].context = response.data
-      })
+
     },
-    getWellCount() {
-      wellCountByBfzt().then(response => {
-        this.dataGroup[0].context = response.data.total
-      })
-    },
+    // getWellCount() {
+    //   wellCountByBfzt().then(response => {
+    //     this.dataGroup[0].context = response.data.total
+    //   })
+    // },
     getDeviceCount() {
       // deviceStaticByStatus().then(response => {
       //   this.dataGroup[1].context = response.data.total
       // })
+      // 阀门数量
+      valveCount().then(response => {
+        this.dataGroup[0].context = response.data
+      })
+      // 水表数量
+      waterMeterCount().then(response => {
+        this.dataGroup[1].context = response.data
+      })
     },
     getAlarmCount() {
       alarmNowStatic().then(response => {
@@ -159,7 +169,7 @@
   //   &:hover {
   //     .card-panel-icon-wrapper {
   //       color: #fff;
-        
+
   //     }
 
   //     .icon-people {
diff --git a/src/views/dashboard/components/waterCountByAreaBar.vue b/src/views/dashboard/components/waterCountByAreaBar.vue
index 1bdac48..c488923 100644
--- a/src/views/dashboard/components/waterCountByAreaBar.vue
+++ b/src/views/dashboard/components/waterCountByAreaBar.vue
@@ -1,9 +1,10 @@
 <template>
   <div class="container">
     <div class="statistic-container">
+      <el-button round size="mini" @click="setDefaultTime('year')">本年</el-button>
+      <el-button round size="mini" @click="setDefaultTime('season')">本季</el-button>
       <el-button round size="mini" @click="setDefaultTime('month')">本月</el-button>
-      <el-button round size="mini" @click="setDefaultTime('week')">近7日</el-button>
-      <el-button round size="mini" @click="setDefaultTime('yesterday')">昨日</el-button>
+      <el-button round size="mini" @click="setDefaultTime('week')">本周</el-button>
       <el-button round size="mini" @click="setDefaultTime('today')">今日</el-button>
       <el-date-picker
         v-model="timeRange"
@@ -107,7 +108,7 @@
   },
   mounted() {
     this.setDefaultTime('today')
-    this.fetchArea()
+    // this.fetchArea()
   },
   methods: {
     fetchArea() {
@@ -130,10 +131,11 @@
     },
     fetchData() {
       const params = {
-        areaId: this.areaId,
+        areaId: '110000',
         startTime: this.timeRange[0],
         endTime: this.timeRange[1]
       }
+      this.$emit('change', params)
       countBySecondArea(params).then(response => {
         this.isShow = false
         this.chartData.rows = response.data
@@ -153,7 +155,21 @@
       })
     },
     setDefaultTime(val) {
-      if (val === 'month') {
+      if (val === 'year') {
+        var today = new Date()
+        var tYear = today.getFullYear()
+        const beginTime = tYear + '-01-01'
+        const endTime = getDayTime(new Date().getTime())
+        this.timeRange = [beginTime, endTime.Format('yyyy-MM-dd')]
+      }if (val === 'season') {
+        var today = new Date()
+        var tYear = today.getFullYear()
+        var tMonth = today.getMonth() + 1
+        const oldMonth = tMonth<4?'01':(tMonth<7?'04':(tMonth<10?'07':'10'))
+        const beginTime = tYear + '-' + oldMonth + '-01'
+        const endTime = getDayTime(new Date().getTime())
+        this.timeRange = [beginTime, endTime.Format('yyyy-MM-dd')]
+      }else if (val === 'month') {
         var today = new Date()
         var tYear = today.getFullYear()
         var tMonth = today.getMonth() + 1
@@ -164,7 +180,8 @@
         const endTime = getDayTime(new Date().getTime())
         this.timeRange = [beginTime, endTime.Format('yyyy-MM-dd')]
       } else if (val === 'week') {
-        this.timeRange = [getDayTime(new Date().getTime() - 24 * 6 * 60 * 60 * 1000).Format('yyyy-MM-dd'), getDayTime(new Date().getTime()).Format('yyyy-MM-dd')]
+        const nowDayOfWeek =  new Date().getDay()-1
+        this.timeRange = [getDayTime(new Date().getTime() - 24 * nowDayOfWeek * 60 * 60 * 1000).Format('yyyy-MM-dd'), getDayTime(new Date().getTime()).Format('yyyy-MM-dd')]
       } else if (val === 'yesterday') {
         this.timeRange = [getDayTime(new Date().getTime() - 24 * 60 * 60 * 1000).Format('yyyy-MM-dd'), getDayTime(new Date().getTime() - 24 * 60 * 60 * 1000).Format('yyyy-MM-dd')]
       } else if (val === 'today') {
diff --git a/src/views/dashboard/components/waterCountByDay.vue b/src/views/dashboard/components/waterCountByDay.vue
index 8e12f02..78d1f7c 100644
--- a/src/views/dashboard/components/waterCountByDay.vue
+++ b/src/views/dashboard/components/waterCountByDay.vue
@@ -1,12 +1,12 @@
 <template>
   <div class="container">
-    <div class="function">
-      <el-button round size="mini" @click="changeTime('year')">近1年</el-button>
-      <el-button round size="mini" @click="changeTime('halfyear')">近6月</el-button>
-      <el-button round size="mini" @click="changeTime('3month')">近3月</el-button>
-      <el-button round size="mini" @click="changeTime('month')">近1月</el-button>
-      <el-button round size="mini" @click="changeTime('week')">近1周</el-button>
-    </div>
+    <!--<div class="function">-->
+      <!--<el-button round size="mini" @click="changeTime('year')">近1年</el-button>-->
+      <!--<el-button round size="mini" @click="changeTime('halfyear')">近6月</el-button>-->
+      <!--<el-button round size="mini" @click="changeTime('3month')">近3月</el-button>-->
+      <!--<el-button round size="mini" @click="changeTime('month')">近1月</el-button>-->
+      <!--<el-button round size="mini" @click="changeTime('week')">近1周</el-button>-->
+    <!--</div>-->
     <ve-line :data="chartData" :title="title" :extend="extend" :settings="chartSettings"/>
   </div>
 </template>
@@ -17,6 +17,18 @@
 import { getDoorAreaTree } from '@/api/system/area'
 export default {
   name: 'WaterCountByDay',
+  props:{
+    query: {
+      type: Object,
+      default:()=>{
+        return {
+          areaId: '',
+          startTime: '',
+          endTime: ''
+        }
+      }
+    }
+  },
   data() {
     return {
       listQuery: {
@@ -52,8 +64,13 @@
     }
   },
   mounted() {
-    this.changeTime('month')
-    this.fetchArea()
+    // this.changeTime('month')
+    // this.fetchArea()
+  },
+  watch:{
+    query(val){
+      this.fetchData()
+    }
   },
   methods: {
     fetchArea() {
@@ -73,7 +90,7 @@
       })
     },
     fetchData() {
-      countByDayFirst(this.listQuery).then(response => {
+      countByDayFirst(this.query).then(response => {
         const arr = response.data.map(function(item) {
           for (let i = 0; i < item.data.length; i++) {
             item[item.data[i].areaName] = item.data[i].count
diff --git a/src/views/dashboard/components/waterCountByDept.vue b/src/views/dashboard/components/waterCountByDept.vue
index a0c82cf..02e27cd 100644
--- a/src/views/dashboard/components/waterCountByDept.vue
+++ b/src/views/dashboard/components/waterCountByDept.vue
@@ -1,22 +1,22 @@
 <!--suppress ALL -->
 <template>
   <div class="container">
-    <div class="function">
-      <el-button round size="mini" @click="changeTime('year')">近1年</el-button>
-      <el-button round size="mini" @click="changeTime('halfyear')">近6月</el-button>
-      <el-button round size="mini" @click="changeTime('3month')">近3月</el-button>
-      <el-button round size="mini" @click="changeTime('month')">近1月</el-button>
-      <el-button round size="mini" @click="changeTime('week')">近1周</el-button>
-    </div>
+    <!--<div class="function">-->
+      <!--<el-button round size="mini" @click="changeTime('year')">近1年</el-button>-->
+      <!--<el-button round size="mini" @click="changeTime('halfyear')">近6月</el-button>-->
+      <!--<el-button round size="mini" @click="changeTime('3month')">近3月</el-button>-->
+      <!--<el-button round size="mini" @click="changeTime('month')">近1月</el-button>-->
+      <!--<el-button round size="mini" @click="changeTime('week')">近1周</el-button>-->
+    <!--</div>-->
     <ve-pie :data="chartData" :extend="extend" :title="title"/>
-    <div class="function">
-      <el-button
-        v-for="item in areaList"
-        :key="item.id"
-        round
-        @click="areaChange(item.id)"
-        size="mini">{{item.name}}</el-button>
-    </div>
+    <!--<div class="function">-->
+      <!--<el-button-->
+        <!--v-for="item in areaList"-->
+        <!--:key="item.id"-->
+        <!--round-->
+        <!--@click="areaChange(item.id)"-->
+        <!--size="mini">{{item.name}}</el-button>-->
+    <!--</div>-->
   </div>
 </template>
 
@@ -25,6 +25,18 @@
 import { getDoorAreaTree } from '@/api/system/area'
 export default {
   name: 'WaterCountByDepy',
+  props:{
+    query: {
+      type: Object,
+      default:()=>{
+        return {
+          areaId: '',
+          startTime: '',
+          endTime: ''
+        }
+      }
+    }
+  },
   data() {
     return {
       listQuery: {
@@ -69,7 +81,12 @@
   },
   mounted() {
     // TODO:待调试真接口
-    this.fetchArea()
+    // this.fetchArea()
+  },
+  watch:{
+    query(val){
+      this.fetchData()
+    }
   },
   methods: {
     fetchArea() {
@@ -104,8 +121,7 @@
       //   { 'areaName': '码头作业区', 'count': 78 },
       //   { 'areaName': '车间生产区', 'count': 78 }
       // ]
-      this.listQuery.areaId = this.areaId
-      countBySecondArea(this.listQuery).then(response => {
+      countBySecondArea(this.query).then(response => {
         this.chartData.rows = response.data
       })
     },
diff --git a/src/views/dashboard/components/waterNote.vue b/src/views/dashboard/components/waterNote.vue
new file mode 100644
index 0000000..aa0f448
--- /dev/null
+++ b/src/views/dashboard/components/waterNote.vue
@@ -0,0 +1,152 @@
+<!--suppress ALL -->
+<template>
+  <div class="container">
+    <div>
+      用水事记
+    </div>
+
+  </div>
+</template>
+
+<script>
+import { countBySecondArea } from '@/api/overview'
+import { getDoorAreaTree } from '@/api/system/area'
+export default {
+  name: 'WaterNote',
+  props:{
+    query: {
+      type: Object,
+      default:()=>{
+        return {
+          areaId: '',
+          startTime: '',
+          endTime: ''
+        }
+      }
+    }
+  },
+  data() {
+    return {
+      listQuery: {
+        areaId: '',
+        startTime: '',
+        endTime: ''
+      },
+      areaId:'',
+      areaList: [],
+      chartData: {
+        columns: ['areaName', 'count'],
+        rows: []
+      },
+      extend: {
+        grid: {
+          right: '30%'
+        },
+        legend: {
+          type: 'scroll',
+          top: '60px',
+          right: '0px',
+          orient: 'vertical'
+        },
+        series: {
+          label: { show: true, position: 'outside', formatter: '{b}' },
+          right: 120
+        },
+        tooltip: { trigger: 'item', formatter: '{b}<br/>用水量：{c}吨<br/>占比：{d}%' }
+      },
+      title: {
+        text: '分区用水占比图'
+      },
+      chartSettings: {
+        labelMap: {
+          'areaName': '分区',
+          'count': '用水量'
+        },
+        dimension: 'areaName',
+        metrics: 'count'
+      }
+    }
+  },
+  mounted() {
+    // TODO:待调试真接口
+    // this.fetchArea()
+  },
+  watch:{
+    query(val){
+      this.fetchData()
+    }
+  },
+  methods: {
+    fetchArea() {
+      getDoorAreaTree().then(response => {
+        if (response.code === 200) {
+          this.areaList = response.data.filter(item => {
+            return item.pid === '1'
+          }).map(function(item) {
+            return {
+              id: item.id, name: item.name
+            }
+          })
+          if (this.areaList.length !== 0) { this.areaChange(this.areaList[0].id) }
+        }
+      })
+    },
+    areaChange(val){
+      this.areaId = val
+      this.fetchData()
+    },
+    // 获取统计数据
+    fetchData() {
+      // this.chartData.rows = [
+      //   { 'areaName': '科技楼及食堂', 'count': 53 },
+      //   { 'areaName': 'A\\B\\C\\D\\E座', 'count': 78 },
+      //   { 'areaName': '厂区', 'count': 78 },
+      //   { 'areaName': '分段分区', 'count': 78 },
+      //   { 'areaName': '船坞分区', 'count': 78 },
+      //   { 'areaName': '刀把码头', 'count': 78 },
+      //   { 'areaName': '制管作业区', 'count': 78 },
+      //   { 'areaName': '滑道作业区', 'count': 78 },
+      //   { 'areaName': '码头作业区', 'count': 78 },
+      //   { 'areaName': '车间生产区', 'count': 78 }
+      // ]
+      countBySecondArea(this.query).then(response => {
+        this.chartData.rows = response.data
+      })
+    },
+    changeTime(timeType) {
+      let startTime
+      switch (timeType) {
+        case 'year':
+          startTime = getDayTime(new Date().getTime() - 24 * 365 * 60 * 60 * 1000)
+          this.listQuery.startTime = startTime.Format('yyyy-MM-dd')
+          break
+        case 'halfyear':
+          startTime = getDayTime(new Date().getTime() - 24 * 182 * 60 * 60 * 1000)
+          this.listQuery.startTime = startTime.Format('yyyy-MM-dd')
+          break
+        case '3month':
+          startTime = getDayTime(new Date().getTime() - 24 * 90 * 60 * 60 * 1000)
+          this.listQuery.startTime = startTime.Format('yyyy-MM-dd')
+          break
+        case 'month':
+          startTime = getDayTime(new Date().getTime() - 24 * 30 * 60 * 60 * 1000)
+          this.listQuery.startTime = startTime.Format('yyyy-MM-dd')
+          break
+        case 'week':
+          startTime = getDayTime(new Date().getTime() - 24 * 7 * 60 * 60 * 1000)
+          this.listQuery.startTime = startTime.Format('yyyy-MM-dd')
+          break
+      }
+      const endTime = new Date()
+      this.listQuery.endTime = endTime.Format('yyyy-MM-dd')
+      this.fetchData()
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+  .container{
+    position:relative;
+    height: 455px;
+  }
+</style>
diff --git a/src/views/dashboard/index.vue b/src/views/dashboard/index.vue
index fdbc38a..831dbc3 100644
--- a/src/views/dashboard/index.vue
+++ b/src/views/dashboard/index.vue
@@ -1,31 +1,33 @@
 <template>
   <div class="dashboard-container" style="background-color: white">
     <panel-group ref="panelgroup"/>
-    <el-row :gutter="10">
+    <el-row>
       <!-- 用水统计图 -->
+      <el-col :span="18">
+        <el-card shadow="never">
+          <water-count-by-area-bar @change="changeWaterQuery"/>
+        </el-card>
+      </el-col>
+      <el-col :span="6">
+        <el-card shadow="never">
+          <water-note/>
+        </el-card>
+      </el-col>
+    </el-row>
+    <el-row>
+      <!-- 分区用水占比图 -->
       <el-col :span="12">
         <el-card shadow="never">
-          <water-count-by-dept-bar/>
+          <water-count-by-dept :query="listQuery1" ref="waterCountPie"/>
         </el-card>
       </el-col>
       <!-- 用水走势图 -->
       <el-col :span="12">
         <el-card shadow="never">
-          <water-count-by-day/>
+          <water-count-by-day :query="listQuery1" ref="waterCountDay"/>
         </el-card>
       </el-col>
-      <!-- 分区用水统计图 -->
-      <el-col :span="12">
-        <el-card shadow="never">
-          <water-count-by-area-bar/>
-        </el-card>
-      </el-col>
-      <!-- 分区用水占比图 -->
-      <el-col :span="12">
-        <el-card shadow="never">
-          <water-count-by-depy/>
-        </el-card>
-      </el-col>
+
       <!--水表报警次数统计-->
       <el-col v-if="hasPerm('/statics/alarmsByDay')" :span="12">
         <el-card shadow="never">
@@ -64,20 +66,22 @@
 import DeviceCountByOnline from './components/DeviceCountByOnline'
 import AlarmByDays from './components/AlarmByDays'
 import JobByStatus from './components/JobByStatus'
-import WaterCountByDepy from './components/waterCountByDept'
+import WaterCountByDept from './components/waterCountByDept'
 import WaterCountByDeptBar from './components/waterCountByDeptBar'
 import WaterCountByDay from './components/waterCountByDay'
 import WaterCountByAreaBar from "./components/waterCountByAreaBar";
 import WatchAlarmBar from "./components/watchAlarmBar";
+import WaterNote from "./components/waterNote";
 
 export default {
   name: 'Dashboard',
   components: {
+    WaterNote,
     WatchAlarmBar,
     WaterCountByAreaBar,
     WaterCountByDay,
     WaterCountByDeptBar,
-    WaterCountByDepy,
+    WaterCountByDept,
     JobByStatus,
     AlarmByDays,
     PanelGroup,
@@ -108,12 +112,25 @@
       state.needRefresh = needRefresh
     }
   },
+  data(){
+    return {
+      listQuery1:{
+        areaId:'110000',
+        startTime:new Date().Format('yyyy-MM-dd'),
+        endTime:new Date().Format('yyyy-MM-dd')
+      },// 分区用水量查询条件
+      listQuery2:{
+        areaId:'',
+        startTime:'',
+        endTime:''
+      } // 分区报警查询条件
+    }
+  },
   watch: {
     needRefresh(val) {
       // 需要刷新
       if (val) {
         console.log('refresh dashboard')
-        debugger
         this.$refs.panelgroup.refresh()
       }
     }
@@ -124,6 +141,10 @@
   methods: {
     webSocket() {
       this.$store.dispatch('initWebSocket')
+    },
+    // 切换分区查询条件
+    changeWaterQuery(listQuery1){
+      this.listQuery1 = listQuery1
     }
   }
 }
diff --git a/src/views/dashboard/index_bak.vue b/src/views/dashboard/index_bak.vue
new file mode 100644
index 0000000..fdbc38a
--- /dev/null
+++ b/src/views/dashboard/index_bak.vue
@@ -0,0 +1,149 @@
+<template>
+  <div class="dashboard-container" style="background-color: white">
+    <panel-group ref="panelgroup"/>
+    <el-row :gutter="10">
+      <!-- 用水统计图 -->
+      <el-col :span="12">
+        <el-card shadow="never">
+          <water-count-by-dept-bar/>
+        </el-card>
+      </el-col>
+      <!-- 用水走势图 -->
+      <el-col :span="12">
+        <el-card shadow="never">
+          <water-count-by-day/>
+        </el-card>
+      </el-col>
+      <!-- 分区用水统计图 -->
+      <el-col :span="12">
+        <el-card shadow="never">
+          <water-count-by-area-bar/>
+        </el-card>
+      </el-col>
+      <!-- 分区用水占比图 -->
+      <el-col :span="12">
+        <el-card shadow="never">
+          <water-count-by-depy/>
+        </el-card>
+      </el-col>
+      <!--水表报警次数统计-->
+      <el-col v-if="hasPerm('/statics/alarmsByDay')" :span="12">
+        <el-card shadow="never">
+          <watch-alarm-bar/>
+        </el-card>
+      </el-col>
+      <!--报警次数统计-->
+      <el-col v-if="hasPerm('/statics/alarmsByDay')" :span="12">
+        <el-card shadow="never">
+          <alarm-by-days/>
+        </el-card>
+      </el-col>
+      <!--设备在线数量统计-->
+      <el-col v-if="hasPerm('/statics/deviceStaticsByType')" :span="12">
+        <el-card shadow="never">
+          <device-count-by-online/>
+        </el-card>
+      </el-col>
+
+      <!--设备数量统计-->
+      <el-col v-if="hasPerm('/statics/deviceStaticsByType')" :span="12">
+        <el-card shadow="never">
+          <device-count/>
+        </el-card>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+import PanelGroup from './components/PanelGroup'
+import WellCountByBfzt from './components/WellCountByBfzt'
+import WellCountByType from './components/WellCountByType'
+import DeviceCount from './components/DeviceCount'
+import DeviceCountByOnline from './components/DeviceCountByOnline'
+import AlarmByDays from './components/AlarmByDays'
+import JobByStatus from './components/JobByStatus'
+import WaterCountByDepy from './components/waterCountByDept'
+import WaterCountByDeptBar from './components/waterCountByDeptBar'
+import WaterCountByDay from './components/waterCountByDay'
+import WaterCountByAreaBar from "./components/waterCountByAreaBar";
+import WatchAlarmBar from "./components/watchAlarmBar";
+
+export default {
+  name: 'Dashboard',
+  components: {
+    WatchAlarmBar,
+    WaterCountByAreaBar,
+    WaterCountByDay,
+    WaterCountByDeptBar,
+    WaterCountByDepy,
+    JobByStatus,
+    AlarmByDays,
+    PanelGroup,
+    WellCountByBfzt,
+    WellCountByType,
+    DeviceCount,
+    DeviceCountByOnline
+  },
+  computed: {
+    ...mapGetters([
+      'name',
+      'roleNames',
+      'roleTips',
+      'wellTypes',
+      'deviceTypes',
+      'communications',
+      'area'
+    ])
+  },
+  mutations: {
+    SET_WEBSOCKET: (state, websocket) => {
+      state.websocket = websocket
+    },
+    SET_WS_STATUS: (state, wsStatus) => {
+      state.wsStatus = wsStatus
+    },
+    SET_NEED_REFRESH: (state, needRefresh) => {
+      state.needRefresh = needRefresh
+    }
+  },
+  watch: {
+    needRefresh(val) {
+      // 需要刷新
+      if (val) {
+        console.log('refresh dashboard')
+        debugger
+        this.$refs.panelgroup.refresh()
+      }
+    }
+  },
+  mounted() {
+    // this.webSocket()
+  },
+  methods: {
+    webSocket() {
+      this.$store.dispatch('initWebSocket')
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.dashboard-container{
+  .el-row{
+    .el-col{
+      margin-bottom: 10px;
+    }
+  }
+}
+.dashboard {
+  &-container {
+    padding: 10px 20px;
+  }
+  &-text {
+    font-size: 30px;
+    line-height: 46px;
+  }
+}
+</style>
diff --git a/src/views/layout/Layout.vue b/src/views/layout/Layout.vue
deleted file mode 100644
index 7c3d46d..0000000
--- a/src/views/layout/Layout.vue
+++ /dev/null
@@ -1,111 +0,0 @@
-<template>
-  <el-container :class="classObj" class="app-wrapper">
-    <div v-if="device==='mobile'&&sidebar.opened" class="drawer-bg" @click="handleClickOutside"/>
-    <app-header class="app-header"/>
-    <el-main class="app-body">
-      <!--侧边栏-->
-      <sidebar class="sidebar-container"/>
-      <!--右半部分-->
-      <div :class="{hasTagsView:needTagsView}" class="main-container">
-        <!--开启固定头部设置-->
-        <div v-if="fixedHeader">
-          <!--导航(面包屑)-->
-          <navbar/>
-          <!--标签栏-->
-          <tags-view v-if="needTagsView" />
-          <!--主内容包裹在el-scrollbar中-->
-          <el-scrollbar class="no-head-scrollbar">
-            <app-main/>
-          </el-scrollbar>
-        </div>
-        <!--为开始固定头部设置-->
-        <div v-else>
-          <!--导航，tagsView都包裹在el-scrollbar中-->
-          <el-scrollbar class="has-head-scrollbar">
-            <navbar/>
-            <tags-view v-if="needTagsView" />
-            <app-main/>
-          </el-scrollbar>
-        </div>
-        <!--悬浮框-->
-        <right-panel v-if="false">
-          <settings />
-        </right-panel>
-      </div>
-    </el-main>
-  </el-container>
-</template>
-
-<script>
-import RightPanel from '@/components/RightPanel'
-import { AppHeader, Navbar, Sidebar, AppMain } from './components'
-import ResizeMixin from './mixin/ResizeHandler'
-import TagsView from './components/TagsView/index'
-import { mapState } from 'vuex'
-import Settings from './components/Settings/index'
-
-export default {
-  name: 'Layout',
-  components: {
-    Settings,
-    TagsView,
-    AppHeader,
-    Navbar,
-    Sidebar,
-    AppMain,
-    RightPanel
-  },
-  mixins: [ResizeMixin],
-  computed: {
-    ...mapState({
-      sidebar: state => state.app.sidebar,
-      device: state => state.app.device,
-      showSettings: state => state.settings.showSettings,
-      needTagsView: state => state.settings.tagsView,
-      fixedHeader: state => state.settings.fixedHeader
-    }),
-    classObj() {
-      return {
-        hideSidebar: !this.sidebar.opened,
-        openSidebar: this.sidebar.opened,
-        withoutAnimation: this.sidebar.withoutAnimation,
-        mobile: this.device === 'mobile'
-      }
-    }
-  },
-  methods: {
-    handleClickOutside() {
-      this.$store.dispatch('CloseSideBar', { withoutAnimation: false })
-    }
-  }
-}
-</script>
-
-<style rel="stylesheet/scss" lang="scss" scoped>
-  @import "src/styles/mixin.scss";
-  .app-wrapper {
-    @include clearfix;
-    position: relative;
-    height: 100%;
-    width: 100%;
-    &.mobile.openSidebar{
-      position: fixed;
-      top: 0;
-    }
-  }
-  .drawer-bg {
-    background: #000;
-    opacity: 0.3;
-    width: 100%;
-    top: 0;
-    height: 100%;
-    position: absolute;
-    z-index: 999;
-  }
-  /*.el-scrollbar{*/
-    /*height: calc(100vh - 50px);*/
-  /*}*/
-  .has-head-scrollbar{
-    height: 100vh;
-  }
-</style>
diff --git a/src/views/layout/components/AppHeader.vue b/src/views/layout/components/AppHeader.vue
deleted file mode 100644
index 8d8912e..0000000
--- a/src/views/layout/components/AppHeader.vue
+++ /dev/null
@@ -1,151 +0,0 @@
-<template>
-  <el-header class="app-header">
-    <h3>{{ title }}</h3>
-    <!--子系统选项-->
-    <el-dropdown v-if="showChangeSys" class="systemSelect" size="medium" @command="handleCommand">
-      <span class="el-dropdown-link">{{ currentSystem.name }}<i class="el-icon-arrow-down el-icon--right"/>
-      </span>
-      <el-dropdown-menu slot="dropdown">
-        <el-dropdown-item v-for="system in systems" :command="system" :key="system.id">{{ system.name }}</el-dropdown-item>
-      </el-dropdown-menu>
-    </el-dropdown>
-    <el-dropdown class="dropdown-container" trigger="click">
-      <div class="dropdown-wrapper">
-        <span style="line-height:50px;">欢迎您，{{ name }}</span>
-        <!--<img :src="avatar+'?imageView2/1/w/80/h/80'" class="user-avatar">-->
-        <i class="el-icon-arrow-down"/>
-      </div>
-      <el-dropdown-menu slot="dropdown" class="user-dropdown">
-        <el-dropdown-item v-if="!baseConfig.singleSys">
-          <span style="display:block;" @click="backToIndex">回首页</span>
-        </el-dropdown-item>
-        <el-dropdown-item :divided="!baseConfig.singleSys">
-          <span style="display:block;" @click="resetPwd">修改密码</span>
-        </el-dropdown-item>
-        <el-dropdown-item divided>
-          <span style="display:block;" @click="logout">注销</span>
-        </el-dropdown-item>
-      </el-dropdown-menu>
-    </el-dropdown>
-    <reset-pwd v-show="showSetPwd" ref="retPwd"/>
-  </el-header>
-</template>
-
-<script>
-import { mapGetters } from 'vuex'
-import ResetPwd from '@/views/system/user/resetPwd'
-
-export default {
-  name: 'AppHeader',
-  components: { ResetPwd },
-  data() {
-    return {
-      title: this.baseConfig.title, // 标题
-      showChangeSys: !this.baseConfig.singleSys, // 是否显示切换系统菜单
-      name: this.$store.getters.name, // 用户姓名
-      showSetPwd: false // 是否显示修改密码按钮
-    }
-  },
-  computed: {
-    ...mapGetters([
-      'sidebar',
-      'avatar',
-      'currentSystem',
-      'systems'
-    ])
-  },
-  created() {
-    if (!this.baseConfig.singleSys) {
-      this.getSystems()
-    }
-  },
-  methods: {
-    toggleSideBar() {
-      this.$store.dispatch('ToggleSideBar')
-    },
-    logout() {
-      this.$store.dispatch('LogOut').then(() => {
-        location.reload() // 为了重新实例化vue-router对象 避免bug
-      })
-    },
-    resetPwd() {
-      this.showSetPwd = true
-      this.$refs.retPwd.initDialog(true)
-    },
-    backToIndex() {
-      const url = this.baseConfig.mainPage
-      window.location.href = url
-    },
-    // 切换子系统
-    handleCommand(command) {
-      console.log('切换子系统:' + command.name)
-      const params1 = `?token=${this.$store.getters.token}`
-      const params = `?sys=${command.name}&url=${command.url}&code=${command.code}&token=${this.$store.getters.token}`
-      // 判断系统是不是http的，如果是则打开新窗口
-      if (command.url.indexOf('http') > -1) {
-      // 取token
-        if (this.baseConfig.sameWindow) {
-          window.location.href = command.url + params1
-        } else {
-          window.open(command.url + params1, '_blank')
-        }
-      } else {
-      // 取token
-        if (this.baseConfig.sameWindow) {
-          window.location.href = this.baseConfig.mainPage + command.url + params
-        } else {
-          window.open(this.baseConfig.mainPage + command.url + params, '_blank')
-        }
-      }
-    },
-    // 获取子系统
-    getSystems() {
-      this.$store.dispatch('GetSystems').then(() => {
-        console.log('获取子系统列表成功-appHeader')
-      })
-    }
-  }
-}
-</script>
-
-<style rel="stylesheet/scss" lang="scss" scoped>
-  h3{
-    margin-left:24px;
-    display: inline-block;
-    float:left;
-  }
-  .dropdown-container {
-    /*height: 50px;*/
-    display: inline-block;
-    float: right;
-    z-index:500;
-    position: fixed;
-    top:0px;
-    right: 35px;
-    .dropdown-wrapper {
-      cursor: pointer;
-      margin-top: 5px;
-      position: relative;
-      line-height: initial;
-      .user-avatar {
-        width: 40px;
-        height: 40px;
-        border-radius: 10px;
-      }
-      .el-icon-caret-bottom {
-        font-size: 12px;
-      }
-    }
-  }
-  .systemSelect{
-    height: 56px;
-    display: inline-block;
-    float: left;
-    z-index:500;
-    position: fixed;
-    margin-left:60px;
-    top:5px;
-    color:#fff;
-    line-height: 56px;
-  }
-</style>
diff --git a/src/views/layout/components/AppMain.vue b/src/views/layout/components/AppMain.vue
deleted file mode 100644
index 2ea268e..0000000
--- a/src/views/layout/components/AppMain.vue
+++ /dev/null
@@ -1,38 +0,0 @@
-<template>
-  <section class="app-main">
-    <transition name="fade-transform" mode="out-in">
-      <!-- or name="fade" -->
-      <!-- <router-view :key="key"></router-view> -->
-      <div>
-        <keep-alive>
-          <router-view v-if="$route.meta.keepAlive" :key="key"/>
-        </keep-alive>
-        <router-view v-if="!$route.meta.keepAlive" :key="key"/>
-      </div>
-    </transition>
-  </section>
-</template>
-
-<script>
-export default {
-  name: 'AppMain',
-  computed: {
-    key() {
-      if (this.$route.meta.keepAlive) {
-        return this.$route.name !== undefined ? this.$route.name : this.$route
-      } else {
-        return this.$route.name !== undefined ? this.$route.name + new Date() : this.$route + new Date()
-      }
-    }
-  }
-}
-</script>
-
-<style scoped>
-.app-main {
-  /*50 = navbar  */
-  /*min-height: calc(100vh - 50px);*/
-  position: relative;
-  overflow: hidden;
-}
-</style>

diff --git a/src/api/dashboard.js b/src/api/dashboard.js
index e69de29..0a4ddfc 100644
--- a/src/api/dashboard.js
+++ b/src/api/dashboard.js
@@ -0,0 +1,73 @@
+/**
+ * 井总览模块接口
+ */
+import request from '@/utils/request'
+
+// 用水量、噪声统计数据
+export function getWatchStatistic() {
+  return request({
+    url: 'waterStatistic/overview',
+    method: 'get'
+  })
+}
+// 水表数量
+export function waterMeterCount() {
+  return request({
+    url: 'waterMeterData/count',
+    method: 'get'
+  })
+}
+// 阀门数量
+export function valveCount() {
+  return request({
+    url: 'waterMeterData/count',
+    method: 'get'
+  })
+}
+
+// 查询一级分区各区用水量
+export function countByFirstArea(params) {
+  return request({
+    url: 'waterStatistic/countByFirstArea',
+    method: 'get',
+    params
+  })
+}
+
+// 查询一级分区7日用水量
+export function countByDayFirst(params) {
+  return request({
+    url: 'waterStatistic/countByDayFirst',
+    method: 'get',
+    params
+  })
+}
+
+// 查询二级分区各区用水量
+export function countBySecondArea(params) {
+  return request({
+    url: 'waterStatistic/countBySecondArea',
+    method: 'get',
+    params
+  })
+}
+
+// 查询二级分区水表告警
+export function alarmBySecondArea(params) {
+  return request({
+    url: 'waterStatistic/alarmBySecondArea',
+    method: 'get',
+    params
+  })
+}
+
+// 设备7日报警趋势
+export function alarmCountByDay(params) {
+  return request({
+    url: 'waterStatistic/alarmCountByDay',
+    method: 'get',
+    params
+  })
+}
+
+
diff --git a/src/components/BigData/Card/index.vue b/src/components/BigData/Card/index.vue
index d71e609..45359c9 100644
--- a/src/components/BigData/Card/index.vue
+++ b/src/components/BigData/Card/index.vue
@@ -10,6 +10,7 @@
         </div>
         <div class="card-panel-num" >
           {{ context }}
+          <span style="font-size: 10px;color:#888">{{unit}}</span>
         </div>
       </div>
     </div>
@@ -39,6 +40,10 @@
     color: {
       type: String,
       default: '#40c9c6'
+    },
+    unit:{
+      type: String,
+      default:''
     }
   },
   computed: {
diff --git a/src/components/BigData/Card1/index.vue b/src/components/BigData/Card1/index.vue
index 030b2dc..aa46454 100644
--- a/src/components/BigData/Card1/index.vue
+++ b/src/components/BigData/Card1/index.vue
@@ -1,10 +1,11 @@
 <template>
   <el-card :body-style="{ padding: '0px' }" shadow="always">
-    <div class="card-panel" >
-      <div :style="backgroundColor" class="card-panel-icon-wrapper">
-        <svg-icon :icon-class="icon" class-name="card-panel-icon" />
+    <div class="card-panel">
+      <div v-if="icon" :style="backgroundColor" class="card-panel-icon-wrapper">
+        <svg-icon :icon-class="icon" class-name="card-panel-icon"/>
       </div>
-      <div  class="card-panel-description">
+      <div v-else style="float:left; width: 20px;height: 100%;"></div>
+      <div class="card-panel-description">
         <!-- <div class="card-panel-text">
           {{ title[0] }} <span class="card-panel-num">{{ context[0] }}</span>
         </div>
@@ -13,18 +14,20 @@
         </div> -->
         <div class="two" v-if="title.length===2">
           <div class="card-panel-text">
-            {{ title[0] }} <span class="card-panel-num">{{ context[0] }}</span>
+            {{ title[0] }} <span class="card-panel-num">{{ context[0] }}<span
+            style="font-size: 10px;color:#888;margin-left: 5px">{{unit}}</span></span>
           </div>
-          <div class="card-panel-text" >
-            {{ title[1] }} <span class="card-panel-num">{{ context[1] }}</span>
+          <div class="card-panel-text">
+            {{ title[1] }} <span class="card-panel-num">{{ context[1] }}<span
+            style="font-size: 10px;color:#888;margin-left: 5px">{{unit}}</span></span>
           </div>
         </div>
         <div class="only" v-else>
           <div class="card-panel-text">
             {{ title[0] }}
           </div>
-          <div class="card-panel-num" >
-            {{ context[0] }}
+          <div class="card-panel-num">
+            {{ context[0] }}<span style="font-size: 10px;color:#888">{{unit}}</span>
           </div>
         </div>
       </div>
@@ -33,42 +36,46 @@
 </template>
 
 <script>
-export default {
-  name: 'Card1',
-  props: {
-    title: {
-      type: Array,
-      default: function() {
-        return ['标题', '标题']
+  export default {
+    name: 'Card1',
+    props: {
+      title: {
+        type: Array,
+        default: function () {
+          return ['标题', '标题']
+        }
+      },
+      subtitle: {
+        type: String,
+        default: ''
+      },
+      icon: {
+        type: String,
+        default: ''
+      },
+      context: {
+        type: Array,
+        default: function () {
+          return ['--', '--']
+        }
+      },
+      color: {
+        type: String,
+        default: '#40c9c6'
+      },
+      unit: {
+        type: String,
+        default: ''
       }
     },
-    subtitle: {
-      type: String,
-      default: ''
-    },
-    icon: {
-      type: String,
-      default: ''
-    },
-    context: {
-      type: Array,
-      default: function() {
-        return ['--', '--']
-      }
-    },
-    color: {
-      type: String,
-      default: '#40c9c6'
-    }
-  },
-  computed: {
-    backgroundColor() {
-      return {
-        color: this.color
+    computed: {
+      backgroundColor() {
+        return {
+          color: this.color
+        }
       }
     }
   }
-}
 </script>
 
 <style lang="scss" scoped>
@@ -108,7 +115,7 @@
       overflow: auto;
       margin-left: 5px;
 
-      .two{
+      .two {
         .card-panel-text {
           line-height: 18px;
           color: rgba(0, 0, 0, 0.45);
@@ -123,7 +130,7 @@
           float: right;
         }
       }
-      .only{
+      .only {
         .card-panel-text {
           line-height: 18px;
           color: rgba(0, 0, 0, 0.45);
diff --git a/src/icons/svg/icon-noise.svg b/src/icons/svg/icon-noise.svg
new file mode 100644
index 0000000..00bef71
--- /dev/null
+++ b/src/icons/svg/icon-noise.svg
@@ -0,0 +1,2 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1648634383080" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2093" xmlns:xlink="http://www.w3.org/1999/xlink" width="128" height="128"><defs><style type="text/css">@font-face { font-family: feedback-iconfont; src: url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.woff2?t=1630033759944") format("woff2"), url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.woff?t=1630033759944") format("woff"), url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.ttf?t=1630033759944") format("truetype"); }
+</style></defs><path d="M875.039 549.868c-25.436 0-47.411 13.91-59.3 34.4h-125.9l-99.564-199.177-76.703 281.23-51.528-566.757-67.461-5.735-130.8 490.44H49.397v68.802h267.259l94.464-354.268 51.235 563.733 67.451 5.913 79.432-291.445 38.077 76.057h168.428c11.91 20.419 33.864 34.391 59.3 34.391 37.98 0 68.792-30.879 68.792-68.797-0.005-38.062-30.817-68.787-68.797-68.787z" p-id="2094"></path></svg>
\ No newline at end of file
diff --git a/src/icons/svg/icon-valve.svg b/src/icons/svg/icon-valve.svg
new file mode 100644
index 0000000..f5d96e2
--- /dev/null
+++ b/src/icons/svg/icon-valve.svg
@@ -0,0 +1,2 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1648634707805" class="icon" viewBox="0 0 1090 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3809" xmlns:xlink="http://www.w3.org/1999/xlink" width="136.25" height="128"><defs><style type="text/css">@font-face { font-family: feedback-iconfont; src: url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.woff2?t=1630033759944") format("woff2"), url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.woff?t=1630033759944") format("woff"), url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.ttf?t=1630033759944") format("truetype"); }
+</style></defs><path d="M502.944 296.975V143.052h-231.98c-31.587 0-57.321-24.93-57.321-55.526 0-30.598 25.75-55.526 57.321-55.526H833.06c31.571 0 57.306 24.93 57.306 55.525 0 30.922-25.735 55.526-57.29 55.526h-231.64v153.924h18.179c21.615 0 39.112 16.955 39.112 37.904v90.565l-213.105-0.34v-90.225c0-20.95 17.497-37.904 39.128-37.904h18.194z m-381.74 590.293v63.84c0 9.306-7.834 16.955-17.698 16.955H58.231c-9.862-0.001-17.698-7.65-17.698-17.296V542.472c0-9.63 7.835-17.28 17.698-17.28h45.274c9.863 0 17.698 7.65 17.698 17.28v83.133h150.55c6.272-85.518 79.247-152.95 168.387-152.95h207.98c89.14 0 162.116 67.432 168.403 152.95h150.873v-83.798c0-9.29 7.495-16.615 17.033-16.615h46.297c9.523 0 17.001 7.308 17.001 16.615v409.625c0.341 9.321-7.478 16.63-17.016 16.63h-46.297c-9.523 0-17.018-7.309-17.018-16.63v-64.165H805.36C780.755 948.583 719.655 992 648.119 992H440.142c-71.52 0-132.635-43.402-157.239-104.733H121.204z" p-id="3810"></path></svg>
\ No newline at end of file
diff --git a/src/views/dashboard/components/PanelGroup.vue b/src/views/dashboard/components/PanelGroup.vue
index b72d289..332cbf9 100644
--- a/src/views/dashboard/components/PanelGroup.vue
+++ b/src/views/dashboard/components/PanelGroup.vue
@@ -1,12 +1,12 @@
 <template>
   <el-row class="panel-group">
     <div v-for="card in dataGroup1" :key="card.index" class="card-panel-col">
-      <card1 :title="card.title" :context="card.context" :icon="card.icon" :color="card.color"/>
+      <card1 :title="card.title" :context="card.context" :icon="card.icon" :color="card.color" :unit="card.unit"/>
     </div>
 
     <div v-for="card in dataGroup" :key="card.title" class="card-panel-col">
       <div v-if="hasPerm(card.permission)">
-        <card :title="card.title" :context="card.context" :icon="card.icon" :color="card.color" @click.native="goPage(card.path)"/>
+        <card :title="card.title" :context="card.context" :icon="card.icon" :unit="card.unit" :color="card.color" @click.native="goPage(card.path)"/>
       </div>
     </div>
   </el-row>
@@ -16,7 +16,7 @@
 import Card1 from '@/components/BigData/Card1'
 import Card from '@/components/BigData/Card'
 // 首页
-import { getWatchStatistic , waterMeterCount } from '@/api/overview'
+import { getWatchStatistic , waterMeterCount, valveCount } from '@/api/dashboard'
 // 根据布防数量统计井数量
 import { wellCountByBfzt } from '@/api/well'
 // 当前报警数
@@ -36,30 +36,33 @@
           context: ['--', '--'],
           icon: 'icon-water',
           color: '#40c9c6',
+          unit: '吨',
           index: 0
         },
         {
-          title: ['今日用水量', '昨日用水量'],
+          title: ['今日用水量', '生产厂区用水量'],
           context: ['--', '--'],
-          icon: 'icon-water',
+          icon: '',
           color: '#36a3f7',
+          unit: '吨',
           index: 1
         },
         {
-          title: ['实时噪声'],
+          title: ['滑道实时噪声'],
           context: ['--'],
-          icon: 'icon-device',
+          icon: 'icon-noise',
           color: '#f1c353',
+          unit: 'db',
           index: 2
         }
       ],
       dataGroup: [
         {
-          title: '设备总数',
+          title: '阀门数量',
           context: '--',
-          icon: 'icon-device',
+          icon: 'icon-valve',
           color: '#40c9c6',
-          path: '/deviceList',
+          path: '/deviceList?deviceType=20',
           permission: '/device/list'
         },
         {
@@ -67,11 +70,11 @@
           context: '--',
           icon: 'icon-watch',
           color: '#9694f7',
-          path: '/deviceList',
+          path: '/deviceList?deviceType=13',
           permission: '/device/list'
         },
         {
-          title: '当前报警数',
+          title: '报警信息',
           context: '--',
           icon: 'icon-alarm',
           color: '#f4516c',
@@ -83,10 +86,10 @@
   },
   mounted() {
     this.getWater()
-    this.getWellCount()
+    // this.getWellCount()
     this.getDeviceCount()
     this.getAlarmCount()
-    this.getJobCount()
+    // this.getJobCount()
   },
   methods: {
     refresh() {
@@ -97,24 +100,31 @@
       this.$router.push(path)
     },
     getWater() {
+      // 用水量
       getWatchStatistic().then(response => {
-        this.dataGroup1[0].context = [response.data.total, response.data.month]
-        this.dataGroup1[1].context = [response.data.today, response.data.yesterday]
-        this.dataGroup1[2].context = [Number(response.data.sound).toFixed(2)]
+        this.dataGroup1[0].context = [response.data.total?parseFloat(response.data.total).toFixed(0):'--', response.data.month?parseFloat(response.data.month).toFixed(0):'--']
+        this.dataGroup1[1].context = [response.data.today?parseFloat(response.data.today).toFixed(0):'--', response.data.yesterday?parseFloat(response.data.yesterday).toFixed(0):'--']
+        this.dataGroup1[2].context = [response.data.sound?Number(response.data.sound).toFixed(2):'--']
       })
-      waterMeterCount().then(response => {
-        this.dataGroup[1].context = response.data
-      })
+
     },
-    getWellCount() {
-      wellCountByBfzt().then(response => {
-        this.dataGroup[0].context = response.data.total
-      })
-    },
+    // getWellCount() {
+    //   wellCountByBfzt().then(response => {
+    //     this.dataGroup[0].context = response.data.total
+    //   })
+    // },
     getDeviceCount() {
       // deviceStaticByStatus().then(response => {
       //   this.dataGroup[1].context = response.data.total
       // })
+      // 阀门数量
+      valveCount().then(response => {
+        this.dataGroup[0].context = response.data
+      })
+      // 水表数量
+      waterMeterCount().then(response => {
+        this.dataGroup[1].context = response.data
+      })
     },
     getAlarmCount() {
       alarmNowStatic().then(response => {
@@ -159,7 +169,7 @@
   //   &:hover {
   //     .card-panel-icon-wrapper {
   //       color: #fff;
-        
+
   //     }
 
   //     .icon-people {
diff --git a/src/views/dashboard/components/waterCountByAreaBar.vue b/src/views/dashboard/components/waterCountByAreaBar.vue
index 1bdac48..c488923 100644
--- a/src/views/dashboard/components/waterCountByAreaBar.vue
+++ b/src/views/dashboard/components/waterCountByAreaBar.vue
@@ -1,9 +1,10 @@
 <template>
   <div class="container">
     <div class="statistic-container">
+      <el-button round size="mini" @click="setDefaultTime('year')">本年</el-button>
+      <el-button round size="mini" @click="setDefaultTime('season')">本季</el-button>
       <el-button round size="mini" @click="setDefaultTime('month')">本月</el-button>
-      <el-button round size="mini" @click="setDefaultTime('week')">近7日</el-button>
-      <el-button round size="mini" @click="setDefaultTime('yesterday')">昨日</el-button>
+      <el-button round size="mini" @click="setDefaultTime('week')">本周</el-button>
       <el-button round size="mini" @click="setDefaultTime('today')">今日</el-button>
       <el-date-picker
         v-model="timeRange"
@@ -107,7 +108,7 @@
   },
   mounted() {
     this.setDefaultTime('today')
-    this.fetchArea()
+    // this.fetchArea()
   },
   methods: {
     fetchArea() {
@@ -130,10 +131,11 @@
     },
     fetchData() {
       const params = {
-        areaId: this.areaId,
+        areaId: '110000',
         startTime: this.timeRange[0],
         endTime: this.timeRange[1]
       }
+      this.$emit('change', params)
       countBySecondArea(params).then(response => {
         this.isShow = false
         this.chartData.rows = response.data
@@ -153,7 +155,21 @@
       })
     },
     setDefaultTime(val) {
-      if (val === 'month') {
+      if (val === 'year') {
+        var today = new Date()
+        var tYear = today.getFullYear()
+        const beginTime = tYear + '-01-01'
+        const endTime = getDayTime(new Date().getTime())
+        this.timeRange = [beginTime, endTime.Format('yyyy-MM-dd')]
+      }if (val === 'season') {
+        var today = new Date()
+        var tYear = today.getFullYear()
+        var tMonth = today.getMonth() + 1
+        const oldMonth = tMonth<4?'01':(tMonth<7?'04':(tMonth<10?'07':'10'))
+        const beginTime = tYear + '-' + oldMonth + '-01'
+        const endTime = getDayTime(new Date().getTime())
+        this.timeRange = [beginTime, endTime.Format('yyyy-MM-dd')]
+      }else if (val === 'month') {
         var today = new Date()
         var tYear = today.getFullYear()
         var tMonth = today.getMonth() + 1
@@ -164,7 +180,8 @@
         const endTime = getDayTime(new Date().getTime())
         this.timeRange = [beginTime, endTime.Format('yyyy-MM-dd')]
       } else if (val === 'week') {
-        this.timeRange = [getDayTime(new Date().getTime() - 24 * 6 * 60 * 60 * 1000).Format('yyyy-MM-dd'), getDayTime(new Date().getTime()).Format('yyyy-MM-dd')]
+        const nowDayOfWeek =  new Date().getDay()-1
+        this.timeRange = [getDayTime(new Date().getTime() - 24 * nowDayOfWeek * 60 * 60 * 1000).Format('yyyy-MM-dd'), getDayTime(new Date().getTime()).Format('yyyy-MM-dd')]
       } else if (val === 'yesterday') {
         this.timeRange = [getDayTime(new Date().getTime() - 24 * 60 * 60 * 1000).Format('yyyy-MM-dd'), getDayTime(new Date().getTime() - 24 * 60 * 60 * 1000).Format('yyyy-MM-dd')]
       } else if (val === 'today') {
diff --git a/src/views/dashboard/components/waterCountByDay.vue b/src/views/dashboard/components/waterCountByDay.vue
index 8e12f02..78d1f7c 100644
--- a/src/views/dashboard/components/waterCountByDay.vue
+++ b/src/views/dashboard/components/waterCountByDay.vue
@@ -1,12 +1,12 @@
 <template>
   <div class="container">
-    <div class="function">
-      <el-button round size="mini" @click="changeTime('year')">近1年</el-button>
-      <el-button round size="mini" @click="changeTime('halfyear')">近6月</el-button>
-      <el-button round size="mini" @click="changeTime('3month')">近3月</el-button>
-      <el-button round size="mini" @click="changeTime('month')">近1月</el-button>
-      <el-button round size="mini" @click="changeTime('week')">近1周</el-button>
-    </div>
+    <!--<div class="function">-->
+      <!--<el-button round size="mini" @click="changeTime('year')">近1年</el-button>-->
+      <!--<el-button round size="mini" @click="changeTime('halfyear')">近6月</el-button>-->
+      <!--<el-button round size="mini" @click="changeTime('3month')">近3月</el-button>-->
+      <!--<el-button round size="mini" @click="changeTime('month')">近1月</el-button>-->
+      <!--<el-button round size="mini" @click="changeTime('week')">近1周</el-button>-->
+    <!--</div>-->
     <ve-line :data="chartData" :title="title" :extend="extend" :settings="chartSettings"/>
   </div>
 </template>
@@ -17,6 +17,18 @@
 import { getDoorAreaTree } from '@/api/system/area'
 export default {
   name: 'WaterCountByDay',
+  props:{
+    query: {
+      type: Object,
+      default:()=>{
+        return {
+          areaId: '',
+          startTime: '',
+          endTime: ''
+        }
+      }
+    }
+  },
   data() {
     return {
       listQuery: {
@@ -52,8 +64,13 @@
     }
   },
   mounted() {
-    this.changeTime('month')
-    this.fetchArea()
+    // this.changeTime('month')
+    // this.fetchArea()
+  },
+  watch:{
+    query(val){
+      this.fetchData()
+    }
   },
   methods: {
     fetchArea() {
@@ -73,7 +90,7 @@
       })
     },
     fetchData() {
-      countByDayFirst(this.listQuery).then(response => {
+      countByDayFirst(this.query).then(response => {
         const arr = response.data.map(function(item) {
           for (let i = 0; i < item.data.length; i++) {
             item[item.data[i].areaName] = item.data[i].count
diff --git a/src/views/dashboard/components/waterCountByDept.vue b/src/views/dashboard/components/waterCountByDept.vue
index a0c82cf..02e27cd 100644
--- a/src/views/dashboard/components/waterCountByDept.vue
+++ b/src/views/dashboard/components/waterCountByDept.vue
@@ -1,22 +1,22 @@
 <!--suppress ALL -->
 <template>
   <div class="container">
-    <div class="function">
-      <el-button round size="mini" @click="changeTime('year')">近1年</el-button>
-      <el-button round size="mini" @click="changeTime('halfyear')">近6月</el-button>
-      <el-button round size="mini" @click="changeTime('3month')">近3月</el-button>
-      <el-button round size="mini" @click="changeTime('month')">近1月</el-button>
-      <el-button round size="mini" @click="changeTime('week')">近1周</el-button>
-    </div>
+    <!--<div class="function">-->
+      <!--<el-button round size="mini" @click="changeTime('year')">近1年</el-button>-->
+      <!--<el-button round size="mini" @click="changeTime('halfyear')">近6月</el-button>-->
+      <!--<el-button round size="mini" @click="changeTime('3month')">近3月</el-button>-->
+      <!--<el-button round size="mini" @click="changeTime('month')">近1月</el-button>-->
+      <!--<el-button round size="mini" @click="changeTime('week')">近1周</el-button>-->
+    <!--</div>-->
     <ve-pie :data="chartData" :extend="extend" :title="title"/>
-    <div class="function">
-      <el-button
-        v-for="item in areaList"
-        :key="item.id"
-        round
-        @click="areaChange(item.id)"
-        size="mini">{{item.name}}</el-button>
-    </div>
+    <!--<div class="function">-->
+      <!--<el-button-->
+        <!--v-for="item in areaList"-->
+        <!--:key="item.id"-->
+        <!--round-->
+        <!--@click="areaChange(item.id)"-->
+        <!--size="mini">{{item.name}}</el-button>-->
+    <!--</div>-->
   </div>
 </template>
 
@@ -25,6 +25,18 @@
 import { getDoorAreaTree } from '@/api/system/area'
 export default {
   name: 'WaterCountByDepy',
+  props:{
+    query: {
+      type: Object,
+      default:()=>{
+        return {
+          areaId: '',
+          startTime: '',
+          endTime: ''
+        }
+      }
+    }
+  },
   data() {
     return {
       listQuery: {
@@ -69,7 +81,12 @@
   },
   mounted() {
     // TODO:待调试真接口
-    this.fetchArea()
+    // this.fetchArea()
+  },
+  watch:{
+    query(val){
+      this.fetchData()
+    }
   },
   methods: {
     fetchArea() {
@@ -104,8 +121,7 @@
       //   { 'areaName': '码头作业区', 'count': 78 },
       //   { 'areaName': '车间生产区', 'count': 78 }
       // ]
-      this.listQuery.areaId = this.areaId
-      countBySecondArea(this.listQuery).then(response => {
+      countBySecondArea(this.query).then(response => {
         this.chartData.rows = response.data
       })
     },
diff --git a/src/views/dashboard/components/waterNote.vue b/src/views/dashboard/components/waterNote.vue
new file mode 100644
index 0000000..aa0f448
--- /dev/null
+++ b/src/views/dashboard/components/waterNote.vue
@@ -0,0 +1,152 @@
+<!--suppress ALL -->
+<template>
+  <div class="container">
+    <div>
+      用水事记
+    </div>
+
+  </div>
+</template>
+
+<script>
+import { countBySecondArea } from '@/api/overview'
+import { getDoorAreaTree } from '@/api/system/area'
+export default {
+  name: 'WaterNote',
+  props:{
+    query: {
+      type: Object,
+      default:()=>{
+        return {
+          areaId: '',
+          startTime: '',
+          endTime: ''
+        }
+      }
+    }
+  },
+  data() {
+    return {
+      listQuery: {
+        areaId: '',
+        startTime: '',
+        endTime: ''
+      },
+      areaId:'',
+      areaList: [],
+      chartData: {
+        columns: ['areaName', 'count'],
+        rows: []
+      },
+      extend: {
+        grid: {
+          right: '30%'
+        },
+        legend: {
+          type: 'scroll',
+          top: '60px',
+          right: '0px',
+          orient: 'vertical'
+        },
+        series: {
+          label: { show: true, position: 'outside', formatter: '{b}' },
+          right: 120
+        },
+        tooltip: { trigger: 'item', formatter: '{b}<br/>用水量：{c}吨<br/>占比：{d}%' }
+      },
+      title: {
+        text: '分区用水占比图'
+      },
+      chartSettings: {
+        labelMap: {
+          'areaName': '分区',
+          'count': '用水量'
+        },
+        dimension: 'areaName',
+        metrics: 'count'
+      }
+    }
+  },
+  mounted() {
+    // TODO:待调试真接口
+    // this.fetchArea()
+  },
+  watch:{
+    query(val){
+      this.fetchData()
+    }
+  },
+  methods: {
+    fetchArea() {
+      getDoorAreaTree().then(response => {
+        if (response.code === 200) {
+          this.areaList = response.data.filter(item => {
+            return item.pid === '1'
+          }).map(function(item) {
+            return {
+              id: item.id, name: item.name
+            }
+          })
+          if (this.areaList.length !== 0) { this.areaChange(this.areaList[0].id) }
+        }
+      })
+    },
+    areaChange(val){
+      this.areaId = val
+      this.fetchData()
+    },
+    // 获取统计数据
+    fetchData() {
+      // this.chartData.rows = [
+      //   { 'areaName': '科技楼及食堂', 'count': 53 },
+      //   { 'areaName': 'A\\B\\C\\D\\E座', 'count': 78 },
+      //   { 'areaName': '厂区', 'count': 78 },
+      //   { 'areaName': '分段分区', 'count': 78 },
+      //   { 'areaName': '船坞分区', 'count': 78 },
+      //   { 'areaName': '刀把码头', 'count': 78 },
+      //   { 'areaName': '制管作业区', 'count': 78 },
+      //   { 'areaName': '滑道作业区', 'count': 78 },
+      //   { 'areaName': '码头作业区', 'count': 78 },
+      //   { 'areaName': '车间生产区', 'count': 78 }
+      // ]
+      countBySecondArea(this.query).then(response => {
+        this.chartData.rows = response.data
+      })
+    },
+    changeTime(timeType) {
+      let startTime
+      switch (timeType) {
+        case 'year':
+          startTime = getDayTime(new Date().getTime() - 24 * 365 * 60 * 60 * 1000)
+          this.listQuery.startTime = startTime.Format('yyyy-MM-dd')
+          break
+        case 'halfyear':
+          startTime = getDayTime(new Date().getTime() - 24 * 182 * 60 * 60 * 1000)
+          this.listQuery.startTime = startTime.Format('yyyy-MM-dd')
+          break
+        case '3month':
+          startTime = getDayTime(new Date().getTime() - 24 * 90 * 60 * 60 * 1000)
+          this.listQuery.startTime = startTime.Format('yyyy-MM-dd')
+          break
+        case 'month':
+          startTime = getDayTime(new Date().getTime() - 24 * 30 * 60 * 60 * 1000)
+          this.listQuery.startTime = startTime.Format('yyyy-MM-dd')
+          break
+        case 'week':
+          startTime = getDayTime(new Date().getTime() - 24 * 7 * 60 * 60 * 1000)
+          this.listQuery.startTime = startTime.Format('yyyy-MM-dd')
+          break
+      }
+      const endTime = new Date()
+      this.listQuery.endTime = endTime.Format('yyyy-MM-dd')
+      this.fetchData()
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+  .container{
+    position:relative;
+    height: 455px;
+  }
+</style>
diff --git a/src/views/dashboard/index.vue b/src/views/dashboard/index.vue
index fdbc38a..831dbc3 100644
--- a/src/views/dashboard/index.vue
+++ b/src/views/dashboard/index.vue
@@ -1,31 +1,33 @@
 <template>
   <div class="dashboard-container" style="background-color: white">
     <panel-group ref="panelgroup"/>
-    <el-row :gutter="10">
+    <el-row>
       <!-- 用水统计图 -->
+      <el-col :span="18">
+        <el-card shadow="never">
+          <water-count-by-area-bar @change="changeWaterQuery"/>
+        </el-card>
+      </el-col>
+      <el-col :span="6">
+        <el-card shadow="never">
+          <water-note/>
+        </el-card>
+      </el-col>
+    </el-row>
+    <el-row>
+      <!-- 分区用水占比图 -->
       <el-col :span="12">
         <el-card shadow="never">
-          <water-count-by-dept-bar/>
+          <water-count-by-dept :query="listQuery1" ref="waterCountPie"/>
         </el-card>
       </el-col>
       <!-- 用水走势图 -->
       <el-col :span="12">
         <el-card shadow="never">
-          <water-count-by-day/>
+          <water-count-by-day :query="listQuery1" ref="waterCountDay"/>
         </el-card>
       </el-col>
-      <!-- 分区用水统计图 -->
-      <el-col :span="12">
-        <el-card shadow="never">
-          <water-count-by-area-bar/>
-        </el-card>
-      </el-col>
-      <!-- 分区用水占比图 -->
-      <el-col :span="12">
-        <el-card shadow="never">
-          <water-count-by-depy/>
-        </el-card>
-      </el-col>
+
       <!--水表报警次数统计-->
       <el-col v-if="hasPerm('/statics/alarmsByDay')" :span="12">
         <el-card shadow="never">
@@ -64,20 +66,22 @@
 import DeviceCountByOnline from './components/DeviceCountByOnline'
 import AlarmByDays from './components/AlarmByDays'
 import JobByStatus from './components/JobByStatus'
-import WaterCountByDepy from './components/waterCountByDept'
+import WaterCountByDept from './components/waterCountByDept'
 import WaterCountByDeptBar from './components/waterCountByDeptBar'
 import WaterCountByDay from './components/waterCountByDay'
 import WaterCountByAreaBar from "./components/waterCountByAreaBar";
 import WatchAlarmBar from "./components/watchAlarmBar";
+import WaterNote from "./components/waterNote";
 
 export default {
   name: 'Dashboard',
   components: {
+    WaterNote,
     WatchAlarmBar,
     WaterCountByAreaBar,
     WaterCountByDay,
     WaterCountByDeptBar,
-    WaterCountByDepy,
+    WaterCountByDept,
     JobByStatus,
     AlarmByDays,
     PanelGroup,
@@ -108,12 +112,25 @@
       state.needRefresh = needRefresh
     }
   },
+  data(){
+    return {
+      listQuery1:{
+        areaId:'110000',
+        startTime:new Date().Format('yyyy-MM-dd'),
+        endTime:new Date().Format('yyyy-MM-dd')
+      },// 分区用水量查询条件
+      listQuery2:{
+        areaId:'',
+        startTime:'',
+        endTime:''
+      } // 分区报警查询条件
+    }
+  },
   watch: {
     needRefresh(val) {
       // 需要刷新
       if (val) {
         console.log('refresh dashboard')
-        debugger
         this.$refs.panelgroup.refresh()
       }
     }
@@ -124,6 +141,10 @@
   methods: {
     webSocket() {
       this.$store.dispatch('initWebSocket')
+    },
+    // 切换分区查询条件
+    changeWaterQuery(listQuery1){
+      this.listQuery1 = listQuery1
     }
   }
 }
diff --git a/src/views/dashboard/index_bak.vue b/src/views/dashboard/index_bak.vue
new file mode 100644
index 0000000..fdbc38a
--- /dev/null
+++ b/src/views/dashboard/index_bak.vue
@@ -0,0 +1,149 @@
+<template>
+  <div class="dashboard-container" style="background-color: white">
+    <panel-group ref="panelgroup"/>
+    <el-row :gutter="10">
+      <!-- 用水统计图 -->
+      <el-col :span="12">
+        <el-card shadow="never">
+          <water-count-by-dept-bar/>
+        </el-card>
+      </el-col>
+      <!-- 用水走势图 -->
+      <el-col :span="12">
+        <el-card shadow="never">
+          <water-count-by-day/>
+        </el-card>
+      </el-col>
+      <!-- 分区用水统计图 -->
+      <el-col :span="12">
+        <el-card shadow="never">
+          <water-count-by-area-bar/>
+        </el-card>
+      </el-col>
+      <!-- 分区用水占比图 -->
+      <el-col :span="12">
+        <el-card shadow="never">
+          <water-count-by-depy/>
+        </el-card>
+      </el-col>
+      <!--水表报警次数统计-->
+      <el-col v-if="hasPerm('/statics/alarmsByDay')" :span="12">
+        <el-card shadow="never">
+          <watch-alarm-bar/>
+        </el-card>
+      </el-col>
+      <!--报警次数统计-->
+      <el-col v-if="hasPerm('/statics/alarmsByDay')" :span="12">
+        <el-card shadow="never">
+          <alarm-by-days/>
+        </el-card>
+      </el-col>
+      <!--设备在线数量统计-->
+      <el-col v-if="hasPerm('/statics/deviceStaticsByType')" :span="12">
+        <el-card shadow="never">
+          <device-count-by-online/>
+        </el-card>
+      </el-col>
+
+      <!--设备数量统计-->
+      <el-col v-if="hasPerm('/statics/deviceStaticsByType')" :span="12">
+        <el-card shadow="never">
+          <device-count/>
+        </el-card>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+import PanelGroup from './components/PanelGroup'
+import WellCountByBfzt from './components/WellCountByBfzt'
+import WellCountByType from './components/WellCountByType'
+import DeviceCount from './components/DeviceCount'
+import DeviceCountByOnline from './components/DeviceCountByOnline'
+import AlarmByDays from './components/AlarmByDays'
+import JobByStatus from './components/JobByStatus'
+import WaterCountByDepy from './components/waterCountByDept'
+import WaterCountByDeptBar from './components/waterCountByDeptBar'
+import WaterCountByDay from './components/waterCountByDay'
+import WaterCountByAreaBar from "./components/waterCountByAreaBar";
+import WatchAlarmBar from "./components/watchAlarmBar";
+
+export default {
+  name: 'Dashboard',
+  components: {
+    WatchAlarmBar,
+    WaterCountByAreaBar,
+    WaterCountByDay,
+    WaterCountByDeptBar,
+    WaterCountByDepy,
+    JobByStatus,
+    AlarmByDays,
+    PanelGroup,
+    WellCountByBfzt,
+    WellCountByType,
+    DeviceCount,
+    DeviceCountByOnline
+  },
+  computed: {
+    ...mapGetters([
+      'name',
+      'roleNames',
+      'roleTips',
+      'wellTypes',
+      'deviceTypes',
+      'communications',
+      'area'
+    ])
+  },
+  mutations: {
+    SET_WEBSOCKET: (state, websocket) => {
+      state.websocket = websocket
+    },
+    SET_WS_STATUS: (state, wsStatus) => {
+      state.wsStatus = wsStatus
+    },
+    SET_NEED_REFRESH: (state, needRefresh) => {
+      state.needRefresh = needRefresh
+    }
+  },
+  watch: {
+    needRefresh(val) {
+      // 需要刷新
+      if (val) {
+        console.log('refresh dashboard')
+        debugger
+        this.$refs.panelgroup.refresh()
+      }
+    }
+  },
+  mounted() {
+    // this.webSocket()
+  },
+  methods: {
+    webSocket() {
+      this.$store.dispatch('initWebSocket')
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.dashboard-container{
+  .el-row{
+    .el-col{
+      margin-bottom: 10px;
+    }
+  }
+}
+.dashboard {
+  &-container {
+    padding: 10px 20px;
+  }
+  &-text {
+    font-size: 30px;
+    line-height: 46px;
+  }
+}
+</style>
diff --git a/src/views/layout/Layout.vue b/src/views/layout/Layout.vue
deleted file mode 100644
index 7c3d46d..0000000
--- a/src/views/layout/Layout.vue
+++ /dev/null
@@ -1,111 +0,0 @@
-<template>
-  <el-container :class="classObj" class="app-wrapper">
-    <div v-if="device==='mobile'&&sidebar.opened" class="drawer-bg" @click="handleClickOutside"/>
-    <app-header class="app-header"/>
-    <el-main class="app-body">
-      <!--侧边栏-->
-      <sidebar class="sidebar-container"/>
-      <!--右半部分-->
-      <div :class="{hasTagsView:needTagsView}" class="main-container">
-        <!--开启固定头部设置-->
-        <div v-if="fixedHeader">
-          <!--导航(面包屑)-->
-          <navbar/>
-          <!--标签栏-->
-          <tags-view v-if="needTagsView" />
-          <!--主内容包裹在el-scrollbar中-->
-          <el-scrollbar class="no-head-scrollbar">
-            <app-main/>
-          </el-scrollbar>
-        </div>
-        <!--为开始固定头部设置-->
-        <div v-else>
-          <!--导航，tagsView都包裹在el-scrollbar中-->
-          <el-scrollbar class="has-head-scrollbar">
-            <navbar/>
-            <tags-view v-if="needTagsView" />
-            <app-main/>
-          </el-scrollbar>
-        </div>
-        <!--悬浮框-->
-        <right-panel v-if="false">
-          <settings />
-        </right-panel>
-      </div>
-    </el-main>
-  </el-container>
-</template>
-
-<script>
-import RightPanel from '@/components/RightPanel'
-import { AppHeader, Navbar, Sidebar, AppMain } from './components'
-import ResizeMixin from './mixin/ResizeHandler'
-import TagsView from './components/TagsView/index'
-import { mapState } from 'vuex'
-import Settings from './components/Settings/index'
-
-export default {
-  name: 'Layout',
-  components: {
-    Settings,
-    TagsView,
-    AppHeader,
-    Navbar,
-    Sidebar,
-    AppMain,
-    RightPanel
-  },
-  mixins: [ResizeMixin],
-  computed: {
-    ...mapState({
-      sidebar: state => state.app.sidebar,
-      device: state => state.app.device,
-      showSettings: state => state.settings.showSettings,
-      needTagsView: state => state.settings.tagsView,
-      fixedHeader: state => state.settings.fixedHeader
-    }),
-    classObj() {
-      return {
-        hideSidebar: !this.sidebar.opened,
-        openSidebar: this.sidebar.opened,
-        withoutAnimation: this.sidebar.withoutAnimation,
-        mobile: this.device === 'mobile'
-      }
-    }
-  },
-  methods: {
-    handleClickOutside() {
-      this.$store.dispatch('CloseSideBar', { withoutAnimation: false })
-    }
-  }
-}
-</script>
-
-<style rel="stylesheet/scss" lang="scss" scoped>
-  @import "src/styles/mixin.scss";
-  .app-wrapper {
-    @include clearfix;
-    position: relative;
-    height: 100%;
-    width: 100%;
-    &.mobile.openSidebar{
-      position: fixed;
-      top: 0;
-    }
-  }
-  .drawer-bg {
-    background: #000;
-    opacity: 0.3;
-    width: 100%;
-    top: 0;
-    height: 100%;
-    position: absolute;
-    z-index: 999;
-  }
-  /*.el-scrollbar{*/
-    /*height: calc(100vh - 50px);*/
-  /*}*/
-  .has-head-scrollbar{
-    height: 100vh;
-  }
-</style>
diff --git a/src/views/layout/components/AppHeader.vue b/src/views/layout/components/AppHeader.vue
deleted file mode 100644
index 8d8912e..0000000
--- a/src/views/layout/components/AppHeader.vue
+++ /dev/null
@@ -1,151 +0,0 @@
-<template>
-  <el-header class="app-header">
-    <h3>{{ title }}</h3>
-    <!--子系统选项-->
-    <el-dropdown v-if="showChangeSys" class="systemSelect" size="medium" @command="handleCommand">
-      <span class="el-dropdown-link">{{ currentSystem.name }}<i class="el-icon-arrow-down el-icon--right"/>
-      </span>
-      <el-dropdown-menu slot="dropdown">
-        <el-dropdown-item v-for="system in systems" :command="system" :key="system.id">{{ system.name }}</el-dropdown-item>
-      </el-dropdown-menu>
-    </el-dropdown>
-    <el-dropdown class="dropdown-container" trigger="click">
-      <div class="dropdown-wrapper">
-        <span style="line-height:50px;">欢迎您，{{ name }}</span>
-        <!--<img :src="avatar+'?imageView2/1/w/80/h/80'" class="user-avatar">-->
-        <i class="el-icon-arrow-down"/>
-      </div>
-      <el-dropdown-menu slot="dropdown" class="user-dropdown">
-        <el-dropdown-item v-if="!baseConfig.singleSys">
-          <span style="display:block;" @click="backToIndex">回首页</span>
-        </el-dropdown-item>
-        <el-dropdown-item :divided="!baseConfig.singleSys">
-          <span style="display:block;" @click="resetPwd">修改密码</span>
-        </el-dropdown-item>
-        <el-dropdown-item divided>
-          <span style="display:block;" @click="logout">注销</span>
-        </el-dropdown-item>
-      </el-dropdown-menu>
-    </el-dropdown>
-    <reset-pwd v-show="showSetPwd" ref="retPwd"/>
-  </el-header>
-</template>
-
-<script>
-import { mapGetters } from 'vuex'
-import ResetPwd from '@/views/system/user/resetPwd'
-
-export default {
-  name: 'AppHeader',
-  components: { ResetPwd },
-  data() {
-    return {
-      title: this.baseConfig.title, // 标题
-      showChangeSys: !this.baseConfig.singleSys, // 是否显示切换系统菜单
-      name: this.$store.getters.name, // 用户姓名
-      showSetPwd: false // 是否显示修改密码按钮
-    }
-  },
-  computed: {
-    ...mapGetters([
-      'sidebar',
-      'avatar',
-      'currentSystem',
-      'systems'
-    ])
-  },
-  created() {
-    if (!this.baseConfig.singleSys) {
-      this.getSystems()
-    }
-  },
-  methods: {
-    toggleSideBar() {
-      this.$store.dispatch('ToggleSideBar')
-    },
-    logout() {
-      this.$store.dispatch('LogOut').then(() => {
-        location.reload() // 为了重新实例化vue-router对象 避免bug
-      })
-    },
-    resetPwd() {
-      this.showSetPwd = true
-      this.$refs.retPwd.initDialog(true)
-    },
-    backToIndex() {
-      const url = this.baseConfig.mainPage
-      window.location.href = url
-    },
-    // 切换子系统
-    handleCommand(command) {
-      console.log('切换子系统:' + command.name)
-      const params1 = `?token=${this.$store.getters.token}`
-      const params = `?sys=${command.name}&url=${command.url}&code=${command.code}&token=${this.$store.getters.token}`
-      // 判断系统是不是http的，如果是则打开新窗口
-      if (command.url.indexOf('http') > -1) {
-      // 取token
-        if (this.baseConfig.sameWindow) {
-          window.location.href = command.url + params1
-        } else {
-          window.open(command.url + params1, '_blank')
-        }
-      } else {
-      // 取token
-        if (this.baseConfig.sameWindow) {
-          window.location.href = this.baseConfig.mainPage + command.url + params
-        } else {
-          window.open(this.baseConfig.mainPage + command.url + params, '_blank')
-        }
-      }
-    },
-    // 获取子系统
-    getSystems() {
-      this.$store.dispatch('GetSystems').then(() => {
-        console.log('获取子系统列表成功-appHeader')
-      })
-    }
-  }
-}
-</script>
-
-<style rel="stylesheet/scss" lang="scss" scoped>
-  h3{
-    margin-left:24px;
-    display: inline-block;
-    float:left;
-  }
-  .dropdown-container {
-    /*height: 50px;*/
-    display: inline-block;
-    float: right;
-    z-index:500;
-    position: fixed;
-    top:0px;
-    right: 35px;
-    .dropdown-wrapper {
-      cursor: pointer;
-      margin-top: 5px;
-      position: relative;
-      line-height: initial;
-      .user-avatar {
-        width: 40px;
-        height: 40px;
-        border-radius: 10px;
-      }
-      .el-icon-caret-bottom {
-        font-size: 12px;
-      }
-    }
-  }
-  .systemSelect{
-    height: 56px;
-    display: inline-block;
-    float: left;
-    z-index:500;
-    position: fixed;
-    margin-left:60px;
-    top:5px;
-    color:#fff;
-    line-height: 56px;
-  }
-</style>
diff --git a/src/views/layout/components/AppMain.vue b/src/views/layout/components/AppMain.vue
deleted file mode 100644
index 2ea268e..0000000
--- a/src/views/layout/components/AppMain.vue
+++ /dev/null
@@ -1,38 +0,0 @@
-<template>
-  <section class="app-main">
-    <transition name="fade-transform" mode="out-in">
-      <!-- or name="fade" -->
-      <!-- <router-view :key="key"></router-view> -->
-      <div>
-        <keep-alive>
-          <router-view v-if="$route.meta.keepAlive" :key="key"/>
-        </keep-alive>
-        <router-view v-if="!$route.meta.keepAlive" :key="key"/>
-      </div>
-    </transition>
-  </section>
-</template>
-
-<script>
-export default {
-  name: 'AppMain',
-  computed: {
-    key() {
-      if (this.$route.meta.keepAlive) {
-        return this.$route.name !== undefined ? this.$route.name : this.$route
-      } else {
-        return this.$route.name !== undefined ? this.$route.name + new Date() : this.$route + new Date()
-      }
-    }
-  }
-}
-</script>
-
-<style scoped>
-.app-main {
-  /*50 = navbar  */
-  /*min-height: calc(100vh - 50px);*/
-  position: relative;
-  overflow: hidden;
-}
-</style>
diff --git a/src/views/layout/components/Navbar.vue b/src/views/layout/components/Navbar.vue
deleted file mode 100644
index 24ea99b..0000000
--- a/src/views/layout/components/Navbar.vue
+++ /dev/null
@@ -1,78 +0,0 @@
-<template>
-  <div class="navbar">
-    <hamburger :toggle-click="toggleSideBar" :is-active="sidebar.opened" class="hamburger-container"/>
-    <breadcrumb />
-  </div>
-</template>
-
-<script>
-import { mapGetters } from 'vuex'
-import Breadcrumb from '@/components/Breadcrumb'
-import Hamburger from '@/components/Hamburger'
-
-export default {
-  components: {
-    Breadcrumb,
-    Hamburger
-  },
-  computed: {
-    ...mapGetters([
-      'sidebar'
-    ])
-  },
-  methods: {
-    toggleSideBar() {
-      this.$store.dispatch('ToggleSideBar')
-    },
-    logout() {
-      this.$store.dispatch('LogOut').then(() => {
-        location.reload() // 为了重新实例化vue-router对象 避免bug
-      })
-    }
-  }
-}
-</script>
-
-<style rel="stylesheet/scss" lang="scss" scoped>
-.navbar {
-  height: 50px;
-  line-height: 50px;
-  box-shadow: 0 1px 3px 0 rgba(0,0,0,.12), 0 0 3px 0 rgba(0,0,0,.04);
-  .hamburger-container {
-    text-align: center;
-    height: 50px;
-    float: left;
-    padding: 0 12px;
-  }
-  .screenfull {
-    position: absolute;
-    right: 90px;
-    top: 16px;
-    color: red;
-  }
-  .avatar-container {
-    height: 50px;
-    display: inline-block;
-    position: absolute;
-    right: 35px;
-    .avatar-wrapper {
-      cursor: pointer;
-      margin-top: 5px;
-      position: relative;
-      line-height: initial;
-      .user-avatar {
-        width: 40px;
-        height: 40px;
-        border-radius: 10px;
-      }
-      .el-icon-caret-bottom {
-        position: absolute;
-        right: -20px;
-        top: 25px;
-        font-size: 12px;
-      }
-    }
-  }
-}
-</style>
-

diff --git a/src/api/dashboard.js b/src/api/dashboard.js
index e69de29..0a4ddfc 100644
--- a/src/api/dashboard.js
+++ b/src/api/dashboard.js
@@ -0,0 +1,73 @@
+/**
+ * 井总览模块接口
+ */
+import request from '@/utils/request'
+
+// 用水量、噪声统计数据
+export function getWatchStatistic() {
+  return request({
+    url: 'waterStatistic/overview',
+    method: 'get'
+  })
+}
+// 水表数量
+export function waterMeterCount() {
+  return request({
+    url: 'waterMeterData/count',
+    method: 'get'
+  })
+}
+// 阀门数量
+export function valveCount() {
+  return request({
+    url: 'waterMeterData/count',
+    method: 'get'
+  })
+}
+
+// 查询一级分区各区用水量
+export function countByFirstArea(params) {
+  return request({
+    url: 'waterStatistic/countByFirstArea',
+    method: 'get',
+    params
+  })
+}
+
+// 查询一级分区7日用水量
+export function countByDayFirst(params) {
+  return request({
+    url: 'waterStatistic/countByDayFirst',
+    method: 'get',
+    params
+  })
+}
+
+// 查询二级分区各区用水量
+export function countBySecondArea(params) {
+  return request({
+    url: 'waterStatistic/countBySecondArea',
+    method: 'get',
+    params
+  })
+}
+
+// 查询二级分区水表告警
+export function alarmBySecondArea(params) {
+  return request({
+    url: 'waterStatistic/alarmBySecondArea',
+    method: 'get',
+    params
+  })
+}
+
+// 设备7日报警趋势
+export function alarmCountByDay(params) {
+  return request({
+    url: 'waterStatistic/alarmCountByDay',
+    method: 'get',
+    params
+  })
+}
+
+
diff --git a/src/components/BigData/Card/index.vue b/src/components/BigData/Card/index.vue
index d71e609..45359c9 100644
--- a/src/components/BigData/Card/index.vue
+++ b/src/components/BigData/Card/index.vue
@@ -10,6 +10,7 @@
         </div>
         <div class="card-panel-num" >
           {{ context }}
+          <span style="font-size: 10px;color:#888">{{unit}}</span>
         </div>
       </div>
     </div>
@@ -39,6 +40,10 @@
     color: {
       type: String,
       default: '#40c9c6'
+    },
+    unit:{
+      type: String,
+      default:''
     }
   },
   computed: {
diff --git a/src/components/BigData/Card1/index.vue b/src/components/BigData/Card1/index.vue
index 030b2dc..aa46454 100644
--- a/src/components/BigData/Card1/index.vue
+++ b/src/components/BigData/Card1/index.vue
@@ -1,10 +1,11 @@
 <template>
   <el-card :body-style="{ padding: '0px' }" shadow="always">
-    <div class="card-panel" >
-      <div :style="backgroundColor" class="card-panel-icon-wrapper">
-        <svg-icon :icon-class="icon" class-name="card-panel-icon" />
+    <div class="card-panel">
+      <div v-if="icon" :style="backgroundColor" class="card-panel-icon-wrapper">
+        <svg-icon :icon-class="icon" class-name="card-panel-icon"/>
       </div>
-      <div  class="card-panel-description">
+      <div v-else style="float:left; width: 20px;height: 100%;"></div>
+      <div class="card-panel-description">
         <!-- <div class="card-panel-text">
           {{ title[0] }} <span class="card-panel-num">{{ context[0] }}</span>
         </div>
@@ -13,18 +14,20 @@
         </div> -->
         <div class="two" v-if="title.length===2">
           <div class="card-panel-text">
-            {{ title[0] }} <span class="card-panel-num">{{ context[0] }}</span>
+            {{ title[0] }} <span class="card-panel-num">{{ context[0] }}<span
+            style="font-size: 10px;color:#888;margin-left: 5px">{{unit}}</span></span>
           </div>
-          <div class="card-panel-text" >
-            {{ title[1] }} <span class="card-panel-num">{{ context[1] }}</span>
+          <div class="card-panel-text">
+            {{ title[1] }} <span class="card-panel-num">{{ context[1] }}<span
+            style="font-size: 10px;color:#888;margin-left: 5px">{{unit}}</span></span>
           </div>
         </div>
         <div class="only" v-else>
           <div class="card-panel-text">
             {{ title[0] }}
           </div>
-          <div class="card-panel-num" >
-            {{ context[0] }}
+          <div class="card-panel-num">
+            {{ context[0] }}<span style="font-size: 10px;color:#888">{{unit}}</span>
           </div>
         </div>
       </div>
@@ -33,42 +36,46 @@
 </template>
 
 <script>
-export default {
-  name: 'Card1',
-  props: {
-    title: {
-      type: Array,
-      default: function() {
-        return ['标题', '标题']
+  export default {
+    name: 'Card1',
+    props: {
+      title: {
+        type: Array,
+        default: function () {
+          return ['标题', '标题']
+        }
+      },
+      subtitle: {
+        type: String,
+        default: ''
+      },
+      icon: {
+        type: String,
+        default: ''
+      },
+      context: {
+        type: Array,
+        default: function () {
+          return ['--', '--']
+        }
+      },
+      color: {
+        type: String,
+        default: '#40c9c6'
+      },
+      unit: {
+        type: String,
+        default: ''
       }
     },
-    subtitle: {
-      type: String,
-      default: ''
-    },
-    icon: {
-      type: String,
-      default: ''
-    },
-    context: {
-      type: Array,
-      default: function() {
-        return ['--', '--']
-      }
-    },
-    color: {
-      type: String,
-      default: '#40c9c6'
-    }
-  },
-  computed: {
-    backgroundColor() {
-      return {
-        color: this.color
+    computed: {
+      backgroundColor() {
+        return {
+          color: this.color
+        }
       }
     }
   }
-}
 </script>
 
 <style lang="scss" scoped>
@@ -108,7 +115,7 @@
       overflow: auto;
       margin-left: 5px;
 
-      .two{
+      .two {
         .card-panel-text {
           line-height: 18px;
           color: rgba(0, 0, 0, 0.45);
@@ -123,7 +130,7 @@
           float: right;
         }
       }
-      .only{
+      .only {
         .card-panel-text {
           line-height: 18px;
           color: rgba(0, 0, 0, 0.45);
diff --git a/src/icons/svg/icon-noise.svg b/src/icons/svg/icon-noise.svg
new file mode 100644
index 0000000..00bef71
--- /dev/null
+++ b/src/icons/svg/icon-noise.svg
@@ -0,0 +1,2 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1648634383080" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2093" xmlns:xlink="http://www.w3.org/1999/xlink" width="128" height="128"><defs><style type="text/css">@font-face { font-family: feedback-iconfont; src: url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.woff2?t=1630033759944") format("woff2"), url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.woff?t=1630033759944") format("woff"), url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.ttf?t=1630033759944") format("truetype"); }
+</style></defs><path d="M875.039 549.868c-25.436 0-47.411 13.91-59.3 34.4h-125.9l-99.564-199.177-76.703 281.23-51.528-566.757-67.461-5.735-130.8 490.44H49.397v68.802h267.259l94.464-354.268 51.235 563.733 67.451 5.913 79.432-291.445 38.077 76.057h168.428c11.91 20.419 33.864 34.391 59.3 34.391 37.98 0 68.792-30.879 68.792-68.797-0.005-38.062-30.817-68.787-68.797-68.787z" p-id="2094"></path></svg>
\ No newline at end of file
diff --git a/src/icons/svg/icon-valve.svg b/src/icons/svg/icon-valve.svg
new file mode 100644
index 0000000..f5d96e2
--- /dev/null
+++ b/src/icons/svg/icon-valve.svg
@@ -0,0 +1,2 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1648634707805" class="icon" viewBox="0 0 1090 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3809" xmlns:xlink="http://www.w3.org/1999/xlink" width="136.25" height="128"><defs><style type="text/css">@font-face { font-family: feedback-iconfont; src: url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.woff2?t=1630033759944") format("woff2"), url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.woff?t=1630033759944") format("woff"), url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.ttf?t=1630033759944") format("truetype"); }
+</style></defs><path d="M502.944 296.975V143.052h-231.98c-31.587 0-57.321-24.93-57.321-55.526 0-30.598 25.75-55.526 57.321-55.526H833.06c31.571 0 57.306 24.93 57.306 55.525 0 30.922-25.735 55.526-57.29 55.526h-231.64v153.924h18.179c21.615 0 39.112 16.955 39.112 37.904v90.565l-213.105-0.34v-90.225c0-20.95 17.497-37.904 39.128-37.904h18.194z m-381.74 590.293v63.84c0 9.306-7.834 16.955-17.698 16.955H58.231c-9.862-0.001-17.698-7.65-17.698-17.296V542.472c0-9.63 7.835-17.28 17.698-17.28h45.274c9.863 0 17.698 7.65 17.698 17.28v83.133h150.55c6.272-85.518 79.247-152.95 168.387-152.95h207.98c89.14 0 162.116 67.432 168.403 152.95h150.873v-83.798c0-9.29 7.495-16.615 17.033-16.615h46.297c9.523 0 17.001 7.308 17.001 16.615v409.625c0.341 9.321-7.478 16.63-17.016 16.63h-46.297c-9.523 0-17.018-7.309-17.018-16.63v-64.165H805.36C780.755 948.583 719.655 992 648.119 992H440.142c-71.52 0-132.635-43.402-157.239-104.733H121.204z" p-id="3810"></path></svg>
\ No newline at end of file
diff --git a/src/views/dashboard/components/PanelGroup.vue b/src/views/dashboard/components/PanelGroup.vue
index b72d289..332cbf9 100644
--- a/src/views/dashboard/components/PanelGroup.vue
+++ b/src/views/dashboard/components/PanelGroup.vue
@@ -1,12 +1,12 @@
 <template>
   <el-row class="panel-group">
     <div v-for="card in dataGroup1" :key="card.index" class="card-panel-col">
-      <card1 :title="card.title" :context="card.context" :icon="card.icon" :color="card.color"/>
+      <card1 :title="card.title" :context="card.context" :icon="card.icon" :color="card.color" :unit="card.unit"/>
     </div>
 
     <div v-for="card in dataGroup" :key="card.title" class="card-panel-col">
       <div v-if="hasPerm(card.permission)">
-        <card :title="card.title" :context="card.context" :icon="card.icon" :color="card.color" @click.native="goPage(card.path)"/>
+        <card :title="card.title" :context="card.context" :icon="card.icon" :unit="card.unit" :color="card.color" @click.native="goPage(card.path)"/>
       </div>
     </div>
   </el-row>
@@ -16,7 +16,7 @@
 import Card1 from '@/components/BigData/Card1'
 import Card from '@/components/BigData/Card'
 // 首页
-import { getWatchStatistic , waterMeterCount } from '@/api/overview'
+import { getWatchStatistic , waterMeterCount, valveCount } from '@/api/dashboard'
 // 根据布防数量统计井数量
 import { wellCountByBfzt } from '@/api/well'
 // 当前报警数
@@ -36,30 +36,33 @@
           context: ['--', '--'],
           icon: 'icon-water',
           color: '#40c9c6',
+          unit: '吨',
           index: 0
         },
         {
-          title: ['今日用水量', '昨日用水量'],
+          title: ['今日用水量', '生产厂区用水量'],
           context: ['--', '--'],
-          icon: 'icon-water',
+          icon: '',
           color: '#36a3f7',
+          unit: '吨',
           index: 1
         },
         {
-          title: ['实时噪声'],
+          title: ['滑道实时噪声'],
           context: ['--'],
-          icon: 'icon-device',
+          icon: 'icon-noise',
           color: '#f1c353',
+          unit: 'db',
           index: 2
         }
       ],
       dataGroup: [
         {
-          title: '设备总数',
+          title: '阀门数量',
           context: '--',
-          icon: 'icon-device',
+          icon: 'icon-valve',
           color: '#40c9c6',
-          path: '/deviceList',
+          path: '/deviceList?deviceType=20',
           permission: '/device/list'
         },
         {
@@ -67,11 +70,11 @@
           context: '--',
           icon: 'icon-watch',
           color: '#9694f7',
-          path: '/deviceList',
+          path: '/deviceList?deviceType=13',
           permission: '/device/list'
         },
         {
-          title: '当前报警数',
+          title: '报警信息',
           context: '--',
           icon: 'icon-alarm',
           color: '#f4516c',
@@ -83,10 +86,10 @@
   },
   mounted() {
     this.getWater()
-    this.getWellCount()
+    // this.getWellCount()
     this.getDeviceCount()
     this.getAlarmCount()
-    this.getJobCount()
+    // this.getJobCount()
   },
   methods: {
     refresh() {
@@ -97,24 +100,31 @@
       this.$router.push(path)
     },
     getWater() {
+      // 用水量
       getWatchStatistic().then(response => {
-        this.dataGroup1[0].context = [response.data.total, response.data.month]
-        this.dataGroup1[1].context = [response.data.today, response.data.yesterday]
-        this.dataGroup1[2].context = [Number(response.data.sound).toFixed(2)]
+        this.dataGroup1[0].context = [response.data.total?parseFloat(response.data.total).toFixed(0):'--', response.data.month?parseFloat(response.data.month).toFixed(0):'--']
+        this.dataGroup1[1].context = [response.data.today?parseFloat(response.data.today).toFixed(0):'--', response.data.yesterday?parseFloat(response.data.yesterday).toFixed(0):'--']
+        this.dataGroup1[2].context = [response.data.sound?Number(response.data.sound).toFixed(2):'--']
       })
-      waterMeterCount().then(response => {
-        this.dataGroup[1].context = response.data
-      })
+
     },
-    getWellCount() {
-      wellCountByBfzt().then(response => {
-        this.dataGroup[0].context = response.data.total
-      })
-    },
+    // getWellCount() {
+    //   wellCountByBfzt().then(response => {
+    //     this.dataGroup[0].context = response.data.total
+    //   })
+    // },
     getDeviceCount() {
       // deviceStaticByStatus().then(response => {
       //   this.dataGroup[1].context = response.data.total
       // })
+      // 阀门数量
+      valveCount().then(response => {
+        this.dataGroup[0].context = response.data
+      })
+      // 水表数量
+      waterMeterCount().then(response => {
+        this.dataGroup[1].context = response.data
+      })
     },
     getAlarmCount() {
       alarmNowStatic().then(response => {
@@ -159,7 +169,7 @@
   //   &:hover {
   //     .card-panel-icon-wrapper {
   //       color: #fff;
-        
+
   //     }
 
   //     .icon-people {
diff --git a/src/views/dashboard/components/waterCountByAreaBar.vue b/src/views/dashboard/components/waterCountByAreaBar.vue
index 1bdac48..c488923 100644
--- a/src/views/dashboard/components/waterCountByAreaBar.vue
+++ b/src/views/dashboard/components/waterCountByAreaBar.vue
@@ -1,9 +1,10 @@
 <template>
   <div class="container">
     <div class="statistic-container">
+      <el-button round size="mini" @click="setDefaultTime('year')">本年</el-button>
+      <el-button round size="mini" @click="setDefaultTime('season')">本季</el-button>
       <el-button round size="mini" @click="setDefaultTime('month')">本月</el-button>
-      <el-button round size="mini" @click="setDefaultTime('week')">近7日</el-button>
-      <el-button round size="mini" @click="setDefaultTime('yesterday')">昨日</el-button>
+      <el-button round size="mini" @click="setDefaultTime('week')">本周</el-button>
       <el-button round size="mini" @click="setDefaultTime('today')">今日</el-button>
       <el-date-picker
         v-model="timeRange"
@@ -107,7 +108,7 @@
   },
   mounted() {
     this.setDefaultTime('today')
-    this.fetchArea()
+    // this.fetchArea()
   },
   methods: {
     fetchArea() {
@@ -130,10 +131,11 @@
     },
     fetchData() {
       const params = {
-        areaId: this.areaId,
+        areaId: '110000',
         startTime: this.timeRange[0],
         endTime: this.timeRange[1]
       }
+      this.$emit('change', params)
       countBySecondArea(params).then(response => {
         this.isShow = false
         this.chartData.rows = response.data
@@ -153,7 +155,21 @@
       })
     },
     setDefaultTime(val) {
-      if (val === 'month') {
+      if (val === 'year') {
+        var today = new Date()
+        var tYear = today.getFullYear()
+        const beginTime = tYear + '-01-01'
+        const endTime = getDayTime(new Date().getTime())
+        this.timeRange = [beginTime, endTime.Format('yyyy-MM-dd')]
+      }if (val === 'season') {
+        var today = new Date()
+        var tYear = today.getFullYear()
+        var tMonth = today.getMonth() + 1
+        const oldMonth = tMonth<4?'01':(tMonth<7?'04':(tMonth<10?'07':'10'))
+        const beginTime = tYear + '-' + oldMonth + '-01'
+        const endTime = getDayTime(new Date().getTime())
+        this.timeRange = [beginTime, endTime.Format('yyyy-MM-dd')]
+      }else if (val === 'month') {
         var today = new Date()
         var tYear = today.getFullYear()
         var tMonth = today.getMonth() + 1
@@ -164,7 +180,8 @@
         const endTime = getDayTime(new Date().getTime())
         this.timeRange = [beginTime, endTime.Format('yyyy-MM-dd')]
       } else if (val === 'week') {
-        this.timeRange = [getDayTime(new Date().getTime() - 24 * 6 * 60 * 60 * 1000).Format('yyyy-MM-dd'), getDayTime(new Date().getTime()).Format('yyyy-MM-dd')]
+        const nowDayOfWeek =  new Date().getDay()-1
+        this.timeRange = [getDayTime(new Date().getTime() - 24 * nowDayOfWeek * 60 * 60 * 1000).Format('yyyy-MM-dd'), getDayTime(new Date().getTime()).Format('yyyy-MM-dd')]
       } else if (val === 'yesterday') {
         this.timeRange = [getDayTime(new Date().getTime() - 24 * 60 * 60 * 1000).Format('yyyy-MM-dd'), getDayTime(new Date().getTime() - 24 * 60 * 60 * 1000).Format('yyyy-MM-dd')]
       } else if (val === 'today') {
diff --git a/src/views/dashboard/components/waterCountByDay.vue b/src/views/dashboard/components/waterCountByDay.vue
index 8e12f02..78d1f7c 100644
--- a/src/views/dashboard/components/waterCountByDay.vue
+++ b/src/views/dashboard/components/waterCountByDay.vue
@@ -1,12 +1,12 @@
 <template>
   <div class="container">
-    <div class="function">
-      <el-button round size="mini" @click="changeTime('year')">近1年</el-button>
-      <el-button round size="mini" @click="changeTime('halfyear')">近6月</el-button>
-      <el-button round size="mini" @click="changeTime('3month')">近3月</el-button>
-      <el-button round size="mini" @click="changeTime('month')">近1月</el-button>
-      <el-button round size="mini" @click="changeTime('week')">近1周</el-button>
-    </div>
+    <!--<div class="function">-->
+      <!--<el-button round size="mini" @click="changeTime('year')">近1年</el-button>-->
+      <!--<el-button round size="mini" @click="changeTime('halfyear')">近6月</el-button>-->
+      <!--<el-button round size="mini" @click="changeTime('3month')">近3月</el-button>-->
+      <!--<el-button round size="mini" @click="changeTime('month')">近1月</el-button>-->
+      <!--<el-button round size="mini" @click="changeTime('week')">近1周</el-button>-->
+    <!--</div>-->
     <ve-line :data="chartData" :title="title" :extend="extend" :settings="chartSettings"/>
   </div>
 </template>
@@ -17,6 +17,18 @@
 import { getDoorAreaTree } from '@/api/system/area'
 export default {
   name: 'WaterCountByDay',
+  props:{
+    query: {
+      type: Object,
+      default:()=>{
+        return {
+          areaId: '',
+          startTime: '',
+          endTime: ''
+        }
+      }
+    }
+  },
   data() {
     return {
       listQuery: {
@@ -52,8 +64,13 @@
     }
   },
   mounted() {
-    this.changeTime('month')
-    this.fetchArea()
+    // this.changeTime('month')
+    // this.fetchArea()
+  },
+  watch:{
+    query(val){
+      this.fetchData()
+    }
   },
   methods: {
     fetchArea() {
@@ -73,7 +90,7 @@
       })
     },
     fetchData() {
-      countByDayFirst(this.listQuery).then(response => {
+      countByDayFirst(this.query).then(response => {
         const arr = response.data.map(function(item) {
           for (let i = 0; i < item.data.length; i++) {
             item[item.data[i].areaName] = item.data[i].count
diff --git a/src/views/dashboard/components/waterCountByDept.vue b/src/views/dashboard/components/waterCountByDept.vue
index a0c82cf..02e27cd 100644
--- a/src/views/dashboard/components/waterCountByDept.vue
+++ b/src/views/dashboard/components/waterCountByDept.vue
@@ -1,22 +1,22 @@
 <!--suppress ALL -->
 <template>
   <div class="container">
-    <div class="function">
-      <el-button round size="mini" @click="changeTime('year')">近1年</el-button>
-      <el-button round size="mini" @click="changeTime('halfyear')">近6月</el-button>
-      <el-button round size="mini" @click="changeTime('3month')">近3月</el-button>
-      <el-button round size="mini" @click="changeTime('month')">近1月</el-button>
-      <el-button round size="mini" @click="changeTime('week')">近1周</el-button>
-    </div>
+    <!--<div class="function">-->
+      <!--<el-button round size="mini" @click="changeTime('year')">近1年</el-button>-->
+      <!--<el-button round size="mini" @click="changeTime('halfyear')">近6月</el-button>-->
+      <!--<el-button round size="mini" @click="changeTime('3month')">近3月</el-button>-->
+      <!--<el-button round size="mini" @click="changeTime('month')">近1月</el-button>-->
+      <!--<el-button round size="mini" @click="changeTime('week')">近1周</el-button>-->
+    <!--</div>-->
     <ve-pie :data="chartData" :extend="extend" :title="title"/>
-    <div class="function">
-      <el-button
-        v-for="item in areaList"
-        :key="item.id"
-        round
-        @click="areaChange(item.id)"
-        size="mini">{{item.name}}</el-button>
-    </div>
+    <!--<div class="function">-->
+      <!--<el-button-->
+        <!--v-for="item in areaList"-->
+        <!--:key="item.id"-->
+        <!--round-->
+        <!--@click="areaChange(item.id)"-->
+        <!--size="mini">{{item.name}}</el-button>-->
+    <!--</div>-->
   </div>
 </template>
 
@@ -25,6 +25,18 @@
 import { getDoorAreaTree } from '@/api/system/area'
 export default {
   name: 'WaterCountByDepy',
+  props:{
+    query: {
+      type: Object,
+      default:()=>{
+        return {
+          areaId: '',
+          startTime: '',
+          endTime: ''
+        }
+      }
+    }
+  },
   data() {
     return {
       listQuery: {
@@ -69,7 +81,12 @@
   },
   mounted() {
     // TODO:待调试真接口
-    this.fetchArea()
+    // this.fetchArea()
+  },
+  watch:{
+    query(val){
+      this.fetchData()
+    }
   },
   methods: {
     fetchArea() {
@@ -104,8 +121,7 @@
       //   { 'areaName': '码头作业区', 'count': 78 },
       //   { 'areaName': '车间生产区', 'count': 78 }
       // ]
-      this.listQuery.areaId = this.areaId
-      countBySecondArea(this.listQuery).then(response => {
+      countBySecondArea(this.query).then(response => {
         this.chartData.rows = response.data
       })
     },
diff --git a/src/views/dashboard/components/waterNote.vue b/src/views/dashboard/components/waterNote.vue
new file mode 100644
index 0000000..aa0f448
--- /dev/null
+++ b/src/views/dashboard/components/waterNote.vue
@@ -0,0 +1,152 @@
+<!--suppress ALL -->
+<template>
+  <div class="container">
+    <div>
+      用水事记
+    </div>
+
+  </div>
+</template>
+
+<script>
+import { countBySecondArea } from '@/api/overview'
+import { getDoorAreaTree } from '@/api/system/area'
+export default {
+  name: 'WaterNote',
+  props:{
+    query: {
+      type: Object,
+      default:()=>{
+        return {
+          areaId: '',
+          startTime: '',
+          endTime: ''
+        }
+      }
+    }
+  },
+  data() {
+    return {
+      listQuery: {
+        areaId: '',
+        startTime: '',
+        endTime: ''
+      },
+      areaId:'',
+      areaList: [],
+      chartData: {
+        columns: ['areaName', 'count'],
+        rows: []
+      },
+      extend: {
+        grid: {
+          right: '30%'
+        },
+        legend: {
+          type: 'scroll',
+          top: '60px',
+          right: '0px',
+          orient: 'vertical'
+        },
+        series: {
+          label: { show: true, position: 'outside', formatter: '{b}' },
+          right: 120
+        },
+        tooltip: { trigger: 'item', formatter: '{b}<br/>用水量：{c}吨<br/>占比：{d}%' }
+      },
+      title: {
+        text: '分区用水占比图'
+      },
+      chartSettings: {
+        labelMap: {
+          'areaName': '分区',
+          'count': '用水量'
+        },
+        dimension: 'areaName',
+        metrics: 'count'
+      }
+    }
+  },
+  mounted() {
+    // TODO:待调试真接口
+    // this.fetchArea()
+  },
+  watch:{
+    query(val){
+      this.fetchData()
+    }
+  },
+  methods: {
+    fetchArea() {
+      getDoorAreaTree().then(response => {
+        if (response.code === 200) {
+          this.areaList = response.data.filter(item => {
+            return item.pid === '1'
+          }).map(function(item) {
+            return {
+              id: item.id, name: item.name
+            }
+          })
+          if (this.areaList.length !== 0) { this.areaChange(this.areaList[0].id) }
+        }
+      })
+    },
+    areaChange(val){
+      this.areaId = val
+      this.fetchData()
+    },
+    // 获取统计数据
+    fetchData() {
+      // this.chartData.rows = [
+      //   { 'areaName': '科技楼及食堂', 'count': 53 },
+      //   { 'areaName': 'A\\B\\C\\D\\E座', 'count': 78 },
+      //   { 'areaName': '厂区', 'count': 78 },
+      //   { 'areaName': '分段分区', 'count': 78 },
+      //   { 'areaName': '船坞分区', 'count': 78 },
+      //   { 'areaName': '刀把码头', 'count': 78 },
+      //   { 'areaName': '制管作业区', 'count': 78 },
+      //   { 'areaName': '滑道作业区', 'count': 78 },
+      //   { 'areaName': '码头作业区', 'count': 78 },
+      //   { 'areaName': '车间生产区', 'count': 78 }
+      // ]
+      countBySecondArea(this.query).then(response => {
+        this.chartData.rows = response.data
+      })
+    },
+    changeTime(timeType) {
+      let startTime
+      switch (timeType) {
+        case 'year':
+          startTime = getDayTime(new Date().getTime() - 24 * 365 * 60 * 60 * 1000)
+          this.listQuery.startTime = startTime.Format('yyyy-MM-dd')
+          break
+        case 'halfyear':
+          startTime = getDayTime(new Date().getTime() - 24 * 182 * 60 * 60 * 1000)
+          this.listQuery.startTime = startTime.Format('yyyy-MM-dd')
+          break
+        case '3month':
+          startTime = getDayTime(new Date().getTime() - 24 * 90 * 60 * 60 * 1000)
+          this.listQuery.startTime = startTime.Format('yyyy-MM-dd')
+          break
+        case 'month':
+          startTime = getDayTime(new Date().getTime() - 24 * 30 * 60 * 60 * 1000)
+          this.listQuery.startTime = startTime.Format('yyyy-MM-dd')
+          break
+        case 'week':
+          startTime = getDayTime(new Date().getTime() - 24 * 7 * 60 * 60 * 1000)
+          this.listQuery.startTime = startTime.Format('yyyy-MM-dd')
+          break
+      }
+      const endTime = new Date()
+      this.listQuery.endTime = endTime.Format('yyyy-MM-dd')
+      this.fetchData()
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+  .container{
+    position:relative;
+    height: 455px;
+  }
+</style>
diff --git a/src/views/dashboard/index.vue b/src/views/dashboard/index.vue
index fdbc38a..831dbc3 100644
--- a/src/views/dashboard/index.vue
+++ b/src/views/dashboard/index.vue
@@ -1,31 +1,33 @@
 <template>
   <div class="dashboard-container" style="background-color: white">
     <panel-group ref="panelgroup"/>
-    <el-row :gutter="10">
+    <el-row>
       <!-- 用水统计图 -->
+      <el-col :span="18">
+        <el-card shadow="never">
+          <water-count-by-area-bar @change="changeWaterQuery"/>
+        </el-card>
+      </el-col>
+      <el-col :span="6">
+        <el-card shadow="never">
+          <water-note/>
+        </el-card>
+      </el-col>
+    </el-row>
+    <el-row>
+      <!-- 分区用水占比图 -->
       <el-col :span="12">
         <el-card shadow="never">
-          <water-count-by-dept-bar/>
+          <water-count-by-dept :query="listQuery1" ref="waterCountPie"/>
         </el-card>
       </el-col>
       <!-- 用水走势图 -->
       <el-col :span="12">
         <el-card shadow="never">
-          <water-count-by-day/>
+          <water-count-by-day :query="listQuery1" ref="waterCountDay"/>
         </el-card>
       </el-col>
-      <!-- 分区用水统计图 -->
-      <el-col :span="12">
-        <el-card shadow="never">
-          <water-count-by-area-bar/>
-        </el-card>
-      </el-col>
-      <!-- 分区用水占比图 -->
-      <el-col :span="12">
-        <el-card shadow="never">
-          <water-count-by-depy/>
-        </el-card>
-      </el-col>
+
       <!--水表报警次数统计-->
       <el-col v-if="hasPerm('/statics/alarmsByDay')" :span="12">
         <el-card shadow="never">
@@ -64,20 +66,22 @@
 import DeviceCountByOnline from './components/DeviceCountByOnline'
 import AlarmByDays from './components/AlarmByDays'
 import JobByStatus from './components/JobByStatus'
-import WaterCountByDepy from './components/waterCountByDept'
+import WaterCountByDept from './components/waterCountByDept'
 import WaterCountByDeptBar from './components/waterCountByDeptBar'
 import WaterCountByDay from './components/waterCountByDay'
 import WaterCountByAreaBar from "./components/waterCountByAreaBar";
 import WatchAlarmBar from "./components/watchAlarmBar";
+import WaterNote from "./components/waterNote";
 
 export default {
   name: 'Dashboard',
   components: {
+    WaterNote,
     WatchAlarmBar,
     WaterCountByAreaBar,
     WaterCountByDay,
     WaterCountByDeptBar,
-    WaterCountByDepy,
+    WaterCountByDept,
     JobByStatus,
     AlarmByDays,
     PanelGroup,
@@ -108,12 +112,25 @@
       state.needRefresh = needRefresh
     }
   },
+  data(){
+    return {
+      listQuery1:{
+        areaId:'110000',
+        startTime:new Date().Format('yyyy-MM-dd'),
+        endTime:new Date().Format('yyyy-MM-dd')
+      },// 分区用水量查询条件
+      listQuery2:{
+        areaId:'',
+        startTime:'',
+        endTime:''
+      } // 分区报警查询条件
+    }
+  },
   watch: {
     needRefresh(val) {
       // 需要刷新
       if (val) {
         console.log('refresh dashboard')
-        debugger
         this.$refs.panelgroup.refresh()
       }
     }
@@ -124,6 +141,10 @@
   methods: {
     webSocket() {
       this.$store.dispatch('initWebSocket')
+    },
+    // 切换分区查询条件
+    changeWaterQuery(listQuery1){
+      this.listQuery1 = listQuery1
     }
   }
 }
diff --git a/src/views/dashboard/index_bak.vue b/src/views/dashboard/index_bak.vue
new file mode 100644
index 0000000..fdbc38a
--- /dev/null
+++ b/src/views/dashboard/index_bak.vue
@@ -0,0 +1,149 @@
+<template>
+  <div class="dashboard-container" style="background-color: white">
+    <panel-group ref="panelgroup"/>
+    <el-row :gutter="10">
+      <!-- 用水统计图 -->
+      <el-col :span="12">
+        <el-card shadow="never">
+          <water-count-by-dept-bar/>
+        </el-card>
+      </el-col>
+      <!-- 用水走势图 -->
+      <el-col :span="12">
+        <el-card shadow="never">
+          <water-count-by-day/>
+        </el-card>
+      </el-col>
+      <!-- 分区用水统计图 -->
+      <el-col :span="12">
+        <el-card shadow="never">
+          <water-count-by-area-bar/>
+        </el-card>
+      </el-col>
+      <!-- 分区用水占比图 -->
+      <el-col :span="12">
+        <el-card shadow="never">
+          <water-count-by-depy/>
+        </el-card>
+      </el-col>
+      <!--水表报警次数统计-->
+      <el-col v-if="hasPerm('/statics/alarmsByDay')" :span="12">
+        <el-card shadow="never">
+          <watch-alarm-bar/>
+        </el-card>
+      </el-col>
+      <!--报警次数统计-->
+      <el-col v-if="hasPerm('/statics/alarmsByDay')" :span="12">
+        <el-card shadow="never">
+          <alarm-by-days/>
+        </el-card>
+      </el-col>
+      <!--设备在线数量统计-->
+      <el-col v-if="hasPerm('/statics/deviceStaticsByType')" :span="12">
+        <el-card shadow="never">
+          <device-count-by-online/>
+        </el-card>
+      </el-col>
+
+      <!--设备数量统计-->
+      <el-col v-if="hasPerm('/statics/deviceStaticsByType')" :span="12">
+        <el-card shadow="never">
+          <device-count/>
+        </el-card>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+import PanelGroup from './components/PanelGroup'
+import WellCountByBfzt from './components/WellCountByBfzt'
+import WellCountByType from './components/WellCountByType'
+import DeviceCount from './components/DeviceCount'
+import DeviceCountByOnline from './components/DeviceCountByOnline'
+import AlarmByDays from './components/AlarmByDays'
+import JobByStatus from './components/JobByStatus'
+import WaterCountByDepy from './components/waterCountByDept'
+import WaterCountByDeptBar from './components/waterCountByDeptBar'
+import WaterCountByDay from './components/waterCountByDay'
+import WaterCountByAreaBar from "./components/waterCountByAreaBar";
+import WatchAlarmBar from "./components/watchAlarmBar";
+
+export default {
+  name: 'Dashboard',
+  components: {
+    WatchAlarmBar,
+    WaterCountByAreaBar,
+    WaterCountByDay,
+    WaterCountByDeptBar,
+    WaterCountByDepy,
+    JobByStatus,
+    AlarmByDays,
+    PanelGroup,
+    WellCountByBfzt,
+    WellCountByType,
+    DeviceCount,
+    DeviceCountByOnline
+  },
+  computed: {
+    ...mapGetters([
+      'name',
+      'roleNames',
+      'roleTips',
+      'wellTypes',
+      'deviceTypes',
+      'communications',
+      'area'
+    ])
+  },
+  mutations: {
+    SET_WEBSOCKET: (state, websocket) => {
+      state.websocket = websocket
+    },
+    SET_WS_STATUS: (state, wsStatus) => {
+      state.wsStatus = wsStatus
+    },
+    SET_NEED_REFRESH: (state, needRefresh) => {
+      state.needRefresh = needRefresh
+    }
+  },
+  watch: {
+    needRefresh(val) {
+      // 需要刷新
+      if (val) {
+        console.log('refresh dashboard')
+        debugger
+        this.$refs.panelgroup.refresh()
+      }
+    }
+  },
+  mounted() {
+    // this.webSocket()
+  },
+  methods: {
+    webSocket() {
+      this.$store.dispatch('initWebSocket')
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.dashboard-container{
+  .el-row{
+    .el-col{
+      margin-bottom: 10px;
+    }
+  }
+}
+.dashboard {
+  &-container {
+    padding: 10px 20px;
+  }
+  &-text {
+    font-size: 30px;
+    line-height: 46px;
+  }
+}
+</style>
diff --git a/src/views/layout/Layout.vue b/src/views/layout/Layout.vue
deleted file mode 100644
index 7c3d46d..0000000
--- a/src/views/layout/Layout.vue
+++ /dev/null
@@ -1,111 +0,0 @@
-<template>
-  <el-container :class="classObj" class="app-wrapper">
-    <div v-if="device==='mobile'&&sidebar.opened" class="drawer-bg" @click="handleClickOutside"/>
-    <app-header class="app-header"/>
-    <el-main class="app-body">
-      <!--侧边栏-->
-      <sidebar class="sidebar-container"/>
-      <!--右半部分-->
-      <div :class="{hasTagsView:needTagsView}" class="main-container">
-        <!--开启固定头部设置-->
-        <div v-if="fixedHeader">
-          <!--导航(面包屑)-->
-          <navbar/>
-          <!--标签栏-->
-          <tags-view v-if="needTagsView" />
-          <!--主内容包裹在el-scrollbar中-->
-          <el-scrollbar class="no-head-scrollbar">
-            <app-main/>
-          </el-scrollbar>
-        </div>
-        <!--为开始固定头部设置-->
-        <div v-else>
-          <!--导航，tagsView都包裹在el-scrollbar中-->
-          <el-scrollbar class="has-head-scrollbar">
-            <navbar/>
-            <tags-view v-if="needTagsView" />
-            <app-main/>
-          </el-scrollbar>
-        </div>
-        <!--悬浮框-->
-        <right-panel v-if="false">
-          <settings />
-        </right-panel>
-      </div>
-    </el-main>
-  </el-container>
-</template>
-
-<script>
-import RightPanel from '@/components/RightPanel'
-import { AppHeader, Navbar, Sidebar, AppMain } from './components'
-import ResizeMixin from './mixin/ResizeHandler'
-import TagsView from './components/TagsView/index'
-import { mapState } from 'vuex'
-import Settings from './components/Settings/index'
-
-export default {
-  name: 'Layout',
-  components: {
-    Settings,
-    TagsView,
-    AppHeader,
-    Navbar,
-    Sidebar,
-    AppMain,
-    RightPanel
-  },
-  mixins: [ResizeMixin],
-  computed: {
-    ...mapState({
-      sidebar: state => state.app.sidebar,
-      device: state => state.app.device,
-      showSettings: state => state.settings.showSettings,
-      needTagsView: state => state.settings.tagsView,
-      fixedHeader: state => state.settings.fixedHeader
-    }),
-    classObj() {
-      return {
-        hideSidebar: !this.sidebar.opened,
-        openSidebar: this.sidebar.opened,
-        withoutAnimation: this.sidebar.withoutAnimation,
-        mobile: this.device === 'mobile'
-      }
-    }
-  },
-  methods: {
-    handleClickOutside() {
-      this.$store.dispatch('CloseSideBar', { withoutAnimation: false })
-    }
-  }
-}
-</script>
-
-<style rel="stylesheet/scss" lang="scss" scoped>
-  @import "src/styles/mixin.scss";
-  .app-wrapper {
-    @include clearfix;
-    position: relative;
-    height: 100%;
-    width: 100%;
-    &.mobile.openSidebar{
-      position: fixed;
-      top: 0;
-    }
-  }
-  .drawer-bg {
-    background: #000;
-    opacity: 0.3;
-    width: 100%;
-    top: 0;
-    height: 100%;
-    position: absolute;
-    z-index: 999;
-  }
-  /*.el-scrollbar{*/
-    /*height: calc(100vh - 50px);*/
-  /*}*/
-  .has-head-scrollbar{
-    height: 100vh;
-  }
-</style>
diff --git a/src/views/layout/components/AppHeader.vue b/src/views/layout/components/AppHeader.vue
deleted file mode 100644
index 8d8912e..0000000
--- a/src/views/layout/components/AppHeader.vue
+++ /dev/null
@@ -1,151 +0,0 @@
-<template>
-  <el-header class="app-header">
-    <h3>{{ title }}</h3>
-    <!--子系统选项-->
-    <el-dropdown v-if="showChangeSys" class="systemSelect" size="medium" @command="handleCommand">
-      <span class="el-dropdown-link">{{ currentSystem.name }}<i class="el-icon-arrow-down el-icon--right"/>
-      </span>
-      <el-dropdown-menu slot="dropdown">
-        <el-dropdown-item v-for="system in systems" :command="system" :key="system.id">{{ system.name }}</el-dropdown-item>
-      </el-dropdown-menu>
-    </el-dropdown>
-    <el-dropdown class="dropdown-container" trigger="click">
-      <div class="dropdown-wrapper">
-        <span style="line-height:50px;">欢迎您，{{ name }}</span>
-        <!--<img :src="avatar+'?imageView2/1/w/80/h/80'" class="user-avatar">-->
-        <i class="el-icon-arrow-down"/>
-      </div>
-      <el-dropdown-menu slot="dropdown" class="user-dropdown">
-        <el-dropdown-item v-if="!baseConfig.singleSys">
-          <span style="display:block;" @click="backToIndex">回首页</span>
-        </el-dropdown-item>
-        <el-dropdown-item :divided="!baseConfig.singleSys">
-          <span style="display:block;" @click="resetPwd">修改密码</span>
-        </el-dropdown-item>
-        <el-dropdown-item divided>
-          <span style="display:block;" @click="logout">注销</span>
-        </el-dropdown-item>
-      </el-dropdown-menu>
-    </el-dropdown>
-    <reset-pwd v-show="showSetPwd" ref="retPwd"/>
-  </el-header>
-</template>
-
-<script>
-import { mapGetters } from 'vuex'
-import ResetPwd from '@/views/system/user/resetPwd'
-
-export default {
-  name: 'AppHeader',
-  components: { ResetPwd },
-  data() {
-    return {
-      title: this.baseConfig.title, // 标题
-      showChangeSys: !this.baseConfig.singleSys, // 是否显示切换系统菜单
-      name: this.$store.getters.name, // 用户姓名
-      showSetPwd: false // 是否显示修改密码按钮
-    }
-  },
-  computed: {
-    ...mapGetters([
-      'sidebar',
-      'avatar',
-      'currentSystem',
-      'systems'
-    ])
-  },
-  created() {
-    if (!this.baseConfig.singleSys) {
-      this.getSystems()
-    }
-  },
-  methods: {
-    toggleSideBar() {
-      this.$store.dispatch('ToggleSideBar')
-    },
-    logout() {
-      this.$store.dispatch('LogOut').then(() => {
-        location.reload() // 为了重新实例化vue-router对象 避免bug
-      })
-    },
-    resetPwd() {
-      this.showSetPwd = true
-      this.$refs.retPwd.initDialog(true)
-    },
-    backToIndex() {
-      const url = this.baseConfig.mainPage
-      window.location.href = url
-    },
-    // 切换子系统
-    handleCommand(command) {
-      console.log('切换子系统:' + command.name)
-      const params1 = `?token=${this.$store.getters.token}`
-      const params = `?sys=${command.name}&url=${command.url}&code=${command.code}&token=${this.$store.getters.token}`
-      // 判断系统是不是http的，如果是则打开新窗口
-      if (command.url.indexOf('http') > -1) {
-      // 取token
-        if (this.baseConfig.sameWindow) {
-          window.location.href = command.url + params1
-        } else {
-          window.open(command.url + params1, '_blank')
-        }
-      } else {
-      // 取token
-        if (this.baseConfig.sameWindow) {
-          window.location.href = this.baseConfig.mainPage + command.url + params
-        } else {
-          window.open(this.baseConfig.mainPage + command.url + params, '_blank')
-        }
-      }
-    },
-    // 获取子系统
-    getSystems() {
-      this.$store.dispatch('GetSystems').then(() => {
-        console.log('获取子系统列表成功-appHeader')
-      })
-    }
-  }
-}
-</script>
-
-<style rel="stylesheet/scss" lang="scss" scoped>
-  h3{
-    margin-left:24px;
-    display: inline-block;
-    float:left;
-  }
-  .dropdown-container {
-    /*height: 50px;*/
-    display: inline-block;
-    float: right;
-    z-index:500;
-    position: fixed;
-    top:0px;
-    right: 35px;
-    .dropdown-wrapper {
-      cursor: pointer;
-      margin-top: 5px;
-      position: relative;
-      line-height: initial;
-      .user-avatar {
-        width: 40px;
-        height: 40px;
-        border-radius: 10px;
-      }
-      .el-icon-caret-bottom {
-        font-size: 12px;
-      }
-    }
-  }
-  .systemSelect{
-    height: 56px;
-    display: inline-block;
-    float: left;
-    z-index:500;
-    position: fixed;
-    margin-left:60px;
-    top:5px;
-    color:#fff;
-    line-height: 56px;
-  }
-</style>
diff --git a/src/views/layout/components/AppMain.vue b/src/views/layout/components/AppMain.vue
deleted file mode 100644
index 2ea268e..0000000
--- a/src/views/layout/components/AppMain.vue
+++ /dev/null
@@ -1,38 +0,0 @@
-<template>
-  <section class="app-main">
-    <transition name="fade-transform" mode="out-in">
-      <!-- or name="fade" -->
-      <!-- <router-view :key="key"></router-view> -->
-      <div>
-        <keep-alive>
-          <router-view v-if="$route.meta.keepAlive" :key="key"/>
-        </keep-alive>
-        <router-view v-if="!$route.meta.keepAlive" :key="key"/>
-      </div>
-    </transition>
-  </section>
-</template>
-
-<script>
-export default {
-  name: 'AppMain',
-  computed: {
-    key() {
-      if (this.$route.meta.keepAlive) {
-        return this.$route.name !== undefined ? this.$route.name : this.$route
-      } else {
-        return this.$route.name !== undefined ? this.$route.name + new Date() : this.$route + new Date()
-      }
-    }
-  }
-}
-</script>
-
-<style scoped>
-.app-main {
-  /*50 = navbar  */
-  /*min-height: calc(100vh - 50px);*/
-  position: relative;
-  overflow: hidden;
-}
-</style>
diff --git a/src/views/layout/components/Navbar.vue b/src/views/layout/components/Navbar.vue
deleted file mode 100644
index 24ea99b..0000000
--- a/src/views/layout/components/Navbar.vue
+++ /dev/null
@@ -1,78 +0,0 @@
-<template>
-  <div class="navbar">
-    <hamburger :toggle-click="toggleSideBar" :is-active="sidebar.opened" class="hamburger-container"/>
-    <breadcrumb />
-  </div>
-</template>
-
-<script>
-import { mapGetters } from 'vuex'
-import Breadcrumb from '@/components/Breadcrumb'
-import Hamburger from '@/components/Hamburger'
-
-export default {
-  components: {
-    Breadcrumb,
-    Hamburger
-  },
-  computed: {
-    ...mapGetters([
-      'sidebar'
-    ])
-  },
-  methods: {
-    toggleSideBar() {
-      this.$store.dispatch('ToggleSideBar')
-    },
-    logout() {
-      this.$store.dispatch('LogOut').then(() => {
-        location.reload() // 为了重新实例化vue-router对象 避免bug
-      })
-    }
-  }
-}
-</script>
-
-<style rel="stylesheet/scss" lang="scss" scoped>
-.navbar {
-  height: 50px;
-  line-height: 50px;
-  box-shadow: 0 1px 3px 0 rgba(0,0,0,.12), 0 0 3px 0 rgba(0,0,0,.04);
-  .hamburger-container {
-    text-align: center;
-    height: 50px;
-    float: left;
-    padding: 0 12px;
-  }
-  .screenfull {
-    position: absolute;
-    right: 90px;
-    top: 16px;
-    color: red;
-  }
-  .avatar-container {
-    height: 50px;
-    display: inline-block;
-    position: absolute;
-    right: 35px;
-    .avatar-wrapper {
-      cursor: pointer;
-      margin-top: 5px;
-      position: relative;
-      line-height: initial;
-      .user-avatar {
-        width: 40px;
-        height: 40px;
-        border-radius: 10px;
-      }
-      .el-icon-caret-bottom {
-        position: absolute;
-        right: -20px;
-        top: 25px;
-        font-size: 12px;
-      }
-    }
-  }
-}
-</style>
-
diff --git a/src/views/layout/components/Settings/index.vue b/src/views/layout/components/Settings/index.vue
deleted file mode 100644
index cf3023d..0000000
--- a/src/views/layout/components/Settings/index.vue
+++ /dev/null
@@ -1,109 +0,0 @@
-<template>
-  <div class="drawer-container">
-    <div>
-      <h3 class="drawer-title">Page style setting</h3>
-
-      <div class="drawer-item">
-        <span>Theme Color</span>
-        <theme-picker style="float: right;height: 26px;margin: -3px 8px 0 0;" @change="themeChange" />
-      </div>
-
-      <div class="drawer-item">
-        <span>Open Tags-View</span>
-        <el-switch v-model="tagsView" class="drawer-switch" />
-      </div>
-
-      <div class="drawer-item">
-        <span>Fixed Header</span>
-        <el-switch v-model="fixedHeader" class="drawer-switch" />
-      </div>
-
-      <div class="drawer-item">
-        <span>Sidebar Logo</span>
-        <el-switch v-model="sidebarLogo" class="drawer-switch" />
-      </div>
-
-    </div>
-  </div>
-</template>
-
-<script>
-import ThemePicker from '@/components/ThemePicker'
-
-export default {
-  name: 'Settings',
-  components: { ThemePicker },
-  data() {
-    return {}
-  },
-  computed: {
-    fixedHeader: {
-      get() {
-        return this.$store.state.settings.fixedHeader
-      },
-      set(val) {
-        this.$store.dispatch('settings/changeSetting', {
-          key: 'fixedHeader',
-          value: val
-        })
-      }
-    },
-    tagsView: {
-      get() {
-        return this.$store.state.settings.tagsView
-      },
-      set(val) {
-        this.$store.dispatch('settings/changeSetting', {
-          key: 'tagsView',
-          value: val
-        })
-      }
-    },
-    sidebarLogo: {
-      get() {
-        return this.$store.state.settings.sidebarLogo
-      },
-      set(val) {
-        this.$store.dispatch('settings/changeSetting', {
-          key: 'sidebarLogo',
-          value: val
-        })
-      }
-    }
-  },
-  methods: {
-    themeChange(val) {
-      this.$store.dispatch('settings/changeSetting', {
-        key: 'theme',
-        value: val
-      })
-    }
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-.drawer-container {
-  padding: 24px;
-  font-size: 14px;
-  line-height: 1.5;
-  word-wrap: break-word;
-
-  .drawer-title {
-    margin-bottom: 12px;
-    color: rgba(0, 0, 0, .85);
-    font-size: 14px;
-    line-height: 22px;
-  }
-
-  .drawer-item {
-    color: rgba(0, 0, 0, .65);
-    font-size: 14px;
-    padding: 12px 0;
-  }
-
-  .drawer-switch {
-    float: right
-  }
-}
-</style>

diff --git a/src/api/dashboard.js b/src/api/dashboard.js
index e69de29..0a4ddfc 100644
--- a/src/api/dashboard.js
+++ b/src/api/dashboard.js
@@ -0,0 +1,73 @@
+/**
+ * 井总览模块接口
+ */
+import request from '@/utils/request'
+
+// 用水量、噪声统计数据
+export function getWatchStatistic() {
+  return request({
+    url: 'waterStatistic/overview',
+    method: 'get'
+  })
+}
+// 水表数量
+export function waterMeterCount() {
+  return request({
+    url: 'waterMeterData/count',
+    method: 'get'
+  })
+}
+// 阀门数量
+export function valveCount() {
+  return request({
+    url: 'waterMeterData/count',
+    method: 'get'
+  })
+}
+
+// 查询一级分区各区用水量
+export function countByFirstArea(params) {
+  return request({
+    url: 'waterStatistic/countByFirstArea',
+    method: 'get',
+    params
+  })
+}
+
+// 查询一级分区7日用水量
+export function countByDayFirst(params) {
+  return request({
+    url: 'waterStatistic/countByDayFirst',
+    method: 'get',
+    params
+  })
+}
+
+// 查询二级分区各区用水量
+export function countBySecondArea(params) {
+  return request({
+    url: 'waterStatistic/countBySecondArea',
+    method: 'get',
+    params
+  })
+}
+
+// 查询二级分区水表告警
+export function alarmBySecondArea(params) {
+  return request({
+    url: 'waterStatistic/alarmBySecondArea',
+    method: 'get',
+    params
+  })
+}
+
+// 设备7日报警趋势
+export function alarmCountByDay(params) {
+  return request({
+    url: 'waterStatistic/alarmCountByDay',
+    method: 'get',
+    params
+  })
+}
+
+
diff --git a/src/components/BigData/Card/index.vue b/src/components/BigData/Card/index.vue
index d71e609..45359c9 100644
--- a/src/components/BigData/Card/index.vue
+++ b/src/components/BigData/Card/index.vue
@@ -10,6 +10,7 @@
         </div>
         <div class="card-panel-num" >
           {{ context }}
+          <span style="font-size: 10px;color:#888">{{unit}}</span>
         </div>
       </div>
     </div>
@@ -39,6 +40,10 @@
     color: {
       type: String,
       default: '#40c9c6'
+    },
+    unit:{
+      type: String,
+      default:''
     }
   },
   computed: {
diff --git a/src/components/BigData/Card1/index.vue b/src/components/BigData/Card1/index.vue
index 030b2dc..aa46454 100644
--- a/src/components/BigData/Card1/index.vue
+++ b/src/components/BigData/Card1/index.vue
@@ -1,10 +1,11 @@
 <template>
   <el-card :body-style="{ padding: '0px' }" shadow="always">
-    <div class="card-panel" >
-      <div :style="backgroundColor" class="card-panel-icon-wrapper">
-        <svg-icon :icon-class="icon" class-name="card-panel-icon" />
+    <div class="card-panel">
+      <div v-if="icon" :style="backgroundColor" class="card-panel-icon-wrapper">
+        <svg-icon :icon-class="icon" class-name="card-panel-icon"/>
       </div>
-      <div  class="card-panel-description">
+      <div v-else style="float:left; width: 20px;height: 100%;"></div>
+      <div class="card-panel-description">
         <!-- <div class="card-panel-text">
           {{ title[0] }} <span class="card-panel-num">{{ context[0] }}</span>
         </div>
@@ -13,18 +14,20 @@
         </div> -->
         <div class="two" v-if="title.length===2">
           <div class="card-panel-text">
-            {{ title[0] }} <span class="card-panel-num">{{ context[0] }}</span>
+            {{ title[0] }} <span class="card-panel-num">{{ context[0] }}<span
+            style="font-size: 10px;color:#888;margin-left: 5px">{{unit}}</span></span>
           </div>
-          <div class="card-panel-text" >
-            {{ title[1] }} <span class="card-panel-num">{{ context[1] }}</span>
+          <div class="card-panel-text">
+            {{ title[1] }} <span class="card-panel-num">{{ context[1] }}<span
+            style="font-size: 10px;color:#888;margin-left: 5px">{{unit}}</span></span>
           </div>
         </div>
         <div class="only" v-else>
           <div class="card-panel-text">
             {{ title[0] }}
           </div>
-          <div class="card-panel-num" >
-            {{ context[0] }}
+          <div class="card-panel-num">
+            {{ context[0] }}<span style="font-size: 10px;color:#888">{{unit}}</span>
           </div>
         </div>
       </div>
@@ -33,42 +36,46 @@
 </template>
 
 <script>
-export default {
-  name: 'Card1',
-  props: {
-    title: {
-      type: Array,
-      default: function() {
-        return ['标题', '标题']
+  export default {
+    name: 'Card1',
+    props: {
+      title: {
+        type: Array,
+        default: function () {
+          return ['标题', '标题']
+        }
+      },
+      subtitle: {
+        type: String,
+        default: ''
+      },
+      icon: {
+        type: String,
+        default: ''
+      },
+      context: {
+        type: Array,
+        default: function () {
+          return ['--', '--']
+        }
+      },
+      color: {
+        type: String,
+        default: '#40c9c6'
+      },
+      unit: {
+        type: String,
+        default: ''
       }
     },
-    subtitle: {
-      type: String,
-      default: ''
-    },
-    icon: {
-      type: String,
-      default: ''
-    },
-    context: {
-      type: Array,
-      default: function() {
-        return ['--', '--']
-      }
-    },
-    color: {
-      type: String,
-      default: '#40c9c6'
-    }
-  },
-  computed: {
-    backgroundColor() {
-      return {
-        color: this.color
+    computed: {
+      backgroundColor() {
+        return {
+          color: this.color
+        }
       }
     }
   }
-}
 </script>
 
 <style lang="scss" scoped>
@@ -108,7 +115,7 @@
       overflow: auto;
       margin-left: 5px;
 
-      .two{
+      .two {
         .card-panel-text {
           line-height: 18px;
           color: rgba(0, 0, 0, 0.45);
@@ -123,7 +130,7 @@
           float: right;
         }
       }
-      .only{
+      .only {
         .card-panel-text {
           line-height: 18px;
           color: rgba(0, 0, 0, 0.45);
diff --git a/src/icons/svg/icon-noise.svg b/src/icons/svg/icon-noise.svg
new file mode 100644
index 0000000..00bef71
--- /dev/null
+++ b/src/icons/svg/icon-noise.svg
@@ -0,0 +1,2 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1648634383080" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2093" xmlns:xlink="http://www.w3.org/1999/xlink" width="128" height="128"><defs><style type="text/css">@font-face { font-family: feedback-iconfont; src: url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.woff2?t=1630033759944") format("woff2"), url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.woff?t=1630033759944") format("woff"), url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.ttf?t=1630033759944") format("truetype"); }
+</style></defs><path d="M875.039 549.868c-25.436 0-47.411 13.91-59.3 34.4h-125.9l-99.564-199.177-76.703 281.23-51.528-566.757-67.461-5.735-130.8 490.44H49.397v68.802h267.259l94.464-354.268 51.235 563.733 67.451 5.913 79.432-291.445 38.077 76.057h168.428c11.91 20.419 33.864 34.391 59.3 34.391 37.98 0 68.792-30.879 68.792-68.797-0.005-38.062-30.817-68.787-68.797-68.787z" p-id="2094"></path></svg>
\ No newline at end of file
diff --git a/src/icons/svg/icon-valve.svg b/src/icons/svg/icon-valve.svg
new file mode 100644
index 0000000..f5d96e2
--- /dev/null
+++ b/src/icons/svg/icon-valve.svg
@@ -0,0 +1,2 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1648634707805" class="icon" viewBox="0 0 1090 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3809" xmlns:xlink="http://www.w3.org/1999/xlink" width="136.25" height="128"><defs><style type="text/css">@font-face { font-family: feedback-iconfont; src: url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.woff2?t=1630033759944") format("woff2"), url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.woff?t=1630033759944") format("woff"), url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.ttf?t=1630033759944") format("truetype"); }
+</style></defs><path d="M502.944 296.975V143.052h-231.98c-31.587 0-57.321-24.93-57.321-55.526 0-30.598 25.75-55.526 57.321-55.526H833.06c31.571 0 57.306 24.93 57.306 55.525 0 30.922-25.735 55.526-57.29 55.526h-231.64v153.924h18.179c21.615 0 39.112 16.955 39.112 37.904v90.565l-213.105-0.34v-90.225c0-20.95 17.497-37.904 39.128-37.904h18.194z m-381.74 590.293v63.84c0 9.306-7.834 16.955-17.698 16.955H58.231c-9.862-0.001-17.698-7.65-17.698-17.296V542.472c0-9.63 7.835-17.28 17.698-17.28h45.274c9.863 0 17.698 7.65 17.698 17.28v83.133h150.55c6.272-85.518 79.247-152.95 168.387-152.95h207.98c89.14 0 162.116 67.432 168.403 152.95h150.873v-83.798c0-9.29 7.495-16.615 17.033-16.615h46.297c9.523 0 17.001 7.308 17.001 16.615v409.625c0.341 9.321-7.478 16.63-17.016 16.63h-46.297c-9.523 0-17.018-7.309-17.018-16.63v-64.165H805.36C780.755 948.583 719.655 992 648.119 992H440.142c-71.52 0-132.635-43.402-157.239-104.733H121.204z" p-id="3810"></path></svg>
\ No newline at end of file
diff --git a/src/views/dashboard/components/PanelGroup.vue b/src/views/dashboard/components/PanelGroup.vue
index b72d289..332cbf9 100644
--- a/src/views/dashboard/components/PanelGroup.vue
+++ b/src/views/dashboard/components/PanelGroup.vue
@@ -1,12 +1,12 @@
 <template>
   <el-row class="panel-group">
     <div v-for="card in dataGroup1" :key="card.index" class="card-panel-col">
-      <card1 :title="card.title" :context="card.context" :icon="card.icon" :color="card.color"/>
+      <card1 :title="card.title" :context="card.context" :icon="card.icon" :color="card.color" :unit="card.unit"/>
     </div>
 
     <div v-for="card in dataGroup" :key="card.title" class="card-panel-col">
       <div v-if="hasPerm(card.permission)">
-        <card :title="card.title" :context="card.context" :icon="card.icon" :color="card.color" @click.native="goPage(card.path)"/>
+        <card :title="card.title" :context="card.context" :icon="card.icon" :unit="card.unit" :color="card.color" @click.native="goPage(card.path)"/>
       </div>
     </div>
   </el-row>
@@ -16,7 +16,7 @@
 import Card1 from '@/components/BigData/Card1'
 import Card from '@/components/BigData/Card'
 // 首页
-import { getWatchStatistic , waterMeterCount } from '@/api/overview'
+import { getWatchStatistic , waterMeterCount, valveCount } from '@/api/dashboard'
 // 根据布防数量统计井数量
 import { wellCountByBfzt } from '@/api/well'
 // 当前报警数
@@ -36,30 +36,33 @@
           context: ['--', '--'],
           icon: 'icon-water',
           color: '#40c9c6',
+          unit: '吨',
           index: 0
         },
         {
-          title: ['今日用水量', '昨日用水量'],
+          title: ['今日用水量', '生产厂区用水量'],
           context: ['--', '--'],
-          icon: 'icon-water',
+          icon: '',
           color: '#36a3f7',
+          unit: '吨',
           index: 1
         },
         {
-          title: ['实时噪声'],
+          title: ['滑道实时噪声'],
           context: ['--'],
-          icon: 'icon-device',
+          icon: 'icon-noise',
           color: '#f1c353',
+          unit: 'db',
           index: 2
         }
       ],
       dataGroup: [
         {
-          title: '设备总数',
+          title: '阀门数量',
           context: '--',
-          icon: 'icon-device',
+          icon: 'icon-valve',
           color: '#40c9c6',
-          path: '/deviceList',
+          path: '/deviceList?deviceType=20',
           permission: '/device/list'
         },
         {
@@ -67,11 +70,11 @@
           context: '--',
           icon: 'icon-watch',
           color: '#9694f7',
-          path: '/deviceList',
+          path: '/deviceList?deviceType=13',
           permission: '/device/list'
         },
         {
-          title: '当前报警数',
+          title: '报警信息',
           context: '--',
           icon: 'icon-alarm',
           color: '#f4516c',
@@ -83,10 +86,10 @@
   },
   mounted() {
     this.getWater()
-    this.getWellCount()
+    // this.getWellCount()
     this.getDeviceCount()
     this.getAlarmCount()
-    this.getJobCount()
+    // this.getJobCount()
   },
   methods: {
     refresh() {
@@ -97,24 +100,31 @@
       this.$router.push(path)
     },
     getWater() {
+      // 用水量
       getWatchStatistic().then(response => {
-        this.dataGroup1[0].context = [response.data.total, response.data.month]
-        this.dataGroup1[1].context = [response.data.today, response.data.yesterday]
-        this.dataGroup1[2].context = [Number(response.data.sound).toFixed(2)]
+        this.dataGroup1[0].context = [response.data.total?parseFloat(response.data.total).toFixed(0):'--', response.data.month?parseFloat(response.data.month).toFixed(0):'--']
+        this.dataGroup1[1].context = [response.data.today?parseFloat(response.data.today).toFixed(0):'--', response.data.yesterday?parseFloat(response.data.yesterday).toFixed(0):'--']
+        this.dataGroup1[2].context = [response.data.sound?Number(response.data.sound).toFixed(2):'--']
       })
-      waterMeterCount().then(response => {
-        this.dataGroup[1].context = response.data
-      })
+
     },
-    getWellCount() {
-      wellCountByBfzt().then(response => {
-        this.dataGroup[0].context = response.data.total
-      })
-    },
+    // getWellCount() {
+    //   wellCountByBfzt().then(response => {
+    //     this.dataGroup[0].context = response.data.total
+    //   })
+    // },
     getDeviceCount() {
       // deviceStaticByStatus().then(response => {
       //   this.dataGroup[1].context = response.data.total
       // })
+      // 阀门数量
+      valveCount().then(response => {
+        this.dataGroup[0].context = response.data
+      })
+      // 水表数量
+      waterMeterCount().then(response => {
+        this.dataGroup[1].context = response.data
+      })
     },
     getAlarmCount() {
       alarmNowStatic().then(response => {
@@ -159,7 +169,7 @@
   //   &:hover {
   //     .card-panel-icon-wrapper {
   //       color: #fff;
-        
+
   //     }
 
   //     .icon-people {
diff --git a/src/views/dashboard/components/waterCountByAreaBar.vue b/src/views/dashboard/components/waterCountByAreaBar.vue
index 1bdac48..c488923 100644
--- a/src/views/dashboard/components/waterCountByAreaBar.vue
+++ b/src/views/dashboard/components/waterCountByAreaBar.vue
@@ -1,9 +1,10 @@
 <template>
   <div class="container">
     <div class="statistic-container">
+      <el-button round size="mini" @click="setDefaultTime('year')">本年</el-button>
+      <el-button round size="mini" @click="setDefaultTime('season')">本季</el-button>
       <el-button round size="mini" @click="setDefaultTime('month')">本月</el-button>
-      <el-button round size="mini" @click="setDefaultTime('week')">近7日</el-button>
-      <el-button round size="mini" @click="setDefaultTime('yesterday')">昨日</el-button>
+      <el-button round size="mini" @click="setDefaultTime('week')">本周</el-button>
       <el-button round size="mini" @click="setDefaultTime('today')">今日</el-button>
       <el-date-picker
         v-model="timeRange"
@@ -107,7 +108,7 @@
   },
   mounted() {
     this.setDefaultTime('today')
-    this.fetchArea()
+    // this.fetchArea()
   },
   methods: {
     fetchArea() {
@@ -130,10 +131,11 @@
     },
     fetchData() {
       const params = {
-        areaId: this.areaId,
+        areaId: '110000',
         startTime: this.timeRange[0],
         endTime: this.timeRange[1]
       }
+      this.$emit('change', params)
       countBySecondArea(params).then(response => {
         this.isShow = false
         this.chartData.rows = response.data
@@ -153,7 +155,21 @@
       })
     },
     setDefaultTime(val) {
-      if (val === 'month') {
+      if (val === 'year') {
+        var today = new Date()
+        var tYear = today.getFullYear()
+        const beginTime = tYear + '-01-01'
+        const endTime = getDayTime(new Date().getTime())
+        this.timeRange = [beginTime, endTime.Format('yyyy-MM-dd')]
+      }if (val === 'season') {
+        var today = new Date()
+        var tYear = today.getFullYear()
+        var tMonth = today.getMonth() + 1
+        const oldMonth = tMonth<4?'01':(tMonth<7?'04':(tMonth<10?'07':'10'))
+        const beginTime = tYear + '-' + oldMonth + '-01'
+        const endTime = getDayTime(new Date().getTime())
+        this.timeRange = [beginTime, endTime.Format('yyyy-MM-dd')]
+      }else if (val === 'month') {
         var today = new Date()
         var tYear = today.getFullYear()
         var tMonth = today.getMonth() + 1
@@ -164,7 +180,8 @@
         const endTime = getDayTime(new Date().getTime())
         this.timeRange = [beginTime, endTime.Format('yyyy-MM-dd')]
       } else if (val === 'week') {
-        this.timeRange = [getDayTime(new Date().getTime() - 24 * 6 * 60 * 60 * 1000).Format('yyyy-MM-dd'), getDayTime(new Date().getTime()).Format('yyyy-MM-dd')]
+        const nowDayOfWeek =  new Date().getDay()-1
+        this.timeRange = [getDayTime(new Date().getTime() - 24 * nowDayOfWeek * 60 * 60 * 1000).Format('yyyy-MM-dd'), getDayTime(new Date().getTime()).Format('yyyy-MM-dd')]
       } else if (val === 'yesterday') {
         this.timeRange = [getDayTime(new Date().getTime() - 24 * 60 * 60 * 1000).Format('yyyy-MM-dd'), getDayTime(new Date().getTime() - 24 * 60 * 60 * 1000).Format('yyyy-MM-dd')]
       } else if (val === 'today') {
diff --git a/src/views/dashboard/components/waterCountByDay.vue b/src/views/dashboard/components/waterCountByDay.vue
index 8e12f02..78d1f7c 100644
--- a/src/views/dashboard/components/waterCountByDay.vue
+++ b/src/views/dashboard/components/waterCountByDay.vue
@@ -1,12 +1,12 @@
 <template>
   <div class="container">
-    <div class="function">
-      <el-button round size="mini" @click="changeTime('year')">近1年</el-button>
-      <el-button round size="mini" @click="changeTime('halfyear')">近6月</el-button>
-      <el-button round size="mini" @click="changeTime('3month')">近3月</el-button>
-      <el-button round size="mini" @click="changeTime('month')">近1月</el-button>
-      <el-button round size="mini" @click="changeTime('week')">近1周</el-button>
-    </div>
+    <!--<div class="function">-->
+      <!--<el-button round size="mini" @click="changeTime('year')">近1年</el-button>-->
+      <!--<el-button round size="mini" @click="changeTime('halfyear')">近6月</el-button>-->
+      <!--<el-button round size="mini" @click="changeTime('3month')">近3月</el-button>-->
+      <!--<el-button round size="mini" @click="changeTime('month')">近1月</el-button>-->
+      <!--<el-button round size="mini" @click="changeTime('week')">近1周</el-button>-->
+    <!--</div>-->
     <ve-line :data="chartData" :title="title" :extend="extend" :settings="chartSettings"/>
   </div>
 </template>
@@ -17,6 +17,18 @@
 import { getDoorAreaTree } from '@/api/system/area'
 export default {
   name: 'WaterCountByDay',
+  props:{
+    query: {
+      type: Object,
+      default:()=>{
+        return {
+          areaId: '',
+          startTime: '',
+          endTime: ''
+        }
+      }
+    }
+  },
   data() {
     return {
       listQuery: {
@@ -52,8 +64,13 @@
     }
   },
   mounted() {
-    this.changeTime('month')
-    this.fetchArea()
+    // this.changeTime('month')
+    // this.fetchArea()
+  },
+  watch:{
+    query(val){
+      this.fetchData()
+    }
   },
   methods: {
     fetchArea() {
@@ -73,7 +90,7 @@
       })
     },
     fetchData() {
-      countByDayFirst(this.listQuery).then(response => {
+      countByDayFirst(this.query).then(response => {
         const arr = response.data.map(function(item) {
           for (let i = 0; i < item.data.length; i++) {
             item[item.data[i].areaName] = item.data[i].count
diff --git a/src/views/dashboard/components/waterCountByDept.vue b/src/views/dashboard/components/waterCountByDept.vue
index a0c82cf..02e27cd 100644
--- a/src/views/dashboard/components/waterCountByDept.vue
+++ b/src/views/dashboard/components/waterCountByDept.vue
@@ -1,22 +1,22 @@
 <!--suppress ALL -->
 <template>
   <div class="container">
-    <div class="function">
-      <el-button round size="mini" @click="changeTime('year')">近1年</el-button>
-      <el-button round size="mini" @click="changeTime('halfyear')">近6月</el-button>
-      <el-button round size="mini" @click="changeTime('3month')">近3月</el-button>
-      <el-button round size="mini" @click="changeTime('month')">近1月</el-button>
-      <el-button round size="mini" @click="changeTime('week')">近1周</el-button>
-    </div>
+    <!--<div class="function">-->
+      <!--<el-button round size="mini" @click="changeTime('year')">近1年</el-button>-->
+      <!--<el-button round size="mini" @click="changeTime('halfyear')">近6月</el-button>-->
+      <!--<el-button round size="mini" @click="changeTime('3month')">近3月</el-button>-->
+      <!--<el-button round size="mini" @click="changeTime('month')">近1月</el-button>-->
+      <!--<el-button round size="mini" @click="changeTime('week')">近1周</el-button>-->
+    <!--</div>-->
     <ve-pie :data="chartData" :extend="extend" :title="title"/>
-    <div class="function">
-      <el-button
-        v-for="item in areaList"
-        :key="item.id"
-        round
-        @click="areaChange(item.id)"
-        size="mini">{{item.name}}</el-button>
-    </div>
+    <!--<div class="function">-->
+      <!--<el-button-->
+        <!--v-for="item in areaList"-->
+        <!--:key="item.id"-->
+        <!--round-->
+        <!--@click="areaChange(item.id)"-->
+        <!--size="mini">{{item.name}}</el-button>-->
+    <!--</div>-->
   </div>
 </template>
 
@@ -25,6 +25,18 @@
 import { getDoorAreaTree } from '@/api/system/area'
 export default {
   name: 'WaterCountByDepy',
+  props:{
+    query: {
+      type: Object,
+      default:()=>{
+        return {
+          areaId: '',
+          startTime: '',
+          endTime: ''
+        }
+      }
+    }
+  },
   data() {
     return {
       listQuery: {
@@ -69,7 +81,12 @@
   },
   mounted() {
     // TODO:待调试真接口
-    this.fetchArea()
+    // this.fetchArea()
+  },
+  watch:{
+    query(val){
+      this.fetchData()
+    }
   },
   methods: {
     fetchArea() {
@@ -104,8 +121,7 @@
       //   { 'areaName': '码头作业区', 'count': 78 },
       //   { 'areaName': '车间生产区', 'count': 78 }
       // ]
-      this.listQuery.areaId = this.areaId
-      countBySecondArea(this.listQuery).then(response => {
+      countBySecondArea(this.query).then(response => {
         this.chartData.rows = response.data
       })
     },
diff --git a/src/views/dashboard/components/waterNote.vue b/src/views/dashboard/components/waterNote.vue
new file mode 100644
index 0000000..aa0f448
--- /dev/null
+++ b/src/views/dashboard/components/waterNote.vue
@@ -0,0 +1,152 @@
+<!--suppress ALL -->
+<template>
+  <div class="container">
+    <div>
+      用水事记
+    </div>
+
+  </div>
+</template>
+
+<script>
+import { countBySecondArea } from '@/api/overview'
+import { getDoorAreaTree } from '@/api/system/area'
+export default {
+  name: 'WaterNote',
+  props:{
+    query: {
+      type: Object,
+      default:()=>{
+        return {
+          areaId: '',
+          startTime: '',
+          endTime: ''
+        }
+      }
+    }
+  },
+  data() {
+    return {
+      listQuery: {
+        areaId: '',
+        startTime: '',
+        endTime: ''
+      },
+      areaId:'',
+      areaList: [],
+      chartData: {
+        columns: ['areaName', 'count'],
+        rows: []
+      },
+      extend: {
+        grid: {
+          right: '30%'
+        },
+        legend: {
+          type: 'scroll',
+          top: '60px',
+          right: '0px',
+          orient: 'vertical'
+        },
+        series: {
+          label: { show: true, position: 'outside', formatter: '{b}' },
+          right: 120
+        },
+        tooltip: { trigger: 'item', formatter: '{b}<br/>用水量：{c}吨<br/>占比：{d}%' }
+      },
+      title: {
+        text: '分区用水占比图'
+      },
+      chartSettings: {
+        labelMap: {
+          'areaName': '分区',
+          'count': '用水量'
+        },
+        dimension: 'areaName',
+        metrics: 'count'
+      }
+    }
+  },
+  mounted() {
+    // TODO:待调试真接口
+    // this.fetchArea()
+  },
+  watch:{
+    query(val){
+      this.fetchData()
+    }
+  },
+  methods: {
+    fetchArea() {
+      getDoorAreaTree().then(response => {
+        if (response.code === 200) {
+          this.areaList = response.data.filter(item => {
+            return item.pid === '1'
+          }).map(function(item) {
+            return {
+              id: item.id, name: item.name
+            }
+          })
+          if (this.areaList.length !== 0) { this.areaChange(this.areaList[0].id) }
+        }
+      })
+    },
+    areaChange(val){
+      this.areaId = val
+      this.fetchData()
+    },
+    // 获取统计数据
+    fetchData() {
+      // this.chartData.rows = [
+      //   { 'areaName': '科技楼及食堂', 'count': 53 },
+      //   { 'areaName': 'A\\B\\C\\D\\E座', 'count': 78 },
+      //   { 'areaName': '厂区', 'count': 78 },
+      //   { 'areaName': '分段分区', 'count': 78 },
+      //   { 'areaName': '船坞分区', 'count': 78 },
+      //   { 'areaName': '刀把码头', 'count': 78 },
+      //   { 'areaName': '制管作业区', 'count': 78 },
+      //   { 'areaName': '滑道作业区', 'count': 78 },
+      //   { 'areaName': '码头作业区', 'count': 78 },
+      //   { 'areaName': '车间生产区', 'count': 78 }
+      // ]
+      countBySecondArea(this.query).then(response => {
+        this.chartData.rows = response.data
+      })
+    },
+    changeTime(timeType) {
+      let startTime
+      switch (timeType) {
+        case 'year':
+          startTime = getDayTime(new Date().getTime() - 24 * 365 * 60 * 60 * 1000)
+          this.listQuery.startTime = startTime.Format('yyyy-MM-dd')
+          break
+        case 'halfyear':
+          startTime = getDayTime(new Date().getTime() - 24 * 182 * 60 * 60 * 1000)
+          this.listQuery.startTime = startTime.Format('yyyy-MM-dd')
+          break
+        case '3month':
+          startTime = getDayTime(new Date().getTime() - 24 * 90 * 60 * 60 * 1000)
+          this.listQuery.startTime = startTime.Format('yyyy-MM-dd')
+          break
+        case 'month':
+          startTime = getDayTime(new Date().getTime() - 24 * 30 * 60 * 60 * 1000)
+          this.listQuery.startTime = startTime.Format('yyyy-MM-dd')
+          break
+        case 'week':
+          startTime = getDayTime(new Date().getTime() - 24 * 7 * 60 * 60 * 1000)
+          this.listQuery.startTime = startTime.Format('yyyy-MM-dd')
+          break
+      }
+      const endTime = new Date()
+      this.listQuery.endTime = endTime.Format('yyyy-MM-dd')
+      this.fetchData()
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+  .container{
+    position:relative;
+    height: 455px;
+  }
+</style>
diff --git a/src/views/dashboard/index.vue b/src/views/dashboard/index.vue
index fdbc38a..831dbc3 100644
--- a/src/views/dashboard/index.vue
+++ b/src/views/dashboard/index.vue
@@ -1,31 +1,33 @@
 <template>
   <div class="dashboard-container" style="background-color: white">
     <panel-group ref="panelgroup"/>
-    <el-row :gutter="10">
+    <el-row>
       <!-- 用水统计图 -->
+      <el-col :span="18">
+        <el-card shadow="never">
+          <water-count-by-area-bar @change="changeWaterQuery"/>
+        </el-card>
+      </el-col>
+      <el-col :span="6">
+        <el-card shadow="never">
+          <water-note/>
+        </el-card>
+      </el-col>
+    </el-row>
+    <el-row>
+      <!-- 分区用水占比图 -->
       <el-col :span="12">
         <el-card shadow="never">
-          <water-count-by-dept-bar/>
+          <water-count-by-dept :query="listQuery1" ref="waterCountPie"/>
         </el-card>
       </el-col>
       <!-- 用水走势图 -->
       <el-col :span="12">
         <el-card shadow="never">
-          <water-count-by-day/>
+          <water-count-by-day :query="listQuery1" ref="waterCountDay"/>
         </el-card>
       </el-col>
-      <!-- 分区用水统计图 -->
-      <el-col :span="12">
-        <el-card shadow="never">
-          <water-count-by-area-bar/>
-        </el-card>
-      </el-col>
-      <!-- 分区用水占比图 -->
-      <el-col :span="12">
-        <el-card shadow="never">
-          <water-count-by-depy/>
-        </el-card>
-      </el-col>
+
       <!--水表报警次数统计-->
       <el-col v-if="hasPerm('/statics/alarmsByDay')" :span="12">
         <el-card shadow="never">
@@ -64,20 +66,22 @@
 import DeviceCountByOnline from './components/DeviceCountByOnline'
 import AlarmByDays from './components/AlarmByDays'
 import JobByStatus from './components/JobByStatus'
-import WaterCountByDepy from './components/waterCountByDept'
+import WaterCountByDept from './components/waterCountByDept'
 import WaterCountByDeptBar from './components/waterCountByDeptBar'
 import WaterCountByDay from './components/waterCountByDay'
 import WaterCountByAreaBar from "./components/waterCountByAreaBar";
 import WatchAlarmBar from "./components/watchAlarmBar";
+import WaterNote from "./components/waterNote";
 
 export default {
   name: 'Dashboard',
   components: {
+    WaterNote,
     WatchAlarmBar,
     WaterCountByAreaBar,
     WaterCountByDay,
     WaterCountByDeptBar,
-    WaterCountByDepy,
+    WaterCountByDept,
     JobByStatus,
     AlarmByDays,
     PanelGroup,
@@ -108,12 +112,25 @@
       state.needRefresh = needRefresh
     }
   },
+  data(){
+    return {
+      listQuery1:{
+        areaId:'110000',
+        startTime:new Date().Format('yyyy-MM-dd'),
+        endTime:new Date().Format('yyyy-MM-dd')
+      },// 分区用水量查询条件
+      listQuery2:{
+        areaId:'',
+        startTime:'',
+        endTime:''
+      } // 分区报警查询条件
+    }
+  },
   watch: {
     needRefresh(val) {
       // 需要刷新
       if (val) {
         console.log('refresh dashboard')
-        debugger
         this.$refs.panelgroup.refresh()
       }
     }
@@ -124,6 +141,10 @@
   methods: {
     webSocket() {
       this.$store.dispatch('initWebSocket')
+    },
+    // 切换分区查询条件
+    changeWaterQuery(listQuery1){
+      this.listQuery1 = listQuery1
     }
   }
 }
diff --git a/src/views/dashboard/index_bak.vue b/src/views/dashboard/index_bak.vue
new file mode 100644
index 0000000..fdbc38a
--- /dev/null
+++ b/src/views/dashboard/index_bak.vue
@@ -0,0 +1,149 @@
+<template>
+  <div class="dashboard-container" style="background-color: white">
+    <panel-group ref="panelgroup"/>
+    <el-row :gutter="10">
+      <!-- 用水统计图 -->
+      <el-col :span="12">
+        <el-card shadow="never">
+          <water-count-by-dept-bar/>
+        </el-card>
+      </el-col>
+      <!-- 用水走势图 -->
+      <el-col :span="12">
+        <el-card shadow="never">
+          <water-count-by-day/>
+        </el-card>
+      </el-col>
+      <!-- 分区用水统计图 -->
+      <el-col :span="12">
+        <el-card shadow="never">
+          <water-count-by-area-bar/>
+        </el-card>
+      </el-col>
+      <!-- 分区用水占比图 -->
+      <el-col :span="12">
+        <el-card shadow="never">
+          <water-count-by-depy/>
+        </el-card>
+      </el-col>
+      <!--水表报警次数统计-->
+      <el-col v-if="hasPerm('/statics/alarmsByDay')" :span="12">
+        <el-card shadow="never">
+          <watch-alarm-bar/>
+        </el-card>
+      </el-col>
+      <!--报警次数统计-->
+      <el-col v-if="hasPerm('/statics/alarmsByDay')" :span="12">
+        <el-card shadow="never">
+          <alarm-by-days/>
+        </el-card>
+      </el-col>
+      <!--设备在线数量统计-->
+      <el-col v-if="hasPerm('/statics/deviceStaticsByType')" :span="12">
+        <el-card shadow="never">
+          <device-count-by-online/>
+        </el-card>
+      </el-col>
+
+      <!--设备数量统计-->
+      <el-col v-if="hasPerm('/statics/deviceStaticsByType')" :span="12">
+        <el-card shadow="never">
+          <device-count/>
+        </el-card>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+import PanelGroup from './components/PanelGroup'
+import WellCountByBfzt from './components/WellCountByBfzt'
+import WellCountByType from './components/WellCountByType'
+import DeviceCount from './components/DeviceCount'
+import DeviceCountByOnline from './components/DeviceCountByOnline'
+import AlarmByDays from './components/AlarmByDays'
+import JobByStatus from './components/JobByStatus'
+import WaterCountByDepy from './components/waterCountByDept'
+import WaterCountByDeptBar from './components/waterCountByDeptBar'
+import WaterCountByDay from './components/waterCountByDay'
+import WaterCountByAreaBar from "./components/waterCountByAreaBar";
+import WatchAlarmBar from "./components/watchAlarmBar";
+
+export default {
+  name: 'Dashboard',
+  components: {
+    WatchAlarmBar,
+    WaterCountByAreaBar,
+    WaterCountByDay,
+    WaterCountByDeptBar,
+    WaterCountByDepy,
+    JobByStatus,
+    AlarmByDays,
+    PanelGroup,
+    WellCountByBfzt,
+    WellCountByType,
+    DeviceCount,
+    DeviceCountByOnline
+  },
+  computed: {
+    ...mapGetters([
+      'name',
+      'roleNames',
+      'roleTips',
+      'wellTypes',
+      'deviceTypes',
+      'communications',
+      'area'
+    ])
+  },
+  mutations: {
+    SET_WEBSOCKET: (state, websocket) => {
+      state.websocket = websocket
+    },
+    SET_WS_STATUS: (state, wsStatus) => {
+      state.wsStatus = wsStatus
+    },
+    SET_NEED_REFRESH: (state, needRefresh) => {
+      state.needRefresh = needRefresh
+    }
+  },
+  watch: {
+    needRefresh(val) {
+      // 需要刷新
+      if (val) {
+        console.log('refresh dashboard')
+        debugger
+        this.$refs.panelgroup.refresh()
+      }
+    }
+  },
+  mounted() {
+    // this.webSocket()
+  },
+  methods: {
+    webSocket() {
+      this.$store.dispatch('initWebSocket')
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.dashboard-container{
+  .el-row{
+    .el-col{
+      margin-bottom: 10px;
+    }
+  }
+}
+.dashboard {
+  &-container {
+    padding: 10px 20px;
+  }
+  &-text {
+    font-size: 30px;
+    line-height: 46px;
+  }
+}
+</style>
diff --git a/src/views/layout/Layout.vue b/src/views/layout/Layout.vue
deleted file mode 100644
index 7c3d46d..0000000
--- a/src/views/layout/Layout.vue
+++ /dev/null
@@ -1,111 +0,0 @@
-<template>
-  <el-container :class="classObj" class="app-wrapper">
-    <div v-if="device==='mobile'&&sidebar.opened" class="drawer-bg" @click="handleClickOutside"/>
-    <app-header class="app-header"/>
-    <el-main class="app-body">
-      <!--侧边栏-->
-      <sidebar class="sidebar-container"/>
-      <!--右半部分-->
-      <div :class="{hasTagsView:needTagsView}" class="main-container">
-        <!--开启固定头部设置-->
-        <div v-if="fixedHeader">
-          <!--导航(面包屑)-->
-          <navbar/>
-          <!--标签栏-->
-          <tags-view v-if="needTagsView" />
-          <!--主内容包裹在el-scrollbar中-->
-          <el-scrollbar class="no-head-scrollbar">
-            <app-main/>
-          </el-scrollbar>
-        </div>
-        <!--为开始固定头部设置-->
-        <div v-else>
-          <!--导航，tagsView都包裹在el-scrollbar中-->
-          <el-scrollbar class="has-head-scrollbar">
-            <navbar/>
-            <tags-view v-if="needTagsView" />
-            <app-main/>
-          </el-scrollbar>
-        </div>
-        <!--悬浮框-->
-        <right-panel v-if="false">
-          <settings />
-        </right-panel>
-      </div>
-    </el-main>
-  </el-container>
-</template>
-
-<script>
-import RightPanel from '@/components/RightPanel'
-import { AppHeader, Navbar, Sidebar, AppMain } from './components'
-import ResizeMixin from './mixin/ResizeHandler'
-import TagsView from './components/TagsView/index'
-import { mapState } from 'vuex'
-import Settings from './components/Settings/index'
-
-export default {
-  name: 'Layout',
-  components: {
-    Settings,
-    TagsView,
-    AppHeader,
-    Navbar,
-    Sidebar,
-    AppMain,
-    RightPanel
-  },
-  mixins: [ResizeMixin],
-  computed: {
-    ...mapState({
-      sidebar: state => state.app.sidebar,
-      device: state => state.app.device,
-      showSettings: state => state.settings.showSettings,
-      needTagsView: state => state.settings.tagsView,
-      fixedHeader: state => state.settings.fixedHeader
-    }),
-    classObj() {
-      return {
-        hideSidebar: !this.sidebar.opened,
-        openSidebar: this.sidebar.opened,
-        withoutAnimation: this.sidebar.withoutAnimation,
-        mobile: this.device === 'mobile'
-      }
-    }
-  },
-  methods: {
-    handleClickOutside() {
-      this.$store.dispatch('CloseSideBar', { withoutAnimation: false })
-    }
-  }
-}
-</script>
-
-<style rel="stylesheet/scss" lang="scss" scoped>
-  @import "src/styles/mixin.scss";
-  .app-wrapper {
-    @include clearfix;
-    position: relative;
-    height: 100%;
-    width: 100%;
-    &.mobile.openSidebar{
-      position: fixed;
-      top: 0;
-    }
-  }
-  .drawer-bg {
-    background: #000;
-    opacity: 0.3;
-    width: 100%;
-    top: 0;
-    height: 100%;
-    position: absolute;
-    z-index: 999;
-  }
-  /*.el-scrollbar{*/
-    /*height: calc(100vh - 50px);*/
-  /*}*/
-  .has-head-scrollbar{
-    height: 100vh;
-  }
-</style>
diff --git a/src/views/layout/components/AppHeader.vue b/src/views/layout/components/AppHeader.vue
deleted file mode 100644
index 8d8912e..0000000
--- a/src/views/layout/components/AppHeader.vue
+++ /dev/null
@@ -1,151 +0,0 @@
-<template>
-  <el-header class="app-header">
-    <h3>{{ title }}</h3>
-    <!--子系统选项-->
-    <el-dropdown v-if="showChangeSys" class="systemSelect" size="medium" @command="handleCommand">
-      <span class="el-dropdown-link">{{ currentSystem.name }}<i class="el-icon-arrow-down el-icon--right"/>
-      </span>
-      <el-dropdown-menu slot="dropdown">
-        <el-dropdown-item v-for="system in systems" :command="system" :key="system.id">{{ system.name }}</el-dropdown-item>
-      </el-dropdown-menu>
-    </el-dropdown>
-    <el-dropdown class="dropdown-container" trigger="click">
-      <div class="dropdown-wrapper">
-        <span style="line-height:50px;">欢迎您，{{ name }}</span>
-        <!--<img :src="avatar+'?imageView2/1/w/80/h/80'" class="user-avatar">-->
-        <i class="el-icon-arrow-down"/>
-      </div>
-      <el-dropdown-menu slot="dropdown" class="user-dropdown">
-        <el-dropdown-item v-if="!baseConfig.singleSys">
-          <span style="display:block;" @click="backToIndex">回首页</span>
-        </el-dropdown-item>
-        <el-dropdown-item :divided="!baseConfig.singleSys">
-          <span style="display:block;" @click="resetPwd">修改密码</span>
-        </el-dropdown-item>
-        <el-dropdown-item divided>
-          <span style="display:block;" @click="logout">注销</span>
-        </el-dropdown-item>
-      </el-dropdown-menu>
-    </el-dropdown>
-    <reset-pwd v-show="showSetPwd" ref="retPwd"/>
-  </el-header>
-</template>
-
-<script>
-import { mapGetters } from 'vuex'
-import ResetPwd from '@/views/system/user/resetPwd'
-
-export default {
-  name: 'AppHeader',
-  components: { ResetPwd },
-  data() {
-    return {
-      title: this.baseConfig.title, // 标题
-      showChangeSys: !this.baseConfig.singleSys, // 是否显示切换系统菜单
-      name: this.$store.getters.name, // 用户姓名
-      showSetPwd: false // 是否显示修改密码按钮
-    }
-  },
-  computed: {
-    ...mapGetters([
-      'sidebar',
-      'avatar',
-      'currentSystem',
-      'systems'
-    ])
-  },
-  created() {
-    if (!this.baseConfig.singleSys) {
-      this.getSystems()
-    }
-  },
-  methods: {
-    toggleSideBar() {
-      this.$store.dispatch('ToggleSideBar')
-    },
-    logout() {
-      this.$store.dispatch('LogOut').then(() => {
-        location.reload() // 为了重新实例化vue-router对象 避免bug
-      })
-    },
-    resetPwd() {
-      this.showSetPwd = true
-      this.$refs.retPwd.initDialog(true)
-    },
-    backToIndex() {
-      const url = this.baseConfig.mainPage
-      window.location.href = url
-    },
-    // 切换子系统
-    handleCommand(command) {
-      console.log('切换子系统:' + command.name)
-      const params1 = `?token=${this.$store.getters.token}`
-      const params = `?sys=${command.name}&url=${command.url}&code=${command.code}&token=${this.$store.getters.token}`
-      // 判断系统是不是http的，如果是则打开新窗口
-      if (command.url.indexOf('http') > -1) {
-      // 取token
-        if (this.baseConfig.sameWindow) {
-          window.location.href = command.url + params1
-        } else {
-          window.open(command.url + params1, '_blank')
-        }
-      } else {
-      // 取token
-        if (this.baseConfig.sameWindow) {
-          window.location.href = this.baseConfig.mainPage + command.url + params
-        } else {
-          window.open(this.baseConfig.mainPage + command.url + params, '_blank')
-        }
-      }
-    },
-    // 获取子系统
-    getSystems() {
-      this.$store.dispatch('GetSystems').then(() => {
-        console.log('获取子系统列表成功-appHeader')
-      })
-    }
-  }
-}
-</script>
-
-<style rel="stylesheet/scss" lang="scss" scoped>
-  h3{
-    margin-left:24px;
-    display: inline-block;
-    float:left;
-  }
-  .dropdown-container {
-    /*height: 50px;*/
-    display: inline-block;
-    float: right;
-    z-index:500;
-    position: fixed;
-    top:0px;
-    right: 35px;
-    .dropdown-wrapper {
-      cursor: pointer;
-      margin-top: 5px;
-      position: relative;
-      line-height: initial;
-      .user-avatar {
-        width: 40px;
-        height: 40px;
-        border-radius: 10px;
-      }
-      .el-icon-caret-bottom {
-        font-size: 12px;
-      }
-    }
-  }
-  .systemSelect{
-    height: 56px;
-    display: inline-block;
-    float: left;
-    z-index:500;
-    position: fixed;
-    margin-left:60px;
-    top:5px;
-    color:#fff;
-    line-height: 56px;
-  }
-</style>
diff --git a/src/views/layout/components/AppMain.vue b/src/views/layout/components/AppMain.vue
deleted file mode 100644
index 2ea268e..0000000
--- a/src/views/layout/components/AppMain.vue
+++ /dev/null
@@ -1,38 +0,0 @@
-<template>
-  <section class="app-main">
-    <transition name="fade-transform" mode="out-in">
-      <!-- or name="fade" -->
-      <!-- <router-view :key="key"></router-view> -->
-      <div>
-        <keep-alive>
-          <router-view v-if="$route.meta.keepAlive" :key="key"/>
-        </keep-alive>
-        <router-view v-if="!$route.meta.keepAlive" :key="key"/>
-      </div>
-    </transition>
-  </section>
-</template>
-
-<script>
-export default {
-  name: 'AppMain',
-  computed: {
-    key() {
-      if (this.$route.meta.keepAlive) {
-        return this.$route.name !== undefined ? this.$route.name : this.$route
-      } else {
-        return this.$route.name !== undefined ? this.$route.name + new Date() : this.$route + new Date()
-      }
-    }
-  }
-}
-</script>
-
-<style scoped>
-.app-main {
-  /*50 = navbar  */
-  /*min-height: calc(100vh - 50px);*/
-  position: relative;
-  overflow: hidden;
-}
-</style>
diff --git a/src/views/layout/components/Navbar.vue b/src/views/layout/components/Navbar.vue
deleted file mode 100644
index 24ea99b..0000000
--- a/src/views/layout/components/Navbar.vue
+++ /dev/null
@@ -1,78 +0,0 @@
-<template>
-  <div class="navbar">
-    <hamburger :toggle-click="toggleSideBar" :is-active="sidebar.opened" class="hamburger-container"/>
-    <breadcrumb />
-  </div>
-</template>
-
-<script>
-import { mapGetters } from 'vuex'
-import Breadcrumb from '@/components/Breadcrumb'
-import Hamburger from '@/components/Hamburger'
-
-export default {
-  components: {
-    Breadcrumb,
-    Hamburger
-  },
-  computed: {
-    ...mapGetters([
-      'sidebar'
-    ])
-  },
-  methods: {
-    toggleSideBar() {
-      this.$store.dispatch('ToggleSideBar')
-    },
-    logout() {
-      this.$store.dispatch('LogOut').then(() => {
-        location.reload() // 为了重新实例化vue-router对象 避免bug
-      })
-    }
-  }
-}
-</script>
-
-<style rel="stylesheet/scss" lang="scss" scoped>
-.navbar {
-  height: 50px;
-  line-height: 50px;
-  box-shadow: 0 1px 3px 0 rgba(0,0,0,.12), 0 0 3px 0 rgba(0,0,0,.04);
-  .hamburger-container {
-    text-align: center;
-    height: 50px;
-    float: left;
-    padding: 0 12px;
-  }
-  .screenfull {
-    position: absolute;
-    right: 90px;
-    top: 16px;
-    color: red;
-  }
-  .avatar-container {
-    height: 50px;
-    display: inline-block;
-    position: absolute;
-    right: 35px;
-    .avatar-wrapper {
-      cursor: pointer;
-      margin-top: 5px;
-      position: relative;
-      line-height: initial;
-      .user-avatar {
-        width: 40px;
-        height: 40px;
-        border-radius: 10px;
-      }
-      .el-icon-caret-bottom {
-        position: absolute;
-        right: -20px;
-        top: 25px;
-        font-size: 12px;
-      }
-    }
-  }
-}
-</style>
-
diff --git a/src/views/layout/components/Settings/index.vue b/src/views/layout/components/Settings/index.vue
deleted file mode 100644
index cf3023d..0000000
--- a/src/views/layout/components/Settings/index.vue
+++ /dev/null
@@ -1,109 +0,0 @@
-<template>
-  <div class="drawer-container">
-    <div>
-      <h3 class="drawer-title">Page style setting</h3>
-
-      <div class="drawer-item">
-        <span>Theme Color</span>
-        <theme-picker style="float: right;height: 26px;margin: -3px 8px 0 0;" @change="themeChange" />
-      </div>
-
-      <div class="drawer-item">
-        <span>Open Tags-View</span>
-        <el-switch v-model="tagsView" class="drawer-switch" />
-      </div>
-
-      <div class="drawer-item">
-        <span>Fixed Header</span>
-        <el-switch v-model="fixedHeader" class="drawer-switch" />
-      </div>
-
-      <div class="drawer-item">
-        <span>Sidebar Logo</span>
-        <el-switch v-model="sidebarLogo" class="drawer-switch" />
-      </div>
-
-    </div>
-  </div>
-</template>
-
-<script>
-import ThemePicker from '@/components/ThemePicker'
-
-export default {
-  name: 'Settings',
-  components: { ThemePicker },
-  data() {
-    return {}
-  },
-  computed: {
-    fixedHeader: {
-      get() {
-        return this.$store.state.settings.fixedHeader
-      },
-      set(val) {
-        this.$store.dispatch('settings/changeSetting', {
-          key: 'fixedHeader',
-          value: val
-        })
-      }
-    },
-    tagsView: {
-      get() {
-        return this.$store.state.settings.tagsView
-      },
-      set(val) {
-        this.$store.dispatch('settings/changeSetting', {
-          key: 'tagsView',
-          value: val
-        })
-      }
-    },
-    sidebarLogo: {
-      get() {
-        return this.$store.state.settings.sidebarLogo
-      },
-      set(val) {
-        this.$store.dispatch('settings/changeSetting', {
-          key: 'sidebarLogo',
-          value: val
-        })
-      }
-    }
-  },
-  methods: {
-    themeChange(val) {
-      this.$store.dispatch('settings/changeSetting', {
-        key: 'theme',
-        value: val
-      })
-    }
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-.drawer-container {
-  padding: 24px;
-  font-size: 14px;
-  line-height: 1.5;
-  word-wrap: break-word;
-
-  .drawer-title {
-    margin-bottom: 12px;
-    color: rgba(0, 0, 0, .85);
-    font-size: 14px;
-    line-height: 22px;
-  }
-
-  .drawer-item {
-    color: rgba(0, 0, 0, .65);
-    font-size: 14px;
-    padding: 12px 0;
-  }
-
-  .drawer-switch {
-    float: right
-  }
-}
-</style>
diff --git a/src/views/layout/components/Sidebar/Item.vue b/src/views/layout/components/Sidebar/Item.vue
deleted file mode 100644
index 4ed6b5f..0000000
--- a/src/views/layout/components/Sidebar/Item.vue
+++ /dev/null
@@ -1,31 +0,0 @@
-<script>
-export default {
-  name: 'MenuItem',
-  functional: true,
-  props: {
-    icon: {
-      type: String,
-      default: ''
-    },
-    title: {
-      type: String,
-      default: ''
-    }
-  },
-  render(h, context) {
-    const { icon, title } = context.props
-    const vnodes = []
-
-    if (icon) {
-      vnodes.push(<svg-icon icon-class={icon}/>)
-    } else {
-      vnodes.push(<span style='display:inline-block;width:30px;'></span>)
-    }
-
-    if (title) {
-      vnodes.push(<span slot='title'>{(title)}</span>)
-    }
-    return vnodes
-  }
-}
-</script>

diff --git a/src/api/dashboard.js b/src/api/dashboard.js
index e69de29..0a4ddfc 100644
--- a/src/api/dashboard.js
+++ b/src/api/dashboard.js
@@ -0,0 +1,73 @@
+/**
+ * 井总览模块接口
+ */
+import request from '@/utils/request'
+
+// 用水量、噪声统计数据
+export function getWatchStatistic() {
+  return request({
+    url: 'waterStatistic/overview',
+    method: 'get'
+  })
+}
+// 水表数量
+export function waterMeterCount() {
+  return request({
+    url: 'waterMeterData/count',
+    method: 'get'
+  })
+}
+// 阀门数量
+export function valveCount() {
+  return request({
+    url: 'waterMeterData/count',
+    method: 'get'
+  })
+}
+
+// 查询一级分区各区用水量
+export function countByFirstArea(params) {
+  return request({
+    url: 'waterStatistic/countByFirstArea',
+    method: 'get',
+    params
+  })
+}
+
+// 查询一级分区7日用水量
+export function countByDayFirst(params) {
+  return request({
+    url: 'waterStatistic/countByDayFirst',
+    method: 'get',
+    params
+  })
+}
+
+// 查询二级分区各区用水量
+export function countBySecondArea(params) {
+  return request({
+    url: 'waterStatistic/countBySecondArea',
+    method: 'get',
+    params
+  })
+}
+
+// 查询二级分区水表告警
+export function alarmBySecondArea(params) {
+  return request({
+    url: 'waterStatistic/alarmBySecondArea',
+    method: 'get',
+    params
+  })
+}
+
+// 设备7日报警趋势
+export function alarmCountByDay(params) {
+  return request({
+    url: 'waterStatistic/alarmCountByDay',
+    method: 'get',
+    params
+  })
+}
+
+
diff --git a/src/components/BigData/Card/index.vue b/src/components/BigData/Card/index.vue
index d71e609..45359c9 100644
--- a/src/components/BigData/Card/index.vue
+++ b/src/components/BigData/Card/index.vue
@@ -10,6 +10,7 @@
         </div>
         <div class="card-panel-num" >
           {{ context }}
+          <span style="font-size: 10px;color:#888">{{unit}}</span>
         </div>
       </div>
     </div>
@@ -39,6 +40,10 @@
     color: {
       type: String,
       default: '#40c9c6'
+    },
+    unit:{
+      type: String,
+      default:''
     }
   },
   computed: {
diff --git a/src/components/BigData/Card1/index.vue b/src/components/BigData/Card1/index.vue
index 030b2dc..aa46454 100644
--- a/src/components/BigData/Card1/index.vue
+++ b/src/components/BigData/Card1/index.vue
@@ -1,10 +1,11 @@
 <template>
   <el-card :body-style="{ padding: '0px' }" shadow="always">
-    <div class="card-panel" >
-      <div :style="backgroundColor" class="card-panel-icon-wrapper">
-        <svg-icon :icon-class="icon" class-name="card-panel-icon" />
+    <div class="card-panel">
+      <div v-if="icon" :style="backgroundColor" class="card-panel-icon-wrapper">
+        <svg-icon :icon-class="icon" class-name="card-panel-icon"/>
       </div>
-      <div  class="card-panel-description">
+      <div v-else style="float:left; width: 20px;height: 100%;"></div>
+      <div class="card-panel-description">
         <!-- <div class="card-panel-text">
           {{ title[0] }} <span class="card-panel-num">{{ context[0] }}</span>
         </div>
@@ -13,18 +14,20 @@
         </div> -->
         <div class="two" v-if="title.length===2">
           <div class="card-panel-text">
-            {{ title[0] }} <span class="card-panel-num">{{ context[0] }}</span>
+            {{ title[0] }} <span class="card-panel-num">{{ context[0] }}<span
+            style="font-size: 10px;color:#888;margin-left: 5px">{{unit}}</span></span>
           </div>
-          <div class="card-panel-text" >
-            {{ title[1] }} <span class="card-panel-num">{{ context[1] }}</span>
+          <div class="card-panel-text">
+            {{ title[1] }} <span class="card-panel-num">{{ context[1] }}<span
+            style="font-size: 10px;color:#888;margin-left: 5px">{{unit}}</span></span>
           </div>
         </div>
         <div class="only" v-else>
           <div class="card-panel-text">
             {{ title[0] }}
           </div>
-          <div class="card-panel-num" >
-            {{ context[0] }}
+          <div class="card-panel-num">
+            {{ context[0] }}<span style="font-size: 10px;color:#888">{{unit}}</span>
           </div>
         </div>
       </div>
@@ -33,42 +36,46 @@
 </template>
 
 <script>
-export default {
-  name: 'Card1',
-  props: {
-    title: {
-      type: Array,
-      default: function() {
-        return ['标题', '标题']
+  export default {
+    name: 'Card1',
+    props: {
+      title: {
+        type: Array,
+        default: function () {
+          return ['标题', '标题']
+        }
+      },
+      subtitle: {
+        type: String,
+        default: ''
+      },
+      icon: {
+        type: String,
+        default: ''
+      },
+      context: {
+        type: Array,
+        default: function () {
+          return ['--', '--']
+        }
+      },
+      color: {
+        type: String,
+        default: '#40c9c6'
+      },
+      unit: {
+        type: String,
+        default: ''
       }
     },
-    subtitle: {
-      type: String,
-      default: ''
-    },
-    icon: {
-      type: String,
-      default: ''
-    },
-    context: {
-      type: Array,
-      default: function() {
-        return ['--', '--']
-      }
-    },
-    color: {
-      type: String,
-      default: '#40c9c6'
-    }
-  },
-  computed: {
-    backgroundColor() {
-      return {
-        color: this.color
+    computed: {
+      backgroundColor() {
+        return {
+          color: this.color
+        }
       }
     }
   }
-}
 </script>
 
 <style lang="scss" scoped>
@@ -108,7 +115,7 @@
       overflow: auto;
       margin-left: 5px;
 
-      .two{
+      .two {
         .card-panel-text {
           line-height: 18px;
           color: rgba(0, 0, 0, 0.45);
@@ -123,7 +130,7 @@
           float: right;
         }
       }
-      .only{
+      .only {
         .card-panel-text {
           line-height: 18px;
           color: rgba(0, 0, 0, 0.45);
diff --git a/src/icons/svg/icon-noise.svg b/src/icons/svg/icon-noise.svg
new file mode 100644
index 0000000..00bef71
--- /dev/null
+++ b/src/icons/svg/icon-noise.svg
@@ -0,0 +1,2 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1648634383080" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2093" xmlns:xlink="http://www.w3.org/1999/xlink" width="128" height="128"><defs><style type="text/css">@font-face { font-family: feedback-iconfont; src: url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.woff2?t=1630033759944") format("woff2"), url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.woff?t=1630033759944") format("woff"), url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.ttf?t=1630033759944") format("truetype"); }
+</style></defs><path d="M875.039 549.868c-25.436 0-47.411 13.91-59.3 34.4h-125.9l-99.564-199.177-76.703 281.23-51.528-566.757-67.461-5.735-130.8 490.44H49.397v68.802h267.259l94.464-354.268 51.235 563.733 67.451 5.913 79.432-291.445 38.077 76.057h168.428c11.91 20.419 33.864 34.391 59.3 34.391 37.98 0 68.792-30.879 68.792-68.797-0.005-38.062-30.817-68.787-68.797-68.787z" p-id="2094"></path></svg>
\ No newline at end of file
diff --git a/src/icons/svg/icon-valve.svg b/src/icons/svg/icon-valve.svg
new file mode 100644
index 0000000..f5d96e2
--- /dev/null
+++ b/src/icons/svg/icon-valve.svg
@@ -0,0 +1,2 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1648634707805" class="icon" viewBox="0 0 1090 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3809" xmlns:xlink="http://www.w3.org/1999/xlink" width="136.25" height="128"><defs><style type="text/css">@font-face { font-family: feedback-iconfont; src: url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.woff2?t=1630033759944") format("woff2"), url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.woff?t=1630033759944") format("woff"), url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.ttf?t=1630033759944") format("truetype"); }
+</style></defs><path d="M502.944 296.975V143.052h-231.98c-31.587 0-57.321-24.93-57.321-55.526 0-30.598 25.75-55.526 57.321-55.526H833.06c31.571 0 57.306 24.93 57.306 55.525 0 30.922-25.735 55.526-57.29 55.526h-231.64v153.924h18.179c21.615 0 39.112 16.955 39.112 37.904v90.565l-213.105-0.34v-90.225c0-20.95 17.497-37.904 39.128-37.904h18.194z m-381.74 590.293v63.84c0 9.306-7.834 16.955-17.698 16.955H58.231c-9.862-0.001-17.698-7.65-17.698-17.296V542.472c0-9.63 7.835-17.28 17.698-17.28h45.274c9.863 0 17.698 7.65 17.698 17.28v83.133h150.55c6.272-85.518 79.247-152.95 168.387-152.95h207.98c89.14 0 162.116 67.432 168.403 152.95h150.873v-83.798c0-9.29 7.495-16.615 17.033-16.615h46.297c9.523 0 17.001 7.308 17.001 16.615v409.625c0.341 9.321-7.478 16.63-17.016 16.63h-46.297c-9.523 0-17.018-7.309-17.018-16.63v-64.165H805.36C780.755 948.583 719.655 992 648.119 992H440.142c-71.52 0-132.635-43.402-157.239-104.733H121.204z" p-id="3810"></path></svg>
\ No newline at end of file
diff --git a/src/views/dashboard/components/PanelGroup.vue b/src/views/dashboard/components/PanelGroup.vue
index b72d289..332cbf9 100644
--- a/src/views/dashboard/components/PanelGroup.vue
+++ b/src/views/dashboard/components/PanelGroup.vue
@@ -1,12 +1,12 @@
 <template>
   <el-row class="panel-group">
     <div v-for="card in dataGroup1" :key="card.index" class="card-panel-col">
-      <card1 :title="card.title" :context="card.context" :icon="card.icon" :color="card.color"/>
+      <card1 :title="card.title" :context="card.context" :icon="card.icon" :color="card.color" :unit="card.unit"/>
     </div>
 
     <div v-for="card in dataGroup" :key="card.title" class="card-panel-col">
       <div v-if="hasPerm(card.permission)">
-        <card :title="card.title" :context="card.context" :icon="card.icon" :color="card.color" @click.native="goPage(card.path)"/>
+        <card :title="card.title" :context="card.context" :icon="card.icon" :unit="card.unit" :color="card.color" @click.native="goPage(card.path)"/>
       </div>
     </div>
   </el-row>
@@ -16,7 +16,7 @@
 import Card1 from '@/components/BigData/Card1'
 import Card from '@/components/BigData/Card'
 // 首页
-import { getWatchStatistic , waterMeterCount } from '@/api/overview'
+import { getWatchStatistic , waterMeterCount, valveCount } from '@/api/dashboard'
 // 根据布防数量统计井数量
 import { wellCountByBfzt } from '@/api/well'
 // 当前报警数
@@ -36,30 +36,33 @@
           context: ['--', '--'],
           icon: 'icon-water',
           color: '#40c9c6',
+          unit: '吨',
           index: 0
         },
         {
-          title: ['今日用水量', '昨日用水量'],
+          title: ['今日用水量', '生产厂区用水量'],
           context: ['--', '--'],
-          icon: 'icon-water',
+          icon: '',
           color: '#36a3f7',
+          unit: '吨',
           index: 1
         },
         {
-          title: ['实时噪声'],
+          title: ['滑道实时噪声'],
           context: ['--'],
-          icon: 'icon-device',
+          icon: 'icon-noise',
           color: '#f1c353',
+          unit: 'db',
           index: 2
         }
       ],
       dataGroup: [
         {
-          title: '设备总数',
+          title: '阀门数量',
           context: '--',
-          icon: 'icon-device',
+          icon: 'icon-valve',
           color: '#40c9c6',
-          path: '/deviceList',
+          path: '/deviceList?deviceType=20',
           permission: '/device/list'
         },
         {
@@ -67,11 +70,11 @@
           context: '--',
           icon: 'icon-watch',
           color: '#9694f7',
-          path: '/deviceList',
+          path: '/deviceList?deviceType=13',
           permission: '/device/list'
         },
         {
-          title: '当前报警数',
+          title: '报警信息',
           context: '--',
           icon: 'icon-alarm',
           color: '#f4516c',
@@ -83,10 +86,10 @@
   },
   mounted() {
     this.getWater()
-    this.getWellCount()
+    // this.getWellCount()
     this.getDeviceCount()
     this.getAlarmCount()
-    this.getJobCount()
+    // this.getJobCount()
   },
   methods: {
     refresh() {
@@ -97,24 +100,31 @@
       this.$router.push(path)
     },
     getWater() {
+      // 用水量
       getWatchStatistic().then(response => {
-        this.dataGroup1[0].context = [response.data.total, response.data.month]
-        this.dataGroup1[1].context = [response.data.today, response.data.yesterday]
-        this.dataGroup1[2].context = [Number(response.data.sound).toFixed(2)]
+        this.dataGroup1[0].context = [response.data.total?parseFloat(response.data.total).toFixed(0):'--', response.data.month?parseFloat(response.data.month).toFixed(0):'--']
+        this.dataGroup1[1].context = [response.data.today?parseFloat(response.data.today).toFixed(0):'--', response.data.yesterday?parseFloat(response.data.yesterday).toFixed(0):'--']
+        this.dataGroup1[2].context = [response.data.sound?Number(response.data.sound).toFixed(2):'--']
       })
-      waterMeterCount().then(response => {
-        this.dataGroup[1].context = response.data
-      })
+
     },
-    getWellCount() {
-      wellCountByBfzt().then(response => {
-        this.dataGroup[0].context = response.data.total
-      })
-    },
+    // getWellCount() {
+    //   wellCountByBfzt().then(response => {
+    //     this.dataGroup[0].context = response.data.total
+    //   })
+    // },
     getDeviceCount() {
       // deviceStaticByStatus().then(response => {
       //   this.dataGroup[1].context = response.data.total
       // })
+      // 阀门数量
+      valveCount().then(response => {
+        this.dataGroup[0].context = response.data
+      })
+      // 水表数量
+      waterMeterCount().then(response => {
+        this.dataGroup[1].context = response.data
+      })
     },
     getAlarmCount() {
       alarmNowStatic().then(response => {
@@ -159,7 +169,7 @@
   //   &:hover {
   //     .card-panel-icon-wrapper {
   //       color: #fff;
-        
+
   //     }
 
   //     .icon-people {
diff --git a/src/views/dashboard/components/waterCountByAreaBar.vue b/src/views/dashboard/components/waterCountByAreaBar.vue
index 1bdac48..c488923 100644
--- a/src/views/dashboard/components/waterCountByAreaBar.vue
+++ b/src/views/dashboard/components/waterCountByAreaBar.vue
@@ -1,9 +1,10 @@
 <template>
   <div class="container">
     <div class="statistic-container">
+      <el-button round size="mini" @click="setDefaultTime('year')">本年</el-button>
+      <el-button round size="mini" @click="setDefaultTime('season')">本季</el-button>
       <el-button round size="mini" @click="setDefaultTime('month')">本月</el-button>
-      <el-button round size="mini" @click="setDefaultTime('week')">近7日</el-button>
-      <el-button round size="mini" @click="setDefaultTime('yesterday')">昨日</el-button>
+      <el-button round size="mini" @click="setDefaultTime('week')">本周</el-button>
       <el-button round size="mini" @click="setDefaultTime('today')">今日</el-button>
       <el-date-picker
         v-model="timeRange"
@@ -107,7 +108,7 @@
   },
   mounted() {
     this.setDefaultTime('today')
-    this.fetchArea()
+    // this.fetchArea()
   },
   methods: {
     fetchArea() {
@@ -130,10 +131,11 @@
     },
     fetchData() {
       const params = {
-        areaId: this.areaId,
+        areaId: '110000',
         startTime: this.timeRange[0],
         endTime: this.timeRange[1]
       }
+      this.$emit('change', params)
       countBySecondArea(params).then(response => {
         this.isShow = false
         this.chartData.rows = response.data
@@ -153,7 +155,21 @@
       })
     },
     setDefaultTime(val) {
-      if (val === 'month') {
+      if (val === 'year') {
+        var today = new Date()
+        var tYear = today.getFullYear()
+        const beginTime = tYear + '-01-01'
+        const endTime = getDayTime(new Date().getTime())
+        this.timeRange = [beginTime, endTime.Format('yyyy-MM-dd')]
+      }if (val === 'season') {
+        var today = new Date()
+        var tYear = today.getFullYear()
+        var tMonth = today.getMonth() + 1
+        const oldMonth = tMonth<4?'01':(tMonth<7?'04':(tMonth<10?'07':'10'))
+        const beginTime = tYear + '-' + oldMonth + '-01'
+        const endTime = getDayTime(new Date().getTime())
+        this.timeRange = [beginTime, endTime.Format('yyyy-MM-dd')]
+      }else if (val === 'month') {
         var today = new Date()
         var tYear = today.getFullYear()
         var tMonth = today.getMonth() + 1
@@ -164,7 +180,8 @@
         const endTime = getDayTime(new Date().getTime())
         this.timeRange = [beginTime, endTime.Format('yyyy-MM-dd')]
       } else if (val === 'week') {
-        this.timeRange = [getDayTime(new Date().getTime() - 24 * 6 * 60 * 60 * 1000).Format('yyyy-MM-dd'), getDayTime(new Date().getTime()).Format('yyyy-MM-dd')]
+        const nowDayOfWeek =  new Date().getDay()-1
+        this.timeRange = [getDayTime(new Date().getTime() - 24 * nowDayOfWeek * 60 * 60 * 1000).Format('yyyy-MM-dd'), getDayTime(new Date().getTime()).Format('yyyy-MM-dd')]
       } else if (val === 'yesterday') {
         this.timeRange = [getDayTime(new Date().getTime() - 24 * 60 * 60 * 1000).Format('yyyy-MM-dd'), getDayTime(new Date().getTime() - 24 * 60 * 60 * 1000).Format('yyyy-MM-dd')]
       } else if (val === 'today') {
diff --git a/src/views/dashboard/components/waterCountByDay.vue b/src/views/dashboard/components/waterCountByDay.vue
index 8e12f02..78d1f7c 100644
--- a/src/views/dashboard/components/waterCountByDay.vue
+++ b/src/views/dashboard/components/waterCountByDay.vue
@@ -1,12 +1,12 @@
 <template>
   <div class="container">
-    <div class="function">
-      <el-button round size="mini" @click="changeTime('year')">近1年</el-button>
-      <el-button round size="mini" @click="changeTime('halfyear')">近6月</el-button>
-      <el-button round size="mini" @click="changeTime('3month')">近3月</el-button>
-      <el-button round size="mini" @click="changeTime('month')">近1月</el-button>
-      <el-button round size="mini" @click="changeTime('week')">近1周</el-button>
-    </div>
+    <!--<div class="function">-->
+      <!--<el-button round size="mini" @click="changeTime('year')">近1年</el-button>-->
+      <!--<el-button round size="mini" @click="changeTime('halfyear')">近6月</el-button>-->
+      <!--<el-button round size="mini" @click="changeTime('3month')">近3月</el-button>-->
+      <!--<el-button round size="mini" @click="changeTime('month')">近1月</el-button>-->
+      <!--<el-button round size="mini" @click="changeTime('week')">近1周</el-button>-->
+    <!--</div>-->
     <ve-line :data="chartData" :title="title" :extend="extend" :settings="chartSettings"/>
   </div>
 </template>
@@ -17,6 +17,18 @@
 import { getDoorAreaTree } from '@/api/system/area'
 export default {
   name: 'WaterCountByDay',
+  props:{
+    query: {
+      type: Object,
+      default:()=>{
+        return {
+          areaId: '',
+          startTime: '',
+          endTime: ''
+        }
+      }
+    }
+  },
   data() {
     return {
       listQuery: {
@@ -52,8 +64,13 @@
     }
   },
   mounted() {
-    this.changeTime('month')
-    this.fetchArea()
+    // this.changeTime('month')
+    // this.fetchArea()
+  },
+  watch:{
+    query(val){
+      this.fetchData()
+    }
   },
   methods: {
     fetchArea() {
@@ -73,7 +90,7 @@
       })
     },
     fetchData() {
-      countByDayFirst(this.listQuery).then(response => {
+      countByDayFirst(this.query).then(response => {
         const arr = response.data.map(function(item) {
           for (let i = 0; i < item.data.length; i++) {
             item[item.data[i].areaName] = item.data[i].count
diff --git a/src/views/dashboard/components/waterCountByDept.vue b/src/views/dashboard/components/waterCountByDept.vue
index a0c82cf..02e27cd 100644
--- a/src/views/dashboard/components/waterCountByDept.vue
+++ b/src/views/dashboard/components/waterCountByDept.vue
@@ -1,22 +1,22 @@
 <!--suppress ALL -->
 <template>
   <div class="container">
-    <div class="function">
-      <el-button round size="mini" @click="changeTime('year')">近1年</el-button>
-      <el-button round size="mini" @click="changeTime('halfyear')">近6月</el-button>
-      <el-button round size="mini" @click="changeTime('3month')">近3月</el-button>
-      <el-button round size="mini" @click="changeTime('month')">近1月</el-button>
-      <el-button round size="mini" @click="changeTime('week')">近1周</el-button>
-    </div>
+    <!--<div class="function">-->
+      <!--<el-button round size="mini" @click="changeTime('year')">近1年</el-button>-->
+      <!--<el-button round size="mini" @click="changeTime('halfyear')">近6月</el-button>-->
+      <!--<el-button round size="mini" @click="changeTime('3month')">近3月</el-button>-->
+      <!--<el-button round size="mini" @click="changeTime('month')">近1月</el-button>-->
+      <!--<el-button round size="mini" @click="changeTime('week')">近1周</el-button>-->
+    <!--</div>-->
     <ve-pie :data="chartData" :extend="extend" :title="title"/>
-    <div class="function">
-      <el-button
-        v-for="item in areaList"
-        :key="item.id"
-        round
-        @click="areaChange(item.id)"
-        size="mini">{{item.name}}</el-button>
-    </div>
+    <!--<div class="function">-->
+      <!--<el-button-->
+        <!--v-for="item in areaList"-->
+        <!--:key="item.id"-->
+        <!--round-->
+        <!--@click="areaChange(item.id)"-->
+        <!--size="mini">{{item.name}}</el-button>-->
+    <!--</div>-->
   </div>
 </template>
 
@@ -25,6 +25,18 @@
 import { getDoorAreaTree } from '@/api/system/area'
 export default {
   name: 'WaterCountByDepy',
+  props:{
+    query: {
+      type: Object,
+      default:()=>{
+        return {
+          areaId: '',
+          startTime: '',
+          endTime: ''
+        }
+      }
+    }
+  },
   data() {
     return {
       listQuery: {
@@ -69,7 +81,12 @@
   },
   mounted() {
     // TODO:待调试真接口
-    this.fetchArea()
+    // this.fetchArea()
+  },
+  watch:{
+    query(val){
+      this.fetchData()
+    }
   },
   methods: {
     fetchArea() {
@@ -104,8 +121,7 @@
       //   { 'areaName': '码头作业区', 'count': 78 },
       //   { 'areaName': '车间生产区', 'count': 78 }
       // ]
-      this.listQuery.areaId = this.areaId
-      countBySecondArea(this.listQuery).then(response => {
+      countBySecondArea(this.query).then(response => {
         this.chartData.rows = response.data
       })
     },
diff --git a/src/views/dashboard/components/waterNote.vue b/src/views/dashboard/components/waterNote.vue
new file mode 100644
index 0000000..aa0f448
--- /dev/null
+++ b/src/views/dashboard/components/waterNote.vue
@@ -0,0 +1,152 @@
+<!--suppress ALL -->
+<template>
+  <div class="container">
+    <div>
+      用水事记
+    </div>
+
+  </div>
+</template>
+
+<script>
+import { countBySecondArea } from '@/api/overview'
+import { getDoorAreaTree } from '@/api/system/area'
+export default {
+  name: 'WaterNote',
+  props:{
+    query: {
+      type: Object,
+      default:()=>{
+        return {
+          areaId: '',
+          startTime: '',
+          endTime: ''
+        }
+      }
+    }
+  },
+  data() {
+    return {
+      listQuery: {
+        areaId: '',
+        startTime: '',
+        endTime: ''
+      },
+      areaId:'',
+      areaList: [],
+      chartData: {
+        columns: ['areaName', 'count'],
+        rows: []
+      },
+      extend: {
+        grid: {
+          right: '30%'
+        },
+        legend: {
+          type: 'scroll',
+          top: '60px',
+          right: '0px',
+          orient: 'vertical'
+        },
+        series: {
+          label: { show: true, position: 'outside', formatter: '{b}' },
+          right: 120
+        },
+        tooltip: { trigger: 'item', formatter: '{b}<br/>用水量：{c}吨<br/>占比：{d}%' }
+      },
+      title: {
+        text: '分区用水占比图'
+      },
+      chartSettings: {
+        labelMap: {
+          'areaName': '分区',
+          'count': '用水量'
+        },
+        dimension: 'areaName',
+        metrics: 'count'
+      }
+    }
+  },
+  mounted() {
+    // TODO:待调试真接口
+    // this.fetchArea()
+  },
+  watch:{
+    query(val){
+      this.fetchData()
+    }
+  },
+  methods: {
+    fetchArea() {
+      getDoorAreaTree().then(response => {
+        if (response.code === 200) {
+          this.areaList = response.data.filter(item => {
+            return item.pid === '1'
+          }).map(function(item) {
+            return {
+              id: item.id, name: item.name
+            }
+          })
+          if (this.areaList.length !== 0) { this.areaChange(this.areaList[0].id) }
+        }
+      })
+    },
+    areaChange(val){
+      this.areaId = val
+      this.fetchData()
+    },
+    // 获取统计数据
+    fetchData() {
+      // this.chartData.rows = [
+      //   { 'areaName': '科技楼及食堂', 'count': 53 },
+      //   { 'areaName': 'A\\B\\C\\D\\E座', 'count': 78 },
+      //   { 'areaName': '厂区', 'count': 78 },
+      //   { 'areaName': '分段分区', 'count': 78 },
+      //   { 'areaName': '船坞分区', 'count': 78 },
+      //   { 'areaName': '刀把码头', 'count': 78 },
+      //   { 'areaName': '制管作业区', 'count': 78 },
+      //   { 'areaName': '滑道作业区', 'count': 78 },
+      //   { 'areaName': '码头作业区', 'count': 78 },
+      //   { 'areaName': '车间生产区', 'count': 78 }
+      // ]
+      countBySecondArea(this.query).then(response => {
+        this.chartData.rows = response.data
+      })
+    },
+    changeTime(timeType) {
+      let startTime
+      switch (timeType) {
+        case 'year':
+          startTime = getDayTime(new Date().getTime() - 24 * 365 * 60 * 60 * 1000)
+          this.listQuery.startTime = startTime.Format('yyyy-MM-dd')
+          break
+        case 'halfyear':
+          startTime = getDayTime(new Date().getTime() - 24 * 182 * 60 * 60 * 1000)
+          this.listQuery.startTime = startTime.Format('yyyy-MM-dd')
+          break
+        case '3month':
+          startTime = getDayTime(new Date().getTime() - 24 * 90 * 60 * 60 * 1000)
+          this.listQuery.startTime = startTime.Format('yyyy-MM-dd')
+          break
+        case 'month':
+          startTime = getDayTime(new Date().getTime() - 24 * 30 * 60 * 60 * 1000)
+          this.listQuery.startTime = startTime.Format('yyyy-MM-dd')
+          break
+        case 'week':
+          startTime = getDayTime(new Date().getTime() - 24 * 7 * 60 * 60 * 1000)
+          this.listQuery.startTime = startTime.Format('yyyy-MM-dd')
+          break
+      }
+      const endTime = new Date()
+      this.listQuery.endTime = endTime.Format('yyyy-MM-dd')
+      this.fetchData()
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+  .container{
+    position:relative;
+    height: 455px;
+  }
+</style>
diff --git a/src/views/dashboard/index.vue b/src/views/dashboard/index.vue
index fdbc38a..831dbc3 100644
--- a/src/views/dashboard/index.vue
+++ b/src/views/dashboard/index.vue
@@ -1,31 +1,33 @@
 <template>
   <div class="dashboard-container" style="background-color: white">
     <panel-group ref="panelgroup"/>
-    <el-row :gutter="10">
+    <el-row>
       <!-- 用水统计图 -->
+      <el-col :span="18">
+        <el-card shadow="never">
+          <water-count-by-area-bar @change="changeWaterQuery"/>
+        </el-card>
+      </el-col>
+      <el-col :span="6">
+        <el-card shadow="never">
+          <water-note/>
+        </el-card>
+      </el-col>
+    </el-row>
+    <el-row>
+      <!-- 分区用水占比图 -->
       <el-col :span="12">
         <el-card shadow="never">
-          <water-count-by-dept-bar/>
+          <water-count-by-dept :query="listQuery1" ref="waterCountPie"/>
         </el-card>
       </el-col>
       <!-- 用水走势图 -->
       <el-col :span="12">
         <el-card shadow="never">
-          <water-count-by-day/>
+          <water-count-by-day :query="listQuery1" ref="waterCountDay"/>
         </el-card>
       </el-col>
-      <!-- 分区用水统计图 -->
-      <el-col :span="12">
-        <el-card shadow="never">
-          <water-count-by-area-bar/>
-        </el-card>
-      </el-col>
-      <!-- 分区用水占比图 -->
-      <el-col :span="12">
-        <el-card shadow="never">
-          <water-count-by-depy/>
-        </el-card>
-      </el-col>
+
       <!--水表报警次数统计-->
       <el-col v-if="hasPerm('/statics/alarmsByDay')" :span="12">
         <el-card shadow="never">
@@ -64,20 +66,22 @@
 import DeviceCountByOnline from './components/DeviceCountByOnline'
 import AlarmByDays from './components/AlarmByDays'
 import JobByStatus from './components/JobByStatus'
-import WaterCountByDepy from './components/waterCountByDept'
+import WaterCountByDept from './components/waterCountByDept'
 import WaterCountByDeptBar from './components/waterCountByDeptBar'
 import WaterCountByDay from './components/waterCountByDay'
 import WaterCountByAreaBar from "./components/waterCountByAreaBar";
 import WatchAlarmBar from "./components/watchAlarmBar";
+import WaterNote from "./components/waterNote";
 
 export default {
   name: 'Dashboard',
   components: {
+    WaterNote,
     WatchAlarmBar,
     WaterCountByAreaBar,
     WaterCountByDay,
     WaterCountByDeptBar,
-    WaterCountByDepy,
+    WaterCountByDept,
     JobByStatus,
     AlarmByDays,
     PanelGroup,
@@ -108,12 +112,25 @@
       state.needRefresh = needRefresh
     }
   },
+  data(){
+    return {
+      listQuery1:{
+        areaId:'110000',
+        startTime:new Date().Format('yyyy-MM-dd'),
+        endTime:new Date().Format('yyyy-MM-dd')
+      },// 分区用水量查询条件
+      listQuery2:{
+        areaId:'',
+        startTime:'',
+        endTime:''
+      } // 分区报警查询条件
+    }
+  },
   watch: {
     needRefresh(val) {
       // 需要刷新
       if (val) {
         console.log('refresh dashboard')
-        debugger
         this.$refs.panelgroup.refresh()
       }
     }
@@ -124,6 +141,10 @@
   methods: {
     webSocket() {
       this.$store.dispatch('initWebSocket')
+    },
+    // 切换分区查询条件
+    changeWaterQuery(listQuery1){
+      this.listQuery1 = listQuery1
     }
   }
 }
diff --git a/src/views/dashboard/index_bak.vue b/src/views/dashboard/index_bak.vue
new file mode 100644
index 0000000..fdbc38a
--- /dev/null
+++ b/src/views/dashboard/index_bak.vue
@@ -0,0 +1,149 @@
+<template>
+  <div class="dashboard-container" style="background-color: white">
+    <panel-group ref="panelgroup"/>
+    <el-row :gutter="10">
+      <!-- 用水统计图 -->
+      <el-col :span="12">
+        <el-card shadow="never">
+          <water-count-by-dept-bar/>
+        </el-card>
+      </el-col>
+      <!-- 用水走势图 -->
+      <el-col :span="12">
+        <el-card shadow="never">
+          <water-count-by-day/>
+        </el-card>
+      </el-col>
+      <!-- 分区用水统计图 -->
+      <el-col :span="12">
+        <el-card shadow="never">
+          <water-count-by-area-bar/>
+        </el-card>
+      </el-col>
+      <!-- 分区用水占比图 -->
+      <el-col :span="12">
+        <el-card shadow="never">
+          <water-count-by-depy/>
+        </el-card>
+      </el-col>
+      <!--水表报警次数统计-->
+      <el-col v-if="hasPerm('/statics/alarmsByDay')" :span="12">
+        <el-card shadow="never">
+          <watch-alarm-bar/>
+        </el-card>
+      </el-col>
+      <!--报警次数统计-->
+      <el-col v-if="hasPerm('/statics/alarmsByDay')" :span="12">
+        <el-card shadow="never">
+          <alarm-by-days/>
+        </el-card>
+      </el-col>
+      <!--设备在线数量统计-->
+      <el-col v-if="hasPerm('/statics/deviceStaticsByType')" :span="12">
+        <el-card shadow="never">
+          <device-count-by-online/>
+        </el-card>
+      </el-col>
+
+      <!--设备数量统计-->
+      <el-col v-if="hasPerm('/statics/deviceStaticsByType')" :span="12">
+        <el-card shadow="never">
+          <device-count/>
+        </el-card>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+import PanelGroup from './components/PanelGroup'
+import WellCountByBfzt from './components/WellCountByBfzt'
+import WellCountByType from './components/WellCountByType'
+import DeviceCount from './components/DeviceCount'
+import DeviceCountByOnline from './components/DeviceCountByOnline'
+import AlarmByDays from './components/AlarmByDays'
+import JobByStatus from './components/JobByStatus'
+import WaterCountByDepy from './components/waterCountByDept'
+import WaterCountByDeptBar from './components/waterCountByDeptBar'
+import WaterCountByDay from './components/waterCountByDay'
+import WaterCountByAreaBar from "./components/waterCountByAreaBar";
+import WatchAlarmBar from "./components/watchAlarmBar";
+
+export default {
+  name: 'Dashboard',
+  components: {
+    WatchAlarmBar,
+    WaterCountByAreaBar,
+    WaterCountByDay,
+    WaterCountByDeptBar,
+    WaterCountByDepy,
+    JobByStatus,
+    AlarmByDays,
+    PanelGroup,
+    WellCountByBfzt,
+    WellCountByType,
+    DeviceCount,
+    DeviceCountByOnline
+  },
+  computed: {
+    ...mapGetters([
+      'name',
+      'roleNames',
+      'roleTips',
+      'wellTypes',
+      'deviceTypes',
+      'communications',
+      'area'
+    ])
+  },
+  mutations: {
+    SET_WEBSOCKET: (state, websocket) => {
+      state.websocket = websocket
+    },
+    SET_WS_STATUS: (state, wsStatus) => {
+      state.wsStatus = wsStatus
+    },
+    SET_NEED_REFRESH: (state, needRefresh) => {
+      state.needRefresh = needRefresh
+    }
+  },
+  watch: {
+    needRefresh(val) {
+      // 需要刷新
+      if (val) {
+        console.log('refresh dashboard')
+        debugger
+        this.$refs.panelgroup.refresh()
+      }
+    }
+  },
+  mounted() {
+    // this.webSocket()
+  },
+  methods: {
+    webSocket() {
+      this.$store.dispatch('initWebSocket')
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.dashboard-container{
+  .el-row{
+    .el-col{
+      margin-bottom: 10px;
+    }
+  }
+}
+.dashboard {
+  &-container {
+    padding: 10px 20px;
+  }
+  &-text {
+    font-size: 30px;
+    line-height: 46px;
+  }
+}
+</style>
diff --git a/src/views/layout/Layout.vue b/src/views/layout/Layout.vue
deleted file mode 100644
index 7c3d46d..0000000
--- a/src/views/layout/Layout.vue
+++ /dev/null
@@ -1,111 +0,0 @@
-<template>
-  <el-container :class="classObj" class="app-wrapper">
-    <div v-if="device==='mobile'&&sidebar.opened" class="drawer-bg" @click="handleClickOutside"/>
-    <app-header class="app-header"/>
-    <el-main class="app-body">
-      <!--侧边栏-->
-      <sidebar class="sidebar-container"/>
-      <!--右半部分-->
-      <div :class="{hasTagsView:needTagsView}" class="main-container">
-        <!--开启固定头部设置-->
-        <div v-if="fixedHeader">
-          <!--导航(面包屑)-->
-          <navbar/>
-          <!--标签栏-->
-          <tags-view v-if="needTagsView" />
-          <!--主内容包裹在el-scrollbar中-->
-          <el-scrollbar class="no-head-scrollbar">
-            <app-main/>
-          </el-scrollbar>
-        </div>
-        <!--为开始固定头部设置-->
-        <div v-else>
-          <!--导航，tagsView都包裹在el-scrollbar中-->
-          <el-scrollbar class="has-head-scrollbar">
-            <navbar/>
-            <tags-view v-if="needTagsView" />
-            <app-main/>
-          </el-scrollbar>
-        </div>
-        <!--悬浮框-->
-        <right-panel v-if="false">
-          <settings />
-        </right-panel>
-      </div>
-    </el-main>
-  </el-container>
-</template>
-
-<script>
-import RightPanel from '@/components/RightPanel'
-import { AppHeader, Navbar, Sidebar, AppMain } from './components'
-import ResizeMixin from './mixin/ResizeHandler'
-import TagsView from './components/TagsView/index'
-import { mapState } from 'vuex'
-import Settings from './components/Settings/index'
-
-export default {
-  name: 'Layout',
-  components: {
-    Settings,
-    TagsView,
-    AppHeader,
-    Navbar,
-    Sidebar,
-    AppMain,
-    RightPanel
-  },
-  mixins: [ResizeMixin],
-  computed: {
-    ...mapState({
-      sidebar: state => state.app.sidebar,
-      device: state => state.app.device,
-      showSettings: state => state.settings.showSettings,
-      needTagsView: state => state.settings.tagsView,
-      fixedHeader: state => state.settings.fixedHeader
-    }),
-    classObj() {
-      return {
-        hideSidebar: !this.sidebar.opened,
-        openSidebar: this.sidebar.opened,
-        withoutAnimation: this.sidebar.withoutAnimation,
-        mobile: this.device === 'mobile'
-      }
-    }
-  },
-  methods: {
-    handleClickOutside() {
-      this.$store.dispatch('CloseSideBar', { withoutAnimation: false })
-    }
-  }
-}
-</script>
-
-<style rel="stylesheet/scss" lang="scss" scoped>
-  @import "src/styles/mixin.scss";
-  .app-wrapper {
-    @include clearfix;
-    position: relative;
-    height: 100%;
-    width: 100%;
-    &.mobile.openSidebar{
-      position: fixed;
-      top: 0;
-    }
-  }
-  .drawer-bg {
-    background: #000;
-    opacity: 0.3;
-    width: 100%;
-    top: 0;
-    height: 100%;
-    position: absolute;
-    z-index: 999;
-  }
-  /*.el-scrollbar{*/
-    /*height: calc(100vh - 50px);*/
-  /*}*/
-  .has-head-scrollbar{
-    height: 100vh;
-  }
-</style>
diff --git a/src/views/layout/components/AppHeader.vue b/src/views/layout/components/AppHeader.vue
deleted file mode 100644
index 8d8912e..0000000
--- a/src/views/layout/components/AppHeader.vue
+++ /dev/null
@@ -1,151 +0,0 @@
-<template>
-  <el-header class="app-header">
-    <h3>{{ title }}</h3>
-    <!--子系统选项-->
-    <el-dropdown v-if="showChangeSys" class="systemSelect" size="medium" @command="handleCommand">
-      <span class="el-dropdown-link">{{ currentSystem.name }}<i class="el-icon-arrow-down el-icon--right"/>
-      </span>
-      <el-dropdown-menu slot="dropdown">
-        <el-dropdown-item v-for="system in systems" :command="system" :key="system.id">{{ system.name }}</el-dropdown-item>
-      </el-dropdown-menu>
-    </el-dropdown>
-    <el-dropdown class="dropdown-container" trigger="click">
-      <div class="dropdown-wrapper">
-        <span style="line-height:50px;">欢迎您，{{ name }}</span>
-        <!--<img :src="avatar+'?imageView2/1/w/80/h/80'" class="user-avatar">-->
-        <i class="el-icon-arrow-down"/>
-      </div>
-      <el-dropdown-menu slot="dropdown" class="user-dropdown">
-        <el-dropdown-item v-if="!baseConfig.singleSys">
-          <span style="display:block;" @click="backToIndex">回首页</span>
-        </el-dropdown-item>
-        <el-dropdown-item :divided="!baseConfig.singleSys">
-          <span style="display:block;" @click="resetPwd">修改密码</span>
-        </el-dropdown-item>
-        <el-dropdown-item divided>
-          <span style="display:block;" @click="logout">注销</span>
-        </el-dropdown-item>
-      </el-dropdown-menu>
-    </el-dropdown>
-    <reset-pwd v-show="showSetPwd" ref="retPwd"/>
-  </el-header>
-</template>
-
-<script>
-import { mapGetters } from 'vuex'
-import ResetPwd from '@/views/system/user/resetPwd'
-
-export default {
-  name: 'AppHeader',
-  components: { ResetPwd },
-  data() {
-    return {
-      title: this.baseConfig.title, // 标题
-      showChangeSys: !this.baseConfig.singleSys, // 是否显示切换系统菜单
-      name: this.$store.getters.name, // 用户姓名
-      showSetPwd: false // 是否显示修改密码按钮
-    }
-  },
-  computed: {
-    ...mapGetters([
-      'sidebar',
-      'avatar',
-      'currentSystem',
-      'systems'
-    ])
-  },
-  created() {
-    if (!this.baseConfig.singleSys) {
-      this.getSystems()
-    }
-  },
-  methods: {
-    toggleSideBar() {
-      this.$store.dispatch('ToggleSideBar')
-    },
-    logout() {
-      this.$store.dispatch('LogOut').then(() => {
-        location.reload() // 为了重新实例化vue-router对象 避免bug
-      })
-    },
-    resetPwd() {
-      this.showSetPwd = true
-      this.$refs.retPwd.initDialog(true)
-    },
-    backToIndex() {
-      const url = this.baseConfig.mainPage
-      window.location.href = url
-    },
-    // 切换子系统
-    handleCommand(command) {
-      console.log('切换子系统:' + command.name)
-      const params1 = `?token=${this.$store.getters.token}`
-      const params = `?sys=${command.name}&url=${command.url}&code=${command.code}&token=${this.$store.getters.token}`
-      // 判断系统是不是http的，如果是则打开新窗口
-      if (command.url.indexOf('http') > -1) {
-      // 取token
-        if (this.baseConfig.sameWindow) {
-          window.location.href = command.url + params1
-        } else {
-          window.open(command.url + params1, '_blank')
-        }
-      } else {
-      // 取token
-        if (this.baseConfig.sameWindow) {
-          window.location.href = this.baseConfig.mainPage + command.url + params
-        } else {
-          window.open(this.baseConfig.mainPage + command.url + params, '_blank')
-        }
-      }
-    },
-    // 获取子系统
-    getSystems() {
-      this.$store.dispatch('GetSystems').then(() => {
-        console.log('获取子系统列表成功-appHeader')
-      })
-    }
-  }
-}
-</script>
-
-<style rel="stylesheet/scss" lang="scss" scoped>
-  h3{
-    margin-left:24px;
-    display: inline-block;
-    float:left;
-  }
-  .dropdown-container {
-    /*height: 50px;*/
-    display: inline-block;
-    float: right;
-    z-index:500;
-    position: fixed;
-    top:0px;
-    right: 35px;
-    .dropdown-wrapper {
-      cursor: pointer;
-      margin-top: 5px;
-      position: relative;
-      line-height: initial;
-      .user-avatar {
-        width: 40px;
-        height: 40px;
-        border-radius: 10px;
-      }
-      .el-icon-caret-bottom {
-        font-size: 12px;
-      }
-    }
-  }
-  .systemSelect{
-    height: 56px;
-    display: inline-block;
-    float: left;
-    z-index:500;
-    position: fixed;
-    margin-left:60px;
-    top:5px;
-    color:#fff;
-    line-height: 56px;
-  }
-</style>
diff --git a/src/views/layout/components/AppMain.vue b/src/views/layout/components/AppMain.vue
deleted file mode 100644
index 2ea268e..0000000
--- a/src/views/layout/components/AppMain.vue
+++ /dev/null
@@ -1,38 +0,0 @@
-<template>
-  <section class="app-main">
-    <transition name="fade-transform" mode="out-in">
-      <!-- or name="fade" -->
-      <!-- <router-view :key="key"></router-view> -->
-      <div>
-        <keep-alive>
-          <router-view v-if="$route.meta.keepAlive" :key="key"/>
-        </keep-alive>
-        <router-view v-if="!$route.meta.keepAlive" :key="key"/>
-      </div>
-    </transition>
-  </section>
-</template>
-
-<script>
-export default {
-  name: 'AppMain',
-  computed: {
-    key() {
-      if (this.$route.meta.keepAlive) {
-        return this.$route.name !== undefined ? this.$route.name : this.$route
-      } else {
-        return this.$route.name !== undefined ? this.$route.name + new Date() : this.$route + new Date()
-      }
-    }
-  }
-}
-</script>
-
-<style scoped>
-.app-main {
-  /*50 = navbar  */
-  /*min-height: calc(100vh - 50px);*/
-  position: relative;
-  overflow: hidden;
-}
-</style>
diff --git a/src/views/layout/components/Navbar.vue b/src/views/layout/components/Navbar.vue
deleted file mode 100644
index 24ea99b..0000000
--- a/src/views/layout/components/Navbar.vue
+++ /dev/null
@@ -1,78 +0,0 @@
-<template>
-  <div class="navbar">
-    <hamburger :toggle-click="toggleSideBar" :is-active="sidebar.opened" class="hamburger-container"/>
-    <breadcrumb />
-  </div>
-</template>
-
-<script>
-import { mapGetters } from 'vuex'
-import Breadcrumb from '@/components/Breadcrumb'
-import Hamburger from '@/components/Hamburger'
-
-export default {
-  components: {
-    Breadcrumb,
-    Hamburger
-  },
-  computed: {
-    ...mapGetters([
-      'sidebar'
-    ])
-  },
-  methods: {
-    toggleSideBar() {
-      this.$store.dispatch('ToggleSideBar')
-    },
-    logout() {
-      this.$store.dispatch('LogOut').then(() => {
-        location.reload() // 为了重新实例化vue-router对象 避免bug
-      })
-    }
-  }
-}
-</script>
-
-<style rel="stylesheet/scss" lang="scss" scoped>
-.navbar {
-  height: 50px;
-  line-height: 50px;
-  box-shadow: 0 1px 3px 0 rgba(0,0,0,.12), 0 0 3px 0 rgba(0,0,0,.04);
-  .hamburger-container {
-    text-align: center;
-    height: 50px;
-    float: left;
-    padding: 0 12px;
-  }
-  .screenfull {
-    position: absolute;
-    right: 90px;
-    top: 16px;
-    color: red;
-  }
-  .avatar-container {
-    height: 50px;
-    display: inline-block;
-    position: absolute;
-    right: 35px;
-    .avatar-wrapper {
-      cursor: pointer;
-      margin-top: 5px;
-      position: relative;
-      line-height: initial;
-      .user-avatar {
-        width: 40px;
-        height: 40px;
-        border-radius: 10px;
-      }
-      .el-icon-caret-bottom {
-        position: absolute;
-        right: -20px;
-        top: 25px;
-        font-size: 12px;
-      }
-    }
-  }
-}
-</style>
-
diff --git a/src/views/layout/components/Settings/index.vue b/src/views/layout/components/Settings/index.vue
deleted file mode 100644
index cf3023d..0000000
--- a/src/views/layout/components/Settings/index.vue
+++ /dev/null
@@ -1,109 +0,0 @@
-<template>
-  <div class="drawer-container">
-    <div>
-      <h3 class="drawer-title">Page style setting</h3>
-
-      <div class="drawer-item">
-        <span>Theme Color</span>
-        <theme-picker style="float: right;height: 26px;margin: -3px 8px 0 0;" @change="themeChange" />
-      </div>
-
-      <div class="drawer-item">
-        <span>Open Tags-View</span>
-        <el-switch v-model="tagsView" class="drawer-switch" />
-      </div>
-
-      <div class="drawer-item">
-        <span>Fixed Header</span>
-        <el-switch v-model="fixedHeader" class="drawer-switch" />
-      </div>
-
-      <div class="drawer-item">
-        <span>Sidebar Logo</span>
-        <el-switch v-model="sidebarLogo" class="drawer-switch" />
-      </div>
-
-    </div>
-  </div>
-</template>
-
-<script>
-import ThemePicker from '@/components/ThemePicker'
-
-export default {
-  name: 'Settings',
-  components: { ThemePicker },
-  data() {
-    return {}
-  },
-  computed: {
-    fixedHeader: {
-      get() {
-        return this.$store.state.settings.fixedHeader
-      },
-      set(val) {
-        this.$store.dispatch('settings/changeSetting', {
-          key: 'fixedHeader',
-          value: val
-        })
-      }
-    },
-    tagsView: {
-      get() {
-        return this.$store.state.settings.tagsView
-      },
-      set(val) {
-        this.$store.dispatch('settings/changeSetting', {
-          key: 'tagsView',
-          value: val
-        })
-      }
-    },
-    sidebarLogo: {
-      get() {
-        return this.$store.state.settings.sidebarLogo
-      },
-      set(val) {
-        this.$store.dispatch('settings/changeSetting', {
-          key: 'sidebarLogo',
-          value: val
-        })
-      }
-    }
-  },
-  methods: {
-    themeChange(val) {
-      this.$store.dispatch('settings/changeSetting', {
-        key: 'theme',
-        value: val
-      })
-    }
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-.drawer-container {
-  padding: 24px;
-  font-size: 14px;
-  line-height: 1.5;
-  word-wrap: break-word;
-
-  .drawer-title {
-    margin-bottom: 12px;
-    color: rgba(0, 0, 0, .85);
-    font-size: 14px;
-    line-height: 22px;
-  }
-
-  .drawer-item {
-    color: rgba(0, 0, 0, .65);
-    font-size: 14px;
-    padding: 12px 0;
-  }
-
-  .drawer-switch {
-    float: right
-  }
-}
-</style>
diff --git a/src/views/layout/components/Sidebar/Item.vue b/src/views/layout/components/Sidebar/Item.vue
deleted file mode 100644
index 4ed6b5f..0000000
--- a/src/views/layout/components/Sidebar/Item.vue
+++ /dev/null
@@ -1,31 +0,0 @@
-<script>
-export default {
-  name: 'MenuItem',
-  functional: true,
-  props: {
-    icon: {
-      type: String,
-      default: ''
-    },
-    title: {
-      type: String,
-      default: ''
-    }
-  },
-  render(h, context) {
-    const { icon, title } = context.props
-    const vnodes = []
-
-    if (icon) {
-      vnodes.push(<svg-icon icon-class={icon}/>)
-    } else {
-      vnodes.push(<span style='display:inline-block;width:30px;'></span>)
-    }
-
-    if (title) {
-      vnodes.push(<span slot='title'>{(title)}</span>)
-    }
-    return vnodes
-  }
-}
-</script>
diff --git a/src/views/layout/components/Sidebar/Link.vue b/src/views/layout/components/Sidebar/Link.vue
deleted file mode 100644
index bff45cd..0000000
--- a/src/views/layout/components/Sidebar/Link.vue
+++ /dev/null
@@ -1,36 +0,0 @@
-
-<template>
-  <!-- eslint-disable vue/require-component-is -->
-  <component v-bind="linkProps(to)">
-    <slot/>
-  </component>
-</template>
-
-<script>
-import { isExternal } from '@/utils/validate'
-
-export default {
-  props: {
-    to: {
-      type: String,
-      required: true
-    }
-  },
-  methods: {
-    linkProps(url) {
-      if (isExternal(url)) {
-        return {
-          is: 'a',
-          href: url,
-          target: '_blank',
-          rel: 'noopener'
-        }
-      }
-      return {
-        is: 'router-link',
-        to: url
-      }
-    }
-  }
-}
-</script>

diff --git a/src/api/dashboard.js b/src/api/dashboard.js
index e69de29..0a4ddfc 100644
--- a/src/api/dashboard.js
+++ b/src/api/dashboard.js
@@ -0,0 +1,73 @@
+/**
+ * 井总览模块接口
+ */
+import request from '@/utils/request'
+
+// 用水量、噪声统计数据
+export function getWatchStatistic() {
+  return request({
+    url: 'waterStatistic/overview',
+    method: 'get'
+  })
+}
+// 水表数量
+export function waterMeterCount() {
+  return request({
+    url: 'waterMeterData/count',
+    method: 'get'
+  })
+}
+// 阀门数量
+export function valveCount() {
+  return request({
+    url: 'waterMeterData/count',
+    method: 'get'
+  })
+}
+
+// 查询一级分区各区用水量
+export function countByFirstArea(params) {
+  return request({
+    url: 'waterStatistic/countByFirstArea',
+    method: 'get',
+    params
+  })
+}
+
+// 查询一级分区7日用水量
+export function countByDayFirst(params) {
+  return request({
+    url: 'waterStatistic/countByDayFirst',
+    method: 'get',
+    params
+  })
+}
+
+// 查询二级分区各区用水量
+export function countBySecondArea(params) {
+  return request({
+    url: 'waterStatistic/countBySecondArea',
+    method: 'get',
+    params
+  })
+}
+
+// 查询二级分区水表告警
+export function alarmBySecondArea(params) {
+  return request({
+    url: 'waterStatistic/alarmBySecondArea',
+    method: 'get',
+    params
+  })
+}
+
+// 设备7日报警趋势
+export function alarmCountByDay(params) {
+  return request({
+    url: 'waterStatistic/alarmCountByDay',
+    method: 'get',
+    params
+  })
+}
+
+
diff --git a/src/components/BigData/Card/index.vue b/src/components/BigData/Card/index.vue
index d71e609..45359c9 100644
--- a/src/components/BigData/Card/index.vue
+++ b/src/components/BigData/Card/index.vue
@@ -10,6 +10,7 @@
         </div>
         <div class="card-panel-num" >
           {{ context }}
+          <span style="font-size: 10px;color:#888">{{unit}}</span>
         </div>
       </div>
     </div>
@@ -39,6 +40,10 @@
     color: {
       type: String,
       default: '#40c9c6'
+    },
+    unit:{
+      type: String,
+      default:''
     }
   },
   computed: {
diff --git a/src/components/BigData/Card1/index.vue b/src/components/BigData/Card1/index.vue
index 030b2dc..aa46454 100644
--- a/src/components/BigData/Card1/index.vue
+++ b/src/components/BigData/Card1/index.vue
@@ -1,10 +1,11 @@
 <template>
   <el-card :body-style="{ padding: '0px' }" shadow="always">
-    <div class="card-panel" >
-      <div :style="backgroundColor" class="card-panel-icon-wrapper">
-        <svg-icon :icon-class="icon" class-name="card-panel-icon" />
+    <div class="card-panel">
+      <div v-if="icon" :style="backgroundColor" class="card-panel-icon-wrapper">
+        <svg-icon :icon-class="icon" class-name="card-panel-icon"/>
       </div>
-      <div  class="card-panel-description">
+      <div v-else style="float:left; width: 20px;height: 100%;"></div>
+      <div class="card-panel-description">
         <!-- <div class="card-panel-text">
           {{ title[0] }} <span class="card-panel-num">{{ context[0] }}</span>
         </div>
@@ -13,18 +14,20 @@
         </div> -->
         <div class="two" v-if="title.length===2">
           <div class="card-panel-text">
-            {{ title[0] }} <span class="card-panel-num">{{ context[0] }}</span>
+            {{ title[0] }} <span class="card-panel-num">{{ context[0] }}<span
+            style="font-size: 10px;color:#888;margin-left: 5px">{{unit}}</span></span>
           </div>
-          <div class="card-panel-text" >
-            {{ title[1] }} <span class="card-panel-num">{{ context[1] }}</span>
+          <div class="card-panel-text">
+            {{ title[1] }} <span class="card-panel-num">{{ context[1] }}<span
+            style="font-size: 10px;color:#888;margin-left: 5px">{{unit}}</span></span>
           </div>
         </div>
         <div class="only" v-else>
           <div class="card-panel-text">
             {{ title[0] }}
           </div>
-          <div class="card-panel-num" >
-            {{ context[0] }}
+          <div class="card-panel-num">
+            {{ context[0] }}<span style="font-size: 10px;color:#888">{{unit}}</span>
           </div>
         </div>
       </div>
@@ -33,42 +36,46 @@
 </template>
 
 <script>
-export default {
-  name: 'Card1',
-  props: {
-    title: {
-      type: Array,
-      default: function() {
-        return ['标题', '标题']
+  export default {
+    name: 'Card1',
+    props: {
+      title: {
+        type: Array,
+        default: function () {
+          return ['标题', '标题']
+        }
+      },
+      subtitle: {
+        type: String,
+        default: ''
+      },
+      icon: {
+        type: String,
+        default: ''
+      },
+      context: {
+        type: Array,
+        default: function () {
+          return ['--', '--']
+        }
+      },
+      color: {
+        type: String,
+        default: '#40c9c6'
+      },
+      unit: {
+        type: String,
+        default: ''
       }
     },
-    subtitle: {
-      type: String,
-      default: ''
-    },
-    icon: {
-      type: String,
-      default: ''
-    },
-    context: {
-      type: Array,
-      default: function() {
-        return ['--', '--']
-      }
-    },
-    color: {
-      type: String,
-      default: '#40c9c6'
-    }
-  },
-  computed: {
-    backgroundColor() {
-      return {
-        color: this.color
+    computed: {
+      backgroundColor() {
+        return {
+          color: this.color
+        }
       }
     }
   }
-}
 </script>
 
 <style lang="scss" scoped>
@@ -108,7 +115,7 @@
       overflow: auto;
       margin-left: 5px;
 
-      .two{
+      .two {
         .card-panel-text {
           line-height: 18px;
           color: rgba(0, 0, 0, 0.45);
@@ -123,7 +130,7 @@
           float: right;
         }
       }
-      .only{
+      .only {
         .card-panel-text {
           line-height: 18px;
           color: rgba(0, 0, 0, 0.45);
diff --git a/src/icons/svg/icon-noise.svg b/src/icons/svg/icon-noise.svg
new file mode 100644
index 0000000..00bef71
--- /dev/null
+++ b/src/icons/svg/icon-noise.svg
@@ -0,0 +1,2 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1648634383080" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2093" xmlns:xlink="http://www.w3.org/1999/xlink" width="128" height="128"><defs><style type="text/css">@font-face { font-family: feedback-iconfont; src: url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.woff2?t=1630033759944") format("woff2"), url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.woff?t=1630033759944") format("woff"), url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.ttf?t=1630033759944") format("truetype"); }
+</style></defs><path d="M875.039 549.868c-25.436 0-47.411 13.91-59.3 34.4h-125.9l-99.564-199.177-76.703 281.23-51.528-566.757-67.461-5.735-130.8 490.44H49.397v68.802h267.259l94.464-354.268 51.235 563.733 67.451 5.913 79.432-291.445 38.077 76.057h168.428c11.91 20.419 33.864 34.391 59.3 34.391 37.98 0 68.792-30.879 68.792-68.797-0.005-38.062-30.817-68.787-68.797-68.787z" p-id="2094"></path></svg>
\ No newline at end of file
diff --git a/src/icons/svg/icon-valve.svg b/src/icons/svg/icon-valve.svg
new file mode 100644
index 0000000..f5d96e2
--- /dev/null
+++ b/src/icons/svg/icon-valve.svg
@@ -0,0 +1,2 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1648634707805" class="icon" viewBox="0 0 1090 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3809" xmlns:xlink="http://www.w3.org/1999/xlink" width="136.25" height="128"><defs><style type="text/css">@font-face { font-family: feedback-iconfont; src: url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.woff2?t=1630033759944") format("woff2"), url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.woff?t=1630033759944") format("woff"), url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.ttf?t=1630033759944") format("truetype"); }
+</style></defs><path d="M502.944 296.975V143.052h-231.98c-31.587 0-57.321-24.93-57.321-55.526 0-30.598 25.75-55.526 57.321-55.526H833.06c31.571 0 57.306 24.93 57.306 55.525 0 30.922-25.735 55.526-57.29 55.526h-231.64v153.924h18.179c21.615 0 39.112 16.955 39.112 37.904v90.565l-213.105-0.34v-90.225c0-20.95 17.497-37.904 39.128-37.904h18.194z m-381.74 590.293v63.84c0 9.306-7.834 16.955-17.698 16.955H58.231c-9.862-0.001-17.698-7.65-17.698-17.296V542.472c0-9.63 7.835-17.28 17.698-17.28h45.274c9.863 0 17.698 7.65 17.698 17.28v83.133h150.55c6.272-85.518 79.247-152.95 168.387-152.95h207.98c89.14 0 162.116 67.432 168.403 152.95h150.873v-83.798c0-9.29 7.495-16.615 17.033-16.615h46.297c9.523 0 17.001 7.308 17.001 16.615v409.625c0.341 9.321-7.478 16.63-17.016 16.63h-46.297c-9.523 0-17.018-7.309-17.018-16.63v-64.165H805.36C780.755 948.583 719.655 992 648.119 992H440.142c-71.52 0-132.635-43.402-157.239-104.733H121.204z" p-id="3810"></path></svg>
\ No newline at end of file
diff --git a/src/views/dashboard/components/PanelGroup.vue b/src/views/dashboard/components/PanelGroup.vue
index b72d289..332cbf9 100644
--- a/src/views/dashboard/components/PanelGroup.vue
+++ b/src/views/dashboard/components/PanelGroup.vue
@@ -1,12 +1,12 @@
 <template>
   <el-row class="panel-group">
     <div v-for="card in dataGroup1" :key="card.index" class="card-panel-col">
-      <card1 :title="card.title" :context="card.context" :icon="card.icon" :color="card.color"/>
+      <card1 :title="card.title" :context="card.context" :icon="card.icon" :color="card.color" :unit="card.unit"/>
     </div>
 
     <div v-for="card in dataGroup" :key="card.title" class="card-panel-col">
       <div v-if="hasPerm(card.permission)">
-        <card :title="card.title" :context="card.context" :icon="card.icon" :color="card.color" @click.native="goPage(card.path)"/>
+        <card :title="card.title" :context="card.context" :icon="card.icon" :unit="card.unit" :color="card.color" @click.native="goPage(card.path)"/>
       </div>
     </div>
   </el-row>
@@ -16,7 +16,7 @@
 import Card1 from '@/components/BigData/Card1'
 import Card from '@/components/BigData/Card'
 // 首页
-import { getWatchStatistic , waterMeterCount } from '@/api/overview'
+import { getWatchStatistic , waterMeterCount, valveCount } from '@/api/dashboard'
 // 根据布防数量统计井数量
 import { wellCountByBfzt } from '@/api/well'
 // 当前报警数
@@ -36,30 +36,33 @@
           context: ['--', '--'],
           icon: 'icon-water',
           color: '#40c9c6',
+          unit: '吨',
           index: 0
         },
         {
-          title: ['今日用水量', '昨日用水量'],
+          title: ['今日用水量', '生产厂区用水量'],
           context: ['--', '--'],
-          icon: 'icon-water',
+          icon: '',
           color: '#36a3f7',
+          unit: '吨',
           index: 1
         },
         {
-          title: ['实时噪声'],
+          title: ['滑道实时噪声'],
           context: ['--'],
-          icon: 'icon-device',
+          icon: 'icon-noise',
           color: '#f1c353',
+          unit: 'db',
           index: 2
         }
       ],
       dataGroup: [
         {
-          title: '设备总数',
+          title: '阀门数量',
           context: '--',
-          icon: 'icon-device',
+          icon: 'icon-valve',
           color: '#40c9c6',
-          path: '/deviceList',
+          path: '/deviceList?deviceType=20',
           permission: '/device/list'
         },
         {
@@ -67,11 +70,11 @@
           context: '--',
           icon: 'icon-watch',
           color: '#9694f7',
-          path: '/deviceList',
+          path: '/deviceList?deviceType=13',
           permission: '/device/list'
         },
         {
-          title: '当前报警数',
+          title: '报警信息',
           context: '--',
           icon: 'icon-alarm',
           color: '#f4516c',
@@ -83,10 +86,10 @@
   },
   mounted() {
     this.getWater()
-    this.getWellCount()
+    // this.getWellCount()
     this.getDeviceCount()
     this.getAlarmCount()
-    this.getJobCount()
+    // this.getJobCount()
   },
   methods: {
     refresh() {
@@ -97,24 +100,31 @@
       this.$router.push(path)
     },
     getWater() {
+      // 用水量
       getWatchStatistic().then(response => {
-        this.dataGroup1[0].context = [response.data.total, response.data.month]
-        this.dataGroup1[1].context = [response.data.today, response.data.yesterday]
-        this.dataGroup1[2].context = [Number(response.data.sound).toFixed(2)]
+        this.dataGroup1[0].context = [response.data.total?parseFloat(response.data.total).toFixed(0):'--', response.data.month?parseFloat(response.data.month).toFixed(0):'--']
+        this.dataGroup1[1].context = [response.data.today?parseFloat(response.data.today).toFixed(0):'--', response.data.yesterday?parseFloat(response.data.yesterday).toFixed(0):'--']
+        this.dataGroup1[2].context = [response.data.sound?Number(response.data.sound).toFixed(2):'--']
       })
-      waterMeterCount().then(response => {
-        this.dataGroup[1].context = response.data
-      })
+
     },
-    getWellCount() {
-      wellCountByBfzt().then(response => {
-        this.dataGroup[0].context = response.data.total
-      })
-    },
+    // getWellCount() {
+    //   wellCountByBfzt().then(response => {
+    //     this.dataGroup[0].context = response.data.total
+    //   })
+    // },
     getDeviceCount() {
       // deviceStaticByStatus().then(response => {
       //   this.dataGroup[1].context = response.data.total
       // })
+      // 阀门数量
+      valveCount().then(response => {
+        this.dataGroup[0].context = response.data
+      })
+      // 水表数量
+      waterMeterCount().then(response => {
+        this.dataGroup[1].context = response.data
+      })
     },
     getAlarmCount() {
       alarmNowStatic().then(response => {
@@ -159,7 +169,7 @@
   //   &:hover {
   //     .card-panel-icon-wrapper {
   //       color: #fff;
-        
+
   //     }
 
   //     .icon-people {
diff --git a/src/views/dashboard/components/waterCountByAreaBar.vue b/src/views/dashboard/components/waterCountByAreaBar.vue
index 1bdac48..c488923 100644
--- a/src/views/dashboard/components/waterCountByAreaBar.vue
+++ b/src/views/dashboard/components/waterCountByAreaBar.vue
@@ -1,9 +1,10 @@
 <template>
   <div class="container">
     <div class="statistic-container">
+      <el-button round size="mini" @click="setDefaultTime('year')">本年</el-button>
+      <el-button round size="mini" @click="setDefaultTime('season')">本季</el-button>
       <el-button round size="mini" @click="setDefaultTime('month')">本月</el-button>
-      <el-button round size="mini" @click="setDefaultTime('week')">近7日</el-button>
-      <el-button round size="mini" @click="setDefaultTime('yesterday')">昨日</el-button>
+      <el-button round size="mini" @click="setDefaultTime('week')">本周</el-button>
       <el-button round size="mini" @click="setDefaultTime('today')">今日</el-button>
       <el-date-picker
         v-model="timeRange"
@@ -107,7 +108,7 @@
   },
   mounted() {
     this.setDefaultTime('today')
-    this.fetchArea()
+    // this.fetchArea()
   },
   methods: {
     fetchArea() {
@@ -130,10 +131,11 @@
     },
     fetchData() {
       const params = {
-        areaId: this.areaId,
+        areaId: '110000',
         startTime: this.timeRange[0],
         endTime: this.timeRange[1]
       }
+      this.$emit('change', params)
       countBySecondArea(params).then(response => {
         this.isShow = false
         this.chartData.rows = response.data
@@ -153,7 +155,21 @@
       })
     },
     setDefaultTime(val) {
-      if (val === 'month') {
+      if (val === 'year') {
+        var today = new Date()
+        var tYear = today.getFullYear()
+        const beginTime = tYear + '-01-01'
+        const endTime = getDayTime(new Date().getTime())
+        this.timeRange = [beginTime, endTime.Format('yyyy-MM-dd')]
+      }if (val === 'season') {
+        var today = new Date()
+        var tYear = today.getFullYear()
+        var tMonth = today.getMonth() + 1
+        const oldMonth = tMonth<4?'01':(tMonth<7?'04':(tMonth<10?'07':'10'))
+        const beginTime = tYear + '-' + oldMonth + '-01'
+        const endTime = getDayTime(new Date().getTime())
+        this.timeRange = [beginTime, endTime.Format('yyyy-MM-dd')]
+      }else if (val === 'month') {
         var today = new Date()
         var tYear = today.getFullYear()
         var tMonth = today.getMonth() + 1
@@ -164,7 +180,8 @@
         const endTime = getDayTime(new Date().getTime())
         this.timeRange = [beginTime, endTime.Format('yyyy-MM-dd')]
       } else if (val === 'week') {
-        this.timeRange = [getDayTime(new Date().getTime() - 24 * 6 * 60 * 60 * 1000).Format('yyyy-MM-dd'), getDayTime(new Date().getTime()).Format('yyyy-MM-dd')]
+        const nowDayOfWeek =  new Date().getDay()-1
+        this.timeRange = [getDayTime(new Date().getTime() - 24 * nowDayOfWeek * 60 * 60 * 1000).Format('yyyy-MM-dd'), getDayTime(new Date().getTime()).Format('yyyy-MM-dd')]
       } else if (val === 'yesterday') {
         this.timeRange = [getDayTime(new Date().getTime() - 24 * 60 * 60 * 1000).Format('yyyy-MM-dd'), getDayTime(new Date().getTime() - 24 * 60 * 60 * 1000).Format('yyyy-MM-dd')]
       } else if (val === 'today') {
diff --git a/src/views/dashboard/components/waterCountByDay.vue b/src/views/dashboard/components/waterCountByDay.vue
index 8e12f02..78d1f7c 100644
--- a/src/views/dashboard/components/waterCountByDay.vue
+++ b/src/views/dashboard/components/waterCountByDay.vue
@@ -1,12 +1,12 @@
 <template>
   <div class="container">
-    <div class="function">
-      <el-button round size="mini" @click="changeTime('year')">近1年</el-button>
-      <el-button round size="mini" @click="changeTime('halfyear')">近6月</el-button>
-      <el-button round size="mini" @click="changeTime('3month')">近3月</el-button>
-      <el-button round size="mini" @click="changeTime('month')">近1月</el-button>
-      <el-button round size="mini" @click="changeTime('week')">近1周</el-button>
-    </div>
+    <!--<div class="function">-->
+      <!--<el-button round size="mini" @click="changeTime('year')">近1年</el-button>-->
+      <!--<el-button round size="mini" @click="changeTime('halfyear')">近6月</el-button>-->
+      <!--<el-button round size="mini" @click="changeTime('3month')">近3月</el-button>-->
+      <!--<el-button round size="mini" @click="changeTime('month')">近1月</el-button>-->
+      <!--<el-button round size="mini" @click="changeTime('week')">近1周</el-button>-->
+    <!--</div>-->
     <ve-line :data="chartData" :title="title" :extend="extend" :settings="chartSettings"/>
   </div>
 </template>
@@ -17,6 +17,18 @@
 import { getDoorAreaTree } from '@/api/system/area'
 export default {
   name: 'WaterCountByDay',
+  props:{
+    query: {
+      type: Object,
+      default:()=>{
+        return {
+          areaId: '',
+          startTime: '',
+          endTime: ''
+        }
+      }
+    }
+  },
   data() {
     return {
       listQuery: {
@@ -52,8 +64,13 @@
     }
   },
   mounted() {
-    this.changeTime('month')
-    this.fetchArea()
+    // this.changeTime('month')
+    // this.fetchArea()
+  },
+  watch:{
+    query(val){
+      this.fetchData()
+    }
   },
   methods: {
     fetchArea() {
@@ -73,7 +90,7 @@
       })
     },
     fetchData() {
-      countByDayFirst(this.listQuery).then(response => {
+      countByDayFirst(this.query).then(response => {
         const arr = response.data.map(function(item) {
           for (let i = 0; i < item.data.length; i++) {
             item[item.data[i].areaName] = item.data[i].count
diff --git a/src/views/dashboard/components/waterCountByDept.vue b/src/views/dashboard/components/waterCountByDept.vue
index a0c82cf..02e27cd 100644
--- a/src/views/dashboard/components/waterCountByDept.vue
+++ b/src/views/dashboard/components/waterCountByDept.vue
@@ -1,22 +1,22 @@
 <!--suppress ALL -->
 <template>
   <div class="container">
-    <div class="function">
-      <el-button round size="mini" @click="changeTime('year')">近1年</el-button>
-      <el-button round size="mini" @click="changeTime('halfyear')">近6月</el-button>
-      <el-button round size="mini" @click="changeTime('3month')">近3月</el-button>
-      <el-button round size="mini" @click="changeTime('month')">近1月</el-button>
-      <el-button round size="mini" @click="changeTime('week')">近1周</el-button>
-    </div>
+    <!--<div class="function">-->
+      <!--<el-button round size="mini" @click="changeTime('year')">近1年</el-button>-->
+      <!--<el-button round size="mini" @click="changeTime('halfyear')">近6月</el-button>-->
+      <!--<el-button round size="mini" @click="changeTime('3month')">近3月</el-button>-->
+      <!--<el-button round size="mini" @click="changeTime('month')">近1月</el-button>-->
+      <!--<el-button round size="mini" @click="changeTime('week')">近1周</el-button>-->
+    <!--</div>-->
     <ve-pie :data="chartData" :extend="extend" :title="title"/>
-    <div class="function">
-      <el-button
-        v-for="item in areaList"
-        :key="item.id"
-        round
-        @click="areaChange(item.id)"
-        size="mini">{{item.name}}</el-button>
-    </div>
+    <!--<div class="function">-->
+      <!--<el-button-->
+        <!--v-for="item in areaList"-->
+        <!--:key="item.id"-->
+        <!--round-->
+        <!--@click="areaChange(item.id)"-->
+        <!--size="mini">{{item.name}}</el-button>-->
+    <!--</div>-->
   </div>
 </template>
 
@@ -25,6 +25,18 @@
 import { getDoorAreaTree } from '@/api/system/area'
 export default {
   name: 'WaterCountByDepy',
+  props:{
+    query: {
+      type: Object,
+      default:()=>{
+        return {
+          areaId: '',
+          startTime: '',
+          endTime: ''
+        }
+      }
+    }
+  },
   data() {
     return {
       listQuery: {
@@ -69,7 +81,12 @@
   },
   mounted() {
     // TODO:待调试真接口
-    this.fetchArea()
+    // this.fetchArea()
+  },
+  watch:{
+    query(val){
+      this.fetchData()
+    }
   },
   methods: {
     fetchArea() {
@@ -104,8 +121,7 @@
       //   { 'areaName': '码头作业区', 'count': 78 },
       //   { 'areaName': '车间生产区', 'count': 78 }
       // ]
-      this.listQuery.areaId = this.areaId
-      countBySecondArea(this.listQuery).then(response => {
+      countBySecondArea(this.query).then(response => {
         this.chartData.rows = response.data
       })
     },
diff --git a/src/views/dashboard/components/waterNote.vue b/src/views/dashboard/components/waterNote.vue
new file mode 100644
index 0000000..aa0f448
--- /dev/null
+++ b/src/views/dashboard/components/waterNote.vue
@@ -0,0 +1,152 @@
+<!--suppress ALL -->
+<template>
+  <div class="container">
+    <div>
+      用水事记
+    </div>
+
+  </div>
+</template>
+
+<script>
+import { countBySecondArea } from '@/api/overview'
+import { getDoorAreaTree } from '@/api/system/area'
+export default {
+  name: 'WaterNote',
+  props:{
+    query: {
+      type: Object,
+      default:()=>{
+        return {
+          areaId: '',
+          startTime: '',
+          endTime: ''
+        }
+      }
+    }
+  },
+  data() {
+    return {
+      listQuery: {
+        areaId: '',
+        startTime: '',
+        endTime: ''
+      },
+      areaId:'',
+      areaList: [],
+      chartData: {
+        columns: ['areaName', 'count'],
+        rows: []
+      },
+      extend: {
+        grid: {
+          right: '30%'
+        },
+        legend: {
+          type: 'scroll',
+          top: '60px',
+          right: '0px',
+          orient: 'vertical'
+        },
+        series: {
+          label: { show: true, position: 'outside', formatter: '{b}' },
+          right: 120
+        },
+        tooltip: { trigger: 'item', formatter: '{b}<br/>用水量：{c}吨<br/>占比：{d}%' }
+      },
+      title: {
+        text: '分区用水占比图'
+      },
+      chartSettings: {
+        labelMap: {
+          'areaName': '分区',
+          'count': '用水量'
+        },
+        dimension: 'areaName',
+        metrics: 'count'
+      }
+    }
+  },
+  mounted() {
+    // TODO:待调试真接口
+    // this.fetchArea()
+  },
+  watch:{
+    query(val){
+      this.fetchData()
+    }
+  },
+  methods: {
+    fetchArea() {
+      getDoorAreaTree().then(response => {
+        if (response.code === 200) {
+          this.areaList = response.data.filter(item => {
+            return item.pid === '1'
+          }).map(function(item) {
+            return {
+              id: item.id, name: item.name
+            }
+          })
+          if (this.areaList.length !== 0) { this.areaChange(this.areaList[0].id) }
+        }
+      })
+    },
+    areaChange(val){
+      this.areaId = val
+      this.fetchData()
+    },
+    // 获取统计数据
+    fetchData() {
+      // this.chartData.rows = [
+      //   { 'areaName': '科技楼及食堂', 'count': 53 },
+      //   { 'areaName': 'A\\B\\C\\D\\E座', 'count': 78 },
+      //   { 'areaName': '厂区', 'count': 78 },
+      //   { 'areaName': '分段分区', 'count': 78 },
+      //   { 'areaName': '船坞分区', 'count': 78 },
+      //   { 'areaName': '刀把码头', 'count': 78 },
+      //   { 'areaName': '制管作业区', 'count': 78 },
+      //   { 'areaName': '滑道作业区', 'count': 78 },
+      //   { 'areaName': '码头作业区', 'count': 78 },
+      //   { 'areaName': '车间生产区', 'count': 78 }
+      // ]
+      countBySecondArea(this.query).then(response => {
+        this.chartData.rows = response.data
+      })
+    },
+    changeTime(timeType) {
+      let startTime
+      switch (timeType) {
+        case 'year':
+          startTime = getDayTime(new Date().getTime() - 24 * 365 * 60 * 60 * 1000)
+          this.listQuery.startTime = startTime.Format('yyyy-MM-dd')
+          break
+        case 'halfyear':
+          startTime = getDayTime(new Date().getTime() - 24 * 182 * 60 * 60 * 1000)
+          this.listQuery.startTime = startTime.Format('yyyy-MM-dd')
+          break
+        case '3month':
+          startTime = getDayTime(new Date().getTime() - 24 * 90 * 60 * 60 * 1000)
+          this.listQuery.startTime = startTime.Format('yyyy-MM-dd')
+          break
+        case 'month':
+          startTime = getDayTime(new Date().getTime() - 24 * 30 * 60 * 60 * 1000)
+          this.listQuery.startTime = startTime.Format('yyyy-MM-dd')
+          break
+        case 'week':
+          startTime = getDayTime(new Date().getTime() - 24 * 7 * 60 * 60 * 1000)
+          this.listQuery.startTime = startTime.Format('yyyy-MM-dd')
+          break
+      }
+      const endTime = new Date()
+      this.listQuery.endTime = endTime.Format('yyyy-MM-dd')
+      this.fetchData()
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+  .container{
+    position:relative;
+    height: 455px;
+  }
+</style>
diff --git a/src/views/dashboard/index.vue b/src/views/dashboard/index.vue
index fdbc38a..831dbc3 100644
--- a/src/views/dashboard/index.vue
+++ b/src/views/dashboard/index.vue
@@ -1,31 +1,33 @@
 <template>
   <div class="dashboard-container" style="background-color: white">
     <panel-group ref="panelgroup"/>
-    <el-row :gutter="10">
+    <el-row>
       <!-- 用水统计图 -->
+      <el-col :span="18">
+        <el-card shadow="never">
+          <water-count-by-area-bar @change="changeWaterQuery"/>
+        </el-card>
+      </el-col>
+      <el-col :span="6">
+        <el-card shadow="never">
+          <water-note/>
+        </el-card>
+      </el-col>
+    </el-row>
+    <el-row>
+      <!-- 分区用水占比图 -->
       <el-col :span="12">
         <el-card shadow="never">
-          <water-count-by-dept-bar/>
+          <water-count-by-dept :query="listQuery1" ref="waterCountPie"/>
         </el-card>
       </el-col>
       <!-- 用水走势图 -->
       <el-col :span="12">
         <el-card shadow="never">
-          <water-count-by-day/>
+          <water-count-by-day :query="listQuery1" ref="waterCountDay"/>
         </el-card>
       </el-col>
-      <!-- 分区用水统计图 -->
-      <el-col :span="12">
-        <el-card shadow="never">
-          <water-count-by-area-bar/>
-        </el-card>
-      </el-col>
-      <!-- 分区用水占比图 -->
-      <el-col :span="12">
-        <el-card shadow="never">
-          <water-count-by-depy/>
-        </el-card>
-      </el-col>
+
       <!--水表报警次数统计-->
       <el-col v-if="hasPerm('/statics/alarmsByDay')" :span="12">
         <el-card shadow="never">
@@ -64,20 +66,22 @@
 import DeviceCountByOnline from './components/DeviceCountByOnline'
 import AlarmByDays from './components/AlarmByDays'
 import JobByStatus from './components/JobByStatus'
-import WaterCountByDepy from './components/waterCountByDept'
+import WaterCountByDept from './components/waterCountByDept'
 import WaterCountByDeptBar from './components/waterCountByDeptBar'
 import WaterCountByDay from './components/waterCountByDay'
 import WaterCountByAreaBar from "./components/waterCountByAreaBar";
 import WatchAlarmBar from "./components/watchAlarmBar";
+import WaterNote from "./components/waterNote";
 
 export default {
   name: 'Dashboard',
   components: {
+    WaterNote,
     WatchAlarmBar,
     WaterCountByAreaBar,
     WaterCountByDay,
     WaterCountByDeptBar,
-    WaterCountByDepy,
+    WaterCountByDept,
     JobByStatus,
     AlarmByDays,
     PanelGroup,
@@ -108,12 +112,25 @@
       state.needRefresh = needRefresh
     }
   },
+  data(){
+    return {
+      listQuery1:{
+        areaId:'110000',
+        startTime:new Date().Format('yyyy-MM-dd'),
+        endTime:new Date().Format('yyyy-MM-dd')
+      },// 分区用水量查询条件
+      listQuery2:{
+        areaId:'',
+        startTime:'',
+        endTime:''
+      } // 分区报警查询条件
+    }
+  },
   watch: {
     needRefresh(val) {
       // 需要刷新
       if (val) {
         console.log('refresh dashboard')
-        debugger
         this.$refs.panelgroup.refresh()
       }
     }
@@ -124,6 +141,10 @@
   methods: {
     webSocket() {
       this.$store.dispatch('initWebSocket')
+    },
+    // 切换分区查询条件
+    changeWaterQuery(listQuery1){
+      this.listQuery1 = listQuery1
     }
   }
 }
diff --git a/src/views/dashboard/index_bak.vue b/src/views/dashboard/index_bak.vue
new file mode 100644
index 0000000..fdbc38a
--- /dev/null
+++ b/src/views/dashboard/index_bak.vue
@@ -0,0 +1,149 @@
+<template>
+  <div class="dashboard-container" style="background-color: white">
+    <panel-group ref="panelgroup"/>
+    <el-row :gutter="10">
+      <!-- 用水统计图 -->
+      <el-col :span="12">
+        <el-card shadow="never">
+          <water-count-by-dept-bar/>
+        </el-card>
+      </el-col>
+      <!-- 用水走势图 -->
+      <el-col :span="12">
+        <el-card shadow="never">
+          <water-count-by-day/>
+        </el-card>
+      </el-col>
+      <!-- 分区用水统计图 -->
+      <el-col :span="12">
+        <el-card shadow="never">
+          <water-count-by-area-bar/>
+        </el-card>
+      </el-col>
+      <!-- 分区用水占比图 -->
+      <el-col :span="12">
+        <el-card shadow="never">
+          <water-count-by-depy/>
+        </el-card>
+      </el-col>
+      <!--水表报警次数统计-->
+      <el-col v-if="hasPerm('/statics/alarmsByDay')" :span="12">
+        <el-card shadow="never">
+          <watch-alarm-bar/>
+        </el-card>
+      </el-col>
+      <!--报警次数统计-->
+      <el-col v-if="hasPerm('/statics/alarmsByDay')" :span="12">
+        <el-card shadow="never">
+          <alarm-by-days/>
+        </el-card>
+      </el-col>
+      <!--设备在线数量统计-->
+      <el-col v-if="hasPerm('/statics/deviceStaticsByType')" :span="12">
+        <el-card shadow="never">
+          <device-count-by-online/>
+        </el-card>
+      </el-col>
+
+      <!--设备数量统计-->
+      <el-col v-if="hasPerm('/statics/deviceStaticsByType')" :span="12">
+        <el-card shadow="never">
+          <device-count/>
+        </el-card>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+import PanelGroup from './components/PanelGroup'
+import WellCountByBfzt from './components/WellCountByBfzt'
+import WellCountByType from './components/WellCountByType'
+import DeviceCount from './components/DeviceCount'
+import DeviceCountByOnline from './components/DeviceCountByOnline'
+import AlarmByDays from './components/AlarmByDays'
+import JobByStatus from './components/JobByStatus'
+import WaterCountByDepy from './components/waterCountByDept'
+import WaterCountByDeptBar from './components/waterCountByDeptBar'
+import WaterCountByDay from './components/waterCountByDay'
+import WaterCountByAreaBar from "./components/waterCountByAreaBar";
+import WatchAlarmBar from "./components/watchAlarmBar";
+
+export default {
+  name: 'Dashboard',
+  components: {
+    WatchAlarmBar,
+    WaterCountByAreaBar,
+    WaterCountByDay,
+    WaterCountByDeptBar,
+    WaterCountByDepy,
+    JobByStatus,
+    AlarmByDays,
+    PanelGroup,
+    WellCountByBfzt,
+    WellCountByType,
+    DeviceCount,
+    DeviceCountByOnline
+  },
+  computed: {
+    ...mapGetters([
+      'name',
+      'roleNames',
+      'roleTips',
+      'wellTypes',
+      'deviceTypes',
+      'communications',
+      'area'
+    ])
+  },
+  mutations: {
+    SET_WEBSOCKET: (state, websocket) => {
+      state.websocket = websocket
+    },
+    SET_WS_STATUS: (state, wsStatus) => {
+      state.wsStatus = wsStatus
+    },
+    SET_NEED_REFRESH: (state, needRefresh) => {
+      state.needRefresh = needRefresh
+    }
+  },
+  watch: {
+    needRefresh(val) {
+      // 需要刷新
+      if (val) {
+        console.log('refresh dashboard')
+        debugger
+        this.$refs.panelgroup.refresh()
+      }
+    }
+  },
+  mounted() {
+    // this.webSocket()
+  },
+  methods: {
+    webSocket() {
+      this.$store.dispatch('initWebSocket')
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.dashboard-container{
+  .el-row{
+    .el-col{
+      margin-bottom: 10px;
+    }
+  }
+}
+.dashboard {
+  &-container {
+    padding: 10px 20px;
+  }
+  &-text {
+    font-size: 30px;
+    line-height: 46px;
+  }
+}
+</style>
diff --git a/src/views/layout/Layout.vue b/src/views/layout/Layout.vue
deleted file mode 100644
index 7c3d46d..0000000
--- a/src/views/layout/Layout.vue
+++ /dev/null
@@ -1,111 +0,0 @@
-<template>
-  <el-container :class="classObj" class="app-wrapper">
-    <div v-if="device==='mobile'&&sidebar.opened" class="drawer-bg" @click="handleClickOutside"/>
-    <app-header class="app-header"/>
-    <el-main class="app-body">
-      <!--侧边栏-->
-      <sidebar class="sidebar-container"/>
-      <!--右半部分-->
-      <div :class="{hasTagsView:needTagsView}" class="main-container">
-        <!--开启固定头部设置-->
-        <div v-if="fixedHeader">
-          <!--导航(面包屑)-->
-          <navbar/>
-          <!--标签栏-->
-          <tags-view v-if="needTagsView" />
-          <!--主内容包裹在el-scrollbar中-->
-          <el-scrollbar class="no-head-scrollbar">
-            <app-main/>
-          </el-scrollbar>
-        </div>
-        <!--为开始固定头部设置-->
-        <div v-else>
-          <!--导航，tagsView都包裹在el-scrollbar中-->
-          <el-scrollbar class="has-head-scrollbar">
-            <navbar/>
-            <tags-view v-if="needTagsView" />
-            <app-main/>
-          </el-scrollbar>
-        </div>
-        <!--悬浮框-->
-        <right-panel v-if="false">
-          <settings />
-        </right-panel>
-      </div>
-    </el-main>
-  </el-container>
-</template>
-
-<script>
-import RightPanel from '@/components/RightPanel'
-import { AppHeader, Navbar, Sidebar, AppMain } from './components'
-import ResizeMixin from './mixin/ResizeHandler'
-import TagsView from './components/TagsView/index'
-import { mapState } from 'vuex'
-import Settings from './components/Settings/index'
-
-export default {
-  name: 'Layout',
-  components: {
-    Settings,
-    TagsView,
-    AppHeader,
-    Navbar,
-    Sidebar,
-    AppMain,
-    RightPanel
-  },
-  mixins: [ResizeMixin],
-  computed: {
-    ...mapState({
-      sidebar: state => state.app.sidebar,
-      device: state => state.app.device,
-      showSettings: state => state.settings.showSettings,
-      needTagsView: state => state.settings.tagsView,
-      fixedHeader: state => state.settings.fixedHeader
-    }),
-    classObj() {
-      return {
-        hideSidebar: !this.sidebar.opened,
-        openSidebar: this.sidebar.opened,
-        withoutAnimation: this.sidebar.withoutAnimation,
-        mobile: this.device === 'mobile'
-      }
-    }
-  },
-  methods: {
-    handleClickOutside() {
-      this.$store.dispatch('CloseSideBar', { withoutAnimation: false })
-    }
-  }
-}
-</script>
-
-<style rel="stylesheet/scss" lang="scss" scoped>
-  @import "src/styles/mixin.scss";
-  .app-wrapper {
-    @include clearfix;
-    position: relative;
-    height: 100%;
-    width: 100%;
-    &.mobile.openSidebar{
-      position: fixed;
-      top: 0;
-    }
-  }
-  .drawer-bg {
-    background: #000;
-    opacity: 0.3;
-    width: 100%;
-    top: 0;
-    height: 100%;
-    position: absolute;
-    z-index: 999;
-  }
-  /*.el-scrollbar{*/
-    /*height: calc(100vh - 50px);*/
-  /*}*/
-  .has-head-scrollbar{
-    height: 100vh;
-  }
-</style>
diff --git a/src/views/layout/components/AppHeader.vue b/src/views/layout/components/AppHeader.vue
deleted file mode 100644
index 8d8912e..0000000
--- a/src/views/layout/components/AppHeader.vue
+++ /dev/null
@@ -1,151 +0,0 @@
-<template>
-  <el-header class="app-header">
-    <h3>{{ title }}</h3>
-    <!--子系统选项-->
-    <el-dropdown v-if="showChangeSys" class="systemSelect" size="medium" @command="handleCommand">
-      <span class="el-dropdown-link">{{ currentSystem.name }}<i class="el-icon-arrow-down el-icon--right"/>
-      </span>
-      <el-dropdown-menu slot="dropdown">
-        <el-dropdown-item v-for="system in systems" :command="system" :key="system.id">{{ system.name }}</el-dropdown-item>
-      </el-dropdown-menu>
-    </el-dropdown>
-    <el-dropdown class="dropdown-container" trigger="click">
-      <div class="dropdown-wrapper">
-        <span style="line-height:50px;">欢迎您，{{ name }}</span>
-        <!--<img :src="avatar+'?imageView2/1/w/80/h/80'" class="user-avatar">-->
-        <i class="el-icon-arrow-down"/>
-      </div>
-      <el-dropdown-menu slot="dropdown" class="user-dropdown">
-        <el-dropdown-item v-if="!baseConfig.singleSys">
-          <span style="display:block;" @click="backToIndex">回首页</span>
-        </el-dropdown-item>
-        <el-dropdown-item :divided="!baseConfig.singleSys">
-          <span style="display:block;" @click="resetPwd">修改密码</span>
-        </el-dropdown-item>
-        <el-dropdown-item divided>
-          <span style="display:block;" @click="logout">注销</span>
-        </el-dropdown-item>
-      </el-dropdown-menu>
-    </el-dropdown>
-    <reset-pwd v-show="showSetPwd" ref="retPwd"/>
-  </el-header>
-</template>
-
-<script>
-import { mapGetters } from 'vuex'
-import ResetPwd from '@/views/system/user/resetPwd'
-
-export default {
-  name: 'AppHeader',
-  components: { ResetPwd },
-  data() {
-    return {
-      title: this.baseConfig.title, // 标题
-      showChangeSys: !this.baseConfig.singleSys, // 是否显示切换系统菜单
-      name: this.$store.getters.name, // 用户姓名
-      showSetPwd: false // 是否显示修改密码按钮
-    }
-  },
-  computed: {
-    ...mapGetters([
-      'sidebar',
-      'avatar',
-      'currentSystem',
-      'systems'
-    ])
-  },
-  created() {
-    if (!this.baseConfig.singleSys) {
-      this.getSystems()
-    }
-  },
-  methods: {
-    toggleSideBar() {
-      this.$store.dispatch('ToggleSideBar')
-    },
-    logout() {
-      this.$store.dispatch('LogOut').then(() => {
-        location.reload() // 为了重新实例化vue-router对象 避免bug
-      })
-    },
-    resetPwd() {
-      this.showSetPwd = true
-      this.$refs.retPwd.initDialog(true)
-    },
-    backToIndex() {
-      const url = this.baseConfig.mainPage
-      window.location.href = url
-    },
-    // 切换子系统
-    handleCommand(command) {
-      console.log('切换子系统:' + command.name)
-      const params1 = `?token=${this.$store.getters.token}`
-      const params = `?sys=${command.name}&url=${command.url}&code=${command.code}&token=${this.$store.getters.token}`
-      // 判断系统是不是http的，如果是则打开新窗口
-      if (command.url.indexOf('http') > -1) {
-      // 取token
-        if (this.baseConfig.sameWindow) {
-          window.location.href = command.url + params1
-        } else {
-          window.open(command.url + params1, '_blank')
-        }
-      } else {
-      // 取token
-        if (this.baseConfig.sameWindow) {
-          window.location.href = this.baseConfig.mainPage + command.url + params
-        } else {
-          window.open(this.baseConfig.mainPage + command.url + params, '_blank')
-        }
-      }
-    },
-    // 获取子系统
-    getSystems() {
-      this.$store.dispatch('GetSystems').then(() => {
-        console.log('获取子系统列表成功-appHeader')
-      })
-    }
-  }
-}
-</script>
-
-<style rel="stylesheet/scss" lang="scss" scoped>
-  h3{
-    margin-left:24px;
-    display: inline-block;
-    float:left;
-  }
-  .dropdown-container {
-    /*height: 50px;*/
-    display: inline-block;
-    float: right;
-    z-index:500;
-    position: fixed;
-    top:0px;
-    right: 35px;
-    .dropdown-wrapper {
-      cursor: pointer;
-      margin-top: 5px;
-      position: relative;
-      line-height: initial;
-      .user-avatar {
-        width: 40px;
-        height: 40px;
-        border-radius: 10px;
-      }
-      .el-icon-caret-bottom {
-        font-size: 12px;
-      }
-    }
-  }
-  .systemSelect{
-    height: 56px;
-    display: inline-block;
-    float: left;
-    z-index:500;
-    position: fixed;
-    margin-left:60px;
-    top:5px;
-    color:#fff;
-    line-height: 56px;
-  }
-</style>
diff --git a/src/views/layout/components/AppMain.vue b/src/views/layout/components/AppMain.vue
deleted file mode 100644
index 2ea268e..0000000
--- a/src/views/layout/components/AppMain.vue
+++ /dev/null
@@ -1,38 +0,0 @@
-<template>
-  <section class="app-main">
-    <transition name="fade-transform" mode="out-in">
-      <!-- or name="fade" -->
-      <!-- <router-view :key="key"></router-view> -->
-      <div>
-        <keep-alive>
-          <router-view v-if="$route.meta.keepAlive" :key="key"/>
-        </keep-alive>
-        <router-view v-if="!$route.meta.keepAlive" :key="key"/>
-      </div>
-    </transition>
-  </section>
-</template>
-
-<script>
-export default {
-  name: 'AppMain',
-  computed: {
-    key() {
-      if (this.$route.meta.keepAlive) {
-        return this.$route.name !== undefined ? this.$route.name : this.$route
-      } else {
-        return this.$route.name !== undefined ? this.$route.name + new Date() : this.$route + new Date()
-      }
-    }
-  }
-}
-</script>
-
-<style scoped>
-.app-main {
-  /*50 = navbar  */
-  /*min-height: calc(100vh - 50px);*/
-  position: relative;
-  overflow: hidden;
-}
-</style>
diff --git a/src/views/layout/components/Navbar.vue b/src/views/layout/components/Navbar.vue
deleted file mode 100644
index 24ea99b..0000000
--- a/src/views/layout/components/Navbar.vue
+++ /dev/null
@@ -1,78 +0,0 @@
-<template>
-  <div class="navbar">
-    <hamburger :toggle-click="toggleSideBar" :is-active="sidebar.opened" class="hamburger-container"/>
-    <breadcrumb />
-  </div>
-</template>
-
-<script>
-import { mapGetters } from 'vuex'
-import Breadcrumb from '@/components/Breadcrumb'
-import Hamburger from '@/components/Hamburger'
-
-export default {
-  components: {
-    Breadcrumb,
-    Hamburger
-  },
-  computed: {
-    ...mapGetters([
-      'sidebar'
-    ])
-  },
-  methods: {
-    toggleSideBar() {
-      this.$store.dispatch('ToggleSideBar')
-    },
-    logout() {
-      this.$store.dispatch('LogOut').then(() => {
-        location.reload() // 为了重新实例化vue-router对象 避免bug
-      })
-    }
-  }
-}
-</script>
-
-<style rel="stylesheet/scss" lang="scss" scoped>
-.navbar {
-  height: 50px;
-  line-height: 50px;
-  box-shadow: 0 1px 3px 0 rgba(0,0,0,.12), 0 0 3px 0 rgba(0,0,0,.04);
-  .hamburger-container {
-    text-align: center;
-    height: 50px;
-    float: left;
-    padding: 0 12px;
-  }
-  .screenfull {
-    position: absolute;
-    right: 90px;
-    top: 16px;
-    color: red;
-  }
-  .avatar-container {
-    height: 50px;
-    display: inline-block;
-    position: absolute;
-    right: 35px;
-    .avatar-wrapper {
-      cursor: pointer;
-      margin-top: 5px;
-      position: relative;
-      line-height: initial;
-      .user-avatar {
-        width: 40px;
-        height: 40px;
-        border-radius: 10px;
-      }
-      .el-icon-caret-bottom {
-        position: absolute;
-        right: -20px;
-        top: 25px;
-        font-size: 12px;
-      }
-    }
-  }
-}
-</style>
-
diff --git a/src/views/layout/components/Settings/index.vue b/src/views/layout/components/Settings/index.vue
deleted file mode 100644
index cf3023d..0000000
--- a/src/views/layout/components/Settings/index.vue
+++ /dev/null
@@ -1,109 +0,0 @@
-<template>
-  <div class="drawer-container">
-    <div>
-      <h3 class="drawer-title">Page style setting</h3>
-
-      <div class="drawer-item">
-        <span>Theme Color</span>
-        <theme-picker style="float: right;height: 26px;margin: -3px 8px 0 0;" @change="themeChange" />
-      </div>
-
-      <div class="drawer-item">
-        <span>Open Tags-View</span>
-        <el-switch v-model="tagsView" class="drawer-switch" />
-      </div>
-
-      <div class="drawer-item">
-        <span>Fixed Header</span>
-        <el-switch v-model="fixedHeader" class="drawer-switch" />
-      </div>
-
-      <div class="drawer-item">
-        <span>Sidebar Logo</span>
-        <el-switch v-model="sidebarLogo" class="drawer-switch" />
-      </div>
-
-    </div>
-  </div>
-</template>
-
-<script>
-import ThemePicker from '@/components/ThemePicker'
-
-export default {
-  name: 'Settings',
-  components: { ThemePicker },
-  data() {
-    return {}
-  },
-  computed: {
-    fixedHeader: {
-      get() {
-        return this.$store.state.settings.fixedHeader
-      },
-      set(val) {
-        this.$store.dispatch('settings/changeSetting', {
-          key: 'fixedHeader',
-          value: val
-        })
-      }
-    },
-    tagsView: {
-      get() {
-        return this.$store.state.settings.tagsView
-      },
-      set(val) {
-        this.$store.dispatch('settings/changeSetting', {
-          key: 'tagsView',
-          value: val
-        })
-      }
-    },
-    sidebarLogo: {
-      get() {
-        return this.$store.state.settings.sidebarLogo
-      },
-      set(val) {
-        this.$store.dispatch('settings/changeSetting', {
-          key: 'sidebarLogo',
-          value: val
-        })
-      }
-    }
-  },
-  methods: {
-    themeChange(val) {
-      this.$store.dispatch('settings/changeSetting', {
-        key: 'theme',
-        value: val
-      })
-    }
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-.drawer-container {
-  padding: 24px;
-  font-size: 14px;
-  line-height: 1.5;
-  word-wrap: break-word;
-
-  .drawer-title {
-    margin-bottom: 12px;
-    color: rgba(0, 0, 0, .85);
-    font-size: 14px;
-    line-height: 22px;
-  }
-
-  .drawer-item {
-    color: rgba(0, 0, 0, .65);
-    font-size: 14px;
-    padding: 12px 0;
-  }
-
-  .drawer-switch {
-    float: right
-  }
-}
-</style>
diff --git a/src/views/layout/components/Sidebar/Item.vue b/src/views/layout/components/Sidebar/Item.vue
deleted file mode 100644
index 4ed6b5f..0000000
--- a/src/views/layout/components/Sidebar/Item.vue
+++ /dev/null
@@ -1,31 +0,0 @@
-<script>
-export default {
-  name: 'MenuItem',
-  functional: true,
-  props: {
-    icon: {
-      type: String,
-      default: ''
-    },
-    title: {
-      type: String,
-      default: ''
-    }
-  },
-  render(h, context) {
-    const { icon, title } = context.props
-    const vnodes = []
-
-    if (icon) {
-      vnodes.push(<svg-icon icon-class={icon}/>)
-    } else {
-      vnodes.push(<span style='display:inline-block;width:30px;'></span>)
-    }
-
-    if (title) {
-      vnodes.push(<span slot='title'>{(title)}</span>)
-    }
-    return vnodes
-  }
-}
-</script>
diff --git a/src/views/layout/components/Sidebar/Link.vue b/src/views/layout/components/Sidebar/Link.vue
deleted file mode 100644
index bff45cd..0000000
--- a/src/views/layout/components/Sidebar/Link.vue
+++ /dev/null
@@ -1,36 +0,0 @@
-
-<template>
-  <!-- eslint-disable vue/require-component-is -->
-  <component v-bind="linkProps(to)">
-    <slot/>
-  </component>
-</template>
-
-<script>
-import { isExternal } from '@/utils/validate'
-
-export default {
-  props: {
-    to: {
-      type: String,
-      required: true
-    }
-  },
-  methods: {
-    linkProps(url) {
-      if (isExternal(url)) {
-        return {
-          is: 'a',
-          href: url,
-          target: '_blank',
-          rel: 'noopener'
-        }
-      }
-      return {
-        is: 'router-link',
-        to: url
-      }
-    }
-  }
-}
-</script>
diff --git a/src/views/layout/components/Sidebar/SidebarItem.vue b/src/views/layout/components/Sidebar/SidebarItem.vue
deleted file mode 100644
index 988d662..0000000
--- a/src/views/layout/components/Sidebar/SidebarItem.vue
+++ /dev/null
@@ -1,107 +0,0 @@
-<template>
-  <div v-if="!item.hidden&&item.children" class="menu-wrapper">
-
-    <template v-if="hasOneShowingChild(item.children,item) && (!onlyOneChild.children||onlyOneChild.noShowingChildren)&&!item.alwaysShow">
-      <a :href="onlyOneChild.path" target="_blank" @click="clickLink(onlyOneChild.path,$event)">
-        <el-menu-item :index="resolvePath(onlyOneChild.path)" :class="{'submenu-title-noDropdown':!isNest}">
-          <item v-if="onlyOneChild.meta" :icon="onlyOneChild.meta.icon||item.meta.icon" :title="onlyOneChild.meta.title" />
-        </el-menu-item>
-      </a>
-    </template>
-
-    <el-submenu v-else :index="item.name||item.path">
-      <template slot="title">
-        <item v-if="item.meta" :icon="item.meta.icon" :title="item.meta.title" />
-      </template>
-
-      <template v-for="child in item.children" v-if="!child.hidden">
-        <sidebar-item
-          v-if="child.children&&child.children.length>0"
-          :is-nest="true"
-          :item="child"
-          :key="child.path"
-          :base-path="resolvePath(child.path)"
-          class="nest-menu" />
-
-        <a v-else :href="child.path" :key="child.name" target="_blank" @click="clickLink(child.path,$event)">
-          <el-menu-item :index="resolvePath(child.path)">
-            <span class="light-line"/>
-            <item v-if="child.meta" :icon="child.meta.icon" :title="child.meta.title" />
-          </el-menu-item>
-        </a>
-      </template>
-    </el-submenu>
-
-  </div>
-</template>
-
-<script>
-import path from 'path'
-import { validateURL } from '@/utils/validate'
-import Item from './Item'
-
-export default {
-  name: 'SidebarItem',
-  components: { Item },
-  props: {
-    // route object
-    item: {
-      type: Object,
-      required: true
-    },
-    isNest: {
-      type: Boolean,
-      default: false
-    },
-    basePath: {
-      type: String,
-      default: ''
-    }
-  },
-  data() {
-    return {
-      onlyOneChild: null
-    }
-  },
-  methods: {
-    hasOneShowingChild(children, parent) {
-      const showingChildren = children.filter(item => {
-        if (item.hidden) {
-          return false
-        } else {
-          // Temp set(will be used if only has one showing child)
-          this.onlyOneChild = item
-          return true
-        }
-      })
-
-      // When there is only one child router, the child router is displayed by default
-      if (showingChildren.length === 1) {
-        return true
-      }
-
-      // Show parent if there are no child router to display
-      if (showingChildren.length === 0) {
-        this.onlyOneChild = { ... parent, path: '', noShowingChildren: true }
-        return true
-      }
-
-      return false
-    },
-    resolvePath(routePath) {
-      return path.resolve(this.basePath, routePath)
-    },
-    isExternalLink(routePath) {
-      return validateURL(routePath)
-    },
-    clickLink(routePath, e) {
-      if (!this.isExternalLink(routePath)) {
-        e.preventDefault()
-        const path = this.resolvePath(routePath)
-        this.$router.push({ path, query: { t: +new Date() }})
-        // this.$router.push(path)
-      }
-    }
-  }
-}
-</script>

diff --git a/src/api/dashboard.js b/src/api/dashboard.js
index e69de29..0a4ddfc 100644
--- a/src/api/dashboard.js
+++ b/src/api/dashboard.js
@@ -0,0 +1,73 @@
+/**
+ * 井总览模块接口
+ */
+import request from '@/utils/request'
+
+// 用水量、噪声统计数据
+export function getWatchStatistic() {
+  return request({
+    url: 'waterStatistic/overview',
+    method: 'get'
+  })
+}
+// 水表数量
+export function waterMeterCount() {
+  return request({
+    url: 'waterMeterData/count',
+    method: 'get'
+  })
+}
+// 阀门数量
+export function valveCount() {
+  return request({
+    url: 'waterMeterData/count',
+    method: 'get'
+  })
+}
+
+// 查询一级分区各区用水量
+export function countByFirstArea(params) {
+  return request({
+    url: 'waterStatistic/countByFirstArea',
+    method: 'get',
+    params
+  })
+}
+
+// 查询一级分区7日用水量
+export function countByDayFirst(params) {
+  return request({
+    url: 'waterStatistic/countByDayFirst',
+    method: 'get',
+    params
+  })
+}
+
+// 查询二级分区各区用水量
+export function countBySecondArea(params) {
+  return request({
+    url: 'waterStatistic/countBySecondArea',
+    method: 'get',
+    params
+  })
+}
+
+// 查询二级分区水表告警
+export function alarmBySecondArea(params) {
+  return request({
+    url: 'waterStatistic/alarmBySecondArea',
+    method: 'get',
+    params
+  })
+}
+
+// 设备7日报警趋势
+export function alarmCountByDay(params) {
+  return request({
+    url: 'waterStatistic/alarmCountByDay',
+    method: 'get',
+    params
+  })
+}
+
+
diff --git a/src/components/BigData/Card/index.vue b/src/components/BigData/Card/index.vue
index d71e609..45359c9 100644
--- a/src/components/BigData/Card/index.vue
+++ b/src/components/BigData/Card/index.vue
@@ -10,6 +10,7 @@
         </div>
         <div class="card-panel-num" >
           {{ context }}
+          <span style="font-size: 10px;color:#888">{{unit}}</span>
         </div>
       </div>
     </div>
@@ -39,6 +40,10 @@
     color: {
       type: String,
       default: '#40c9c6'
+    },
+    unit:{
+      type: String,
+      default:''
     }
   },
   computed: {
diff --git a/src/components/BigData/Card1/index.vue b/src/components/BigData/Card1/index.vue
index 030b2dc..aa46454 100644
--- a/src/components/BigData/Card1/index.vue
+++ b/src/components/BigData/Card1/index.vue
@@ -1,10 +1,11 @@
 <template>
   <el-card :body-style="{ padding: '0px' }" shadow="always">
-    <div class="card-panel" >
-      <div :style="backgroundColor" class="card-panel-icon-wrapper">
-        <svg-icon :icon-class="icon" class-name="card-panel-icon" />
+    <div class="card-panel">
+      <div v-if="icon" :style="backgroundColor" class="card-panel-icon-wrapper">
+        <svg-icon :icon-class="icon" class-name="card-panel-icon"/>
       </div>
-      <div  class="card-panel-description">
+      <div v-else style="float:left; width: 20px;height: 100%;"></div>
+      <div class="card-panel-description">
         <!-- <div class="card-panel-text">
           {{ title[0] }} <span class="card-panel-num">{{ context[0] }}</span>
         </div>
@@ -13,18 +14,20 @@
         </div> -->
         <div class="two" v-if="title.length===2">
           <div class="card-panel-text">
-            {{ title[0] }} <span class="card-panel-num">{{ context[0] }}</span>
+            {{ title[0] }} <span class="card-panel-num">{{ context[0] }}<span
+            style="font-size: 10px;color:#888;margin-left: 5px">{{unit}}</span></span>
           </div>
-          <div class="card-panel-text" >
-            {{ title[1] }} <span class="card-panel-num">{{ context[1] }}</span>
+          <div class="card-panel-text">
+            {{ title[1] }} <span class="card-panel-num">{{ context[1] }}<span
+            style="font-size: 10px;color:#888;margin-left: 5px">{{unit}}</span></span>
           </div>
         </div>
         <div class="only" v-else>
           <div class="card-panel-text">
             {{ title[0] }}
           </div>
-          <div class="card-panel-num" >
-            {{ context[0] }}
+          <div class="card-panel-num">
+            {{ context[0] }}<span style="font-size: 10px;color:#888">{{unit}}</span>
           </div>
         </div>
       </div>
@@ -33,42 +36,46 @@
 </template>
 
 <script>
-export default {
-  name: 'Card1',
-  props: {
-    title: {
-      type: Array,
-      default: function() {
-        return ['标题', '标题']
+  export default {
+    name: 'Card1',
+    props: {
+      title: {
+        type: Array,
+        default: function () {
+          return ['标题', '标题']
+        }
+      },
+      subtitle: {
+        type: String,
+        default: ''
+      },
+      icon: {
+        type: String,
+        default: ''
+      },
+      context: {
+        type: Array,
+        default: function () {
+          return ['--', '--']
+        }
+      },
+      color: {
+        type: String,
+        default: '#40c9c6'
+      },
+      unit: {
+        type: String,
+        default: ''
       }
     },
-    subtitle: {
-      type: String,
-      default: ''
-    },
-    icon: {
-      type: String,
-      default: ''
-    },
-    context: {
-      type: Array,
-      default: function() {
-        return ['--', '--']
-      }
-    },
-    color: {
-      type: String,
-      default: '#40c9c6'
-    }
-  },
-  computed: {
-    backgroundColor() {
-      return {
-        color: this.color
+    computed: {
+      backgroundColor() {
+        return {
+          color: this.color
+        }
       }
     }
   }
-}
 </script>
 
 <style lang="scss" scoped>
@@ -108,7 +115,7 @@
       overflow: auto;
       margin-left: 5px;
 
-      .two{
+      .two {
         .card-panel-text {
           line-height: 18px;
           color: rgba(0, 0, 0, 0.45);
@@ -123,7 +130,7 @@
           float: right;
         }
       }
-      .only{
+      .only {
         .card-panel-text {
           line-height: 18px;
           color: rgba(0, 0, 0, 0.45);
diff --git a/src/icons/svg/icon-noise.svg b/src/icons/svg/icon-noise.svg
new file mode 100644
index 0000000..00bef71
--- /dev/null
+++ b/src/icons/svg/icon-noise.svg
@@ -0,0 +1,2 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1648634383080" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2093" xmlns:xlink="http://www.w3.org/1999/xlink" width="128" height="128"><defs><style type="text/css">@font-face { font-family: feedback-iconfont; src: url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.woff2?t=1630033759944") format("woff2"), url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.woff?t=1630033759944") format("woff"), url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.ttf?t=1630033759944") format("truetype"); }
+</style></defs><path d="M875.039 549.868c-25.436 0-47.411 13.91-59.3 34.4h-125.9l-99.564-199.177-76.703 281.23-51.528-566.757-67.461-5.735-130.8 490.44H49.397v68.802h267.259l94.464-354.268 51.235 563.733 67.451 5.913 79.432-291.445 38.077 76.057h168.428c11.91 20.419 33.864 34.391 59.3 34.391 37.98 0 68.792-30.879 68.792-68.797-0.005-38.062-30.817-68.787-68.797-68.787z" p-id="2094"></path></svg>
\ No newline at end of file
diff --git a/src/icons/svg/icon-valve.svg b/src/icons/svg/icon-valve.svg
new file mode 100644
index 0000000..f5d96e2
--- /dev/null
+++ b/src/icons/svg/icon-valve.svg
@@ -0,0 +1,2 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1648634707805" class="icon" viewBox="0 0 1090 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3809" xmlns:xlink="http://www.w3.org/1999/xlink" width="136.25" height="128"><defs><style type="text/css">@font-face { font-family: feedback-iconfont; src: url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.woff2?t=1630033759944") format("woff2"), url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.woff?t=1630033759944") format("woff"), url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.ttf?t=1630033759944") format("truetype"); }
+</style></defs><path d="M502.944 296.975V143.052h-231.98c-31.587 0-57.321-24.93-57.321-55.526 0-30.598 25.75-55.526 57.321-55.526H833.06c31.571 0 57.306 24.93 57.306 55.525 0 30.922-25.735 55.526-57.29 55.526h-231.64v153.924h18.179c21.615 0 39.112 16.955 39.112 37.904v90.565l-213.105-0.34v-90.225c0-20.95 17.497-37.904 39.128-37.904h18.194z m-381.74 590.293v63.84c0 9.306-7.834 16.955-17.698 16.955H58.231c-9.862-0.001-17.698-7.65-17.698-17.296V542.472c0-9.63 7.835-17.28 17.698-17.28h45.274c9.863 0 17.698 7.65 17.698 17.28v83.133h150.55c6.272-85.518 79.247-152.95 168.387-152.95h207.98c89.14 0 162.116 67.432 168.403 152.95h150.873v-83.798c0-9.29 7.495-16.615 17.033-16.615h46.297c9.523 0 17.001 7.308 17.001 16.615v409.625c0.341 9.321-7.478 16.63-17.016 16.63h-46.297c-9.523 0-17.018-7.309-17.018-16.63v-64.165H805.36C780.755 948.583 719.655 992 648.119 992H440.142c-71.52 0-132.635-43.402-157.239-104.733H121.204z" p-id="3810"></path></svg>
\ No newline at end of file
diff --git a/src/views/dashboard/components/PanelGroup.vue b/src/views/dashboard/components/PanelGroup.vue
index b72d289..332cbf9 100644
--- a/src/views/dashboard/components/PanelGroup.vue
+++ b/src/views/dashboard/components/PanelGroup.vue
@@ -1,12 +1,12 @@
 <template>
   <el-row class="panel-group">
     <div v-for="card in dataGroup1" :key="card.index" class="card-panel-col">
-      <card1 :title="card.title" :context="card.context" :icon="card.icon" :color="card.color"/>
+      <card1 :title="card.title" :context="card.context" :icon="card.icon" :color="card.color" :unit="card.unit"/>
     </div>
 
     <div v-for="card in dataGroup" :key="card.title" class="card-panel-col">
       <div v-if="hasPerm(card.permission)">
-        <card :title="card.title" :context="card.context" :icon="card.icon" :color="card.color" @click.native="goPage(card.path)"/>
+        <card :title="card.title" :context="card.context" :icon="card.icon" :unit="card.unit" :color="card.color" @click.native="goPage(card.path)"/>
       </div>
     </div>
   </el-row>
@@ -16,7 +16,7 @@
 import Card1 from '@/components/BigData/Card1'
 import Card from '@/components/BigData/Card'
 // 首页
-import { getWatchStatistic , waterMeterCount } from '@/api/overview'
+import { getWatchStatistic , waterMeterCount, valveCount } from '@/api/dashboard'
 // 根据布防数量统计井数量
 import { wellCountByBfzt } from '@/api/well'
 // 当前报警数
@@ -36,30 +36,33 @@
           context: ['--', '--'],
           icon: 'icon-water',
           color: '#40c9c6',
+          unit: '吨',
           index: 0
         },
         {
-          title: ['今日用水量', '昨日用水量'],
+          title: ['今日用水量', '生产厂区用水量'],
           context: ['--', '--'],
-          icon: 'icon-water',
+          icon: '',
           color: '#36a3f7',
+          unit: '吨',
           index: 1
         },
         {
-          title: ['实时噪声'],
+          title: ['滑道实时噪声'],
           context: ['--'],
-          icon: 'icon-device',
+          icon: 'icon-noise',
           color: '#f1c353',
+          unit: 'db',
           index: 2
         }
       ],
       dataGroup: [
         {
-          title: '设备总数',
+          title: '阀门数量',
           context: '--',
-          icon: 'icon-device',
+          icon: 'icon-valve',
           color: '#40c9c6',
-          path: '/deviceList',
+          path: '/deviceList?deviceType=20',
           permission: '/device/list'
         },
         {
@@ -67,11 +70,11 @@
           context: '--',
           icon: 'icon-watch',
           color: '#9694f7',
-          path: '/deviceList',
+          path: '/deviceList?deviceType=13',
           permission: '/device/list'
         },
         {
-          title: '当前报警数',
+          title: '报警信息',
           context: '--',
           icon: 'icon-alarm',
           color: '#f4516c',
@@ -83,10 +86,10 @@
   },
   mounted() {
     this.getWater()
-    this.getWellCount()
+    // this.getWellCount()
     this.getDeviceCount()
     this.getAlarmCount()
-    this.getJobCount()
+    // this.getJobCount()
   },
   methods: {
     refresh() {
@@ -97,24 +100,31 @@
       this.$router.push(path)
     },
     getWater() {
+      // 用水量
       getWatchStatistic().then(response => {
-        this.dataGroup1[0].context = [response.data.total, response.data.month]
-        this.dataGroup1[1].context = [response.data.today, response.data.yesterday]
-        this.dataGroup1[2].context = [Number(response.data.sound).toFixed(2)]
+        this.dataGroup1[0].context = [response.data.total?parseFloat(response.data.total).toFixed(0):'--', response.data.month?parseFloat(response.data.month).toFixed(0):'--']
+        this.dataGroup1[1].context = [response.data.today?parseFloat(response.data.today).toFixed(0):'--', response.data.yesterday?parseFloat(response.data.yesterday).toFixed(0):'--']
+        this.dataGroup1[2].context = [response.data.sound?Number(response.data.sound).toFixed(2):'--']
       })
-      waterMeterCount().then(response => {
-        this.dataGroup[1].context = response.data
-      })
+
     },
-    getWellCount() {
-      wellCountByBfzt().then(response => {
-        this.dataGroup[0].context = response.data.total
-      })
-    },
+    // getWellCount() {
+    //   wellCountByBfzt().then(response => {
+    //     this.dataGroup[0].context = response.data.total
+    //   })
+    // },
     getDeviceCount() {
       // deviceStaticByStatus().then(response => {
       //   this.dataGroup[1].context = response.data.total
       // })
+      // 阀门数量
+      valveCount().then(response => {
+        this.dataGroup[0].context = response.data
+      })
+      // 水表数量
+      waterMeterCount().then(response => {
+        this.dataGroup[1].context = response.data
+      })
     },
     getAlarmCount() {
       alarmNowStatic().then(response => {
@@ -159,7 +169,7 @@
   //   &:hover {
   //     .card-panel-icon-wrapper {
   //       color: #fff;
-        
+
   //     }
 
   //     .icon-people {
diff --git a/src/views/dashboard/components/waterCountByAreaBar.vue b/src/views/dashboard/components/waterCountByAreaBar.vue
index 1bdac48..c488923 100644
--- a/src/views/dashboard/components/waterCountByAreaBar.vue
+++ b/src/views/dashboard/components/waterCountByAreaBar.vue
@@ -1,9 +1,10 @@
 <template>
   <div class="container">
     <div class="statistic-container">
+      <el-button round size="mini" @click="setDefaultTime('year')">本年</el-button>
+      <el-button round size="mini" @click="setDefaultTime('season')">本季</el-button>
       <el-button round size="mini" @click="setDefaultTime('month')">本月</el-button>
-      <el-button round size="mini" @click="setDefaultTime('week')">近7日</el-button>
-      <el-button round size="mini" @click="setDefaultTime('yesterday')">昨日</el-button>
+      <el-button round size="mini" @click="setDefaultTime('week')">本周</el-button>
       <el-button round size="mini" @click="setDefaultTime('today')">今日</el-button>
       <el-date-picker
         v-model="timeRange"
@@ -107,7 +108,7 @@
   },
   mounted() {
     this.setDefaultTime('today')
-    this.fetchArea()
+    // this.fetchArea()
   },
   methods: {
     fetchArea() {
@@ -130,10 +131,11 @@
     },
     fetchData() {
       const params = {
-        areaId: this.areaId,
+        areaId: '110000',
         startTime: this.timeRange[0],
         endTime: this.timeRange[1]
       }
+      this.$emit('change', params)
       countBySecondArea(params).then(response => {
         this.isShow = false
         this.chartData.rows = response.data
@@ -153,7 +155,21 @@
       })
     },
     setDefaultTime(val) {
-      if (val === 'month') {
+      if (val === 'year') {
+        var today = new Date()
+        var tYear = today.getFullYear()
+        const beginTime = tYear + '-01-01'
+        const endTime = getDayTime(new Date().getTime())
+        this.timeRange = [beginTime, endTime.Format('yyyy-MM-dd')]
+      }if (val === 'season') {
+        var today = new Date()
+        var tYear = today.getFullYear()
+        var tMonth = today.getMonth() + 1
+        const oldMonth = tMonth<4?'01':(tMonth<7?'04':(tMonth<10?'07':'10'))
+        const beginTime = tYear + '-' + oldMonth + '-01'
+        const endTime = getDayTime(new Date().getTime())
+        this.timeRange = [beginTime, endTime.Format('yyyy-MM-dd')]
+      }else if (val === 'month') {
         var today = new Date()
         var tYear = today.getFullYear()
         var tMonth = today.getMonth() + 1
@@ -164,7 +180,8 @@
         const endTime = getDayTime(new Date().getTime())
         this.timeRange = [beginTime, endTime.Format('yyyy-MM-dd')]
       } else if (val === 'week') {
-        this.timeRange = [getDayTime(new Date().getTime() - 24 * 6 * 60 * 60 * 1000).Format('yyyy-MM-dd'), getDayTime(new Date().getTime()).Format('yyyy-MM-dd')]
+        const nowDayOfWeek =  new Date().getDay()-1
+        this.timeRange = [getDayTime(new Date().getTime() - 24 * nowDayOfWeek * 60 * 60 * 1000).Format('yyyy-MM-dd'), getDayTime(new Date().getTime()).Format('yyyy-MM-dd')]
       } else if (val === 'yesterday') {
         this.timeRange = [getDayTime(new Date().getTime() - 24 * 60 * 60 * 1000).Format('yyyy-MM-dd'), getDayTime(new Date().getTime() - 24 * 60 * 60 * 1000).Format('yyyy-MM-dd')]
       } else if (val === 'today') {
diff --git a/src/views/dashboard/components/waterCountByDay.vue b/src/views/dashboard/components/waterCountByDay.vue
index 8e12f02..78d1f7c 100644
--- a/src/views/dashboard/components/waterCountByDay.vue
+++ b/src/views/dashboard/components/waterCountByDay.vue
@@ -1,12 +1,12 @@
 <template>
   <div class="container">
-    <div class="function">
-      <el-button round size="mini" @click="changeTime('year')">近1年</el-button>
-      <el-button round size="mini" @click="changeTime('halfyear')">近6月</el-button>
-      <el-button round size="mini" @click="changeTime('3month')">近3月</el-button>
-      <el-button round size="mini" @click="changeTime('month')">近1月</el-button>
-      <el-button round size="mini" @click="changeTime('week')">近1周</el-button>
-    </div>
+    <!--<div class="function">-->
+      <!--<el-button round size="mini" @click="changeTime('year')">近1年</el-button>-->
+      <!--<el-button round size="mini" @click="changeTime('halfyear')">近6月</el-button>-->
+      <!--<el-button round size="mini" @click="changeTime('3month')">近3月</el-button>-->
+      <!--<el-button round size="mini" @click="changeTime('month')">近1月</el-button>-->
+      <!--<el-button round size="mini" @click="changeTime('week')">近1周</el-button>-->
+    <!--</div>-->
     <ve-line :data="chartData" :title="title" :extend="extend" :settings="chartSettings"/>
   </div>
 </template>
@@ -17,6 +17,18 @@
 import { getDoorAreaTree } from '@/api/system/area'
 export default {
   name: 'WaterCountByDay',
+  props:{
+    query: {
+      type: Object,
+      default:()=>{
+        return {
+          areaId: '',
+          startTime: '',
+          endTime: ''
+        }
+      }
+    }
+  },
   data() {
     return {
       listQuery: {
@@ -52,8 +64,13 @@
     }
   },
   mounted() {
-    this.changeTime('month')
-    this.fetchArea()
+    // this.changeTime('month')
+    // this.fetchArea()
+  },
+  watch:{
+    query(val){
+      this.fetchData()
+    }
   },
   methods: {
     fetchArea() {
@@ -73,7 +90,7 @@
       })
     },
     fetchData() {
-      countByDayFirst(this.listQuery).then(response => {
+      countByDayFirst(this.query).then(response => {
         const arr = response.data.map(function(item) {
           for (let i = 0; i < item.data.length; i++) {
             item[item.data[i].areaName] = item.data[i].count
diff --git a/src/views/dashboard/components/waterCountByDept.vue b/src/views/dashboard/components/waterCountByDept.vue
index a0c82cf..02e27cd 100644
--- a/src/views/dashboard/components/waterCountByDept.vue
+++ b/src/views/dashboard/components/waterCountByDept.vue
@@ -1,22 +1,22 @@
 <!--suppress ALL -->
 <template>
   <div class="container">
-    <div class="function">
-      <el-button round size="mini" @click="changeTime('year')">近1年</el-button>
-      <el-button round size="mini" @click="changeTime('halfyear')">近6月</el-button>
-      <el-button round size="mini" @click="changeTime('3month')">近3月</el-button>
-      <el-button round size="mini" @click="changeTime('month')">近1月</el-button>
-      <el-button round size="mini" @click="changeTime('week')">近1周</el-button>
-    </div>
+    <!--<div class="function">-->
+      <!--<el-button round size="mini" @click="changeTime('year')">近1年</el-button>-->
+      <!--<el-button round size="mini" @click="changeTime('halfyear')">近6月</el-button>-->
+      <!--<el-button round size="mini" @click="changeTime('3month')">近3月</el-button>-->
+      <!--<el-button round size="mini" @click="changeTime('month')">近1月</el-button>-->
+      <!--<el-button round size="mini" @click="changeTime('week')">近1周</el-button>-->
+    <!--</div>-->
     <ve-pie :data="chartData" :extend="extend" :title="title"/>
-    <div class="function">
-      <el-button
-        v-for="item in areaList"
-        :key="item.id"
-        round
-        @click="areaChange(item.id)"
-        size="mini">{{item.name}}</el-button>
-    </div>
+    <!--<div class="function">-->
+      <!--<el-button-->
+        <!--v-for="item in areaList"-->
+        <!--:key="item.id"-->
+        <!--round-->
+        <!--@click="areaChange(item.id)"-->
+        <!--size="mini">{{item.name}}</el-button>-->
+    <!--</div>-->
   </div>
 </template>
 
@@ -25,6 +25,18 @@
 import { getDoorAreaTree } from '@/api/system/area'
 export default {
   name: 'WaterCountByDepy',
+  props:{
+    query: {
+      type: Object,
+      default:()=>{
+        return {
+          areaId: '',
+          startTime: '',
+          endTime: ''
+        }
+      }
+    }
+  },
   data() {
     return {
       listQuery: {
@@ -69,7 +81,12 @@
   },
   mounted() {
     // TODO:待调试真接口
-    this.fetchArea()
+    // this.fetchArea()
+  },
+  watch:{
+    query(val){
+      this.fetchData()
+    }
   },
   methods: {
     fetchArea() {
@@ -104,8 +121,7 @@
       //   { 'areaName': '码头作业区', 'count': 78 },
       //   { 'areaName': '车间生产区', 'count': 78 }
       // ]
-      this.listQuery.areaId = this.areaId
-      countBySecondArea(this.listQuery).then(response => {
+      countBySecondArea(this.query).then(response => {
         this.chartData.rows = response.data
       })
     },
diff --git a/src/views/dashboard/components/waterNote.vue b/src/views/dashboard/components/waterNote.vue
new file mode 100644
index 0000000..aa0f448
--- /dev/null
+++ b/src/views/dashboard/components/waterNote.vue
@@ -0,0 +1,152 @@
+<!--suppress ALL -->
+<template>
+  <div class="container">
+    <div>
+      用水事记
+    </div>
+
+  </div>
+</template>
+
+<script>
+import { countBySecondArea } from '@/api/overview'
+import { getDoorAreaTree } from '@/api/system/area'
+export default {
+  name: 'WaterNote',
+  props:{
+    query: {
+      type: Object,
+      default:()=>{
+        return {
+          areaId: '',
+          startTime: '',
+          endTime: ''
+        }
+      }
+    }
+  },
+  data() {
+    return {
+      listQuery: {
+        areaId: '',
+        startTime: '',
+        endTime: ''
+      },
+      areaId:'',
+      areaList: [],
+      chartData: {
+        columns: ['areaName', 'count'],
+        rows: []
+      },
+      extend: {
+        grid: {
+          right: '30%'
+        },
+        legend: {
+          type: 'scroll',
+          top: '60px',
+          right: '0px',
+          orient: 'vertical'
+        },
+        series: {
+          label: { show: true, position: 'outside', formatter: '{b}' },
+          right: 120
+        },
+        tooltip: { trigger: 'item', formatter: '{b}<br/>用水量：{c}吨<br/>占比：{d}%' }
+      },
+      title: {
+        text: '分区用水占比图'
+      },
+      chartSettings: {
+        labelMap: {
+          'areaName': '分区',
+          'count': '用水量'
+        },
+        dimension: 'areaName',
+        metrics: 'count'
+      }
+    }
+  },
+  mounted() {
+    // TODO:待调试真接口
+    // this.fetchArea()
+  },
+  watch:{
+    query(val){
+      this.fetchData()
+    }
+  },
+  methods: {
+    fetchArea() {
+      getDoorAreaTree().then(response => {
+        if (response.code === 200) {
+          this.areaList = response.data.filter(item => {
+            return item.pid === '1'
+          }).map(function(item) {
+            return {
+              id: item.id, name: item.name
+            }
+          })
+          if (this.areaList.length !== 0) { this.areaChange(this.areaList[0].id) }
+        }
+      })
+    },
+    areaChange(val){
+      this.areaId = val
+      this.fetchData()
+    },
+    // 获取统计数据
+    fetchData() {
+      // this.chartData.rows = [
+      //   { 'areaName': '科技楼及食堂', 'count': 53 },
+      //   { 'areaName': 'A\\B\\C\\D\\E座', 'count': 78 },
+      //   { 'areaName': '厂区', 'count': 78 },
+      //   { 'areaName': '分段分区', 'count': 78 },
+      //   { 'areaName': '船坞分区', 'count': 78 },
+      //   { 'areaName': '刀把码头', 'count': 78 },
+      //   { 'areaName': '制管作业区', 'count': 78 },
+      //   { 'areaName': '滑道作业区', 'count': 78 },
+      //   { 'areaName': '码头作业区', 'count': 78 },
+      //   { 'areaName': '车间生产区', 'count': 78 }
+      // ]
+      countBySecondArea(this.query).then(response => {
+        this.chartData.rows = response.data
+      })
+    },
+    changeTime(timeType) {
+      let startTime
+      switch (timeType) {
+        case 'year':
+          startTime = getDayTime(new Date().getTime() - 24 * 365 * 60 * 60 * 1000)
+          this.listQuery.startTime = startTime.Format('yyyy-MM-dd')
+          break
+        case 'halfyear':
+          startTime = getDayTime(new Date().getTime() - 24 * 182 * 60 * 60 * 1000)
+          this.listQuery.startTime = startTime.Format('yyyy-MM-dd')
+          break
+        case '3month':
+          startTime = getDayTime(new Date().getTime() - 24 * 90 * 60 * 60 * 1000)
+          this.listQuery.startTime = startTime.Format('yyyy-MM-dd')
+          break
+        case 'month':
+          startTime = getDayTime(new Date().getTime() - 24 * 30 * 60 * 60 * 1000)
+          this.listQuery.startTime = startTime.Format('yyyy-MM-dd')
+          break
+        case 'week':
+          startTime = getDayTime(new Date().getTime() - 24 * 7 * 60 * 60 * 1000)
+          this.listQuery.startTime = startTime.Format('yyyy-MM-dd')
+          break
+      }
+      const endTime = new Date()
+      this.listQuery.endTime = endTime.Format('yyyy-MM-dd')
+      this.fetchData()
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+  .container{
+    position:relative;
+    height: 455px;
+  }
+</style>
diff --git a/src/views/dashboard/index.vue b/src/views/dashboard/index.vue
index fdbc38a..831dbc3 100644
--- a/src/views/dashboard/index.vue
+++ b/src/views/dashboard/index.vue
@@ -1,31 +1,33 @@
 <template>
   <div class="dashboard-container" style="background-color: white">
     <panel-group ref="panelgroup"/>
-    <el-row :gutter="10">
+    <el-row>
       <!-- 用水统计图 -->
+      <el-col :span="18">
+        <el-card shadow="never">
+          <water-count-by-area-bar @change="changeWaterQuery"/>
+        </el-card>
+      </el-col>
+      <el-col :span="6">
+        <el-card shadow="never">
+          <water-note/>
+        </el-card>
+      </el-col>
+    </el-row>
+    <el-row>
+      <!-- 分区用水占比图 -->
       <el-col :span="12">
         <el-card shadow="never">
-          <water-count-by-dept-bar/>
+          <water-count-by-dept :query="listQuery1" ref="waterCountPie"/>
         </el-card>
       </el-col>
       <!-- 用水走势图 -->
       <el-col :span="12">
         <el-card shadow="never">
-          <water-count-by-day/>
+          <water-count-by-day :query="listQuery1" ref="waterCountDay"/>
         </el-card>
       </el-col>
-      <!-- 分区用水统计图 -->
-      <el-col :span="12">
-        <el-card shadow="never">
-          <water-count-by-area-bar/>
-        </el-card>
-      </el-col>
-      <!-- 分区用水占比图 -->
-      <el-col :span="12">
-        <el-card shadow="never">
-          <water-count-by-depy/>
-        </el-card>
-      </el-col>
+
       <!--水表报警次数统计-->
       <el-col v-if="hasPerm('/statics/alarmsByDay')" :span="12">
         <el-card shadow="never">
@@ -64,20 +66,22 @@
 import DeviceCountByOnline from './components/DeviceCountByOnline'
 import AlarmByDays from './components/AlarmByDays'
 import JobByStatus from './components/JobByStatus'
-import WaterCountByDepy from './components/waterCountByDept'
+import WaterCountByDept from './components/waterCountByDept'
 import WaterCountByDeptBar from './components/waterCountByDeptBar'
 import WaterCountByDay from './components/waterCountByDay'
 import WaterCountByAreaBar from "./components/waterCountByAreaBar";
 import WatchAlarmBar from "./components/watchAlarmBar";
+import WaterNote from "./components/waterNote";
 
 export default {
   name: 'Dashboard',
   components: {
+    WaterNote,
     WatchAlarmBar,
     WaterCountByAreaBar,
     WaterCountByDay,
     WaterCountByDeptBar,
-    WaterCountByDepy,
+    WaterCountByDept,
     JobByStatus,
     AlarmByDays,
     PanelGroup,
@@ -108,12 +112,25 @@
       state.needRefresh = needRefresh
     }
   },
+  data(){
+    return {
+      listQuery1:{
+        areaId:'110000',
+        startTime:new Date().Format('yyyy-MM-dd'),
+        endTime:new Date().Format('yyyy-MM-dd')
+      },// 分区用水量查询条件
+      listQuery2:{
+        areaId:'',
+        startTime:'',
+        endTime:''
+      } // 分区报警查询条件
+    }
+  },
   watch: {
     needRefresh(val) {
       // 需要刷新
       if (val) {
         console.log('refresh dashboard')
-        debugger
         this.$refs.panelgroup.refresh()
       }
     }
@@ -124,6 +141,10 @@
   methods: {
     webSocket() {
       this.$store.dispatch('initWebSocket')
+    },
+    // 切换分区查询条件
+    changeWaterQuery(listQuery1){
+      this.listQuery1 = listQuery1
     }
   }
 }
diff --git a/src/views/dashboard/index_bak.vue b/src/views/dashboard/index_bak.vue
new file mode 100644
index 0000000..fdbc38a
--- /dev/null
+++ b/src/views/dashboard/index_bak.vue
@@ -0,0 +1,149 @@
+<template>
+  <div class="dashboard-container" style="background-color: white">
+    <panel-group ref="panelgroup"/>
+    <el-row :gutter="10">
+      <!-- 用水统计图 -->
+      <el-col :span="12">
+        <el-card shadow="never">
+          <water-count-by-dept-bar/>
+        </el-card>
+      </el-col>
+      <!-- 用水走势图 -->
+      <el-col :span="12">
+        <el-card shadow="never">
+          <water-count-by-day/>
+        </el-card>
+      </el-col>
+      <!-- 分区用水统计图 -->
+      <el-col :span="12">
+        <el-card shadow="never">
+          <water-count-by-area-bar/>
+        </el-card>
+      </el-col>
+      <!-- 分区用水占比图 -->
+      <el-col :span="12">
+        <el-card shadow="never">
+          <water-count-by-depy/>
+        </el-card>
+      </el-col>
+      <!--水表报警次数统计-->
+      <el-col v-if="hasPerm('/statics/alarmsByDay')" :span="12">
+        <el-card shadow="never">
+          <watch-alarm-bar/>
+        </el-card>
+      </el-col>
+      <!--报警次数统计-->
+      <el-col v-if="hasPerm('/statics/alarmsByDay')" :span="12">
+        <el-card shadow="never">
+          <alarm-by-days/>
+        </el-card>
+      </el-col>
+      <!--设备在线数量统计-->
+      <el-col v-if="hasPerm('/statics/deviceStaticsByType')" :span="12">
+        <el-card shadow="never">
+          <device-count-by-online/>
+        </el-card>
+      </el-col>
+
+      <!--设备数量统计-->
+      <el-col v-if="hasPerm('/statics/deviceStaticsByType')" :span="12">
+        <el-card shadow="never">
+          <device-count/>
+        </el-card>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+import PanelGroup from './components/PanelGroup'
+import WellCountByBfzt from './components/WellCountByBfzt'
+import WellCountByType from './components/WellCountByType'
+import DeviceCount from './components/DeviceCount'
+import DeviceCountByOnline from './components/DeviceCountByOnline'
+import AlarmByDays from './components/AlarmByDays'
+import JobByStatus from './components/JobByStatus'
+import WaterCountByDepy from './components/waterCountByDept'
+import WaterCountByDeptBar from './components/waterCountByDeptBar'
+import WaterCountByDay from './components/waterCountByDay'
+import WaterCountByAreaBar from "./components/waterCountByAreaBar";
+import WatchAlarmBar from "./components/watchAlarmBar";
+
+export default {
+  name: 'Dashboard',
+  components: {
+    WatchAlarmBar,
+    WaterCountByAreaBar,
+    WaterCountByDay,
+    WaterCountByDeptBar,
+    WaterCountByDepy,
+    JobByStatus,
+    AlarmByDays,
+    PanelGroup,
+    WellCountByBfzt,
+    WellCountByType,
+    DeviceCount,
+    DeviceCountByOnline
+  },
+  computed: {
+    ...mapGetters([
+      'name',
+      'roleNames',
+      'roleTips',
+      'wellTypes',
+      'deviceTypes',
+      'communications',
+      'area'
+    ])
+  },
+  mutations: {
+    SET_WEBSOCKET: (state, websocket) => {
+      state.websocket = websocket
+    },
+    SET_WS_STATUS: (state, wsStatus) => {
+      state.wsStatus = wsStatus
+    },
+    SET_NEED_REFRESH: (state, needRefresh) => {
+      state.needRefresh = needRefresh
+    }
+  },
+  watch: {
+    needRefresh(val) {
+      // 需要刷新
+      if (val) {
+        console.log('refresh dashboard')
+        debugger
+        this.$refs.panelgroup.refresh()
+      }
+    }
+  },
+  mounted() {
+    // this.webSocket()
+  },
+  methods: {
+    webSocket() {
+      this.$store.dispatch('initWebSocket')
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.dashboard-container{
+  .el-row{
+    .el-col{
+      margin-bottom: 10px;
+    }
+  }
+}
+.dashboard {
+  &-container {
+    padding: 10px 20px;
+  }
+  &-text {
+    font-size: 30px;
+    line-height: 46px;
+  }
+}
+</style>
diff --git a/src/views/layout/Layout.vue b/src/views/layout/Layout.vue
deleted file mode 100644
index 7c3d46d..0000000
--- a/src/views/layout/Layout.vue
+++ /dev/null
@@ -1,111 +0,0 @@
-<template>
-  <el-container :class="classObj" class="app-wrapper">
-    <div v-if="device==='mobile'&&sidebar.opened" class="drawer-bg" @click="handleClickOutside"/>
-    <app-header class="app-header"/>
-    <el-main class="app-body">
-      <!--侧边栏-->
-      <sidebar class="sidebar-container"/>
-      <!--右半部分-->
-      <div :class="{hasTagsView:needTagsView}" class="main-container">
-        <!--开启固定头部设置-->
-        <div v-if="fixedHeader">
-          <!--导航(面包屑)-->
-          <navbar/>
-          <!--标签栏-->
-          <tags-view v-if="needTagsView" />
-          <!--主内容包裹在el-scrollbar中-->
-          <el-scrollbar class="no-head-scrollbar">
-            <app-main/>
-          </el-scrollbar>
-        </div>
-        <!--为开始固定头部设置-->
-        <div v-else>
-          <!--导航，tagsView都包裹在el-scrollbar中-->
-          <el-scrollbar class="has-head-scrollbar">
-            <navbar/>
-            <tags-view v-if="needTagsView" />
-            <app-main/>
-          </el-scrollbar>
-        </div>
-        <!--悬浮框-->
-        <right-panel v-if="false">
-          <settings />
-        </right-panel>
-      </div>
-    </el-main>
-  </el-container>
-</template>
-
-<script>
-import RightPanel from '@/components/RightPanel'
-import { AppHeader, Navbar, Sidebar, AppMain } from './components'
-import ResizeMixin from './mixin/ResizeHandler'
-import TagsView from './components/TagsView/index'
-import { mapState } from 'vuex'
-import Settings from './components/Settings/index'
-
-export default {
-  name: 'Layout',
-  components: {
-    Settings,
-    TagsView,
-    AppHeader,
-    Navbar,
-    Sidebar,
-    AppMain,
-    RightPanel
-  },
-  mixins: [ResizeMixin],
-  computed: {
-    ...mapState({
-      sidebar: state => state.app.sidebar,
-      device: state => state.app.device,
-      showSettings: state => state.settings.showSettings,
-      needTagsView: state => state.settings.tagsView,
-      fixedHeader: state => state.settings.fixedHeader
-    }),
-    classObj() {
-      return {
-        hideSidebar: !this.sidebar.opened,
-        openSidebar: this.sidebar.opened,
-        withoutAnimation: this.sidebar.withoutAnimation,
-        mobile: this.device === 'mobile'
-      }
-    }
-  },
-  methods: {
-    handleClickOutside() {
-      this.$store.dispatch('CloseSideBar', { withoutAnimation: false })
-    }
-  }
-}
-</script>
-
-<style rel="stylesheet/scss" lang="scss" scoped>
-  @import "src/styles/mixin.scss";
-  .app-wrapper {
-    @include clearfix;
-    position: relative;
-    height: 100%;
-    width: 100%;
-    &.mobile.openSidebar{
-      position: fixed;
-      top: 0;
-    }
-  }
-  .drawer-bg {
-    background: #000;
-    opacity: 0.3;
-    width: 100%;
-    top: 0;
-    height: 100%;
-    position: absolute;
-    z-index: 999;
-  }
-  /*.el-scrollbar{*/
-    /*height: calc(100vh - 50px);*/
-  /*}*/
-  .has-head-scrollbar{
-    height: 100vh;
-  }
-</style>
diff --git a/src/views/layout/components/AppHeader.vue b/src/views/layout/components/AppHeader.vue
deleted file mode 100644
index 8d8912e..0000000
--- a/src/views/layout/components/AppHeader.vue
+++ /dev/null
@@ -1,151 +0,0 @@
-<template>
-  <el-header class="app-header">
-    <h3>{{ title }}</h3>
-    <!--子系统选项-->
-    <el-dropdown v-if="showChangeSys" class="systemSelect" size="medium" @command="handleCommand">
-      <span class="el-dropdown-link">{{ currentSystem.name }}<i class="el-icon-arrow-down el-icon--right"/>
-      </span>
-      <el-dropdown-menu slot="dropdown">
-        <el-dropdown-item v-for="system in systems" :command="system" :key="system.id">{{ system.name }}</el-dropdown-item>
-      </el-dropdown-menu>
-    </el-dropdown>
-    <el-dropdown class="dropdown-container" trigger="click">
-      <div class="dropdown-wrapper">
-        <span style="line-height:50px;">欢迎您，{{ name }}</span>
-        <!--<img :src="avatar+'?imageView2/1/w/80/h/80'" class="user-avatar">-->
-        <i class="el-icon-arrow-down"/>
-      </div>
-      <el-dropdown-menu slot="dropdown" class="user-dropdown">
-        <el-dropdown-item v-if="!baseConfig.singleSys">
-          <span style="display:block;" @click="backToIndex">回首页</span>
-        </el-dropdown-item>
-        <el-dropdown-item :divided="!baseConfig.singleSys">
-          <span style="display:block;" @click="resetPwd">修改密码</span>
-        </el-dropdown-item>
-        <el-dropdown-item divided>
-          <span style="display:block;" @click="logout">注销</span>
-        </el-dropdown-item>
-      </el-dropdown-menu>
-    </el-dropdown>
-    <reset-pwd v-show="showSetPwd" ref="retPwd"/>
-  </el-header>
-</template>
-
-<script>
-import { mapGetters } from 'vuex'
-import ResetPwd from '@/views/system/user/resetPwd'
-
-export default {
-  name: 'AppHeader',
-  components: { ResetPwd },
-  data() {
-    return {
-      title: this.baseConfig.title, // 标题
-      showChangeSys: !this.baseConfig.singleSys, // 是否显示切换系统菜单
-      name: this.$store.getters.name, // 用户姓名
-      showSetPwd: false // 是否显示修改密码按钮
-    }
-  },
-  computed: {
-    ...mapGetters([
-      'sidebar',
-      'avatar',
-      'currentSystem',
-      'systems'
-    ])
-  },
-  created() {
-    if (!this.baseConfig.singleSys) {
-      this.getSystems()
-    }
-  },
-  methods: {
-    toggleSideBar() {
-      this.$store.dispatch('ToggleSideBar')
-    },
-    logout() {
-      this.$store.dispatch('LogOut').then(() => {
-        location.reload() // 为了重新实例化vue-router对象 避免bug
-      })
-    },
-    resetPwd() {
-      this.showSetPwd = true
-      this.$refs.retPwd.initDialog(true)
-    },
-    backToIndex() {
-      const url = this.baseConfig.mainPage
-      window.location.href = url
-    },
-    // 切换子系统
-    handleCommand(command) {
-      console.log('切换子系统:' + command.name)
-      const params1 = `?token=${this.$store.getters.token}`
-      const params = `?sys=${command.name}&url=${command.url}&code=${command.code}&token=${this.$store.getters.token}`
-      // 判断系统是不是http的，如果是则打开新窗口
-      if (command.url.indexOf('http') > -1) {
-      // 取token
-        if (this.baseConfig.sameWindow) {
-          window.location.href = command.url + params1
-        } else {
-          window.open(command.url + params1, '_blank')
-        }
-      } else {
-      // 取token
-        if (this.baseConfig.sameWindow) {
-          window.location.href = this.baseConfig.mainPage + command.url + params
-        } else {
-          window.open(this.baseConfig.mainPage + command.url + params, '_blank')
-        }
-      }
-    },
-    // 获取子系统
-    getSystems() {
-      this.$store.dispatch('GetSystems').then(() => {
-        console.log('获取子系统列表成功-appHeader')
-      })
-    }
-  }
-}
-</script>
-
-<style rel="stylesheet/scss" lang="scss" scoped>
-  h3{
-    margin-left:24px;
-    display: inline-block;
-    float:left;
-  }
-  .dropdown-container {
-    /*height: 50px;*/
-    display: inline-block;
-    float: right;
-    z-index:500;
-    position: fixed;
-    top:0px;
-    right: 35px;
-    .dropdown-wrapper {
-      cursor: pointer;
-      margin-top: 5px;
-      position: relative;
-      line-height: initial;
-      .user-avatar {
-        width: 40px;
-        height: 40px;
-        border-radius: 10px;
-      }
-      .el-icon-caret-bottom {
-        font-size: 12px;
-      }
-    }
-  }
-  .systemSelect{
-    height: 56px;
-    display: inline-block;
-    float: left;
-    z-index:500;
-    position: fixed;
-    margin-left:60px;
-    top:5px;
-    color:#fff;
-    line-height: 56px;
-  }
-</style>
diff --git a/src/views/layout/components/AppMain.vue b/src/views/layout/components/AppMain.vue
deleted file mode 100644
index 2ea268e..0000000
--- a/src/views/layout/components/AppMain.vue
+++ /dev/null
@@ -1,38 +0,0 @@
-<template>
-  <section class="app-main">
-    <transition name="fade-transform" mode="out-in">
-      <!-- or name="fade" -->
-      <!-- <router-view :key="key"></router-view> -->
-      <div>
-        <keep-alive>
-          <router-view v-if="$route.meta.keepAlive" :key="key"/>
-        </keep-alive>
-        <router-view v-if="!$route.meta.keepAlive" :key="key"/>
-      </div>
-    </transition>
-  </section>
-</template>
-
-<script>
-export default {
-  name: 'AppMain',
-  computed: {
-    key() {
-      if (this.$route.meta.keepAlive) {
-        return this.$route.name !== undefined ? this.$route.name : this.$route
-      } else {
-        return this.$route.name !== undefined ? this.$route.name + new Date() : this.$route + new Date()
-      }
-    }
-  }
-}
-</script>
-
-<style scoped>
-.app-main {
-  /*50 = navbar  */
-  /*min-height: calc(100vh - 50px);*/
-  position: relative;
-  overflow: hidden;
-}
-</style>
diff --git a/src/views/layout/components/Navbar.vue b/src/views/layout/components/Navbar.vue
deleted file mode 100644
index 24ea99b..0000000
--- a/src/views/layout/components/Navbar.vue
+++ /dev/null
@@ -1,78 +0,0 @@
-<template>
-  <div class="navbar">
-    <hamburger :toggle-click="toggleSideBar" :is-active="sidebar.opened" class="hamburger-container"/>
-    <breadcrumb />
-  </div>
-</template>
-
-<script>
-import { mapGetters } from 'vuex'
-import Breadcrumb from '@/components/Breadcrumb'
-import Hamburger from '@/components/Hamburger'
-
-export default {
-  components: {
-    Breadcrumb,
-    Hamburger
-  },
-  computed: {
-    ...mapGetters([
-      'sidebar'
-    ])
-  },
-  methods: {
-    toggleSideBar() {
-      this.$store.dispatch('ToggleSideBar')
-    },
-    logout() {
-      this.$store.dispatch('LogOut').then(() => {
-        location.reload() // 为了重新实例化vue-router对象 避免bug
-      })
-    }
-  }
-}
-</script>
-
-<style rel="stylesheet/scss" lang="scss" scoped>
-.navbar {
-  height: 50px;
-  line-height: 50px;
-  box-shadow: 0 1px 3px 0 rgba(0,0,0,.12), 0 0 3px 0 rgba(0,0,0,.04);
-  .hamburger-container {
-    text-align: center;
-    height: 50px;
-    float: left;
-    padding: 0 12px;
-  }
-  .screenfull {
-    position: absolute;
-    right: 90px;
-    top: 16px;
-    color: red;
-  }
-  .avatar-container {
-    height: 50px;
-    display: inline-block;
-    position: absolute;
-    right: 35px;
-    .avatar-wrapper {
-      cursor: pointer;
-      margin-top: 5px;
-      position: relative;
-      line-height: initial;
-      .user-avatar {
-        width: 40px;
-        height: 40px;
-        border-radius: 10px;
-      }
-      .el-icon-caret-bottom {
-        position: absolute;
-        right: -20px;
-        top: 25px;
-        font-size: 12px;
-      }
-    }
-  }
-}
-</style>
-
diff --git a/src/views/layout/components/Settings/index.vue b/src/views/layout/components/Settings/index.vue
deleted file mode 100644
index cf3023d..0000000
--- a/src/views/layout/components/Settings/index.vue
+++ /dev/null
@@ -1,109 +0,0 @@
-<template>
-  <div class="drawer-container">
-    <div>
-      <h3 class="drawer-title">Page style setting</h3>
-
-      <div class="drawer-item">
-        <span>Theme Color</span>
-        <theme-picker style="float: right;height: 26px;margin: -3px 8px 0 0;" @change="themeChange" />
-      </div>
-
-      <div class="drawer-item">
-        <span>Open Tags-View</span>
-        <el-switch v-model="tagsView" class="drawer-switch" />
-      </div>
-
-      <div class="drawer-item">
-        <span>Fixed Header</span>
-        <el-switch v-model="fixedHeader" class="drawer-switch" />
-      </div>
-
-      <div class="drawer-item">
-        <span>Sidebar Logo</span>
-        <el-switch v-model="sidebarLogo" class="drawer-switch" />
-      </div>
-
-    </div>
-  </div>
-</template>
-
-<script>
-import ThemePicker from '@/components/ThemePicker'
-
-export default {
-  name: 'Settings',
-  components: { ThemePicker },
-  data() {
-    return {}
-  },
-  computed: {
-    fixedHeader: {
-      get() {
-        return this.$store.state.settings.fixedHeader
-      },
-      set(val) {
-        this.$store.dispatch('settings/changeSetting', {
-          key: 'fixedHeader',
-          value: val
-        })
-      }
-    },
-    tagsView: {
-      get() {
-        return this.$store.state.settings.tagsView
-      },
-      set(val) {
-        this.$store.dispatch('settings/changeSetting', {
-          key: 'tagsView',
-          value: val
-        })
-      }
-    },
-    sidebarLogo: {
-      get() {
-        return this.$store.state.settings.sidebarLogo
-      },
-      set(val) {
-        this.$store.dispatch('settings/changeSetting', {
-          key: 'sidebarLogo',
-          value: val
-        })
-      }
-    }
-  },
-  methods: {
-    themeChange(val) {
-      this.$store.dispatch('settings/changeSetting', {
-        key: 'theme',
-        value: val
-      })
-    }
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-.drawer-container {
-  padding: 24px;
-  font-size: 14px;
-  line-height: 1.5;
-  word-wrap: break-word;
-
-  .drawer-title {
-    margin-bottom: 12px;
-    color: rgba(0, 0, 0, .85);
-    font-size: 14px;
-    line-height: 22px;
-  }
-
-  .drawer-item {
-    color: rgba(0, 0, 0, .65);
-    font-size: 14px;
-    padding: 12px 0;
-  }
-
-  .drawer-switch {
-    float: right
-  }
-}
-</style>
diff --git a/src/views/layout/components/Sidebar/Item.vue b/src/views/layout/components/Sidebar/Item.vue
deleted file mode 100644
index 4ed6b5f..0000000
--- a/src/views/layout/components/Sidebar/Item.vue
+++ /dev/null
@@ -1,31 +0,0 @@
-<script>
-export default {
-  name: 'MenuItem',
-  functional: true,
-  props: {
-    icon: {
-      type: String,
-      default: ''
-    },
-    title: {
-      type: String,
-      default: ''
-    }
-  },
-  render(h, context) {
-    const { icon, title } = context.props
-    const vnodes = []
-
-    if (icon) {
-      vnodes.push(<svg-icon icon-class={icon}/>)
-    } else {
-      vnodes.push(<span style='display:inline-block;width:30px;'></span>)
-    }
-
-    if (title) {
-      vnodes.push(<span slot='title'>{(title)}</span>)
-    }
-    return vnodes
-  }
-}
-</script>
diff --git a/src/views/layout/components/Sidebar/Link.vue b/src/views/layout/components/Sidebar/Link.vue
deleted file mode 100644
index bff45cd..0000000
--- a/src/views/layout/components/Sidebar/Link.vue
+++ /dev/null
@@ -1,36 +0,0 @@
-
-<template>
-  <!-- eslint-disable vue/require-component-is -->
-  <component v-bind="linkProps(to)">
-    <slot/>
-  </component>
-</template>
-
-<script>
-import { isExternal } from '@/utils/validate'
-
-export default {
-  props: {
-    to: {
-      type: String,
-      required: true
-    }
-  },
-  methods: {
-    linkProps(url) {
-      if (isExternal(url)) {
-        return {
-          is: 'a',
-          href: url,
-          target: '_blank',
-          rel: 'noopener'
-        }
-      }
-      return {
-        is: 'router-link',
-        to: url
-      }
-    }
-  }
-}
-</script>
diff --git a/src/views/layout/components/Sidebar/SidebarItem.vue b/src/views/layout/components/Sidebar/SidebarItem.vue
deleted file mode 100644
index 988d662..0000000
--- a/src/views/layout/components/Sidebar/SidebarItem.vue
+++ /dev/null
@@ -1,107 +0,0 @@
-<template>
-  <div v-if="!item.hidden&&item.children" class="menu-wrapper">
-
-    <template v-if="hasOneShowingChild(item.children,item) && (!onlyOneChild.children||onlyOneChild.noShowingChildren)&&!item.alwaysShow">
-      <a :href="onlyOneChild.path" target="_blank" @click="clickLink(onlyOneChild.path,$event)">
-        <el-menu-item :index="resolvePath(onlyOneChild.path)" :class="{'submenu-title-noDropdown':!isNest}">
-          <item v-if="onlyOneChild.meta" :icon="onlyOneChild.meta.icon||item.meta.icon" :title="onlyOneChild.meta.title" />
-        </el-menu-item>
-      </a>
-    </template>
-
-    <el-submenu v-else :index="item.name||item.path">
-      <template slot="title">
-        <item v-if="item.meta" :icon="item.meta.icon" :title="item.meta.title" />
-      </template>
-
-      <template v-for="child in item.children" v-if="!child.hidden">
-        <sidebar-item
-          v-if="child.children&&child.children.length>0"
-          :is-nest="true"
-          :item="child"
-          :key="child.path"
-          :base-path="resolvePath(child.path)"
-          class="nest-menu" />
-
-        <a v-else :href="child.path" :key="child.name" target="_blank" @click="clickLink(child.path,$event)">
-          <el-menu-item :index="resolvePath(child.path)">
-            <span class="light-line"/>
-            <item v-if="child.meta" :icon="child.meta.icon" :title="child.meta.title" />
-          </el-menu-item>
-        </a>
-      </template>
-    </el-submenu>
-
-  </div>
-</template>
-
-<script>
-import path from 'path'
-import { validateURL } from '@/utils/validate'
-import Item from './Item'
-
-export default {
-  name: 'SidebarItem',
-  components: { Item },
-  props: {
-    // route object
-    item: {
-      type: Object,
-      required: true
-    },
-    isNest: {
-      type: Boolean,
-      default: false
-    },
-    basePath: {
-      type: String,
-      default: ''
-    }
-  },
-  data() {
-    return {
-      onlyOneChild: null
-    }
-  },
-  methods: {
-    hasOneShowingChild(children, parent) {
-      const showingChildren = children.filter(item => {
-        if (item.hidden) {
-          return false
-        } else {
-          // Temp set(will be used if only has one showing child)
-          this.onlyOneChild = item
-          return true
-        }
-      })
-
-      // When there is only one child router, the child router is displayed by default
-      if (showingChildren.length === 1) {
-        return true
-      }
-
-      // Show parent if there are no child router to display
-      if (showingChildren.length === 0) {
-        this.onlyOneChild = { ... parent, path: '', noShowingChildren: true }
-        return true
-      }
-
-      return false
-    },
-    resolvePath(routePath) {
-      return path.resolve(this.basePath, routePath)
-    },
-    isExternalLink(routePath) {
-      return validateURL(routePath)
-    },
-    clickLink(routePath, e) {
-      if (!this.isExternalLink(routePath)) {
-        e.preventDefault()
-        const path = this.resolvePath(routePath)
-        this.$router.push({ path, query: { t: +new Date() }})
-        // this.$router.push(path)
-      }
-    }
-  }
-}
-</script>
diff --git a/src/views/layout/components/Sidebar/index.vue b/src/views/layout/components/Sidebar/index.vue
deleted file mode 100644
index 33d596a..0000000
--- a/src/views/layout/components/Sidebar/index.vue
+++ /dev/null
@@ -1,39 +0,0 @@
-<template>
-  <el-scrollbar wrap-class="scrollbar-wrapper">
-    <el-menu
-      :show-timeout="200"
-      :default-active="activeMenu"
-      :collapse="isCollapse"
-      mode="vertical"
-    >
-      <sidebar-item v-for="route in permission_routers" :key="route.name" :item="route" :base-path="route.path"/>
-    </el-menu>
-  </el-scrollbar>
-</template>
-
-<script>
-import { mapGetters } from 'vuex'
-import SidebarItem from './SidebarItem'
-
-export default {
-  components: { SidebarItem },
-  computed: {
-    ...mapGetters([
-      'permission_routers',
-      'sidebar'
-    ]),
-    activeMenu() {
-      const route = this.$route
-      const { meta, path } = route
-      // 如果meta中上设置activeMenu，按照meta中设置高亮
-      if (meta.activeMenu) {
-        return meta.activeMenu
-      }
-      return path
-    },
-    isCollapse() {
-      return !this.sidebar.opened
-    }
-  }
-}
-</script>

diff --git a/src/api/dashboard.js b/src/api/dashboard.js
index e69de29..0a4ddfc 100644
--- a/src/api/dashboard.js
+++ b/src/api/dashboard.js
@@ -0,0 +1,73 @@
+/**
+ * 井总览模块接口
+ */
+import request from '@/utils/request'
+
+// 用水量、噪声统计数据
+export function getWatchStatistic() {
+  return request({
+    url: 'waterStatistic/overview',
+    method: 'get'
+  })
+}
+// 水表数量
+export function waterMeterCount() {
+  return request({
+    url: 'waterMeterData/count',
+    method: 'get'
+  })
+}
+// 阀门数量
+export function valveCount() {
+  return request({
+    url: 'waterMeterData/count',
+    method: 'get'
+  })
+}
+
+// 查询一级分区各区用水量
+export function countByFirstArea(params) {
+  return request({
+    url: 'waterStatistic/countByFirstArea',
+    method: 'get',
+    params
+  })
+}
+
+// 查询一级分区7日用水量
+export function countByDayFirst(params) {
+  return request({
+    url: 'waterStatistic/countByDayFirst',
+    method: 'get',
+    params
+  })
+}
+
+// 查询二级分区各区用水量
+export function countBySecondArea(params) {
+  return request({
+    url: 'waterStatistic/countBySecondArea',
+    method: 'get',
+    params
+  })
+}
+
+// 查询二级分区水表告警
+export function alarmBySecondArea(params) {
+  return request({
+    url: 'waterStatistic/alarmBySecondArea',
+    method: 'get',
+    params
+  })
+}
+
+// 设备7日报警趋势
+export function alarmCountByDay(params) {
+  return request({
+    url: 'waterStatistic/alarmCountByDay',
+    method: 'get',
+    params
+  })
+}
+
+
diff --git a/src/components/BigData/Card/index.vue b/src/components/BigData/Card/index.vue
index d71e609..45359c9 100644
--- a/src/components/BigData/Card/index.vue
+++ b/src/components/BigData/Card/index.vue
@@ -10,6 +10,7 @@
         </div>
         <div class="card-panel-num" >
           {{ context }}
+          <span style="font-size: 10px;color:#888">{{unit}}</span>
         </div>
       </div>
     </div>
@@ -39,6 +40,10 @@
     color: {
       type: String,
       default: '#40c9c6'
+    },
+    unit:{
+      type: String,
+      default:''
     }
   },
   computed: {
diff --git a/src/components/BigData/Card1/index.vue b/src/components/BigData/Card1/index.vue
index 030b2dc..aa46454 100644
--- a/src/components/BigData/Card1/index.vue
+++ b/src/components/BigData/Card1/index.vue
@@ -1,10 +1,11 @@
 <template>
   <el-card :body-style="{ padding: '0px' }" shadow="always">
-    <div class="card-panel" >
-      <div :style="backgroundColor" class="card-panel-icon-wrapper">
-        <svg-icon :icon-class="icon" class-name="card-panel-icon" />
+    <div class="card-panel">
+      <div v-if="icon" :style="backgroundColor" class="card-panel-icon-wrapper">
+        <svg-icon :icon-class="icon" class-name="card-panel-icon"/>
       </div>
-      <div  class="card-panel-description">
+      <div v-else style="float:left; width: 20px;height: 100%;"></div>
+      <div class="card-panel-description">
         <!-- <div class="card-panel-text">
           {{ title[0] }} <span class="card-panel-num">{{ context[0] }}</span>
         </div>
@@ -13,18 +14,20 @@
         </div> -->
         <div class="two" v-if="title.length===2">
           <div class="card-panel-text">
-            {{ title[0] }} <span class="card-panel-num">{{ context[0] }}</span>
+            {{ title[0] }} <span class="card-panel-num">{{ context[0] }}<span
+            style="font-size: 10px;color:#888;margin-left: 5px">{{unit}}</span></span>
           </div>
-          <div class="card-panel-text" >
-            {{ title[1] }} <span class="card-panel-num">{{ context[1] }}</span>
+          <div class="card-panel-text">
+            {{ title[1] }} <span class="card-panel-num">{{ context[1] }}<span
+            style="font-size: 10px;color:#888;margin-left: 5px">{{unit}}</span></span>
           </div>
         </div>
         <div class="only" v-else>
           <div class="card-panel-text">
             {{ title[0] }}
           </div>
-          <div class="card-panel-num" >
-            {{ context[0] }}
+          <div class="card-panel-num">
+            {{ context[0] }}<span style="font-size: 10px;color:#888">{{unit}}</span>
           </div>
         </div>
       </div>
@@ -33,42 +36,46 @@
 </template>
 
 <script>
-export default {
-  name: 'Card1',
-  props: {
-    title: {
-      type: Array,
-      default: function() {
-        return ['标题', '标题']
+  export default {
+    name: 'Card1',
+    props: {
+      title: {
+        type: Array,
+        default: function () {
+          return ['标题', '标题']
+        }
+      },
+      subtitle: {
+        type: String,
+        default: ''
+      },
+      icon: {
+        type: String,
+        default: ''
+      },
+      context: {
+        type: Array,
+        default: function () {
+          return ['--', '--']
+        }
+      },
+      color: {
+        type: String,
+        default: '#40c9c6'
+      },
+      unit: {
+        type: String,
+        default: ''
       }
     },
-    subtitle: {
-      type: String,
-      default: ''
-    },
-    icon: {
-      type: String,
-      default: ''
-    },
-    context: {
-      type: Array,
-      default: function() {
-        return ['--', '--']
-      }
-    },
-    color: {
-      type: String,
-      default: '#40c9c6'
-    }
-  },
-  computed: {
-    backgroundColor() {
-      return {
-        color: this.color
+    computed: {
+      backgroundColor() {
+        return {
+          color: this.color
+        }
       }
     }
   }
-}
 </script>
 
 <style lang="scss" scoped>
@@ -108,7 +115,7 @@
       overflow: auto;
       margin-left: 5px;
 
-      .two{
+      .two {
         .card-panel-text {
           line-height: 18px;
           color: rgba(0, 0, 0, 0.45);
@@ -123,7 +130,7 @@
           float: right;
         }
       }
-      .only{
+      .only {
         .card-panel-text {
           line-height: 18px;
           color: rgba(0, 0, 0, 0.45);
diff --git a/src/icons/svg/icon-noise.svg b/src/icons/svg/icon-noise.svg
new file mode 100644
index 0000000..00bef71
--- /dev/null
+++ b/src/icons/svg/icon-noise.svg
@@ -0,0 +1,2 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1648634383080" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2093" xmlns:xlink="http://www.w3.org/1999/xlink" width="128" height="128"><defs><style type="text/css">@font-face { font-family: feedback-iconfont; src: url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.woff2?t=1630033759944") format("woff2"), url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.woff?t=1630033759944") format("woff"), url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.ttf?t=1630033759944") format("truetype"); }
+</style></defs><path d="M875.039 549.868c-25.436 0-47.411 13.91-59.3 34.4h-125.9l-99.564-199.177-76.703 281.23-51.528-566.757-67.461-5.735-130.8 490.44H49.397v68.802h267.259l94.464-354.268 51.235 563.733 67.451 5.913 79.432-291.445 38.077 76.057h168.428c11.91 20.419 33.864 34.391 59.3 34.391 37.98 0 68.792-30.879 68.792-68.797-0.005-38.062-30.817-68.787-68.797-68.787z" p-id="2094"></path></svg>
\ No newline at end of file
diff --git a/src/icons/svg/icon-valve.svg b/src/icons/svg/icon-valve.svg
new file mode 100644
index 0000000..f5d96e2
--- /dev/null
+++ b/src/icons/svg/icon-valve.svg
@@ -0,0 +1,2 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1648634707805" class="icon" viewBox="0 0 1090 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3809" xmlns:xlink="http://www.w3.org/1999/xlink" width="136.25" height="128"><defs><style type="text/css">@font-face { font-family: feedback-iconfont; src: url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.woff2?t=1630033759944") format("woff2"), url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.woff?t=1630033759944") format("woff"), url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.ttf?t=1630033759944") format("truetype"); }
+</style></defs><path d="M502.944 296.975V143.052h-231.98c-31.587 0-57.321-24.93-57.321-55.526 0-30.598 25.75-55.526 57.321-55.526H833.06c31.571 0 57.306 24.93 57.306 55.525 0 30.922-25.735 55.526-57.29 55.526h-231.64v153.924h18.179c21.615 0 39.112 16.955 39.112 37.904v90.565l-213.105-0.34v-90.225c0-20.95 17.497-37.904 39.128-37.904h18.194z m-381.74 590.293v63.84c0 9.306-7.834 16.955-17.698 16.955H58.231c-9.862-0.001-17.698-7.65-17.698-17.296V542.472c0-9.63 7.835-17.28 17.698-17.28h45.274c9.863 0 17.698 7.65 17.698 17.28v83.133h150.55c6.272-85.518 79.247-152.95 168.387-152.95h207.98c89.14 0 162.116 67.432 168.403 152.95h150.873v-83.798c0-9.29 7.495-16.615 17.033-16.615h46.297c9.523 0 17.001 7.308 17.001 16.615v409.625c0.341 9.321-7.478 16.63-17.016 16.63h-46.297c-9.523 0-17.018-7.309-17.018-16.63v-64.165H805.36C780.755 948.583 719.655 992 648.119 992H440.142c-71.52 0-132.635-43.402-157.239-104.733H121.204z" p-id="3810"></path></svg>
\ No newline at end of file
diff --git a/src/views/dashboard/components/PanelGroup.vue b/src/views/dashboard/components/PanelGroup.vue
index b72d289..332cbf9 100644
--- a/src/views/dashboard/components/PanelGroup.vue
+++ b/src/views/dashboard/components/PanelGroup.vue
@@ -1,12 +1,12 @@
 <template>
   <el-row class="panel-group">
     <div v-for="card in dataGroup1" :key="card.index" class="card-panel-col">
-      <card1 :title="card.title" :context="card.context" :icon="card.icon" :color="card.color"/>
+      <card1 :title="card.title" :context="card.context" :icon="card.icon" :color="card.color" :unit="card.unit"/>
     </div>
 
     <div v-for="card in dataGroup" :key="card.title" class="card-panel-col">
       <div v-if="hasPerm(card.permission)">
-        <card :title="card.title" :context="card.context" :icon="card.icon" :color="card.color" @click.native="goPage(card.path)"/>
+        <card :title="card.title" :context="card.context" :icon="card.icon" :unit="card.unit" :color="card.color" @click.native="goPage(card.path)"/>
       </div>
     </div>
   </el-row>
@@ -16,7 +16,7 @@
 import Card1 from '@/components/BigData/Card1'
 import Card from '@/components/BigData/Card'
 // 首页
-import { getWatchStatistic , waterMeterCount } from '@/api/overview'
+import { getWatchStatistic , waterMeterCount, valveCount } from '@/api/dashboard'
 // 根据布防数量统计井数量
 import { wellCountByBfzt } from '@/api/well'
 // 当前报警数
@@ -36,30 +36,33 @@
           context: ['--', '--'],
           icon: 'icon-water',
           color: '#40c9c6',
+          unit: '吨',
           index: 0
         },
         {
-          title: ['今日用水量', '昨日用水量'],
+          title: ['今日用水量', '生产厂区用水量'],
           context: ['--', '--'],
-          icon: 'icon-water',
+          icon: '',
           color: '#36a3f7',
+          unit: '吨',
           index: 1
         },
         {
-          title: ['实时噪声'],
+          title: ['滑道实时噪声'],
           context: ['--'],
-          icon: 'icon-device',
+          icon: 'icon-noise',
           color: '#f1c353',
+          unit: 'db',
           index: 2
         }
       ],
       dataGroup: [
         {
-          title: '设备总数',
+          title: '阀门数量',
           context: '--',
-          icon: 'icon-device',
+          icon: 'icon-valve',
           color: '#40c9c6',
-          path: '/deviceList',
+          path: '/deviceList?deviceType=20',
           permission: '/device/list'
         },
         {
@@ -67,11 +70,11 @@
           context: '--',
           icon: 'icon-watch',
           color: '#9694f7',
-          path: '/deviceList',
+          path: '/deviceList?deviceType=13',
           permission: '/device/list'
         },
         {
-          title: '当前报警数',
+          title: '报警信息',
           context: '--',
           icon: 'icon-alarm',
           color: '#f4516c',
@@ -83,10 +86,10 @@
   },
   mounted() {
     this.getWater()
-    this.getWellCount()
+    // this.getWellCount()
     this.getDeviceCount()
     this.getAlarmCount()
-    this.getJobCount()
+    // this.getJobCount()
   },
   methods: {
     refresh() {
@@ -97,24 +100,31 @@
       this.$router.push(path)
     },
     getWater() {
+      // 用水量
       getWatchStatistic().then(response => {
-        this.dataGroup1[0].context = [response.data.total, response.data.month]
-        this.dataGroup1[1].context = [response.data.today, response.data.yesterday]
-        this.dataGroup1[2].context = [Number(response.data.sound).toFixed(2)]
+        this.dataGroup1[0].context = [response.data.total?parseFloat(response.data.total).toFixed(0):'--', response.data.month?parseFloat(response.data.month).toFixed(0):'--']
+        this.dataGroup1[1].context = [response.data.today?parseFloat(response.data.today).toFixed(0):'--', response.data.yesterday?parseFloat(response.data.yesterday).toFixed(0):'--']
+        this.dataGroup1[2].context = [response.data.sound?Number(response.data.sound).toFixed(2):'--']
       })
-      waterMeterCount().then(response => {
-        this.dataGroup[1].context = response.data
-      })
+
     },
-    getWellCount() {
-      wellCountByBfzt().then(response => {
-        this.dataGroup[0].context = response.data.total
-      })
-    },
+    // getWellCount() {
+    //   wellCountByBfzt().then(response => {
+    //     this.dataGroup[0].context = response.data.total
+    //   })
+    // },
     getDeviceCount() {
       // deviceStaticByStatus().then(response => {
       //   this.dataGroup[1].context = response.data.total
       // })
+      // 阀门数量
+      valveCount().then(response => {
+        this.dataGroup[0].context = response.data
+      })
+      // 水表数量
+      waterMeterCount().then(response => {
+        this.dataGroup[1].context = response.data
+      })
     },
     getAlarmCount() {
       alarmNowStatic().then(response => {
@@ -159,7 +169,7 @@
   //   &:hover {
   //     .card-panel-icon-wrapper {
   //       color: #fff;
-        
+
   //     }
 
   //     .icon-people {
diff --git a/src/views/dashboard/components/waterCountByAreaBar.vue b/src/views/dashboard/components/waterCountByAreaBar.vue
index 1bdac48..c488923 100644
--- a/src/views/dashboard/components/waterCountByAreaBar.vue
+++ b/src/views/dashboard/components/waterCountByAreaBar.vue
@@ -1,9 +1,10 @@
 <template>
   <div class="container">
     <div class="statistic-container">
+      <el-button round size="mini" @click="setDefaultTime('year')">本年</el-button>
+      <el-button round size="mini" @click="setDefaultTime('season')">本季</el-button>
       <el-button round size="mini" @click="setDefaultTime('month')">本月</el-button>
-      <el-button round size="mini" @click="setDefaultTime('week')">近7日</el-button>
-      <el-button round size="mini" @click="setDefaultTime('yesterday')">昨日</el-button>
+      <el-button round size="mini" @click="setDefaultTime('week')">本周</el-button>
       <el-button round size="mini" @click="setDefaultTime('today')">今日</el-button>
       <el-date-picker
         v-model="timeRange"
@@ -107,7 +108,7 @@
   },
   mounted() {
     this.setDefaultTime('today')
-    this.fetchArea()
+    // this.fetchArea()
   },
   methods: {
     fetchArea() {
@@ -130,10 +131,11 @@
     },
     fetchData() {
       const params = {
-        areaId: this.areaId,
+        areaId: '110000',
         startTime: this.timeRange[0],
         endTime: this.timeRange[1]
       }
+      this.$emit('change', params)
       countBySecondArea(params).then(response => {
         this.isShow = false
         this.chartData.rows = response.data
@@ -153,7 +155,21 @@
       })
     },
     setDefaultTime(val) {
-      if (val === 'month') {
+      if (val === 'year') {
+        var today = new Date()
+        var tYear = today.getFullYear()
+        const beginTime = tYear + '-01-01'
+        const endTime = getDayTime(new Date().getTime())
+        this.timeRange = [beginTime, endTime.Format('yyyy-MM-dd')]
+      }if (val === 'season') {
+        var today = new Date()
+        var tYear = today.getFullYear()
+        var tMonth = today.getMonth() + 1
+        const oldMonth = tMonth<4?'01':(tMonth<7?'04':(tMonth<10?'07':'10'))
+        const beginTime = tYear + '-' + oldMonth + '-01'
+        const endTime = getDayTime(new Date().getTime())
+        this.timeRange = [beginTime, endTime.Format('yyyy-MM-dd')]
+      }else if (val === 'month') {
         var today = new Date()
         var tYear = today.getFullYear()
         var tMonth = today.getMonth() + 1
@@ -164,7 +180,8 @@
         const endTime = getDayTime(new Date().getTime())
         this.timeRange = [beginTime, endTime.Format('yyyy-MM-dd')]
       } else if (val === 'week') {
-        this.timeRange = [getDayTime(new Date().getTime() - 24 * 6 * 60 * 60 * 1000).Format('yyyy-MM-dd'), getDayTime(new Date().getTime()).Format('yyyy-MM-dd')]
+        const nowDayOfWeek =  new Date().getDay()-1
+        this.timeRange = [getDayTime(new Date().getTime() - 24 * nowDayOfWeek * 60 * 60 * 1000).Format('yyyy-MM-dd'), getDayTime(new Date().getTime()).Format('yyyy-MM-dd')]
       } else if (val === 'yesterday') {
         this.timeRange = [getDayTime(new Date().getTime() - 24 * 60 * 60 * 1000).Format('yyyy-MM-dd'), getDayTime(new Date().getTime() - 24 * 60 * 60 * 1000).Format('yyyy-MM-dd')]
       } else if (val === 'today') {
diff --git a/src/views/dashboard/components/waterCountByDay.vue b/src/views/dashboard/components/waterCountByDay.vue
index 8e12f02..78d1f7c 100644
--- a/src/views/dashboard/components/waterCountByDay.vue
+++ b/src/views/dashboard/components/waterCountByDay.vue
@@ -1,12 +1,12 @@
 <template>
   <div class="container">
-    <div class="function">
-      <el-button round size="mini" @click="changeTime('year')">近1年</el-button>
-      <el-button round size="mini" @click="changeTime('halfyear')">近6月</el-button>
-      <el-button round size="mini" @click="changeTime('3month')">近3月</el-button>
-      <el-button round size="mini" @click="changeTime('month')">近1月</el-button>
-      <el-button round size="mini" @click="changeTime('week')">近1周</el-button>
-    </div>
+    <!--<div class="function">-->
+      <!--<el-button round size="mini" @click="changeTime('year')">近1年</el-button>-->
+      <!--<el-button round size="mini" @click="changeTime('halfyear')">近6月</el-button>-->
+      <!--<el-button round size="mini" @click="changeTime('3month')">近3月</el-button>-->
+      <!--<el-button round size="mini" @click="changeTime('month')">近1月</el-button>-->
+      <!--<el-button round size="mini" @click="changeTime('week')">近1周</el-button>-->
+    <!--</div>-->
     <ve-line :data="chartData" :title="title" :extend="extend" :settings="chartSettings"/>
   </div>
 </template>
@@ -17,6 +17,18 @@
 import { getDoorAreaTree } from '@/api/system/area'
 export default {
   name: 'WaterCountByDay',
+  props:{
+    query: {
+      type: Object,
+      default:()=>{
+        return {
+          areaId: '',
+          startTime: '',
+          endTime: ''
+        }
+      }
+    }
+  },
   data() {
     return {
       listQuery: {
@@ -52,8 +64,13 @@
     }
   },
   mounted() {
-    this.changeTime('month')
-    this.fetchArea()
+    // this.changeTime('month')
+    // this.fetchArea()
+  },
+  watch:{
+    query(val){
+      this.fetchData()
+    }
   },
   methods: {
     fetchArea() {
@@ -73,7 +90,7 @@
       })
     },
     fetchData() {
-      countByDayFirst(this.listQuery).then(response => {
+      countByDayFirst(this.query).then(response => {
         const arr = response.data.map(function(item) {
           for (let i = 0; i < item.data.length; i++) {
             item[item.data[i].areaName] = item.data[i].count
diff --git a/src/views/dashboard/components/waterCountByDept.vue b/src/views/dashboard/components/waterCountByDept.vue
index a0c82cf..02e27cd 100644
--- a/src/views/dashboard/components/waterCountByDept.vue
+++ b/src/views/dashboard/components/waterCountByDept.vue
@@ -1,22 +1,22 @@
 <!--suppress ALL -->
 <template>
   <div class="container">
-    <div class="function">
-      <el-button round size="mini" @click="changeTime('year')">近1年</el-button>
-      <el-button round size="mini" @click="changeTime('halfyear')">近6月</el-button>
-      <el-button round size="mini" @click="changeTime('3month')">近3月</el-button>
-      <el-button round size="mini" @click="changeTime('month')">近1月</el-button>
-      <el-button round size="mini" @click="changeTime('week')">近1周</el-button>
-    </div>
+    <!--<div class="function">-->
+      <!--<el-button round size="mini" @click="changeTime('year')">近1年</el-button>-->
+      <!--<el-button round size="mini" @click="changeTime('halfyear')">近6月</el-button>-->
+      <!--<el-button round size="mini" @click="changeTime('3month')">近3月</el-button>-->
+      <!--<el-button round size="mini" @click="changeTime('month')">近1月</el-button>-->
+      <!--<el-button round size="mini" @click="changeTime('week')">近1周</el-button>-->
+    <!--</div>-->
     <ve-pie :data="chartData" :extend="extend" :title="title"/>
-    <div class="function">
-      <el-button
-        v-for="item in areaList"
-        :key="item.id"
-        round
-        @click="areaChange(item.id)"
-        size="mini">{{item.name}}</el-button>
-    </div>
+    <!--<div class="function">-->
+      <!--<el-button-->
+        <!--v-for="item in areaList"-->
+        <!--:key="item.id"-->
+        <!--round-->
+        <!--@click="areaChange(item.id)"-->
+        <!--size="mini">{{item.name}}</el-button>-->
+    <!--</div>-->
   </div>
 </template>
 
@@ -25,6 +25,18 @@
 import { getDoorAreaTree } from '@/api/system/area'
 export default {
   name: 'WaterCountByDepy',
+  props:{
+    query: {
+      type: Object,
+      default:()=>{
+        return {
+          areaId: '',
+          startTime: '',
+          endTime: ''
+        }
+      }
+    }
+  },
   data() {
     return {
       listQuery: {
@@ -69,7 +81,12 @@
   },
   mounted() {
     // TODO:待调试真接口
-    this.fetchArea()
+    // this.fetchArea()
+  },
+  watch:{
+    query(val){
+      this.fetchData()
+    }
   },
   methods: {
     fetchArea() {
@@ -104,8 +121,7 @@
       //   { 'areaName': '码头作业区', 'count': 78 },
       //   { 'areaName': '车间生产区', 'count': 78 }
       // ]
-      this.listQuery.areaId = this.areaId
-      countBySecondArea(this.listQuery).then(response => {
+      countBySecondArea(this.query).then(response => {
         this.chartData.rows = response.data
       })
     },
diff --git a/src/views/dashboard/components/waterNote.vue b/src/views/dashboard/components/waterNote.vue
new file mode 100644
index 0000000..aa0f448
--- /dev/null
+++ b/src/views/dashboard/components/waterNote.vue
@@ -0,0 +1,152 @@
+<!--suppress ALL -->
+<template>
+  <div class="container">
+    <div>
+      用水事记
+    </div>
+
+  </div>
+</template>
+
+<script>
+import { countBySecondArea } from '@/api/overview'
+import { getDoorAreaTree } from '@/api/system/area'
+export default {
+  name: 'WaterNote',
+  props:{
+    query: {
+      type: Object,
+      default:()=>{
+        return {
+          areaId: '',
+          startTime: '',
+          endTime: ''
+        }
+      }
+    }
+  },
+  data() {
+    return {
+      listQuery: {
+        areaId: '',
+        startTime: '',
+        endTime: ''
+      },
+      areaId:'',
+      areaList: [],
+      chartData: {
+        columns: ['areaName', 'count'],
+        rows: []
+      },
+      extend: {
+        grid: {
+          right: '30%'
+        },
+        legend: {
+          type: 'scroll',
+          top: '60px',
+          right: '0px',
+          orient: 'vertical'
+        },
+        series: {
+          label: { show: true, position: 'outside', formatter: '{b}' },
+          right: 120
+        },
+        tooltip: { trigger: 'item', formatter: '{b}<br/>用水量：{c}吨<br/>占比：{d}%' }
+      },
+      title: {
+        text: '分区用水占比图'
+      },
+      chartSettings: {
+        labelMap: {
+          'areaName': '分区',
+          'count': '用水量'
+        },
+        dimension: 'areaName',
+        metrics: 'count'
+      }
+    }
+  },
+  mounted() {
+    // TODO:待调试真接口
+    // this.fetchArea()
+  },
+  watch:{
+    query(val){
+      this.fetchData()
+    }
+  },
+  methods: {
+    fetchArea() {
+      getDoorAreaTree().then(response => {
+        if (response.code === 200) {
+          this.areaList = response.data.filter(item => {
+            return item.pid === '1'
+          }).map(function(item) {
+            return {
+              id: item.id, name: item.name
+            }
+          })
+          if (this.areaList.length !== 0) { this.areaChange(this.areaList[0].id) }
+        }
+      })
+    },
+    areaChange(val){
+      this.areaId = val
+      this.fetchData()
+    },
+    // 获取统计数据
+    fetchData() {
+      // this.chartData.rows = [
+      //   { 'areaName': '科技楼及食堂', 'count': 53 },
+      //   { 'areaName': 'A\\B\\C\\D\\E座', 'count': 78 },
+      //   { 'areaName': '厂区', 'count': 78 },
+      //   { 'areaName': '分段分区', 'count': 78 },
+      //   { 'areaName': '船坞分区', 'count': 78 },
+      //   { 'areaName': '刀把码头', 'count': 78 },
+      //   { 'areaName': '制管作业区', 'count': 78 },
+      //   { 'areaName': '滑道作业区', 'count': 78 },
+      //   { 'areaName': '码头作业区', 'count': 78 },
+      //   { 'areaName': '车间生产区', 'count': 78 }
+      // ]
+      countBySecondArea(this.query).then(response => {
+        this.chartData.rows = response.data
+      })
+    },
+    changeTime(timeType) {
+      let startTime
+      switch (timeType) {
+        case 'year':
+          startTime = getDayTime(new Date().getTime() - 24 * 365 * 60 * 60 * 1000)
+          this.listQuery.startTime = startTime.Format('yyyy-MM-dd')
+          break
+        case 'halfyear':
+          startTime = getDayTime(new Date().getTime() - 24 * 182 * 60 * 60 * 1000)
+          this.listQuery.startTime = startTime.Format('yyyy-MM-dd')
+          break
+        case '3month':
+          startTime = getDayTime(new Date().getTime() - 24 * 90 * 60 * 60 * 1000)
+          this.listQuery.startTime = startTime.Format('yyyy-MM-dd')
+          break
+        case 'month':
+          startTime = getDayTime(new Date().getTime() - 24 * 30 * 60 * 60 * 1000)
+          this.listQuery.startTime = startTime.Format('yyyy-MM-dd')
+          break
+        case 'week':
+          startTime = getDayTime(new Date().getTime() - 24 * 7 * 60 * 60 * 1000)
+          this.listQuery.startTime = startTime.Format('yyyy-MM-dd')
+          break
+      }
+      const endTime = new Date()
+      this.listQuery.endTime = endTime.Format('yyyy-MM-dd')
+      this.fetchData()
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+  .container{
+    position:relative;
+    height: 455px;
+  }
+</style>
diff --git a/src/views/dashboard/index.vue b/src/views/dashboard/index.vue
index fdbc38a..831dbc3 100644
--- a/src/views/dashboard/index.vue
+++ b/src/views/dashboard/index.vue
@@ -1,31 +1,33 @@
 <template>
   <div class="dashboard-container" style="background-color: white">
     <panel-group ref="panelgroup"/>
-    <el-row :gutter="10">
+    <el-row>
       <!-- 用水统计图 -->
+      <el-col :span="18">
+        <el-card shadow="never">
+          <water-count-by-area-bar @change="changeWaterQuery"/>
+        </el-card>
+      </el-col>
+      <el-col :span="6">
+        <el-card shadow="never">
+          <water-note/>
+        </el-card>
+      </el-col>
+    </el-row>
+    <el-row>
+      <!-- 分区用水占比图 -->
       <el-col :span="12">
         <el-card shadow="never">
-          <water-count-by-dept-bar/>
+          <water-count-by-dept :query="listQuery1" ref="waterCountPie"/>
         </el-card>
       </el-col>
       <!-- 用水走势图 -->
       <el-col :span="12">
         <el-card shadow="never">
-          <water-count-by-day/>
+          <water-count-by-day :query="listQuery1" ref="waterCountDay"/>
         </el-card>
       </el-col>
-      <!-- 分区用水统计图 -->
-      <el-col :span="12">
-        <el-card shadow="never">
-          <water-count-by-area-bar/>
-        </el-card>
-      </el-col>
-      <!-- 分区用水占比图 -->
-      <el-col :span="12">
-        <el-card shadow="never">
-          <water-count-by-depy/>
-        </el-card>
-      </el-col>
+
       <!--水表报警次数统计-->
       <el-col v-if="hasPerm('/statics/alarmsByDay')" :span="12">
         <el-card shadow="never">
@@ -64,20 +66,22 @@
 import DeviceCountByOnline from './components/DeviceCountByOnline'
 import AlarmByDays from './components/AlarmByDays'
 import JobByStatus from './components/JobByStatus'
-import WaterCountByDepy from './components/waterCountByDept'
+import WaterCountByDept from './components/waterCountByDept'
 import WaterCountByDeptBar from './components/waterCountByDeptBar'
 import WaterCountByDay from './components/waterCountByDay'
 import WaterCountByAreaBar from "./components/waterCountByAreaBar";
 import WatchAlarmBar from "./components/watchAlarmBar";
+import WaterNote from "./components/waterNote";
 
 export default {
   name: 'Dashboard',
   components: {
+    WaterNote,
     WatchAlarmBar,
     WaterCountByAreaBar,
     WaterCountByDay,
     WaterCountByDeptBar,
-    WaterCountByDepy,
+    WaterCountByDept,
     JobByStatus,
     AlarmByDays,
     PanelGroup,
@@ -108,12 +112,25 @@
       state.needRefresh = needRefresh
     }
   },
+  data(){
+    return {
+      listQuery1:{
+        areaId:'110000',
+        startTime:new Date().Format('yyyy-MM-dd'),
+        endTime:new Date().Format('yyyy-MM-dd')
+      },// 分区用水量查询条件
+      listQuery2:{
+        areaId:'',
+        startTime:'',
+        endTime:''
+      } // 分区报警查询条件
+    }
+  },
   watch: {
     needRefresh(val) {
       // 需要刷新
       if (val) {
         console.log('refresh dashboard')
-        debugger
         this.$refs.panelgroup.refresh()
       }
     }
@@ -124,6 +141,10 @@
   methods: {
     webSocket() {
       this.$store.dispatch('initWebSocket')
+    },
+    // 切换分区查询条件
+    changeWaterQuery(listQuery1){
+      this.listQuery1 = listQuery1
     }
   }
 }
diff --git a/src/views/dashboard/index_bak.vue b/src/views/dashboard/index_bak.vue
new file mode 100644
index 0000000..fdbc38a
--- /dev/null
+++ b/src/views/dashboard/index_bak.vue
@@ -0,0 +1,149 @@
+<template>
+  <div class="dashboard-container" style="background-color: white">
+    <panel-group ref="panelgroup"/>
+    <el-row :gutter="10">
+      <!-- 用水统计图 -->
+      <el-col :span="12">
+        <el-card shadow="never">
+          <water-count-by-dept-bar/>
+        </el-card>
+      </el-col>
+      <!-- 用水走势图 -->
+      <el-col :span="12">
+        <el-card shadow="never">
+          <water-count-by-day/>
+        </el-card>
+      </el-col>
+      <!-- 分区用水统计图 -->
+      <el-col :span="12">
+        <el-card shadow="never">
+          <water-count-by-area-bar/>
+        </el-card>
+      </el-col>
+      <!-- 分区用水占比图 -->
+      <el-col :span="12">
+        <el-card shadow="never">
+          <water-count-by-depy/>
+        </el-card>
+      </el-col>
+      <!--水表报警次数统计-->
+      <el-col v-if="hasPerm('/statics/alarmsByDay')" :span="12">
+        <el-card shadow="never">
+          <watch-alarm-bar/>
+        </el-card>
+      </el-col>
+      <!--报警次数统计-->
+      <el-col v-if="hasPerm('/statics/alarmsByDay')" :span="12">
+        <el-card shadow="never">
+          <alarm-by-days/>
+        </el-card>
+      </el-col>
+      <!--设备在线数量统计-->
+      <el-col v-if="hasPerm('/statics/deviceStaticsByType')" :span="12">
+        <el-card shadow="never">
+          <device-count-by-online/>
+        </el-card>
+      </el-col>
+
+      <!--设备数量统计-->
+      <el-col v-if="hasPerm('/statics/deviceStaticsByType')" :span="12">
+        <el-card shadow="never">
+          <device-count/>
+        </el-card>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+import PanelGroup from './components/PanelGroup'
+import WellCountByBfzt from './components/WellCountByBfzt'
+import WellCountByType from './components/WellCountByType'
+import DeviceCount from './components/DeviceCount'
+import DeviceCountByOnline from './components/DeviceCountByOnline'
+import AlarmByDays from './components/AlarmByDays'
+import JobByStatus from './components/JobByStatus'
+import WaterCountByDepy from './components/waterCountByDept'
+import WaterCountByDeptBar from './components/waterCountByDeptBar'
+import WaterCountByDay from './components/waterCountByDay'
+import WaterCountByAreaBar from "./components/waterCountByAreaBar";
+import WatchAlarmBar from "./components/watchAlarmBar";
+
+export default {
+  name: 'Dashboard',
+  components: {
+    WatchAlarmBar,
+    WaterCountByAreaBar,
+    WaterCountByDay,
+    WaterCountByDeptBar,
+    WaterCountByDepy,
+    JobByStatus,
+    AlarmByDays,
+    PanelGroup,
+    WellCountByBfzt,
+    WellCountByType,
+    DeviceCount,
+    DeviceCountByOnline
+  },
+  computed: {
+    ...mapGetters([
+      'name',
+      'roleNames',
+      'roleTips',
+      'wellTypes',
+      'deviceTypes',
+      'communications',
+      'area'
+    ])
+  },
+  mutations: {
+    SET_WEBSOCKET: (state, websocket) => {
+      state.websocket = websocket
+    },
+    SET_WS_STATUS: (state, wsStatus) => {
+      state.wsStatus = wsStatus
+    },
+    SET_NEED_REFRESH: (state, needRefresh) => {
+      state.needRefresh = needRefresh
+    }
+  },
+  watch: {
+    needRefresh(val) {
+      // 需要刷新
+      if (val) {
+        console.log('refresh dashboard')
+        debugger
+        this.$refs.panelgroup.refresh()
+      }
+    }
+  },
+  mounted() {
+    // this.webSocket()
+  },
+  methods: {
+    webSocket() {
+      this.$store.dispatch('initWebSocket')
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.dashboard-container{
+  .el-row{
+    .el-col{
+      margin-bottom: 10px;
+    }
+  }
+}
+.dashboard {
+  &-container {
+    padding: 10px 20px;
+  }
+  &-text {
+    font-size: 30px;
+    line-height: 46px;
+  }
+}
+</style>
diff --git a/src/views/layout/Layout.vue b/src/views/layout/Layout.vue
deleted file mode 100644
index 7c3d46d..0000000
--- a/src/views/layout/Layout.vue
+++ /dev/null
@@ -1,111 +0,0 @@
-<template>
-  <el-container :class="classObj" class="app-wrapper">
-    <div v-if="device==='mobile'&&sidebar.opened" class="drawer-bg" @click="handleClickOutside"/>
-    <app-header class="app-header"/>
-    <el-main class="app-body">
-      <!--侧边栏-->
-      <sidebar class="sidebar-container"/>
-      <!--右半部分-->
-      <div :class="{hasTagsView:needTagsView}" class="main-container">
-        <!--开启固定头部设置-->
-        <div v-if="fixedHeader">
-          <!--导航(面包屑)-->
-          <navbar/>
-          <!--标签栏-->
-          <tags-view v-if="needTagsView" />
-          <!--主内容包裹在el-scrollbar中-->
-          <el-scrollbar class="no-head-scrollbar">
-            <app-main/>
-          </el-scrollbar>
-        </div>
-        <!--为开始固定头部设置-->
-        <div v-else>
-          <!--导航，tagsView都包裹在el-scrollbar中-->
-          <el-scrollbar class="has-head-scrollbar">
-            <navbar/>
-            <tags-view v-if="needTagsView" />
-            <app-main/>
-          </el-scrollbar>
-        </div>
-        <!--悬浮框-->
-        <right-panel v-if="false">
-          <settings />
-        </right-panel>
-      </div>
-    </el-main>
-  </el-container>
-</template>
-
-<script>
-import RightPanel from '@/components/RightPanel'
-import { AppHeader, Navbar, Sidebar, AppMain } from './components'
-import ResizeMixin from './mixin/ResizeHandler'
-import TagsView from './components/TagsView/index'
-import { mapState } from 'vuex'
-import Settings from './components/Settings/index'
-
-export default {
-  name: 'Layout',
-  components: {
-    Settings,
-    TagsView,
-    AppHeader,
-    Navbar,
-    Sidebar,
-    AppMain,
-    RightPanel
-  },
-  mixins: [ResizeMixin],
-  computed: {
-    ...mapState({
-      sidebar: state => state.app.sidebar,
-      device: state => state.app.device,
-      showSettings: state => state.settings.showSettings,
-      needTagsView: state => state.settings.tagsView,
-      fixedHeader: state => state.settings.fixedHeader
-    }),
-    classObj() {
-      return {
-        hideSidebar: !this.sidebar.opened,
-        openSidebar: this.sidebar.opened,
-        withoutAnimation: this.sidebar.withoutAnimation,
-        mobile: this.device === 'mobile'
-      }
-    }
-  },
-  methods: {
-    handleClickOutside() {
-      this.$store.dispatch('CloseSideBar', { withoutAnimation: false })
-    }
-  }
-}
-</script>
-
-<style rel="stylesheet/scss" lang="scss" scoped>
-  @import "src/styles/mixin.scss";
-  .app-wrapper {
-    @include clearfix;
-    position: relative;
-    height: 100%;
-    width: 100%;
-    &.mobile.openSidebar{
-      position: fixed;
-      top: 0;
-    }
-  }
-  .drawer-bg {
-    background: #000;
-    opacity: 0.3;
-    width: 100%;
-    top: 0;
-    height: 100%;
-    position: absolute;
-    z-index: 999;
-  }
-  /*.el-scrollbar{*/
-    /*height: calc(100vh - 50px);*/
-  /*}*/
-  .has-head-scrollbar{
-    height: 100vh;
-  }
-</style>
diff --git a/src/views/layout/components/AppHeader.vue b/src/views/layout/components/AppHeader.vue
deleted file mode 100644
index 8d8912e..0000000
--- a/src/views/layout/components/AppHeader.vue
+++ /dev/null
@@ -1,151 +0,0 @@
-<template>
-  <el-header class="app-header">
-    <h3>{{ title }}</h3>
-    <!--子系统选项-->
-    <el-dropdown v-if="showChangeSys" class="systemSelect" size="medium" @command="handleCommand">
-      <span class="el-dropdown-link">{{ currentSystem.name }}<i class="el-icon-arrow-down el-icon--right"/>
-      </span>
-      <el-dropdown-menu slot="dropdown">
-        <el-dropdown-item v-for="system in systems" :command="system" :key="system.id">{{ system.name }}</el-dropdown-item>
-      </el-dropdown-menu>
-    </el-dropdown>
-    <el-dropdown class="dropdown-container" trigger="click">
-      <div class="dropdown-wrapper">
-        <span style="line-height:50px;">欢迎您，{{ name }}</span>
-        <!--<img :src="avatar+'?imageView2/1/w/80/h/80'" class="user-avatar">-->
-        <i class="el-icon-arrow-down"/>
-      </div>
-      <el-dropdown-menu slot="dropdown" class="user-dropdown">
-        <el-dropdown-item v-if="!baseConfig.singleSys">
-          <span style="display:block;" @click="backToIndex">回首页</span>
-        </el-dropdown-item>
-        <el-dropdown-item :divided="!baseConfig.singleSys">
-          <span style="display:block;" @click="resetPwd">修改密码</span>
-        </el-dropdown-item>
-        <el-dropdown-item divided>
-          <span style="display:block;" @click="logout">注销</span>
-        </el-dropdown-item>
-      </el-dropdown-menu>
-    </el-dropdown>
-    <reset-pwd v-show="showSetPwd" ref="retPwd"/>
-  </el-header>
-</template>
-
-<script>
-import { mapGetters } from 'vuex'
-import ResetPwd from '@/views/system/user/resetPwd'
-
-export default {
-  name: 'AppHeader',
-  components: { ResetPwd },
-  data() {
-    return {
-      title: this.baseConfig.title, // 标题
-      showChangeSys: !this.baseConfig.singleSys, // 是否显示切换系统菜单
-      name: this.$store.getters.name, // 用户姓名
-      showSetPwd: false // 是否显示修改密码按钮
-    }
-  },
-  computed: {
-    ...mapGetters([
-      'sidebar',
-      'avatar',
-      'currentSystem',
-      'systems'
-    ])
-  },
-  created() {
-    if (!this.baseConfig.singleSys) {
-      this.getSystems()
-    }
-  },
-  methods: {
-    toggleSideBar() {
-      this.$store.dispatch('ToggleSideBar')
-    },
-    logout() {
-      this.$store.dispatch('LogOut').then(() => {
-        location.reload() // 为了重新实例化vue-router对象 避免bug
-      })
-    },
-    resetPwd() {
-      this.showSetPwd = true
-      this.$refs.retPwd.initDialog(true)
-    },
-    backToIndex() {
-      const url = this.baseConfig.mainPage
-      window.location.href = url
-    },
-    // 切换子系统
-    handleCommand(command) {
-      console.log('切换子系统:' + command.name)
-      const params1 = `?token=${this.$store.getters.token}`
-      const params = `?sys=${command.name}&url=${command.url}&code=${command.code}&token=${this.$store.getters.token}`
-      // 判断系统是不是http的，如果是则打开新窗口
-      if (command.url.indexOf('http') > -1) {
-      // 取token
-        if (this.baseConfig.sameWindow) {
-          window.location.href = command.url + params1
-        } else {
-          window.open(command.url + params1, '_blank')
-        }
-      } else {
-      // 取token
-        if (this.baseConfig.sameWindow) {
-          window.location.href = this.baseConfig.mainPage + command.url + params
-        } else {
-          window.open(this.baseConfig.mainPage + command.url + params, '_blank')
-        }
-      }
-    },
-    // 获取子系统
-    getSystems() {
-      this.$store.dispatch('GetSystems').then(() => {
-        console.log('获取子系统列表成功-appHeader')
-      })
-    }
-  }
-}
-</script>
-
-<style rel="stylesheet/scss" lang="scss" scoped>
-  h3{
-    margin-left:24px;
-    display: inline-block;
-    float:left;
-  }
-  .dropdown-container {
-    /*height: 50px;*/
-    display: inline-block;
-    float: right;
-    z-index:500;
-    position: fixed;
-    top:0px;
-    right: 35px;
-    .dropdown-wrapper {
-      cursor: pointer;
-      margin-top: 5px;
-      position: relative;
-      line-height: initial;
-      .user-avatar {
-        width: 40px;
-        height: 40px;
-        border-radius: 10px;
-      }
-      .el-icon-caret-bottom {
-        font-size: 12px;
-      }
-    }
-  }
-  .systemSelect{
-    height: 56px;
-    display: inline-block;
-    float: left;
-    z-index:500;
-    position: fixed;
-    margin-left:60px;
-    top:5px;
-    color:#fff;
-    line-height: 56px;
-  }
-</style>
diff --git a/src/views/layout/components/AppMain.vue b/src/views/layout/components/AppMain.vue
deleted file mode 100644
index 2ea268e..0000000
--- a/src/views/layout/components/AppMain.vue
+++ /dev/null
@@ -1,38 +0,0 @@
-<template>
-  <section class="app-main">
-    <transition name="fade-transform" mode="out-in">
-      <!-- or name="fade" -->
-      <!-- <router-view :key="key"></router-view> -->
-      <div>
-        <keep-alive>
-          <router-view v-if="$route.meta.keepAlive" :key="key"/>
-        </keep-alive>
-        <router-view v-if="!$route.meta.keepAlive" :key="key"/>
-      </div>
-    </transition>
-  </section>
-</template>
-
-<script>
-export default {
-  name: 'AppMain',
-  computed: {
-    key() {
-      if (this.$route.meta.keepAlive) {
-        return this.$route.name !== undefined ? this.$route.name : this.$route
-      } else {
-        return this.$route.name !== undefined ? this.$route.name + new Date() : this.$route + new Date()
-      }
-    }
-  }
-}
-</script>
-
-<style scoped>
-.app-main {
-  /*50 = navbar  */
-  /*min-height: calc(100vh - 50px);*/
-  position: relative;
-  overflow: hidden;
-}
-</style>
diff --git a/src/views/layout/components/Navbar.vue b/src/views/layout/components/Navbar.vue
deleted file mode 100644
index 24ea99b..0000000
--- a/src/views/layout/components/Navbar.vue
+++ /dev/null
@@ -1,78 +0,0 @@
-<template>
-  <div class="navbar">
-    <hamburger :toggle-click="toggleSideBar" :is-active="sidebar.opened" class="hamburger-container"/>
-    <breadcrumb />
-  </div>
-</template>
-
-<script>
-import { mapGetters } from 'vuex'
-import Breadcrumb from '@/components/Breadcrumb'
-import Hamburger from '@/components/Hamburger'
-
-export default {
-  components: {
-    Breadcrumb,
-    Hamburger
-  },
-  computed: {
-    ...mapGetters([
-      'sidebar'
-    ])
-  },
-  methods: {
-    toggleSideBar() {
-      this.$store.dispatch('ToggleSideBar')
-    },
-    logout() {
-      this.$store.dispatch('LogOut').then(() => {
-        location.reload() // 为了重新实例化vue-router对象 避免bug
-      })
-    }
-  }
-}
-</script>
-
-<style rel="stylesheet/scss" lang="scss" scoped>
-.navbar {
-  height: 50px;
-  line-height: 50px;
-  box-shadow: 0 1px 3px 0 rgba(0,0,0,.12), 0 0 3px 0 rgba(0,0,0,.04);
-  .hamburger-container {
-    text-align: center;
-    height: 50px;
-    float: left;
-    padding: 0 12px;
-  }
-  .screenfull {
-    position: absolute;
-    right: 90px;
-    top: 16px;
-    color: red;
-  }
-  .avatar-container {
-    height: 50px;
-    display: inline-block;
-    position: absolute;
-    right: 35px;
-    .avatar-wrapper {
-      cursor: pointer;
-      margin-top: 5px;
-      position: relative;
-      line-height: initial;
-      .user-avatar {
-        width: 40px;
-        height: 40px;
-        border-radius: 10px;
-      }
-      .el-icon-caret-bottom {
-        position: absolute;
-        right: -20px;
-        top: 25px;
-        font-size: 12px;
-      }
-    }
-  }
-}
-</style>
-
diff --git a/src/views/layout/components/Settings/index.vue b/src/views/layout/components/Settings/index.vue
deleted file mode 100644
index cf3023d..0000000
--- a/src/views/layout/components/Settings/index.vue
+++ /dev/null
@@ -1,109 +0,0 @@
-<template>
-  <div class="drawer-container">
-    <div>
-      <h3 class="drawer-title">Page style setting</h3>
-
-      <div class="drawer-item">
-        <span>Theme Color</span>
-        <theme-picker style="float: right;height: 26px;margin: -3px 8px 0 0;" @change="themeChange" />
-      </div>
-
-      <div class="drawer-item">
-        <span>Open Tags-View</span>
-        <el-switch v-model="tagsView" class="drawer-switch" />
-      </div>
-
-      <div class="drawer-item">
-        <span>Fixed Header</span>
-        <el-switch v-model="fixedHeader" class="drawer-switch" />
-      </div>
-
-      <div class="drawer-item">
-        <span>Sidebar Logo</span>
-        <el-switch v-model="sidebarLogo" class="drawer-switch" />
-      </div>
-
-    </div>
-  </div>
-</template>
-
-<script>
-import ThemePicker from '@/components/ThemePicker'
-
-export default {
-  name: 'Settings',
-  components: { ThemePicker },
-  data() {
-    return {}
-  },
-  computed: {
-    fixedHeader: {
-      get() {
-        return this.$store.state.settings.fixedHeader
-      },
-      set(val) {
-        this.$store.dispatch('settings/changeSetting', {
-          key: 'fixedHeader',
-          value: val
-        })
-      }
-    },
-    tagsView: {
-      get() {
-        return this.$store.state.settings.tagsView
-      },
-      set(val) {
-        this.$store.dispatch('settings/changeSetting', {
-          key: 'tagsView',
-          value: val
-        })
-      }
-    },
-    sidebarLogo: {
-      get() {
-        return this.$store.state.settings.sidebarLogo
-      },
-      set(val) {
-        this.$store.dispatch('settings/changeSetting', {
-          key: 'sidebarLogo',
-          value: val
-        })
-      }
-    }
-  },
-  methods: {
-    themeChange(val) {
-      this.$store.dispatch('settings/changeSetting', {
-        key: 'theme',
-        value: val
-      })
-    }
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-.drawer-container {
-  padding: 24px;
-  font-size: 14px;
-  line-height: 1.5;
-  word-wrap: break-word;
-
-  .drawer-title {
-    margin-bottom: 12px;
-    color: rgba(0, 0, 0, .85);
-    font-size: 14px;
-    line-height: 22px;
-  }
-
-  .drawer-item {
-    color: rgba(0, 0, 0, .65);
-    font-size: 14px;
-    padding: 12px 0;
-  }
-
-  .drawer-switch {
-    float: right
-  }
-}
-</style>
diff --git a/src/views/layout/components/Sidebar/Item.vue b/src/views/layout/components/Sidebar/Item.vue
deleted file mode 100644
index 4ed6b5f..0000000
--- a/src/views/layout/components/Sidebar/Item.vue
+++ /dev/null
@@ -1,31 +0,0 @@
-<script>
-export default {
-  name: 'MenuItem',
-  functional: true,
-  props: {
-    icon: {
-      type: String,
-      default: ''
-    },
-    title: {
-      type: String,
-      default: ''
-    }
-  },
-  render(h, context) {
-    const { icon, title } = context.props
-    const vnodes = []
-
-    if (icon) {
-      vnodes.push(<svg-icon icon-class={icon}/>)
-    } else {
-      vnodes.push(<span style='display:inline-block;width:30px;'></span>)
-    }
-
-    if (title) {
-      vnodes.push(<span slot='title'>{(title)}</span>)
-    }
-    return vnodes
-  }
-}
-</script>
diff --git a/src/views/layout/components/Sidebar/Link.vue b/src/views/layout/components/Sidebar/Link.vue
deleted file mode 100644
index bff45cd..0000000
--- a/src/views/layout/components/Sidebar/Link.vue
+++ /dev/null
@@ -1,36 +0,0 @@
-
-<template>
-  <!-- eslint-disable vue/require-component-is -->
-  <component v-bind="linkProps(to)">
-    <slot/>
-  </component>
-</template>
-
-<script>
-import { isExternal } from '@/utils/validate'
-
-export default {
-  props: {
-    to: {
-      type: String,
-      required: true
-    }
-  },
-  methods: {
-    linkProps(url) {
-      if (isExternal(url)) {
-        return {
-          is: 'a',
-          href: url,
-          target: '_blank',
-          rel: 'noopener'
-        }
-      }
-      return {
-        is: 'router-link',
-        to: url
-      }
-    }
-  }
-}
-</script>
diff --git a/src/views/layout/components/Sidebar/SidebarItem.vue b/src/views/layout/components/Sidebar/SidebarItem.vue
deleted file mode 100644
index 988d662..0000000
--- a/src/views/layout/components/Sidebar/SidebarItem.vue
+++ /dev/null
@@ -1,107 +0,0 @@
-<template>
-  <div v-if="!item.hidden&&item.children" class="menu-wrapper">
-
-    <template v-if="hasOneShowingChild(item.children,item) && (!onlyOneChild.children||onlyOneChild.noShowingChildren)&&!item.alwaysShow">
-      <a :href="onlyOneChild.path" target="_blank" @click="clickLink(onlyOneChild.path,$event)">
-        <el-menu-item :index="resolvePath(onlyOneChild.path)" :class="{'submenu-title-noDropdown':!isNest}">
-          <item v-if="onlyOneChild.meta" :icon="onlyOneChild.meta.icon||item.meta.icon" :title="onlyOneChild.meta.title" />
-        </el-menu-item>
-      </a>
-    </template>
-
-    <el-submenu v-else :index="item.name||item.path">
-      <template slot="title">
-        <item v-if="item.meta" :icon="item.meta.icon" :title="item.meta.title" />
-      </template>
-
-      <template v-for="child in item.children" v-if="!child.hidden">
-        <sidebar-item
-          v-if="child.children&&child.children.length>0"
-          :is-nest="true"
-          :item="child"
-          :key="child.path"
-          :base-path="resolvePath(child.path)"
-          class="nest-menu" />
-
-        <a v-else :href="child.path" :key="child.name" target="_blank" @click="clickLink(child.path,$event)">
-          <el-menu-item :index="resolvePath(child.path)">
-            <span class="light-line"/>
-            <item v-if="child.meta" :icon="child.meta.icon" :title="child.meta.title" />
-          </el-menu-item>
-        </a>
-      </template>
-    </el-submenu>
-
-  </div>
-</template>
-
-<script>
-import path from 'path'
-import { validateURL } from '@/utils/validate'
-import Item from './Item'
-
-export default {
-  name: 'SidebarItem',
-  components: { Item },
-  props: {
-    // route object
-    item: {
-      type: Object,
-      required: true
-    },
-    isNest: {
-      type: Boolean,
-      default: false
-    },
-    basePath: {
-      type: String,
-      default: ''
-    }
-  },
-  data() {
-    return {
-      onlyOneChild: null
-    }
-  },
-  methods: {
-    hasOneShowingChild(children, parent) {
-      const showingChildren = children.filter(item => {
-        if (item.hidden) {
-          return false
-        } else {
-          // Temp set(will be used if only has one showing child)
-          this.onlyOneChild = item
-          return true
-        }
-      })
-
-      // When there is only one child router, the child router is displayed by default
-      if (showingChildren.length === 1) {
-        return true
-      }
-
-      // Show parent if there are no child router to display
-      if (showingChildren.length === 0) {
-        this.onlyOneChild = { ... parent, path: '', noShowingChildren: true }
-        return true
-      }
-
-      return false
-    },
-    resolvePath(routePath) {
-      return path.resolve(this.basePath, routePath)
-    },
-    isExternalLink(routePath) {
-      return validateURL(routePath)
-    },
-    clickLink(routePath, e) {
-      if (!this.isExternalLink(routePath)) {
-        e.preventDefault()
-        const path = this.resolvePath(routePath)
-        this.$router.push({ path, query: { t: +new Date() }})
-        // this.$router.push(path)
-      }
-    }
-  }
-}
-</script>
diff --git a/src/views/layout/components/Sidebar/index.vue b/src/views/layout/components/Sidebar/index.vue
deleted file mode 100644
index 33d596a..0000000
--- a/src/views/layout/components/Sidebar/index.vue
+++ /dev/null
@@ -1,39 +0,0 @@
-<template>
-  <el-scrollbar wrap-class="scrollbar-wrapper">
-    <el-menu
-      :show-timeout="200"
-      :default-active="activeMenu"
-      :collapse="isCollapse"
-      mode="vertical"
-    >
-      <sidebar-item v-for="route in permission_routers" :key="route.name" :item="route" :base-path="route.path"/>
-    </el-menu>
-  </el-scrollbar>
-</template>
-
-<script>
-import { mapGetters } from 'vuex'
-import SidebarItem from './SidebarItem'
-
-export default {
-  components: { SidebarItem },
-  computed: {
-    ...mapGetters([
-      'permission_routers',
-      'sidebar'
-    ]),
-    activeMenu() {
-      const route = this.$route
-      const { meta, path } = route
-      // 如果meta中上设置activeMenu，按照meta中设置高亮
-      if (meta.activeMenu) {
-        return meta.activeMenu
-      }
-      return path
-    },
-    isCollapse() {
-      return !this.sidebar.opened
-    }
-  }
-}
-</script>
diff --git a/src/views/layout/components/TagsView/ScrollPane.vue b/src/views/layout/components/TagsView/ScrollPane.vue
deleted file mode 100644
index 0ec76e7..0000000
--- a/src/views/layout/components/TagsView/ScrollPane.vue
+++ /dev/null
@@ -1,85 +0,0 @@
-<template>
-  <el-scrollbar ref="scrollContainer" :vertical="false" class="scroll-container" @wheel.native.prevent="handleScroll">
-    <slot />
-  </el-scrollbar>
-</template>
-
-<script>
-const tagAndTagSpacing = 4 // tagAndTagSpacing
-
-export default {
-  name: 'ScrollPane',
-  data() {
-    return {
-      left: 0
-    }
-  },
-  computed: {
-    scrollWrapper() {
-      return this.$refs.scrollContainer.$refs.wrap
-    }
-  },
-  methods: {
-    handleScroll(e) {
-      const eventDelta = e.wheelDelta || -e.deltaY * 40
-      const $scrollWrapper = this.scrollWrapper
-      $scrollWrapper.scrollLeft = $scrollWrapper.scrollLeft + eventDelta / 4
-    },
-    moveToTarget(currentTag) {
-      const $container = this.$refs.scrollContainer.$el
-      const $containerWidth = $container.offsetWidth
-      const $scrollWrapper = this.scrollWrapper
-      const tagList = this.$parent.$refs.tag
-
-      let firstTag = null
-      let lastTag = null
-
-      // find first tag and last tag
-      if (tagList.length > 0) {
-        firstTag = tagList[0]
-        lastTag = tagList[tagList.length - 1]
-      }
-
-      if (firstTag === currentTag) {
-        $scrollWrapper.scrollLeft = 0
-      } else if (lastTag === currentTag) {
-        $scrollWrapper.scrollLeft = $scrollWrapper.scrollWidth - $containerWidth
-      } else {
-        // find preTag and nextTag
-        const currentIndex = tagList.findIndex(item => item === currentTag)
-        const prevTag = tagList[currentIndex - 1]
-        const nextTag = tagList[currentIndex + 1]
-
-        // the tag's offsetLeft after of nextTag
-        const afterNextTagOffsetLeft = nextTag.$el.offsetLeft + nextTag.$el.offsetWidth + tagAndTagSpacing
-
-        // the tag's offsetLeft before of prevTag
-        const beforePrevTagOffsetLeft = prevTag.$el.offsetLeft - tagAndTagSpacing
-
-        if (afterNextTagOffsetLeft > $scrollWrapper.scrollLeft + $containerWidth) {
-          $scrollWrapper.scrollLeft = afterNextTagOffsetLeft - $containerWidth
-        } else if (beforePrevTagOffsetLeft < $scrollWrapper.scrollLeft) {
-          $scrollWrapper.scrollLeft = beforePrevTagOffsetLeft
-        }
-      }
-    }
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-.scroll-container {
-  white-space: nowrap;
-  position: relative;
-  overflow: hidden;
-  width: 100%;
-  /deep/ {
-    .el-scrollbar__bar {
-      bottom: 0px;
-    }
-    .el-scrollbar__wrap {
-      height: 49px;
-    }
-  }
-}
-</style>

diff --git a/src/api/dashboard.js b/src/api/dashboard.js
index e69de29..0a4ddfc 100644
--- a/src/api/dashboard.js
+++ b/src/api/dashboard.js
@@ -0,0 +1,73 @@
+/**
+ * 井总览模块接口
+ */
+import request from '@/utils/request'
+
+// 用水量、噪声统计数据
+export function getWatchStatistic() {
+  return request({
+    url: 'waterStatistic/overview',
+    method: 'get'
+  })
+}
+// 水表数量
+export function waterMeterCount() {
+  return request({
+    url: 'waterMeterData/count',
+    method: 'get'
+  })
+}
+// 阀门数量
+export function valveCount() {
+  return request({
+    url: 'waterMeterData/count',
+    method: 'get'
+  })
+}
+
+// 查询一级分区各区用水量
+export function countByFirstArea(params) {
+  return request({
+    url: 'waterStatistic/countByFirstArea',
+    method: 'get',
+    params
+  })
+}
+
+// 查询一级分区7日用水量
+export function countByDayFirst(params) {
+  return request({
+    url: 'waterStatistic/countByDayFirst',
+    method: 'get',
+    params
+  })
+}
+
+// 查询二级分区各区用水量
+export function countBySecondArea(params) {
+  return request({
+    url: 'waterStatistic/countBySecondArea',
+    method: 'get',
+    params
+  })
+}
+
+// 查询二级分区水表告警
+export function alarmBySecondArea(params) {
+  return request({
+    url: 'waterStatistic/alarmBySecondArea',
+    method: 'get',
+    params
+  })
+}
+
+// 设备7日报警趋势
+export function alarmCountByDay(params) {
+  return request({
+    url: 'waterStatistic/alarmCountByDay',
+    method: 'get',
+    params
+  })
+}
+
+
diff --git a/src/components/BigData/Card/index.vue b/src/components/BigData/Card/index.vue
index d71e609..45359c9 100644
--- a/src/components/BigData/Card/index.vue
+++ b/src/components/BigData/Card/index.vue
@@ -10,6 +10,7 @@
         </div>
         <div class="card-panel-num" >
           {{ context }}
+          <span style="font-size: 10px;color:#888">{{unit}}</span>
         </div>
       </div>
     </div>
@@ -39,6 +40,10 @@
     color: {
       type: String,
       default: '#40c9c6'
+    },
+    unit:{
+      type: String,
+      default:''
     }
   },
   computed: {
diff --git a/src/components/BigData/Card1/index.vue b/src/components/BigData/Card1/index.vue
index 030b2dc..aa46454 100644
--- a/src/components/BigData/Card1/index.vue
+++ b/src/components/BigData/Card1/index.vue
@@ -1,10 +1,11 @@
 <template>
   <el-card :body-style="{ padding: '0px' }" shadow="always">
-    <div class="card-panel" >
-      <div :style="backgroundColor" class="card-panel-icon-wrapper">
-        <svg-icon :icon-class="icon" class-name="card-panel-icon" />
+    <div class="card-panel">
+      <div v-if="icon" :style="backgroundColor" class="card-panel-icon-wrapper">
+        <svg-icon :icon-class="icon" class-name="card-panel-icon"/>
       </div>
-      <div  class="card-panel-description">
+      <div v-else style="float:left; width: 20px;height: 100%;"></div>
+      <div class="card-panel-description">
         <!-- <div class="card-panel-text">
           {{ title[0] }} <span class="card-panel-num">{{ context[0] }}</span>
         </div>
@@ -13,18 +14,20 @@
         </div> -->
         <div class="two" v-if="title.length===2">
           <div class="card-panel-text">
-            {{ title[0] }} <span class="card-panel-num">{{ context[0] }}</span>
+            {{ title[0] }} <span class="card-panel-num">{{ context[0] }}<span
+            style="font-size: 10px;color:#888;margin-left: 5px">{{unit}}</span></span>
           </div>
-          <div class="card-panel-text" >
-            {{ title[1] }} <span class="card-panel-num">{{ context[1] }}</span>
+          <div class="card-panel-text">
+            {{ title[1] }} <span class="card-panel-num">{{ context[1] }}<span
+            style="font-size: 10px;color:#888;margin-left: 5px">{{unit}}</span></span>
           </div>
         </div>
         <div class="only" v-else>
           <div class="card-panel-text">
             {{ title[0] }}
           </div>
-          <div class="card-panel-num" >
-            {{ context[0] }}
+          <div class="card-panel-num">
+            {{ context[0] }}<span style="font-size: 10px;color:#888">{{unit}}</span>
           </div>
         </div>
       </div>
@@ -33,42 +36,46 @@
 </template>
 
 <script>
-export default {
-  name: 'Card1',
-  props: {
-    title: {
-      type: Array,
-      default: function() {
-        return ['标题', '标题']
+  export default {
+    name: 'Card1',
+    props: {
+      title: {
+        type: Array,
+        default: function () {
+          return ['标题', '标题']
+        }
+      },
+      subtitle: {
+        type: String,
+        default: ''
+      },
+      icon: {
+        type: String,
+        default: ''
+      },
+      context: {
+        type: Array,
+        default: function () {
+          return ['--', '--']
+        }
+      },
+      color: {
+        type: String,
+        default: '#40c9c6'
+      },
+      unit: {
+        type: String,
+        default: ''
       }
     },
-    subtitle: {
-      type: String,
-      default: ''
-    },
-    icon: {
-      type: String,
-      default: ''
-    },
-    context: {
-      type: Array,
-      default: function() {
-        return ['--', '--']
-      }
-    },
-    color: {
-      type: String,
-      default: '#40c9c6'
-    }
-  },
-  computed: {
-    backgroundColor() {
-      return {
-        color: this.color
+    computed: {
+      backgroundColor() {
+        return {
+          color: this.color
+        }
       }
     }
   }
-}
 </script>
 
 <style lang="scss" scoped>
@@ -108,7 +115,7 @@
       overflow: auto;
       margin-left: 5px;
 
-      .two{
+      .two {
         .card-panel-text {
           line-height: 18px;
           color: rgba(0, 0, 0, 0.45);
@@ -123,7 +130,7 @@
           float: right;
         }
       }
-      .only{
+      .only {
         .card-panel-text {
           line-height: 18px;
           color: rgba(0, 0, 0, 0.45);
diff --git a/src/icons/svg/icon-noise.svg b/src/icons/svg/icon-noise.svg
new file mode 100644
index 0000000..00bef71
--- /dev/null
+++ b/src/icons/svg/icon-noise.svg
@@ -0,0 +1,2 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1648634383080" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2093" xmlns:xlink="http://www.w3.org/1999/xlink" width="128" height="128"><defs><style type="text/css">@font-face { font-family: feedback-iconfont; src: url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.woff2?t=1630033759944") format("woff2"), url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.woff?t=1630033759944") format("woff"), url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.ttf?t=1630033759944") format("truetype"); }
+</style></defs><path d="M875.039 549.868c-25.436 0-47.411 13.91-59.3 34.4h-125.9l-99.564-199.177-76.703 281.23-51.528-566.757-67.461-5.735-130.8 490.44H49.397v68.802h267.259l94.464-354.268 51.235 563.733 67.451 5.913 79.432-291.445 38.077 76.057h168.428c11.91 20.419 33.864 34.391 59.3 34.391 37.98 0 68.792-30.879 68.792-68.797-0.005-38.062-30.817-68.787-68.797-68.787z" p-id="2094"></path></svg>
\ No newline at end of file
diff --git a/src/icons/svg/icon-valve.svg b/src/icons/svg/icon-valve.svg
new file mode 100644
index 0000000..f5d96e2
--- /dev/null
+++ b/src/icons/svg/icon-valve.svg
@@ -0,0 +1,2 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1648634707805" class="icon" viewBox="0 0 1090 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3809" xmlns:xlink="http://www.w3.org/1999/xlink" width="136.25" height="128"><defs><style type="text/css">@font-face { font-family: feedback-iconfont; src: url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.woff2?t=1630033759944") format("woff2"), url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.woff?t=1630033759944") format("woff"), url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.ttf?t=1630033759944") format("truetype"); }
+</style></defs><path d="M502.944 296.975V143.052h-231.98c-31.587 0-57.321-24.93-57.321-55.526 0-30.598 25.75-55.526 57.321-55.526H833.06c31.571 0 57.306 24.93 57.306 55.525 0 30.922-25.735 55.526-57.29 55.526h-231.64v153.924h18.179c21.615 0 39.112 16.955 39.112 37.904v90.565l-213.105-0.34v-90.225c0-20.95 17.497-37.904 39.128-37.904h18.194z m-381.74 590.293v63.84c0 9.306-7.834 16.955-17.698 16.955H58.231c-9.862-0.001-17.698-7.65-17.698-17.296V542.472c0-9.63 7.835-17.28 17.698-17.28h45.274c9.863 0 17.698 7.65 17.698 17.28v83.133h150.55c6.272-85.518 79.247-152.95 168.387-152.95h207.98c89.14 0 162.116 67.432 168.403 152.95h150.873v-83.798c0-9.29 7.495-16.615 17.033-16.615h46.297c9.523 0 17.001 7.308 17.001 16.615v409.625c0.341 9.321-7.478 16.63-17.016 16.63h-46.297c-9.523 0-17.018-7.309-17.018-16.63v-64.165H805.36C780.755 948.583 719.655 992 648.119 992H440.142c-71.52 0-132.635-43.402-157.239-104.733H121.204z" p-id="3810"></path></svg>
\ No newline at end of file
diff --git a/src/views/dashboard/components/PanelGroup.vue b/src/views/dashboard/components/PanelGroup.vue
index b72d289..332cbf9 100644
--- a/src/views/dashboard/components/PanelGroup.vue
+++ b/src/views/dashboard/components/PanelGroup.vue
@@ -1,12 +1,12 @@
 <template>
   <el-row class="panel-group">
     <div v-for="card in dataGroup1" :key="card.index" class="card-panel-col">
-      <card1 :title="card.title" :context="card.context" :icon="card.icon" :color="card.color"/>
+      <card1 :title="card.title" :context="card.context" :icon="card.icon" :color="card.color" :unit="card.unit"/>
     </div>
 
     <div v-for="card in dataGroup" :key="card.title" class="card-panel-col">
       <div v-if="hasPerm(card.permission)">
-        <card :title="card.title" :context="card.context" :icon="card.icon" :color="card.color" @click.native="goPage(card.path)"/>
+        <card :title="card.title" :context="card.context" :icon="card.icon" :unit="card.unit" :color="card.color" @click.native="goPage(card.path)"/>
       </div>
     </div>
   </el-row>
@@ -16,7 +16,7 @@
 import Card1 from '@/components/BigData/Card1'
 import Card from '@/components/BigData/Card'
 // 首页
-import { getWatchStatistic , waterMeterCount } from '@/api/overview'
+import { getWatchStatistic , waterMeterCount, valveCount } from '@/api/dashboard'
 // 根据布防数量统计井数量
 import { wellCountByBfzt } from '@/api/well'
 // 当前报警数
@@ -36,30 +36,33 @@
           context: ['--', '--'],
           icon: 'icon-water',
           color: '#40c9c6',
+          unit: '吨',
           index: 0
         },
         {
-          title: ['今日用水量', '昨日用水量'],
+          title: ['今日用水量', '生产厂区用水量'],
           context: ['--', '--'],
-          icon: 'icon-water',
+          icon: '',
           color: '#36a3f7',
+          unit: '吨',
           index: 1
         },
         {
-          title: ['实时噪声'],
+          title: ['滑道实时噪声'],
           context: ['--'],
-          icon: 'icon-device',
+          icon: 'icon-noise',
           color: '#f1c353',
+          unit: 'db',
           index: 2
         }
       ],
       dataGroup: [
         {
-          title: '设备总数',
+          title: '阀门数量',
           context: '--',
-          icon: 'icon-device',
+          icon: 'icon-valve',
           color: '#40c9c6',
-          path: '/deviceList',
+          path: '/deviceList?deviceType=20',
           permission: '/device/list'
         },
         {
@@ -67,11 +70,11 @@
           context: '--',
           icon: 'icon-watch',
           color: '#9694f7',
-          path: '/deviceList',
+          path: '/deviceList?deviceType=13',
           permission: '/device/list'
         },
         {
-          title: '当前报警数',
+          title: '报警信息',
           context: '--',
           icon: 'icon-alarm',
           color: '#f4516c',
@@ -83,10 +86,10 @@
   },
   mounted() {
     this.getWater()
-    this.getWellCount()
+    // this.getWellCount()
     this.getDeviceCount()
     this.getAlarmCount()
-    this.getJobCount()
+    // this.getJobCount()
   },
   methods: {
     refresh() {
@@ -97,24 +100,31 @@
       this.$router.push(path)
     },
     getWater() {
+      // 用水量
       getWatchStatistic().then(response => {
-        this.dataGroup1[0].context = [response.data.total, response.data.month]
-        this.dataGroup1[1].context = [response.data.today, response.data.yesterday]
-        this.dataGroup1[2].context = [Number(response.data.sound).toFixed(2)]
+        this.dataGroup1[0].context = [response.data.total?parseFloat(response.data.total).toFixed(0):'--', response.data.month?parseFloat(response.data.month).toFixed(0):'--']
+        this.dataGroup1[1].context = [response.data.today?parseFloat(response.data.today).toFixed(0):'--', response.data.yesterday?parseFloat(response.data.yesterday).toFixed(0):'--']
+        this.dataGroup1[2].context = [response.data.sound?Number(response.data.sound).toFixed(2):'--']
       })
-      waterMeterCount().then(response => {
-        this.dataGroup[1].context = response.data
-      })
+
     },
-    getWellCount() {
-      wellCountByBfzt().then(response => {
-        this.dataGroup[0].context = response.data.total
-      })
-    },
+    // getWellCount() {
+    //   wellCountByBfzt().then(response => {
+    //     this.dataGroup[0].context = response.data.total
+    //   })
+    // },
     getDeviceCount() {
       // deviceStaticByStatus().then(response => {
       //   this.dataGroup[1].context = response.data.total
       // })
+      // 阀门数量
+      valveCount().then(response => {
+        this.dataGroup[0].context = response.data
+      })
+      // 水表数量
+      waterMeterCount().then(response => {
+        this.dataGroup[1].context = response.data
+      })
     },
     getAlarmCount() {
       alarmNowStatic().then(response => {
@@ -159,7 +169,7 @@
   //   &:hover {
   //     .card-panel-icon-wrapper {
   //       color: #fff;
-        
+
   //     }
 
   //     .icon-people {
diff --git a/src/views/dashboard/components/waterCountByAreaBar.vue b/src/views/dashboard/components/waterCountByAreaBar.vue
index 1bdac48..c488923 100644
--- a/src/views/dashboard/components/waterCountByAreaBar.vue
+++ b/src/views/dashboard/components/waterCountByAreaBar.vue
@@ -1,9 +1,10 @@
 <template>
   <div class="container">
     <div class="statistic-container">
+      <el-button round size="mini" @click="setDefaultTime('year')">本年</el-button>
+      <el-button round size="mini" @click="setDefaultTime('season')">本季</el-button>
       <el-button round size="mini" @click="setDefaultTime('month')">本月</el-button>
-      <el-button round size="mini" @click="setDefaultTime('week')">近7日</el-button>
-      <el-button round size="mini" @click="setDefaultTime('yesterday')">昨日</el-button>
+      <el-button round size="mini" @click="setDefaultTime('week')">本周</el-button>
       <el-button round size="mini" @click="setDefaultTime('today')">今日</el-button>
       <el-date-picker
         v-model="timeRange"
@@ -107,7 +108,7 @@
   },
   mounted() {
     this.setDefaultTime('today')
-    this.fetchArea()
+    // this.fetchArea()
   },
   methods: {
     fetchArea() {
@@ -130,10 +131,11 @@
     },
     fetchData() {
       const params = {
-        areaId: this.areaId,
+        areaId: '110000',
         startTime: this.timeRange[0],
         endTime: this.timeRange[1]
       }
+      this.$emit('change', params)
       countBySecondArea(params).then(response => {
         this.isShow = false
         this.chartData.rows = response.data
@@ -153,7 +155,21 @@
       })
     },
     setDefaultTime(val) {
-      if (val === 'month') {
+      if (val === 'year') {
+        var today = new Date()
+        var tYear = today.getFullYear()
+        const beginTime = tYear + '-01-01'
+        const endTime = getDayTime(new Date().getTime())
+        this.timeRange = [beginTime, endTime.Format('yyyy-MM-dd')]
+      }if (val === 'season') {
+        var today = new Date()
+        var tYear = today.getFullYear()
+        var tMonth = today.getMonth() + 1
+        const oldMonth = tMonth<4?'01':(tMonth<7?'04':(tMonth<10?'07':'10'))
+        const beginTime = tYear + '-' + oldMonth + '-01'
+        const endTime = getDayTime(new Date().getTime())
+        this.timeRange = [beginTime, endTime.Format('yyyy-MM-dd')]
+      }else if (val === 'month') {
         var today = new Date()
         var tYear = today.getFullYear()
         var tMonth = today.getMonth() + 1
@@ -164,7 +180,8 @@
         const endTime = getDayTime(new Date().getTime())
         this.timeRange = [beginTime, endTime.Format('yyyy-MM-dd')]
       } else if (val === 'week') {
-        this.timeRange = [getDayTime(new Date().getTime() - 24 * 6 * 60 * 60 * 1000).Format('yyyy-MM-dd'), getDayTime(new Date().getTime()).Format('yyyy-MM-dd')]
+        const nowDayOfWeek =  new Date().getDay()-1
+        this.timeRange = [getDayTime(new Date().getTime() - 24 * nowDayOfWeek * 60 * 60 * 1000).Format('yyyy-MM-dd'), getDayTime(new Date().getTime()).Format('yyyy-MM-dd')]
       } else if (val === 'yesterday') {
         this.timeRange = [getDayTime(new Date().getTime() - 24 * 60 * 60 * 1000).Format('yyyy-MM-dd'), getDayTime(new Date().getTime() - 24 * 60 * 60 * 1000).Format('yyyy-MM-dd')]
       } else if (val === 'today') {
diff --git a/src/views/dashboard/components/waterCountByDay.vue b/src/views/dashboard/components/waterCountByDay.vue
index 8e12f02..78d1f7c 100644
--- a/src/views/dashboard/components/waterCountByDay.vue
+++ b/src/views/dashboard/components/waterCountByDay.vue
@@ -1,12 +1,12 @@
 <template>
   <div class="container">
-    <div class="function">
-      <el-button round size="mini" @click="changeTime('year')">近1年</el-button>
-      <el-button round size="mini" @click="changeTime('halfyear')">近6月</el-button>
-      <el-button round size="mini" @click="changeTime('3month')">近3月</el-button>
-      <el-button round size="mini" @click="changeTime('month')">近1月</el-button>
-      <el-button round size="mini" @click="changeTime('week')">近1周</el-button>
-    </div>
+    <!--<div class="function">-->
+      <!--<el-button round size="mini" @click="changeTime('year')">近1年</el-button>-->
+      <!--<el-button round size="mini" @click="changeTime('halfyear')">近6月</el-button>-->
+      <!--<el-button round size="mini" @click="changeTime('3month')">近3月</el-button>-->
+      <!--<el-button round size="mini" @click="changeTime('month')">近1月</el-button>-->
+      <!--<el-button round size="mini" @click="changeTime('week')">近1周</el-button>-->
+    <!--</div>-->
     <ve-line :data="chartData" :title="title" :extend="extend" :settings="chartSettings"/>
   </div>
 </template>
@@ -17,6 +17,18 @@
 import { getDoorAreaTree } from '@/api/system/area'
 export default {
   name: 'WaterCountByDay',
+  props:{
+    query: {
+      type: Object,
+      default:()=>{
+        return {
+          areaId: '',
+          startTime: '',
+          endTime: ''
+        }
+      }
+    }
+  },
   data() {
     return {
       listQuery: {
@@ -52,8 +64,13 @@
     }
   },
   mounted() {
-    this.changeTime('month')
-    this.fetchArea()
+    // this.changeTime('month')
+    // this.fetchArea()
+  },
+  watch:{
+    query(val){
+      this.fetchData()
+    }
   },
   methods: {
     fetchArea() {
@@ -73,7 +90,7 @@
       })
     },
     fetchData() {
-      countByDayFirst(this.listQuery).then(response => {
+      countByDayFirst(this.query).then(response => {
         const arr = response.data.map(function(item) {
           for (let i = 0; i < item.data.length; i++) {
             item[item.data[i].areaName] = item.data[i].count
diff --git a/src/views/dashboard/components/waterCountByDept.vue b/src/views/dashboard/components/waterCountByDept.vue
index a0c82cf..02e27cd 100644
--- a/src/views/dashboard/components/waterCountByDept.vue
+++ b/src/views/dashboard/components/waterCountByDept.vue
@@ -1,22 +1,22 @@
 <!--suppress ALL -->
 <template>
   <div class="container">
-    <div class="function">
-      <el-button round size="mini" @click="changeTime('year')">近1年</el-button>
-      <el-button round size="mini" @click="changeTime('halfyear')">近6月</el-button>
-      <el-button round size="mini" @click="changeTime('3month')">近3月</el-button>
-      <el-button round size="mini" @click="changeTime('month')">近1月</el-button>
-      <el-button round size="mini" @click="changeTime('week')">近1周</el-button>
-    </div>
+    <!--<div class="function">-->
+      <!--<el-button round size="mini" @click="changeTime('year')">近1年</el-button>-->
+      <!--<el-button round size="mini" @click="changeTime('halfyear')">近6月</el-button>-->
+      <!--<el-button round size="mini" @click="changeTime('3month')">近3月</el-button>-->
+      <!--<el-button round size="mini" @click="changeTime('month')">近1月</el-button>-->
+      <!--<el-button round size="mini" @click="changeTime('week')">近1周</el-button>-->
+    <!--</div>-->
     <ve-pie :data="chartData" :extend="extend" :title="title"/>
-    <div class="function">
-      <el-button
-        v-for="item in areaList"
-        :key="item.id"
-        round
-        @click="areaChange(item.id)"
-        size="mini">{{item.name}}</el-button>
-    </div>
+    <!--<div class="function">-->
+      <!--<el-button-->
+        <!--v-for="item in areaList"-->
+        <!--:key="item.id"-->
+        <!--round-->
+        <!--@click="areaChange(item.id)"-->
+        <!--size="mini">{{item.name}}</el-button>-->
+    <!--</div>-->
   </div>
 </template>
 
@@ -25,6 +25,18 @@
 import { getDoorAreaTree } from '@/api/system/area'
 export default {
   name: 'WaterCountByDepy',
+  props:{
+    query: {
+      type: Object,
+      default:()=>{
+        return {
+          areaId: '',
+          startTime: '',
+          endTime: ''
+        }
+      }
+    }
+  },
   data() {
     return {
       listQuery: {
@@ -69,7 +81,12 @@
   },
   mounted() {
     // TODO:待调试真接口
-    this.fetchArea()
+    // this.fetchArea()
+  },
+  watch:{
+    query(val){
+      this.fetchData()
+    }
   },
   methods: {
     fetchArea() {
@@ -104,8 +121,7 @@
       //   { 'areaName': '码头作业区', 'count': 78 },
       //   { 'areaName': '车间生产区', 'count': 78 }
       // ]
-      this.listQuery.areaId = this.areaId
-      countBySecondArea(this.listQuery).then(response => {
+      countBySecondArea(this.query).then(response => {
         this.chartData.rows = response.data
       })
     },
diff --git a/src/views/dashboard/components/waterNote.vue b/src/views/dashboard/components/waterNote.vue
new file mode 100644
index 0000000..aa0f448
--- /dev/null
+++ b/src/views/dashboard/components/waterNote.vue
@@ -0,0 +1,152 @@
+<!--suppress ALL -->
+<template>
+  <div class="container">
+    <div>
+      用水事记
+    </div>
+
+  </div>
+</template>
+
+<script>
+import { countBySecondArea } from '@/api/overview'
+import { getDoorAreaTree } from '@/api/system/area'
+export default {
+  name: 'WaterNote',
+  props:{
+    query: {
+      type: Object,
+      default:()=>{
+        return {
+          areaId: '',
+          startTime: '',
+          endTime: ''
+        }
+      }
+    }
+  },
+  data() {
+    return {
+      listQuery: {
+        areaId: '',
+        startTime: '',
+        endTime: ''
+      },
+      areaId:'',
+      areaList: [],
+      chartData: {
+        columns: ['areaName', 'count'],
+        rows: []
+      },
+      extend: {
+        grid: {
+          right: '30%'
+        },
+        legend: {
+          type: 'scroll',
+          top: '60px',
+          right: '0px',
+          orient: 'vertical'
+        },
+        series: {
+          label: { show: true, position: 'outside', formatter: '{b}' },
+          right: 120
+        },
+        tooltip: { trigger: 'item', formatter: '{b}<br/>用水量：{c}吨<br/>占比：{d}%' }
+      },
+      title: {
+        text: '分区用水占比图'
+      },
+      chartSettings: {
+        labelMap: {
+          'areaName': '分区',
+          'count': '用水量'
+        },
+        dimension: 'areaName',
+        metrics: 'count'
+      }
+    }
+  },
+  mounted() {
+    // TODO:待调试真接口
+    // this.fetchArea()
+  },
+  watch:{
+    query(val){
+      this.fetchData()
+    }
+  },
+  methods: {
+    fetchArea() {
+      getDoorAreaTree().then(response => {
+        if (response.code === 200) {
+          this.areaList = response.data.filter(item => {
+            return item.pid === '1'
+          }).map(function(item) {
+            return {
+              id: item.id, name: item.name
+            }
+          })
+          if (this.areaList.length !== 0) { this.areaChange(this.areaList[0].id) }
+        }
+      })
+    },
+    areaChange(val){
+      this.areaId = val
+      this.fetchData()
+    },
+    // 获取统计数据
+    fetchData() {
+      // this.chartData.rows = [
+      //   { 'areaName': '科技楼及食堂', 'count': 53 },
+      //   { 'areaName': 'A\\B\\C\\D\\E座', 'count': 78 },
+      //   { 'areaName': '厂区', 'count': 78 },
+      //   { 'areaName': '分段分区', 'count': 78 },
+      //   { 'areaName': '船坞分区', 'count': 78 },
+      //   { 'areaName': '刀把码头', 'count': 78 },
+      //   { 'areaName': '制管作业区', 'count': 78 },
+      //   { 'areaName': '滑道作业区', 'count': 78 },
+      //   { 'areaName': '码头作业区', 'count': 78 },
+      //   { 'areaName': '车间生产区', 'count': 78 }
+      // ]
+      countBySecondArea(this.query).then(response => {
+        this.chartData.rows = response.data
+      })
+    },
+    changeTime(timeType) {
+      let startTime
+      switch (timeType) {
+        case 'year':
+          startTime = getDayTime(new Date().getTime() - 24 * 365 * 60 * 60 * 1000)
+          this.listQuery.startTime = startTime.Format('yyyy-MM-dd')
+          break
+        case 'halfyear':
+          startTime = getDayTime(new Date().getTime() - 24 * 182 * 60 * 60 * 1000)
+          this.listQuery.startTime = startTime.Format('yyyy-MM-dd')
+          break
+        case '3month':
+          startTime = getDayTime(new Date().getTime() - 24 * 90 * 60 * 60 * 1000)
+          this.listQuery.startTime = startTime.Format('yyyy-MM-dd')
+          break
+        case 'month':
+          startTime = getDayTime(new Date().getTime() - 24 * 30 * 60 * 60 * 1000)
+          this.listQuery.startTime = startTime.Format('yyyy-MM-dd')
+          break
+        case 'week':
+          startTime = getDayTime(new Date().getTime() - 24 * 7 * 60 * 60 * 1000)
+          this.listQuery.startTime = startTime.Format('yyyy-MM-dd')
+          break
+      }
+      const endTime = new Date()
+      this.listQuery.endTime = endTime.Format('yyyy-MM-dd')
+      this.fetchData()
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+  .container{
+    position:relative;
+    height: 455px;
+  }
+</style>
diff --git a/src/views/dashboard/index.vue b/src/views/dashboard/index.vue
index fdbc38a..831dbc3 100644
--- a/src/views/dashboard/index.vue
+++ b/src/views/dashboard/index.vue
@@ -1,31 +1,33 @@
 <template>
   <div class="dashboard-container" style="background-color: white">
     <panel-group ref="panelgroup"/>
-    <el-row :gutter="10">
+    <el-row>
       <!-- 用水统计图 -->
+      <el-col :span="18">
+        <el-card shadow="never">
+          <water-count-by-area-bar @change="changeWaterQuery"/>
+        </el-card>
+      </el-col>
+      <el-col :span="6">
+        <el-card shadow="never">
+          <water-note/>
+        </el-card>
+      </el-col>
+    </el-row>
+    <el-row>
+      <!-- 分区用水占比图 -->
       <el-col :span="12">
         <el-card shadow="never">
-          <water-count-by-dept-bar/>
+          <water-count-by-dept :query="listQuery1" ref="waterCountPie"/>
         </el-card>
       </el-col>
       <!-- 用水走势图 -->
       <el-col :span="12">
         <el-card shadow="never">
-          <water-count-by-day/>
+          <water-count-by-day :query="listQuery1" ref="waterCountDay"/>
         </el-card>
       </el-col>
-      <!-- 分区用水统计图 -->
-      <el-col :span="12">
-        <el-card shadow="never">
-          <water-count-by-area-bar/>
-        </el-card>
-      </el-col>
-      <!-- 分区用水占比图 -->
-      <el-col :span="12">
-        <el-card shadow="never">
-          <water-count-by-depy/>
-        </el-card>
-      </el-col>
+
       <!--水表报警次数统计-->
       <el-col v-if="hasPerm('/statics/alarmsByDay')" :span="12">
         <el-card shadow="never">
@@ -64,20 +66,22 @@
 import DeviceCountByOnline from './components/DeviceCountByOnline'
 import AlarmByDays from './components/AlarmByDays'
 import JobByStatus from './components/JobByStatus'
-import WaterCountByDepy from './components/waterCountByDept'
+import WaterCountByDept from './components/waterCountByDept'
 import WaterCountByDeptBar from './components/waterCountByDeptBar'
 import WaterCountByDay from './components/waterCountByDay'
 import WaterCountByAreaBar from "./components/waterCountByAreaBar";
 import WatchAlarmBar from "./components/watchAlarmBar";
+import WaterNote from "./components/waterNote";
 
 export default {
   name: 'Dashboard',
   components: {
+    WaterNote,
     WatchAlarmBar,
     WaterCountByAreaBar,
     WaterCountByDay,
     WaterCountByDeptBar,
-    WaterCountByDepy,
+    WaterCountByDept,
     JobByStatus,
     AlarmByDays,
     PanelGroup,
@@ -108,12 +112,25 @@
       state.needRefresh = needRefresh
     }
   },
+  data(){
+    return {
+      listQuery1:{
+        areaId:'110000',
+        startTime:new Date().Format('yyyy-MM-dd'),
+        endTime:new Date().Format('yyyy-MM-dd')
+      },// 分区用水量查询条件
+      listQuery2:{
+        areaId:'',
+        startTime:'',
+        endTime:''
+      } // 分区报警查询条件
+    }
+  },
   watch: {
     needRefresh(val) {
       // 需要刷新
       if (val) {
         console.log('refresh dashboard')
-        debugger
         this.$refs.panelgroup.refresh()
       }
     }
@@ -124,6 +141,10 @@
   methods: {
     webSocket() {
       this.$store.dispatch('initWebSocket')
+    },
+    // 切换分区查询条件
+    changeWaterQuery(listQuery1){
+      this.listQuery1 = listQuery1
     }
   }
 }
diff --git a/src/views/dashboard/index_bak.vue b/src/views/dashboard/index_bak.vue
new file mode 100644
index 0000000..fdbc38a
--- /dev/null
+++ b/src/views/dashboard/index_bak.vue
@@ -0,0 +1,149 @@
+<template>
+  <div class="dashboard-container" style="background-color: white">
+    <panel-group ref="panelgroup"/>
+    <el-row :gutter="10">
+      <!-- 用水统计图 -->
+      <el-col :span="12">
+        <el-card shadow="never">
+          <water-count-by-dept-bar/>
+        </el-card>
+      </el-col>
+      <!-- 用水走势图 -->
+      <el-col :span="12">
+        <el-card shadow="never">
+          <water-count-by-day/>
+        </el-card>
+      </el-col>
+      <!-- 分区用水统计图 -->
+      <el-col :span="12">
+        <el-card shadow="never">
+          <water-count-by-area-bar/>
+        </el-card>
+      </el-col>
+      <!-- 分区用水占比图 -->
+      <el-col :span="12">
+        <el-card shadow="never">
+          <water-count-by-depy/>
+        </el-card>
+      </el-col>
+      <!--水表报警次数统计-->
+      <el-col v-if="hasPerm('/statics/alarmsByDay')" :span="12">
+        <el-card shadow="never">
+          <watch-alarm-bar/>
+        </el-card>
+      </el-col>
+      <!--报警次数统计-->
+      <el-col v-if="hasPerm('/statics/alarmsByDay')" :span="12">
+        <el-card shadow="never">
+          <alarm-by-days/>
+        </el-card>
+      </el-col>
+      <!--设备在线数量统计-->
+      <el-col v-if="hasPerm('/statics/deviceStaticsByType')" :span="12">
+        <el-card shadow="never">
+          <device-count-by-online/>
+        </el-card>
+      </el-col>
+
+      <!--设备数量统计-->
+      <el-col v-if="hasPerm('/statics/deviceStaticsByType')" :span="12">
+        <el-card shadow="never">
+          <device-count/>
+        </el-card>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+import PanelGroup from './components/PanelGroup'
+import WellCountByBfzt from './components/WellCountByBfzt'
+import WellCountByType from './components/WellCountByType'
+import DeviceCount from './components/DeviceCount'
+import DeviceCountByOnline from './components/DeviceCountByOnline'
+import AlarmByDays from './components/AlarmByDays'
+import JobByStatus from './components/JobByStatus'
+import WaterCountByDepy from './components/waterCountByDept'
+import WaterCountByDeptBar from './components/waterCountByDeptBar'
+import WaterCountByDay from './components/waterCountByDay'
+import WaterCountByAreaBar from "./components/waterCountByAreaBar";
+import WatchAlarmBar from "./components/watchAlarmBar";
+
+export default {
+  name: 'Dashboard',
+  components: {
+    WatchAlarmBar,
+    WaterCountByAreaBar,
+    WaterCountByDay,
+    WaterCountByDeptBar,
+    WaterCountByDepy,
+    JobByStatus,
+    AlarmByDays,
+    PanelGroup,
+    WellCountByBfzt,
+    WellCountByType,
+    DeviceCount,
+    DeviceCountByOnline
+  },
+  computed: {
+    ...mapGetters([
+      'name',
+      'roleNames',
+      'roleTips',
+      'wellTypes',
+      'deviceTypes',
+      'communications',
+      'area'
+    ])
+  },
+  mutations: {
+    SET_WEBSOCKET: (state, websocket) => {
+      state.websocket = websocket
+    },
+    SET_WS_STATUS: (state, wsStatus) => {
+      state.wsStatus = wsStatus
+    },
+    SET_NEED_REFRESH: (state, needRefresh) => {
+      state.needRefresh = needRefresh
+    }
+  },
+  watch: {
+    needRefresh(val) {
+      // 需要刷新
+      if (val) {
+        console.log('refresh dashboard')
+        debugger
+        this.$refs.panelgroup.refresh()
+      }
+    }
+  },
+  mounted() {
+    // this.webSocket()
+  },
+  methods: {
+    webSocket() {
+      this.$store.dispatch('initWebSocket')
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.dashboard-container{
+  .el-row{
+    .el-col{
+      margin-bottom: 10px;
+    }
+  }
+}
+.dashboard {
+  &-container {
+    padding: 10px 20px;
+  }
+  &-text {
+    font-size: 30px;
+    line-height: 46px;
+  }
+}
+</style>
diff --git a/src/views/layout/Layout.vue b/src/views/layout/Layout.vue
deleted file mode 100644
index 7c3d46d..0000000
--- a/src/views/layout/Layout.vue
+++ /dev/null
@@ -1,111 +0,0 @@
-<template>
-  <el-container :class="classObj" class="app-wrapper">
-    <div v-if="device==='mobile'&&sidebar.opened" class="drawer-bg" @click="handleClickOutside"/>
-    <app-header class="app-header"/>
-    <el-main class="app-body">
-      <!--侧边栏-->
-      <sidebar class="sidebar-container"/>
-      <!--右半部分-->
-      <div :class="{hasTagsView:needTagsView}" class="main-container">
-        <!--开启固定头部设置-->
-        <div v-if="fixedHeader">
-          <!--导航(面包屑)-->
-          <navbar/>
-          <!--标签栏-->
-          <tags-view v-if="needTagsView" />
-          <!--主内容包裹在el-scrollbar中-->
-          <el-scrollbar class="no-head-scrollbar">
-            <app-main/>
-          </el-scrollbar>
-        </div>
-        <!--为开始固定头部设置-->
-        <div v-else>
-          <!--导航，tagsView都包裹在el-scrollbar中-->
-          <el-scrollbar class="has-head-scrollbar">
-            <navbar/>
-            <tags-view v-if="needTagsView" />
-            <app-main/>
-          </el-scrollbar>
-        </div>
-        <!--悬浮框-->
-        <right-panel v-if="false">
-          <settings />
-        </right-panel>
-      </div>
-    </el-main>
-  </el-container>
-</template>
-
-<script>
-import RightPanel from '@/components/RightPanel'
-import { AppHeader, Navbar, Sidebar, AppMain } from './components'
-import ResizeMixin from './mixin/ResizeHandler'
-import TagsView from './components/TagsView/index'
-import { mapState } from 'vuex'
-import Settings from './components/Settings/index'
-
-export default {
-  name: 'Layout',
-  components: {
-    Settings,
-    TagsView,
-    AppHeader,
-    Navbar,
-    Sidebar,
-    AppMain,
-    RightPanel
-  },
-  mixins: [ResizeMixin],
-  computed: {
-    ...mapState({
-      sidebar: state => state.app.sidebar,
-      device: state => state.app.device,
-      showSettings: state => state.settings.showSettings,
-      needTagsView: state => state.settings.tagsView,
-      fixedHeader: state => state.settings.fixedHeader
-    }),
-    classObj() {
-      return {
-        hideSidebar: !this.sidebar.opened,
-        openSidebar: this.sidebar.opened,
-        withoutAnimation: this.sidebar.withoutAnimation,
-        mobile: this.device === 'mobile'
-      }
-    }
-  },
-  methods: {
-    handleClickOutside() {
-      this.$store.dispatch('CloseSideBar', { withoutAnimation: false })
-    }
-  }
-}
-</script>
-
-<style rel="stylesheet/scss" lang="scss" scoped>
-  @import "src/styles/mixin.scss";
-  .app-wrapper {
-    @include clearfix;
-    position: relative;
-    height: 100%;
-    width: 100%;
-    &.mobile.openSidebar{
-      position: fixed;
-      top: 0;
-    }
-  }
-  .drawer-bg {
-    background: #000;
-    opacity: 0.3;
-    width: 100%;
-    top: 0;
-    height: 100%;
-    position: absolute;
-    z-index: 999;
-  }
-  /*.el-scrollbar{*/
-    /*height: calc(100vh - 50px);*/
-  /*}*/
-  .has-head-scrollbar{
-    height: 100vh;
-  }
-</style>
diff --git a/src/views/layout/components/AppHeader.vue b/src/views/layout/components/AppHeader.vue
deleted file mode 100644
index 8d8912e..0000000
--- a/src/views/layout/components/AppHeader.vue
+++ /dev/null
@@ -1,151 +0,0 @@
-<template>
-  <el-header class="app-header">
-    <h3>{{ title }}</h3>
-    <!--子系统选项-->
-    <el-dropdown v-if="showChangeSys" class="systemSelect" size="medium" @command="handleCommand">
-      <span class="el-dropdown-link">{{ currentSystem.name }}<i class="el-icon-arrow-down el-icon--right"/>
-      </span>
-      <el-dropdown-menu slot="dropdown">
-        <el-dropdown-item v-for="system in systems" :command="system" :key="system.id">{{ system.name }}</el-dropdown-item>
-      </el-dropdown-menu>
-    </el-dropdown>
-    <el-dropdown class="dropdown-container" trigger="click">
-      <div class="dropdown-wrapper">
-        <span style="line-height:50px;">欢迎您，{{ name }}</span>
-        <!--<img :src="avatar+'?imageView2/1/w/80/h/80'" class="user-avatar">-->
-        <i class="el-icon-arrow-down"/>
-      </div>
-      <el-dropdown-menu slot="dropdown" class="user-dropdown">
-        <el-dropdown-item v-if="!baseConfig.singleSys">
-          <span style="display:block;" @click="backToIndex">回首页</span>
-        </el-dropdown-item>
-        <el-dropdown-item :divided="!baseConfig.singleSys">
-          <span style="display:block;" @click="resetPwd">修改密码</span>
-        </el-dropdown-item>
-        <el-dropdown-item divided>
-          <span style="display:block;" @click="logout">注销</span>
-        </el-dropdown-item>
-      </el-dropdown-menu>
-    </el-dropdown>
-    <reset-pwd v-show="showSetPwd" ref="retPwd"/>
-  </el-header>
-</template>
-
-<script>
-import { mapGetters } from 'vuex'
-import ResetPwd from '@/views/system/user/resetPwd'
-
-export default {
-  name: 'AppHeader',
-  components: { ResetPwd },
-  data() {
-    return {
-      title: this.baseConfig.title, // 标题
-      showChangeSys: !this.baseConfig.singleSys, // 是否显示切换系统菜单
-      name: this.$store.getters.name, // 用户姓名
-      showSetPwd: false // 是否显示修改密码按钮
-    }
-  },
-  computed: {
-    ...mapGetters([
-      'sidebar',
-      'avatar',
-      'currentSystem',
-      'systems'
-    ])
-  },
-  created() {
-    if (!this.baseConfig.singleSys) {
-      this.getSystems()
-    }
-  },
-  methods: {
-    toggleSideBar() {
-      this.$store.dispatch('ToggleSideBar')
-    },
-    logout() {
-      this.$store.dispatch('LogOut').then(() => {
-        location.reload() // 为了重新实例化vue-router对象 避免bug
-      })
-    },
-    resetPwd() {
-      this.showSetPwd = true
-      this.$refs.retPwd.initDialog(true)
-    },
-    backToIndex() {
-      const url = this.baseConfig.mainPage
-      window.location.href = url
-    },
-    // 切换子系统
-    handleCommand(command) {
-      console.log('切换子系统:' + command.name)
-      const params1 = `?token=${this.$store.getters.token}`
-      const params = `?sys=${command.name}&url=${command.url}&code=${command.code}&token=${this.$store.getters.token}`
-      // 判断系统是不是http的，如果是则打开新窗口
-      if (command.url.indexOf('http') > -1) {
-      // 取token
-        if (this.baseConfig.sameWindow) {
-          window.location.href = command.url + params1
-        } else {
-          window.open(command.url + params1, '_blank')
-        }
-      } else {
-      // 取token
-        if (this.baseConfig.sameWindow) {
-          window.location.href = this.baseConfig.mainPage + command.url + params
-        } else {
-          window.open(this.baseConfig.mainPage + command.url + params, '_blank')
-        }
-      }
-    },
-    // 获取子系统
-    getSystems() {
-      this.$store.dispatch('GetSystems').then(() => {
-        console.log('获取子系统列表成功-appHeader')
-      })
-    }
-  }
-}
-</script>
-
-<style rel="stylesheet/scss" lang="scss" scoped>
-  h3{
-    margin-left:24px;
-    display: inline-block;
-    float:left;
-  }
-  .dropdown-container {
-    /*height: 50px;*/
-    display: inline-block;
-    float: right;
-    z-index:500;
-    position: fixed;
-    top:0px;
-    right: 35px;
-    .dropdown-wrapper {
-      cursor: pointer;
-      margin-top: 5px;
-      position: relative;
-      line-height: initial;
-      .user-avatar {
-        width: 40px;
-        height: 40px;
-        border-radius: 10px;
-      }
-      .el-icon-caret-bottom {
-        font-size: 12px;
-      }
-    }
-  }
-  .systemSelect{
-    height: 56px;
-    display: inline-block;
-    float: left;
-    z-index:500;
-    position: fixed;
-    margin-left:60px;
-    top:5px;
-    color:#fff;
-    line-height: 56px;
-  }
-</style>
diff --git a/src/views/layout/components/AppMain.vue b/src/views/layout/components/AppMain.vue
deleted file mode 100644
index 2ea268e..0000000
--- a/src/views/layout/components/AppMain.vue
+++ /dev/null
@@ -1,38 +0,0 @@
-<template>
-  <section class="app-main">
-    <transition name="fade-transform" mode="out-in">
-      <!-- or name="fade" -->
-      <!-- <router-view :key="key"></router-view> -->
-      <div>
-        <keep-alive>
-          <router-view v-if="$route.meta.keepAlive" :key="key"/>
-        </keep-alive>
-        <router-view v-if="!$route.meta.keepAlive" :key="key"/>
-      </div>
-    </transition>
-  </section>
-</template>
-
-<script>
-export default {
-  name: 'AppMain',
-  computed: {
-    key() {
-      if (this.$route.meta.keepAlive) {
-        return this.$route.name !== undefined ? this.$route.name : this.$route
-      } else {
-        return this.$route.name !== undefined ? this.$route.name + new Date() : this.$route + new Date()
-      }
-    }
-  }
-}
-</script>
-
-<style scoped>
-.app-main {
-  /*50 = navbar  */
-  /*min-height: calc(100vh - 50px);*/
-  position: relative;
-  overflow: hidden;
-}
-</style>
diff --git a/src/views/layout/components/Navbar.vue b/src/views/layout/components/Navbar.vue
deleted file mode 100644
index 24ea99b..0000000
--- a/src/views/layout/components/Navbar.vue
+++ /dev/null
@@ -1,78 +0,0 @@
-<template>
-  <div class="navbar">
-    <hamburger :toggle-click="toggleSideBar" :is-active="sidebar.opened" class="hamburger-container"/>
-    <breadcrumb />
-  </div>
-</template>
-
-<script>
-import { mapGetters } from 'vuex'
-import Breadcrumb from '@/components/Breadcrumb'
-import Hamburger from '@/components/Hamburger'
-
-export default {
-  components: {
-    Breadcrumb,
-    Hamburger
-  },
-  computed: {
-    ...mapGetters([
-      'sidebar'
-    ])
-  },
-  methods: {
-    toggleSideBar() {
-      this.$store.dispatch('ToggleSideBar')
-    },
-    logout() {
-      this.$store.dispatch('LogOut').then(() => {
-        location.reload() // 为了重新实例化vue-router对象 避免bug
-      })
-    }
-  }
-}
-</script>
-
-<style rel="stylesheet/scss" lang="scss" scoped>
-.navbar {
-  height: 50px;
-  line-height: 50px;
-  box-shadow: 0 1px 3px 0 rgba(0,0,0,.12), 0 0 3px 0 rgba(0,0,0,.04);
-  .hamburger-container {
-    text-align: center;
-    height: 50px;
-    float: left;
-    padding: 0 12px;
-  }
-  .screenfull {
-    position: absolute;
-    right: 90px;
-    top: 16px;
-    color: red;
-  }
-  .avatar-container {
-    height: 50px;
-    display: inline-block;
-    position: absolute;
-    right: 35px;
-    .avatar-wrapper {
-      cursor: pointer;
-      margin-top: 5px;
-      position: relative;
-      line-height: initial;
-      .user-avatar {
-        width: 40px;
-        height: 40px;
-        border-radius: 10px;
-      }
-      .el-icon-caret-bottom {
-        position: absolute;
-        right: -20px;
-        top: 25px;
-        font-size: 12px;
-      }
-    }
-  }
-}
-</style>
-
diff --git a/src/views/layout/components/Settings/index.vue b/src/views/layout/components/Settings/index.vue
deleted file mode 100644
index cf3023d..0000000
--- a/src/views/layout/components/Settings/index.vue
+++ /dev/null
@@ -1,109 +0,0 @@
-<template>
-  <div class="drawer-container">
-    <div>
-      <h3 class="drawer-title">Page style setting</h3>
-
-      <div class="drawer-item">
-        <span>Theme Color</span>
-        <theme-picker style="float: right;height: 26px;margin: -3px 8px 0 0;" @change="themeChange" />
-      </div>
-
-      <div class="drawer-item">
-        <span>Open Tags-View</span>
-        <el-switch v-model="tagsView" class="drawer-switch" />
-      </div>
-
-      <div class="drawer-item">
-        <span>Fixed Header</span>
-        <el-switch v-model="fixedHeader" class="drawer-switch" />
-      </div>
-
-      <div class="drawer-item">
-        <span>Sidebar Logo</span>
-        <el-switch v-model="sidebarLogo" class="drawer-switch" />
-      </div>
-
-    </div>
-  </div>
-</template>
-
-<script>
-import ThemePicker from '@/components/ThemePicker'
-
-export default {
-  name: 'Settings',
-  components: { ThemePicker },
-  data() {
-    return {}
-  },
-  computed: {
-    fixedHeader: {
-      get() {
-        return this.$store.state.settings.fixedHeader
-      },
-      set(val) {
-        this.$store.dispatch('settings/changeSetting', {
-          key: 'fixedHeader',
-          value: val
-        })
-      }
-    },
-    tagsView: {
-      get() {
-        return this.$store.state.settings.tagsView
-      },
-      set(val) {
-        this.$store.dispatch('settings/changeSetting', {
-          key: 'tagsView',
-          value: val
-        })
-      }
-    },
-    sidebarLogo: {
-      get() {
-        return this.$store.state.settings.sidebarLogo
-      },
-      set(val) {
-        this.$store.dispatch('settings/changeSetting', {
-          key: 'sidebarLogo',
-          value: val
-        })
-      }
-    }
-  },
-  methods: {
-    themeChange(val) {
-      this.$store.dispatch('settings/changeSetting', {
-        key: 'theme',
-        value: val
-      })
-    }
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-.drawer-container {
-  padding: 24px;
-  font-size: 14px;
-  line-height: 1.5;
-  word-wrap: break-word;
-
-  .drawer-title {
-    margin-bottom: 12px;
-    color: rgba(0, 0, 0, .85);
-    font-size: 14px;
-    line-height: 22px;
-  }
-
-  .drawer-item {
-    color: rgba(0, 0, 0, .65);
-    font-size: 14px;
-    padding: 12px 0;
-  }
-
-  .drawer-switch {
-    float: right
-  }
-}
-</style>
diff --git a/src/views/layout/components/Sidebar/Item.vue b/src/views/layout/components/Sidebar/Item.vue
deleted file mode 100644
index 4ed6b5f..0000000
--- a/src/views/layout/components/Sidebar/Item.vue
+++ /dev/null
@@ -1,31 +0,0 @@
-<script>
-export default {
-  name: 'MenuItem',
-  functional: true,
-  props: {
-    icon: {
-      type: String,
-      default: ''
-    },
-    title: {
-      type: String,
-      default: ''
-    }
-  },
-  render(h, context) {
-    const { icon, title } = context.props
-    const vnodes = []
-
-    if (icon) {
-      vnodes.push(<svg-icon icon-class={icon}/>)
-    } else {
-      vnodes.push(<span style='display:inline-block;width:30px;'></span>)
-    }
-
-    if (title) {
-      vnodes.push(<span slot='title'>{(title)}</span>)
-    }
-    return vnodes
-  }
-}
-</script>
diff --git a/src/views/layout/components/Sidebar/Link.vue b/src/views/layout/components/Sidebar/Link.vue
deleted file mode 100644
index bff45cd..0000000
--- a/src/views/layout/components/Sidebar/Link.vue
+++ /dev/null
@@ -1,36 +0,0 @@
-
-<template>
-  <!-- eslint-disable vue/require-component-is -->
-  <component v-bind="linkProps(to)">
-    <slot/>
-  </component>
-</template>
-
-<script>
-import { isExternal } from '@/utils/validate'
-
-export default {
-  props: {
-    to: {
-      type: String,
-      required: true
-    }
-  },
-  methods: {
-    linkProps(url) {
-      if (isExternal(url)) {
-        return {
-          is: 'a',
-          href: url,
-          target: '_blank',
-          rel: 'noopener'
-        }
-      }
-      return {
-        is: 'router-link',
-        to: url
-      }
-    }
-  }
-}
-</script>
diff --git a/src/views/layout/components/Sidebar/SidebarItem.vue b/src/views/layout/components/Sidebar/SidebarItem.vue
deleted file mode 100644
index 988d662..0000000
--- a/src/views/layout/components/Sidebar/SidebarItem.vue
+++ /dev/null
@@ -1,107 +0,0 @@
-<template>
-  <div v-if="!item.hidden&&item.children" class="menu-wrapper">
-
-    <template v-if="hasOneShowingChild(item.children,item) && (!onlyOneChild.children||onlyOneChild.noShowingChildren)&&!item.alwaysShow">
-      <a :href="onlyOneChild.path" target="_blank" @click="clickLink(onlyOneChild.path,$event)">
-        <el-menu-item :index="resolvePath(onlyOneChild.path)" :class="{'submenu-title-noDropdown':!isNest}">
-          <item v-if="onlyOneChild.meta" :icon="onlyOneChild.meta.icon||item.meta.icon" :title="onlyOneChild.meta.title" />
-        </el-menu-item>
-      </a>
-    </template>
-
-    <el-submenu v-else :index="item.name||item.path">
-      <template slot="title">
-        <item v-if="item.meta" :icon="item.meta.icon" :title="item.meta.title" />
-      </template>
-
-      <template v-for="child in item.children" v-if="!child.hidden">
-        <sidebar-item
-          v-if="child.children&&child.children.length>0"
-          :is-nest="true"
-          :item="child"
-          :key="child.path"
-          :base-path="resolvePath(child.path)"
-          class="nest-menu" />
-
-        <a v-else :href="child.path" :key="child.name" target="_blank" @click="clickLink(child.path,$event)">
-          <el-menu-item :index="resolvePath(child.path)">
-            <span class="light-line"/>
-            <item v-if="child.meta" :icon="child.meta.icon" :title="child.meta.title" />
-          </el-menu-item>
-        </a>
-      </template>
-    </el-submenu>
-
-  </div>
-</template>
-
-<script>
-import path from 'path'
-import { validateURL } from '@/utils/validate'
-import Item from './Item'
-
-export default {
-  name: 'SidebarItem',
-  components: { Item },
-  props: {
-    // route object
-    item: {
-      type: Object,
-      required: true
-    },
-    isNest: {
-      type: Boolean,
-      default: false
-    },
-    basePath: {
-      type: String,
-      default: ''
-    }
-  },
-  data() {
-    return {
-      onlyOneChild: null
-    }
-  },
-  methods: {
-    hasOneShowingChild(children, parent) {
-      const showingChildren = children.filter(item => {
-        if (item.hidden) {
-          return false
-        } else {
-          // Temp set(will be used if only has one showing child)
-          this.onlyOneChild = item
-          return true
-        }
-      })
-
-      // When there is only one child router, the child router is displayed by default
-      if (showingChildren.length === 1) {
-        return true
-      }
-
-      // Show parent if there are no child router to display
-      if (showingChildren.length === 0) {
-        this.onlyOneChild = { ... parent, path: '', noShowingChildren: true }
-        return true
-      }
-
-      return false
-    },
-    resolvePath(routePath) {
-      return path.resolve(this.basePath, routePath)
-    },
-    isExternalLink(routePath) {
-      return validateURL(routePath)
-    },
-    clickLink(routePath, e) {
-      if (!this.isExternalLink(routePath)) {
-        e.preventDefault()
-        const path = this.resolvePath(routePath)
-        this.$router.push({ path, query: { t: +new Date() }})
-        // this.$router.push(path)
-      }
-    }
-  }
-}
-</script>
diff --git a/src/views/layout/components/Sidebar/index.vue b/src/views/layout/components/Sidebar/index.vue
deleted file mode 100644
index 33d596a..0000000
--- a/src/views/layout/components/Sidebar/index.vue
+++ /dev/null
@@ -1,39 +0,0 @@
-<template>
-  <el-scrollbar wrap-class="scrollbar-wrapper">
-    <el-menu
-      :show-timeout="200"
-      :default-active="activeMenu"
-      :collapse="isCollapse"
-      mode="vertical"
-    >
-      <sidebar-item v-for="route in permission_routers" :key="route.name" :item="route" :base-path="route.path"/>
-    </el-menu>
-  </el-scrollbar>
-</template>
-
-<script>
-import { mapGetters } from 'vuex'
-import SidebarItem from './SidebarItem'
-
-export default {
-  components: { SidebarItem },
-  computed: {
-    ...mapGetters([
-      'permission_routers',
-      'sidebar'
-    ]),
-    activeMenu() {
-      const route = this.$route
-      const { meta, path } = route
-      // 如果meta中上设置activeMenu，按照meta中设置高亮
-      if (meta.activeMenu) {
-        return meta.activeMenu
-      }
-      return path
-    },
-    isCollapse() {
-      return !this.sidebar.opened
-    }
-  }
-}
-</script>
diff --git a/src/views/layout/components/TagsView/ScrollPane.vue b/src/views/layout/components/TagsView/ScrollPane.vue
deleted file mode 100644
index 0ec76e7..0000000
--- a/src/views/layout/components/TagsView/ScrollPane.vue
+++ /dev/null
@@ -1,85 +0,0 @@
-<template>
-  <el-scrollbar ref="scrollContainer" :vertical="false" class="scroll-container" @wheel.native.prevent="handleScroll">
-    <slot />
-  </el-scrollbar>
-</template>
-
-<script>
-const tagAndTagSpacing = 4 // tagAndTagSpacing
-
-export default {
-  name: 'ScrollPane',
-  data() {
-    return {
-      left: 0
-    }
-  },
-  computed: {
-    scrollWrapper() {
-      return this.$refs.scrollContainer.$refs.wrap
-    }
-  },
-  methods: {
-    handleScroll(e) {
-      const eventDelta = e.wheelDelta || -e.deltaY * 40
-      const $scrollWrapper = this.scrollWrapper
-      $scrollWrapper.scrollLeft = $scrollWrapper.scrollLeft + eventDelta / 4
-    },
-    moveToTarget(currentTag) {
-      const $container = this.$refs.scrollContainer.$el
-      const $containerWidth = $container.offsetWidth
-      const $scrollWrapper = this.scrollWrapper
-      const tagList = this.$parent.$refs.tag
-
-      let firstTag = null
-      let lastTag = null
-
-      // find first tag and last tag
-      if (tagList.length > 0) {
-        firstTag = tagList[0]
-        lastTag = tagList[tagList.length - 1]
-      }
-
-      if (firstTag === currentTag) {
-        $scrollWrapper.scrollLeft = 0
-      } else if (lastTag === currentTag) {
-        $scrollWrapper.scrollLeft = $scrollWrapper.scrollWidth - $containerWidth
-      } else {
-        // find preTag and nextTag
-        const currentIndex = tagList.findIndex(item => item === currentTag)
-        const prevTag = tagList[currentIndex - 1]
-        const nextTag = tagList[currentIndex + 1]
-
-        // the tag's offsetLeft after of nextTag
-        const afterNextTagOffsetLeft = nextTag.$el.offsetLeft + nextTag.$el.offsetWidth + tagAndTagSpacing
-
-        // the tag's offsetLeft before of prevTag
-        const beforePrevTagOffsetLeft = prevTag.$el.offsetLeft - tagAndTagSpacing
-
-        if (afterNextTagOffsetLeft > $scrollWrapper.scrollLeft + $containerWidth) {
-          $scrollWrapper.scrollLeft = afterNextTagOffsetLeft - $containerWidth
-        } else if (beforePrevTagOffsetLeft < $scrollWrapper.scrollLeft) {
-          $scrollWrapper.scrollLeft = beforePrevTagOffsetLeft
-        }
-      }
-    }
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-.scroll-container {
-  white-space: nowrap;
-  position: relative;
-  overflow: hidden;
-  width: 100%;
-  /deep/ {
-    .el-scrollbar__bar {
-      bottom: 0px;
-    }
-    .el-scrollbar__wrap {
-      height: 49px;
-    }
-  }
-}
-</style>
diff --git a/src/views/layout/components/TagsView/index.vue b/src/views/layout/components/TagsView/index.vue
deleted file mode 100644
index 5839f2d..0000000
--- a/src/views/layout/components/TagsView/index.vue
+++ /dev/null
@@ -1,287 +0,0 @@
-<template>
-  <div id="tags-view-container" class="tags-view-container">
-    <scroll-pane ref="scrollPane" class="tags-view-wrapper">
-      <router-link
-        v-for="tag in visitedViews"
-        ref="tag"
-        :key="tag.path"
-        :class="isActive(tag)?'active':''"
-        :to="{ path: tag.path, query: tag.query, fullPath: tag.fullPath }"
-        tag="span"
-        class="tags-view-item"
-        @click.middle.native="closeSelectedTag(tag)"
-        @contextmenu.prevent.native="openMenu(tag,$event)"
-      >
-        {{ tag.title }}
-        <span v-if="(!tag.meta.affix)&&(visitedViews.length!=1)" class="el-icon-close" @click.prevent.stop="closeSelectedTag(tag)" />
-      </router-link>
-    </scroll-pane>
-    <ul v-show="visible" :style="{left:left+'px',top:top+'px'}" class="contextmenu">
-      <li @click="refreshSelectedTag(selectedTag)">刷新页面</li>
-      <li v-if="!(selectedTag.meta&&selectedTag.meta.affix)" @click="closeSelectedTag(selectedTag)">关闭当前标签页</li>
-      <li @click="closeOthersTags">关闭其他标签页</li>
-      <li @click="closeAllTags(selectedTag)">关闭全部标签页</li>
-    </ul>
-  </div>
-</template>
-
-<script>
-import ScrollPane from './ScrollPane'
-import path from 'path'
-
-export default {
-  name: 'TagsView',
-  components: { ScrollPane },
-  data() {
-    return {
-      visible: false,
-      top: 0,
-      left: 0,
-      selectedTag: {},
-      affixTags: []
-    }
-  },
-  computed: {
-    visitedViews() {
-      return this.$store.state.tagsView.visitedViews
-    },
-    routes() {
-      return this.$store.state.permission.routers
-    }
-  },
-  watch: {
-    $route() {
-      this.addTags()
-      this.moveToCurrentTag()
-    },
-    visible(value) {
-      if (value) {
-        document.body.addEventListener('click', this.closeMenu)
-      } else {
-        document.body.removeEventListener('click', this.closeMenu)
-      }
-    }
-  },
-  mounted() {
-    this.initTags()
-    this.addTags()
-  },
-  methods: {
-    isActive(route) {
-      return route.path === this.$route.path
-    },
-    filterAffixTags(routes, basePath = '/') {
-      let tags = []
-      routes.forEach(route => {
-        if (route.meta && route.meta.affix) {
-          const tagPath = path.resolve(basePath, route.path)
-          tags.push({
-            fullPath: tagPath,
-            path: tagPath,
-            name: route.name,
-            meta: { ...route.meta }
-          })
-        }
-        if (route.children) {
-          const tempTags = this.filterAffixTags(route.children, route.path)
-          if (tempTags.length >= 1) {
-            tags = [...tags, ...tempTags]
-          }
-        }
-      })
-      return tags
-    },
-    initTags() {
-      const affixTags = this.affixTags = this.filterAffixTags(this.routes)
-      for (const tag of affixTags) {
-        // Must have tag name
-        if (tag.name) {
-          this.$store.dispatch('tagsView/addVisitedView', tag)
-        }
-      }
-    },
-    addTags() {
-      const { name } = this.$route
-      if (name) {
-        this.$store.dispatch('tagsView/addView', this.$route)
-      }
-      return false
-    },
-    moveToCurrentTag() {
-      const tags = this.$refs.tag
-      this.$nextTick(() => {
-        for (const tag of tags) {
-          if (tag.to.path === this.$route.path) {
-            this.$refs.scrollPane.moveToTarget(tag)
-            // when query is different then update
-            if (tag.to.fullPath !== this.$route.fullPath) {
-              this.$store.dispatch('tagsView/updateVisitedView', this.$route)
-            }
-            break
-          }
-        }
-      })
-    },
-    refreshSelectedTag(view) {
-      this.$store.dispatch('tagsView/delCachedView', view).then(() => {
-        const { fullPath } = view
-        this.$nextTick(() => {
-          this.$router.replace({
-            path: '/redirect' + fullPath
-          })
-        })
-      })
-    },
-    closeSelectedTag(view) {
-      this.$store.dispatch('tagsView/delView', view).then(({ visitedViews }) => {
-        if (this.isActive(view)) {
-          this.toLastView(visitedViews, view)
-        }
-      })
-    },
-    closeOthersTags() {
-      this.$router.push(this.selectedTag)
-      this.$store.dispatch('tagsView/delOthersViews', this.selectedTag).then(() => {
-        this.moveToCurrentTag()
-      })
-    },
-    closeAllTags(view) {
-      this.$store.dispatch('tagsView/delAllViews').then(({ visitedViews }) => {
-        if (this.affixTags.some(tag => tag.path === view.path)) {
-          return
-        }
-        this.toLastView(visitedViews, view)
-      })
-    },
-    toLastView(visitedViews, view) {
-      const latestView = visitedViews.slice(-1)[0]
-      if (latestView) {
-        this.$router.push(latestView)
-      } else {
-        // now the default is to redirect to the home page if there is no tags-view,
-        // you can adjust it according to your needs.
-        if (view.name === 'Dashboard') {
-          // to reload home page
-          this.$router.replace({ path: '/redirect' + view.fullPath })
-        } else {
-          this.$router.push('/')
-        }
-      }
-    },
-    openMenu(tag, e) {
-      const menuMinWidth = 105
-      const offsetLeft = this.$el.getBoundingClientRect().left // container margin left
-      const offsetWidth = this.$el.offsetWidth // container width
-      const maxLeft = offsetWidth - menuMinWidth // left boundary
-      const left = e.clientX - offsetLeft + 15 // 15: margin right
-
-      if (left > maxLeft) {
-        this.left = maxLeft
-      } else {
-        this.left = left
-      }
-
-      this.top = e.clientY - 40
-      this.visible = true
-      this.selectedTag = tag
-    },
-    closeMenu() {
-      this.visible = false
-    }
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-  .tags-view-container {
-    height: 34px;
-    width: 100%;
-    background: #fff;
-    border-bottom: 1px solid #d8dce5;
-    /*box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .12), 0 0 3px 0 rgba(0, 0, 0, .04);*/
-    .tags-view-wrapper {
-      .tags-view-item {
-        display: inline-block;
-        position: relative;
-        cursor: pointer;
-        height: 26px;
-        line-height: 26px;
-        border: 1px solid #d8dce5;
-        color: #495060;
-        background: #fff;
-        padding: 0 8px;
-        font-size: 12px;
-        margin-left: 5px;
-        margin-top: 4px;
-        &:first-of-type {
-          margin-left: 12px;
-        }
-        &:last-of-type {
-          margin-right: 15px;
-        }
-        &.active {
-          /*background-color: #42b983;*/
-          /*color: #fff;*/
-          /*border-color: #42b983;*/
-          &::before {
-            content: '';
-            background: #fff;
-            display: inline-block;
-            width: 8px;
-            height: 8px;
-            border-radius: 50%;
-            position: relative;
-            margin-right: 2px;
-          }
-        }
-      }
-    }
-    .contextmenu {
-      margin: 0;
-      background: #fff;
-      z-index: 3000;
-      position: absolute;
-      list-style-type: none;
-      padding: 5px 0;
-      border-radius: 4px;
-      font-size: 12px;
-      font-weight: 400;
-      color: #333;
-      box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, .3);
-      li {
-        margin: 0;
-        padding: 7px 16px;
-        cursor: pointer;
-        &:hover {
-          background: #eee;
-        }
-      }
-    }
-  }
-</style>
-
-<style lang="scss">
-  //reset element css of el-icon-close
-  .tags-view-wrapper {
-    .tags-view-item {
-      .el-icon-close {
-        width: 16px;
-        height: 16px;
-        vertical-align: 2px;
-        border-radius: 50%;
-        text-align: center;
-        transition: all .3s cubic-bezier(.645, .045, .355, 1);
-        transform-origin: 100% 50%;
-        &:before {
-          transform: scale(.6);
-          display: inline-block;
-          vertical-align: -3px;
-        }
-        &:hover {
-          background-color: #b4bccc;
-          color: #fff;
-        }
-      }
-    }
-  }
-</style>

diff --git a/src/api/dashboard.js b/src/api/dashboard.js
index e69de29..0a4ddfc 100644
--- a/src/api/dashboard.js
+++ b/src/api/dashboard.js
@@ -0,0 +1,73 @@
+/**
+ * 井总览模块接口
+ */
+import request from '@/utils/request'
+
+// 用水量、噪声统计数据
+export function getWatchStatistic() {
+  return request({
+    url: 'waterStatistic/overview',
+    method: 'get'
+  })
+}
+// 水表数量
+export function waterMeterCount() {
+  return request({
+    url: 'waterMeterData/count',
+    method: 'get'
+  })
+}
+// 阀门数量
+export function valveCount() {
+  return request({
+    url: 'waterMeterData/count',
+    method: 'get'
+  })
+}
+
+// 查询一级分区各区用水量
+export function countByFirstArea(params) {
+  return request({
+    url: 'waterStatistic/countByFirstArea',
+    method: 'get',
+    params
+  })
+}
+
+// 查询一级分区7日用水量
+export function countByDayFirst(params) {
+  return request({
+    url: 'waterStatistic/countByDayFirst',
+    method: 'get',
+    params
+  })
+}
+
+// 查询二级分区各区用水量
+export function countBySecondArea(params) {
+  return request({
+    url: 'waterStatistic/countBySecondArea',
+    method: 'get',
+    params
+  })
+}
+
+// 查询二级分区水表告警
+export function alarmBySecondArea(params) {
+  return request({
+    url: 'waterStatistic/alarmBySecondArea',
+    method: 'get',
+    params
+  })
+}
+
+// 设备7日报警趋势
+export function alarmCountByDay(params) {
+  return request({
+    url: 'waterStatistic/alarmCountByDay',
+    method: 'get',
+    params
+  })
+}
+
+
diff --git a/src/components/BigData/Card/index.vue b/src/components/BigData/Card/index.vue
index d71e609..45359c9 100644
--- a/src/components/BigData/Card/index.vue
+++ b/src/components/BigData/Card/index.vue
@@ -10,6 +10,7 @@
         </div>
         <div class="card-panel-num" >
           {{ context }}
+          <span style="font-size: 10px;color:#888">{{unit}}</span>
         </div>
       </div>
     </div>
@@ -39,6 +40,10 @@
     color: {
       type: String,
       default: '#40c9c6'
+    },
+    unit:{
+      type: String,
+      default:''
     }
   },
   computed: {
diff --git a/src/components/BigData/Card1/index.vue b/src/components/BigData/Card1/index.vue
index 030b2dc..aa46454 100644
--- a/src/components/BigData/Card1/index.vue
+++ b/src/components/BigData/Card1/index.vue
@@ -1,10 +1,11 @@
 <template>
   <el-card :body-style="{ padding: '0px' }" shadow="always">
-    <div class="card-panel" >
-      <div :style="backgroundColor" class="card-panel-icon-wrapper">
-        <svg-icon :icon-class="icon" class-name="card-panel-icon" />
+    <div class="card-panel">
+      <div v-if="icon" :style="backgroundColor" class="card-panel-icon-wrapper">
+        <svg-icon :icon-class="icon" class-name="card-panel-icon"/>
       </div>
-      <div  class="card-panel-description">
+      <div v-else style="float:left; width: 20px;height: 100%;"></div>
+      <div class="card-panel-description">
         <!-- <div class="card-panel-text">
           {{ title[0] }} <span class="card-panel-num">{{ context[0] }}</span>
         </div>
@@ -13,18 +14,20 @@
         </div> -->
         <div class="two" v-if="title.length===2">
           <div class="card-panel-text">
-            {{ title[0] }} <span class="card-panel-num">{{ context[0] }}</span>
+            {{ title[0] }} <span class="card-panel-num">{{ context[0] }}<span
+            style="font-size: 10px;color:#888;margin-left: 5px">{{unit}}</span></span>
           </div>
-          <div class="card-panel-text" >
-            {{ title[1] }} <span class="card-panel-num">{{ context[1] }}</span>
+          <div class="card-panel-text">
+            {{ title[1] }} <span class="card-panel-num">{{ context[1] }}<span
+            style="font-size: 10px;color:#888;margin-left: 5px">{{unit}}</span></span>
           </div>
         </div>
         <div class="only" v-else>
           <div class="card-panel-text">
             {{ title[0] }}
           </div>
-          <div class="card-panel-num" >
-            {{ context[0] }}
+          <div class="card-panel-num">
+            {{ context[0] }}<span style="font-size: 10px;color:#888">{{unit}}</span>
           </div>
         </div>
       </div>
@@ -33,42 +36,46 @@
 </template>
 
 <script>
-export default {
-  name: 'Card1',
-  props: {
-    title: {
-      type: Array,
-      default: function() {
-        return ['标题', '标题']
+  export default {
+    name: 'Card1',
+    props: {
+      title: {
+        type: Array,
+        default: function () {
+          return ['标题', '标题']
+        }
+      },
+      subtitle: {
+        type: String,
+        default: ''
+      },
+      icon: {
+        type: String,
+        default: ''
+      },
+      context: {
+        type: Array,
+        default: function () {
+          return ['--', '--']
+        }
+      },
+      color: {
+        type: String,
+        default: '#40c9c6'
+      },
+      unit: {
+        type: String,
+        default: ''
       }
     },
-    subtitle: {
-      type: String,
-      default: ''
-    },
-    icon: {
-      type: String,
-      default: ''
-    },
-    context: {
-      type: Array,
-      default: function() {
-        return ['--', '--']
-      }
-    },
-    color: {
-      type: String,
-      default: '#40c9c6'
-    }
-  },
-  computed: {
-    backgroundColor() {
-      return {
-        color: this.color
+    computed: {
+      backgroundColor() {
+        return {
+          color: this.color
+        }
       }
     }
   }
-}
 </script>
 
 <style lang="scss" scoped>
@@ -108,7 +115,7 @@
       overflow: auto;
       margin-left: 5px;
 
-      .two{
+      .two {
         .card-panel-text {
           line-height: 18px;
           color: rgba(0, 0, 0, 0.45);
@@ -123,7 +130,7 @@
           float: right;
         }
       }
-      .only{
+      .only {
         .card-panel-text {
           line-height: 18px;
           color: rgba(0, 0, 0, 0.45);
diff --git a/src/icons/svg/icon-noise.svg b/src/icons/svg/icon-noise.svg
new file mode 100644
index 0000000..00bef71
--- /dev/null
+++ b/src/icons/svg/icon-noise.svg
@@ -0,0 +1,2 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1648634383080" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2093" xmlns:xlink="http://www.w3.org/1999/xlink" width="128" height="128"><defs><style type="text/css">@font-face { font-family: feedback-iconfont; src: url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.woff2?t=1630033759944") format("woff2"), url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.woff?t=1630033759944") format("woff"), url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.ttf?t=1630033759944") format("truetype"); }
+</style></defs><path d="M875.039 549.868c-25.436 0-47.411 13.91-59.3 34.4h-125.9l-99.564-199.177-76.703 281.23-51.528-566.757-67.461-5.735-130.8 490.44H49.397v68.802h267.259l94.464-354.268 51.235 563.733 67.451 5.913 79.432-291.445 38.077 76.057h168.428c11.91 20.419 33.864 34.391 59.3 34.391 37.98 0 68.792-30.879 68.792-68.797-0.005-38.062-30.817-68.787-68.797-68.787z" p-id="2094"></path></svg>
\ No newline at end of file
diff --git a/src/icons/svg/icon-valve.svg b/src/icons/svg/icon-valve.svg
new file mode 100644
index 0000000..f5d96e2
--- /dev/null
+++ b/src/icons/svg/icon-valve.svg
@@ -0,0 +1,2 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1648634707805" class="icon" viewBox="0 0 1090 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3809" xmlns:xlink="http://www.w3.org/1999/xlink" width="136.25" height="128"><defs><style type="text/css">@font-face { font-family: feedback-iconfont; src: url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.woff2?t=1630033759944") format("woff2"), url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.woff?t=1630033759944") format("woff"), url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.ttf?t=1630033759944") format("truetype"); }
+</style></defs><path d="M502.944 296.975V143.052h-231.98c-31.587 0-57.321-24.93-57.321-55.526 0-30.598 25.75-55.526 57.321-55.526H833.06c31.571 0 57.306 24.93 57.306 55.525 0 30.922-25.735 55.526-57.29 55.526h-231.64v153.924h18.179c21.615 0 39.112 16.955 39.112 37.904v90.565l-213.105-0.34v-90.225c0-20.95 17.497-37.904 39.128-37.904h18.194z m-381.74 590.293v63.84c0 9.306-7.834 16.955-17.698 16.955H58.231c-9.862-0.001-17.698-7.65-17.698-17.296V542.472c0-9.63 7.835-17.28 17.698-17.28h45.274c9.863 0 17.698 7.65 17.698 17.28v83.133h150.55c6.272-85.518 79.247-152.95 168.387-152.95h207.98c89.14 0 162.116 67.432 168.403 152.95h150.873v-83.798c0-9.29 7.495-16.615 17.033-16.615h46.297c9.523 0 17.001 7.308 17.001 16.615v409.625c0.341 9.321-7.478 16.63-17.016 16.63h-46.297c-9.523 0-17.018-7.309-17.018-16.63v-64.165H805.36C780.755 948.583 719.655 992 648.119 992H440.142c-71.52 0-132.635-43.402-157.239-104.733H121.204z" p-id="3810"></path></svg>
\ No newline at end of file
diff --git a/src/views/dashboard/components/PanelGroup.vue b/src/views/dashboard/components/PanelGroup.vue
index b72d289..332cbf9 100644
--- a/src/views/dashboard/components/PanelGroup.vue
+++ b/src/views/dashboard/components/PanelGroup.vue
@@ -1,12 +1,12 @@
 <template>
   <el-row class="panel-group">
     <div v-for="card in dataGroup1" :key="card.index" class="card-panel-col">
-      <card1 :title="card.title" :context="card.context" :icon="card.icon" :color="card.color"/>
+      <card1 :title="card.title" :context="card.context" :icon="card.icon" :color="card.color" :unit="card.unit"/>
     </div>
 
     <div v-for="card in dataGroup" :key="card.title" class="card-panel-col">
       <div v-if="hasPerm(card.permission)">
-        <card :title="card.title" :context="card.context" :icon="card.icon" :color="card.color" @click.native="goPage(card.path)"/>
+        <card :title="card.title" :context="card.context" :icon="card.icon" :unit="card.unit" :color="card.color" @click.native="goPage(card.path)"/>
       </div>
     </div>
   </el-row>
@@ -16,7 +16,7 @@
 import Card1 from '@/components/BigData/Card1'
 import Card from '@/components/BigData/Card'
 // 首页
-import { getWatchStatistic , waterMeterCount } from '@/api/overview'
+import { getWatchStatistic , waterMeterCount, valveCount } from '@/api/dashboard'
 // 根据布防数量统计井数量
 import { wellCountByBfzt } from '@/api/well'
 // 当前报警数
@@ -36,30 +36,33 @@
           context: ['--', '--'],
           icon: 'icon-water',
           color: '#40c9c6',
+          unit: '吨',
           index: 0
         },
         {
-          title: ['今日用水量', '昨日用水量'],
+          title: ['今日用水量', '生产厂区用水量'],
           context: ['--', '--'],
-          icon: 'icon-water',
+          icon: '',
           color: '#36a3f7',
+          unit: '吨',
           index: 1
         },
         {
-          title: ['实时噪声'],
+          title: ['滑道实时噪声'],
           context: ['--'],
-          icon: 'icon-device',
+          icon: 'icon-noise',
           color: '#f1c353',
+          unit: 'db',
           index: 2
         }
       ],
       dataGroup: [
         {
-          title: '设备总数',
+          title: '阀门数量',
           context: '--',
-          icon: 'icon-device',
+          icon: 'icon-valve',
           color: '#40c9c6',
-          path: '/deviceList',
+          path: '/deviceList?deviceType=20',
           permission: '/device/list'
         },
         {
@@ -67,11 +70,11 @@
           context: '--',
           icon: 'icon-watch',
           color: '#9694f7',
-          path: '/deviceList',
+          path: '/deviceList?deviceType=13',
           permission: '/device/list'
         },
         {
-          title: '当前报警数',
+          title: '报警信息',
           context: '--',
           icon: 'icon-alarm',
           color: '#f4516c',
@@ -83,10 +86,10 @@
   },
   mounted() {
     this.getWater()
-    this.getWellCount()
+    // this.getWellCount()
     this.getDeviceCount()
     this.getAlarmCount()
-    this.getJobCount()
+    // this.getJobCount()
   },
   methods: {
     refresh() {
@@ -97,24 +100,31 @@
       this.$router.push(path)
     },
     getWater() {
+      // 用水量
       getWatchStatistic().then(response => {
-        this.dataGroup1[0].context = [response.data.total, response.data.month]
-        this.dataGroup1[1].context = [response.data.today, response.data.yesterday]
-        this.dataGroup1[2].context = [Number(response.data.sound).toFixed(2)]
+        this.dataGroup1[0].context = [response.data.total?parseFloat(response.data.total).toFixed(0):'--', response.data.month?parseFloat(response.data.month).toFixed(0):'--']
+        this.dataGroup1[1].context = [response.data.today?parseFloat(response.data.today).toFixed(0):'--', response.data.yesterday?parseFloat(response.data.yesterday).toFixed(0):'--']
+        this.dataGroup1[2].context = [response.data.sound?Number(response.data.sound).toFixed(2):'--']
       })
-      waterMeterCount().then(response => {
-        this.dataGroup[1].context = response.data
-      })
+
     },
-    getWellCount() {
-      wellCountByBfzt().then(response => {
-        this.dataGroup[0].context = response.data.total
-      })
-    },
+    // getWellCount() {
+    //   wellCountByBfzt().then(response => {
+    //     this.dataGroup[0].context = response.data.total
+    //   })
+    // },
     getDeviceCount() {
       // deviceStaticByStatus().then(response => {
       //   this.dataGroup[1].context = response.data.total
       // })
+      // 阀门数量
+      valveCount().then(response => {
+        this.dataGroup[0].context = response.data
+      })
+      // 水表数量
+      waterMeterCount().then(response => {
+        this.dataGroup[1].context = response.data
+      })
     },
     getAlarmCount() {
       alarmNowStatic().then(response => {
@@ -159,7 +169,7 @@
   //   &:hover {
   //     .card-panel-icon-wrapper {
   //       color: #fff;
-        
+
   //     }
 
   //     .icon-people {
diff --git a/src/views/dashboard/components/waterCountByAreaBar.vue b/src/views/dashboard/components/waterCountByAreaBar.vue
index 1bdac48..c488923 100644
--- a/src/views/dashboard/components/waterCountByAreaBar.vue
+++ b/src/views/dashboard/components/waterCountByAreaBar.vue
@@ -1,9 +1,10 @@
 <template>
   <div class="container">
     <div class="statistic-container">
+      <el-button round size="mini" @click="setDefaultTime('year')">本年</el-button>
+      <el-button round size="mini" @click="setDefaultTime('season')">本季</el-button>
       <el-button round size="mini" @click="setDefaultTime('month')">本月</el-button>
-      <el-button round size="mini" @click="setDefaultTime('week')">近7日</el-button>
-      <el-button round size="mini" @click="setDefaultTime('yesterday')">昨日</el-button>
+      <el-button round size="mini" @click="setDefaultTime('week')">本周</el-button>
       <el-button round size="mini" @click="setDefaultTime('today')">今日</el-button>
       <el-date-picker
         v-model="timeRange"
@@ -107,7 +108,7 @@
   },
   mounted() {
     this.setDefaultTime('today')
-    this.fetchArea()
+    // this.fetchArea()
   },
   methods: {
     fetchArea() {
@@ -130,10 +131,11 @@
     },
     fetchData() {
       const params = {
-        areaId: this.areaId,
+        areaId: '110000',
         startTime: this.timeRange[0],
         endTime: this.timeRange[1]
       }
+      this.$emit('change', params)
       countBySecondArea(params).then(response => {
         this.isShow = false
         this.chartData.rows = response.data
@@ -153,7 +155,21 @@
       })
     },
     setDefaultTime(val) {
-      if (val === 'month') {
+      if (val === 'year') {
+        var today = new Date()
+        var tYear = today.getFullYear()
+        const beginTime = tYear + '-01-01'
+        const endTime = getDayTime(new Date().getTime())
+        this.timeRange = [beginTime, endTime.Format('yyyy-MM-dd')]
+      }if (val === 'season') {
+        var today = new Date()
+        var tYear = today.getFullYear()
+        var tMonth = today.getMonth() + 1
+        const oldMonth = tMonth<4?'01':(tMonth<7?'04':(tMonth<10?'07':'10'))
+        const beginTime = tYear + '-' + oldMonth + '-01'
+        const endTime = getDayTime(new Date().getTime())
+        this.timeRange = [beginTime, endTime.Format('yyyy-MM-dd')]
+      }else if (val === 'month') {
         var today = new Date()
         var tYear = today.getFullYear()
         var tMonth = today.getMonth() + 1
@@ -164,7 +180,8 @@
         const endTime = getDayTime(new Date().getTime())
         this.timeRange = [beginTime, endTime.Format('yyyy-MM-dd')]
       } else if (val === 'week') {
-        this.timeRange = [getDayTime(new Date().getTime() - 24 * 6 * 60 * 60 * 1000).Format('yyyy-MM-dd'), getDayTime(new Date().getTime()).Format('yyyy-MM-dd')]
+        const nowDayOfWeek =  new Date().getDay()-1
+        this.timeRange = [getDayTime(new Date().getTime() - 24 * nowDayOfWeek * 60 * 60 * 1000).Format('yyyy-MM-dd'), getDayTime(new Date().getTime()).Format('yyyy-MM-dd')]
       } else if (val === 'yesterday') {
         this.timeRange = [getDayTime(new Date().getTime() - 24 * 60 * 60 * 1000).Format('yyyy-MM-dd'), getDayTime(new Date().getTime() - 24 * 60 * 60 * 1000).Format('yyyy-MM-dd')]
       } else if (val === 'today') {
diff --git a/src/views/dashboard/components/waterCountByDay.vue b/src/views/dashboard/components/waterCountByDay.vue
index 8e12f02..78d1f7c 100644
--- a/src/views/dashboard/components/waterCountByDay.vue
+++ b/src/views/dashboard/components/waterCountByDay.vue
@@ -1,12 +1,12 @@
 <template>
   <div class="container">
-    <div class="function">
-      <el-button round size="mini" @click="changeTime('year')">近1年</el-button>
-      <el-button round size="mini" @click="changeTime('halfyear')">近6月</el-button>
-      <el-button round size="mini" @click="changeTime('3month')">近3月</el-button>
-      <el-button round size="mini" @click="changeTime('month')">近1月</el-button>
-      <el-button round size="mini" @click="changeTime('week')">近1周</el-button>
-    </div>
+    <!--<div class="function">-->
+      <!--<el-button round size="mini" @click="changeTime('year')">近1年</el-button>-->
+      <!--<el-button round size="mini" @click="changeTime('halfyear')">近6月</el-button>-->
+      <!--<el-button round size="mini" @click="changeTime('3month')">近3月</el-button>-->
+      <!--<el-button round size="mini" @click="changeTime('month')">近1月</el-button>-->
+      <!--<el-button round size="mini" @click="changeTime('week')">近1周</el-button>-->
+    <!--</div>-->
     <ve-line :data="chartData" :title="title" :extend="extend" :settings="chartSettings"/>
   </div>
 </template>
@@ -17,6 +17,18 @@
 import { getDoorAreaTree } from '@/api/system/area'
 export default {
   name: 'WaterCountByDay',
+  props:{
+    query: {
+      type: Object,
+      default:()=>{
+        return {
+          areaId: '',
+          startTime: '',
+          endTime: ''
+        }
+      }
+    }
+  },
   data() {
     return {
       listQuery: {
@@ -52,8 +64,13 @@
     }
   },
   mounted() {
-    this.changeTime('month')
-    this.fetchArea()
+    // this.changeTime('month')
+    // this.fetchArea()
+  },
+  watch:{
+    query(val){
+      this.fetchData()
+    }
   },
   methods: {
     fetchArea() {
@@ -73,7 +90,7 @@
       })
     },
     fetchData() {
-      countByDayFirst(this.listQuery).then(response => {
+      countByDayFirst(this.query).then(response => {
         const arr = response.data.map(function(item) {
           for (let i = 0; i < item.data.length; i++) {
             item[item.data[i].areaName] = item.data[i].count
diff --git a/src/views/dashboard/components/waterCountByDept.vue b/src/views/dashboard/components/waterCountByDept.vue
index a0c82cf..02e27cd 100644
--- a/src/views/dashboard/components/waterCountByDept.vue
+++ b/src/views/dashboard/components/waterCountByDept.vue
@@ -1,22 +1,22 @@
 <!--suppress ALL -->
 <template>
   <div class="container">
-    <div class="function">
-      <el-button round size="mini" @click="changeTime('year')">近1年</el-button>
-      <el-button round size="mini" @click="changeTime('halfyear')">近6月</el-button>
-      <el-button round size="mini" @click="changeTime('3month')">近3月</el-button>
-      <el-button round size="mini" @click="changeTime('month')">近1月</el-button>
-      <el-button round size="mini" @click="changeTime('week')">近1周</el-button>
-    </div>
+    <!--<div class="function">-->
+      <!--<el-button round size="mini" @click="changeTime('year')">近1年</el-button>-->
+      <!--<el-button round size="mini" @click="changeTime('halfyear')">近6月</el-button>-->
+      <!--<el-button round size="mini" @click="changeTime('3month')">近3月</el-button>-->
+      <!--<el-button round size="mini" @click="changeTime('month')">近1月</el-button>-->
+      <!--<el-button round size="mini" @click="changeTime('week')">近1周</el-button>-->
+    <!--</div>-->
     <ve-pie :data="chartData" :extend="extend" :title="title"/>
-    <div class="function">
-      <el-button
-        v-for="item in areaList"
-        :key="item.id"
-        round
-        @click="areaChange(item.id)"
-        size="mini">{{item.name}}</el-button>
-    </div>
+    <!--<div class="function">-->
+      <!--<el-button-->
+        <!--v-for="item in areaList"-->
+        <!--:key="item.id"-->
+        <!--round-->
+        <!--@click="areaChange(item.id)"-->
+        <!--size="mini">{{item.name}}</el-button>-->
+    <!--</div>-->
   </div>
 </template>
 
@@ -25,6 +25,18 @@
 import { getDoorAreaTree } from '@/api/system/area'
 export default {
   name: 'WaterCountByDepy',
+  props:{
+    query: {
+      type: Object,
+      default:()=>{
+        return {
+          areaId: '',
+          startTime: '',
+          endTime: ''
+        }
+      }
+    }
+  },
   data() {
     return {
       listQuery: {
@@ -69,7 +81,12 @@
   },
   mounted() {
     // TODO:待调试真接口
-    this.fetchArea()
+    // this.fetchArea()
+  },
+  watch:{
+    query(val){
+      this.fetchData()
+    }
   },
   methods: {
     fetchArea() {
@@ -104,8 +121,7 @@
       //   { 'areaName': '码头作业区', 'count': 78 },
       //   { 'areaName': '车间生产区', 'count': 78 }
       // ]
-      this.listQuery.areaId = this.areaId
-      countBySecondArea(this.listQuery).then(response => {
+      countBySecondArea(this.query).then(response => {
         this.chartData.rows = response.data
       })
     },
diff --git a/src/views/dashboard/components/waterNote.vue b/src/views/dashboard/components/waterNote.vue
new file mode 100644
index 0000000..aa0f448
--- /dev/null
+++ b/src/views/dashboard/components/waterNote.vue
@@ -0,0 +1,152 @@
+<!--suppress ALL -->
+<template>
+  <div class="container">
+    <div>
+      用水事记
+    </div>
+
+  </div>
+</template>
+
+<script>
+import { countBySecondArea } from '@/api/overview'
+import { getDoorAreaTree } from '@/api/system/area'
+export default {
+  name: 'WaterNote',
+  props:{
+    query: {
+      type: Object,
+      default:()=>{
+        return {
+          areaId: '',
+          startTime: '',
+          endTime: ''
+        }
+      }
+    }
+  },
+  data() {
+    return {
+      listQuery: {
+        areaId: '',
+        startTime: '',
+        endTime: ''
+      },
+      areaId:'',
+      areaList: [],
+      chartData: {
+        columns: ['areaName', 'count'],
+        rows: []
+      },
+      extend: {
+        grid: {
+          right: '30%'
+        },
+        legend: {
+          type: 'scroll',
+          top: '60px',
+          right: '0px',
+          orient: 'vertical'
+        },
+        series: {
+          label: { show: true, position: 'outside', formatter: '{b}' },
+          right: 120
+        },
+        tooltip: { trigger: 'item', formatter: '{b}<br/>用水量：{c}吨<br/>占比：{d}%' }
+      },
+      title: {
+        text: '分区用水占比图'
+      },
+      chartSettings: {
+        labelMap: {
+          'areaName': '分区',
+          'count': '用水量'
+        },
+        dimension: 'areaName',
+        metrics: 'count'
+      }
+    }
+  },
+  mounted() {
+    // TODO:待调试真接口
+    // this.fetchArea()
+  },
+  watch:{
+    query(val){
+      this.fetchData()
+    }
+  },
+  methods: {
+    fetchArea() {
+      getDoorAreaTree().then(response => {
+        if (response.code === 200) {
+          this.areaList = response.data.filter(item => {
+            return item.pid === '1'
+          }).map(function(item) {
+            return {
+              id: item.id, name: item.name
+            }
+          })
+          if (this.areaList.length !== 0) { this.areaChange(this.areaList[0].id) }
+        }
+      })
+    },
+    areaChange(val){
+      this.areaId = val
+      this.fetchData()
+    },
+    // 获取统计数据
+    fetchData() {
+      // this.chartData.rows = [
+      //   { 'areaName': '科技楼及食堂', 'count': 53 },
+      //   { 'areaName': 'A\\B\\C\\D\\E座', 'count': 78 },
+      //   { 'areaName': '厂区', 'count': 78 },
+      //   { 'areaName': '分段分区', 'count': 78 },
+      //   { 'areaName': '船坞分区', 'count': 78 },
+      //   { 'areaName': '刀把码头', 'count': 78 },
+      //   { 'areaName': '制管作业区', 'count': 78 },
+      //   { 'areaName': '滑道作业区', 'count': 78 },
+      //   { 'areaName': '码头作业区', 'count': 78 },
+      //   { 'areaName': '车间生产区', 'count': 78 }
+      // ]
+      countBySecondArea(this.query).then(response => {
+        this.chartData.rows = response.data
+      })
+    },
+    changeTime(timeType) {
+      let startTime
+      switch (timeType) {
+        case 'year':
+          startTime = getDayTime(new Date().getTime() - 24 * 365 * 60 * 60 * 1000)
+          this.listQuery.startTime = startTime.Format('yyyy-MM-dd')
+          break
+        case 'halfyear':
+          startTime = getDayTime(new Date().getTime() - 24 * 182 * 60 * 60 * 1000)
+          this.listQuery.startTime = startTime.Format('yyyy-MM-dd')
+          break
+        case '3month':
+          startTime = getDayTime(new Date().getTime() - 24 * 90 * 60 * 60 * 1000)
+          this.listQuery.startTime = startTime.Format('yyyy-MM-dd')
+          break
+        case 'month':
+          startTime = getDayTime(new Date().getTime() - 24 * 30 * 60 * 60 * 1000)
+          this.listQuery.startTime = startTime.Format('yyyy-MM-dd')
+          break
+        case 'week':
+          startTime = getDayTime(new Date().getTime() - 24 * 7 * 60 * 60 * 1000)
+          this.listQuery.startTime = startTime.Format('yyyy-MM-dd')
+          break
+      }
+      const endTime = new Date()
+      this.listQuery.endTime = endTime.Format('yyyy-MM-dd')
+      this.fetchData()
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+  .container{
+    position:relative;
+    height: 455px;
+  }
+</style>
diff --git a/src/views/dashboard/index.vue b/src/views/dashboard/index.vue
index fdbc38a..831dbc3 100644
--- a/src/views/dashboard/index.vue
+++ b/src/views/dashboard/index.vue
@@ -1,31 +1,33 @@
 <template>
   <div class="dashboard-container" style="background-color: white">
     <panel-group ref="panelgroup"/>
-    <el-row :gutter="10">
+    <el-row>
       <!-- 用水统计图 -->
+      <el-col :span="18">
+        <el-card shadow="never">
+          <water-count-by-area-bar @change="changeWaterQuery"/>
+        </el-card>
+      </el-col>
+      <el-col :span="6">
+        <el-card shadow="never">
+          <water-note/>
+        </el-card>
+      </el-col>
+    </el-row>
+    <el-row>
+      <!-- 分区用水占比图 -->
       <el-col :span="12">
         <el-card shadow="never">
-          <water-count-by-dept-bar/>
+          <water-count-by-dept :query="listQuery1" ref="waterCountPie"/>
         </el-card>
       </el-col>
       <!-- 用水走势图 -->
       <el-col :span="12">
         <el-card shadow="never">
-          <water-count-by-day/>
+          <water-count-by-day :query="listQuery1" ref="waterCountDay"/>
         </el-card>
       </el-col>
-      <!-- 分区用水统计图 -->
-      <el-col :span="12">
-        <el-card shadow="never">
-          <water-count-by-area-bar/>
-        </el-card>
-      </el-col>
-      <!-- 分区用水占比图 -->
-      <el-col :span="12">
-        <el-card shadow="never">
-          <water-count-by-depy/>
-        </el-card>
-      </el-col>
+
       <!--水表报警次数统计-->
       <el-col v-if="hasPerm('/statics/alarmsByDay')" :span="12">
         <el-card shadow="never">
@@ -64,20 +66,22 @@
 import DeviceCountByOnline from './components/DeviceCountByOnline'
 import AlarmByDays from './components/AlarmByDays'
 import JobByStatus from './components/JobByStatus'
-import WaterCountByDepy from './components/waterCountByDept'
+import WaterCountByDept from './components/waterCountByDept'
 import WaterCountByDeptBar from './components/waterCountByDeptBar'
 import WaterCountByDay from './components/waterCountByDay'
 import WaterCountByAreaBar from "./components/waterCountByAreaBar";
 import WatchAlarmBar from "./components/watchAlarmBar";
+import WaterNote from "./components/waterNote";
 
 export default {
   name: 'Dashboard',
   components: {
+    WaterNote,
     WatchAlarmBar,
     WaterCountByAreaBar,
     WaterCountByDay,
     WaterCountByDeptBar,
-    WaterCountByDepy,
+    WaterCountByDept,
     JobByStatus,
     AlarmByDays,
     PanelGroup,
@@ -108,12 +112,25 @@
       state.needRefresh = needRefresh
     }
   },
+  data(){
+    return {
+      listQuery1:{
+        areaId:'110000',
+        startTime:new Date().Format('yyyy-MM-dd'),
+        endTime:new Date().Format('yyyy-MM-dd')
+      },// 分区用水量查询条件
+      listQuery2:{
+        areaId:'',
+        startTime:'',
+        endTime:''
+      } // 分区报警查询条件
+    }
+  },
   watch: {
     needRefresh(val) {
       // 需要刷新
       if (val) {
         console.log('refresh dashboard')
-        debugger
         this.$refs.panelgroup.refresh()
       }
     }
@@ -124,6 +141,10 @@
   methods: {
     webSocket() {
       this.$store.dispatch('initWebSocket')
+    },
+    // 切换分区查询条件
+    changeWaterQuery(listQuery1){
+      this.listQuery1 = listQuery1
     }
   }
 }
diff --git a/src/views/dashboard/index_bak.vue b/src/views/dashboard/index_bak.vue
new file mode 100644
index 0000000..fdbc38a
--- /dev/null
+++ b/src/views/dashboard/index_bak.vue
@@ -0,0 +1,149 @@
+<template>
+  <div class="dashboard-container" style="background-color: white">
+    <panel-group ref="panelgroup"/>
+    <el-row :gutter="10">
+      <!-- 用水统计图 -->
+      <el-col :span="12">
+        <el-card shadow="never">
+          <water-count-by-dept-bar/>
+        </el-card>
+      </el-col>
+      <!-- 用水走势图 -->
+      <el-col :span="12">
+        <el-card shadow="never">
+          <water-count-by-day/>
+        </el-card>
+      </el-col>
+      <!-- 分区用水统计图 -->
+      <el-col :span="12">
+        <el-card shadow="never">
+          <water-count-by-area-bar/>
+        </el-card>
+      </el-col>
+      <!-- 分区用水占比图 -->
+      <el-col :span="12">
+        <el-card shadow="never">
+          <water-count-by-depy/>
+        </el-card>
+      </el-col>
+      <!--水表报警次数统计-->
+      <el-col v-if="hasPerm('/statics/alarmsByDay')" :span="12">
+        <el-card shadow="never">
+          <watch-alarm-bar/>
+        </el-card>
+      </el-col>
+      <!--报警次数统计-->
+      <el-col v-if="hasPerm('/statics/alarmsByDay')" :span="12">
+        <el-card shadow="never">
+          <alarm-by-days/>
+        </el-card>
+      </el-col>
+      <!--设备在线数量统计-->
+      <el-col v-if="hasPerm('/statics/deviceStaticsByType')" :span="12">
+        <el-card shadow="never">
+          <device-count-by-online/>
+        </el-card>
+      </el-col>
+
+      <!--设备数量统计-->
+      <el-col v-if="hasPerm('/statics/deviceStaticsByType')" :span="12">
+        <el-card shadow="never">
+          <device-count/>
+        </el-card>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+import PanelGroup from './components/PanelGroup'
+import WellCountByBfzt from './components/WellCountByBfzt'
+import WellCountByType from './components/WellCountByType'
+import DeviceCount from './components/DeviceCount'
+import DeviceCountByOnline from './components/DeviceCountByOnline'
+import AlarmByDays from './components/AlarmByDays'
+import JobByStatus from './components/JobByStatus'
+import WaterCountByDepy from './components/waterCountByDept'
+import WaterCountByDeptBar from './components/waterCountByDeptBar'
+import WaterCountByDay from './components/waterCountByDay'
+import WaterCountByAreaBar from "./components/waterCountByAreaBar";
+import WatchAlarmBar from "./components/watchAlarmBar";
+
+export default {
+  name: 'Dashboard',
+  components: {
+    WatchAlarmBar,
+    WaterCountByAreaBar,
+    WaterCountByDay,
+    WaterCountByDeptBar,
+    WaterCountByDepy,
+    JobByStatus,
+    AlarmByDays,
+    PanelGroup,
+    WellCountByBfzt,
+    WellCountByType,
+    DeviceCount,
+    DeviceCountByOnline
+  },
+  computed: {
+    ...mapGetters([
+      'name',
+      'roleNames',
+      'roleTips',
+      'wellTypes',
+      'deviceTypes',
+      'communications',
+      'area'
+    ])
+  },
+  mutations: {
+    SET_WEBSOCKET: (state, websocket) => {
+      state.websocket = websocket
+    },
+    SET_WS_STATUS: (state, wsStatus) => {
+      state.wsStatus = wsStatus
+    },
+    SET_NEED_REFRESH: (state, needRefresh) => {
+      state.needRefresh = needRefresh
+    }
+  },
+  watch: {
+    needRefresh(val) {
+      // 需要刷新
+      if (val) {
+        console.log('refresh dashboard')
+        debugger
+        this.$refs.panelgroup.refresh()
+      }
+    }
+  },
+  mounted() {
+    // this.webSocket()
+  },
+  methods: {
+    webSocket() {
+      this.$store.dispatch('initWebSocket')
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.dashboard-container{
+  .el-row{
+    .el-col{
+      margin-bottom: 10px;
+    }
+  }
+}
+.dashboard {
+  &-container {
+    padding: 10px 20px;
+  }
+  &-text {
+    font-size: 30px;
+    line-height: 46px;
+  }
+}
+</style>
diff --git a/src/views/layout/Layout.vue b/src/views/layout/Layout.vue
deleted file mode 100644
index 7c3d46d..0000000
--- a/src/views/layout/Layout.vue
+++ /dev/null
@@ -1,111 +0,0 @@
-<template>
-  <el-container :class="classObj" class="app-wrapper">
-    <div v-if="device==='mobile'&&sidebar.opened" class="drawer-bg" @click="handleClickOutside"/>
-    <app-header class="app-header"/>
-    <el-main class="app-body">
-      <!--侧边栏-->
-      <sidebar class="sidebar-container"/>
-      <!--右半部分-->
-      <div :class="{hasTagsView:needTagsView}" class="main-container">
-        <!--开启固定头部设置-->
-        <div v-if="fixedHeader">
-          <!--导航(面包屑)-->
-          <navbar/>
-          <!--标签栏-->
-          <tags-view v-if="needTagsView" />
-          <!--主内容包裹在el-scrollbar中-->
-          <el-scrollbar class="no-head-scrollbar">
-            <app-main/>
-          </el-scrollbar>
-        </div>
-        <!--为开始固定头部设置-->
-        <div v-else>
-          <!--导航，tagsView都包裹在el-scrollbar中-->
-          <el-scrollbar class="has-head-scrollbar">
-            <navbar/>
-            <tags-view v-if="needTagsView" />
-            <app-main/>
-          </el-scrollbar>
-        </div>
-        <!--悬浮框-->
-        <right-panel v-if="false">
-          <settings />
-        </right-panel>
-      </div>
-    </el-main>
-  </el-container>
-</template>
-
-<script>
-import RightPanel from '@/components/RightPanel'
-import { AppHeader, Navbar, Sidebar, AppMain } from './components'
-import ResizeMixin from './mixin/ResizeHandler'
-import TagsView from './components/TagsView/index'
-import { mapState } from 'vuex'
-import Settings from './components/Settings/index'
-
-export default {
-  name: 'Layout',
-  components: {
-    Settings,
-    TagsView,
-    AppHeader,
-    Navbar,
-    Sidebar,
-    AppMain,
-    RightPanel
-  },
-  mixins: [ResizeMixin],
-  computed: {
-    ...mapState({
-      sidebar: state => state.app.sidebar,
-      device: state => state.app.device,
-      showSettings: state => state.settings.showSettings,
-      needTagsView: state => state.settings.tagsView,
-      fixedHeader: state => state.settings.fixedHeader
-    }),
-    classObj() {
-      return {
-        hideSidebar: !this.sidebar.opened,
-        openSidebar: this.sidebar.opened,
-        withoutAnimation: this.sidebar.withoutAnimation,
-        mobile: this.device === 'mobile'
-      }
-    }
-  },
-  methods: {
-    handleClickOutside() {
-      this.$store.dispatch('CloseSideBar', { withoutAnimation: false })
-    }
-  }
-}
-</script>
-
-<style rel="stylesheet/scss" lang="scss" scoped>
-  @import "src/styles/mixin.scss";
-  .app-wrapper {
-    @include clearfix;
-    position: relative;
-    height: 100%;
-    width: 100%;
-    &.mobile.openSidebar{
-      position: fixed;
-      top: 0;
-    }
-  }
-  .drawer-bg {
-    background: #000;
-    opacity: 0.3;
-    width: 100%;
-    top: 0;
-    height: 100%;
-    position: absolute;
-    z-index: 999;
-  }
-  /*.el-scrollbar{*/
-    /*height: calc(100vh - 50px);*/
-  /*}*/
-  .has-head-scrollbar{
-    height: 100vh;
-  }
-</style>
diff --git a/src/views/layout/components/AppHeader.vue b/src/views/layout/components/AppHeader.vue
deleted file mode 100644
index 8d8912e..0000000
--- a/src/views/layout/components/AppHeader.vue
+++ /dev/null
@@ -1,151 +0,0 @@
-<template>
-  <el-header class="app-header">
-    <h3>{{ title }}</h3>
-    <!--子系统选项-->
-    <el-dropdown v-if="showChangeSys" class="systemSelect" size="medium" @command="handleCommand">
-      <span class="el-dropdown-link">{{ currentSystem.name }}<i class="el-icon-arrow-down el-icon--right"/>
-      </span>
-      <el-dropdown-menu slot="dropdown">
-        <el-dropdown-item v-for="system in systems" :command="system" :key="system.id">{{ system.name }}</el-dropdown-item>
-      </el-dropdown-menu>
-    </el-dropdown>
-    <el-dropdown class="dropdown-container" trigger="click">
-      <div class="dropdown-wrapper">
-        <span style="line-height:50px;">欢迎您，{{ name }}</span>
-        <!--<img :src="avatar+'?imageView2/1/w/80/h/80'" class="user-avatar">-->
-        <i class="el-icon-arrow-down"/>
-      </div>
-      <el-dropdown-menu slot="dropdown" class="user-dropdown">
-        <el-dropdown-item v-if="!baseConfig.singleSys">
-          <span style="display:block;" @click="backToIndex">回首页</span>
-        </el-dropdown-item>
-        <el-dropdown-item :divided="!baseConfig.singleSys">
-          <span style="display:block;" @click="resetPwd">修改密码</span>
-        </el-dropdown-item>
-        <el-dropdown-item divided>
-          <span style="display:block;" @click="logout">注销</span>
-        </el-dropdown-item>
-      </el-dropdown-menu>
-    </el-dropdown>
-    <reset-pwd v-show="showSetPwd" ref="retPwd"/>
-  </el-header>
-</template>
-
-<script>
-import { mapGetters } from 'vuex'
-import ResetPwd from '@/views/system/user/resetPwd'
-
-export default {
-  name: 'AppHeader',
-  components: { ResetPwd },
-  data() {
-    return {
-      title: this.baseConfig.title, // 标题
-      showChangeSys: !this.baseConfig.singleSys, // 是否显示切换系统菜单
-      name: this.$store.getters.name, // 用户姓名
-      showSetPwd: false // 是否显示修改密码按钮
-    }
-  },
-  computed: {
-    ...mapGetters([
-      'sidebar',
-      'avatar',
-      'currentSystem',
-      'systems'
-    ])
-  },
-  created() {
-    if (!this.baseConfig.singleSys) {
-      this.getSystems()
-    }
-  },
-  methods: {
-    toggleSideBar() {
-      this.$store.dispatch('ToggleSideBar')
-    },
-    logout() {
-      this.$store.dispatch('LogOut').then(() => {
-        location.reload() // 为了重新实例化vue-router对象 避免bug
-      })
-    },
-    resetPwd() {
-      this.showSetPwd = true
-      this.$refs.retPwd.initDialog(true)
-    },
-    backToIndex() {
-      const url = this.baseConfig.mainPage
-      window.location.href = url
-    },
-    // 切换子系统
-    handleCommand(command) {
-      console.log('切换子系统:' + command.name)
-      const params1 = `?token=${this.$store.getters.token}`
-      const params = `?sys=${command.name}&url=${command.url}&code=${command.code}&token=${this.$store.getters.token}`
-      // 判断系统是不是http的，如果是则打开新窗口
-      if (command.url.indexOf('http') > -1) {
-      // 取token
-        if (this.baseConfig.sameWindow) {
-          window.location.href = command.url + params1
-        } else {
-          window.open(command.url + params1, '_blank')
-        }
-      } else {
-      // 取token
-        if (this.baseConfig.sameWindow) {
-          window.location.href = this.baseConfig.mainPage + command.url + params
-        } else {
-          window.open(this.baseConfig.mainPage + command.url + params, '_blank')
-        }
-      }
-    },
-    // 获取子系统
-    getSystems() {
-      this.$store.dispatch('GetSystems').then(() => {
-        console.log('获取子系统列表成功-appHeader')
-      })
-    }
-  }
-}
-</script>
-
-<style rel="stylesheet/scss" lang="scss" scoped>
-  h3{
-    margin-left:24px;
-    display: inline-block;
-    float:left;
-  }
-  .dropdown-container {
-    /*height: 50px;*/
-    display: inline-block;
-    float: right;
-    z-index:500;
-    position: fixed;
-    top:0px;
-    right: 35px;
-    .dropdown-wrapper {
-      cursor: pointer;
-      margin-top: 5px;
-      position: relative;
-      line-height: initial;
-      .user-avatar {
-        width: 40px;
-        height: 40px;
-        border-radius: 10px;
-      }
-      .el-icon-caret-bottom {
-        font-size: 12px;
-      }
-    }
-  }
-  .systemSelect{
-    height: 56px;
-    display: inline-block;
-    float: left;
-    z-index:500;
-    position: fixed;
-    margin-left:60px;
-    top:5px;
-    color:#fff;
-    line-height: 56px;
-  }
-</style>
diff --git a/src/views/layout/components/AppMain.vue b/src/views/layout/components/AppMain.vue
deleted file mode 100644
index 2ea268e..0000000
--- a/src/views/layout/components/AppMain.vue
+++ /dev/null
@@ -1,38 +0,0 @@
-<template>
-  <section class="app-main">
-    <transition name="fade-transform" mode="out-in">
-      <!-- or name="fade" -->
-      <!-- <router-view :key="key"></router-view> -->
-      <div>
-        <keep-alive>
-          <router-view v-if="$route.meta.keepAlive" :key="key"/>
-        </keep-alive>
-        <router-view v-if="!$route.meta.keepAlive" :key="key"/>
-      </div>
-    </transition>
-  </section>
-</template>
-
-<script>
-export default {
-  name: 'AppMain',
-  computed: {
-    key() {
-      if (this.$route.meta.keepAlive) {
-        return this.$route.name !== undefined ? this.$route.name : this.$route
-      } else {
-        return this.$route.name !== undefined ? this.$route.name + new Date() : this.$route + new Date()
-      }
-    }
-  }
-}
-</script>
-
-<style scoped>
-.app-main {
-  /*50 = navbar  */
-  /*min-height: calc(100vh - 50px);*/
-  position: relative;
-  overflow: hidden;
-}
-</style>
diff --git a/src/views/layout/components/Navbar.vue b/src/views/layout/components/Navbar.vue
deleted file mode 100644
index 24ea99b..0000000
--- a/src/views/layout/components/Navbar.vue
+++ /dev/null
@@ -1,78 +0,0 @@
-<template>
-  <div class="navbar">
-    <hamburger :toggle-click="toggleSideBar" :is-active="sidebar.opened" class="hamburger-container"/>
-    <breadcrumb />
-  </div>
-</template>
-
-<script>
-import { mapGetters } from 'vuex'
-import Breadcrumb from '@/components/Breadcrumb'
-import Hamburger from '@/components/Hamburger'
-
-export default {
-  components: {
-    Breadcrumb,
-    Hamburger
-  },
-  computed: {
-    ...mapGetters([
-      'sidebar'
-    ])
-  },
-  methods: {
-    toggleSideBar() {
-      this.$store.dispatch('ToggleSideBar')
-    },
-    logout() {
-      this.$store.dispatch('LogOut').then(() => {
-        location.reload() // 为了重新实例化vue-router对象 避免bug
-      })
-    }
-  }
-}
-</script>
-
-<style rel="stylesheet/scss" lang="scss" scoped>
-.navbar {
-  height: 50px;
-  line-height: 50px;
-  box-shadow: 0 1px 3px 0 rgba(0,0,0,.12), 0 0 3px 0 rgba(0,0,0,.04);
-  .hamburger-container {
-    text-align: center;
-    height: 50px;
-    float: left;
-    padding: 0 12px;
-  }
-  .screenfull {
-    position: absolute;
-    right: 90px;
-    top: 16px;
-    color: red;
-  }
-  .avatar-container {
-    height: 50px;
-    display: inline-block;
-    position: absolute;
-    right: 35px;
-    .avatar-wrapper {
-      cursor: pointer;
-      margin-top: 5px;
-      position: relative;
-      line-height: initial;
-      .user-avatar {
-        width: 40px;
-        height: 40px;
-        border-radius: 10px;
-      }
-      .el-icon-caret-bottom {
-        position: absolute;
-        right: -20px;
-        top: 25px;
-        font-size: 12px;
-      }
-    }
-  }
-}
-</style>
-
diff --git a/src/views/layout/components/Settings/index.vue b/src/views/layout/components/Settings/index.vue
deleted file mode 100644
index cf3023d..0000000
--- a/src/views/layout/components/Settings/index.vue
+++ /dev/null
@@ -1,109 +0,0 @@
-<template>
-  <div class="drawer-container">
-    <div>
-      <h3 class="drawer-title">Page style setting</h3>
-
-      <div class="drawer-item">
-        <span>Theme Color</span>
-        <theme-picker style="float: right;height: 26px;margin: -3px 8px 0 0;" @change="themeChange" />
-      </div>
-
-      <div class="drawer-item">
-        <span>Open Tags-View</span>
-        <el-switch v-model="tagsView" class="drawer-switch" />
-      </div>
-
-      <div class="drawer-item">
-        <span>Fixed Header</span>
-        <el-switch v-model="fixedHeader" class="drawer-switch" />
-      </div>
-
-      <div class="drawer-item">
-        <span>Sidebar Logo</span>
-        <el-switch v-model="sidebarLogo" class="drawer-switch" />
-      </div>
-
-    </div>
-  </div>
-</template>
-
-<script>
-import ThemePicker from '@/components/ThemePicker'
-
-export default {
-  name: 'Settings',
-  components: { ThemePicker },
-  data() {
-    return {}
-  },
-  computed: {
-    fixedHeader: {
-      get() {
-        return this.$store.state.settings.fixedHeader
-      },
-      set(val) {
-        this.$store.dispatch('settings/changeSetting', {
-          key: 'fixedHeader',
-          value: val
-        })
-      }
-    },
-    tagsView: {
-      get() {
-        return this.$store.state.settings.tagsView
-      },
-      set(val) {
-        this.$store.dispatch('settings/changeSetting', {
-          key: 'tagsView',
-          value: val
-        })
-      }
-    },
-    sidebarLogo: {
-      get() {
-        return this.$store.state.settings.sidebarLogo
-      },
-      set(val) {
-        this.$store.dispatch('settings/changeSetting', {
-          key: 'sidebarLogo',
-          value: val
-        })
-      }
-    }
-  },
-  methods: {
-    themeChange(val) {
-      this.$store.dispatch('settings/changeSetting', {
-        key: 'theme',
-        value: val
-      })
-    }
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-.drawer-container {
-  padding: 24px;
-  font-size: 14px;
-  line-height: 1.5;
-  word-wrap: break-word;
-
-  .drawer-title {
-    margin-bottom: 12px;
-    color: rgba(0, 0, 0, .85);
-    font-size: 14px;
-    line-height: 22px;
-  }
-
-  .drawer-item {
-    color: rgba(0, 0, 0, .65);
-    font-size: 14px;
-    padding: 12px 0;
-  }
-
-  .drawer-switch {
-    float: right
-  }
-}
-</style>
diff --git a/src/views/layout/components/Sidebar/Item.vue b/src/views/layout/components/Sidebar/Item.vue
deleted file mode 100644
index 4ed6b5f..0000000
--- a/src/views/layout/components/Sidebar/Item.vue
+++ /dev/null
@@ -1,31 +0,0 @@
-<script>
-export default {
-  name: 'MenuItem',
-  functional: true,
-  props: {
-    icon: {
-      type: String,
-      default: ''
-    },
-    title: {
-      type: String,
-      default: ''
-    }
-  },
-  render(h, context) {
-    const { icon, title } = context.props
-    const vnodes = []
-
-    if (icon) {
-      vnodes.push(<svg-icon icon-class={icon}/>)
-    } else {
-      vnodes.push(<span style='display:inline-block;width:30px;'></span>)
-    }
-
-    if (title) {
-      vnodes.push(<span slot='title'>{(title)}</span>)
-    }
-    return vnodes
-  }
-}
-</script>
diff --git a/src/views/layout/components/Sidebar/Link.vue b/src/views/layout/components/Sidebar/Link.vue
deleted file mode 100644
index bff45cd..0000000
--- a/src/views/layout/components/Sidebar/Link.vue
+++ /dev/null
@@ -1,36 +0,0 @@
-
-<template>
-  <!-- eslint-disable vue/require-component-is -->
-  <component v-bind="linkProps(to)">
-    <slot/>
-  </component>
-</template>
-
-<script>
-import { isExternal } from '@/utils/validate'
-
-export default {
-  props: {
-    to: {
-      type: String,
-      required: true
-    }
-  },
-  methods: {
-    linkProps(url) {
-      if (isExternal(url)) {
-        return {
-          is: 'a',
-          href: url,
-          target: '_blank',
-          rel: 'noopener'
-        }
-      }
-      return {
-        is: 'router-link',
-        to: url
-      }
-    }
-  }
-}
-</script>
diff --git a/src/views/layout/components/Sidebar/SidebarItem.vue b/src/views/layout/components/Sidebar/SidebarItem.vue
deleted file mode 100644
index 988d662..0000000
--- a/src/views/layout/components/Sidebar/SidebarItem.vue
+++ /dev/null
@@ -1,107 +0,0 @@
-<template>
-  <div v-if="!item.hidden&&item.children" class="menu-wrapper">
-
-    <template v-if="hasOneShowingChild(item.children,item) && (!onlyOneChild.children||onlyOneChild.noShowingChildren)&&!item.alwaysShow">
-      <a :href="onlyOneChild.path" target="_blank" @click="clickLink(onlyOneChild.path,$event)">
-        <el-menu-item :index="resolvePath(onlyOneChild.path)" :class="{'submenu-title-noDropdown':!isNest}">
-          <item v-if="onlyOneChild.meta" :icon="onlyOneChild.meta.icon||item.meta.icon" :title="onlyOneChild.meta.title" />
-        </el-menu-item>
-      </a>
-    </template>
-
-    <el-submenu v-else :index="item.name||item.path">
-      <template slot="title">
-        <item v-if="item.meta" :icon="item.meta.icon" :title="item.meta.title" />
-      </template>
-
-      <template v-for="child in item.children" v-if="!child.hidden">
-        <sidebar-item
-          v-if="child.children&&child.children.length>0"
-          :is-nest="true"
-          :item="child"
-          :key="child.path"
-          :base-path="resolvePath(child.path)"
-          class="nest-menu" />
-
-        <a v-else :href="child.path" :key="child.name" target="_blank" @click="clickLink(child.path,$event)">
-          <el-menu-item :index="resolvePath(child.path)">
-            <span class="light-line"/>
-            <item v-if="child.meta" :icon="child.meta.icon" :title="child.meta.title" />
-          </el-menu-item>
-        </a>
-      </template>
-    </el-submenu>
-
-  </div>
-</template>
-
-<script>
-import path from 'path'
-import { validateURL } from '@/utils/validate'
-import Item from './Item'
-
-export default {
-  name: 'SidebarItem',
-  components: { Item },
-  props: {
-    // route object
-    item: {
-      type: Object,
-      required: true
-    },
-    isNest: {
-      type: Boolean,
-      default: false
-    },
-    basePath: {
-      type: String,
-      default: ''
-    }
-  },
-  data() {
-    return {
-      onlyOneChild: null
-    }
-  },
-  methods: {
-    hasOneShowingChild(children, parent) {
-      const showingChildren = children.filter(item => {
-        if (item.hidden) {
-          return false
-        } else {
-          // Temp set(will be used if only has one showing child)
-          this.onlyOneChild = item
-          return true
-        }
-      })
-
-      // When there is only one child router, the child router is displayed by default
-      if (showingChildren.length === 1) {
-        return true
-      }
-
-      // Show parent if there are no child router to display
-      if (showingChildren.length === 0) {
-        this.onlyOneChild = { ... parent, path: '', noShowingChildren: true }
-        return true
-      }
-
-      return false
-    },
-    resolvePath(routePath) {
-      return path.resolve(this.basePath, routePath)
-    },
-    isExternalLink(routePath) {
-      return validateURL(routePath)
-    },
-    clickLink(routePath, e) {
-      if (!this.isExternalLink(routePath)) {
-        e.preventDefault()
-        const path = this.resolvePath(routePath)
-        this.$router.push({ path, query: { t: +new Date() }})
-        // this.$router.push(path)
-      }
-    }
-  }
-}
-</script>
diff --git a/src/views/layout/components/Sidebar/index.vue b/src/views/layout/components/Sidebar/index.vue
deleted file mode 100644
index 33d596a..0000000
--- a/src/views/layout/components/Sidebar/index.vue
+++ /dev/null
@@ -1,39 +0,0 @@
-<template>
-  <el-scrollbar wrap-class="scrollbar-wrapper">
-    <el-menu
-      :show-timeout="200"
-      :default-active="activeMenu"
-      :collapse="isCollapse"
-      mode="vertical"
-    >
-      <sidebar-item v-for="route in permission_routers" :key="route.name" :item="route" :base-path="route.path"/>
-    </el-menu>
-  </el-scrollbar>
-</template>
-
-<script>
-import { mapGetters } from 'vuex'
-import SidebarItem from './SidebarItem'
-
-export default {
-  components: { SidebarItem },
-  computed: {
-    ...mapGetters([
-      'permission_routers',
-      'sidebar'
-    ]),
-    activeMenu() {
-      const route = this.$route
-      const { meta, path } = route
-      // 如果meta中上设置activeMenu，按照meta中设置高亮
-      if (meta.activeMenu) {
-        return meta.activeMenu
-      }
-      return path
-    },
-    isCollapse() {
-      return !this.sidebar.opened
-    }
-  }
-}
-</script>
diff --git a/src/views/layout/components/TagsView/ScrollPane.vue b/src/views/layout/components/TagsView/ScrollPane.vue
deleted file mode 100644
index 0ec76e7..0000000
--- a/src/views/layout/components/TagsView/ScrollPane.vue
+++ /dev/null
@@ -1,85 +0,0 @@
-<template>
-  <el-scrollbar ref="scrollContainer" :vertical="false" class="scroll-container" @wheel.native.prevent="handleScroll">
-    <slot />
-  </el-scrollbar>
-</template>
-
-<script>
-const tagAndTagSpacing = 4 // tagAndTagSpacing
-
-export default {
-  name: 'ScrollPane',
-  data() {
-    return {
-      left: 0
-    }
-  },
-  computed: {
-    scrollWrapper() {
-      return this.$refs.scrollContainer.$refs.wrap
-    }
-  },
-  methods: {
-    handleScroll(e) {
-      const eventDelta = e.wheelDelta || -e.deltaY * 40
-      const $scrollWrapper = this.scrollWrapper
-      $scrollWrapper.scrollLeft = $scrollWrapper.scrollLeft + eventDelta / 4
-    },
-    moveToTarget(currentTag) {
-      const $container = this.$refs.scrollContainer.$el
-      const $containerWidth = $container.offsetWidth
-      const $scrollWrapper = this.scrollWrapper
-      const tagList = this.$parent.$refs.tag
-
-      let firstTag = null
-      let lastTag = null
-
-      // find first tag and last tag
-      if (tagList.length > 0) {
-        firstTag = tagList[0]
-        lastTag = tagList[tagList.length - 1]
-      }
-
-      if (firstTag === currentTag) {
-        $scrollWrapper.scrollLeft = 0
-      } else if (lastTag === currentTag) {
-        $scrollWrapper.scrollLeft = $scrollWrapper.scrollWidth - $containerWidth
-      } else {
-        // find preTag and nextTag
-        const currentIndex = tagList.findIndex(item => item === currentTag)
-        const prevTag = tagList[currentIndex - 1]
-        const nextTag = tagList[currentIndex + 1]
-
-        // the tag's offsetLeft after of nextTag
-        const afterNextTagOffsetLeft = nextTag.$el.offsetLeft + nextTag.$el.offsetWidth + tagAndTagSpacing
-
-        // the tag's offsetLeft before of prevTag
-        const beforePrevTagOffsetLeft = prevTag.$el.offsetLeft - tagAndTagSpacing
-
-        if (afterNextTagOffsetLeft > $scrollWrapper.scrollLeft + $containerWidth) {
-          $scrollWrapper.scrollLeft = afterNextTagOffsetLeft - $containerWidth
-        } else if (beforePrevTagOffsetLeft < $scrollWrapper.scrollLeft) {
-          $scrollWrapper.scrollLeft = beforePrevTagOffsetLeft
-        }
-      }
-    }
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-.scroll-container {
-  white-space: nowrap;
-  position: relative;
-  overflow: hidden;
-  width: 100%;
-  /deep/ {
-    .el-scrollbar__bar {
-      bottom: 0px;
-    }
-    .el-scrollbar__wrap {
-      height: 49px;
-    }
-  }
-}
-</style>
diff --git a/src/views/layout/components/TagsView/index.vue b/src/views/layout/components/TagsView/index.vue
deleted file mode 100644
index 5839f2d..0000000
--- a/src/views/layout/components/TagsView/index.vue
+++ /dev/null
@@ -1,287 +0,0 @@
-<template>
-  <div id="tags-view-container" class="tags-view-container">
-    <scroll-pane ref="scrollPane" class="tags-view-wrapper">
-      <router-link
-        v-for="tag in visitedViews"
-        ref="tag"
-        :key="tag.path"
-        :class="isActive(tag)?'active':''"
-        :to="{ path: tag.path, query: tag.query, fullPath: tag.fullPath }"
-        tag="span"
-        class="tags-view-item"
-        @click.middle.native="closeSelectedTag(tag)"
-        @contextmenu.prevent.native="openMenu(tag,$event)"
-      >
-        {{ tag.title }}
-        <span v-if="(!tag.meta.affix)&&(visitedViews.length!=1)" class="el-icon-close" @click.prevent.stop="closeSelectedTag(tag)" />
-      </router-link>
-    </scroll-pane>
-    <ul v-show="visible" :style="{left:left+'px',top:top+'px'}" class="contextmenu">
-      <li @click="refreshSelectedTag(selectedTag)">刷新页面</li>
-      <li v-if="!(selectedTag.meta&&selectedTag.meta.affix)" @click="closeSelectedTag(selectedTag)">关闭当前标签页</li>
-      <li @click="closeOthersTags">关闭其他标签页</li>
-      <li @click="closeAllTags(selectedTag)">关闭全部标签页</li>
-    </ul>
-  </div>
-</template>
-
-<script>
-import ScrollPane from './ScrollPane'
-import path from 'path'
-
-export default {
-  name: 'TagsView',
-  components: { ScrollPane },
-  data() {
-    return {
-      visible: false,
-      top: 0,
-      left: 0,
-      selectedTag: {},
-      affixTags: []
-    }
-  },
-  computed: {
-    visitedViews() {
-      return this.$store.state.tagsView.visitedViews
-    },
-    routes() {
-      return this.$store.state.permission.routers
-    }
-  },
-  watch: {
-    $route() {
-      this.addTags()
-      this.moveToCurrentTag()
-    },
-    visible(value) {
-      if (value) {
-        document.body.addEventListener('click', this.closeMenu)
-      } else {
-        document.body.removeEventListener('click', this.closeMenu)
-      }
-    }
-  },
-  mounted() {
-    this.initTags()
-    this.addTags()
-  },
-  methods: {
-    isActive(route) {
-      return route.path === this.$route.path
-    },
-    filterAffixTags(routes, basePath = '/') {
-      let tags = []
-      routes.forEach(route => {
-        if (route.meta && route.meta.affix) {
-          const tagPath = path.resolve(basePath, route.path)
-          tags.push({
-            fullPath: tagPath,
-            path: tagPath,
-            name: route.name,
-            meta: { ...route.meta }
-          })
-        }
-        if (route.children) {
-          const tempTags = this.filterAffixTags(route.children, route.path)
-          if (tempTags.length >= 1) {
-            tags = [...tags, ...tempTags]
-          }
-        }
-      })
-      return tags
-    },
-    initTags() {
-      const affixTags = this.affixTags = this.filterAffixTags(this.routes)
-      for (const tag of affixTags) {
-        // Must have tag name
-        if (tag.name) {
-          this.$store.dispatch('tagsView/addVisitedView', tag)
-        }
-      }
-    },
-    addTags() {
-      const { name } = this.$route
-      if (name) {
-        this.$store.dispatch('tagsView/addView', this.$route)
-      }
-      return false
-    },
-    moveToCurrentTag() {
-      const tags = this.$refs.tag
-      this.$nextTick(() => {
-        for (const tag of tags) {
-          if (tag.to.path === this.$route.path) {
-            this.$refs.scrollPane.moveToTarget(tag)
-            // when query is different then update
-            if (tag.to.fullPath !== this.$route.fullPath) {
-              this.$store.dispatch('tagsView/updateVisitedView', this.$route)
-            }
-            break
-          }
-        }
-      })
-    },
-    refreshSelectedTag(view) {
-      this.$store.dispatch('tagsView/delCachedView', view).then(() => {
-        const { fullPath } = view
-        this.$nextTick(() => {
-          this.$router.replace({
-            path: '/redirect' + fullPath
-          })
-        })
-      })
-    },
-    closeSelectedTag(view) {
-      this.$store.dispatch('tagsView/delView', view).then(({ visitedViews }) => {
-        if (this.isActive(view)) {
-          this.toLastView(visitedViews, view)
-        }
-      })
-    },
-    closeOthersTags() {
-      this.$router.push(this.selectedTag)
-      this.$store.dispatch('tagsView/delOthersViews', this.selectedTag).then(() => {
-        this.moveToCurrentTag()
-      })
-    },
-    closeAllTags(view) {
-      this.$store.dispatch('tagsView/delAllViews').then(({ visitedViews }) => {
-        if (this.affixTags.some(tag => tag.path === view.path)) {
-          return
-        }
-        this.toLastView(visitedViews, view)
-      })
-    },
-    toLastView(visitedViews, view) {
-      const latestView = visitedViews.slice(-1)[0]
-      if (latestView) {
-        this.$router.push(latestView)
-      } else {
-        // now the default is to redirect to the home page if there is no tags-view,
-        // you can adjust it according to your needs.
-        if (view.name === 'Dashboard') {
-          // to reload home page
-          this.$router.replace({ path: '/redirect' + view.fullPath })
-        } else {
-          this.$router.push('/')
-        }
-      }
-    },
-    openMenu(tag, e) {
-      const menuMinWidth = 105
-      const offsetLeft = this.$el.getBoundingClientRect().left // container margin left
-      const offsetWidth = this.$el.offsetWidth // container width
-      const maxLeft = offsetWidth - menuMinWidth // left boundary
-      const left = e.clientX - offsetLeft + 15 // 15: margin right
-
-      if (left > maxLeft) {
-        this.left = maxLeft
-      } else {
-        this.left = left
-      }
-
-      this.top = e.clientY - 40
-      this.visible = true
-      this.selectedTag = tag
-    },
-    closeMenu() {
-      this.visible = false
-    }
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-  .tags-view-container {
-    height: 34px;
-    width: 100%;
-    background: #fff;
-    border-bottom: 1px solid #d8dce5;
-    /*box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .12), 0 0 3px 0 rgba(0, 0, 0, .04);*/
-    .tags-view-wrapper {
-      .tags-view-item {
-        display: inline-block;
-        position: relative;
-        cursor: pointer;
-        height: 26px;
-        line-height: 26px;
-        border: 1px solid #d8dce5;
-        color: #495060;
-        background: #fff;
-        padding: 0 8px;
-        font-size: 12px;
-        margin-left: 5px;
-        margin-top: 4px;
-        &:first-of-type {
-          margin-left: 12px;
-        }
-        &:last-of-type {
-          margin-right: 15px;
-        }
-        &.active {
-          /*background-color: #42b983;*/
-          /*color: #fff;*/
-          /*border-color: #42b983;*/
-          &::before {
-            content: '';
-            background: #fff;
-            display: inline-block;
-            width: 8px;
-            height: 8px;
-            border-radius: 50%;
-            position: relative;
-            margin-right: 2px;
-          }
-        }
-      }
-    }
-    .contextmenu {
-      margin: 0;
-      background: #fff;
-      z-index: 3000;
-      position: absolute;
-      list-style-type: none;
-      padding: 5px 0;
-      border-radius: 4px;
-      font-size: 12px;
-      font-weight: 400;
-      color: #333;
-      box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, .3);
-      li {
-        margin: 0;
-        padding: 7px 16px;
-        cursor: pointer;
-        &:hover {
-          background: #eee;
-        }
-      }
-    }
-  }
-</style>
-
-<style lang="scss">
-  //reset element css of el-icon-close
-  .tags-view-wrapper {
-    .tags-view-item {
-      .el-icon-close {
-        width: 16px;
-        height: 16px;
-        vertical-align: 2px;
-        border-radius: 50%;
-        text-align: center;
-        transition: all .3s cubic-bezier(.645, .045, .355, 1);
-        transform-origin: 100% 50%;
-        &:before {
-          transform: scale(.6);
-          display: inline-block;
-          vertical-align: -3px;
-        }
-        &:hover {
-          background-color: #b4bccc;
-          color: #fff;
-        }
-      }
-    }
-  }
-</style>
diff --git a/src/views/layout/components/index.js b/src/views/layout/components/index.js
deleted file mode 100644
index 52d35e3..0000000
--- a/src/views/layout/components/index.js
+++ /dev/null
@@ -1,4 +0,0 @@
-export { default as Navbar } from './Navbar'
-export { default as Sidebar } from './Sidebar'
-export { default as AppMain } from './AppMain'
-export { default as AppHeader } from './AppHeader'

diff --git a/src/api/dashboard.js b/src/api/dashboard.js
index e69de29..0a4ddfc 100644
--- a/src/api/dashboard.js
+++ b/src/api/dashboard.js
@@ -0,0 +1,73 @@
+/**
+ * 井总览模块接口
+ */
+import request from '@/utils/request'
+
+// 用水量、噪声统计数据
+export function getWatchStatistic() {
+  return request({
+    url: 'waterStatistic/overview',
+    method: 'get'
+  })
+}
+// 水表数量
+export function waterMeterCount() {
+  return request({
+    url: 'waterMeterData/count',
+    method: 'get'
+  })
+}
+// 阀门数量
+export function valveCount() {
+  return request({
+    url: 'waterMeterData/count',
+    method: 'get'
+  })
+}
+
+// 查询一级分区各区用水量
+export function countByFirstArea(params) {
+  return request({
+    url: 'waterStatistic/countByFirstArea',
+    method: 'get',
+    params
+  })
+}
+
+// 查询一级分区7日用水量
+export function countByDayFirst(params) {
+  return request({
+    url: 'waterStatistic/countByDayFirst',
+    method: 'get',
+    params
+  })
+}
+
+// 查询二级分区各区用水量
+export function countBySecondArea(params) {
+  return request({
+    url: 'waterStatistic/countBySecondArea',
+    method: 'get',
+    params
+  })
+}
+
+// 查询二级分区水表告警
+export function alarmBySecondArea(params) {
+  return request({
+    url: 'waterStatistic/alarmBySecondArea',
+    method: 'get',
+    params
+  })
+}
+
+// 设备7日报警趋势
+export function alarmCountByDay(params) {
+  return request({
+    url: 'waterStatistic/alarmCountByDay',
+    method: 'get',
+    params
+  })
+}
+
+
diff --git a/src/components/BigData/Card/index.vue b/src/components/BigData/Card/index.vue
index d71e609..45359c9 100644
--- a/src/components/BigData/Card/index.vue
+++ b/src/components/BigData/Card/index.vue
@@ -10,6 +10,7 @@
         </div>
         <div class="card-panel-num" >
           {{ context }}
+          <span style="font-size: 10px;color:#888">{{unit}}</span>
         </div>
       </div>
     </div>
@@ -39,6 +40,10 @@
     color: {
       type: String,
       default: '#40c9c6'
+    },
+    unit:{
+      type: String,
+      default:''
     }
   },
   computed: {
diff --git a/src/components/BigData/Card1/index.vue b/src/components/BigData/Card1/index.vue
index 030b2dc..aa46454 100644
--- a/src/components/BigData/Card1/index.vue
+++ b/src/components/BigData/Card1/index.vue
@@ -1,10 +1,11 @@
 <template>
   <el-card :body-style="{ padding: '0px' }" shadow="always">
-    <div class="card-panel" >
-      <div :style="backgroundColor" class="card-panel-icon-wrapper">
-        <svg-icon :icon-class="icon" class-name="card-panel-icon" />
+    <div class="card-panel">
+      <div v-if="icon" :style="backgroundColor" class="card-panel-icon-wrapper">
+        <svg-icon :icon-class="icon" class-name="card-panel-icon"/>
       </div>
-      <div  class="card-panel-description">
+      <div v-else style="float:left; width: 20px;height: 100%;"></div>
+      <div class="card-panel-description">
         <!-- <div class="card-panel-text">
           {{ title[0] }} <span class="card-panel-num">{{ context[0] }}</span>
         </div>
@@ -13,18 +14,20 @@
         </div> -->
         <div class="two" v-if="title.length===2">
           <div class="card-panel-text">
-            {{ title[0] }} <span class="card-panel-num">{{ context[0] }}</span>
+            {{ title[0] }} <span class="card-panel-num">{{ context[0] }}<span
+            style="font-size: 10px;color:#888;margin-left: 5px">{{unit}}</span></span>
           </div>
-          <div class="card-panel-text" >
-            {{ title[1] }} <span class="card-panel-num">{{ context[1] }}</span>
+          <div class="card-panel-text">
+            {{ title[1] }} <span class="card-panel-num">{{ context[1] }}<span
+            style="font-size: 10px;color:#888;margin-left: 5px">{{unit}}</span></span>
           </div>
         </div>
         <div class="only" v-else>
           <div class="card-panel-text">
             {{ title[0] }}
           </div>
-          <div class="card-panel-num" >
-            {{ context[0] }}
+          <div class="card-panel-num">
+            {{ context[0] }}<span style="font-size: 10px;color:#888">{{unit}}</span>
           </div>
         </div>
       </div>
@@ -33,42 +36,46 @@
 </template>
 
 <script>
-export default {
-  name: 'Card1',
-  props: {
-    title: {
-      type: Array,
-      default: function() {
-        return ['标题', '标题']
+  export default {
+    name: 'Card1',
+    props: {
+      title: {
+        type: Array,
+        default: function () {
+          return ['标题', '标题']
+        }
+      },
+      subtitle: {
+        type: String,
+        default: ''
+      },
+      icon: {
+        type: String,
+        default: ''
+      },
+      context: {
+        type: Array,
+        default: function () {
+          return ['--', '--']
+        }
+      },
+      color: {
+        type: String,
+        default: '#40c9c6'
+      },
+      unit: {
+        type: String,
+        default: ''
       }
     },
-    subtitle: {
-      type: String,
-      default: ''
-    },
-    icon: {
-      type: String,
-      default: ''
-    },
-    context: {
-      type: Array,
-      default: function() {
-        return ['--', '--']
-      }
-    },
-    color: {
-      type: String,
-      default: '#40c9c6'
-    }
-  },
-  computed: {
-    backgroundColor() {
-      return {
-        color: this.color
+    computed: {
+      backgroundColor() {
+        return {
+          color: this.color
+        }
       }
     }
   }
-}
 </script>
 
 <style lang="scss" scoped>
@@ -108,7 +115,7 @@
       overflow: auto;
       margin-left: 5px;
 
-      .two{
+      .two {
         .card-panel-text {
           line-height: 18px;
           color: rgba(0, 0, 0, 0.45);
@@ -123,7 +130,7 @@
           float: right;
         }
       }
-      .only{
+      .only {
         .card-panel-text {
           line-height: 18px;
           color: rgba(0, 0, 0, 0.45);
diff --git a/src/icons/svg/icon-noise.svg b/src/icons/svg/icon-noise.svg
new file mode 100644
index 0000000..00bef71
--- /dev/null
+++ b/src/icons/svg/icon-noise.svg
@@ -0,0 +1,2 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1648634383080" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2093" xmlns:xlink="http://www.w3.org/1999/xlink" width="128" height="128"><defs><style type="text/css">@font-face { font-family: feedback-iconfont; src: url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.woff2?t=1630033759944") format("woff2"), url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.woff?t=1630033759944") format("woff"), url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.ttf?t=1630033759944") format("truetype"); }
+</style></defs><path d="M875.039 549.868c-25.436 0-47.411 13.91-59.3 34.4h-125.9l-99.564-199.177-76.703 281.23-51.528-566.757-67.461-5.735-130.8 490.44H49.397v68.802h267.259l94.464-354.268 51.235 563.733 67.451 5.913 79.432-291.445 38.077 76.057h168.428c11.91 20.419 33.864 34.391 59.3 34.391 37.98 0 68.792-30.879 68.792-68.797-0.005-38.062-30.817-68.787-68.797-68.787z" p-id="2094"></path></svg>
\ No newline at end of file
diff --git a/src/icons/svg/icon-valve.svg b/src/icons/svg/icon-valve.svg
new file mode 100644
index 0000000..f5d96e2
--- /dev/null
+++ b/src/icons/svg/icon-valve.svg
@@ -0,0 +1,2 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1648634707805" class="icon" viewBox="0 0 1090 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3809" xmlns:xlink="http://www.w3.org/1999/xlink" width="136.25" height="128"><defs><style type="text/css">@font-face { font-family: feedback-iconfont; src: url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.woff2?t=1630033759944") format("woff2"), url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.woff?t=1630033759944") format("woff"), url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.ttf?t=1630033759944") format("truetype"); }
+</style></defs><path d="M502.944 296.975V143.052h-231.98c-31.587 0-57.321-24.93-57.321-55.526 0-30.598 25.75-55.526 57.321-55.526H833.06c31.571 0 57.306 24.93 57.306 55.525 0 30.922-25.735 55.526-57.29 55.526h-231.64v153.924h18.179c21.615 0 39.112 16.955 39.112 37.904v90.565l-213.105-0.34v-90.225c0-20.95 17.497-37.904 39.128-37.904h18.194z m-381.74 590.293v63.84c0 9.306-7.834 16.955-17.698 16.955H58.231c-9.862-0.001-17.698-7.65-17.698-17.296V542.472c0-9.63 7.835-17.28 17.698-17.28h45.274c9.863 0 17.698 7.65 17.698 17.28v83.133h150.55c6.272-85.518 79.247-152.95 168.387-152.95h207.98c89.14 0 162.116 67.432 168.403 152.95h150.873v-83.798c0-9.29 7.495-16.615 17.033-16.615h46.297c9.523 0 17.001 7.308 17.001 16.615v409.625c0.341 9.321-7.478 16.63-17.016 16.63h-46.297c-9.523 0-17.018-7.309-17.018-16.63v-64.165H805.36C780.755 948.583 719.655 992 648.119 992H440.142c-71.52 0-132.635-43.402-157.239-104.733H121.204z" p-id="3810"></path></svg>
\ No newline at end of file
diff --git a/src/views/dashboard/components/PanelGroup.vue b/src/views/dashboard/components/PanelGroup.vue
index b72d289..332cbf9 100644
--- a/src/views/dashboard/components/PanelGroup.vue
+++ b/src/views/dashboard/components/PanelGroup.vue
@@ -1,12 +1,12 @@
 <template>
   <el-row class="panel-group">
     <div v-for="card in dataGroup1" :key="card.index" class="card-panel-col">
-      <card1 :title="card.title" :context="card.context" :icon="card.icon" :color="card.color"/>
+      <card1 :title="card.title" :context="card.context" :icon="card.icon" :color="card.color" :unit="card.unit"/>
     </div>
 
     <div v-for="card in dataGroup" :key="card.title" class="card-panel-col">
       <div v-if="hasPerm(card.permission)">
-        <card :title="card.title" :context="card.context" :icon="card.icon" :color="card.color" @click.native="goPage(card.path)"/>
+        <card :title="card.title" :context="card.context" :icon="card.icon" :unit="card.unit" :color="card.color" @click.native="goPage(card.path)"/>
       </div>
     </div>
   </el-row>
@@ -16,7 +16,7 @@
 import Card1 from '@/components/BigData/Card1'
 import Card from '@/components/BigData/Card'
 // 首页
-import { getWatchStatistic , waterMeterCount } from '@/api/overview'
+import { getWatchStatistic , waterMeterCount, valveCount } from '@/api/dashboard'
 // 根据布防数量统计井数量
 import { wellCountByBfzt } from '@/api/well'
 // 当前报警数
@@ -36,30 +36,33 @@
           context: ['--', '--'],
           icon: 'icon-water',
           color: '#40c9c6',
+          unit: '吨',
           index: 0
         },
         {
-          title: ['今日用水量', '昨日用水量'],
+          title: ['今日用水量', '生产厂区用水量'],
           context: ['--', '--'],
-          icon: 'icon-water',
+          icon: '',
           color: '#36a3f7',
+          unit: '吨',
           index: 1
         },
         {
-          title: ['实时噪声'],
+          title: ['滑道实时噪声'],
           context: ['--'],
-          icon: 'icon-device',
+          icon: 'icon-noise',
           color: '#f1c353',
+          unit: 'db',
           index: 2
         }
       ],
       dataGroup: [
         {
-          title: '设备总数',
+          title: '阀门数量',
           context: '--',
-          icon: 'icon-device',
+          icon: 'icon-valve',
           color: '#40c9c6',
-          path: '/deviceList',
+          path: '/deviceList?deviceType=20',
           permission: '/device/list'
         },
         {
@@ -67,11 +70,11 @@
           context: '--',
           icon: 'icon-watch',
           color: '#9694f7',
-          path: '/deviceList',
+          path: '/deviceList?deviceType=13',
           permission: '/device/list'
         },
         {
-          title: '当前报警数',
+          title: '报警信息',
           context: '--',
           icon: 'icon-alarm',
           color: '#f4516c',
@@ -83,10 +86,10 @@
   },
   mounted() {
     this.getWater()
-    this.getWellCount()
+    // this.getWellCount()
     this.getDeviceCount()
     this.getAlarmCount()
-    this.getJobCount()
+    // this.getJobCount()
   },
   methods: {
     refresh() {
@@ -97,24 +100,31 @@
       this.$router.push(path)
     },
     getWater() {
+      // 用水量
       getWatchStatistic().then(response => {
-        this.dataGroup1[0].context = [response.data.total, response.data.month]
-        this.dataGroup1[1].context = [response.data.today, response.data.yesterday]
-        this.dataGroup1[2].context = [Number(response.data.sound).toFixed(2)]
+        this.dataGroup1[0].context = [response.data.total?parseFloat(response.data.total).toFixed(0):'--', response.data.month?parseFloat(response.data.month).toFixed(0):'--']
+        this.dataGroup1[1].context = [response.data.today?parseFloat(response.data.today).toFixed(0):'--', response.data.yesterday?parseFloat(response.data.yesterday).toFixed(0):'--']
+        this.dataGroup1[2].context = [response.data.sound?Number(response.data.sound).toFixed(2):'--']
       })
-      waterMeterCount().then(response => {
-        this.dataGroup[1].context = response.data
-      })
+
     },
-    getWellCount() {
-      wellCountByBfzt().then(response => {
-        this.dataGroup[0].context = response.data.total
-      })
-    },
+    // getWellCount() {
+    //   wellCountByBfzt().then(response => {
+    //     this.dataGroup[0].context = response.data.total
+    //   })
+    // },
     getDeviceCount() {
       // deviceStaticByStatus().then(response => {
       //   this.dataGroup[1].context = response.data.total
       // })
+      // 阀门数量
+      valveCount().then(response => {
+        this.dataGroup[0].context = response.data
+      })
+      // 水表数量
+      waterMeterCount().then(response => {
+        this.dataGroup[1].context = response.data
+      })
     },
     getAlarmCount() {
       alarmNowStatic().then(response => {
@@ -159,7 +169,7 @@
   //   &:hover {
   //     .card-panel-icon-wrapper {
   //       color: #fff;
-        
+
   //     }
 
   //     .icon-people {
diff --git a/src/views/dashboard/components/waterCountByAreaBar.vue b/src/views/dashboard/components/waterCountByAreaBar.vue
index 1bdac48..c488923 100644
--- a/src/views/dashboard/components/waterCountByAreaBar.vue
+++ b/src/views/dashboard/components/waterCountByAreaBar.vue
@@ -1,9 +1,10 @@
 <template>
   <div class="container">
     <div class="statistic-container">
+      <el-button round size="mini" @click="setDefaultTime('year')">本年</el-button>
+      <el-button round size="mini" @click="setDefaultTime('season')">本季</el-button>
       <el-button round size="mini" @click="setDefaultTime('month')">本月</el-button>
-      <el-button round size="mini" @click="setDefaultTime('week')">近7日</el-button>
-      <el-button round size="mini" @click="setDefaultTime('yesterday')">昨日</el-button>
+      <el-button round size="mini" @click="setDefaultTime('week')">本周</el-button>
       <el-button round size="mini" @click="setDefaultTime('today')">今日</el-button>
       <el-date-picker
         v-model="timeRange"
@@ -107,7 +108,7 @@
   },
   mounted() {
     this.setDefaultTime('today')
-    this.fetchArea()
+    // this.fetchArea()
   },
   methods: {
     fetchArea() {
@@ -130,10 +131,11 @@
     },
     fetchData() {
       const params = {
-        areaId: this.areaId,
+        areaId: '110000',
         startTime: this.timeRange[0],
         endTime: this.timeRange[1]
       }
+      this.$emit('change', params)
       countBySecondArea(params).then(response => {
         this.isShow = false
         this.chartData.rows = response.data
@@ -153,7 +155,21 @@
       })
     },
     setDefaultTime(val) {
-      if (val === 'month') {
+      if (val === 'year') {
+        var today = new Date()
+        var tYear = today.getFullYear()
+        const beginTime = tYear + '-01-01'
+        const endTime = getDayTime(new Date().getTime())
+        this.timeRange = [beginTime, endTime.Format('yyyy-MM-dd')]
+      }if (val === 'season') {
+        var today = new Date()
+        var tYear = today.getFullYear()
+        var tMonth = today.getMonth() + 1
+        const oldMonth = tMonth<4?'01':(tMonth<7?'04':(tMonth<10?'07':'10'))
+        const beginTime = tYear + '-' + oldMonth + '-01'
+        const endTime = getDayTime(new Date().getTime())
+        this.timeRange = [beginTime, endTime.Format('yyyy-MM-dd')]
+      }else if (val === 'month') {
         var today = new Date()
         var tYear = today.getFullYear()
         var tMonth = today.getMonth() + 1
@@ -164,7 +180,8 @@
         const endTime = getDayTime(new Date().getTime())
         this.timeRange = [beginTime, endTime.Format('yyyy-MM-dd')]
       } else if (val === 'week') {
-        this.timeRange = [getDayTime(new Date().getTime() - 24 * 6 * 60 * 60 * 1000).Format('yyyy-MM-dd'), getDayTime(new Date().getTime()).Format('yyyy-MM-dd')]
+        const nowDayOfWeek =  new Date().getDay()-1
+        this.timeRange = [getDayTime(new Date().getTime() - 24 * nowDayOfWeek * 60 * 60 * 1000).Format('yyyy-MM-dd'), getDayTime(new Date().getTime()).Format('yyyy-MM-dd')]
       } else if (val === 'yesterday') {
         this.timeRange = [getDayTime(new Date().getTime() - 24 * 60 * 60 * 1000).Format('yyyy-MM-dd'), getDayTime(new Date().getTime() - 24 * 60 * 60 * 1000).Format('yyyy-MM-dd')]
       } else if (val === 'today') {
diff --git a/src/views/dashboard/components/waterCountByDay.vue b/src/views/dashboard/components/waterCountByDay.vue
index 8e12f02..78d1f7c 100644
--- a/src/views/dashboard/components/waterCountByDay.vue
+++ b/src/views/dashboard/components/waterCountByDay.vue
@@ -1,12 +1,12 @@
 <template>
   <div class="container">
-    <div class="function">
-      <el-button round size="mini" @click="changeTime('year')">近1年</el-button>
-      <el-button round size="mini" @click="changeTime('halfyear')">近6月</el-button>
-      <el-button round size="mini" @click="changeTime('3month')">近3月</el-button>
-      <el-button round size="mini" @click="changeTime('month')">近1月</el-button>
-      <el-button round size="mini" @click="changeTime('week')">近1周</el-button>
-    </div>
+    <!--<div class="function">-->
+      <!--<el-button round size="mini" @click="changeTime('year')">近1年</el-button>-->
+      <!--<el-button round size="mini" @click="changeTime('halfyear')">近6月</el-button>-->
+      <!--<el-button round size="mini" @click="changeTime('3month')">近3月</el-button>-->
+      <!--<el-button round size="mini" @click="changeTime('month')">近1月</el-button>-->
+      <!--<el-button round size="mini" @click="changeTime('week')">近1周</el-button>-->
+    <!--</div>-->
     <ve-line :data="chartData" :title="title" :extend="extend" :settings="chartSettings"/>
   </div>
 </template>
@@ -17,6 +17,18 @@
 import { getDoorAreaTree } from '@/api/system/area'
 export default {
   name: 'WaterCountByDay',
+  props:{
+    query: {
+      type: Object,
+      default:()=>{
+        return {
+          areaId: '',
+          startTime: '',
+          endTime: ''
+        }
+      }
+    }
+  },
   data() {
     return {
       listQuery: {
@@ -52,8 +64,13 @@
     }
   },
   mounted() {
-    this.changeTime('month')
-    this.fetchArea()
+    // this.changeTime('month')
+    // this.fetchArea()
+  },
+  watch:{
+    query(val){
+      this.fetchData()
+    }
   },
   methods: {
     fetchArea() {
@@ -73,7 +90,7 @@
       })
     },
     fetchData() {
-      countByDayFirst(this.listQuery).then(response => {
+      countByDayFirst(this.query).then(response => {
         const arr = response.data.map(function(item) {
           for (let i = 0; i < item.data.length; i++) {
             item[item.data[i].areaName] = item.data[i].count
diff --git a/src/views/dashboard/components/waterCountByDept.vue b/src/views/dashboard/components/waterCountByDept.vue
index a0c82cf..02e27cd 100644
--- a/src/views/dashboard/components/waterCountByDept.vue
+++ b/src/views/dashboard/components/waterCountByDept.vue
@@ -1,22 +1,22 @@
 <!--suppress ALL -->
 <template>
   <div class="container">
-    <div class="function">
-      <el-button round size="mini" @click="changeTime('year')">近1年</el-button>
-      <el-button round size="mini" @click="changeTime('halfyear')">近6月</el-button>
-      <el-button round size="mini" @click="changeTime('3month')">近3月</el-button>
-      <el-button round size="mini" @click="changeTime('month')">近1月</el-button>
-      <el-button round size="mini" @click="changeTime('week')">近1周</el-button>
-    </div>
+    <!--<div class="function">-->
+      <!--<el-button round size="mini" @click="changeTime('year')">近1年</el-button>-->
+      <!--<el-button round size="mini" @click="changeTime('halfyear')">近6月</el-button>-->
+      <!--<el-button round size="mini" @click="changeTime('3month')">近3月</el-button>-->
+      <!--<el-button round size="mini" @click="changeTime('month')">近1月</el-button>-->
+      <!--<el-button round size="mini" @click="changeTime('week')">近1周</el-button>-->
+    <!--</div>-->
     <ve-pie :data="chartData" :extend="extend" :title="title"/>
-    <div class="function">
-      <el-button
-        v-for="item in areaList"
-        :key="item.id"
-        round
-        @click="areaChange(item.id)"
-        size="mini">{{item.name}}</el-button>
-    </div>
+    <!--<div class="function">-->
+      <!--<el-button-->
+        <!--v-for="item in areaList"-->
+        <!--:key="item.id"-->
+        <!--round-->
+        <!--@click="areaChange(item.id)"-->
+        <!--size="mini">{{item.name}}</el-button>-->
+    <!--</div>-->
   </div>
 </template>
 
@@ -25,6 +25,18 @@
 import { getDoorAreaTree } from '@/api/system/area'
 export default {
   name: 'WaterCountByDepy',
+  props:{
+    query: {
+      type: Object,
+      default:()=>{
+        return {
+          areaId: '',
+          startTime: '',
+          endTime: ''
+        }
+      }
+    }
+  },
   data() {
     return {
       listQuery: {
@@ -69,7 +81,12 @@
   },
   mounted() {
     // TODO:待调试真接口
-    this.fetchArea()
+    // this.fetchArea()
+  },
+  watch:{
+    query(val){
+      this.fetchData()
+    }
   },
   methods: {
     fetchArea() {
@@ -104,8 +121,7 @@
       //   { 'areaName': '码头作业区', 'count': 78 },
       //   { 'areaName': '车间生产区', 'count': 78 }
       // ]
-      this.listQuery.areaId = this.areaId
-      countBySecondArea(this.listQuery).then(response => {
+      countBySecondArea(this.query).then(response => {
         this.chartData.rows = response.data
       })
     },
diff --git a/src/views/dashboard/components/waterNote.vue b/src/views/dashboard/components/waterNote.vue
new file mode 100644
index 0000000..aa0f448
--- /dev/null
+++ b/src/views/dashboard/components/waterNote.vue
@@ -0,0 +1,152 @@
+<!--suppress ALL -->
+<template>
+  <div class="container">
+    <div>
+      用水事记
+    </div>
+
+  </div>
+</template>
+
+<script>
+import { countBySecondArea } from '@/api/overview'
+import { getDoorAreaTree } from '@/api/system/area'
+export default {
+  name: 'WaterNote',
+  props:{
+    query: {
+      type: Object,
+      default:()=>{
+        return {
+          areaId: '',
+          startTime: '',
+          endTime: ''
+        }
+      }
+    }
+  },
+  data() {
+    return {
+      listQuery: {
+        areaId: '',
+        startTime: '',
+        endTime: ''
+      },
+      areaId:'',
+      areaList: [],
+      chartData: {
+        columns: ['areaName', 'count'],
+        rows: []
+      },
+      extend: {
+        grid: {
+          right: '30%'
+        },
+        legend: {
+          type: 'scroll',
+          top: '60px',
+          right: '0px',
+          orient: 'vertical'
+        },
+        series: {
+          label: { show: true, position: 'outside', formatter: '{b}' },
+          right: 120
+        },
+        tooltip: { trigger: 'item', formatter: '{b}<br/>用水量：{c}吨<br/>占比：{d}%' }
+      },
+      title: {
+        text: '分区用水占比图'
+      },
+      chartSettings: {
+        labelMap: {
+          'areaName': '分区',
+          'count': '用水量'
+        },
+        dimension: 'areaName',
+        metrics: 'count'
+      }
+    }
+  },
+  mounted() {
+    // TODO:待调试真接口
+    // this.fetchArea()
+  },
+  watch:{
+    query(val){
+      this.fetchData()
+    }
+  },
+  methods: {
+    fetchArea() {
+      getDoorAreaTree().then(response => {
+        if (response.code === 200) {
+          this.areaList = response.data.filter(item => {
+            return item.pid === '1'
+          }).map(function(item) {
+            return {
+              id: item.id, name: item.name
+            }
+          })
+          if (this.areaList.length !== 0) { this.areaChange(this.areaList[0].id) }
+        }
+      })
+    },
+    areaChange(val){
+      this.areaId = val
+      this.fetchData()
+    },
+    // 获取统计数据
+    fetchData() {
+      // this.chartData.rows = [
+      //   { 'areaName': '科技楼及食堂', 'count': 53 },
+      //   { 'areaName': 'A\\B\\C\\D\\E座', 'count': 78 },
+      //   { 'areaName': '厂区', 'count': 78 },
+      //   { 'areaName': '分段分区', 'count': 78 },
+      //   { 'areaName': '船坞分区', 'count': 78 },
+      //   { 'areaName': '刀把码头', 'count': 78 },
+      //   { 'areaName': '制管作业区', 'count': 78 },
+      //   { 'areaName': '滑道作业区', 'count': 78 },
+      //   { 'areaName': '码头作业区', 'count': 78 },
+      //   { 'areaName': '车间生产区', 'count': 78 }
+      // ]
+      countBySecondArea(this.query).then(response => {
+        this.chartData.rows = response.data
+      })
+    },
+    changeTime(timeType) {
+      let startTime
+      switch (timeType) {
+        case 'year':
+          startTime = getDayTime(new Date().getTime() - 24 * 365 * 60 * 60 * 1000)
+          this.listQuery.startTime = startTime.Format('yyyy-MM-dd')
+          break
+        case 'halfyear':
+          startTime = getDayTime(new Date().getTime() - 24 * 182 * 60 * 60 * 1000)
+          this.listQuery.startTime = startTime.Format('yyyy-MM-dd')
+          break
+        case '3month':
+          startTime = getDayTime(new Date().getTime() - 24 * 90 * 60 * 60 * 1000)
+          this.listQuery.startTime = startTime.Format('yyyy-MM-dd')
+          break
+        case 'month':
+          startTime = getDayTime(new Date().getTime() - 24 * 30 * 60 * 60 * 1000)
+          this.listQuery.startTime = startTime.Format('yyyy-MM-dd')
+          break
+        case 'week':
+          startTime = getDayTime(new Date().getTime() - 24 * 7 * 60 * 60 * 1000)
+          this.listQuery.startTime = startTime.Format('yyyy-MM-dd')
+          break
+      }
+      const endTime = new Date()
+      this.listQuery.endTime = endTime.Format('yyyy-MM-dd')
+      this.fetchData()
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+  .container{
+    position:relative;
+    height: 455px;
+  }
+</style>
diff --git a/src/views/dashboard/index.vue b/src/views/dashboard/index.vue
index fdbc38a..831dbc3 100644
--- a/src/views/dashboard/index.vue
+++ b/src/views/dashboard/index.vue
@@ -1,31 +1,33 @@
 <template>
   <div class="dashboard-container" style="background-color: white">
     <panel-group ref="panelgroup"/>
-    <el-row :gutter="10">
+    <el-row>
       <!-- 用水统计图 -->
+      <el-col :span="18">
+        <el-card shadow="never">
+          <water-count-by-area-bar @change="changeWaterQuery"/>
+        </el-card>
+      </el-col>
+      <el-col :span="6">
+        <el-card shadow="never">
+          <water-note/>
+        </el-card>
+      </el-col>
+    </el-row>
+    <el-row>
+      <!-- 分区用水占比图 -->
       <el-col :span="12">
         <el-card shadow="never">
-          <water-count-by-dept-bar/>
+          <water-count-by-dept :query="listQuery1" ref="waterCountPie"/>
         </el-card>
       </el-col>
       <!-- 用水走势图 -->
       <el-col :span="12">
         <el-card shadow="never">
-          <water-count-by-day/>
+          <water-count-by-day :query="listQuery1" ref="waterCountDay"/>
         </el-card>
       </el-col>
-      <!-- 分区用水统计图 -->
-      <el-col :span="12">
-        <el-card shadow="never">
-          <water-count-by-area-bar/>
-        </el-card>
-      </el-col>
-      <!-- 分区用水占比图 -->
-      <el-col :span="12">
-        <el-card shadow="never">
-          <water-count-by-depy/>
-        </el-card>
-      </el-col>
+
       <!--水表报警次数统计-->
       <el-col v-if="hasPerm('/statics/alarmsByDay')" :span="12">
         <el-card shadow="never">
@@ -64,20 +66,22 @@
 import DeviceCountByOnline from './components/DeviceCountByOnline'
 import AlarmByDays from './components/AlarmByDays'
 import JobByStatus from './components/JobByStatus'
-import WaterCountByDepy from './components/waterCountByDept'
+import WaterCountByDept from './components/waterCountByDept'
 import WaterCountByDeptBar from './components/waterCountByDeptBar'
 import WaterCountByDay from './components/waterCountByDay'
 import WaterCountByAreaBar from "./components/waterCountByAreaBar";
 import WatchAlarmBar from "./components/watchAlarmBar";
+import WaterNote from "./components/waterNote";
 
 export default {
   name: 'Dashboard',
   components: {
+    WaterNote,
     WatchAlarmBar,
     WaterCountByAreaBar,
     WaterCountByDay,
     WaterCountByDeptBar,
-    WaterCountByDepy,
+    WaterCountByDept,
     JobByStatus,
     AlarmByDays,
     PanelGroup,
@@ -108,12 +112,25 @@
       state.needRefresh = needRefresh
     }
   },
+  data(){
+    return {
+      listQuery1:{
+        areaId:'110000',
+        startTime:new Date().Format('yyyy-MM-dd'),
+        endTime:new Date().Format('yyyy-MM-dd')
+      },// 分区用水量查询条件
+      listQuery2:{
+        areaId:'',
+        startTime:'',
+        endTime:''
+      } // 分区报警查询条件
+    }
+  },
   watch: {
     needRefresh(val) {
       // 需要刷新
       if (val) {
         console.log('refresh dashboard')
-        debugger
         this.$refs.panelgroup.refresh()
       }
     }
@@ -124,6 +141,10 @@
   methods: {
     webSocket() {
       this.$store.dispatch('initWebSocket')
+    },
+    // 切换分区查询条件
+    changeWaterQuery(listQuery1){
+      this.listQuery1 = listQuery1
     }
   }
 }
diff --git a/src/views/dashboard/index_bak.vue b/src/views/dashboard/index_bak.vue
new file mode 100644
index 0000000..fdbc38a
--- /dev/null
+++ b/src/views/dashboard/index_bak.vue
@@ -0,0 +1,149 @@
+<template>
+  <div class="dashboard-container" style="background-color: white">
+    <panel-group ref="panelgroup"/>
+    <el-row :gutter="10">
+      <!-- 用水统计图 -->
+      <el-col :span="12">
+        <el-card shadow="never">
+          <water-count-by-dept-bar/>
+        </el-card>
+      </el-col>
+      <!-- 用水走势图 -->
+      <el-col :span="12">
+        <el-card shadow="never">
+          <water-count-by-day/>
+        </el-card>
+      </el-col>
+      <!-- 分区用水统计图 -->
+      <el-col :span="12">
+        <el-card shadow="never">
+          <water-count-by-area-bar/>
+        </el-card>
+      </el-col>
+      <!-- 分区用水占比图 -->
+      <el-col :span="12">
+        <el-card shadow="never">
+          <water-count-by-depy/>
+        </el-card>
+      </el-col>
+      <!--水表报警次数统计-->
+      <el-col v-if="hasPerm('/statics/alarmsByDay')" :span="12">
+        <el-card shadow="never">
+          <watch-alarm-bar/>
+        </el-card>
+      </el-col>
+      <!--报警次数统计-->
+      <el-col v-if="hasPerm('/statics/alarmsByDay')" :span="12">
+        <el-card shadow="never">
+          <alarm-by-days/>
+        </el-card>
+      </el-col>
+      <!--设备在线数量统计-->
+      <el-col v-if="hasPerm('/statics/deviceStaticsByType')" :span="12">
+        <el-card shadow="never">
+          <device-count-by-online/>
+        </el-card>
+      </el-col>
+
+      <!--设备数量统计-->
+      <el-col v-if="hasPerm('/statics/deviceStaticsByType')" :span="12">
+        <el-card shadow="never">
+          <device-count/>
+        </el-card>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+import PanelGroup from './components/PanelGroup'
+import WellCountByBfzt from './components/WellCountByBfzt'
+import WellCountByType from './components/WellCountByType'
+import DeviceCount from './components/DeviceCount'
+import DeviceCountByOnline from './components/DeviceCountByOnline'
+import AlarmByDays from './components/AlarmByDays'
+import JobByStatus from './components/JobByStatus'
+import WaterCountByDepy from './components/waterCountByDept'
+import WaterCountByDeptBar from './components/waterCountByDeptBar'
+import WaterCountByDay from './components/waterCountByDay'
+import WaterCountByAreaBar from "./components/waterCountByAreaBar";
+import WatchAlarmBar from "./components/watchAlarmBar";
+
+export default {
+  name: 'Dashboard',
+  components: {
+    WatchAlarmBar,
+    WaterCountByAreaBar,
+    WaterCountByDay,
+    WaterCountByDeptBar,
+    WaterCountByDepy,
+    JobByStatus,
+    AlarmByDays,
+    PanelGroup,
+    WellCountByBfzt,
+    WellCountByType,
+    DeviceCount,
+    DeviceCountByOnline
+  },
+  computed: {
+    ...mapGetters([
+      'name',
+      'roleNames',
+      'roleTips',
+      'wellTypes',
+      'deviceTypes',
+      'communications',
+      'area'
+    ])
+  },
+  mutations: {
+    SET_WEBSOCKET: (state, websocket) => {
+      state.websocket = websocket
+    },
+    SET_WS_STATUS: (state, wsStatus) => {
+      state.wsStatus = wsStatus
+    },
+    SET_NEED_REFRESH: (state, needRefresh) => {
+      state.needRefresh = needRefresh
+    }
+  },
+  watch: {
+    needRefresh(val) {
+      // 需要刷新
+      if (val) {
+        console.log('refresh dashboard')
+        debugger
+        this.$refs.panelgroup.refresh()
+      }
+    }
+  },
+  mounted() {
+    // this.webSocket()
+  },
+  methods: {
+    webSocket() {
+      this.$store.dispatch('initWebSocket')
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.dashboard-container{
+  .el-row{
+    .el-col{
+      margin-bottom: 10px;
+    }
+  }
+}
+.dashboard {
+  &-container {
+    padding: 10px 20px;
+  }
+  &-text {
+    font-size: 30px;
+    line-height: 46px;
+  }
+}
+</style>
diff --git a/src/views/layout/Layout.vue b/src/views/layout/Layout.vue
deleted file mode 100644
index 7c3d46d..0000000
--- a/src/views/layout/Layout.vue
+++ /dev/null
@@ -1,111 +0,0 @@
-<template>
-  <el-container :class="classObj" class="app-wrapper">
-    <div v-if="device==='mobile'&&sidebar.opened" class="drawer-bg" @click="handleClickOutside"/>
-    <app-header class="app-header"/>
-    <el-main class="app-body">
-      <!--侧边栏-->
-      <sidebar class="sidebar-container"/>
-      <!--右半部分-->
-      <div :class="{hasTagsView:needTagsView}" class="main-container">
-        <!--开启固定头部设置-->
-        <div v-if="fixedHeader">
-          <!--导航(面包屑)-->
-          <navbar/>
-          <!--标签栏-->
-          <tags-view v-if="needTagsView" />
-          <!--主内容包裹在el-scrollbar中-->
-          <el-scrollbar class="no-head-scrollbar">
-            <app-main/>
-          </el-scrollbar>
-        </div>
-        <!--为开始固定头部设置-->
-        <div v-else>
-          <!--导航，tagsView都包裹在el-scrollbar中-->
-          <el-scrollbar class="has-head-scrollbar">
-            <navbar/>
-            <tags-view v-if="needTagsView" />
-            <app-main/>
-          </el-scrollbar>
-        </div>
-        <!--悬浮框-->
-        <right-panel v-if="false">
-          <settings />
-        </right-panel>
-      </div>
-    </el-main>
-  </el-container>
-</template>
-
-<script>
-import RightPanel from '@/components/RightPanel'
-import { AppHeader, Navbar, Sidebar, AppMain } from './components'
-import ResizeMixin from './mixin/ResizeHandler'
-import TagsView from './components/TagsView/index'
-import { mapState } from 'vuex'
-import Settings from './components/Settings/index'
-
-export default {
-  name: 'Layout',
-  components: {
-    Settings,
-    TagsView,
-    AppHeader,
-    Navbar,
-    Sidebar,
-    AppMain,
-    RightPanel
-  },
-  mixins: [ResizeMixin],
-  computed: {
-    ...mapState({
-      sidebar: state => state.app.sidebar,
-      device: state => state.app.device,
-      showSettings: state => state.settings.showSettings,
-      needTagsView: state => state.settings.tagsView,
-      fixedHeader: state => state.settings.fixedHeader
-    }),
-    classObj() {
-      return {
-        hideSidebar: !this.sidebar.opened,
-        openSidebar: this.sidebar.opened,
-        withoutAnimation: this.sidebar.withoutAnimation,
-        mobile: this.device === 'mobile'
-      }
-    }
-  },
-  methods: {
-    handleClickOutside() {
-      this.$store.dispatch('CloseSideBar', { withoutAnimation: false })
-    }
-  }
-}
-</script>
-
-<style rel="stylesheet/scss" lang="scss" scoped>
-  @import "src/styles/mixin.scss";
-  .app-wrapper {
-    @include clearfix;
-    position: relative;
-    height: 100%;
-    width: 100%;
-    &.mobile.openSidebar{
-      position: fixed;
-      top: 0;
-    }
-  }
-  .drawer-bg {
-    background: #000;
-    opacity: 0.3;
-    width: 100%;
-    top: 0;
-    height: 100%;
-    position: absolute;
-    z-index: 999;
-  }
-  /*.el-scrollbar{*/
-    /*height: calc(100vh - 50px);*/
-  /*}*/
-  .has-head-scrollbar{
-    height: 100vh;
-  }
-</style>
diff --git a/src/views/layout/components/AppHeader.vue b/src/views/layout/components/AppHeader.vue
deleted file mode 100644
index 8d8912e..0000000
--- a/src/views/layout/components/AppHeader.vue
+++ /dev/null
@@ -1,151 +0,0 @@
-<template>
-  <el-header class="app-header">
-    <h3>{{ title }}</h3>
-    <!--子系统选项-->
-    <el-dropdown v-if="showChangeSys" class="systemSelect" size="medium" @command="handleCommand">
-      <span class="el-dropdown-link">{{ currentSystem.name }}<i class="el-icon-arrow-down el-icon--right"/>
-      </span>
-      <el-dropdown-menu slot="dropdown">
-        <el-dropdown-item v-for="system in systems" :command="system" :key="system.id">{{ system.name }}</el-dropdown-item>
-      </el-dropdown-menu>
-    </el-dropdown>
-    <el-dropdown class="dropdown-container" trigger="click">
-      <div class="dropdown-wrapper">
-        <span style="line-height:50px;">欢迎您，{{ name }}</span>
-        <!--<img :src="avatar+'?imageView2/1/w/80/h/80'" class="user-avatar">-->
-        <i class="el-icon-arrow-down"/>
-      </div>
-      <el-dropdown-menu slot="dropdown" class="user-dropdown">
-        <el-dropdown-item v-if="!baseConfig.singleSys">
-          <span style="display:block;" @click="backToIndex">回首页</span>
-        </el-dropdown-item>
-        <el-dropdown-item :divided="!baseConfig.singleSys">
-          <span style="display:block;" @click="resetPwd">修改密码</span>
-        </el-dropdown-item>
-        <el-dropdown-item divided>
-          <span style="display:block;" @click="logout">注销</span>
-        </el-dropdown-item>
-      </el-dropdown-menu>
-    </el-dropdown>
-    <reset-pwd v-show="showSetPwd" ref="retPwd"/>
-  </el-header>
-</template>
-
-<script>
-import { mapGetters } from 'vuex'
-import ResetPwd from '@/views/system/user/resetPwd'
-
-export default {
-  name: 'AppHeader',
-  components: { ResetPwd },
-  data() {
-    return {
-      title: this.baseConfig.title, // 标题
-      showChangeSys: !this.baseConfig.singleSys, // 是否显示切换系统菜单
-      name: this.$store.getters.name, // 用户姓名
-      showSetPwd: false // 是否显示修改密码按钮
-    }
-  },
-  computed: {
-    ...mapGetters([
-      'sidebar',
-      'avatar',
-      'currentSystem',
-      'systems'
-    ])
-  },
-  created() {
-    if (!this.baseConfig.singleSys) {
-      this.getSystems()
-    }
-  },
-  methods: {
-    toggleSideBar() {
-      this.$store.dispatch('ToggleSideBar')
-    },
-    logout() {
-      this.$store.dispatch('LogOut').then(() => {
-        location.reload() // 为了重新实例化vue-router对象 避免bug
-      })
-    },
-    resetPwd() {
-      this.showSetPwd = true
-      this.$refs.retPwd.initDialog(true)
-    },
-    backToIndex() {
-      const url = this.baseConfig.mainPage
-      window.location.href = url
-    },
-    // 切换子系统
-    handleCommand(command) {
-      console.log('切换子系统:' + command.name)
-      const params1 = `?token=${this.$store.getters.token}`
-      const params = `?sys=${command.name}&url=${command.url}&code=${command.code}&token=${this.$store.getters.token}`
-      // 判断系统是不是http的，如果是则打开新窗口
-      if (command.url.indexOf('http') > -1) {
-      // 取token
-        if (this.baseConfig.sameWindow) {
-          window.location.href = command.url + params1
-        } else {
-          window.open(command.url + params1, '_blank')
-        }
-      } else {
-      // 取token
-        if (this.baseConfig.sameWindow) {
-          window.location.href = this.baseConfig.mainPage + command.url + params
-        } else {
-          window.open(this.baseConfig.mainPage + command.url + params, '_blank')
-        }
-      }
-    },
-    // 获取子系统
-    getSystems() {
-      this.$store.dispatch('GetSystems').then(() => {
-        console.log('获取子系统列表成功-appHeader')
-      })
-    }
-  }
-}
-</script>
-
-<style rel="stylesheet/scss" lang="scss" scoped>
-  h3{
-    margin-left:24px;
-    display: inline-block;
-    float:left;
-  }
-  .dropdown-container {
-    /*height: 50px;*/
-    display: inline-block;
-    float: right;
-    z-index:500;
-    position: fixed;
-    top:0px;
-    right: 35px;
-    .dropdown-wrapper {
-      cursor: pointer;
-      margin-top: 5px;
-      position: relative;
-      line-height: initial;
-      .user-avatar {
-        width: 40px;
-        height: 40px;
-        border-radius: 10px;
-      }
-      .el-icon-caret-bottom {
-        font-size: 12px;
-      }
-    }
-  }
-  .systemSelect{
-    height: 56px;
-    display: inline-block;
-    float: left;
-    z-index:500;
-    position: fixed;
-    margin-left:60px;
-    top:5px;
-    color:#fff;
-    line-height: 56px;
-  }
-</style>
diff --git a/src/views/layout/components/AppMain.vue b/src/views/layout/components/AppMain.vue
deleted file mode 100644
index 2ea268e..0000000
--- a/src/views/layout/components/AppMain.vue
+++ /dev/null
@@ -1,38 +0,0 @@
-<template>
-  <section class="app-main">
-    <transition name="fade-transform" mode="out-in">
-      <!-- or name="fade" -->
-      <!-- <router-view :key="key"></router-view> -->
-      <div>
-        <keep-alive>
-          <router-view v-if="$route.meta.keepAlive" :key="key"/>
-        </keep-alive>
-        <router-view v-if="!$route.meta.keepAlive" :key="key"/>
-      </div>
-    </transition>
-  </section>
-</template>
-
-<script>
-export default {
-  name: 'AppMain',
-  computed: {
-    key() {
-      if (this.$route.meta.keepAlive) {
-        return this.$route.name !== undefined ? this.$route.name : this.$route
-      } else {
-        return this.$route.name !== undefined ? this.$route.name + new Date() : this.$route + new Date()
-      }
-    }
-  }
-}
-</script>
-
-<style scoped>
-.app-main {
-  /*50 = navbar  */
-  /*min-height: calc(100vh - 50px);*/
-  position: relative;
-  overflow: hidden;
-}
-</style>
diff --git a/src/views/layout/components/Navbar.vue b/src/views/layout/components/Navbar.vue
deleted file mode 100644
index 24ea99b..0000000
--- a/src/views/layout/components/Navbar.vue
+++ /dev/null
@@ -1,78 +0,0 @@
-<template>
-  <div class="navbar">
-    <hamburger :toggle-click="toggleSideBar" :is-active="sidebar.opened" class="hamburger-container"/>
-    <breadcrumb />
-  </div>
-</template>
-
-<script>
-import { mapGetters } from 'vuex'
-import Breadcrumb from '@/components/Breadcrumb'
-import Hamburger from '@/components/Hamburger'
-
-export default {
-  components: {
-    Breadcrumb,
-    Hamburger
-  },
-  computed: {
-    ...mapGetters([
-      'sidebar'
-    ])
-  },
-  methods: {
-    toggleSideBar() {
-      this.$store.dispatch('ToggleSideBar')
-    },
-    logout() {
-      this.$store.dispatch('LogOut').then(() => {
-        location.reload() // 为了重新实例化vue-router对象 避免bug
-      })
-    }
-  }
-}
-</script>
-
-<style rel="stylesheet/scss" lang="scss" scoped>
-.navbar {
-  height: 50px;
-  line-height: 50px;
-  box-shadow: 0 1px 3px 0 rgba(0,0,0,.12), 0 0 3px 0 rgba(0,0,0,.04);
-  .hamburger-container {
-    text-align: center;
-    height: 50px;
-    float: left;
-    padding: 0 12px;
-  }
-  .screenfull {
-    position: absolute;
-    right: 90px;
-    top: 16px;
-    color: red;
-  }
-  .avatar-container {
-    height: 50px;
-    display: inline-block;
-    position: absolute;
-    right: 35px;
-    .avatar-wrapper {
-      cursor: pointer;
-      margin-top: 5px;
-      position: relative;
-      line-height: initial;
-      .user-avatar {
-        width: 40px;
-        height: 40px;
-        border-radius: 10px;
-      }
-      .el-icon-caret-bottom {
-        position: absolute;
-        right: -20px;
-        top: 25px;
-        font-size: 12px;
-      }
-    }
-  }
-}
-</style>
-
diff --git a/src/views/layout/components/Settings/index.vue b/src/views/layout/components/Settings/index.vue
deleted file mode 100644
index cf3023d..0000000
--- a/src/views/layout/components/Settings/index.vue
+++ /dev/null
@@ -1,109 +0,0 @@
-<template>
-  <div class="drawer-container">
-    <div>
-      <h3 class="drawer-title">Page style setting</h3>
-
-      <div class="drawer-item">
-        <span>Theme Color</span>
-        <theme-picker style="float: right;height: 26px;margin: -3px 8px 0 0;" @change="themeChange" />
-      </div>
-
-      <div class="drawer-item">
-        <span>Open Tags-View</span>
-        <el-switch v-model="tagsView" class="drawer-switch" />
-      </div>
-
-      <div class="drawer-item">
-        <span>Fixed Header</span>
-        <el-switch v-model="fixedHeader" class="drawer-switch" />
-      </div>
-
-      <div class="drawer-item">
-        <span>Sidebar Logo</span>
-        <el-switch v-model="sidebarLogo" class="drawer-switch" />
-      </div>
-
-    </div>
-  </div>
-</template>
-
-<script>
-import ThemePicker from '@/components/ThemePicker'
-
-export default {
-  name: 'Settings',
-  components: { ThemePicker },
-  data() {
-    return {}
-  },
-  computed: {
-    fixedHeader: {
-      get() {
-        return this.$store.state.settings.fixedHeader
-      },
-      set(val) {
-        this.$store.dispatch('settings/changeSetting', {
-          key: 'fixedHeader',
-          value: val
-        })
-      }
-    },
-    tagsView: {
-      get() {
-        return this.$store.state.settings.tagsView
-      },
-      set(val) {
-        this.$store.dispatch('settings/changeSetting', {
-          key: 'tagsView',
-          value: val
-        })
-      }
-    },
-    sidebarLogo: {
-      get() {
-        return this.$store.state.settings.sidebarLogo
-      },
-      set(val) {
-        this.$store.dispatch('settings/changeSetting', {
-          key: 'sidebarLogo',
-          value: val
-        })
-      }
-    }
-  },
-  methods: {
-    themeChange(val) {
-      this.$store.dispatch('settings/changeSetting', {
-        key: 'theme',
-        value: val
-      })
-    }
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-.drawer-container {
-  padding: 24px;
-  font-size: 14px;
-  line-height: 1.5;
-  word-wrap: break-word;
-
-  .drawer-title {
-    margin-bottom: 12px;
-    color: rgba(0, 0, 0, .85);
-    font-size: 14px;
-    line-height: 22px;
-  }
-
-  .drawer-item {
-    color: rgba(0, 0, 0, .65);
-    font-size: 14px;
-    padding: 12px 0;
-  }
-
-  .drawer-switch {
-    float: right
-  }
-}
-</style>
diff --git a/src/views/layout/components/Sidebar/Item.vue b/src/views/layout/components/Sidebar/Item.vue
deleted file mode 100644
index 4ed6b5f..0000000
--- a/src/views/layout/components/Sidebar/Item.vue
+++ /dev/null
@@ -1,31 +0,0 @@
-<script>
-export default {
-  name: 'MenuItem',
-  functional: true,
-  props: {
-    icon: {
-      type: String,
-      default: ''
-    },
-    title: {
-      type: String,
-      default: ''
-    }
-  },
-  render(h, context) {
-    const { icon, title } = context.props
-    const vnodes = []
-
-    if (icon) {
-      vnodes.push(<svg-icon icon-class={icon}/>)
-    } else {
-      vnodes.push(<span style='display:inline-block;width:30px;'></span>)
-    }
-
-    if (title) {
-      vnodes.push(<span slot='title'>{(title)}</span>)
-    }
-    return vnodes
-  }
-}
-</script>
diff --git a/src/views/layout/components/Sidebar/Link.vue b/src/views/layout/components/Sidebar/Link.vue
deleted file mode 100644
index bff45cd..0000000
--- a/src/views/layout/components/Sidebar/Link.vue
+++ /dev/null
@@ -1,36 +0,0 @@
-
-<template>
-  <!-- eslint-disable vue/require-component-is -->
-  <component v-bind="linkProps(to)">
-    <slot/>
-  </component>
-</template>
-
-<script>
-import { isExternal } from '@/utils/validate'
-
-export default {
-  props: {
-    to: {
-      type: String,
-      required: true
-    }
-  },
-  methods: {
-    linkProps(url) {
-      if (isExternal(url)) {
-        return {
-          is: 'a',
-          href: url,
-          target: '_blank',
-          rel: 'noopener'
-        }
-      }
-      return {
-        is: 'router-link',
-        to: url
-      }
-    }
-  }
-}
-</script>
diff --git a/src/views/layout/components/Sidebar/SidebarItem.vue b/src/views/layout/components/Sidebar/SidebarItem.vue
deleted file mode 100644
index 988d662..0000000
--- a/src/views/layout/components/Sidebar/SidebarItem.vue
+++ /dev/null
@@ -1,107 +0,0 @@
-<template>
-  <div v-if="!item.hidden&&item.children" class="menu-wrapper">
-
-    <template v-if="hasOneShowingChild(item.children,item) && (!onlyOneChild.children||onlyOneChild.noShowingChildren)&&!item.alwaysShow">
-      <a :href="onlyOneChild.path" target="_blank" @click="clickLink(onlyOneChild.path,$event)">
-        <el-menu-item :index="resolvePath(onlyOneChild.path)" :class="{'submenu-title-noDropdown':!isNest}">
-          <item v-if="onlyOneChild.meta" :icon="onlyOneChild.meta.icon||item.meta.icon" :title="onlyOneChild.meta.title" />
-        </el-menu-item>
-      </a>
-    </template>
-
-    <el-submenu v-else :index="item.name||item.path">
-      <template slot="title">
-        <item v-if="item.meta" :icon="item.meta.icon" :title="item.meta.title" />
-      </template>
-
-      <template v-for="child in item.children" v-if="!child.hidden">
-        <sidebar-item
-          v-if="child.children&&child.children.length>0"
-          :is-nest="true"
-          :item="child"
-          :key="child.path"
-          :base-path="resolvePath(child.path)"
-          class="nest-menu" />
-
-        <a v-else :href="child.path" :key="child.name" target="_blank" @click="clickLink(child.path,$event)">
-          <el-menu-item :index="resolvePath(child.path)">
-            <span class="light-line"/>
-            <item v-if="child.meta" :icon="child.meta.icon" :title="child.meta.title" />
-          </el-menu-item>
-        </a>
-      </template>
-    </el-submenu>
-
-  </div>
-</template>
-
-<script>
-import path from 'path'
-import { validateURL } from '@/utils/validate'
-import Item from './Item'
-
-export default {
-  name: 'SidebarItem',
-  components: { Item },
-  props: {
-    // route object
-    item: {
-      type: Object,
-      required: true
-    },
-    isNest: {
-      type: Boolean,
-      default: false
-    },
-    basePath: {
-      type: String,
-      default: ''
-    }
-  },
-  data() {
-    return {
-      onlyOneChild: null
-    }
-  },
-  methods: {
-    hasOneShowingChild(children, parent) {
-      const showingChildren = children.filter(item => {
-        if (item.hidden) {
-          return false
-        } else {
-          // Temp set(will be used if only has one showing child)
-          this.onlyOneChild = item
-          return true
-        }
-      })
-
-      // When there is only one child router, the child router is displayed by default
-      if (showingChildren.length === 1) {
-        return true
-      }
-
-      // Show parent if there are no child router to display
-      if (showingChildren.length === 0) {
-        this.onlyOneChild = { ... parent, path: '', noShowingChildren: true }
-        return true
-      }
-
-      return false
-    },
-    resolvePath(routePath) {
-      return path.resolve(this.basePath, routePath)
-    },
-    isExternalLink(routePath) {
-      return validateURL(routePath)
-    },
-    clickLink(routePath, e) {
-      if (!this.isExternalLink(routePath)) {
-        e.preventDefault()
-        const path = this.resolvePath(routePath)
-        this.$router.push({ path, query: { t: +new Date() }})
-        // this.$router.push(path)
-      }
-    }
-  }
-}
-</script>
diff --git a/src/views/layout/components/Sidebar/index.vue b/src/views/layout/components/Sidebar/index.vue
deleted file mode 100644
index 33d596a..0000000
--- a/src/views/layout/components/Sidebar/index.vue
+++ /dev/null
@@ -1,39 +0,0 @@
-<template>
-  <el-scrollbar wrap-class="scrollbar-wrapper">
-    <el-menu
-      :show-timeout="200"
-      :default-active="activeMenu"
-      :collapse="isCollapse"
-      mode="vertical"
-    >
-      <sidebar-item v-for="route in permission_routers" :key="route.name" :item="route" :base-path="route.path"/>
-    </el-menu>
-  </el-scrollbar>
-</template>
-
-<script>
-import { mapGetters } from 'vuex'
-import SidebarItem from './SidebarItem'
-
-export default {
-  components: { SidebarItem },
-  computed: {
-    ...mapGetters([
-      'permission_routers',
-      'sidebar'
-    ]),
-    activeMenu() {
-      const route = this.$route
-      const { meta, path } = route
-      // 如果meta中上设置activeMenu，按照meta中设置高亮
-      if (meta.activeMenu) {
-        return meta.activeMenu
-      }
-      return path
-    },
-    isCollapse() {
-      return !this.sidebar.opened
-    }
-  }
-}
-</script>
diff --git a/src/views/layout/components/TagsView/ScrollPane.vue b/src/views/layout/components/TagsView/ScrollPane.vue
deleted file mode 100644
index 0ec76e7..0000000
--- a/src/views/layout/components/TagsView/ScrollPane.vue
+++ /dev/null
@@ -1,85 +0,0 @@
-<template>
-  <el-scrollbar ref="scrollContainer" :vertical="false" class="scroll-container" @wheel.native.prevent="handleScroll">
-    <slot />
-  </el-scrollbar>
-</template>
-
-<script>
-const tagAndTagSpacing = 4 // tagAndTagSpacing
-
-export default {
-  name: 'ScrollPane',
-  data() {
-    return {
-      left: 0
-    }
-  },
-  computed: {
-    scrollWrapper() {
-      return this.$refs.scrollContainer.$refs.wrap
-    }
-  },
-  methods: {
-    handleScroll(e) {
-      const eventDelta = e.wheelDelta || -e.deltaY * 40
-      const $scrollWrapper = this.scrollWrapper
-      $scrollWrapper.scrollLeft = $scrollWrapper.scrollLeft + eventDelta / 4
-    },
-    moveToTarget(currentTag) {
-      const $container = this.$refs.scrollContainer.$el
-      const $containerWidth = $container.offsetWidth
-      const $scrollWrapper = this.scrollWrapper
-      const tagList = this.$parent.$refs.tag
-
-      let firstTag = null
-      let lastTag = null
-
-      // find first tag and last tag
-      if (tagList.length > 0) {
-        firstTag = tagList[0]
-        lastTag = tagList[tagList.length - 1]
-      }
-
-      if (firstTag === currentTag) {
-        $scrollWrapper.scrollLeft = 0
-      } else if (lastTag === currentTag) {
-        $scrollWrapper.scrollLeft = $scrollWrapper.scrollWidth - $containerWidth
-      } else {
-        // find preTag and nextTag
-        const currentIndex = tagList.findIndex(item => item === currentTag)
-        const prevTag = tagList[currentIndex - 1]
-        const nextTag = tagList[currentIndex + 1]
-
-        // the tag's offsetLeft after of nextTag
-        const afterNextTagOffsetLeft = nextTag.$el.offsetLeft + nextTag.$el.offsetWidth + tagAndTagSpacing
-
-        // the tag's offsetLeft before of prevTag
-        const beforePrevTagOffsetLeft = prevTag.$el.offsetLeft - tagAndTagSpacing
-
-        if (afterNextTagOffsetLeft > $scrollWrapper.scrollLeft + $containerWidth) {
-          $scrollWrapper.scrollLeft = afterNextTagOffsetLeft - $containerWidth
-        } else if (beforePrevTagOffsetLeft < $scrollWrapper.scrollLeft) {
-          $scrollWrapper.scrollLeft = beforePrevTagOffsetLeft
-        }
-      }
-    }
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-.scroll-container {
-  white-space: nowrap;
-  position: relative;
-  overflow: hidden;
-  width: 100%;
-  /deep/ {
-    .el-scrollbar__bar {
-      bottom: 0px;
-    }
-    .el-scrollbar__wrap {
-      height: 49px;
-    }
-  }
-}
-</style>
diff --git a/src/views/layout/components/TagsView/index.vue b/src/views/layout/components/TagsView/index.vue
deleted file mode 100644
index 5839f2d..0000000
--- a/src/views/layout/components/TagsView/index.vue
+++ /dev/null
@@ -1,287 +0,0 @@
-<template>
-  <div id="tags-view-container" class="tags-view-container">
-    <scroll-pane ref="scrollPane" class="tags-view-wrapper">
-      <router-link
-        v-for="tag in visitedViews"
-        ref="tag"
-        :key="tag.path"
-        :class="isActive(tag)?'active':''"
-        :to="{ path: tag.path, query: tag.query, fullPath: tag.fullPath }"
-        tag="span"
-        class="tags-view-item"
-        @click.middle.native="closeSelectedTag(tag)"
-        @contextmenu.prevent.native="openMenu(tag,$event)"
-      >
-        {{ tag.title }}
-        <span v-if="(!tag.meta.affix)&&(visitedViews.length!=1)" class="el-icon-close" @click.prevent.stop="closeSelectedTag(tag)" />
-      </router-link>
-    </scroll-pane>
-    <ul v-show="visible" :style="{left:left+'px',top:top+'px'}" class="contextmenu">
-      <li @click="refreshSelectedTag(selectedTag)">刷新页面</li>
-      <li v-if="!(selectedTag.meta&&selectedTag.meta.affix)" @click="closeSelectedTag(selectedTag)">关闭当前标签页</li>
-      <li @click="closeOthersTags">关闭其他标签页</li>
-      <li @click="closeAllTags(selectedTag)">关闭全部标签页</li>
-    </ul>
-  </div>
-</template>
-
-<script>
-import ScrollPane from './ScrollPane'
-import path from 'path'
-
-export default {
-  name: 'TagsView',
-  components: { ScrollPane },
-  data() {
-    return {
-      visible: false,
-      top: 0,
-      left: 0,
-      selectedTag: {},
-      affixTags: []
-    }
-  },
-  computed: {
-    visitedViews() {
-      return this.$store.state.tagsView.visitedViews
-    },
-    routes() {
-      return this.$store.state.permission.routers
-    }
-  },
-  watch: {
-    $route() {
-      this.addTags()
-      this.moveToCurrentTag()
-    },
-    visible(value) {
-      if (value) {
-        document.body.addEventListener('click', this.closeMenu)
-      } else {
-        document.body.removeEventListener('click', this.closeMenu)
-      }
-    }
-  },
-  mounted() {
-    this.initTags()
-    this.addTags()
-  },
-  methods: {
-    isActive(route) {
-      return route.path === this.$route.path
-    },
-    filterAffixTags(routes, basePath = '/') {
-      let tags = []
-      routes.forEach(route => {
-        if (route.meta && route.meta.affix) {
-          const tagPath = path.resolve(basePath, route.path)
-          tags.push({
-            fullPath: tagPath,
-            path: tagPath,
-            name: route.name,
-            meta: { ...route.meta }
-          })
-        }
-        if (route.children) {
-          const tempTags = this.filterAffixTags(route.children, route.path)
-          if (tempTags.length >= 1) {
-            tags = [...tags, ...tempTags]
-          }
-        }
-      })
-      return tags
-    },
-    initTags() {
-      const affixTags = this.affixTags = this.filterAffixTags(this.routes)
-      for (const tag of affixTags) {
-        // Must have tag name
-        if (tag.name) {
-          this.$store.dispatch('tagsView/addVisitedView', tag)
-        }
-      }
-    },
-    addTags() {
-      const { name } = this.$route
-      if (name) {
-        this.$store.dispatch('tagsView/addView', this.$route)
-      }
-      return false
-    },
-    moveToCurrentTag() {
-      const tags = this.$refs.tag
-      this.$nextTick(() => {
-        for (const tag of tags) {
-          if (tag.to.path === this.$route.path) {
-            this.$refs.scrollPane.moveToTarget(tag)
-            // when query is different then update
-            if (tag.to.fullPath !== this.$route.fullPath) {
-              this.$store.dispatch('tagsView/updateVisitedView', this.$route)
-            }
-            break
-          }
-        }
-      })
-    },
-    refreshSelectedTag(view) {
-      this.$store.dispatch('tagsView/delCachedView', view).then(() => {
-        const { fullPath } = view
-        this.$nextTick(() => {
-          this.$router.replace({
-            path: '/redirect' + fullPath
-          })
-        })
-      })
-    },
-    closeSelectedTag(view) {
-      this.$store.dispatch('tagsView/delView', view).then(({ visitedViews }) => {
-        if (this.isActive(view)) {
-          this.toLastView(visitedViews, view)
-        }
-      })
-    },
-    closeOthersTags() {
-      this.$router.push(this.selectedTag)
-      this.$store.dispatch('tagsView/delOthersViews', this.selectedTag).then(() => {
-        this.moveToCurrentTag()
-      })
-    },
-    closeAllTags(view) {
-      this.$store.dispatch('tagsView/delAllViews').then(({ visitedViews }) => {
-        if (this.affixTags.some(tag => tag.path === view.path)) {
-          return
-        }
-        this.toLastView(visitedViews, view)
-      })
-    },
-    toLastView(visitedViews, view) {
-      const latestView = visitedViews.slice(-1)[0]
-      if (latestView) {
-        this.$router.push(latestView)
-      } else {
-        // now the default is to redirect to the home page if there is no tags-view,
-        // you can adjust it according to your needs.
-        if (view.name === 'Dashboard') {
-          // to reload home page
-          this.$router.replace({ path: '/redirect' + view.fullPath })
-        } else {
-          this.$router.push('/')
-        }
-      }
-    },
-    openMenu(tag, e) {
-      const menuMinWidth = 105
-      const offsetLeft = this.$el.getBoundingClientRect().left // container margin left
-      const offsetWidth = this.$el.offsetWidth // container width
-      const maxLeft = offsetWidth - menuMinWidth // left boundary
-      const left = e.clientX - offsetLeft + 15 // 15: margin right
-
-      if (left > maxLeft) {
-        this.left = maxLeft
-      } else {
-        this.left = left
-      }
-
-      this.top = e.clientY - 40
-      this.visible = true
-      this.selectedTag = tag
-    },
-    closeMenu() {
-      this.visible = false
-    }
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-  .tags-view-container {
-    height: 34px;
-    width: 100%;
-    background: #fff;
-    border-bottom: 1px solid #d8dce5;
-    /*box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .12), 0 0 3px 0 rgba(0, 0, 0, .04);*/
-    .tags-view-wrapper {
-      .tags-view-item {
-        display: inline-block;
-        position: relative;
-        cursor: pointer;
-        height: 26px;
-        line-height: 26px;
-        border: 1px solid #d8dce5;
-        color: #495060;
-        background: #fff;
-        padding: 0 8px;
-        font-size: 12px;
-        margin-left: 5px;
-        margin-top: 4px;
-        &:first-of-type {
-          margin-left: 12px;
-        }
-        &:last-of-type {
-          margin-right: 15px;
-        }
-        &.active {
-          /*background-color: #42b983;*/
-          /*color: #fff;*/
-          /*border-color: #42b983;*/
-          &::before {
-            content: '';
-            background: #fff;
-            display: inline-block;
-            width: 8px;
-            height: 8px;
-            border-radius: 50%;
-            position: relative;
-            margin-right: 2px;
-          }
-        }
-      }
-    }
-    .contextmenu {
-      margin: 0;
-      background: #fff;
-      z-index: 3000;
-      position: absolute;
-      list-style-type: none;
-      padding: 5px 0;
-      border-radius: 4px;
-      font-size: 12px;
-      font-weight: 400;
-      color: #333;
-      box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, .3);
-      li {
-        margin: 0;
-        padding: 7px 16px;
-        cursor: pointer;
-        &:hover {
-          background: #eee;
-        }
-      }
-    }
-  }
-</style>
-
-<style lang="scss">
-  //reset element css of el-icon-close
-  .tags-view-wrapper {
-    .tags-view-item {
-      .el-icon-close {
-        width: 16px;
-        height: 16px;
-        vertical-align: 2px;
-        border-radius: 50%;
-        text-align: center;
-        transition: all .3s cubic-bezier(.645, .045, .355, 1);
-        transform-origin: 100% 50%;
-        &:before {
-          transform: scale(.6);
-          display: inline-block;
-          vertical-align: -3px;
-        }
-        &:hover {
-          background-color: #b4bccc;
-          color: #fff;
-        }
-      }
-    }
-  }
-</style>
diff --git a/src/views/layout/components/index.js b/src/views/layout/components/index.js
deleted file mode 100644
index 52d35e3..0000000
--- a/src/views/layout/components/index.js
+++ /dev/null
@@ -1,4 +0,0 @@
-export { default as Navbar } from './Navbar'
-export { default as Sidebar } from './Sidebar'
-export { default as AppMain } from './AppMain'
-export { default as AppHeader } from './AppHeader'
diff --git a/src/views/layout/mixin/ResizeHandler.js b/src/views/layout/mixin/ResizeHandler.js
deleted file mode 100644
index 604fe3d..0000000
--- a/src/views/layout/mixin/ResizeHandler.js
+++ /dev/null
@@ -1,40 +0,0 @@
-import store from '@/store'
-
-const { body } = document
-const WIDTH = 992 // refer to Bootstrap's responsive design
-
-export default {
-  watch: {
-    $route(route) {
-      if (this.device === 'mobile' && this.sidebar.opened) {
-        store.dispatch('CloseSideBar', { withoutAnimation: false })
-      }
-    }
-  },
-  beforeMount() {
-    window.addEventListener('resize', this.resizeHandler)
-  },
-  mounted() {
-    const isMobile = this.isMobile()
-    if (isMobile) {
-      store.dispatch('ToggleDevice', 'mobile')
-      store.dispatch('CloseSideBar', { withoutAnimation: true })
-    }
-  },
-  methods: {
-    isMobile() {
-      const rect = body.getBoundingClientRect()
-      return rect.width - 1 < WIDTH
-    },
-    resizeHandler() {
-      if (!document.hidden) {
-        const isMobile = this.isMobile()
-        store.dispatch('ToggleDevice', isMobile ? 'mobile' : 'desktop')
-
-        if (isMobile) {
-          store.dispatch('CloseSideBar', { withoutAnimation: true })
-        }
-      }
-    }
-  }
-}