diff --git a/src/api/gasOverview.js b/src/api/gasOverview.js
index a8996f5..b7da600 100644
--- a/src/api/gasOverview.js
+++ b/src/api/gasOverview.js
@@ -53,8 +53,24 @@
     params
   })
 }
-// 查询二级分区各区用水量对比
-export function waterCompare(params) {
+// 查询二级分区燃气告警
+export function gasAlarmBySecondArea(params) {
+  return request({
+    url: 'dataStatistic/gasAlarmBySecondArea',
+    method: 'get',
+    params
+  })
+}
+// 各设备腐蚀速率统计
+export function corrRateByDevice(params) {
+  return request({
+    url: 'statics/corrRateByDevice',
+    method: 'get',
+    params
+  })
+}
+// 查询二级分区用气对比
+export function gasCompareData(params) {
   return request({
     url: 'gasStatistic/gasCompare',
     method: 'get',

diff --git a/src/api/gasOverview.js b/src/api/gasOverview.js
index a8996f5..b7da600 100644
--- a/src/api/gasOverview.js
+++ b/src/api/gasOverview.js
@@ -53,8 +53,24 @@
     params
   })
 }
-// 查询二级分区各区用水量对比
-export function waterCompare(params) {
+// 查询二级分区燃气告警
+export function gasAlarmBySecondArea(params) {
+  return request({
+    url: 'dataStatistic/gasAlarmBySecondArea',
+    method: 'get',
+    params
+  })
+}
+// 各设备腐蚀速率统计
+export function corrRateByDevice(params) {
+  return request({
+    url: 'statics/corrRateByDevice',
+    method: 'get',
+    params
+  })
+}
+// 查询二级分区用气对比
+export function gasCompareData(params) {
   return request({
     url: 'gasStatistic/gasCompare',
     method: 'get',
diff --git a/src/views/gasDashboard/components/alarmGasCountByDept.vue b/src/views/gasDashboard/components/alarmGasCountByDept.vue
index 60ab5ad..b8bfc23 100644
--- a/src/views/gasDashboard/components/alarmGasCountByDept.vue
+++ b/src/views/gasDashboard/components/alarmGasCountByDept.vue
@@ -8,7 +8,7 @@
 </template>
 
 <script>
-import { alarmBySecondArea } from '@/api/gasOverview'
+import { gasAlarmBySecondArea } from '@/api/gasOverview'
 export default {
   name: 'AlarmGasCountByDept',
   props: {
@@ -64,7 +64,7 @@
   methods: {
     // 获取统计数据
     fetchData() {
-      alarmBySecondArea(this.query).then(response => {
+      gasAlarmBySecondArea(this.query).then(response => {
         this.chartData.rows = response.data
       })
     }

diff --git a/src/api/gasOverview.js b/src/api/gasOverview.js
index a8996f5..b7da600 100644
--- a/src/api/gasOverview.js
+++ b/src/api/gasOverview.js
@@ -53,8 +53,24 @@
     params
   })
 }
-// 查询二级分区各区用水量对比
-export function waterCompare(params) {
+// 查询二级分区燃气告警
+export function gasAlarmBySecondArea(params) {
+  return request({
+    url: 'dataStatistic/gasAlarmBySecondArea',
+    method: 'get',
+    params
+  })
+}
+// 各设备腐蚀速率统计
+export function corrRateByDevice(params) {
+  return request({
+    url: 'statics/corrRateByDevice',
+    method: 'get',
+    params
+  })
+}
+// 查询二级分区用气对比
+export function gasCompareData(params) {
   return request({
     url: 'gasStatistic/gasCompare',
     method: 'get',
diff --git a/src/views/gasDashboard/components/alarmGasCountByDept.vue b/src/views/gasDashboard/components/alarmGasCountByDept.vue
index 60ab5ad..b8bfc23 100644
--- a/src/views/gasDashboard/components/alarmGasCountByDept.vue
+++ b/src/views/gasDashboard/components/alarmGasCountByDept.vue
@@ -8,7 +8,7 @@
 </template>
 
 <script>
-import { alarmBySecondArea } from '@/api/gasOverview'
+import { gasAlarmBySecondArea } from '@/api/gasOverview'
 export default {
   name: 'AlarmGasCountByDept',
   props: {
@@ -64,7 +64,7 @@
   methods: {
     // 获取统计数据
     fetchData() {
-      alarmBySecondArea(this.query).then(response => {
+      gasAlarmBySecondArea(this.query).then(response => {
         this.chartData.rows = response.data
       })
     }
diff --git a/src/views/gasDashboard/components/corrodeCountByDay.vue b/src/views/gasDashboard/components/corrodeCountByDay.vue
index 3a97391..82c29bf 100644
--- a/src/views/gasDashboard/components/corrodeCountByDay.vue
+++ b/src/views/gasDashboard/components/corrodeCountByDay.vue
@@ -1,13 +1,30 @@
+<!--腐蚀速率走势图-->
 <template>
   <div class="container">
-    <ve-line :data="chartData" :title="title" :extend="extend" :settings="chartSettings"/>
+    <!-- <function-area
+      ref="func"
+      select="week"
+      @change="fetchData"
+    /> -->
+    <function-area
+      ref="func"
+      select="week"
+    />
+    <ve-line
+      :data="chartData"
+      :title="title"
+      :extend="extend"
+      :settings="chartSettings"
+    />
   </div>
 </template>
 
 <script>
-import { countByDaySecond } from '@/api/gasOverview'
+import FunctionArea from './FunctionArea'
+import { corrRateByDevice } from '@/api/gasOverview'
 export default {
-  name: 'WaterCountByDay',
+  name: 'CorrodeCountByDay',
+  components: { FunctionArea },
   props: {
     query: {
       type: Object,
@@ -22,10 +39,6 @@
   },
   data() {
     return {
-      listQuery: {
-        startTime: '',
-        endTime: ''
-      },
       title: {
         text: '腐蚀速率走势图'
       },
@@ -53,24 +66,62 @@
       }
     }
   },
-  watch: {
-    query(val) {
-      this.fetchData()
-    }
+  mounted() {
+    this.$refs.func.init()
+    this.getData()
   },
   methods: {
+    // 模拟数据
+    getData() {
+      const res = [
+        {
+          'date': '2021-10-01',
+          'data': [
+            { 'devcode': '1111', 'data': 10 },
+            { 'devcode': '1112', 'data': 2 },
+            { 'devcode': '1113', 'data': 3 }
+          ]
+        },
+        {
+          'date': '2021-10-02',
+          'data': [
+            { 'devcode': '1111', 'data': 1 },
+            { 'devcode': '1112', 'data': 6 },
+            { 'devcode': '1113', 'data': 1 }
+          ]
+        }
+      ]
+      const arr = res.map((item) => {
+        const result = { date: item.date }
+        for (let i = 0; i < item.data.length; i++) {
+          result[item.data[i].devcode] = item.data[i].data
+        }
+        return result
+      })
+      const area = res[0].data.map(item => item.devcode)
+      this.chartData.columns = ['date', ...area]
+      this.chartSettings.metrics = area
+      this.chartSettings.labelMap = { 'date': '日期' }
+      this.chartData.rows = arr
+    },
     // 获取数据
-    fetchData() {
-      countByDaySecond(this.query).then(response => {
+    fetchData(timeRange, type) {
+      const params = {
+        type: type || 'other',
+        beginTime: timeRange[0],
+        endTime: timeRange[1]
+      }
+      corrRateByDevice(params).then(response => {
+        console.log(response, '======腐蚀速率走势图response=====')
         if (response.data.length > 0) {
           const arr = response.data.map((item) => {
             const result = { date: item.date }
             for (let i = 0; i < item.data.length; i++) {
-              result[item.data[i].areaName] = item.data[i].count
+              result[item.data[i].devcode] = item.data[i].data
             }
             return result
           })
-          const area = response.data[0].data.map(item => item.areaName)
+          const area = response.data[0].data.map(item => item.devcode)
           this.chartData.columns = ['date', ...area]
           this.chartSettings.metrics = area
           this.chartSettings.labelMap = { 'date': '日期' }

diff --git a/src/api/gasOverview.js b/src/api/gasOverview.js
index a8996f5..b7da600 100644
--- a/src/api/gasOverview.js
+++ b/src/api/gasOverview.js
@@ -53,8 +53,24 @@
     params
   })
 }
-// 查询二级分区各区用水量对比
-export function waterCompare(params) {
+// 查询二级分区燃气告警
+export function gasAlarmBySecondArea(params) {
+  return request({
+    url: 'dataStatistic/gasAlarmBySecondArea',
+    method: 'get',
+    params
+  })
+}
+// 各设备腐蚀速率统计
+export function corrRateByDevice(params) {
+  return request({
+    url: 'statics/corrRateByDevice',
+    method: 'get',
+    params
+  })
+}
+// 查询二级分区用气对比
+export function gasCompareData(params) {
   return request({
     url: 'gasStatistic/gasCompare',
     method: 'get',
diff --git a/src/views/gasDashboard/components/alarmGasCountByDept.vue b/src/views/gasDashboard/components/alarmGasCountByDept.vue
index 60ab5ad..b8bfc23 100644
--- a/src/views/gasDashboard/components/alarmGasCountByDept.vue
+++ b/src/views/gasDashboard/components/alarmGasCountByDept.vue
@@ -8,7 +8,7 @@
 </template>
 
 <script>
-import { alarmBySecondArea } from '@/api/gasOverview'
+import { gasAlarmBySecondArea } from '@/api/gasOverview'
 export default {
   name: 'AlarmGasCountByDept',
   props: {
@@ -64,7 +64,7 @@
   methods: {
     // 获取统计数据
     fetchData() {
-      alarmBySecondArea(this.query).then(response => {
+      gasAlarmBySecondArea(this.query).then(response => {
         this.chartData.rows = response.data
       })
     }
diff --git a/src/views/gasDashboard/components/corrodeCountByDay.vue b/src/views/gasDashboard/components/corrodeCountByDay.vue
index 3a97391..82c29bf 100644
--- a/src/views/gasDashboard/components/corrodeCountByDay.vue
+++ b/src/views/gasDashboard/components/corrodeCountByDay.vue
@@ -1,13 +1,30 @@
+<!--腐蚀速率走势图-->
 <template>
   <div class="container">
-    <ve-line :data="chartData" :title="title" :extend="extend" :settings="chartSettings"/>
+    <!-- <function-area
+      ref="func"
+      select="week"
+      @change="fetchData"
+    /> -->
+    <function-area
+      ref="func"
+      select="week"
+    />
+    <ve-line
+      :data="chartData"
+      :title="title"
+      :extend="extend"
+      :settings="chartSettings"
+    />
   </div>
 </template>
 
 <script>
-import { countByDaySecond } from '@/api/gasOverview'
+import FunctionArea from './FunctionArea'
+import { corrRateByDevice } from '@/api/gasOverview'
 export default {
-  name: 'WaterCountByDay',
+  name: 'CorrodeCountByDay',
+  components: { FunctionArea },
   props: {
     query: {
       type: Object,
@@ -22,10 +39,6 @@
   },
   data() {
     return {
-      listQuery: {
-        startTime: '',
-        endTime: ''
-      },
       title: {
         text: '腐蚀速率走势图'
       },
@@ -53,24 +66,62 @@
       }
     }
   },
-  watch: {
-    query(val) {
-      this.fetchData()
-    }
+  mounted() {
+    this.$refs.func.init()
+    this.getData()
   },
   methods: {
+    // 模拟数据
+    getData() {
+      const res = [
+        {
+          'date': '2021-10-01',
+          'data': [
+            { 'devcode': '1111', 'data': 10 },
+            { 'devcode': '1112', 'data': 2 },
+            { 'devcode': '1113', 'data': 3 }
+          ]
+        },
+        {
+          'date': '2021-10-02',
+          'data': [
+            { 'devcode': '1111', 'data': 1 },
+            { 'devcode': '1112', 'data': 6 },
+            { 'devcode': '1113', 'data': 1 }
+          ]
+        }
+      ]
+      const arr = res.map((item) => {
+        const result = { date: item.date }
+        for (let i = 0; i < item.data.length; i++) {
+          result[item.data[i].devcode] = item.data[i].data
+        }
+        return result
+      })
+      const area = res[0].data.map(item => item.devcode)
+      this.chartData.columns = ['date', ...area]
+      this.chartSettings.metrics = area
+      this.chartSettings.labelMap = { 'date': '日期' }
+      this.chartData.rows = arr
+    },
     // 获取数据
-    fetchData() {
-      countByDaySecond(this.query).then(response => {
+    fetchData(timeRange, type) {
+      const params = {
+        type: type || 'other',
+        beginTime: timeRange[0],
+        endTime: timeRange[1]
+      }
+      corrRateByDevice(params).then(response => {
+        console.log(response, '======腐蚀速率走势图response=====')
         if (response.data.length > 0) {
           const arr = response.data.map((item) => {
             const result = { date: item.date }
             for (let i = 0; i < item.data.length; i++) {
-              result[item.data[i].areaName] = item.data[i].count
+              result[item.data[i].devcode] = item.data[i].data
             }
             return result
           })
-          const area = response.data[0].data.map(item => item.areaName)
+          const area = response.data[0].data.map(item => item.devcode)
           this.chartData.columns = ['date', ...area]
           this.chartSettings.metrics = area
           this.chartSettings.labelMap = { 'date': '日期' }
diff --git a/src/views/gasDashboard/components/gasCompare.vue b/src/views/gasDashboard/components/gasCompare.vue
new file mode 100644
index 0000000..19a4398
--- /dev/null
+++ b/src/views/gasDashboard/components/gasCompare.vue
@@ -0,0 +1,121 @@
+<!--分区用气对比图-->
+<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 { gasCompareData } from '@/api/gasOverview'
+import FunctionArea from './FunctionArea'
+export default {
+  name: 'GasCompare',
+  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: true
+        },
+        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, type) {
+      const params = {
+        areaId: '110000',
+        type: type || 'other',
+        startTime: timeRange[0],
+        endTime: timeRange[1]
+      }
+      gasCompareData(params).then(response => {
+        this.isShow = false
+        this.chartSettings.labelMap = {
+          areaName: '分区',
+          last: response.data[0].lastTime,
+          now: response.data[0].nowTime
+        }
+        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.max = 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/gasOverview.js b/src/api/gasOverview.js
index a8996f5..b7da600 100644
--- a/src/api/gasOverview.js
+++ b/src/api/gasOverview.js
@@ -53,8 +53,24 @@
     params
   })
 }
-// 查询二级分区各区用水量对比
-export function waterCompare(params) {
+// 查询二级分区燃气告警
+export function gasAlarmBySecondArea(params) {
+  return request({
+    url: 'dataStatistic/gasAlarmBySecondArea',
+    method: 'get',
+    params
+  })
+}
+// 各设备腐蚀速率统计
+export function corrRateByDevice(params) {
+  return request({
+    url: 'statics/corrRateByDevice',
+    method: 'get',
+    params
+  })
+}
+// 查询二级分区用气对比
+export function gasCompareData(params) {
   return request({
     url: 'gasStatistic/gasCompare',
     method: 'get',
diff --git a/src/views/gasDashboard/components/alarmGasCountByDept.vue b/src/views/gasDashboard/components/alarmGasCountByDept.vue
index 60ab5ad..b8bfc23 100644
--- a/src/views/gasDashboard/components/alarmGasCountByDept.vue
+++ b/src/views/gasDashboard/components/alarmGasCountByDept.vue
@@ -8,7 +8,7 @@
 </template>
 
 <script>
-import { alarmBySecondArea } from '@/api/gasOverview'
+import { gasAlarmBySecondArea } from '@/api/gasOverview'
 export default {
   name: 'AlarmGasCountByDept',
   props: {
@@ -64,7 +64,7 @@
   methods: {
     // 获取统计数据
     fetchData() {
-      alarmBySecondArea(this.query).then(response => {
+      gasAlarmBySecondArea(this.query).then(response => {
         this.chartData.rows = response.data
       })
     }
diff --git a/src/views/gasDashboard/components/corrodeCountByDay.vue b/src/views/gasDashboard/components/corrodeCountByDay.vue
index 3a97391..82c29bf 100644
--- a/src/views/gasDashboard/components/corrodeCountByDay.vue
+++ b/src/views/gasDashboard/components/corrodeCountByDay.vue
@@ -1,13 +1,30 @@
+<!--腐蚀速率走势图-->
 <template>
   <div class="container">
-    <ve-line :data="chartData" :title="title" :extend="extend" :settings="chartSettings"/>
+    <!-- <function-area
+      ref="func"
+      select="week"
+      @change="fetchData"
+    /> -->
+    <function-area
+      ref="func"
+      select="week"
+    />
+    <ve-line
+      :data="chartData"
+      :title="title"
+      :extend="extend"
+      :settings="chartSettings"
+    />
   </div>
 </template>
 
 <script>
-import { countByDaySecond } from '@/api/gasOverview'
+import FunctionArea from './FunctionArea'
+import { corrRateByDevice } from '@/api/gasOverview'
 export default {
-  name: 'WaterCountByDay',
+  name: 'CorrodeCountByDay',
+  components: { FunctionArea },
   props: {
     query: {
       type: Object,
@@ -22,10 +39,6 @@
   },
   data() {
     return {
-      listQuery: {
-        startTime: '',
-        endTime: ''
-      },
       title: {
         text: '腐蚀速率走势图'
       },
@@ -53,24 +66,62 @@
       }
     }
   },
-  watch: {
-    query(val) {
-      this.fetchData()
-    }
+  mounted() {
+    this.$refs.func.init()
+    this.getData()
   },
   methods: {
+    // 模拟数据
+    getData() {
+      const res = [
+        {
+          'date': '2021-10-01',
+          'data': [
+            { 'devcode': '1111', 'data': 10 },
+            { 'devcode': '1112', 'data': 2 },
+            { 'devcode': '1113', 'data': 3 }
+          ]
+        },
+        {
+          'date': '2021-10-02',
+          'data': [
+            { 'devcode': '1111', 'data': 1 },
+            { 'devcode': '1112', 'data': 6 },
+            { 'devcode': '1113', 'data': 1 }
+          ]
+        }
+      ]
+      const arr = res.map((item) => {
+        const result = { date: item.date }
+        for (let i = 0; i < item.data.length; i++) {
+          result[item.data[i].devcode] = item.data[i].data
+        }
+        return result
+      })
+      const area = res[0].data.map(item => item.devcode)
+      this.chartData.columns = ['date', ...area]
+      this.chartSettings.metrics = area
+      this.chartSettings.labelMap = { 'date': '日期' }
+      this.chartData.rows = arr
+    },
     // 获取数据
-    fetchData() {
-      countByDaySecond(this.query).then(response => {
+    fetchData(timeRange, type) {
+      const params = {
+        type: type || 'other',
+        beginTime: timeRange[0],
+        endTime: timeRange[1]
+      }
+      corrRateByDevice(params).then(response => {
+        console.log(response, '======腐蚀速率走势图response=====')
         if (response.data.length > 0) {
           const arr = response.data.map((item) => {
             const result = { date: item.date }
             for (let i = 0; i < item.data.length; i++) {
-              result[item.data[i].areaName] = item.data[i].count
+              result[item.data[i].devcode] = item.data[i].data
             }
             return result
           })
-          const area = response.data[0].data.map(item => item.areaName)
+          const area = response.data[0].data.map(item => item.devcode)
           this.chartData.columns = ['date', ...area]
           this.chartSettings.metrics = area
           this.chartSettings.labelMap = { 'date': '日期' }
diff --git a/src/views/gasDashboard/components/gasCompare.vue b/src/views/gasDashboard/components/gasCompare.vue
new file mode 100644
index 0000000..19a4398
--- /dev/null
+++ b/src/views/gasDashboard/components/gasCompare.vue
@@ -0,0 +1,121 @@
+<!--分区用气对比图-->
+<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 { gasCompareData } from '@/api/gasOverview'
+import FunctionArea from './FunctionArea'
+export default {
+  name: 'GasCompare',
+  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: true
+        },
+        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, type) {
+      const params = {
+        areaId: '110000',
+        type: type || 'other',
+        startTime: timeRange[0],
+        endTime: timeRange[1]
+      }
+      gasCompareData(params).then(response => {
+        this.isShow = false
+        this.chartSettings.labelMap = {
+          areaName: '分区',
+          last: response.data[0].lastTime,
+          now: response.data[0].nowTime
+        }
+        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.max = 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/gasDashboard/components/gasCountByAreaBar.vue b/src/views/gasDashboard/components/gasCountByAreaBar.vue
new file mode 100644
index 0000000..456a6c6
--- /dev/null
+++ b/src/views/gasDashboard/components/gasCountByAreaBar.vue
@@ -0,0 +1,198 @@
+<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 { countBySecondArea } from '@/api/gasOverview'
+import { getDayTime } from '@/utils/dateutils'
+import { getDoorAreaTree } from '@/api/system/area'
+import FunctionArea from './FunctionArea'
+
+export default {
+  name: 'GasCountByAreaBar',
+  components: { FunctionArea },
+  data() {
+    this.extend = {
+      legend: {
+        show: true
+      },
+      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': '分区',
+        'count': '用气量'
+      },
+      dimension: ['areaName'],
+      metrics: ['count']
+    }
+    return {
+      areaId: '',
+      areaList: [],
+      isShow: true,
+      defaultTimeRange: [],
+      timeRange: [],
+      pickerOptions: {
+        disabledDate: function(date) {
+          var oDate1 = new Date(date)
+          var oDate2 = new Date()
+          if (oDate1.getTime() > oDate2.getTime()) {
+            return true
+          } else {
+            return false
+          }
+        }
+      },
+      chartData: {
+        columns: ['wellTypeName', 'count'],
+        rows: []
+      }
+    }
+  },
+  mounted() {
+    this.$refs.func.init()
+    // this.setDefaultTime('week')
+    // 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()
+    },
+    fetchData(timeRange) {
+      const params = {
+        areaId: '110000',
+        startTime: timeRange[0],
+        endTime: timeRange[1]
+      }
+      this.$emit('change', params)
+      countBySecondArea(params).then(response => {
+        this.isShow = false
+        this.chartData.rows = response.data
+        this.isShow = true
+      })
+    },
+    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.fetchData(this.timeRange)
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+  .container{
+    position:relative;
+    .function{
+      width:calc(100% - 120px);
+      height: 28px;
+      display: flex;
+      justify-content: center;
+    }
+  }
+  .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/gasOverview.js b/src/api/gasOverview.js
index a8996f5..b7da600 100644
--- a/src/api/gasOverview.js
+++ b/src/api/gasOverview.js
@@ -53,8 +53,24 @@
     params
   })
 }
-// 查询二级分区各区用水量对比
-export function waterCompare(params) {
+// 查询二级分区燃气告警
+export function gasAlarmBySecondArea(params) {
+  return request({
+    url: 'dataStatistic/gasAlarmBySecondArea',
+    method: 'get',
+    params
+  })
+}
+// 各设备腐蚀速率统计
+export function corrRateByDevice(params) {
+  return request({
+    url: 'statics/corrRateByDevice',
+    method: 'get',
+    params
+  })
+}
+// 查询二级分区用气对比
+export function gasCompareData(params) {
   return request({
     url: 'gasStatistic/gasCompare',
     method: 'get',
diff --git a/src/views/gasDashboard/components/alarmGasCountByDept.vue b/src/views/gasDashboard/components/alarmGasCountByDept.vue
index 60ab5ad..b8bfc23 100644
--- a/src/views/gasDashboard/components/alarmGasCountByDept.vue
+++ b/src/views/gasDashboard/components/alarmGasCountByDept.vue
@@ -8,7 +8,7 @@
 </template>
 
 <script>
-import { alarmBySecondArea } from '@/api/gasOverview'
+import { gasAlarmBySecondArea } from '@/api/gasOverview'
 export default {
   name: 'AlarmGasCountByDept',
   props: {
@@ -64,7 +64,7 @@
   methods: {
     // 获取统计数据
     fetchData() {
-      alarmBySecondArea(this.query).then(response => {
+      gasAlarmBySecondArea(this.query).then(response => {
         this.chartData.rows = response.data
       })
     }
diff --git a/src/views/gasDashboard/components/corrodeCountByDay.vue b/src/views/gasDashboard/components/corrodeCountByDay.vue
index 3a97391..82c29bf 100644
--- a/src/views/gasDashboard/components/corrodeCountByDay.vue
+++ b/src/views/gasDashboard/components/corrodeCountByDay.vue
@@ -1,13 +1,30 @@
+<!--腐蚀速率走势图-->
 <template>
   <div class="container">
-    <ve-line :data="chartData" :title="title" :extend="extend" :settings="chartSettings"/>
+    <!-- <function-area
+      ref="func"
+      select="week"
+      @change="fetchData"
+    /> -->
+    <function-area
+      ref="func"
+      select="week"
+    />
+    <ve-line
+      :data="chartData"
+      :title="title"
+      :extend="extend"
+      :settings="chartSettings"
+    />
   </div>
 </template>
 
 <script>
-import { countByDaySecond } from '@/api/gasOverview'
+import FunctionArea from './FunctionArea'
+import { corrRateByDevice } from '@/api/gasOverview'
 export default {
-  name: 'WaterCountByDay',
+  name: 'CorrodeCountByDay',
+  components: { FunctionArea },
   props: {
     query: {
       type: Object,
@@ -22,10 +39,6 @@
   },
   data() {
     return {
-      listQuery: {
-        startTime: '',
-        endTime: ''
-      },
       title: {
         text: '腐蚀速率走势图'
       },
@@ -53,24 +66,62 @@
       }
     }
   },
-  watch: {
-    query(val) {
-      this.fetchData()
-    }
+  mounted() {
+    this.$refs.func.init()
+    this.getData()
   },
   methods: {
+    // 模拟数据
+    getData() {
+      const res = [
+        {
+          'date': '2021-10-01',
+          'data': [
+            { 'devcode': '1111', 'data': 10 },
+            { 'devcode': '1112', 'data': 2 },
+            { 'devcode': '1113', 'data': 3 }
+          ]
+        },
+        {
+          'date': '2021-10-02',
+          'data': [
+            { 'devcode': '1111', 'data': 1 },
+            { 'devcode': '1112', 'data': 6 },
+            { 'devcode': '1113', 'data': 1 }
+          ]
+        }
+      ]
+      const arr = res.map((item) => {
+        const result = { date: item.date }
+        for (let i = 0; i < item.data.length; i++) {
+          result[item.data[i].devcode] = item.data[i].data
+        }
+        return result
+      })
+      const area = res[0].data.map(item => item.devcode)
+      this.chartData.columns = ['date', ...area]
+      this.chartSettings.metrics = area
+      this.chartSettings.labelMap = { 'date': '日期' }
+      this.chartData.rows = arr
+    },
     // 获取数据
-    fetchData() {
-      countByDaySecond(this.query).then(response => {
+    fetchData(timeRange, type) {
+      const params = {
+        type: type || 'other',
+        beginTime: timeRange[0],
+        endTime: timeRange[1]
+      }
+      corrRateByDevice(params).then(response => {
+        console.log(response, '======腐蚀速率走势图response=====')
         if (response.data.length > 0) {
           const arr = response.data.map((item) => {
             const result = { date: item.date }
             for (let i = 0; i < item.data.length; i++) {
-              result[item.data[i].areaName] = item.data[i].count
+              result[item.data[i].devcode] = item.data[i].data
             }
             return result
           })
-          const area = response.data[0].data.map(item => item.areaName)
+          const area = response.data[0].data.map(item => item.devcode)
           this.chartData.columns = ['date', ...area]
           this.chartSettings.metrics = area
           this.chartSettings.labelMap = { 'date': '日期' }
diff --git a/src/views/gasDashboard/components/gasCompare.vue b/src/views/gasDashboard/components/gasCompare.vue
new file mode 100644
index 0000000..19a4398
--- /dev/null
+++ b/src/views/gasDashboard/components/gasCompare.vue
@@ -0,0 +1,121 @@
+<!--分区用气对比图-->
+<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 { gasCompareData } from '@/api/gasOverview'
+import FunctionArea from './FunctionArea'
+export default {
+  name: 'GasCompare',
+  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: true
+        },
+        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, type) {
+      const params = {
+        areaId: '110000',
+        type: type || 'other',
+        startTime: timeRange[0],
+        endTime: timeRange[1]
+      }
+      gasCompareData(params).then(response => {
+        this.isShow = false
+        this.chartSettings.labelMap = {
+          areaName: '分区',
+          last: response.data[0].lastTime,
+          now: response.data[0].nowTime
+        }
+        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.max = 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/gasDashboard/components/gasCountByAreaBar.vue b/src/views/gasDashboard/components/gasCountByAreaBar.vue
new file mode 100644
index 0000000..456a6c6
--- /dev/null
+++ b/src/views/gasDashboard/components/gasCountByAreaBar.vue
@@ -0,0 +1,198 @@
+<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 { countBySecondArea } from '@/api/gasOverview'
+import { getDayTime } from '@/utils/dateutils'
+import { getDoorAreaTree } from '@/api/system/area'
+import FunctionArea from './FunctionArea'
+
+export default {
+  name: 'GasCountByAreaBar',
+  components: { FunctionArea },
+  data() {
+    this.extend = {
+      legend: {
+        show: true
+      },
+      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': '分区',
+        'count': '用气量'
+      },
+      dimension: ['areaName'],
+      metrics: ['count']
+    }
+    return {
+      areaId: '',
+      areaList: [],
+      isShow: true,
+      defaultTimeRange: [],
+      timeRange: [],
+      pickerOptions: {
+        disabledDate: function(date) {
+          var oDate1 = new Date(date)
+          var oDate2 = new Date()
+          if (oDate1.getTime() > oDate2.getTime()) {
+            return true
+          } else {
+            return false
+          }
+        }
+      },
+      chartData: {
+        columns: ['wellTypeName', 'count'],
+        rows: []
+      }
+    }
+  },
+  mounted() {
+    this.$refs.func.init()
+    // this.setDefaultTime('week')
+    // 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()
+    },
+    fetchData(timeRange) {
+      const params = {
+        areaId: '110000',
+        startTime: timeRange[0],
+        endTime: timeRange[1]
+      }
+      this.$emit('change', params)
+      countBySecondArea(params).then(response => {
+        this.isShow = false
+        this.chartData.rows = response.data
+        this.isShow = true
+      })
+    },
+    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.fetchData(this.timeRange)
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+  .container{
+    position:relative;
+    .function{
+      width:calc(100% - 120px);
+      height: 28px;
+      display: flex;
+      justify-content: center;
+    }
+  }
+  .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/gasDashboard/components/gasCountByDay.vue b/src/views/gasDashboard/components/gasCountByDay.vue
new file mode 100644
index 0000000..79a4efb
--- /dev/null
+++ b/src/views/gasDashboard/components/gasCountByDay.vue
@@ -0,0 +1,146 @@
+<template>
+  <div class="container">
+    <ve-line :data="chartData" :title="title" :extend="extend" :settings="chartSettings"/>
+  </div>
+</template>
+
+<script>
+import { getDayTime } from '@/utils/dateutils'
+import { countByDaySecond } from '@/api/gasOverview'
+import { getDoorAreaTree } from '@/api/system/area'
+export default {
+  name: 'GasCountByDay',
+  props: {
+    query: {
+      type: Object,
+      default: () => {
+        return {
+          areaId: '',
+          startTime: '',
+          endTime: ''
+        }
+      }
+    }
+  },
+  data() {
+    return {
+      listQuery: {
+        startTime: '',
+        endTime: ''
+      },
+      title: {
+        text: '用气走势图'
+      },
+      chartSettings: {
+        labelMap: { date: '日期' },
+        metrics: [],
+        dimension: ['date']
+      },
+      extend: {
+        grid: {
+          top: 120
+        },
+        yAxis: {
+          name: '用气量（吨）',
+          position: 'left'
+        },
+        legend: {
+          // type: 'scroll',
+          top: '40px'
+        }
+      },
+      chartData: {
+        columns: [],
+        rows: []
+      }
+    }
+  },
+  watch: {
+    query(val) {
+      this.fetchData()
+    }
+  },
+  mounted() {
+    // this.changeTime('month')
+    // this.fetchArea()
+  },
+  methods: {
+    // 废弃
+    fetchArea() {
+      getDoorAreaTree().then(response => {
+        if (response.code === 200) {
+          debugger
+          const area = response.data.filter(item => {
+            return item.pid === '1'
+          }).map(item => item.name)
+          this.chartSettings.metrics = area
+          this.chartSettings.labelMap = {}
+          for (let i = 0; i < area.length; i++) {
+            this.chartSettings.labelMap[area[i]] = area[i]
+          }
+          this.chartData.columns = ['date', ...area]
+          this.fetchData()
+        }
+      })
+    },
+    // 获取数据
+    fetchData() {
+      countByDaySecond(this.query).then(response => {
+        console.log(response, '=====用气走势图====')
+        if (response.data.length > 0) {
+          const arr = response.data.map((item) => {
+            const result = { date: item.date }
+            for (let i = 0; i < item.data.length; i++) {
+              result[item.data[i].areaName] = item.data[i].count
+            }
+            return result
+          })
+          const area = response.data[0].data.map(item => item.areaName)
+          this.chartData.columns = ['date', ...area]
+          this.chartSettings.metrics = area
+          this.chartSettings.labelMap = { 'date': '日期' }
+          this.chartData.rows = arr
+        }
+      })
+      // 模拟数据
+      // this.chartData.rows = [
+      //   { date: '11月29日', dept1: 153, dept2: 43, dept3: 1, dept4: 1, dept5: 1, dept6: 7, dept7: 6, dept8: 2, dept9: 1, dept10: 3 },
+      //   { date: '11月30日', dept1: 150, dept2: 30, dept3: 2, dept4: 1, dept5: 4, dept6: 6, dept7: 3, dept8: 2, dept9: 1, dept10: 3 },
+      //   { date: '12月1日 ', dept1: 143, dept2: 23, dept3: 3, dept4: 2, dept5: 2, dept6: 7, dept7: 3, dept8: 2, dept9: 1, dept10: 3 },
+      //   { date: '12月2日 ', dept1: 173, dept2: 23, dept3: 4, dept4: 4, dept5: 1, dept6: 1, dept7: 8, dept8: 2, dept9: 1, dept10: 3 },
+      //   { date: '12月3日 ', dept1: 272, dept2: 52, dept3: 5, dept4: 1, dept5: 4, dept6: 7, dept7: 9, dept8: 2, dept9: 1, dept10: 3 },
+      //   { date: '12月4日 ', dept1: 253, dept2: 53, dept3: 6, dept4: 5, dept5: 5, dept6: 2, dept7: 9, dept8: 2, dept9: 1, dept10: 3 }
+      // ]
+    },
+    changeTime(timeType) {
+      let startTime
+      switch (timeType) {
+        case 'year':
+          startTime = getDayTime(new Date().getTime() - 24 * 365 * 60 * 60 * 1000)
+          this.listQuery.startTime = startTime.Format('yyyy-MM-dd')
+          break
+        case 'halfyear':
+          startTime = getDayTime(new Date().getTime() - 24 * 182 * 60 * 60 * 1000)
+          this.listQuery.startTime = startTime.Format('yyyy-MM-dd')
+          break
+        case '3month':
+          startTime = getDayTime(new Date().getTime() - 24 * 90 * 60 * 60 * 1000)
+          this.listQuery.startTime = startTime.Format('yyyy-MM-dd')
+          break
+        case 'month':
+          startTime = getDayTime(new Date().getTime() - 24 * 30 * 60 * 60 * 1000)
+          this.listQuery.startTime = startTime.Format('yyyy-MM-dd')
+          break
+        case 'week':
+          startTime = getDayTime(new Date().getTime() - 24 * 7 * 60 * 60 * 1000)
+          this.listQuery.startTime = startTime.Format('yyyy-MM-dd')
+          break
+      }
+      const endTime = new Date()
+      this.listQuery.endTime = endTime.Format('yyyy-MM-dd')
+      this.fetchData()
+    }
+  }
+}
+</script>
+

diff --git a/src/api/gasOverview.js b/src/api/gasOverview.js
index a8996f5..b7da600 100644
--- a/src/api/gasOverview.js
+++ b/src/api/gasOverview.js
@@ -53,8 +53,24 @@
     params
   })
 }
-// 查询二级分区各区用水量对比
-export function waterCompare(params) {
+// 查询二级分区燃气告警
+export function gasAlarmBySecondArea(params) {
+  return request({
+    url: 'dataStatistic/gasAlarmBySecondArea',
+    method: 'get',
+    params
+  })
+}
+// 各设备腐蚀速率统计
+export function corrRateByDevice(params) {
+  return request({
+    url: 'statics/corrRateByDevice',
+    method: 'get',
+    params
+  })
+}
+// 查询二级分区用气对比
+export function gasCompareData(params) {
   return request({
     url: 'gasStatistic/gasCompare',
     method: 'get',
diff --git a/src/views/gasDashboard/components/alarmGasCountByDept.vue b/src/views/gasDashboard/components/alarmGasCountByDept.vue
index 60ab5ad..b8bfc23 100644
--- a/src/views/gasDashboard/components/alarmGasCountByDept.vue
+++ b/src/views/gasDashboard/components/alarmGasCountByDept.vue
@@ -8,7 +8,7 @@
 </template>
 
 <script>
-import { alarmBySecondArea } from '@/api/gasOverview'
+import { gasAlarmBySecondArea } from '@/api/gasOverview'
 export default {
   name: 'AlarmGasCountByDept',
   props: {
@@ -64,7 +64,7 @@
   methods: {
     // 获取统计数据
     fetchData() {
-      alarmBySecondArea(this.query).then(response => {
+      gasAlarmBySecondArea(this.query).then(response => {
         this.chartData.rows = response.data
       })
     }
diff --git a/src/views/gasDashboard/components/corrodeCountByDay.vue b/src/views/gasDashboard/components/corrodeCountByDay.vue
index 3a97391..82c29bf 100644
--- a/src/views/gasDashboard/components/corrodeCountByDay.vue
+++ b/src/views/gasDashboard/components/corrodeCountByDay.vue
@@ -1,13 +1,30 @@
+<!--腐蚀速率走势图-->
 <template>
   <div class="container">
-    <ve-line :data="chartData" :title="title" :extend="extend" :settings="chartSettings"/>
+    <!-- <function-area
+      ref="func"
+      select="week"
+      @change="fetchData"
+    /> -->
+    <function-area
+      ref="func"
+      select="week"
+    />
+    <ve-line
+      :data="chartData"
+      :title="title"
+      :extend="extend"
+      :settings="chartSettings"
+    />
   </div>
 </template>
 
 <script>
-import { countByDaySecond } from '@/api/gasOverview'
+import FunctionArea from './FunctionArea'
+import { corrRateByDevice } from '@/api/gasOverview'
 export default {
-  name: 'WaterCountByDay',
+  name: 'CorrodeCountByDay',
+  components: { FunctionArea },
   props: {
     query: {
       type: Object,
@@ -22,10 +39,6 @@
   },
   data() {
     return {
-      listQuery: {
-        startTime: '',
-        endTime: ''
-      },
       title: {
         text: '腐蚀速率走势图'
       },
@@ -53,24 +66,62 @@
       }
     }
   },
-  watch: {
-    query(val) {
-      this.fetchData()
-    }
+  mounted() {
+    this.$refs.func.init()
+    this.getData()
   },
   methods: {
+    // 模拟数据
+    getData() {
+      const res = [
+        {
+          'date': '2021-10-01',
+          'data': [
+            { 'devcode': '1111', 'data': 10 },
+            { 'devcode': '1112', 'data': 2 },
+            { 'devcode': '1113', 'data': 3 }
+          ]
+        },
+        {
+          'date': '2021-10-02',
+          'data': [
+            { 'devcode': '1111', 'data': 1 },
+            { 'devcode': '1112', 'data': 6 },
+            { 'devcode': '1113', 'data': 1 }
+          ]
+        }
+      ]
+      const arr = res.map((item) => {
+        const result = { date: item.date }
+        for (let i = 0; i < item.data.length; i++) {
+          result[item.data[i].devcode] = item.data[i].data
+        }
+        return result
+      })
+      const area = res[0].data.map(item => item.devcode)
+      this.chartData.columns = ['date', ...area]
+      this.chartSettings.metrics = area
+      this.chartSettings.labelMap = { 'date': '日期' }
+      this.chartData.rows = arr
+    },
     // 获取数据
-    fetchData() {
-      countByDaySecond(this.query).then(response => {
+    fetchData(timeRange, type) {
+      const params = {
+        type: type || 'other',
+        beginTime: timeRange[0],
+        endTime: timeRange[1]
+      }
+      corrRateByDevice(params).then(response => {
+        console.log(response, '======腐蚀速率走势图response=====')
         if (response.data.length > 0) {
           const arr = response.data.map((item) => {
             const result = { date: item.date }
             for (let i = 0; i < item.data.length; i++) {
-              result[item.data[i].areaName] = item.data[i].count
+              result[item.data[i].devcode] = item.data[i].data
             }
             return result
           })
-          const area = response.data[0].data.map(item => item.areaName)
+          const area = response.data[0].data.map(item => item.devcode)
           this.chartData.columns = ['date', ...area]
           this.chartSettings.metrics = area
           this.chartSettings.labelMap = { 'date': '日期' }
diff --git a/src/views/gasDashboard/components/gasCompare.vue b/src/views/gasDashboard/components/gasCompare.vue
new file mode 100644
index 0000000..19a4398
--- /dev/null
+++ b/src/views/gasDashboard/components/gasCompare.vue
@@ -0,0 +1,121 @@
+<!--分区用气对比图-->
+<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 { gasCompareData } from '@/api/gasOverview'
+import FunctionArea from './FunctionArea'
+export default {
+  name: 'GasCompare',
+  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: true
+        },
+        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, type) {
+      const params = {
+        areaId: '110000',
+        type: type || 'other',
+        startTime: timeRange[0],
+        endTime: timeRange[1]
+      }
+      gasCompareData(params).then(response => {
+        this.isShow = false
+        this.chartSettings.labelMap = {
+          areaName: '分区',
+          last: response.data[0].lastTime,
+          now: response.data[0].nowTime
+        }
+        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.max = 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/gasDashboard/components/gasCountByAreaBar.vue b/src/views/gasDashboard/components/gasCountByAreaBar.vue
new file mode 100644
index 0000000..456a6c6
--- /dev/null
+++ b/src/views/gasDashboard/components/gasCountByAreaBar.vue
@@ -0,0 +1,198 @@
+<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 { countBySecondArea } from '@/api/gasOverview'
+import { getDayTime } from '@/utils/dateutils'
+import { getDoorAreaTree } from '@/api/system/area'
+import FunctionArea from './FunctionArea'
+
+export default {
+  name: 'GasCountByAreaBar',
+  components: { FunctionArea },
+  data() {
+    this.extend = {
+      legend: {
+        show: true
+      },
+      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': '分区',
+        'count': '用气量'
+      },
+      dimension: ['areaName'],
+      metrics: ['count']
+    }
+    return {
+      areaId: '',
+      areaList: [],
+      isShow: true,
+      defaultTimeRange: [],
+      timeRange: [],
+      pickerOptions: {
+        disabledDate: function(date) {
+          var oDate1 = new Date(date)
+          var oDate2 = new Date()
+          if (oDate1.getTime() > oDate2.getTime()) {
+            return true
+          } else {
+            return false
+          }
+        }
+      },
+      chartData: {
+        columns: ['wellTypeName', 'count'],
+        rows: []
+      }
+    }
+  },
+  mounted() {
+    this.$refs.func.init()
+    // this.setDefaultTime('week')
+    // 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()
+    },
+    fetchData(timeRange) {
+      const params = {
+        areaId: '110000',
+        startTime: timeRange[0],
+        endTime: timeRange[1]
+      }
+      this.$emit('change', params)
+      countBySecondArea(params).then(response => {
+        this.isShow = false
+        this.chartData.rows = response.data
+        this.isShow = true
+      })
+    },
+    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.fetchData(this.timeRange)
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+  .container{
+    position:relative;
+    .function{
+      width:calc(100% - 120px);
+      height: 28px;
+      display: flex;
+      justify-content: center;
+    }
+  }
+  .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/gasDashboard/components/gasCountByDay.vue b/src/views/gasDashboard/components/gasCountByDay.vue
new file mode 100644
index 0000000..79a4efb
--- /dev/null
+++ b/src/views/gasDashboard/components/gasCountByDay.vue
@@ -0,0 +1,146 @@
+<template>
+  <div class="container">
+    <ve-line :data="chartData" :title="title" :extend="extend" :settings="chartSettings"/>
+  </div>
+</template>
+
+<script>
+import { getDayTime } from '@/utils/dateutils'
+import { countByDaySecond } from '@/api/gasOverview'
+import { getDoorAreaTree } from '@/api/system/area'
+export default {
+  name: 'GasCountByDay',
+  props: {
+    query: {
+      type: Object,
+      default: () => {
+        return {
+          areaId: '',
+          startTime: '',
+          endTime: ''
+        }
+      }
+    }
+  },
+  data() {
+    return {
+      listQuery: {
+        startTime: '',
+        endTime: ''
+      },
+      title: {
+        text: '用气走势图'
+      },
+      chartSettings: {
+        labelMap: { date: '日期' },
+        metrics: [],
+        dimension: ['date']
+      },
+      extend: {
+        grid: {
+          top: 120
+        },
+        yAxis: {
+          name: '用气量（吨）',
+          position: 'left'
+        },
+        legend: {
+          // type: 'scroll',
+          top: '40px'
+        }
+      },
+      chartData: {
+        columns: [],
+        rows: []
+      }
+    }
+  },
+  watch: {
+    query(val) {
+      this.fetchData()
+    }
+  },
+  mounted() {
+    // this.changeTime('month')
+    // this.fetchArea()
+  },
+  methods: {
+    // 废弃
+    fetchArea() {
+      getDoorAreaTree().then(response => {
+        if (response.code === 200) {
+          debugger
+          const area = response.data.filter(item => {
+            return item.pid === '1'
+          }).map(item => item.name)
+          this.chartSettings.metrics = area
+          this.chartSettings.labelMap = {}
+          for (let i = 0; i < area.length; i++) {
+            this.chartSettings.labelMap[area[i]] = area[i]
+          }
+          this.chartData.columns = ['date', ...area]
+          this.fetchData()
+        }
+      })
+    },
+    // 获取数据
+    fetchData() {
+      countByDaySecond(this.query).then(response => {
+        console.log(response, '=====用气走势图====')
+        if (response.data.length > 0) {
+          const arr = response.data.map((item) => {
+            const result = { date: item.date }
+            for (let i = 0; i < item.data.length; i++) {
+              result[item.data[i].areaName] = item.data[i].count
+            }
+            return result
+          })
+          const area = response.data[0].data.map(item => item.areaName)
+          this.chartData.columns = ['date', ...area]
+          this.chartSettings.metrics = area
+          this.chartSettings.labelMap = { 'date': '日期' }
+          this.chartData.rows = arr
+        }
+      })
+      // 模拟数据
+      // this.chartData.rows = [
+      //   { date: '11月29日', dept1: 153, dept2: 43, dept3: 1, dept4: 1, dept5: 1, dept6: 7, dept7: 6, dept8: 2, dept9: 1, dept10: 3 },
+      //   { date: '11月30日', dept1: 150, dept2: 30, dept3: 2, dept4: 1, dept5: 4, dept6: 6, dept7: 3, dept8: 2, dept9: 1, dept10: 3 },
+      //   { date: '12月1日 ', dept1: 143, dept2: 23, dept3: 3, dept4: 2, dept5: 2, dept6: 7, dept7: 3, dept8: 2, dept9: 1, dept10: 3 },
+      //   { date: '12月2日 ', dept1: 173, dept2: 23, dept3: 4, dept4: 4, dept5: 1, dept6: 1, dept7: 8, dept8: 2, dept9: 1, dept10: 3 },
+      //   { date: '12月3日 ', dept1: 272, dept2: 52, dept3: 5, dept4: 1, dept5: 4, dept6: 7, dept7: 9, dept8: 2, dept9: 1, dept10: 3 },
+      //   { date: '12月4日 ', dept1: 253, dept2: 53, dept3: 6, dept4: 5, dept5: 5, dept6: 2, dept7: 9, dept8: 2, dept9: 1, dept10: 3 }
+      // ]
+    },
+    changeTime(timeType) {
+      let startTime
+      switch (timeType) {
+        case 'year':
+          startTime = getDayTime(new Date().getTime() - 24 * 365 * 60 * 60 * 1000)
+          this.listQuery.startTime = startTime.Format('yyyy-MM-dd')
+          break
+        case 'halfyear':
+          startTime = getDayTime(new Date().getTime() - 24 * 182 * 60 * 60 * 1000)
+          this.listQuery.startTime = startTime.Format('yyyy-MM-dd')
+          break
+        case '3month':
+          startTime = getDayTime(new Date().getTime() - 24 * 90 * 60 * 60 * 1000)
+          this.listQuery.startTime = startTime.Format('yyyy-MM-dd')
+          break
+        case 'month':
+          startTime = getDayTime(new Date().getTime() - 24 * 30 * 60 * 60 * 1000)
+          this.listQuery.startTime = startTime.Format('yyyy-MM-dd')
+          break
+        case 'week':
+          startTime = getDayTime(new Date().getTime() - 24 * 7 * 60 * 60 * 1000)
+          this.listQuery.startTime = startTime.Format('yyyy-MM-dd')
+          break
+      }
+      const endTime = new Date()
+      this.listQuery.endTime = endTime.Format('yyyy-MM-dd')
+      this.fetchData()
+    }
+  }
+}
+</script>
+
diff --git a/src/views/gasDashboard/components/gasCountByDept.vue b/src/views/gasDashboard/components/gasCountByDept.vue
new file mode 100644
index 0000000..31c8508
--- /dev/null
+++ b/src/views/gasDashboard/components/gasCountByDept.vue
@@ -0,0 +1,126 @@
+<!--suppress ALL -->
+<template>
+  <div class="container">
+    <ve-pie :data="chartData" :extend="extend" :title="title"/>
+  </div>
+</template>
+
+<script>
+import { countBySecondArea } from '@/api/gasOverview'
+import { getDoorAreaTree } from '@/api/system/area'
+export default {
+  name: 'GasCountByDept',
+  props: {
+    query: {
+      type: Object,
+      default: () => {
+        return {
+          areaId: '',
+          startTime: '',
+          endTime: ''
+        }
+      }
+    }
+  },
+  data() {
+    return {
+      listQuery: {
+        areaId: '',
+        startTime: '',
+        endTime: ''
+      },
+      areaId: '',
+      areaList: [],
+      chartData: {
+        columns: ['areaName', 'count'],
+        rows: []
+      },
+      extend: {
+        grid: {
+          right: '30%'
+        },
+        legend: {
+          type: 'scroll',
+          top: '60px',
+          right: '0px',
+          orient: 'vertical'
+        },
+        series: {
+          label: { show: true, position: 'outside', formatter: '{b}' },
+          right: 120
+        },
+        tooltip: { trigger: 'item', formatter: '{b}<br/>用气量：{c}吨<br/>占比：{d}%' }
+      },
+      title: {
+        text: '分区用气占比图'
+      },
+      chartSettings: {
+        labelMap: {
+          'areaName': '分区',
+          'count': '用气量'
+        },
+        dimension: 'areaName',
+        metrics: 'count'
+      }
+    }
+  },
+  watch: {
+    query(val) {
+      this.fetchData()
+    }
+  },
+  mounted() {
+    // TODO:待调试真接口
+    // 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()
+    },
+    // 获取统计数据
+    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
+      })
+    }
+  }
+}
+</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/gasOverview.js b/src/api/gasOverview.js
index a8996f5..b7da600 100644
--- a/src/api/gasOverview.js
+++ b/src/api/gasOverview.js
@@ -53,8 +53,24 @@
     params
   })
 }
-// 查询二级分区各区用水量对比
-export function waterCompare(params) {
+// 查询二级分区燃气告警
+export function gasAlarmBySecondArea(params) {
+  return request({
+    url: 'dataStatistic/gasAlarmBySecondArea',
+    method: 'get',
+    params
+  })
+}
+// 各设备腐蚀速率统计
+export function corrRateByDevice(params) {
+  return request({
+    url: 'statics/corrRateByDevice',
+    method: 'get',
+    params
+  })
+}
+// 查询二级分区用气对比
+export function gasCompareData(params) {
   return request({
     url: 'gasStatistic/gasCompare',
     method: 'get',
diff --git a/src/views/gasDashboard/components/alarmGasCountByDept.vue b/src/views/gasDashboard/components/alarmGasCountByDept.vue
index 60ab5ad..b8bfc23 100644
--- a/src/views/gasDashboard/components/alarmGasCountByDept.vue
+++ b/src/views/gasDashboard/components/alarmGasCountByDept.vue
@@ -8,7 +8,7 @@
 </template>
 
 <script>
-import { alarmBySecondArea } from '@/api/gasOverview'
+import { gasAlarmBySecondArea } from '@/api/gasOverview'
 export default {
   name: 'AlarmGasCountByDept',
   props: {
@@ -64,7 +64,7 @@
   methods: {
     // 获取统计数据
     fetchData() {
-      alarmBySecondArea(this.query).then(response => {
+      gasAlarmBySecondArea(this.query).then(response => {
         this.chartData.rows = response.data
       })
     }
diff --git a/src/views/gasDashboard/components/corrodeCountByDay.vue b/src/views/gasDashboard/components/corrodeCountByDay.vue
index 3a97391..82c29bf 100644
--- a/src/views/gasDashboard/components/corrodeCountByDay.vue
+++ b/src/views/gasDashboard/components/corrodeCountByDay.vue
@@ -1,13 +1,30 @@
+<!--腐蚀速率走势图-->
 <template>
   <div class="container">
-    <ve-line :data="chartData" :title="title" :extend="extend" :settings="chartSettings"/>
+    <!-- <function-area
+      ref="func"
+      select="week"
+      @change="fetchData"
+    /> -->
+    <function-area
+      ref="func"
+      select="week"
+    />
+    <ve-line
+      :data="chartData"
+      :title="title"
+      :extend="extend"
+      :settings="chartSettings"
+    />
   </div>
 </template>
 
 <script>
-import { countByDaySecond } from '@/api/gasOverview'
+import FunctionArea from './FunctionArea'
+import { corrRateByDevice } from '@/api/gasOverview'
 export default {
-  name: 'WaterCountByDay',
+  name: 'CorrodeCountByDay',
+  components: { FunctionArea },
   props: {
     query: {
       type: Object,
@@ -22,10 +39,6 @@
   },
   data() {
     return {
-      listQuery: {
-        startTime: '',
-        endTime: ''
-      },
       title: {
         text: '腐蚀速率走势图'
       },
@@ -53,24 +66,62 @@
       }
     }
   },
-  watch: {
-    query(val) {
-      this.fetchData()
-    }
+  mounted() {
+    this.$refs.func.init()
+    this.getData()
   },
   methods: {
+    // 模拟数据
+    getData() {
+      const res = [
+        {
+          'date': '2021-10-01',
+          'data': [
+            { 'devcode': '1111', 'data': 10 },
+            { 'devcode': '1112', 'data': 2 },
+            { 'devcode': '1113', 'data': 3 }
+          ]
+        },
+        {
+          'date': '2021-10-02',
+          'data': [
+            { 'devcode': '1111', 'data': 1 },
+            { 'devcode': '1112', 'data': 6 },
+            { 'devcode': '1113', 'data': 1 }
+          ]
+        }
+      ]
+      const arr = res.map((item) => {
+        const result = { date: item.date }
+        for (let i = 0; i < item.data.length; i++) {
+          result[item.data[i].devcode] = item.data[i].data
+        }
+        return result
+      })
+      const area = res[0].data.map(item => item.devcode)
+      this.chartData.columns = ['date', ...area]
+      this.chartSettings.metrics = area
+      this.chartSettings.labelMap = { 'date': '日期' }
+      this.chartData.rows = arr
+    },
     // 获取数据
-    fetchData() {
-      countByDaySecond(this.query).then(response => {
+    fetchData(timeRange, type) {
+      const params = {
+        type: type || 'other',
+        beginTime: timeRange[0],
+        endTime: timeRange[1]
+      }
+      corrRateByDevice(params).then(response => {
+        console.log(response, '======腐蚀速率走势图response=====')
         if (response.data.length > 0) {
           const arr = response.data.map((item) => {
             const result = { date: item.date }
             for (let i = 0; i < item.data.length; i++) {
-              result[item.data[i].areaName] = item.data[i].count
+              result[item.data[i].devcode] = item.data[i].data
             }
             return result
           })
-          const area = response.data[0].data.map(item => item.areaName)
+          const area = response.data[0].data.map(item => item.devcode)
           this.chartData.columns = ['date', ...area]
           this.chartSettings.metrics = area
           this.chartSettings.labelMap = { 'date': '日期' }
diff --git a/src/views/gasDashboard/components/gasCompare.vue b/src/views/gasDashboard/components/gasCompare.vue
new file mode 100644
index 0000000..19a4398
--- /dev/null
+++ b/src/views/gasDashboard/components/gasCompare.vue
@@ -0,0 +1,121 @@
+<!--分区用气对比图-->
+<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 { gasCompareData } from '@/api/gasOverview'
+import FunctionArea from './FunctionArea'
+export default {
+  name: 'GasCompare',
+  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: true
+        },
+        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, type) {
+      const params = {
+        areaId: '110000',
+        type: type || 'other',
+        startTime: timeRange[0],
+        endTime: timeRange[1]
+      }
+      gasCompareData(params).then(response => {
+        this.isShow = false
+        this.chartSettings.labelMap = {
+          areaName: '分区',
+          last: response.data[0].lastTime,
+          now: response.data[0].nowTime
+        }
+        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.max = 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/gasDashboard/components/gasCountByAreaBar.vue b/src/views/gasDashboard/components/gasCountByAreaBar.vue
new file mode 100644
index 0000000..456a6c6
--- /dev/null
+++ b/src/views/gasDashboard/components/gasCountByAreaBar.vue
@@ -0,0 +1,198 @@
+<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 { countBySecondArea } from '@/api/gasOverview'
+import { getDayTime } from '@/utils/dateutils'
+import { getDoorAreaTree } from '@/api/system/area'
+import FunctionArea from './FunctionArea'
+
+export default {
+  name: 'GasCountByAreaBar',
+  components: { FunctionArea },
+  data() {
+    this.extend = {
+      legend: {
+        show: true
+      },
+      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': '分区',
+        'count': '用气量'
+      },
+      dimension: ['areaName'],
+      metrics: ['count']
+    }
+    return {
+      areaId: '',
+      areaList: [],
+      isShow: true,
+      defaultTimeRange: [],
+      timeRange: [],
+      pickerOptions: {
+        disabledDate: function(date) {
+          var oDate1 = new Date(date)
+          var oDate2 = new Date()
+          if (oDate1.getTime() > oDate2.getTime()) {
+            return true
+          } else {
+            return false
+          }
+        }
+      },
+      chartData: {
+        columns: ['wellTypeName', 'count'],
+        rows: []
+      }
+    }
+  },
+  mounted() {
+    this.$refs.func.init()
+    // this.setDefaultTime('week')
+    // 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()
+    },
+    fetchData(timeRange) {
+      const params = {
+        areaId: '110000',
+        startTime: timeRange[0],
+        endTime: timeRange[1]
+      }
+      this.$emit('change', params)
+      countBySecondArea(params).then(response => {
+        this.isShow = false
+        this.chartData.rows = response.data
+        this.isShow = true
+      })
+    },
+    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.fetchData(this.timeRange)
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+  .container{
+    position:relative;
+    .function{
+      width:calc(100% - 120px);
+      height: 28px;
+      display: flex;
+      justify-content: center;
+    }
+  }
+  .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/gasDashboard/components/gasCountByDay.vue b/src/views/gasDashboard/components/gasCountByDay.vue
new file mode 100644
index 0000000..79a4efb
--- /dev/null
+++ b/src/views/gasDashboard/components/gasCountByDay.vue
@@ -0,0 +1,146 @@
+<template>
+  <div class="container">
+    <ve-line :data="chartData" :title="title" :extend="extend" :settings="chartSettings"/>
+  </div>
+</template>
+
+<script>
+import { getDayTime } from '@/utils/dateutils'
+import { countByDaySecond } from '@/api/gasOverview'
+import { getDoorAreaTree } from '@/api/system/area'
+export default {
+  name: 'GasCountByDay',
+  props: {
+    query: {
+      type: Object,
+      default: () => {
+        return {
+          areaId: '',
+          startTime: '',
+          endTime: ''
+        }
+      }
+    }
+  },
+  data() {
+    return {
+      listQuery: {
+        startTime: '',
+        endTime: ''
+      },
+      title: {
+        text: '用气走势图'
+      },
+      chartSettings: {
+        labelMap: { date: '日期' },
+        metrics: [],
+        dimension: ['date']
+      },
+      extend: {
+        grid: {
+          top: 120
+        },
+        yAxis: {
+          name: '用气量（吨）',
+          position: 'left'
+        },
+        legend: {
+          // type: 'scroll',
+          top: '40px'
+        }
+      },
+      chartData: {
+        columns: [],
+        rows: []
+      }
+    }
+  },
+  watch: {
+    query(val) {
+      this.fetchData()
+    }
+  },
+  mounted() {
+    // this.changeTime('month')
+    // this.fetchArea()
+  },
+  methods: {
+    // 废弃
+    fetchArea() {
+      getDoorAreaTree().then(response => {
+        if (response.code === 200) {
+          debugger
+          const area = response.data.filter(item => {
+            return item.pid === '1'
+          }).map(item => item.name)
+          this.chartSettings.metrics = area
+          this.chartSettings.labelMap = {}
+          for (let i = 0; i < area.length; i++) {
+            this.chartSettings.labelMap[area[i]] = area[i]
+          }
+          this.chartData.columns = ['date', ...area]
+          this.fetchData()
+        }
+      })
+    },
+    // 获取数据
+    fetchData() {
+      countByDaySecond(this.query).then(response => {
+        console.log(response, '=====用气走势图====')
+        if (response.data.length > 0) {
+          const arr = response.data.map((item) => {
+            const result = { date: item.date }
+            for (let i = 0; i < item.data.length; i++) {
+              result[item.data[i].areaName] = item.data[i].count
+            }
+            return result
+          })
+          const area = response.data[0].data.map(item => item.areaName)
+          this.chartData.columns = ['date', ...area]
+          this.chartSettings.metrics = area
+          this.chartSettings.labelMap = { 'date': '日期' }
+          this.chartData.rows = arr
+        }
+      })
+      // 模拟数据
+      // this.chartData.rows = [
+      //   { date: '11月29日', dept1: 153, dept2: 43, dept3: 1, dept4: 1, dept5: 1, dept6: 7, dept7: 6, dept8: 2, dept9: 1, dept10: 3 },
+      //   { date: '11月30日', dept1: 150, dept2: 30, dept3: 2, dept4: 1, dept5: 4, dept6: 6, dept7: 3, dept8: 2, dept9: 1, dept10: 3 },
+      //   { date: '12月1日 ', dept1: 143, dept2: 23, dept3: 3, dept4: 2, dept5: 2, dept6: 7, dept7: 3, dept8: 2, dept9: 1, dept10: 3 },
+      //   { date: '12月2日 ', dept1: 173, dept2: 23, dept3: 4, dept4: 4, dept5: 1, dept6: 1, dept7: 8, dept8: 2, dept9: 1, dept10: 3 },
+      //   { date: '12月3日 ', dept1: 272, dept2: 52, dept3: 5, dept4: 1, dept5: 4, dept6: 7, dept7: 9, dept8: 2, dept9: 1, dept10: 3 },
+      //   { date: '12月4日 ', dept1: 253, dept2: 53, dept3: 6, dept4: 5, dept5: 5, dept6: 2, dept7: 9, dept8: 2, dept9: 1, dept10: 3 }
+      // ]
+    },
+    changeTime(timeType) {
+      let startTime
+      switch (timeType) {
+        case 'year':
+          startTime = getDayTime(new Date().getTime() - 24 * 365 * 60 * 60 * 1000)
+          this.listQuery.startTime = startTime.Format('yyyy-MM-dd')
+          break
+        case 'halfyear':
+          startTime = getDayTime(new Date().getTime() - 24 * 182 * 60 * 60 * 1000)
+          this.listQuery.startTime = startTime.Format('yyyy-MM-dd')
+          break
+        case '3month':
+          startTime = getDayTime(new Date().getTime() - 24 * 90 * 60 * 60 * 1000)
+          this.listQuery.startTime = startTime.Format('yyyy-MM-dd')
+          break
+        case 'month':
+          startTime = getDayTime(new Date().getTime() - 24 * 30 * 60 * 60 * 1000)
+          this.listQuery.startTime = startTime.Format('yyyy-MM-dd')
+          break
+        case 'week':
+          startTime = getDayTime(new Date().getTime() - 24 * 7 * 60 * 60 * 1000)
+          this.listQuery.startTime = startTime.Format('yyyy-MM-dd')
+          break
+      }
+      const endTime = new Date()
+      this.listQuery.endTime = endTime.Format('yyyy-MM-dd')
+      this.fetchData()
+    }
+  }
+}
+</script>
+
diff --git a/src/views/gasDashboard/components/gasCountByDept.vue b/src/views/gasDashboard/components/gasCountByDept.vue
new file mode 100644
index 0000000..31c8508
--- /dev/null
+++ b/src/views/gasDashboard/components/gasCountByDept.vue
@@ -0,0 +1,126 @@
+<!--suppress ALL -->
+<template>
+  <div class="container">
+    <ve-pie :data="chartData" :extend="extend" :title="title"/>
+  </div>
+</template>
+
+<script>
+import { countBySecondArea } from '@/api/gasOverview'
+import { getDoorAreaTree } from '@/api/system/area'
+export default {
+  name: 'GasCountByDept',
+  props: {
+    query: {
+      type: Object,
+      default: () => {
+        return {
+          areaId: '',
+          startTime: '',
+          endTime: ''
+        }
+      }
+    }
+  },
+  data() {
+    return {
+      listQuery: {
+        areaId: '',
+        startTime: '',
+        endTime: ''
+      },
+      areaId: '',
+      areaList: [],
+      chartData: {
+        columns: ['areaName', 'count'],
+        rows: []
+      },
+      extend: {
+        grid: {
+          right: '30%'
+        },
+        legend: {
+          type: 'scroll',
+          top: '60px',
+          right: '0px',
+          orient: 'vertical'
+        },
+        series: {
+          label: { show: true, position: 'outside', formatter: '{b}' },
+          right: 120
+        },
+        tooltip: { trigger: 'item', formatter: '{b}<br/>用气量：{c}吨<br/>占比：{d}%' }
+      },
+      title: {
+        text: '分区用气占比图'
+      },
+      chartSettings: {
+        labelMap: {
+          'areaName': '分区',
+          'count': '用气量'
+        },
+        dimension: 'areaName',
+        metrics: 'count'
+      }
+    }
+  },
+  watch: {
+    query(val) {
+      this.fetchData()
+    }
+  },
+  mounted() {
+    // TODO:待调试真接口
+    // 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()
+    },
+    // 获取统计数据
+    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
+      })
+    }
+  }
+}
+</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/gasDashboard/components/gasNote.vue b/src/views/gasDashboard/components/gasNote.vue
new file mode 100644
index 0000000..5ade90f
--- /dev/null
+++ b/src/views/gasDashboard/components/gasNote.vue
@@ -0,0 +1,149 @@
+<!--用水事记L -->
+<template>
+  <div class="container">
+    <div class="title">
+      场区用气事记
+      <i v-if="!editMode" class="el-icon-edit edit-btn" style="float:right" @click="editNote" />
+      <i v-else class="el-icon-check edit-btn" style="float:right" @click="saveNote" />
+    </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" />
+            <div style="width: 85px;display: flex;justify-content: flex-end">
+              <i v-show="index!==0" class="el-icon-top" @click="toTop(index)" />
+              <i v-show="index!==currentList.length-1" class="el-icon-bottom" @click="toBottom(index)" />
+              <i class="el-icon-delete" @click="deleteItem(index)" />
+            </div>
+          </div>
+        </div>
+        <div v-if="editMode&&currentList.length<10" class="content-line">
+          <i class="el-icon-circle-plus-outline icon-btn" @click="addItem()" />
+        </div>
+      </el-scrollbar>
+    </div>
+  </div>
+</template>
+
+<script>
+import { getNoteList, updateNoteList } from '@/api/dashboard'
+export default {
+  name: 'GasNote',
+  props: {
+    query: {
+      type: Object,
+      default: () => {
+        return {
+          areaId: '',
+          startTime: '',
+          endTime: ''
+        }
+      }
+    }
+  },
+  data() {
+    return {
+      editMode: false, // 编辑模式
+      originList: [], // 原始列表
+      currentList: [] // 当前列表
+    }
+  },
+  mounted() {
+    this.fetchData()
+  },
+  methods: {
+    // 获取统计数据
+    fetchData() {
+      // this.currentList = [
+      //   { 'content': '测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试', 'num': 1 },
+      //   { 'content': '测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试', 'num': 1 },
+      //   { 'content': '测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试', 'num': 1 },
+      //   { 'content': '测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试', 'num': 1 },
+      //   { 'content': '测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试', 'num': 1 }
+      // ]
+      // this.originList = JSON.parse(JSON.stringify(this.currentList))
+      getNoteList('2').then(response => {
+        this.currentList = JSON.parse(response.data[0].notes)
+      })
+    },
+    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 }
+      })
+      const params = {
+        type: '2',
+        list: currentList
+      }
+      updateNoteList(params).then(res => {
+        this.editMode = false
+        this.$message.success('保存成功')
+      }).catch(e => {
+        // this.currentList = JSON.parse(JSON.stringify(this.originList))
+      })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+  @import "@/styles/variables.scss";
+  .container{
+    position:relative;
+    height: 428px;
+    display: flex;
+    flex-direction: column;
+    .title{
+      font-weight: bolder;
+      font-size: 18px;
+      font-family: sans-serif;
+      color: #333;
+    }
+    .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/gasOverview.js b/src/api/gasOverview.js
index a8996f5..b7da600 100644
--- a/src/api/gasOverview.js
+++ b/src/api/gasOverview.js
@@ -53,8 +53,24 @@
     params
   })
 }
-// 查询二级分区各区用水量对比
-export function waterCompare(params) {
+// 查询二级分区燃气告警
+export function gasAlarmBySecondArea(params) {
+  return request({
+    url: 'dataStatistic/gasAlarmBySecondArea',
+    method: 'get',
+    params
+  })
+}
+// 各设备腐蚀速率统计
+export function corrRateByDevice(params) {
+  return request({
+    url: 'statics/corrRateByDevice',
+    method: 'get',
+    params
+  })
+}
+// 查询二级分区用气对比
+export function gasCompareData(params) {
   return request({
     url: 'gasStatistic/gasCompare',
     method: 'get',
diff --git a/src/views/gasDashboard/components/alarmGasCountByDept.vue b/src/views/gasDashboard/components/alarmGasCountByDept.vue
index 60ab5ad..b8bfc23 100644
--- a/src/views/gasDashboard/components/alarmGasCountByDept.vue
+++ b/src/views/gasDashboard/components/alarmGasCountByDept.vue
@@ -8,7 +8,7 @@
 </template>
 
 <script>
-import { alarmBySecondArea } from '@/api/gasOverview'
+import { gasAlarmBySecondArea } from '@/api/gasOverview'
 export default {
   name: 'AlarmGasCountByDept',
   props: {
@@ -64,7 +64,7 @@
   methods: {
     // 获取统计数据
     fetchData() {
-      alarmBySecondArea(this.query).then(response => {
+      gasAlarmBySecondArea(this.query).then(response => {
         this.chartData.rows = response.data
       })
     }
diff --git a/src/views/gasDashboard/components/corrodeCountByDay.vue b/src/views/gasDashboard/components/corrodeCountByDay.vue
index 3a97391..82c29bf 100644
--- a/src/views/gasDashboard/components/corrodeCountByDay.vue
+++ b/src/views/gasDashboard/components/corrodeCountByDay.vue
@@ -1,13 +1,30 @@
+<!--腐蚀速率走势图-->
 <template>
   <div class="container">
-    <ve-line :data="chartData" :title="title" :extend="extend" :settings="chartSettings"/>
+    <!-- <function-area
+      ref="func"
+      select="week"
+      @change="fetchData"
+    /> -->
+    <function-area
+      ref="func"
+      select="week"
+    />
+    <ve-line
+      :data="chartData"
+      :title="title"
+      :extend="extend"
+      :settings="chartSettings"
+    />
   </div>
 </template>
 
 <script>
-import { countByDaySecond } from '@/api/gasOverview'
+import FunctionArea from './FunctionArea'
+import { corrRateByDevice } from '@/api/gasOverview'
 export default {
-  name: 'WaterCountByDay',
+  name: 'CorrodeCountByDay',
+  components: { FunctionArea },
   props: {
     query: {
       type: Object,
@@ -22,10 +39,6 @@
   },
   data() {
     return {
-      listQuery: {
-        startTime: '',
-        endTime: ''
-      },
       title: {
         text: '腐蚀速率走势图'
       },
@@ -53,24 +66,62 @@
       }
     }
   },
-  watch: {
-    query(val) {
-      this.fetchData()
-    }
+  mounted() {
+    this.$refs.func.init()
+    this.getData()
   },
   methods: {
+    // 模拟数据
+    getData() {
+      const res = [
+        {
+          'date': '2021-10-01',
+          'data': [
+            { 'devcode': '1111', 'data': 10 },
+            { 'devcode': '1112', 'data': 2 },
+            { 'devcode': '1113', 'data': 3 }
+          ]
+        },
+        {
+          'date': '2021-10-02',
+          'data': [
+            { 'devcode': '1111', 'data': 1 },
+            { 'devcode': '1112', 'data': 6 },
+            { 'devcode': '1113', 'data': 1 }
+          ]
+        }
+      ]
+      const arr = res.map((item) => {
+        const result = { date: item.date }
+        for (let i = 0; i < item.data.length; i++) {
+          result[item.data[i].devcode] = item.data[i].data
+        }
+        return result
+      })
+      const area = res[0].data.map(item => item.devcode)
+      this.chartData.columns = ['date', ...area]
+      this.chartSettings.metrics = area
+      this.chartSettings.labelMap = { 'date': '日期' }
+      this.chartData.rows = arr
+    },
     // 获取数据
-    fetchData() {
-      countByDaySecond(this.query).then(response => {
+    fetchData(timeRange, type) {
+      const params = {
+        type: type || 'other',
+        beginTime: timeRange[0],
+        endTime: timeRange[1]
+      }
+      corrRateByDevice(params).then(response => {
+        console.log(response, '======腐蚀速率走势图response=====')
         if (response.data.length > 0) {
           const arr = response.data.map((item) => {
             const result = { date: item.date }
             for (let i = 0; i < item.data.length; i++) {
-              result[item.data[i].areaName] = item.data[i].count
+              result[item.data[i].devcode] = item.data[i].data
             }
             return result
           })
-          const area = response.data[0].data.map(item => item.areaName)
+          const area = response.data[0].data.map(item => item.devcode)
           this.chartData.columns = ['date', ...area]
           this.chartSettings.metrics = area
           this.chartSettings.labelMap = { 'date': '日期' }
diff --git a/src/views/gasDashboard/components/gasCompare.vue b/src/views/gasDashboard/components/gasCompare.vue
new file mode 100644
index 0000000..19a4398
--- /dev/null
+++ b/src/views/gasDashboard/components/gasCompare.vue
@@ -0,0 +1,121 @@
+<!--分区用气对比图-->
+<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 { gasCompareData } from '@/api/gasOverview'
+import FunctionArea from './FunctionArea'
+export default {
+  name: 'GasCompare',
+  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: true
+        },
+        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, type) {
+      const params = {
+        areaId: '110000',
+        type: type || 'other',
+        startTime: timeRange[0],
+        endTime: timeRange[1]
+      }
+      gasCompareData(params).then(response => {
+        this.isShow = false
+        this.chartSettings.labelMap = {
+          areaName: '分区',
+          last: response.data[0].lastTime,
+          now: response.data[0].nowTime
+        }
+        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.max = 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/gasDashboard/components/gasCountByAreaBar.vue b/src/views/gasDashboard/components/gasCountByAreaBar.vue
new file mode 100644
index 0000000..456a6c6
--- /dev/null
+++ b/src/views/gasDashboard/components/gasCountByAreaBar.vue
@@ -0,0 +1,198 @@
+<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 { countBySecondArea } from '@/api/gasOverview'
+import { getDayTime } from '@/utils/dateutils'
+import { getDoorAreaTree } from '@/api/system/area'
+import FunctionArea from './FunctionArea'
+
+export default {
+  name: 'GasCountByAreaBar',
+  components: { FunctionArea },
+  data() {
+    this.extend = {
+      legend: {
+        show: true
+      },
+      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': '分区',
+        'count': '用气量'
+      },
+      dimension: ['areaName'],
+      metrics: ['count']
+    }
+    return {
+      areaId: '',
+      areaList: [],
+      isShow: true,
+      defaultTimeRange: [],
+      timeRange: [],
+      pickerOptions: {
+        disabledDate: function(date) {
+          var oDate1 = new Date(date)
+          var oDate2 = new Date()
+          if (oDate1.getTime() > oDate2.getTime()) {
+            return true
+          } else {
+            return false
+          }
+        }
+      },
+      chartData: {
+        columns: ['wellTypeName', 'count'],
+        rows: []
+      }
+    }
+  },
+  mounted() {
+    this.$refs.func.init()
+    // this.setDefaultTime('week')
+    // 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()
+    },
+    fetchData(timeRange) {
+      const params = {
+        areaId: '110000',
+        startTime: timeRange[0],
+        endTime: timeRange[1]
+      }
+      this.$emit('change', params)
+      countBySecondArea(params).then(response => {
+        this.isShow = false
+        this.chartData.rows = response.data
+        this.isShow = true
+      })
+    },
+    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.fetchData(this.timeRange)
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+  .container{
+    position:relative;
+    .function{
+      width:calc(100% - 120px);
+      height: 28px;
+      display: flex;
+      justify-content: center;
+    }
+  }
+  .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/gasDashboard/components/gasCountByDay.vue b/src/views/gasDashboard/components/gasCountByDay.vue
new file mode 100644
index 0000000..79a4efb
--- /dev/null
+++ b/src/views/gasDashboard/components/gasCountByDay.vue
@@ -0,0 +1,146 @@
+<template>
+  <div class="container">
+    <ve-line :data="chartData" :title="title" :extend="extend" :settings="chartSettings"/>
+  </div>
+</template>
+
+<script>
+import { getDayTime } from '@/utils/dateutils'
+import { countByDaySecond } from '@/api/gasOverview'
+import { getDoorAreaTree } from '@/api/system/area'
+export default {
+  name: 'GasCountByDay',
+  props: {
+    query: {
+      type: Object,
+      default: () => {
+        return {
+          areaId: '',
+          startTime: '',
+          endTime: ''
+        }
+      }
+    }
+  },
+  data() {
+    return {
+      listQuery: {
+        startTime: '',
+        endTime: ''
+      },
+      title: {
+        text: '用气走势图'
+      },
+      chartSettings: {
+        labelMap: { date: '日期' },
+        metrics: [],
+        dimension: ['date']
+      },
+      extend: {
+        grid: {
+          top: 120
+        },
+        yAxis: {
+          name: '用气量（吨）',
+          position: 'left'
+        },
+        legend: {
+          // type: 'scroll',
+          top: '40px'
+        }
+      },
+      chartData: {
+        columns: [],
+        rows: []
+      }
+    }
+  },
+  watch: {
+    query(val) {
+      this.fetchData()
+    }
+  },
+  mounted() {
+    // this.changeTime('month')
+    // this.fetchArea()
+  },
+  methods: {
+    // 废弃
+    fetchArea() {
+      getDoorAreaTree().then(response => {
+        if (response.code === 200) {
+          debugger
+          const area = response.data.filter(item => {
+            return item.pid === '1'
+          }).map(item => item.name)
+          this.chartSettings.metrics = area
+          this.chartSettings.labelMap = {}
+          for (let i = 0; i < area.length; i++) {
+            this.chartSettings.labelMap[area[i]] = area[i]
+          }
+          this.chartData.columns = ['date', ...area]
+          this.fetchData()
+        }
+      })
+    },
+    // 获取数据
+    fetchData() {
+      countByDaySecond(this.query).then(response => {
+        console.log(response, '=====用气走势图====')
+        if (response.data.length > 0) {
+          const arr = response.data.map((item) => {
+            const result = { date: item.date }
+            for (let i = 0; i < item.data.length; i++) {
+              result[item.data[i].areaName] = item.data[i].count
+            }
+            return result
+          })
+          const area = response.data[0].data.map(item => item.areaName)
+          this.chartData.columns = ['date', ...area]
+          this.chartSettings.metrics = area
+          this.chartSettings.labelMap = { 'date': '日期' }
+          this.chartData.rows = arr
+        }
+      })
+      // 模拟数据
+      // this.chartData.rows = [
+      //   { date: '11月29日', dept1: 153, dept2: 43, dept3: 1, dept4: 1, dept5: 1, dept6: 7, dept7: 6, dept8: 2, dept9: 1, dept10: 3 },
+      //   { date: '11月30日', dept1: 150, dept2: 30, dept3: 2, dept4: 1, dept5: 4, dept6: 6, dept7: 3, dept8: 2, dept9: 1, dept10: 3 },
+      //   { date: '12月1日 ', dept1: 143, dept2: 23, dept3: 3, dept4: 2, dept5: 2, dept6: 7, dept7: 3, dept8: 2, dept9: 1, dept10: 3 },
+      //   { date: '12月2日 ', dept1: 173, dept2: 23, dept3: 4, dept4: 4, dept5: 1, dept6: 1, dept7: 8, dept8: 2, dept9: 1, dept10: 3 },
+      //   { date: '12月3日 ', dept1: 272, dept2: 52, dept3: 5, dept4: 1, dept5: 4, dept6: 7, dept7: 9, dept8: 2, dept9: 1, dept10: 3 },
+      //   { date: '12月4日 ', dept1: 253, dept2: 53, dept3: 6, dept4: 5, dept5: 5, dept6: 2, dept7: 9, dept8: 2, dept9: 1, dept10: 3 }
+      // ]
+    },
+    changeTime(timeType) {
+      let startTime
+      switch (timeType) {
+        case 'year':
+          startTime = getDayTime(new Date().getTime() - 24 * 365 * 60 * 60 * 1000)
+          this.listQuery.startTime = startTime.Format('yyyy-MM-dd')
+          break
+        case 'halfyear':
+          startTime = getDayTime(new Date().getTime() - 24 * 182 * 60 * 60 * 1000)
+          this.listQuery.startTime = startTime.Format('yyyy-MM-dd')
+          break
+        case '3month':
+          startTime = getDayTime(new Date().getTime() - 24 * 90 * 60 * 60 * 1000)
+          this.listQuery.startTime = startTime.Format('yyyy-MM-dd')
+          break
+        case 'month':
+          startTime = getDayTime(new Date().getTime() - 24 * 30 * 60 * 60 * 1000)
+          this.listQuery.startTime = startTime.Format('yyyy-MM-dd')
+          break
+        case 'week':
+          startTime = getDayTime(new Date().getTime() - 24 * 7 * 60 * 60 * 1000)
+          this.listQuery.startTime = startTime.Format('yyyy-MM-dd')
+          break
+      }
+      const endTime = new Date()
+      this.listQuery.endTime = endTime.Format('yyyy-MM-dd')
+      this.fetchData()
+    }
+  }
+}
+</script>
+
diff --git a/src/views/gasDashboard/components/gasCountByDept.vue b/src/views/gasDashboard/components/gasCountByDept.vue
new file mode 100644
index 0000000..31c8508
--- /dev/null
+++ b/src/views/gasDashboard/components/gasCountByDept.vue
@@ -0,0 +1,126 @@
+<!--suppress ALL -->
+<template>
+  <div class="container">
+    <ve-pie :data="chartData" :extend="extend" :title="title"/>
+  </div>
+</template>
+
+<script>
+import { countBySecondArea } from '@/api/gasOverview'
+import { getDoorAreaTree } from '@/api/system/area'
+export default {
+  name: 'GasCountByDept',
+  props: {
+    query: {
+      type: Object,
+      default: () => {
+        return {
+          areaId: '',
+          startTime: '',
+          endTime: ''
+        }
+      }
+    }
+  },
+  data() {
+    return {
+      listQuery: {
+        areaId: '',
+        startTime: '',
+        endTime: ''
+      },
+      areaId: '',
+      areaList: [],
+      chartData: {
+        columns: ['areaName', 'count'],
+        rows: []
+      },
+      extend: {
+        grid: {
+          right: '30%'
+        },
+        legend: {
+          type: 'scroll',
+          top: '60px',
+          right: '0px',
+          orient: 'vertical'
+        },
+        series: {
+          label: { show: true, position: 'outside', formatter: '{b}' },
+          right: 120
+        },
+        tooltip: { trigger: 'item', formatter: '{b}<br/>用气量：{c}吨<br/>占比：{d}%' }
+      },
+      title: {
+        text: '分区用气占比图'
+      },
+      chartSettings: {
+        labelMap: {
+          'areaName': '分区',
+          'count': '用气量'
+        },
+        dimension: 'areaName',
+        metrics: 'count'
+      }
+    }
+  },
+  watch: {
+    query(val) {
+      this.fetchData()
+    }
+  },
+  mounted() {
+    // TODO:待调试真接口
+    // 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()
+    },
+    // 获取统计数据
+    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
+      })
+    }
+  }
+}
+</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/gasDashboard/components/gasNote.vue b/src/views/gasDashboard/components/gasNote.vue
new file mode 100644
index 0000000..5ade90f
--- /dev/null
+++ b/src/views/gasDashboard/components/gasNote.vue
@@ -0,0 +1,149 @@
+<!--用水事记L -->
+<template>
+  <div class="container">
+    <div class="title">
+      场区用气事记
+      <i v-if="!editMode" class="el-icon-edit edit-btn" style="float:right" @click="editNote" />
+      <i v-else class="el-icon-check edit-btn" style="float:right" @click="saveNote" />
+    </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" />
+            <div style="width: 85px;display: flex;justify-content: flex-end">
+              <i v-show="index!==0" class="el-icon-top" @click="toTop(index)" />
+              <i v-show="index!==currentList.length-1" class="el-icon-bottom" @click="toBottom(index)" />
+              <i class="el-icon-delete" @click="deleteItem(index)" />
+            </div>
+          </div>
+        </div>
+        <div v-if="editMode&&currentList.length<10" class="content-line">
+          <i class="el-icon-circle-plus-outline icon-btn" @click="addItem()" />
+        </div>
+      </el-scrollbar>
+    </div>
+  </div>
+</template>
+
+<script>
+import { getNoteList, updateNoteList } from '@/api/dashboard'
+export default {
+  name: 'GasNote',
+  props: {
+    query: {
+      type: Object,
+      default: () => {
+        return {
+          areaId: '',
+          startTime: '',
+          endTime: ''
+        }
+      }
+    }
+  },
+  data() {
+    return {
+      editMode: false, // 编辑模式
+      originList: [], // 原始列表
+      currentList: [] // 当前列表
+    }
+  },
+  mounted() {
+    this.fetchData()
+  },
+  methods: {
+    // 获取统计数据
+    fetchData() {
+      // this.currentList = [
+      //   { 'content': '测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试', 'num': 1 },
+      //   { 'content': '测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试', 'num': 1 },
+      //   { 'content': '测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试', 'num': 1 },
+      //   { 'content': '测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试', 'num': 1 },
+      //   { 'content': '测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试', 'num': 1 }
+      // ]
+      // this.originList = JSON.parse(JSON.stringify(this.currentList))
+      getNoteList('2').then(response => {
+        this.currentList = JSON.parse(response.data[0].notes)
+      })
+    },
+    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 }
+      })
+      const params = {
+        type: '2',
+        list: currentList
+      }
+      updateNoteList(params).then(res => {
+        this.editMode = false
+        this.$message.success('保存成功')
+      }).catch(e => {
+        // this.currentList = JSON.parse(JSON.stringify(this.originList))
+      })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+  @import "@/styles/variables.scss";
+  .container{
+    position:relative;
+    height: 428px;
+    display: flex;
+    flex-direction: column;
+    .title{
+      font-weight: bolder;
+      font-size: 18px;
+      font-family: sans-serif;
+      color: #333;
+    }
+    .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/gasDashboard/components/watchAlarmBar.vue b/src/views/gasDashboard/components/watchAlarmBar.vue
index 8857807..4279440 100644
--- a/src/views/gasDashboard/components/watchAlarmBar.vue
+++ b/src/views/gasDashboard/components/watchAlarmBar.vue
@@ -2,33 +2,7 @@
 <template>
   <div class="container">
     <function-area ref="func" select="week" @change="fetchData"/>
-    <!--<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>-->
     <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>
 </template>
 
@@ -42,10 +16,10 @@
   components: { FunctionArea },
   data() {
     return {
-      title:{
+      title: {
         text: '气体流量计告警统计'
       },
-      chartSettings:{
+      chartSettings: {
         itemStyle: {
           barCategoryGap: 0
         },
@@ -83,7 +57,7 @@
         series: {
           label: { show: true, position: 'top', formatter: '{c}' },
           barWidth: 20
-        },
+        }
         // tooltip: { trigger: 'item', formatter: '{b}<br/>报警次数：{c}次' }
       },
       areaId: '',

diff --git a/src/api/gasOverview.js b/src/api/gasOverview.js
index a8996f5..b7da600 100644
--- a/src/api/gasOverview.js
+++ b/src/api/gasOverview.js
@@ -53,8 +53,24 @@
     params
   })
 }
-// 查询二级分区各区用水量对比
-export function waterCompare(params) {
+// 查询二级分区燃气告警
+export function gasAlarmBySecondArea(params) {
+  return request({
+    url: 'dataStatistic/gasAlarmBySecondArea',
+    method: 'get',
+    params
+  })
+}
+// 各设备腐蚀速率统计
+export function corrRateByDevice(params) {
+  return request({
+    url: 'statics/corrRateByDevice',
+    method: 'get',
+    params
+  })
+}
+// 查询二级分区用气对比
+export function gasCompareData(params) {
   return request({
     url: 'gasStatistic/gasCompare',
     method: 'get',
diff --git a/src/views/gasDashboard/components/alarmGasCountByDept.vue b/src/views/gasDashboard/components/alarmGasCountByDept.vue
index 60ab5ad..b8bfc23 100644
--- a/src/views/gasDashboard/components/alarmGasCountByDept.vue
+++ b/src/views/gasDashboard/components/alarmGasCountByDept.vue
@@ -8,7 +8,7 @@
 </template>
 
 <script>
-import { alarmBySecondArea } from '@/api/gasOverview'
+import { gasAlarmBySecondArea } from '@/api/gasOverview'
 export default {
   name: 'AlarmGasCountByDept',
   props: {
@@ -64,7 +64,7 @@
   methods: {
     // 获取统计数据
     fetchData() {
-      alarmBySecondArea(this.query).then(response => {
+      gasAlarmBySecondArea(this.query).then(response => {
         this.chartData.rows = response.data
       })
     }
diff --git a/src/views/gasDashboard/components/corrodeCountByDay.vue b/src/views/gasDashboard/components/corrodeCountByDay.vue
index 3a97391..82c29bf 100644
--- a/src/views/gasDashboard/components/corrodeCountByDay.vue
+++ b/src/views/gasDashboard/components/corrodeCountByDay.vue
@@ -1,13 +1,30 @@
+<!--腐蚀速率走势图-->
 <template>
   <div class="container">
-    <ve-line :data="chartData" :title="title" :extend="extend" :settings="chartSettings"/>
+    <!-- <function-area
+      ref="func"
+      select="week"
+      @change="fetchData"
+    /> -->
+    <function-area
+      ref="func"
+      select="week"
+    />
+    <ve-line
+      :data="chartData"
+      :title="title"
+      :extend="extend"
+      :settings="chartSettings"
+    />
   </div>
 </template>
 
 <script>
-import { countByDaySecond } from '@/api/gasOverview'
+import FunctionArea from './FunctionArea'
+import { corrRateByDevice } from '@/api/gasOverview'
 export default {
-  name: 'WaterCountByDay',
+  name: 'CorrodeCountByDay',
+  components: { FunctionArea },
   props: {
     query: {
       type: Object,
@@ -22,10 +39,6 @@
   },
   data() {
     return {
-      listQuery: {
-        startTime: '',
-        endTime: ''
-      },
       title: {
         text: '腐蚀速率走势图'
       },
@@ -53,24 +66,62 @@
       }
     }
   },
-  watch: {
-    query(val) {
-      this.fetchData()
-    }
+  mounted() {
+    this.$refs.func.init()
+    this.getData()
   },
   methods: {
+    // 模拟数据
+    getData() {
+      const res = [
+        {
+          'date': '2021-10-01',
+          'data': [
+            { 'devcode': '1111', 'data': 10 },
+            { 'devcode': '1112', 'data': 2 },
+            { 'devcode': '1113', 'data': 3 }
+          ]
+        },
+        {
+          'date': '2021-10-02',
+          'data': [
+            { 'devcode': '1111', 'data': 1 },
+            { 'devcode': '1112', 'data': 6 },
+            { 'devcode': '1113', 'data': 1 }
+          ]
+        }
+      ]
+      const arr = res.map((item) => {
+        const result = { date: item.date }
+        for (let i = 0; i < item.data.length; i++) {
+          result[item.data[i].devcode] = item.data[i].data
+        }
+        return result
+      })
+      const area = res[0].data.map(item => item.devcode)
+      this.chartData.columns = ['date', ...area]
+      this.chartSettings.metrics = area
+      this.chartSettings.labelMap = { 'date': '日期' }
+      this.chartData.rows = arr
+    },
     // 获取数据
-    fetchData() {
-      countByDaySecond(this.query).then(response => {
+    fetchData(timeRange, type) {
+      const params = {
+        type: type || 'other',
+        beginTime: timeRange[0],
+        endTime: timeRange[1]
+      }
+      corrRateByDevice(params).then(response => {
+        console.log(response, '======腐蚀速率走势图response=====')
         if (response.data.length > 0) {
           const arr = response.data.map((item) => {
             const result = { date: item.date }
             for (let i = 0; i < item.data.length; i++) {
-              result[item.data[i].areaName] = item.data[i].count
+              result[item.data[i].devcode] = item.data[i].data
             }
             return result
           })
-          const area = response.data[0].data.map(item => item.areaName)
+          const area = response.data[0].data.map(item => item.devcode)
           this.chartData.columns = ['date', ...area]
           this.chartSettings.metrics = area
           this.chartSettings.labelMap = { 'date': '日期' }
diff --git a/src/views/gasDashboard/components/gasCompare.vue b/src/views/gasDashboard/components/gasCompare.vue
new file mode 100644
index 0000000..19a4398
--- /dev/null
+++ b/src/views/gasDashboard/components/gasCompare.vue
@@ -0,0 +1,121 @@
+<!--分区用气对比图-->
+<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 { gasCompareData } from '@/api/gasOverview'
+import FunctionArea from './FunctionArea'
+export default {
+  name: 'GasCompare',
+  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: true
+        },
+        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, type) {
+      const params = {
+        areaId: '110000',
+        type: type || 'other',
+        startTime: timeRange[0],
+        endTime: timeRange[1]
+      }
+      gasCompareData(params).then(response => {
+        this.isShow = false
+        this.chartSettings.labelMap = {
+          areaName: '分区',
+          last: response.data[0].lastTime,
+          now: response.data[0].nowTime
+        }
+        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.max = 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/gasDashboard/components/gasCountByAreaBar.vue b/src/views/gasDashboard/components/gasCountByAreaBar.vue
new file mode 100644
index 0000000..456a6c6
--- /dev/null
+++ b/src/views/gasDashboard/components/gasCountByAreaBar.vue
@@ -0,0 +1,198 @@
+<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 { countBySecondArea } from '@/api/gasOverview'
+import { getDayTime } from '@/utils/dateutils'
+import { getDoorAreaTree } from '@/api/system/area'
+import FunctionArea from './FunctionArea'
+
+export default {
+  name: 'GasCountByAreaBar',
+  components: { FunctionArea },
+  data() {
+    this.extend = {
+      legend: {
+        show: true
+      },
+      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': '分区',
+        'count': '用气量'
+      },
+      dimension: ['areaName'],
+      metrics: ['count']
+    }
+    return {
+      areaId: '',
+      areaList: [],
+      isShow: true,
+      defaultTimeRange: [],
+      timeRange: [],
+      pickerOptions: {
+        disabledDate: function(date) {
+          var oDate1 = new Date(date)
+          var oDate2 = new Date()
+          if (oDate1.getTime() > oDate2.getTime()) {
+            return true
+          } else {
+            return false
+          }
+        }
+      },
+      chartData: {
+        columns: ['wellTypeName', 'count'],
+        rows: []
+      }
+    }
+  },
+  mounted() {
+    this.$refs.func.init()
+    // this.setDefaultTime('week')
+    // 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()
+    },
+    fetchData(timeRange) {
+      const params = {
+        areaId: '110000',
+        startTime: timeRange[0],
+        endTime: timeRange[1]
+      }
+      this.$emit('change', params)
+      countBySecondArea(params).then(response => {
+        this.isShow = false
+        this.chartData.rows = response.data
+        this.isShow = true
+      })
+    },
+    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.fetchData(this.timeRange)
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+  .container{
+    position:relative;
+    .function{
+      width:calc(100% - 120px);
+      height: 28px;
+      display: flex;
+      justify-content: center;
+    }
+  }
+  .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/gasDashboard/components/gasCountByDay.vue b/src/views/gasDashboard/components/gasCountByDay.vue
new file mode 100644
index 0000000..79a4efb
--- /dev/null
+++ b/src/views/gasDashboard/components/gasCountByDay.vue
@@ -0,0 +1,146 @@
+<template>
+  <div class="container">
+    <ve-line :data="chartData" :title="title" :extend="extend" :settings="chartSettings"/>
+  </div>
+</template>
+
+<script>
+import { getDayTime } from '@/utils/dateutils'
+import { countByDaySecond } from '@/api/gasOverview'
+import { getDoorAreaTree } from '@/api/system/area'
+export default {
+  name: 'GasCountByDay',
+  props: {
+    query: {
+      type: Object,
+      default: () => {
+        return {
+          areaId: '',
+          startTime: '',
+          endTime: ''
+        }
+      }
+    }
+  },
+  data() {
+    return {
+      listQuery: {
+        startTime: '',
+        endTime: ''
+      },
+      title: {
+        text: '用气走势图'
+      },
+      chartSettings: {
+        labelMap: { date: '日期' },
+        metrics: [],
+        dimension: ['date']
+      },
+      extend: {
+        grid: {
+          top: 120
+        },
+        yAxis: {
+          name: '用气量（吨）',
+          position: 'left'
+        },
+        legend: {
+          // type: 'scroll',
+          top: '40px'
+        }
+      },
+      chartData: {
+        columns: [],
+        rows: []
+      }
+    }
+  },
+  watch: {
+    query(val) {
+      this.fetchData()
+    }
+  },
+  mounted() {
+    // this.changeTime('month')
+    // this.fetchArea()
+  },
+  methods: {
+    // 废弃
+    fetchArea() {
+      getDoorAreaTree().then(response => {
+        if (response.code === 200) {
+          debugger
+          const area = response.data.filter(item => {
+            return item.pid === '1'
+          }).map(item => item.name)
+          this.chartSettings.metrics = area
+          this.chartSettings.labelMap = {}
+          for (let i = 0; i < area.length; i++) {
+            this.chartSettings.labelMap[area[i]] = area[i]
+          }
+          this.chartData.columns = ['date', ...area]
+          this.fetchData()
+        }
+      })
+    },
+    // 获取数据
+    fetchData() {
+      countByDaySecond(this.query).then(response => {
+        console.log(response, '=====用气走势图====')
+        if (response.data.length > 0) {
+          const arr = response.data.map((item) => {
+            const result = { date: item.date }
+            for (let i = 0; i < item.data.length; i++) {
+              result[item.data[i].areaName] = item.data[i].count
+            }
+            return result
+          })
+          const area = response.data[0].data.map(item => item.areaName)
+          this.chartData.columns = ['date', ...area]
+          this.chartSettings.metrics = area
+          this.chartSettings.labelMap = { 'date': '日期' }
+          this.chartData.rows = arr
+        }
+      })
+      // 模拟数据
+      // this.chartData.rows = [
+      //   { date: '11月29日', dept1: 153, dept2: 43, dept3: 1, dept4: 1, dept5: 1, dept6: 7, dept7: 6, dept8: 2, dept9: 1, dept10: 3 },
+      //   { date: '11月30日', dept1: 150, dept2: 30, dept3: 2, dept4: 1, dept5: 4, dept6: 6, dept7: 3, dept8: 2, dept9: 1, dept10: 3 },
+      //   { date: '12月1日 ', dept1: 143, dept2: 23, dept3: 3, dept4: 2, dept5: 2, dept6: 7, dept7: 3, dept8: 2, dept9: 1, dept10: 3 },
+      //   { date: '12月2日 ', dept1: 173, dept2: 23, dept3: 4, dept4: 4, dept5: 1, dept6: 1, dept7: 8, dept8: 2, dept9: 1, dept10: 3 },
+      //   { date: '12月3日 ', dept1: 272, dept2: 52, dept3: 5, dept4: 1, dept5: 4, dept6: 7, dept7: 9, dept8: 2, dept9: 1, dept10: 3 },
+      //   { date: '12月4日 ', dept1: 253, dept2: 53, dept3: 6, dept4: 5, dept5: 5, dept6: 2, dept7: 9, dept8: 2, dept9: 1, dept10: 3 }
+      // ]
+    },
+    changeTime(timeType) {
+      let startTime
+      switch (timeType) {
+        case 'year':
+          startTime = getDayTime(new Date().getTime() - 24 * 365 * 60 * 60 * 1000)
+          this.listQuery.startTime = startTime.Format('yyyy-MM-dd')
+          break
+        case 'halfyear':
+          startTime = getDayTime(new Date().getTime() - 24 * 182 * 60 * 60 * 1000)
+          this.listQuery.startTime = startTime.Format('yyyy-MM-dd')
+          break
+        case '3month':
+          startTime = getDayTime(new Date().getTime() - 24 * 90 * 60 * 60 * 1000)
+          this.listQuery.startTime = startTime.Format('yyyy-MM-dd')
+          break
+        case 'month':
+          startTime = getDayTime(new Date().getTime() - 24 * 30 * 60 * 60 * 1000)
+          this.listQuery.startTime = startTime.Format('yyyy-MM-dd')
+          break
+        case 'week':
+          startTime = getDayTime(new Date().getTime() - 24 * 7 * 60 * 60 * 1000)
+          this.listQuery.startTime = startTime.Format('yyyy-MM-dd')
+          break
+      }
+      const endTime = new Date()
+      this.listQuery.endTime = endTime.Format('yyyy-MM-dd')
+      this.fetchData()
+    }
+  }
+}
+</script>
+
diff --git a/src/views/gasDashboard/components/gasCountByDept.vue b/src/views/gasDashboard/components/gasCountByDept.vue
new file mode 100644
index 0000000..31c8508
--- /dev/null
+++ b/src/views/gasDashboard/components/gasCountByDept.vue
@@ -0,0 +1,126 @@
+<!--suppress ALL -->
+<template>
+  <div class="container">
+    <ve-pie :data="chartData" :extend="extend" :title="title"/>
+  </div>
+</template>
+
+<script>
+import { countBySecondArea } from '@/api/gasOverview'
+import { getDoorAreaTree } from '@/api/system/area'
+export default {
+  name: 'GasCountByDept',
+  props: {
+    query: {
+      type: Object,
+      default: () => {
+        return {
+          areaId: '',
+          startTime: '',
+          endTime: ''
+        }
+      }
+    }
+  },
+  data() {
+    return {
+      listQuery: {
+        areaId: '',
+        startTime: '',
+        endTime: ''
+      },
+      areaId: '',
+      areaList: [],
+      chartData: {
+        columns: ['areaName', 'count'],
+        rows: []
+      },
+      extend: {
+        grid: {
+          right: '30%'
+        },
+        legend: {
+          type: 'scroll',
+          top: '60px',
+          right: '0px',
+          orient: 'vertical'
+        },
+        series: {
+          label: { show: true, position: 'outside', formatter: '{b}' },
+          right: 120
+        },
+        tooltip: { trigger: 'item', formatter: '{b}<br/>用气量：{c}吨<br/>占比：{d}%' }
+      },
+      title: {
+        text: '分区用气占比图'
+      },
+      chartSettings: {
+        labelMap: {
+          'areaName': '分区',
+          'count': '用气量'
+        },
+        dimension: 'areaName',
+        metrics: 'count'
+      }
+    }
+  },
+  watch: {
+    query(val) {
+      this.fetchData()
+    }
+  },
+  mounted() {
+    // TODO:待调试真接口
+    // 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()
+    },
+    // 获取统计数据
+    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
+      })
+    }
+  }
+}
+</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/gasDashboard/components/gasNote.vue b/src/views/gasDashboard/components/gasNote.vue
new file mode 100644
index 0000000..5ade90f
--- /dev/null
+++ b/src/views/gasDashboard/components/gasNote.vue
@@ -0,0 +1,149 @@
+<!--用水事记L -->
+<template>
+  <div class="container">
+    <div class="title">
+      场区用气事记
+      <i v-if="!editMode" class="el-icon-edit edit-btn" style="float:right" @click="editNote" />
+      <i v-else class="el-icon-check edit-btn" style="float:right" @click="saveNote" />
+    </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" />
+            <div style="width: 85px;display: flex;justify-content: flex-end">
+              <i v-show="index!==0" class="el-icon-top" @click="toTop(index)" />
+              <i v-show="index!==currentList.length-1" class="el-icon-bottom" @click="toBottom(index)" />
+              <i class="el-icon-delete" @click="deleteItem(index)" />
+            </div>
+          </div>
+        </div>
+        <div v-if="editMode&&currentList.length<10" class="content-line">
+          <i class="el-icon-circle-plus-outline icon-btn" @click="addItem()" />
+        </div>
+      </el-scrollbar>
+    </div>
+  </div>
+</template>
+
+<script>
+import { getNoteList, updateNoteList } from '@/api/dashboard'
+export default {
+  name: 'GasNote',
+  props: {
+    query: {
+      type: Object,
+      default: () => {
+        return {
+          areaId: '',
+          startTime: '',
+          endTime: ''
+        }
+      }
+    }
+  },
+  data() {
+    return {
+      editMode: false, // 编辑模式
+      originList: [], // 原始列表
+      currentList: [] // 当前列表
+    }
+  },
+  mounted() {
+    this.fetchData()
+  },
+  methods: {
+    // 获取统计数据
+    fetchData() {
+      // this.currentList = [
+      //   { 'content': '测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试', 'num': 1 },
+      //   { 'content': '测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试', 'num': 1 },
+      //   { 'content': '测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试', 'num': 1 },
+      //   { 'content': '测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试', 'num': 1 },
+      //   { 'content': '测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试', 'num': 1 }
+      // ]
+      // this.originList = JSON.parse(JSON.stringify(this.currentList))
+      getNoteList('2').then(response => {
+        this.currentList = JSON.parse(response.data[0].notes)
+      })
+    },
+    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 }
+      })
+      const params = {
+        type: '2',
+        list: currentList
+      }
+      updateNoteList(params).then(res => {
+        this.editMode = false
+        this.$message.success('保存成功')
+      }).catch(e => {
+        // this.currentList = JSON.parse(JSON.stringify(this.originList))
+      })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+  @import "@/styles/variables.scss";
+  .container{
+    position:relative;
+    height: 428px;
+    display: flex;
+    flex-direction: column;
+    .title{
+      font-weight: bolder;
+      font-size: 18px;
+      font-family: sans-serif;
+      color: #333;
+    }
+    .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/gasDashboard/components/watchAlarmBar.vue b/src/views/gasDashboard/components/watchAlarmBar.vue
index 8857807..4279440 100644
--- a/src/views/gasDashboard/components/watchAlarmBar.vue
+++ b/src/views/gasDashboard/components/watchAlarmBar.vue
@@ -2,33 +2,7 @@
 <template>
   <div class="container">
     <function-area ref="func" select="week" @change="fetchData"/>
-    <!--<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>-->
     <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>
 </template>
 
@@ -42,10 +16,10 @@
   components: { FunctionArea },
   data() {
     return {
-      title:{
+      title: {
         text: '气体流量计告警统计'
       },
-      chartSettings:{
+      chartSettings: {
         itemStyle: {
           barCategoryGap: 0
         },
@@ -83,7 +57,7 @@
         series: {
           label: { show: true, position: 'top', formatter: '{c}' },
           barWidth: 20
-        },
+        }
         // tooltip: { trigger: 'item', formatter: '{b}<br/>报警次数：{c}次' }
       },
       areaId: '',
diff --git a/src/views/gasDashboard/components/watchGasAlarmBar.vue b/src/views/gasDashboard/components/watchGasAlarmBar.vue
index 54783cc..0113341 100644
--- a/src/views/gasDashboard/components/watchGasAlarmBar.vue
+++ b/src/views/gasDashboard/components/watchGasAlarmBar.vue
@@ -1,14 +1,20 @@
 <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"/>
+    <ve-histogram
+      :data="chartData"
+      :grid="grid"
+      :extend="extend"
+      :title="title"
+      :settings="chartSettings"
+    />
   </div>
 </template>
 
 <script>
 // 引入视觉映射组件
 import 'echarts/lib/component/visualMap'
-import { alarmBySecondArea } from '@/api/gasOverview'
+import { gasAlarmBySecondArea } from '@/api/gasOverview'
 import functionArea from './FunctionArea'
 export default {
   name: 'WatchGasAlarmBar',
@@ -18,26 +24,7 @@
       title: {
         text: '燃气告警统计'
       },
-      chartSettings: {
-        itemStyle: {
-          barCategoryGap: 0
-        },
-        labelMap: {
-          'areaName': '分区',
-          'alarm': '报警数'
-        },
-        dimension: ['areaName'],
-        metrics: ['alarm']
-      },
-      grid: {
-        right: 40,
-        top: 80,
-        bottom: 5
-      },
       extend: {
-        legend: {
-          show: true
-        },
         xAxis: {
           axisLabel: {
             rotate: 30,
@@ -53,31 +40,34 @@
           max: 10
         },
         series: {
-          label: { show: true, position: 'top', formatter: '{c}' },
-          barWidth: 20
+          label: { show: true, position: 'top' },
+          barMaxWidth: 35 // 最大柱宽度
         }
-        // tooltip: { trigger: 'item', formatter: '{b}<br/>报警次数：{c}次' }
+      },
+      grid: {
+        right: 60
+      },
+      chartSettings: {
+        itemStyle: {
+          'barCategoryGap': 5
+        },
+        barWidth: 15,
+        labelMap: {
+          'areaName': '区域',
+          'alarm': '报警数'
+        },
+        dimension: ['areaName'],
+        metrics: ['alarm']
+      },
+      chartData: {
+        columns: ['areaName', 'alarm'],
+        rows: []
       },
       areaId: '',
       areaList: [],
       isShow: true,
       defaultTimeRange: [],
-      timeRange: [],
-      pickerOptions: {
-        disabledDate: function(date) {
-          var oDate1 = new Date(date)
-          var oDate2 = new Date()
-          if (oDate1.getTime() > oDate2.getTime()) {
-            return true
-          } else {
-            return false
-          }
-        }
-      },
-      chartData: {
-        columns: ['areaName', 'alarm'],
-        rows: []
-      }
+      timeRange: []
     }
   },
   mounted() {
@@ -93,15 +83,9 @@
         endTime: timeRange[1]
       }
       this.$emit('change', params)
-      alarmBySecondArea(params).then(response => {
+      gasAlarmBySecondArea(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.max = maxValue + 1
-        }
         this.isShow = true
       })
     }

diff --git a/src/api/gasOverview.js b/src/api/gasOverview.js
index a8996f5..b7da600 100644
--- a/src/api/gasOverview.js
+++ b/src/api/gasOverview.js
@@ -53,8 +53,24 @@
     params
   })
 }
-// 查询二级分区各区用水量对比
-export function waterCompare(params) {
+// 查询二级分区燃气告警
+export function gasAlarmBySecondArea(params) {
+  return request({
+    url: 'dataStatistic/gasAlarmBySecondArea',
+    method: 'get',
+    params
+  })
+}
+// 各设备腐蚀速率统计
+export function corrRateByDevice(params) {
+  return request({
+    url: 'statics/corrRateByDevice',
+    method: 'get',
+    params
+  })
+}
+// 查询二级分区用气对比
+export function gasCompareData(params) {
   return request({
     url: 'gasStatistic/gasCompare',
     method: 'get',
diff --git a/src/views/gasDashboard/components/alarmGasCountByDept.vue b/src/views/gasDashboard/components/alarmGasCountByDept.vue
index 60ab5ad..b8bfc23 100644
--- a/src/views/gasDashboard/components/alarmGasCountByDept.vue
+++ b/src/views/gasDashboard/components/alarmGasCountByDept.vue
@@ -8,7 +8,7 @@
 </template>
 
 <script>
-import { alarmBySecondArea } from '@/api/gasOverview'
+import { gasAlarmBySecondArea } from '@/api/gasOverview'
 export default {
   name: 'AlarmGasCountByDept',
   props: {
@@ -64,7 +64,7 @@
   methods: {
     // 获取统计数据
     fetchData() {
-      alarmBySecondArea(this.query).then(response => {
+      gasAlarmBySecondArea(this.query).then(response => {
         this.chartData.rows = response.data
       })
     }
diff --git a/src/views/gasDashboard/components/corrodeCountByDay.vue b/src/views/gasDashboard/components/corrodeCountByDay.vue
index 3a97391..82c29bf 100644
--- a/src/views/gasDashboard/components/corrodeCountByDay.vue
+++ b/src/views/gasDashboard/components/corrodeCountByDay.vue
@@ -1,13 +1,30 @@
+<!--腐蚀速率走势图-->
 <template>
   <div class="container">
-    <ve-line :data="chartData" :title="title" :extend="extend" :settings="chartSettings"/>
+    <!-- <function-area
+      ref="func"
+      select="week"
+      @change="fetchData"
+    /> -->
+    <function-area
+      ref="func"
+      select="week"
+    />
+    <ve-line
+      :data="chartData"
+      :title="title"
+      :extend="extend"
+      :settings="chartSettings"
+    />
   </div>
 </template>
 
 <script>
-import { countByDaySecond } from '@/api/gasOverview'
+import FunctionArea from './FunctionArea'
+import { corrRateByDevice } from '@/api/gasOverview'
 export default {
-  name: 'WaterCountByDay',
+  name: 'CorrodeCountByDay',
+  components: { FunctionArea },
   props: {
     query: {
       type: Object,
@@ -22,10 +39,6 @@
   },
   data() {
     return {
-      listQuery: {
-        startTime: '',
-        endTime: ''
-      },
       title: {
         text: '腐蚀速率走势图'
       },
@@ -53,24 +66,62 @@
       }
     }
   },
-  watch: {
-    query(val) {
-      this.fetchData()
-    }
+  mounted() {
+    this.$refs.func.init()
+    this.getData()
   },
   methods: {
+    // 模拟数据
+    getData() {
+      const res = [
+        {
+          'date': '2021-10-01',
+          'data': [
+            { 'devcode': '1111', 'data': 10 },
+            { 'devcode': '1112', 'data': 2 },
+            { 'devcode': '1113', 'data': 3 }
+          ]
+        },
+        {
+          'date': '2021-10-02',
+          'data': [
+            { 'devcode': '1111', 'data': 1 },
+            { 'devcode': '1112', 'data': 6 },
+            { 'devcode': '1113', 'data': 1 }
+          ]
+        }
+      ]
+      const arr = res.map((item) => {
+        const result = { date: item.date }
+        for (let i = 0; i < item.data.length; i++) {
+          result[item.data[i].devcode] = item.data[i].data
+        }
+        return result
+      })
+      const area = res[0].data.map(item => item.devcode)
+      this.chartData.columns = ['date', ...area]
+      this.chartSettings.metrics = area
+      this.chartSettings.labelMap = { 'date': '日期' }
+      this.chartData.rows = arr
+    },
     // 获取数据
-    fetchData() {
-      countByDaySecond(this.query).then(response => {
+    fetchData(timeRange, type) {
+      const params = {
+        type: type || 'other',
+        beginTime: timeRange[0],
+        endTime: timeRange[1]
+      }
+      corrRateByDevice(params).then(response => {
+        console.log(response, '======腐蚀速率走势图response=====')
         if (response.data.length > 0) {
           const arr = response.data.map((item) => {
             const result = { date: item.date }
             for (let i = 0; i < item.data.length; i++) {
-              result[item.data[i].areaName] = item.data[i].count
+              result[item.data[i].devcode] = item.data[i].data
             }
             return result
           })
-          const area = response.data[0].data.map(item => item.areaName)
+          const area = response.data[0].data.map(item => item.devcode)
           this.chartData.columns = ['date', ...area]
           this.chartSettings.metrics = area
           this.chartSettings.labelMap = { 'date': '日期' }
diff --git a/src/views/gasDashboard/components/gasCompare.vue b/src/views/gasDashboard/components/gasCompare.vue
new file mode 100644
index 0000000..19a4398
--- /dev/null
+++ b/src/views/gasDashboard/components/gasCompare.vue
@@ -0,0 +1,121 @@
+<!--分区用气对比图-->
+<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 { gasCompareData } from '@/api/gasOverview'
+import FunctionArea from './FunctionArea'
+export default {
+  name: 'GasCompare',
+  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: true
+        },
+        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, type) {
+      const params = {
+        areaId: '110000',
+        type: type || 'other',
+        startTime: timeRange[0],
+        endTime: timeRange[1]
+      }
+      gasCompareData(params).then(response => {
+        this.isShow = false
+        this.chartSettings.labelMap = {
+          areaName: '分区',
+          last: response.data[0].lastTime,
+          now: response.data[0].nowTime
+        }
+        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.max = 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/gasDashboard/components/gasCountByAreaBar.vue b/src/views/gasDashboard/components/gasCountByAreaBar.vue
new file mode 100644
index 0000000..456a6c6
--- /dev/null
+++ b/src/views/gasDashboard/components/gasCountByAreaBar.vue
@@ -0,0 +1,198 @@
+<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 { countBySecondArea } from '@/api/gasOverview'
+import { getDayTime } from '@/utils/dateutils'
+import { getDoorAreaTree } from '@/api/system/area'
+import FunctionArea from './FunctionArea'
+
+export default {
+  name: 'GasCountByAreaBar',
+  components: { FunctionArea },
+  data() {
+    this.extend = {
+      legend: {
+        show: true
+      },
+      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': '分区',
+        'count': '用气量'
+      },
+      dimension: ['areaName'],
+      metrics: ['count']
+    }
+    return {
+      areaId: '',
+      areaList: [],
+      isShow: true,
+      defaultTimeRange: [],
+      timeRange: [],
+      pickerOptions: {
+        disabledDate: function(date) {
+          var oDate1 = new Date(date)
+          var oDate2 = new Date()
+          if (oDate1.getTime() > oDate2.getTime()) {
+            return true
+          } else {
+            return false
+          }
+        }
+      },
+      chartData: {
+        columns: ['wellTypeName', 'count'],
+        rows: []
+      }
+    }
+  },
+  mounted() {
+    this.$refs.func.init()
+    // this.setDefaultTime('week')
+    // 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()
+    },
+    fetchData(timeRange) {
+      const params = {
+        areaId: '110000',
+        startTime: timeRange[0],
+        endTime: timeRange[1]
+      }
+      this.$emit('change', params)
+      countBySecondArea(params).then(response => {
+        this.isShow = false
+        this.chartData.rows = response.data
+        this.isShow = true
+      })
+    },
+    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.fetchData(this.timeRange)
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+  .container{
+    position:relative;
+    .function{
+      width:calc(100% - 120px);
+      height: 28px;
+      display: flex;
+      justify-content: center;
+    }
+  }
+  .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/gasDashboard/components/gasCountByDay.vue b/src/views/gasDashboard/components/gasCountByDay.vue
new file mode 100644
index 0000000..79a4efb
--- /dev/null
+++ b/src/views/gasDashboard/components/gasCountByDay.vue
@@ -0,0 +1,146 @@
+<template>
+  <div class="container">
+    <ve-line :data="chartData" :title="title" :extend="extend" :settings="chartSettings"/>
+  </div>
+</template>
+
+<script>
+import { getDayTime } from '@/utils/dateutils'
+import { countByDaySecond } from '@/api/gasOverview'
+import { getDoorAreaTree } from '@/api/system/area'
+export default {
+  name: 'GasCountByDay',
+  props: {
+    query: {
+      type: Object,
+      default: () => {
+        return {
+          areaId: '',
+          startTime: '',
+          endTime: ''
+        }
+      }
+    }
+  },
+  data() {
+    return {
+      listQuery: {
+        startTime: '',
+        endTime: ''
+      },
+      title: {
+        text: '用气走势图'
+      },
+      chartSettings: {
+        labelMap: { date: '日期' },
+        metrics: [],
+        dimension: ['date']
+      },
+      extend: {
+        grid: {
+          top: 120
+        },
+        yAxis: {
+          name: '用气量（吨）',
+          position: 'left'
+        },
+        legend: {
+          // type: 'scroll',
+          top: '40px'
+        }
+      },
+      chartData: {
+        columns: [],
+        rows: []
+      }
+    }
+  },
+  watch: {
+    query(val) {
+      this.fetchData()
+    }
+  },
+  mounted() {
+    // this.changeTime('month')
+    // this.fetchArea()
+  },
+  methods: {
+    // 废弃
+    fetchArea() {
+      getDoorAreaTree().then(response => {
+        if (response.code === 200) {
+          debugger
+          const area = response.data.filter(item => {
+            return item.pid === '1'
+          }).map(item => item.name)
+          this.chartSettings.metrics = area
+          this.chartSettings.labelMap = {}
+          for (let i = 0; i < area.length; i++) {
+            this.chartSettings.labelMap[area[i]] = area[i]
+          }
+          this.chartData.columns = ['date', ...area]
+          this.fetchData()
+        }
+      })
+    },
+    // 获取数据
+    fetchData() {
+      countByDaySecond(this.query).then(response => {
+        console.log(response, '=====用气走势图====')
+        if (response.data.length > 0) {
+          const arr = response.data.map((item) => {
+            const result = { date: item.date }
+            for (let i = 0; i < item.data.length; i++) {
+              result[item.data[i].areaName] = item.data[i].count
+            }
+            return result
+          })
+          const area = response.data[0].data.map(item => item.areaName)
+          this.chartData.columns = ['date', ...area]
+          this.chartSettings.metrics = area
+          this.chartSettings.labelMap = { 'date': '日期' }
+          this.chartData.rows = arr
+        }
+      })
+      // 模拟数据
+      // this.chartData.rows = [
+      //   { date: '11月29日', dept1: 153, dept2: 43, dept3: 1, dept4: 1, dept5: 1, dept6: 7, dept7: 6, dept8: 2, dept9: 1, dept10: 3 },
+      //   { date: '11月30日', dept1: 150, dept2: 30, dept3: 2, dept4: 1, dept5: 4, dept6: 6, dept7: 3, dept8: 2, dept9: 1, dept10: 3 },
+      //   { date: '12月1日 ', dept1: 143, dept2: 23, dept3: 3, dept4: 2, dept5: 2, dept6: 7, dept7: 3, dept8: 2, dept9: 1, dept10: 3 },
+      //   { date: '12月2日 ', dept1: 173, dept2: 23, dept3: 4, dept4: 4, dept5: 1, dept6: 1, dept7: 8, dept8: 2, dept9: 1, dept10: 3 },
+      //   { date: '12月3日 ', dept1: 272, dept2: 52, dept3: 5, dept4: 1, dept5: 4, dept6: 7, dept7: 9, dept8: 2, dept9: 1, dept10: 3 },
+      //   { date: '12月4日 ', dept1: 253, dept2: 53, dept3: 6, dept4: 5, dept5: 5, dept6: 2, dept7: 9, dept8: 2, dept9: 1, dept10: 3 }
+      // ]
+    },
+    changeTime(timeType) {
+      let startTime
+      switch (timeType) {
+        case 'year':
+          startTime = getDayTime(new Date().getTime() - 24 * 365 * 60 * 60 * 1000)
+          this.listQuery.startTime = startTime.Format('yyyy-MM-dd')
+          break
+        case 'halfyear':
+          startTime = getDayTime(new Date().getTime() - 24 * 182 * 60 * 60 * 1000)
+          this.listQuery.startTime = startTime.Format('yyyy-MM-dd')
+          break
+        case '3month':
+          startTime = getDayTime(new Date().getTime() - 24 * 90 * 60 * 60 * 1000)
+          this.listQuery.startTime = startTime.Format('yyyy-MM-dd')
+          break
+        case 'month':
+          startTime = getDayTime(new Date().getTime() - 24 * 30 * 60 * 60 * 1000)
+          this.listQuery.startTime = startTime.Format('yyyy-MM-dd')
+          break
+        case 'week':
+          startTime = getDayTime(new Date().getTime() - 24 * 7 * 60 * 60 * 1000)
+          this.listQuery.startTime = startTime.Format('yyyy-MM-dd')
+          break
+      }
+      const endTime = new Date()
+      this.listQuery.endTime = endTime.Format('yyyy-MM-dd')
+      this.fetchData()
+    }
+  }
+}
+</script>
+
diff --git a/src/views/gasDashboard/components/gasCountByDept.vue b/src/views/gasDashboard/components/gasCountByDept.vue
new file mode 100644
index 0000000..31c8508
--- /dev/null
+++ b/src/views/gasDashboard/components/gasCountByDept.vue
@@ -0,0 +1,126 @@
+<!--suppress ALL -->
+<template>
+  <div class="container">
+    <ve-pie :data="chartData" :extend="extend" :title="title"/>
+  </div>
+</template>
+
+<script>
+import { countBySecondArea } from '@/api/gasOverview'
+import { getDoorAreaTree } from '@/api/system/area'
+export default {
+  name: 'GasCountByDept',
+  props: {
+    query: {
+      type: Object,
+      default: () => {
+        return {
+          areaId: '',
+          startTime: '',
+          endTime: ''
+        }
+      }
+    }
+  },
+  data() {
+    return {
+      listQuery: {
+        areaId: '',
+        startTime: '',
+        endTime: ''
+      },
+      areaId: '',
+      areaList: [],
+      chartData: {
+        columns: ['areaName', 'count'],
+        rows: []
+      },
+      extend: {
+        grid: {
+          right: '30%'
+        },
+        legend: {
+          type: 'scroll',
+          top: '60px',
+          right: '0px',
+          orient: 'vertical'
+        },
+        series: {
+          label: { show: true, position: 'outside', formatter: '{b}' },
+          right: 120
+        },
+        tooltip: { trigger: 'item', formatter: '{b}<br/>用气量：{c}吨<br/>占比：{d}%' }
+      },
+      title: {
+        text: '分区用气占比图'
+      },
+      chartSettings: {
+        labelMap: {
+          'areaName': '分区',
+          'count': '用气量'
+        },
+        dimension: 'areaName',
+        metrics: 'count'
+      }
+    }
+  },
+  watch: {
+    query(val) {
+      this.fetchData()
+    }
+  },
+  mounted() {
+    // TODO:待调试真接口
+    // 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()
+    },
+    // 获取统计数据
+    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
+      })
+    }
+  }
+}
+</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/gasDashboard/components/gasNote.vue b/src/views/gasDashboard/components/gasNote.vue
new file mode 100644
index 0000000..5ade90f
--- /dev/null
+++ b/src/views/gasDashboard/components/gasNote.vue
@@ -0,0 +1,149 @@
+<!--用水事记L -->
+<template>
+  <div class="container">
+    <div class="title">
+      场区用气事记
+      <i v-if="!editMode" class="el-icon-edit edit-btn" style="float:right" @click="editNote" />
+      <i v-else class="el-icon-check edit-btn" style="float:right" @click="saveNote" />
+    </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" />
+            <div style="width: 85px;display: flex;justify-content: flex-end">
+              <i v-show="index!==0" class="el-icon-top" @click="toTop(index)" />
+              <i v-show="index!==currentList.length-1" class="el-icon-bottom" @click="toBottom(index)" />
+              <i class="el-icon-delete" @click="deleteItem(index)" />
+            </div>
+          </div>
+        </div>
+        <div v-if="editMode&&currentList.length<10" class="content-line">
+          <i class="el-icon-circle-plus-outline icon-btn" @click="addItem()" />
+        </div>
+      </el-scrollbar>
+    </div>
+  </div>
+</template>
+
+<script>
+import { getNoteList, updateNoteList } from '@/api/dashboard'
+export default {
+  name: 'GasNote',
+  props: {
+    query: {
+      type: Object,
+      default: () => {
+        return {
+          areaId: '',
+          startTime: '',
+          endTime: ''
+        }
+      }
+    }
+  },
+  data() {
+    return {
+      editMode: false, // 编辑模式
+      originList: [], // 原始列表
+      currentList: [] // 当前列表
+    }
+  },
+  mounted() {
+    this.fetchData()
+  },
+  methods: {
+    // 获取统计数据
+    fetchData() {
+      // this.currentList = [
+      //   { 'content': '测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试', 'num': 1 },
+      //   { 'content': '测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试', 'num': 1 },
+      //   { 'content': '测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试', 'num': 1 },
+      //   { 'content': '测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试', 'num': 1 },
+      //   { 'content': '测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试', 'num': 1 }
+      // ]
+      // this.originList = JSON.parse(JSON.stringify(this.currentList))
+      getNoteList('2').then(response => {
+        this.currentList = JSON.parse(response.data[0].notes)
+      })
+    },
+    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 }
+      })
+      const params = {
+        type: '2',
+        list: currentList
+      }
+      updateNoteList(params).then(res => {
+        this.editMode = false
+        this.$message.success('保存成功')
+      }).catch(e => {
+        // this.currentList = JSON.parse(JSON.stringify(this.originList))
+      })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+  @import "@/styles/variables.scss";
+  .container{
+    position:relative;
+    height: 428px;
+    display: flex;
+    flex-direction: column;
+    .title{
+      font-weight: bolder;
+      font-size: 18px;
+      font-family: sans-serif;
+      color: #333;
+    }
+    .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/gasDashboard/components/watchAlarmBar.vue b/src/views/gasDashboard/components/watchAlarmBar.vue
index 8857807..4279440 100644
--- a/src/views/gasDashboard/components/watchAlarmBar.vue
+++ b/src/views/gasDashboard/components/watchAlarmBar.vue
@@ -2,33 +2,7 @@
 <template>
   <div class="container">
     <function-area ref="func" select="week" @change="fetchData"/>
-    <!--<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>-->
     <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>
 </template>
 
@@ -42,10 +16,10 @@
   components: { FunctionArea },
   data() {
     return {
-      title:{
+      title: {
         text: '气体流量计告警统计'
       },
-      chartSettings:{
+      chartSettings: {
         itemStyle: {
           barCategoryGap: 0
         },
@@ -83,7 +57,7 @@
         series: {
           label: { show: true, position: 'top', formatter: '{c}' },
           barWidth: 20
-        },
+        }
         // tooltip: { trigger: 'item', formatter: '{b}<br/>报警次数：{c}次' }
       },
       areaId: '',
diff --git a/src/views/gasDashboard/components/watchGasAlarmBar.vue b/src/views/gasDashboard/components/watchGasAlarmBar.vue
index 54783cc..0113341 100644
--- a/src/views/gasDashboard/components/watchGasAlarmBar.vue
+++ b/src/views/gasDashboard/components/watchGasAlarmBar.vue
@@ -1,14 +1,20 @@
 <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"/>
+    <ve-histogram
+      :data="chartData"
+      :grid="grid"
+      :extend="extend"
+      :title="title"
+      :settings="chartSettings"
+    />
   </div>
 </template>
 
 <script>
 // 引入视觉映射组件
 import 'echarts/lib/component/visualMap'
-import { alarmBySecondArea } from '@/api/gasOverview'
+import { gasAlarmBySecondArea } from '@/api/gasOverview'
 import functionArea from './FunctionArea'
 export default {
   name: 'WatchGasAlarmBar',
@@ -18,26 +24,7 @@
       title: {
         text: '燃气告警统计'
       },
-      chartSettings: {
-        itemStyle: {
-          barCategoryGap: 0
-        },
-        labelMap: {
-          'areaName': '分区',
-          'alarm': '报警数'
-        },
-        dimension: ['areaName'],
-        metrics: ['alarm']
-      },
-      grid: {
-        right: 40,
-        top: 80,
-        bottom: 5
-      },
       extend: {
-        legend: {
-          show: true
-        },
         xAxis: {
           axisLabel: {
             rotate: 30,
@@ -53,31 +40,34 @@
           max: 10
         },
         series: {
-          label: { show: true, position: 'top', formatter: '{c}' },
-          barWidth: 20
+          label: { show: true, position: 'top' },
+          barMaxWidth: 35 // 最大柱宽度
         }
-        // tooltip: { trigger: 'item', formatter: '{b}<br/>报警次数：{c}次' }
+      },
+      grid: {
+        right: 60
+      },
+      chartSettings: {
+        itemStyle: {
+          'barCategoryGap': 5
+        },
+        barWidth: 15,
+        labelMap: {
+          'areaName': '区域',
+          'alarm': '报警数'
+        },
+        dimension: ['areaName'],
+        metrics: ['alarm']
+      },
+      chartData: {
+        columns: ['areaName', 'alarm'],
+        rows: []
       },
       areaId: '',
       areaList: [],
       isShow: true,
       defaultTimeRange: [],
-      timeRange: [],
-      pickerOptions: {
-        disabledDate: function(date) {
-          var oDate1 = new Date(date)
-          var oDate2 = new Date()
-          if (oDate1.getTime() > oDate2.getTime()) {
-            return true
-          } else {
-            return false
-          }
-        }
-      },
-      chartData: {
-        columns: ['areaName', 'alarm'],
-        rows: []
-      }
+      timeRange: []
     }
   },
   mounted() {
@@ -93,15 +83,9 @@
         endTime: timeRange[1]
       }
       this.$emit('change', params)
-      alarmBySecondArea(params).then(response => {
+      gasAlarmBySecondArea(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.max = maxValue + 1
-        }
         this.isShow = true
       })
     }
diff --git a/src/views/gasDashboard/components/waterCompare.vue b/src/views/gasDashboard/components/waterCompare.vue
deleted file mode 100644
index 11f0a7d..0000000
--- a/src/views/gasDashboard/components/waterCompare.vue
+++ /dev/null
@@ -1,121 +0,0 @@
-<!--分区用气对比图-->
-<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 { waterCompare } from '@/api/gasOverview'
-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: true
-        },
-        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, type) {
-      const params = {
-        areaId: '110000',
-        type: type || 'other',
-        startTime: timeRange[0],
-        endTime: timeRange[1]
-      }
-      waterCompare(params).then(response => {
-        this.isShow = false
-        this.chartSettings.labelMap = {
-          areaName: '分区',
-          last: response.data[0].lastTime,
-          now: response.data[0].nowTime
-        }
-        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.max = 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/gasOverview.js b/src/api/gasOverview.js
index a8996f5..b7da600 100644
--- a/src/api/gasOverview.js
+++ b/src/api/gasOverview.js
@@ -53,8 +53,24 @@
     params
   })
 }
-// 查询二级分区各区用水量对比
-export function waterCompare(params) {
+// 查询二级分区燃气告警
+export function gasAlarmBySecondArea(params) {
+  return request({
+    url: 'dataStatistic/gasAlarmBySecondArea',
+    method: 'get',
+    params
+  })
+}
+// 各设备腐蚀速率统计
+export function corrRateByDevice(params) {
+  return request({
+    url: 'statics/corrRateByDevice',
+    method: 'get',
+    params
+  })
+}
+// 查询二级分区用气对比
+export function gasCompareData(params) {
   return request({
     url: 'gasStatistic/gasCompare',
     method: 'get',
diff --git a/src/views/gasDashboard/components/alarmGasCountByDept.vue b/src/views/gasDashboard/components/alarmGasCountByDept.vue
index 60ab5ad..b8bfc23 100644
--- a/src/views/gasDashboard/components/alarmGasCountByDept.vue
+++ b/src/views/gasDashboard/components/alarmGasCountByDept.vue
@@ -8,7 +8,7 @@
 </template>
 
 <script>
-import { alarmBySecondArea } from '@/api/gasOverview'
+import { gasAlarmBySecondArea } from '@/api/gasOverview'
 export default {
   name: 'AlarmGasCountByDept',
   props: {
@@ -64,7 +64,7 @@
   methods: {
     // 获取统计数据
     fetchData() {
-      alarmBySecondArea(this.query).then(response => {
+      gasAlarmBySecondArea(this.query).then(response => {
         this.chartData.rows = response.data
       })
     }
diff --git a/src/views/gasDashboard/components/corrodeCountByDay.vue b/src/views/gasDashboard/components/corrodeCountByDay.vue
index 3a97391..82c29bf 100644
--- a/src/views/gasDashboard/components/corrodeCountByDay.vue
+++ b/src/views/gasDashboard/components/corrodeCountByDay.vue
@@ -1,13 +1,30 @@
+<!--腐蚀速率走势图-->
 <template>
   <div class="container">
-    <ve-line :data="chartData" :title="title" :extend="extend" :settings="chartSettings"/>
+    <!-- <function-area
+      ref="func"
+      select="week"
+      @change="fetchData"
+    /> -->
+    <function-area
+      ref="func"
+      select="week"
+    />
+    <ve-line
+      :data="chartData"
+      :title="title"
+      :extend="extend"
+      :settings="chartSettings"
+    />
   </div>
 </template>
 
 <script>
-import { countByDaySecond } from '@/api/gasOverview'
+import FunctionArea from './FunctionArea'
+import { corrRateByDevice } from '@/api/gasOverview'
 export default {
-  name: 'WaterCountByDay',
+  name: 'CorrodeCountByDay',
+  components: { FunctionArea },
   props: {
     query: {
       type: Object,
@@ -22,10 +39,6 @@
   },
   data() {
     return {
-      listQuery: {
-        startTime: '',
-        endTime: ''
-      },
       title: {
         text: '腐蚀速率走势图'
       },
@@ -53,24 +66,62 @@
       }
     }
   },
-  watch: {
-    query(val) {
-      this.fetchData()
-    }
+  mounted() {
+    this.$refs.func.init()
+    this.getData()
   },
   methods: {
+    // 模拟数据
+    getData() {
+      const res = [
+        {
+          'date': '2021-10-01',
+          'data': [
+            { 'devcode': '1111', 'data': 10 },
+            { 'devcode': '1112', 'data': 2 },
+            { 'devcode': '1113', 'data': 3 }
+          ]
+        },
+        {
+          'date': '2021-10-02',
+          'data': [
+            { 'devcode': '1111', 'data': 1 },
+            { 'devcode': '1112', 'data': 6 },
+            { 'devcode': '1113', 'data': 1 }
+          ]
+        }
+      ]
+      const arr = res.map((item) => {
+        const result = { date: item.date }
+        for (let i = 0; i < item.data.length; i++) {
+          result[item.data[i].devcode] = item.data[i].data
+        }
+        return result
+      })
+      const area = res[0].data.map(item => item.devcode)
+      this.chartData.columns = ['date', ...area]
+      this.chartSettings.metrics = area
+      this.chartSettings.labelMap = { 'date': '日期' }
+      this.chartData.rows = arr
+    },
     // 获取数据
-    fetchData() {
-      countByDaySecond(this.query).then(response => {
+    fetchData(timeRange, type) {
+      const params = {
+        type: type || 'other',
+        beginTime: timeRange[0],
+        endTime: timeRange[1]
+      }
+      corrRateByDevice(params).then(response => {
+        console.log(response, '======腐蚀速率走势图response=====')
         if (response.data.length > 0) {
           const arr = response.data.map((item) => {
             const result = { date: item.date }
             for (let i = 0; i < item.data.length; i++) {
-              result[item.data[i].areaName] = item.data[i].count
+              result[item.data[i].devcode] = item.data[i].data
             }
             return result
           })
-          const area = response.data[0].data.map(item => item.areaName)
+          const area = response.data[0].data.map(item => item.devcode)
           this.chartData.columns = ['date', ...area]
           this.chartSettings.metrics = area
           this.chartSettings.labelMap = { 'date': '日期' }
diff --git a/src/views/gasDashboard/components/gasCompare.vue b/src/views/gasDashboard/components/gasCompare.vue
new file mode 100644
index 0000000..19a4398
--- /dev/null
+++ b/src/views/gasDashboard/components/gasCompare.vue
@@ -0,0 +1,121 @@
+<!--分区用气对比图-->
+<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 { gasCompareData } from '@/api/gasOverview'
+import FunctionArea from './FunctionArea'
+export default {
+  name: 'GasCompare',
+  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: true
+        },
+        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, type) {
+      const params = {
+        areaId: '110000',
+        type: type || 'other',
+        startTime: timeRange[0],
+        endTime: timeRange[1]
+      }
+      gasCompareData(params).then(response => {
+        this.isShow = false
+        this.chartSettings.labelMap = {
+          areaName: '分区',
+          last: response.data[0].lastTime,
+          now: response.data[0].nowTime
+        }
+        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.max = 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/gasDashboard/components/gasCountByAreaBar.vue b/src/views/gasDashboard/components/gasCountByAreaBar.vue
new file mode 100644
index 0000000..456a6c6
--- /dev/null
+++ b/src/views/gasDashboard/components/gasCountByAreaBar.vue
@@ -0,0 +1,198 @@
+<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 { countBySecondArea } from '@/api/gasOverview'
+import { getDayTime } from '@/utils/dateutils'
+import { getDoorAreaTree } from '@/api/system/area'
+import FunctionArea from './FunctionArea'
+
+export default {
+  name: 'GasCountByAreaBar',
+  components: { FunctionArea },
+  data() {
+    this.extend = {
+      legend: {
+        show: true
+      },
+      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': '分区',
+        'count': '用气量'
+      },
+      dimension: ['areaName'],
+      metrics: ['count']
+    }
+    return {
+      areaId: '',
+      areaList: [],
+      isShow: true,
+      defaultTimeRange: [],
+      timeRange: [],
+      pickerOptions: {
+        disabledDate: function(date) {
+          var oDate1 = new Date(date)
+          var oDate2 = new Date()
+          if (oDate1.getTime() > oDate2.getTime()) {
+            return true
+          } else {
+            return false
+          }
+        }
+      },
+      chartData: {
+        columns: ['wellTypeName', 'count'],
+        rows: []
+      }
+    }
+  },
+  mounted() {
+    this.$refs.func.init()
+    // this.setDefaultTime('week')
+    // 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()
+    },
+    fetchData(timeRange) {
+      const params = {
+        areaId: '110000',
+        startTime: timeRange[0],
+        endTime: timeRange[1]
+      }
+      this.$emit('change', params)
+      countBySecondArea(params).then(response => {
+        this.isShow = false
+        this.chartData.rows = response.data
+        this.isShow = true
+      })
+    },
+    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.fetchData(this.timeRange)
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+  .container{
+    position:relative;
+    .function{
+      width:calc(100% - 120px);
+      height: 28px;
+      display: flex;
+      justify-content: center;
+    }
+  }
+  .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/gasDashboard/components/gasCountByDay.vue b/src/views/gasDashboard/components/gasCountByDay.vue
new file mode 100644
index 0000000..79a4efb
--- /dev/null
+++ b/src/views/gasDashboard/components/gasCountByDay.vue
@@ -0,0 +1,146 @@
+<template>
+  <div class="container">
+    <ve-line :data="chartData" :title="title" :extend="extend" :settings="chartSettings"/>
+  </div>
+</template>
+
+<script>
+import { getDayTime } from '@/utils/dateutils'
+import { countByDaySecond } from '@/api/gasOverview'
+import { getDoorAreaTree } from '@/api/system/area'
+export default {
+  name: 'GasCountByDay',
+  props: {
+    query: {
+      type: Object,
+      default: () => {
+        return {
+          areaId: '',
+          startTime: '',
+          endTime: ''
+        }
+      }
+    }
+  },
+  data() {
+    return {
+      listQuery: {
+        startTime: '',
+        endTime: ''
+      },
+      title: {
+        text: '用气走势图'
+      },
+      chartSettings: {
+        labelMap: { date: '日期' },
+        metrics: [],
+        dimension: ['date']
+      },
+      extend: {
+        grid: {
+          top: 120
+        },
+        yAxis: {
+          name: '用气量（吨）',
+          position: 'left'
+        },
+        legend: {
+          // type: 'scroll',
+          top: '40px'
+        }
+      },
+      chartData: {
+        columns: [],
+        rows: []
+      }
+    }
+  },
+  watch: {
+    query(val) {
+      this.fetchData()
+    }
+  },
+  mounted() {
+    // this.changeTime('month')
+    // this.fetchArea()
+  },
+  methods: {
+    // 废弃
+    fetchArea() {
+      getDoorAreaTree().then(response => {
+        if (response.code === 200) {
+          debugger
+          const area = response.data.filter(item => {
+            return item.pid === '1'
+          }).map(item => item.name)
+          this.chartSettings.metrics = area
+          this.chartSettings.labelMap = {}
+          for (let i = 0; i < area.length; i++) {
+            this.chartSettings.labelMap[area[i]] = area[i]
+          }
+          this.chartData.columns = ['date', ...area]
+          this.fetchData()
+        }
+      })
+    },
+    // 获取数据
+    fetchData() {
+      countByDaySecond(this.query).then(response => {
+        console.log(response, '=====用气走势图====')
+        if (response.data.length > 0) {
+          const arr = response.data.map((item) => {
+            const result = { date: item.date }
+            for (let i = 0; i < item.data.length; i++) {
+              result[item.data[i].areaName] = item.data[i].count
+            }
+            return result
+          })
+          const area = response.data[0].data.map(item => item.areaName)
+          this.chartData.columns = ['date', ...area]
+          this.chartSettings.metrics = area
+          this.chartSettings.labelMap = { 'date': '日期' }
+          this.chartData.rows = arr
+        }
+      })
+      // 模拟数据
+      // this.chartData.rows = [
+      //   { date: '11月29日', dept1: 153, dept2: 43, dept3: 1, dept4: 1, dept5: 1, dept6: 7, dept7: 6, dept8: 2, dept9: 1, dept10: 3 },
+      //   { date: '11月30日', dept1: 150, dept2: 30, dept3: 2, dept4: 1, dept5: 4, dept6: 6, dept7: 3, dept8: 2, dept9: 1, dept10: 3 },
+      //   { date: '12月1日 ', dept1: 143, dept2: 23, dept3: 3, dept4: 2, dept5: 2, dept6: 7, dept7: 3, dept8: 2, dept9: 1, dept10: 3 },
+      //   { date: '12月2日 ', dept1: 173, dept2: 23, dept3: 4, dept4: 4, dept5: 1, dept6: 1, dept7: 8, dept8: 2, dept9: 1, dept10: 3 },
+      //   { date: '12月3日 ', dept1: 272, dept2: 52, dept3: 5, dept4: 1, dept5: 4, dept6: 7, dept7: 9, dept8: 2, dept9: 1, dept10: 3 },
+      //   { date: '12月4日 ', dept1: 253, dept2: 53, dept3: 6, dept4: 5, dept5: 5, dept6: 2, dept7: 9, dept8: 2, dept9: 1, dept10: 3 }
+      // ]
+    },
+    changeTime(timeType) {
+      let startTime
+      switch (timeType) {
+        case 'year':
+          startTime = getDayTime(new Date().getTime() - 24 * 365 * 60 * 60 * 1000)
+          this.listQuery.startTime = startTime.Format('yyyy-MM-dd')
+          break
+        case 'halfyear':
+          startTime = getDayTime(new Date().getTime() - 24 * 182 * 60 * 60 * 1000)
+          this.listQuery.startTime = startTime.Format('yyyy-MM-dd')
+          break
+        case '3month':
+          startTime = getDayTime(new Date().getTime() - 24 * 90 * 60 * 60 * 1000)
+          this.listQuery.startTime = startTime.Format('yyyy-MM-dd')
+          break
+        case 'month':
+          startTime = getDayTime(new Date().getTime() - 24 * 30 * 60 * 60 * 1000)
+          this.listQuery.startTime = startTime.Format('yyyy-MM-dd')
+          break
+        case 'week':
+          startTime = getDayTime(new Date().getTime() - 24 * 7 * 60 * 60 * 1000)
+          this.listQuery.startTime = startTime.Format('yyyy-MM-dd')
+          break
+      }
+      const endTime = new Date()
+      this.listQuery.endTime = endTime.Format('yyyy-MM-dd')
+      this.fetchData()
+    }
+  }
+}
+</script>
+
diff --git a/src/views/gasDashboard/components/gasCountByDept.vue b/src/views/gasDashboard/components/gasCountByDept.vue
new file mode 100644
index 0000000..31c8508
--- /dev/null
+++ b/src/views/gasDashboard/components/gasCountByDept.vue
@@ -0,0 +1,126 @@
+<!--suppress ALL -->
+<template>
+  <div class="container">
+    <ve-pie :data="chartData" :extend="extend" :title="title"/>
+  </div>
+</template>
+
+<script>
+import { countBySecondArea } from '@/api/gasOverview'
+import { getDoorAreaTree } from '@/api/system/area'
+export default {
+  name: 'GasCountByDept',
+  props: {
+    query: {
+      type: Object,
+      default: () => {
+        return {
+          areaId: '',
+          startTime: '',
+          endTime: ''
+        }
+      }
+    }
+  },
+  data() {
+    return {
+      listQuery: {
+        areaId: '',
+        startTime: '',
+        endTime: ''
+      },
+      areaId: '',
+      areaList: [],
+      chartData: {
+        columns: ['areaName', 'count'],
+        rows: []
+      },
+      extend: {
+        grid: {
+          right: '30%'
+        },
+        legend: {
+          type: 'scroll',
+          top: '60px',
+          right: '0px',
+          orient: 'vertical'
+        },
+        series: {
+          label: { show: true, position: 'outside', formatter: '{b}' },
+          right: 120
+        },
+        tooltip: { trigger: 'item', formatter: '{b}<br/>用气量：{c}吨<br/>占比：{d}%' }
+      },
+      title: {
+        text: '分区用气占比图'
+      },
+      chartSettings: {
+        labelMap: {
+          'areaName': '分区',
+          'count': '用气量'
+        },
+        dimension: 'areaName',
+        metrics: 'count'
+      }
+    }
+  },
+  watch: {
+    query(val) {
+      this.fetchData()
+    }
+  },
+  mounted() {
+    // TODO:待调试真接口
+    // 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()
+    },
+    // 获取统计数据
+    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
+      })
+    }
+  }
+}
+</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/gasDashboard/components/gasNote.vue b/src/views/gasDashboard/components/gasNote.vue
new file mode 100644
index 0000000..5ade90f
--- /dev/null
+++ b/src/views/gasDashboard/components/gasNote.vue
@@ -0,0 +1,149 @@
+<!--用水事记L -->
+<template>
+  <div class="container">
+    <div class="title">
+      场区用气事记
+      <i v-if="!editMode" class="el-icon-edit edit-btn" style="float:right" @click="editNote" />
+      <i v-else class="el-icon-check edit-btn" style="float:right" @click="saveNote" />
+    </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" />
+            <div style="width: 85px;display: flex;justify-content: flex-end">
+              <i v-show="index!==0" class="el-icon-top" @click="toTop(index)" />
+              <i v-show="index!==currentList.length-1" class="el-icon-bottom" @click="toBottom(index)" />
+              <i class="el-icon-delete" @click="deleteItem(index)" />
+            </div>
+          </div>
+        </div>
+        <div v-if="editMode&&currentList.length<10" class="content-line">
+          <i class="el-icon-circle-plus-outline icon-btn" @click="addItem()" />
+        </div>
+      </el-scrollbar>
+    </div>
+  </div>
+</template>
+
+<script>
+import { getNoteList, updateNoteList } from '@/api/dashboard'
+export default {
+  name: 'GasNote',
+  props: {
+    query: {
+      type: Object,
+      default: () => {
+        return {
+          areaId: '',
+          startTime: '',
+          endTime: ''
+        }
+      }
+    }
+  },
+  data() {
+    return {
+      editMode: false, // 编辑模式
+      originList: [], // 原始列表
+      currentList: [] // 当前列表
+    }
+  },
+  mounted() {
+    this.fetchData()
+  },
+  methods: {
+    // 获取统计数据
+    fetchData() {
+      // this.currentList = [
+      //   { 'content': '测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试', 'num': 1 },
+      //   { 'content': '测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试', 'num': 1 },
+      //   { 'content': '测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试', 'num': 1 },
+      //   { 'content': '测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试', 'num': 1 },
+      //   { 'content': '测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试', 'num': 1 }
+      // ]
+      // this.originList = JSON.parse(JSON.stringify(this.currentList))
+      getNoteList('2').then(response => {
+        this.currentList = JSON.parse(response.data[0].notes)
+      })
+    },
+    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 }
+      })
+      const params = {
+        type: '2',
+        list: currentList
+      }
+      updateNoteList(params).then(res => {
+        this.editMode = false
+        this.$message.success('保存成功')
+      }).catch(e => {
+        // this.currentList = JSON.parse(JSON.stringify(this.originList))
+      })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+  @import "@/styles/variables.scss";
+  .container{
+    position:relative;
+    height: 428px;
+    display: flex;
+    flex-direction: column;
+    .title{
+      font-weight: bolder;
+      font-size: 18px;
+      font-family: sans-serif;
+      color: #333;
+    }
+    .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/gasDashboard/components/watchAlarmBar.vue b/src/views/gasDashboard/components/watchAlarmBar.vue
index 8857807..4279440 100644
--- a/src/views/gasDashboard/components/watchAlarmBar.vue
+++ b/src/views/gasDashboard/components/watchAlarmBar.vue
@@ -2,33 +2,7 @@
 <template>
   <div class="container">
     <function-area ref="func" select="week" @change="fetchData"/>
-    <!--<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>-->
     <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>
 </template>
 
@@ -42,10 +16,10 @@
   components: { FunctionArea },
   data() {
     return {
-      title:{
+      title: {
         text: '气体流量计告警统计'
       },
-      chartSettings:{
+      chartSettings: {
         itemStyle: {
           barCategoryGap: 0
         },
@@ -83,7 +57,7 @@
         series: {
           label: { show: true, position: 'top', formatter: '{c}' },
           barWidth: 20
-        },
+        }
         // tooltip: { trigger: 'item', formatter: '{b}<br/>报警次数：{c}次' }
       },
       areaId: '',
diff --git a/src/views/gasDashboard/components/watchGasAlarmBar.vue b/src/views/gasDashboard/components/watchGasAlarmBar.vue
index 54783cc..0113341 100644
--- a/src/views/gasDashboard/components/watchGasAlarmBar.vue
+++ b/src/views/gasDashboard/components/watchGasAlarmBar.vue
@@ -1,14 +1,20 @@
 <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"/>
+    <ve-histogram
+      :data="chartData"
+      :grid="grid"
+      :extend="extend"
+      :title="title"
+      :settings="chartSettings"
+    />
   </div>
 </template>
 
 <script>
 // 引入视觉映射组件
 import 'echarts/lib/component/visualMap'
-import { alarmBySecondArea } from '@/api/gasOverview'
+import { gasAlarmBySecondArea } from '@/api/gasOverview'
 import functionArea from './FunctionArea'
 export default {
   name: 'WatchGasAlarmBar',
@@ -18,26 +24,7 @@
       title: {
         text: '燃气告警统计'
       },
-      chartSettings: {
-        itemStyle: {
-          barCategoryGap: 0
-        },
-        labelMap: {
-          'areaName': '分区',
-          'alarm': '报警数'
-        },
-        dimension: ['areaName'],
-        metrics: ['alarm']
-      },
-      grid: {
-        right: 40,
-        top: 80,
-        bottom: 5
-      },
       extend: {
-        legend: {
-          show: true
-        },
         xAxis: {
           axisLabel: {
             rotate: 30,
@@ -53,31 +40,34 @@
           max: 10
         },
         series: {
-          label: { show: true, position: 'top', formatter: '{c}' },
-          barWidth: 20
+          label: { show: true, position: 'top' },
+          barMaxWidth: 35 // 最大柱宽度
         }
-        // tooltip: { trigger: 'item', formatter: '{b}<br/>报警次数：{c}次' }
+      },
+      grid: {
+        right: 60
+      },
+      chartSettings: {
+        itemStyle: {
+          'barCategoryGap': 5
+        },
+        barWidth: 15,
+        labelMap: {
+          'areaName': '区域',
+          'alarm': '报警数'
+        },
+        dimension: ['areaName'],
+        metrics: ['alarm']
+      },
+      chartData: {
+        columns: ['areaName', 'alarm'],
+        rows: []
       },
       areaId: '',
       areaList: [],
       isShow: true,
       defaultTimeRange: [],
-      timeRange: [],
-      pickerOptions: {
-        disabledDate: function(date) {
-          var oDate1 = new Date(date)
-          var oDate2 = new Date()
-          if (oDate1.getTime() > oDate2.getTime()) {
-            return true
-          } else {
-            return false
-          }
-        }
-      },
-      chartData: {
-        columns: ['areaName', 'alarm'],
-        rows: []
-      }
+      timeRange: []
     }
   },
   mounted() {
@@ -93,15 +83,9 @@
         endTime: timeRange[1]
       }
       this.$emit('change', params)
-      alarmBySecondArea(params).then(response => {
+      gasAlarmBySecondArea(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.max = maxValue + 1
-        }
         this.isShow = true
       })
     }
diff --git a/src/views/gasDashboard/components/waterCompare.vue b/src/views/gasDashboard/components/waterCompare.vue
deleted file mode 100644
index 11f0a7d..0000000
--- a/src/views/gasDashboard/components/waterCompare.vue
+++ /dev/null
@@ -1,121 +0,0 @@
-<!--分区用气对比图-->
-<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 { waterCompare } from '@/api/gasOverview'
-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: true
-        },
-        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, type) {
-      const params = {
-        areaId: '110000',
-        type: type || 'other',
-        startTime: timeRange[0],
-        endTime: timeRange[1]
-      }
-      waterCompare(params).then(response => {
-        this.isShow = false
-        this.chartSettings.labelMap = {
-          areaName: '分区',
-          last: response.data[0].lastTime,
-          now: response.data[0].nowTime
-        }
-        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.max = 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/gasDashboard/components/waterCountByAreaBar.vue b/src/views/gasDashboard/components/waterCountByAreaBar.vue
deleted file mode 100644
index d02d54c..0000000
--- a/src/views/gasDashboard/components/waterCountByAreaBar.vue
+++ /dev/null
@@ -1,198 +0,0 @@
-<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 { countBySecondArea } from '@/api/gasOverview'
-import { getDayTime } from '@/utils/dateutils'
-import { getDoorAreaTree } from '@/api/system/area'
-import FunctionArea from './FunctionArea'
-
-export default {
-  name: 'WaterCountByAreaBar',
-  components: { FunctionArea },
-  data() {
-    this.extend = {
-      legend: {
-        show: true
-      },
-      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': '分区',
-        'count': '用气量'
-      },
-      dimension: ['areaName'],
-      metrics: ['count']
-    }
-    return {
-      areaId: '',
-      areaList: [],
-      isShow: true,
-      defaultTimeRange: [],
-      timeRange: [],
-      pickerOptions: {
-        disabledDate: function(date) {
-          var oDate1 = new Date(date)
-          var oDate2 = new Date()
-          if (oDate1.getTime() > oDate2.getTime()) {
-            return true
-          } else {
-            return false
-          }
-        }
-      },
-      chartData: {
-        columns: ['wellTypeName', 'count'],
-        rows: []
-      }
-    }
-  },
-  mounted() {
-    this.$refs.func.init()
-    // this.setDefaultTime('week')
-    // 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()
-    },
-    fetchData(timeRange) {
-      const params = {
-        areaId: '110000',
-        startTime: timeRange[0],
-        endTime: timeRange[1]
-      }
-      this.$emit('change', params)
-      countBySecondArea(params).then(response => {
-        this.isShow = false
-        this.chartData.rows = response.data
-        this.isShow = true
-      })
-    },
-    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.fetchData(this.timeRange)
-    }
-  }
-}
-</script>
-<style lang="scss" scoped>
-  .container{
-    position:relative;
-    .function{
-      width:calc(100% - 120px);
-      height: 28px;
-      display: flex;
-      justify-content: center;
-    }
-  }
-  .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/gasOverview.js b/src/api/gasOverview.js
index a8996f5..b7da600 100644
--- a/src/api/gasOverview.js
+++ b/src/api/gasOverview.js
@@ -53,8 +53,24 @@
     params
   })
 }
-// 查询二级分区各区用水量对比
-export function waterCompare(params) {
+// 查询二级分区燃气告警
+export function gasAlarmBySecondArea(params) {
+  return request({
+    url: 'dataStatistic/gasAlarmBySecondArea',
+    method: 'get',
+    params
+  })
+}
+// 各设备腐蚀速率统计
+export function corrRateByDevice(params) {
+  return request({
+    url: 'statics/corrRateByDevice',
+    method: 'get',
+    params
+  })
+}
+// 查询二级分区用气对比
+export function gasCompareData(params) {
   return request({
     url: 'gasStatistic/gasCompare',
     method: 'get',
diff --git a/src/views/gasDashboard/components/alarmGasCountByDept.vue b/src/views/gasDashboard/components/alarmGasCountByDept.vue
index 60ab5ad..b8bfc23 100644
--- a/src/views/gasDashboard/components/alarmGasCountByDept.vue
+++ b/src/views/gasDashboard/components/alarmGasCountByDept.vue
@@ -8,7 +8,7 @@
 </template>
 
 <script>
-import { alarmBySecondArea } from '@/api/gasOverview'
+import { gasAlarmBySecondArea } from '@/api/gasOverview'
 export default {
   name: 'AlarmGasCountByDept',
   props: {
@@ -64,7 +64,7 @@
   methods: {
     // 获取统计数据
     fetchData() {
-      alarmBySecondArea(this.query).then(response => {
+      gasAlarmBySecondArea(this.query).then(response => {
         this.chartData.rows = response.data
       })
     }
diff --git a/src/views/gasDashboard/components/corrodeCountByDay.vue b/src/views/gasDashboard/components/corrodeCountByDay.vue
index 3a97391..82c29bf 100644
--- a/src/views/gasDashboard/components/corrodeCountByDay.vue
+++ b/src/views/gasDashboard/components/corrodeCountByDay.vue
@@ -1,13 +1,30 @@
+<!--腐蚀速率走势图-->
 <template>
   <div class="container">
-    <ve-line :data="chartData" :title="title" :extend="extend" :settings="chartSettings"/>
+    <!-- <function-area
+      ref="func"
+      select="week"
+      @change="fetchData"
+    /> -->
+    <function-area
+      ref="func"
+      select="week"
+    />
+    <ve-line
+      :data="chartData"
+      :title="title"
+      :extend="extend"
+      :settings="chartSettings"
+    />
   </div>
 </template>
 
 <script>
-import { countByDaySecond } from '@/api/gasOverview'
+import FunctionArea from './FunctionArea'
+import { corrRateByDevice } from '@/api/gasOverview'
 export default {
-  name: 'WaterCountByDay',
+  name: 'CorrodeCountByDay',
+  components: { FunctionArea },
   props: {
     query: {
       type: Object,
@@ -22,10 +39,6 @@
   },
   data() {
     return {
-      listQuery: {
-        startTime: '',
-        endTime: ''
-      },
       title: {
         text: '腐蚀速率走势图'
       },
@@ -53,24 +66,62 @@
       }
     }
   },
-  watch: {
-    query(val) {
-      this.fetchData()
-    }
+  mounted() {
+    this.$refs.func.init()
+    this.getData()
   },
   methods: {
+    // 模拟数据
+    getData() {
+      const res = [
+        {
+          'date': '2021-10-01',
+          'data': [
+            { 'devcode': '1111', 'data': 10 },
+            { 'devcode': '1112', 'data': 2 },
+            { 'devcode': '1113', 'data': 3 }
+          ]
+        },
+        {
+          'date': '2021-10-02',
+          'data': [
+            { 'devcode': '1111', 'data': 1 },
+            { 'devcode': '1112', 'data': 6 },
+            { 'devcode': '1113', 'data': 1 }
+          ]
+        }
+      ]
+      const arr = res.map((item) => {
+        const result = { date: item.date }
+        for (let i = 0; i < item.data.length; i++) {
+          result[item.data[i].devcode] = item.data[i].data
+        }
+        return result
+      })
+      const area = res[0].data.map(item => item.devcode)
+      this.chartData.columns = ['date', ...area]
+      this.chartSettings.metrics = area
+      this.chartSettings.labelMap = { 'date': '日期' }
+      this.chartData.rows = arr
+    },
     // 获取数据
-    fetchData() {
-      countByDaySecond(this.query).then(response => {
+    fetchData(timeRange, type) {
+      const params = {
+        type: type || 'other',
+        beginTime: timeRange[0],
+        endTime: timeRange[1]
+      }
+      corrRateByDevice(params).then(response => {
+        console.log(response, '======腐蚀速率走势图response=====')
         if (response.data.length > 0) {
           const arr = response.data.map((item) => {
             const result = { date: item.date }
             for (let i = 0; i < item.data.length; i++) {
-              result[item.data[i].areaName] = item.data[i].count
+              result[item.data[i].devcode] = item.data[i].data
             }
             return result
           })
-          const area = response.data[0].data.map(item => item.areaName)
+          const area = response.data[0].data.map(item => item.devcode)
           this.chartData.columns = ['date', ...area]
           this.chartSettings.metrics = area
           this.chartSettings.labelMap = { 'date': '日期' }
diff --git a/src/views/gasDashboard/components/gasCompare.vue b/src/views/gasDashboard/components/gasCompare.vue
new file mode 100644
index 0000000..19a4398
--- /dev/null
+++ b/src/views/gasDashboard/components/gasCompare.vue
@@ -0,0 +1,121 @@
+<!--分区用气对比图-->
+<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 { gasCompareData } from '@/api/gasOverview'
+import FunctionArea from './FunctionArea'
+export default {
+  name: 'GasCompare',
+  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: true
+        },
+        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, type) {
+      const params = {
+        areaId: '110000',
+        type: type || 'other',
+        startTime: timeRange[0],
+        endTime: timeRange[1]
+      }
+      gasCompareData(params).then(response => {
+        this.isShow = false
+        this.chartSettings.labelMap = {
+          areaName: '分区',
+          last: response.data[0].lastTime,
+          now: response.data[0].nowTime
+        }
+        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.max = 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/gasDashboard/components/gasCountByAreaBar.vue b/src/views/gasDashboard/components/gasCountByAreaBar.vue
new file mode 100644
index 0000000..456a6c6
--- /dev/null
+++ b/src/views/gasDashboard/components/gasCountByAreaBar.vue
@@ -0,0 +1,198 @@
+<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 { countBySecondArea } from '@/api/gasOverview'
+import { getDayTime } from '@/utils/dateutils'
+import { getDoorAreaTree } from '@/api/system/area'
+import FunctionArea from './FunctionArea'
+
+export default {
+  name: 'GasCountByAreaBar',
+  components: { FunctionArea },
+  data() {
+    this.extend = {
+      legend: {
+        show: true
+      },
+      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': '分区',
+        'count': '用气量'
+      },
+      dimension: ['areaName'],
+      metrics: ['count']
+    }
+    return {
+      areaId: '',
+      areaList: [],
+      isShow: true,
+      defaultTimeRange: [],
+      timeRange: [],
+      pickerOptions: {
+        disabledDate: function(date) {
+          var oDate1 = new Date(date)
+          var oDate2 = new Date()
+          if (oDate1.getTime() > oDate2.getTime()) {
+            return true
+          } else {
+            return false
+          }
+        }
+      },
+      chartData: {
+        columns: ['wellTypeName', 'count'],
+        rows: []
+      }
+    }
+  },
+  mounted() {
+    this.$refs.func.init()
+    // this.setDefaultTime('week')
+    // 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()
+    },
+    fetchData(timeRange) {
+      const params = {
+        areaId: '110000',
+        startTime: timeRange[0],
+        endTime: timeRange[1]
+      }
+      this.$emit('change', params)
+      countBySecondArea(params).then(response => {
+        this.isShow = false
+        this.chartData.rows = response.data
+        this.isShow = true
+      })
+    },
+    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.fetchData(this.timeRange)
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+  .container{
+    position:relative;
+    .function{
+      width:calc(100% - 120px);
+      height: 28px;
+      display: flex;
+      justify-content: center;
+    }
+  }
+  .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/gasDashboard/components/gasCountByDay.vue b/src/views/gasDashboard/components/gasCountByDay.vue
new file mode 100644
index 0000000..79a4efb
--- /dev/null
+++ b/src/views/gasDashboard/components/gasCountByDay.vue
@@ -0,0 +1,146 @@
+<template>
+  <div class="container">
+    <ve-line :data="chartData" :title="title" :extend="extend" :settings="chartSettings"/>
+  </div>
+</template>
+
+<script>
+import { getDayTime } from '@/utils/dateutils'
+import { countByDaySecond } from '@/api/gasOverview'
+import { getDoorAreaTree } from '@/api/system/area'
+export default {
+  name: 'GasCountByDay',
+  props: {
+    query: {
+      type: Object,
+      default: () => {
+        return {
+          areaId: '',
+          startTime: '',
+          endTime: ''
+        }
+      }
+    }
+  },
+  data() {
+    return {
+      listQuery: {
+        startTime: '',
+        endTime: ''
+      },
+      title: {
+        text: '用气走势图'
+      },
+      chartSettings: {
+        labelMap: { date: '日期' },
+        metrics: [],
+        dimension: ['date']
+      },
+      extend: {
+        grid: {
+          top: 120
+        },
+        yAxis: {
+          name: '用气量（吨）',
+          position: 'left'
+        },
+        legend: {
+          // type: 'scroll',
+          top: '40px'
+        }
+      },
+      chartData: {
+        columns: [],
+        rows: []
+      }
+    }
+  },
+  watch: {
+    query(val) {
+      this.fetchData()
+    }
+  },
+  mounted() {
+    // this.changeTime('month')
+    // this.fetchArea()
+  },
+  methods: {
+    // 废弃
+    fetchArea() {
+      getDoorAreaTree().then(response => {
+        if (response.code === 200) {
+          debugger
+          const area = response.data.filter(item => {
+            return item.pid === '1'
+          }).map(item => item.name)
+          this.chartSettings.metrics = area
+          this.chartSettings.labelMap = {}
+          for (let i = 0; i < area.length; i++) {
+            this.chartSettings.labelMap[area[i]] = area[i]
+          }
+          this.chartData.columns = ['date', ...area]
+          this.fetchData()
+        }
+      })
+    },
+    // 获取数据
+    fetchData() {
+      countByDaySecond(this.query).then(response => {
+        console.log(response, '=====用气走势图====')
+        if (response.data.length > 0) {
+          const arr = response.data.map((item) => {
+            const result = { date: item.date }
+            for (let i = 0; i < item.data.length; i++) {
+              result[item.data[i].areaName] = item.data[i].count
+            }
+            return result
+          })
+          const area = response.data[0].data.map(item => item.areaName)
+          this.chartData.columns = ['date', ...area]
+          this.chartSettings.metrics = area
+          this.chartSettings.labelMap = { 'date': '日期' }
+          this.chartData.rows = arr
+        }
+      })
+      // 模拟数据
+      // this.chartData.rows = [
+      //   { date: '11月29日', dept1: 153, dept2: 43, dept3: 1, dept4: 1, dept5: 1, dept6: 7, dept7: 6, dept8: 2, dept9: 1, dept10: 3 },
+      //   { date: '11月30日', dept1: 150, dept2: 30, dept3: 2, dept4: 1, dept5: 4, dept6: 6, dept7: 3, dept8: 2, dept9: 1, dept10: 3 },
+      //   { date: '12月1日 ', dept1: 143, dept2: 23, dept3: 3, dept4: 2, dept5: 2, dept6: 7, dept7: 3, dept8: 2, dept9: 1, dept10: 3 },
+      //   { date: '12月2日 ', dept1: 173, dept2: 23, dept3: 4, dept4: 4, dept5: 1, dept6: 1, dept7: 8, dept8: 2, dept9: 1, dept10: 3 },
+      //   { date: '12月3日 ', dept1: 272, dept2: 52, dept3: 5, dept4: 1, dept5: 4, dept6: 7, dept7: 9, dept8: 2, dept9: 1, dept10: 3 },
+      //   { date: '12月4日 ', dept1: 253, dept2: 53, dept3: 6, dept4: 5, dept5: 5, dept6: 2, dept7: 9, dept8: 2, dept9: 1, dept10: 3 }
+      // ]
+    },
+    changeTime(timeType) {
+      let startTime
+      switch (timeType) {
+        case 'year':
+          startTime = getDayTime(new Date().getTime() - 24 * 365 * 60 * 60 * 1000)
+          this.listQuery.startTime = startTime.Format('yyyy-MM-dd')
+          break
+        case 'halfyear':
+          startTime = getDayTime(new Date().getTime() - 24 * 182 * 60 * 60 * 1000)
+          this.listQuery.startTime = startTime.Format('yyyy-MM-dd')
+          break
+        case '3month':
+          startTime = getDayTime(new Date().getTime() - 24 * 90 * 60 * 60 * 1000)
+          this.listQuery.startTime = startTime.Format('yyyy-MM-dd')
+          break
+        case 'month':
+          startTime = getDayTime(new Date().getTime() - 24 * 30 * 60 * 60 * 1000)
+          this.listQuery.startTime = startTime.Format('yyyy-MM-dd')
+          break
+        case 'week':
+          startTime = getDayTime(new Date().getTime() - 24 * 7 * 60 * 60 * 1000)
+          this.listQuery.startTime = startTime.Format('yyyy-MM-dd')
+          break
+      }
+      const endTime = new Date()
+      this.listQuery.endTime = endTime.Format('yyyy-MM-dd')
+      this.fetchData()
+    }
+  }
+}
+</script>
+
diff --git a/src/views/gasDashboard/components/gasCountByDept.vue b/src/views/gasDashboard/components/gasCountByDept.vue
new file mode 100644
index 0000000..31c8508
--- /dev/null
+++ b/src/views/gasDashboard/components/gasCountByDept.vue
@@ -0,0 +1,126 @@
+<!--suppress ALL -->
+<template>
+  <div class="container">
+    <ve-pie :data="chartData" :extend="extend" :title="title"/>
+  </div>
+</template>
+
+<script>
+import { countBySecondArea } from '@/api/gasOverview'
+import { getDoorAreaTree } from '@/api/system/area'
+export default {
+  name: 'GasCountByDept',
+  props: {
+    query: {
+      type: Object,
+      default: () => {
+        return {
+          areaId: '',
+          startTime: '',
+          endTime: ''
+        }
+      }
+    }
+  },
+  data() {
+    return {
+      listQuery: {
+        areaId: '',
+        startTime: '',
+        endTime: ''
+      },
+      areaId: '',
+      areaList: [],
+      chartData: {
+        columns: ['areaName', 'count'],
+        rows: []
+      },
+      extend: {
+        grid: {
+          right: '30%'
+        },
+        legend: {
+          type: 'scroll',
+          top: '60px',
+          right: '0px',
+          orient: 'vertical'
+        },
+        series: {
+          label: { show: true, position: 'outside', formatter: '{b}' },
+          right: 120
+        },
+        tooltip: { trigger: 'item', formatter: '{b}<br/>用气量：{c}吨<br/>占比：{d}%' }
+      },
+      title: {
+        text: '分区用气占比图'
+      },
+      chartSettings: {
+        labelMap: {
+          'areaName': '分区',
+          'count': '用气量'
+        },
+        dimension: 'areaName',
+        metrics: 'count'
+      }
+    }
+  },
+  watch: {
+    query(val) {
+      this.fetchData()
+    }
+  },
+  mounted() {
+    // TODO:待调试真接口
+    // 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()
+    },
+    // 获取统计数据
+    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
+      })
+    }
+  }
+}
+</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/gasDashboard/components/gasNote.vue b/src/views/gasDashboard/components/gasNote.vue
new file mode 100644
index 0000000..5ade90f
--- /dev/null
+++ b/src/views/gasDashboard/components/gasNote.vue
@@ -0,0 +1,149 @@
+<!--用水事记L -->
+<template>
+  <div class="container">
+    <div class="title">
+      场区用气事记
+      <i v-if="!editMode" class="el-icon-edit edit-btn" style="float:right" @click="editNote" />
+      <i v-else class="el-icon-check edit-btn" style="float:right" @click="saveNote" />
+    </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" />
+            <div style="width: 85px;display: flex;justify-content: flex-end">
+              <i v-show="index!==0" class="el-icon-top" @click="toTop(index)" />
+              <i v-show="index!==currentList.length-1" class="el-icon-bottom" @click="toBottom(index)" />
+              <i class="el-icon-delete" @click="deleteItem(index)" />
+            </div>
+          </div>
+        </div>
+        <div v-if="editMode&&currentList.length<10" class="content-line">
+          <i class="el-icon-circle-plus-outline icon-btn" @click="addItem()" />
+        </div>
+      </el-scrollbar>
+    </div>
+  </div>
+</template>
+
+<script>
+import { getNoteList, updateNoteList } from '@/api/dashboard'
+export default {
+  name: 'GasNote',
+  props: {
+    query: {
+      type: Object,
+      default: () => {
+        return {
+          areaId: '',
+          startTime: '',
+          endTime: ''
+        }
+      }
+    }
+  },
+  data() {
+    return {
+      editMode: false, // 编辑模式
+      originList: [], // 原始列表
+      currentList: [] // 当前列表
+    }
+  },
+  mounted() {
+    this.fetchData()
+  },
+  methods: {
+    // 获取统计数据
+    fetchData() {
+      // this.currentList = [
+      //   { 'content': '测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试', 'num': 1 },
+      //   { 'content': '测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试', 'num': 1 },
+      //   { 'content': '测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试', 'num': 1 },
+      //   { 'content': '测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试', 'num': 1 },
+      //   { 'content': '测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试', 'num': 1 }
+      // ]
+      // this.originList = JSON.parse(JSON.stringify(this.currentList))
+      getNoteList('2').then(response => {
+        this.currentList = JSON.parse(response.data[0].notes)
+      })
+    },
+    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 }
+      })
+      const params = {
+        type: '2',
+        list: currentList
+      }
+      updateNoteList(params).then(res => {
+        this.editMode = false
+        this.$message.success('保存成功')
+      }).catch(e => {
+        // this.currentList = JSON.parse(JSON.stringify(this.originList))
+      })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+  @import "@/styles/variables.scss";
+  .container{
+    position:relative;
+    height: 428px;
+    display: flex;
+    flex-direction: column;
+    .title{
+      font-weight: bolder;
+      font-size: 18px;
+      font-family: sans-serif;
+      color: #333;
+    }
+    .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/gasDashboard/components/watchAlarmBar.vue b/src/views/gasDashboard/components/watchAlarmBar.vue
index 8857807..4279440 100644
--- a/src/views/gasDashboard/components/watchAlarmBar.vue
+++ b/src/views/gasDashboard/components/watchAlarmBar.vue
@@ -2,33 +2,7 @@
 <template>
   <div class="container">
     <function-area ref="func" select="week" @change="fetchData"/>
-    <!--<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>-->
     <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>
 </template>
 
@@ -42,10 +16,10 @@
   components: { FunctionArea },
   data() {
     return {
-      title:{
+      title: {
         text: '气体流量计告警统计'
       },
-      chartSettings:{
+      chartSettings: {
         itemStyle: {
           barCategoryGap: 0
         },
@@ -83,7 +57,7 @@
         series: {
           label: { show: true, position: 'top', formatter: '{c}' },
           barWidth: 20
-        },
+        }
         // tooltip: { trigger: 'item', formatter: '{b}<br/>报警次数：{c}次' }
       },
       areaId: '',
diff --git a/src/views/gasDashboard/components/watchGasAlarmBar.vue b/src/views/gasDashboard/components/watchGasAlarmBar.vue
index 54783cc..0113341 100644
--- a/src/views/gasDashboard/components/watchGasAlarmBar.vue
+++ b/src/views/gasDashboard/components/watchGasAlarmBar.vue
@@ -1,14 +1,20 @@
 <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"/>
+    <ve-histogram
+      :data="chartData"
+      :grid="grid"
+      :extend="extend"
+      :title="title"
+      :settings="chartSettings"
+    />
   </div>
 </template>
 
 <script>
 // 引入视觉映射组件
 import 'echarts/lib/component/visualMap'
-import { alarmBySecondArea } from '@/api/gasOverview'
+import { gasAlarmBySecondArea } from '@/api/gasOverview'
 import functionArea from './FunctionArea'
 export default {
   name: 'WatchGasAlarmBar',
@@ -18,26 +24,7 @@
       title: {
         text: '燃气告警统计'
       },
-      chartSettings: {
-        itemStyle: {
-          barCategoryGap: 0
-        },
-        labelMap: {
-          'areaName': '分区',
-          'alarm': '报警数'
-        },
-        dimension: ['areaName'],
-        metrics: ['alarm']
-      },
-      grid: {
-        right: 40,
-        top: 80,
-        bottom: 5
-      },
       extend: {
-        legend: {
-          show: true
-        },
         xAxis: {
           axisLabel: {
             rotate: 30,
@@ -53,31 +40,34 @@
           max: 10
         },
         series: {
-          label: { show: true, position: 'top', formatter: '{c}' },
-          barWidth: 20
+          label: { show: true, position: 'top' },
+          barMaxWidth: 35 // 最大柱宽度
         }
-        // tooltip: { trigger: 'item', formatter: '{b}<br/>报警次数：{c}次' }
+      },
+      grid: {
+        right: 60
+      },
+      chartSettings: {
+        itemStyle: {
+          'barCategoryGap': 5
+        },
+        barWidth: 15,
+        labelMap: {
+          'areaName': '区域',
+          'alarm': '报警数'
+        },
+        dimension: ['areaName'],
+        metrics: ['alarm']
+      },
+      chartData: {
+        columns: ['areaName', 'alarm'],
+        rows: []
       },
       areaId: '',
       areaList: [],
       isShow: true,
       defaultTimeRange: [],
-      timeRange: [],
-      pickerOptions: {
-        disabledDate: function(date) {
-          var oDate1 = new Date(date)
-          var oDate2 = new Date()
-          if (oDate1.getTime() > oDate2.getTime()) {
-            return true
-          } else {
-            return false
-          }
-        }
-      },
-      chartData: {
-        columns: ['areaName', 'alarm'],
-        rows: []
-      }
+      timeRange: []
     }
   },
   mounted() {
@@ -93,15 +83,9 @@
         endTime: timeRange[1]
       }
       this.$emit('change', params)
-      alarmBySecondArea(params).then(response => {
+      gasAlarmBySecondArea(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.max = maxValue + 1
-        }
         this.isShow = true
       })
     }
diff --git a/src/views/gasDashboard/components/waterCompare.vue b/src/views/gasDashboard/components/waterCompare.vue
deleted file mode 100644
index 11f0a7d..0000000
--- a/src/views/gasDashboard/components/waterCompare.vue
+++ /dev/null
@@ -1,121 +0,0 @@
-<!--分区用气对比图-->
-<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 { waterCompare } from '@/api/gasOverview'
-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: true
-        },
-        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, type) {
-      const params = {
-        areaId: '110000',
-        type: type || 'other',
-        startTime: timeRange[0],
-        endTime: timeRange[1]
-      }
-      waterCompare(params).then(response => {
-        this.isShow = false
-        this.chartSettings.labelMap = {
-          areaName: '分区',
-          last: response.data[0].lastTime,
-          now: response.data[0].nowTime
-        }
-        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.max = 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/gasDashboard/components/waterCountByAreaBar.vue b/src/views/gasDashboard/components/waterCountByAreaBar.vue
deleted file mode 100644
index d02d54c..0000000
--- a/src/views/gasDashboard/components/waterCountByAreaBar.vue
+++ /dev/null
@@ -1,198 +0,0 @@
-<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 { countBySecondArea } from '@/api/gasOverview'
-import { getDayTime } from '@/utils/dateutils'
-import { getDoorAreaTree } from '@/api/system/area'
-import FunctionArea from './FunctionArea'
-
-export default {
-  name: 'WaterCountByAreaBar',
-  components: { FunctionArea },
-  data() {
-    this.extend = {
-      legend: {
-        show: true
-      },
-      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': '分区',
-        'count': '用气量'
-      },
-      dimension: ['areaName'],
-      metrics: ['count']
-    }
-    return {
-      areaId: '',
-      areaList: [],
-      isShow: true,
-      defaultTimeRange: [],
-      timeRange: [],
-      pickerOptions: {
-        disabledDate: function(date) {
-          var oDate1 = new Date(date)
-          var oDate2 = new Date()
-          if (oDate1.getTime() > oDate2.getTime()) {
-            return true
-          } else {
-            return false
-          }
-        }
-      },
-      chartData: {
-        columns: ['wellTypeName', 'count'],
-        rows: []
-      }
-    }
-  },
-  mounted() {
-    this.$refs.func.init()
-    // this.setDefaultTime('week')
-    // 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()
-    },
-    fetchData(timeRange) {
-      const params = {
-        areaId: '110000',
-        startTime: timeRange[0],
-        endTime: timeRange[1]
-      }
-      this.$emit('change', params)
-      countBySecondArea(params).then(response => {
-        this.isShow = false
-        this.chartData.rows = response.data
-        this.isShow = true
-      })
-    },
-    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.fetchData(this.timeRange)
-    }
-  }
-}
-</script>
-<style lang="scss" scoped>
-  .container{
-    position:relative;
-    .function{
-      width:calc(100% - 120px);
-      height: 28px;
-      display: flex;
-      justify-content: center;
-    }
-  }
-  .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/gasDashboard/components/waterCountByDay.vue b/src/views/gasDashboard/components/waterCountByDay.vue
deleted file mode 100644
index 53297a2..0000000
--- a/src/views/gasDashboard/components/waterCountByDay.vue
+++ /dev/null
@@ -1,157 +0,0 @@
-<template>
-  <div class="container">
-    <!--<div class="function">-->
-      <!--<el-button round size="mini" @click="changeTime('year')">近1年</el-button>-->
-      <!--<el-button round size="mini" @click="changeTime('halfyear')">近6月</el-button>-->
-      <!--<el-button round size="mini" @click="changeTime('3month')">近3月</el-button>-->
-      <!--<el-button round size="mini" @click="changeTime('month')">近1月</el-button>-->
-      <!--<el-button round size="mini" @click="changeTime('week')">近1周</el-button>-->
-    <!--</div>-->
-    <ve-line :data="chartData" :title="title" :extend="extend" :settings="chartSettings"/>
-  </div>
-</template>
-
-<script>
-import { getDayTime } from '@/utils/dateutils'
-import { countByDaySecond } from '@/api/gasOverview'
-import { getDoorAreaTree } from '@/api/system/area'
-export default {
-  name: 'WaterCountByDay',
-  props:{
-    query: {
-      type: Object,
-      default:()=>{
-        return {
-          areaId: '',
-          startTime: '',
-          endTime: ''
-        }
-      }
-    }
-  },
-  data() {
-    return {
-      listQuery: {
-        startTime: '',
-        endTime: ''
-      },
-      title: {
-        text: '用气走势图'
-      },
-      chartSettings: {
-        labelMap: {date:'日期'},
-        metrics: [],
-        dimension: ['date']
-      },
-      extend: {
-        grid: {
-          top: 120
-        },
-        yAxis: {
-          name: '用气量（吨）',
-          position: 'left'
-        },
-        legend: {
-          // type: 'scroll',
-          top: '40px'
-        }
-      },
-      chartData: {
-        columns: [],
-        rows: []
-      }
-    }
-  },
-  mounted() {
-    // this.changeTime('month')
-    // this.fetchArea()
-  },
-  watch:{
-    query(val){
-      this.fetchData()
-    }
-  },
-  methods: {
-    // 废弃
-    fetchArea() {
-      getDoorAreaTree().then(response => {
-        if (response.code === 200) {
-          debugger
-          const area = response.data.filter(item => {
-            return item.pid === '1'
-          }).map(item => item.name)
-          this.chartSettings.metrics = area
-          this.chartSettings.labelMap = {}
-          for (let i = 0; i < area.length; i++) {
-            this.chartSettings.labelMap[area[i]] = area[i]
-          }
-          this.chartData.columns = ['date', ...area]
-          this.fetchData()
-        }
-      })
-    },
-    // 获取数据
-    fetchData() {
-      countByDaySecond(this.query).then(response => {
-        if(response.data.length>0){
-          const arr = response.data.map((item)=> {
-            const result = {date: item.date}
-            for (let i = 0; i < item.data.length; i++) {
-              result[item.data[i].areaName] = item.data[i].count
-            }
-            return result
-          })
-          const area = response.data[0].data.map(item=>item.areaName)
-          this.chartData.columns = ['date', ...area]
-          this.chartSettings.metrics = area
-          this.chartSettings.labelMap = {'date':'日期'}
-          this.chartData.rows = arr
-        }
-      })
-      // 模拟数据
-      // this.chartData.rows = [
-      //   { date: '11月29日', dept1: 153, dept2: 43, dept3: 1, dept4: 1, dept5: 1, dept6: 7, dept7: 6, dept8: 2, dept9: 1, dept10: 3 },
-      //   { date: '11月30日', dept1: 150, dept2: 30, dept3: 2, dept4: 1, dept5: 4, dept6: 6, dept7: 3, dept8: 2, dept9: 1, dept10: 3 },
-      //   { date: '12月1日 ', dept1: 143, dept2: 23, dept3: 3, dept4: 2, dept5: 2, dept6: 7, dept7: 3, dept8: 2, dept9: 1, dept10: 3 },
-      //   { date: '12月2日 ', dept1: 173, dept2: 23, dept3: 4, dept4: 4, dept5: 1, dept6: 1, dept7: 8, dept8: 2, dept9: 1, dept10: 3 },
-      //   { date: '12月3日 ', dept1: 272, dept2: 52, dept3: 5, dept4: 1, dept5: 4, dept6: 7, dept7: 9, dept8: 2, dept9: 1, dept10: 3 },
-      //   { date: '12月4日 ', dept1: 253, dept2: 53, dept3: 6, dept4: 5, dept5: 5, dept6: 2, dept7: 9, dept8: 2, dept9: 1, dept10: 3 }
-      // ]
-    },
-    changeTime(timeType) {
-      let startTime
-      switch (timeType) {
-        case 'year':
-          startTime = getDayTime(new Date().getTime() - 24 * 365 * 60 * 60 * 1000)
-          this.listQuery.startTime = startTime.Format('yyyy-MM-dd')
-          break
-        case 'halfyear':
-          startTime = getDayTime(new Date().getTime() - 24 * 182 * 60 * 60 * 1000)
-          this.listQuery.startTime = startTime.Format('yyyy-MM-dd')
-          break
-        case '3month':
-          startTime = getDayTime(new Date().getTime() - 24 * 90 * 60 * 60 * 1000)
-          this.listQuery.startTime = startTime.Format('yyyy-MM-dd')
-          break
-        case 'month':
-          startTime = getDayTime(new Date().getTime() - 24 * 30 * 60 * 60 * 1000)
-          this.listQuery.startTime = startTime.Format('yyyy-MM-dd')
-          break
-        case 'week':
-          startTime = getDayTime(new Date().getTime() - 24 * 7 * 60 * 60 * 1000)
-          this.listQuery.startTime = startTime.Format('yyyy-MM-dd')
-          break
-      }
-      const endTime = new Date()
-      this.listQuery.endTime = endTime.Format('yyyy-MM-dd')
-      this.fetchData()
-    }
-  }
-}
-</script>
-<style lang="scss" scoped>
-  .container{
-
-  }
-</style>
-

diff --git a/src/api/gasOverview.js b/src/api/gasOverview.js
index a8996f5..b7da600 100644
--- a/src/api/gasOverview.js
+++ b/src/api/gasOverview.js
@@ -53,8 +53,24 @@
     params
   })
 }
-// 查询二级分区各区用水量对比
-export function waterCompare(params) {
+// 查询二级分区燃气告警
+export function gasAlarmBySecondArea(params) {
+  return request({
+    url: 'dataStatistic/gasAlarmBySecondArea',
+    method: 'get',
+    params
+  })
+}
+// 各设备腐蚀速率统计
+export function corrRateByDevice(params) {
+  return request({
+    url: 'statics/corrRateByDevice',
+    method: 'get',
+    params
+  })
+}
+// 查询二级分区用气对比
+export function gasCompareData(params) {
   return request({
     url: 'gasStatistic/gasCompare',
     method: 'get',
diff --git a/src/views/gasDashboard/components/alarmGasCountByDept.vue b/src/views/gasDashboard/components/alarmGasCountByDept.vue
index 60ab5ad..b8bfc23 100644
--- a/src/views/gasDashboard/components/alarmGasCountByDept.vue
+++ b/src/views/gasDashboard/components/alarmGasCountByDept.vue
@@ -8,7 +8,7 @@
 </template>
 
 <script>
-import { alarmBySecondArea } from '@/api/gasOverview'
+import { gasAlarmBySecondArea } from '@/api/gasOverview'
 export default {
   name: 'AlarmGasCountByDept',
   props: {
@@ -64,7 +64,7 @@
   methods: {
     // 获取统计数据
     fetchData() {
-      alarmBySecondArea(this.query).then(response => {
+      gasAlarmBySecondArea(this.query).then(response => {
         this.chartData.rows = response.data
       })
     }
diff --git a/src/views/gasDashboard/components/corrodeCountByDay.vue b/src/views/gasDashboard/components/corrodeCountByDay.vue
index 3a97391..82c29bf 100644
--- a/src/views/gasDashboard/components/corrodeCountByDay.vue
+++ b/src/views/gasDashboard/components/corrodeCountByDay.vue
@@ -1,13 +1,30 @@
+<!--腐蚀速率走势图-->
 <template>
   <div class="container">
-    <ve-line :data="chartData" :title="title" :extend="extend" :settings="chartSettings"/>
+    <!-- <function-area
+      ref="func"
+      select="week"
+      @change="fetchData"
+    /> -->
+    <function-area
+      ref="func"
+      select="week"
+    />
+    <ve-line
+      :data="chartData"
+      :title="title"
+      :extend="extend"
+      :settings="chartSettings"
+    />
   </div>
 </template>
 
 <script>
-import { countByDaySecond } from '@/api/gasOverview'
+import FunctionArea from './FunctionArea'
+import { corrRateByDevice } from '@/api/gasOverview'
 export default {
-  name: 'WaterCountByDay',
+  name: 'CorrodeCountByDay',
+  components: { FunctionArea },
   props: {
     query: {
       type: Object,
@@ -22,10 +39,6 @@
   },
   data() {
     return {
-      listQuery: {
-        startTime: '',
-        endTime: ''
-      },
       title: {
         text: '腐蚀速率走势图'
       },
@@ -53,24 +66,62 @@
       }
     }
   },
-  watch: {
-    query(val) {
-      this.fetchData()
-    }
+  mounted() {
+    this.$refs.func.init()
+    this.getData()
   },
   methods: {
+    // 模拟数据
+    getData() {
+      const res = [
+        {
+          'date': '2021-10-01',
+          'data': [
+            { 'devcode': '1111', 'data': 10 },
+            { 'devcode': '1112', 'data': 2 },
+            { 'devcode': '1113', 'data': 3 }
+          ]
+        },
+        {
+          'date': '2021-10-02',
+          'data': [
+            { 'devcode': '1111', 'data': 1 },
+            { 'devcode': '1112', 'data': 6 },
+            { 'devcode': '1113', 'data': 1 }
+          ]
+        }
+      ]
+      const arr = res.map((item) => {
+        const result = { date: item.date }
+        for (let i = 0; i < item.data.length; i++) {
+          result[item.data[i].devcode] = item.data[i].data
+        }
+        return result
+      })
+      const area = res[0].data.map(item => item.devcode)
+      this.chartData.columns = ['date', ...area]
+      this.chartSettings.metrics = area
+      this.chartSettings.labelMap = { 'date': '日期' }
+      this.chartData.rows = arr
+    },
     // 获取数据
-    fetchData() {
-      countByDaySecond(this.query).then(response => {
+    fetchData(timeRange, type) {
+      const params = {
+        type: type || 'other',
+        beginTime: timeRange[0],
+        endTime: timeRange[1]
+      }
+      corrRateByDevice(params).then(response => {
+        console.log(response, '======腐蚀速率走势图response=====')
         if (response.data.length > 0) {
           const arr = response.data.map((item) => {
             const result = { date: item.date }
             for (let i = 0; i < item.data.length; i++) {
-              result[item.data[i].areaName] = item.data[i].count
+              result[item.data[i].devcode] = item.data[i].data
             }
             return result
           })
-          const area = response.data[0].data.map(item => item.areaName)
+          const area = response.data[0].data.map(item => item.devcode)
           this.chartData.columns = ['date', ...area]
           this.chartSettings.metrics = area
           this.chartSettings.labelMap = { 'date': '日期' }
diff --git a/src/views/gasDashboard/components/gasCompare.vue b/src/views/gasDashboard/components/gasCompare.vue
new file mode 100644
index 0000000..19a4398
--- /dev/null
+++ b/src/views/gasDashboard/components/gasCompare.vue
@@ -0,0 +1,121 @@
+<!--分区用气对比图-->
+<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 { gasCompareData } from '@/api/gasOverview'
+import FunctionArea from './FunctionArea'
+export default {
+  name: 'GasCompare',
+  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: true
+        },
+        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, type) {
+      const params = {
+        areaId: '110000',
+        type: type || 'other',
+        startTime: timeRange[0],
+        endTime: timeRange[1]
+      }
+      gasCompareData(params).then(response => {
+        this.isShow = false
+        this.chartSettings.labelMap = {
+          areaName: '分区',
+          last: response.data[0].lastTime,
+          now: response.data[0].nowTime
+        }
+        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.max = 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/gasDashboard/components/gasCountByAreaBar.vue b/src/views/gasDashboard/components/gasCountByAreaBar.vue
new file mode 100644
index 0000000..456a6c6
--- /dev/null
+++ b/src/views/gasDashboard/components/gasCountByAreaBar.vue
@@ -0,0 +1,198 @@
+<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 { countBySecondArea } from '@/api/gasOverview'
+import { getDayTime } from '@/utils/dateutils'
+import { getDoorAreaTree } from '@/api/system/area'
+import FunctionArea from './FunctionArea'
+
+export default {
+  name: 'GasCountByAreaBar',
+  components: { FunctionArea },
+  data() {
+    this.extend = {
+      legend: {
+        show: true
+      },
+      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': '分区',
+        'count': '用气量'
+      },
+      dimension: ['areaName'],
+      metrics: ['count']
+    }
+    return {
+      areaId: '',
+      areaList: [],
+      isShow: true,
+      defaultTimeRange: [],
+      timeRange: [],
+      pickerOptions: {
+        disabledDate: function(date) {
+          var oDate1 = new Date(date)
+          var oDate2 = new Date()
+          if (oDate1.getTime() > oDate2.getTime()) {
+            return true
+          } else {
+            return false
+          }
+        }
+      },
+      chartData: {
+        columns: ['wellTypeName', 'count'],
+        rows: []
+      }
+    }
+  },
+  mounted() {
+    this.$refs.func.init()
+    // this.setDefaultTime('week')
+    // 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()
+    },
+    fetchData(timeRange) {
+      const params = {
+        areaId: '110000',
+        startTime: timeRange[0],
+        endTime: timeRange[1]
+      }
+      this.$emit('change', params)
+      countBySecondArea(params).then(response => {
+        this.isShow = false
+        this.chartData.rows = response.data
+        this.isShow = true
+      })
+    },
+    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.fetchData(this.timeRange)
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+  .container{
+    position:relative;
+    .function{
+      width:calc(100% - 120px);
+      height: 28px;
+      display: flex;
+      justify-content: center;
+    }
+  }
+  .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/gasDashboard/components/gasCountByDay.vue b/src/views/gasDashboard/components/gasCountByDay.vue
new file mode 100644
index 0000000..79a4efb
--- /dev/null
+++ b/src/views/gasDashboard/components/gasCountByDay.vue
@@ -0,0 +1,146 @@
+<template>
+  <div class="container">
+    <ve-line :data="chartData" :title="title" :extend="extend" :settings="chartSettings"/>
+  </div>
+</template>
+
+<script>
+import { getDayTime } from '@/utils/dateutils'
+import { countByDaySecond } from '@/api/gasOverview'
+import { getDoorAreaTree } from '@/api/system/area'
+export default {
+  name: 'GasCountByDay',
+  props: {
+    query: {
+      type: Object,
+      default: () => {
+        return {
+          areaId: '',
+          startTime: '',
+          endTime: ''
+        }
+      }
+    }
+  },
+  data() {
+    return {
+      listQuery: {
+        startTime: '',
+        endTime: ''
+      },
+      title: {
+        text: '用气走势图'
+      },
+      chartSettings: {
+        labelMap: { date: '日期' },
+        metrics: [],
+        dimension: ['date']
+      },
+      extend: {
+        grid: {
+          top: 120
+        },
+        yAxis: {
+          name: '用气量（吨）',
+          position: 'left'
+        },
+        legend: {
+          // type: 'scroll',
+          top: '40px'
+        }
+      },
+      chartData: {
+        columns: [],
+        rows: []
+      }
+    }
+  },
+  watch: {
+    query(val) {
+      this.fetchData()
+    }
+  },
+  mounted() {
+    // this.changeTime('month')
+    // this.fetchArea()
+  },
+  methods: {
+    // 废弃
+    fetchArea() {
+      getDoorAreaTree().then(response => {
+        if (response.code === 200) {
+          debugger
+          const area = response.data.filter(item => {
+            return item.pid === '1'
+          }).map(item => item.name)
+          this.chartSettings.metrics = area
+          this.chartSettings.labelMap = {}
+          for (let i = 0; i < area.length; i++) {
+            this.chartSettings.labelMap[area[i]] = area[i]
+          }
+          this.chartData.columns = ['date', ...area]
+          this.fetchData()
+        }
+      })
+    },
+    // 获取数据
+    fetchData() {
+      countByDaySecond(this.query).then(response => {
+        console.log(response, '=====用气走势图====')
+        if (response.data.length > 0) {
+          const arr = response.data.map((item) => {
+            const result = { date: item.date }
+            for (let i = 0; i < item.data.length; i++) {
+              result[item.data[i].areaName] = item.data[i].count
+            }
+            return result
+          })
+          const area = response.data[0].data.map(item => item.areaName)
+          this.chartData.columns = ['date', ...area]
+          this.chartSettings.metrics = area
+          this.chartSettings.labelMap = { 'date': '日期' }
+          this.chartData.rows = arr
+        }
+      })
+      // 模拟数据
+      // this.chartData.rows = [
+      //   { date: '11月29日', dept1: 153, dept2: 43, dept3: 1, dept4: 1, dept5: 1, dept6: 7, dept7: 6, dept8: 2, dept9: 1, dept10: 3 },
+      //   { date: '11月30日', dept1: 150, dept2: 30, dept3: 2, dept4: 1, dept5: 4, dept6: 6, dept7: 3, dept8: 2, dept9: 1, dept10: 3 },
+      //   { date: '12月1日 ', dept1: 143, dept2: 23, dept3: 3, dept4: 2, dept5: 2, dept6: 7, dept7: 3, dept8: 2, dept9: 1, dept10: 3 },
+      //   { date: '12月2日 ', dept1: 173, dept2: 23, dept3: 4, dept4: 4, dept5: 1, dept6: 1, dept7: 8, dept8: 2, dept9: 1, dept10: 3 },
+      //   { date: '12月3日 ', dept1: 272, dept2: 52, dept3: 5, dept4: 1, dept5: 4, dept6: 7, dept7: 9, dept8: 2, dept9: 1, dept10: 3 },
+      //   { date: '12月4日 ', dept1: 253, dept2: 53, dept3: 6, dept4: 5, dept5: 5, dept6: 2, dept7: 9, dept8: 2, dept9: 1, dept10: 3 }
+      // ]
+    },
+    changeTime(timeType) {
+      let startTime
+      switch (timeType) {
+        case 'year':
+          startTime = getDayTime(new Date().getTime() - 24 * 365 * 60 * 60 * 1000)
+          this.listQuery.startTime = startTime.Format('yyyy-MM-dd')
+          break
+        case 'halfyear':
+          startTime = getDayTime(new Date().getTime() - 24 * 182 * 60 * 60 * 1000)
+          this.listQuery.startTime = startTime.Format('yyyy-MM-dd')
+          break
+        case '3month':
+          startTime = getDayTime(new Date().getTime() - 24 * 90 * 60 * 60 * 1000)
+          this.listQuery.startTime = startTime.Format('yyyy-MM-dd')
+          break
+        case 'month':
+          startTime = getDayTime(new Date().getTime() - 24 * 30 * 60 * 60 * 1000)
+          this.listQuery.startTime = startTime.Format('yyyy-MM-dd')
+          break
+        case 'week':
+          startTime = getDayTime(new Date().getTime() - 24 * 7 * 60 * 60 * 1000)
+          this.listQuery.startTime = startTime.Format('yyyy-MM-dd')
+          break
+      }
+      const endTime = new Date()
+      this.listQuery.endTime = endTime.Format('yyyy-MM-dd')
+      this.fetchData()
+    }
+  }
+}
+</script>
+
diff --git a/src/views/gasDashboard/components/gasCountByDept.vue b/src/views/gasDashboard/components/gasCountByDept.vue
new file mode 100644
index 0000000..31c8508
--- /dev/null
+++ b/src/views/gasDashboard/components/gasCountByDept.vue
@@ -0,0 +1,126 @@
+<!--suppress ALL -->
+<template>
+  <div class="container">
+    <ve-pie :data="chartData" :extend="extend" :title="title"/>
+  </div>
+</template>
+
+<script>
+import { countBySecondArea } from '@/api/gasOverview'
+import { getDoorAreaTree } from '@/api/system/area'
+export default {
+  name: 'GasCountByDept',
+  props: {
+    query: {
+      type: Object,
+      default: () => {
+        return {
+          areaId: '',
+          startTime: '',
+          endTime: ''
+        }
+      }
+    }
+  },
+  data() {
+    return {
+      listQuery: {
+        areaId: '',
+        startTime: '',
+        endTime: ''
+      },
+      areaId: '',
+      areaList: [],
+      chartData: {
+        columns: ['areaName', 'count'],
+        rows: []
+      },
+      extend: {
+        grid: {
+          right: '30%'
+        },
+        legend: {
+          type: 'scroll',
+          top: '60px',
+          right: '0px',
+          orient: 'vertical'
+        },
+        series: {
+          label: { show: true, position: 'outside', formatter: '{b}' },
+          right: 120
+        },
+        tooltip: { trigger: 'item', formatter: '{b}<br/>用气量：{c}吨<br/>占比：{d}%' }
+      },
+      title: {
+        text: '分区用气占比图'
+      },
+      chartSettings: {
+        labelMap: {
+          'areaName': '分区',
+          'count': '用气量'
+        },
+        dimension: 'areaName',
+        metrics: 'count'
+      }
+    }
+  },
+  watch: {
+    query(val) {
+      this.fetchData()
+    }
+  },
+  mounted() {
+    // TODO:待调试真接口
+    // 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()
+    },
+    // 获取统计数据
+    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
+      })
+    }
+  }
+}
+</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/gasDashboard/components/gasNote.vue b/src/views/gasDashboard/components/gasNote.vue
new file mode 100644
index 0000000..5ade90f
--- /dev/null
+++ b/src/views/gasDashboard/components/gasNote.vue
@@ -0,0 +1,149 @@
+<!--用水事记L -->
+<template>
+  <div class="container">
+    <div class="title">
+      场区用气事记
+      <i v-if="!editMode" class="el-icon-edit edit-btn" style="float:right" @click="editNote" />
+      <i v-else class="el-icon-check edit-btn" style="float:right" @click="saveNote" />
+    </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" />
+            <div style="width: 85px;display: flex;justify-content: flex-end">
+              <i v-show="index!==0" class="el-icon-top" @click="toTop(index)" />
+              <i v-show="index!==currentList.length-1" class="el-icon-bottom" @click="toBottom(index)" />
+              <i class="el-icon-delete" @click="deleteItem(index)" />
+            </div>
+          </div>
+        </div>
+        <div v-if="editMode&&currentList.length<10" class="content-line">
+          <i class="el-icon-circle-plus-outline icon-btn" @click="addItem()" />
+        </div>
+      </el-scrollbar>
+    </div>
+  </div>
+</template>
+
+<script>
+import { getNoteList, updateNoteList } from '@/api/dashboard'
+export default {
+  name: 'GasNote',
+  props: {
+    query: {
+      type: Object,
+      default: () => {
+        return {
+          areaId: '',
+          startTime: '',
+          endTime: ''
+        }
+      }
+    }
+  },
+  data() {
+    return {
+      editMode: false, // 编辑模式
+      originList: [], // 原始列表
+      currentList: [] // 当前列表
+    }
+  },
+  mounted() {
+    this.fetchData()
+  },
+  methods: {
+    // 获取统计数据
+    fetchData() {
+      // this.currentList = [
+      //   { 'content': '测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试', 'num': 1 },
+      //   { 'content': '测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试', 'num': 1 },
+      //   { 'content': '测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试', 'num': 1 },
+      //   { 'content': '测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试', 'num': 1 },
+      //   { 'content': '测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试', 'num': 1 }
+      // ]
+      // this.originList = JSON.parse(JSON.stringify(this.currentList))
+      getNoteList('2').then(response => {
+        this.currentList = JSON.parse(response.data[0].notes)
+      })
+    },
+    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 }
+      })
+      const params = {
+        type: '2',
+        list: currentList
+      }
+      updateNoteList(params).then(res => {
+        this.editMode = false
+        this.$message.success('保存成功')
+      }).catch(e => {
+        // this.currentList = JSON.parse(JSON.stringify(this.originList))
+      })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+  @import "@/styles/variables.scss";
+  .container{
+    position:relative;
+    height: 428px;
+    display: flex;
+    flex-direction: column;
+    .title{
+      font-weight: bolder;
+      font-size: 18px;
+      font-family: sans-serif;
+      color: #333;
+    }
+    .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/gasDashboard/components/watchAlarmBar.vue b/src/views/gasDashboard/components/watchAlarmBar.vue
index 8857807..4279440 100644
--- a/src/views/gasDashboard/components/watchAlarmBar.vue
+++ b/src/views/gasDashboard/components/watchAlarmBar.vue
@@ -2,33 +2,7 @@
 <template>
   <div class="container">
     <function-area ref="func" select="week" @change="fetchData"/>
-    <!--<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>-->
     <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>
 </template>
 
@@ -42,10 +16,10 @@
   components: { FunctionArea },
   data() {
     return {
-      title:{
+      title: {
         text: '气体流量计告警统计'
       },
-      chartSettings:{
+      chartSettings: {
         itemStyle: {
           barCategoryGap: 0
         },
@@ -83,7 +57,7 @@
         series: {
           label: { show: true, position: 'top', formatter: '{c}' },
           barWidth: 20
-        },
+        }
         // tooltip: { trigger: 'item', formatter: '{b}<br/>报警次数：{c}次' }
       },
       areaId: '',
diff --git a/src/views/gasDashboard/components/watchGasAlarmBar.vue b/src/views/gasDashboard/components/watchGasAlarmBar.vue
index 54783cc..0113341 100644
--- a/src/views/gasDashboard/components/watchGasAlarmBar.vue
+++ b/src/views/gasDashboard/components/watchGasAlarmBar.vue
@@ -1,14 +1,20 @@
 <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"/>
+    <ve-histogram
+      :data="chartData"
+      :grid="grid"
+      :extend="extend"
+      :title="title"
+      :settings="chartSettings"
+    />
   </div>
 </template>
 
 <script>
 // 引入视觉映射组件
 import 'echarts/lib/component/visualMap'
-import { alarmBySecondArea } from '@/api/gasOverview'
+import { gasAlarmBySecondArea } from '@/api/gasOverview'
 import functionArea from './FunctionArea'
 export default {
   name: 'WatchGasAlarmBar',
@@ -18,26 +24,7 @@
       title: {
         text: '燃气告警统计'
       },
-      chartSettings: {
-        itemStyle: {
-          barCategoryGap: 0
-        },
-        labelMap: {
-          'areaName': '分区',
-          'alarm': '报警数'
-        },
-        dimension: ['areaName'],
-        metrics: ['alarm']
-      },
-      grid: {
-        right: 40,
-        top: 80,
-        bottom: 5
-      },
       extend: {
-        legend: {
-          show: true
-        },
         xAxis: {
           axisLabel: {
             rotate: 30,
@@ -53,31 +40,34 @@
           max: 10
         },
         series: {
-          label: { show: true, position: 'top', formatter: '{c}' },
-          barWidth: 20
+          label: { show: true, position: 'top' },
+          barMaxWidth: 35 // 最大柱宽度
         }
-        // tooltip: { trigger: 'item', formatter: '{b}<br/>报警次数：{c}次' }
+      },
+      grid: {
+        right: 60
+      },
+      chartSettings: {
+        itemStyle: {
+          'barCategoryGap': 5
+        },
+        barWidth: 15,
+        labelMap: {
+          'areaName': '区域',
+          'alarm': '报警数'
+        },
+        dimension: ['areaName'],
+        metrics: ['alarm']
+      },
+      chartData: {
+        columns: ['areaName', 'alarm'],
+        rows: []
       },
       areaId: '',
       areaList: [],
       isShow: true,
       defaultTimeRange: [],
-      timeRange: [],
-      pickerOptions: {
-        disabledDate: function(date) {
-          var oDate1 = new Date(date)
-          var oDate2 = new Date()
-          if (oDate1.getTime() > oDate2.getTime()) {
-            return true
-          } else {
-            return false
-          }
-        }
-      },
-      chartData: {
-        columns: ['areaName', 'alarm'],
-        rows: []
-      }
+      timeRange: []
     }
   },
   mounted() {
@@ -93,15 +83,9 @@
         endTime: timeRange[1]
       }
       this.$emit('change', params)
-      alarmBySecondArea(params).then(response => {
+      gasAlarmBySecondArea(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.max = maxValue + 1
-        }
         this.isShow = true
       })
     }
diff --git a/src/views/gasDashboard/components/waterCompare.vue b/src/views/gasDashboard/components/waterCompare.vue
deleted file mode 100644
index 11f0a7d..0000000
--- a/src/views/gasDashboard/components/waterCompare.vue
+++ /dev/null
@@ -1,121 +0,0 @@
-<!--分区用气对比图-->
-<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 { waterCompare } from '@/api/gasOverview'
-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: true
-        },
-        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, type) {
-      const params = {
-        areaId: '110000',
-        type: type || 'other',
-        startTime: timeRange[0],
-        endTime: timeRange[1]
-      }
-      waterCompare(params).then(response => {
-        this.isShow = false
-        this.chartSettings.labelMap = {
-          areaName: '分区',
-          last: response.data[0].lastTime,
-          now: response.data[0].nowTime
-        }
-        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.max = 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/gasDashboard/components/waterCountByAreaBar.vue b/src/views/gasDashboard/components/waterCountByAreaBar.vue
deleted file mode 100644
index d02d54c..0000000
--- a/src/views/gasDashboard/components/waterCountByAreaBar.vue
+++ /dev/null
@@ -1,198 +0,0 @@
-<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 { countBySecondArea } from '@/api/gasOverview'
-import { getDayTime } from '@/utils/dateutils'
-import { getDoorAreaTree } from '@/api/system/area'
-import FunctionArea from './FunctionArea'
-
-export default {
-  name: 'WaterCountByAreaBar',
-  components: { FunctionArea },
-  data() {
-    this.extend = {
-      legend: {
-        show: true
-      },
-      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': '分区',
-        'count': '用气量'
-      },
-      dimension: ['areaName'],
-      metrics: ['count']
-    }
-    return {
-      areaId: '',
-      areaList: [],
-      isShow: true,
-      defaultTimeRange: [],
-      timeRange: [],
-      pickerOptions: {
-        disabledDate: function(date) {
-          var oDate1 = new Date(date)
-          var oDate2 = new Date()
-          if (oDate1.getTime() > oDate2.getTime()) {
-            return true
-          } else {
-            return false
-          }
-        }
-      },
-      chartData: {
-        columns: ['wellTypeName', 'count'],
-        rows: []
-      }
-    }
-  },
-  mounted() {
-    this.$refs.func.init()
-    // this.setDefaultTime('week')
-    // 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()
-    },
-    fetchData(timeRange) {
-      const params = {
-        areaId: '110000',
-        startTime: timeRange[0],
-        endTime: timeRange[1]
-      }
-      this.$emit('change', params)
-      countBySecondArea(params).then(response => {
-        this.isShow = false
-        this.chartData.rows = response.data
-        this.isShow = true
-      })
-    },
-    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.fetchData(this.timeRange)
-    }
-  }
-}
-</script>
-<style lang="scss" scoped>
-  .container{
-    position:relative;
-    .function{
-      width:calc(100% - 120px);
-      height: 28px;
-      display: flex;
-      justify-content: center;
-    }
-  }
-  .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/gasDashboard/components/waterCountByDay.vue b/src/views/gasDashboard/components/waterCountByDay.vue
deleted file mode 100644
index 53297a2..0000000
--- a/src/views/gasDashboard/components/waterCountByDay.vue
+++ /dev/null
@@ -1,157 +0,0 @@
-<template>
-  <div class="container">
-    <!--<div class="function">-->
-      <!--<el-button round size="mini" @click="changeTime('year')">近1年</el-button>-->
-      <!--<el-button round size="mini" @click="changeTime('halfyear')">近6月</el-button>-->
-      <!--<el-button round size="mini" @click="changeTime('3month')">近3月</el-button>-->
-      <!--<el-button round size="mini" @click="changeTime('month')">近1月</el-button>-->
-      <!--<el-button round size="mini" @click="changeTime('week')">近1周</el-button>-->
-    <!--</div>-->
-    <ve-line :data="chartData" :title="title" :extend="extend" :settings="chartSettings"/>
-  </div>
-</template>
-
-<script>
-import { getDayTime } from '@/utils/dateutils'
-import { countByDaySecond } from '@/api/gasOverview'
-import { getDoorAreaTree } from '@/api/system/area'
-export default {
-  name: 'WaterCountByDay',
-  props:{
-    query: {
-      type: Object,
-      default:()=>{
-        return {
-          areaId: '',
-          startTime: '',
-          endTime: ''
-        }
-      }
-    }
-  },
-  data() {
-    return {
-      listQuery: {
-        startTime: '',
-        endTime: ''
-      },
-      title: {
-        text: '用气走势图'
-      },
-      chartSettings: {
-        labelMap: {date:'日期'},
-        metrics: [],
-        dimension: ['date']
-      },
-      extend: {
-        grid: {
-          top: 120
-        },
-        yAxis: {
-          name: '用气量（吨）',
-          position: 'left'
-        },
-        legend: {
-          // type: 'scroll',
-          top: '40px'
-        }
-      },
-      chartData: {
-        columns: [],
-        rows: []
-      }
-    }
-  },
-  mounted() {
-    // this.changeTime('month')
-    // this.fetchArea()
-  },
-  watch:{
-    query(val){
-      this.fetchData()
-    }
-  },
-  methods: {
-    // 废弃
-    fetchArea() {
-      getDoorAreaTree().then(response => {
-        if (response.code === 200) {
-          debugger
-          const area = response.data.filter(item => {
-            return item.pid === '1'
-          }).map(item => item.name)
-          this.chartSettings.metrics = area
-          this.chartSettings.labelMap = {}
-          for (let i = 0; i < area.length; i++) {
-            this.chartSettings.labelMap[area[i]] = area[i]
-          }
-          this.chartData.columns = ['date', ...area]
-          this.fetchData()
-        }
-      })
-    },
-    // 获取数据
-    fetchData() {
-      countByDaySecond(this.query).then(response => {
-        if(response.data.length>0){
-          const arr = response.data.map((item)=> {
-            const result = {date: item.date}
-            for (let i = 0; i < item.data.length; i++) {
-              result[item.data[i].areaName] = item.data[i].count
-            }
-            return result
-          })
-          const area = response.data[0].data.map(item=>item.areaName)
-          this.chartData.columns = ['date', ...area]
-          this.chartSettings.metrics = area
-          this.chartSettings.labelMap = {'date':'日期'}
-          this.chartData.rows = arr
-        }
-      })
-      // 模拟数据
-      // this.chartData.rows = [
-      //   { date: '11月29日', dept1: 153, dept2: 43, dept3: 1, dept4: 1, dept5: 1, dept6: 7, dept7: 6, dept8: 2, dept9: 1, dept10: 3 },
-      //   { date: '11月30日', dept1: 150, dept2: 30, dept3: 2, dept4: 1, dept5: 4, dept6: 6, dept7: 3, dept8: 2, dept9: 1, dept10: 3 },
-      //   { date: '12月1日 ', dept1: 143, dept2: 23, dept3: 3, dept4: 2, dept5: 2, dept6: 7, dept7: 3, dept8: 2, dept9: 1, dept10: 3 },
-      //   { date: '12月2日 ', dept1: 173, dept2: 23, dept3: 4, dept4: 4, dept5: 1, dept6: 1, dept7: 8, dept8: 2, dept9: 1, dept10: 3 },
-      //   { date: '12月3日 ', dept1: 272, dept2: 52, dept3: 5, dept4: 1, dept5: 4, dept6: 7, dept7: 9, dept8: 2, dept9: 1, dept10: 3 },
-      //   { date: '12月4日 ', dept1: 253, dept2: 53, dept3: 6, dept4: 5, dept5: 5, dept6: 2, dept7: 9, dept8: 2, dept9: 1, dept10: 3 }
-      // ]
-    },
-    changeTime(timeType) {
-      let startTime
-      switch (timeType) {
-        case 'year':
-          startTime = getDayTime(new Date().getTime() - 24 * 365 * 60 * 60 * 1000)
-          this.listQuery.startTime = startTime.Format('yyyy-MM-dd')
-          break
-        case 'halfyear':
-          startTime = getDayTime(new Date().getTime() - 24 * 182 * 60 * 60 * 1000)
-          this.listQuery.startTime = startTime.Format('yyyy-MM-dd')
-          break
-        case '3month':
-          startTime = getDayTime(new Date().getTime() - 24 * 90 * 60 * 60 * 1000)
-          this.listQuery.startTime = startTime.Format('yyyy-MM-dd')
-          break
-        case 'month':
-          startTime = getDayTime(new Date().getTime() - 24 * 30 * 60 * 60 * 1000)
-          this.listQuery.startTime = startTime.Format('yyyy-MM-dd')
-          break
-        case 'week':
-          startTime = getDayTime(new Date().getTime() - 24 * 7 * 60 * 60 * 1000)
-          this.listQuery.startTime = startTime.Format('yyyy-MM-dd')
-          break
-      }
-      const endTime = new Date()
-      this.listQuery.endTime = endTime.Format('yyyy-MM-dd')
-      this.fetchData()
-    }
-  }
-}
-</script>
-<style lang="scss" scoped>
-  .container{
-
-  }
-</style>
-
diff --git a/src/views/gasDashboard/components/waterCountByDept.vue b/src/views/gasDashboard/components/waterCountByDept.vue
deleted file mode 100644
index b09409a..0000000
--- a/src/views/gasDashboard/components/waterCountByDept.vue
+++ /dev/null
@@ -1,126 +0,0 @@
-<!--suppress ALL -->
-<template>
-  <div class="container">
-    <ve-pie :data="chartData" :extend="extend" :title="title"/>
-  </div>
-</template>
-
-<script>
-import { countBySecondArea } from '@/api/gasOverview'
-import { getDoorAreaTree } from '@/api/system/area'
-export default {
-  name: 'WaterCountByDepy',
-  props: {
-    query: {
-      type: Object,
-      default: () => {
-        return {
-          areaId: '',
-          startTime: '',
-          endTime: ''
-        }
-      }
-    }
-  },
-  data() {
-    return {
-      listQuery: {
-        areaId: '',
-        startTime: '',
-        endTime: ''
-      },
-      areaId: '',
-      areaList: [],
-      chartData: {
-        columns: ['areaName', 'count'],
-        rows: []
-      },
-      extend: {
-        grid: {
-          right: '30%'
-        },
-        legend: {
-          type: 'scroll',
-          top: '60px',
-          right: '0px',
-          orient: 'vertical'
-        },
-        series: {
-          label: { show: true, position: 'outside', formatter: '{b}' },
-          right: 120
-        },
-        tooltip: { trigger: 'item', formatter: '{b}<br/>用气量：{c}吨<br/>占比：{d}%' }
-      },
-      title: {
-        text: '分区用气占比图'
-      },
-      chartSettings: {
-        labelMap: {
-          'areaName': '分区',
-          'count': '用气量'
-        },
-        dimension: 'areaName',
-        metrics: 'count'
-      }
-    }
-  },
-  watch: {
-    query(val) {
-      this.fetchData()
-    }
-  },
-  mounted() {
-    // TODO:待调试真接口
-    // 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()
-    },
-    // 获取统计数据
-    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
-      })
-    }
-  }
-}
-</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/gasOverview.js b/src/api/gasOverview.js
index a8996f5..b7da600 100644
--- a/src/api/gasOverview.js
+++ b/src/api/gasOverview.js
@@ -53,8 +53,24 @@
     params
   })
 }
-// 查询二级分区各区用水量对比
-export function waterCompare(params) {
+// 查询二级分区燃气告警
+export function gasAlarmBySecondArea(params) {
+  return request({
+    url: 'dataStatistic/gasAlarmBySecondArea',
+    method: 'get',
+    params
+  })
+}
+// 各设备腐蚀速率统计
+export function corrRateByDevice(params) {
+  return request({
+    url: 'statics/corrRateByDevice',
+    method: 'get',
+    params
+  })
+}
+// 查询二级分区用气对比
+export function gasCompareData(params) {
   return request({
     url: 'gasStatistic/gasCompare',
     method: 'get',
diff --git a/src/views/gasDashboard/components/alarmGasCountByDept.vue b/src/views/gasDashboard/components/alarmGasCountByDept.vue
index 60ab5ad..b8bfc23 100644
--- a/src/views/gasDashboard/components/alarmGasCountByDept.vue
+++ b/src/views/gasDashboard/components/alarmGasCountByDept.vue
@@ -8,7 +8,7 @@
 </template>
 
 <script>
-import { alarmBySecondArea } from '@/api/gasOverview'
+import { gasAlarmBySecondArea } from '@/api/gasOverview'
 export default {
   name: 'AlarmGasCountByDept',
   props: {
@@ -64,7 +64,7 @@
   methods: {
     // 获取统计数据
     fetchData() {
-      alarmBySecondArea(this.query).then(response => {
+      gasAlarmBySecondArea(this.query).then(response => {
         this.chartData.rows = response.data
       })
     }
diff --git a/src/views/gasDashboard/components/corrodeCountByDay.vue b/src/views/gasDashboard/components/corrodeCountByDay.vue
index 3a97391..82c29bf 100644
--- a/src/views/gasDashboard/components/corrodeCountByDay.vue
+++ b/src/views/gasDashboard/components/corrodeCountByDay.vue
@@ -1,13 +1,30 @@
+<!--腐蚀速率走势图-->
 <template>
   <div class="container">
-    <ve-line :data="chartData" :title="title" :extend="extend" :settings="chartSettings"/>
+    <!-- <function-area
+      ref="func"
+      select="week"
+      @change="fetchData"
+    /> -->
+    <function-area
+      ref="func"
+      select="week"
+    />
+    <ve-line
+      :data="chartData"
+      :title="title"
+      :extend="extend"
+      :settings="chartSettings"
+    />
   </div>
 </template>
 
 <script>
-import { countByDaySecond } from '@/api/gasOverview'
+import FunctionArea from './FunctionArea'
+import { corrRateByDevice } from '@/api/gasOverview'
 export default {
-  name: 'WaterCountByDay',
+  name: 'CorrodeCountByDay',
+  components: { FunctionArea },
   props: {
     query: {
       type: Object,
@@ -22,10 +39,6 @@
   },
   data() {
     return {
-      listQuery: {
-        startTime: '',
-        endTime: ''
-      },
       title: {
         text: '腐蚀速率走势图'
       },
@@ -53,24 +66,62 @@
       }
     }
   },
-  watch: {
-    query(val) {
-      this.fetchData()
-    }
+  mounted() {
+    this.$refs.func.init()
+    this.getData()
   },
   methods: {
+    // 模拟数据
+    getData() {
+      const res = [
+        {
+          'date': '2021-10-01',
+          'data': [
+            { 'devcode': '1111', 'data': 10 },
+            { 'devcode': '1112', 'data': 2 },
+            { 'devcode': '1113', 'data': 3 }
+          ]
+        },
+        {
+          'date': '2021-10-02',
+          'data': [
+            { 'devcode': '1111', 'data': 1 },
+            { 'devcode': '1112', 'data': 6 },
+            { 'devcode': '1113', 'data': 1 }
+          ]
+        }
+      ]
+      const arr = res.map((item) => {
+        const result = { date: item.date }
+        for (let i = 0; i < item.data.length; i++) {
+          result[item.data[i].devcode] = item.data[i].data
+        }
+        return result
+      })
+      const area = res[0].data.map(item => item.devcode)
+      this.chartData.columns = ['date', ...area]
+      this.chartSettings.metrics = area
+      this.chartSettings.labelMap = { 'date': '日期' }
+      this.chartData.rows = arr
+    },
     // 获取数据
-    fetchData() {
-      countByDaySecond(this.query).then(response => {
+    fetchData(timeRange, type) {
+      const params = {
+        type: type || 'other',
+        beginTime: timeRange[0],
+        endTime: timeRange[1]
+      }
+      corrRateByDevice(params).then(response => {
+        console.log(response, '======腐蚀速率走势图response=====')
         if (response.data.length > 0) {
           const arr = response.data.map((item) => {
             const result = { date: item.date }
             for (let i = 0; i < item.data.length; i++) {
-              result[item.data[i].areaName] = item.data[i].count
+              result[item.data[i].devcode] = item.data[i].data
             }
             return result
           })
-          const area = response.data[0].data.map(item => item.areaName)
+          const area = response.data[0].data.map(item => item.devcode)
           this.chartData.columns = ['date', ...area]
           this.chartSettings.metrics = area
           this.chartSettings.labelMap = { 'date': '日期' }
diff --git a/src/views/gasDashboard/components/gasCompare.vue b/src/views/gasDashboard/components/gasCompare.vue
new file mode 100644
index 0000000..19a4398
--- /dev/null
+++ b/src/views/gasDashboard/components/gasCompare.vue
@@ -0,0 +1,121 @@
+<!--分区用气对比图-->
+<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 { gasCompareData } from '@/api/gasOverview'
+import FunctionArea from './FunctionArea'
+export default {
+  name: 'GasCompare',
+  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: true
+        },
+        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, type) {
+      const params = {
+        areaId: '110000',
+        type: type || 'other',
+        startTime: timeRange[0],
+        endTime: timeRange[1]
+      }
+      gasCompareData(params).then(response => {
+        this.isShow = false
+        this.chartSettings.labelMap = {
+          areaName: '分区',
+          last: response.data[0].lastTime,
+          now: response.data[0].nowTime
+        }
+        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.max = 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/gasDashboard/components/gasCountByAreaBar.vue b/src/views/gasDashboard/components/gasCountByAreaBar.vue
new file mode 100644
index 0000000..456a6c6
--- /dev/null
+++ b/src/views/gasDashboard/components/gasCountByAreaBar.vue
@@ -0,0 +1,198 @@
+<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 { countBySecondArea } from '@/api/gasOverview'
+import { getDayTime } from '@/utils/dateutils'
+import { getDoorAreaTree } from '@/api/system/area'
+import FunctionArea from './FunctionArea'
+
+export default {
+  name: 'GasCountByAreaBar',
+  components: { FunctionArea },
+  data() {
+    this.extend = {
+      legend: {
+        show: true
+      },
+      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': '分区',
+        'count': '用气量'
+      },
+      dimension: ['areaName'],
+      metrics: ['count']
+    }
+    return {
+      areaId: '',
+      areaList: [],
+      isShow: true,
+      defaultTimeRange: [],
+      timeRange: [],
+      pickerOptions: {
+        disabledDate: function(date) {
+          var oDate1 = new Date(date)
+          var oDate2 = new Date()
+          if (oDate1.getTime() > oDate2.getTime()) {
+            return true
+          } else {
+            return false
+          }
+        }
+      },
+      chartData: {
+        columns: ['wellTypeName', 'count'],
+        rows: []
+      }
+    }
+  },
+  mounted() {
+    this.$refs.func.init()
+    // this.setDefaultTime('week')
+    // 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()
+    },
+    fetchData(timeRange) {
+      const params = {
+        areaId: '110000',
+        startTime: timeRange[0],
+        endTime: timeRange[1]
+      }
+      this.$emit('change', params)
+      countBySecondArea(params).then(response => {
+        this.isShow = false
+        this.chartData.rows = response.data
+        this.isShow = true
+      })
+    },
+    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.fetchData(this.timeRange)
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+  .container{
+    position:relative;
+    .function{
+      width:calc(100% - 120px);
+      height: 28px;
+      display: flex;
+      justify-content: center;
+    }
+  }
+  .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/gasDashboard/components/gasCountByDay.vue b/src/views/gasDashboard/components/gasCountByDay.vue
new file mode 100644
index 0000000..79a4efb
--- /dev/null
+++ b/src/views/gasDashboard/components/gasCountByDay.vue
@@ -0,0 +1,146 @@
+<template>
+  <div class="container">
+    <ve-line :data="chartData" :title="title" :extend="extend" :settings="chartSettings"/>
+  </div>
+</template>
+
+<script>
+import { getDayTime } from '@/utils/dateutils'
+import { countByDaySecond } from '@/api/gasOverview'
+import { getDoorAreaTree } from '@/api/system/area'
+export default {
+  name: 'GasCountByDay',
+  props: {
+    query: {
+      type: Object,
+      default: () => {
+        return {
+          areaId: '',
+          startTime: '',
+          endTime: ''
+        }
+      }
+    }
+  },
+  data() {
+    return {
+      listQuery: {
+        startTime: '',
+        endTime: ''
+      },
+      title: {
+        text: '用气走势图'
+      },
+      chartSettings: {
+        labelMap: { date: '日期' },
+        metrics: [],
+        dimension: ['date']
+      },
+      extend: {
+        grid: {
+          top: 120
+        },
+        yAxis: {
+          name: '用气量（吨）',
+          position: 'left'
+        },
+        legend: {
+          // type: 'scroll',
+          top: '40px'
+        }
+      },
+      chartData: {
+        columns: [],
+        rows: []
+      }
+    }
+  },
+  watch: {
+    query(val) {
+      this.fetchData()
+    }
+  },
+  mounted() {
+    // this.changeTime('month')
+    // this.fetchArea()
+  },
+  methods: {
+    // 废弃
+    fetchArea() {
+      getDoorAreaTree().then(response => {
+        if (response.code === 200) {
+          debugger
+          const area = response.data.filter(item => {
+            return item.pid === '1'
+          }).map(item => item.name)
+          this.chartSettings.metrics = area
+          this.chartSettings.labelMap = {}
+          for (let i = 0; i < area.length; i++) {
+            this.chartSettings.labelMap[area[i]] = area[i]
+          }
+          this.chartData.columns = ['date', ...area]
+          this.fetchData()
+        }
+      })
+    },
+    // 获取数据
+    fetchData() {
+      countByDaySecond(this.query).then(response => {
+        console.log(response, '=====用气走势图====')
+        if (response.data.length > 0) {
+          const arr = response.data.map((item) => {
+            const result = { date: item.date }
+            for (let i = 0; i < item.data.length; i++) {
+              result[item.data[i].areaName] = item.data[i].count
+            }
+            return result
+          })
+          const area = response.data[0].data.map(item => item.areaName)
+          this.chartData.columns = ['date', ...area]
+          this.chartSettings.metrics = area
+          this.chartSettings.labelMap = { 'date': '日期' }
+          this.chartData.rows = arr
+        }
+      })
+      // 模拟数据
+      // this.chartData.rows = [
+      //   { date: '11月29日', dept1: 153, dept2: 43, dept3: 1, dept4: 1, dept5: 1, dept6: 7, dept7: 6, dept8: 2, dept9: 1, dept10: 3 },
+      //   { date: '11月30日', dept1: 150, dept2: 30, dept3: 2, dept4: 1, dept5: 4, dept6: 6, dept7: 3, dept8: 2, dept9: 1, dept10: 3 },
+      //   { date: '12月1日 ', dept1: 143, dept2: 23, dept3: 3, dept4: 2, dept5: 2, dept6: 7, dept7: 3, dept8: 2, dept9: 1, dept10: 3 },
+      //   { date: '12月2日 ', dept1: 173, dept2: 23, dept3: 4, dept4: 4, dept5: 1, dept6: 1, dept7: 8, dept8: 2, dept9: 1, dept10: 3 },
+      //   { date: '12月3日 ', dept1: 272, dept2: 52, dept3: 5, dept4: 1, dept5: 4, dept6: 7, dept7: 9, dept8: 2, dept9: 1, dept10: 3 },
+      //   { date: '12月4日 ', dept1: 253, dept2: 53, dept3: 6, dept4: 5, dept5: 5, dept6: 2, dept7: 9, dept8: 2, dept9: 1, dept10: 3 }
+      // ]
+    },
+    changeTime(timeType) {
+      let startTime
+      switch (timeType) {
+        case 'year':
+          startTime = getDayTime(new Date().getTime() - 24 * 365 * 60 * 60 * 1000)
+          this.listQuery.startTime = startTime.Format('yyyy-MM-dd')
+          break
+        case 'halfyear':
+          startTime = getDayTime(new Date().getTime() - 24 * 182 * 60 * 60 * 1000)
+          this.listQuery.startTime = startTime.Format('yyyy-MM-dd')
+          break
+        case '3month':
+          startTime = getDayTime(new Date().getTime() - 24 * 90 * 60 * 60 * 1000)
+          this.listQuery.startTime = startTime.Format('yyyy-MM-dd')
+          break
+        case 'month':
+          startTime = getDayTime(new Date().getTime() - 24 * 30 * 60 * 60 * 1000)
+          this.listQuery.startTime = startTime.Format('yyyy-MM-dd')
+          break
+        case 'week':
+          startTime = getDayTime(new Date().getTime() - 24 * 7 * 60 * 60 * 1000)
+          this.listQuery.startTime = startTime.Format('yyyy-MM-dd')
+          break
+      }
+      const endTime = new Date()
+      this.listQuery.endTime = endTime.Format('yyyy-MM-dd')
+      this.fetchData()
+    }
+  }
+}
+</script>
+
diff --git a/src/views/gasDashboard/components/gasCountByDept.vue b/src/views/gasDashboard/components/gasCountByDept.vue
new file mode 100644
index 0000000..31c8508
--- /dev/null
+++ b/src/views/gasDashboard/components/gasCountByDept.vue
@@ -0,0 +1,126 @@
+<!--suppress ALL -->
+<template>
+  <div class="container">
+    <ve-pie :data="chartData" :extend="extend" :title="title"/>
+  </div>
+</template>
+
+<script>
+import { countBySecondArea } from '@/api/gasOverview'
+import { getDoorAreaTree } from '@/api/system/area'
+export default {
+  name: 'GasCountByDept',
+  props: {
+    query: {
+      type: Object,
+      default: () => {
+        return {
+          areaId: '',
+          startTime: '',
+          endTime: ''
+        }
+      }
+    }
+  },
+  data() {
+    return {
+      listQuery: {
+        areaId: '',
+        startTime: '',
+        endTime: ''
+      },
+      areaId: '',
+      areaList: [],
+      chartData: {
+        columns: ['areaName', 'count'],
+        rows: []
+      },
+      extend: {
+        grid: {
+          right: '30%'
+        },
+        legend: {
+          type: 'scroll',
+          top: '60px',
+          right: '0px',
+          orient: 'vertical'
+        },
+        series: {
+          label: { show: true, position: 'outside', formatter: '{b}' },
+          right: 120
+        },
+        tooltip: { trigger: 'item', formatter: '{b}<br/>用气量：{c}吨<br/>占比：{d}%' }
+      },
+      title: {
+        text: '分区用气占比图'
+      },
+      chartSettings: {
+        labelMap: {
+          'areaName': '分区',
+          'count': '用气量'
+        },
+        dimension: 'areaName',
+        metrics: 'count'
+      }
+    }
+  },
+  watch: {
+    query(val) {
+      this.fetchData()
+    }
+  },
+  mounted() {
+    // TODO:待调试真接口
+    // 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()
+    },
+    // 获取统计数据
+    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
+      })
+    }
+  }
+}
+</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/gasDashboard/components/gasNote.vue b/src/views/gasDashboard/components/gasNote.vue
new file mode 100644
index 0000000..5ade90f
--- /dev/null
+++ b/src/views/gasDashboard/components/gasNote.vue
@@ -0,0 +1,149 @@
+<!--用水事记L -->
+<template>
+  <div class="container">
+    <div class="title">
+      场区用气事记
+      <i v-if="!editMode" class="el-icon-edit edit-btn" style="float:right" @click="editNote" />
+      <i v-else class="el-icon-check edit-btn" style="float:right" @click="saveNote" />
+    </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" />
+            <div style="width: 85px;display: flex;justify-content: flex-end">
+              <i v-show="index!==0" class="el-icon-top" @click="toTop(index)" />
+              <i v-show="index!==currentList.length-1" class="el-icon-bottom" @click="toBottom(index)" />
+              <i class="el-icon-delete" @click="deleteItem(index)" />
+            </div>
+          </div>
+        </div>
+        <div v-if="editMode&&currentList.length<10" class="content-line">
+          <i class="el-icon-circle-plus-outline icon-btn" @click="addItem()" />
+        </div>
+      </el-scrollbar>
+    </div>
+  </div>
+</template>
+
+<script>
+import { getNoteList, updateNoteList } from '@/api/dashboard'
+export default {
+  name: 'GasNote',
+  props: {
+    query: {
+      type: Object,
+      default: () => {
+        return {
+          areaId: '',
+          startTime: '',
+          endTime: ''
+        }
+      }
+    }
+  },
+  data() {
+    return {
+      editMode: false, // 编辑模式
+      originList: [], // 原始列表
+      currentList: [] // 当前列表
+    }
+  },
+  mounted() {
+    this.fetchData()
+  },
+  methods: {
+    // 获取统计数据
+    fetchData() {
+      // this.currentList = [
+      //   { 'content': '测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试', 'num': 1 },
+      //   { 'content': '测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试', 'num': 1 },
+      //   { 'content': '测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试', 'num': 1 },
+      //   { 'content': '测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试', 'num': 1 },
+      //   { 'content': '测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试', 'num': 1 }
+      // ]
+      // this.originList = JSON.parse(JSON.stringify(this.currentList))
+      getNoteList('2').then(response => {
+        this.currentList = JSON.parse(response.data[0].notes)
+      })
+    },
+    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 }
+      })
+      const params = {
+        type: '2',
+        list: currentList
+      }
+      updateNoteList(params).then(res => {
+        this.editMode = false
+        this.$message.success('保存成功')
+      }).catch(e => {
+        // this.currentList = JSON.parse(JSON.stringify(this.originList))
+      })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+  @import "@/styles/variables.scss";
+  .container{
+    position:relative;
+    height: 428px;
+    display: flex;
+    flex-direction: column;
+    .title{
+      font-weight: bolder;
+      font-size: 18px;
+      font-family: sans-serif;
+      color: #333;
+    }
+    .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/gasDashboard/components/watchAlarmBar.vue b/src/views/gasDashboard/components/watchAlarmBar.vue
index 8857807..4279440 100644
--- a/src/views/gasDashboard/components/watchAlarmBar.vue
+++ b/src/views/gasDashboard/components/watchAlarmBar.vue
@@ -2,33 +2,7 @@
 <template>
   <div class="container">
     <function-area ref="func" select="week" @change="fetchData"/>
-    <!--<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>-->
     <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>
 </template>
 
@@ -42,10 +16,10 @@
   components: { FunctionArea },
   data() {
     return {
-      title:{
+      title: {
         text: '气体流量计告警统计'
       },
-      chartSettings:{
+      chartSettings: {
         itemStyle: {
           barCategoryGap: 0
         },
@@ -83,7 +57,7 @@
         series: {
           label: { show: true, position: 'top', formatter: '{c}' },
           barWidth: 20
-        },
+        }
         // tooltip: { trigger: 'item', formatter: '{b}<br/>报警次数：{c}次' }
       },
       areaId: '',
diff --git a/src/views/gasDashboard/components/watchGasAlarmBar.vue b/src/views/gasDashboard/components/watchGasAlarmBar.vue
index 54783cc..0113341 100644
--- a/src/views/gasDashboard/components/watchGasAlarmBar.vue
+++ b/src/views/gasDashboard/components/watchGasAlarmBar.vue
@@ -1,14 +1,20 @@
 <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"/>
+    <ve-histogram
+      :data="chartData"
+      :grid="grid"
+      :extend="extend"
+      :title="title"
+      :settings="chartSettings"
+    />
   </div>
 </template>
 
 <script>
 // 引入视觉映射组件
 import 'echarts/lib/component/visualMap'
-import { alarmBySecondArea } from '@/api/gasOverview'
+import { gasAlarmBySecondArea } from '@/api/gasOverview'
 import functionArea from './FunctionArea'
 export default {
   name: 'WatchGasAlarmBar',
@@ -18,26 +24,7 @@
       title: {
         text: '燃气告警统计'
       },
-      chartSettings: {
-        itemStyle: {
-          barCategoryGap: 0
-        },
-        labelMap: {
-          'areaName': '分区',
-          'alarm': '报警数'
-        },
-        dimension: ['areaName'],
-        metrics: ['alarm']
-      },
-      grid: {
-        right: 40,
-        top: 80,
-        bottom: 5
-      },
       extend: {
-        legend: {
-          show: true
-        },
         xAxis: {
           axisLabel: {
             rotate: 30,
@@ -53,31 +40,34 @@
           max: 10
         },
         series: {
-          label: { show: true, position: 'top', formatter: '{c}' },
-          barWidth: 20
+          label: { show: true, position: 'top' },
+          barMaxWidth: 35 // 最大柱宽度
         }
-        // tooltip: { trigger: 'item', formatter: '{b}<br/>报警次数：{c}次' }
+      },
+      grid: {
+        right: 60
+      },
+      chartSettings: {
+        itemStyle: {
+          'barCategoryGap': 5
+        },
+        barWidth: 15,
+        labelMap: {
+          'areaName': '区域',
+          'alarm': '报警数'
+        },
+        dimension: ['areaName'],
+        metrics: ['alarm']
+      },
+      chartData: {
+        columns: ['areaName', 'alarm'],
+        rows: []
       },
       areaId: '',
       areaList: [],
       isShow: true,
       defaultTimeRange: [],
-      timeRange: [],
-      pickerOptions: {
-        disabledDate: function(date) {
-          var oDate1 = new Date(date)
-          var oDate2 = new Date()
-          if (oDate1.getTime() > oDate2.getTime()) {
-            return true
-          } else {
-            return false
-          }
-        }
-      },
-      chartData: {
-        columns: ['areaName', 'alarm'],
-        rows: []
-      }
+      timeRange: []
     }
   },
   mounted() {
@@ -93,15 +83,9 @@
         endTime: timeRange[1]
       }
       this.$emit('change', params)
-      alarmBySecondArea(params).then(response => {
+      gasAlarmBySecondArea(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.max = maxValue + 1
-        }
         this.isShow = true
       })
     }
diff --git a/src/views/gasDashboard/components/waterCompare.vue b/src/views/gasDashboard/components/waterCompare.vue
deleted file mode 100644
index 11f0a7d..0000000
--- a/src/views/gasDashboard/components/waterCompare.vue
+++ /dev/null
@@ -1,121 +0,0 @@
-<!--分区用气对比图-->
-<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 { waterCompare } from '@/api/gasOverview'
-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: true
-        },
-        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, type) {
-      const params = {
-        areaId: '110000',
-        type: type || 'other',
-        startTime: timeRange[0],
-        endTime: timeRange[1]
-      }
-      waterCompare(params).then(response => {
-        this.isShow = false
-        this.chartSettings.labelMap = {
-          areaName: '分区',
-          last: response.data[0].lastTime,
-          now: response.data[0].nowTime
-        }
-        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.max = 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/gasDashboard/components/waterCountByAreaBar.vue b/src/views/gasDashboard/components/waterCountByAreaBar.vue
deleted file mode 100644
index d02d54c..0000000
--- a/src/views/gasDashboard/components/waterCountByAreaBar.vue
+++ /dev/null
@@ -1,198 +0,0 @@
-<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 { countBySecondArea } from '@/api/gasOverview'
-import { getDayTime } from '@/utils/dateutils'
-import { getDoorAreaTree } from '@/api/system/area'
-import FunctionArea from './FunctionArea'
-
-export default {
-  name: 'WaterCountByAreaBar',
-  components: { FunctionArea },
-  data() {
-    this.extend = {
-      legend: {
-        show: true
-      },
-      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': '分区',
-        'count': '用气量'
-      },
-      dimension: ['areaName'],
-      metrics: ['count']
-    }
-    return {
-      areaId: '',
-      areaList: [],
-      isShow: true,
-      defaultTimeRange: [],
-      timeRange: [],
-      pickerOptions: {
-        disabledDate: function(date) {
-          var oDate1 = new Date(date)
-          var oDate2 = new Date()
-          if (oDate1.getTime() > oDate2.getTime()) {
-            return true
-          } else {
-            return false
-          }
-        }
-      },
-      chartData: {
-        columns: ['wellTypeName', 'count'],
-        rows: []
-      }
-    }
-  },
-  mounted() {
-    this.$refs.func.init()
-    // this.setDefaultTime('week')
-    // 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()
-    },
-    fetchData(timeRange) {
-      const params = {
-        areaId: '110000',
-        startTime: timeRange[0],
-        endTime: timeRange[1]
-      }
-      this.$emit('change', params)
-      countBySecondArea(params).then(response => {
-        this.isShow = false
-        this.chartData.rows = response.data
-        this.isShow = true
-      })
-    },
-    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.fetchData(this.timeRange)
-    }
-  }
-}
-</script>
-<style lang="scss" scoped>
-  .container{
-    position:relative;
-    .function{
-      width:calc(100% - 120px);
-      height: 28px;
-      display: flex;
-      justify-content: center;
-    }
-  }
-  .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/gasDashboard/components/waterCountByDay.vue b/src/views/gasDashboard/components/waterCountByDay.vue
deleted file mode 100644
index 53297a2..0000000
--- a/src/views/gasDashboard/components/waterCountByDay.vue
+++ /dev/null
@@ -1,157 +0,0 @@
-<template>
-  <div class="container">
-    <!--<div class="function">-->
-      <!--<el-button round size="mini" @click="changeTime('year')">近1年</el-button>-->
-      <!--<el-button round size="mini" @click="changeTime('halfyear')">近6月</el-button>-->
-      <!--<el-button round size="mini" @click="changeTime('3month')">近3月</el-button>-->
-      <!--<el-button round size="mini" @click="changeTime('month')">近1月</el-button>-->
-      <!--<el-button round size="mini" @click="changeTime('week')">近1周</el-button>-->
-    <!--</div>-->
-    <ve-line :data="chartData" :title="title" :extend="extend" :settings="chartSettings"/>
-  </div>
-</template>
-
-<script>
-import { getDayTime } from '@/utils/dateutils'
-import { countByDaySecond } from '@/api/gasOverview'
-import { getDoorAreaTree } from '@/api/system/area'
-export default {
-  name: 'WaterCountByDay',
-  props:{
-    query: {
-      type: Object,
-      default:()=>{
-        return {
-          areaId: '',
-          startTime: '',
-          endTime: ''
-        }
-      }
-    }
-  },
-  data() {
-    return {
-      listQuery: {
-        startTime: '',
-        endTime: ''
-      },
-      title: {
-        text: '用气走势图'
-      },
-      chartSettings: {
-        labelMap: {date:'日期'},
-        metrics: [],
-        dimension: ['date']
-      },
-      extend: {
-        grid: {
-          top: 120
-        },
-        yAxis: {
-          name: '用气量（吨）',
-          position: 'left'
-        },
-        legend: {
-          // type: 'scroll',
-          top: '40px'
-        }
-      },
-      chartData: {
-        columns: [],
-        rows: []
-      }
-    }
-  },
-  mounted() {
-    // this.changeTime('month')
-    // this.fetchArea()
-  },
-  watch:{
-    query(val){
-      this.fetchData()
-    }
-  },
-  methods: {
-    // 废弃
-    fetchArea() {
-      getDoorAreaTree().then(response => {
-        if (response.code === 200) {
-          debugger
-          const area = response.data.filter(item => {
-            return item.pid === '1'
-          }).map(item => item.name)
-          this.chartSettings.metrics = area
-          this.chartSettings.labelMap = {}
-          for (let i = 0; i < area.length; i++) {
-            this.chartSettings.labelMap[area[i]] = area[i]
-          }
-          this.chartData.columns = ['date', ...area]
-          this.fetchData()
-        }
-      })
-    },
-    // 获取数据
-    fetchData() {
-      countByDaySecond(this.query).then(response => {
-        if(response.data.length>0){
-          const arr = response.data.map((item)=> {
-            const result = {date: item.date}
-            for (let i = 0; i < item.data.length; i++) {
-              result[item.data[i].areaName] = item.data[i].count
-            }
-            return result
-          })
-          const area = response.data[0].data.map(item=>item.areaName)
-          this.chartData.columns = ['date', ...area]
-          this.chartSettings.metrics = area
-          this.chartSettings.labelMap = {'date':'日期'}
-          this.chartData.rows = arr
-        }
-      })
-      // 模拟数据
-      // this.chartData.rows = [
-      //   { date: '11月29日', dept1: 153, dept2: 43, dept3: 1, dept4: 1, dept5: 1, dept6: 7, dept7: 6, dept8: 2, dept9: 1, dept10: 3 },
-      //   { date: '11月30日', dept1: 150, dept2: 30, dept3: 2, dept4: 1, dept5: 4, dept6: 6, dept7: 3, dept8: 2, dept9: 1, dept10: 3 },
-      //   { date: '12月1日 ', dept1: 143, dept2: 23, dept3: 3, dept4: 2, dept5: 2, dept6: 7, dept7: 3, dept8: 2, dept9: 1, dept10: 3 },
-      //   { date: '12月2日 ', dept1: 173, dept2: 23, dept3: 4, dept4: 4, dept5: 1, dept6: 1, dept7: 8, dept8: 2, dept9: 1, dept10: 3 },
-      //   { date: '12月3日 ', dept1: 272, dept2: 52, dept3: 5, dept4: 1, dept5: 4, dept6: 7, dept7: 9, dept8: 2, dept9: 1, dept10: 3 },
-      //   { date: '12月4日 ', dept1: 253, dept2: 53, dept3: 6, dept4: 5, dept5: 5, dept6: 2, dept7: 9, dept8: 2, dept9: 1, dept10: 3 }
-      // ]
-    },
-    changeTime(timeType) {
-      let startTime
-      switch (timeType) {
-        case 'year':
-          startTime = getDayTime(new Date().getTime() - 24 * 365 * 60 * 60 * 1000)
-          this.listQuery.startTime = startTime.Format('yyyy-MM-dd')
-          break
-        case 'halfyear':
-          startTime = getDayTime(new Date().getTime() - 24 * 182 * 60 * 60 * 1000)
-          this.listQuery.startTime = startTime.Format('yyyy-MM-dd')
-          break
-        case '3month':
-          startTime = getDayTime(new Date().getTime() - 24 * 90 * 60 * 60 * 1000)
-          this.listQuery.startTime = startTime.Format('yyyy-MM-dd')
-          break
-        case 'month':
-          startTime = getDayTime(new Date().getTime() - 24 * 30 * 60 * 60 * 1000)
-          this.listQuery.startTime = startTime.Format('yyyy-MM-dd')
-          break
-        case 'week':
-          startTime = getDayTime(new Date().getTime() - 24 * 7 * 60 * 60 * 1000)
-          this.listQuery.startTime = startTime.Format('yyyy-MM-dd')
-          break
-      }
-      const endTime = new Date()
-      this.listQuery.endTime = endTime.Format('yyyy-MM-dd')
-      this.fetchData()
-    }
-  }
-}
-</script>
-<style lang="scss" scoped>
-  .container{
-
-  }
-</style>
-
diff --git a/src/views/gasDashboard/components/waterCountByDept.vue b/src/views/gasDashboard/components/waterCountByDept.vue
deleted file mode 100644
index b09409a..0000000
--- a/src/views/gasDashboard/components/waterCountByDept.vue
+++ /dev/null
@@ -1,126 +0,0 @@
-<!--suppress ALL -->
-<template>
-  <div class="container">
-    <ve-pie :data="chartData" :extend="extend" :title="title"/>
-  </div>
-</template>
-
-<script>
-import { countBySecondArea } from '@/api/gasOverview'
-import { getDoorAreaTree } from '@/api/system/area'
-export default {
-  name: 'WaterCountByDepy',
-  props: {
-    query: {
-      type: Object,
-      default: () => {
-        return {
-          areaId: '',
-          startTime: '',
-          endTime: ''
-        }
-      }
-    }
-  },
-  data() {
-    return {
-      listQuery: {
-        areaId: '',
-        startTime: '',
-        endTime: ''
-      },
-      areaId: '',
-      areaList: [],
-      chartData: {
-        columns: ['areaName', 'count'],
-        rows: []
-      },
-      extend: {
-        grid: {
-          right: '30%'
-        },
-        legend: {
-          type: 'scroll',
-          top: '60px',
-          right: '0px',
-          orient: 'vertical'
-        },
-        series: {
-          label: { show: true, position: 'outside', formatter: '{b}' },
-          right: 120
-        },
-        tooltip: { trigger: 'item', formatter: '{b}<br/>用气量：{c}吨<br/>占比：{d}%' }
-      },
-      title: {
-        text: '分区用气占比图'
-      },
-      chartSettings: {
-        labelMap: {
-          'areaName': '分区',
-          'count': '用气量'
-        },
-        dimension: 'areaName',
-        metrics: 'count'
-      }
-    }
-  },
-  watch: {
-    query(val) {
-      this.fetchData()
-    }
-  },
-  mounted() {
-    // TODO:待调试真接口
-    // 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()
-    },
-    // 获取统计数据
-    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
-      })
-    }
-  }
-}
-</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/gasDashboard/components/waterNote.vue b/src/views/gasDashboard/components/waterNote.vue
deleted file mode 100644
index 42e5e36..0000000
--- a/src/views/gasDashboard/components/waterNote.vue
+++ /dev/null
@@ -1,149 +0,0 @@
-<!--用水事记L -->
-<template>
-  <div class="container">
-    <div class="title">
-      场区用气事记
-      <i v-if="!editMode" class="el-icon-edit edit-btn" style="float:right" @click="editNote" />
-      <i v-else class="el-icon-check edit-btn" style="float:right" @click="saveNote" />
-    </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" />
-            <div style="width: 85px;display: flex;justify-content: flex-end">
-              <i v-show="index!==0" class="el-icon-top" @click="toTop(index)" />
-              <i v-show="index!==currentList.length-1" class="el-icon-bottom" @click="toBottom(index)" />
-              <i class="el-icon-delete" @click="deleteItem(index)" />
-            </div>
-          </div>
-        </div>
-        <div v-if="editMode&&currentList.length<10" class="content-line">
-          <i class="el-icon-circle-plus-outline icon-btn" @click="addItem()" />
-        </div>
-      </el-scrollbar>
-    </div>
-  </div>
-</template>
-
-<script>
-import { getNoteList, updateNoteList } from '@/api/dashboard'
-export default {
-  name: 'WaterNote',
-  props: {
-    query: {
-      type: Object,
-      default: () => {
-        return {
-          areaId: '',
-          startTime: '',
-          endTime: ''
-        }
-      }
-    }
-  },
-  data() {
-    return {
-      editMode: false, // 编辑模式
-      originList: [], // 原始列表
-      currentList: [] // 当前列表
-    }
-  },
-  mounted() {
-    this.fetchData()
-  },
-  methods: {
-    // 获取统计数据
-    fetchData() {
-      // this.currentList = [
-      //   { 'content': '测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试', 'num': 1 },
-      //   { 'content': '测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试', 'num': 1 },
-      //   { 'content': '测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试', 'num': 1 },
-      //   { 'content': '测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试', 'num': 1 },
-      //   { 'content': '测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试', 'num': 1 }
-      // ]
-      // this.originList = JSON.parse(JSON.stringify(this.currentList))
-      getNoteList('2').then(response => {
-        this.currentList = JSON.parse(response.data[0].notes)
-      })
-    },
-    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 }
-      })
-      const params = {
-        type: '2',
-        list: currentList
-      }
-      updateNoteList(params).then(res => {
-        this.editMode = false
-        this.$message.success('保存成功')
-      }).catch(e => {
-        // this.currentList = JSON.parse(JSON.stringify(this.originList))
-      })
-    }
-  }
-}
-</script>
-<style lang="scss" scoped>
-  @import "@/styles/variables.scss";
-  .container{
-    position:relative;
-    height: 428px;
-    display: flex;
-    flex-direction: column;
-    .title{
-      font-weight: bolder;
-      font-size: 18px;
-      font-family: sans-serif;
-      color: #333;
-    }
-    .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/gasOverview.js b/src/api/gasOverview.js
index a8996f5..b7da600 100644
--- a/src/api/gasOverview.js
+++ b/src/api/gasOverview.js
@@ -53,8 +53,24 @@
     params
   })
 }
-// 查询二级分区各区用水量对比
-export function waterCompare(params) {
+// 查询二级分区燃气告警
+export function gasAlarmBySecondArea(params) {
+  return request({
+    url: 'dataStatistic/gasAlarmBySecondArea',
+    method: 'get',
+    params
+  })
+}
+// 各设备腐蚀速率统计
+export function corrRateByDevice(params) {
+  return request({
+    url: 'statics/corrRateByDevice',
+    method: 'get',
+    params
+  })
+}
+// 查询二级分区用气对比
+export function gasCompareData(params) {
   return request({
     url: 'gasStatistic/gasCompare',
     method: 'get',
diff --git a/src/views/gasDashboard/components/alarmGasCountByDept.vue b/src/views/gasDashboard/components/alarmGasCountByDept.vue
index 60ab5ad..b8bfc23 100644
--- a/src/views/gasDashboard/components/alarmGasCountByDept.vue
+++ b/src/views/gasDashboard/components/alarmGasCountByDept.vue
@@ -8,7 +8,7 @@
 </template>
 
 <script>
-import { alarmBySecondArea } from '@/api/gasOverview'
+import { gasAlarmBySecondArea } from '@/api/gasOverview'
 export default {
   name: 'AlarmGasCountByDept',
   props: {
@@ -64,7 +64,7 @@
   methods: {
     // 获取统计数据
     fetchData() {
-      alarmBySecondArea(this.query).then(response => {
+      gasAlarmBySecondArea(this.query).then(response => {
         this.chartData.rows = response.data
       })
     }
diff --git a/src/views/gasDashboard/components/corrodeCountByDay.vue b/src/views/gasDashboard/components/corrodeCountByDay.vue
index 3a97391..82c29bf 100644
--- a/src/views/gasDashboard/components/corrodeCountByDay.vue
+++ b/src/views/gasDashboard/components/corrodeCountByDay.vue
@@ -1,13 +1,30 @@
+<!--腐蚀速率走势图-->
 <template>
   <div class="container">
-    <ve-line :data="chartData" :title="title" :extend="extend" :settings="chartSettings"/>
+    <!-- <function-area
+      ref="func"
+      select="week"
+      @change="fetchData"
+    /> -->
+    <function-area
+      ref="func"
+      select="week"
+    />
+    <ve-line
+      :data="chartData"
+      :title="title"
+      :extend="extend"
+      :settings="chartSettings"
+    />
   </div>
 </template>
 
 <script>
-import { countByDaySecond } from '@/api/gasOverview'
+import FunctionArea from './FunctionArea'
+import { corrRateByDevice } from '@/api/gasOverview'
 export default {
-  name: 'WaterCountByDay',
+  name: 'CorrodeCountByDay',
+  components: { FunctionArea },
   props: {
     query: {
       type: Object,
@@ -22,10 +39,6 @@
   },
   data() {
     return {
-      listQuery: {
-        startTime: '',
-        endTime: ''
-      },
       title: {
         text: '腐蚀速率走势图'
       },
@@ -53,24 +66,62 @@
       }
     }
   },
-  watch: {
-    query(val) {
-      this.fetchData()
-    }
+  mounted() {
+    this.$refs.func.init()
+    this.getData()
   },
   methods: {
+    // 模拟数据
+    getData() {
+      const res = [
+        {
+          'date': '2021-10-01',
+          'data': [
+            { 'devcode': '1111', 'data': 10 },
+            { 'devcode': '1112', 'data': 2 },
+            { 'devcode': '1113', 'data': 3 }
+          ]
+        },
+        {
+          'date': '2021-10-02',
+          'data': [
+            { 'devcode': '1111', 'data': 1 },
+            { 'devcode': '1112', 'data': 6 },
+            { 'devcode': '1113', 'data': 1 }
+          ]
+        }
+      ]
+      const arr = res.map((item) => {
+        const result = { date: item.date }
+        for (let i = 0; i < item.data.length; i++) {
+          result[item.data[i].devcode] = item.data[i].data
+        }
+        return result
+      })
+      const area = res[0].data.map(item => item.devcode)
+      this.chartData.columns = ['date', ...area]
+      this.chartSettings.metrics = area
+      this.chartSettings.labelMap = { 'date': '日期' }
+      this.chartData.rows = arr
+    },
     // 获取数据
-    fetchData() {
-      countByDaySecond(this.query).then(response => {
+    fetchData(timeRange, type) {
+      const params = {
+        type: type || 'other',
+        beginTime: timeRange[0],
+        endTime: timeRange[1]
+      }
+      corrRateByDevice(params).then(response => {
+        console.log(response, '======腐蚀速率走势图response=====')
         if (response.data.length > 0) {
           const arr = response.data.map((item) => {
             const result = { date: item.date }
             for (let i = 0; i < item.data.length; i++) {
-              result[item.data[i].areaName] = item.data[i].count
+              result[item.data[i].devcode] = item.data[i].data
             }
             return result
           })
-          const area = response.data[0].data.map(item => item.areaName)
+          const area = response.data[0].data.map(item => item.devcode)
           this.chartData.columns = ['date', ...area]
           this.chartSettings.metrics = area
           this.chartSettings.labelMap = { 'date': '日期' }
diff --git a/src/views/gasDashboard/components/gasCompare.vue b/src/views/gasDashboard/components/gasCompare.vue
new file mode 100644
index 0000000..19a4398
--- /dev/null
+++ b/src/views/gasDashboard/components/gasCompare.vue
@@ -0,0 +1,121 @@
+<!--分区用气对比图-->
+<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 { gasCompareData } from '@/api/gasOverview'
+import FunctionArea from './FunctionArea'
+export default {
+  name: 'GasCompare',
+  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: true
+        },
+        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, type) {
+      const params = {
+        areaId: '110000',
+        type: type || 'other',
+        startTime: timeRange[0],
+        endTime: timeRange[1]
+      }
+      gasCompareData(params).then(response => {
+        this.isShow = false
+        this.chartSettings.labelMap = {
+          areaName: '分区',
+          last: response.data[0].lastTime,
+          now: response.data[0].nowTime
+        }
+        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.max = 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/gasDashboard/components/gasCountByAreaBar.vue b/src/views/gasDashboard/components/gasCountByAreaBar.vue
new file mode 100644
index 0000000..456a6c6
--- /dev/null
+++ b/src/views/gasDashboard/components/gasCountByAreaBar.vue
@@ -0,0 +1,198 @@
+<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 { countBySecondArea } from '@/api/gasOverview'
+import { getDayTime } from '@/utils/dateutils'
+import { getDoorAreaTree } from '@/api/system/area'
+import FunctionArea from './FunctionArea'
+
+export default {
+  name: 'GasCountByAreaBar',
+  components: { FunctionArea },
+  data() {
+    this.extend = {
+      legend: {
+        show: true
+      },
+      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': '分区',
+        'count': '用气量'
+      },
+      dimension: ['areaName'],
+      metrics: ['count']
+    }
+    return {
+      areaId: '',
+      areaList: [],
+      isShow: true,
+      defaultTimeRange: [],
+      timeRange: [],
+      pickerOptions: {
+        disabledDate: function(date) {
+          var oDate1 = new Date(date)
+          var oDate2 = new Date()
+          if (oDate1.getTime() > oDate2.getTime()) {
+            return true
+          } else {
+            return false
+          }
+        }
+      },
+      chartData: {
+        columns: ['wellTypeName', 'count'],
+        rows: []
+      }
+    }
+  },
+  mounted() {
+    this.$refs.func.init()
+    // this.setDefaultTime('week')
+    // 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()
+    },
+    fetchData(timeRange) {
+      const params = {
+        areaId: '110000',
+        startTime: timeRange[0],
+        endTime: timeRange[1]
+      }
+      this.$emit('change', params)
+      countBySecondArea(params).then(response => {
+        this.isShow = false
+        this.chartData.rows = response.data
+        this.isShow = true
+      })
+    },
+    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.fetchData(this.timeRange)
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+  .container{
+    position:relative;
+    .function{
+      width:calc(100% - 120px);
+      height: 28px;
+      display: flex;
+      justify-content: center;
+    }
+  }
+  .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/gasDashboard/components/gasCountByDay.vue b/src/views/gasDashboard/components/gasCountByDay.vue
new file mode 100644
index 0000000..79a4efb
--- /dev/null
+++ b/src/views/gasDashboard/components/gasCountByDay.vue
@@ -0,0 +1,146 @@
+<template>
+  <div class="container">
+    <ve-line :data="chartData" :title="title" :extend="extend" :settings="chartSettings"/>
+  </div>
+</template>
+
+<script>
+import { getDayTime } from '@/utils/dateutils'
+import { countByDaySecond } from '@/api/gasOverview'
+import { getDoorAreaTree } from '@/api/system/area'
+export default {
+  name: 'GasCountByDay',
+  props: {
+    query: {
+      type: Object,
+      default: () => {
+        return {
+          areaId: '',
+          startTime: '',
+          endTime: ''
+        }
+      }
+    }
+  },
+  data() {
+    return {
+      listQuery: {
+        startTime: '',
+        endTime: ''
+      },
+      title: {
+        text: '用气走势图'
+      },
+      chartSettings: {
+        labelMap: { date: '日期' },
+        metrics: [],
+        dimension: ['date']
+      },
+      extend: {
+        grid: {
+          top: 120
+        },
+        yAxis: {
+          name: '用气量（吨）',
+          position: 'left'
+        },
+        legend: {
+          // type: 'scroll',
+          top: '40px'
+        }
+      },
+      chartData: {
+        columns: [],
+        rows: []
+      }
+    }
+  },
+  watch: {
+    query(val) {
+      this.fetchData()
+    }
+  },
+  mounted() {
+    // this.changeTime('month')
+    // this.fetchArea()
+  },
+  methods: {
+    // 废弃
+    fetchArea() {
+      getDoorAreaTree().then(response => {
+        if (response.code === 200) {
+          debugger
+          const area = response.data.filter(item => {
+            return item.pid === '1'
+          }).map(item => item.name)
+          this.chartSettings.metrics = area
+          this.chartSettings.labelMap = {}
+          for (let i = 0; i < area.length; i++) {
+            this.chartSettings.labelMap[area[i]] = area[i]
+          }
+          this.chartData.columns = ['date', ...area]
+          this.fetchData()
+        }
+      })
+    },
+    // 获取数据
+    fetchData() {
+      countByDaySecond(this.query).then(response => {
+        console.log(response, '=====用气走势图====')
+        if (response.data.length > 0) {
+          const arr = response.data.map((item) => {
+            const result = { date: item.date }
+            for (let i = 0; i < item.data.length; i++) {
+              result[item.data[i].areaName] = item.data[i].count
+            }
+            return result
+          })
+          const area = response.data[0].data.map(item => item.areaName)
+          this.chartData.columns = ['date', ...area]
+          this.chartSettings.metrics = area
+          this.chartSettings.labelMap = { 'date': '日期' }
+          this.chartData.rows = arr
+        }
+      })
+      // 模拟数据
+      // this.chartData.rows = [
+      //   { date: '11月29日', dept1: 153, dept2: 43, dept3: 1, dept4: 1, dept5: 1, dept6: 7, dept7: 6, dept8: 2, dept9: 1, dept10: 3 },
+      //   { date: '11月30日', dept1: 150, dept2: 30, dept3: 2, dept4: 1, dept5: 4, dept6: 6, dept7: 3, dept8: 2, dept9: 1, dept10: 3 },
+      //   { date: '12月1日 ', dept1: 143, dept2: 23, dept3: 3, dept4: 2, dept5: 2, dept6: 7, dept7: 3, dept8: 2, dept9: 1, dept10: 3 },
+      //   { date: '12月2日 ', dept1: 173, dept2: 23, dept3: 4, dept4: 4, dept5: 1, dept6: 1, dept7: 8, dept8: 2, dept9: 1, dept10: 3 },
+      //   { date: '12月3日 ', dept1: 272, dept2: 52, dept3: 5, dept4: 1, dept5: 4, dept6: 7, dept7: 9, dept8: 2, dept9: 1, dept10: 3 },
+      //   { date: '12月4日 ', dept1: 253, dept2: 53, dept3: 6, dept4: 5, dept5: 5, dept6: 2, dept7: 9, dept8: 2, dept9: 1, dept10: 3 }
+      // ]
+    },
+    changeTime(timeType) {
+      let startTime
+      switch (timeType) {
+        case 'year':
+          startTime = getDayTime(new Date().getTime() - 24 * 365 * 60 * 60 * 1000)
+          this.listQuery.startTime = startTime.Format('yyyy-MM-dd')
+          break
+        case 'halfyear':
+          startTime = getDayTime(new Date().getTime() - 24 * 182 * 60 * 60 * 1000)
+          this.listQuery.startTime = startTime.Format('yyyy-MM-dd')
+          break
+        case '3month':
+          startTime = getDayTime(new Date().getTime() - 24 * 90 * 60 * 60 * 1000)
+          this.listQuery.startTime = startTime.Format('yyyy-MM-dd')
+          break
+        case 'month':
+          startTime = getDayTime(new Date().getTime() - 24 * 30 * 60 * 60 * 1000)
+          this.listQuery.startTime = startTime.Format('yyyy-MM-dd')
+          break
+        case 'week':
+          startTime = getDayTime(new Date().getTime() - 24 * 7 * 60 * 60 * 1000)
+          this.listQuery.startTime = startTime.Format('yyyy-MM-dd')
+          break
+      }
+      const endTime = new Date()
+      this.listQuery.endTime = endTime.Format('yyyy-MM-dd')
+      this.fetchData()
+    }
+  }
+}
+</script>
+
diff --git a/src/views/gasDashboard/components/gasCountByDept.vue b/src/views/gasDashboard/components/gasCountByDept.vue
new file mode 100644
index 0000000..31c8508
--- /dev/null
+++ b/src/views/gasDashboard/components/gasCountByDept.vue
@@ -0,0 +1,126 @@
+<!--suppress ALL -->
+<template>
+  <div class="container">
+    <ve-pie :data="chartData" :extend="extend" :title="title"/>
+  </div>
+</template>
+
+<script>
+import { countBySecondArea } from '@/api/gasOverview'
+import { getDoorAreaTree } from '@/api/system/area'
+export default {
+  name: 'GasCountByDept',
+  props: {
+    query: {
+      type: Object,
+      default: () => {
+        return {
+          areaId: '',
+          startTime: '',
+          endTime: ''
+        }
+      }
+    }
+  },
+  data() {
+    return {
+      listQuery: {
+        areaId: '',
+        startTime: '',
+        endTime: ''
+      },
+      areaId: '',
+      areaList: [],
+      chartData: {
+        columns: ['areaName', 'count'],
+        rows: []
+      },
+      extend: {
+        grid: {
+          right: '30%'
+        },
+        legend: {
+          type: 'scroll',
+          top: '60px',
+          right: '0px',
+          orient: 'vertical'
+        },
+        series: {
+          label: { show: true, position: 'outside', formatter: '{b}' },
+          right: 120
+        },
+        tooltip: { trigger: 'item', formatter: '{b}<br/>用气量：{c}吨<br/>占比：{d}%' }
+      },
+      title: {
+        text: '分区用气占比图'
+      },
+      chartSettings: {
+        labelMap: {
+          'areaName': '分区',
+          'count': '用气量'
+        },
+        dimension: 'areaName',
+        metrics: 'count'
+      }
+    }
+  },
+  watch: {
+    query(val) {
+      this.fetchData()
+    }
+  },
+  mounted() {
+    // TODO:待调试真接口
+    // 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()
+    },
+    // 获取统计数据
+    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
+      })
+    }
+  }
+}
+</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/gasDashboard/components/gasNote.vue b/src/views/gasDashboard/components/gasNote.vue
new file mode 100644
index 0000000..5ade90f
--- /dev/null
+++ b/src/views/gasDashboard/components/gasNote.vue
@@ -0,0 +1,149 @@
+<!--用水事记L -->
+<template>
+  <div class="container">
+    <div class="title">
+      场区用气事记
+      <i v-if="!editMode" class="el-icon-edit edit-btn" style="float:right" @click="editNote" />
+      <i v-else class="el-icon-check edit-btn" style="float:right" @click="saveNote" />
+    </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" />
+            <div style="width: 85px;display: flex;justify-content: flex-end">
+              <i v-show="index!==0" class="el-icon-top" @click="toTop(index)" />
+              <i v-show="index!==currentList.length-1" class="el-icon-bottom" @click="toBottom(index)" />
+              <i class="el-icon-delete" @click="deleteItem(index)" />
+            </div>
+          </div>
+        </div>
+        <div v-if="editMode&&currentList.length<10" class="content-line">
+          <i class="el-icon-circle-plus-outline icon-btn" @click="addItem()" />
+        </div>
+      </el-scrollbar>
+    </div>
+  </div>
+</template>
+
+<script>
+import { getNoteList, updateNoteList } from '@/api/dashboard'
+export default {
+  name: 'GasNote',
+  props: {
+    query: {
+      type: Object,
+      default: () => {
+        return {
+          areaId: '',
+          startTime: '',
+          endTime: ''
+        }
+      }
+    }
+  },
+  data() {
+    return {
+      editMode: false, // 编辑模式
+      originList: [], // 原始列表
+      currentList: [] // 当前列表
+    }
+  },
+  mounted() {
+    this.fetchData()
+  },
+  methods: {
+    // 获取统计数据
+    fetchData() {
+      // this.currentList = [
+      //   { 'content': '测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试', 'num': 1 },
+      //   { 'content': '测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试', 'num': 1 },
+      //   { 'content': '测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试', 'num': 1 },
+      //   { 'content': '测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试', 'num': 1 },
+      //   { 'content': '测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试', 'num': 1 }
+      // ]
+      // this.originList = JSON.parse(JSON.stringify(this.currentList))
+      getNoteList('2').then(response => {
+        this.currentList = JSON.parse(response.data[0].notes)
+      })
+    },
+    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 }
+      })
+      const params = {
+        type: '2',
+        list: currentList
+      }
+      updateNoteList(params).then(res => {
+        this.editMode = false
+        this.$message.success('保存成功')
+      }).catch(e => {
+        // this.currentList = JSON.parse(JSON.stringify(this.originList))
+      })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+  @import "@/styles/variables.scss";
+  .container{
+    position:relative;
+    height: 428px;
+    display: flex;
+    flex-direction: column;
+    .title{
+      font-weight: bolder;
+      font-size: 18px;
+      font-family: sans-serif;
+      color: #333;
+    }
+    .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/gasDashboard/components/watchAlarmBar.vue b/src/views/gasDashboard/components/watchAlarmBar.vue
index 8857807..4279440 100644
--- a/src/views/gasDashboard/components/watchAlarmBar.vue
+++ b/src/views/gasDashboard/components/watchAlarmBar.vue
@@ -2,33 +2,7 @@
 <template>
   <div class="container">
     <function-area ref="func" select="week" @change="fetchData"/>
-    <!--<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>-->
     <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>
 </template>
 
@@ -42,10 +16,10 @@
   components: { FunctionArea },
   data() {
     return {
-      title:{
+      title: {
         text: '气体流量计告警统计'
       },
-      chartSettings:{
+      chartSettings: {
         itemStyle: {
           barCategoryGap: 0
         },
@@ -83,7 +57,7 @@
         series: {
           label: { show: true, position: 'top', formatter: '{c}' },
           barWidth: 20
-        },
+        }
         // tooltip: { trigger: 'item', formatter: '{b}<br/>报警次数：{c}次' }
       },
       areaId: '',
diff --git a/src/views/gasDashboard/components/watchGasAlarmBar.vue b/src/views/gasDashboard/components/watchGasAlarmBar.vue
index 54783cc..0113341 100644
--- a/src/views/gasDashboard/components/watchGasAlarmBar.vue
+++ b/src/views/gasDashboard/components/watchGasAlarmBar.vue
@@ -1,14 +1,20 @@
 <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"/>
+    <ve-histogram
+      :data="chartData"
+      :grid="grid"
+      :extend="extend"
+      :title="title"
+      :settings="chartSettings"
+    />
   </div>
 </template>
 
 <script>
 // 引入视觉映射组件
 import 'echarts/lib/component/visualMap'
-import { alarmBySecondArea } from '@/api/gasOverview'
+import { gasAlarmBySecondArea } from '@/api/gasOverview'
 import functionArea from './FunctionArea'
 export default {
   name: 'WatchGasAlarmBar',
@@ -18,26 +24,7 @@
       title: {
         text: '燃气告警统计'
       },
-      chartSettings: {
-        itemStyle: {
-          barCategoryGap: 0
-        },
-        labelMap: {
-          'areaName': '分区',
-          'alarm': '报警数'
-        },
-        dimension: ['areaName'],
-        metrics: ['alarm']
-      },
-      grid: {
-        right: 40,
-        top: 80,
-        bottom: 5
-      },
       extend: {
-        legend: {
-          show: true
-        },
         xAxis: {
           axisLabel: {
             rotate: 30,
@@ -53,31 +40,34 @@
           max: 10
         },
         series: {
-          label: { show: true, position: 'top', formatter: '{c}' },
-          barWidth: 20
+          label: { show: true, position: 'top' },
+          barMaxWidth: 35 // 最大柱宽度
         }
-        // tooltip: { trigger: 'item', formatter: '{b}<br/>报警次数：{c}次' }
+      },
+      grid: {
+        right: 60
+      },
+      chartSettings: {
+        itemStyle: {
+          'barCategoryGap': 5
+        },
+        barWidth: 15,
+        labelMap: {
+          'areaName': '区域',
+          'alarm': '报警数'
+        },
+        dimension: ['areaName'],
+        metrics: ['alarm']
+      },
+      chartData: {
+        columns: ['areaName', 'alarm'],
+        rows: []
       },
       areaId: '',
       areaList: [],
       isShow: true,
       defaultTimeRange: [],
-      timeRange: [],
-      pickerOptions: {
-        disabledDate: function(date) {
-          var oDate1 = new Date(date)
-          var oDate2 = new Date()
-          if (oDate1.getTime() > oDate2.getTime()) {
-            return true
-          } else {
-            return false
-          }
-        }
-      },
-      chartData: {
-        columns: ['areaName', 'alarm'],
-        rows: []
-      }
+      timeRange: []
     }
   },
   mounted() {
@@ -93,15 +83,9 @@
         endTime: timeRange[1]
       }
       this.$emit('change', params)
-      alarmBySecondArea(params).then(response => {
+      gasAlarmBySecondArea(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.max = maxValue + 1
-        }
         this.isShow = true
       })
     }
diff --git a/src/views/gasDashboard/components/waterCompare.vue b/src/views/gasDashboard/components/waterCompare.vue
deleted file mode 100644
index 11f0a7d..0000000
--- a/src/views/gasDashboard/components/waterCompare.vue
+++ /dev/null
@@ -1,121 +0,0 @@
-<!--分区用气对比图-->
-<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 { waterCompare } from '@/api/gasOverview'
-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: true
-        },
-        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, type) {
-      const params = {
-        areaId: '110000',
-        type: type || 'other',
-        startTime: timeRange[0],
-        endTime: timeRange[1]
-      }
-      waterCompare(params).then(response => {
-        this.isShow = false
-        this.chartSettings.labelMap = {
-          areaName: '分区',
-          last: response.data[0].lastTime,
-          now: response.data[0].nowTime
-        }
-        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.max = 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/gasDashboard/components/waterCountByAreaBar.vue b/src/views/gasDashboard/components/waterCountByAreaBar.vue
deleted file mode 100644
index d02d54c..0000000
--- a/src/views/gasDashboard/components/waterCountByAreaBar.vue
+++ /dev/null
@@ -1,198 +0,0 @@
-<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 { countBySecondArea } from '@/api/gasOverview'
-import { getDayTime } from '@/utils/dateutils'
-import { getDoorAreaTree } from '@/api/system/area'
-import FunctionArea from './FunctionArea'
-
-export default {
-  name: 'WaterCountByAreaBar',
-  components: { FunctionArea },
-  data() {
-    this.extend = {
-      legend: {
-        show: true
-      },
-      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': '分区',
-        'count': '用气量'
-      },
-      dimension: ['areaName'],
-      metrics: ['count']
-    }
-    return {
-      areaId: '',
-      areaList: [],
-      isShow: true,
-      defaultTimeRange: [],
-      timeRange: [],
-      pickerOptions: {
-        disabledDate: function(date) {
-          var oDate1 = new Date(date)
-          var oDate2 = new Date()
-          if (oDate1.getTime() > oDate2.getTime()) {
-            return true
-          } else {
-            return false
-          }
-        }
-      },
-      chartData: {
-        columns: ['wellTypeName', 'count'],
-        rows: []
-      }
-    }
-  },
-  mounted() {
-    this.$refs.func.init()
-    // this.setDefaultTime('week')
-    // 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()
-    },
-    fetchData(timeRange) {
-      const params = {
-        areaId: '110000',
-        startTime: timeRange[0],
-        endTime: timeRange[1]
-      }
-      this.$emit('change', params)
-      countBySecondArea(params).then(response => {
-        this.isShow = false
-        this.chartData.rows = response.data
-        this.isShow = true
-      })
-    },
-    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.fetchData(this.timeRange)
-    }
-  }
-}
-</script>
-<style lang="scss" scoped>
-  .container{
-    position:relative;
-    .function{
-      width:calc(100% - 120px);
-      height: 28px;
-      display: flex;
-      justify-content: center;
-    }
-  }
-  .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/gasDashboard/components/waterCountByDay.vue b/src/views/gasDashboard/components/waterCountByDay.vue
deleted file mode 100644
index 53297a2..0000000
--- a/src/views/gasDashboard/components/waterCountByDay.vue
+++ /dev/null
@@ -1,157 +0,0 @@
-<template>
-  <div class="container">
-    <!--<div class="function">-->
-      <!--<el-button round size="mini" @click="changeTime('year')">近1年</el-button>-->
-      <!--<el-button round size="mini" @click="changeTime('halfyear')">近6月</el-button>-->
-      <!--<el-button round size="mini" @click="changeTime('3month')">近3月</el-button>-->
-      <!--<el-button round size="mini" @click="changeTime('month')">近1月</el-button>-->
-      <!--<el-button round size="mini" @click="changeTime('week')">近1周</el-button>-->
-    <!--</div>-->
-    <ve-line :data="chartData" :title="title" :extend="extend" :settings="chartSettings"/>
-  </div>
-</template>
-
-<script>
-import { getDayTime } from '@/utils/dateutils'
-import { countByDaySecond } from '@/api/gasOverview'
-import { getDoorAreaTree } from '@/api/system/area'
-export default {
-  name: 'WaterCountByDay',
-  props:{
-    query: {
-      type: Object,
-      default:()=>{
-        return {
-          areaId: '',
-          startTime: '',
-          endTime: ''
-        }
-      }
-    }
-  },
-  data() {
-    return {
-      listQuery: {
-        startTime: '',
-        endTime: ''
-      },
-      title: {
-        text: '用气走势图'
-      },
-      chartSettings: {
-        labelMap: {date:'日期'},
-        metrics: [],
-        dimension: ['date']
-      },
-      extend: {
-        grid: {
-          top: 120
-        },
-        yAxis: {
-          name: '用气量（吨）',
-          position: 'left'
-        },
-        legend: {
-          // type: 'scroll',
-          top: '40px'
-        }
-      },
-      chartData: {
-        columns: [],
-        rows: []
-      }
-    }
-  },
-  mounted() {
-    // this.changeTime('month')
-    // this.fetchArea()
-  },
-  watch:{
-    query(val){
-      this.fetchData()
-    }
-  },
-  methods: {
-    // 废弃
-    fetchArea() {
-      getDoorAreaTree().then(response => {
-        if (response.code === 200) {
-          debugger
-          const area = response.data.filter(item => {
-            return item.pid === '1'
-          }).map(item => item.name)
-          this.chartSettings.metrics = area
-          this.chartSettings.labelMap = {}
-          for (let i = 0; i < area.length; i++) {
-            this.chartSettings.labelMap[area[i]] = area[i]
-          }
-          this.chartData.columns = ['date', ...area]
-          this.fetchData()
-        }
-      })
-    },
-    // 获取数据
-    fetchData() {
-      countByDaySecond(this.query).then(response => {
-        if(response.data.length>0){
-          const arr = response.data.map((item)=> {
-            const result = {date: item.date}
-            for (let i = 0; i < item.data.length; i++) {
-              result[item.data[i].areaName] = item.data[i].count
-            }
-            return result
-          })
-          const area = response.data[0].data.map(item=>item.areaName)
-          this.chartData.columns = ['date', ...area]
-          this.chartSettings.metrics = area
-          this.chartSettings.labelMap = {'date':'日期'}
-          this.chartData.rows = arr
-        }
-      })
-      // 模拟数据
-      // this.chartData.rows = [
-      //   { date: '11月29日', dept1: 153, dept2: 43, dept3: 1, dept4: 1, dept5: 1, dept6: 7, dept7: 6, dept8: 2, dept9: 1, dept10: 3 },
-      //   { date: '11月30日', dept1: 150, dept2: 30, dept3: 2, dept4: 1, dept5: 4, dept6: 6, dept7: 3, dept8: 2, dept9: 1, dept10: 3 },
-      //   { date: '12月1日 ', dept1: 143, dept2: 23, dept3: 3, dept4: 2, dept5: 2, dept6: 7, dept7: 3, dept8: 2, dept9: 1, dept10: 3 },
-      //   { date: '12月2日 ', dept1: 173, dept2: 23, dept3: 4, dept4: 4, dept5: 1, dept6: 1, dept7: 8, dept8: 2, dept9: 1, dept10: 3 },
-      //   { date: '12月3日 ', dept1: 272, dept2: 52, dept3: 5, dept4: 1, dept5: 4, dept6: 7, dept7: 9, dept8: 2, dept9: 1, dept10: 3 },
-      //   { date: '12月4日 ', dept1: 253, dept2: 53, dept3: 6, dept4: 5, dept5: 5, dept6: 2, dept7: 9, dept8: 2, dept9: 1, dept10: 3 }
-      // ]
-    },
-    changeTime(timeType) {
-      let startTime
-      switch (timeType) {
-        case 'year':
-          startTime = getDayTime(new Date().getTime() - 24 * 365 * 60 * 60 * 1000)
-          this.listQuery.startTime = startTime.Format('yyyy-MM-dd')
-          break
-        case 'halfyear':
-          startTime = getDayTime(new Date().getTime() - 24 * 182 * 60 * 60 * 1000)
-          this.listQuery.startTime = startTime.Format('yyyy-MM-dd')
-          break
-        case '3month':
-          startTime = getDayTime(new Date().getTime() - 24 * 90 * 60 * 60 * 1000)
-          this.listQuery.startTime = startTime.Format('yyyy-MM-dd')
-          break
-        case 'month':
-          startTime = getDayTime(new Date().getTime() - 24 * 30 * 60 * 60 * 1000)
-          this.listQuery.startTime = startTime.Format('yyyy-MM-dd')
-          break
-        case 'week':
-          startTime = getDayTime(new Date().getTime() - 24 * 7 * 60 * 60 * 1000)
-          this.listQuery.startTime = startTime.Format('yyyy-MM-dd')
-          break
-      }
-      const endTime = new Date()
-      this.listQuery.endTime = endTime.Format('yyyy-MM-dd')
-      this.fetchData()
-    }
-  }
-}
-</script>
-<style lang="scss" scoped>
-  .container{
-
-  }
-</style>
-
diff --git a/src/views/gasDashboard/components/waterCountByDept.vue b/src/views/gasDashboard/components/waterCountByDept.vue
deleted file mode 100644
index b09409a..0000000
--- a/src/views/gasDashboard/components/waterCountByDept.vue
+++ /dev/null
@@ -1,126 +0,0 @@
-<!--suppress ALL -->
-<template>
-  <div class="container">
-    <ve-pie :data="chartData" :extend="extend" :title="title"/>
-  </div>
-</template>
-
-<script>
-import { countBySecondArea } from '@/api/gasOverview'
-import { getDoorAreaTree } from '@/api/system/area'
-export default {
-  name: 'WaterCountByDepy',
-  props: {
-    query: {
-      type: Object,
-      default: () => {
-        return {
-          areaId: '',
-          startTime: '',
-          endTime: ''
-        }
-      }
-    }
-  },
-  data() {
-    return {
-      listQuery: {
-        areaId: '',
-        startTime: '',
-        endTime: ''
-      },
-      areaId: '',
-      areaList: [],
-      chartData: {
-        columns: ['areaName', 'count'],
-        rows: []
-      },
-      extend: {
-        grid: {
-          right: '30%'
-        },
-        legend: {
-          type: 'scroll',
-          top: '60px',
-          right: '0px',
-          orient: 'vertical'
-        },
-        series: {
-          label: { show: true, position: 'outside', formatter: '{b}' },
-          right: 120
-        },
-        tooltip: { trigger: 'item', formatter: '{b}<br/>用气量：{c}吨<br/>占比：{d}%' }
-      },
-      title: {
-        text: '分区用气占比图'
-      },
-      chartSettings: {
-        labelMap: {
-          'areaName': '分区',
-          'count': '用气量'
-        },
-        dimension: 'areaName',
-        metrics: 'count'
-      }
-    }
-  },
-  watch: {
-    query(val) {
-      this.fetchData()
-    }
-  },
-  mounted() {
-    // TODO:待调试真接口
-    // 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()
-    },
-    // 获取统计数据
-    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
-      })
-    }
-  }
-}
-</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/gasDashboard/components/waterNote.vue b/src/views/gasDashboard/components/waterNote.vue
deleted file mode 100644
index 42e5e36..0000000
--- a/src/views/gasDashboard/components/waterNote.vue
+++ /dev/null
@@ -1,149 +0,0 @@
-<!--用水事记L -->
-<template>
-  <div class="container">
-    <div class="title">
-      场区用气事记
-      <i v-if="!editMode" class="el-icon-edit edit-btn" style="float:right" @click="editNote" />
-      <i v-else class="el-icon-check edit-btn" style="float:right" @click="saveNote" />
-    </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" />
-            <div style="width: 85px;display: flex;justify-content: flex-end">
-              <i v-show="index!==0" class="el-icon-top" @click="toTop(index)" />
-              <i v-show="index!==currentList.length-1" class="el-icon-bottom" @click="toBottom(index)" />
-              <i class="el-icon-delete" @click="deleteItem(index)" />
-            </div>
-          </div>
-        </div>
-        <div v-if="editMode&&currentList.length<10" class="content-line">
-          <i class="el-icon-circle-plus-outline icon-btn" @click="addItem()" />
-        </div>
-      </el-scrollbar>
-    </div>
-  </div>
-</template>
-
-<script>
-import { getNoteList, updateNoteList } from '@/api/dashboard'
-export default {
-  name: 'WaterNote',
-  props: {
-    query: {
-      type: Object,
-      default: () => {
-        return {
-          areaId: '',
-          startTime: '',
-          endTime: ''
-        }
-      }
-    }
-  },
-  data() {
-    return {
-      editMode: false, // 编辑模式
-      originList: [], // 原始列表
-      currentList: [] // 当前列表
-    }
-  },
-  mounted() {
-    this.fetchData()
-  },
-  methods: {
-    // 获取统计数据
-    fetchData() {
-      // this.currentList = [
-      //   { 'content': '测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试', 'num': 1 },
-      //   { 'content': '测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试', 'num': 1 },
-      //   { 'content': '测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试', 'num': 1 },
-      //   { 'content': '测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试', 'num': 1 },
-      //   { 'content': '测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试', 'num': 1 }
-      // ]
-      // this.originList = JSON.parse(JSON.stringify(this.currentList))
-      getNoteList('2').then(response => {
-        this.currentList = JSON.parse(response.data[0].notes)
-      })
-    },
-    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 }
-      })
-      const params = {
-        type: '2',
-        list: currentList
-      }
-      updateNoteList(params).then(res => {
-        this.editMode = false
-        this.$message.success('保存成功')
-      }).catch(e => {
-        // this.currentList = JSON.parse(JSON.stringify(this.originList))
-      })
-    }
-  }
-}
-</script>
-<style lang="scss" scoped>
-  @import "@/styles/variables.scss";
-  .container{
-    position:relative;
-    height: 428px;
-    display: flex;
-    flex-direction: column;
-    .title{
-      font-weight: bolder;
-      font-size: 18px;
-      font-family: sans-serif;
-      color: #333;
-    }
-    .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/gasDashboard/index.vue b/src/views/gasDashboard/index.vue
index a9f13eb..6eb2d56 100644
--- a/src/views/gasDashboard/index.vue
+++ b/src/views/gasDashboard/index.vue
@@ -5,12 +5,12 @@
       <!-- 用气统计图 -->
       <el-col :span="18">
         <el-card shadow="never">
-          <water-count-by-area-bar @change="changeWaterQuery"/>
+          <gas-count-by-area-bar @change="changeWaterQuery"/>
         </el-card>
       </el-col>
       <el-col :span="6">
         <el-card shadow="never">
-          <water-note/>
+          <gas-note />
         </el-card>
       </el-col>
     </el-row>
@@ -18,19 +18,19 @@
       <!-- 分区用气占比图 -->
       <el-col :span="12">
         <el-card shadow="never">
-          <water-count-by-dept :query="listQuery1" ref='waterCountPie'/>
+          <gas-count-by-dept :query="listQuery1" />
         </el-card>
       </el-col>
       <!-- 用气走势图 -->
       <el-col :span="12">
         <el-card shadow="never">
-          <water-count-by-day :query="listQuery1" ref="waterCountDay"/>
+          <gas-count-by-day :query="listQuery1" />
         </el-card>
       </el-col>
       <!--设备在线数量统计-->
       <el-col :span="12">
         <el-card shadow="never">
-          <water-compare/>
+          <gas-compare />
         </el-card>
       </el-col>
       <!--设备数量统计-->
@@ -79,13 +79,13 @@
 import { mapGetters } from 'vuex'
 import PanelGroup from './components/PanelGroup'
 import DeviceCount from './components/DeviceCount'
-import WaterCountByDept from './components/waterCountByDept'
-import WaterCountByDay from './components/waterCountByDay'
-import WaterCountByAreaBar from './components/waterCountByAreaBar'
+import gasCountByDept from './components/gasCountByDept'
+import gasCountByDay from './components/gasCountByDay'
+import gasCountByAreaBar from './components/gasCountByAreaBar'
 import WatchAlarmBar from './components/watchAlarmBar'
-import WaterNote from './components/waterNote'
+import gasNote from './components/gasNote'
 import AlarmCountByDept from './components/AlarmCountByDept'
-import WaterCompare from './components/waterCompare'
+import gasCompare from './components/gasCompare'
 import watchGasAlarmBar from './components/watchGasAlarmBar'
 import alarmGasCountByDept from './components/alarmGasCountByDept'
 import corrodeCountByDay from './components/corrodeCountByDay'
@@ -93,12 +93,12 @@
 export default {
   name: 'Dashboard',
   components: {
-    WaterCountByAreaBar,
-    WaterCountByDept,
-    WaterCountByDay,
-    WaterNote,
+    gasCountByAreaBar,
+    gasCountByDept,
+    gasCountByDay,
+    gasNote,
     PanelGroup,
-    WaterCompare,
+    gasCompare,
     DeviceCount,
     WatchAlarmBar,
     AlarmCountByDept,