diff --git a/src/views/deviceStatics/components/deviceCountByDept.vue b/src/views/deviceStatics/components/deviceCountByDept.vue
new file mode 100644
index 0000000..34092a5
--- /dev/null
+++ b/src/views/deviceStatics/components/deviceCountByDept.vue
@@ -0,0 +1,115 @@
+<template>
+  <div>
+    <el-row>
+      <el-col :span="12" :offset="6">
+        <div class="chart-title">各单位设备安装情况数量统计</div>
+      </el-col>
+    </el-row>
+    <div>
+      <el-row :gutter="20" type="flex" justify="end">
+        <el-col :span="8" style="margin-right: 30px">
+          <el-select v-model="listQuery.deviceType" class="select-right" size="mini" placeholder="设备类型" clearable @change="fetchData">
+            <el-option
+              v-for="item in deviceTypeList"
+              :key="item.value"
+              :label="item.name"
+              :value="item.value"/>
+          </el-select>
+        </el-col>
+      </el-row>
+    </div>
+    <div>
+      <ve-histogram :data="chartData" :grid="grid" :extend="extend" :settings="chartSettings"/>
+    </div>
+  </div>
+</template>
+
+<script>
+import { getDeviceType } from '@/api/device'
+import { deviceStaticsByDept } from '@/api/dataStatics'
+export default {
+  name: 'DeviceCountByDept',
+  data() {
+    this.extend = {
+      series: {
+        label: { show: true, position: 'top' }
+      }
+    }
+    this.grid = {
+      right: 60
+    }
+    this.title = {
+      text: '设备数量统计'
+    }
+    this.chartSettings = {
+      itemStyle: {
+        'barCategoryGap': 5
+      },
+      barWidth: 15,
+      labelMap: {
+        'deptName': '权属单位',
+        'deviceCount': '设备数量'
+      },
+      dimension: ['deptName'],
+      metrics: ['deviceCount']
+    }
+    return {
+      listQuery: {
+        deviceType: ''
+      },
+      deviceTypeList: [],
+      rawData: '',
+      chartData: {
+        columns: ['deptName', 'deviceCount'],
+        rows: []
+      }
+    }
+  },
+  mounted() {
+    this.fetchDeviceType()
+    this.fetchData()
+  },
+  methods: {
+    // 获取设备类型
+    fetchDeviceType() {
+      getDeviceType(this.listQuery).then(response => {
+        this.deviceTypeList = [{
+          name: '全部',
+          value: ''
+        }]
+        // 过滤掉该单位不支持的设备类型
+        const deviceTypes = this.$store.getters.deviceTypes
+        for (const deviceType of response.data) {
+          if (deviceTypes.indexOf(deviceType.value) !== -1) {
+            this.deviceTypeList.push(deviceType)
+          }
+        }
+        if (this.deviceTypeList.length <= 1) {
+          this.showDeviceType = false
+        }
+      })
+    },
+    fetchData() {
+      console.log('fetchData')
+      deviceStaticsByDept(this.listQuery).then(response => {
+        this.chartData.rows = response.data
+      })
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  .chart-title{
+    margin: auto;
+    text-align: center;
+    margin-top: 15px;
+    font-size:20px;
+    font-weight:600
+  }
+  .select-right{
+    /*margin-right: 25px;*/
+    margin-top: 15px;
+    /*width: 200px*/
+  }
+</style>

diff --git a/src/views/deviceStatics/components/deviceCountByDept.vue b/src/views/deviceStatics/components/deviceCountByDept.vue
new file mode 100644
index 0000000..34092a5
--- /dev/null
+++ b/src/views/deviceStatics/components/deviceCountByDept.vue
@@ -0,0 +1,115 @@
+<template>
+  <div>
+    <el-row>
+      <el-col :span="12" :offset="6">
+        <div class="chart-title">各单位设备安装情况数量统计</div>
+      </el-col>
+    </el-row>
+    <div>
+      <el-row :gutter="20" type="flex" justify="end">
+        <el-col :span="8" style="margin-right: 30px">
+          <el-select v-model="listQuery.deviceType" class="select-right" size="mini" placeholder="设备类型" clearable @change="fetchData">
+            <el-option
+              v-for="item in deviceTypeList"
+              :key="item.value"
+              :label="item.name"
+              :value="item.value"/>
+          </el-select>
+        </el-col>
+      </el-row>
+    </div>
+    <div>
+      <ve-histogram :data="chartData" :grid="grid" :extend="extend" :settings="chartSettings"/>
+    </div>
+  </div>
+</template>
+
+<script>
+import { getDeviceType } from '@/api/device'
+import { deviceStaticsByDept } from '@/api/dataStatics'
+export default {
+  name: 'DeviceCountByDept',
+  data() {
+    this.extend = {
+      series: {
+        label: { show: true, position: 'top' }
+      }
+    }
+    this.grid = {
+      right: 60
+    }
+    this.title = {
+      text: '设备数量统计'
+    }
+    this.chartSettings = {
+      itemStyle: {
+        'barCategoryGap': 5
+      },
+      barWidth: 15,
+      labelMap: {
+        'deptName': '权属单位',
+        'deviceCount': '设备数量'
+      },
+      dimension: ['deptName'],
+      metrics: ['deviceCount']
+    }
+    return {
+      listQuery: {
+        deviceType: ''
+      },
+      deviceTypeList: [],
+      rawData: '',
+      chartData: {
+        columns: ['deptName', 'deviceCount'],
+        rows: []
+      }
+    }
+  },
+  mounted() {
+    this.fetchDeviceType()
+    this.fetchData()
+  },
+  methods: {
+    // 获取设备类型
+    fetchDeviceType() {
+      getDeviceType(this.listQuery).then(response => {
+        this.deviceTypeList = [{
+          name: '全部',
+          value: ''
+        }]
+        // 过滤掉该单位不支持的设备类型
+        const deviceTypes = this.$store.getters.deviceTypes
+        for (const deviceType of response.data) {
+          if (deviceTypes.indexOf(deviceType.value) !== -1) {
+            this.deviceTypeList.push(deviceType)
+          }
+        }
+        if (this.deviceTypeList.length <= 1) {
+          this.showDeviceType = false
+        }
+      })
+    },
+    fetchData() {
+      console.log('fetchData')
+      deviceStaticsByDept(this.listQuery).then(response => {
+        this.chartData.rows = response.data
+      })
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  .chart-title{
+    margin: auto;
+    text-align: center;
+    margin-top: 15px;
+    font-size:20px;
+    font-weight:600
+  }
+  .select-right{
+    /*margin-right: 25px;*/
+    margin-top: 15px;
+    /*width: 200px*/
+  }
+</style>
diff --git a/src/views/deviceStatics/components/deviceCountByType.vue b/src/views/deviceStatics/components/deviceCountByType.vue
new file mode 100644
index 0000000..a43b0b2
--- /dev/null
+++ b/src/views/deviceStatics/components/deviceCountByType.vue
@@ -0,0 +1,74 @@
+<template>
+  <div>
+    <el-row>
+      <el-col :span="12" :offset="6">
+        <div class="chart-title">设备总量统计</div>
+      </el-col>
+    </el-row>
+    <el-row>
+      <ve-pie :data="chartData" :grid="grid" :legend="legend" :settings="chartSettings"/>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import { deviceStaticsByType } from '@/api/dataStatics'
+
+export default {
+  name: 'DeviceCountByType',
+  data() {
+    this.extend = {
+      series: {
+        label: { show: true, position: 'right' }
+      }
+    }
+    this.legend = {
+      bottom: '10px'
+    }
+    this.chartSettings = {
+      labelMap: {
+        'deviceType': '设备类型',
+        'deviceCount': '设备数量'
+      },
+      dimension: ['deviceType'],
+      metrics: ['deviceCount']
+    }
+    return {
+      chartData: {
+        columns: ['deviceType', 'deviceCount'],
+        rows: []
+      }
+    }
+  },
+  mounted() {
+    // TODO:待调试真接口
+    this.fetchData()
+    // this.chartData.rows = [
+    //   { 'deviceType': '井盖状态监测仪', 'deviceCount': 1393, '下单用户': 1093, '下单率': 0.32 },
+    //   { 'deviceType': '液位监测仪', 'deviceCount': 3530, '下单用户': 3230, '下单率': 0.26 },
+    //   { 'deviceType': '燃气智能监测终端', 'deviceCount': 2923, '下单用户': 2623, '下单率': 0.76 },
+    //   { 'deviceType': '开挖监测仪', 'deviceCount': 1723, '下单用户': 1423, '下单率': 0.49 },
+    //   { 'deviceType': '有害气体监测仪', 'deviceCount': 3792, '下单用户': 3492, '下单率': 0.323 },
+    //   { 'deviceType': '水质监测仪', 'deviceCount': 2, '下单用户': 4293, '下单率': 0.78 },
+    //   { 'deviceType': '流量监测仪', 'deviceCount': 2, '下单用户': 4293, '下单率': 0.78 }
+    // ]
+  },
+  methods: {
+    fetchData() {
+      deviceStaticsByType().then(response => {
+        this.chartData.rows = response.data
+      })
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  .chart-title{
+    margin: auto;
+    text-align: center;
+    margin-top: 15px;
+    font-size:20px;
+    font-weight:600
+  }
+</style>

diff --git a/src/views/deviceStatics/components/deviceCountByDept.vue b/src/views/deviceStatics/components/deviceCountByDept.vue
new file mode 100644
index 0000000..34092a5
--- /dev/null
+++ b/src/views/deviceStatics/components/deviceCountByDept.vue
@@ -0,0 +1,115 @@
+<template>
+  <div>
+    <el-row>
+      <el-col :span="12" :offset="6">
+        <div class="chart-title">各单位设备安装情况数量统计</div>
+      </el-col>
+    </el-row>
+    <div>
+      <el-row :gutter="20" type="flex" justify="end">
+        <el-col :span="8" style="margin-right: 30px">
+          <el-select v-model="listQuery.deviceType" class="select-right" size="mini" placeholder="设备类型" clearable @change="fetchData">
+            <el-option
+              v-for="item in deviceTypeList"
+              :key="item.value"
+              :label="item.name"
+              :value="item.value"/>
+          </el-select>
+        </el-col>
+      </el-row>
+    </div>
+    <div>
+      <ve-histogram :data="chartData" :grid="grid" :extend="extend" :settings="chartSettings"/>
+    </div>
+  </div>
+</template>
+
+<script>
+import { getDeviceType } from '@/api/device'
+import { deviceStaticsByDept } from '@/api/dataStatics'
+export default {
+  name: 'DeviceCountByDept',
+  data() {
+    this.extend = {
+      series: {
+        label: { show: true, position: 'top' }
+      }
+    }
+    this.grid = {
+      right: 60
+    }
+    this.title = {
+      text: '设备数量统计'
+    }
+    this.chartSettings = {
+      itemStyle: {
+        'barCategoryGap': 5
+      },
+      barWidth: 15,
+      labelMap: {
+        'deptName': '权属单位',
+        'deviceCount': '设备数量'
+      },
+      dimension: ['deptName'],
+      metrics: ['deviceCount']
+    }
+    return {
+      listQuery: {
+        deviceType: ''
+      },
+      deviceTypeList: [],
+      rawData: '',
+      chartData: {
+        columns: ['deptName', 'deviceCount'],
+        rows: []
+      }
+    }
+  },
+  mounted() {
+    this.fetchDeviceType()
+    this.fetchData()
+  },
+  methods: {
+    // 获取设备类型
+    fetchDeviceType() {
+      getDeviceType(this.listQuery).then(response => {
+        this.deviceTypeList = [{
+          name: '全部',
+          value: ''
+        }]
+        // 过滤掉该单位不支持的设备类型
+        const deviceTypes = this.$store.getters.deviceTypes
+        for (const deviceType of response.data) {
+          if (deviceTypes.indexOf(deviceType.value) !== -1) {
+            this.deviceTypeList.push(deviceType)
+          }
+        }
+        if (this.deviceTypeList.length <= 1) {
+          this.showDeviceType = false
+        }
+      })
+    },
+    fetchData() {
+      console.log('fetchData')
+      deviceStaticsByDept(this.listQuery).then(response => {
+        this.chartData.rows = response.data
+      })
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  .chart-title{
+    margin: auto;
+    text-align: center;
+    margin-top: 15px;
+    font-size:20px;
+    font-weight:600
+  }
+  .select-right{
+    /*margin-right: 25px;*/
+    margin-top: 15px;
+    /*width: 200px*/
+  }
+</style>
diff --git a/src/views/deviceStatics/components/deviceCountByType.vue b/src/views/deviceStatics/components/deviceCountByType.vue
new file mode 100644
index 0000000..a43b0b2
--- /dev/null
+++ b/src/views/deviceStatics/components/deviceCountByType.vue
@@ -0,0 +1,74 @@
+<template>
+  <div>
+    <el-row>
+      <el-col :span="12" :offset="6">
+        <div class="chart-title">设备总量统计</div>
+      </el-col>
+    </el-row>
+    <el-row>
+      <ve-pie :data="chartData" :grid="grid" :legend="legend" :settings="chartSettings"/>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import { deviceStaticsByType } from '@/api/dataStatics'
+
+export default {
+  name: 'DeviceCountByType',
+  data() {
+    this.extend = {
+      series: {
+        label: { show: true, position: 'right' }
+      }
+    }
+    this.legend = {
+      bottom: '10px'
+    }
+    this.chartSettings = {
+      labelMap: {
+        'deviceType': '设备类型',
+        'deviceCount': '设备数量'
+      },
+      dimension: ['deviceType'],
+      metrics: ['deviceCount']
+    }
+    return {
+      chartData: {
+        columns: ['deviceType', 'deviceCount'],
+        rows: []
+      }
+    }
+  },
+  mounted() {
+    // TODO:待调试真接口
+    this.fetchData()
+    // this.chartData.rows = [
+    //   { 'deviceType': '井盖状态监测仪', 'deviceCount': 1393, '下单用户': 1093, '下单率': 0.32 },
+    //   { 'deviceType': '液位监测仪', 'deviceCount': 3530, '下单用户': 3230, '下单率': 0.26 },
+    //   { 'deviceType': '燃气智能监测终端', 'deviceCount': 2923, '下单用户': 2623, '下单率': 0.76 },
+    //   { 'deviceType': '开挖监测仪', 'deviceCount': 1723, '下单用户': 1423, '下单率': 0.49 },
+    //   { 'deviceType': '有害气体监测仪', 'deviceCount': 3792, '下单用户': 3492, '下单率': 0.323 },
+    //   { 'deviceType': '水质监测仪', 'deviceCount': 2, '下单用户': 4293, '下单率': 0.78 },
+    //   { 'deviceType': '流量监测仪', 'deviceCount': 2, '下单用户': 4293, '下单率': 0.78 }
+    // ]
+  },
+  methods: {
+    fetchData() {
+      deviceStaticsByType().then(response => {
+        this.chartData.rows = response.data
+      })
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  .chart-title{
+    margin: auto;
+    text-align: center;
+    margin-top: 15px;
+    font-size:20px;
+    font-weight:600
+  }
+</style>
diff --git a/src/views/deviceStatics/deviceStatics.vue b/src/views/deviceStatics/deviceStatics.vue
new file mode 100644
index 0000000..3f04678
--- /dev/null
+++ b/src/views/deviceStatics/deviceStatics.vue
@@ -0,0 +1,30 @@
+<template>
+  <div class="app-container">
+    <el-row>
+      <el-col :span="12">
+        <device-count-by-type/>
+      </el-col>
+      <el-col :span="12">
+        <device-count-by-dept/>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import DeviceCountByType from './components/deviceCountByType'
+import DeviceCountByDept from './components/deviceCountByDept'
+export default {
+  name: 'DeviceStatics',
+  components: {
+    DeviceCountByDept,
+    DeviceCountByType
+  },
+  data() {
+  }
+}
+</script>
+
+<style scoped>
+
+</style>