diff --git a/src/api/dashboard.js b/src/api/dashboard.js
index e69de29..6ad37f1 100644
--- a/src/api/dashboard.js
+++ b/src/api/dashboard.js
@@ -0,0 +1,92 @@
+/**
+ * 井总览模块接口
+ */
+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: '/device/valve/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
+  })
+}
+
+
+// 用水事记查询
+export function getNoteList() {
+  return request({
+    // url: '/note/list',
+    url: 'waterMeterData/count',
+    method: 'get',
+    params
+  })
+}
+
+// 用水事记更新
+export function updateNoteList(params) {
+  return request({
+    // url: '/note/update',
+    url: 'waterMeterData/count',
+    method: 'post',
+    params
+  })
+}

diff --git a/src/api/dashboard.js b/src/api/dashboard.js
index e69de29..6ad37f1 100644
--- a/src/api/dashboard.js
+++ b/src/api/dashboard.js
@@ -0,0 +1,92 @@
+/**
+ * 井总览模块接口
+ */
+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: '/device/valve/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
+  })
+}
+
+
+// 用水事记查询
+export function getNoteList() {
+  return request({
+    // url: '/note/list',
+    url: 'waterMeterData/count',
+    method: 'get',
+    params
+  })
+}
+
+// 用水事记更新
+export function updateNoteList(params) {
+  return request({
+    // url: '/note/update',
+    url: 'waterMeterData/count',
+    method: 'post',
+    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..6ad37f1 100644
--- a/src/api/dashboard.js
+++ b/src/api/dashboard.js
@@ -0,0 +1,92 @@
+/**
+ * 井总览模块接口
+ */
+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: '/device/valve/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
+  })
+}
+
+
+// 用水事记查询
+export function getNoteList() {
+  return request({
+    // url: '/note/list',
+    url: 'waterMeterData/count',
+    method: 'get',
+    params
+  })
+}
+
+// 用水事记更新
+export function updateNoteList(params) {
+  return request({
+    // url: '/note/update',
+    url: 'waterMeterData/count',
+    method: 'post',
+    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..6ad37f1 100644
--- a/src/api/dashboard.js
+++ b/src/api/dashboard.js
@@ -0,0 +1,92 @@
+/**
+ * 井总览模块接口
+ */
+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: '/device/valve/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
+  })
+}
+
+
+// 用水事记查询
+export function getNoteList() {
+  return request({
+    // url: '/note/list',
+    url: 'waterMeterData/count',
+    method: 'get',
+    params
+  })
+}
+
+// 用水事记更新
+export function updateNoteList(params) {
+  return request({
+    // url: '/note/update',
+    url: 'waterMeterData/count',
+    method: 'post',
+    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..6ad37f1 100644
--- a/src/api/dashboard.js
+++ b/src/api/dashboard.js
@@ -0,0 +1,92 @@
+/**
+ * 井总览模块接口
+ */
+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: '/device/valve/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
+  })
+}
+
+
+// 用水事记查询
+export function getNoteList() {
+  return request({
+    // url: '/note/list',
+    url: 'waterMeterData/count',
+    method: 'get',
+    params
+  })
+}
+
+// 用水事记更新
+export function updateNoteList(params) {
+  return request({
+    // url: '/note/update',
+    url: 'waterMeterData/count',
+    method: 'post',
+    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..6ad37f1 100644
--- a/src/api/dashboard.js
+++ b/src/api/dashboard.js
@@ -0,0 +1,92 @@
+/**
+ * 井总览模块接口
+ */
+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: '/device/valve/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
+  })
+}
+
+
+// 用水事记查询
+export function getNoteList() {
+  return request({
+    // url: '/note/list',
+    url: 'waterMeterData/count',
+    method: 'get',
+    params
+  })
+}
+
+// 用水事记更新
+export function updateNoteList(params) {
+  return request({
+    // url: '/note/update',
+    url: 'waterMeterData/count',
+    method: 'post',
+    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/AlarmCountByDept.vue b/src/views/dashboard/components/AlarmCountByDept.vue
new file mode 100644
index 0000000..91df51d
--- /dev/null
+++ b/src/views/dashboard/components/AlarmCountByDept.vue
@@ -0,0 +1,80 @@
+<!--suppress ALL -->
+<template>
+  <div class="container">
+    <div style="height: 28px;margin-bottom: 10px;"/>
+    <ve-pie :data="chartData" :extend="extend" :title="title"/>
+
+  </div>
+</template>
+
+<script>
+import { alarmBySecondArea } from '@/api/overview'
+import { getDoorAreaTree } from '@/api/system/area'
+export default {
+  name: 'AlarmCountByDept',
+  props:{
+    query: {
+      type: Object,
+      default:()=>{
+        return {
+          areaId: '',
+          startTime: '',
+          endTime: ''
+        }
+      }
+    }
+  },
+  data() {
+    return {
+      chartData: {
+        columns: ['areaName', 'alarm'],
+        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': '分区',
+          'alarm': '报警数'
+        }
+      }
+    }
+  },
+  watch:{
+    query(val){
+      this.fetchData()
+    }
+  },
+  methods: {
+    // 获取统计数据
+    fetchData() {
+      alarmBySecondArea(this.query).then(response => {
+        debugger
+        this.chartData.rows = response.data
+      })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+  .container{
+
+  }
+</style>

diff --git a/src/api/dashboard.js b/src/api/dashboard.js
index e69de29..6ad37f1 100644
--- a/src/api/dashboard.js
+++ b/src/api/dashboard.js
@@ -0,0 +1,92 @@
+/**
+ * 井总览模块接口
+ */
+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: '/device/valve/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
+  })
+}
+
+
+// 用水事记查询
+export function getNoteList() {
+  return request({
+    // url: '/note/list',
+    url: 'waterMeterData/count',
+    method: 'get',
+    params
+  })
+}
+
+// 用水事记更新
+export function updateNoteList(params) {
+  return request({
+    // url: '/note/update',
+    url: 'waterMeterData/count',
+    method: 'post',
+    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/AlarmCountByDept.vue b/src/views/dashboard/components/AlarmCountByDept.vue
new file mode 100644
index 0000000..91df51d
--- /dev/null
+++ b/src/views/dashboard/components/AlarmCountByDept.vue
@@ -0,0 +1,80 @@
+<!--suppress ALL -->
+<template>
+  <div class="container">
+    <div style="height: 28px;margin-bottom: 10px;"/>
+    <ve-pie :data="chartData" :extend="extend" :title="title"/>
+
+  </div>
+</template>
+
+<script>
+import { alarmBySecondArea } from '@/api/overview'
+import { getDoorAreaTree } from '@/api/system/area'
+export default {
+  name: 'AlarmCountByDept',
+  props:{
+    query: {
+      type: Object,
+      default:()=>{
+        return {
+          areaId: '',
+          startTime: '',
+          endTime: ''
+        }
+      }
+    }
+  },
+  data() {
+    return {
+      chartData: {
+        columns: ['areaName', 'alarm'],
+        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': '分区',
+          'alarm': '报警数'
+        }
+      }
+    }
+  },
+  watch:{
+    query(val){
+      this.fetchData()
+    }
+  },
+  methods: {
+    // 获取统计数据
+    fetchData() {
+      alarmBySecondArea(this.query).then(response => {
+        debugger
+        this.chartData.rows = response.data
+      })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+  .container{
+
+  }
+</style>
diff --git a/src/views/dashboard/components/DeviceCount.vue b/src/views/dashboard/components/DeviceCount.vue
index 6c36bcb..453fa09 100644
--- a/src/views/dashboard/components/DeviceCount.vue
+++ b/src/views/dashboard/components/DeviceCount.vue
@@ -1,5 +1,9 @@
 <template>
-  <ve-bar :data="chartData" :grid="grid" :title="title" :extend="extend" :settings="chartSettings"/>
+  <div>
+    <div style="height: 28px;margin-bottom: 10px;"/>
+    <ve-bar :data="chartData" :grid="grid" :title="title" :extend="extend" :settings="chartSettings"/>
+  </div>
+
 </template>
 
 <script>

diff --git a/src/api/dashboard.js b/src/api/dashboard.js
index e69de29..6ad37f1 100644
--- a/src/api/dashboard.js
+++ b/src/api/dashboard.js
@@ -0,0 +1,92 @@
+/**
+ * 井总览模块接口
+ */
+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: '/device/valve/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
+  })
+}
+
+
+// 用水事记查询
+export function getNoteList() {
+  return request({
+    // url: '/note/list',
+    url: 'waterMeterData/count',
+    method: 'get',
+    params
+  })
+}
+
+// 用水事记更新
+export function updateNoteList(params) {
+  return request({
+    // url: '/note/update',
+    url: 'waterMeterData/count',
+    method: 'post',
+    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/AlarmCountByDept.vue b/src/views/dashboard/components/AlarmCountByDept.vue
new file mode 100644
index 0000000..91df51d
--- /dev/null
+++ b/src/views/dashboard/components/AlarmCountByDept.vue
@@ -0,0 +1,80 @@
+<!--suppress ALL -->
+<template>
+  <div class="container">
+    <div style="height: 28px;margin-bottom: 10px;"/>
+    <ve-pie :data="chartData" :extend="extend" :title="title"/>
+
+  </div>
+</template>
+
+<script>
+import { alarmBySecondArea } from '@/api/overview'
+import { getDoorAreaTree } from '@/api/system/area'
+export default {
+  name: 'AlarmCountByDept',
+  props:{
+    query: {
+      type: Object,
+      default:()=>{
+        return {
+          areaId: '',
+          startTime: '',
+          endTime: ''
+        }
+      }
+    }
+  },
+  data() {
+    return {
+      chartData: {
+        columns: ['areaName', 'alarm'],
+        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': '分区',
+          'alarm': '报警数'
+        }
+      }
+    }
+  },
+  watch:{
+    query(val){
+      this.fetchData()
+    }
+  },
+  methods: {
+    // 获取统计数据
+    fetchData() {
+      alarmBySecondArea(this.query).then(response => {
+        debugger
+        this.chartData.rows = response.data
+      })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+  .container{
+
+  }
+</style>
diff --git a/src/views/dashboard/components/DeviceCount.vue b/src/views/dashboard/components/DeviceCount.vue
index 6c36bcb..453fa09 100644
--- a/src/views/dashboard/components/DeviceCount.vue
+++ b/src/views/dashboard/components/DeviceCount.vue
@@ -1,5 +1,9 @@
 <template>
-  <ve-bar :data="chartData" :grid="grid" :title="title" :extend="extend" :settings="chartSettings"/>
+  <div>
+    <div style="height: 28px;margin-bottom: 10px;"/>
+    <ve-bar :data="chartData" :grid="grid" :title="title" :extend="extend" :settings="chartSettings"/>
+  </div>
+
 </template>
 
 <script>
diff --git a/src/views/dashboard/components/FunctionArea.vue b/src/views/dashboard/components/FunctionArea.vue
new file mode 100644
index 0000000..e628c12
--- /dev/null
+++ b/src/views/dashboard/components/FunctionArea.vue
@@ -0,0 +1,128 @@
+<!--
+ * @Description:
+ * @Author: 王晓颖
+ * @Date:
+ -->
+<template>
+  <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')">本周</el-button>
+    <el-button round size="mini" @click="setDefaultTime('today')">今日</el-button>
+    <el-date-picker
+      v-model="timeRange"
+      :picker-options="pickerOptions"
+      type="daterange"
+      range-separator="至"
+      start-placeholder="开始日期"
+      end-placeholder="结束日期"
+      value-format="yyyy-MM-dd"
+      size="mini"
+      style="width:250px;margin-right: 20px"
+      @change="fetchData"/>
+  </div>
+</template>
+
+<script>
+  import { getDayTime } from '@/utils/dateutils'
+  export default {
+    name: "FunctionArea",
+    props:{
+      select:{
+        type: String,
+        default: 'today'
+      }
+    },
+    data() {
+      return {
+        timeRange: [],
+        pickerOptions: {
+          disabledDate: function(date) {
+            var oDate1 = new Date(date)
+            var oDate2 = new Date()
+            if (oDate1.getTime() > oDate2.getTime()) {
+              return true
+            } else {
+              return false
+            }
+          }
+        }
+      }
+    },
+    methods: {
+      init(){
+        this.setDefaultTime(this.select)
+      },
+      change(){
+        this.$emit('change', this.timeRange)
+      },
+      setDefaultTime(val) {
+        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
+          if (tMonth.toString().length === 1) {
+            tMonth = '0' + tMonth
+          }
+          const beginTime = tYear + '-' + tMonth + '-01'
+          const endTime = getDayTime(new Date().getTime())
+          this.timeRange = [beginTime, endTime.Format('yyyy-MM-dd')]
+        } else if (val === 'week') {
+          // const nowDayOfWeek =  new Date().getDay()-1
+          const nowDayOfWeek =  6
+          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') {
+          this.timeRange = [getDayTime(new Date().getTime()).Format('yyyy-MM-dd'), getDayTime(new Date().getTime()).Format('yyyy-MM-dd')]
+        }
+        this.change()
+      }
+    }
+  }
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  .statistic-container {
+
+    .el-button{
+      padding: 5px 10px;
+    }
+    margin-bottom: 10px;
+    text-align: center;
+    .chart-tool-button {
+      padding: 5px;
+      line-height: 16px;
+      margin-top: 5px;
+      font-size: 14px;
+    }
+    .chart-tool-button:hover {
+      background-color: #8cc5ff;
+      cursor: pointer;
+      color: white;
+    }
+    .chart-tool-button:active {
+      background-color: #8cc5ff;
+      color: white;
+    }
+  }
+  .selected {
+    background-color: #8cc5ff;
+    color: white;
+  }
+</style>

diff --git a/src/api/dashboard.js b/src/api/dashboard.js
index e69de29..6ad37f1 100644
--- a/src/api/dashboard.js
+++ b/src/api/dashboard.js
@@ -0,0 +1,92 @@
+/**
+ * 井总览模块接口
+ */
+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: '/device/valve/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
+  })
+}
+
+
+// 用水事记查询
+export function getNoteList() {
+  return request({
+    // url: '/note/list',
+    url: 'waterMeterData/count',
+    method: 'get',
+    params
+  })
+}
+
+// 用水事记更新
+export function updateNoteList(params) {
+  return request({
+    // url: '/note/update',
+    url: 'waterMeterData/count',
+    method: 'post',
+    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/AlarmCountByDept.vue b/src/views/dashboard/components/AlarmCountByDept.vue
new file mode 100644
index 0000000..91df51d
--- /dev/null
+++ b/src/views/dashboard/components/AlarmCountByDept.vue
@@ -0,0 +1,80 @@
+<!--suppress ALL -->
+<template>
+  <div class="container">
+    <div style="height: 28px;margin-bottom: 10px;"/>
+    <ve-pie :data="chartData" :extend="extend" :title="title"/>
+
+  </div>
+</template>
+
+<script>
+import { alarmBySecondArea } from '@/api/overview'
+import { getDoorAreaTree } from '@/api/system/area'
+export default {
+  name: 'AlarmCountByDept',
+  props:{
+    query: {
+      type: Object,
+      default:()=>{
+        return {
+          areaId: '',
+          startTime: '',
+          endTime: ''
+        }
+      }
+    }
+  },
+  data() {
+    return {
+      chartData: {
+        columns: ['areaName', 'alarm'],
+        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': '分区',
+          'alarm': '报警数'
+        }
+      }
+    }
+  },
+  watch:{
+    query(val){
+      this.fetchData()
+    }
+  },
+  methods: {
+    // 获取统计数据
+    fetchData() {
+      alarmBySecondArea(this.query).then(response => {
+        debugger
+        this.chartData.rows = response.data
+      })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+  .container{
+
+  }
+</style>
diff --git a/src/views/dashboard/components/DeviceCount.vue b/src/views/dashboard/components/DeviceCount.vue
index 6c36bcb..453fa09 100644
--- a/src/views/dashboard/components/DeviceCount.vue
+++ b/src/views/dashboard/components/DeviceCount.vue
@@ -1,5 +1,9 @@
 <template>
-  <ve-bar :data="chartData" :grid="grid" :title="title" :extend="extend" :settings="chartSettings"/>
+  <div>
+    <div style="height: 28px;margin-bottom: 10px;"/>
+    <ve-bar :data="chartData" :grid="grid" :title="title" :extend="extend" :settings="chartSettings"/>
+  </div>
+
 </template>
 
 <script>
diff --git a/src/views/dashboard/components/FunctionArea.vue b/src/views/dashboard/components/FunctionArea.vue
new file mode 100644
index 0000000..e628c12
--- /dev/null
+++ b/src/views/dashboard/components/FunctionArea.vue
@@ -0,0 +1,128 @@
+<!--
+ * @Description:
+ * @Author: 王晓颖
+ * @Date:
+ -->
+<template>
+  <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')">本周</el-button>
+    <el-button round size="mini" @click="setDefaultTime('today')">今日</el-button>
+    <el-date-picker
+      v-model="timeRange"
+      :picker-options="pickerOptions"
+      type="daterange"
+      range-separator="至"
+      start-placeholder="开始日期"
+      end-placeholder="结束日期"
+      value-format="yyyy-MM-dd"
+      size="mini"
+      style="width:250px;margin-right: 20px"
+      @change="fetchData"/>
+  </div>
+</template>
+
+<script>
+  import { getDayTime } from '@/utils/dateutils'
+  export default {
+    name: "FunctionArea",
+    props:{
+      select:{
+        type: String,
+        default: 'today'
+      }
+    },
+    data() {
+      return {
+        timeRange: [],
+        pickerOptions: {
+          disabledDate: function(date) {
+            var oDate1 = new Date(date)
+            var oDate2 = new Date()
+            if (oDate1.getTime() > oDate2.getTime()) {
+              return true
+            } else {
+              return false
+            }
+          }
+        }
+      }
+    },
+    methods: {
+      init(){
+        this.setDefaultTime(this.select)
+      },
+      change(){
+        this.$emit('change', this.timeRange)
+      },
+      setDefaultTime(val) {
+        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
+          if (tMonth.toString().length === 1) {
+            tMonth = '0' + tMonth
+          }
+          const beginTime = tYear + '-' + tMonth + '-01'
+          const endTime = getDayTime(new Date().getTime())
+          this.timeRange = [beginTime, endTime.Format('yyyy-MM-dd')]
+        } else if (val === 'week') {
+          // const nowDayOfWeek =  new Date().getDay()-1
+          const nowDayOfWeek =  6
+          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') {
+          this.timeRange = [getDayTime(new Date().getTime()).Format('yyyy-MM-dd'), getDayTime(new Date().getTime()).Format('yyyy-MM-dd')]
+        }
+        this.change()
+      }
+    }
+  }
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  .statistic-container {
+
+    .el-button{
+      padding: 5px 10px;
+    }
+    margin-bottom: 10px;
+    text-align: center;
+    .chart-tool-button {
+      padding: 5px;
+      line-height: 16px;
+      margin-top: 5px;
+      font-size: 14px;
+    }
+    .chart-tool-button:hover {
+      background-color: #8cc5ff;
+      cursor: pointer;
+      color: white;
+    }
+    .chart-tool-button:active {
+      background-color: #8cc5ff;
+      color: white;
+    }
+  }
+  .selected {
+    background-color: #8cc5ff;
+    color: white;
+  }
+</style>
diff --git a/src/views/dashboard/components/PanelGroup.vue b/src/views/dashboard/components/PanelGroup.vue
index b72d289..7be90a7 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,32 @@
           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',
           permission: '/device/list'
         },
         {
@@ -67,11 +69,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 +85,10 @@
   },
   mounted() {
     this.getWater()
-    this.getWellCount()
+    // this.getWellCount()
     this.getDeviceCount()
     this.getAlarmCount()
-    this.getJobCount()
+    // this.getJobCount()
   },
   methods: {
     refresh() {
@@ -97,24 +99,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.production?parseFloat(response.data.production).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 +168,7 @@
   //   &:hover {
   //     .card-panel-icon-wrapper {
   //       color: #fff;
-        
+
   //     }
 
   //     .icon-people {

diff --git a/src/api/dashboard.js b/src/api/dashboard.js
index e69de29..6ad37f1 100644
--- a/src/api/dashboard.js
+++ b/src/api/dashboard.js
@@ -0,0 +1,92 @@
+/**
+ * 井总览模块接口
+ */
+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: '/device/valve/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
+  })
+}
+
+
+// 用水事记查询
+export function getNoteList() {
+  return request({
+    // url: '/note/list',
+    url: 'waterMeterData/count',
+    method: 'get',
+    params
+  })
+}
+
+// 用水事记更新
+export function updateNoteList(params) {
+  return request({
+    // url: '/note/update',
+    url: 'waterMeterData/count',
+    method: 'post',
+    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/AlarmCountByDept.vue b/src/views/dashboard/components/AlarmCountByDept.vue
new file mode 100644
index 0000000..91df51d
--- /dev/null
+++ b/src/views/dashboard/components/AlarmCountByDept.vue
@@ -0,0 +1,80 @@
+<!--suppress ALL -->
+<template>
+  <div class="container">
+    <div style="height: 28px;margin-bottom: 10px;"/>
+    <ve-pie :data="chartData" :extend="extend" :title="title"/>
+
+  </div>
+</template>
+
+<script>
+import { alarmBySecondArea } from '@/api/overview'
+import { getDoorAreaTree } from '@/api/system/area'
+export default {
+  name: 'AlarmCountByDept',
+  props:{
+    query: {
+      type: Object,
+      default:()=>{
+        return {
+          areaId: '',
+          startTime: '',
+          endTime: ''
+        }
+      }
+    }
+  },
+  data() {
+    return {
+      chartData: {
+        columns: ['areaName', 'alarm'],
+        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': '分区',
+          'alarm': '报警数'
+        }
+      }
+    }
+  },
+  watch:{
+    query(val){
+      this.fetchData()
+    }
+  },
+  methods: {
+    // 获取统计数据
+    fetchData() {
+      alarmBySecondArea(this.query).then(response => {
+        debugger
+        this.chartData.rows = response.data
+      })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+  .container{
+
+  }
+</style>
diff --git a/src/views/dashboard/components/DeviceCount.vue b/src/views/dashboard/components/DeviceCount.vue
index 6c36bcb..453fa09 100644
--- a/src/views/dashboard/components/DeviceCount.vue
+++ b/src/views/dashboard/components/DeviceCount.vue
@@ -1,5 +1,9 @@
 <template>
-  <ve-bar :data="chartData" :grid="grid" :title="title" :extend="extend" :settings="chartSettings"/>
+  <div>
+    <div style="height: 28px;margin-bottom: 10px;"/>
+    <ve-bar :data="chartData" :grid="grid" :title="title" :extend="extend" :settings="chartSettings"/>
+  </div>
+
 </template>
 
 <script>
diff --git a/src/views/dashboard/components/FunctionArea.vue b/src/views/dashboard/components/FunctionArea.vue
new file mode 100644
index 0000000..e628c12
--- /dev/null
+++ b/src/views/dashboard/components/FunctionArea.vue
@@ -0,0 +1,128 @@
+<!--
+ * @Description:
+ * @Author: 王晓颖
+ * @Date:
+ -->
+<template>
+  <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')">本周</el-button>
+    <el-button round size="mini" @click="setDefaultTime('today')">今日</el-button>
+    <el-date-picker
+      v-model="timeRange"
+      :picker-options="pickerOptions"
+      type="daterange"
+      range-separator="至"
+      start-placeholder="开始日期"
+      end-placeholder="结束日期"
+      value-format="yyyy-MM-dd"
+      size="mini"
+      style="width:250px;margin-right: 20px"
+      @change="fetchData"/>
+  </div>
+</template>
+
+<script>
+  import { getDayTime } from '@/utils/dateutils'
+  export default {
+    name: "FunctionArea",
+    props:{
+      select:{
+        type: String,
+        default: 'today'
+      }
+    },
+    data() {
+      return {
+        timeRange: [],
+        pickerOptions: {
+          disabledDate: function(date) {
+            var oDate1 = new Date(date)
+            var oDate2 = new Date()
+            if (oDate1.getTime() > oDate2.getTime()) {
+              return true
+            } else {
+              return false
+            }
+          }
+        }
+      }
+    },
+    methods: {
+      init(){
+        this.setDefaultTime(this.select)
+      },
+      change(){
+        this.$emit('change', this.timeRange)
+      },
+      setDefaultTime(val) {
+        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
+          if (tMonth.toString().length === 1) {
+            tMonth = '0' + tMonth
+          }
+          const beginTime = tYear + '-' + tMonth + '-01'
+          const endTime = getDayTime(new Date().getTime())
+          this.timeRange = [beginTime, endTime.Format('yyyy-MM-dd')]
+        } else if (val === 'week') {
+          // const nowDayOfWeek =  new Date().getDay()-1
+          const nowDayOfWeek =  6
+          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') {
+          this.timeRange = [getDayTime(new Date().getTime()).Format('yyyy-MM-dd'), getDayTime(new Date().getTime()).Format('yyyy-MM-dd')]
+        }
+        this.change()
+      }
+    }
+  }
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  .statistic-container {
+
+    .el-button{
+      padding: 5px 10px;
+    }
+    margin-bottom: 10px;
+    text-align: center;
+    .chart-tool-button {
+      padding: 5px;
+      line-height: 16px;
+      margin-top: 5px;
+      font-size: 14px;
+    }
+    .chart-tool-button:hover {
+      background-color: #8cc5ff;
+      cursor: pointer;
+      color: white;
+    }
+    .chart-tool-button:active {
+      background-color: #8cc5ff;
+      color: white;
+    }
+  }
+  .selected {
+    background-color: #8cc5ff;
+    color: white;
+  }
+</style>
diff --git a/src/views/dashboard/components/PanelGroup.vue b/src/views/dashboard/components/PanelGroup.vue
index b72d289..7be90a7 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,32 @@
           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',
           permission: '/device/list'
         },
         {
@@ -67,11 +69,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 +85,10 @@
   },
   mounted() {
     this.getWater()
-    this.getWellCount()
+    // this.getWellCount()
     this.getDeviceCount()
     this.getAlarmCount()
-    this.getJobCount()
+    // this.getJobCount()
   },
   methods: {
     refresh() {
@@ -97,24 +99,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.production?parseFloat(response.data.production).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 +168,7 @@
   //   &:hover {
   //     .card-panel-icon-wrapper {
   //       color: #fff;
-        
+
   //     }
 
   //     .icon-people {
diff --git a/src/views/dashboard/components/watchAlarmBar.vue b/src/views/dashboard/components/watchAlarmBar.vue
index 13824f3..6a18ef6 100644
--- a/src/views/dashboard/components/watchAlarmBar.vue
+++ b/src/views/dashboard/components/watchAlarmBar.vue
@@ -1,9 +1,11 @@
+<!--水表告警统计-->
 <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"
@@ -18,14 +20,14 @@
         @change="fetchData"/>
     </div>
     <ve-histogram v-if="isShow" :data="chartData" :grid="grid" :title="title" :extend="extend" :settings="chartSettings"/>
-    <div class="function">
-      <el-button
-        v-for="item in areaList"
-        :key="item.id"
-        round
-        size="mini"
-        @click="areaChange(item.id)">{{ item.name }}</el-button>
-    </div>
+    <!--<div class="function">-->
+      <!--<el-button-->
+        <!--v-for="item in areaList"-->
+        <!--:key="item.id"-->
+        <!--round-->
+        <!--size="mini"-->
+        <!--@click="areaChange(item.id)">{{ item.name }}</el-button>-->
+    <!--</div>-->
   </div>
 </template>
 
@@ -38,51 +40,51 @@
 export default {
   name: 'WatchAlarmBar',
   data() {
-    this.extend = {
-      legend: {
-        show: false
-      },
-      xAxis: {
-        axisLabel: {
-          rotate: 30,
-          margin: 30,
-          textStyle: {
-            align: 'center'
-          }
-        }
-      },
-      yAxis: {
-        name: '报警次数',
-        position: 'left'
-      },
-      series: {
-        label: { show: true, position: 'top', formatter: '{c}' },
-        barWidth: 25
-      },
-      tooltip: { trigger: 'item', formatter: '{b}<br/>报警次数：{c}次' }
-    }
-    this.grid = {
-      right: 40,
-      top: 100,
-      bottom: 5
-    }
-    this.title = {
-      text: '水表告警统计'
-    }
-    this.chartSettings = {
-      itemStyle: {
-        barCategoryGap: 10
-      },
-
-      labelMap: {
-        'areaName': '分区',
-        'alarm': '报警数',
-        'warning': '预警数'
-      },
-      dimension: ['areaName'],
-      metrics: ['alarm', 'warning']
-    }
     return {
+      title:{
+        text: '水表告警统计'
+      },
+      chartSettings:{
+        itemStyle: {
+          barCategoryGap: 0
+        },
+        labelMap: {
+          'areaName': '分区',
+          'alarm': '报警数',
+          'warning': '预警数'
+        },
+        dimension: ['areaName'],
+        metrics: ['alarm', 'warning']
+      },
+      grid: {
+        right: 40,
+        top: 80,
+        bottom: 5
+      },
+      extend: {
+        legend: {
+          show: false
+        },
+        xAxis: {
+          axisLabel: {
+            rotate: 30,
+            margin: 30,
+            textStyle: {
+              align: 'center'
+            }
+          }
+        },
+        yAxis: {
+          name: '报警次数',
+          position: 'left',
+          max: 10
+        },
+        series: {
+          label: { show: true, position: 'top', formatter: '{c}' },
+          barWidth: 20
+        },
+        // tooltip: { trigger: 'item', formatter: '{b}<br/>报警次数：{c}次' }
+      },
       areaId: '',
       areaList: [],
       isShow: true,
@@ -100,43 +102,50 @@
         }
       },
       chartData: {
-        columns: ['wellTypeName', 'alarm'],
+        columns: ['areaName', 'alarm'],
         rows: []
       }
     }
   },
   mounted() {
     this.setDefaultTime('today')
-    this.fetchArea()
+    // this.fetchArea()
   },
   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()
-    },
+    // 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() {
       const params = {
-        areaId: this.areaId,
+        areaId: '110000',
         startTime: this.timeRange[0],
         endTime: this.timeRange[1]
       }
+      this.$emit('change', params)
       alarmBySecondArea(params).then(response => {
         this.isShow = false
         this.chartData.rows = response.data
+        const maxValue = Math.max.apply(Math, response.data.map(item=> {return item.alarm>item.warning?item.alarm: item.warning}))
+        if (maxValue < 10) {
+          this.extend.yAxis.max = 10
+        } else {
+          this.extend.yAxis = maxValue+1
+        }
         // this.chartData.rows = [
         //   { 'areaName': '科技楼及食堂', 'alarm': 53 },
         //   { 'areaName': 'A\\B\\C\\D\\E座', 'alarm': 78 },
@@ -186,10 +195,11 @@
     }
   }
   .statistic-container {
+
     .el-button{
       padding: 5px 10px;
     }
-    /*margin-bottom: 10px;*/
+    margin-bottom: 10px;
     text-align: center;
     .chart-tool-button {
       padding: 5px;

diff --git a/src/api/dashboard.js b/src/api/dashboard.js
index e69de29..6ad37f1 100644
--- a/src/api/dashboard.js
+++ b/src/api/dashboard.js
@@ -0,0 +1,92 @@
+/**
+ * 井总览模块接口
+ */
+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: '/device/valve/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
+  })
+}
+
+
+// 用水事记查询
+export function getNoteList() {
+  return request({
+    // url: '/note/list',
+    url: 'waterMeterData/count',
+    method: 'get',
+    params
+  })
+}
+
+// 用水事记更新
+export function updateNoteList(params) {
+  return request({
+    // url: '/note/update',
+    url: 'waterMeterData/count',
+    method: 'post',
+    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/AlarmCountByDept.vue b/src/views/dashboard/components/AlarmCountByDept.vue
new file mode 100644
index 0000000..91df51d
--- /dev/null
+++ b/src/views/dashboard/components/AlarmCountByDept.vue
@@ -0,0 +1,80 @@
+<!--suppress ALL -->
+<template>
+  <div class="container">
+    <div style="height: 28px;margin-bottom: 10px;"/>
+    <ve-pie :data="chartData" :extend="extend" :title="title"/>
+
+  </div>
+</template>
+
+<script>
+import { alarmBySecondArea } from '@/api/overview'
+import { getDoorAreaTree } from '@/api/system/area'
+export default {
+  name: 'AlarmCountByDept',
+  props:{
+    query: {
+      type: Object,
+      default:()=>{
+        return {
+          areaId: '',
+          startTime: '',
+          endTime: ''
+        }
+      }
+    }
+  },
+  data() {
+    return {
+      chartData: {
+        columns: ['areaName', 'alarm'],
+        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': '分区',
+          'alarm': '报警数'
+        }
+      }
+    }
+  },
+  watch:{
+    query(val){
+      this.fetchData()
+    }
+  },
+  methods: {
+    // 获取统计数据
+    fetchData() {
+      alarmBySecondArea(this.query).then(response => {
+        debugger
+        this.chartData.rows = response.data
+      })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+  .container{
+
+  }
+</style>
diff --git a/src/views/dashboard/components/DeviceCount.vue b/src/views/dashboard/components/DeviceCount.vue
index 6c36bcb..453fa09 100644
--- a/src/views/dashboard/components/DeviceCount.vue
+++ b/src/views/dashboard/components/DeviceCount.vue
@@ -1,5 +1,9 @@
 <template>
-  <ve-bar :data="chartData" :grid="grid" :title="title" :extend="extend" :settings="chartSettings"/>
+  <div>
+    <div style="height: 28px;margin-bottom: 10px;"/>
+    <ve-bar :data="chartData" :grid="grid" :title="title" :extend="extend" :settings="chartSettings"/>
+  </div>
+
 </template>
 
 <script>
diff --git a/src/views/dashboard/components/FunctionArea.vue b/src/views/dashboard/components/FunctionArea.vue
new file mode 100644
index 0000000..e628c12
--- /dev/null
+++ b/src/views/dashboard/components/FunctionArea.vue
@@ -0,0 +1,128 @@
+<!--
+ * @Description:
+ * @Author: 王晓颖
+ * @Date:
+ -->
+<template>
+  <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')">本周</el-button>
+    <el-button round size="mini" @click="setDefaultTime('today')">今日</el-button>
+    <el-date-picker
+      v-model="timeRange"
+      :picker-options="pickerOptions"
+      type="daterange"
+      range-separator="至"
+      start-placeholder="开始日期"
+      end-placeholder="结束日期"
+      value-format="yyyy-MM-dd"
+      size="mini"
+      style="width:250px;margin-right: 20px"
+      @change="fetchData"/>
+  </div>
+</template>
+
+<script>
+  import { getDayTime } from '@/utils/dateutils'
+  export default {
+    name: "FunctionArea",
+    props:{
+      select:{
+        type: String,
+        default: 'today'
+      }
+    },
+    data() {
+      return {
+        timeRange: [],
+        pickerOptions: {
+          disabledDate: function(date) {
+            var oDate1 = new Date(date)
+            var oDate2 = new Date()
+            if (oDate1.getTime() > oDate2.getTime()) {
+              return true
+            } else {
+              return false
+            }
+          }
+        }
+      }
+    },
+    methods: {
+      init(){
+        this.setDefaultTime(this.select)
+      },
+      change(){
+        this.$emit('change', this.timeRange)
+      },
+      setDefaultTime(val) {
+        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
+          if (tMonth.toString().length === 1) {
+            tMonth = '0' + tMonth
+          }
+          const beginTime = tYear + '-' + tMonth + '-01'
+          const endTime = getDayTime(new Date().getTime())
+          this.timeRange = [beginTime, endTime.Format('yyyy-MM-dd')]
+        } else if (val === 'week') {
+          // const nowDayOfWeek =  new Date().getDay()-1
+          const nowDayOfWeek =  6
+          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') {
+          this.timeRange = [getDayTime(new Date().getTime()).Format('yyyy-MM-dd'), getDayTime(new Date().getTime()).Format('yyyy-MM-dd')]
+        }
+        this.change()
+      }
+    }
+  }
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  .statistic-container {
+
+    .el-button{
+      padding: 5px 10px;
+    }
+    margin-bottom: 10px;
+    text-align: center;
+    .chart-tool-button {
+      padding: 5px;
+      line-height: 16px;
+      margin-top: 5px;
+      font-size: 14px;
+    }
+    .chart-tool-button:hover {
+      background-color: #8cc5ff;
+      cursor: pointer;
+      color: white;
+    }
+    .chart-tool-button:active {
+      background-color: #8cc5ff;
+      color: white;
+    }
+  }
+  .selected {
+    background-color: #8cc5ff;
+    color: white;
+  }
+</style>
diff --git a/src/views/dashboard/components/PanelGroup.vue b/src/views/dashboard/components/PanelGroup.vue
index b72d289..7be90a7 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,32 @@
           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',
           permission: '/device/list'
         },
         {
@@ -67,11 +69,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 +85,10 @@
   },
   mounted() {
     this.getWater()
-    this.getWellCount()
+    // this.getWellCount()
     this.getDeviceCount()
     this.getAlarmCount()
-    this.getJobCount()
+    // this.getJobCount()
   },
   methods: {
     refresh() {
@@ -97,24 +99,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.production?parseFloat(response.data.production).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 +168,7 @@
   //   &:hover {
   //     .card-panel-icon-wrapper {
   //       color: #fff;
-        
+
   //     }
 
   //     .icon-people {
diff --git a/src/views/dashboard/components/watchAlarmBar.vue b/src/views/dashboard/components/watchAlarmBar.vue
index 13824f3..6a18ef6 100644
--- a/src/views/dashboard/components/watchAlarmBar.vue
+++ b/src/views/dashboard/components/watchAlarmBar.vue
@@ -1,9 +1,11 @@
+<!--水表告警统计-->
 <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"
@@ -18,14 +20,14 @@
         @change="fetchData"/>
     </div>
     <ve-histogram v-if="isShow" :data="chartData" :grid="grid" :title="title" :extend="extend" :settings="chartSettings"/>
-    <div class="function">
-      <el-button
-        v-for="item in areaList"
-        :key="item.id"
-        round
-        size="mini"
-        @click="areaChange(item.id)">{{ item.name }}</el-button>
-    </div>
+    <!--<div class="function">-->
+      <!--<el-button-->
+        <!--v-for="item in areaList"-->
+        <!--:key="item.id"-->
+        <!--round-->
+        <!--size="mini"-->
+        <!--@click="areaChange(item.id)">{{ item.name }}</el-button>-->
+    <!--</div>-->
   </div>
 </template>
 
@@ -38,51 +40,51 @@
 export default {
   name: 'WatchAlarmBar',
   data() {
-    this.extend = {
-      legend: {
-        show: false
-      },
-      xAxis: {
-        axisLabel: {
-          rotate: 30,
-          margin: 30,
-          textStyle: {
-            align: 'center'
-          }
-        }
-      },
-      yAxis: {
-        name: '报警次数',
-        position: 'left'
-      },
-      series: {
-        label: { show: true, position: 'top', formatter: '{c}' },
-        barWidth: 25
-      },
-      tooltip: { trigger: 'item', formatter: '{b}<br/>报警次数：{c}次' }
-    }
-    this.grid = {
-      right: 40,
-      top: 100,
-      bottom: 5
-    }
-    this.title = {
-      text: '水表告警统计'
-    }
-    this.chartSettings = {
-      itemStyle: {
-        barCategoryGap: 10
-      },
-
-      labelMap: {
-        'areaName': '分区',
-        'alarm': '报警数',
-        'warning': '预警数'
-      },
-      dimension: ['areaName'],
-      metrics: ['alarm', 'warning']
-    }
     return {
+      title:{
+        text: '水表告警统计'
+      },
+      chartSettings:{
+        itemStyle: {
+          barCategoryGap: 0
+        },
+        labelMap: {
+          'areaName': '分区',
+          'alarm': '报警数',
+          'warning': '预警数'
+        },
+        dimension: ['areaName'],
+        metrics: ['alarm', 'warning']
+      },
+      grid: {
+        right: 40,
+        top: 80,
+        bottom: 5
+      },
+      extend: {
+        legend: {
+          show: false
+        },
+        xAxis: {
+          axisLabel: {
+            rotate: 30,
+            margin: 30,
+            textStyle: {
+              align: 'center'
+            }
+          }
+        },
+        yAxis: {
+          name: '报警次数',
+          position: 'left',
+          max: 10
+        },
+        series: {
+          label: { show: true, position: 'top', formatter: '{c}' },
+          barWidth: 20
+        },
+        // tooltip: { trigger: 'item', formatter: '{b}<br/>报警次数：{c}次' }
+      },
       areaId: '',
       areaList: [],
       isShow: true,
@@ -100,43 +102,50 @@
         }
       },
       chartData: {
-        columns: ['wellTypeName', 'alarm'],
+        columns: ['areaName', 'alarm'],
         rows: []
       }
     }
   },
   mounted() {
     this.setDefaultTime('today')
-    this.fetchArea()
+    // this.fetchArea()
   },
   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()
-    },
+    // 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() {
       const params = {
-        areaId: this.areaId,
+        areaId: '110000',
         startTime: this.timeRange[0],
         endTime: this.timeRange[1]
       }
+      this.$emit('change', params)
       alarmBySecondArea(params).then(response => {
         this.isShow = false
         this.chartData.rows = response.data
+        const maxValue = Math.max.apply(Math, response.data.map(item=> {return item.alarm>item.warning?item.alarm: item.warning}))
+        if (maxValue < 10) {
+          this.extend.yAxis.max = 10
+        } else {
+          this.extend.yAxis = maxValue+1
+        }
         // this.chartData.rows = [
         //   { 'areaName': '科技楼及食堂', 'alarm': 53 },
         //   { 'areaName': 'A\\B\\C\\D\\E座', 'alarm': 78 },
@@ -186,10 +195,11 @@
     }
   }
   .statistic-container {
+
     .el-button{
       padding: 5px 10px;
     }
-    /*margin-bottom: 10px;*/
+    margin-bottom: 10px;
     text-align: center;
     .chart-tool-button {
       padding: 5px;
diff --git a/src/views/dashboard/components/waterCompare.vue b/src/views/dashboard/components/waterCompare.vue
new file mode 100644
index 0000000..8e34936
--- /dev/null
+++ b/src/views/dashboard/components/waterCompare.vue
@@ -0,0 +1,117 @@
+<!--分区用水对比图-->
+<template>
+  <div class="container">
+    <function-area ref="func" select="week" @change="fetchData"/>
+    <ve-histogram v-if="isShow" :data="chartData" :grid="grid" :title="title" :extend="extend" :settings="chartSettings"/>
+  </div>
+</template>
+
+<script>
+
+import 'echarts/lib/component/visualMap'
+import { alarmBySecondArea } from '@/api/overview'
+import { getDayTime } from '@/utils/dateutils'
+import { getDoorAreaTree } from '@/api/system/area'
+import FunctionArea from "./FunctionArea";
+export default {
+  name: 'WaterCompare',
+  components: {FunctionArea},
+  data() {
+    return {
+      title:{ text: '分区用水对比图'},
+      chartSettings:{
+        labelMap: {
+          'areaName': '分区',
+          'last': '报警数',
+          'now': '预警数'
+        },
+        dimension: ['areaName'],
+        metrics: ['last', 'now']
+      },
+      grid: {
+        right: 40,
+        top: 80,
+        bottom: 5
+      },
+      extend: {
+        legend: {
+          show: false
+        },
+        xAxis: {
+          axisLabel: {
+            rotate: 30,
+            margin: 30,
+            textStyle: {
+              align: 'center'
+            }
+          }
+        },
+        yAxis: {
+          name: '用水量(吨)',
+          position: 'left',
+          max: 10
+        },
+        series: {
+          label: { show: true, position: 'top', formatter: '{c}' },
+          barWidth: 20
+        },
+        // tooltip: { trigger: 'item', formatter: '{b}<br/>报警次数：{c}次' }
+      },
+      areaId: '',
+      areaList: [],
+      isShow: true,
+      defaultTimeRange: [],
+      chartData: {
+        columns: ['areaName', 'last', 'now'],
+        rows: []
+      },
+      nameDict:{
+        'today':['昨日用水','今日用水'],
+        'week':['近7日用水','对照时间用水',],
+        'month':['近30日用水','对照时间用水',],
+        'season':['上季度用水','本季度用水',],
+        'year':['上年度用水','本年度用水',],
+        'other':['对照时间用水','自选时间用水']
+      }
+    }
+  },
+  mounted(){
+    this.$refs.func.init()
+  },
+  methods: {
+    fetchData(timeRange) {
+      const params = {
+        areaId: '110000',
+        startTime: timeRange[0],
+        endTime: timeRange[1]
+      }
+      alarmBySecondArea(params).then(response => {
+        this.isShow = false
+        this.chartData.rows = response.data
+        const maxValue = Math.max.apply(Math, response.data.map(item=> {return item.last>item.now?item.last: item.now}))
+        if (maxValue < 10) {
+          this.extend.yAxis.max = 10
+        } else {
+          this.extend.yAxis = maxValue+1
+        }
+        // this.chartData.rows = [
+        //   { 'areaName': '科技楼及食堂', 'alarm': 53 },
+        //   { 'areaName': 'A\\B\\C\\D\\E座', 'alarm': 78 },
+        //   { 'areaName': '厂区', 'alarm': 78 }]
+        this.isShow = true
+      })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+  .container{
+    position:relative;
+    .function{
+      width:calc(100% - 120px);
+      height: 28px;
+      display: flex;
+      justify-content: center;
+    }
+  }
+</style>

diff --git a/src/api/dashboard.js b/src/api/dashboard.js
index e69de29..6ad37f1 100644
--- a/src/api/dashboard.js
+++ b/src/api/dashboard.js
@@ -0,0 +1,92 @@
+/**
+ * 井总览模块接口
+ */
+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: '/device/valve/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
+  })
+}
+
+
+// 用水事记查询
+export function getNoteList() {
+  return request({
+    // url: '/note/list',
+    url: 'waterMeterData/count',
+    method: 'get',
+    params
+  })
+}
+
+// 用水事记更新
+export function updateNoteList(params) {
+  return request({
+    // url: '/note/update',
+    url: 'waterMeterData/count',
+    method: 'post',
+    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/AlarmCountByDept.vue b/src/views/dashboard/components/AlarmCountByDept.vue
new file mode 100644
index 0000000..91df51d
--- /dev/null
+++ b/src/views/dashboard/components/AlarmCountByDept.vue
@@ -0,0 +1,80 @@
+<!--suppress ALL -->
+<template>
+  <div class="container">
+    <div style="height: 28px;margin-bottom: 10px;"/>
+    <ve-pie :data="chartData" :extend="extend" :title="title"/>
+
+  </div>
+</template>
+
+<script>
+import { alarmBySecondArea } from '@/api/overview'
+import { getDoorAreaTree } from '@/api/system/area'
+export default {
+  name: 'AlarmCountByDept',
+  props:{
+    query: {
+      type: Object,
+      default:()=>{
+        return {
+          areaId: '',
+          startTime: '',
+          endTime: ''
+        }
+      }
+    }
+  },
+  data() {
+    return {
+      chartData: {
+        columns: ['areaName', 'alarm'],
+        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': '分区',
+          'alarm': '报警数'
+        }
+      }
+    }
+  },
+  watch:{
+    query(val){
+      this.fetchData()
+    }
+  },
+  methods: {
+    // 获取统计数据
+    fetchData() {
+      alarmBySecondArea(this.query).then(response => {
+        debugger
+        this.chartData.rows = response.data
+      })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+  .container{
+
+  }
+</style>
diff --git a/src/views/dashboard/components/DeviceCount.vue b/src/views/dashboard/components/DeviceCount.vue
index 6c36bcb..453fa09 100644
--- a/src/views/dashboard/components/DeviceCount.vue
+++ b/src/views/dashboard/components/DeviceCount.vue
@@ -1,5 +1,9 @@
 <template>
-  <ve-bar :data="chartData" :grid="grid" :title="title" :extend="extend" :settings="chartSettings"/>
+  <div>
+    <div style="height: 28px;margin-bottom: 10px;"/>
+    <ve-bar :data="chartData" :grid="grid" :title="title" :extend="extend" :settings="chartSettings"/>
+  </div>
+
 </template>
 
 <script>
diff --git a/src/views/dashboard/components/FunctionArea.vue b/src/views/dashboard/components/FunctionArea.vue
new file mode 100644
index 0000000..e628c12
--- /dev/null
+++ b/src/views/dashboard/components/FunctionArea.vue
@@ -0,0 +1,128 @@
+<!--
+ * @Description:
+ * @Author: 王晓颖
+ * @Date:
+ -->
+<template>
+  <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')">本周</el-button>
+    <el-button round size="mini" @click="setDefaultTime('today')">今日</el-button>
+    <el-date-picker
+      v-model="timeRange"
+      :picker-options="pickerOptions"
+      type="daterange"
+      range-separator="至"
+      start-placeholder="开始日期"
+      end-placeholder="结束日期"
+      value-format="yyyy-MM-dd"
+      size="mini"
+      style="width:250px;margin-right: 20px"
+      @change="fetchData"/>
+  </div>
+</template>
+
+<script>
+  import { getDayTime } from '@/utils/dateutils'
+  export default {
+    name: "FunctionArea",
+    props:{
+      select:{
+        type: String,
+        default: 'today'
+      }
+    },
+    data() {
+      return {
+        timeRange: [],
+        pickerOptions: {
+          disabledDate: function(date) {
+            var oDate1 = new Date(date)
+            var oDate2 = new Date()
+            if (oDate1.getTime() > oDate2.getTime()) {
+              return true
+            } else {
+              return false
+            }
+          }
+        }
+      }
+    },
+    methods: {
+      init(){
+        this.setDefaultTime(this.select)
+      },
+      change(){
+        this.$emit('change', this.timeRange)
+      },
+      setDefaultTime(val) {
+        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
+          if (tMonth.toString().length === 1) {
+            tMonth = '0' + tMonth
+          }
+          const beginTime = tYear + '-' + tMonth + '-01'
+          const endTime = getDayTime(new Date().getTime())
+          this.timeRange = [beginTime, endTime.Format('yyyy-MM-dd')]
+        } else if (val === 'week') {
+          // const nowDayOfWeek =  new Date().getDay()-1
+          const nowDayOfWeek =  6
+          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') {
+          this.timeRange = [getDayTime(new Date().getTime()).Format('yyyy-MM-dd'), getDayTime(new Date().getTime()).Format('yyyy-MM-dd')]
+        }
+        this.change()
+      }
+    }
+  }
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  .statistic-container {
+
+    .el-button{
+      padding: 5px 10px;
+    }
+    margin-bottom: 10px;
+    text-align: center;
+    .chart-tool-button {
+      padding: 5px;
+      line-height: 16px;
+      margin-top: 5px;
+      font-size: 14px;
+    }
+    .chart-tool-button:hover {
+      background-color: #8cc5ff;
+      cursor: pointer;
+      color: white;
+    }
+    .chart-tool-button:active {
+      background-color: #8cc5ff;
+      color: white;
+    }
+  }
+  .selected {
+    background-color: #8cc5ff;
+    color: white;
+  }
+</style>
diff --git a/src/views/dashboard/components/PanelGroup.vue b/src/views/dashboard/components/PanelGroup.vue
index b72d289..7be90a7 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,32 @@
           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',
           permission: '/device/list'
         },
         {
@@ -67,11 +69,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 +85,10 @@
   },
   mounted() {
     this.getWater()
-    this.getWellCount()
+    // this.getWellCount()
     this.getDeviceCount()
     this.getAlarmCount()
-    this.getJobCount()
+    // this.getJobCount()
   },
   methods: {
     refresh() {
@@ -97,24 +99,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.production?parseFloat(response.data.production).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 +168,7 @@
   //   &:hover {
   //     .card-panel-icon-wrapper {
   //       color: #fff;
-        
+
   //     }
 
   //     .icon-people {
diff --git a/src/views/dashboard/components/watchAlarmBar.vue b/src/views/dashboard/components/watchAlarmBar.vue
index 13824f3..6a18ef6 100644
--- a/src/views/dashboard/components/watchAlarmBar.vue
+++ b/src/views/dashboard/components/watchAlarmBar.vue
@@ -1,9 +1,11 @@
+<!--水表告警统计-->
 <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"
@@ -18,14 +20,14 @@
         @change="fetchData"/>
     </div>
     <ve-histogram v-if="isShow" :data="chartData" :grid="grid" :title="title" :extend="extend" :settings="chartSettings"/>
-    <div class="function">
-      <el-button
-        v-for="item in areaList"
-        :key="item.id"
-        round
-        size="mini"
-        @click="areaChange(item.id)">{{ item.name }}</el-button>
-    </div>
+    <!--<div class="function">-->
+      <!--<el-button-->
+        <!--v-for="item in areaList"-->
+        <!--:key="item.id"-->
+        <!--round-->
+        <!--size="mini"-->
+        <!--@click="areaChange(item.id)">{{ item.name }}</el-button>-->
+    <!--</div>-->
   </div>
 </template>
 
@@ -38,51 +40,51 @@
 export default {
   name: 'WatchAlarmBar',
   data() {
-    this.extend = {
-      legend: {
-        show: false
-      },
-      xAxis: {
-        axisLabel: {
-          rotate: 30,
-          margin: 30,
-          textStyle: {
-            align: 'center'
-          }
-        }
-      },
-      yAxis: {
-        name: '报警次数',
-        position: 'left'
-      },
-      series: {
-        label: { show: true, position: 'top', formatter: '{c}' },
-        barWidth: 25
-      },
-      tooltip: { trigger: 'item', formatter: '{b}<br/>报警次数：{c}次' }
-    }
-    this.grid = {
-      right: 40,
-      top: 100,
-      bottom: 5
-    }
-    this.title = {
-      text: '水表告警统计'
-    }
-    this.chartSettings = {
-      itemStyle: {
-        barCategoryGap: 10
-      },
-
-      labelMap: {
-        'areaName': '分区',
-        'alarm': '报警数',
-        'warning': '预警数'
-      },
-      dimension: ['areaName'],
-      metrics: ['alarm', 'warning']
-    }
     return {
+      title:{
+        text: '水表告警统计'
+      },
+      chartSettings:{
+        itemStyle: {
+          barCategoryGap: 0
+        },
+        labelMap: {
+          'areaName': '分区',
+          'alarm': '报警数',
+          'warning': '预警数'
+        },
+        dimension: ['areaName'],
+        metrics: ['alarm', 'warning']
+      },
+      grid: {
+        right: 40,
+        top: 80,
+        bottom: 5
+      },
+      extend: {
+        legend: {
+          show: false
+        },
+        xAxis: {
+          axisLabel: {
+            rotate: 30,
+            margin: 30,
+            textStyle: {
+              align: 'center'
+            }
+          }
+        },
+        yAxis: {
+          name: '报警次数',
+          position: 'left',
+          max: 10
+        },
+        series: {
+          label: { show: true, position: 'top', formatter: '{c}' },
+          barWidth: 20
+        },
+        // tooltip: { trigger: 'item', formatter: '{b}<br/>报警次数：{c}次' }
+      },
       areaId: '',
       areaList: [],
       isShow: true,
@@ -100,43 +102,50 @@
         }
       },
       chartData: {
-        columns: ['wellTypeName', 'alarm'],
+        columns: ['areaName', 'alarm'],
         rows: []
       }
     }
   },
   mounted() {
     this.setDefaultTime('today')
-    this.fetchArea()
+    // this.fetchArea()
   },
   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()
-    },
+    // 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() {
       const params = {
-        areaId: this.areaId,
+        areaId: '110000',
         startTime: this.timeRange[0],
         endTime: this.timeRange[1]
       }
+      this.$emit('change', params)
       alarmBySecondArea(params).then(response => {
         this.isShow = false
         this.chartData.rows = response.data
+        const maxValue = Math.max.apply(Math, response.data.map(item=> {return item.alarm>item.warning?item.alarm: item.warning}))
+        if (maxValue < 10) {
+          this.extend.yAxis.max = 10
+        } else {
+          this.extend.yAxis = maxValue+1
+        }
         // this.chartData.rows = [
         //   { 'areaName': '科技楼及食堂', 'alarm': 53 },
         //   { 'areaName': 'A\\B\\C\\D\\E座', 'alarm': 78 },
@@ -186,10 +195,11 @@
     }
   }
   .statistic-container {
+
     .el-button{
       padding: 5px 10px;
     }
-    /*margin-bottom: 10px;*/
+    margin-bottom: 10px;
     text-align: center;
     .chart-tool-button {
       padding: 5px;
diff --git a/src/views/dashboard/components/waterCompare.vue b/src/views/dashboard/components/waterCompare.vue
new file mode 100644
index 0000000..8e34936
--- /dev/null
+++ b/src/views/dashboard/components/waterCompare.vue
@@ -0,0 +1,117 @@
+<!--分区用水对比图-->
+<template>
+  <div class="container">
+    <function-area ref="func" select="week" @change="fetchData"/>
+    <ve-histogram v-if="isShow" :data="chartData" :grid="grid" :title="title" :extend="extend" :settings="chartSettings"/>
+  </div>
+</template>
+
+<script>
+
+import 'echarts/lib/component/visualMap'
+import { alarmBySecondArea } from '@/api/overview'
+import { getDayTime } from '@/utils/dateutils'
+import { getDoorAreaTree } from '@/api/system/area'
+import FunctionArea from "./FunctionArea";
+export default {
+  name: 'WaterCompare',
+  components: {FunctionArea},
+  data() {
+    return {
+      title:{ text: '分区用水对比图'},
+      chartSettings:{
+        labelMap: {
+          'areaName': '分区',
+          'last': '报警数',
+          'now': '预警数'
+        },
+        dimension: ['areaName'],
+        metrics: ['last', 'now']
+      },
+      grid: {
+        right: 40,
+        top: 80,
+        bottom: 5
+      },
+      extend: {
+        legend: {
+          show: false
+        },
+        xAxis: {
+          axisLabel: {
+            rotate: 30,
+            margin: 30,
+            textStyle: {
+              align: 'center'
+            }
+          }
+        },
+        yAxis: {
+          name: '用水量(吨)',
+          position: 'left',
+          max: 10
+        },
+        series: {
+          label: { show: true, position: 'top', formatter: '{c}' },
+          barWidth: 20
+        },
+        // tooltip: { trigger: 'item', formatter: '{b}<br/>报警次数：{c}次' }
+      },
+      areaId: '',
+      areaList: [],
+      isShow: true,
+      defaultTimeRange: [],
+      chartData: {
+        columns: ['areaName', 'last', 'now'],
+        rows: []
+      },
+      nameDict:{
+        'today':['昨日用水','今日用水'],
+        'week':['近7日用水','对照时间用水',],
+        'month':['近30日用水','对照时间用水',],
+        'season':['上季度用水','本季度用水',],
+        'year':['上年度用水','本年度用水',],
+        'other':['对照时间用水','自选时间用水']
+      }
+    }
+  },
+  mounted(){
+    this.$refs.func.init()
+  },
+  methods: {
+    fetchData(timeRange) {
+      const params = {
+        areaId: '110000',
+        startTime: timeRange[0],
+        endTime: timeRange[1]
+      }
+      alarmBySecondArea(params).then(response => {
+        this.isShow = false
+        this.chartData.rows = response.data
+        const maxValue = Math.max.apply(Math, response.data.map(item=> {return item.last>item.now?item.last: item.now}))
+        if (maxValue < 10) {
+          this.extend.yAxis.max = 10
+        } else {
+          this.extend.yAxis = maxValue+1
+        }
+        // this.chartData.rows = [
+        //   { 'areaName': '科技楼及食堂', 'alarm': 53 },
+        //   { 'areaName': 'A\\B\\C\\D\\E座', 'alarm': 78 },
+        //   { 'areaName': '厂区', 'alarm': 78 }]
+        this.isShow = true
+      })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+  .container{
+    position:relative;
+    .function{
+      width:calc(100% - 120px);
+      height: 28px;
+      display: flex;
+      justify-content: center;
+    }
+  }
+</style>
diff --git a/src/views/dashboard/components/waterCountByAreaBar.vue b/src/views/dashboard/components/waterCountByAreaBar.vue
index 1bdac48..f4196f1 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"
@@ -18,14 +19,14 @@
         @change="fetchData"/>
     </div>
     <ve-histogram v-if="isShow" :data="chartData" :grid="grid" :title="title" :extend="extend" :settings="chartSettings"/>
-    <div class="function">
-      <el-button
-        v-for="item in areaList"
-        :key="item.id"
-        round
-        size="mini"
-        @click="areaChange(item.id)">{{ item.name }}</el-button>
-    </div>
+    <!--<div class="function">-->
+      <!--<el-button-->
+        <!--v-for="item in areaList"-->
+        <!--:key="item.id"-->
+        <!--round-->
+        <!--size="mini"-->
+        <!--@click="areaChange(item.id)">{{ item.name }}</el-button>-->
+    <!--</div>-->
   </div>
 </template>
 
@@ -106,8 +107,8 @@
     }
   },
   mounted() {
-    this.setDefaultTime('today')
-    this.fetchArea()
+    this.setDefaultTime('week')
+    // 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,9 @@
         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
+        const nowDayOfWeek =  6
+        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..6ad37f1 100644
--- a/src/api/dashboard.js
+++ b/src/api/dashboard.js
@@ -0,0 +1,92 @@
+/**
+ * 井总览模块接口
+ */
+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: '/device/valve/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
+  })
+}
+
+
+// 用水事记查询
+export function getNoteList() {
+  return request({
+    // url: '/note/list',
+    url: 'waterMeterData/count',
+    method: 'get',
+    params
+  })
+}
+
+// 用水事记更新
+export function updateNoteList(params) {
+  return request({
+    // url: '/note/update',
+    url: 'waterMeterData/count',
+    method: 'post',
+    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/AlarmCountByDept.vue b/src/views/dashboard/components/AlarmCountByDept.vue
new file mode 100644
index 0000000..91df51d
--- /dev/null
+++ b/src/views/dashboard/components/AlarmCountByDept.vue
@@ -0,0 +1,80 @@
+<!--suppress ALL -->
+<template>
+  <div class="container">
+    <div style="height: 28px;margin-bottom: 10px;"/>
+    <ve-pie :data="chartData" :extend="extend" :title="title"/>
+
+  </div>
+</template>
+
+<script>
+import { alarmBySecondArea } from '@/api/overview'
+import { getDoorAreaTree } from '@/api/system/area'
+export default {
+  name: 'AlarmCountByDept',
+  props:{
+    query: {
+      type: Object,
+      default:()=>{
+        return {
+          areaId: '',
+          startTime: '',
+          endTime: ''
+        }
+      }
+    }
+  },
+  data() {
+    return {
+      chartData: {
+        columns: ['areaName', 'alarm'],
+        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': '分区',
+          'alarm': '报警数'
+        }
+      }
+    }
+  },
+  watch:{
+    query(val){
+      this.fetchData()
+    }
+  },
+  methods: {
+    // 获取统计数据
+    fetchData() {
+      alarmBySecondArea(this.query).then(response => {
+        debugger
+        this.chartData.rows = response.data
+      })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+  .container{
+
+  }
+</style>
diff --git a/src/views/dashboard/components/DeviceCount.vue b/src/views/dashboard/components/DeviceCount.vue
index 6c36bcb..453fa09 100644
--- a/src/views/dashboard/components/DeviceCount.vue
+++ b/src/views/dashboard/components/DeviceCount.vue
@@ -1,5 +1,9 @@
 <template>
-  <ve-bar :data="chartData" :grid="grid" :title="title" :extend="extend" :settings="chartSettings"/>
+  <div>
+    <div style="height: 28px;margin-bottom: 10px;"/>
+    <ve-bar :data="chartData" :grid="grid" :title="title" :extend="extend" :settings="chartSettings"/>
+  </div>
+
 </template>
 
 <script>
diff --git a/src/views/dashboard/components/FunctionArea.vue b/src/views/dashboard/components/FunctionArea.vue
new file mode 100644
index 0000000..e628c12
--- /dev/null
+++ b/src/views/dashboard/components/FunctionArea.vue
@@ -0,0 +1,128 @@
+<!--
+ * @Description:
+ * @Author: 王晓颖
+ * @Date:
+ -->
+<template>
+  <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')">本周</el-button>
+    <el-button round size="mini" @click="setDefaultTime('today')">今日</el-button>
+    <el-date-picker
+      v-model="timeRange"
+      :picker-options="pickerOptions"
+      type="daterange"
+      range-separator="至"
+      start-placeholder="开始日期"
+      end-placeholder="结束日期"
+      value-format="yyyy-MM-dd"
+      size="mini"
+      style="width:250px;margin-right: 20px"
+      @change="fetchData"/>
+  </div>
+</template>
+
+<script>
+  import { getDayTime } from '@/utils/dateutils'
+  export default {
+    name: "FunctionArea",
+    props:{
+      select:{
+        type: String,
+        default: 'today'
+      }
+    },
+    data() {
+      return {
+        timeRange: [],
+        pickerOptions: {
+          disabledDate: function(date) {
+            var oDate1 = new Date(date)
+            var oDate2 = new Date()
+            if (oDate1.getTime() > oDate2.getTime()) {
+              return true
+            } else {
+              return false
+            }
+          }
+        }
+      }
+    },
+    methods: {
+      init(){
+        this.setDefaultTime(this.select)
+      },
+      change(){
+        this.$emit('change', this.timeRange)
+      },
+      setDefaultTime(val) {
+        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
+          if (tMonth.toString().length === 1) {
+            tMonth = '0' + tMonth
+          }
+          const beginTime = tYear + '-' + tMonth + '-01'
+          const endTime = getDayTime(new Date().getTime())
+          this.timeRange = [beginTime, endTime.Format('yyyy-MM-dd')]
+        } else if (val === 'week') {
+          // const nowDayOfWeek =  new Date().getDay()-1
+          const nowDayOfWeek =  6
+          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') {
+          this.timeRange = [getDayTime(new Date().getTime()).Format('yyyy-MM-dd'), getDayTime(new Date().getTime()).Format('yyyy-MM-dd')]
+        }
+        this.change()
+      }
+    }
+  }
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  .statistic-container {
+
+    .el-button{
+      padding: 5px 10px;
+    }
+    margin-bottom: 10px;
+    text-align: center;
+    .chart-tool-button {
+      padding: 5px;
+      line-height: 16px;
+      margin-top: 5px;
+      font-size: 14px;
+    }
+    .chart-tool-button:hover {
+      background-color: #8cc5ff;
+      cursor: pointer;
+      color: white;
+    }
+    .chart-tool-button:active {
+      background-color: #8cc5ff;
+      color: white;
+    }
+  }
+  .selected {
+    background-color: #8cc5ff;
+    color: white;
+  }
+</style>
diff --git a/src/views/dashboard/components/PanelGroup.vue b/src/views/dashboard/components/PanelGroup.vue
index b72d289..7be90a7 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,32 @@
           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',
           permission: '/device/list'
         },
         {
@@ -67,11 +69,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 +85,10 @@
   },
   mounted() {
     this.getWater()
-    this.getWellCount()
+    // this.getWellCount()
     this.getDeviceCount()
     this.getAlarmCount()
-    this.getJobCount()
+    // this.getJobCount()
   },
   methods: {
     refresh() {
@@ -97,24 +99,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.production?parseFloat(response.data.production).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 +168,7 @@
   //   &:hover {
   //     .card-panel-icon-wrapper {
   //       color: #fff;
-        
+
   //     }
 
   //     .icon-people {
diff --git a/src/views/dashboard/components/watchAlarmBar.vue b/src/views/dashboard/components/watchAlarmBar.vue
index 13824f3..6a18ef6 100644
--- a/src/views/dashboard/components/watchAlarmBar.vue
+++ b/src/views/dashboard/components/watchAlarmBar.vue
@@ -1,9 +1,11 @@
+<!--水表告警统计-->
 <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"
@@ -18,14 +20,14 @@
         @change="fetchData"/>
     </div>
     <ve-histogram v-if="isShow" :data="chartData" :grid="grid" :title="title" :extend="extend" :settings="chartSettings"/>
-    <div class="function">
-      <el-button
-        v-for="item in areaList"
-        :key="item.id"
-        round
-        size="mini"
-        @click="areaChange(item.id)">{{ item.name }}</el-button>
-    </div>
+    <!--<div class="function">-->
+      <!--<el-button-->
+        <!--v-for="item in areaList"-->
+        <!--:key="item.id"-->
+        <!--round-->
+        <!--size="mini"-->
+        <!--@click="areaChange(item.id)">{{ item.name }}</el-button>-->
+    <!--</div>-->
   </div>
 </template>
 
@@ -38,51 +40,51 @@
 export default {
   name: 'WatchAlarmBar',
   data() {
-    this.extend = {
-      legend: {
-        show: false
-      },
-      xAxis: {
-        axisLabel: {
-          rotate: 30,
-          margin: 30,
-          textStyle: {
-            align: 'center'
-          }
-        }
-      },
-      yAxis: {
-        name: '报警次数',
-        position: 'left'
-      },
-      series: {
-        label: { show: true, position: 'top', formatter: '{c}' },
-        barWidth: 25
-      },
-      tooltip: { trigger: 'item', formatter: '{b}<br/>报警次数：{c}次' }
-    }
-    this.grid = {
-      right: 40,
-      top: 100,
-      bottom: 5
-    }
-    this.title = {
-      text: '水表告警统计'
-    }
-    this.chartSettings = {
-      itemStyle: {
-        barCategoryGap: 10
-      },
-
-      labelMap: {
-        'areaName': '分区',
-        'alarm': '报警数',
-        'warning': '预警数'
-      },
-      dimension: ['areaName'],
-      metrics: ['alarm', 'warning']
-    }
     return {
+      title:{
+        text: '水表告警统计'
+      },
+      chartSettings:{
+        itemStyle: {
+          barCategoryGap: 0
+        },
+        labelMap: {
+          'areaName': '分区',
+          'alarm': '报警数',
+          'warning': '预警数'
+        },
+        dimension: ['areaName'],
+        metrics: ['alarm', 'warning']
+      },
+      grid: {
+        right: 40,
+        top: 80,
+        bottom: 5
+      },
+      extend: {
+        legend: {
+          show: false
+        },
+        xAxis: {
+          axisLabel: {
+            rotate: 30,
+            margin: 30,
+            textStyle: {
+              align: 'center'
+            }
+          }
+        },
+        yAxis: {
+          name: '报警次数',
+          position: 'left',
+          max: 10
+        },
+        series: {
+          label: { show: true, position: 'top', formatter: '{c}' },
+          barWidth: 20
+        },
+        // tooltip: { trigger: 'item', formatter: '{b}<br/>报警次数：{c}次' }
+      },
       areaId: '',
       areaList: [],
       isShow: true,
@@ -100,43 +102,50 @@
         }
       },
       chartData: {
-        columns: ['wellTypeName', 'alarm'],
+        columns: ['areaName', 'alarm'],
         rows: []
       }
     }
   },
   mounted() {
     this.setDefaultTime('today')
-    this.fetchArea()
+    // this.fetchArea()
   },
   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()
-    },
+    // 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() {
       const params = {
-        areaId: this.areaId,
+        areaId: '110000',
         startTime: this.timeRange[0],
         endTime: this.timeRange[1]
       }
+      this.$emit('change', params)
       alarmBySecondArea(params).then(response => {
         this.isShow = false
         this.chartData.rows = response.data
+        const maxValue = Math.max.apply(Math, response.data.map(item=> {return item.alarm>item.warning?item.alarm: item.warning}))
+        if (maxValue < 10) {
+          this.extend.yAxis.max = 10
+        } else {
+          this.extend.yAxis = maxValue+1
+        }
         // this.chartData.rows = [
         //   { 'areaName': '科技楼及食堂', 'alarm': 53 },
         //   { 'areaName': 'A\\B\\C\\D\\E座', 'alarm': 78 },
@@ -186,10 +195,11 @@
     }
   }
   .statistic-container {
+
     .el-button{
       padding: 5px 10px;
     }
-    /*margin-bottom: 10px;*/
+    margin-bottom: 10px;
     text-align: center;
     .chart-tool-button {
       padding: 5px;
diff --git a/src/views/dashboard/components/waterCompare.vue b/src/views/dashboard/components/waterCompare.vue
new file mode 100644
index 0000000..8e34936
--- /dev/null
+++ b/src/views/dashboard/components/waterCompare.vue
@@ -0,0 +1,117 @@
+<!--分区用水对比图-->
+<template>
+  <div class="container">
+    <function-area ref="func" select="week" @change="fetchData"/>
+    <ve-histogram v-if="isShow" :data="chartData" :grid="grid" :title="title" :extend="extend" :settings="chartSettings"/>
+  </div>
+</template>
+
+<script>
+
+import 'echarts/lib/component/visualMap'
+import { alarmBySecondArea } from '@/api/overview'
+import { getDayTime } from '@/utils/dateutils'
+import { getDoorAreaTree } from '@/api/system/area'
+import FunctionArea from "./FunctionArea";
+export default {
+  name: 'WaterCompare',
+  components: {FunctionArea},
+  data() {
+    return {
+      title:{ text: '分区用水对比图'},
+      chartSettings:{
+        labelMap: {
+          'areaName': '分区',
+          'last': '报警数',
+          'now': '预警数'
+        },
+        dimension: ['areaName'],
+        metrics: ['last', 'now']
+      },
+      grid: {
+        right: 40,
+        top: 80,
+        bottom: 5
+      },
+      extend: {
+        legend: {
+          show: false
+        },
+        xAxis: {
+          axisLabel: {
+            rotate: 30,
+            margin: 30,
+            textStyle: {
+              align: 'center'
+            }
+          }
+        },
+        yAxis: {
+          name: '用水量(吨)',
+          position: 'left',
+          max: 10
+        },
+        series: {
+          label: { show: true, position: 'top', formatter: '{c}' },
+          barWidth: 20
+        },
+        // tooltip: { trigger: 'item', formatter: '{b}<br/>报警次数：{c}次' }
+      },
+      areaId: '',
+      areaList: [],
+      isShow: true,
+      defaultTimeRange: [],
+      chartData: {
+        columns: ['areaName', 'last', 'now'],
+        rows: []
+      },
+      nameDict:{
+        'today':['昨日用水','今日用水'],
+        'week':['近7日用水','对照时间用水',],
+        'month':['近30日用水','对照时间用水',],
+        'season':['上季度用水','本季度用水',],
+        'year':['上年度用水','本年度用水',],
+        'other':['对照时间用水','自选时间用水']
+      }
+    }
+  },
+  mounted(){
+    this.$refs.func.init()
+  },
+  methods: {
+    fetchData(timeRange) {
+      const params = {
+        areaId: '110000',
+        startTime: timeRange[0],
+        endTime: timeRange[1]
+      }
+      alarmBySecondArea(params).then(response => {
+        this.isShow = false
+        this.chartData.rows = response.data
+        const maxValue = Math.max.apply(Math, response.data.map(item=> {return item.last>item.now?item.last: item.now}))
+        if (maxValue < 10) {
+          this.extend.yAxis.max = 10
+        } else {
+          this.extend.yAxis = maxValue+1
+        }
+        // this.chartData.rows = [
+        //   { 'areaName': '科技楼及食堂', 'alarm': 53 },
+        //   { 'areaName': 'A\\B\\C\\D\\E座', 'alarm': 78 },
+        //   { 'areaName': '厂区', 'alarm': 78 }]
+        this.isShow = true
+      })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+  .container{
+    position:relative;
+    .function{
+      width:calc(100% - 120px);
+      height: 28px;
+      display: flex;
+      justify-content: center;
+    }
+  }
+</style>
diff --git a/src/views/dashboard/components/waterCountByAreaBar.vue b/src/views/dashboard/components/waterCountByAreaBar.vue
index 1bdac48..f4196f1 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"
@@ -18,14 +19,14 @@
         @change="fetchData"/>
     </div>
     <ve-histogram v-if="isShow" :data="chartData" :grid="grid" :title="title" :extend="extend" :settings="chartSettings"/>
-    <div class="function">
-      <el-button
-        v-for="item in areaList"
-        :key="item.id"
-        round
-        size="mini"
-        @click="areaChange(item.id)">{{ item.name }}</el-button>
-    </div>
+    <!--<div class="function">-->
+      <!--<el-button-->
+        <!--v-for="item in areaList"-->
+        <!--:key="item.id"-->
+        <!--round-->
+        <!--size="mini"-->
+        <!--@click="areaChange(item.id)">{{ item.name }}</el-button>-->
+    <!--</div>-->
   </div>
 </template>
 
@@ -106,8 +107,8 @@
     }
   },
   mounted() {
-    this.setDefaultTime('today')
-    this.fetchArea()
+    this.setDefaultTime('week')
+    // 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,9 @@
         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
+        const nowDayOfWeek =  6
+        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..07524f9 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: {
@@ -27,8 +39,7 @@
         text: '用水走势图'
       },
       chartSettings: {
-        labelMap: {
-        },
+        labelMap: {date:'日期'},
         metrics: [],
         dimension: ['date']
       },
@@ -52,13 +63,19 @@
     }
   },
   mounted() {
-    this.changeTime('month')
-    this.fetchArea()
+    // this.changeTime('month')
+    // this.fetchArea()
+  },
+  watch:{
+    query(val){
+      this.fetchData()
+    }
   },
   methods: {
     fetchArea() {
       getDoorAreaTree().then(response => {
         if (response.code === 200) {
+          debugger
           const area = response.data.filter(item => {
             return item.pid === '1'
           }).map(item => item.name)
@@ -73,15 +90,21 @@
       })
     },
     fetchData() {
-      countByDayFirst(this.listQuery).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
-          }
-          delete item.data
-          return item
-        })
-        this.chartData.rows = arr
+      countByDayFirst(this.query).then(response => {
+        if(response.data.length>0){
+          const arr = response.data.map((item)=> {
+            const result = {date: item.date}
+            for (let i = 0; i < item.data.length; i++) {
+              result[item.data[i].areaName] = item.data[i].count
+            }
+            return result
+          })
+          const area = response.data[0].data.map(item=>item.areaName)
+          this.chartData.columns = ['date', ...area]
+          this.chartSettings.metrics = area
+          this.chartSettings.labelMap = {'date':'日期'}
+          this.chartData.rows = arr
+        }
       })
       // 模拟数据
       // this.chartData.rows = [
@@ -126,17 +149,7 @@
 </script>
 <style lang="scss" scoped>
   .container{
-    position:relative;
-    .function{
-      /*position:absolute;*/
-      /*z-index:200;*/
-      /*bottom: 10px;*/
-      /*left: 0;*/
-      width:100%;
-      height: 28px;
-      display: flex;
-      justify-content: center;
-    }
+
   }
 </style>
 

diff --git a/src/api/dashboard.js b/src/api/dashboard.js
index e69de29..6ad37f1 100644
--- a/src/api/dashboard.js
+++ b/src/api/dashboard.js
@@ -0,0 +1,92 @@
+/**
+ * 井总览模块接口
+ */
+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: '/device/valve/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
+  })
+}
+
+
+// 用水事记查询
+export function getNoteList() {
+  return request({
+    // url: '/note/list',
+    url: 'waterMeterData/count',
+    method: 'get',
+    params
+  })
+}
+
+// 用水事记更新
+export function updateNoteList(params) {
+  return request({
+    // url: '/note/update',
+    url: 'waterMeterData/count',
+    method: 'post',
+    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/AlarmCountByDept.vue b/src/views/dashboard/components/AlarmCountByDept.vue
new file mode 100644
index 0000000..91df51d
--- /dev/null
+++ b/src/views/dashboard/components/AlarmCountByDept.vue
@@ -0,0 +1,80 @@
+<!--suppress ALL -->
+<template>
+  <div class="container">
+    <div style="height: 28px;margin-bottom: 10px;"/>
+    <ve-pie :data="chartData" :extend="extend" :title="title"/>
+
+  </div>
+</template>
+
+<script>
+import { alarmBySecondArea } from '@/api/overview'
+import { getDoorAreaTree } from '@/api/system/area'
+export default {
+  name: 'AlarmCountByDept',
+  props:{
+    query: {
+      type: Object,
+      default:()=>{
+        return {
+          areaId: '',
+          startTime: '',
+          endTime: ''
+        }
+      }
+    }
+  },
+  data() {
+    return {
+      chartData: {
+        columns: ['areaName', 'alarm'],
+        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': '分区',
+          'alarm': '报警数'
+        }
+      }
+    }
+  },
+  watch:{
+    query(val){
+      this.fetchData()
+    }
+  },
+  methods: {
+    // 获取统计数据
+    fetchData() {
+      alarmBySecondArea(this.query).then(response => {
+        debugger
+        this.chartData.rows = response.data
+      })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+  .container{
+
+  }
+</style>
diff --git a/src/views/dashboard/components/DeviceCount.vue b/src/views/dashboard/components/DeviceCount.vue
index 6c36bcb..453fa09 100644
--- a/src/views/dashboard/components/DeviceCount.vue
+++ b/src/views/dashboard/components/DeviceCount.vue
@@ -1,5 +1,9 @@
 <template>
-  <ve-bar :data="chartData" :grid="grid" :title="title" :extend="extend" :settings="chartSettings"/>
+  <div>
+    <div style="height: 28px;margin-bottom: 10px;"/>
+    <ve-bar :data="chartData" :grid="grid" :title="title" :extend="extend" :settings="chartSettings"/>
+  </div>
+
 </template>
 
 <script>
diff --git a/src/views/dashboard/components/FunctionArea.vue b/src/views/dashboard/components/FunctionArea.vue
new file mode 100644
index 0000000..e628c12
--- /dev/null
+++ b/src/views/dashboard/components/FunctionArea.vue
@@ -0,0 +1,128 @@
+<!--
+ * @Description:
+ * @Author: 王晓颖
+ * @Date:
+ -->
+<template>
+  <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')">本周</el-button>
+    <el-button round size="mini" @click="setDefaultTime('today')">今日</el-button>
+    <el-date-picker
+      v-model="timeRange"
+      :picker-options="pickerOptions"
+      type="daterange"
+      range-separator="至"
+      start-placeholder="开始日期"
+      end-placeholder="结束日期"
+      value-format="yyyy-MM-dd"
+      size="mini"
+      style="width:250px;margin-right: 20px"
+      @change="fetchData"/>
+  </div>
+</template>
+
+<script>
+  import { getDayTime } from '@/utils/dateutils'
+  export default {
+    name: "FunctionArea",
+    props:{
+      select:{
+        type: String,
+        default: 'today'
+      }
+    },
+    data() {
+      return {
+        timeRange: [],
+        pickerOptions: {
+          disabledDate: function(date) {
+            var oDate1 = new Date(date)
+            var oDate2 = new Date()
+            if (oDate1.getTime() > oDate2.getTime()) {
+              return true
+            } else {
+              return false
+            }
+          }
+        }
+      }
+    },
+    methods: {
+      init(){
+        this.setDefaultTime(this.select)
+      },
+      change(){
+        this.$emit('change', this.timeRange)
+      },
+      setDefaultTime(val) {
+        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
+          if (tMonth.toString().length === 1) {
+            tMonth = '0' + tMonth
+          }
+          const beginTime = tYear + '-' + tMonth + '-01'
+          const endTime = getDayTime(new Date().getTime())
+          this.timeRange = [beginTime, endTime.Format('yyyy-MM-dd')]
+        } else if (val === 'week') {
+          // const nowDayOfWeek =  new Date().getDay()-1
+          const nowDayOfWeek =  6
+          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') {
+          this.timeRange = [getDayTime(new Date().getTime()).Format('yyyy-MM-dd'), getDayTime(new Date().getTime()).Format('yyyy-MM-dd')]
+        }
+        this.change()
+      }
+    }
+  }
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  .statistic-container {
+
+    .el-button{
+      padding: 5px 10px;
+    }
+    margin-bottom: 10px;
+    text-align: center;
+    .chart-tool-button {
+      padding: 5px;
+      line-height: 16px;
+      margin-top: 5px;
+      font-size: 14px;
+    }
+    .chart-tool-button:hover {
+      background-color: #8cc5ff;
+      cursor: pointer;
+      color: white;
+    }
+    .chart-tool-button:active {
+      background-color: #8cc5ff;
+      color: white;
+    }
+  }
+  .selected {
+    background-color: #8cc5ff;
+    color: white;
+  }
+</style>
diff --git a/src/views/dashboard/components/PanelGroup.vue b/src/views/dashboard/components/PanelGroup.vue
index b72d289..7be90a7 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,32 @@
           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',
           permission: '/device/list'
         },
         {
@@ -67,11 +69,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 +85,10 @@
   },
   mounted() {
     this.getWater()
-    this.getWellCount()
+    // this.getWellCount()
     this.getDeviceCount()
     this.getAlarmCount()
-    this.getJobCount()
+    // this.getJobCount()
   },
   methods: {
     refresh() {
@@ -97,24 +99,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.production?parseFloat(response.data.production).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 +168,7 @@
   //   &:hover {
   //     .card-panel-icon-wrapper {
   //       color: #fff;
-        
+
   //     }
 
   //     .icon-people {
diff --git a/src/views/dashboard/components/watchAlarmBar.vue b/src/views/dashboard/components/watchAlarmBar.vue
index 13824f3..6a18ef6 100644
--- a/src/views/dashboard/components/watchAlarmBar.vue
+++ b/src/views/dashboard/components/watchAlarmBar.vue
@@ -1,9 +1,11 @@
+<!--水表告警统计-->
 <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"
@@ -18,14 +20,14 @@
         @change="fetchData"/>
     </div>
     <ve-histogram v-if="isShow" :data="chartData" :grid="grid" :title="title" :extend="extend" :settings="chartSettings"/>
-    <div class="function">
-      <el-button
-        v-for="item in areaList"
-        :key="item.id"
-        round
-        size="mini"
-        @click="areaChange(item.id)">{{ item.name }}</el-button>
-    </div>
+    <!--<div class="function">-->
+      <!--<el-button-->
+        <!--v-for="item in areaList"-->
+        <!--:key="item.id"-->
+        <!--round-->
+        <!--size="mini"-->
+        <!--@click="areaChange(item.id)">{{ item.name }}</el-button>-->
+    <!--</div>-->
   </div>
 </template>
 
@@ -38,51 +40,51 @@
 export default {
   name: 'WatchAlarmBar',
   data() {
-    this.extend = {
-      legend: {
-        show: false
-      },
-      xAxis: {
-        axisLabel: {
-          rotate: 30,
-          margin: 30,
-          textStyle: {
-            align: 'center'
-          }
-        }
-      },
-      yAxis: {
-        name: '报警次数',
-        position: 'left'
-      },
-      series: {
-        label: { show: true, position: 'top', formatter: '{c}' },
-        barWidth: 25
-      },
-      tooltip: { trigger: 'item', formatter: '{b}<br/>报警次数：{c}次' }
-    }
-    this.grid = {
-      right: 40,
-      top: 100,
-      bottom: 5
-    }
-    this.title = {
-      text: '水表告警统计'
-    }
-    this.chartSettings = {
-      itemStyle: {
-        barCategoryGap: 10
-      },
-
-      labelMap: {
-        'areaName': '分区',
-        'alarm': '报警数',
-        'warning': '预警数'
-      },
-      dimension: ['areaName'],
-      metrics: ['alarm', 'warning']
-    }
     return {
+      title:{
+        text: '水表告警统计'
+      },
+      chartSettings:{
+        itemStyle: {
+          barCategoryGap: 0
+        },
+        labelMap: {
+          'areaName': '分区',
+          'alarm': '报警数',
+          'warning': '预警数'
+        },
+        dimension: ['areaName'],
+        metrics: ['alarm', 'warning']
+      },
+      grid: {
+        right: 40,
+        top: 80,
+        bottom: 5
+      },
+      extend: {
+        legend: {
+          show: false
+        },
+        xAxis: {
+          axisLabel: {
+            rotate: 30,
+            margin: 30,
+            textStyle: {
+              align: 'center'
+            }
+          }
+        },
+        yAxis: {
+          name: '报警次数',
+          position: 'left',
+          max: 10
+        },
+        series: {
+          label: { show: true, position: 'top', formatter: '{c}' },
+          barWidth: 20
+        },
+        // tooltip: { trigger: 'item', formatter: '{b}<br/>报警次数：{c}次' }
+      },
       areaId: '',
       areaList: [],
       isShow: true,
@@ -100,43 +102,50 @@
         }
       },
       chartData: {
-        columns: ['wellTypeName', 'alarm'],
+        columns: ['areaName', 'alarm'],
         rows: []
       }
     }
   },
   mounted() {
     this.setDefaultTime('today')
-    this.fetchArea()
+    // this.fetchArea()
   },
   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()
-    },
+    // 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() {
       const params = {
-        areaId: this.areaId,
+        areaId: '110000',
         startTime: this.timeRange[0],
         endTime: this.timeRange[1]
       }
+      this.$emit('change', params)
       alarmBySecondArea(params).then(response => {
         this.isShow = false
         this.chartData.rows = response.data
+        const maxValue = Math.max.apply(Math, response.data.map(item=> {return item.alarm>item.warning?item.alarm: item.warning}))
+        if (maxValue < 10) {
+          this.extend.yAxis.max = 10
+        } else {
+          this.extend.yAxis = maxValue+1
+        }
         // this.chartData.rows = [
         //   { 'areaName': '科技楼及食堂', 'alarm': 53 },
         //   { 'areaName': 'A\\B\\C\\D\\E座', 'alarm': 78 },
@@ -186,10 +195,11 @@
     }
   }
   .statistic-container {
+
     .el-button{
       padding: 5px 10px;
     }
-    /*margin-bottom: 10px;*/
+    margin-bottom: 10px;
     text-align: center;
     .chart-tool-button {
       padding: 5px;
diff --git a/src/views/dashboard/components/waterCompare.vue b/src/views/dashboard/components/waterCompare.vue
new file mode 100644
index 0000000..8e34936
--- /dev/null
+++ b/src/views/dashboard/components/waterCompare.vue
@@ -0,0 +1,117 @@
+<!--分区用水对比图-->
+<template>
+  <div class="container">
+    <function-area ref="func" select="week" @change="fetchData"/>
+    <ve-histogram v-if="isShow" :data="chartData" :grid="grid" :title="title" :extend="extend" :settings="chartSettings"/>
+  </div>
+</template>
+
+<script>
+
+import 'echarts/lib/component/visualMap'
+import { alarmBySecondArea } from '@/api/overview'
+import { getDayTime } from '@/utils/dateutils'
+import { getDoorAreaTree } from '@/api/system/area'
+import FunctionArea from "./FunctionArea";
+export default {
+  name: 'WaterCompare',
+  components: {FunctionArea},
+  data() {
+    return {
+      title:{ text: '分区用水对比图'},
+      chartSettings:{
+        labelMap: {
+          'areaName': '分区',
+          'last': '报警数',
+          'now': '预警数'
+        },
+        dimension: ['areaName'],
+        metrics: ['last', 'now']
+      },
+      grid: {
+        right: 40,
+        top: 80,
+        bottom: 5
+      },
+      extend: {
+        legend: {
+          show: false
+        },
+        xAxis: {
+          axisLabel: {
+            rotate: 30,
+            margin: 30,
+            textStyle: {
+              align: 'center'
+            }
+          }
+        },
+        yAxis: {
+          name: '用水量(吨)',
+          position: 'left',
+          max: 10
+        },
+        series: {
+          label: { show: true, position: 'top', formatter: '{c}' },
+          barWidth: 20
+        },
+        // tooltip: { trigger: 'item', formatter: '{b}<br/>报警次数：{c}次' }
+      },
+      areaId: '',
+      areaList: [],
+      isShow: true,
+      defaultTimeRange: [],
+      chartData: {
+        columns: ['areaName', 'last', 'now'],
+        rows: []
+      },
+      nameDict:{
+        'today':['昨日用水','今日用水'],
+        'week':['近7日用水','对照时间用水',],
+        'month':['近30日用水','对照时间用水',],
+        'season':['上季度用水','本季度用水',],
+        'year':['上年度用水','本年度用水',],
+        'other':['对照时间用水','自选时间用水']
+      }
+    }
+  },
+  mounted(){
+    this.$refs.func.init()
+  },
+  methods: {
+    fetchData(timeRange) {
+      const params = {
+        areaId: '110000',
+        startTime: timeRange[0],
+        endTime: timeRange[1]
+      }
+      alarmBySecondArea(params).then(response => {
+        this.isShow = false
+        this.chartData.rows = response.data
+        const maxValue = Math.max.apply(Math, response.data.map(item=> {return item.last>item.now?item.last: item.now}))
+        if (maxValue < 10) {
+          this.extend.yAxis.max = 10
+        } else {
+          this.extend.yAxis = maxValue+1
+        }
+        // this.chartData.rows = [
+        //   { 'areaName': '科技楼及食堂', 'alarm': 53 },
+        //   { 'areaName': 'A\\B\\C\\D\\E座', 'alarm': 78 },
+        //   { 'areaName': '厂区', 'alarm': 78 }]
+        this.isShow = true
+      })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+  .container{
+    position:relative;
+    .function{
+      width:calc(100% - 120px);
+      height: 28px;
+      display: flex;
+      justify-content: center;
+    }
+  }
+</style>
diff --git a/src/views/dashboard/components/waterCountByAreaBar.vue b/src/views/dashboard/components/waterCountByAreaBar.vue
index 1bdac48..f4196f1 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"
@@ -18,14 +19,14 @@
         @change="fetchData"/>
     </div>
     <ve-histogram v-if="isShow" :data="chartData" :grid="grid" :title="title" :extend="extend" :settings="chartSettings"/>
-    <div class="function">
-      <el-button
-        v-for="item in areaList"
-        :key="item.id"
-        round
-        size="mini"
-        @click="areaChange(item.id)">{{ item.name }}</el-button>
-    </div>
+    <!--<div class="function">-->
+      <!--<el-button-->
+        <!--v-for="item in areaList"-->
+        <!--:key="item.id"-->
+        <!--round-->
+        <!--size="mini"-->
+        <!--@click="areaChange(item.id)">{{ item.name }}</el-button>-->
+    <!--</div>-->
   </div>
 </template>
 
@@ -106,8 +107,8 @@
     }
   },
   mounted() {
-    this.setDefaultTime('today')
-    this.fetchArea()
+    this.setDefaultTime('week')
+    // 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,9 @@
         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
+        const nowDayOfWeek =  6
+        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..07524f9 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: {
@@ -27,8 +39,7 @@
         text: '用水走势图'
       },
       chartSettings: {
-        labelMap: {
-        },
+        labelMap: {date:'日期'},
         metrics: [],
         dimension: ['date']
       },
@@ -52,13 +63,19 @@
     }
   },
   mounted() {
-    this.changeTime('month')
-    this.fetchArea()
+    // this.changeTime('month')
+    // this.fetchArea()
+  },
+  watch:{
+    query(val){
+      this.fetchData()
+    }
   },
   methods: {
     fetchArea() {
       getDoorAreaTree().then(response => {
         if (response.code === 200) {
+          debugger
           const area = response.data.filter(item => {
             return item.pid === '1'
           }).map(item => item.name)
@@ -73,15 +90,21 @@
       })
     },
     fetchData() {
-      countByDayFirst(this.listQuery).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
-          }
-          delete item.data
-          return item
-        })
-        this.chartData.rows = arr
+      countByDayFirst(this.query).then(response => {
+        if(response.data.length>0){
+          const arr = response.data.map((item)=> {
+            const result = {date: item.date}
+            for (let i = 0; i < item.data.length; i++) {
+              result[item.data[i].areaName] = item.data[i].count
+            }
+            return result
+          })
+          const area = response.data[0].data.map(item=>item.areaName)
+          this.chartData.columns = ['date', ...area]
+          this.chartSettings.metrics = area
+          this.chartSettings.labelMap = {'date':'日期'}
+          this.chartData.rows = arr
+        }
       })
       // 模拟数据
       // this.chartData.rows = [
@@ -126,17 +149,7 @@
 </script>
 <style lang="scss" scoped>
   .container{
-    position:relative;
-    .function{
-      /*position:absolute;*/
-      /*z-index:200;*/
-      /*bottom: 10px;*/
-      /*left: 0;*/
-      width:100%;
-      height: 28px;
-      display: flex;
-      justify-content: center;
-    }
+
   }
 </style>
 
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..6ad37f1 100644
--- a/src/api/dashboard.js
+++ b/src/api/dashboard.js
@@ -0,0 +1,92 @@
+/**
+ * 井总览模块接口
+ */
+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: '/device/valve/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
+  })
+}
+
+
+// 用水事记查询
+export function getNoteList() {
+  return request({
+    // url: '/note/list',
+    url: 'waterMeterData/count',
+    method: 'get',
+    params
+  })
+}
+
+// 用水事记更新
+export function updateNoteList(params) {
+  return request({
+    // url: '/note/update',
+    url: 'waterMeterData/count',
+    method: 'post',
+    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/AlarmCountByDept.vue b/src/views/dashboard/components/AlarmCountByDept.vue
new file mode 100644
index 0000000..91df51d
--- /dev/null
+++ b/src/views/dashboard/components/AlarmCountByDept.vue
@@ -0,0 +1,80 @@
+<!--suppress ALL -->
+<template>
+  <div class="container">
+    <div style="height: 28px;margin-bottom: 10px;"/>
+    <ve-pie :data="chartData" :extend="extend" :title="title"/>
+
+  </div>
+</template>
+
+<script>
+import { alarmBySecondArea } from '@/api/overview'
+import { getDoorAreaTree } from '@/api/system/area'
+export default {
+  name: 'AlarmCountByDept',
+  props:{
+    query: {
+      type: Object,
+      default:()=>{
+        return {
+          areaId: '',
+          startTime: '',
+          endTime: ''
+        }
+      }
+    }
+  },
+  data() {
+    return {
+      chartData: {
+        columns: ['areaName', 'alarm'],
+        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': '分区',
+          'alarm': '报警数'
+        }
+      }
+    }
+  },
+  watch:{
+    query(val){
+      this.fetchData()
+    }
+  },
+  methods: {
+    // 获取统计数据
+    fetchData() {
+      alarmBySecondArea(this.query).then(response => {
+        debugger
+        this.chartData.rows = response.data
+      })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+  .container{
+
+  }
+</style>
diff --git a/src/views/dashboard/components/DeviceCount.vue b/src/views/dashboard/components/DeviceCount.vue
index 6c36bcb..453fa09 100644
--- a/src/views/dashboard/components/DeviceCount.vue
+++ b/src/views/dashboard/components/DeviceCount.vue
@@ -1,5 +1,9 @@
 <template>
-  <ve-bar :data="chartData" :grid="grid" :title="title" :extend="extend" :settings="chartSettings"/>
+  <div>
+    <div style="height: 28px;margin-bottom: 10px;"/>
+    <ve-bar :data="chartData" :grid="grid" :title="title" :extend="extend" :settings="chartSettings"/>
+  </div>
+
 </template>
 
 <script>
diff --git a/src/views/dashboard/components/FunctionArea.vue b/src/views/dashboard/components/FunctionArea.vue
new file mode 100644
index 0000000..e628c12
--- /dev/null
+++ b/src/views/dashboard/components/FunctionArea.vue
@@ -0,0 +1,128 @@
+<!--
+ * @Description:
+ * @Author: 王晓颖
+ * @Date:
+ -->
+<template>
+  <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')">本周</el-button>
+    <el-button round size="mini" @click="setDefaultTime('today')">今日</el-button>
+    <el-date-picker
+      v-model="timeRange"
+      :picker-options="pickerOptions"
+      type="daterange"
+      range-separator="至"
+      start-placeholder="开始日期"
+      end-placeholder="结束日期"
+      value-format="yyyy-MM-dd"
+      size="mini"
+      style="width:250px;margin-right: 20px"
+      @change="fetchData"/>
+  </div>
+</template>
+
+<script>
+  import { getDayTime } from '@/utils/dateutils'
+  export default {
+    name: "FunctionArea",
+    props:{
+      select:{
+        type: String,
+        default: 'today'
+      }
+    },
+    data() {
+      return {
+        timeRange: [],
+        pickerOptions: {
+          disabledDate: function(date) {
+            var oDate1 = new Date(date)
+            var oDate2 = new Date()
+            if (oDate1.getTime() > oDate2.getTime()) {
+              return true
+            } else {
+              return false
+            }
+          }
+        }
+      }
+    },
+    methods: {
+      init(){
+        this.setDefaultTime(this.select)
+      },
+      change(){
+        this.$emit('change', this.timeRange)
+      },
+      setDefaultTime(val) {
+        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
+          if (tMonth.toString().length === 1) {
+            tMonth = '0' + tMonth
+          }
+          const beginTime = tYear + '-' + tMonth + '-01'
+          const endTime = getDayTime(new Date().getTime())
+          this.timeRange = [beginTime, endTime.Format('yyyy-MM-dd')]
+        } else if (val === 'week') {
+          // const nowDayOfWeek =  new Date().getDay()-1
+          const nowDayOfWeek =  6
+          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') {
+          this.timeRange = [getDayTime(new Date().getTime()).Format('yyyy-MM-dd'), getDayTime(new Date().getTime()).Format('yyyy-MM-dd')]
+        }
+        this.change()
+      }
+    }
+  }
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  .statistic-container {
+
+    .el-button{
+      padding: 5px 10px;
+    }
+    margin-bottom: 10px;
+    text-align: center;
+    .chart-tool-button {
+      padding: 5px;
+      line-height: 16px;
+      margin-top: 5px;
+      font-size: 14px;
+    }
+    .chart-tool-button:hover {
+      background-color: #8cc5ff;
+      cursor: pointer;
+      color: white;
+    }
+    .chart-tool-button:active {
+      background-color: #8cc5ff;
+      color: white;
+    }
+  }
+  .selected {
+    background-color: #8cc5ff;
+    color: white;
+  }
+</style>
diff --git a/src/views/dashboard/components/PanelGroup.vue b/src/views/dashboard/components/PanelGroup.vue
index b72d289..7be90a7 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,32 @@
           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',
           permission: '/device/list'
         },
         {
@@ -67,11 +69,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 +85,10 @@
   },
   mounted() {
     this.getWater()
-    this.getWellCount()
+    // this.getWellCount()
     this.getDeviceCount()
     this.getAlarmCount()
-    this.getJobCount()
+    // this.getJobCount()
   },
   methods: {
     refresh() {
@@ -97,24 +99,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.production?parseFloat(response.data.production).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 +168,7 @@
   //   &:hover {
   //     .card-panel-icon-wrapper {
   //       color: #fff;
-        
+
   //     }
 
   //     .icon-people {
diff --git a/src/views/dashboard/components/watchAlarmBar.vue b/src/views/dashboard/components/watchAlarmBar.vue
index 13824f3..6a18ef6 100644
--- a/src/views/dashboard/components/watchAlarmBar.vue
+++ b/src/views/dashboard/components/watchAlarmBar.vue
@@ -1,9 +1,11 @@
+<!--水表告警统计-->
 <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"
@@ -18,14 +20,14 @@
         @change="fetchData"/>
     </div>
     <ve-histogram v-if="isShow" :data="chartData" :grid="grid" :title="title" :extend="extend" :settings="chartSettings"/>
-    <div class="function">
-      <el-button
-        v-for="item in areaList"
-        :key="item.id"
-        round
-        size="mini"
-        @click="areaChange(item.id)">{{ item.name }}</el-button>
-    </div>
+    <!--<div class="function">-->
+      <!--<el-button-->
+        <!--v-for="item in areaList"-->
+        <!--:key="item.id"-->
+        <!--round-->
+        <!--size="mini"-->
+        <!--@click="areaChange(item.id)">{{ item.name }}</el-button>-->
+    <!--</div>-->
   </div>
 </template>
 
@@ -38,51 +40,51 @@
 export default {
   name: 'WatchAlarmBar',
   data() {
-    this.extend = {
-      legend: {
-        show: false
-      },
-      xAxis: {
-        axisLabel: {
-          rotate: 30,
-          margin: 30,
-          textStyle: {
-            align: 'center'
-          }
-        }
-      },
-      yAxis: {
-        name: '报警次数',
-        position: 'left'
-      },
-      series: {
-        label: { show: true, position: 'top', formatter: '{c}' },
-        barWidth: 25
-      },
-      tooltip: { trigger: 'item', formatter: '{b}<br/>报警次数：{c}次' }
-    }
-    this.grid = {
-      right: 40,
-      top: 100,
-      bottom: 5
-    }
-    this.title = {
-      text: '水表告警统计'
-    }
-    this.chartSettings = {
-      itemStyle: {
-        barCategoryGap: 10
-      },
-
-      labelMap: {
-        'areaName': '分区',
-        'alarm': '报警数',
-        'warning': '预警数'
-      },
-      dimension: ['areaName'],
-      metrics: ['alarm', 'warning']
-    }
     return {
+      title:{
+        text: '水表告警统计'
+      },
+      chartSettings:{
+        itemStyle: {
+          barCategoryGap: 0
+        },
+        labelMap: {
+          'areaName': '分区',
+          'alarm': '报警数',
+          'warning': '预警数'
+        },
+        dimension: ['areaName'],
+        metrics: ['alarm', 'warning']
+      },
+      grid: {
+        right: 40,
+        top: 80,
+        bottom: 5
+      },
+      extend: {
+        legend: {
+          show: false
+        },
+        xAxis: {
+          axisLabel: {
+            rotate: 30,
+            margin: 30,
+            textStyle: {
+              align: 'center'
+            }
+          }
+        },
+        yAxis: {
+          name: '报警次数',
+          position: 'left',
+          max: 10
+        },
+        series: {
+          label: { show: true, position: 'top', formatter: '{c}' },
+          barWidth: 20
+        },
+        // tooltip: { trigger: 'item', formatter: '{b}<br/>报警次数：{c}次' }
+      },
       areaId: '',
       areaList: [],
       isShow: true,
@@ -100,43 +102,50 @@
         }
       },
       chartData: {
-        columns: ['wellTypeName', 'alarm'],
+        columns: ['areaName', 'alarm'],
         rows: []
       }
     }
   },
   mounted() {
     this.setDefaultTime('today')
-    this.fetchArea()
+    // this.fetchArea()
   },
   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()
-    },
+    // 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() {
       const params = {
-        areaId: this.areaId,
+        areaId: '110000',
         startTime: this.timeRange[0],
         endTime: this.timeRange[1]
       }
+      this.$emit('change', params)
       alarmBySecondArea(params).then(response => {
         this.isShow = false
         this.chartData.rows = response.data
+        const maxValue = Math.max.apply(Math, response.data.map(item=> {return item.alarm>item.warning?item.alarm: item.warning}))
+        if (maxValue < 10) {
+          this.extend.yAxis.max = 10
+        } else {
+          this.extend.yAxis = maxValue+1
+        }
         // this.chartData.rows = [
         //   { 'areaName': '科技楼及食堂', 'alarm': 53 },
         //   { 'areaName': 'A\\B\\C\\D\\E座', 'alarm': 78 },
@@ -186,10 +195,11 @@
     }
   }
   .statistic-container {
+
     .el-button{
       padding: 5px 10px;
     }
-    /*margin-bottom: 10px;*/
+    margin-bottom: 10px;
     text-align: center;
     .chart-tool-button {
       padding: 5px;
diff --git a/src/views/dashboard/components/waterCompare.vue b/src/views/dashboard/components/waterCompare.vue
new file mode 100644
index 0000000..8e34936
--- /dev/null
+++ b/src/views/dashboard/components/waterCompare.vue
@@ -0,0 +1,117 @@
+<!--分区用水对比图-->
+<template>
+  <div class="container">
+    <function-area ref="func" select="week" @change="fetchData"/>
+    <ve-histogram v-if="isShow" :data="chartData" :grid="grid" :title="title" :extend="extend" :settings="chartSettings"/>
+  </div>
+</template>
+
+<script>
+
+import 'echarts/lib/component/visualMap'
+import { alarmBySecondArea } from '@/api/overview'
+import { getDayTime } from '@/utils/dateutils'
+import { getDoorAreaTree } from '@/api/system/area'
+import FunctionArea from "./FunctionArea";
+export default {
+  name: 'WaterCompare',
+  components: {FunctionArea},
+  data() {
+    return {
+      title:{ text: '分区用水对比图'},
+      chartSettings:{
+        labelMap: {
+          'areaName': '分区',
+          'last': '报警数',
+          'now': '预警数'
+        },
+        dimension: ['areaName'],
+        metrics: ['last', 'now']
+      },
+      grid: {
+        right: 40,
+        top: 80,
+        bottom: 5
+      },
+      extend: {
+        legend: {
+          show: false
+        },
+        xAxis: {
+          axisLabel: {
+            rotate: 30,
+            margin: 30,
+            textStyle: {
+              align: 'center'
+            }
+          }
+        },
+        yAxis: {
+          name: '用水量(吨)',
+          position: 'left',
+          max: 10
+        },
+        series: {
+          label: { show: true, position: 'top', formatter: '{c}' },
+          barWidth: 20
+        },
+        // tooltip: { trigger: 'item', formatter: '{b}<br/>报警次数：{c}次' }
+      },
+      areaId: '',
+      areaList: [],
+      isShow: true,
+      defaultTimeRange: [],
+      chartData: {
+        columns: ['areaName', 'last', 'now'],
+        rows: []
+      },
+      nameDict:{
+        'today':['昨日用水','今日用水'],
+        'week':['近7日用水','对照时间用水',],
+        'month':['近30日用水','对照时间用水',],
+        'season':['上季度用水','本季度用水',],
+        'year':['上年度用水','本年度用水',],
+        'other':['对照时间用水','自选时间用水']
+      }
+    }
+  },
+  mounted(){
+    this.$refs.func.init()
+  },
+  methods: {
+    fetchData(timeRange) {
+      const params = {
+        areaId: '110000',
+        startTime: timeRange[0],
+        endTime: timeRange[1]
+      }
+      alarmBySecondArea(params).then(response => {
+        this.isShow = false
+        this.chartData.rows = response.data
+        const maxValue = Math.max.apply(Math, response.data.map(item=> {return item.last>item.now?item.last: item.now}))
+        if (maxValue < 10) {
+          this.extend.yAxis.max = 10
+        } else {
+          this.extend.yAxis = maxValue+1
+        }
+        // this.chartData.rows = [
+        //   { 'areaName': '科技楼及食堂', 'alarm': 53 },
+        //   { 'areaName': 'A\\B\\C\\D\\E座', 'alarm': 78 },
+        //   { 'areaName': '厂区', 'alarm': 78 }]
+        this.isShow = true
+      })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+  .container{
+    position:relative;
+    .function{
+      width:calc(100% - 120px);
+      height: 28px;
+      display: flex;
+      justify-content: center;
+    }
+  }
+</style>
diff --git a/src/views/dashboard/components/waterCountByAreaBar.vue b/src/views/dashboard/components/waterCountByAreaBar.vue
index 1bdac48..f4196f1 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"
@@ -18,14 +19,14 @@
         @change="fetchData"/>
     </div>
     <ve-histogram v-if="isShow" :data="chartData" :grid="grid" :title="title" :extend="extend" :settings="chartSettings"/>
-    <div class="function">
-      <el-button
-        v-for="item in areaList"
-        :key="item.id"
-        round
-        size="mini"
-        @click="areaChange(item.id)">{{ item.name }}</el-button>
-    </div>
+    <!--<div class="function">-->
+      <!--<el-button-->
+        <!--v-for="item in areaList"-->
+        <!--:key="item.id"-->
+        <!--round-->
+        <!--size="mini"-->
+        <!--@click="areaChange(item.id)">{{ item.name }}</el-button>-->
+    <!--</div>-->
   </div>
 </template>
 
@@ -106,8 +107,8 @@
     }
   },
   mounted() {
-    this.setDefaultTime('today')
-    this.fetchArea()
+    this.setDefaultTime('week')
+    // 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,9 @@
         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
+        const nowDayOfWeek =  6
+        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..07524f9 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: {
@@ -27,8 +39,7 @@
         text: '用水走势图'
       },
       chartSettings: {
-        labelMap: {
-        },
+        labelMap: {date:'日期'},
         metrics: [],
         dimension: ['date']
       },
@@ -52,13 +63,19 @@
     }
   },
   mounted() {
-    this.changeTime('month')
-    this.fetchArea()
+    // this.changeTime('month')
+    // this.fetchArea()
+  },
+  watch:{
+    query(val){
+      this.fetchData()
+    }
   },
   methods: {
     fetchArea() {
       getDoorAreaTree().then(response => {
         if (response.code === 200) {
+          debugger
           const area = response.data.filter(item => {
             return item.pid === '1'
           }).map(item => item.name)
@@ -73,15 +90,21 @@
       })
     },
     fetchData() {
-      countByDayFirst(this.listQuery).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
-          }
-          delete item.data
-          return item
-        })
-        this.chartData.rows = arr
+      countByDayFirst(this.query).then(response => {
+        if(response.data.length>0){
+          const arr = response.data.map((item)=> {
+            const result = {date: item.date}
+            for (let i = 0; i < item.data.length; i++) {
+              result[item.data[i].areaName] = item.data[i].count
+            }
+            return result
+          })
+          const area = response.data[0].data.map(item=>item.areaName)
+          this.chartData.columns = ['date', ...area]
+          this.chartSettings.metrics = area
+          this.chartSettings.labelMap = {'date':'日期'}
+          this.chartData.rows = arr
+        }
       })
       // 模拟数据
       // this.chartData.rows = [
@@ -126,17 +149,7 @@
 </script>
 <style lang="scss" scoped>
   .container{
-    position:relative;
-    .function{
-      /*position:absolute;*/
-      /*z-index:200;*/
-      /*bottom: 10px;*/
-      /*left: 0;*/
-      width:100%;
-      height: 28px;
-      display: flex;
-      justify-content: center;
-    }
+
   }
 </style>
 
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..a4ff85d
--- /dev/null
+++ b/src/views/dashboard/components/waterNote.vue
@@ -0,0 +1,142 @@
+<!--用水事记L -->
+<template>
+  <div class="container">
+    <div class="title">
+      青岛公司用水事记
+      <i v-if="!editMode" class="el-icon-edit edit-btn" style="float:right" @click="editNote"></i>
+      <i v-else class="el-icon-check edit-btn" style="float:right" @click="saveNote"></i>
+    </div>
+    <div class="content-div">
+      <el-scrollbar class="white-scrollbar">
+        <div v-for="(item,index) of currentList" :key="'note_'+index" class="content-line">
+          <div v-if="!editMode">{{index+1}}. {{item.content}}</div>
+          <div v-else class="edit-line">
+            <div style="margin-right: 5px">{{index+1}}. </div>
+            <el-input v-model="item.content" size="mini" maxlength="30"></el-input>
+            <div style="width: 85px;display: flex;justify-content: flex-end">
+              <i v-show="index!==0" class="el-icon-top" @click="toTop(index)"></i>
+              <i v-show="index!==currentList.length-1" class="el-icon-bottom" @click="toBottom(index)"></i>
+              <i class="el-icon-delete" @click="deleteItem(index)"></i>
+            </div>
+          </div>
+        </div>
+        <div v-if="editMode&&currentList.length<10" class="content-line">
+          <i class="el-icon-circle-plus-outline icon-btn" @click="addItem()"></i>
+        </div>
+      </el-scrollbar>
+    </div>
+  </div>
+</template>
+
+<script>
+import { getNoteList, updateNoteList } from '@/api/dashboard'
+import { getDoorAreaTree } from '@/api/system/area'
+export default {
+  name: 'WaterNote',
+  props:{
+    query: {
+      type: Object,
+      default:()=>{
+        return {
+          areaId: '',
+          startTime: '',
+          endTime: ''
+        }
+      }
+    }
+  },
+  data() {
+    return {
+      editMode: false, // 编辑模式
+      originList:[], // 原始列表
+      currentList:[] // 当前列表
+    }
+  },
+  mounted() {
+    this.fetchData()
+  },
+  methods: {
+    // 获取统计数据
+    fetchData() {
+      this.currentList = [
+        { 'content': '测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试', 'num': 1 },
+        { 'content': '测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试', 'num': 1 },
+        { 'content': '测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试', 'num': 1 },
+        { 'content': '测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试', 'num': 1 },
+        { 'content': '测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试', 'num': 1 }
+      ]
+      this.originList = JSON.parse(JSON.stringify(this.currentList))
+      // getNoteList().then(response => {
+      //   this.currentList = response.data
+      // })
+    },
+    toTop(index){
+      this.currentList[index-1] = this.currentList.splice(index,1,this.currentList[index-1])[0]
+    },
+    toBottom(index){
+      this.currentList[index] = this.currentList.splice(index+1,1,this.currentList[index])[0]
+    },
+    deleteItem(index){
+      this.currentList.splice(index,1)
+    },
+    addItem(){
+      this.currentList.push({content:'',num:99})
+    },
+    // 开启编辑
+    editNote(){
+      this.editMode = true
+    },
+    // 保存用水事记
+    saveNote(){
+      const currentList = this.currentList.map((item, index)=>{
+        return {content: item.content, num: index}
+      })
+      console.log(currentList)
+      updateNoteList(currentList).then(res=>{
+        this.editMode = false
+        this.$message.success('保存成功')
+      }).catch(e=>{
+        // this.currentList = JSON.parse(JSON.stringify(this.originList))
+      })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+  @import "@/styles/variables.scss";
+  .container{
+    position:relative;
+    height: 428px;
+    display: flex;
+    flex-direction: column;
+    .content-div{
+      height: 410px;
+      .content-line{
+        line-height: 30px;
+        font-size: 16px;
+      }
+      .edit-line{
+        width: 100%;
+        display: flex;
+        align-items: center;
+      }
+    }
+  }
+  .edit-btn, .icon-btn{
+    &:hover{
+      cursor: pointer;
+      color: $themeColor;
+    }
+  }
+</style>
+<style lang="scss">
+  .white-scrollbar{
+    height: 100%;
+    .el-scrollbar__wrap{
+      overflow-x: hidden;
+      padding: 10px 0px;
+      background-color: #FFFFFF;
+    }
+  }
+
+</style>

diff --git a/src/api/dashboard.js b/src/api/dashboard.js
index e69de29..6ad37f1 100644
--- a/src/api/dashboard.js
+++ b/src/api/dashboard.js
@@ -0,0 +1,92 @@
+/**
+ * 井总览模块接口
+ */
+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: '/device/valve/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
+  })
+}
+
+
+// 用水事记查询
+export function getNoteList() {
+  return request({
+    // url: '/note/list',
+    url: 'waterMeterData/count',
+    method: 'get',
+    params
+  })
+}
+
+// 用水事记更新
+export function updateNoteList(params) {
+  return request({
+    // url: '/note/update',
+    url: 'waterMeterData/count',
+    method: 'post',
+    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/AlarmCountByDept.vue b/src/views/dashboard/components/AlarmCountByDept.vue
new file mode 100644
index 0000000..91df51d
--- /dev/null
+++ b/src/views/dashboard/components/AlarmCountByDept.vue
@@ -0,0 +1,80 @@
+<!--suppress ALL -->
+<template>
+  <div class="container">
+    <div style="height: 28px;margin-bottom: 10px;"/>
+    <ve-pie :data="chartData" :extend="extend" :title="title"/>
+
+  </div>
+</template>
+
+<script>
+import { alarmBySecondArea } from '@/api/overview'
+import { getDoorAreaTree } from '@/api/system/area'
+export default {
+  name: 'AlarmCountByDept',
+  props:{
+    query: {
+      type: Object,
+      default:()=>{
+        return {
+          areaId: '',
+          startTime: '',
+          endTime: ''
+        }
+      }
+    }
+  },
+  data() {
+    return {
+      chartData: {
+        columns: ['areaName', 'alarm'],
+        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': '分区',
+          'alarm': '报警数'
+        }
+      }
+    }
+  },
+  watch:{
+    query(val){
+      this.fetchData()
+    }
+  },
+  methods: {
+    // 获取统计数据
+    fetchData() {
+      alarmBySecondArea(this.query).then(response => {
+        debugger
+        this.chartData.rows = response.data
+      })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+  .container{
+
+  }
+</style>
diff --git a/src/views/dashboard/components/DeviceCount.vue b/src/views/dashboard/components/DeviceCount.vue
index 6c36bcb..453fa09 100644
--- a/src/views/dashboard/components/DeviceCount.vue
+++ b/src/views/dashboard/components/DeviceCount.vue
@@ -1,5 +1,9 @@
 <template>
-  <ve-bar :data="chartData" :grid="grid" :title="title" :extend="extend" :settings="chartSettings"/>
+  <div>
+    <div style="height: 28px;margin-bottom: 10px;"/>
+    <ve-bar :data="chartData" :grid="grid" :title="title" :extend="extend" :settings="chartSettings"/>
+  </div>
+
 </template>
 
 <script>
diff --git a/src/views/dashboard/components/FunctionArea.vue b/src/views/dashboard/components/FunctionArea.vue
new file mode 100644
index 0000000..e628c12
--- /dev/null
+++ b/src/views/dashboard/components/FunctionArea.vue
@@ -0,0 +1,128 @@
+<!--
+ * @Description:
+ * @Author: 王晓颖
+ * @Date:
+ -->
+<template>
+  <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')">本周</el-button>
+    <el-button round size="mini" @click="setDefaultTime('today')">今日</el-button>
+    <el-date-picker
+      v-model="timeRange"
+      :picker-options="pickerOptions"
+      type="daterange"
+      range-separator="至"
+      start-placeholder="开始日期"
+      end-placeholder="结束日期"
+      value-format="yyyy-MM-dd"
+      size="mini"
+      style="width:250px;margin-right: 20px"
+      @change="fetchData"/>
+  </div>
+</template>
+
+<script>
+  import { getDayTime } from '@/utils/dateutils'
+  export default {
+    name: "FunctionArea",
+    props:{
+      select:{
+        type: String,
+        default: 'today'
+      }
+    },
+    data() {
+      return {
+        timeRange: [],
+        pickerOptions: {
+          disabledDate: function(date) {
+            var oDate1 = new Date(date)
+            var oDate2 = new Date()
+            if (oDate1.getTime() > oDate2.getTime()) {
+              return true
+            } else {
+              return false
+            }
+          }
+        }
+      }
+    },
+    methods: {
+      init(){
+        this.setDefaultTime(this.select)
+      },
+      change(){
+        this.$emit('change', this.timeRange)
+      },
+      setDefaultTime(val) {
+        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
+          if (tMonth.toString().length === 1) {
+            tMonth = '0' + tMonth
+          }
+          const beginTime = tYear + '-' + tMonth + '-01'
+          const endTime = getDayTime(new Date().getTime())
+          this.timeRange = [beginTime, endTime.Format('yyyy-MM-dd')]
+        } else if (val === 'week') {
+          // const nowDayOfWeek =  new Date().getDay()-1
+          const nowDayOfWeek =  6
+          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') {
+          this.timeRange = [getDayTime(new Date().getTime()).Format('yyyy-MM-dd'), getDayTime(new Date().getTime()).Format('yyyy-MM-dd')]
+        }
+        this.change()
+      }
+    }
+  }
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  .statistic-container {
+
+    .el-button{
+      padding: 5px 10px;
+    }
+    margin-bottom: 10px;
+    text-align: center;
+    .chart-tool-button {
+      padding: 5px;
+      line-height: 16px;
+      margin-top: 5px;
+      font-size: 14px;
+    }
+    .chart-tool-button:hover {
+      background-color: #8cc5ff;
+      cursor: pointer;
+      color: white;
+    }
+    .chart-tool-button:active {
+      background-color: #8cc5ff;
+      color: white;
+    }
+  }
+  .selected {
+    background-color: #8cc5ff;
+    color: white;
+  }
+</style>
diff --git a/src/views/dashboard/components/PanelGroup.vue b/src/views/dashboard/components/PanelGroup.vue
index b72d289..7be90a7 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,32 @@
           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',
           permission: '/device/list'
         },
         {
@@ -67,11 +69,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 +85,10 @@
   },
   mounted() {
     this.getWater()
-    this.getWellCount()
+    // this.getWellCount()
     this.getDeviceCount()
     this.getAlarmCount()
-    this.getJobCount()
+    // this.getJobCount()
   },
   methods: {
     refresh() {
@@ -97,24 +99,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.production?parseFloat(response.data.production).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 +168,7 @@
   //   &:hover {
   //     .card-panel-icon-wrapper {
   //       color: #fff;
-        
+
   //     }
 
   //     .icon-people {
diff --git a/src/views/dashboard/components/watchAlarmBar.vue b/src/views/dashboard/components/watchAlarmBar.vue
index 13824f3..6a18ef6 100644
--- a/src/views/dashboard/components/watchAlarmBar.vue
+++ b/src/views/dashboard/components/watchAlarmBar.vue
@@ -1,9 +1,11 @@
+<!--水表告警统计-->
 <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"
@@ -18,14 +20,14 @@
         @change="fetchData"/>
     </div>
     <ve-histogram v-if="isShow" :data="chartData" :grid="grid" :title="title" :extend="extend" :settings="chartSettings"/>
-    <div class="function">
-      <el-button
-        v-for="item in areaList"
-        :key="item.id"
-        round
-        size="mini"
-        @click="areaChange(item.id)">{{ item.name }}</el-button>
-    </div>
+    <!--<div class="function">-->
+      <!--<el-button-->
+        <!--v-for="item in areaList"-->
+        <!--:key="item.id"-->
+        <!--round-->
+        <!--size="mini"-->
+        <!--@click="areaChange(item.id)">{{ item.name }}</el-button>-->
+    <!--</div>-->
   </div>
 </template>
 
@@ -38,51 +40,51 @@
 export default {
   name: 'WatchAlarmBar',
   data() {
-    this.extend = {
-      legend: {
-        show: false
-      },
-      xAxis: {
-        axisLabel: {
-          rotate: 30,
-          margin: 30,
-          textStyle: {
-            align: 'center'
-          }
-        }
-      },
-      yAxis: {
-        name: '报警次数',
-        position: 'left'
-      },
-      series: {
-        label: { show: true, position: 'top', formatter: '{c}' },
-        barWidth: 25
-      },
-      tooltip: { trigger: 'item', formatter: '{b}<br/>报警次数：{c}次' }
-    }
-    this.grid = {
-      right: 40,
-      top: 100,
-      bottom: 5
-    }
-    this.title = {
-      text: '水表告警统计'
-    }
-    this.chartSettings = {
-      itemStyle: {
-        barCategoryGap: 10
-      },
-
-      labelMap: {
-        'areaName': '分区',
-        'alarm': '报警数',
-        'warning': '预警数'
-      },
-      dimension: ['areaName'],
-      metrics: ['alarm', 'warning']
-    }
     return {
+      title:{
+        text: '水表告警统计'
+      },
+      chartSettings:{
+        itemStyle: {
+          barCategoryGap: 0
+        },
+        labelMap: {
+          'areaName': '分区',
+          'alarm': '报警数',
+          'warning': '预警数'
+        },
+        dimension: ['areaName'],
+        metrics: ['alarm', 'warning']
+      },
+      grid: {
+        right: 40,
+        top: 80,
+        bottom: 5
+      },
+      extend: {
+        legend: {
+          show: false
+        },
+        xAxis: {
+          axisLabel: {
+            rotate: 30,
+            margin: 30,
+            textStyle: {
+              align: 'center'
+            }
+          }
+        },
+        yAxis: {
+          name: '报警次数',
+          position: 'left',
+          max: 10
+        },
+        series: {
+          label: { show: true, position: 'top', formatter: '{c}' },
+          barWidth: 20
+        },
+        // tooltip: { trigger: 'item', formatter: '{b}<br/>报警次数：{c}次' }
+      },
       areaId: '',
       areaList: [],
       isShow: true,
@@ -100,43 +102,50 @@
         }
       },
       chartData: {
-        columns: ['wellTypeName', 'alarm'],
+        columns: ['areaName', 'alarm'],
         rows: []
       }
     }
   },
   mounted() {
     this.setDefaultTime('today')
-    this.fetchArea()
+    // this.fetchArea()
   },
   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()
-    },
+    // 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() {
       const params = {
-        areaId: this.areaId,
+        areaId: '110000',
         startTime: this.timeRange[0],
         endTime: this.timeRange[1]
       }
+      this.$emit('change', params)
       alarmBySecondArea(params).then(response => {
         this.isShow = false
         this.chartData.rows = response.data
+        const maxValue = Math.max.apply(Math, response.data.map(item=> {return item.alarm>item.warning?item.alarm: item.warning}))
+        if (maxValue < 10) {
+          this.extend.yAxis.max = 10
+        } else {
+          this.extend.yAxis = maxValue+1
+        }
         // this.chartData.rows = [
         //   { 'areaName': '科技楼及食堂', 'alarm': 53 },
         //   { 'areaName': 'A\\B\\C\\D\\E座', 'alarm': 78 },
@@ -186,10 +195,11 @@
     }
   }
   .statistic-container {
+
     .el-button{
       padding: 5px 10px;
     }
-    /*margin-bottom: 10px;*/
+    margin-bottom: 10px;
     text-align: center;
     .chart-tool-button {
       padding: 5px;
diff --git a/src/views/dashboard/components/waterCompare.vue b/src/views/dashboard/components/waterCompare.vue
new file mode 100644
index 0000000..8e34936
--- /dev/null
+++ b/src/views/dashboard/components/waterCompare.vue
@@ -0,0 +1,117 @@
+<!--分区用水对比图-->
+<template>
+  <div class="container">
+    <function-area ref="func" select="week" @change="fetchData"/>
+    <ve-histogram v-if="isShow" :data="chartData" :grid="grid" :title="title" :extend="extend" :settings="chartSettings"/>
+  </div>
+</template>
+
+<script>
+
+import 'echarts/lib/component/visualMap'
+import { alarmBySecondArea } from '@/api/overview'
+import { getDayTime } from '@/utils/dateutils'
+import { getDoorAreaTree } from '@/api/system/area'
+import FunctionArea from "./FunctionArea";
+export default {
+  name: 'WaterCompare',
+  components: {FunctionArea},
+  data() {
+    return {
+      title:{ text: '分区用水对比图'},
+      chartSettings:{
+        labelMap: {
+          'areaName': '分区',
+          'last': '报警数',
+          'now': '预警数'
+        },
+        dimension: ['areaName'],
+        metrics: ['last', 'now']
+      },
+      grid: {
+        right: 40,
+        top: 80,
+        bottom: 5
+      },
+      extend: {
+        legend: {
+          show: false
+        },
+        xAxis: {
+          axisLabel: {
+            rotate: 30,
+            margin: 30,
+            textStyle: {
+              align: 'center'
+            }
+          }
+        },
+        yAxis: {
+          name: '用水量(吨)',
+          position: 'left',
+          max: 10
+        },
+        series: {
+          label: { show: true, position: 'top', formatter: '{c}' },
+          barWidth: 20
+        },
+        // tooltip: { trigger: 'item', formatter: '{b}<br/>报警次数：{c}次' }
+      },
+      areaId: '',
+      areaList: [],
+      isShow: true,
+      defaultTimeRange: [],
+      chartData: {
+        columns: ['areaName', 'last', 'now'],
+        rows: []
+      },
+      nameDict:{
+        'today':['昨日用水','今日用水'],
+        'week':['近7日用水','对照时间用水',],
+        'month':['近30日用水','对照时间用水',],
+        'season':['上季度用水','本季度用水',],
+        'year':['上年度用水','本年度用水',],
+        'other':['对照时间用水','自选时间用水']
+      }
+    }
+  },
+  mounted(){
+    this.$refs.func.init()
+  },
+  methods: {
+    fetchData(timeRange) {
+      const params = {
+        areaId: '110000',
+        startTime: timeRange[0],
+        endTime: timeRange[1]
+      }
+      alarmBySecondArea(params).then(response => {
+        this.isShow = false
+        this.chartData.rows = response.data
+        const maxValue = Math.max.apply(Math, response.data.map(item=> {return item.last>item.now?item.last: item.now}))
+        if (maxValue < 10) {
+          this.extend.yAxis.max = 10
+        } else {
+          this.extend.yAxis = maxValue+1
+        }
+        // this.chartData.rows = [
+        //   { 'areaName': '科技楼及食堂', 'alarm': 53 },
+        //   { 'areaName': 'A\\B\\C\\D\\E座', 'alarm': 78 },
+        //   { 'areaName': '厂区', 'alarm': 78 }]
+        this.isShow = true
+      })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+  .container{
+    position:relative;
+    .function{
+      width:calc(100% - 120px);
+      height: 28px;
+      display: flex;
+      justify-content: center;
+    }
+  }
+</style>
diff --git a/src/views/dashboard/components/waterCountByAreaBar.vue b/src/views/dashboard/components/waterCountByAreaBar.vue
index 1bdac48..f4196f1 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"
@@ -18,14 +19,14 @@
         @change="fetchData"/>
     </div>
     <ve-histogram v-if="isShow" :data="chartData" :grid="grid" :title="title" :extend="extend" :settings="chartSettings"/>
-    <div class="function">
-      <el-button
-        v-for="item in areaList"
-        :key="item.id"
-        round
-        size="mini"
-        @click="areaChange(item.id)">{{ item.name }}</el-button>
-    </div>
+    <!--<div class="function">-->
+      <!--<el-button-->
+        <!--v-for="item in areaList"-->
+        <!--:key="item.id"-->
+        <!--round-->
+        <!--size="mini"-->
+        <!--@click="areaChange(item.id)">{{ item.name }}</el-button>-->
+    <!--</div>-->
   </div>
 </template>
 
@@ -106,8 +107,8 @@
     }
   },
   mounted() {
-    this.setDefaultTime('today')
-    this.fetchArea()
+    this.setDefaultTime('week')
+    // 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,9 @@
         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
+        const nowDayOfWeek =  6
+        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..07524f9 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: {
@@ -27,8 +39,7 @@
         text: '用水走势图'
       },
       chartSettings: {
-        labelMap: {
-        },
+        labelMap: {date:'日期'},
         metrics: [],
         dimension: ['date']
       },
@@ -52,13 +63,19 @@
     }
   },
   mounted() {
-    this.changeTime('month')
-    this.fetchArea()
+    // this.changeTime('month')
+    // this.fetchArea()
+  },
+  watch:{
+    query(val){
+      this.fetchData()
+    }
   },
   methods: {
     fetchArea() {
       getDoorAreaTree().then(response => {
         if (response.code === 200) {
+          debugger
           const area = response.data.filter(item => {
             return item.pid === '1'
           }).map(item => item.name)
@@ -73,15 +90,21 @@
       })
     },
     fetchData() {
-      countByDayFirst(this.listQuery).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
-          }
-          delete item.data
-          return item
-        })
-        this.chartData.rows = arr
+      countByDayFirst(this.query).then(response => {
+        if(response.data.length>0){
+          const arr = response.data.map((item)=> {
+            const result = {date: item.date}
+            for (let i = 0; i < item.data.length; i++) {
+              result[item.data[i].areaName] = item.data[i].count
+            }
+            return result
+          })
+          const area = response.data[0].data.map(item=>item.areaName)
+          this.chartData.columns = ['date', ...area]
+          this.chartSettings.metrics = area
+          this.chartSettings.labelMap = {'date':'日期'}
+          this.chartData.rows = arr
+        }
       })
       // 模拟数据
       // this.chartData.rows = [
@@ -126,17 +149,7 @@
 </script>
 <style lang="scss" scoped>
   .container{
-    position:relative;
-    .function{
-      /*position:absolute;*/
-      /*z-index:200;*/
-      /*bottom: 10px;*/
-      /*left: 0;*/
-      width:100%;
-      height: 28px;
-      display: flex;
-      justify-content: center;
-    }
+
   }
 </style>
 
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..a4ff85d
--- /dev/null
+++ b/src/views/dashboard/components/waterNote.vue
@@ -0,0 +1,142 @@
+<!--用水事记L -->
+<template>
+  <div class="container">
+    <div class="title">
+      青岛公司用水事记
+      <i v-if="!editMode" class="el-icon-edit edit-btn" style="float:right" @click="editNote"></i>
+      <i v-else class="el-icon-check edit-btn" style="float:right" @click="saveNote"></i>
+    </div>
+    <div class="content-div">
+      <el-scrollbar class="white-scrollbar">
+        <div v-for="(item,index) of currentList" :key="'note_'+index" class="content-line">
+          <div v-if="!editMode">{{index+1}}. {{item.content}}</div>
+          <div v-else class="edit-line">
+            <div style="margin-right: 5px">{{index+1}}. </div>
+            <el-input v-model="item.content" size="mini" maxlength="30"></el-input>
+            <div style="width: 85px;display: flex;justify-content: flex-end">
+              <i v-show="index!==0" class="el-icon-top" @click="toTop(index)"></i>
+              <i v-show="index!==currentList.length-1" class="el-icon-bottom" @click="toBottom(index)"></i>
+              <i class="el-icon-delete" @click="deleteItem(index)"></i>
+            </div>
+          </div>
+        </div>
+        <div v-if="editMode&&currentList.length<10" class="content-line">
+          <i class="el-icon-circle-plus-outline icon-btn" @click="addItem()"></i>
+        </div>
+      </el-scrollbar>
+    </div>
+  </div>
+</template>
+
+<script>
+import { getNoteList, updateNoteList } from '@/api/dashboard'
+import { getDoorAreaTree } from '@/api/system/area'
+export default {
+  name: 'WaterNote',
+  props:{
+    query: {
+      type: Object,
+      default:()=>{
+        return {
+          areaId: '',
+          startTime: '',
+          endTime: ''
+        }
+      }
+    }
+  },
+  data() {
+    return {
+      editMode: false, // 编辑模式
+      originList:[], // 原始列表
+      currentList:[] // 当前列表
+    }
+  },
+  mounted() {
+    this.fetchData()
+  },
+  methods: {
+    // 获取统计数据
+    fetchData() {
+      this.currentList = [
+        { 'content': '测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试', 'num': 1 },
+        { 'content': '测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试', 'num': 1 },
+        { 'content': '测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试', 'num': 1 },
+        { 'content': '测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试', 'num': 1 },
+        { 'content': '测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试', 'num': 1 }
+      ]
+      this.originList = JSON.parse(JSON.stringify(this.currentList))
+      // getNoteList().then(response => {
+      //   this.currentList = response.data
+      // })
+    },
+    toTop(index){
+      this.currentList[index-1] = this.currentList.splice(index,1,this.currentList[index-1])[0]
+    },
+    toBottom(index){
+      this.currentList[index] = this.currentList.splice(index+1,1,this.currentList[index])[0]
+    },
+    deleteItem(index){
+      this.currentList.splice(index,1)
+    },
+    addItem(){
+      this.currentList.push({content:'',num:99})
+    },
+    // 开启编辑
+    editNote(){
+      this.editMode = true
+    },
+    // 保存用水事记
+    saveNote(){
+      const currentList = this.currentList.map((item, index)=>{
+        return {content: item.content, num: index}
+      })
+      console.log(currentList)
+      updateNoteList(currentList).then(res=>{
+        this.editMode = false
+        this.$message.success('保存成功')
+      }).catch(e=>{
+        // this.currentList = JSON.parse(JSON.stringify(this.originList))
+      })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+  @import "@/styles/variables.scss";
+  .container{
+    position:relative;
+    height: 428px;
+    display: flex;
+    flex-direction: column;
+    .content-div{
+      height: 410px;
+      .content-line{
+        line-height: 30px;
+        font-size: 16px;
+      }
+      .edit-line{
+        width: 100%;
+        display: flex;
+        align-items: center;
+      }
+    }
+  }
+  .edit-btn, .icon-btn{
+    &:hover{
+      cursor: pointer;
+      color: $themeColor;
+    }
+  }
+</style>
+<style lang="scss">
+  .white-scrollbar{
+    height: 100%;
+    .el-scrollbar__wrap{
+      overflow-x: hidden;
+      padding: 10px 0px;
+      background-color: #FFFFFF;
+    }
+  }
+
+</style>
diff --git a/src/views/dashboard/index.vue b/src/views/dashboard/index.vue
index fdbc38a..69d09ea 100644
--- a/src/views/dashboard/index.vue
+++ b/src/views/dashboard/index.vue
@@ -1,54 +1,55 @@
 <template>
   <div class="dashboard-container" style="background-color: white">
     <panel-group ref="panelgroup"/>
-    <el-row :gutter="10">
-      <!-- 用水统计图 -->
+    <el-row>
+      <!--设备在线数量统计-->
       <el-col :span="12">
         <el-card shadow="never">
-          <water-count-by-dept-bar/>
+          <water-compare/>
+        </el-card>
+      </el-col>
+      <!--设备数量统计-->
+      <el-col v-if="hasPerm('/statics/deviceStaticsByType')" :span="12">
+        <el-card shadow="never">
+          <device-count/>
+        </el-card>
+      </el-col>
+      <!-- 用水统计图 -->
+      <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 :query="listQuery1" ref="waterCountPie"/>
         </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/>
+          <water-count-by-day :query="listQuery1" ref="waterCountDay"/>
         </el-card>
       </el-col>
 
-      <!--设备数量统计-->
-      <el-col v-if="hasPerm('/statics/deviceStaticsByType')" :span="12">
+      <!--水表报警次数统计，柱状图-->
+      <el-col v-if="hasPerm('/statics/alarmsByDay')" :span="12">
         <el-card shadow="never">
-          <device-count/>
+          <watch-alarm-bar @change="changeAlarmQuery"/>
+        </el-card>
+      </el-col>
+      <!--报警饼图统计-->
+      <el-col v-if="hasPerm('/statics/alarmsByDay')" :span="12">
+        <el-card shadow="never">
+          <alarm-count-by-dept :query="listQuery2"/>
         </el-card>
       </el-col>
     </el-row>
@@ -64,20 +65,26 @@
 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";
+import AlarmCountByDept from "./components/AlarmCountByDept";
+import WaterCompare from "./components/waterCompare";
 
 export default {
   name: 'Dashboard',
   components: {
+    WaterCompare,
+    AlarmCountByDept,
+    WaterNote,
     WatchAlarmBar,
     WaterCountByAreaBar,
     WaterCountByDay,
     WaterCountByDeptBar,
-    WaterCountByDepy,
+    WaterCountByDept,
     JobByStatus,
     AlarmByDays,
     PanelGroup,
@@ -108,12 +115,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:'110000',
+        startTime:new Date().Format('yyyy-MM-dd'),
+        endTime:new Date().Format('yyyy-MM-dd')
+      } // 分区报警查询条件
+    }
+  },
   watch: {
     needRefresh(val) {
       // 需要刷新
       if (val) {
         console.log('refresh dashboard')
-        debugger
         this.$refs.panelgroup.refresh()
       }
     }
@@ -124,6 +144,14 @@
   methods: {
     webSocket() {
       this.$store.dispatch('initWebSocket')
+    },
+    // 切换分区查询条件
+    changeWaterQuery(listQuery1){
+      this.listQuery1 = listQuery1
+    },
+    // 切换报警查询条件
+    changeAlarmQuery(listQuery2){
+      this.listQuery2 = listQuery2
     }
   }
 }

diff --git a/src/api/dashboard.js b/src/api/dashboard.js
index e69de29..6ad37f1 100644
--- a/src/api/dashboard.js
+++ b/src/api/dashboard.js
@@ -0,0 +1,92 @@
+/**
+ * 井总览模块接口
+ */
+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: '/device/valve/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
+  })
+}
+
+
+// 用水事记查询
+export function getNoteList() {
+  return request({
+    // url: '/note/list',
+    url: 'waterMeterData/count',
+    method: 'get',
+    params
+  })
+}
+
+// 用水事记更新
+export function updateNoteList(params) {
+  return request({
+    // url: '/note/update',
+    url: 'waterMeterData/count',
+    method: 'post',
+    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/AlarmCountByDept.vue b/src/views/dashboard/components/AlarmCountByDept.vue
new file mode 100644
index 0000000..91df51d
--- /dev/null
+++ b/src/views/dashboard/components/AlarmCountByDept.vue
@@ -0,0 +1,80 @@
+<!--suppress ALL -->
+<template>
+  <div class="container">
+    <div style="height: 28px;margin-bottom: 10px;"/>
+    <ve-pie :data="chartData" :extend="extend" :title="title"/>
+
+  </div>
+</template>
+
+<script>
+import { alarmBySecondArea } from '@/api/overview'
+import { getDoorAreaTree } from '@/api/system/area'
+export default {
+  name: 'AlarmCountByDept',
+  props:{
+    query: {
+      type: Object,
+      default:()=>{
+        return {
+          areaId: '',
+          startTime: '',
+          endTime: ''
+        }
+      }
+    }
+  },
+  data() {
+    return {
+      chartData: {
+        columns: ['areaName', 'alarm'],
+        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': '分区',
+          'alarm': '报警数'
+        }
+      }
+    }
+  },
+  watch:{
+    query(val){
+      this.fetchData()
+    }
+  },
+  methods: {
+    // 获取统计数据
+    fetchData() {
+      alarmBySecondArea(this.query).then(response => {
+        debugger
+        this.chartData.rows = response.data
+      })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+  .container{
+
+  }
+</style>
diff --git a/src/views/dashboard/components/DeviceCount.vue b/src/views/dashboard/components/DeviceCount.vue
index 6c36bcb..453fa09 100644
--- a/src/views/dashboard/components/DeviceCount.vue
+++ b/src/views/dashboard/components/DeviceCount.vue
@@ -1,5 +1,9 @@
 <template>
-  <ve-bar :data="chartData" :grid="grid" :title="title" :extend="extend" :settings="chartSettings"/>
+  <div>
+    <div style="height: 28px;margin-bottom: 10px;"/>
+    <ve-bar :data="chartData" :grid="grid" :title="title" :extend="extend" :settings="chartSettings"/>
+  </div>
+
 </template>
 
 <script>
diff --git a/src/views/dashboard/components/FunctionArea.vue b/src/views/dashboard/components/FunctionArea.vue
new file mode 100644
index 0000000..e628c12
--- /dev/null
+++ b/src/views/dashboard/components/FunctionArea.vue
@@ -0,0 +1,128 @@
+<!--
+ * @Description:
+ * @Author: 王晓颖
+ * @Date:
+ -->
+<template>
+  <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')">本周</el-button>
+    <el-button round size="mini" @click="setDefaultTime('today')">今日</el-button>
+    <el-date-picker
+      v-model="timeRange"
+      :picker-options="pickerOptions"
+      type="daterange"
+      range-separator="至"
+      start-placeholder="开始日期"
+      end-placeholder="结束日期"
+      value-format="yyyy-MM-dd"
+      size="mini"
+      style="width:250px;margin-right: 20px"
+      @change="fetchData"/>
+  </div>
+</template>
+
+<script>
+  import { getDayTime } from '@/utils/dateutils'
+  export default {
+    name: "FunctionArea",
+    props:{
+      select:{
+        type: String,
+        default: 'today'
+      }
+    },
+    data() {
+      return {
+        timeRange: [],
+        pickerOptions: {
+          disabledDate: function(date) {
+            var oDate1 = new Date(date)
+            var oDate2 = new Date()
+            if (oDate1.getTime() > oDate2.getTime()) {
+              return true
+            } else {
+              return false
+            }
+          }
+        }
+      }
+    },
+    methods: {
+      init(){
+        this.setDefaultTime(this.select)
+      },
+      change(){
+        this.$emit('change', this.timeRange)
+      },
+      setDefaultTime(val) {
+        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
+          if (tMonth.toString().length === 1) {
+            tMonth = '0' + tMonth
+          }
+          const beginTime = tYear + '-' + tMonth + '-01'
+          const endTime = getDayTime(new Date().getTime())
+          this.timeRange = [beginTime, endTime.Format('yyyy-MM-dd')]
+        } else if (val === 'week') {
+          // const nowDayOfWeek =  new Date().getDay()-1
+          const nowDayOfWeek =  6
+          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') {
+          this.timeRange = [getDayTime(new Date().getTime()).Format('yyyy-MM-dd'), getDayTime(new Date().getTime()).Format('yyyy-MM-dd')]
+        }
+        this.change()
+      }
+    }
+  }
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  .statistic-container {
+
+    .el-button{
+      padding: 5px 10px;
+    }
+    margin-bottom: 10px;
+    text-align: center;
+    .chart-tool-button {
+      padding: 5px;
+      line-height: 16px;
+      margin-top: 5px;
+      font-size: 14px;
+    }
+    .chart-tool-button:hover {
+      background-color: #8cc5ff;
+      cursor: pointer;
+      color: white;
+    }
+    .chart-tool-button:active {
+      background-color: #8cc5ff;
+      color: white;
+    }
+  }
+  .selected {
+    background-color: #8cc5ff;
+    color: white;
+  }
+</style>
diff --git a/src/views/dashboard/components/PanelGroup.vue b/src/views/dashboard/components/PanelGroup.vue
index b72d289..7be90a7 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,32 @@
           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',
           permission: '/device/list'
         },
         {
@@ -67,11 +69,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 +85,10 @@
   },
   mounted() {
     this.getWater()
-    this.getWellCount()
+    // this.getWellCount()
     this.getDeviceCount()
     this.getAlarmCount()
-    this.getJobCount()
+    // this.getJobCount()
   },
   methods: {
     refresh() {
@@ -97,24 +99,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.production?parseFloat(response.data.production).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 +168,7 @@
   //   &:hover {
   //     .card-panel-icon-wrapper {
   //       color: #fff;
-        
+
   //     }
 
   //     .icon-people {
diff --git a/src/views/dashboard/components/watchAlarmBar.vue b/src/views/dashboard/components/watchAlarmBar.vue
index 13824f3..6a18ef6 100644
--- a/src/views/dashboard/components/watchAlarmBar.vue
+++ b/src/views/dashboard/components/watchAlarmBar.vue
@@ -1,9 +1,11 @@
+<!--水表告警统计-->
 <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"
@@ -18,14 +20,14 @@
         @change="fetchData"/>
     </div>
     <ve-histogram v-if="isShow" :data="chartData" :grid="grid" :title="title" :extend="extend" :settings="chartSettings"/>
-    <div class="function">
-      <el-button
-        v-for="item in areaList"
-        :key="item.id"
-        round
-        size="mini"
-        @click="areaChange(item.id)">{{ item.name }}</el-button>
-    </div>
+    <!--<div class="function">-->
+      <!--<el-button-->
+        <!--v-for="item in areaList"-->
+        <!--:key="item.id"-->
+        <!--round-->
+        <!--size="mini"-->
+        <!--@click="areaChange(item.id)">{{ item.name }}</el-button>-->
+    <!--</div>-->
   </div>
 </template>
 
@@ -38,51 +40,51 @@
 export default {
   name: 'WatchAlarmBar',
   data() {
-    this.extend = {
-      legend: {
-        show: false
-      },
-      xAxis: {
-        axisLabel: {
-          rotate: 30,
-          margin: 30,
-          textStyle: {
-            align: 'center'
-          }
-        }
-      },
-      yAxis: {
-        name: '报警次数',
-        position: 'left'
-      },
-      series: {
-        label: { show: true, position: 'top', formatter: '{c}' },
-        barWidth: 25
-      },
-      tooltip: { trigger: 'item', formatter: '{b}<br/>报警次数：{c}次' }
-    }
-    this.grid = {
-      right: 40,
-      top: 100,
-      bottom: 5
-    }
-    this.title = {
-      text: '水表告警统计'
-    }
-    this.chartSettings = {
-      itemStyle: {
-        barCategoryGap: 10
-      },
-
-      labelMap: {
-        'areaName': '分区',
-        'alarm': '报警数',
-        'warning': '预警数'
-      },
-      dimension: ['areaName'],
-      metrics: ['alarm', 'warning']
-    }
     return {
+      title:{
+        text: '水表告警统计'
+      },
+      chartSettings:{
+        itemStyle: {
+          barCategoryGap: 0
+        },
+        labelMap: {
+          'areaName': '分区',
+          'alarm': '报警数',
+          'warning': '预警数'
+        },
+        dimension: ['areaName'],
+        metrics: ['alarm', 'warning']
+      },
+      grid: {
+        right: 40,
+        top: 80,
+        bottom: 5
+      },
+      extend: {
+        legend: {
+          show: false
+        },
+        xAxis: {
+          axisLabel: {
+            rotate: 30,
+            margin: 30,
+            textStyle: {
+              align: 'center'
+            }
+          }
+        },
+        yAxis: {
+          name: '报警次数',
+          position: 'left',
+          max: 10
+        },
+        series: {
+          label: { show: true, position: 'top', formatter: '{c}' },
+          barWidth: 20
+        },
+        // tooltip: { trigger: 'item', formatter: '{b}<br/>报警次数：{c}次' }
+      },
       areaId: '',
       areaList: [],
       isShow: true,
@@ -100,43 +102,50 @@
         }
       },
       chartData: {
-        columns: ['wellTypeName', 'alarm'],
+        columns: ['areaName', 'alarm'],
         rows: []
       }
     }
   },
   mounted() {
     this.setDefaultTime('today')
-    this.fetchArea()
+    // this.fetchArea()
   },
   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()
-    },
+    // 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() {
       const params = {
-        areaId: this.areaId,
+        areaId: '110000',
         startTime: this.timeRange[0],
         endTime: this.timeRange[1]
       }
+      this.$emit('change', params)
       alarmBySecondArea(params).then(response => {
         this.isShow = false
         this.chartData.rows = response.data
+        const maxValue = Math.max.apply(Math, response.data.map(item=> {return item.alarm>item.warning?item.alarm: item.warning}))
+        if (maxValue < 10) {
+          this.extend.yAxis.max = 10
+        } else {
+          this.extend.yAxis = maxValue+1
+        }
         // this.chartData.rows = [
         //   { 'areaName': '科技楼及食堂', 'alarm': 53 },
         //   { 'areaName': 'A\\B\\C\\D\\E座', 'alarm': 78 },
@@ -186,10 +195,11 @@
     }
   }
   .statistic-container {
+
     .el-button{
       padding: 5px 10px;
     }
-    /*margin-bottom: 10px;*/
+    margin-bottom: 10px;
     text-align: center;
     .chart-tool-button {
       padding: 5px;
diff --git a/src/views/dashboard/components/waterCompare.vue b/src/views/dashboard/components/waterCompare.vue
new file mode 100644
index 0000000..8e34936
--- /dev/null
+++ b/src/views/dashboard/components/waterCompare.vue
@@ -0,0 +1,117 @@
+<!--分区用水对比图-->
+<template>
+  <div class="container">
+    <function-area ref="func" select="week" @change="fetchData"/>
+    <ve-histogram v-if="isShow" :data="chartData" :grid="grid" :title="title" :extend="extend" :settings="chartSettings"/>
+  </div>
+</template>
+
+<script>
+
+import 'echarts/lib/component/visualMap'
+import { alarmBySecondArea } from '@/api/overview'
+import { getDayTime } from '@/utils/dateutils'
+import { getDoorAreaTree } from '@/api/system/area'
+import FunctionArea from "./FunctionArea";
+export default {
+  name: 'WaterCompare',
+  components: {FunctionArea},
+  data() {
+    return {
+      title:{ text: '分区用水对比图'},
+      chartSettings:{
+        labelMap: {
+          'areaName': '分区',
+          'last': '报警数',
+          'now': '预警数'
+        },
+        dimension: ['areaName'],
+        metrics: ['last', 'now']
+      },
+      grid: {
+        right: 40,
+        top: 80,
+        bottom: 5
+      },
+      extend: {
+        legend: {
+          show: false
+        },
+        xAxis: {
+          axisLabel: {
+            rotate: 30,
+            margin: 30,
+            textStyle: {
+              align: 'center'
+            }
+          }
+        },
+        yAxis: {
+          name: '用水量(吨)',
+          position: 'left',
+          max: 10
+        },
+        series: {
+          label: { show: true, position: 'top', formatter: '{c}' },
+          barWidth: 20
+        },
+        // tooltip: { trigger: 'item', formatter: '{b}<br/>报警次数：{c}次' }
+      },
+      areaId: '',
+      areaList: [],
+      isShow: true,
+      defaultTimeRange: [],
+      chartData: {
+        columns: ['areaName', 'last', 'now'],
+        rows: []
+      },
+      nameDict:{
+        'today':['昨日用水','今日用水'],
+        'week':['近7日用水','对照时间用水',],
+        'month':['近30日用水','对照时间用水',],
+        'season':['上季度用水','本季度用水',],
+        'year':['上年度用水','本年度用水',],
+        'other':['对照时间用水','自选时间用水']
+      }
+    }
+  },
+  mounted(){
+    this.$refs.func.init()
+  },
+  methods: {
+    fetchData(timeRange) {
+      const params = {
+        areaId: '110000',
+        startTime: timeRange[0],
+        endTime: timeRange[1]
+      }
+      alarmBySecondArea(params).then(response => {
+        this.isShow = false
+        this.chartData.rows = response.data
+        const maxValue = Math.max.apply(Math, response.data.map(item=> {return item.last>item.now?item.last: item.now}))
+        if (maxValue < 10) {
+          this.extend.yAxis.max = 10
+        } else {
+          this.extend.yAxis = maxValue+1
+        }
+        // this.chartData.rows = [
+        //   { 'areaName': '科技楼及食堂', 'alarm': 53 },
+        //   { 'areaName': 'A\\B\\C\\D\\E座', 'alarm': 78 },
+        //   { 'areaName': '厂区', 'alarm': 78 }]
+        this.isShow = true
+      })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+  .container{
+    position:relative;
+    .function{
+      width:calc(100% - 120px);
+      height: 28px;
+      display: flex;
+      justify-content: center;
+    }
+  }
+</style>
diff --git a/src/views/dashboard/components/waterCountByAreaBar.vue b/src/views/dashboard/components/waterCountByAreaBar.vue
index 1bdac48..f4196f1 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"
@@ -18,14 +19,14 @@
         @change="fetchData"/>
     </div>
     <ve-histogram v-if="isShow" :data="chartData" :grid="grid" :title="title" :extend="extend" :settings="chartSettings"/>
-    <div class="function">
-      <el-button
-        v-for="item in areaList"
-        :key="item.id"
-        round
-        size="mini"
-        @click="areaChange(item.id)">{{ item.name }}</el-button>
-    </div>
+    <!--<div class="function">-->
+      <!--<el-button-->
+        <!--v-for="item in areaList"-->
+        <!--:key="item.id"-->
+        <!--round-->
+        <!--size="mini"-->
+        <!--@click="areaChange(item.id)">{{ item.name }}</el-button>-->
+    <!--</div>-->
   </div>
 </template>
 
@@ -106,8 +107,8 @@
     }
   },
   mounted() {
-    this.setDefaultTime('today')
-    this.fetchArea()
+    this.setDefaultTime('week')
+    // 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,9 @@
         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
+        const nowDayOfWeek =  6
+        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..07524f9 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: {
@@ -27,8 +39,7 @@
         text: '用水走势图'
       },
       chartSettings: {
-        labelMap: {
-        },
+        labelMap: {date:'日期'},
         metrics: [],
         dimension: ['date']
       },
@@ -52,13 +63,19 @@
     }
   },
   mounted() {
-    this.changeTime('month')
-    this.fetchArea()
+    // this.changeTime('month')
+    // this.fetchArea()
+  },
+  watch:{
+    query(val){
+      this.fetchData()
+    }
   },
   methods: {
     fetchArea() {
       getDoorAreaTree().then(response => {
         if (response.code === 200) {
+          debugger
           const area = response.data.filter(item => {
             return item.pid === '1'
           }).map(item => item.name)
@@ -73,15 +90,21 @@
       })
     },
     fetchData() {
-      countByDayFirst(this.listQuery).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
-          }
-          delete item.data
-          return item
-        })
-        this.chartData.rows = arr
+      countByDayFirst(this.query).then(response => {
+        if(response.data.length>0){
+          const arr = response.data.map((item)=> {
+            const result = {date: item.date}
+            for (let i = 0; i < item.data.length; i++) {
+              result[item.data[i].areaName] = item.data[i].count
+            }
+            return result
+          })
+          const area = response.data[0].data.map(item=>item.areaName)
+          this.chartData.columns = ['date', ...area]
+          this.chartSettings.metrics = area
+          this.chartSettings.labelMap = {'date':'日期'}
+          this.chartData.rows = arr
+        }
       })
       // 模拟数据
       // this.chartData.rows = [
@@ -126,17 +149,7 @@
 </script>
 <style lang="scss" scoped>
   .container{
-    position:relative;
-    .function{
-      /*position:absolute;*/
-      /*z-index:200;*/
-      /*bottom: 10px;*/
-      /*left: 0;*/
-      width:100%;
-      height: 28px;
-      display: flex;
-      justify-content: center;
-    }
+
   }
 </style>
 
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..a4ff85d
--- /dev/null
+++ b/src/views/dashboard/components/waterNote.vue
@@ -0,0 +1,142 @@
+<!--用水事记L -->
+<template>
+  <div class="container">
+    <div class="title">
+      青岛公司用水事记
+      <i v-if="!editMode" class="el-icon-edit edit-btn" style="float:right" @click="editNote"></i>
+      <i v-else class="el-icon-check edit-btn" style="float:right" @click="saveNote"></i>
+    </div>
+    <div class="content-div">
+      <el-scrollbar class="white-scrollbar">
+        <div v-for="(item,index) of currentList" :key="'note_'+index" class="content-line">
+          <div v-if="!editMode">{{index+1}}. {{item.content}}</div>
+          <div v-else class="edit-line">
+            <div style="margin-right: 5px">{{index+1}}. </div>
+            <el-input v-model="item.content" size="mini" maxlength="30"></el-input>
+            <div style="width: 85px;display: flex;justify-content: flex-end">
+              <i v-show="index!==0" class="el-icon-top" @click="toTop(index)"></i>
+              <i v-show="index!==currentList.length-1" class="el-icon-bottom" @click="toBottom(index)"></i>
+              <i class="el-icon-delete" @click="deleteItem(index)"></i>
+            </div>
+          </div>
+        </div>
+        <div v-if="editMode&&currentList.length<10" class="content-line">
+          <i class="el-icon-circle-plus-outline icon-btn" @click="addItem()"></i>
+        </div>
+      </el-scrollbar>
+    </div>
+  </div>
+</template>
+
+<script>
+import { getNoteList, updateNoteList } from '@/api/dashboard'
+import { getDoorAreaTree } from '@/api/system/area'
+export default {
+  name: 'WaterNote',
+  props:{
+    query: {
+      type: Object,
+      default:()=>{
+        return {
+          areaId: '',
+          startTime: '',
+          endTime: ''
+        }
+      }
+    }
+  },
+  data() {
+    return {
+      editMode: false, // 编辑模式
+      originList:[], // 原始列表
+      currentList:[] // 当前列表
+    }
+  },
+  mounted() {
+    this.fetchData()
+  },
+  methods: {
+    // 获取统计数据
+    fetchData() {
+      this.currentList = [
+        { 'content': '测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试', 'num': 1 },
+        { 'content': '测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试', 'num': 1 },
+        { 'content': '测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试', 'num': 1 },
+        { 'content': '测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试', 'num': 1 },
+        { 'content': '测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试', 'num': 1 }
+      ]
+      this.originList = JSON.parse(JSON.stringify(this.currentList))
+      // getNoteList().then(response => {
+      //   this.currentList = response.data
+      // })
+    },
+    toTop(index){
+      this.currentList[index-1] = this.currentList.splice(index,1,this.currentList[index-1])[0]
+    },
+    toBottom(index){
+      this.currentList[index] = this.currentList.splice(index+1,1,this.currentList[index])[0]
+    },
+    deleteItem(index){
+      this.currentList.splice(index,1)
+    },
+    addItem(){
+      this.currentList.push({content:'',num:99})
+    },
+    // 开启编辑
+    editNote(){
+      this.editMode = true
+    },
+    // 保存用水事记
+    saveNote(){
+      const currentList = this.currentList.map((item, index)=>{
+        return {content: item.content, num: index}
+      })
+      console.log(currentList)
+      updateNoteList(currentList).then(res=>{
+        this.editMode = false
+        this.$message.success('保存成功')
+      }).catch(e=>{
+        // this.currentList = JSON.parse(JSON.stringify(this.originList))
+      })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+  @import "@/styles/variables.scss";
+  .container{
+    position:relative;
+    height: 428px;
+    display: flex;
+    flex-direction: column;
+    .content-div{
+      height: 410px;
+      .content-line{
+        line-height: 30px;
+        font-size: 16px;
+      }
+      .edit-line{
+        width: 100%;
+        display: flex;
+        align-items: center;
+      }
+    }
+  }
+  .edit-btn, .icon-btn{
+    &:hover{
+      cursor: pointer;
+      color: $themeColor;
+    }
+  }
+</style>
+<style lang="scss">
+  .white-scrollbar{
+    height: 100%;
+    .el-scrollbar__wrap{
+      overflow-x: hidden;
+      padding: 10px 0px;
+      background-color: #FFFFFF;
+    }
+  }
+
+</style>
diff --git a/src/views/dashboard/index.vue b/src/views/dashboard/index.vue
index fdbc38a..69d09ea 100644
--- a/src/views/dashboard/index.vue
+++ b/src/views/dashboard/index.vue
@@ -1,54 +1,55 @@
 <template>
   <div class="dashboard-container" style="background-color: white">
     <panel-group ref="panelgroup"/>
-    <el-row :gutter="10">
-      <!-- 用水统计图 -->
+    <el-row>
+      <!--设备在线数量统计-->
       <el-col :span="12">
         <el-card shadow="never">
-          <water-count-by-dept-bar/>
+          <water-compare/>
+        </el-card>
+      </el-col>
+      <!--设备数量统计-->
+      <el-col v-if="hasPerm('/statics/deviceStaticsByType')" :span="12">
+        <el-card shadow="never">
+          <device-count/>
+        </el-card>
+      </el-col>
+      <!-- 用水统计图 -->
+      <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 :query="listQuery1" ref="waterCountPie"/>
         </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/>
+          <water-count-by-day :query="listQuery1" ref="waterCountDay"/>
         </el-card>
       </el-col>
 
-      <!--设备数量统计-->
-      <el-col v-if="hasPerm('/statics/deviceStaticsByType')" :span="12">
+      <!--水表报警次数统计，柱状图-->
+      <el-col v-if="hasPerm('/statics/alarmsByDay')" :span="12">
         <el-card shadow="never">
-          <device-count/>
+          <watch-alarm-bar @change="changeAlarmQuery"/>
+        </el-card>
+      </el-col>
+      <!--报警饼图统计-->
+      <el-col v-if="hasPerm('/statics/alarmsByDay')" :span="12">
+        <el-card shadow="never">
+          <alarm-count-by-dept :query="listQuery2"/>
         </el-card>
       </el-col>
     </el-row>
@@ -64,20 +65,26 @@
 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";
+import AlarmCountByDept from "./components/AlarmCountByDept";
+import WaterCompare from "./components/waterCompare";
 
 export default {
   name: 'Dashboard',
   components: {
+    WaterCompare,
+    AlarmCountByDept,
+    WaterNote,
     WatchAlarmBar,
     WaterCountByAreaBar,
     WaterCountByDay,
     WaterCountByDeptBar,
-    WaterCountByDepy,
+    WaterCountByDept,
     JobByStatus,
     AlarmByDays,
     PanelGroup,
@@ -108,12 +115,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:'110000',
+        startTime:new Date().Format('yyyy-MM-dd'),
+        endTime:new Date().Format('yyyy-MM-dd')
+      } // 分区报警查询条件
+    }
+  },
   watch: {
     needRefresh(val) {
       // 需要刷新
       if (val) {
         console.log('refresh dashboard')
-        debugger
         this.$refs.panelgroup.refresh()
       }
     }
@@ -124,6 +144,14 @@
   methods: {
     webSocket() {
       this.$store.dispatch('initWebSocket')
+    },
+    // 切换分区查询条件
+    changeWaterQuery(listQuery1){
+      this.listQuery1 = listQuery1
+    },
+    // 切换报警查询条件
+    changeAlarmQuery(listQuery2){
+      this.listQuery2 = listQuery2
     }
   }
 }
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..6ad37f1 100644
--- a/src/api/dashboard.js
+++ b/src/api/dashboard.js
@@ -0,0 +1,92 @@
+/**
+ * 井总览模块接口
+ */
+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: '/device/valve/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
+  })
+}
+
+
+// 用水事记查询
+export function getNoteList() {
+  return request({
+    // url: '/note/list',
+    url: 'waterMeterData/count',
+    method: 'get',
+    params
+  })
+}
+
+// 用水事记更新
+export function updateNoteList(params) {
+  return request({
+    // url: '/note/update',
+    url: 'waterMeterData/count',
+    method: 'post',
+    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/AlarmCountByDept.vue b/src/views/dashboard/components/AlarmCountByDept.vue
new file mode 100644
index 0000000..91df51d
--- /dev/null
+++ b/src/views/dashboard/components/AlarmCountByDept.vue
@@ -0,0 +1,80 @@
+<!--suppress ALL -->
+<template>
+  <div class="container">
+    <div style="height: 28px;margin-bottom: 10px;"/>
+    <ve-pie :data="chartData" :extend="extend" :title="title"/>
+
+  </div>
+</template>
+
+<script>
+import { alarmBySecondArea } from '@/api/overview'
+import { getDoorAreaTree } from '@/api/system/area'
+export default {
+  name: 'AlarmCountByDept',
+  props:{
+    query: {
+      type: Object,
+      default:()=>{
+        return {
+          areaId: '',
+          startTime: '',
+          endTime: ''
+        }
+      }
+    }
+  },
+  data() {
+    return {
+      chartData: {
+        columns: ['areaName', 'alarm'],
+        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': '分区',
+          'alarm': '报警数'
+        }
+      }
+    }
+  },
+  watch:{
+    query(val){
+      this.fetchData()
+    }
+  },
+  methods: {
+    // 获取统计数据
+    fetchData() {
+      alarmBySecondArea(this.query).then(response => {
+        debugger
+        this.chartData.rows = response.data
+      })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+  .container{
+
+  }
+</style>
diff --git a/src/views/dashboard/components/DeviceCount.vue b/src/views/dashboard/components/DeviceCount.vue
index 6c36bcb..453fa09 100644
--- a/src/views/dashboard/components/DeviceCount.vue
+++ b/src/views/dashboard/components/DeviceCount.vue
@@ -1,5 +1,9 @@
 <template>
-  <ve-bar :data="chartData" :grid="grid" :title="title" :extend="extend" :settings="chartSettings"/>
+  <div>
+    <div style="height: 28px;margin-bottom: 10px;"/>
+    <ve-bar :data="chartData" :grid="grid" :title="title" :extend="extend" :settings="chartSettings"/>
+  </div>
+
 </template>
 
 <script>
diff --git a/src/views/dashboard/components/FunctionArea.vue b/src/views/dashboard/components/FunctionArea.vue
new file mode 100644
index 0000000..e628c12
--- /dev/null
+++ b/src/views/dashboard/components/FunctionArea.vue
@@ -0,0 +1,128 @@
+<!--
+ * @Description:
+ * @Author: 王晓颖
+ * @Date:
+ -->
+<template>
+  <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')">本周</el-button>
+    <el-button round size="mini" @click="setDefaultTime('today')">今日</el-button>
+    <el-date-picker
+      v-model="timeRange"
+      :picker-options="pickerOptions"
+      type="daterange"
+      range-separator="至"
+      start-placeholder="开始日期"
+      end-placeholder="结束日期"
+      value-format="yyyy-MM-dd"
+      size="mini"
+      style="width:250px;margin-right: 20px"
+      @change="fetchData"/>
+  </div>
+</template>
+
+<script>
+  import { getDayTime } from '@/utils/dateutils'
+  export default {
+    name: "FunctionArea",
+    props:{
+      select:{
+        type: String,
+        default: 'today'
+      }
+    },
+    data() {
+      return {
+        timeRange: [],
+        pickerOptions: {
+          disabledDate: function(date) {
+            var oDate1 = new Date(date)
+            var oDate2 = new Date()
+            if (oDate1.getTime() > oDate2.getTime()) {
+              return true
+            } else {
+              return false
+            }
+          }
+        }
+      }
+    },
+    methods: {
+      init(){
+        this.setDefaultTime(this.select)
+      },
+      change(){
+        this.$emit('change', this.timeRange)
+      },
+      setDefaultTime(val) {
+        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
+          if (tMonth.toString().length === 1) {
+            tMonth = '0' + tMonth
+          }
+          const beginTime = tYear + '-' + tMonth + '-01'
+          const endTime = getDayTime(new Date().getTime())
+          this.timeRange = [beginTime, endTime.Format('yyyy-MM-dd')]
+        } else if (val === 'week') {
+          // const nowDayOfWeek =  new Date().getDay()-1
+          const nowDayOfWeek =  6
+          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') {
+          this.timeRange = [getDayTime(new Date().getTime()).Format('yyyy-MM-dd'), getDayTime(new Date().getTime()).Format('yyyy-MM-dd')]
+        }
+        this.change()
+      }
+    }
+  }
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  .statistic-container {
+
+    .el-button{
+      padding: 5px 10px;
+    }
+    margin-bottom: 10px;
+    text-align: center;
+    .chart-tool-button {
+      padding: 5px;
+      line-height: 16px;
+      margin-top: 5px;
+      font-size: 14px;
+    }
+    .chart-tool-button:hover {
+      background-color: #8cc5ff;
+      cursor: pointer;
+      color: white;
+    }
+    .chart-tool-button:active {
+      background-color: #8cc5ff;
+      color: white;
+    }
+  }
+  .selected {
+    background-color: #8cc5ff;
+    color: white;
+  }
+</style>
diff --git a/src/views/dashboard/components/PanelGroup.vue b/src/views/dashboard/components/PanelGroup.vue
index b72d289..7be90a7 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,32 @@
           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',
           permission: '/device/list'
         },
         {
@@ -67,11 +69,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 +85,10 @@
   },
   mounted() {
     this.getWater()
-    this.getWellCount()
+    // this.getWellCount()
     this.getDeviceCount()
     this.getAlarmCount()
-    this.getJobCount()
+    // this.getJobCount()
   },
   methods: {
     refresh() {
@@ -97,24 +99,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.production?parseFloat(response.data.production).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 +168,7 @@
   //   &:hover {
   //     .card-panel-icon-wrapper {
   //       color: #fff;
-        
+
   //     }
 
   //     .icon-people {
diff --git a/src/views/dashboard/components/watchAlarmBar.vue b/src/views/dashboard/components/watchAlarmBar.vue
index 13824f3..6a18ef6 100644
--- a/src/views/dashboard/components/watchAlarmBar.vue
+++ b/src/views/dashboard/components/watchAlarmBar.vue
@@ -1,9 +1,11 @@
+<!--水表告警统计-->
 <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"
@@ -18,14 +20,14 @@
         @change="fetchData"/>
     </div>
     <ve-histogram v-if="isShow" :data="chartData" :grid="grid" :title="title" :extend="extend" :settings="chartSettings"/>
-    <div class="function">
-      <el-button
-        v-for="item in areaList"
-        :key="item.id"
-        round
-        size="mini"
-        @click="areaChange(item.id)">{{ item.name }}</el-button>
-    </div>
+    <!--<div class="function">-->
+      <!--<el-button-->
+        <!--v-for="item in areaList"-->
+        <!--:key="item.id"-->
+        <!--round-->
+        <!--size="mini"-->
+        <!--@click="areaChange(item.id)">{{ item.name }}</el-button>-->
+    <!--</div>-->
   </div>
 </template>
 
@@ -38,51 +40,51 @@
 export default {
   name: 'WatchAlarmBar',
   data() {
-    this.extend = {
-      legend: {
-        show: false
-      },
-      xAxis: {
-        axisLabel: {
-          rotate: 30,
-          margin: 30,
-          textStyle: {
-            align: 'center'
-          }
-        }
-      },
-      yAxis: {
-        name: '报警次数',
-        position: 'left'
-      },
-      series: {
-        label: { show: true, position: 'top', formatter: '{c}' },
-        barWidth: 25
-      },
-      tooltip: { trigger: 'item', formatter: '{b}<br/>报警次数：{c}次' }
-    }
-    this.grid = {
-      right: 40,
-      top: 100,
-      bottom: 5
-    }
-    this.title = {
-      text: '水表告警统计'
-    }
-    this.chartSettings = {
-      itemStyle: {
-        barCategoryGap: 10
-      },
-
-      labelMap: {
-        'areaName': '分区',
-        'alarm': '报警数',
-        'warning': '预警数'
-      },
-      dimension: ['areaName'],
-      metrics: ['alarm', 'warning']
-    }
     return {
+      title:{
+        text: '水表告警统计'
+      },
+      chartSettings:{
+        itemStyle: {
+          barCategoryGap: 0
+        },
+        labelMap: {
+          'areaName': '分区',
+          'alarm': '报警数',
+          'warning': '预警数'
+        },
+        dimension: ['areaName'],
+        metrics: ['alarm', 'warning']
+      },
+      grid: {
+        right: 40,
+        top: 80,
+        bottom: 5
+      },
+      extend: {
+        legend: {
+          show: false
+        },
+        xAxis: {
+          axisLabel: {
+            rotate: 30,
+            margin: 30,
+            textStyle: {
+              align: 'center'
+            }
+          }
+        },
+        yAxis: {
+          name: '报警次数',
+          position: 'left',
+          max: 10
+        },
+        series: {
+          label: { show: true, position: 'top', formatter: '{c}' },
+          barWidth: 20
+        },
+        // tooltip: { trigger: 'item', formatter: '{b}<br/>报警次数：{c}次' }
+      },
       areaId: '',
       areaList: [],
       isShow: true,
@@ -100,43 +102,50 @@
         }
       },
       chartData: {
-        columns: ['wellTypeName', 'alarm'],
+        columns: ['areaName', 'alarm'],
         rows: []
       }
     }
   },
   mounted() {
     this.setDefaultTime('today')
-    this.fetchArea()
+    // this.fetchArea()
   },
   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()
-    },
+    // 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() {
       const params = {
-        areaId: this.areaId,
+        areaId: '110000',
         startTime: this.timeRange[0],
         endTime: this.timeRange[1]
       }
+      this.$emit('change', params)
       alarmBySecondArea(params).then(response => {
         this.isShow = false
         this.chartData.rows = response.data
+        const maxValue = Math.max.apply(Math, response.data.map(item=> {return item.alarm>item.warning?item.alarm: item.warning}))
+        if (maxValue < 10) {
+          this.extend.yAxis.max = 10
+        } else {
+          this.extend.yAxis = maxValue+1
+        }
         // this.chartData.rows = [
         //   { 'areaName': '科技楼及食堂', 'alarm': 53 },
         //   { 'areaName': 'A\\B\\C\\D\\E座', 'alarm': 78 },
@@ -186,10 +195,11 @@
     }
   }
   .statistic-container {
+
     .el-button{
       padding: 5px 10px;
     }
-    /*margin-bottom: 10px;*/
+    margin-bottom: 10px;
     text-align: center;
     .chart-tool-button {
       padding: 5px;
diff --git a/src/views/dashboard/components/waterCompare.vue b/src/views/dashboard/components/waterCompare.vue
new file mode 100644
index 0000000..8e34936
--- /dev/null
+++ b/src/views/dashboard/components/waterCompare.vue
@@ -0,0 +1,117 @@
+<!--分区用水对比图-->
+<template>
+  <div class="container">
+    <function-area ref="func" select="week" @change="fetchData"/>
+    <ve-histogram v-if="isShow" :data="chartData" :grid="grid" :title="title" :extend="extend" :settings="chartSettings"/>
+  </div>
+</template>
+
+<script>
+
+import 'echarts/lib/component/visualMap'
+import { alarmBySecondArea } from '@/api/overview'
+import { getDayTime } from '@/utils/dateutils'
+import { getDoorAreaTree } from '@/api/system/area'
+import FunctionArea from "./FunctionArea";
+export default {
+  name: 'WaterCompare',
+  components: {FunctionArea},
+  data() {
+    return {
+      title:{ text: '分区用水对比图'},
+      chartSettings:{
+        labelMap: {
+          'areaName': '分区',
+          'last': '报警数',
+          'now': '预警数'
+        },
+        dimension: ['areaName'],
+        metrics: ['last', 'now']
+      },
+      grid: {
+        right: 40,
+        top: 80,
+        bottom: 5
+      },
+      extend: {
+        legend: {
+          show: false
+        },
+        xAxis: {
+          axisLabel: {
+            rotate: 30,
+            margin: 30,
+            textStyle: {
+              align: 'center'
+            }
+          }
+        },
+        yAxis: {
+          name: '用水量(吨)',
+          position: 'left',
+          max: 10
+        },
+        series: {
+          label: { show: true, position: 'top', formatter: '{c}' },
+          barWidth: 20
+        },
+        // tooltip: { trigger: 'item', formatter: '{b}<br/>报警次数：{c}次' }
+      },
+      areaId: '',
+      areaList: [],
+      isShow: true,
+      defaultTimeRange: [],
+      chartData: {
+        columns: ['areaName', 'last', 'now'],
+        rows: []
+      },
+      nameDict:{
+        'today':['昨日用水','今日用水'],
+        'week':['近7日用水','对照时间用水',],
+        'month':['近30日用水','对照时间用水',],
+        'season':['上季度用水','本季度用水',],
+        'year':['上年度用水','本年度用水',],
+        'other':['对照时间用水','自选时间用水']
+      }
+    }
+  },
+  mounted(){
+    this.$refs.func.init()
+  },
+  methods: {
+    fetchData(timeRange) {
+      const params = {
+        areaId: '110000',
+        startTime: timeRange[0],
+        endTime: timeRange[1]
+      }
+      alarmBySecondArea(params).then(response => {
+        this.isShow = false
+        this.chartData.rows = response.data
+        const maxValue = Math.max.apply(Math, response.data.map(item=> {return item.last>item.now?item.last: item.now}))
+        if (maxValue < 10) {
+          this.extend.yAxis.max = 10
+        } else {
+          this.extend.yAxis = maxValue+1
+        }
+        // this.chartData.rows = [
+        //   { 'areaName': '科技楼及食堂', 'alarm': 53 },
+        //   { 'areaName': 'A\\B\\C\\D\\E座', 'alarm': 78 },
+        //   { 'areaName': '厂区', 'alarm': 78 }]
+        this.isShow = true
+      })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+  .container{
+    position:relative;
+    .function{
+      width:calc(100% - 120px);
+      height: 28px;
+      display: flex;
+      justify-content: center;
+    }
+  }
+</style>
diff --git a/src/views/dashboard/components/waterCountByAreaBar.vue b/src/views/dashboard/components/waterCountByAreaBar.vue
index 1bdac48..f4196f1 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"
@@ -18,14 +19,14 @@
         @change="fetchData"/>
     </div>
     <ve-histogram v-if="isShow" :data="chartData" :grid="grid" :title="title" :extend="extend" :settings="chartSettings"/>
-    <div class="function">
-      <el-button
-        v-for="item in areaList"
-        :key="item.id"
-        round
-        size="mini"
-        @click="areaChange(item.id)">{{ item.name }}</el-button>
-    </div>
+    <!--<div class="function">-->
+      <!--<el-button-->
+        <!--v-for="item in areaList"-->
+        <!--:key="item.id"-->
+        <!--round-->
+        <!--size="mini"-->
+        <!--@click="areaChange(item.id)">{{ item.name }}</el-button>-->
+    <!--</div>-->
   </div>
 </template>
 
@@ -106,8 +107,8 @@
     }
   },
   mounted() {
-    this.setDefaultTime('today')
-    this.fetchArea()
+    this.setDefaultTime('week')
+    // 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,9 @@
         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
+        const nowDayOfWeek =  6
+        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..07524f9 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: {
@@ -27,8 +39,7 @@
         text: '用水走势图'
       },
       chartSettings: {
-        labelMap: {
-        },
+        labelMap: {date:'日期'},
         metrics: [],
         dimension: ['date']
       },
@@ -52,13 +63,19 @@
     }
   },
   mounted() {
-    this.changeTime('month')
-    this.fetchArea()
+    // this.changeTime('month')
+    // this.fetchArea()
+  },
+  watch:{
+    query(val){
+      this.fetchData()
+    }
   },
   methods: {
     fetchArea() {
       getDoorAreaTree().then(response => {
         if (response.code === 200) {
+          debugger
           const area = response.data.filter(item => {
             return item.pid === '1'
           }).map(item => item.name)
@@ -73,15 +90,21 @@
       })
     },
     fetchData() {
-      countByDayFirst(this.listQuery).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
-          }
-          delete item.data
-          return item
-        })
-        this.chartData.rows = arr
+      countByDayFirst(this.query).then(response => {
+        if(response.data.length>0){
+          const arr = response.data.map((item)=> {
+            const result = {date: item.date}
+            for (let i = 0; i < item.data.length; i++) {
+              result[item.data[i].areaName] = item.data[i].count
+            }
+            return result
+          })
+          const area = response.data[0].data.map(item=>item.areaName)
+          this.chartData.columns = ['date', ...area]
+          this.chartSettings.metrics = area
+          this.chartSettings.labelMap = {'date':'日期'}
+          this.chartData.rows = arr
+        }
       })
       // 模拟数据
       // this.chartData.rows = [
@@ -126,17 +149,7 @@
 </script>
 <style lang="scss" scoped>
   .container{
-    position:relative;
-    .function{
-      /*position:absolute;*/
-      /*z-index:200;*/
-      /*bottom: 10px;*/
-      /*left: 0;*/
-      width:100%;
-      height: 28px;
-      display: flex;
-      justify-content: center;
-    }
+
   }
 </style>
 
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..a4ff85d
--- /dev/null
+++ b/src/views/dashboard/components/waterNote.vue
@@ -0,0 +1,142 @@
+<!--用水事记L -->
+<template>
+  <div class="container">
+    <div class="title">
+      青岛公司用水事记
+      <i v-if="!editMode" class="el-icon-edit edit-btn" style="float:right" @click="editNote"></i>
+      <i v-else class="el-icon-check edit-btn" style="float:right" @click="saveNote"></i>
+    </div>
+    <div class="content-div">
+      <el-scrollbar class="white-scrollbar">
+        <div v-for="(item,index) of currentList" :key="'note_'+index" class="content-line">
+          <div v-if="!editMode">{{index+1}}. {{item.content}}</div>
+          <div v-else class="edit-line">
+            <div style="margin-right: 5px">{{index+1}}. </div>
+            <el-input v-model="item.content" size="mini" maxlength="30"></el-input>
+            <div style="width: 85px;display: flex;justify-content: flex-end">
+              <i v-show="index!==0" class="el-icon-top" @click="toTop(index)"></i>
+              <i v-show="index!==currentList.length-1" class="el-icon-bottom" @click="toBottom(index)"></i>
+              <i class="el-icon-delete" @click="deleteItem(index)"></i>
+            </div>
+          </div>
+        </div>
+        <div v-if="editMode&&currentList.length<10" class="content-line">
+          <i class="el-icon-circle-plus-outline icon-btn" @click="addItem()"></i>
+        </div>
+      </el-scrollbar>
+    </div>
+  </div>
+</template>
+
+<script>
+import { getNoteList, updateNoteList } from '@/api/dashboard'
+import { getDoorAreaTree } from '@/api/system/area'
+export default {
+  name: 'WaterNote',
+  props:{
+    query: {
+      type: Object,
+      default:()=>{
+        return {
+          areaId: '',
+          startTime: '',
+          endTime: ''
+        }
+      }
+    }
+  },
+  data() {
+    return {
+      editMode: false, // 编辑模式
+      originList:[], // 原始列表
+      currentList:[] // 当前列表
+    }
+  },
+  mounted() {
+    this.fetchData()
+  },
+  methods: {
+    // 获取统计数据
+    fetchData() {
+      this.currentList = [
+        { 'content': '测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试', 'num': 1 },
+        { 'content': '测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试', 'num': 1 },
+        { 'content': '测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试', 'num': 1 },
+        { 'content': '测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试', 'num': 1 },
+        { 'content': '测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试', 'num': 1 }
+      ]
+      this.originList = JSON.parse(JSON.stringify(this.currentList))
+      // getNoteList().then(response => {
+      //   this.currentList = response.data
+      // })
+    },
+    toTop(index){
+      this.currentList[index-1] = this.currentList.splice(index,1,this.currentList[index-1])[0]
+    },
+    toBottom(index){
+      this.currentList[index] = this.currentList.splice(index+1,1,this.currentList[index])[0]
+    },
+    deleteItem(index){
+      this.currentList.splice(index,1)
+    },
+    addItem(){
+      this.currentList.push({content:'',num:99})
+    },
+    // 开启编辑
+    editNote(){
+      this.editMode = true
+    },
+    // 保存用水事记
+    saveNote(){
+      const currentList = this.currentList.map((item, index)=>{
+        return {content: item.content, num: index}
+      })
+      console.log(currentList)
+      updateNoteList(currentList).then(res=>{
+        this.editMode = false
+        this.$message.success('保存成功')
+      }).catch(e=>{
+        // this.currentList = JSON.parse(JSON.stringify(this.originList))
+      })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+  @import "@/styles/variables.scss";
+  .container{
+    position:relative;
+    height: 428px;
+    display: flex;
+    flex-direction: column;
+    .content-div{
+      height: 410px;
+      .content-line{
+        line-height: 30px;
+        font-size: 16px;
+      }
+      .edit-line{
+        width: 100%;
+        display: flex;
+        align-items: center;
+      }
+    }
+  }
+  .edit-btn, .icon-btn{
+    &:hover{
+      cursor: pointer;
+      color: $themeColor;
+    }
+  }
+</style>
+<style lang="scss">
+  .white-scrollbar{
+    height: 100%;
+    .el-scrollbar__wrap{
+      overflow-x: hidden;
+      padding: 10px 0px;
+      background-color: #FFFFFF;
+    }
+  }
+
+</style>
diff --git a/src/views/dashboard/index.vue b/src/views/dashboard/index.vue
index fdbc38a..69d09ea 100644
--- a/src/views/dashboard/index.vue
+++ b/src/views/dashboard/index.vue
@@ -1,54 +1,55 @@
 <template>
   <div class="dashboard-container" style="background-color: white">
     <panel-group ref="panelgroup"/>
-    <el-row :gutter="10">
-      <!-- 用水统计图 -->
+    <el-row>
+      <!--设备在线数量统计-->
       <el-col :span="12">
         <el-card shadow="never">
-          <water-count-by-dept-bar/>
+          <water-compare/>
+        </el-card>
+      </el-col>
+      <!--设备数量统计-->
+      <el-col v-if="hasPerm('/statics/deviceStaticsByType')" :span="12">
+        <el-card shadow="never">
+          <device-count/>
+        </el-card>
+      </el-col>
+      <!-- 用水统计图 -->
+      <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 :query="listQuery1" ref="waterCountPie"/>
         </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/>
+          <water-count-by-day :query="listQuery1" ref="waterCountDay"/>
         </el-card>
       </el-col>
 
-      <!--设备数量统计-->
-      <el-col v-if="hasPerm('/statics/deviceStaticsByType')" :span="12">
+      <!--水表报警次数统计，柱状图-->
+      <el-col v-if="hasPerm('/statics/alarmsByDay')" :span="12">
         <el-card shadow="never">
-          <device-count/>
+          <watch-alarm-bar @change="changeAlarmQuery"/>
+        </el-card>
+      </el-col>
+      <!--报警饼图统计-->
+      <el-col v-if="hasPerm('/statics/alarmsByDay')" :span="12">
+        <el-card shadow="never">
+          <alarm-count-by-dept :query="listQuery2"/>
         </el-card>
       </el-col>
     </el-row>
@@ -64,20 +65,26 @@
 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";
+import AlarmCountByDept from "./components/AlarmCountByDept";
+import WaterCompare from "./components/waterCompare";
 
 export default {
   name: 'Dashboard',
   components: {
+    WaterCompare,
+    AlarmCountByDept,
+    WaterNote,
     WatchAlarmBar,
     WaterCountByAreaBar,
     WaterCountByDay,
     WaterCountByDeptBar,
-    WaterCountByDepy,
+    WaterCountByDept,
     JobByStatus,
     AlarmByDays,
     PanelGroup,
@@ -108,12 +115,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:'110000',
+        startTime:new Date().Format('yyyy-MM-dd'),
+        endTime:new Date().Format('yyyy-MM-dd')
+      } // 分区报警查询条件
+    }
+  },
   watch: {
     needRefresh(val) {
       // 需要刷新
       if (val) {
         console.log('refresh dashboard')
-        debugger
         this.$refs.panelgroup.refresh()
       }
     }
@@ -124,6 +144,14 @@
   methods: {
     webSocket() {
       this.$store.dispatch('initWebSocket')
+    },
+    // 切换分区查询条件
+    changeWaterQuery(listQuery1){
+      this.listQuery1 = listQuery1
+    },
+    // 切换报警查询条件
+    changeAlarmQuery(listQuery2){
+      this.listQuery2 = listQuery2
     }
   }
 }
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..6ad37f1 100644
--- a/src/api/dashboard.js
+++ b/src/api/dashboard.js
@@ -0,0 +1,92 @@
+/**
+ * 井总览模块接口
+ */
+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: '/device/valve/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
+  })
+}
+
+
+// 用水事记查询
+export function getNoteList() {
+  return request({
+    // url: '/note/list',
+    url: 'waterMeterData/count',
+    method: 'get',
+    params
+  })
+}
+
+// 用水事记更新
+export function updateNoteList(params) {
+  return request({
+    // url: '/note/update',
+    url: 'waterMeterData/count',
+    method: 'post',
+    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/AlarmCountByDept.vue b/src/views/dashboard/components/AlarmCountByDept.vue
new file mode 100644
index 0000000..91df51d
--- /dev/null
+++ b/src/views/dashboard/components/AlarmCountByDept.vue
@@ -0,0 +1,80 @@
+<!--suppress ALL -->
+<template>
+  <div class="container">
+    <div style="height: 28px;margin-bottom: 10px;"/>
+    <ve-pie :data="chartData" :extend="extend" :title="title"/>
+
+  </div>
+</template>
+
+<script>
+import { alarmBySecondArea } from '@/api/overview'
+import { getDoorAreaTree } from '@/api/system/area'
+export default {
+  name: 'AlarmCountByDept',
+  props:{
+    query: {
+      type: Object,
+      default:()=>{
+        return {
+          areaId: '',
+          startTime: '',
+          endTime: ''
+        }
+      }
+    }
+  },
+  data() {
+    return {
+      chartData: {
+        columns: ['areaName', 'alarm'],
+        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': '分区',
+          'alarm': '报警数'
+        }
+      }
+    }
+  },
+  watch:{
+    query(val){
+      this.fetchData()
+    }
+  },
+  methods: {
+    // 获取统计数据
+    fetchData() {
+      alarmBySecondArea(this.query).then(response => {
+        debugger
+        this.chartData.rows = response.data
+      })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+  .container{
+
+  }
+</style>
diff --git a/src/views/dashboard/components/DeviceCount.vue b/src/views/dashboard/components/DeviceCount.vue
index 6c36bcb..453fa09 100644
--- a/src/views/dashboard/components/DeviceCount.vue
+++ b/src/views/dashboard/components/DeviceCount.vue
@@ -1,5 +1,9 @@
 <template>
-  <ve-bar :data="chartData" :grid="grid" :title="title" :extend="extend" :settings="chartSettings"/>
+  <div>
+    <div style="height: 28px;margin-bottom: 10px;"/>
+    <ve-bar :data="chartData" :grid="grid" :title="title" :extend="extend" :settings="chartSettings"/>
+  </div>
+
 </template>
 
 <script>
diff --git a/src/views/dashboard/components/FunctionArea.vue b/src/views/dashboard/components/FunctionArea.vue
new file mode 100644
index 0000000..e628c12
--- /dev/null
+++ b/src/views/dashboard/components/FunctionArea.vue
@@ -0,0 +1,128 @@
+<!--
+ * @Description:
+ * @Author: 王晓颖
+ * @Date:
+ -->
+<template>
+  <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')">本周</el-button>
+    <el-button round size="mini" @click="setDefaultTime('today')">今日</el-button>
+    <el-date-picker
+      v-model="timeRange"
+      :picker-options="pickerOptions"
+      type="daterange"
+      range-separator="至"
+      start-placeholder="开始日期"
+      end-placeholder="结束日期"
+      value-format="yyyy-MM-dd"
+      size="mini"
+      style="width:250px;margin-right: 20px"
+      @change="fetchData"/>
+  </div>
+</template>
+
+<script>
+  import { getDayTime } from '@/utils/dateutils'
+  export default {
+    name: "FunctionArea",
+    props:{
+      select:{
+        type: String,
+        default: 'today'
+      }
+    },
+    data() {
+      return {
+        timeRange: [],
+        pickerOptions: {
+          disabledDate: function(date) {
+            var oDate1 = new Date(date)
+            var oDate2 = new Date()
+            if (oDate1.getTime() > oDate2.getTime()) {
+              return true
+            } else {
+              return false
+            }
+          }
+        }
+      }
+    },
+    methods: {
+      init(){
+        this.setDefaultTime(this.select)
+      },
+      change(){
+        this.$emit('change', this.timeRange)
+      },
+      setDefaultTime(val) {
+        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
+          if (tMonth.toString().length === 1) {
+            tMonth = '0' + tMonth
+          }
+          const beginTime = tYear + '-' + tMonth + '-01'
+          const endTime = getDayTime(new Date().getTime())
+          this.timeRange = [beginTime, endTime.Format('yyyy-MM-dd')]
+        } else if (val === 'week') {
+          // const nowDayOfWeek =  new Date().getDay()-1
+          const nowDayOfWeek =  6
+          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') {
+          this.timeRange = [getDayTime(new Date().getTime()).Format('yyyy-MM-dd'), getDayTime(new Date().getTime()).Format('yyyy-MM-dd')]
+        }
+        this.change()
+      }
+    }
+  }
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  .statistic-container {
+
+    .el-button{
+      padding: 5px 10px;
+    }
+    margin-bottom: 10px;
+    text-align: center;
+    .chart-tool-button {
+      padding: 5px;
+      line-height: 16px;
+      margin-top: 5px;
+      font-size: 14px;
+    }
+    .chart-tool-button:hover {
+      background-color: #8cc5ff;
+      cursor: pointer;
+      color: white;
+    }
+    .chart-tool-button:active {
+      background-color: #8cc5ff;
+      color: white;
+    }
+  }
+  .selected {
+    background-color: #8cc5ff;
+    color: white;
+  }
+</style>
diff --git a/src/views/dashboard/components/PanelGroup.vue b/src/views/dashboard/components/PanelGroup.vue
index b72d289..7be90a7 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,32 @@
           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',
           permission: '/device/list'
         },
         {
@@ -67,11 +69,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 +85,10 @@
   },
   mounted() {
     this.getWater()
-    this.getWellCount()
+    // this.getWellCount()
     this.getDeviceCount()
     this.getAlarmCount()
-    this.getJobCount()
+    // this.getJobCount()
   },
   methods: {
     refresh() {
@@ -97,24 +99,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.production?parseFloat(response.data.production).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 +168,7 @@
   //   &:hover {
   //     .card-panel-icon-wrapper {
   //       color: #fff;
-        
+
   //     }
 
   //     .icon-people {
diff --git a/src/views/dashboard/components/watchAlarmBar.vue b/src/views/dashboard/components/watchAlarmBar.vue
index 13824f3..6a18ef6 100644
--- a/src/views/dashboard/components/watchAlarmBar.vue
+++ b/src/views/dashboard/components/watchAlarmBar.vue
@@ -1,9 +1,11 @@
+<!--水表告警统计-->
 <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"
@@ -18,14 +20,14 @@
         @change="fetchData"/>
     </div>
     <ve-histogram v-if="isShow" :data="chartData" :grid="grid" :title="title" :extend="extend" :settings="chartSettings"/>
-    <div class="function">
-      <el-button
-        v-for="item in areaList"
-        :key="item.id"
-        round
-        size="mini"
-        @click="areaChange(item.id)">{{ item.name }}</el-button>
-    </div>
+    <!--<div class="function">-->
+      <!--<el-button-->
+        <!--v-for="item in areaList"-->
+        <!--:key="item.id"-->
+        <!--round-->
+        <!--size="mini"-->
+        <!--@click="areaChange(item.id)">{{ item.name }}</el-button>-->
+    <!--</div>-->
   </div>
 </template>
 
@@ -38,51 +40,51 @@
 export default {
   name: 'WatchAlarmBar',
   data() {
-    this.extend = {
-      legend: {
-        show: false
-      },
-      xAxis: {
-        axisLabel: {
-          rotate: 30,
-          margin: 30,
-          textStyle: {
-            align: 'center'
-          }
-        }
-      },
-      yAxis: {
-        name: '报警次数',
-        position: 'left'
-      },
-      series: {
-        label: { show: true, position: 'top', formatter: '{c}' },
-        barWidth: 25
-      },
-      tooltip: { trigger: 'item', formatter: '{b}<br/>报警次数：{c}次' }
-    }
-    this.grid = {
-      right: 40,
-      top: 100,
-      bottom: 5
-    }
-    this.title = {
-      text: '水表告警统计'
-    }
-    this.chartSettings = {
-      itemStyle: {
-        barCategoryGap: 10
-      },
-
-      labelMap: {
-        'areaName': '分区',
-        'alarm': '报警数',
-        'warning': '预警数'
-      },
-      dimension: ['areaName'],
-      metrics: ['alarm', 'warning']
-    }
     return {
+      title:{
+        text: '水表告警统计'
+      },
+      chartSettings:{
+        itemStyle: {
+          barCategoryGap: 0
+        },
+        labelMap: {
+          'areaName': '分区',
+          'alarm': '报警数',
+          'warning': '预警数'
+        },
+        dimension: ['areaName'],
+        metrics: ['alarm', 'warning']
+      },
+      grid: {
+        right: 40,
+        top: 80,
+        bottom: 5
+      },
+      extend: {
+        legend: {
+          show: false
+        },
+        xAxis: {
+          axisLabel: {
+            rotate: 30,
+            margin: 30,
+            textStyle: {
+              align: 'center'
+            }
+          }
+        },
+        yAxis: {
+          name: '报警次数',
+          position: 'left',
+          max: 10
+        },
+        series: {
+          label: { show: true, position: 'top', formatter: '{c}' },
+          barWidth: 20
+        },
+        // tooltip: { trigger: 'item', formatter: '{b}<br/>报警次数：{c}次' }
+      },
       areaId: '',
       areaList: [],
       isShow: true,
@@ -100,43 +102,50 @@
         }
       },
       chartData: {
-        columns: ['wellTypeName', 'alarm'],
+        columns: ['areaName', 'alarm'],
         rows: []
       }
     }
   },
   mounted() {
     this.setDefaultTime('today')
-    this.fetchArea()
+    // this.fetchArea()
   },
   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()
-    },
+    // 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() {
       const params = {
-        areaId: this.areaId,
+        areaId: '110000',
         startTime: this.timeRange[0],
         endTime: this.timeRange[1]
       }
+      this.$emit('change', params)
       alarmBySecondArea(params).then(response => {
         this.isShow = false
         this.chartData.rows = response.data
+        const maxValue = Math.max.apply(Math, response.data.map(item=> {return item.alarm>item.warning?item.alarm: item.warning}))
+        if (maxValue < 10) {
+          this.extend.yAxis.max = 10
+        } else {
+          this.extend.yAxis = maxValue+1
+        }
         // this.chartData.rows = [
         //   { 'areaName': '科技楼及食堂', 'alarm': 53 },
         //   { 'areaName': 'A\\B\\C\\D\\E座', 'alarm': 78 },
@@ -186,10 +195,11 @@
     }
   }
   .statistic-container {
+
     .el-button{
       padding: 5px 10px;
     }
-    /*margin-bottom: 10px;*/
+    margin-bottom: 10px;
     text-align: center;
     .chart-tool-button {
       padding: 5px;
diff --git a/src/views/dashboard/components/waterCompare.vue b/src/views/dashboard/components/waterCompare.vue
new file mode 100644
index 0000000..8e34936
--- /dev/null
+++ b/src/views/dashboard/components/waterCompare.vue
@@ -0,0 +1,117 @@
+<!--分区用水对比图-->
+<template>
+  <div class="container">
+    <function-area ref="func" select="week" @change="fetchData"/>
+    <ve-histogram v-if="isShow" :data="chartData" :grid="grid" :title="title" :extend="extend" :settings="chartSettings"/>
+  </div>
+</template>
+
+<script>
+
+import 'echarts/lib/component/visualMap'
+import { alarmBySecondArea } from '@/api/overview'
+import { getDayTime } from '@/utils/dateutils'
+import { getDoorAreaTree } from '@/api/system/area'
+import FunctionArea from "./FunctionArea";
+export default {
+  name: 'WaterCompare',
+  components: {FunctionArea},
+  data() {
+    return {
+      title:{ text: '分区用水对比图'},
+      chartSettings:{
+        labelMap: {
+          'areaName': '分区',
+          'last': '报警数',
+          'now': '预警数'
+        },
+        dimension: ['areaName'],
+        metrics: ['last', 'now']
+      },
+      grid: {
+        right: 40,
+        top: 80,
+        bottom: 5
+      },
+      extend: {
+        legend: {
+          show: false
+        },
+        xAxis: {
+          axisLabel: {
+            rotate: 30,
+            margin: 30,
+            textStyle: {
+              align: 'center'
+            }
+          }
+        },
+        yAxis: {
+          name: '用水量(吨)',
+          position: 'left',
+          max: 10
+        },
+        series: {
+          label: { show: true, position: 'top', formatter: '{c}' },
+          barWidth: 20
+        },
+        // tooltip: { trigger: 'item', formatter: '{b}<br/>报警次数：{c}次' }
+      },
+      areaId: '',
+      areaList: [],
+      isShow: true,
+      defaultTimeRange: [],
+      chartData: {
+        columns: ['areaName', 'last', 'now'],
+        rows: []
+      },
+      nameDict:{
+        'today':['昨日用水','今日用水'],
+        'week':['近7日用水','对照时间用水',],
+        'month':['近30日用水','对照时间用水',],
+        'season':['上季度用水','本季度用水',],
+        'year':['上年度用水','本年度用水',],
+        'other':['对照时间用水','自选时间用水']
+      }
+    }
+  },
+  mounted(){
+    this.$refs.func.init()
+  },
+  methods: {
+    fetchData(timeRange) {
+      const params = {
+        areaId: '110000',
+        startTime: timeRange[0],
+        endTime: timeRange[1]
+      }
+      alarmBySecondArea(params).then(response => {
+        this.isShow = false
+        this.chartData.rows = response.data
+        const maxValue = Math.max.apply(Math, response.data.map(item=> {return item.last>item.now?item.last: item.now}))
+        if (maxValue < 10) {
+          this.extend.yAxis.max = 10
+        } else {
+          this.extend.yAxis = maxValue+1
+        }
+        // this.chartData.rows = [
+        //   { 'areaName': '科技楼及食堂', 'alarm': 53 },
+        //   { 'areaName': 'A\\B\\C\\D\\E座', 'alarm': 78 },
+        //   { 'areaName': '厂区', 'alarm': 78 }]
+        this.isShow = true
+      })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+  .container{
+    position:relative;
+    .function{
+      width:calc(100% - 120px);
+      height: 28px;
+      display: flex;
+      justify-content: center;
+    }
+  }
+</style>
diff --git a/src/views/dashboard/components/waterCountByAreaBar.vue b/src/views/dashboard/components/waterCountByAreaBar.vue
index 1bdac48..f4196f1 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"
@@ -18,14 +19,14 @@
         @change="fetchData"/>
     </div>
     <ve-histogram v-if="isShow" :data="chartData" :grid="grid" :title="title" :extend="extend" :settings="chartSettings"/>
-    <div class="function">
-      <el-button
-        v-for="item in areaList"
-        :key="item.id"
-        round
-        size="mini"
-        @click="areaChange(item.id)">{{ item.name }}</el-button>
-    </div>
+    <!--<div class="function">-->
+      <!--<el-button-->
+        <!--v-for="item in areaList"-->
+        <!--:key="item.id"-->
+        <!--round-->
+        <!--size="mini"-->
+        <!--@click="areaChange(item.id)">{{ item.name }}</el-button>-->
+    <!--</div>-->
   </div>
 </template>
 
@@ -106,8 +107,8 @@
     }
   },
   mounted() {
-    this.setDefaultTime('today')
-    this.fetchArea()
+    this.setDefaultTime('week')
+    // 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,9 @@
         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
+        const nowDayOfWeek =  6
+        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..07524f9 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: {
@@ -27,8 +39,7 @@
         text: '用水走势图'
       },
       chartSettings: {
-        labelMap: {
-        },
+        labelMap: {date:'日期'},
         metrics: [],
         dimension: ['date']
       },
@@ -52,13 +63,19 @@
     }
   },
   mounted() {
-    this.changeTime('month')
-    this.fetchArea()
+    // this.changeTime('month')
+    // this.fetchArea()
+  },
+  watch:{
+    query(val){
+      this.fetchData()
+    }
   },
   methods: {
     fetchArea() {
       getDoorAreaTree().then(response => {
         if (response.code === 200) {
+          debugger
           const area = response.data.filter(item => {
             return item.pid === '1'
           }).map(item => item.name)
@@ -73,15 +90,21 @@
       })
     },
     fetchData() {
-      countByDayFirst(this.listQuery).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
-          }
-          delete item.data
-          return item
-        })
-        this.chartData.rows = arr
+      countByDayFirst(this.query).then(response => {
+        if(response.data.length>0){
+          const arr = response.data.map((item)=> {
+            const result = {date: item.date}
+            for (let i = 0; i < item.data.length; i++) {
+              result[item.data[i].areaName] = item.data[i].count
+            }
+            return result
+          })
+          const area = response.data[0].data.map(item=>item.areaName)
+          this.chartData.columns = ['date', ...area]
+          this.chartSettings.metrics = area
+          this.chartSettings.labelMap = {'date':'日期'}
+          this.chartData.rows = arr
+        }
       })
       // 模拟数据
       // this.chartData.rows = [
@@ -126,17 +149,7 @@
 </script>
 <style lang="scss" scoped>
   .container{
-    position:relative;
-    .function{
-      /*position:absolute;*/
-      /*z-index:200;*/
-      /*bottom: 10px;*/
-      /*left: 0;*/
-      width:100%;
-      height: 28px;
-      display: flex;
-      justify-content: center;
-    }
+
   }
 </style>
 
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..a4ff85d
--- /dev/null
+++ b/src/views/dashboard/components/waterNote.vue
@@ -0,0 +1,142 @@
+<!--用水事记L -->
+<template>
+  <div class="container">
+    <div class="title">
+      青岛公司用水事记
+      <i v-if="!editMode" class="el-icon-edit edit-btn" style="float:right" @click="editNote"></i>
+      <i v-else class="el-icon-check edit-btn" style="float:right" @click="saveNote"></i>
+    </div>
+    <div class="content-div">
+      <el-scrollbar class="white-scrollbar">
+        <div v-for="(item,index) of currentList" :key="'note_'+index" class="content-line">
+          <div v-if="!editMode">{{index+1}}. {{item.content}}</div>
+          <div v-else class="edit-line">
+            <div style="margin-right: 5px">{{index+1}}. </div>
+            <el-input v-model="item.content" size="mini" maxlength="30"></el-input>
+            <div style="width: 85px;display: flex;justify-content: flex-end">
+              <i v-show="index!==0" class="el-icon-top" @click="toTop(index)"></i>
+              <i v-show="index!==currentList.length-1" class="el-icon-bottom" @click="toBottom(index)"></i>
+              <i class="el-icon-delete" @click="deleteItem(index)"></i>
+            </div>
+          </div>
+        </div>
+        <div v-if="editMode&&currentList.length<10" class="content-line">
+          <i class="el-icon-circle-plus-outline icon-btn" @click="addItem()"></i>
+        </div>
+      </el-scrollbar>
+    </div>
+  </div>
+</template>
+
+<script>
+import { getNoteList, updateNoteList } from '@/api/dashboard'
+import { getDoorAreaTree } from '@/api/system/area'
+export default {
+  name: 'WaterNote',
+  props:{
+    query: {
+      type: Object,
+      default:()=>{
+        return {
+          areaId: '',
+          startTime: '',
+          endTime: ''
+        }
+      }
+    }
+  },
+  data() {
+    return {
+      editMode: false, // 编辑模式
+      originList:[], // 原始列表
+      currentList:[] // 当前列表
+    }
+  },
+  mounted() {
+    this.fetchData()
+  },
+  methods: {
+    // 获取统计数据
+    fetchData() {
+      this.currentList = [
+        { 'content': '测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试', 'num': 1 },
+        { 'content': '测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试', 'num': 1 },
+        { 'content': '测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试', 'num': 1 },
+        { 'content': '测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试', 'num': 1 },
+        { 'content': '测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试', 'num': 1 }
+      ]
+      this.originList = JSON.parse(JSON.stringify(this.currentList))
+      // getNoteList().then(response => {
+      //   this.currentList = response.data
+      // })
+    },
+    toTop(index){
+      this.currentList[index-1] = this.currentList.splice(index,1,this.currentList[index-1])[0]
+    },
+    toBottom(index){
+      this.currentList[index] = this.currentList.splice(index+1,1,this.currentList[index])[0]
+    },
+    deleteItem(index){
+      this.currentList.splice(index,1)
+    },
+    addItem(){
+      this.currentList.push({content:'',num:99})
+    },
+    // 开启编辑
+    editNote(){
+      this.editMode = true
+    },
+    // 保存用水事记
+    saveNote(){
+      const currentList = this.currentList.map((item, index)=>{
+        return {content: item.content, num: index}
+      })
+      console.log(currentList)
+      updateNoteList(currentList).then(res=>{
+        this.editMode = false
+        this.$message.success('保存成功')
+      }).catch(e=>{
+        // this.currentList = JSON.parse(JSON.stringify(this.originList))
+      })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+  @import "@/styles/variables.scss";
+  .container{
+    position:relative;
+    height: 428px;
+    display: flex;
+    flex-direction: column;
+    .content-div{
+      height: 410px;
+      .content-line{
+        line-height: 30px;
+        font-size: 16px;
+      }
+      .edit-line{
+        width: 100%;
+        display: flex;
+        align-items: center;
+      }
+    }
+  }
+  .edit-btn, .icon-btn{
+    &:hover{
+      cursor: pointer;
+      color: $themeColor;
+    }
+  }
+</style>
+<style lang="scss">
+  .white-scrollbar{
+    height: 100%;
+    .el-scrollbar__wrap{
+      overflow-x: hidden;
+      padding: 10px 0px;
+      background-color: #FFFFFF;
+    }
+  }
+
+</style>
diff --git a/src/views/dashboard/index.vue b/src/views/dashboard/index.vue
index fdbc38a..69d09ea 100644
--- a/src/views/dashboard/index.vue
+++ b/src/views/dashboard/index.vue
@@ -1,54 +1,55 @@
 <template>
   <div class="dashboard-container" style="background-color: white">
     <panel-group ref="panelgroup"/>
-    <el-row :gutter="10">
-      <!-- 用水统计图 -->
+    <el-row>
+      <!--设备在线数量统计-->
       <el-col :span="12">
         <el-card shadow="never">
-          <water-count-by-dept-bar/>
+          <water-compare/>
+        </el-card>
+      </el-col>
+      <!--设备数量统计-->
+      <el-col v-if="hasPerm('/statics/deviceStaticsByType')" :span="12">
+        <el-card shadow="never">
+          <device-count/>
+        </el-card>
+      </el-col>
+      <!-- 用水统计图 -->
+      <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 :query="listQuery1" ref="waterCountPie"/>
         </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/>
+          <water-count-by-day :query="listQuery1" ref="waterCountDay"/>
         </el-card>
       </el-col>
 
-      <!--设备数量统计-->
-      <el-col v-if="hasPerm('/statics/deviceStaticsByType')" :span="12">
+      <!--水表报警次数统计，柱状图-->
+      <el-col v-if="hasPerm('/statics/alarmsByDay')" :span="12">
         <el-card shadow="never">
-          <device-count/>
+          <watch-alarm-bar @change="changeAlarmQuery"/>
+        </el-card>
+      </el-col>
+      <!--报警饼图统计-->
+      <el-col v-if="hasPerm('/statics/alarmsByDay')" :span="12">
+        <el-card shadow="never">
+          <alarm-count-by-dept :query="listQuery2"/>
         </el-card>
       </el-col>
     </el-row>
@@ -64,20 +65,26 @@
 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";
+import AlarmCountByDept from "./components/AlarmCountByDept";
+import WaterCompare from "./components/waterCompare";
 
 export default {
   name: 'Dashboard',
   components: {
+    WaterCompare,
+    AlarmCountByDept,
+    WaterNote,
     WatchAlarmBar,
     WaterCountByAreaBar,
     WaterCountByDay,
     WaterCountByDeptBar,
-    WaterCountByDepy,
+    WaterCountByDept,
     JobByStatus,
     AlarmByDays,
     PanelGroup,
@@ -108,12 +115,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:'110000',
+        startTime:new Date().Format('yyyy-MM-dd'),
+        endTime:new Date().Format('yyyy-MM-dd')
+      } // 分区报警查询条件
+    }
+  },
   watch: {
     needRefresh(val) {
       // 需要刷新
       if (val) {
         console.log('refresh dashboard')
-        debugger
         this.$refs.panelgroup.refresh()
       }
     }
@@ -124,6 +144,14 @@
   methods: {
     webSocket() {
       this.$store.dispatch('initWebSocket')
+    },
+    // 切换分区查询条件
+    changeWaterQuery(listQuery1){
+      this.listQuery1 = listQuery1
+    },
+    // 切换报警查询条件
+    changeAlarmQuery(listQuery2){
+      this.listQuery2 = listQuery2
     }
   }
 }
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..6ad37f1 100644
--- a/src/api/dashboard.js
+++ b/src/api/dashboard.js
@@ -0,0 +1,92 @@
+/**
+ * 井总览模块接口
+ */
+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: '/device/valve/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
+  })
+}
+
+
+// 用水事记查询
+export function getNoteList() {
+  return request({
+    // url: '/note/list',
+    url: 'waterMeterData/count',
+    method: 'get',
+    params
+  })
+}
+
+// 用水事记更新
+export function updateNoteList(params) {
+  return request({
+    // url: '/note/update',
+    url: 'waterMeterData/count',
+    method: 'post',
+    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/AlarmCountByDept.vue b/src/views/dashboard/components/AlarmCountByDept.vue
new file mode 100644
index 0000000..91df51d
--- /dev/null
+++ b/src/views/dashboard/components/AlarmCountByDept.vue
@@ -0,0 +1,80 @@
+<!--suppress ALL -->
+<template>
+  <div class="container">
+    <div style="height: 28px;margin-bottom: 10px;"/>
+    <ve-pie :data="chartData" :extend="extend" :title="title"/>
+
+  </div>
+</template>
+
+<script>
+import { alarmBySecondArea } from '@/api/overview'
+import { getDoorAreaTree } from '@/api/system/area'
+export default {
+  name: 'AlarmCountByDept',
+  props:{
+    query: {
+      type: Object,
+      default:()=>{
+        return {
+          areaId: '',
+          startTime: '',
+          endTime: ''
+        }
+      }
+    }
+  },
+  data() {
+    return {
+      chartData: {
+        columns: ['areaName', 'alarm'],
+        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': '分区',
+          'alarm': '报警数'
+        }
+      }
+    }
+  },
+  watch:{
+    query(val){
+      this.fetchData()
+    }
+  },
+  methods: {
+    // 获取统计数据
+    fetchData() {
+      alarmBySecondArea(this.query).then(response => {
+        debugger
+        this.chartData.rows = response.data
+      })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+  .container{
+
+  }
+</style>
diff --git a/src/views/dashboard/components/DeviceCount.vue b/src/views/dashboard/components/DeviceCount.vue
index 6c36bcb..453fa09 100644
--- a/src/views/dashboard/components/DeviceCount.vue
+++ b/src/views/dashboard/components/DeviceCount.vue
@@ -1,5 +1,9 @@
 <template>
-  <ve-bar :data="chartData" :grid="grid" :title="title" :extend="extend" :settings="chartSettings"/>
+  <div>
+    <div style="height: 28px;margin-bottom: 10px;"/>
+    <ve-bar :data="chartData" :grid="grid" :title="title" :extend="extend" :settings="chartSettings"/>
+  </div>
+
 </template>
 
 <script>
diff --git a/src/views/dashboard/components/FunctionArea.vue b/src/views/dashboard/components/FunctionArea.vue
new file mode 100644
index 0000000..e628c12
--- /dev/null
+++ b/src/views/dashboard/components/FunctionArea.vue
@@ -0,0 +1,128 @@
+<!--
+ * @Description:
+ * @Author: 王晓颖
+ * @Date:
+ -->
+<template>
+  <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')">本周</el-button>
+    <el-button round size="mini" @click="setDefaultTime('today')">今日</el-button>
+    <el-date-picker
+      v-model="timeRange"
+      :picker-options="pickerOptions"
+      type="daterange"
+      range-separator="至"
+      start-placeholder="开始日期"
+      end-placeholder="结束日期"
+      value-format="yyyy-MM-dd"
+      size="mini"
+      style="width:250px;margin-right: 20px"
+      @change="fetchData"/>
+  </div>
+</template>
+
+<script>
+  import { getDayTime } from '@/utils/dateutils'
+  export default {
+    name: "FunctionArea",
+    props:{
+      select:{
+        type: String,
+        default: 'today'
+      }
+    },
+    data() {
+      return {
+        timeRange: [],
+        pickerOptions: {
+          disabledDate: function(date) {
+            var oDate1 = new Date(date)
+            var oDate2 = new Date()
+            if (oDate1.getTime() > oDate2.getTime()) {
+              return true
+            } else {
+              return false
+            }
+          }
+        }
+      }
+    },
+    methods: {
+      init(){
+        this.setDefaultTime(this.select)
+      },
+      change(){
+        this.$emit('change', this.timeRange)
+      },
+      setDefaultTime(val) {
+        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
+          if (tMonth.toString().length === 1) {
+            tMonth = '0' + tMonth
+          }
+          const beginTime = tYear + '-' + tMonth + '-01'
+          const endTime = getDayTime(new Date().getTime())
+          this.timeRange = [beginTime, endTime.Format('yyyy-MM-dd')]
+        } else if (val === 'week') {
+          // const nowDayOfWeek =  new Date().getDay()-1
+          const nowDayOfWeek =  6
+          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') {
+          this.timeRange = [getDayTime(new Date().getTime()).Format('yyyy-MM-dd'), getDayTime(new Date().getTime()).Format('yyyy-MM-dd')]
+        }
+        this.change()
+      }
+    }
+  }
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  .statistic-container {
+
+    .el-button{
+      padding: 5px 10px;
+    }
+    margin-bottom: 10px;
+    text-align: center;
+    .chart-tool-button {
+      padding: 5px;
+      line-height: 16px;
+      margin-top: 5px;
+      font-size: 14px;
+    }
+    .chart-tool-button:hover {
+      background-color: #8cc5ff;
+      cursor: pointer;
+      color: white;
+    }
+    .chart-tool-button:active {
+      background-color: #8cc5ff;
+      color: white;
+    }
+  }
+  .selected {
+    background-color: #8cc5ff;
+    color: white;
+  }
+</style>
diff --git a/src/views/dashboard/components/PanelGroup.vue b/src/views/dashboard/components/PanelGroup.vue
index b72d289..7be90a7 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,32 @@
           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',
           permission: '/device/list'
         },
         {
@@ -67,11 +69,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 +85,10 @@
   },
   mounted() {
     this.getWater()
-    this.getWellCount()
+    // this.getWellCount()
     this.getDeviceCount()
     this.getAlarmCount()
-    this.getJobCount()
+    // this.getJobCount()
   },
   methods: {
     refresh() {
@@ -97,24 +99,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.production?parseFloat(response.data.production).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 +168,7 @@
   //   &:hover {
   //     .card-panel-icon-wrapper {
   //       color: #fff;
-        
+
   //     }
 
   //     .icon-people {
diff --git a/src/views/dashboard/components/watchAlarmBar.vue b/src/views/dashboard/components/watchAlarmBar.vue
index 13824f3..6a18ef6 100644
--- a/src/views/dashboard/components/watchAlarmBar.vue
+++ b/src/views/dashboard/components/watchAlarmBar.vue
@@ -1,9 +1,11 @@
+<!--水表告警统计-->
 <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"
@@ -18,14 +20,14 @@
         @change="fetchData"/>
     </div>
     <ve-histogram v-if="isShow" :data="chartData" :grid="grid" :title="title" :extend="extend" :settings="chartSettings"/>
-    <div class="function">
-      <el-button
-        v-for="item in areaList"
-        :key="item.id"
-        round
-        size="mini"
-        @click="areaChange(item.id)">{{ item.name }}</el-button>
-    </div>
+    <!--<div class="function">-->
+      <!--<el-button-->
+        <!--v-for="item in areaList"-->
+        <!--:key="item.id"-->
+        <!--round-->
+        <!--size="mini"-->
+        <!--@click="areaChange(item.id)">{{ item.name }}</el-button>-->
+    <!--</div>-->
   </div>
 </template>
 
@@ -38,51 +40,51 @@
 export default {
   name: 'WatchAlarmBar',
   data() {
-    this.extend = {
-      legend: {
-        show: false
-      },
-      xAxis: {
-        axisLabel: {
-          rotate: 30,
-          margin: 30,
-          textStyle: {
-            align: 'center'
-          }
-        }
-      },
-      yAxis: {
-        name: '报警次数',
-        position: 'left'
-      },
-      series: {
-        label: { show: true, position: 'top', formatter: '{c}' },
-        barWidth: 25
-      },
-      tooltip: { trigger: 'item', formatter: '{b}<br/>报警次数：{c}次' }
-    }
-    this.grid = {
-      right: 40,
-      top: 100,
-      bottom: 5
-    }
-    this.title = {
-      text: '水表告警统计'
-    }
-    this.chartSettings = {
-      itemStyle: {
-        barCategoryGap: 10
-      },
-
-      labelMap: {
-        'areaName': '分区',
-        'alarm': '报警数',
-        'warning': '预警数'
-      },
-      dimension: ['areaName'],
-      metrics: ['alarm', 'warning']
-    }
     return {
+      title:{
+        text: '水表告警统计'
+      },
+      chartSettings:{
+        itemStyle: {
+          barCategoryGap: 0
+        },
+        labelMap: {
+          'areaName': '分区',
+          'alarm': '报警数',
+          'warning': '预警数'
+        },
+        dimension: ['areaName'],
+        metrics: ['alarm', 'warning']
+      },
+      grid: {
+        right: 40,
+        top: 80,
+        bottom: 5
+      },
+      extend: {
+        legend: {
+          show: false
+        },
+        xAxis: {
+          axisLabel: {
+            rotate: 30,
+            margin: 30,
+            textStyle: {
+              align: 'center'
+            }
+          }
+        },
+        yAxis: {
+          name: '报警次数',
+          position: 'left',
+          max: 10
+        },
+        series: {
+          label: { show: true, position: 'top', formatter: '{c}' },
+          barWidth: 20
+        },
+        // tooltip: { trigger: 'item', formatter: '{b}<br/>报警次数：{c}次' }
+      },
       areaId: '',
       areaList: [],
       isShow: true,
@@ -100,43 +102,50 @@
         }
       },
       chartData: {
-        columns: ['wellTypeName', 'alarm'],
+        columns: ['areaName', 'alarm'],
         rows: []
       }
     }
   },
   mounted() {
     this.setDefaultTime('today')
-    this.fetchArea()
+    // this.fetchArea()
   },
   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()
-    },
+    // 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() {
       const params = {
-        areaId: this.areaId,
+        areaId: '110000',
         startTime: this.timeRange[0],
         endTime: this.timeRange[1]
       }
+      this.$emit('change', params)
       alarmBySecondArea(params).then(response => {
         this.isShow = false
         this.chartData.rows = response.data
+        const maxValue = Math.max.apply(Math, response.data.map(item=> {return item.alarm>item.warning?item.alarm: item.warning}))
+        if (maxValue < 10) {
+          this.extend.yAxis.max = 10
+        } else {
+          this.extend.yAxis = maxValue+1
+        }
         // this.chartData.rows = [
         //   { 'areaName': '科技楼及食堂', 'alarm': 53 },
         //   { 'areaName': 'A\\B\\C\\D\\E座', 'alarm': 78 },
@@ -186,10 +195,11 @@
     }
   }
   .statistic-container {
+
     .el-button{
       padding: 5px 10px;
     }
-    /*margin-bottom: 10px;*/
+    margin-bottom: 10px;
     text-align: center;
     .chart-tool-button {
       padding: 5px;
diff --git a/src/views/dashboard/components/waterCompare.vue b/src/views/dashboard/components/waterCompare.vue
new file mode 100644
index 0000000..8e34936
--- /dev/null
+++ b/src/views/dashboard/components/waterCompare.vue
@@ -0,0 +1,117 @@
+<!--分区用水对比图-->
+<template>
+  <div class="container">
+    <function-area ref="func" select="week" @change="fetchData"/>
+    <ve-histogram v-if="isShow" :data="chartData" :grid="grid" :title="title" :extend="extend" :settings="chartSettings"/>
+  </div>
+</template>
+
+<script>
+
+import 'echarts/lib/component/visualMap'
+import { alarmBySecondArea } from '@/api/overview'
+import { getDayTime } from '@/utils/dateutils'
+import { getDoorAreaTree } from '@/api/system/area'
+import FunctionArea from "./FunctionArea";
+export default {
+  name: 'WaterCompare',
+  components: {FunctionArea},
+  data() {
+    return {
+      title:{ text: '分区用水对比图'},
+      chartSettings:{
+        labelMap: {
+          'areaName': '分区',
+          'last': '报警数',
+          'now': '预警数'
+        },
+        dimension: ['areaName'],
+        metrics: ['last', 'now']
+      },
+      grid: {
+        right: 40,
+        top: 80,
+        bottom: 5
+      },
+      extend: {
+        legend: {
+          show: false
+        },
+        xAxis: {
+          axisLabel: {
+            rotate: 30,
+            margin: 30,
+            textStyle: {
+              align: 'center'
+            }
+          }
+        },
+        yAxis: {
+          name: '用水量(吨)',
+          position: 'left',
+          max: 10
+        },
+        series: {
+          label: { show: true, position: 'top', formatter: '{c}' },
+          barWidth: 20
+        },
+        // tooltip: { trigger: 'item', formatter: '{b}<br/>报警次数：{c}次' }
+      },
+      areaId: '',
+      areaList: [],
+      isShow: true,
+      defaultTimeRange: [],
+      chartData: {
+        columns: ['areaName', 'last', 'now'],
+        rows: []
+      },
+      nameDict:{
+        'today':['昨日用水','今日用水'],
+        'week':['近7日用水','对照时间用水',],
+        'month':['近30日用水','对照时间用水',],
+        'season':['上季度用水','本季度用水',],
+        'year':['上年度用水','本年度用水',],
+        'other':['对照时间用水','自选时间用水']
+      }
+    }
+  },
+  mounted(){
+    this.$refs.func.init()
+  },
+  methods: {
+    fetchData(timeRange) {
+      const params = {
+        areaId: '110000',
+        startTime: timeRange[0],
+        endTime: timeRange[1]
+      }
+      alarmBySecondArea(params).then(response => {
+        this.isShow = false
+        this.chartData.rows = response.data
+        const maxValue = Math.max.apply(Math, response.data.map(item=> {return item.last>item.now?item.last: item.now}))
+        if (maxValue < 10) {
+          this.extend.yAxis.max = 10
+        } else {
+          this.extend.yAxis = maxValue+1
+        }
+        // this.chartData.rows = [
+        //   { 'areaName': '科技楼及食堂', 'alarm': 53 },
+        //   { 'areaName': 'A\\B\\C\\D\\E座', 'alarm': 78 },
+        //   { 'areaName': '厂区', 'alarm': 78 }]
+        this.isShow = true
+      })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+  .container{
+    position:relative;
+    .function{
+      width:calc(100% - 120px);
+      height: 28px;
+      display: flex;
+      justify-content: center;
+    }
+  }
+</style>
diff --git a/src/views/dashboard/components/waterCountByAreaBar.vue b/src/views/dashboard/components/waterCountByAreaBar.vue
index 1bdac48..f4196f1 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"
@@ -18,14 +19,14 @@
         @change="fetchData"/>
     </div>
     <ve-histogram v-if="isShow" :data="chartData" :grid="grid" :title="title" :extend="extend" :settings="chartSettings"/>
-    <div class="function">
-      <el-button
-        v-for="item in areaList"
-        :key="item.id"
-        round
-        size="mini"
-        @click="areaChange(item.id)">{{ item.name }}</el-button>
-    </div>
+    <!--<div class="function">-->
+      <!--<el-button-->
+        <!--v-for="item in areaList"-->
+        <!--:key="item.id"-->
+        <!--round-->
+        <!--size="mini"-->
+        <!--@click="areaChange(item.id)">{{ item.name }}</el-button>-->
+    <!--</div>-->
   </div>
 </template>
 
@@ -106,8 +107,8 @@
     }
   },
   mounted() {
-    this.setDefaultTime('today')
-    this.fetchArea()
+    this.setDefaultTime('week')
+    // 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,9 @@
         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
+        const nowDayOfWeek =  6
+        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..07524f9 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: {
@@ -27,8 +39,7 @@
         text: '用水走势图'
       },
       chartSettings: {
-        labelMap: {
-        },
+        labelMap: {date:'日期'},
         metrics: [],
         dimension: ['date']
       },
@@ -52,13 +63,19 @@
     }
   },
   mounted() {
-    this.changeTime('month')
-    this.fetchArea()
+    // this.changeTime('month')
+    // this.fetchArea()
+  },
+  watch:{
+    query(val){
+      this.fetchData()
+    }
   },
   methods: {
     fetchArea() {
       getDoorAreaTree().then(response => {
         if (response.code === 200) {
+          debugger
           const area = response.data.filter(item => {
             return item.pid === '1'
           }).map(item => item.name)
@@ -73,15 +90,21 @@
       })
     },
     fetchData() {
-      countByDayFirst(this.listQuery).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
-          }
-          delete item.data
-          return item
-        })
-        this.chartData.rows = arr
+      countByDayFirst(this.query).then(response => {
+        if(response.data.length>0){
+          const arr = response.data.map((item)=> {
+            const result = {date: item.date}
+            for (let i = 0; i < item.data.length; i++) {
+              result[item.data[i].areaName] = item.data[i].count
+            }
+            return result
+          })
+          const area = response.data[0].data.map(item=>item.areaName)
+          this.chartData.columns = ['date', ...area]
+          this.chartSettings.metrics = area
+          this.chartSettings.labelMap = {'date':'日期'}
+          this.chartData.rows = arr
+        }
       })
       // 模拟数据
       // this.chartData.rows = [
@@ -126,17 +149,7 @@
 </script>
 <style lang="scss" scoped>
   .container{
-    position:relative;
-    .function{
-      /*position:absolute;*/
-      /*z-index:200;*/
-      /*bottom: 10px;*/
-      /*left: 0;*/
-      width:100%;
-      height: 28px;
-      display: flex;
-      justify-content: center;
-    }
+
   }
 </style>
 
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..a4ff85d
--- /dev/null
+++ b/src/views/dashboard/components/waterNote.vue
@@ -0,0 +1,142 @@
+<!--用水事记L -->
+<template>
+  <div class="container">
+    <div class="title">
+      青岛公司用水事记
+      <i v-if="!editMode" class="el-icon-edit edit-btn" style="float:right" @click="editNote"></i>
+      <i v-else class="el-icon-check edit-btn" style="float:right" @click="saveNote"></i>
+    </div>
+    <div class="content-div">
+      <el-scrollbar class="white-scrollbar">
+        <div v-for="(item,index) of currentList" :key="'note_'+index" class="content-line">
+          <div v-if="!editMode">{{index+1}}. {{item.content}}</div>
+          <div v-else class="edit-line">
+            <div style="margin-right: 5px">{{index+1}}. </div>
+            <el-input v-model="item.content" size="mini" maxlength="30"></el-input>
+            <div style="width: 85px;display: flex;justify-content: flex-end">
+              <i v-show="index!==0" class="el-icon-top" @click="toTop(index)"></i>
+              <i v-show="index!==currentList.length-1" class="el-icon-bottom" @click="toBottom(index)"></i>
+              <i class="el-icon-delete" @click="deleteItem(index)"></i>
+            </div>
+          </div>
+        </div>
+        <div v-if="editMode&&currentList.length<10" class="content-line">
+          <i class="el-icon-circle-plus-outline icon-btn" @click="addItem()"></i>
+        </div>
+      </el-scrollbar>
+    </div>
+  </div>
+</template>
+
+<script>
+import { getNoteList, updateNoteList } from '@/api/dashboard'
+import { getDoorAreaTree } from '@/api/system/area'
+export default {
+  name: 'WaterNote',
+  props:{
+    query: {
+      type: Object,
+      default:()=>{
+        return {
+          areaId: '',
+          startTime: '',
+          endTime: ''
+        }
+      }
+    }
+  },
+  data() {
+    return {
+      editMode: false, // 编辑模式
+      originList:[], // 原始列表
+      currentList:[] // 当前列表
+    }
+  },
+  mounted() {
+    this.fetchData()
+  },
+  methods: {
+    // 获取统计数据
+    fetchData() {
+      this.currentList = [
+        { 'content': '测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试', 'num': 1 },
+        { 'content': '测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试', 'num': 1 },
+        { 'content': '测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试', 'num': 1 },
+        { 'content': '测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试', 'num': 1 },
+        { 'content': '测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试', 'num': 1 }
+      ]
+      this.originList = JSON.parse(JSON.stringify(this.currentList))
+      // getNoteList().then(response => {
+      //   this.currentList = response.data
+      // })
+    },
+    toTop(index){
+      this.currentList[index-1] = this.currentList.splice(index,1,this.currentList[index-1])[0]
+    },
+    toBottom(index){
+      this.currentList[index] = this.currentList.splice(index+1,1,this.currentList[index])[0]
+    },
+    deleteItem(index){
+      this.currentList.splice(index,1)
+    },
+    addItem(){
+      this.currentList.push({content:'',num:99})
+    },
+    // 开启编辑
+    editNote(){
+      this.editMode = true
+    },
+    // 保存用水事记
+    saveNote(){
+      const currentList = this.currentList.map((item, index)=>{
+        return {content: item.content, num: index}
+      })
+      console.log(currentList)
+      updateNoteList(currentList).then(res=>{
+        this.editMode = false
+        this.$message.success('保存成功')
+      }).catch(e=>{
+        // this.currentList = JSON.parse(JSON.stringify(this.originList))
+      })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+  @import "@/styles/variables.scss";
+  .container{
+    position:relative;
+    height: 428px;
+    display: flex;
+    flex-direction: column;
+    .content-div{
+      height: 410px;
+      .content-line{
+        line-height: 30px;
+        font-size: 16px;
+      }
+      .edit-line{
+        width: 100%;
+        display: flex;
+        align-items: center;
+      }
+    }
+  }
+  .edit-btn, .icon-btn{
+    &:hover{
+      cursor: pointer;
+      color: $themeColor;
+    }
+  }
+</style>
+<style lang="scss">
+  .white-scrollbar{
+    height: 100%;
+    .el-scrollbar__wrap{
+      overflow-x: hidden;
+      padding: 10px 0px;
+      background-color: #FFFFFF;
+    }
+  }
+
+</style>
diff --git a/src/views/dashboard/index.vue b/src/views/dashboard/index.vue
index fdbc38a..69d09ea 100644
--- a/src/views/dashboard/index.vue
+++ b/src/views/dashboard/index.vue
@@ -1,54 +1,55 @@
 <template>
   <div class="dashboard-container" style="background-color: white">
     <panel-group ref="panelgroup"/>
-    <el-row :gutter="10">
-      <!-- 用水统计图 -->
+    <el-row>
+      <!--设备在线数量统计-->
       <el-col :span="12">
         <el-card shadow="never">
-          <water-count-by-dept-bar/>
+          <water-compare/>
+        </el-card>
+      </el-col>
+      <!--设备数量统计-->
+      <el-col v-if="hasPerm('/statics/deviceStaticsByType')" :span="12">
+        <el-card shadow="never">
+          <device-count/>
+        </el-card>
+      </el-col>
+      <!-- 用水统计图 -->
+      <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 :query="listQuery1" ref="waterCountPie"/>
         </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/>
+          <water-count-by-day :query="listQuery1" ref="waterCountDay"/>
         </el-card>
       </el-col>
 
-      <!--设备数量统计-->
-      <el-col v-if="hasPerm('/statics/deviceStaticsByType')" :span="12">
+      <!--水表报警次数统计，柱状图-->
+      <el-col v-if="hasPerm('/statics/alarmsByDay')" :span="12">
         <el-card shadow="never">
-          <device-count/>
+          <watch-alarm-bar @change="changeAlarmQuery"/>
+        </el-card>
+      </el-col>
+      <!--报警饼图统计-->
+      <el-col v-if="hasPerm('/statics/alarmsByDay')" :span="12">
+        <el-card shadow="never">
+          <alarm-count-by-dept :query="listQuery2"/>
         </el-card>
       </el-col>
     </el-row>
@@ -64,20 +65,26 @@
 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";
+import AlarmCountByDept from "./components/AlarmCountByDept";
+import WaterCompare from "./components/waterCompare";
 
 export default {
   name: 'Dashboard',
   components: {
+    WaterCompare,
+    AlarmCountByDept,
+    WaterNote,
     WatchAlarmBar,
     WaterCountByAreaBar,
     WaterCountByDay,
     WaterCountByDeptBar,
-    WaterCountByDepy,
+    WaterCountByDept,
     JobByStatus,
     AlarmByDays,
     PanelGroup,
@@ -108,12 +115,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:'110000',
+        startTime:new Date().Format('yyyy-MM-dd'),
+        endTime:new Date().Format('yyyy-MM-dd')
+      } // 分区报警查询条件
+    }
+  },
   watch: {
     needRefresh(val) {
       // 需要刷新
       if (val) {
         console.log('refresh dashboard')
-        debugger
         this.$refs.panelgroup.refresh()
       }
     }
@@ -124,6 +144,14 @@
   methods: {
     webSocket() {
       this.$store.dispatch('initWebSocket')
+    },
+    // 切换分区查询条件
+    changeWaterQuery(listQuery1){
+      this.listQuery1 = listQuery1
+    },
+    // 切换报警查询条件
+    changeAlarmQuery(listQuery2){
+      this.listQuery2 = listQuery2
     }
   }
 }
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..6ad37f1 100644
--- a/src/api/dashboard.js
+++ b/src/api/dashboard.js
@@ -0,0 +1,92 @@
+/**
+ * 井总览模块接口
+ */
+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: '/device/valve/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
+  })
+}
+
+
+// 用水事记查询
+export function getNoteList() {
+  return request({
+    // url: '/note/list',
+    url: 'waterMeterData/count',
+    method: 'get',
+    params
+  })
+}
+
+// 用水事记更新
+export function updateNoteList(params) {
+  return request({
+    // url: '/note/update',
+    url: 'waterMeterData/count',
+    method: 'post',
+    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/AlarmCountByDept.vue b/src/views/dashboard/components/AlarmCountByDept.vue
new file mode 100644
index 0000000..91df51d
--- /dev/null
+++ b/src/views/dashboard/components/AlarmCountByDept.vue
@@ -0,0 +1,80 @@
+<!--suppress ALL -->
+<template>
+  <div class="container">
+    <div style="height: 28px;margin-bottom: 10px;"/>
+    <ve-pie :data="chartData" :extend="extend" :title="title"/>
+
+  </div>
+</template>
+
+<script>
+import { alarmBySecondArea } from '@/api/overview'
+import { getDoorAreaTree } from '@/api/system/area'
+export default {
+  name: 'AlarmCountByDept',
+  props:{
+    query: {
+      type: Object,
+      default:()=>{
+        return {
+          areaId: '',
+          startTime: '',
+          endTime: ''
+        }
+      }
+    }
+  },
+  data() {
+    return {
+      chartData: {
+        columns: ['areaName', 'alarm'],
+        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': '分区',
+          'alarm': '报警数'
+        }
+      }
+    }
+  },
+  watch:{
+    query(val){
+      this.fetchData()
+    }
+  },
+  methods: {
+    // 获取统计数据
+    fetchData() {
+      alarmBySecondArea(this.query).then(response => {
+        debugger
+        this.chartData.rows = response.data
+      })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+  .container{
+
+  }
+</style>
diff --git a/src/views/dashboard/components/DeviceCount.vue b/src/views/dashboard/components/DeviceCount.vue
index 6c36bcb..453fa09 100644
--- a/src/views/dashboard/components/DeviceCount.vue
+++ b/src/views/dashboard/components/DeviceCount.vue
@@ -1,5 +1,9 @@
 <template>
-  <ve-bar :data="chartData" :grid="grid" :title="title" :extend="extend" :settings="chartSettings"/>
+  <div>
+    <div style="height: 28px;margin-bottom: 10px;"/>
+    <ve-bar :data="chartData" :grid="grid" :title="title" :extend="extend" :settings="chartSettings"/>
+  </div>
+
 </template>
 
 <script>
diff --git a/src/views/dashboard/components/FunctionArea.vue b/src/views/dashboard/components/FunctionArea.vue
new file mode 100644
index 0000000..e628c12
--- /dev/null
+++ b/src/views/dashboard/components/FunctionArea.vue
@@ -0,0 +1,128 @@
+<!--
+ * @Description:
+ * @Author: 王晓颖
+ * @Date:
+ -->
+<template>
+  <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')">本周</el-button>
+    <el-button round size="mini" @click="setDefaultTime('today')">今日</el-button>
+    <el-date-picker
+      v-model="timeRange"
+      :picker-options="pickerOptions"
+      type="daterange"
+      range-separator="至"
+      start-placeholder="开始日期"
+      end-placeholder="结束日期"
+      value-format="yyyy-MM-dd"
+      size="mini"
+      style="width:250px;margin-right: 20px"
+      @change="fetchData"/>
+  </div>
+</template>
+
+<script>
+  import { getDayTime } from '@/utils/dateutils'
+  export default {
+    name: "FunctionArea",
+    props:{
+      select:{
+        type: String,
+        default: 'today'
+      }
+    },
+    data() {
+      return {
+        timeRange: [],
+        pickerOptions: {
+          disabledDate: function(date) {
+            var oDate1 = new Date(date)
+            var oDate2 = new Date()
+            if (oDate1.getTime() > oDate2.getTime()) {
+              return true
+            } else {
+              return false
+            }
+          }
+        }
+      }
+    },
+    methods: {
+      init(){
+        this.setDefaultTime(this.select)
+      },
+      change(){
+        this.$emit('change', this.timeRange)
+      },
+      setDefaultTime(val) {
+        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
+          if (tMonth.toString().length === 1) {
+            tMonth = '0' + tMonth
+          }
+          const beginTime = tYear + '-' + tMonth + '-01'
+          const endTime = getDayTime(new Date().getTime())
+          this.timeRange = [beginTime, endTime.Format('yyyy-MM-dd')]
+        } else if (val === 'week') {
+          // const nowDayOfWeek =  new Date().getDay()-1
+          const nowDayOfWeek =  6
+          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') {
+          this.timeRange = [getDayTime(new Date().getTime()).Format('yyyy-MM-dd'), getDayTime(new Date().getTime()).Format('yyyy-MM-dd')]
+        }
+        this.change()
+      }
+    }
+  }
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  .statistic-container {
+
+    .el-button{
+      padding: 5px 10px;
+    }
+    margin-bottom: 10px;
+    text-align: center;
+    .chart-tool-button {
+      padding: 5px;
+      line-height: 16px;
+      margin-top: 5px;
+      font-size: 14px;
+    }
+    .chart-tool-button:hover {
+      background-color: #8cc5ff;
+      cursor: pointer;
+      color: white;
+    }
+    .chart-tool-button:active {
+      background-color: #8cc5ff;
+      color: white;
+    }
+  }
+  .selected {
+    background-color: #8cc5ff;
+    color: white;
+  }
+</style>
diff --git a/src/views/dashboard/components/PanelGroup.vue b/src/views/dashboard/components/PanelGroup.vue
index b72d289..7be90a7 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,32 @@
           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',
           permission: '/device/list'
         },
         {
@@ -67,11 +69,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 +85,10 @@
   },
   mounted() {
     this.getWater()
-    this.getWellCount()
+    // this.getWellCount()
     this.getDeviceCount()
     this.getAlarmCount()
-    this.getJobCount()
+    // this.getJobCount()
   },
   methods: {
     refresh() {
@@ -97,24 +99,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.production?parseFloat(response.data.production).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 +168,7 @@
   //   &:hover {
   //     .card-panel-icon-wrapper {
   //       color: #fff;
-        
+
   //     }
 
   //     .icon-people {
diff --git a/src/views/dashboard/components/watchAlarmBar.vue b/src/views/dashboard/components/watchAlarmBar.vue
index 13824f3..6a18ef6 100644
--- a/src/views/dashboard/components/watchAlarmBar.vue
+++ b/src/views/dashboard/components/watchAlarmBar.vue
@@ -1,9 +1,11 @@
+<!--水表告警统计-->
 <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"
@@ -18,14 +20,14 @@
         @change="fetchData"/>
     </div>
     <ve-histogram v-if="isShow" :data="chartData" :grid="grid" :title="title" :extend="extend" :settings="chartSettings"/>
-    <div class="function">
-      <el-button
-        v-for="item in areaList"
-        :key="item.id"
-        round
-        size="mini"
-        @click="areaChange(item.id)">{{ item.name }}</el-button>
-    </div>
+    <!--<div class="function">-->
+      <!--<el-button-->
+        <!--v-for="item in areaList"-->
+        <!--:key="item.id"-->
+        <!--round-->
+        <!--size="mini"-->
+        <!--@click="areaChange(item.id)">{{ item.name }}</el-button>-->
+    <!--</div>-->
   </div>
 </template>
 
@@ -38,51 +40,51 @@
 export default {
   name: 'WatchAlarmBar',
   data() {
-    this.extend = {
-      legend: {
-        show: false
-      },
-      xAxis: {
-        axisLabel: {
-          rotate: 30,
-          margin: 30,
-          textStyle: {
-            align: 'center'
-          }
-        }
-      },
-      yAxis: {
-        name: '报警次数',
-        position: 'left'
-      },
-      series: {
-        label: { show: true, position: 'top', formatter: '{c}' },
-        barWidth: 25
-      },
-      tooltip: { trigger: 'item', formatter: '{b}<br/>报警次数：{c}次' }
-    }
-    this.grid = {
-      right: 40,
-      top: 100,
-      bottom: 5
-    }
-    this.title = {
-      text: '水表告警统计'
-    }
-    this.chartSettings = {
-      itemStyle: {
-        barCategoryGap: 10
-      },
-
-      labelMap: {
-        'areaName': '分区',
-        'alarm': '报警数',
-        'warning': '预警数'
-      },
-      dimension: ['areaName'],
-      metrics: ['alarm', 'warning']
-    }
     return {
+      title:{
+        text: '水表告警统计'
+      },
+      chartSettings:{
+        itemStyle: {
+          barCategoryGap: 0
+        },
+        labelMap: {
+          'areaName': '分区',
+          'alarm': '报警数',
+          'warning': '预警数'
+        },
+        dimension: ['areaName'],
+        metrics: ['alarm', 'warning']
+      },
+      grid: {
+        right: 40,
+        top: 80,
+        bottom: 5
+      },
+      extend: {
+        legend: {
+          show: false
+        },
+        xAxis: {
+          axisLabel: {
+            rotate: 30,
+            margin: 30,
+            textStyle: {
+              align: 'center'
+            }
+          }
+        },
+        yAxis: {
+          name: '报警次数',
+          position: 'left',
+          max: 10
+        },
+        series: {
+          label: { show: true, position: 'top', formatter: '{c}' },
+          barWidth: 20
+        },
+        // tooltip: { trigger: 'item', formatter: '{b}<br/>报警次数：{c}次' }
+      },
       areaId: '',
       areaList: [],
       isShow: true,
@@ -100,43 +102,50 @@
         }
       },
       chartData: {
-        columns: ['wellTypeName', 'alarm'],
+        columns: ['areaName', 'alarm'],
         rows: []
       }
     }
   },
   mounted() {
     this.setDefaultTime('today')
-    this.fetchArea()
+    // this.fetchArea()
   },
   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()
-    },
+    // 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() {
       const params = {
-        areaId: this.areaId,
+        areaId: '110000',
         startTime: this.timeRange[0],
         endTime: this.timeRange[1]
       }
+      this.$emit('change', params)
       alarmBySecondArea(params).then(response => {
         this.isShow = false
         this.chartData.rows = response.data
+        const maxValue = Math.max.apply(Math, response.data.map(item=> {return item.alarm>item.warning?item.alarm: item.warning}))
+        if (maxValue < 10) {
+          this.extend.yAxis.max = 10
+        } else {
+          this.extend.yAxis = maxValue+1
+        }
         // this.chartData.rows = [
         //   { 'areaName': '科技楼及食堂', 'alarm': 53 },
         //   { 'areaName': 'A\\B\\C\\D\\E座', 'alarm': 78 },
@@ -186,10 +195,11 @@
     }
   }
   .statistic-container {
+
     .el-button{
       padding: 5px 10px;
     }
-    /*margin-bottom: 10px;*/
+    margin-bottom: 10px;
     text-align: center;
     .chart-tool-button {
       padding: 5px;
diff --git a/src/views/dashboard/components/waterCompare.vue b/src/views/dashboard/components/waterCompare.vue
new file mode 100644
index 0000000..8e34936
--- /dev/null
+++ b/src/views/dashboard/components/waterCompare.vue
@@ -0,0 +1,117 @@
+<!--分区用水对比图-->
+<template>
+  <div class="container">
+    <function-area ref="func" select="week" @change="fetchData"/>
+    <ve-histogram v-if="isShow" :data="chartData" :grid="grid" :title="title" :extend="extend" :settings="chartSettings"/>
+  </div>
+</template>
+
+<script>
+
+import 'echarts/lib/component/visualMap'
+import { alarmBySecondArea } from '@/api/overview'
+import { getDayTime } from '@/utils/dateutils'
+import { getDoorAreaTree } from '@/api/system/area'
+import FunctionArea from "./FunctionArea";
+export default {
+  name: 'WaterCompare',
+  components: {FunctionArea},
+  data() {
+    return {
+      title:{ text: '分区用水对比图'},
+      chartSettings:{
+        labelMap: {
+          'areaName': '分区',
+          'last': '报警数',
+          'now': '预警数'
+        },
+        dimension: ['areaName'],
+        metrics: ['last', 'now']
+      },
+      grid: {
+        right: 40,
+        top: 80,
+        bottom: 5
+      },
+      extend: {
+        legend: {
+          show: false
+        },
+        xAxis: {
+          axisLabel: {
+            rotate: 30,
+            margin: 30,
+            textStyle: {
+              align: 'center'
+            }
+          }
+        },
+        yAxis: {
+          name: '用水量(吨)',
+          position: 'left',
+          max: 10
+        },
+        series: {
+          label: { show: true, position: 'top', formatter: '{c}' },
+          barWidth: 20
+        },
+        // tooltip: { trigger: 'item', formatter: '{b}<br/>报警次数：{c}次' }
+      },
+      areaId: '',
+      areaList: [],
+      isShow: true,
+      defaultTimeRange: [],
+      chartData: {
+        columns: ['areaName', 'last', 'now'],
+        rows: []
+      },
+      nameDict:{
+        'today':['昨日用水','今日用水'],
+        'week':['近7日用水','对照时间用水',],
+        'month':['近30日用水','对照时间用水',],
+        'season':['上季度用水','本季度用水',],
+        'year':['上年度用水','本年度用水',],
+        'other':['对照时间用水','自选时间用水']
+      }
+    }
+  },
+  mounted(){
+    this.$refs.func.init()
+  },
+  methods: {
+    fetchData(timeRange) {
+      const params = {
+        areaId: '110000',
+        startTime: timeRange[0],
+        endTime: timeRange[1]
+      }
+      alarmBySecondArea(params).then(response => {
+        this.isShow = false
+        this.chartData.rows = response.data
+        const maxValue = Math.max.apply(Math, response.data.map(item=> {return item.last>item.now?item.last: item.now}))
+        if (maxValue < 10) {
+          this.extend.yAxis.max = 10
+        } else {
+          this.extend.yAxis = maxValue+1
+        }
+        // this.chartData.rows = [
+        //   { 'areaName': '科技楼及食堂', 'alarm': 53 },
+        //   { 'areaName': 'A\\B\\C\\D\\E座', 'alarm': 78 },
+        //   { 'areaName': '厂区', 'alarm': 78 }]
+        this.isShow = true
+      })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+  .container{
+    position:relative;
+    .function{
+      width:calc(100% - 120px);
+      height: 28px;
+      display: flex;
+      justify-content: center;
+    }
+  }
+</style>
diff --git a/src/views/dashboard/components/waterCountByAreaBar.vue b/src/views/dashboard/components/waterCountByAreaBar.vue
index 1bdac48..f4196f1 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"
@@ -18,14 +19,14 @@
         @change="fetchData"/>
     </div>
     <ve-histogram v-if="isShow" :data="chartData" :grid="grid" :title="title" :extend="extend" :settings="chartSettings"/>
-    <div class="function">
-      <el-button
-        v-for="item in areaList"
-        :key="item.id"
-        round
-        size="mini"
-        @click="areaChange(item.id)">{{ item.name }}</el-button>
-    </div>
+    <!--<div class="function">-->
+      <!--<el-button-->
+        <!--v-for="item in areaList"-->
+        <!--:key="item.id"-->
+        <!--round-->
+        <!--size="mini"-->
+        <!--@click="areaChange(item.id)">{{ item.name }}</el-button>-->
+    <!--</div>-->
   </div>
 </template>
 
@@ -106,8 +107,8 @@
     }
   },
   mounted() {
-    this.setDefaultTime('today')
-    this.fetchArea()
+    this.setDefaultTime('week')
+    // 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,9 @@
         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
+        const nowDayOfWeek =  6
+        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..07524f9 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: {
@@ -27,8 +39,7 @@
         text: '用水走势图'
       },
       chartSettings: {
-        labelMap: {
-        },
+        labelMap: {date:'日期'},
         metrics: [],
         dimension: ['date']
       },
@@ -52,13 +63,19 @@
     }
   },
   mounted() {
-    this.changeTime('month')
-    this.fetchArea()
+    // this.changeTime('month')
+    // this.fetchArea()
+  },
+  watch:{
+    query(val){
+      this.fetchData()
+    }
   },
   methods: {
     fetchArea() {
       getDoorAreaTree().then(response => {
         if (response.code === 200) {
+          debugger
           const area = response.data.filter(item => {
             return item.pid === '1'
           }).map(item => item.name)
@@ -73,15 +90,21 @@
       })
     },
     fetchData() {
-      countByDayFirst(this.listQuery).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
-          }
-          delete item.data
-          return item
-        })
-        this.chartData.rows = arr
+      countByDayFirst(this.query).then(response => {
+        if(response.data.length>0){
+          const arr = response.data.map((item)=> {
+            const result = {date: item.date}
+            for (let i = 0; i < item.data.length; i++) {
+              result[item.data[i].areaName] = item.data[i].count
+            }
+            return result
+          })
+          const area = response.data[0].data.map(item=>item.areaName)
+          this.chartData.columns = ['date', ...area]
+          this.chartSettings.metrics = area
+          this.chartSettings.labelMap = {'date':'日期'}
+          this.chartData.rows = arr
+        }
       })
       // 模拟数据
       // this.chartData.rows = [
@@ -126,17 +149,7 @@
 </script>
 <style lang="scss" scoped>
   .container{
-    position:relative;
-    .function{
-      /*position:absolute;*/
-      /*z-index:200;*/
-      /*bottom: 10px;*/
-      /*left: 0;*/
-      width:100%;
-      height: 28px;
-      display: flex;
-      justify-content: center;
-    }
+
   }
 </style>
 
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..a4ff85d
--- /dev/null
+++ b/src/views/dashboard/components/waterNote.vue
@@ -0,0 +1,142 @@
+<!--用水事记L -->
+<template>
+  <div class="container">
+    <div class="title">
+      青岛公司用水事记
+      <i v-if="!editMode" class="el-icon-edit edit-btn" style="float:right" @click="editNote"></i>
+      <i v-else class="el-icon-check edit-btn" style="float:right" @click="saveNote"></i>
+    </div>
+    <div class="content-div">
+      <el-scrollbar class="white-scrollbar">
+        <div v-for="(item,index) of currentList" :key="'note_'+index" class="content-line">
+          <div v-if="!editMode">{{index+1}}. {{item.content}}</div>
+          <div v-else class="edit-line">
+            <div style="margin-right: 5px">{{index+1}}. </div>
+            <el-input v-model="item.content" size="mini" maxlength="30"></el-input>
+            <div style="width: 85px;display: flex;justify-content: flex-end">
+              <i v-show="index!==0" class="el-icon-top" @click="toTop(index)"></i>
+              <i v-show="index!==currentList.length-1" class="el-icon-bottom" @click="toBottom(index)"></i>
+              <i class="el-icon-delete" @click="deleteItem(index)"></i>
+            </div>
+          </div>
+        </div>
+        <div v-if="editMode&&currentList.length<10" class="content-line">
+          <i class="el-icon-circle-plus-outline icon-btn" @click="addItem()"></i>
+        </div>
+      </el-scrollbar>
+    </div>
+  </div>
+</template>
+
+<script>
+import { getNoteList, updateNoteList } from '@/api/dashboard'
+import { getDoorAreaTree } from '@/api/system/area'
+export default {
+  name: 'WaterNote',
+  props:{
+    query: {
+      type: Object,
+      default:()=>{
+        return {
+          areaId: '',
+          startTime: '',
+          endTime: ''
+        }
+      }
+    }
+  },
+  data() {
+    return {
+      editMode: false, // 编辑模式
+      originList:[], // 原始列表
+      currentList:[] // 当前列表
+    }
+  },
+  mounted() {
+    this.fetchData()
+  },
+  methods: {
+    // 获取统计数据
+    fetchData() {
+      this.currentList = [
+        { 'content': '测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试', 'num': 1 },
+        { 'content': '测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试', 'num': 1 },
+        { 'content': '测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试', 'num': 1 },
+        { 'content': '测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试', 'num': 1 },
+        { 'content': '测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试', 'num': 1 }
+      ]
+      this.originList = JSON.parse(JSON.stringify(this.currentList))
+      // getNoteList().then(response => {
+      //   this.currentList = response.data
+      // })
+    },
+    toTop(index){
+      this.currentList[index-1] = this.currentList.splice(index,1,this.currentList[index-1])[0]
+    },
+    toBottom(index){
+      this.currentList[index] = this.currentList.splice(index+1,1,this.currentList[index])[0]
+    },
+    deleteItem(index){
+      this.currentList.splice(index,1)
+    },
+    addItem(){
+      this.currentList.push({content:'',num:99})
+    },
+    // 开启编辑
+    editNote(){
+      this.editMode = true
+    },
+    // 保存用水事记
+    saveNote(){
+      const currentList = this.currentList.map((item, index)=>{
+        return {content: item.content, num: index}
+      })
+      console.log(currentList)
+      updateNoteList(currentList).then(res=>{
+        this.editMode = false
+        this.$message.success('保存成功')
+      }).catch(e=>{
+        // this.currentList = JSON.parse(JSON.stringify(this.originList))
+      })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+  @import "@/styles/variables.scss";
+  .container{
+    position:relative;
+    height: 428px;
+    display: flex;
+    flex-direction: column;
+    .content-div{
+      height: 410px;
+      .content-line{
+        line-height: 30px;
+        font-size: 16px;
+      }
+      .edit-line{
+        width: 100%;
+        display: flex;
+        align-items: center;
+      }
+    }
+  }
+  .edit-btn, .icon-btn{
+    &:hover{
+      cursor: pointer;
+      color: $themeColor;
+    }
+  }
+</style>
+<style lang="scss">
+  .white-scrollbar{
+    height: 100%;
+    .el-scrollbar__wrap{
+      overflow-x: hidden;
+      padding: 10px 0px;
+      background-color: #FFFFFF;
+    }
+  }
+
+</style>
diff --git a/src/views/dashboard/index.vue b/src/views/dashboard/index.vue
index fdbc38a..69d09ea 100644
--- a/src/views/dashboard/index.vue
+++ b/src/views/dashboard/index.vue
@@ -1,54 +1,55 @@
 <template>
   <div class="dashboard-container" style="background-color: white">
     <panel-group ref="panelgroup"/>
-    <el-row :gutter="10">
-      <!-- 用水统计图 -->
+    <el-row>
+      <!--设备在线数量统计-->
       <el-col :span="12">
         <el-card shadow="never">
-          <water-count-by-dept-bar/>
+          <water-compare/>
+        </el-card>
+      </el-col>
+      <!--设备数量统计-->
+      <el-col v-if="hasPerm('/statics/deviceStaticsByType')" :span="12">
+        <el-card shadow="never">
+          <device-count/>
+        </el-card>
+      </el-col>
+      <!-- 用水统计图 -->
+      <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 :query="listQuery1" ref="waterCountPie"/>
         </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/>
+          <water-count-by-day :query="listQuery1" ref="waterCountDay"/>
         </el-card>
       </el-col>
 
-      <!--设备数量统计-->
-      <el-col v-if="hasPerm('/statics/deviceStaticsByType')" :span="12">
+      <!--水表报警次数统计，柱状图-->
+      <el-col v-if="hasPerm('/statics/alarmsByDay')" :span="12">
         <el-card shadow="never">
-          <device-count/>
+          <watch-alarm-bar @change="changeAlarmQuery"/>
+        </el-card>
+      </el-col>
+      <!--报警饼图统计-->
+      <el-col v-if="hasPerm('/statics/alarmsByDay')" :span="12">
+        <el-card shadow="never">
+          <alarm-count-by-dept :query="listQuery2"/>
         </el-card>
       </el-col>
     </el-row>
@@ -64,20 +65,26 @@
 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";
+import AlarmCountByDept from "./components/AlarmCountByDept";
+import WaterCompare from "./components/waterCompare";
 
 export default {
   name: 'Dashboard',
   components: {
+    WaterCompare,
+    AlarmCountByDept,
+    WaterNote,
     WatchAlarmBar,
     WaterCountByAreaBar,
     WaterCountByDay,
     WaterCountByDeptBar,
-    WaterCountByDepy,
+    WaterCountByDept,
     JobByStatus,
     AlarmByDays,
     PanelGroup,
@@ -108,12 +115,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:'110000',
+        startTime:new Date().Format('yyyy-MM-dd'),
+        endTime:new Date().Format('yyyy-MM-dd')
+      } // 分区报警查询条件
+    }
+  },
   watch: {
     needRefresh(val) {
       // 需要刷新
       if (val) {
         console.log('refresh dashboard')
-        debugger
         this.$refs.panelgroup.refresh()
       }
     }
@@ -124,6 +144,14 @@
   methods: {
     webSocket() {
       this.$store.dispatch('initWebSocket')
+    },
+    // 切换分区查询条件
+    changeWaterQuery(listQuery1){
+      this.listQuery1 = listQuery1
+    },
+    // 切换报警查询条件
+    changeAlarmQuery(listQuery2){
+      this.listQuery2 = listQuery2
     }
   }
 }
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..6ad37f1 100644
--- a/src/api/dashboard.js
+++ b/src/api/dashboard.js
@@ -0,0 +1,92 @@
+/**
+ * 井总览模块接口
+ */
+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: '/device/valve/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
+  })
+}
+
+
+// 用水事记查询
+export function getNoteList() {
+  return request({
+    // url: '/note/list',
+    url: 'waterMeterData/count',
+    method: 'get',
+    params
+  })
+}
+
+// 用水事记更新
+export function updateNoteList(params) {
+  return request({
+    // url: '/note/update',
+    url: 'waterMeterData/count',
+    method: 'post',
+    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/AlarmCountByDept.vue b/src/views/dashboard/components/AlarmCountByDept.vue
new file mode 100644
index 0000000..91df51d
--- /dev/null
+++ b/src/views/dashboard/components/AlarmCountByDept.vue
@@ -0,0 +1,80 @@
+<!--suppress ALL -->
+<template>
+  <div class="container">
+    <div style="height: 28px;margin-bottom: 10px;"/>
+    <ve-pie :data="chartData" :extend="extend" :title="title"/>
+
+  </div>
+</template>
+
+<script>
+import { alarmBySecondArea } from '@/api/overview'
+import { getDoorAreaTree } from '@/api/system/area'
+export default {
+  name: 'AlarmCountByDept',
+  props:{
+    query: {
+      type: Object,
+      default:()=>{
+        return {
+          areaId: '',
+          startTime: '',
+          endTime: ''
+        }
+      }
+    }
+  },
+  data() {
+    return {
+      chartData: {
+        columns: ['areaName', 'alarm'],
+        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': '分区',
+          'alarm': '报警数'
+        }
+      }
+    }
+  },
+  watch:{
+    query(val){
+      this.fetchData()
+    }
+  },
+  methods: {
+    // 获取统计数据
+    fetchData() {
+      alarmBySecondArea(this.query).then(response => {
+        debugger
+        this.chartData.rows = response.data
+      })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+  .container{
+
+  }
+</style>
diff --git a/src/views/dashboard/components/DeviceCount.vue b/src/views/dashboard/components/DeviceCount.vue
index 6c36bcb..453fa09 100644
--- a/src/views/dashboard/components/DeviceCount.vue
+++ b/src/views/dashboard/components/DeviceCount.vue
@@ -1,5 +1,9 @@
 <template>
-  <ve-bar :data="chartData" :grid="grid" :title="title" :extend="extend" :settings="chartSettings"/>
+  <div>
+    <div style="height: 28px;margin-bottom: 10px;"/>
+    <ve-bar :data="chartData" :grid="grid" :title="title" :extend="extend" :settings="chartSettings"/>
+  </div>
+
 </template>
 
 <script>
diff --git a/src/views/dashboard/components/FunctionArea.vue b/src/views/dashboard/components/FunctionArea.vue
new file mode 100644
index 0000000..e628c12
--- /dev/null
+++ b/src/views/dashboard/components/FunctionArea.vue
@@ -0,0 +1,128 @@
+<!--
+ * @Description:
+ * @Author: 王晓颖
+ * @Date:
+ -->
+<template>
+  <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')">本周</el-button>
+    <el-button round size="mini" @click="setDefaultTime('today')">今日</el-button>
+    <el-date-picker
+      v-model="timeRange"
+      :picker-options="pickerOptions"
+      type="daterange"
+      range-separator="至"
+      start-placeholder="开始日期"
+      end-placeholder="结束日期"
+      value-format="yyyy-MM-dd"
+      size="mini"
+      style="width:250px;margin-right: 20px"
+      @change="fetchData"/>
+  </div>
+</template>
+
+<script>
+  import { getDayTime } from '@/utils/dateutils'
+  export default {
+    name: "FunctionArea",
+    props:{
+      select:{
+        type: String,
+        default: 'today'
+      }
+    },
+    data() {
+      return {
+        timeRange: [],
+        pickerOptions: {
+          disabledDate: function(date) {
+            var oDate1 = new Date(date)
+            var oDate2 = new Date()
+            if (oDate1.getTime() > oDate2.getTime()) {
+              return true
+            } else {
+              return false
+            }
+          }
+        }
+      }
+    },
+    methods: {
+      init(){
+        this.setDefaultTime(this.select)
+      },
+      change(){
+        this.$emit('change', this.timeRange)
+      },
+      setDefaultTime(val) {
+        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
+          if (tMonth.toString().length === 1) {
+            tMonth = '0' + tMonth
+          }
+          const beginTime = tYear + '-' + tMonth + '-01'
+          const endTime = getDayTime(new Date().getTime())
+          this.timeRange = [beginTime, endTime.Format('yyyy-MM-dd')]
+        } else if (val === 'week') {
+          // const nowDayOfWeek =  new Date().getDay()-1
+          const nowDayOfWeek =  6
+          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') {
+          this.timeRange = [getDayTime(new Date().getTime()).Format('yyyy-MM-dd'), getDayTime(new Date().getTime()).Format('yyyy-MM-dd')]
+        }
+        this.change()
+      }
+    }
+  }
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  .statistic-container {
+
+    .el-button{
+      padding: 5px 10px;
+    }
+    margin-bottom: 10px;
+    text-align: center;
+    .chart-tool-button {
+      padding: 5px;
+      line-height: 16px;
+      margin-top: 5px;
+      font-size: 14px;
+    }
+    .chart-tool-button:hover {
+      background-color: #8cc5ff;
+      cursor: pointer;
+      color: white;
+    }
+    .chart-tool-button:active {
+      background-color: #8cc5ff;
+      color: white;
+    }
+  }
+  .selected {
+    background-color: #8cc5ff;
+    color: white;
+  }
+</style>
diff --git a/src/views/dashboard/components/PanelGroup.vue b/src/views/dashboard/components/PanelGroup.vue
index b72d289..7be90a7 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,32 @@
           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',
           permission: '/device/list'
         },
         {
@@ -67,11 +69,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 +85,10 @@
   },
   mounted() {
     this.getWater()
-    this.getWellCount()
+    // this.getWellCount()
     this.getDeviceCount()
     this.getAlarmCount()
-    this.getJobCount()
+    // this.getJobCount()
   },
   methods: {
     refresh() {
@@ -97,24 +99,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.production?parseFloat(response.data.production).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 +168,7 @@
   //   &:hover {
   //     .card-panel-icon-wrapper {
   //       color: #fff;
-        
+
   //     }
 
   //     .icon-people {
diff --git a/src/views/dashboard/components/watchAlarmBar.vue b/src/views/dashboard/components/watchAlarmBar.vue
index 13824f3..6a18ef6 100644
--- a/src/views/dashboard/components/watchAlarmBar.vue
+++ b/src/views/dashboard/components/watchAlarmBar.vue
@@ -1,9 +1,11 @@
+<!--水表告警统计-->
 <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"
@@ -18,14 +20,14 @@
         @change="fetchData"/>
     </div>
     <ve-histogram v-if="isShow" :data="chartData" :grid="grid" :title="title" :extend="extend" :settings="chartSettings"/>
-    <div class="function">
-      <el-button
-        v-for="item in areaList"
-        :key="item.id"
-        round
-        size="mini"
-        @click="areaChange(item.id)">{{ item.name }}</el-button>
-    </div>
+    <!--<div class="function">-->
+      <!--<el-button-->
+        <!--v-for="item in areaList"-->
+        <!--:key="item.id"-->
+        <!--round-->
+        <!--size="mini"-->
+        <!--@click="areaChange(item.id)">{{ item.name }}</el-button>-->
+    <!--</div>-->
   </div>
 </template>
 
@@ -38,51 +40,51 @@
 export default {
   name: 'WatchAlarmBar',
   data() {
-    this.extend = {
-      legend: {
-        show: false
-      },
-      xAxis: {
-        axisLabel: {
-          rotate: 30,
-          margin: 30,
-          textStyle: {
-            align: 'center'
-          }
-        }
-      },
-      yAxis: {
-        name: '报警次数',
-        position: 'left'
-      },
-      series: {
-        label: { show: true, position: 'top', formatter: '{c}' },
-        barWidth: 25
-      },
-      tooltip: { trigger: 'item', formatter: '{b}<br/>报警次数：{c}次' }
-    }
-    this.grid = {
-      right: 40,
-      top: 100,
-      bottom: 5
-    }
-    this.title = {
-      text: '水表告警统计'
-    }
-    this.chartSettings = {
-      itemStyle: {
-        barCategoryGap: 10
-      },
-
-      labelMap: {
-        'areaName': '分区',
-        'alarm': '报警数',
-        'warning': '预警数'
-      },
-      dimension: ['areaName'],
-      metrics: ['alarm', 'warning']
-    }
     return {
+      title:{
+        text: '水表告警统计'
+      },
+      chartSettings:{
+        itemStyle: {
+          barCategoryGap: 0
+        },
+        labelMap: {
+          'areaName': '分区',
+          'alarm': '报警数',
+          'warning': '预警数'
+        },
+        dimension: ['areaName'],
+        metrics: ['alarm', 'warning']
+      },
+      grid: {
+        right: 40,
+        top: 80,
+        bottom: 5
+      },
+      extend: {
+        legend: {
+          show: false
+        },
+        xAxis: {
+          axisLabel: {
+            rotate: 30,
+            margin: 30,
+            textStyle: {
+              align: 'center'
+            }
+          }
+        },
+        yAxis: {
+          name: '报警次数',
+          position: 'left',
+          max: 10
+        },
+        series: {
+          label: { show: true, position: 'top', formatter: '{c}' },
+          barWidth: 20
+        },
+        // tooltip: { trigger: 'item', formatter: '{b}<br/>报警次数：{c}次' }
+      },
       areaId: '',
       areaList: [],
       isShow: true,
@@ -100,43 +102,50 @@
         }
       },
       chartData: {
-        columns: ['wellTypeName', 'alarm'],
+        columns: ['areaName', 'alarm'],
         rows: []
       }
     }
   },
   mounted() {
     this.setDefaultTime('today')
-    this.fetchArea()
+    // this.fetchArea()
   },
   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()
-    },
+    // 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() {
       const params = {
-        areaId: this.areaId,
+        areaId: '110000',
         startTime: this.timeRange[0],
         endTime: this.timeRange[1]
       }
+      this.$emit('change', params)
       alarmBySecondArea(params).then(response => {
         this.isShow = false
         this.chartData.rows = response.data
+        const maxValue = Math.max.apply(Math, response.data.map(item=> {return item.alarm>item.warning?item.alarm: item.warning}))
+        if (maxValue < 10) {
+          this.extend.yAxis.max = 10
+        } else {
+          this.extend.yAxis = maxValue+1
+        }
         // this.chartData.rows = [
         //   { 'areaName': '科技楼及食堂', 'alarm': 53 },
         //   { 'areaName': 'A\\B\\C\\D\\E座', 'alarm': 78 },
@@ -186,10 +195,11 @@
     }
   }
   .statistic-container {
+
     .el-button{
       padding: 5px 10px;
     }
-    /*margin-bottom: 10px;*/
+    margin-bottom: 10px;
     text-align: center;
     .chart-tool-button {
       padding: 5px;
diff --git a/src/views/dashboard/components/waterCompare.vue b/src/views/dashboard/components/waterCompare.vue
new file mode 100644
index 0000000..8e34936
--- /dev/null
+++ b/src/views/dashboard/components/waterCompare.vue
@@ -0,0 +1,117 @@
+<!--分区用水对比图-->
+<template>
+  <div class="container">
+    <function-area ref="func" select="week" @change="fetchData"/>
+    <ve-histogram v-if="isShow" :data="chartData" :grid="grid" :title="title" :extend="extend" :settings="chartSettings"/>
+  </div>
+</template>
+
+<script>
+
+import 'echarts/lib/component/visualMap'
+import { alarmBySecondArea } from '@/api/overview'
+import { getDayTime } from '@/utils/dateutils'
+import { getDoorAreaTree } from '@/api/system/area'
+import FunctionArea from "./FunctionArea";
+export default {
+  name: 'WaterCompare',
+  components: {FunctionArea},
+  data() {
+    return {
+      title:{ text: '分区用水对比图'},
+      chartSettings:{
+        labelMap: {
+          'areaName': '分区',
+          'last': '报警数',
+          'now': '预警数'
+        },
+        dimension: ['areaName'],
+        metrics: ['last', 'now']
+      },
+      grid: {
+        right: 40,
+        top: 80,
+        bottom: 5
+      },
+      extend: {
+        legend: {
+          show: false
+        },
+        xAxis: {
+          axisLabel: {
+            rotate: 30,
+            margin: 30,
+            textStyle: {
+              align: 'center'
+            }
+          }
+        },
+        yAxis: {
+          name: '用水量(吨)',
+          position: 'left',
+          max: 10
+        },
+        series: {
+          label: { show: true, position: 'top', formatter: '{c}' },
+          barWidth: 20
+        },
+        // tooltip: { trigger: 'item', formatter: '{b}<br/>报警次数：{c}次' }
+      },
+      areaId: '',
+      areaList: [],
+      isShow: true,
+      defaultTimeRange: [],
+      chartData: {
+        columns: ['areaName', 'last', 'now'],
+        rows: []
+      },
+      nameDict:{
+        'today':['昨日用水','今日用水'],
+        'week':['近7日用水','对照时间用水',],
+        'month':['近30日用水','对照时间用水',],
+        'season':['上季度用水','本季度用水',],
+        'year':['上年度用水','本年度用水',],
+        'other':['对照时间用水','自选时间用水']
+      }
+    }
+  },
+  mounted(){
+    this.$refs.func.init()
+  },
+  methods: {
+    fetchData(timeRange) {
+      const params = {
+        areaId: '110000',
+        startTime: timeRange[0],
+        endTime: timeRange[1]
+      }
+      alarmBySecondArea(params).then(response => {
+        this.isShow = false
+        this.chartData.rows = response.data
+        const maxValue = Math.max.apply(Math, response.data.map(item=> {return item.last>item.now?item.last: item.now}))
+        if (maxValue < 10) {
+          this.extend.yAxis.max = 10
+        } else {
+          this.extend.yAxis = maxValue+1
+        }
+        // this.chartData.rows = [
+        //   { 'areaName': '科技楼及食堂', 'alarm': 53 },
+        //   { 'areaName': 'A\\B\\C\\D\\E座', 'alarm': 78 },
+        //   { 'areaName': '厂区', 'alarm': 78 }]
+        this.isShow = true
+      })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+  .container{
+    position:relative;
+    .function{
+      width:calc(100% - 120px);
+      height: 28px;
+      display: flex;
+      justify-content: center;
+    }
+  }
+</style>
diff --git a/src/views/dashboard/components/waterCountByAreaBar.vue b/src/views/dashboard/components/waterCountByAreaBar.vue
index 1bdac48..f4196f1 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"
@@ -18,14 +19,14 @@
         @change="fetchData"/>
     </div>
     <ve-histogram v-if="isShow" :data="chartData" :grid="grid" :title="title" :extend="extend" :settings="chartSettings"/>
-    <div class="function">
-      <el-button
-        v-for="item in areaList"
-        :key="item.id"
-        round
-        size="mini"
-        @click="areaChange(item.id)">{{ item.name }}</el-button>
-    </div>
+    <!--<div class="function">-->
+      <!--<el-button-->
+        <!--v-for="item in areaList"-->
+        <!--:key="item.id"-->
+        <!--round-->
+        <!--size="mini"-->
+        <!--@click="areaChange(item.id)">{{ item.name }}</el-button>-->
+    <!--</div>-->
   </div>
 </template>
 
@@ -106,8 +107,8 @@
     }
   },
   mounted() {
-    this.setDefaultTime('today')
-    this.fetchArea()
+    this.setDefaultTime('week')
+    // 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,9 @@
         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
+        const nowDayOfWeek =  6
+        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..07524f9 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: {
@@ -27,8 +39,7 @@
         text: '用水走势图'
       },
       chartSettings: {
-        labelMap: {
-        },
+        labelMap: {date:'日期'},
         metrics: [],
         dimension: ['date']
       },
@@ -52,13 +63,19 @@
     }
   },
   mounted() {
-    this.changeTime('month')
-    this.fetchArea()
+    // this.changeTime('month')
+    // this.fetchArea()
+  },
+  watch:{
+    query(val){
+      this.fetchData()
+    }
   },
   methods: {
     fetchArea() {
       getDoorAreaTree().then(response => {
         if (response.code === 200) {
+          debugger
           const area = response.data.filter(item => {
             return item.pid === '1'
           }).map(item => item.name)
@@ -73,15 +90,21 @@
       })
     },
     fetchData() {
-      countByDayFirst(this.listQuery).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
-          }
-          delete item.data
-          return item
-        })
-        this.chartData.rows = arr
+      countByDayFirst(this.query).then(response => {
+        if(response.data.length>0){
+          const arr = response.data.map((item)=> {
+            const result = {date: item.date}
+            for (let i = 0; i < item.data.length; i++) {
+              result[item.data[i].areaName] = item.data[i].count
+            }
+            return result
+          })
+          const area = response.data[0].data.map(item=>item.areaName)
+          this.chartData.columns = ['date', ...area]
+          this.chartSettings.metrics = area
+          this.chartSettings.labelMap = {'date':'日期'}
+          this.chartData.rows = arr
+        }
       })
       // 模拟数据
       // this.chartData.rows = [
@@ -126,17 +149,7 @@
 </script>
 <style lang="scss" scoped>
   .container{
-    position:relative;
-    .function{
-      /*position:absolute;*/
-      /*z-index:200;*/
-      /*bottom: 10px;*/
-      /*left: 0;*/
-      width:100%;
-      height: 28px;
-      display: flex;
-      justify-content: center;
-    }
+
   }
 </style>
 
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..a4ff85d
--- /dev/null
+++ b/src/views/dashboard/components/waterNote.vue
@@ -0,0 +1,142 @@
+<!--用水事记L -->
+<template>
+  <div class="container">
+    <div class="title">
+      青岛公司用水事记
+      <i v-if="!editMode" class="el-icon-edit edit-btn" style="float:right" @click="editNote"></i>
+      <i v-else class="el-icon-check edit-btn" style="float:right" @click="saveNote"></i>
+    </div>
+    <div class="content-div">
+      <el-scrollbar class="white-scrollbar">
+        <div v-for="(item,index) of currentList" :key="'note_'+index" class="content-line">
+          <div v-if="!editMode">{{index+1}}. {{item.content}}</div>
+          <div v-else class="edit-line">
+            <div style="margin-right: 5px">{{index+1}}. </div>
+            <el-input v-model="item.content" size="mini" maxlength="30"></el-input>
+            <div style="width: 85px;display: flex;justify-content: flex-end">
+              <i v-show="index!==0" class="el-icon-top" @click="toTop(index)"></i>
+              <i v-show="index!==currentList.length-1" class="el-icon-bottom" @click="toBottom(index)"></i>
+              <i class="el-icon-delete" @click="deleteItem(index)"></i>
+            </div>
+          </div>
+        </div>
+        <div v-if="editMode&&currentList.length<10" class="content-line">
+          <i class="el-icon-circle-plus-outline icon-btn" @click="addItem()"></i>
+        </div>
+      </el-scrollbar>
+    </div>
+  </div>
+</template>
+
+<script>
+import { getNoteList, updateNoteList } from '@/api/dashboard'
+import { getDoorAreaTree } from '@/api/system/area'
+export default {
+  name: 'WaterNote',
+  props:{
+    query: {
+      type: Object,
+      default:()=>{
+        return {
+          areaId: '',
+          startTime: '',
+          endTime: ''
+        }
+      }
+    }
+  },
+  data() {
+    return {
+      editMode: false, // 编辑模式
+      originList:[], // 原始列表
+      currentList:[] // 当前列表
+    }
+  },
+  mounted() {
+    this.fetchData()
+  },
+  methods: {
+    // 获取统计数据
+    fetchData() {
+      this.currentList = [
+        { 'content': '测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试', 'num': 1 },
+        { 'content': '测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试', 'num': 1 },
+        { 'content': '测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试', 'num': 1 },
+        { 'content': '测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试', 'num': 1 },
+        { 'content': '测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试', 'num': 1 }
+      ]
+      this.originList = JSON.parse(JSON.stringify(this.currentList))
+      // getNoteList().then(response => {
+      //   this.currentList = response.data
+      // })
+    },
+    toTop(index){
+      this.currentList[index-1] = this.currentList.splice(index,1,this.currentList[index-1])[0]
+    },
+    toBottom(index){
+      this.currentList[index] = this.currentList.splice(index+1,1,this.currentList[index])[0]
+    },
+    deleteItem(index){
+      this.currentList.splice(index,1)
+    },
+    addItem(){
+      this.currentList.push({content:'',num:99})
+    },
+    // 开启编辑
+    editNote(){
+      this.editMode = true
+    },
+    // 保存用水事记
+    saveNote(){
+      const currentList = this.currentList.map((item, index)=>{
+        return {content: item.content, num: index}
+      })
+      console.log(currentList)
+      updateNoteList(currentList).then(res=>{
+        this.editMode = false
+        this.$message.success('保存成功')
+      }).catch(e=>{
+        // this.currentList = JSON.parse(JSON.stringify(this.originList))
+      })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+  @import "@/styles/variables.scss";
+  .container{
+    position:relative;
+    height: 428px;
+    display: flex;
+    flex-direction: column;
+    .content-div{
+      height: 410px;
+      .content-line{
+        line-height: 30px;
+        font-size: 16px;
+      }
+      .edit-line{
+        width: 100%;
+        display: flex;
+        align-items: center;
+      }
+    }
+  }
+  .edit-btn, .icon-btn{
+    &:hover{
+      cursor: pointer;
+      color: $themeColor;
+    }
+  }
+</style>
+<style lang="scss">
+  .white-scrollbar{
+    height: 100%;
+    .el-scrollbar__wrap{
+      overflow-x: hidden;
+      padding: 10px 0px;
+      background-color: #FFFFFF;
+    }
+  }
+
+</style>
diff --git a/src/views/dashboard/index.vue b/src/views/dashboard/index.vue
index fdbc38a..69d09ea 100644
--- a/src/views/dashboard/index.vue
+++ b/src/views/dashboard/index.vue
@@ -1,54 +1,55 @@
 <template>
   <div class="dashboard-container" style="background-color: white">
     <panel-group ref="panelgroup"/>
-    <el-row :gutter="10">
-      <!-- 用水统计图 -->
+    <el-row>
+      <!--设备在线数量统计-->
       <el-col :span="12">
         <el-card shadow="never">
-          <water-count-by-dept-bar/>
+          <water-compare/>
+        </el-card>
+      </el-col>
+      <!--设备数量统计-->
+      <el-col v-if="hasPerm('/statics/deviceStaticsByType')" :span="12">
+        <el-card shadow="never">
+          <device-count/>
+        </el-card>
+      </el-col>
+      <!-- 用水统计图 -->
+      <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 :query="listQuery1" ref="waterCountPie"/>
         </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/>
+          <water-count-by-day :query="listQuery1" ref="waterCountDay"/>
         </el-card>
       </el-col>
 
-      <!--设备数量统计-->
-      <el-col v-if="hasPerm('/statics/deviceStaticsByType')" :span="12">
+      <!--水表报警次数统计，柱状图-->
+      <el-col v-if="hasPerm('/statics/alarmsByDay')" :span="12">
         <el-card shadow="never">
-          <device-count/>
+          <watch-alarm-bar @change="changeAlarmQuery"/>
+        </el-card>
+      </el-col>
+      <!--报警饼图统计-->
+      <el-col v-if="hasPerm('/statics/alarmsByDay')" :span="12">
+        <el-card shadow="never">
+          <alarm-count-by-dept :query="listQuery2"/>
         </el-card>
       </el-col>
     </el-row>
@@ -64,20 +65,26 @@
 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";
+import AlarmCountByDept from "./components/AlarmCountByDept";
+import WaterCompare from "./components/waterCompare";
 
 export default {
   name: 'Dashboard',
   components: {
+    WaterCompare,
+    AlarmCountByDept,
+    WaterNote,
     WatchAlarmBar,
     WaterCountByAreaBar,
     WaterCountByDay,
     WaterCountByDeptBar,
-    WaterCountByDepy,
+    WaterCountByDept,
     JobByStatus,
     AlarmByDays,
     PanelGroup,
@@ -108,12 +115,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:'110000',
+        startTime:new Date().Format('yyyy-MM-dd'),
+        endTime:new Date().Format('yyyy-MM-dd')
+      } // 分区报警查询条件
+    }
+  },
   watch: {
     needRefresh(val) {
       // 需要刷新
       if (val) {
         console.log('refresh dashboard')
-        debugger
         this.$refs.panelgroup.refresh()
       }
     }
@@ -124,6 +144,14 @@
   methods: {
     webSocket() {
       this.$store.dispatch('initWebSocket')
+    },
+    // 切换分区查询条件
+    changeWaterQuery(listQuery1){
+      this.listQuery1 = listQuery1
+    },
+    // 切换报警查询条件
+    changeAlarmQuery(listQuery2){
+      this.listQuery2 = listQuery2
     }
   }
 }
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..6ad37f1 100644
--- a/src/api/dashboard.js
+++ b/src/api/dashboard.js
@@ -0,0 +1,92 @@
+/**
+ * 井总览模块接口
+ */
+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: '/device/valve/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
+  })
+}
+
+
+// 用水事记查询
+export function getNoteList() {
+  return request({
+    // url: '/note/list',
+    url: 'waterMeterData/count',
+    method: 'get',
+    params
+  })
+}
+
+// 用水事记更新
+export function updateNoteList(params) {
+  return request({
+    // url: '/note/update',
+    url: 'waterMeterData/count',
+    method: 'post',
+    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/AlarmCountByDept.vue b/src/views/dashboard/components/AlarmCountByDept.vue
new file mode 100644
index 0000000..91df51d
--- /dev/null
+++ b/src/views/dashboard/components/AlarmCountByDept.vue
@@ -0,0 +1,80 @@
+<!--suppress ALL -->
+<template>
+  <div class="container">
+    <div style="height: 28px;margin-bottom: 10px;"/>
+    <ve-pie :data="chartData" :extend="extend" :title="title"/>
+
+  </div>
+</template>
+
+<script>
+import { alarmBySecondArea } from '@/api/overview'
+import { getDoorAreaTree } from '@/api/system/area'
+export default {
+  name: 'AlarmCountByDept',
+  props:{
+    query: {
+      type: Object,
+      default:()=>{
+        return {
+          areaId: '',
+          startTime: '',
+          endTime: ''
+        }
+      }
+    }
+  },
+  data() {
+    return {
+      chartData: {
+        columns: ['areaName', 'alarm'],
+        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': '分区',
+          'alarm': '报警数'
+        }
+      }
+    }
+  },
+  watch:{
+    query(val){
+      this.fetchData()
+    }
+  },
+  methods: {
+    // 获取统计数据
+    fetchData() {
+      alarmBySecondArea(this.query).then(response => {
+        debugger
+        this.chartData.rows = response.data
+      })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+  .container{
+
+  }
+</style>
diff --git a/src/views/dashboard/components/DeviceCount.vue b/src/views/dashboard/components/DeviceCount.vue
index 6c36bcb..453fa09 100644
--- a/src/views/dashboard/components/DeviceCount.vue
+++ b/src/views/dashboard/components/DeviceCount.vue
@@ -1,5 +1,9 @@
 <template>
-  <ve-bar :data="chartData" :grid="grid" :title="title" :extend="extend" :settings="chartSettings"/>
+  <div>
+    <div style="height: 28px;margin-bottom: 10px;"/>
+    <ve-bar :data="chartData" :grid="grid" :title="title" :extend="extend" :settings="chartSettings"/>
+  </div>
+
 </template>
 
 <script>
diff --git a/src/views/dashboard/components/FunctionArea.vue b/src/views/dashboard/components/FunctionArea.vue
new file mode 100644
index 0000000..e628c12
--- /dev/null
+++ b/src/views/dashboard/components/FunctionArea.vue
@@ -0,0 +1,128 @@
+<!--
+ * @Description:
+ * @Author: 王晓颖
+ * @Date:
+ -->
+<template>
+  <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')">本周</el-button>
+    <el-button round size="mini" @click="setDefaultTime('today')">今日</el-button>
+    <el-date-picker
+      v-model="timeRange"
+      :picker-options="pickerOptions"
+      type="daterange"
+      range-separator="至"
+      start-placeholder="开始日期"
+      end-placeholder="结束日期"
+      value-format="yyyy-MM-dd"
+      size="mini"
+      style="width:250px;margin-right: 20px"
+      @change="fetchData"/>
+  </div>
+</template>
+
+<script>
+  import { getDayTime } from '@/utils/dateutils'
+  export default {
+    name: "FunctionArea",
+    props:{
+      select:{
+        type: String,
+        default: 'today'
+      }
+    },
+    data() {
+      return {
+        timeRange: [],
+        pickerOptions: {
+          disabledDate: function(date) {
+            var oDate1 = new Date(date)
+            var oDate2 = new Date()
+            if (oDate1.getTime() > oDate2.getTime()) {
+              return true
+            } else {
+              return false
+            }
+          }
+        }
+      }
+    },
+    methods: {
+      init(){
+        this.setDefaultTime(this.select)
+      },
+      change(){
+        this.$emit('change', this.timeRange)
+      },
+      setDefaultTime(val) {
+        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
+          if (tMonth.toString().length === 1) {
+            tMonth = '0' + tMonth
+          }
+          const beginTime = tYear + '-' + tMonth + '-01'
+          const endTime = getDayTime(new Date().getTime())
+          this.timeRange = [beginTime, endTime.Format('yyyy-MM-dd')]
+        } else if (val === 'week') {
+          // const nowDayOfWeek =  new Date().getDay()-1
+          const nowDayOfWeek =  6
+          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') {
+          this.timeRange = [getDayTime(new Date().getTime()).Format('yyyy-MM-dd'), getDayTime(new Date().getTime()).Format('yyyy-MM-dd')]
+        }
+        this.change()
+      }
+    }
+  }
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  .statistic-container {
+
+    .el-button{
+      padding: 5px 10px;
+    }
+    margin-bottom: 10px;
+    text-align: center;
+    .chart-tool-button {
+      padding: 5px;
+      line-height: 16px;
+      margin-top: 5px;
+      font-size: 14px;
+    }
+    .chart-tool-button:hover {
+      background-color: #8cc5ff;
+      cursor: pointer;
+      color: white;
+    }
+    .chart-tool-button:active {
+      background-color: #8cc5ff;
+      color: white;
+    }
+  }
+  .selected {
+    background-color: #8cc5ff;
+    color: white;
+  }
+</style>
diff --git a/src/views/dashboard/components/PanelGroup.vue b/src/views/dashboard/components/PanelGroup.vue
index b72d289..7be90a7 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,32 @@
           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',
           permission: '/device/list'
         },
         {
@@ -67,11 +69,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 +85,10 @@
   },
   mounted() {
     this.getWater()
-    this.getWellCount()
+    // this.getWellCount()
     this.getDeviceCount()
     this.getAlarmCount()
-    this.getJobCount()
+    // this.getJobCount()
   },
   methods: {
     refresh() {
@@ -97,24 +99,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.production?parseFloat(response.data.production).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 +168,7 @@
   //   &:hover {
   //     .card-panel-icon-wrapper {
   //       color: #fff;
-        
+
   //     }
 
   //     .icon-people {
diff --git a/src/views/dashboard/components/watchAlarmBar.vue b/src/views/dashboard/components/watchAlarmBar.vue
index 13824f3..6a18ef6 100644
--- a/src/views/dashboard/components/watchAlarmBar.vue
+++ b/src/views/dashboard/components/watchAlarmBar.vue
@@ -1,9 +1,11 @@
+<!--水表告警统计-->
 <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"
@@ -18,14 +20,14 @@
         @change="fetchData"/>
     </div>
     <ve-histogram v-if="isShow" :data="chartData" :grid="grid" :title="title" :extend="extend" :settings="chartSettings"/>
-    <div class="function">
-      <el-button
-        v-for="item in areaList"
-        :key="item.id"
-        round
-        size="mini"
-        @click="areaChange(item.id)">{{ item.name }}</el-button>
-    </div>
+    <!--<div class="function">-->
+      <!--<el-button-->
+        <!--v-for="item in areaList"-->
+        <!--:key="item.id"-->
+        <!--round-->
+        <!--size="mini"-->
+        <!--@click="areaChange(item.id)">{{ item.name }}</el-button>-->
+    <!--</div>-->
   </div>
 </template>
 
@@ -38,51 +40,51 @@
 export default {
   name: 'WatchAlarmBar',
   data() {
-    this.extend = {
-      legend: {
-        show: false
-      },
-      xAxis: {
-        axisLabel: {
-          rotate: 30,
-          margin: 30,
-          textStyle: {
-            align: 'center'
-          }
-        }
-      },
-      yAxis: {
-        name: '报警次数',
-        position: 'left'
-      },
-      series: {
-        label: { show: true, position: 'top', formatter: '{c}' },
-        barWidth: 25
-      },
-      tooltip: { trigger: 'item', formatter: '{b}<br/>报警次数：{c}次' }
-    }
-    this.grid = {
-      right: 40,
-      top: 100,
-      bottom: 5
-    }
-    this.title = {
-      text: '水表告警统计'
-    }
-    this.chartSettings = {
-      itemStyle: {
-        barCategoryGap: 10
-      },
-
-      labelMap: {
-        'areaName': '分区',
-        'alarm': '报警数',
-        'warning': '预警数'
-      },
-      dimension: ['areaName'],
-      metrics: ['alarm', 'warning']
-    }
     return {
+      title:{
+        text: '水表告警统计'
+      },
+      chartSettings:{
+        itemStyle: {
+          barCategoryGap: 0
+        },
+        labelMap: {
+          'areaName': '分区',
+          'alarm': '报警数',
+          'warning': '预警数'
+        },
+        dimension: ['areaName'],
+        metrics: ['alarm', 'warning']
+      },
+      grid: {
+        right: 40,
+        top: 80,
+        bottom: 5
+      },
+      extend: {
+        legend: {
+          show: false
+        },
+        xAxis: {
+          axisLabel: {
+            rotate: 30,
+            margin: 30,
+            textStyle: {
+              align: 'center'
+            }
+          }
+        },
+        yAxis: {
+          name: '报警次数',
+          position: 'left',
+          max: 10
+        },
+        series: {
+          label: { show: true, position: 'top', formatter: '{c}' },
+          barWidth: 20
+        },
+        // tooltip: { trigger: 'item', formatter: '{b}<br/>报警次数：{c}次' }
+      },
       areaId: '',
       areaList: [],
       isShow: true,
@@ -100,43 +102,50 @@
         }
       },
       chartData: {
-        columns: ['wellTypeName', 'alarm'],
+        columns: ['areaName', 'alarm'],
         rows: []
       }
     }
   },
   mounted() {
     this.setDefaultTime('today')
-    this.fetchArea()
+    // this.fetchArea()
   },
   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()
-    },
+    // 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() {
       const params = {
-        areaId: this.areaId,
+        areaId: '110000',
         startTime: this.timeRange[0],
         endTime: this.timeRange[1]
       }
+      this.$emit('change', params)
       alarmBySecondArea(params).then(response => {
         this.isShow = false
         this.chartData.rows = response.data
+        const maxValue = Math.max.apply(Math, response.data.map(item=> {return item.alarm>item.warning?item.alarm: item.warning}))
+        if (maxValue < 10) {
+          this.extend.yAxis.max = 10
+        } else {
+          this.extend.yAxis = maxValue+1
+        }
         // this.chartData.rows = [
         //   { 'areaName': '科技楼及食堂', 'alarm': 53 },
         //   { 'areaName': 'A\\B\\C\\D\\E座', 'alarm': 78 },
@@ -186,10 +195,11 @@
     }
   }
   .statistic-container {
+
     .el-button{
       padding: 5px 10px;
     }
-    /*margin-bottom: 10px;*/
+    margin-bottom: 10px;
     text-align: center;
     .chart-tool-button {
       padding: 5px;
diff --git a/src/views/dashboard/components/waterCompare.vue b/src/views/dashboard/components/waterCompare.vue
new file mode 100644
index 0000000..8e34936
--- /dev/null
+++ b/src/views/dashboard/components/waterCompare.vue
@@ -0,0 +1,117 @@
+<!--分区用水对比图-->
+<template>
+  <div class="container">
+    <function-area ref="func" select="week" @change="fetchData"/>
+    <ve-histogram v-if="isShow" :data="chartData" :grid="grid" :title="title" :extend="extend" :settings="chartSettings"/>
+  </div>
+</template>
+
+<script>
+
+import 'echarts/lib/component/visualMap'
+import { alarmBySecondArea } from '@/api/overview'
+import { getDayTime } from '@/utils/dateutils'
+import { getDoorAreaTree } from '@/api/system/area'
+import FunctionArea from "./FunctionArea";
+export default {
+  name: 'WaterCompare',
+  components: {FunctionArea},
+  data() {
+    return {
+      title:{ text: '分区用水对比图'},
+      chartSettings:{
+        labelMap: {
+          'areaName': '分区',
+          'last': '报警数',
+          'now': '预警数'
+        },
+        dimension: ['areaName'],
+        metrics: ['last', 'now']
+      },
+      grid: {
+        right: 40,
+        top: 80,
+        bottom: 5
+      },
+      extend: {
+        legend: {
+          show: false
+        },
+        xAxis: {
+          axisLabel: {
+            rotate: 30,
+            margin: 30,
+            textStyle: {
+              align: 'center'
+            }
+          }
+        },
+        yAxis: {
+          name: '用水量(吨)',
+          position: 'left',
+          max: 10
+        },
+        series: {
+          label: { show: true, position: 'top', formatter: '{c}' },
+          barWidth: 20
+        },
+        // tooltip: { trigger: 'item', formatter: '{b}<br/>报警次数：{c}次' }
+      },
+      areaId: '',
+      areaList: [],
+      isShow: true,
+      defaultTimeRange: [],
+      chartData: {
+        columns: ['areaName', 'last', 'now'],
+        rows: []
+      },
+      nameDict:{
+        'today':['昨日用水','今日用水'],
+        'week':['近7日用水','对照时间用水',],
+        'month':['近30日用水','对照时间用水',],
+        'season':['上季度用水','本季度用水',],
+        'year':['上年度用水','本年度用水',],
+        'other':['对照时间用水','自选时间用水']
+      }
+    }
+  },
+  mounted(){
+    this.$refs.func.init()
+  },
+  methods: {
+    fetchData(timeRange) {
+      const params = {
+        areaId: '110000',
+        startTime: timeRange[0],
+        endTime: timeRange[1]
+      }
+      alarmBySecondArea(params).then(response => {
+        this.isShow = false
+        this.chartData.rows = response.data
+        const maxValue = Math.max.apply(Math, response.data.map(item=> {return item.last>item.now?item.last: item.now}))
+        if (maxValue < 10) {
+          this.extend.yAxis.max = 10
+        } else {
+          this.extend.yAxis = maxValue+1
+        }
+        // this.chartData.rows = [
+        //   { 'areaName': '科技楼及食堂', 'alarm': 53 },
+        //   { 'areaName': 'A\\B\\C\\D\\E座', 'alarm': 78 },
+        //   { 'areaName': '厂区', 'alarm': 78 }]
+        this.isShow = true
+      })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+  .container{
+    position:relative;
+    .function{
+      width:calc(100% - 120px);
+      height: 28px;
+      display: flex;
+      justify-content: center;
+    }
+  }
+</style>
diff --git a/src/views/dashboard/components/waterCountByAreaBar.vue b/src/views/dashboard/components/waterCountByAreaBar.vue
index 1bdac48..f4196f1 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"
@@ -18,14 +19,14 @@
         @change="fetchData"/>
     </div>
     <ve-histogram v-if="isShow" :data="chartData" :grid="grid" :title="title" :extend="extend" :settings="chartSettings"/>
-    <div class="function">
-      <el-button
-        v-for="item in areaList"
-        :key="item.id"
-        round
-        size="mini"
-        @click="areaChange(item.id)">{{ item.name }}</el-button>
-    </div>
+    <!--<div class="function">-->
+      <!--<el-button-->
+        <!--v-for="item in areaList"-->
+        <!--:key="item.id"-->
+        <!--round-->
+        <!--size="mini"-->
+        <!--@click="areaChange(item.id)">{{ item.name }}</el-button>-->
+    <!--</div>-->
   </div>
 </template>
 
@@ -106,8 +107,8 @@
     }
   },
   mounted() {
-    this.setDefaultTime('today')
-    this.fetchArea()
+    this.setDefaultTime('week')
+    // 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,9 @@
         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
+        const nowDayOfWeek =  6
+        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..07524f9 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: {
@@ -27,8 +39,7 @@
         text: '用水走势图'
       },
       chartSettings: {
-        labelMap: {
-        },
+        labelMap: {date:'日期'},
         metrics: [],
         dimension: ['date']
       },
@@ -52,13 +63,19 @@
     }
   },
   mounted() {
-    this.changeTime('month')
-    this.fetchArea()
+    // this.changeTime('month')
+    // this.fetchArea()
+  },
+  watch:{
+    query(val){
+      this.fetchData()
+    }
   },
   methods: {
     fetchArea() {
       getDoorAreaTree().then(response => {
         if (response.code === 200) {
+          debugger
           const area = response.data.filter(item => {
             return item.pid === '1'
           }).map(item => item.name)
@@ -73,15 +90,21 @@
       })
     },
     fetchData() {
-      countByDayFirst(this.listQuery).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
-          }
-          delete item.data
-          return item
-        })
-        this.chartData.rows = arr
+      countByDayFirst(this.query).then(response => {
+        if(response.data.length>0){
+          const arr = response.data.map((item)=> {
+            const result = {date: item.date}
+            for (let i = 0; i < item.data.length; i++) {
+              result[item.data[i].areaName] = item.data[i].count
+            }
+            return result
+          })
+          const area = response.data[0].data.map(item=>item.areaName)
+          this.chartData.columns = ['date', ...area]
+          this.chartSettings.metrics = area
+          this.chartSettings.labelMap = {'date':'日期'}
+          this.chartData.rows = arr
+        }
       })
       // 模拟数据
       // this.chartData.rows = [
@@ -126,17 +149,7 @@
 </script>
 <style lang="scss" scoped>
   .container{
-    position:relative;
-    .function{
-      /*position:absolute;*/
-      /*z-index:200;*/
-      /*bottom: 10px;*/
-      /*left: 0;*/
-      width:100%;
-      height: 28px;
-      display: flex;
-      justify-content: center;
-    }
+
   }
 </style>
 
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..a4ff85d
--- /dev/null
+++ b/src/views/dashboard/components/waterNote.vue
@@ -0,0 +1,142 @@
+<!--用水事记L -->
+<template>
+  <div class="container">
+    <div class="title">
+      青岛公司用水事记
+      <i v-if="!editMode" class="el-icon-edit edit-btn" style="float:right" @click="editNote"></i>
+      <i v-else class="el-icon-check edit-btn" style="float:right" @click="saveNote"></i>
+    </div>
+    <div class="content-div">
+      <el-scrollbar class="white-scrollbar">
+        <div v-for="(item,index) of currentList" :key="'note_'+index" class="content-line">
+          <div v-if="!editMode">{{index+1}}. {{item.content}}</div>
+          <div v-else class="edit-line">
+            <div style="margin-right: 5px">{{index+1}}. </div>
+            <el-input v-model="item.content" size="mini" maxlength="30"></el-input>
+            <div style="width: 85px;display: flex;justify-content: flex-end">
+              <i v-show="index!==0" class="el-icon-top" @click="toTop(index)"></i>
+              <i v-show="index!==currentList.length-1" class="el-icon-bottom" @click="toBottom(index)"></i>
+              <i class="el-icon-delete" @click="deleteItem(index)"></i>
+            </div>
+          </div>
+        </div>
+        <div v-if="editMode&&currentList.length<10" class="content-line">
+          <i class="el-icon-circle-plus-outline icon-btn" @click="addItem()"></i>
+        </div>
+      </el-scrollbar>
+    </div>
+  </div>
+</template>
+
+<script>
+import { getNoteList, updateNoteList } from '@/api/dashboard'
+import { getDoorAreaTree } from '@/api/system/area'
+export default {
+  name: 'WaterNote',
+  props:{
+    query: {
+      type: Object,
+      default:()=>{
+        return {
+          areaId: '',
+          startTime: '',
+          endTime: ''
+        }
+      }
+    }
+  },
+  data() {
+    return {
+      editMode: false, // 编辑模式
+      originList:[], // 原始列表
+      currentList:[] // 当前列表
+    }
+  },
+  mounted() {
+    this.fetchData()
+  },
+  methods: {
+    // 获取统计数据
+    fetchData() {
+      this.currentList = [
+        { 'content': '测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试', 'num': 1 },
+        { 'content': '测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试', 'num': 1 },
+        { 'content': '测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试', 'num': 1 },
+        { 'content': '测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试', 'num': 1 },
+        { 'content': '测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试', 'num': 1 }
+      ]
+      this.originList = JSON.parse(JSON.stringify(this.currentList))
+      // getNoteList().then(response => {
+      //   this.currentList = response.data
+      // })
+    },
+    toTop(index){
+      this.currentList[index-1] = this.currentList.splice(index,1,this.currentList[index-1])[0]
+    },
+    toBottom(index){
+      this.currentList[index] = this.currentList.splice(index+1,1,this.currentList[index])[0]
+    },
+    deleteItem(index){
+      this.currentList.splice(index,1)
+    },
+    addItem(){
+      this.currentList.push({content:'',num:99})
+    },
+    // 开启编辑
+    editNote(){
+      this.editMode = true
+    },
+    // 保存用水事记
+    saveNote(){
+      const currentList = this.currentList.map((item, index)=>{
+        return {content: item.content, num: index}
+      })
+      console.log(currentList)
+      updateNoteList(currentList).then(res=>{
+        this.editMode = false
+        this.$message.success('保存成功')
+      }).catch(e=>{
+        // this.currentList = JSON.parse(JSON.stringify(this.originList))
+      })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+  @import "@/styles/variables.scss";
+  .container{
+    position:relative;
+    height: 428px;
+    display: flex;
+    flex-direction: column;
+    .content-div{
+      height: 410px;
+      .content-line{
+        line-height: 30px;
+        font-size: 16px;
+      }
+      .edit-line{
+        width: 100%;
+        display: flex;
+        align-items: center;
+      }
+    }
+  }
+  .edit-btn, .icon-btn{
+    &:hover{
+      cursor: pointer;
+      color: $themeColor;
+    }
+  }
+</style>
+<style lang="scss">
+  .white-scrollbar{
+    height: 100%;
+    .el-scrollbar__wrap{
+      overflow-x: hidden;
+      padding: 10px 0px;
+      background-color: #FFFFFF;
+    }
+  }
+
+</style>
diff --git a/src/views/dashboard/index.vue b/src/views/dashboard/index.vue
index fdbc38a..69d09ea 100644
--- a/src/views/dashboard/index.vue
+++ b/src/views/dashboard/index.vue
@@ -1,54 +1,55 @@
 <template>
   <div class="dashboard-container" style="background-color: white">
     <panel-group ref="panelgroup"/>
-    <el-row :gutter="10">
-      <!-- 用水统计图 -->
+    <el-row>
+      <!--设备在线数量统计-->
       <el-col :span="12">
         <el-card shadow="never">
-          <water-count-by-dept-bar/>
+          <water-compare/>
+        </el-card>
+      </el-col>
+      <!--设备数量统计-->
+      <el-col v-if="hasPerm('/statics/deviceStaticsByType')" :span="12">
+        <el-card shadow="never">
+          <device-count/>
+        </el-card>
+      </el-col>
+      <!-- 用水统计图 -->
+      <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 :query="listQuery1" ref="waterCountPie"/>
         </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/>
+          <water-count-by-day :query="listQuery1" ref="waterCountDay"/>
         </el-card>
       </el-col>
 
-      <!--设备数量统计-->
-      <el-col v-if="hasPerm('/statics/deviceStaticsByType')" :span="12">
+      <!--水表报警次数统计，柱状图-->
+      <el-col v-if="hasPerm('/statics/alarmsByDay')" :span="12">
         <el-card shadow="never">
-          <device-count/>
+          <watch-alarm-bar @change="changeAlarmQuery"/>
+        </el-card>
+      </el-col>
+      <!--报警饼图统计-->
+      <el-col v-if="hasPerm('/statics/alarmsByDay')" :span="12">
+        <el-card shadow="never">
+          <alarm-count-by-dept :query="listQuery2"/>
         </el-card>
       </el-col>
     </el-row>
@@ -64,20 +65,26 @@
 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";
+import AlarmCountByDept from "./components/AlarmCountByDept";
+import WaterCompare from "./components/waterCompare";
 
 export default {
   name: 'Dashboard',
   components: {
+    WaterCompare,
+    AlarmCountByDept,
+    WaterNote,
     WatchAlarmBar,
     WaterCountByAreaBar,
     WaterCountByDay,
     WaterCountByDeptBar,
-    WaterCountByDepy,
+    WaterCountByDept,
     JobByStatus,
     AlarmByDays,
     PanelGroup,
@@ -108,12 +115,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:'110000',
+        startTime:new Date().Format('yyyy-MM-dd'),
+        endTime:new Date().Format('yyyy-MM-dd')
+      } // 分区报警查询条件
+    }
+  },
   watch: {
     needRefresh(val) {
       // 需要刷新
       if (val) {
         console.log('refresh dashboard')
-        debugger
         this.$refs.panelgroup.refresh()
       }
     }
@@ -124,6 +144,14 @@
   methods: {
     webSocket() {
       this.$store.dispatch('initWebSocket')
+    },
+    // 切换分区查询条件
+    changeWaterQuery(listQuery1){
+      this.listQuery1 = listQuery1
+    },
+    // 切换报警查询条件
+    changeAlarmQuery(listQuery2){
+      this.listQuery2 = listQuery2
     }
   }
 }
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..6ad37f1 100644
--- a/src/api/dashboard.js
+++ b/src/api/dashboard.js
@@ -0,0 +1,92 @@
+/**
+ * 井总览模块接口
+ */
+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: '/device/valve/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
+  })
+}
+
+
+// 用水事记查询
+export function getNoteList() {
+  return request({
+    // url: '/note/list',
+    url: 'waterMeterData/count',
+    method: 'get',
+    params
+  })
+}
+
+// 用水事记更新
+export function updateNoteList(params) {
+  return request({
+    // url: '/note/update',
+    url: 'waterMeterData/count',
+    method: 'post',
+    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/AlarmCountByDept.vue b/src/views/dashboard/components/AlarmCountByDept.vue
new file mode 100644
index 0000000..91df51d
--- /dev/null
+++ b/src/views/dashboard/components/AlarmCountByDept.vue
@@ -0,0 +1,80 @@
+<!--suppress ALL -->
+<template>
+  <div class="container">
+    <div style="height: 28px;margin-bottom: 10px;"/>
+    <ve-pie :data="chartData" :extend="extend" :title="title"/>
+
+  </div>
+</template>
+
+<script>
+import { alarmBySecondArea } from '@/api/overview'
+import { getDoorAreaTree } from '@/api/system/area'
+export default {
+  name: 'AlarmCountByDept',
+  props:{
+    query: {
+      type: Object,
+      default:()=>{
+        return {
+          areaId: '',
+          startTime: '',
+          endTime: ''
+        }
+      }
+    }
+  },
+  data() {
+    return {
+      chartData: {
+        columns: ['areaName', 'alarm'],
+        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': '分区',
+          'alarm': '报警数'
+        }
+      }
+    }
+  },
+  watch:{
+    query(val){
+      this.fetchData()
+    }
+  },
+  methods: {
+    // 获取统计数据
+    fetchData() {
+      alarmBySecondArea(this.query).then(response => {
+        debugger
+        this.chartData.rows = response.data
+      })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+  .container{
+
+  }
+</style>
diff --git a/src/views/dashboard/components/DeviceCount.vue b/src/views/dashboard/components/DeviceCount.vue
index 6c36bcb..453fa09 100644
--- a/src/views/dashboard/components/DeviceCount.vue
+++ b/src/views/dashboard/components/DeviceCount.vue
@@ -1,5 +1,9 @@
 <template>
-  <ve-bar :data="chartData" :grid="grid" :title="title" :extend="extend" :settings="chartSettings"/>
+  <div>
+    <div style="height: 28px;margin-bottom: 10px;"/>
+    <ve-bar :data="chartData" :grid="grid" :title="title" :extend="extend" :settings="chartSettings"/>
+  </div>
+
 </template>
 
 <script>
diff --git a/src/views/dashboard/components/FunctionArea.vue b/src/views/dashboard/components/FunctionArea.vue
new file mode 100644
index 0000000..e628c12
--- /dev/null
+++ b/src/views/dashboard/components/FunctionArea.vue
@@ -0,0 +1,128 @@
+<!--
+ * @Description:
+ * @Author: 王晓颖
+ * @Date:
+ -->
+<template>
+  <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')">本周</el-button>
+    <el-button round size="mini" @click="setDefaultTime('today')">今日</el-button>
+    <el-date-picker
+      v-model="timeRange"
+      :picker-options="pickerOptions"
+      type="daterange"
+      range-separator="至"
+      start-placeholder="开始日期"
+      end-placeholder="结束日期"
+      value-format="yyyy-MM-dd"
+      size="mini"
+      style="width:250px;margin-right: 20px"
+      @change="fetchData"/>
+  </div>
+</template>
+
+<script>
+  import { getDayTime } from '@/utils/dateutils'
+  export default {
+    name: "FunctionArea",
+    props:{
+      select:{
+        type: String,
+        default: 'today'
+      }
+    },
+    data() {
+      return {
+        timeRange: [],
+        pickerOptions: {
+          disabledDate: function(date) {
+            var oDate1 = new Date(date)
+            var oDate2 = new Date()
+            if (oDate1.getTime() > oDate2.getTime()) {
+              return true
+            } else {
+              return false
+            }
+          }
+        }
+      }
+    },
+    methods: {
+      init(){
+        this.setDefaultTime(this.select)
+      },
+      change(){
+        this.$emit('change', this.timeRange)
+      },
+      setDefaultTime(val) {
+        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
+          if (tMonth.toString().length === 1) {
+            tMonth = '0' + tMonth
+          }
+          const beginTime = tYear + '-' + tMonth + '-01'
+          const endTime = getDayTime(new Date().getTime())
+          this.timeRange = [beginTime, endTime.Format('yyyy-MM-dd')]
+        } else if (val === 'week') {
+          // const nowDayOfWeek =  new Date().getDay()-1
+          const nowDayOfWeek =  6
+          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') {
+          this.timeRange = [getDayTime(new Date().getTime()).Format('yyyy-MM-dd'), getDayTime(new Date().getTime()).Format('yyyy-MM-dd')]
+        }
+        this.change()
+      }
+    }
+  }
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  .statistic-container {
+
+    .el-button{
+      padding: 5px 10px;
+    }
+    margin-bottom: 10px;
+    text-align: center;
+    .chart-tool-button {
+      padding: 5px;
+      line-height: 16px;
+      margin-top: 5px;
+      font-size: 14px;
+    }
+    .chart-tool-button:hover {
+      background-color: #8cc5ff;
+      cursor: pointer;
+      color: white;
+    }
+    .chart-tool-button:active {
+      background-color: #8cc5ff;
+      color: white;
+    }
+  }
+  .selected {
+    background-color: #8cc5ff;
+    color: white;
+  }
+</style>
diff --git a/src/views/dashboard/components/PanelGroup.vue b/src/views/dashboard/components/PanelGroup.vue
index b72d289..7be90a7 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,32 @@
           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',
           permission: '/device/list'
         },
         {
@@ -67,11 +69,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 +85,10 @@
   },
   mounted() {
     this.getWater()
-    this.getWellCount()
+    // this.getWellCount()
     this.getDeviceCount()
     this.getAlarmCount()
-    this.getJobCount()
+    // this.getJobCount()
   },
   methods: {
     refresh() {
@@ -97,24 +99,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.production?parseFloat(response.data.production).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 +168,7 @@
   //   &:hover {
   //     .card-panel-icon-wrapper {
   //       color: #fff;
-        
+
   //     }
 
   //     .icon-people {
diff --git a/src/views/dashboard/components/watchAlarmBar.vue b/src/views/dashboard/components/watchAlarmBar.vue
index 13824f3..6a18ef6 100644
--- a/src/views/dashboard/components/watchAlarmBar.vue
+++ b/src/views/dashboard/components/watchAlarmBar.vue
@@ -1,9 +1,11 @@
+<!--水表告警统计-->
 <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"
@@ -18,14 +20,14 @@
         @change="fetchData"/>
     </div>
     <ve-histogram v-if="isShow" :data="chartData" :grid="grid" :title="title" :extend="extend" :settings="chartSettings"/>
-    <div class="function">
-      <el-button
-        v-for="item in areaList"
-        :key="item.id"
-        round
-        size="mini"
-        @click="areaChange(item.id)">{{ item.name }}</el-button>
-    </div>
+    <!--<div class="function">-->
+      <!--<el-button-->
+        <!--v-for="item in areaList"-->
+        <!--:key="item.id"-->
+        <!--round-->
+        <!--size="mini"-->
+        <!--@click="areaChange(item.id)">{{ item.name }}</el-button>-->
+    <!--</div>-->
   </div>
 </template>
 
@@ -38,51 +40,51 @@
 export default {
   name: 'WatchAlarmBar',
   data() {
-    this.extend = {
-      legend: {
-        show: false
-      },
-      xAxis: {
-        axisLabel: {
-          rotate: 30,
-          margin: 30,
-          textStyle: {
-            align: 'center'
-          }
-        }
-      },
-      yAxis: {
-        name: '报警次数',
-        position: 'left'
-      },
-      series: {
-        label: { show: true, position: 'top', formatter: '{c}' },
-        barWidth: 25
-      },
-      tooltip: { trigger: 'item', formatter: '{b}<br/>报警次数：{c}次' }
-    }
-    this.grid = {
-      right: 40,
-      top: 100,
-      bottom: 5
-    }
-    this.title = {
-      text: '水表告警统计'
-    }
-    this.chartSettings = {
-      itemStyle: {
-        barCategoryGap: 10
-      },
-
-      labelMap: {
-        'areaName': '分区',
-        'alarm': '报警数',
-        'warning': '预警数'
-      },
-      dimension: ['areaName'],
-      metrics: ['alarm', 'warning']
-    }
     return {
+      title:{
+        text: '水表告警统计'
+      },
+      chartSettings:{
+        itemStyle: {
+          barCategoryGap: 0
+        },
+        labelMap: {
+          'areaName': '分区',
+          'alarm': '报警数',
+          'warning': '预警数'
+        },
+        dimension: ['areaName'],
+        metrics: ['alarm', 'warning']
+      },
+      grid: {
+        right: 40,
+        top: 80,
+        bottom: 5
+      },
+      extend: {
+        legend: {
+          show: false
+        },
+        xAxis: {
+          axisLabel: {
+            rotate: 30,
+            margin: 30,
+            textStyle: {
+              align: 'center'
+            }
+          }
+        },
+        yAxis: {
+          name: '报警次数',
+          position: 'left',
+          max: 10
+        },
+        series: {
+          label: { show: true, position: 'top', formatter: '{c}' },
+          barWidth: 20
+        },
+        // tooltip: { trigger: 'item', formatter: '{b}<br/>报警次数：{c}次' }
+      },
       areaId: '',
       areaList: [],
       isShow: true,
@@ -100,43 +102,50 @@
         }
       },
       chartData: {
-        columns: ['wellTypeName', 'alarm'],
+        columns: ['areaName', 'alarm'],
         rows: []
       }
     }
   },
   mounted() {
     this.setDefaultTime('today')
-    this.fetchArea()
+    // this.fetchArea()
   },
   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()
-    },
+    // 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() {
       const params = {
-        areaId: this.areaId,
+        areaId: '110000',
         startTime: this.timeRange[0],
         endTime: this.timeRange[1]
       }
+      this.$emit('change', params)
       alarmBySecondArea(params).then(response => {
         this.isShow = false
         this.chartData.rows = response.data
+        const maxValue = Math.max.apply(Math, response.data.map(item=> {return item.alarm>item.warning?item.alarm: item.warning}))
+        if (maxValue < 10) {
+          this.extend.yAxis.max = 10
+        } else {
+          this.extend.yAxis = maxValue+1
+        }
         // this.chartData.rows = [
         //   { 'areaName': '科技楼及食堂', 'alarm': 53 },
         //   { 'areaName': 'A\\B\\C\\D\\E座', 'alarm': 78 },
@@ -186,10 +195,11 @@
     }
   }
   .statistic-container {
+
     .el-button{
       padding: 5px 10px;
     }
-    /*margin-bottom: 10px;*/
+    margin-bottom: 10px;
     text-align: center;
     .chart-tool-button {
       padding: 5px;
diff --git a/src/views/dashboard/components/waterCompare.vue b/src/views/dashboard/components/waterCompare.vue
new file mode 100644
index 0000000..8e34936
--- /dev/null
+++ b/src/views/dashboard/components/waterCompare.vue
@@ -0,0 +1,117 @@
+<!--分区用水对比图-->
+<template>
+  <div class="container">
+    <function-area ref="func" select="week" @change="fetchData"/>
+    <ve-histogram v-if="isShow" :data="chartData" :grid="grid" :title="title" :extend="extend" :settings="chartSettings"/>
+  </div>
+</template>
+
+<script>
+
+import 'echarts/lib/component/visualMap'
+import { alarmBySecondArea } from '@/api/overview'
+import { getDayTime } from '@/utils/dateutils'
+import { getDoorAreaTree } from '@/api/system/area'
+import FunctionArea from "./FunctionArea";
+export default {
+  name: 'WaterCompare',
+  components: {FunctionArea},
+  data() {
+    return {
+      title:{ text: '分区用水对比图'},
+      chartSettings:{
+        labelMap: {
+          'areaName': '分区',
+          'last': '报警数',
+          'now': '预警数'
+        },
+        dimension: ['areaName'],
+        metrics: ['last', 'now']
+      },
+      grid: {
+        right: 40,
+        top: 80,
+        bottom: 5
+      },
+      extend: {
+        legend: {
+          show: false
+        },
+        xAxis: {
+          axisLabel: {
+            rotate: 30,
+            margin: 30,
+            textStyle: {
+              align: 'center'
+            }
+          }
+        },
+        yAxis: {
+          name: '用水量(吨)',
+          position: 'left',
+          max: 10
+        },
+        series: {
+          label: { show: true, position: 'top', formatter: '{c}' },
+          barWidth: 20
+        },
+        // tooltip: { trigger: 'item', formatter: '{b}<br/>报警次数：{c}次' }
+      },
+      areaId: '',
+      areaList: [],
+      isShow: true,
+      defaultTimeRange: [],
+      chartData: {
+        columns: ['areaName', 'last', 'now'],
+        rows: []
+      },
+      nameDict:{
+        'today':['昨日用水','今日用水'],
+        'week':['近7日用水','对照时间用水',],
+        'month':['近30日用水','对照时间用水',],
+        'season':['上季度用水','本季度用水',],
+        'year':['上年度用水','本年度用水',],
+        'other':['对照时间用水','自选时间用水']
+      }
+    }
+  },
+  mounted(){
+    this.$refs.func.init()
+  },
+  methods: {
+    fetchData(timeRange) {
+      const params = {
+        areaId: '110000',
+        startTime: timeRange[0],
+        endTime: timeRange[1]
+      }
+      alarmBySecondArea(params).then(response => {
+        this.isShow = false
+        this.chartData.rows = response.data
+        const maxValue = Math.max.apply(Math, response.data.map(item=> {return item.last>item.now?item.last: item.now}))
+        if (maxValue < 10) {
+          this.extend.yAxis.max = 10
+        } else {
+          this.extend.yAxis = maxValue+1
+        }
+        // this.chartData.rows = [
+        //   { 'areaName': '科技楼及食堂', 'alarm': 53 },
+        //   { 'areaName': 'A\\B\\C\\D\\E座', 'alarm': 78 },
+        //   { 'areaName': '厂区', 'alarm': 78 }]
+        this.isShow = true
+      })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+  .container{
+    position:relative;
+    .function{
+      width:calc(100% - 120px);
+      height: 28px;
+      display: flex;
+      justify-content: center;
+    }
+  }
+</style>
diff --git a/src/views/dashboard/components/waterCountByAreaBar.vue b/src/views/dashboard/components/waterCountByAreaBar.vue
index 1bdac48..f4196f1 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"
@@ -18,14 +19,14 @@
         @change="fetchData"/>
     </div>
     <ve-histogram v-if="isShow" :data="chartData" :grid="grid" :title="title" :extend="extend" :settings="chartSettings"/>
-    <div class="function">
-      <el-button
-        v-for="item in areaList"
-        :key="item.id"
-        round
-        size="mini"
-        @click="areaChange(item.id)">{{ item.name }}</el-button>
-    </div>
+    <!--<div class="function">-->
+      <!--<el-button-->
+        <!--v-for="item in areaList"-->
+        <!--:key="item.id"-->
+        <!--round-->
+        <!--size="mini"-->
+        <!--@click="areaChange(item.id)">{{ item.name }}</el-button>-->
+    <!--</div>-->
   </div>
 </template>
 
@@ -106,8 +107,8 @@
     }
   },
   mounted() {
-    this.setDefaultTime('today')
-    this.fetchArea()
+    this.setDefaultTime('week')
+    // 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,9 @@
         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
+        const nowDayOfWeek =  6
+        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..07524f9 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: {
@@ -27,8 +39,7 @@
         text: '用水走势图'
       },
       chartSettings: {
-        labelMap: {
-        },
+        labelMap: {date:'日期'},
         metrics: [],
         dimension: ['date']
       },
@@ -52,13 +63,19 @@
     }
   },
   mounted() {
-    this.changeTime('month')
-    this.fetchArea()
+    // this.changeTime('month')
+    // this.fetchArea()
+  },
+  watch:{
+    query(val){
+      this.fetchData()
+    }
   },
   methods: {
     fetchArea() {
       getDoorAreaTree().then(response => {
         if (response.code === 200) {
+          debugger
           const area = response.data.filter(item => {
             return item.pid === '1'
           }).map(item => item.name)
@@ -73,15 +90,21 @@
       })
     },
     fetchData() {
-      countByDayFirst(this.listQuery).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
-          }
-          delete item.data
-          return item
-        })
-        this.chartData.rows = arr
+      countByDayFirst(this.query).then(response => {
+        if(response.data.length>0){
+          const arr = response.data.map((item)=> {
+            const result = {date: item.date}
+            for (let i = 0; i < item.data.length; i++) {
+              result[item.data[i].areaName] = item.data[i].count
+            }
+            return result
+          })
+          const area = response.data[0].data.map(item=>item.areaName)
+          this.chartData.columns = ['date', ...area]
+          this.chartSettings.metrics = area
+          this.chartSettings.labelMap = {'date':'日期'}
+          this.chartData.rows = arr
+        }
       })
       // 模拟数据
       // this.chartData.rows = [
@@ -126,17 +149,7 @@
 </script>
 <style lang="scss" scoped>
   .container{
-    position:relative;
-    .function{
-      /*position:absolute;*/
-      /*z-index:200;*/
-      /*bottom: 10px;*/
-      /*left: 0;*/
-      width:100%;
-      height: 28px;
-      display: flex;
-      justify-content: center;
-    }
+
   }
 </style>
 
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..a4ff85d
--- /dev/null
+++ b/src/views/dashboard/components/waterNote.vue
@@ -0,0 +1,142 @@
+<!--用水事记L -->
+<template>
+  <div class="container">
+    <div class="title">
+      青岛公司用水事记
+      <i v-if="!editMode" class="el-icon-edit edit-btn" style="float:right" @click="editNote"></i>
+      <i v-else class="el-icon-check edit-btn" style="float:right" @click="saveNote"></i>
+    </div>
+    <div class="content-div">
+      <el-scrollbar class="white-scrollbar">
+        <div v-for="(item,index) of currentList" :key="'note_'+index" class="content-line">
+          <div v-if="!editMode">{{index+1}}. {{item.content}}</div>
+          <div v-else class="edit-line">
+            <div style="margin-right: 5px">{{index+1}}. </div>
+            <el-input v-model="item.content" size="mini" maxlength="30"></el-input>
+            <div style="width: 85px;display: flex;justify-content: flex-end">
+              <i v-show="index!==0" class="el-icon-top" @click="toTop(index)"></i>
+              <i v-show="index!==currentList.length-1" class="el-icon-bottom" @click="toBottom(index)"></i>
+              <i class="el-icon-delete" @click="deleteItem(index)"></i>
+            </div>
+          </div>
+        </div>
+        <div v-if="editMode&&currentList.length<10" class="content-line">
+          <i class="el-icon-circle-plus-outline icon-btn" @click="addItem()"></i>
+        </div>
+      </el-scrollbar>
+    </div>
+  </div>
+</template>
+
+<script>
+import { getNoteList, updateNoteList } from '@/api/dashboard'
+import { getDoorAreaTree } from '@/api/system/area'
+export default {
+  name: 'WaterNote',
+  props:{
+    query: {
+      type: Object,
+      default:()=>{
+        return {
+          areaId: '',
+          startTime: '',
+          endTime: ''
+        }
+      }
+    }
+  },
+  data() {
+    return {
+      editMode: false, // 编辑模式
+      originList:[], // 原始列表
+      currentList:[] // 当前列表
+    }
+  },
+  mounted() {
+    this.fetchData()
+  },
+  methods: {
+    // 获取统计数据
+    fetchData() {
+      this.currentList = [
+        { 'content': '测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试', 'num': 1 },
+        { 'content': '测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试', 'num': 1 },
+        { 'content': '测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试', 'num': 1 },
+        { 'content': '测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试', 'num': 1 },
+        { 'content': '测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试', 'num': 1 }
+      ]
+      this.originList = JSON.parse(JSON.stringify(this.currentList))
+      // getNoteList().then(response => {
+      //   this.currentList = response.data
+      // })
+    },
+    toTop(index){
+      this.currentList[index-1] = this.currentList.splice(index,1,this.currentList[index-1])[0]
+    },
+    toBottom(index){
+      this.currentList[index] = this.currentList.splice(index+1,1,this.currentList[index])[0]
+    },
+    deleteItem(index){
+      this.currentList.splice(index,1)
+    },
+    addItem(){
+      this.currentList.push({content:'',num:99})
+    },
+    // 开启编辑
+    editNote(){
+      this.editMode = true
+    },
+    // 保存用水事记
+    saveNote(){
+      const currentList = this.currentList.map((item, index)=>{
+        return {content: item.content, num: index}
+      })
+      console.log(currentList)
+      updateNoteList(currentList).then(res=>{
+        this.editMode = false
+        this.$message.success('保存成功')
+      }).catch(e=>{
+        // this.currentList = JSON.parse(JSON.stringify(this.originList))
+      })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+  @import "@/styles/variables.scss";
+  .container{
+    position:relative;
+    height: 428px;
+    display: flex;
+    flex-direction: column;
+    .content-div{
+      height: 410px;
+      .content-line{
+        line-height: 30px;
+        font-size: 16px;
+      }
+      .edit-line{
+        width: 100%;
+        display: flex;
+        align-items: center;
+      }
+    }
+  }
+  .edit-btn, .icon-btn{
+    &:hover{
+      cursor: pointer;
+      color: $themeColor;
+    }
+  }
+</style>
+<style lang="scss">
+  .white-scrollbar{
+    height: 100%;
+    .el-scrollbar__wrap{
+      overflow-x: hidden;
+      padding: 10px 0px;
+      background-color: #FFFFFF;
+    }
+  }
+
+</style>
diff --git a/src/views/dashboard/index.vue b/src/views/dashboard/index.vue
index fdbc38a..69d09ea 100644
--- a/src/views/dashboard/index.vue
+++ b/src/views/dashboard/index.vue
@@ -1,54 +1,55 @@
 <template>
   <div class="dashboard-container" style="background-color: white">
     <panel-group ref="panelgroup"/>
-    <el-row :gutter="10">
-      <!-- 用水统计图 -->
+    <el-row>
+      <!--设备在线数量统计-->
       <el-col :span="12">
         <el-card shadow="never">
-          <water-count-by-dept-bar/>
+          <water-compare/>
+        </el-card>
+      </el-col>
+      <!--设备数量统计-->
+      <el-col v-if="hasPerm('/statics/deviceStaticsByType')" :span="12">
+        <el-card shadow="never">
+          <device-count/>
+        </el-card>
+      </el-col>
+      <!-- 用水统计图 -->
+      <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 :query="listQuery1" ref="waterCountPie"/>
         </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/>
+          <water-count-by-day :query="listQuery1" ref="waterCountDay"/>
         </el-card>
       </el-col>
 
-      <!--设备数量统计-->
-      <el-col v-if="hasPerm('/statics/deviceStaticsByType')" :span="12">
+      <!--水表报警次数统计，柱状图-->
+      <el-col v-if="hasPerm('/statics/alarmsByDay')" :span="12">
         <el-card shadow="never">
-          <device-count/>
+          <watch-alarm-bar @change="changeAlarmQuery"/>
+        </el-card>
+      </el-col>
+      <!--报警饼图统计-->
+      <el-col v-if="hasPerm('/statics/alarmsByDay')" :span="12">
+        <el-card shadow="never">
+          <alarm-count-by-dept :query="listQuery2"/>
         </el-card>
       </el-col>
     </el-row>
@@ -64,20 +65,26 @@
 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";
+import AlarmCountByDept from "./components/AlarmCountByDept";
+import WaterCompare from "./components/waterCompare";
 
 export default {
   name: 'Dashboard',
   components: {
+    WaterCompare,
+    AlarmCountByDept,
+    WaterNote,
     WatchAlarmBar,
     WaterCountByAreaBar,
     WaterCountByDay,
     WaterCountByDeptBar,
-    WaterCountByDepy,
+    WaterCountByDept,
     JobByStatus,
     AlarmByDays,
     PanelGroup,
@@ -108,12 +115,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:'110000',
+        startTime:new Date().Format('yyyy-MM-dd'),
+        endTime:new Date().Format('yyyy-MM-dd')
+      } // 分区报警查询条件
+    }
+  },
   watch: {
     needRefresh(val) {
       // 需要刷新
       if (val) {
         console.log('refresh dashboard')
-        debugger
         this.$refs.panelgroup.refresh()
       }
     }
@@ -124,6 +144,14 @@
   methods: {
     webSocket() {
       this.$store.dispatch('initWebSocket')
+    },
+    // 切换分区查询条件
+    changeWaterQuery(listQuery1){
+      this.listQuery1 = listQuery1
+    },
+    // 切换报警查询条件
+    changeAlarmQuery(listQuery2){
+      this.listQuery2 = listQuery2
     }
   }
 }
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..6ad37f1 100644
--- a/src/api/dashboard.js
+++ b/src/api/dashboard.js
@@ -0,0 +1,92 @@
+/**
+ * 井总览模块接口
+ */
+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: '/device/valve/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
+  })
+}
+
+
+// 用水事记查询
+export function getNoteList() {
+  return request({
+    // url: '/note/list',
+    url: 'waterMeterData/count',
+    method: 'get',
+    params
+  })
+}
+
+// 用水事记更新
+export function updateNoteList(params) {
+  return request({
+    // url: '/note/update',
+    url: 'waterMeterData/count',
+    method: 'post',
+    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/AlarmCountByDept.vue b/src/views/dashboard/components/AlarmCountByDept.vue
new file mode 100644
index 0000000..91df51d
--- /dev/null
+++ b/src/views/dashboard/components/AlarmCountByDept.vue
@@ -0,0 +1,80 @@
+<!--suppress ALL -->
+<template>
+  <div class="container">
+    <div style="height: 28px;margin-bottom: 10px;"/>
+    <ve-pie :data="chartData" :extend="extend" :title="title"/>
+
+  </div>
+</template>
+
+<script>
+import { alarmBySecondArea } from '@/api/overview'
+import { getDoorAreaTree } from '@/api/system/area'
+export default {
+  name: 'AlarmCountByDept',
+  props:{
+    query: {
+      type: Object,
+      default:()=>{
+        return {
+          areaId: '',
+          startTime: '',
+          endTime: ''
+        }
+      }
+    }
+  },
+  data() {
+    return {
+      chartData: {
+        columns: ['areaName', 'alarm'],
+        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': '分区',
+          'alarm': '报警数'
+        }
+      }
+    }
+  },
+  watch:{
+    query(val){
+      this.fetchData()
+    }
+  },
+  methods: {
+    // 获取统计数据
+    fetchData() {
+      alarmBySecondArea(this.query).then(response => {
+        debugger
+        this.chartData.rows = response.data
+      })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+  .container{
+
+  }
+</style>
diff --git a/src/views/dashboard/components/DeviceCount.vue b/src/views/dashboard/components/DeviceCount.vue
index 6c36bcb..453fa09 100644
--- a/src/views/dashboard/components/DeviceCount.vue
+++ b/src/views/dashboard/components/DeviceCount.vue
@@ -1,5 +1,9 @@
 <template>
-  <ve-bar :data="chartData" :grid="grid" :title="title" :extend="extend" :settings="chartSettings"/>
+  <div>
+    <div style="height: 28px;margin-bottom: 10px;"/>
+    <ve-bar :data="chartData" :grid="grid" :title="title" :extend="extend" :settings="chartSettings"/>
+  </div>
+
 </template>
 
 <script>
diff --git a/src/views/dashboard/components/FunctionArea.vue b/src/views/dashboard/components/FunctionArea.vue
new file mode 100644
index 0000000..e628c12
--- /dev/null
+++ b/src/views/dashboard/components/FunctionArea.vue
@@ -0,0 +1,128 @@
+<!--
+ * @Description:
+ * @Author: 王晓颖
+ * @Date:
+ -->
+<template>
+  <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')">本周</el-button>
+    <el-button round size="mini" @click="setDefaultTime('today')">今日</el-button>
+    <el-date-picker
+      v-model="timeRange"
+      :picker-options="pickerOptions"
+      type="daterange"
+      range-separator="至"
+      start-placeholder="开始日期"
+      end-placeholder="结束日期"
+      value-format="yyyy-MM-dd"
+      size="mini"
+      style="width:250px;margin-right: 20px"
+      @change="fetchData"/>
+  </div>
+</template>
+
+<script>
+  import { getDayTime } from '@/utils/dateutils'
+  export default {
+    name: "FunctionArea",
+    props:{
+      select:{
+        type: String,
+        default: 'today'
+      }
+    },
+    data() {
+      return {
+        timeRange: [],
+        pickerOptions: {
+          disabledDate: function(date) {
+            var oDate1 = new Date(date)
+            var oDate2 = new Date()
+            if (oDate1.getTime() > oDate2.getTime()) {
+              return true
+            } else {
+              return false
+            }
+          }
+        }
+      }
+    },
+    methods: {
+      init(){
+        this.setDefaultTime(this.select)
+      },
+      change(){
+        this.$emit('change', this.timeRange)
+      },
+      setDefaultTime(val) {
+        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
+          if (tMonth.toString().length === 1) {
+            tMonth = '0' + tMonth
+          }
+          const beginTime = tYear + '-' + tMonth + '-01'
+          const endTime = getDayTime(new Date().getTime())
+          this.timeRange = [beginTime, endTime.Format('yyyy-MM-dd')]
+        } else if (val === 'week') {
+          // const nowDayOfWeek =  new Date().getDay()-1
+          const nowDayOfWeek =  6
+          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') {
+          this.timeRange = [getDayTime(new Date().getTime()).Format('yyyy-MM-dd'), getDayTime(new Date().getTime()).Format('yyyy-MM-dd')]
+        }
+        this.change()
+      }
+    }
+  }
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  .statistic-container {
+
+    .el-button{
+      padding: 5px 10px;
+    }
+    margin-bottom: 10px;
+    text-align: center;
+    .chart-tool-button {
+      padding: 5px;
+      line-height: 16px;
+      margin-top: 5px;
+      font-size: 14px;
+    }
+    .chart-tool-button:hover {
+      background-color: #8cc5ff;
+      cursor: pointer;
+      color: white;
+    }
+    .chart-tool-button:active {
+      background-color: #8cc5ff;
+      color: white;
+    }
+  }
+  .selected {
+    background-color: #8cc5ff;
+    color: white;
+  }
+</style>
diff --git a/src/views/dashboard/components/PanelGroup.vue b/src/views/dashboard/components/PanelGroup.vue
index b72d289..7be90a7 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,32 @@
           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',
           permission: '/device/list'
         },
         {
@@ -67,11 +69,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 +85,10 @@
   },
   mounted() {
     this.getWater()
-    this.getWellCount()
+    // this.getWellCount()
     this.getDeviceCount()
     this.getAlarmCount()
-    this.getJobCount()
+    // this.getJobCount()
   },
   methods: {
     refresh() {
@@ -97,24 +99,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.production?parseFloat(response.data.production).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 +168,7 @@
   //   &:hover {
   //     .card-panel-icon-wrapper {
   //       color: #fff;
-        
+
   //     }
 
   //     .icon-people {
diff --git a/src/views/dashboard/components/watchAlarmBar.vue b/src/views/dashboard/components/watchAlarmBar.vue
index 13824f3..6a18ef6 100644
--- a/src/views/dashboard/components/watchAlarmBar.vue
+++ b/src/views/dashboard/components/watchAlarmBar.vue
@@ -1,9 +1,11 @@
+<!--水表告警统计-->
 <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"
@@ -18,14 +20,14 @@
         @change="fetchData"/>
     </div>
     <ve-histogram v-if="isShow" :data="chartData" :grid="grid" :title="title" :extend="extend" :settings="chartSettings"/>
-    <div class="function">
-      <el-button
-        v-for="item in areaList"
-        :key="item.id"
-        round
-        size="mini"
-        @click="areaChange(item.id)">{{ item.name }}</el-button>
-    </div>
+    <!--<div class="function">-->
+      <!--<el-button-->
+        <!--v-for="item in areaList"-->
+        <!--:key="item.id"-->
+        <!--round-->
+        <!--size="mini"-->
+        <!--@click="areaChange(item.id)">{{ item.name }}</el-button>-->
+    <!--</div>-->
   </div>
 </template>
 
@@ -38,51 +40,51 @@
 export default {
   name: 'WatchAlarmBar',
   data() {
-    this.extend = {
-      legend: {
-        show: false
-      },
-      xAxis: {
-        axisLabel: {
-          rotate: 30,
-          margin: 30,
-          textStyle: {
-            align: 'center'
-          }
-        }
-      },
-      yAxis: {
-        name: '报警次数',
-        position: 'left'
-      },
-      series: {
-        label: { show: true, position: 'top', formatter: '{c}' },
-        barWidth: 25
-      },
-      tooltip: { trigger: 'item', formatter: '{b}<br/>报警次数：{c}次' }
-    }
-    this.grid = {
-      right: 40,
-      top: 100,
-      bottom: 5
-    }
-    this.title = {
-      text: '水表告警统计'
-    }
-    this.chartSettings = {
-      itemStyle: {
-        barCategoryGap: 10
-      },
-
-      labelMap: {
-        'areaName': '分区',
-        'alarm': '报警数',
-        'warning': '预警数'
-      },
-      dimension: ['areaName'],
-      metrics: ['alarm', 'warning']
-    }
     return {
+      title:{
+        text: '水表告警统计'
+      },
+      chartSettings:{
+        itemStyle: {
+          barCategoryGap: 0
+        },
+        labelMap: {
+          'areaName': '分区',
+          'alarm': '报警数',
+          'warning': '预警数'
+        },
+        dimension: ['areaName'],
+        metrics: ['alarm', 'warning']
+      },
+      grid: {
+        right: 40,
+        top: 80,
+        bottom: 5
+      },
+      extend: {
+        legend: {
+          show: false
+        },
+        xAxis: {
+          axisLabel: {
+            rotate: 30,
+            margin: 30,
+            textStyle: {
+              align: 'center'
+            }
+          }
+        },
+        yAxis: {
+          name: '报警次数',
+          position: 'left',
+          max: 10
+        },
+        series: {
+          label: { show: true, position: 'top', formatter: '{c}' },
+          barWidth: 20
+        },
+        // tooltip: { trigger: 'item', formatter: '{b}<br/>报警次数：{c}次' }
+      },
       areaId: '',
       areaList: [],
       isShow: true,
@@ -100,43 +102,50 @@
         }
       },
       chartData: {
-        columns: ['wellTypeName', 'alarm'],
+        columns: ['areaName', 'alarm'],
         rows: []
       }
     }
   },
   mounted() {
     this.setDefaultTime('today')
-    this.fetchArea()
+    // this.fetchArea()
   },
   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()
-    },
+    // 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() {
       const params = {
-        areaId: this.areaId,
+        areaId: '110000',
         startTime: this.timeRange[0],
         endTime: this.timeRange[1]
       }
+      this.$emit('change', params)
       alarmBySecondArea(params).then(response => {
         this.isShow = false
         this.chartData.rows = response.data
+        const maxValue = Math.max.apply(Math, response.data.map(item=> {return item.alarm>item.warning?item.alarm: item.warning}))
+        if (maxValue < 10) {
+          this.extend.yAxis.max = 10
+        } else {
+          this.extend.yAxis = maxValue+1
+        }
         // this.chartData.rows = [
         //   { 'areaName': '科技楼及食堂', 'alarm': 53 },
         //   { 'areaName': 'A\\B\\C\\D\\E座', 'alarm': 78 },
@@ -186,10 +195,11 @@
     }
   }
   .statistic-container {
+
     .el-button{
       padding: 5px 10px;
     }
-    /*margin-bottom: 10px;*/
+    margin-bottom: 10px;
     text-align: center;
     .chart-tool-button {
       padding: 5px;
diff --git a/src/views/dashboard/components/waterCompare.vue b/src/views/dashboard/components/waterCompare.vue
new file mode 100644
index 0000000..8e34936
--- /dev/null
+++ b/src/views/dashboard/components/waterCompare.vue
@@ -0,0 +1,117 @@
+<!--分区用水对比图-->
+<template>
+  <div class="container">
+    <function-area ref="func" select="week" @change="fetchData"/>
+    <ve-histogram v-if="isShow" :data="chartData" :grid="grid" :title="title" :extend="extend" :settings="chartSettings"/>
+  </div>
+</template>
+
+<script>
+
+import 'echarts/lib/component/visualMap'
+import { alarmBySecondArea } from '@/api/overview'
+import { getDayTime } from '@/utils/dateutils'
+import { getDoorAreaTree } from '@/api/system/area'
+import FunctionArea from "./FunctionArea";
+export default {
+  name: 'WaterCompare',
+  components: {FunctionArea},
+  data() {
+    return {
+      title:{ text: '分区用水对比图'},
+      chartSettings:{
+        labelMap: {
+          'areaName': '分区',
+          'last': '报警数',
+          'now': '预警数'
+        },
+        dimension: ['areaName'],
+        metrics: ['last', 'now']
+      },
+      grid: {
+        right: 40,
+        top: 80,
+        bottom: 5
+      },
+      extend: {
+        legend: {
+          show: false
+        },
+        xAxis: {
+          axisLabel: {
+            rotate: 30,
+            margin: 30,
+            textStyle: {
+              align: 'center'
+            }
+          }
+        },
+        yAxis: {
+          name: '用水量(吨)',
+          position: 'left',
+          max: 10
+        },
+        series: {
+          label: { show: true, position: 'top', formatter: '{c}' },
+          barWidth: 20
+        },
+        // tooltip: { trigger: 'item', formatter: '{b}<br/>报警次数：{c}次' }
+      },
+      areaId: '',
+      areaList: [],
+      isShow: true,
+      defaultTimeRange: [],
+      chartData: {
+        columns: ['areaName', 'last', 'now'],
+        rows: []
+      },
+      nameDict:{
+        'today':['昨日用水','今日用水'],
+        'week':['近7日用水','对照时间用水',],
+        'month':['近30日用水','对照时间用水',],
+        'season':['上季度用水','本季度用水',],
+        'year':['上年度用水','本年度用水',],
+        'other':['对照时间用水','自选时间用水']
+      }
+    }
+  },
+  mounted(){
+    this.$refs.func.init()
+  },
+  methods: {
+    fetchData(timeRange) {
+      const params = {
+        areaId: '110000',
+        startTime: timeRange[0],
+        endTime: timeRange[1]
+      }
+      alarmBySecondArea(params).then(response => {
+        this.isShow = false
+        this.chartData.rows = response.data
+        const maxValue = Math.max.apply(Math, response.data.map(item=> {return item.last>item.now?item.last: item.now}))
+        if (maxValue < 10) {
+          this.extend.yAxis.max = 10
+        } else {
+          this.extend.yAxis = maxValue+1
+        }
+        // this.chartData.rows = [
+        //   { 'areaName': '科技楼及食堂', 'alarm': 53 },
+        //   { 'areaName': 'A\\B\\C\\D\\E座', 'alarm': 78 },
+        //   { 'areaName': '厂区', 'alarm': 78 }]
+        this.isShow = true
+      })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+  .container{
+    position:relative;
+    .function{
+      width:calc(100% - 120px);
+      height: 28px;
+      display: flex;
+      justify-content: center;
+    }
+  }
+</style>
diff --git a/src/views/dashboard/components/waterCountByAreaBar.vue b/src/views/dashboard/components/waterCountByAreaBar.vue
index 1bdac48..f4196f1 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"
@@ -18,14 +19,14 @@
         @change="fetchData"/>
     </div>
     <ve-histogram v-if="isShow" :data="chartData" :grid="grid" :title="title" :extend="extend" :settings="chartSettings"/>
-    <div class="function">
-      <el-button
-        v-for="item in areaList"
-        :key="item.id"
-        round
-        size="mini"
-        @click="areaChange(item.id)">{{ item.name }}</el-button>
-    </div>
+    <!--<div class="function">-->
+      <!--<el-button-->
+        <!--v-for="item in areaList"-->
+        <!--:key="item.id"-->
+        <!--round-->
+        <!--size="mini"-->
+        <!--@click="areaChange(item.id)">{{ item.name }}</el-button>-->
+    <!--</div>-->
   </div>
 </template>
 
@@ -106,8 +107,8 @@
     }
   },
   mounted() {
-    this.setDefaultTime('today')
-    this.fetchArea()
+    this.setDefaultTime('week')
+    // 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,9 @@
         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
+        const nowDayOfWeek =  6
+        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..07524f9 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: {
@@ -27,8 +39,7 @@
         text: '用水走势图'
       },
       chartSettings: {
-        labelMap: {
-        },
+        labelMap: {date:'日期'},
         metrics: [],
         dimension: ['date']
       },
@@ -52,13 +63,19 @@
     }
   },
   mounted() {
-    this.changeTime('month')
-    this.fetchArea()
+    // this.changeTime('month')
+    // this.fetchArea()
+  },
+  watch:{
+    query(val){
+      this.fetchData()
+    }
   },
   methods: {
     fetchArea() {
       getDoorAreaTree().then(response => {
         if (response.code === 200) {
+          debugger
           const area = response.data.filter(item => {
             return item.pid === '1'
           }).map(item => item.name)
@@ -73,15 +90,21 @@
       })
     },
     fetchData() {
-      countByDayFirst(this.listQuery).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
-          }
-          delete item.data
-          return item
-        })
-        this.chartData.rows = arr
+      countByDayFirst(this.query).then(response => {
+        if(response.data.length>0){
+          const arr = response.data.map((item)=> {
+            const result = {date: item.date}
+            for (let i = 0; i < item.data.length; i++) {
+              result[item.data[i].areaName] = item.data[i].count
+            }
+            return result
+          })
+          const area = response.data[0].data.map(item=>item.areaName)
+          this.chartData.columns = ['date', ...area]
+          this.chartSettings.metrics = area
+          this.chartSettings.labelMap = {'date':'日期'}
+          this.chartData.rows = arr
+        }
       })
       // 模拟数据
       // this.chartData.rows = [
@@ -126,17 +149,7 @@
 </script>
 <style lang="scss" scoped>
   .container{
-    position:relative;
-    .function{
-      /*position:absolute;*/
-      /*z-index:200;*/
-      /*bottom: 10px;*/
-      /*left: 0;*/
-      width:100%;
-      height: 28px;
-      display: flex;
-      justify-content: center;
-    }
+
   }
 </style>
 
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..a4ff85d
--- /dev/null
+++ b/src/views/dashboard/components/waterNote.vue
@@ -0,0 +1,142 @@
+<!--用水事记L -->
+<template>
+  <div class="container">
+    <div class="title">
+      青岛公司用水事记
+      <i v-if="!editMode" class="el-icon-edit edit-btn" style="float:right" @click="editNote"></i>
+      <i v-else class="el-icon-check edit-btn" style="float:right" @click="saveNote"></i>
+    </div>
+    <div class="content-div">
+      <el-scrollbar class="white-scrollbar">
+        <div v-for="(item,index) of currentList" :key="'note_'+index" class="content-line">
+          <div v-if="!editMode">{{index+1}}. {{item.content}}</div>
+          <div v-else class="edit-line">
+            <div style="margin-right: 5px">{{index+1}}. </div>
+            <el-input v-model="item.content" size="mini" maxlength="30"></el-input>
+            <div style="width: 85px;display: flex;justify-content: flex-end">
+              <i v-show="index!==0" class="el-icon-top" @click="toTop(index)"></i>
+              <i v-show="index!==currentList.length-1" class="el-icon-bottom" @click="toBottom(index)"></i>
+              <i class="el-icon-delete" @click="deleteItem(index)"></i>
+            </div>
+          </div>
+        </div>
+        <div v-if="editMode&&currentList.length<10" class="content-line">
+          <i class="el-icon-circle-plus-outline icon-btn" @click="addItem()"></i>
+        </div>
+      </el-scrollbar>
+    </div>
+  </div>
+</template>
+
+<script>
+import { getNoteList, updateNoteList } from '@/api/dashboard'
+import { getDoorAreaTree } from '@/api/system/area'
+export default {
+  name: 'WaterNote',
+  props:{
+    query: {
+      type: Object,
+      default:()=>{
+        return {
+          areaId: '',
+          startTime: '',
+          endTime: ''
+        }
+      }
+    }
+  },
+  data() {
+    return {
+      editMode: false, // 编辑模式
+      originList:[], // 原始列表
+      currentList:[] // 当前列表
+    }
+  },
+  mounted() {
+    this.fetchData()
+  },
+  methods: {
+    // 获取统计数据
+    fetchData() {
+      this.currentList = [
+        { 'content': '测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试', 'num': 1 },
+        { 'content': '测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试', 'num': 1 },
+        { 'content': '测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试', 'num': 1 },
+        { 'content': '测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试', 'num': 1 },
+        { 'content': '测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试', 'num': 1 }
+      ]
+      this.originList = JSON.parse(JSON.stringify(this.currentList))
+      // getNoteList().then(response => {
+      //   this.currentList = response.data
+      // })
+    },
+    toTop(index){
+      this.currentList[index-1] = this.currentList.splice(index,1,this.currentList[index-1])[0]
+    },
+    toBottom(index){
+      this.currentList[index] = this.currentList.splice(index+1,1,this.currentList[index])[0]
+    },
+    deleteItem(index){
+      this.currentList.splice(index,1)
+    },
+    addItem(){
+      this.currentList.push({content:'',num:99})
+    },
+    // 开启编辑
+    editNote(){
+      this.editMode = true
+    },
+    // 保存用水事记
+    saveNote(){
+      const currentList = this.currentList.map((item, index)=>{
+        return {content: item.content, num: index}
+      })
+      console.log(currentList)
+      updateNoteList(currentList).then(res=>{
+        this.editMode = false
+        this.$message.success('保存成功')
+      }).catch(e=>{
+        // this.currentList = JSON.parse(JSON.stringify(this.originList))
+      })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+  @import "@/styles/variables.scss";
+  .container{
+    position:relative;
+    height: 428px;
+    display: flex;
+    flex-direction: column;
+    .content-div{
+      height: 410px;
+      .content-line{
+        line-height: 30px;
+        font-size: 16px;
+      }
+      .edit-line{
+        width: 100%;
+        display: flex;
+        align-items: center;
+      }
+    }
+  }
+  .edit-btn, .icon-btn{
+    &:hover{
+      cursor: pointer;
+      color: $themeColor;
+    }
+  }
+</style>
+<style lang="scss">
+  .white-scrollbar{
+    height: 100%;
+    .el-scrollbar__wrap{
+      overflow-x: hidden;
+      padding: 10px 0px;
+      background-color: #FFFFFF;
+    }
+  }
+
+</style>
diff --git a/src/views/dashboard/index.vue b/src/views/dashboard/index.vue
index fdbc38a..69d09ea 100644
--- a/src/views/dashboard/index.vue
+++ b/src/views/dashboard/index.vue
@@ -1,54 +1,55 @@
 <template>
   <div class="dashboard-container" style="background-color: white">
     <panel-group ref="panelgroup"/>
-    <el-row :gutter="10">
-      <!-- 用水统计图 -->
+    <el-row>
+      <!--设备在线数量统计-->
       <el-col :span="12">
         <el-card shadow="never">
-          <water-count-by-dept-bar/>
+          <water-compare/>
+        </el-card>
+      </el-col>
+      <!--设备数量统计-->
+      <el-col v-if="hasPerm('/statics/deviceStaticsByType')" :span="12">
+        <el-card shadow="never">
+          <device-count/>
+        </el-card>
+      </el-col>
+      <!-- 用水统计图 -->
+      <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 :query="listQuery1" ref="waterCountPie"/>
         </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/>
+          <water-count-by-day :query="listQuery1" ref="waterCountDay"/>
         </el-card>
       </el-col>
 
-      <!--设备数量统计-->
-      <el-col v-if="hasPerm('/statics/deviceStaticsByType')" :span="12">
+      <!--水表报警次数统计，柱状图-->
+      <el-col v-if="hasPerm('/statics/alarmsByDay')" :span="12">
         <el-card shadow="never">
-          <device-count/>
+          <watch-alarm-bar @change="changeAlarmQuery"/>
+        </el-card>
+      </el-col>
+      <!--报警饼图统计-->
+      <el-col v-if="hasPerm('/statics/alarmsByDay')" :span="12">
+        <el-card shadow="never">
+          <alarm-count-by-dept :query="listQuery2"/>
         </el-card>
       </el-col>
     </el-row>
@@ -64,20 +65,26 @@
 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";
+import AlarmCountByDept from "./components/AlarmCountByDept";
+import WaterCompare from "./components/waterCompare";
 
 export default {
   name: 'Dashboard',
   components: {
+    WaterCompare,
+    AlarmCountByDept,
+    WaterNote,
     WatchAlarmBar,
     WaterCountByAreaBar,
     WaterCountByDay,
     WaterCountByDeptBar,
-    WaterCountByDepy,
+    WaterCountByDept,
     JobByStatus,
     AlarmByDays,
     PanelGroup,
@@ -108,12 +115,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:'110000',
+        startTime:new Date().Format('yyyy-MM-dd'),
+        endTime:new Date().Format('yyyy-MM-dd')
+      } // 分区报警查询条件
+    }
+  },
   watch: {
     needRefresh(val) {
       // 需要刷新
       if (val) {
         console.log('refresh dashboard')
-        debugger
         this.$refs.panelgroup.refresh()
       }
     }
@@ -124,6 +144,14 @@
   methods: {
     webSocket() {
       this.$store.dispatch('initWebSocket')
+    },
+    // 切换分区查询条件
+    changeWaterQuery(listQuery1){
+      this.listQuery1 = listQuery1
+    },
+    // 切换报警查询条件
+    changeAlarmQuery(listQuery2){
+      this.listQuery2 = listQuery2
     }
   }
 }
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..6ad37f1 100644
--- a/src/api/dashboard.js
+++ b/src/api/dashboard.js
@@ -0,0 +1,92 @@
+/**
+ * 井总览模块接口
+ */
+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: '/device/valve/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
+  })
+}
+
+
+// 用水事记查询
+export function getNoteList() {
+  return request({
+    // url: '/note/list',
+    url: 'waterMeterData/count',
+    method: 'get',
+    params
+  })
+}
+
+// 用水事记更新
+export function updateNoteList(params) {
+  return request({
+    // url: '/note/update',
+    url: 'waterMeterData/count',
+    method: 'post',
+    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/AlarmCountByDept.vue b/src/views/dashboard/components/AlarmCountByDept.vue
new file mode 100644
index 0000000..91df51d
--- /dev/null
+++ b/src/views/dashboard/components/AlarmCountByDept.vue
@@ -0,0 +1,80 @@
+<!--suppress ALL -->
+<template>
+  <div class="container">
+    <div style="height: 28px;margin-bottom: 10px;"/>
+    <ve-pie :data="chartData" :extend="extend" :title="title"/>
+
+  </div>
+</template>
+
+<script>
+import { alarmBySecondArea } from '@/api/overview'
+import { getDoorAreaTree } from '@/api/system/area'
+export default {
+  name: 'AlarmCountByDept',
+  props:{
+    query: {
+      type: Object,
+      default:()=>{
+        return {
+          areaId: '',
+          startTime: '',
+          endTime: ''
+        }
+      }
+    }
+  },
+  data() {
+    return {
+      chartData: {
+        columns: ['areaName', 'alarm'],
+        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': '分区',
+          'alarm': '报警数'
+        }
+      }
+    }
+  },
+  watch:{
+    query(val){
+      this.fetchData()
+    }
+  },
+  methods: {
+    // 获取统计数据
+    fetchData() {
+      alarmBySecondArea(this.query).then(response => {
+        debugger
+        this.chartData.rows = response.data
+      })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+  .container{
+
+  }
+</style>
diff --git a/src/views/dashboard/components/DeviceCount.vue b/src/views/dashboard/components/DeviceCount.vue
index 6c36bcb..453fa09 100644
--- a/src/views/dashboard/components/DeviceCount.vue
+++ b/src/views/dashboard/components/DeviceCount.vue
@@ -1,5 +1,9 @@
 <template>
-  <ve-bar :data="chartData" :grid="grid" :title="title" :extend="extend" :settings="chartSettings"/>
+  <div>
+    <div style="height: 28px;margin-bottom: 10px;"/>
+    <ve-bar :data="chartData" :grid="grid" :title="title" :extend="extend" :settings="chartSettings"/>
+  </div>
+
 </template>
 
 <script>
diff --git a/src/views/dashboard/components/FunctionArea.vue b/src/views/dashboard/components/FunctionArea.vue
new file mode 100644
index 0000000..e628c12
--- /dev/null
+++ b/src/views/dashboard/components/FunctionArea.vue
@@ -0,0 +1,128 @@
+<!--
+ * @Description:
+ * @Author: 王晓颖
+ * @Date:
+ -->
+<template>
+  <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')">本周</el-button>
+    <el-button round size="mini" @click="setDefaultTime('today')">今日</el-button>
+    <el-date-picker
+      v-model="timeRange"
+      :picker-options="pickerOptions"
+      type="daterange"
+      range-separator="至"
+      start-placeholder="开始日期"
+      end-placeholder="结束日期"
+      value-format="yyyy-MM-dd"
+      size="mini"
+      style="width:250px;margin-right: 20px"
+      @change="fetchData"/>
+  </div>
+</template>
+
+<script>
+  import { getDayTime } from '@/utils/dateutils'
+  export default {
+    name: "FunctionArea",
+    props:{
+      select:{
+        type: String,
+        default: 'today'
+      }
+    },
+    data() {
+      return {
+        timeRange: [],
+        pickerOptions: {
+          disabledDate: function(date) {
+            var oDate1 = new Date(date)
+            var oDate2 = new Date()
+            if (oDate1.getTime() > oDate2.getTime()) {
+              return true
+            } else {
+              return false
+            }
+          }
+        }
+      }
+    },
+    methods: {
+      init(){
+        this.setDefaultTime(this.select)
+      },
+      change(){
+        this.$emit('change', this.timeRange)
+      },
+      setDefaultTime(val) {
+        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
+          if (tMonth.toString().length === 1) {
+            tMonth = '0' + tMonth
+          }
+          const beginTime = tYear + '-' + tMonth + '-01'
+          const endTime = getDayTime(new Date().getTime())
+          this.timeRange = [beginTime, endTime.Format('yyyy-MM-dd')]
+        } else if (val === 'week') {
+          // const nowDayOfWeek =  new Date().getDay()-1
+          const nowDayOfWeek =  6
+          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') {
+          this.timeRange = [getDayTime(new Date().getTime()).Format('yyyy-MM-dd'), getDayTime(new Date().getTime()).Format('yyyy-MM-dd')]
+        }
+        this.change()
+      }
+    }
+  }
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  .statistic-container {
+
+    .el-button{
+      padding: 5px 10px;
+    }
+    margin-bottom: 10px;
+    text-align: center;
+    .chart-tool-button {
+      padding: 5px;
+      line-height: 16px;
+      margin-top: 5px;
+      font-size: 14px;
+    }
+    .chart-tool-button:hover {
+      background-color: #8cc5ff;
+      cursor: pointer;
+      color: white;
+    }
+    .chart-tool-button:active {
+      background-color: #8cc5ff;
+      color: white;
+    }
+  }
+  .selected {
+    background-color: #8cc5ff;
+    color: white;
+  }
+</style>
diff --git a/src/views/dashboard/components/PanelGroup.vue b/src/views/dashboard/components/PanelGroup.vue
index b72d289..7be90a7 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,32 @@
           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',
           permission: '/device/list'
         },
         {
@@ -67,11 +69,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 +85,10 @@
   },
   mounted() {
     this.getWater()
-    this.getWellCount()
+    // this.getWellCount()
     this.getDeviceCount()
     this.getAlarmCount()
-    this.getJobCount()
+    // this.getJobCount()
   },
   methods: {
     refresh() {
@@ -97,24 +99,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.production?parseFloat(response.data.production).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 +168,7 @@
   //   &:hover {
   //     .card-panel-icon-wrapper {
   //       color: #fff;
-        
+
   //     }
 
   //     .icon-people {
diff --git a/src/views/dashboard/components/watchAlarmBar.vue b/src/views/dashboard/components/watchAlarmBar.vue
index 13824f3..6a18ef6 100644
--- a/src/views/dashboard/components/watchAlarmBar.vue
+++ b/src/views/dashboard/components/watchAlarmBar.vue
@@ -1,9 +1,11 @@
+<!--水表告警统计-->
 <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"
@@ -18,14 +20,14 @@
         @change="fetchData"/>
     </div>
     <ve-histogram v-if="isShow" :data="chartData" :grid="grid" :title="title" :extend="extend" :settings="chartSettings"/>
-    <div class="function">
-      <el-button
-        v-for="item in areaList"
-        :key="item.id"
-        round
-        size="mini"
-        @click="areaChange(item.id)">{{ item.name }}</el-button>
-    </div>
+    <!--<div class="function">-->
+      <!--<el-button-->
+        <!--v-for="item in areaList"-->
+        <!--:key="item.id"-->
+        <!--round-->
+        <!--size="mini"-->
+        <!--@click="areaChange(item.id)">{{ item.name }}</el-button>-->
+    <!--</div>-->
   </div>
 </template>
 
@@ -38,51 +40,51 @@
 export default {
   name: 'WatchAlarmBar',
   data() {
-    this.extend = {
-      legend: {
-        show: false
-      },
-      xAxis: {
-        axisLabel: {
-          rotate: 30,
-          margin: 30,
-          textStyle: {
-            align: 'center'
-          }
-        }
-      },
-      yAxis: {
-        name: '报警次数',
-        position: 'left'
-      },
-      series: {
-        label: { show: true, position: 'top', formatter: '{c}' },
-        barWidth: 25
-      },
-      tooltip: { trigger: 'item', formatter: '{b}<br/>报警次数：{c}次' }
-    }
-    this.grid = {
-      right: 40,
-      top: 100,
-      bottom: 5
-    }
-    this.title = {
-      text: '水表告警统计'
-    }
-    this.chartSettings = {
-      itemStyle: {
-        barCategoryGap: 10
-      },
-
-      labelMap: {
-        'areaName': '分区',
-        'alarm': '报警数',
-        'warning': '预警数'
-      },
-      dimension: ['areaName'],
-      metrics: ['alarm', 'warning']
-    }
     return {
+      title:{
+        text: '水表告警统计'
+      },
+      chartSettings:{
+        itemStyle: {
+          barCategoryGap: 0
+        },
+        labelMap: {
+          'areaName': '分区',
+          'alarm': '报警数',
+          'warning': '预警数'
+        },
+        dimension: ['areaName'],
+        metrics: ['alarm', 'warning']
+      },
+      grid: {
+        right: 40,
+        top: 80,
+        bottom: 5
+      },
+      extend: {
+        legend: {
+          show: false
+        },
+        xAxis: {
+          axisLabel: {
+            rotate: 30,
+            margin: 30,
+            textStyle: {
+              align: 'center'
+            }
+          }
+        },
+        yAxis: {
+          name: '报警次数',
+          position: 'left',
+          max: 10
+        },
+        series: {
+          label: { show: true, position: 'top', formatter: '{c}' },
+          barWidth: 20
+        },
+        // tooltip: { trigger: 'item', formatter: '{b}<br/>报警次数：{c}次' }
+      },
       areaId: '',
       areaList: [],
       isShow: true,
@@ -100,43 +102,50 @@
         }
       },
       chartData: {
-        columns: ['wellTypeName', 'alarm'],
+        columns: ['areaName', 'alarm'],
         rows: []
       }
     }
   },
   mounted() {
     this.setDefaultTime('today')
-    this.fetchArea()
+    // this.fetchArea()
   },
   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()
-    },
+    // 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() {
       const params = {
-        areaId: this.areaId,
+        areaId: '110000',
         startTime: this.timeRange[0],
         endTime: this.timeRange[1]
       }
+      this.$emit('change', params)
       alarmBySecondArea(params).then(response => {
         this.isShow = false
         this.chartData.rows = response.data
+        const maxValue = Math.max.apply(Math, response.data.map(item=> {return item.alarm>item.warning?item.alarm: item.warning}))
+        if (maxValue < 10) {
+          this.extend.yAxis.max = 10
+        } else {
+          this.extend.yAxis = maxValue+1
+        }
         // this.chartData.rows = [
         //   { 'areaName': '科技楼及食堂', 'alarm': 53 },
         //   { 'areaName': 'A\\B\\C\\D\\E座', 'alarm': 78 },
@@ -186,10 +195,11 @@
     }
   }
   .statistic-container {
+
     .el-button{
       padding: 5px 10px;
     }
-    /*margin-bottom: 10px;*/
+    margin-bottom: 10px;
     text-align: center;
     .chart-tool-button {
       padding: 5px;
diff --git a/src/views/dashboard/components/waterCompare.vue b/src/views/dashboard/components/waterCompare.vue
new file mode 100644
index 0000000..8e34936
--- /dev/null
+++ b/src/views/dashboard/components/waterCompare.vue
@@ -0,0 +1,117 @@
+<!--分区用水对比图-->
+<template>
+  <div class="container">
+    <function-area ref="func" select="week" @change="fetchData"/>
+    <ve-histogram v-if="isShow" :data="chartData" :grid="grid" :title="title" :extend="extend" :settings="chartSettings"/>
+  </div>
+</template>
+
+<script>
+
+import 'echarts/lib/component/visualMap'
+import { alarmBySecondArea } from '@/api/overview'
+import { getDayTime } from '@/utils/dateutils'
+import { getDoorAreaTree } from '@/api/system/area'
+import FunctionArea from "./FunctionArea";
+export default {
+  name: 'WaterCompare',
+  components: {FunctionArea},
+  data() {
+    return {
+      title:{ text: '分区用水对比图'},
+      chartSettings:{
+        labelMap: {
+          'areaName': '分区',
+          'last': '报警数',
+          'now': '预警数'
+        },
+        dimension: ['areaName'],
+        metrics: ['last', 'now']
+      },
+      grid: {
+        right: 40,
+        top: 80,
+        bottom: 5
+      },
+      extend: {
+        legend: {
+          show: false
+        },
+        xAxis: {
+          axisLabel: {
+            rotate: 30,
+            margin: 30,
+            textStyle: {
+              align: 'center'
+            }
+          }
+        },
+        yAxis: {
+          name: '用水量(吨)',
+          position: 'left',
+          max: 10
+        },
+        series: {
+          label: { show: true, position: 'top', formatter: '{c}' },
+          barWidth: 20
+        },
+        // tooltip: { trigger: 'item', formatter: '{b}<br/>报警次数：{c}次' }
+      },
+      areaId: '',
+      areaList: [],
+      isShow: true,
+      defaultTimeRange: [],
+      chartData: {
+        columns: ['areaName', 'last', 'now'],
+        rows: []
+      },
+      nameDict:{
+        'today':['昨日用水','今日用水'],
+        'week':['近7日用水','对照时间用水',],
+        'month':['近30日用水','对照时间用水',],
+        'season':['上季度用水','本季度用水',],
+        'year':['上年度用水','本年度用水',],
+        'other':['对照时间用水','自选时间用水']
+      }
+    }
+  },
+  mounted(){
+    this.$refs.func.init()
+  },
+  methods: {
+    fetchData(timeRange) {
+      const params = {
+        areaId: '110000',
+        startTime: timeRange[0],
+        endTime: timeRange[1]
+      }
+      alarmBySecondArea(params).then(response => {
+        this.isShow = false
+        this.chartData.rows = response.data
+        const maxValue = Math.max.apply(Math, response.data.map(item=> {return item.last>item.now?item.last: item.now}))
+        if (maxValue < 10) {
+          this.extend.yAxis.max = 10
+        } else {
+          this.extend.yAxis = maxValue+1
+        }
+        // this.chartData.rows = [
+        //   { 'areaName': '科技楼及食堂', 'alarm': 53 },
+        //   { 'areaName': 'A\\B\\C\\D\\E座', 'alarm': 78 },
+        //   { 'areaName': '厂区', 'alarm': 78 }]
+        this.isShow = true
+      })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+  .container{
+    position:relative;
+    .function{
+      width:calc(100% - 120px);
+      height: 28px;
+      display: flex;
+      justify-content: center;
+    }
+  }
+</style>
diff --git a/src/views/dashboard/components/waterCountByAreaBar.vue b/src/views/dashboard/components/waterCountByAreaBar.vue
index 1bdac48..f4196f1 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"
@@ -18,14 +19,14 @@
         @change="fetchData"/>
     </div>
     <ve-histogram v-if="isShow" :data="chartData" :grid="grid" :title="title" :extend="extend" :settings="chartSettings"/>
-    <div class="function">
-      <el-button
-        v-for="item in areaList"
-        :key="item.id"
-        round
-        size="mini"
-        @click="areaChange(item.id)">{{ item.name }}</el-button>
-    </div>
+    <!--<div class="function">-->
+      <!--<el-button-->
+        <!--v-for="item in areaList"-->
+        <!--:key="item.id"-->
+        <!--round-->
+        <!--size="mini"-->
+        <!--@click="areaChange(item.id)">{{ item.name }}</el-button>-->
+    <!--</div>-->
   </div>
 </template>
 
@@ -106,8 +107,8 @@
     }
   },
   mounted() {
-    this.setDefaultTime('today')
-    this.fetchArea()
+    this.setDefaultTime('week')
+    // 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,9 @@
         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
+        const nowDayOfWeek =  6
+        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..07524f9 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: {
@@ -27,8 +39,7 @@
         text: '用水走势图'
       },
       chartSettings: {
-        labelMap: {
-        },
+        labelMap: {date:'日期'},
         metrics: [],
         dimension: ['date']
       },
@@ -52,13 +63,19 @@
     }
   },
   mounted() {
-    this.changeTime('month')
-    this.fetchArea()
+    // this.changeTime('month')
+    // this.fetchArea()
+  },
+  watch:{
+    query(val){
+      this.fetchData()
+    }
   },
   methods: {
     fetchArea() {
       getDoorAreaTree().then(response => {
         if (response.code === 200) {
+          debugger
           const area = response.data.filter(item => {
             return item.pid === '1'
           }).map(item => item.name)
@@ -73,15 +90,21 @@
       })
     },
     fetchData() {
-      countByDayFirst(this.listQuery).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
-          }
-          delete item.data
-          return item
-        })
-        this.chartData.rows = arr
+      countByDayFirst(this.query).then(response => {
+        if(response.data.length>0){
+          const arr = response.data.map((item)=> {
+            const result = {date: item.date}
+            for (let i = 0; i < item.data.length; i++) {
+              result[item.data[i].areaName] = item.data[i].count
+            }
+            return result
+          })
+          const area = response.data[0].data.map(item=>item.areaName)
+          this.chartData.columns = ['date', ...area]
+          this.chartSettings.metrics = area
+          this.chartSettings.labelMap = {'date':'日期'}
+          this.chartData.rows = arr
+        }
       })
       // 模拟数据
       // this.chartData.rows = [
@@ -126,17 +149,7 @@
 </script>
 <style lang="scss" scoped>
   .container{
-    position:relative;
-    .function{
-      /*position:absolute;*/
-      /*z-index:200;*/
-      /*bottom: 10px;*/
-      /*left: 0;*/
-      width:100%;
-      height: 28px;
-      display: flex;
-      justify-content: center;
-    }
+
   }
 </style>
 
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..a4ff85d
--- /dev/null
+++ b/src/views/dashboard/components/waterNote.vue
@@ -0,0 +1,142 @@
+<!--用水事记L -->
+<template>
+  <div class="container">
+    <div class="title">
+      青岛公司用水事记
+      <i v-if="!editMode" class="el-icon-edit edit-btn" style="float:right" @click="editNote"></i>
+      <i v-else class="el-icon-check edit-btn" style="float:right" @click="saveNote"></i>
+    </div>
+    <div class="content-div">
+      <el-scrollbar class="white-scrollbar">
+        <div v-for="(item,index) of currentList" :key="'note_'+index" class="content-line">
+          <div v-if="!editMode">{{index+1}}. {{item.content}}</div>
+          <div v-else class="edit-line">
+            <div style="margin-right: 5px">{{index+1}}. </div>
+            <el-input v-model="item.content" size="mini" maxlength="30"></el-input>
+            <div style="width: 85px;display: flex;justify-content: flex-end">
+              <i v-show="index!==0" class="el-icon-top" @click="toTop(index)"></i>
+              <i v-show="index!==currentList.length-1" class="el-icon-bottom" @click="toBottom(index)"></i>
+              <i class="el-icon-delete" @click="deleteItem(index)"></i>
+            </div>
+          </div>
+        </div>
+        <div v-if="editMode&&currentList.length<10" class="content-line">
+          <i class="el-icon-circle-plus-outline icon-btn" @click="addItem()"></i>
+        </div>
+      </el-scrollbar>
+    </div>
+  </div>
+</template>
+
+<script>
+import { getNoteList, updateNoteList } from '@/api/dashboard'
+import { getDoorAreaTree } from '@/api/system/area'
+export default {
+  name: 'WaterNote',
+  props:{
+    query: {
+      type: Object,
+      default:()=>{
+        return {
+          areaId: '',
+          startTime: '',
+          endTime: ''
+        }
+      }
+    }
+  },
+  data() {
+    return {
+      editMode: false, // 编辑模式
+      originList:[], // 原始列表
+      currentList:[] // 当前列表
+    }
+  },
+  mounted() {
+    this.fetchData()
+  },
+  methods: {
+    // 获取统计数据
+    fetchData() {
+      this.currentList = [
+        { 'content': '测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试', 'num': 1 },
+        { 'content': '测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试', 'num': 1 },
+        { 'content': '测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试', 'num': 1 },
+        { 'content': '测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试', 'num': 1 },
+        { 'content': '测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试', 'num': 1 }
+      ]
+      this.originList = JSON.parse(JSON.stringify(this.currentList))
+      // getNoteList().then(response => {
+      //   this.currentList = response.data
+      // })
+    },
+    toTop(index){
+      this.currentList[index-1] = this.currentList.splice(index,1,this.currentList[index-1])[0]
+    },
+    toBottom(index){
+      this.currentList[index] = this.currentList.splice(index+1,1,this.currentList[index])[0]
+    },
+    deleteItem(index){
+      this.currentList.splice(index,1)
+    },
+    addItem(){
+      this.currentList.push({content:'',num:99})
+    },
+    // 开启编辑
+    editNote(){
+      this.editMode = true
+    },
+    // 保存用水事记
+    saveNote(){
+      const currentList = this.currentList.map((item, index)=>{
+        return {content: item.content, num: index}
+      })
+      console.log(currentList)
+      updateNoteList(currentList).then(res=>{
+        this.editMode = false
+        this.$message.success('保存成功')
+      }).catch(e=>{
+        // this.currentList = JSON.parse(JSON.stringify(this.originList))
+      })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+  @import "@/styles/variables.scss";
+  .container{
+    position:relative;
+    height: 428px;
+    display: flex;
+    flex-direction: column;
+    .content-div{
+      height: 410px;
+      .content-line{
+        line-height: 30px;
+        font-size: 16px;
+      }
+      .edit-line{
+        width: 100%;
+        display: flex;
+        align-items: center;
+      }
+    }
+  }
+  .edit-btn, .icon-btn{
+    &:hover{
+      cursor: pointer;
+      color: $themeColor;
+    }
+  }
+</style>
+<style lang="scss">
+  .white-scrollbar{
+    height: 100%;
+    .el-scrollbar__wrap{
+      overflow-x: hidden;
+      padding: 10px 0px;
+      background-color: #FFFFFF;
+    }
+  }
+
+</style>
diff --git a/src/views/dashboard/index.vue b/src/views/dashboard/index.vue
index fdbc38a..69d09ea 100644
--- a/src/views/dashboard/index.vue
+++ b/src/views/dashboard/index.vue
@@ -1,54 +1,55 @@
 <template>
   <div class="dashboard-container" style="background-color: white">
     <panel-group ref="panelgroup"/>
-    <el-row :gutter="10">
-      <!-- 用水统计图 -->
+    <el-row>
+      <!--设备在线数量统计-->
       <el-col :span="12">
         <el-card shadow="never">
-          <water-count-by-dept-bar/>
+          <water-compare/>
+        </el-card>
+      </el-col>
+      <!--设备数量统计-->
+      <el-col v-if="hasPerm('/statics/deviceStaticsByType')" :span="12">
+        <el-card shadow="never">
+          <device-count/>
+        </el-card>
+      </el-col>
+      <!-- 用水统计图 -->
+      <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 :query="listQuery1" ref="waterCountPie"/>
         </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/>
+          <water-count-by-day :query="listQuery1" ref="waterCountDay"/>
         </el-card>
       </el-col>
 
-      <!--设备数量统计-->
-      <el-col v-if="hasPerm('/statics/deviceStaticsByType')" :span="12">
+      <!--水表报警次数统计，柱状图-->
+      <el-col v-if="hasPerm('/statics/alarmsByDay')" :span="12">
         <el-card shadow="never">
-          <device-count/>
+          <watch-alarm-bar @change="changeAlarmQuery"/>
+        </el-card>
+      </el-col>
+      <!--报警饼图统计-->
+      <el-col v-if="hasPerm('/statics/alarmsByDay')" :span="12">
+        <el-card shadow="never">
+          <alarm-count-by-dept :query="listQuery2"/>
         </el-card>
       </el-col>
     </el-row>
@@ -64,20 +65,26 @@
 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";
+import AlarmCountByDept from "./components/AlarmCountByDept";
+import WaterCompare from "./components/waterCompare";
 
 export default {
   name: 'Dashboard',
   components: {
+    WaterCompare,
+    AlarmCountByDept,
+    WaterNote,
     WatchAlarmBar,
     WaterCountByAreaBar,
     WaterCountByDay,
     WaterCountByDeptBar,
-    WaterCountByDepy,
+    WaterCountByDept,
     JobByStatus,
     AlarmByDays,
     PanelGroup,
@@ -108,12 +115,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:'110000',
+        startTime:new Date().Format('yyyy-MM-dd'),
+        endTime:new Date().Format('yyyy-MM-dd')
+      } // 分区报警查询条件
+    }
+  },
   watch: {
     needRefresh(val) {
       // 需要刷新
       if (val) {
         console.log('refresh dashboard')
-        debugger
         this.$refs.panelgroup.refresh()
       }
     }
@@ -124,6 +144,14 @@
   methods: {
     webSocket() {
       this.$store.dispatch('initWebSocket')
+    },
+    // 切换分区查询条件
+    changeWaterQuery(listQuery1){
+      this.listQuery1 = listQuery1
+    },
+    // 切换报警查询条件
+    changeAlarmQuery(listQuery2){
+      this.listQuery2 = listQuery2
     }
   }
 }
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..6ad37f1 100644
--- a/src/api/dashboard.js
+++ b/src/api/dashboard.js
@@ -0,0 +1,92 @@
+/**
+ * 井总览模块接口
+ */
+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: '/device/valve/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
+  })
+}
+
+
+// 用水事记查询
+export function getNoteList() {
+  return request({
+    // url: '/note/list',
+    url: 'waterMeterData/count',
+    method: 'get',
+    params
+  })
+}
+
+// 用水事记更新
+export function updateNoteList(params) {
+  return request({
+    // url: '/note/update',
+    url: 'waterMeterData/count',
+    method: 'post',
+    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/AlarmCountByDept.vue b/src/views/dashboard/components/AlarmCountByDept.vue
new file mode 100644
index 0000000..91df51d
--- /dev/null
+++ b/src/views/dashboard/components/AlarmCountByDept.vue
@@ -0,0 +1,80 @@
+<!--suppress ALL -->
+<template>
+  <div class="container">
+    <div style="height: 28px;margin-bottom: 10px;"/>
+    <ve-pie :data="chartData" :extend="extend" :title="title"/>
+
+  </div>
+</template>
+
+<script>
+import { alarmBySecondArea } from '@/api/overview'
+import { getDoorAreaTree } from '@/api/system/area'
+export default {
+  name: 'AlarmCountByDept',
+  props:{
+    query: {
+      type: Object,
+      default:()=>{
+        return {
+          areaId: '',
+          startTime: '',
+          endTime: ''
+        }
+      }
+    }
+  },
+  data() {
+    return {
+      chartData: {
+        columns: ['areaName', 'alarm'],
+        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': '分区',
+          'alarm': '报警数'
+        }
+      }
+    }
+  },
+  watch:{
+    query(val){
+      this.fetchData()
+    }
+  },
+  methods: {
+    // 获取统计数据
+    fetchData() {
+      alarmBySecondArea(this.query).then(response => {
+        debugger
+        this.chartData.rows = response.data
+      })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+  .container{
+
+  }
+</style>
diff --git a/src/views/dashboard/components/DeviceCount.vue b/src/views/dashboard/components/DeviceCount.vue
index 6c36bcb..453fa09 100644
--- a/src/views/dashboard/components/DeviceCount.vue
+++ b/src/views/dashboard/components/DeviceCount.vue
@@ -1,5 +1,9 @@
 <template>
-  <ve-bar :data="chartData" :grid="grid" :title="title" :extend="extend" :settings="chartSettings"/>
+  <div>
+    <div style="height: 28px;margin-bottom: 10px;"/>
+    <ve-bar :data="chartData" :grid="grid" :title="title" :extend="extend" :settings="chartSettings"/>
+  </div>
+
 </template>
 
 <script>
diff --git a/src/views/dashboard/components/FunctionArea.vue b/src/views/dashboard/components/FunctionArea.vue
new file mode 100644
index 0000000..e628c12
--- /dev/null
+++ b/src/views/dashboard/components/FunctionArea.vue
@@ -0,0 +1,128 @@
+<!--
+ * @Description:
+ * @Author: 王晓颖
+ * @Date:
+ -->
+<template>
+  <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')">本周</el-button>
+    <el-button round size="mini" @click="setDefaultTime('today')">今日</el-button>
+    <el-date-picker
+      v-model="timeRange"
+      :picker-options="pickerOptions"
+      type="daterange"
+      range-separator="至"
+      start-placeholder="开始日期"
+      end-placeholder="结束日期"
+      value-format="yyyy-MM-dd"
+      size="mini"
+      style="width:250px;margin-right: 20px"
+      @change="fetchData"/>
+  </div>
+</template>
+
+<script>
+  import { getDayTime } from '@/utils/dateutils'
+  export default {
+    name: "FunctionArea",
+    props:{
+      select:{
+        type: String,
+        default: 'today'
+      }
+    },
+    data() {
+      return {
+        timeRange: [],
+        pickerOptions: {
+          disabledDate: function(date) {
+            var oDate1 = new Date(date)
+            var oDate2 = new Date()
+            if (oDate1.getTime() > oDate2.getTime()) {
+              return true
+            } else {
+              return false
+            }
+          }
+        }
+      }
+    },
+    methods: {
+      init(){
+        this.setDefaultTime(this.select)
+      },
+      change(){
+        this.$emit('change', this.timeRange)
+      },
+      setDefaultTime(val) {
+        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
+          if (tMonth.toString().length === 1) {
+            tMonth = '0' + tMonth
+          }
+          const beginTime = tYear + '-' + tMonth + '-01'
+          const endTime = getDayTime(new Date().getTime())
+          this.timeRange = [beginTime, endTime.Format('yyyy-MM-dd')]
+        } else if (val === 'week') {
+          // const nowDayOfWeek =  new Date().getDay()-1
+          const nowDayOfWeek =  6
+          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') {
+          this.timeRange = [getDayTime(new Date().getTime()).Format('yyyy-MM-dd'), getDayTime(new Date().getTime()).Format('yyyy-MM-dd')]
+        }
+        this.change()
+      }
+    }
+  }
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  .statistic-container {
+
+    .el-button{
+      padding: 5px 10px;
+    }
+    margin-bottom: 10px;
+    text-align: center;
+    .chart-tool-button {
+      padding: 5px;
+      line-height: 16px;
+      margin-top: 5px;
+      font-size: 14px;
+    }
+    .chart-tool-button:hover {
+      background-color: #8cc5ff;
+      cursor: pointer;
+      color: white;
+    }
+    .chart-tool-button:active {
+      background-color: #8cc5ff;
+      color: white;
+    }
+  }
+  .selected {
+    background-color: #8cc5ff;
+    color: white;
+  }
+</style>
diff --git a/src/views/dashboard/components/PanelGroup.vue b/src/views/dashboard/components/PanelGroup.vue
index b72d289..7be90a7 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,32 @@
           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',
           permission: '/device/list'
         },
         {
@@ -67,11 +69,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 +85,10 @@
   },
   mounted() {
     this.getWater()
-    this.getWellCount()
+    // this.getWellCount()
     this.getDeviceCount()
     this.getAlarmCount()
-    this.getJobCount()
+    // this.getJobCount()
   },
   methods: {
     refresh() {
@@ -97,24 +99,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.production?parseFloat(response.data.production).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 +168,7 @@
   //   &:hover {
   //     .card-panel-icon-wrapper {
   //       color: #fff;
-        
+
   //     }
 
   //     .icon-people {
diff --git a/src/views/dashboard/components/watchAlarmBar.vue b/src/views/dashboard/components/watchAlarmBar.vue
index 13824f3..6a18ef6 100644
--- a/src/views/dashboard/components/watchAlarmBar.vue
+++ b/src/views/dashboard/components/watchAlarmBar.vue
@@ -1,9 +1,11 @@
+<!--水表告警统计-->
 <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"
@@ -18,14 +20,14 @@
         @change="fetchData"/>
     </div>
     <ve-histogram v-if="isShow" :data="chartData" :grid="grid" :title="title" :extend="extend" :settings="chartSettings"/>
-    <div class="function">
-      <el-button
-        v-for="item in areaList"
-        :key="item.id"
-        round
-        size="mini"
-        @click="areaChange(item.id)">{{ item.name }}</el-button>
-    </div>
+    <!--<div class="function">-->
+      <!--<el-button-->
+        <!--v-for="item in areaList"-->
+        <!--:key="item.id"-->
+        <!--round-->
+        <!--size="mini"-->
+        <!--@click="areaChange(item.id)">{{ item.name }}</el-button>-->
+    <!--</div>-->
   </div>
 </template>
 
@@ -38,51 +40,51 @@
 export default {
   name: 'WatchAlarmBar',
   data() {
-    this.extend = {
-      legend: {
-        show: false
-      },
-      xAxis: {
-        axisLabel: {
-          rotate: 30,
-          margin: 30,
-          textStyle: {
-            align: 'center'
-          }
-        }
-      },
-      yAxis: {
-        name: '报警次数',
-        position: 'left'
-      },
-      series: {
-        label: { show: true, position: 'top', formatter: '{c}' },
-        barWidth: 25
-      },
-      tooltip: { trigger: 'item', formatter: '{b}<br/>报警次数：{c}次' }
-    }
-    this.grid = {
-      right: 40,
-      top: 100,
-      bottom: 5
-    }
-    this.title = {
-      text: '水表告警统计'
-    }
-    this.chartSettings = {
-      itemStyle: {
-        barCategoryGap: 10
-      },
-
-      labelMap: {
-        'areaName': '分区',
-        'alarm': '报警数',
-        'warning': '预警数'
-      },
-      dimension: ['areaName'],
-      metrics: ['alarm', 'warning']
-    }
     return {
+      title:{
+        text: '水表告警统计'
+      },
+      chartSettings:{
+        itemStyle: {
+          barCategoryGap: 0
+        },
+        labelMap: {
+          'areaName': '分区',
+          'alarm': '报警数',
+          'warning': '预警数'
+        },
+        dimension: ['areaName'],
+        metrics: ['alarm', 'warning']
+      },
+      grid: {
+        right: 40,
+        top: 80,
+        bottom: 5
+      },
+      extend: {
+        legend: {
+          show: false
+        },
+        xAxis: {
+          axisLabel: {
+            rotate: 30,
+            margin: 30,
+            textStyle: {
+              align: 'center'
+            }
+          }
+        },
+        yAxis: {
+          name: '报警次数',
+          position: 'left',
+          max: 10
+        },
+        series: {
+          label: { show: true, position: 'top', formatter: '{c}' },
+          barWidth: 20
+        },
+        // tooltip: { trigger: 'item', formatter: '{b}<br/>报警次数：{c}次' }
+      },
       areaId: '',
       areaList: [],
       isShow: true,
@@ -100,43 +102,50 @@
         }
       },
       chartData: {
-        columns: ['wellTypeName', 'alarm'],
+        columns: ['areaName', 'alarm'],
         rows: []
       }
     }
   },
   mounted() {
     this.setDefaultTime('today')
-    this.fetchArea()
+    // this.fetchArea()
   },
   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()
-    },
+    // 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() {
       const params = {
-        areaId: this.areaId,
+        areaId: '110000',
         startTime: this.timeRange[0],
         endTime: this.timeRange[1]
       }
+      this.$emit('change', params)
       alarmBySecondArea(params).then(response => {
         this.isShow = false
         this.chartData.rows = response.data
+        const maxValue = Math.max.apply(Math, response.data.map(item=> {return item.alarm>item.warning?item.alarm: item.warning}))
+        if (maxValue < 10) {
+          this.extend.yAxis.max = 10
+        } else {
+          this.extend.yAxis = maxValue+1
+        }
         // this.chartData.rows = [
         //   { 'areaName': '科技楼及食堂', 'alarm': 53 },
         //   { 'areaName': 'A\\B\\C\\D\\E座', 'alarm': 78 },
@@ -186,10 +195,11 @@
     }
   }
   .statistic-container {
+
     .el-button{
       padding: 5px 10px;
     }
-    /*margin-bottom: 10px;*/
+    margin-bottom: 10px;
     text-align: center;
     .chart-tool-button {
       padding: 5px;
diff --git a/src/views/dashboard/components/waterCompare.vue b/src/views/dashboard/components/waterCompare.vue
new file mode 100644
index 0000000..8e34936
--- /dev/null
+++ b/src/views/dashboard/components/waterCompare.vue
@@ -0,0 +1,117 @@
+<!--分区用水对比图-->
+<template>
+  <div class="container">
+    <function-area ref="func" select="week" @change="fetchData"/>
+    <ve-histogram v-if="isShow" :data="chartData" :grid="grid" :title="title" :extend="extend" :settings="chartSettings"/>
+  </div>
+</template>
+
+<script>
+
+import 'echarts/lib/component/visualMap'
+import { alarmBySecondArea } from '@/api/overview'
+import { getDayTime } from '@/utils/dateutils'
+import { getDoorAreaTree } from '@/api/system/area'
+import FunctionArea from "./FunctionArea";
+export default {
+  name: 'WaterCompare',
+  components: {FunctionArea},
+  data() {
+    return {
+      title:{ text: '分区用水对比图'},
+      chartSettings:{
+        labelMap: {
+          'areaName': '分区',
+          'last': '报警数',
+          'now': '预警数'
+        },
+        dimension: ['areaName'],
+        metrics: ['last', 'now']
+      },
+      grid: {
+        right: 40,
+        top: 80,
+        bottom: 5
+      },
+      extend: {
+        legend: {
+          show: false
+        },
+        xAxis: {
+          axisLabel: {
+            rotate: 30,
+            margin: 30,
+            textStyle: {
+              align: 'center'
+            }
+          }
+        },
+        yAxis: {
+          name: '用水量(吨)',
+          position: 'left',
+          max: 10
+        },
+        series: {
+          label: { show: true, position: 'top', formatter: '{c}' },
+          barWidth: 20
+        },
+        // tooltip: { trigger: 'item', formatter: '{b}<br/>报警次数：{c}次' }
+      },
+      areaId: '',
+      areaList: [],
+      isShow: true,
+      defaultTimeRange: [],
+      chartData: {
+        columns: ['areaName', 'last', 'now'],
+        rows: []
+      },
+      nameDict:{
+        'today':['昨日用水','今日用水'],
+        'week':['近7日用水','对照时间用水',],
+        'month':['近30日用水','对照时间用水',],
+        'season':['上季度用水','本季度用水',],
+        'year':['上年度用水','本年度用水',],
+        'other':['对照时间用水','自选时间用水']
+      }
+    }
+  },
+  mounted(){
+    this.$refs.func.init()
+  },
+  methods: {
+    fetchData(timeRange) {
+      const params = {
+        areaId: '110000',
+        startTime: timeRange[0],
+        endTime: timeRange[1]
+      }
+      alarmBySecondArea(params).then(response => {
+        this.isShow = false
+        this.chartData.rows = response.data
+        const maxValue = Math.max.apply(Math, response.data.map(item=> {return item.last>item.now?item.last: item.now}))
+        if (maxValue < 10) {
+          this.extend.yAxis.max = 10
+        } else {
+          this.extend.yAxis = maxValue+1
+        }
+        // this.chartData.rows = [
+        //   { 'areaName': '科技楼及食堂', 'alarm': 53 },
+        //   { 'areaName': 'A\\B\\C\\D\\E座', 'alarm': 78 },
+        //   { 'areaName': '厂区', 'alarm': 78 }]
+        this.isShow = true
+      })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+  .container{
+    position:relative;
+    .function{
+      width:calc(100% - 120px);
+      height: 28px;
+      display: flex;
+      justify-content: center;
+    }
+  }
+</style>
diff --git a/src/views/dashboard/components/waterCountByAreaBar.vue b/src/views/dashboard/components/waterCountByAreaBar.vue
index 1bdac48..f4196f1 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"
@@ -18,14 +19,14 @@
         @change="fetchData"/>
     </div>
     <ve-histogram v-if="isShow" :data="chartData" :grid="grid" :title="title" :extend="extend" :settings="chartSettings"/>
-    <div class="function">
-      <el-button
-        v-for="item in areaList"
-        :key="item.id"
-        round
-        size="mini"
-        @click="areaChange(item.id)">{{ item.name }}</el-button>
-    </div>
+    <!--<div class="function">-->
+      <!--<el-button-->
+        <!--v-for="item in areaList"-->
+        <!--:key="item.id"-->
+        <!--round-->
+        <!--size="mini"-->
+        <!--@click="areaChange(item.id)">{{ item.name }}</el-button>-->
+    <!--</div>-->
   </div>
 </template>
 
@@ -106,8 +107,8 @@
     }
   },
   mounted() {
-    this.setDefaultTime('today')
-    this.fetchArea()
+    this.setDefaultTime('week')
+    // 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,9 @@
         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
+        const nowDayOfWeek =  6
+        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..07524f9 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: {
@@ -27,8 +39,7 @@
         text: '用水走势图'
       },
       chartSettings: {
-        labelMap: {
-        },
+        labelMap: {date:'日期'},
         metrics: [],
         dimension: ['date']
       },
@@ -52,13 +63,19 @@
     }
   },
   mounted() {
-    this.changeTime('month')
-    this.fetchArea()
+    // this.changeTime('month')
+    // this.fetchArea()
+  },
+  watch:{
+    query(val){
+      this.fetchData()
+    }
   },
   methods: {
     fetchArea() {
       getDoorAreaTree().then(response => {
         if (response.code === 200) {
+          debugger
           const area = response.data.filter(item => {
             return item.pid === '1'
           }).map(item => item.name)
@@ -73,15 +90,21 @@
       })
     },
     fetchData() {
-      countByDayFirst(this.listQuery).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
-          }
-          delete item.data
-          return item
-        })
-        this.chartData.rows = arr
+      countByDayFirst(this.query).then(response => {
+        if(response.data.length>0){
+          const arr = response.data.map((item)=> {
+            const result = {date: item.date}
+            for (let i = 0; i < item.data.length; i++) {
+              result[item.data[i].areaName] = item.data[i].count
+            }
+            return result
+          })
+          const area = response.data[0].data.map(item=>item.areaName)
+          this.chartData.columns = ['date', ...area]
+          this.chartSettings.metrics = area
+          this.chartSettings.labelMap = {'date':'日期'}
+          this.chartData.rows = arr
+        }
       })
       // 模拟数据
       // this.chartData.rows = [
@@ -126,17 +149,7 @@
 </script>
 <style lang="scss" scoped>
   .container{
-    position:relative;
-    .function{
-      /*position:absolute;*/
-      /*z-index:200;*/
-      /*bottom: 10px;*/
-      /*left: 0;*/
-      width:100%;
-      height: 28px;
-      display: flex;
-      justify-content: center;
-    }
+
   }
 </style>
 
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..a4ff85d
--- /dev/null
+++ b/src/views/dashboard/components/waterNote.vue
@@ -0,0 +1,142 @@
+<!--用水事记L -->
+<template>
+  <div class="container">
+    <div class="title">
+      青岛公司用水事记
+      <i v-if="!editMode" class="el-icon-edit edit-btn" style="float:right" @click="editNote"></i>
+      <i v-else class="el-icon-check edit-btn" style="float:right" @click="saveNote"></i>
+    </div>
+    <div class="content-div">
+      <el-scrollbar class="white-scrollbar">
+        <div v-for="(item,index) of currentList" :key="'note_'+index" class="content-line">
+          <div v-if="!editMode">{{index+1}}. {{item.content}}</div>
+          <div v-else class="edit-line">
+            <div style="margin-right: 5px">{{index+1}}. </div>
+            <el-input v-model="item.content" size="mini" maxlength="30"></el-input>
+            <div style="width: 85px;display: flex;justify-content: flex-end">
+              <i v-show="index!==0" class="el-icon-top" @click="toTop(index)"></i>
+              <i v-show="index!==currentList.length-1" class="el-icon-bottom" @click="toBottom(index)"></i>
+              <i class="el-icon-delete" @click="deleteItem(index)"></i>
+            </div>
+          </div>
+        </div>
+        <div v-if="editMode&&currentList.length<10" class="content-line">
+          <i class="el-icon-circle-plus-outline icon-btn" @click="addItem()"></i>
+        </div>
+      </el-scrollbar>
+    </div>
+  </div>
+</template>
+
+<script>
+import { getNoteList, updateNoteList } from '@/api/dashboard'
+import { getDoorAreaTree } from '@/api/system/area'
+export default {
+  name: 'WaterNote',
+  props:{
+    query: {
+      type: Object,
+      default:()=>{
+        return {
+          areaId: '',
+          startTime: '',
+          endTime: ''
+        }
+      }
+    }
+  },
+  data() {
+    return {
+      editMode: false, // 编辑模式
+      originList:[], // 原始列表
+      currentList:[] // 当前列表
+    }
+  },
+  mounted() {
+    this.fetchData()
+  },
+  methods: {
+    // 获取统计数据
+    fetchData() {
+      this.currentList = [
+        { 'content': '测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试', 'num': 1 },
+        { 'content': '测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试', 'num': 1 },
+        { 'content': '测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试', 'num': 1 },
+        { 'content': '测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试', 'num': 1 },
+        { 'content': '测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试', 'num': 1 }
+      ]
+      this.originList = JSON.parse(JSON.stringify(this.currentList))
+      // getNoteList().then(response => {
+      //   this.currentList = response.data
+      // })
+    },
+    toTop(index){
+      this.currentList[index-1] = this.currentList.splice(index,1,this.currentList[index-1])[0]
+    },
+    toBottom(index){
+      this.currentList[index] = this.currentList.splice(index+1,1,this.currentList[index])[0]
+    },
+    deleteItem(index){
+      this.currentList.splice(index,1)
+    },
+    addItem(){
+      this.currentList.push({content:'',num:99})
+    },
+    // 开启编辑
+    editNote(){
+      this.editMode = true
+    },
+    // 保存用水事记
+    saveNote(){
+      const currentList = this.currentList.map((item, index)=>{
+        return {content: item.content, num: index}
+      })
+      console.log(currentList)
+      updateNoteList(currentList).then(res=>{
+        this.editMode = false
+        this.$message.success('保存成功')
+      }).catch(e=>{
+        // this.currentList = JSON.parse(JSON.stringify(this.originList))
+      })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+  @import "@/styles/variables.scss";
+  .container{
+    position:relative;
+    height: 428px;
+    display: flex;
+    flex-direction: column;
+    .content-div{
+      height: 410px;
+      .content-line{
+        line-height: 30px;
+        font-size: 16px;
+      }
+      .edit-line{
+        width: 100%;
+        display: flex;
+        align-items: center;
+      }
+    }
+  }
+  .edit-btn, .icon-btn{
+    &:hover{
+      cursor: pointer;
+      color: $themeColor;
+    }
+  }
+</style>
+<style lang="scss">
+  .white-scrollbar{
+    height: 100%;
+    .el-scrollbar__wrap{
+      overflow-x: hidden;
+      padding: 10px 0px;
+      background-color: #FFFFFF;
+    }
+  }
+
+</style>
diff --git a/src/views/dashboard/index.vue b/src/views/dashboard/index.vue
index fdbc38a..69d09ea 100644
--- a/src/views/dashboard/index.vue
+++ b/src/views/dashboard/index.vue
@@ -1,54 +1,55 @@
 <template>
   <div class="dashboard-container" style="background-color: white">
     <panel-group ref="panelgroup"/>
-    <el-row :gutter="10">
-      <!-- 用水统计图 -->
+    <el-row>
+      <!--设备在线数量统计-->
       <el-col :span="12">
         <el-card shadow="never">
-          <water-count-by-dept-bar/>
+          <water-compare/>
+        </el-card>
+      </el-col>
+      <!--设备数量统计-->
+      <el-col v-if="hasPerm('/statics/deviceStaticsByType')" :span="12">
+        <el-card shadow="never">
+          <device-count/>
+        </el-card>
+      </el-col>
+      <!-- 用水统计图 -->
+      <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 :query="listQuery1" ref="waterCountPie"/>
         </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/>
+          <water-count-by-day :query="listQuery1" ref="waterCountDay"/>
         </el-card>
       </el-col>
 
-      <!--设备数量统计-->
-      <el-col v-if="hasPerm('/statics/deviceStaticsByType')" :span="12">
+      <!--水表报警次数统计，柱状图-->
+      <el-col v-if="hasPerm('/statics/alarmsByDay')" :span="12">
         <el-card shadow="never">
-          <device-count/>
+          <watch-alarm-bar @change="changeAlarmQuery"/>
+        </el-card>
+      </el-col>
+      <!--报警饼图统计-->
+      <el-col v-if="hasPerm('/statics/alarmsByDay')" :span="12">
+        <el-card shadow="never">
+          <alarm-count-by-dept :query="listQuery2"/>
         </el-card>
       </el-col>
     </el-row>
@@ -64,20 +65,26 @@
 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";
+import AlarmCountByDept from "./components/AlarmCountByDept";
+import WaterCompare from "./components/waterCompare";
 
 export default {
   name: 'Dashboard',
   components: {
+    WaterCompare,
+    AlarmCountByDept,
+    WaterNote,
     WatchAlarmBar,
     WaterCountByAreaBar,
     WaterCountByDay,
     WaterCountByDeptBar,
-    WaterCountByDepy,
+    WaterCountByDept,
     JobByStatus,
     AlarmByDays,
     PanelGroup,
@@ -108,12 +115,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:'110000',
+        startTime:new Date().Format('yyyy-MM-dd'),
+        endTime:new Date().Format('yyyy-MM-dd')
+      } // 分区报警查询条件
+    }
+  },
   watch: {
     needRefresh(val) {
       // 需要刷新
       if (val) {
         console.log('refresh dashboard')
-        debugger
         this.$refs.panelgroup.refresh()
       }
     }
@@ -124,6 +144,14 @@
   methods: {
     webSocket() {
       this.$store.dispatch('initWebSocket')
+    },
+    // 切换分区查询条件
+    changeWaterQuery(listQuery1){
+      this.listQuery1 = listQuery1
+    },
+    // 切换报警查询条件
+    changeAlarmQuery(listQuery2){
+      this.listQuery2 = listQuery2
     }
   }
 }
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..6ad37f1 100644
--- a/src/api/dashboard.js
+++ b/src/api/dashboard.js
@@ -0,0 +1,92 @@
+/**
+ * 井总览模块接口
+ */
+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: '/device/valve/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
+  })
+}
+
+
+// 用水事记查询
+export function getNoteList() {
+  return request({
+    // url: '/note/list',
+    url: 'waterMeterData/count',
+    method: 'get',
+    params
+  })
+}
+
+// 用水事记更新
+export function updateNoteList(params) {
+  return request({
+    // url: '/note/update',
+    url: 'waterMeterData/count',
+    method: 'post',
+    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/AlarmCountByDept.vue b/src/views/dashboard/components/AlarmCountByDept.vue
new file mode 100644
index 0000000..91df51d
--- /dev/null
+++ b/src/views/dashboard/components/AlarmCountByDept.vue
@@ -0,0 +1,80 @@
+<!--suppress ALL -->
+<template>
+  <div class="container">
+    <div style="height: 28px;margin-bottom: 10px;"/>
+    <ve-pie :data="chartData" :extend="extend" :title="title"/>
+
+  </div>
+</template>
+
+<script>
+import { alarmBySecondArea } from '@/api/overview'
+import { getDoorAreaTree } from '@/api/system/area'
+export default {
+  name: 'AlarmCountByDept',
+  props:{
+    query: {
+      type: Object,
+      default:()=>{
+        return {
+          areaId: '',
+          startTime: '',
+          endTime: ''
+        }
+      }
+    }
+  },
+  data() {
+    return {
+      chartData: {
+        columns: ['areaName', 'alarm'],
+        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': '分区',
+          'alarm': '报警数'
+        }
+      }
+    }
+  },
+  watch:{
+    query(val){
+      this.fetchData()
+    }
+  },
+  methods: {
+    // 获取统计数据
+    fetchData() {
+      alarmBySecondArea(this.query).then(response => {
+        debugger
+        this.chartData.rows = response.data
+      })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+  .container{
+
+  }
+</style>
diff --git a/src/views/dashboard/components/DeviceCount.vue b/src/views/dashboard/components/DeviceCount.vue
index 6c36bcb..453fa09 100644
--- a/src/views/dashboard/components/DeviceCount.vue
+++ b/src/views/dashboard/components/DeviceCount.vue
@@ -1,5 +1,9 @@
 <template>
-  <ve-bar :data="chartData" :grid="grid" :title="title" :extend="extend" :settings="chartSettings"/>
+  <div>
+    <div style="height: 28px;margin-bottom: 10px;"/>
+    <ve-bar :data="chartData" :grid="grid" :title="title" :extend="extend" :settings="chartSettings"/>
+  </div>
+
 </template>
 
 <script>
diff --git a/src/views/dashboard/components/FunctionArea.vue b/src/views/dashboard/components/FunctionArea.vue
new file mode 100644
index 0000000..e628c12
--- /dev/null
+++ b/src/views/dashboard/components/FunctionArea.vue
@@ -0,0 +1,128 @@
+<!--
+ * @Description:
+ * @Author: 王晓颖
+ * @Date:
+ -->
+<template>
+  <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')">本周</el-button>
+    <el-button round size="mini" @click="setDefaultTime('today')">今日</el-button>
+    <el-date-picker
+      v-model="timeRange"
+      :picker-options="pickerOptions"
+      type="daterange"
+      range-separator="至"
+      start-placeholder="开始日期"
+      end-placeholder="结束日期"
+      value-format="yyyy-MM-dd"
+      size="mini"
+      style="width:250px;margin-right: 20px"
+      @change="fetchData"/>
+  </div>
+</template>
+
+<script>
+  import { getDayTime } from '@/utils/dateutils'
+  export default {
+    name: "FunctionArea",
+    props:{
+      select:{
+        type: String,
+        default: 'today'
+      }
+    },
+    data() {
+      return {
+        timeRange: [],
+        pickerOptions: {
+          disabledDate: function(date) {
+            var oDate1 = new Date(date)
+            var oDate2 = new Date()
+            if (oDate1.getTime() > oDate2.getTime()) {
+              return true
+            } else {
+              return false
+            }
+          }
+        }
+      }
+    },
+    methods: {
+      init(){
+        this.setDefaultTime(this.select)
+      },
+      change(){
+        this.$emit('change', this.timeRange)
+      },
+      setDefaultTime(val) {
+        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
+          if (tMonth.toString().length === 1) {
+            tMonth = '0' + tMonth
+          }
+          const beginTime = tYear + '-' + tMonth + '-01'
+          const endTime = getDayTime(new Date().getTime())
+          this.timeRange = [beginTime, endTime.Format('yyyy-MM-dd')]
+        } else if (val === 'week') {
+          // const nowDayOfWeek =  new Date().getDay()-1
+          const nowDayOfWeek =  6
+          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') {
+          this.timeRange = [getDayTime(new Date().getTime()).Format('yyyy-MM-dd'), getDayTime(new Date().getTime()).Format('yyyy-MM-dd')]
+        }
+        this.change()
+      }
+    }
+  }
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  .statistic-container {
+
+    .el-button{
+      padding: 5px 10px;
+    }
+    margin-bottom: 10px;
+    text-align: center;
+    .chart-tool-button {
+      padding: 5px;
+      line-height: 16px;
+      margin-top: 5px;
+      font-size: 14px;
+    }
+    .chart-tool-button:hover {
+      background-color: #8cc5ff;
+      cursor: pointer;
+      color: white;
+    }
+    .chart-tool-button:active {
+      background-color: #8cc5ff;
+      color: white;
+    }
+  }
+  .selected {
+    background-color: #8cc5ff;
+    color: white;
+  }
+</style>
diff --git a/src/views/dashboard/components/PanelGroup.vue b/src/views/dashboard/components/PanelGroup.vue
index b72d289..7be90a7 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,32 @@
           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',
           permission: '/device/list'
         },
         {
@@ -67,11 +69,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 +85,10 @@
   },
   mounted() {
     this.getWater()
-    this.getWellCount()
+    // this.getWellCount()
     this.getDeviceCount()
     this.getAlarmCount()
-    this.getJobCount()
+    // this.getJobCount()
   },
   methods: {
     refresh() {
@@ -97,24 +99,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.production?parseFloat(response.data.production).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 +168,7 @@
   //   &:hover {
   //     .card-panel-icon-wrapper {
   //       color: #fff;
-        
+
   //     }
 
   //     .icon-people {
diff --git a/src/views/dashboard/components/watchAlarmBar.vue b/src/views/dashboard/components/watchAlarmBar.vue
index 13824f3..6a18ef6 100644
--- a/src/views/dashboard/components/watchAlarmBar.vue
+++ b/src/views/dashboard/components/watchAlarmBar.vue
@@ -1,9 +1,11 @@
+<!--水表告警统计-->
 <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"
@@ -18,14 +20,14 @@
         @change="fetchData"/>
     </div>
     <ve-histogram v-if="isShow" :data="chartData" :grid="grid" :title="title" :extend="extend" :settings="chartSettings"/>
-    <div class="function">
-      <el-button
-        v-for="item in areaList"
-        :key="item.id"
-        round
-        size="mini"
-        @click="areaChange(item.id)">{{ item.name }}</el-button>
-    </div>
+    <!--<div class="function">-->
+      <!--<el-button-->
+        <!--v-for="item in areaList"-->
+        <!--:key="item.id"-->
+        <!--round-->
+        <!--size="mini"-->
+        <!--@click="areaChange(item.id)">{{ item.name }}</el-button>-->
+    <!--</div>-->
   </div>
 </template>
 
@@ -38,51 +40,51 @@
 export default {
   name: 'WatchAlarmBar',
   data() {
-    this.extend = {
-      legend: {
-        show: false
-      },
-      xAxis: {
-        axisLabel: {
-          rotate: 30,
-          margin: 30,
-          textStyle: {
-            align: 'center'
-          }
-        }
-      },
-      yAxis: {
-        name: '报警次数',
-        position: 'left'
-      },
-      series: {
-        label: { show: true, position: 'top', formatter: '{c}' },
-        barWidth: 25
-      },
-      tooltip: { trigger: 'item', formatter: '{b}<br/>报警次数：{c}次' }
-    }
-    this.grid = {
-      right: 40,
-      top: 100,
-      bottom: 5
-    }
-    this.title = {
-      text: '水表告警统计'
-    }
-    this.chartSettings = {
-      itemStyle: {
-        barCategoryGap: 10
-      },
-
-      labelMap: {
-        'areaName': '分区',
-        'alarm': '报警数',
-        'warning': '预警数'
-      },
-      dimension: ['areaName'],
-      metrics: ['alarm', 'warning']
-    }
     return {
+      title:{
+        text: '水表告警统计'
+      },
+      chartSettings:{
+        itemStyle: {
+          barCategoryGap: 0
+        },
+        labelMap: {
+          'areaName': '分区',
+          'alarm': '报警数',
+          'warning': '预警数'
+        },
+        dimension: ['areaName'],
+        metrics: ['alarm', 'warning']
+      },
+      grid: {
+        right: 40,
+        top: 80,
+        bottom: 5
+      },
+      extend: {
+        legend: {
+          show: false
+        },
+        xAxis: {
+          axisLabel: {
+            rotate: 30,
+            margin: 30,
+            textStyle: {
+              align: 'center'
+            }
+          }
+        },
+        yAxis: {
+          name: '报警次数',
+          position: 'left',
+          max: 10
+        },
+        series: {
+          label: { show: true, position: 'top', formatter: '{c}' },
+          barWidth: 20
+        },
+        // tooltip: { trigger: 'item', formatter: '{b}<br/>报警次数：{c}次' }
+      },
       areaId: '',
       areaList: [],
       isShow: true,
@@ -100,43 +102,50 @@
         }
       },
       chartData: {
-        columns: ['wellTypeName', 'alarm'],
+        columns: ['areaName', 'alarm'],
         rows: []
       }
     }
   },
   mounted() {
     this.setDefaultTime('today')
-    this.fetchArea()
+    // this.fetchArea()
   },
   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()
-    },
+    // 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() {
       const params = {
-        areaId: this.areaId,
+        areaId: '110000',
         startTime: this.timeRange[0],
         endTime: this.timeRange[1]
       }
+      this.$emit('change', params)
       alarmBySecondArea(params).then(response => {
         this.isShow = false
         this.chartData.rows = response.data
+        const maxValue = Math.max.apply(Math, response.data.map(item=> {return item.alarm>item.warning?item.alarm: item.warning}))
+        if (maxValue < 10) {
+          this.extend.yAxis.max = 10
+        } else {
+          this.extend.yAxis = maxValue+1
+        }
         // this.chartData.rows = [
         //   { 'areaName': '科技楼及食堂', 'alarm': 53 },
         //   { 'areaName': 'A\\B\\C\\D\\E座', 'alarm': 78 },
@@ -186,10 +195,11 @@
     }
   }
   .statistic-container {
+
     .el-button{
       padding: 5px 10px;
     }
-    /*margin-bottom: 10px;*/
+    margin-bottom: 10px;
     text-align: center;
     .chart-tool-button {
       padding: 5px;
diff --git a/src/views/dashboard/components/waterCompare.vue b/src/views/dashboard/components/waterCompare.vue
new file mode 100644
index 0000000..8e34936
--- /dev/null
+++ b/src/views/dashboard/components/waterCompare.vue
@@ -0,0 +1,117 @@
+<!--分区用水对比图-->
+<template>
+  <div class="container">
+    <function-area ref="func" select="week" @change="fetchData"/>
+    <ve-histogram v-if="isShow" :data="chartData" :grid="grid" :title="title" :extend="extend" :settings="chartSettings"/>
+  </div>
+</template>
+
+<script>
+
+import 'echarts/lib/component/visualMap'
+import { alarmBySecondArea } from '@/api/overview'
+import { getDayTime } from '@/utils/dateutils'
+import { getDoorAreaTree } from '@/api/system/area'
+import FunctionArea from "./FunctionArea";
+export default {
+  name: 'WaterCompare',
+  components: {FunctionArea},
+  data() {
+    return {
+      title:{ text: '分区用水对比图'},
+      chartSettings:{
+        labelMap: {
+          'areaName': '分区',
+          'last': '报警数',
+          'now': '预警数'
+        },
+        dimension: ['areaName'],
+        metrics: ['last', 'now']
+      },
+      grid: {
+        right: 40,
+        top: 80,
+        bottom: 5
+      },
+      extend: {
+        legend: {
+          show: false
+        },
+        xAxis: {
+          axisLabel: {
+            rotate: 30,
+            margin: 30,
+            textStyle: {
+              align: 'center'
+            }
+          }
+        },
+        yAxis: {
+          name: '用水量(吨)',
+          position: 'left',
+          max: 10
+        },
+        series: {
+          label: { show: true, position: 'top', formatter: '{c}' },
+          barWidth: 20
+        },
+        // tooltip: { trigger: 'item', formatter: '{b}<br/>报警次数：{c}次' }
+      },
+      areaId: '',
+      areaList: [],
+      isShow: true,
+      defaultTimeRange: [],
+      chartData: {
+        columns: ['areaName', 'last', 'now'],
+        rows: []
+      },
+      nameDict:{
+        'today':['昨日用水','今日用水'],
+        'week':['近7日用水','对照时间用水',],
+        'month':['近30日用水','对照时间用水',],
+        'season':['上季度用水','本季度用水',],
+        'year':['上年度用水','本年度用水',],
+        'other':['对照时间用水','自选时间用水']
+      }
+    }
+  },
+  mounted(){
+    this.$refs.func.init()
+  },
+  methods: {
+    fetchData(timeRange) {
+      const params = {
+        areaId: '110000',
+        startTime: timeRange[0],
+        endTime: timeRange[1]
+      }
+      alarmBySecondArea(params).then(response => {
+        this.isShow = false
+        this.chartData.rows = response.data
+        const maxValue = Math.max.apply(Math, response.data.map(item=> {return item.last>item.now?item.last: item.now}))
+        if (maxValue < 10) {
+          this.extend.yAxis.max = 10
+        } else {
+          this.extend.yAxis = maxValue+1
+        }
+        // this.chartData.rows = [
+        //   { 'areaName': '科技楼及食堂', 'alarm': 53 },
+        //   { 'areaName': 'A\\B\\C\\D\\E座', 'alarm': 78 },
+        //   { 'areaName': '厂区', 'alarm': 78 }]
+        this.isShow = true
+      })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+  .container{
+    position:relative;
+    .function{
+      width:calc(100% - 120px);
+      height: 28px;
+      display: flex;
+      justify-content: center;
+    }
+  }
+</style>
diff --git a/src/views/dashboard/components/waterCountByAreaBar.vue b/src/views/dashboard/components/waterCountByAreaBar.vue
index 1bdac48..f4196f1 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"
@@ -18,14 +19,14 @@
         @change="fetchData"/>
     </div>
     <ve-histogram v-if="isShow" :data="chartData" :grid="grid" :title="title" :extend="extend" :settings="chartSettings"/>
-    <div class="function">
-      <el-button
-        v-for="item in areaList"
-        :key="item.id"
-        round
-        size="mini"
-        @click="areaChange(item.id)">{{ item.name }}</el-button>
-    </div>
+    <!--<div class="function">-->
+      <!--<el-button-->
+        <!--v-for="item in areaList"-->
+        <!--:key="item.id"-->
+        <!--round-->
+        <!--size="mini"-->
+        <!--@click="areaChange(item.id)">{{ item.name }}</el-button>-->
+    <!--</div>-->
   </div>
 </template>
 
@@ -106,8 +107,8 @@
     }
   },
   mounted() {
-    this.setDefaultTime('today')
-    this.fetchArea()
+    this.setDefaultTime('week')
+    // 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,9 @@
         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
+        const nowDayOfWeek =  6
+        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..07524f9 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: {
@@ -27,8 +39,7 @@
         text: '用水走势图'
       },
       chartSettings: {
-        labelMap: {
-        },
+        labelMap: {date:'日期'},
         metrics: [],
         dimension: ['date']
       },
@@ -52,13 +63,19 @@
     }
   },
   mounted() {
-    this.changeTime('month')
-    this.fetchArea()
+    // this.changeTime('month')
+    // this.fetchArea()
+  },
+  watch:{
+    query(val){
+      this.fetchData()
+    }
   },
   methods: {
     fetchArea() {
       getDoorAreaTree().then(response => {
         if (response.code === 200) {
+          debugger
           const area = response.data.filter(item => {
             return item.pid === '1'
           }).map(item => item.name)
@@ -73,15 +90,21 @@
       })
     },
     fetchData() {
-      countByDayFirst(this.listQuery).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
-          }
-          delete item.data
-          return item
-        })
-        this.chartData.rows = arr
+      countByDayFirst(this.query).then(response => {
+        if(response.data.length>0){
+          const arr = response.data.map((item)=> {
+            const result = {date: item.date}
+            for (let i = 0; i < item.data.length; i++) {
+              result[item.data[i].areaName] = item.data[i].count
+            }
+            return result
+          })
+          const area = response.data[0].data.map(item=>item.areaName)
+          this.chartData.columns = ['date', ...area]
+          this.chartSettings.metrics = area
+          this.chartSettings.labelMap = {'date':'日期'}
+          this.chartData.rows = arr
+        }
       })
       // 模拟数据
       // this.chartData.rows = [
@@ -126,17 +149,7 @@
 </script>
 <style lang="scss" scoped>
   .container{
-    position:relative;
-    .function{
-      /*position:absolute;*/
-      /*z-index:200;*/
-      /*bottom: 10px;*/
-      /*left: 0;*/
-      width:100%;
-      height: 28px;
-      display: flex;
-      justify-content: center;
-    }
+
   }
 </style>
 
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..a4ff85d
--- /dev/null
+++ b/src/views/dashboard/components/waterNote.vue
@@ -0,0 +1,142 @@
+<!--用水事记L -->
+<template>
+  <div class="container">
+    <div class="title">
+      青岛公司用水事记
+      <i v-if="!editMode" class="el-icon-edit edit-btn" style="float:right" @click="editNote"></i>
+      <i v-else class="el-icon-check edit-btn" style="float:right" @click="saveNote"></i>
+    </div>
+    <div class="content-div">
+      <el-scrollbar class="white-scrollbar">
+        <div v-for="(item,index) of currentList" :key="'note_'+index" class="content-line">
+          <div v-if="!editMode">{{index+1}}. {{item.content}}</div>
+          <div v-else class="edit-line">
+            <div style="margin-right: 5px">{{index+1}}. </div>
+            <el-input v-model="item.content" size="mini" maxlength="30"></el-input>
+            <div style="width: 85px;display: flex;justify-content: flex-end">
+              <i v-show="index!==0" class="el-icon-top" @click="toTop(index)"></i>
+              <i v-show="index!==currentList.length-1" class="el-icon-bottom" @click="toBottom(index)"></i>
+              <i class="el-icon-delete" @click="deleteItem(index)"></i>
+            </div>
+          </div>
+        </div>
+        <div v-if="editMode&&currentList.length<10" class="content-line">
+          <i class="el-icon-circle-plus-outline icon-btn" @click="addItem()"></i>
+        </div>
+      </el-scrollbar>
+    </div>
+  </div>
+</template>
+
+<script>
+import { getNoteList, updateNoteList } from '@/api/dashboard'
+import { getDoorAreaTree } from '@/api/system/area'
+export default {
+  name: 'WaterNote',
+  props:{
+    query: {
+      type: Object,
+      default:()=>{
+        return {
+          areaId: '',
+          startTime: '',
+          endTime: ''
+        }
+      }
+    }
+  },
+  data() {
+    return {
+      editMode: false, // 编辑模式
+      originList:[], // 原始列表
+      currentList:[] // 当前列表
+    }
+  },
+  mounted() {
+    this.fetchData()
+  },
+  methods: {
+    // 获取统计数据
+    fetchData() {
+      this.currentList = [
+        { 'content': '测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试', 'num': 1 },
+        { 'content': '测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试', 'num': 1 },
+        { 'content': '测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试', 'num': 1 },
+        { 'content': '测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试', 'num': 1 },
+        { 'content': '测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试', 'num': 1 }
+      ]
+      this.originList = JSON.parse(JSON.stringify(this.currentList))
+      // getNoteList().then(response => {
+      //   this.currentList = response.data
+      // })
+    },
+    toTop(index){
+      this.currentList[index-1] = this.currentList.splice(index,1,this.currentList[index-1])[0]
+    },
+    toBottom(index){
+      this.currentList[index] = this.currentList.splice(index+1,1,this.currentList[index])[0]
+    },
+    deleteItem(index){
+      this.currentList.splice(index,1)
+    },
+    addItem(){
+      this.currentList.push({content:'',num:99})
+    },
+    // 开启编辑
+    editNote(){
+      this.editMode = true
+    },
+    // 保存用水事记
+    saveNote(){
+      const currentList = this.currentList.map((item, index)=>{
+        return {content: item.content, num: index}
+      })
+      console.log(currentList)
+      updateNoteList(currentList).then(res=>{
+        this.editMode = false
+        this.$message.success('保存成功')
+      }).catch(e=>{
+        // this.currentList = JSON.parse(JSON.stringify(this.originList))
+      })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+  @import "@/styles/variables.scss";
+  .container{
+    position:relative;
+    height: 428px;
+    display: flex;
+    flex-direction: column;
+    .content-div{
+      height: 410px;
+      .content-line{
+        line-height: 30px;
+        font-size: 16px;
+      }
+      .edit-line{
+        width: 100%;
+        display: flex;
+        align-items: center;
+      }
+    }
+  }
+  .edit-btn, .icon-btn{
+    &:hover{
+      cursor: pointer;
+      color: $themeColor;
+    }
+  }
+</style>
+<style lang="scss">
+  .white-scrollbar{
+    height: 100%;
+    .el-scrollbar__wrap{
+      overflow-x: hidden;
+      padding: 10px 0px;
+      background-color: #FFFFFF;
+    }
+  }
+
+</style>
diff --git a/src/views/dashboard/index.vue b/src/views/dashboard/index.vue
index fdbc38a..69d09ea 100644
--- a/src/views/dashboard/index.vue
+++ b/src/views/dashboard/index.vue
@@ -1,54 +1,55 @@
 <template>
   <div class="dashboard-container" style="background-color: white">
     <panel-group ref="panelgroup"/>
-    <el-row :gutter="10">
-      <!-- 用水统计图 -->
+    <el-row>
+      <!--设备在线数量统计-->
       <el-col :span="12">
         <el-card shadow="never">
-          <water-count-by-dept-bar/>
+          <water-compare/>
+        </el-card>
+      </el-col>
+      <!--设备数量统计-->
+      <el-col v-if="hasPerm('/statics/deviceStaticsByType')" :span="12">
+        <el-card shadow="never">
+          <device-count/>
+        </el-card>
+      </el-col>
+      <!-- 用水统计图 -->
+      <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 :query="listQuery1" ref="waterCountPie"/>
         </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/>
+          <water-count-by-day :query="listQuery1" ref="waterCountDay"/>
         </el-card>
       </el-col>
 
-      <!--设备数量统计-->
-      <el-col v-if="hasPerm('/statics/deviceStaticsByType')" :span="12">
+      <!--水表报警次数统计，柱状图-->
+      <el-col v-if="hasPerm('/statics/alarmsByDay')" :span="12">
         <el-card shadow="never">
-          <device-count/>
+          <watch-alarm-bar @change="changeAlarmQuery"/>
+        </el-card>
+      </el-col>
+      <!--报警饼图统计-->
+      <el-col v-if="hasPerm('/statics/alarmsByDay')" :span="12">
+        <el-card shadow="never">
+          <alarm-count-by-dept :query="listQuery2"/>
         </el-card>
       </el-col>
     </el-row>
@@ -64,20 +65,26 @@
 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";
+import AlarmCountByDept from "./components/AlarmCountByDept";
+import WaterCompare from "./components/waterCompare";
 
 export default {
   name: 'Dashboard',
   components: {
+    WaterCompare,
+    AlarmCountByDept,
+    WaterNote,
     WatchAlarmBar,
     WaterCountByAreaBar,
     WaterCountByDay,
     WaterCountByDeptBar,
-    WaterCountByDepy,
+    WaterCountByDept,
     JobByStatus,
     AlarmByDays,
     PanelGroup,
@@ -108,12 +115,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:'110000',
+        startTime:new Date().Format('yyyy-MM-dd'),
+        endTime:new Date().Format('yyyy-MM-dd')
+      } // 分区报警查询条件
+    }
+  },
   watch: {
     needRefresh(val) {
       // 需要刷新
       if (val) {
         console.log('refresh dashboard')
-        debugger
         this.$refs.panelgroup.refresh()
       }
     }
@@ -124,6 +144,14 @@
   methods: {
     webSocket() {
       this.$store.dispatch('initWebSocket')
+    },
+    // 切换分区查询条件
+    changeWaterQuery(listQuery1){
+      this.listQuery1 = listQuery1
+    },
+    // 切换报警查询条件
+    changeAlarmQuery(listQuery2){
+      this.listQuery2 = listQuery2
     }
   }
 }
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..6ad37f1 100644
--- a/src/api/dashboard.js
+++ b/src/api/dashboard.js
@@ -0,0 +1,92 @@
+/**
+ * 井总览模块接口
+ */
+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: '/device/valve/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
+  })
+}
+
+
+// 用水事记查询
+export function getNoteList() {
+  return request({
+    // url: '/note/list',
+    url: 'waterMeterData/count',
+    method: 'get',
+    params
+  })
+}
+
+// 用水事记更新
+export function updateNoteList(params) {
+  return request({
+    // url: '/note/update',
+    url: 'waterMeterData/count',
+    method: 'post',
+    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/AlarmCountByDept.vue b/src/views/dashboard/components/AlarmCountByDept.vue
new file mode 100644
index 0000000..91df51d
--- /dev/null
+++ b/src/views/dashboard/components/AlarmCountByDept.vue
@@ -0,0 +1,80 @@
+<!--suppress ALL -->
+<template>
+  <div class="container">
+    <div style="height: 28px;margin-bottom: 10px;"/>
+    <ve-pie :data="chartData" :extend="extend" :title="title"/>
+
+  </div>
+</template>
+
+<script>
+import { alarmBySecondArea } from '@/api/overview'
+import { getDoorAreaTree } from '@/api/system/area'
+export default {
+  name: 'AlarmCountByDept',
+  props:{
+    query: {
+      type: Object,
+      default:()=>{
+        return {
+          areaId: '',
+          startTime: '',
+          endTime: ''
+        }
+      }
+    }
+  },
+  data() {
+    return {
+      chartData: {
+        columns: ['areaName', 'alarm'],
+        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': '分区',
+          'alarm': '报警数'
+        }
+      }
+    }
+  },
+  watch:{
+    query(val){
+      this.fetchData()
+    }
+  },
+  methods: {
+    // 获取统计数据
+    fetchData() {
+      alarmBySecondArea(this.query).then(response => {
+        debugger
+        this.chartData.rows = response.data
+      })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+  .container{
+
+  }
+</style>
diff --git a/src/views/dashboard/components/DeviceCount.vue b/src/views/dashboard/components/DeviceCount.vue
index 6c36bcb..453fa09 100644
--- a/src/views/dashboard/components/DeviceCount.vue
+++ b/src/views/dashboard/components/DeviceCount.vue
@@ -1,5 +1,9 @@
 <template>
-  <ve-bar :data="chartData" :grid="grid" :title="title" :extend="extend" :settings="chartSettings"/>
+  <div>
+    <div style="height: 28px;margin-bottom: 10px;"/>
+    <ve-bar :data="chartData" :grid="grid" :title="title" :extend="extend" :settings="chartSettings"/>
+  </div>
+
 </template>
 
 <script>
diff --git a/src/views/dashboard/components/FunctionArea.vue b/src/views/dashboard/components/FunctionArea.vue
new file mode 100644
index 0000000..e628c12
--- /dev/null
+++ b/src/views/dashboard/components/FunctionArea.vue
@@ -0,0 +1,128 @@
+<!--
+ * @Description:
+ * @Author: 王晓颖
+ * @Date:
+ -->
+<template>
+  <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')">本周</el-button>
+    <el-button round size="mini" @click="setDefaultTime('today')">今日</el-button>
+    <el-date-picker
+      v-model="timeRange"
+      :picker-options="pickerOptions"
+      type="daterange"
+      range-separator="至"
+      start-placeholder="开始日期"
+      end-placeholder="结束日期"
+      value-format="yyyy-MM-dd"
+      size="mini"
+      style="width:250px;margin-right: 20px"
+      @change="fetchData"/>
+  </div>
+</template>
+
+<script>
+  import { getDayTime } from '@/utils/dateutils'
+  export default {
+    name: "FunctionArea",
+    props:{
+      select:{
+        type: String,
+        default: 'today'
+      }
+    },
+    data() {
+      return {
+        timeRange: [],
+        pickerOptions: {
+          disabledDate: function(date) {
+            var oDate1 = new Date(date)
+            var oDate2 = new Date()
+            if (oDate1.getTime() > oDate2.getTime()) {
+              return true
+            } else {
+              return false
+            }
+          }
+        }
+      }
+    },
+    methods: {
+      init(){
+        this.setDefaultTime(this.select)
+      },
+      change(){
+        this.$emit('change', this.timeRange)
+      },
+      setDefaultTime(val) {
+        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
+          if (tMonth.toString().length === 1) {
+            tMonth = '0' + tMonth
+          }
+          const beginTime = tYear + '-' + tMonth + '-01'
+          const endTime = getDayTime(new Date().getTime())
+          this.timeRange = [beginTime, endTime.Format('yyyy-MM-dd')]
+        } else if (val === 'week') {
+          // const nowDayOfWeek =  new Date().getDay()-1
+          const nowDayOfWeek =  6
+          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') {
+          this.timeRange = [getDayTime(new Date().getTime()).Format('yyyy-MM-dd'), getDayTime(new Date().getTime()).Format('yyyy-MM-dd')]
+        }
+        this.change()
+      }
+    }
+  }
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  .statistic-container {
+
+    .el-button{
+      padding: 5px 10px;
+    }
+    margin-bottom: 10px;
+    text-align: center;
+    .chart-tool-button {
+      padding: 5px;
+      line-height: 16px;
+      margin-top: 5px;
+      font-size: 14px;
+    }
+    .chart-tool-button:hover {
+      background-color: #8cc5ff;
+      cursor: pointer;
+      color: white;
+    }
+    .chart-tool-button:active {
+      background-color: #8cc5ff;
+      color: white;
+    }
+  }
+  .selected {
+    background-color: #8cc5ff;
+    color: white;
+  }
+</style>
diff --git a/src/views/dashboard/components/PanelGroup.vue b/src/views/dashboard/components/PanelGroup.vue
index b72d289..7be90a7 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,32 @@
           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',
           permission: '/device/list'
         },
         {
@@ -67,11 +69,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 +85,10 @@
   },
   mounted() {
     this.getWater()
-    this.getWellCount()
+    // this.getWellCount()
     this.getDeviceCount()
     this.getAlarmCount()
-    this.getJobCount()
+    // this.getJobCount()
   },
   methods: {
     refresh() {
@@ -97,24 +99,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.production?parseFloat(response.data.production).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 +168,7 @@
   //   &:hover {
   //     .card-panel-icon-wrapper {
   //       color: #fff;
-        
+
   //     }
 
   //     .icon-people {
diff --git a/src/views/dashboard/components/watchAlarmBar.vue b/src/views/dashboard/components/watchAlarmBar.vue
index 13824f3..6a18ef6 100644
--- a/src/views/dashboard/components/watchAlarmBar.vue
+++ b/src/views/dashboard/components/watchAlarmBar.vue
@@ -1,9 +1,11 @@
+<!--水表告警统计-->
 <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"
@@ -18,14 +20,14 @@
         @change="fetchData"/>
     </div>
     <ve-histogram v-if="isShow" :data="chartData" :grid="grid" :title="title" :extend="extend" :settings="chartSettings"/>
-    <div class="function">
-      <el-button
-        v-for="item in areaList"
-        :key="item.id"
-        round
-        size="mini"
-        @click="areaChange(item.id)">{{ item.name }}</el-button>
-    </div>
+    <!--<div class="function">-->
+      <!--<el-button-->
+        <!--v-for="item in areaList"-->
+        <!--:key="item.id"-->
+        <!--round-->
+        <!--size="mini"-->
+        <!--@click="areaChange(item.id)">{{ item.name }}</el-button>-->
+    <!--</div>-->
   </div>
 </template>
 
@@ -38,51 +40,51 @@
 export default {
   name: 'WatchAlarmBar',
   data() {
-    this.extend = {
-      legend: {
-        show: false
-      },
-      xAxis: {
-        axisLabel: {
-          rotate: 30,
-          margin: 30,
-          textStyle: {
-            align: 'center'
-          }
-        }
-      },
-      yAxis: {
-        name: '报警次数',
-        position: 'left'
-      },
-      series: {
-        label: { show: true, position: 'top', formatter: '{c}' },
-        barWidth: 25
-      },
-      tooltip: { trigger: 'item', formatter: '{b}<br/>报警次数：{c}次' }
-    }
-    this.grid = {
-      right: 40,
-      top: 100,
-      bottom: 5
-    }
-    this.title = {
-      text: '水表告警统计'
-    }
-    this.chartSettings = {
-      itemStyle: {
-        barCategoryGap: 10
-      },
-
-      labelMap: {
-        'areaName': '分区',
-        'alarm': '报警数',
-        'warning': '预警数'
-      },
-      dimension: ['areaName'],
-      metrics: ['alarm', 'warning']
-    }
     return {
+      title:{
+        text: '水表告警统计'
+      },
+      chartSettings:{
+        itemStyle: {
+          barCategoryGap: 0
+        },
+        labelMap: {
+          'areaName': '分区',
+          'alarm': '报警数',
+          'warning': '预警数'
+        },
+        dimension: ['areaName'],
+        metrics: ['alarm', 'warning']
+      },
+      grid: {
+        right: 40,
+        top: 80,
+        bottom: 5
+      },
+      extend: {
+        legend: {
+          show: false
+        },
+        xAxis: {
+          axisLabel: {
+            rotate: 30,
+            margin: 30,
+            textStyle: {
+              align: 'center'
+            }
+          }
+        },
+        yAxis: {
+          name: '报警次数',
+          position: 'left',
+          max: 10
+        },
+        series: {
+          label: { show: true, position: 'top', formatter: '{c}' },
+          barWidth: 20
+        },
+        // tooltip: { trigger: 'item', formatter: '{b}<br/>报警次数：{c}次' }
+      },
       areaId: '',
       areaList: [],
       isShow: true,
@@ -100,43 +102,50 @@
         }
       },
       chartData: {
-        columns: ['wellTypeName', 'alarm'],
+        columns: ['areaName', 'alarm'],
         rows: []
       }
     }
   },
   mounted() {
     this.setDefaultTime('today')
-    this.fetchArea()
+    // this.fetchArea()
   },
   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()
-    },
+    // 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() {
       const params = {
-        areaId: this.areaId,
+        areaId: '110000',
         startTime: this.timeRange[0],
         endTime: this.timeRange[1]
       }
+      this.$emit('change', params)
       alarmBySecondArea(params).then(response => {
         this.isShow = false
         this.chartData.rows = response.data
+        const maxValue = Math.max.apply(Math, response.data.map(item=> {return item.alarm>item.warning?item.alarm: item.warning}))
+        if (maxValue < 10) {
+          this.extend.yAxis.max = 10
+        } else {
+          this.extend.yAxis = maxValue+1
+        }
         // this.chartData.rows = [
         //   { 'areaName': '科技楼及食堂', 'alarm': 53 },
         //   { 'areaName': 'A\\B\\C\\D\\E座', 'alarm': 78 },
@@ -186,10 +195,11 @@
     }
   }
   .statistic-container {
+
     .el-button{
       padding: 5px 10px;
     }
-    /*margin-bottom: 10px;*/
+    margin-bottom: 10px;
     text-align: center;
     .chart-tool-button {
       padding: 5px;
diff --git a/src/views/dashboard/components/waterCompare.vue b/src/views/dashboard/components/waterCompare.vue
new file mode 100644
index 0000000..8e34936
--- /dev/null
+++ b/src/views/dashboard/components/waterCompare.vue
@@ -0,0 +1,117 @@
+<!--分区用水对比图-->
+<template>
+  <div class="container">
+    <function-area ref="func" select="week" @change="fetchData"/>
+    <ve-histogram v-if="isShow" :data="chartData" :grid="grid" :title="title" :extend="extend" :settings="chartSettings"/>
+  </div>
+</template>
+
+<script>
+
+import 'echarts/lib/component/visualMap'
+import { alarmBySecondArea } from '@/api/overview'
+import { getDayTime } from '@/utils/dateutils'
+import { getDoorAreaTree } from '@/api/system/area'
+import FunctionArea from "./FunctionArea";
+export default {
+  name: 'WaterCompare',
+  components: {FunctionArea},
+  data() {
+    return {
+      title:{ text: '分区用水对比图'},
+      chartSettings:{
+        labelMap: {
+          'areaName': '分区',
+          'last': '报警数',
+          'now': '预警数'
+        },
+        dimension: ['areaName'],
+        metrics: ['last', 'now']
+      },
+      grid: {
+        right: 40,
+        top: 80,
+        bottom: 5
+      },
+      extend: {
+        legend: {
+          show: false
+        },
+        xAxis: {
+          axisLabel: {
+            rotate: 30,
+            margin: 30,
+            textStyle: {
+              align: 'center'
+            }
+          }
+        },
+        yAxis: {
+          name: '用水量(吨)',
+          position: 'left',
+          max: 10
+        },
+        series: {
+          label: { show: true, position: 'top', formatter: '{c}' },
+          barWidth: 20
+        },
+        // tooltip: { trigger: 'item', formatter: '{b}<br/>报警次数：{c}次' }
+      },
+      areaId: '',
+      areaList: [],
+      isShow: true,
+      defaultTimeRange: [],
+      chartData: {
+        columns: ['areaName', 'last', 'now'],
+        rows: []
+      },
+      nameDict:{
+        'today':['昨日用水','今日用水'],
+        'week':['近7日用水','对照时间用水',],
+        'month':['近30日用水','对照时间用水',],
+        'season':['上季度用水','本季度用水',],
+        'year':['上年度用水','本年度用水',],
+        'other':['对照时间用水','自选时间用水']
+      }
+    }
+  },
+  mounted(){
+    this.$refs.func.init()
+  },
+  methods: {
+    fetchData(timeRange) {
+      const params = {
+        areaId: '110000',
+        startTime: timeRange[0],
+        endTime: timeRange[1]
+      }
+      alarmBySecondArea(params).then(response => {
+        this.isShow = false
+        this.chartData.rows = response.data
+        const maxValue = Math.max.apply(Math, response.data.map(item=> {return item.last>item.now?item.last: item.now}))
+        if (maxValue < 10) {
+          this.extend.yAxis.max = 10
+        } else {
+          this.extend.yAxis = maxValue+1
+        }
+        // this.chartData.rows = [
+        //   { 'areaName': '科技楼及食堂', 'alarm': 53 },
+        //   { 'areaName': 'A\\B\\C\\D\\E座', 'alarm': 78 },
+        //   { 'areaName': '厂区', 'alarm': 78 }]
+        this.isShow = true
+      })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+  .container{
+    position:relative;
+    .function{
+      width:calc(100% - 120px);
+      height: 28px;
+      display: flex;
+      justify-content: center;
+    }
+  }
+</style>
diff --git a/src/views/dashboard/components/waterCountByAreaBar.vue b/src/views/dashboard/components/waterCountByAreaBar.vue
index 1bdac48..f4196f1 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"
@@ -18,14 +19,14 @@
         @change="fetchData"/>
     </div>
     <ve-histogram v-if="isShow" :data="chartData" :grid="grid" :title="title" :extend="extend" :settings="chartSettings"/>
-    <div class="function">
-      <el-button
-        v-for="item in areaList"
-        :key="item.id"
-        round
-        size="mini"
-        @click="areaChange(item.id)">{{ item.name }}</el-button>
-    </div>
+    <!--<div class="function">-->
+      <!--<el-button-->
+        <!--v-for="item in areaList"-->
+        <!--:key="item.id"-->
+        <!--round-->
+        <!--size="mini"-->
+        <!--@click="areaChange(item.id)">{{ item.name }}</el-button>-->
+    <!--</div>-->
   </div>
 </template>
 
@@ -106,8 +107,8 @@
     }
   },
   mounted() {
-    this.setDefaultTime('today')
-    this.fetchArea()
+    this.setDefaultTime('week')
+    // 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,9 @@
         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
+        const nowDayOfWeek =  6
+        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..07524f9 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: {
@@ -27,8 +39,7 @@
         text: '用水走势图'
       },
       chartSettings: {
-        labelMap: {
-        },
+        labelMap: {date:'日期'},
         metrics: [],
         dimension: ['date']
       },
@@ -52,13 +63,19 @@
     }
   },
   mounted() {
-    this.changeTime('month')
-    this.fetchArea()
+    // this.changeTime('month')
+    // this.fetchArea()
+  },
+  watch:{
+    query(val){
+      this.fetchData()
+    }
   },
   methods: {
     fetchArea() {
       getDoorAreaTree().then(response => {
         if (response.code === 200) {
+          debugger
           const area = response.data.filter(item => {
             return item.pid === '1'
           }).map(item => item.name)
@@ -73,15 +90,21 @@
       })
     },
     fetchData() {
-      countByDayFirst(this.listQuery).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
-          }
-          delete item.data
-          return item
-        })
-        this.chartData.rows = arr
+      countByDayFirst(this.query).then(response => {
+        if(response.data.length>0){
+          const arr = response.data.map((item)=> {
+            const result = {date: item.date}
+            for (let i = 0; i < item.data.length; i++) {
+              result[item.data[i].areaName] = item.data[i].count
+            }
+            return result
+          })
+          const area = response.data[0].data.map(item=>item.areaName)
+          this.chartData.columns = ['date', ...area]
+          this.chartSettings.metrics = area
+          this.chartSettings.labelMap = {'date':'日期'}
+          this.chartData.rows = arr
+        }
       })
       // 模拟数据
       // this.chartData.rows = [
@@ -126,17 +149,7 @@
 </script>
 <style lang="scss" scoped>
   .container{
-    position:relative;
-    .function{
-      /*position:absolute;*/
-      /*z-index:200;*/
-      /*bottom: 10px;*/
-      /*left: 0;*/
-      width:100%;
-      height: 28px;
-      display: flex;
-      justify-content: center;
-    }
+
   }
 </style>
 
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..a4ff85d
--- /dev/null
+++ b/src/views/dashboard/components/waterNote.vue
@@ -0,0 +1,142 @@
+<!--用水事记L -->
+<template>
+  <div class="container">
+    <div class="title">
+      青岛公司用水事记
+      <i v-if="!editMode" class="el-icon-edit edit-btn" style="float:right" @click="editNote"></i>
+      <i v-else class="el-icon-check edit-btn" style="float:right" @click="saveNote"></i>
+    </div>
+    <div class="content-div">
+      <el-scrollbar class="white-scrollbar">
+        <div v-for="(item,index) of currentList" :key="'note_'+index" class="content-line">
+          <div v-if="!editMode">{{index+1}}. {{item.content}}</div>
+          <div v-else class="edit-line">
+            <div style="margin-right: 5px">{{index+1}}. </div>
+            <el-input v-model="item.content" size="mini" maxlength="30"></el-input>
+            <div style="width: 85px;display: flex;justify-content: flex-end">
+              <i v-show="index!==0" class="el-icon-top" @click="toTop(index)"></i>
+              <i v-show="index!==currentList.length-1" class="el-icon-bottom" @click="toBottom(index)"></i>
+              <i class="el-icon-delete" @click="deleteItem(index)"></i>
+            </div>
+          </div>
+        </div>
+        <div v-if="editMode&&currentList.length<10" class="content-line">
+          <i class="el-icon-circle-plus-outline icon-btn" @click="addItem()"></i>
+        </div>
+      </el-scrollbar>
+    </div>
+  </div>
+</template>
+
+<script>
+import { getNoteList, updateNoteList } from '@/api/dashboard'
+import { getDoorAreaTree } from '@/api/system/area'
+export default {
+  name: 'WaterNote',
+  props:{
+    query: {
+      type: Object,
+      default:()=>{
+        return {
+          areaId: '',
+          startTime: '',
+          endTime: ''
+        }
+      }
+    }
+  },
+  data() {
+    return {
+      editMode: false, // 编辑模式
+      originList:[], // 原始列表
+      currentList:[] // 当前列表
+    }
+  },
+  mounted() {
+    this.fetchData()
+  },
+  methods: {
+    // 获取统计数据
+    fetchData() {
+      this.currentList = [
+        { 'content': '测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试', 'num': 1 },
+        { 'content': '测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试', 'num': 1 },
+        { 'content': '测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试', 'num': 1 },
+        { 'content': '测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试', 'num': 1 },
+        { 'content': '测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试', 'num': 1 }
+      ]
+      this.originList = JSON.parse(JSON.stringify(this.currentList))
+      // getNoteList().then(response => {
+      //   this.currentList = response.data
+      // })
+    },
+    toTop(index){
+      this.currentList[index-1] = this.currentList.splice(index,1,this.currentList[index-1])[0]
+    },
+    toBottom(index){
+      this.currentList[index] = this.currentList.splice(index+1,1,this.currentList[index])[0]
+    },
+    deleteItem(index){
+      this.currentList.splice(index,1)
+    },
+    addItem(){
+      this.currentList.push({content:'',num:99})
+    },
+    // 开启编辑
+    editNote(){
+      this.editMode = true
+    },
+    // 保存用水事记
+    saveNote(){
+      const currentList = this.currentList.map((item, index)=>{
+        return {content: item.content, num: index}
+      })
+      console.log(currentList)
+      updateNoteList(currentList).then(res=>{
+        this.editMode = false
+        this.$message.success('保存成功')
+      }).catch(e=>{
+        // this.currentList = JSON.parse(JSON.stringify(this.originList))
+      })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+  @import "@/styles/variables.scss";
+  .container{
+    position:relative;
+    height: 428px;
+    display: flex;
+    flex-direction: column;
+    .content-div{
+      height: 410px;
+      .content-line{
+        line-height: 30px;
+        font-size: 16px;
+      }
+      .edit-line{
+        width: 100%;
+        display: flex;
+        align-items: center;
+      }
+    }
+  }
+  .edit-btn, .icon-btn{
+    &:hover{
+      cursor: pointer;
+      color: $themeColor;
+    }
+  }
+</style>
+<style lang="scss">
+  .white-scrollbar{
+    height: 100%;
+    .el-scrollbar__wrap{
+      overflow-x: hidden;
+      padding: 10px 0px;
+      background-color: #FFFFFF;
+    }
+  }
+
+</style>
diff --git a/src/views/dashboard/index.vue b/src/views/dashboard/index.vue
index fdbc38a..69d09ea 100644
--- a/src/views/dashboard/index.vue
+++ b/src/views/dashboard/index.vue
@@ -1,54 +1,55 @@
 <template>
   <div class="dashboard-container" style="background-color: white">
     <panel-group ref="panelgroup"/>
-    <el-row :gutter="10">
-      <!-- 用水统计图 -->
+    <el-row>
+      <!--设备在线数量统计-->
       <el-col :span="12">
         <el-card shadow="never">
-          <water-count-by-dept-bar/>
+          <water-compare/>
+        </el-card>
+      </el-col>
+      <!--设备数量统计-->
+      <el-col v-if="hasPerm('/statics/deviceStaticsByType')" :span="12">
+        <el-card shadow="never">
+          <device-count/>
+        </el-card>
+      </el-col>
+      <!-- 用水统计图 -->
+      <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 :query="listQuery1" ref="waterCountPie"/>
         </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/>
+          <water-count-by-day :query="listQuery1" ref="waterCountDay"/>
         </el-card>
       </el-col>
 
-      <!--设备数量统计-->
-      <el-col v-if="hasPerm('/statics/deviceStaticsByType')" :span="12">
+      <!--水表报警次数统计，柱状图-->
+      <el-col v-if="hasPerm('/statics/alarmsByDay')" :span="12">
         <el-card shadow="never">
-          <device-count/>
+          <watch-alarm-bar @change="changeAlarmQuery"/>
+        </el-card>
+      </el-col>
+      <!--报警饼图统计-->
+      <el-col v-if="hasPerm('/statics/alarmsByDay')" :span="12">
+        <el-card shadow="never">
+          <alarm-count-by-dept :query="listQuery2"/>
         </el-card>
       </el-col>
     </el-row>
@@ -64,20 +65,26 @@
 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";
+import AlarmCountByDept from "./components/AlarmCountByDept";
+import WaterCompare from "./components/waterCompare";
 
 export default {
   name: 'Dashboard',
   components: {
+    WaterCompare,
+    AlarmCountByDept,
+    WaterNote,
     WatchAlarmBar,
     WaterCountByAreaBar,
     WaterCountByDay,
     WaterCountByDeptBar,
-    WaterCountByDepy,
+    WaterCountByDept,
     JobByStatus,
     AlarmByDays,
     PanelGroup,
@@ -108,12 +115,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:'110000',
+        startTime:new Date().Format('yyyy-MM-dd'),
+        endTime:new Date().Format('yyyy-MM-dd')
+      } // 分区报警查询条件
+    }
+  },
   watch: {
     needRefresh(val) {
       // 需要刷新
       if (val) {
         console.log('refresh dashboard')
-        debugger
         this.$refs.panelgroup.refresh()
       }
     }
@@ -124,6 +144,14 @@
   methods: {
     webSocket() {
       this.$store.dispatch('initWebSocket')
+    },
+    // 切换分区查询条件
+    changeWaterQuery(listQuery1){
+      this.listQuery1 = listQuery1
+    },
+    // 切换报警查询条件
+    changeAlarmQuery(listQuery2){
+      this.listQuery2 = listQuery2
     }
   }
 }
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..6ad37f1 100644
--- a/src/api/dashboard.js
+++ b/src/api/dashboard.js
@@ -0,0 +1,92 @@
+/**
+ * 井总览模块接口
+ */
+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: '/device/valve/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
+  })
+}
+
+
+// 用水事记查询
+export function getNoteList() {
+  return request({
+    // url: '/note/list',
+    url: 'waterMeterData/count',
+    method: 'get',
+    params
+  })
+}
+
+// 用水事记更新
+export function updateNoteList(params) {
+  return request({
+    // url: '/note/update',
+    url: 'waterMeterData/count',
+    method: 'post',
+    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/AlarmCountByDept.vue b/src/views/dashboard/components/AlarmCountByDept.vue
new file mode 100644
index 0000000..91df51d
--- /dev/null
+++ b/src/views/dashboard/components/AlarmCountByDept.vue
@@ -0,0 +1,80 @@
+<!--suppress ALL -->
+<template>
+  <div class="container">
+    <div style="height: 28px;margin-bottom: 10px;"/>
+    <ve-pie :data="chartData" :extend="extend" :title="title"/>
+
+  </div>
+</template>
+
+<script>
+import { alarmBySecondArea } from '@/api/overview'
+import { getDoorAreaTree } from '@/api/system/area'
+export default {
+  name: 'AlarmCountByDept',
+  props:{
+    query: {
+      type: Object,
+      default:()=>{
+        return {
+          areaId: '',
+          startTime: '',
+          endTime: ''
+        }
+      }
+    }
+  },
+  data() {
+    return {
+      chartData: {
+        columns: ['areaName', 'alarm'],
+        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': '分区',
+          'alarm': '报警数'
+        }
+      }
+    }
+  },
+  watch:{
+    query(val){
+      this.fetchData()
+    }
+  },
+  methods: {
+    // 获取统计数据
+    fetchData() {
+      alarmBySecondArea(this.query).then(response => {
+        debugger
+        this.chartData.rows = response.data
+      })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+  .container{
+
+  }
+</style>
diff --git a/src/views/dashboard/components/DeviceCount.vue b/src/views/dashboard/components/DeviceCount.vue
index 6c36bcb..453fa09 100644
--- a/src/views/dashboard/components/DeviceCount.vue
+++ b/src/views/dashboard/components/DeviceCount.vue
@@ -1,5 +1,9 @@
 <template>
-  <ve-bar :data="chartData" :grid="grid" :title="title" :extend="extend" :settings="chartSettings"/>
+  <div>
+    <div style="height: 28px;margin-bottom: 10px;"/>
+    <ve-bar :data="chartData" :grid="grid" :title="title" :extend="extend" :settings="chartSettings"/>
+  </div>
+
 </template>
 
 <script>
diff --git a/src/views/dashboard/components/FunctionArea.vue b/src/views/dashboard/components/FunctionArea.vue
new file mode 100644
index 0000000..e628c12
--- /dev/null
+++ b/src/views/dashboard/components/FunctionArea.vue
@@ -0,0 +1,128 @@
+<!--
+ * @Description:
+ * @Author: 王晓颖
+ * @Date:
+ -->
+<template>
+  <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')">本周</el-button>
+    <el-button round size="mini" @click="setDefaultTime('today')">今日</el-button>
+    <el-date-picker
+      v-model="timeRange"
+      :picker-options="pickerOptions"
+      type="daterange"
+      range-separator="至"
+      start-placeholder="开始日期"
+      end-placeholder="结束日期"
+      value-format="yyyy-MM-dd"
+      size="mini"
+      style="width:250px;margin-right: 20px"
+      @change="fetchData"/>
+  </div>
+</template>
+
+<script>
+  import { getDayTime } from '@/utils/dateutils'
+  export default {
+    name: "FunctionArea",
+    props:{
+      select:{
+        type: String,
+        default: 'today'
+      }
+    },
+    data() {
+      return {
+        timeRange: [],
+        pickerOptions: {
+          disabledDate: function(date) {
+            var oDate1 = new Date(date)
+            var oDate2 = new Date()
+            if (oDate1.getTime() > oDate2.getTime()) {
+              return true
+            } else {
+              return false
+            }
+          }
+        }
+      }
+    },
+    methods: {
+      init(){
+        this.setDefaultTime(this.select)
+      },
+      change(){
+        this.$emit('change', this.timeRange)
+      },
+      setDefaultTime(val) {
+        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
+          if (tMonth.toString().length === 1) {
+            tMonth = '0' + tMonth
+          }
+          const beginTime = tYear + '-' + tMonth + '-01'
+          const endTime = getDayTime(new Date().getTime())
+          this.timeRange = [beginTime, endTime.Format('yyyy-MM-dd')]
+        } else if (val === 'week') {
+          // const nowDayOfWeek =  new Date().getDay()-1
+          const nowDayOfWeek =  6
+          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') {
+          this.timeRange = [getDayTime(new Date().getTime()).Format('yyyy-MM-dd'), getDayTime(new Date().getTime()).Format('yyyy-MM-dd')]
+        }
+        this.change()
+      }
+    }
+  }
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  .statistic-container {
+
+    .el-button{
+      padding: 5px 10px;
+    }
+    margin-bottom: 10px;
+    text-align: center;
+    .chart-tool-button {
+      padding: 5px;
+      line-height: 16px;
+      margin-top: 5px;
+      font-size: 14px;
+    }
+    .chart-tool-button:hover {
+      background-color: #8cc5ff;
+      cursor: pointer;
+      color: white;
+    }
+    .chart-tool-button:active {
+      background-color: #8cc5ff;
+      color: white;
+    }
+  }
+  .selected {
+    background-color: #8cc5ff;
+    color: white;
+  }
+</style>
diff --git a/src/views/dashboard/components/PanelGroup.vue b/src/views/dashboard/components/PanelGroup.vue
index b72d289..7be90a7 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,32 @@
           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',
           permission: '/device/list'
         },
         {
@@ -67,11 +69,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 +85,10 @@
   },
   mounted() {
     this.getWater()
-    this.getWellCount()
+    // this.getWellCount()
     this.getDeviceCount()
     this.getAlarmCount()
-    this.getJobCount()
+    // this.getJobCount()
   },
   methods: {
     refresh() {
@@ -97,24 +99,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.production?parseFloat(response.data.production).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 +168,7 @@
   //   &:hover {
   //     .card-panel-icon-wrapper {
   //       color: #fff;
-        
+
   //     }
 
   //     .icon-people {
diff --git a/src/views/dashboard/components/watchAlarmBar.vue b/src/views/dashboard/components/watchAlarmBar.vue
index 13824f3..6a18ef6 100644
--- a/src/views/dashboard/components/watchAlarmBar.vue
+++ b/src/views/dashboard/components/watchAlarmBar.vue
@@ -1,9 +1,11 @@
+<!--水表告警统计-->
 <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"
@@ -18,14 +20,14 @@
         @change="fetchData"/>
     </div>
     <ve-histogram v-if="isShow" :data="chartData" :grid="grid" :title="title" :extend="extend" :settings="chartSettings"/>
-    <div class="function">
-      <el-button
-        v-for="item in areaList"
-        :key="item.id"
-        round
-        size="mini"
-        @click="areaChange(item.id)">{{ item.name }}</el-button>
-    </div>
+    <!--<div class="function">-->
+      <!--<el-button-->
+        <!--v-for="item in areaList"-->
+        <!--:key="item.id"-->
+        <!--round-->
+        <!--size="mini"-->
+        <!--@click="areaChange(item.id)">{{ item.name }}</el-button>-->
+    <!--</div>-->
   </div>
 </template>
 
@@ -38,51 +40,51 @@
 export default {
   name: 'WatchAlarmBar',
   data() {
-    this.extend = {
-      legend: {
-        show: false
-      },
-      xAxis: {
-        axisLabel: {
-          rotate: 30,
-          margin: 30,
-          textStyle: {
-            align: 'center'
-          }
-        }
-      },
-      yAxis: {
-        name: '报警次数',
-        position: 'left'
-      },
-      series: {
-        label: { show: true, position: 'top', formatter: '{c}' },
-        barWidth: 25
-      },
-      tooltip: { trigger: 'item', formatter: '{b}<br/>报警次数：{c}次' }
-    }
-    this.grid = {
-      right: 40,
-      top: 100,
-      bottom: 5
-    }
-    this.title = {
-      text: '水表告警统计'
-    }
-    this.chartSettings = {
-      itemStyle: {
-        barCategoryGap: 10
-      },
-
-      labelMap: {
-        'areaName': '分区',
-        'alarm': '报警数',
-        'warning': '预警数'
-      },
-      dimension: ['areaName'],
-      metrics: ['alarm', 'warning']
-    }
     return {
+      title:{
+        text: '水表告警统计'
+      },
+      chartSettings:{
+        itemStyle: {
+          barCategoryGap: 0
+        },
+        labelMap: {
+          'areaName': '分区',
+          'alarm': '报警数',
+          'warning': '预警数'
+        },
+        dimension: ['areaName'],
+        metrics: ['alarm', 'warning']
+      },
+      grid: {
+        right: 40,
+        top: 80,
+        bottom: 5
+      },
+      extend: {
+        legend: {
+          show: false
+        },
+        xAxis: {
+          axisLabel: {
+            rotate: 30,
+            margin: 30,
+            textStyle: {
+              align: 'center'
+            }
+          }
+        },
+        yAxis: {
+          name: '报警次数',
+          position: 'left',
+          max: 10
+        },
+        series: {
+          label: { show: true, position: 'top', formatter: '{c}' },
+          barWidth: 20
+        },
+        // tooltip: { trigger: 'item', formatter: '{b}<br/>报警次数：{c}次' }
+      },
       areaId: '',
       areaList: [],
       isShow: true,
@@ -100,43 +102,50 @@
         }
       },
       chartData: {
-        columns: ['wellTypeName', 'alarm'],
+        columns: ['areaName', 'alarm'],
         rows: []
       }
     }
   },
   mounted() {
     this.setDefaultTime('today')
-    this.fetchArea()
+    // this.fetchArea()
   },
   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()
-    },
+    // 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() {
       const params = {
-        areaId: this.areaId,
+        areaId: '110000',
         startTime: this.timeRange[0],
         endTime: this.timeRange[1]
       }
+      this.$emit('change', params)
       alarmBySecondArea(params).then(response => {
         this.isShow = false
         this.chartData.rows = response.data
+        const maxValue = Math.max.apply(Math, response.data.map(item=> {return item.alarm>item.warning?item.alarm: item.warning}))
+        if (maxValue < 10) {
+          this.extend.yAxis.max = 10
+        } else {
+          this.extend.yAxis = maxValue+1
+        }
         // this.chartData.rows = [
         //   { 'areaName': '科技楼及食堂', 'alarm': 53 },
         //   { 'areaName': 'A\\B\\C\\D\\E座', 'alarm': 78 },
@@ -186,10 +195,11 @@
     }
   }
   .statistic-container {
+
     .el-button{
       padding: 5px 10px;
     }
-    /*margin-bottom: 10px;*/
+    margin-bottom: 10px;
     text-align: center;
     .chart-tool-button {
       padding: 5px;
diff --git a/src/views/dashboard/components/waterCompare.vue b/src/views/dashboard/components/waterCompare.vue
new file mode 100644
index 0000000..8e34936
--- /dev/null
+++ b/src/views/dashboard/components/waterCompare.vue
@@ -0,0 +1,117 @@
+<!--分区用水对比图-->
+<template>
+  <div class="container">
+    <function-area ref="func" select="week" @change="fetchData"/>
+    <ve-histogram v-if="isShow" :data="chartData" :grid="grid" :title="title" :extend="extend" :settings="chartSettings"/>
+  </div>
+</template>
+
+<script>
+
+import 'echarts/lib/component/visualMap'
+import { alarmBySecondArea } from '@/api/overview'
+import { getDayTime } from '@/utils/dateutils'
+import { getDoorAreaTree } from '@/api/system/area'
+import FunctionArea from "./FunctionArea";
+export default {
+  name: 'WaterCompare',
+  components: {FunctionArea},
+  data() {
+    return {
+      title:{ text: '分区用水对比图'},
+      chartSettings:{
+        labelMap: {
+          'areaName': '分区',
+          'last': '报警数',
+          'now': '预警数'
+        },
+        dimension: ['areaName'],
+        metrics: ['last', 'now']
+      },
+      grid: {
+        right: 40,
+        top: 80,
+        bottom: 5
+      },
+      extend: {
+        legend: {
+          show: false
+        },
+        xAxis: {
+          axisLabel: {
+            rotate: 30,
+            margin: 30,
+            textStyle: {
+              align: 'center'
+            }
+          }
+        },
+        yAxis: {
+          name: '用水量(吨)',
+          position: 'left',
+          max: 10
+        },
+        series: {
+          label: { show: true, position: 'top', formatter: '{c}' },
+          barWidth: 20
+        },
+        // tooltip: { trigger: 'item', formatter: '{b}<br/>报警次数：{c}次' }
+      },
+      areaId: '',
+      areaList: [],
+      isShow: true,
+      defaultTimeRange: [],
+      chartData: {
+        columns: ['areaName', 'last', 'now'],
+        rows: []
+      },
+      nameDict:{
+        'today':['昨日用水','今日用水'],
+        'week':['近7日用水','对照时间用水',],
+        'month':['近30日用水','对照时间用水',],
+        'season':['上季度用水','本季度用水',],
+        'year':['上年度用水','本年度用水',],
+        'other':['对照时间用水','自选时间用水']
+      }
+    }
+  },
+  mounted(){
+    this.$refs.func.init()
+  },
+  methods: {
+    fetchData(timeRange) {
+      const params = {
+        areaId: '110000',
+        startTime: timeRange[0],
+        endTime: timeRange[1]
+      }
+      alarmBySecondArea(params).then(response => {
+        this.isShow = false
+        this.chartData.rows = response.data
+        const maxValue = Math.max.apply(Math, response.data.map(item=> {return item.last>item.now?item.last: item.now}))
+        if (maxValue < 10) {
+          this.extend.yAxis.max = 10
+        } else {
+          this.extend.yAxis = maxValue+1
+        }
+        // this.chartData.rows = [
+        //   { 'areaName': '科技楼及食堂', 'alarm': 53 },
+        //   { 'areaName': 'A\\B\\C\\D\\E座', 'alarm': 78 },
+        //   { 'areaName': '厂区', 'alarm': 78 }]
+        this.isShow = true
+      })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+  .container{
+    position:relative;
+    .function{
+      width:calc(100% - 120px);
+      height: 28px;
+      display: flex;
+      justify-content: center;
+    }
+  }
+</style>
diff --git a/src/views/dashboard/components/waterCountByAreaBar.vue b/src/views/dashboard/components/waterCountByAreaBar.vue
index 1bdac48..f4196f1 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"
@@ -18,14 +19,14 @@
         @change="fetchData"/>
     </div>
     <ve-histogram v-if="isShow" :data="chartData" :grid="grid" :title="title" :extend="extend" :settings="chartSettings"/>
-    <div class="function">
-      <el-button
-        v-for="item in areaList"
-        :key="item.id"
-        round
-        size="mini"
-        @click="areaChange(item.id)">{{ item.name }}</el-button>
-    </div>
+    <!--<div class="function">-->
+      <!--<el-button-->
+        <!--v-for="item in areaList"-->
+        <!--:key="item.id"-->
+        <!--round-->
+        <!--size="mini"-->
+        <!--@click="areaChange(item.id)">{{ item.name }}</el-button>-->
+    <!--</div>-->
   </div>
 </template>
 
@@ -106,8 +107,8 @@
     }
   },
   mounted() {
-    this.setDefaultTime('today')
-    this.fetchArea()
+    this.setDefaultTime('week')
+    // 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,9 @@
         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
+        const nowDayOfWeek =  6
+        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..07524f9 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: {
@@ -27,8 +39,7 @@
         text: '用水走势图'
       },
       chartSettings: {
-        labelMap: {
-        },
+        labelMap: {date:'日期'},
         metrics: [],
         dimension: ['date']
       },
@@ -52,13 +63,19 @@
     }
   },
   mounted() {
-    this.changeTime('month')
-    this.fetchArea()
+    // this.changeTime('month')
+    // this.fetchArea()
+  },
+  watch:{
+    query(val){
+      this.fetchData()
+    }
   },
   methods: {
     fetchArea() {
       getDoorAreaTree().then(response => {
         if (response.code === 200) {
+          debugger
           const area = response.data.filter(item => {
             return item.pid === '1'
           }).map(item => item.name)
@@ -73,15 +90,21 @@
       })
     },
     fetchData() {
-      countByDayFirst(this.listQuery).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
-          }
-          delete item.data
-          return item
-        })
-        this.chartData.rows = arr
+      countByDayFirst(this.query).then(response => {
+        if(response.data.length>0){
+          const arr = response.data.map((item)=> {
+            const result = {date: item.date}
+            for (let i = 0; i < item.data.length; i++) {
+              result[item.data[i].areaName] = item.data[i].count
+            }
+            return result
+          })
+          const area = response.data[0].data.map(item=>item.areaName)
+          this.chartData.columns = ['date', ...area]
+          this.chartSettings.metrics = area
+          this.chartSettings.labelMap = {'date':'日期'}
+          this.chartData.rows = arr
+        }
       })
       // 模拟数据
       // this.chartData.rows = [
@@ -126,17 +149,7 @@
 </script>
 <style lang="scss" scoped>
   .container{
-    position:relative;
-    .function{
-      /*position:absolute;*/
-      /*z-index:200;*/
-      /*bottom: 10px;*/
-      /*left: 0;*/
-      width:100%;
-      height: 28px;
-      display: flex;
-      justify-content: center;
-    }
+
   }
 </style>
 
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..a4ff85d
--- /dev/null
+++ b/src/views/dashboard/components/waterNote.vue
@@ -0,0 +1,142 @@
+<!--用水事记L -->
+<template>
+  <div class="container">
+    <div class="title">
+      青岛公司用水事记
+      <i v-if="!editMode" class="el-icon-edit edit-btn" style="float:right" @click="editNote"></i>
+      <i v-else class="el-icon-check edit-btn" style="float:right" @click="saveNote"></i>
+    </div>
+    <div class="content-div">
+      <el-scrollbar class="white-scrollbar">
+        <div v-for="(item,index) of currentList" :key="'note_'+index" class="content-line">
+          <div v-if="!editMode">{{index+1}}. {{item.content}}</div>
+          <div v-else class="edit-line">
+            <div style="margin-right: 5px">{{index+1}}. </div>
+            <el-input v-model="item.content" size="mini" maxlength="30"></el-input>
+            <div style="width: 85px;display: flex;justify-content: flex-end">
+              <i v-show="index!==0" class="el-icon-top" @click="toTop(index)"></i>
+              <i v-show="index!==currentList.length-1" class="el-icon-bottom" @click="toBottom(index)"></i>
+              <i class="el-icon-delete" @click="deleteItem(index)"></i>
+            </div>
+          </div>
+        </div>
+        <div v-if="editMode&&currentList.length<10" class="content-line">
+          <i class="el-icon-circle-plus-outline icon-btn" @click="addItem()"></i>
+        </div>
+      </el-scrollbar>
+    </div>
+  </div>
+</template>
+
+<script>
+import { getNoteList, updateNoteList } from '@/api/dashboard'
+import { getDoorAreaTree } from '@/api/system/area'
+export default {
+  name: 'WaterNote',
+  props:{
+    query: {
+      type: Object,
+      default:()=>{
+        return {
+          areaId: '',
+          startTime: '',
+          endTime: ''
+        }
+      }
+    }
+  },
+  data() {
+    return {
+      editMode: false, // 编辑模式
+      originList:[], // 原始列表
+      currentList:[] // 当前列表
+    }
+  },
+  mounted() {
+    this.fetchData()
+  },
+  methods: {
+    // 获取统计数据
+    fetchData() {
+      this.currentList = [
+        { 'content': '测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试', 'num': 1 },
+        { 'content': '测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试', 'num': 1 },
+        { 'content': '测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试', 'num': 1 },
+        { 'content': '测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试', 'num': 1 },
+        { 'content': '测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试', 'num': 1 }
+      ]
+      this.originList = JSON.parse(JSON.stringify(this.currentList))
+      // getNoteList().then(response => {
+      //   this.currentList = response.data
+      // })
+    },
+    toTop(index){
+      this.currentList[index-1] = this.currentList.splice(index,1,this.currentList[index-1])[0]
+    },
+    toBottom(index){
+      this.currentList[index] = this.currentList.splice(index+1,1,this.currentList[index])[0]
+    },
+    deleteItem(index){
+      this.currentList.splice(index,1)
+    },
+    addItem(){
+      this.currentList.push({content:'',num:99})
+    },
+    // 开启编辑
+    editNote(){
+      this.editMode = true
+    },
+    // 保存用水事记
+    saveNote(){
+      const currentList = this.currentList.map((item, index)=>{
+        return {content: item.content, num: index}
+      })
+      console.log(currentList)
+      updateNoteList(currentList).then(res=>{
+        this.editMode = false
+        this.$message.success('保存成功')
+      }).catch(e=>{
+        // this.currentList = JSON.parse(JSON.stringify(this.originList))
+      })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+  @import "@/styles/variables.scss";
+  .container{
+    position:relative;
+    height: 428px;
+    display: flex;
+    flex-direction: column;
+    .content-div{
+      height: 410px;
+      .content-line{
+        line-height: 30px;
+        font-size: 16px;
+      }
+      .edit-line{
+        width: 100%;
+        display: flex;
+        align-items: center;
+      }
+    }
+  }
+  .edit-btn, .icon-btn{
+    &:hover{
+      cursor: pointer;
+      color: $themeColor;
+    }
+  }
+</style>
+<style lang="scss">
+  .white-scrollbar{
+    height: 100%;
+    .el-scrollbar__wrap{
+      overflow-x: hidden;
+      padding: 10px 0px;
+      background-color: #FFFFFF;
+    }
+  }
+
+</style>
diff --git a/src/views/dashboard/index.vue b/src/views/dashboard/index.vue
index fdbc38a..69d09ea 100644
--- a/src/views/dashboard/index.vue
+++ b/src/views/dashboard/index.vue
@@ -1,54 +1,55 @@
 <template>
   <div class="dashboard-container" style="background-color: white">
     <panel-group ref="panelgroup"/>
-    <el-row :gutter="10">
-      <!-- 用水统计图 -->
+    <el-row>
+      <!--设备在线数量统计-->
       <el-col :span="12">
         <el-card shadow="never">
-          <water-count-by-dept-bar/>
+          <water-compare/>
+        </el-card>
+      </el-col>
+      <!--设备数量统计-->
+      <el-col v-if="hasPerm('/statics/deviceStaticsByType')" :span="12">
+        <el-card shadow="never">
+          <device-count/>
+        </el-card>
+      </el-col>
+      <!-- 用水统计图 -->
+      <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 :query="listQuery1" ref="waterCountPie"/>
         </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/>
+          <water-count-by-day :query="listQuery1" ref="waterCountDay"/>
         </el-card>
       </el-col>
 
-      <!--设备数量统计-->
-      <el-col v-if="hasPerm('/statics/deviceStaticsByType')" :span="12">
+      <!--水表报警次数统计，柱状图-->
+      <el-col v-if="hasPerm('/statics/alarmsByDay')" :span="12">
         <el-card shadow="never">
-          <device-count/>
+          <watch-alarm-bar @change="changeAlarmQuery"/>
+        </el-card>
+      </el-col>
+      <!--报警饼图统计-->
+      <el-col v-if="hasPerm('/statics/alarmsByDay')" :span="12">
+        <el-card shadow="never">
+          <alarm-count-by-dept :query="listQuery2"/>
         </el-card>
       </el-col>
     </el-row>
@@ -64,20 +65,26 @@
 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";
+import AlarmCountByDept from "./components/AlarmCountByDept";
+import WaterCompare from "./components/waterCompare";
 
 export default {
   name: 'Dashboard',
   components: {
+    WaterCompare,
+    AlarmCountByDept,
+    WaterNote,
     WatchAlarmBar,
     WaterCountByAreaBar,
     WaterCountByDay,
     WaterCountByDeptBar,
-    WaterCountByDepy,
+    WaterCountByDept,
     JobByStatus,
     AlarmByDays,
     PanelGroup,
@@ -108,12 +115,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:'110000',
+        startTime:new Date().Format('yyyy-MM-dd'),
+        endTime:new Date().Format('yyyy-MM-dd')
+      } // 分区报警查询条件
+    }
+  },
   watch: {
     needRefresh(val) {
       // 需要刷新
       if (val) {
         console.log('refresh dashboard')
-        debugger
         this.$refs.panelgroup.refresh()
       }
     }
@@ -124,6 +144,14 @@
   methods: {
     webSocket() {
       this.$store.dispatch('initWebSocket')
+    },
+    // 切换分区查询条件
+    changeWaterQuery(listQuery1){
+      this.listQuery1 = listQuery1
+    },
+    // 切换报警查询条件
+    changeAlarmQuery(listQuery2){
+      this.listQuery2 = listQuery2
     }
   }
 }
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 })
-        }
-      }
-    }
-  }
-}