diff --git a/src/api/dashboard.js b/src/api/dashboard.js
index 0a4ddfc..6ad37f1 100644
--- a/src/api/dashboard.js
+++ b/src/api/dashboard.js
@@ -20,7 +20,7 @@
 // 阀门数量
 export function valveCount() {
   return request({
-    url: 'waterMeterData/count',
+    url: '/device/valve/count',
     method: 'get'
   })
 }
@@ -71,3 +71,22 @@
 }
 
 
+// 用水事记查询
+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 0a4ddfc..6ad37f1 100644
--- a/src/api/dashboard.js
+++ b/src/api/dashboard.js
@@ -20,7 +20,7 @@
 // 阀门数量
 export function valveCount() {
   return request({
-    url: 'waterMeterData/count',
+    url: '/device/valve/count',
     method: 'get'
   })
 }
@@ -71,3 +71,22 @@
 }
 
 
+// 用水事记查询
+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/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 0a4ddfc..6ad37f1 100644
--- a/src/api/dashboard.js
+++ b/src/api/dashboard.js
@@ -20,7 +20,7 @@
 // 阀门数量
 export function valveCount() {
   return request({
-    url: 'waterMeterData/count',
+    url: '/device/valve/count',
     method: 'get'
   })
 }
@@ -71,3 +71,22 @@
 }
 
 
+// 用水事记查询
+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/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 0a4ddfc..6ad37f1 100644
--- a/src/api/dashboard.js
+++ b/src/api/dashboard.js
@@ -20,7 +20,7 @@
 // 阀门数量
 export function valveCount() {
   return request({
-    url: 'waterMeterData/count',
+    url: '/device/valve/count',
     method: 'get'
   })
 }
@@ -71,3 +71,22 @@
 }
 
 
+// 用水事记查询
+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/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 0a4ddfc..6ad37f1 100644
--- a/src/api/dashboard.js
+++ b/src/api/dashboard.js
@@ -20,7 +20,7 @@
 // 阀门数量
 export function valveCount() {
   return request({
-    url: 'waterMeterData/count',
+    url: '/device/valve/count',
     method: 'get'
   })
 }
@@ -71,3 +71,22 @@
 }
 
 
+// 用水事记查询
+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/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 332cbf9..7be90a7 100644
--- a/src/views/dashboard/components/PanelGroup.vue
+++ b/src/views/dashboard/components/PanelGroup.vue
@@ -62,7 +62,6 @@
           context: '--',
           icon: 'icon-valve',
           color: '#40c9c6',
-          path: '/deviceList?deviceType=20',
           permission: '/device/list'
         },
         {
@@ -103,7 +102,7 @@
       // 用水量
       getWatchStatistic().then(response => {
         this.dataGroup1[0].context = [response.data.total?parseFloat(response.data.total).toFixed(0):'--', response.data.month?parseFloat(response.data.month).toFixed(0):'--']
-        this.dataGroup1[1].context = [response.data.today?parseFloat(response.data.today).toFixed(0):'--', response.data.yesterday?parseFloat(response.data.yesterday).toFixed(0):'--']
+        this.dataGroup1[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):'--']
       })
 

diff --git a/src/api/dashboard.js b/src/api/dashboard.js
index 0a4ddfc..6ad37f1 100644
--- a/src/api/dashboard.js
+++ b/src/api/dashboard.js
@@ -20,7 +20,7 @@
 // 阀门数量
 export function valveCount() {
   return request({
-    url: 'waterMeterData/count',
+    url: '/device/valve/count',
     method: 'get'
   })
 }
@@ -71,3 +71,22 @@
 }
 
 
+// 用水事记查询
+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/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 332cbf9..7be90a7 100644
--- a/src/views/dashboard/components/PanelGroup.vue
+++ b/src/views/dashboard/components/PanelGroup.vue
@@ -62,7 +62,6 @@
           context: '--',
           icon: 'icon-valve',
           color: '#40c9c6',
-          path: '/deviceList?deviceType=20',
           permission: '/device/list'
         },
         {
@@ -103,7 +102,7 @@
       // 用水量
       getWatchStatistic().then(response => {
         this.dataGroup1[0].context = [response.data.total?parseFloat(response.data.total).toFixed(0):'--', response.data.month?parseFloat(response.data.month).toFixed(0):'--']
-        this.dataGroup1[1].context = [response.data.today?parseFloat(response.data.today).toFixed(0):'--', response.data.yesterday?parseFloat(response.data.yesterday).toFixed(0):'--']
+        this.dataGroup1[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):'--']
       })
 
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 0a4ddfc..6ad37f1 100644
--- a/src/api/dashboard.js
+++ b/src/api/dashboard.js
@@ -20,7 +20,7 @@
 // 阀门数量
 export function valveCount() {
   return request({
-    url: 'waterMeterData/count',
+    url: '/device/valve/count',
     method: 'get'
   })
 }
@@ -71,3 +71,22 @@
 }
 
 
+// 用水事记查询
+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/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 332cbf9..7be90a7 100644
--- a/src/views/dashboard/components/PanelGroup.vue
+++ b/src/views/dashboard/components/PanelGroup.vue
@@ -62,7 +62,6 @@
           context: '--',
           icon: 'icon-valve',
           color: '#40c9c6',
-          path: '/deviceList?deviceType=20',
           permission: '/device/list'
         },
         {
@@ -103,7 +102,7 @@
       // 用水量
       getWatchStatistic().then(response => {
         this.dataGroup1[0].context = [response.data.total?parseFloat(response.data.total).toFixed(0):'--', response.data.month?parseFloat(response.data.month).toFixed(0):'--']
-        this.dataGroup1[1].context = [response.data.today?parseFloat(response.data.today).toFixed(0):'--', response.data.yesterday?parseFloat(response.data.yesterday).toFixed(0):'--']
+        this.dataGroup1[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):'--']
       })
 
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 0a4ddfc..6ad37f1 100644
--- a/src/api/dashboard.js
+++ b/src/api/dashboard.js
@@ -20,7 +20,7 @@
 // 阀门数量
 export function valveCount() {
   return request({
-    url: 'waterMeterData/count',
+    url: '/device/valve/count',
     method: 'get'
   })
 }
@@ -71,3 +71,22 @@
 }
 
 
+// 用水事记查询
+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/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 332cbf9..7be90a7 100644
--- a/src/views/dashboard/components/PanelGroup.vue
+++ b/src/views/dashboard/components/PanelGroup.vue
@@ -62,7 +62,6 @@
           context: '--',
           icon: 'icon-valve',
           color: '#40c9c6',
-          path: '/deviceList?deviceType=20',
           permission: '/device/list'
         },
         {
@@ -103,7 +102,7 @@
       // 用水量
       getWatchStatistic().then(response => {
         this.dataGroup1[0].context = [response.data.total?parseFloat(response.data.total).toFixed(0):'--', response.data.month?parseFloat(response.data.month).toFixed(0):'--']
-        this.dataGroup1[1].context = [response.data.today?parseFloat(response.data.today).toFixed(0):'--', response.data.yesterday?parseFloat(response.data.yesterday).toFixed(0):'--']
+        this.dataGroup1[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):'--']
       })
 
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 c488923..f4196f1 100644
--- a/src/views/dashboard/components/waterCountByAreaBar.vue
+++ b/src/views/dashboard/components/waterCountByAreaBar.vue
@@ -19,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>
 
@@ -107,7 +107,7 @@
     }
   },
   mounted() {
-    this.setDefaultTime('today')
+    this.setDefaultTime('week')
     // this.fetchArea()
   },
   methods: {
@@ -180,7 +180,8 @@
         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 =  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')]

diff --git a/src/api/dashboard.js b/src/api/dashboard.js
index 0a4ddfc..6ad37f1 100644
--- a/src/api/dashboard.js
+++ b/src/api/dashboard.js
@@ -20,7 +20,7 @@
 // 阀门数量
 export function valveCount() {
   return request({
-    url: 'waterMeterData/count',
+    url: '/device/valve/count',
     method: 'get'
   })
 }
@@ -71,3 +71,22 @@
 }
 
 
+// 用水事记查询
+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/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 332cbf9..7be90a7 100644
--- a/src/views/dashboard/components/PanelGroup.vue
+++ b/src/views/dashboard/components/PanelGroup.vue
@@ -62,7 +62,6 @@
           context: '--',
           icon: 'icon-valve',
           color: '#40c9c6',
-          path: '/deviceList?deviceType=20',
           permission: '/device/list'
         },
         {
@@ -103,7 +102,7 @@
       // 用水量
       getWatchStatistic().then(response => {
         this.dataGroup1[0].context = [response.data.total?parseFloat(response.data.total).toFixed(0):'--', response.data.month?parseFloat(response.data.month).toFixed(0):'--']
-        this.dataGroup1[1].context = [response.data.today?parseFloat(response.data.today).toFixed(0):'--', response.data.yesterday?parseFloat(response.data.yesterday).toFixed(0):'--']
+        this.dataGroup1[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):'--']
       })
 
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 c488923..f4196f1 100644
--- a/src/views/dashboard/components/waterCountByAreaBar.vue
+++ b/src/views/dashboard/components/waterCountByAreaBar.vue
@@ -19,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>
 
@@ -107,7 +107,7 @@
     }
   },
   mounted() {
-    this.setDefaultTime('today')
+    this.setDefaultTime('week')
     // this.fetchArea()
   },
   methods: {
@@ -180,7 +180,8 @@
         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 =  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')]
diff --git a/src/views/dashboard/components/waterCountByDay.vue b/src/views/dashboard/components/waterCountByDay.vue
index 78d1f7c..07524f9 100644
--- a/src/views/dashboard/components/waterCountByDay.vue
+++ b/src/views/dashboard/components/waterCountByDay.vue
@@ -39,8 +39,7 @@
         text: '用水走势图'
       },
       chartSettings: {
-        labelMap: {
-        },
+        labelMap: {date:'日期'},
         metrics: [],
         dimension: ['date']
       },
@@ -76,6 +75,7 @@
     fetchArea() {
       getDoorAreaTree().then(response => {
         if (response.code === 200) {
+          debugger
           const area = response.data.filter(item => {
             return item.pid === '1'
           }).map(item => item.name)
@@ -91,14 +91,20 @@
     },
     fetchData() {
       countByDayFirst(this.query).then(response => {
-        const arr = response.data.map(function(item) {
-          for (let i = 0; i < item.data.length; i++) {
-            item[item.data[i].areaName] = item.data[i].count
-          }
-          delete item.data
-          return item
-        })
-        this.chartData.rows = arr
+        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 = [
@@ -143,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 0a4ddfc..6ad37f1 100644
--- a/src/api/dashboard.js
+++ b/src/api/dashboard.js
@@ -20,7 +20,7 @@
 // 阀门数量
 export function valveCount() {
   return request({
-    url: 'waterMeterData/count',
+    url: '/device/valve/count',
     method: 'get'
   })
 }
@@ -71,3 +71,22 @@
 }
 
 
+// 用水事记查询
+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/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 332cbf9..7be90a7 100644
--- a/src/views/dashboard/components/PanelGroup.vue
+++ b/src/views/dashboard/components/PanelGroup.vue
@@ -62,7 +62,6 @@
           context: '--',
           icon: 'icon-valve',
           color: '#40c9c6',
-          path: '/deviceList?deviceType=20',
           permission: '/device/list'
         },
         {
@@ -103,7 +102,7 @@
       // 用水量
       getWatchStatistic().then(response => {
         this.dataGroup1[0].context = [response.data.total?parseFloat(response.data.total).toFixed(0):'--', response.data.month?parseFloat(response.data.month).toFixed(0):'--']
-        this.dataGroup1[1].context = [response.data.today?parseFloat(response.data.today).toFixed(0):'--', response.data.yesterday?parseFloat(response.data.yesterday).toFixed(0):'--']
+        this.dataGroup1[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):'--']
       })
 
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 c488923..f4196f1 100644
--- a/src/views/dashboard/components/waterCountByAreaBar.vue
+++ b/src/views/dashboard/components/waterCountByAreaBar.vue
@@ -19,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>
 
@@ -107,7 +107,7 @@
     }
   },
   mounted() {
-    this.setDefaultTime('today')
+    this.setDefaultTime('week')
     // this.fetchArea()
   },
   methods: {
@@ -180,7 +180,8 @@
         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 =  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')]
diff --git a/src/views/dashboard/components/waterCountByDay.vue b/src/views/dashboard/components/waterCountByDay.vue
index 78d1f7c..07524f9 100644
--- a/src/views/dashboard/components/waterCountByDay.vue
+++ b/src/views/dashboard/components/waterCountByDay.vue
@@ -39,8 +39,7 @@
         text: '用水走势图'
       },
       chartSettings: {
-        labelMap: {
-        },
+        labelMap: {date:'日期'},
         metrics: [],
         dimension: ['date']
       },
@@ -76,6 +75,7 @@
     fetchArea() {
       getDoorAreaTree().then(response => {
         if (response.code === 200) {
+          debugger
           const area = response.data.filter(item => {
             return item.pid === '1'
           }).map(item => item.name)
@@ -91,14 +91,20 @@
     },
     fetchData() {
       countByDayFirst(this.query).then(response => {
-        const arr = response.data.map(function(item) {
-          for (let i = 0; i < item.data.length; i++) {
-            item[item.data[i].areaName] = item.data[i].count
-          }
-          delete item.data
-          return item
-        })
-        this.chartData.rows = arr
+        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 = [
@@ -143,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/waterNote.vue b/src/views/dashboard/components/waterNote.vue
index aa0f448..a4ff85d 100644
--- a/src/views/dashboard/components/waterNote.vue
+++ b/src/views/dashboard/components/waterNote.vue
@@ -1,15 +1,35 @@
-<!--suppress ALL -->
+<!--用水事记L -->
 <template>
   <div class="container">
-    <div>
-      用水事记
+    <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 { countBySecondArea } from '@/api/overview'
+import { getNoteList, updateNoteList } from '@/api/dashboard'
 import { getDoorAreaTree } from '@/api/system/area'
 export default {
   name: 'WaterNote',
@@ -27,126 +47,96 @@
   },
   data() {
     return {
-      listQuery: {
-        areaId: '',
-        startTime: '',
-        endTime: ''
-      },
-      areaId:'',
-      areaList: [],
-      chartData: {
-        columns: ['areaName', 'count'],
-        rows: []
-      },
-      extend: {
-        grid: {
-          right: '30%'
-        },
-        legend: {
-          type: 'scroll',
-          top: '60px',
-          right: '0px',
-          orient: 'vertical'
-        },
-        series: {
-          label: { show: true, position: 'outside', formatter: '{b}' },
-          right: 120
-        },
-        tooltip: { trigger: 'item', formatter: '{b}<br/>用水量：{c}吨<br/>占比：{d}%' }
-      },
-      title: {
-        text: '分区用水占比图'
-      },
-      chartSettings: {
-        labelMap: {
-          'areaName': '分区',
-          'count': '用水量'
-        },
-        dimension: 'areaName',
-        metrics: 'count'
-      }
+      editMode: false, // 编辑模式
+      originList:[], // 原始列表
+      currentList:[] // 当前列表
     }
   },
   mounted() {
-    // TODO:待调试真接口
-    // this.fetchArea()
-  },
-  watch:{
-    query(val){
-      this.fetchData()
-    }
+    this.fetchData()
   },
   methods: {
-    fetchArea() {
-      getDoorAreaTree().then(response => {
-        if (response.code === 200) {
-          this.areaList = response.data.filter(item => {
-            return item.pid === '1'
-          }).map(function(item) {
-            return {
-              id: item.id, name: item.name
-            }
-          })
-          if (this.areaList.length !== 0) { this.areaChange(this.areaList[0].id) }
-        }
-      })
-    },
-    areaChange(val){
-      this.areaId = val
-      this.fetchData()
-    },
     // 获取统计数据
     fetchData() {
-      // this.chartData.rows = [
-      //   { 'areaName': '科技楼及食堂', 'count': 53 },
-      //   { 'areaName': 'A\\B\\C\\D\\E座', 'count': 78 },
-      //   { 'areaName': '厂区', 'count': 78 },
-      //   { 'areaName': '分段分区', 'count': 78 },
-      //   { 'areaName': '船坞分区', 'count': 78 },
-      //   { 'areaName': '刀把码头', 'count': 78 },
-      //   { 'areaName': '制管作业区', 'count': 78 },
-      //   { 'areaName': '滑道作业区', 'count': 78 },
-      //   { 'areaName': '码头作业区', 'count': 78 },
-      //   { 'areaName': '车间生产区', 'count': 78 }
-      // ]
-      countBySecondArea(this.query).then(response => {
-        this.chartData.rows = response.data
-      })
+      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
+      // })
     },
-    changeTime(timeType) {
-      let startTime
-      switch (timeType) {
-        case 'year':
-          startTime = getDayTime(new Date().getTime() - 24 * 365 * 60 * 60 * 1000)
-          this.listQuery.startTime = startTime.Format('yyyy-MM-dd')
-          break
-        case 'halfyear':
-          startTime = getDayTime(new Date().getTime() - 24 * 182 * 60 * 60 * 1000)
-          this.listQuery.startTime = startTime.Format('yyyy-MM-dd')
-          break
-        case '3month':
-          startTime = getDayTime(new Date().getTime() - 24 * 90 * 60 * 60 * 1000)
-          this.listQuery.startTime = startTime.Format('yyyy-MM-dd')
-          break
-        case 'month':
-          startTime = getDayTime(new Date().getTime() - 24 * 30 * 60 * 60 * 1000)
-          this.listQuery.startTime = startTime.Format('yyyy-MM-dd')
-          break
-        case 'week':
-          startTime = getDayTime(new Date().getTime() - 24 * 7 * 60 * 60 * 1000)
-          this.listQuery.startTime = startTime.Format('yyyy-MM-dd')
-          break
-      }
-      const endTime = new Date()
-      this.listQuery.endTime = endTime.Format('yyyy-MM-dd')
-      this.fetchData()
+    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: 455px;
+    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 0a4ddfc..6ad37f1 100644
--- a/src/api/dashboard.js
+++ b/src/api/dashboard.js
@@ -20,7 +20,7 @@
 // 阀门数量
 export function valveCount() {
   return request({
-    url: 'waterMeterData/count',
+    url: '/device/valve/count',
     method: 'get'
   })
 }
@@ -71,3 +71,22 @@
 }
 
 
+// 用水事记查询
+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/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 332cbf9..7be90a7 100644
--- a/src/views/dashboard/components/PanelGroup.vue
+++ b/src/views/dashboard/components/PanelGroup.vue
@@ -62,7 +62,6 @@
           context: '--',
           icon: 'icon-valve',
           color: '#40c9c6',
-          path: '/deviceList?deviceType=20',
           permission: '/device/list'
         },
         {
@@ -103,7 +102,7 @@
       // 用水量
       getWatchStatistic().then(response => {
         this.dataGroup1[0].context = [response.data.total?parseFloat(response.data.total).toFixed(0):'--', response.data.month?parseFloat(response.data.month).toFixed(0):'--']
-        this.dataGroup1[1].context = [response.data.today?parseFloat(response.data.today).toFixed(0):'--', response.data.yesterday?parseFloat(response.data.yesterday).toFixed(0):'--']
+        this.dataGroup1[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):'--']
       })
 
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 c488923..f4196f1 100644
--- a/src/views/dashboard/components/waterCountByAreaBar.vue
+++ b/src/views/dashboard/components/waterCountByAreaBar.vue
@@ -19,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>
 
@@ -107,7 +107,7 @@
     }
   },
   mounted() {
-    this.setDefaultTime('today')
+    this.setDefaultTime('week')
     // this.fetchArea()
   },
   methods: {
@@ -180,7 +180,8 @@
         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 =  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')]
diff --git a/src/views/dashboard/components/waterCountByDay.vue b/src/views/dashboard/components/waterCountByDay.vue
index 78d1f7c..07524f9 100644
--- a/src/views/dashboard/components/waterCountByDay.vue
+++ b/src/views/dashboard/components/waterCountByDay.vue
@@ -39,8 +39,7 @@
         text: '用水走势图'
       },
       chartSettings: {
-        labelMap: {
-        },
+        labelMap: {date:'日期'},
         metrics: [],
         dimension: ['date']
       },
@@ -76,6 +75,7 @@
     fetchArea() {
       getDoorAreaTree().then(response => {
         if (response.code === 200) {
+          debugger
           const area = response.data.filter(item => {
             return item.pid === '1'
           }).map(item => item.name)
@@ -91,14 +91,20 @@
     },
     fetchData() {
       countByDayFirst(this.query).then(response => {
-        const arr = response.data.map(function(item) {
-          for (let i = 0; i < item.data.length; i++) {
-            item[item.data[i].areaName] = item.data[i].count
-          }
-          delete item.data
-          return item
-        })
-        this.chartData.rows = arr
+        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 = [
@@ -143,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/waterNote.vue b/src/views/dashboard/components/waterNote.vue
index aa0f448..a4ff85d 100644
--- a/src/views/dashboard/components/waterNote.vue
+++ b/src/views/dashboard/components/waterNote.vue
@@ -1,15 +1,35 @@
-<!--suppress ALL -->
+<!--用水事记L -->
 <template>
   <div class="container">
-    <div>
-      用水事记
+    <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 { countBySecondArea } from '@/api/overview'
+import { getNoteList, updateNoteList } from '@/api/dashboard'
 import { getDoorAreaTree } from '@/api/system/area'
 export default {
   name: 'WaterNote',
@@ -27,126 +47,96 @@
   },
   data() {
     return {
-      listQuery: {
-        areaId: '',
-        startTime: '',
-        endTime: ''
-      },
-      areaId:'',
-      areaList: [],
-      chartData: {
-        columns: ['areaName', 'count'],
-        rows: []
-      },
-      extend: {
-        grid: {
-          right: '30%'
-        },
-        legend: {
-          type: 'scroll',
-          top: '60px',
-          right: '0px',
-          orient: 'vertical'
-        },
-        series: {
-          label: { show: true, position: 'outside', formatter: '{b}' },
-          right: 120
-        },
-        tooltip: { trigger: 'item', formatter: '{b}<br/>用水量：{c}吨<br/>占比：{d}%' }
-      },
-      title: {
-        text: '分区用水占比图'
-      },
-      chartSettings: {
-        labelMap: {
-          'areaName': '分区',
-          'count': '用水量'
-        },
-        dimension: 'areaName',
-        metrics: 'count'
-      }
+      editMode: false, // 编辑模式
+      originList:[], // 原始列表
+      currentList:[] // 当前列表
     }
   },
   mounted() {
-    // TODO:待调试真接口
-    // this.fetchArea()
-  },
-  watch:{
-    query(val){
-      this.fetchData()
-    }
+    this.fetchData()
   },
   methods: {
-    fetchArea() {
-      getDoorAreaTree().then(response => {
-        if (response.code === 200) {
-          this.areaList = response.data.filter(item => {
-            return item.pid === '1'
-          }).map(function(item) {
-            return {
-              id: item.id, name: item.name
-            }
-          })
-          if (this.areaList.length !== 0) { this.areaChange(this.areaList[0].id) }
-        }
-      })
-    },
-    areaChange(val){
-      this.areaId = val
-      this.fetchData()
-    },
     // 获取统计数据
     fetchData() {
-      // this.chartData.rows = [
-      //   { 'areaName': '科技楼及食堂', 'count': 53 },
-      //   { 'areaName': 'A\\B\\C\\D\\E座', 'count': 78 },
-      //   { 'areaName': '厂区', 'count': 78 },
-      //   { 'areaName': '分段分区', 'count': 78 },
-      //   { 'areaName': '船坞分区', 'count': 78 },
-      //   { 'areaName': '刀把码头', 'count': 78 },
-      //   { 'areaName': '制管作业区', 'count': 78 },
-      //   { 'areaName': '滑道作业区', 'count': 78 },
-      //   { 'areaName': '码头作业区', 'count': 78 },
-      //   { 'areaName': '车间生产区', 'count': 78 }
-      // ]
-      countBySecondArea(this.query).then(response => {
-        this.chartData.rows = response.data
-      })
+      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
+      // })
     },
-    changeTime(timeType) {
-      let startTime
-      switch (timeType) {
-        case 'year':
-          startTime = getDayTime(new Date().getTime() - 24 * 365 * 60 * 60 * 1000)
-          this.listQuery.startTime = startTime.Format('yyyy-MM-dd')
-          break
-        case 'halfyear':
-          startTime = getDayTime(new Date().getTime() - 24 * 182 * 60 * 60 * 1000)
-          this.listQuery.startTime = startTime.Format('yyyy-MM-dd')
-          break
-        case '3month':
-          startTime = getDayTime(new Date().getTime() - 24 * 90 * 60 * 60 * 1000)
-          this.listQuery.startTime = startTime.Format('yyyy-MM-dd')
-          break
-        case 'month':
-          startTime = getDayTime(new Date().getTime() - 24 * 30 * 60 * 60 * 1000)
-          this.listQuery.startTime = startTime.Format('yyyy-MM-dd')
-          break
-        case 'week':
-          startTime = getDayTime(new Date().getTime() - 24 * 7 * 60 * 60 * 1000)
-          this.listQuery.startTime = startTime.Format('yyyy-MM-dd')
-          break
-      }
-      const endTime = new Date()
-      this.listQuery.endTime = endTime.Format('yyyy-MM-dd')
-      this.fetchData()
+    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: 455px;
+    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 831dbc3..69d09ea 100644
--- a/src/views/dashboard/index.vue
+++ b/src/views/dashboard/index.vue
@@ -2,6 +2,18 @@
   <div class="dashboard-container" style="background-color: white">
     <panel-group ref="panelgroup"/>
     <el-row>
+      <!--设备在线数量统计-->
+      <el-col :span="12">
+        <el-card shadow="never">
+          <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">
@@ -28,29 +40,16 @@
         </el-card>
       </el-col>
 
-      <!--水表报警次数统计-->
+      <!--水表报警次数统计，柱状图-->
       <el-col v-if="hasPerm('/statics/alarmsByDay')" :span="12">
         <el-card shadow="never">
-          <watch-alarm-bar/>
+          <watch-alarm-bar @change="changeAlarmQuery"/>
         </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/>
+          <alarm-count-by-dept :query="listQuery2"/>
         </el-card>
       </el-col>
     </el-row>
@@ -72,10 +71,14 @@
 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,
@@ -120,9 +123,9 @@
         endTime:new Date().Format('yyyy-MM-dd')
       },// 分区用水量查询条件
       listQuery2:{
-        areaId:'',
-        startTime:'',
-        endTime:''
+        areaId:'110000',
+        startTime:new Date().Format('yyyy-MM-dd'),
+        endTime:new Date().Format('yyyy-MM-dd')
       } // 分区报警查询条件
     }
   },
@@ -145,6 +148,10 @@
     // 切换分区查询条件
     changeWaterQuery(listQuery1){
       this.listQuery1 = listQuery1
+    },
+    // 切换报警查询条件
+    changeAlarmQuery(listQuery2){
+      this.listQuery2 = listQuery2
     }
   }
 }