diff --git a/src/api/home/device/count.ts b/src/api/home/device/count.ts
new file mode 100644
index 0000000..e7256e2
--- /dev/null
+++ b/src/api/home/device/count.ts
@@ -0,0 +1,53 @@
+/**
+ * 设备管理--设备统计模块接口
+ */
+import request from '@/api/index'
+
+// 设备运行情况
+export function getDeviceRun() {
+  return request({
+    url: '/device/statics/status',
+    method: 'post',
+  })
+}
+
+// 设备上报情况
+export function getDeviceReport() {
+  return request({
+    url: '/device/statics/dataReport',
+    method: 'post',
+  })
+}
+
+// 设备分类统计
+export function getDeviceType() {
+  return request({
+    url: '/device/statics/deviceType',
+    method: 'post',
+  })
+}
+
+// 设备分类统计
+export function getOffline() {
+  return request({
+    url: '/device/statics/offLine',
+    method: 'post',
+  })
+}
+
+// 管理单位设备统计
+export function getDeptDevice() {
+  return request({
+    url: '/device/statics/company',
+    method: 'post',
+  })
+}
+
+// 离线设备清单
+export function getOfflineDevice(data: any) {
+  return request({
+    url: '/device/statics/offLineList',
+    method: 'post',
+    data,
+  })
+}

diff --git a/src/api/home/device/count.ts b/src/api/home/device/count.ts
new file mode 100644
index 0000000..e7256e2
--- /dev/null
+++ b/src/api/home/device/count.ts
@@ -0,0 +1,53 @@
+/**
+ * 设备管理--设备统计模块接口
+ */
+import request from '@/api/index'
+
+// 设备运行情况
+export function getDeviceRun() {
+  return request({
+    url: '/device/statics/status',
+    method: 'post',
+  })
+}
+
+// 设备上报情况
+export function getDeviceReport() {
+  return request({
+    url: '/device/statics/dataReport',
+    method: 'post',
+  })
+}
+
+// 设备分类统计
+export function getDeviceType() {
+  return request({
+    url: '/device/statics/deviceType',
+    method: 'post',
+  })
+}
+
+// 设备分类统计
+export function getOffline() {
+  return request({
+    url: '/device/statics/offLine',
+    method: 'post',
+  })
+}
+
+// 管理单位设备统计
+export function getDeptDevice() {
+  return request({
+    url: '/device/statics/company',
+    method: 'post',
+  })
+}
+
+// 离线设备清单
+export function getOfflineDevice(data: any) {
+  return request({
+    url: '/device/statics/offLineList',
+    method: 'post',
+    data,
+  })
+}
diff --git a/src/api/index.ts b/src/api/index.ts
index 5bc5f16..2d9ecf2 100644
--- a/src/api/index.ts
+++ b/src/api/index.ts
@@ -26,7 +26,7 @@
 const request = axios.create({
   baseURL: window.localStorage.getItem('url-bj-well') as string,
   // baseURL: import.meta.env.DEV && import.meta.env.VITE_OPEN_PROXY === 'true' ? '/proxy/' : import.meta.env.VITE_APP_API_BASEURL,
-  timeout: 1000 * 60,
+  timeout: 1000 * 60 * 2,
   responseType: 'json',
 })
 

diff --git a/src/api/home/device/count.ts b/src/api/home/device/count.ts
new file mode 100644
index 0000000..e7256e2
--- /dev/null
+++ b/src/api/home/device/count.ts
@@ -0,0 +1,53 @@
+/**
+ * 设备管理--设备统计模块接口
+ */
+import request from '@/api/index'
+
+// 设备运行情况
+export function getDeviceRun() {
+  return request({
+    url: '/device/statics/status',
+    method: 'post',
+  })
+}
+
+// 设备上报情况
+export function getDeviceReport() {
+  return request({
+    url: '/device/statics/dataReport',
+    method: 'post',
+  })
+}
+
+// 设备分类统计
+export function getDeviceType() {
+  return request({
+    url: '/device/statics/deviceType',
+    method: 'post',
+  })
+}
+
+// 设备分类统计
+export function getOffline() {
+  return request({
+    url: '/device/statics/offLine',
+    method: 'post',
+  })
+}
+
+// 管理单位设备统计
+export function getDeptDevice() {
+  return request({
+    url: '/device/statics/company',
+    method: 'post',
+  })
+}
+
+// 离线设备清单
+export function getOfflineDevice(data: any) {
+  return request({
+    url: '/device/statics/offLineList',
+    method: 'post',
+    data,
+  })
+}
diff --git a/src/api/index.ts b/src/api/index.ts
index 5bc5f16..2d9ecf2 100644
--- a/src/api/index.ts
+++ b/src/api/index.ts
@@ -26,7 +26,7 @@
 const request = axios.create({
   baseURL: window.localStorage.getItem('url-bj-well') as string,
   // baseURL: import.meta.env.DEV && import.meta.env.VITE_OPEN_PROXY === 'true' ? '/proxy/' : import.meta.env.VITE_APP_API_BASEURL,
-  timeout: 1000 * 60,
+  timeout: 1000 * 60 * 2,
   responseType: 'json',
 })
 
diff --git a/src/assets/images/device/1 b/src/assets/images/device/1
new file mode 100644
index 0000000..e69de29
--- /dev/null
+++ b/src/assets/images/device/1

diff --git a/src/api/home/device/count.ts b/src/api/home/device/count.ts
new file mode 100644
index 0000000..e7256e2
--- /dev/null
+++ b/src/api/home/device/count.ts
@@ -0,0 +1,53 @@
+/**
+ * 设备管理--设备统计模块接口
+ */
+import request from '@/api/index'
+
+// 设备运行情况
+export function getDeviceRun() {
+  return request({
+    url: '/device/statics/status',
+    method: 'post',
+  })
+}
+
+// 设备上报情况
+export function getDeviceReport() {
+  return request({
+    url: '/device/statics/dataReport',
+    method: 'post',
+  })
+}
+
+// 设备分类统计
+export function getDeviceType() {
+  return request({
+    url: '/device/statics/deviceType',
+    method: 'post',
+  })
+}
+
+// 设备分类统计
+export function getOffline() {
+  return request({
+    url: '/device/statics/offLine',
+    method: 'post',
+  })
+}
+
+// 管理单位设备统计
+export function getDeptDevice() {
+  return request({
+    url: '/device/statics/company',
+    method: 'post',
+  })
+}
+
+// 离线设备清单
+export function getOfflineDevice(data: any) {
+  return request({
+    url: '/device/statics/offLineList',
+    method: 'post',
+    data,
+  })
+}
diff --git a/src/api/index.ts b/src/api/index.ts
index 5bc5f16..2d9ecf2 100644
--- a/src/api/index.ts
+++ b/src/api/index.ts
@@ -26,7 +26,7 @@
 const request = axios.create({
   baseURL: window.localStorage.getItem('url-bj-well') as string,
   // baseURL: import.meta.env.DEV && import.meta.env.VITE_OPEN_PROXY === 'true' ? '/proxy/' : import.meta.env.VITE_APP_API_BASEURL,
-  timeout: 1000 * 60,
+  timeout: 1000 * 60 * 2,
   responseType: 'json',
 })
 
diff --git a/src/assets/images/device/1 b/src/assets/images/device/1
new file mode 100644
index 0000000..e69de29
--- /dev/null
+++ b/src/assets/images/device/1
diff --git a/src/assets/images/device/count/offline.png b/src/assets/images/device/count/offline.png
new file mode 100644
index 0000000..9b1f055
--- /dev/null
+++ b/src/assets/images/device/count/offline.png
Binary files differ

diff --git a/src/api/home/device/count.ts b/src/api/home/device/count.ts
new file mode 100644
index 0000000..e7256e2
--- /dev/null
+++ b/src/api/home/device/count.ts
@@ -0,0 +1,53 @@
+/**
+ * 设备管理--设备统计模块接口
+ */
+import request from '@/api/index'
+
+// 设备运行情况
+export function getDeviceRun() {
+  return request({
+    url: '/device/statics/status',
+    method: 'post',
+  })
+}
+
+// 设备上报情况
+export function getDeviceReport() {
+  return request({
+    url: '/device/statics/dataReport',
+    method: 'post',
+  })
+}
+
+// 设备分类统计
+export function getDeviceType() {
+  return request({
+    url: '/device/statics/deviceType',
+    method: 'post',
+  })
+}
+
+// 设备分类统计
+export function getOffline() {
+  return request({
+    url: '/device/statics/offLine',
+    method: 'post',
+  })
+}
+
+// 管理单位设备统计
+export function getDeptDevice() {
+  return request({
+    url: '/device/statics/company',
+    method: 'post',
+  })
+}
+
+// 离线设备清单
+export function getOfflineDevice(data: any) {
+  return request({
+    url: '/device/statics/offLineList',
+    method: 'post',
+    data,
+  })
+}
diff --git a/src/api/index.ts b/src/api/index.ts
index 5bc5f16..2d9ecf2 100644
--- a/src/api/index.ts
+++ b/src/api/index.ts
@@ -26,7 +26,7 @@
 const request = axios.create({
   baseURL: window.localStorage.getItem('url-bj-well') as string,
   // baseURL: import.meta.env.DEV && import.meta.env.VITE_OPEN_PROXY === 'true' ? '/proxy/' : import.meta.env.VITE_APP_API_BASEURL,
-  timeout: 1000 * 60,
+  timeout: 1000 * 60 * 2,
   responseType: 'json',
 })
 
diff --git a/src/assets/images/device/1 b/src/assets/images/device/1
new file mode 100644
index 0000000..e69de29
--- /dev/null
+++ b/src/assets/images/device/1
diff --git a/src/assets/images/device/count/offline.png b/src/assets/images/device/count/offline.png
new file mode 100644
index 0000000..9b1f055
--- /dev/null
+++ b/src/assets/images/device/count/offline.png
Binary files differ
diff --git a/src/assets/images/device/count/online.png b/src/assets/images/device/count/online.png
new file mode 100644
index 0000000..aa8d5e5
--- /dev/null
+++ b/src/assets/images/device/count/online.png
Binary files differ

diff --git a/src/api/home/device/count.ts b/src/api/home/device/count.ts
new file mode 100644
index 0000000..e7256e2
--- /dev/null
+++ b/src/api/home/device/count.ts
@@ -0,0 +1,53 @@
+/**
+ * 设备管理--设备统计模块接口
+ */
+import request from '@/api/index'
+
+// 设备运行情况
+export function getDeviceRun() {
+  return request({
+    url: '/device/statics/status',
+    method: 'post',
+  })
+}
+
+// 设备上报情况
+export function getDeviceReport() {
+  return request({
+    url: '/device/statics/dataReport',
+    method: 'post',
+  })
+}
+
+// 设备分类统计
+export function getDeviceType() {
+  return request({
+    url: '/device/statics/deviceType',
+    method: 'post',
+  })
+}
+
+// 设备分类统计
+export function getOffline() {
+  return request({
+    url: '/device/statics/offLine',
+    method: 'post',
+  })
+}
+
+// 管理单位设备统计
+export function getDeptDevice() {
+  return request({
+    url: '/device/statics/company',
+    method: 'post',
+  })
+}
+
+// 离线设备清单
+export function getOfflineDevice(data: any) {
+  return request({
+    url: '/device/statics/offLineList',
+    method: 'post',
+    data,
+  })
+}
diff --git a/src/api/index.ts b/src/api/index.ts
index 5bc5f16..2d9ecf2 100644
--- a/src/api/index.ts
+++ b/src/api/index.ts
@@ -26,7 +26,7 @@
 const request = axios.create({
   baseURL: window.localStorage.getItem('url-bj-well') as string,
   // baseURL: import.meta.env.DEV && import.meta.env.VITE_OPEN_PROXY === 'true' ? '/proxy/' : import.meta.env.VITE_APP_API_BASEURL,
-  timeout: 1000 * 60,
+  timeout: 1000 * 60 * 2,
   responseType: 'json',
 })
 
diff --git a/src/assets/images/device/1 b/src/assets/images/device/1
new file mode 100644
index 0000000..e69de29
--- /dev/null
+++ b/src/assets/images/device/1
diff --git a/src/assets/images/device/count/offline.png b/src/assets/images/device/count/offline.png
new file mode 100644
index 0000000..9b1f055
--- /dev/null
+++ b/src/assets/images/device/count/offline.png
Binary files differ
diff --git a/src/assets/images/device/count/online.png b/src/assets/images/device/count/online.png
new file mode 100644
index 0000000..aa8d5e5
--- /dev/null
+++ b/src/assets/images/device/count/online.png
Binary files differ
diff --git a/src/assets/images/device/count/stop.png b/src/assets/images/device/count/stop.png
new file mode 100644
index 0000000..a9074b9
--- /dev/null
+++ b/src/assets/images/device/count/stop.png
Binary files differ

diff --git a/src/api/home/device/count.ts b/src/api/home/device/count.ts
new file mode 100644
index 0000000..e7256e2
--- /dev/null
+++ b/src/api/home/device/count.ts
@@ -0,0 +1,53 @@
+/**
+ * 设备管理--设备统计模块接口
+ */
+import request from '@/api/index'
+
+// 设备运行情况
+export function getDeviceRun() {
+  return request({
+    url: '/device/statics/status',
+    method: 'post',
+  })
+}
+
+// 设备上报情况
+export function getDeviceReport() {
+  return request({
+    url: '/device/statics/dataReport',
+    method: 'post',
+  })
+}
+
+// 设备分类统计
+export function getDeviceType() {
+  return request({
+    url: '/device/statics/deviceType',
+    method: 'post',
+  })
+}
+
+// 设备分类统计
+export function getOffline() {
+  return request({
+    url: '/device/statics/offLine',
+    method: 'post',
+  })
+}
+
+// 管理单位设备统计
+export function getDeptDevice() {
+  return request({
+    url: '/device/statics/company',
+    method: 'post',
+  })
+}
+
+// 离线设备清单
+export function getOfflineDevice(data: any) {
+  return request({
+    url: '/device/statics/offLineList',
+    method: 'post',
+    data,
+  })
+}
diff --git a/src/api/index.ts b/src/api/index.ts
index 5bc5f16..2d9ecf2 100644
--- a/src/api/index.ts
+++ b/src/api/index.ts
@@ -26,7 +26,7 @@
 const request = axios.create({
   baseURL: window.localStorage.getItem('url-bj-well') as string,
   // baseURL: import.meta.env.DEV && import.meta.env.VITE_OPEN_PROXY === 'true' ? '/proxy/' : import.meta.env.VITE_APP_API_BASEURL,
-  timeout: 1000 * 60,
+  timeout: 1000 * 60 * 2,
   responseType: 'json',
 })
 
diff --git a/src/assets/images/device/1 b/src/assets/images/device/1
new file mode 100644
index 0000000..e69de29
--- /dev/null
+++ b/src/assets/images/device/1
diff --git a/src/assets/images/device/count/offline.png b/src/assets/images/device/count/offline.png
new file mode 100644
index 0000000..9b1f055
--- /dev/null
+++ b/src/assets/images/device/count/offline.png
Binary files differ
diff --git a/src/assets/images/device/count/online.png b/src/assets/images/device/count/online.png
new file mode 100644
index 0000000..aa8d5e5
--- /dev/null
+++ b/src/assets/images/device/count/online.png
Binary files differ
diff --git a/src/assets/images/device/count/stop.png b/src/assets/images/device/count/stop.png
new file mode 100644
index 0000000..a9074b9
--- /dev/null
+++ b/src/assets/images/device/count/stop.png
Binary files differ
diff --git a/src/components/Echart/PieChart.vue b/src/components/Echart/PieChart.vue
index 74d506a..ca56b83 100644
--- a/src/components/Echart/PieChart.vue
+++ b/src/components/Echart/PieChart.vue
@@ -211,9 +211,9 @@
       right: props.right,
       label: {
         show: props.labelShow,
-        position: 'center',
+        position: props.labelPosition,
         formatter: props.labelFormatter ? props.labelFormatter : (props.valueType == 'percentage' ? '{style1|{b}}\n{style2|{d}%}' : '{style1|{b}}\n{style2|{c}}'),
-        fontSize: 20,
+        fontSize: 16,
         fontWeight: 'bold',
         rich: {
           style1: {

diff --git a/src/api/home/device/count.ts b/src/api/home/device/count.ts
new file mode 100644
index 0000000..e7256e2
--- /dev/null
+++ b/src/api/home/device/count.ts
@@ -0,0 +1,53 @@
+/**
+ * 设备管理--设备统计模块接口
+ */
+import request from '@/api/index'
+
+// 设备运行情况
+export function getDeviceRun() {
+  return request({
+    url: '/device/statics/status',
+    method: 'post',
+  })
+}
+
+// 设备上报情况
+export function getDeviceReport() {
+  return request({
+    url: '/device/statics/dataReport',
+    method: 'post',
+  })
+}
+
+// 设备分类统计
+export function getDeviceType() {
+  return request({
+    url: '/device/statics/deviceType',
+    method: 'post',
+  })
+}
+
+// 设备分类统计
+export function getOffline() {
+  return request({
+    url: '/device/statics/offLine',
+    method: 'post',
+  })
+}
+
+// 管理单位设备统计
+export function getDeptDevice() {
+  return request({
+    url: '/device/statics/company',
+    method: 'post',
+  })
+}
+
+// 离线设备清单
+export function getOfflineDevice(data: any) {
+  return request({
+    url: '/device/statics/offLineList',
+    method: 'post',
+    data,
+  })
+}
diff --git a/src/api/index.ts b/src/api/index.ts
index 5bc5f16..2d9ecf2 100644
--- a/src/api/index.ts
+++ b/src/api/index.ts
@@ -26,7 +26,7 @@
 const request = axios.create({
   baseURL: window.localStorage.getItem('url-bj-well') as string,
   // baseURL: import.meta.env.DEV && import.meta.env.VITE_OPEN_PROXY === 'true' ? '/proxy/' : import.meta.env.VITE_APP_API_BASEURL,
-  timeout: 1000 * 60,
+  timeout: 1000 * 60 * 2,
   responseType: 'json',
 })
 
diff --git a/src/assets/images/device/1 b/src/assets/images/device/1
new file mode 100644
index 0000000..e69de29
--- /dev/null
+++ b/src/assets/images/device/1
diff --git a/src/assets/images/device/count/offline.png b/src/assets/images/device/count/offline.png
new file mode 100644
index 0000000..9b1f055
--- /dev/null
+++ b/src/assets/images/device/count/offline.png
Binary files differ
diff --git a/src/assets/images/device/count/online.png b/src/assets/images/device/count/online.png
new file mode 100644
index 0000000..aa8d5e5
--- /dev/null
+++ b/src/assets/images/device/count/online.png
Binary files differ
diff --git a/src/assets/images/device/count/stop.png b/src/assets/images/device/count/stop.png
new file mode 100644
index 0000000..a9074b9
--- /dev/null
+++ b/src/assets/images/device/count/stop.png
Binary files differ
diff --git a/src/components/Echart/PieChart.vue b/src/components/Echart/PieChart.vue
index 74d506a..ca56b83 100644
--- a/src/components/Echart/PieChart.vue
+++ b/src/components/Echart/PieChart.vue
@@ -211,9 +211,9 @@
       right: props.right,
       label: {
         show: props.labelShow,
-        position: 'center',
+        position: props.labelPosition,
         formatter: props.labelFormatter ? props.labelFormatter : (props.valueType == 'percentage' ? '{style1|{b}}\n{style2|{d}%}' : '{style1|{b}}\n{style2|{c}}'),
-        fontSize: 20,
+        fontSize: 16,
         fontWeight: 'bold',
         rich: {
           style1: {
diff --git a/src/views/home/device/count/components/bottom.vue b/src/views/home/device/count/components/bottom.vue
new file mode 100644
index 0000000..4b16e06
--- /dev/null
+++ b/src/views/home/device/count/components/bottom.vue
@@ -0,0 +1,210 @@
+<!--
+  Description: 设备统计-管理单位设备统计和离线设备清单
+  Author: 李亚光
+  Date: 2023-08-22
+ -->
+<script lang="ts" setup name="DeptDeviceCount">
+import { getDeviceTypeListPage } from '@/api/home/device/type'
+import { getDictByCode } from '@/api/system/dict'
+import { getDeptDevice, getOfflineDevice } from '@/api/home/device/count'
+// 设备分类统计数据
+const xAxisData = ref([])
+const data = ref<any[]>([])
+setTimeout(() => {
+  xAxisData.value = [
+    '第一分公司', '第二分公司', '第三分公司', '第四分公司', '第五分公司',
+  ]
+  data.value = [
+    {
+      name: '燃气智能终端',
+      data: [1, 8, 5, 8, 4],
+    },
+    {
+      name: '管盯',
+      data: [2, 4, 1, 8, 1],
+    },
+  ]
+}, 1000)
+// 获取数据
+const fetchData = () => {
+  getDeptDevice().then((res) => {
+    //   xAxisData.value = res.data.map((item: any) => item.name)
+    //   data
+    //  console.log(res.data, '222222222222222')
+  })
+}
+fetchData()
+
+// 设备离线清单数据
+const list = ref([])
+const total = ref(0)
+const loadingTable = ref(true)
+const columns = ref([
+  { text: '设备编号', value: 'devcode', align: 'center' },
+  { text: '设备类型', value: 'devTypeName', align: 'center' },
+  { text: '安装位号', value: 'tagNumber', align: 'center' },
+  { text: '最新记录上传时间', value: 'lastTime', align: 'center' },
+  { text: '离线天数', value: 'offDays', align: 'center', width: '90' },
+  { text: '离线原因预测', value: 'reasons', align: 'center', width: '100' },
+])
+const listQuery = ref({
+  devcode: '',
+  devTypeId: '',
+  reasons: '',
+  limit: 20,
+  offset: 1,
+})
+// 查询列表
+const fetchListData = () => {
+  loadingTable.value = true
+  getOfflineDevice(listQuery.value).then((res) => {
+    total.value = res.data.total
+    list.value = res.data.rows
+    loadingTable.value = false
+  })
+}
+fetchListData()
+// 重置搜索条件
+const reset = () => {
+  listQuery.value = {
+    devcode: '',
+    devTypeId: '',
+    reasons: '',
+    limit: 20,
+    offset: 1,
+  }
+  fetchListData()
+}
+// 页数发生变化后的操作，可能是页码变化，可能是每页容量变化，此函数必写
+const changePage = (val: { size: number; page: number }) => {
+  if (val && val.size) {
+    listQuery.value.limit = val.size
+  }
+  if (val && val.page) {
+    listQuery.value.offset = val.page
+  }
+  fetchListData()
+}
+const deviceTypeList = ref<{ id: string; name: string; value: string }[]>([]) // 设备类型
+const reasonsList = ref<{ id: string; name: string; value: string }[]>([]) // 离线原因
+// 获取字典
+const fetchDict = () => {
+  // 设备类型
+  getDeviceTypeListPage({ limit: 9999, offset: 1 }).then((res) => {
+    deviceTypeList.value = res.data.rows.map((item: any) => ({ id: item.id, name: item.typeName, value: item.id }))
+  })
+  getDictByCode('reasonsOffline').then((res) => {
+    reasonsList.value = res.data
+  })
+}
+fetchDict()
+</script>
+
+<template>
+  <div class="header-container">
+    <!-- 管理单位设备统计 -->
+    <div class="header-left">
+      <div class="title">
+        管理单位设备统计
+      </div>
+      <div class="content">
+        <bar-chart-vertical
+          :x-axis-data="xAxisData" :bar-coner="0" :data="data" :colors="[]" :bar-width="15"
+          :legend="{ itemWidth: 8, itemHeight: 8, type: 'scroll', orient: 'horizontal', icon: 'roundRect', right: '0', top: '10' }"
+        />
+      </div>
+    </div>
+    <!-- 离线设备清单 -->
+    <div class="header-right">
+      <div class="title">
+        离线设备清单
+      </div>
+      <div class="content">
+        <search-area :need-clear="true" @search="fetchListData" @clear="reset">
+          <search-item>
+            <el-input v-model.trim="listQuery.devcode" placeholder="设备编号" clearable />
+          </search-item>
+          <search-item>
+            <el-select v-model="listQuery.devTypeId" placeholder="设备类型" clearable class="select">
+              <el-option v-for="item in deviceTypeList" :key="item.id" :label="item.name" :value="item.value" />
+            </el-select>
+          </search-item>
+          <search-item>
+            <el-select v-model="listQuery.reasons" placeholder="离线原因" clearable class="select">
+              <el-option v-for="item in reasonsList" :key="item.id" :label="item.name" :value="item.value" />
+            </el-select>
+          </search-item>
+        </search-area>
+        <table-container>
+          <template #btns-right>
+            <!-- 操作 -->
+            <div>
+              <el-button type="primary">
+                导出
+              </el-button>
+            </div>
+          </template>
+          <normal-table
+            :data="list" :total="total" :columns="columns" :height="200" :query="listQuery" :list-loading="loadingTable"
+            @change="changePage"
+          >
+            <template #preColumns>
+              <el-table-column label="序号" width="55" align="center">
+                <template #default="scope">
+                  {{ (listQuery.offset - 1) * listQuery.limit + scope.$index + 1 }}
+                </template>
+              </el-table-column>
+            </template>
+          </normal-table>
+        </table-container>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.header-container {
+  display: flex;
+
+  .header-left {
+    width: 50%;
+    box-sizing: border-box;
+    padding: 10px;
+
+    .title {
+      font-weight: 700;
+      font-size: 18px;
+      border-bottom: 1px solid #ccc;
+      padding-bottom: 5px;
+    }
+
+    .content {
+      height: 370px;
+    }
+  }
+
+  .header-right {
+    width: 50%;
+    box-sizing: border-box;
+    padding: 10px;
+
+    .title {
+      font-weight: 700;
+      font-size: 18px;
+      border-bottom: 1px solid #ccc;
+      padding-bottom: 5px;
+    }
+
+    // .content {
+    //   // display: flex;
+    //   // padding: 10px;
+    // }
+  }
+}
+</style>
+
+<style>
+.select {
+  width: 192px !important;
+}
+</style>

diff --git a/src/api/home/device/count.ts b/src/api/home/device/count.ts
new file mode 100644
index 0000000..e7256e2
--- /dev/null
+++ b/src/api/home/device/count.ts
@@ -0,0 +1,53 @@
+/**
+ * 设备管理--设备统计模块接口
+ */
+import request from '@/api/index'
+
+// 设备运行情况
+export function getDeviceRun() {
+  return request({
+    url: '/device/statics/status',
+    method: 'post',
+  })
+}
+
+// 设备上报情况
+export function getDeviceReport() {
+  return request({
+    url: '/device/statics/dataReport',
+    method: 'post',
+  })
+}
+
+// 设备分类统计
+export function getDeviceType() {
+  return request({
+    url: '/device/statics/deviceType',
+    method: 'post',
+  })
+}
+
+// 设备分类统计
+export function getOffline() {
+  return request({
+    url: '/device/statics/offLine',
+    method: 'post',
+  })
+}
+
+// 管理单位设备统计
+export function getDeptDevice() {
+  return request({
+    url: '/device/statics/company',
+    method: 'post',
+  })
+}
+
+// 离线设备清单
+export function getOfflineDevice(data: any) {
+  return request({
+    url: '/device/statics/offLineList',
+    method: 'post',
+    data,
+  })
+}
diff --git a/src/api/index.ts b/src/api/index.ts
index 5bc5f16..2d9ecf2 100644
--- a/src/api/index.ts
+++ b/src/api/index.ts
@@ -26,7 +26,7 @@
 const request = axios.create({
   baseURL: window.localStorage.getItem('url-bj-well') as string,
   // baseURL: import.meta.env.DEV && import.meta.env.VITE_OPEN_PROXY === 'true' ? '/proxy/' : import.meta.env.VITE_APP_API_BASEURL,
-  timeout: 1000 * 60,
+  timeout: 1000 * 60 * 2,
   responseType: 'json',
 })
 
diff --git a/src/assets/images/device/1 b/src/assets/images/device/1
new file mode 100644
index 0000000..e69de29
--- /dev/null
+++ b/src/assets/images/device/1
diff --git a/src/assets/images/device/count/offline.png b/src/assets/images/device/count/offline.png
new file mode 100644
index 0000000..9b1f055
--- /dev/null
+++ b/src/assets/images/device/count/offline.png
Binary files differ
diff --git a/src/assets/images/device/count/online.png b/src/assets/images/device/count/online.png
new file mode 100644
index 0000000..aa8d5e5
--- /dev/null
+++ b/src/assets/images/device/count/online.png
Binary files differ
diff --git a/src/assets/images/device/count/stop.png b/src/assets/images/device/count/stop.png
new file mode 100644
index 0000000..a9074b9
--- /dev/null
+++ b/src/assets/images/device/count/stop.png
Binary files differ
diff --git a/src/components/Echart/PieChart.vue b/src/components/Echart/PieChart.vue
index 74d506a..ca56b83 100644
--- a/src/components/Echart/PieChart.vue
+++ b/src/components/Echart/PieChart.vue
@@ -211,9 +211,9 @@
       right: props.right,
       label: {
         show: props.labelShow,
-        position: 'center',
+        position: props.labelPosition,
         formatter: props.labelFormatter ? props.labelFormatter : (props.valueType == 'percentage' ? '{style1|{b}}\n{style2|{d}%}' : '{style1|{b}}\n{style2|{c}}'),
-        fontSize: 20,
+        fontSize: 16,
         fontWeight: 'bold',
         rich: {
           style1: {
diff --git a/src/views/home/device/count/components/bottom.vue b/src/views/home/device/count/components/bottom.vue
new file mode 100644
index 0000000..4b16e06
--- /dev/null
+++ b/src/views/home/device/count/components/bottom.vue
@@ -0,0 +1,210 @@
+<!--
+  Description: 设备统计-管理单位设备统计和离线设备清单
+  Author: 李亚光
+  Date: 2023-08-22
+ -->
+<script lang="ts" setup name="DeptDeviceCount">
+import { getDeviceTypeListPage } from '@/api/home/device/type'
+import { getDictByCode } from '@/api/system/dict'
+import { getDeptDevice, getOfflineDevice } from '@/api/home/device/count'
+// 设备分类统计数据
+const xAxisData = ref([])
+const data = ref<any[]>([])
+setTimeout(() => {
+  xAxisData.value = [
+    '第一分公司', '第二分公司', '第三分公司', '第四分公司', '第五分公司',
+  ]
+  data.value = [
+    {
+      name: '燃气智能终端',
+      data: [1, 8, 5, 8, 4],
+    },
+    {
+      name: '管盯',
+      data: [2, 4, 1, 8, 1],
+    },
+  ]
+}, 1000)
+// 获取数据
+const fetchData = () => {
+  getDeptDevice().then((res) => {
+    //   xAxisData.value = res.data.map((item: any) => item.name)
+    //   data
+    //  console.log(res.data, '222222222222222')
+  })
+}
+fetchData()
+
+// 设备离线清单数据
+const list = ref([])
+const total = ref(0)
+const loadingTable = ref(true)
+const columns = ref([
+  { text: '设备编号', value: 'devcode', align: 'center' },
+  { text: '设备类型', value: 'devTypeName', align: 'center' },
+  { text: '安装位号', value: 'tagNumber', align: 'center' },
+  { text: '最新记录上传时间', value: 'lastTime', align: 'center' },
+  { text: '离线天数', value: 'offDays', align: 'center', width: '90' },
+  { text: '离线原因预测', value: 'reasons', align: 'center', width: '100' },
+])
+const listQuery = ref({
+  devcode: '',
+  devTypeId: '',
+  reasons: '',
+  limit: 20,
+  offset: 1,
+})
+// 查询列表
+const fetchListData = () => {
+  loadingTable.value = true
+  getOfflineDevice(listQuery.value).then((res) => {
+    total.value = res.data.total
+    list.value = res.data.rows
+    loadingTable.value = false
+  })
+}
+fetchListData()
+// 重置搜索条件
+const reset = () => {
+  listQuery.value = {
+    devcode: '',
+    devTypeId: '',
+    reasons: '',
+    limit: 20,
+    offset: 1,
+  }
+  fetchListData()
+}
+// 页数发生变化后的操作，可能是页码变化，可能是每页容量变化，此函数必写
+const changePage = (val: { size: number; page: number }) => {
+  if (val && val.size) {
+    listQuery.value.limit = val.size
+  }
+  if (val && val.page) {
+    listQuery.value.offset = val.page
+  }
+  fetchListData()
+}
+const deviceTypeList = ref<{ id: string; name: string; value: string }[]>([]) // 设备类型
+const reasonsList = ref<{ id: string; name: string; value: string }[]>([]) // 离线原因
+// 获取字典
+const fetchDict = () => {
+  // 设备类型
+  getDeviceTypeListPage({ limit: 9999, offset: 1 }).then((res) => {
+    deviceTypeList.value = res.data.rows.map((item: any) => ({ id: item.id, name: item.typeName, value: item.id }))
+  })
+  getDictByCode('reasonsOffline').then((res) => {
+    reasonsList.value = res.data
+  })
+}
+fetchDict()
+</script>
+
+<template>
+  <div class="header-container">
+    <!-- 管理单位设备统计 -->
+    <div class="header-left">
+      <div class="title">
+        管理单位设备统计
+      </div>
+      <div class="content">
+        <bar-chart-vertical
+          :x-axis-data="xAxisData" :bar-coner="0" :data="data" :colors="[]" :bar-width="15"
+          :legend="{ itemWidth: 8, itemHeight: 8, type: 'scroll', orient: 'horizontal', icon: 'roundRect', right: '0', top: '10' }"
+        />
+      </div>
+    </div>
+    <!-- 离线设备清单 -->
+    <div class="header-right">
+      <div class="title">
+        离线设备清单
+      </div>
+      <div class="content">
+        <search-area :need-clear="true" @search="fetchListData" @clear="reset">
+          <search-item>
+            <el-input v-model.trim="listQuery.devcode" placeholder="设备编号" clearable />
+          </search-item>
+          <search-item>
+            <el-select v-model="listQuery.devTypeId" placeholder="设备类型" clearable class="select">
+              <el-option v-for="item in deviceTypeList" :key="item.id" :label="item.name" :value="item.value" />
+            </el-select>
+          </search-item>
+          <search-item>
+            <el-select v-model="listQuery.reasons" placeholder="离线原因" clearable class="select">
+              <el-option v-for="item in reasonsList" :key="item.id" :label="item.name" :value="item.value" />
+            </el-select>
+          </search-item>
+        </search-area>
+        <table-container>
+          <template #btns-right>
+            <!-- 操作 -->
+            <div>
+              <el-button type="primary">
+                导出
+              </el-button>
+            </div>
+          </template>
+          <normal-table
+            :data="list" :total="total" :columns="columns" :height="200" :query="listQuery" :list-loading="loadingTable"
+            @change="changePage"
+          >
+            <template #preColumns>
+              <el-table-column label="序号" width="55" align="center">
+                <template #default="scope">
+                  {{ (listQuery.offset - 1) * listQuery.limit + scope.$index + 1 }}
+                </template>
+              </el-table-column>
+            </template>
+          </normal-table>
+        </table-container>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.header-container {
+  display: flex;
+
+  .header-left {
+    width: 50%;
+    box-sizing: border-box;
+    padding: 10px;
+
+    .title {
+      font-weight: 700;
+      font-size: 18px;
+      border-bottom: 1px solid #ccc;
+      padding-bottom: 5px;
+    }
+
+    .content {
+      height: 370px;
+    }
+  }
+
+  .header-right {
+    width: 50%;
+    box-sizing: border-box;
+    padding: 10px;
+
+    .title {
+      font-weight: 700;
+      font-size: 18px;
+      border-bottom: 1px solid #ccc;
+      padding-bottom: 5px;
+    }
+
+    // .content {
+    //   // display: flex;
+    //   // padding: 10px;
+    // }
+  }
+}
+</style>
+
+<style>
+.select {
+  width: 192px !important;
+}
+</style>
diff --git a/src/views/home/device/count/components/header.vue b/src/views/home/device/count/components/header.vue
new file mode 100644
index 0000000..e732ea6
--- /dev/null
+++ b/src/views/home/device/count/components/header.vue
@@ -0,0 +1,215 @@
+<!--
+  Description: 设备统计-设备运行情况和数据上报情况
+  Author: 李亚光
+  Date: 2023-08-22
+ -->
+<script lang="ts" setup name="DeviceReport">
+import { img } from './imgData'
+import { getDeviceReport, getDeviceRun } from '@/api/home/device/count'
+// 设备运行情况数据
+const runData = ref([
+  {
+    name: '在线',
+    value: 0,
+    unit: '个',
+    img: img.online,
+    id: '1',
+  },
+  {
+    name: '离线',
+    value: 0,
+    unit: '个',
+    img: img.offline,
+    id: '0',
+  },
+  {
+    name: '维修',
+    value: 0,
+    unit: '个',
+    img: img.upkeep,
+    id: '2',
+  },
+  {
+    name: '备用',
+    value: 0,
+    unit: '个',
+    img: img.backup,
+    id: '3',
+  },
+
+])
+
+// 设备上报情况数据
+const reportData = ref([
+  {
+    name: '日上报量',
+    value: 0,
+    unit: '条',
+    id: 'day',
+  },
+  {
+    name: '月上报量',
+    value: 0,
+    unit: '条',
+    id: 'month',
+  },
+])
+
+// 获取设备运行状况数据和设备上报情况数据
+const fetchData = () => {
+  getDeviceRun().then((res) => {
+    res.data.forEach((element: any) => {
+      const index = runData.value.findIndex((item: any) => item.id === element.name)
+      if (index !== -1) {
+        runData.value[index].value = element.value
+      }
+    })
+  })
+  getDeviceReport().then((res) => {
+    res.data.forEach((element: any) => {
+      const index = reportData.value.findIndex((item: any) => item.id === element.name)
+      if (index !== -1) {
+        reportData.value[index].value = element.value
+      }
+    })
+  })
+}
+fetchData()
+</script>
+
+<template>
+  <div class="header-container">
+    <!-- 设备运行情况 -->
+    <div class="header-left">
+      <div class="title">
+        设备运行情况
+      </div>
+      <div class="content">
+        <div v-for="item in runData" :key="item.name" class="item">
+          <div class="img">
+            <img :src="item.img">
+          </div>
+          <div class="text">
+            <div class="name">
+              {{ item.name }}
+            </div>
+            <div class="value">
+              <span class="count"> {{ item.value }}</span>
+              <span class="unit"> {{ item.unit }}</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <!-- 数据上报情况 -->
+    <div class="header-right">
+      <div class="title">
+        数据上报情况
+      </div>
+      <div class="content">
+        <div v-for="item in reportData" :key="item.name" class="item">
+          <div class="name">
+            {{ item.name }}
+          </div>
+          <div class="value">
+            <span class="conut"> {{ item.value }}</span>
+            <span class="unit"> {{ item.unit }}</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.header-container {
+  display: flex;
+
+  .header-left {
+    width: 65%;
+    box-sizing: border-box;
+    padding: 10px;
+
+    .title {
+      font-weight: 700;
+      font-size: 18px;
+      border-bottom: 1px solid #ccc;
+      padding-bottom: 5px;
+    }
+
+    .content {
+      display: flex;
+
+      .item {
+        width: 25%;
+        box-sizing: border-box;
+        display: flex;
+        padding: 10px;
+
+        img {
+          width: 55px;
+          height: 55px;
+        }
+
+        .text {
+          margin-left: 25px;
+
+          .name {
+            font-weight: 700;
+            height: 27.5px;
+            line-height: 27.5px;
+          }
+
+          .value {
+            height: 27.5px;
+            line-height: 27.5px;
+
+            .count {
+              font-size: 20px;
+              font-weight: 700;
+            }
+          }
+        }
+      }
+    }
+  }
+
+  .header-right {
+    width: 35%;
+    box-sizing: border-box;
+    padding: 10px;
+
+    .title {
+      font-weight: 700;
+      font-size: 18px;
+      border-bottom: 1px solid #ccc;
+      padding-bottom: 5px;
+    }
+
+    .content {
+      display: flex;
+      padding: 10px;
+
+      .item {
+        width: 45%;
+
+        .name {
+          font-weight: 700;
+          height: 27.5px;
+          line-height: 27.5px;
+        }
+
+        .value {
+          height: 27.5px;
+          line-height: 27.5px;
+
+          .conut {
+            font-size: 20px;
+            font-weight: 700;
+          }
+        }
+      }
+    }
+  }
+}
+</style>

diff --git a/src/api/home/device/count.ts b/src/api/home/device/count.ts
new file mode 100644
index 0000000..e7256e2
--- /dev/null
+++ b/src/api/home/device/count.ts
@@ -0,0 +1,53 @@
+/**
+ * 设备管理--设备统计模块接口
+ */
+import request from '@/api/index'
+
+// 设备运行情况
+export function getDeviceRun() {
+  return request({
+    url: '/device/statics/status',
+    method: 'post',
+  })
+}
+
+// 设备上报情况
+export function getDeviceReport() {
+  return request({
+    url: '/device/statics/dataReport',
+    method: 'post',
+  })
+}
+
+// 设备分类统计
+export function getDeviceType() {
+  return request({
+    url: '/device/statics/deviceType',
+    method: 'post',
+  })
+}
+
+// 设备分类统计
+export function getOffline() {
+  return request({
+    url: '/device/statics/offLine',
+    method: 'post',
+  })
+}
+
+// 管理单位设备统计
+export function getDeptDevice() {
+  return request({
+    url: '/device/statics/company',
+    method: 'post',
+  })
+}
+
+// 离线设备清单
+export function getOfflineDevice(data: any) {
+  return request({
+    url: '/device/statics/offLineList',
+    method: 'post',
+    data,
+  })
+}
diff --git a/src/api/index.ts b/src/api/index.ts
index 5bc5f16..2d9ecf2 100644
--- a/src/api/index.ts
+++ b/src/api/index.ts
@@ -26,7 +26,7 @@
 const request = axios.create({
   baseURL: window.localStorage.getItem('url-bj-well') as string,
   // baseURL: import.meta.env.DEV && import.meta.env.VITE_OPEN_PROXY === 'true' ? '/proxy/' : import.meta.env.VITE_APP_API_BASEURL,
-  timeout: 1000 * 60,
+  timeout: 1000 * 60 * 2,
   responseType: 'json',
 })
 
diff --git a/src/assets/images/device/1 b/src/assets/images/device/1
new file mode 100644
index 0000000..e69de29
--- /dev/null
+++ b/src/assets/images/device/1
diff --git a/src/assets/images/device/count/offline.png b/src/assets/images/device/count/offline.png
new file mode 100644
index 0000000..9b1f055
--- /dev/null
+++ b/src/assets/images/device/count/offline.png
Binary files differ
diff --git a/src/assets/images/device/count/online.png b/src/assets/images/device/count/online.png
new file mode 100644
index 0000000..aa8d5e5
--- /dev/null
+++ b/src/assets/images/device/count/online.png
Binary files differ
diff --git a/src/assets/images/device/count/stop.png b/src/assets/images/device/count/stop.png
new file mode 100644
index 0000000..a9074b9
--- /dev/null
+++ b/src/assets/images/device/count/stop.png
Binary files differ
diff --git a/src/components/Echart/PieChart.vue b/src/components/Echart/PieChart.vue
index 74d506a..ca56b83 100644
--- a/src/components/Echart/PieChart.vue
+++ b/src/components/Echart/PieChart.vue
@@ -211,9 +211,9 @@
       right: props.right,
       label: {
         show: props.labelShow,
-        position: 'center',
+        position: props.labelPosition,
         formatter: props.labelFormatter ? props.labelFormatter : (props.valueType == 'percentage' ? '{style1|{b}}\n{style2|{d}%}' : '{style1|{b}}\n{style2|{c}}'),
-        fontSize: 20,
+        fontSize: 16,
         fontWeight: 'bold',
         rich: {
           style1: {
diff --git a/src/views/home/device/count/components/bottom.vue b/src/views/home/device/count/components/bottom.vue
new file mode 100644
index 0000000..4b16e06
--- /dev/null
+++ b/src/views/home/device/count/components/bottom.vue
@@ -0,0 +1,210 @@
+<!--
+  Description: 设备统计-管理单位设备统计和离线设备清单
+  Author: 李亚光
+  Date: 2023-08-22
+ -->
+<script lang="ts" setup name="DeptDeviceCount">
+import { getDeviceTypeListPage } from '@/api/home/device/type'
+import { getDictByCode } from '@/api/system/dict'
+import { getDeptDevice, getOfflineDevice } from '@/api/home/device/count'
+// 设备分类统计数据
+const xAxisData = ref([])
+const data = ref<any[]>([])
+setTimeout(() => {
+  xAxisData.value = [
+    '第一分公司', '第二分公司', '第三分公司', '第四分公司', '第五分公司',
+  ]
+  data.value = [
+    {
+      name: '燃气智能终端',
+      data: [1, 8, 5, 8, 4],
+    },
+    {
+      name: '管盯',
+      data: [2, 4, 1, 8, 1],
+    },
+  ]
+}, 1000)
+// 获取数据
+const fetchData = () => {
+  getDeptDevice().then((res) => {
+    //   xAxisData.value = res.data.map((item: any) => item.name)
+    //   data
+    //  console.log(res.data, '222222222222222')
+  })
+}
+fetchData()
+
+// 设备离线清单数据
+const list = ref([])
+const total = ref(0)
+const loadingTable = ref(true)
+const columns = ref([
+  { text: '设备编号', value: 'devcode', align: 'center' },
+  { text: '设备类型', value: 'devTypeName', align: 'center' },
+  { text: '安装位号', value: 'tagNumber', align: 'center' },
+  { text: '最新记录上传时间', value: 'lastTime', align: 'center' },
+  { text: '离线天数', value: 'offDays', align: 'center', width: '90' },
+  { text: '离线原因预测', value: 'reasons', align: 'center', width: '100' },
+])
+const listQuery = ref({
+  devcode: '',
+  devTypeId: '',
+  reasons: '',
+  limit: 20,
+  offset: 1,
+})
+// 查询列表
+const fetchListData = () => {
+  loadingTable.value = true
+  getOfflineDevice(listQuery.value).then((res) => {
+    total.value = res.data.total
+    list.value = res.data.rows
+    loadingTable.value = false
+  })
+}
+fetchListData()
+// 重置搜索条件
+const reset = () => {
+  listQuery.value = {
+    devcode: '',
+    devTypeId: '',
+    reasons: '',
+    limit: 20,
+    offset: 1,
+  }
+  fetchListData()
+}
+// 页数发生变化后的操作，可能是页码变化，可能是每页容量变化，此函数必写
+const changePage = (val: { size: number; page: number }) => {
+  if (val && val.size) {
+    listQuery.value.limit = val.size
+  }
+  if (val && val.page) {
+    listQuery.value.offset = val.page
+  }
+  fetchListData()
+}
+const deviceTypeList = ref<{ id: string; name: string; value: string }[]>([]) // 设备类型
+const reasonsList = ref<{ id: string; name: string; value: string }[]>([]) // 离线原因
+// 获取字典
+const fetchDict = () => {
+  // 设备类型
+  getDeviceTypeListPage({ limit: 9999, offset: 1 }).then((res) => {
+    deviceTypeList.value = res.data.rows.map((item: any) => ({ id: item.id, name: item.typeName, value: item.id }))
+  })
+  getDictByCode('reasonsOffline').then((res) => {
+    reasonsList.value = res.data
+  })
+}
+fetchDict()
+</script>
+
+<template>
+  <div class="header-container">
+    <!-- 管理单位设备统计 -->
+    <div class="header-left">
+      <div class="title">
+        管理单位设备统计
+      </div>
+      <div class="content">
+        <bar-chart-vertical
+          :x-axis-data="xAxisData" :bar-coner="0" :data="data" :colors="[]" :bar-width="15"
+          :legend="{ itemWidth: 8, itemHeight: 8, type: 'scroll', orient: 'horizontal', icon: 'roundRect', right: '0', top: '10' }"
+        />
+      </div>
+    </div>
+    <!-- 离线设备清单 -->
+    <div class="header-right">
+      <div class="title">
+        离线设备清单
+      </div>
+      <div class="content">
+        <search-area :need-clear="true" @search="fetchListData" @clear="reset">
+          <search-item>
+            <el-input v-model.trim="listQuery.devcode" placeholder="设备编号" clearable />
+          </search-item>
+          <search-item>
+            <el-select v-model="listQuery.devTypeId" placeholder="设备类型" clearable class="select">
+              <el-option v-for="item in deviceTypeList" :key="item.id" :label="item.name" :value="item.value" />
+            </el-select>
+          </search-item>
+          <search-item>
+            <el-select v-model="listQuery.reasons" placeholder="离线原因" clearable class="select">
+              <el-option v-for="item in reasonsList" :key="item.id" :label="item.name" :value="item.value" />
+            </el-select>
+          </search-item>
+        </search-area>
+        <table-container>
+          <template #btns-right>
+            <!-- 操作 -->
+            <div>
+              <el-button type="primary">
+                导出
+              </el-button>
+            </div>
+          </template>
+          <normal-table
+            :data="list" :total="total" :columns="columns" :height="200" :query="listQuery" :list-loading="loadingTable"
+            @change="changePage"
+          >
+            <template #preColumns>
+              <el-table-column label="序号" width="55" align="center">
+                <template #default="scope">
+                  {{ (listQuery.offset - 1) * listQuery.limit + scope.$index + 1 }}
+                </template>
+              </el-table-column>
+            </template>
+          </normal-table>
+        </table-container>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.header-container {
+  display: flex;
+
+  .header-left {
+    width: 50%;
+    box-sizing: border-box;
+    padding: 10px;
+
+    .title {
+      font-weight: 700;
+      font-size: 18px;
+      border-bottom: 1px solid #ccc;
+      padding-bottom: 5px;
+    }
+
+    .content {
+      height: 370px;
+    }
+  }
+
+  .header-right {
+    width: 50%;
+    box-sizing: border-box;
+    padding: 10px;
+
+    .title {
+      font-weight: 700;
+      font-size: 18px;
+      border-bottom: 1px solid #ccc;
+      padding-bottom: 5px;
+    }
+
+    // .content {
+    //   // display: flex;
+    //   // padding: 10px;
+    // }
+  }
+}
+</style>
+
+<style>
+.select {
+  width: 192px !important;
+}
+</style>
diff --git a/src/views/home/device/count/components/header.vue b/src/views/home/device/count/components/header.vue
new file mode 100644
index 0000000..e732ea6
--- /dev/null
+++ b/src/views/home/device/count/components/header.vue
@@ -0,0 +1,215 @@
+<!--
+  Description: 设备统计-设备运行情况和数据上报情况
+  Author: 李亚光
+  Date: 2023-08-22
+ -->
+<script lang="ts" setup name="DeviceReport">
+import { img } from './imgData'
+import { getDeviceReport, getDeviceRun } from '@/api/home/device/count'
+// 设备运行情况数据
+const runData = ref([
+  {
+    name: '在线',
+    value: 0,
+    unit: '个',
+    img: img.online,
+    id: '1',
+  },
+  {
+    name: '离线',
+    value: 0,
+    unit: '个',
+    img: img.offline,
+    id: '0',
+  },
+  {
+    name: '维修',
+    value: 0,
+    unit: '个',
+    img: img.upkeep,
+    id: '2',
+  },
+  {
+    name: '备用',
+    value: 0,
+    unit: '个',
+    img: img.backup,
+    id: '3',
+  },
+
+])
+
+// 设备上报情况数据
+const reportData = ref([
+  {
+    name: '日上报量',
+    value: 0,
+    unit: '条',
+    id: 'day',
+  },
+  {
+    name: '月上报量',
+    value: 0,
+    unit: '条',
+    id: 'month',
+  },
+])
+
+// 获取设备运行状况数据和设备上报情况数据
+const fetchData = () => {
+  getDeviceRun().then((res) => {
+    res.data.forEach((element: any) => {
+      const index = runData.value.findIndex((item: any) => item.id === element.name)
+      if (index !== -1) {
+        runData.value[index].value = element.value
+      }
+    })
+  })
+  getDeviceReport().then((res) => {
+    res.data.forEach((element: any) => {
+      const index = reportData.value.findIndex((item: any) => item.id === element.name)
+      if (index !== -1) {
+        reportData.value[index].value = element.value
+      }
+    })
+  })
+}
+fetchData()
+</script>
+
+<template>
+  <div class="header-container">
+    <!-- 设备运行情况 -->
+    <div class="header-left">
+      <div class="title">
+        设备运行情况
+      </div>
+      <div class="content">
+        <div v-for="item in runData" :key="item.name" class="item">
+          <div class="img">
+            <img :src="item.img">
+          </div>
+          <div class="text">
+            <div class="name">
+              {{ item.name }}
+            </div>
+            <div class="value">
+              <span class="count"> {{ item.value }}</span>
+              <span class="unit"> {{ item.unit }}</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <!-- 数据上报情况 -->
+    <div class="header-right">
+      <div class="title">
+        数据上报情况
+      </div>
+      <div class="content">
+        <div v-for="item in reportData" :key="item.name" class="item">
+          <div class="name">
+            {{ item.name }}
+          </div>
+          <div class="value">
+            <span class="conut"> {{ item.value }}</span>
+            <span class="unit"> {{ item.unit }}</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.header-container {
+  display: flex;
+
+  .header-left {
+    width: 65%;
+    box-sizing: border-box;
+    padding: 10px;
+
+    .title {
+      font-weight: 700;
+      font-size: 18px;
+      border-bottom: 1px solid #ccc;
+      padding-bottom: 5px;
+    }
+
+    .content {
+      display: flex;
+
+      .item {
+        width: 25%;
+        box-sizing: border-box;
+        display: flex;
+        padding: 10px;
+
+        img {
+          width: 55px;
+          height: 55px;
+        }
+
+        .text {
+          margin-left: 25px;
+
+          .name {
+            font-weight: 700;
+            height: 27.5px;
+            line-height: 27.5px;
+          }
+
+          .value {
+            height: 27.5px;
+            line-height: 27.5px;
+
+            .count {
+              font-size: 20px;
+              font-weight: 700;
+            }
+          }
+        }
+      }
+    }
+  }
+
+  .header-right {
+    width: 35%;
+    box-sizing: border-box;
+    padding: 10px;
+
+    .title {
+      font-weight: 700;
+      font-size: 18px;
+      border-bottom: 1px solid #ccc;
+      padding-bottom: 5px;
+    }
+
+    .content {
+      display: flex;
+      padding: 10px;
+
+      .item {
+        width: 45%;
+
+        .name {
+          font-weight: 700;
+          height: 27.5px;
+          line-height: 27.5px;
+        }
+
+        .value {
+          height: 27.5px;
+          line-height: 27.5px;
+
+          .conut {
+            font-size: 20px;
+            font-weight: 700;
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/src/views/home/device/count/components/imgData.ts b/src/views/home/device/count/components/imgData.ts
new file mode 100644
index 0000000..2346fd0
--- /dev/null
+++ b/src/views/home/device/count/components/imgData.ts
@@ -0,0 +1,7 @@
+export const img = {
+  online: new URL('@/assets/images/device/count/online.png', import.meta.url),
+  offline: new URL('@/assets/images/device/count/offline.png', import.meta.url),
+  stop: new URL('@/assets/images/device/count/stop.png', import.meta.url),
+  upkeep: new URL('@/assets/images/device/count/stop.png', import.meta.url),
+  backup: new URL('@/assets/images/device/count/stop.png', import.meta.url),
+}

diff --git a/src/api/home/device/count.ts b/src/api/home/device/count.ts
new file mode 100644
index 0000000..e7256e2
--- /dev/null
+++ b/src/api/home/device/count.ts
@@ -0,0 +1,53 @@
+/**
+ * 设备管理--设备统计模块接口
+ */
+import request from '@/api/index'
+
+// 设备运行情况
+export function getDeviceRun() {
+  return request({
+    url: '/device/statics/status',
+    method: 'post',
+  })
+}
+
+// 设备上报情况
+export function getDeviceReport() {
+  return request({
+    url: '/device/statics/dataReport',
+    method: 'post',
+  })
+}
+
+// 设备分类统计
+export function getDeviceType() {
+  return request({
+    url: '/device/statics/deviceType',
+    method: 'post',
+  })
+}
+
+// 设备分类统计
+export function getOffline() {
+  return request({
+    url: '/device/statics/offLine',
+    method: 'post',
+  })
+}
+
+// 管理单位设备统计
+export function getDeptDevice() {
+  return request({
+    url: '/device/statics/company',
+    method: 'post',
+  })
+}
+
+// 离线设备清单
+export function getOfflineDevice(data: any) {
+  return request({
+    url: '/device/statics/offLineList',
+    method: 'post',
+    data,
+  })
+}
diff --git a/src/api/index.ts b/src/api/index.ts
index 5bc5f16..2d9ecf2 100644
--- a/src/api/index.ts
+++ b/src/api/index.ts
@@ -26,7 +26,7 @@
 const request = axios.create({
   baseURL: window.localStorage.getItem('url-bj-well') as string,
   // baseURL: import.meta.env.DEV && import.meta.env.VITE_OPEN_PROXY === 'true' ? '/proxy/' : import.meta.env.VITE_APP_API_BASEURL,
-  timeout: 1000 * 60,
+  timeout: 1000 * 60 * 2,
   responseType: 'json',
 })
 
diff --git a/src/assets/images/device/1 b/src/assets/images/device/1
new file mode 100644
index 0000000..e69de29
--- /dev/null
+++ b/src/assets/images/device/1
diff --git a/src/assets/images/device/count/offline.png b/src/assets/images/device/count/offline.png
new file mode 100644
index 0000000..9b1f055
--- /dev/null
+++ b/src/assets/images/device/count/offline.png
Binary files differ
diff --git a/src/assets/images/device/count/online.png b/src/assets/images/device/count/online.png
new file mode 100644
index 0000000..aa8d5e5
--- /dev/null
+++ b/src/assets/images/device/count/online.png
Binary files differ
diff --git a/src/assets/images/device/count/stop.png b/src/assets/images/device/count/stop.png
new file mode 100644
index 0000000..a9074b9
--- /dev/null
+++ b/src/assets/images/device/count/stop.png
Binary files differ
diff --git a/src/components/Echart/PieChart.vue b/src/components/Echart/PieChart.vue
index 74d506a..ca56b83 100644
--- a/src/components/Echart/PieChart.vue
+++ b/src/components/Echart/PieChart.vue
@@ -211,9 +211,9 @@
       right: props.right,
       label: {
         show: props.labelShow,
-        position: 'center',
+        position: props.labelPosition,
         formatter: props.labelFormatter ? props.labelFormatter : (props.valueType == 'percentage' ? '{style1|{b}}\n{style2|{d}%}' : '{style1|{b}}\n{style2|{c}}'),
-        fontSize: 20,
+        fontSize: 16,
         fontWeight: 'bold',
         rich: {
           style1: {
diff --git a/src/views/home/device/count/components/bottom.vue b/src/views/home/device/count/components/bottom.vue
new file mode 100644
index 0000000..4b16e06
--- /dev/null
+++ b/src/views/home/device/count/components/bottom.vue
@@ -0,0 +1,210 @@
+<!--
+  Description: 设备统计-管理单位设备统计和离线设备清单
+  Author: 李亚光
+  Date: 2023-08-22
+ -->
+<script lang="ts" setup name="DeptDeviceCount">
+import { getDeviceTypeListPage } from '@/api/home/device/type'
+import { getDictByCode } from '@/api/system/dict'
+import { getDeptDevice, getOfflineDevice } from '@/api/home/device/count'
+// 设备分类统计数据
+const xAxisData = ref([])
+const data = ref<any[]>([])
+setTimeout(() => {
+  xAxisData.value = [
+    '第一分公司', '第二分公司', '第三分公司', '第四分公司', '第五分公司',
+  ]
+  data.value = [
+    {
+      name: '燃气智能终端',
+      data: [1, 8, 5, 8, 4],
+    },
+    {
+      name: '管盯',
+      data: [2, 4, 1, 8, 1],
+    },
+  ]
+}, 1000)
+// 获取数据
+const fetchData = () => {
+  getDeptDevice().then((res) => {
+    //   xAxisData.value = res.data.map((item: any) => item.name)
+    //   data
+    //  console.log(res.data, '222222222222222')
+  })
+}
+fetchData()
+
+// 设备离线清单数据
+const list = ref([])
+const total = ref(0)
+const loadingTable = ref(true)
+const columns = ref([
+  { text: '设备编号', value: 'devcode', align: 'center' },
+  { text: '设备类型', value: 'devTypeName', align: 'center' },
+  { text: '安装位号', value: 'tagNumber', align: 'center' },
+  { text: '最新记录上传时间', value: 'lastTime', align: 'center' },
+  { text: '离线天数', value: 'offDays', align: 'center', width: '90' },
+  { text: '离线原因预测', value: 'reasons', align: 'center', width: '100' },
+])
+const listQuery = ref({
+  devcode: '',
+  devTypeId: '',
+  reasons: '',
+  limit: 20,
+  offset: 1,
+})
+// 查询列表
+const fetchListData = () => {
+  loadingTable.value = true
+  getOfflineDevice(listQuery.value).then((res) => {
+    total.value = res.data.total
+    list.value = res.data.rows
+    loadingTable.value = false
+  })
+}
+fetchListData()
+// 重置搜索条件
+const reset = () => {
+  listQuery.value = {
+    devcode: '',
+    devTypeId: '',
+    reasons: '',
+    limit: 20,
+    offset: 1,
+  }
+  fetchListData()
+}
+// 页数发生变化后的操作，可能是页码变化，可能是每页容量变化，此函数必写
+const changePage = (val: { size: number; page: number }) => {
+  if (val && val.size) {
+    listQuery.value.limit = val.size
+  }
+  if (val && val.page) {
+    listQuery.value.offset = val.page
+  }
+  fetchListData()
+}
+const deviceTypeList = ref<{ id: string; name: string; value: string }[]>([]) // 设备类型
+const reasonsList = ref<{ id: string; name: string; value: string }[]>([]) // 离线原因
+// 获取字典
+const fetchDict = () => {
+  // 设备类型
+  getDeviceTypeListPage({ limit: 9999, offset: 1 }).then((res) => {
+    deviceTypeList.value = res.data.rows.map((item: any) => ({ id: item.id, name: item.typeName, value: item.id }))
+  })
+  getDictByCode('reasonsOffline').then((res) => {
+    reasonsList.value = res.data
+  })
+}
+fetchDict()
+</script>
+
+<template>
+  <div class="header-container">
+    <!-- 管理单位设备统计 -->
+    <div class="header-left">
+      <div class="title">
+        管理单位设备统计
+      </div>
+      <div class="content">
+        <bar-chart-vertical
+          :x-axis-data="xAxisData" :bar-coner="0" :data="data" :colors="[]" :bar-width="15"
+          :legend="{ itemWidth: 8, itemHeight: 8, type: 'scroll', orient: 'horizontal', icon: 'roundRect', right: '0', top: '10' }"
+        />
+      </div>
+    </div>
+    <!-- 离线设备清单 -->
+    <div class="header-right">
+      <div class="title">
+        离线设备清单
+      </div>
+      <div class="content">
+        <search-area :need-clear="true" @search="fetchListData" @clear="reset">
+          <search-item>
+            <el-input v-model.trim="listQuery.devcode" placeholder="设备编号" clearable />
+          </search-item>
+          <search-item>
+            <el-select v-model="listQuery.devTypeId" placeholder="设备类型" clearable class="select">
+              <el-option v-for="item in deviceTypeList" :key="item.id" :label="item.name" :value="item.value" />
+            </el-select>
+          </search-item>
+          <search-item>
+            <el-select v-model="listQuery.reasons" placeholder="离线原因" clearable class="select">
+              <el-option v-for="item in reasonsList" :key="item.id" :label="item.name" :value="item.value" />
+            </el-select>
+          </search-item>
+        </search-area>
+        <table-container>
+          <template #btns-right>
+            <!-- 操作 -->
+            <div>
+              <el-button type="primary">
+                导出
+              </el-button>
+            </div>
+          </template>
+          <normal-table
+            :data="list" :total="total" :columns="columns" :height="200" :query="listQuery" :list-loading="loadingTable"
+            @change="changePage"
+          >
+            <template #preColumns>
+              <el-table-column label="序号" width="55" align="center">
+                <template #default="scope">
+                  {{ (listQuery.offset - 1) * listQuery.limit + scope.$index + 1 }}
+                </template>
+              </el-table-column>
+            </template>
+          </normal-table>
+        </table-container>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.header-container {
+  display: flex;
+
+  .header-left {
+    width: 50%;
+    box-sizing: border-box;
+    padding: 10px;
+
+    .title {
+      font-weight: 700;
+      font-size: 18px;
+      border-bottom: 1px solid #ccc;
+      padding-bottom: 5px;
+    }
+
+    .content {
+      height: 370px;
+    }
+  }
+
+  .header-right {
+    width: 50%;
+    box-sizing: border-box;
+    padding: 10px;
+
+    .title {
+      font-weight: 700;
+      font-size: 18px;
+      border-bottom: 1px solid #ccc;
+      padding-bottom: 5px;
+    }
+
+    // .content {
+    //   // display: flex;
+    //   // padding: 10px;
+    // }
+  }
+}
+</style>
+
+<style>
+.select {
+  width: 192px !important;
+}
+</style>
diff --git a/src/views/home/device/count/components/header.vue b/src/views/home/device/count/components/header.vue
new file mode 100644
index 0000000..e732ea6
--- /dev/null
+++ b/src/views/home/device/count/components/header.vue
@@ -0,0 +1,215 @@
+<!--
+  Description: 设备统计-设备运行情况和数据上报情况
+  Author: 李亚光
+  Date: 2023-08-22
+ -->
+<script lang="ts" setup name="DeviceReport">
+import { img } from './imgData'
+import { getDeviceReport, getDeviceRun } from '@/api/home/device/count'
+// 设备运行情况数据
+const runData = ref([
+  {
+    name: '在线',
+    value: 0,
+    unit: '个',
+    img: img.online,
+    id: '1',
+  },
+  {
+    name: '离线',
+    value: 0,
+    unit: '个',
+    img: img.offline,
+    id: '0',
+  },
+  {
+    name: '维修',
+    value: 0,
+    unit: '个',
+    img: img.upkeep,
+    id: '2',
+  },
+  {
+    name: '备用',
+    value: 0,
+    unit: '个',
+    img: img.backup,
+    id: '3',
+  },
+
+])
+
+// 设备上报情况数据
+const reportData = ref([
+  {
+    name: '日上报量',
+    value: 0,
+    unit: '条',
+    id: 'day',
+  },
+  {
+    name: '月上报量',
+    value: 0,
+    unit: '条',
+    id: 'month',
+  },
+])
+
+// 获取设备运行状况数据和设备上报情况数据
+const fetchData = () => {
+  getDeviceRun().then((res) => {
+    res.data.forEach((element: any) => {
+      const index = runData.value.findIndex((item: any) => item.id === element.name)
+      if (index !== -1) {
+        runData.value[index].value = element.value
+      }
+    })
+  })
+  getDeviceReport().then((res) => {
+    res.data.forEach((element: any) => {
+      const index = reportData.value.findIndex((item: any) => item.id === element.name)
+      if (index !== -1) {
+        reportData.value[index].value = element.value
+      }
+    })
+  })
+}
+fetchData()
+</script>
+
+<template>
+  <div class="header-container">
+    <!-- 设备运行情况 -->
+    <div class="header-left">
+      <div class="title">
+        设备运行情况
+      </div>
+      <div class="content">
+        <div v-for="item in runData" :key="item.name" class="item">
+          <div class="img">
+            <img :src="item.img">
+          </div>
+          <div class="text">
+            <div class="name">
+              {{ item.name }}
+            </div>
+            <div class="value">
+              <span class="count"> {{ item.value }}</span>
+              <span class="unit"> {{ item.unit }}</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <!-- 数据上报情况 -->
+    <div class="header-right">
+      <div class="title">
+        数据上报情况
+      </div>
+      <div class="content">
+        <div v-for="item in reportData" :key="item.name" class="item">
+          <div class="name">
+            {{ item.name }}
+          </div>
+          <div class="value">
+            <span class="conut"> {{ item.value }}</span>
+            <span class="unit"> {{ item.unit }}</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.header-container {
+  display: flex;
+
+  .header-left {
+    width: 65%;
+    box-sizing: border-box;
+    padding: 10px;
+
+    .title {
+      font-weight: 700;
+      font-size: 18px;
+      border-bottom: 1px solid #ccc;
+      padding-bottom: 5px;
+    }
+
+    .content {
+      display: flex;
+
+      .item {
+        width: 25%;
+        box-sizing: border-box;
+        display: flex;
+        padding: 10px;
+
+        img {
+          width: 55px;
+          height: 55px;
+        }
+
+        .text {
+          margin-left: 25px;
+
+          .name {
+            font-weight: 700;
+            height: 27.5px;
+            line-height: 27.5px;
+          }
+
+          .value {
+            height: 27.5px;
+            line-height: 27.5px;
+
+            .count {
+              font-size: 20px;
+              font-weight: 700;
+            }
+          }
+        }
+      }
+    }
+  }
+
+  .header-right {
+    width: 35%;
+    box-sizing: border-box;
+    padding: 10px;
+
+    .title {
+      font-weight: 700;
+      font-size: 18px;
+      border-bottom: 1px solid #ccc;
+      padding-bottom: 5px;
+    }
+
+    .content {
+      display: flex;
+      padding: 10px;
+
+      .item {
+        width: 45%;
+
+        .name {
+          font-weight: 700;
+          height: 27.5px;
+          line-height: 27.5px;
+        }
+
+        .value {
+          height: 27.5px;
+          line-height: 27.5px;
+
+          .conut {
+            font-size: 20px;
+            font-weight: 700;
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/src/views/home/device/count/components/imgData.ts b/src/views/home/device/count/components/imgData.ts
new file mode 100644
index 0000000..2346fd0
--- /dev/null
+++ b/src/views/home/device/count/components/imgData.ts
@@ -0,0 +1,7 @@
+export const img = {
+  online: new URL('@/assets/images/device/count/online.png', import.meta.url),
+  offline: new URL('@/assets/images/device/count/offline.png', import.meta.url),
+  stop: new URL('@/assets/images/device/count/stop.png', import.meta.url),
+  upkeep: new URL('@/assets/images/device/count/stop.png', import.meta.url),
+  backup: new URL('@/assets/images/device/count/stop.png', import.meta.url),
+}
diff --git a/src/views/home/device/count/components/middle.vue b/src/views/home/device/count/components/middle.vue
new file mode 100644
index 0000000..f45a3a3
--- /dev/null
+++ b/src/views/home/device/count/components/middle.vue
@@ -0,0 +1,150 @@
+<!--
+  Description: 设备统计-设备分类统计和离线统计
+  Author: 李亚光
+  Date: 2023-08-22
+ -->
+<script lang="ts" setup name="DeviceTypeCount">
+import { getDeviceType, getOffline } from '@/api/home/device/count'
+// 设备分类统计数据
+const xAxisData = ref([])
+const data = ref<any[]>([])
+// 设备离线数据
+const pieData = ref<any[]>([])
+const xAxisDataOff = ref([])
+const dataOff = ref<any[]>([])
+// setTimeout(() => {
+//   xAxisData.value = [
+//     '第一分公司', '第二分公司', '第三分公司', '第四分公司', '第五分公司',
+//   ]
+//   data.value = [
+//     {
+//       name: '闸井浓度超限',
+//       data: [1, 8, 5, 8, 4],
+//     },
+//   ]
+// }, 1000)
+
+// 获取数据
+const fetchData = () => {
+  getDeviceType().then((res) => {
+    xAxisData.value = res.data.map((item: any) => item.name)
+    data.value = [
+      {
+        name: '设备数量',
+        data: res.data.map((item: any) => item.value),
+      },
+    ]
+  })
+  getOffline().then((res) => {
+    pieData.value = res.data
+    xAxisDataOff.value = res.data.map((item: any) => item.name)
+    dataOff.value = [
+      {
+        name: '设备离线数量',
+        data: res.data.map((item: any) => item.value),
+        color: '#ccc',
+      },
+    ]
+  })
+}
+fetchData()
+</script>
+
+<template>
+  <div class="header-container">
+    <!-- 设备分类统计 -->
+    <div class="header-left">
+      <div class="title">
+        设备分类统计
+      </div>
+      <div class="content">
+        <!-- 垂直柱状图 -->
+        <div class="bar">
+          <bar-chart-horizontal
+            :x-axis-data="xAxisData" :bar-coner="0" :data="data" :colors="[]" :bar-width="15"
+            :legend="{ itemWidth: 8, itemHeight: 8, type: 'scroll', orient: 'horizontal', icon: 'roundRect', right: '0', top: '10' }"
+          />
+        </div>
+      </div>
+    </div>
+    <!-- 离线统计 -->
+    <div class="header-right">
+      <div class="title">
+        离线统计
+      </div>
+      <div class="content">
+        <!-- 柱状图 -->
+        <div class="bar">
+          <bar-chart-vertical
+            :x-axis-data="xAxisDataOff" :bar-coner="0" :data="dataOff" :colors="[]" :bar-width="15"
+            :legend="{ itemWidth: 8, itemHeight: 8, type: 'scroll', orient: 'horizontal', icon: 'roundRect', right: '0', top: '10' }"
+          />
+        </div>
+        <!-- 饼图 -->
+        <div class="circle">
+          <pie-chart
+            :data="pieData" radius="50%" label-position="outside"
+            :legend="{ itemWidth: 8, itemHeight: 8, type: 'scroll', orient: 'horizontal', icon: 'roundRect', right: '0', top: '50' }"
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.header-container {
+  display: flex;
+
+  .header-left {
+    width: 50%;
+    box-sizing: border-box;
+    padding: 10px;
+
+    .title {
+      font-weight: 700;
+      font-size: 18px;
+      border-bottom: 1px solid #ccc;
+      padding-bottom: 5px;
+    }
+
+    .content {
+      display: flex;
+      padding: 10px;
+
+      .bar {
+        width: 100%;
+        height: 300px;
+      }
+    }
+  }
+
+  .header-right {
+    width: 50%;
+    box-sizing: border-box;
+    padding: 10px;
+
+    .title {
+      font-weight: 700;
+      font-size: 18px;
+      border-bottom: 1px solid #ccc;
+      padding-bottom: 5px;
+    }
+
+    .content {
+      display: flex;
+      padding: 10px;
+
+      .bar {
+        width: 60%;
+        height: 300px;
+      }
+
+      .circle {
+        width: 40%;
+        height: 300px;
+      }
+    }
+  }
+}
+</style>

diff --git a/src/api/home/device/count.ts b/src/api/home/device/count.ts
new file mode 100644
index 0000000..e7256e2
--- /dev/null
+++ b/src/api/home/device/count.ts
@@ -0,0 +1,53 @@
+/**
+ * 设备管理--设备统计模块接口
+ */
+import request from '@/api/index'
+
+// 设备运行情况
+export function getDeviceRun() {
+  return request({
+    url: '/device/statics/status',
+    method: 'post',
+  })
+}
+
+// 设备上报情况
+export function getDeviceReport() {
+  return request({
+    url: '/device/statics/dataReport',
+    method: 'post',
+  })
+}
+
+// 设备分类统计
+export function getDeviceType() {
+  return request({
+    url: '/device/statics/deviceType',
+    method: 'post',
+  })
+}
+
+// 设备分类统计
+export function getOffline() {
+  return request({
+    url: '/device/statics/offLine',
+    method: 'post',
+  })
+}
+
+// 管理单位设备统计
+export function getDeptDevice() {
+  return request({
+    url: '/device/statics/company',
+    method: 'post',
+  })
+}
+
+// 离线设备清单
+export function getOfflineDevice(data: any) {
+  return request({
+    url: '/device/statics/offLineList',
+    method: 'post',
+    data,
+  })
+}
diff --git a/src/api/index.ts b/src/api/index.ts
index 5bc5f16..2d9ecf2 100644
--- a/src/api/index.ts
+++ b/src/api/index.ts
@@ -26,7 +26,7 @@
 const request = axios.create({
   baseURL: window.localStorage.getItem('url-bj-well') as string,
   // baseURL: import.meta.env.DEV && import.meta.env.VITE_OPEN_PROXY === 'true' ? '/proxy/' : import.meta.env.VITE_APP_API_BASEURL,
-  timeout: 1000 * 60,
+  timeout: 1000 * 60 * 2,
   responseType: 'json',
 })
 
diff --git a/src/assets/images/device/1 b/src/assets/images/device/1
new file mode 100644
index 0000000..e69de29
--- /dev/null
+++ b/src/assets/images/device/1
diff --git a/src/assets/images/device/count/offline.png b/src/assets/images/device/count/offline.png
new file mode 100644
index 0000000..9b1f055
--- /dev/null
+++ b/src/assets/images/device/count/offline.png
Binary files differ
diff --git a/src/assets/images/device/count/online.png b/src/assets/images/device/count/online.png
new file mode 100644
index 0000000..aa8d5e5
--- /dev/null
+++ b/src/assets/images/device/count/online.png
Binary files differ
diff --git a/src/assets/images/device/count/stop.png b/src/assets/images/device/count/stop.png
new file mode 100644
index 0000000..a9074b9
--- /dev/null
+++ b/src/assets/images/device/count/stop.png
Binary files differ
diff --git a/src/components/Echart/PieChart.vue b/src/components/Echart/PieChart.vue
index 74d506a..ca56b83 100644
--- a/src/components/Echart/PieChart.vue
+++ b/src/components/Echart/PieChart.vue
@@ -211,9 +211,9 @@
       right: props.right,
       label: {
         show: props.labelShow,
-        position: 'center',
+        position: props.labelPosition,
         formatter: props.labelFormatter ? props.labelFormatter : (props.valueType == 'percentage' ? '{style1|{b}}\n{style2|{d}%}' : '{style1|{b}}\n{style2|{c}}'),
-        fontSize: 20,
+        fontSize: 16,
         fontWeight: 'bold',
         rich: {
           style1: {
diff --git a/src/views/home/device/count/components/bottom.vue b/src/views/home/device/count/components/bottom.vue
new file mode 100644
index 0000000..4b16e06
--- /dev/null
+++ b/src/views/home/device/count/components/bottom.vue
@@ -0,0 +1,210 @@
+<!--
+  Description: 设备统计-管理单位设备统计和离线设备清单
+  Author: 李亚光
+  Date: 2023-08-22
+ -->
+<script lang="ts" setup name="DeptDeviceCount">
+import { getDeviceTypeListPage } from '@/api/home/device/type'
+import { getDictByCode } from '@/api/system/dict'
+import { getDeptDevice, getOfflineDevice } from '@/api/home/device/count'
+// 设备分类统计数据
+const xAxisData = ref([])
+const data = ref<any[]>([])
+setTimeout(() => {
+  xAxisData.value = [
+    '第一分公司', '第二分公司', '第三分公司', '第四分公司', '第五分公司',
+  ]
+  data.value = [
+    {
+      name: '燃气智能终端',
+      data: [1, 8, 5, 8, 4],
+    },
+    {
+      name: '管盯',
+      data: [2, 4, 1, 8, 1],
+    },
+  ]
+}, 1000)
+// 获取数据
+const fetchData = () => {
+  getDeptDevice().then((res) => {
+    //   xAxisData.value = res.data.map((item: any) => item.name)
+    //   data
+    //  console.log(res.data, '222222222222222')
+  })
+}
+fetchData()
+
+// 设备离线清单数据
+const list = ref([])
+const total = ref(0)
+const loadingTable = ref(true)
+const columns = ref([
+  { text: '设备编号', value: 'devcode', align: 'center' },
+  { text: '设备类型', value: 'devTypeName', align: 'center' },
+  { text: '安装位号', value: 'tagNumber', align: 'center' },
+  { text: '最新记录上传时间', value: 'lastTime', align: 'center' },
+  { text: '离线天数', value: 'offDays', align: 'center', width: '90' },
+  { text: '离线原因预测', value: 'reasons', align: 'center', width: '100' },
+])
+const listQuery = ref({
+  devcode: '',
+  devTypeId: '',
+  reasons: '',
+  limit: 20,
+  offset: 1,
+})
+// 查询列表
+const fetchListData = () => {
+  loadingTable.value = true
+  getOfflineDevice(listQuery.value).then((res) => {
+    total.value = res.data.total
+    list.value = res.data.rows
+    loadingTable.value = false
+  })
+}
+fetchListData()
+// 重置搜索条件
+const reset = () => {
+  listQuery.value = {
+    devcode: '',
+    devTypeId: '',
+    reasons: '',
+    limit: 20,
+    offset: 1,
+  }
+  fetchListData()
+}
+// 页数发生变化后的操作，可能是页码变化，可能是每页容量变化，此函数必写
+const changePage = (val: { size: number; page: number }) => {
+  if (val && val.size) {
+    listQuery.value.limit = val.size
+  }
+  if (val && val.page) {
+    listQuery.value.offset = val.page
+  }
+  fetchListData()
+}
+const deviceTypeList = ref<{ id: string; name: string; value: string }[]>([]) // 设备类型
+const reasonsList = ref<{ id: string; name: string; value: string }[]>([]) // 离线原因
+// 获取字典
+const fetchDict = () => {
+  // 设备类型
+  getDeviceTypeListPage({ limit: 9999, offset: 1 }).then((res) => {
+    deviceTypeList.value = res.data.rows.map((item: any) => ({ id: item.id, name: item.typeName, value: item.id }))
+  })
+  getDictByCode('reasonsOffline').then((res) => {
+    reasonsList.value = res.data
+  })
+}
+fetchDict()
+</script>
+
+<template>
+  <div class="header-container">
+    <!-- 管理单位设备统计 -->
+    <div class="header-left">
+      <div class="title">
+        管理单位设备统计
+      </div>
+      <div class="content">
+        <bar-chart-vertical
+          :x-axis-data="xAxisData" :bar-coner="0" :data="data" :colors="[]" :bar-width="15"
+          :legend="{ itemWidth: 8, itemHeight: 8, type: 'scroll', orient: 'horizontal', icon: 'roundRect', right: '0', top: '10' }"
+        />
+      </div>
+    </div>
+    <!-- 离线设备清单 -->
+    <div class="header-right">
+      <div class="title">
+        离线设备清单
+      </div>
+      <div class="content">
+        <search-area :need-clear="true" @search="fetchListData" @clear="reset">
+          <search-item>
+            <el-input v-model.trim="listQuery.devcode" placeholder="设备编号" clearable />
+          </search-item>
+          <search-item>
+            <el-select v-model="listQuery.devTypeId" placeholder="设备类型" clearable class="select">
+              <el-option v-for="item in deviceTypeList" :key="item.id" :label="item.name" :value="item.value" />
+            </el-select>
+          </search-item>
+          <search-item>
+            <el-select v-model="listQuery.reasons" placeholder="离线原因" clearable class="select">
+              <el-option v-for="item in reasonsList" :key="item.id" :label="item.name" :value="item.value" />
+            </el-select>
+          </search-item>
+        </search-area>
+        <table-container>
+          <template #btns-right>
+            <!-- 操作 -->
+            <div>
+              <el-button type="primary">
+                导出
+              </el-button>
+            </div>
+          </template>
+          <normal-table
+            :data="list" :total="total" :columns="columns" :height="200" :query="listQuery" :list-loading="loadingTable"
+            @change="changePage"
+          >
+            <template #preColumns>
+              <el-table-column label="序号" width="55" align="center">
+                <template #default="scope">
+                  {{ (listQuery.offset - 1) * listQuery.limit + scope.$index + 1 }}
+                </template>
+              </el-table-column>
+            </template>
+          </normal-table>
+        </table-container>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.header-container {
+  display: flex;
+
+  .header-left {
+    width: 50%;
+    box-sizing: border-box;
+    padding: 10px;
+
+    .title {
+      font-weight: 700;
+      font-size: 18px;
+      border-bottom: 1px solid #ccc;
+      padding-bottom: 5px;
+    }
+
+    .content {
+      height: 370px;
+    }
+  }
+
+  .header-right {
+    width: 50%;
+    box-sizing: border-box;
+    padding: 10px;
+
+    .title {
+      font-weight: 700;
+      font-size: 18px;
+      border-bottom: 1px solid #ccc;
+      padding-bottom: 5px;
+    }
+
+    // .content {
+    //   // display: flex;
+    //   // padding: 10px;
+    // }
+  }
+}
+</style>
+
+<style>
+.select {
+  width: 192px !important;
+}
+</style>
diff --git a/src/views/home/device/count/components/header.vue b/src/views/home/device/count/components/header.vue
new file mode 100644
index 0000000..e732ea6
--- /dev/null
+++ b/src/views/home/device/count/components/header.vue
@@ -0,0 +1,215 @@
+<!--
+  Description: 设备统计-设备运行情况和数据上报情况
+  Author: 李亚光
+  Date: 2023-08-22
+ -->
+<script lang="ts" setup name="DeviceReport">
+import { img } from './imgData'
+import { getDeviceReport, getDeviceRun } from '@/api/home/device/count'
+// 设备运行情况数据
+const runData = ref([
+  {
+    name: '在线',
+    value: 0,
+    unit: '个',
+    img: img.online,
+    id: '1',
+  },
+  {
+    name: '离线',
+    value: 0,
+    unit: '个',
+    img: img.offline,
+    id: '0',
+  },
+  {
+    name: '维修',
+    value: 0,
+    unit: '个',
+    img: img.upkeep,
+    id: '2',
+  },
+  {
+    name: '备用',
+    value: 0,
+    unit: '个',
+    img: img.backup,
+    id: '3',
+  },
+
+])
+
+// 设备上报情况数据
+const reportData = ref([
+  {
+    name: '日上报量',
+    value: 0,
+    unit: '条',
+    id: 'day',
+  },
+  {
+    name: '月上报量',
+    value: 0,
+    unit: '条',
+    id: 'month',
+  },
+])
+
+// 获取设备运行状况数据和设备上报情况数据
+const fetchData = () => {
+  getDeviceRun().then((res) => {
+    res.data.forEach((element: any) => {
+      const index = runData.value.findIndex((item: any) => item.id === element.name)
+      if (index !== -1) {
+        runData.value[index].value = element.value
+      }
+    })
+  })
+  getDeviceReport().then((res) => {
+    res.data.forEach((element: any) => {
+      const index = reportData.value.findIndex((item: any) => item.id === element.name)
+      if (index !== -1) {
+        reportData.value[index].value = element.value
+      }
+    })
+  })
+}
+fetchData()
+</script>
+
+<template>
+  <div class="header-container">
+    <!-- 设备运行情况 -->
+    <div class="header-left">
+      <div class="title">
+        设备运行情况
+      </div>
+      <div class="content">
+        <div v-for="item in runData" :key="item.name" class="item">
+          <div class="img">
+            <img :src="item.img">
+          </div>
+          <div class="text">
+            <div class="name">
+              {{ item.name }}
+            </div>
+            <div class="value">
+              <span class="count"> {{ item.value }}</span>
+              <span class="unit"> {{ item.unit }}</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <!-- 数据上报情况 -->
+    <div class="header-right">
+      <div class="title">
+        数据上报情况
+      </div>
+      <div class="content">
+        <div v-for="item in reportData" :key="item.name" class="item">
+          <div class="name">
+            {{ item.name }}
+          </div>
+          <div class="value">
+            <span class="conut"> {{ item.value }}</span>
+            <span class="unit"> {{ item.unit }}</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.header-container {
+  display: flex;
+
+  .header-left {
+    width: 65%;
+    box-sizing: border-box;
+    padding: 10px;
+
+    .title {
+      font-weight: 700;
+      font-size: 18px;
+      border-bottom: 1px solid #ccc;
+      padding-bottom: 5px;
+    }
+
+    .content {
+      display: flex;
+
+      .item {
+        width: 25%;
+        box-sizing: border-box;
+        display: flex;
+        padding: 10px;
+
+        img {
+          width: 55px;
+          height: 55px;
+        }
+
+        .text {
+          margin-left: 25px;
+
+          .name {
+            font-weight: 700;
+            height: 27.5px;
+            line-height: 27.5px;
+          }
+
+          .value {
+            height: 27.5px;
+            line-height: 27.5px;
+
+            .count {
+              font-size: 20px;
+              font-weight: 700;
+            }
+          }
+        }
+      }
+    }
+  }
+
+  .header-right {
+    width: 35%;
+    box-sizing: border-box;
+    padding: 10px;
+
+    .title {
+      font-weight: 700;
+      font-size: 18px;
+      border-bottom: 1px solid #ccc;
+      padding-bottom: 5px;
+    }
+
+    .content {
+      display: flex;
+      padding: 10px;
+
+      .item {
+        width: 45%;
+
+        .name {
+          font-weight: 700;
+          height: 27.5px;
+          line-height: 27.5px;
+        }
+
+        .value {
+          height: 27.5px;
+          line-height: 27.5px;
+
+          .conut {
+            font-size: 20px;
+            font-weight: 700;
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/src/views/home/device/count/components/imgData.ts b/src/views/home/device/count/components/imgData.ts
new file mode 100644
index 0000000..2346fd0
--- /dev/null
+++ b/src/views/home/device/count/components/imgData.ts
@@ -0,0 +1,7 @@
+export const img = {
+  online: new URL('@/assets/images/device/count/online.png', import.meta.url),
+  offline: new URL('@/assets/images/device/count/offline.png', import.meta.url),
+  stop: new URL('@/assets/images/device/count/stop.png', import.meta.url),
+  upkeep: new URL('@/assets/images/device/count/stop.png', import.meta.url),
+  backup: new URL('@/assets/images/device/count/stop.png', import.meta.url),
+}
diff --git a/src/views/home/device/count/components/middle.vue b/src/views/home/device/count/components/middle.vue
new file mode 100644
index 0000000..f45a3a3
--- /dev/null
+++ b/src/views/home/device/count/components/middle.vue
@@ -0,0 +1,150 @@
+<!--
+  Description: 设备统计-设备分类统计和离线统计
+  Author: 李亚光
+  Date: 2023-08-22
+ -->
+<script lang="ts" setup name="DeviceTypeCount">
+import { getDeviceType, getOffline } from '@/api/home/device/count'
+// 设备分类统计数据
+const xAxisData = ref([])
+const data = ref<any[]>([])
+// 设备离线数据
+const pieData = ref<any[]>([])
+const xAxisDataOff = ref([])
+const dataOff = ref<any[]>([])
+// setTimeout(() => {
+//   xAxisData.value = [
+//     '第一分公司', '第二分公司', '第三分公司', '第四分公司', '第五分公司',
+//   ]
+//   data.value = [
+//     {
+//       name: '闸井浓度超限',
+//       data: [1, 8, 5, 8, 4],
+//     },
+//   ]
+// }, 1000)
+
+// 获取数据
+const fetchData = () => {
+  getDeviceType().then((res) => {
+    xAxisData.value = res.data.map((item: any) => item.name)
+    data.value = [
+      {
+        name: '设备数量',
+        data: res.data.map((item: any) => item.value),
+      },
+    ]
+  })
+  getOffline().then((res) => {
+    pieData.value = res.data
+    xAxisDataOff.value = res.data.map((item: any) => item.name)
+    dataOff.value = [
+      {
+        name: '设备离线数量',
+        data: res.data.map((item: any) => item.value),
+        color: '#ccc',
+      },
+    ]
+  })
+}
+fetchData()
+</script>
+
+<template>
+  <div class="header-container">
+    <!-- 设备分类统计 -->
+    <div class="header-left">
+      <div class="title">
+        设备分类统计
+      </div>
+      <div class="content">
+        <!-- 垂直柱状图 -->
+        <div class="bar">
+          <bar-chart-horizontal
+            :x-axis-data="xAxisData" :bar-coner="0" :data="data" :colors="[]" :bar-width="15"
+            :legend="{ itemWidth: 8, itemHeight: 8, type: 'scroll', orient: 'horizontal', icon: 'roundRect', right: '0', top: '10' }"
+          />
+        </div>
+      </div>
+    </div>
+    <!-- 离线统计 -->
+    <div class="header-right">
+      <div class="title">
+        离线统计
+      </div>
+      <div class="content">
+        <!-- 柱状图 -->
+        <div class="bar">
+          <bar-chart-vertical
+            :x-axis-data="xAxisDataOff" :bar-coner="0" :data="dataOff" :colors="[]" :bar-width="15"
+            :legend="{ itemWidth: 8, itemHeight: 8, type: 'scroll', orient: 'horizontal', icon: 'roundRect', right: '0', top: '10' }"
+          />
+        </div>
+        <!-- 饼图 -->
+        <div class="circle">
+          <pie-chart
+            :data="pieData" radius="50%" label-position="outside"
+            :legend="{ itemWidth: 8, itemHeight: 8, type: 'scroll', orient: 'horizontal', icon: 'roundRect', right: '0', top: '50' }"
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.header-container {
+  display: flex;
+
+  .header-left {
+    width: 50%;
+    box-sizing: border-box;
+    padding: 10px;
+
+    .title {
+      font-weight: 700;
+      font-size: 18px;
+      border-bottom: 1px solid #ccc;
+      padding-bottom: 5px;
+    }
+
+    .content {
+      display: flex;
+      padding: 10px;
+
+      .bar {
+        width: 100%;
+        height: 300px;
+      }
+    }
+  }
+
+  .header-right {
+    width: 50%;
+    box-sizing: border-box;
+    padding: 10px;
+
+    .title {
+      font-weight: 700;
+      font-size: 18px;
+      border-bottom: 1px solid #ccc;
+      padding-bottom: 5px;
+    }
+
+    .content {
+      display: flex;
+      padding: 10px;
+
+      .bar {
+        width: 60%;
+        height: 300px;
+      }
+
+      .circle {
+        width: 40%;
+        height: 300px;
+      }
+    }
+  }
+}
+</style>
diff --git a/src/views/home/device/count/index.vue b/src/views/home/device/count/index.vue
index d7c2022..5d1de06 100644
--- a/src/views/home/device/count/index.vue
+++ b/src/views/home/device/count/index.vue
@@ -1,3 +1,25 @@
+<!--
+  Description: 设备统计
+  Author: 李亚光
+  Date: 2023-08-22
+ -->
+<script lang="ts" setup name="DeviceCount">
+import headerCard from './components/header.vue'
+import middleCard from './components/middle.vue'
+import bottomCard from './components/bottom.vue'
+</script>
+
 <template>
-  设备统计
+  <!-- 布局 -->
+  <app-container>
+    <div>
+      <!-- 设备运行情况和数据上报情况 -->
+      <header-card style="background-color: #fff; border-radius: 6px;" />
+      <!-- 设备分类统计和离线统计 -->
+      <middle-card style="background-color: #fff; border-radius: 6px; margin-top: 10px;" />
+
+      <!-- 管理单位设备统计和离线设备清单 -->
+      <bottom-card style="background-color: #fff; border-radius: 6px; margin-top: 10px;" />
+    </div>
+  </app-container>
 </template>