diff --git a/src/api/alarm/deviceStatics.js b/src/api/alarm/deviceStatics.js
index 7afcd4f..c375ac5 100644
--- a/src/api/alarm/deviceStatics.js
+++ b/src/api/alarm/deviceStatics.js
@@ -3,15 +3,6 @@
  */
 import request from '@/utils/request'
 
-// 报警情况统计
-export function deviceStaticsByDept(params) {
-  return request({
-    url: 'statics/alarmStaticsByStatus',
-    method: 'get',
-    params
-  })
-}
-
 // 报警设备查询
 export function getDeviceAlarmList(params) {
   return request({

diff --git a/src/api/alarm/deviceStatics.js b/src/api/alarm/deviceStatics.js
index 7afcd4f..c375ac5 100644
--- a/src/api/alarm/deviceStatics.js
+++ b/src/api/alarm/deviceStatics.js
@@ -3,15 +3,6 @@
  */
 import request from '@/utils/request'
 
-// 报警情况统计
-export function deviceStaticsByDept(params) {
-  return request({
-    url: 'statics/alarmStaticsByStatus',
-    method: 'get',
-    params
-  })
-}
-
 // 报警设备查询
 export function getDeviceAlarmList(params) {
   return request({
diff --git a/src/api/data/dataStatics.js b/src/api/data/dataStatics.js
index bbe9263..56a1ea4 100644
--- a/src/api/data/dataStatics.js
+++ b/src/api/data/dataStatics.js
@@ -143,3 +143,12 @@
     params
   })
 }
+
+// 报警的井排名
+export function alarmWellRank(params) {
+  return request({
+    url: '/statics/alarmWellListPage',
+    method: 'get',
+    params
+  })
+}

diff --git a/src/api/alarm/deviceStatics.js b/src/api/alarm/deviceStatics.js
index 7afcd4f..c375ac5 100644
--- a/src/api/alarm/deviceStatics.js
+++ b/src/api/alarm/deviceStatics.js
@@ -3,15 +3,6 @@
  */
 import request from '@/utils/request'
 
-// 报警情况统计
-export function deviceStaticsByDept(params) {
-  return request({
-    url: 'statics/alarmStaticsByStatus',
-    method: 'get',
-    params
-  })
-}
-
 // 报警设备查询
 export function getDeviceAlarmList(params) {
   return request({
diff --git a/src/api/data/dataStatics.js b/src/api/data/dataStatics.js
index bbe9263..56a1ea4 100644
--- a/src/api/data/dataStatics.js
+++ b/src/api/data/dataStatics.js
@@ -143,3 +143,12 @@
     params
   })
 }
+
+// 报警的井排名
+export function alarmWellRank(params) {
+  return request({
+    url: '/statics/alarmWellListPage',
+    method: 'get',
+    params
+  })
+}
diff --git a/src/views/alarmStatics/alarmStatics.vue b/src/views/alarmStatics/alarmStatics.vue
index 22c8798..7c2d2e8 100644
--- a/src/views/alarmStatics/alarmStatics.vue
+++ b/src/views/alarmStatics/alarmStatics.vue
@@ -1,13 +1,23 @@
 <template>
-  <el-row>
+  <el-row :gutter="10">
     <el-col :span="10">
-      <el-card shadow="never">
-        <div />
-        <alarm-statics-by-type />
-      </el-card>
+      <panel-card title="报警总体情况">
+        <el-row :gutter="20" style="padding: 15px 10px">
+          <el-col :span="12">
+            <simple-card title="正在报警" :context="alarmNow" unit="个" />
+          </el-col>
+          <el-col :span="12">
+            <simple-card title="今日报警" :context="todayAlarm" unit="个" />
+          </el-col>
+        </el-row>
+      </panel-card>
+      <!--报警井排名-->
+      <alarm-well-rank style="margin-top:10px" />
+      <!--报警内容统计-->
+      <alarm-statics-by-content style="margin-top:10px" />
     </el-col>
     <el-col :span="14">
-      <alarm-history-by-type />
+      <alarm-analysis />
     </el-col>
     <el-col :span="14">
       <alarm-statics-by-dept />
@@ -16,16 +26,32 @@
 </template>
 
 <script>
-import alarmStaticsByType from './components/alarmStaticsByType'
-import alarmHistoryByType from './components/alarmHistoryByType'
+
 import alarmStaticsByDept from './components/alarmStaticsByDept'
+import AlarmAnalysis from '@/views/dataView/components/alarmAnalysis'
+import PanelCard from '@/components/BigData/Card/panelCard'
+import SimpleCard from '@/components/BigData/Card/simpleCard'
+import { getSearchLastWeekTime } from '@/utils/dateutils'
+import AlarmWellRank from '@/views/dataView/components/alarmWellRank'
+import AlarmStaticsByContent from '@/views/alarmStatics/components/alarmStaticsByContent'
 export default {
-  name: 'DeviceStatics',
+  name: 'AlarmStatics',
   components: {
-    alarmStaticsByType,
-    alarmHistoryByType,
+    AlarmStaticsByContent,
+    AlarmWellRank,
+    SimpleCard,
+    PanelCard,
+    AlarmAnalysis,
     alarmStaticsByDept
+  },
+  data() {
+    return {
+      alarmNow: 0,
+      todayAlarm: 0
+
+    }
   }
+
 }
 </script>
 

diff --git a/src/api/alarm/deviceStatics.js b/src/api/alarm/deviceStatics.js
index 7afcd4f..c375ac5 100644
--- a/src/api/alarm/deviceStatics.js
+++ b/src/api/alarm/deviceStatics.js
@@ -3,15 +3,6 @@
  */
 import request from '@/utils/request'
 
-// 报警情况统计
-export function deviceStaticsByDept(params) {
-  return request({
-    url: 'statics/alarmStaticsByStatus',
-    method: 'get',
-    params
-  })
-}
-
 // 报警设备查询
 export function getDeviceAlarmList(params) {
   return request({
diff --git a/src/api/data/dataStatics.js b/src/api/data/dataStatics.js
index bbe9263..56a1ea4 100644
--- a/src/api/data/dataStatics.js
+++ b/src/api/data/dataStatics.js
@@ -143,3 +143,12 @@
     params
   })
 }
+
+// 报警的井排名
+export function alarmWellRank(params) {
+  return request({
+    url: '/statics/alarmWellListPage',
+    method: 'get',
+    params
+  })
+}
diff --git a/src/views/alarmStatics/alarmStatics.vue b/src/views/alarmStatics/alarmStatics.vue
index 22c8798..7c2d2e8 100644
--- a/src/views/alarmStatics/alarmStatics.vue
+++ b/src/views/alarmStatics/alarmStatics.vue
@@ -1,13 +1,23 @@
 <template>
-  <el-row>
+  <el-row :gutter="10">
     <el-col :span="10">
-      <el-card shadow="never">
-        <div />
-        <alarm-statics-by-type />
-      </el-card>
+      <panel-card title="报警总体情况">
+        <el-row :gutter="20" style="padding: 15px 10px">
+          <el-col :span="12">
+            <simple-card title="正在报警" :context="alarmNow" unit="个" />
+          </el-col>
+          <el-col :span="12">
+            <simple-card title="今日报警" :context="todayAlarm" unit="个" />
+          </el-col>
+        </el-row>
+      </panel-card>
+      <!--报警井排名-->
+      <alarm-well-rank style="margin-top:10px" />
+      <!--报警内容统计-->
+      <alarm-statics-by-content style="margin-top:10px" />
     </el-col>
     <el-col :span="14">
-      <alarm-history-by-type />
+      <alarm-analysis />
     </el-col>
     <el-col :span="14">
       <alarm-statics-by-dept />
@@ -16,16 +26,32 @@
 </template>
 
 <script>
-import alarmStaticsByType from './components/alarmStaticsByType'
-import alarmHistoryByType from './components/alarmHistoryByType'
+
 import alarmStaticsByDept from './components/alarmStaticsByDept'
+import AlarmAnalysis from '@/views/dataView/components/alarmAnalysis'
+import PanelCard from '@/components/BigData/Card/panelCard'
+import SimpleCard from '@/components/BigData/Card/simpleCard'
+import { getSearchLastWeekTime } from '@/utils/dateutils'
+import AlarmWellRank from '@/views/dataView/components/alarmWellRank'
+import AlarmStaticsByContent from '@/views/alarmStatics/components/alarmStaticsByContent'
 export default {
-  name: 'DeviceStatics',
+  name: 'AlarmStatics',
   components: {
-    alarmStaticsByType,
-    alarmHistoryByType,
+    AlarmStaticsByContent,
+    AlarmWellRank,
+    SimpleCard,
+    PanelCard,
+    AlarmAnalysis,
     alarmStaticsByDept
+  },
+  data() {
+    return {
+      alarmNow: 0,
+      todayAlarm: 0
+
+    }
   }
+
 }
 </script>
 
diff --git a/src/views/alarmStatics/components/alarmStaticsByContent.vue b/src/views/alarmStatics/components/alarmStaticsByContent.vue
new file mode 100644
index 0000000..b165841
--- /dev/null
+++ b/src/views/alarmStatics/components/alarmStaticsByContent.vue
@@ -0,0 +1,47 @@
+<template>
+  <panel-card title="各类报警统计">
+    <template slot="func">
+      <el-col :span="16">
+        <el-date-picker
+          v-model="timeRange"
+          type="datetimerange"
+          range-separator="至"
+          size="small"
+          value-format="yyyy-MM-dd HH:mm:ss"
+          start-placeholder="开始时间"
+          end-placeholder="结束时间"
+        />
+      </el-col>
+    </template>
+    <alarm-statics-by-type :time-range="timeRange" />
+  </panel-card>
+</template>
+
+<script>
+import PanelCard from '@/components/BigData/Card/panelCard'
+import alarmStaticsByType from '@/views/staticCharts/AlarmStaticsByType'
+import { getSearchLastWeekTime } from '@/utils/dateutils'
+export default {
+  name: 'AlarmStaticsByContent',
+  components: {
+    alarmStaticsByType, PanelCard
+  },
+  data() {
+    return {
+      timeRange: []
+    }
+  },
+  created() {
+    this.timeRange = getSearchLastWeekTime()
+  },
+  methods: {
+    refresh() {
+
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

diff --git a/src/api/alarm/deviceStatics.js b/src/api/alarm/deviceStatics.js
index 7afcd4f..c375ac5 100644
--- a/src/api/alarm/deviceStatics.js
+++ b/src/api/alarm/deviceStatics.js
@@ -3,15 +3,6 @@
  */
 import request from '@/utils/request'
 
-// 报警情况统计
-export function deviceStaticsByDept(params) {
-  return request({
-    url: 'statics/alarmStaticsByStatus',
-    method: 'get',
-    params
-  })
-}
-
 // 报警设备查询
 export function getDeviceAlarmList(params) {
   return request({
diff --git a/src/api/data/dataStatics.js b/src/api/data/dataStatics.js
index bbe9263..56a1ea4 100644
--- a/src/api/data/dataStatics.js
+++ b/src/api/data/dataStatics.js
@@ -143,3 +143,12 @@
     params
   })
 }
+
+// 报警的井排名
+export function alarmWellRank(params) {
+  return request({
+    url: '/statics/alarmWellListPage',
+    method: 'get',
+    params
+  })
+}
diff --git a/src/views/alarmStatics/alarmStatics.vue b/src/views/alarmStatics/alarmStatics.vue
index 22c8798..7c2d2e8 100644
--- a/src/views/alarmStatics/alarmStatics.vue
+++ b/src/views/alarmStatics/alarmStatics.vue
@@ -1,13 +1,23 @@
 <template>
-  <el-row>
+  <el-row :gutter="10">
     <el-col :span="10">
-      <el-card shadow="never">
-        <div />
-        <alarm-statics-by-type />
-      </el-card>
+      <panel-card title="报警总体情况">
+        <el-row :gutter="20" style="padding: 15px 10px">
+          <el-col :span="12">
+            <simple-card title="正在报警" :context="alarmNow" unit="个" />
+          </el-col>
+          <el-col :span="12">
+            <simple-card title="今日报警" :context="todayAlarm" unit="个" />
+          </el-col>
+        </el-row>
+      </panel-card>
+      <!--报警井排名-->
+      <alarm-well-rank style="margin-top:10px" />
+      <!--报警内容统计-->
+      <alarm-statics-by-content style="margin-top:10px" />
     </el-col>
     <el-col :span="14">
-      <alarm-history-by-type />
+      <alarm-analysis />
     </el-col>
     <el-col :span="14">
       <alarm-statics-by-dept />
@@ -16,16 +26,32 @@
 </template>
 
 <script>
-import alarmStaticsByType from './components/alarmStaticsByType'
-import alarmHistoryByType from './components/alarmHistoryByType'
+
 import alarmStaticsByDept from './components/alarmStaticsByDept'
+import AlarmAnalysis from '@/views/dataView/components/alarmAnalysis'
+import PanelCard from '@/components/BigData/Card/panelCard'
+import SimpleCard from '@/components/BigData/Card/simpleCard'
+import { getSearchLastWeekTime } from '@/utils/dateutils'
+import AlarmWellRank from '@/views/dataView/components/alarmWellRank'
+import AlarmStaticsByContent from '@/views/alarmStatics/components/alarmStaticsByContent'
 export default {
-  name: 'DeviceStatics',
+  name: 'AlarmStatics',
   components: {
-    alarmStaticsByType,
-    alarmHistoryByType,
+    AlarmStaticsByContent,
+    AlarmWellRank,
+    SimpleCard,
+    PanelCard,
+    AlarmAnalysis,
     alarmStaticsByDept
+  },
+  data() {
+    return {
+      alarmNow: 0,
+      todayAlarm: 0
+
+    }
   }
+
 }
 </script>
 
diff --git a/src/views/alarmStatics/components/alarmStaticsByContent.vue b/src/views/alarmStatics/components/alarmStaticsByContent.vue
new file mode 100644
index 0000000..b165841
--- /dev/null
+++ b/src/views/alarmStatics/components/alarmStaticsByContent.vue
@@ -0,0 +1,47 @@
+<template>
+  <panel-card title="各类报警统计">
+    <template slot="func">
+      <el-col :span="16">
+        <el-date-picker
+          v-model="timeRange"
+          type="datetimerange"
+          range-separator="至"
+          size="small"
+          value-format="yyyy-MM-dd HH:mm:ss"
+          start-placeholder="开始时间"
+          end-placeholder="结束时间"
+        />
+      </el-col>
+    </template>
+    <alarm-statics-by-type :time-range="timeRange" />
+  </panel-card>
+</template>
+
+<script>
+import PanelCard from '@/components/BigData/Card/panelCard'
+import alarmStaticsByType from '@/views/staticCharts/AlarmStaticsByType'
+import { getSearchLastWeekTime } from '@/utils/dateutils'
+export default {
+  name: 'AlarmStaticsByContent',
+  components: {
+    alarmStaticsByType, PanelCard
+  },
+  data() {
+    return {
+      timeRange: []
+    }
+  },
+  created() {
+    this.timeRange = getSearchLastWeekTime()
+  },
+  methods: {
+    refresh() {
+
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/views/alarmStatics/components/alarmStaticsByType.vue b/src/views/alarmStatics/components/alarmStaticsByType.vue
deleted file mode 100644
index 7e17365..0000000
--- a/src/views/alarmStatics/components/alarmStaticsByType.vue
+++ /dev/null
@@ -1,276 +0,0 @@
-<template>
-  <el-row>
-    <el-col>
-      <el-col>
-        <div class="flagBoxStyle">
-          <div class="flagStyle" />
-          <div>报警总体情况</div>
-        </div>
-      </el-col>
-      <el-col class="cardStyle">
-        <el-col :span="10">
-          <el-card>
-            <div>
-              <span class="ttileStyle">正在报警</span>
-              <span class="countStyle">123</span>
-              <span>个</span>
-            </div>
-          </el-card>
-        </el-col>
-        <el-col :span="10">
-          <el-card>
-            <div>
-              <span class="ttileStyle">今日报警</span>
-              <span class="countStyle">123</span>
-              <span>个</span>
-            </div>
-          </el-card>
-        </el-col>
-      </el-col>
-      <el-col>
-        <el-col :span="8">
-          <div class="flagBoxStyle">
-            <div class="flagStyle" />
-            <div>各类报警统计</div>
-          </div>
-        </el-col>
-        <el-col :span="16">
-          <el-date-picker
-            v-model="timeRange1"
-            type="datetimerange"
-            range-separator="至"
-            size="small"
-            :picker-options="pickerOptions1"
-            value-format="yyyy-MM-dd HH:mm:ss"
-            start-placeholder="开始时间"
-            end-placeholder="结束时间"
-            @change="fetchDeviceTypeBar"
-          />
-        </el-col>
-      </el-col>
-      <el-col>
-        <ve-histogram
-          :data="chartData"
-          :grid="grid"
-          :extend="extend"
-          :settings="chartSettings"
-        />
-      </el-col>
-      <el-col>
-        <el-col :span="8">
-          <div class="flagBoxStyle">
-            <div class="flagStyle" />
-            <div>报警趋势统计</div>
-          </div>
-        </el-col>
-        <el-col :span="16">
-          <el-date-picker
-            v-model="timeRange2"
-            type="datetimerange"
-            range-separator="至"
-            size="small"
-            :picker-options="pickerOptions2"
-            value-format="yyyy-MM-dd HH:mm:ss"
-            start-placeholder="开始时间"
-            end-placeholder="结束时间"
-            @change="fetchDeviceTypeLine"
-          />
-        </el-col>
-      </el-col>
-      <el-col>
-        <ve-line
-          :data="chartDataLine"
-          :settings="chartSettingsLine"
-        />
-      </el-col>
-    </el-col>
-  </el-row>
-</template>
-
-<script>
-import { deviceStaticsByDept } from '@/api/alarm/deviceStatics'
-import { alarmStaticsByContent } from '@/api/alarm/deviceStatics'
-export default {
-  name: 'AlarmStaticsByType',
-  data() {
-    return {
-      // 柱状图搜索条件
-      timeRange1: '',
-      timeRange2: '',
-      listQuery: {
-        startTime: '',
-        endTime: '',
-        alarmType: ''
-      },
-      pickerOptions1: {
-        shortcuts: [{
-          text: '最近一周',
-          onClick(picker) {
-            const end = new Date()
-            const start = new Date()
-            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
-            picker.$emit('pick', [start, end])
-          }
-        }, {
-          text: '最近一个月',
-          onClick(picker) {
-            const end = new Date()
-            const start = new Date()
-            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
-            picker.$emit('pick', [start, end])
-          }
-        }, {
-          text: '最近三个月',
-          onClick(picker) {
-            const end = new Date()
-            const start = new Date()
-            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
-            picker.$emit('pick', [start, end])
-          }
-        }]
-      },
-      // 折线图搜索条件
-      listStatue: {
-        startTime: '',
-        endTime: '',
-        alarmType: ''
-      },
-      pickerOptions2: {
-        shortcuts: [{
-          text: '最近一周',
-          onClick(picker) {
-            const end = new Date()
-            const start = new Date()
-            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
-            picker.$emit('pick', [start, end])
-          }
-        }, {
-          text: '最近一个月',
-          onClick(picker) {
-            const end = new Date()
-            const start = new Date()
-            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
-            picker.$emit('pick', [start, end])
-          }
-        }, {
-          text: '最近三个月',
-          onClick(picker) {
-            const end = new Date()
-            const start = new Date()
-            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
-            picker.$emit('pick', [start, end])
-          }
-        }]
-      },
-      // 折线图
-      chartSettingsLine: {
-        labelMap: {
-          'alarmWellData': '井盖开盖报警',
-          'alarmLiquidData': '液位超限报警',
-          'alarmHarmfulData': '有害气体超标报警'
-        },
-        metrics: ['alarmWellData', 'alarmLiquidData', 'alarmHarmfulData'],
-        dimension: ['date']
-      },
-      chartDataLine: {
-        columns: ['date', 'alarmWellData', 'alarmLiquidData', 'alarmHarmfulData'],
-        rows: []
-      },
-      // 柱状图
-      extend: {
-        xAxis: {
-          axisLabel: {
-            rotate: 30,
-            margin: 30,
-            textStyle: {
-              align: 'center'
-            }
-          }
-        },
-        series: {
-          label: { show: true, position: 'top' },
-          barMaxWidth: 35 // 最大柱宽度
-        }
-      },
-      grid: {
-        right: 60
-      },
-      chartSettings: {
-        itemStyle: {
-          'barCategoryGap': 5
-        },
-        barWidth: 15,
-        labelMap: {
-          'alarmContent': '报警内容',
-          'totalAlarm': '报警数量',
-          'cancelAlarm': '消警数量'
-        },
-        dimension: ['alarmContent'],
-        metrics: ['totalAlarm', 'cancelAlarm']
-      },
-      chartData: {
-        columns: ['alarmContent', 'totalAlarm', 'cancelAlarm'],
-        rows: []
-      }
-    }
-  },
-  created() {
-    this.fetchDeviceTypeBar()
-    this.fetchDeviceTypeLine()
-  },
-  methods: {
-    fetchDeviceTypeBar(val) {
-      if (val !== undefined) {
-        this.listQuery.startTime = val[0]
-        this.listQuery.endTime = val[1]
-      }
-      deviceStaticsByDept(this.listQuery).then(response => {
-        this.chartData.rows = response.data
-      })
-    },
-    fetchDeviceTypeLine(val) {
-      if (val !== undefined) {
-        this.listQuery.startTime = val[0]
-        this.listQuery.endTime = val[1]
-      }
-      alarmStaticsByContent(this.listStatue).then(response => {
-        console.log(response.data, '===123')
-        this.chartDataLine.rows = response.data
-      })
-    }
-  }
-}
-</script>
-
-<style rel="stylesheet/scss" lang="scss" scoped>
-.flagBoxStyle {
-  display: flex;
-  margin-bottom: 20px;
-}
-.flagBoxStyle div:nth-child(2){
-  line-height: 30px;
-  font-weight: 600;
-}
-.flagStyle {
-  width: 4px;
-  height: 30px;
-  margin-right: 6px;
-  background: rgb(64 121 242);
-}
-.cardStyle {
-  display:flex;
-  margin-bottom: 60px;
-  justify-content: space-around;
-}
-.ttileStyle {
-  font-size: 12px;
-}
-.countStyle {
-  font-size: 20px;
-  margin: 0 10px;
-}
-.el-date-editor--datetimerange.el-input,
-.el-date-editor--datetimerange.el-input__inner{
-  width: 340px;
-}
-</style>

diff --git a/src/api/alarm/deviceStatics.js b/src/api/alarm/deviceStatics.js
index 7afcd4f..c375ac5 100644
--- a/src/api/alarm/deviceStatics.js
+++ b/src/api/alarm/deviceStatics.js
@@ -3,15 +3,6 @@
  */
 import request from '@/utils/request'
 
-// 报警情况统计
-export function deviceStaticsByDept(params) {
-  return request({
-    url: 'statics/alarmStaticsByStatus',
-    method: 'get',
-    params
-  })
-}
-
 // 报警设备查询
 export function getDeviceAlarmList(params) {
   return request({
diff --git a/src/api/data/dataStatics.js b/src/api/data/dataStatics.js
index bbe9263..56a1ea4 100644
--- a/src/api/data/dataStatics.js
+++ b/src/api/data/dataStatics.js
@@ -143,3 +143,12 @@
     params
   })
 }
+
+// 报警的井排名
+export function alarmWellRank(params) {
+  return request({
+    url: '/statics/alarmWellListPage',
+    method: 'get',
+    params
+  })
+}
diff --git a/src/views/alarmStatics/alarmStatics.vue b/src/views/alarmStatics/alarmStatics.vue
index 22c8798..7c2d2e8 100644
--- a/src/views/alarmStatics/alarmStatics.vue
+++ b/src/views/alarmStatics/alarmStatics.vue
@@ -1,13 +1,23 @@
 <template>
-  <el-row>
+  <el-row :gutter="10">
     <el-col :span="10">
-      <el-card shadow="never">
-        <div />
-        <alarm-statics-by-type />
-      </el-card>
+      <panel-card title="报警总体情况">
+        <el-row :gutter="20" style="padding: 15px 10px">
+          <el-col :span="12">
+            <simple-card title="正在报警" :context="alarmNow" unit="个" />
+          </el-col>
+          <el-col :span="12">
+            <simple-card title="今日报警" :context="todayAlarm" unit="个" />
+          </el-col>
+        </el-row>
+      </panel-card>
+      <!--报警井排名-->
+      <alarm-well-rank style="margin-top:10px" />
+      <!--报警内容统计-->
+      <alarm-statics-by-content style="margin-top:10px" />
     </el-col>
     <el-col :span="14">
-      <alarm-history-by-type />
+      <alarm-analysis />
     </el-col>
     <el-col :span="14">
       <alarm-statics-by-dept />
@@ -16,16 +26,32 @@
 </template>
 
 <script>
-import alarmStaticsByType from './components/alarmStaticsByType'
-import alarmHistoryByType from './components/alarmHistoryByType'
+
 import alarmStaticsByDept from './components/alarmStaticsByDept'
+import AlarmAnalysis from '@/views/dataView/components/alarmAnalysis'
+import PanelCard from '@/components/BigData/Card/panelCard'
+import SimpleCard from '@/components/BigData/Card/simpleCard'
+import { getSearchLastWeekTime } from '@/utils/dateutils'
+import AlarmWellRank from '@/views/dataView/components/alarmWellRank'
+import AlarmStaticsByContent from '@/views/alarmStatics/components/alarmStaticsByContent'
 export default {
-  name: 'DeviceStatics',
+  name: 'AlarmStatics',
   components: {
-    alarmStaticsByType,
-    alarmHistoryByType,
+    AlarmStaticsByContent,
+    AlarmWellRank,
+    SimpleCard,
+    PanelCard,
+    AlarmAnalysis,
     alarmStaticsByDept
+  },
+  data() {
+    return {
+      alarmNow: 0,
+      todayAlarm: 0
+
+    }
   }
+
 }
 </script>
 
diff --git a/src/views/alarmStatics/components/alarmStaticsByContent.vue b/src/views/alarmStatics/components/alarmStaticsByContent.vue
new file mode 100644
index 0000000..b165841
--- /dev/null
+++ b/src/views/alarmStatics/components/alarmStaticsByContent.vue
@@ -0,0 +1,47 @@
+<template>
+  <panel-card title="各类报警统计">
+    <template slot="func">
+      <el-col :span="16">
+        <el-date-picker
+          v-model="timeRange"
+          type="datetimerange"
+          range-separator="至"
+          size="small"
+          value-format="yyyy-MM-dd HH:mm:ss"
+          start-placeholder="开始时间"
+          end-placeholder="结束时间"
+        />
+      </el-col>
+    </template>
+    <alarm-statics-by-type :time-range="timeRange" />
+  </panel-card>
+</template>
+
+<script>
+import PanelCard from '@/components/BigData/Card/panelCard'
+import alarmStaticsByType from '@/views/staticCharts/AlarmStaticsByType'
+import { getSearchLastWeekTime } from '@/utils/dateutils'
+export default {
+  name: 'AlarmStaticsByContent',
+  components: {
+    alarmStaticsByType, PanelCard
+  },
+  data() {
+    return {
+      timeRange: []
+    }
+  },
+  created() {
+    this.timeRange = getSearchLastWeekTime()
+  },
+  methods: {
+    refresh() {
+
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/views/alarmStatics/components/alarmStaticsByType.vue b/src/views/alarmStatics/components/alarmStaticsByType.vue
deleted file mode 100644
index 7e17365..0000000
--- a/src/views/alarmStatics/components/alarmStaticsByType.vue
+++ /dev/null
@@ -1,276 +0,0 @@
-<template>
-  <el-row>
-    <el-col>
-      <el-col>
-        <div class="flagBoxStyle">
-          <div class="flagStyle" />
-          <div>报警总体情况</div>
-        </div>
-      </el-col>
-      <el-col class="cardStyle">
-        <el-col :span="10">
-          <el-card>
-            <div>
-              <span class="ttileStyle">正在报警</span>
-              <span class="countStyle">123</span>
-              <span>个</span>
-            </div>
-          </el-card>
-        </el-col>
-        <el-col :span="10">
-          <el-card>
-            <div>
-              <span class="ttileStyle">今日报警</span>
-              <span class="countStyle">123</span>
-              <span>个</span>
-            </div>
-          </el-card>
-        </el-col>
-      </el-col>
-      <el-col>
-        <el-col :span="8">
-          <div class="flagBoxStyle">
-            <div class="flagStyle" />
-            <div>各类报警统计</div>
-          </div>
-        </el-col>
-        <el-col :span="16">
-          <el-date-picker
-            v-model="timeRange1"
-            type="datetimerange"
-            range-separator="至"
-            size="small"
-            :picker-options="pickerOptions1"
-            value-format="yyyy-MM-dd HH:mm:ss"
-            start-placeholder="开始时间"
-            end-placeholder="结束时间"
-            @change="fetchDeviceTypeBar"
-          />
-        </el-col>
-      </el-col>
-      <el-col>
-        <ve-histogram
-          :data="chartData"
-          :grid="grid"
-          :extend="extend"
-          :settings="chartSettings"
-        />
-      </el-col>
-      <el-col>
-        <el-col :span="8">
-          <div class="flagBoxStyle">
-            <div class="flagStyle" />
-            <div>报警趋势统计</div>
-          </div>
-        </el-col>
-        <el-col :span="16">
-          <el-date-picker
-            v-model="timeRange2"
-            type="datetimerange"
-            range-separator="至"
-            size="small"
-            :picker-options="pickerOptions2"
-            value-format="yyyy-MM-dd HH:mm:ss"
-            start-placeholder="开始时间"
-            end-placeholder="结束时间"
-            @change="fetchDeviceTypeLine"
-          />
-        </el-col>
-      </el-col>
-      <el-col>
-        <ve-line
-          :data="chartDataLine"
-          :settings="chartSettingsLine"
-        />
-      </el-col>
-    </el-col>
-  </el-row>
-</template>
-
-<script>
-import { deviceStaticsByDept } from '@/api/alarm/deviceStatics'
-import { alarmStaticsByContent } from '@/api/alarm/deviceStatics'
-export default {
-  name: 'AlarmStaticsByType',
-  data() {
-    return {
-      // 柱状图搜索条件
-      timeRange1: '',
-      timeRange2: '',
-      listQuery: {
-        startTime: '',
-        endTime: '',
-        alarmType: ''
-      },
-      pickerOptions1: {
-        shortcuts: [{
-          text: '最近一周',
-          onClick(picker) {
-            const end = new Date()
-            const start = new Date()
-            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
-            picker.$emit('pick', [start, end])
-          }
-        }, {
-          text: '最近一个月',
-          onClick(picker) {
-            const end = new Date()
-            const start = new Date()
-            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
-            picker.$emit('pick', [start, end])
-          }
-        }, {
-          text: '最近三个月',
-          onClick(picker) {
-            const end = new Date()
-            const start = new Date()
-            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
-            picker.$emit('pick', [start, end])
-          }
-        }]
-      },
-      // 折线图搜索条件
-      listStatue: {
-        startTime: '',
-        endTime: '',
-        alarmType: ''
-      },
-      pickerOptions2: {
-        shortcuts: [{
-          text: '最近一周',
-          onClick(picker) {
-            const end = new Date()
-            const start = new Date()
-            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
-            picker.$emit('pick', [start, end])
-          }
-        }, {
-          text: '最近一个月',
-          onClick(picker) {
-            const end = new Date()
-            const start = new Date()
-            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
-            picker.$emit('pick', [start, end])
-          }
-        }, {
-          text: '最近三个月',
-          onClick(picker) {
-            const end = new Date()
-            const start = new Date()
-            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
-            picker.$emit('pick', [start, end])
-          }
-        }]
-      },
-      // 折线图
-      chartSettingsLine: {
-        labelMap: {
-          'alarmWellData': '井盖开盖报警',
-          'alarmLiquidData': '液位超限报警',
-          'alarmHarmfulData': '有害气体超标报警'
-        },
-        metrics: ['alarmWellData', 'alarmLiquidData', 'alarmHarmfulData'],
-        dimension: ['date']
-      },
-      chartDataLine: {
-        columns: ['date', 'alarmWellData', 'alarmLiquidData', 'alarmHarmfulData'],
-        rows: []
-      },
-      // 柱状图
-      extend: {
-        xAxis: {
-          axisLabel: {
-            rotate: 30,
-            margin: 30,
-            textStyle: {
-              align: 'center'
-            }
-          }
-        },
-        series: {
-          label: { show: true, position: 'top' },
-          barMaxWidth: 35 // 最大柱宽度
-        }
-      },
-      grid: {
-        right: 60
-      },
-      chartSettings: {
-        itemStyle: {
-          'barCategoryGap': 5
-        },
-        barWidth: 15,
-        labelMap: {
-          'alarmContent': '报警内容',
-          'totalAlarm': '报警数量',
-          'cancelAlarm': '消警数量'
-        },
-        dimension: ['alarmContent'],
-        metrics: ['totalAlarm', 'cancelAlarm']
-      },
-      chartData: {
-        columns: ['alarmContent', 'totalAlarm', 'cancelAlarm'],
-        rows: []
-      }
-    }
-  },
-  created() {
-    this.fetchDeviceTypeBar()
-    this.fetchDeviceTypeLine()
-  },
-  methods: {
-    fetchDeviceTypeBar(val) {
-      if (val !== undefined) {
-        this.listQuery.startTime = val[0]
-        this.listQuery.endTime = val[1]
-      }
-      deviceStaticsByDept(this.listQuery).then(response => {
-        this.chartData.rows = response.data
-      })
-    },
-    fetchDeviceTypeLine(val) {
-      if (val !== undefined) {
-        this.listQuery.startTime = val[0]
-        this.listQuery.endTime = val[1]
-      }
-      alarmStaticsByContent(this.listStatue).then(response => {
-        console.log(response.data, '===123')
-        this.chartDataLine.rows = response.data
-      })
-    }
-  }
-}
-</script>
-
-<style rel="stylesheet/scss" lang="scss" scoped>
-.flagBoxStyle {
-  display: flex;
-  margin-bottom: 20px;
-}
-.flagBoxStyle div:nth-child(2){
-  line-height: 30px;
-  font-weight: 600;
-}
-.flagStyle {
-  width: 4px;
-  height: 30px;
-  margin-right: 6px;
-  background: rgb(64 121 242);
-}
-.cardStyle {
-  display:flex;
-  margin-bottom: 60px;
-  justify-content: space-around;
-}
-.ttileStyle {
-  font-size: 12px;
-}
-.countStyle {
-  font-size: 20px;
-  margin: 0 10px;
-}
-.el-date-editor--datetimerange.el-input,
-.el-date-editor--datetimerange.el-input__inner{
-  width: 340px;
-}
-</style>
diff --git a/src/views/dashboard/components/AlarmByDays.vue b/src/views/dashboard/components/AlarmByDays.vue
index 6b839d3..bd8228e 100644
--- a/src/views/dashboard/components/AlarmByDays.vue
+++ b/src/views/dashboard/components/AlarmByDays.vue
@@ -1,5 +1,5 @@
 <template>
-  <ve-line :data="chartData" :title="title" :settings="chartSettings" />
+  <ve-line :data="chartData" :title="title" :extend="extend" :settings="chartSettings" />
 </template>
 
 <script>
@@ -9,27 +9,33 @@
 export default {
   name: 'AlarmByDays',
   data() {
-    this.title = {
-      text: '7日报警趋势'
-    }
-    this.chartSettings = {
-      labelMap: {
-        'alarmWells': '报警井数',
-        'alarmTimes': '报警次数'
-      },
-      metrics: ['alarmTimes', 'alarmWells'],
-      dimension: ['date']
-    }
     return {
+      title: {
+        text: '7日报警趋势'
+      },
+      chartSettings: {
+        labelMap: {
+          'alarmWells': '报警井数',
+          'alarmTimes': '报警次数'
+        },
+        metrics: ['alarmTimes', 'alarmWells'],
+        dimension: ['date']
+      },
+      extend: {
+        yAxis: {
+          type: 'value',
+          minInterval: 1
+        }
+      },
       listQuery: {
         deviceType: '',
         beginTime: '',
         endTime: ''
-      },
+      }, // 查询条件
       chartData: {
         columns: ['date', 'alarmTimes', 'alarmWells'],
         rows: []
-      }
+      } // 数据
     }
   },
   mounted() {
@@ -52,6 +58,14 @@
       this.listQuery.endTime = endTime
       alarmStaticByDay(this.listQuery).then(response => {
         this.chartData.rows = response.data
+        const maxValue = Math.max.apply(Math, response.data.map(function(item) {
+          return parseInt(item.alarmTimes)
+        }))
+        if (maxValue < 10) {
+          this.extend.yAxis = { type: 'value', minInterval: 1, max: 10 }
+        } else {
+          this.extend.yAxis = { type: 'value', minInterval: 1 }
+        }
       })
     }
   }

diff --git a/src/api/alarm/deviceStatics.js b/src/api/alarm/deviceStatics.js
index 7afcd4f..c375ac5 100644
--- a/src/api/alarm/deviceStatics.js
+++ b/src/api/alarm/deviceStatics.js
@@ -3,15 +3,6 @@
  */
 import request from '@/utils/request'
 
-// 报警情况统计
-export function deviceStaticsByDept(params) {
-  return request({
-    url: 'statics/alarmStaticsByStatus',
-    method: 'get',
-    params
-  })
-}
-
 // 报警设备查询
 export function getDeviceAlarmList(params) {
   return request({
diff --git a/src/api/data/dataStatics.js b/src/api/data/dataStatics.js
index bbe9263..56a1ea4 100644
--- a/src/api/data/dataStatics.js
+++ b/src/api/data/dataStatics.js
@@ -143,3 +143,12 @@
     params
   })
 }
+
+// 报警的井排名
+export function alarmWellRank(params) {
+  return request({
+    url: '/statics/alarmWellListPage',
+    method: 'get',
+    params
+  })
+}
diff --git a/src/views/alarmStatics/alarmStatics.vue b/src/views/alarmStatics/alarmStatics.vue
index 22c8798..7c2d2e8 100644
--- a/src/views/alarmStatics/alarmStatics.vue
+++ b/src/views/alarmStatics/alarmStatics.vue
@@ -1,13 +1,23 @@
 <template>
-  <el-row>
+  <el-row :gutter="10">
     <el-col :span="10">
-      <el-card shadow="never">
-        <div />
-        <alarm-statics-by-type />
-      </el-card>
+      <panel-card title="报警总体情况">
+        <el-row :gutter="20" style="padding: 15px 10px">
+          <el-col :span="12">
+            <simple-card title="正在报警" :context="alarmNow" unit="个" />
+          </el-col>
+          <el-col :span="12">
+            <simple-card title="今日报警" :context="todayAlarm" unit="个" />
+          </el-col>
+        </el-row>
+      </panel-card>
+      <!--报警井排名-->
+      <alarm-well-rank style="margin-top:10px" />
+      <!--报警内容统计-->
+      <alarm-statics-by-content style="margin-top:10px" />
     </el-col>
     <el-col :span="14">
-      <alarm-history-by-type />
+      <alarm-analysis />
     </el-col>
     <el-col :span="14">
       <alarm-statics-by-dept />
@@ -16,16 +26,32 @@
 </template>
 
 <script>
-import alarmStaticsByType from './components/alarmStaticsByType'
-import alarmHistoryByType from './components/alarmHistoryByType'
+
 import alarmStaticsByDept from './components/alarmStaticsByDept'
+import AlarmAnalysis from '@/views/dataView/components/alarmAnalysis'
+import PanelCard from '@/components/BigData/Card/panelCard'
+import SimpleCard from '@/components/BigData/Card/simpleCard'
+import { getSearchLastWeekTime } from '@/utils/dateutils'
+import AlarmWellRank from '@/views/dataView/components/alarmWellRank'
+import AlarmStaticsByContent from '@/views/alarmStatics/components/alarmStaticsByContent'
 export default {
-  name: 'DeviceStatics',
+  name: 'AlarmStatics',
   components: {
-    alarmStaticsByType,
-    alarmHistoryByType,
+    AlarmStaticsByContent,
+    AlarmWellRank,
+    SimpleCard,
+    PanelCard,
+    AlarmAnalysis,
     alarmStaticsByDept
+  },
+  data() {
+    return {
+      alarmNow: 0,
+      todayAlarm: 0
+
+    }
   }
+
 }
 </script>
 
diff --git a/src/views/alarmStatics/components/alarmStaticsByContent.vue b/src/views/alarmStatics/components/alarmStaticsByContent.vue
new file mode 100644
index 0000000..b165841
--- /dev/null
+++ b/src/views/alarmStatics/components/alarmStaticsByContent.vue
@@ -0,0 +1,47 @@
+<template>
+  <panel-card title="各类报警统计">
+    <template slot="func">
+      <el-col :span="16">
+        <el-date-picker
+          v-model="timeRange"
+          type="datetimerange"
+          range-separator="至"
+          size="small"
+          value-format="yyyy-MM-dd HH:mm:ss"
+          start-placeholder="开始时间"
+          end-placeholder="结束时间"
+        />
+      </el-col>
+    </template>
+    <alarm-statics-by-type :time-range="timeRange" />
+  </panel-card>
+</template>
+
+<script>
+import PanelCard from '@/components/BigData/Card/panelCard'
+import alarmStaticsByType from '@/views/staticCharts/AlarmStaticsByType'
+import { getSearchLastWeekTime } from '@/utils/dateutils'
+export default {
+  name: 'AlarmStaticsByContent',
+  components: {
+    alarmStaticsByType, PanelCard
+  },
+  data() {
+    return {
+      timeRange: []
+    }
+  },
+  created() {
+    this.timeRange = getSearchLastWeekTime()
+  },
+  methods: {
+    refresh() {
+
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/views/alarmStatics/components/alarmStaticsByType.vue b/src/views/alarmStatics/components/alarmStaticsByType.vue
deleted file mode 100644
index 7e17365..0000000
--- a/src/views/alarmStatics/components/alarmStaticsByType.vue
+++ /dev/null
@@ -1,276 +0,0 @@
-<template>
-  <el-row>
-    <el-col>
-      <el-col>
-        <div class="flagBoxStyle">
-          <div class="flagStyle" />
-          <div>报警总体情况</div>
-        </div>
-      </el-col>
-      <el-col class="cardStyle">
-        <el-col :span="10">
-          <el-card>
-            <div>
-              <span class="ttileStyle">正在报警</span>
-              <span class="countStyle">123</span>
-              <span>个</span>
-            </div>
-          </el-card>
-        </el-col>
-        <el-col :span="10">
-          <el-card>
-            <div>
-              <span class="ttileStyle">今日报警</span>
-              <span class="countStyle">123</span>
-              <span>个</span>
-            </div>
-          </el-card>
-        </el-col>
-      </el-col>
-      <el-col>
-        <el-col :span="8">
-          <div class="flagBoxStyle">
-            <div class="flagStyle" />
-            <div>各类报警统计</div>
-          </div>
-        </el-col>
-        <el-col :span="16">
-          <el-date-picker
-            v-model="timeRange1"
-            type="datetimerange"
-            range-separator="至"
-            size="small"
-            :picker-options="pickerOptions1"
-            value-format="yyyy-MM-dd HH:mm:ss"
-            start-placeholder="开始时间"
-            end-placeholder="结束时间"
-            @change="fetchDeviceTypeBar"
-          />
-        </el-col>
-      </el-col>
-      <el-col>
-        <ve-histogram
-          :data="chartData"
-          :grid="grid"
-          :extend="extend"
-          :settings="chartSettings"
-        />
-      </el-col>
-      <el-col>
-        <el-col :span="8">
-          <div class="flagBoxStyle">
-            <div class="flagStyle" />
-            <div>报警趋势统计</div>
-          </div>
-        </el-col>
-        <el-col :span="16">
-          <el-date-picker
-            v-model="timeRange2"
-            type="datetimerange"
-            range-separator="至"
-            size="small"
-            :picker-options="pickerOptions2"
-            value-format="yyyy-MM-dd HH:mm:ss"
-            start-placeholder="开始时间"
-            end-placeholder="结束时间"
-            @change="fetchDeviceTypeLine"
-          />
-        </el-col>
-      </el-col>
-      <el-col>
-        <ve-line
-          :data="chartDataLine"
-          :settings="chartSettingsLine"
-        />
-      </el-col>
-    </el-col>
-  </el-row>
-</template>
-
-<script>
-import { deviceStaticsByDept } from '@/api/alarm/deviceStatics'
-import { alarmStaticsByContent } from '@/api/alarm/deviceStatics'
-export default {
-  name: 'AlarmStaticsByType',
-  data() {
-    return {
-      // 柱状图搜索条件
-      timeRange1: '',
-      timeRange2: '',
-      listQuery: {
-        startTime: '',
-        endTime: '',
-        alarmType: ''
-      },
-      pickerOptions1: {
-        shortcuts: [{
-          text: '最近一周',
-          onClick(picker) {
-            const end = new Date()
-            const start = new Date()
-            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
-            picker.$emit('pick', [start, end])
-          }
-        }, {
-          text: '最近一个月',
-          onClick(picker) {
-            const end = new Date()
-            const start = new Date()
-            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
-            picker.$emit('pick', [start, end])
-          }
-        }, {
-          text: '最近三个月',
-          onClick(picker) {
-            const end = new Date()
-            const start = new Date()
-            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
-            picker.$emit('pick', [start, end])
-          }
-        }]
-      },
-      // 折线图搜索条件
-      listStatue: {
-        startTime: '',
-        endTime: '',
-        alarmType: ''
-      },
-      pickerOptions2: {
-        shortcuts: [{
-          text: '最近一周',
-          onClick(picker) {
-            const end = new Date()
-            const start = new Date()
-            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
-            picker.$emit('pick', [start, end])
-          }
-        }, {
-          text: '最近一个月',
-          onClick(picker) {
-            const end = new Date()
-            const start = new Date()
-            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
-            picker.$emit('pick', [start, end])
-          }
-        }, {
-          text: '最近三个月',
-          onClick(picker) {
-            const end = new Date()
-            const start = new Date()
-            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
-            picker.$emit('pick', [start, end])
-          }
-        }]
-      },
-      // 折线图
-      chartSettingsLine: {
-        labelMap: {
-          'alarmWellData': '井盖开盖报警',
-          'alarmLiquidData': '液位超限报警',
-          'alarmHarmfulData': '有害气体超标报警'
-        },
-        metrics: ['alarmWellData', 'alarmLiquidData', 'alarmHarmfulData'],
-        dimension: ['date']
-      },
-      chartDataLine: {
-        columns: ['date', 'alarmWellData', 'alarmLiquidData', 'alarmHarmfulData'],
-        rows: []
-      },
-      // 柱状图
-      extend: {
-        xAxis: {
-          axisLabel: {
-            rotate: 30,
-            margin: 30,
-            textStyle: {
-              align: 'center'
-            }
-          }
-        },
-        series: {
-          label: { show: true, position: 'top' },
-          barMaxWidth: 35 // 最大柱宽度
-        }
-      },
-      grid: {
-        right: 60
-      },
-      chartSettings: {
-        itemStyle: {
-          'barCategoryGap': 5
-        },
-        barWidth: 15,
-        labelMap: {
-          'alarmContent': '报警内容',
-          'totalAlarm': '报警数量',
-          'cancelAlarm': '消警数量'
-        },
-        dimension: ['alarmContent'],
-        metrics: ['totalAlarm', 'cancelAlarm']
-      },
-      chartData: {
-        columns: ['alarmContent', 'totalAlarm', 'cancelAlarm'],
-        rows: []
-      }
-    }
-  },
-  created() {
-    this.fetchDeviceTypeBar()
-    this.fetchDeviceTypeLine()
-  },
-  methods: {
-    fetchDeviceTypeBar(val) {
-      if (val !== undefined) {
-        this.listQuery.startTime = val[0]
-        this.listQuery.endTime = val[1]
-      }
-      deviceStaticsByDept(this.listQuery).then(response => {
-        this.chartData.rows = response.data
-      })
-    },
-    fetchDeviceTypeLine(val) {
-      if (val !== undefined) {
-        this.listQuery.startTime = val[0]
-        this.listQuery.endTime = val[1]
-      }
-      alarmStaticsByContent(this.listStatue).then(response => {
-        console.log(response.data, '===123')
-        this.chartDataLine.rows = response.data
-      })
-    }
-  }
-}
-</script>
-
-<style rel="stylesheet/scss" lang="scss" scoped>
-.flagBoxStyle {
-  display: flex;
-  margin-bottom: 20px;
-}
-.flagBoxStyle div:nth-child(2){
-  line-height: 30px;
-  font-weight: 600;
-}
-.flagStyle {
-  width: 4px;
-  height: 30px;
-  margin-right: 6px;
-  background: rgb(64 121 242);
-}
-.cardStyle {
-  display:flex;
-  margin-bottom: 60px;
-  justify-content: space-around;
-}
-.ttileStyle {
-  font-size: 12px;
-}
-.countStyle {
-  font-size: 20px;
-  margin: 0 10px;
-}
-.el-date-editor--datetimerange.el-input,
-.el-date-editor--datetimerange.el-input__inner{
-  width: 340px;
-}
-</style>
diff --git a/src/views/dashboard/components/AlarmByDays.vue b/src/views/dashboard/components/AlarmByDays.vue
index 6b839d3..bd8228e 100644
--- a/src/views/dashboard/components/AlarmByDays.vue
+++ b/src/views/dashboard/components/AlarmByDays.vue
@@ -1,5 +1,5 @@
 <template>
-  <ve-line :data="chartData" :title="title" :settings="chartSettings" />
+  <ve-line :data="chartData" :title="title" :extend="extend" :settings="chartSettings" />
 </template>
 
 <script>
@@ -9,27 +9,33 @@
 export default {
   name: 'AlarmByDays',
   data() {
-    this.title = {
-      text: '7日报警趋势'
-    }
-    this.chartSettings = {
-      labelMap: {
-        'alarmWells': '报警井数',
-        'alarmTimes': '报警次数'
-      },
-      metrics: ['alarmTimes', 'alarmWells'],
-      dimension: ['date']
-    }
     return {
+      title: {
+        text: '7日报警趋势'
+      },
+      chartSettings: {
+        labelMap: {
+          'alarmWells': '报警井数',
+          'alarmTimes': '报警次数'
+        },
+        metrics: ['alarmTimes', 'alarmWells'],
+        dimension: ['date']
+      },
+      extend: {
+        yAxis: {
+          type: 'value',
+          minInterval: 1
+        }
+      },
       listQuery: {
         deviceType: '',
         beginTime: '',
         endTime: ''
-      },
+      }, // 查询条件
       chartData: {
         columns: ['date', 'alarmTimes', 'alarmWells'],
         rows: []
-      }
+      } // 数据
     }
   },
   mounted() {
@@ -52,6 +58,14 @@
       this.listQuery.endTime = endTime
       alarmStaticByDay(this.listQuery).then(response => {
         this.chartData.rows = response.data
+        const maxValue = Math.max.apply(Math, response.data.map(function(item) {
+          return parseInt(item.alarmTimes)
+        }))
+        if (maxValue < 10) {
+          this.extend.yAxis = { type: 'value', minInterval: 1, max: 10 }
+        } else {
+          this.extend.yAxis = { type: 'value', minInterval: 1 }
+        }
       })
     }
   }
diff --git a/src/views/dashboard/components/JobByStatus.vue b/src/views/dashboard/components/JobByStatus.vue
index 7502e17..66feacc 100644
--- a/src/views/dashboard/components/JobByStatus.vue
+++ b/src/views/dashboard/components/JobByStatus.vue
@@ -1,5 +1,5 @@
 <template>
-  <ve-bar :data="chartData" :title="title" :settings="chartSettings" />
+  <ve-bar :data="chartData" :title="title" :extend="extend" :settings="chartSettings" />
 </template>
 
 <script>
@@ -9,22 +9,31 @@
 export default {
   name: 'JobByStatus',
   data() {
-    this.title = {
-      text: '30日工单数量统计'
-    }
-    this.chartSettings = {
-      labelMap: {
-        'deptName': '权属单位',
-        'beforeGet': '待处理',
-        'beforeConfirm': '待确认',
-        'inHandle': '处理中',
-        'over': '已完成'
-      },
-      stack: {
-        'xxx': ['beforeGet', 'beforeConfirm', 'inHandle', 'over']
-      }
-    }
     return {
+      title: {
+        text: '30日工单数量统计'
+      },
+      chartSettings: {
+        labelMap: {
+          'deptName': '权属单位',
+          'beforeGet': '待处理',
+          'beforeConfirm': '待确认',
+          'inHandle': '处理中',
+          'over': '已完成'
+        },
+        stack: {
+          'xxx': ['beforeGet', 'beforeConfirm', 'inHandle', 'over']
+        }
+      },
+      extend: {
+        xAxis: {
+          type: 'value',
+          minInterval: 1
+        },
+        series: {
+          barMaxWidth: 35
+        }
+      },
       chartData: {
         columns: ['deptName', 'beforeGet', 'beforeConfirm', 'inHandle', 'over'],
         rows: []
@@ -54,6 +63,14 @@
       }
       jobStaticsByDept(listQuery).then(response => {
         this.chartData.rows = response.data
+        const maxValue = Math.max.apply(Math, response.data.map(function(item) {
+          return parseInt(item.beforeGet) + parseInt(item.beforeConfirm) + parseInt(item.inHandle) + parseInt(item.over)
+        }))
+        if (maxValue < 10) {
+          this.extend.xAxis = { type: 'value', minInterval: 1, max: 10 }
+        } else {
+          this.extend.xAxis = { type: 'value', minInterval: 1 }
+        }
       })
     }
   }

diff --git a/src/api/alarm/deviceStatics.js b/src/api/alarm/deviceStatics.js
index 7afcd4f..c375ac5 100644
--- a/src/api/alarm/deviceStatics.js
+++ b/src/api/alarm/deviceStatics.js
@@ -3,15 +3,6 @@
  */
 import request from '@/utils/request'
 
-// 报警情况统计
-export function deviceStaticsByDept(params) {
-  return request({
-    url: 'statics/alarmStaticsByStatus',
-    method: 'get',
-    params
-  })
-}
-
 // 报警设备查询
 export function getDeviceAlarmList(params) {
   return request({
diff --git a/src/api/data/dataStatics.js b/src/api/data/dataStatics.js
index bbe9263..56a1ea4 100644
--- a/src/api/data/dataStatics.js
+++ b/src/api/data/dataStatics.js
@@ -143,3 +143,12 @@
     params
   })
 }
+
+// 报警的井排名
+export function alarmWellRank(params) {
+  return request({
+    url: '/statics/alarmWellListPage',
+    method: 'get',
+    params
+  })
+}
diff --git a/src/views/alarmStatics/alarmStatics.vue b/src/views/alarmStatics/alarmStatics.vue
index 22c8798..7c2d2e8 100644
--- a/src/views/alarmStatics/alarmStatics.vue
+++ b/src/views/alarmStatics/alarmStatics.vue
@@ -1,13 +1,23 @@
 <template>
-  <el-row>
+  <el-row :gutter="10">
     <el-col :span="10">
-      <el-card shadow="never">
-        <div />
-        <alarm-statics-by-type />
-      </el-card>
+      <panel-card title="报警总体情况">
+        <el-row :gutter="20" style="padding: 15px 10px">
+          <el-col :span="12">
+            <simple-card title="正在报警" :context="alarmNow" unit="个" />
+          </el-col>
+          <el-col :span="12">
+            <simple-card title="今日报警" :context="todayAlarm" unit="个" />
+          </el-col>
+        </el-row>
+      </panel-card>
+      <!--报警井排名-->
+      <alarm-well-rank style="margin-top:10px" />
+      <!--报警内容统计-->
+      <alarm-statics-by-content style="margin-top:10px" />
     </el-col>
     <el-col :span="14">
-      <alarm-history-by-type />
+      <alarm-analysis />
     </el-col>
     <el-col :span="14">
       <alarm-statics-by-dept />
@@ -16,16 +26,32 @@
 </template>
 
 <script>
-import alarmStaticsByType from './components/alarmStaticsByType'
-import alarmHistoryByType from './components/alarmHistoryByType'
+
 import alarmStaticsByDept from './components/alarmStaticsByDept'
+import AlarmAnalysis from '@/views/dataView/components/alarmAnalysis'
+import PanelCard from '@/components/BigData/Card/panelCard'
+import SimpleCard from '@/components/BigData/Card/simpleCard'
+import { getSearchLastWeekTime } from '@/utils/dateutils'
+import AlarmWellRank from '@/views/dataView/components/alarmWellRank'
+import AlarmStaticsByContent from '@/views/alarmStatics/components/alarmStaticsByContent'
 export default {
-  name: 'DeviceStatics',
+  name: 'AlarmStatics',
   components: {
-    alarmStaticsByType,
-    alarmHistoryByType,
+    AlarmStaticsByContent,
+    AlarmWellRank,
+    SimpleCard,
+    PanelCard,
+    AlarmAnalysis,
     alarmStaticsByDept
+  },
+  data() {
+    return {
+      alarmNow: 0,
+      todayAlarm: 0
+
+    }
   }
+
 }
 </script>
 
diff --git a/src/views/alarmStatics/components/alarmStaticsByContent.vue b/src/views/alarmStatics/components/alarmStaticsByContent.vue
new file mode 100644
index 0000000..b165841
--- /dev/null
+++ b/src/views/alarmStatics/components/alarmStaticsByContent.vue
@@ -0,0 +1,47 @@
+<template>
+  <panel-card title="各类报警统计">
+    <template slot="func">
+      <el-col :span="16">
+        <el-date-picker
+          v-model="timeRange"
+          type="datetimerange"
+          range-separator="至"
+          size="small"
+          value-format="yyyy-MM-dd HH:mm:ss"
+          start-placeholder="开始时间"
+          end-placeholder="结束时间"
+        />
+      </el-col>
+    </template>
+    <alarm-statics-by-type :time-range="timeRange" />
+  </panel-card>
+</template>
+
+<script>
+import PanelCard from '@/components/BigData/Card/panelCard'
+import alarmStaticsByType from '@/views/staticCharts/AlarmStaticsByType'
+import { getSearchLastWeekTime } from '@/utils/dateutils'
+export default {
+  name: 'AlarmStaticsByContent',
+  components: {
+    alarmStaticsByType, PanelCard
+  },
+  data() {
+    return {
+      timeRange: []
+    }
+  },
+  created() {
+    this.timeRange = getSearchLastWeekTime()
+  },
+  methods: {
+    refresh() {
+
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/views/alarmStatics/components/alarmStaticsByType.vue b/src/views/alarmStatics/components/alarmStaticsByType.vue
deleted file mode 100644
index 7e17365..0000000
--- a/src/views/alarmStatics/components/alarmStaticsByType.vue
+++ /dev/null
@@ -1,276 +0,0 @@
-<template>
-  <el-row>
-    <el-col>
-      <el-col>
-        <div class="flagBoxStyle">
-          <div class="flagStyle" />
-          <div>报警总体情况</div>
-        </div>
-      </el-col>
-      <el-col class="cardStyle">
-        <el-col :span="10">
-          <el-card>
-            <div>
-              <span class="ttileStyle">正在报警</span>
-              <span class="countStyle">123</span>
-              <span>个</span>
-            </div>
-          </el-card>
-        </el-col>
-        <el-col :span="10">
-          <el-card>
-            <div>
-              <span class="ttileStyle">今日报警</span>
-              <span class="countStyle">123</span>
-              <span>个</span>
-            </div>
-          </el-card>
-        </el-col>
-      </el-col>
-      <el-col>
-        <el-col :span="8">
-          <div class="flagBoxStyle">
-            <div class="flagStyle" />
-            <div>各类报警统计</div>
-          </div>
-        </el-col>
-        <el-col :span="16">
-          <el-date-picker
-            v-model="timeRange1"
-            type="datetimerange"
-            range-separator="至"
-            size="small"
-            :picker-options="pickerOptions1"
-            value-format="yyyy-MM-dd HH:mm:ss"
-            start-placeholder="开始时间"
-            end-placeholder="结束时间"
-            @change="fetchDeviceTypeBar"
-          />
-        </el-col>
-      </el-col>
-      <el-col>
-        <ve-histogram
-          :data="chartData"
-          :grid="grid"
-          :extend="extend"
-          :settings="chartSettings"
-        />
-      </el-col>
-      <el-col>
-        <el-col :span="8">
-          <div class="flagBoxStyle">
-            <div class="flagStyle" />
-            <div>报警趋势统计</div>
-          </div>
-        </el-col>
-        <el-col :span="16">
-          <el-date-picker
-            v-model="timeRange2"
-            type="datetimerange"
-            range-separator="至"
-            size="small"
-            :picker-options="pickerOptions2"
-            value-format="yyyy-MM-dd HH:mm:ss"
-            start-placeholder="开始时间"
-            end-placeholder="结束时间"
-            @change="fetchDeviceTypeLine"
-          />
-        </el-col>
-      </el-col>
-      <el-col>
-        <ve-line
-          :data="chartDataLine"
-          :settings="chartSettingsLine"
-        />
-      </el-col>
-    </el-col>
-  </el-row>
-</template>
-
-<script>
-import { deviceStaticsByDept } from '@/api/alarm/deviceStatics'
-import { alarmStaticsByContent } from '@/api/alarm/deviceStatics'
-export default {
-  name: 'AlarmStaticsByType',
-  data() {
-    return {
-      // 柱状图搜索条件
-      timeRange1: '',
-      timeRange2: '',
-      listQuery: {
-        startTime: '',
-        endTime: '',
-        alarmType: ''
-      },
-      pickerOptions1: {
-        shortcuts: [{
-          text: '最近一周',
-          onClick(picker) {
-            const end = new Date()
-            const start = new Date()
-            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
-            picker.$emit('pick', [start, end])
-          }
-        }, {
-          text: '最近一个月',
-          onClick(picker) {
-            const end = new Date()
-            const start = new Date()
-            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
-            picker.$emit('pick', [start, end])
-          }
-        }, {
-          text: '最近三个月',
-          onClick(picker) {
-            const end = new Date()
-            const start = new Date()
-            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
-            picker.$emit('pick', [start, end])
-          }
-        }]
-      },
-      // 折线图搜索条件
-      listStatue: {
-        startTime: '',
-        endTime: '',
-        alarmType: ''
-      },
-      pickerOptions2: {
-        shortcuts: [{
-          text: '最近一周',
-          onClick(picker) {
-            const end = new Date()
-            const start = new Date()
-            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
-            picker.$emit('pick', [start, end])
-          }
-        }, {
-          text: '最近一个月',
-          onClick(picker) {
-            const end = new Date()
-            const start = new Date()
-            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
-            picker.$emit('pick', [start, end])
-          }
-        }, {
-          text: '最近三个月',
-          onClick(picker) {
-            const end = new Date()
-            const start = new Date()
-            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
-            picker.$emit('pick', [start, end])
-          }
-        }]
-      },
-      // 折线图
-      chartSettingsLine: {
-        labelMap: {
-          'alarmWellData': '井盖开盖报警',
-          'alarmLiquidData': '液位超限报警',
-          'alarmHarmfulData': '有害气体超标报警'
-        },
-        metrics: ['alarmWellData', 'alarmLiquidData', 'alarmHarmfulData'],
-        dimension: ['date']
-      },
-      chartDataLine: {
-        columns: ['date', 'alarmWellData', 'alarmLiquidData', 'alarmHarmfulData'],
-        rows: []
-      },
-      // 柱状图
-      extend: {
-        xAxis: {
-          axisLabel: {
-            rotate: 30,
-            margin: 30,
-            textStyle: {
-              align: 'center'
-            }
-          }
-        },
-        series: {
-          label: { show: true, position: 'top' },
-          barMaxWidth: 35 // 最大柱宽度
-        }
-      },
-      grid: {
-        right: 60
-      },
-      chartSettings: {
-        itemStyle: {
-          'barCategoryGap': 5
-        },
-        barWidth: 15,
-        labelMap: {
-          'alarmContent': '报警内容',
-          'totalAlarm': '报警数量',
-          'cancelAlarm': '消警数量'
-        },
-        dimension: ['alarmContent'],
-        metrics: ['totalAlarm', 'cancelAlarm']
-      },
-      chartData: {
-        columns: ['alarmContent', 'totalAlarm', 'cancelAlarm'],
-        rows: []
-      }
-    }
-  },
-  created() {
-    this.fetchDeviceTypeBar()
-    this.fetchDeviceTypeLine()
-  },
-  methods: {
-    fetchDeviceTypeBar(val) {
-      if (val !== undefined) {
-        this.listQuery.startTime = val[0]
-        this.listQuery.endTime = val[1]
-      }
-      deviceStaticsByDept(this.listQuery).then(response => {
-        this.chartData.rows = response.data
-      })
-    },
-    fetchDeviceTypeLine(val) {
-      if (val !== undefined) {
-        this.listQuery.startTime = val[0]
-        this.listQuery.endTime = val[1]
-      }
-      alarmStaticsByContent(this.listStatue).then(response => {
-        console.log(response.data, '===123')
-        this.chartDataLine.rows = response.data
-      })
-    }
-  }
-}
-</script>
-
-<style rel="stylesheet/scss" lang="scss" scoped>
-.flagBoxStyle {
-  display: flex;
-  margin-bottom: 20px;
-}
-.flagBoxStyle div:nth-child(2){
-  line-height: 30px;
-  font-weight: 600;
-}
-.flagStyle {
-  width: 4px;
-  height: 30px;
-  margin-right: 6px;
-  background: rgb(64 121 242);
-}
-.cardStyle {
-  display:flex;
-  margin-bottom: 60px;
-  justify-content: space-around;
-}
-.ttileStyle {
-  font-size: 12px;
-}
-.countStyle {
-  font-size: 20px;
-  margin: 0 10px;
-}
-.el-date-editor--datetimerange.el-input,
-.el-date-editor--datetimerange.el-input__inner{
-  width: 340px;
-}
-</style>
diff --git a/src/views/dashboard/components/AlarmByDays.vue b/src/views/dashboard/components/AlarmByDays.vue
index 6b839d3..bd8228e 100644
--- a/src/views/dashboard/components/AlarmByDays.vue
+++ b/src/views/dashboard/components/AlarmByDays.vue
@@ -1,5 +1,5 @@
 <template>
-  <ve-line :data="chartData" :title="title" :settings="chartSettings" />
+  <ve-line :data="chartData" :title="title" :extend="extend" :settings="chartSettings" />
 </template>
 
 <script>
@@ -9,27 +9,33 @@
 export default {
   name: 'AlarmByDays',
   data() {
-    this.title = {
-      text: '7日报警趋势'
-    }
-    this.chartSettings = {
-      labelMap: {
-        'alarmWells': '报警井数',
-        'alarmTimes': '报警次数'
-      },
-      metrics: ['alarmTimes', 'alarmWells'],
-      dimension: ['date']
-    }
     return {
+      title: {
+        text: '7日报警趋势'
+      },
+      chartSettings: {
+        labelMap: {
+          'alarmWells': '报警井数',
+          'alarmTimes': '报警次数'
+        },
+        metrics: ['alarmTimes', 'alarmWells'],
+        dimension: ['date']
+      },
+      extend: {
+        yAxis: {
+          type: 'value',
+          minInterval: 1
+        }
+      },
       listQuery: {
         deviceType: '',
         beginTime: '',
         endTime: ''
-      },
+      }, // 查询条件
       chartData: {
         columns: ['date', 'alarmTimes', 'alarmWells'],
         rows: []
-      }
+      } // 数据
     }
   },
   mounted() {
@@ -52,6 +58,14 @@
       this.listQuery.endTime = endTime
       alarmStaticByDay(this.listQuery).then(response => {
         this.chartData.rows = response.data
+        const maxValue = Math.max.apply(Math, response.data.map(function(item) {
+          return parseInt(item.alarmTimes)
+        }))
+        if (maxValue < 10) {
+          this.extend.yAxis = { type: 'value', minInterval: 1, max: 10 }
+        } else {
+          this.extend.yAxis = { type: 'value', minInterval: 1 }
+        }
       })
     }
   }
diff --git a/src/views/dashboard/components/JobByStatus.vue b/src/views/dashboard/components/JobByStatus.vue
index 7502e17..66feacc 100644
--- a/src/views/dashboard/components/JobByStatus.vue
+++ b/src/views/dashboard/components/JobByStatus.vue
@@ -1,5 +1,5 @@
 <template>
-  <ve-bar :data="chartData" :title="title" :settings="chartSettings" />
+  <ve-bar :data="chartData" :title="title" :extend="extend" :settings="chartSettings" />
 </template>
 
 <script>
@@ -9,22 +9,31 @@
 export default {
   name: 'JobByStatus',
   data() {
-    this.title = {
-      text: '30日工单数量统计'
-    }
-    this.chartSettings = {
-      labelMap: {
-        'deptName': '权属单位',
-        'beforeGet': '待处理',
-        'beforeConfirm': '待确认',
-        'inHandle': '处理中',
-        'over': '已完成'
-      },
-      stack: {
-        'xxx': ['beforeGet', 'beforeConfirm', 'inHandle', 'over']
-      }
-    }
     return {
+      title: {
+        text: '30日工单数量统计'
+      },
+      chartSettings: {
+        labelMap: {
+          'deptName': '权属单位',
+          'beforeGet': '待处理',
+          'beforeConfirm': '待确认',
+          'inHandle': '处理中',
+          'over': '已完成'
+        },
+        stack: {
+          'xxx': ['beforeGet', 'beforeConfirm', 'inHandle', 'over']
+        }
+      },
+      extend: {
+        xAxis: {
+          type: 'value',
+          minInterval: 1
+        },
+        series: {
+          barMaxWidth: 35
+        }
+      },
       chartData: {
         columns: ['deptName', 'beforeGet', 'beforeConfirm', 'inHandle', 'over'],
         rows: []
@@ -54,6 +63,14 @@
       }
       jobStaticsByDept(listQuery).then(response => {
         this.chartData.rows = response.data
+        const maxValue = Math.max.apply(Math, response.data.map(function(item) {
+          return parseInt(item.beforeGet) + parseInt(item.beforeConfirm) + parseInt(item.inHandle) + parseInt(item.over)
+        }))
+        if (maxValue < 10) {
+          this.extend.xAxis = { type: 'value', minInterval: 1, max: 10 }
+        } else {
+          this.extend.xAxis = { type: 'value', minInterval: 1 }
+        }
       })
     }
   }
diff --git a/src/views/dashboard/index.vue b/src/views/dashboard/index.vue
index 7f228d3..f96a2a2 100644
--- a/src/views/dashboard/index.vue
+++ b/src/views/dashboard/index.vue
@@ -17,7 +17,7 @@
       <!--设备数量统计-->
       <el-col v-if="hasPerm('/statics/deviceStaticsByType')" :span="14">
         <el-card shadow="never">
-          <device-count />
+          <device-count-by-type-bar chart-title="设备数量统计" />
         </el-card>
       </el-col>
       <!--设备在线情况统计-->
@@ -51,10 +51,12 @@
 import DeviceCountByOnline from './components/DeviceCountByOnline'
 import AlarmByDays from './components/AlarmByDays'
 import JobByStatus from './components/JobByStatus'
+import DeviceCountByTypeBar from '@/views/staticCharts/DeviceCountByTypeBar'
 
 export default {
   name: 'Dashboard',
   components: {
+    DeviceCountByTypeBar,
     JobByStatus,
     AlarmByDays,
     PanelGroup,

diff --git a/src/api/alarm/deviceStatics.js b/src/api/alarm/deviceStatics.js
index 7afcd4f..c375ac5 100644
--- a/src/api/alarm/deviceStatics.js
+++ b/src/api/alarm/deviceStatics.js
@@ -3,15 +3,6 @@
  */
 import request from '@/utils/request'
 
-// 报警情况统计
-export function deviceStaticsByDept(params) {
-  return request({
-    url: 'statics/alarmStaticsByStatus',
-    method: 'get',
-    params
-  })
-}
-
 // 报警设备查询
 export function getDeviceAlarmList(params) {
   return request({
diff --git a/src/api/data/dataStatics.js b/src/api/data/dataStatics.js
index bbe9263..56a1ea4 100644
--- a/src/api/data/dataStatics.js
+++ b/src/api/data/dataStatics.js
@@ -143,3 +143,12 @@
     params
   })
 }
+
+// 报警的井排名
+export function alarmWellRank(params) {
+  return request({
+    url: '/statics/alarmWellListPage',
+    method: 'get',
+    params
+  })
+}
diff --git a/src/views/alarmStatics/alarmStatics.vue b/src/views/alarmStatics/alarmStatics.vue
index 22c8798..7c2d2e8 100644
--- a/src/views/alarmStatics/alarmStatics.vue
+++ b/src/views/alarmStatics/alarmStatics.vue
@@ -1,13 +1,23 @@
 <template>
-  <el-row>
+  <el-row :gutter="10">
     <el-col :span="10">
-      <el-card shadow="never">
-        <div />
-        <alarm-statics-by-type />
-      </el-card>
+      <panel-card title="报警总体情况">
+        <el-row :gutter="20" style="padding: 15px 10px">
+          <el-col :span="12">
+            <simple-card title="正在报警" :context="alarmNow" unit="个" />
+          </el-col>
+          <el-col :span="12">
+            <simple-card title="今日报警" :context="todayAlarm" unit="个" />
+          </el-col>
+        </el-row>
+      </panel-card>
+      <!--报警井排名-->
+      <alarm-well-rank style="margin-top:10px" />
+      <!--报警内容统计-->
+      <alarm-statics-by-content style="margin-top:10px" />
     </el-col>
     <el-col :span="14">
-      <alarm-history-by-type />
+      <alarm-analysis />
     </el-col>
     <el-col :span="14">
       <alarm-statics-by-dept />
@@ -16,16 +26,32 @@
 </template>
 
 <script>
-import alarmStaticsByType from './components/alarmStaticsByType'
-import alarmHistoryByType from './components/alarmHistoryByType'
+
 import alarmStaticsByDept from './components/alarmStaticsByDept'
+import AlarmAnalysis from '@/views/dataView/components/alarmAnalysis'
+import PanelCard from '@/components/BigData/Card/panelCard'
+import SimpleCard from '@/components/BigData/Card/simpleCard'
+import { getSearchLastWeekTime } from '@/utils/dateutils'
+import AlarmWellRank from '@/views/dataView/components/alarmWellRank'
+import AlarmStaticsByContent from '@/views/alarmStatics/components/alarmStaticsByContent'
 export default {
-  name: 'DeviceStatics',
+  name: 'AlarmStatics',
   components: {
-    alarmStaticsByType,
-    alarmHistoryByType,
+    AlarmStaticsByContent,
+    AlarmWellRank,
+    SimpleCard,
+    PanelCard,
+    AlarmAnalysis,
     alarmStaticsByDept
+  },
+  data() {
+    return {
+      alarmNow: 0,
+      todayAlarm: 0
+
+    }
   }
+
 }
 </script>
 
diff --git a/src/views/alarmStatics/components/alarmStaticsByContent.vue b/src/views/alarmStatics/components/alarmStaticsByContent.vue
new file mode 100644
index 0000000..b165841
--- /dev/null
+++ b/src/views/alarmStatics/components/alarmStaticsByContent.vue
@@ -0,0 +1,47 @@
+<template>
+  <panel-card title="各类报警统计">
+    <template slot="func">
+      <el-col :span="16">
+        <el-date-picker
+          v-model="timeRange"
+          type="datetimerange"
+          range-separator="至"
+          size="small"
+          value-format="yyyy-MM-dd HH:mm:ss"
+          start-placeholder="开始时间"
+          end-placeholder="结束时间"
+        />
+      </el-col>
+    </template>
+    <alarm-statics-by-type :time-range="timeRange" />
+  </panel-card>
+</template>
+
+<script>
+import PanelCard from '@/components/BigData/Card/panelCard'
+import alarmStaticsByType from '@/views/staticCharts/AlarmStaticsByType'
+import { getSearchLastWeekTime } from '@/utils/dateutils'
+export default {
+  name: 'AlarmStaticsByContent',
+  components: {
+    alarmStaticsByType, PanelCard
+  },
+  data() {
+    return {
+      timeRange: []
+    }
+  },
+  created() {
+    this.timeRange = getSearchLastWeekTime()
+  },
+  methods: {
+    refresh() {
+
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/views/alarmStatics/components/alarmStaticsByType.vue b/src/views/alarmStatics/components/alarmStaticsByType.vue
deleted file mode 100644
index 7e17365..0000000
--- a/src/views/alarmStatics/components/alarmStaticsByType.vue
+++ /dev/null
@@ -1,276 +0,0 @@
-<template>
-  <el-row>
-    <el-col>
-      <el-col>
-        <div class="flagBoxStyle">
-          <div class="flagStyle" />
-          <div>报警总体情况</div>
-        </div>
-      </el-col>
-      <el-col class="cardStyle">
-        <el-col :span="10">
-          <el-card>
-            <div>
-              <span class="ttileStyle">正在报警</span>
-              <span class="countStyle">123</span>
-              <span>个</span>
-            </div>
-          </el-card>
-        </el-col>
-        <el-col :span="10">
-          <el-card>
-            <div>
-              <span class="ttileStyle">今日报警</span>
-              <span class="countStyle">123</span>
-              <span>个</span>
-            </div>
-          </el-card>
-        </el-col>
-      </el-col>
-      <el-col>
-        <el-col :span="8">
-          <div class="flagBoxStyle">
-            <div class="flagStyle" />
-            <div>各类报警统计</div>
-          </div>
-        </el-col>
-        <el-col :span="16">
-          <el-date-picker
-            v-model="timeRange1"
-            type="datetimerange"
-            range-separator="至"
-            size="small"
-            :picker-options="pickerOptions1"
-            value-format="yyyy-MM-dd HH:mm:ss"
-            start-placeholder="开始时间"
-            end-placeholder="结束时间"
-            @change="fetchDeviceTypeBar"
-          />
-        </el-col>
-      </el-col>
-      <el-col>
-        <ve-histogram
-          :data="chartData"
-          :grid="grid"
-          :extend="extend"
-          :settings="chartSettings"
-        />
-      </el-col>
-      <el-col>
-        <el-col :span="8">
-          <div class="flagBoxStyle">
-            <div class="flagStyle" />
-            <div>报警趋势统计</div>
-          </div>
-        </el-col>
-        <el-col :span="16">
-          <el-date-picker
-            v-model="timeRange2"
-            type="datetimerange"
-            range-separator="至"
-            size="small"
-            :picker-options="pickerOptions2"
-            value-format="yyyy-MM-dd HH:mm:ss"
-            start-placeholder="开始时间"
-            end-placeholder="结束时间"
-            @change="fetchDeviceTypeLine"
-          />
-        </el-col>
-      </el-col>
-      <el-col>
-        <ve-line
-          :data="chartDataLine"
-          :settings="chartSettingsLine"
-        />
-      </el-col>
-    </el-col>
-  </el-row>
-</template>
-
-<script>
-import { deviceStaticsByDept } from '@/api/alarm/deviceStatics'
-import { alarmStaticsByContent } from '@/api/alarm/deviceStatics'
-export default {
-  name: 'AlarmStaticsByType',
-  data() {
-    return {
-      // 柱状图搜索条件
-      timeRange1: '',
-      timeRange2: '',
-      listQuery: {
-        startTime: '',
-        endTime: '',
-        alarmType: ''
-      },
-      pickerOptions1: {
-        shortcuts: [{
-          text: '最近一周',
-          onClick(picker) {
-            const end = new Date()
-            const start = new Date()
-            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
-            picker.$emit('pick', [start, end])
-          }
-        }, {
-          text: '最近一个月',
-          onClick(picker) {
-            const end = new Date()
-            const start = new Date()
-            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
-            picker.$emit('pick', [start, end])
-          }
-        }, {
-          text: '最近三个月',
-          onClick(picker) {
-            const end = new Date()
-            const start = new Date()
-            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
-            picker.$emit('pick', [start, end])
-          }
-        }]
-      },
-      // 折线图搜索条件
-      listStatue: {
-        startTime: '',
-        endTime: '',
-        alarmType: ''
-      },
-      pickerOptions2: {
-        shortcuts: [{
-          text: '最近一周',
-          onClick(picker) {
-            const end = new Date()
-            const start = new Date()
-            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
-            picker.$emit('pick', [start, end])
-          }
-        }, {
-          text: '最近一个月',
-          onClick(picker) {
-            const end = new Date()
-            const start = new Date()
-            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
-            picker.$emit('pick', [start, end])
-          }
-        }, {
-          text: '最近三个月',
-          onClick(picker) {
-            const end = new Date()
-            const start = new Date()
-            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
-            picker.$emit('pick', [start, end])
-          }
-        }]
-      },
-      // 折线图
-      chartSettingsLine: {
-        labelMap: {
-          'alarmWellData': '井盖开盖报警',
-          'alarmLiquidData': '液位超限报警',
-          'alarmHarmfulData': '有害气体超标报警'
-        },
-        metrics: ['alarmWellData', 'alarmLiquidData', 'alarmHarmfulData'],
-        dimension: ['date']
-      },
-      chartDataLine: {
-        columns: ['date', 'alarmWellData', 'alarmLiquidData', 'alarmHarmfulData'],
-        rows: []
-      },
-      // 柱状图
-      extend: {
-        xAxis: {
-          axisLabel: {
-            rotate: 30,
-            margin: 30,
-            textStyle: {
-              align: 'center'
-            }
-          }
-        },
-        series: {
-          label: { show: true, position: 'top' },
-          barMaxWidth: 35 // 最大柱宽度
-        }
-      },
-      grid: {
-        right: 60
-      },
-      chartSettings: {
-        itemStyle: {
-          'barCategoryGap': 5
-        },
-        barWidth: 15,
-        labelMap: {
-          'alarmContent': '报警内容',
-          'totalAlarm': '报警数量',
-          'cancelAlarm': '消警数量'
-        },
-        dimension: ['alarmContent'],
-        metrics: ['totalAlarm', 'cancelAlarm']
-      },
-      chartData: {
-        columns: ['alarmContent', 'totalAlarm', 'cancelAlarm'],
-        rows: []
-      }
-    }
-  },
-  created() {
-    this.fetchDeviceTypeBar()
-    this.fetchDeviceTypeLine()
-  },
-  methods: {
-    fetchDeviceTypeBar(val) {
-      if (val !== undefined) {
-        this.listQuery.startTime = val[0]
-        this.listQuery.endTime = val[1]
-      }
-      deviceStaticsByDept(this.listQuery).then(response => {
-        this.chartData.rows = response.data
-      })
-    },
-    fetchDeviceTypeLine(val) {
-      if (val !== undefined) {
-        this.listQuery.startTime = val[0]
-        this.listQuery.endTime = val[1]
-      }
-      alarmStaticsByContent(this.listStatue).then(response => {
-        console.log(response.data, '===123')
-        this.chartDataLine.rows = response.data
-      })
-    }
-  }
-}
-</script>
-
-<style rel="stylesheet/scss" lang="scss" scoped>
-.flagBoxStyle {
-  display: flex;
-  margin-bottom: 20px;
-}
-.flagBoxStyle div:nth-child(2){
-  line-height: 30px;
-  font-weight: 600;
-}
-.flagStyle {
-  width: 4px;
-  height: 30px;
-  margin-right: 6px;
-  background: rgb(64 121 242);
-}
-.cardStyle {
-  display:flex;
-  margin-bottom: 60px;
-  justify-content: space-around;
-}
-.ttileStyle {
-  font-size: 12px;
-}
-.countStyle {
-  font-size: 20px;
-  margin: 0 10px;
-}
-.el-date-editor--datetimerange.el-input,
-.el-date-editor--datetimerange.el-input__inner{
-  width: 340px;
-}
-</style>
diff --git a/src/views/dashboard/components/AlarmByDays.vue b/src/views/dashboard/components/AlarmByDays.vue
index 6b839d3..bd8228e 100644
--- a/src/views/dashboard/components/AlarmByDays.vue
+++ b/src/views/dashboard/components/AlarmByDays.vue
@@ -1,5 +1,5 @@
 <template>
-  <ve-line :data="chartData" :title="title" :settings="chartSettings" />
+  <ve-line :data="chartData" :title="title" :extend="extend" :settings="chartSettings" />
 </template>
 
 <script>
@@ -9,27 +9,33 @@
 export default {
   name: 'AlarmByDays',
   data() {
-    this.title = {
-      text: '7日报警趋势'
-    }
-    this.chartSettings = {
-      labelMap: {
-        'alarmWells': '报警井数',
-        'alarmTimes': '报警次数'
-      },
-      metrics: ['alarmTimes', 'alarmWells'],
-      dimension: ['date']
-    }
     return {
+      title: {
+        text: '7日报警趋势'
+      },
+      chartSettings: {
+        labelMap: {
+          'alarmWells': '报警井数',
+          'alarmTimes': '报警次数'
+        },
+        metrics: ['alarmTimes', 'alarmWells'],
+        dimension: ['date']
+      },
+      extend: {
+        yAxis: {
+          type: 'value',
+          minInterval: 1
+        }
+      },
       listQuery: {
         deviceType: '',
         beginTime: '',
         endTime: ''
-      },
+      }, // 查询条件
       chartData: {
         columns: ['date', 'alarmTimes', 'alarmWells'],
         rows: []
-      }
+      } // 数据
     }
   },
   mounted() {
@@ -52,6 +58,14 @@
       this.listQuery.endTime = endTime
       alarmStaticByDay(this.listQuery).then(response => {
         this.chartData.rows = response.data
+        const maxValue = Math.max.apply(Math, response.data.map(function(item) {
+          return parseInt(item.alarmTimes)
+        }))
+        if (maxValue < 10) {
+          this.extend.yAxis = { type: 'value', minInterval: 1, max: 10 }
+        } else {
+          this.extend.yAxis = { type: 'value', minInterval: 1 }
+        }
       })
     }
   }
diff --git a/src/views/dashboard/components/JobByStatus.vue b/src/views/dashboard/components/JobByStatus.vue
index 7502e17..66feacc 100644
--- a/src/views/dashboard/components/JobByStatus.vue
+++ b/src/views/dashboard/components/JobByStatus.vue
@@ -1,5 +1,5 @@
 <template>
-  <ve-bar :data="chartData" :title="title" :settings="chartSettings" />
+  <ve-bar :data="chartData" :title="title" :extend="extend" :settings="chartSettings" />
 </template>
 
 <script>
@@ -9,22 +9,31 @@
 export default {
   name: 'JobByStatus',
   data() {
-    this.title = {
-      text: '30日工单数量统计'
-    }
-    this.chartSettings = {
-      labelMap: {
-        'deptName': '权属单位',
-        'beforeGet': '待处理',
-        'beforeConfirm': '待确认',
-        'inHandle': '处理中',
-        'over': '已完成'
-      },
-      stack: {
-        'xxx': ['beforeGet', 'beforeConfirm', 'inHandle', 'over']
-      }
-    }
     return {
+      title: {
+        text: '30日工单数量统计'
+      },
+      chartSettings: {
+        labelMap: {
+          'deptName': '权属单位',
+          'beforeGet': '待处理',
+          'beforeConfirm': '待确认',
+          'inHandle': '处理中',
+          'over': '已完成'
+        },
+        stack: {
+          'xxx': ['beforeGet', 'beforeConfirm', 'inHandle', 'over']
+        }
+      },
+      extend: {
+        xAxis: {
+          type: 'value',
+          minInterval: 1
+        },
+        series: {
+          barMaxWidth: 35
+        }
+      },
       chartData: {
         columns: ['deptName', 'beforeGet', 'beforeConfirm', 'inHandle', 'over'],
         rows: []
@@ -54,6 +63,14 @@
       }
       jobStaticsByDept(listQuery).then(response => {
         this.chartData.rows = response.data
+        const maxValue = Math.max.apply(Math, response.data.map(function(item) {
+          return parseInt(item.beforeGet) + parseInt(item.beforeConfirm) + parseInt(item.inHandle) + parseInt(item.over)
+        }))
+        if (maxValue < 10) {
+          this.extend.xAxis = { type: 'value', minInterval: 1, max: 10 }
+        } else {
+          this.extend.xAxis = { type: 'value', minInterval: 1 }
+        }
       })
     }
   }
diff --git a/src/views/dashboard/index.vue b/src/views/dashboard/index.vue
index 7f228d3..f96a2a2 100644
--- a/src/views/dashboard/index.vue
+++ b/src/views/dashboard/index.vue
@@ -17,7 +17,7 @@
       <!--设备数量统计-->
       <el-col v-if="hasPerm('/statics/deviceStaticsByType')" :span="14">
         <el-card shadow="never">
-          <device-count />
+          <device-count-by-type-bar chart-title="设备数量统计" />
         </el-card>
       </el-col>
       <!--设备在线情况统计-->
@@ -51,10 +51,12 @@
 import DeviceCountByOnline from './components/DeviceCountByOnline'
 import AlarmByDays from './components/AlarmByDays'
 import JobByStatus from './components/JobByStatus'
+import DeviceCountByTypeBar from '@/views/staticCharts/DeviceCountByTypeBar'
 
 export default {
   name: 'Dashboard',
   components: {
+    DeviceCountByTypeBar,
     JobByStatus,
     AlarmByDays,
     PanelGroup,
diff --git a/src/views/dataView/components/alarmAnalysis.vue b/src/views/dataView/components/alarmAnalysis.vue
new file mode 100644
index 0000000..ece3c81
--- /dev/null
+++ b/src/views/dataView/components/alarmAnalysis.vue
@@ -0,0 +1,123 @@
+<!--报警分析-->
+<template>
+  <panel-card title="报警分析">
+    <template slot="func">
+      <el-col :span="16">
+        <el-date-picker
+          v-model="timeRange"
+          type="datetimerange"
+          range-separator="至"
+          size="small"
+          value-format="yyyy-MM-dd HH:mm:ss"
+          start-placeholder="开始时间"
+          end-placeholder="结束时间"
+          @change="refresh"
+        />
+      </el-col>
+    </template>
+    <div class="flex-container">
+      <div class="flex-left">
+        <ve-line
+          :data="chartData"
+          :settings="chartSettingsLine"
+        />
+      </div>
+      <div class="flex-right">
+        <el-table border :data="tableList" stripe empty-text="无报警" height="340">
+          <el-table-column prop="name" label="报警类型" align="center" />
+          <el-table-column prop="value" label="报警数量" align="center" />
+        </el-table>
+      </div>
+    </div>
+  </panel-card>
+</template>
+
+<script>
+import { alarmStaticByDay, alarmStaticsByContent } from '@/api/data/dataStatics'
+import PanelCard from '@/components/BigData/Card/panelCard'
+import { getSearchLastWeekTime } from '@/utils/dateutils'
+
+export default {
+  name: 'AlarmAnalysis',
+  components: { PanelCard },
+  data() {
+    return {
+      listQuery: {
+        deviceType: '',
+        beginTime: '',
+        endTime: ''
+      }, // 查询条件
+      timeRange: [], // 时间范围
+      tableList: [], // 列表
+      // 折线图
+      chartSettingsLine: {
+        labelMap: {
+          'date': '日期',
+          'alarmTimes': '报警次数'
+        },
+        dimension: ['date']
+      }, // 配置
+      chartData: {
+        columns: ['date', 'alarmTimes'],
+        rows: []
+      } // 折线图数据
+    }
+  },
+  created() {
+    this.timeRange = getSearchLastWeekTime()
+    this.refresh()
+  },
+  methods: {
+    refresh() {
+      this.handleDateTime()
+      this.fetchAlarmByDay()
+      this.fetchAlarmByContent()
+    },
+    // 获取各类报警的列表
+    fetchAlarmByContent() {
+      alarmStaticsByContent(this.listQuery).then(response => {
+        this.tableList = response.data
+      })
+    },
+    // 获取每日报警数
+    fetchAlarmByDay() {
+      // 模拟数据
+      // this.chartData.rows = [
+      //   { 'date': '9月20日', 'alarmTimes': 153, 'alarmWells': 43 },
+      //   { 'date': '9月21日', 'alarmTimes': 150, 'alarmWells': 30 },
+      //   { 'date': '9月22日', 'alarmTimes': 143, 'alarmWells': 23 },
+      //   { 'date': '9月23日', 'alarmTimes': 173, 'alarmWells': 23 },
+      //   { 'date': '9月24日', 'alarmTimes': 272, 'alarmWells': 52 },
+      //   { 'date': '9月25日', 'alarmTimes': 253, 'alarmWells': 53 }
+      // ]
+      alarmStaticByDay(this.listQuery).then(response => {
+        this.chartData.rows = response.data
+      })
+    },
+    // 处理时间
+    handleDateTime() {
+      if (this.timeRange && this.timeRange.length > 0) {
+        this.listQuery.beginTime = this.timeRange[0]
+        this.listQuery.endTime = this.timeRange[1]
+      } else {
+        this.listQuery.beginTime = ''
+        this.listQuery.endTime = ''
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.flex-container{
+  display: flex;
+  .flex-left{
+    flex:1;
+  }
+  .flex-right{
+    width: 260px;
+    padding: 10px 20px;
+  }
+}
+
+</style>

diff --git a/src/api/alarm/deviceStatics.js b/src/api/alarm/deviceStatics.js
index 7afcd4f..c375ac5 100644
--- a/src/api/alarm/deviceStatics.js
+++ b/src/api/alarm/deviceStatics.js
@@ -3,15 +3,6 @@
  */
 import request from '@/utils/request'
 
-// 报警情况统计
-export function deviceStaticsByDept(params) {
-  return request({
-    url: 'statics/alarmStaticsByStatus',
-    method: 'get',
-    params
-  })
-}
-
 // 报警设备查询
 export function getDeviceAlarmList(params) {
   return request({
diff --git a/src/api/data/dataStatics.js b/src/api/data/dataStatics.js
index bbe9263..56a1ea4 100644
--- a/src/api/data/dataStatics.js
+++ b/src/api/data/dataStatics.js
@@ -143,3 +143,12 @@
     params
   })
 }
+
+// 报警的井排名
+export function alarmWellRank(params) {
+  return request({
+    url: '/statics/alarmWellListPage',
+    method: 'get',
+    params
+  })
+}
diff --git a/src/views/alarmStatics/alarmStatics.vue b/src/views/alarmStatics/alarmStatics.vue
index 22c8798..7c2d2e8 100644
--- a/src/views/alarmStatics/alarmStatics.vue
+++ b/src/views/alarmStatics/alarmStatics.vue
@@ -1,13 +1,23 @@
 <template>
-  <el-row>
+  <el-row :gutter="10">
     <el-col :span="10">
-      <el-card shadow="never">
-        <div />
-        <alarm-statics-by-type />
-      </el-card>
+      <panel-card title="报警总体情况">
+        <el-row :gutter="20" style="padding: 15px 10px">
+          <el-col :span="12">
+            <simple-card title="正在报警" :context="alarmNow" unit="个" />
+          </el-col>
+          <el-col :span="12">
+            <simple-card title="今日报警" :context="todayAlarm" unit="个" />
+          </el-col>
+        </el-row>
+      </panel-card>
+      <!--报警井排名-->
+      <alarm-well-rank style="margin-top:10px" />
+      <!--报警内容统计-->
+      <alarm-statics-by-content style="margin-top:10px" />
     </el-col>
     <el-col :span="14">
-      <alarm-history-by-type />
+      <alarm-analysis />
     </el-col>
     <el-col :span="14">
       <alarm-statics-by-dept />
@@ -16,16 +26,32 @@
 </template>
 
 <script>
-import alarmStaticsByType from './components/alarmStaticsByType'
-import alarmHistoryByType from './components/alarmHistoryByType'
+
 import alarmStaticsByDept from './components/alarmStaticsByDept'
+import AlarmAnalysis from '@/views/dataView/components/alarmAnalysis'
+import PanelCard from '@/components/BigData/Card/panelCard'
+import SimpleCard from '@/components/BigData/Card/simpleCard'
+import { getSearchLastWeekTime } from '@/utils/dateutils'
+import AlarmWellRank from '@/views/dataView/components/alarmWellRank'
+import AlarmStaticsByContent from '@/views/alarmStatics/components/alarmStaticsByContent'
 export default {
-  name: 'DeviceStatics',
+  name: 'AlarmStatics',
   components: {
-    alarmStaticsByType,
-    alarmHistoryByType,
+    AlarmStaticsByContent,
+    AlarmWellRank,
+    SimpleCard,
+    PanelCard,
+    AlarmAnalysis,
     alarmStaticsByDept
+  },
+  data() {
+    return {
+      alarmNow: 0,
+      todayAlarm: 0
+
+    }
   }
+
 }
 </script>
 
diff --git a/src/views/alarmStatics/components/alarmStaticsByContent.vue b/src/views/alarmStatics/components/alarmStaticsByContent.vue
new file mode 100644
index 0000000..b165841
--- /dev/null
+++ b/src/views/alarmStatics/components/alarmStaticsByContent.vue
@@ -0,0 +1,47 @@
+<template>
+  <panel-card title="各类报警统计">
+    <template slot="func">
+      <el-col :span="16">
+        <el-date-picker
+          v-model="timeRange"
+          type="datetimerange"
+          range-separator="至"
+          size="small"
+          value-format="yyyy-MM-dd HH:mm:ss"
+          start-placeholder="开始时间"
+          end-placeholder="结束时间"
+        />
+      </el-col>
+    </template>
+    <alarm-statics-by-type :time-range="timeRange" />
+  </panel-card>
+</template>
+
+<script>
+import PanelCard from '@/components/BigData/Card/panelCard'
+import alarmStaticsByType from '@/views/staticCharts/AlarmStaticsByType'
+import { getSearchLastWeekTime } from '@/utils/dateutils'
+export default {
+  name: 'AlarmStaticsByContent',
+  components: {
+    alarmStaticsByType, PanelCard
+  },
+  data() {
+    return {
+      timeRange: []
+    }
+  },
+  created() {
+    this.timeRange = getSearchLastWeekTime()
+  },
+  methods: {
+    refresh() {
+
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/views/alarmStatics/components/alarmStaticsByType.vue b/src/views/alarmStatics/components/alarmStaticsByType.vue
deleted file mode 100644
index 7e17365..0000000
--- a/src/views/alarmStatics/components/alarmStaticsByType.vue
+++ /dev/null
@@ -1,276 +0,0 @@
-<template>
-  <el-row>
-    <el-col>
-      <el-col>
-        <div class="flagBoxStyle">
-          <div class="flagStyle" />
-          <div>报警总体情况</div>
-        </div>
-      </el-col>
-      <el-col class="cardStyle">
-        <el-col :span="10">
-          <el-card>
-            <div>
-              <span class="ttileStyle">正在报警</span>
-              <span class="countStyle">123</span>
-              <span>个</span>
-            </div>
-          </el-card>
-        </el-col>
-        <el-col :span="10">
-          <el-card>
-            <div>
-              <span class="ttileStyle">今日报警</span>
-              <span class="countStyle">123</span>
-              <span>个</span>
-            </div>
-          </el-card>
-        </el-col>
-      </el-col>
-      <el-col>
-        <el-col :span="8">
-          <div class="flagBoxStyle">
-            <div class="flagStyle" />
-            <div>各类报警统计</div>
-          </div>
-        </el-col>
-        <el-col :span="16">
-          <el-date-picker
-            v-model="timeRange1"
-            type="datetimerange"
-            range-separator="至"
-            size="small"
-            :picker-options="pickerOptions1"
-            value-format="yyyy-MM-dd HH:mm:ss"
-            start-placeholder="开始时间"
-            end-placeholder="结束时间"
-            @change="fetchDeviceTypeBar"
-          />
-        </el-col>
-      </el-col>
-      <el-col>
-        <ve-histogram
-          :data="chartData"
-          :grid="grid"
-          :extend="extend"
-          :settings="chartSettings"
-        />
-      </el-col>
-      <el-col>
-        <el-col :span="8">
-          <div class="flagBoxStyle">
-            <div class="flagStyle" />
-            <div>报警趋势统计</div>
-          </div>
-        </el-col>
-        <el-col :span="16">
-          <el-date-picker
-            v-model="timeRange2"
-            type="datetimerange"
-            range-separator="至"
-            size="small"
-            :picker-options="pickerOptions2"
-            value-format="yyyy-MM-dd HH:mm:ss"
-            start-placeholder="开始时间"
-            end-placeholder="结束时间"
-            @change="fetchDeviceTypeLine"
-          />
-        </el-col>
-      </el-col>
-      <el-col>
-        <ve-line
-          :data="chartDataLine"
-          :settings="chartSettingsLine"
-        />
-      </el-col>
-    </el-col>
-  </el-row>
-</template>
-
-<script>
-import { deviceStaticsByDept } from '@/api/alarm/deviceStatics'
-import { alarmStaticsByContent } from '@/api/alarm/deviceStatics'
-export default {
-  name: 'AlarmStaticsByType',
-  data() {
-    return {
-      // 柱状图搜索条件
-      timeRange1: '',
-      timeRange2: '',
-      listQuery: {
-        startTime: '',
-        endTime: '',
-        alarmType: ''
-      },
-      pickerOptions1: {
-        shortcuts: [{
-          text: '最近一周',
-          onClick(picker) {
-            const end = new Date()
-            const start = new Date()
-            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
-            picker.$emit('pick', [start, end])
-          }
-        }, {
-          text: '最近一个月',
-          onClick(picker) {
-            const end = new Date()
-            const start = new Date()
-            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
-            picker.$emit('pick', [start, end])
-          }
-        }, {
-          text: '最近三个月',
-          onClick(picker) {
-            const end = new Date()
-            const start = new Date()
-            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
-            picker.$emit('pick', [start, end])
-          }
-        }]
-      },
-      // 折线图搜索条件
-      listStatue: {
-        startTime: '',
-        endTime: '',
-        alarmType: ''
-      },
-      pickerOptions2: {
-        shortcuts: [{
-          text: '最近一周',
-          onClick(picker) {
-            const end = new Date()
-            const start = new Date()
-            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
-            picker.$emit('pick', [start, end])
-          }
-        }, {
-          text: '最近一个月',
-          onClick(picker) {
-            const end = new Date()
-            const start = new Date()
-            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
-            picker.$emit('pick', [start, end])
-          }
-        }, {
-          text: '最近三个月',
-          onClick(picker) {
-            const end = new Date()
-            const start = new Date()
-            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
-            picker.$emit('pick', [start, end])
-          }
-        }]
-      },
-      // 折线图
-      chartSettingsLine: {
-        labelMap: {
-          'alarmWellData': '井盖开盖报警',
-          'alarmLiquidData': '液位超限报警',
-          'alarmHarmfulData': '有害气体超标报警'
-        },
-        metrics: ['alarmWellData', 'alarmLiquidData', 'alarmHarmfulData'],
-        dimension: ['date']
-      },
-      chartDataLine: {
-        columns: ['date', 'alarmWellData', 'alarmLiquidData', 'alarmHarmfulData'],
-        rows: []
-      },
-      // 柱状图
-      extend: {
-        xAxis: {
-          axisLabel: {
-            rotate: 30,
-            margin: 30,
-            textStyle: {
-              align: 'center'
-            }
-          }
-        },
-        series: {
-          label: { show: true, position: 'top' },
-          barMaxWidth: 35 // 最大柱宽度
-        }
-      },
-      grid: {
-        right: 60
-      },
-      chartSettings: {
-        itemStyle: {
-          'barCategoryGap': 5
-        },
-        barWidth: 15,
-        labelMap: {
-          'alarmContent': '报警内容',
-          'totalAlarm': '报警数量',
-          'cancelAlarm': '消警数量'
-        },
-        dimension: ['alarmContent'],
-        metrics: ['totalAlarm', 'cancelAlarm']
-      },
-      chartData: {
-        columns: ['alarmContent', 'totalAlarm', 'cancelAlarm'],
-        rows: []
-      }
-    }
-  },
-  created() {
-    this.fetchDeviceTypeBar()
-    this.fetchDeviceTypeLine()
-  },
-  methods: {
-    fetchDeviceTypeBar(val) {
-      if (val !== undefined) {
-        this.listQuery.startTime = val[0]
-        this.listQuery.endTime = val[1]
-      }
-      deviceStaticsByDept(this.listQuery).then(response => {
-        this.chartData.rows = response.data
-      })
-    },
-    fetchDeviceTypeLine(val) {
-      if (val !== undefined) {
-        this.listQuery.startTime = val[0]
-        this.listQuery.endTime = val[1]
-      }
-      alarmStaticsByContent(this.listStatue).then(response => {
-        console.log(response.data, '===123')
-        this.chartDataLine.rows = response.data
-      })
-    }
-  }
-}
-</script>
-
-<style rel="stylesheet/scss" lang="scss" scoped>
-.flagBoxStyle {
-  display: flex;
-  margin-bottom: 20px;
-}
-.flagBoxStyle div:nth-child(2){
-  line-height: 30px;
-  font-weight: 600;
-}
-.flagStyle {
-  width: 4px;
-  height: 30px;
-  margin-right: 6px;
-  background: rgb(64 121 242);
-}
-.cardStyle {
-  display:flex;
-  margin-bottom: 60px;
-  justify-content: space-around;
-}
-.ttileStyle {
-  font-size: 12px;
-}
-.countStyle {
-  font-size: 20px;
-  margin: 0 10px;
-}
-.el-date-editor--datetimerange.el-input,
-.el-date-editor--datetimerange.el-input__inner{
-  width: 340px;
-}
-</style>
diff --git a/src/views/dashboard/components/AlarmByDays.vue b/src/views/dashboard/components/AlarmByDays.vue
index 6b839d3..bd8228e 100644
--- a/src/views/dashboard/components/AlarmByDays.vue
+++ b/src/views/dashboard/components/AlarmByDays.vue
@@ -1,5 +1,5 @@
 <template>
-  <ve-line :data="chartData" :title="title" :settings="chartSettings" />
+  <ve-line :data="chartData" :title="title" :extend="extend" :settings="chartSettings" />
 </template>
 
 <script>
@@ -9,27 +9,33 @@
 export default {
   name: 'AlarmByDays',
   data() {
-    this.title = {
-      text: '7日报警趋势'
-    }
-    this.chartSettings = {
-      labelMap: {
-        'alarmWells': '报警井数',
-        'alarmTimes': '报警次数'
-      },
-      metrics: ['alarmTimes', 'alarmWells'],
-      dimension: ['date']
-    }
     return {
+      title: {
+        text: '7日报警趋势'
+      },
+      chartSettings: {
+        labelMap: {
+          'alarmWells': '报警井数',
+          'alarmTimes': '报警次数'
+        },
+        metrics: ['alarmTimes', 'alarmWells'],
+        dimension: ['date']
+      },
+      extend: {
+        yAxis: {
+          type: 'value',
+          minInterval: 1
+        }
+      },
       listQuery: {
         deviceType: '',
         beginTime: '',
         endTime: ''
-      },
+      }, // 查询条件
       chartData: {
         columns: ['date', 'alarmTimes', 'alarmWells'],
         rows: []
-      }
+      } // 数据
     }
   },
   mounted() {
@@ -52,6 +58,14 @@
       this.listQuery.endTime = endTime
       alarmStaticByDay(this.listQuery).then(response => {
         this.chartData.rows = response.data
+        const maxValue = Math.max.apply(Math, response.data.map(function(item) {
+          return parseInt(item.alarmTimes)
+        }))
+        if (maxValue < 10) {
+          this.extend.yAxis = { type: 'value', minInterval: 1, max: 10 }
+        } else {
+          this.extend.yAxis = { type: 'value', minInterval: 1 }
+        }
       })
     }
   }
diff --git a/src/views/dashboard/components/JobByStatus.vue b/src/views/dashboard/components/JobByStatus.vue
index 7502e17..66feacc 100644
--- a/src/views/dashboard/components/JobByStatus.vue
+++ b/src/views/dashboard/components/JobByStatus.vue
@@ -1,5 +1,5 @@
 <template>
-  <ve-bar :data="chartData" :title="title" :settings="chartSettings" />
+  <ve-bar :data="chartData" :title="title" :extend="extend" :settings="chartSettings" />
 </template>
 
 <script>
@@ -9,22 +9,31 @@
 export default {
   name: 'JobByStatus',
   data() {
-    this.title = {
-      text: '30日工单数量统计'
-    }
-    this.chartSettings = {
-      labelMap: {
-        'deptName': '权属单位',
-        'beforeGet': '待处理',
-        'beforeConfirm': '待确认',
-        'inHandle': '处理中',
-        'over': '已完成'
-      },
-      stack: {
-        'xxx': ['beforeGet', 'beforeConfirm', 'inHandle', 'over']
-      }
-    }
     return {
+      title: {
+        text: '30日工单数量统计'
+      },
+      chartSettings: {
+        labelMap: {
+          'deptName': '权属单位',
+          'beforeGet': '待处理',
+          'beforeConfirm': '待确认',
+          'inHandle': '处理中',
+          'over': '已完成'
+        },
+        stack: {
+          'xxx': ['beforeGet', 'beforeConfirm', 'inHandle', 'over']
+        }
+      },
+      extend: {
+        xAxis: {
+          type: 'value',
+          minInterval: 1
+        },
+        series: {
+          barMaxWidth: 35
+        }
+      },
       chartData: {
         columns: ['deptName', 'beforeGet', 'beforeConfirm', 'inHandle', 'over'],
         rows: []
@@ -54,6 +63,14 @@
       }
       jobStaticsByDept(listQuery).then(response => {
         this.chartData.rows = response.data
+        const maxValue = Math.max.apply(Math, response.data.map(function(item) {
+          return parseInt(item.beforeGet) + parseInt(item.beforeConfirm) + parseInt(item.inHandle) + parseInt(item.over)
+        }))
+        if (maxValue < 10) {
+          this.extend.xAxis = { type: 'value', minInterval: 1, max: 10 }
+        } else {
+          this.extend.xAxis = { type: 'value', minInterval: 1 }
+        }
       })
     }
   }
diff --git a/src/views/dashboard/index.vue b/src/views/dashboard/index.vue
index 7f228d3..f96a2a2 100644
--- a/src/views/dashboard/index.vue
+++ b/src/views/dashboard/index.vue
@@ -17,7 +17,7 @@
       <!--设备数量统计-->
       <el-col v-if="hasPerm('/statics/deviceStaticsByType')" :span="14">
         <el-card shadow="never">
-          <device-count />
+          <device-count-by-type-bar chart-title="设备数量统计" />
         </el-card>
       </el-col>
       <!--设备在线情况统计-->
@@ -51,10 +51,12 @@
 import DeviceCountByOnline from './components/DeviceCountByOnline'
 import AlarmByDays from './components/AlarmByDays'
 import JobByStatus from './components/JobByStatus'
+import DeviceCountByTypeBar from '@/views/staticCharts/DeviceCountByTypeBar'
 
 export default {
   name: 'Dashboard',
   components: {
+    DeviceCountByTypeBar,
     JobByStatus,
     AlarmByDays,
     PanelGroup,
diff --git a/src/views/dataView/components/alarmAnalysis.vue b/src/views/dataView/components/alarmAnalysis.vue
new file mode 100644
index 0000000..ece3c81
--- /dev/null
+++ b/src/views/dataView/components/alarmAnalysis.vue
@@ -0,0 +1,123 @@
+<!--报警分析-->
+<template>
+  <panel-card title="报警分析">
+    <template slot="func">
+      <el-col :span="16">
+        <el-date-picker
+          v-model="timeRange"
+          type="datetimerange"
+          range-separator="至"
+          size="small"
+          value-format="yyyy-MM-dd HH:mm:ss"
+          start-placeholder="开始时间"
+          end-placeholder="结束时间"
+          @change="refresh"
+        />
+      </el-col>
+    </template>
+    <div class="flex-container">
+      <div class="flex-left">
+        <ve-line
+          :data="chartData"
+          :settings="chartSettingsLine"
+        />
+      </div>
+      <div class="flex-right">
+        <el-table border :data="tableList" stripe empty-text="无报警" height="340">
+          <el-table-column prop="name" label="报警类型" align="center" />
+          <el-table-column prop="value" label="报警数量" align="center" />
+        </el-table>
+      </div>
+    </div>
+  </panel-card>
+</template>
+
+<script>
+import { alarmStaticByDay, alarmStaticsByContent } from '@/api/data/dataStatics'
+import PanelCard from '@/components/BigData/Card/panelCard'
+import { getSearchLastWeekTime } from '@/utils/dateutils'
+
+export default {
+  name: 'AlarmAnalysis',
+  components: { PanelCard },
+  data() {
+    return {
+      listQuery: {
+        deviceType: '',
+        beginTime: '',
+        endTime: ''
+      }, // 查询条件
+      timeRange: [], // 时间范围
+      tableList: [], // 列表
+      // 折线图
+      chartSettingsLine: {
+        labelMap: {
+          'date': '日期',
+          'alarmTimes': '报警次数'
+        },
+        dimension: ['date']
+      }, // 配置
+      chartData: {
+        columns: ['date', 'alarmTimes'],
+        rows: []
+      } // 折线图数据
+    }
+  },
+  created() {
+    this.timeRange = getSearchLastWeekTime()
+    this.refresh()
+  },
+  methods: {
+    refresh() {
+      this.handleDateTime()
+      this.fetchAlarmByDay()
+      this.fetchAlarmByContent()
+    },
+    // 获取各类报警的列表
+    fetchAlarmByContent() {
+      alarmStaticsByContent(this.listQuery).then(response => {
+        this.tableList = response.data
+      })
+    },
+    // 获取每日报警数
+    fetchAlarmByDay() {
+      // 模拟数据
+      // this.chartData.rows = [
+      //   { 'date': '9月20日', 'alarmTimes': 153, 'alarmWells': 43 },
+      //   { 'date': '9月21日', 'alarmTimes': 150, 'alarmWells': 30 },
+      //   { 'date': '9月22日', 'alarmTimes': 143, 'alarmWells': 23 },
+      //   { 'date': '9月23日', 'alarmTimes': 173, 'alarmWells': 23 },
+      //   { 'date': '9月24日', 'alarmTimes': 272, 'alarmWells': 52 },
+      //   { 'date': '9月25日', 'alarmTimes': 253, 'alarmWells': 53 }
+      // ]
+      alarmStaticByDay(this.listQuery).then(response => {
+        this.chartData.rows = response.data
+      })
+    },
+    // 处理时间
+    handleDateTime() {
+      if (this.timeRange && this.timeRange.length > 0) {
+        this.listQuery.beginTime = this.timeRange[0]
+        this.listQuery.endTime = this.timeRange[1]
+      } else {
+        this.listQuery.beginTime = ''
+        this.listQuery.endTime = ''
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.flex-container{
+  display: flex;
+  .flex-left{
+    flex:1;
+  }
+  .flex-right{
+    width: 260px;
+    padding: 10px 20px;
+  }
+}
+
+</style>
diff --git a/src/views/dataView/components/alarmView.vue b/src/views/dataView/components/alarmView.vue
deleted file mode 100644
index e13f811..0000000
--- a/src/views/dataView/components/alarmView.vue
+++ /dev/null
@@ -1,124 +0,0 @@
-<!--报警分析-->
-<template>
-  <panel-card title="报警分析">
-    <template slot="func">
-      <el-col :span="16">
-        <el-date-picker
-          v-model="timeRange"
-          type="datetimerange"
-          range-separator="至"
-          size="small"
-          :picker-options="pickerOptions"
-          value-format="yyyy-MM-dd HH:mm:ss"
-          start-placeholder="开始时间"
-          end-placeholder="结束时间"
-          @change="refresh"
-        />
-      </el-col>
-    </template>
-    <div class="flex-container">
-      <div class="flex-left">
-        <ve-line
-          :data="chartData"
-          :settings="chartSettingsLine"
-        />
-      </div>
-      <div class="flex-right">
-        <el-table border :data="tableList" stripe empty-text="无报警" height="340">
-          <el-table-column prop="name" label="报警类型" align="center" />
-          <el-table-column prop="value" label="报警数量" align="center" />
-        </el-table>
-      </div>
-    </div>
-  </panel-card>
-</template>
-
-<script>
-import { alarmStaticByDay, alarmStaticsByContent } from '@/api/data/dataStatics'
-import PanelCard from '@/components/BigData/Card/panelCard'
-import { getSearchLastWeekTime } from '@/utils/dateutils'
-
-export default {
-  name: 'AlarmStaticsByType',
-  components: { PanelCard },
-  data() {
-    return {
-      listQuery: {
-        deviceType: '',
-        beginTime: '',
-        endTime: ''
-      }, // 查询条件
-      timeRange: [], // 时间范围
-      tableList: [], // 列表
-      // 折线图
-      chartSettingsLine: {
-        labelMap: {
-          'date': '日期',
-          'alarmTimes': '报警次数'
-        },
-        dimension: ['date']
-      }, // 配置
-      chartData: {
-        columns: ['date', 'alarmTimes'],
-        rows: []
-      } // 折线图数据
-    }
-  },
-  created() {
-    this.timeRange = getSearchLastWeekTime()
-    this.refresh()
-  },
-  methods: {
-    refresh() {
-      this.handleDateTime()
-      this.fetchAlarmByDay()
-      this.fetchAlarmByContent()
-    },
-    // 获取各类报警的列表
-    fetchAlarmByContent() {
-      alarmStaticsByContent(this.listQuery).then(response => {
-        this.tableList = response.data
-      })
-    },
-    // 获取每日报警数
-    fetchAlarmByDay() {
-      // 模拟数据
-      // this.chartData.rows = [
-      //   { 'date': '9月20日', 'alarmTimes': 153, 'alarmWells': 43 },
-      //   { 'date': '9月21日', 'alarmTimes': 150, 'alarmWells': 30 },
-      //   { 'date': '9月22日', 'alarmTimes': 143, 'alarmWells': 23 },
-      //   { 'date': '9月23日', 'alarmTimes': 173, 'alarmWells': 23 },
-      //   { 'date': '9月24日', 'alarmTimes': 272, 'alarmWells': 52 },
-      //   { 'date': '9月25日', 'alarmTimes': 253, 'alarmWells': 53 }
-      // ]
-      alarmStaticByDay(this.listQuery).then(response => {
-        this.chartData.rows = response.data
-      })
-    },
-    // 处理时间
-    handleDateTime() {
-      if (this.timeRange && this.timeRange.length > 0) {
-        this.listQuery.beginTime = this.timeRange[0]
-        this.listQuery.endTime = this.timeRange[1]
-      } else {
-        this.listQuery.beginTime = ''
-        this.listQuery.endTime = ''
-      }
-    }
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-.flex-container{
-  display: flex;
-  .flex-left{
-    flex:1;
-  }
-  .flex-right{
-    width: 260px;
-    padding: 10px 20px;
-  }
-}
-
-</style>

diff --git a/src/api/alarm/deviceStatics.js b/src/api/alarm/deviceStatics.js
index 7afcd4f..c375ac5 100644
--- a/src/api/alarm/deviceStatics.js
+++ b/src/api/alarm/deviceStatics.js
@@ -3,15 +3,6 @@
  */
 import request from '@/utils/request'
 
-// 报警情况统计
-export function deviceStaticsByDept(params) {
-  return request({
-    url: 'statics/alarmStaticsByStatus',
-    method: 'get',
-    params
-  })
-}
-
 // 报警设备查询
 export function getDeviceAlarmList(params) {
   return request({
diff --git a/src/api/data/dataStatics.js b/src/api/data/dataStatics.js
index bbe9263..56a1ea4 100644
--- a/src/api/data/dataStatics.js
+++ b/src/api/data/dataStatics.js
@@ -143,3 +143,12 @@
     params
   })
 }
+
+// 报警的井排名
+export function alarmWellRank(params) {
+  return request({
+    url: '/statics/alarmWellListPage',
+    method: 'get',
+    params
+  })
+}
diff --git a/src/views/alarmStatics/alarmStatics.vue b/src/views/alarmStatics/alarmStatics.vue
index 22c8798..7c2d2e8 100644
--- a/src/views/alarmStatics/alarmStatics.vue
+++ b/src/views/alarmStatics/alarmStatics.vue
@@ -1,13 +1,23 @@
 <template>
-  <el-row>
+  <el-row :gutter="10">
     <el-col :span="10">
-      <el-card shadow="never">
-        <div />
-        <alarm-statics-by-type />
-      </el-card>
+      <panel-card title="报警总体情况">
+        <el-row :gutter="20" style="padding: 15px 10px">
+          <el-col :span="12">
+            <simple-card title="正在报警" :context="alarmNow" unit="个" />
+          </el-col>
+          <el-col :span="12">
+            <simple-card title="今日报警" :context="todayAlarm" unit="个" />
+          </el-col>
+        </el-row>
+      </panel-card>
+      <!--报警井排名-->
+      <alarm-well-rank style="margin-top:10px" />
+      <!--报警内容统计-->
+      <alarm-statics-by-content style="margin-top:10px" />
     </el-col>
     <el-col :span="14">
-      <alarm-history-by-type />
+      <alarm-analysis />
     </el-col>
     <el-col :span="14">
       <alarm-statics-by-dept />
@@ -16,16 +26,32 @@
 </template>
 
 <script>
-import alarmStaticsByType from './components/alarmStaticsByType'
-import alarmHistoryByType from './components/alarmHistoryByType'
+
 import alarmStaticsByDept from './components/alarmStaticsByDept'
+import AlarmAnalysis from '@/views/dataView/components/alarmAnalysis'
+import PanelCard from '@/components/BigData/Card/panelCard'
+import SimpleCard from '@/components/BigData/Card/simpleCard'
+import { getSearchLastWeekTime } from '@/utils/dateutils'
+import AlarmWellRank from '@/views/dataView/components/alarmWellRank'
+import AlarmStaticsByContent from '@/views/alarmStatics/components/alarmStaticsByContent'
 export default {
-  name: 'DeviceStatics',
+  name: 'AlarmStatics',
   components: {
-    alarmStaticsByType,
-    alarmHistoryByType,
+    AlarmStaticsByContent,
+    AlarmWellRank,
+    SimpleCard,
+    PanelCard,
+    AlarmAnalysis,
     alarmStaticsByDept
+  },
+  data() {
+    return {
+      alarmNow: 0,
+      todayAlarm: 0
+
+    }
   }
+
 }
 </script>
 
diff --git a/src/views/alarmStatics/components/alarmStaticsByContent.vue b/src/views/alarmStatics/components/alarmStaticsByContent.vue
new file mode 100644
index 0000000..b165841
--- /dev/null
+++ b/src/views/alarmStatics/components/alarmStaticsByContent.vue
@@ -0,0 +1,47 @@
+<template>
+  <panel-card title="各类报警统计">
+    <template slot="func">
+      <el-col :span="16">
+        <el-date-picker
+          v-model="timeRange"
+          type="datetimerange"
+          range-separator="至"
+          size="small"
+          value-format="yyyy-MM-dd HH:mm:ss"
+          start-placeholder="开始时间"
+          end-placeholder="结束时间"
+        />
+      </el-col>
+    </template>
+    <alarm-statics-by-type :time-range="timeRange" />
+  </panel-card>
+</template>
+
+<script>
+import PanelCard from '@/components/BigData/Card/panelCard'
+import alarmStaticsByType from '@/views/staticCharts/AlarmStaticsByType'
+import { getSearchLastWeekTime } from '@/utils/dateutils'
+export default {
+  name: 'AlarmStaticsByContent',
+  components: {
+    alarmStaticsByType, PanelCard
+  },
+  data() {
+    return {
+      timeRange: []
+    }
+  },
+  created() {
+    this.timeRange = getSearchLastWeekTime()
+  },
+  methods: {
+    refresh() {
+
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/views/alarmStatics/components/alarmStaticsByType.vue b/src/views/alarmStatics/components/alarmStaticsByType.vue
deleted file mode 100644
index 7e17365..0000000
--- a/src/views/alarmStatics/components/alarmStaticsByType.vue
+++ /dev/null
@@ -1,276 +0,0 @@
-<template>
-  <el-row>
-    <el-col>
-      <el-col>
-        <div class="flagBoxStyle">
-          <div class="flagStyle" />
-          <div>报警总体情况</div>
-        </div>
-      </el-col>
-      <el-col class="cardStyle">
-        <el-col :span="10">
-          <el-card>
-            <div>
-              <span class="ttileStyle">正在报警</span>
-              <span class="countStyle">123</span>
-              <span>个</span>
-            </div>
-          </el-card>
-        </el-col>
-        <el-col :span="10">
-          <el-card>
-            <div>
-              <span class="ttileStyle">今日报警</span>
-              <span class="countStyle">123</span>
-              <span>个</span>
-            </div>
-          </el-card>
-        </el-col>
-      </el-col>
-      <el-col>
-        <el-col :span="8">
-          <div class="flagBoxStyle">
-            <div class="flagStyle" />
-            <div>各类报警统计</div>
-          </div>
-        </el-col>
-        <el-col :span="16">
-          <el-date-picker
-            v-model="timeRange1"
-            type="datetimerange"
-            range-separator="至"
-            size="small"
-            :picker-options="pickerOptions1"
-            value-format="yyyy-MM-dd HH:mm:ss"
-            start-placeholder="开始时间"
-            end-placeholder="结束时间"
-            @change="fetchDeviceTypeBar"
-          />
-        </el-col>
-      </el-col>
-      <el-col>
-        <ve-histogram
-          :data="chartData"
-          :grid="grid"
-          :extend="extend"
-          :settings="chartSettings"
-        />
-      </el-col>
-      <el-col>
-        <el-col :span="8">
-          <div class="flagBoxStyle">
-            <div class="flagStyle" />
-            <div>报警趋势统计</div>
-          </div>
-        </el-col>
-        <el-col :span="16">
-          <el-date-picker
-            v-model="timeRange2"
-            type="datetimerange"
-            range-separator="至"
-            size="small"
-            :picker-options="pickerOptions2"
-            value-format="yyyy-MM-dd HH:mm:ss"
-            start-placeholder="开始时间"
-            end-placeholder="结束时间"
-            @change="fetchDeviceTypeLine"
-          />
-        </el-col>
-      </el-col>
-      <el-col>
-        <ve-line
-          :data="chartDataLine"
-          :settings="chartSettingsLine"
-        />
-      </el-col>
-    </el-col>
-  </el-row>
-</template>
-
-<script>
-import { deviceStaticsByDept } from '@/api/alarm/deviceStatics'
-import { alarmStaticsByContent } from '@/api/alarm/deviceStatics'
-export default {
-  name: 'AlarmStaticsByType',
-  data() {
-    return {
-      // 柱状图搜索条件
-      timeRange1: '',
-      timeRange2: '',
-      listQuery: {
-        startTime: '',
-        endTime: '',
-        alarmType: ''
-      },
-      pickerOptions1: {
-        shortcuts: [{
-          text: '最近一周',
-          onClick(picker) {
-            const end = new Date()
-            const start = new Date()
-            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
-            picker.$emit('pick', [start, end])
-          }
-        }, {
-          text: '最近一个月',
-          onClick(picker) {
-            const end = new Date()
-            const start = new Date()
-            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
-            picker.$emit('pick', [start, end])
-          }
-        }, {
-          text: '最近三个月',
-          onClick(picker) {
-            const end = new Date()
-            const start = new Date()
-            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
-            picker.$emit('pick', [start, end])
-          }
-        }]
-      },
-      // 折线图搜索条件
-      listStatue: {
-        startTime: '',
-        endTime: '',
-        alarmType: ''
-      },
-      pickerOptions2: {
-        shortcuts: [{
-          text: '最近一周',
-          onClick(picker) {
-            const end = new Date()
-            const start = new Date()
-            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
-            picker.$emit('pick', [start, end])
-          }
-        }, {
-          text: '最近一个月',
-          onClick(picker) {
-            const end = new Date()
-            const start = new Date()
-            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
-            picker.$emit('pick', [start, end])
-          }
-        }, {
-          text: '最近三个月',
-          onClick(picker) {
-            const end = new Date()
-            const start = new Date()
-            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
-            picker.$emit('pick', [start, end])
-          }
-        }]
-      },
-      // 折线图
-      chartSettingsLine: {
-        labelMap: {
-          'alarmWellData': '井盖开盖报警',
-          'alarmLiquidData': '液位超限报警',
-          'alarmHarmfulData': '有害气体超标报警'
-        },
-        metrics: ['alarmWellData', 'alarmLiquidData', 'alarmHarmfulData'],
-        dimension: ['date']
-      },
-      chartDataLine: {
-        columns: ['date', 'alarmWellData', 'alarmLiquidData', 'alarmHarmfulData'],
-        rows: []
-      },
-      // 柱状图
-      extend: {
-        xAxis: {
-          axisLabel: {
-            rotate: 30,
-            margin: 30,
-            textStyle: {
-              align: 'center'
-            }
-          }
-        },
-        series: {
-          label: { show: true, position: 'top' },
-          barMaxWidth: 35 // 最大柱宽度
-        }
-      },
-      grid: {
-        right: 60
-      },
-      chartSettings: {
-        itemStyle: {
-          'barCategoryGap': 5
-        },
-        barWidth: 15,
-        labelMap: {
-          'alarmContent': '报警内容',
-          'totalAlarm': '报警数量',
-          'cancelAlarm': '消警数量'
-        },
-        dimension: ['alarmContent'],
-        metrics: ['totalAlarm', 'cancelAlarm']
-      },
-      chartData: {
-        columns: ['alarmContent', 'totalAlarm', 'cancelAlarm'],
-        rows: []
-      }
-    }
-  },
-  created() {
-    this.fetchDeviceTypeBar()
-    this.fetchDeviceTypeLine()
-  },
-  methods: {
-    fetchDeviceTypeBar(val) {
-      if (val !== undefined) {
-        this.listQuery.startTime = val[0]
-        this.listQuery.endTime = val[1]
-      }
-      deviceStaticsByDept(this.listQuery).then(response => {
-        this.chartData.rows = response.data
-      })
-    },
-    fetchDeviceTypeLine(val) {
-      if (val !== undefined) {
-        this.listQuery.startTime = val[0]
-        this.listQuery.endTime = val[1]
-      }
-      alarmStaticsByContent(this.listStatue).then(response => {
-        console.log(response.data, '===123')
-        this.chartDataLine.rows = response.data
-      })
-    }
-  }
-}
-</script>
-
-<style rel="stylesheet/scss" lang="scss" scoped>
-.flagBoxStyle {
-  display: flex;
-  margin-bottom: 20px;
-}
-.flagBoxStyle div:nth-child(2){
-  line-height: 30px;
-  font-weight: 600;
-}
-.flagStyle {
-  width: 4px;
-  height: 30px;
-  margin-right: 6px;
-  background: rgb(64 121 242);
-}
-.cardStyle {
-  display:flex;
-  margin-bottom: 60px;
-  justify-content: space-around;
-}
-.ttileStyle {
-  font-size: 12px;
-}
-.countStyle {
-  font-size: 20px;
-  margin: 0 10px;
-}
-.el-date-editor--datetimerange.el-input,
-.el-date-editor--datetimerange.el-input__inner{
-  width: 340px;
-}
-</style>
diff --git a/src/views/dashboard/components/AlarmByDays.vue b/src/views/dashboard/components/AlarmByDays.vue
index 6b839d3..bd8228e 100644
--- a/src/views/dashboard/components/AlarmByDays.vue
+++ b/src/views/dashboard/components/AlarmByDays.vue
@@ -1,5 +1,5 @@
 <template>
-  <ve-line :data="chartData" :title="title" :settings="chartSettings" />
+  <ve-line :data="chartData" :title="title" :extend="extend" :settings="chartSettings" />
 </template>
 
 <script>
@@ -9,27 +9,33 @@
 export default {
   name: 'AlarmByDays',
   data() {
-    this.title = {
-      text: '7日报警趋势'
-    }
-    this.chartSettings = {
-      labelMap: {
-        'alarmWells': '报警井数',
-        'alarmTimes': '报警次数'
-      },
-      metrics: ['alarmTimes', 'alarmWells'],
-      dimension: ['date']
-    }
     return {
+      title: {
+        text: '7日报警趋势'
+      },
+      chartSettings: {
+        labelMap: {
+          'alarmWells': '报警井数',
+          'alarmTimes': '报警次数'
+        },
+        metrics: ['alarmTimes', 'alarmWells'],
+        dimension: ['date']
+      },
+      extend: {
+        yAxis: {
+          type: 'value',
+          minInterval: 1
+        }
+      },
       listQuery: {
         deviceType: '',
         beginTime: '',
         endTime: ''
-      },
+      }, // 查询条件
       chartData: {
         columns: ['date', 'alarmTimes', 'alarmWells'],
         rows: []
-      }
+      } // 数据
     }
   },
   mounted() {
@@ -52,6 +58,14 @@
       this.listQuery.endTime = endTime
       alarmStaticByDay(this.listQuery).then(response => {
         this.chartData.rows = response.data
+        const maxValue = Math.max.apply(Math, response.data.map(function(item) {
+          return parseInt(item.alarmTimes)
+        }))
+        if (maxValue < 10) {
+          this.extend.yAxis = { type: 'value', minInterval: 1, max: 10 }
+        } else {
+          this.extend.yAxis = { type: 'value', minInterval: 1 }
+        }
       })
     }
   }
diff --git a/src/views/dashboard/components/JobByStatus.vue b/src/views/dashboard/components/JobByStatus.vue
index 7502e17..66feacc 100644
--- a/src/views/dashboard/components/JobByStatus.vue
+++ b/src/views/dashboard/components/JobByStatus.vue
@@ -1,5 +1,5 @@
 <template>
-  <ve-bar :data="chartData" :title="title" :settings="chartSettings" />
+  <ve-bar :data="chartData" :title="title" :extend="extend" :settings="chartSettings" />
 </template>
 
 <script>
@@ -9,22 +9,31 @@
 export default {
   name: 'JobByStatus',
   data() {
-    this.title = {
-      text: '30日工单数量统计'
-    }
-    this.chartSettings = {
-      labelMap: {
-        'deptName': '权属单位',
-        'beforeGet': '待处理',
-        'beforeConfirm': '待确认',
-        'inHandle': '处理中',
-        'over': '已完成'
-      },
-      stack: {
-        'xxx': ['beforeGet', 'beforeConfirm', 'inHandle', 'over']
-      }
-    }
     return {
+      title: {
+        text: '30日工单数量统计'
+      },
+      chartSettings: {
+        labelMap: {
+          'deptName': '权属单位',
+          'beforeGet': '待处理',
+          'beforeConfirm': '待确认',
+          'inHandle': '处理中',
+          'over': '已完成'
+        },
+        stack: {
+          'xxx': ['beforeGet', 'beforeConfirm', 'inHandle', 'over']
+        }
+      },
+      extend: {
+        xAxis: {
+          type: 'value',
+          minInterval: 1
+        },
+        series: {
+          barMaxWidth: 35
+        }
+      },
       chartData: {
         columns: ['deptName', 'beforeGet', 'beforeConfirm', 'inHandle', 'over'],
         rows: []
@@ -54,6 +63,14 @@
       }
       jobStaticsByDept(listQuery).then(response => {
         this.chartData.rows = response.data
+        const maxValue = Math.max.apply(Math, response.data.map(function(item) {
+          return parseInt(item.beforeGet) + parseInt(item.beforeConfirm) + parseInt(item.inHandle) + parseInt(item.over)
+        }))
+        if (maxValue < 10) {
+          this.extend.xAxis = { type: 'value', minInterval: 1, max: 10 }
+        } else {
+          this.extend.xAxis = { type: 'value', minInterval: 1 }
+        }
       })
     }
   }
diff --git a/src/views/dashboard/index.vue b/src/views/dashboard/index.vue
index 7f228d3..f96a2a2 100644
--- a/src/views/dashboard/index.vue
+++ b/src/views/dashboard/index.vue
@@ -17,7 +17,7 @@
       <!--设备数量统计-->
       <el-col v-if="hasPerm('/statics/deviceStaticsByType')" :span="14">
         <el-card shadow="never">
-          <device-count />
+          <device-count-by-type-bar chart-title="设备数量统计" />
         </el-card>
       </el-col>
       <!--设备在线情况统计-->
@@ -51,10 +51,12 @@
 import DeviceCountByOnline from './components/DeviceCountByOnline'
 import AlarmByDays from './components/AlarmByDays'
 import JobByStatus from './components/JobByStatus'
+import DeviceCountByTypeBar from '@/views/staticCharts/DeviceCountByTypeBar'
 
 export default {
   name: 'Dashboard',
   components: {
+    DeviceCountByTypeBar,
     JobByStatus,
     AlarmByDays,
     PanelGroup,
diff --git a/src/views/dataView/components/alarmAnalysis.vue b/src/views/dataView/components/alarmAnalysis.vue
new file mode 100644
index 0000000..ece3c81
--- /dev/null
+++ b/src/views/dataView/components/alarmAnalysis.vue
@@ -0,0 +1,123 @@
+<!--报警分析-->
+<template>
+  <panel-card title="报警分析">
+    <template slot="func">
+      <el-col :span="16">
+        <el-date-picker
+          v-model="timeRange"
+          type="datetimerange"
+          range-separator="至"
+          size="small"
+          value-format="yyyy-MM-dd HH:mm:ss"
+          start-placeholder="开始时间"
+          end-placeholder="结束时间"
+          @change="refresh"
+        />
+      </el-col>
+    </template>
+    <div class="flex-container">
+      <div class="flex-left">
+        <ve-line
+          :data="chartData"
+          :settings="chartSettingsLine"
+        />
+      </div>
+      <div class="flex-right">
+        <el-table border :data="tableList" stripe empty-text="无报警" height="340">
+          <el-table-column prop="name" label="报警类型" align="center" />
+          <el-table-column prop="value" label="报警数量" align="center" />
+        </el-table>
+      </div>
+    </div>
+  </panel-card>
+</template>
+
+<script>
+import { alarmStaticByDay, alarmStaticsByContent } from '@/api/data/dataStatics'
+import PanelCard from '@/components/BigData/Card/panelCard'
+import { getSearchLastWeekTime } from '@/utils/dateutils'
+
+export default {
+  name: 'AlarmAnalysis',
+  components: { PanelCard },
+  data() {
+    return {
+      listQuery: {
+        deviceType: '',
+        beginTime: '',
+        endTime: ''
+      }, // 查询条件
+      timeRange: [], // 时间范围
+      tableList: [], // 列表
+      // 折线图
+      chartSettingsLine: {
+        labelMap: {
+          'date': '日期',
+          'alarmTimes': '报警次数'
+        },
+        dimension: ['date']
+      }, // 配置
+      chartData: {
+        columns: ['date', 'alarmTimes'],
+        rows: []
+      } // 折线图数据
+    }
+  },
+  created() {
+    this.timeRange = getSearchLastWeekTime()
+    this.refresh()
+  },
+  methods: {
+    refresh() {
+      this.handleDateTime()
+      this.fetchAlarmByDay()
+      this.fetchAlarmByContent()
+    },
+    // 获取各类报警的列表
+    fetchAlarmByContent() {
+      alarmStaticsByContent(this.listQuery).then(response => {
+        this.tableList = response.data
+      })
+    },
+    // 获取每日报警数
+    fetchAlarmByDay() {
+      // 模拟数据
+      // this.chartData.rows = [
+      //   { 'date': '9月20日', 'alarmTimes': 153, 'alarmWells': 43 },
+      //   { 'date': '9月21日', 'alarmTimes': 150, 'alarmWells': 30 },
+      //   { 'date': '9月22日', 'alarmTimes': 143, 'alarmWells': 23 },
+      //   { 'date': '9月23日', 'alarmTimes': 173, 'alarmWells': 23 },
+      //   { 'date': '9月24日', 'alarmTimes': 272, 'alarmWells': 52 },
+      //   { 'date': '9月25日', 'alarmTimes': 253, 'alarmWells': 53 }
+      // ]
+      alarmStaticByDay(this.listQuery).then(response => {
+        this.chartData.rows = response.data
+      })
+    },
+    // 处理时间
+    handleDateTime() {
+      if (this.timeRange && this.timeRange.length > 0) {
+        this.listQuery.beginTime = this.timeRange[0]
+        this.listQuery.endTime = this.timeRange[1]
+      } else {
+        this.listQuery.beginTime = ''
+        this.listQuery.endTime = ''
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.flex-container{
+  display: flex;
+  .flex-left{
+    flex:1;
+  }
+  .flex-right{
+    width: 260px;
+    padding: 10px 20px;
+  }
+}
+
+</style>
diff --git a/src/views/dataView/components/alarmView.vue b/src/views/dataView/components/alarmView.vue
deleted file mode 100644
index e13f811..0000000
--- a/src/views/dataView/components/alarmView.vue
+++ /dev/null
@@ -1,124 +0,0 @@
-<!--报警分析-->
-<template>
-  <panel-card title="报警分析">
-    <template slot="func">
-      <el-col :span="16">
-        <el-date-picker
-          v-model="timeRange"
-          type="datetimerange"
-          range-separator="至"
-          size="small"
-          :picker-options="pickerOptions"
-          value-format="yyyy-MM-dd HH:mm:ss"
-          start-placeholder="开始时间"
-          end-placeholder="结束时间"
-          @change="refresh"
-        />
-      </el-col>
-    </template>
-    <div class="flex-container">
-      <div class="flex-left">
-        <ve-line
-          :data="chartData"
-          :settings="chartSettingsLine"
-        />
-      </div>
-      <div class="flex-right">
-        <el-table border :data="tableList" stripe empty-text="无报警" height="340">
-          <el-table-column prop="name" label="报警类型" align="center" />
-          <el-table-column prop="value" label="报警数量" align="center" />
-        </el-table>
-      </div>
-    </div>
-  </panel-card>
-</template>
-
-<script>
-import { alarmStaticByDay, alarmStaticsByContent } from '@/api/data/dataStatics'
-import PanelCard from '@/components/BigData/Card/panelCard'
-import { getSearchLastWeekTime } from '@/utils/dateutils'
-
-export default {
-  name: 'AlarmStaticsByType',
-  components: { PanelCard },
-  data() {
-    return {
-      listQuery: {
-        deviceType: '',
-        beginTime: '',
-        endTime: ''
-      }, // 查询条件
-      timeRange: [], // 时间范围
-      tableList: [], // 列表
-      // 折线图
-      chartSettingsLine: {
-        labelMap: {
-          'date': '日期',
-          'alarmTimes': '报警次数'
-        },
-        dimension: ['date']
-      }, // 配置
-      chartData: {
-        columns: ['date', 'alarmTimes'],
-        rows: []
-      } // 折线图数据
-    }
-  },
-  created() {
-    this.timeRange = getSearchLastWeekTime()
-    this.refresh()
-  },
-  methods: {
-    refresh() {
-      this.handleDateTime()
-      this.fetchAlarmByDay()
-      this.fetchAlarmByContent()
-    },
-    // 获取各类报警的列表
-    fetchAlarmByContent() {
-      alarmStaticsByContent(this.listQuery).then(response => {
-        this.tableList = response.data
-      })
-    },
-    // 获取每日报警数
-    fetchAlarmByDay() {
-      // 模拟数据
-      // this.chartData.rows = [
-      //   { 'date': '9月20日', 'alarmTimes': 153, 'alarmWells': 43 },
-      //   { 'date': '9月21日', 'alarmTimes': 150, 'alarmWells': 30 },
-      //   { 'date': '9月22日', 'alarmTimes': 143, 'alarmWells': 23 },
-      //   { 'date': '9月23日', 'alarmTimes': 173, 'alarmWells': 23 },
-      //   { 'date': '9月24日', 'alarmTimes': 272, 'alarmWells': 52 },
-      //   { 'date': '9月25日', 'alarmTimes': 253, 'alarmWells': 53 }
-      // ]
-      alarmStaticByDay(this.listQuery).then(response => {
-        this.chartData.rows = response.data
-      })
-    },
-    // 处理时间
-    handleDateTime() {
-      if (this.timeRange && this.timeRange.length > 0) {
-        this.listQuery.beginTime = this.timeRange[0]
-        this.listQuery.endTime = this.timeRange[1]
-      } else {
-        this.listQuery.beginTime = ''
-        this.listQuery.endTime = ''
-      }
-    }
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-.flex-container{
-  display: flex;
-  .flex-left{
-    flex:1;
-  }
-  .flex-right{
-    width: 260px;
-    padding: 10px 20px;
-  }
-}
-
-</style>
diff --git a/src/views/dataView/components/alarmWellRank.vue b/src/views/dataView/components/alarmWellRank.vue
new file mode 100644
index 0000000..d680921
--- /dev/null
+++ b/src/views/dataView/components/alarmWellRank.vue
@@ -0,0 +1,100 @@
+<template>
+  <panel-card title="异常点位排名">
+    <template slot="func">
+      <time-buttons @change="changeTime" />
+      <el-select v-model="listQuery.alarmContent" placeholder="告警内容" clearable size="small" @change="fetchData">
+        <el-option
+          v-for="item in alarmContentTypeList"
+          :key="item.value"
+          :label="item.name"
+          :value="item.value"
+        />
+      </el-select>
+    </template>
+    <el-table :data="list" stripe empty-text="无异常点位" height="368">
+      <el-table-column type="index" width="50" align="center" />
+      <el-table-column prop="wellCode" label="点位编号" align="center" />
+      <el-table-column prop="position" label="详细地址" align="center" />
+      <el-table-column prop="alarmCount" label="报警次数" align="center" />
+      <el-table-column prop="count" label="报警设备数" align="center" />
+    </el-table>
+  </panel-card>
+</template>
+
+<script>
+import PanelCard from '@/components/BigData/Card/panelCard'
+import { alarmWellRank } from '@/api/data/dataStatics'
+import { getAlarmContentType } from '@/api/alarm/alarm'
+import TimeButtons from '@/components/BigData/TimeButtons'
+export default {
+  name: 'AlarmWellRank',
+  components: { TimeButtons, PanelCard },
+  data() {
+    return {
+      listQuery: {
+        alarmContent: '', // 报警内容
+        beginTime: '', // 开始时间
+        endTime: '' // 结束时间
+      }, // 查询结果
+      alarmContentTypeList: [],
+      list: [
+        { wellCode: 'aaaa', position: '中关村南大街5号院', alarmCount: 5, count: 0 },
+        { wellCode: 'aaaa', position: '中关村南大街5号院', alarmCount: 5, count: 0 },
+        { wellCode: 'aaaa', position: '中关村南大街5号院', alarmCount: 5, count: 0 },
+        { wellCode: 'aaaa', position: '中关村南大街5号院', alarmCount: 5, count: 0 },
+        { wellCode: 'aaaa', position: '中关村南大街5号院', alarmCount: 5, count: 0 },
+        { wellCode: 'aaaa', position: '中关村南大街5号院', alarmCount: 5, count: 0 },
+        { wellCode: 'aaaa', position: '中关村南大街5号院', alarmCount: 5, count: 0 },
+        { wellCode: 'aaaa', position: '中关村南大街5号院', alarmCount: 5, count: 0 },
+        { wellCode: 'aaaa', position: '中关村南大街5号院', alarmCount: 5, count: 0 },
+        { wellCode: 'aaaa', position: '中关村南大街5号院', alarmCount: 5, count: 0 }
+      ],
+      total: 0
+    }
+  },
+  created() {
+    this.fetchAlarmContentType()
+    this.fetchData()
+  },
+  methods: {
+    // 获取排名列表
+    fetchData() {
+      alarmWellRank(this.listQuery).then(res => {
+        this.list = res.data.rows
+        this.total = res.data.total
+      })
+    },
+    // 时间切换
+    changeTime(timeRange) {
+      this.handleDateTime()
+      this.fetchData()
+    },
+    // 获取告警内容类别
+    fetchAlarmContentType() {
+      this.alarmContentTypeList = []
+      getAlarmContentType('1').then(response => {
+        const supportDeviceTypes = this.$store.getters.deviceTypes
+        for (const item of response.data.list) {
+          if (supportDeviceTypes.indexOf(item.deviceType) !== -1) {
+            this.alarmContentTypeList.push(item)
+          }
+        }
+      })
+    },
+    // 处理时间
+    handleDateTime() {
+      if (this.timeRange && this.timeRange.length > 0) {
+        this.listQuery.beginTime = this.timeRange[0]
+        this.listQuery.endTime = this.timeRange[1]
+      } else {
+        this.listQuery.beginTime = ''
+        this.listQuery.endTime = ''
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

diff --git a/src/api/alarm/deviceStatics.js b/src/api/alarm/deviceStatics.js
index 7afcd4f..c375ac5 100644
--- a/src/api/alarm/deviceStatics.js
+++ b/src/api/alarm/deviceStatics.js
@@ -3,15 +3,6 @@
  */
 import request from '@/utils/request'
 
-// 报警情况统计
-export function deviceStaticsByDept(params) {
-  return request({
-    url: 'statics/alarmStaticsByStatus',
-    method: 'get',
-    params
-  })
-}
-
 // 报警设备查询
 export function getDeviceAlarmList(params) {
   return request({
diff --git a/src/api/data/dataStatics.js b/src/api/data/dataStatics.js
index bbe9263..56a1ea4 100644
--- a/src/api/data/dataStatics.js
+++ b/src/api/data/dataStatics.js
@@ -143,3 +143,12 @@
     params
   })
 }
+
+// 报警的井排名
+export function alarmWellRank(params) {
+  return request({
+    url: '/statics/alarmWellListPage',
+    method: 'get',
+    params
+  })
+}
diff --git a/src/views/alarmStatics/alarmStatics.vue b/src/views/alarmStatics/alarmStatics.vue
index 22c8798..7c2d2e8 100644
--- a/src/views/alarmStatics/alarmStatics.vue
+++ b/src/views/alarmStatics/alarmStatics.vue
@@ -1,13 +1,23 @@
 <template>
-  <el-row>
+  <el-row :gutter="10">
     <el-col :span="10">
-      <el-card shadow="never">
-        <div />
-        <alarm-statics-by-type />
-      </el-card>
+      <panel-card title="报警总体情况">
+        <el-row :gutter="20" style="padding: 15px 10px">
+          <el-col :span="12">
+            <simple-card title="正在报警" :context="alarmNow" unit="个" />
+          </el-col>
+          <el-col :span="12">
+            <simple-card title="今日报警" :context="todayAlarm" unit="个" />
+          </el-col>
+        </el-row>
+      </panel-card>
+      <!--报警井排名-->
+      <alarm-well-rank style="margin-top:10px" />
+      <!--报警内容统计-->
+      <alarm-statics-by-content style="margin-top:10px" />
     </el-col>
     <el-col :span="14">
-      <alarm-history-by-type />
+      <alarm-analysis />
     </el-col>
     <el-col :span="14">
       <alarm-statics-by-dept />
@@ -16,16 +26,32 @@
 </template>
 
 <script>
-import alarmStaticsByType from './components/alarmStaticsByType'
-import alarmHistoryByType from './components/alarmHistoryByType'
+
 import alarmStaticsByDept from './components/alarmStaticsByDept'
+import AlarmAnalysis from '@/views/dataView/components/alarmAnalysis'
+import PanelCard from '@/components/BigData/Card/panelCard'
+import SimpleCard from '@/components/BigData/Card/simpleCard'
+import { getSearchLastWeekTime } from '@/utils/dateutils'
+import AlarmWellRank from '@/views/dataView/components/alarmWellRank'
+import AlarmStaticsByContent from '@/views/alarmStatics/components/alarmStaticsByContent'
 export default {
-  name: 'DeviceStatics',
+  name: 'AlarmStatics',
   components: {
-    alarmStaticsByType,
-    alarmHistoryByType,
+    AlarmStaticsByContent,
+    AlarmWellRank,
+    SimpleCard,
+    PanelCard,
+    AlarmAnalysis,
     alarmStaticsByDept
+  },
+  data() {
+    return {
+      alarmNow: 0,
+      todayAlarm: 0
+
+    }
   }
+
 }
 </script>
 
diff --git a/src/views/alarmStatics/components/alarmStaticsByContent.vue b/src/views/alarmStatics/components/alarmStaticsByContent.vue
new file mode 100644
index 0000000..b165841
--- /dev/null
+++ b/src/views/alarmStatics/components/alarmStaticsByContent.vue
@@ -0,0 +1,47 @@
+<template>
+  <panel-card title="各类报警统计">
+    <template slot="func">
+      <el-col :span="16">
+        <el-date-picker
+          v-model="timeRange"
+          type="datetimerange"
+          range-separator="至"
+          size="small"
+          value-format="yyyy-MM-dd HH:mm:ss"
+          start-placeholder="开始时间"
+          end-placeholder="结束时间"
+        />
+      </el-col>
+    </template>
+    <alarm-statics-by-type :time-range="timeRange" />
+  </panel-card>
+</template>
+
+<script>
+import PanelCard from '@/components/BigData/Card/panelCard'
+import alarmStaticsByType from '@/views/staticCharts/AlarmStaticsByType'
+import { getSearchLastWeekTime } from '@/utils/dateutils'
+export default {
+  name: 'AlarmStaticsByContent',
+  components: {
+    alarmStaticsByType, PanelCard
+  },
+  data() {
+    return {
+      timeRange: []
+    }
+  },
+  created() {
+    this.timeRange = getSearchLastWeekTime()
+  },
+  methods: {
+    refresh() {
+
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/views/alarmStatics/components/alarmStaticsByType.vue b/src/views/alarmStatics/components/alarmStaticsByType.vue
deleted file mode 100644
index 7e17365..0000000
--- a/src/views/alarmStatics/components/alarmStaticsByType.vue
+++ /dev/null
@@ -1,276 +0,0 @@
-<template>
-  <el-row>
-    <el-col>
-      <el-col>
-        <div class="flagBoxStyle">
-          <div class="flagStyle" />
-          <div>报警总体情况</div>
-        </div>
-      </el-col>
-      <el-col class="cardStyle">
-        <el-col :span="10">
-          <el-card>
-            <div>
-              <span class="ttileStyle">正在报警</span>
-              <span class="countStyle">123</span>
-              <span>个</span>
-            </div>
-          </el-card>
-        </el-col>
-        <el-col :span="10">
-          <el-card>
-            <div>
-              <span class="ttileStyle">今日报警</span>
-              <span class="countStyle">123</span>
-              <span>个</span>
-            </div>
-          </el-card>
-        </el-col>
-      </el-col>
-      <el-col>
-        <el-col :span="8">
-          <div class="flagBoxStyle">
-            <div class="flagStyle" />
-            <div>各类报警统计</div>
-          </div>
-        </el-col>
-        <el-col :span="16">
-          <el-date-picker
-            v-model="timeRange1"
-            type="datetimerange"
-            range-separator="至"
-            size="small"
-            :picker-options="pickerOptions1"
-            value-format="yyyy-MM-dd HH:mm:ss"
-            start-placeholder="开始时间"
-            end-placeholder="结束时间"
-            @change="fetchDeviceTypeBar"
-          />
-        </el-col>
-      </el-col>
-      <el-col>
-        <ve-histogram
-          :data="chartData"
-          :grid="grid"
-          :extend="extend"
-          :settings="chartSettings"
-        />
-      </el-col>
-      <el-col>
-        <el-col :span="8">
-          <div class="flagBoxStyle">
-            <div class="flagStyle" />
-            <div>报警趋势统计</div>
-          </div>
-        </el-col>
-        <el-col :span="16">
-          <el-date-picker
-            v-model="timeRange2"
-            type="datetimerange"
-            range-separator="至"
-            size="small"
-            :picker-options="pickerOptions2"
-            value-format="yyyy-MM-dd HH:mm:ss"
-            start-placeholder="开始时间"
-            end-placeholder="结束时间"
-            @change="fetchDeviceTypeLine"
-          />
-        </el-col>
-      </el-col>
-      <el-col>
-        <ve-line
-          :data="chartDataLine"
-          :settings="chartSettingsLine"
-        />
-      </el-col>
-    </el-col>
-  </el-row>
-</template>
-
-<script>
-import { deviceStaticsByDept } from '@/api/alarm/deviceStatics'
-import { alarmStaticsByContent } from '@/api/alarm/deviceStatics'
-export default {
-  name: 'AlarmStaticsByType',
-  data() {
-    return {
-      // 柱状图搜索条件
-      timeRange1: '',
-      timeRange2: '',
-      listQuery: {
-        startTime: '',
-        endTime: '',
-        alarmType: ''
-      },
-      pickerOptions1: {
-        shortcuts: [{
-          text: '最近一周',
-          onClick(picker) {
-            const end = new Date()
-            const start = new Date()
-            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
-            picker.$emit('pick', [start, end])
-          }
-        }, {
-          text: '最近一个月',
-          onClick(picker) {
-            const end = new Date()
-            const start = new Date()
-            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
-            picker.$emit('pick', [start, end])
-          }
-        }, {
-          text: '最近三个月',
-          onClick(picker) {
-            const end = new Date()
-            const start = new Date()
-            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
-            picker.$emit('pick', [start, end])
-          }
-        }]
-      },
-      // 折线图搜索条件
-      listStatue: {
-        startTime: '',
-        endTime: '',
-        alarmType: ''
-      },
-      pickerOptions2: {
-        shortcuts: [{
-          text: '最近一周',
-          onClick(picker) {
-            const end = new Date()
-            const start = new Date()
-            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
-            picker.$emit('pick', [start, end])
-          }
-        }, {
-          text: '最近一个月',
-          onClick(picker) {
-            const end = new Date()
-            const start = new Date()
-            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
-            picker.$emit('pick', [start, end])
-          }
-        }, {
-          text: '最近三个月',
-          onClick(picker) {
-            const end = new Date()
-            const start = new Date()
-            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
-            picker.$emit('pick', [start, end])
-          }
-        }]
-      },
-      // 折线图
-      chartSettingsLine: {
-        labelMap: {
-          'alarmWellData': '井盖开盖报警',
-          'alarmLiquidData': '液位超限报警',
-          'alarmHarmfulData': '有害气体超标报警'
-        },
-        metrics: ['alarmWellData', 'alarmLiquidData', 'alarmHarmfulData'],
-        dimension: ['date']
-      },
-      chartDataLine: {
-        columns: ['date', 'alarmWellData', 'alarmLiquidData', 'alarmHarmfulData'],
-        rows: []
-      },
-      // 柱状图
-      extend: {
-        xAxis: {
-          axisLabel: {
-            rotate: 30,
-            margin: 30,
-            textStyle: {
-              align: 'center'
-            }
-          }
-        },
-        series: {
-          label: { show: true, position: 'top' },
-          barMaxWidth: 35 // 最大柱宽度
-        }
-      },
-      grid: {
-        right: 60
-      },
-      chartSettings: {
-        itemStyle: {
-          'barCategoryGap': 5
-        },
-        barWidth: 15,
-        labelMap: {
-          'alarmContent': '报警内容',
-          'totalAlarm': '报警数量',
-          'cancelAlarm': '消警数量'
-        },
-        dimension: ['alarmContent'],
-        metrics: ['totalAlarm', 'cancelAlarm']
-      },
-      chartData: {
-        columns: ['alarmContent', 'totalAlarm', 'cancelAlarm'],
-        rows: []
-      }
-    }
-  },
-  created() {
-    this.fetchDeviceTypeBar()
-    this.fetchDeviceTypeLine()
-  },
-  methods: {
-    fetchDeviceTypeBar(val) {
-      if (val !== undefined) {
-        this.listQuery.startTime = val[0]
-        this.listQuery.endTime = val[1]
-      }
-      deviceStaticsByDept(this.listQuery).then(response => {
-        this.chartData.rows = response.data
-      })
-    },
-    fetchDeviceTypeLine(val) {
-      if (val !== undefined) {
-        this.listQuery.startTime = val[0]
-        this.listQuery.endTime = val[1]
-      }
-      alarmStaticsByContent(this.listStatue).then(response => {
-        console.log(response.data, '===123')
-        this.chartDataLine.rows = response.data
-      })
-    }
-  }
-}
-</script>
-
-<style rel="stylesheet/scss" lang="scss" scoped>
-.flagBoxStyle {
-  display: flex;
-  margin-bottom: 20px;
-}
-.flagBoxStyle div:nth-child(2){
-  line-height: 30px;
-  font-weight: 600;
-}
-.flagStyle {
-  width: 4px;
-  height: 30px;
-  margin-right: 6px;
-  background: rgb(64 121 242);
-}
-.cardStyle {
-  display:flex;
-  margin-bottom: 60px;
-  justify-content: space-around;
-}
-.ttileStyle {
-  font-size: 12px;
-}
-.countStyle {
-  font-size: 20px;
-  margin: 0 10px;
-}
-.el-date-editor--datetimerange.el-input,
-.el-date-editor--datetimerange.el-input__inner{
-  width: 340px;
-}
-</style>
diff --git a/src/views/dashboard/components/AlarmByDays.vue b/src/views/dashboard/components/AlarmByDays.vue
index 6b839d3..bd8228e 100644
--- a/src/views/dashboard/components/AlarmByDays.vue
+++ b/src/views/dashboard/components/AlarmByDays.vue
@@ -1,5 +1,5 @@
 <template>
-  <ve-line :data="chartData" :title="title" :settings="chartSettings" />
+  <ve-line :data="chartData" :title="title" :extend="extend" :settings="chartSettings" />
 </template>
 
 <script>
@@ -9,27 +9,33 @@
 export default {
   name: 'AlarmByDays',
   data() {
-    this.title = {
-      text: '7日报警趋势'
-    }
-    this.chartSettings = {
-      labelMap: {
-        'alarmWells': '报警井数',
-        'alarmTimes': '报警次数'
-      },
-      metrics: ['alarmTimes', 'alarmWells'],
-      dimension: ['date']
-    }
     return {
+      title: {
+        text: '7日报警趋势'
+      },
+      chartSettings: {
+        labelMap: {
+          'alarmWells': '报警井数',
+          'alarmTimes': '报警次数'
+        },
+        metrics: ['alarmTimes', 'alarmWells'],
+        dimension: ['date']
+      },
+      extend: {
+        yAxis: {
+          type: 'value',
+          minInterval: 1
+        }
+      },
       listQuery: {
         deviceType: '',
         beginTime: '',
         endTime: ''
-      },
+      }, // 查询条件
       chartData: {
         columns: ['date', 'alarmTimes', 'alarmWells'],
         rows: []
-      }
+      } // 数据
     }
   },
   mounted() {
@@ -52,6 +58,14 @@
       this.listQuery.endTime = endTime
       alarmStaticByDay(this.listQuery).then(response => {
         this.chartData.rows = response.data
+        const maxValue = Math.max.apply(Math, response.data.map(function(item) {
+          return parseInt(item.alarmTimes)
+        }))
+        if (maxValue < 10) {
+          this.extend.yAxis = { type: 'value', minInterval: 1, max: 10 }
+        } else {
+          this.extend.yAxis = { type: 'value', minInterval: 1 }
+        }
       })
     }
   }
diff --git a/src/views/dashboard/components/JobByStatus.vue b/src/views/dashboard/components/JobByStatus.vue
index 7502e17..66feacc 100644
--- a/src/views/dashboard/components/JobByStatus.vue
+++ b/src/views/dashboard/components/JobByStatus.vue
@@ -1,5 +1,5 @@
 <template>
-  <ve-bar :data="chartData" :title="title" :settings="chartSettings" />
+  <ve-bar :data="chartData" :title="title" :extend="extend" :settings="chartSettings" />
 </template>
 
 <script>
@@ -9,22 +9,31 @@
 export default {
   name: 'JobByStatus',
   data() {
-    this.title = {
-      text: '30日工单数量统计'
-    }
-    this.chartSettings = {
-      labelMap: {
-        'deptName': '权属单位',
-        'beforeGet': '待处理',
-        'beforeConfirm': '待确认',
-        'inHandle': '处理中',
-        'over': '已完成'
-      },
-      stack: {
-        'xxx': ['beforeGet', 'beforeConfirm', 'inHandle', 'over']
-      }
-    }
     return {
+      title: {
+        text: '30日工单数量统计'
+      },
+      chartSettings: {
+        labelMap: {
+          'deptName': '权属单位',
+          'beforeGet': '待处理',
+          'beforeConfirm': '待确认',
+          'inHandle': '处理中',
+          'over': '已完成'
+        },
+        stack: {
+          'xxx': ['beforeGet', 'beforeConfirm', 'inHandle', 'over']
+        }
+      },
+      extend: {
+        xAxis: {
+          type: 'value',
+          minInterval: 1
+        },
+        series: {
+          barMaxWidth: 35
+        }
+      },
       chartData: {
         columns: ['deptName', 'beforeGet', 'beforeConfirm', 'inHandle', 'over'],
         rows: []
@@ -54,6 +63,14 @@
       }
       jobStaticsByDept(listQuery).then(response => {
         this.chartData.rows = response.data
+        const maxValue = Math.max.apply(Math, response.data.map(function(item) {
+          return parseInt(item.beforeGet) + parseInt(item.beforeConfirm) + parseInt(item.inHandle) + parseInt(item.over)
+        }))
+        if (maxValue < 10) {
+          this.extend.xAxis = { type: 'value', minInterval: 1, max: 10 }
+        } else {
+          this.extend.xAxis = { type: 'value', minInterval: 1 }
+        }
       })
     }
   }
diff --git a/src/views/dashboard/index.vue b/src/views/dashboard/index.vue
index 7f228d3..f96a2a2 100644
--- a/src/views/dashboard/index.vue
+++ b/src/views/dashboard/index.vue
@@ -17,7 +17,7 @@
       <!--设备数量统计-->
       <el-col v-if="hasPerm('/statics/deviceStaticsByType')" :span="14">
         <el-card shadow="never">
-          <device-count />
+          <device-count-by-type-bar chart-title="设备数量统计" />
         </el-card>
       </el-col>
       <!--设备在线情况统计-->
@@ -51,10 +51,12 @@
 import DeviceCountByOnline from './components/DeviceCountByOnline'
 import AlarmByDays from './components/AlarmByDays'
 import JobByStatus from './components/JobByStatus'
+import DeviceCountByTypeBar from '@/views/staticCharts/DeviceCountByTypeBar'
 
 export default {
   name: 'Dashboard',
   components: {
+    DeviceCountByTypeBar,
     JobByStatus,
     AlarmByDays,
     PanelGroup,
diff --git a/src/views/dataView/components/alarmAnalysis.vue b/src/views/dataView/components/alarmAnalysis.vue
new file mode 100644
index 0000000..ece3c81
--- /dev/null
+++ b/src/views/dataView/components/alarmAnalysis.vue
@@ -0,0 +1,123 @@
+<!--报警分析-->
+<template>
+  <panel-card title="报警分析">
+    <template slot="func">
+      <el-col :span="16">
+        <el-date-picker
+          v-model="timeRange"
+          type="datetimerange"
+          range-separator="至"
+          size="small"
+          value-format="yyyy-MM-dd HH:mm:ss"
+          start-placeholder="开始时间"
+          end-placeholder="结束时间"
+          @change="refresh"
+        />
+      </el-col>
+    </template>
+    <div class="flex-container">
+      <div class="flex-left">
+        <ve-line
+          :data="chartData"
+          :settings="chartSettingsLine"
+        />
+      </div>
+      <div class="flex-right">
+        <el-table border :data="tableList" stripe empty-text="无报警" height="340">
+          <el-table-column prop="name" label="报警类型" align="center" />
+          <el-table-column prop="value" label="报警数量" align="center" />
+        </el-table>
+      </div>
+    </div>
+  </panel-card>
+</template>
+
+<script>
+import { alarmStaticByDay, alarmStaticsByContent } from '@/api/data/dataStatics'
+import PanelCard from '@/components/BigData/Card/panelCard'
+import { getSearchLastWeekTime } from '@/utils/dateutils'
+
+export default {
+  name: 'AlarmAnalysis',
+  components: { PanelCard },
+  data() {
+    return {
+      listQuery: {
+        deviceType: '',
+        beginTime: '',
+        endTime: ''
+      }, // 查询条件
+      timeRange: [], // 时间范围
+      tableList: [], // 列表
+      // 折线图
+      chartSettingsLine: {
+        labelMap: {
+          'date': '日期',
+          'alarmTimes': '报警次数'
+        },
+        dimension: ['date']
+      }, // 配置
+      chartData: {
+        columns: ['date', 'alarmTimes'],
+        rows: []
+      } // 折线图数据
+    }
+  },
+  created() {
+    this.timeRange = getSearchLastWeekTime()
+    this.refresh()
+  },
+  methods: {
+    refresh() {
+      this.handleDateTime()
+      this.fetchAlarmByDay()
+      this.fetchAlarmByContent()
+    },
+    // 获取各类报警的列表
+    fetchAlarmByContent() {
+      alarmStaticsByContent(this.listQuery).then(response => {
+        this.tableList = response.data
+      })
+    },
+    // 获取每日报警数
+    fetchAlarmByDay() {
+      // 模拟数据
+      // this.chartData.rows = [
+      //   { 'date': '9月20日', 'alarmTimes': 153, 'alarmWells': 43 },
+      //   { 'date': '9月21日', 'alarmTimes': 150, 'alarmWells': 30 },
+      //   { 'date': '9月22日', 'alarmTimes': 143, 'alarmWells': 23 },
+      //   { 'date': '9月23日', 'alarmTimes': 173, 'alarmWells': 23 },
+      //   { 'date': '9月24日', 'alarmTimes': 272, 'alarmWells': 52 },
+      //   { 'date': '9月25日', 'alarmTimes': 253, 'alarmWells': 53 }
+      // ]
+      alarmStaticByDay(this.listQuery).then(response => {
+        this.chartData.rows = response.data
+      })
+    },
+    // 处理时间
+    handleDateTime() {
+      if (this.timeRange && this.timeRange.length > 0) {
+        this.listQuery.beginTime = this.timeRange[0]
+        this.listQuery.endTime = this.timeRange[1]
+      } else {
+        this.listQuery.beginTime = ''
+        this.listQuery.endTime = ''
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.flex-container{
+  display: flex;
+  .flex-left{
+    flex:1;
+  }
+  .flex-right{
+    width: 260px;
+    padding: 10px 20px;
+  }
+}
+
+</style>
diff --git a/src/views/dataView/components/alarmView.vue b/src/views/dataView/components/alarmView.vue
deleted file mode 100644
index e13f811..0000000
--- a/src/views/dataView/components/alarmView.vue
+++ /dev/null
@@ -1,124 +0,0 @@
-<!--报警分析-->
-<template>
-  <panel-card title="报警分析">
-    <template slot="func">
-      <el-col :span="16">
-        <el-date-picker
-          v-model="timeRange"
-          type="datetimerange"
-          range-separator="至"
-          size="small"
-          :picker-options="pickerOptions"
-          value-format="yyyy-MM-dd HH:mm:ss"
-          start-placeholder="开始时间"
-          end-placeholder="结束时间"
-          @change="refresh"
-        />
-      </el-col>
-    </template>
-    <div class="flex-container">
-      <div class="flex-left">
-        <ve-line
-          :data="chartData"
-          :settings="chartSettingsLine"
-        />
-      </div>
-      <div class="flex-right">
-        <el-table border :data="tableList" stripe empty-text="无报警" height="340">
-          <el-table-column prop="name" label="报警类型" align="center" />
-          <el-table-column prop="value" label="报警数量" align="center" />
-        </el-table>
-      </div>
-    </div>
-  </panel-card>
-</template>
-
-<script>
-import { alarmStaticByDay, alarmStaticsByContent } from '@/api/data/dataStatics'
-import PanelCard from '@/components/BigData/Card/panelCard'
-import { getSearchLastWeekTime } from '@/utils/dateutils'
-
-export default {
-  name: 'AlarmStaticsByType',
-  components: { PanelCard },
-  data() {
-    return {
-      listQuery: {
-        deviceType: '',
-        beginTime: '',
-        endTime: ''
-      }, // 查询条件
-      timeRange: [], // 时间范围
-      tableList: [], // 列表
-      // 折线图
-      chartSettingsLine: {
-        labelMap: {
-          'date': '日期',
-          'alarmTimes': '报警次数'
-        },
-        dimension: ['date']
-      }, // 配置
-      chartData: {
-        columns: ['date', 'alarmTimes'],
-        rows: []
-      } // 折线图数据
-    }
-  },
-  created() {
-    this.timeRange = getSearchLastWeekTime()
-    this.refresh()
-  },
-  methods: {
-    refresh() {
-      this.handleDateTime()
-      this.fetchAlarmByDay()
-      this.fetchAlarmByContent()
-    },
-    // 获取各类报警的列表
-    fetchAlarmByContent() {
-      alarmStaticsByContent(this.listQuery).then(response => {
-        this.tableList = response.data
-      })
-    },
-    // 获取每日报警数
-    fetchAlarmByDay() {
-      // 模拟数据
-      // this.chartData.rows = [
-      //   { 'date': '9月20日', 'alarmTimes': 153, 'alarmWells': 43 },
-      //   { 'date': '9月21日', 'alarmTimes': 150, 'alarmWells': 30 },
-      //   { 'date': '9月22日', 'alarmTimes': 143, 'alarmWells': 23 },
-      //   { 'date': '9月23日', 'alarmTimes': 173, 'alarmWells': 23 },
-      //   { 'date': '9月24日', 'alarmTimes': 272, 'alarmWells': 52 },
-      //   { 'date': '9月25日', 'alarmTimes': 253, 'alarmWells': 53 }
-      // ]
-      alarmStaticByDay(this.listQuery).then(response => {
-        this.chartData.rows = response.data
-      })
-    },
-    // 处理时间
-    handleDateTime() {
-      if (this.timeRange && this.timeRange.length > 0) {
-        this.listQuery.beginTime = this.timeRange[0]
-        this.listQuery.endTime = this.timeRange[1]
-      } else {
-        this.listQuery.beginTime = ''
-        this.listQuery.endTime = ''
-      }
-    }
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-.flex-container{
-  display: flex;
-  .flex-left{
-    flex:1;
-  }
-  .flex-right{
-    width: 260px;
-    padding: 10px 20px;
-  }
-}
-
-</style>
diff --git a/src/views/dataView/components/alarmWellRank.vue b/src/views/dataView/components/alarmWellRank.vue
new file mode 100644
index 0000000..d680921
--- /dev/null
+++ b/src/views/dataView/components/alarmWellRank.vue
@@ -0,0 +1,100 @@
+<template>
+  <panel-card title="异常点位排名">
+    <template slot="func">
+      <time-buttons @change="changeTime" />
+      <el-select v-model="listQuery.alarmContent" placeholder="告警内容" clearable size="small" @change="fetchData">
+        <el-option
+          v-for="item in alarmContentTypeList"
+          :key="item.value"
+          :label="item.name"
+          :value="item.value"
+        />
+      </el-select>
+    </template>
+    <el-table :data="list" stripe empty-text="无异常点位" height="368">
+      <el-table-column type="index" width="50" align="center" />
+      <el-table-column prop="wellCode" label="点位编号" align="center" />
+      <el-table-column prop="position" label="详细地址" align="center" />
+      <el-table-column prop="alarmCount" label="报警次数" align="center" />
+      <el-table-column prop="count" label="报警设备数" align="center" />
+    </el-table>
+  </panel-card>
+</template>
+
+<script>
+import PanelCard from '@/components/BigData/Card/panelCard'
+import { alarmWellRank } from '@/api/data/dataStatics'
+import { getAlarmContentType } from '@/api/alarm/alarm'
+import TimeButtons from '@/components/BigData/TimeButtons'
+export default {
+  name: 'AlarmWellRank',
+  components: { TimeButtons, PanelCard },
+  data() {
+    return {
+      listQuery: {
+        alarmContent: '', // 报警内容
+        beginTime: '', // 开始时间
+        endTime: '' // 结束时间
+      }, // 查询结果
+      alarmContentTypeList: [],
+      list: [
+        { wellCode: 'aaaa', position: '中关村南大街5号院', alarmCount: 5, count: 0 },
+        { wellCode: 'aaaa', position: '中关村南大街5号院', alarmCount: 5, count: 0 },
+        { wellCode: 'aaaa', position: '中关村南大街5号院', alarmCount: 5, count: 0 },
+        { wellCode: 'aaaa', position: '中关村南大街5号院', alarmCount: 5, count: 0 },
+        { wellCode: 'aaaa', position: '中关村南大街5号院', alarmCount: 5, count: 0 },
+        { wellCode: 'aaaa', position: '中关村南大街5号院', alarmCount: 5, count: 0 },
+        { wellCode: 'aaaa', position: '中关村南大街5号院', alarmCount: 5, count: 0 },
+        { wellCode: 'aaaa', position: '中关村南大街5号院', alarmCount: 5, count: 0 },
+        { wellCode: 'aaaa', position: '中关村南大街5号院', alarmCount: 5, count: 0 },
+        { wellCode: 'aaaa', position: '中关村南大街5号院', alarmCount: 5, count: 0 }
+      ],
+      total: 0
+    }
+  },
+  created() {
+    this.fetchAlarmContentType()
+    this.fetchData()
+  },
+  methods: {
+    // 获取排名列表
+    fetchData() {
+      alarmWellRank(this.listQuery).then(res => {
+        this.list = res.data.rows
+        this.total = res.data.total
+      })
+    },
+    // 时间切换
+    changeTime(timeRange) {
+      this.handleDateTime()
+      this.fetchData()
+    },
+    // 获取告警内容类别
+    fetchAlarmContentType() {
+      this.alarmContentTypeList = []
+      getAlarmContentType('1').then(response => {
+        const supportDeviceTypes = this.$store.getters.deviceTypes
+        for (const item of response.data.list) {
+          if (supportDeviceTypes.indexOf(item.deviceType) !== -1) {
+            this.alarmContentTypeList.push(item)
+          }
+        }
+      })
+    },
+    // 处理时间
+    handleDateTime() {
+      if (this.timeRange && this.timeRange.length > 0) {
+        this.listQuery.beginTime = this.timeRange[0]
+        this.listQuery.endTime = this.timeRange[1]
+      } else {
+        this.listQuery.beginTime = ''
+        this.listQuery.endTime = ''
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/views/dataView/dataView.vue b/src/views/dataView/dataView.vue
index b627e4a..f890263 100644
--- a/src/views/dataView/dataView.vue
+++ b/src/views/dataView/dataView.vue
@@ -9,7 +9,7 @@
     </el-row>
     <el-row style="margin-top:10px" gutter="10">
       <el-col :span="12">
-        <alarm-view />
+        <alarm-analysis />
       </el-col>
       <el-col :span="12">
         <job-analysis />
@@ -30,15 +30,13 @@
 
 <script>
 import panelGroup from './components/panelGroup'
-import alarmStatus from './components/jobAnalysis'
 import wellCountView from './components/wellCountView'
 import deviceCountView from './components/deviceCountView'
-import alarmView from './components/alarmView'
-import JobByStatus from '@/views/dashboard/components/JobByStatus'
 import JobAnalysis from '@/views/dataView/components/jobAnalysis'
+import AlarmAnalysis from '@/views/dataView/components/alarmAnalysis'
 export default {
   name: 'DataView',
-  components: { JobAnalysis, JobByStatus, panelGroup, alarmStatus, wellCountView, deviceCountView, alarmView }
+  components: { AlarmAnalysis, JobAnalysis, panelGroup, wellCountView, deviceCountView }
 }
 </script>
 

diff --git a/src/api/alarm/deviceStatics.js b/src/api/alarm/deviceStatics.js
index 7afcd4f..c375ac5 100644
--- a/src/api/alarm/deviceStatics.js
+++ b/src/api/alarm/deviceStatics.js
@@ -3,15 +3,6 @@
  */
 import request from '@/utils/request'
 
-// 报警情况统计
-export function deviceStaticsByDept(params) {
-  return request({
-    url: 'statics/alarmStaticsByStatus',
-    method: 'get',
-    params
-  })
-}
-
 // 报警设备查询
 export function getDeviceAlarmList(params) {
   return request({
diff --git a/src/api/data/dataStatics.js b/src/api/data/dataStatics.js
index bbe9263..56a1ea4 100644
--- a/src/api/data/dataStatics.js
+++ b/src/api/data/dataStatics.js
@@ -143,3 +143,12 @@
     params
   })
 }
+
+// 报警的井排名
+export function alarmWellRank(params) {
+  return request({
+    url: '/statics/alarmWellListPage',
+    method: 'get',
+    params
+  })
+}
diff --git a/src/views/alarmStatics/alarmStatics.vue b/src/views/alarmStatics/alarmStatics.vue
index 22c8798..7c2d2e8 100644
--- a/src/views/alarmStatics/alarmStatics.vue
+++ b/src/views/alarmStatics/alarmStatics.vue
@@ -1,13 +1,23 @@
 <template>
-  <el-row>
+  <el-row :gutter="10">
     <el-col :span="10">
-      <el-card shadow="never">
-        <div />
-        <alarm-statics-by-type />
-      </el-card>
+      <panel-card title="报警总体情况">
+        <el-row :gutter="20" style="padding: 15px 10px">
+          <el-col :span="12">
+            <simple-card title="正在报警" :context="alarmNow" unit="个" />
+          </el-col>
+          <el-col :span="12">
+            <simple-card title="今日报警" :context="todayAlarm" unit="个" />
+          </el-col>
+        </el-row>
+      </panel-card>
+      <!--报警井排名-->
+      <alarm-well-rank style="margin-top:10px" />
+      <!--报警内容统计-->
+      <alarm-statics-by-content style="margin-top:10px" />
     </el-col>
     <el-col :span="14">
-      <alarm-history-by-type />
+      <alarm-analysis />
     </el-col>
     <el-col :span="14">
       <alarm-statics-by-dept />
@@ -16,16 +26,32 @@
 </template>
 
 <script>
-import alarmStaticsByType from './components/alarmStaticsByType'
-import alarmHistoryByType from './components/alarmHistoryByType'
+
 import alarmStaticsByDept from './components/alarmStaticsByDept'
+import AlarmAnalysis from '@/views/dataView/components/alarmAnalysis'
+import PanelCard from '@/components/BigData/Card/panelCard'
+import SimpleCard from '@/components/BigData/Card/simpleCard'
+import { getSearchLastWeekTime } from '@/utils/dateutils'
+import AlarmWellRank from '@/views/dataView/components/alarmWellRank'
+import AlarmStaticsByContent from '@/views/alarmStatics/components/alarmStaticsByContent'
 export default {
-  name: 'DeviceStatics',
+  name: 'AlarmStatics',
   components: {
-    alarmStaticsByType,
-    alarmHistoryByType,
+    AlarmStaticsByContent,
+    AlarmWellRank,
+    SimpleCard,
+    PanelCard,
+    AlarmAnalysis,
     alarmStaticsByDept
+  },
+  data() {
+    return {
+      alarmNow: 0,
+      todayAlarm: 0
+
+    }
   }
+
 }
 </script>
 
diff --git a/src/views/alarmStatics/components/alarmStaticsByContent.vue b/src/views/alarmStatics/components/alarmStaticsByContent.vue
new file mode 100644
index 0000000..b165841
--- /dev/null
+++ b/src/views/alarmStatics/components/alarmStaticsByContent.vue
@@ -0,0 +1,47 @@
+<template>
+  <panel-card title="各类报警统计">
+    <template slot="func">
+      <el-col :span="16">
+        <el-date-picker
+          v-model="timeRange"
+          type="datetimerange"
+          range-separator="至"
+          size="small"
+          value-format="yyyy-MM-dd HH:mm:ss"
+          start-placeholder="开始时间"
+          end-placeholder="结束时间"
+        />
+      </el-col>
+    </template>
+    <alarm-statics-by-type :time-range="timeRange" />
+  </panel-card>
+</template>
+
+<script>
+import PanelCard from '@/components/BigData/Card/panelCard'
+import alarmStaticsByType from '@/views/staticCharts/AlarmStaticsByType'
+import { getSearchLastWeekTime } from '@/utils/dateutils'
+export default {
+  name: 'AlarmStaticsByContent',
+  components: {
+    alarmStaticsByType, PanelCard
+  },
+  data() {
+    return {
+      timeRange: []
+    }
+  },
+  created() {
+    this.timeRange = getSearchLastWeekTime()
+  },
+  methods: {
+    refresh() {
+
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/views/alarmStatics/components/alarmStaticsByType.vue b/src/views/alarmStatics/components/alarmStaticsByType.vue
deleted file mode 100644
index 7e17365..0000000
--- a/src/views/alarmStatics/components/alarmStaticsByType.vue
+++ /dev/null
@@ -1,276 +0,0 @@
-<template>
-  <el-row>
-    <el-col>
-      <el-col>
-        <div class="flagBoxStyle">
-          <div class="flagStyle" />
-          <div>报警总体情况</div>
-        </div>
-      </el-col>
-      <el-col class="cardStyle">
-        <el-col :span="10">
-          <el-card>
-            <div>
-              <span class="ttileStyle">正在报警</span>
-              <span class="countStyle">123</span>
-              <span>个</span>
-            </div>
-          </el-card>
-        </el-col>
-        <el-col :span="10">
-          <el-card>
-            <div>
-              <span class="ttileStyle">今日报警</span>
-              <span class="countStyle">123</span>
-              <span>个</span>
-            </div>
-          </el-card>
-        </el-col>
-      </el-col>
-      <el-col>
-        <el-col :span="8">
-          <div class="flagBoxStyle">
-            <div class="flagStyle" />
-            <div>各类报警统计</div>
-          </div>
-        </el-col>
-        <el-col :span="16">
-          <el-date-picker
-            v-model="timeRange1"
-            type="datetimerange"
-            range-separator="至"
-            size="small"
-            :picker-options="pickerOptions1"
-            value-format="yyyy-MM-dd HH:mm:ss"
-            start-placeholder="开始时间"
-            end-placeholder="结束时间"
-            @change="fetchDeviceTypeBar"
-          />
-        </el-col>
-      </el-col>
-      <el-col>
-        <ve-histogram
-          :data="chartData"
-          :grid="grid"
-          :extend="extend"
-          :settings="chartSettings"
-        />
-      </el-col>
-      <el-col>
-        <el-col :span="8">
-          <div class="flagBoxStyle">
-            <div class="flagStyle" />
-            <div>报警趋势统计</div>
-          </div>
-        </el-col>
-        <el-col :span="16">
-          <el-date-picker
-            v-model="timeRange2"
-            type="datetimerange"
-            range-separator="至"
-            size="small"
-            :picker-options="pickerOptions2"
-            value-format="yyyy-MM-dd HH:mm:ss"
-            start-placeholder="开始时间"
-            end-placeholder="结束时间"
-            @change="fetchDeviceTypeLine"
-          />
-        </el-col>
-      </el-col>
-      <el-col>
-        <ve-line
-          :data="chartDataLine"
-          :settings="chartSettingsLine"
-        />
-      </el-col>
-    </el-col>
-  </el-row>
-</template>
-
-<script>
-import { deviceStaticsByDept } from '@/api/alarm/deviceStatics'
-import { alarmStaticsByContent } from '@/api/alarm/deviceStatics'
-export default {
-  name: 'AlarmStaticsByType',
-  data() {
-    return {
-      // 柱状图搜索条件
-      timeRange1: '',
-      timeRange2: '',
-      listQuery: {
-        startTime: '',
-        endTime: '',
-        alarmType: ''
-      },
-      pickerOptions1: {
-        shortcuts: [{
-          text: '最近一周',
-          onClick(picker) {
-            const end = new Date()
-            const start = new Date()
-            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
-            picker.$emit('pick', [start, end])
-          }
-        }, {
-          text: '最近一个月',
-          onClick(picker) {
-            const end = new Date()
-            const start = new Date()
-            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
-            picker.$emit('pick', [start, end])
-          }
-        }, {
-          text: '最近三个月',
-          onClick(picker) {
-            const end = new Date()
-            const start = new Date()
-            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
-            picker.$emit('pick', [start, end])
-          }
-        }]
-      },
-      // 折线图搜索条件
-      listStatue: {
-        startTime: '',
-        endTime: '',
-        alarmType: ''
-      },
-      pickerOptions2: {
-        shortcuts: [{
-          text: '最近一周',
-          onClick(picker) {
-            const end = new Date()
-            const start = new Date()
-            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
-            picker.$emit('pick', [start, end])
-          }
-        }, {
-          text: '最近一个月',
-          onClick(picker) {
-            const end = new Date()
-            const start = new Date()
-            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
-            picker.$emit('pick', [start, end])
-          }
-        }, {
-          text: '最近三个月',
-          onClick(picker) {
-            const end = new Date()
-            const start = new Date()
-            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
-            picker.$emit('pick', [start, end])
-          }
-        }]
-      },
-      // 折线图
-      chartSettingsLine: {
-        labelMap: {
-          'alarmWellData': '井盖开盖报警',
-          'alarmLiquidData': '液位超限报警',
-          'alarmHarmfulData': '有害气体超标报警'
-        },
-        metrics: ['alarmWellData', 'alarmLiquidData', 'alarmHarmfulData'],
-        dimension: ['date']
-      },
-      chartDataLine: {
-        columns: ['date', 'alarmWellData', 'alarmLiquidData', 'alarmHarmfulData'],
-        rows: []
-      },
-      // 柱状图
-      extend: {
-        xAxis: {
-          axisLabel: {
-            rotate: 30,
-            margin: 30,
-            textStyle: {
-              align: 'center'
-            }
-          }
-        },
-        series: {
-          label: { show: true, position: 'top' },
-          barMaxWidth: 35 // 最大柱宽度
-        }
-      },
-      grid: {
-        right: 60
-      },
-      chartSettings: {
-        itemStyle: {
-          'barCategoryGap': 5
-        },
-        barWidth: 15,
-        labelMap: {
-          'alarmContent': '报警内容',
-          'totalAlarm': '报警数量',
-          'cancelAlarm': '消警数量'
-        },
-        dimension: ['alarmContent'],
-        metrics: ['totalAlarm', 'cancelAlarm']
-      },
-      chartData: {
-        columns: ['alarmContent', 'totalAlarm', 'cancelAlarm'],
-        rows: []
-      }
-    }
-  },
-  created() {
-    this.fetchDeviceTypeBar()
-    this.fetchDeviceTypeLine()
-  },
-  methods: {
-    fetchDeviceTypeBar(val) {
-      if (val !== undefined) {
-        this.listQuery.startTime = val[0]
-        this.listQuery.endTime = val[1]
-      }
-      deviceStaticsByDept(this.listQuery).then(response => {
-        this.chartData.rows = response.data
-      })
-    },
-    fetchDeviceTypeLine(val) {
-      if (val !== undefined) {
-        this.listQuery.startTime = val[0]
-        this.listQuery.endTime = val[1]
-      }
-      alarmStaticsByContent(this.listStatue).then(response => {
-        console.log(response.data, '===123')
-        this.chartDataLine.rows = response.data
-      })
-    }
-  }
-}
-</script>
-
-<style rel="stylesheet/scss" lang="scss" scoped>
-.flagBoxStyle {
-  display: flex;
-  margin-bottom: 20px;
-}
-.flagBoxStyle div:nth-child(2){
-  line-height: 30px;
-  font-weight: 600;
-}
-.flagStyle {
-  width: 4px;
-  height: 30px;
-  margin-right: 6px;
-  background: rgb(64 121 242);
-}
-.cardStyle {
-  display:flex;
-  margin-bottom: 60px;
-  justify-content: space-around;
-}
-.ttileStyle {
-  font-size: 12px;
-}
-.countStyle {
-  font-size: 20px;
-  margin: 0 10px;
-}
-.el-date-editor--datetimerange.el-input,
-.el-date-editor--datetimerange.el-input__inner{
-  width: 340px;
-}
-</style>
diff --git a/src/views/dashboard/components/AlarmByDays.vue b/src/views/dashboard/components/AlarmByDays.vue
index 6b839d3..bd8228e 100644
--- a/src/views/dashboard/components/AlarmByDays.vue
+++ b/src/views/dashboard/components/AlarmByDays.vue
@@ -1,5 +1,5 @@
 <template>
-  <ve-line :data="chartData" :title="title" :settings="chartSettings" />
+  <ve-line :data="chartData" :title="title" :extend="extend" :settings="chartSettings" />
 </template>
 
 <script>
@@ -9,27 +9,33 @@
 export default {
   name: 'AlarmByDays',
   data() {
-    this.title = {
-      text: '7日报警趋势'
-    }
-    this.chartSettings = {
-      labelMap: {
-        'alarmWells': '报警井数',
-        'alarmTimes': '报警次数'
-      },
-      metrics: ['alarmTimes', 'alarmWells'],
-      dimension: ['date']
-    }
     return {
+      title: {
+        text: '7日报警趋势'
+      },
+      chartSettings: {
+        labelMap: {
+          'alarmWells': '报警井数',
+          'alarmTimes': '报警次数'
+        },
+        metrics: ['alarmTimes', 'alarmWells'],
+        dimension: ['date']
+      },
+      extend: {
+        yAxis: {
+          type: 'value',
+          minInterval: 1
+        }
+      },
       listQuery: {
         deviceType: '',
         beginTime: '',
         endTime: ''
-      },
+      }, // 查询条件
       chartData: {
         columns: ['date', 'alarmTimes', 'alarmWells'],
         rows: []
-      }
+      } // 数据
     }
   },
   mounted() {
@@ -52,6 +58,14 @@
       this.listQuery.endTime = endTime
       alarmStaticByDay(this.listQuery).then(response => {
         this.chartData.rows = response.data
+        const maxValue = Math.max.apply(Math, response.data.map(function(item) {
+          return parseInt(item.alarmTimes)
+        }))
+        if (maxValue < 10) {
+          this.extend.yAxis = { type: 'value', minInterval: 1, max: 10 }
+        } else {
+          this.extend.yAxis = { type: 'value', minInterval: 1 }
+        }
       })
     }
   }
diff --git a/src/views/dashboard/components/JobByStatus.vue b/src/views/dashboard/components/JobByStatus.vue
index 7502e17..66feacc 100644
--- a/src/views/dashboard/components/JobByStatus.vue
+++ b/src/views/dashboard/components/JobByStatus.vue
@@ -1,5 +1,5 @@
 <template>
-  <ve-bar :data="chartData" :title="title" :settings="chartSettings" />
+  <ve-bar :data="chartData" :title="title" :extend="extend" :settings="chartSettings" />
 </template>
 
 <script>
@@ -9,22 +9,31 @@
 export default {
   name: 'JobByStatus',
   data() {
-    this.title = {
-      text: '30日工单数量统计'
-    }
-    this.chartSettings = {
-      labelMap: {
-        'deptName': '权属单位',
-        'beforeGet': '待处理',
-        'beforeConfirm': '待确认',
-        'inHandle': '处理中',
-        'over': '已完成'
-      },
-      stack: {
-        'xxx': ['beforeGet', 'beforeConfirm', 'inHandle', 'over']
-      }
-    }
     return {
+      title: {
+        text: '30日工单数量统计'
+      },
+      chartSettings: {
+        labelMap: {
+          'deptName': '权属单位',
+          'beforeGet': '待处理',
+          'beforeConfirm': '待确认',
+          'inHandle': '处理中',
+          'over': '已完成'
+        },
+        stack: {
+          'xxx': ['beforeGet', 'beforeConfirm', 'inHandle', 'over']
+        }
+      },
+      extend: {
+        xAxis: {
+          type: 'value',
+          minInterval: 1
+        },
+        series: {
+          barMaxWidth: 35
+        }
+      },
       chartData: {
         columns: ['deptName', 'beforeGet', 'beforeConfirm', 'inHandle', 'over'],
         rows: []
@@ -54,6 +63,14 @@
       }
       jobStaticsByDept(listQuery).then(response => {
         this.chartData.rows = response.data
+        const maxValue = Math.max.apply(Math, response.data.map(function(item) {
+          return parseInt(item.beforeGet) + parseInt(item.beforeConfirm) + parseInt(item.inHandle) + parseInt(item.over)
+        }))
+        if (maxValue < 10) {
+          this.extend.xAxis = { type: 'value', minInterval: 1, max: 10 }
+        } else {
+          this.extend.xAxis = { type: 'value', minInterval: 1 }
+        }
       })
     }
   }
diff --git a/src/views/dashboard/index.vue b/src/views/dashboard/index.vue
index 7f228d3..f96a2a2 100644
--- a/src/views/dashboard/index.vue
+++ b/src/views/dashboard/index.vue
@@ -17,7 +17,7 @@
       <!--设备数量统计-->
       <el-col v-if="hasPerm('/statics/deviceStaticsByType')" :span="14">
         <el-card shadow="never">
-          <device-count />
+          <device-count-by-type-bar chart-title="设备数量统计" />
         </el-card>
       </el-col>
       <!--设备在线情况统计-->
@@ -51,10 +51,12 @@
 import DeviceCountByOnline from './components/DeviceCountByOnline'
 import AlarmByDays from './components/AlarmByDays'
 import JobByStatus from './components/JobByStatus'
+import DeviceCountByTypeBar from '@/views/staticCharts/DeviceCountByTypeBar'
 
 export default {
   name: 'Dashboard',
   components: {
+    DeviceCountByTypeBar,
     JobByStatus,
     AlarmByDays,
     PanelGroup,
diff --git a/src/views/dataView/components/alarmAnalysis.vue b/src/views/dataView/components/alarmAnalysis.vue
new file mode 100644
index 0000000..ece3c81
--- /dev/null
+++ b/src/views/dataView/components/alarmAnalysis.vue
@@ -0,0 +1,123 @@
+<!--报警分析-->
+<template>
+  <panel-card title="报警分析">
+    <template slot="func">
+      <el-col :span="16">
+        <el-date-picker
+          v-model="timeRange"
+          type="datetimerange"
+          range-separator="至"
+          size="small"
+          value-format="yyyy-MM-dd HH:mm:ss"
+          start-placeholder="开始时间"
+          end-placeholder="结束时间"
+          @change="refresh"
+        />
+      </el-col>
+    </template>
+    <div class="flex-container">
+      <div class="flex-left">
+        <ve-line
+          :data="chartData"
+          :settings="chartSettingsLine"
+        />
+      </div>
+      <div class="flex-right">
+        <el-table border :data="tableList" stripe empty-text="无报警" height="340">
+          <el-table-column prop="name" label="报警类型" align="center" />
+          <el-table-column prop="value" label="报警数量" align="center" />
+        </el-table>
+      </div>
+    </div>
+  </panel-card>
+</template>
+
+<script>
+import { alarmStaticByDay, alarmStaticsByContent } from '@/api/data/dataStatics'
+import PanelCard from '@/components/BigData/Card/panelCard'
+import { getSearchLastWeekTime } from '@/utils/dateutils'
+
+export default {
+  name: 'AlarmAnalysis',
+  components: { PanelCard },
+  data() {
+    return {
+      listQuery: {
+        deviceType: '',
+        beginTime: '',
+        endTime: ''
+      }, // 查询条件
+      timeRange: [], // 时间范围
+      tableList: [], // 列表
+      // 折线图
+      chartSettingsLine: {
+        labelMap: {
+          'date': '日期',
+          'alarmTimes': '报警次数'
+        },
+        dimension: ['date']
+      }, // 配置
+      chartData: {
+        columns: ['date', 'alarmTimes'],
+        rows: []
+      } // 折线图数据
+    }
+  },
+  created() {
+    this.timeRange = getSearchLastWeekTime()
+    this.refresh()
+  },
+  methods: {
+    refresh() {
+      this.handleDateTime()
+      this.fetchAlarmByDay()
+      this.fetchAlarmByContent()
+    },
+    // 获取各类报警的列表
+    fetchAlarmByContent() {
+      alarmStaticsByContent(this.listQuery).then(response => {
+        this.tableList = response.data
+      })
+    },
+    // 获取每日报警数
+    fetchAlarmByDay() {
+      // 模拟数据
+      // this.chartData.rows = [
+      //   { 'date': '9月20日', 'alarmTimes': 153, 'alarmWells': 43 },
+      //   { 'date': '9月21日', 'alarmTimes': 150, 'alarmWells': 30 },
+      //   { 'date': '9月22日', 'alarmTimes': 143, 'alarmWells': 23 },
+      //   { 'date': '9月23日', 'alarmTimes': 173, 'alarmWells': 23 },
+      //   { 'date': '9月24日', 'alarmTimes': 272, 'alarmWells': 52 },
+      //   { 'date': '9月25日', 'alarmTimes': 253, 'alarmWells': 53 }
+      // ]
+      alarmStaticByDay(this.listQuery).then(response => {
+        this.chartData.rows = response.data
+      })
+    },
+    // 处理时间
+    handleDateTime() {
+      if (this.timeRange && this.timeRange.length > 0) {
+        this.listQuery.beginTime = this.timeRange[0]
+        this.listQuery.endTime = this.timeRange[1]
+      } else {
+        this.listQuery.beginTime = ''
+        this.listQuery.endTime = ''
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.flex-container{
+  display: flex;
+  .flex-left{
+    flex:1;
+  }
+  .flex-right{
+    width: 260px;
+    padding: 10px 20px;
+  }
+}
+
+</style>
diff --git a/src/views/dataView/components/alarmView.vue b/src/views/dataView/components/alarmView.vue
deleted file mode 100644
index e13f811..0000000
--- a/src/views/dataView/components/alarmView.vue
+++ /dev/null
@@ -1,124 +0,0 @@
-<!--报警分析-->
-<template>
-  <panel-card title="报警分析">
-    <template slot="func">
-      <el-col :span="16">
-        <el-date-picker
-          v-model="timeRange"
-          type="datetimerange"
-          range-separator="至"
-          size="small"
-          :picker-options="pickerOptions"
-          value-format="yyyy-MM-dd HH:mm:ss"
-          start-placeholder="开始时间"
-          end-placeholder="结束时间"
-          @change="refresh"
-        />
-      </el-col>
-    </template>
-    <div class="flex-container">
-      <div class="flex-left">
-        <ve-line
-          :data="chartData"
-          :settings="chartSettingsLine"
-        />
-      </div>
-      <div class="flex-right">
-        <el-table border :data="tableList" stripe empty-text="无报警" height="340">
-          <el-table-column prop="name" label="报警类型" align="center" />
-          <el-table-column prop="value" label="报警数量" align="center" />
-        </el-table>
-      </div>
-    </div>
-  </panel-card>
-</template>
-
-<script>
-import { alarmStaticByDay, alarmStaticsByContent } from '@/api/data/dataStatics'
-import PanelCard from '@/components/BigData/Card/panelCard'
-import { getSearchLastWeekTime } from '@/utils/dateutils'
-
-export default {
-  name: 'AlarmStaticsByType',
-  components: { PanelCard },
-  data() {
-    return {
-      listQuery: {
-        deviceType: '',
-        beginTime: '',
-        endTime: ''
-      }, // 查询条件
-      timeRange: [], // 时间范围
-      tableList: [], // 列表
-      // 折线图
-      chartSettingsLine: {
-        labelMap: {
-          'date': '日期',
-          'alarmTimes': '报警次数'
-        },
-        dimension: ['date']
-      }, // 配置
-      chartData: {
-        columns: ['date', 'alarmTimes'],
-        rows: []
-      } // 折线图数据
-    }
-  },
-  created() {
-    this.timeRange = getSearchLastWeekTime()
-    this.refresh()
-  },
-  methods: {
-    refresh() {
-      this.handleDateTime()
-      this.fetchAlarmByDay()
-      this.fetchAlarmByContent()
-    },
-    // 获取各类报警的列表
-    fetchAlarmByContent() {
-      alarmStaticsByContent(this.listQuery).then(response => {
-        this.tableList = response.data
-      })
-    },
-    // 获取每日报警数
-    fetchAlarmByDay() {
-      // 模拟数据
-      // this.chartData.rows = [
-      //   { 'date': '9月20日', 'alarmTimes': 153, 'alarmWells': 43 },
-      //   { 'date': '9月21日', 'alarmTimes': 150, 'alarmWells': 30 },
-      //   { 'date': '9月22日', 'alarmTimes': 143, 'alarmWells': 23 },
-      //   { 'date': '9月23日', 'alarmTimes': 173, 'alarmWells': 23 },
-      //   { 'date': '9月24日', 'alarmTimes': 272, 'alarmWells': 52 },
-      //   { 'date': '9月25日', 'alarmTimes': 253, 'alarmWells': 53 }
-      // ]
-      alarmStaticByDay(this.listQuery).then(response => {
-        this.chartData.rows = response.data
-      })
-    },
-    // 处理时间
-    handleDateTime() {
-      if (this.timeRange && this.timeRange.length > 0) {
-        this.listQuery.beginTime = this.timeRange[0]
-        this.listQuery.endTime = this.timeRange[1]
-      } else {
-        this.listQuery.beginTime = ''
-        this.listQuery.endTime = ''
-      }
-    }
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-.flex-container{
-  display: flex;
-  .flex-left{
-    flex:1;
-  }
-  .flex-right{
-    width: 260px;
-    padding: 10px 20px;
-  }
-}
-
-</style>
diff --git a/src/views/dataView/components/alarmWellRank.vue b/src/views/dataView/components/alarmWellRank.vue
new file mode 100644
index 0000000..d680921
--- /dev/null
+++ b/src/views/dataView/components/alarmWellRank.vue
@@ -0,0 +1,100 @@
+<template>
+  <panel-card title="异常点位排名">
+    <template slot="func">
+      <time-buttons @change="changeTime" />
+      <el-select v-model="listQuery.alarmContent" placeholder="告警内容" clearable size="small" @change="fetchData">
+        <el-option
+          v-for="item in alarmContentTypeList"
+          :key="item.value"
+          :label="item.name"
+          :value="item.value"
+        />
+      </el-select>
+    </template>
+    <el-table :data="list" stripe empty-text="无异常点位" height="368">
+      <el-table-column type="index" width="50" align="center" />
+      <el-table-column prop="wellCode" label="点位编号" align="center" />
+      <el-table-column prop="position" label="详细地址" align="center" />
+      <el-table-column prop="alarmCount" label="报警次数" align="center" />
+      <el-table-column prop="count" label="报警设备数" align="center" />
+    </el-table>
+  </panel-card>
+</template>
+
+<script>
+import PanelCard from '@/components/BigData/Card/panelCard'
+import { alarmWellRank } from '@/api/data/dataStatics'
+import { getAlarmContentType } from '@/api/alarm/alarm'
+import TimeButtons from '@/components/BigData/TimeButtons'
+export default {
+  name: 'AlarmWellRank',
+  components: { TimeButtons, PanelCard },
+  data() {
+    return {
+      listQuery: {
+        alarmContent: '', // 报警内容
+        beginTime: '', // 开始时间
+        endTime: '' // 结束时间
+      }, // 查询结果
+      alarmContentTypeList: [],
+      list: [
+        { wellCode: 'aaaa', position: '中关村南大街5号院', alarmCount: 5, count: 0 },
+        { wellCode: 'aaaa', position: '中关村南大街5号院', alarmCount: 5, count: 0 },
+        { wellCode: 'aaaa', position: '中关村南大街5号院', alarmCount: 5, count: 0 },
+        { wellCode: 'aaaa', position: '中关村南大街5号院', alarmCount: 5, count: 0 },
+        { wellCode: 'aaaa', position: '中关村南大街5号院', alarmCount: 5, count: 0 },
+        { wellCode: 'aaaa', position: '中关村南大街5号院', alarmCount: 5, count: 0 },
+        { wellCode: 'aaaa', position: '中关村南大街5号院', alarmCount: 5, count: 0 },
+        { wellCode: 'aaaa', position: '中关村南大街5号院', alarmCount: 5, count: 0 },
+        { wellCode: 'aaaa', position: '中关村南大街5号院', alarmCount: 5, count: 0 },
+        { wellCode: 'aaaa', position: '中关村南大街5号院', alarmCount: 5, count: 0 }
+      ],
+      total: 0
+    }
+  },
+  created() {
+    this.fetchAlarmContentType()
+    this.fetchData()
+  },
+  methods: {
+    // 获取排名列表
+    fetchData() {
+      alarmWellRank(this.listQuery).then(res => {
+        this.list = res.data.rows
+        this.total = res.data.total
+      })
+    },
+    // 时间切换
+    changeTime(timeRange) {
+      this.handleDateTime()
+      this.fetchData()
+    },
+    // 获取告警内容类别
+    fetchAlarmContentType() {
+      this.alarmContentTypeList = []
+      getAlarmContentType('1').then(response => {
+        const supportDeviceTypes = this.$store.getters.deviceTypes
+        for (const item of response.data.list) {
+          if (supportDeviceTypes.indexOf(item.deviceType) !== -1) {
+            this.alarmContentTypeList.push(item)
+          }
+        }
+      })
+    },
+    // 处理时间
+    handleDateTime() {
+      if (this.timeRange && this.timeRange.length > 0) {
+        this.listQuery.beginTime = this.timeRange[0]
+        this.listQuery.endTime = this.timeRange[1]
+      } else {
+        this.listQuery.beginTime = ''
+        this.listQuery.endTime = ''
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/views/dataView/dataView.vue b/src/views/dataView/dataView.vue
index b627e4a..f890263 100644
--- a/src/views/dataView/dataView.vue
+++ b/src/views/dataView/dataView.vue
@@ -9,7 +9,7 @@
     </el-row>
     <el-row style="margin-top:10px" gutter="10">
       <el-col :span="12">
-        <alarm-view />
+        <alarm-analysis />
       </el-col>
       <el-col :span="12">
         <job-analysis />
@@ -30,15 +30,13 @@
 
 <script>
 import panelGroup from './components/panelGroup'
-import alarmStatus from './components/jobAnalysis'
 import wellCountView from './components/wellCountView'
 import deviceCountView from './components/deviceCountView'
-import alarmView from './components/alarmView'
-import JobByStatus from '@/views/dashboard/components/JobByStatus'
 import JobAnalysis from '@/views/dataView/components/jobAnalysis'
+import AlarmAnalysis from '@/views/dataView/components/alarmAnalysis'
 export default {
   name: 'DataView',
-  components: { JobAnalysis, JobByStatus, panelGroup, alarmStatus, wellCountView, deviceCountView, alarmView }
+  components: { AlarmAnalysis, JobAnalysis, panelGroup, wellCountView, deviceCountView }
 }
 </script>
 
diff --git a/src/views/deviceStatics/components/deviceCountByType.vue b/src/views/deviceStatics/components/deviceCountByType.vue
index 7564d6e..f062c1f 100644
--- a/src/views/deviceStatics/components/deviceCountByType.vue
+++ b/src/views/deviceStatics/components/deviceCountByType.vue
@@ -3,22 +3,10 @@
     <panel-card title="设备总体情况">
       <el-row :gutter="20" style="padding: 15px 10px">
         <el-col :span="12">
-          <el-card shadow="never">
-            <div>
-              <span class="card-title">设备总数</span>
-              <span class="card-value">{{ allDevice }}</span>
-              <span class="card-unit">个</span>
-            </div>
-          </el-card>
+          <simple-card title="设备总数" :context="allDevice" unit="个" />
         </el-col>
         <el-col :span="12">
-          <el-card shadow="never">
-            <div>
-              <span class="card-title">低电量设备总数</span>
-              <span class="card-value">{{ lowPowerDevice }}</span>
-              <span>个</span>
-            </div>
-          </el-card>
+          <simple-card title="低电量设备总数" :context="lowPowerDevice" unit="个" />
         </el-col>
       </el-row>
     </panel-card>
@@ -32,9 +20,10 @@
 import { deviceStaticByStatus, deviceStaticsByType } from '@/api/data/dataStatics'
 import PanelCard from '@/components/BigData/Card/panelCard'
 import DeviceCountByTypeBar from '@/views/staticCharts/DeviceCountByTypeBar'
+import SimpleCard from '@/components/BigData/Card/simpleCard'
 export default {
   name: 'DeviceCountByType',
-  components: { DeviceCountByTypeBar, PanelCard },
+  components: { SimpleCard, DeviceCountByTypeBar, PanelCard },
   data() {
     return {
       allDevice: 0, // 总设备数
@@ -71,12 +60,5 @@
 </script>
 
 <style rel="stylesheet/scss" lang="scss" scoped>
-.card-title {
-  font-size: 16px;
-}
-.card-value {
-  font-size: 20px;
-  font-weight: bold ;
-  margin: 0 10px;
-}
+
 </style>

diff --git a/src/api/alarm/deviceStatics.js b/src/api/alarm/deviceStatics.js
index 7afcd4f..c375ac5 100644
--- a/src/api/alarm/deviceStatics.js
+++ b/src/api/alarm/deviceStatics.js
@@ -3,15 +3,6 @@
  */
 import request from '@/utils/request'
 
-// 报警情况统计
-export function deviceStaticsByDept(params) {
-  return request({
-    url: 'statics/alarmStaticsByStatus',
-    method: 'get',
-    params
-  })
-}
-
 // 报警设备查询
 export function getDeviceAlarmList(params) {
   return request({
diff --git a/src/api/data/dataStatics.js b/src/api/data/dataStatics.js
index bbe9263..56a1ea4 100644
--- a/src/api/data/dataStatics.js
+++ b/src/api/data/dataStatics.js
@@ -143,3 +143,12 @@
     params
   })
 }
+
+// 报警的井排名
+export function alarmWellRank(params) {
+  return request({
+    url: '/statics/alarmWellListPage',
+    method: 'get',
+    params
+  })
+}
diff --git a/src/views/alarmStatics/alarmStatics.vue b/src/views/alarmStatics/alarmStatics.vue
index 22c8798..7c2d2e8 100644
--- a/src/views/alarmStatics/alarmStatics.vue
+++ b/src/views/alarmStatics/alarmStatics.vue
@@ -1,13 +1,23 @@
 <template>
-  <el-row>
+  <el-row :gutter="10">
     <el-col :span="10">
-      <el-card shadow="never">
-        <div />
-        <alarm-statics-by-type />
-      </el-card>
+      <panel-card title="报警总体情况">
+        <el-row :gutter="20" style="padding: 15px 10px">
+          <el-col :span="12">
+            <simple-card title="正在报警" :context="alarmNow" unit="个" />
+          </el-col>
+          <el-col :span="12">
+            <simple-card title="今日报警" :context="todayAlarm" unit="个" />
+          </el-col>
+        </el-row>
+      </panel-card>
+      <!--报警井排名-->
+      <alarm-well-rank style="margin-top:10px" />
+      <!--报警内容统计-->
+      <alarm-statics-by-content style="margin-top:10px" />
     </el-col>
     <el-col :span="14">
-      <alarm-history-by-type />
+      <alarm-analysis />
     </el-col>
     <el-col :span="14">
       <alarm-statics-by-dept />
@@ -16,16 +26,32 @@
 </template>
 
 <script>
-import alarmStaticsByType from './components/alarmStaticsByType'
-import alarmHistoryByType from './components/alarmHistoryByType'
+
 import alarmStaticsByDept from './components/alarmStaticsByDept'
+import AlarmAnalysis from '@/views/dataView/components/alarmAnalysis'
+import PanelCard from '@/components/BigData/Card/panelCard'
+import SimpleCard from '@/components/BigData/Card/simpleCard'
+import { getSearchLastWeekTime } from '@/utils/dateutils'
+import AlarmWellRank from '@/views/dataView/components/alarmWellRank'
+import AlarmStaticsByContent from '@/views/alarmStatics/components/alarmStaticsByContent'
 export default {
-  name: 'DeviceStatics',
+  name: 'AlarmStatics',
   components: {
-    alarmStaticsByType,
-    alarmHistoryByType,
+    AlarmStaticsByContent,
+    AlarmWellRank,
+    SimpleCard,
+    PanelCard,
+    AlarmAnalysis,
     alarmStaticsByDept
+  },
+  data() {
+    return {
+      alarmNow: 0,
+      todayAlarm: 0
+
+    }
   }
+
 }
 </script>
 
diff --git a/src/views/alarmStatics/components/alarmStaticsByContent.vue b/src/views/alarmStatics/components/alarmStaticsByContent.vue
new file mode 100644
index 0000000..b165841
--- /dev/null
+++ b/src/views/alarmStatics/components/alarmStaticsByContent.vue
@@ -0,0 +1,47 @@
+<template>
+  <panel-card title="各类报警统计">
+    <template slot="func">
+      <el-col :span="16">
+        <el-date-picker
+          v-model="timeRange"
+          type="datetimerange"
+          range-separator="至"
+          size="small"
+          value-format="yyyy-MM-dd HH:mm:ss"
+          start-placeholder="开始时间"
+          end-placeholder="结束时间"
+        />
+      </el-col>
+    </template>
+    <alarm-statics-by-type :time-range="timeRange" />
+  </panel-card>
+</template>
+
+<script>
+import PanelCard from '@/components/BigData/Card/panelCard'
+import alarmStaticsByType from '@/views/staticCharts/AlarmStaticsByType'
+import { getSearchLastWeekTime } from '@/utils/dateutils'
+export default {
+  name: 'AlarmStaticsByContent',
+  components: {
+    alarmStaticsByType, PanelCard
+  },
+  data() {
+    return {
+      timeRange: []
+    }
+  },
+  created() {
+    this.timeRange = getSearchLastWeekTime()
+  },
+  methods: {
+    refresh() {
+
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/views/alarmStatics/components/alarmStaticsByType.vue b/src/views/alarmStatics/components/alarmStaticsByType.vue
deleted file mode 100644
index 7e17365..0000000
--- a/src/views/alarmStatics/components/alarmStaticsByType.vue
+++ /dev/null
@@ -1,276 +0,0 @@
-<template>
-  <el-row>
-    <el-col>
-      <el-col>
-        <div class="flagBoxStyle">
-          <div class="flagStyle" />
-          <div>报警总体情况</div>
-        </div>
-      </el-col>
-      <el-col class="cardStyle">
-        <el-col :span="10">
-          <el-card>
-            <div>
-              <span class="ttileStyle">正在报警</span>
-              <span class="countStyle">123</span>
-              <span>个</span>
-            </div>
-          </el-card>
-        </el-col>
-        <el-col :span="10">
-          <el-card>
-            <div>
-              <span class="ttileStyle">今日报警</span>
-              <span class="countStyle">123</span>
-              <span>个</span>
-            </div>
-          </el-card>
-        </el-col>
-      </el-col>
-      <el-col>
-        <el-col :span="8">
-          <div class="flagBoxStyle">
-            <div class="flagStyle" />
-            <div>各类报警统计</div>
-          </div>
-        </el-col>
-        <el-col :span="16">
-          <el-date-picker
-            v-model="timeRange1"
-            type="datetimerange"
-            range-separator="至"
-            size="small"
-            :picker-options="pickerOptions1"
-            value-format="yyyy-MM-dd HH:mm:ss"
-            start-placeholder="开始时间"
-            end-placeholder="结束时间"
-            @change="fetchDeviceTypeBar"
-          />
-        </el-col>
-      </el-col>
-      <el-col>
-        <ve-histogram
-          :data="chartData"
-          :grid="grid"
-          :extend="extend"
-          :settings="chartSettings"
-        />
-      </el-col>
-      <el-col>
-        <el-col :span="8">
-          <div class="flagBoxStyle">
-            <div class="flagStyle" />
-            <div>报警趋势统计</div>
-          </div>
-        </el-col>
-        <el-col :span="16">
-          <el-date-picker
-            v-model="timeRange2"
-            type="datetimerange"
-            range-separator="至"
-            size="small"
-            :picker-options="pickerOptions2"
-            value-format="yyyy-MM-dd HH:mm:ss"
-            start-placeholder="开始时间"
-            end-placeholder="结束时间"
-            @change="fetchDeviceTypeLine"
-          />
-        </el-col>
-      </el-col>
-      <el-col>
-        <ve-line
-          :data="chartDataLine"
-          :settings="chartSettingsLine"
-        />
-      </el-col>
-    </el-col>
-  </el-row>
-</template>
-
-<script>
-import { deviceStaticsByDept } from '@/api/alarm/deviceStatics'
-import { alarmStaticsByContent } from '@/api/alarm/deviceStatics'
-export default {
-  name: 'AlarmStaticsByType',
-  data() {
-    return {
-      // 柱状图搜索条件
-      timeRange1: '',
-      timeRange2: '',
-      listQuery: {
-        startTime: '',
-        endTime: '',
-        alarmType: ''
-      },
-      pickerOptions1: {
-        shortcuts: [{
-          text: '最近一周',
-          onClick(picker) {
-            const end = new Date()
-            const start = new Date()
-            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
-            picker.$emit('pick', [start, end])
-          }
-        }, {
-          text: '最近一个月',
-          onClick(picker) {
-            const end = new Date()
-            const start = new Date()
-            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
-            picker.$emit('pick', [start, end])
-          }
-        }, {
-          text: '最近三个月',
-          onClick(picker) {
-            const end = new Date()
-            const start = new Date()
-            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
-            picker.$emit('pick', [start, end])
-          }
-        }]
-      },
-      // 折线图搜索条件
-      listStatue: {
-        startTime: '',
-        endTime: '',
-        alarmType: ''
-      },
-      pickerOptions2: {
-        shortcuts: [{
-          text: '最近一周',
-          onClick(picker) {
-            const end = new Date()
-            const start = new Date()
-            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
-            picker.$emit('pick', [start, end])
-          }
-        }, {
-          text: '最近一个月',
-          onClick(picker) {
-            const end = new Date()
-            const start = new Date()
-            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
-            picker.$emit('pick', [start, end])
-          }
-        }, {
-          text: '最近三个月',
-          onClick(picker) {
-            const end = new Date()
-            const start = new Date()
-            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
-            picker.$emit('pick', [start, end])
-          }
-        }]
-      },
-      // 折线图
-      chartSettingsLine: {
-        labelMap: {
-          'alarmWellData': '井盖开盖报警',
-          'alarmLiquidData': '液位超限报警',
-          'alarmHarmfulData': '有害气体超标报警'
-        },
-        metrics: ['alarmWellData', 'alarmLiquidData', 'alarmHarmfulData'],
-        dimension: ['date']
-      },
-      chartDataLine: {
-        columns: ['date', 'alarmWellData', 'alarmLiquidData', 'alarmHarmfulData'],
-        rows: []
-      },
-      // 柱状图
-      extend: {
-        xAxis: {
-          axisLabel: {
-            rotate: 30,
-            margin: 30,
-            textStyle: {
-              align: 'center'
-            }
-          }
-        },
-        series: {
-          label: { show: true, position: 'top' },
-          barMaxWidth: 35 // 最大柱宽度
-        }
-      },
-      grid: {
-        right: 60
-      },
-      chartSettings: {
-        itemStyle: {
-          'barCategoryGap': 5
-        },
-        barWidth: 15,
-        labelMap: {
-          'alarmContent': '报警内容',
-          'totalAlarm': '报警数量',
-          'cancelAlarm': '消警数量'
-        },
-        dimension: ['alarmContent'],
-        metrics: ['totalAlarm', 'cancelAlarm']
-      },
-      chartData: {
-        columns: ['alarmContent', 'totalAlarm', 'cancelAlarm'],
-        rows: []
-      }
-    }
-  },
-  created() {
-    this.fetchDeviceTypeBar()
-    this.fetchDeviceTypeLine()
-  },
-  methods: {
-    fetchDeviceTypeBar(val) {
-      if (val !== undefined) {
-        this.listQuery.startTime = val[0]
-        this.listQuery.endTime = val[1]
-      }
-      deviceStaticsByDept(this.listQuery).then(response => {
-        this.chartData.rows = response.data
-      })
-    },
-    fetchDeviceTypeLine(val) {
-      if (val !== undefined) {
-        this.listQuery.startTime = val[0]
-        this.listQuery.endTime = val[1]
-      }
-      alarmStaticsByContent(this.listStatue).then(response => {
-        console.log(response.data, '===123')
-        this.chartDataLine.rows = response.data
-      })
-    }
-  }
-}
-</script>
-
-<style rel="stylesheet/scss" lang="scss" scoped>
-.flagBoxStyle {
-  display: flex;
-  margin-bottom: 20px;
-}
-.flagBoxStyle div:nth-child(2){
-  line-height: 30px;
-  font-weight: 600;
-}
-.flagStyle {
-  width: 4px;
-  height: 30px;
-  margin-right: 6px;
-  background: rgb(64 121 242);
-}
-.cardStyle {
-  display:flex;
-  margin-bottom: 60px;
-  justify-content: space-around;
-}
-.ttileStyle {
-  font-size: 12px;
-}
-.countStyle {
-  font-size: 20px;
-  margin: 0 10px;
-}
-.el-date-editor--datetimerange.el-input,
-.el-date-editor--datetimerange.el-input__inner{
-  width: 340px;
-}
-</style>
diff --git a/src/views/dashboard/components/AlarmByDays.vue b/src/views/dashboard/components/AlarmByDays.vue
index 6b839d3..bd8228e 100644
--- a/src/views/dashboard/components/AlarmByDays.vue
+++ b/src/views/dashboard/components/AlarmByDays.vue
@@ -1,5 +1,5 @@
 <template>
-  <ve-line :data="chartData" :title="title" :settings="chartSettings" />
+  <ve-line :data="chartData" :title="title" :extend="extend" :settings="chartSettings" />
 </template>
 
 <script>
@@ -9,27 +9,33 @@
 export default {
   name: 'AlarmByDays',
   data() {
-    this.title = {
-      text: '7日报警趋势'
-    }
-    this.chartSettings = {
-      labelMap: {
-        'alarmWells': '报警井数',
-        'alarmTimes': '报警次数'
-      },
-      metrics: ['alarmTimes', 'alarmWells'],
-      dimension: ['date']
-    }
     return {
+      title: {
+        text: '7日报警趋势'
+      },
+      chartSettings: {
+        labelMap: {
+          'alarmWells': '报警井数',
+          'alarmTimes': '报警次数'
+        },
+        metrics: ['alarmTimes', 'alarmWells'],
+        dimension: ['date']
+      },
+      extend: {
+        yAxis: {
+          type: 'value',
+          minInterval: 1
+        }
+      },
       listQuery: {
         deviceType: '',
         beginTime: '',
         endTime: ''
-      },
+      }, // 查询条件
       chartData: {
         columns: ['date', 'alarmTimes', 'alarmWells'],
         rows: []
-      }
+      } // 数据
     }
   },
   mounted() {
@@ -52,6 +58,14 @@
       this.listQuery.endTime = endTime
       alarmStaticByDay(this.listQuery).then(response => {
         this.chartData.rows = response.data
+        const maxValue = Math.max.apply(Math, response.data.map(function(item) {
+          return parseInt(item.alarmTimes)
+        }))
+        if (maxValue < 10) {
+          this.extend.yAxis = { type: 'value', minInterval: 1, max: 10 }
+        } else {
+          this.extend.yAxis = { type: 'value', minInterval: 1 }
+        }
       })
     }
   }
diff --git a/src/views/dashboard/components/JobByStatus.vue b/src/views/dashboard/components/JobByStatus.vue
index 7502e17..66feacc 100644
--- a/src/views/dashboard/components/JobByStatus.vue
+++ b/src/views/dashboard/components/JobByStatus.vue
@@ -1,5 +1,5 @@
 <template>
-  <ve-bar :data="chartData" :title="title" :settings="chartSettings" />
+  <ve-bar :data="chartData" :title="title" :extend="extend" :settings="chartSettings" />
 </template>
 
 <script>
@@ -9,22 +9,31 @@
 export default {
   name: 'JobByStatus',
   data() {
-    this.title = {
-      text: '30日工单数量统计'
-    }
-    this.chartSettings = {
-      labelMap: {
-        'deptName': '权属单位',
-        'beforeGet': '待处理',
-        'beforeConfirm': '待确认',
-        'inHandle': '处理中',
-        'over': '已完成'
-      },
-      stack: {
-        'xxx': ['beforeGet', 'beforeConfirm', 'inHandle', 'over']
-      }
-    }
     return {
+      title: {
+        text: '30日工单数量统计'
+      },
+      chartSettings: {
+        labelMap: {
+          'deptName': '权属单位',
+          'beforeGet': '待处理',
+          'beforeConfirm': '待确认',
+          'inHandle': '处理中',
+          'over': '已完成'
+        },
+        stack: {
+          'xxx': ['beforeGet', 'beforeConfirm', 'inHandle', 'over']
+        }
+      },
+      extend: {
+        xAxis: {
+          type: 'value',
+          minInterval: 1
+        },
+        series: {
+          barMaxWidth: 35
+        }
+      },
       chartData: {
         columns: ['deptName', 'beforeGet', 'beforeConfirm', 'inHandle', 'over'],
         rows: []
@@ -54,6 +63,14 @@
       }
       jobStaticsByDept(listQuery).then(response => {
         this.chartData.rows = response.data
+        const maxValue = Math.max.apply(Math, response.data.map(function(item) {
+          return parseInt(item.beforeGet) + parseInt(item.beforeConfirm) + parseInt(item.inHandle) + parseInt(item.over)
+        }))
+        if (maxValue < 10) {
+          this.extend.xAxis = { type: 'value', minInterval: 1, max: 10 }
+        } else {
+          this.extend.xAxis = { type: 'value', minInterval: 1 }
+        }
       })
     }
   }
diff --git a/src/views/dashboard/index.vue b/src/views/dashboard/index.vue
index 7f228d3..f96a2a2 100644
--- a/src/views/dashboard/index.vue
+++ b/src/views/dashboard/index.vue
@@ -17,7 +17,7 @@
       <!--设备数量统计-->
       <el-col v-if="hasPerm('/statics/deviceStaticsByType')" :span="14">
         <el-card shadow="never">
-          <device-count />
+          <device-count-by-type-bar chart-title="设备数量统计" />
         </el-card>
       </el-col>
       <!--设备在线情况统计-->
@@ -51,10 +51,12 @@
 import DeviceCountByOnline from './components/DeviceCountByOnline'
 import AlarmByDays from './components/AlarmByDays'
 import JobByStatus from './components/JobByStatus'
+import DeviceCountByTypeBar from '@/views/staticCharts/DeviceCountByTypeBar'
 
 export default {
   name: 'Dashboard',
   components: {
+    DeviceCountByTypeBar,
     JobByStatus,
     AlarmByDays,
     PanelGroup,
diff --git a/src/views/dataView/components/alarmAnalysis.vue b/src/views/dataView/components/alarmAnalysis.vue
new file mode 100644
index 0000000..ece3c81
--- /dev/null
+++ b/src/views/dataView/components/alarmAnalysis.vue
@@ -0,0 +1,123 @@
+<!--报警分析-->
+<template>
+  <panel-card title="报警分析">
+    <template slot="func">
+      <el-col :span="16">
+        <el-date-picker
+          v-model="timeRange"
+          type="datetimerange"
+          range-separator="至"
+          size="small"
+          value-format="yyyy-MM-dd HH:mm:ss"
+          start-placeholder="开始时间"
+          end-placeholder="结束时间"
+          @change="refresh"
+        />
+      </el-col>
+    </template>
+    <div class="flex-container">
+      <div class="flex-left">
+        <ve-line
+          :data="chartData"
+          :settings="chartSettingsLine"
+        />
+      </div>
+      <div class="flex-right">
+        <el-table border :data="tableList" stripe empty-text="无报警" height="340">
+          <el-table-column prop="name" label="报警类型" align="center" />
+          <el-table-column prop="value" label="报警数量" align="center" />
+        </el-table>
+      </div>
+    </div>
+  </panel-card>
+</template>
+
+<script>
+import { alarmStaticByDay, alarmStaticsByContent } from '@/api/data/dataStatics'
+import PanelCard from '@/components/BigData/Card/panelCard'
+import { getSearchLastWeekTime } from '@/utils/dateutils'
+
+export default {
+  name: 'AlarmAnalysis',
+  components: { PanelCard },
+  data() {
+    return {
+      listQuery: {
+        deviceType: '',
+        beginTime: '',
+        endTime: ''
+      }, // 查询条件
+      timeRange: [], // 时间范围
+      tableList: [], // 列表
+      // 折线图
+      chartSettingsLine: {
+        labelMap: {
+          'date': '日期',
+          'alarmTimes': '报警次数'
+        },
+        dimension: ['date']
+      }, // 配置
+      chartData: {
+        columns: ['date', 'alarmTimes'],
+        rows: []
+      } // 折线图数据
+    }
+  },
+  created() {
+    this.timeRange = getSearchLastWeekTime()
+    this.refresh()
+  },
+  methods: {
+    refresh() {
+      this.handleDateTime()
+      this.fetchAlarmByDay()
+      this.fetchAlarmByContent()
+    },
+    // 获取各类报警的列表
+    fetchAlarmByContent() {
+      alarmStaticsByContent(this.listQuery).then(response => {
+        this.tableList = response.data
+      })
+    },
+    // 获取每日报警数
+    fetchAlarmByDay() {
+      // 模拟数据
+      // this.chartData.rows = [
+      //   { 'date': '9月20日', 'alarmTimes': 153, 'alarmWells': 43 },
+      //   { 'date': '9月21日', 'alarmTimes': 150, 'alarmWells': 30 },
+      //   { 'date': '9月22日', 'alarmTimes': 143, 'alarmWells': 23 },
+      //   { 'date': '9月23日', 'alarmTimes': 173, 'alarmWells': 23 },
+      //   { 'date': '9月24日', 'alarmTimes': 272, 'alarmWells': 52 },
+      //   { 'date': '9月25日', 'alarmTimes': 253, 'alarmWells': 53 }
+      // ]
+      alarmStaticByDay(this.listQuery).then(response => {
+        this.chartData.rows = response.data
+      })
+    },
+    // 处理时间
+    handleDateTime() {
+      if (this.timeRange && this.timeRange.length > 0) {
+        this.listQuery.beginTime = this.timeRange[0]
+        this.listQuery.endTime = this.timeRange[1]
+      } else {
+        this.listQuery.beginTime = ''
+        this.listQuery.endTime = ''
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.flex-container{
+  display: flex;
+  .flex-left{
+    flex:1;
+  }
+  .flex-right{
+    width: 260px;
+    padding: 10px 20px;
+  }
+}
+
+</style>
diff --git a/src/views/dataView/components/alarmView.vue b/src/views/dataView/components/alarmView.vue
deleted file mode 100644
index e13f811..0000000
--- a/src/views/dataView/components/alarmView.vue
+++ /dev/null
@@ -1,124 +0,0 @@
-<!--报警分析-->
-<template>
-  <panel-card title="报警分析">
-    <template slot="func">
-      <el-col :span="16">
-        <el-date-picker
-          v-model="timeRange"
-          type="datetimerange"
-          range-separator="至"
-          size="small"
-          :picker-options="pickerOptions"
-          value-format="yyyy-MM-dd HH:mm:ss"
-          start-placeholder="开始时间"
-          end-placeholder="结束时间"
-          @change="refresh"
-        />
-      </el-col>
-    </template>
-    <div class="flex-container">
-      <div class="flex-left">
-        <ve-line
-          :data="chartData"
-          :settings="chartSettingsLine"
-        />
-      </div>
-      <div class="flex-right">
-        <el-table border :data="tableList" stripe empty-text="无报警" height="340">
-          <el-table-column prop="name" label="报警类型" align="center" />
-          <el-table-column prop="value" label="报警数量" align="center" />
-        </el-table>
-      </div>
-    </div>
-  </panel-card>
-</template>
-
-<script>
-import { alarmStaticByDay, alarmStaticsByContent } from '@/api/data/dataStatics'
-import PanelCard from '@/components/BigData/Card/panelCard'
-import { getSearchLastWeekTime } from '@/utils/dateutils'
-
-export default {
-  name: 'AlarmStaticsByType',
-  components: { PanelCard },
-  data() {
-    return {
-      listQuery: {
-        deviceType: '',
-        beginTime: '',
-        endTime: ''
-      }, // 查询条件
-      timeRange: [], // 时间范围
-      tableList: [], // 列表
-      // 折线图
-      chartSettingsLine: {
-        labelMap: {
-          'date': '日期',
-          'alarmTimes': '报警次数'
-        },
-        dimension: ['date']
-      }, // 配置
-      chartData: {
-        columns: ['date', 'alarmTimes'],
-        rows: []
-      } // 折线图数据
-    }
-  },
-  created() {
-    this.timeRange = getSearchLastWeekTime()
-    this.refresh()
-  },
-  methods: {
-    refresh() {
-      this.handleDateTime()
-      this.fetchAlarmByDay()
-      this.fetchAlarmByContent()
-    },
-    // 获取各类报警的列表
-    fetchAlarmByContent() {
-      alarmStaticsByContent(this.listQuery).then(response => {
-        this.tableList = response.data
-      })
-    },
-    // 获取每日报警数
-    fetchAlarmByDay() {
-      // 模拟数据
-      // this.chartData.rows = [
-      //   { 'date': '9月20日', 'alarmTimes': 153, 'alarmWells': 43 },
-      //   { 'date': '9月21日', 'alarmTimes': 150, 'alarmWells': 30 },
-      //   { 'date': '9月22日', 'alarmTimes': 143, 'alarmWells': 23 },
-      //   { 'date': '9月23日', 'alarmTimes': 173, 'alarmWells': 23 },
-      //   { 'date': '9月24日', 'alarmTimes': 272, 'alarmWells': 52 },
-      //   { 'date': '9月25日', 'alarmTimes': 253, 'alarmWells': 53 }
-      // ]
-      alarmStaticByDay(this.listQuery).then(response => {
-        this.chartData.rows = response.data
-      })
-    },
-    // 处理时间
-    handleDateTime() {
-      if (this.timeRange && this.timeRange.length > 0) {
-        this.listQuery.beginTime = this.timeRange[0]
-        this.listQuery.endTime = this.timeRange[1]
-      } else {
-        this.listQuery.beginTime = ''
-        this.listQuery.endTime = ''
-      }
-    }
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-.flex-container{
-  display: flex;
-  .flex-left{
-    flex:1;
-  }
-  .flex-right{
-    width: 260px;
-    padding: 10px 20px;
-  }
-}
-
-</style>
diff --git a/src/views/dataView/components/alarmWellRank.vue b/src/views/dataView/components/alarmWellRank.vue
new file mode 100644
index 0000000..d680921
--- /dev/null
+++ b/src/views/dataView/components/alarmWellRank.vue
@@ -0,0 +1,100 @@
+<template>
+  <panel-card title="异常点位排名">
+    <template slot="func">
+      <time-buttons @change="changeTime" />
+      <el-select v-model="listQuery.alarmContent" placeholder="告警内容" clearable size="small" @change="fetchData">
+        <el-option
+          v-for="item in alarmContentTypeList"
+          :key="item.value"
+          :label="item.name"
+          :value="item.value"
+        />
+      </el-select>
+    </template>
+    <el-table :data="list" stripe empty-text="无异常点位" height="368">
+      <el-table-column type="index" width="50" align="center" />
+      <el-table-column prop="wellCode" label="点位编号" align="center" />
+      <el-table-column prop="position" label="详细地址" align="center" />
+      <el-table-column prop="alarmCount" label="报警次数" align="center" />
+      <el-table-column prop="count" label="报警设备数" align="center" />
+    </el-table>
+  </panel-card>
+</template>
+
+<script>
+import PanelCard from '@/components/BigData/Card/panelCard'
+import { alarmWellRank } from '@/api/data/dataStatics'
+import { getAlarmContentType } from '@/api/alarm/alarm'
+import TimeButtons from '@/components/BigData/TimeButtons'
+export default {
+  name: 'AlarmWellRank',
+  components: { TimeButtons, PanelCard },
+  data() {
+    return {
+      listQuery: {
+        alarmContent: '', // 报警内容
+        beginTime: '', // 开始时间
+        endTime: '' // 结束时间
+      }, // 查询结果
+      alarmContentTypeList: [],
+      list: [
+        { wellCode: 'aaaa', position: '中关村南大街5号院', alarmCount: 5, count: 0 },
+        { wellCode: 'aaaa', position: '中关村南大街5号院', alarmCount: 5, count: 0 },
+        { wellCode: 'aaaa', position: '中关村南大街5号院', alarmCount: 5, count: 0 },
+        { wellCode: 'aaaa', position: '中关村南大街5号院', alarmCount: 5, count: 0 },
+        { wellCode: 'aaaa', position: '中关村南大街5号院', alarmCount: 5, count: 0 },
+        { wellCode: 'aaaa', position: '中关村南大街5号院', alarmCount: 5, count: 0 },
+        { wellCode: 'aaaa', position: '中关村南大街5号院', alarmCount: 5, count: 0 },
+        { wellCode: 'aaaa', position: '中关村南大街5号院', alarmCount: 5, count: 0 },
+        { wellCode: 'aaaa', position: '中关村南大街5号院', alarmCount: 5, count: 0 },
+        { wellCode: 'aaaa', position: '中关村南大街5号院', alarmCount: 5, count: 0 }
+      ],
+      total: 0
+    }
+  },
+  created() {
+    this.fetchAlarmContentType()
+    this.fetchData()
+  },
+  methods: {
+    // 获取排名列表
+    fetchData() {
+      alarmWellRank(this.listQuery).then(res => {
+        this.list = res.data.rows
+        this.total = res.data.total
+      })
+    },
+    // 时间切换
+    changeTime(timeRange) {
+      this.handleDateTime()
+      this.fetchData()
+    },
+    // 获取告警内容类别
+    fetchAlarmContentType() {
+      this.alarmContentTypeList = []
+      getAlarmContentType('1').then(response => {
+        const supportDeviceTypes = this.$store.getters.deviceTypes
+        for (const item of response.data.list) {
+          if (supportDeviceTypes.indexOf(item.deviceType) !== -1) {
+            this.alarmContentTypeList.push(item)
+          }
+        }
+      })
+    },
+    // 处理时间
+    handleDateTime() {
+      if (this.timeRange && this.timeRange.length > 0) {
+        this.listQuery.beginTime = this.timeRange[0]
+        this.listQuery.endTime = this.timeRange[1]
+      } else {
+        this.listQuery.beginTime = ''
+        this.listQuery.endTime = ''
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/views/dataView/dataView.vue b/src/views/dataView/dataView.vue
index b627e4a..f890263 100644
--- a/src/views/dataView/dataView.vue
+++ b/src/views/dataView/dataView.vue
@@ -9,7 +9,7 @@
     </el-row>
     <el-row style="margin-top:10px" gutter="10">
       <el-col :span="12">
-        <alarm-view />
+        <alarm-analysis />
       </el-col>
       <el-col :span="12">
         <job-analysis />
@@ -30,15 +30,13 @@
 
 <script>
 import panelGroup from './components/panelGroup'
-import alarmStatus from './components/jobAnalysis'
 import wellCountView from './components/wellCountView'
 import deviceCountView from './components/deviceCountView'
-import alarmView from './components/alarmView'
-import JobByStatus from '@/views/dashboard/components/JobByStatus'
 import JobAnalysis from '@/views/dataView/components/jobAnalysis'
+import AlarmAnalysis from '@/views/dataView/components/alarmAnalysis'
 export default {
   name: 'DataView',
-  components: { JobAnalysis, JobByStatus, panelGroup, alarmStatus, wellCountView, deviceCountView, alarmView }
+  components: { AlarmAnalysis, JobAnalysis, panelGroup, wellCountView, deviceCountView }
 }
 </script>
 
diff --git a/src/views/deviceStatics/components/deviceCountByType.vue b/src/views/deviceStatics/components/deviceCountByType.vue
index 7564d6e..f062c1f 100644
--- a/src/views/deviceStatics/components/deviceCountByType.vue
+++ b/src/views/deviceStatics/components/deviceCountByType.vue
@@ -3,22 +3,10 @@
     <panel-card title="设备总体情况">
       <el-row :gutter="20" style="padding: 15px 10px">
         <el-col :span="12">
-          <el-card shadow="never">
-            <div>
-              <span class="card-title">设备总数</span>
-              <span class="card-value">{{ allDevice }}</span>
-              <span class="card-unit">个</span>
-            </div>
-          </el-card>
+          <simple-card title="设备总数" :context="allDevice" unit="个" />
         </el-col>
         <el-col :span="12">
-          <el-card shadow="never">
-            <div>
-              <span class="card-title">低电量设备总数</span>
-              <span class="card-value">{{ lowPowerDevice }}</span>
-              <span>个</span>
-            </div>
-          </el-card>
+          <simple-card title="低电量设备总数" :context="lowPowerDevice" unit="个" />
         </el-col>
       </el-row>
     </panel-card>
@@ -32,9 +20,10 @@
 import { deviceStaticByStatus, deviceStaticsByType } from '@/api/data/dataStatics'
 import PanelCard from '@/components/BigData/Card/panelCard'
 import DeviceCountByTypeBar from '@/views/staticCharts/DeviceCountByTypeBar'
+import SimpleCard from '@/components/BigData/Card/simpleCard'
 export default {
   name: 'DeviceCountByType',
-  components: { DeviceCountByTypeBar, PanelCard },
+  components: { SimpleCard, DeviceCountByTypeBar, PanelCard },
   data() {
     return {
       allDevice: 0, // 总设备数
@@ -71,12 +60,5 @@
 </script>
 
 <style rel="stylesheet/scss" lang="scss" scoped>
-.card-title {
-  font-size: 16px;
-}
-.card-value {
-  font-size: 20px;
-  font-weight: bold ;
-  margin: 0 10px;
-}
+
 </style>
diff --git a/src/views/staticCharts/AlarmStaticsByType.vue b/src/views/staticCharts/AlarmStaticsByType.vue
new file mode 100644
index 0000000..518afca
--- /dev/null
+++ b/src/views/staticCharts/AlarmStaticsByType.vue
@@ -0,0 +1,121 @@
+<template>
+  <ve-histogram
+    :data="chartData"
+    :grid="grid"
+    :extend="extend"
+    :settings="chartSettings"
+  />
+</template>
+
+<script>
+import { alarmStaticsByContent } from '@/api/data/dataStatics'
+export default {
+  name: 'AlarmStaticsByType',
+  props: {
+    timeRange: {
+      type: Array,
+      default: () => []
+    } // 查询时间范围
+  },
+  data() {
+    return {
+      listQuery: {
+        beginTime: '',
+        endTime: '',
+        alarmType: '1'
+      },
+      // 柱状图
+      extend: {
+        xAxis: {
+          axisLabel: {
+            rotate: 30,
+            margin: 30,
+            textStyle: {
+              align: 'center'
+            }
+          }
+        },
+        series: {
+          label: { show: true, position: 'top' },
+          barMaxWidth: 35 // 最大柱宽度
+        }
+      },
+      grid: {
+        right: 60
+      },
+      chartSettings: {
+        itemStyle: {
+          'barCategoryGap': 5
+        },
+        barWidth: 15,
+        labelMap: {
+          'alarmContent': '报警内容',
+          'count': '报警数量'
+        },
+        dimension: ['alarmContent'],
+        metrics: ['count']
+      },
+      chartData: {
+        columns: ['alarmContent', 'count'],
+        rows: []
+      }
+    }
+  },
+  watch: {
+    timeRange() {
+      this.fetchData()
+    }
+  },
+  methods: {
+    fetchData() {
+      this.handleDateTime()
+      alarmStaticsByContent(this.listQuery).then(response => {
+        this.chartData.rows = response.data
+      })
+    },
+    // 处理时间
+    handleDateTime() {
+      if (this.timeRange && this.timeRange.length > 0) {
+        this.listQuery.beginTime = this.timeRange[0]
+        this.listQuery.endTime = this.timeRange[1]
+      } else {
+        this.listQuery.beginTime = ''
+        this.listQuery.endTime = ''
+      }
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.flagBoxStyle {
+  display: flex;
+  margin-bottom: 20px;
+}
+.flagBoxStyle div:nth-child(2){
+  line-height: 30px;
+  font-weight: 600;
+}
+.flagStyle {
+  width: 4px;
+  height: 30px;
+  margin-right: 6px;
+  background: rgb(64 121 242);
+}
+.cardStyle {
+  display:flex;
+  margin-bottom: 60px;
+  justify-content: space-around;
+}
+.ttileStyle {
+  font-size: 12px;
+}
+.countStyle {
+  font-size: 20px;
+  margin: 0 10px;
+}
+.el-date-editor--datetimerange.el-input,
+.el-date-editor--datetimerange.el-input__inner{
+  width: 340px;
+}
+</style>