diff --git a/mock/deviceManage/device.js b/mock/deviceManage/device.js
new file mode 100644
index 0000000..1f0650d
--- /dev/null
+++ b/mock/deviceManage/device.js
@@ -0,0 +1,672 @@
+const deviceList = [
+  {
+    'bfzt': '0',
+    'bfztName': '撤防',
+    'communication': '3,4',
+    'concenCode': '',
+    'concenId': '',
+    'deptName': '燃气集团总公司',
+    'deptid': '24',
+    'installHeight': '123',
+    'devcode': '342021000001',
+    'deviceName': '',
+    'deviceType': '12',
+    'deviceTypeName': '开挖监测仪',
+    'id': '1476131375777120257',
+    'installDate': '2021-12-29',
+    'modelId': '19',
+    'modelName': 'BIRMM-RTU100N',
+    'onlineState': '1',
+    'onlineStateName': '在线',
+    'position': 'test001位置',
+    'ts': '2021-12-29',
+    'valid': '1',
+    'watchType': '燃气泄漏',
+    'wellCode': 'test001',
+    'wellId': '4453'
+  },
+  {
+    'bfzt': '0',
+    'bfztName': '撤防',
+    'communication': '3,4',
+    'concenCode': '',
+    'concenId': '',
+    'deptName': '燃气集团总公司',
+    'deptid': '24',
+    'installHeight': '123',
+    'devcode': '342021000001',
+    'deviceName': '',
+    'deviceType': '12',
+    'deviceTypeName': '井盖状态监测仪',
+    'id': '1476131375777120257',
+    'installDate': '2021-12-29',
+    'modelId': '19',
+    'modelName': 'BIRMM-RTU100N',
+    'onlineState': '1',
+    'onlineStateName': '在线',
+    'position': 'test001位置',
+    'ts': '2021-12-29',
+    'valid': '1',
+    'watchType': '燃气泄漏',
+    'wellCode': 'test001',
+    'wellId': '4453'
+  },
+  {
+    'bfzt': '0',
+    'bfztName': '撤防',
+    'communication': '3,4',
+    'concenCode': '',
+    'concenId': '',
+    'deptName': '燃气集团总公司',
+    'deptid': '24',
+    'installHeight': '123',
+    'devcode': '342021000001',
+    'deviceName': '',
+    'deviceType': '12',
+    'deviceTypeName': '液位监测仪',
+    'id': '1476131375777120257',
+    'installDate': '2021-12-29',
+    'modelId': '19',
+    'modelName': 'BIRMM-RTU100N',
+    'onlineState': '1',
+    'onlineStateName': '在线',
+    'position': 'test001位置',
+    'ts': '2021-12-29',
+    'valid': '1',
+    'watchType': '燃气泄漏',
+    'wellCode': 'test001',
+    'wellId': '4453'
+  },
+  {
+    'bfzt': '0',
+    'bfztName': '撤防',
+    'communication': '3,4',
+    'concenCode': '',
+    'concenId': '',
+    'deptName': '燃气集团总公司',
+    'deptid': '24',
+    'installHeight': '123',
+    'devcode': '342021000001',
+    'deviceName': '',
+    'deviceType': '12',
+    'deviceTypeName': '燃气智能监测终端',
+    'id': '1476131375777120257',
+    'installDate': '2021-12-29',
+    'modelId': '19',
+    'modelName': 'BIRMM-RTU100N',
+    'onlineState': '1',
+    'onlineStateName': '在线',
+    'position': 'test001位置',
+    'ts': '2021-12-29',
+    'valid': '1',
+    'watchType': '燃气泄漏',
+    'wellCode': 'test001',
+    'wellId': '4453'
+  },
+  {
+    'bfzt': '0',
+    'bfztName': '撤防',
+    'communication': '3,4',
+    'concenCode': '',
+    'concenId': '',
+    'deptName': '燃气集团总公司',
+    'deptid': '24',
+    'installHeight': '123',
+    'devcode': '342021000001',
+    'deviceName': '',
+    'deviceType': '12',
+    'deviceTypeName': '噪声记录仪',
+    'id': '1476131375777120257',
+    'installDate': '2021-12-29',
+    'modelId': '19',
+    'modelName': 'BIRMM-RTU100N',
+    'onlineState': '1',
+    'onlineStateName': '在线',
+    'position': 'test001位置',
+    'ts': '2021-12-29',
+    'valid': '1',
+    'watchType': '燃气泄漏',
+    'wellCode': 'test001',
+    'wellId': '4453'
+  },
+  {
+    'bfzt': '0',
+    'bfztName': '撤防',
+    'communication': '3,4',
+    'concenCode': '',
+    'concenId': '',
+    'deptName': '燃气集团总公司',
+    'deptid': '24',
+    'installHeight': '123',
+    'devcode': '342021000001',
+    'deviceName': '',
+    'deviceType': '12',
+    'deviceTypeName': '有害气体监测仪',
+    'id': '1476131375777120257',
+    'installDate': '2021-12-29',
+    'modelId': '19',
+    'modelName': 'BIRMM-RTU100N',
+    'onlineState': '1',
+    'onlineStateName': '在线',
+    'position': 'test001位置',
+    'ts': '2021-12-29',
+    'valid': '1',
+    'watchType': '燃气泄漏',
+    'wellCode': 'test001',
+    'wellId': '4453'
+  },
+  {
+    'bfzt': '0',
+    'bfztName': '撤防',
+    'communication': '3,4',
+    'concenCode': '',
+    'concenId': '',
+    'deptName': '燃气集团总公司',
+    'deptid': '24',
+    'installHeight': '123',
+    'devcode': '342021000001',
+    'deviceName': '',
+    'deviceType': '12',
+    'deviceTypeName': '温湿度监测仪',
+    'id': '1476131375777120257',
+    'installDate': '2021-12-29',
+    'modelId': '19',
+    'modelName': 'BIRMM-RTU100N',
+    'onlineState': '1',
+    'onlineStateName': '在线',
+    'position': 'test001位置',
+    'ts': '2021-12-29',
+    'valid': '1',
+    'watchType': '燃气泄漏',
+    'wellCode': 'test001',
+    'wellId': '4453'
+  },
+  {
+    'bfzt': '0',
+    'bfztName': '撤防',
+    'communication': '3,4',
+    'concenCode': '',
+    'concenId': '',
+    'deptName': '燃气集团总公司',
+    'deptid': '24',
+    'installHeight': '123',
+    'devcode': '342021000001',
+    'deviceName': '',
+    'deviceType': '12',
+    'deviceTypeName': '井盖定位监测仪',
+    'id': '1476131375777120257',
+    'installDate': '2021-12-29',
+    'modelId': '19',
+    'modelName': 'BIRMM-RTU100N',
+    'onlineState': '1',
+    'onlineStateName': '在线',
+    'position': 'test001位置',
+    'ts': '2021-12-29',
+    'valid': '1',
+    'watchType': '燃气泄漏',
+    'wellCode': 'test001',
+    'wellId': '4453'
+  },
+  {
+    'bfzt': '0',
+    'bfztName': '撤防',
+    'communication': '3,4',
+    'concenCode': '',
+    'concenId': '',
+    'deptName': '燃气集团总公司',
+    'deptid': '24',
+    'installHeight': '123',
+    'devcode': '342021000001',
+    'deviceName': '',
+    'deviceType': '12',
+    'deviceTypeName': '燃气智能终端（一体化）',
+    'id': '1476131375777120257',
+    'installDate': '2021-12-29',
+    'modelId': '19',
+    'modelName': 'BIRMM-RTU100N',
+    'onlineState': '1',
+    'onlineStateName': '在线',
+    'position': 'test001位置',
+    'ts': '2021-12-29',
+    'valid': '1',
+    'watchType': '燃气泄漏',
+    'wellCode': 'test001',
+    'wellId': '4453'
+  },
+  {
+    'bfzt': '0',
+    'bfztName': '撤防',
+    'communication': '3,4',
+    'concenCode': '',
+    'concenId': '',
+    'deptName': '燃气集团总公司',
+    'deptid': '24',
+    'installHeight': '123',
+    'devcode': '342021000001',
+    'deviceName': '',
+    'deviceType': '12',
+    'deviceTypeName': '管盯',
+    'id': '1476131375777120257',
+    'installDate': '2021-12-29',
+    'modelId': '19',
+    'modelName': 'BIRMM-RTU100N',
+    'onlineState': '1',
+    'onlineStateName': '在线',
+    'position': 'test001位置',
+    'ts': '2021-12-29',
+    'valid': '1',
+    'watchType': '燃气泄漏',
+    'wellCode': 'test001',
+    'wellId': '4453'
+  }
+]
+const deviceStaticsList = [
+  {
+    'deptName': '燃气集团总公司',
+    'deviceCount': '11',
+    'deptid': '24'
+  },
+  {
+    'deptName': '煤气公司',
+    'deviceCount': '2',
+    'deptid': '24'
+  },
+  {
+    'deptName': '电力公司',
+    'deviceCount': '11',
+    'deptid': '24'
+  }
+
+]
+const deviceOnlineList = [
+  {
+    'deviceType': '井盖状态监测仪',
+    'online': 1,
+    'offline': 9
+  },
+  {
+    'deviceType': '燃气智能监测终端',
+    'online': 1,
+    'offline': 2
+  },
+  {
+    'deviceType': '管盯',
+    'online': 1,
+    'offline': 6
+  }
+
+]
+const deviceOfflineList = [
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  }
+]
+module.exports = [
+  // mock get all routes form server
+  {
+    url: '/device/list',
+    type: 'get',
+    response: _ => {
+      return {
+        code: 200,
+        data: deviceList,
+        message: '请求成功',
+        success: true
+      }
+    }
+  },
+  {
+    url: '/statics/deviceStaticsByDept',
+    type: 'get',
+    response: _ => {
+      return {
+        code: 200,
+        data: deviceStaticsList,
+        message: '请求成功',
+        success: true
+      }
+    }
+  },
+  {
+    url: '/statics/deviceCountByOnlineStatus',
+    type: 'get',
+    response: _ => {
+      return {
+        code: 200,
+        data: deviceOnlineList,
+        message: '请求成功',
+        success: true
+      }
+    }
+  },
+  {
+    url: '/device/offlineListPage',
+    type: 'get',
+    response: _ => {
+      return {
+        code: 200,
+        'total': 120,
+        data: deviceOfflineList,
+        message: '请求成功',
+        success: true
+      }
+    }
+  }
+]

diff --git a/mock/deviceManage/device.js b/mock/deviceManage/device.js
new file mode 100644
index 0000000..1f0650d
--- /dev/null
+++ b/mock/deviceManage/device.js
@@ -0,0 +1,672 @@
+const deviceList = [
+  {
+    'bfzt': '0',
+    'bfztName': '撤防',
+    'communication': '3,4',
+    'concenCode': '',
+    'concenId': '',
+    'deptName': '燃气集团总公司',
+    'deptid': '24',
+    'installHeight': '123',
+    'devcode': '342021000001',
+    'deviceName': '',
+    'deviceType': '12',
+    'deviceTypeName': '开挖监测仪',
+    'id': '1476131375777120257',
+    'installDate': '2021-12-29',
+    'modelId': '19',
+    'modelName': 'BIRMM-RTU100N',
+    'onlineState': '1',
+    'onlineStateName': '在线',
+    'position': 'test001位置',
+    'ts': '2021-12-29',
+    'valid': '1',
+    'watchType': '燃气泄漏',
+    'wellCode': 'test001',
+    'wellId': '4453'
+  },
+  {
+    'bfzt': '0',
+    'bfztName': '撤防',
+    'communication': '3,4',
+    'concenCode': '',
+    'concenId': '',
+    'deptName': '燃气集团总公司',
+    'deptid': '24',
+    'installHeight': '123',
+    'devcode': '342021000001',
+    'deviceName': '',
+    'deviceType': '12',
+    'deviceTypeName': '井盖状态监测仪',
+    'id': '1476131375777120257',
+    'installDate': '2021-12-29',
+    'modelId': '19',
+    'modelName': 'BIRMM-RTU100N',
+    'onlineState': '1',
+    'onlineStateName': '在线',
+    'position': 'test001位置',
+    'ts': '2021-12-29',
+    'valid': '1',
+    'watchType': '燃气泄漏',
+    'wellCode': 'test001',
+    'wellId': '4453'
+  },
+  {
+    'bfzt': '0',
+    'bfztName': '撤防',
+    'communication': '3,4',
+    'concenCode': '',
+    'concenId': '',
+    'deptName': '燃气集团总公司',
+    'deptid': '24',
+    'installHeight': '123',
+    'devcode': '342021000001',
+    'deviceName': '',
+    'deviceType': '12',
+    'deviceTypeName': '液位监测仪',
+    'id': '1476131375777120257',
+    'installDate': '2021-12-29',
+    'modelId': '19',
+    'modelName': 'BIRMM-RTU100N',
+    'onlineState': '1',
+    'onlineStateName': '在线',
+    'position': 'test001位置',
+    'ts': '2021-12-29',
+    'valid': '1',
+    'watchType': '燃气泄漏',
+    'wellCode': 'test001',
+    'wellId': '4453'
+  },
+  {
+    'bfzt': '0',
+    'bfztName': '撤防',
+    'communication': '3,4',
+    'concenCode': '',
+    'concenId': '',
+    'deptName': '燃气集团总公司',
+    'deptid': '24',
+    'installHeight': '123',
+    'devcode': '342021000001',
+    'deviceName': '',
+    'deviceType': '12',
+    'deviceTypeName': '燃气智能监测终端',
+    'id': '1476131375777120257',
+    'installDate': '2021-12-29',
+    'modelId': '19',
+    'modelName': 'BIRMM-RTU100N',
+    'onlineState': '1',
+    'onlineStateName': '在线',
+    'position': 'test001位置',
+    'ts': '2021-12-29',
+    'valid': '1',
+    'watchType': '燃气泄漏',
+    'wellCode': 'test001',
+    'wellId': '4453'
+  },
+  {
+    'bfzt': '0',
+    'bfztName': '撤防',
+    'communication': '3,4',
+    'concenCode': '',
+    'concenId': '',
+    'deptName': '燃气集团总公司',
+    'deptid': '24',
+    'installHeight': '123',
+    'devcode': '342021000001',
+    'deviceName': '',
+    'deviceType': '12',
+    'deviceTypeName': '噪声记录仪',
+    'id': '1476131375777120257',
+    'installDate': '2021-12-29',
+    'modelId': '19',
+    'modelName': 'BIRMM-RTU100N',
+    'onlineState': '1',
+    'onlineStateName': '在线',
+    'position': 'test001位置',
+    'ts': '2021-12-29',
+    'valid': '1',
+    'watchType': '燃气泄漏',
+    'wellCode': 'test001',
+    'wellId': '4453'
+  },
+  {
+    'bfzt': '0',
+    'bfztName': '撤防',
+    'communication': '3,4',
+    'concenCode': '',
+    'concenId': '',
+    'deptName': '燃气集团总公司',
+    'deptid': '24',
+    'installHeight': '123',
+    'devcode': '342021000001',
+    'deviceName': '',
+    'deviceType': '12',
+    'deviceTypeName': '有害气体监测仪',
+    'id': '1476131375777120257',
+    'installDate': '2021-12-29',
+    'modelId': '19',
+    'modelName': 'BIRMM-RTU100N',
+    'onlineState': '1',
+    'onlineStateName': '在线',
+    'position': 'test001位置',
+    'ts': '2021-12-29',
+    'valid': '1',
+    'watchType': '燃气泄漏',
+    'wellCode': 'test001',
+    'wellId': '4453'
+  },
+  {
+    'bfzt': '0',
+    'bfztName': '撤防',
+    'communication': '3,4',
+    'concenCode': '',
+    'concenId': '',
+    'deptName': '燃气集团总公司',
+    'deptid': '24',
+    'installHeight': '123',
+    'devcode': '342021000001',
+    'deviceName': '',
+    'deviceType': '12',
+    'deviceTypeName': '温湿度监测仪',
+    'id': '1476131375777120257',
+    'installDate': '2021-12-29',
+    'modelId': '19',
+    'modelName': 'BIRMM-RTU100N',
+    'onlineState': '1',
+    'onlineStateName': '在线',
+    'position': 'test001位置',
+    'ts': '2021-12-29',
+    'valid': '1',
+    'watchType': '燃气泄漏',
+    'wellCode': 'test001',
+    'wellId': '4453'
+  },
+  {
+    'bfzt': '0',
+    'bfztName': '撤防',
+    'communication': '3,4',
+    'concenCode': '',
+    'concenId': '',
+    'deptName': '燃气集团总公司',
+    'deptid': '24',
+    'installHeight': '123',
+    'devcode': '342021000001',
+    'deviceName': '',
+    'deviceType': '12',
+    'deviceTypeName': '井盖定位监测仪',
+    'id': '1476131375777120257',
+    'installDate': '2021-12-29',
+    'modelId': '19',
+    'modelName': 'BIRMM-RTU100N',
+    'onlineState': '1',
+    'onlineStateName': '在线',
+    'position': 'test001位置',
+    'ts': '2021-12-29',
+    'valid': '1',
+    'watchType': '燃气泄漏',
+    'wellCode': 'test001',
+    'wellId': '4453'
+  },
+  {
+    'bfzt': '0',
+    'bfztName': '撤防',
+    'communication': '3,4',
+    'concenCode': '',
+    'concenId': '',
+    'deptName': '燃气集团总公司',
+    'deptid': '24',
+    'installHeight': '123',
+    'devcode': '342021000001',
+    'deviceName': '',
+    'deviceType': '12',
+    'deviceTypeName': '燃气智能终端（一体化）',
+    'id': '1476131375777120257',
+    'installDate': '2021-12-29',
+    'modelId': '19',
+    'modelName': 'BIRMM-RTU100N',
+    'onlineState': '1',
+    'onlineStateName': '在线',
+    'position': 'test001位置',
+    'ts': '2021-12-29',
+    'valid': '1',
+    'watchType': '燃气泄漏',
+    'wellCode': 'test001',
+    'wellId': '4453'
+  },
+  {
+    'bfzt': '0',
+    'bfztName': '撤防',
+    'communication': '3,4',
+    'concenCode': '',
+    'concenId': '',
+    'deptName': '燃气集团总公司',
+    'deptid': '24',
+    'installHeight': '123',
+    'devcode': '342021000001',
+    'deviceName': '',
+    'deviceType': '12',
+    'deviceTypeName': '管盯',
+    'id': '1476131375777120257',
+    'installDate': '2021-12-29',
+    'modelId': '19',
+    'modelName': 'BIRMM-RTU100N',
+    'onlineState': '1',
+    'onlineStateName': '在线',
+    'position': 'test001位置',
+    'ts': '2021-12-29',
+    'valid': '1',
+    'watchType': '燃气泄漏',
+    'wellCode': 'test001',
+    'wellId': '4453'
+  }
+]
+const deviceStaticsList = [
+  {
+    'deptName': '燃气集团总公司',
+    'deviceCount': '11',
+    'deptid': '24'
+  },
+  {
+    'deptName': '煤气公司',
+    'deviceCount': '2',
+    'deptid': '24'
+  },
+  {
+    'deptName': '电力公司',
+    'deviceCount': '11',
+    'deptid': '24'
+  }
+
+]
+const deviceOnlineList = [
+  {
+    'deviceType': '井盖状态监测仪',
+    'online': 1,
+    'offline': 9
+  },
+  {
+    'deviceType': '燃气智能监测终端',
+    'online': 1,
+    'offline': 2
+  },
+  {
+    'deviceType': '管盯',
+    'online': 1,
+    'offline': 6
+  }
+
+]
+const deviceOfflineList = [
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  }
+]
+module.exports = [
+  // mock get all routes form server
+  {
+    url: '/device/list',
+    type: 'get',
+    response: _ => {
+      return {
+        code: 200,
+        data: deviceList,
+        message: '请求成功',
+        success: true
+      }
+    }
+  },
+  {
+    url: '/statics/deviceStaticsByDept',
+    type: 'get',
+    response: _ => {
+      return {
+        code: 200,
+        data: deviceStaticsList,
+        message: '请求成功',
+        success: true
+      }
+    }
+  },
+  {
+    url: '/statics/deviceCountByOnlineStatus',
+    type: 'get',
+    response: _ => {
+      return {
+        code: 200,
+        data: deviceOnlineList,
+        message: '请求成功',
+        success: true
+      }
+    }
+  },
+  {
+    url: '/device/offlineListPage',
+    type: 'get',
+    response: _ => {
+      return {
+        code: 200,
+        'total': 120,
+        data: deviceOfflineList,
+        message: '请求成功',
+        success: true
+      }
+    }
+  }
+]
diff --git a/mock/index.js b/mock/index.js
index 6646246..0e60e80 100644
--- a/mock/index.js
+++ b/mock/index.js
@@ -12,6 +12,7 @@
 const dashboard = require('./biz/dashboard')
 const search = require('./remote-search')
 const overview = require('./biz/overview')
+const device = require('./deviceManage/device')
 const deviceType = require('./deviceManage/deviceType')
 const deviceModels = require('./deviceManage/deviceModels')
 const deviceImei = require('./deviceManage/deviceImei')
@@ -42,7 +43,8 @@
   ...tenantConfig,
   ...deptPermission,
   ...tenant,
-  ...warningRule
+  ...warningRule,
+  ...device
 ]
 
 // for front mock

diff --git a/mock/deviceManage/device.js b/mock/deviceManage/device.js
new file mode 100644
index 0000000..1f0650d
--- /dev/null
+++ b/mock/deviceManage/device.js
@@ -0,0 +1,672 @@
+const deviceList = [
+  {
+    'bfzt': '0',
+    'bfztName': '撤防',
+    'communication': '3,4',
+    'concenCode': '',
+    'concenId': '',
+    'deptName': '燃气集团总公司',
+    'deptid': '24',
+    'installHeight': '123',
+    'devcode': '342021000001',
+    'deviceName': '',
+    'deviceType': '12',
+    'deviceTypeName': '开挖监测仪',
+    'id': '1476131375777120257',
+    'installDate': '2021-12-29',
+    'modelId': '19',
+    'modelName': 'BIRMM-RTU100N',
+    'onlineState': '1',
+    'onlineStateName': '在线',
+    'position': 'test001位置',
+    'ts': '2021-12-29',
+    'valid': '1',
+    'watchType': '燃气泄漏',
+    'wellCode': 'test001',
+    'wellId': '4453'
+  },
+  {
+    'bfzt': '0',
+    'bfztName': '撤防',
+    'communication': '3,4',
+    'concenCode': '',
+    'concenId': '',
+    'deptName': '燃气集团总公司',
+    'deptid': '24',
+    'installHeight': '123',
+    'devcode': '342021000001',
+    'deviceName': '',
+    'deviceType': '12',
+    'deviceTypeName': '井盖状态监测仪',
+    'id': '1476131375777120257',
+    'installDate': '2021-12-29',
+    'modelId': '19',
+    'modelName': 'BIRMM-RTU100N',
+    'onlineState': '1',
+    'onlineStateName': '在线',
+    'position': 'test001位置',
+    'ts': '2021-12-29',
+    'valid': '1',
+    'watchType': '燃气泄漏',
+    'wellCode': 'test001',
+    'wellId': '4453'
+  },
+  {
+    'bfzt': '0',
+    'bfztName': '撤防',
+    'communication': '3,4',
+    'concenCode': '',
+    'concenId': '',
+    'deptName': '燃气集团总公司',
+    'deptid': '24',
+    'installHeight': '123',
+    'devcode': '342021000001',
+    'deviceName': '',
+    'deviceType': '12',
+    'deviceTypeName': '液位监测仪',
+    'id': '1476131375777120257',
+    'installDate': '2021-12-29',
+    'modelId': '19',
+    'modelName': 'BIRMM-RTU100N',
+    'onlineState': '1',
+    'onlineStateName': '在线',
+    'position': 'test001位置',
+    'ts': '2021-12-29',
+    'valid': '1',
+    'watchType': '燃气泄漏',
+    'wellCode': 'test001',
+    'wellId': '4453'
+  },
+  {
+    'bfzt': '0',
+    'bfztName': '撤防',
+    'communication': '3,4',
+    'concenCode': '',
+    'concenId': '',
+    'deptName': '燃气集团总公司',
+    'deptid': '24',
+    'installHeight': '123',
+    'devcode': '342021000001',
+    'deviceName': '',
+    'deviceType': '12',
+    'deviceTypeName': '燃气智能监测终端',
+    'id': '1476131375777120257',
+    'installDate': '2021-12-29',
+    'modelId': '19',
+    'modelName': 'BIRMM-RTU100N',
+    'onlineState': '1',
+    'onlineStateName': '在线',
+    'position': 'test001位置',
+    'ts': '2021-12-29',
+    'valid': '1',
+    'watchType': '燃气泄漏',
+    'wellCode': 'test001',
+    'wellId': '4453'
+  },
+  {
+    'bfzt': '0',
+    'bfztName': '撤防',
+    'communication': '3,4',
+    'concenCode': '',
+    'concenId': '',
+    'deptName': '燃气集团总公司',
+    'deptid': '24',
+    'installHeight': '123',
+    'devcode': '342021000001',
+    'deviceName': '',
+    'deviceType': '12',
+    'deviceTypeName': '噪声记录仪',
+    'id': '1476131375777120257',
+    'installDate': '2021-12-29',
+    'modelId': '19',
+    'modelName': 'BIRMM-RTU100N',
+    'onlineState': '1',
+    'onlineStateName': '在线',
+    'position': 'test001位置',
+    'ts': '2021-12-29',
+    'valid': '1',
+    'watchType': '燃气泄漏',
+    'wellCode': 'test001',
+    'wellId': '4453'
+  },
+  {
+    'bfzt': '0',
+    'bfztName': '撤防',
+    'communication': '3,4',
+    'concenCode': '',
+    'concenId': '',
+    'deptName': '燃气集团总公司',
+    'deptid': '24',
+    'installHeight': '123',
+    'devcode': '342021000001',
+    'deviceName': '',
+    'deviceType': '12',
+    'deviceTypeName': '有害气体监测仪',
+    'id': '1476131375777120257',
+    'installDate': '2021-12-29',
+    'modelId': '19',
+    'modelName': 'BIRMM-RTU100N',
+    'onlineState': '1',
+    'onlineStateName': '在线',
+    'position': 'test001位置',
+    'ts': '2021-12-29',
+    'valid': '1',
+    'watchType': '燃气泄漏',
+    'wellCode': 'test001',
+    'wellId': '4453'
+  },
+  {
+    'bfzt': '0',
+    'bfztName': '撤防',
+    'communication': '3,4',
+    'concenCode': '',
+    'concenId': '',
+    'deptName': '燃气集团总公司',
+    'deptid': '24',
+    'installHeight': '123',
+    'devcode': '342021000001',
+    'deviceName': '',
+    'deviceType': '12',
+    'deviceTypeName': '温湿度监测仪',
+    'id': '1476131375777120257',
+    'installDate': '2021-12-29',
+    'modelId': '19',
+    'modelName': 'BIRMM-RTU100N',
+    'onlineState': '1',
+    'onlineStateName': '在线',
+    'position': 'test001位置',
+    'ts': '2021-12-29',
+    'valid': '1',
+    'watchType': '燃气泄漏',
+    'wellCode': 'test001',
+    'wellId': '4453'
+  },
+  {
+    'bfzt': '0',
+    'bfztName': '撤防',
+    'communication': '3,4',
+    'concenCode': '',
+    'concenId': '',
+    'deptName': '燃气集团总公司',
+    'deptid': '24',
+    'installHeight': '123',
+    'devcode': '342021000001',
+    'deviceName': '',
+    'deviceType': '12',
+    'deviceTypeName': '井盖定位监测仪',
+    'id': '1476131375777120257',
+    'installDate': '2021-12-29',
+    'modelId': '19',
+    'modelName': 'BIRMM-RTU100N',
+    'onlineState': '1',
+    'onlineStateName': '在线',
+    'position': 'test001位置',
+    'ts': '2021-12-29',
+    'valid': '1',
+    'watchType': '燃气泄漏',
+    'wellCode': 'test001',
+    'wellId': '4453'
+  },
+  {
+    'bfzt': '0',
+    'bfztName': '撤防',
+    'communication': '3,4',
+    'concenCode': '',
+    'concenId': '',
+    'deptName': '燃气集团总公司',
+    'deptid': '24',
+    'installHeight': '123',
+    'devcode': '342021000001',
+    'deviceName': '',
+    'deviceType': '12',
+    'deviceTypeName': '燃气智能终端（一体化）',
+    'id': '1476131375777120257',
+    'installDate': '2021-12-29',
+    'modelId': '19',
+    'modelName': 'BIRMM-RTU100N',
+    'onlineState': '1',
+    'onlineStateName': '在线',
+    'position': 'test001位置',
+    'ts': '2021-12-29',
+    'valid': '1',
+    'watchType': '燃气泄漏',
+    'wellCode': 'test001',
+    'wellId': '4453'
+  },
+  {
+    'bfzt': '0',
+    'bfztName': '撤防',
+    'communication': '3,4',
+    'concenCode': '',
+    'concenId': '',
+    'deptName': '燃气集团总公司',
+    'deptid': '24',
+    'installHeight': '123',
+    'devcode': '342021000001',
+    'deviceName': '',
+    'deviceType': '12',
+    'deviceTypeName': '管盯',
+    'id': '1476131375777120257',
+    'installDate': '2021-12-29',
+    'modelId': '19',
+    'modelName': 'BIRMM-RTU100N',
+    'onlineState': '1',
+    'onlineStateName': '在线',
+    'position': 'test001位置',
+    'ts': '2021-12-29',
+    'valid': '1',
+    'watchType': '燃气泄漏',
+    'wellCode': 'test001',
+    'wellId': '4453'
+  }
+]
+const deviceStaticsList = [
+  {
+    'deptName': '燃气集团总公司',
+    'deviceCount': '11',
+    'deptid': '24'
+  },
+  {
+    'deptName': '煤气公司',
+    'deviceCount': '2',
+    'deptid': '24'
+  },
+  {
+    'deptName': '电力公司',
+    'deviceCount': '11',
+    'deptid': '24'
+  }
+
+]
+const deviceOnlineList = [
+  {
+    'deviceType': '井盖状态监测仪',
+    'online': 1,
+    'offline': 9
+  },
+  {
+    'deviceType': '燃气智能监测终端',
+    'online': 1,
+    'offline': 2
+  },
+  {
+    'deviceType': '管盯',
+    'online': 1,
+    'offline': 6
+  }
+
+]
+const deviceOfflineList = [
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  }
+]
+module.exports = [
+  // mock get all routes form server
+  {
+    url: '/device/list',
+    type: 'get',
+    response: _ => {
+      return {
+        code: 200,
+        data: deviceList,
+        message: '请求成功',
+        success: true
+      }
+    }
+  },
+  {
+    url: '/statics/deviceStaticsByDept',
+    type: 'get',
+    response: _ => {
+      return {
+        code: 200,
+        data: deviceStaticsList,
+        message: '请求成功',
+        success: true
+      }
+    }
+  },
+  {
+    url: '/statics/deviceCountByOnlineStatus',
+    type: 'get',
+    response: _ => {
+      return {
+        code: 200,
+        data: deviceOnlineList,
+        message: '请求成功',
+        success: true
+      }
+    }
+  },
+  {
+    url: '/device/offlineListPage',
+    type: 'get',
+    response: _ => {
+      return {
+        code: 200,
+        'total': 120,
+        data: deviceOfflineList,
+        message: '请求成功',
+        success: true
+      }
+    }
+  }
+]
diff --git a/mock/index.js b/mock/index.js
index 6646246..0e60e80 100644
--- a/mock/index.js
+++ b/mock/index.js
@@ -12,6 +12,7 @@
 const dashboard = require('./biz/dashboard')
 const search = require('./remote-search')
 const overview = require('./biz/overview')
+const device = require('./deviceManage/device')
 const deviceType = require('./deviceManage/deviceType')
 const deviceModels = require('./deviceManage/deviceModels')
 const deviceImei = require('./deviceManage/deviceImei')
@@ -42,7 +43,8 @@
   ...tenantConfig,
   ...deptPermission,
   ...tenant,
-  ...warningRule
+  ...warningRule,
+  ...device
 ]
 
 // for front mock
diff --git a/src/api/data/dataStatics.js b/src/api/data/dataStatics.js
index b96a05e..04f756a 100644
--- a/src/api/data/dataStatics.js
+++ b/src/api/data/dataStatics.js
@@ -11,6 +11,14 @@
     params
   })
 }
+// 离线设备列表
+export function offlineList(params) {
+  return request({
+    url: 'device/offlineListPage',
+    method: 'get',
+    params
+  })
+}
 // 根据权属单位统计井数量
 export function wellStaticByDept(params) {
   return request({
@@ -38,6 +46,15 @@
   })
 }
 
+// 离线设备数量
+export function deviceStaticsByOnline(params) {
+  return request({
+    url: 'statics/deviceCountByOnlineStatus',
+    method: 'get',
+    params
+  })
+}
+
 // 根据权属单位统计设备数量
 export function deviceStaticsByDept(params) {
   return request({

diff --git a/mock/deviceManage/device.js b/mock/deviceManage/device.js
new file mode 100644
index 0000000..1f0650d
--- /dev/null
+++ b/mock/deviceManage/device.js
@@ -0,0 +1,672 @@
+const deviceList = [
+  {
+    'bfzt': '0',
+    'bfztName': '撤防',
+    'communication': '3,4',
+    'concenCode': '',
+    'concenId': '',
+    'deptName': '燃气集团总公司',
+    'deptid': '24',
+    'installHeight': '123',
+    'devcode': '342021000001',
+    'deviceName': '',
+    'deviceType': '12',
+    'deviceTypeName': '开挖监测仪',
+    'id': '1476131375777120257',
+    'installDate': '2021-12-29',
+    'modelId': '19',
+    'modelName': 'BIRMM-RTU100N',
+    'onlineState': '1',
+    'onlineStateName': '在线',
+    'position': 'test001位置',
+    'ts': '2021-12-29',
+    'valid': '1',
+    'watchType': '燃气泄漏',
+    'wellCode': 'test001',
+    'wellId': '4453'
+  },
+  {
+    'bfzt': '0',
+    'bfztName': '撤防',
+    'communication': '3,4',
+    'concenCode': '',
+    'concenId': '',
+    'deptName': '燃气集团总公司',
+    'deptid': '24',
+    'installHeight': '123',
+    'devcode': '342021000001',
+    'deviceName': '',
+    'deviceType': '12',
+    'deviceTypeName': '井盖状态监测仪',
+    'id': '1476131375777120257',
+    'installDate': '2021-12-29',
+    'modelId': '19',
+    'modelName': 'BIRMM-RTU100N',
+    'onlineState': '1',
+    'onlineStateName': '在线',
+    'position': 'test001位置',
+    'ts': '2021-12-29',
+    'valid': '1',
+    'watchType': '燃气泄漏',
+    'wellCode': 'test001',
+    'wellId': '4453'
+  },
+  {
+    'bfzt': '0',
+    'bfztName': '撤防',
+    'communication': '3,4',
+    'concenCode': '',
+    'concenId': '',
+    'deptName': '燃气集团总公司',
+    'deptid': '24',
+    'installHeight': '123',
+    'devcode': '342021000001',
+    'deviceName': '',
+    'deviceType': '12',
+    'deviceTypeName': '液位监测仪',
+    'id': '1476131375777120257',
+    'installDate': '2021-12-29',
+    'modelId': '19',
+    'modelName': 'BIRMM-RTU100N',
+    'onlineState': '1',
+    'onlineStateName': '在线',
+    'position': 'test001位置',
+    'ts': '2021-12-29',
+    'valid': '1',
+    'watchType': '燃气泄漏',
+    'wellCode': 'test001',
+    'wellId': '4453'
+  },
+  {
+    'bfzt': '0',
+    'bfztName': '撤防',
+    'communication': '3,4',
+    'concenCode': '',
+    'concenId': '',
+    'deptName': '燃气集团总公司',
+    'deptid': '24',
+    'installHeight': '123',
+    'devcode': '342021000001',
+    'deviceName': '',
+    'deviceType': '12',
+    'deviceTypeName': '燃气智能监测终端',
+    'id': '1476131375777120257',
+    'installDate': '2021-12-29',
+    'modelId': '19',
+    'modelName': 'BIRMM-RTU100N',
+    'onlineState': '1',
+    'onlineStateName': '在线',
+    'position': 'test001位置',
+    'ts': '2021-12-29',
+    'valid': '1',
+    'watchType': '燃气泄漏',
+    'wellCode': 'test001',
+    'wellId': '4453'
+  },
+  {
+    'bfzt': '0',
+    'bfztName': '撤防',
+    'communication': '3,4',
+    'concenCode': '',
+    'concenId': '',
+    'deptName': '燃气集团总公司',
+    'deptid': '24',
+    'installHeight': '123',
+    'devcode': '342021000001',
+    'deviceName': '',
+    'deviceType': '12',
+    'deviceTypeName': '噪声记录仪',
+    'id': '1476131375777120257',
+    'installDate': '2021-12-29',
+    'modelId': '19',
+    'modelName': 'BIRMM-RTU100N',
+    'onlineState': '1',
+    'onlineStateName': '在线',
+    'position': 'test001位置',
+    'ts': '2021-12-29',
+    'valid': '1',
+    'watchType': '燃气泄漏',
+    'wellCode': 'test001',
+    'wellId': '4453'
+  },
+  {
+    'bfzt': '0',
+    'bfztName': '撤防',
+    'communication': '3,4',
+    'concenCode': '',
+    'concenId': '',
+    'deptName': '燃气集团总公司',
+    'deptid': '24',
+    'installHeight': '123',
+    'devcode': '342021000001',
+    'deviceName': '',
+    'deviceType': '12',
+    'deviceTypeName': '有害气体监测仪',
+    'id': '1476131375777120257',
+    'installDate': '2021-12-29',
+    'modelId': '19',
+    'modelName': 'BIRMM-RTU100N',
+    'onlineState': '1',
+    'onlineStateName': '在线',
+    'position': 'test001位置',
+    'ts': '2021-12-29',
+    'valid': '1',
+    'watchType': '燃气泄漏',
+    'wellCode': 'test001',
+    'wellId': '4453'
+  },
+  {
+    'bfzt': '0',
+    'bfztName': '撤防',
+    'communication': '3,4',
+    'concenCode': '',
+    'concenId': '',
+    'deptName': '燃气集团总公司',
+    'deptid': '24',
+    'installHeight': '123',
+    'devcode': '342021000001',
+    'deviceName': '',
+    'deviceType': '12',
+    'deviceTypeName': '温湿度监测仪',
+    'id': '1476131375777120257',
+    'installDate': '2021-12-29',
+    'modelId': '19',
+    'modelName': 'BIRMM-RTU100N',
+    'onlineState': '1',
+    'onlineStateName': '在线',
+    'position': 'test001位置',
+    'ts': '2021-12-29',
+    'valid': '1',
+    'watchType': '燃气泄漏',
+    'wellCode': 'test001',
+    'wellId': '4453'
+  },
+  {
+    'bfzt': '0',
+    'bfztName': '撤防',
+    'communication': '3,4',
+    'concenCode': '',
+    'concenId': '',
+    'deptName': '燃气集团总公司',
+    'deptid': '24',
+    'installHeight': '123',
+    'devcode': '342021000001',
+    'deviceName': '',
+    'deviceType': '12',
+    'deviceTypeName': '井盖定位监测仪',
+    'id': '1476131375777120257',
+    'installDate': '2021-12-29',
+    'modelId': '19',
+    'modelName': 'BIRMM-RTU100N',
+    'onlineState': '1',
+    'onlineStateName': '在线',
+    'position': 'test001位置',
+    'ts': '2021-12-29',
+    'valid': '1',
+    'watchType': '燃气泄漏',
+    'wellCode': 'test001',
+    'wellId': '4453'
+  },
+  {
+    'bfzt': '0',
+    'bfztName': '撤防',
+    'communication': '3,4',
+    'concenCode': '',
+    'concenId': '',
+    'deptName': '燃气集团总公司',
+    'deptid': '24',
+    'installHeight': '123',
+    'devcode': '342021000001',
+    'deviceName': '',
+    'deviceType': '12',
+    'deviceTypeName': '燃气智能终端（一体化）',
+    'id': '1476131375777120257',
+    'installDate': '2021-12-29',
+    'modelId': '19',
+    'modelName': 'BIRMM-RTU100N',
+    'onlineState': '1',
+    'onlineStateName': '在线',
+    'position': 'test001位置',
+    'ts': '2021-12-29',
+    'valid': '1',
+    'watchType': '燃气泄漏',
+    'wellCode': 'test001',
+    'wellId': '4453'
+  },
+  {
+    'bfzt': '0',
+    'bfztName': '撤防',
+    'communication': '3,4',
+    'concenCode': '',
+    'concenId': '',
+    'deptName': '燃气集团总公司',
+    'deptid': '24',
+    'installHeight': '123',
+    'devcode': '342021000001',
+    'deviceName': '',
+    'deviceType': '12',
+    'deviceTypeName': '管盯',
+    'id': '1476131375777120257',
+    'installDate': '2021-12-29',
+    'modelId': '19',
+    'modelName': 'BIRMM-RTU100N',
+    'onlineState': '1',
+    'onlineStateName': '在线',
+    'position': 'test001位置',
+    'ts': '2021-12-29',
+    'valid': '1',
+    'watchType': '燃气泄漏',
+    'wellCode': 'test001',
+    'wellId': '4453'
+  }
+]
+const deviceStaticsList = [
+  {
+    'deptName': '燃气集团总公司',
+    'deviceCount': '11',
+    'deptid': '24'
+  },
+  {
+    'deptName': '煤气公司',
+    'deviceCount': '2',
+    'deptid': '24'
+  },
+  {
+    'deptName': '电力公司',
+    'deviceCount': '11',
+    'deptid': '24'
+  }
+
+]
+const deviceOnlineList = [
+  {
+    'deviceType': '井盖状态监测仪',
+    'online': 1,
+    'offline': 9
+  },
+  {
+    'deviceType': '燃气智能监测终端',
+    'online': 1,
+    'offline': 2
+  },
+  {
+    'deviceType': '管盯',
+    'online': 1,
+    'offline': 6
+  }
+
+]
+const deviceOfflineList = [
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  }
+]
+module.exports = [
+  // mock get all routes form server
+  {
+    url: '/device/list',
+    type: 'get',
+    response: _ => {
+      return {
+        code: 200,
+        data: deviceList,
+        message: '请求成功',
+        success: true
+      }
+    }
+  },
+  {
+    url: '/statics/deviceStaticsByDept',
+    type: 'get',
+    response: _ => {
+      return {
+        code: 200,
+        data: deviceStaticsList,
+        message: '请求成功',
+        success: true
+      }
+    }
+  },
+  {
+    url: '/statics/deviceCountByOnlineStatus',
+    type: 'get',
+    response: _ => {
+      return {
+        code: 200,
+        data: deviceOnlineList,
+        message: '请求成功',
+        success: true
+      }
+    }
+  },
+  {
+    url: '/device/offlineListPage',
+    type: 'get',
+    response: _ => {
+      return {
+        code: 200,
+        'total': 120,
+        data: deviceOfflineList,
+        message: '请求成功',
+        success: true
+      }
+    }
+  }
+]
diff --git a/mock/index.js b/mock/index.js
index 6646246..0e60e80 100644
--- a/mock/index.js
+++ b/mock/index.js
@@ -12,6 +12,7 @@
 const dashboard = require('./biz/dashboard')
 const search = require('./remote-search')
 const overview = require('./biz/overview')
+const device = require('./deviceManage/device')
 const deviceType = require('./deviceManage/deviceType')
 const deviceModels = require('./deviceManage/deviceModels')
 const deviceImei = require('./deviceManage/deviceImei')
@@ -42,7 +43,8 @@
   ...tenantConfig,
   ...deptPermission,
   ...tenant,
-  ...warningRule
+  ...warningRule,
+  ...device
 ]
 
 // for front mock
diff --git a/src/api/data/dataStatics.js b/src/api/data/dataStatics.js
index b96a05e..04f756a 100644
--- a/src/api/data/dataStatics.js
+++ b/src/api/data/dataStatics.js
@@ -11,6 +11,14 @@
     params
   })
 }
+// 离线设备列表
+export function offlineList(params) {
+  return request({
+    url: 'device/offlineListPage',
+    method: 'get',
+    params
+  })
+}
 // 根据权属单位统计井数量
 export function wellStaticByDept(params) {
   return request({
@@ -38,6 +46,15 @@
   })
 }
 
+// 离线设备数量
+export function deviceStaticsByOnline(params) {
+  return request({
+    url: 'statics/deviceCountByOnlineStatus',
+    method: 'get',
+    params
+  })
+}
+
 // 根据权属单位统计设备数量
 export function deviceStaticsByDept(params) {
   return request({
diff --git a/src/components/NormalTable/index.vue b/src/components/NormalTable/index.vue
index 9e23838..3fdc6db 100644
--- a/src/components/NormalTable/index.vue
+++ b/src/components/NormalTable/index.vue
@@ -69,7 +69,7 @@
         </el-col>
       </el-row>
       <!-- 表格正文-->
-      <el-table v-loading="listLoading" :data="data" :size="size" class="table" row-class-name="small-row-class" border @selection-change="selectionChange" @row-click="rowClick">
+      <el-table v-loading="listLoading" :height="height" :data="data" :size="size" class="table" row-class-name="small-row-class" border @selection-change="selectionChange" @row-click="rowClick">
         <!--需要加在表最前方的插槽-->
         <slot name="preColumns" />
         <!--序号列-->
@@ -141,6 +141,12 @@
         return []
       }
     }, // 数据
+    height: {
+      type: Number,
+      default: function() {
+        return []
+      }
+    },
     total: {
       type: Number,
       default: 0

diff --git a/mock/deviceManage/device.js b/mock/deviceManage/device.js
new file mode 100644
index 0000000..1f0650d
--- /dev/null
+++ b/mock/deviceManage/device.js
@@ -0,0 +1,672 @@
+const deviceList = [
+  {
+    'bfzt': '0',
+    'bfztName': '撤防',
+    'communication': '3,4',
+    'concenCode': '',
+    'concenId': '',
+    'deptName': '燃气集团总公司',
+    'deptid': '24',
+    'installHeight': '123',
+    'devcode': '342021000001',
+    'deviceName': '',
+    'deviceType': '12',
+    'deviceTypeName': '开挖监测仪',
+    'id': '1476131375777120257',
+    'installDate': '2021-12-29',
+    'modelId': '19',
+    'modelName': 'BIRMM-RTU100N',
+    'onlineState': '1',
+    'onlineStateName': '在线',
+    'position': 'test001位置',
+    'ts': '2021-12-29',
+    'valid': '1',
+    'watchType': '燃气泄漏',
+    'wellCode': 'test001',
+    'wellId': '4453'
+  },
+  {
+    'bfzt': '0',
+    'bfztName': '撤防',
+    'communication': '3,4',
+    'concenCode': '',
+    'concenId': '',
+    'deptName': '燃气集团总公司',
+    'deptid': '24',
+    'installHeight': '123',
+    'devcode': '342021000001',
+    'deviceName': '',
+    'deviceType': '12',
+    'deviceTypeName': '井盖状态监测仪',
+    'id': '1476131375777120257',
+    'installDate': '2021-12-29',
+    'modelId': '19',
+    'modelName': 'BIRMM-RTU100N',
+    'onlineState': '1',
+    'onlineStateName': '在线',
+    'position': 'test001位置',
+    'ts': '2021-12-29',
+    'valid': '1',
+    'watchType': '燃气泄漏',
+    'wellCode': 'test001',
+    'wellId': '4453'
+  },
+  {
+    'bfzt': '0',
+    'bfztName': '撤防',
+    'communication': '3,4',
+    'concenCode': '',
+    'concenId': '',
+    'deptName': '燃气集团总公司',
+    'deptid': '24',
+    'installHeight': '123',
+    'devcode': '342021000001',
+    'deviceName': '',
+    'deviceType': '12',
+    'deviceTypeName': '液位监测仪',
+    'id': '1476131375777120257',
+    'installDate': '2021-12-29',
+    'modelId': '19',
+    'modelName': 'BIRMM-RTU100N',
+    'onlineState': '1',
+    'onlineStateName': '在线',
+    'position': 'test001位置',
+    'ts': '2021-12-29',
+    'valid': '1',
+    'watchType': '燃气泄漏',
+    'wellCode': 'test001',
+    'wellId': '4453'
+  },
+  {
+    'bfzt': '0',
+    'bfztName': '撤防',
+    'communication': '3,4',
+    'concenCode': '',
+    'concenId': '',
+    'deptName': '燃气集团总公司',
+    'deptid': '24',
+    'installHeight': '123',
+    'devcode': '342021000001',
+    'deviceName': '',
+    'deviceType': '12',
+    'deviceTypeName': '燃气智能监测终端',
+    'id': '1476131375777120257',
+    'installDate': '2021-12-29',
+    'modelId': '19',
+    'modelName': 'BIRMM-RTU100N',
+    'onlineState': '1',
+    'onlineStateName': '在线',
+    'position': 'test001位置',
+    'ts': '2021-12-29',
+    'valid': '1',
+    'watchType': '燃气泄漏',
+    'wellCode': 'test001',
+    'wellId': '4453'
+  },
+  {
+    'bfzt': '0',
+    'bfztName': '撤防',
+    'communication': '3,4',
+    'concenCode': '',
+    'concenId': '',
+    'deptName': '燃气集团总公司',
+    'deptid': '24',
+    'installHeight': '123',
+    'devcode': '342021000001',
+    'deviceName': '',
+    'deviceType': '12',
+    'deviceTypeName': '噪声记录仪',
+    'id': '1476131375777120257',
+    'installDate': '2021-12-29',
+    'modelId': '19',
+    'modelName': 'BIRMM-RTU100N',
+    'onlineState': '1',
+    'onlineStateName': '在线',
+    'position': 'test001位置',
+    'ts': '2021-12-29',
+    'valid': '1',
+    'watchType': '燃气泄漏',
+    'wellCode': 'test001',
+    'wellId': '4453'
+  },
+  {
+    'bfzt': '0',
+    'bfztName': '撤防',
+    'communication': '3,4',
+    'concenCode': '',
+    'concenId': '',
+    'deptName': '燃气集团总公司',
+    'deptid': '24',
+    'installHeight': '123',
+    'devcode': '342021000001',
+    'deviceName': '',
+    'deviceType': '12',
+    'deviceTypeName': '有害气体监测仪',
+    'id': '1476131375777120257',
+    'installDate': '2021-12-29',
+    'modelId': '19',
+    'modelName': 'BIRMM-RTU100N',
+    'onlineState': '1',
+    'onlineStateName': '在线',
+    'position': 'test001位置',
+    'ts': '2021-12-29',
+    'valid': '1',
+    'watchType': '燃气泄漏',
+    'wellCode': 'test001',
+    'wellId': '4453'
+  },
+  {
+    'bfzt': '0',
+    'bfztName': '撤防',
+    'communication': '3,4',
+    'concenCode': '',
+    'concenId': '',
+    'deptName': '燃气集团总公司',
+    'deptid': '24',
+    'installHeight': '123',
+    'devcode': '342021000001',
+    'deviceName': '',
+    'deviceType': '12',
+    'deviceTypeName': '温湿度监测仪',
+    'id': '1476131375777120257',
+    'installDate': '2021-12-29',
+    'modelId': '19',
+    'modelName': 'BIRMM-RTU100N',
+    'onlineState': '1',
+    'onlineStateName': '在线',
+    'position': 'test001位置',
+    'ts': '2021-12-29',
+    'valid': '1',
+    'watchType': '燃气泄漏',
+    'wellCode': 'test001',
+    'wellId': '4453'
+  },
+  {
+    'bfzt': '0',
+    'bfztName': '撤防',
+    'communication': '3,4',
+    'concenCode': '',
+    'concenId': '',
+    'deptName': '燃气集团总公司',
+    'deptid': '24',
+    'installHeight': '123',
+    'devcode': '342021000001',
+    'deviceName': '',
+    'deviceType': '12',
+    'deviceTypeName': '井盖定位监测仪',
+    'id': '1476131375777120257',
+    'installDate': '2021-12-29',
+    'modelId': '19',
+    'modelName': 'BIRMM-RTU100N',
+    'onlineState': '1',
+    'onlineStateName': '在线',
+    'position': 'test001位置',
+    'ts': '2021-12-29',
+    'valid': '1',
+    'watchType': '燃气泄漏',
+    'wellCode': 'test001',
+    'wellId': '4453'
+  },
+  {
+    'bfzt': '0',
+    'bfztName': '撤防',
+    'communication': '3,4',
+    'concenCode': '',
+    'concenId': '',
+    'deptName': '燃气集团总公司',
+    'deptid': '24',
+    'installHeight': '123',
+    'devcode': '342021000001',
+    'deviceName': '',
+    'deviceType': '12',
+    'deviceTypeName': '燃气智能终端（一体化）',
+    'id': '1476131375777120257',
+    'installDate': '2021-12-29',
+    'modelId': '19',
+    'modelName': 'BIRMM-RTU100N',
+    'onlineState': '1',
+    'onlineStateName': '在线',
+    'position': 'test001位置',
+    'ts': '2021-12-29',
+    'valid': '1',
+    'watchType': '燃气泄漏',
+    'wellCode': 'test001',
+    'wellId': '4453'
+  },
+  {
+    'bfzt': '0',
+    'bfztName': '撤防',
+    'communication': '3,4',
+    'concenCode': '',
+    'concenId': '',
+    'deptName': '燃气集团总公司',
+    'deptid': '24',
+    'installHeight': '123',
+    'devcode': '342021000001',
+    'deviceName': '',
+    'deviceType': '12',
+    'deviceTypeName': '管盯',
+    'id': '1476131375777120257',
+    'installDate': '2021-12-29',
+    'modelId': '19',
+    'modelName': 'BIRMM-RTU100N',
+    'onlineState': '1',
+    'onlineStateName': '在线',
+    'position': 'test001位置',
+    'ts': '2021-12-29',
+    'valid': '1',
+    'watchType': '燃气泄漏',
+    'wellCode': 'test001',
+    'wellId': '4453'
+  }
+]
+const deviceStaticsList = [
+  {
+    'deptName': '燃气集团总公司',
+    'deviceCount': '11',
+    'deptid': '24'
+  },
+  {
+    'deptName': '煤气公司',
+    'deviceCount': '2',
+    'deptid': '24'
+  },
+  {
+    'deptName': '电力公司',
+    'deviceCount': '11',
+    'deptid': '24'
+  }
+
+]
+const deviceOnlineList = [
+  {
+    'deviceType': '井盖状态监测仪',
+    'online': 1,
+    'offline': 9
+  },
+  {
+    'deviceType': '燃气智能监测终端',
+    'online': 1,
+    'offline': 2
+  },
+  {
+    'deviceType': '管盯',
+    'online': 1,
+    'offline': 6
+  }
+
+]
+const deviceOfflineList = [
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  }
+]
+module.exports = [
+  // mock get all routes form server
+  {
+    url: '/device/list',
+    type: 'get',
+    response: _ => {
+      return {
+        code: 200,
+        data: deviceList,
+        message: '请求成功',
+        success: true
+      }
+    }
+  },
+  {
+    url: '/statics/deviceStaticsByDept',
+    type: 'get',
+    response: _ => {
+      return {
+        code: 200,
+        data: deviceStaticsList,
+        message: '请求成功',
+        success: true
+      }
+    }
+  },
+  {
+    url: '/statics/deviceCountByOnlineStatus',
+    type: 'get',
+    response: _ => {
+      return {
+        code: 200,
+        data: deviceOnlineList,
+        message: '请求成功',
+        success: true
+      }
+    }
+  },
+  {
+    url: '/device/offlineListPage',
+    type: 'get',
+    response: _ => {
+      return {
+        code: 200,
+        'total': 120,
+        data: deviceOfflineList,
+        message: '请求成功',
+        success: true
+      }
+    }
+  }
+]
diff --git a/mock/index.js b/mock/index.js
index 6646246..0e60e80 100644
--- a/mock/index.js
+++ b/mock/index.js
@@ -12,6 +12,7 @@
 const dashboard = require('./biz/dashboard')
 const search = require('./remote-search')
 const overview = require('./biz/overview')
+const device = require('./deviceManage/device')
 const deviceType = require('./deviceManage/deviceType')
 const deviceModels = require('./deviceManage/deviceModels')
 const deviceImei = require('./deviceManage/deviceImei')
@@ -42,7 +43,8 @@
   ...tenantConfig,
   ...deptPermission,
   ...tenant,
-  ...warningRule
+  ...warningRule,
+  ...device
 ]
 
 // for front mock
diff --git a/src/api/data/dataStatics.js b/src/api/data/dataStatics.js
index b96a05e..04f756a 100644
--- a/src/api/data/dataStatics.js
+++ b/src/api/data/dataStatics.js
@@ -11,6 +11,14 @@
     params
   })
 }
+// 离线设备列表
+export function offlineList(params) {
+  return request({
+    url: 'device/offlineListPage',
+    method: 'get',
+    params
+  })
+}
 // 根据权属单位统计井数量
 export function wellStaticByDept(params) {
   return request({
@@ -38,6 +46,15 @@
   })
 }
 
+// 离线设备数量
+export function deviceStaticsByOnline(params) {
+  return request({
+    url: 'statics/deviceCountByOnlineStatus',
+    method: 'get',
+    params
+  })
+}
+
 // 根据权属单位统计设备数量
 export function deviceStaticsByDept(params) {
   return request({
diff --git a/src/components/NormalTable/index.vue b/src/components/NormalTable/index.vue
index 9e23838..3fdc6db 100644
--- a/src/components/NormalTable/index.vue
+++ b/src/components/NormalTable/index.vue
@@ -69,7 +69,7 @@
         </el-col>
       </el-row>
       <!-- 表格正文-->
-      <el-table v-loading="listLoading" :data="data" :size="size" class="table" row-class-name="small-row-class" border @selection-change="selectionChange" @row-click="rowClick">
+      <el-table v-loading="listLoading" :height="height" :data="data" :size="size" class="table" row-class-name="small-row-class" border @selection-change="selectionChange" @row-click="rowClick">
         <!--需要加在表最前方的插槽-->
         <slot name="preColumns" />
         <!--序号列-->
@@ -141,6 +141,12 @@
         return []
       }
     }, // 数据
+    height: {
+      type: Number,
+      default: function() {
+        return []
+      }
+    },
     total: {
       type: Number,
       default: 0
diff --git a/src/views/deviceManage/components/listDigData.vue b/src/views/deviceManage/components/listDigData.vue
new file mode 100644
index 0000000..5a2b795
--- /dev/null
+++ b/src/views/deviceManage/components/listDigData.vue
@@ -0,0 +1,19 @@
+<template>
+  <div>开挖监测仪</div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+
+    }
+  },
+  methods: {
+    initData: function(row = null) {
+      console.log(row, '===')
+    }
+  }
+}
+</script>
+

diff --git a/mock/deviceManage/device.js b/mock/deviceManage/device.js
new file mode 100644
index 0000000..1f0650d
--- /dev/null
+++ b/mock/deviceManage/device.js
@@ -0,0 +1,672 @@
+const deviceList = [
+  {
+    'bfzt': '0',
+    'bfztName': '撤防',
+    'communication': '3,4',
+    'concenCode': '',
+    'concenId': '',
+    'deptName': '燃气集团总公司',
+    'deptid': '24',
+    'installHeight': '123',
+    'devcode': '342021000001',
+    'deviceName': '',
+    'deviceType': '12',
+    'deviceTypeName': '开挖监测仪',
+    'id': '1476131375777120257',
+    'installDate': '2021-12-29',
+    'modelId': '19',
+    'modelName': 'BIRMM-RTU100N',
+    'onlineState': '1',
+    'onlineStateName': '在线',
+    'position': 'test001位置',
+    'ts': '2021-12-29',
+    'valid': '1',
+    'watchType': '燃气泄漏',
+    'wellCode': 'test001',
+    'wellId': '4453'
+  },
+  {
+    'bfzt': '0',
+    'bfztName': '撤防',
+    'communication': '3,4',
+    'concenCode': '',
+    'concenId': '',
+    'deptName': '燃气集团总公司',
+    'deptid': '24',
+    'installHeight': '123',
+    'devcode': '342021000001',
+    'deviceName': '',
+    'deviceType': '12',
+    'deviceTypeName': '井盖状态监测仪',
+    'id': '1476131375777120257',
+    'installDate': '2021-12-29',
+    'modelId': '19',
+    'modelName': 'BIRMM-RTU100N',
+    'onlineState': '1',
+    'onlineStateName': '在线',
+    'position': 'test001位置',
+    'ts': '2021-12-29',
+    'valid': '1',
+    'watchType': '燃气泄漏',
+    'wellCode': 'test001',
+    'wellId': '4453'
+  },
+  {
+    'bfzt': '0',
+    'bfztName': '撤防',
+    'communication': '3,4',
+    'concenCode': '',
+    'concenId': '',
+    'deptName': '燃气集团总公司',
+    'deptid': '24',
+    'installHeight': '123',
+    'devcode': '342021000001',
+    'deviceName': '',
+    'deviceType': '12',
+    'deviceTypeName': '液位监测仪',
+    'id': '1476131375777120257',
+    'installDate': '2021-12-29',
+    'modelId': '19',
+    'modelName': 'BIRMM-RTU100N',
+    'onlineState': '1',
+    'onlineStateName': '在线',
+    'position': 'test001位置',
+    'ts': '2021-12-29',
+    'valid': '1',
+    'watchType': '燃气泄漏',
+    'wellCode': 'test001',
+    'wellId': '4453'
+  },
+  {
+    'bfzt': '0',
+    'bfztName': '撤防',
+    'communication': '3,4',
+    'concenCode': '',
+    'concenId': '',
+    'deptName': '燃气集团总公司',
+    'deptid': '24',
+    'installHeight': '123',
+    'devcode': '342021000001',
+    'deviceName': '',
+    'deviceType': '12',
+    'deviceTypeName': '燃气智能监测终端',
+    'id': '1476131375777120257',
+    'installDate': '2021-12-29',
+    'modelId': '19',
+    'modelName': 'BIRMM-RTU100N',
+    'onlineState': '1',
+    'onlineStateName': '在线',
+    'position': 'test001位置',
+    'ts': '2021-12-29',
+    'valid': '1',
+    'watchType': '燃气泄漏',
+    'wellCode': 'test001',
+    'wellId': '4453'
+  },
+  {
+    'bfzt': '0',
+    'bfztName': '撤防',
+    'communication': '3,4',
+    'concenCode': '',
+    'concenId': '',
+    'deptName': '燃气集团总公司',
+    'deptid': '24',
+    'installHeight': '123',
+    'devcode': '342021000001',
+    'deviceName': '',
+    'deviceType': '12',
+    'deviceTypeName': '噪声记录仪',
+    'id': '1476131375777120257',
+    'installDate': '2021-12-29',
+    'modelId': '19',
+    'modelName': 'BIRMM-RTU100N',
+    'onlineState': '1',
+    'onlineStateName': '在线',
+    'position': 'test001位置',
+    'ts': '2021-12-29',
+    'valid': '1',
+    'watchType': '燃气泄漏',
+    'wellCode': 'test001',
+    'wellId': '4453'
+  },
+  {
+    'bfzt': '0',
+    'bfztName': '撤防',
+    'communication': '3,4',
+    'concenCode': '',
+    'concenId': '',
+    'deptName': '燃气集团总公司',
+    'deptid': '24',
+    'installHeight': '123',
+    'devcode': '342021000001',
+    'deviceName': '',
+    'deviceType': '12',
+    'deviceTypeName': '有害气体监测仪',
+    'id': '1476131375777120257',
+    'installDate': '2021-12-29',
+    'modelId': '19',
+    'modelName': 'BIRMM-RTU100N',
+    'onlineState': '1',
+    'onlineStateName': '在线',
+    'position': 'test001位置',
+    'ts': '2021-12-29',
+    'valid': '1',
+    'watchType': '燃气泄漏',
+    'wellCode': 'test001',
+    'wellId': '4453'
+  },
+  {
+    'bfzt': '0',
+    'bfztName': '撤防',
+    'communication': '3,4',
+    'concenCode': '',
+    'concenId': '',
+    'deptName': '燃气集团总公司',
+    'deptid': '24',
+    'installHeight': '123',
+    'devcode': '342021000001',
+    'deviceName': '',
+    'deviceType': '12',
+    'deviceTypeName': '温湿度监测仪',
+    'id': '1476131375777120257',
+    'installDate': '2021-12-29',
+    'modelId': '19',
+    'modelName': 'BIRMM-RTU100N',
+    'onlineState': '1',
+    'onlineStateName': '在线',
+    'position': 'test001位置',
+    'ts': '2021-12-29',
+    'valid': '1',
+    'watchType': '燃气泄漏',
+    'wellCode': 'test001',
+    'wellId': '4453'
+  },
+  {
+    'bfzt': '0',
+    'bfztName': '撤防',
+    'communication': '3,4',
+    'concenCode': '',
+    'concenId': '',
+    'deptName': '燃气集团总公司',
+    'deptid': '24',
+    'installHeight': '123',
+    'devcode': '342021000001',
+    'deviceName': '',
+    'deviceType': '12',
+    'deviceTypeName': '井盖定位监测仪',
+    'id': '1476131375777120257',
+    'installDate': '2021-12-29',
+    'modelId': '19',
+    'modelName': 'BIRMM-RTU100N',
+    'onlineState': '1',
+    'onlineStateName': '在线',
+    'position': 'test001位置',
+    'ts': '2021-12-29',
+    'valid': '1',
+    'watchType': '燃气泄漏',
+    'wellCode': 'test001',
+    'wellId': '4453'
+  },
+  {
+    'bfzt': '0',
+    'bfztName': '撤防',
+    'communication': '3,4',
+    'concenCode': '',
+    'concenId': '',
+    'deptName': '燃气集团总公司',
+    'deptid': '24',
+    'installHeight': '123',
+    'devcode': '342021000001',
+    'deviceName': '',
+    'deviceType': '12',
+    'deviceTypeName': '燃气智能终端（一体化）',
+    'id': '1476131375777120257',
+    'installDate': '2021-12-29',
+    'modelId': '19',
+    'modelName': 'BIRMM-RTU100N',
+    'onlineState': '1',
+    'onlineStateName': '在线',
+    'position': 'test001位置',
+    'ts': '2021-12-29',
+    'valid': '1',
+    'watchType': '燃气泄漏',
+    'wellCode': 'test001',
+    'wellId': '4453'
+  },
+  {
+    'bfzt': '0',
+    'bfztName': '撤防',
+    'communication': '3,4',
+    'concenCode': '',
+    'concenId': '',
+    'deptName': '燃气集团总公司',
+    'deptid': '24',
+    'installHeight': '123',
+    'devcode': '342021000001',
+    'deviceName': '',
+    'deviceType': '12',
+    'deviceTypeName': '管盯',
+    'id': '1476131375777120257',
+    'installDate': '2021-12-29',
+    'modelId': '19',
+    'modelName': 'BIRMM-RTU100N',
+    'onlineState': '1',
+    'onlineStateName': '在线',
+    'position': 'test001位置',
+    'ts': '2021-12-29',
+    'valid': '1',
+    'watchType': '燃气泄漏',
+    'wellCode': 'test001',
+    'wellId': '4453'
+  }
+]
+const deviceStaticsList = [
+  {
+    'deptName': '燃气集团总公司',
+    'deviceCount': '11',
+    'deptid': '24'
+  },
+  {
+    'deptName': '煤气公司',
+    'deviceCount': '2',
+    'deptid': '24'
+  },
+  {
+    'deptName': '电力公司',
+    'deviceCount': '11',
+    'deptid': '24'
+  }
+
+]
+const deviceOnlineList = [
+  {
+    'deviceType': '井盖状态监测仪',
+    'online': 1,
+    'offline': 9
+  },
+  {
+    'deviceType': '燃气智能监测终端',
+    'online': 1,
+    'offline': 2
+  },
+  {
+    'deviceType': '管盯',
+    'online': 1,
+    'offline': 6
+  }
+
+]
+const deviceOfflineList = [
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  }
+]
+module.exports = [
+  // mock get all routes form server
+  {
+    url: '/device/list',
+    type: 'get',
+    response: _ => {
+      return {
+        code: 200,
+        data: deviceList,
+        message: '请求成功',
+        success: true
+      }
+    }
+  },
+  {
+    url: '/statics/deviceStaticsByDept',
+    type: 'get',
+    response: _ => {
+      return {
+        code: 200,
+        data: deviceStaticsList,
+        message: '请求成功',
+        success: true
+      }
+    }
+  },
+  {
+    url: '/statics/deviceCountByOnlineStatus',
+    type: 'get',
+    response: _ => {
+      return {
+        code: 200,
+        data: deviceOnlineList,
+        message: '请求成功',
+        success: true
+      }
+    }
+  },
+  {
+    url: '/device/offlineListPage',
+    type: 'get',
+    response: _ => {
+      return {
+        code: 200,
+        'total': 120,
+        data: deviceOfflineList,
+        message: '请求成功',
+        success: true
+      }
+    }
+  }
+]
diff --git a/mock/index.js b/mock/index.js
index 6646246..0e60e80 100644
--- a/mock/index.js
+++ b/mock/index.js
@@ -12,6 +12,7 @@
 const dashboard = require('./biz/dashboard')
 const search = require('./remote-search')
 const overview = require('./biz/overview')
+const device = require('./deviceManage/device')
 const deviceType = require('./deviceManage/deviceType')
 const deviceModels = require('./deviceManage/deviceModels')
 const deviceImei = require('./deviceManage/deviceImei')
@@ -42,7 +43,8 @@
   ...tenantConfig,
   ...deptPermission,
   ...tenant,
-  ...warningRule
+  ...warningRule,
+  ...device
 ]
 
 // for front mock
diff --git a/src/api/data/dataStatics.js b/src/api/data/dataStatics.js
index b96a05e..04f756a 100644
--- a/src/api/data/dataStatics.js
+++ b/src/api/data/dataStatics.js
@@ -11,6 +11,14 @@
     params
   })
 }
+// 离线设备列表
+export function offlineList(params) {
+  return request({
+    url: 'device/offlineListPage',
+    method: 'get',
+    params
+  })
+}
 // 根据权属单位统计井数量
 export function wellStaticByDept(params) {
   return request({
@@ -38,6 +46,15 @@
   })
 }
 
+// 离线设备数量
+export function deviceStaticsByOnline(params) {
+  return request({
+    url: 'statics/deviceCountByOnlineStatus',
+    method: 'get',
+    params
+  })
+}
+
 // 根据权属单位统计设备数量
 export function deviceStaticsByDept(params) {
   return request({
diff --git a/src/components/NormalTable/index.vue b/src/components/NormalTable/index.vue
index 9e23838..3fdc6db 100644
--- a/src/components/NormalTable/index.vue
+++ b/src/components/NormalTable/index.vue
@@ -69,7 +69,7 @@
         </el-col>
       </el-row>
       <!-- 表格正文-->
-      <el-table v-loading="listLoading" :data="data" :size="size" class="table" row-class-name="small-row-class" border @selection-change="selectionChange" @row-click="rowClick">
+      <el-table v-loading="listLoading" :height="height" :data="data" :size="size" class="table" row-class-name="small-row-class" border @selection-change="selectionChange" @row-click="rowClick">
         <!--需要加在表最前方的插槽-->
         <slot name="preColumns" />
         <!--序号列-->
@@ -141,6 +141,12 @@
         return []
       }
     }, // 数据
+    height: {
+      type: Number,
+      default: function() {
+        return []
+      }
+    },
     total: {
       type: Number,
       default: 0
diff --git a/src/views/deviceManage/components/listDigData.vue b/src/views/deviceManage/components/listDigData.vue
new file mode 100644
index 0000000..5a2b795
--- /dev/null
+++ b/src/views/deviceManage/components/listDigData.vue
@@ -0,0 +1,19 @@
+<template>
+  <div>开挖监测仪</div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+
+    }
+  },
+  methods: {
+    initData: function(row = null) {
+      console.log(row, '===')
+    }
+  }
+}
+</script>
+
diff --git a/src/views/deviceManage/components/listGasData.vue b/src/views/deviceManage/components/listGasData.vue
new file mode 100644
index 0000000..ccbaa8b
--- /dev/null
+++ b/src/views/deviceManage/components/listGasData.vue
@@ -0,0 +1,18 @@
+<template>
+  <div>燃气智能监测终端</div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+
+    }
+  },
+  methods: {
+    initData: function(row = null) {
+      console.log(row, '===')
+    }
+  }
+}
+</script>

diff --git a/mock/deviceManage/device.js b/mock/deviceManage/device.js
new file mode 100644
index 0000000..1f0650d
--- /dev/null
+++ b/mock/deviceManage/device.js
@@ -0,0 +1,672 @@
+const deviceList = [
+  {
+    'bfzt': '0',
+    'bfztName': '撤防',
+    'communication': '3,4',
+    'concenCode': '',
+    'concenId': '',
+    'deptName': '燃气集团总公司',
+    'deptid': '24',
+    'installHeight': '123',
+    'devcode': '342021000001',
+    'deviceName': '',
+    'deviceType': '12',
+    'deviceTypeName': '开挖监测仪',
+    'id': '1476131375777120257',
+    'installDate': '2021-12-29',
+    'modelId': '19',
+    'modelName': 'BIRMM-RTU100N',
+    'onlineState': '1',
+    'onlineStateName': '在线',
+    'position': 'test001位置',
+    'ts': '2021-12-29',
+    'valid': '1',
+    'watchType': '燃气泄漏',
+    'wellCode': 'test001',
+    'wellId': '4453'
+  },
+  {
+    'bfzt': '0',
+    'bfztName': '撤防',
+    'communication': '3,4',
+    'concenCode': '',
+    'concenId': '',
+    'deptName': '燃气集团总公司',
+    'deptid': '24',
+    'installHeight': '123',
+    'devcode': '342021000001',
+    'deviceName': '',
+    'deviceType': '12',
+    'deviceTypeName': '井盖状态监测仪',
+    'id': '1476131375777120257',
+    'installDate': '2021-12-29',
+    'modelId': '19',
+    'modelName': 'BIRMM-RTU100N',
+    'onlineState': '1',
+    'onlineStateName': '在线',
+    'position': 'test001位置',
+    'ts': '2021-12-29',
+    'valid': '1',
+    'watchType': '燃气泄漏',
+    'wellCode': 'test001',
+    'wellId': '4453'
+  },
+  {
+    'bfzt': '0',
+    'bfztName': '撤防',
+    'communication': '3,4',
+    'concenCode': '',
+    'concenId': '',
+    'deptName': '燃气集团总公司',
+    'deptid': '24',
+    'installHeight': '123',
+    'devcode': '342021000001',
+    'deviceName': '',
+    'deviceType': '12',
+    'deviceTypeName': '液位监测仪',
+    'id': '1476131375777120257',
+    'installDate': '2021-12-29',
+    'modelId': '19',
+    'modelName': 'BIRMM-RTU100N',
+    'onlineState': '1',
+    'onlineStateName': '在线',
+    'position': 'test001位置',
+    'ts': '2021-12-29',
+    'valid': '1',
+    'watchType': '燃气泄漏',
+    'wellCode': 'test001',
+    'wellId': '4453'
+  },
+  {
+    'bfzt': '0',
+    'bfztName': '撤防',
+    'communication': '3,4',
+    'concenCode': '',
+    'concenId': '',
+    'deptName': '燃气集团总公司',
+    'deptid': '24',
+    'installHeight': '123',
+    'devcode': '342021000001',
+    'deviceName': '',
+    'deviceType': '12',
+    'deviceTypeName': '燃气智能监测终端',
+    'id': '1476131375777120257',
+    'installDate': '2021-12-29',
+    'modelId': '19',
+    'modelName': 'BIRMM-RTU100N',
+    'onlineState': '1',
+    'onlineStateName': '在线',
+    'position': 'test001位置',
+    'ts': '2021-12-29',
+    'valid': '1',
+    'watchType': '燃气泄漏',
+    'wellCode': 'test001',
+    'wellId': '4453'
+  },
+  {
+    'bfzt': '0',
+    'bfztName': '撤防',
+    'communication': '3,4',
+    'concenCode': '',
+    'concenId': '',
+    'deptName': '燃气集团总公司',
+    'deptid': '24',
+    'installHeight': '123',
+    'devcode': '342021000001',
+    'deviceName': '',
+    'deviceType': '12',
+    'deviceTypeName': '噪声记录仪',
+    'id': '1476131375777120257',
+    'installDate': '2021-12-29',
+    'modelId': '19',
+    'modelName': 'BIRMM-RTU100N',
+    'onlineState': '1',
+    'onlineStateName': '在线',
+    'position': 'test001位置',
+    'ts': '2021-12-29',
+    'valid': '1',
+    'watchType': '燃气泄漏',
+    'wellCode': 'test001',
+    'wellId': '4453'
+  },
+  {
+    'bfzt': '0',
+    'bfztName': '撤防',
+    'communication': '3,4',
+    'concenCode': '',
+    'concenId': '',
+    'deptName': '燃气集团总公司',
+    'deptid': '24',
+    'installHeight': '123',
+    'devcode': '342021000001',
+    'deviceName': '',
+    'deviceType': '12',
+    'deviceTypeName': '有害气体监测仪',
+    'id': '1476131375777120257',
+    'installDate': '2021-12-29',
+    'modelId': '19',
+    'modelName': 'BIRMM-RTU100N',
+    'onlineState': '1',
+    'onlineStateName': '在线',
+    'position': 'test001位置',
+    'ts': '2021-12-29',
+    'valid': '1',
+    'watchType': '燃气泄漏',
+    'wellCode': 'test001',
+    'wellId': '4453'
+  },
+  {
+    'bfzt': '0',
+    'bfztName': '撤防',
+    'communication': '3,4',
+    'concenCode': '',
+    'concenId': '',
+    'deptName': '燃气集团总公司',
+    'deptid': '24',
+    'installHeight': '123',
+    'devcode': '342021000001',
+    'deviceName': '',
+    'deviceType': '12',
+    'deviceTypeName': '温湿度监测仪',
+    'id': '1476131375777120257',
+    'installDate': '2021-12-29',
+    'modelId': '19',
+    'modelName': 'BIRMM-RTU100N',
+    'onlineState': '1',
+    'onlineStateName': '在线',
+    'position': 'test001位置',
+    'ts': '2021-12-29',
+    'valid': '1',
+    'watchType': '燃气泄漏',
+    'wellCode': 'test001',
+    'wellId': '4453'
+  },
+  {
+    'bfzt': '0',
+    'bfztName': '撤防',
+    'communication': '3,4',
+    'concenCode': '',
+    'concenId': '',
+    'deptName': '燃气集团总公司',
+    'deptid': '24',
+    'installHeight': '123',
+    'devcode': '342021000001',
+    'deviceName': '',
+    'deviceType': '12',
+    'deviceTypeName': '井盖定位监测仪',
+    'id': '1476131375777120257',
+    'installDate': '2021-12-29',
+    'modelId': '19',
+    'modelName': 'BIRMM-RTU100N',
+    'onlineState': '1',
+    'onlineStateName': '在线',
+    'position': 'test001位置',
+    'ts': '2021-12-29',
+    'valid': '1',
+    'watchType': '燃气泄漏',
+    'wellCode': 'test001',
+    'wellId': '4453'
+  },
+  {
+    'bfzt': '0',
+    'bfztName': '撤防',
+    'communication': '3,4',
+    'concenCode': '',
+    'concenId': '',
+    'deptName': '燃气集团总公司',
+    'deptid': '24',
+    'installHeight': '123',
+    'devcode': '342021000001',
+    'deviceName': '',
+    'deviceType': '12',
+    'deviceTypeName': '燃气智能终端（一体化）',
+    'id': '1476131375777120257',
+    'installDate': '2021-12-29',
+    'modelId': '19',
+    'modelName': 'BIRMM-RTU100N',
+    'onlineState': '1',
+    'onlineStateName': '在线',
+    'position': 'test001位置',
+    'ts': '2021-12-29',
+    'valid': '1',
+    'watchType': '燃气泄漏',
+    'wellCode': 'test001',
+    'wellId': '4453'
+  },
+  {
+    'bfzt': '0',
+    'bfztName': '撤防',
+    'communication': '3,4',
+    'concenCode': '',
+    'concenId': '',
+    'deptName': '燃气集团总公司',
+    'deptid': '24',
+    'installHeight': '123',
+    'devcode': '342021000001',
+    'deviceName': '',
+    'deviceType': '12',
+    'deviceTypeName': '管盯',
+    'id': '1476131375777120257',
+    'installDate': '2021-12-29',
+    'modelId': '19',
+    'modelName': 'BIRMM-RTU100N',
+    'onlineState': '1',
+    'onlineStateName': '在线',
+    'position': 'test001位置',
+    'ts': '2021-12-29',
+    'valid': '1',
+    'watchType': '燃气泄漏',
+    'wellCode': 'test001',
+    'wellId': '4453'
+  }
+]
+const deviceStaticsList = [
+  {
+    'deptName': '燃气集团总公司',
+    'deviceCount': '11',
+    'deptid': '24'
+  },
+  {
+    'deptName': '煤气公司',
+    'deviceCount': '2',
+    'deptid': '24'
+  },
+  {
+    'deptName': '电力公司',
+    'deviceCount': '11',
+    'deptid': '24'
+  }
+
+]
+const deviceOnlineList = [
+  {
+    'deviceType': '井盖状态监测仪',
+    'online': 1,
+    'offline': 9
+  },
+  {
+    'deviceType': '燃气智能监测终端',
+    'online': 1,
+    'offline': 2
+  },
+  {
+    'deviceType': '管盯',
+    'online': 1,
+    'offline': 6
+  }
+
+]
+const deviceOfflineList = [
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  }
+]
+module.exports = [
+  // mock get all routes form server
+  {
+    url: '/device/list',
+    type: 'get',
+    response: _ => {
+      return {
+        code: 200,
+        data: deviceList,
+        message: '请求成功',
+        success: true
+      }
+    }
+  },
+  {
+    url: '/statics/deviceStaticsByDept',
+    type: 'get',
+    response: _ => {
+      return {
+        code: 200,
+        data: deviceStaticsList,
+        message: '请求成功',
+        success: true
+      }
+    }
+  },
+  {
+    url: '/statics/deviceCountByOnlineStatus',
+    type: 'get',
+    response: _ => {
+      return {
+        code: 200,
+        data: deviceOnlineList,
+        message: '请求成功',
+        success: true
+      }
+    }
+  },
+  {
+    url: '/device/offlineListPage',
+    type: 'get',
+    response: _ => {
+      return {
+        code: 200,
+        'total': 120,
+        data: deviceOfflineList,
+        message: '请求成功',
+        success: true
+      }
+    }
+  }
+]
diff --git a/mock/index.js b/mock/index.js
index 6646246..0e60e80 100644
--- a/mock/index.js
+++ b/mock/index.js
@@ -12,6 +12,7 @@
 const dashboard = require('./biz/dashboard')
 const search = require('./remote-search')
 const overview = require('./biz/overview')
+const device = require('./deviceManage/device')
 const deviceType = require('./deviceManage/deviceType')
 const deviceModels = require('./deviceManage/deviceModels')
 const deviceImei = require('./deviceManage/deviceImei')
@@ -42,7 +43,8 @@
   ...tenantConfig,
   ...deptPermission,
   ...tenant,
-  ...warningRule
+  ...warningRule,
+  ...device
 ]
 
 // for front mock
diff --git a/src/api/data/dataStatics.js b/src/api/data/dataStatics.js
index b96a05e..04f756a 100644
--- a/src/api/data/dataStatics.js
+++ b/src/api/data/dataStatics.js
@@ -11,6 +11,14 @@
     params
   })
 }
+// 离线设备列表
+export function offlineList(params) {
+  return request({
+    url: 'device/offlineListPage',
+    method: 'get',
+    params
+  })
+}
 // 根据权属单位统计井数量
 export function wellStaticByDept(params) {
   return request({
@@ -38,6 +46,15 @@
   })
 }
 
+// 离线设备数量
+export function deviceStaticsByOnline(params) {
+  return request({
+    url: 'statics/deviceCountByOnlineStatus',
+    method: 'get',
+    params
+  })
+}
+
 // 根据权属单位统计设备数量
 export function deviceStaticsByDept(params) {
   return request({
diff --git a/src/components/NormalTable/index.vue b/src/components/NormalTable/index.vue
index 9e23838..3fdc6db 100644
--- a/src/components/NormalTable/index.vue
+++ b/src/components/NormalTable/index.vue
@@ -69,7 +69,7 @@
         </el-col>
       </el-row>
       <!-- 表格正文-->
-      <el-table v-loading="listLoading" :data="data" :size="size" class="table" row-class-name="small-row-class" border @selection-change="selectionChange" @row-click="rowClick">
+      <el-table v-loading="listLoading" :height="height" :data="data" :size="size" class="table" row-class-name="small-row-class" border @selection-change="selectionChange" @row-click="rowClick">
         <!--需要加在表最前方的插槽-->
         <slot name="preColumns" />
         <!--序号列-->
@@ -141,6 +141,12 @@
         return []
       }
     }, // 数据
+    height: {
+      type: Number,
+      default: function() {
+        return []
+      }
+    },
     total: {
       type: Number,
       default: 0
diff --git a/src/views/deviceManage/components/listDigData.vue b/src/views/deviceManage/components/listDigData.vue
new file mode 100644
index 0000000..5a2b795
--- /dev/null
+++ b/src/views/deviceManage/components/listDigData.vue
@@ -0,0 +1,19 @@
+<template>
+  <div>开挖监测仪</div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+
+    }
+  },
+  methods: {
+    initData: function(row = null) {
+      console.log(row, '===')
+    }
+  }
+}
+</script>
+
diff --git a/src/views/deviceManage/components/listGasData.vue b/src/views/deviceManage/components/listGasData.vue
new file mode 100644
index 0000000..ccbaa8b
--- /dev/null
+++ b/src/views/deviceManage/components/listGasData.vue
@@ -0,0 +1,18 @@
+<template>
+  <div>燃气智能监测终端</div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+
+    }
+  },
+  methods: {
+    initData: function(row = null) {
+      console.log(row, '===')
+    }
+  }
+}
+</script>
diff --git a/src/views/deviceManage/components/listHarmfulData.vue b/src/views/deviceManage/components/listHarmfulData.vue
new file mode 100644
index 0000000..687f9bc
--- /dev/null
+++ b/src/views/deviceManage/components/listHarmfulData.vue
@@ -0,0 +1,18 @@
+<template>
+  <div>有害气体监测仪</div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+
+    }
+  },
+  methods: {
+    initData: function(row = null) {
+      console.log(row, '===')
+    }
+  }
+}
+</script>

diff --git a/mock/deviceManage/device.js b/mock/deviceManage/device.js
new file mode 100644
index 0000000..1f0650d
--- /dev/null
+++ b/mock/deviceManage/device.js
@@ -0,0 +1,672 @@
+const deviceList = [
+  {
+    'bfzt': '0',
+    'bfztName': '撤防',
+    'communication': '3,4',
+    'concenCode': '',
+    'concenId': '',
+    'deptName': '燃气集团总公司',
+    'deptid': '24',
+    'installHeight': '123',
+    'devcode': '342021000001',
+    'deviceName': '',
+    'deviceType': '12',
+    'deviceTypeName': '开挖监测仪',
+    'id': '1476131375777120257',
+    'installDate': '2021-12-29',
+    'modelId': '19',
+    'modelName': 'BIRMM-RTU100N',
+    'onlineState': '1',
+    'onlineStateName': '在线',
+    'position': 'test001位置',
+    'ts': '2021-12-29',
+    'valid': '1',
+    'watchType': '燃气泄漏',
+    'wellCode': 'test001',
+    'wellId': '4453'
+  },
+  {
+    'bfzt': '0',
+    'bfztName': '撤防',
+    'communication': '3,4',
+    'concenCode': '',
+    'concenId': '',
+    'deptName': '燃气集团总公司',
+    'deptid': '24',
+    'installHeight': '123',
+    'devcode': '342021000001',
+    'deviceName': '',
+    'deviceType': '12',
+    'deviceTypeName': '井盖状态监测仪',
+    'id': '1476131375777120257',
+    'installDate': '2021-12-29',
+    'modelId': '19',
+    'modelName': 'BIRMM-RTU100N',
+    'onlineState': '1',
+    'onlineStateName': '在线',
+    'position': 'test001位置',
+    'ts': '2021-12-29',
+    'valid': '1',
+    'watchType': '燃气泄漏',
+    'wellCode': 'test001',
+    'wellId': '4453'
+  },
+  {
+    'bfzt': '0',
+    'bfztName': '撤防',
+    'communication': '3,4',
+    'concenCode': '',
+    'concenId': '',
+    'deptName': '燃气集团总公司',
+    'deptid': '24',
+    'installHeight': '123',
+    'devcode': '342021000001',
+    'deviceName': '',
+    'deviceType': '12',
+    'deviceTypeName': '液位监测仪',
+    'id': '1476131375777120257',
+    'installDate': '2021-12-29',
+    'modelId': '19',
+    'modelName': 'BIRMM-RTU100N',
+    'onlineState': '1',
+    'onlineStateName': '在线',
+    'position': 'test001位置',
+    'ts': '2021-12-29',
+    'valid': '1',
+    'watchType': '燃气泄漏',
+    'wellCode': 'test001',
+    'wellId': '4453'
+  },
+  {
+    'bfzt': '0',
+    'bfztName': '撤防',
+    'communication': '3,4',
+    'concenCode': '',
+    'concenId': '',
+    'deptName': '燃气集团总公司',
+    'deptid': '24',
+    'installHeight': '123',
+    'devcode': '342021000001',
+    'deviceName': '',
+    'deviceType': '12',
+    'deviceTypeName': '燃气智能监测终端',
+    'id': '1476131375777120257',
+    'installDate': '2021-12-29',
+    'modelId': '19',
+    'modelName': 'BIRMM-RTU100N',
+    'onlineState': '1',
+    'onlineStateName': '在线',
+    'position': 'test001位置',
+    'ts': '2021-12-29',
+    'valid': '1',
+    'watchType': '燃气泄漏',
+    'wellCode': 'test001',
+    'wellId': '4453'
+  },
+  {
+    'bfzt': '0',
+    'bfztName': '撤防',
+    'communication': '3,4',
+    'concenCode': '',
+    'concenId': '',
+    'deptName': '燃气集团总公司',
+    'deptid': '24',
+    'installHeight': '123',
+    'devcode': '342021000001',
+    'deviceName': '',
+    'deviceType': '12',
+    'deviceTypeName': '噪声记录仪',
+    'id': '1476131375777120257',
+    'installDate': '2021-12-29',
+    'modelId': '19',
+    'modelName': 'BIRMM-RTU100N',
+    'onlineState': '1',
+    'onlineStateName': '在线',
+    'position': 'test001位置',
+    'ts': '2021-12-29',
+    'valid': '1',
+    'watchType': '燃气泄漏',
+    'wellCode': 'test001',
+    'wellId': '4453'
+  },
+  {
+    'bfzt': '0',
+    'bfztName': '撤防',
+    'communication': '3,4',
+    'concenCode': '',
+    'concenId': '',
+    'deptName': '燃气集团总公司',
+    'deptid': '24',
+    'installHeight': '123',
+    'devcode': '342021000001',
+    'deviceName': '',
+    'deviceType': '12',
+    'deviceTypeName': '有害气体监测仪',
+    'id': '1476131375777120257',
+    'installDate': '2021-12-29',
+    'modelId': '19',
+    'modelName': 'BIRMM-RTU100N',
+    'onlineState': '1',
+    'onlineStateName': '在线',
+    'position': 'test001位置',
+    'ts': '2021-12-29',
+    'valid': '1',
+    'watchType': '燃气泄漏',
+    'wellCode': 'test001',
+    'wellId': '4453'
+  },
+  {
+    'bfzt': '0',
+    'bfztName': '撤防',
+    'communication': '3,4',
+    'concenCode': '',
+    'concenId': '',
+    'deptName': '燃气集团总公司',
+    'deptid': '24',
+    'installHeight': '123',
+    'devcode': '342021000001',
+    'deviceName': '',
+    'deviceType': '12',
+    'deviceTypeName': '温湿度监测仪',
+    'id': '1476131375777120257',
+    'installDate': '2021-12-29',
+    'modelId': '19',
+    'modelName': 'BIRMM-RTU100N',
+    'onlineState': '1',
+    'onlineStateName': '在线',
+    'position': 'test001位置',
+    'ts': '2021-12-29',
+    'valid': '1',
+    'watchType': '燃气泄漏',
+    'wellCode': 'test001',
+    'wellId': '4453'
+  },
+  {
+    'bfzt': '0',
+    'bfztName': '撤防',
+    'communication': '3,4',
+    'concenCode': '',
+    'concenId': '',
+    'deptName': '燃气集团总公司',
+    'deptid': '24',
+    'installHeight': '123',
+    'devcode': '342021000001',
+    'deviceName': '',
+    'deviceType': '12',
+    'deviceTypeName': '井盖定位监测仪',
+    'id': '1476131375777120257',
+    'installDate': '2021-12-29',
+    'modelId': '19',
+    'modelName': 'BIRMM-RTU100N',
+    'onlineState': '1',
+    'onlineStateName': '在线',
+    'position': 'test001位置',
+    'ts': '2021-12-29',
+    'valid': '1',
+    'watchType': '燃气泄漏',
+    'wellCode': 'test001',
+    'wellId': '4453'
+  },
+  {
+    'bfzt': '0',
+    'bfztName': '撤防',
+    'communication': '3,4',
+    'concenCode': '',
+    'concenId': '',
+    'deptName': '燃气集团总公司',
+    'deptid': '24',
+    'installHeight': '123',
+    'devcode': '342021000001',
+    'deviceName': '',
+    'deviceType': '12',
+    'deviceTypeName': '燃气智能终端（一体化）',
+    'id': '1476131375777120257',
+    'installDate': '2021-12-29',
+    'modelId': '19',
+    'modelName': 'BIRMM-RTU100N',
+    'onlineState': '1',
+    'onlineStateName': '在线',
+    'position': 'test001位置',
+    'ts': '2021-12-29',
+    'valid': '1',
+    'watchType': '燃气泄漏',
+    'wellCode': 'test001',
+    'wellId': '4453'
+  },
+  {
+    'bfzt': '0',
+    'bfztName': '撤防',
+    'communication': '3,4',
+    'concenCode': '',
+    'concenId': '',
+    'deptName': '燃气集团总公司',
+    'deptid': '24',
+    'installHeight': '123',
+    'devcode': '342021000001',
+    'deviceName': '',
+    'deviceType': '12',
+    'deviceTypeName': '管盯',
+    'id': '1476131375777120257',
+    'installDate': '2021-12-29',
+    'modelId': '19',
+    'modelName': 'BIRMM-RTU100N',
+    'onlineState': '1',
+    'onlineStateName': '在线',
+    'position': 'test001位置',
+    'ts': '2021-12-29',
+    'valid': '1',
+    'watchType': '燃气泄漏',
+    'wellCode': 'test001',
+    'wellId': '4453'
+  }
+]
+const deviceStaticsList = [
+  {
+    'deptName': '燃气集团总公司',
+    'deviceCount': '11',
+    'deptid': '24'
+  },
+  {
+    'deptName': '煤气公司',
+    'deviceCount': '2',
+    'deptid': '24'
+  },
+  {
+    'deptName': '电力公司',
+    'deviceCount': '11',
+    'deptid': '24'
+  }
+
+]
+const deviceOnlineList = [
+  {
+    'deviceType': '井盖状态监测仪',
+    'online': 1,
+    'offline': 9
+  },
+  {
+    'deviceType': '燃气智能监测终端',
+    'online': 1,
+    'offline': 2
+  },
+  {
+    'deviceType': '管盯',
+    'online': 1,
+    'offline': 6
+  }
+
+]
+const deviceOfflineList = [
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  }
+]
+module.exports = [
+  // mock get all routes form server
+  {
+    url: '/device/list',
+    type: 'get',
+    response: _ => {
+      return {
+        code: 200,
+        data: deviceList,
+        message: '请求成功',
+        success: true
+      }
+    }
+  },
+  {
+    url: '/statics/deviceStaticsByDept',
+    type: 'get',
+    response: _ => {
+      return {
+        code: 200,
+        data: deviceStaticsList,
+        message: '请求成功',
+        success: true
+      }
+    }
+  },
+  {
+    url: '/statics/deviceCountByOnlineStatus',
+    type: 'get',
+    response: _ => {
+      return {
+        code: 200,
+        data: deviceOnlineList,
+        message: '请求成功',
+        success: true
+      }
+    }
+  },
+  {
+    url: '/device/offlineListPage',
+    type: 'get',
+    response: _ => {
+      return {
+        code: 200,
+        'total': 120,
+        data: deviceOfflineList,
+        message: '请求成功',
+        success: true
+      }
+    }
+  }
+]
diff --git a/mock/index.js b/mock/index.js
index 6646246..0e60e80 100644
--- a/mock/index.js
+++ b/mock/index.js
@@ -12,6 +12,7 @@
 const dashboard = require('./biz/dashboard')
 const search = require('./remote-search')
 const overview = require('./biz/overview')
+const device = require('./deviceManage/device')
 const deviceType = require('./deviceManage/deviceType')
 const deviceModels = require('./deviceManage/deviceModels')
 const deviceImei = require('./deviceManage/deviceImei')
@@ -42,7 +43,8 @@
   ...tenantConfig,
   ...deptPermission,
   ...tenant,
-  ...warningRule
+  ...warningRule,
+  ...device
 ]
 
 // for front mock
diff --git a/src/api/data/dataStatics.js b/src/api/data/dataStatics.js
index b96a05e..04f756a 100644
--- a/src/api/data/dataStatics.js
+++ b/src/api/data/dataStatics.js
@@ -11,6 +11,14 @@
     params
   })
 }
+// 离线设备列表
+export function offlineList(params) {
+  return request({
+    url: 'device/offlineListPage',
+    method: 'get',
+    params
+  })
+}
 // 根据权属单位统计井数量
 export function wellStaticByDept(params) {
   return request({
@@ -38,6 +46,15 @@
   })
 }
 
+// 离线设备数量
+export function deviceStaticsByOnline(params) {
+  return request({
+    url: 'statics/deviceCountByOnlineStatus',
+    method: 'get',
+    params
+  })
+}
+
 // 根据权属单位统计设备数量
 export function deviceStaticsByDept(params) {
   return request({
diff --git a/src/components/NormalTable/index.vue b/src/components/NormalTable/index.vue
index 9e23838..3fdc6db 100644
--- a/src/components/NormalTable/index.vue
+++ b/src/components/NormalTable/index.vue
@@ -69,7 +69,7 @@
         </el-col>
       </el-row>
       <!-- 表格正文-->
-      <el-table v-loading="listLoading" :data="data" :size="size" class="table" row-class-name="small-row-class" border @selection-change="selectionChange" @row-click="rowClick">
+      <el-table v-loading="listLoading" :height="height" :data="data" :size="size" class="table" row-class-name="small-row-class" border @selection-change="selectionChange" @row-click="rowClick">
         <!--需要加在表最前方的插槽-->
         <slot name="preColumns" />
         <!--序号列-->
@@ -141,6 +141,12 @@
         return []
       }
     }, // 数据
+    height: {
+      type: Number,
+      default: function() {
+        return []
+      }
+    },
     total: {
       type: Number,
       default: 0
diff --git a/src/views/deviceManage/components/listDigData.vue b/src/views/deviceManage/components/listDigData.vue
new file mode 100644
index 0000000..5a2b795
--- /dev/null
+++ b/src/views/deviceManage/components/listDigData.vue
@@ -0,0 +1,19 @@
+<template>
+  <div>开挖监测仪</div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+
+    }
+  },
+  methods: {
+    initData: function(row = null) {
+      console.log(row, '===')
+    }
+  }
+}
+</script>
+
diff --git a/src/views/deviceManage/components/listGasData.vue b/src/views/deviceManage/components/listGasData.vue
new file mode 100644
index 0000000..ccbaa8b
--- /dev/null
+++ b/src/views/deviceManage/components/listGasData.vue
@@ -0,0 +1,18 @@
+<template>
+  <div>燃气智能监测终端</div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+
+    }
+  },
+  methods: {
+    initData: function(row = null) {
+      console.log(row, '===')
+    }
+  }
+}
+</script>
diff --git a/src/views/deviceManage/components/listHarmfulData.vue b/src/views/deviceManage/components/listHarmfulData.vue
new file mode 100644
index 0000000..687f9bc
--- /dev/null
+++ b/src/views/deviceManage/components/listHarmfulData.vue
@@ -0,0 +1,18 @@
+<template>
+  <div>有害气体监测仪</div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+
+    }
+  },
+  methods: {
+    initData: function(row = null) {
+      console.log(row, '===')
+    }
+  }
+}
+</script>
diff --git a/src/views/deviceManage/components/listLiquidData.vue b/src/views/deviceManage/components/listLiquidData.vue
new file mode 100644
index 0000000..f279ee9
--- /dev/null
+++ b/src/views/deviceManage/components/listLiquidData.vue
@@ -0,0 +1,18 @@
+<template>
+  <div>液位监测仪</div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+
+    }
+  },
+  methods: {
+    initData: function(row = null) {
+      console.log(row, '===')
+    }
+  }
+}
+</script>

diff --git a/mock/deviceManage/device.js b/mock/deviceManage/device.js
new file mode 100644
index 0000000..1f0650d
--- /dev/null
+++ b/mock/deviceManage/device.js
@@ -0,0 +1,672 @@
+const deviceList = [
+  {
+    'bfzt': '0',
+    'bfztName': '撤防',
+    'communication': '3,4',
+    'concenCode': '',
+    'concenId': '',
+    'deptName': '燃气集团总公司',
+    'deptid': '24',
+    'installHeight': '123',
+    'devcode': '342021000001',
+    'deviceName': '',
+    'deviceType': '12',
+    'deviceTypeName': '开挖监测仪',
+    'id': '1476131375777120257',
+    'installDate': '2021-12-29',
+    'modelId': '19',
+    'modelName': 'BIRMM-RTU100N',
+    'onlineState': '1',
+    'onlineStateName': '在线',
+    'position': 'test001位置',
+    'ts': '2021-12-29',
+    'valid': '1',
+    'watchType': '燃气泄漏',
+    'wellCode': 'test001',
+    'wellId': '4453'
+  },
+  {
+    'bfzt': '0',
+    'bfztName': '撤防',
+    'communication': '3,4',
+    'concenCode': '',
+    'concenId': '',
+    'deptName': '燃气集团总公司',
+    'deptid': '24',
+    'installHeight': '123',
+    'devcode': '342021000001',
+    'deviceName': '',
+    'deviceType': '12',
+    'deviceTypeName': '井盖状态监测仪',
+    'id': '1476131375777120257',
+    'installDate': '2021-12-29',
+    'modelId': '19',
+    'modelName': 'BIRMM-RTU100N',
+    'onlineState': '1',
+    'onlineStateName': '在线',
+    'position': 'test001位置',
+    'ts': '2021-12-29',
+    'valid': '1',
+    'watchType': '燃气泄漏',
+    'wellCode': 'test001',
+    'wellId': '4453'
+  },
+  {
+    'bfzt': '0',
+    'bfztName': '撤防',
+    'communication': '3,4',
+    'concenCode': '',
+    'concenId': '',
+    'deptName': '燃气集团总公司',
+    'deptid': '24',
+    'installHeight': '123',
+    'devcode': '342021000001',
+    'deviceName': '',
+    'deviceType': '12',
+    'deviceTypeName': '液位监测仪',
+    'id': '1476131375777120257',
+    'installDate': '2021-12-29',
+    'modelId': '19',
+    'modelName': 'BIRMM-RTU100N',
+    'onlineState': '1',
+    'onlineStateName': '在线',
+    'position': 'test001位置',
+    'ts': '2021-12-29',
+    'valid': '1',
+    'watchType': '燃气泄漏',
+    'wellCode': 'test001',
+    'wellId': '4453'
+  },
+  {
+    'bfzt': '0',
+    'bfztName': '撤防',
+    'communication': '3,4',
+    'concenCode': '',
+    'concenId': '',
+    'deptName': '燃气集团总公司',
+    'deptid': '24',
+    'installHeight': '123',
+    'devcode': '342021000001',
+    'deviceName': '',
+    'deviceType': '12',
+    'deviceTypeName': '燃气智能监测终端',
+    'id': '1476131375777120257',
+    'installDate': '2021-12-29',
+    'modelId': '19',
+    'modelName': 'BIRMM-RTU100N',
+    'onlineState': '1',
+    'onlineStateName': '在线',
+    'position': 'test001位置',
+    'ts': '2021-12-29',
+    'valid': '1',
+    'watchType': '燃气泄漏',
+    'wellCode': 'test001',
+    'wellId': '4453'
+  },
+  {
+    'bfzt': '0',
+    'bfztName': '撤防',
+    'communication': '3,4',
+    'concenCode': '',
+    'concenId': '',
+    'deptName': '燃气集团总公司',
+    'deptid': '24',
+    'installHeight': '123',
+    'devcode': '342021000001',
+    'deviceName': '',
+    'deviceType': '12',
+    'deviceTypeName': '噪声记录仪',
+    'id': '1476131375777120257',
+    'installDate': '2021-12-29',
+    'modelId': '19',
+    'modelName': 'BIRMM-RTU100N',
+    'onlineState': '1',
+    'onlineStateName': '在线',
+    'position': 'test001位置',
+    'ts': '2021-12-29',
+    'valid': '1',
+    'watchType': '燃气泄漏',
+    'wellCode': 'test001',
+    'wellId': '4453'
+  },
+  {
+    'bfzt': '0',
+    'bfztName': '撤防',
+    'communication': '3,4',
+    'concenCode': '',
+    'concenId': '',
+    'deptName': '燃气集团总公司',
+    'deptid': '24',
+    'installHeight': '123',
+    'devcode': '342021000001',
+    'deviceName': '',
+    'deviceType': '12',
+    'deviceTypeName': '有害气体监测仪',
+    'id': '1476131375777120257',
+    'installDate': '2021-12-29',
+    'modelId': '19',
+    'modelName': 'BIRMM-RTU100N',
+    'onlineState': '1',
+    'onlineStateName': '在线',
+    'position': 'test001位置',
+    'ts': '2021-12-29',
+    'valid': '1',
+    'watchType': '燃气泄漏',
+    'wellCode': 'test001',
+    'wellId': '4453'
+  },
+  {
+    'bfzt': '0',
+    'bfztName': '撤防',
+    'communication': '3,4',
+    'concenCode': '',
+    'concenId': '',
+    'deptName': '燃气集团总公司',
+    'deptid': '24',
+    'installHeight': '123',
+    'devcode': '342021000001',
+    'deviceName': '',
+    'deviceType': '12',
+    'deviceTypeName': '温湿度监测仪',
+    'id': '1476131375777120257',
+    'installDate': '2021-12-29',
+    'modelId': '19',
+    'modelName': 'BIRMM-RTU100N',
+    'onlineState': '1',
+    'onlineStateName': '在线',
+    'position': 'test001位置',
+    'ts': '2021-12-29',
+    'valid': '1',
+    'watchType': '燃气泄漏',
+    'wellCode': 'test001',
+    'wellId': '4453'
+  },
+  {
+    'bfzt': '0',
+    'bfztName': '撤防',
+    'communication': '3,4',
+    'concenCode': '',
+    'concenId': '',
+    'deptName': '燃气集团总公司',
+    'deptid': '24',
+    'installHeight': '123',
+    'devcode': '342021000001',
+    'deviceName': '',
+    'deviceType': '12',
+    'deviceTypeName': '井盖定位监测仪',
+    'id': '1476131375777120257',
+    'installDate': '2021-12-29',
+    'modelId': '19',
+    'modelName': 'BIRMM-RTU100N',
+    'onlineState': '1',
+    'onlineStateName': '在线',
+    'position': 'test001位置',
+    'ts': '2021-12-29',
+    'valid': '1',
+    'watchType': '燃气泄漏',
+    'wellCode': 'test001',
+    'wellId': '4453'
+  },
+  {
+    'bfzt': '0',
+    'bfztName': '撤防',
+    'communication': '3,4',
+    'concenCode': '',
+    'concenId': '',
+    'deptName': '燃气集团总公司',
+    'deptid': '24',
+    'installHeight': '123',
+    'devcode': '342021000001',
+    'deviceName': '',
+    'deviceType': '12',
+    'deviceTypeName': '燃气智能终端（一体化）',
+    'id': '1476131375777120257',
+    'installDate': '2021-12-29',
+    'modelId': '19',
+    'modelName': 'BIRMM-RTU100N',
+    'onlineState': '1',
+    'onlineStateName': '在线',
+    'position': 'test001位置',
+    'ts': '2021-12-29',
+    'valid': '1',
+    'watchType': '燃气泄漏',
+    'wellCode': 'test001',
+    'wellId': '4453'
+  },
+  {
+    'bfzt': '0',
+    'bfztName': '撤防',
+    'communication': '3,4',
+    'concenCode': '',
+    'concenId': '',
+    'deptName': '燃气集团总公司',
+    'deptid': '24',
+    'installHeight': '123',
+    'devcode': '342021000001',
+    'deviceName': '',
+    'deviceType': '12',
+    'deviceTypeName': '管盯',
+    'id': '1476131375777120257',
+    'installDate': '2021-12-29',
+    'modelId': '19',
+    'modelName': 'BIRMM-RTU100N',
+    'onlineState': '1',
+    'onlineStateName': '在线',
+    'position': 'test001位置',
+    'ts': '2021-12-29',
+    'valid': '1',
+    'watchType': '燃气泄漏',
+    'wellCode': 'test001',
+    'wellId': '4453'
+  }
+]
+const deviceStaticsList = [
+  {
+    'deptName': '燃气集团总公司',
+    'deviceCount': '11',
+    'deptid': '24'
+  },
+  {
+    'deptName': '煤气公司',
+    'deviceCount': '2',
+    'deptid': '24'
+  },
+  {
+    'deptName': '电力公司',
+    'deviceCount': '11',
+    'deptid': '24'
+  }
+
+]
+const deviceOnlineList = [
+  {
+    'deviceType': '井盖状态监测仪',
+    'online': 1,
+    'offline': 9
+  },
+  {
+    'deviceType': '燃气智能监测终端',
+    'online': 1,
+    'offline': 2
+  },
+  {
+    'deviceType': '管盯',
+    'online': 1,
+    'offline': 6
+  }
+
+]
+const deviceOfflineList = [
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  }
+]
+module.exports = [
+  // mock get all routes form server
+  {
+    url: '/device/list',
+    type: 'get',
+    response: _ => {
+      return {
+        code: 200,
+        data: deviceList,
+        message: '请求成功',
+        success: true
+      }
+    }
+  },
+  {
+    url: '/statics/deviceStaticsByDept',
+    type: 'get',
+    response: _ => {
+      return {
+        code: 200,
+        data: deviceStaticsList,
+        message: '请求成功',
+        success: true
+      }
+    }
+  },
+  {
+    url: '/statics/deviceCountByOnlineStatus',
+    type: 'get',
+    response: _ => {
+      return {
+        code: 200,
+        data: deviceOnlineList,
+        message: '请求成功',
+        success: true
+      }
+    }
+  },
+  {
+    url: '/device/offlineListPage',
+    type: 'get',
+    response: _ => {
+      return {
+        code: 200,
+        'total': 120,
+        data: deviceOfflineList,
+        message: '请求成功',
+        success: true
+      }
+    }
+  }
+]
diff --git a/mock/index.js b/mock/index.js
index 6646246..0e60e80 100644
--- a/mock/index.js
+++ b/mock/index.js
@@ -12,6 +12,7 @@
 const dashboard = require('./biz/dashboard')
 const search = require('./remote-search')
 const overview = require('./biz/overview')
+const device = require('./deviceManage/device')
 const deviceType = require('./deviceManage/deviceType')
 const deviceModels = require('./deviceManage/deviceModels')
 const deviceImei = require('./deviceManage/deviceImei')
@@ -42,7 +43,8 @@
   ...tenantConfig,
   ...deptPermission,
   ...tenant,
-  ...warningRule
+  ...warningRule,
+  ...device
 ]
 
 // for front mock
diff --git a/src/api/data/dataStatics.js b/src/api/data/dataStatics.js
index b96a05e..04f756a 100644
--- a/src/api/data/dataStatics.js
+++ b/src/api/data/dataStatics.js
@@ -11,6 +11,14 @@
     params
   })
 }
+// 离线设备列表
+export function offlineList(params) {
+  return request({
+    url: 'device/offlineListPage',
+    method: 'get',
+    params
+  })
+}
 // 根据权属单位统计井数量
 export function wellStaticByDept(params) {
   return request({
@@ -38,6 +46,15 @@
   })
 }
 
+// 离线设备数量
+export function deviceStaticsByOnline(params) {
+  return request({
+    url: 'statics/deviceCountByOnlineStatus',
+    method: 'get',
+    params
+  })
+}
+
 // 根据权属单位统计设备数量
 export function deviceStaticsByDept(params) {
   return request({
diff --git a/src/components/NormalTable/index.vue b/src/components/NormalTable/index.vue
index 9e23838..3fdc6db 100644
--- a/src/components/NormalTable/index.vue
+++ b/src/components/NormalTable/index.vue
@@ -69,7 +69,7 @@
         </el-col>
       </el-row>
       <!-- 表格正文-->
-      <el-table v-loading="listLoading" :data="data" :size="size" class="table" row-class-name="small-row-class" border @selection-change="selectionChange" @row-click="rowClick">
+      <el-table v-loading="listLoading" :height="height" :data="data" :size="size" class="table" row-class-name="small-row-class" border @selection-change="selectionChange" @row-click="rowClick">
         <!--需要加在表最前方的插槽-->
         <slot name="preColumns" />
         <!--序号列-->
@@ -141,6 +141,12 @@
         return []
       }
     }, // 数据
+    height: {
+      type: Number,
+      default: function() {
+        return []
+      }
+    },
     total: {
       type: Number,
       default: 0
diff --git a/src/views/deviceManage/components/listDigData.vue b/src/views/deviceManage/components/listDigData.vue
new file mode 100644
index 0000000..5a2b795
--- /dev/null
+++ b/src/views/deviceManage/components/listDigData.vue
@@ -0,0 +1,19 @@
+<template>
+  <div>开挖监测仪</div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+
+    }
+  },
+  methods: {
+    initData: function(row = null) {
+      console.log(row, '===')
+    }
+  }
+}
+</script>
+
diff --git a/src/views/deviceManage/components/listGasData.vue b/src/views/deviceManage/components/listGasData.vue
new file mode 100644
index 0000000..ccbaa8b
--- /dev/null
+++ b/src/views/deviceManage/components/listGasData.vue
@@ -0,0 +1,18 @@
+<template>
+  <div>燃气智能监测终端</div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+
+    }
+  },
+  methods: {
+    initData: function(row = null) {
+      console.log(row, '===')
+    }
+  }
+}
+</script>
diff --git a/src/views/deviceManage/components/listHarmfulData.vue b/src/views/deviceManage/components/listHarmfulData.vue
new file mode 100644
index 0000000..687f9bc
--- /dev/null
+++ b/src/views/deviceManage/components/listHarmfulData.vue
@@ -0,0 +1,18 @@
+<template>
+  <div>有害气体监测仪</div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+
+    }
+  },
+  methods: {
+    initData: function(row = null) {
+      console.log(row, '===')
+    }
+  }
+}
+</script>
diff --git a/src/views/deviceManage/components/listLiquidData.vue b/src/views/deviceManage/components/listLiquidData.vue
new file mode 100644
index 0000000..f279ee9
--- /dev/null
+++ b/src/views/deviceManage/components/listLiquidData.vue
@@ -0,0 +1,18 @@
+<template>
+  <div>液位监测仪</div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+
+    }
+  },
+  methods: {
+    initData: function(row = null) {
+      console.log(row, '===')
+    }
+  }
+}
+</script>
diff --git a/src/views/deviceManage/components/listLiquidGasData.vue b/src/views/deviceManage/components/listLiquidGasData.vue
new file mode 100644
index 0000000..6f5535e
--- /dev/null
+++ b/src/views/deviceManage/components/listLiquidGasData.vue
@@ -0,0 +1,18 @@
+<template>
+  <div>燃气智能终端（一体化）</div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+
+    }
+  },
+  methods: {
+    initData: function(row = null) {
+      console.log(row, '===')
+    }
+  }
+}
+</script>

diff --git a/mock/deviceManage/device.js b/mock/deviceManage/device.js
new file mode 100644
index 0000000..1f0650d
--- /dev/null
+++ b/mock/deviceManage/device.js
@@ -0,0 +1,672 @@
+const deviceList = [
+  {
+    'bfzt': '0',
+    'bfztName': '撤防',
+    'communication': '3,4',
+    'concenCode': '',
+    'concenId': '',
+    'deptName': '燃气集团总公司',
+    'deptid': '24',
+    'installHeight': '123',
+    'devcode': '342021000001',
+    'deviceName': '',
+    'deviceType': '12',
+    'deviceTypeName': '开挖监测仪',
+    'id': '1476131375777120257',
+    'installDate': '2021-12-29',
+    'modelId': '19',
+    'modelName': 'BIRMM-RTU100N',
+    'onlineState': '1',
+    'onlineStateName': '在线',
+    'position': 'test001位置',
+    'ts': '2021-12-29',
+    'valid': '1',
+    'watchType': '燃气泄漏',
+    'wellCode': 'test001',
+    'wellId': '4453'
+  },
+  {
+    'bfzt': '0',
+    'bfztName': '撤防',
+    'communication': '3,4',
+    'concenCode': '',
+    'concenId': '',
+    'deptName': '燃气集团总公司',
+    'deptid': '24',
+    'installHeight': '123',
+    'devcode': '342021000001',
+    'deviceName': '',
+    'deviceType': '12',
+    'deviceTypeName': '井盖状态监测仪',
+    'id': '1476131375777120257',
+    'installDate': '2021-12-29',
+    'modelId': '19',
+    'modelName': 'BIRMM-RTU100N',
+    'onlineState': '1',
+    'onlineStateName': '在线',
+    'position': 'test001位置',
+    'ts': '2021-12-29',
+    'valid': '1',
+    'watchType': '燃气泄漏',
+    'wellCode': 'test001',
+    'wellId': '4453'
+  },
+  {
+    'bfzt': '0',
+    'bfztName': '撤防',
+    'communication': '3,4',
+    'concenCode': '',
+    'concenId': '',
+    'deptName': '燃气集团总公司',
+    'deptid': '24',
+    'installHeight': '123',
+    'devcode': '342021000001',
+    'deviceName': '',
+    'deviceType': '12',
+    'deviceTypeName': '液位监测仪',
+    'id': '1476131375777120257',
+    'installDate': '2021-12-29',
+    'modelId': '19',
+    'modelName': 'BIRMM-RTU100N',
+    'onlineState': '1',
+    'onlineStateName': '在线',
+    'position': 'test001位置',
+    'ts': '2021-12-29',
+    'valid': '1',
+    'watchType': '燃气泄漏',
+    'wellCode': 'test001',
+    'wellId': '4453'
+  },
+  {
+    'bfzt': '0',
+    'bfztName': '撤防',
+    'communication': '3,4',
+    'concenCode': '',
+    'concenId': '',
+    'deptName': '燃气集团总公司',
+    'deptid': '24',
+    'installHeight': '123',
+    'devcode': '342021000001',
+    'deviceName': '',
+    'deviceType': '12',
+    'deviceTypeName': '燃气智能监测终端',
+    'id': '1476131375777120257',
+    'installDate': '2021-12-29',
+    'modelId': '19',
+    'modelName': 'BIRMM-RTU100N',
+    'onlineState': '1',
+    'onlineStateName': '在线',
+    'position': 'test001位置',
+    'ts': '2021-12-29',
+    'valid': '1',
+    'watchType': '燃气泄漏',
+    'wellCode': 'test001',
+    'wellId': '4453'
+  },
+  {
+    'bfzt': '0',
+    'bfztName': '撤防',
+    'communication': '3,4',
+    'concenCode': '',
+    'concenId': '',
+    'deptName': '燃气集团总公司',
+    'deptid': '24',
+    'installHeight': '123',
+    'devcode': '342021000001',
+    'deviceName': '',
+    'deviceType': '12',
+    'deviceTypeName': '噪声记录仪',
+    'id': '1476131375777120257',
+    'installDate': '2021-12-29',
+    'modelId': '19',
+    'modelName': 'BIRMM-RTU100N',
+    'onlineState': '1',
+    'onlineStateName': '在线',
+    'position': 'test001位置',
+    'ts': '2021-12-29',
+    'valid': '1',
+    'watchType': '燃气泄漏',
+    'wellCode': 'test001',
+    'wellId': '4453'
+  },
+  {
+    'bfzt': '0',
+    'bfztName': '撤防',
+    'communication': '3,4',
+    'concenCode': '',
+    'concenId': '',
+    'deptName': '燃气集团总公司',
+    'deptid': '24',
+    'installHeight': '123',
+    'devcode': '342021000001',
+    'deviceName': '',
+    'deviceType': '12',
+    'deviceTypeName': '有害气体监测仪',
+    'id': '1476131375777120257',
+    'installDate': '2021-12-29',
+    'modelId': '19',
+    'modelName': 'BIRMM-RTU100N',
+    'onlineState': '1',
+    'onlineStateName': '在线',
+    'position': 'test001位置',
+    'ts': '2021-12-29',
+    'valid': '1',
+    'watchType': '燃气泄漏',
+    'wellCode': 'test001',
+    'wellId': '4453'
+  },
+  {
+    'bfzt': '0',
+    'bfztName': '撤防',
+    'communication': '3,4',
+    'concenCode': '',
+    'concenId': '',
+    'deptName': '燃气集团总公司',
+    'deptid': '24',
+    'installHeight': '123',
+    'devcode': '342021000001',
+    'deviceName': '',
+    'deviceType': '12',
+    'deviceTypeName': '温湿度监测仪',
+    'id': '1476131375777120257',
+    'installDate': '2021-12-29',
+    'modelId': '19',
+    'modelName': 'BIRMM-RTU100N',
+    'onlineState': '1',
+    'onlineStateName': '在线',
+    'position': 'test001位置',
+    'ts': '2021-12-29',
+    'valid': '1',
+    'watchType': '燃气泄漏',
+    'wellCode': 'test001',
+    'wellId': '4453'
+  },
+  {
+    'bfzt': '0',
+    'bfztName': '撤防',
+    'communication': '3,4',
+    'concenCode': '',
+    'concenId': '',
+    'deptName': '燃气集团总公司',
+    'deptid': '24',
+    'installHeight': '123',
+    'devcode': '342021000001',
+    'deviceName': '',
+    'deviceType': '12',
+    'deviceTypeName': '井盖定位监测仪',
+    'id': '1476131375777120257',
+    'installDate': '2021-12-29',
+    'modelId': '19',
+    'modelName': 'BIRMM-RTU100N',
+    'onlineState': '1',
+    'onlineStateName': '在线',
+    'position': 'test001位置',
+    'ts': '2021-12-29',
+    'valid': '1',
+    'watchType': '燃气泄漏',
+    'wellCode': 'test001',
+    'wellId': '4453'
+  },
+  {
+    'bfzt': '0',
+    'bfztName': '撤防',
+    'communication': '3,4',
+    'concenCode': '',
+    'concenId': '',
+    'deptName': '燃气集团总公司',
+    'deptid': '24',
+    'installHeight': '123',
+    'devcode': '342021000001',
+    'deviceName': '',
+    'deviceType': '12',
+    'deviceTypeName': '燃气智能终端（一体化）',
+    'id': '1476131375777120257',
+    'installDate': '2021-12-29',
+    'modelId': '19',
+    'modelName': 'BIRMM-RTU100N',
+    'onlineState': '1',
+    'onlineStateName': '在线',
+    'position': 'test001位置',
+    'ts': '2021-12-29',
+    'valid': '1',
+    'watchType': '燃气泄漏',
+    'wellCode': 'test001',
+    'wellId': '4453'
+  },
+  {
+    'bfzt': '0',
+    'bfztName': '撤防',
+    'communication': '3,4',
+    'concenCode': '',
+    'concenId': '',
+    'deptName': '燃气集团总公司',
+    'deptid': '24',
+    'installHeight': '123',
+    'devcode': '342021000001',
+    'deviceName': '',
+    'deviceType': '12',
+    'deviceTypeName': '管盯',
+    'id': '1476131375777120257',
+    'installDate': '2021-12-29',
+    'modelId': '19',
+    'modelName': 'BIRMM-RTU100N',
+    'onlineState': '1',
+    'onlineStateName': '在线',
+    'position': 'test001位置',
+    'ts': '2021-12-29',
+    'valid': '1',
+    'watchType': '燃气泄漏',
+    'wellCode': 'test001',
+    'wellId': '4453'
+  }
+]
+const deviceStaticsList = [
+  {
+    'deptName': '燃气集团总公司',
+    'deviceCount': '11',
+    'deptid': '24'
+  },
+  {
+    'deptName': '煤气公司',
+    'deviceCount': '2',
+    'deptid': '24'
+  },
+  {
+    'deptName': '电力公司',
+    'deviceCount': '11',
+    'deptid': '24'
+  }
+
+]
+const deviceOnlineList = [
+  {
+    'deviceType': '井盖状态监测仪',
+    'online': 1,
+    'offline': 9
+  },
+  {
+    'deviceType': '燃气智能监测终端',
+    'online': 1,
+    'offline': 2
+  },
+  {
+    'deviceType': '管盯',
+    'online': 1,
+    'offline': 6
+  }
+
+]
+const deviceOfflineList = [
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  }
+]
+module.exports = [
+  // mock get all routes form server
+  {
+    url: '/device/list',
+    type: 'get',
+    response: _ => {
+      return {
+        code: 200,
+        data: deviceList,
+        message: '请求成功',
+        success: true
+      }
+    }
+  },
+  {
+    url: '/statics/deviceStaticsByDept',
+    type: 'get',
+    response: _ => {
+      return {
+        code: 200,
+        data: deviceStaticsList,
+        message: '请求成功',
+        success: true
+      }
+    }
+  },
+  {
+    url: '/statics/deviceCountByOnlineStatus',
+    type: 'get',
+    response: _ => {
+      return {
+        code: 200,
+        data: deviceOnlineList,
+        message: '请求成功',
+        success: true
+      }
+    }
+  },
+  {
+    url: '/device/offlineListPage',
+    type: 'get',
+    response: _ => {
+      return {
+        code: 200,
+        'total': 120,
+        data: deviceOfflineList,
+        message: '请求成功',
+        success: true
+      }
+    }
+  }
+]
diff --git a/mock/index.js b/mock/index.js
index 6646246..0e60e80 100644
--- a/mock/index.js
+++ b/mock/index.js
@@ -12,6 +12,7 @@
 const dashboard = require('./biz/dashboard')
 const search = require('./remote-search')
 const overview = require('./biz/overview')
+const device = require('./deviceManage/device')
 const deviceType = require('./deviceManage/deviceType')
 const deviceModels = require('./deviceManage/deviceModels')
 const deviceImei = require('./deviceManage/deviceImei')
@@ -42,7 +43,8 @@
   ...tenantConfig,
   ...deptPermission,
   ...tenant,
-  ...warningRule
+  ...warningRule,
+  ...device
 ]
 
 // for front mock
diff --git a/src/api/data/dataStatics.js b/src/api/data/dataStatics.js
index b96a05e..04f756a 100644
--- a/src/api/data/dataStatics.js
+++ b/src/api/data/dataStatics.js
@@ -11,6 +11,14 @@
     params
   })
 }
+// 离线设备列表
+export function offlineList(params) {
+  return request({
+    url: 'device/offlineListPage',
+    method: 'get',
+    params
+  })
+}
 // 根据权属单位统计井数量
 export function wellStaticByDept(params) {
   return request({
@@ -38,6 +46,15 @@
   })
 }
 
+// 离线设备数量
+export function deviceStaticsByOnline(params) {
+  return request({
+    url: 'statics/deviceCountByOnlineStatus',
+    method: 'get',
+    params
+  })
+}
+
 // 根据权属单位统计设备数量
 export function deviceStaticsByDept(params) {
   return request({
diff --git a/src/components/NormalTable/index.vue b/src/components/NormalTable/index.vue
index 9e23838..3fdc6db 100644
--- a/src/components/NormalTable/index.vue
+++ b/src/components/NormalTable/index.vue
@@ -69,7 +69,7 @@
         </el-col>
       </el-row>
       <!-- 表格正文-->
-      <el-table v-loading="listLoading" :data="data" :size="size" class="table" row-class-name="small-row-class" border @selection-change="selectionChange" @row-click="rowClick">
+      <el-table v-loading="listLoading" :height="height" :data="data" :size="size" class="table" row-class-name="small-row-class" border @selection-change="selectionChange" @row-click="rowClick">
         <!--需要加在表最前方的插槽-->
         <slot name="preColumns" />
         <!--序号列-->
@@ -141,6 +141,12 @@
         return []
       }
     }, // 数据
+    height: {
+      type: Number,
+      default: function() {
+        return []
+      }
+    },
     total: {
       type: Number,
       default: 0
diff --git a/src/views/deviceManage/components/listDigData.vue b/src/views/deviceManage/components/listDigData.vue
new file mode 100644
index 0000000..5a2b795
--- /dev/null
+++ b/src/views/deviceManage/components/listDigData.vue
@@ -0,0 +1,19 @@
+<template>
+  <div>开挖监测仪</div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+
+    }
+  },
+  methods: {
+    initData: function(row = null) {
+      console.log(row, '===')
+    }
+  }
+}
+</script>
+
diff --git a/src/views/deviceManage/components/listGasData.vue b/src/views/deviceManage/components/listGasData.vue
new file mode 100644
index 0000000..ccbaa8b
--- /dev/null
+++ b/src/views/deviceManage/components/listGasData.vue
@@ -0,0 +1,18 @@
+<template>
+  <div>燃气智能监测终端</div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+
+    }
+  },
+  methods: {
+    initData: function(row = null) {
+      console.log(row, '===')
+    }
+  }
+}
+</script>
diff --git a/src/views/deviceManage/components/listHarmfulData.vue b/src/views/deviceManage/components/listHarmfulData.vue
new file mode 100644
index 0000000..687f9bc
--- /dev/null
+++ b/src/views/deviceManage/components/listHarmfulData.vue
@@ -0,0 +1,18 @@
+<template>
+  <div>有害气体监测仪</div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+
+    }
+  },
+  methods: {
+    initData: function(row = null) {
+      console.log(row, '===')
+    }
+  }
+}
+</script>
diff --git a/src/views/deviceManage/components/listLiquidData.vue b/src/views/deviceManage/components/listLiquidData.vue
new file mode 100644
index 0000000..f279ee9
--- /dev/null
+++ b/src/views/deviceManage/components/listLiquidData.vue
@@ -0,0 +1,18 @@
+<template>
+  <div>液位监测仪</div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+
+    }
+  },
+  methods: {
+    initData: function(row = null) {
+      console.log(row, '===')
+    }
+  }
+}
+</script>
diff --git a/src/views/deviceManage/components/listLiquidGasData.vue b/src/views/deviceManage/components/listLiquidGasData.vue
new file mode 100644
index 0000000..6f5535e
--- /dev/null
+++ b/src/views/deviceManage/components/listLiquidGasData.vue
@@ -0,0 +1,18 @@
+<template>
+  <div>燃气智能终端（一体化）</div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+
+    }
+  },
+  methods: {
+    initData: function(row = null) {
+      console.log(row, '===')
+    }
+  }
+}
+</script>
diff --git a/src/views/deviceManage/components/listNoiseData.vue b/src/views/deviceManage/components/listNoiseData.vue
new file mode 100644
index 0000000..7dad007
--- /dev/null
+++ b/src/views/deviceManage/components/listNoiseData.vue
@@ -0,0 +1,18 @@
+<template>
+  <div>噪声记录仪</div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+
+    }
+  },
+  methods: {
+    initData: function(row = null) {
+      console.log(row, '===')
+    }
+  }
+}
+</script>

diff --git a/mock/deviceManage/device.js b/mock/deviceManage/device.js
new file mode 100644
index 0000000..1f0650d
--- /dev/null
+++ b/mock/deviceManage/device.js
@@ -0,0 +1,672 @@
+const deviceList = [
+  {
+    'bfzt': '0',
+    'bfztName': '撤防',
+    'communication': '3,4',
+    'concenCode': '',
+    'concenId': '',
+    'deptName': '燃气集团总公司',
+    'deptid': '24',
+    'installHeight': '123',
+    'devcode': '342021000001',
+    'deviceName': '',
+    'deviceType': '12',
+    'deviceTypeName': '开挖监测仪',
+    'id': '1476131375777120257',
+    'installDate': '2021-12-29',
+    'modelId': '19',
+    'modelName': 'BIRMM-RTU100N',
+    'onlineState': '1',
+    'onlineStateName': '在线',
+    'position': 'test001位置',
+    'ts': '2021-12-29',
+    'valid': '1',
+    'watchType': '燃气泄漏',
+    'wellCode': 'test001',
+    'wellId': '4453'
+  },
+  {
+    'bfzt': '0',
+    'bfztName': '撤防',
+    'communication': '3,4',
+    'concenCode': '',
+    'concenId': '',
+    'deptName': '燃气集团总公司',
+    'deptid': '24',
+    'installHeight': '123',
+    'devcode': '342021000001',
+    'deviceName': '',
+    'deviceType': '12',
+    'deviceTypeName': '井盖状态监测仪',
+    'id': '1476131375777120257',
+    'installDate': '2021-12-29',
+    'modelId': '19',
+    'modelName': 'BIRMM-RTU100N',
+    'onlineState': '1',
+    'onlineStateName': '在线',
+    'position': 'test001位置',
+    'ts': '2021-12-29',
+    'valid': '1',
+    'watchType': '燃气泄漏',
+    'wellCode': 'test001',
+    'wellId': '4453'
+  },
+  {
+    'bfzt': '0',
+    'bfztName': '撤防',
+    'communication': '3,4',
+    'concenCode': '',
+    'concenId': '',
+    'deptName': '燃气集团总公司',
+    'deptid': '24',
+    'installHeight': '123',
+    'devcode': '342021000001',
+    'deviceName': '',
+    'deviceType': '12',
+    'deviceTypeName': '液位监测仪',
+    'id': '1476131375777120257',
+    'installDate': '2021-12-29',
+    'modelId': '19',
+    'modelName': 'BIRMM-RTU100N',
+    'onlineState': '1',
+    'onlineStateName': '在线',
+    'position': 'test001位置',
+    'ts': '2021-12-29',
+    'valid': '1',
+    'watchType': '燃气泄漏',
+    'wellCode': 'test001',
+    'wellId': '4453'
+  },
+  {
+    'bfzt': '0',
+    'bfztName': '撤防',
+    'communication': '3,4',
+    'concenCode': '',
+    'concenId': '',
+    'deptName': '燃气集团总公司',
+    'deptid': '24',
+    'installHeight': '123',
+    'devcode': '342021000001',
+    'deviceName': '',
+    'deviceType': '12',
+    'deviceTypeName': '燃气智能监测终端',
+    'id': '1476131375777120257',
+    'installDate': '2021-12-29',
+    'modelId': '19',
+    'modelName': 'BIRMM-RTU100N',
+    'onlineState': '1',
+    'onlineStateName': '在线',
+    'position': 'test001位置',
+    'ts': '2021-12-29',
+    'valid': '1',
+    'watchType': '燃气泄漏',
+    'wellCode': 'test001',
+    'wellId': '4453'
+  },
+  {
+    'bfzt': '0',
+    'bfztName': '撤防',
+    'communication': '3,4',
+    'concenCode': '',
+    'concenId': '',
+    'deptName': '燃气集团总公司',
+    'deptid': '24',
+    'installHeight': '123',
+    'devcode': '342021000001',
+    'deviceName': '',
+    'deviceType': '12',
+    'deviceTypeName': '噪声记录仪',
+    'id': '1476131375777120257',
+    'installDate': '2021-12-29',
+    'modelId': '19',
+    'modelName': 'BIRMM-RTU100N',
+    'onlineState': '1',
+    'onlineStateName': '在线',
+    'position': 'test001位置',
+    'ts': '2021-12-29',
+    'valid': '1',
+    'watchType': '燃气泄漏',
+    'wellCode': 'test001',
+    'wellId': '4453'
+  },
+  {
+    'bfzt': '0',
+    'bfztName': '撤防',
+    'communication': '3,4',
+    'concenCode': '',
+    'concenId': '',
+    'deptName': '燃气集团总公司',
+    'deptid': '24',
+    'installHeight': '123',
+    'devcode': '342021000001',
+    'deviceName': '',
+    'deviceType': '12',
+    'deviceTypeName': '有害气体监测仪',
+    'id': '1476131375777120257',
+    'installDate': '2021-12-29',
+    'modelId': '19',
+    'modelName': 'BIRMM-RTU100N',
+    'onlineState': '1',
+    'onlineStateName': '在线',
+    'position': 'test001位置',
+    'ts': '2021-12-29',
+    'valid': '1',
+    'watchType': '燃气泄漏',
+    'wellCode': 'test001',
+    'wellId': '4453'
+  },
+  {
+    'bfzt': '0',
+    'bfztName': '撤防',
+    'communication': '3,4',
+    'concenCode': '',
+    'concenId': '',
+    'deptName': '燃气集团总公司',
+    'deptid': '24',
+    'installHeight': '123',
+    'devcode': '342021000001',
+    'deviceName': '',
+    'deviceType': '12',
+    'deviceTypeName': '温湿度监测仪',
+    'id': '1476131375777120257',
+    'installDate': '2021-12-29',
+    'modelId': '19',
+    'modelName': 'BIRMM-RTU100N',
+    'onlineState': '1',
+    'onlineStateName': '在线',
+    'position': 'test001位置',
+    'ts': '2021-12-29',
+    'valid': '1',
+    'watchType': '燃气泄漏',
+    'wellCode': 'test001',
+    'wellId': '4453'
+  },
+  {
+    'bfzt': '0',
+    'bfztName': '撤防',
+    'communication': '3,4',
+    'concenCode': '',
+    'concenId': '',
+    'deptName': '燃气集团总公司',
+    'deptid': '24',
+    'installHeight': '123',
+    'devcode': '342021000001',
+    'deviceName': '',
+    'deviceType': '12',
+    'deviceTypeName': '井盖定位监测仪',
+    'id': '1476131375777120257',
+    'installDate': '2021-12-29',
+    'modelId': '19',
+    'modelName': 'BIRMM-RTU100N',
+    'onlineState': '1',
+    'onlineStateName': '在线',
+    'position': 'test001位置',
+    'ts': '2021-12-29',
+    'valid': '1',
+    'watchType': '燃气泄漏',
+    'wellCode': 'test001',
+    'wellId': '4453'
+  },
+  {
+    'bfzt': '0',
+    'bfztName': '撤防',
+    'communication': '3,4',
+    'concenCode': '',
+    'concenId': '',
+    'deptName': '燃气集团总公司',
+    'deptid': '24',
+    'installHeight': '123',
+    'devcode': '342021000001',
+    'deviceName': '',
+    'deviceType': '12',
+    'deviceTypeName': '燃气智能终端（一体化）',
+    'id': '1476131375777120257',
+    'installDate': '2021-12-29',
+    'modelId': '19',
+    'modelName': 'BIRMM-RTU100N',
+    'onlineState': '1',
+    'onlineStateName': '在线',
+    'position': 'test001位置',
+    'ts': '2021-12-29',
+    'valid': '1',
+    'watchType': '燃气泄漏',
+    'wellCode': 'test001',
+    'wellId': '4453'
+  },
+  {
+    'bfzt': '0',
+    'bfztName': '撤防',
+    'communication': '3,4',
+    'concenCode': '',
+    'concenId': '',
+    'deptName': '燃气集团总公司',
+    'deptid': '24',
+    'installHeight': '123',
+    'devcode': '342021000001',
+    'deviceName': '',
+    'deviceType': '12',
+    'deviceTypeName': '管盯',
+    'id': '1476131375777120257',
+    'installDate': '2021-12-29',
+    'modelId': '19',
+    'modelName': 'BIRMM-RTU100N',
+    'onlineState': '1',
+    'onlineStateName': '在线',
+    'position': 'test001位置',
+    'ts': '2021-12-29',
+    'valid': '1',
+    'watchType': '燃气泄漏',
+    'wellCode': 'test001',
+    'wellId': '4453'
+  }
+]
+const deviceStaticsList = [
+  {
+    'deptName': '燃气集团总公司',
+    'deviceCount': '11',
+    'deptid': '24'
+  },
+  {
+    'deptName': '煤气公司',
+    'deviceCount': '2',
+    'deptid': '24'
+  },
+  {
+    'deptName': '电力公司',
+    'deviceCount': '11',
+    'deptid': '24'
+  }
+
+]
+const deviceOnlineList = [
+  {
+    'deviceType': '井盖状态监测仪',
+    'online': 1,
+    'offline': 9
+  },
+  {
+    'deviceType': '燃气智能监测终端',
+    'online': 1,
+    'offline': 2
+  },
+  {
+    'deviceType': '管盯',
+    'online': 1,
+    'offline': 6
+  }
+
+]
+const deviceOfflineList = [
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  }
+]
+module.exports = [
+  // mock get all routes form server
+  {
+    url: '/device/list',
+    type: 'get',
+    response: _ => {
+      return {
+        code: 200,
+        data: deviceList,
+        message: '请求成功',
+        success: true
+      }
+    }
+  },
+  {
+    url: '/statics/deviceStaticsByDept',
+    type: 'get',
+    response: _ => {
+      return {
+        code: 200,
+        data: deviceStaticsList,
+        message: '请求成功',
+        success: true
+      }
+    }
+  },
+  {
+    url: '/statics/deviceCountByOnlineStatus',
+    type: 'get',
+    response: _ => {
+      return {
+        code: 200,
+        data: deviceOnlineList,
+        message: '请求成功',
+        success: true
+      }
+    }
+  },
+  {
+    url: '/device/offlineListPage',
+    type: 'get',
+    response: _ => {
+      return {
+        code: 200,
+        'total': 120,
+        data: deviceOfflineList,
+        message: '请求成功',
+        success: true
+      }
+    }
+  }
+]
diff --git a/mock/index.js b/mock/index.js
index 6646246..0e60e80 100644
--- a/mock/index.js
+++ b/mock/index.js
@@ -12,6 +12,7 @@
 const dashboard = require('./biz/dashboard')
 const search = require('./remote-search')
 const overview = require('./biz/overview')
+const device = require('./deviceManage/device')
 const deviceType = require('./deviceManage/deviceType')
 const deviceModels = require('./deviceManage/deviceModels')
 const deviceImei = require('./deviceManage/deviceImei')
@@ -42,7 +43,8 @@
   ...tenantConfig,
   ...deptPermission,
   ...tenant,
-  ...warningRule
+  ...warningRule,
+  ...device
 ]
 
 // for front mock
diff --git a/src/api/data/dataStatics.js b/src/api/data/dataStatics.js
index b96a05e..04f756a 100644
--- a/src/api/data/dataStatics.js
+++ b/src/api/data/dataStatics.js
@@ -11,6 +11,14 @@
     params
   })
 }
+// 离线设备列表
+export function offlineList(params) {
+  return request({
+    url: 'device/offlineListPage',
+    method: 'get',
+    params
+  })
+}
 // 根据权属单位统计井数量
 export function wellStaticByDept(params) {
   return request({
@@ -38,6 +46,15 @@
   })
 }
 
+// 离线设备数量
+export function deviceStaticsByOnline(params) {
+  return request({
+    url: 'statics/deviceCountByOnlineStatus',
+    method: 'get',
+    params
+  })
+}
+
 // 根据权属单位统计设备数量
 export function deviceStaticsByDept(params) {
   return request({
diff --git a/src/components/NormalTable/index.vue b/src/components/NormalTable/index.vue
index 9e23838..3fdc6db 100644
--- a/src/components/NormalTable/index.vue
+++ b/src/components/NormalTable/index.vue
@@ -69,7 +69,7 @@
         </el-col>
       </el-row>
       <!-- 表格正文-->
-      <el-table v-loading="listLoading" :data="data" :size="size" class="table" row-class-name="small-row-class" border @selection-change="selectionChange" @row-click="rowClick">
+      <el-table v-loading="listLoading" :height="height" :data="data" :size="size" class="table" row-class-name="small-row-class" border @selection-change="selectionChange" @row-click="rowClick">
         <!--需要加在表最前方的插槽-->
         <slot name="preColumns" />
         <!--序号列-->
@@ -141,6 +141,12 @@
         return []
       }
     }, // 数据
+    height: {
+      type: Number,
+      default: function() {
+        return []
+      }
+    },
     total: {
       type: Number,
       default: 0
diff --git a/src/views/deviceManage/components/listDigData.vue b/src/views/deviceManage/components/listDigData.vue
new file mode 100644
index 0000000..5a2b795
--- /dev/null
+++ b/src/views/deviceManage/components/listDigData.vue
@@ -0,0 +1,19 @@
+<template>
+  <div>开挖监测仪</div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+
+    }
+  },
+  methods: {
+    initData: function(row = null) {
+      console.log(row, '===')
+    }
+  }
+}
+</script>
+
diff --git a/src/views/deviceManage/components/listGasData.vue b/src/views/deviceManage/components/listGasData.vue
new file mode 100644
index 0000000..ccbaa8b
--- /dev/null
+++ b/src/views/deviceManage/components/listGasData.vue
@@ -0,0 +1,18 @@
+<template>
+  <div>燃气智能监测终端</div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+
+    }
+  },
+  methods: {
+    initData: function(row = null) {
+      console.log(row, '===')
+    }
+  }
+}
+</script>
diff --git a/src/views/deviceManage/components/listHarmfulData.vue b/src/views/deviceManage/components/listHarmfulData.vue
new file mode 100644
index 0000000..687f9bc
--- /dev/null
+++ b/src/views/deviceManage/components/listHarmfulData.vue
@@ -0,0 +1,18 @@
+<template>
+  <div>有害气体监测仪</div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+
+    }
+  },
+  methods: {
+    initData: function(row = null) {
+      console.log(row, '===')
+    }
+  }
+}
+</script>
diff --git a/src/views/deviceManage/components/listLiquidData.vue b/src/views/deviceManage/components/listLiquidData.vue
new file mode 100644
index 0000000..f279ee9
--- /dev/null
+++ b/src/views/deviceManage/components/listLiquidData.vue
@@ -0,0 +1,18 @@
+<template>
+  <div>液位监测仪</div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+
+    }
+  },
+  methods: {
+    initData: function(row = null) {
+      console.log(row, '===')
+    }
+  }
+}
+</script>
diff --git a/src/views/deviceManage/components/listLiquidGasData.vue b/src/views/deviceManage/components/listLiquidGasData.vue
new file mode 100644
index 0000000..6f5535e
--- /dev/null
+++ b/src/views/deviceManage/components/listLiquidGasData.vue
@@ -0,0 +1,18 @@
+<template>
+  <div>燃气智能终端（一体化）</div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+
+    }
+  },
+  methods: {
+    initData: function(row = null) {
+      console.log(row, '===')
+    }
+  }
+}
+</script>
diff --git a/src/views/deviceManage/components/listNoiseData.vue b/src/views/deviceManage/components/listNoiseData.vue
new file mode 100644
index 0000000..7dad007
--- /dev/null
+++ b/src/views/deviceManage/components/listNoiseData.vue
@@ -0,0 +1,18 @@
+<template>
+  <div>噪声记录仪</div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+
+    }
+  },
+  methods: {
+    initData: function(row = null) {
+      console.log(row, '===')
+    }
+  }
+}
+</script>
diff --git a/src/views/deviceManage/components/listTempData.vue b/src/views/deviceManage/components/listTempData.vue
new file mode 100644
index 0000000..f7548b5
--- /dev/null
+++ b/src/views/deviceManage/components/listTempData.vue
@@ -0,0 +1,18 @@
+<template>
+  <div>温湿度监测仪</div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+
+    }
+  },
+  methods: {
+    initData: function(row = null) {
+      console.log(row, '===')
+    }
+  }
+}
+</script>

diff --git a/mock/deviceManage/device.js b/mock/deviceManage/device.js
new file mode 100644
index 0000000..1f0650d
--- /dev/null
+++ b/mock/deviceManage/device.js
@@ -0,0 +1,672 @@
+const deviceList = [
+  {
+    'bfzt': '0',
+    'bfztName': '撤防',
+    'communication': '3,4',
+    'concenCode': '',
+    'concenId': '',
+    'deptName': '燃气集团总公司',
+    'deptid': '24',
+    'installHeight': '123',
+    'devcode': '342021000001',
+    'deviceName': '',
+    'deviceType': '12',
+    'deviceTypeName': '开挖监测仪',
+    'id': '1476131375777120257',
+    'installDate': '2021-12-29',
+    'modelId': '19',
+    'modelName': 'BIRMM-RTU100N',
+    'onlineState': '1',
+    'onlineStateName': '在线',
+    'position': 'test001位置',
+    'ts': '2021-12-29',
+    'valid': '1',
+    'watchType': '燃气泄漏',
+    'wellCode': 'test001',
+    'wellId': '4453'
+  },
+  {
+    'bfzt': '0',
+    'bfztName': '撤防',
+    'communication': '3,4',
+    'concenCode': '',
+    'concenId': '',
+    'deptName': '燃气集团总公司',
+    'deptid': '24',
+    'installHeight': '123',
+    'devcode': '342021000001',
+    'deviceName': '',
+    'deviceType': '12',
+    'deviceTypeName': '井盖状态监测仪',
+    'id': '1476131375777120257',
+    'installDate': '2021-12-29',
+    'modelId': '19',
+    'modelName': 'BIRMM-RTU100N',
+    'onlineState': '1',
+    'onlineStateName': '在线',
+    'position': 'test001位置',
+    'ts': '2021-12-29',
+    'valid': '1',
+    'watchType': '燃气泄漏',
+    'wellCode': 'test001',
+    'wellId': '4453'
+  },
+  {
+    'bfzt': '0',
+    'bfztName': '撤防',
+    'communication': '3,4',
+    'concenCode': '',
+    'concenId': '',
+    'deptName': '燃气集团总公司',
+    'deptid': '24',
+    'installHeight': '123',
+    'devcode': '342021000001',
+    'deviceName': '',
+    'deviceType': '12',
+    'deviceTypeName': '液位监测仪',
+    'id': '1476131375777120257',
+    'installDate': '2021-12-29',
+    'modelId': '19',
+    'modelName': 'BIRMM-RTU100N',
+    'onlineState': '1',
+    'onlineStateName': '在线',
+    'position': 'test001位置',
+    'ts': '2021-12-29',
+    'valid': '1',
+    'watchType': '燃气泄漏',
+    'wellCode': 'test001',
+    'wellId': '4453'
+  },
+  {
+    'bfzt': '0',
+    'bfztName': '撤防',
+    'communication': '3,4',
+    'concenCode': '',
+    'concenId': '',
+    'deptName': '燃气集团总公司',
+    'deptid': '24',
+    'installHeight': '123',
+    'devcode': '342021000001',
+    'deviceName': '',
+    'deviceType': '12',
+    'deviceTypeName': '燃气智能监测终端',
+    'id': '1476131375777120257',
+    'installDate': '2021-12-29',
+    'modelId': '19',
+    'modelName': 'BIRMM-RTU100N',
+    'onlineState': '1',
+    'onlineStateName': '在线',
+    'position': 'test001位置',
+    'ts': '2021-12-29',
+    'valid': '1',
+    'watchType': '燃气泄漏',
+    'wellCode': 'test001',
+    'wellId': '4453'
+  },
+  {
+    'bfzt': '0',
+    'bfztName': '撤防',
+    'communication': '3,4',
+    'concenCode': '',
+    'concenId': '',
+    'deptName': '燃气集团总公司',
+    'deptid': '24',
+    'installHeight': '123',
+    'devcode': '342021000001',
+    'deviceName': '',
+    'deviceType': '12',
+    'deviceTypeName': '噪声记录仪',
+    'id': '1476131375777120257',
+    'installDate': '2021-12-29',
+    'modelId': '19',
+    'modelName': 'BIRMM-RTU100N',
+    'onlineState': '1',
+    'onlineStateName': '在线',
+    'position': 'test001位置',
+    'ts': '2021-12-29',
+    'valid': '1',
+    'watchType': '燃气泄漏',
+    'wellCode': 'test001',
+    'wellId': '4453'
+  },
+  {
+    'bfzt': '0',
+    'bfztName': '撤防',
+    'communication': '3,4',
+    'concenCode': '',
+    'concenId': '',
+    'deptName': '燃气集团总公司',
+    'deptid': '24',
+    'installHeight': '123',
+    'devcode': '342021000001',
+    'deviceName': '',
+    'deviceType': '12',
+    'deviceTypeName': '有害气体监测仪',
+    'id': '1476131375777120257',
+    'installDate': '2021-12-29',
+    'modelId': '19',
+    'modelName': 'BIRMM-RTU100N',
+    'onlineState': '1',
+    'onlineStateName': '在线',
+    'position': 'test001位置',
+    'ts': '2021-12-29',
+    'valid': '1',
+    'watchType': '燃气泄漏',
+    'wellCode': 'test001',
+    'wellId': '4453'
+  },
+  {
+    'bfzt': '0',
+    'bfztName': '撤防',
+    'communication': '3,4',
+    'concenCode': '',
+    'concenId': '',
+    'deptName': '燃气集团总公司',
+    'deptid': '24',
+    'installHeight': '123',
+    'devcode': '342021000001',
+    'deviceName': '',
+    'deviceType': '12',
+    'deviceTypeName': '温湿度监测仪',
+    'id': '1476131375777120257',
+    'installDate': '2021-12-29',
+    'modelId': '19',
+    'modelName': 'BIRMM-RTU100N',
+    'onlineState': '1',
+    'onlineStateName': '在线',
+    'position': 'test001位置',
+    'ts': '2021-12-29',
+    'valid': '1',
+    'watchType': '燃气泄漏',
+    'wellCode': 'test001',
+    'wellId': '4453'
+  },
+  {
+    'bfzt': '0',
+    'bfztName': '撤防',
+    'communication': '3,4',
+    'concenCode': '',
+    'concenId': '',
+    'deptName': '燃气集团总公司',
+    'deptid': '24',
+    'installHeight': '123',
+    'devcode': '342021000001',
+    'deviceName': '',
+    'deviceType': '12',
+    'deviceTypeName': '井盖定位监测仪',
+    'id': '1476131375777120257',
+    'installDate': '2021-12-29',
+    'modelId': '19',
+    'modelName': 'BIRMM-RTU100N',
+    'onlineState': '1',
+    'onlineStateName': '在线',
+    'position': 'test001位置',
+    'ts': '2021-12-29',
+    'valid': '1',
+    'watchType': '燃气泄漏',
+    'wellCode': 'test001',
+    'wellId': '4453'
+  },
+  {
+    'bfzt': '0',
+    'bfztName': '撤防',
+    'communication': '3,4',
+    'concenCode': '',
+    'concenId': '',
+    'deptName': '燃气集团总公司',
+    'deptid': '24',
+    'installHeight': '123',
+    'devcode': '342021000001',
+    'deviceName': '',
+    'deviceType': '12',
+    'deviceTypeName': '燃气智能终端（一体化）',
+    'id': '1476131375777120257',
+    'installDate': '2021-12-29',
+    'modelId': '19',
+    'modelName': 'BIRMM-RTU100N',
+    'onlineState': '1',
+    'onlineStateName': '在线',
+    'position': 'test001位置',
+    'ts': '2021-12-29',
+    'valid': '1',
+    'watchType': '燃气泄漏',
+    'wellCode': 'test001',
+    'wellId': '4453'
+  },
+  {
+    'bfzt': '0',
+    'bfztName': '撤防',
+    'communication': '3,4',
+    'concenCode': '',
+    'concenId': '',
+    'deptName': '燃气集团总公司',
+    'deptid': '24',
+    'installHeight': '123',
+    'devcode': '342021000001',
+    'deviceName': '',
+    'deviceType': '12',
+    'deviceTypeName': '管盯',
+    'id': '1476131375777120257',
+    'installDate': '2021-12-29',
+    'modelId': '19',
+    'modelName': 'BIRMM-RTU100N',
+    'onlineState': '1',
+    'onlineStateName': '在线',
+    'position': 'test001位置',
+    'ts': '2021-12-29',
+    'valid': '1',
+    'watchType': '燃气泄漏',
+    'wellCode': 'test001',
+    'wellId': '4453'
+  }
+]
+const deviceStaticsList = [
+  {
+    'deptName': '燃气集团总公司',
+    'deviceCount': '11',
+    'deptid': '24'
+  },
+  {
+    'deptName': '煤气公司',
+    'deviceCount': '2',
+    'deptid': '24'
+  },
+  {
+    'deptName': '电力公司',
+    'deviceCount': '11',
+    'deptid': '24'
+  }
+
+]
+const deviceOnlineList = [
+  {
+    'deviceType': '井盖状态监测仪',
+    'online': 1,
+    'offline': 9
+  },
+  {
+    'deviceType': '燃气智能监测终端',
+    'online': 1,
+    'offline': 2
+  },
+  {
+    'deviceType': '管盯',
+    'online': 1,
+    'offline': 6
+  }
+
+]
+const deviceOfflineList = [
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  }
+]
+module.exports = [
+  // mock get all routes form server
+  {
+    url: '/device/list',
+    type: 'get',
+    response: _ => {
+      return {
+        code: 200,
+        data: deviceList,
+        message: '请求成功',
+        success: true
+      }
+    }
+  },
+  {
+    url: '/statics/deviceStaticsByDept',
+    type: 'get',
+    response: _ => {
+      return {
+        code: 200,
+        data: deviceStaticsList,
+        message: '请求成功',
+        success: true
+      }
+    }
+  },
+  {
+    url: '/statics/deviceCountByOnlineStatus',
+    type: 'get',
+    response: _ => {
+      return {
+        code: 200,
+        data: deviceOnlineList,
+        message: '请求成功',
+        success: true
+      }
+    }
+  },
+  {
+    url: '/device/offlineListPage',
+    type: 'get',
+    response: _ => {
+      return {
+        code: 200,
+        'total': 120,
+        data: deviceOfflineList,
+        message: '请求成功',
+        success: true
+      }
+    }
+  }
+]
diff --git a/mock/index.js b/mock/index.js
index 6646246..0e60e80 100644
--- a/mock/index.js
+++ b/mock/index.js
@@ -12,6 +12,7 @@
 const dashboard = require('./biz/dashboard')
 const search = require('./remote-search')
 const overview = require('./biz/overview')
+const device = require('./deviceManage/device')
 const deviceType = require('./deviceManage/deviceType')
 const deviceModels = require('./deviceManage/deviceModels')
 const deviceImei = require('./deviceManage/deviceImei')
@@ -42,7 +43,8 @@
   ...tenantConfig,
   ...deptPermission,
   ...tenant,
-  ...warningRule
+  ...warningRule,
+  ...device
 ]
 
 // for front mock
diff --git a/src/api/data/dataStatics.js b/src/api/data/dataStatics.js
index b96a05e..04f756a 100644
--- a/src/api/data/dataStatics.js
+++ b/src/api/data/dataStatics.js
@@ -11,6 +11,14 @@
     params
   })
 }
+// 离线设备列表
+export function offlineList(params) {
+  return request({
+    url: 'device/offlineListPage',
+    method: 'get',
+    params
+  })
+}
 // 根据权属单位统计井数量
 export function wellStaticByDept(params) {
   return request({
@@ -38,6 +46,15 @@
   })
 }
 
+// 离线设备数量
+export function deviceStaticsByOnline(params) {
+  return request({
+    url: 'statics/deviceCountByOnlineStatus',
+    method: 'get',
+    params
+  })
+}
+
 // 根据权属单位统计设备数量
 export function deviceStaticsByDept(params) {
   return request({
diff --git a/src/components/NormalTable/index.vue b/src/components/NormalTable/index.vue
index 9e23838..3fdc6db 100644
--- a/src/components/NormalTable/index.vue
+++ b/src/components/NormalTable/index.vue
@@ -69,7 +69,7 @@
         </el-col>
       </el-row>
       <!-- 表格正文-->
-      <el-table v-loading="listLoading" :data="data" :size="size" class="table" row-class-name="small-row-class" border @selection-change="selectionChange" @row-click="rowClick">
+      <el-table v-loading="listLoading" :height="height" :data="data" :size="size" class="table" row-class-name="small-row-class" border @selection-change="selectionChange" @row-click="rowClick">
         <!--需要加在表最前方的插槽-->
         <slot name="preColumns" />
         <!--序号列-->
@@ -141,6 +141,12 @@
         return []
       }
     }, // 数据
+    height: {
+      type: Number,
+      default: function() {
+        return []
+      }
+    },
     total: {
       type: Number,
       default: 0
diff --git a/src/views/deviceManage/components/listDigData.vue b/src/views/deviceManage/components/listDigData.vue
new file mode 100644
index 0000000..5a2b795
--- /dev/null
+++ b/src/views/deviceManage/components/listDigData.vue
@@ -0,0 +1,19 @@
+<template>
+  <div>开挖监测仪</div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+
+    }
+  },
+  methods: {
+    initData: function(row = null) {
+      console.log(row, '===')
+    }
+  }
+}
+</script>
+
diff --git a/src/views/deviceManage/components/listGasData.vue b/src/views/deviceManage/components/listGasData.vue
new file mode 100644
index 0000000..ccbaa8b
--- /dev/null
+++ b/src/views/deviceManage/components/listGasData.vue
@@ -0,0 +1,18 @@
+<template>
+  <div>燃气智能监测终端</div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+
+    }
+  },
+  methods: {
+    initData: function(row = null) {
+      console.log(row, '===')
+    }
+  }
+}
+</script>
diff --git a/src/views/deviceManage/components/listHarmfulData.vue b/src/views/deviceManage/components/listHarmfulData.vue
new file mode 100644
index 0000000..687f9bc
--- /dev/null
+++ b/src/views/deviceManage/components/listHarmfulData.vue
@@ -0,0 +1,18 @@
+<template>
+  <div>有害气体监测仪</div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+
+    }
+  },
+  methods: {
+    initData: function(row = null) {
+      console.log(row, '===')
+    }
+  }
+}
+</script>
diff --git a/src/views/deviceManage/components/listLiquidData.vue b/src/views/deviceManage/components/listLiquidData.vue
new file mode 100644
index 0000000..f279ee9
--- /dev/null
+++ b/src/views/deviceManage/components/listLiquidData.vue
@@ -0,0 +1,18 @@
+<template>
+  <div>液位监测仪</div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+
+    }
+  },
+  methods: {
+    initData: function(row = null) {
+      console.log(row, '===')
+    }
+  }
+}
+</script>
diff --git a/src/views/deviceManage/components/listLiquidGasData.vue b/src/views/deviceManage/components/listLiquidGasData.vue
new file mode 100644
index 0000000..6f5535e
--- /dev/null
+++ b/src/views/deviceManage/components/listLiquidGasData.vue
@@ -0,0 +1,18 @@
+<template>
+  <div>燃气智能终端（一体化）</div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+
+    }
+  },
+  methods: {
+    initData: function(row = null) {
+      console.log(row, '===')
+    }
+  }
+}
+</script>
diff --git a/src/views/deviceManage/components/listNoiseData.vue b/src/views/deviceManage/components/listNoiseData.vue
new file mode 100644
index 0000000..7dad007
--- /dev/null
+++ b/src/views/deviceManage/components/listNoiseData.vue
@@ -0,0 +1,18 @@
+<template>
+  <div>噪声记录仪</div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+
+    }
+  },
+  methods: {
+    initData: function(row = null) {
+      console.log(row, '===')
+    }
+  }
+}
+</script>
diff --git a/src/views/deviceManage/components/listTempData.vue b/src/views/deviceManage/components/listTempData.vue
new file mode 100644
index 0000000..f7548b5
--- /dev/null
+++ b/src/views/deviceManage/components/listTempData.vue
@@ -0,0 +1,18 @@
+<template>
+  <div>温湿度监测仪</div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+
+    }
+  },
+  methods: {
+    initData: function(row = null) {
+      console.log(row, '===')
+    }
+  }
+}
+</script>
diff --git a/src/views/deviceManage/components/listTubeData.vue b/src/views/deviceManage/components/listTubeData.vue
new file mode 100644
index 0000000..94f1772
--- /dev/null
+++ b/src/views/deviceManage/components/listTubeData.vue
@@ -0,0 +1,18 @@
+<template>
+  <div>管盯</div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+
+    }
+  },
+  methods: {
+    initData: function(row = null) {
+      console.log(row, '===')
+    }
+  }
+}
+</script>

diff --git a/mock/deviceManage/device.js b/mock/deviceManage/device.js
new file mode 100644
index 0000000..1f0650d
--- /dev/null
+++ b/mock/deviceManage/device.js
@@ -0,0 +1,672 @@
+const deviceList = [
+  {
+    'bfzt': '0',
+    'bfztName': '撤防',
+    'communication': '3,4',
+    'concenCode': '',
+    'concenId': '',
+    'deptName': '燃气集团总公司',
+    'deptid': '24',
+    'installHeight': '123',
+    'devcode': '342021000001',
+    'deviceName': '',
+    'deviceType': '12',
+    'deviceTypeName': '开挖监测仪',
+    'id': '1476131375777120257',
+    'installDate': '2021-12-29',
+    'modelId': '19',
+    'modelName': 'BIRMM-RTU100N',
+    'onlineState': '1',
+    'onlineStateName': '在线',
+    'position': 'test001位置',
+    'ts': '2021-12-29',
+    'valid': '1',
+    'watchType': '燃气泄漏',
+    'wellCode': 'test001',
+    'wellId': '4453'
+  },
+  {
+    'bfzt': '0',
+    'bfztName': '撤防',
+    'communication': '3,4',
+    'concenCode': '',
+    'concenId': '',
+    'deptName': '燃气集团总公司',
+    'deptid': '24',
+    'installHeight': '123',
+    'devcode': '342021000001',
+    'deviceName': '',
+    'deviceType': '12',
+    'deviceTypeName': '井盖状态监测仪',
+    'id': '1476131375777120257',
+    'installDate': '2021-12-29',
+    'modelId': '19',
+    'modelName': 'BIRMM-RTU100N',
+    'onlineState': '1',
+    'onlineStateName': '在线',
+    'position': 'test001位置',
+    'ts': '2021-12-29',
+    'valid': '1',
+    'watchType': '燃气泄漏',
+    'wellCode': 'test001',
+    'wellId': '4453'
+  },
+  {
+    'bfzt': '0',
+    'bfztName': '撤防',
+    'communication': '3,4',
+    'concenCode': '',
+    'concenId': '',
+    'deptName': '燃气集团总公司',
+    'deptid': '24',
+    'installHeight': '123',
+    'devcode': '342021000001',
+    'deviceName': '',
+    'deviceType': '12',
+    'deviceTypeName': '液位监测仪',
+    'id': '1476131375777120257',
+    'installDate': '2021-12-29',
+    'modelId': '19',
+    'modelName': 'BIRMM-RTU100N',
+    'onlineState': '1',
+    'onlineStateName': '在线',
+    'position': 'test001位置',
+    'ts': '2021-12-29',
+    'valid': '1',
+    'watchType': '燃气泄漏',
+    'wellCode': 'test001',
+    'wellId': '4453'
+  },
+  {
+    'bfzt': '0',
+    'bfztName': '撤防',
+    'communication': '3,4',
+    'concenCode': '',
+    'concenId': '',
+    'deptName': '燃气集团总公司',
+    'deptid': '24',
+    'installHeight': '123',
+    'devcode': '342021000001',
+    'deviceName': '',
+    'deviceType': '12',
+    'deviceTypeName': '燃气智能监测终端',
+    'id': '1476131375777120257',
+    'installDate': '2021-12-29',
+    'modelId': '19',
+    'modelName': 'BIRMM-RTU100N',
+    'onlineState': '1',
+    'onlineStateName': '在线',
+    'position': 'test001位置',
+    'ts': '2021-12-29',
+    'valid': '1',
+    'watchType': '燃气泄漏',
+    'wellCode': 'test001',
+    'wellId': '4453'
+  },
+  {
+    'bfzt': '0',
+    'bfztName': '撤防',
+    'communication': '3,4',
+    'concenCode': '',
+    'concenId': '',
+    'deptName': '燃气集团总公司',
+    'deptid': '24',
+    'installHeight': '123',
+    'devcode': '342021000001',
+    'deviceName': '',
+    'deviceType': '12',
+    'deviceTypeName': '噪声记录仪',
+    'id': '1476131375777120257',
+    'installDate': '2021-12-29',
+    'modelId': '19',
+    'modelName': 'BIRMM-RTU100N',
+    'onlineState': '1',
+    'onlineStateName': '在线',
+    'position': 'test001位置',
+    'ts': '2021-12-29',
+    'valid': '1',
+    'watchType': '燃气泄漏',
+    'wellCode': 'test001',
+    'wellId': '4453'
+  },
+  {
+    'bfzt': '0',
+    'bfztName': '撤防',
+    'communication': '3,4',
+    'concenCode': '',
+    'concenId': '',
+    'deptName': '燃气集团总公司',
+    'deptid': '24',
+    'installHeight': '123',
+    'devcode': '342021000001',
+    'deviceName': '',
+    'deviceType': '12',
+    'deviceTypeName': '有害气体监测仪',
+    'id': '1476131375777120257',
+    'installDate': '2021-12-29',
+    'modelId': '19',
+    'modelName': 'BIRMM-RTU100N',
+    'onlineState': '1',
+    'onlineStateName': '在线',
+    'position': 'test001位置',
+    'ts': '2021-12-29',
+    'valid': '1',
+    'watchType': '燃气泄漏',
+    'wellCode': 'test001',
+    'wellId': '4453'
+  },
+  {
+    'bfzt': '0',
+    'bfztName': '撤防',
+    'communication': '3,4',
+    'concenCode': '',
+    'concenId': '',
+    'deptName': '燃气集团总公司',
+    'deptid': '24',
+    'installHeight': '123',
+    'devcode': '342021000001',
+    'deviceName': '',
+    'deviceType': '12',
+    'deviceTypeName': '温湿度监测仪',
+    'id': '1476131375777120257',
+    'installDate': '2021-12-29',
+    'modelId': '19',
+    'modelName': 'BIRMM-RTU100N',
+    'onlineState': '1',
+    'onlineStateName': '在线',
+    'position': 'test001位置',
+    'ts': '2021-12-29',
+    'valid': '1',
+    'watchType': '燃气泄漏',
+    'wellCode': 'test001',
+    'wellId': '4453'
+  },
+  {
+    'bfzt': '0',
+    'bfztName': '撤防',
+    'communication': '3,4',
+    'concenCode': '',
+    'concenId': '',
+    'deptName': '燃气集团总公司',
+    'deptid': '24',
+    'installHeight': '123',
+    'devcode': '342021000001',
+    'deviceName': '',
+    'deviceType': '12',
+    'deviceTypeName': '井盖定位监测仪',
+    'id': '1476131375777120257',
+    'installDate': '2021-12-29',
+    'modelId': '19',
+    'modelName': 'BIRMM-RTU100N',
+    'onlineState': '1',
+    'onlineStateName': '在线',
+    'position': 'test001位置',
+    'ts': '2021-12-29',
+    'valid': '1',
+    'watchType': '燃气泄漏',
+    'wellCode': 'test001',
+    'wellId': '4453'
+  },
+  {
+    'bfzt': '0',
+    'bfztName': '撤防',
+    'communication': '3,4',
+    'concenCode': '',
+    'concenId': '',
+    'deptName': '燃气集团总公司',
+    'deptid': '24',
+    'installHeight': '123',
+    'devcode': '342021000001',
+    'deviceName': '',
+    'deviceType': '12',
+    'deviceTypeName': '燃气智能终端（一体化）',
+    'id': '1476131375777120257',
+    'installDate': '2021-12-29',
+    'modelId': '19',
+    'modelName': 'BIRMM-RTU100N',
+    'onlineState': '1',
+    'onlineStateName': '在线',
+    'position': 'test001位置',
+    'ts': '2021-12-29',
+    'valid': '1',
+    'watchType': '燃气泄漏',
+    'wellCode': 'test001',
+    'wellId': '4453'
+  },
+  {
+    'bfzt': '0',
+    'bfztName': '撤防',
+    'communication': '3,4',
+    'concenCode': '',
+    'concenId': '',
+    'deptName': '燃气集团总公司',
+    'deptid': '24',
+    'installHeight': '123',
+    'devcode': '342021000001',
+    'deviceName': '',
+    'deviceType': '12',
+    'deviceTypeName': '管盯',
+    'id': '1476131375777120257',
+    'installDate': '2021-12-29',
+    'modelId': '19',
+    'modelName': 'BIRMM-RTU100N',
+    'onlineState': '1',
+    'onlineStateName': '在线',
+    'position': 'test001位置',
+    'ts': '2021-12-29',
+    'valid': '1',
+    'watchType': '燃气泄漏',
+    'wellCode': 'test001',
+    'wellId': '4453'
+  }
+]
+const deviceStaticsList = [
+  {
+    'deptName': '燃气集团总公司',
+    'deviceCount': '11',
+    'deptid': '24'
+  },
+  {
+    'deptName': '煤气公司',
+    'deviceCount': '2',
+    'deptid': '24'
+  },
+  {
+    'deptName': '电力公司',
+    'deviceCount': '11',
+    'deptid': '24'
+  }
+
+]
+const deviceOnlineList = [
+  {
+    'deviceType': '井盖状态监测仪',
+    'online': 1,
+    'offline': 9
+  },
+  {
+    'deviceType': '燃气智能监测终端',
+    'online': 1,
+    'offline': 2
+  },
+  {
+    'deviceType': '管盯',
+    'online': 1,
+    'offline': 6
+  }
+
+]
+const deviceOfflineList = [
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  }
+]
+module.exports = [
+  // mock get all routes form server
+  {
+    url: '/device/list',
+    type: 'get',
+    response: _ => {
+      return {
+        code: 200,
+        data: deviceList,
+        message: '请求成功',
+        success: true
+      }
+    }
+  },
+  {
+    url: '/statics/deviceStaticsByDept',
+    type: 'get',
+    response: _ => {
+      return {
+        code: 200,
+        data: deviceStaticsList,
+        message: '请求成功',
+        success: true
+      }
+    }
+  },
+  {
+    url: '/statics/deviceCountByOnlineStatus',
+    type: 'get',
+    response: _ => {
+      return {
+        code: 200,
+        data: deviceOnlineList,
+        message: '请求成功',
+        success: true
+      }
+    }
+  },
+  {
+    url: '/device/offlineListPage',
+    type: 'get',
+    response: _ => {
+      return {
+        code: 200,
+        'total': 120,
+        data: deviceOfflineList,
+        message: '请求成功',
+        success: true
+      }
+    }
+  }
+]
diff --git a/mock/index.js b/mock/index.js
index 6646246..0e60e80 100644
--- a/mock/index.js
+++ b/mock/index.js
@@ -12,6 +12,7 @@
 const dashboard = require('./biz/dashboard')
 const search = require('./remote-search')
 const overview = require('./biz/overview')
+const device = require('./deviceManage/device')
 const deviceType = require('./deviceManage/deviceType')
 const deviceModels = require('./deviceManage/deviceModels')
 const deviceImei = require('./deviceManage/deviceImei')
@@ -42,7 +43,8 @@
   ...tenantConfig,
   ...deptPermission,
   ...tenant,
-  ...warningRule
+  ...warningRule,
+  ...device
 ]
 
 // for front mock
diff --git a/src/api/data/dataStatics.js b/src/api/data/dataStatics.js
index b96a05e..04f756a 100644
--- a/src/api/data/dataStatics.js
+++ b/src/api/data/dataStatics.js
@@ -11,6 +11,14 @@
     params
   })
 }
+// 离线设备列表
+export function offlineList(params) {
+  return request({
+    url: 'device/offlineListPage',
+    method: 'get',
+    params
+  })
+}
 // 根据权属单位统计井数量
 export function wellStaticByDept(params) {
   return request({
@@ -38,6 +46,15 @@
   })
 }
 
+// 离线设备数量
+export function deviceStaticsByOnline(params) {
+  return request({
+    url: 'statics/deviceCountByOnlineStatus',
+    method: 'get',
+    params
+  })
+}
+
 // 根据权属单位统计设备数量
 export function deviceStaticsByDept(params) {
   return request({
diff --git a/src/components/NormalTable/index.vue b/src/components/NormalTable/index.vue
index 9e23838..3fdc6db 100644
--- a/src/components/NormalTable/index.vue
+++ b/src/components/NormalTable/index.vue
@@ -69,7 +69,7 @@
         </el-col>
       </el-row>
       <!-- 表格正文-->
-      <el-table v-loading="listLoading" :data="data" :size="size" class="table" row-class-name="small-row-class" border @selection-change="selectionChange" @row-click="rowClick">
+      <el-table v-loading="listLoading" :height="height" :data="data" :size="size" class="table" row-class-name="small-row-class" border @selection-change="selectionChange" @row-click="rowClick">
         <!--需要加在表最前方的插槽-->
         <slot name="preColumns" />
         <!--序号列-->
@@ -141,6 +141,12 @@
         return []
       }
     }, // 数据
+    height: {
+      type: Number,
+      default: function() {
+        return []
+      }
+    },
     total: {
       type: Number,
       default: 0
diff --git a/src/views/deviceManage/components/listDigData.vue b/src/views/deviceManage/components/listDigData.vue
new file mode 100644
index 0000000..5a2b795
--- /dev/null
+++ b/src/views/deviceManage/components/listDigData.vue
@@ -0,0 +1,19 @@
+<template>
+  <div>开挖监测仪</div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+
+    }
+  },
+  methods: {
+    initData: function(row = null) {
+      console.log(row, '===')
+    }
+  }
+}
+</script>
+
diff --git a/src/views/deviceManage/components/listGasData.vue b/src/views/deviceManage/components/listGasData.vue
new file mode 100644
index 0000000..ccbaa8b
--- /dev/null
+++ b/src/views/deviceManage/components/listGasData.vue
@@ -0,0 +1,18 @@
+<template>
+  <div>燃气智能监测终端</div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+
+    }
+  },
+  methods: {
+    initData: function(row = null) {
+      console.log(row, '===')
+    }
+  }
+}
+</script>
diff --git a/src/views/deviceManage/components/listHarmfulData.vue b/src/views/deviceManage/components/listHarmfulData.vue
new file mode 100644
index 0000000..687f9bc
--- /dev/null
+++ b/src/views/deviceManage/components/listHarmfulData.vue
@@ -0,0 +1,18 @@
+<template>
+  <div>有害气体监测仪</div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+
+    }
+  },
+  methods: {
+    initData: function(row = null) {
+      console.log(row, '===')
+    }
+  }
+}
+</script>
diff --git a/src/views/deviceManage/components/listLiquidData.vue b/src/views/deviceManage/components/listLiquidData.vue
new file mode 100644
index 0000000..f279ee9
--- /dev/null
+++ b/src/views/deviceManage/components/listLiquidData.vue
@@ -0,0 +1,18 @@
+<template>
+  <div>液位监测仪</div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+
+    }
+  },
+  methods: {
+    initData: function(row = null) {
+      console.log(row, '===')
+    }
+  }
+}
+</script>
diff --git a/src/views/deviceManage/components/listLiquidGasData.vue b/src/views/deviceManage/components/listLiquidGasData.vue
new file mode 100644
index 0000000..6f5535e
--- /dev/null
+++ b/src/views/deviceManage/components/listLiquidGasData.vue
@@ -0,0 +1,18 @@
+<template>
+  <div>燃气智能终端（一体化）</div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+
+    }
+  },
+  methods: {
+    initData: function(row = null) {
+      console.log(row, '===')
+    }
+  }
+}
+</script>
diff --git a/src/views/deviceManage/components/listNoiseData.vue b/src/views/deviceManage/components/listNoiseData.vue
new file mode 100644
index 0000000..7dad007
--- /dev/null
+++ b/src/views/deviceManage/components/listNoiseData.vue
@@ -0,0 +1,18 @@
+<template>
+  <div>噪声记录仪</div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+
+    }
+  },
+  methods: {
+    initData: function(row = null) {
+      console.log(row, '===')
+    }
+  }
+}
+</script>
diff --git a/src/views/deviceManage/components/listTempData.vue b/src/views/deviceManage/components/listTempData.vue
new file mode 100644
index 0000000..f7548b5
--- /dev/null
+++ b/src/views/deviceManage/components/listTempData.vue
@@ -0,0 +1,18 @@
+<template>
+  <div>温湿度监测仪</div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+
+    }
+  },
+  methods: {
+    initData: function(row = null) {
+      console.log(row, '===')
+    }
+  }
+}
+</script>
diff --git a/src/views/deviceManage/components/listTubeData.vue b/src/views/deviceManage/components/listTubeData.vue
new file mode 100644
index 0000000..94f1772
--- /dev/null
+++ b/src/views/deviceManage/components/listTubeData.vue
@@ -0,0 +1,18 @@
+<template>
+  <div>管盯</div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+
+    }
+  },
+  methods: {
+    initData: function(row = null) {
+      console.log(row, '===')
+    }
+  }
+}
+</script>
diff --git a/src/views/deviceManage/components/listWellData.vue b/src/views/deviceManage/components/listWellData.vue
new file mode 100644
index 0000000..7a6436d
--- /dev/null
+++ b/src/views/deviceManage/components/listWellData.vue
@@ -0,0 +1,18 @@
+<template>
+  <div>井盖状态监测仪</div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+
+    }
+  },
+  methods: {
+    initData: function(row = null) {
+      console.log(row, '===')
+    }
+  }
+}
+</script>

diff --git a/mock/deviceManage/device.js b/mock/deviceManage/device.js
new file mode 100644
index 0000000..1f0650d
--- /dev/null
+++ b/mock/deviceManage/device.js
@@ -0,0 +1,672 @@
+const deviceList = [
+  {
+    'bfzt': '0',
+    'bfztName': '撤防',
+    'communication': '3,4',
+    'concenCode': '',
+    'concenId': '',
+    'deptName': '燃气集团总公司',
+    'deptid': '24',
+    'installHeight': '123',
+    'devcode': '342021000001',
+    'deviceName': '',
+    'deviceType': '12',
+    'deviceTypeName': '开挖监测仪',
+    'id': '1476131375777120257',
+    'installDate': '2021-12-29',
+    'modelId': '19',
+    'modelName': 'BIRMM-RTU100N',
+    'onlineState': '1',
+    'onlineStateName': '在线',
+    'position': 'test001位置',
+    'ts': '2021-12-29',
+    'valid': '1',
+    'watchType': '燃气泄漏',
+    'wellCode': 'test001',
+    'wellId': '4453'
+  },
+  {
+    'bfzt': '0',
+    'bfztName': '撤防',
+    'communication': '3,4',
+    'concenCode': '',
+    'concenId': '',
+    'deptName': '燃气集团总公司',
+    'deptid': '24',
+    'installHeight': '123',
+    'devcode': '342021000001',
+    'deviceName': '',
+    'deviceType': '12',
+    'deviceTypeName': '井盖状态监测仪',
+    'id': '1476131375777120257',
+    'installDate': '2021-12-29',
+    'modelId': '19',
+    'modelName': 'BIRMM-RTU100N',
+    'onlineState': '1',
+    'onlineStateName': '在线',
+    'position': 'test001位置',
+    'ts': '2021-12-29',
+    'valid': '1',
+    'watchType': '燃气泄漏',
+    'wellCode': 'test001',
+    'wellId': '4453'
+  },
+  {
+    'bfzt': '0',
+    'bfztName': '撤防',
+    'communication': '3,4',
+    'concenCode': '',
+    'concenId': '',
+    'deptName': '燃气集团总公司',
+    'deptid': '24',
+    'installHeight': '123',
+    'devcode': '342021000001',
+    'deviceName': '',
+    'deviceType': '12',
+    'deviceTypeName': '液位监测仪',
+    'id': '1476131375777120257',
+    'installDate': '2021-12-29',
+    'modelId': '19',
+    'modelName': 'BIRMM-RTU100N',
+    'onlineState': '1',
+    'onlineStateName': '在线',
+    'position': 'test001位置',
+    'ts': '2021-12-29',
+    'valid': '1',
+    'watchType': '燃气泄漏',
+    'wellCode': 'test001',
+    'wellId': '4453'
+  },
+  {
+    'bfzt': '0',
+    'bfztName': '撤防',
+    'communication': '3,4',
+    'concenCode': '',
+    'concenId': '',
+    'deptName': '燃气集团总公司',
+    'deptid': '24',
+    'installHeight': '123',
+    'devcode': '342021000001',
+    'deviceName': '',
+    'deviceType': '12',
+    'deviceTypeName': '燃气智能监测终端',
+    'id': '1476131375777120257',
+    'installDate': '2021-12-29',
+    'modelId': '19',
+    'modelName': 'BIRMM-RTU100N',
+    'onlineState': '1',
+    'onlineStateName': '在线',
+    'position': 'test001位置',
+    'ts': '2021-12-29',
+    'valid': '1',
+    'watchType': '燃气泄漏',
+    'wellCode': 'test001',
+    'wellId': '4453'
+  },
+  {
+    'bfzt': '0',
+    'bfztName': '撤防',
+    'communication': '3,4',
+    'concenCode': '',
+    'concenId': '',
+    'deptName': '燃气集团总公司',
+    'deptid': '24',
+    'installHeight': '123',
+    'devcode': '342021000001',
+    'deviceName': '',
+    'deviceType': '12',
+    'deviceTypeName': '噪声记录仪',
+    'id': '1476131375777120257',
+    'installDate': '2021-12-29',
+    'modelId': '19',
+    'modelName': 'BIRMM-RTU100N',
+    'onlineState': '1',
+    'onlineStateName': '在线',
+    'position': 'test001位置',
+    'ts': '2021-12-29',
+    'valid': '1',
+    'watchType': '燃气泄漏',
+    'wellCode': 'test001',
+    'wellId': '4453'
+  },
+  {
+    'bfzt': '0',
+    'bfztName': '撤防',
+    'communication': '3,4',
+    'concenCode': '',
+    'concenId': '',
+    'deptName': '燃气集团总公司',
+    'deptid': '24',
+    'installHeight': '123',
+    'devcode': '342021000001',
+    'deviceName': '',
+    'deviceType': '12',
+    'deviceTypeName': '有害气体监测仪',
+    'id': '1476131375777120257',
+    'installDate': '2021-12-29',
+    'modelId': '19',
+    'modelName': 'BIRMM-RTU100N',
+    'onlineState': '1',
+    'onlineStateName': '在线',
+    'position': 'test001位置',
+    'ts': '2021-12-29',
+    'valid': '1',
+    'watchType': '燃气泄漏',
+    'wellCode': 'test001',
+    'wellId': '4453'
+  },
+  {
+    'bfzt': '0',
+    'bfztName': '撤防',
+    'communication': '3,4',
+    'concenCode': '',
+    'concenId': '',
+    'deptName': '燃气集团总公司',
+    'deptid': '24',
+    'installHeight': '123',
+    'devcode': '342021000001',
+    'deviceName': '',
+    'deviceType': '12',
+    'deviceTypeName': '温湿度监测仪',
+    'id': '1476131375777120257',
+    'installDate': '2021-12-29',
+    'modelId': '19',
+    'modelName': 'BIRMM-RTU100N',
+    'onlineState': '1',
+    'onlineStateName': '在线',
+    'position': 'test001位置',
+    'ts': '2021-12-29',
+    'valid': '1',
+    'watchType': '燃气泄漏',
+    'wellCode': 'test001',
+    'wellId': '4453'
+  },
+  {
+    'bfzt': '0',
+    'bfztName': '撤防',
+    'communication': '3,4',
+    'concenCode': '',
+    'concenId': '',
+    'deptName': '燃气集团总公司',
+    'deptid': '24',
+    'installHeight': '123',
+    'devcode': '342021000001',
+    'deviceName': '',
+    'deviceType': '12',
+    'deviceTypeName': '井盖定位监测仪',
+    'id': '1476131375777120257',
+    'installDate': '2021-12-29',
+    'modelId': '19',
+    'modelName': 'BIRMM-RTU100N',
+    'onlineState': '1',
+    'onlineStateName': '在线',
+    'position': 'test001位置',
+    'ts': '2021-12-29',
+    'valid': '1',
+    'watchType': '燃气泄漏',
+    'wellCode': 'test001',
+    'wellId': '4453'
+  },
+  {
+    'bfzt': '0',
+    'bfztName': '撤防',
+    'communication': '3,4',
+    'concenCode': '',
+    'concenId': '',
+    'deptName': '燃气集团总公司',
+    'deptid': '24',
+    'installHeight': '123',
+    'devcode': '342021000001',
+    'deviceName': '',
+    'deviceType': '12',
+    'deviceTypeName': '燃气智能终端（一体化）',
+    'id': '1476131375777120257',
+    'installDate': '2021-12-29',
+    'modelId': '19',
+    'modelName': 'BIRMM-RTU100N',
+    'onlineState': '1',
+    'onlineStateName': '在线',
+    'position': 'test001位置',
+    'ts': '2021-12-29',
+    'valid': '1',
+    'watchType': '燃气泄漏',
+    'wellCode': 'test001',
+    'wellId': '4453'
+  },
+  {
+    'bfzt': '0',
+    'bfztName': '撤防',
+    'communication': '3,4',
+    'concenCode': '',
+    'concenId': '',
+    'deptName': '燃气集团总公司',
+    'deptid': '24',
+    'installHeight': '123',
+    'devcode': '342021000001',
+    'deviceName': '',
+    'deviceType': '12',
+    'deviceTypeName': '管盯',
+    'id': '1476131375777120257',
+    'installDate': '2021-12-29',
+    'modelId': '19',
+    'modelName': 'BIRMM-RTU100N',
+    'onlineState': '1',
+    'onlineStateName': '在线',
+    'position': 'test001位置',
+    'ts': '2021-12-29',
+    'valid': '1',
+    'watchType': '燃气泄漏',
+    'wellCode': 'test001',
+    'wellId': '4453'
+  }
+]
+const deviceStaticsList = [
+  {
+    'deptName': '燃气集团总公司',
+    'deviceCount': '11',
+    'deptid': '24'
+  },
+  {
+    'deptName': '煤气公司',
+    'deviceCount': '2',
+    'deptid': '24'
+  },
+  {
+    'deptName': '电力公司',
+    'deviceCount': '11',
+    'deptid': '24'
+  }
+
+]
+const deviceOnlineList = [
+  {
+    'deviceType': '井盖状态监测仪',
+    'online': 1,
+    'offline': 9
+  },
+  {
+    'deviceType': '燃气智能监测终端',
+    'online': 1,
+    'offline': 2
+  },
+  {
+    'deviceType': '管盯',
+    'online': 1,
+    'offline': 6
+  }
+
+]
+const deviceOfflineList = [
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  }
+]
+module.exports = [
+  // mock get all routes form server
+  {
+    url: '/device/list',
+    type: 'get',
+    response: _ => {
+      return {
+        code: 200,
+        data: deviceList,
+        message: '请求成功',
+        success: true
+      }
+    }
+  },
+  {
+    url: '/statics/deviceStaticsByDept',
+    type: 'get',
+    response: _ => {
+      return {
+        code: 200,
+        data: deviceStaticsList,
+        message: '请求成功',
+        success: true
+      }
+    }
+  },
+  {
+    url: '/statics/deviceCountByOnlineStatus',
+    type: 'get',
+    response: _ => {
+      return {
+        code: 200,
+        data: deviceOnlineList,
+        message: '请求成功',
+        success: true
+      }
+    }
+  },
+  {
+    url: '/device/offlineListPage',
+    type: 'get',
+    response: _ => {
+      return {
+        code: 200,
+        'total': 120,
+        data: deviceOfflineList,
+        message: '请求成功',
+        success: true
+      }
+    }
+  }
+]
diff --git a/mock/index.js b/mock/index.js
index 6646246..0e60e80 100644
--- a/mock/index.js
+++ b/mock/index.js
@@ -12,6 +12,7 @@
 const dashboard = require('./biz/dashboard')
 const search = require('./remote-search')
 const overview = require('./biz/overview')
+const device = require('./deviceManage/device')
 const deviceType = require('./deviceManage/deviceType')
 const deviceModels = require('./deviceManage/deviceModels')
 const deviceImei = require('./deviceManage/deviceImei')
@@ -42,7 +43,8 @@
   ...tenantConfig,
   ...deptPermission,
   ...tenant,
-  ...warningRule
+  ...warningRule,
+  ...device
 ]
 
 // for front mock
diff --git a/src/api/data/dataStatics.js b/src/api/data/dataStatics.js
index b96a05e..04f756a 100644
--- a/src/api/data/dataStatics.js
+++ b/src/api/data/dataStatics.js
@@ -11,6 +11,14 @@
     params
   })
 }
+// 离线设备列表
+export function offlineList(params) {
+  return request({
+    url: 'device/offlineListPage',
+    method: 'get',
+    params
+  })
+}
 // 根据权属单位统计井数量
 export function wellStaticByDept(params) {
   return request({
@@ -38,6 +46,15 @@
   })
 }
 
+// 离线设备数量
+export function deviceStaticsByOnline(params) {
+  return request({
+    url: 'statics/deviceCountByOnlineStatus',
+    method: 'get',
+    params
+  })
+}
+
 // 根据权属单位统计设备数量
 export function deviceStaticsByDept(params) {
   return request({
diff --git a/src/components/NormalTable/index.vue b/src/components/NormalTable/index.vue
index 9e23838..3fdc6db 100644
--- a/src/components/NormalTable/index.vue
+++ b/src/components/NormalTable/index.vue
@@ -69,7 +69,7 @@
         </el-col>
       </el-row>
       <!-- 表格正文-->
-      <el-table v-loading="listLoading" :data="data" :size="size" class="table" row-class-name="small-row-class" border @selection-change="selectionChange" @row-click="rowClick">
+      <el-table v-loading="listLoading" :height="height" :data="data" :size="size" class="table" row-class-name="small-row-class" border @selection-change="selectionChange" @row-click="rowClick">
         <!--需要加在表最前方的插槽-->
         <slot name="preColumns" />
         <!--序号列-->
@@ -141,6 +141,12 @@
         return []
       }
     }, // 数据
+    height: {
+      type: Number,
+      default: function() {
+        return []
+      }
+    },
     total: {
       type: Number,
       default: 0
diff --git a/src/views/deviceManage/components/listDigData.vue b/src/views/deviceManage/components/listDigData.vue
new file mode 100644
index 0000000..5a2b795
--- /dev/null
+++ b/src/views/deviceManage/components/listDigData.vue
@@ -0,0 +1,19 @@
+<template>
+  <div>开挖监测仪</div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+
+    }
+  },
+  methods: {
+    initData: function(row = null) {
+      console.log(row, '===')
+    }
+  }
+}
+</script>
+
diff --git a/src/views/deviceManage/components/listGasData.vue b/src/views/deviceManage/components/listGasData.vue
new file mode 100644
index 0000000..ccbaa8b
--- /dev/null
+++ b/src/views/deviceManage/components/listGasData.vue
@@ -0,0 +1,18 @@
+<template>
+  <div>燃气智能监测终端</div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+
+    }
+  },
+  methods: {
+    initData: function(row = null) {
+      console.log(row, '===')
+    }
+  }
+}
+</script>
diff --git a/src/views/deviceManage/components/listHarmfulData.vue b/src/views/deviceManage/components/listHarmfulData.vue
new file mode 100644
index 0000000..687f9bc
--- /dev/null
+++ b/src/views/deviceManage/components/listHarmfulData.vue
@@ -0,0 +1,18 @@
+<template>
+  <div>有害气体监测仪</div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+
+    }
+  },
+  methods: {
+    initData: function(row = null) {
+      console.log(row, '===')
+    }
+  }
+}
+</script>
diff --git a/src/views/deviceManage/components/listLiquidData.vue b/src/views/deviceManage/components/listLiquidData.vue
new file mode 100644
index 0000000..f279ee9
--- /dev/null
+++ b/src/views/deviceManage/components/listLiquidData.vue
@@ -0,0 +1,18 @@
+<template>
+  <div>液位监测仪</div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+
+    }
+  },
+  methods: {
+    initData: function(row = null) {
+      console.log(row, '===')
+    }
+  }
+}
+</script>
diff --git a/src/views/deviceManage/components/listLiquidGasData.vue b/src/views/deviceManage/components/listLiquidGasData.vue
new file mode 100644
index 0000000..6f5535e
--- /dev/null
+++ b/src/views/deviceManage/components/listLiquidGasData.vue
@@ -0,0 +1,18 @@
+<template>
+  <div>燃气智能终端（一体化）</div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+
+    }
+  },
+  methods: {
+    initData: function(row = null) {
+      console.log(row, '===')
+    }
+  }
+}
+</script>
diff --git a/src/views/deviceManage/components/listNoiseData.vue b/src/views/deviceManage/components/listNoiseData.vue
new file mode 100644
index 0000000..7dad007
--- /dev/null
+++ b/src/views/deviceManage/components/listNoiseData.vue
@@ -0,0 +1,18 @@
+<template>
+  <div>噪声记录仪</div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+
+    }
+  },
+  methods: {
+    initData: function(row = null) {
+      console.log(row, '===')
+    }
+  }
+}
+</script>
diff --git a/src/views/deviceManage/components/listTempData.vue b/src/views/deviceManage/components/listTempData.vue
new file mode 100644
index 0000000..f7548b5
--- /dev/null
+++ b/src/views/deviceManage/components/listTempData.vue
@@ -0,0 +1,18 @@
+<template>
+  <div>温湿度监测仪</div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+
+    }
+  },
+  methods: {
+    initData: function(row = null) {
+      console.log(row, '===')
+    }
+  }
+}
+</script>
diff --git a/src/views/deviceManage/components/listTubeData.vue b/src/views/deviceManage/components/listTubeData.vue
new file mode 100644
index 0000000..94f1772
--- /dev/null
+++ b/src/views/deviceManage/components/listTubeData.vue
@@ -0,0 +1,18 @@
+<template>
+  <div>管盯</div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+
+    }
+  },
+  methods: {
+    initData: function(row = null) {
+      console.log(row, '===')
+    }
+  }
+}
+</script>
diff --git a/src/views/deviceManage/components/listWellData.vue b/src/views/deviceManage/components/listWellData.vue
new file mode 100644
index 0000000..7a6436d
--- /dev/null
+++ b/src/views/deviceManage/components/listWellData.vue
@@ -0,0 +1,18 @@
+<template>
+  <div>井盖状态监测仪</div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+
+    }
+  },
+  methods: {
+    initData: function(row = null) {
+      console.log(row, '===')
+    }
+  }
+}
+</script>
diff --git a/src/views/deviceManage/components/listWellLocaData.vue b/src/views/deviceManage/components/listWellLocaData.vue
new file mode 100644
index 0000000..f784671
--- /dev/null
+++ b/src/views/deviceManage/components/listWellLocaData.vue
@@ -0,0 +1,18 @@
+<template>
+  <div>井盖定位监测仪</div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+
+    }
+  },
+  methods: {
+    initData: function(row = null) {
+      console.log(row, '===')
+    }
+  }
+}
+</script>

diff --git a/mock/deviceManage/device.js b/mock/deviceManage/device.js
new file mode 100644
index 0000000..1f0650d
--- /dev/null
+++ b/mock/deviceManage/device.js
@@ -0,0 +1,672 @@
+const deviceList = [
+  {
+    'bfzt': '0',
+    'bfztName': '撤防',
+    'communication': '3,4',
+    'concenCode': '',
+    'concenId': '',
+    'deptName': '燃气集团总公司',
+    'deptid': '24',
+    'installHeight': '123',
+    'devcode': '342021000001',
+    'deviceName': '',
+    'deviceType': '12',
+    'deviceTypeName': '开挖监测仪',
+    'id': '1476131375777120257',
+    'installDate': '2021-12-29',
+    'modelId': '19',
+    'modelName': 'BIRMM-RTU100N',
+    'onlineState': '1',
+    'onlineStateName': '在线',
+    'position': 'test001位置',
+    'ts': '2021-12-29',
+    'valid': '1',
+    'watchType': '燃气泄漏',
+    'wellCode': 'test001',
+    'wellId': '4453'
+  },
+  {
+    'bfzt': '0',
+    'bfztName': '撤防',
+    'communication': '3,4',
+    'concenCode': '',
+    'concenId': '',
+    'deptName': '燃气集团总公司',
+    'deptid': '24',
+    'installHeight': '123',
+    'devcode': '342021000001',
+    'deviceName': '',
+    'deviceType': '12',
+    'deviceTypeName': '井盖状态监测仪',
+    'id': '1476131375777120257',
+    'installDate': '2021-12-29',
+    'modelId': '19',
+    'modelName': 'BIRMM-RTU100N',
+    'onlineState': '1',
+    'onlineStateName': '在线',
+    'position': 'test001位置',
+    'ts': '2021-12-29',
+    'valid': '1',
+    'watchType': '燃气泄漏',
+    'wellCode': 'test001',
+    'wellId': '4453'
+  },
+  {
+    'bfzt': '0',
+    'bfztName': '撤防',
+    'communication': '3,4',
+    'concenCode': '',
+    'concenId': '',
+    'deptName': '燃气集团总公司',
+    'deptid': '24',
+    'installHeight': '123',
+    'devcode': '342021000001',
+    'deviceName': '',
+    'deviceType': '12',
+    'deviceTypeName': '液位监测仪',
+    'id': '1476131375777120257',
+    'installDate': '2021-12-29',
+    'modelId': '19',
+    'modelName': 'BIRMM-RTU100N',
+    'onlineState': '1',
+    'onlineStateName': '在线',
+    'position': 'test001位置',
+    'ts': '2021-12-29',
+    'valid': '1',
+    'watchType': '燃气泄漏',
+    'wellCode': 'test001',
+    'wellId': '4453'
+  },
+  {
+    'bfzt': '0',
+    'bfztName': '撤防',
+    'communication': '3,4',
+    'concenCode': '',
+    'concenId': '',
+    'deptName': '燃气集团总公司',
+    'deptid': '24',
+    'installHeight': '123',
+    'devcode': '342021000001',
+    'deviceName': '',
+    'deviceType': '12',
+    'deviceTypeName': '燃气智能监测终端',
+    'id': '1476131375777120257',
+    'installDate': '2021-12-29',
+    'modelId': '19',
+    'modelName': 'BIRMM-RTU100N',
+    'onlineState': '1',
+    'onlineStateName': '在线',
+    'position': 'test001位置',
+    'ts': '2021-12-29',
+    'valid': '1',
+    'watchType': '燃气泄漏',
+    'wellCode': 'test001',
+    'wellId': '4453'
+  },
+  {
+    'bfzt': '0',
+    'bfztName': '撤防',
+    'communication': '3,4',
+    'concenCode': '',
+    'concenId': '',
+    'deptName': '燃气集团总公司',
+    'deptid': '24',
+    'installHeight': '123',
+    'devcode': '342021000001',
+    'deviceName': '',
+    'deviceType': '12',
+    'deviceTypeName': '噪声记录仪',
+    'id': '1476131375777120257',
+    'installDate': '2021-12-29',
+    'modelId': '19',
+    'modelName': 'BIRMM-RTU100N',
+    'onlineState': '1',
+    'onlineStateName': '在线',
+    'position': 'test001位置',
+    'ts': '2021-12-29',
+    'valid': '1',
+    'watchType': '燃气泄漏',
+    'wellCode': 'test001',
+    'wellId': '4453'
+  },
+  {
+    'bfzt': '0',
+    'bfztName': '撤防',
+    'communication': '3,4',
+    'concenCode': '',
+    'concenId': '',
+    'deptName': '燃气集团总公司',
+    'deptid': '24',
+    'installHeight': '123',
+    'devcode': '342021000001',
+    'deviceName': '',
+    'deviceType': '12',
+    'deviceTypeName': '有害气体监测仪',
+    'id': '1476131375777120257',
+    'installDate': '2021-12-29',
+    'modelId': '19',
+    'modelName': 'BIRMM-RTU100N',
+    'onlineState': '1',
+    'onlineStateName': '在线',
+    'position': 'test001位置',
+    'ts': '2021-12-29',
+    'valid': '1',
+    'watchType': '燃气泄漏',
+    'wellCode': 'test001',
+    'wellId': '4453'
+  },
+  {
+    'bfzt': '0',
+    'bfztName': '撤防',
+    'communication': '3,4',
+    'concenCode': '',
+    'concenId': '',
+    'deptName': '燃气集团总公司',
+    'deptid': '24',
+    'installHeight': '123',
+    'devcode': '342021000001',
+    'deviceName': '',
+    'deviceType': '12',
+    'deviceTypeName': '温湿度监测仪',
+    'id': '1476131375777120257',
+    'installDate': '2021-12-29',
+    'modelId': '19',
+    'modelName': 'BIRMM-RTU100N',
+    'onlineState': '1',
+    'onlineStateName': '在线',
+    'position': 'test001位置',
+    'ts': '2021-12-29',
+    'valid': '1',
+    'watchType': '燃气泄漏',
+    'wellCode': 'test001',
+    'wellId': '4453'
+  },
+  {
+    'bfzt': '0',
+    'bfztName': '撤防',
+    'communication': '3,4',
+    'concenCode': '',
+    'concenId': '',
+    'deptName': '燃气集团总公司',
+    'deptid': '24',
+    'installHeight': '123',
+    'devcode': '342021000001',
+    'deviceName': '',
+    'deviceType': '12',
+    'deviceTypeName': '井盖定位监测仪',
+    'id': '1476131375777120257',
+    'installDate': '2021-12-29',
+    'modelId': '19',
+    'modelName': 'BIRMM-RTU100N',
+    'onlineState': '1',
+    'onlineStateName': '在线',
+    'position': 'test001位置',
+    'ts': '2021-12-29',
+    'valid': '1',
+    'watchType': '燃气泄漏',
+    'wellCode': 'test001',
+    'wellId': '4453'
+  },
+  {
+    'bfzt': '0',
+    'bfztName': '撤防',
+    'communication': '3,4',
+    'concenCode': '',
+    'concenId': '',
+    'deptName': '燃气集团总公司',
+    'deptid': '24',
+    'installHeight': '123',
+    'devcode': '342021000001',
+    'deviceName': '',
+    'deviceType': '12',
+    'deviceTypeName': '燃气智能终端（一体化）',
+    'id': '1476131375777120257',
+    'installDate': '2021-12-29',
+    'modelId': '19',
+    'modelName': 'BIRMM-RTU100N',
+    'onlineState': '1',
+    'onlineStateName': '在线',
+    'position': 'test001位置',
+    'ts': '2021-12-29',
+    'valid': '1',
+    'watchType': '燃气泄漏',
+    'wellCode': 'test001',
+    'wellId': '4453'
+  },
+  {
+    'bfzt': '0',
+    'bfztName': '撤防',
+    'communication': '3,4',
+    'concenCode': '',
+    'concenId': '',
+    'deptName': '燃气集团总公司',
+    'deptid': '24',
+    'installHeight': '123',
+    'devcode': '342021000001',
+    'deviceName': '',
+    'deviceType': '12',
+    'deviceTypeName': '管盯',
+    'id': '1476131375777120257',
+    'installDate': '2021-12-29',
+    'modelId': '19',
+    'modelName': 'BIRMM-RTU100N',
+    'onlineState': '1',
+    'onlineStateName': '在线',
+    'position': 'test001位置',
+    'ts': '2021-12-29',
+    'valid': '1',
+    'watchType': '燃气泄漏',
+    'wellCode': 'test001',
+    'wellId': '4453'
+  }
+]
+const deviceStaticsList = [
+  {
+    'deptName': '燃气集团总公司',
+    'deviceCount': '11',
+    'deptid': '24'
+  },
+  {
+    'deptName': '煤气公司',
+    'deviceCount': '2',
+    'deptid': '24'
+  },
+  {
+    'deptName': '电力公司',
+    'deviceCount': '11',
+    'deptid': '24'
+  }
+
+]
+const deviceOnlineList = [
+  {
+    'deviceType': '井盖状态监测仪',
+    'online': 1,
+    'offline': 9
+  },
+  {
+    'deviceType': '燃气智能监测终端',
+    'online': 1,
+    'offline': 2
+  },
+  {
+    'deviceType': '管盯',
+    'online': 1,
+    'offline': 6
+  }
+
+]
+const deviceOfflineList = [
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  }
+]
+module.exports = [
+  // mock get all routes form server
+  {
+    url: '/device/list',
+    type: 'get',
+    response: _ => {
+      return {
+        code: 200,
+        data: deviceList,
+        message: '请求成功',
+        success: true
+      }
+    }
+  },
+  {
+    url: '/statics/deviceStaticsByDept',
+    type: 'get',
+    response: _ => {
+      return {
+        code: 200,
+        data: deviceStaticsList,
+        message: '请求成功',
+        success: true
+      }
+    }
+  },
+  {
+    url: '/statics/deviceCountByOnlineStatus',
+    type: 'get',
+    response: _ => {
+      return {
+        code: 200,
+        data: deviceOnlineList,
+        message: '请求成功',
+        success: true
+      }
+    }
+  },
+  {
+    url: '/device/offlineListPage',
+    type: 'get',
+    response: _ => {
+      return {
+        code: 200,
+        'total': 120,
+        data: deviceOfflineList,
+        message: '请求成功',
+        success: true
+      }
+    }
+  }
+]
diff --git a/mock/index.js b/mock/index.js
index 6646246..0e60e80 100644
--- a/mock/index.js
+++ b/mock/index.js
@@ -12,6 +12,7 @@
 const dashboard = require('./biz/dashboard')
 const search = require('./remote-search')
 const overview = require('./biz/overview')
+const device = require('./deviceManage/device')
 const deviceType = require('./deviceManage/deviceType')
 const deviceModels = require('./deviceManage/deviceModels')
 const deviceImei = require('./deviceManage/deviceImei')
@@ -42,7 +43,8 @@
   ...tenantConfig,
   ...deptPermission,
   ...tenant,
-  ...warningRule
+  ...warningRule,
+  ...device
 ]
 
 // for front mock
diff --git a/src/api/data/dataStatics.js b/src/api/data/dataStatics.js
index b96a05e..04f756a 100644
--- a/src/api/data/dataStatics.js
+++ b/src/api/data/dataStatics.js
@@ -11,6 +11,14 @@
     params
   })
 }
+// 离线设备列表
+export function offlineList(params) {
+  return request({
+    url: 'device/offlineListPage',
+    method: 'get',
+    params
+  })
+}
 // 根据权属单位统计井数量
 export function wellStaticByDept(params) {
   return request({
@@ -38,6 +46,15 @@
   })
 }
 
+// 离线设备数量
+export function deviceStaticsByOnline(params) {
+  return request({
+    url: 'statics/deviceCountByOnlineStatus',
+    method: 'get',
+    params
+  })
+}
+
 // 根据权属单位统计设备数量
 export function deviceStaticsByDept(params) {
   return request({
diff --git a/src/components/NormalTable/index.vue b/src/components/NormalTable/index.vue
index 9e23838..3fdc6db 100644
--- a/src/components/NormalTable/index.vue
+++ b/src/components/NormalTable/index.vue
@@ -69,7 +69,7 @@
         </el-col>
       </el-row>
       <!-- 表格正文-->
-      <el-table v-loading="listLoading" :data="data" :size="size" class="table" row-class-name="small-row-class" border @selection-change="selectionChange" @row-click="rowClick">
+      <el-table v-loading="listLoading" :height="height" :data="data" :size="size" class="table" row-class-name="small-row-class" border @selection-change="selectionChange" @row-click="rowClick">
         <!--需要加在表最前方的插槽-->
         <slot name="preColumns" />
         <!--序号列-->
@@ -141,6 +141,12 @@
         return []
       }
     }, // 数据
+    height: {
+      type: Number,
+      default: function() {
+        return []
+      }
+    },
     total: {
       type: Number,
       default: 0
diff --git a/src/views/deviceManage/components/listDigData.vue b/src/views/deviceManage/components/listDigData.vue
new file mode 100644
index 0000000..5a2b795
--- /dev/null
+++ b/src/views/deviceManage/components/listDigData.vue
@@ -0,0 +1,19 @@
+<template>
+  <div>开挖监测仪</div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+
+    }
+  },
+  methods: {
+    initData: function(row = null) {
+      console.log(row, '===')
+    }
+  }
+}
+</script>
+
diff --git a/src/views/deviceManage/components/listGasData.vue b/src/views/deviceManage/components/listGasData.vue
new file mode 100644
index 0000000..ccbaa8b
--- /dev/null
+++ b/src/views/deviceManage/components/listGasData.vue
@@ -0,0 +1,18 @@
+<template>
+  <div>燃气智能监测终端</div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+
+    }
+  },
+  methods: {
+    initData: function(row = null) {
+      console.log(row, '===')
+    }
+  }
+}
+</script>
diff --git a/src/views/deviceManage/components/listHarmfulData.vue b/src/views/deviceManage/components/listHarmfulData.vue
new file mode 100644
index 0000000..687f9bc
--- /dev/null
+++ b/src/views/deviceManage/components/listHarmfulData.vue
@@ -0,0 +1,18 @@
+<template>
+  <div>有害气体监测仪</div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+
+    }
+  },
+  methods: {
+    initData: function(row = null) {
+      console.log(row, '===')
+    }
+  }
+}
+</script>
diff --git a/src/views/deviceManage/components/listLiquidData.vue b/src/views/deviceManage/components/listLiquidData.vue
new file mode 100644
index 0000000..f279ee9
--- /dev/null
+++ b/src/views/deviceManage/components/listLiquidData.vue
@@ -0,0 +1,18 @@
+<template>
+  <div>液位监测仪</div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+
+    }
+  },
+  methods: {
+    initData: function(row = null) {
+      console.log(row, '===')
+    }
+  }
+}
+</script>
diff --git a/src/views/deviceManage/components/listLiquidGasData.vue b/src/views/deviceManage/components/listLiquidGasData.vue
new file mode 100644
index 0000000..6f5535e
--- /dev/null
+++ b/src/views/deviceManage/components/listLiquidGasData.vue
@@ -0,0 +1,18 @@
+<template>
+  <div>燃气智能终端（一体化）</div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+
+    }
+  },
+  methods: {
+    initData: function(row = null) {
+      console.log(row, '===')
+    }
+  }
+}
+</script>
diff --git a/src/views/deviceManage/components/listNoiseData.vue b/src/views/deviceManage/components/listNoiseData.vue
new file mode 100644
index 0000000..7dad007
--- /dev/null
+++ b/src/views/deviceManage/components/listNoiseData.vue
@@ -0,0 +1,18 @@
+<template>
+  <div>噪声记录仪</div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+
+    }
+  },
+  methods: {
+    initData: function(row = null) {
+      console.log(row, '===')
+    }
+  }
+}
+</script>
diff --git a/src/views/deviceManage/components/listTempData.vue b/src/views/deviceManage/components/listTempData.vue
new file mode 100644
index 0000000..f7548b5
--- /dev/null
+++ b/src/views/deviceManage/components/listTempData.vue
@@ -0,0 +1,18 @@
+<template>
+  <div>温湿度监测仪</div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+
+    }
+  },
+  methods: {
+    initData: function(row = null) {
+      console.log(row, '===')
+    }
+  }
+}
+</script>
diff --git a/src/views/deviceManage/components/listTubeData.vue b/src/views/deviceManage/components/listTubeData.vue
new file mode 100644
index 0000000..94f1772
--- /dev/null
+++ b/src/views/deviceManage/components/listTubeData.vue
@@ -0,0 +1,18 @@
+<template>
+  <div>管盯</div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+
+    }
+  },
+  methods: {
+    initData: function(row = null) {
+      console.log(row, '===')
+    }
+  }
+}
+</script>
diff --git a/src/views/deviceManage/components/listWellData.vue b/src/views/deviceManage/components/listWellData.vue
new file mode 100644
index 0000000..7a6436d
--- /dev/null
+++ b/src/views/deviceManage/components/listWellData.vue
@@ -0,0 +1,18 @@
+<template>
+  <div>井盖状态监测仪</div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+
+    }
+  },
+  methods: {
+    initData: function(row = null) {
+      console.log(row, '===')
+    }
+  }
+}
+</script>
diff --git a/src/views/deviceManage/components/listWellLocaData.vue b/src/views/deviceManage/components/listWellLocaData.vue
new file mode 100644
index 0000000..f784671
--- /dev/null
+++ b/src/views/deviceManage/components/listWellLocaData.vue
@@ -0,0 +1,18 @@
+<template>
+  <div>井盖定位监测仪</div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+
+    }
+  },
+  methods: {
+    initData: function(row = null) {
+      console.log(row, '===')
+    }
+  }
+}
+</script>
diff --git a/src/views/deviceManage/detailDevice.vue b/src/views/deviceManage/detailDevice.vue
index eefc549..8285ee7 100644
--- a/src/views/deviceManage/detailDevice.vue
+++ b/src/views/deviceManage/detailDevice.vue
@@ -3,110 +3,114 @@
     <el-form ref="dataForm" :model="deviceForm" label-well-code="right" label-width="100px">
       <el-row :gutter="20">
         <el-col :span="12">
-          <el-form-item label="设备名称" prop="deviceName">
-            <el-input v-model="deviceForm.deviceName" type="text" placeholder="未知" disabled />
+          <el-form-item label="设备编号" prop="devcode">
+            <el-input v-model.trim="deviceForm.devcode" disabled type="text" placeholder="必填" />
           </el-form-item>
         </el-col>
         <el-col :span="12">
-          <el-form-item label="设备编号" prop="devcode">
-            <el-input v-model="deviceForm.devcode" type="text" placeholder="未知" disabled />
+          <el-form-item label="安装日期" prop="installDate">
+            <el-date-picker
+              v-model.trim="deviceForm.installDate"
+              disabled
+              type="date"
+              value-format="yyyy-MM-dd"
+              placeholder="选择日期"
+            />
           </el-form-item>
         </el-col>
       </el-row>
       <el-row :gutter="20">
         <el-col :span="12">
           <el-form-item label="设备类型" prop="deviceType">
-            <el-input v-model="deviceForm.deviceTypeName" type="text" placeholder="未知" disabled />
+            <el-select v-model="deviceForm.deviceType" disabled placeholder="请选择设备类型">
+              <el-option
+                v-for="item in deviceTypeList"
+                :key="item.value"
+                :label="item.name"
+                :value="item.value"
+              />
+            </el-select>
           </el-form-item>
         </el-col>
         <el-col :span="12">
           <el-form-item label="设备型号" prop="modelId">
-            <el-input v-model="deviceForm.modelName" type="text" placeholder="未知" disabled />
-          </el-form-item>
-        </el-col>
-      </el-row>
-      <el-row :gutter="20">
-        <el-col :span="12">
-          <el-form-item label="在线状态" prop="wellCode">
-            <el-input v-model="deviceForm.onlineStateName" type="text" placeholder="未知" disabled />
-          </el-form-item>
-        </el-col>
-        <el-col :span="12">
-          <el-form-item label="权属单位" prop="concenCode">
-            <el-input v-model="deviceForm.deptName" type="text" placeholder="未知" disabled />
+            <el-select v-model="deviceForm.modelId" disabled placeholder="请选择设备型号">
+              <el-option
+                v-for="item in deviceModelList"
+                :key="item.value"
+                :label="item.name"
+                :value="item.value"
+              />
+            </el-select>
           </el-form-item>
         </el-col>
       </el-row>
       <el-row :gutter="20">
         <el-col :span="12">
           <el-form-item label="井编号" prop="wellCode">
-            <el-input v-model="deviceForm.wellCode" type="text" placeholder="未知" disabled />
+            <el-input v-model.trim="deviceForm.wellCode" disabled type="text" placeholder="必填" />
           </el-form-item>
         </el-col>
         <el-col :span="12">
-          <el-form-item label="布防状态" prop="bfztName">
-            <el-input v-model="deviceForm.bfztName" type="text" placeholder="未知" disabled />
-          </el-form-item>
-        </el-col>
-      </el-row>
-      <el-row :gutter="20">
-        <el-col :span="24">
-          <el-form-item label="位置" prop="position">
-            <el-input v-model="deviceForm.position" type="text" placeholder="未知" disabled />
-          </el-form-item>
-        </el-col>
-      </el-row>
-      <el-row :gutter="20">
-        <el-col :span="12">
-          <el-form-item label="安装日期" prop="installDate">
-            <el-input v-model="deviceForm.installDate" type="text" placeholder="未知" disabled />
-          </el-form-item>
-        </el-col>
-        <el-col :span="12">
-          <el-form-item label="集中器编号" prop="concenCode">
-            <el-input v-model="deviceForm.concenCode" type="text" placeholder="未知" disabled />
-          </el-form-item>
-        </el-col>
-      </el-row>
-      <el-row :gutter="20">
-        <el-col :span="12">
-          <el-form-item label="设备安装高度" prop="installHeight">
-            <el-input v-model="deviceForm.installHeight" type="text" placeholder="未知" disabled />
+          <el-form-item label="安装高度(m)" prop="installHeight">
+            <el-input v-model.trim="deviceForm.installHeight" disabled type="text" placeholder="必填" />
           </el-form-item>
         </el-col>
       </el-row>
     </el-form>
+    <component :is="cmpName" ref="deviceTypeDialog" @watchChild="fetchDeviceList" />
   </el-dialog>
 </template>
 
 <script>
+import listDigData from './components/listDigData'
+import listGasData from './components/listGasData'
+import listHarmfulData from './components/listHarmfulData'
+import listLiquidData from './components/listLiquidData'
+import listLiquidGasData from './components/listLiquidGasData'
+import listNoiseData from './components/listNoiseData'
+import listTempData from './components/listTempData'
+import listTubeData from './components/listTubeData'
+import listWellData from './components/listWellData'
+import listWellLocaData from './components/listWellLocaData'
 
 export default {
-  name: 'DetailDevice',
+  name: 'EditDevice',
+  components: {
+    listDigData,
+    listGasData,
+    listHarmfulData,
+    listLiquidData,
+    listLiquidGasData,
+    listNoiseData,
+    listTempData,
+    listTubeData,
+    listWellData,
+    listWellLocaData
+  },
   data() {
     return {
       dialogFormVisible: false, // 对话框是否显示
-      dialogStatus: '', // 对话框类型：create,update
+      dialogStatus: '', // 对话框类型：create,update,detail
+      cmpName: '', // 组件名称
       deviceForm: {
         id: '',
         deviceName: '',
         devcode: '',
-        deviceTypeName: '',
+        deviceType: '',
         wellCode: '',
-        modelName: '',
+        modelId: '',
         installDate: '',
         concenCode: '',
-        installHeight: '',
-        onlineStateName: '',
-        deptName: '',
-        bfztName: '',
-        position: ''
+        installHeight: ''
       }, // 表单
       textMap: {
         update: '编辑',
         create: '新增',
         detail: '详情'
-      } // 表头显示标题z
+      }, // 表头显示标题
+      deviceTypeList: null, // 设备类型列表
+      deviceModelList: null // 设备型号列表
     }
   },
   methods: {
@@ -114,20 +118,57 @@
     initDialog: function(dialogStatus, dialogFormVisible, row = null) {
       this.dialogStatus = dialogStatus
       this.dialogFormVisible = dialogFormVisible
+      this.resetForm()
       this.deviceForm = {
         id: row.id,
         deviceName: row.deviceName,
         devcode: row.devcode,
-        deviceTypeName: row.deviceTypeName,
+        deviceType: row.deviceType,
+        modelId: row.modelId,
         wellCode: row.wellCode,
-        modelName: row.modelName,
-        installDate: row.installDate,
         concenCode: row.concenCode,
-        installHeight: row.installHeight,
-        onlineStateName: row.onlineStateName,
-        deptName: row.deptName,
-        bfztName: row.bfztName,
-        position: row.position
+        installDate: row.installDate,
+        installHeight: row.installHeight
+      }
+      // 展示相对应的设备列表组件
+      if (row.deviceTypeName === '开挖监测仪') {
+        this.cmpName = 'list-dig-data'
+      } else if (row.deviceTypeName === '井盖状态监测仪') {
+        this.cmpName = 'list-well-data'
+      } else if (row.deviceTypeName === '液位监测仪') {
+        this.cmpName = 'list-liquid-data'
+      } else if (row.deviceTypeName === '燃气智能监测终端') {
+        this.cmpName = 'list-gas-data'
+      } else if (row.deviceTypeName === '噪声记录仪') {
+        this.cmpName = 'list-noise-data'
+      } else if (row.deviceTypeName === '有害气体监测仪') {
+        this.cmpName = 'list-harmful-data'
+      } else if (row.deviceTypeName === '温湿度监测仪') {
+        this.cmpName = 'list-temp-data'
+      } else if (row.deviceTypeName === '井盖定位监测仪') {
+        this.cmpName = 'list-well-loca-data'
+      } else if (row.deviceTypeName === '燃气智能终端（一体化）') {
+        this.cmpName = 'list-liquid-gas-data'
+      } else if (row.deviceTypeName === '管盯') {
+        this.cmpName = 'list-tube-data'
+      }
+      setTimeout(() => {
+        this.$refs.deviceTypeDialog.initData(row)
+      }, 100)
+    },
+    fetchDeviceList() {},
+    // 重置表单
+    resetForm() {
+      this.deviceForm = {
+        id: '',
+        deviceName: '',
+        devcode: '',
+        deviceType: '',
+        wellCode: '',
+        modelId: '',
+        installDate: '',
+        concenCode: '',
+        installHeight: ''
       }
     }
   }
@@ -138,4 +179,7 @@
   .el-select{
     width: 100%;
   }
+  .el-date-editor{
+    width: 100%;
+  }
 </style>

diff --git a/mock/deviceManage/device.js b/mock/deviceManage/device.js
new file mode 100644
index 0000000..1f0650d
--- /dev/null
+++ b/mock/deviceManage/device.js
@@ -0,0 +1,672 @@
+const deviceList = [
+  {
+    'bfzt': '0',
+    'bfztName': '撤防',
+    'communication': '3,4',
+    'concenCode': '',
+    'concenId': '',
+    'deptName': '燃气集团总公司',
+    'deptid': '24',
+    'installHeight': '123',
+    'devcode': '342021000001',
+    'deviceName': '',
+    'deviceType': '12',
+    'deviceTypeName': '开挖监测仪',
+    'id': '1476131375777120257',
+    'installDate': '2021-12-29',
+    'modelId': '19',
+    'modelName': 'BIRMM-RTU100N',
+    'onlineState': '1',
+    'onlineStateName': '在线',
+    'position': 'test001位置',
+    'ts': '2021-12-29',
+    'valid': '1',
+    'watchType': '燃气泄漏',
+    'wellCode': 'test001',
+    'wellId': '4453'
+  },
+  {
+    'bfzt': '0',
+    'bfztName': '撤防',
+    'communication': '3,4',
+    'concenCode': '',
+    'concenId': '',
+    'deptName': '燃气集团总公司',
+    'deptid': '24',
+    'installHeight': '123',
+    'devcode': '342021000001',
+    'deviceName': '',
+    'deviceType': '12',
+    'deviceTypeName': '井盖状态监测仪',
+    'id': '1476131375777120257',
+    'installDate': '2021-12-29',
+    'modelId': '19',
+    'modelName': 'BIRMM-RTU100N',
+    'onlineState': '1',
+    'onlineStateName': '在线',
+    'position': 'test001位置',
+    'ts': '2021-12-29',
+    'valid': '1',
+    'watchType': '燃气泄漏',
+    'wellCode': 'test001',
+    'wellId': '4453'
+  },
+  {
+    'bfzt': '0',
+    'bfztName': '撤防',
+    'communication': '3,4',
+    'concenCode': '',
+    'concenId': '',
+    'deptName': '燃气集团总公司',
+    'deptid': '24',
+    'installHeight': '123',
+    'devcode': '342021000001',
+    'deviceName': '',
+    'deviceType': '12',
+    'deviceTypeName': '液位监测仪',
+    'id': '1476131375777120257',
+    'installDate': '2021-12-29',
+    'modelId': '19',
+    'modelName': 'BIRMM-RTU100N',
+    'onlineState': '1',
+    'onlineStateName': '在线',
+    'position': 'test001位置',
+    'ts': '2021-12-29',
+    'valid': '1',
+    'watchType': '燃气泄漏',
+    'wellCode': 'test001',
+    'wellId': '4453'
+  },
+  {
+    'bfzt': '0',
+    'bfztName': '撤防',
+    'communication': '3,4',
+    'concenCode': '',
+    'concenId': '',
+    'deptName': '燃气集团总公司',
+    'deptid': '24',
+    'installHeight': '123',
+    'devcode': '342021000001',
+    'deviceName': '',
+    'deviceType': '12',
+    'deviceTypeName': '燃气智能监测终端',
+    'id': '1476131375777120257',
+    'installDate': '2021-12-29',
+    'modelId': '19',
+    'modelName': 'BIRMM-RTU100N',
+    'onlineState': '1',
+    'onlineStateName': '在线',
+    'position': 'test001位置',
+    'ts': '2021-12-29',
+    'valid': '1',
+    'watchType': '燃气泄漏',
+    'wellCode': 'test001',
+    'wellId': '4453'
+  },
+  {
+    'bfzt': '0',
+    'bfztName': '撤防',
+    'communication': '3,4',
+    'concenCode': '',
+    'concenId': '',
+    'deptName': '燃气集团总公司',
+    'deptid': '24',
+    'installHeight': '123',
+    'devcode': '342021000001',
+    'deviceName': '',
+    'deviceType': '12',
+    'deviceTypeName': '噪声记录仪',
+    'id': '1476131375777120257',
+    'installDate': '2021-12-29',
+    'modelId': '19',
+    'modelName': 'BIRMM-RTU100N',
+    'onlineState': '1',
+    'onlineStateName': '在线',
+    'position': 'test001位置',
+    'ts': '2021-12-29',
+    'valid': '1',
+    'watchType': '燃气泄漏',
+    'wellCode': 'test001',
+    'wellId': '4453'
+  },
+  {
+    'bfzt': '0',
+    'bfztName': '撤防',
+    'communication': '3,4',
+    'concenCode': '',
+    'concenId': '',
+    'deptName': '燃气集团总公司',
+    'deptid': '24',
+    'installHeight': '123',
+    'devcode': '342021000001',
+    'deviceName': '',
+    'deviceType': '12',
+    'deviceTypeName': '有害气体监测仪',
+    'id': '1476131375777120257',
+    'installDate': '2021-12-29',
+    'modelId': '19',
+    'modelName': 'BIRMM-RTU100N',
+    'onlineState': '1',
+    'onlineStateName': '在线',
+    'position': 'test001位置',
+    'ts': '2021-12-29',
+    'valid': '1',
+    'watchType': '燃气泄漏',
+    'wellCode': 'test001',
+    'wellId': '4453'
+  },
+  {
+    'bfzt': '0',
+    'bfztName': '撤防',
+    'communication': '3,4',
+    'concenCode': '',
+    'concenId': '',
+    'deptName': '燃气集团总公司',
+    'deptid': '24',
+    'installHeight': '123',
+    'devcode': '342021000001',
+    'deviceName': '',
+    'deviceType': '12',
+    'deviceTypeName': '温湿度监测仪',
+    'id': '1476131375777120257',
+    'installDate': '2021-12-29',
+    'modelId': '19',
+    'modelName': 'BIRMM-RTU100N',
+    'onlineState': '1',
+    'onlineStateName': '在线',
+    'position': 'test001位置',
+    'ts': '2021-12-29',
+    'valid': '1',
+    'watchType': '燃气泄漏',
+    'wellCode': 'test001',
+    'wellId': '4453'
+  },
+  {
+    'bfzt': '0',
+    'bfztName': '撤防',
+    'communication': '3,4',
+    'concenCode': '',
+    'concenId': '',
+    'deptName': '燃气集团总公司',
+    'deptid': '24',
+    'installHeight': '123',
+    'devcode': '342021000001',
+    'deviceName': '',
+    'deviceType': '12',
+    'deviceTypeName': '井盖定位监测仪',
+    'id': '1476131375777120257',
+    'installDate': '2021-12-29',
+    'modelId': '19',
+    'modelName': 'BIRMM-RTU100N',
+    'onlineState': '1',
+    'onlineStateName': '在线',
+    'position': 'test001位置',
+    'ts': '2021-12-29',
+    'valid': '1',
+    'watchType': '燃气泄漏',
+    'wellCode': 'test001',
+    'wellId': '4453'
+  },
+  {
+    'bfzt': '0',
+    'bfztName': '撤防',
+    'communication': '3,4',
+    'concenCode': '',
+    'concenId': '',
+    'deptName': '燃气集团总公司',
+    'deptid': '24',
+    'installHeight': '123',
+    'devcode': '342021000001',
+    'deviceName': '',
+    'deviceType': '12',
+    'deviceTypeName': '燃气智能终端（一体化）',
+    'id': '1476131375777120257',
+    'installDate': '2021-12-29',
+    'modelId': '19',
+    'modelName': 'BIRMM-RTU100N',
+    'onlineState': '1',
+    'onlineStateName': '在线',
+    'position': 'test001位置',
+    'ts': '2021-12-29',
+    'valid': '1',
+    'watchType': '燃气泄漏',
+    'wellCode': 'test001',
+    'wellId': '4453'
+  },
+  {
+    'bfzt': '0',
+    'bfztName': '撤防',
+    'communication': '3,4',
+    'concenCode': '',
+    'concenId': '',
+    'deptName': '燃气集团总公司',
+    'deptid': '24',
+    'installHeight': '123',
+    'devcode': '342021000001',
+    'deviceName': '',
+    'deviceType': '12',
+    'deviceTypeName': '管盯',
+    'id': '1476131375777120257',
+    'installDate': '2021-12-29',
+    'modelId': '19',
+    'modelName': 'BIRMM-RTU100N',
+    'onlineState': '1',
+    'onlineStateName': '在线',
+    'position': 'test001位置',
+    'ts': '2021-12-29',
+    'valid': '1',
+    'watchType': '燃气泄漏',
+    'wellCode': 'test001',
+    'wellId': '4453'
+  }
+]
+const deviceStaticsList = [
+  {
+    'deptName': '燃气集团总公司',
+    'deviceCount': '11',
+    'deptid': '24'
+  },
+  {
+    'deptName': '煤气公司',
+    'deviceCount': '2',
+    'deptid': '24'
+  },
+  {
+    'deptName': '电力公司',
+    'deviceCount': '11',
+    'deptid': '24'
+  }
+
+]
+const deviceOnlineList = [
+  {
+    'deviceType': '井盖状态监测仪',
+    'online': 1,
+    'offline': 9
+  },
+  {
+    'deviceType': '燃气智能监测终端',
+    'online': 1,
+    'offline': 2
+  },
+  {
+    'deviceType': '管盯',
+    'online': 1,
+    'offline': 6
+  }
+
+]
+const deviceOfflineList = [
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  }
+]
+module.exports = [
+  // mock get all routes form server
+  {
+    url: '/device/list',
+    type: 'get',
+    response: _ => {
+      return {
+        code: 200,
+        data: deviceList,
+        message: '请求成功',
+        success: true
+      }
+    }
+  },
+  {
+    url: '/statics/deviceStaticsByDept',
+    type: 'get',
+    response: _ => {
+      return {
+        code: 200,
+        data: deviceStaticsList,
+        message: '请求成功',
+        success: true
+      }
+    }
+  },
+  {
+    url: '/statics/deviceCountByOnlineStatus',
+    type: 'get',
+    response: _ => {
+      return {
+        code: 200,
+        data: deviceOnlineList,
+        message: '请求成功',
+        success: true
+      }
+    }
+  },
+  {
+    url: '/device/offlineListPage',
+    type: 'get',
+    response: _ => {
+      return {
+        code: 200,
+        'total': 120,
+        data: deviceOfflineList,
+        message: '请求成功',
+        success: true
+      }
+    }
+  }
+]
diff --git a/mock/index.js b/mock/index.js
index 6646246..0e60e80 100644
--- a/mock/index.js
+++ b/mock/index.js
@@ -12,6 +12,7 @@
 const dashboard = require('./biz/dashboard')
 const search = require('./remote-search')
 const overview = require('./biz/overview')
+const device = require('./deviceManage/device')
 const deviceType = require('./deviceManage/deviceType')
 const deviceModels = require('./deviceManage/deviceModels')
 const deviceImei = require('./deviceManage/deviceImei')
@@ -42,7 +43,8 @@
   ...tenantConfig,
   ...deptPermission,
   ...tenant,
-  ...warningRule
+  ...warningRule,
+  ...device
 ]
 
 // for front mock
diff --git a/src/api/data/dataStatics.js b/src/api/data/dataStatics.js
index b96a05e..04f756a 100644
--- a/src/api/data/dataStatics.js
+++ b/src/api/data/dataStatics.js
@@ -11,6 +11,14 @@
     params
   })
 }
+// 离线设备列表
+export function offlineList(params) {
+  return request({
+    url: 'device/offlineListPage',
+    method: 'get',
+    params
+  })
+}
 // 根据权属单位统计井数量
 export function wellStaticByDept(params) {
   return request({
@@ -38,6 +46,15 @@
   })
 }
 
+// 离线设备数量
+export function deviceStaticsByOnline(params) {
+  return request({
+    url: 'statics/deviceCountByOnlineStatus',
+    method: 'get',
+    params
+  })
+}
+
 // 根据权属单位统计设备数量
 export function deviceStaticsByDept(params) {
   return request({
diff --git a/src/components/NormalTable/index.vue b/src/components/NormalTable/index.vue
index 9e23838..3fdc6db 100644
--- a/src/components/NormalTable/index.vue
+++ b/src/components/NormalTable/index.vue
@@ -69,7 +69,7 @@
         </el-col>
       </el-row>
       <!-- 表格正文-->
-      <el-table v-loading="listLoading" :data="data" :size="size" class="table" row-class-name="small-row-class" border @selection-change="selectionChange" @row-click="rowClick">
+      <el-table v-loading="listLoading" :height="height" :data="data" :size="size" class="table" row-class-name="small-row-class" border @selection-change="selectionChange" @row-click="rowClick">
         <!--需要加在表最前方的插槽-->
         <slot name="preColumns" />
         <!--序号列-->
@@ -141,6 +141,12 @@
         return []
       }
     }, // 数据
+    height: {
+      type: Number,
+      default: function() {
+        return []
+      }
+    },
     total: {
       type: Number,
       default: 0
diff --git a/src/views/deviceManage/components/listDigData.vue b/src/views/deviceManage/components/listDigData.vue
new file mode 100644
index 0000000..5a2b795
--- /dev/null
+++ b/src/views/deviceManage/components/listDigData.vue
@@ -0,0 +1,19 @@
+<template>
+  <div>开挖监测仪</div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+
+    }
+  },
+  methods: {
+    initData: function(row = null) {
+      console.log(row, '===')
+    }
+  }
+}
+</script>
+
diff --git a/src/views/deviceManage/components/listGasData.vue b/src/views/deviceManage/components/listGasData.vue
new file mode 100644
index 0000000..ccbaa8b
--- /dev/null
+++ b/src/views/deviceManage/components/listGasData.vue
@@ -0,0 +1,18 @@
+<template>
+  <div>燃气智能监测终端</div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+
+    }
+  },
+  methods: {
+    initData: function(row = null) {
+      console.log(row, '===')
+    }
+  }
+}
+</script>
diff --git a/src/views/deviceManage/components/listHarmfulData.vue b/src/views/deviceManage/components/listHarmfulData.vue
new file mode 100644
index 0000000..687f9bc
--- /dev/null
+++ b/src/views/deviceManage/components/listHarmfulData.vue
@@ -0,0 +1,18 @@
+<template>
+  <div>有害气体监测仪</div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+
+    }
+  },
+  methods: {
+    initData: function(row = null) {
+      console.log(row, '===')
+    }
+  }
+}
+</script>
diff --git a/src/views/deviceManage/components/listLiquidData.vue b/src/views/deviceManage/components/listLiquidData.vue
new file mode 100644
index 0000000..f279ee9
--- /dev/null
+++ b/src/views/deviceManage/components/listLiquidData.vue
@@ -0,0 +1,18 @@
+<template>
+  <div>液位监测仪</div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+
+    }
+  },
+  methods: {
+    initData: function(row = null) {
+      console.log(row, '===')
+    }
+  }
+}
+</script>
diff --git a/src/views/deviceManage/components/listLiquidGasData.vue b/src/views/deviceManage/components/listLiquidGasData.vue
new file mode 100644
index 0000000..6f5535e
--- /dev/null
+++ b/src/views/deviceManage/components/listLiquidGasData.vue
@@ -0,0 +1,18 @@
+<template>
+  <div>燃气智能终端（一体化）</div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+
+    }
+  },
+  methods: {
+    initData: function(row = null) {
+      console.log(row, '===')
+    }
+  }
+}
+</script>
diff --git a/src/views/deviceManage/components/listNoiseData.vue b/src/views/deviceManage/components/listNoiseData.vue
new file mode 100644
index 0000000..7dad007
--- /dev/null
+++ b/src/views/deviceManage/components/listNoiseData.vue
@@ -0,0 +1,18 @@
+<template>
+  <div>噪声记录仪</div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+
+    }
+  },
+  methods: {
+    initData: function(row = null) {
+      console.log(row, '===')
+    }
+  }
+}
+</script>
diff --git a/src/views/deviceManage/components/listTempData.vue b/src/views/deviceManage/components/listTempData.vue
new file mode 100644
index 0000000..f7548b5
--- /dev/null
+++ b/src/views/deviceManage/components/listTempData.vue
@@ -0,0 +1,18 @@
+<template>
+  <div>温湿度监测仪</div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+
+    }
+  },
+  methods: {
+    initData: function(row = null) {
+      console.log(row, '===')
+    }
+  }
+}
+</script>
diff --git a/src/views/deviceManage/components/listTubeData.vue b/src/views/deviceManage/components/listTubeData.vue
new file mode 100644
index 0000000..94f1772
--- /dev/null
+++ b/src/views/deviceManage/components/listTubeData.vue
@@ -0,0 +1,18 @@
+<template>
+  <div>管盯</div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+
+    }
+  },
+  methods: {
+    initData: function(row = null) {
+      console.log(row, '===')
+    }
+  }
+}
+</script>
diff --git a/src/views/deviceManage/components/listWellData.vue b/src/views/deviceManage/components/listWellData.vue
new file mode 100644
index 0000000..7a6436d
--- /dev/null
+++ b/src/views/deviceManage/components/listWellData.vue
@@ -0,0 +1,18 @@
+<template>
+  <div>井盖状态监测仪</div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+
+    }
+  },
+  methods: {
+    initData: function(row = null) {
+      console.log(row, '===')
+    }
+  }
+}
+</script>
diff --git a/src/views/deviceManage/components/listWellLocaData.vue b/src/views/deviceManage/components/listWellLocaData.vue
new file mode 100644
index 0000000..f784671
--- /dev/null
+++ b/src/views/deviceManage/components/listWellLocaData.vue
@@ -0,0 +1,18 @@
+<template>
+  <div>井盖定位监测仪</div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+
+    }
+  },
+  methods: {
+    initData: function(row = null) {
+      console.log(row, '===')
+    }
+  }
+}
+</script>
diff --git a/src/views/deviceManage/detailDevice.vue b/src/views/deviceManage/detailDevice.vue
index eefc549..8285ee7 100644
--- a/src/views/deviceManage/detailDevice.vue
+++ b/src/views/deviceManage/detailDevice.vue
@@ -3,110 +3,114 @@
     <el-form ref="dataForm" :model="deviceForm" label-well-code="right" label-width="100px">
       <el-row :gutter="20">
         <el-col :span="12">
-          <el-form-item label="设备名称" prop="deviceName">
-            <el-input v-model="deviceForm.deviceName" type="text" placeholder="未知" disabled />
+          <el-form-item label="设备编号" prop="devcode">
+            <el-input v-model.trim="deviceForm.devcode" disabled type="text" placeholder="必填" />
           </el-form-item>
         </el-col>
         <el-col :span="12">
-          <el-form-item label="设备编号" prop="devcode">
-            <el-input v-model="deviceForm.devcode" type="text" placeholder="未知" disabled />
+          <el-form-item label="安装日期" prop="installDate">
+            <el-date-picker
+              v-model.trim="deviceForm.installDate"
+              disabled
+              type="date"
+              value-format="yyyy-MM-dd"
+              placeholder="选择日期"
+            />
           </el-form-item>
         </el-col>
       </el-row>
       <el-row :gutter="20">
         <el-col :span="12">
           <el-form-item label="设备类型" prop="deviceType">
-            <el-input v-model="deviceForm.deviceTypeName" type="text" placeholder="未知" disabled />
+            <el-select v-model="deviceForm.deviceType" disabled placeholder="请选择设备类型">
+              <el-option
+                v-for="item in deviceTypeList"
+                :key="item.value"
+                :label="item.name"
+                :value="item.value"
+              />
+            </el-select>
           </el-form-item>
         </el-col>
         <el-col :span="12">
           <el-form-item label="设备型号" prop="modelId">
-            <el-input v-model="deviceForm.modelName" type="text" placeholder="未知" disabled />
-          </el-form-item>
-        </el-col>
-      </el-row>
-      <el-row :gutter="20">
-        <el-col :span="12">
-          <el-form-item label="在线状态" prop="wellCode">
-            <el-input v-model="deviceForm.onlineStateName" type="text" placeholder="未知" disabled />
-          </el-form-item>
-        </el-col>
-        <el-col :span="12">
-          <el-form-item label="权属单位" prop="concenCode">
-            <el-input v-model="deviceForm.deptName" type="text" placeholder="未知" disabled />
+            <el-select v-model="deviceForm.modelId" disabled placeholder="请选择设备型号">
+              <el-option
+                v-for="item in deviceModelList"
+                :key="item.value"
+                :label="item.name"
+                :value="item.value"
+              />
+            </el-select>
           </el-form-item>
         </el-col>
       </el-row>
       <el-row :gutter="20">
         <el-col :span="12">
           <el-form-item label="井编号" prop="wellCode">
-            <el-input v-model="deviceForm.wellCode" type="text" placeholder="未知" disabled />
+            <el-input v-model.trim="deviceForm.wellCode" disabled type="text" placeholder="必填" />
           </el-form-item>
         </el-col>
         <el-col :span="12">
-          <el-form-item label="布防状态" prop="bfztName">
-            <el-input v-model="deviceForm.bfztName" type="text" placeholder="未知" disabled />
-          </el-form-item>
-        </el-col>
-      </el-row>
-      <el-row :gutter="20">
-        <el-col :span="24">
-          <el-form-item label="位置" prop="position">
-            <el-input v-model="deviceForm.position" type="text" placeholder="未知" disabled />
-          </el-form-item>
-        </el-col>
-      </el-row>
-      <el-row :gutter="20">
-        <el-col :span="12">
-          <el-form-item label="安装日期" prop="installDate">
-            <el-input v-model="deviceForm.installDate" type="text" placeholder="未知" disabled />
-          </el-form-item>
-        </el-col>
-        <el-col :span="12">
-          <el-form-item label="集中器编号" prop="concenCode">
-            <el-input v-model="deviceForm.concenCode" type="text" placeholder="未知" disabled />
-          </el-form-item>
-        </el-col>
-      </el-row>
-      <el-row :gutter="20">
-        <el-col :span="12">
-          <el-form-item label="设备安装高度" prop="installHeight">
-            <el-input v-model="deviceForm.installHeight" type="text" placeholder="未知" disabled />
+          <el-form-item label="安装高度(m)" prop="installHeight">
+            <el-input v-model.trim="deviceForm.installHeight" disabled type="text" placeholder="必填" />
           </el-form-item>
         </el-col>
       </el-row>
     </el-form>
+    <component :is="cmpName" ref="deviceTypeDialog" @watchChild="fetchDeviceList" />
   </el-dialog>
 </template>
 
 <script>
+import listDigData from './components/listDigData'
+import listGasData from './components/listGasData'
+import listHarmfulData from './components/listHarmfulData'
+import listLiquidData from './components/listLiquidData'
+import listLiquidGasData from './components/listLiquidGasData'
+import listNoiseData from './components/listNoiseData'
+import listTempData from './components/listTempData'
+import listTubeData from './components/listTubeData'
+import listWellData from './components/listWellData'
+import listWellLocaData from './components/listWellLocaData'
 
 export default {
-  name: 'DetailDevice',
+  name: 'EditDevice',
+  components: {
+    listDigData,
+    listGasData,
+    listHarmfulData,
+    listLiquidData,
+    listLiquidGasData,
+    listNoiseData,
+    listTempData,
+    listTubeData,
+    listWellData,
+    listWellLocaData
+  },
   data() {
     return {
       dialogFormVisible: false, // 对话框是否显示
-      dialogStatus: '', // 对话框类型：create,update
+      dialogStatus: '', // 对话框类型：create,update,detail
+      cmpName: '', // 组件名称
       deviceForm: {
         id: '',
         deviceName: '',
         devcode: '',
-        deviceTypeName: '',
+        deviceType: '',
         wellCode: '',
-        modelName: '',
+        modelId: '',
         installDate: '',
         concenCode: '',
-        installHeight: '',
-        onlineStateName: '',
-        deptName: '',
-        bfztName: '',
-        position: ''
+        installHeight: ''
       }, // 表单
       textMap: {
         update: '编辑',
         create: '新增',
         detail: '详情'
-      } // 表头显示标题z
+      }, // 表头显示标题
+      deviceTypeList: null, // 设备类型列表
+      deviceModelList: null // 设备型号列表
     }
   },
   methods: {
@@ -114,20 +118,57 @@
     initDialog: function(dialogStatus, dialogFormVisible, row = null) {
       this.dialogStatus = dialogStatus
       this.dialogFormVisible = dialogFormVisible
+      this.resetForm()
       this.deviceForm = {
         id: row.id,
         deviceName: row.deviceName,
         devcode: row.devcode,
-        deviceTypeName: row.deviceTypeName,
+        deviceType: row.deviceType,
+        modelId: row.modelId,
         wellCode: row.wellCode,
-        modelName: row.modelName,
-        installDate: row.installDate,
         concenCode: row.concenCode,
-        installHeight: row.installHeight,
-        onlineStateName: row.onlineStateName,
-        deptName: row.deptName,
-        bfztName: row.bfztName,
-        position: row.position
+        installDate: row.installDate,
+        installHeight: row.installHeight
+      }
+      // 展示相对应的设备列表组件
+      if (row.deviceTypeName === '开挖监测仪') {
+        this.cmpName = 'list-dig-data'
+      } else if (row.deviceTypeName === '井盖状态监测仪') {
+        this.cmpName = 'list-well-data'
+      } else if (row.deviceTypeName === '液位监测仪') {
+        this.cmpName = 'list-liquid-data'
+      } else if (row.deviceTypeName === '燃气智能监测终端') {
+        this.cmpName = 'list-gas-data'
+      } else if (row.deviceTypeName === '噪声记录仪') {
+        this.cmpName = 'list-noise-data'
+      } else if (row.deviceTypeName === '有害气体监测仪') {
+        this.cmpName = 'list-harmful-data'
+      } else if (row.deviceTypeName === '温湿度监测仪') {
+        this.cmpName = 'list-temp-data'
+      } else if (row.deviceTypeName === '井盖定位监测仪') {
+        this.cmpName = 'list-well-loca-data'
+      } else if (row.deviceTypeName === '燃气智能终端（一体化）') {
+        this.cmpName = 'list-liquid-gas-data'
+      } else if (row.deviceTypeName === '管盯') {
+        this.cmpName = 'list-tube-data'
+      }
+      setTimeout(() => {
+        this.$refs.deviceTypeDialog.initData(row)
+      }, 100)
+    },
+    fetchDeviceList() {},
+    // 重置表单
+    resetForm() {
+      this.deviceForm = {
+        id: '',
+        deviceName: '',
+        devcode: '',
+        deviceType: '',
+        wellCode: '',
+        modelId: '',
+        installDate: '',
+        concenCode: '',
+        installHeight: ''
       }
     }
   }
@@ -138,4 +179,7 @@
   .el-select{
     width: 100%;
   }
+  .el-date-editor{
+    width: 100%;
+  }
 </style>
diff --git a/src/views/deviceManage/editDevice.vue b/src/views/deviceManage/editDevice.vue
index 41c6907..0ae2cab 100644
--- a/src/views/deviceManage/editDevice.vue
+++ b/src/views/deviceManage/editDevice.vue
@@ -65,7 +65,7 @@
       <el-row :gutter="20">
         <el-col :span="12">
           <el-form-item label="安装高度(m)" prop="installHeight">
-            <el-input v-model.trim="deviceForm.installHeight" :disabled="isDetailMode" type="text" placeholder="非必填" />
+            <el-input v-model.trim="deviceForm.installHeight" :disabled="isDetailMode" type="text" placeholder="必填" />
           </el-form-item>
         </el-col>
       </el-row>
@@ -116,7 +116,8 @@
         wellCode: [{ required: true, message: '井编号不能为空', trigger: ['blur', 'change'] }],
         deviceType: [{ required: true, message: '设备类型必选', trigger: ['blur', 'change'] }],
         modelId: [{ required: true, message: '设备型号必选', trigger: ['blur', 'change'] }],
-        installDate: [{ required: true, message: '安装日期必选', trigger: ['blur', 'change'] }]
+        installDate: [{ required: true, message: '安装日期必选', trigger: ['blur', 'change'] }],
+        installHeight: [{ required: true, message: '设备安装高度不能为空', trigger: ['blur', 'change'] }]
       }, // 前端校验规则
       isEditMode: false, // 编辑模式
       isDetailMode: false // 详情模式

diff --git a/mock/deviceManage/device.js b/mock/deviceManage/device.js
new file mode 100644
index 0000000..1f0650d
--- /dev/null
+++ b/mock/deviceManage/device.js
@@ -0,0 +1,672 @@
+const deviceList = [
+  {
+    'bfzt': '0',
+    'bfztName': '撤防',
+    'communication': '3,4',
+    'concenCode': '',
+    'concenId': '',
+    'deptName': '燃气集团总公司',
+    'deptid': '24',
+    'installHeight': '123',
+    'devcode': '342021000001',
+    'deviceName': '',
+    'deviceType': '12',
+    'deviceTypeName': '开挖监测仪',
+    'id': '1476131375777120257',
+    'installDate': '2021-12-29',
+    'modelId': '19',
+    'modelName': 'BIRMM-RTU100N',
+    'onlineState': '1',
+    'onlineStateName': '在线',
+    'position': 'test001位置',
+    'ts': '2021-12-29',
+    'valid': '1',
+    'watchType': '燃气泄漏',
+    'wellCode': 'test001',
+    'wellId': '4453'
+  },
+  {
+    'bfzt': '0',
+    'bfztName': '撤防',
+    'communication': '3,4',
+    'concenCode': '',
+    'concenId': '',
+    'deptName': '燃气集团总公司',
+    'deptid': '24',
+    'installHeight': '123',
+    'devcode': '342021000001',
+    'deviceName': '',
+    'deviceType': '12',
+    'deviceTypeName': '井盖状态监测仪',
+    'id': '1476131375777120257',
+    'installDate': '2021-12-29',
+    'modelId': '19',
+    'modelName': 'BIRMM-RTU100N',
+    'onlineState': '1',
+    'onlineStateName': '在线',
+    'position': 'test001位置',
+    'ts': '2021-12-29',
+    'valid': '1',
+    'watchType': '燃气泄漏',
+    'wellCode': 'test001',
+    'wellId': '4453'
+  },
+  {
+    'bfzt': '0',
+    'bfztName': '撤防',
+    'communication': '3,4',
+    'concenCode': '',
+    'concenId': '',
+    'deptName': '燃气集团总公司',
+    'deptid': '24',
+    'installHeight': '123',
+    'devcode': '342021000001',
+    'deviceName': '',
+    'deviceType': '12',
+    'deviceTypeName': '液位监测仪',
+    'id': '1476131375777120257',
+    'installDate': '2021-12-29',
+    'modelId': '19',
+    'modelName': 'BIRMM-RTU100N',
+    'onlineState': '1',
+    'onlineStateName': '在线',
+    'position': 'test001位置',
+    'ts': '2021-12-29',
+    'valid': '1',
+    'watchType': '燃气泄漏',
+    'wellCode': 'test001',
+    'wellId': '4453'
+  },
+  {
+    'bfzt': '0',
+    'bfztName': '撤防',
+    'communication': '3,4',
+    'concenCode': '',
+    'concenId': '',
+    'deptName': '燃气集团总公司',
+    'deptid': '24',
+    'installHeight': '123',
+    'devcode': '342021000001',
+    'deviceName': '',
+    'deviceType': '12',
+    'deviceTypeName': '燃气智能监测终端',
+    'id': '1476131375777120257',
+    'installDate': '2021-12-29',
+    'modelId': '19',
+    'modelName': 'BIRMM-RTU100N',
+    'onlineState': '1',
+    'onlineStateName': '在线',
+    'position': 'test001位置',
+    'ts': '2021-12-29',
+    'valid': '1',
+    'watchType': '燃气泄漏',
+    'wellCode': 'test001',
+    'wellId': '4453'
+  },
+  {
+    'bfzt': '0',
+    'bfztName': '撤防',
+    'communication': '3,4',
+    'concenCode': '',
+    'concenId': '',
+    'deptName': '燃气集团总公司',
+    'deptid': '24',
+    'installHeight': '123',
+    'devcode': '342021000001',
+    'deviceName': '',
+    'deviceType': '12',
+    'deviceTypeName': '噪声记录仪',
+    'id': '1476131375777120257',
+    'installDate': '2021-12-29',
+    'modelId': '19',
+    'modelName': 'BIRMM-RTU100N',
+    'onlineState': '1',
+    'onlineStateName': '在线',
+    'position': 'test001位置',
+    'ts': '2021-12-29',
+    'valid': '1',
+    'watchType': '燃气泄漏',
+    'wellCode': 'test001',
+    'wellId': '4453'
+  },
+  {
+    'bfzt': '0',
+    'bfztName': '撤防',
+    'communication': '3,4',
+    'concenCode': '',
+    'concenId': '',
+    'deptName': '燃气集团总公司',
+    'deptid': '24',
+    'installHeight': '123',
+    'devcode': '342021000001',
+    'deviceName': '',
+    'deviceType': '12',
+    'deviceTypeName': '有害气体监测仪',
+    'id': '1476131375777120257',
+    'installDate': '2021-12-29',
+    'modelId': '19',
+    'modelName': 'BIRMM-RTU100N',
+    'onlineState': '1',
+    'onlineStateName': '在线',
+    'position': 'test001位置',
+    'ts': '2021-12-29',
+    'valid': '1',
+    'watchType': '燃气泄漏',
+    'wellCode': 'test001',
+    'wellId': '4453'
+  },
+  {
+    'bfzt': '0',
+    'bfztName': '撤防',
+    'communication': '3,4',
+    'concenCode': '',
+    'concenId': '',
+    'deptName': '燃气集团总公司',
+    'deptid': '24',
+    'installHeight': '123',
+    'devcode': '342021000001',
+    'deviceName': '',
+    'deviceType': '12',
+    'deviceTypeName': '温湿度监测仪',
+    'id': '1476131375777120257',
+    'installDate': '2021-12-29',
+    'modelId': '19',
+    'modelName': 'BIRMM-RTU100N',
+    'onlineState': '1',
+    'onlineStateName': '在线',
+    'position': 'test001位置',
+    'ts': '2021-12-29',
+    'valid': '1',
+    'watchType': '燃气泄漏',
+    'wellCode': 'test001',
+    'wellId': '4453'
+  },
+  {
+    'bfzt': '0',
+    'bfztName': '撤防',
+    'communication': '3,4',
+    'concenCode': '',
+    'concenId': '',
+    'deptName': '燃气集团总公司',
+    'deptid': '24',
+    'installHeight': '123',
+    'devcode': '342021000001',
+    'deviceName': '',
+    'deviceType': '12',
+    'deviceTypeName': '井盖定位监测仪',
+    'id': '1476131375777120257',
+    'installDate': '2021-12-29',
+    'modelId': '19',
+    'modelName': 'BIRMM-RTU100N',
+    'onlineState': '1',
+    'onlineStateName': '在线',
+    'position': 'test001位置',
+    'ts': '2021-12-29',
+    'valid': '1',
+    'watchType': '燃气泄漏',
+    'wellCode': 'test001',
+    'wellId': '4453'
+  },
+  {
+    'bfzt': '0',
+    'bfztName': '撤防',
+    'communication': '3,4',
+    'concenCode': '',
+    'concenId': '',
+    'deptName': '燃气集团总公司',
+    'deptid': '24',
+    'installHeight': '123',
+    'devcode': '342021000001',
+    'deviceName': '',
+    'deviceType': '12',
+    'deviceTypeName': '燃气智能终端（一体化）',
+    'id': '1476131375777120257',
+    'installDate': '2021-12-29',
+    'modelId': '19',
+    'modelName': 'BIRMM-RTU100N',
+    'onlineState': '1',
+    'onlineStateName': '在线',
+    'position': 'test001位置',
+    'ts': '2021-12-29',
+    'valid': '1',
+    'watchType': '燃气泄漏',
+    'wellCode': 'test001',
+    'wellId': '4453'
+  },
+  {
+    'bfzt': '0',
+    'bfztName': '撤防',
+    'communication': '3,4',
+    'concenCode': '',
+    'concenId': '',
+    'deptName': '燃气集团总公司',
+    'deptid': '24',
+    'installHeight': '123',
+    'devcode': '342021000001',
+    'deviceName': '',
+    'deviceType': '12',
+    'deviceTypeName': '管盯',
+    'id': '1476131375777120257',
+    'installDate': '2021-12-29',
+    'modelId': '19',
+    'modelName': 'BIRMM-RTU100N',
+    'onlineState': '1',
+    'onlineStateName': '在线',
+    'position': 'test001位置',
+    'ts': '2021-12-29',
+    'valid': '1',
+    'watchType': '燃气泄漏',
+    'wellCode': 'test001',
+    'wellId': '4453'
+  }
+]
+const deviceStaticsList = [
+  {
+    'deptName': '燃气集团总公司',
+    'deviceCount': '11',
+    'deptid': '24'
+  },
+  {
+    'deptName': '煤气公司',
+    'deviceCount': '2',
+    'deptid': '24'
+  },
+  {
+    'deptName': '电力公司',
+    'deviceCount': '11',
+    'deptid': '24'
+  }
+
+]
+const deviceOnlineList = [
+  {
+    'deviceType': '井盖状态监测仪',
+    'online': 1,
+    'offline': 9
+  },
+  {
+    'deviceType': '燃气智能监测终端',
+    'online': 1,
+    'offline': 2
+  },
+  {
+    'deviceType': '管盯',
+    'online': 1,
+    'offline': 6
+  }
+
+]
+const deviceOfflineList = [
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  }
+]
+module.exports = [
+  // mock get all routes form server
+  {
+    url: '/device/list',
+    type: 'get',
+    response: _ => {
+      return {
+        code: 200,
+        data: deviceList,
+        message: '请求成功',
+        success: true
+      }
+    }
+  },
+  {
+    url: '/statics/deviceStaticsByDept',
+    type: 'get',
+    response: _ => {
+      return {
+        code: 200,
+        data: deviceStaticsList,
+        message: '请求成功',
+        success: true
+      }
+    }
+  },
+  {
+    url: '/statics/deviceCountByOnlineStatus',
+    type: 'get',
+    response: _ => {
+      return {
+        code: 200,
+        data: deviceOnlineList,
+        message: '请求成功',
+        success: true
+      }
+    }
+  },
+  {
+    url: '/device/offlineListPage',
+    type: 'get',
+    response: _ => {
+      return {
+        code: 200,
+        'total': 120,
+        data: deviceOfflineList,
+        message: '请求成功',
+        success: true
+      }
+    }
+  }
+]
diff --git a/mock/index.js b/mock/index.js
index 6646246..0e60e80 100644
--- a/mock/index.js
+++ b/mock/index.js
@@ -12,6 +12,7 @@
 const dashboard = require('./biz/dashboard')
 const search = require('./remote-search')
 const overview = require('./biz/overview')
+const device = require('./deviceManage/device')
 const deviceType = require('./deviceManage/deviceType')
 const deviceModels = require('./deviceManage/deviceModels')
 const deviceImei = require('./deviceManage/deviceImei')
@@ -42,7 +43,8 @@
   ...tenantConfig,
   ...deptPermission,
   ...tenant,
-  ...warningRule
+  ...warningRule,
+  ...device
 ]
 
 // for front mock
diff --git a/src/api/data/dataStatics.js b/src/api/data/dataStatics.js
index b96a05e..04f756a 100644
--- a/src/api/data/dataStatics.js
+++ b/src/api/data/dataStatics.js
@@ -11,6 +11,14 @@
     params
   })
 }
+// 离线设备列表
+export function offlineList(params) {
+  return request({
+    url: 'device/offlineListPage',
+    method: 'get',
+    params
+  })
+}
 // 根据权属单位统计井数量
 export function wellStaticByDept(params) {
   return request({
@@ -38,6 +46,15 @@
   })
 }
 
+// 离线设备数量
+export function deviceStaticsByOnline(params) {
+  return request({
+    url: 'statics/deviceCountByOnlineStatus',
+    method: 'get',
+    params
+  })
+}
+
 // 根据权属单位统计设备数量
 export function deviceStaticsByDept(params) {
   return request({
diff --git a/src/components/NormalTable/index.vue b/src/components/NormalTable/index.vue
index 9e23838..3fdc6db 100644
--- a/src/components/NormalTable/index.vue
+++ b/src/components/NormalTable/index.vue
@@ -69,7 +69,7 @@
         </el-col>
       </el-row>
       <!-- 表格正文-->
-      <el-table v-loading="listLoading" :data="data" :size="size" class="table" row-class-name="small-row-class" border @selection-change="selectionChange" @row-click="rowClick">
+      <el-table v-loading="listLoading" :height="height" :data="data" :size="size" class="table" row-class-name="small-row-class" border @selection-change="selectionChange" @row-click="rowClick">
         <!--需要加在表最前方的插槽-->
         <slot name="preColumns" />
         <!--序号列-->
@@ -141,6 +141,12 @@
         return []
       }
     }, // 数据
+    height: {
+      type: Number,
+      default: function() {
+        return []
+      }
+    },
     total: {
       type: Number,
       default: 0
diff --git a/src/views/deviceManage/components/listDigData.vue b/src/views/deviceManage/components/listDigData.vue
new file mode 100644
index 0000000..5a2b795
--- /dev/null
+++ b/src/views/deviceManage/components/listDigData.vue
@@ -0,0 +1,19 @@
+<template>
+  <div>开挖监测仪</div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+
+    }
+  },
+  methods: {
+    initData: function(row = null) {
+      console.log(row, '===')
+    }
+  }
+}
+</script>
+
diff --git a/src/views/deviceManage/components/listGasData.vue b/src/views/deviceManage/components/listGasData.vue
new file mode 100644
index 0000000..ccbaa8b
--- /dev/null
+++ b/src/views/deviceManage/components/listGasData.vue
@@ -0,0 +1,18 @@
+<template>
+  <div>燃气智能监测终端</div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+
+    }
+  },
+  methods: {
+    initData: function(row = null) {
+      console.log(row, '===')
+    }
+  }
+}
+</script>
diff --git a/src/views/deviceManage/components/listHarmfulData.vue b/src/views/deviceManage/components/listHarmfulData.vue
new file mode 100644
index 0000000..687f9bc
--- /dev/null
+++ b/src/views/deviceManage/components/listHarmfulData.vue
@@ -0,0 +1,18 @@
+<template>
+  <div>有害气体监测仪</div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+
+    }
+  },
+  methods: {
+    initData: function(row = null) {
+      console.log(row, '===')
+    }
+  }
+}
+</script>
diff --git a/src/views/deviceManage/components/listLiquidData.vue b/src/views/deviceManage/components/listLiquidData.vue
new file mode 100644
index 0000000..f279ee9
--- /dev/null
+++ b/src/views/deviceManage/components/listLiquidData.vue
@@ -0,0 +1,18 @@
+<template>
+  <div>液位监测仪</div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+
+    }
+  },
+  methods: {
+    initData: function(row = null) {
+      console.log(row, '===')
+    }
+  }
+}
+</script>
diff --git a/src/views/deviceManage/components/listLiquidGasData.vue b/src/views/deviceManage/components/listLiquidGasData.vue
new file mode 100644
index 0000000..6f5535e
--- /dev/null
+++ b/src/views/deviceManage/components/listLiquidGasData.vue
@@ -0,0 +1,18 @@
+<template>
+  <div>燃气智能终端（一体化）</div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+
+    }
+  },
+  methods: {
+    initData: function(row = null) {
+      console.log(row, '===')
+    }
+  }
+}
+</script>
diff --git a/src/views/deviceManage/components/listNoiseData.vue b/src/views/deviceManage/components/listNoiseData.vue
new file mode 100644
index 0000000..7dad007
--- /dev/null
+++ b/src/views/deviceManage/components/listNoiseData.vue
@@ -0,0 +1,18 @@
+<template>
+  <div>噪声记录仪</div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+
+    }
+  },
+  methods: {
+    initData: function(row = null) {
+      console.log(row, '===')
+    }
+  }
+}
+</script>
diff --git a/src/views/deviceManage/components/listTempData.vue b/src/views/deviceManage/components/listTempData.vue
new file mode 100644
index 0000000..f7548b5
--- /dev/null
+++ b/src/views/deviceManage/components/listTempData.vue
@@ -0,0 +1,18 @@
+<template>
+  <div>温湿度监测仪</div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+
+    }
+  },
+  methods: {
+    initData: function(row = null) {
+      console.log(row, '===')
+    }
+  }
+}
+</script>
diff --git a/src/views/deviceManage/components/listTubeData.vue b/src/views/deviceManage/components/listTubeData.vue
new file mode 100644
index 0000000..94f1772
--- /dev/null
+++ b/src/views/deviceManage/components/listTubeData.vue
@@ -0,0 +1,18 @@
+<template>
+  <div>管盯</div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+
+    }
+  },
+  methods: {
+    initData: function(row = null) {
+      console.log(row, '===')
+    }
+  }
+}
+</script>
diff --git a/src/views/deviceManage/components/listWellData.vue b/src/views/deviceManage/components/listWellData.vue
new file mode 100644
index 0000000..7a6436d
--- /dev/null
+++ b/src/views/deviceManage/components/listWellData.vue
@@ -0,0 +1,18 @@
+<template>
+  <div>井盖状态监测仪</div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+
+    }
+  },
+  methods: {
+    initData: function(row = null) {
+      console.log(row, '===')
+    }
+  }
+}
+</script>
diff --git a/src/views/deviceManage/components/listWellLocaData.vue b/src/views/deviceManage/components/listWellLocaData.vue
new file mode 100644
index 0000000..f784671
--- /dev/null
+++ b/src/views/deviceManage/components/listWellLocaData.vue
@@ -0,0 +1,18 @@
+<template>
+  <div>井盖定位监测仪</div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+
+    }
+  },
+  methods: {
+    initData: function(row = null) {
+      console.log(row, '===')
+    }
+  }
+}
+</script>
diff --git a/src/views/deviceManage/detailDevice.vue b/src/views/deviceManage/detailDevice.vue
index eefc549..8285ee7 100644
--- a/src/views/deviceManage/detailDevice.vue
+++ b/src/views/deviceManage/detailDevice.vue
@@ -3,110 +3,114 @@
     <el-form ref="dataForm" :model="deviceForm" label-well-code="right" label-width="100px">
       <el-row :gutter="20">
         <el-col :span="12">
-          <el-form-item label="设备名称" prop="deviceName">
-            <el-input v-model="deviceForm.deviceName" type="text" placeholder="未知" disabled />
+          <el-form-item label="设备编号" prop="devcode">
+            <el-input v-model.trim="deviceForm.devcode" disabled type="text" placeholder="必填" />
           </el-form-item>
         </el-col>
         <el-col :span="12">
-          <el-form-item label="设备编号" prop="devcode">
-            <el-input v-model="deviceForm.devcode" type="text" placeholder="未知" disabled />
+          <el-form-item label="安装日期" prop="installDate">
+            <el-date-picker
+              v-model.trim="deviceForm.installDate"
+              disabled
+              type="date"
+              value-format="yyyy-MM-dd"
+              placeholder="选择日期"
+            />
           </el-form-item>
         </el-col>
       </el-row>
       <el-row :gutter="20">
         <el-col :span="12">
           <el-form-item label="设备类型" prop="deviceType">
-            <el-input v-model="deviceForm.deviceTypeName" type="text" placeholder="未知" disabled />
+            <el-select v-model="deviceForm.deviceType" disabled placeholder="请选择设备类型">
+              <el-option
+                v-for="item in deviceTypeList"
+                :key="item.value"
+                :label="item.name"
+                :value="item.value"
+              />
+            </el-select>
           </el-form-item>
         </el-col>
         <el-col :span="12">
           <el-form-item label="设备型号" prop="modelId">
-            <el-input v-model="deviceForm.modelName" type="text" placeholder="未知" disabled />
-          </el-form-item>
-        </el-col>
-      </el-row>
-      <el-row :gutter="20">
-        <el-col :span="12">
-          <el-form-item label="在线状态" prop="wellCode">
-            <el-input v-model="deviceForm.onlineStateName" type="text" placeholder="未知" disabled />
-          </el-form-item>
-        </el-col>
-        <el-col :span="12">
-          <el-form-item label="权属单位" prop="concenCode">
-            <el-input v-model="deviceForm.deptName" type="text" placeholder="未知" disabled />
+            <el-select v-model="deviceForm.modelId" disabled placeholder="请选择设备型号">
+              <el-option
+                v-for="item in deviceModelList"
+                :key="item.value"
+                :label="item.name"
+                :value="item.value"
+              />
+            </el-select>
           </el-form-item>
         </el-col>
       </el-row>
       <el-row :gutter="20">
         <el-col :span="12">
           <el-form-item label="井编号" prop="wellCode">
-            <el-input v-model="deviceForm.wellCode" type="text" placeholder="未知" disabled />
+            <el-input v-model.trim="deviceForm.wellCode" disabled type="text" placeholder="必填" />
           </el-form-item>
         </el-col>
         <el-col :span="12">
-          <el-form-item label="布防状态" prop="bfztName">
-            <el-input v-model="deviceForm.bfztName" type="text" placeholder="未知" disabled />
-          </el-form-item>
-        </el-col>
-      </el-row>
-      <el-row :gutter="20">
-        <el-col :span="24">
-          <el-form-item label="位置" prop="position">
-            <el-input v-model="deviceForm.position" type="text" placeholder="未知" disabled />
-          </el-form-item>
-        </el-col>
-      </el-row>
-      <el-row :gutter="20">
-        <el-col :span="12">
-          <el-form-item label="安装日期" prop="installDate">
-            <el-input v-model="deviceForm.installDate" type="text" placeholder="未知" disabled />
-          </el-form-item>
-        </el-col>
-        <el-col :span="12">
-          <el-form-item label="集中器编号" prop="concenCode">
-            <el-input v-model="deviceForm.concenCode" type="text" placeholder="未知" disabled />
-          </el-form-item>
-        </el-col>
-      </el-row>
-      <el-row :gutter="20">
-        <el-col :span="12">
-          <el-form-item label="设备安装高度" prop="installHeight">
-            <el-input v-model="deviceForm.installHeight" type="text" placeholder="未知" disabled />
+          <el-form-item label="安装高度(m)" prop="installHeight">
+            <el-input v-model.trim="deviceForm.installHeight" disabled type="text" placeholder="必填" />
           </el-form-item>
         </el-col>
       </el-row>
     </el-form>
+    <component :is="cmpName" ref="deviceTypeDialog" @watchChild="fetchDeviceList" />
   </el-dialog>
 </template>
 
 <script>
+import listDigData from './components/listDigData'
+import listGasData from './components/listGasData'
+import listHarmfulData from './components/listHarmfulData'
+import listLiquidData from './components/listLiquidData'
+import listLiquidGasData from './components/listLiquidGasData'
+import listNoiseData from './components/listNoiseData'
+import listTempData from './components/listTempData'
+import listTubeData from './components/listTubeData'
+import listWellData from './components/listWellData'
+import listWellLocaData from './components/listWellLocaData'
 
 export default {
-  name: 'DetailDevice',
+  name: 'EditDevice',
+  components: {
+    listDigData,
+    listGasData,
+    listHarmfulData,
+    listLiquidData,
+    listLiquidGasData,
+    listNoiseData,
+    listTempData,
+    listTubeData,
+    listWellData,
+    listWellLocaData
+  },
   data() {
     return {
       dialogFormVisible: false, // 对话框是否显示
-      dialogStatus: '', // 对话框类型：create,update
+      dialogStatus: '', // 对话框类型：create,update,detail
+      cmpName: '', // 组件名称
       deviceForm: {
         id: '',
         deviceName: '',
         devcode: '',
-        deviceTypeName: '',
+        deviceType: '',
         wellCode: '',
-        modelName: '',
+        modelId: '',
         installDate: '',
         concenCode: '',
-        installHeight: '',
-        onlineStateName: '',
-        deptName: '',
-        bfztName: '',
-        position: ''
+        installHeight: ''
       }, // 表单
       textMap: {
         update: '编辑',
         create: '新增',
         detail: '详情'
-      } // 表头显示标题z
+      }, // 表头显示标题
+      deviceTypeList: null, // 设备类型列表
+      deviceModelList: null // 设备型号列表
     }
   },
   methods: {
@@ -114,20 +118,57 @@
     initDialog: function(dialogStatus, dialogFormVisible, row = null) {
       this.dialogStatus = dialogStatus
       this.dialogFormVisible = dialogFormVisible
+      this.resetForm()
       this.deviceForm = {
         id: row.id,
         deviceName: row.deviceName,
         devcode: row.devcode,
-        deviceTypeName: row.deviceTypeName,
+        deviceType: row.deviceType,
+        modelId: row.modelId,
         wellCode: row.wellCode,
-        modelName: row.modelName,
-        installDate: row.installDate,
         concenCode: row.concenCode,
-        installHeight: row.installHeight,
-        onlineStateName: row.onlineStateName,
-        deptName: row.deptName,
-        bfztName: row.bfztName,
-        position: row.position
+        installDate: row.installDate,
+        installHeight: row.installHeight
+      }
+      // 展示相对应的设备列表组件
+      if (row.deviceTypeName === '开挖监测仪') {
+        this.cmpName = 'list-dig-data'
+      } else if (row.deviceTypeName === '井盖状态监测仪') {
+        this.cmpName = 'list-well-data'
+      } else if (row.deviceTypeName === '液位监测仪') {
+        this.cmpName = 'list-liquid-data'
+      } else if (row.deviceTypeName === '燃气智能监测终端') {
+        this.cmpName = 'list-gas-data'
+      } else if (row.deviceTypeName === '噪声记录仪') {
+        this.cmpName = 'list-noise-data'
+      } else if (row.deviceTypeName === '有害气体监测仪') {
+        this.cmpName = 'list-harmful-data'
+      } else if (row.deviceTypeName === '温湿度监测仪') {
+        this.cmpName = 'list-temp-data'
+      } else if (row.deviceTypeName === '井盖定位监测仪') {
+        this.cmpName = 'list-well-loca-data'
+      } else if (row.deviceTypeName === '燃气智能终端（一体化）') {
+        this.cmpName = 'list-liquid-gas-data'
+      } else if (row.deviceTypeName === '管盯') {
+        this.cmpName = 'list-tube-data'
+      }
+      setTimeout(() => {
+        this.$refs.deviceTypeDialog.initData(row)
+      }, 100)
+    },
+    fetchDeviceList() {},
+    // 重置表单
+    resetForm() {
+      this.deviceForm = {
+        id: '',
+        deviceName: '',
+        devcode: '',
+        deviceType: '',
+        wellCode: '',
+        modelId: '',
+        installDate: '',
+        concenCode: '',
+        installHeight: ''
       }
     }
   }
@@ -138,4 +179,7 @@
   .el-select{
     width: 100%;
   }
+  .el-date-editor{
+    width: 100%;
+  }
 </style>
diff --git a/src/views/deviceManage/editDevice.vue b/src/views/deviceManage/editDevice.vue
index 41c6907..0ae2cab 100644
--- a/src/views/deviceManage/editDevice.vue
+++ b/src/views/deviceManage/editDevice.vue
@@ -65,7 +65,7 @@
       <el-row :gutter="20">
         <el-col :span="12">
           <el-form-item label="安装高度(m)" prop="installHeight">
-            <el-input v-model.trim="deviceForm.installHeight" :disabled="isDetailMode" type="text" placeholder="非必填" />
+            <el-input v-model.trim="deviceForm.installHeight" :disabled="isDetailMode" type="text" placeholder="必填" />
           </el-form-item>
         </el-col>
       </el-row>
@@ -116,7 +116,8 @@
         wellCode: [{ required: true, message: '井编号不能为空', trigger: ['blur', 'change'] }],
         deviceType: [{ required: true, message: '设备类型必选', trigger: ['blur', 'change'] }],
         modelId: [{ required: true, message: '设备型号必选', trigger: ['blur', 'change'] }],
-        installDate: [{ required: true, message: '安装日期必选', trigger: ['blur', 'change'] }]
+        installDate: [{ required: true, message: '安装日期必选', trigger: ['blur', 'change'] }],
+        installHeight: [{ required: true, message: '设备安装高度不能为空', trigger: ['blur', 'change'] }]
       }, // 前端校验规则
       isEditMode: false, // 编辑模式
       isDetailMode: false // 详情模式
diff --git a/src/views/deviceManage/listDevice.vue b/src/views/deviceManage/listDevice.vue
index 2303523..623cf06 100644
--- a/src/views/deviceManage/listDevice.vue
+++ b/src/views/deviceManage/listDevice.vue
@@ -76,7 +76,6 @@
       </el-row>
       <el-table v-loading="listLoading" :data="list" class="table" border @selection-change="handleSelectionChange">
         <el-table-column v-if="hasPerm('/device/delete')" align="center" type="selection" width="55" />
-        <el-table-column :index="indexMethod" align="center" type="index" />
         <el-table-column v-for="column in columns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
           <template slot-scope="scope">
             <span v-if="column.type!='Button'" :class="column.class">{{ scope.row[column.value] }}</span>
@@ -272,7 +271,7 @@
       this.$refs.editdevice.initDialog('update', this.dialogFormVisible, row)
     },
     detail(row) {
-      this.$refs.editdevice.initDialog('detail', true, row)
+      this.$refs.detaildevice.initDialog('detail', true, row)
     },
     // 删除设备
     del() {
@@ -367,7 +366,7 @@
         this.listQuery.offset = 1
       }
       getDeviceList(this.listQuery).then(response => {
-        this.list = response.data.rows
+        this.list = response.data
         this.total = parseInt(response.data.total)
         this.listLoading = false
       })

diff --git a/mock/deviceManage/device.js b/mock/deviceManage/device.js
new file mode 100644
index 0000000..1f0650d
--- /dev/null
+++ b/mock/deviceManage/device.js
@@ -0,0 +1,672 @@
+const deviceList = [
+  {
+    'bfzt': '0',
+    'bfztName': '撤防',
+    'communication': '3,4',
+    'concenCode': '',
+    'concenId': '',
+    'deptName': '燃气集团总公司',
+    'deptid': '24',
+    'installHeight': '123',
+    'devcode': '342021000001',
+    'deviceName': '',
+    'deviceType': '12',
+    'deviceTypeName': '开挖监测仪',
+    'id': '1476131375777120257',
+    'installDate': '2021-12-29',
+    'modelId': '19',
+    'modelName': 'BIRMM-RTU100N',
+    'onlineState': '1',
+    'onlineStateName': '在线',
+    'position': 'test001位置',
+    'ts': '2021-12-29',
+    'valid': '1',
+    'watchType': '燃气泄漏',
+    'wellCode': 'test001',
+    'wellId': '4453'
+  },
+  {
+    'bfzt': '0',
+    'bfztName': '撤防',
+    'communication': '3,4',
+    'concenCode': '',
+    'concenId': '',
+    'deptName': '燃气集团总公司',
+    'deptid': '24',
+    'installHeight': '123',
+    'devcode': '342021000001',
+    'deviceName': '',
+    'deviceType': '12',
+    'deviceTypeName': '井盖状态监测仪',
+    'id': '1476131375777120257',
+    'installDate': '2021-12-29',
+    'modelId': '19',
+    'modelName': 'BIRMM-RTU100N',
+    'onlineState': '1',
+    'onlineStateName': '在线',
+    'position': 'test001位置',
+    'ts': '2021-12-29',
+    'valid': '1',
+    'watchType': '燃气泄漏',
+    'wellCode': 'test001',
+    'wellId': '4453'
+  },
+  {
+    'bfzt': '0',
+    'bfztName': '撤防',
+    'communication': '3,4',
+    'concenCode': '',
+    'concenId': '',
+    'deptName': '燃气集团总公司',
+    'deptid': '24',
+    'installHeight': '123',
+    'devcode': '342021000001',
+    'deviceName': '',
+    'deviceType': '12',
+    'deviceTypeName': '液位监测仪',
+    'id': '1476131375777120257',
+    'installDate': '2021-12-29',
+    'modelId': '19',
+    'modelName': 'BIRMM-RTU100N',
+    'onlineState': '1',
+    'onlineStateName': '在线',
+    'position': 'test001位置',
+    'ts': '2021-12-29',
+    'valid': '1',
+    'watchType': '燃气泄漏',
+    'wellCode': 'test001',
+    'wellId': '4453'
+  },
+  {
+    'bfzt': '0',
+    'bfztName': '撤防',
+    'communication': '3,4',
+    'concenCode': '',
+    'concenId': '',
+    'deptName': '燃气集团总公司',
+    'deptid': '24',
+    'installHeight': '123',
+    'devcode': '342021000001',
+    'deviceName': '',
+    'deviceType': '12',
+    'deviceTypeName': '燃气智能监测终端',
+    'id': '1476131375777120257',
+    'installDate': '2021-12-29',
+    'modelId': '19',
+    'modelName': 'BIRMM-RTU100N',
+    'onlineState': '1',
+    'onlineStateName': '在线',
+    'position': 'test001位置',
+    'ts': '2021-12-29',
+    'valid': '1',
+    'watchType': '燃气泄漏',
+    'wellCode': 'test001',
+    'wellId': '4453'
+  },
+  {
+    'bfzt': '0',
+    'bfztName': '撤防',
+    'communication': '3,4',
+    'concenCode': '',
+    'concenId': '',
+    'deptName': '燃气集团总公司',
+    'deptid': '24',
+    'installHeight': '123',
+    'devcode': '342021000001',
+    'deviceName': '',
+    'deviceType': '12',
+    'deviceTypeName': '噪声记录仪',
+    'id': '1476131375777120257',
+    'installDate': '2021-12-29',
+    'modelId': '19',
+    'modelName': 'BIRMM-RTU100N',
+    'onlineState': '1',
+    'onlineStateName': '在线',
+    'position': 'test001位置',
+    'ts': '2021-12-29',
+    'valid': '1',
+    'watchType': '燃气泄漏',
+    'wellCode': 'test001',
+    'wellId': '4453'
+  },
+  {
+    'bfzt': '0',
+    'bfztName': '撤防',
+    'communication': '3,4',
+    'concenCode': '',
+    'concenId': '',
+    'deptName': '燃气集团总公司',
+    'deptid': '24',
+    'installHeight': '123',
+    'devcode': '342021000001',
+    'deviceName': '',
+    'deviceType': '12',
+    'deviceTypeName': '有害气体监测仪',
+    'id': '1476131375777120257',
+    'installDate': '2021-12-29',
+    'modelId': '19',
+    'modelName': 'BIRMM-RTU100N',
+    'onlineState': '1',
+    'onlineStateName': '在线',
+    'position': 'test001位置',
+    'ts': '2021-12-29',
+    'valid': '1',
+    'watchType': '燃气泄漏',
+    'wellCode': 'test001',
+    'wellId': '4453'
+  },
+  {
+    'bfzt': '0',
+    'bfztName': '撤防',
+    'communication': '3,4',
+    'concenCode': '',
+    'concenId': '',
+    'deptName': '燃气集团总公司',
+    'deptid': '24',
+    'installHeight': '123',
+    'devcode': '342021000001',
+    'deviceName': '',
+    'deviceType': '12',
+    'deviceTypeName': '温湿度监测仪',
+    'id': '1476131375777120257',
+    'installDate': '2021-12-29',
+    'modelId': '19',
+    'modelName': 'BIRMM-RTU100N',
+    'onlineState': '1',
+    'onlineStateName': '在线',
+    'position': 'test001位置',
+    'ts': '2021-12-29',
+    'valid': '1',
+    'watchType': '燃气泄漏',
+    'wellCode': 'test001',
+    'wellId': '4453'
+  },
+  {
+    'bfzt': '0',
+    'bfztName': '撤防',
+    'communication': '3,4',
+    'concenCode': '',
+    'concenId': '',
+    'deptName': '燃气集团总公司',
+    'deptid': '24',
+    'installHeight': '123',
+    'devcode': '342021000001',
+    'deviceName': '',
+    'deviceType': '12',
+    'deviceTypeName': '井盖定位监测仪',
+    'id': '1476131375777120257',
+    'installDate': '2021-12-29',
+    'modelId': '19',
+    'modelName': 'BIRMM-RTU100N',
+    'onlineState': '1',
+    'onlineStateName': '在线',
+    'position': 'test001位置',
+    'ts': '2021-12-29',
+    'valid': '1',
+    'watchType': '燃气泄漏',
+    'wellCode': 'test001',
+    'wellId': '4453'
+  },
+  {
+    'bfzt': '0',
+    'bfztName': '撤防',
+    'communication': '3,4',
+    'concenCode': '',
+    'concenId': '',
+    'deptName': '燃气集团总公司',
+    'deptid': '24',
+    'installHeight': '123',
+    'devcode': '342021000001',
+    'deviceName': '',
+    'deviceType': '12',
+    'deviceTypeName': '燃气智能终端（一体化）',
+    'id': '1476131375777120257',
+    'installDate': '2021-12-29',
+    'modelId': '19',
+    'modelName': 'BIRMM-RTU100N',
+    'onlineState': '1',
+    'onlineStateName': '在线',
+    'position': 'test001位置',
+    'ts': '2021-12-29',
+    'valid': '1',
+    'watchType': '燃气泄漏',
+    'wellCode': 'test001',
+    'wellId': '4453'
+  },
+  {
+    'bfzt': '0',
+    'bfztName': '撤防',
+    'communication': '3,4',
+    'concenCode': '',
+    'concenId': '',
+    'deptName': '燃气集团总公司',
+    'deptid': '24',
+    'installHeight': '123',
+    'devcode': '342021000001',
+    'deviceName': '',
+    'deviceType': '12',
+    'deviceTypeName': '管盯',
+    'id': '1476131375777120257',
+    'installDate': '2021-12-29',
+    'modelId': '19',
+    'modelName': 'BIRMM-RTU100N',
+    'onlineState': '1',
+    'onlineStateName': '在线',
+    'position': 'test001位置',
+    'ts': '2021-12-29',
+    'valid': '1',
+    'watchType': '燃气泄漏',
+    'wellCode': 'test001',
+    'wellId': '4453'
+  }
+]
+const deviceStaticsList = [
+  {
+    'deptName': '燃气集团总公司',
+    'deviceCount': '11',
+    'deptid': '24'
+  },
+  {
+    'deptName': '煤气公司',
+    'deviceCount': '2',
+    'deptid': '24'
+  },
+  {
+    'deptName': '电力公司',
+    'deviceCount': '11',
+    'deptid': '24'
+  }
+
+]
+const deviceOnlineList = [
+  {
+    'deviceType': '井盖状态监测仪',
+    'online': 1,
+    'offline': 9
+  },
+  {
+    'deviceType': '燃气智能监测终端',
+    'online': 1,
+    'offline': 2
+  },
+  {
+    'deviceType': '管盯',
+    'online': 1,
+    'offline': 6
+  }
+
+]
+const deviceOfflineList = [
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  }
+]
+module.exports = [
+  // mock get all routes form server
+  {
+    url: '/device/list',
+    type: 'get',
+    response: _ => {
+      return {
+        code: 200,
+        data: deviceList,
+        message: '请求成功',
+        success: true
+      }
+    }
+  },
+  {
+    url: '/statics/deviceStaticsByDept',
+    type: 'get',
+    response: _ => {
+      return {
+        code: 200,
+        data: deviceStaticsList,
+        message: '请求成功',
+        success: true
+      }
+    }
+  },
+  {
+    url: '/statics/deviceCountByOnlineStatus',
+    type: 'get',
+    response: _ => {
+      return {
+        code: 200,
+        data: deviceOnlineList,
+        message: '请求成功',
+        success: true
+      }
+    }
+  },
+  {
+    url: '/device/offlineListPage',
+    type: 'get',
+    response: _ => {
+      return {
+        code: 200,
+        'total': 120,
+        data: deviceOfflineList,
+        message: '请求成功',
+        success: true
+      }
+    }
+  }
+]
diff --git a/mock/index.js b/mock/index.js
index 6646246..0e60e80 100644
--- a/mock/index.js
+++ b/mock/index.js
@@ -12,6 +12,7 @@
 const dashboard = require('./biz/dashboard')
 const search = require('./remote-search')
 const overview = require('./biz/overview')
+const device = require('./deviceManage/device')
 const deviceType = require('./deviceManage/deviceType')
 const deviceModels = require('./deviceManage/deviceModels')
 const deviceImei = require('./deviceManage/deviceImei')
@@ -42,7 +43,8 @@
   ...tenantConfig,
   ...deptPermission,
   ...tenant,
-  ...warningRule
+  ...warningRule,
+  ...device
 ]
 
 // for front mock
diff --git a/src/api/data/dataStatics.js b/src/api/data/dataStatics.js
index b96a05e..04f756a 100644
--- a/src/api/data/dataStatics.js
+++ b/src/api/data/dataStatics.js
@@ -11,6 +11,14 @@
     params
   })
 }
+// 离线设备列表
+export function offlineList(params) {
+  return request({
+    url: 'device/offlineListPage',
+    method: 'get',
+    params
+  })
+}
 // 根据权属单位统计井数量
 export function wellStaticByDept(params) {
   return request({
@@ -38,6 +46,15 @@
   })
 }
 
+// 离线设备数量
+export function deviceStaticsByOnline(params) {
+  return request({
+    url: 'statics/deviceCountByOnlineStatus',
+    method: 'get',
+    params
+  })
+}
+
 // 根据权属单位统计设备数量
 export function deviceStaticsByDept(params) {
   return request({
diff --git a/src/components/NormalTable/index.vue b/src/components/NormalTable/index.vue
index 9e23838..3fdc6db 100644
--- a/src/components/NormalTable/index.vue
+++ b/src/components/NormalTable/index.vue
@@ -69,7 +69,7 @@
         </el-col>
       </el-row>
       <!-- 表格正文-->
-      <el-table v-loading="listLoading" :data="data" :size="size" class="table" row-class-name="small-row-class" border @selection-change="selectionChange" @row-click="rowClick">
+      <el-table v-loading="listLoading" :height="height" :data="data" :size="size" class="table" row-class-name="small-row-class" border @selection-change="selectionChange" @row-click="rowClick">
         <!--需要加在表最前方的插槽-->
         <slot name="preColumns" />
         <!--序号列-->
@@ -141,6 +141,12 @@
         return []
       }
     }, // 数据
+    height: {
+      type: Number,
+      default: function() {
+        return []
+      }
+    },
     total: {
       type: Number,
       default: 0
diff --git a/src/views/deviceManage/components/listDigData.vue b/src/views/deviceManage/components/listDigData.vue
new file mode 100644
index 0000000..5a2b795
--- /dev/null
+++ b/src/views/deviceManage/components/listDigData.vue
@@ -0,0 +1,19 @@
+<template>
+  <div>开挖监测仪</div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+
+    }
+  },
+  methods: {
+    initData: function(row = null) {
+      console.log(row, '===')
+    }
+  }
+}
+</script>
+
diff --git a/src/views/deviceManage/components/listGasData.vue b/src/views/deviceManage/components/listGasData.vue
new file mode 100644
index 0000000..ccbaa8b
--- /dev/null
+++ b/src/views/deviceManage/components/listGasData.vue
@@ -0,0 +1,18 @@
+<template>
+  <div>燃气智能监测终端</div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+
+    }
+  },
+  methods: {
+    initData: function(row = null) {
+      console.log(row, '===')
+    }
+  }
+}
+</script>
diff --git a/src/views/deviceManage/components/listHarmfulData.vue b/src/views/deviceManage/components/listHarmfulData.vue
new file mode 100644
index 0000000..687f9bc
--- /dev/null
+++ b/src/views/deviceManage/components/listHarmfulData.vue
@@ -0,0 +1,18 @@
+<template>
+  <div>有害气体监测仪</div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+
+    }
+  },
+  methods: {
+    initData: function(row = null) {
+      console.log(row, '===')
+    }
+  }
+}
+</script>
diff --git a/src/views/deviceManage/components/listLiquidData.vue b/src/views/deviceManage/components/listLiquidData.vue
new file mode 100644
index 0000000..f279ee9
--- /dev/null
+++ b/src/views/deviceManage/components/listLiquidData.vue
@@ -0,0 +1,18 @@
+<template>
+  <div>液位监测仪</div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+
+    }
+  },
+  methods: {
+    initData: function(row = null) {
+      console.log(row, '===')
+    }
+  }
+}
+</script>
diff --git a/src/views/deviceManage/components/listLiquidGasData.vue b/src/views/deviceManage/components/listLiquidGasData.vue
new file mode 100644
index 0000000..6f5535e
--- /dev/null
+++ b/src/views/deviceManage/components/listLiquidGasData.vue
@@ -0,0 +1,18 @@
+<template>
+  <div>燃气智能终端（一体化）</div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+
+    }
+  },
+  methods: {
+    initData: function(row = null) {
+      console.log(row, '===')
+    }
+  }
+}
+</script>
diff --git a/src/views/deviceManage/components/listNoiseData.vue b/src/views/deviceManage/components/listNoiseData.vue
new file mode 100644
index 0000000..7dad007
--- /dev/null
+++ b/src/views/deviceManage/components/listNoiseData.vue
@@ -0,0 +1,18 @@
+<template>
+  <div>噪声记录仪</div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+
+    }
+  },
+  methods: {
+    initData: function(row = null) {
+      console.log(row, '===')
+    }
+  }
+}
+</script>
diff --git a/src/views/deviceManage/components/listTempData.vue b/src/views/deviceManage/components/listTempData.vue
new file mode 100644
index 0000000..f7548b5
--- /dev/null
+++ b/src/views/deviceManage/components/listTempData.vue
@@ -0,0 +1,18 @@
+<template>
+  <div>温湿度监测仪</div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+
+    }
+  },
+  methods: {
+    initData: function(row = null) {
+      console.log(row, '===')
+    }
+  }
+}
+</script>
diff --git a/src/views/deviceManage/components/listTubeData.vue b/src/views/deviceManage/components/listTubeData.vue
new file mode 100644
index 0000000..94f1772
--- /dev/null
+++ b/src/views/deviceManage/components/listTubeData.vue
@@ -0,0 +1,18 @@
+<template>
+  <div>管盯</div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+
+    }
+  },
+  methods: {
+    initData: function(row = null) {
+      console.log(row, '===')
+    }
+  }
+}
+</script>
diff --git a/src/views/deviceManage/components/listWellData.vue b/src/views/deviceManage/components/listWellData.vue
new file mode 100644
index 0000000..7a6436d
--- /dev/null
+++ b/src/views/deviceManage/components/listWellData.vue
@@ -0,0 +1,18 @@
+<template>
+  <div>井盖状态监测仪</div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+
+    }
+  },
+  methods: {
+    initData: function(row = null) {
+      console.log(row, '===')
+    }
+  }
+}
+</script>
diff --git a/src/views/deviceManage/components/listWellLocaData.vue b/src/views/deviceManage/components/listWellLocaData.vue
new file mode 100644
index 0000000..f784671
--- /dev/null
+++ b/src/views/deviceManage/components/listWellLocaData.vue
@@ -0,0 +1,18 @@
+<template>
+  <div>井盖定位监测仪</div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+
+    }
+  },
+  methods: {
+    initData: function(row = null) {
+      console.log(row, '===')
+    }
+  }
+}
+</script>
diff --git a/src/views/deviceManage/detailDevice.vue b/src/views/deviceManage/detailDevice.vue
index eefc549..8285ee7 100644
--- a/src/views/deviceManage/detailDevice.vue
+++ b/src/views/deviceManage/detailDevice.vue
@@ -3,110 +3,114 @@
     <el-form ref="dataForm" :model="deviceForm" label-well-code="right" label-width="100px">
       <el-row :gutter="20">
         <el-col :span="12">
-          <el-form-item label="设备名称" prop="deviceName">
-            <el-input v-model="deviceForm.deviceName" type="text" placeholder="未知" disabled />
+          <el-form-item label="设备编号" prop="devcode">
+            <el-input v-model.trim="deviceForm.devcode" disabled type="text" placeholder="必填" />
           </el-form-item>
         </el-col>
         <el-col :span="12">
-          <el-form-item label="设备编号" prop="devcode">
-            <el-input v-model="deviceForm.devcode" type="text" placeholder="未知" disabled />
+          <el-form-item label="安装日期" prop="installDate">
+            <el-date-picker
+              v-model.trim="deviceForm.installDate"
+              disabled
+              type="date"
+              value-format="yyyy-MM-dd"
+              placeholder="选择日期"
+            />
           </el-form-item>
         </el-col>
       </el-row>
       <el-row :gutter="20">
         <el-col :span="12">
           <el-form-item label="设备类型" prop="deviceType">
-            <el-input v-model="deviceForm.deviceTypeName" type="text" placeholder="未知" disabled />
+            <el-select v-model="deviceForm.deviceType" disabled placeholder="请选择设备类型">
+              <el-option
+                v-for="item in deviceTypeList"
+                :key="item.value"
+                :label="item.name"
+                :value="item.value"
+              />
+            </el-select>
           </el-form-item>
         </el-col>
         <el-col :span="12">
           <el-form-item label="设备型号" prop="modelId">
-            <el-input v-model="deviceForm.modelName" type="text" placeholder="未知" disabled />
-          </el-form-item>
-        </el-col>
-      </el-row>
-      <el-row :gutter="20">
-        <el-col :span="12">
-          <el-form-item label="在线状态" prop="wellCode">
-            <el-input v-model="deviceForm.onlineStateName" type="text" placeholder="未知" disabled />
-          </el-form-item>
-        </el-col>
-        <el-col :span="12">
-          <el-form-item label="权属单位" prop="concenCode">
-            <el-input v-model="deviceForm.deptName" type="text" placeholder="未知" disabled />
+            <el-select v-model="deviceForm.modelId" disabled placeholder="请选择设备型号">
+              <el-option
+                v-for="item in deviceModelList"
+                :key="item.value"
+                :label="item.name"
+                :value="item.value"
+              />
+            </el-select>
           </el-form-item>
         </el-col>
       </el-row>
       <el-row :gutter="20">
         <el-col :span="12">
           <el-form-item label="井编号" prop="wellCode">
-            <el-input v-model="deviceForm.wellCode" type="text" placeholder="未知" disabled />
+            <el-input v-model.trim="deviceForm.wellCode" disabled type="text" placeholder="必填" />
           </el-form-item>
         </el-col>
         <el-col :span="12">
-          <el-form-item label="布防状态" prop="bfztName">
-            <el-input v-model="deviceForm.bfztName" type="text" placeholder="未知" disabled />
-          </el-form-item>
-        </el-col>
-      </el-row>
-      <el-row :gutter="20">
-        <el-col :span="24">
-          <el-form-item label="位置" prop="position">
-            <el-input v-model="deviceForm.position" type="text" placeholder="未知" disabled />
-          </el-form-item>
-        </el-col>
-      </el-row>
-      <el-row :gutter="20">
-        <el-col :span="12">
-          <el-form-item label="安装日期" prop="installDate">
-            <el-input v-model="deviceForm.installDate" type="text" placeholder="未知" disabled />
-          </el-form-item>
-        </el-col>
-        <el-col :span="12">
-          <el-form-item label="集中器编号" prop="concenCode">
-            <el-input v-model="deviceForm.concenCode" type="text" placeholder="未知" disabled />
-          </el-form-item>
-        </el-col>
-      </el-row>
-      <el-row :gutter="20">
-        <el-col :span="12">
-          <el-form-item label="设备安装高度" prop="installHeight">
-            <el-input v-model="deviceForm.installHeight" type="text" placeholder="未知" disabled />
+          <el-form-item label="安装高度(m)" prop="installHeight">
+            <el-input v-model.trim="deviceForm.installHeight" disabled type="text" placeholder="必填" />
           </el-form-item>
         </el-col>
       </el-row>
     </el-form>
+    <component :is="cmpName" ref="deviceTypeDialog" @watchChild="fetchDeviceList" />
   </el-dialog>
 </template>
 
 <script>
+import listDigData from './components/listDigData'
+import listGasData from './components/listGasData'
+import listHarmfulData from './components/listHarmfulData'
+import listLiquidData from './components/listLiquidData'
+import listLiquidGasData from './components/listLiquidGasData'
+import listNoiseData from './components/listNoiseData'
+import listTempData from './components/listTempData'
+import listTubeData from './components/listTubeData'
+import listWellData from './components/listWellData'
+import listWellLocaData from './components/listWellLocaData'
 
 export default {
-  name: 'DetailDevice',
+  name: 'EditDevice',
+  components: {
+    listDigData,
+    listGasData,
+    listHarmfulData,
+    listLiquidData,
+    listLiquidGasData,
+    listNoiseData,
+    listTempData,
+    listTubeData,
+    listWellData,
+    listWellLocaData
+  },
   data() {
     return {
       dialogFormVisible: false, // 对话框是否显示
-      dialogStatus: '', // 对话框类型：create,update
+      dialogStatus: '', // 对话框类型：create,update,detail
+      cmpName: '', // 组件名称
       deviceForm: {
         id: '',
         deviceName: '',
         devcode: '',
-        deviceTypeName: '',
+        deviceType: '',
         wellCode: '',
-        modelName: '',
+        modelId: '',
         installDate: '',
         concenCode: '',
-        installHeight: '',
-        onlineStateName: '',
-        deptName: '',
-        bfztName: '',
-        position: ''
+        installHeight: ''
       }, // 表单
       textMap: {
         update: '编辑',
         create: '新增',
         detail: '详情'
-      } // 表头显示标题z
+      }, // 表头显示标题
+      deviceTypeList: null, // 设备类型列表
+      deviceModelList: null // 设备型号列表
     }
   },
   methods: {
@@ -114,20 +118,57 @@
     initDialog: function(dialogStatus, dialogFormVisible, row = null) {
       this.dialogStatus = dialogStatus
       this.dialogFormVisible = dialogFormVisible
+      this.resetForm()
       this.deviceForm = {
         id: row.id,
         deviceName: row.deviceName,
         devcode: row.devcode,
-        deviceTypeName: row.deviceTypeName,
+        deviceType: row.deviceType,
+        modelId: row.modelId,
         wellCode: row.wellCode,
-        modelName: row.modelName,
-        installDate: row.installDate,
         concenCode: row.concenCode,
-        installHeight: row.installHeight,
-        onlineStateName: row.onlineStateName,
-        deptName: row.deptName,
-        bfztName: row.bfztName,
-        position: row.position
+        installDate: row.installDate,
+        installHeight: row.installHeight
+      }
+      // 展示相对应的设备列表组件
+      if (row.deviceTypeName === '开挖监测仪') {
+        this.cmpName = 'list-dig-data'
+      } else if (row.deviceTypeName === '井盖状态监测仪') {
+        this.cmpName = 'list-well-data'
+      } else if (row.deviceTypeName === '液位监测仪') {
+        this.cmpName = 'list-liquid-data'
+      } else if (row.deviceTypeName === '燃气智能监测终端') {
+        this.cmpName = 'list-gas-data'
+      } else if (row.deviceTypeName === '噪声记录仪') {
+        this.cmpName = 'list-noise-data'
+      } else if (row.deviceTypeName === '有害气体监测仪') {
+        this.cmpName = 'list-harmful-data'
+      } else if (row.deviceTypeName === '温湿度监测仪') {
+        this.cmpName = 'list-temp-data'
+      } else if (row.deviceTypeName === '井盖定位监测仪') {
+        this.cmpName = 'list-well-loca-data'
+      } else if (row.deviceTypeName === '燃气智能终端（一体化）') {
+        this.cmpName = 'list-liquid-gas-data'
+      } else if (row.deviceTypeName === '管盯') {
+        this.cmpName = 'list-tube-data'
+      }
+      setTimeout(() => {
+        this.$refs.deviceTypeDialog.initData(row)
+      }, 100)
+    },
+    fetchDeviceList() {},
+    // 重置表单
+    resetForm() {
+      this.deviceForm = {
+        id: '',
+        deviceName: '',
+        devcode: '',
+        deviceType: '',
+        wellCode: '',
+        modelId: '',
+        installDate: '',
+        concenCode: '',
+        installHeight: ''
       }
     }
   }
@@ -138,4 +179,7 @@
   .el-select{
     width: 100%;
   }
+  .el-date-editor{
+    width: 100%;
+  }
 </style>
diff --git a/src/views/deviceManage/editDevice.vue b/src/views/deviceManage/editDevice.vue
index 41c6907..0ae2cab 100644
--- a/src/views/deviceManage/editDevice.vue
+++ b/src/views/deviceManage/editDevice.vue
@@ -65,7 +65,7 @@
       <el-row :gutter="20">
         <el-col :span="12">
           <el-form-item label="安装高度(m)" prop="installHeight">
-            <el-input v-model.trim="deviceForm.installHeight" :disabled="isDetailMode" type="text" placeholder="非必填" />
+            <el-input v-model.trim="deviceForm.installHeight" :disabled="isDetailMode" type="text" placeholder="必填" />
           </el-form-item>
         </el-col>
       </el-row>
@@ -116,7 +116,8 @@
         wellCode: [{ required: true, message: '井编号不能为空', trigger: ['blur', 'change'] }],
         deviceType: [{ required: true, message: '设备类型必选', trigger: ['blur', 'change'] }],
         modelId: [{ required: true, message: '设备型号必选', trigger: ['blur', 'change'] }],
-        installDate: [{ required: true, message: '安装日期必选', trigger: ['blur', 'change'] }]
+        installDate: [{ required: true, message: '安装日期必选', trigger: ['blur', 'change'] }],
+        installHeight: [{ required: true, message: '设备安装高度不能为空', trigger: ['blur', 'change'] }]
       }, // 前端校验规则
       isEditMode: false, // 编辑模式
       isDetailMode: false // 详情模式
diff --git a/src/views/deviceManage/listDevice.vue b/src/views/deviceManage/listDevice.vue
index 2303523..623cf06 100644
--- a/src/views/deviceManage/listDevice.vue
+++ b/src/views/deviceManage/listDevice.vue
@@ -76,7 +76,6 @@
       </el-row>
       <el-table v-loading="listLoading" :data="list" class="table" border @selection-change="handleSelectionChange">
         <el-table-column v-if="hasPerm('/device/delete')" align="center" type="selection" width="55" />
-        <el-table-column :index="indexMethod" align="center" type="index" />
         <el-table-column v-for="column in columns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
           <template slot-scope="scope">
             <span v-if="column.type!='Button'" :class="column.class">{{ scope.row[column.value] }}</span>
@@ -272,7 +271,7 @@
       this.$refs.editdevice.initDialog('update', this.dialogFormVisible, row)
     },
     detail(row) {
-      this.$refs.editdevice.initDialog('detail', true, row)
+      this.$refs.detaildevice.initDialog('detail', true, row)
     },
     // 删除设备
     del() {
@@ -367,7 +366,7 @@
         this.listQuery.offset = 1
       }
       getDeviceList(this.listQuery).then(response => {
-        this.list = response.data.rows
+        this.list = response.data
         this.total = parseInt(response.data.total)
         this.listLoading = false
       })
diff --git a/src/views/deviceStatics/components/deviceCountByDept.vue b/src/views/deviceStatics/components/deviceCountByDept.vue
index 6dc7375..0d4a211 100644
--- a/src/views/deviceStatics/components/deviceCountByDept.vue
+++ b/src/views/deviceStatics/components/deviceCountByDept.vue
@@ -1,77 +1,81 @@
 <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-row>
+    <el-col>
+      <el-card shadow="never">
+        <el-col>
+          <el-col :span="18">
+            <div class="flagBoxStyle">
+              <div class="flagStyle" />
+              <div>各单位安装设备情况统计</div>
+            </div>
+          </el-col>
+          <el-col :span="6">
+            <el-select
+              v-model="listQuery.deviceType"
+              size="small"
+              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-col>
-      </el-row>
-    </div>
-    <div>
-      <ve-histogram :data="chartData" :grid="grid" :extend="extend" :settings="chartSettings" />
-    </div>
-  </div>
+
+        <el-col>
+          <ve-bar
+            :data="chartData"
+            :grid="grid"
+            :extend="extend"
+            :settings="chartSettings"
+          />
+        </el-col>
+      </el-card>
+    </el-col>
+  </el-row>
 </template>
 
 <script>
 import { getDeviceType } from '@/api/device/device'
 import { deviceStaticsByDept } from '@/api/data/dataStatics'
+
 export default {
   name: 'DeviceCountByDept',
   data() {
-    this.extend = {
-      xAxis: {
-        axisLabel: {
-          rotate: 30,
-          margin: 30,
-          textStyle: {
-            align: 'center'
-          }
-        }
-      },
-      series: {
-        label: { show: true, position: 'top' },
-        barMaxWidth: 35 // 最大柱宽度
-      }
-    }
-    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: '',
+      extend: {
+        series: {
+          label: { show: true, position: 'right' },
+          barMaxWidth: 35 // 最大柱宽度
+        }
+      },
+      grid: {
+        right: 60
+      },
+      // title: {
+      //   text: '井类型数量统计'
+      // },
+      chartSettings: {
+        itemStyle: {
+          'barCategoryGap': 5
+        },
+        barWidth: 15,
+        labelMap: {
+          'deptName': '权属单位',
+          'deviceCount': '设备数量（个）'
+        },
+        dimension: ['deptName'],
+        metrics: ['deviceCount']
+      },
       chartData: {
         columns: ['deptName', 'deviceCount'],
         rows: []
@@ -85,25 +89,11 @@
   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
-        }
+      getDeviceType().then(response => {
+        this.deviceTypeList = response.data
       })
     },
     fetchData() {
-      console.log('fetchData')
       deviceStaticsByDept(this.listQuery).then(response => {
         this.chartData.rows = response.data
       })
@@ -113,16 +103,19 @@
 </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*/
-  }
+.flagBoxStyle {
+  display: flex;
+  margin-bottom: 20px;
+}
+.flagBoxStyle div:nth-child(2){
+  line-height: 30px;
+  font-weight: 600;
+}
+.flagStyle {
+  width: 4px;
+  height: 30px;
+  margin-right: 6px;
+  background: rgb(64 121 242);
+}
 </style>
+

diff --git a/mock/deviceManage/device.js b/mock/deviceManage/device.js
new file mode 100644
index 0000000..1f0650d
--- /dev/null
+++ b/mock/deviceManage/device.js
@@ -0,0 +1,672 @@
+const deviceList = [
+  {
+    'bfzt': '0',
+    'bfztName': '撤防',
+    'communication': '3,4',
+    'concenCode': '',
+    'concenId': '',
+    'deptName': '燃气集团总公司',
+    'deptid': '24',
+    'installHeight': '123',
+    'devcode': '342021000001',
+    'deviceName': '',
+    'deviceType': '12',
+    'deviceTypeName': '开挖监测仪',
+    'id': '1476131375777120257',
+    'installDate': '2021-12-29',
+    'modelId': '19',
+    'modelName': 'BIRMM-RTU100N',
+    'onlineState': '1',
+    'onlineStateName': '在线',
+    'position': 'test001位置',
+    'ts': '2021-12-29',
+    'valid': '1',
+    'watchType': '燃气泄漏',
+    'wellCode': 'test001',
+    'wellId': '4453'
+  },
+  {
+    'bfzt': '0',
+    'bfztName': '撤防',
+    'communication': '3,4',
+    'concenCode': '',
+    'concenId': '',
+    'deptName': '燃气集团总公司',
+    'deptid': '24',
+    'installHeight': '123',
+    'devcode': '342021000001',
+    'deviceName': '',
+    'deviceType': '12',
+    'deviceTypeName': '井盖状态监测仪',
+    'id': '1476131375777120257',
+    'installDate': '2021-12-29',
+    'modelId': '19',
+    'modelName': 'BIRMM-RTU100N',
+    'onlineState': '1',
+    'onlineStateName': '在线',
+    'position': 'test001位置',
+    'ts': '2021-12-29',
+    'valid': '1',
+    'watchType': '燃气泄漏',
+    'wellCode': 'test001',
+    'wellId': '4453'
+  },
+  {
+    'bfzt': '0',
+    'bfztName': '撤防',
+    'communication': '3,4',
+    'concenCode': '',
+    'concenId': '',
+    'deptName': '燃气集团总公司',
+    'deptid': '24',
+    'installHeight': '123',
+    'devcode': '342021000001',
+    'deviceName': '',
+    'deviceType': '12',
+    'deviceTypeName': '液位监测仪',
+    'id': '1476131375777120257',
+    'installDate': '2021-12-29',
+    'modelId': '19',
+    'modelName': 'BIRMM-RTU100N',
+    'onlineState': '1',
+    'onlineStateName': '在线',
+    'position': 'test001位置',
+    'ts': '2021-12-29',
+    'valid': '1',
+    'watchType': '燃气泄漏',
+    'wellCode': 'test001',
+    'wellId': '4453'
+  },
+  {
+    'bfzt': '0',
+    'bfztName': '撤防',
+    'communication': '3,4',
+    'concenCode': '',
+    'concenId': '',
+    'deptName': '燃气集团总公司',
+    'deptid': '24',
+    'installHeight': '123',
+    'devcode': '342021000001',
+    'deviceName': '',
+    'deviceType': '12',
+    'deviceTypeName': '燃气智能监测终端',
+    'id': '1476131375777120257',
+    'installDate': '2021-12-29',
+    'modelId': '19',
+    'modelName': 'BIRMM-RTU100N',
+    'onlineState': '1',
+    'onlineStateName': '在线',
+    'position': 'test001位置',
+    'ts': '2021-12-29',
+    'valid': '1',
+    'watchType': '燃气泄漏',
+    'wellCode': 'test001',
+    'wellId': '4453'
+  },
+  {
+    'bfzt': '0',
+    'bfztName': '撤防',
+    'communication': '3,4',
+    'concenCode': '',
+    'concenId': '',
+    'deptName': '燃气集团总公司',
+    'deptid': '24',
+    'installHeight': '123',
+    'devcode': '342021000001',
+    'deviceName': '',
+    'deviceType': '12',
+    'deviceTypeName': '噪声记录仪',
+    'id': '1476131375777120257',
+    'installDate': '2021-12-29',
+    'modelId': '19',
+    'modelName': 'BIRMM-RTU100N',
+    'onlineState': '1',
+    'onlineStateName': '在线',
+    'position': 'test001位置',
+    'ts': '2021-12-29',
+    'valid': '1',
+    'watchType': '燃气泄漏',
+    'wellCode': 'test001',
+    'wellId': '4453'
+  },
+  {
+    'bfzt': '0',
+    'bfztName': '撤防',
+    'communication': '3,4',
+    'concenCode': '',
+    'concenId': '',
+    'deptName': '燃气集团总公司',
+    'deptid': '24',
+    'installHeight': '123',
+    'devcode': '342021000001',
+    'deviceName': '',
+    'deviceType': '12',
+    'deviceTypeName': '有害气体监测仪',
+    'id': '1476131375777120257',
+    'installDate': '2021-12-29',
+    'modelId': '19',
+    'modelName': 'BIRMM-RTU100N',
+    'onlineState': '1',
+    'onlineStateName': '在线',
+    'position': 'test001位置',
+    'ts': '2021-12-29',
+    'valid': '1',
+    'watchType': '燃气泄漏',
+    'wellCode': 'test001',
+    'wellId': '4453'
+  },
+  {
+    'bfzt': '0',
+    'bfztName': '撤防',
+    'communication': '3,4',
+    'concenCode': '',
+    'concenId': '',
+    'deptName': '燃气集团总公司',
+    'deptid': '24',
+    'installHeight': '123',
+    'devcode': '342021000001',
+    'deviceName': '',
+    'deviceType': '12',
+    'deviceTypeName': '温湿度监测仪',
+    'id': '1476131375777120257',
+    'installDate': '2021-12-29',
+    'modelId': '19',
+    'modelName': 'BIRMM-RTU100N',
+    'onlineState': '1',
+    'onlineStateName': '在线',
+    'position': 'test001位置',
+    'ts': '2021-12-29',
+    'valid': '1',
+    'watchType': '燃气泄漏',
+    'wellCode': 'test001',
+    'wellId': '4453'
+  },
+  {
+    'bfzt': '0',
+    'bfztName': '撤防',
+    'communication': '3,4',
+    'concenCode': '',
+    'concenId': '',
+    'deptName': '燃气集团总公司',
+    'deptid': '24',
+    'installHeight': '123',
+    'devcode': '342021000001',
+    'deviceName': '',
+    'deviceType': '12',
+    'deviceTypeName': '井盖定位监测仪',
+    'id': '1476131375777120257',
+    'installDate': '2021-12-29',
+    'modelId': '19',
+    'modelName': 'BIRMM-RTU100N',
+    'onlineState': '1',
+    'onlineStateName': '在线',
+    'position': 'test001位置',
+    'ts': '2021-12-29',
+    'valid': '1',
+    'watchType': '燃气泄漏',
+    'wellCode': 'test001',
+    'wellId': '4453'
+  },
+  {
+    'bfzt': '0',
+    'bfztName': '撤防',
+    'communication': '3,4',
+    'concenCode': '',
+    'concenId': '',
+    'deptName': '燃气集团总公司',
+    'deptid': '24',
+    'installHeight': '123',
+    'devcode': '342021000001',
+    'deviceName': '',
+    'deviceType': '12',
+    'deviceTypeName': '燃气智能终端（一体化）',
+    'id': '1476131375777120257',
+    'installDate': '2021-12-29',
+    'modelId': '19',
+    'modelName': 'BIRMM-RTU100N',
+    'onlineState': '1',
+    'onlineStateName': '在线',
+    'position': 'test001位置',
+    'ts': '2021-12-29',
+    'valid': '1',
+    'watchType': '燃气泄漏',
+    'wellCode': 'test001',
+    'wellId': '4453'
+  },
+  {
+    'bfzt': '0',
+    'bfztName': '撤防',
+    'communication': '3,4',
+    'concenCode': '',
+    'concenId': '',
+    'deptName': '燃气集团总公司',
+    'deptid': '24',
+    'installHeight': '123',
+    'devcode': '342021000001',
+    'deviceName': '',
+    'deviceType': '12',
+    'deviceTypeName': '管盯',
+    'id': '1476131375777120257',
+    'installDate': '2021-12-29',
+    'modelId': '19',
+    'modelName': 'BIRMM-RTU100N',
+    'onlineState': '1',
+    'onlineStateName': '在线',
+    'position': 'test001位置',
+    'ts': '2021-12-29',
+    'valid': '1',
+    'watchType': '燃气泄漏',
+    'wellCode': 'test001',
+    'wellId': '4453'
+  }
+]
+const deviceStaticsList = [
+  {
+    'deptName': '燃气集团总公司',
+    'deviceCount': '11',
+    'deptid': '24'
+  },
+  {
+    'deptName': '煤气公司',
+    'deviceCount': '2',
+    'deptid': '24'
+  },
+  {
+    'deptName': '电力公司',
+    'deviceCount': '11',
+    'deptid': '24'
+  }
+
+]
+const deviceOnlineList = [
+  {
+    'deviceType': '井盖状态监测仪',
+    'online': 1,
+    'offline': 9
+  },
+  {
+    'deviceType': '燃气智能监测终端',
+    'online': 1,
+    'offline': 2
+  },
+  {
+    'deviceType': '管盯',
+    'online': 1,
+    'offline': 6
+  }
+
+]
+const deviceOfflineList = [
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  }
+]
+module.exports = [
+  // mock get all routes form server
+  {
+    url: '/device/list',
+    type: 'get',
+    response: _ => {
+      return {
+        code: 200,
+        data: deviceList,
+        message: '请求成功',
+        success: true
+      }
+    }
+  },
+  {
+    url: '/statics/deviceStaticsByDept',
+    type: 'get',
+    response: _ => {
+      return {
+        code: 200,
+        data: deviceStaticsList,
+        message: '请求成功',
+        success: true
+      }
+    }
+  },
+  {
+    url: '/statics/deviceCountByOnlineStatus',
+    type: 'get',
+    response: _ => {
+      return {
+        code: 200,
+        data: deviceOnlineList,
+        message: '请求成功',
+        success: true
+      }
+    }
+  },
+  {
+    url: '/device/offlineListPage',
+    type: 'get',
+    response: _ => {
+      return {
+        code: 200,
+        'total': 120,
+        data: deviceOfflineList,
+        message: '请求成功',
+        success: true
+      }
+    }
+  }
+]
diff --git a/mock/index.js b/mock/index.js
index 6646246..0e60e80 100644
--- a/mock/index.js
+++ b/mock/index.js
@@ -12,6 +12,7 @@
 const dashboard = require('./biz/dashboard')
 const search = require('./remote-search')
 const overview = require('./biz/overview')
+const device = require('./deviceManage/device')
 const deviceType = require('./deviceManage/deviceType')
 const deviceModels = require('./deviceManage/deviceModels')
 const deviceImei = require('./deviceManage/deviceImei')
@@ -42,7 +43,8 @@
   ...tenantConfig,
   ...deptPermission,
   ...tenant,
-  ...warningRule
+  ...warningRule,
+  ...device
 ]
 
 // for front mock
diff --git a/src/api/data/dataStatics.js b/src/api/data/dataStatics.js
index b96a05e..04f756a 100644
--- a/src/api/data/dataStatics.js
+++ b/src/api/data/dataStatics.js
@@ -11,6 +11,14 @@
     params
   })
 }
+// 离线设备列表
+export function offlineList(params) {
+  return request({
+    url: 'device/offlineListPage',
+    method: 'get',
+    params
+  })
+}
 // 根据权属单位统计井数量
 export function wellStaticByDept(params) {
   return request({
@@ -38,6 +46,15 @@
   })
 }
 
+// 离线设备数量
+export function deviceStaticsByOnline(params) {
+  return request({
+    url: 'statics/deviceCountByOnlineStatus',
+    method: 'get',
+    params
+  })
+}
+
 // 根据权属单位统计设备数量
 export function deviceStaticsByDept(params) {
   return request({
diff --git a/src/components/NormalTable/index.vue b/src/components/NormalTable/index.vue
index 9e23838..3fdc6db 100644
--- a/src/components/NormalTable/index.vue
+++ b/src/components/NormalTable/index.vue
@@ -69,7 +69,7 @@
         </el-col>
       </el-row>
       <!-- 表格正文-->
-      <el-table v-loading="listLoading" :data="data" :size="size" class="table" row-class-name="small-row-class" border @selection-change="selectionChange" @row-click="rowClick">
+      <el-table v-loading="listLoading" :height="height" :data="data" :size="size" class="table" row-class-name="small-row-class" border @selection-change="selectionChange" @row-click="rowClick">
         <!--需要加在表最前方的插槽-->
         <slot name="preColumns" />
         <!--序号列-->
@@ -141,6 +141,12 @@
         return []
       }
     }, // 数据
+    height: {
+      type: Number,
+      default: function() {
+        return []
+      }
+    },
     total: {
       type: Number,
       default: 0
diff --git a/src/views/deviceManage/components/listDigData.vue b/src/views/deviceManage/components/listDigData.vue
new file mode 100644
index 0000000..5a2b795
--- /dev/null
+++ b/src/views/deviceManage/components/listDigData.vue
@@ -0,0 +1,19 @@
+<template>
+  <div>开挖监测仪</div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+
+    }
+  },
+  methods: {
+    initData: function(row = null) {
+      console.log(row, '===')
+    }
+  }
+}
+</script>
+
diff --git a/src/views/deviceManage/components/listGasData.vue b/src/views/deviceManage/components/listGasData.vue
new file mode 100644
index 0000000..ccbaa8b
--- /dev/null
+++ b/src/views/deviceManage/components/listGasData.vue
@@ -0,0 +1,18 @@
+<template>
+  <div>燃气智能监测终端</div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+
+    }
+  },
+  methods: {
+    initData: function(row = null) {
+      console.log(row, '===')
+    }
+  }
+}
+</script>
diff --git a/src/views/deviceManage/components/listHarmfulData.vue b/src/views/deviceManage/components/listHarmfulData.vue
new file mode 100644
index 0000000..687f9bc
--- /dev/null
+++ b/src/views/deviceManage/components/listHarmfulData.vue
@@ -0,0 +1,18 @@
+<template>
+  <div>有害气体监测仪</div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+
+    }
+  },
+  methods: {
+    initData: function(row = null) {
+      console.log(row, '===')
+    }
+  }
+}
+</script>
diff --git a/src/views/deviceManage/components/listLiquidData.vue b/src/views/deviceManage/components/listLiquidData.vue
new file mode 100644
index 0000000..f279ee9
--- /dev/null
+++ b/src/views/deviceManage/components/listLiquidData.vue
@@ -0,0 +1,18 @@
+<template>
+  <div>液位监测仪</div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+
+    }
+  },
+  methods: {
+    initData: function(row = null) {
+      console.log(row, '===')
+    }
+  }
+}
+</script>
diff --git a/src/views/deviceManage/components/listLiquidGasData.vue b/src/views/deviceManage/components/listLiquidGasData.vue
new file mode 100644
index 0000000..6f5535e
--- /dev/null
+++ b/src/views/deviceManage/components/listLiquidGasData.vue
@@ -0,0 +1,18 @@
+<template>
+  <div>燃气智能终端（一体化）</div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+
+    }
+  },
+  methods: {
+    initData: function(row = null) {
+      console.log(row, '===')
+    }
+  }
+}
+</script>
diff --git a/src/views/deviceManage/components/listNoiseData.vue b/src/views/deviceManage/components/listNoiseData.vue
new file mode 100644
index 0000000..7dad007
--- /dev/null
+++ b/src/views/deviceManage/components/listNoiseData.vue
@@ -0,0 +1,18 @@
+<template>
+  <div>噪声记录仪</div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+
+    }
+  },
+  methods: {
+    initData: function(row = null) {
+      console.log(row, '===')
+    }
+  }
+}
+</script>
diff --git a/src/views/deviceManage/components/listTempData.vue b/src/views/deviceManage/components/listTempData.vue
new file mode 100644
index 0000000..f7548b5
--- /dev/null
+++ b/src/views/deviceManage/components/listTempData.vue
@@ -0,0 +1,18 @@
+<template>
+  <div>温湿度监测仪</div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+
+    }
+  },
+  methods: {
+    initData: function(row = null) {
+      console.log(row, '===')
+    }
+  }
+}
+</script>
diff --git a/src/views/deviceManage/components/listTubeData.vue b/src/views/deviceManage/components/listTubeData.vue
new file mode 100644
index 0000000..94f1772
--- /dev/null
+++ b/src/views/deviceManage/components/listTubeData.vue
@@ -0,0 +1,18 @@
+<template>
+  <div>管盯</div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+
+    }
+  },
+  methods: {
+    initData: function(row = null) {
+      console.log(row, '===')
+    }
+  }
+}
+</script>
diff --git a/src/views/deviceManage/components/listWellData.vue b/src/views/deviceManage/components/listWellData.vue
new file mode 100644
index 0000000..7a6436d
--- /dev/null
+++ b/src/views/deviceManage/components/listWellData.vue
@@ -0,0 +1,18 @@
+<template>
+  <div>井盖状态监测仪</div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+
+    }
+  },
+  methods: {
+    initData: function(row = null) {
+      console.log(row, '===')
+    }
+  }
+}
+</script>
diff --git a/src/views/deviceManage/components/listWellLocaData.vue b/src/views/deviceManage/components/listWellLocaData.vue
new file mode 100644
index 0000000..f784671
--- /dev/null
+++ b/src/views/deviceManage/components/listWellLocaData.vue
@@ -0,0 +1,18 @@
+<template>
+  <div>井盖定位监测仪</div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+
+    }
+  },
+  methods: {
+    initData: function(row = null) {
+      console.log(row, '===')
+    }
+  }
+}
+</script>
diff --git a/src/views/deviceManage/detailDevice.vue b/src/views/deviceManage/detailDevice.vue
index eefc549..8285ee7 100644
--- a/src/views/deviceManage/detailDevice.vue
+++ b/src/views/deviceManage/detailDevice.vue
@@ -3,110 +3,114 @@
     <el-form ref="dataForm" :model="deviceForm" label-well-code="right" label-width="100px">
       <el-row :gutter="20">
         <el-col :span="12">
-          <el-form-item label="设备名称" prop="deviceName">
-            <el-input v-model="deviceForm.deviceName" type="text" placeholder="未知" disabled />
+          <el-form-item label="设备编号" prop="devcode">
+            <el-input v-model.trim="deviceForm.devcode" disabled type="text" placeholder="必填" />
           </el-form-item>
         </el-col>
         <el-col :span="12">
-          <el-form-item label="设备编号" prop="devcode">
-            <el-input v-model="deviceForm.devcode" type="text" placeholder="未知" disabled />
+          <el-form-item label="安装日期" prop="installDate">
+            <el-date-picker
+              v-model.trim="deviceForm.installDate"
+              disabled
+              type="date"
+              value-format="yyyy-MM-dd"
+              placeholder="选择日期"
+            />
           </el-form-item>
         </el-col>
       </el-row>
       <el-row :gutter="20">
         <el-col :span="12">
           <el-form-item label="设备类型" prop="deviceType">
-            <el-input v-model="deviceForm.deviceTypeName" type="text" placeholder="未知" disabled />
+            <el-select v-model="deviceForm.deviceType" disabled placeholder="请选择设备类型">
+              <el-option
+                v-for="item in deviceTypeList"
+                :key="item.value"
+                :label="item.name"
+                :value="item.value"
+              />
+            </el-select>
           </el-form-item>
         </el-col>
         <el-col :span="12">
           <el-form-item label="设备型号" prop="modelId">
-            <el-input v-model="deviceForm.modelName" type="text" placeholder="未知" disabled />
-          </el-form-item>
-        </el-col>
-      </el-row>
-      <el-row :gutter="20">
-        <el-col :span="12">
-          <el-form-item label="在线状态" prop="wellCode">
-            <el-input v-model="deviceForm.onlineStateName" type="text" placeholder="未知" disabled />
-          </el-form-item>
-        </el-col>
-        <el-col :span="12">
-          <el-form-item label="权属单位" prop="concenCode">
-            <el-input v-model="deviceForm.deptName" type="text" placeholder="未知" disabled />
+            <el-select v-model="deviceForm.modelId" disabled placeholder="请选择设备型号">
+              <el-option
+                v-for="item in deviceModelList"
+                :key="item.value"
+                :label="item.name"
+                :value="item.value"
+              />
+            </el-select>
           </el-form-item>
         </el-col>
       </el-row>
       <el-row :gutter="20">
         <el-col :span="12">
           <el-form-item label="井编号" prop="wellCode">
-            <el-input v-model="deviceForm.wellCode" type="text" placeholder="未知" disabled />
+            <el-input v-model.trim="deviceForm.wellCode" disabled type="text" placeholder="必填" />
           </el-form-item>
         </el-col>
         <el-col :span="12">
-          <el-form-item label="布防状态" prop="bfztName">
-            <el-input v-model="deviceForm.bfztName" type="text" placeholder="未知" disabled />
-          </el-form-item>
-        </el-col>
-      </el-row>
-      <el-row :gutter="20">
-        <el-col :span="24">
-          <el-form-item label="位置" prop="position">
-            <el-input v-model="deviceForm.position" type="text" placeholder="未知" disabled />
-          </el-form-item>
-        </el-col>
-      </el-row>
-      <el-row :gutter="20">
-        <el-col :span="12">
-          <el-form-item label="安装日期" prop="installDate">
-            <el-input v-model="deviceForm.installDate" type="text" placeholder="未知" disabled />
-          </el-form-item>
-        </el-col>
-        <el-col :span="12">
-          <el-form-item label="集中器编号" prop="concenCode">
-            <el-input v-model="deviceForm.concenCode" type="text" placeholder="未知" disabled />
-          </el-form-item>
-        </el-col>
-      </el-row>
-      <el-row :gutter="20">
-        <el-col :span="12">
-          <el-form-item label="设备安装高度" prop="installHeight">
-            <el-input v-model="deviceForm.installHeight" type="text" placeholder="未知" disabled />
+          <el-form-item label="安装高度(m)" prop="installHeight">
+            <el-input v-model.trim="deviceForm.installHeight" disabled type="text" placeholder="必填" />
           </el-form-item>
         </el-col>
       </el-row>
     </el-form>
+    <component :is="cmpName" ref="deviceTypeDialog" @watchChild="fetchDeviceList" />
   </el-dialog>
 </template>
 
 <script>
+import listDigData from './components/listDigData'
+import listGasData from './components/listGasData'
+import listHarmfulData from './components/listHarmfulData'
+import listLiquidData from './components/listLiquidData'
+import listLiquidGasData from './components/listLiquidGasData'
+import listNoiseData from './components/listNoiseData'
+import listTempData from './components/listTempData'
+import listTubeData from './components/listTubeData'
+import listWellData from './components/listWellData'
+import listWellLocaData from './components/listWellLocaData'
 
 export default {
-  name: 'DetailDevice',
+  name: 'EditDevice',
+  components: {
+    listDigData,
+    listGasData,
+    listHarmfulData,
+    listLiquidData,
+    listLiquidGasData,
+    listNoiseData,
+    listTempData,
+    listTubeData,
+    listWellData,
+    listWellLocaData
+  },
   data() {
     return {
       dialogFormVisible: false, // 对话框是否显示
-      dialogStatus: '', // 对话框类型：create,update
+      dialogStatus: '', // 对话框类型：create,update,detail
+      cmpName: '', // 组件名称
       deviceForm: {
         id: '',
         deviceName: '',
         devcode: '',
-        deviceTypeName: '',
+        deviceType: '',
         wellCode: '',
-        modelName: '',
+        modelId: '',
         installDate: '',
         concenCode: '',
-        installHeight: '',
-        onlineStateName: '',
-        deptName: '',
-        bfztName: '',
-        position: ''
+        installHeight: ''
       }, // 表单
       textMap: {
         update: '编辑',
         create: '新增',
         detail: '详情'
-      } // 表头显示标题z
+      }, // 表头显示标题
+      deviceTypeList: null, // 设备类型列表
+      deviceModelList: null // 设备型号列表
     }
   },
   methods: {
@@ -114,20 +118,57 @@
     initDialog: function(dialogStatus, dialogFormVisible, row = null) {
       this.dialogStatus = dialogStatus
       this.dialogFormVisible = dialogFormVisible
+      this.resetForm()
       this.deviceForm = {
         id: row.id,
         deviceName: row.deviceName,
         devcode: row.devcode,
-        deviceTypeName: row.deviceTypeName,
+        deviceType: row.deviceType,
+        modelId: row.modelId,
         wellCode: row.wellCode,
-        modelName: row.modelName,
-        installDate: row.installDate,
         concenCode: row.concenCode,
-        installHeight: row.installHeight,
-        onlineStateName: row.onlineStateName,
-        deptName: row.deptName,
-        bfztName: row.bfztName,
-        position: row.position
+        installDate: row.installDate,
+        installHeight: row.installHeight
+      }
+      // 展示相对应的设备列表组件
+      if (row.deviceTypeName === '开挖监测仪') {
+        this.cmpName = 'list-dig-data'
+      } else if (row.deviceTypeName === '井盖状态监测仪') {
+        this.cmpName = 'list-well-data'
+      } else if (row.deviceTypeName === '液位监测仪') {
+        this.cmpName = 'list-liquid-data'
+      } else if (row.deviceTypeName === '燃气智能监测终端') {
+        this.cmpName = 'list-gas-data'
+      } else if (row.deviceTypeName === '噪声记录仪') {
+        this.cmpName = 'list-noise-data'
+      } else if (row.deviceTypeName === '有害气体监测仪') {
+        this.cmpName = 'list-harmful-data'
+      } else if (row.deviceTypeName === '温湿度监测仪') {
+        this.cmpName = 'list-temp-data'
+      } else if (row.deviceTypeName === '井盖定位监测仪') {
+        this.cmpName = 'list-well-loca-data'
+      } else if (row.deviceTypeName === '燃气智能终端（一体化）') {
+        this.cmpName = 'list-liquid-gas-data'
+      } else if (row.deviceTypeName === '管盯') {
+        this.cmpName = 'list-tube-data'
+      }
+      setTimeout(() => {
+        this.$refs.deviceTypeDialog.initData(row)
+      }, 100)
+    },
+    fetchDeviceList() {},
+    // 重置表单
+    resetForm() {
+      this.deviceForm = {
+        id: '',
+        deviceName: '',
+        devcode: '',
+        deviceType: '',
+        wellCode: '',
+        modelId: '',
+        installDate: '',
+        concenCode: '',
+        installHeight: ''
       }
     }
   }
@@ -138,4 +179,7 @@
   .el-select{
     width: 100%;
   }
+  .el-date-editor{
+    width: 100%;
+  }
 </style>
diff --git a/src/views/deviceManage/editDevice.vue b/src/views/deviceManage/editDevice.vue
index 41c6907..0ae2cab 100644
--- a/src/views/deviceManage/editDevice.vue
+++ b/src/views/deviceManage/editDevice.vue
@@ -65,7 +65,7 @@
       <el-row :gutter="20">
         <el-col :span="12">
           <el-form-item label="安装高度(m)" prop="installHeight">
-            <el-input v-model.trim="deviceForm.installHeight" :disabled="isDetailMode" type="text" placeholder="非必填" />
+            <el-input v-model.trim="deviceForm.installHeight" :disabled="isDetailMode" type="text" placeholder="必填" />
           </el-form-item>
         </el-col>
       </el-row>
@@ -116,7 +116,8 @@
         wellCode: [{ required: true, message: '井编号不能为空', trigger: ['blur', 'change'] }],
         deviceType: [{ required: true, message: '设备类型必选', trigger: ['blur', 'change'] }],
         modelId: [{ required: true, message: '设备型号必选', trigger: ['blur', 'change'] }],
-        installDate: [{ required: true, message: '安装日期必选', trigger: ['blur', 'change'] }]
+        installDate: [{ required: true, message: '安装日期必选', trigger: ['blur', 'change'] }],
+        installHeight: [{ required: true, message: '设备安装高度不能为空', trigger: ['blur', 'change'] }]
       }, // 前端校验规则
       isEditMode: false, // 编辑模式
       isDetailMode: false // 详情模式
diff --git a/src/views/deviceManage/listDevice.vue b/src/views/deviceManage/listDevice.vue
index 2303523..623cf06 100644
--- a/src/views/deviceManage/listDevice.vue
+++ b/src/views/deviceManage/listDevice.vue
@@ -76,7 +76,6 @@
       </el-row>
       <el-table v-loading="listLoading" :data="list" class="table" border @selection-change="handleSelectionChange">
         <el-table-column v-if="hasPerm('/device/delete')" align="center" type="selection" width="55" />
-        <el-table-column :index="indexMethod" align="center" type="index" />
         <el-table-column v-for="column in columns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
           <template slot-scope="scope">
             <span v-if="column.type!='Button'" :class="column.class">{{ scope.row[column.value] }}</span>
@@ -272,7 +271,7 @@
       this.$refs.editdevice.initDialog('update', this.dialogFormVisible, row)
     },
     detail(row) {
-      this.$refs.editdevice.initDialog('detail', true, row)
+      this.$refs.detaildevice.initDialog('detail', true, row)
     },
     // 删除设备
     del() {
@@ -367,7 +366,7 @@
         this.listQuery.offset = 1
       }
       getDeviceList(this.listQuery).then(response => {
-        this.list = response.data.rows
+        this.list = response.data
         this.total = parseInt(response.data.total)
         this.listLoading = false
       })
diff --git a/src/views/deviceStatics/components/deviceCountByDept.vue b/src/views/deviceStatics/components/deviceCountByDept.vue
index 6dc7375..0d4a211 100644
--- a/src/views/deviceStatics/components/deviceCountByDept.vue
+++ b/src/views/deviceStatics/components/deviceCountByDept.vue
@@ -1,77 +1,81 @@
 <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-row>
+    <el-col>
+      <el-card shadow="never">
+        <el-col>
+          <el-col :span="18">
+            <div class="flagBoxStyle">
+              <div class="flagStyle" />
+              <div>各单位安装设备情况统计</div>
+            </div>
+          </el-col>
+          <el-col :span="6">
+            <el-select
+              v-model="listQuery.deviceType"
+              size="small"
+              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-col>
-      </el-row>
-    </div>
-    <div>
-      <ve-histogram :data="chartData" :grid="grid" :extend="extend" :settings="chartSettings" />
-    </div>
-  </div>
+
+        <el-col>
+          <ve-bar
+            :data="chartData"
+            :grid="grid"
+            :extend="extend"
+            :settings="chartSettings"
+          />
+        </el-col>
+      </el-card>
+    </el-col>
+  </el-row>
 </template>
 
 <script>
 import { getDeviceType } from '@/api/device/device'
 import { deviceStaticsByDept } from '@/api/data/dataStatics'
+
 export default {
   name: 'DeviceCountByDept',
   data() {
-    this.extend = {
-      xAxis: {
-        axisLabel: {
-          rotate: 30,
-          margin: 30,
-          textStyle: {
-            align: 'center'
-          }
-        }
-      },
-      series: {
-        label: { show: true, position: 'top' },
-        barMaxWidth: 35 // 最大柱宽度
-      }
-    }
-    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: '',
+      extend: {
+        series: {
+          label: { show: true, position: 'right' },
+          barMaxWidth: 35 // 最大柱宽度
+        }
+      },
+      grid: {
+        right: 60
+      },
+      // title: {
+      //   text: '井类型数量统计'
+      // },
+      chartSettings: {
+        itemStyle: {
+          'barCategoryGap': 5
+        },
+        barWidth: 15,
+        labelMap: {
+          'deptName': '权属单位',
+          'deviceCount': '设备数量（个）'
+        },
+        dimension: ['deptName'],
+        metrics: ['deviceCount']
+      },
       chartData: {
         columns: ['deptName', 'deviceCount'],
         rows: []
@@ -85,25 +89,11 @@
   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
-        }
+      getDeviceType().then(response => {
+        this.deviceTypeList = response.data
       })
     },
     fetchData() {
-      console.log('fetchData')
       deviceStaticsByDept(this.listQuery).then(response => {
         this.chartData.rows = response.data
       })
@@ -113,16 +103,19 @@
 </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*/
-  }
+.flagBoxStyle {
+  display: flex;
+  margin-bottom: 20px;
+}
+.flagBoxStyle div:nth-child(2){
+  line-height: 30px;
+  font-weight: 600;
+}
+.flagStyle {
+  width: 4px;
+  height: 30px;
+  margin-right: 6px;
+  background: rgb(64 121 242);
+}
 </style>
+
diff --git a/src/views/deviceStatics/components/deviceCountByOffline.vue b/src/views/deviceStatics/components/deviceCountByOffline.vue
new file mode 100644
index 0000000..ba81bec
--- /dev/null
+++ b/src/views/deviceStatics/components/deviceCountByOffline.vue
@@ -0,0 +1,139 @@
+<template>
+  <el-row>
+    <el-col>
+      <el-card shadow="never">
+        <el-col>
+          <div class="flagBoxStyle">
+            <div class="flagStyle" />
+            <div>离线分析</div>
+          </div>
+        </el-col>
+        <el-col>
+          <div>
+            <span class="titleStyle">离线设备</span>
+            <span class="countStyle">12</span>
+            <span>个</span>
+          </div>
+        </el-col>
+        <el-col>
+          <el-col :span="16">
+            <ve-histogram
+              :data="chartData"
+              :grid="grid"
+              :extend="extend"
+              :settings="chartSettings"
+            />
+          </el-col>
+          <el-col :span="8">
+            <ve-pie
+              :data="chartDataPie"
+              :extend="extendPie"
+            />
+          </el-col>
+        </el-col>
+      </el-card>
+    </el-col>
+  </el-row>
+</template>
+
+<script>
+import { deviceStaticsByOnline } from '@/api/data/dataStatics'
+export default {
+  name: 'DeviceCountByOffline',
+  data() {
+    return {
+      online: 0,
+      offline: 0,
+      // 饼状图
+      extendPie: {
+        series: {
+          label: { show: true, position: 'outside', formatter: '{b}:{c}' },
+          radius: '45%'
+        }
+      },
+      chartDataPie: {
+        columns: ['onlineStatus', 'deviceCount'],
+        rows: []
+      },
+      // 柱状图
+      extend: {
+        xAxis: {
+          axisLabel: {
+            rotate: 30,
+            margin: 30,
+            textStyle: {
+              align: 'center'
+            }
+          }
+        },
+        series: {
+          label: { show: true, position: 'top' },
+          barMaxWidth: 35 // 最大柱宽度
+        }
+      },
+      grid: {
+        right: 60
+      },
+      chartSettings: {
+        itemStyle: {
+          'barCategoryGap': 5
+        },
+        barWidth: 15,
+        labelMap: {
+          'deviceType': '权属单位',
+          'offline': '设备数量（个）'
+        },
+        dimension: ['deviceType'],
+        metrics: ['offline']
+      },
+      chartData: {
+        columns: ['deviceType', 'offline'],
+        rows: []
+      }
+    }
+  },
+  created() {
+    this.fetchDeviceType()
+  },
+  methods: {
+    fetchDeviceType() {
+      deviceStaticsByOnline().then(response => {
+        response.data.forEach((item) => {
+          this.online += item.online
+          this.offline += item.offline
+        })
+        this.chartData.rows = response.data
+        this.chartDataPie.rows = [
+          { 'onlineStatus': '在线', 'deviceCount': this.online },
+          { 'onlineStatus': '离线', 'deviceCount': this.offline }
+        ]
+      })
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.flagBoxStyle {
+  display: flex;
+  margin-bottom: 20px;
+}
+.flagBoxStyle div:nth-child(2){
+  line-height: 30px;
+  font-weight: 600;
+}
+.flagStyle {
+  width: 4px;
+  height: 30px;
+  margin-right: 6px;
+  background: rgb(64 121 242);
+}
+.titleStyle {
+  margin-left: 20px;
+  font-size: 12px;
+}
+.countStyle {
+  font-size: 20px;
+  margin: 0 10px;
+}
+</style>

diff --git a/mock/deviceManage/device.js b/mock/deviceManage/device.js
new file mode 100644
index 0000000..1f0650d
--- /dev/null
+++ b/mock/deviceManage/device.js
@@ -0,0 +1,672 @@
+const deviceList = [
+  {
+    'bfzt': '0',
+    'bfztName': '撤防',
+    'communication': '3,4',
+    'concenCode': '',
+    'concenId': '',
+    'deptName': '燃气集团总公司',
+    'deptid': '24',
+    'installHeight': '123',
+    'devcode': '342021000001',
+    'deviceName': '',
+    'deviceType': '12',
+    'deviceTypeName': '开挖监测仪',
+    'id': '1476131375777120257',
+    'installDate': '2021-12-29',
+    'modelId': '19',
+    'modelName': 'BIRMM-RTU100N',
+    'onlineState': '1',
+    'onlineStateName': '在线',
+    'position': 'test001位置',
+    'ts': '2021-12-29',
+    'valid': '1',
+    'watchType': '燃气泄漏',
+    'wellCode': 'test001',
+    'wellId': '4453'
+  },
+  {
+    'bfzt': '0',
+    'bfztName': '撤防',
+    'communication': '3,4',
+    'concenCode': '',
+    'concenId': '',
+    'deptName': '燃气集团总公司',
+    'deptid': '24',
+    'installHeight': '123',
+    'devcode': '342021000001',
+    'deviceName': '',
+    'deviceType': '12',
+    'deviceTypeName': '井盖状态监测仪',
+    'id': '1476131375777120257',
+    'installDate': '2021-12-29',
+    'modelId': '19',
+    'modelName': 'BIRMM-RTU100N',
+    'onlineState': '1',
+    'onlineStateName': '在线',
+    'position': 'test001位置',
+    'ts': '2021-12-29',
+    'valid': '1',
+    'watchType': '燃气泄漏',
+    'wellCode': 'test001',
+    'wellId': '4453'
+  },
+  {
+    'bfzt': '0',
+    'bfztName': '撤防',
+    'communication': '3,4',
+    'concenCode': '',
+    'concenId': '',
+    'deptName': '燃气集团总公司',
+    'deptid': '24',
+    'installHeight': '123',
+    'devcode': '342021000001',
+    'deviceName': '',
+    'deviceType': '12',
+    'deviceTypeName': '液位监测仪',
+    'id': '1476131375777120257',
+    'installDate': '2021-12-29',
+    'modelId': '19',
+    'modelName': 'BIRMM-RTU100N',
+    'onlineState': '1',
+    'onlineStateName': '在线',
+    'position': 'test001位置',
+    'ts': '2021-12-29',
+    'valid': '1',
+    'watchType': '燃气泄漏',
+    'wellCode': 'test001',
+    'wellId': '4453'
+  },
+  {
+    'bfzt': '0',
+    'bfztName': '撤防',
+    'communication': '3,4',
+    'concenCode': '',
+    'concenId': '',
+    'deptName': '燃气集团总公司',
+    'deptid': '24',
+    'installHeight': '123',
+    'devcode': '342021000001',
+    'deviceName': '',
+    'deviceType': '12',
+    'deviceTypeName': '燃气智能监测终端',
+    'id': '1476131375777120257',
+    'installDate': '2021-12-29',
+    'modelId': '19',
+    'modelName': 'BIRMM-RTU100N',
+    'onlineState': '1',
+    'onlineStateName': '在线',
+    'position': 'test001位置',
+    'ts': '2021-12-29',
+    'valid': '1',
+    'watchType': '燃气泄漏',
+    'wellCode': 'test001',
+    'wellId': '4453'
+  },
+  {
+    'bfzt': '0',
+    'bfztName': '撤防',
+    'communication': '3,4',
+    'concenCode': '',
+    'concenId': '',
+    'deptName': '燃气集团总公司',
+    'deptid': '24',
+    'installHeight': '123',
+    'devcode': '342021000001',
+    'deviceName': '',
+    'deviceType': '12',
+    'deviceTypeName': '噪声记录仪',
+    'id': '1476131375777120257',
+    'installDate': '2021-12-29',
+    'modelId': '19',
+    'modelName': 'BIRMM-RTU100N',
+    'onlineState': '1',
+    'onlineStateName': '在线',
+    'position': 'test001位置',
+    'ts': '2021-12-29',
+    'valid': '1',
+    'watchType': '燃气泄漏',
+    'wellCode': 'test001',
+    'wellId': '4453'
+  },
+  {
+    'bfzt': '0',
+    'bfztName': '撤防',
+    'communication': '3,4',
+    'concenCode': '',
+    'concenId': '',
+    'deptName': '燃气集团总公司',
+    'deptid': '24',
+    'installHeight': '123',
+    'devcode': '342021000001',
+    'deviceName': '',
+    'deviceType': '12',
+    'deviceTypeName': '有害气体监测仪',
+    'id': '1476131375777120257',
+    'installDate': '2021-12-29',
+    'modelId': '19',
+    'modelName': 'BIRMM-RTU100N',
+    'onlineState': '1',
+    'onlineStateName': '在线',
+    'position': 'test001位置',
+    'ts': '2021-12-29',
+    'valid': '1',
+    'watchType': '燃气泄漏',
+    'wellCode': 'test001',
+    'wellId': '4453'
+  },
+  {
+    'bfzt': '0',
+    'bfztName': '撤防',
+    'communication': '3,4',
+    'concenCode': '',
+    'concenId': '',
+    'deptName': '燃气集团总公司',
+    'deptid': '24',
+    'installHeight': '123',
+    'devcode': '342021000001',
+    'deviceName': '',
+    'deviceType': '12',
+    'deviceTypeName': '温湿度监测仪',
+    'id': '1476131375777120257',
+    'installDate': '2021-12-29',
+    'modelId': '19',
+    'modelName': 'BIRMM-RTU100N',
+    'onlineState': '1',
+    'onlineStateName': '在线',
+    'position': 'test001位置',
+    'ts': '2021-12-29',
+    'valid': '1',
+    'watchType': '燃气泄漏',
+    'wellCode': 'test001',
+    'wellId': '4453'
+  },
+  {
+    'bfzt': '0',
+    'bfztName': '撤防',
+    'communication': '3,4',
+    'concenCode': '',
+    'concenId': '',
+    'deptName': '燃气集团总公司',
+    'deptid': '24',
+    'installHeight': '123',
+    'devcode': '342021000001',
+    'deviceName': '',
+    'deviceType': '12',
+    'deviceTypeName': '井盖定位监测仪',
+    'id': '1476131375777120257',
+    'installDate': '2021-12-29',
+    'modelId': '19',
+    'modelName': 'BIRMM-RTU100N',
+    'onlineState': '1',
+    'onlineStateName': '在线',
+    'position': 'test001位置',
+    'ts': '2021-12-29',
+    'valid': '1',
+    'watchType': '燃气泄漏',
+    'wellCode': 'test001',
+    'wellId': '4453'
+  },
+  {
+    'bfzt': '0',
+    'bfztName': '撤防',
+    'communication': '3,4',
+    'concenCode': '',
+    'concenId': '',
+    'deptName': '燃气集团总公司',
+    'deptid': '24',
+    'installHeight': '123',
+    'devcode': '342021000001',
+    'deviceName': '',
+    'deviceType': '12',
+    'deviceTypeName': '燃气智能终端（一体化）',
+    'id': '1476131375777120257',
+    'installDate': '2021-12-29',
+    'modelId': '19',
+    'modelName': 'BIRMM-RTU100N',
+    'onlineState': '1',
+    'onlineStateName': '在线',
+    'position': 'test001位置',
+    'ts': '2021-12-29',
+    'valid': '1',
+    'watchType': '燃气泄漏',
+    'wellCode': 'test001',
+    'wellId': '4453'
+  },
+  {
+    'bfzt': '0',
+    'bfztName': '撤防',
+    'communication': '3,4',
+    'concenCode': '',
+    'concenId': '',
+    'deptName': '燃气集团总公司',
+    'deptid': '24',
+    'installHeight': '123',
+    'devcode': '342021000001',
+    'deviceName': '',
+    'deviceType': '12',
+    'deviceTypeName': '管盯',
+    'id': '1476131375777120257',
+    'installDate': '2021-12-29',
+    'modelId': '19',
+    'modelName': 'BIRMM-RTU100N',
+    'onlineState': '1',
+    'onlineStateName': '在线',
+    'position': 'test001位置',
+    'ts': '2021-12-29',
+    'valid': '1',
+    'watchType': '燃气泄漏',
+    'wellCode': 'test001',
+    'wellId': '4453'
+  }
+]
+const deviceStaticsList = [
+  {
+    'deptName': '燃气集团总公司',
+    'deviceCount': '11',
+    'deptid': '24'
+  },
+  {
+    'deptName': '煤气公司',
+    'deviceCount': '2',
+    'deptid': '24'
+  },
+  {
+    'deptName': '电力公司',
+    'deviceCount': '11',
+    'deptid': '24'
+  }
+
+]
+const deviceOnlineList = [
+  {
+    'deviceType': '井盖状态监测仪',
+    'online': 1,
+    'offline': 9
+  },
+  {
+    'deviceType': '燃气智能监测终端',
+    'online': 1,
+    'offline': 2
+  },
+  {
+    'deviceType': '管盯',
+    'online': 1,
+    'offline': 6
+  }
+
+]
+const deviceOfflineList = [
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  }
+]
+module.exports = [
+  // mock get all routes form server
+  {
+    url: '/device/list',
+    type: 'get',
+    response: _ => {
+      return {
+        code: 200,
+        data: deviceList,
+        message: '请求成功',
+        success: true
+      }
+    }
+  },
+  {
+    url: '/statics/deviceStaticsByDept',
+    type: 'get',
+    response: _ => {
+      return {
+        code: 200,
+        data: deviceStaticsList,
+        message: '请求成功',
+        success: true
+      }
+    }
+  },
+  {
+    url: '/statics/deviceCountByOnlineStatus',
+    type: 'get',
+    response: _ => {
+      return {
+        code: 200,
+        data: deviceOnlineList,
+        message: '请求成功',
+        success: true
+      }
+    }
+  },
+  {
+    url: '/device/offlineListPage',
+    type: 'get',
+    response: _ => {
+      return {
+        code: 200,
+        'total': 120,
+        data: deviceOfflineList,
+        message: '请求成功',
+        success: true
+      }
+    }
+  }
+]
diff --git a/mock/index.js b/mock/index.js
index 6646246..0e60e80 100644
--- a/mock/index.js
+++ b/mock/index.js
@@ -12,6 +12,7 @@
 const dashboard = require('./biz/dashboard')
 const search = require('./remote-search')
 const overview = require('./biz/overview')
+const device = require('./deviceManage/device')
 const deviceType = require('./deviceManage/deviceType')
 const deviceModels = require('./deviceManage/deviceModels')
 const deviceImei = require('./deviceManage/deviceImei')
@@ -42,7 +43,8 @@
   ...tenantConfig,
   ...deptPermission,
   ...tenant,
-  ...warningRule
+  ...warningRule,
+  ...device
 ]
 
 // for front mock
diff --git a/src/api/data/dataStatics.js b/src/api/data/dataStatics.js
index b96a05e..04f756a 100644
--- a/src/api/data/dataStatics.js
+++ b/src/api/data/dataStatics.js
@@ -11,6 +11,14 @@
     params
   })
 }
+// 离线设备列表
+export function offlineList(params) {
+  return request({
+    url: 'device/offlineListPage',
+    method: 'get',
+    params
+  })
+}
 // 根据权属单位统计井数量
 export function wellStaticByDept(params) {
   return request({
@@ -38,6 +46,15 @@
   })
 }
 
+// 离线设备数量
+export function deviceStaticsByOnline(params) {
+  return request({
+    url: 'statics/deviceCountByOnlineStatus',
+    method: 'get',
+    params
+  })
+}
+
 // 根据权属单位统计设备数量
 export function deviceStaticsByDept(params) {
   return request({
diff --git a/src/components/NormalTable/index.vue b/src/components/NormalTable/index.vue
index 9e23838..3fdc6db 100644
--- a/src/components/NormalTable/index.vue
+++ b/src/components/NormalTable/index.vue
@@ -69,7 +69,7 @@
         </el-col>
       </el-row>
       <!-- 表格正文-->
-      <el-table v-loading="listLoading" :data="data" :size="size" class="table" row-class-name="small-row-class" border @selection-change="selectionChange" @row-click="rowClick">
+      <el-table v-loading="listLoading" :height="height" :data="data" :size="size" class="table" row-class-name="small-row-class" border @selection-change="selectionChange" @row-click="rowClick">
         <!--需要加在表最前方的插槽-->
         <slot name="preColumns" />
         <!--序号列-->
@@ -141,6 +141,12 @@
         return []
       }
     }, // 数据
+    height: {
+      type: Number,
+      default: function() {
+        return []
+      }
+    },
     total: {
       type: Number,
       default: 0
diff --git a/src/views/deviceManage/components/listDigData.vue b/src/views/deviceManage/components/listDigData.vue
new file mode 100644
index 0000000..5a2b795
--- /dev/null
+++ b/src/views/deviceManage/components/listDigData.vue
@@ -0,0 +1,19 @@
+<template>
+  <div>开挖监测仪</div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+
+    }
+  },
+  methods: {
+    initData: function(row = null) {
+      console.log(row, '===')
+    }
+  }
+}
+</script>
+
diff --git a/src/views/deviceManage/components/listGasData.vue b/src/views/deviceManage/components/listGasData.vue
new file mode 100644
index 0000000..ccbaa8b
--- /dev/null
+++ b/src/views/deviceManage/components/listGasData.vue
@@ -0,0 +1,18 @@
+<template>
+  <div>燃气智能监测终端</div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+
+    }
+  },
+  methods: {
+    initData: function(row = null) {
+      console.log(row, '===')
+    }
+  }
+}
+</script>
diff --git a/src/views/deviceManage/components/listHarmfulData.vue b/src/views/deviceManage/components/listHarmfulData.vue
new file mode 100644
index 0000000..687f9bc
--- /dev/null
+++ b/src/views/deviceManage/components/listHarmfulData.vue
@@ -0,0 +1,18 @@
+<template>
+  <div>有害气体监测仪</div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+
+    }
+  },
+  methods: {
+    initData: function(row = null) {
+      console.log(row, '===')
+    }
+  }
+}
+</script>
diff --git a/src/views/deviceManage/components/listLiquidData.vue b/src/views/deviceManage/components/listLiquidData.vue
new file mode 100644
index 0000000..f279ee9
--- /dev/null
+++ b/src/views/deviceManage/components/listLiquidData.vue
@@ -0,0 +1,18 @@
+<template>
+  <div>液位监测仪</div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+
+    }
+  },
+  methods: {
+    initData: function(row = null) {
+      console.log(row, '===')
+    }
+  }
+}
+</script>
diff --git a/src/views/deviceManage/components/listLiquidGasData.vue b/src/views/deviceManage/components/listLiquidGasData.vue
new file mode 100644
index 0000000..6f5535e
--- /dev/null
+++ b/src/views/deviceManage/components/listLiquidGasData.vue
@@ -0,0 +1,18 @@
+<template>
+  <div>燃气智能终端（一体化）</div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+
+    }
+  },
+  methods: {
+    initData: function(row = null) {
+      console.log(row, '===')
+    }
+  }
+}
+</script>
diff --git a/src/views/deviceManage/components/listNoiseData.vue b/src/views/deviceManage/components/listNoiseData.vue
new file mode 100644
index 0000000..7dad007
--- /dev/null
+++ b/src/views/deviceManage/components/listNoiseData.vue
@@ -0,0 +1,18 @@
+<template>
+  <div>噪声记录仪</div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+
+    }
+  },
+  methods: {
+    initData: function(row = null) {
+      console.log(row, '===')
+    }
+  }
+}
+</script>
diff --git a/src/views/deviceManage/components/listTempData.vue b/src/views/deviceManage/components/listTempData.vue
new file mode 100644
index 0000000..f7548b5
--- /dev/null
+++ b/src/views/deviceManage/components/listTempData.vue
@@ -0,0 +1,18 @@
+<template>
+  <div>温湿度监测仪</div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+
+    }
+  },
+  methods: {
+    initData: function(row = null) {
+      console.log(row, '===')
+    }
+  }
+}
+</script>
diff --git a/src/views/deviceManage/components/listTubeData.vue b/src/views/deviceManage/components/listTubeData.vue
new file mode 100644
index 0000000..94f1772
--- /dev/null
+++ b/src/views/deviceManage/components/listTubeData.vue
@@ -0,0 +1,18 @@
+<template>
+  <div>管盯</div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+
+    }
+  },
+  methods: {
+    initData: function(row = null) {
+      console.log(row, '===')
+    }
+  }
+}
+</script>
diff --git a/src/views/deviceManage/components/listWellData.vue b/src/views/deviceManage/components/listWellData.vue
new file mode 100644
index 0000000..7a6436d
--- /dev/null
+++ b/src/views/deviceManage/components/listWellData.vue
@@ -0,0 +1,18 @@
+<template>
+  <div>井盖状态监测仪</div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+
+    }
+  },
+  methods: {
+    initData: function(row = null) {
+      console.log(row, '===')
+    }
+  }
+}
+</script>
diff --git a/src/views/deviceManage/components/listWellLocaData.vue b/src/views/deviceManage/components/listWellLocaData.vue
new file mode 100644
index 0000000..f784671
--- /dev/null
+++ b/src/views/deviceManage/components/listWellLocaData.vue
@@ -0,0 +1,18 @@
+<template>
+  <div>井盖定位监测仪</div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+
+    }
+  },
+  methods: {
+    initData: function(row = null) {
+      console.log(row, '===')
+    }
+  }
+}
+</script>
diff --git a/src/views/deviceManage/detailDevice.vue b/src/views/deviceManage/detailDevice.vue
index eefc549..8285ee7 100644
--- a/src/views/deviceManage/detailDevice.vue
+++ b/src/views/deviceManage/detailDevice.vue
@@ -3,110 +3,114 @@
     <el-form ref="dataForm" :model="deviceForm" label-well-code="right" label-width="100px">
       <el-row :gutter="20">
         <el-col :span="12">
-          <el-form-item label="设备名称" prop="deviceName">
-            <el-input v-model="deviceForm.deviceName" type="text" placeholder="未知" disabled />
+          <el-form-item label="设备编号" prop="devcode">
+            <el-input v-model.trim="deviceForm.devcode" disabled type="text" placeholder="必填" />
           </el-form-item>
         </el-col>
         <el-col :span="12">
-          <el-form-item label="设备编号" prop="devcode">
-            <el-input v-model="deviceForm.devcode" type="text" placeholder="未知" disabled />
+          <el-form-item label="安装日期" prop="installDate">
+            <el-date-picker
+              v-model.trim="deviceForm.installDate"
+              disabled
+              type="date"
+              value-format="yyyy-MM-dd"
+              placeholder="选择日期"
+            />
           </el-form-item>
         </el-col>
       </el-row>
       <el-row :gutter="20">
         <el-col :span="12">
           <el-form-item label="设备类型" prop="deviceType">
-            <el-input v-model="deviceForm.deviceTypeName" type="text" placeholder="未知" disabled />
+            <el-select v-model="deviceForm.deviceType" disabled placeholder="请选择设备类型">
+              <el-option
+                v-for="item in deviceTypeList"
+                :key="item.value"
+                :label="item.name"
+                :value="item.value"
+              />
+            </el-select>
           </el-form-item>
         </el-col>
         <el-col :span="12">
           <el-form-item label="设备型号" prop="modelId">
-            <el-input v-model="deviceForm.modelName" type="text" placeholder="未知" disabled />
-          </el-form-item>
-        </el-col>
-      </el-row>
-      <el-row :gutter="20">
-        <el-col :span="12">
-          <el-form-item label="在线状态" prop="wellCode">
-            <el-input v-model="deviceForm.onlineStateName" type="text" placeholder="未知" disabled />
-          </el-form-item>
-        </el-col>
-        <el-col :span="12">
-          <el-form-item label="权属单位" prop="concenCode">
-            <el-input v-model="deviceForm.deptName" type="text" placeholder="未知" disabled />
+            <el-select v-model="deviceForm.modelId" disabled placeholder="请选择设备型号">
+              <el-option
+                v-for="item in deviceModelList"
+                :key="item.value"
+                :label="item.name"
+                :value="item.value"
+              />
+            </el-select>
           </el-form-item>
         </el-col>
       </el-row>
       <el-row :gutter="20">
         <el-col :span="12">
           <el-form-item label="井编号" prop="wellCode">
-            <el-input v-model="deviceForm.wellCode" type="text" placeholder="未知" disabled />
+            <el-input v-model.trim="deviceForm.wellCode" disabled type="text" placeholder="必填" />
           </el-form-item>
         </el-col>
         <el-col :span="12">
-          <el-form-item label="布防状态" prop="bfztName">
-            <el-input v-model="deviceForm.bfztName" type="text" placeholder="未知" disabled />
-          </el-form-item>
-        </el-col>
-      </el-row>
-      <el-row :gutter="20">
-        <el-col :span="24">
-          <el-form-item label="位置" prop="position">
-            <el-input v-model="deviceForm.position" type="text" placeholder="未知" disabled />
-          </el-form-item>
-        </el-col>
-      </el-row>
-      <el-row :gutter="20">
-        <el-col :span="12">
-          <el-form-item label="安装日期" prop="installDate">
-            <el-input v-model="deviceForm.installDate" type="text" placeholder="未知" disabled />
-          </el-form-item>
-        </el-col>
-        <el-col :span="12">
-          <el-form-item label="集中器编号" prop="concenCode">
-            <el-input v-model="deviceForm.concenCode" type="text" placeholder="未知" disabled />
-          </el-form-item>
-        </el-col>
-      </el-row>
-      <el-row :gutter="20">
-        <el-col :span="12">
-          <el-form-item label="设备安装高度" prop="installHeight">
-            <el-input v-model="deviceForm.installHeight" type="text" placeholder="未知" disabled />
+          <el-form-item label="安装高度(m)" prop="installHeight">
+            <el-input v-model.trim="deviceForm.installHeight" disabled type="text" placeholder="必填" />
           </el-form-item>
         </el-col>
       </el-row>
     </el-form>
+    <component :is="cmpName" ref="deviceTypeDialog" @watchChild="fetchDeviceList" />
   </el-dialog>
 </template>
 
 <script>
+import listDigData from './components/listDigData'
+import listGasData from './components/listGasData'
+import listHarmfulData from './components/listHarmfulData'
+import listLiquidData from './components/listLiquidData'
+import listLiquidGasData from './components/listLiquidGasData'
+import listNoiseData from './components/listNoiseData'
+import listTempData from './components/listTempData'
+import listTubeData from './components/listTubeData'
+import listWellData from './components/listWellData'
+import listWellLocaData from './components/listWellLocaData'
 
 export default {
-  name: 'DetailDevice',
+  name: 'EditDevice',
+  components: {
+    listDigData,
+    listGasData,
+    listHarmfulData,
+    listLiquidData,
+    listLiquidGasData,
+    listNoiseData,
+    listTempData,
+    listTubeData,
+    listWellData,
+    listWellLocaData
+  },
   data() {
     return {
       dialogFormVisible: false, // 对话框是否显示
-      dialogStatus: '', // 对话框类型：create,update
+      dialogStatus: '', // 对话框类型：create,update,detail
+      cmpName: '', // 组件名称
       deviceForm: {
         id: '',
         deviceName: '',
         devcode: '',
-        deviceTypeName: '',
+        deviceType: '',
         wellCode: '',
-        modelName: '',
+        modelId: '',
         installDate: '',
         concenCode: '',
-        installHeight: '',
-        onlineStateName: '',
-        deptName: '',
-        bfztName: '',
-        position: ''
+        installHeight: ''
       }, // 表单
       textMap: {
         update: '编辑',
         create: '新增',
         detail: '详情'
-      } // 表头显示标题z
+      }, // 表头显示标题
+      deviceTypeList: null, // 设备类型列表
+      deviceModelList: null // 设备型号列表
     }
   },
   methods: {
@@ -114,20 +118,57 @@
     initDialog: function(dialogStatus, dialogFormVisible, row = null) {
       this.dialogStatus = dialogStatus
       this.dialogFormVisible = dialogFormVisible
+      this.resetForm()
       this.deviceForm = {
         id: row.id,
         deviceName: row.deviceName,
         devcode: row.devcode,
-        deviceTypeName: row.deviceTypeName,
+        deviceType: row.deviceType,
+        modelId: row.modelId,
         wellCode: row.wellCode,
-        modelName: row.modelName,
-        installDate: row.installDate,
         concenCode: row.concenCode,
-        installHeight: row.installHeight,
-        onlineStateName: row.onlineStateName,
-        deptName: row.deptName,
-        bfztName: row.bfztName,
-        position: row.position
+        installDate: row.installDate,
+        installHeight: row.installHeight
+      }
+      // 展示相对应的设备列表组件
+      if (row.deviceTypeName === '开挖监测仪') {
+        this.cmpName = 'list-dig-data'
+      } else if (row.deviceTypeName === '井盖状态监测仪') {
+        this.cmpName = 'list-well-data'
+      } else if (row.deviceTypeName === '液位监测仪') {
+        this.cmpName = 'list-liquid-data'
+      } else if (row.deviceTypeName === '燃气智能监测终端') {
+        this.cmpName = 'list-gas-data'
+      } else if (row.deviceTypeName === '噪声记录仪') {
+        this.cmpName = 'list-noise-data'
+      } else if (row.deviceTypeName === '有害气体监测仪') {
+        this.cmpName = 'list-harmful-data'
+      } else if (row.deviceTypeName === '温湿度监测仪') {
+        this.cmpName = 'list-temp-data'
+      } else if (row.deviceTypeName === '井盖定位监测仪') {
+        this.cmpName = 'list-well-loca-data'
+      } else if (row.deviceTypeName === '燃气智能终端（一体化）') {
+        this.cmpName = 'list-liquid-gas-data'
+      } else if (row.deviceTypeName === '管盯') {
+        this.cmpName = 'list-tube-data'
+      }
+      setTimeout(() => {
+        this.$refs.deviceTypeDialog.initData(row)
+      }, 100)
+    },
+    fetchDeviceList() {},
+    // 重置表单
+    resetForm() {
+      this.deviceForm = {
+        id: '',
+        deviceName: '',
+        devcode: '',
+        deviceType: '',
+        wellCode: '',
+        modelId: '',
+        installDate: '',
+        concenCode: '',
+        installHeight: ''
       }
     }
   }
@@ -138,4 +179,7 @@
   .el-select{
     width: 100%;
   }
+  .el-date-editor{
+    width: 100%;
+  }
 </style>
diff --git a/src/views/deviceManage/editDevice.vue b/src/views/deviceManage/editDevice.vue
index 41c6907..0ae2cab 100644
--- a/src/views/deviceManage/editDevice.vue
+++ b/src/views/deviceManage/editDevice.vue
@@ -65,7 +65,7 @@
       <el-row :gutter="20">
         <el-col :span="12">
           <el-form-item label="安装高度(m)" prop="installHeight">
-            <el-input v-model.trim="deviceForm.installHeight" :disabled="isDetailMode" type="text" placeholder="非必填" />
+            <el-input v-model.trim="deviceForm.installHeight" :disabled="isDetailMode" type="text" placeholder="必填" />
           </el-form-item>
         </el-col>
       </el-row>
@@ -116,7 +116,8 @@
         wellCode: [{ required: true, message: '井编号不能为空', trigger: ['blur', 'change'] }],
         deviceType: [{ required: true, message: '设备类型必选', trigger: ['blur', 'change'] }],
         modelId: [{ required: true, message: '设备型号必选', trigger: ['blur', 'change'] }],
-        installDate: [{ required: true, message: '安装日期必选', trigger: ['blur', 'change'] }]
+        installDate: [{ required: true, message: '安装日期必选', trigger: ['blur', 'change'] }],
+        installHeight: [{ required: true, message: '设备安装高度不能为空', trigger: ['blur', 'change'] }]
       }, // 前端校验规则
       isEditMode: false, // 编辑模式
       isDetailMode: false // 详情模式
diff --git a/src/views/deviceManage/listDevice.vue b/src/views/deviceManage/listDevice.vue
index 2303523..623cf06 100644
--- a/src/views/deviceManage/listDevice.vue
+++ b/src/views/deviceManage/listDevice.vue
@@ -76,7 +76,6 @@
       </el-row>
       <el-table v-loading="listLoading" :data="list" class="table" border @selection-change="handleSelectionChange">
         <el-table-column v-if="hasPerm('/device/delete')" align="center" type="selection" width="55" />
-        <el-table-column :index="indexMethod" align="center" type="index" />
         <el-table-column v-for="column in columns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
           <template slot-scope="scope">
             <span v-if="column.type!='Button'" :class="column.class">{{ scope.row[column.value] }}</span>
@@ -272,7 +271,7 @@
       this.$refs.editdevice.initDialog('update', this.dialogFormVisible, row)
     },
     detail(row) {
-      this.$refs.editdevice.initDialog('detail', true, row)
+      this.$refs.detaildevice.initDialog('detail', true, row)
     },
     // 删除设备
     del() {
@@ -367,7 +366,7 @@
         this.listQuery.offset = 1
       }
       getDeviceList(this.listQuery).then(response => {
-        this.list = response.data.rows
+        this.list = response.data
         this.total = parseInt(response.data.total)
         this.listLoading = false
       })
diff --git a/src/views/deviceStatics/components/deviceCountByDept.vue b/src/views/deviceStatics/components/deviceCountByDept.vue
index 6dc7375..0d4a211 100644
--- a/src/views/deviceStatics/components/deviceCountByDept.vue
+++ b/src/views/deviceStatics/components/deviceCountByDept.vue
@@ -1,77 +1,81 @@
 <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-row>
+    <el-col>
+      <el-card shadow="never">
+        <el-col>
+          <el-col :span="18">
+            <div class="flagBoxStyle">
+              <div class="flagStyle" />
+              <div>各单位安装设备情况统计</div>
+            </div>
+          </el-col>
+          <el-col :span="6">
+            <el-select
+              v-model="listQuery.deviceType"
+              size="small"
+              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-col>
-      </el-row>
-    </div>
-    <div>
-      <ve-histogram :data="chartData" :grid="grid" :extend="extend" :settings="chartSettings" />
-    </div>
-  </div>
+
+        <el-col>
+          <ve-bar
+            :data="chartData"
+            :grid="grid"
+            :extend="extend"
+            :settings="chartSettings"
+          />
+        </el-col>
+      </el-card>
+    </el-col>
+  </el-row>
 </template>
 
 <script>
 import { getDeviceType } from '@/api/device/device'
 import { deviceStaticsByDept } from '@/api/data/dataStatics'
+
 export default {
   name: 'DeviceCountByDept',
   data() {
-    this.extend = {
-      xAxis: {
-        axisLabel: {
-          rotate: 30,
-          margin: 30,
-          textStyle: {
-            align: 'center'
-          }
-        }
-      },
-      series: {
-        label: { show: true, position: 'top' },
-        barMaxWidth: 35 // 最大柱宽度
-      }
-    }
-    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: '',
+      extend: {
+        series: {
+          label: { show: true, position: 'right' },
+          barMaxWidth: 35 // 最大柱宽度
+        }
+      },
+      grid: {
+        right: 60
+      },
+      // title: {
+      //   text: '井类型数量统计'
+      // },
+      chartSettings: {
+        itemStyle: {
+          'barCategoryGap': 5
+        },
+        barWidth: 15,
+        labelMap: {
+          'deptName': '权属单位',
+          'deviceCount': '设备数量（个）'
+        },
+        dimension: ['deptName'],
+        metrics: ['deviceCount']
+      },
       chartData: {
         columns: ['deptName', 'deviceCount'],
         rows: []
@@ -85,25 +89,11 @@
   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
-        }
+      getDeviceType().then(response => {
+        this.deviceTypeList = response.data
       })
     },
     fetchData() {
-      console.log('fetchData')
       deviceStaticsByDept(this.listQuery).then(response => {
         this.chartData.rows = response.data
       })
@@ -113,16 +103,19 @@
 </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*/
-  }
+.flagBoxStyle {
+  display: flex;
+  margin-bottom: 20px;
+}
+.flagBoxStyle div:nth-child(2){
+  line-height: 30px;
+  font-weight: 600;
+}
+.flagStyle {
+  width: 4px;
+  height: 30px;
+  margin-right: 6px;
+  background: rgb(64 121 242);
+}
 </style>
+
diff --git a/src/views/deviceStatics/components/deviceCountByOffline.vue b/src/views/deviceStatics/components/deviceCountByOffline.vue
new file mode 100644
index 0000000..ba81bec
--- /dev/null
+++ b/src/views/deviceStatics/components/deviceCountByOffline.vue
@@ -0,0 +1,139 @@
+<template>
+  <el-row>
+    <el-col>
+      <el-card shadow="never">
+        <el-col>
+          <div class="flagBoxStyle">
+            <div class="flagStyle" />
+            <div>离线分析</div>
+          </div>
+        </el-col>
+        <el-col>
+          <div>
+            <span class="titleStyle">离线设备</span>
+            <span class="countStyle">12</span>
+            <span>个</span>
+          </div>
+        </el-col>
+        <el-col>
+          <el-col :span="16">
+            <ve-histogram
+              :data="chartData"
+              :grid="grid"
+              :extend="extend"
+              :settings="chartSettings"
+            />
+          </el-col>
+          <el-col :span="8">
+            <ve-pie
+              :data="chartDataPie"
+              :extend="extendPie"
+            />
+          </el-col>
+        </el-col>
+      </el-card>
+    </el-col>
+  </el-row>
+</template>
+
+<script>
+import { deviceStaticsByOnline } from '@/api/data/dataStatics'
+export default {
+  name: 'DeviceCountByOffline',
+  data() {
+    return {
+      online: 0,
+      offline: 0,
+      // 饼状图
+      extendPie: {
+        series: {
+          label: { show: true, position: 'outside', formatter: '{b}:{c}' },
+          radius: '45%'
+        }
+      },
+      chartDataPie: {
+        columns: ['onlineStatus', 'deviceCount'],
+        rows: []
+      },
+      // 柱状图
+      extend: {
+        xAxis: {
+          axisLabel: {
+            rotate: 30,
+            margin: 30,
+            textStyle: {
+              align: 'center'
+            }
+          }
+        },
+        series: {
+          label: { show: true, position: 'top' },
+          barMaxWidth: 35 // 最大柱宽度
+        }
+      },
+      grid: {
+        right: 60
+      },
+      chartSettings: {
+        itemStyle: {
+          'barCategoryGap': 5
+        },
+        barWidth: 15,
+        labelMap: {
+          'deviceType': '权属单位',
+          'offline': '设备数量（个）'
+        },
+        dimension: ['deviceType'],
+        metrics: ['offline']
+      },
+      chartData: {
+        columns: ['deviceType', 'offline'],
+        rows: []
+      }
+    }
+  },
+  created() {
+    this.fetchDeviceType()
+  },
+  methods: {
+    fetchDeviceType() {
+      deviceStaticsByOnline().then(response => {
+        response.data.forEach((item) => {
+          this.online += item.online
+          this.offline += item.offline
+        })
+        this.chartData.rows = response.data
+        this.chartDataPie.rows = [
+          { 'onlineStatus': '在线', 'deviceCount': this.online },
+          { 'onlineStatus': '离线', 'deviceCount': this.offline }
+        ]
+      })
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.flagBoxStyle {
+  display: flex;
+  margin-bottom: 20px;
+}
+.flagBoxStyle div:nth-child(2){
+  line-height: 30px;
+  font-weight: 600;
+}
+.flagStyle {
+  width: 4px;
+  height: 30px;
+  margin-right: 6px;
+  background: rgb(64 121 242);
+}
+.titleStyle {
+  margin-left: 20px;
+  font-size: 12px;
+}
+.countStyle {
+  font-size: 20px;
+  margin: 0 10px;
+}
+</style>
diff --git a/src/views/deviceStatics/components/deviceCountByType.vue b/src/views/deviceStatics/components/deviceCountByType.vue
index 6e71cf8..20adea4 100644
--- a/src/views/deviceStatics/components/deviceCountByType.vue
+++ b/src/views/deviceStatics/components/deviceCountByType.vue
@@ -1,62 +1,99 @@
 <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>
+  <el-row>
+    <el-col>
+      <el-card shadow="never">
+        <el-col>
+          <div class="flagBoxStyle">
+            <div class="flagStyle" />
+            <div>设备总体情况</div>
+          </div>
+        </el-col>
+        <el-col class="cardStyle">
+          <el-col :span="10">
+            <el-card>
+              <div>
+                <span class="ttileStyle">设备总数</span>
+                <span class="countStyle">123</span>
+                <span>个</span>
+              </div>
+            </el-card>
+          </el-col>
+          <el-col :span="10">
+            <el-card>
+              <div>
+                <span class="ttileStyle">低电量设备总数</span>
+                <span class="countStyle">123</span>
+                <span>个</span>
+              </div>
+            </el-card>
+          </el-col>
+        </el-col>
+        <el-col>
+          <div class="flagBoxStyle">
+            <div class="flagStyle" />
+            <div>设备数量分析</div>
+          </div>
+        </el-col>
+        <el-col>
+          <ve-histogram
+            :data="chartData"
+            :grid="grid"
+            :extend="extend"
+            :settings="chartSettings"
+          />
+        </el-col>
+      </el-card>
+    </el-col>
+  </el-row>
 </template>
 
 <script>
 import { deviceStaticsByType } from '@/api/data/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 {
+      extend: {
+        xAxis: {
+          axisLabel: {
+            rotate: 30,
+            margin: 30,
+            textStyle: {
+              align: 'center'
+            }
+          }
+        },
+        series: {
+          label: { show: true, position: 'top' },
+          barMaxWidth: 35 // 最大柱宽度
+        }
+      },
+      grid: {
+        right: 60
+      },
+      chartSettings: {
+        itemStyle: {
+          'barCategoryGap': 5
+        },
+        barWidth: 15,
+        labelMap: {
+          'deviceType': '权属单位',
+          'deviceCount': '设备数量（个）'
+        },
+        dimension: ['deviceType'],
+        metrics: ['deviceCount']
+      },
       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 }
-    // ]
+  created() {
+    this.fetchDeviceType()
   },
   methods: {
-    fetchData() {
+    fetchDeviceType() {
       deviceStaticsByType().then(response => {
         this.chartData.rows = response.data
       })
@@ -66,11 +103,30 @@
 </script>
 
 <style rel="stylesheet/scss" lang="scss" scoped>
-  .chart-title{
-    margin: auto;
-    text-align: center;
-    margin-top: 15px;
-    font-size:20px;
-    font-weight:600
-  }
+.flagBoxStyle {
+  display: flex;
+  margin-bottom: 20px;
+}
+.flagBoxStyle div:nth-child(2){
+  line-height: 30px;
+  font-weight: 600;
+}
+.flagStyle {
+  width: 4px;
+  height: 30px;
+  margin-right: 6px;
+  background: rgb(64 121 242);
+}
+.cardStyle {
+  display:flex;
+  margin-bottom: 20px;
+  justify-content: space-around;
+}
+.ttileStyle {
+  font-size: 12px;
+}
+.countStyle {
+  font-size: 20px;
+  margin: 0 10px;
+}
 </style>

diff --git a/mock/deviceManage/device.js b/mock/deviceManage/device.js
new file mode 100644
index 0000000..1f0650d
--- /dev/null
+++ b/mock/deviceManage/device.js
@@ -0,0 +1,672 @@
+const deviceList = [
+  {
+    'bfzt': '0',
+    'bfztName': '撤防',
+    'communication': '3,4',
+    'concenCode': '',
+    'concenId': '',
+    'deptName': '燃气集团总公司',
+    'deptid': '24',
+    'installHeight': '123',
+    'devcode': '342021000001',
+    'deviceName': '',
+    'deviceType': '12',
+    'deviceTypeName': '开挖监测仪',
+    'id': '1476131375777120257',
+    'installDate': '2021-12-29',
+    'modelId': '19',
+    'modelName': 'BIRMM-RTU100N',
+    'onlineState': '1',
+    'onlineStateName': '在线',
+    'position': 'test001位置',
+    'ts': '2021-12-29',
+    'valid': '1',
+    'watchType': '燃气泄漏',
+    'wellCode': 'test001',
+    'wellId': '4453'
+  },
+  {
+    'bfzt': '0',
+    'bfztName': '撤防',
+    'communication': '3,4',
+    'concenCode': '',
+    'concenId': '',
+    'deptName': '燃气集团总公司',
+    'deptid': '24',
+    'installHeight': '123',
+    'devcode': '342021000001',
+    'deviceName': '',
+    'deviceType': '12',
+    'deviceTypeName': '井盖状态监测仪',
+    'id': '1476131375777120257',
+    'installDate': '2021-12-29',
+    'modelId': '19',
+    'modelName': 'BIRMM-RTU100N',
+    'onlineState': '1',
+    'onlineStateName': '在线',
+    'position': 'test001位置',
+    'ts': '2021-12-29',
+    'valid': '1',
+    'watchType': '燃气泄漏',
+    'wellCode': 'test001',
+    'wellId': '4453'
+  },
+  {
+    'bfzt': '0',
+    'bfztName': '撤防',
+    'communication': '3,4',
+    'concenCode': '',
+    'concenId': '',
+    'deptName': '燃气集团总公司',
+    'deptid': '24',
+    'installHeight': '123',
+    'devcode': '342021000001',
+    'deviceName': '',
+    'deviceType': '12',
+    'deviceTypeName': '液位监测仪',
+    'id': '1476131375777120257',
+    'installDate': '2021-12-29',
+    'modelId': '19',
+    'modelName': 'BIRMM-RTU100N',
+    'onlineState': '1',
+    'onlineStateName': '在线',
+    'position': 'test001位置',
+    'ts': '2021-12-29',
+    'valid': '1',
+    'watchType': '燃气泄漏',
+    'wellCode': 'test001',
+    'wellId': '4453'
+  },
+  {
+    'bfzt': '0',
+    'bfztName': '撤防',
+    'communication': '3,4',
+    'concenCode': '',
+    'concenId': '',
+    'deptName': '燃气集团总公司',
+    'deptid': '24',
+    'installHeight': '123',
+    'devcode': '342021000001',
+    'deviceName': '',
+    'deviceType': '12',
+    'deviceTypeName': '燃气智能监测终端',
+    'id': '1476131375777120257',
+    'installDate': '2021-12-29',
+    'modelId': '19',
+    'modelName': 'BIRMM-RTU100N',
+    'onlineState': '1',
+    'onlineStateName': '在线',
+    'position': 'test001位置',
+    'ts': '2021-12-29',
+    'valid': '1',
+    'watchType': '燃气泄漏',
+    'wellCode': 'test001',
+    'wellId': '4453'
+  },
+  {
+    'bfzt': '0',
+    'bfztName': '撤防',
+    'communication': '3,4',
+    'concenCode': '',
+    'concenId': '',
+    'deptName': '燃气集团总公司',
+    'deptid': '24',
+    'installHeight': '123',
+    'devcode': '342021000001',
+    'deviceName': '',
+    'deviceType': '12',
+    'deviceTypeName': '噪声记录仪',
+    'id': '1476131375777120257',
+    'installDate': '2021-12-29',
+    'modelId': '19',
+    'modelName': 'BIRMM-RTU100N',
+    'onlineState': '1',
+    'onlineStateName': '在线',
+    'position': 'test001位置',
+    'ts': '2021-12-29',
+    'valid': '1',
+    'watchType': '燃气泄漏',
+    'wellCode': 'test001',
+    'wellId': '4453'
+  },
+  {
+    'bfzt': '0',
+    'bfztName': '撤防',
+    'communication': '3,4',
+    'concenCode': '',
+    'concenId': '',
+    'deptName': '燃气集团总公司',
+    'deptid': '24',
+    'installHeight': '123',
+    'devcode': '342021000001',
+    'deviceName': '',
+    'deviceType': '12',
+    'deviceTypeName': '有害气体监测仪',
+    'id': '1476131375777120257',
+    'installDate': '2021-12-29',
+    'modelId': '19',
+    'modelName': 'BIRMM-RTU100N',
+    'onlineState': '1',
+    'onlineStateName': '在线',
+    'position': 'test001位置',
+    'ts': '2021-12-29',
+    'valid': '1',
+    'watchType': '燃气泄漏',
+    'wellCode': 'test001',
+    'wellId': '4453'
+  },
+  {
+    'bfzt': '0',
+    'bfztName': '撤防',
+    'communication': '3,4',
+    'concenCode': '',
+    'concenId': '',
+    'deptName': '燃气集团总公司',
+    'deptid': '24',
+    'installHeight': '123',
+    'devcode': '342021000001',
+    'deviceName': '',
+    'deviceType': '12',
+    'deviceTypeName': '温湿度监测仪',
+    'id': '1476131375777120257',
+    'installDate': '2021-12-29',
+    'modelId': '19',
+    'modelName': 'BIRMM-RTU100N',
+    'onlineState': '1',
+    'onlineStateName': '在线',
+    'position': 'test001位置',
+    'ts': '2021-12-29',
+    'valid': '1',
+    'watchType': '燃气泄漏',
+    'wellCode': 'test001',
+    'wellId': '4453'
+  },
+  {
+    'bfzt': '0',
+    'bfztName': '撤防',
+    'communication': '3,4',
+    'concenCode': '',
+    'concenId': '',
+    'deptName': '燃气集团总公司',
+    'deptid': '24',
+    'installHeight': '123',
+    'devcode': '342021000001',
+    'deviceName': '',
+    'deviceType': '12',
+    'deviceTypeName': '井盖定位监测仪',
+    'id': '1476131375777120257',
+    'installDate': '2021-12-29',
+    'modelId': '19',
+    'modelName': 'BIRMM-RTU100N',
+    'onlineState': '1',
+    'onlineStateName': '在线',
+    'position': 'test001位置',
+    'ts': '2021-12-29',
+    'valid': '1',
+    'watchType': '燃气泄漏',
+    'wellCode': 'test001',
+    'wellId': '4453'
+  },
+  {
+    'bfzt': '0',
+    'bfztName': '撤防',
+    'communication': '3,4',
+    'concenCode': '',
+    'concenId': '',
+    'deptName': '燃气集团总公司',
+    'deptid': '24',
+    'installHeight': '123',
+    'devcode': '342021000001',
+    'deviceName': '',
+    'deviceType': '12',
+    'deviceTypeName': '燃气智能终端（一体化）',
+    'id': '1476131375777120257',
+    'installDate': '2021-12-29',
+    'modelId': '19',
+    'modelName': 'BIRMM-RTU100N',
+    'onlineState': '1',
+    'onlineStateName': '在线',
+    'position': 'test001位置',
+    'ts': '2021-12-29',
+    'valid': '1',
+    'watchType': '燃气泄漏',
+    'wellCode': 'test001',
+    'wellId': '4453'
+  },
+  {
+    'bfzt': '0',
+    'bfztName': '撤防',
+    'communication': '3,4',
+    'concenCode': '',
+    'concenId': '',
+    'deptName': '燃气集团总公司',
+    'deptid': '24',
+    'installHeight': '123',
+    'devcode': '342021000001',
+    'deviceName': '',
+    'deviceType': '12',
+    'deviceTypeName': '管盯',
+    'id': '1476131375777120257',
+    'installDate': '2021-12-29',
+    'modelId': '19',
+    'modelName': 'BIRMM-RTU100N',
+    'onlineState': '1',
+    'onlineStateName': '在线',
+    'position': 'test001位置',
+    'ts': '2021-12-29',
+    'valid': '1',
+    'watchType': '燃气泄漏',
+    'wellCode': 'test001',
+    'wellId': '4453'
+  }
+]
+const deviceStaticsList = [
+  {
+    'deptName': '燃气集团总公司',
+    'deviceCount': '11',
+    'deptid': '24'
+  },
+  {
+    'deptName': '煤气公司',
+    'deviceCount': '2',
+    'deptid': '24'
+  },
+  {
+    'deptName': '电力公司',
+    'deviceCount': '11',
+    'deptid': '24'
+  }
+
+]
+const deviceOnlineList = [
+  {
+    'deviceType': '井盖状态监测仪',
+    'online': 1,
+    'offline': 9
+  },
+  {
+    'deviceType': '燃气智能监测终端',
+    'online': 1,
+    'offline': 2
+  },
+  {
+    'deviceType': '管盯',
+    'online': 1,
+    'offline': 6
+  }
+
+]
+const deviceOfflineList = [
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  }
+]
+module.exports = [
+  // mock get all routes form server
+  {
+    url: '/device/list',
+    type: 'get',
+    response: _ => {
+      return {
+        code: 200,
+        data: deviceList,
+        message: '请求成功',
+        success: true
+      }
+    }
+  },
+  {
+    url: '/statics/deviceStaticsByDept',
+    type: 'get',
+    response: _ => {
+      return {
+        code: 200,
+        data: deviceStaticsList,
+        message: '请求成功',
+        success: true
+      }
+    }
+  },
+  {
+    url: '/statics/deviceCountByOnlineStatus',
+    type: 'get',
+    response: _ => {
+      return {
+        code: 200,
+        data: deviceOnlineList,
+        message: '请求成功',
+        success: true
+      }
+    }
+  },
+  {
+    url: '/device/offlineListPage',
+    type: 'get',
+    response: _ => {
+      return {
+        code: 200,
+        'total': 120,
+        data: deviceOfflineList,
+        message: '请求成功',
+        success: true
+      }
+    }
+  }
+]
diff --git a/mock/index.js b/mock/index.js
index 6646246..0e60e80 100644
--- a/mock/index.js
+++ b/mock/index.js
@@ -12,6 +12,7 @@
 const dashboard = require('./biz/dashboard')
 const search = require('./remote-search')
 const overview = require('./biz/overview')
+const device = require('./deviceManage/device')
 const deviceType = require('./deviceManage/deviceType')
 const deviceModels = require('./deviceManage/deviceModels')
 const deviceImei = require('./deviceManage/deviceImei')
@@ -42,7 +43,8 @@
   ...tenantConfig,
   ...deptPermission,
   ...tenant,
-  ...warningRule
+  ...warningRule,
+  ...device
 ]
 
 // for front mock
diff --git a/src/api/data/dataStatics.js b/src/api/data/dataStatics.js
index b96a05e..04f756a 100644
--- a/src/api/data/dataStatics.js
+++ b/src/api/data/dataStatics.js
@@ -11,6 +11,14 @@
     params
   })
 }
+// 离线设备列表
+export function offlineList(params) {
+  return request({
+    url: 'device/offlineListPage',
+    method: 'get',
+    params
+  })
+}
 // 根据权属单位统计井数量
 export function wellStaticByDept(params) {
   return request({
@@ -38,6 +46,15 @@
   })
 }
 
+// 离线设备数量
+export function deviceStaticsByOnline(params) {
+  return request({
+    url: 'statics/deviceCountByOnlineStatus',
+    method: 'get',
+    params
+  })
+}
+
 // 根据权属单位统计设备数量
 export function deviceStaticsByDept(params) {
   return request({
diff --git a/src/components/NormalTable/index.vue b/src/components/NormalTable/index.vue
index 9e23838..3fdc6db 100644
--- a/src/components/NormalTable/index.vue
+++ b/src/components/NormalTable/index.vue
@@ -69,7 +69,7 @@
         </el-col>
       </el-row>
       <!-- 表格正文-->
-      <el-table v-loading="listLoading" :data="data" :size="size" class="table" row-class-name="small-row-class" border @selection-change="selectionChange" @row-click="rowClick">
+      <el-table v-loading="listLoading" :height="height" :data="data" :size="size" class="table" row-class-name="small-row-class" border @selection-change="selectionChange" @row-click="rowClick">
         <!--需要加在表最前方的插槽-->
         <slot name="preColumns" />
         <!--序号列-->
@@ -141,6 +141,12 @@
         return []
       }
     }, // 数据
+    height: {
+      type: Number,
+      default: function() {
+        return []
+      }
+    },
     total: {
       type: Number,
       default: 0
diff --git a/src/views/deviceManage/components/listDigData.vue b/src/views/deviceManage/components/listDigData.vue
new file mode 100644
index 0000000..5a2b795
--- /dev/null
+++ b/src/views/deviceManage/components/listDigData.vue
@@ -0,0 +1,19 @@
+<template>
+  <div>开挖监测仪</div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+
+    }
+  },
+  methods: {
+    initData: function(row = null) {
+      console.log(row, '===')
+    }
+  }
+}
+</script>
+
diff --git a/src/views/deviceManage/components/listGasData.vue b/src/views/deviceManage/components/listGasData.vue
new file mode 100644
index 0000000..ccbaa8b
--- /dev/null
+++ b/src/views/deviceManage/components/listGasData.vue
@@ -0,0 +1,18 @@
+<template>
+  <div>燃气智能监测终端</div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+
+    }
+  },
+  methods: {
+    initData: function(row = null) {
+      console.log(row, '===')
+    }
+  }
+}
+</script>
diff --git a/src/views/deviceManage/components/listHarmfulData.vue b/src/views/deviceManage/components/listHarmfulData.vue
new file mode 100644
index 0000000..687f9bc
--- /dev/null
+++ b/src/views/deviceManage/components/listHarmfulData.vue
@@ -0,0 +1,18 @@
+<template>
+  <div>有害气体监测仪</div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+
+    }
+  },
+  methods: {
+    initData: function(row = null) {
+      console.log(row, '===')
+    }
+  }
+}
+</script>
diff --git a/src/views/deviceManage/components/listLiquidData.vue b/src/views/deviceManage/components/listLiquidData.vue
new file mode 100644
index 0000000..f279ee9
--- /dev/null
+++ b/src/views/deviceManage/components/listLiquidData.vue
@@ -0,0 +1,18 @@
+<template>
+  <div>液位监测仪</div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+
+    }
+  },
+  methods: {
+    initData: function(row = null) {
+      console.log(row, '===')
+    }
+  }
+}
+</script>
diff --git a/src/views/deviceManage/components/listLiquidGasData.vue b/src/views/deviceManage/components/listLiquidGasData.vue
new file mode 100644
index 0000000..6f5535e
--- /dev/null
+++ b/src/views/deviceManage/components/listLiquidGasData.vue
@@ -0,0 +1,18 @@
+<template>
+  <div>燃气智能终端（一体化）</div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+
+    }
+  },
+  methods: {
+    initData: function(row = null) {
+      console.log(row, '===')
+    }
+  }
+}
+</script>
diff --git a/src/views/deviceManage/components/listNoiseData.vue b/src/views/deviceManage/components/listNoiseData.vue
new file mode 100644
index 0000000..7dad007
--- /dev/null
+++ b/src/views/deviceManage/components/listNoiseData.vue
@@ -0,0 +1,18 @@
+<template>
+  <div>噪声记录仪</div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+
+    }
+  },
+  methods: {
+    initData: function(row = null) {
+      console.log(row, '===')
+    }
+  }
+}
+</script>
diff --git a/src/views/deviceManage/components/listTempData.vue b/src/views/deviceManage/components/listTempData.vue
new file mode 100644
index 0000000..f7548b5
--- /dev/null
+++ b/src/views/deviceManage/components/listTempData.vue
@@ -0,0 +1,18 @@
+<template>
+  <div>温湿度监测仪</div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+
+    }
+  },
+  methods: {
+    initData: function(row = null) {
+      console.log(row, '===')
+    }
+  }
+}
+</script>
diff --git a/src/views/deviceManage/components/listTubeData.vue b/src/views/deviceManage/components/listTubeData.vue
new file mode 100644
index 0000000..94f1772
--- /dev/null
+++ b/src/views/deviceManage/components/listTubeData.vue
@@ -0,0 +1,18 @@
+<template>
+  <div>管盯</div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+
+    }
+  },
+  methods: {
+    initData: function(row = null) {
+      console.log(row, '===')
+    }
+  }
+}
+</script>
diff --git a/src/views/deviceManage/components/listWellData.vue b/src/views/deviceManage/components/listWellData.vue
new file mode 100644
index 0000000..7a6436d
--- /dev/null
+++ b/src/views/deviceManage/components/listWellData.vue
@@ -0,0 +1,18 @@
+<template>
+  <div>井盖状态监测仪</div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+
+    }
+  },
+  methods: {
+    initData: function(row = null) {
+      console.log(row, '===')
+    }
+  }
+}
+</script>
diff --git a/src/views/deviceManage/components/listWellLocaData.vue b/src/views/deviceManage/components/listWellLocaData.vue
new file mode 100644
index 0000000..f784671
--- /dev/null
+++ b/src/views/deviceManage/components/listWellLocaData.vue
@@ -0,0 +1,18 @@
+<template>
+  <div>井盖定位监测仪</div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+
+    }
+  },
+  methods: {
+    initData: function(row = null) {
+      console.log(row, '===')
+    }
+  }
+}
+</script>
diff --git a/src/views/deviceManage/detailDevice.vue b/src/views/deviceManage/detailDevice.vue
index eefc549..8285ee7 100644
--- a/src/views/deviceManage/detailDevice.vue
+++ b/src/views/deviceManage/detailDevice.vue
@@ -3,110 +3,114 @@
     <el-form ref="dataForm" :model="deviceForm" label-well-code="right" label-width="100px">
       <el-row :gutter="20">
         <el-col :span="12">
-          <el-form-item label="设备名称" prop="deviceName">
-            <el-input v-model="deviceForm.deviceName" type="text" placeholder="未知" disabled />
+          <el-form-item label="设备编号" prop="devcode">
+            <el-input v-model.trim="deviceForm.devcode" disabled type="text" placeholder="必填" />
           </el-form-item>
         </el-col>
         <el-col :span="12">
-          <el-form-item label="设备编号" prop="devcode">
-            <el-input v-model="deviceForm.devcode" type="text" placeholder="未知" disabled />
+          <el-form-item label="安装日期" prop="installDate">
+            <el-date-picker
+              v-model.trim="deviceForm.installDate"
+              disabled
+              type="date"
+              value-format="yyyy-MM-dd"
+              placeholder="选择日期"
+            />
           </el-form-item>
         </el-col>
       </el-row>
       <el-row :gutter="20">
         <el-col :span="12">
           <el-form-item label="设备类型" prop="deviceType">
-            <el-input v-model="deviceForm.deviceTypeName" type="text" placeholder="未知" disabled />
+            <el-select v-model="deviceForm.deviceType" disabled placeholder="请选择设备类型">
+              <el-option
+                v-for="item in deviceTypeList"
+                :key="item.value"
+                :label="item.name"
+                :value="item.value"
+              />
+            </el-select>
           </el-form-item>
         </el-col>
         <el-col :span="12">
           <el-form-item label="设备型号" prop="modelId">
-            <el-input v-model="deviceForm.modelName" type="text" placeholder="未知" disabled />
-          </el-form-item>
-        </el-col>
-      </el-row>
-      <el-row :gutter="20">
-        <el-col :span="12">
-          <el-form-item label="在线状态" prop="wellCode">
-            <el-input v-model="deviceForm.onlineStateName" type="text" placeholder="未知" disabled />
-          </el-form-item>
-        </el-col>
-        <el-col :span="12">
-          <el-form-item label="权属单位" prop="concenCode">
-            <el-input v-model="deviceForm.deptName" type="text" placeholder="未知" disabled />
+            <el-select v-model="deviceForm.modelId" disabled placeholder="请选择设备型号">
+              <el-option
+                v-for="item in deviceModelList"
+                :key="item.value"
+                :label="item.name"
+                :value="item.value"
+              />
+            </el-select>
           </el-form-item>
         </el-col>
       </el-row>
       <el-row :gutter="20">
         <el-col :span="12">
           <el-form-item label="井编号" prop="wellCode">
-            <el-input v-model="deviceForm.wellCode" type="text" placeholder="未知" disabled />
+            <el-input v-model.trim="deviceForm.wellCode" disabled type="text" placeholder="必填" />
           </el-form-item>
         </el-col>
         <el-col :span="12">
-          <el-form-item label="布防状态" prop="bfztName">
-            <el-input v-model="deviceForm.bfztName" type="text" placeholder="未知" disabled />
-          </el-form-item>
-        </el-col>
-      </el-row>
-      <el-row :gutter="20">
-        <el-col :span="24">
-          <el-form-item label="位置" prop="position">
-            <el-input v-model="deviceForm.position" type="text" placeholder="未知" disabled />
-          </el-form-item>
-        </el-col>
-      </el-row>
-      <el-row :gutter="20">
-        <el-col :span="12">
-          <el-form-item label="安装日期" prop="installDate">
-            <el-input v-model="deviceForm.installDate" type="text" placeholder="未知" disabled />
-          </el-form-item>
-        </el-col>
-        <el-col :span="12">
-          <el-form-item label="集中器编号" prop="concenCode">
-            <el-input v-model="deviceForm.concenCode" type="text" placeholder="未知" disabled />
-          </el-form-item>
-        </el-col>
-      </el-row>
-      <el-row :gutter="20">
-        <el-col :span="12">
-          <el-form-item label="设备安装高度" prop="installHeight">
-            <el-input v-model="deviceForm.installHeight" type="text" placeholder="未知" disabled />
+          <el-form-item label="安装高度(m)" prop="installHeight">
+            <el-input v-model.trim="deviceForm.installHeight" disabled type="text" placeholder="必填" />
           </el-form-item>
         </el-col>
       </el-row>
     </el-form>
+    <component :is="cmpName" ref="deviceTypeDialog" @watchChild="fetchDeviceList" />
   </el-dialog>
 </template>
 
 <script>
+import listDigData from './components/listDigData'
+import listGasData from './components/listGasData'
+import listHarmfulData from './components/listHarmfulData'
+import listLiquidData from './components/listLiquidData'
+import listLiquidGasData from './components/listLiquidGasData'
+import listNoiseData from './components/listNoiseData'
+import listTempData from './components/listTempData'
+import listTubeData from './components/listTubeData'
+import listWellData from './components/listWellData'
+import listWellLocaData from './components/listWellLocaData'
 
 export default {
-  name: 'DetailDevice',
+  name: 'EditDevice',
+  components: {
+    listDigData,
+    listGasData,
+    listHarmfulData,
+    listLiquidData,
+    listLiquidGasData,
+    listNoiseData,
+    listTempData,
+    listTubeData,
+    listWellData,
+    listWellLocaData
+  },
   data() {
     return {
       dialogFormVisible: false, // 对话框是否显示
-      dialogStatus: '', // 对话框类型：create,update
+      dialogStatus: '', // 对话框类型：create,update,detail
+      cmpName: '', // 组件名称
       deviceForm: {
         id: '',
         deviceName: '',
         devcode: '',
-        deviceTypeName: '',
+        deviceType: '',
         wellCode: '',
-        modelName: '',
+        modelId: '',
         installDate: '',
         concenCode: '',
-        installHeight: '',
-        onlineStateName: '',
-        deptName: '',
-        bfztName: '',
-        position: ''
+        installHeight: ''
       }, // 表单
       textMap: {
         update: '编辑',
         create: '新增',
         detail: '详情'
-      } // 表头显示标题z
+      }, // 表头显示标题
+      deviceTypeList: null, // 设备类型列表
+      deviceModelList: null // 设备型号列表
     }
   },
   methods: {
@@ -114,20 +118,57 @@
     initDialog: function(dialogStatus, dialogFormVisible, row = null) {
       this.dialogStatus = dialogStatus
       this.dialogFormVisible = dialogFormVisible
+      this.resetForm()
       this.deviceForm = {
         id: row.id,
         deviceName: row.deviceName,
         devcode: row.devcode,
-        deviceTypeName: row.deviceTypeName,
+        deviceType: row.deviceType,
+        modelId: row.modelId,
         wellCode: row.wellCode,
-        modelName: row.modelName,
-        installDate: row.installDate,
         concenCode: row.concenCode,
-        installHeight: row.installHeight,
-        onlineStateName: row.onlineStateName,
-        deptName: row.deptName,
-        bfztName: row.bfztName,
-        position: row.position
+        installDate: row.installDate,
+        installHeight: row.installHeight
+      }
+      // 展示相对应的设备列表组件
+      if (row.deviceTypeName === '开挖监测仪') {
+        this.cmpName = 'list-dig-data'
+      } else if (row.deviceTypeName === '井盖状态监测仪') {
+        this.cmpName = 'list-well-data'
+      } else if (row.deviceTypeName === '液位监测仪') {
+        this.cmpName = 'list-liquid-data'
+      } else if (row.deviceTypeName === '燃气智能监测终端') {
+        this.cmpName = 'list-gas-data'
+      } else if (row.deviceTypeName === '噪声记录仪') {
+        this.cmpName = 'list-noise-data'
+      } else if (row.deviceTypeName === '有害气体监测仪') {
+        this.cmpName = 'list-harmful-data'
+      } else if (row.deviceTypeName === '温湿度监测仪') {
+        this.cmpName = 'list-temp-data'
+      } else if (row.deviceTypeName === '井盖定位监测仪') {
+        this.cmpName = 'list-well-loca-data'
+      } else if (row.deviceTypeName === '燃气智能终端（一体化）') {
+        this.cmpName = 'list-liquid-gas-data'
+      } else if (row.deviceTypeName === '管盯') {
+        this.cmpName = 'list-tube-data'
+      }
+      setTimeout(() => {
+        this.$refs.deviceTypeDialog.initData(row)
+      }, 100)
+    },
+    fetchDeviceList() {},
+    // 重置表单
+    resetForm() {
+      this.deviceForm = {
+        id: '',
+        deviceName: '',
+        devcode: '',
+        deviceType: '',
+        wellCode: '',
+        modelId: '',
+        installDate: '',
+        concenCode: '',
+        installHeight: ''
       }
     }
   }
@@ -138,4 +179,7 @@
   .el-select{
     width: 100%;
   }
+  .el-date-editor{
+    width: 100%;
+  }
 </style>
diff --git a/src/views/deviceManage/editDevice.vue b/src/views/deviceManage/editDevice.vue
index 41c6907..0ae2cab 100644
--- a/src/views/deviceManage/editDevice.vue
+++ b/src/views/deviceManage/editDevice.vue
@@ -65,7 +65,7 @@
       <el-row :gutter="20">
         <el-col :span="12">
           <el-form-item label="安装高度(m)" prop="installHeight">
-            <el-input v-model.trim="deviceForm.installHeight" :disabled="isDetailMode" type="text" placeholder="非必填" />
+            <el-input v-model.trim="deviceForm.installHeight" :disabled="isDetailMode" type="text" placeholder="必填" />
           </el-form-item>
         </el-col>
       </el-row>
@@ -116,7 +116,8 @@
         wellCode: [{ required: true, message: '井编号不能为空', trigger: ['blur', 'change'] }],
         deviceType: [{ required: true, message: '设备类型必选', trigger: ['blur', 'change'] }],
         modelId: [{ required: true, message: '设备型号必选', trigger: ['blur', 'change'] }],
-        installDate: [{ required: true, message: '安装日期必选', trigger: ['blur', 'change'] }]
+        installDate: [{ required: true, message: '安装日期必选', trigger: ['blur', 'change'] }],
+        installHeight: [{ required: true, message: '设备安装高度不能为空', trigger: ['blur', 'change'] }]
       }, // 前端校验规则
       isEditMode: false, // 编辑模式
       isDetailMode: false // 详情模式
diff --git a/src/views/deviceManage/listDevice.vue b/src/views/deviceManage/listDevice.vue
index 2303523..623cf06 100644
--- a/src/views/deviceManage/listDevice.vue
+++ b/src/views/deviceManage/listDevice.vue
@@ -76,7 +76,6 @@
       </el-row>
       <el-table v-loading="listLoading" :data="list" class="table" border @selection-change="handleSelectionChange">
         <el-table-column v-if="hasPerm('/device/delete')" align="center" type="selection" width="55" />
-        <el-table-column :index="indexMethod" align="center" type="index" />
         <el-table-column v-for="column in columns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
           <template slot-scope="scope">
             <span v-if="column.type!='Button'" :class="column.class">{{ scope.row[column.value] }}</span>
@@ -272,7 +271,7 @@
       this.$refs.editdevice.initDialog('update', this.dialogFormVisible, row)
     },
     detail(row) {
-      this.$refs.editdevice.initDialog('detail', true, row)
+      this.$refs.detaildevice.initDialog('detail', true, row)
     },
     // 删除设备
     del() {
@@ -367,7 +366,7 @@
         this.listQuery.offset = 1
       }
       getDeviceList(this.listQuery).then(response => {
-        this.list = response.data.rows
+        this.list = response.data
         this.total = parseInt(response.data.total)
         this.listLoading = false
       })
diff --git a/src/views/deviceStatics/components/deviceCountByDept.vue b/src/views/deviceStatics/components/deviceCountByDept.vue
index 6dc7375..0d4a211 100644
--- a/src/views/deviceStatics/components/deviceCountByDept.vue
+++ b/src/views/deviceStatics/components/deviceCountByDept.vue
@@ -1,77 +1,81 @@
 <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-row>
+    <el-col>
+      <el-card shadow="never">
+        <el-col>
+          <el-col :span="18">
+            <div class="flagBoxStyle">
+              <div class="flagStyle" />
+              <div>各单位安装设备情况统计</div>
+            </div>
+          </el-col>
+          <el-col :span="6">
+            <el-select
+              v-model="listQuery.deviceType"
+              size="small"
+              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-col>
-      </el-row>
-    </div>
-    <div>
-      <ve-histogram :data="chartData" :grid="grid" :extend="extend" :settings="chartSettings" />
-    </div>
-  </div>
+
+        <el-col>
+          <ve-bar
+            :data="chartData"
+            :grid="grid"
+            :extend="extend"
+            :settings="chartSettings"
+          />
+        </el-col>
+      </el-card>
+    </el-col>
+  </el-row>
 </template>
 
 <script>
 import { getDeviceType } from '@/api/device/device'
 import { deviceStaticsByDept } from '@/api/data/dataStatics'
+
 export default {
   name: 'DeviceCountByDept',
   data() {
-    this.extend = {
-      xAxis: {
-        axisLabel: {
-          rotate: 30,
-          margin: 30,
-          textStyle: {
-            align: 'center'
-          }
-        }
-      },
-      series: {
-        label: { show: true, position: 'top' },
-        barMaxWidth: 35 // 最大柱宽度
-      }
-    }
-    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: '',
+      extend: {
+        series: {
+          label: { show: true, position: 'right' },
+          barMaxWidth: 35 // 最大柱宽度
+        }
+      },
+      grid: {
+        right: 60
+      },
+      // title: {
+      //   text: '井类型数量统计'
+      // },
+      chartSettings: {
+        itemStyle: {
+          'barCategoryGap': 5
+        },
+        barWidth: 15,
+        labelMap: {
+          'deptName': '权属单位',
+          'deviceCount': '设备数量（个）'
+        },
+        dimension: ['deptName'],
+        metrics: ['deviceCount']
+      },
       chartData: {
         columns: ['deptName', 'deviceCount'],
         rows: []
@@ -85,25 +89,11 @@
   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
-        }
+      getDeviceType().then(response => {
+        this.deviceTypeList = response.data
       })
     },
     fetchData() {
-      console.log('fetchData')
       deviceStaticsByDept(this.listQuery).then(response => {
         this.chartData.rows = response.data
       })
@@ -113,16 +103,19 @@
 </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*/
-  }
+.flagBoxStyle {
+  display: flex;
+  margin-bottom: 20px;
+}
+.flagBoxStyle div:nth-child(2){
+  line-height: 30px;
+  font-weight: 600;
+}
+.flagStyle {
+  width: 4px;
+  height: 30px;
+  margin-right: 6px;
+  background: rgb(64 121 242);
+}
 </style>
+
diff --git a/src/views/deviceStatics/components/deviceCountByOffline.vue b/src/views/deviceStatics/components/deviceCountByOffline.vue
new file mode 100644
index 0000000..ba81bec
--- /dev/null
+++ b/src/views/deviceStatics/components/deviceCountByOffline.vue
@@ -0,0 +1,139 @@
+<template>
+  <el-row>
+    <el-col>
+      <el-card shadow="never">
+        <el-col>
+          <div class="flagBoxStyle">
+            <div class="flagStyle" />
+            <div>离线分析</div>
+          </div>
+        </el-col>
+        <el-col>
+          <div>
+            <span class="titleStyle">离线设备</span>
+            <span class="countStyle">12</span>
+            <span>个</span>
+          </div>
+        </el-col>
+        <el-col>
+          <el-col :span="16">
+            <ve-histogram
+              :data="chartData"
+              :grid="grid"
+              :extend="extend"
+              :settings="chartSettings"
+            />
+          </el-col>
+          <el-col :span="8">
+            <ve-pie
+              :data="chartDataPie"
+              :extend="extendPie"
+            />
+          </el-col>
+        </el-col>
+      </el-card>
+    </el-col>
+  </el-row>
+</template>
+
+<script>
+import { deviceStaticsByOnline } from '@/api/data/dataStatics'
+export default {
+  name: 'DeviceCountByOffline',
+  data() {
+    return {
+      online: 0,
+      offline: 0,
+      // 饼状图
+      extendPie: {
+        series: {
+          label: { show: true, position: 'outside', formatter: '{b}:{c}' },
+          radius: '45%'
+        }
+      },
+      chartDataPie: {
+        columns: ['onlineStatus', 'deviceCount'],
+        rows: []
+      },
+      // 柱状图
+      extend: {
+        xAxis: {
+          axisLabel: {
+            rotate: 30,
+            margin: 30,
+            textStyle: {
+              align: 'center'
+            }
+          }
+        },
+        series: {
+          label: { show: true, position: 'top' },
+          barMaxWidth: 35 // 最大柱宽度
+        }
+      },
+      grid: {
+        right: 60
+      },
+      chartSettings: {
+        itemStyle: {
+          'barCategoryGap': 5
+        },
+        barWidth: 15,
+        labelMap: {
+          'deviceType': '权属单位',
+          'offline': '设备数量（个）'
+        },
+        dimension: ['deviceType'],
+        metrics: ['offline']
+      },
+      chartData: {
+        columns: ['deviceType', 'offline'],
+        rows: []
+      }
+    }
+  },
+  created() {
+    this.fetchDeviceType()
+  },
+  methods: {
+    fetchDeviceType() {
+      deviceStaticsByOnline().then(response => {
+        response.data.forEach((item) => {
+          this.online += item.online
+          this.offline += item.offline
+        })
+        this.chartData.rows = response.data
+        this.chartDataPie.rows = [
+          { 'onlineStatus': '在线', 'deviceCount': this.online },
+          { 'onlineStatus': '离线', 'deviceCount': this.offline }
+        ]
+      })
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.flagBoxStyle {
+  display: flex;
+  margin-bottom: 20px;
+}
+.flagBoxStyle div:nth-child(2){
+  line-height: 30px;
+  font-weight: 600;
+}
+.flagStyle {
+  width: 4px;
+  height: 30px;
+  margin-right: 6px;
+  background: rgb(64 121 242);
+}
+.titleStyle {
+  margin-left: 20px;
+  font-size: 12px;
+}
+.countStyle {
+  font-size: 20px;
+  margin: 0 10px;
+}
+</style>
diff --git a/src/views/deviceStatics/components/deviceCountByType.vue b/src/views/deviceStatics/components/deviceCountByType.vue
index 6e71cf8..20adea4 100644
--- a/src/views/deviceStatics/components/deviceCountByType.vue
+++ b/src/views/deviceStatics/components/deviceCountByType.vue
@@ -1,62 +1,99 @@
 <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>
+  <el-row>
+    <el-col>
+      <el-card shadow="never">
+        <el-col>
+          <div class="flagBoxStyle">
+            <div class="flagStyle" />
+            <div>设备总体情况</div>
+          </div>
+        </el-col>
+        <el-col class="cardStyle">
+          <el-col :span="10">
+            <el-card>
+              <div>
+                <span class="ttileStyle">设备总数</span>
+                <span class="countStyle">123</span>
+                <span>个</span>
+              </div>
+            </el-card>
+          </el-col>
+          <el-col :span="10">
+            <el-card>
+              <div>
+                <span class="ttileStyle">低电量设备总数</span>
+                <span class="countStyle">123</span>
+                <span>个</span>
+              </div>
+            </el-card>
+          </el-col>
+        </el-col>
+        <el-col>
+          <div class="flagBoxStyle">
+            <div class="flagStyle" />
+            <div>设备数量分析</div>
+          </div>
+        </el-col>
+        <el-col>
+          <ve-histogram
+            :data="chartData"
+            :grid="grid"
+            :extend="extend"
+            :settings="chartSettings"
+          />
+        </el-col>
+      </el-card>
+    </el-col>
+  </el-row>
 </template>
 
 <script>
 import { deviceStaticsByType } from '@/api/data/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 {
+      extend: {
+        xAxis: {
+          axisLabel: {
+            rotate: 30,
+            margin: 30,
+            textStyle: {
+              align: 'center'
+            }
+          }
+        },
+        series: {
+          label: { show: true, position: 'top' },
+          barMaxWidth: 35 // 最大柱宽度
+        }
+      },
+      grid: {
+        right: 60
+      },
+      chartSettings: {
+        itemStyle: {
+          'barCategoryGap': 5
+        },
+        barWidth: 15,
+        labelMap: {
+          'deviceType': '权属单位',
+          'deviceCount': '设备数量（个）'
+        },
+        dimension: ['deviceType'],
+        metrics: ['deviceCount']
+      },
       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 }
-    // ]
+  created() {
+    this.fetchDeviceType()
   },
   methods: {
-    fetchData() {
+    fetchDeviceType() {
       deviceStaticsByType().then(response => {
         this.chartData.rows = response.data
       })
@@ -66,11 +103,30 @@
 </script>
 
 <style rel="stylesheet/scss" lang="scss" scoped>
-  .chart-title{
-    margin: auto;
-    text-align: center;
-    margin-top: 15px;
-    font-size:20px;
-    font-weight:600
-  }
+.flagBoxStyle {
+  display: flex;
+  margin-bottom: 20px;
+}
+.flagBoxStyle div:nth-child(2){
+  line-height: 30px;
+  font-weight: 600;
+}
+.flagStyle {
+  width: 4px;
+  height: 30px;
+  margin-right: 6px;
+  background: rgb(64 121 242);
+}
+.cardStyle {
+  display:flex;
+  margin-bottom: 20px;
+  justify-content: space-around;
+}
+.ttileStyle {
+  font-size: 12px;
+}
+.countStyle {
+  font-size: 20px;
+  margin: 0 10px;
+}
 </style>
diff --git a/src/views/deviceStatics/components/editDeviceStatics.vue b/src/views/deviceStatics/components/editDeviceStatics.vue
new file mode 100644
index 0000000..959e7da
--- /dev/null
+++ b/src/views/deviceStatics/components/editDeviceStatics.vue
@@ -0,0 +1,322 @@
+<template>
+  <el-dialog
+    append-to-body
+    :title="textMap[dialogStatus]"
+    :visible.sync="dialogFormVisible"
+  >
+    <el-form
+      ref="dataForm"
+      :rules="rules"
+      :model="deviceForm"
+      label-width="100px"
+      label-well-code="right"
+    >
+      <el-row :gutter="20">
+        <el-col :span="12">
+          <el-form-item label="设备类型" prop="deviceType">
+            <el-select
+              v-model="deviceForm.deviceType"
+              placeholder="请选择设备类型"
+              clearable
+              :disabled="dialogStatus === 'detail' ? true : false"
+            >
+              <el-option
+                v-for="item in deviceTypeList"
+                :key="item.value"
+                :label="item.name"
+                :value="item.value"
+              />
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="井类型" prop="wellType">
+            <el-select
+              v-model="deviceForm.wellType"
+              clearable
+              placeholder="请选择支持井类型"
+              :disabled="dialogStatus === 'detail' ? true : false"
+            >
+              <el-option
+                v-for="item in wellTypeList"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value"
+              />
+            </el-select>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="20">
+        <el-col :span="12">
+          <el-form-item label="经度" prop="lng">
+            <el-input
+              v-model="deviceForm.lng"
+              clearable
+              placeholder="请输入经度"
+              :disabled="dialogStatus === 'detail' ? true : false"
+            />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="纬度" prop="lat">
+            <el-input
+              v-model="deviceForm.lat"
+              clearable
+              placeholder="请输入纬度"
+              :disabled="dialogStatus === 'detail' ? true : false"
+            />
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="20">
+        <el-col :span="12">
+          <el-form-item label="原始经度84" prop="coordinateX">
+            <el-input
+              v-model="deviceForm.coordinateX"
+              clearable
+              placeholder="原始经度84"
+              :disabled="dialogStatus === 'detail' ? true : false"
+            />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="原始纬度84" prop="coordinateY">
+            <el-input
+              v-model="deviceForm.coordinateY"
+              clearable
+              placeholder="原始纬度84"
+              :disabled="dialogStatus === 'detail' ? true : false"
+            />
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="20">
+        <el-col :span="12">
+          <el-form-item label="百度坐标纬度" prop="latBaidu">
+            <el-input
+              v-model="deviceForm.latBaidu"
+              clearable
+              placeholder="百度坐标纬度"
+              :disabled="dialogStatus === 'detail' ? true : false"
+            />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="百度坐标经度" prop="lngBaidu">
+            <el-input
+              v-model="deviceForm.lngBaidu"
+              clearable
+              placeholder="百度坐标经度"
+              :disabled="dialogStatus === 'detail' ? true : false"
+            />
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="20">
+        <el-col :span="12">
+          <el-form-item label="高德坐标纬度" prop="latGaode">
+            <el-input
+              v-model="deviceForm.latGaode"
+              clearable
+              placeholder="高德坐标纬度"
+              :disabled="dialogStatus === 'detail' ? true : false"
+            />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="高德坐标经度" prop="lngGaode">
+            <el-input
+              v-model="deviceForm.lngGaode"
+              clearable
+              placeholder="高德坐标经度"
+              :disabled="dialogStatus === 'detail' ? true : false"
+            />
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="20">
+        <el-col :span="12">
+          <el-form-item label="最后上传时间" prop="lastTime">
+            <el-input
+              v-model="deviceForm.lastTime"
+              clearable
+              placeholder="设备最后上传时间"
+              :disabled="dialogStatus === 'detail' ? true : false"
+            />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="设备离线天数" prop="offlineDays">
+            <el-input
+              v-model="deviceForm.offlineDays"
+              clearable
+              placeholder="设备离线天数"
+              :disabled="dialogStatus === 'detail' ? true : false"
+            />
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
+    <div
+      v-show="dialogStatus === 'detail' ? false : true"
+      slot="footer"
+      class="dialog-footer"
+    >
+      <el-button type="primary" @click="saveData">
+        保存
+      </el-button>
+      <el-button @click="dialogFormVisible = false">
+        取消
+      </el-button>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+import { getDevice, updateDept, addDept } from '@/api/systemConfig/deptPermission'
+export default {
+  name: 'EditDeviceStatics',
+  data() {
+    return {
+      dialogFormVisible: false, // 对话框显示隐藏
+      deviceTypeList: [], // 设备类型
+      dialogStatus: '', // 对话框类型：create,update,detail
+      // 对话框标题
+      textMap: {
+        update: '编辑',
+        create: '新增',
+        detail: '详情'
+      },
+      // 支持井类型
+      wellTypeList: [
+        {
+          label: '井类型一',
+          value: '1'
+        },
+        {
+          label: '井类型二',
+          value: '2'
+        }
+      ],
+      // 表单内容
+      deviceForm: {
+        deptid: '',
+        wellType: '',
+        deviceType: '',
+        lng: '',
+        lat: '',
+        coordinateX: '',
+        coordinateY: '',
+        latBaidu: '',
+        lngBaidu: '',
+        latGaode: '',
+        lngGaode: '',
+        lastTime: '',
+        offlineDays: ''
+      },
+      // 表单校验规则
+      rules: {
+        deptid: [{ required: true, message: '组织id不能为空', trigger: ['blur', 'change'] }],
+        wellType: [{ required: true, message: '支持井类型必选', trigger: ['blur', 'change'] }],
+        deviceType: [{ required: true, message: '支持设备类型必选', trigger: ['blur', 'change'] }],
+        lng: [{ required: true, message: '经度不能为空', trigger: ['blur', 'change'] }],
+        lat: [{ required: true, message: '纬度不能为空', trigger: ['blur', 'change'] }]
+      }
+    }
+  },
+  created() {
+    this.fetchDeviceType()
+  },
+  methods: {
+    // 获取设备类型
+    fetchDeviceType() {
+      getDevice().then(response => {
+        this.deviceTypeList = response.data
+      })
+    },
+    // 重置表单
+    resetForm() {
+      this.deviceForm = {
+        deptid: '',
+        wellType: '',
+        deviceType: '',
+        lng: '',
+        lat: ''
+      }
+    },
+    // 父子组件通信
+    initDialog(dialogStatus, row = null) {
+      this.dialogFormVisible = true
+      this.dialogStatus = dialogStatus
+      if (this.dialogStatus === 'create') {
+        this.resetForm()
+        this.$nextTick(() => {
+          this.$refs['dataForm'].clearValidate()
+        })
+      } else if (this.dialogStatus === 'update' || this.dialogStatus === 'detail') {
+        this.deviceForm = {
+          deptid: row.deptid,
+          wellType: row.wellType,
+          deviceType: row.deviceType,
+          lng: row.lng,
+          lat: row.lat
+        }
+      }
+    },
+    // 保存数据
+    saveData() {
+      if (this.dialogStatus === 'update') {
+        this.updateData()
+      } else if (this.dialogStatus === 'create') {
+        this.createData()
+      }
+    },
+    // 修改数据
+    updateData() {
+      this.$refs['dataForm'].validate((valid) => {
+        if (valid) {
+          updateDept(this.deviceForm).then(response => {
+            if (response.code === 200) {
+              this.$message.success('修改成功')
+              this.$emit('watchChild')
+              this.dialogFormVisible = false
+            }
+          })
+        }
+      })
+    },
+    // 新增数据
+    createData: function() {
+      this.$refs['dataForm'].validate((valid) => {
+        console.log(this.deviceForm)
+        if (valid) {
+          addDept(this.deviceForm).then(response => {
+            if (response.code === 200) {
+              this.$confirm('新增成功，是否继续新增?', '提示', {
+                confirmButtonText: '是',
+                cancelButtonText: '否',
+                type: 'info'
+              }).then(() => {
+                this.resetForm()
+                this.$nextTick(() => {
+                  this.$refs['dataForm'].clearValidate()
+                })
+              }).catch(() => {
+                this.$emit('watchChild') // 刷新父组件数据列表
+                this.dialogFormVisible = false
+              })
+            }
+          })
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  .el-select{
+    width: 100%;
+  }
+</style>

diff --git a/mock/deviceManage/device.js b/mock/deviceManage/device.js
new file mode 100644
index 0000000..1f0650d
--- /dev/null
+++ b/mock/deviceManage/device.js
@@ -0,0 +1,672 @@
+const deviceList = [
+  {
+    'bfzt': '0',
+    'bfztName': '撤防',
+    'communication': '3,4',
+    'concenCode': '',
+    'concenId': '',
+    'deptName': '燃气集团总公司',
+    'deptid': '24',
+    'installHeight': '123',
+    'devcode': '342021000001',
+    'deviceName': '',
+    'deviceType': '12',
+    'deviceTypeName': '开挖监测仪',
+    'id': '1476131375777120257',
+    'installDate': '2021-12-29',
+    'modelId': '19',
+    'modelName': 'BIRMM-RTU100N',
+    'onlineState': '1',
+    'onlineStateName': '在线',
+    'position': 'test001位置',
+    'ts': '2021-12-29',
+    'valid': '1',
+    'watchType': '燃气泄漏',
+    'wellCode': 'test001',
+    'wellId': '4453'
+  },
+  {
+    'bfzt': '0',
+    'bfztName': '撤防',
+    'communication': '3,4',
+    'concenCode': '',
+    'concenId': '',
+    'deptName': '燃气集团总公司',
+    'deptid': '24',
+    'installHeight': '123',
+    'devcode': '342021000001',
+    'deviceName': '',
+    'deviceType': '12',
+    'deviceTypeName': '井盖状态监测仪',
+    'id': '1476131375777120257',
+    'installDate': '2021-12-29',
+    'modelId': '19',
+    'modelName': 'BIRMM-RTU100N',
+    'onlineState': '1',
+    'onlineStateName': '在线',
+    'position': 'test001位置',
+    'ts': '2021-12-29',
+    'valid': '1',
+    'watchType': '燃气泄漏',
+    'wellCode': 'test001',
+    'wellId': '4453'
+  },
+  {
+    'bfzt': '0',
+    'bfztName': '撤防',
+    'communication': '3,4',
+    'concenCode': '',
+    'concenId': '',
+    'deptName': '燃气集团总公司',
+    'deptid': '24',
+    'installHeight': '123',
+    'devcode': '342021000001',
+    'deviceName': '',
+    'deviceType': '12',
+    'deviceTypeName': '液位监测仪',
+    'id': '1476131375777120257',
+    'installDate': '2021-12-29',
+    'modelId': '19',
+    'modelName': 'BIRMM-RTU100N',
+    'onlineState': '1',
+    'onlineStateName': '在线',
+    'position': 'test001位置',
+    'ts': '2021-12-29',
+    'valid': '1',
+    'watchType': '燃气泄漏',
+    'wellCode': 'test001',
+    'wellId': '4453'
+  },
+  {
+    'bfzt': '0',
+    'bfztName': '撤防',
+    'communication': '3,4',
+    'concenCode': '',
+    'concenId': '',
+    'deptName': '燃气集团总公司',
+    'deptid': '24',
+    'installHeight': '123',
+    'devcode': '342021000001',
+    'deviceName': '',
+    'deviceType': '12',
+    'deviceTypeName': '燃气智能监测终端',
+    'id': '1476131375777120257',
+    'installDate': '2021-12-29',
+    'modelId': '19',
+    'modelName': 'BIRMM-RTU100N',
+    'onlineState': '1',
+    'onlineStateName': '在线',
+    'position': 'test001位置',
+    'ts': '2021-12-29',
+    'valid': '1',
+    'watchType': '燃气泄漏',
+    'wellCode': 'test001',
+    'wellId': '4453'
+  },
+  {
+    'bfzt': '0',
+    'bfztName': '撤防',
+    'communication': '3,4',
+    'concenCode': '',
+    'concenId': '',
+    'deptName': '燃气集团总公司',
+    'deptid': '24',
+    'installHeight': '123',
+    'devcode': '342021000001',
+    'deviceName': '',
+    'deviceType': '12',
+    'deviceTypeName': '噪声记录仪',
+    'id': '1476131375777120257',
+    'installDate': '2021-12-29',
+    'modelId': '19',
+    'modelName': 'BIRMM-RTU100N',
+    'onlineState': '1',
+    'onlineStateName': '在线',
+    'position': 'test001位置',
+    'ts': '2021-12-29',
+    'valid': '1',
+    'watchType': '燃气泄漏',
+    'wellCode': 'test001',
+    'wellId': '4453'
+  },
+  {
+    'bfzt': '0',
+    'bfztName': '撤防',
+    'communication': '3,4',
+    'concenCode': '',
+    'concenId': '',
+    'deptName': '燃气集团总公司',
+    'deptid': '24',
+    'installHeight': '123',
+    'devcode': '342021000001',
+    'deviceName': '',
+    'deviceType': '12',
+    'deviceTypeName': '有害气体监测仪',
+    'id': '1476131375777120257',
+    'installDate': '2021-12-29',
+    'modelId': '19',
+    'modelName': 'BIRMM-RTU100N',
+    'onlineState': '1',
+    'onlineStateName': '在线',
+    'position': 'test001位置',
+    'ts': '2021-12-29',
+    'valid': '1',
+    'watchType': '燃气泄漏',
+    'wellCode': 'test001',
+    'wellId': '4453'
+  },
+  {
+    'bfzt': '0',
+    'bfztName': '撤防',
+    'communication': '3,4',
+    'concenCode': '',
+    'concenId': '',
+    'deptName': '燃气集团总公司',
+    'deptid': '24',
+    'installHeight': '123',
+    'devcode': '342021000001',
+    'deviceName': '',
+    'deviceType': '12',
+    'deviceTypeName': '温湿度监测仪',
+    'id': '1476131375777120257',
+    'installDate': '2021-12-29',
+    'modelId': '19',
+    'modelName': 'BIRMM-RTU100N',
+    'onlineState': '1',
+    'onlineStateName': '在线',
+    'position': 'test001位置',
+    'ts': '2021-12-29',
+    'valid': '1',
+    'watchType': '燃气泄漏',
+    'wellCode': 'test001',
+    'wellId': '4453'
+  },
+  {
+    'bfzt': '0',
+    'bfztName': '撤防',
+    'communication': '3,4',
+    'concenCode': '',
+    'concenId': '',
+    'deptName': '燃气集团总公司',
+    'deptid': '24',
+    'installHeight': '123',
+    'devcode': '342021000001',
+    'deviceName': '',
+    'deviceType': '12',
+    'deviceTypeName': '井盖定位监测仪',
+    'id': '1476131375777120257',
+    'installDate': '2021-12-29',
+    'modelId': '19',
+    'modelName': 'BIRMM-RTU100N',
+    'onlineState': '1',
+    'onlineStateName': '在线',
+    'position': 'test001位置',
+    'ts': '2021-12-29',
+    'valid': '1',
+    'watchType': '燃气泄漏',
+    'wellCode': 'test001',
+    'wellId': '4453'
+  },
+  {
+    'bfzt': '0',
+    'bfztName': '撤防',
+    'communication': '3,4',
+    'concenCode': '',
+    'concenId': '',
+    'deptName': '燃气集团总公司',
+    'deptid': '24',
+    'installHeight': '123',
+    'devcode': '342021000001',
+    'deviceName': '',
+    'deviceType': '12',
+    'deviceTypeName': '燃气智能终端（一体化）',
+    'id': '1476131375777120257',
+    'installDate': '2021-12-29',
+    'modelId': '19',
+    'modelName': 'BIRMM-RTU100N',
+    'onlineState': '1',
+    'onlineStateName': '在线',
+    'position': 'test001位置',
+    'ts': '2021-12-29',
+    'valid': '1',
+    'watchType': '燃气泄漏',
+    'wellCode': 'test001',
+    'wellId': '4453'
+  },
+  {
+    'bfzt': '0',
+    'bfztName': '撤防',
+    'communication': '3,4',
+    'concenCode': '',
+    'concenId': '',
+    'deptName': '燃气集团总公司',
+    'deptid': '24',
+    'installHeight': '123',
+    'devcode': '342021000001',
+    'deviceName': '',
+    'deviceType': '12',
+    'deviceTypeName': '管盯',
+    'id': '1476131375777120257',
+    'installDate': '2021-12-29',
+    'modelId': '19',
+    'modelName': 'BIRMM-RTU100N',
+    'onlineState': '1',
+    'onlineStateName': '在线',
+    'position': 'test001位置',
+    'ts': '2021-12-29',
+    'valid': '1',
+    'watchType': '燃气泄漏',
+    'wellCode': 'test001',
+    'wellId': '4453'
+  }
+]
+const deviceStaticsList = [
+  {
+    'deptName': '燃气集团总公司',
+    'deviceCount': '11',
+    'deptid': '24'
+  },
+  {
+    'deptName': '煤气公司',
+    'deviceCount': '2',
+    'deptid': '24'
+  },
+  {
+    'deptName': '电力公司',
+    'deviceCount': '11',
+    'deptid': '24'
+  }
+
+]
+const deviceOnlineList = [
+  {
+    'deviceType': '井盖状态监测仪',
+    'online': 1,
+    'offline': 9
+  },
+  {
+    'deviceType': '燃气智能监测终端',
+    'online': 1,
+    'offline': 2
+  },
+  {
+    'deviceType': '管盯',
+    'online': 1,
+    'offline': 6
+  }
+
+]
+const deviceOfflineList = [
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  }
+]
+module.exports = [
+  // mock get all routes form server
+  {
+    url: '/device/list',
+    type: 'get',
+    response: _ => {
+      return {
+        code: 200,
+        data: deviceList,
+        message: '请求成功',
+        success: true
+      }
+    }
+  },
+  {
+    url: '/statics/deviceStaticsByDept',
+    type: 'get',
+    response: _ => {
+      return {
+        code: 200,
+        data: deviceStaticsList,
+        message: '请求成功',
+        success: true
+      }
+    }
+  },
+  {
+    url: '/statics/deviceCountByOnlineStatus',
+    type: 'get',
+    response: _ => {
+      return {
+        code: 200,
+        data: deviceOnlineList,
+        message: '请求成功',
+        success: true
+      }
+    }
+  },
+  {
+    url: '/device/offlineListPage',
+    type: 'get',
+    response: _ => {
+      return {
+        code: 200,
+        'total': 120,
+        data: deviceOfflineList,
+        message: '请求成功',
+        success: true
+      }
+    }
+  }
+]
diff --git a/mock/index.js b/mock/index.js
index 6646246..0e60e80 100644
--- a/mock/index.js
+++ b/mock/index.js
@@ -12,6 +12,7 @@
 const dashboard = require('./biz/dashboard')
 const search = require('./remote-search')
 const overview = require('./biz/overview')
+const device = require('./deviceManage/device')
 const deviceType = require('./deviceManage/deviceType')
 const deviceModels = require('./deviceManage/deviceModels')
 const deviceImei = require('./deviceManage/deviceImei')
@@ -42,7 +43,8 @@
   ...tenantConfig,
   ...deptPermission,
   ...tenant,
-  ...warningRule
+  ...warningRule,
+  ...device
 ]
 
 // for front mock
diff --git a/src/api/data/dataStatics.js b/src/api/data/dataStatics.js
index b96a05e..04f756a 100644
--- a/src/api/data/dataStatics.js
+++ b/src/api/data/dataStatics.js
@@ -11,6 +11,14 @@
     params
   })
 }
+// 离线设备列表
+export function offlineList(params) {
+  return request({
+    url: 'device/offlineListPage',
+    method: 'get',
+    params
+  })
+}
 // 根据权属单位统计井数量
 export function wellStaticByDept(params) {
   return request({
@@ -38,6 +46,15 @@
   })
 }
 
+// 离线设备数量
+export function deviceStaticsByOnline(params) {
+  return request({
+    url: 'statics/deviceCountByOnlineStatus',
+    method: 'get',
+    params
+  })
+}
+
 // 根据权属单位统计设备数量
 export function deviceStaticsByDept(params) {
   return request({
diff --git a/src/components/NormalTable/index.vue b/src/components/NormalTable/index.vue
index 9e23838..3fdc6db 100644
--- a/src/components/NormalTable/index.vue
+++ b/src/components/NormalTable/index.vue
@@ -69,7 +69,7 @@
         </el-col>
       </el-row>
       <!-- 表格正文-->
-      <el-table v-loading="listLoading" :data="data" :size="size" class="table" row-class-name="small-row-class" border @selection-change="selectionChange" @row-click="rowClick">
+      <el-table v-loading="listLoading" :height="height" :data="data" :size="size" class="table" row-class-name="small-row-class" border @selection-change="selectionChange" @row-click="rowClick">
         <!--需要加在表最前方的插槽-->
         <slot name="preColumns" />
         <!--序号列-->
@@ -141,6 +141,12 @@
         return []
       }
     }, // 数据
+    height: {
+      type: Number,
+      default: function() {
+        return []
+      }
+    },
     total: {
       type: Number,
       default: 0
diff --git a/src/views/deviceManage/components/listDigData.vue b/src/views/deviceManage/components/listDigData.vue
new file mode 100644
index 0000000..5a2b795
--- /dev/null
+++ b/src/views/deviceManage/components/listDigData.vue
@@ -0,0 +1,19 @@
+<template>
+  <div>开挖监测仪</div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+
+    }
+  },
+  methods: {
+    initData: function(row = null) {
+      console.log(row, '===')
+    }
+  }
+}
+</script>
+
diff --git a/src/views/deviceManage/components/listGasData.vue b/src/views/deviceManage/components/listGasData.vue
new file mode 100644
index 0000000..ccbaa8b
--- /dev/null
+++ b/src/views/deviceManage/components/listGasData.vue
@@ -0,0 +1,18 @@
+<template>
+  <div>燃气智能监测终端</div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+
+    }
+  },
+  methods: {
+    initData: function(row = null) {
+      console.log(row, '===')
+    }
+  }
+}
+</script>
diff --git a/src/views/deviceManage/components/listHarmfulData.vue b/src/views/deviceManage/components/listHarmfulData.vue
new file mode 100644
index 0000000..687f9bc
--- /dev/null
+++ b/src/views/deviceManage/components/listHarmfulData.vue
@@ -0,0 +1,18 @@
+<template>
+  <div>有害气体监测仪</div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+
+    }
+  },
+  methods: {
+    initData: function(row = null) {
+      console.log(row, '===')
+    }
+  }
+}
+</script>
diff --git a/src/views/deviceManage/components/listLiquidData.vue b/src/views/deviceManage/components/listLiquidData.vue
new file mode 100644
index 0000000..f279ee9
--- /dev/null
+++ b/src/views/deviceManage/components/listLiquidData.vue
@@ -0,0 +1,18 @@
+<template>
+  <div>液位监测仪</div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+
+    }
+  },
+  methods: {
+    initData: function(row = null) {
+      console.log(row, '===')
+    }
+  }
+}
+</script>
diff --git a/src/views/deviceManage/components/listLiquidGasData.vue b/src/views/deviceManage/components/listLiquidGasData.vue
new file mode 100644
index 0000000..6f5535e
--- /dev/null
+++ b/src/views/deviceManage/components/listLiquidGasData.vue
@@ -0,0 +1,18 @@
+<template>
+  <div>燃气智能终端（一体化）</div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+
+    }
+  },
+  methods: {
+    initData: function(row = null) {
+      console.log(row, '===')
+    }
+  }
+}
+</script>
diff --git a/src/views/deviceManage/components/listNoiseData.vue b/src/views/deviceManage/components/listNoiseData.vue
new file mode 100644
index 0000000..7dad007
--- /dev/null
+++ b/src/views/deviceManage/components/listNoiseData.vue
@@ -0,0 +1,18 @@
+<template>
+  <div>噪声记录仪</div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+
+    }
+  },
+  methods: {
+    initData: function(row = null) {
+      console.log(row, '===')
+    }
+  }
+}
+</script>
diff --git a/src/views/deviceManage/components/listTempData.vue b/src/views/deviceManage/components/listTempData.vue
new file mode 100644
index 0000000..f7548b5
--- /dev/null
+++ b/src/views/deviceManage/components/listTempData.vue
@@ -0,0 +1,18 @@
+<template>
+  <div>温湿度监测仪</div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+
+    }
+  },
+  methods: {
+    initData: function(row = null) {
+      console.log(row, '===')
+    }
+  }
+}
+</script>
diff --git a/src/views/deviceManage/components/listTubeData.vue b/src/views/deviceManage/components/listTubeData.vue
new file mode 100644
index 0000000..94f1772
--- /dev/null
+++ b/src/views/deviceManage/components/listTubeData.vue
@@ -0,0 +1,18 @@
+<template>
+  <div>管盯</div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+
+    }
+  },
+  methods: {
+    initData: function(row = null) {
+      console.log(row, '===')
+    }
+  }
+}
+</script>
diff --git a/src/views/deviceManage/components/listWellData.vue b/src/views/deviceManage/components/listWellData.vue
new file mode 100644
index 0000000..7a6436d
--- /dev/null
+++ b/src/views/deviceManage/components/listWellData.vue
@@ -0,0 +1,18 @@
+<template>
+  <div>井盖状态监测仪</div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+
+    }
+  },
+  methods: {
+    initData: function(row = null) {
+      console.log(row, '===')
+    }
+  }
+}
+</script>
diff --git a/src/views/deviceManage/components/listWellLocaData.vue b/src/views/deviceManage/components/listWellLocaData.vue
new file mode 100644
index 0000000..f784671
--- /dev/null
+++ b/src/views/deviceManage/components/listWellLocaData.vue
@@ -0,0 +1,18 @@
+<template>
+  <div>井盖定位监测仪</div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+
+    }
+  },
+  methods: {
+    initData: function(row = null) {
+      console.log(row, '===')
+    }
+  }
+}
+</script>
diff --git a/src/views/deviceManage/detailDevice.vue b/src/views/deviceManage/detailDevice.vue
index eefc549..8285ee7 100644
--- a/src/views/deviceManage/detailDevice.vue
+++ b/src/views/deviceManage/detailDevice.vue
@@ -3,110 +3,114 @@
     <el-form ref="dataForm" :model="deviceForm" label-well-code="right" label-width="100px">
       <el-row :gutter="20">
         <el-col :span="12">
-          <el-form-item label="设备名称" prop="deviceName">
-            <el-input v-model="deviceForm.deviceName" type="text" placeholder="未知" disabled />
+          <el-form-item label="设备编号" prop="devcode">
+            <el-input v-model.trim="deviceForm.devcode" disabled type="text" placeholder="必填" />
           </el-form-item>
         </el-col>
         <el-col :span="12">
-          <el-form-item label="设备编号" prop="devcode">
-            <el-input v-model="deviceForm.devcode" type="text" placeholder="未知" disabled />
+          <el-form-item label="安装日期" prop="installDate">
+            <el-date-picker
+              v-model.trim="deviceForm.installDate"
+              disabled
+              type="date"
+              value-format="yyyy-MM-dd"
+              placeholder="选择日期"
+            />
           </el-form-item>
         </el-col>
       </el-row>
       <el-row :gutter="20">
         <el-col :span="12">
           <el-form-item label="设备类型" prop="deviceType">
-            <el-input v-model="deviceForm.deviceTypeName" type="text" placeholder="未知" disabled />
+            <el-select v-model="deviceForm.deviceType" disabled placeholder="请选择设备类型">
+              <el-option
+                v-for="item in deviceTypeList"
+                :key="item.value"
+                :label="item.name"
+                :value="item.value"
+              />
+            </el-select>
           </el-form-item>
         </el-col>
         <el-col :span="12">
           <el-form-item label="设备型号" prop="modelId">
-            <el-input v-model="deviceForm.modelName" type="text" placeholder="未知" disabled />
-          </el-form-item>
-        </el-col>
-      </el-row>
-      <el-row :gutter="20">
-        <el-col :span="12">
-          <el-form-item label="在线状态" prop="wellCode">
-            <el-input v-model="deviceForm.onlineStateName" type="text" placeholder="未知" disabled />
-          </el-form-item>
-        </el-col>
-        <el-col :span="12">
-          <el-form-item label="权属单位" prop="concenCode">
-            <el-input v-model="deviceForm.deptName" type="text" placeholder="未知" disabled />
+            <el-select v-model="deviceForm.modelId" disabled placeholder="请选择设备型号">
+              <el-option
+                v-for="item in deviceModelList"
+                :key="item.value"
+                :label="item.name"
+                :value="item.value"
+              />
+            </el-select>
           </el-form-item>
         </el-col>
       </el-row>
       <el-row :gutter="20">
         <el-col :span="12">
           <el-form-item label="井编号" prop="wellCode">
-            <el-input v-model="deviceForm.wellCode" type="text" placeholder="未知" disabled />
+            <el-input v-model.trim="deviceForm.wellCode" disabled type="text" placeholder="必填" />
           </el-form-item>
         </el-col>
         <el-col :span="12">
-          <el-form-item label="布防状态" prop="bfztName">
-            <el-input v-model="deviceForm.bfztName" type="text" placeholder="未知" disabled />
-          </el-form-item>
-        </el-col>
-      </el-row>
-      <el-row :gutter="20">
-        <el-col :span="24">
-          <el-form-item label="位置" prop="position">
-            <el-input v-model="deviceForm.position" type="text" placeholder="未知" disabled />
-          </el-form-item>
-        </el-col>
-      </el-row>
-      <el-row :gutter="20">
-        <el-col :span="12">
-          <el-form-item label="安装日期" prop="installDate">
-            <el-input v-model="deviceForm.installDate" type="text" placeholder="未知" disabled />
-          </el-form-item>
-        </el-col>
-        <el-col :span="12">
-          <el-form-item label="集中器编号" prop="concenCode">
-            <el-input v-model="deviceForm.concenCode" type="text" placeholder="未知" disabled />
-          </el-form-item>
-        </el-col>
-      </el-row>
-      <el-row :gutter="20">
-        <el-col :span="12">
-          <el-form-item label="设备安装高度" prop="installHeight">
-            <el-input v-model="deviceForm.installHeight" type="text" placeholder="未知" disabled />
+          <el-form-item label="安装高度(m)" prop="installHeight">
+            <el-input v-model.trim="deviceForm.installHeight" disabled type="text" placeholder="必填" />
           </el-form-item>
         </el-col>
       </el-row>
     </el-form>
+    <component :is="cmpName" ref="deviceTypeDialog" @watchChild="fetchDeviceList" />
   </el-dialog>
 </template>
 
 <script>
+import listDigData from './components/listDigData'
+import listGasData from './components/listGasData'
+import listHarmfulData from './components/listHarmfulData'
+import listLiquidData from './components/listLiquidData'
+import listLiquidGasData from './components/listLiquidGasData'
+import listNoiseData from './components/listNoiseData'
+import listTempData from './components/listTempData'
+import listTubeData from './components/listTubeData'
+import listWellData from './components/listWellData'
+import listWellLocaData from './components/listWellLocaData'
 
 export default {
-  name: 'DetailDevice',
+  name: 'EditDevice',
+  components: {
+    listDigData,
+    listGasData,
+    listHarmfulData,
+    listLiquidData,
+    listLiquidGasData,
+    listNoiseData,
+    listTempData,
+    listTubeData,
+    listWellData,
+    listWellLocaData
+  },
   data() {
     return {
       dialogFormVisible: false, // 对话框是否显示
-      dialogStatus: '', // 对话框类型：create,update
+      dialogStatus: '', // 对话框类型：create,update,detail
+      cmpName: '', // 组件名称
       deviceForm: {
         id: '',
         deviceName: '',
         devcode: '',
-        deviceTypeName: '',
+        deviceType: '',
         wellCode: '',
-        modelName: '',
+        modelId: '',
         installDate: '',
         concenCode: '',
-        installHeight: '',
-        onlineStateName: '',
-        deptName: '',
-        bfztName: '',
-        position: ''
+        installHeight: ''
       }, // 表单
       textMap: {
         update: '编辑',
         create: '新增',
         detail: '详情'
-      } // 表头显示标题z
+      }, // 表头显示标题
+      deviceTypeList: null, // 设备类型列表
+      deviceModelList: null // 设备型号列表
     }
   },
   methods: {
@@ -114,20 +118,57 @@
     initDialog: function(dialogStatus, dialogFormVisible, row = null) {
       this.dialogStatus = dialogStatus
       this.dialogFormVisible = dialogFormVisible
+      this.resetForm()
       this.deviceForm = {
         id: row.id,
         deviceName: row.deviceName,
         devcode: row.devcode,
-        deviceTypeName: row.deviceTypeName,
+        deviceType: row.deviceType,
+        modelId: row.modelId,
         wellCode: row.wellCode,
-        modelName: row.modelName,
-        installDate: row.installDate,
         concenCode: row.concenCode,
-        installHeight: row.installHeight,
-        onlineStateName: row.onlineStateName,
-        deptName: row.deptName,
-        bfztName: row.bfztName,
-        position: row.position
+        installDate: row.installDate,
+        installHeight: row.installHeight
+      }
+      // 展示相对应的设备列表组件
+      if (row.deviceTypeName === '开挖监测仪') {
+        this.cmpName = 'list-dig-data'
+      } else if (row.deviceTypeName === '井盖状态监测仪') {
+        this.cmpName = 'list-well-data'
+      } else if (row.deviceTypeName === '液位监测仪') {
+        this.cmpName = 'list-liquid-data'
+      } else if (row.deviceTypeName === '燃气智能监测终端') {
+        this.cmpName = 'list-gas-data'
+      } else if (row.deviceTypeName === '噪声记录仪') {
+        this.cmpName = 'list-noise-data'
+      } else if (row.deviceTypeName === '有害气体监测仪') {
+        this.cmpName = 'list-harmful-data'
+      } else if (row.deviceTypeName === '温湿度监测仪') {
+        this.cmpName = 'list-temp-data'
+      } else if (row.deviceTypeName === '井盖定位监测仪') {
+        this.cmpName = 'list-well-loca-data'
+      } else if (row.deviceTypeName === '燃气智能终端（一体化）') {
+        this.cmpName = 'list-liquid-gas-data'
+      } else if (row.deviceTypeName === '管盯') {
+        this.cmpName = 'list-tube-data'
+      }
+      setTimeout(() => {
+        this.$refs.deviceTypeDialog.initData(row)
+      }, 100)
+    },
+    fetchDeviceList() {},
+    // 重置表单
+    resetForm() {
+      this.deviceForm = {
+        id: '',
+        deviceName: '',
+        devcode: '',
+        deviceType: '',
+        wellCode: '',
+        modelId: '',
+        installDate: '',
+        concenCode: '',
+        installHeight: ''
       }
     }
   }
@@ -138,4 +179,7 @@
   .el-select{
     width: 100%;
   }
+  .el-date-editor{
+    width: 100%;
+  }
 </style>
diff --git a/src/views/deviceManage/editDevice.vue b/src/views/deviceManage/editDevice.vue
index 41c6907..0ae2cab 100644
--- a/src/views/deviceManage/editDevice.vue
+++ b/src/views/deviceManage/editDevice.vue
@@ -65,7 +65,7 @@
       <el-row :gutter="20">
         <el-col :span="12">
           <el-form-item label="安装高度(m)" prop="installHeight">
-            <el-input v-model.trim="deviceForm.installHeight" :disabled="isDetailMode" type="text" placeholder="非必填" />
+            <el-input v-model.trim="deviceForm.installHeight" :disabled="isDetailMode" type="text" placeholder="必填" />
           </el-form-item>
         </el-col>
       </el-row>
@@ -116,7 +116,8 @@
         wellCode: [{ required: true, message: '井编号不能为空', trigger: ['blur', 'change'] }],
         deviceType: [{ required: true, message: '设备类型必选', trigger: ['blur', 'change'] }],
         modelId: [{ required: true, message: '设备型号必选', trigger: ['blur', 'change'] }],
-        installDate: [{ required: true, message: '安装日期必选', trigger: ['blur', 'change'] }]
+        installDate: [{ required: true, message: '安装日期必选', trigger: ['blur', 'change'] }],
+        installHeight: [{ required: true, message: '设备安装高度不能为空', trigger: ['blur', 'change'] }]
       }, // 前端校验规则
       isEditMode: false, // 编辑模式
       isDetailMode: false // 详情模式
diff --git a/src/views/deviceManage/listDevice.vue b/src/views/deviceManage/listDevice.vue
index 2303523..623cf06 100644
--- a/src/views/deviceManage/listDevice.vue
+++ b/src/views/deviceManage/listDevice.vue
@@ -76,7 +76,6 @@
       </el-row>
       <el-table v-loading="listLoading" :data="list" class="table" border @selection-change="handleSelectionChange">
         <el-table-column v-if="hasPerm('/device/delete')" align="center" type="selection" width="55" />
-        <el-table-column :index="indexMethod" align="center" type="index" />
         <el-table-column v-for="column in columns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
           <template slot-scope="scope">
             <span v-if="column.type!='Button'" :class="column.class">{{ scope.row[column.value] }}</span>
@@ -272,7 +271,7 @@
       this.$refs.editdevice.initDialog('update', this.dialogFormVisible, row)
     },
     detail(row) {
-      this.$refs.editdevice.initDialog('detail', true, row)
+      this.$refs.detaildevice.initDialog('detail', true, row)
     },
     // 删除设备
     del() {
@@ -367,7 +366,7 @@
         this.listQuery.offset = 1
       }
       getDeviceList(this.listQuery).then(response => {
-        this.list = response.data.rows
+        this.list = response.data
         this.total = parseInt(response.data.total)
         this.listLoading = false
       })
diff --git a/src/views/deviceStatics/components/deviceCountByDept.vue b/src/views/deviceStatics/components/deviceCountByDept.vue
index 6dc7375..0d4a211 100644
--- a/src/views/deviceStatics/components/deviceCountByDept.vue
+++ b/src/views/deviceStatics/components/deviceCountByDept.vue
@@ -1,77 +1,81 @@
 <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-row>
+    <el-col>
+      <el-card shadow="never">
+        <el-col>
+          <el-col :span="18">
+            <div class="flagBoxStyle">
+              <div class="flagStyle" />
+              <div>各单位安装设备情况统计</div>
+            </div>
+          </el-col>
+          <el-col :span="6">
+            <el-select
+              v-model="listQuery.deviceType"
+              size="small"
+              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-col>
-      </el-row>
-    </div>
-    <div>
-      <ve-histogram :data="chartData" :grid="grid" :extend="extend" :settings="chartSettings" />
-    </div>
-  </div>
+
+        <el-col>
+          <ve-bar
+            :data="chartData"
+            :grid="grid"
+            :extend="extend"
+            :settings="chartSettings"
+          />
+        </el-col>
+      </el-card>
+    </el-col>
+  </el-row>
 </template>
 
 <script>
 import { getDeviceType } from '@/api/device/device'
 import { deviceStaticsByDept } from '@/api/data/dataStatics'
+
 export default {
   name: 'DeviceCountByDept',
   data() {
-    this.extend = {
-      xAxis: {
-        axisLabel: {
-          rotate: 30,
-          margin: 30,
-          textStyle: {
-            align: 'center'
-          }
-        }
-      },
-      series: {
-        label: { show: true, position: 'top' },
-        barMaxWidth: 35 // 最大柱宽度
-      }
-    }
-    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: '',
+      extend: {
+        series: {
+          label: { show: true, position: 'right' },
+          barMaxWidth: 35 // 最大柱宽度
+        }
+      },
+      grid: {
+        right: 60
+      },
+      // title: {
+      //   text: '井类型数量统计'
+      // },
+      chartSettings: {
+        itemStyle: {
+          'barCategoryGap': 5
+        },
+        barWidth: 15,
+        labelMap: {
+          'deptName': '权属单位',
+          'deviceCount': '设备数量（个）'
+        },
+        dimension: ['deptName'],
+        metrics: ['deviceCount']
+      },
       chartData: {
         columns: ['deptName', 'deviceCount'],
         rows: []
@@ -85,25 +89,11 @@
   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
-        }
+      getDeviceType().then(response => {
+        this.deviceTypeList = response.data
       })
     },
     fetchData() {
-      console.log('fetchData')
       deviceStaticsByDept(this.listQuery).then(response => {
         this.chartData.rows = response.data
       })
@@ -113,16 +103,19 @@
 </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*/
-  }
+.flagBoxStyle {
+  display: flex;
+  margin-bottom: 20px;
+}
+.flagBoxStyle div:nth-child(2){
+  line-height: 30px;
+  font-weight: 600;
+}
+.flagStyle {
+  width: 4px;
+  height: 30px;
+  margin-right: 6px;
+  background: rgb(64 121 242);
+}
 </style>
+
diff --git a/src/views/deviceStatics/components/deviceCountByOffline.vue b/src/views/deviceStatics/components/deviceCountByOffline.vue
new file mode 100644
index 0000000..ba81bec
--- /dev/null
+++ b/src/views/deviceStatics/components/deviceCountByOffline.vue
@@ -0,0 +1,139 @@
+<template>
+  <el-row>
+    <el-col>
+      <el-card shadow="never">
+        <el-col>
+          <div class="flagBoxStyle">
+            <div class="flagStyle" />
+            <div>离线分析</div>
+          </div>
+        </el-col>
+        <el-col>
+          <div>
+            <span class="titleStyle">离线设备</span>
+            <span class="countStyle">12</span>
+            <span>个</span>
+          </div>
+        </el-col>
+        <el-col>
+          <el-col :span="16">
+            <ve-histogram
+              :data="chartData"
+              :grid="grid"
+              :extend="extend"
+              :settings="chartSettings"
+            />
+          </el-col>
+          <el-col :span="8">
+            <ve-pie
+              :data="chartDataPie"
+              :extend="extendPie"
+            />
+          </el-col>
+        </el-col>
+      </el-card>
+    </el-col>
+  </el-row>
+</template>
+
+<script>
+import { deviceStaticsByOnline } from '@/api/data/dataStatics'
+export default {
+  name: 'DeviceCountByOffline',
+  data() {
+    return {
+      online: 0,
+      offline: 0,
+      // 饼状图
+      extendPie: {
+        series: {
+          label: { show: true, position: 'outside', formatter: '{b}:{c}' },
+          radius: '45%'
+        }
+      },
+      chartDataPie: {
+        columns: ['onlineStatus', 'deviceCount'],
+        rows: []
+      },
+      // 柱状图
+      extend: {
+        xAxis: {
+          axisLabel: {
+            rotate: 30,
+            margin: 30,
+            textStyle: {
+              align: 'center'
+            }
+          }
+        },
+        series: {
+          label: { show: true, position: 'top' },
+          barMaxWidth: 35 // 最大柱宽度
+        }
+      },
+      grid: {
+        right: 60
+      },
+      chartSettings: {
+        itemStyle: {
+          'barCategoryGap': 5
+        },
+        barWidth: 15,
+        labelMap: {
+          'deviceType': '权属单位',
+          'offline': '设备数量（个）'
+        },
+        dimension: ['deviceType'],
+        metrics: ['offline']
+      },
+      chartData: {
+        columns: ['deviceType', 'offline'],
+        rows: []
+      }
+    }
+  },
+  created() {
+    this.fetchDeviceType()
+  },
+  methods: {
+    fetchDeviceType() {
+      deviceStaticsByOnline().then(response => {
+        response.data.forEach((item) => {
+          this.online += item.online
+          this.offline += item.offline
+        })
+        this.chartData.rows = response.data
+        this.chartDataPie.rows = [
+          { 'onlineStatus': '在线', 'deviceCount': this.online },
+          { 'onlineStatus': '离线', 'deviceCount': this.offline }
+        ]
+      })
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.flagBoxStyle {
+  display: flex;
+  margin-bottom: 20px;
+}
+.flagBoxStyle div:nth-child(2){
+  line-height: 30px;
+  font-weight: 600;
+}
+.flagStyle {
+  width: 4px;
+  height: 30px;
+  margin-right: 6px;
+  background: rgb(64 121 242);
+}
+.titleStyle {
+  margin-left: 20px;
+  font-size: 12px;
+}
+.countStyle {
+  font-size: 20px;
+  margin: 0 10px;
+}
+</style>
diff --git a/src/views/deviceStatics/components/deviceCountByType.vue b/src/views/deviceStatics/components/deviceCountByType.vue
index 6e71cf8..20adea4 100644
--- a/src/views/deviceStatics/components/deviceCountByType.vue
+++ b/src/views/deviceStatics/components/deviceCountByType.vue
@@ -1,62 +1,99 @@
 <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>
+  <el-row>
+    <el-col>
+      <el-card shadow="never">
+        <el-col>
+          <div class="flagBoxStyle">
+            <div class="flagStyle" />
+            <div>设备总体情况</div>
+          </div>
+        </el-col>
+        <el-col class="cardStyle">
+          <el-col :span="10">
+            <el-card>
+              <div>
+                <span class="ttileStyle">设备总数</span>
+                <span class="countStyle">123</span>
+                <span>个</span>
+              </div>
+            </el-card>
+          </el-col>
+          <el-col :span="10">
+            <el-card>
+              <div>
+                <span class="ttileStyle">低电量设备总数</span>
+                <span class="countStyle">123</span>
+                <span>个</span>
+              </div>
+            </el-card>
+          </el-col>
+        </el-col>
+        <el-col>
+          <div class="flagBoxStyle">
+            <div class="flagStyle" />
+            <div>设备数量分析</div>
+          </div>
+        </el-col>
+        <el-col>
+          <ve-histogram
+            :data="chartData"
+            :grid="grid"
+            :extend="extend"
+            :settings="chartSettings"
+          />
+        </el-col>
+      </el-card>
+    </el-col>
+  </el-row>
 </template>
 
 <script>
 import { deviceStaticsByType } from '@/api/data/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 {
+      extend: {
+        xAxis: {
+          axisLabel: {
+            rotate: 30,
+            margin: 30,
+            textStyle: {
+              align: 'center'
+            }
+          }
+        },
+        series: {
+          label: { show: true, position: 'top' },
+          barMaxWidth: 35 // 最大柱宽度
+        }
+      },
+      grid: {
+        right: 60
+      },
+      chartSettings: {
+        itemStyle: {
+          'barCategoryGap': 5
+        },
+        barWidth: 15,
+        labelMap: {
+          'deviceType': '权属单位',
+          'deviceCount': '设备数量（个）'
+        },
+        dimension: ['deviceType'],
+        metrics: ['deviceCount']
+      },
       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 }
-    // ]
+  created() {
+    this.fetchDeviceType()
   },
   methods: {
-    fetchData() {
+    fetchDeviceType() {
       deviceStaticsByType().then(response => {
         this.chartData.rows = response.data
       })
@@ -66,11 +103,30 @@
 </script>
 
 <style rel="stylesheet/scss" lang="scss" scoped>
-  .chart-title{
-    margin: auto;
-    text-align: center;
-    margin-top: 15px;
-    font-size:20px;
-    font-weight:600
-  }
+.flagBoxStyle {
+  display: flex;
+  margin-bottom: 20px;
+}
+.flagBoxStyle div:nth-child(2){
+  line-height: 30px;
+  font-weight: 600;
+}
+.flagStyle {
+  width: 4px;
+  height: 30px;
+  margin-right: 6px;
+  background: rgb(64 121 242);
+}
+.cardStyle {
+  display:flex;
+  margin-bottom: 20px;
+  justify-content: space-around;
+}
+.ttileStyle {
+  font-size: 12px;
+}
+.countStyle {
+  font-size: 20px;
+  margin: 0 10px;
+}
 </style>
diff --git a/src/views/deviceStatics/components/editDeviceStatics.vue b/src/views/deviceStatics/components/editDeviceStatics.vue
new file mode 100644
index 0000000..959e7da
--- /dev/null
+++ b/src/views/deviceStatics/components/editDeviceStatics.vue
@@ -0,0 +1,322 @@
+<template>
+  <el-dialog
+    append-to-body
+    :title="textMap[dialogStatus]"
+    :visible.sync="dialogFormVisible"
+  >
+    <el-form
+      ref="dataForm"
+      :rules="rules"
+      :model="deviceForm"
+      label-width="100px"
+      label-well-code="right"
+    >
+      <el-row :gutter="20">
+        <el-col :span="12">
+          <el-form-item label="设备类型" prop="deviceType">
+            <el-select
+              v-model="deviceForm.deviceType"
+              placeholder="请选择设备类型"
+              clearable
+              :disabled="dialogStatus === 'detail' ? true : false"
+            >
+              <el-option
+                v-for="item in deviceTypeList"
+                :key="item.value"
+                :label="item.name"
+                :value="item.value"
+              />
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="井类型" prop="wellType">
+            <el-select
+              v-model="deviceForm.wellType"
+              clearable
+              placeholder="请选择支持井类型"
+              :disabled="dialogStatus === 'detail' ? true : false"
+            >
+              <el-option
+                v-for="item in wellTypeList"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value"
+              />
+            </el-select>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="20">
+        <el-col :span="12">
+          <el-form-item label="经度" prop="lng">
+            <el-input
+              v-model="deviceForm.lng"
+              clearable
+              placeholder="请输入经度"
+              :disabled="dialogStatus === 'detail' ? true : false"
+            />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="纬度" prop="lat">
+            <el-input
+              v-model="deviceForm.lat"
+              clearable
+              placeholder="请输入纬度"
+              :disabled="dialogStatus === 'detail' ? true : false"
+            />
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="20">
+        <el-col :span="12">
+          <el-form-item label="原始经度84" prop="coordinateX">
+            <el-input
+              v-model="deviceForm.coordinateX"
+              clearable
+              placeholder="原始经度84"
+              :disabled="dialogStatus === 'detail' ? true : false"
+            />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="原始纬度84" prop="coordinateY">
+            <el-input
+              v-model="deviceForm.coordinateY"
+              clearable
+              placeholder="原始纬度84"
+              :disabled="dialogStatus === 'detail' ? true : false"
+            />
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="20">
+        <el-col :span="12">
+          <el-form-item label="百度坐标纬度" prop="latBaidu">
+            <el-input
+              v-model="deviceForm.latBaidu"
+              clearable
+              placeholder="百度坐标纬度"
+              :disabled="dialogStatus === 'detail' ? true : false"
+            />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="百度坐标经度" prop="lngBaidu">
+            <el-input
+              v-model="deviceForm.lngBaidu"
+              clearable
+              placeholder="百度坐标经度"
+              :disabled="dialogStatus === 'detail' ? true : false"
+            />
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="20">
+        <el-col :span="12">
+          <el-form-item label="高德坐标纬度" prop="latGaode">
+            <el-input
+              v-model="deviceForm.latGaode"
+              clearable
+              placeholder="高德坐标纬度"
+              :disabled="dialogStatus === 'detail' ? true : false"
+            />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="高德坐标经度" prop="lngGaode">
+            <el-input
+              v-model="deviceForm.lngGaode"
+              clearable
+              placeholder="高德坐标经度"
+              :disabled="dialogStatus === 'detail' ? true : false"
+            />
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="20">
+        <el-col :span="12">
+          <el-form-item label="最后上传时间" prop="lastTime">
+            <el-input
+              v-model="deviceForm.lastTime"
+              clearable
+              placeholder="设备最后上传时间"
+              :disabled="dialogStatus === 'detail' ? true : false"
+            />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="设备离线天数" prop="offlineDays">
+            <el-input
+              v-model="deviceForm.offlineDays"
+              clearable
+              placeholder="设备离线天数"
+              :disabled="dialogStatus === 'detail' ? true : false"
+            />
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
+    <div
+      v-show="dialogStatus === 'detail' ? false : true"
+      slot="footer"
+      class="dialog-footer"
+    >
+      <el-button type="primary" @click="saveData">
+        保存
+      </el-button>
+      <el-button @click="dialogFormVisible = false">
+        取消
+      </el-button>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+import { getDevice, updateDept, addDept } from '@/api/systemConfig/deptPermission'
+export default {
+  name: 'EditDeviceStatics',
+  data() {
+    return {
+      dialogFormVisible: false, // 对话框显示隐藏
+      deviceTypeList: [], // 设备类型
+      dialogStatus: '', // 对话框类型：create,update,detail
+      // 对话框标题
+      textMap: {
+        update: '编辑',
+        create: '新增',
+        detail: '详情'
+      },
+      // 支持井类型
+      wellTypeList: [
+        {
+          label: '井类型一',
+          value: '1'
+        },
+        {
+          label: '井类型二',
+          value: '2'
+        }
+      ],
+      // 表单内容
+      deviceForm: {
+        deptid: '',
+        wellType: '',
+        deviceType: '',
+        lng: '',
+        lat: '',
+        coordinateX: '',
+        coordinateY: '',
+        latBaidu: '',
+        lngBaidu: '',
+        latGaode: '',
+        lngGaode: '',
+        lastTime: '',
+        offlineDays: ''
+      },
+      // 表单校验规则
+      rules: {
+        deptid: [{ required: true, message: '组织id不能为空', trigger: ['blur', 'change'] }],
+        wellType: [{ required: true, message: '支持井类型必选', trigger: ['blur', 'change'] }],
+        deviceType: [{ required: true, message: '支持设备类型必选', trigger: ['blur', 'change'] }],
+        lng: [{ required: true, message: '经度不能为空', trigger: ['blur', 'change'] }],
+        lat: [{ required: true, message: '纬度不能为空', trigger: ['blur', 'change'] }]
+      }
+    }
+  },
+  created() {
+    this.fetchDeviceType()
+  },
+  methods: {
+    // 获取设备类型
+    fetchDeviceType() {
+      getDevice().then(response => {
+        this.deviceTypeList = response.data
+      })
+    },
+    // 重置表单
+    resetForm() {
+      this.deviceForm = {
+        deptid: '',
+        wellType: '',
+        deviceType: '',
+        lng: '',
+        lat: ''
+      }
+    },
+    // 父子组件通信
+    initDialog(dialogStatus, row = null) {
+      this.dialogFormVisible = true
+      this.dialogStatus = dialogStatus
+      if (this.dialogStatus === 'create') {
+        this.resetForm()
+        this.$nextTick(() => {
+          this.$refs['dataForm'].clearValidate()
+        })
+      } else if (this.dialogStatus === 'update' || this.dialogStatus === 'detail') {
+        this.deviceForm = {
+          deptid: row.deptid,
+          wellType: row.wellType,
+          deviceType: row.deviceType,
+          lng: row.lng,
+          lat: row.lat
+        }
+      }
+    },
+    // 保存数据
+    saveData() {
+      if (this.dialogStatus === 'update') {
+        this.updateData()
+      } else if (this.dialogStatus === 'create') {
+        this.createData()
+      }
+    },
+    // 修改数据
+    updateData() {
+      this.$refs['dataForm'].validate((valid) => {
+        if (valid) {
+          updateDept(this.deviceForm).then(response => {
+            if (response.code === 200) {
+              this.$message.success('修改成功')
+              this.$emit('watchChild')
+              this.dialogFormVisible = false
+            }
+          })
+        }
+      })
+    },
+    // 新增数据
+    createData: function() {
+      this.$refs['dataForm'].validate((valid) => {
+        console.log(this.deviceForm)
+        if (valid) {
+          addDept(this.deviceForm).then(response => {
+            if (response.code === 200) {
+              this.$confirm('新增成功，是否继续新增?', '提示', {
+                confirmButtonText: '是',
+                cancelButtonText: '否',
+                type: 'info'
+              }).then(() => {
+                this.resetForm()
+                this.$nextTick(() => {
+                  this.$refs['dataForm'].clearValidate()
+                })
+              }).catch(() => {
+                this.$emit('watchChild') // 刷新父组件数据列表
+                this.dialogFormVisible = false
+              })
+            }
+          })
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  .el-select{
+    width: 100%;
+  }
+</style>
diff --git a/src/views/deviceStatics/components/listdeviceOffline.vue b/src/views/deviceStatics/components/listdeviceOffline.vue
new file mode 100644
index 0000000..dd748fc
--- /dev/null
+++ b/src/views/deviceStatics/components/listdeviceOffline.vue
@@ -0,0 +1,220 @@
+<template>
+  <el-row>
+    <el-col>
+      <el-card shadow="never">
+        <el-col>
+          <div class="flagBoxStyle">
+            <div class="flagStyle" />
+            <div>离线设备</div>
+          </div>
+        </el-col>
+        <el-col>
+          <search-area type="">
+            <!--一般查询条件-->
+            <search-item>
+              <el-input
+                v-model="listQuery.deviceCode"
+                placeholder="设备编号"
+                clearable
+              />
+            </search-item>
+            <search-item>
+              <el-select
+                v-model="listQuery.deviceType"
+                clearable
+                placeholder="设备类型"
+              >
+                <el-option
+                  v-for="item in deviceTypeList"
+                  :key="item.value"
+                  :label="item.name"
+                  :value="item.value"
+                />
+              </el-select>
+            </search-item>
+            <search-item>
+              <el-button size="small" type="primary" class="search-btn" @search="fetchData">
+                搜索
+              </el-button>
+            </search-item>
+            <search-item>
+              <el-button size="small" type="primary" class="search-btn" @click="batchExport">
+                导出
+              </el-button>
+            </search-item>
+          </search-area>
+          <normal-table
+            :data="list"
+            :height="height"
+            :query="listQuery"
+            :total="tableOption.total"
+            :options="tableOption.options"
+            :tools-option="tableOption.toolsOption"
+            :list-loading="listLoading"
+            size="small"
+            @change="changePage"
+          >
+            <template slot="columns">
+              <el-table-column v-for="column in columns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
+                <template slot-scope="scope">
+                  <span :class="column.class">{{ scope.row[column.value] }}</span>
+                </template>
+              </el-table-column>
+              <el-table-column label="操作" width="60" align="center">
+                <template slot-scope="scope">
+                  <el-button type="text" size="small" @click="edit(scope.row)">
+                    详情
+                  </el-button>
+                </template>
+              </el-table-column>
+            </template>
+          </normal-table>
+        </el-col>
+      </el-card>
+    </el-col>
+    <edit-device-statics ref="editDevice" @watchChild="fetchData" />
+  </el-row>
+</template>
+
+<script>
+import { getDeviceType } from '@/api/device/device'
+import { offlineList } from '@/api/data/dataStatics'
+import { batchExportNoiseData } from '@/api/data/data'
+import editDeviceStatics from './editDeviceStatics'
+export default {
+  name: 'ListdeviceOffline',
+  components: { editDeviceStatics },
+  data() {
+    return {
+      height: 300,
+      // 表格属性
+      tableOption: {
+        options: {
+          needIndex: true // 是否需要序号列
+        },
+        toolsOption: {
+          selectColumns: false, // 是否需要筛选列
+          refresh: false // 是否需要刷新按钮
+        },
+        total: 0
+      },
+      // 是否需要序号列
+      options: {
+        needIndex: true
+      },
+      listQuery: {
+        deviceCode: '',
+        deviceType: '',
+        offset: 1,
+        limit: 20
+      },
+      list: [],
+      listLoading: false,
+      deviceTypeList: [],
+      columns: [
+        {
+          text: '设备编号',
+          value: 'deviceType',
+          align: 'center'
+        },
+        {
+          text: '设备类型',
+          value: 'deviceTypeName',
+          align: 'center'
+        },
+        {
+          text: '井编号',
+          value: 'wellCode',
+          align: 'center'
+        },
+        {
+          text: '最近记录上传时间',
+          value: 'lastTime',
+          align: 'center'
+        },
+        {
+          text: '离线天数',
+          value: 'offlineDays',
+          align: 'center'
+        }
+      ] // 显示列
+    }
+  },
+  created() {
+    this.fetchDeviceType()
+    this.fetchData()
+  },
+  methods: {
+    // 获取设备类型
+    fetchDeviceType() {
+      getDeviceType().then(response => {
+        this.deviceTypeList = response.data
+      })
+    },
+    fetchData() {
+      offlineList(this.listQuery).then(response => {
+        this.tableOption.total = response.total
+        this.list = response.data
+      })
+    },
+    // 页数发生变化后的操作，可能是页码变化，可能是每页容量变化，此函数必写
+    changePage(val) {
+      if (val && val.size) {
+        this.listQuery.limit = val.size
+      }
+      if (val && val.page) {
+        this.listQuery.offset = val.page
+      }
+      this.fetchData()
+    },
+    // 批量导出
+    batchExport() {
+      // 全屏加载动画
+      const loading = this.$loading({
+        lock: true,
+        text: '数据处理中,请稍后...',
+        spinner: 'el-icon-loading',
+        background: 'rgba(0, 0, 0, 0.7)'
+      })
+      batchExportNoiseData(this.listQuery).then(res => {
+        loading.close() // 关闭加载动画
+        const blob = new Blob([res.data])
+        const downloadElement = document.createElement('a')
+        const href = window.URL.createObjectURL(blob) // 创建下载的链接
+        downloadElement.href = href
+        downloadElement.download = `离线设备数据.xlsx` // 下载后文件名
+        document.body.appendChild(downloadElement)
+        downloadElement.click() // 点击下载
+        document.body.removeChild(downloadElement) // 下载完成移除元素
+        window.URL.revokeObjectURL(href) // 释放blob对象
+      }).catch((res) => {
+        loading.close()
+      })
+    },
+    // 详情
+    edit(row) {
+      this.$refs.editDevice.initDialog('detail', row)
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.flagBoxStyle {
+  display: flex;
+  margin-bottom: 20px;
+}
+.flagBoxStyle div:nth-child(2){
+  line-height: 30px;
+  font-weight: 600;
+}
+.flagStyle {
+  width: 4px;
+  height: 30px;
+  margin-right: 6px;
+  background: rgb(64 121 242);
+}
+.search-btn {
+  margin-top: 4px;
+}
+</style>

diff --git a/mock/deviceManage/device.js b/mock/deviceManage/device.js
new file mode 100644
index 0000000..1f0650d
--- /dev/null
+++ b/mock/deviceManage/device.js
@@ -0,0 +1,672 @@
+const deviceList = [
+  {
+    'bfzt': '0',
+    'bfztName': '撤防',
+    'communication': '3,4',
+    'concenCode': '',
+    'concenId': '',
+    'deptName': '燃气集团总公司',
+    'deptid': '24',
+    'installHeight': '123',
+    'devcode': '342021000001',
+    'deviceName': '',
+    'deviceType': '12',
+    'deviceTypeName': '开挖监测仪',
+    'id': '1476131375777120257',
+    'installDate': '2021-12-29',
+    'modelId': '19',
+    'modelName': 'BIRMM-RTU100N',
+    'onlineState': '1',
+    'onlineStateName': '在线',
+    'position': 'test001位置',
+    'ts': '2021-12-29',
+    'valid': '1',
+    'watchType': '燃气泄漏',
+    'wellCode': 'test001',
+    'wellId': '4453'
+  },
+  {
+    'bfzt': '0',
+    'bfztName': '撤防',
+    'communication': '3,4',
+    'concenCode': '',
+    'concenId': '',
+    'deptName': '燃气集团总公司',
+    'deptid': '24',
+    'installHeight': '123',
+    'devcode': '342021000001',
+    'deviceName': '',
+    'deviceType': '12',
+    'deviceTypeName': '井盖状态监测仪',
+    'id': '1476131375777120257',
+    'installDate': '2021-12-29',
+    'modelId': '19',
+    'modelName': 'BIRMM-RTU100N',
+    'onlineState': '1',
+    'onlineStateName': '在线',
+    'position': 'test001位置',
+    'ts': '2021-12-29',
+    'valid': '1',
+    'watchType': '燃气泄漏',
+    'wellCode': 'test001',
+    'wellId': '4453'
+  },
+  {
+    'bfzt': '0',
+    'bfztName': '撤防',
+    'communication': '3,4',
+    'concenCode': '',
+    'concenId': '',
+    'deptName': '燃气集团总公司',
+    'deptid': '24',
+    'installHeight': '123',
+    'devcode': '342021000001',
+    'deviceName': '',
+    'deviceType': '12',
+    'deviceTypeName': '液位监测仪',
+    'id': '1476131375777120257',
+    'installDate': '2021-12-29',
+    'modelId': '19',
+    'modelName': 'BIRMM-RTU100N',
+    'onlineState': '1',
+    'onlineStateName': '在线',
+    'position': 'test001位置',
+    'ts': '2021-12-29',
+    'valid': '1',
+    'watchType': '燃气泄漏',
+    'wellCode': 'test001',
+    'wellId': '4453'
+  },
+  {
+    'bfzt': '0',
+    'bfztName': '撤防',
+    'communication': '3,4',
+    'concenCode': '',
+    'concenId': '',
+    'deptName': '燃气集团总公司',
+    'deptid': '24',
+    'installHeight': '123',
+    'devcode': '342021000001',
+    'deviceName': '',
+    'deviceType': '12',
+    'deviceTypeName': '燃气智能监测终端',
+    'id': '1476131375777120257',
+    'installDate': '2021-12-29',
+    'modelId': '19',
+    'modelName': 'BIRMM-RTU100N',
+    'onlineState': '1',
+    'onlineStateName': '在线',
+    'position': 'test001位置',
+    'ts': '2021-12-29',
+    'valid': '1',
+    'watchType': '燃气泄漏',
+    'wellCode': 'test001',
+    'wellId': '4453'
+  },
+  {
+    'bfzt': '0',
+    'bfztName': '撤防',
+    'communication': '3,4',
+    'concenCode': '',
+    'concenId': '',
+    'deptName': '燃气集团总公司',
+    'deptid': '24',
+    'installHeight': '123',
+    'devcode': '342021000001',
+    'deviceName': '',
+    'deviceType': '12',
+    'deviceTypeName': '噪声记录仪',
+    'id': '1476131375777120257',
+    'installDate': '2021-12-29',
+    'modelId': '19',
+    'modelName': 'BIRMM-RTU100N',
+    'onlineState': '1',
+    'onlineStateName': '在线',
+    'position': 'test001位置',
+    'ts': '2021-12-29',
+    'valid': '1',
+    'watchType': '燃气泄漏',
+    'wellCode': 'test001',
+    'wellId': '4453'
+  },
+  {
+    'bfzt': '0',
+    'bfztName': '撤防',
+    'communication': '3,4',
+    'concenCode': '',
+    'concenId': '',
+    'deptName': '燃气集团总公司',
+    'deptid': '24',
+    'installHeight': '123',
+    'devcode': '342021000001',
+    'deviceName': '',
+    'deviceType': '12',
+    'deviceTypeName': '有害气体监测仪',
+    'id': '1476131375777120257',
+    'installDate': '2021-12-29',
+    'modelId': '19',
+    'modelName': 'BIRMM-RTU100N',
+    'onlineState': '1',
+    'onlineStateName': '在线',
+    'position': 'test001位置',
+    'ts': '2021-12-29',
+    'valid': '1',
+    'watchType': '燃气泄漏',
+    'wellCode': 'test001',
+    'wellId': '4453'
+  },
+  {
+    'bfzt': '0',
+    'bfztName': '撤防',
+    'communication': '3,4',
+    'concenCode': '',
+    'concenId': '',
+    'deptName': '燃气集团总公司',
+    'deptid': '24',
+    'installHeight': '123',
+    'devcode': '342021000001',
+    'deviceName': '',
+    'deviceType': '12',
+    'deviceTypeName': '温湿度监测仪',
+    'id': '1476131375777120257',
+    'installDate': '2021-12-29',
+    'modelId': '19',
+    'modelName': 'BIRMM-RTU100N',
+    'onlineState': '1',
+    'onlineStateName': '在线',
+    'position': 'test001位置',
+    'ts': '2021-12-29',
+    'valid': '1',
+    'watchType': '燃气泄漏',
+    'wellCode': 'test001',
+    'wellId': '4453'
+  },
+  {
+    'bfzt': '0',
+    'bfztName': '撤防',
+    'communication': '3,4',
+    'concenCode': '',
+    'concenId': '',
+    'deptName': '燃气集团总公司',
+    'deptid': '24',
+    'installHeight': '123',
+    'devcode': '342021000001',
+    'deviceName': '',
+    'deviceType': '12',
+    'deviceTypeName': '井盖定位监测仪',
+    'id': '1476131375777120257',
+    'installDate': '2021-12-29',
+    'modelId': '19',
+    'modelName': 'BIRMM-RTU100N',
+    'onlineState': '1',
+    'onlineStateName': '在线',
+    'position': 'test001位置',
+    'ts': '2021-12-29',
+    'valid': '1',
+    'watchType': '燃气泄漏',
+    'wellCode': 'test001',
+    'wellId': '4453'
+  },
+  {
+    'bfzt': '0',
+    'bfztName': '撤防',
+    'communication': '3,4',
+    'concenCode': '',
+    'concenId': '',
+    'deptName': '燃气集团总公司',
+    'deptid': '24',
+    'installHeight': '123',
+    'devcode': '342021000001',
+    'deviceName': '',
+    'deviceType': '12',
+    'deviceTypeName': '燃气智能终端（一体化）',
+    'id': '1476131375777120257',
+    'installDate': '2021-12-29',
+    'modelId': '19',
+    'modelName': 'BIRMM-RTU100N',
+    'onlineState': '1',
+    'onlineStateName': '在线',
+    'position': 'test001位置',
+    'ts': '2021-12-29',
+    'valid': '1',
+    'watchType': '燃气泄漏',
+    'wellCode': 'test001',
+    'wellId': '4453'
+  },
+  {
+    'bfzt': '0',
+    'bfztName': '撤防',
+    'communication': '3,4',
+    'concenCode': '',
+    'concenId': '',
+    'deptName': '燃气集团总公司',
+    'deptid': '24',
+    'installHeight': '123',
+    'devcode': '342021000001',
+    'deviceName': '',
+    'deviceType': '12',
+    'deviceTypeName': '管盯',
+    'id': '1476131375777120257',
+    'installDate': '2021-12-29',
+    'modelId': '19',
+    'modelName': 'BIRMM-RTU100N',
+    'onlineState': '1',
+    'onlineStateName': '在线',
+    'position': 'test001位置',
+    'ts': '2021-12-29',
+    'valid': '1',
+    'watchType': '燃气泄漏',
+    'wellCode': 'test001',
+    'wellId': '4453'
+  }
+]
+const deviceStaticsList = [
+  {
+    'deptName': '燃气集团总公司',
+    'deviceCount': '11',
+    'deptid': '24'
+  },
+  {
+    'deptName': '煤气公司',
+    'deviceCount': '2',
+    'deptid': '24'
+  },
+  {
+    'deptName': '电力公司',
+    'deviceCount': '11',
+    'deptid': '24'
+  }
+
+]
+const deviceOnlineList = [
+  {
+    'deviceType': '井盖状态监测仪',
+    'online': 1,
+    'offline': 9
+  },
+  {
+    'deviceType': '燃气智能监测终端',
+    'online': 1,
+    'offline': 2
+  },
+  {
+    'deviceType': '管盯',
+    'online': 1,
+    'offline': 6
+  }
+
+]
+const deviceOfflineList = [
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  }
+]
+module.exports = [
+  // mock get all routes form server
+  {
+    url: '/device/list',
+    type: 'get',
+    response: _ => {
+      return {
+        code: 200,
+        data: deviceList,
+        message: '请求成功',
+        success: true
+      }
+    }
+  },
+  {
+    url: '/statics/deviceStaticsByDept',
+    type: 'get',
+    response: _ => {
+      return {
+        code: 200,
+        data: deviceStaticsList,
+        message: '请求成功',
+        success: true
+      }
+    }
+  },
+  {
+    url: '/statics/deviceCountByOnlineStatus',
+    type: 'get',
+    response: _ => {
+      return {
+        code: 200,
+        data: deviceOnlineList,
+        message: '请求成功',
+        success: true
+      }
+    }
+  },
+  {
+    url: '/device/offlineListPage',
+    type: 'get',
+    response: _ => {
+      return {
+        code: 200,
+        'total': 120,
+        data: deviceOfflineList,
+        message: '请求成功',
+        success: true
+      }
+    }
+  }
+]
diff --git a/mock/index.js b/mock/index.js
index 6646246..0e60e80 100644
--- a/mock/index.js
+++ b/mock/index.js
@@ -12,6 +12,7 @@
 const dashboard = require('./biz/dashboard')
 const search = require('./remote-search')
 const overview = require('./biz/overview')
+const device = require('./deviceManage/device')
 const deviceType = require('./deviceManage/deviceType')
 const deviceModels = require('./deviceManage/deviceModels')
 const deviceImei = require('./deviceManage/deviceImei')
@@ -42,7 +43,8 @@
   ...tenantConfig,
   ...deptPermission,
   ...tenant,
-  ...warningRule
+  ...warningRule,
+  ...device
 ]
 
 // for front mock
diff --git a/src/api/data/dataStatics.js b/src/api/data/dataStatics.js
index b96a05e..04f756a 100644
--- a/src/api/data/dataStatics.js
+++ b/src/api/data/dataStatics.js
@@ -11,6 +11,14 @@
     params
   })
 }
+// 离线设备列表
+export function offlineList(params) {
+  return request({
+    url: 'device/offlineListPage',
+    method: 'get',
+    params
+  })
+}
 // 根据权属单位统计井数量
 export function wellStaticByDept(params) {
   return request({
@@ -38,6 +46,15 @@
   })
 }
 
+// 离线设备数量
+export function deviceStaticsByOnline(params) {
+  return request({
+    url: 'statics/deviceCountByOnlineStatus',
+    method: 'get',
+    params
+  })
+}
+
 // 根据权属单位统计设备数量
 export function deviceStaticsByDept(params) {
   return request({
diff --git a/src/components/NormalTable/index.vue b/src/components/NormalTable/index.vue
index 9e23838..3fdc6db 100644
--- a/src/components/NormalTable/index.vue
+++ b/src/components/NormalTable/index.vue
@@ -69,7 +69,7 @@
         </el-col>
       </el-row>
       <!-- 表格正文-->
-      <el-table v-loading="listLoading" :data="data" :size="size" class="table" row-class-name="small-row-class" border @selection-change="selectionChange" @row-click="rowClick">
+      <el-table v-loading="listLoading" :height="height" :data="data" :size="size" class="table" row-class-name="small-row-class" border @selection-change="selectionChange" @row-click="rowClick">
         <!--需要加在表最前方的插槽-->
         <slot name="preColumns" />
         <!--序号列-->
@@ -141,6 +141,12 @@
         return []
       }
     }, // 数据
+    height: {
+      type: Number,
+      default: function() {
+        return []
+      }
+    },
     total: {
       type: Number,
       default: 0
diff --git a/src/views/deviceManage/components/listDigData.vue b/src/views/deviceManage/components/listDigData.vue
new file mode 100644
index 0000000..5a2b795
--- /dev/null
+++ b/src/views/deviceManage/components/listDigData.vue
@@ -0,0 +1,19 @@
+<template>
+  <div>开挖监测仪</div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+
+    }
+  },
+  methods: {
+    initData: function(row = null) {
+      console.log(row, '===')
+    }
+  }
+}
+</script>
+
diff --git a/src/views/deviceManage/components/listGasData.vue b/src/views/deviceManage/components/listGasData.vue
new file mode 100644
index 0000000..ccbaa8b
--- /dev/null
+++ b/src/views/deviceManage/components/listGasData.vue
@@ -0,0 +1,18 @@
+<template>
+  <div>燃气智能监测终端</div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+
+    }
+  },
+  methods: {
+    initData: function(row = null) {
+      console.log(row, '===')
+    }
+  }
+}
+</script>
diff --git a/src/views/deviceManage/components/listHarmfulData.vue b/src/views/deviceManage/components/listHarmfulData.vue
new file mode 100644
index 0000000..687f9bc
--- /dev/null
+++ b/src/views/deviceManage/components/listHarmfulData.vue
@@ -0,0 +1,18 @@
+<template>
+  <div>有害气体监测仪</div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+
+    }
+  },
+  methods: {
+    initData: function(row = null) {
+      console.log(row, '===')
+    }
+  }
+}
+</script>
diff --git a/src/views/deviceManage/components/listLiquidData.vue b/src/views/deviceManage/components/listLiquidData.vue
new file mode 100644
index 0000000..f279ee9
--- /dev/null
+++ b/src/views/deviceManage/components/listLiquidData.vue
@@ -0,0 +1,18 @@
+<template>
+  <div>液位监测仪</div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+
+    }
+  },
+  methods: {
+    initData: function(row = null) {
+      console.log(row, '===')
+    }
+  }
+}
+</script>
diff --git a/src/views/deviceManage/components/listLiquidGasData.vue b/src/views/deviceManage/components/listLiquidGasData.vue
new file mode 100644
index 0000000..6f5535e
--- /dev/null
+++ b/src/views/deviceManage/components/listLiquidGasData.vue
@@ -0,0 +1,18 @@
+<template>
+  <div>燃气智能终端（一体化）</div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+
+    }
+  },
+  methods: {
+    initData: function(row = null) {
+      console.log(row, '===')
+    }
+  }
+}
+</script>
diff --git a/src/views/deviceManage/components/listNoiseData.vue b/src/views/deviceManage/components/listNoiseData.vue
new file mode 100644
index 0000000..7dad007
--- /dev/null
+++ b/src/views/deviceManage/components/listNoiseData.vue
@@ -0,0 +1,18 @@
+<template>
+  <div>噪声记录仪</div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+
+    }
+  },
+  methods: {
+    initData: function(row = null) {
+      console.log(row, '===')
+    }
+  }
+}
+</script>
diff --git a/src/views/deviceManage/components/listTempData.vue b/src/views/deviceManage/components/listTempData.vue
new file mode 100644
index 0000000..f7548b5
--- /dev/null
+++ b/src/views/deviceManage/components/listTempData.vue
@@ -0,0 +1,18 @@
+<template>
+  <div>温湿度监测仪</div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+
+    }
+  },
+  methods: {
+    initData: function(row = null) {
+      console.log(row, '===')
+    }
+  }
+}
+</script>
diff --git a/src/views/deviceManage/components/listTubeData.vue b/src/views/deviceManage/components/listTubeData.vue
new file mode 100644
index 0000000..94f1772
--- /dev/null
+++ b/src/views/deviceManage/components/listTubeData.vue
@@ -0,0 +1,18 @@
+<template>
+  <div>管盯</div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+
+    }
+  },
+  methods: {
+    initData: function(row = null) {
+      console.log(row, '===')
+    }
+  }
+}
+</script>
diff --git a/src/views/deviceManage/components/listWellData.vue b/src/views/deviceManage/components/listWellData.vue
new file mode 100644
index 0000000..7a6436d
--- /dev/null
+++ b/src/views/deviceManage/components/listWellData.vue
@@ -0,0 +1,18 @@
+<template>
+  <div>井盖状态监测仪</div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+
+    }
+  },
+  methods: {
+    initData: function(row = null) {
+      console.log(row, '===')
+    }
+  }
+}
+</script>
diff --git a/src/views/deviceManage/components/listWellLocaData.vue b/src/views/deviceManage/components/listWellLocaData.vue
new file mode 100644
index 0000000..f784671
--- /dev/null
+++ b/src/views/deviceManage/components/listWellLocaData.vue
@@ -0,0 +1,18 @@
+<template>
+  <div>井盖定位监测仪</div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+
+    }
+  },
+  methods: {
+    initData: function(row = null) {
+      console.log(row, '===')
+    }
+  }
+}
+</script>
diff --git a/src/views/deviceManage/detailDevice.vue b/src/views/deviceManage/detailDevice.vue
index eefc549..8285ee7 100644
--- a/src/views/deviceManage/detailDevice.vue
+++ b/src/views/deviceManage/detailDevice.vue
@@ -3,110 +3,114 @@
     <el-form ref="dataForm" :model="deviceForm" label-well-code="right" label-width="100px">
       <el-row :gutter="20">
         <el-col :span="12">
-          <el-form-item label="设备名称" prop="deviceName">
-            <el-input v-model="deviceForm.deviceName" type="text" placeholder="未知" disabled />
+          <el-form-item label="设备编号" prop="devcode">
+            <el-input v-model.trim="deviceForm.devcode" disabled type="text" placeholder="必填" />
           </el-form-item>
         </el-col>
         <el-col :span="12">
-          <el-form-item label="设备编号" prop="devcode">
-            <el-input v-model="deviceForm.devcode" type="text" placeholder="未知" disabled />
+          <el-form-item label="安装日期" prop="installDate">
+            <el-date-picker
+              v-model.trim="deviceForm.installDate"
+              disabled
+              type="date"
+              value-format="yyyy-MM-dd"
+              placeholder="选择日期"
+            />
           </el-form-item>
         </el-col>
       </el-row>
       <el-row :gutter="20">
         <el-col :span="12">
           <el-form-item label="设备类型" prop="deviceType">
-            <el-input v-model="deviceForm.deviceTypeName" type="text" placeholder="未知" disabled />
+            <el-select v-model="deviceForm.deviceType" disabled placeholder="请选择设备类型">
+              <el-option
+                v-for="item in deviceTypeList"
+                :key="item.value"
+                :label="item.name"
+                :value="item.value"
+              />
+            </el-select>
           </el-form-item>
         </el-col>
         <el-col :span="12">
           <el-form-item label="设备型号" prop="modelId">
-            <el-input v-model="deviceForm.modelName" type="text" placeholder="未知" disabled />
-          </el-form-item>
-        </el-col>
-      </el-row>
-      <el-row :gutter="20">
-        <el-col :span="12">
-          <el-form-item label="在线状态" prop="wellCode">
-            <el-input v-model="deviceForm.onlineStateName" type="text" placeholder="未知" disabled />
-          </el-form-item>
-        </el-col>
-        <el-col :span="12">
-          <el-form-item label="权属单位" prop="concenCode">
-            <el-input v-model="deviceForm.deptName" type="text" placeholder="未知" disabled />
+            <el-select v-model="deviceForm.modelId" disabled placeholder="请选择设备型号">
+              <el-option
+                v-for="item in deviceModelList"
+                :key="item.value"
+                :label="item.name"
+                :value="item.value"
+              />
+            </el-select>
           </el-form-item>
         </el-col>
       </el-row>
       <el-row :gutter="20">
         <el-col :span="12">
           <el-form-item label="井编号" prop="wellCode">
-            <el-input v-model="deviceForm.wellCode" type="text" placeholder="未知" disabled />
+            <el-input v-model.trim="deviceForm.wellCode" disabled type="text" placeholder="必填" />
           </el-form-item>
         </el-col>
         <el-col :span="12">
-          <el-form-item label="布防状态" prop="bfztName">
-            <el-input v-model="deviceForm.bfztName" type="text" placeholder="未知" disabled />
-          </el-form-item>
-        </el-col>
-      </el-row>
-      <el-row :gutter="20">
-        <el-col :span="24">
-          <el-form-item label="位置" prop="position">
-            <el-input v-model="deviceForm.position" type="text" placeholder="未知" disabled />
-          </el-form-item>
-        </el-col>
-      </el-row>
-      <el-row :gutter="20">
-        <el-col :span="12">
-          <el-form-item label="安装日期" prop="installDate">
-            <el-input v-model="deviceForm.installDate" type="text" placeholder="未知" disabled />
-          </el-form-item>
-        </el-col>
-        <el-col :span="12">
-          <el-form-item label="集中器编号" prop="concenCode">
-            <el-input v-model="deviceForm.concenCode" type="text" placeholder="未知" disabled />
-          </el-form-item>
-        </el-col>
-      </el-row>
-      <el-row :gutter="20">
-        <el-col :span="12">
-          <el-form-item label="设备安装高度" prop="installHeight">
-            <el-input v-model="deviceForm.installHeight" type="text" placeholder="未知" disabled />
+          <el-form-item label="安装高度(m)" prop="installHeight">
+            <el-input v-model.trim="deviceForm.installHeight" disabled type="text" placeholder="必填" />
           </el-form-item>
         </el-col>
       </el-row>
     </el-form>
+    <component :is="cmpName" ref="deviceTypeDialog" @watchChild="fetchDeviceList" />
   </el-dialog>
 </template>
 
 <script>
+import listDigData from './components/listDigData'
+import listGasData from './components/listGasData'
+import listHarmfulData from './components/listHarmfulData'
+import listLiquidData from './components/listLiquidData'
+import listLiquidGasData from './components/listLiquidGasData'
+import listNoiseData from './components/listNoiseData'
+import listTempData from './components/listTempData'
+import listTubeData from './components/listTubeData'
+import listWellData from './components/listWellData'
+import listWellLocaData from './components/listWellLocaData'
 
 export default {
-  name: 'DetailDevice',
+  name: 'EditDevice',
+  components: {
+    listDigData,
+    listGasData,
+    listHarmfulData,
+    listLiquidData,
+    listLiquidGasData,
+    listNoiseData,
+    listTempData,
+    listTubeData,
+    listWellData,
+    listWellLocaData
+  },
   data() {
     return {
       dialogFormVisible: false, // 对话框是否显示
-      dialogStatus: '', // 对话框类型：create,update
+      dialogStatus: '', // 对话框类型：create,update,detail
+      cmpName: '', // 组件名称
       deviceForm: {
         id: '',
         deviceName: '',
         devcode: '',
-        deviceTypeName: '',
+        deviceType: '',
         wellCode: '',
-        modelName: '',
+        modelId: '',
         installDate: '',
         concenCode: '',
-        installHeight: '',
-        onlineStateName: '',
-        deptName: '',
-        bfztName: '',
-        position: ''
+        installHeight: ''
       }, // 表单
       textMap: {
         update: '编辑',
         create: '新增',
         detail: '详情'
-      } // 表头显示标题z
+      }, // 表头显示标题
+      deviceTypeList: null, // 设备类型列表
+      deviceModelList: null // 设备型号列表
     }
   },
   methods: {
@@ -114,20 +118,57 @@
     initDialog: function(dialogStatus, dialogFormVisible, row = null) {
       this.dialogStatus = dialogStatus
       this.dialogFormVisible = dialogFormVisible
+      this.resetForm()
       this.deviceForm = {
         id: row.id,
         deviceName: row.deviceName,
         devcode: row.devcode,
-        deviceTypeName: row.deviceTypeName,
+        deviceType: row.deviceType,
+        modelId: row.modelId,
         wellCode: row.wellCode,
-        modelName: row.modelName,
-        installDate: row.installDate,
         concenCode: row.concenCode,
-        installHeight: row.installHeight,
-        onlineStateName: row.onlineStateName,
-        deptName: row.deptName,
-        bfztName: row.bfztName,
-        position: row.position
+        installDate: row.installDate,
+        installHeight: row.installHeight
+      }
+      // 展示相对应的设备列表组件
+      if (row.deviceTypeName === '开挖监测仪') {
+        this.cmpName = 'list-dig-data'
+      } else if (row.deviceTypeName === '井盖状态监测仪') {
+        this.cmpName = 'list-well-data'
+      } else if (row.deviceTypeName === '液位监测仪') {
+        this.cmpName = 'list-liquid-data'
+      } else if (row.deviceTypeName === '燃气智能监测终端') {
+        this.cmpName = 'list-gas-data'
+      } else if (row.deviceTypeName === '噪声记录仪') {
+        this.cmpName = 'list-noise-data'
+      } else if (row.deviceTypeName === '有害气体监测仪') {
+        this.cmpName = 'list-harmful-data'
+      } else if (row.deviceTypeName === '温湿度监测仪') {
+        this.cmpName = 'list-temp-data'
+      } else if (row.deviceTypeName === '井盖定位监测仪') {
+        this.cmpName = 'list-well-loca-data'
+      } else if (row.deviceTypeName === '燃气智能终端（一体化）') {
+        this.cmpName = 'list-liquid-gas-data'
+      } else if (row.deviceTypeName === '管盯') {
+        this.cmpName = 'list-tube-data'
+      }
+      setTimeout(() => {
+        this.$refs.deviceTypeDialog.initData(row)
+      }, 100)
+    },
+    fetchDeviceList() {},
+    // 重置表单
+    resetForm() {
+      this.deviceForm = {
+        id: '',
+        deviceName: '',
+        devcode: '',
+        deviceType: '',
+        wellCode: '',
+        modelId: '',
+        installDate: '',
+        concenCode: '',
+        installHeight: ''
       }
     }
   }
@@ -138,4 +179,7 @@
   .el-select{
     width: 100%;
   }
+  .el-date-editor{
+    width: 100%;
+  }
 </style>
diff --git a/src/views/deviceManage/editDevice.vue b/src/views/deviceManage/editDevice.vue
index 41c6907..0ae2cab 100644
--- a/src/views/deviceManage/editDevice.vue
+++ b/src/views/deviceManage/editDevice.vue
@@ -65,7 +65,7 @@
       <el-row :gutter="20">
         <el-col :span="12">
           <el-form-item label="安装高度(m)" prop="installHeight">
-            <el-input v-model.trim="deviceForm.installHeight" :disabled="isDetailMode" type="text" placeholder="非必填" />
+            <el-input v-model.trim="deviceForm.installHeight" :disabled="isDetailMode" type="text" placeholder="必填" />
           </el-form-item>
         </el-col>
       </el-row>
@@ -116,7 +116,8 @@
         wellCode: [{ required: true, message: '井编号不能为空', trigger: ['blur', 'change'] }],
         deviceType: [{ required: true, message: '设备类型必选', trigger: ['blur', 'change'] }],
         modelId: [{ required: true, message: '设备型号必选', trigger: ['blur', 'change'] }],
-        installDate: [{ required: true, message: '安装日期必选', trigger: ['blur', 'change'] }]
+        installDate: [{ required: true, message: '安装日期必选', trigger: ['blur', 'change'] }],
+        installHeight: [{ required: true, message: '设备安装高度不能为空', trigger: ['blur', 'change'] }]
       }, // 前端校验规则
       isEditMode: false, // 编辑模式
       isDetailMode: false // 详情模式
diff --git a/src/views/deviceManage/listDevice.vue b/src/views/deviceManage/listDevice.vue
index 2303523..623cf06 100644
--- a/src/views/deviceManage/listDevice.vue
+++ b/src/views/deviceManage/listDevice.vue
@@ -76,7 +76,6 @@
       </el-row>
       <el-table v-loading="listLoading" :data="list" class="table" border @selection-change="handleSelectionChange">
         <el-table-column v-if="hasPerm('/device/delete')" align="center" type="selection" width="55" />
-        <el-table-column :index="indexMethod" align="center" type="index" />
         <el-table-column v-for="column in columns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
           <template slot-scope="scope">
             <span v-if="column.type!='Button'" :class="column.class">{{ scope.row[column.value] }}</span>
@@ -272,7 +271,7 @@
       this.$refs.editdevice.initDialog('update', this.dialogFormVisible, row)
     },
     detail(row) {
-      this.$refs.editdevice.initDialog('detail', true, row)
+      this.$refs.detaildevice.initDialog('detail', true, row)
     },
     // 删除设备
     del() {
@@ -367,7 +366,7 @@
         this.listQuery.offset = 1
       }
       getDeviceList(this.listQuery).then(response => {
-        this.list = response.data.rows
+        this.list = response.data
         this.total = parseInt(response.data.total)
         this.listLoading = false
       })
diff --git a/src/views/deviceStatics/components/deviceCountByDept.vue b/src/views/deviceStatics/components/deviceCountByDept.vue
index 6dc7375..0d4a211 100644
--- a/src/views/deviceStatics/components/deviceCountByDept.vue
+++ b/src/views/deviceStatics/components/deviceCountByDept.vue
@@ -1,77 +1,81 @@
 <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-row>
+    <el-col>
+      <el-card shadow="never">
+        <el-col>
+          <el-col :span="18">
+            <div class="flagBoxStyle">
+              <div class="flagStyle" />
+              <div>各单位安装设备情况统计</div>
+            </div>
+          </el-col>
+          <el-col :span="6">
+            <el-select
+              v-model="listQuery.deviceType"
+              size="small"
+              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-col>
-      </el-row>
-    </div>
-    <div>
-      <ve-histogram :data="chartData" :grid="grid" :extend="extend" :settings="chartSettings" />
-    </div>
-  </div>
+
+        <el-col>
+          <ve-bar
+            :data="chartData"
+            :grid="grid"
+            :extend="extend"
+            :settings="chartSettings"
+          />
+        </el-col>
+      </el-card>
+    </el-col>
+  </el-row>
 </template>
 
 <script>
 import { getDeviceType } from '@/api/device/device'
 import { deviceStaticsByDept } from '@/api/data/dataStatics'
+
 export default {
   name: 'DeviceCountByDept',
   data() {
-    this.extend = {
-      xAxis: {
-        axisLabel: {
-          rotate: 30,
-          margin: 30,
-          textStyle: {
-            align: 'center'
-          }
-        }
-      },
-      series: {
-        label: { show: true, position: 'top' },
-        barMaxWidth: 35 // 最大柱宽度
-      }
-    }
-    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: '',
+      extend: {
+        series: {
+          label: { show: true, position: 'right' },
+          barMaxWidth: 35 // 最大柱宽度
+        }
+      },
+      grid: {
+        right: 60
+      },
+      // title: {
+      //   text: '井类型数量统计'
+      // },
+      chartSettings: {
+        itemStyle: {
+          'barCategoryGap': 5
+        },
+        barWidth: 15,
+        labelMap: {
+          'deptName': '权属单位',
+          'deviceCount': '设备数量（个）'
+        },
+        dimension: ['deptName'],
+        metrics: ['deviceCount']
+      },
       chartData: {
         columns: ['deptName', 'deviceCount'],
         rows: []
@@ -85,25 +89,11 @@
   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
-        }
+      getDeviceType().then(response => {
+        this.deviceTypeList = response.data
       })
     },
     fetchData() {
-      console.log('fetchData')
       deviceStaticsByDept(this.listQuery).then(response => {
         this.chartData.rows = response.data
       })
@@ -113,16 +103,19 @@
 </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*/
-  }
+.flagBoxStyle {
+  display: flex;
+  margin-bottom: 20px;
+}
+.flagBoxStyle div:nth-child(2){
+  line-height: 30px;
+  font-weight: 600;
+}
+.flagStyle {
+  width: 4px;
+  height: 30px;
+  margin-right: 6px;
+  background: rgb(64 121 242);
+}
 </style>
+
diff --git a/src/views/deviceStatics/components/deviceCountByOffline.vue b/src/views/deviceStatics/components/deviceCountByOffline.vue
new file mode 100644
index 0000000..ba81bec
--- /dev/null
+++ b/src/views/deviceStatics/components/deviceCountByOffline.vue
@@ -0,0 +1,139 @@
+<template>
+  <el-row>
+    <el-col>
+      <el-card shadow="never">
+        <el-col>
+          <div class="flagBoxStyle">
+            <div class="flagStyle" />
+            <div>离线分析</div>
+          </div>
+        </el-col>
+        <el-col>
+          <div>
+            <span class="titleStyle">离线设备</span>
+            <span class="countStyle">12</span>
+            <span>个</span>
+          </div>
+        </el-col>
+        <el-col>
+          <el-col :span="16">
+            <ve-histogram
+              :data="chartData"
+              :grid="grid"
+              :extend="extend"
+              :settings="chartSettings"
+            />
+          </el-col>
+          <el-col :span="8">
+            <ve-pie
+              :data="chartDataPie"
+              :extend="extendPie"
+            />
+          </el-col>
+        </el-col>
+      </el-card>
+    </el-col>
+  </el-row>
+</template>
+
+<script>
+import { deviceStaticsByOnline } from '@/api/data/dataStatics'
+export default {
+  name: 'DeviceCountByOffline',
+  data() {
+    return {
+      online: 0,
+      offline: 0,
+      // 饼状图
+      extendPie: {
+        series: {
+          label: { show: true, position: 'outside', formatter: '{b}:{c}' },
+          radius: '45%'
+        }
+      },
+      chartDataPie: {
+        columns: ['onlineStatus', 'deviceCount'],
+        rows: []
+      },
+      // 柱状图
+      extend: {
+        xAxis: {
+          axisLabel: {
+            rotate: 30,
+            margin: 30,
+            textStyle: {
+              align: 'center'
+            }
+          }
+        },
+        series: {
+          label: { show: true, position: 'top' },
+          barMaxWidth: 35 // 最大柱宽度
+        }
+      },
+      grid: {
+        right: 60
+      },
+      chartSettings: {
+        itemStyle: {
+          'barCategoryGap': 5
+        },
+        barWidth: 15,
+        labelMap: {
+          'deviceType': '权属单位',
+          'offline': '设备数量（个）'
+        },
+        dimension: ['deviceType'],
+        metrics: ['offline']
+      },
+      chartData: {
+        columns: ['deviceType', 'offline'],
+        rows: []
+      }
+    }
+  },
+  created() {
+    this.fetchDeviceType()
+  },
+  methods: {
+    fetchDeviceType() {
+      deviceStaticsByOnline().then(response => {
+        response.data.forEach((item) => {
+          this.online += item.online
+          this.offline += item.offline
+        })
+        this.chartData.rows = response.data
+        this.chartDataPie.rows = [
+          { 'onlineStatus': '在线', 'deviceCount': this.online },
+          { 'onlineStatus': '离线', 'deviceCount': this.offline }
+        ]
+      })
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.flagBoxStyle {
+  display: flex;
+  margin-bottom: 20px;
+}
+.flagBoxStyle div:nth-child(2){
+  line-height: 30px;
+  font-weight: 600;
+}
+.flagStyle {
+  width: 4px;
+  height: 30px;
+  margin-right: 6px;
+  background: rgb(64 121 242);
+}
+.titleStyle {
+  margin-left: 20px;
+  font-size: 12px;
+}
+.countStyle {
+  font-size: 20px;
+  margin: 0 10px;
+}
+</style>
diff --git a/src/views/deviceStatics/components/deviceCountByType.vue b/src/views/deviceStatics/components/deviceCountByType.vue
index 6e71cf8..20adea4 100644
--- a/src/views/deviceStatics/components/deviceCountByType.vue
+++ b/src/views/deviceStatics/components/deviceCountByType.vue
@@ -1,62 +1,99 @@
 <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>
+  <el-row>
+    <el-col>
+      <el-card shadow="never">
+        <el-col>
+          <div class="flagBoxStyle">
+            <div class="flagStyle" />
+            <div>设备总体情况</div>
+          </div>
+        </el-col>
+        <el-col class="cardStyle">
+          <el-col :span="10">
+            <el-card>
+              <div>
+                <span class="ttileStyle">设备总数</span>
+                <span class="countStyle">123</span>
+                <span>个</span>
+              </div>
+            </el-card>
+          </el-col>
+          <el-col :span="10">
+            <el-card>
+              <div>
+                <span class="ttileStyle">低电量设备总数</span>
+                <span class="countStyle">123</span>
+                <span>个</span>
+              </div>
+            </el-card>
+          </el-col>
+        </el-col>
+        <el-col>
+          <div class="flagBoxStyle">
+            <div class="flagStyle" />
+            <div>设备数量分析</div>
+          </div>
+        </el-col>
+        <el-col>
+          <ve-histogram
+            :data="chartData"
+            :grid="grid"
+            :extend="extend"
+            :settings="chartSettings"
+          />
+        </el-col>
+      </el-card>
+    </el-col>
+  </el-row>
 </template>
 
 <script>
 import { deviceStaticsByType } from '@/api/data/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 {
+      extend: {
+        xAxis: {
+          axisLabel: {
+            rotate: 30,
+            margin: 30,
+            textStyle: {
+              align: 'center'
+            }
+          }
+        },
+        series: {
+          label: { show: true, position: 'top' },
+          barMaxWidth: 35 // 最大柱宽度
+        }
+      },
+      grid: {
+        right: 60
+      },
+      chartSettings: {
+        itemStyle: {
+          'barCategoryGap': 5
+        },
+        barWidth: 15,
+        labelMap: {
+          'deviceType': '权属单位',
+          'deviceCount': '设备数量（个）'
+        },
+        dimension: ['deviceType'],
+        metrics: ['deviceCount']
+      },
       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 }
-    // ]
+  created() {
+    this.fetchDeviceType()
   },
   methods: {
-    fetchData() {
+    fetchDeviceType() {
       deviceStaticsByType().then(response => {
         this.chartData.rows = response.data
       })
@@ -66,11 +103,30 @@
 </script>
 
 <style rel="stylesheet/scss" lang="scss" scoped>
-  .chart-title{
-    margin: auto;
-    text-align: center;
-    margin-top: 15px;
-    font-size:20px;
-    font-weight:600
-  }
+.flagBoxStyle {
+  display: flex;
+  margin-bottom: 20px;
+}
+.flagBoxStyle div:nth-child(2){
+  line-height: 30px;
+  font-weight: 600;
+}
+.flagStyle {
+  width: 4px;
+  height: 30px;
+  margin-right: 6px;
+  background: rgb(64 121 242);
+}
+.cardStyle {
+  display:flex;
+  margin-bottom: 20px;
+  justify-content: space-around;
+}
+.ttileStyle {
+  font-size: 12px;
+}
+.countStyle {
+  font-size: 20px;
+  margin: 0 10px;
+}
 </style>
diff --git a/src/views/deviceStatics/components/editDeviceStatics.vue b/src/views/deviceStatics/components/editDeviceStatics.vue
new file mode 100644
index 0000000..959e7da
--- /dev/null
+++ b/src/views/deviceStatics/components/editDeviceStatics.vue
@@ -0,0 +1,322 @@
+<template>
+  <el-dialog
+    append-to-body
+    :title="textMap[dialogStatus]"
+    :visible.sync="dialogFormVisible"
+  >
+    <el-form
+      ref="dataForm"
+      :rules="rules"
+      :model="deviceForm"
+      label-width="100px"
+      label-well-code="right"
+    >
+      <el-row :gutter="20">
+        <el-col :span="12">
+          <el-form-item label="设备类型" prop="deviceType">
+            <el-select
+              v-model="deviceForm.deviceType"
+              placeholder="请选择设备类型"
+              clearable
+              :disabled="dialogStatus === 'detail' ? true : false"
+            >
+              <el-option
+                v-for="item in deviceTypeList"
+                :key="item.value"
+                :label="item.name"
+                :value="item.value"
+              />
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="井类型" prop="wellType">
+            <el-select
+              v-model="deviceForm.wellType"
+              clearable
+              placeholder="请选择支持井类型"
+              :disabled="dialogStatus === 'detail' ? true : false"
+            >
+              <el-option
+                v-for="item in wellTypeList"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value"
+              />
+            </el-select>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="20">
+        <el-col :span="12">
+          <el-form-item label="经度" prop="lng">
+            <el-input
+              v-model="deviceForm.lng"
+              clearable
+              placeholder="请输入经度"
+              :disabled="dialogStatus === 'detail' ? true : false"
+            />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="纬度" prop="lat">
+            <el-input
+              v-model="deviceForm.lat"
+              clearable
+              placeholder="请输入纬度"
+              :disabled="dialogStatus === 'detail' ? true : false"
+            />
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="20">
+        <el-col :span="12">
+          <el-form-item label="原始经度84" prop="coordinateX">
+            <el-input
+              v-model="deviceForm.coordinateX"
+              clearable
+              placeholder="原始经度84"
+              :disabled="dialogStatus === 'detail' ? true : false"
+            />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="原始纬度84" prop="coordinateY">
+            <el-input
+              v-model="deviceForm.coordinateY"
+              clearable
+              placeholder="原始纬度84"
+              :disabled="dialogStatus === 'detail' ? true : false"
+            />
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="20">
+        <el-col :span="12">
+          <el-form-item label="百度坐标纬度" prop="latBaidu">
+            <el-input
+              v-model="deviceForm.latBaidu"
+              clearable
+              placeholder="百度坐标纬度"
+              :disabled="dialogStatus === 'detail' ? true : false"
+            />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="百度坐标经度" prop="lngBaidu">
+            <el-input
+              v-model="deviceForm.lngBaidu"
+              clearable
+              placeholder="百度坐标经度"
+              :disabled="dialogStatus === 'detail' ? true : false"
+            />
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="20">
+        <el-col :span="12">
+          <el-form-item label="高德坐标纬度" prop="latGaode">
+            <el-input
+              v-model="deviceForm.latGaode"
+              clearable
+              placeholder="高德坐标纬度"
+              :disabled="dialogStatus === 'detail' ? true : false"
+            />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="高德坐标经度" prop="lngGaode">
+            <el-input
+              v-model="deviceForm.lngGaode"
+              clearable
+              placeholder="高德坐标经度"
+              :disabled="dialogStatus === 'detail' ? true : false"
+            />
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="20">
+        <el-col :span="12">
+          <el-form-item label="最后上传时间" prop="lastTime">
+            <el-input
+              v-model="deviceForm.lastTime"
+              clearable
+              placeholder="设备最后上传时间"
+              :disabled="dialogStatus === 'detail' ? true : false"
+            />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="设备离线天数" prop="offlineDays">
+            <el-input
+              v-model="deviceForm.offlineDays"
+              clearable
+              placeholder="设备离线天数"
+              :disabled="dialogStatus === 'detail' ? true : false"
+            />
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
+    <div
+      v-show="dialogStatus === 'detail' ? false : true"
+      slot="footer"
+      class="dialog-footer"
+    >
+      <el-button type="primary" @click="saveData">
+        保存
+      </el-button>
+      <el-button @click="dialogFormVisible = false">
+        取消
+      </el-button>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+import { getDevice, updateDept, addDept } from '@/api/systemConfig/deptPermission'
+export default {
+  name: 'EditDeviceStatics',
+  data() {
+    return {
+      dialogFormVisible: false, // 对话框显示隐藏
+      deviceTypeList: [], // 设备类型
+      dialogStatus: '', // 对话框类型：create,update,detail
+      // 对话框标题
+      textMap: {
+        update: '编辑',
+        create: '新增',
+        detail: '详情'
+      },
+      // 支持井类型
+      wellTypeList: [
+        {
+          label: '井类型一',
+          value: '1'
+        },
+        {
+          label: '井类型二',
+          value: '2'
+        }
+      ],
+      // 表单内容
+      deviceForm: {
+        deptid: '',
+        wellType: '',
+        deviceType: '',
+        lng: '',
+        lat: '',
+        coordinateX: '',
+        coordinateY: '',
+        latBaidu: '',
+        lngBaidu: '',
+        latGaode: '',
+        lngGaode: '',
+        lastTime: '',
+        offlineDays: ''
+      },
+      // 表单校验规则
+      rules: {
+        deptid: [{ required: true, message: '组织id不能为空', trigger: ['blur', 'change'] }],
+        wellType: [{ required: true, message: '支持井类型必选', trigger: ['blur', 'change'] }],
+        deviceType: [{ required: true, message: '支持设备类型必选', trigger: ['blur', 'change'] }],
+        lng: [{ required: true, message: '经度不能为空', trigger: ['blur', 'change'] }],
+        lat: [{ required: true, message: '纬度不能为空', trigger: ['blur', 'change'] }]
+      }
+    }
+  },
+  created() {
+    this.fetchDeviceType()
+  },
+  methods: {
+    // 获取设备类型
+    fetchDeviceType() {
+      getDevice().then(response => {
+        this.deviceTypeList = response.data
+      })
+    },
+    // 重置表单
+    resetForm() {
+      this.deviceForm = {
+        deptid: '',
+        wellType: '',
+        deviceType: '',
+        lng: '',
+        lat: ''
+      }
+    },
+    // 父子组件通信
+    initDialog(dialogStatus, row = null) {
+      this.dialogFormVisible = true
+      this.dialogStatus = dialogStatus
+      if (this.dialogStatus === 'create') {
+        this.resetForm()
+        this.$nextTick(() => {
+          this.$refs['dataForm'].clearValidate()
+        })
+      } else if (this.dialogStatus === 'update' || this.dialogStatus === 'detail') {
+        this.deviceForm = {
+          deptid: row.deptid,
+          wellType: row.wellType,
+          deviceType: row.deviceType,
+          lng: row.lng,
+          lat: row.lat
+        }
+      }
+    },
+    // 保存数据
+    saveData() {
+      if (this.dialogStatus === 'update') {
+        this.updateData()
+      } else if (this.dialogStatus === 'create') {
+        this.createData()
+      }
+    },
+    // 修改数据
+    updateData() {
+      this.$refs['dataForm'].validate((valid) => {
+        if (valid) {
+          updateDept(this.deviceForm).then(response => {
+            if (response.code === 200) {
+              this.$message.success('修改成功')
+              this.$emit('watchChild')
+              this.dialogFormVisible = false
+            }
+          })
+        }
+      })
+    },
+    // 新增数据
+    createData: function() {
+      this.$refs['dataForm'].validate((valid) => {
+        console.log(this.deviceForm)
+        if (valid) {
+          addDept(this.deviceForm).then(response => {
+            if (response.code === 200) {
+              this.$confirm('新增成功，是否继续新增?', '提示', {
+                confirmButtonText: '是',
+                cancelButtonText: '否',
+                type: 'info'
+              }).then(() => {
+                this.resetForm()
+                this.$nextTick(() => {
+                  this.$refs['dataForm'].clearValidate()
+                })
+              }).catch(() => {
+                this.$emit('watchChild') // 刷新父组件数据列表
+                this.dialogFormVisible = false
+              })
+            }
+          })
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  .el-select{
+    width: 100%;
+  }
+</style>
diff --git a/src/views/deviceStatics/components/listdeviceOffline.vue b/src/views/deviceStatics/components/listdeviceOffline.vue
new file mode 100644
index 0000000..dd748fc
--- /dev/null
+++ b/src/views/deviceStatics/components/listdeviceOffline.vue
@@ -0,0 +1,220 @@
+<template>
+  <el-row>
+    <el-col>
+      <el-card shadow="never">
+        <el-col>
+          <div class="flagBoxStyle">
+            <div class="flagStyle" />
+            <div>离线设备</div>
+          </div>
+        </el-col>
+        <el-col>
+          <search-area type="">
+            <!--一般查询条件-->
+            <search-item>
+              <el-input
+                v-model="listQuery.deviceCode"
+                placeholder="设备编号"
+                clearable
+              />
+            </search-item>
+            <search-item>
+              <el-select
+                v-model="listQuery.deviceType"
+                clearable
+                placeholder="设备类型"
+              >
+                <el-option
+                  v-for="item in deviceTypeList"
+                  :key="item.value"
+                  :label="item.name"
+                  :value="item.value"
+                />
+              </el-select>
+            </search-item>
+            <search-item>
+              <el-button size="small" type="primary" class="search-btn" @search="fetchData">
+                搜索
+              </el-button>
+            </search-item>
+            <search-item>
+              <el-button size="small" type="primary" class="search-btn" @click="batchExport">
+                导出
+              </el-button>
+            </search-item>
+          </search-area>
+          <normal-table
+            :data="list"
+            :height="height"
+            :query="listQuery"
+            :total="tableOption.total"
+            :options="tableOption.options"
+            :tools-option="tableOption.toolsOption"
+            :list-loading="listLoading"
+            size="small"
+            @change="changePage"
+          >
+            <template slot="columns">
+              <el-table-column v-for="column in columns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
+                <template slot-scope="scope">
+                  <span :class="column.class">{{ scope.row[column.value] }}</span>
+                </template>
+              </el-table-column>
+              <el-table-column label="操作" width="60" align="center">
+                <template slot-scope="scope">
+                  <el-button type="text" size="small" @click="edit(scope.row)">
+                    详情
+                  </el-button>
+                </template>
+              </el-table-column>
+            </template>
+          </normal-table>
+        </el-col>
+      </el-card>
+    </el-col>
+    <edit-device-statics ref="editDevice" @watchChild="fetchData" />
+  </el-row>
+</template>
+
+<script>
+import { getDeviceType } from '@/api/device/device'
+import { offlineList } from '@/api/data/dataStatics'
+import { batchExportNoiseData } from '@/api/data/data'
+import editDeviceStatics from './editDeviceStatics'
+export default {
+  name: 'ListdeviceOffline',
+  components: { editDeviceStatics },
+  data() {
+    return {
+      height: 300,
+      // 表格属性
+      tableOption: {
+        options: {
+          needIndex: true // 是否需要序号列
+        },
+        toolsOption: {
+          selectColumns: false, // 是否需要筛选列
+          refresh: false // 是否需要刷新按钮
+        },
+        total: 0
+      },
+      // 是否需要序号列
+      options: {
+        needIndex: true
+      },
+      listQuery: {
+        deviceCode: '',
+        deviceType: '',
+        offset: 1,
+        limit: 20
+      },
+      list: [],
+      listLoading: false,
+      deviceTypeList: [],
+      columns: [
+        {
+          text: '设备编号',
+          value: 'deviceType',
+          align: 'center'
+        },
+        {
+          text: '设备类型',
+          value: 'deviceTypeName',
+          align: 'center'
+        },
+        {
+          text: '井编号',
+          value: 'wellCode',
+          align: 'center'
+        },
+        {
+          text: '最近记录上传时间',
+          value: 'lastTime',
+          align: 'center'
+        },
+        {
+          text: '离线天数',
+          value: 'offlineDays',
+          align: 'center'
+        }
+      ] // 显示列
+    }
+  },
+  created() {
+    this.fetchDeviceType()
+    this.fetchData()
+  },
+  methods: {
+    // 获取设备类型
+    fetchDeviceType() {
+      getDeviceType().then(response => {
+        this.deviceTypeList = response.data
+      })
+    },
+    fetchData() {
+      offlineList(this.listQuery).then(response => {
+        this.tableOption.total = response.total
+        this.list = response.data
+      })
+    },
+    // 页数发生变化后的操作，可能是页码变化，可能是每页容量变化，此函数必写
+    changePage(val) {
+      if (val && val.size) {
+        this.listQuery.limit = val.size
+      }
+      if (val && val.page) {
+        this.listQuery.offset = val.page
+      }
+      this.fetchData()
+    },
+    // 批量导出
+    batchExport() {
+      // 全屏加载动画
+      const loading = this.$loading({
+        lock: true,
+        text: '数据处理中,请稍后...',
+        spinner: 'el-icon-loading',
+        background: 'rgba(0, 0, 0, 0.7)'
+      })
+      batchExportNoiseData(this.listQuery).then(res => {
+        loading.close() // 关闭加载动画
+        const blob = new Blob([res.data])
+        const downloadElement = document.createElement('a')
+        const href = window.URL.createObjectURL(blob) // 创建下载的链接
+        downloadElement.href = href
+        downloadElement.download = `离线设备数据.xlsx` // 下载后文件名
+        document.body.appendChild(downloadElement)
+        downloadElement.click() // 点击下载
+        document.body.removeChild(downloadElement) // 下载完成移除元素
+        window.URL.revokeObjectURL(href) // 释放blob对象
+      }).catch((res) => {
+        loading.close()
+      })
+    },
+    // 详情
+    edit(row) {
+      this.$refs.editDevice.initDialog('detail', row)
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.flagBoxStyle {
+  display: flex;
+  margin-bottom: 20px;
+}
+.flagBoxStyle div:nth-child(2){
+  line-height: 30px;
+  font-weight: 600;
+}
+.flagStyle {
+  width: 4px;
+  height: 30px;
+  margin-right: 6px;
+  background: rgb(64 121 242);
+}
+.search-btn {
+  margin-top: 4px;
+}
+</style>
diff --git a/src/views/deviceStatics/deviceStatics.vue b/src/views/deviceStatics/deviceStatics.vue
index 3f04678..001410b 100644
--- a/src/views/deviceStatics/deviceStatics.vue
+++ b/src/views/deviceStatics/deviceStatics.vue
@@ -1,30 +1,44 @@
 <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 class="container">
+    <div class="ChartBoxLeft">
+      <device-count-by-type />
+      <device-count-by-dept />
+    </div>
+    <div class="ChartBoxRight">
+      <device-count-by-offline />
+      <list-device-offline />
+    </div>
   </div>
 </template>
 
 <script>
-import DeviceCountByType from './components/deviceCountByType'
-import DeviceCountByDept from './components/deviceCountByDept'
+import deviceCountByType from './components/deviceCountByType'
+import deviceCountByDept from './components/deviceCountByDept'
+import deviceCountByOffline from './components/deviceCountByOffline'
+import listDeviceOffline from './components/listdeviceOffline'
 export default {
   name: 'DeviceStatics',
   components: {
-    DeviceCountByDept,
-    DeviceCountByType
+    deviceCountByType,
+    deviceCountByDept,
+    deviceCountByOffline,
+    listDeviceOffline
   },
   data() {
   }
 }
 </script>
 
-<style scoped>
-
+<style rel="stylesheet/scss" lang="scss" scoped>
+.container {
+  display: flex;
+  margin-right: 10px;
+}
+.ChartBoxLeft {
+  width: 40%;
+}
+.ChartBoxRight{
+  width: 60%;
+}
 </style>
+

diff --git a/mock/deviceManage/device.js b/mock/deviceManage/device.js
new file mode 100644
index 0000000..1f0650d
--- /dev/null
+++ b/mock/deviceManage/device.js
@@ -0,0 +1,672 @@
+const deviceList = [
+  {
+    'bfzt': '0',
+    'bfztName': '撤防',
+    'communication': '3,4',
+    'concenCode': '',
+    'concenId': '',
+    'deptName': '燃气集团总公司',
+    'deptid': '24',
+    'installHeight': '123',
+    'devcode': '342021000001',
+    'deviceName': '',
+    'deviceType': '12',
+    'deviceTypeName': '开挖监测仪',
+    'id': '1476131375777120257',
+    'installDate': '2021-12-29',
+    'modelId': '19',
+    'modelName': 'BIRMM-RTU100N',
+    'onlineState': '1',
+    'onlineStateName': '在线',
+    'position': 'test001位置',
+    'ts': '2021-12-29',
+    'valid': '1',
+    'watchType': '燃气泄漏',
+    'wellCode': 'test001',
+    'wellId': '4453'
+  },
+  {
+    'bfzt': '0',
+    'bfztName': '撤防',
+    'communication': '3,4',
+    'concenCode': '',
+    'concenId': '',
+    'deptName': '燃气集团总公司',
+    'deptid': '24',
+    'installHeight': '123',
+    'devcode': '342021000001',
+    'deviceName': '',
+    'deviceType': '12',
+    'deviceTypeName': '井盖状态监测仪',
+    'id': '1476131375777120257',
+    'installDate': '2021-12-29',
+    'modelId': '19',
+    'modelName': 'BIRMM-RTU100N',
+    'onlineState': '1',
+    'onlineStateName': '在线',
+    'position': 'test001位置',
+    'ts': '2021-12-29',
+    'valid': '1',
+    'watchType': '燃气泄漏',
+    'wellCode': 'test001',
+    'wellId': '4453'
+  },
+  {
+    'bfzt': '0',
+    'bfztName': '撤防',
+    'communication': '3,4',
+    'concenCode': '',
+    'concenId': '',
+    'deptName': '燃气集团总公司',
+    'deptid': '24',
+    'installHeight': '123',
+    'devcode': '342021000001',
+    'deviceName': '',
+    'deviceType': '12',
+    'deviceTypeName': '液位监测仪',
+    'id': '1476131375777120257',
+    'installDate': '2021-12-29',
+    'modelId': '19',
+    'modelName': 'BIRMM-RTU100N',
+    'onlineState': '1',
+    'onlineStateName': '在线',
+    'position': 'test001位置',
+    'ts': '2021-12-29',
+    'valid': '1',
+    'watchType': '燃气泄漏',
+    'wellCode': 'test001',
+    'wellId': '4453'
+  },
+  {
+    'bfzt': '0',
+    'bfztName': '撤防',
+    'communication': '3,4',
+    'concenCode': '',
+    'concenId': '',
+    'deptName': '燃气集团总公司',
+    'deptid': '24',
+    'installHeight': '123',
+    'devcode': '342021000001',
+    'deviceName': '',
+    'deviceType': '12',
+    'deviceTypeName': '燃气智能监测终端',
+    'id': '1476131375777120257',
+    'installDate': '2021-12-29',
+    'modelId': '19',
+    'modelName': 'BIRMM-RTU100N',
+    'onlineState': '1',
+    'onlineStateName': '在线',
+    'position': 'test001位置',
+    'ts': '2021-12-29',
+    'valid': '1',
+    'watchType': '燃气泄漏',
+    'wellCode': 'test001',
+    'wellId': '4453'
+  },
+  {
+    'bfzt': '0',
+    'bfztName': '撤防',
+    'communication': '3,4',
+    'concenCode': '',
+    'concenId': '',
+    'deptName': '燃气集团总公司',
+    'deptid': '24',
+    'installHeight': '123',
+    'devcode': '342021000001',
+    'deviceName': '',
+    'deviceType': '12',
+    'deviceTypeName': '噪声记录仪',
+    'id': '1476131375777120257',
+    'installDate': '2021-12-29',
+    'modelId': '19',
+    'modelName': 'BIRMM-RTU100N',
+    'onlineState': '1',
+    'onlineStateName': '在线',
+    'position': 'test001位置',
+    'ts': '2021-12-29',
+    'valid': '1',
+    'watchType': '燃气泄漏',
+    'wellCode': 'test001',
+    'wellId': '4453'
+  },
+  {
+    'bfzt': '0',
+    'bfztName': '撤防',
+    'communication': '3,4',
+    'concenCode': '',
+    'concenId': '',
+    'deptName': '燃气集团总公司',
+    'deptid': '24',
+    'installHeight': '123',
+    'devcode': '342021000001',
+    'deviceName': '',
+    'deviceType': '12',
+    'deviceTypeName': '有害气体监测仪',
+    'id': '1476131375777120257',
+    'installDate': '2021-12-29',
+    'modelId': '19',
+    'modelName': 'BIRMM-RTU100N',
+    'onlineState': '1',
+    'onlineStateName': '在线',
+    'position': 'test001位置',
+    'ts': '2021-12-29',
+    'valid': '1',
+    'watchType': '燃气泄漏',
+    'wellCode': 'test001',
+    'wellId': '4453'
+  },
+  {
+    'bfzt': '0',
+    'bfztName': '撤防',
+    'communication': '3,4',
+    'concenCode': '',
+    'concenId': '',
+    'deptName': '燃气集团总公司',
+    'deptid': '24',
+    'installHeight': '123',
+    'devcode': '342021000001',
+    'deviceName': '',
+    'deviceType': '12',
+    'deviceTypeName': '温湿度监测仪',
+    'id': '1476131375777120257',
+    'installDate': '2021-12-29',
+    'modelId': '19',
+    'modelName': 'BIRMM-RTU100N',
+    'onlineState': '1',
+    'onlineStateName': '在线',
+    'position': 'test001位置',
+    'ts': '2021-12-29',
+    'valid': '1',
+    'watchType': '燃气泄漏',
+    'wellCode': 'test001',
+    'wellId': '4453'
+  },
+  {
+    'bfzt': '0',
+    'bfztName': '撤防',
+    'communication': '3,4',
+    'concenCode': '',
+    'concenId': '',
+    'deptName': '燃气集团总公司',
+    'deptid': '24',
+    'installHeight': '123',
+    'devcode': '342021000001',
+    'deviceName': '',
+    'deviceType': '12',
+    'deviceTypeName': '井盖定位监测仪',
+    'id': '1476131375777120257',
+    'installDate': '2021-12-29',
+    'modelId': '19',
+    'modelName': 'BIRMM-RTU100N',
+    'onlineState': '1',
+    'onlineStateName': '在线',
+    'position': 'test001位置',
+    'ts': '2021-12-29',
+    'valid': '1',
+    'watchType': '燃气泄漏',
+    'wellCode': 'test001',
+    'wellId': '4453'
+  },
+  {
+    'bfzt': '0',
+    'bfztName': '撤防',
+    'communication': '3,4',
+    'concenCode': '',
+    'concenId': '',
+    'deptName': '燃气集团总公司',
+    'deptid': '24',
+    'installHeight': '123',
+    'devcode': '342021000001',
+    'deviceName': '',
+    'deviceType': '12',
+    'deviceTypeName': '燃气智能终端（一体化）',
+    'id': '1476131375777120257',
+    'installDate': '2021-12-29',
+    'modelId': '19',
+    'modelName': 'BIRMM-RTU100N',
+    'onlineState': '1',
+    'onlineStateName': '在线',
+    'position': 'test001位置',
+    'ts': '2021-12-29',
+    'valid': '1',
+    'watchType': '燃气泄漏',
+    'wellCode': 'test001',
+    'wellId': '4453'
+  },
+  {
+    'bfzt': '0',
+    'bfztName': '撤防',
+    'communication': '3,4',
+    'concenCode': '',
+    'concenId': '',
+    'deptName': '燃气集团总公司',
+    'deptid': '24',
+    'installHeight': '123',
+    'devcode': '342021000001',
+    'deviceName': '',
+    'deviceType': '12',
+    'deviceTypeName': '管盯',
+    'id': '1476131375777120257',
+    'installDate': '2021-12-29',
+    'modelId': '19',
+    'modelName': 'BIRMM-RTU100N',
+    'onlineState': '1',
+    'onlineStateName': '在线',
+    'position': 'test001位置',
+    'ts': '2021-12-29',
+    'valid': '1',
+    'watchType': '燃气泄漏',
+    'wellCode': 'test001',
+    'wellId': '4453'
+  }
+]
+const deviceStaticsList = [
+  {
+    'deptName': '燃气集团总公司',
+    'deviceCount': '11',
+    'deptid': '24'
+  },
+  {
+    'deptName': '煤气公司',
+    'deviceCount': '2',
+    'deptid': '24'
+  },
+  {
+    'deptName': '电力公司',
+    'deviceCount': '11',
+    'deptid': '24'
+  }
+
+]
+const deviceOnlineList = [
+  {
+    'deviceType': '井盖状态监测仪',
+    'online': 1,
+    'offline': 9
+  },
+  {
+    'deviceType': '燃气智能监测终端',
+    'online': 1,
+    'offline': 2
+  },
+  {
+    'deviceType': '管盯',
+    'online': 1,
+    'offline': 6
+  }
+
+]
+const deviceOfflineList = [
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  },
+  {
+    'deviceId': '2313221',
+    'deviceType': 'fsdf32113',
+    'deviceTypeName': '井盖状态检测仪',
+    'wellId': 'test1321',
+    'wellCode': 'test3134',
+    'coordinateX': '原始经度84',
+    'coordinateY': '原始纬度84',
+    'latBaidu': '百度坐标纬度',
+    'lngBaidu': '百度坐标经度',
+    'latGaode': '高德坐标纬度',
+    'lngGaode': '高德坐标经度',
+    'position': '位置',
+    'lastTime': '2022/04/12',
+    'offlineDays': '21'
+  }
+]
+module.exports = [
+  // mock get all routes form server
+  {
+    url: '/device/list',
+    type: 'get',
+    response: _ => {
+      return {
+        code: 200,
+        data: deviceList,
+        message: '请求成功',
+        success: true
+      }
+    }
+  },
+  {
+    url: '/statics/deviceStaticsByDept',
+    type: 'get',
+    response: _ => {
+      return {
+        code: 200,
+        data: deviceStaticsList,
+        message: '请求成功',
+        success: true
+      }
+    }
+  },
+  {
+    url: '/statics/deviceCountByOnlineStatus',
+    type: 'get',
+    response: _ => {
+      return {
+        code: 200,
+        data: deviceOnlineList,
+        message: '请求成功',
+        success: true
+      }
+    }
+  },
+  {
+    url: '/device/offlineListPage',
+    type: 'get',
+    response: _ => {
+      return {
+        code: 200,
+        'total': 120,
+        data: deviceOfflineList,
+        message: '请求成功',
+        success: true
+      }
+    }
+  }
+]
diff --git a/mock/index.js b/mock/index.js
index 6646246..0e60e80 100644
--- a/mock/index.js
+++ b/mock/index.js
@@ -12,6 +12,7 @@
 const dashboard = require('./biz/dashboard')
 const search = require('./remote-search')
 const overview = require('./biz/overview')
+const device = require('./deviceManage/device')
 const deviceType = require('./deviceManage/deviceType')
 const deviceModels = require('./deviceManage/deviceModels')
 const deviceImei = require('./deviceManage/deviceImei')
@@ -42,7 +43,8 @@
   ...tenantConfig,
   ...deptPermission,
   ...tenant,
-  ...warningRule
+  ...warningRule,
+  ...device
 ]
 
 // for front mock
diff --git a/src/api/data/dataStatics.js b/src/api/data/dataStatics.js
index b96a05e..04f756a 100644
--- a/src/api/data/dataStatics.js
+++ b/src/api/data/dataStatics.js
@@ -11,6 +11,14 @@
     params
   })
 }
+// 离线设备列表
+export function offlineList(params) {
+  return request({
+    url: 'device/offlineListPage',
+    method: 'get',
+    params
+  })
+}
 // 根据权属单位统计井数量
 export function wellStaticByDept(params) {
   return request({
@@ -38,6 +46,15 @@
   })
 }
 
+// 离线设备数量
+export function deviceStaticsByOnline(params) {
+  return request({
+    url: 'statics/deviceCountByOnlineStatus',
+    method: 'get',
+    params
+  })
+}
+
 // 根据权属单位统计设备数量
 export function deviceStaticsByDept(params) {
   return request({
diff --git a/src/components/NormalTable/index.vue b/src/components/NormalTable/index.vue
index 9e23838..3fdc6db 100644
--- a/src/components/NormalTable/index.vue
+++ b/src/components/NormalTable/index.vue
@@ -69,7 +69,7 @@
         </el-col>
       </el-row>
       <!-- 表格正文-->
-      <el-table v-loading="listLoading" :data="data" :size="size" class="table" row-class-name="small-row-class" border @selection-change="selectionChange" @row-click="rowClick">
+      <el-table v-loading="listLoading" :height="height" :data="data" :size="size" class="table" row-class-name="small-row-class" border @selection-change="selectionChange" @row-click="rowClick">
         <!--需要加在表最前方的插槽-->
         <slot name="preColumns" />
         <!--序号列-->
@@ -141,6 +141,12 @@
         return []
       }
     }, // 数据
+    height: {
+      type: Number,
+      default: function() {
+        return []
+      }
+    },
     total: {
       type: Number,
       default: 0
diff --git a/src/views/deviceManage/components/listDigData.vue b/src/views/deviceManage/components/listDigData.vue
new file mode 100644
index 0000000..5a2b795
--- /dev/null
+++ b/src/views/deviceManage/components/listDigData.vue
@@ -0,0 +1,19 @@
+<template>
+  <div>开挖监测仪</div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+
+    }
+  },
+  methods: {
+    initData: function(row = null) {
+      console.log(row, '===')
+    }
+  }
+}
+</script>
+
diff --git a/src/views/deviceManage/components/listGasData.vue b/src/views/deviceManage/components/listGasData.vue
new file mode 100644
index 0000000..ccbaa8b
--- /dev/null
+++ b/src/views/deviceManage/components/listGasData.vue
@@ -0,0 +1,18 @@
+<template>
+  <div>燃气智能监测终端</div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+
+    }
+  },
+  methods: {
+    initData: function(row = null) {
+      console.log(row, '===')
+    }
+  }
+}
+</script>
diff --git a/src/views/deviceManage/components/listHarmfulData.vue b/src/views/deviceManage/components/listHarmfulData.vue
new file mode 100644
index 0000000..687f9bc
--- /dev/null
+++ b/src/views/deviceManage/components/listHarmfulData.vue
@@ -0,0 +1,18 @@
+<template>
+  <div>有害气体监测仪</div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+
+    }
+  },
+  methods: {
+    initData: function(row = null) {
+      console.log(row, '===')
+    }
+  }
+}
+</script>
diff --git a/src/views/deviceManage/components/listLiquidData.vue b/src/views/deviceManage/components/listLiquidData.vue
new file mode 100644
index 0000000..f279ee9
--- /dev/null
+++ b/src/views/deviceManage/components/listLiquidData.vue
@@ -0,0 +1,18 @@
+<template>
+  <div>液位监测仪</div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+
+    }
+  },
+  methods: {
+    initData: function(row = null) {
+      console.log(row, '===')
+    }
+  }
+}
+</script>
diff --git a/src/views/deviceManage/components/listLiquidGasData.vue b/src/views/deviceManage/components/listLiquidGasData.vue
new file mode 100644
index 0000000..6f5535e
--- /dev/null
+++ b/src/views/deviceManage/components/listLiquidGasData.vue
@@ -0,0 +1,18 @@
+<template>
+  <div>燃气智能终端（一体化）</div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+
+    }
+  },
+  methods: {
+    initData: function(row = null) {
+      console.log(row, '===')
+    }
+  }
+}
+</script>
diff --git a/src/views/deviceManage/components/listNoiseData.vue b/src/views/deviceManage/components/listNoiseData.vue
new file mode 100644
index 0000000..7dad007
--- /dev/null
+++ b/src/views/deviceManage/components/listNoiseData.vue
@@ -0,0 +1,18 @@
+<template>
+  <div>噪声记录仪</div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+
+    }
+  },
+  methods: {
+    initData: function(row = null) {
+      console.log(row, '===')
+    }
+  }
+}
+</script>
diff --git a/src/views/deviceManage/components/listTempData.vue b/src/views/deviceManage/components/listTempData.vue
new file mode 100644
index 0000000..f7548b5
--- /dev/null
+++ b/src/views/deviceManage/components/listTempData.vue
@@ -0,0 +1,18 @@
+<template>
+  <div>温湿度监测仪</div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+
+    }
+  },
+  methods: {
+    initData: function(row = null) {
+      console.log(row, '===')
+    }
+  }
+}
+</script>
diff --git a/src/views/deviceManage/components/listTubeData.vue b/src/views/deviceManage/components/listTubeData.vue
new file mode 100644
index 0000000..94f1772
--- /dev/null
+++ b/src/views/deviceManage/components/listTubeData.vue
@@ -0,0 +1,18 @@
+<template>
+  <div>管盯</div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+
+    }
+  },
+  methods: {
+    initData: function(row = null) {
+      console.log(row, '===')
+    }
+  }
+}
+</script>
diff --git a/src/views/deviceManage/components/listWellData.vue b/src/views/deviceManage/components/listWellData.vue
new file mode 100644
index 0000000..7a6436d
--- /dev/null
+++ b/src/views/deviceManage/components/listWellData.vue
@@ -0,0 +1,18 @@
+<template>
+  <div>井盖状态监测仪</div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+
+    }
+  },
+  methods: {
+    initData: function(row = null) {
+      console.log(row, '===')
+    }
+  }
+}
+</script>
diff --git a/src/views/deviceManage/components/listWellLocaData.vue b/src/views/deviceManage/components/listWellLocaData.vue
new file mode 100644
index 0000000..f784671
--- /dev/null
+++ b/src/views/deviceManage/components/listWellLocaData.vue
@@ -0,0 +1,18 @@
+<template>
+  <div>井盖定位监测仪</div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+
+    }
+  },
+  methods: {
+    initData: function(row = null) {
+      console.log(row, '===')
+    }
+  }
+}
+</script>
diff --git a/src/views/deviceManage/detailDevice.vue b/src/views/deviceManage/detailDevice.vue
index eefc549..8285ee7 100644
--- a/src/views/deviceManage/detailDevice.vue
+++ b/src/views/deviceManage/detailDevice.vue
@@ -3,110 +3,114 @@
     <el-form ref="dataForm" :model="deviceForm" label-well-code="right" label-width="100px">
       <el-row :gutter="20">
         <el-col :span="12">
-          <el-form-item label="设备名称" prop="deviceName">
-            <el-input v-model="deviceForm.deviceName" type="text" placeholder="未知" disabled />
+          <el-form-item label="设备编号" prop="devcode">
+            <el-input v-model.trim="deviceForm.devcode" disabled type="text" placeholder="必填" />
           </el-form-item>
         </el-col>
         <el-col :span="12">
-          <el-form-item label="设备编号" prop="devcode">
-            <el-input v-model="deviceForm.devcode" type="text" placeholder="未知" disabled />
+          <el-form-item label="安装日期" prop="installDate">
+            <el-date-picker
+              v-model.trim="deviceForm.installDate"
+              disabled
+              type="date"
+              value-format="yyyy-MM-dd"
+              placeholder="选择日期"
+            />
           </el-form-item>
         </el-col>
       </el-row>
       <el-row :gutter="20">
         <el-col :span="12">
           <el-form-item label="设备类型" prop="deviceType">
-            <el-input v-model="deviceForm.deviceTypeName" type="text" placeholder="未知" disabled />
+            <el-select v-model="deviceForm.deviceType" disabled placeholder="请选择设备类型">
+              <el-option
+                v-for="item in deviceTypeList"
+                :key="item.value"
+                :label="item.name"
+                :value="item.value"
+              />
+            </el-select>
           </el-form-item>
         </el-col>
         <el-col :span="12">
           <el-form-item label="设备型号" prop="modelId">
-            <el-input v-model="deviceForm.modelName" type="text" placeholder="未知" disabled />
-          </el-form-item>
-        </el-col>
-      </el-row>
-      <el-row :gutter="20">
-        <el-col :span="12">
-          <el-form-item label="在线状态" prop="wellCode">
-            <el-input v-model="deviceForm.onlineStateName" type="text" placeholder="未知" disabled />
-          </el-form-item>
-        </el-col>
-        <el-col :span="12">
-          <el-form-item label="权属单位" prop="concenCode">
-            <el-input v-model="deviceForm.deptName" type="text" placeholder="未知" disabled />
+            <el-select v-model="deviceForm.modelId" disabled placeholder="请选择设备型号">
+              <el-option
+                v-for="item in deviceModelList"
+                :key="item.value"
+                :label="item.name"
+                :value="item.value"
+              />
+            </el-select>
           </el-form-item>
         </el-col>
       </el-row>
       <el-row :gutter="20">
         <el-col :span="12">
           <el-form-item label="井编号" prop="wellCode">
-            <el-input v-model="deviceForm.wellCode" type="text" placeholder="未知" disabled />
+            <el-input v-model.trim="deviceForm.wellCode" disabled type="text" placeholder="必填" />
           </el-form-item>
         </el-col>
         <el-col :span="12">
-          <el-form-item label="布防状态" prop="bfztName">
-            <el-input v-model="deviceForm.bfztName" type="text" placeholder="未知" disabled />
-          </el-form-item>
-        </el-col>
-      </el-row>
-      <el-row :gutter="20">
-        <el-col :span="24">
-          <el-form-item label="位置" prop="position">
-            <el-input v-model="deviceForm.position" type="text" placeholder="未知" disabled />
-          </el-form-item>
-        </el-col>
-      </el-row>
-      <el-row :gutter="20">
-        <el-col :span="12">
-          <el-form-item label="安装日期" prop="installDate">
-            <el-input v-model="deviceForm.installDate" type="text" placeholder="未知" disabled />
-          </el-form-item>
-        </el-col>
-        <el-col :span="12">
-          <el-form-item label="集中器编号" prop="concenCode">
-            <el-input v-model="deviceForm.concenCode" type="text" placeholder="未知" disabled />
-          </el-form-item>
-        </el-col>
-      </el-row>
-      <el-row :gutter="20">
-        <el-col :span="12">
-          <el-form-item label="设备安装高度" prop="installHeight">
-            <el-input v-model="deviceForm.installHeight" type="text" placeholder="未知" disabled />
+          <el-form-item label="安装高度(m)" prop="installHeight">
+            <el-input v-model.trim="deviceForm.installHeight" disabled type="text" placeholder="必填" />
           </el-form-item>
         </el-col>
       </el-row>
     </el-form>
+    <component :is="cmpName" ref="deviceTypeDialog" @watchChild="fetchDeviceList" />
   </el-dialog>
 </template>
 
 <script>
+import listDigData from './components/listDigData'
+import listGasData from './components/listGasData'
+import listHarmfulData from './components/listHarmfulData'
+import listLiquidData from './components/listLiquidData'
+import listLiquidGasData from './components/listLiquidGasData'
+import listNoiseData from './components/listNoiseData'
+import listTempData from './components/listTempData'
+import listTubeData from './components/listTubeData'
+import listWellData from './components/listWellData'
+import listWellLocaData from './components/listWellLocaData'
 
 export default {
-  name: 'DetailDevice',
+  name: 'EditDevice',
+  components: {
+    listDigData,
+    listGasData,
+    listHarmfulData,
+    listLiquidData,
+    listLiquidGasData,
+    listNoiseData,
+    listTempData,
+    listTubeData,
+    listWellData,
+    listWellLocaData
+  },
   data() {
     return {
       dialogFormVisible: false, // 对话框是否显示
-      dialogStatus: '', // 对话框类型：create,update
+      dialogStatus: '', // 对话框类型：create,update,detail
+      cmpName: '', // 组件名称
       deviceForm: {
         id: '',
         deviceName: '',
         devcode: '',
-        deviceTypeName: '',
+        deviceType: '',
         wellCode: '',
-        modelName: '',
+        modelId: '',
         installDate: '',
         concenCode: '',
-        installHeight: '',
-        onlineStateName: '',
-        deptName: '',
-        bfztName: '',
-        position: ''
+        installHeight: ''
       }, // 表单
       textMap: {
         update: '编辑',
         create: '新增',
         detail: '详情'
-      } // 表头显示标题z
+      }, // 表头显示标题
+      deviceTypeList: null, // 设备类型列表
+      deviceModelList: null // 设备型号列表
     }
   },
   methods: {
@@ -114,20 +118,57 @@
     initDialog: function(dialogStatus, dialogFormVisible, row = null) {
       this.dialogStatus = dialogStatus
       this.dialogFormVisible = dialogFormVisible
+      this.resetForm()
       this.deviceForm = {
         id: row.id,
         deviceName: row.deviceName,
         devcode: row.devcode,
-        deviceTypeName: row.deviceTypeName,
+        deviceType: row.deviceType,
+        modelId: row.modelId,
         wellCode: row.wellCode,
-        modelName: row.modelName,
-        installDate: row.installDate,
         concenCode: row.concenCode,
-        installHeight: row.installHeight,
-        onlineStateName: row.onlineStateName,
-        deptName: row.deptName,
-        bfztName: row.bfztName,
-        position: row.position
+        installDate: row.installDate,
+        installHeight: row.installHeight
+      }
+      // 展示相对应的设备列表组件
+      if (row.deviceTypeName === '开挖监测仪') {
+        this.cmpName = 'list-dig-data'
+      } else if (row.deviceTypeName === '井盖状态监测仪') {
+        this.cmpName = 'list-well-data'
+      } else if (row.deviceTypeName === '液位监测仪') {
+        this.cmpName = 'list-liquid-data'
+      } else if (row.deviceTypeName === '燃气智能监测终端') {
+        this.cmpName = 'list-gas-data'
+      } else if (row.deviceTypeName === '噪声记录仪') {
+        this.cmpName = 'list-noise-data'
+      } else if (row.deviceTypeName === '有害气体监测仪') {
+        this.cmpName = 'list-harmful-data'
+      } else if (row.deviceTypeName === '温湿度监测仪') {
+        this.cmpName = 'list-temp-data'
+      } else if (row.deviceTypeName === '井盖定位监测仪') {
+        this.cmpName = 'list-well-loca-data'
+      } else if (row.deviceTypeName === '燃气智能终端（一体化）') {
+        this.cmpName = 'list-liquid-gas-data'
+      } else if (row.deviceTypeName === '管盯') {
+        this.cmpName = 'list-tube-data'
+      }
+      setTimeout(() => {
+        this.$refs.deviceTypeDialog.initData(row)
+      }, 100)
+    },
+    fetchDeviceList() {},
+    // 重置表单
+    resetForm() {
+      this.deviceForm = {
+        id: '',
+        deviceName: '',
+        devcode: '',
+        deviceType: '',
+        wellCode: '',
+        modelId: '',
+        installDate: '',
+        concenCode: '',
+        installHeight: ''
       }
     }
   }
@@ -138,4 +179,7 @@
   .el-select{
     width: 100%;
   }
+  .el-date-editor{
+    width: 100%;
+  }
 </style>
diff --git a/src/views/deviceManage/editDevice.vue b/src/views/deviceManage/editDevice.vue
index 41c6907..0ae2cab 100644
--- a/src/views/deviceManage/editDevice.vue
+++ b/src/views/deviceManage/editDevice.vue
@@ -65,7 +65,7 @@
       <el-row :gutter="20">
         <el-col :span="12">
           <el-form-item label="安装高度(m)" prop="installHeight">
-            <el-input v-model.trim="deviceForm.installHeight" :disabled="isDetailMode" type="text" placeholder="非必填" />
+            <el-input v-model.trim="deviceForm.installHeight" :disabled="isDetailMode" type="text" placeholder="必填" />
           </el-form-item>
         </el-col>
       </el-row>
@@ -116,7 +116,8 @@
         wellCode: [{ required: true, message: '井编号不能为空', trigger: ['blur', 'change'] }],
         deviceType: [{ required: true, message: '设备类型必选', trigger: ['blur', 'change'] }],
         modelId: [{ required: true, message: '设备型号必选', trigger: ['blur', 'change'] }],
-        installDate: [{ required: true, message: '安装日期必选', trigger: ['blur', 'change'] }]
+        installDate: [{ required: true, message: '安装日期必选', trigger: ['blur', 'change'] }],
+        installHeight: [{ required: true, message: '设备安装高度不能为空', trigger: ['blur', 'change'] }]
       }, // 前端校验规则
       isEditMode: false, // 编辑模式
       isDetailMode: false // 详情模式
diff --git a/src/views/deviceManage/listDevice.vue b/src/views/deviceManage/listDevice.vue
index 2303523..623cf06 100644
--- a/src/views/deviceManage/listDevice.vue
+++ b/src/views/deviceManage/listDevice.vue
@@ -76,7 +76,6 @@
       </el-row>
       <el-table v-loading="listLoading" :data="list" class="table" border @selection-change="handleSelectionChange">
         <el-table-column v-if="hasPerm('/device/delete')" align="center" type="selection" width="55" />
-        <el-table-column :index="indexMethod" align="center" type="index" />
         <el-table-column v-for="column in columns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
           <template slot-scope="scope">
             <span v-if="column.type!='Button'" :class="column.class">{{ scope.row[column.value] }}</span>
@@ -272,7 +271,7 @@
       this.$refs.editdevice.initDialog('update', this.dialogFormVisible, row)
     },
     detail(row) {
-      this.$refs.editdevice.initDialog('detail', true, row)
+      this.$refs.detaildevice.initDialog('detail', true, row)
     },
     // 删除设备
     del() {
@@ -367,7 +366,7 @@
         this.listQuery.offset = 1
       }
       getDeviceList(this.listQuery).then(response => {
-        this.list = response.data.rows
+        this.list = response.data
         this.total = parseInt(response.data.total)
         this.listLoading = false
       })
diff --git a/src/views/deviceStatics/components/deviceCountByDept.vue b/src/views/deviceStatics/components/deviceCountByDept.vue
index 6dc7375..0d4a211 100644
--- a/src/views/deviceStatics/components/deviceCountByDept.vue
+++ b/src/views/deviceStatics/components/deviceCountByDept.vue
@@ -1,77 +1,81 @@
 <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-row>
+    <el-col>
+      <el-card shadow="never">
+        <el-col>
+          <el-col :span="18">
+            <div class="flagBoxStyle">
+              <div class="flagStyle" />
+              <div>各单位安装设备情况统计</div>
+            </div>
+          </el-col>
+          <el-col :span="6">
+            <el-select
+              v-model="listQuery.deviceType"
+              size="small"
+              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-col>
-      </el-row>
-    </div>
-    <div>
-      <ve-histogram :data="chartData" :grid="grid" :extend="extend" :settings="chartSettings" />
-    </div>
-  </div>
+
+        <el-col>
+          <ve-bar
+            :data="chartData"
+            :grid="grid"
+            :extend="extend"
+            :settings="chartSettings"
+          />
+        </el-col>
+      </el-card>
+    </el-col>
+  </el-row>
 </template>
 
 <script>
 import { getDeviceType } from '@/api/device/device'
 import { deviceStaticsByDept } from '@/api/data/dataStatics'
+
 export default {
   name: 'DeviceCountByDept',
   data() {
-    this.extend = {
-      xAxis: {
-        axisLabel: {
-          rotate: 30,
-          margin: 30,
-          textStyle: {
-            align: 'center'
-          }
-        }
-      },
-      series: {
-        label: { show: true, position: 'top' },
-        barMaxWidth: 35 // 最大柱宽度
-      }
-    }
-    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: '',
+      extend: {
+        series: {
+          label: { show: true, position: 'right' },
+          barMaxWidth: 35 // 最大柱宽度
+        }
+      },
+      grid: {
+        right: 60
+      },
+      // title: {
+      //   text: '井类型数量统计'
+      // },
+      chartSettings: {
+        itemStyle: {
+          'barCategoryGap': 5
+        },
+        barWidth: 15,
+        labelMap: {
+          'deptName': '权属单位',
+          'deviceCount': '设备数量（个）'
+        },
+        dimension: ['deptName'],
+        metrics: ['deviceCount']
+      },
       chartData: {
         columns: ['deptName', 'deviceCount'],
         rows: []
@@ -85,25 +89,11 @@
   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
-        }
+      getDeviceType().then(response => {
+        this.deviceTypeList = response.data
       })
     },
     fetchData() {
-      console.log('fetchData')
       deviceStaticsByDept(this.listQuery).then(response => {
         this.chartData.rows = response.data
       })
@@ -113,16 +103,19 @@
 </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*/
-  }
+.flagBoxStyle {
+  display: flex;
+  margin-bottom: 20px;
+}
+.flagBoxStyle div:nth-child(2){
+  line-height: 30px;
+  font-weight: 600;
+}
+.flagStyle {
+  width: 4px;
+  height: 30px;
+  margin-right: 6px;
+  background: rgb(64 121 242);
+}
 </style>
+
diff --git a/src/views/deviceStatics/components/deviceCountByOffline.vue b/src/views/deviceStatics/components/deviceCountByOffline.vue
new file mode 100644
index 0000000..ba81bec
--- /dev/null
+++ b/src/views/deviceStatics/components/deviceCountByOffline.vue
@@ -0,0 +1,139 @@
+<template>
+  <el-row>
+    <el-col>
+      <el-card shadow="never">
+        <el-col>
+          <div class="flagBoxStyle">
+            <div class="flagStyle" />
+            <div>离线分析</div>
+          </div>
+        </el-col>
+        <el-col>
+          <div>
+            <span class="titleStyle">离线设备</span>
+            <span class="countStyle">12</span>
+            <span>个</span>
+          </div>
+        </el-col>
+        <el-col>
+          <el-col :span="16">
+            <ve-histogram
+              :data="chartData"
+              :grid="grid"
+              :extend="extend"
+              :settings="chartSettings"
+            />
+          </el-col>
+          <el-col :span="8">
+            <ve-pie
+              :data="chartDataPie"
+              :extend="extendPie"
+            />
+          </el-col>
+        </el-col>
+      </el-card>
+    </el-col>
+  </el-row>
+</template>
+
+<script>
+import { deviceStaticsByOnline } from '@/api/data/dataStatics'
+export default {
+  name: 'DeviceCountByOffline',
+  data() {
+    return {
+      online: 0,
+      offline: 0,
+      // 饼状图
+      extendPie: {
+        series: {
+          label: { show: true, position: 'outside', formatter: '{b}:{c}' },
+          radius: '45%'
+        }
+      },
+      chartDataPie: {
+        columns: ['onlineStatus', 'deviceCount'],
+        rows: []
+      },
+      // 柱状图
+      extend: {
+        xAxis: {
+          axisLabel: {
+            rotate: 30,
+            margin: 30,
+            textStyle: {
+              align: 'center'
+            }
+          }
+        },
+        series: {
+          label: { show: true, position: 'top' },
+          barMaxWidth: 35 // 最大柱宽度
+        }
+      },
+      grid: {
+        right: 60
+      },
+      chartSettings: {
+        itemStyle: {
+          'barCategoryGap': 5
+        },
+        barWidth: 15,
+        labelMap: {
+          'deviceType': '权属单位',
+          'offline': '设备数量（个）'
+        },
+        dimension: ['deviceType'],
+        metrics: ['offline']
+      },
+      chartData: {
+        columns: ['deviceType', 'offline'],
+        rows: []
+      }
+    }
+  },
+  created() {
+    this.fetchDeviceType()
+  },
+  methods: {
+    fetchDeviceType() {
+      deviceStaticsByOnline().then(response => {
+        response.data.forEach((item) => {
+          this.online += item.online
+          this.offline += item.offline
+        })
+        this.chartData.rows = response.data
+        this.chartDataPie.rows = [
+          { 'onlineStatus': '在线', 'deviceCount': this.online },
+          { 'onlineStatus': '离线', 'deviceCount': this.offline }
+        ]
+      })
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.flagBoxStyle {
+  display: flex;
+  margin-bottom: 20px;
+}
+.flagBoxStyle div:nth-child(2){
+  line-height: 30px;
+  font-weight: 600;
+}
+.flagStyle {
+  width: 4px;
+  height: 30px;
+  margin-right: 6px;
+  background: rgb(64 121 242);
+}
+.titleStyle {
+  margin-left: 20px;
+  font-size: 12px;
+}
+.countStyle {
+  font-size: 20px;
+  margin: 0 10px;
+}
+</style>
diff --git a/src/views/deviceStatics/components/deviceCountByType.vue b/src/views/deviceStatics/components/deviceCountByType.vue
index 6e71cf8..20adea4 100644
--- a/src/views/deviceStatics/components/deviceCountByType.vue
+++ b/src/views/deviceStatics/components/deviceCountByType.vue
@@ -1,62 +1,99 @@
 <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>
+  <el-row>
+    <el-col>
+      <el-card shadow="never">
+        <el-col>
+          <div class="flagBoxStyle">
+            <div class="flagStyle" />
+            <div>设备总体情况</div>
+          </div>
+        </el-col>
+        <el-col class="cardStyle">
+          <el-col :span="10">
+            <el-card>
+              <div>
+                <span class="ttileStyle">设备总数</span>
+                <span class="countStyle">123</span>
+                <span>个</span>
+              </div>
+            </el-card>
+          </el-col>
+          <el-col :span="10">
+            <el-card>
+              <div>
+                <span class="ttileStyle">低电量设备总数</span>
+                <span class="countStyle">123</span>
+                <span>个</span>
+              </div>
+            </el-card>
+          </el-col>
+        </el-col>
+        <el-col>
+          <div class="flagBoxStyle">
+            <div class="flagStyle" />
+            <div>设备数量分析</div>
+          </div>
+        </el-col>
+        <el-col>
+          <ve-histogram
+            :data="chartData"
+            :grid="grid"
+            :extend="extend"
+            :settings="chartSettings"
+          />
+        </el-col>
+      </el-card>
+    </el-col>
+  </el-row>
 </template>
 
 <script>
 import { deviceStaticsByType } from '@/api/data/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 {
+      extend: {
+        xAxis: {
+          axisLabel: {
+            rotate: 30,
+            margin: 30,
+            textStyle: {
+              align: 'center'
+            }
+          }
+        },
+        series: {
+          label: { show: true, position: 'top' },
+          barMaxWidth: 35 // 最大柱宽度
+        }
+      },
+      grid: {
+        right: 60
+      },
+      chartSettings: {
+        itemStyle: {
+          'barCategoryGap': 5
+        },
+        barWidth: 15,
+        labelMap: {
+          'deviceType': '权属单位',
+          'deviceCount': '设备数量（个）'
+        },
+        dimension: ['deviceType'],
+        metrics: ['deviceCount']
+      },
       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 }
-    // ]
+  created() {
+    this.fetchDeviceType()
   },
   methods: {
-    fetchData() {
+    fetchDeviceType() {
       deviceStaticsByType().then(response => {
         this.chartData.rows = response.data
       })
@@ -66,11 +103,30 @@
 </script>
 
 <style rel="stylesheet/scss" lang="scss" scoped>
-  .chart-title{
-    margin: auto;
-    text-align: center;
-    margin-top: 15px;
-    font-size:20px;
-    font-weight:600
-  }
+.flagBoxStyle {
+  display: flex;
+  margin-bottom: 20px;
+}
+.flagBoxStyle div:nth-child(2){
+  line-height: 30px;
+  font-weight: 600;
+}
+.flagStyle {
+  width: 4px;
+  height: 30px;
+  margin-right: 6px;
+  background: rgb(64 121 242);
+}
+.cardStyle {
+  display:flex;
+  margin-bottom: 20px;
+  justify-content: space-around;
+}
+.ttileStyle {
+  font-size: 12px;
+}
+.countStyle {
+  font-size: 20px;
+  margin: 0 10px;
+}
 </style>
diff --git a/src/views/deviceStatics/components/editDeviceStatics.vue b/src/views/deviceStatics/components/editDeviceStatics.vue
new file mode 100644
index 0000000..959e7da
--- /dev/null
+++ b/src/views/deviceStatics/components/editDeviceStatics.vue
@@ -0,0 +1,322 @@
+<template>
+  <el-dialog
+    append-to-body
+    :title="textMap[dialogStatus]"
+    :visible.sync="dialogFormVisible"
+  >
+    <el-form
+      ref="dataForm"
+      :rules="rules"
+      :model="deviceForm"
+      label-width="100px"
+      label-well-code="right"
+    >
+      <el-row :gutter="20">
+        <el-col :span="12">
+          <el-form-item label="设备类型" prop="deviceType">
+            <el-select
+              v-model="deviceForm.deviceType"
+              placeholder="请选择设备类型"
+              clearable
+              :disabled="dialogStatus === 'detail' ? true : false"
+            >
+              <el-option
+                v-for="item in deviceTypeList"
+                :key="item.value"
+                :label="item.name"
+                :value="item.value"
+              />
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="井类型" prop="wellType">
+            <el-select
+              v-model="deviceForm.wellType"
+              clearable
+              placeholder="请选择支持井类型"
+              :disabled="dialogStatus === 'detail' ? true : false"
+            >
+              <el-option
+                v-for="item in wellTypeList"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value"
+              />
+            </el-select>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="20">
+        <el-col :span="12">
+          <el-form-item label="经度" prop="lng">
+            <el-input
+              v-model="deviceForm.lng"
+              clearable
+              placeholder="请输入经度"
+              :disabled="dialogStatus === 'detail' ? true : false"
+            />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="纬度" prop="lat">
+            <el-input
+              v-model="deviceForm.lat"
+              clearable
+              placeholder="请输入纬度"
+              :disabled="dialogStatus === 'detail' ? true : false"
+            />
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="20">
+        <el-col :span="12">
+          <el-form-item label="原始经度84" prop="coordinateX">
+            <el-input
+              v-model="deviceForm.coordinateX"
+              clearable
+              placeholder="原始经度84"
+              :disabled="dialogStatus === 'detail' ? true : false"
+            />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="原始纬度84" prop="coordinateY">
+            <el-input
+              v-model="deviceForm.coordinateY"
+              clearable
+              placeholder="原始纬度84"
+              :disabled="dialogStatus === 'detail' ? true : false"
+            />
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="20">
+        <el-col :span="12">
+          <el-form-item label="百度坐标纬度" prop="latBaidu">
+            <el-input
+              v-model="deviceForm.latBaidu"
+              clearable
+              placeholder="百度坐标纬度"
+              :disabled="dialogStatus === 'detail' ? true : false"
+            />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="百度坐标经度" prop="lngBaidu">
+            <el-input
+              v-model="deviceForm.lngBaidu"
+              clearable
+              placeholder="百度坐标经度"
+              :disabled="dialogStatus === 'detail' ? true : false"
+            />
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="20">
+        <el-col :span="12">
+          <el-form-item label="高德坐标纬度" prop="latGaode">
+            <el-input
+              v-model="deviceForm.latGaode"
+              clearable
+              placeholder="高德坐标纬度"
+              :disabled="dialogStatus === 'detail' ? true : false"
+            />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="高德坐标经度" prop="lngGaode">
+            <el-input
+              v-model="deviceForm.lngGaode"
+              clearable
+              placeholder="高德坐标经度"
+              :disabled="dialogStatus === 'detail' ? true : false"
+            />
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="20">
+        <el-col :span="12">
+          <el-form-item label="最后上传时间" prop="lastTime">
+            <el-input
+              v-model="deviceForm.lastTime"
+              clearable
+              placeholder="设备最后上传时间"
+              :disabled="dialogStatus === 'detail' ? true : false"
+            />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="设备离线天数" prop="offlineDays">
+            <el-input
+              v-model="deviceForm.offlineDays"
+              clearable
+              placeholder="设备离线天数"
+              :disabled="dialogStatus === 'detail' ? true : false"
+            />
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
+    <div
+      v-show="dialogStatus === 'detail' ? false : true"
+      slot="footer"
+      class="dialog-footer"
+    >
+      <el-button type="primary" @click="saveData">
+        保存
+      </el-button>
+      <el-button @click="dialogFormVisible = false">
+        取消
+      </el-button>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+import { getDevice, updateDept, addDept } from '@/api/systemConfig/deptPermission'
+export default {
+  name: 'EditDeviceStatics',
+  data() {
+    return {
+      dialogFormVisible: false, // 对话框显示隐藏
+      deviceTypeList: [], // 设备类型
+      dialogStatus: '', // 对话框类型：create,update,detail
+      // 对话框标题
+      textMap: {
+        update: '编辑',
+        create: '新增',
+        detail: '详情'
+      },
+      // 支持井类型
+      wellTypeList: [
+        {
+          label: '井类型一',
+          value: '1'
+        },
+        {
+          label: '井类型二',
+          value: '2'
+        }
+      ],
+      // 表单内容
+      deviceForm: {
+        deptid: '',
+        wellType: '',
+        deviceType: '',
+        lng: '',
+        lat: '',
+        coordinateX: '',
+        coordinateY: '',
+        latBaidu: '',
+        lngBaidu: '',
+        latGaode: '',
+        lngGaode: '',
+        lastTime: '',
+        offlineDays: ''
+      },
+      // 表单校验规则
+      rules: {
+        deptid: [{ required: true, message: '组织id不能为空', trigger: ['blur', 'change'] }],
+        wellType: [{ required: true, message: '支持井类型必选', trigger: ['blur', 'change'] }],
+        deviceType: [{ required: true, message: '支持设备类型必选', trigger: ['blur', 'change'] }],
+        lng: [{ required: true, message: '经度不能为空', trigger: ['blur', 'change'] }],
+        lat: [{ required: true, message: '纬度不能为空', trigger: ['blur', 'change'] }]
+      }
+    }
+  },
+  created() {
+    this.fetchDeviceType()
+  },
+  methods: {
+    // 获取设备类型
+    fetchDeviceType() {
+      getDevice().then(response => {
+        this.deviceTypeList = response.data
+      })
+    },
+    // 重置表单
+    resetForm() {
+      this.deviceForm = {
+        deptid: '',
+        wellType: '',
+        deviceType: '',
+        lng: '',
+        lat: ''
+      }
+    },
+    // 父子组件通信
+    initDialog(dialogStatus, row = null) {
+      this.dialogFormVisible = true
+      this.dialogStatus = dialogStatus
+      if (this.dialogStatus === 'create') {
+        this.resetForm()
+        this.$nextTick(() => {
+          this.$refs['dataForm'].clearValidate()
+        })
+      } else if (this.dialogStatus === 'update' || this.dialogStatus === 'detail') {
+        this.deviceForm = {
+          deptid: row.deptid,
+          wellType: row.wellType,
+          deviceType: row.deviceType,
+          lng: row.lng,
+          lat: row.lat
+        }
+      }
+    },
+    // 保存数据
+    saveData() {
+      if (this.dialogStatus === 'update') {
+        this.updateData()
+      } else if (this.dialogStatus === 'create') {
+        this.createData()
+      }
+    },
+    // 修改数据
+    updateData() {
+      this.$refs['dataForm'].validate((valid) => {
+        if (valid) {
+          updateDept(this.deviceForm).then(response => {
+            if (response.code === 200) {
+              this.$message.success('修改成功')
+              this.$emit('watchChild')
+              this.dialogFormVisible = false
+            }
+          })
+        }
+      })
+    },
+    // 新增数据
+    createData: function() {
+      this.$refs['dataForm'].validate((valid) => {
+        console.log(this.deviceForm)
+        if (valid) {
+          addDept(this.deviceForm).then(response => {
+            if (response.code === 200) {
+              this.$confirm('新增成功，是否继续新增?', '提示', {
+                confirmButtonText: '是',
+                cancelButtonText: '否',
+                type: 'info'
+              }).then(() => {
+                this.resetForm()
+                this.$nextTick(() => {
+                  this.$refs['dataForm'].clearValidate()
+                })
+              }).catch(() => {
+                this.$emit('watchChild') // 刷新父组件数据列表
+                this.dialogFormVisible = false
+              })
+            }
+          })
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  .el-select{
+    width: 100%;
+  }
+</style>
diff --git a/src/views/deviceStatics/components/listdeviceOffline.vue b/src/views/deviceStatics/components/listdeviceOffline.vue
new file mode 100644
index 0000000..dd748fc
--- /dev/null
+++ b/src/views/deviceStatics/components/listdeviceOffline.vue
@@ -0,0 +1,220 @@
+<template>
+  <el-row>
+    <el-col>
+      <el-card shadow="never">
+        <el-col>
+          <div class="flagBoxStyle">
+            <div class="flagStyle" />
+            <div>离线设备</div>
+          </div>
+        </el-col>
+        <el-col>
+          <search-area type="">
+            <!--一般查询条件-->
+            <search-item>
+              <el-input
+                v-model="listQuery.deviceCode"
+                placeholder="设备编号"
+                clearable
+              />
+            </search-item>
+            <search-item>
+              <el-select
+                v-model="listQuery.deviceType"
+                clearable
+                placeholder="设备类型"
+              >
+                <el-option
+                  v-for="item in deviceTypeList"
+                  :key="item.value"
+                  :label="item.name"
+                  :value="item.value"
+                />
+              </el-select>
+            </search-item>
+            <search-item>
+              <el-button size="small" type="primary" class="search-btn" @search="fetchData">
+                搜索
+              </el-button>
+            </search-item>
+            <search-item>
+              <el-button size="small" type="primary" class="search-btn" @click="batchExport">
+                导出
+              </el-button>
+            </search-item>
+          </search-area>
+          <normal-table
+            :data="list"
+            :height="height"
+            :query="listQuery"
+            :total="tableOption.total"
+            :options="tableOption.options"
+            :tools-option="tableOption.toolsOption"
+            :list-loading="listLoading"
+            size="small"
+            @change="changePage"
+          >
+            <template slot="columns">
+              <el-table-column v-for="column in columns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
+                <template slot-scope="scope">
+                  <span :class="column.class">{{ scope.row[column.value] }}</span>
+                </template>
+              </el-table-column>
+              <el-table-column label="操作" width="60" align="center">
+                <template slot-scope="scope">
+                  <el-button type="text" size="small" @click="edit(scope.row)">
+                    详情
+                  </el-button>
+                </template>
+              </el-table-column>
+            </template>
+          </normal-table>
+        </el-col>
+      </el-card>
+    </el-col>
+    <edit-device-statics ref="editDevice" @watchChild="fetchData" />
+  </el-row>
+</template>
+
+<script>
+import { getDeviceType } from '@/api/device/device'
+import { offlineList } from '@/api/data/dataStatics'
+import { batchExportNoiseData } from '@/api/data/data'
+import editDeviceStatics from './editDeviceStatics'
+export default {
+  name: 'ListdeviceOffline',
+  components: { editDeviceStatics },
+  data() {
+    return {
+      height: 300,
+      // 表格属性
+      tableOption: {
+        options: {
+          needIndex: true // 是否需要序号列
+        },
+        toolsOption: {
+          selectColumns: false, // 是否需要筛选列
+          refresh: false // 是否需要刷新按钮
+        },
+        total: 0
+      },
+      // 是否需要序号列
+      options: {
+        needIndex: true
+      },
+      listQuery: {
+        deviceCode: '',
+        deviceType: '',
+        offset: 1,
+        limit: 20
+      },
+      list: [],
+      listLoading: false,
+      deviceTypeList: [],
+      columns: [
+        {
+          text: '设备编号',
+          value: 'deviceType',
+          align: 'center'
+        },
+        {
+          text: '设备类型',
+          value: 'deviceTypeName',
+          align: 'center'
+        },
+        {
+          text: '井编号',
+          value: 'wellCode',
+          align: 'center'
+        },
+        {
+          text: '最近记录上传时间',
+          value: 'lastTime',
+          align: 'center'
+        },
+        {
+          text: '离线天数',
+          value: 'offlineDays',
+          align: 'center'
+        }
+      ] // 显示列
+    }
+  },
+  created() {
+    this.fetchDeviceType()
+    this.fetchData()
+  },
+  methods: {
+    // 获取设备类型
+    fetchDeviceType() {
+      getDeviceType().then(response => {
+        this.deviceTypeList = response.data
+      })
+    },
+    fetchData() {
+      offlineList(this.listQuery).then(response => {
+        this.tableOption.total = response.total
+        this.list = response.data
+      })
+    },
+    // 页数发生变化后的操作，可能是页码变化，可能是每页容量变化，此函数必写
+    changePage(val) {
+      if (val && val.size) {
+        this.listQuery.limit = val.size
+      }
+      if (val && val.page) {
+        this.listQuery.offset = val.page
+      }
+      this.fetchData()
+    },
+    // 批量导出
+    batchExport() {
+      // 全屏加载动画
+      const loading = this.$loading({
+        lock: true,
+        text: '数据处理中,请稍后...',
+        spinner: 'el-icon-loading',
+        background: 'rgba(0, 0, 0, 0.7)'
+      })
+      batchExportNoiseData(this.listQuery).then(res => {
+        loading.close() // 关闭加载动画
+        const blob = new Blob([res.data])
+        const downloadElement = document.createElement('a')
+        const href = window.URL.createObjectURL(blob) // 创建下载的链接
+        downloadElement.href = href
+        downloadElement.download = `离线设备数据.xlsx` // 下载后文件名
+        document.body.appendChild(downloadElement)
+        downloadElement.click() // 点击下载
+        document.body.removeChild(downloadElement) // 下载完成移除元素
+        window.URL.revokeObjectURL(href) // 释放blob对象
+      }).catch((res) => {
+        loading.close()
+      })
+    },
+    // 详情
+    edit(row) {
+      this.$refs.editDevice.initDialog('detail', row)
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.flagBoxStyle {
+  display: flex;
+  margin-bottom: 20px;
+}
+.flagBoxStyle div:nth-child(2){
+  line-height: 30px;
+  font-weight: 600;
+}
+.flagStyle {
+  width: 4px;
+  height: 30px;
+  margin-right: 6px;
+  background: rgb(64 121 242);
+}
+.search-btn {
+  margin-top: 4px;
+}
+</style>
diff --git a/src/views/deviceStatics/deviceStatics.vue b/src/views/deviceStatics/deviceStatics.vue
index 3f04678..001410b 100644
--- a/src/views/deviceStatics/deviceStatics.vue
+++ b/src/views/deviceStatics/deviceStatics.vue
@@ -1,30 +1,44 @@
 <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 class="container">
+    <div class="ChartBoxLeft">
+      <device-count-by-type />
+      <device-count-by-dept />
+    </div>
+    <div class="ChartBoxRight">
+      <device-count-by-offline />
+      <list-device-offline />
+    </div>
   </div>
 </template>
 
 <script>
-import DeviceCountByType from './components/deviceCountByType'
-import DeviceCountByDept from './components/deviceCountByDept'
+import deviceCountByType from './components/deviceCountByType'
+import deviceCountByDept from './components/deviceCountByDept'
+import deviceCountByOffline from './components/deviceCountByOffline'
+import listDeviceOffline from './components/listdeviceOffline'
 export default {
   name: 'DeviceStatics',
   components: {
-    DeviceCountByDept,
-    DeviceCountByType
+    deviceCountByType,
+    deviceCountByDept,
+    deviceCountByOffline,
+    listDeviceOffline
   },
   data() {
   }
 }
 </script>
 
-<style scoped>
-
+<style rel="stylesheet/scss" lang="scss" scoped>
+.container {
+  display: flex;
+  margin-right: 10px;
+}
+.ChartBoxLeft {
+  width: 40%;
+}
+.ChartBoxRight{
+  width: 60%;
+}
 </style>
+
diff --git a/src/views/systemConfig/deptPermission/deptPermission.vue b/src/views/systemConfig/deptPermission/deptPermission.vue
index 4305f54..66e0a5f 100644
--- a/src/views/systemConfig/deptPermission/deptPermission.vue
+++ b/src/views/systemConfig/deptPermission/deptPermission.vue
@@ -1,7 +1,6 @@
 <template>
   <app-container>
     <search-area
-      class="searchBottom"
       :need-clear="false"
       :need-search-more="false"
       type="seperate"
@@ -176,7 +175,4 @@
 </script>
 
 <style rel="stylesheet/scss" lang="scss" scoped>
-  .searchBottom{
-    border-bottom: 12px solid #ebebeb;
-  }
 </style>