diff --git a/src/api/dataStatics.js b/src/api/dataStatics.js
index 49592a0..26fe939 100644
--- a/src/api/dataStatics.js
+++ b/src/api/dataStatics.js
@@ -10,3 +10,20 @@
     params
   })
 }
+
+// 根据分局进行报警统计查询
+export function wellStaticByDept() {
+  return request({
+    url: 'statics/wellStaticsByPDept',
+    method: 'get'
+  })
+}
+// 根据派出所进行报警统计查询
+export function wellStaticByPolice(params) {
+  return request({
+    url: 'statics/wellStaticsByDept',
+    method: 'get',
+    params
+  })
+}
+

diff --git a/src/api/dataStatics.js b/src/api/dataStatics.js
index 49592a0..26fe939 100644
--- a/src/api/dataStatics.js
+++ b/src/api/dataStatics.js
@@ -10,3 +10,20 @@
     params
   })
 }
+
+// 根据分局进行报警统计查询
+export function wellStaticByDept() {
+  return request({
+    url: 'statics/wellStaticsByPDept',
+    method: 'get'
+  })
+}
+// 根据派出所进行报警统计查询
+export function wellStaticByPolice(params) {
+  return request({
+    url: 'statics/wellStaticsByDept',
+    method: 'get',
+    params
+  })
+}
+
diff --git a/src/views/wellStatics/modules/wellStaticsByDept.vue b/src/views/wellStatics/modules/wellStaticsByDept.vue
new file mode 100644
index 0000000..a889ac6
--- /dev/null
+++ b/src/views/wellStatics/modules/wellStaticsByDept.vue
@@ -0,0 +1,104 @@
+<template>
+  <div class="app-container">
+    <div class="chart-container">
+      <el-row>
+        <div class="chart-title">按分局统计闸井数量</div>
+      </el-row>
+      <el-row>
+        <el-col :span="11" :offset="1">
+          <div class="chart-body">
+            <ve-pie ref="chartdept" :data="chartData" :settings="chartSettings"/>
+          </div>
+        </el-col>
+        <el-col :span="10" >
+          <div class="chart-body" style="margin: 70px 20px">
+            <el-table :data="chartData.rows" border show-summary>
+              <el-table-column :label="chartSettings.labelMap['pidName']" prop="pidName"/>
+              <el-table-column :label="chartSettings.labelMap['wellCount']" prop="wellCount"/>
+            </el-table>
+          </div>
+        </el-col>
+      </el-row>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'WellStaticsByDept',
+  data() {
+    return {
+      chartSettings: {
+        labelMap: {
+          'pidName': '分局',
+          'wellCount': '闸井数量'
+        }
+      },
+      chartData: {
+        columns: ['pidName', 'wellCount'],
+        rows: []
+      }
+    }
+  },
+  mounted() {
+    this.fetchData()
+  },
+  methods: {
+    fetchData() {
+      this.chartData.rows = [
+        { 'pidName': '天安门分局', 'wellCount': 343 },
+        { 'pidName': '东城分局', 'wellCount': 200 },
+        { 'pidName': '西城分局', 'wellCount': 100 }
+      ]
+      this.$refs.chartdept.echarts.resize()
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  .app-container{
+    padding: 5px 10px 10px 10px;
+    .chart-container{
+      padding:0px;
+      border: 1px solid #d3dce6;
+      .chart-tools{
+        background-color: #f2f2f2;
+        line-height: 35px;
+        padding-left: 10px;
+        padding-right: 5px;
+        .chart-tool-button{
+          padding: 5px;
+          line-height: 16px;
+          margin-top:5px;
+          font-size:13px;
+        }
+        .chart-tool-button:hover{
+          background-color: #8cc5ff;
+          cursor: pointer;
+          color:white
+        }
+        .chart-tool-button:active{
+          background-color: #8cc5ff;
+          color:white
+        }
+        .editor--datetimerange.el-input__inner{
+          width: 300px;
+        }
+      }
+
+      .chart-body{
+        padding:15px;
+        margin-top: 20px;
+      }
+    }
+  }
+  .chart-title{
+    margin: auto;
+    text-align: center;
+    margin-top: 15px;
+    font-size: 20px;
+    line-height: 30px;
+  }
+</style>
+

diff --git a/src/api/dataStatics.js b/src/api/dataStatics.js
index 49592a0..26fe939 100644
--- a/src/api/dataStatics.js
+++ b/src/api/dataStatics.js
@@ -10,3 +10,20 @@
     params
   })
 }
+
+// 根据分局进行报警统计查询
+export function wellStaticByDept() {
+  return request({
+    url: 'statics/wellStaticsByPDept',
+    method: 'get'
+  })
+}
+// 根据派出所进行报警统计查询
+export function wellStaticByPolice(params) {
+  return request({
+    url: 'statics/wellStaticsByDept',
+    method: 'get',
+    params
+  })
+}
+
diff --git a/src/views/wellStatics/modules/wellStaticsByDept.vue b/src/views/wellStatics/modules/wellStaticsByDept.vue
new file mode 100644
index 0000000..a889ac6
--- /dev/null
+++ b/src/views/wellStatics/modules/wellStaticsByDept.vue
@@ -0,0 +1,104 @@
+<template>
+  <div class="app-container">
+    <div class="chart-container">
+      <el-row>
+        <div class="chart-title">按分局统计闸井数量</div>
+      </el-row>
+      <el-row>
+        <el-col :span="11" :offset="1">
+          <div class="chart-body">
+            <ve-pie ref="chartdept" :data="chartData" :settings="chartSettings"/>
+          </div>
+        </el-col>
+        <el-col :span="10" >
+          <div class="chart-body" style="margin: 70px 20px">
+            <el-table :data="chartData.rows" border show-summary>
+              <el-table-column :label="chartSettings.labelMap['pidName']" prop="pidName"/>
+              <el-table-column :label="chartSettings.labelMap['wellCount']" prop="wellCount"/>
+            </el-table>
+          </div>
+        </el-col>
+      </el-row>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'WellStaticsByDept',
+  data() {
+    return {
+      chartSettings: {
+        labelMap: {
+          'pidName': '分局',
+          'wellCount': '闸井数量'
+        }
+      },
+      chartData: {
+        columns: ['pidName', 'wellCount'],
+        rows: []
+      }
+    }
+  },
+  mounted() {
+    this.fetchData()
+  },
+  methods: {
+    fetchData() {
+      this.chartData.rows = [
+        { 'pidName': '天安门分局', 'wellCount': 343 },
+        { 'pidName': '东城分局', 'wellCount': 200 },
+        { 'pidName': '西城分局', 'wellCount': 100 }
+      ]
+      this.$refs.chartdept.echarts.resize()
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  .app-container{
+    padding: 5px 10px 10px 10px;
+    .chart-container{
+      padding:0px;
+      border: 1px solid #d3dce6;
+      .chart-tools{
+        background-color: #f2f2f2;
+        line-height: 35px;
+        padding-left: 10px;
+        padding-right: 5px;
+        .chart-tool-button{
+          padding: 5px;
+          line-height: 16px;
+          margin-top:5px;
+          font-size:13px;
+        }
+        .chart-tool-button:hover{
+          background-color: #8cc5ff;
+          cursor: pointer;
+          color:white
+        }
+        .chart-tool-button:active{
+          background-color: #8cc5ff;
+          color:white
+        }
+        .editor--datetimerange.el-input__inner{
+          width: 300px;
+        }
+      }
+
+      .chart-body{
+        padding:15px;
+        margin-top: 20px;
+      }
+    }
+  }
+  .chart-title{
+    margin: auto;
+    text-align: center;
+    margin-top: 15px;
+    font-size: 20px;
+    line-height: 30px;
+  }
+</style>
+
diff --git a/src/views/wellStatics/modules/wellStaticsByPolice.vue b/src/views/wellStatics/modules/wellStaticsByPolice.vue
new file mode 100644
index 0000000..9e0dea2
--- /dev/null
+++ b/src/views/wellStatics/modules/wellStaticsByPolice.vue
@@ -0,0 +1,105 @@
+<template>
+  <div class="app-container">
+    <div class="ring-chart-container">
+      <el-row>
+        <div class="chart-title">按派出所统计闸井数量</div>
+      </el-row>
+      <el-row>
+        <el-col :span="11" :offset="1">
+          <div class="chart-body">
+            <ve-pie ref="chartpolice" :data="chartDataByPolice" :settings="chartSettingsByPolice"/>
+          </div>
+        </el-col>
+        <el-col :span="10" >
+          <div class="chart-body" style="margin: 70px 20px">
+            <el-table :data="chartDataByPolice.rows" border show-summary>
+              <el-table-column :label="chartSettingsByPolice.labelMap['deptName']" prop="deptName"/>
+              <el-table-column :label="chartSettingsByPolice.labelMap['wellCount']" prop="wellCount"/>
+            </el-table>
+          </div>
+        </el-col>
+      </el-row>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'WellStaticsByPolice',
+  data() {
+    return {
+      chartSettingsByPolice: {
+        labelMap: {
+          'deptName': '派出所',
+          'wellCount': '闸井数量'
+        }
+      },
+      chartDataByPolice: {
+        columns: ['deptName', 'wellCount'],
+        rows: []
+      }
+    }
+  },
+  mounted() {
+    this.fetchData()
+  },
+  methods: {
+    fetchData() {
+      console.log('wellStaticsByPolice fetchData')
+      this.chartDataByPolice.rows = [
+        { 'deptName': '天安门派出所', 'wellCount': 343 },
+        { 'deptName': '东城派出所', 'wellCount': 200 },
+        { 'deptName': '西城派出所', 'wellCount': 100 }
+      ]
+      this.$refs.chartpolice.echarts.resize()
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  .app-container{
+    padding: 5px 10px 10px 10px;
+    .ring-chart-container{
+      padding:0px;
+      border: 1px solid #d3dce6;
+      .chart-tools{
+        background-color: #f2f2f2;
+        line-height: 35px;
+        padding-left: 10px;
+        padding-right: 5px;
+        .chart-tool-button{
+          padding: 5px;
+          line-height: 16px;
+          margin-top:5px;
+          font-size:13px;
+        }
+        .chart-tool-button:hover{
+          background-color: #8cc5ff;
+          cursor: pointer;
+          color:white
+        }
+        .chart-tool-button:active{
+          background-color: #8cc5ff;
+          color:white
+        }
+        .editor--datetimerange.el-input__inner{
+          width: 300px;
+        }
+      }
+
+      .chart-body{
+        padding:15px;
+        margin-top: 20px;
+      }
+    }
+  }
+  .chart-title{
+    margin: auto;
+    text-align: center;
+    margin-top: 15px;
+    font-size: 20px;
+    line-height: 30px;
+  }
+</style>
+

diff --git a/src/api/dataStatics.js b/src/api/dataStatics.js
index 49592a0..26fe939 100644
--- a/src/api/dataStatics.js
+++ b/src/api/dataStatics.js
@@ -10,3 +10,20 @@
     params
   })
 }
+
+// 根据分局进行报警统计查询
+export function wellStaticByDept() {
+  return request({
+    url: 'statics/wellStaticsByPDept',
+    method: 'get'
+  })
+}
+// 根据派出所进行报警统计查询
+export function wellStaticByPolice(params) {
+  return request({
+    url: 'statics/wellStaticsByDept',
+    method: 'get',
+    params
+  })
+}
+
diff --git a/src/views/wellStatics/modules/wellStaticsByDept.vue b/src/views/wellStatics/modules/wellStaticsByDept.vue
new file mode 100644
index 0000000..a889ac6
--- /dev/null
+++ b/src/views/wellStatics/modules/wellStaticsByDept.vue
@@ -0,0 +1,104 @@
+<template>
+  <div class="app-container">
+    <div class="chart-container">
+      <el-row>
+        <div class="chart-title">按分局统计闸井数量</div>
+      </el-row>
+      <el-row>
+        <el-col :span="11" :offset="1">
+          <div class="chart-body">
+            <ve-pie ref="chartdept" :data="chartData" :settings="chartSettings"/>
+          </div>
+        </el-col>
+        <el-col :span="10" >
+          <div class="chart-body" style="margin: 70px 20px">
+            <el-table :data="chartData.rows" border show-summary>
+              <el-table-column :label="chartSettings.labelMap['pidName']" prop="pidName"/>
+              <el-table-column :label="chartSettings.labelMap['wellCount']" prop="wellCount"/>
+            </el-table>
+          </div>
+        </el-col>
+      </el-row>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'WellStaticsByDept',
+  data() {
+    return {
+      chartSettings: {
+        labelMap: {
+          'pidName': '分局',
+          'wellCount': '闸井数量'
+        }
+      },
+      chartData: {
+        columns: ['pidName', 'wellCount'],
+        rows: []
+      }
+    }
+  },
+  mounted() {
+    this.fetchData()
+  },
+  methods: {
+    fetchData() {
+      this.chartData.rows = [
+        { 'pidName': '天安门分局', 'wellCount': 343 },
+        { 'pidName': '东城分局', 'wellCount': 200 },
+        { 'pidName': '西城分局', 'wellCount': 100 }
+      ]
+      this.$refs.chartdept.echarts.resize()
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  .app-container{
+    padding: 5px 10px 10px 10px;
+    .chart-container{
+      padding:0px;
+      border: 1px solid #d3dce6;
+      .chart-tools{
+        background-color: #f2f2f2;
+        line-height: 35px;
+        padding-left: 10px;
+        padding-right: 5px;
+        .chart-tool-button{
+          padding: 5px;
+          line-height: 16px;
+          margin-top:5px;
+          font-size:13px;
+        }
+        .chart-tool-button:hover{
+          background-color: #8cc5ff;
+          cursor: pointer;
+          color:white
+        }
+        .chart-tool-button:active{
+          background-color: #8cc5ff;
+          color:white
+        }
+        .editor--datetimerange.el-input__inner{
+          width: 300px;
+        }
+      }
+
+      .chart-body{
+        padding:15px;
+        margin-top: 20px;
+      }
+    }
+  }
+  .chart-title{
+    margin: auto;
+    text-align: center;
+    margin-top: 15px;
+    font-size: 20px;
+    line-height: 30px;
+  }
+</style>
+
diff --git a/src/views/wellStatics/modules/wellStaticsByPolice.vue b/src/views/wellStatics/modules/wellStaticsByPolice.vue
new file mode 100644
index 0000000..9e0dea2
--- /dev/null
+++ b/src/views/wellStatics/modules/wellStaticsByPolice.vue
@@ -0,0 +1,105 @@
+<template>
+  <div class="app-container">
+    <div class="ring-chart-container">
+      <el-row>
+        <div class="chart-title">按派出所统计闸井数量</div>
+      </el-row>
+      <el-row>
+        <el-col :span="11" :offset="1">
+          <div class="chart-body">
+            <ve-pie ref="chartpolice" :data="chartDataByPolice" :settings="chartSettingsByPolice"/>
+          </div>
+        </el-col>
+        <el-col :span="10" >
+          <div class="chart-body" style="margin: 70px 20px">
+            <el-table :data="chartDataByPolice.rows" border show-summary>
+              <el-table-column :label="chartSettingsByPolice.labelMap['deptName']" prop="deptName"/>
+              <el-table-column :label="chartSettingsByPolice.labelMap['wellCount']" prop="wellCount"/>
+            </el-table>
+          </div>
+        </el-col>
+      </el-row>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'WellStaticsByPolice',
+  data() {
+    return {
+      chartSettingsByPolice: {
+        labelMap: {
+          'deptName': '派出所',
+          'wellCount': '闸井数量'
+        }
+      },
+      chartDataByPolice: {
+        columns: ['deptName', 'wellCount'],
+        rows: []
+      }
+    }
+  },
+  mounted() {
+    this.fetchData()
+  },
+  methods: {
+    fetchData() {
+      console.log('wellStaticsByPolice fetchData')
+      this.chartDataByPolice.rows = [
+        { 'deptName': '天安门派出所', 'wellCount': 343 },
+        { 'deptName': '东城派出所', 'wellCount': 200 },
+        { 'deptName': '西城派出所', 'wellCount': 100 }
+      ]
+      this.$refs.chartpolice.echarts.resize()
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  .app-container{
+    padding: 5px 10px 10px 10px;
+    .ring-chart-container{
+      padding:0px;
+      border: 1px solid #d3dce6;
+      .chart-tools{
+        background-color: #f2f2f2;
+        line-height: 35px;
+        padding-left: 10px;
+        padding-right: 5px;
+        .chart-tool-button{
+          padding: 5px;
+          line-height: 16px;
+          margin-top:5px;
+          font-size:13px;
+        }
+        .chart-tool-button:hover{
+          background-color: #8cc5ff;
+          cursor: pointer;
+          color:white
+        }
+        .chart-tool-button:active{
+          background-color: #8cc5ff;
+          color:white
+        }
+        .editor--datetimerange.el-input__inner{
+          width: 300px;
+        }
+      }
+
+      .chart-body{
+        padding:15px;
+        margin-top: 20px;
+      }
+    }
+  }
+  .chart-title{
+    margin: auto;
+    text-align: center;
+    margin-top: 15px;
+    font-size: 20px;
+    line-height: 30px;
+  }
+</style>
+
diff --git a/src/views/wellStatics/wellStatics.vue b/src/views/wellStatics/wellStatics.vue
new file mode 100644
index 0000000..104393c
--- /dev/null
+++ b/src/views/wellStatics/wellStatics.vue
@@ -0,0 +1,189 @@
+<template>
+  <div class="container">
+    <!--<well-statics-by-dept ref="bydept"/>-->
+    <div v-if="hasPerm('/statics/wellStaticsByPDept')" class="app-container">
+      <div class="chart-container">
+        <el-row>
+          <div class="chart-title">按分局统计闸井数量</div>
+        </el-row>
+        <el-row>
+          <el-col :span="11" :offset="1">
+            <div class="chart-body">
+              <ve-pie ref="chartdept" :data="chartData" :settings="chartSettings"/>
+            </div>
+          </el-col>
+          <el-col :span="10" >
+            <div class="chart-body" style="margin: 70px 20px">
+              <el-table :data="chartData.rows" border show-summary>
+                <el-table-column :label="chartSettings.labelMap['pidName']" prop="pidName"/>
+                <el-table-column :label="chartSettings.labelMap['wellCount']" prop="wellCount"/>
+              </el-table>
+            </div>
+          </el-col>
+        </el-row>
+      </div>
+    </div>
+    <!--<well-statics-by-police ref="bypolice"/>-->
+    <div v-if="hasPerm('/statics/wellStaticsByDept')" class="app-container">
+      <div class="chart-container">
+        <el-row>
+          <div class="chart-title">按派出所统计闸井数量</div>
+        </el-row>
+        <el-row>
+          <el-col :span="4" :offset="10">
+            <el-select v-model="value" placeholder="请选择" style=" margin: auto;margin-top: 20px;" @change="changePid">
+              <el-option
+                v-for="item in options"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value"/>
+            </el-select>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="11" :offset="1">
+            <div class="chart-body">
+              <ve-pie ref="chartpolice" :data="chartDataByPolice" :settings="chartSettingsByPolice"/>
+            </div>
+          </el-col>
+          <el-col :span="10" >
+            <div class="chart-body" style="margin: 70px 20px">
+              <el-table :data="chartDataByPolice.rows" border show-summary>
+                <el-table-column :label="chartSettingsByPolice.labelMap['deptName']" prop="deptName"/>
+                <el-table-column :label="chartSettingsByPolice.labelMap['wellCount']" prop="wellCount"/>
+              </el-table>
+            </div>
+          </el-col>
+        </el-row>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import WellStaticsByDept from './modules/wellStaticsByDept'
+import WellStaticsByPolice from './modules/wellStaticsByPolice'
+import { wellStaticByDept, wellStaticByPolice } from '@/api/dataStatics'
+
+export default {
+  name: 'WellStatics',
+  components: { WellStaticsByDept, WellStaticsByPolice },
+  data() {
+    return {
+      activeName: 'byDept',
+      chartSettings: {
+        labelMap: {
+          'pidName': '分局',
+          'wellCount': '闸井数量'
+        }
+      },
+      chartData: {
+        columns: ['pidName', 'wellCount'],
+        rows: []
+      },
+      chartSettingsByPolice: {
+        labelMap: {
+          'deptName': '派出所',
+          'wellCount': '闸井数量'
+        }
+      },
+      chartDataByPolice: {
+        columns: ['deptName', 'wellCount'],
+        rows: []
+      },
+      options: [{
+        value: '110091000000',
+        label: '天安门分局'
+      }, {
+        value: '110101000000',
+        label: '东城分局'
+      }, {
+        value: '110102000000',
+        label: '西城分局'
+      }],
+      value: '110091000000'
+    }
+  },
+  created() {
+    this.fetchData1()
+    this.fetchData2()
+  },
+  methods: {
+    fetchData1() {
+      // this.chartData.rows = [
+      //   { 'pidName': '天安门分局', 'wellCount': 343 },
+      //   { 'pidName': '东城分局', 'wellCount': 200 },
+      //   { 'pidName': '西城分局', 'wellCount': 100 }
+      // ]
+      wellStaticByDept().then(response => {
+        this.chartData.rows = response.data
+      })
+    },
+    fetchData2() {
+      const params = {
+        pid: this.value
+      }
+      // this.chartDataByPolice.rows = [
+      //   { 'deptName': '天安门派出所', 'wellCount': 343 },
+      //   { 'deptName': '东城派出所', 'wellCount': 200 },
+      //   { 'deptName': '西城派出所', 'wellCount': 100 }
+      // ]
+      wellStaticByPolice(params).then(response => {
+        this.chartDataByPolice.rows = response.data
+      })
+    },
+    changePid() {
+      this.fetchData2()
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  .container{
+    padding: 5px;
+  }
+  .app-container{
+    padding: 5px 10px 10px 10px;
+    .chart-container{
+      padding:0px;
+      border: 1px solid #d3dce6;
+      .chart-tools{
+        background-color: #f2f2f2;
+        line-height: 35px;
+        padding-left: 10px;
+        padding-right: 5px;
+        .chart-tool-button{
+          padding: 5px;
+          line-height: 16px;
+          margin-top:5px;
+          font-size:13px;
+        }
+        .chart-tool-button:hover{
+          background-color: #8cc5ff;
+          cursor: pointer;
+          color:white
+        }
+        .chart-tool-button:active{
+          background-color: #8cc5ff;
+          color:white
+        }
+        .editor--datetimerange.el-input__inner{
+          width: 300px;
+        }
+      }
+
+      .chart-body{
+        padding:15px;
+        margin-top: 20px;
+      }
+    }
+  }
+  .chart-title{
+    margin: auto;
+    text-align: center;
+    margin-top: 15px;
+    font-size: 20px;
+    line-height: 30px;
+  }
+</style>